@font-face {
    font-family: 'GMarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'GMarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'GMarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}

*{  
    font-family: "GMarketSans", "Noto Sans KR", sans-serif;
    font-optical-sizing: auto;
    font-variation-settings: "wdth" 100;
    font-size: 10px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.wrap{}
.blind { position: absolute; overflow: hidden; clip: rect(0,0,0,0); width: 1px; height: 1px; margin: -1px; }
.inner { margin: 0 auto; width: 1560px;}

h1{}
h2{font-size: 4.8rem; color:#000; font-weight: 700;}
h3{font-size: 3.4rem; color:#000; font-weight: 700;}
h4{font-size: 3.2rem; color:#888; font-weight: 500;}
h5{font-size: 2.4rem; color:#888; font-weight: 500;}
p{font-size: 2.1rem; color:#333; font-weight: 500;}
span{font-size: 1.8rem; color:#888; font-weight: 300;}
ul, li{color:#333; list-style: none;margin: 0; padding: 0;}
a{text-decoration: none;}

.line { width: 60px; height: 1px; background: #555; display: block; margin: 30px auto; }

/* 상단바 */
.top{border-bottom:1px solid #bbb;width: 100%;height: 100px;}
.top .logo{width: 328px;height: 80px;background: url(../images/sp_layout.png) -9px 0px no-repeat;float: left;margin-top: 8px;}

.top .right{display: flex;float: right;align-items: center;height: 100px;}
.top .right .login, .top .right .lang {height: 48px;border-radius: 50px;margin-right: 14px;font-size: 1.8rem;padding: 4px 10px;line-height: 40px;text-align: center;}
.top .right .login{width: 85px;background: #1087f5;border: 2px solid #1087f5;color: #fff;}
.top .right .lang{width: 120px;background: #fff;border:2px solid #004074;color: #004074;position: relative;}
.top .right .lang::before {content: "";display: block;width: 21px;height: 21px;background: url(../images/sp_layout.png) -28px -97px no-repeat;position: absolute;top: 11px;left: 15px;}
.top .right .lang::after {content: "";display: block;width: 21px;height: 21px;background: url(../images/sp_layout.png) -65px -97px no-repeat;position: absolute;top: 11px;right: 14px;}

.top .right fieldset {position: relative;width: 345px;height: 48px;border-radius: 50px;border: 2px solid #bbb;overflow: hidden;}
.top .right fieldset input.text {padding: 0px 20px;font-size: 1.8rem;width: 280px;height: 48px;color: #333;border: 0;background-color: #fff;}
.top .right fieldset input.text::placeholder { color: #888; font-size: 1.6rem;}
.top .right fieldset input.text:focus { outline: none; outline-offset: -2px; }
.top .right fieldset .submit {font: 0 / 0 a;position: absolute;right: 0px;top: 0;background: url(../images/sp_layout.png) -114px -88px no-repeat;width: 48px;height: 48px;border: none;}

/* 네비게이션 */
.nav{width: 100%;padding: 40px 0px;}
.nav .nav_inner{ display: flex; align-items: center; justify-content: space-between; }
.nav ul { width: 64%; display: flex; justify-content: space-between; }
.nav ul li a {color: #333;float: left;font-size: 2.1rem;}
.nav ul li:hover{font-weight: 700;}
.nav .ham{font: 0 / 0 a;background: url(../images/sp_layout.png) -152px -90px no-repeat;width: 40px;height: 40px;float: right;}

/* 비주얼 */
.main .main_inner{ display: flex; justify-content: space-between;  position: relative;}
.main .main_inner::after { content: ""; display: inline-block; z-index: -99; background: url(../images/sp_layout.png) -18px -565px no-repeat; width: 487px; height: 537px; position: absolute; bottom: -330px; left: -140px; }

.main .left{background: url(../images/visual.jpg) no-repeat; width: 1165px; height: 700px; padding: 84px; border-radius: 50px;}
.main .left h2.logo{ font: 0 / 0 a; background: url(../images/sp_layout.png) -763px -15px no-repeat; width: 100px; height: 100px; }
.main .left .sub_tit, .main .left .tit{color:#fff;}
.main .left .sub_tit{font-size: 4.2rem; font-weight: 500; margin-top:20px;}
.main .left .tit{font-size: 7.2rem; margin-top:18px;}

.main .right{display: flex; flex-direction: column; justify-content: space-between;}
.main .right p { margin-top: 35px; color: #fff; }
.main .right h3 { color: #fff; line-height: 4.2rem; margin-top: 8px; }
.main .right h4 { color: #fff; font-size: 2.4rem; }

.main .right .guide, .main .right .consult { width: 370px; height: 338px; border-radius: 50px; padding: 30px; position: relative;}
.main .right span.go { color: #fff; font-size: 1.6rem; font-weight: 500; position: absolute; bottom: 20px; right: 40px; }
.main .right span.go::after { content: ""; display: inline-block; background: url(../images/sp_layout.png) -387px -380px no-repeat; width: 30px; height: 20px; }
.main .right .guide{ background:#1087f5 url(../images/hanyang_bg.png) right -194px bottom -80px no-repeat; color: #fff; }

.main .right .sub, .main .right .sub{font-size: 1.8rem; font-weight: 700; border-radius: 30px; padding: 10px 25px 6px; display: inline-block;}
.main .right .guide .sub { background: #fff; color: #1087f5;}

.main .right .consult{background:#004074 url(../images/hanyang_bg2.png) left -145px bottom -120px no-repeat; color:#fff; }
.main .right .consult p{margin-top:18px;}
.main .right .consult span.memo{font-size: 1.6rem; font-weight: 300; color: #eaeaea;}
.main .right .consult .sub{background: #fff; color:#004074;}


/* 학교장학 시스템 */
.system{width: 100%; padding: 90px 0 120px; text-align: center; position: relative;}
.system::after { content: ""; display: inline-block; background: url(../images/sp_layout.png) -989px -39px no-repeat; width: 882px; height: 207px; margin: 0 auto; z-index: -99; top: 340px; position: absolute; left: 50%; transform: translateX(-441px); }
.system h2{text-transform: uppercase;}
.system h2::before { content: ""; display: block; background: url(../images/sp_layout.png) -20px -160px no-repeat; width: 75px; height: 80px; margin: 0 auto; }
.system p{color:#888; font-size: 3.2rem; letter-spacing: -0.8px;}

.system ul.syt_list{ width: 100%; margin-top:85px;display: inline-block;}
.system ul.syt_list li{width:25%; float: left; font-size: 8.4rem; color:#1087f5; font-weight: 700;}
.system ul.syt_list li span{padding-left: 10px; font-size: 3.2rem; font-weight: 500;}
.system ul.syt_list li p{font-size: 2.4rem; color:#333; line-height: 1.2; font-weight: 700; margin-top: 50px;}
.system ul.syt_list li span.memo { color: #888; font-size: 2.1rem; display: block; margin-top: 5px; }

/* 자주찾는 메뉴 */
.bookmark{width: 100%; padding: 120px 0 80px; position: relative; background: #004074;}
.bookmark .inner::before { content: ""; display: inline-block; background: url(../images/sp_layout.png) -66px -459px no-repeat; width: 1785px; height: 84px; top: 65px; position: absolute; right: 0%; }
.bookmark .inner::after { content: ""; display: inline-block; background: url(../images/sp_layout.png) -868px -264px no-repeat; width: 975px; height: 150px; bottom: 25px; position: absolute; right: 30px; }

.bookmark ul.mark_list {display: flex;width: 100%;flex-wrap: wrap;}
.bookmark ul.mark_list li {width: 170px;margin-right: 28.5px;margin-bottom: 60px;}
.bookmark ul.mark_list li:nth-child(8){margin-right:0px;}
.bookmark ul.mark_list li a {display: block;text-align: center;color: #fff;line-height: 22px;}
.bookmark ul.mark_list li .icon {background: #fff;display: flex;height: 170px;width: 170px;padding: 20px;margin: 0 auto;border-radius: 30px;position: relative;align-items: center;}
.bookmark ul.mark_list li .name { display: block; margin-top: 25px; color: #fff; font-weight: 500; }

.bookmark ul.mark_list li .icon::before {content: '';background: url(../images/sp_layout.png) no-repeat;margin: 0 auto;}
.bookmark ul.mark_list li .icon01::before {background-position: -140px -155px;width: 72px;height: 72px;}
.bookmark ul.mark_list li .icon02::before {background-position: -260px -147px;width: 72px;height: 88px;}
.bookmark ul.mark_list li .icon03::before {background-position: -372px -155px;width: 72px;height: 72px;}
.bookmark ul.mark_list li .icon04::before {background-position: -478px -155px;width: 74px;height: 74px;}
.bookmark ul.mark_list li .icon05::before {background-position: -587px -155px;width: 86px;height: 72px;}
.bookmark ul.mark_list li .icon06::before {background-position: -715px -150px;width: 82px;height: 83px;}
.bookmark ul.mark_list li .icon07::before {background-position: -593px -268px;width: 72px;height: 75px;}
.bookmark ul.mark_list li .icon08::before {background-position: -710px -265px;width: 80px;height: 76px;}
.bookmark ul.mark_list li .icon09::before {background-position: -12px -270px;width: 90px;height: 70px;}
.bookmark ul.mark_list li .icon10::before {background-position: -130px -268px;width: 90px;height: 70px;}
.bookmark ul.mark_list li .icon11::before {background-position: -245px -265px;width: 72px;height: 75px;}
.bookmark ul.mark_list li .icon12::before {background-position: -361px -262px;width: 72px;height: 75px;}
.bookmark ul.mark_list li .icon13::before {background-position: -20px -155px;width: 76px;height: 77px;}
.bookmark ul.mark_list li .icon14::before {background-position: -472px -266px;width: 72px;height: 79px;}

/* 대학소식 */
.news{width: 100%; padding: 120px 0 80px; display: inline-block;}
.news h2{margin-bottom: 20px;}
.news .new_inner{position: relative;}
.news .left, .news .right{float: left;}
.news .left{margin-right: 2%; width: 48%;}
.news .left .box{float: left; margin-right: 4%; width: 48%;}
.news .left .box:nth-child(2), .news .left .box:nth-child(4){margin-right:0px;}
.news .right{width: 50%;}
.news .box{background: #fff; border: 1px solid #d7d7d7; border-radius: 30px; overflow: hidden; margin-bottom:4%;}
.news .box .img{overflow: hidden;}
.news .left .box .img{height: 205px;}
.news .right .box .img{height: 539px;}
.news .box .img img{background-position: center;}
.news .box .txt{padding: 20px 36px; min-height: 95px;}
.news .box .txt p{font-size: 1.8rem; line-height: 2.8rem;}

/* 컨트롤박스 */
.control { display: flex; align-items: center; justify-content: flex-end; gap: 0 1rem; position: absolute; right: 0; top: 5px; }
.control button { position: relative; width: 5rem; height: 5rem; border: 1px solid #d7d7d7; border-radius: 1.5rem; background-color: #fff; transition: all .1s; }
.control .btn_more { border-color: #848484; background-color: #848484; }
.control button::before { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); content: ''; display: block; background-image: url(../images/sp_layout.png); background-repeat: no-repeat; }
.control .btn_prev::before {width: 8px;height: 14px;background-position: -464px -100px;}
.control .btn_stop::before {width: 12px;height: 14px;background-position: -520px -100px;}
.control .btn_next::before {width: 8px;height: 14px;background-position: -579px -100px;}
.control .btn_more::before {width: 20px;height: 20px;background-position: -630px -97px;}

/* sns */
.sns{background: #f0f0f0; border-radius: 80px; width: 100%; padding: 120px 0 100px; display: inline-block;}
.sns .sns_inner{ position: relative; }
.sns h2{margin-bottom: 40px;}
.sns .sns_list{display: flex; justify-content: space-between;}
.sns .sns_list .box{width: 23.5%; background: #fff; border-radius: 30px; position: relative;}
.sns .sns_list .box01:after, .sns .sns_list .box04:after{content:""; display: block; background: url(../images/sp_layout.png) -39px -368px no-repeat; width: 49px; height: 50px; position: absolute; top: -20px; right: -20px; border-radius: 28px; border: 8px solid #f0f0f0;}
.sns .sns_list .box02:after, .sns .sns_list .box03:after{content:""; display: block; background: url(../images/sp_layout.png) -102px -368px no-repeat; width: 49px; height: 50px; position: absolute; top: -20px; right: -20px; border-radius: 28px; border: 8px solid #f0f0f0;}
.sns .sns_list .box .tit{padding:40px 40px 50px;}
.sns .sns_list .tit span{display: inline-block; font-size: 1.3rem; font-weight:500; border: 1px solid #ddd; border-radius: 30px; color:#333; padding: 6px 12px 3px;}
.sns .sns_list .tit .txt{word-break: keep-all; margin-top: 25px; color:#222; font-size: 2.4rem; font-weight:700; line-height: 3.6rem;}

.sns .sns_list .box .img{overflow: hidden; height: 210px; border-radius: 0 0 30px 30px;}
.sns .sns_list .box .img img{width: 100%;}

/* 공지사항 */
.notice{background: #fff; width: 100%; padding: 120px 0 100px; display: inline-block;}
.notice .notice_inner{ }
.notice h2{margin-bottom: 40px;}
.notice .tabbox{position: relative; margin-bottom: 20px;}
.notice .control{top:-10px;}
.notice .tabbox .tab_list{display: inline-block;}
.notice .tabbox .tab_list li{ float: left;}
.notice .tabbox .tab_list li:nth-child(2)::before, .notice .tabbox .tab_list li:nth-child(3)::before { content: ""; display: inline-block; height: 24px; width: 1px; background: #888; margin: 0 24px; position: relative; top: 3px; }
.notice .tabbox .tab_list li a{font-size: 2.8rem; color:#888;}
.notice .tabbox .tab_list li a.on{color:#1087f5; font-weight: 700;}
.notice .tabbox .tab_list li a:hover{color:#1087f5; font-weight: 700;}

.notice .notice_box .box li{background:#f6f8fb; border-radius:30px; margin-bottom: 1.5%; padding:30px 40px; word-break: break-all;}
.notice .notice_box .box li .date { display: inline-block;  font-size: 1.6rem; font-weight: 500; color: #888; }

.notice .notice_box .box01{display: flex; justify-content: space-between;}
.notice .notice_box .box01 li{width: 23.5%; position: relative; }
.notice .notice_box .box01 li .noti{display: inline-block; font-size: 1.3rem; font-weight:500; background: #fff; border: 1px solid #384caf; border-radius: 30px; color:#384caf; padding: 6px 12px 3px;}
.notice .notice_box .box01 li .date { line-height: 2.8rem; float: right;}

.notice .notice_box .box01 li a .tit{font-size: 2.1rem; font-weight: 700; line-height: 1.5; margin-top: 30px;}
.notice .notice_box .box01 li a .sub_tit{font-size: 1.8rem; line-height: 1.5; margin-top: 30px; margin-bottom: 10px;}
.notice .notice_box .box02 { display: flex; flex-wrap: wrap; justify-content: space-between; }
.notice .notice_box .box02 li{width: 49%;}
.notice .notice_box .box02 li a { width: 100%; display: flex; align-items: center; justify-content: space-between; }
.notice .notice_box .box02 li a .tit{font-size: 1.8rem; line-height: 1.5; position: relative;}
.notice .notice_box .box02 li:nth-child(1) .tit::after,
.notice .notice_box .box02 li:nth-child(2) .tit::after { content: "N"; display: inline-block; height: 22px; width: 22px; background: #1087f5; color: #fff; position: absolute; top: 0px; right: -30px; font-size: 1.1rem; text-align: center; border-radius: 30px; line-height: 2.2; }
.notice .notice_box .box02 li .date {}

/* 풋터 */
.foot{background: #111; width: 100%; padding: 70px 0 100px; display: inline-block;  color:#fff;}
.foot .top_box { display: flex; justify-content: space-between; width: 100%;}
.foot .logo{width: 328px;height: 80px;background: url(../images/sp_layout.png) -350px 0px no-repeat;}
.family_site, .mayor_site{padding: 18px 50px 18px 30px;display: inline-block;font-size: 1.8rem;font-weight: 700;border-radius: 12px;text-align: left;width: 250px;position: relative;}
.family_site{background: #004074;}
.mayor_site{background: #1087f5; margin-left: 18px;}
.site div .icon::after {content: "";display: inline-block;background: url(../images/sp_layout.png) -231px -97px no-repeat;width: 20px;height: 20px;position: absolute;top: 22px;right: 25px;}
.address{margin:50px 0;}
.address p{color:#fff; font-size: 1.6rem; line-height: 1.8;}
.address p .yl{font-weight: 500; color:#ffe500;margin-right: 8px;}
.address p .yl:last-child{margin-left: 24px;}

.bottom_box { padding: 50px 0 30px; border-top: 1px solid #888; display: flex; justify-content: space-between; align-items: center; }
.bottom_box .guide_link ul { display: flex; line-height: 0; }
.bottom_box .guide_link ul li{ margin-left: 42px;}
.bottom_box .guide_link ul li:first-child{ margin-left: 0;}
.bottom_box .guide_link ul li a{ color:#fff; font-size: 1.6rem;}

.bottom_box .sns_box { display: flex; justify-content: space-between; }
.sns_box > li { display: inline-block; margin-left: 15px; margin-top: 10px;}
.sns_box > li > a { text-indent: -999em; display: block; width: 28px; height: 28px; background: url(../images/sp_layout.png) no-repeat;}
.sns_box .facebook a {background-position: -172px -380px;}
.sns_box .blog a {background-position: -209px -380px;}
.sns_box .cacao a {background-position: -251px -380px;}
.sns_box .instagram a {background-position: -295px -380px;}
.sns_box .youtube a {background-position: -344px -380px;}

.foot .copyright{ color:#888; font-size: 1.6rem; text-transform: uppercase;}

/* 챗봇 */
.chatbot { width: 88px; height: 152px; background: #1087f5; border-radius: 50px; z-index: 99; position: fixed; bottom: 80px; right: 30px; }
.chatbot p{color:#fff; font-size: 1.4rem; text-align: center; margin:30px 0 10px 0;}
.chatbot .icon{content: "";display: inline-block; background: url(../images/sp_layout.png) -884px -19px no-repeat;width: 88px;height: 88px;position: absolute;}