@font-face {
    font-family: 'NEXON Lv1 Gothic OTF';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv1 Gothic OTF.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'NEXON Lv1 Gothic OTF Bold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv1 Gothic OTF Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'yg-jalnan';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.2/JalnanOTF00.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Bareun_hipi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/naverfont_01@1.0/Bareun_hipi.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'NEXON Lv1 Gothic OTF Light';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv1 Gothic OTF Light.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'GmarketSansBold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'KOTRAHOPE';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2110@1.0/KOTRAHOPE.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Cafe24Ohsquare';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/Cafe24Ohsquare.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Cafe24OhsquareAir';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/Cafe24Ohsquareair.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

*,*::after,*::before{box-sizing: border-box; padding: 0; margin: 0; color: inherit;font-family: 'NEXON Lv1 Gothic OTF'; vertical-align: middle;line-height: 1.4;letter-spacing: 0.5px; word-spacing: -2px;}
html{font-size: 65%;}
.blind {position: absolute; top: 0; left: 0; width: 1px; height: 1px;overflow: hidden;}
.cb::after{content: ''; clear: both; display: block;}
#skip-navi a {position: absolute; top: -100px; background-color: #fff;}
body{font-size: 1.6rem;}
body#main{background: url(../img/main_body_bg.jpg) no-repeat right 0 top 600px;}
#container{min-height: 100vh; position: relative;}
#content-container{position: relative}
.pc{display: block;}
.mob{display: none;}

#side-block {position: absolute; z-index: 10;display: flex;flex-direction: column;align-items: center;padding: 70px 0 0 2%;}
#side-block a.down {width: 115px;background-color: #2b4378;padding: 10px 0;color: #fff;border-radius: 50px; margin: 30px 0;display: block; text-align: center;}
#side-block p.txt-img{background-position: center; background-repeat: no-repeat}
#main #side-block p.txt-img{background-image: url(../img/main_sidebar_txtimg.jpg);width: 65px; height: 335px;}
#sub #side-block p.txt-img{width: 65px; height: 335px;}

header {position: absolute; top: 0; left: 0; height: 110px; width: 100%;z-index: 9990;border-bottom: 1px solid rgba(255,255,255,0.4); transition: 0.1s;}
header nav{position: relative; height: 100%}
header #logo{position: absolute; transform: translate(0%, -50%); top: 50%; left: 100px;z-index: 10;}
header #logo .mob{display: none;}
header #logo .mob2{display: none;}
header #menu {position: absolute; right: 100px; width: 1100px; height: 100%; display: flex;}
header #menu > li{width: 16.666%; text-align: center; height: 100%; position: relative;}
header #menu > li:last-child ul{display: none !important;}
header #menu > li > a{width: 100%; height: 100%; display: block; padding-top: 45px; color: #fff; font-family: 'NEXON Lv1 Gothic OTF Light';}
header #menu > li > a.on{font-family: 'NEXON Lv1 Gothic OTF Bold';color:#fff462}
header #menu > li > a:hover{color:#fff462;font-family: 'NEXON Lv1 Gothic OTF Bold';}
header #menu > li.focus .sub-menu{display: block;}
header #menu .sub-menu{display: none;position: absolute; top: 100%; width: 100%;padding: 30px; background-color: #093473;}
header #menu > li.focus .sub-menu.none{background-color: transparent;}

header #menu .sub-menu a{color: #fff; padding: 10px 0; display: block;}
header #menu .sub-menu a:hover{color:#fff462}
header #menu > li:hover .sub-menu{display: block;}
header #ham{display: none; width: 55px; height: 55px; background-color: #556fb5; position: absolute; top: 20px; right: 20px; transition: 0.3s}
header #ham.on{border-radius: 50%; background-color: #061a53;}
header #ham span{width: 20px; height: 2px; background-color: #fff;margin: 4px auto; display: block; position: absolute; transform: translate(-50%, -50%);transition: 0.3s;}
header #ham span:nth-child(2){top: 15px; left: 50%;}
header #ham span:nth-child(3){top: 25px; left: 65%;}
header #ham span:nth-child(4){top: 35px; left: 50%;}
header #ham.on span:nth-child(2) {transform: rotate(-45deg) translate(-72%, -130%);}
header #ham.on span:nth-child(3){opacity: 0; transform: translate(-50%, -100%)}
header #ham.on span:nth-child(4) {transform: rotate(45deg) translate(-87%, -50%);}
header nav .nav-mob-logo{display: none; width: 147px; height: 46px; background-image: url(../img/nav_mob_logo.png); margin-bottom: 50px;}

header.on{position: fixed; background-color: #556fb5;}

footer {background-color: #304b78;padding: 0 60px;position: absolute; width: 100%;left: 0;}
footer .foot-wrap{position: relative;padding: 60px 0px}
footer .foot-wrap .txt-wrap { position: relative; padding: 0px 450px 0 180px;}
footer .foot-wrap .footer-logo{position: absolute; left: 0;}
footer .foot-wrap .txt-container p{font-size: 16px}
footer .foot-wrap .txt-container p:first-child{margin-bottom: 25px;color: #fff;}
footer .foot-wrap .txt-container p:nth-child(2){color: #ddd;}
footer .foot-wrap .txt-container p span{display: inline-block;margin: 0 30px; width: 1px; height: 15px; background-color: #fff; vertical-align: text-top;}
footer .foot-wrap .btn-container{position: absolute; right: 0; z-index: 2;}

footer .foot-wrap .btn-container .down{display: none; border: 1px solid #12294f; background:#062887 url(../img/foot-down.png)no-repeat right 15px top 21px; color: #fff;width: 130px; height: 60px; line-height: 58px; padding-left: 25px;}
footer .foot-wrap .btn-container .subscribe{display: inline-block;; border: 1px solid #12294f; background-color: #4c6897; color: #fff; text-align: center;width: 105px; height: 60px; line-height: 58px;}
footer .foot-wrap .btn-container .subscribe:hover{background-color: #0d30c6;}
footer .foot-wrap .btn-container .prev-look{border: 1px solid #fff;color: #fff;width: 165px; height: 58px; line-height: 56px; position: relative; display: inline-block;}
footer .foot-wrap .btn-container .prev-look button{width: 100%; height: 100%; text-align: left; padding-left: 20px;}
footer .foot-wrap .btn-container .prev-look:hover{background-color: #fff; color: #093473;}
footer .foot-wrap .btn-container .prev-look::before{content: "+"; color: #fff; display: block; position: absolute; right: 20px; transform: translateY(-50%); top: 53%;}
footer .foot-wrap .btn-container .prev-look:hover:before{color: #093473;}
footer .foot-wrap #move-top{position: absolute; right: 0; top: 0; transform: translateY(-50%); width: 80px; height: 80px; background: rgba(78, 185, 135, 1) url(../img/move-top-btn-arr.png)no-repeat center 20px; text-align: center; padding-top: 35px; color: #fff}
footer .foot-wrap #move-top:hover{background: rgba(78, 185, 135, 1) url(../img/move-top-btn-arr.png)no-repeat center 20px;}
footer .select-box{position: absolute;top: 100%; left: 0%; width: 100%; text-align: center; background-color: #fff; transition: 0.2s; height: 0; overflow: hidden;}
footer .select-box a{padding: 5px 0; display: block;}

@media (max-width: 1640px){
    header #menu {width: 850px; right: 50px;}
    header #logo {left: 50px;}
    header #menu .sub-menu{padding: 15px;}
    header #menu .sub-menu a{font-size: 14px;}

    #side-block {padding: 30px 0 0 1%;}
    #side-block .side-logo img{width: 170px;}
}

@media (max-width: 1340px){
    header #logo {left: 20px;}
    header #menu {width: 800px; right: 20px;}
    header #menu > li > a{font-size: 15px;}
    #side-block .side-logo img{width: 150px;}
}

@media (max-width: 1240px){
    body{font-size: 1.5rem;}
    body#main{background-image: url(../img/mob_back_img.jpg); background-position: right;}
    #side-block{display: none;}
    #content-container{width: 100%;}

    header.on{background-color: #fff;}
    header {position: fixed;background-color: #fff; border-bottom: 0; height: 90px;}
    header #logo .pc{display: none;}
    header #logo .mob.on{display: block;}
    header #logo .mob2.on{display: block;}
    header #logo {left: 15px;}
    header #ham{display: block; z-index: 10;}
    header nav {position:fixed;height: 100vh; width: 100vw;padding: 140px 30px 30px 30px;opacity: 0; pointer-events: none; background:#1840b1 url(../img/nav_back.jpg)no-repeat center top /cover}
    header nav.on{opacity: 1; pointer-events: all;}
    header nav .nav-mob-logo{display: block;}
    header nav .nav-close{width: 48px; height: 48px; display: block;position: absolute;right: 30px; top: 30px; background: url(../img/nav_close_btn.png)no-repeat; border: 1px solid #fff;}
    header #menu {position: static; width: auto;overflow-y: scroll; display: block;}
    header #menu > li {display: block;width: auto;text-align: center; height: auto; cursor: pointer;}
    header #menu > li:hover .sub-menu{display: inline-block}
    header #menu > li > a {color: #fff;display: inline-block; width: 20%; vertical-align: top; padding: 0; font-size: 18px; text-align: left;}
    header #menu .sub-menu {position: static;display: inline-block; width: 79%; background-color: transparent;padding: 15px; border-top: 1px solid #82a1de;}
    header #menu .sub-menu a{text-align: left; padding: 5px 0 5px 12px ; color: #eaf8ff; position: relative;}
    header #menu .sub-menu a::before{content: ''; position: absolute; transform: translateY(-50%); display: block; background-color: #fff; border-radius: 50%; top: 50%; width: 2px; height: 2px; left: 0;}
    header #menu > li:last-child ul{display: inline-block !important;}

    footer .foot-wrap{padding: 40px 0;}
    footer .foot-wrap .footer-logo{display: none;}
    footer .foot-wrap .btn-container{position: static; margin-bottom: 40px;}
    footer .foot-wrap .txt-wrap {padding: 0;}
    footer .foot-wrap .txt-container p span {margin: 0 15px;}
    footer .foot-wrap .btn-container .down{display: inline-block;}

    footer .foot-wrap .txt-container p br {display:block;}
}

@media (max-width: 768px){
    body{font-size: 1.4rem;}
    .pc{display: none;}
    .mob{display: block;}

    header #logo .mob.on {width: 140px;}
    header {height: 75px;}
    header nav{padding: 80px 20px 40px 20px;}
    header #ham { width: 45px;height: 45px;top: 15px; right: 15px;}
    header #ham span:nth-child(4) {top: 30px;}
    header #ham span:nth-child(2) {top: 8px;}
    header #ham span:nth-child(3) {top: 19px;}

    br.mob-br{display: block;}
    br.pc-br{display: none;}

    footer {padding: 0 15px;}
    footer .foot-wrap .txt-container p span {display: block;margin: 0;height: 0px;}
    footer .foot-wrap #move-top {font-size: 14px;transform: translateY(-50%);width: 65px;height: 65px; background: rgba(78, 185, 135, 1) url(../img/move-top-btn-arr.png)no-repeat center 12px; padding-top: 30px; }
    footer .foot-wrap .btn-container .prev-look{width: 140px;}
    footer .foot-wrap .txt-container p{font-size: 14px;}
    footer .foot-wrap .txt-container p {line-height: 1.6;}
}

@media (max-width: 460px){
    html {font-size: 40%;}

    header #logo {width: 150px;}
    header {height: 80px;}
    header #ham { width: 45px;height: 45px;top: 18px;right: 15px;}
    header #ham span:nth-child(2) {top: 10px;}
    header #ham span:nth-child(3) {top: 20px;}
    header #ham span:nth-child(4) {top: 30px;}

    header nav {padding: 100px 20px 30px 20px;}
    header #menu > li > a {font-size: 17px;text-align: left; width: 100%; font-family: 'NEXON Lv1 Gothic OTF Bold';}
    header #menu .sub-menu {width: 100%;padding: 10px 0 20px 0;margin-bottom: 20px;border-bottom: 1px solid #82a1de;border-top: 0}
    header #menu .sub-menu a{font-size: 13px}
    header #menu > li > a br.mob-br{display: none}

    footer .foot-wrap .btn-container .btn{width: 32.333%;height: 50px;line-height: 50px;font-size: 14px;}
    footer .foot-wrap .btn-container .down {background-image: none; text-align: center; padding: 0; }
    footer .foot-wrap .btn-container .prev-look {font-size: 14px;}
    footer .foot-wrap .btn-container {margin-bottom: 20px;}
    footer .foot-wrap .txt-container p:first-child { margin-bottom: 20px;}
    footer .foot-wrap .btn-container .prev-look::before{display:none;}
    footer .foot-wrap .btn-container .prev-look button{padding-left: 0; text-align: center;}
    footer .foot-wrap #move-top {transform: translateY(-65%);}
}