:root{
	--vh:1vh;
}
main{overflow: hidden;}
.wrap{ width: 95%; margin: 0 auto; }
.wrap[max="1800"]{ max-width: 1800px; }
.wrap[max="1720"]{ max-width: 1720px; }
.wrap[max="1600"]{ max-width: 1600px; }

@media screen and (max-width: 820px){
    .wrap{ width: 90%; }
}

/* topbtn */
.totop{ width: 85px; height: 85px; border-radius: 50%; background-color: #000; color: #fff; text-align: center; position: fixed; bottom: 30px; right: 2.5%; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 99; cursor: pointer; overflow: hidden; transition: opacity 0.4s;}
.totop.hide{opacity: 0; pointer-events: none;}
.totop span{ font-size: 20px; font-weight: 700; letter-spacing: -0.025em;  }

@media screen and (max-width: 1280px){
    .totop{ width: 70px; height: 70px; }
    .totop span{ font-size: 16px; }
}

@media screen and (max-width: 820px){
    .totop{ width: 60px; height: 60px; right: 5%; }
    .totop img{ width: 28px; }
    .totop span{ font-size: 14px; }
}

@media screen and (max-width: 500px){
    .totop{ width: 50px; height: 50px; }
    .totop img{ width: 25px; }
    .totop span{ font-size: 12px; }
}



/* intro */
._intro{ width: 100%; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; overflow: hidden; display: flex; align-items: center; justify-content: center; background-color: #000000; z-index: 9999; transition-duration: 0.8s; }
._intro .logo{ overflow: hidden; width: 55%; max-width: 474px; }
._intro .logo svg{ width: 100%; }
._intro .logo svg * { will-change: transform; transform-box: fill-box; }

._intro.hide{ transform: translateY(-100%); opacity: 0; pointer-events: none; }


._gate{ width: 100%; height: 100vh; box-sizing: border-box; position: relative; overflow: hidden; transition-duration: 0.6s; }
._gate ._inn{ width: 100%; height: 100%; position: relative;  display: flex; align-items: center; justify-content: center; flex-direction: column; }
._gate .bg{ width: calc(768 / 1920 * 100%); height: calc(390 / 960 * 100%); }
._gate .bg img{ width: 100%; height: 100%; object-fit: cover; }
._gate .title{ font-size: 40px; font-weight: 800; letter-spacing: -0.025em; position: absolute; top: 50%; transform: translateY(-50%); }
._gate .title strong{ display: block; }
._gate .title._1{ left: calc(433 / 1920 * 100%); }
._gate .title._2{ right: calc(415 / 1920 * 100%); }

._gate .center{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
._gate .gatebtn{ width: 170px; display: flex; gap: 10px; justify-content: center; }
._gate .gatebtn > a{ display: block; width: 50%; padding: 8px 0; text-align: center; font-size: 20px; font-weight: 700; letter-spacing: -0.025em; color: #000; z-index: 5; }
._gate .gatebtn > a span{ transition-duration: 0.4s; }
._gate .gatebtn > span{ display: block; width: 80px; height: 37px; border-radius: 5px; background-color: #000; position: absolute; left: 0; top: 0; z-index: 0; transition-duration: 0.6s; opacity: 0; }
._gate .gatebtn > span.on{ opacity: 1; }

._gate .gatebtn > a.on span{ color: #fff; }

@media screen and (max-width: 1280px){
    ._gate .title{ font-size: 30px; }
    ._gate .title._1{ left: 16%; }
    ._gate .title._2{ right: 16%; }

    ._gate .gatebtn{ width: 120px; }
    ._gate .gatebtn > a{ font-size: 16px; }
    ._gate .gatebtn > span{ height: 32px; width: 54px; }
}

@media screen and (max-width: 820px){
    ._gate .title{ font-size: 6vw; }
    ._gate .title._1{ left: 50%; transform: translate(-50%, -50%); top: 30%; }
    ._gate .title._2{ left: 50%; transform: translate(-50%, 50%); right: auto; top: auto; bottom: 30%; }

    ._gate .gatebtn{ width: 120px; }
    ._gate .gatebtn > a{ font-size: 16px; }
    ._gate .gatebtn > span{ height: 32px; width: 54px; }
}



/* header */
.header{ width: 100%; position: fixed; top: 0; left: 0; z-index: 990; opacity: 0; transition-duration: 0.6s; transform: translateY(-100%); }
body.on .header{ opacity: 1; transform: translateY(0); }
.header .wrap{ display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 99;}
.header .logo > a{ display: block; padding: 33px 0;}
.header .logo svg{width: 173px;}
.header .logo svg .st0{transition: fill 0.4s;}
.header.menuOn .logo svg .st0{fill: #fff;}

.header nav{ display: flex; align-items: center; padding: 5px 0; }
.header nav .menuWrap{ position: relative; background-color: #000; color: #fff; border-radius: 5px; overflow: hidden; padding: 2px; }
.header nav .mainmenu{ box-sizing: border-box; display: flex; z-index: 1; position: relative; }
.header nav .mainmenu li > a{ display: flex; padding: 10px 16px; font-size: 14px; font-weight: 400; border-radius: 5px; position: relative; text-transform: uppercase; transition-duration: 0.4s; color: #fff; height: 100%; align-items: center; justify-content: center; box-sizing: border-box; text-align: center; }
.header nav .menuWrap > span{ display: block; width: 133px; height: 35px; background-color: #fff; z-index: 0; position: absolute; left: 2px; top: 2px; border-radius: 5px; box-sizing: border-box;  transition-duration: 0.6s; opacity: 0; }

.header .btnWrap{ display: flex; align-items: center; margin-left: 5px; }
.header .btnWrap > div{ position: relative; }
.header .btnWrap > div > a{ display: block; padding: 10px 0; padding-left: 22px; font-size: 20px; font-weight: 700; letter-spacing: -0.025em; }


.header .btnWrap .lang{display: flex; gap: 10px; margin-left: 14px;}
.header .btnWrap .lang a{padding: 0; font-weight: 500; color: #ccc; transition: color 0.4s;}
.header .btnWrap .lang a.on{color: #000;}
html.pc .header .btnWrap .lang a:hover{color: #000;}

/* .header .btnWrap .lang .drop{ position: absolute; top: 100%; left: 50%; transform: translate(-50%, -40%); opacity: 0; pointer-events: none; transition-duration: 0.4s; }
.header .btnWrap .lang .drop li > a{ display: block; padding-left: 22px; font-size: 20px; font-weight: 700; letter-spacing: -0.025em; } */

.header .hamWrap{ width: 23px; display: flex; align-items: center; justify-content: center; cursor: pointer; display: none; }
.header .hamWrap .hambtn{ width: 100%; height: 9px;  margin-top: -5px; position: relative; }
.header .hamWrap .hambtn span{ width: 100%; height: 2px; background-color: #000; position: absolute; left: 0; transform-origin: 50% 50%; display: block; transition: background-color 0.4s,transform 0.4s,top 0.4s;}
.header .hamWrap .hambtn span:nth-of-type(1){ top: 0; }
.header .hamWrap .hambtn span:nth-of-type(2){ top: 100%; }

.header.menuOn .hamWrap .hambtn span{background-color: #fff;}
.header.menuOn .hamWrap .hambtn span:nth-of-type(1){transform: rotate(45deg); top: 50%;}
.header.menuOn .hamWrap .hambtn span:nth-of-type(2){transform: rotate(-45deg); top: 50%;}

.header.bg{ background-color: rgba(255,255,255,0.8); box-shadow: 5px 5px 5px rgba(0,0,0,0.03); }

body.on .header.hide{ transform: translateY(-100%); }


@media screen and (min-width: 821px){
    .header nav .menuWrap:hover > span{ opacity: 1; }
    .header nav .mainmenu li > a:hover{ color: #000; }
    .header .btnWrap .lang:hover .drop{ opacity: 1; transform: translate(-50%, 0); pointer-events: unset; }
}


@media screen and (max-width: 1280px){
    .header .logo > a{ padding: 25px 0; }
    .header .logo svg{ width: 140px; }
    .header nav .mainmenu li > a{ padding: 10px 14px; }
    .header .btnWrap > div > a{ font-size: 16px; padding: 10px 0; padding-left: 15px; }
    .header .btnWrap .lang .drop li > a{ font-size: 16px; padding: 10px 0; padding-left: 15px; }
}

@media screen and (max-width: 1024px){
    .header .logo > a{ padding: 15px 0; }
    .header .logo svg{ width: 110px; }
    .header .btnWrap{ margin-left: 0; }
    .header .btnWrap > div > a{ font-size: 13px; padding: 10px 0; padding-left: 10px; }
    .header .btnWrap .lang .drop li > a{ font-size: 14px; padding: 10px 0; padding-left: 10px; }
    .header nav .mainmenu li > a{ font-size: 13px; padding: 10px 5px; }
}

@media screen and (max-width: 820px){
    .header nav{ display: none; }
    .header .hamWrap{ display: flex; }

    .header .logo > a{ padding: 13px 0; }
}



/* 모바일 메뉴 */
header ._moMenu{
	opacity: 0; pointer-events: none;
	z-index: 10;
	box-sizing: border-box;
	width: 100vw; height: calc(var(--vh,1vh) * 100);
	background-color: rgba(0,0,0,0.8); color: #fff;
	position: absolute; left: 0; top: 0;
	transition: opacity 0.4s;
    display: flex; align-items: center; justify-content: center;
}
header.menuOn ._moMenu{
	pointer-events: auto; opacity: 1;
}
header ._moMenu .wrap{
    max-height: calc(100% - 120px);
    display: flex; flex-direction: column; align-items: center;
    overflow: auto;
}

header ._moMenu ul{font-weight: 700; font-size: 36px; line-height: 1.4; margin-bottom: calc(80/36*1em);}
header ._moMenu ul li{text-align: center; margin-bottom: 0.2em;}
header ._moMenu ul li:last-child{margin-bottom: 0;}
header ._moMenu ul li a{}

header ._moMenu .bottom{
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
    font-size: 22px; flex-wrap: wrap;
}
header ._moMenu .bottom .lang{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8em;
    border: 1px solid #fff;
    box-sizing: border-box;
    border-radius: 100px;
    padding: calc(6/24*1em) 1em;
}
header ._moMenu .bottom .lang a{opacity: 0.5;}
header ._moMenu .bottom .lang a.on{opacity: 1;}
header ._moMenu .bottom .login{}
header ._moMenu .bottom .sns{font-size: 1.3em;}
header ._moMenu .bottom .sns a{}

@media screen and (max-width:1600px) {}
@media screen and (max-width:1440px) {}
@media screen and (max-width:1280px) {}
@media screen and (max-width:1024px) {}
@media screen and (max-width:820px) {}
@media screen and (max-width:500px) {
    header ._moMenu ul{font-size: max(calc(36/500*100vw),26px);}
    header ._moMenu .bottom{font-size: max(calc(20/500*100vw),18px);}
}
@media screen and (max-width:320px) {}






/* footer */
.footer{ width: 100%; position: relative; overflow: hidden; background-image: url(/asset/img/common/footer_bg.jpg); background-size: cover; background-position: center; background-repeat: no-repeat; background-color: #000; color: #fff; padding: 85px 0; word-break: keep-all; }
.footer .footmenu{display: flex; justify-content: space-between; align-items: center;}
.footer .footmenu > ul{ display: flex;}
.footer .footmenu > ul li > a{ display: block; padding: 10px 24px; font-size: 20px; font-weight: 300; color: #b3b3b3; text-transform: uppercase; transition-duration: 0.2s; }
html.pc .footer .footmenu > ul li > a:hover{color: #fff;}
.footer .footmenu > ul li:first-of-type > a{ padding-left: 0; }
.footer .sns{
	font-size: 30px;
	padding-top: 20px; margin-top: 30px; border-top: 1px solid rgba(255,255,255,0.1);
	display: flex; align-items: center; justify-content: flex-end; gap: 10px;
}
.footer .sns a{}
.footer .sns .kakao{font-size: 1.1em;}
.footer .sns .youtube{font-size: 1.15em;}
.footer .sns a i{}

.footer .flexbx{ margin-top: 65px; display: flex; justify-content: space-between; }

.footer .flexbx .footlogo{ flex-shrink: 0; }
.footer .flexbx .infobx{ display: flex; gap: 120px; justify-content: flex-end; width: 100%; }
.footer .flexbx .infobx > div{
	display: flex; flex-direction: column; gap: 10px;
}
.footer .flexbx .infobx .bx{
	display: flex; align-items: flex-start; gap: 20px; line-height: 1.4;
	font-size: 18px;
}
.footer .flexbx .infobx .bx strong{ display: block; font-weight: 500; white-space: nowrap;}
.footer .flexbx .infobx .bx p{ letter-spacing: -0.025em; font-family: 'Pretendard'; color: #a8a8a8;}

.footer .directbx{ margin-top: 110px; display: flex; justify-content: flex-end; }

.footer .directbx > a{ display: flex; align-items: center; justify-content: flex-end; }
.footer .directbx > a b{ display: block; font-size: 7.8125vw; font-weight: 700; margin-right: 23px; background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.8) 0%); -webkit-background-clip: text !important; -webkit-text-fill-color: transparent; }
.footer .directbx > a i{ display: block; padding-top: 0.2em; box-sizing: border-box; }


@media screen and (max-width: 1440px){
    .footer .flexbx .footlogo{ width: 150px; }
    .footer .directbx{ margin-top: 80px; }
    .footer .directbx > a b{ font-size: 10.8125vw; }
}

@media screen and (max-width: 1280px){
    .footer{ padding: 60px 0; }
    .footer .footmenu > ul li > a{ font-size: 14px; padding: 10px 15px; }
    .footer .flexbx{ margin-top: 30px; flex-direction: column; gap: 60px;}
    .footer .flexbx .footlogo{ width: 120px; }
	.footer .flexbx .infobx{justify-content: flex-start;}
    .footer .directbx{ margin-top: 40px; }
}

@media screen and (max-width: 1024px){
	.footer .flexbx .infobx{flex-direction: column; gap: 20px;}
	.footer .flexbx .infobx > div{gap: 20px;}
}

@media screen and (max-width: 820px){
    .footer{ padding: 40px 0; }
    .footer .footmenu{ display: none; }
    .footer .flexbx{ margin-top: 20px; }
    .footer .flexbx .footlogo{ width: 90px; }

	.footer .flexbx .infobx{gap: 10px;}
	.footer .flexbx .infobx > div{gap: 10px;}
	.footer .flexbx .infobx .bx{font-size: 16px;}

    .footer .directbx > a i{ width: 7%; }
    .footer .directbx > a b{ background: linear-gradient(90deg, rgba(255,255,255,1) 100%, rgba(255,255,255,0.8) 100%); }
}

@media screen and (max-width: 500px){
    .footer .flexbx{ gap: 40px;}
    .footer .flexbx .footlogo{ width: 70px; }
    .footer .flexbx .infobx{ flex-direction: column; margin-top: 20px; }
	.footer .flexbx .infobx .bx{font-size: 14px; flex-direction: column; gap: 4px;}

	.footer .sns{font-size: 23px;}
}










/* max-width */
@media screen and (max-width:1600px) {
	.max-1600{display: block;}
	.min-1601{display: none;}
	.max-1600-none{display: none;}
}
@media screen and (max-width:1440px) {
	.max-1440{display: block;}
	.min-1441{display: none;}
	.max-1440-none{display: none;}
}
@media screen and (max-width:1280px) {
	.max-1280{display: block;}
	.min-1281{display: none;}
	.max-1280-none{display: none;}
}
@media screen and (max-width:1024px) {
	.max-1024{display: block;}
	.min-1025{display: none;}
	.max-1024-none{display: none;}
}
@media screen and (max-width:820px) {
	.max-820{display: block;}
	.min-821{display: none;}
	.max-820-none{display: none;}
}
@media screen and (max-width:500px) {
	.max-500{display: block;}
	.min-501{display: none;}
	.max-500-none{display: none;}
}
@media screen and (max-width:320px) {
	.max-320{display: block;}
	.min-321{display: none;}
	.max-320-none{display: none;}
}


/* min-width */
@media screen and (min-width:1601px) {
	.min-1601{display: block;}
	.max-1600{display: none;}
	.min-1601-none{display: none;}
}
@media screen and (min-width:1441px) {
	.min-1441{display: block;}
	.max-1440{display: none;}
	.min-1441-none{display: none;}
}
@media screen and (min-width:1281px) {
	.min-1281{display: block;}
	.max-1280{display: none;}
	.min-1281-none{display: none;}
}
@media screen and (min-width:1025px) {
	.min-1025{display: block;}
	.max-1024{display: none;}
	.min-1025-none{display: none;}
}
@media screen and (min-width:821px) {
	.min-821{display: block;}
	.max-820{display: none;}
	.min-821-none{display: none;}
}
@media screen and (min-width:501px) {
	.min-501{display: block;}
	.max-500{display: none;}
	.min-501-none{display: none;}
}
@media screen and (min-width:321px) {
	.min-321{display: block;}
	.max-320{display: none;}
	.min-321-none{display: none;}
}