@charset "utf-8";
/* CSS Document */
/* com2zoa design  publishing kjh 2025.11.06 */
/* ※아래 적용된 스타일은 기본레이아웃 구성이므로 각 학교에 맞게 전반적 수정해야함 */

/*아이폰에서 테이블 텍스트 임의확대 방지*/
* {-webkit-text-size-adjust: none}
table{-webkit-text-size-adjust: 100%}

/* Common */
.basics_font {font-size:1.154em /*기준폰트 15px*/}
.clear_fix::after{content: ''; display: block; clear: both}

/* Layout */
#subpage .basics_font{font-weight:400}
#sub_left {display: none}
#subpage {min-height:350px; line-height:150%; margin:0 10px 50px 20px; font-weight:400}

/* Subtop */
#subtop {position:relative}
#subtop h3 {position:relative}
#subtop h3 span{display:inline-block; font-weight:500; color:#333; position:relative; padding:24px 20px; font-size:19px; font-weight:600; /* overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: block */}

.subtop_tit h2 {display:none}

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

/* subvisual */
.subvisual .visual_wrap {position: relative; width: 100%; margin: 0 auto}
.subvisual .visual_item {width:auto; height:167px}
.visual_wrap .visual_item > a {height:167px}
.subvisual .item1 {background:url(../images/sub/subv_m01.jpg) no-repeat 50% 0}
.subvisual .item2 {background:url(../images/sub/subv_m02.jpg) no-repeat 50% 0}
.subvisual .item3 {background:url(../images/sub/subv_m03.jpg) no-repeat 50% 0}

/* 퀵메뉴 */
#quickmenu {display: block; position: absolute; top:500px; right:10px; z-index:1}
.subv_quick {display:none}
.btn_top a {display:flex; align-items: center; justify-content: center; width:40px; height:38px; background:rgba(0,0,0,0.7); border-radius:10px; text-align: center; box-shadow: 0 2px 5px rgba(0,0,0,0.1); font-size:1.077em; box-sizing: border-box}
.btn_top a span {display:block; padding:14px 0 6px; background:url(../images/sub/btn_top_arr.png) no-repeat left 50% top 4px; color:#fff}
.quick_tit {padding-bottom:10px; font-size:20px; font-weight:800; font-family:NSQ; color:#fff; text-align: center}
.quick_tit span {color:#8be7e2}
.subv_quick {display: block}
.subv_quick ul {display:flex; gap:8px; width:130px}
.subv_quick ul li {width:100%; position:relative; overflow:hidden; display:block; padding:2px; border-radius:10px; transition:.3s; box-sizing: border-box}
.subv_quick ul li:before {content:""; display: block; position: absolute; top:0; left:0; width:100%; height:100%; background:linear-gradient(90deg, #1374aa, #32d5cc); z-index:1}
.subv_quick ul li:after {content:""; position:absolute; inset:0; background:linear-gradient(-90deg, #ac50ef, #4cbefd); opacity:0; transition:opacity .6s ease-in-out; z-index:1}
.subv_quick ul li a {position:relative; display:flex; align-items:center; justify-content: space-between; height:100%; padding:13px 10px 13px 5px; background:#fff; border-radius:8px; z-index:2; box-sizing: border-box; font-size:1.143em}
.subv_quick ul li:hover:after {opacity:1}
.subv_quick ul li span.vq_ico {width:44px; text-align: center}
.subv_quick ul li span.vq_ico img {height:28px}
.subv_quick ul li .vq_txt {transition:.3s}
.subv_quick ul li:hover .vq_txt {color:#8011d1; transition:.3s}

/********************************************* SUB content **********************************************/
/* content Common */
/* 페이지 준비중 */
.sub_loading {width:100%; min-height:300px; display:block; background: url(../images/sub/page_loading.png) no-repeat center center; font-size:0}

/****TIT****/
h4.sub_tit4 {line-height:140%; padding:2px 0 2px 32px; margin:7px 0; background:url(../images/sub/subtit4.png) no-repeat left 2px; font-size:1.333em; font-weight:600; color:#000}
h5.sub_tit5 {line-height:140%; padding:0 0 0 22px; margin:6px 8px; background:url(../images/sub/subtit5.png) no-repeat 0 4px; font-size:1.2em; font-weight:500; color:#2a2a2a}
.txt {font-size:1.067em; line-height:130%; border-radius:5px; border:1px solid #e0e0e0; padding:15px; margin:15px 0}

/* common 수정 */
.basics_font .col_red {color:#ff5b61}
.basics_font .col_blue {color:#1388ea}
.basics_font .col_org {color:#ff7733}
.basics_font .col_grn {color:#17b511}
.basics_font .col_pur {color:#8f51ff}



/********* MOBILE LAYOUT *********/
@media only screen and (max-width:1024px) {
.basics_font {font-size: 1.077em/*기준폰트 14px*/}

.header_top:after {content:""; display:block; position: absolute; top:60px; left:0; width:100%; height:1px; background:rgba(255,255,255,0.2)}
.header_top .logo {top:13px}
.top_btn_area {top:15px}

/* Layout */
.subconbox {position:relative}
.subconbox:before {content:""; display: block; position: absolute; top:0; left:0; width:100%; height:40px; }  
#subright {position: relative; padding:46px 10px 10px}
#subright.nomargin {margin-top:0 !important}
#subtop h3 {position:absolute; top:-152px; left:10px; height:106px; display:flex; align-items:center; color:#000; font-weight: 600; width:55%}
#subtop h3 span {padding:0; font-size:1.692em; font-weight:800; color:#fff}
#subpage {margin:15px 0 30px}

/* 서브 컨텐츠 영역 */
.vcharact_wrap {display:none}

/* MB guide */
#sub_guide {position:absolute; top:0; left:0; width:100%; font-size:1em; padding:7px 0}
.line_color01 #sub_guide {background:#6f4def}
.line_color02 #sub_guide {background:#0c3a7d}
.line_color03 #sub_guide {background:#005751}
#sub_guide .navi_area {padding:0 0 0 34px}
#sub_guide .navi_area > ul > li.nav_home {display:none}
#sub_guide .navi_area .btn_home {display: block}
#sub_guide .navi_area .btn_home a {display: block; width:34px; height:32px; position:absolute; top:0; left:0; text-indent:-99999px; background:url(../images/sub/blt_home_m.png) no-repeat 50% 50%}
#sub_guide .navi_area .btn_home span{overflow:hidden; height:0; width:0; line-height:0; font-size:0; text-indent:-9999999px}
#sub_guide .navi_area .btn_home img {display: none}
#sub_guide .navi_area > ul {box-sizing: border-box; ; display:flex; justify-content:flex-start; padding:0 10px 0 0; gap:5px}
#sub_guide .navi_area > ul > li{position: relative}
#sub_guide .navi_area > ul > li > a {display: block; height:32px; line-height:30px; padding:0 20px 0 8px; font-weight: 500; font-size:1.077em; background:#fff url(../images/sub/bg_submn_marr.png) no-repeat right 8px center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; border-radius:3px}
#sub_guide .submn {overflow: hidden; position: absolute; left: 0; top: 100%; width:100%;  margin: 0 auto; background: #fff; border:1px solid #104e7d;border-bottom-width:2px; border-radius:3px 3px 5px 5px}
#sub_guide .submn ul { padding: 0 6px}
#sub_guide .submn li {padding: 8px 0 8px 5px; border-bottom: 1px solid #ccc}
#sub_guide .submn li:last-child{border:none}
#sub_guide .submn li a {display: block; line-height: 140%; color: #404040; font-weight: 500; word-break:keep-all}
#sub_guide .submn li a:hover{color:#238fe1; font-weight: 600}

/* 퀵메뉴 */
#quickmenu {display:block; position: fixed; left:0; right:inherit; top:inherit !important; bottom:5px; width:100%; min-width:300px; box-sizing: border-box}
.quick_tit {font-size:15px; padding:5px; text-align: left; color:#757575}
.quick_tit span {color:#39a7a1}
.subv_quick {padding-right:50px; padding-left:5px}
.subv_quick ul {width:100%; gap:4px}
.subv_quick ul li a {height:34px; padding:10px 6px 10px 0; width:100%; font-size:1.077em}
.btn_top {position: absolute; bottom:0; right:5px;}

/* footer 조정 */
#footwrap {padding-bottom:130px; background-position: left 50% bottom 70px}

/********************************************* SUB content **********************************************/
/* content Common */

/*MB에서 필요 없을때 선언*/
.mb_none{display: none}
    
/* 타이틀 */
h4.sub_tit4 {font-size:1.286em; background-position:0 2px; background-size:auto 25px; padding-left:30px; margin:5px 0}
h5.sub_tit5 {font-size:1.214em; background-position:0 3px; padding-left:22px; margin:5px}
    
/* -------------------컨텐츠 시작 -------------------*/



}

/* PC LAYOUT */
@media only screen and (min-width:1025px) {
/* Layout */
.subconwrap{position: relative}
.subconbox {position: relative; width: 1400px; margin:-55px auto 0}
#sub_left {position: relative; display: block; float: left; margin-bottom:20px}
#subright {position: relative; float: right; width:calc(1400px - 260px); padding-left:35px; box-sizing: border-box}
#subpage{margin:25px 0 70px; min-height:450px}

/* 서브비주얼 */
.subvisual .visual_item {width:auto; height:393px}
.subvisual .item1 {background:url(../images/sub/subv_pc01.jpg) no-repeat 50% 0}
.subvisual .item2 {background:url(../images/sub/subv_pc02.jpg) no-repeat 50% 0}
.subvisual .item3 {background:url(../images/sub/subv_pc03.jpg) no-repeat 50% 0}
.subvisual .visual_wrap .slick-dots {display: none !important}
.subvisual .visual_wrap .btn_visual {display:none}

/* 서브 캐릭터 */
.vcharact_wrap {position: absolute; top:130px; left:50%; margin-left:520px; transform:scale(0.9)}
.line_color01 .vcharact1 {top:25px; left:inherit; right:20px}
.line_color02 .vcharact2 {top:15px; left:inherit; right:0}
.line_color03 .vcharact3 {top:20px; left:inherit; right:0}

/* 타이틀 */
.subtop_tit {display:block; position: absolute; top:-170px; left:0; width:100%}
.subtop_tit h2 {display:block; color:#fff; width:50%; font-size:32px; font-weight:700; text-shadow:0 3px 6px rgba(0,0,0,0.2)}

/* PC guide*/
#sub_guide .navi_area {height:22px; line-height:22px; margin-top:15px}
#sub_guide .navi_area ul {display:flex; gap:5px}
#sub_guide .navi_area li {display: inline-block; width:auto !important}
#sub_guide .navi_area li a {display: block; padding:0 6px 0 15px; line-height:20px; background: url(../images/sub/blt_navi_arr.png) 0 5px no-repeat; color:rgba(255,255,255,0.8); font-weight:400; font-size:1.077em}
#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 {color:#fff; font-weight:500}
#sub_guide .navi_area > ul > li.nav_home a {padding:0 6px 0 0}
#sub_guide .navi_area > ul > li.nav_home a img {vertical-align:-3px}
    
/* Subleft */
#sub_left {overflow:hidden; width:260px; border:1px solid #d2d2d2; background:#fff; box-sizing: border-box; border-radius:0 0 5px 5px}
.leftmn {position: relative; padding:7px; box-sizing: border-box}
.leftmn > ul > li > a {position:relative; display: block; min-height:44px; font-size:1.308em; font-weight:600; padding:16px 40px 16px 13px; margin:10px 0 0; width:auto;  color:#373737; box-sizing: border-box; background:#f0f0f0 url(../images/sub/bg_submn_off.png) no-repeat right 10px top 50%; border-radius:5px; word-break:keep-all; transition:.3s}
.leftmn > ul > li:first-child a {margin-top:0}
.leftmn ul > li > a:hover, .leftmn .leftmenuover > a {text-decoration:none; color:#fff; font-weight:700; background:#314354  url(../images/sub/bg_submn_on.png) no-repeat right 10px top 50%}

/* third*/
.leftmn .third {position: relative; overflow:hidden; box-sizing: border-box;  margin:13px 10px}
.leftmn .third li a {display: block; position:relative; line-height: 130%; padding:3px 10px 3px 10px; margin-top:3px; background:none; font-weight:500; color:#3d3d3d; font-size:1.154em; transition:.4s; word-break:keep-all}
.leftmn .third li:first-child a {margin-top:0}
.leftmn .third li a:after {content:""; display: block; position: absolute; top:10px; left:0; width:4px; height:4px; background:#919191; border-radius:50%}    
.leftmn .third li:hover, .leftmn .third li.on {transition:.3s}
.leftmn .third li:hover a, .leftmn .third .on a, .leftmn .third .third_on a {color:#000; text-decoration: underline; background:none}
.leftmn .third li:hover a:after , .leftmn .third .on a:after, .leftmn .third .third_on a:after {background:#314354} 
/*Subtop TIT */
#subtop {height:56px; margin-bottom:25px}
#subtop h3 span {display:block; padding:18px 0; color:#fff}

/* subtop_btn */
.subtop_btn {position:absolute; top:0; right:0; display:flex; justify-content: space-between; align-items:center; overflow:hidden; box-sizing: border-box}
.subtop_btn dl.font {display:flex; align-items: center; box-sizing: border-box}
.subtop_btn dl.font > dt {font-size:0}
.subtop_btn dl.font > dd {display:flex; justify-content: space-between; border-left:1px solid rgba(255,255,255,0.4)}
.subtop_btn dl.font > dd a {display: block; width:55px; height:55px; line-height:55px; box-sizing: border-box; transition: all .3s; text-align: center}
.subtop_btn dl.font > dd a img {vertical-align: middle}
.subtop_btn dl.font > dd a:hover{transition:.3s}
.subtop_btn .btn_print {width:55px; text-align: center; border:1px solid rgba(255,255,255,0.4); border-top:0; border-bottom:0; background:rgba(255,255,255,0.2)}
.subtop_btn .btn_print a {display:block; height:55px; line-height:55px; margin:0 auto; transition: all .3s}
.subtop_btn .btn_print a img {vertical-align: middle}

/* 서브 퀵 */
#quickmenu {top:120px; right:10px; z-index:1}
.subv_quick ul {flex-direction: column}
#quickmenu.slide .quick_tit {color:#707070}
#quickmenu.slide .quick_tit span {color:#3d5bb3}
.btn_top {margin-top:8px}
.btn_top a {width:100%; line-height:30px; background:#314354; font-size:1.231em}
.btn_top a span {display: inline-block; padding:0 20px 0 0; background-position:right 0 top 10px}

 
/********************************************* SUB content **********************************************/
/* content Common */
/*PC에서 br 필요 없을때 선언*/
br.pcbr_none{display: none}
/*PC에서 필요 없을때 선언*/
.pc_none{display: none}

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


}

/*======================================= 프린트 관련 ========================================= */
.printBG .gnb_box {display:none}
.printBG #subright{margin-top:0; padding:0 10px}
.printBG #subright .tabnavi01, .printBG #subright .tabnavi02{display:none}
/*.printBG .subconbox {margin:0}*/
.printBG #subtop {background:none; border-radius:0}
.printBG #subtop h3 {padding:15px 5px; background:none; border-bottom:2px solid #f0f0f0; border-radius:0; font-size:17px; position:inherit; top:inherit; left:inherit; width:100%; height:40px}
.printBG #subtop h3 span{padding:0; background:none; color:#000; font-size:19px}
@media print {
.printBG #subright{-webkit-print-color-adjust:exact}
.printBG .subtop_btn{display:none}
.printBG #subtop{margin-bottom:15px}
}

/*====================================== // 프린트 관련 ======================================== */
/*======================================= 탭 :공통 ========================================= */
div[class^="tabnavi0"] { position:relative; z-index:0; margin:25px 0}
div[class^="tabnavi0"] > .select {display:none}
div[class^="tabnavi0"] a { position:relative; display:block; line-height:1.4; word-break: keep-all}
div[class^="tabnavi0"] a, div[class^="tabnavi0"] ::before {transition:all 0.3s ease}
div[class^="tabnavi0"] a.select:before{content:""; position:absolute; right:10px; top:50%; width:16px; height:10px; margin-top:-5px}

/* 탭 :1차 탭 */
.tabnavi01 li {position:relative}
.tabnavi01 li a { padding:0 10px ; font-size:1em; z-index:2}
.tabnavi01 li a:before,
.tabnavi01 li:not(.on):focus,
.tabnavi01 li:not(.on):hover {transition:.3s ease-in-out}
/* 탭 :1차 : background none */
.tabnavi01 li:nth-child(4n + 1):before{display:none}

/* 탭 : 반응형 */
.react_tab {display:block}
.tabnavi01 ul {display: table; width: 100%; background-color:#ebebeb; table-layout: fixed}
.tabnavi01 ul li { display: table-cell; vertical-align: middle; box-sizing: border-box}
.tabnavi01 ul li a { overflow: hidden; display: block; text-overflow: ellipsis; white-space: nowrap; font-size:1.231em; padding:10px 25px; box-sizing: border-box}
.tabnavi01 ul li:first-child a {border-left:0}
.tabnavi01 ul .on a {color:#fff}

/* 탭 여러개 있을 경우 */
.tabnavi02 ul {padding:15px 24px; border: 1px solid #e0e0e0; border-radius:5px}
.tabnavi02 ul:after {content:""; clear:both; display:block; height:0; font-size:0; line-height:0}
.tabnavi02 ul li { float: left; width: 20%; padding:4px 0; font-size:1.154em}
.tabnavi02 ul li a {display: block; height: 22px; line-height: 22px; padding-left:25px; background: url(../images/sub/blt_tabnavi2.png) left 5px no-repeat; font-weight:600; color: #1d1d1d; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tabnavi02 ul li.on a, .tabnavi02 ul li:hover a {color:#474fa1; font-weight: 600}

@media screen and (max-width:1024px){     
/* 탭 :공통 */
div[class^="tabnavi0"] {margin:10px 0}
.react_tab[class^="tabnavi0"] > .select{display:block}
.react_tab[class^="tabnavi0"] ul { display:none; text-align:left; margin-bottom:0; border:1px solid #ddd; border-top:0; box-sizing: border-box; border-radius:5px}
.react_tab[class^="tabnavi0"] li { display:block; width:100% !important; border:0}
.react_tab[class^="tabnavi0"] li a {border-top:1px solid #ddd; font-size:13px}
.react_tab[class^="tabnavi0"] li a:before{display:none}
.react_tab[class^="tabnavi0"] ul li:first-child a {border-top:0}

/* 탭 :1차 탭 */
.tabnavi01 > a.select {position:relative; font-size:1em; color:#fff; padding:5px 30px 5px 10px; background:linear-gradient(90deg, #314354, #104e7d); border-radius:5px;}
.tabnavi01 ul{ overflow:hidden; margin-top:0; padding:0; background:#f7f7f7; border:0; border-radius:0}
.tabnavi01 ul li + li:before{ display:none}
.tabnavi01 ul li a { padding:5px 10px; font-size:1em; border:none}
.tabnavi01 ul li a:before, .tabnavi01 > a.select:before {width:10px; background:url(../images/sub/bg_tabnavi1_marr.png) no-repeat 50% 50%}
.tabnavi01 ul li.on, .tabnavi01 ul li:hover {background:#3565ca; transition:.3s ease-in-out}
.tabnavi01 ul li.on a, .tabnavi01 ul li:hover a {color:#fff}
.tabnavi01 ul li a:after {display:none}

/* 탭 :2차 탭 */
.tabnavi02 > a.select {position:relative; font-size:1em; color:#000; padding:5px 30px 5px 10px; background:#fff; border:1px solid #cbcbcb; border-radius:5px;}
.tabnavi02 ul{ overflow:hidden; margin-top:0; padding:0; background:#f7f7f7; border:0; border-radius:0}
.tabnavi02 li + li:before{ display:none}
.react_tab.tabnavi02 li {padding:0}
.tabnavi02 ul li a {padding:3px 5px; font-size:1em; background:none}
.tabnavi02 ul li a:before, .tabnavi02 > a.select:before {background:url(../images/sub/bg_tabnavi2_marr.png) no-repeat 50% 50%}
.tabnavi02 ul li.on a, .tabnavi02 ul li:hover a {background:none}

}

@media screen and (min-width:1025px){  
div[class^="tabnavi0"] a.select:before{display:none}

.tabnavi01 {text-align: center}
.tabnavi01 ul {display:inline-flex; justify-content: center; width:auto; padding:7px; background:#fff; box-shadow:0 1px 8px 2px rgba(0,0,0,0.1); border-radius:5px 5px 25px 25px}
.tabnavi01 ul li.on {border-radius:5px 5px 23px 23px; background:linear-gradient(90deg, #314354, #104e7d)}
.tabnavi01 ul li span {position:relative; padding:3px 5px }
.tabnavi01 ul li span:before {content:""; display:block; position:absolute; bottom:0; left:0; width:100%; height:11px; background:#eee; z-index:-1; transition:.3s; opacity:0}
.tabnavi01 ul li:hover span:before {opacity:1}
.tabnavi01 ul li.on span:before {display:none}
    
}

/*======================================= //탭 :공통 ========================================= */
/********* TABLET LAYOUT[중간사이즈 조정관련] *********/


@media only screen and (max-width:767px) {
    
    
}



@media only screen and (max-width:550px) {
    #subtop h3 {left:5px; width:70%}
    #subtop h3 span {font-size:1.385em}
    #subtop h3 span {font-size:1.385em}
    
    /* 퀵메뉴 */
    .subv_quick ul li a {flex-direction: column; height:48px; padding:3px 0}
    .subv_quick ul li span.vq_ico {width:28px}
    .subv_quick ul li span.vq_ico img {height:24px}
    .btn_top a {height:52px}
}