@charset "utf-8";
/* CSS Document */
/* com2zoa design kjh, publishing kjh 2026.07.27 */

/* Common */
.clear_fix::after{content: ''; display: block; clear: both}
.qmenu .qmu_popup {display: none}

/* Layout */
#sub_left {display: none}
#subpage {min-height:400px; line-height:150%; padding:0 10px 50px 20px; font-weight:400}
.subtop_tit {text-align: center; width:100%; min-height:94px}
.subtop_tit h2 {position:relative; font-size:2.923em; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,0.2)}

.subtop_tit h2.titeffect {opacity:0; will-change:transform, opacity}
.subtop_tit h2.titeffect.on {animation:titeffect 1s cubic-bezier(.22,1,.36,1) forwards}

/* Subtop */
#subtop {position:relative}
.guide_wrap {position: relative; height:60px; max-width:1300px; margin: 0 auto; padding:0 10px; box-sizing: border-box}
.guide_wrap .btn_home a {display: block; width: 60px; height:60px; background:url(../images/sub/btn_home.png) 50% 50% no-repeat, linear-gradient(125deg, #ea6184 ,#feb648); font-size:0; border-radius:10px 0 0 10px}
.guide_wrap .navi_area {display:flex; background:#fff; border-radius:10px; box-shadow:0 2px 10px rgba(0,0,0,0.1)}
.guide_wrap .navi_area a {display: block; color: #000}
.guide_wrap .navi_area > ul {display:flex; width:100%}
.guide_wrap .navi_area > ul > li {position: relative; border-right:1px solid #e8e8e8}
.guide_wrap .navi_area > ul > li > a {height:60px; line-height:60px; padding:0 12px; font-size:18px; font-weight:500; background: url(../images/sub/btn_nav_arr.png) no-repeat right 10px top 50%; text-overflow:ellipsis; white-space:nowrap; box-sizing: border-box}
.guide_wrap .navi_area > ul > li.active > a {color:#f1632e; background:url(../images/sub/btn_nav_onarr.png) no-repeat right 10px top 50%}
.guide_wrap .navi_area > ul > li:last-child > a {color:#f1632e; background:url(../images/sub/btn_nav_onarr.png) no-repeat right 10px top 50%}

.guide_wrap .submn {position: absolute; left:-1px; top:60px; z-index:5; background:#fff; width:calc(100% + 2px); display: none}
.guide_wrap .submn ul {padding:2px 6px; border:1px solid #e8e8e8; box-sizing: border-box; border-radius:0 0 10px 10px}
.guide_wrap .submn li {border-top: 1px solid #e2e2e2}
.guide_wrap .submn li a {display: block; line-height: 1.2; margin:3px 0; padding:12px 10px; color: #000; transition: all .3s; border-radius:5px; font-size:1.231em; font-weight:500; transition:.3s; text-align: center}
.guide_wrap .submn li:first-child  {border: 0}
.guide_wrap .submn li:hover a {background:linear-gradient(90deg, #ec6b7d, #fcab4f); color:#fff}
    
/* subvisual */
.subvisual .visual_wrap {position: relative; width: 100%; margin: 0 auto}
.subvisual .visual_item {width:auto; height:228px}
.subvisual .visual_item > a {height:224px}
.subvisual .item1 {background:url(../images/sub/subv_m.jpg) no-repeat 50% 0; background-size:cover !important}
.subvisual .visual_wrap .vslogan {display: none}

/* subtit */
h3.subtit {margin:50px 0 0; border-bottom:1px solid #ddd; text-align: center; font-size:30px}
h3.subtit span {position:relative; display:inline-block; padding:0 15px 25px}
h3.subtit span:after {content:""; display:block; position:absolute; bottom:-1px; left:0; width:100%; height:3px; background:#fb600a}

/********************************************* SUB content **********************************************/
/* content Common */
h4.sub_tit4 {line-height:140%; padding:30px 0 0 0; margin:10px 0 30px; background:url(../images/sub/subtit4.png) no-repeat left top; font-size:1.846em; font-weight:600; color:#000}


/* -------------------// 공통스타일 -------------------*/
.tabnavi01 {padding:0 10px; margin-bottom:30px}
/* -----------------컨텐츠 스타일 시작 -----------------*/

/* 서브 퀵 */
#quickmenu .sub_quick {display: none}




    
/********* MOBILE LAYOUT *********/
@media only screen and (max-width:1024px) {

/* Layout */
.subconwrap {background:url(../images/sub/subv_mbott.jpg) no-repeat left 50% bottom 0 }
.subconbox {margin-top:-136px}
#subright{position: relative}
#subright.nomargin {margin-top:0 !important}
#subtop h3 {margin:20px 10px 20px; font-size:20px}
#subtop h3 span {padding:0 10px 15px}
#subpage {padding:0 10px 150px}

/* Visual*/
.subvisual .visual_wrap .ctrl_dots {display: none}
.subvisual .visual_wrap .btn_visual {display: none}

/* 서브 컨텐츠 영역 */
.subtop_tit {min-height:50px}
.subtop_tit h2 {font-size:1.846em}
.guide_wrap {height:40px}
.guide_wrap .btn_home a {width:40px; height:40px; background-size:17px auto, 100% 100%}
.guide_wrap .navi_area > ul > li > a {height:40px; line-height:40px; font-size:1.077em; padding:0 25px 0 10px; background-position:right 5px top 50% !important}
.guide_wrap .submn {top:40px}
.guide_wrap .navi_area > ul > li:last-child {border:0}
.guide_wrap .submn li a {padding:5px 10px; font-size:1em; word-break: break-all}

/********************************************* SUB content **********************************************/
/*MB에서 필요 없을때 선언*/
.mb_none{display: none}
    
/* -------------------공통스타일 -------------------*/

    h4.sub_tit4 {padding:25px 0 0 0; margin:5px 0 15px; font-size:1.385em}
    
/* ----------------컨텐츠 스타일 시작 ----------------*/


}


/* PC LAYOUT */
@media only screen and (min-width:1025px) {
#wrap {overflow: hidden}
    
.gnb_box {padding:0px 100px 0 265px}
    
/* Layout */
.subconwrap {position: relative; background:url(../images/sub/subv_bott.jpg) no-repeat bottom 0 left 50%; background-size:contain}
.subconbox {max-width:1300px; margin:-242px auto 0; box-sizing: border-box}
#subright {position: relative; width:100%}
#subpage {padding:0 0 220px; min-height:600px}
    
/* subvisual */
.subvisual .visual_wrap:after {display:none}
.subvisual .visual_item {height:382px}
.subvisual .visual_item > a {height:378px}
.subvisual .item1 {background:url(../images/sub/subv_pc.jpg) no-repeat 50% 0}

/*Subtop TIT */
#subtop {margin-bottom:35px}
    
/* 가이드메뉴 */
.guide_wrap {padding:0}
.guide_wrap .navi_area > ul > li > a {width:250px}

/* 서브 퀵 */
#quickmenu {display: block; position: absolute;top:234px; right:10px; z-index:1}
#quickmenu .sub_quick {overflow: hidden; display:block; width:110px; border-radius:15px; background:#fff; border:1px solid #404040}
.sub_quick .sub_qtit {background:#404040; padding:8px 10px; text-align: center; color:#fff; font-size:1.154em; font-weight:600}
.sub_quick  ul li {text-align: center}
.sub_quick  ul li:first-child {border-bottom:1px solid #dedede}
.sub_quick  ul li .vq_ico {display: block; padding:5px 0; }
.sub_quick  ul li .vq_ico img {position:relative; height:40px}
.sub_quick  ul li a {display:block; padding:8px 10px}
.sub_quick  ul li a .vq_txt {display: block; text-align: center; font-size:1.077em; font-weight:500}
.sub_quick  ul li a .vq_txt span {color:#000}
.sub_quick li:hover .vq_txt span {transition:.3s; color:#489d19}

.quick_wrap .btn_top {position: inherit}
.quick_wrap .btn_top a {width:100%; border-radius:10px; height:auto; margin-top:10px; text-align:left; background:rgba(0,0,0,0.5)}
.quick_wrap .btn_top a span {padding:8px 30px 8px 15px; background-position:right 10px top 50%}

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

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

}

/**** LOWSET FIX ****/
/* 프린트관련 */
.printBG #subright{margin-top:0}
.printBG #subright .tabnavi01, .printBG #subright .tabnavi02{display:none}
.printBG .subconbox {margin:0}
.printBG #subtop h3 {padding:10px 0 0}
.printBG #subtop h3 span {color:#000}

@media print {
.printBG #subright{-webkit-print-color-adjust:exact}
.printBG .submn_quick {display:none}
}

/*======================================= 탭 :공통 ========================================= */

.tabnavi01 { text-align:center }
.tabnavi01 ul { display:inline-flex; align-items:center; gap:12px; margin:0; padding:0; list-style:none }
.tabnavi01 li { display:inline-block}
.tabnavi01 li a { display:flex; align-items:center; position:relative; min-width:60px; height:48px; padding:0 58px 0 20px; background:#f1f1f1; border-radius:12px; text-decoration:none; transition:.25s }
.tabnavi01 li a::after { content:""; position:absolute; top:50%; right:10px; width:28px; height:28px; margin-top:-14px; background:#fff url(../images/sub/bg_tabnavi_off.png) no-repeat 50% 50%; transition:.25s; border-radius:50%}
.tabnavi01 li span { display:block; font-size:18px; font-weight:500; color:#222 }
.tabnavi01 li.on a, .tabnavi01 li:hover a { background:#666 }
.tabnavi01 li.on span, .tabnavi01 li:hover span { color:#fff }
.tabnavi01 li.on a::after, .tabnavi01 li:hover a::after { background-image:url(../images/sub/bg_tabnavi_on.png)}


@media only screen and (max-width:1024px) { 
.tabnavi01 ul {gap:5px; flex-wrap:wrap}
.tabnavi01 li a {height:34px; padding:0 40px 0 10px}
.tabnavi01 li span {font-size:14px}
.tabnavi01 li a::after {width:20px; height:20px; margin-top:-10px; right:5px}
    
}