@charset "utf-8";
@import url("font.css");
@import url("default.css");
@import url("swiper.css");
@import url("swiper.min.css");
@import url("style.css?v=20205010");


/* common */
body {margin: 0;}
header {position: fixed; top: 0; width: 100%; height: 100px; border-bottom: 1px solid #eaeaea; background: #fff; z-index: 10000;}
main {padding-top: 100px;}
footer {height: 266px;}
.container {position: relative; height: 100%;}

.ct-nr {margin: 0 auto; padding: 0 12px; max-width: calc(1200px + 24px)}
.web {height: 100%;}
.mob {display: none;}

/* flex */
.fac {display: flex; align-items: center;}
.fas {display: flex; align-items: flex-start;}
.fae {display: flex; align-items: flex-end;}
.fjc {display: flex; justify-content: center;}
.fcc {display: flex; align-items: center; justify-content: center;}
.fcs {display: flex; align-items: center; justify-content: space-between;}
.fce {display: flex; align-items: center; justify-content: end;}
.fts {display: flex; align-items: flex-start; justify-content: space-between;}
.fss {display: flex; align-content: space-between; justify-content: space-between;}

/* ##### WEB ##### */
/* header */
.header-wrap {display: flex; align-items: center; justify-content: space-between; margin: 0 auto; padding: 0 12px; max-width: 1600px; height: 100%;}
.header-wrap .header-logo {}
.header-wrap .header-nav ul {display: flex; gap: 46px;}
.header-wrap .header-login {display: flex; gap: 28px;} 
.header-wrap .header-login .language-btn {display: flex; gap: 16px;}


/* main */
.main-visual {position: relative; width: 100%; max-height: 580px;}
.main-wrap section {position: relative; display: flex; justify-content: center;}
.main-wrap section .section-wrap {padding: 100px 0 110px; width: 100%; text-align: center;}


/* sub */
.sub-visual {position: relative; width: 100%; height: 300px;}
.contents section {position: relative; display: flex; justify-content: center;}
.contents section .section-wrap {padding-top: 100px; width: 100%;}
.contents section:last-child {padding-bottom: 110px;}

/* popup */
.not_scroll {position: fixed; width: 100%; height: 100%;  overflow: hidden;}

@media (min-width: 1281px) and (max-width: 1400px) {
    .header-wrap .header-nav ul {gap: 40px;}
    .header-wrap.mypage .header-nav ul {gap: 30px;}
}

@media (min-width: 1200px) and (max-width: 1280px) {
    .header-wrap .header-nav ul {gap: 40px;}
    .header-wrap.mypage .header-nav ul {gap: 25px;}
}

@media (max-width: 1200px) {
    .web {display: none;}
    .mob {display: initial;}
    header {height: 60px;}
    main {padding-top: 60px;}
    .ct-nr {width: auto;}
    .mob .header-login .language-btn {display: flex; gap: 16px;}
}

@media (max-width: 1024px) {
    .contents section .section-wrap {padding-top: 80px;}
    .sub-visual {height: 200px;}
}

@media (max-width: 768px) {
    .contents section:last-child {padding-bottom: 60px;}
    .contents section .section-wrap {padding-top: 60px;}
    .main-wrap section .section-wrap {padding: 60px 0;}
}





/* ##### MOBILE ##### */

/* header */
#header-subdiv {display: flex; justify-content: space-between; margin-left:12px; height: 60px;}
#hamburger-menu { cursor: pointer; width: 100px; height: 100px; display: flex; justify-content: flex-end; transform: scale(0.6) translate(35%, -35%);} 
#hamburger-menu span { width: 48px; height: 3px; background-color: black; position: absolute; margin-right: 30px; transition: .4s ease-in-out; } 
#hamburger-menu span:nth-child(1) { top: 35px; } 
#hamburger-menu span:nth-child(2) { top: 50px; } 
#hamburger-menu span:nth-child(3) { top: 65px; } 
#hamburger-menu.open span:nth-child(1) { top: 50px; transform: rotate(135deg); } 
#hamburger-menu.open span:nth-child(2) { opacity: 0; } 
#hamburger-menu.open span:nth-child(3) { top: 50px; transform: rotate(-135deg); }
#menu-container {position: relative; display: none; height: 100vh; background: #fff;}
#menu-container .menu-list { position: absolute; display: flex; flex-direction: column; padding-top: 20px; width: 100%; background: white; box-shadow: inset 0 3px 5px 0 rgba(0, 0, 0, 0.1); z-index: 999;} 
#menu-container .menu-list li a {display: block; padding: 24px 0; font-size: 1.8rem; font-weight: 700; text-align: center;}


.mob {height: 100%;} 
.mob .header-wrap>div {width: 100%;}
.mob .nav-btn.on {background: url(../images/main/);}
.mo-nav {position: fixed; top: 100px;}

/* ##### ENG ##### */

.eng .header-wrap .header-nav ul {justify-content: space-between; padding: 0 20px; gap: 40px;}

@media (min-width: 1281px) and (max-width: 1400px) {
   .eng .header-wrap .header-nav ul {padding: 0 20px; gap: 20px;}
}

@media (min-width: 1200px) and (max-width: 1280px) {
    .eng .header-wrap .header-nav ul {gap: 20px;}
}