@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@900&display=swap');

@font-face {
    font-family: 'Cafe24 Ohsquare';
    src: url('../font/Cafe24Ohsquare.eot');
    src: local('Cafe24Ohsquare'),
        url('../font/Cafe24Ohsquare.eot?#iefix') format('embedded-opentype'),
        url('../font/Cafe24Ohsquare.woff2') format('woff2'),
        url('../font/Cafe24Ohsquare.woff') format('woff'),
        url('../font/Cafe24Ohsquare.ttf') format('truetype'),
        url('../font/Cafe24Ohsquare.svg#Cafe24Ohsquare') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/* @font-face {
    font-family: 'KoPub Dotum';
    font-weight: 300;
    font-style: normal;
    src: url('../font/KoPubDotumLight.eot');
    src: url('../font/KoPubDotumLight.woff2') format('woff2'),
         url('../font/KoPubDotumLight.woff') format('woff'),
         url('../font/KoPubDotumLight.ttf') format('truetype'),
         url('../font/KoPubDotumLight.svg#KoPubDotumLight') format('svg'),
         url('../font/KoPubDotumLight.eot?#iefix') format('embedded-opentype');
  }
  
  @font-face {
    font-family: 'KoPub Dotum';
    font-weight: 400;
    font-style: normal;
    src: url('../font/KoPubDotumMedium.eot');
    src: url('../font/KoPubDotumMedium.woff2') format('woff2'),
         url('../font/KoPubDotumMedium.woff') format('woff'),
         url('../font/KoPubDotumMedium.ttf') format('truetype'),
         url('../font/KoPubDotumMedium.svg#KoPubDotumMedium') format('svg'),
         url('../font/KoPubDotumMedium.eot?#iefix') format('embedded-opentype');
  }
  
  @font-face {
    font-family: 'KoPub Dotum';
    font-weight: 600;
    font-style: normal;
    src: url('../font/KoPubDotumBold.eot');
    src: url('../font/KoPubDotumBold.woff2') format('woff2'),
         url('../font/KoPubDotumBold.woff') format('woff'),
         url('../font/KoPubDotumBold.ttf') format('truetype'),
         url('../font/KoPubDotumBold.svg#KoPubDotumBold') format('svg'),
         url('../font/KoPubDotumBold.eot?#iefix') format('embedded-opentype');
  } */

  @font-face {
    font-family: 'Spoqa Han Sans Neo';
    font-weight: 300;
    font-style: normal;
    src: url('../font/SpoqaHanSansNeo-Thin.eot');
    src: url('../font/SpoqaHanSansNeo-Thin.woff2') format('woff2'),
         url('../font/SpoqaHanSansNeo-Thin.woff') format('woff'),
         url('../font/SpoqaHanSansNeo-Thin.ttf') format('truetype'),
         url('../font/SpoqaHanSansNeo-Thin.eot?#iefix') format('embedded-opentype');
  }

  @font-face {
    font-family: 'Spoqa Han Sans Neo';
    font-weight: 400;
    font-style: normal;
    src: url('../font/SpoqaHanSansNeo-Light.eot');
    src: url('../font/SpoqaHanSansNeo-Light.woff2') format('woff2'),
         url('../font/SpoqaHanSansNeo-Light.woff') format('woff'),
         url('../font/SpoqaHanSansNeo-Light.ttf') format('truetype'),
         url('../font/SpoqaHanSansNeo-Light.eot?#iefix') format('embedded-opentype');
  }

  @font-face {
    font-family: 'Spoqa Han Sans Neo';
    font-weight: 500;
    font-style: normal;
    src: url('../font/SpoqaHanSansNeo-Regular.eot');
    src: url('../font/SpoqaHanSansNeo-Regular.woff2') format('woff2'),
         url('../font/SpoqaHanSansNeo-Regular.woff') format('woff'),
         url('../font/SpoqaHanSansNeo-Regular.ttf') format('truetype'),
         url('../font/SpoqaHanSansNeo-Regular.eot?#iefix') format('embedded-opentype');
  }

  @font-face {
    font-family: 'Spoqa Han Sans Neo';
    font-weight: 600;
    font-style: normal;
    src: url('../font/SpoqaHanSansNeo-Medium.eot');
    src: url('../font/SpoqaHanSansNeo-Medium.woff2') format('woff2'),
         url('../font/SpoqaHanSansNeo-Medium.woff') format('woff'),
         url('../font/SpoqaHanSansNeo-Medium.ttf') format('truetype'),
         url('../font/SpoqaHanSansNeo-Medium.eot?#iefix') format('embedded-opentype');
  }

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, input, textarea, button,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video, input {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
    font: 1.125rem/1.4 'Spoqa Han Sans Neo', sans-serif;
    font-weight: 400;
    color: #ffffff;
	word-break: keep-all;
	overflow-x: hidden;
}
ol, ul, li {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
img{vertical-align:top;max-width:100%;}

a{text-decoration:none;color:inherit;}
a:hover{text-decoration:none;}

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

::selection{background:#27B2F3;color:#fff;}

input[type="checkbox"]{display: none;}
input[type="checkbox"] + label::before{
    content: "";
    display: inline-block;
    width: 30px;
    height: 30px;
	background: url(../images/form-check1.png) 50%/cover no-repeat;
	margin-right: 18px;
	transform: translateY(25%);
}
input[type="checkbox"]:checked + label::before{
    background: url(../images/form-check2.png) 50%/cover no-repeat;
}
::placeholder{color: #6D7689;}
[placeholder]:focus::-webkit-input-placeholder {
    transition: opacity 0.6s ease; 
    opacity: 0;
}
[placeholder]:focus::-ms-input-placeholder {
    transition: opacity 0.6s ease; 
    opacity: 0;
}

.wrap{max-width: 1920px;margin: 0 auto;width: 100%;}
.inner,.respon-inner2{
    width: 1170px;
    height: 100%;
    margin: 0 auto;
}
.respon-inner,.respon-inner-m{width: 100%;height: 100%;margin: 0 auto;}

.menu{display: none;}

.dim{
    display: none;
    width: 100%;
    height: 100vh;
    background: rgba(0,0,0,0.7);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 50;
}

.pc-only{display: block;}
.tablet-only{display: none;}
.respon-only{display: none;}
.mobile-only{display: none;}

header{
    position: fixed;
    width: 100%;
    max-width: 1920px;
    height: 120px;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    font-family: 'Raleway', sans-serif;
    font-size: 1.625rem/* 26 */;
    transition: 0.4s;
}
header:hover{background: #442DC3;}
header.on{
    background: #442DC3;
}
.header-wrap{
    width: 100%;height: 100%;
}
.header-inner{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 100px 0 130px;
    width: 100%;height: 100%;
}
header .logo{
    width: 200px;
    height: 100%;
    text-indent: -999px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
header .logo a{
    display: block;
    width: 183px;
    height: 50px;
    background: url(../images/logo.png) 50%/cover no-repeat;
}
header .logo2 a{
    background-image: url(../images/logo-white.png);
}
nav{width: 50%;height: 100%;}
nav > ul{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
}
nav > ul > li{
    height: 100%;
    position: relative;
}
nav > ul > li.on{color: #27B2F3;}
nav > ul > li:hover > a{color: #27B2F3;}
nav > ul > li a{
    width: 120%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}
.btn-menu{
    overflow: hidden;
    display: none;
    width: 44px;
    height: 28px;
    position: relative;
    padding: 5px;
}
.btn-menu i{
    width: 34px;
    height: 4px;
    background: #fff;
    text-indent: -999px;
    overflow: hidden;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(0deg);
    transition: 0.4s;
}
.btn-menu::before{
    content: "";
    display: block;
    width: 34px;
    height: 4px;
    background: #fff;
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(0deg);
    transition: 0.4s;
}
.btn-menu::after{
    content: "";
    display: block;
    width: 34px;
    height: 4px;
    background: #fff;
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(0deg);
    transition: 0.4s;
}
.btn-menu.on i{
    left: 20%;
    width: 0;
}
.btn-menu.on::before{
    top: 50%;left: 50%;
    transform: translate(-50%,-50%) rotate(45deg);
}
.btn-menu.on::after{
    top: 50%;left: 50%;
    transform: translate(-50%,-50%) rotate(-45deg);
}
.submenu{
    position: absolute;
    top: 70%;
    left: 6%;
    width: 120%;
    display: none;
}
.submenu li{
    padding: 10px 0px 10px 50px;
    color: #8F81DB;
}
.submenu li:nth-child(1){border-bottom: 1px solid #442DC3;}
.submenu li a{position: relative;justify-content: normal;padding: 0;}
.submenu li a::before{
    content: "";
    display: none;
    width: 10px;
    height: 10px;
    background: #8F81DB;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: -20px;
    transform: translateY(-50%);
}

.submenu li:hover a::before{display: block;}
.submenu li.on a::before{display: block;}


footer{
    width: 100%;
    height: 100px;
    background: #442DC3;
    font-size: 0.875rem/* 14 */;
}
.foot-inner{
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.f-logo{
    width: 143px;
    height: 39px;
    background: url(../images/logo.png) 50%/cover no-repeat;
}
.foot-con{text-align: right;}
.foot-info{display: flex;justify-content: flex-end;}
.foot-info p{margin-left: 35px;}

/* go_top */
.go_top{display: none; z-index: 999;
    position: fixed; right: 20px; bottom: 30px;
    width: 40px; height: 40px;
    text-align: center; line-height: 40px;
    background-color: #222; color: #fff;}


/* 최적화 */

@media screen and (max-width:1620px) {
    nav{width: 70%;}

}

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

    .header-inner{padding: 0 70px 0 100px;}
    nav{width: 65%;}

}

@media screen and (max-width:1400px) {
    header{font-size: 1.5rem;}
}

@media screen and (max-width:1320px) {
    nav{width: 70%;}
    header{font-size: 1.4rem;}
}

@media screen and (max-width:1170px) {
    .inner, .respon-inner2{width: 95%;}
    .header-inner{padding: 0 50px 0 80px;}
    nav{width: 75%;}
}

@media screen and (max-width:1050px) {
    .header-inner{padding: 0 50px;}
}

/* tablet */

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

    .pc-only{display: none;}
    .tablet-only{display: block;}

    .inner,.respon-inner,.respon-inner2{width: 92.1875%;}
    header{height: 80px;}
    .header-inner{padding: 0 40px 0 40px;}
    header .logo{width: 160px;}
    header .logo a{width: 148px;height: 40px;}
    nav{display: none;}
    .btn-menu{display: block;}
    .menu{
        display: block;
        width: 100%;
        height: 100vh;
        background: #442DC3;
        position: fixed;
        top: 0;
        right: -100%;
        padding: 23.4375vw/* 240 */ 19.53125vw/* 200 */ 0;
        font-family: 'Raleway', sans-serif;
        font-size: 4.375rem/* 70 */;
        line-height: 1.2;
        color: #fff;
        z-index: 2;
    }
    .menu > ul > li.on{color: #27B2F3;}
    .media-menu li{font-size: 3.5rem/* 56 */;color: #B4B6F3;position: relative;padding-left: 28px;}
    .media-menu li a::before{
        content: "";
        display: none;
        width: 12px;
        height: 12px;
        background: #B4B6F3;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
    }
    .media-menu li.on a::before{display: block;}

    .f-logo{width: 148px;height: 40px;}
}



/* 최적화 */

@media screen and (max-width:768px) {
    .menu{font-size: 4rem;}
}

@media screen and (max-width:660px) {
    .menu{padding: 23.4375vw 15vw;}
    .foot-con{font-size: 0.875rem;}
}

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

    .menu{font-size: 3.6rem;}

    footer{height: 100%;}
    .foot-inner{flex-direction: column;padding-top: 50px;padding-bottom: 40px;}
    .f-logo{width: 183px;height: 50px;}
    .foot-con{text-align: center;}
    .foot-info{justify-content: center;margin-top: 20px;font-size: 0.875rem/* 14 */;}
    .foot-info p{margin: 0 10px;}
    .copyright{font-size: 0.75rem/* 12 */;margin-top: 25px;}
}


    /* mobile */



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

    .pc-tablet-con{display: none;}
    .tablet-only{display: none;}
    .mobile-only{display: block;}
    
    .inner,.respon-inner,.respon-inner-m{width: 90.5882%;}
    .respon-inner2{width: 100%;}
    header{height: 100px;}
    .header-inner{padding: 0 20px 0 20px;}
    header .logo{width: 120px;}
    header .logo a{width: 120px;height: 33px;}

    .menu{font-size: 3rem;padding: 35vw 15vw 0;}
    .media-menu li{font-size: 2.5rem;}

    footer{height: 100%;}
    .foot-inner{flex-direction: column;padding-top: 40px;padding-bottom: 40px;}
    .f-logo{width: 183px;height: 50px;}
    .foot-con{text-align: center;}
    .foot-info{justify-content: center;margin-top: 15px;font-size: 0.875rem/* 14 */;}
    .foot-info p{margin-left: 0;}
    .copyright{font-size: 0.75rem/* 12 */;margin-top: 15px;}
}


/* 최적화 */

@media screen and (max-width:375px) {
    .menu{font-size: 2.8rem;padding: 35vw 11vw 0;}
}