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

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

/* 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; display:block; color:#333; font-size:19px; 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:207px}
.subvisual .visual_item > a {height:203px}
.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:25px; right:0; z-index:10}
#quickmenu.header_fixed {top:600px}
.sub_quick {overflow: hidden; width:110px; border-radius:15px 0 0 15px; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,0.1); padding-bottom:10px}
.sub_quick .sub_qtit {background:#3d4e69; padding:10px; text-align: center; color:#fff; font-family:'jalnan'; font-size:1.154em}
.sub_quick .sub_qtit span {color:#a8deff}
.sub_quick  ul li {text-align: center}
.sub_quick  ul li a {display:block; width:94px; margin:8px auto 0; border-radius:10px; border:1px solid #ddd; box-sizing: border-box; font-weight:600; color:#919191}
.sub_quick  ul li .vq_ico {position:relative; display:block; height:36px; padding:6px 0 12px; text-align: center}
.sub_quick  ul li .vq_ico:before {content:""; display: block; position: absolute; top:0; left:50%;margin-left:-33px;  width:66px; height:33px; border-radius:0 0 66px 66px}

.sub_quick  ul li:nth-child(1) .vq_ico:before {background: #dcf2f1}
.sub_quick  ul li:nth-child(2) .vq_ico:before {background: #e3eaff}
.sub_quick  ul li:nth-child(3) .vq_ico:before {background: #eeeafe}
.sub_quick  ul li:nth-child(4) .vq_ico:before {background: #fef2db}

.sub_quick  ul li .vq_ico img {position:relative; height:50px}
.sub_quick  ul li:first-child .vq_ico img {height:44px}
.sub_quick  ul li a .vq_txt {display: block; text-align: center; margin-bottom:8px}
.sub_quick  ul li a .vq_txt span {color:#000}
.sub_quick li:hover .vq_txt {transition:.3s; color:#000}
.btn_top {margin-top:10px}
.btn_top a {position:relative; display:block; width:100%; height:35px; margin:0 auto; background:#fff; font-size:15px; font-family: 'jalnan'; border-radius:50px 0 0 50px; text-align:center; border:2px solid #bdc1c8; text-align: right; box-sizing: border-box; border-right: 0}
.btn_top a span {display:block; padding:8px 12px 8px 34px; color:#bdc1c8; background:url(../images/sub/btn_top_pc.png) no-repeat 5px 50%}


/********************************************* SUB content **********************************************/
/* content Common */
h4.sub_tit4 {line-height:140%; padding:3px 0 3px 34px; margin:5px 0 10px; background:url(../images/sub/subtit4.png) no-repeat left top; font-size:1.2em; font-weight:600; color:#000}
h5.sub_tit5 {line-height:140%; padding:0 0 0 32px; margin:10px 0; background:url(../images/sub/subtit5.png) no-repeat left 5px top 2px; 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) {
.foot_wrap {padding-bottom:114px}
    
/* Layout */
#subright{position: relative}
#subright.nomargin {margin-top:0 !important}
#subtop h3 {margin:0 10px; text-align: center; border-bottom:1px solid #cfcfcf}
#subtop h3 span {display:block; height:52px; padding:18px 0 14px; font-size:1.308em; font-weight:600; box-sizing:border-box}
#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 10px 50px}

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

/* 서브 컨텐츠 영역 */
.subconbox {position:relative; margin:0; background:#fff}
    
.line_color01 #sub_guide {background:#3395f1}
.line_color02 #sub_guide {background:#1aa68d}
.line_color03 #sub_guide {background:#9386eb}
    
/* MB guide */
#sub_guide .navi_area {padding:5px 5px 5px 30px}
#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:30px; height:33px; position:absolute; top:5px; left:0; text-indent:-99999px; background:url(../images/sub/btn_home_m.png) 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 > li {position: relative; float: left; width:33.3%; box-sizing: border-box}
#sub_guide .navi_area > ul > li > a {display: block; height:33px; line-height:33px; padding:0 20px 0 8px; font-weight:400;  background:#fff 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-radius:5px; margin-left:4px}
#sub_guide .navi_area > ul > li:last-child a {border-right:none}
    
#sub_guide .submn {overflow: hidden; position: absolute; right: 0; top: 100%; width:calc(100% - 4px); 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:7px}
#sub_guide .submn ul {padding:2px; background:#fff; border-radius:5px} 
#sub_guide .submn li {border-bottom: 1px solid #dadbdd; 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 {overflow:hidden; position: fixed; left:10px; top:inherit !important; bottom: 0; height:104px; width:calc(100% - 20px); min-width:300px; z-index:1; box-sizing: border-box; border-radius:10px 10px 0 0; background:#fff; box-shadow:1px 6px 8px rgba(0,0,0,0.2)}
.sub_quick {width:100%; border:0}
.sub_quick .sub_qtit {text-align: left; padding:5px 10px; margin:4px 5px 0; border-radius:10px}
.sub_quick ul {display: flex; justify-content: space-between;padding:5px; gap:5px}
.sub_quick ul li {width:100%}
.sub_quick ul li a {width:100%; margin:0 auto; height:calc(100% + 3px); font-size:12px}
.sub_quick ul li a .vq_txt {margin-bottom:0; padding:5px 0}
.sub_quick ul li .vq_ico img {height:38px}
.sub_quick ul li:first-child .vq_ico img {height:40px}
.sub_quick ul li .vq_ico {padding:4px 0 10px; height:25px}
.btn_top {position: absolute; top:7px; right:8px; margin:0}
.btn_top a {border:0; width:56px; height:19px; border-radius:50px; font-size:13px}
.btn_top a span {padding:4px 8px 2px 22px; background-size:17px auto; background-position:2px 50%}

/********************************************* SUB content **********************************************/
/*MB에서 필요 없을때 선언*/
.mb_none{display: none}
    
/* 타이틀 */
h4.sub_tit4 {font-size:1.214em; background-size:24px auto; padding:0 0 0 30px; font-weight:600}
h5.sub_tit5 {font-size:1.143em; padding:0 0 0 30px; font-weight:400; background-size:18px auto}
    
/* -------------------공통스타일 -------------------*/

/* 공통 표 스타일 조정 */
.cz_table th, .cz_table td {word-break: normal}
    
/* ----------------컨텐츠 스타일 시작 ----------------*/


}


/* PC LAYOUT */
@media only screen and (min-width:1025px) {
#wrap {overflow: hidden}
.qmu_wrap .qmu_btn a {border-left:1px solid #d9d9d9}
.qmu_wrap .qmu_btn.qmu_join a {border-left:0}
    
/* 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}*/
.sub_conwrap {display:flex; max-width:1400px; margin:-36px auto 0; box-sizing: border-box}
#sub_left {position: relative; display: block; width:250px; margin-bottom:10px}
#subright {position: relative; width:1140px; margin-left:10px; box-sizing: border-box; background:#fff; border-radius:40px 10px 10px 10px; padding:0 0 0 15px; box-sizing: border-box}
#subpage {margin:0 0 70px; min-height:500px}
    
/* subvisual */
.subvisual .visual_wrap:after {display:none}
.subvisual .visual_item {height:324px}
.subvisual .visual_item > a {height:320px}
.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:162px; margin:0 0 0 -678px}
    
/* visual quick */
.visual_quick {top:208px}
.visual_quick ul li a {padding:3px 22px}
.visual_quick ul li a:after {top:-35px}
    
/* 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; z-index:1}
.left_tit h2 {max-width:250px; height:86px; padding:35px 0 0; margin-bottom:-7px; font-size:20px; font-weight:600; background:#3d4e69 url(../images/sub/bg_leftmn.gif) no-repeat 50% 50%; color:#fff; text-align: center; box-sizing: border-box; border-radius:10px 40px 10px 10px; font-family:'jalnan'}
.leftmn {overflow:hidden; position: relative; max-width:250px; padding-top:7px; border:1px solid #d9d9d9; box-sizing: border-box; border-radius:0 ; background:#fff; border-radius:0 0 20px 20px}
.leftmn > ul > li {border-top:1px solid #d9d9d9; padding:5px 0}
.leftmn > ul > li:first-child {border-top:0}  
.leftmn > ul > li > a {position:relative; display:block; line-height: 130%; margin:4px; min-height:32px; padding:14px 15px 13px 12px; margin:0 40px 0 0; width:auto;  font-size:1.231em; font-weight:500; color: #000; transition: all .3s; box-sizing: border-box; word-break:keep-all}
.leftmn >  ul > li > a:hover, .leftmn .leftmenuover > a {position:relative; font-weight:600; text-decoration:none; background:#e7e7e7; border-radius:0 50px 50px 0}
.leftmn >  ul > li > a:after {content:""; display:block; position:absolute; top:50%; right:-35px; width:46px; height:46px; margin-top:-23px; border-radius:50%; background:#fff url(../images/sub/bg_leftmn_off.gif) no-repeat 50% 50%; border:2px solid #fff; box-sizing: border-box}
.leftmn >  ul > li > a:hover:after, .leftmn .leftmenuover > a:after {content:""; display:block; position:absolute; top:50%; right:-35px; width:46px; height:46px; margin-top:-23px; border-radius:50%; background:#fff url(../images/sub/bg_leftmn_on.gif) no-repeat 50% 50%; border:2px solid #e7e7e7; box-sizing: border-box}

/*MN third*/
.leftmn .third {position: relative; box-sizing: border-box; padding:10px}    
.leftmn .third li a {display:block; margin-top:4px; padding:5px 10px 5px 20px; font-weight:400; background:url(../images/sub/blt_thirdmn_off.gif) no-repeat 0 8px}
.leftmn .third li:first-child a {margin-top:0}
.leftmn .third li.third_on a , .leftmn .third li:hover a {background:url(../images/sub/blt_thirdmn_on.gif) no-repeat 0 8px; color:#1f3a64; font-weight:600}

/*Subtop TIT */
#subtop {margin-bottom:20px}
#subtop h3 {padding:34px 260px 34px 10px; border-bottom:1px solid #cfcfcf}
.subtit span {display:inline-block}

/* PC guide*/
#sub_guide {position:absolute; top:33px; right:10px; z-index:1}
#sub_guide .navi_area {height:22px; line-height:22px}
#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.gif) 0 50% no-repeat; font-size:1em}
#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:500}

/* subtop_btn */
.subtop_btn {display:flex; justify-content: space-between; align-items:flex-end; overflow:hidden; position:relative; width:100%; margin-top:10px; padding:0 10px 4px; box-sizing: border-box}
.subtop_btn:before {content:""; display:block; position: absolute; bottom:0; left:0; width:100%; height:22px; border-radius:50px; background:#d5d9df}
.subtop_btn dl.font_wrap {position:relative; display:flex; justify-content:space-between; align-items:flex-end; width:100%}
.subtop_btn dl.font_wrap > dt {width:50px; margin-right:38px; text-align:center; font-weight:700; color:#acacac; font-size:14px}
.subtop_btn dl.font_wrap > dt span {display: block; margin-top:7px; color:#fff; letter-spacing:1.1px}
.subtop_btn dl.font_wrap > dd {width:34px; margin-bottom:2px}
.subtop_btn dl.font_wrap > dd a {display: block; width:100%; height:34px; line-height:34px; 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 {position: relative; text-align: center; margin-left:5px; margin-bottom:2px}
.subtop_btn .btn_print a {display:block}
.subtop_btn .btn_print a img {vertical-align: middle}


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

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

}

/**** 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:5px; top:50%; width:24px; height:24px; margin-top:-12px}

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

/* 탭 : 반응형 */
.react_tab {display:block}
.tabnavi01 ul {display: table; width: 100%; table-layout: fixed}
.tabnavi01 ul li { display:inline-block; background:#fff; color: #767676; vertical-align: middle; box-sizing: border-box;  margin-left:7px; border:2px solid #e7e7e7; border-radius:10px}
.tabnavi01 ul a { overflow: hidden; display: block; text-overflow: ellipsis; white-space: nowrap; font-size:15px; padding:12px 50px 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:24px; height:24px; margin-top:-12px; background:#b9b9b9 url(../images/sub/bg_tabnavi01.png) no-repeat 50% 50%; border-radius:50%; transition: .3s}
.tabnavi01 ul .on, .tabnavi01 ul li:hover {background:#fff; border-color:#ff9920}
.tabnavi01 ul li.on a:after, .tabnavi01 ul li:hover a:after {background-color:#ff9920}

/* 탭 여러개 있을 경우 */
.tabnavi02 ul {padding:12px 25px; border: 1px solid #cecece; background:#fff; border-radius:10px}
.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:14px}
.tabnavi02 ul li a {display: block; height: 22px; line-height: 22px; padding-left:20px; background: url(../images/sub/blt_tabnavi02_off.png) left 3px no-repeat ; font-weight:400; color: #4a4a4a; 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 3px no-repeat ; color:#1d1d1d; font-weight:600}

@media screen and (max-width:1024px){     
/* 탭 :공통 */
div[class^="tabnavi0"] {margin:10px}
.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:#000; padding:6px 30px 6px 10px; background:#fff; border:2px solid #ff9920; font-weight:500; border-radius:5px}
.tabnavi01 ul{ overflow:hidden; margin-top:0; padding:0; background:#eee; border:0; border-radius:0}
.tabnavi01 ul li + li:before{ display:none}
.tabnavi01 ul li {margin:0; border-radius: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:#ff9920 url(../images/sub/bg_tabnavi01.png) no-repeat 50% 50%; border-radius:50% 50%}
.tabnavi01 ul li.on {background:#ff9920; 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:2px solid #dfdfdf; font-weight:500; 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:#c5c5c5 url(../images/sub/bg_tabnavi02.png) no-repeat 50% 50%; border-radius: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) {

}