@charset "utf-8";
/* com2zoa design KYJ 230104*/

/* Layout */
#subpage {min-height: 250px; line-height:150%; margin:5px 10px 30px; font-size: 1.154em; font-weight: 500; color:#000; font-family:PTD/*기준폰트 15px*/}
.clear_fix:after {content: ""; display: block; clear: both}
.qmu_popup{display: none}
br.mbs_br{display: none}

/*Subtop */
#subtop {position:relative;}
#subtop h3{font-weight:600; text-align: center}

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

/*비주얼 타이틀*/
#sub_left{display: none; text-align: center}
#sub_left .left_tit{position:relative;  margin: -71px 0 37px; text-shadow: 5px 0 7px rgba(0, 0, 0, 0.5)}
#sub_left .left_tit h2 {display:inline-block; line-height: 130%; font-size:26px; font-weight: 600; color:#fff}
/*상단 */
#subtop {position:relative; margin: 0 0 35px}
#subtop h3{display: none; position:relative; width: auto;  text-align: center; font-weight: 600; font-size:1.692em}
#subtop h3::after{display: block; content: " "; clear: both; position:absolute; top:6px; right:0; width:100%; height:9px; background:url(../images/sub/tit_line.gif) repeat-x 0 0}
#subtop h3 span{position:relative; display:inline-block; padding:0 15px; background: #fff; z-index: 5}
/*메뉴*/
#sub_guide {margin-bottom: 30px; background: #26353e}
.guide_wrap {position: relative; height: 45px; max-width: 1200px; margin: 0 auto; box-sizing: border-box}
.guide_wrap .btn_home {position: absolute; left: 0; top: 0; z-index: 5}
.guide_wrap .btn_home a {display: block; width: 53px; height: 45px; background:url(../images/sub/site_home.png); background-repeat:no-repeat; background-position:center center;background-color: #414d54; font-size:0; text-indent:-9999999px; transition: all .5s}
.guide_wrap .btn_home a:hover{background-color: #4685c3}
.guide_wrap .navi_area a {display: block; color: #d2d2d2; font-size: 1.071em; font-weight: 500}
/* 서브메뉴에 포함된 프린트 버튼
.guide_wrap .btn_print{position: absolute; right: 0; top: 7px}
.guide_wrap .btn_print a{display: block; width: 72px; height: 31px; padding: 5px 0; border-radius: 5px; background: #414d54; text-align: center; box-sizing: border-box; transition: all .5s}
.guide_wrap .btn_print a:hover{background:#4685c3}
*/
/*상단메뉴*/
.guide_wrap .topmu_box{position: relative; width: 250px; height: 45px; line-height: 45px; margin-left:53px; background: #61717b}
.guide_wrap .topmu_box a.tmu_first{position: relative; display: block; color: #fff; font-size: 17px}
.guide_wrap .topmu_box a.tmu_first span{margin-left: 15px}
.guide_wrap .topmu_box a.tmu_first::after{display: block; content: " "; clear: both; position:absolute; top:18px; right:15px; width:15px; height:8px; background:url(../images/sub/bg_site_arr.png) no-repeat 0 0; transform: rotate(180deg); border:0; color:#fff; font-size:0; transition:all .5s}
.guide_wrap .topmu_box:hover a.tmu_first::after{transform: rotate(360deg); transition:.5s ease-in-out}
.guide_wrap .topmu {display:none; position: absolute; top:45px; left:0; width: 100%; border-radius: 0 0 10px 10px; background: #26353e; z-index: 50}
.guide_wrap .topmu ul {padding: 10px}
.guide_wrap .topmu li a {display: block; line-height: 140%; padding: 6px 10px; border-top: 1px solid #e7e7e7; color: #fff; font-size: 14px; font-weight:300}
.guide_wrap .topmu li:first-child a {padding-top: 0; border: 0}
.guide_wrap .topmu li:last-child a {padding-bottom: 0}
.guide_wrap .topmu li a:hover {color: #fff; font-weight: 500}
/*세부메뉴*/
.guide_wrap .submu_lst{padding: 11px 0; margin:-45px 0 0 303px}
.guide_wrap .submu_lst p.mu_sel{display: none}
.guide_wrap .submu_lst ul li{position: relative; display: inline-block; transition:all .5s}
.guide_wrap .submu_lst ul li a{ display:block; padding:3px 15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; border-right:1px solid #74818f; font-size: 15px; transition: all .5s}
.guide_wrap .submu_lst ul li:last-child a{border-right: none}
.guide_wrap .submu_lst ul li a:hover, .guide_wrap .submu_lst ul li.on a{color:#b8fd4c}
.guide_wrap .submu_lst ul li.on::after, .guide_wrap .submu_lst ul li:hover::after{display: block; content: " "; clear: both; position:absolute; bottom:-19px; right:50%; width:13px; height:7px; margin-right: -8px; background:url(../images/sub/mu_over.png) no-repeat 0 0;  color:#fff; font-size:0; transition:all .5s}
/*셀렉트 형식일 때*/
.guide_wrap .mu_sellst{position: relative; padding:12px 8px 0; z-index: 10}
.guide_wrap .mu_sellst p.mu_sel{display: block; margin-top:-5px}
.guide_wrap .mu_sellst p.mu_sel a{display: block; overflow:hidden; height: 31px; line-height: 31px; padding:0 10px; background:none; border-radius: 5px; border:1px solid #61717b; color:#fff; font-size: 15px; box-sizing: border-box; text-overflow:ellipsis; white-space:nowrap}
.guide_wrap .mu_sellst p.mu_sel a::after{display: block; content: " "; clear: both; position:absolute; top:18px; right:20px; width:15px; height:8px; background:url(../images/sub/bg_site_arr2.png) no-repeat 0 0; border:0; color:#fff; font-size:0; transition:all .5s}
.guide_wrap .mu_sellst:hover a::after{transform: rotate(180deg); transition:.5s ease-in-out}
.guide_wrap .mu_sellst ul{display:none; position: absolute; top:43px; left:0; width:97%; padding: 15px; margin: -5px 0 0 15px; background:#61717b; border-radius:0 0 10px 10px; box-sizing: border-box; box-shadow:0 5px 8px rgba(0,0,0,0.3); z-index: 10}
.guide_wrap .mu_sellst:hover ul{display: block}
.guide_wrap .mu_sellst ul li{display:block; border-bottom:1px solid #74818f}
.guide_wrap .mu_sellst ul li:last-child{border-bottom: none}
.guide_wrap .mu_sellst ul li a{display: block; padding: 10px; border-right: none}
.guide_wrap .mu_sellst ul li:first-child a{padding-top: 0}
.guide_wrap .mu_sellst ul li:last-child a{padding-bottom: 0}
.guide_wrap .mu_sellst ul li.on::after, .guide_wrap .mu_sellst ul li:hover::after{display: none}

/* Tab01 */
.tabnavi01{overflow:hidden; border-radius:5px; margin:0 10px 20px}
.tabnavi01 ul li{position: relative; float:left}
.tabnavi01.tb50 ul li{width:50%}
.tabnavi01.tb33 ul li{width:33.3%}
.tabnavi01.tb25 ul li{width:25%}
.tabnavi01.tb20 ul li{width:20%}
.tabnavi01.tb16 ul li{width:16.6%}
.tabnavi01 ul li a{display: block; width: 100%; height: 50px; line-height: 50px; background: #eaeaea; border-left: 1px solid #fff; text-align: center; font-size: 1.308em; font-weight: 600; color:#000; box-sizing: border-box}
.tabnavi01 ul li a:hover, .tabnavi01 ul li.on a{background:#257ccd; color:#fff}
.tabnavi01 ul li:first-child a{border-left:none}
/* .tabnavi01 ul li:last-child a{border-radius: 0 5px 5px 0; border-right: none} */

/* Tab02, boardTab */
.tabnavi02{margin:0 10px 15px}
.tabnavi02 ul, .boardTab ul {padding:0 30px 10px; border-radius: 5px; border: 1px solid #dcdcdc; background: #fff}
.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; font-size:15px}
.tabnavi02 ul li a, .boardTab ul li a {display: block; height: 21px; line-height: 21px; padding-left: 15px; background: url(../images/sub/blt_othertab.gif) left 3px no-repeat ; font-weight: 500; color: #1d1d1d; 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.gif) left 3px  no-repeat; color:#074b98; font-weight: 600}

/****TIT****/
h4.sub_tit4 {line-height:140%; padding:5px 0 5px 35px; margin: 5px 0 5px; background:url(../images/sub/subtit4.gif) no-repeat left 7px; font-size:1.200em; font-weight:600; color:#0d0d0d; font-family: NSQ}
h5.sub_tit5 {line-height:140%; padding:0 0 0 23px; margin:5px 0 8px 8px; background:url(../images/sub/subtit5.gif) no-repeat left 4px; font-size:1.067em; font-weight:600; color:#0d0d0d; font-family: NSQ}

/****Table****/
.gt_table {overflow: hidden; width:100%; margin-bottom:25px; border-collapse:collapse; table-layout:auto; background:#f1f1f1; border-radius:5px 5px 0 0}
.gt_table table{width: 100%}
.gt_table .txtleft {text-align: left}
/*모바일 아래에서 표 내용이 너무많을때 사이즈 고정후 스크롤 하기 테이블 감싸고 있는 div한테 table_scroll 클래스 주면됨*/	
.gt_table .table_scroll{overflow-x: auto; position: relative}
.gt_table .table_scroll .mb_txt{line-height:0; font-size:0; text-indent:-9999999px}
.gt_table .table_scroll table {min-width:1204px}
.scroll_txt{display: none}
/*table_scroll 필요없을때*/
.gt_table .tb_border{overflow: hidden}
/*표_색상:회색(기본)*/
.gt_table thead th { line-height:150%; padding:10px; border:1px solid #ddd; vertical-align:middle;text-align:center; font-weight:600; color:#fff}
.gt_table tbody th {line-height:150%; background:#f5f5f5; padding:10px; border:1px solid #ddd; text-align:center; font-weight:500; vertical-align:middle; color:#30302e; font-weight: 600; color:#000}
.gt_table tbody td {line-height:150%; background:#fff; padding:10px; border:1px solid #ddd;text-align:center; vertical-align:middle; color:#000; font-size:0.933em} 
/*표_색상:그레이*/
.gt_table .table_st01{background:#dfdfdf}
.gt_table .table_st01 thead th {border-right:1px solid #bebebe; color:#000}
.gt_table .table_st01 thead th:last-child{border-right:none}
/*변경되는 셀 색상*/
.gt_table .table_st01 thead th.col_bg1{background: #c4c4c4; border:1px solid #e0e0e0}

/*col class 선언영역*/
.wdtfix{width:40px}
.wdt3{width: 3%}
.wdt5{width: 5%}
.wdt6{width: 6%}
.wdt8{width: 8%}
.wdt9{width: 9%}
.wdt10{width: 10%}
.wdt13{width: 13%}
.wdt15{width: 15%}
.wdt18{width: 18%}
.wdt20{width: 20%}
.wdt25{width: 25%}
.wdt30{width: 30%}
.wdt35{width: 35%}
.wdt33{width: 33.3%}
.wdt40{width: 40%}
.wdt45{width: 45%}
.wdt50{width: 50%}
.wdt60{width: 60%}
.wdt70{width: 70%}
.wdt75{width: 75%}
.wdt80{width: 80%}
.wdt90{width: 90%}
.wdtauto{width: auto}

/* 폰트에서 span사용시 색지정 */
span.col_r{color:#ff5c41; font-weight: 700}
span.col_g{color:#76a84e; font-weight: 700}
span.col_b{color:#3087e1; font-weight: 700}
span.col_o{color: #ff7b11; font-weight: 700}
span.col_p{color: #ae4ce6; font-weight: 700}
span.col_pk{color: #f86b96; font-weight: 700}
span.col_y{color: #ff7f0e; font-weight: 700}
span.col_bk{color:#000; font-weight: 700}

/******************************서브컨텐츠 영역**************************************/
/*▼게시판 영역에 공통으로 들어가는 내용이라서 contents에 작성하지않고 sub에 작성함*/

/* ========================================= MOBILE LAYOUT ========================================= */
@media only screen and (max-width:1024px) {
/* Layout */
#subpage {font-size: 1.077em; /*모바일 기준폰트 14px*/}

/* Visual*/
.subvisual{position: relative}
.subvisual .visual_wrap {position: relative;  margin: 0 auto; padding-top: 55px}
.subvisual .visual_item{width:auto; height:97px; margin: 0 auto; image-rendering: pixelated}
.subvisual .item1{background:url(../images/sub/sv01_m25.jpg) no-repeat center top}
.subvisual .item2{background:url(../images/sub/sv02_m25.jpg) no-repeat center top}
/*Visual-button*/
.visual_btnwrap .visual_btn{bottom:150px}
.visual_btnwrap .visual_btn ul li a{width: 95%; height:30px; line-height: 30px; font-size: 14px}
/*비주얼 이동 블릿-mobile*/
.slick-dots {top:115px; right:10px;  margin:0}
.slick-dots li { margin: 0 0 0 5px}
.slick-dots li{float: left}

/*비주얼 타이틀*/
#sub_left .left_tit{margin:0}
#sub_left .left_tit h2 {font-size:20px}
/*상단 */
#subtop {margin: 0 0 20px}
#subtop h3{width: auto; padding-bottom: 30px; background:url(../images/sub/tit_line.gif) repeat-x left bottom; font-size:17px; line-height: 140%; letter-spacing: -0.5px}
#subtop h3::after{display:none}
#subtop h3 span{ padding:0 5px}
/*메뉴*/
#sub_guide{margin-bottom: 25px}
.guide_wrap {height: 88px; max-width:auto}
.guide_wrap .btn_home a {width: 45px; height: 45px}
/*상단메뉴*/
.guide_wrap .topmu_box{width: auto; height: 45px; line-height: 45px; margin-left: 45px}
.guide_wrap .topmu_box a.tmu_first{font-size: 15px}
.guide_wrap .topmu_box a.tmu_first::after{top:20px}
.guide_wrap .topmu {top:45px; width: 100%}
/*셀렉트 형식일 때*/
.guide_wrap .mu_sellst {position: relative; padding:13px 0 0; margin: 0 10px 0 8px; z-index: 10}
.guide_wrap .mu_sellst p.mu_sel a{height: 35px; line-height: 35px; padding:0 10px; font-size: 15px}
.guide_wrap .mu_sellst ul{width:100%; padding: 10px; margin: 0; border-radius:3px}
.guide_wrap .mu_sellst p.mu_sel a::after{top:22px; right:15px}
    
/*셀렉트 형식일 때-모바일용*/
.guide_wrap .submu_lst.mb_menu{margin:-2px 0 0}
.guide_wrap .submu_lst.mb_menu p.mu_sel{display:block}
.guide_wrap .mb_menu {position: relative; padding:13px 8px 0; /*z-index: 10*/}
.guide_wrap .mb_menu p.mu_sel{display: block; margin-top:-5px}
.guide_wrap .mb_menu p.mu_sel a{display: block; overflow:hidden; height: 31px; line-height: 31px; padding:0 10px; background:none; border-radius: 5px; border:1px solid #61717b; color:#fff; font-size: 16px; box-sizing: border-box; text-overflow:ellipsis; white-space:nowrap}
.guide_wrap .mb_menu p.mu_sel a::after{display: block; content: " "; clear: both; position:absolute; top:20px; right:20px; width:15px; height:8px; background:url(../images/sub/bg_site_arr2.png) no-repeat 0 0; border:0; color:#fff; font-size:0}
.guide_wrap .mb_menu:hover a::after{transform: rotate(180deg); transition:.5s ease-in-out}
.guide_wrap .mb_menu ul{display:none; position: absolute; top:43px; left:0; width:97%; padding: 15px; margin: -5px 0 0 9px; background:#61717b; border-radius:0 0 10px 10px; box-sizing: border-box; box-shadow:0 5px 8px rgba(0,0,0,0.3); z-index: 10}
.guide_wrap .mb_menu:hover ul{display: block}
.guide_wrap .mb_menu ul li{display:block; border-bottom:1px solid #74818f}
.guide_wrap .mb_menu ul li:last-child{border-bottom: none}
.guide_wrap .mb_menu ul li a{display: block; padding: 10px; border-right: none}
.guide_wrap .mb_menu ul li:first-child a{padding-top: 0}
.guide_wrap .mb_menu ul li:last-child a{padding-bottom: 0}
.guide_wrap .mb_menu ul li.on::after, .guide_wrap .mb_menu ul li:hover::after{display: none}

/* Tab01 */
.tabnavi01 ul li a{height: 40px; line-height: 40px; font-size: 14px}
.tabnavi01.tb25 ul li{width:100%}
.tabnavi01.tb20 ul li{width:100%}

/* Tab02, boardTab */
.tabnavi02 ul li, .boardTab ul li { float: left; width: 20%}

/* subtop_btn */
.subquick{position: absolute; bottom:420px; right:0; z-index: 100}
.subquick .btn_top a{display: block; width: 37px; height: 21px; background:url(../images/sub/sq_top_m.png) no-repeat center bottom}
.subquick .btn_top a img{display: none}

/*MOBILE에서 br 필요 없을때 선언*/
br.mbbr_none{display: none}
/*MOBILE에서 필요 없을때 선언*/
.mb_none{display: none}

/****TIT****/
h4.sub_tit4 {padding:5px 0 5px 32px; font-size:1.154em}
h5.sub_tit5 {padding:0 0 0 18px; margin: 5px 0 10px 5px; font-size:1.077em}

/****Table****/
/*모바일 아래에서 표 내용이 너무많을때 사이즈 고정후 스크롤 하기*/	
.scroll_txt{display: block; padding:3px 5px; margin-bottom: 5px; border-radius: 50px; background:#d7d7d7; text-align: center; color:#000; font-size: 13px}
.gt_table.table_scroll{overflow-x: auto; position: relative}
.gt_table.table_scroll table {min-width:1650px}
br.mbs_br{display: block}

/******************************서브컨텐츠 영역**************************************/
/*▼게시판 영역에 공통으로 들어가는 내용이라서 contents에 작성하지않고 sub에 작성함*/

}

/* ========================================= PC LAYOUT ========================================= */
@media only screen and (min-width:1025px) {
/* Layout */
#subcontainer{position: relative; z-index: 1}
.subconwrap{position: relative; background:url(../images/sub/sub_btbg.jpg) no-repeat center bottom}
.subconbox {margin: 0 auto}
.subcon_wrap{width: 1200px; margin: 0 auto}
.subcon_wrap2{margin:0 60px}
#subpage{margin: 20px 10px 50px}

/* Visual */
.subvisual{z-index: 1}
.subvisual .visual_wrap {position: relative; width: 100%; margin: 0 auto; padding-top: 57px}
.subvisual .visual_item {width:auto; height:168px; image-rendering: pixelated}
.subvisual .visual_item > a{position: relative; display:block !important}
.subvisual .visual_item > a:focus-visible{outline:2px solid #000}
.subvisual .item1 {background:url(../images/sub/sv01_p25.jpg) no-repeat center top}
.subvisual .item2 {background:url(../images/sub/sv02_p25.jpg) no-repeat center top}
/*비주얼 이동 블릿*/
.slick-dots {left:50%; top:204px; margin:0 0 0 -600px}
    
/* subtop_btn */
.subquick{position: absolute; top:276px; right:0; z-index: 10}
.subquick .sq_btnbox{box-sizing: border-box; text-align: center}
.subquick .font{background: #d6d6d6}
.subquick .font dd{display:block}
.subquick .quick_btn ul li a{display: block; font-weight: 500}
.subquick .btn_top a{display: block}
.subquick .btn_print a{display: block; width: 34px; height: 28px}
    
/*PC에서 br 필요 없을때 선언*/
br.pcbr_none{display: none}
/*PC에서 필요 없을때 선언*/
.pc_none{display: none}
}

/* ========================================= LOWSET FIX ========================================= */
/********* TABLET LAYOUT[중간사이즈 조정관련] *********/
@media only screen and (max-width:1350px) {
.subquick{display: none}
.subcon_wrap2{margin:0}
}
/********* //TABLET LAYOUT[중간사이즈 조정관련] *********/

@media only screen and (max-width:690px) {
/* Tab02, boardTab */
.tabnavi02 ul li, .boardTab ul li {width: 25%}
}
@media only screen and (max-width:536px) {
/* Tab02, boardTab */
.tabnavi02 ul li, .boardTab ul li {width: 33.3%}
}
@media only screen and (max-width:410px) {
/* Tab02, boardTab */
.tabnavi02 ul li, .boardTab ul li {width: 50%}
}