.container{ position: relative; }


/* sc-visual */
.sc-visual{ position: sticky; top: 0; height: 100vh; }
.sc-visual .main-slide{ height: 100vh; }
.sc-visual .main-slide a{ display: block; height: 100%; }
.sc-visual .main-slide li .img-area{ width: 100%; }
.sc-visual .main-slide li .img-area::before{ position: absolute; content: ""; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.2); }
.sc-visual .main-slide li .img-area{ position: relative; }
.sc-visual .main-slide li .img-area img{ width: 100%; height: 100%; object-fit: cover; }
.sc-visual .main-slide li .text-area{ position: absolute; width: calc(100% - 30px); bottom: 20%; left: 15px; right: 15px; overflow: hidden; pointer-events: none; color: #fff; }
.sc-visual .main-slide li .text-area .title{ font-size: 30px; line-height: 36px; max-height: 72px; overflow: hidden; font-weight: 400; margin-bottom: 20px; text-transform: uppercase; }
.sc-visual .main-slide li .text-area .desc{ font-size: 15px; line-height: 20px; max-height: 40px; overflow: hidden; font-weight: 300; font-family: 'Spoqa Han Sans Neo'; }
.sc-visual .main-slide .pagination{ top:auto; bottom: 30px; /* top을 0을 쓴다고 무시되는게 아니라 auto를 써야지 없어짐 */ left: 50%; transform: translateX(-50%); width: 200px; height: 2px; background: #fff; z-index: 1; }
.sc-visual .main-slide .swiper-pagination-progressbar-fill{ background: #000; }



/* main-content */
.content-wrapper{ position: relative; background: #fff; }
.main-content{ position: sticky; top: 0; z-index: 20; background: #fff; overflow: hidden; will-change: top; transition: .3s; }
.main-content.down{ top: 45px; }
.main-content .sub-menu{ border-bottom: 1px solid #f3f3f3; background: #fff; height: 45px; overflow: hidden; overflow-x: auto; }
.main-content .sub-menu ul{ display: flex; }
.main-content .sub-menu li{ padding: 0 13px; }
.main-content .sub-menu li a{ display: inline-block; font-size: 15px; line-height: 45px; font-weight: 500; }
.main-content .sub-menu li:nth-child(2) a{ color: #ff6a52; }



/* sc-newin */
.sc-newin{ position: relative; padding: 50px 0 60px 15px; }
.sc-newin .text-area .headline{ font-size: 19px; line-height: 25px; margin-bottom: 14px; font-weight: 500; margin-left: 0; }
.sc-newin .text-area .count-number{ font-size: 36px; line-height: 41px; font-family: "Georgia"; margin-bottom: 14px; }
.sc-newin .text-area .text1{ font-size: 12px; line-height: 18px; font-weight: 500; text-transform: uppercase; }
.sc-newin .newproduct-area{ position: absolute; top: 40px; left: 144px; right: 0; overflow: hidden; }
.sc-newin .newproduct-area .title{ font-size: 12px; font-weight: 500; line-height: 16px; text-align: center; }
.sc-newin .swiper-slide{ width: 90px; }


/* benefit */
.banner-benefit{ position: relative; margin-bottom: 82px; }
.banner-benefit .benefit-slide img{ width: 100%; object-fit: cover; }
.banner-benefit .benefit-slide{ padding-bottom: 30px; }
.banner-benefit .pagination{ width: calc(100% - 30px); top: auto; bottom: 0px; left: 15px; height: 2px; background: #e5e5e5; }
.banner-benefit .swiper-pagination-progressbar-fill{ background: #000; }


/* sc-wishlist */
.sc-wishlist{ position: relative; margin-bottom: 60px; }
.sc-wishlist .headline{ font-size: 24px; letter-spacing: -0.5px; line-height: 30px; transition: 1000ms all; margin-bottom: 10px; }
.sc-wishlist .img-area{ margin-bottom: 15px; }
.sc-wishlist .wish-slide{ padding: 0 20px; }
.sc-wishlist .swiper-slide{ position: relative; width: 145px; }
.sc-wishlist .swiper-slide a{ display: inline-block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; }



/* sc-lookbook */

.sc-lookbook{ position: relative; margin-bottom: 60px; }
.sc-lookbook .lookbook-slide .img-title{ position: relative; }
.sc-lookbook .lookbook-slide .img-title>img{ width: 100%; object-fit: cover; }
.sc-lookbook .lookbook-slide .headline{ display: inline-block; font-size: 15px; max-width: 304px; margin: 20px 0 30px 0; line-height: 20px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background-image: url(https://mb.wizwid.com/resources/images/main/ico_arrow_right.svg); background-repeat: no-repeat; background-position: center right; padding-right: 20px; }
.sc-lookbook .product-list li{ position: relative; display: flex; margin-bottom: 10px; }
.sc-lookbook .product-list li+li{ margin-bottom: 0; }
.sc-lookbook .product-list a{ position: absolute; top: 0; right: 0; left: 0; bottom: 0; }
.sc-lookbook .img-area{ position: relative; height: 100px; width: 75px; margin-right: 20px; }
.sc-lookbook .img-area img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.sc-lookbook .product-area{ padding: 9px 0; }
.sc-lookbook .brand{ line-height: 16px; }
.sc-lookbook .p-name{ width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-lookbook .swiper-slide{ width: 315px; margin-left: 15px; }


/* sc-keyword */
.sc-keyword{position: relative;}
.sc-keyword .keyword-slide{ position: relative; margin-bottom: 40px; }
.sc-keyword .keyword-slide .swiper-slide.big{width: 315px; }
.sc-keyword .keyword-slide .img-big::before{ position: absolute; content: ""; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, .2); }
.sc-keyword .keyword-slide .title-area{ position: absolute; left: 15px; right: 15px; bottom: 10%; color: #fff; }
.sc-keyword .title-area .title{ margin-bottom: 10px; font-size: 14px; line-height: 18px; }
.sc-keyword .title-area .big-title{ font-size: 24px; line-height: 30px; font-weight: 300; }
.sc-keyword .title-area .keyword-tag{ margin-top: 20px; }
.sc-keyword .title-area .keyword-tag span{ display: inline-block; margin-bottom: 4px; padding: 0 10px; font-size: 11px; font-weight: 500; line-height: 25px; border-radius: 12.5px; background: rgba(255, 255, 255, .9); color: #000; }
.sc-keyword .img-area{ position: relative; margin-bottom: 15px; display: flex; justify-content: center; align-items: flex-start; overflow: hidden; }
.sc-keyword .swiper-wrapper{ align-items: center; }
.sc-keyword .swiper-slide{ width: 167px; }
.sc-keyword .keyword-slide .btn-more{ position: relative; bottom: 0; left: 0; background: #000; color: #fff; width: 66px; height: 25px; border-radius: 12.5px; font-size: 12px; margin: 15px 0 0 15px; }
.sc-keyword .pagination{ display: flex; position: absolute; width: 225px; height: 2px; background-color: #e5e5e5; top: auto; bottom: 12px; left: 90px; }
.sc-keyword .pagination .swiper-pagination-progressbar-fill{ background: #000; }


/* sc-flash */
.sc-flash{ position: relative; margin-bottom: 60px; }
.sc-flash .swiper-slide{ width: 167px !important; }
.sc-flash .swiper-slide .img-area img{ width: 100%; height: 100%; object-fit: cover; }
.sc-flash .swiper-wrapper{ padding: 0 10px 0 15px; }
.sc-flash .img-area{ position: relative; margin-bottom: 15px; height: 224px; }
.sc-flash .img-area .funding{ position: absolute; bottom: 0; left: 0; right: 0; height: 40px; background: rgba(0, 0, 0, .5); }
.sc-flash .img-area .percent{ color: #00dcb7; line-height: 31px; font-size: 22px; padding: 5px 0 0 10px; }
.sc-flash .img-area .time{ position: absolute; top: 0; right: 0; display: inline-block; padding: 5px 10px 0px 0px; width: 105px; text-align: right; font-size: 13px; line-height: 31px; letter-spacing: -0.3px; color: #ffffff; }
.sc-flash .p-name{ width: 167px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


/* sc-brand */
.sc-brand{ position: relative; margin-bottom: 60px; }
.sc-brand .brand-tab{ margin-bottom: 30px; padding: 0 10px 0 10px; text-align: center; }
.sc-brand .brand-tab .title{ font-size: 10px; }
.sc-brand .brand-tab .swiper-slide{ width: 76px; text-align: center; opacity: 0.4; cursor: pointer; }
.sc-brand .brand-tab .swiper-slide.on{ opacity: 1; }
.sc-brand .brand-tab .img-box{ position: relative; margin-bottom: 10px; width: 76px; height: 76px; }
.sc-brand .brand-tab .img-box img{ width: 100%; height: 100%; border-radius: 50%; }

/* area공통 */

.area1 .img-area::before,.area2 .img-box01 .img01::after{position: absolute; content: ""; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, .2);}
/* area1 */
.area1{ margin-bottom: 60px; }
.area1 .img-big{ position: relative; }
.area1 .img-area{ position: relative; margin-bottom: 0; }
.area1 .img-area img{ width: 100%; object-fit: cover; }
.area1 .text-area{ position: absolute; left: 15px; right: 15px; top: 50%; color: #fff; }
.area1 .text-area .title{ font-size: 24px; line-height: 30px; font-weight: 300; }
.area1 .text-area .desc{ margin-top: 20px; font-size: 14px; line-height: 18px; font-weight: 300; }
.area1 .keyword-tag{ margin-top: 20px; }
.area1 .keyword-tag span{ display: inline-block; padding: 0px 10px; margin-bottom: 4px; font-size: 11px; font-weight: 500; line-height: 25px; border-radius: 12.5px; background: rgba(255,255,255,.9); color: #000; }
.area1 .img-boxes{ display: flex; position: relative; width: 100%; justify-content: space-between; }
.area1 .img-boxes a{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
.area1 .img-boxes li{ flex: 1; max-width: 100%; height: auto; min-width: 0; }
.area1 .img-boxes img{ width: 100%; height: 172px; object-fit: cover; }
.area1 .img-boxes li{ position: relative; }
.area1 .img-box{ margin-bottom: 15px; }
.area1 .product-info>div{ padding: 0 10px; }
.area1 .product-info .p-name{ margin-right: 0; }

/* area2 */
.area2{ position: relative; }
.area2 .headline{ display: flex; align-items: center; justify-content: space-between; margin: 0px 9px 20px 15px; }
.area2 .btn-refresh{ position: absolute; top: 0; right: 0; width: 30px; height: 30px; background-image: url(https://mb.wizwid.com/resources/images/main/ic_refresh.svg); background-repeat: no-repeat; background-position: center center; transition: all 1s ease 0s; transform: rotate(360deg); }
.area2 .capture-title{ display: flex; align-items: center;justify-content: space-between; }
.area2 .img-box01{ position: relative; }
.area2 .img-box01 li{ opacity: 1; }
.area2 .img-box01 a{ position: relative; }
.area2 .tag{ display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 11px; color: #fff; line-height: 14px; text-align: center; }
.area2 .grid ul{ display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); }
.area2 .grid ul li:nth-child(1){ grid-column: 1/3; grid-row: 1/3; }
.area2 .grid ul a{ display: block; height: 100%; }
.area2 .grid ul .img01{ height: 100%; }
.area2 .grid ul img{ height: 100%; }

/* area3 */
.area3{ position: relative; background: #f8f8f8; margin-bottom: 60px; padding: 60px 0px 60px 15px; }
.area3 .area3-slide .img-title{ position: relative; }
.area3 .area3-slide .img-title>img{ width: 100%; object-fit: cover; }
.area3 .area3-slide .headline{ display: inline-block; font-size: 15px; max-width: 304px; margin: 20px 0 30px 0; line-height: 20px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background-image: url(https://mb.wizwid.com/resources/images/main/ico_arrow_right.svg); background-repeat: no-repeat; background-position: center right; padding-right: 20px; }
.area3 .area3-slide .product-list li{ position: relative; display: flex; margin-bottom: 10px; }
.area3 .area3-slide .product-list li+li{ margin-bottom: 0; }
.area3 .area3-slide .product-list a{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
.area3 .area3-slide .img-area{ position: relative; height: 100px; width: 75px; margin-right: 20px; }
.area3 .area3-slide .img-area img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.area3 .area3-slide .product-area{ padding: 9px 0; }
.area3 .area3-slide .brand{ line-height: 16px; }
.area3 .area3-slide .p-name{ width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.area3 .swiper-slide{ width: 738px; }
.area3 .area3-slide .icon01{ background: url(https://mb.wizwid.com/resources/images/common/ico_leaf_01.svg); background-size: auto 14px; width: 10px; height: 14px; display: inline-block; font-size: 0; margin-left: 5px; vertical-align: top; }


/* sc-editorial */
.sc-editorial{ position: relative; margin-bottom: 60px; }
.sc-editorial .editorial-tab{ margin-bottom: 30px; padding: 0 15px; overflow-x: auto; line-height: 16px; }
.sc-editorial .editorial-tab .swiper-slide{ width: auto; font-size: 12px; line-height: 16px; color: #bbb; font-weight: 500; display: inline-block; cursor: pointer; }
.sc-editorial .editorial-tab .swiper-slide.on{ color: #000; }
.sc-editorial .img-big{ position: relative; margin-bottom: 105px; }
.sc-editorial .img-big img{ width: 100%; height: 100%; object-fit: cover; }
.sc-editorial .info-box{ position: relative; height: 1px; margin-bottom: 30px; }
.sc-editorial .info-pos{ position: absolute; bottom: 0; left: 15px; padding: 30px 20px; width: 245px; background: rgba(0,0,0,0.8); }
.sc-editorial .info-pos .title{ margin-bottom: 10px; font-size: 20px; line-height: 26px; font-weight: 300; color: #ffffff; }
.sc-editorial .info-pos .date{ margin-bottom: 30px; font-size: 11px; line-height: 14px; font-weight: 300; color: #999999; }
.sc-editorial .info-pos .date span:last-child{ position: relative; margin-left: 7px; padding-left: 11px; }
.sc-editorial .info-pos .date span:last-child::after{ position: absolute; content: ""; left: 0; top: 3px; bottom: 3px; width: 1px; background: #999999; }
.sc-editorial .info-pos p{ font-size: 11px; color: #ffffff; line-height: 16px; font-weight: 300; }
.sc-editorial .info-pos b{ font-weight: bold; }
.sc-editorial .product-list{ padding: 0 15px; }
.sc-editorial .product-list li{ display: flex; position: relative; margin-bottom: 10px; }
.sc-editorial .product-list li+li{ margin-bottom: 0; }
.sc-editorial .product-list a{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
.sc-editorial .img-area{ position: relative; height: 100px; width: 75px; margin-right: 20px; }
.sc-editorial .img-area img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.sc-editorial .product-area{ padding: 9px 0; }
.sc-editorial .brand{ line-height: 16px; }
.sc-editorial .p-name{ width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


/* app-install */
.app-install{ position: relative; line-height: 18px; font-weight: 500; padding: 17px 0px 17px 42px; text-align: center; border-top: 1px solid #dddddd; background: #ffffff; z-index: 20; cursor: pointer; }
.app-install::before{ position: absolute; content: ""; top: 0; left: 50%; margin-left: -115px; background-image: url(https://mb.wizwid.com/resources/images/common/ico_download.svg); background-repeat: no-repeat; background-position: left center; width: 22px; height: 50px; }