@charset "utf-8";
/* CSS Document */
/* com2zoa design KYJ 25.04.18 */
/* ★ 공통스타일은 common.css에 있음 */
/* ★ 컨텐츠스타일은 content.css에 있음 */

/* Layout */
#subpage .basics_font{font-weight: 500; color:#000}/*기준폰트는 common.css에 있음 [MOBILE : 14px] / [PC : 15px] **규정과 같이 글밥이 많은 경우에는 안씀!(기준은 -1px) */
#sub_left {display: none}
#subpage {min-height: 300px; line-height:150%; margin:0 10px 50px 20px; font-weight:500; color:#000}
.qmu_popup{display: none}

/*Subtop */
#subtop {position:relative}
#subtop h3{ text-align: center}
#subtop h3 span{display:inline-block; background:url(../images/sub/ico_h3tit.png) no-repeat left center; color:#000; font-weight:500}

/* Guide */
#sub_guide{z-index:500}
#sub_guide .btn_home {display: none}
#sub_guide .submn {display: none}
#sub_guide .guide_wrap {position: relative}

/* Tab01 */
.tabnavi01{margin:0 0 15px}
.tabnavi01 ul{display: flex; flex-wrap: wrap}
.tabnavi01 ul li{margin:0 10px 7px 0}
.tabnavi01 ul li a{overflow: hidden; display: block; height:auto; line-height:140%; padding: 13px 65px 13px 15px; background:url(../images/sub/btn_tab.png) no-repeat right 11px center #fff; border:2px solid #e9e9e9; font-weight:500; font-size: 15px; color:#000; transition: all .3s}
.tabnavi01 ul li.on a,
.tabnavi01 ul li a:hover{background:url(../images/sub/btn_tab_a.png) no-repeat right 11px center #4d5259; border-color:#4d5259; font-weight: 600; color:#fff}

/* Tab02, boardTab */
.tabnavi02{margin:0 0 20px}
.tabnavi02 ul, .boardTab ul {padding:10px 20px 15px; background: #f6f6f6}
.tabnavi02 ul:after, .boardTab ul:after {content:""; clear:both; display:block; height:0; font-size:0; line-height:0}
.tabnavi02 ul li,
.boardTab ul li { float: left; width: 16.6%; height: 13px; padding: 10px 0}
.tabnavi02 ul li a,
.boardTab ul li a {display: block; height: 21px; line-height: 21px; padding-left: 20px; background: url(../images/sub/blt_othertab.png) left 4px no-repeat; font-weight: 500; font-size: 15px; color: #000; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tabnavi02 ul li.on a,
.tabnavi02 ul li:hover a,
.boardTab ul li.on a,
.boardTab ul li:hover a {height: 21px; line-height: 21px; background: url(../images/sub/blt_othertab_a.png) left 4px no-repeat; color:#ff7f65; font-weight: 600}

/*Btn_top*/
#quickmenu.squick {position: absolute; top:260px; z-index:101} 

/*서브 고정퀵메뉴*/   
.fixquick_menu ul li a{height: 130px; font-size: 18px}
.fixquick_menu ul li a::after{bottom:-60px; right: -40px; width:120px; height: 120px} 
.fixquick_menu ul li a span.fq_tit{padding: 18px 20px}
.fixquick_menu ul li a span.fq_tit::after{top:17px; right:17px; width: 38px; height: 38px}
.fixquick_menu ul li a span.fq_img{bottom:10px; right:20px}
.fixquick_menu ul li a span.fq_img img{width: 53px} 
 
/* 컨텐츠 공통 */
/* TIT */
h4.sub_tit4 {position: relative; line-height:140%; padding:0 0 0 20px; margin:5px 0 13px; font-size:1.429em; font-weight:500; font-family:'SEBANG_Gothic'}
h4.sub_tit4::after{display: block; clear: both; content: ''; position: absolute; top:3px; left:0; width: 6px; height: 20px; background: #3096cf}
h5.sub_tit5 {position: relative; line-height:140%; padding:0 0 0 20px; margin:5px 0 12px 0; font-size:1.214em; font-weight:500; font-family:'SEBANG_Gothic'}
h5.sub_tit5::after{display: block; clear: both; content: ''; position: absolute; top:10px; left:0; width: 6px; height: 6px; background: #7f7f7f; transform: rotate(-45deg)}

/* 스포츠 종합지원센터 리스트스타일-기본 */
.cz_lstbx,
.cz_lstbx > ul > li .inner_lst,
.cz_lstbx > ol > li .inner_lst,
.cz_lstbx > ul > li .inner_txt,
.cz_lstbx > ol > li .inner_txt{border-radius:0 !important}
 

/* MOBILE LAYOUT */
@media only screen and (max-width:1024px) {
/* Visual*/ 
.subvisual .visual_wrap {position: relative;  margin: 0 auto; padding-top: 96px}
.subvisual .visual_item{position: relative; width:auto; height:151px; margin: 0 auto}
.subvisual .item1{background:url(../images/sub/sv01_m.jpg) no-repeat top center}
.subvisual .item2{background:url(../images/sub/sv02_m.jpg) no-repeat top center}

/* Layout */
.subconwrap{margin:0 10px}
#subright{position: relative}
#subright.nomargin {margin-top:0 !important}
#subtop{width:100%; height:auto; margin:5px 0 13px; border-radius: 10px 10px 0 0}
#subtop h3{position: relative; height: auto; padding: 55px 0 15px; border-bottom: 1px solid #dfdfdf; font-size: 17px; color:#000; font-weight: 600}
#subtop h3 span{background-size: 23px}
#subpage {margin:20px 0 30px}
#footwrap{padding-bottom:15px}
#footwrap .add .address p.copy{padding:0 50px}
    
/* MB guide */
#sub_guide {position: absolute; top:0; left:0; width: 100%; font-size: 14px; z-index:15}
#sub_guide .guide_wrap {padding: 0 0 0 45px; background-color: #4d5259}
#sub_guide .btn_home {display: block; position: absolute; left:0; top:0}
#sub_guide .btn_home a {display: block; width: 43px; height: 41px; background:url(../images/sub/btn_mb_home.png) no-repeat center #8a8f97; text-indent:-9999999px}
#sub_guide .btn_home span{overflow:hidden; height:0; width:0; line-height:0; font-size:0; text-indent:-9999999px}
#sub_guide .navi_area > ul > li{position: relative; float: left; width: 33.3%;  background:url(../images/sub/btn_mb_arr.png) no-repeat right 7px center}
#sub_guide .navi_area > ul > li > a {display: block; height: 41px; line-height: 41px; padding:0 33px 0 8px; font-weight: 500; border-right: 1px solid #fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#fff}
#sub_guide .navi_area > ul > li:last-child a{border-right: none}
#sub_guide .navi_area > ul > li.nav_home{display: none}
#sub_guide .submn {overflow: hidden; position: absolute; left: 0; top: 100%; width:90%;  margin: 0 auto; background: #fff; border:2px solid #4d5259; border-radius: 10px; z-index: 10}
#sub_guide .submn ul { padding: 0 6px}
#sub_guide .submn li {padding: 8px 0 8px 5px; border-bottom: 1px solid #ccc; z-index: 150}
#sub_guide .submn li:last-child{border:none}
#sub_guide .submn li a {display: block; line-height: 160%; color: #404040; font-weight: 500}
#sub_guide .submn li a:hover{color:#409dd9; font-weight: 600}

/* Tab01 */
.tabnavi01{margin:0 0 5px}
.tabnavi01 ul li a{padding: 10px 50px 10px 10px; font-size: 14px} 

/* Tab02, boardTab */
.tabnavi02{margin:0 0 10px}
.tabnavi02 ul,
.boardTab ul {padding:0 10px 12px}
.tabnavi02 ul li,
.boardTab ul li {width: 50%; padding:10px 0; font-size:14px}
.tabnavi02 ul li a,
.boardTab ul li a{padding-left: 15px}

/*고정 퀵메뉴(슬라이드 X)*/
.fixquick_menu{position: relative; margin: -96px 0 0; z-index: 10}
.fixquick_menu ul li a{height: 77px; font-size: 15px}
.fixquick_menu ul li a::after{width:110px; height: 110px} 
.fixquick_menu ul li a span.fq_tit{padding: 15px} 
.fixquick_menu ul li a span.fq_tit::after{display: none}
.fixquick_menu ul li a span.fq_img{bottom:10px; right:10px}
.fixquick_menu ul li a span.fq_img img{width: 42px} 
.fixquick_menu li:nth-child(2),
.fixquick_menu li:nth-child(4){display: none}

/*Btn_top*/
#quickmenu.squick {right:10px} 
 
/* 컨텐츠 공통 */
h4.sub_tit4 {padding:0 0 0 17px; font-size: 17px}
h4.sub_tit4::after{top:1px}
h5.sub_tit5 {padding: 0 0 0 17px; font-size: 15px}
h5.sub_tit5::after{top:7px}
}


/* PC LAYOUT */
@media only screen and (min-width:1025px) {
/* Layout */
#subcontainer{position: relative; z-index: 1}
.subcontain{position: relative}
.subconwrap{position: relative; width: 1700px; margin:127px auto 0; z-index: 1}
.subconbox {position: relative; display: flex; justify-content: space-between; margin-top:39px}
#sub_left {position: relative; width: 325px; display: block;  margin-bottom: 50px}
#subright {position: relative; width: 1339px}
#subpage{margin:5px 0 50px}

/* Visual */
.subvisual{z-index: 1}
.subvisual .visual_wrap {position: relative; width: 100%; margin: 0 auto}
.subvisual .visual_item {width:auto; height:310px}
.subvisual .item1{background:url(../images/sub/sv01_p_n.jpg) no-repeat top center}
.subvisual .item2{background:url(../images/sub/sv02_p_n.jpg) no-repeat top center}

/*재생,일시정지*/
.slick-dots{bottom:16px; margin:0 0 0 -850px; z-index:5}
.visual_wrap .btn_visual{bottom:14px; z-index:5}

/*고정 퀵메뉴(슬라이드 X)*/
.fixquick_menu{margin:-277px auto 0}

/* Subleft */
.left_tit{position: relative; height: 104px; padding:28px 5px; margin-bottom: 20px; background:url(../images/sub/left_titbg.png) no-repeat right bottom #4d5259; border-radius: 30px 0 0 0; text-align: center; box-sizing: border-box}
.left_tit h2 {font-size:1.615em; font-weight: 600; color:#fff; letter-spacing: 1px} 
.left_tit .eng_sch{padding-top: 12px; font-size: 1.077em; font-weight: 600; color:#8f8f8f}
.leftmn{position: relative; padding-bottom: 78px; box-sizing: border-box}
.leftmn{padding:0 10px; border:2px solid #f0f0f0} 
.leftmn > ul > li{border-bottom:1px solid #e5e5e5}
.leftmn > ul > li:last-child{border-bottom: none}
.leftmn > ul > li > a{position: relative; display: block; line-height: 140%; padding:18px 62px 18px 10px; background:#fff; font-size:1.308em; font-weight:500; color: #000; transition: all .3s; box-sizing: border-box}
.leftmn > ul > li > a::after{display: block; clear: both; content:''; position: absolute; top:17px; right:10px; width: 45px; height: 25px; border-radius: 50px; background:url(../images/sub/btn_leftmu.png) no-repeat center #d5d5d5}
.leftmn ul > li > a:hover::after,
.leftmn .leftmenuover > a::after{background-color:#ff7f65}
.leftmn ul > li > a:hover,
.leftmn ul > li.leftmenuover > a{ border-bottom: none; color:#ff7f65; font-weight: 600; text-decoration:none}
/*MN third*/
.leftmn .third{position: relative; background: #f7f7f7; box-sizing: border-box}
.leftmn .third::before{left:10px}
.leftmn .third::after{right:10px}
.leftmn .third li a{position: relative; display: block; font-size: 1.077em; line-height: 140%; padding:13px 10px 13px 25px; border-bottom: 1px solid #e5e5e5; color:#383838; transition: all .3s}
.leftmn .third li:last-child a{border-bottom: none; margin-bottom: 0}
.leftmn .third li:hover a,
.leftmn .third .on a,
.leftmn .third .third_on a {background: #8a8f97; color:#fff; font-weight: 600}
.leftmn .third li a::after{display: block; clear: both; content: ''; position: absolute; top:21px; left:12px; width: 4px; height: 4px; border-radius: 5px; background: #a7a7a7}
.leftmn .third li a:hover::after,
.leftmn .third .third_on a::after{background:#fff} 

/*Subtop TIT */
#subtop{position: relative; height:104px; padding: 17px 0 27px; margin-bottom: 20px; border-bottom: 1px solid #e5e5e5; box-sizing:border-box}
#subtop h3{width: auto; padding: 40px 0 0; text-align: left}
#subtop h3 span{display: block; font-size:1.643em}

/* PC guide*/ 
#sub_guide .guide_wrap{position: absolute; top:19px; left:0; z-index: 10}
#sub_guide:after {content:""; clear:both; display:block; height:0; font-size:0; line-height:0}
#sub_guide .navi_area ul {display: flex; text-align: center}
#sub_guide .navi_area li {display: block; width:auto !important; align-content: space-around}
#sub_guide .navi_area li a {display: block;padding: 0 9px 0 13px; line-height: 19px; background: url(../images/sub/navi_arr_pc.png) 0 50% no-repeat; color:#727272; font-weight:500; font-size: 12px}
#sub_guide .navi_area li:first-child a {background: none; padding-left: 0}
#sub_guide .navi_area li.m_menu {display: none}
#sub_guide .navi_area li.page_on a{ font-weight:700}
#sub_guide .navi_area > ul > li.nav_home a{width: 15px; height: 19px; padding:0 9px 0 0; height: 19px}
#sub_guide .navi_area > ul > li.nav_home a img{display: block; padding-top: 2px}

/* subtop_btn */
.subtop_btn {display: flex; justify-content: space-between; position:absolute; bottom:16px; right:0; z-index: 1}
.subtop_btn dl.font{display: flex; gap:8px; margin-right: 8px}
.subtop_btn dl.font > dt{overflow:hidden; height:0; width:0; line-height:0; font-size:0; text-indent:-9999999px}
.subtop_btn dl.font > dd a{display: block; width: 40px; height: 40px; border-radius: 50px; border:1px solid #dfdfdf; background: #fff; text-align: center; box-sizing: border-box; transition: all .2s; align-content: space-around; box-shadow:0 1px 2px rgba(0, 0, 0, 0.1)}
.subtop_btn dl.font > dd a:hover{background: #f0f0f0}
.subtop_btn .btn_print a{display:block; width: 40px; height: 40px; border-radius: 50px; background: url(../images/sub/btn_print.png) center no-repeat #e9e9e9; font-size: 0; text-indent: -9999px; align-content: space-around; transition: all .3s}
.subtop_btn .btn_print a:hover{background: url(../images/sub/btn_print_a.png) center no-repeat #d9d9d9}

/*Btn_top*/
#quickmenu.squick {right:-70px} 
}
  

/**** LOWSET FIX ****/
@media only screen and (max-width:1855px) {
/*Btn_top*/
#quickmenu.squick {right:3px; top:340px}
#quickmenu.squick .btn_top a{display: block; width: 32px; height: 32px; background:url(../images/sub/btn_topup_m.png) no-repeat center}
#quickmenu.squick .btn_top a img{display: none}
}

@media only screen and (max-width:390px) {
/*고정 퀵메뉴(슬라이드 X)*/
.fixquick_menu{position: relative; margin: -96px 0 0; z-index: 10}
.fixquick_menu ul li a{height: 77px; font-size: 14px}
.fixquick_menu ul li a::after{width:100px; height: 100px} 
.fixquick_menu ul li a span.fq_tit{padding: 10px 10px} 
.fixquick_menu ul li a span.fq_tit::after{display: none}
.fixquick_menu ul li a span.fq_img{bottom:7px; right:10px}
.fixquick_menu ul li a span.fq_img img{width: 37px} 
.fixquick_menu li:nth-child(2),
.fixquick_menu li:nth-child(4){display: none}   
}