/**
 * STYLE
 */

html, body {margin: 0;padding: 0;width: 100%;height: 100%;background-color: #fff;font-family: 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;}
::-webkit-scrollbar {
    display: none;
}

@font-face {
  font-family: 'ClashDisplay-Semibold';
  src: url('./fonts/ClashDisplay-Semibold.woff2') format('woff2'),
       url('./fonts/ClashDisplay-Semibold.woff') format('woff'),
       url('./fonts/ClashDisplay-Semibold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'ClashDisplay-Bold';
  src: url('./fonts/ClashDisplay-Bold.woff2') format('woff2'),
       url('./fonts/ClashDisplay-Bold.woff') format('woff'),
       url('./fonts/ClashDisplay-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
  font-style: normal;
}
:root {
  --safe-top: 48px;
}

#wrap {position: relative;width: 100%;height: 100%;background-color: #000;}
.inner {position: relative;margin: 0 auto;}
.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 header {top: var(--safe-top);}
body.frame .main-swiper > .swiper {height: calc(100vh - 48px);padding-top: var(--safe-top);}

.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;}

header {position: fixed;top: 0;left: 0;width: 100%;height: 48px;z-index: 30;background: url('../images/header.webp') no-repeat center center;background-size: contain;background-repeat: no-repeat;}  
.dim {position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0);z-index: 999;}
.container {position: relative;width: 100%;height: 100%;z-index: 20;}
.container img {max-width: 100%;}

.main-swiper {position: relative;padding-top: 48px}
.main-swiper > .swiper {position: relative;width: 100vw;height: calc(100vh - 48px);overflow: hidden;}
.main-swiper > .swiper > .swiper-wrapper > .swiper-slide {width: 360px;height: 100%;overflow: hidden;}
.main-swiper > .swiper > .swiper-wrapper > .swiper-slide h2 {color: #FFF;font-family: "ClashDisplay-Bold";font-size: 80px;font-weight: 700;position: absolute;z-index: 10;top: 20px;right: 10px;pointer-events: none;}
.main-swiper > .swiper > .swiper-wrapper > .swiper-slide:nth-of-type(1){z-index:1 !important;}
.main-swiper > .swiper > .swiper-wrapper > .swiper-slide:nth-of-type(2){z-index:2 !important;}
.main-swiper > .swiper > .swiper-wrapper > .swiper-slide:nth-of-type(3){z-index:3 !important;}
.main-swiper > .swiper > .swiper-wrapper > .swiper-slide:nth-of-type(4){z-index:4 !important;}
.main-swiper > .swiper > .swiper-wrapper > .swiper-slide:nth-of-type(5){z-index:5 !important;}
.main-swiper > .swiper > .swiper-wrapper > .swiper-slide:nth-of-type(6){z-index:6 !important;}
.main-swiper > .swiper > .swiper-wrapper > .swiper-slide:nth-of-type(7){z-index:7 !important;}

.main-swiper .swiper-nav {position: absolute;bottom: 20px;left: 50%;width: calc(100% - 40px);height: 44px;z-index: 10;transform: translateX(-50%);display: flex;align-items: flex-end;gap: 4px;}
.main-swiper .swiper-nav .select ul {padding: 7px 0;border: 1px solid rgba(0, 0, 0, 0.09);background: rgba(0, 0, 0, 0.40);backdrop-filter: blur(15px);margin-bottom: 4px;width: 224px;display: none;}
.main-swiper .swiper-nav .select ul li {font-family: 'ClashDisplay-Semibold'; padding: 0 12px 0 16px; width: 100%;height: 44px;border-radius: 0;background-color: transparent;margin: 0;cursor: pointer;display: flex;align-items: center;}
.main-swiper .swiper-nav .select ul .swiper-pagination-bullet-active {background: rgba(255, 255, 255, 0.10);}

.main-swiper .swiper-nav .select img { height:14px;}
.main-swiper .swiper-nav .select .current {position: relative;display: flex;align-items: center;}
.main-swiper .swiper-nav .select .current {font-family: 'ClashDisplay-Semibold'; font-weight: 600;color: #FFF;font-size: 14px;padding: 0 12px 0 16px;background: rgba(0, 0, 0, 0.40);box-shadow: 0 0 4px rgba(0,0,0,0.2);width: 224px;height:44px;}
.main-swiper .swiper-nav .select .current .icon-up {width: 17px;height: 17px;position: absolute;top: 50%;right: 10px;transform: translateY(-50%) rotate(180deg);background-image: url('../images/arrow_up.webp');background-size: 100%;background-repeat: no-repeat;background-position: center center;transition: transform .2s ease-in;}
.main-swiper .swiper-nav .select.active .icon-up {transform: translateY(-50%) rotate(0);}
.main-swiper .swiper-nav .select.active ul { display: block;}

.main-swiper .swiper-main-next { width: 44px; height: 44px; background-image: url('../images/btn_arrow.webp');transform: rotate(180deg);}
.main-swiper .swiper-main-prev { width: 44px; height: 44px; background-image: url('../images/btn_arrow.webp');}
.main-swiper .swiper-main-next, .main-swiper .swiper-main-prev {background-size: 100%;background-repeat: no-repeat;background-position: center center;cursor: pointer;}

.item-swiper { width: 100%; height: 100%;}
.item-swiper.swiper {position: relative;width: 100%;height: 100%;overflow: hidden;}
.item-swiper.swiper .swiper-slide {transform-origin: center center;width: 100%;height: 100%;position: relative;z-index: 1;overflow: hidden;}
.item-swiper.swiper .swiper-slide img {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
.item-swiper.swiper .swiper-slide:nth-of-type(1) {z-index: 1 !important;}
.item-swiper.swiper .swiper-slide:nth-of-type(2) {z-index: 2 !important;}
.item-swiper.swiper .swiper-slide:nth-of-type(3) {z-index: 3 !important;}
.item-swiper.swiper .swiper-slide:nth-of-type(4) {z-index: 4 !important;}
.item-swiper.swiper .swiper-slide:nth-of-type(5) {z-index: 5 !important;}
.item-swiper.swiper .swiper-slide:nth-of-type(6) {z-index: 6 !important;}
.item-swiper.swiper .swiper-slide:nth-of-type(7) {z-index: 7 !important;}
.item-swiper.swiper .swiper-slide:nth-of-type(8) {z-index: 8 !important;}
.item-swiper.swiper .swiper-slide:nth-of-type(9) {z-index: 9 !important;}
.item-swiper.swiper .swiper-slide:nth-of-type(10) {z-index: 10 !important;}
.item-swiper.swiper .swiper-slide:nth-of-type(11) {z-index: 11 !important;}
.item-swiper.swiper .swiper-slide:nth-of-type(12) {z-index: 12 !important;}
.item-swiper.swiper .swiper-slide:nth-of-type(13) {z-index: 13 !important;}
.item-swiper.swiper .swiper-slide:nth-of-type(14) {z-index: 14 !important;}
.item-swiper.swiper .swiper-slide:nth-of-type(15) {z-index: 15 !important;}
.item-swiper.swiper .swiper-slide:nth-of-type(16) {z-index: 16 !important;}
.item-swiper.swiper .swiper-slide:nth-of-type(17) {z-index: 17 !important;}
.item-swiper.swiper .swiper-slide:nth-of-type(18) {z-index: 18 !important;}
.item-swiper.swiper .swiper-slide:nth-of-type(19) {z-index: 19 !important;}
.item-swiper.swiper .swiper-slide:nth-of-type(20) {z-index: 20 !important;}
.item-swiper.swiper .swiper-slide:nth-of-type(21) {z-index: 21 !important;}
.item-swiper.swiper .swiper-slide:nth-of-type(22) {z-index: 22 !important;}
.item-swiper.swiper .swiper-slide:nth-of-type(23) {z-index: 23 !important;}
.item-swiper.swiper .swiper-slide:nth-of-type(24) {z-index: 24 !important;}


.swiper-slide[title="Living"] {background-image: url('../images/living_bg.webp');background-size: 360px;background-position: center center;}
.swiper-slide[title="Beauty"] .slide01 img {width: 90px;}
.swiper-slide[title="Beauty"] .slide02 img {width: 90px;}
.swiper-slide[title="Beauty"] .slide03 img {width: 133px;}
.swiper-slide[title="Beauty"] .slide04 img {width: 128px;}
.swiper-slide[title="Beauty"] .slide05 img {width: 113px;}
.swiper-slide[title="Beauty"] .slide06 img {width: 179px;}

.swiper-slide[title="Beauty"] {background-image: url('../images/beauty_bg.webp');background-size: cover;background-position: center center;}
.swiper-slide[title="Living"] .slide01 img {width: 90px;}
.swiper-slide[title="Living"] .slide02 img {width: 96px;}
.swiper-slide[title="Living"] .slide03 img {width: 200px;}
.swiper-slide[title="Living"] .slide04 img {width: 304px;}
.swiper-slide[title="Living"] .slide05 img {width: 141px;}
.swiper-slide[title="Living"] .slide06 img {width: 146px;}
.swiper-slide[title="Living"] .slide07 img {width: 187px;}
.swiper-slide[title="Living"] .slide08 img {width: 360px;}