/**
 * STYLE
 */

@font-face {
	font-family: 'ClashDisplay';
	src: url('../fonts/ClashDisplay-Regular.woff2') format('woff2'),
		url('../fonts/ClashDisplay-Regular.woff') format('woff'),
		url('../fonts/ClashDisplay-Regular.ttf') format('truetype');
	font-weight: 400;
	font-display: swap;
	font-style: normal;
}
@font-face {
	font-family: 'ClashDisplay';
	src: url('../fonts/ClashDisplay-Medium.woff2') format('woff2'),
		url('../fonts/ClashDisplay-Medium.woff') format('woff'),
		url('../fonts/ClashDisplay-Medium.ttf') format('truetype');
	font-weight: 500;
	font-display: swap;
	font-style: normal;
}
@font-face {
	font-family: 'SUIT';
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/SUIT-Regular.woff2') format('woff2'),
		url('../fonts/SUIT-Regular.ttf') format('truetype');
}
@font-face {
	font-family: 'SUIT';
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/SUIT-Medium.woff2') format('woff2'),
		url('../fonts/SUIT-Medium.ttf') format('truetype');
}
@font-face {
	font-family: 'HYUNDAICARD';
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/hyundaicard.woff') format('woff'),
		url('../fonts/hyundaicard.eot') format('eot'),
		url('../fonts/hyundaicard.ttf') format('truetype');
}

:root {
	--safe-top: 40px;
}

html, body {margin: 0;padding: 0;width: 100%;height: 100%;background-color: #fff;font-family: 'SUIT', Dotum, '돋움', sans-serif;}
body {overflow: hidden;}
p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,img,span{margin: 0;padding: 0;}
h1,h2,h3,h4,h5,h6 {font-size: 0;}
ul, ol, li {list-style: none;}
img, fieldset, iframe {border: 0 none;vertical-align: top;}
table{border-collapse: collapse;}
a:link,a:active, a:visited {color: #999191;text-decoration: none;cursor: pointer;}
a:hover {color: #707070;text-decoration: underline;cursor: pointer;}
caption, legend {display: none;}
em,address{font-style: normal;}
*, *::after, *::before {box-sizing: border-box;}
.hide {position: absolute;top: -9999em;left: -9999em;font-size: 0;}

body.frame .guide {padding-top: var(--safe-top);}
body.frame .intro {padding-top: var(--safe-top);}
body.frame .container {padding-top: var(--safe-top);}
body.frame .nav-category {padding-top: var(--safe-top);}
body.frame .nav-category .btn-close {top: var(--safe-top);}
body.frame .pairing-area {top: -140px;}
body.frame .pairing-area.active {height: calc(100% + var(--safe-top));}
body.frame .sec-slide.full .pairing-area {top: -40px;}
body.frame .pairing-area > strong {margin-top: var(--safe-top);}
body.frame .pairing-area::after {margin-top: var(--safe-top);}

#wrap {position: relative;width: 100%;height: 100%;}

.guide {position: fixed;top: -100%;left: 0;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;background-color: rgba(0, 0, 0, .6);z-index: 40;opacity: 0;transition: all .4s ease-in-out;}
.guide p {line-height: 40px;font-size: 30px;color: #fff;text-align: center;}
.guide.active {top: 0;opacity: 1;}

.intro {position: fixed;top: 0;left: 0;width: 100%;height: 100%;display: grid;place-items: center;color: #fff;font-family: 'HYUNDAICARD';font-size: 150px;overflow: hidden;z-index: 30;opacity: 0;transition: transform 1s ease-in-out .2s, opacity .4s ease-in-out .4s, visibility 0s ease-in-out 1s;}
.intro .intro-txt {position: absolute;top: 38%;min-width: 100%;white-space: nowrap;animation: introani 5s infinite linear;}
@keyframes introani {
	from {translate: 70%;}
	to {translate: -70%;}
}
.intro .intro-blur {position: absolute;inset: -20px;display: grid;place-items: center;background-color: black;background-image: linear-gradient(to right, white, 1rem, transparent 50%), linear-gradient(to left, white, 1rem, transparent 50%);filter: contrast(15);}
.intro .intro-blur p {filter: blur(0.07em);}
.intro .intro-clear {position: absolute;inset: 0;display: grid;place-items: center;}
.intro .intro-bg {position: absolute;top: 40%;left: -30%;width: 20%;height: 10%;background-color: #fff;border-radius: 100%;filter: blur(0.07em);}
.intro.remove {left: 0;opacity: 0;visibility: hidden;transform: scale(50);}
.intro.active {opacity: 1;}
.intro.notused {left: -100%;opacity: 0;visibility: hidden;transition: all 0s ease-in-out 0s;}

.container {position: relative;width: 100%;height: 100%;-webkit-user-select: none;user-select: none;z-index: 20;}
.container img {max-width: 100%;}

.nav-category {position: fixed;top: 0;left: 100%;display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;background: rgba(255, 255, 255, 0.90);backdrop-filter: blur(6px);z-index: 5;transition: left .6s ease-in-out;overflow: hidden;}
.nav-category .btn-close {position: absolute;top: 0;right: 0;padding: 30px 8px;color: #A8A8A8;font-size: 13px;font-weight: 500;line-height: normal;background-color: transparent;border: 0;transform: rotate(90deg);cursor: pointer;}
.nav-category ul {padding: 0 20px;width: 100%;}
.nav-category li {padding: 28px 0;display: flex;justify-content: flex-start;transform: translateX(-100%);transition: all .6s ease-in-out .4s;opacity: 0;}
.nav-category li span {display: inline-block;height: 62px;background: url('../images/txt_metime.webp') 0 0 no-repeat;background-size: auto 100%;text-indent: -9999em;text-align: left;}
.nav-category li:nth-of-type(1) span {width: 202px;cursor: pointer;}
.nav-category li:nth-of-type(2) span {width: 244px;background-image: url('../images/txt_sensuous.webp');}
.nav-category li:nth-of-type(3) span {width: 212px;background-image: url('../images/txt_wellness.webp');}
.nav-category li:nth-of-type(4) span {width: 211px;background-image: url('../images/txt_camper.webp');}
.nav-category li:nth-of-type(5) span {width: 167px;background-image: url('../images/txt_classic.webp');}
.nav-category li:nth-of-type(2) span,
.nav-category li:nth-of-type(4) span {order: 1;}
.nav-category li:nth-of-type(1) {cursor: pointer;}
.nav-category li:nth-of-type(2) {transition-delay: .5s;cursor: pointer;justify-content: flex-end;transform: translateX(100%);}
.nav-category li:nth-of-type(3) {transition-delay: .6s;}
.nav-category li:nth-of-type(4) {transition-delay: .7s;justify-content: flex-end;transform: translateX(100%);}
.nav-category li:nth-of-type(5) {transition-delay: .8s;}
.nav-category li em {margin-top: 10px;color: #333;font-family: 'ClashDisplay';font-size: 14px;font-weight: 400;line-height: normal;}
.nav-category.active {left: 0;}
.nav-category.active li {transform: translateX(0);opacity: 1;}

.cate-area {position: fixed;left: 0;bottom: 72px;width: 100%;z-index: 2;opacity: 0;transition: opacity .4s ease-in-out;}
.cate-area li {display: none;cursor: pointer;}
.cate-area li em {display: inline-flex;margin-top: 15px;font-family: 'ClashDisplay';color: #333;font-size: 16px;font-weight: 400;animation: cateani0 1s both ease-in-out .8s;}
.cate-area li span {display: inline-flex;height: 73px;text-indent: -9999em;opacity: 0;animation: cateani1 1s both ease-in-out;}
.cate-area li:nth-of-type(1) span {background: url('../images/txt_metime.webp') 0 0 no-repeat;background-size: auto 73px;}
.cate-area li:nth-of-type(1) span:nth-of-type(1) {width: 57px;background-position: 0 0;}
.cate-area li:nth-of-type(1) span:nth-of-type(2) {width: 41px;background-position: -57px 0;animation-name: cateani2;}
.cate-area li:nth-of-type(1) span:nth-of-type(3) {width: 21px;background-position: -109px 0;margin-left: 11px;animation-name: cateani3;}
.cate-area li:nth-of-type(1) span:nth-of-type(4) {width: 8px;background-position: -130px 0;animation-name: cateani4;}
.cate-area li:nth-of-type(1) span:nth-of-type(5) {width: 57px;background-position: -138px 0;animation-name: cateani5;}
.cate-area li:nth-of-type(1) span:nth-of-type(6) {width: 41px;background-position: -195px 0;animation-name: cateani6;}
.cate-area li:nth-of-type(2) span {background: url('../images/txt_sensuous.webp') 0 0 no-repeat;background-size: auto 73px;}
.cate-area li:nth-of-type(2) span:nth-of-type(1) {width: 28px;background-position: 0 0;}
.cate-area li:nth-of-type(2) span:nth-of-type(2) {width: 39px;background-position: -28px 0;animation-name: cateani2;}
.cate-area li:nth-of-type(2) span:nth-of-type(3) {width: 39px;background-position: -67px 0;animation-name: cateani3;}
.cate-area li:nth-of-type(2) span:nth-of-type(4) {width: 28px;background-position: -106px 0;animation-name: cateani4;}
.cate-area li:nth-of-type(2) span:nth-of-type(5) {width: 40px;background-position: -135px 0;animation-name: cateani2;}
.cate-area li:nth-of-type(2) span:nth-of-type(6) {width: 40px;background-position: -175px 0;animation-name: cateani4;}
.cate-area li:nth-of-type(2) span:nth-of-type(7) {width: 39px;background-position: -215px 0;animation-name: cateani5;}
.cate-area li:nth-of-type(2) span:nth-of-type(8) {width: 30px;background-position: -254px 0;animation-name: cateani6;}
@keyframes cateani0 {0% {opacity: 0;}}
@keyframes cateani1 {0% {transform:translate3d(-10rem, 5rem, 0) rotate(-45deg) skewX(70deg) scale(2);opacity: 0;}}
@keyframes cateani2 {0% {transform:translate3d(-5rem, 7rem, 0) rotate(-180deg) skewX(70deg) scale(2);opacity: 0;}}
@keyframes cateani3 {0% {transform:translate3d(0rem, 12rem, 0) rotate(45deg) skewX(70deg) scale(2);opacity: 0;}}
@keyframes cateani4 {0% {transform:translate3d(5rem, 8rem, 0) rotate(45deg) skewX(70deg) scale(2);opacity: 0;}}
@keyframes cateani5 {0% {transform:translate3d(10rem, 12rem, 0) rotate(90deg) skewX(70deg) scale(2);opacity: 0;}}
@keyframes cateani6 {0% {transform:translate3d(12rem, 10rem, 0) rotate(270deg) skewX(70deg) scale(2);opacity: 0;}}
.cate-area.load {opacity: 1;}
.cate-area li.active {display: flex;justify-content: center;}
.cate-area li.active span {opacity: 1;}
.cate-area li.active em {opacity: 1;}

.btn-area {position: fixed;left: 0;bottom: 30px;width: 100%;display: flex;justify-content: center;gap: 6px;opacity: 0;transition: opacity .4s ease-in-out .8s;z-index: 3;}
.btn-area.load {opacity: 1;}
.btn-area button {position: relative;width: 44px;height: 44px;background-color: transparent;border: none;cursor: pointer;-webkit-tap-highlight-color: transparent;}
.btn-area button i {position: absolute;top: 0;left: 0;width: 18px;height: 100%;background-color: rgba(204, 204, 204, 1);}
.btn-area button.active i {background-color: rgba(51, 51, 51, 1);}
.btn-area .btn-grid i {width: 5px;height: 5px;}
.btn-area .btn-grid i:nth-of-type(1) {top: 13px;left: 13px;}
.btn-area .btn-grid i:nth-of-type(2) {top: 13px;left: 19.5px;}
.btn-area .btn-grid i:nth-of-type(3) {top: 13px;left: 27px;}
.btn-area .btn-grid i:nth-of-type(4) {top: 19.5px;left: 13px;}
.btn-area .btn-grid i:nth-of-type(5) {top: 19.5px;left: 19.5px;}
.btn-area .btn-grid i:nth-of-type(6) {top: 19.5px;left: 27px;}
.btn-area .btn-grid i:nth-of-type(7) {top: 27px;left: 13px;}
.btn-area .btn-grid i:nth-of-type(8) {top: 27px;left: 19.5px;}
.btn-area .btn-grid i:nth-of-type(9) {top: 27px;left: 27px;}
.btn-area .btn-full i:nth-of-type(1) {height: 11px;top: 13px;left: 13px;}
.btn-area .btn-full i:nth-of-type(2) {height: 2px;top: 25.5px;left: 13px;}
.btn-area .btn-full i:nth-of-type(3) {height: 2px;top: 30px;left: 13px;}

.sec-slide {position: relative;width: 100%;height: 100%;}

.pairing-area {position: absolute;top: -100px;left: 0;padding: 16px 0;width: 100%;height: 56px;-webkit-tap-highlight-color: transparent;background-color: rgba(0, 0, 0, 0);opacity: 0;transition: opacity .2s ease-in-out .6s, background-color .4s ease-in-out,height .6s ease-in-out;z-index: 4;}
.pairing-area::after {content: '';position: absolute;top: 16px;right: 20px;width: 24px;height: 24px;background: url('../images/ico_pairing.svg') 0 0 no-repeat;background-size: 100%;cursor: pointer;}
.pairing-area > strong {display: inline-block;margin-left: 20px;width: 47px;height: 14px;background: url('../images/txt_pairing.svg') 0 0 no-repeat;background-size: 100%;text-indent: -9999em;text-align: left;cursor: pointer;}
.pairing-area .pairingswiper {position: absolute;top: -50%;left: 0;width: 100%;height: 100%;opacity: 0;visibility: hidden;transition: all .6s ease-in-out;}
.pairing-area .pairingswiper .swiper-slide {display: flex;flex-direction: column;justify-content: center;align-items: center;padding-bottom: 95px;}
.pairing-area .pairingswiper .swiper-slide .pic[data-idx='1'],
.pairing-area .pairingswiper .swiper-slide .pic[data-idx='2'] {cursor: pointer;}
.pairing-area .pairingswiper .pic {width: 280px;}
.pairing-area .pairingswiper .info {margin-top: 20px;text-align: center;}
.pairing-area .pairingswiper .info strong {color: #A8A8A8;text-align: center;font-size: 13px;font-weight: 400;line-height: normal;letter-spacing: -0.26px;text-transform: uppercase;}
.pairing-area .pairingswiper .info p {margin-top: 4px;color: #FFF;text-align: center;font-size: 16px;font-weight: 400;line-height: 22px;letter-spacing: -0.32px;}
.pairing-area .pairingswiper .swiper-pagination {bottom: 0;padding: 40px 10px;}
.pairing-area .pairingswiper .swiper-pagination-bullet {margin: 0 10px;width: calc(20% - 20px);height: 1px;background: rgba(255, 255, 255, .3);border-radius: 0;}
.pairing-area .pairingswiper .swiper-pagination-bullet-active {background: rgba(255, 255, 255, 1);}

.pairing-area.active {height: 100%;background-color: rgba(0, 0, 0, .9);backdrop-filter: blur(2px);}
.pairing-area.active::before {content: '';position: absolute;top: calc(50% - 80px);left: calc(50% - 157px);width: 313px;height: 92px;background: url('../images/pairing_bg.webp') 0 0 no-repeat;background-size: 100%;opacity: .2;}
.pairing-area.active::after {background: none;background-color: #fff;-webkit-mask-image: url('../images/ico_pairing.svg');mask-image: url('../images/ico_pairing.svg');}
.pairing-area.active > strong {background: none;background-color: #fff;-webkit-mask-image: url('../images/txt_pairing.svg');mask-image: url('../images/txt_pairing.svg');}
.pairing-area.active .pairingswiper {top: 0;opacity: 1;visibility: visible;}

.sec-grid {position: relative;}
.sec-grid .gridswiper {position: absolute;top: 0;left: calc(50% - 1060px);padding-top: 40px;width: 2120px;opacity: 0;transition: opacity .2s ease-in-out;cursor: grab}

.sec-block {position: relative;margin: 0 auto;width: 360px;height: 100%;visibility: hidden;overflow: hidden;}
.sec-block .blockswiper {position: absolute;top: 0;left: 2160px;width: 2160px;height: 800px;transform: skew(0deg, -20deg) scale(1.5);transition: left 1.4s ease-in-out, transform 1.8s ease-in-out;}

.sec-slide.full .sec-grid .gridswiper {transform: skew(0deg, -50deg) scale(.5) translate(-80%, 0);opacity: 0;transition: transform 2s cubic-bezier(.37,.45,.03,.99), opacity 2s ease-in-out;}
.sec-slide.grid .sec-grid .gridswiper {transform: skew(0deg, 0deg) scale(1) translate(0, 0);opacity: 1;transition: transform 2s cubic-bezier(.37,.45,.03,.99), opacity 2s ease-in-out;}
.sec-slide.full .sec-block {visibility: visible;}
.sec-slide.full .pairing-area {top: 0;opacity: 1;}
.sec-slide.full .sec-block .blockswiper {left: calc(50% - 1080px);transform: skew(0deg, 0deg) scale(1);}

.sec-grid .gridswiper .pic {margin-top: 48px;transform: scale(0);transition: transform .4s ease-in-out;}
.sec-grid .gridswiper .pic.click1,
.sec-grid .gridswiper .pic.click2 {cursor: pointer;}
.sec-grid .gridswiper .swiper-slide:nth-of-type(1n) .pic2,
.sec-grid .gridswiper .swiper-slide:nth-of-type(2n) .pic3,
.sec-grid .gridswiper .swiper-slide:nth-of-type(3n) .pic1 {transition-delay: .2s;}
.sec-grid .gridswiper .swiper-slide:nth-of-type(1n) .pic1,
.sec-grid .gridswiper .swiper-slide:nth-of-type(2n) .pic4,
.sec-grid .gridswiper .swiper-slide:nth-of-type(3n) .pic5 {transition-delay: .3s;}
.sec-grid .gridswiper .swiper-slide:nth-of-type(1n) .pic3,
.sec-grid .gridswiper .swiper-slide:nth-of-type(2n) .pic2,
.sec-grid .gridswiper .swiper-slide:nth-of-type(3n) .pic2 {transition-delay: .4s;}
.sec-grid .gridswiper .swiper-slide:nth-of-type(1n) .pic5,
.sec-grid .gridswiper .swiper-slide:nth-of-type(2n) .pic1,
.sec-grid .gridswiper .swiper-slide:nth-of-type(3n) .pic4 {transition-delay: .5s;}

/* .sec-grid .gridswiper .pic {margin-top: 48px;opacity: 0;transform: scale(0);animation: loadani1 1s forwards ease-in-out;}
.sec-grid .gridswiper .swiper-slide:nth-of-type(1n) .pic1,
.sec-grid .gridswiper .swiper-slide:nth-of-type(2n) .pic2,
.sec-grid .gridswiper .swiper-slide:nth-of-type(3n) .pic3,
.sec-grid .gridswiper .swiper-slide:nth-of-type(4n) .pic4 {animation-delay: .2s;}
.sec-grid .gridswiper .swiper-slide:nth-of-type(1n) .pic2,
.sec-grid .gridswiper .swiper-slide:nth-of-type(2n) .pic3,
.sec-grid .gridswiper .swiper-slide:nth-of-type(3n) .pic4,
.sec-grid .gridswiper .swiper-slide:nth-of-type(4n) .pic5 {animation-delay: .4s;}
.sec-grid .gridswiper .swiper-slide:nth-of-type(1n) .pic3,
.sec-grid .gridswiper .swiper-slide:nth-of-type(2n) .pic4,
.sec-grid .gridswiper .swiper-slide:nth-of-type(3n) .pic5,
.sec-grid .gridswiper .swiper-slide:nth-of-type(4n) .pic1 {animation-delay: .6s;}
.sec-grid .gridswiper .swiper-slide:nth-of-type(1n) .pic4,
.sec-grid .gridswiper .swiper-slide:nth-of-type(2n) .pic5,
.sec-grid .gridswiper .swiper-slide:nth-of-type(3n) .pic1,
.sec-grid .gridswiper .swiper-slide:nth-of-type(4n) .pic2 {animation-delay: .8s;}
@keyframes loadani1 {
	0% {transform: scale(0);opacity: 0;}
	60% {transform: scale(1.6);opacity: 1;}
	100% {transform: scale(1);opacity: 1;}
} */

.sec-grid .gridswiper .pic1 {margin-top: 0;}
.sec-grid .gridswiper .slide2 .pic1,
.sec-grid .gridswiper .slide4 .pic1,
.sec-grid .gridswiper .slide6 .pic1,
.sec-grid .gridswiper .slide8 .pic1,
.sec-grid .gridswiper .slide10 .pic1,
.sec-grid .gridswiper .slide12 .pic1,
.sec-grid .gridswiper .slide14 .pic1 {margin-top: 44px;}

.sec-grid.load .gridswiper {opacity: 1;}
.sec-grid.load .gridswiper .pic {transform: scale(1);}

.sec-grid.loaded .gridswiper .swiper-slide:nth-of-type(1n) .pic1,
.sec-grid.loaded .gridswiper .swiper-slide:nth-of-type(2n) .pic3,
.sec-grid.loaded .gridswiper .swiper-slide:nth-of-type(3n) .pic5 {animation: picani1 2s alternate infinite ease-in-out;}
.sec-grid.loaded .gridswiper .swiper-slide:nth-of-type(1n) .pic2,
.sec-grid.loaded .gridswiper .swiper-slide:nth-of-type(2n) .pic4 {animation: picani2 2s alternate infinite ease-in-out;}
.sec-grid.loaded .gridswiper .swiper-slide:nth-of-type(1n) .pic3,
.sec-grid.loaded .gridswiper .swiper-slide:nth-of-type(2n) .pic5 {animation: picani1 3s alternate infinite ease-in-out;}
@keyframes picani1 {
	0% {transform: scale(1);}
	100% {transform: scale(1.1);}
}
@keyframes picani2 {
	0% {transform: translateY(0);}
	100% {transform: translateY(-10px);}
}

.sec-block .blockswiper .swiper-slide {padding-bottom: 80px;display: flex;flex-direction: column;justify-content: center;}
.sec-block .blockswiper .info strong {display: block;color: #000;font-size: 16px;font-weight: 400;letter-spacing: -0.32px;text-transform: uppercase;text-align: center;transform: translate(0, -30px);opacity: 0;transition: all .4s ease-in-out .2s;}
.sec-block .blockswiper .info p {margin-top: 4px;color: #000;text-align: center;font-size: 28px;font-weight: 400;line-height: 34px;letter-spacing: -0.56px;}
.sec-block .blockswiper .info p span {display: block;transform: skew(-10deg, -10deg);opacity: 0;transition: all .4s ease-in-out .4s;transform-origin: top left;}
.sec-block .blockswiper .info .txt-price {margin-top: 20px;display: block;color: #333;text-align: center;font-size: 14px;font-weight: 400;line-height: normal;letter-spacing: -0.28px;transform: translate(0, -30px);opacity: 0;transition: all .4s ease-in-out .7s;}
.sec-block .blockswiper .info .txt-price em {display: inline-block;margin-right: 1px;color: #000;font-family: 'ClashDisplay';font-size: 16px;font-weight: 500;line-height: normal;}
.sec-block .blockswiper .pic {margin: 20px auto 0;width: 320px;}

.sec-block .blockswiper .swiper-slide-active .info strong {transform: translate(0, 0);opacity: 1;}
.sec-block .blockswiper .swiper-slide-active .info p span {transform: skew(0deg, 0deg);opacity: 1;}
.sec-block .blockswiper .swiper-slide-active .info p span:nth-of-type(1) {transition-delay: .4s;}
.sec-block .blockswiper .swiper-slide-active .info p span:nth-of-type(2) {transition-delay: .5s;}
.sec-block .blockswiper .swiper-slide-active .info p span:nth-of-type(3) {transition-delay: .6s;}
.sec-block .blockswiper .swiper-slide-active .info .txt-price {transform: translate(0, 0);opacity: 1;}