@charset "utf-8";
/* CSS Document */
/* com2zoa design KYJ 25.05.29 */
/* ★ 공통스타일은 common.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; border-bottom: 2px solid #e9e9e9}
#subtop h3{color:#000; font-weight:500; text-align: center; font-family:SJG} 

/* 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 13px}
.tabnavi01 ul{display: flex; flex-wrap: wrap}
.tabnavi01 ul li{margin:0 10px 7px 0}
.tabnavi01 ul li a{position: relative; overflow: hidden; display: block; height:auto; line-height:140%; padding: 13px 65px 13px 15px; background:#fff; border:1px solid #ededed; border-radius:13px; font-weight:500; font-size: 16px; color:#000; transition: all .3s}
.tabnavi01 ul li.on a,
.tabnavi01 ul li a:hover{background:#5cbdc5; border-color:#5cbdc5; font-weight: 600; color:#fff}
.tabnavi01 ul li a::after,
.tabnavi01 ul li.on a::after,
.tabnavi01 ul li a:hover::after{content:""; clear:both; display:block; position: absolute; top:5px; right:5px; width:43px; height: 38px; border-radius: 12px}
.tabnavi01 ul li a::after{background: url(../images/sub/btn_tab.png) center no-repeat #f5f5f5}
.tabnavi01 ul li.on a::after,
.tabnavi01 ul li a:hover::after{background: url(../images/sub/btn_tab_a.png) center no-repeat #81ccd2}

/* Tab02, boardTab */
.tabnavi02{margin:0 0 20px}
.tabnavi02 ul, .boardTab ul {padding:5px 20px 10px; border-radius:13px; border:2px solid #f0f0f0}
.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:#4bb1b9; font-weight: 600}

/******************************서브컨텐츠 영역**************************************/
/* 컨텐츠 공통 */
/* TIT */
h4.sub_tit4 {position: relative; line-height:140%; padding:0 0 0 18px; margin:30px 0 13px; font-size:20px; font-weight:600}
h4.sub_tit4::after{content:""; clear:both; display:block; position: absolute; left:0; top:-10px; width: 27px; height: 15px; background:url(../images/sub/subtit4.png) no-repeat left 0}
h5.sub_tit5 {line-height:140%; padding:0 0 0 18px; margin:5px 0 12px 0; background:url(../images/sub/subtit5.png) no-repeat left 7px; font-size:18px; font-weight:500}

/*Flyuserqmu*/
/*메뉴목록*/
#fly_userqmu .quick_box .qbtit{font-family:SJG; font-size: 18px; text-align: center}
#fly_userqmu .quick_box.qb01 .qbtit{color:#4fafed}
#fly_userqmu .quick_box.qb02 .qbtit{color:#5cbdc5}
#fly_userqmu .quick_box {display:none}
#fly_userqmu .quick_box.qb01{border-color:#4fafed}
#fly_userqmu .quick_box.qb02{border-color:#5cbdc5}
#fly_userqmu .quick_list li a {display: block; min-height:28px; align-content:space-around; transition: all .3s}
#fly_userqmu .quick_list li a span{display: block} 
#fly_userqmu .quick_list li a span.tit{height:34px; line-height: 130%; align-content: space-around}
#fly_userqmu .quick_list li:hover a{color:#fff; font-weight: 600} 
#fly_userqmu .quick_box.qb01 li:hover a{background: #4fafed}
#fly_userqmu .quick_box.qb02 li:hover a{background: #5cbdc5}
/*닫기(모바일에서만 나옴)*/
#fly_userqmu .qmu_close{display:none}
/*TOP버튼*/
#fly_userqmu .btn_top a {display: block; font-family:SJG; text-shadow:0 1px 1px rgba(0, 0, 0, 0.2)}
/*사용자 버튼*/
#fly_userqmu .qkbtn{overflow: hidden; display: block; justify-content: space-between; color:#fff; line-height: 150%; font-family:SJG; text-shadow:0 1px 1px rgba(0, 0, 0, 0.2)}  
#fly_userqmu .quick_btns .qkbtn01{background:#4fafed}
#fly_userqmu .quick_btns .qkbtn02{background:#5cbdc5} 
#fly_userqmu .quick_btns li.on .qkbtn01 {background:#206ea0}  
#fly_userqmu .quick_btns li.on .qkbtn02 {background:#3d858b}  
#fly_userqmu .quick_btns li:hover .qkbtn01 {background-color:#206ea0}  
#fly_userqmu .quick_btns li:hover .qkbtn02 {background-color:#3d858b} 

/* -------------------컨텐츠 스타일 시작 -------------------*/




/* MOBILE LAYOUT */
@media only screen and (max-width:1024px) {
/* Visual*/
.subvisual .visual_wrap {position: relative;  margin: 0 auto}
.subvisual .visual_item{position: relative; width:auto; height:94px; margin: 0 auto}
.subvisual .item1{background:url(../images/sub/sv01_m_new.jpg) no-repeat top center}
.subvisual .item2{background:url(../images/sub/sv02_m_new.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:0 0 13px; border-radius: 10px 10px 0 0}
#subtop h3{position: relative; height: auto; padding: 55px 0 15px; font-size: 17px; color:#000}
#subtop h3 span{padding:4px 0 3px 35px; 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}
#sub_guide .btn_home {display: block; position: absolute; left: 0; top: 0}
#sub_guide .btn_home a {display: block; width: 41px; height: 41px; border-radius:0 0 12px 12px; background:url(../images/sub/btn_mb_home.png) no-repeat center #6b7e8c; 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{background: #4d5d68; border-radius:0 0 12px 12px}
#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 #67c4c7; 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:#457c2a; font-weight: 600}
    
/* Tab01 */
.tabnavi01{margin:0 0 5px}
.tabnavi01 ul li a{padding: 10px 50px 10px 10px; font-size: 14px; background-size: 23px}
.tabnavi01 ul li.on a, .tabnavi01 ul li a:hover{background-size: 23px}
.tabnavi01 ul li a::after,
.tabnavi01 ul li.on a::after,
.tabnavi01 ul li a:hover::after{width:32px; height: 30px; border-radius: 10px}

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

/*고정 퀵메뉴(슬라이드 X)*/
.fixquick_menu{position: relative; margin: 0;  z-index: 10}
.fixquick_menu li:nth-child(3), .fixquick_menu li:nth-child(4){display: none}

/* Footer */
#footwrap{padding:0 10px 50px} 

/******************************서브컨텐츠 영역**************************************/
/* 컨텐츠 공통 */
h4.sub_tit4 {font-size: 17px}
h5.sub_tit5 {background-position:left 5px; font-size: 15px; font-weight: 600}

/*Flyuserqmu*/
#fly_userqmu {position: fixed; left:5px; top:inherit !important; bottom: 0; min-width: 300px; height:41px; width:calc(100% - 10px); z-index:1}
#fly_userqmu .quick_wrap{position:relative; padding: 0 62px 0 0}
/*메뉴목록*/
#fly_userqmu .quick_box {overflow: hidden; position: absolute; top:-206px; left:0; width:100%; height:206px; padding: 15px 15px; border-radius:15px; background: #fff; border:3px solid #ccc;box-sizing:border-box} 
/*메뉴버튼(모바일)*/
#fly_userqmu .quick_btns {display: flex}
#fly_userqmu .quick_btns li {width:calc(100% / 2); text-align: center}
#fly_userqmu .quick_btns li .qkbtn {position: relative; height:35px; line-height: 35px; padding: 0 7px; margin:7px 5px 0 0; border-radius:10px 10px 0 0; font-size:14px; box-sizing: border-box; box-shadow:0 -2px 2px rgba(0, 0, 0, 0.1)}
#fly_userqmu .quick_btns li .qkbtn img{width: 23px}
#fly_userqmu .quick_btns li .qkbtn br{display:none}
/*메뉴목록*/
#fly_userqmu .quick_list {display:flex; gap:10px; margin-top: 10px; text-align: center; font-weight: 500}
#fly_userqmu .quick_list li {flex: 1; margin:0 auto 15px}
#fly_userqmu .quick_list li a{padding:8px 5px; border-radius: 20px 20px 5px 5px; background: #f2f2f2}
#fly_userqmu .quick_list li span.qico{height: 61px; align-content: space-around}
#fly_userqmu .quick_list li span.qico img{width: 40px}

/*닫기*/
#fly_userqmu .qmu_close{display: block; padding:7px 5px 4px; border-radius: 50px; background:#ddd; text-align: center}
#fly_userqmu .qmu_close span{display: inline-block; padding-right: 16px; background:url(../images/sub/qmu_close.png) no-repeat right 1px}
#fly_userqmu .quick_btns li.on .quick_box {display: block}
/*TOP버튼*/
#fly_userqmu .btn_top {position: absolute; top:7px; right:0} 
#fly_userqmu .btn_top span{display: block; width: 62px; height: 35px; background:url(../images/sub/btn_qmutop_m.png) no-repeat center #677076; border-radius: 10px 10px 0 0; font-size: 0; text-indent: -9999px}
    
/* -------------------컨텐츠 스타일 시작 -------------------*/
}



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

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

/*재생,일시정지*/
.visual_wrap .btn_visual{bottom:52px; margin:0 417px 0 0}
/*비주얼 이동 블릿*/
.slick-dots {bottom:55px; margin:0 435px 0 0}

/* Subleft */
.left_tit{position: relative; width: 278px; height: 115px; margin: -115px 0 15px; background: #4d5d68; border-radius: 13px 13px 0 0; text-align: center; box-sizing: border-box; font-family:SJG}
.left_tit h2 {position: relative; padding:35px 0 13px; font-size:1.615em; font-weight: 400; color:#fff; box-sizing: border-box} 
.left_tit .eng_sch{ font-size: 1.077em; font-weight: 600; color:#707b83}
.leftmn{position: relative; width: 278px; padding-bottom:50px; box-sizing: border-box}
.leftmn > ul > li{margin-bottom: 14px}
.leftmn > ul > li > a{position: relative; display: block; line-height: 140%; padding:13px 62px 13px 13px; background:#fff; border-radius: 13px; border:1px solid #e9e9e9; 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:11px; right:13px; width: 47px; height: 28px; border-radius: 50px; background:url(../images/sub/btn_leftmu.png) no-repeat center #dfdfdf}
.leftmn ul > li > a:hover::after,
.leftmn .leftmenuover > a::after{background:url(../images/sub/btn_leftmu_a.png) no-repeat center #fff; box-shadow:0 2px 2px rgba(0, 0, 0, 0.1)}
.leftmn ul > li > a:hover,
.leftmn ul > li.leftmenuover > a{background:#63bcf5; border-color: #63bcf5; color:#fff; font-weight: 600; text-decoration:none; text-shadow:0 2px 2px rgba(0, 0, 0, 0.1)}
/*MN third*/
.leftmn .third{position: relative; padding:10px; margin-top: 8px; background: #f8f8f8; border-radius: 13px; box-sizing: border-box}
.leftmn .third::before{left:10px}
.leftmn .third::after{right:10px}
.leftmn .third li{border-bottom: 1px solid #e2e2e2}
.leftmn .third li:last-child{border-bottom: none}
.leftmn .third li a{position: relative; display: block; font-size: 1.077em; line-height: 140%; padding:6px 6px 6px 25px; margin: 7px 0; color:#383838; transition: all .3s} 
.leftmn .third li:first-child a{margin-top: 0}
.leftmn .third li:last-child a{margin-bottom: 0}
.leftmn .third li:hover a, .leftmn .third .on a,
.leftmn .third .third_on a {color:#000; font-weight: 600}
.leftmn .third li a::after{display: block; clear: both; content: ''; position: absolute; top:14px; left:10px; width: 5px; height: 5px; background: #b7b7b7; border-radius: 50px}
.leftmn .third li a:hover::after,
.leftmn .third .third_on a::after{background:#616161}
.leftmn .third li a:hover{background:#e0e0e0; border-color:#e2e2e2; border-radius: 8px; color:#000; font-weight:600; text-shadow:none}

/*Subtop TIT */
#subtop{position: relative; margin-bottom: 17px}
#subtop h3{ padding: 21px 10px; font-size:1.615em} 

/* PC guide*/
#sub_guide{width: 100%}
#sub_guide .guide_wrap{position: absolute; top:-32px; right:5px; z-index: 10} 
#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 {position: absolute; top:-37px; left:0; display: flex; justify-content: space-between; width: 265px;  box-sizing: border-box; z-index: 1}
.subtop_btn dl.font{display: flex; gap:7px}
.subtop_btn dl.font > dt{width: 55px; padding-left: 23px; background: url(../images/sub/ico_fontsize.png) left center no-repeat; color:#5b5b5b; font-weight: 700; align-content: space-around}
.subtop_btn dl.font > dd a{display: block; width: 42px; min-height: 28px; border-radius: 50px; 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: #ddd}
.subtop_btn .btn_print a{display:block; width: 28px; height: 28px; background: url(../images/sub/btn_print.png) center no-repeat; 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}

/*Flyuserqmu*/
#fly_userqmu {position: absolute; right:0; top:260px; z-index: 100}
/*메뉴버튼*/
#fly_userqmu .qmubox{position: relative; width: 97px; height: 221px} 
#fly_userqmu .quick_btns .qkbtn{overflow: hidden; position: relative; width:97px; height:107px; padding:50px 10px 10px 10px; background-position: top 15px center; background-repeat: no-repeat; font-size:15px; text-align: center; box-sizing: border-box; box-shadow:0 1px 3px rgba(0, 0, 0, 0.1)} 
#fly_userqmu .quick_btns .qkbtn01{background-image:url(../images/sub/btn_qmu01.png); border-radius:30px 0 0 10px; margin-bottom: 8px}
#fly_userqmu .quick_btns .qkbtn02{background-image:url(../images/sub/btn_qmu02.png); border-radius:10px 0 0 30px; padding-top:60px; background-position: top 24px center}
/*메뉴목록*/
#fly_userqmu .quick_box{overflow: hidden;  position: absolute; right: calc(100% + 1px); top:0; width: 267px; height:222px; padding-right: 10px; padding:15px 10px; border-radius:30px; background: #fff; border:3px solid #ccc;box-sizing:border-box}
#fly_userqmu .quick_btns .btn:hover .quick_box{display: block}
#fly_userqmu .quick_list{margin-top: 12px}
#fly_userqmu .quick_list li{margin: 0; align-content: space-around} 
#fly_userqmu .quick_list li a{display: flex; justify-content:space-between; height: 46px; margin-bottom:10px; padding:0 15px 0 0; border-radius: 15px; background: #f2f2f2; text-align: right; line-height: 130%; box-shadow:0 1px 3px rgba(0, 0, 0, 0.1)}
#fly_userqmu .quick_list li:last-child a{margin-bottom: 0}
#fly_userqmu .quick_list li a span{display: block; align-content: space-around}
#fly_userqmu .quick_list li a span.qico{width: 60px; text-align: center; transform: scale(60%)}
#fly_userqmu .quick_list li a span.qtit{font-size: 14px; font-weight: 600}
#fly_userqmu .quick_list li a span.qtit br{display: none}
/*TOP버튼*/
#fly_userqmu .btn_top a{width: 97px; height: 38px; padding:6px 10px; margin-top: 9px; border-radius:50px 0 0 50px; font-size: 15px; color:#fff; background: #4d5d68; box-sizing: border-box}
#fly_userqmu .btn_top a span{display: block; padding: 5px 0; background:url(../images/sub/btn_qmutop.png) no-repeat center right}

/******************************서브컨텐츠 영역**************************************/
/* 컨텐츠 공통 */
}


/**** LOWSET FIX ****/
@media only screen and (max-width:550px) {
/* Tab02, boardTab */
.tabnavi02 ul li, .boardTab ul li {width: 50%}
}