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

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

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

/* Subtop */
#subtop {position:relative}
#subtop h3 {position:relative}
#subtop h3 span {position:relative; color:#333; font-size:22px; font-weight:600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background:#fff}

/* Guide */
#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:334px}
.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:200px; right:10px; z-index:1}
#quickmenu .quick_wrap {display:block}
.btn_top a span {display:block; padding:17px 0 0; background:url(../images/sub/btn_top_arr.png) no-repeat left 50% top 5px; color:#fff}

/********************************************* SUB content **********************************************/
/* content Common */
h4.sub_tit4 {line-height:140%; padding:12px 0 0 0; margin:5px 0 10px; background:url(../images/sub/subtit4.png) no-repeat left top; font-size:1.267em; font-weight:400; color:#000}
h5.sub_tit5 {line-height:140%; padding:0 0 0 28px; margin:10px 0; background:url(../images/sub/subtit5.png) no-repeat left 4px; font-size:1.133em; font-weight:400}

/* -------------------공통스타일 -------------------*/

/*공통타이틀(색상등의 세부설정은 해당항목 하위에 설정)*/


/*공통 내용 텍스트*/
.common_wrap h5.com_h5 {font-weight:400}
.private_new .pri_top h4.pritit {font-size:1.071em}
.private_new .pri_top .pritxt {font-weight:400}
.charter .comtop {padding:45px 15px 15px}
.charter .combox ol li {line-height:170%}
.copyright .comtop ul {word-break:keep-all; background-position:13px 7px}
.copyright .comtop ul li {line-height:140%}
.comhis_lst .comhis_lstit {font-weight:400}

/*테이블 안내사항 공통*/

.cz_table th, .cz_table td {word-break:normal}
.cz_table thead th {border-color:rgba(255,255,255,0.5)}
.cz_table tbody th {font-size:0.933em; font-weight:500}
.cz_table tbody td {font-size:0.933em}
.cz_table .bg_gray {background:#efefef}
.cz_table .tbcol_aqua thead th{background:#18b1c6}
.cz_table .tbcol_gray thead th{background:#8d8d8d}
.cz_table thead td {line-height:150%; background:#fff; padding:8px; border:1px solid #dbdbdb;text-align:center; vertical-align:middle; color:#000}
p.tbtop_msg {padding: 15px 5px; border-top:2px solid #5f6b71; text-align: center}
p.tbtop_aqua {border-color:#18b1c6}
p.tbtop_bl {border-color:#4ea0ed}
/* 공통 텍스트 스타일 속 테이블 */
.lstbx_tbwrap {margin:15px 0}
.lstbx_tbwrap .cz_tablebx {margin:0}


/* -------------------// 공통스타일 -------------------*/

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





    
/********* MOBILE LAYOUT *********/
@media only screen and (max-width:1024px) {
    
/* Layout */
#subright{position: relative}
#subright.nomargin {margin-top:0 !important}
#subtop h3 {height:52px; padding:15px 0 20px; text-align: center; box-sizing:border-box; border-bottom:1px solid #e1e1e1}
#subtop h3 span {font-size:1.385em; font-weight:600}
#subtop h3 span:after {content:""; display: block; position: absolute; top:0; left:50%; margin-left:-16px; width:32px; height:1px; background:#fff}
#subpage {margin:15px 0 35px}

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

/* 서브 컨텐츠 영역 */
.subconbox {position:relative; margin:-45px 10px 0; background:#fff; border-radius:10px 10px 0 0;}
    
/* MB guide */
#sub_guide .navi_area {padding:6px 5px 3px 38px}
#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:38px; height:36px; position:absolute; top:5px; left:0; text-indent:-99999px; background:url(../images/sub/btn_home_m.gif) no-repeat 50% 50%; border:none; border-radius:10px}
#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 {background:#e1e1e1; border-radius:5px}
#sub_guide .navi_area > ul > li {position: relative; float: left; width: 33.3%; box-sizing: border-box}
#sub_guide .navi_area > ul > li > a {display: block; height:36px; line-height:36px; padding:0 20px 0 8px; font-weight:400; font-size:1.077em; background:url(../images/sub/bg_submn_arr.gif) no-repeat right 8px center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; box-sizing: border-box; border-right:1px solid #fff}
#sub_guide .navi_area > ul > li:last-child a {border-right:none}
    
#sub_guide .submn {overflow: hidden; position: absolute; left: 0; top: 100%; width:100%; padding:1px; margin: 0 auto; background:#0072bc; z-index:99; box-sizing: border-box; box-shadow:0 2px 5px rgba(0,0,0,0.1); border-radius:0 0 10px 10px}
#sub_guide .submn ul {padding:2px; background:#fff; border-radius:0 0 8px 8px} 
#sub_guide .submn li {border-bottom: 1px solid #dadbdd; z-index:110; text-align: center}
#sub_guide .submn li:last-child {border:none}
#sub_guide .submn li a {margin:3px 0; padding:5px 5px 3px; display:block; line-height: 130%; color: #404040; font-weight: 500; border-radius:3px; word-break:keep-all}
#sub_guide .submn li a:hover {background:#e9e9e9}
    
/* 퀵메뉴 */
#quickmenu {top:600px; z-index:2}
.subv_quick ul {display:none}
.btn_top a {display:block; width:38px; height:38px; margin:-18px auto 0; background:#345776; font-size:14px; border-radius:50%; text-align:center}
    
/********************************************* SUB content **********************************************/
/*MB에서 필요 없을때 선언*/
.mb_none{display: none}
    
/* 타이틀 */
h4.sub_tit4 {font-size:1.286em; background-position:0 0; background-size:22px auto; padding:10px 0 0 0; margin:5px 0 8px}
h5.sub_tit5 {font-size:1.143em; background-position:0 4px; background-size:20px auto; padding:0 0 0 23px; margin:8px 0}
    
/* -------------------공통스타일 -------------------*/
/*공통타이틀(색상등의 세부설정은 해당항목 하위에 설정)*/
.gt_toparea .gt_subtit {padding:0 30px}
.gt_toparea .gt_subtit span {font-size:1.071em}
.gt_toparea .gt_toptit p {padding:0 40px; font-size:1.571em}
    
/* 공통 표 스타일 조정 */
.cz_table th, .cz_table td {word-break: normal}
    
    
/* -------------------컨텐츠 스타일 시작 -------------------*/


}


/* PC LAYOUT */
@media only screen and (min-width:1025px) {
#wrap {overflow: hidden}

/* Layout */
#subcontainer{position: relative}
.subconwrap{position: relative}
.subconbox {position: relative; max-width:1460px; margin:-55px auto 0; background:#fff; border-radius:20px; box-sizing: border-box;  z-index:1}
.subconbox:before {content:""; display: block; position: absolute; top:80px; width:100%; height:42px; background:#ededed; border-radius:0 0 10px 10px}
.sub_conwrap {display:flex; max-width:1400px; padding:15px 10px 0; margin:0 auto; box-sizing: border-box}
#sub_left {position: relative; display: block; width:calc(100% - 1090px); margin-bottom:10px}
#subright {position: relative; width:1090px; box-sizing: border-box}
#subpage {margin:0 0 70px; min-height:500px}

/* subvisual */
.subvisual .visual_wrap:after {display:none}
.subvisual .visual_item {height:394px}
.subvisual .visual_item > a {height:392px}
.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 .ctrl_wrap {top:270px; margin:0 0 0 -680px}
    
/* sub tit */
.subcon_tit {position:absolute; top:-205px; left:50%; margin-left:-700px}
.subcon_tit h2 {position:relative; padding-top:20px}
.subcon_tit h2:before {content:""; display: block; position: absolute; top:0; left:0; width:60px; height:1px; background:#fff}
.subcon_tit h2 span {font-size:36px; font-weight:600; color: transparent; background:linear-gradient(180deg, #fff, #e4edfa); -webkit-background-clip: text; background-clip: text; text-shadow:0 3px 6px rgba(0,0,0,0.1)}
    
/* Subleft */
.left_tit {position: relative; max-width:250px; padding:0}
.left_tit h2 {max-width:250px; height:80px; padding:30px 0; font-size:24px; font-weight:600; background:linear-gradient(90deg, #6ea0fe, #416cba); color:#fff; text-align: center; box-sizing: border-box; border-radius:15px}
.leftmn {overflow:hidden; position: relative; max-width:250px; margin-top:12px; border:1px solid #d9d9d9; box-sizing: border-box; border-radius:15px 15px; background:#fff}
.leftmn > ul > li {border-top:1px solid #d9d9d9; padding:3px}
.leftmn > ul > li:first-child {border-top:0}
.leftmn > ul > li > a {position:relative; display: block; line-height: 130%; margin:4px; padding:16px 28px 16px 20px; font-size:1.385em; font-weight:500; color: #000; transition: all .3s; box-sizing: border-box; word-break:keep-all}
.leftmn > ul > li > a {display:block; min-height:32px; font-size:15px; font-weight:400; padding:13px 35px 13px 12px; margin:0; width:auto;  color:#000; box-sizing: border-box; background:#fff url(../images/sub/btn_submn_off.png) no-repeat right 10px top 50%; border-radius:10px}
.leftmn >  ul > li > a:hover, .leftmn .leftmenuover > a {color:#fff; font-weight:500; text-decoration:none; background:#5a5a5a url(../images/sub/btn_submn_on.png) no-repeat right 10px top 50%}


/*MN third*/
.leftmn .third {position: relative; box-sizing: border-box; padding:6px 0 2px}    
.leftmn .third li a {display:block; margin-top:4px; padding:6px 10px;  background:#e1e1e1 url(../images/sub/btn_thirdmn_arr.png) no-repeat right 5px top 50%; border-radius:3px; font-weight:400}
.leftmn .third li:first-child a {margin-top:0}
.leftmn .third li.third_on a , .leftmn .third li:hover a {background-color:#ff8156; color:#fff}

/*Subtop TIT */
#subtop {padding-bottom:43px; margin-bottom:20px}
#subtop h3 {padding:20px 10px}
.subtit span {display:inline-block;}

/* PC guide*/
#sub_guide {position:absolute; top:65px; left:0; width:100%}
#sub_guide .navi_area {height:43px; line-height:43px}
#sub_guide .navi_area ul {text-align:left}
#sub_guide .navi_area li {display: inline-block; width:auto !important}
#sub_guide .navi_area li a { display: block;padding:0 5px 0 12px; line-height:20px; background: url(../images/sub/navi_arr_pc.png) 0 50% no-repeat; font-size:1.154em}
#sub_guide .navi_area .nav_home img {vertical-align: middle}
#sub_guide .navi_area li:first-child a {background: none; padding: 0 5px 0 0}
#sub_guide .navi_area li:first-child a img {margin-top:-1px}
#sub_guide .navi_area li .cthird {color:#000; font-weight:400}
    
/* subtop_btn */
.subtop_btn {position:absolute; top:38px; right:0; display:flex; justify-content: space-between; align-items:center;  overflow:hidden}
.subtop_btn dl.font_wrap {display:flex; justify-content:center; align-items: center; width:100px; padding:0 10px; box-sizing: border-box; border:1px solid #d9d9d9; border-bottom:0; border-radius:10px 10px 0 0}
.subtop_btn dl.font_wrap > dd {width:calc(100% / 3 - 1px)}
.subtop_btn dl.font_wrap > dd a {display: block; width:100%; height:27px; line-height:27px; text-align: center; box-sizing: border-box; transition: all .3s; text-align: center}
.subtop_btn dl.font_wrap > dd a img {vertical-align: middle}
.subtop_btn dl.font_wrap > dd a:hover{transition:.3s}
.subtop_btn .btn_print {text-align: center; margin-left:5px}
.subtop_btn .btn_print a {display:block; width:42px; height:28px; line-height:26px; margin:0 auto; transition: all .3s; background:#6ea0fe; border-radius:10px 10px 0 0}
.subtop_btn .btn_print a img {vertical-align: middle}

/* 서브 퀵 */
#quickmenu {top:104px; right:15px; z-index:1}
.subv_quick  ul {width:84px; height:280px; padding:10px 6px 22px; background:rgba(255,255,255,0.8); border-radius:42px 42px 10px 10px; box-sizing: border-box; box-shadow:0 2px 5px rgba(0,0,0,0.2)}
.subv_quick  ul li {height:82px; margin:0 auto; padding:5px 0; text-align: center; border-top:1px solid rgba(0,0,0,0.2); box-sizing: border-box}
.subv_quick  ul li:first-child {border-top:0}
.subv_quick  ul li a {display:block}
.subv_quick .vq_txt {display: block; text-align: center; font-size:1.077em; padding-top:5px}
.btn_top a {display:block; width:38px; height:38px; margin:-18px auto 0; background:#345776; font-size:14px; border-radius:50%; text-align:center}
    
.subv_quick li:hover .vq_txt {transition:.3s; font-weight:500}    
.subv_quick .vquick01:hover .vq_txt {color:#009b86}
.subv_quick .vquick02:hover .vq_txt {color:#1ea51e}
.subv_quick .vquick03:hover .vq_txt {color:#1c8ab1}

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

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

}

/**** 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 .subtop_btn {display:none}
}

/*======================================= 탭 :공통 ========================================= */
div[class^="tabnavi0"] { position:relative; z-index:0; margin-bottom:20px}
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:12px; height:11px; margin-top:-6px}

/* 탭 :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 {background:#27a1b7; transition:.3s ease-in-out}
.tabnavi01 li:not(.on):focus a ,
.tabnavi01 li:not(.on):hover a {color:#fff}
/* 탭 :1차 : background none */
.tabnavi01 li:nth-child(4n + 1):before{display:none}

/* 탭 : 반응형 */
.react_tab {display:block}
.tabnavi01 ul {display: table; width: 100%; margin-bottom:25px; table-layout: fixed}
.tabnavi01 ul li { display:inline-block; background:#ebebeb; color: #767676; vertical-align: middle; box-sizing: border-box;  margin-left:7px;}
.tabnavi01 ul li + li {border-left: 0 none}
.tabnavi01 ul a { overflow: hidden; display: block; text-overflow: ellipsis; white-space: nowrap; font-size:15px; padding:12px 56px 12px 18px; box-sizing: border-box; font-weight:500}
.tabnavi01 ul li:first-child  {margin-left:0}
.tabnavi01 ul li a:after {content:""; display:block; position: absolute; top:50%; right:10px; width:27px; height:27px; margin-top:-13px; background: url(../images/sub/blt_tabnavi01_off.png) no-repeat 50% 50%; border-radius:3px}
.tabnavi01 ul .on {background:#27a1b7}
.tabnavi01 ul .on a {color:#fff}
.tabnavi01 ul li.on a:after, .tabnavi01 ul li:hover a:after {background:url(../images/sub/blt_tabnavi01_on.png) no-repeat 50% 50%}

/* 탭 여러개 있을 경우 */
.tabnavi02 ul {padding:15px 25px; border: 1px solid #cbcbcb; background:#fff}
.tabnavi02 ul:after {content:""; clear:both; display:block; height:0; font-size:0; line-height:0}
.tabnavi02 ul li { float: left; width: 20%; padding:5px 0; font-size:15px}
.tabnavi02 ul li a {display: block; height: 22px; line-height: 22px; padding-left:20px; background: url(../images/sub/blt_tabnavi02_off.png) left 5px no-repeat ; font-weight: 400; color: #1d1d1d; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tabnavi02 ul li.on a, .tabnavi02 ul li:hover a {background: url(../images/sub/blt_tabnavi02_on.png) left 5px no-repeat ; color:#27a1b7; font-weight: 500}

@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}
.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:#000; padding:5px 30px 5px 10px; background:#fff; border:1px solid #27a1b7; font-weight:500}
.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 {margin:0}
.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/blt_tabnavi_marr.gif) no-repeat 50% 50%}
.tabnavi01 ul li.on {background:#27a1b7;transition:.3s ease-in-out}
.tabnavi01 ul li.on 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; font-weight:500}
.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/blt_tabnavi_marr.gif) 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}
}

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



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

}