@charset "utf-8";
/* layout.css는 전체적인 레이아웃 스타일을 정의합니다. */ 

.only-desktop {display:block !important;}
.only-tablet {display:none !important;}
.only-mobile {display:none !important;}
.only-desktop-tablet {display:block !important;}
.only-tablet-mobile {display:none !important;}

#wrapper {position:relative; width:100%;}

#skipToContent a {z-index:100000;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0;}
#skipToContent a:focus, 
#skipToContent a:active {width:200px;height:50px;background:#21272e;color:#fff;font-size:14px;font-weight:bold;text-align:center;text-decoration:none;line-height:50px;outline-color:#f37736;}

.contain {width:100%; max-width:1340px; margin:0 auto; padding-left:30px; padding-right:30px;}
.contain:after {content:" "; display:block; clear:both;}
.contain.wid2 {max-width:1620px;}
.contain.wid3 {max-width:1780px;}

#header.header_wrap {transition-duration:.5s; transition-property:top; transition-timing-function:cubic-bezier(.4,0,.2,1); position:absolute; width:100%; z-index:110; top:0; left:0; right:0; /* background-color:#fff; */ transition:all 0.2s ease-in-out;}
#header.header_wrap.hide {top:-10rem; transition-duration:.5s; transition-property:top; transition-timing-function:cubic-bezier(.4,0,.2,1);}
#header.header_wrap.up {position:fixed; transition:all 0.2s ease-in-out; transition-duration:.5s; transition-property:top; transition-timing-function:cubic-bezier(.4,0,.2,1);}

/* header */
#main #header {position:fixed; width:100%; z-index:102; top:0; left:0; right:0; transition:all 0.2s ease-in-out; background-color:unset;}
/* #header:after {position:absolute; content:''; bottom:0; left:0; right:0; height:1px; background-color:#ddd;} */
#header .contain {position:relative; max-width:1780px; display:flex; align-items:center;}
#header .sitelogo a {font-size:0; display:block; width:144px; height:30px; line-height:0; text-indent:-9999px; background-image:url('../images/common/logo.png'); background-repeat:no-repeat; background-size:contain;}
#header .inner {margin-top:30px;}

#header.fixed {background-color:rgba(255,255,255,.6); transition:all 0.2s ease-in-out;}
#header.fixed .sitelogo a {background-image:url('../images/common/logo-on.png');}
#header.fixed #gnb > ul > li > a {color:#242424;}

#header.header-active {/* background-color:rgba(255,255,255,.6); */ transition:all 0.2s ease-in-out;}
#header.header-active .sitelogo a {background-image:url('../images/common/logo-on.png');}
#header.header-active #gnb > ul > li:hover > a,
#header.header-active #gnb .submenu {background-color:#e5e5e5;}
#header.header-active #gnb > ul > li > a {color:#242424;}
#header.header-active #gnb .submenu ul li a {color:#454545;}
 
#gnb {position:relative; flex:1;}
#gnb > ul {display:flex; justify-content:center;}
#gnb > ul > li {min-width:170px; position:relative; z-index:1;}
#gnb > ul > li > a {font-size:19px; height:90px; border-top-left-radius:15px; border-top-right-radius:15px; transition:none; display:flex; justify-content:center; position:relative; align-items:center; font-weight:500; z-index:5; letter-spacing:-.03em; color:#fff;}
#gnb > ul > li:hover > a {background-color:rgba(255,255,255,.1);transition:none;}
#gnb > ul > li > a:after {position:absolute; content:''; left:50%; transform:translateX(-50%); bottom:25px; background-color:#6147c9; width:0; height:2px;}
#gnb > ul > li:hover > a:after {width:80px;}
#gnb > ul > li.m5 a {border-radius:15px;}

#gnb .submenu {width:170px; top:90px; display:none; border-bottom-left-radius:15px; border-bottom-right-radius:15px; position:absolute; left:50%; transform:translateX(-50%); background-color:rgba(255,255,255,.1); z-index:1;}
#gnb .submenu ul {padding:0 0 20px; text-align:center;}
#gnb .submenu ul li {margin-bottom:15px;}
#gnb .submenu ul li:last-child {margin-bottom:0;}
#gnb .submenu ul li a {line-height:1.35em; color:#fff;transition:none;}
#gnb .submenu ul li:hover a {text-decoration:underline; text-underline-offset:3px;}

.lets-product {font-size:18px; min-width:180px; padding:13px 0; display:flex; justify-content:center; overflow:hidden; position:relative; z-index:1; text-align:center; font-weight:500; color:#fff; letter-spacing:-.03em; line-height:1.3em; border-radius:30px;}
.lets-product {background:linear-gradient(-45deg, #ad8aff, #4d53fa, #9e00ec); transition:none !important; background-size:400% 400%; animation:colorChange 3s ease infinite;}
.openbox.active .lets-product,
.openbox:hover .lets-product {background:#282729; background-size:100% 100%;}
@keyframes colorChange{
    0% {background-position:0 50%;}
    50% {background-position:100% 50%;}
    100% {background-position:0 50%;}
}

.openbox {position:relative; color:#fff;}
.openbox ul {padding:25px 20px; display:none; position:absolute; left:0; width:100%; margin-top:10px; border-radius:10px; background-color:rgba(40,39,41,.5); z-index:110;}
.openbox ul li {margin-bottom:18px; line-height:1.6em; position:relative;}
.openbox ul li:hover:after {margin-top:3px; position:absolute; content:'↗'; color:#fff; right:0; top:50%; transform:translateY(-50%);}
.openbox ul li:last-child {margin-bottom:0;}
.openbox ul li a {display:block;}

/* for mobile */
.btn-m-menu {display:none;position:absolute;top:0;right:20px;width:34px;height:100%;text-align:center;text-indent:-9999em;z-index:50;}
.btn-m-menu span {position:absolute; right:0; top:50%; width:25px; height:3px; background:#242424; border-radius:2px;}
.btn-m-menu span:before,
.btn-m-menu span:after {content:" "; position:absolute; right:0; width:30px; height:3px; background:#242424; transition-duration:0.3s, 0.3s; transition-delay:0.3s, 0s; border-radius:2px;}
.btn-m-menu span:before {top:-8px; transition-property:top, transform;}
.btn-m-menu span:after {bottom:-8px; transition-property:bottom, transform;}

.mobile-navigation {position:fixed; top:80px; right:0; width:280px; height:100%; overflow:auto; transition:.3s ease-in-out; -ms-transform:translateX(100%); transform:translateX(100%); background:#fff; z-index:102;}
.mobile-navigation .nav-menu>ul>li {border-bottom:1px solid #dfdfdf;}
.mobile-navigation .nav-menu>ul>li>a {position:relative; padding:10px 18px; display:block; color:#333; font-size:17px; font-weight:500; line-height:1.3em;}
.mobile-navigation .nav-menu>ul>li>a:after {content:""; position:absolute; top:50%; right:15px; transform:translateY(-75%) rotate(45deg); width:10px; height:10px; border-right:2px solid #454545; border-bottom:2px solid #454545;}
.mobile-navigation .nav-menu>ul>li.active {background:#f4f4f4}
.mobile-navigation .nav-menu>ul>li.active>a {color:#fff; background:#bb88fe;}
.mobile-navigation .nav-menu>ul>li.active>a:after {transform:translateY(-35%) rotate(-135deg); border-color:#fff}
.mobile-navigation .nav-menu>ul>li.home>a {padding:19px 18px;}
.mobile-navigation .nav-menu>ul>li.home>a:after {display:none;}
.mobile-navigation .nav-menu .submenu {display:none; margin:-1px 0 0 0; padding:10px 0;}
.mobile-navigation .nav-menu .submenu>ul>li>a {display:block; padding:5px 18px; color:#454545; font-size:15px; font-weight:400; line-height:1.4em;}
.mobile-navigation .nav-menu .submenu>ul>li>a:hover {color:#bb88fe;}
.mobile-navigation .menu-close {position:absolute; top:15px; right:15px; width:30px; height:30px;overflow:hidden; text-indent:-999em;}
.mobile-navigation .menu-close:before, 
.mobile-navigation .menu-close:after {content:""; position:absolute; left:14px; height:30px; width:2px; background-color:#ddd;}
.mobile-navigation .menu-close:before {transform:rotate(45deg);}
.mobile-navigation .menu-close:after {transform:rotate(-45deg);}
.mobile-overlay {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:#000; opacity:0.6; z-index:101;}

html.menu-opened #header {background:#fff;}
html.menu-opened #header:after {content:""; position:absolute; bottom:0; left:0; width:100%; height:1px; background:#ddd; z-index:1;}
html.menu-opened .mobile-navigation {-ms-transform:translateX(0); transform:translateX(0);}
html.menu-opened .mobile-overlay {display:block;}
html.menu-opened .btn-m-menu span {background:none !important;}
html.menu-opened .btn-m-menu span:before,
html.menu-opened .btn-m-menu span:after {transition-delay:0s, 0.3s;}
html.menu-opened .btn-m-menu span:before {top:0; transform:rotate(45deg);}
html.menu-opened .btn-m-menu span:after {bottom:0; transform:rotate(-45deg);}

/* main */
.main-visual {position:relative; width:100%; height:100vh; background:#000; overflow:hidden;}
.main-visual video {position:absolute; top:0; left:0; width:100%; height:100vh; object-fit:cover;}
.main-visual iframe {position:absolute; top:50%; left:50%; width:100vw; height:100vh; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%);}
.main-visual .caption {position:absolute; top:50%; width:100%; color:#fff; -webkit-transform:translateY(-50%); transform:translateY(-50%);}
.main-visual .caption-container {display:flex; flex-direction:column; align-items:flex-start;}
.main-visual .contain {max-width:1780px;}

.main-visual .txt1 {margin-bottom:clamp(3.75rem, 2.5962rem + 5.1282vw, 8.75rem); font-family:"Abril Fatface", serif; font-size:clamp(2.25rem, 1.3269rem + 4.1026vw, 6.25rem);/* 100 - 36 */ line-height:1.18em; letter-spacing:-.01em;}
.main-visual .txt1 span {display:inline-block; vertical-align:top; position:relative; overflow:hidden;}
.main-visual .txt1 span:before{content:''; position:absolute; top:0; right:0; width:100%; height:100%; animation:a-ltr-before 1.5s cubic-bezier(.77,0,.18,1) forwards; -webkit-transform:translateX(0); transform:translateX(0);}
.main-visual .txt1 span:after{content:''; position:absolute; top:0; right:0; width:100%; height:100%; background:#fff; animation:a-ltr-after 1s cubic-bezier(.77,0,.18,1) forwards; -webkit-transform:translateX(-101%); transform:translateX(-101%);}
.main-visual .txt1 span:nth-of-type(1)::before, 
.main-visual .txt1 span:nth-of-type(1)::after{animation-delay:.5s;}
.main-visual .txt1 span:nth-of-type(2)::before, 
.main-visual .txt1 span:nth-of-type(2)::after{animation-delay:.7s;}
.main-visual .txt2, 
.main-visual .txt3 {display:inline-block; white-space:nowrap; overflow:hidden; line-height:1.18em; letter-spacing:-.03em;}
.main-visual .txt2 {min-height:1.3em; margin-bottom:.3em; font-size:clamp(1.25rem, 0.7596rem + 2.1795vw, 3.375rem);/* 54 - 20 */ font-weight:700;}
.main-visual .txt3 {min-height:2.6em; font-size:clamp(1.125rem, 0.7356rem + 1.7308vw, 2.8125rem);/* 45 - 18 */}
.main-visual .txt3 .blink-caret {height:.8em;}
.main-visual .blink-caret {display:none; height:.8em; margin-left:.1em; border-left:.1em solid #fff; animation:blink-caret .75s infinite; vertical-align:middle;}

@keyframes a-ltr-after{0%{transform:translateX(100%)}100% {transform:translateX(-101%)}}
@keyframes a-ltr-before{0%{transform:translateX(0)}100% {transform:translateX(-200%)}}

@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}

@keyframes typing2 {
    from { width: 0 }
    to { width: 100% }
}

@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: #fff; }
}

@media (min-aspect-ratio:16/9) {
	.main-visual iframe {height:56.25vw;}
}
@media (max-aspect-ratio:16/9) {
	.main-visual iframe {width:177.78vh;}
}

@media (max-width:640px) {
	.main-visual .caption {-webkit-transform:translateY(-48%); transform:translateY(-48%);}
}

/* sub page */
#contArea {width:100%; max-width:1340px; margin:0 auto; padding:0 30px;}
#contArea.wide {max-width:none; padding:0;}

.sub-title {padding-bottom:65px; text-align:center;}
.sub-title h1 {font-size:64px; color:#242424; line-height:1.2em; letter-spacing:-.03em; font-weight:600;}

.lnb {margin-bottom:115px;}
.lnb ul {display:table; table-layout:fixed; width:100%; z-index:2;}
.lnb ul li {position:relative; display:table-cell; vertical-align:middle; max-width:50%; width:auto !important;}
.lnb ul li a {font-size:18px; height:70px; border-radius:10px; background-color:#f8f8f8; letter-spacing:-.03em; display:flex; align-items:center; justify-content:center; text-align:center; position:relative;}
.lnb ul li.active a {background-color:#282729; color:#fff;}

.real-cont {padding:200px 0 150px;}

/*top button*/
.top_wrap {position:relative;}
#top_btn {position:fixed; bottom:-40px; right:3vw; width:40px; height:40px; text-align:center; transition:all .3s; opacity:0; visibility:hidden; z-index:20; mix-blend-mode:difference;}
/* #top_btn.on {visibility:visible; opacity:1; bottom:36px;}
#top_btn.stop {position:absolute;}
#top_btn::after {content:''; display:block; position:absolute; top:11px; left:19px; width:2px; height:18px; background:#242424;}
#top_btn i {position:absolute; top:12px; left:14px; display:inline-block; border:solid #242424; border-width:0 2px 2px 0; padding:5px; transform:rotate(-135deg);}
#top_btn.on:after {background-color:#fff;}
#top_btn.on i {border-color:#fff;}
 */


/* body.cursor * {cursor:inherit !important;}
body.cursor a, body.cursor button, body.cursor .hover {cursor:pointer !important;}
body.cursor #g_cursor {display:none !important;}
body.cursor #g_cursor.drag {display:block !important;}
body.cursor #g_cursor.slide {display:block !important;} */


/* footer */
#footer {font-size:14px; letter-spacing:-.03em; color:#909090; text-align:center;}
#footer address {font-style:normal; line-height:1.71em;}

#main #footer {position:absolute; bottom:35px; left:50%; transform:translateX(-50%);}
#sub #footer {padding:55px 0; border-top:1px solid #ddd;}

/* quick */
#main .quick {display:none !important;}
.quick {position:fixed; bottom:30px; right:40px; z-index:90;}
.quick .goto {display:block; position:relative; width:80px; height:80px; border-radius:100%; background-size:contain; background-image:url("../images/common/gotop.png"); background-position:50% 50% ; background-repeat:no-repeat; transform:translateX(200%);}
.quick.active .goto {transform:translateX(0);}


.f-desktop {display:block;}
.f-tablet {display:none;}
.f-mobile {display:none;}