@charset "utf-8";

:root {
    --color1: #023064;
    --color2: #32bdb8;
    --color3: #fecd20;
    --wh: #fff;
    --bk: #05091e;
    --txt: #383c50;
    --txt2: #343434;
    --txt3: #777;
    --line: #e5eaef;
}

body {box-sizing: border-box;color: var(--txt);font-family: 'Paperlogy', "gothic", "sans-serif";font-weight: 400;font-size: 18px; overflow-x: hidden; }

#skip{top:0;right:0;position:absolute;width:100%;height:15px;text-align:center;z-index: 9999;}
#skip li a{display:block;left:-10000px;position:absolute;top:0;width:100%;text-align:center;z-index:0;height:1px}
#skip li a:hover, #skip li a:focus, #skip li a:active {background:#363636;position:absolute;top:0px;left:0;z-index:5;color:#fff;width:100%;height:25px;padding:5px 0 0 0}

/* 새창열림 */
.new_win {display: inline-block;margin: 0 0 1px 5px;width: 17px;height: 17px;font-size: 0;background: url('/images/02jbeducation/common/ico_newwin.png') no-repeat left center;vertical-align: middle;}

/* 헤더 */
#header {border-bottom: 1px solid var(--line);}
.hd_wrap {display: flex;justify-content: space-between;align-items: center;padding: 0 10px;}
.logo {height: 70px;}
.logo a {display: block;width: 150px;height: 100%;background: url('/images/02jbeducation/common/logo_ch.png') no-repeat 0 center / 150px;}
.logo a span {position: absolute;top: -10000px;left: -10000px;}
/* 헤더상단메뉴 */
.gnb button {width: 40px;height: 40px;background: url('/images/02jbeducation/common/ico_layout.png') no-repeat;padding: 0;margin-top: 5px;}
.gnb button span {position: absolute; top: -10000px;}
.gnb button.gnb_open {background-position: 1px -99px;border-radius: 50%;}
.gnb button.gnb_close {background-color: var(--wh);background-position: -308px 5px;position: absolute;top: 10px;left: -56px;border-radius: 50%;}
.gnb .gnb_open:hover, .gnb .gnb_open:active, .gnb .gnb_open:focus {background-color: var(--wh); filter: invert(0.9);}
.gnb .gnb_close:hover, .gnb .gnb_close:active, .gnb .gnb_close:focus{transform: rotate(180deg); transition-duration: 300ms;}
.gnb .gnb_wrap {display: none;}
.gnb.on .gnb_wrap {display: block;}
.gnb_wrap {position: fixed;top: 0;left: 0;width: 100%;height: 100vh;background: var(--color1);box-sizing: border-box;z-index: 99;}
.gnb_wrap:before {display: block;position: absolute;bottom: -14px;left: -58px;width: 300px;height: 300px;background: url('/images/02jbeducation/common/menubox_bg.png') no-repeat center / 300px;opacity: 0.2;content: '';}
.gnb_wrap .gnb_bg {display: block;position: fixed;top: 0;right: 0;padding: 30px;width: 80%;height: auto;border-radius: 0 0 0 50px;background: var(--wh);box-sizing: border-box;}
.menu_box .depth1>a{display: block;position: relative;border-radius: 15px;line-height: 50px;font-weight: 500;color: var(--txt2);font-size: 20px;}
.menu_box .depth1>a::before{display: block;position: absolute;top: 50%;right: 0;transform: translateY(-50%);width: 20px;height: 20px;background: url('/images/02jbeducation/common/ico_layout.png') no-repeat -249px -4px;content:'';}
.menu_box .depth2 {padding: 15px 25px;background: #e6f7f6;border-radius: 30px;}
.menu_box .depth2 a{position: relative;line-height: 2;font-size: 18px;font-weight: 300;display: block; padding-left: 12px;}
.menu_box .depth2 a:hover, .menu_box .depth2 a:focus {text-decoration: underline;}
.menu_box .depth2 li>a::before{display: block;position: absolute;top: 50%; transform: translateY(-50%);left: 0;width: 3px;height: 3px;background: var(--txt3);content:'';}
.menu_box .depth2 {display: none;}
.menu_box .depth1.select .depth2 {display: block;}
.menu_box .depth1.select>a{color: var(--color2);font-weight: 600;}
.menu_box .depth1.select>a::before {transform: rotate(180deg);top: 30%;}
.menu_box .depth1.menu4>a {background: var(--color2);color: var(--wh);margin: 15px 0 0 0;text-align: center;width: 85%;border-radius: 10px;line-height: 35px;height: 35px;}
.menu_box .depth1.menu4>a .new_win {background: url('/images/02jbeducation/common/ico_layout.png') no-repeat -8px -5px;margin: 0 0 4px 5px;}
.menu_box .depth1.menu4>a::before{display: none;}
/* 유틸리티 */
.util {margin: 100px 0 20px;}
.util:before {display: block; width: 100%; height: 1px; margin: 20px 0; background: var(--line);content: '';}
.util>ul {display: flex;flex-wrap: wrap;}
.util>ul>li {width: 50%;margin: 10px 0;}
.util>ul>li>a {display: block;font-weight: 500;font-size: 16px;}
.util>ul>li>a:hover, .util>ul>li>a:focus {text-decoration: underline;}
.util>ul>li.g_login>a:before,
.util>ul>li.g_logout>a:before,
.util>ul>li.g_sitemap>a:before{display: inline-block;width: 20px;height: 20px;margin: 0 5px 2px 0;background: url('/images/02jbeducation/common/ico_layout.png') no-repeat;content: '';vertical-align: middle;}
.util>ul>li.g_login>a:before {background-position: -68px -5px;} 
.util>ul>li.g_logout>a:before {background-position: -129px -4px;} 
.util>ul>li.g_sitemap>a:before {background-position: -190px -5px;}
.util>ul>li.g_sns>a:after,
.util>ul>li.g_lang>a:after {display: inline-block;width: 17px;height: 17px;margin-left: 5px;background: url('/images/02jbeducation/common/ico_layout.png') no-repeat -251px -8px;content: '';vertical-align: middle;}
.util>ul>li.g_sns.on>a:after,
.util>ul>li.g_lang.on>a:after {transform: rotate(180deg);}
.util li.g_sns .g_snsBox, .util li.g_lang .g_langBox {display: none;}
.util li.g_sns.on .g_snsBox, .util li.g_lang.on .g_langBox {display: block;position: absolute;margin: 10px 0;background: var(--wh);border-radius: 20px;border: 1px solid var(--line);z-index: 9;}
.g_snsBox {width: 171px;}
.g_snsBox ul {display: flex; flex-wrap: wrap;}
.g_snsBox a {display: block;width: 47px;height: 47px;margin: 5px;border-radius: 50%;background: url('/images/02jbeducation/common/ico_main.png') no-repeat;}
.g_snsBox span {position: absolute; top: -10000px; left: -10000px;}
.g_snsBox .kaka a {background-position: -6px -55px;}
.g_snsBox .blog a {background-position: -72px -55px;}
.g_snsBox .face a {background-position: -139px -55px;}
.g_snsBox .ins a {background-position: -273px -55px;}
.g_snsBox .you a {background-position: -206px -55px;}
.g_langBox {padding: 10px;}
.g_langBox li {line-height: 1.8; font-size: 14px;}
.g_langBox a {display: block; font-weight: 500;}
.g_langBox a i {font-style: normal; margin-left: 5px; font-weight: 400;}
.g_snsBox .close, .g_langBox .close {position: absolute;bottom: 10px;right: 10px;width: 34px;height: 34px;background: #e7eaef url(/images/02jbeducation/common/ico_layout.png) no-repeat -311px 2px;font-size: 0;border-radius: 50%;}
.g_langBox .close {bottom: -12px; right: -12px;}
.g_snsBox .close:hover, .g_langBox .close:focus {transform: rotate(180deg); transition-duration: 400ms;}

/* 푸터 */
#footer {background: var(--bk);color: #f6f6f6;padding: 40px 10px;font-weight: 300;}
.ft_wrap .ft_link {display: flex;margin-bottom: 60px;}
.ft_wrap .ft_link li { margin-right: 20px;}
.ft_wrap .ft_link li a {display: block;color: #f6f6f6;line-height: 1.8;}
.ft_wrap .ft_link li:first-child a {color: var(--color2); font-weight: 500;}
.ft_wrap .ft_link li a:hover, .ft_wrap .ft_link li a:focus {text-decoration: underline;}
.ft_wrap .foot {line-height: 1.8;}
.ft_wrap .foot address {font-style: normal;}
.ft_wrap .foot .ft_info {margin: 20px 0;}
.ft_wrap .foot .ft_info span {display: inline-block;margin: 0 5px;}
.ft_wrap .foot .ft_info strong {display: inline-block;width: 56px;}
.ft_wrap .foot .ft_info i {padding: 0 4px; margin-right: 5px; font-style: normal; background: #f6f6f6; color: var(--bk); font-weight: 400; font-size: 0.9em; line-height: 25px;border-radius: 5px;}
.ft_wrap .foot .copy {font-size: 15px;}

/* tablet */
@media (min-width: 768px) {
#header:hover, #header:focus {background: var(--wh); transition-duration: 400ms;}
.hd_wrap {padding: 0 20px;}
.logo {height: 130px;}
.logo a {width: 229px; background-size: 229px;}

#footer {padding: 60px 20px;}
}

/* desktop*/
@media (min-width: 1023px) {
.gnb {width: calc(100% - 300px);}
.gnb button.gnb_open, .gnb button.gnb_close {display:none;}
.gnb .gnb_wrap {display: block;position: static;height: auto;}
.gnb_wrap {background: transparent;}
.gnb_wrap:before {display: none;}
.gnb_wrap .gnb_bg {position: static;background: transparent;padding: 0;width: 100%;}
.gnb_wrap .gnb_bg:after {display:block;clear:both;content:''}
.menu_box {float: right;margin-top: 30px;}
.menu_box ul {display: flex;align-items: center;/* position: relative; */}
.menu_box .depth1>a {padding: 0 20px;}
.menu_box .depth1>a::before {display: none;}
.menu_box .depth1>a:after {display: block;position: absolute;top: -1px;right: 8px;width: 30px;height: 30px;background: var(--color1);border-radius: 50%;color: var(--wh);overflow: hidden;transform: scale(0);}
.menu_box .depth1.menu1>a:after {content: '다';}
.menu_box .depth1.menu2>a:after {content: '시';}
.menu_box .depth1.menu3>a:after {content: '다';}
.menu_box .depth1>a:hover:after {transform: scale(1); transition-duration: 200ms;}
.menu_box .depth1.select>a {font-weight: 500; color: var(--bk);}
.menu_box .depth1.select>a:after {transform: scale(1);}
.menu_box .depth1.menu4>a {margin: 0 0 0 20px;padding: 0 18px;width: auto;}
.menu_box .depth1 .depth2 {position: absolute;top: 130px;background: var(--color2);padding: 0;z-index: 9;}
.menu_box .depth1.select .depth2:before {display: block;position: absolute;top: 0;left: 0;width: 150vw;height: 90px;background: var(--color2);content: '';margin-left: -200%;}
.menu_box .depth2 a {color: var(--wh);padding: 0 30px;line-height: 90px;font-size: 20px;font-weight: 400;}
.menu_box .depth2 li>a::before {background: #80d6d3; height: 12px;width: 1px;}
.menu_box .depth2 li:first-child>a::before {display: none;}
.util {position: absolute;margin: 0;right: 20px;top: 20px;width: 405px;}
.util:before {display: none;}
.util>ul {flex-wrap: nowrap;}
.util>ul>li {width: auto;margin: 0 0 0 20px;}

#footer {font-size: 18px;}
.ft_wrap .foot .ft_info {display: flex; margin: 0 0 20px 0;}
.ft_wrap .foot .ft_info li {margin-right: 30px;}
.ft_wrap .foot .ft_info strong {width: auto; margin-right: 12px;}
.ft_wrap .foot .ft_info i {line-height: 30px;}
}

/* 와이드 */
@media (min-width: 1500px) {
.gnb_wrap .gnb_bg {display: flex;align-items: center;justify-content: space-between;}
.gnb_wrap .gnb_bg:after {display: none;}
.menu_box {float: none;margin: 0;}
.menu_box .depth1>a {font-size: 22px;}
.menu_box .depth2 a {font-size: 22px;font-weight: 300;padding: 0 40px;}
.util {position: static;margin-top: 10px;width: auto;}
}
@media (min-width: 1750px) {
.hd_wrap {width: 1730px; margin: 0 auto; padding: 0;}
.menu_box .depth1>a {padding: 0 35px;}
.menu_box .depth1>a:after {right: 24px;}
.menu_box .depth1.menu4>a {margin: 0 0 0 35px;}
.util>ul>li {margin: 0 0 0 30px;}

#footer {padding: 60px 0;}
.ft_wrap {width: 1730px; margin: 0 auto; }
.ft_wrap .foot address {display: inline-block; margin-right: 50px;}
.ft_wrap .foot .ft_info {display: inline-flex;}
}






/* -- 서브레이아웃:s -------------------------------------------------------------------------------------------------------- */
.sub_container {}
.sub_wrap .sub_left {display: none;}
.sub_wrap .sub_right {position: relative;width: 95%;margin: 0 auto;}
.sub_title {padding: 0 0 40px 0;border-bottom: 1px solid var(--line);}
.sub_title h3 {font-size: 38px;color: var(--wh);text-align: center;margin: 30px auto;padding: 40px 0;width: 80%;background: var(--color1);border-radius: 30px;}
.local {width: 300px; margin: 0 auto;}
.local>ul {display: flex;}
.local>ul>li {position: relative;padding: 0 15px;}
.local>ul>li:after {display: block;position: absolute;top: 50%;transform: translateY(-50%);right: -10px;width: 20px;height: 20px;background: url('/images/02jbeducation/common/ico_layout.png') no-repeat -130px -60px;content:'';}
.local>ul>li:last-child:after{display: none;}
.local>ul>li>a {display: block;font-size: 16px;line-height: 2;}
.local>ul>li>a:hover, .local>ul>li>a:focus {text-decoration: underline;}
.local>ul>li:last-child>a {color: var(--txt);font-weight: 500;}
.local>ul>.home>a {width: 24px;height: 32px;background: url('/images/02jbeducation/common/ico_layout.png') no-repeat -67px -55px;font-size: 0;}
.local>ul div {display: none;}
.local>ul div.on {display: block;position: absolute;top: 40px;left: 0;width: 150px;padding: 15px 25px;background: var(--color1);border-radius: 20px;box-sizing: border-box;z-index: 9;}
.local>ul div a {position: relative;display: inline-block;font-size: 17px;line-height: 2.3;font-weight: 300;color: var(--wh);}
.local>ul div a:hover, .local>ul div a:focus {text-decoration: underline;}
.local>ul div .lo_close {position: absolute;top: -15px;right: -15px;width: 34px;height: 34px;background: var(--color2) url('/images/02jbeducation/common/ico_layout.png') no-repeat -374px 2px;font-size: 0;border-radius: 10px;}
.local>ul div .lo_close:hover, .local>ul div .lo_close:active, .local>ul div .lo_close:focus {transform: rotate(180deg); transition-duration: 400ms;}

.s_util {width: 220px;margin: 30px auto 0 auto;}
.s_util>ul {display: flex;justify-content: space-between;}
.s_util>ul>li>a {display:block;width: 49px;height: 49px;border-radius: 50%;background: #e7eaef url('/images/02jbeducation/common/ico_layout.png') no-repeat;}
.s_util>ul>.zoomin>a {background-position: -238px -47px;}
.s_util>ul>.zoomout>a {background-position: -174px -47px;}
.s_util>ul>.urlcopy>a {background-position: -303px -47px;background-color: var(--color3);}
.s_util>ul>.print>a {background-position: -370px -47px;background-color: var(--color1);}
.s_util>ul>li>a span {font-size: 0;}
.s_util>ul>li>a:hover, .s_util>ul>li>a:active, .s_util>ul>li>a:focus {transform: translateY(-10px); border-color: var(--point2);}

.s_con { padding: 40px 0 80px 0; font-size: 20px;}

/* tablet */
@media (min-width: 768px) {
.sub_title:after {display:block; clear:both; content:''}
.local {float: left;margin: 20px 0 0 0;}
.s_util {float: right; margin: 0;}
}
/* desktop*/
@media (min-width: 1023px) {
.sub_wrap {display: flex;padding: 0 20px;justify-content: space-between;min-height: 100vh;position: relative;}
.sub_wrap .sub_left {display: block; width: 25%;}
.sub_wrap .sub_left:before {display: block;position: absolute;top: 100px;left: 0px;z-index: -1;width: 29%;height: 100%;background: var(--wh);box-shadow: 1px 1px 20px rgba(196, 203, 213, 0.49);border-radius: 0 50px 0 0;content:'';}
.sub_wrap .sub_right {width: 68%;margin: 110px 0 0 0;}
.sLeft_wrap {margin: 35px 0 0 0;background: #fff;border-radius: 30px;box-shadow: var(--shadow2);box-sizing: border-box;}
.sLeft_wrap h2 {font-size: 30px;color: var(--wh);text-align: center;padding: 60px 0;background: var(--color1);border-radius: 30px;font-family: 'Hakgyoansim Undongjang';font-weight: normal;}
.sLeft_wrap>div {padding: 20px;margin: 30px 0 50px 0;}
.sLeft_wrap>div>ul>li {position: relative;padding-left: 30px;border-left: 5px solid #ccd6e0;}
.sLeft_wrap>div>ul>li.on:before {display: block;position: absolute;left: -5px;width: 5px;height: 100%;background: var(--color1);content:'';}
.sLeft_wrap>div>ul>li>a {display: block;position: relative;line-height: 3;font-size: 20px;color: var(--txt);}
.sLeft_wrap>div>ul>li.on>a {font-weight: 500;}
.sLeft_wrap>div>ul>li.on>a:after{display: block;position: absolute;top: 31%;right: 0;width: 25px;height: 24px;background: url('/images/02jbeducation/common/ico_layout.png') no-repeat 4px -59px;content:'';}
.sLeft_wrap>div>ul>li:hover, .sLeft_wrap>div>ul>li:focus {text-decoration: underline;}
.sLeft_wrap>div>ul>li:hover:before, .sLeft_wrap>div>ul>li:focus:before {display: block;position: absolute;left: -5px;width: 5px;height: 100%;background: var(--color1);content:'';}
.sLeft_wrap>div>ul ul {display: none;}
.sLeft_wrap>div>ul>li.on ul  {display: block;}
.sLeft_wrap>div>ul ul {padding: 20px 30px;background: #f3f3f3;border-radius: 30px;}
.sLeft_wrap>div>ul ul a {display: block;position: relative;font-size: 19px;font-weight: 300;line-height: 2.4;}

.sub_title {padding: 0 0 18px 0;}
.sub_title h3 {background: transparent;color: var(--bk);margin: 0 0 20px 0;padding: 0;text-align: left;}
.s_util {margin-right: 20px;}
.s_con {padding: 40px 20px 80px 20px;}
}

/* 와이드 */
@media (min-width: 1500px) {
.sub_wrap .sub_left {width: 20%;height: 100vh;/* min-height: 100vh; *//* position: relative; */}
.sub_wrap .sub_left:before {width: 25%;}
.sLeft_wrap h2 {padding: 80px 0;font-size: 34px;}
.sLeft_wrap>div>ul>li>a {font-size: 22px;}
.sub_wrap .sub_left:before {top: 130px;left: -80px;}
.sub_wrap .sub_right {width: 73%;margin: 130px 0 0 0;}
.sub_title h3 {font-size: 48px;padding-left: 10px;}
}
@media (min-width: 1750px) {
.sub_wrap {width: 1730px;margin: 0 auto;padding: 0;}
.sub_wrap .sub_left:before {width: 28%;}
}
/* -- 서브레이아웃:e -------------------------------------------------------------------------------------------------------- */