/* BASIC css start */ /* BASIC css start */ #contentWrap {width:100%;position:relative;} #contentWrapper-main {width:100%;position:relative;} /* main01 */ #main01 {position: relative;width:100%;height:100%;overflow:hidden;} #main01 .slider {position: relative;width:100%;overflow:hidden;height:100%;height: calc(100vh - var(--announcement-height, 0px));} #main01 .slider .slide_tit {display: flex;position: absolute;bottom:40px!important;left: 50%!important;z-index: 100;transform: translate(-50%,0);max-width:320px;} #main01 .slider .slide_tit > li {display: flex;flex:1 1 0;justify-content: center;align-items: center;position: relative;width:60px;height:2px!important;margin:0 5px;padding: 0 10px;background: rgba(0,0,0,0.3);border-radius:0;font-size: 16px;letter-spacing:-0.025em;color: rgb(255, 255, 255);opacity: 1;} #main01 .slider .slide_tit > li.swiper-pagination-bullet-active {} #main01 .slider .slide_tit > li .bar {position: absolute;bottom: 0;left: 0;width:0;height: 5px;background: #111;} #main01 .slider .slide_tit > li.swiper-pagination-bullet-active .bar {animation-name: countingBar;animation-duration: 3s;animation-timing-function: linear;animation-fill-mode:forwards;} @keyframes countingBar { 0% {width: 0;} 100% {width:100%;} } #main01 .swiper-slide {overflow:hidden;position:relative;} #main01 .swiper-slide .txt-area {font-family: 'Spoqa Han Sans Neo';position:absolute;top:40%;transform: translateY(50%);left:10%;display:none;} #main01 .swiper-slide .txt-area .txt01 {font-size:48px;display:block;font-weight: 700;line-height: 60px;margin-bottom:30px;} #main01 .swiper-slide .txt-area .txt02 {font-weight: 300;font-size: 20px;line-height: 30px;color: #555555;} #main01 .swiper-slide img {transform:scale(1.1);width:100%;} #main01 .slider .control {display: flex;justify-content: center;align-items: center; position: absolute;bottom: 100px;left:50%; width: 120px; height: 30px;margin-left: 470px; background-color: rgb(0, 0, 0, 0.3);border-radius:15px;z-index: 100;} #main01 .slider .control .btn {display: flex;align-items: center;font-size: 16px;font-weight: 400;letter-spacing:-0.025em;color: #fff;cursor: pointer;} #main01 .slider .control .num {margin: 0 7px;font-size: 16px;font-weight: 300;letter-spacing:-0.025em;color: #fff;} #main01 .main_top_area,.main_top_area2,.main_top_area3,.main_top_area4 { margin:0 auto} #main01 .swiper-slide-active .main_top_area {animation-name: plus;animation-duration: 5s; animation-iteration-count: infinite;width: 100%;height:100%;background-position-x: center;background-repeat:no-repeat;} @keyframes plus { from {transform: scale(1.1);} to {transform: scale(1.0);} } /* 메인배너교체시 이미지경로 변경 */ #main01 .slider .slide-bg1 {background-image:url('/design/heimish/renewal2019/pc/banner/PC_matcha.jpg');background-size:cover;} #main01 .slider .slide-bg2 {background-image:url('/design/heimish/renewal2019/pc/banner/PC_watermelon.jpg');background-size:cover;} #main01 .slider .slide-bg3 {background-image:url('/design/heimish/renewal2019/pc/banner/PC_main_allclean.jpg');background-size:cover;} #main01 .slider .slide-bg4 {background-image:url('/design/heimish/renewal2019/pc/banner/PC_main_mascara.jpg');background-size:cover;} #main01 .slider a {display:block;width:100%;height:100%;} /* main02 */ #main02 {width:100%;margin:200px auto;} #main02 .sec_wrapper {width:1540px;position:relative;margin:0 auto;} #main02 .item-wrap {width:1280px;position:relative;margin:0 auto;} #main02 .item-wrap .mySwiper {padding-bottom:100px;} #main02 .item-wrap .item-list .item-type-1 li {position:relative;} #main02 .item-wrap .item-list .item-type-1 li .prd-wrap {font-family: 'Spoqa Han Sans Neo';} #main02 .item-wrap .item-list .item-type-1 li .prd-wrap .ranking {position:absolute;left:0;top:1px;width: 46px;height: 46px;background: rgba(17, 17, 17, 0.6);color:#fff;font-size:20px;line-height:45px;text-align:center;z-index:99;} #main02 .item-wrap .item-list .item-type-1 li .prd-wrap .prd-thumb {width:100%;position:relative;} #main02 .item-wrap .item-list .item-type-1 li .prd-wrap .prd-thumb img {width:100%;} #main02 .item-wrap .item-list .item-type-1 li .prd-wrap .info {margin:15px 0; } #main02 .item-wrap .item-list .item-type-1 li .prd-wrap .info p {margin-bottom:15px;} #main02 .item-wrap .item-list .item-type-1 li .prd-wrap .info .prd-name a {font-family: 'Spoqa Han Sans Neo';font-style: normal;font-weight: 400;font-size: 16px;line-height: 18px;color: #111111; } #main02 .item-wrap .item-list .item-type-1 li .prd-wrap .info .discount {font-weight: 500;font-size: 18px;line-height: 24px;color: #d40022;padding-right:5px;} #main02 .item-wrap .item-list .item-type-1 li .prd-wrap .info .price {font-weight: 500;font-size: 13px;line-height: 24px;color: #111111;padding-right:5px;} #main02 .item-wrap .item-list .item-type-1 li .prd-wrap .info strike {font-weight: 500;font-size: 16px;line-height: 24px;color: #999999;} #main02 .item-wrap .item-list .item-type-1 li .prd-wrap .info .prd-review { font-weight: 400;font-size: 12px;line-height: 18px;color: #999999;} #main02 .swiper-button-next, #main02 .swiper-button-prev {top: var(--swiper-navigation-top-offset,35%);} /* main03 */ #main03 {width:100%;margin:200px auto 0;} #main03 .sec_wrapper {width:1540px;position:relative;padding:0 130px 100px;margin:0 auto;} #main03 .sec_inner {width:1280px;position:relative;margin:0 auto;} #main03 .li_review .rv_main{ } #main03 .li_review .rv_main .thumb{width:100%;} #main03 .li_review .rv_main .thumb a{display: block; width: 100%; height: 100%;} #main03 .li_review .rv_main .thumb a img {width: 100%; height: 100%; object-fit: cover;} #main03 .li_review .rv_main .rv_main_cont {width: 100%; padding: 30px 0;} #main03 .li_review .rv_main .rv_main_cont .rv_info {padding-bottom:20px;text-align:center;border-bottom:1px solid #EDEDED;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;} #main03 .li_review .rv_main .rv_main_cont .rv_info a {text-align:center;font-size: 24px; text-overflow: ellipsis; overflow: hidden;font-family: 'Spoqa Han Sans Neo';font-weight: 400;color: #111111; } #main03 .li_review .rv_main .rv_cont {padding:20px 0;text-align:center;font-size: 13px; text-overflow: ellipsis; overflow: hidden;font-family: 'Spoqa Han Sans Neo';font-weight: 300;color: #111111; } #main03 .li_review .rv_main .rv_star { text-align:center;font-family: 'Noto Sans KR';font-weight: 700;font-size: 16px;line-height: 20px;color: #111111; } #main03 .li_review .rv_main .rv_star img {margin-right:5px;} #main03 .swiper-button-next, #main03 .swiper-button-prev {top: var(--swiper-navigation-top-offset,35%);} /* 공통 */ .item-hd {font-family: 'Poppins';font-style: normal;font-weight: 500;font-size: 50px;line-height: 90px;color: #111111;text-align:center;margin-bottom:40px;} .swiper-button-next:after, .swiper-button-prev:after {font-size:0!important;} .swiper-button-prev:after, .swiper-button-next:after { content: ''!important;} .swiper-button-prev {left: var(--swiper-navigation-sides-offset,30px)!important;right: auto;} .swiper-button-next {right: var(--swiper-navigation-sides-offset,30px)!important;left:auto;} .swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled { opacity: 1!important; cursor: auto; pointer-events: none; } .swiper-pagination-bullet { width: var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,11px))!important; height: var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,11px))!important;} .swiper-pagination-bullet-active { opacity: var(--swiper-pagination-bullet-opacity, 1); background: #111!important; } .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 var(--swiper-pagination-bullet-horizontal-gap,8px)!important; } .dn {display:none;} .item-wrap .item-list .item-type-1 li { } .item-wrap .item-list .item-type-1 li .prd-wrap {font-family: 'Poppins';} .item-wrap .item-list .item-type-1 li .prd-wrap .prd-thumb {width:100%;} .item-wrap .item-list .item-type-1 li .prd-wrap .prd-thumb img {width:100%;} .item-wrap .item-list .item-type-1 li .prd-wrap .info {margin:15px 0; } .item-wrap .item-list .item-type-1 li .prd-wrap .info p {margin-bottom:15px;} .item-wrap .item-list .item-type-1 li .prd-wrap .info .prd-name a {font-family: 'Spoqa Han Sans Neo';font-style: normal;font-weight: 400;font-size: 16px;line-height: 18px;color: #111111; } .item-wrap .item-list .item-type-1 li .prd-wrap .info .discount {font-weight: 500;font-size: 18px;line-height: 24px;color: #D70D42;padding-right:5px;} .item-wrap .item-list .item-type-1 li .prd-wrap .info .price {font-weight: 500;font-size: 13px;line-height: 24px;color: #111111;padding-right:5px;} .item-wrap .item-list .item-type-1 li .prd-wrap .info strike {font-weight: 500;font-size: 16px;line-height: 24px;color: #999999;} .item-wrap .item-list .item-type-1 li .prd-wrap .info .prd-review { font-weight: 400;font-size: 16px;line-height: 18px;color: #999999;} /* main04 */ #main04 {width:100%;max-width: 1540px;margin: 0 auto;font-family: 'Spoqa Han Sans Neo';font-weight:400;color:#111;display:flex;} #main04 .banner__content {position:absolute;top:50%;transform:translate(0, -50%);left:20px;} #main04 .banner__heading {font-size: 30px;line-height: 90px;font-weight:400; } #main04 .banner__text h2 { font-size: 18px;font-weight:300;margin-bottom:50px;} #main04 .banner__box { text-align:center; } #main04 .banner__box a {position:relative;transition: all 250ms linear;display:inline;font-family: 'Poppins';color: #111;margin-top:50px;position:relative;padding:15px 40px;font-size: 16px;border:1px solid #111;box-sizing: border-box;background-color: transparent;} #main04 .banner__box a:hover{background: #2b2b2b; border-color: #2b2b2b;color: #fff;border-width:1px;} #main04 .section-left {width:70%;} #main04 .section-right {width:30%;position:relative;} #main04 .banner__heading {color:#111;} .mainVideo { position: relative; width: 100%; padding-bottom: 56.25%;} .mainVideo iframe { position: absolute; width: 100%; height: 100%; } .mainVideo { position: relative; width: 100%; padding-bottom: 56.25%;} .mainVideo iframe { position: absolute; width: 100%; height: 100%; } /* main05 */ #main05 {width:100%;margin:200px auto 0;background-color:#F5F5F5;display:flex;align-items: center;} #main05 .section-left {width:50%;} #main05 .section-right {width:50%;} #main05 .item-wrap {width:100%;padding:170px 75px;box-sizing: border-box;} #main05 .swiper-horizontal>.swiper-pagination-bullets, #main05 .swiper-pagination-bullets.swiper-pagination-horizontal, #main05 .swiper-pagination-custom, #main05 .swiper-pagination-fraction {bottom:var(--swiper-pagination-bottom,0px);} #main05 .swiper {padding-bottom:70px;} #main05 .link a {font-family: 'Poppins', 'sans-serif';position:relative;transition: all 250ms linear;box-sizing: border-box;background-color: transparent;} #main05 .link a:hover{background: #2b2b2b; border-color: #2b2b2b;color: #eeebe8;border-width:1px;} /* main06 */ #main06 {width:100%;margin:100px auto 0;background-color:#F5F5F5;display:flex;align-items: center;} #main06 .section-left {width:50%;} #main06 .section-left img {width:100%;} #main06 .section-right {width:50%;} #main06 .item-wrap {width:100%;padding:185px 75px;box-sizing: border-box;} #main06 .swiper-horizontal>.swiper-pagination-bullets, #main05 .swiper-pagination-bullets.swiper-pagination-horizontal, #main05 .swiper-pagination-custom, #main05 .swiper-pagination-fraction {bottom:var(--swiper-pagination-bottom,0px);} #main06 .swiper {padding-bottom:70px;} #main06 .link a {position:relative;transition: all 250ms linear;box-sizing: border-box;background-color: transparent;} #main06 .link a:hover{background: #2b2b2b; border-color: #2b2b2b;color: #eeebe8;border-width:1px;} .section-left {position:relative;} .section-left .section-txt {position:absolute;top:50%;left:50%;transform: translate(-50%, -50%);text-align:center;font-family: 'Poppins';color: #111111;} .section-left .section-bg img {width:100%;} .section-left .section-txt .title {font-family:'Poppins', 'sans-serif';font-weight: 500;font-size: 68px;line-height: 90px;} .section-left .section-txt .title02 {font-family: 'Spoqa Han Sans Neo';font-size: 28px;line-height: 30px;padding:10px 0; } .section-left .section-txt .link a {display:inline-block;margin-top:50px;position:relative;width:180px;height:52px;line-height:52px;font-size: 18px;border:1px solid #111;} /* button */ .button--ujarak { -webkit-transition: border-color 0.4s, color 0.4s; transition: border-color 0.4s, color 0.4s;} .button--ujarak::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #111; z-index: -1; opacity: 0; -webkit-transform: scale3d(0.7, 1, 1); transform: scale3d(0.7, 1, 1); -webkit-transition: -webkit-transform 0.4s, opacity 0.4s; transition: transform 0.4s, opacity 0.4s; -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);} .button--ujarak.button--round-s::before { border-radius: 2px;} .button--ujarak.button--inverted::before { background: #111;} .button--ujarak,.button--ujarak::before { -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);} .button--ujarak:hover { color: #fff; border-color: #111;} .button--ujarak.button--inverted:hover { color: #fff; border-color: #111;} .button--ujarak:hover::before { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);} /* main07 */ #main07 {font-family: 'Poppins';margin:100px auto 0;width:1024px;} #main07 h2.title {text-align:center;font-size: 38px;color:#111;font-weight: 400;} #main07 h2.title p {padding:10px 0 30px;text-align:center;font-size: 18px;color:#999999;font-weight: 400;letter-spacing: 0.6em;text-transform: uppercase;} .image-animate { animation: zoom-in-zoom-out 1s ease infinite; animation: zoom-fade var(--duration-animate) ease forwards; } @keyframes image-animate { 0% { transform: scale(1, 1); } 50% { transform: scale(1.5, 1.5); } 100% { transform: scale(1, 1); } } .prd-toggle {opacity:0;position:absolute;bottom: 5%; left:50%;transform:translate(-50%, 0); } #main02 .item-wrap .item-list .item-type-1 li .prd-wrap .prd-thumb:hover .prd-toggle {opacity:1;display:block;transition: opacity 0.8s linear;} .prd-toggle .prd-toggle-icon .wish-toggle .heart {width: 50px; height: 50px;border-radius: 50%;display:inline-block;background-color:#fff;background-size: 100% auto;background-image: url(https://static-resource-smartstore.pstatic.net/brandstore/p/static/20230523160955/media/icon_heart_15x13_gray.412edbc4.svg);background-size: 50% auto; background-repeat: no-repeat; background-position: center;} .prd-toggle .prd-toggle-icon span.heart-of { display:none; } .prd-toggle .prd-toggle-icon .wish-on span.heart { background-size: 100% auto;width: 50px; height: 50px; display:inline-block;background-color: #f54c4a!important;background-image: url(https://static-resource-smartstore.pstatic.net/brandstore/p/static/20230523160955/media/icon_heart_15x13_white.a891e718.svg);background-size: 50% auto; background-repeat: no-repeat; background-position: center; } .prd-toggle .prd-toggle-icon .wish-on span.heart-of {display:inline-block;} .my-wish-count {display:none;} .wish-privew-icon {margin-left:5px;display:inline-block;width: 50px;height: 50px; background-color: rgba(255,255,255,.95);border-radius: 50%; vertical-align: top;position:relative;} .wish-privew-icon span:before {width: 18px;height: 2px;} .wish-privew-icon span:after { width: 2px; height: 18px;} .wish-privew-icon span{ position: absolute;top: 50%;left: 50%;-webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%);background-color: #979797;content: "";} .wish-privew-icon span:before, .wish-privew-icon span:after {position: absolute;top: 50%;left: 50%;-webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%);background-color: #979797; content: "";} /* BASIC css end */ .main-video { background: #000; } .mainMovieWrap { width: 100%; position: relative; } .mainMovieWrap .main-video { padding: 0; } .mainMovieWrap .main-video .section__cont { max-width: 100%; } .embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container::after { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; } .embed-container iframe,.embed-container object,.embed-container embed { position: absolute; top: 0; left: 0; width: 100.1%; height: 100.1%; z-index: 1; } .embed-container iframe:not(#player) { display: none; } /* BASIC css end */