@import url("common.css");

/* Start-슬릭기본 */
.slick-slider{position: relative; display: block; box-sizing: border-box;
-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;-webkit-touch-callout: none;-khtml-user-select: none;-ms-touch-action: pan-y; touch-action: pan-y;-webkit-tap-highlight-color: transparent;}
.slick-list{position: relative; display: block; overflow: hidden; margin: 0; padding: 0; }
.slick-slide{display: none; float: left;}
.slick-initialized .slick-slide{display:block;}
/* End-슬릭기본 */


/* 공통 */
.mTit{font-size:30px; line-height: 120%; letter-spacing: 0.3pt; font-weight: 700; color:#222; font-family: 'Outfit', sans-serif; text-align:center; position: relative; margin: 0 0 40px;}
.mTit small{display:inline-block; line-height: 120%; font-size:20px; font-weight:400; letter-spacing: -0.5pt; color:rgba(255,255,255,.8); font-family:'NanumSquare', sans-serif; margin-left: 10px; vertical-align: middle;}
.mTit.ko{font-size:33px; line-height: 130%; letter-spacing: -0.3pt; color:#222; font-weight: 800; font-family:'NanumSquare', sans-serif;}
.mTxt{font-size:17px; letter-spacing:-0.5pt; color:rgba(51,51,51,.7);}

.moreBtn{display:inline-block; position: absolute; right: 0; top:50%; margin-top: -10px; width:12px; height:20px; background:url('/home/img/more_arrow.png') no-repeat center/100% auto; transition:all .3s linear; opacity: 1;}
.moreBtn:hover{opacity: 0.7;}

.viewBtn{display:inline-block; position: relative; overflow: hidden; border-radius:55px;}
.viewBtn:after{content:''; width: 0%;
    height: 100%;
    display: block;
    background: #222;
    position: absolute;
      -ms-transform: skewX(-20deg);
    -webkit-transform: skewX(-20deg);
    transform: skewX(-20deg);   
    left: -10%;
    opacity: 1;
    top: 0;
    z-index:2;
    -moz-transition: all .3s linear;
  -o-transition: all .3s linear;
  -webkit-transition: all .3s linear;
  transition: all .3s linear;}
.viewBtn:hover:after{opacity:1; width: 116%;}
.viewBtn span{display:inline-block; position: relative; z-index: 3; font-size:17px; letter-spacing:0.3pt; color:#222222; padding: 0 42px; text-align:center; height: 55px; line-height: 53px; box-sizing:border-box; transition:all .3s linear; border-radius:55px; border:1px solid #222; font-family: 'Outfit', sans-serif;}
.viewBtn:hover span{color:#fff !important;}


.ani_effect { transition:all 1s;}
.ani_effect .mTit {position:relative; top:50px; opacity:0; transition:all 0.5s linear;}
.ani_effect.action .mTit {top:0; opacity:1; transition:all 0.5s linear;}
.ani_effect .mTxt {position:relative; top:50px; opacity:0; transition:all 0.5s linear;}
.ani_effect.action .mTxt {top:0; opacity:1; transition:all 0.5s linear;}

.effect_cont {position:relative; top:50px; opacity:0; transition:all 0.5s linear;}
.ani_effect.action .effect_cont {top:0; opacity:1; transition:all 0.5s linear;}

.ani_effect.action:after {height:100% !important; transition:all 1s;}
.delay1{transition-delay:0.4s !important;}
.delay2{transition-delay:0.7s !important;}
.delay3{transition-delay:0.9s !important;}



/* visual */
#visual{width: 100%; height: 650px; position: relative; margin:154px 0 0;}
#visual .slick-list{overflow: visible;}
#visual .visual_in{position: relative; width: 100%; height: 100%;}
#visual .visual_in:after{content:''; display: block; clear:both;}
#visual .visual_in .roll{display:flex; height: 650px;}
#visual .visual_in .roll .txt{width: 50%; position: relative; display:flex; justify-content: flex-end; align-items: center;}
#visual .visual_in .roll .txt:after{content:''; display: block; position: absolute; right: -156px; bottom: 0; width: 521px; height: 521px; background:url('/img/shop/visual_bg.png') no-repeat center/100% auto; z-index: -1; opacity: 0;}
#visual .visual_in .roll .txt > div{max-width:615px; width: 100%;}
#visual .visual_in .roll .txt h2{font-size:56px; letter-spacing: -0.5pt; font-weight: 800; line-height: 120%; color:#222222; position: relative; top:-30px; opacity:0;}
#visual .visual_in .roll .txt h2 span{display: block; font-size:24px; letter-spacing: -0.5pt; font-weight: 400; line-height: 120%; padding: 12px 0 0; color:#222222; position: relative; top:-30px; opacity:0;}
#visual .visual_in .roll .txt .mTxt{padding: 20px 0 40px; position: relative; top:-30px; opacity:0;}
#visual .visual_in .roll .txt .viewBtn{opacity:0;}
#visual .visual_in .roll .img{width: 50%; position: relative;}
#visual .visual_in .roll .img:after{content:''; display:block; width: 100%; height: 0; position: absolute; left:0; top:0; z-index: -1; opacity: 0;}
#visual .visual_in .roll .img img{max-width:100%; position: absolute; margin-top: -60px; opacity: 0;}

#visual .visual_in .roll.action .txt:after{opacity: 1; transition:all 1s; transition-delay:1.2s;}
#visual .visual_in .roll.action .txt h2 {top:0; opacity:1; transition:all 1s;}
#visual .visual_in .roll.action .txt h2 span{top:0; opacity:1; transition:all 1s; transition-delay:0.2s;}
#visual .visual_in .roll.action .txt .mTxt {top:0; opacity:1; transition:all 1s; transition-delay:0.4s;}
#visual .visual_in .roll.action .txt .viewBtn{opacity:1; transition:all 1s; transition-delay:1s;}
#visual .visual_in .roll.action .img:after{height: 100%; opacity: 1; transition:all 0.8s linear;}
#visual .visual_in .roll.action .img img{margin-top: 0; opacity: 1; transition:all 1.5s; transition-delay:0.3s;}



#visual .b_btn{cursor:pointer; position:absolute; bottom: 35px; left:50%; margin-left: -530px; z-index:9999; width:6px; height:9px; background:url('/img/shop/btn-play.png') no-repeat center/100% auto; opacity: .8; transition:all .3s linear;}
#visual .b_btn:hover{opacity: 1;}

#visual .slick-dots{font-size:0; margin: 0 -6px; position: absolute; left: 50%; margin-left: -620px; bottom: 35px; z-index: 9999;}
#visual .slick-dots li{display:inline-block; margin: 0 6px; cursor:pointer; width: 9px; height: 9px; border-radius:50%; box-sizing:border-box; background:#dedede; border:2px solid #dedede;}
#visual .slick-dots li.slick-active{border-color:#4e4e4e; background:#fff;}
#visual .slick-dots li button{padding: 0; border:0; padding:0; outline:none; font-size:0;}


#visual .visual_in .roll.v103 .txt h2{color:#66429b;}
#visual .visual_in .roll.v103 .txt h2 span{color:#66429b;}
#visual .visual_in .roll.v103 .txt .viewBtn:after{background: #66429b;}
#visual .visual_in .roll.v103 .txt .viewBtn span{color:#66429b; border-color:#66429b;}
#visual .visual_in .roll.v103 .img:after{background: #7b559f; /* 그라데이션 지원하지 않는 브라우저 */ 
background: -webkit-linear-gradient(to right, #7b559f, #6e4fa1);
background: -moz-linear-gradient(to right, #7b559f, #6e4fa1);
background: -o-linear-gradient(to right, #7b559f, #6e4fa1);
background: linear-gradient(to right, #7b559f, #6e4fa1); /* 표준 */}
#visual .visual_in .roll.v103 .img img{left: -66px; top:94px;}

#visual .visual_in .roll.v05 .img:after{background: #b71422; /* 그라데이션 지원하지 않는 브라우저 */ 
background: -webkit-linear-gradient(145deg, #b71422, #ce1729);
background: -moz-linear-gradient(145deg, #b71422, #ce1729);
background: -o-linear-gradient(145deg, #b71422, #ce1729);
background: linear-gradient(145deg, #b71422, #ce1729); /* 표준 */}
#visual .visual_in .roll.v05 .img img{left: -66px; top:60px;}






/* PRODUCT 공통 */
.product_style{}
.product_style dl{position: relative;}
.product_style dl > a{display: block;}
.product_style dl dt{border-radius:20px; overflow: hidden; position: relative; margin-bottom:24px;}
.product_style dl dt img{height:auto; max-width:100%; width: 100%; background-color: #fff; background-repeat:no-repeat; background-position:center; background-size:cover; transition:all .3s linear;}
.product_style .basketBtn {display:none;}
.product_style dl a:hover dt img{transform:scale(1.1);}
.product_style dl dd{position: relative;}
.product_style dl dd .prdCate{display: block; font-size:1rem; letter-spacing: -0.3pt; color:#777777; font-weight: 400; line-height:120%; margin: 24px 0 6px;}
.product_style dl dd .prdName{display: block; font-size:20px; letter-spacing: -0.3pt; color:#222; font-weight: 700; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height:28px; height:60px;}
.product_style dl dd .prdName a {line-height:30px;}
.product_style dl dd .price{margin: 8px 0 0;}
.product_style dl dd .price li{padding: 0 0 6px 70px; letter-spacing:-1px; box-sizing:border-box; position: relative;}
.product_style dl dd .price li:first-child{font-size:1rem; line-height: 120%; color:#777777; letter-spacing: -0.3pt;}
.product_style dl dd .price li:last-child{font-size:17px; line-height: 120%; color:#222;}
.product_style dl dd .price li span{display:inline-block; line-height: 120%; position: absolute; left: 0; top:3px; width: 70px; font-weight: 400; font-size:1rem; letter-spacing:-0.3pt; color:#777777;}
.product_style dl dd .price li p{display:inline-block; line-height: 120%; font-size:17px; color:#888888; font-family: 'Outfit', sans-serif; margin-right: 3px;}
.product_style dl dd .price li strong{display:inline-block; line-height: 120%; font-size:20px; color:#222; font-family: 'Outfit', sans-serif; font-weight: 700; margin-right: 3px;}
.product_style dl > .basketBtn{position: absolute; right: 0; bottom: 28px; z-index: 9;}


.product_style dl > .basketBtn.basketBtn2{position: absolute; right: 30px; bottom: 185px; z-index: 9;}
.product_style dl > .basketBtn.basketBtn3{position: absolute; right: 15px; bottom: 185px; z-index: 9;}

.basketBtn{display:block; padding: 0; border:0; outline:none; cursor:pointer;  width:55px; height: 55px; font-size:0; border-radius:50%; position: relative;
background: #9aa5a9; /* 그라데이션 지원하지 않는 브라우저 */
background: -webkit-linear-gradient(145deg,#9aa5a9 0% 50%, #899396 50% 100% );
background: -moz-linear-gradient(145deg,#9aa5a9 0% 50%, #899396 50% 100% );
background: -o-linear-gradient(145deg,#9aa5a9 0% 50%, #899396 50% 100% );
background: linear-gradient(145deg,#9aa5a9 0% 50%, #899396 50% 100% ); /* 표준 */ transition:all .3s linear;}
.basketBtn:after{content:''; display: block; position: absolute; left: 0; top:0; width:100%; height: 100%; background:url('/home/img/basket_icon.png') no-repeat center/100% auto;}


/* BEST PRODUCT */
.best{}
.best .mTit{}
.best .mTit span{display: inline-block; position: absolute; left: 50%; margin-left: -104px; top:-32px; width:57px; height: 27px; background:url('/home/img/best_icon.png') no-repeat center/100% auto;}
.best .best_in{display:flex; flex-wrap: wrap; justify-content: space-between;}
.best .best_in .best_photo{width: calc(50% - 35px);}
.best .best_in .best_photo p{display: block; border-radius:30px; overflow: hidden;}
.best .best_in .best_photo p img{max-width:100%;}
.best .best_in .best_list{width: calc(50% - 15px);}
.best .product_style dl{margin: 0 0 30px;}
.best .product_style dl:last-child{margin: 0;}
.best .product_style dl > a{display:flex; flex-wrap: wrap; align-items: center; position: relative;}
.best .product_style dl dt{width: 180px;}
.best .product_style dl dt img{background-color: #f7f7f7;}
.best .product_style dl dd{width: calc(100% - 180px); box-sizing:border-box; padding: 0 0 0 45px;}
.best .product_style dl dd .prdCate{margin: 0 0 8px;}
.best .product_style dl dd .prdName{line-height:120% !important; height: auto !important; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; display: block;}
.best .product_style dl dd .price{margin: 20px 0 0;}




/* LSPEOPLE BRAND */
.lsPeople{}
.lsPeople .lsPeople_in{margin: 0 -15px; width: calc(100% + 30px); position: relative;}
.lsPeople .lsPeople_in:before{content:''; display: inline-block; width: 200%; height: 100%; background-color: #fff; position: absolute; top:0; left: -200%; z-index: 99;}
.lsPeople .lsPeople_in:after{content:''; display:block; clear:both;}
.lsPeople .lsPeople_in .slick-list{overflow: visible;}
.lsPeople .lsPeople_in .slick-slide{opacity: .8;}
.lsPeople .lsPeople_in .slick-slide.slick-active{opacity: 1;}
.lsPeople .lsPeople_in dl{padding:0 15px;}
.lsPeople .lsPeople_in dl a{display:block; position:relative;}
.lsPeople .lsPeople_in dl a dt{overflow:hidden; border-radius:30px;}
.lsPeople .lsPeople_in dl a dt img{max-width:100%; width:100%; background-repeat:no-repeat; background-position:center; background-size:cover; transition:all .3s linear;}
.lsPeople .lsPeople_in dl a:hover dt img{transform:scale(1.1);}
.lsPeople .lsPeople_in dl a dd{position:absolute; left:0; bottom:0; padding:40px; box-sizing:border-box; width:100%;}
.lsPeople .lsPeople_in dl a dd .mTit{margin: 0; color:#fff; text-align:left;}

.lsPeople .slick-arrow{padding: 0; background:none; border:0; outline:none; cursor:pointer; font-size:0; width:26px; height:26px; background-repeat:no-repeat; background-size:100% auto; background-position:center; position:absolute; top:-70px; z-index: 9999; opacity: .5; transition:all .3s linear;}
.lsPeople .slick-arrow:hover{opacity: 1;}
.lsPeople .slick-prev{background-image:url('/img/shop/arrow_p.png'); left:15px;}
.lsPeople .slick-next{background-image:url('/img/shop/arrow_n.png'); right:15px;}



/* NEW PRODUCT */
.new{background:#f1f1f1 url('/img/shop/new_product_bg.png') no-repeat center/cover;}
.new > div:after{content:''; display: block; clear:both;}
.new .new_tit{width: 316px; padding: 64px 0 0; float: left;}
.new .new_tit .mTit{text-align:left; display: inline-block; margin: 0 0 20px;}
.new .new_tit .mTit span{display:inline-block; position:absolute; left:77px; top:-22px; width: 43px; height: 43px; background:url('/img/shop/new_product.png') no-repeat center/100% auto;} 
.new .new_tit .moreBtn{top:auto; margin-top: 0; bottom: 7px; right:-30px;}
.new .new_cont{width: calc(100% - 316px); float: right;}
.new .new_in{width: calc(100% + 30px); margin: 0 -15px;}
.new .new_in dl{padding: 0 15px;}

.new .slick-arrow{padding: 0; background:none; border:0; outline:none; cursor:pointer; font-size:0; width:26px; height:26px; background-repeat:no-repeat; background-size:100% auto; background-position:center; position:absolute; left:-301px; top:260px; z-index: 9999; opacity: .5; transition:all .3s linear;}
.new .slick-arrow:hover{opacity: 1;}
.new .slick-prev{background-image:url('/img/shop/arrow_p.png');}
.new .slick-next{background-image:url('/img/shop/arrow_n.png'); margin-left: 86px;}



/* BANNER */
.banner{display:flex; flex-wrap: wrap;}
.banner .banner_in{width:50%; box-sizing:border-box;}
.banner .banner_in.drHelifa{background:url('/home/img/drHelifa_bg.jpg') no-repeat center/cover; padding: 120px 70px 120px 25px;}
.banner .banner_in.mineraline{background:url('/home/img/mineraline_bg.jpg') no-repeat center/cover; padding: 120px 25px 120px 70px;}
.banner .banner_in dl{width: 100%; position: relative; display:flex; align-items: center;}
.banner .banner_in.drHelifa dl{justify-content: flex-start; flex-direction: row-reverse;}
.banner .banner_in.mineraline dl{flex-direction: row;}
.banner .banner_in.drHelifa dl dt{text-align:right;}
.banner .banner_in.mineraline dl dt{}
.banner .banner_in dl dt .mTit.ko{color:#fff; margin: 0 0 14px;}
.banner .banner_in.drHelifa dl dt .mTit.ko{text-align:right;}
.banner .banner_in.mineraline dl dt .mTit.ko{text-align:left;}
.banner .banner_in dl dt .mTxt{color:rgba(255,255,255,.8);}
.banner .banner_in.drHelifa dl dd{margin: 0 80px 0 0;}
.banner .banner_in.mineraline dl dd{margin: 0 0 0 80px;}
.banner .banner_in dl dd img{max-width:100%;}


/* PRODUCT LIST */
.prdList{}
.prdList .prdList_in{}
.prdList .prdList_in:after{content:''; display:block; clear:both;}
.prdList .prdList_in dl{float: left; width: calc((100% - 90px)/4); margin:0 30px 60px 0;}
.prdList .prdList_in dl:nth-child(4n){margin-right: 0;}
.prdList .viewBtn{margin: 10px 0 0;}
.prdList .viewBtn:after{background:#00a29e;}
.prdList .viewBtn span{border-color:#00a29e; color:#00a29e; padding:0 72px;}
.prdList .product_style dl dt img{background-color: #f7f7f7;}




/* gray */
.grayscale {
  /* Firefox 10-34 */
  filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='saturate' values='0'/></filter></svg>#grayscale");

  /*
    Chrome 19+,
    Safari 6+,
    Safari 6+ iOS,
    Opera 15+
  */
  -webkit-filter: grayscale(1);

  /* Firefox 35+ */
  filter: grayscale(1);

  /* IE 6-9 */
  filter: gray;
}

.grayscale.grayscale-fade {
  transition: filter .5s;
}

/* Webkit hack until filter is unprefixed */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  .grayscale.grayscale-fade {
    -webkit-transition: -webkit-filter .5s;
    transition:         -webkit-filter .5s;
  }
}

.grayscale.grayscale-off,
.grayscale.grayscale-fade:hover {
  -webkit-filter: grayscale(0);
  filter:         grayscale(0);
}

/* Background element */
.grayscale.grayscale-replaced {
  -webkit-filter: none;
  filter:         none;
}

.grayscale.grayscale-replaced > svg {
  -webkit-transition: opacity .5s ease;
  transition:         opacity .5s ease;
  opacity: 1;
}

.grayscale.grayscale-replaced.grayscale-off > svg,
.grayscale.grayscale-replaced.grayscale-fade:hover > svg {
  opacity: 0;
}



/*******************************************************************************
    @media 1600px
*******************************************************************************/
@media all and (max-width:1700px){

/* BANNER */
.mTit.ko{font-size:26px;}
.banner .banner_in.drHelifa{padding: 120px 50px 120px 25px;}
.banner .banner_in.mineraline{padding: 120px 25px 120px 50px;}
.banner .banner_in dl dt .mTxt{word-break:keep-all;}
.banner .banner_in dl dt .mTxt br{display: none;}
.banner .banner_in.drHelifa dl dd{margin: 0 30px 0 0;}
.banner .banner_in.mineraline dl dd{margin: 0 0 0 30px;}



}

/*******************************************************************************
    @media ~1280px
*******************************************************************************/
@media all and (max-width:1280px){

/* visual */
#visual{height: 500px; margin:120px 0 0;}
#visual .visual_in .roll{height: 500px;}
#visual .visual_in .roll .txt{padding: 0 0 0 25px; box-sizing:border-box;} 
#visual .visual_in .roll .txt:after{width: 400px; height: 400px;}
#visual .visual_in .roll .txt h2{font-size:40px;}
#visual .visual_in .roll .txt h2 span{font-size:20px; padding: 10px 0 0;}
#visual .visual_in .roll .txt .mTxt{padding: 20px 60px 40px 0; box-sizing:border-box;}
#visual .visual_in .roll .txt .mTxt br{display: none;}
#visual .visual_in .roll .img{padding: 0 25px 0 0; box-sizing:border-box;}

#visual .b_btn{left:25px; margin-left: 60px;}
#visual .slick-dots{left: 25px; margin-left: 0;}

#visual .visual_in .roll.v01 .img img{left: -40px;}
#visual .visual_in .roll.v02 .img img{left: -40px;}
#visual .visual_in .roll.v03 .img img{left: -40px;}
#visual .visual_in .roll.v04 .img img{left: -40px;}
#visual .visual_in .roll.v05 .img img{left: -40px;}



/* PRODUCT 공통 */
.product_style dl > .basketBtn{bottom: 20px;}
.basketBtn{width:40px; height: 40px;}



/* BEST PRODUCT */
.best{}
.best .best_in .best_photo{width: 40%;}
.best .best_in .best_list{width: calc(60% - 40px);}
.best .product_style dl{margin: 0 0 10px;}



/* BANNER */
.mTit.ko{font-size:24px;}
.banner .banner_in{width:50%;}
.banner .banner_in.drHelifa{padding: 80px 30px 80px 25px;}
.banner .banner_in.mineraline{padding: 80px 25px 80px 30px;}
.banner .banner_in dl dt .mTit.ko{margin: 0 0 12px;}
.banner .banner_in.drHelifa dl dd{margin: 0 20px 0 0;}
.banner .banner_in.mineraline dl dd{margin: 0 0 0 20px;}



/* PRODUCT LIST */
.prdList{}
.prdList .prdList_in dl{width: calc((100% - 60px)/4); margin:0 20px 40px 0;}
.prdList .prdList_in dl:nth-child(4n){margin-right: 0;}


}

/*******************************************************************************
    @media  ~980px                body,html{font-size:14px; }     3%
*******************************************************************************/
@media all and (max-width:980px){

/* 공통 */
.mTit{font-size:26px; margin: 0 0 30px;}
.mTit small{font-size:18px;}
.mTxt{font-size:15px;}
.moreBtn{margin-top: -8px; width:10px; height:16px;}
.viewBtn{}
.viewBtn span{font-size:15px; padding: 0 30px; height: 44px; line-height: 42px;}

/* visual */
#visual{height: 450px; margin:106px 0 0;}
#visual .visual_in .roll{height: 450px;}
#visual .visual_in .roll .txt{padding: 0 0 0 3%;} 
#visual .visual_in .roll .txt:after{right: -60px; width: 300px; height: 300px;}
#visual .visual_in .roll .txt h2{font-size:32px;}
#visual .visual_in .roll .txt h2 span{font-size:18px; padding: 10px 0 0;}
#visual .visual_in .roll .txt .mTxt{padding: 15px 40px 20px 0;}
#visual .visual_in .roll .img{padding: 0 3% 0 0;}

#visual .b_btn{bottom: 20px; left:3%; margin-left: 60px; width:6px; height:9px;}
#visual .slick-dots{margin: 0 -4px; left: 3%; margin-left: 0; bottom: 20px;}
#visual .slick-dots li{margin: 0 4px;}

#visual .visual_in .roll.v01 .img img{left: -30px; top:50%; transform:translateY(-50%);}
#visual .visual_in .roll.v02 .img img{left: -30px; top:50%; transform:translateY(-50%);}
#visual .visual_in .roll.v03 .img img{left: -30px; top:50%; transform:translateY(-50%);}
#visual .visual_in .roll.v04 .img img{left: -30px; top:50%; transform:translateY(-50%);}
#visual .visual_in .roll.v05 .img img{left: -30px; top:50%; transform:translateY(-50%);}


/* PRODUCT 공통 */
.product_style{}
.product_style dl dd .prdCate{margin: 18px 0 6px;}
.product_style dl dd .prdName{font-size:18px;}
.product_style dl dd .price{margin: 6px 0 0;}
.product_style dl dd .price li{padding: 0 0 6px 60px; letter-spacing:-1px;}
.product_style dl dd .price li:last-child{font-size:15px;}
.product_style dl dd .price li span{top:2px; width: 60px;}
.product_style dl dd .price li p{font-size:15px;}
.product_style dl dd .price li strong{font-size:18px;}
.product_style dl > .basketBtn{bottom: 10px;}
.product_style dl > .basketBtn.basketBtn2{right: 20px; bottom: 160px;}
.product_style dl > .basketBtn.basketBtn3{right: 10px; bottom: 160px;}


/* BEST PRODUCT */
.best{}
.best .mTit span{margin-left: -92px; top:-24px; width:46px; height: 22px;}
.best .best_in{}
.best .best_in .best_list{width: calc(60% - 20px);}
.best .product_style dl{margin: 0 0 10px;}
.best .product_style dl dt{width: 130px;}
.best .product_style dl dd{width: calc(100% - 130px); padding: 0 0 0 15px;}
.best .product_style dl dd .prdCate{margin: 0 0 8px;}
.best .product_style dl dd .price{margin: 12px 0 0;}


/* LSPEOPLE BRAND */
.lsPeople{}
.lsPeople .lsPeople_in{margin: 0 -10px; width: calc(100% + 20px);}
.lsPeople .lsPeople_in dl{padding:0 10px;}
.lsPeople .lsPeople_in dl a dd{padding:30px;}
.lsPeople .slick-arrow{top:-57px;}
.lsPeople .slick-prev{left:10px;}
.lsPeople .slick-next{right:10px;}


/* NEW PRODUCT */
.new{}
.new .new_tit{width: 200px;}
.new .new_tit .mTit{margin: 0 0 15px;}
.new .new_tit .mTit span{left:67px; top:-20px; width: 38px; height: 38px;} 
.new .new_tit .moreBtn{bottom: 7px; right:-20px;}
.new .new_cont{width: calc(100% - 200px);}
.new .new_in{width: calc(100% + 20px); margin: 0 -10px;}
.new .new_in dl{padding: 0 10px;}
.new .slick-arrow{width:26px; height:26px; left:-190px; top:240px;}
.new .slick-next{margin-left: 70px;}



/* PRODUCT LIST */
.prdList{}
.prdList .prdList_in dl{width: calc((100% - 40px)/3); margin:0 20px 40px 0;}
.prdList .prdList_in dl:nth-child(4n){margin-right: 20px;}
.prdList .prdList_in dl:nth-child(3n){margin-right: 0;}
.prdList .viewBtn span{padding:0 50px;}


/* BANNER */
.mTit.ko{font-size:18px;}
.banner .banner_in{width:50%;}
.banner .banner_in.drHelifa{padding: 60px 3% 60px 3%;}
.banner .banner_in.mineraline{padding: 60px 3% 60px 3%;}
.banner .banner_in dl dt .mTit.ko{margin: 0 0 10px; word-break:keep-all;}
.banner .banner_in dl dt .mTit.ko br{display:none;}
.banner .banner_in.drHelifa dl dd{margin: 0 10px 0 0;}
.banner .banner_in.mineraline dl dd{margin: 0 0 0 10px;}

}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){


/* 공통 */
.mTit{font-size:24px; margin: 0 0 20px;}
.mTit small{font-size:16px; margin-left: 8px;}

/* visual */
#visual{height: auto; margin:96px 0 0;}
#visual .visual_in .roll{height: auto; display:block;}
#visual .visual_in .roll .txt{width: 100%; padding: 30px 3% 60px; text-align:center;} 
#visual .visual_in .roll .txt:after{right: auto; left:0; bottom: -120px; width: 240px; height: 240px;}
#visual .visual_in .roll .txt h2{font-size:28px; margin: 0 0 15px;}
#visual .visual_in .roll .txt h2 span{font-size:13px; padding: 10px 0 0;}
#visual .visual_in .roll .txt .mTxt{display: none;}
#visual .visual_in .roll .img{width: 100%; padding: 0 3%; position: relative;}
#visual .visual_in .roll .img img{position: relative;}

#visual .b_btn{bottom: auto; top:15px; left:auto; right:3%; margin-left: 0; width:6px; height:9px;}
#visual .slick-dots{bottom: auto; top:15px; left:auto; right:3%; margin-right: 15px;}
#visual .slick-dots li{margin: 0 4px;}

#visual .visual_in .roll.v01 .img img{left: auto; top:-30px; transform:translateY(0);}
#visual .visual_in .roll.v02 .img img{left: auto; top:-30px; transform:translateY(0);}
#visual .visual_in .roll.v03 .img img{left: auto; top:-30px; transform:translateY(0);}
#visual .visual_in .roll.v04 .img img{left: auto; top:-30px; transform:translateY(0);}
#visual .visual_in .roll.v05 .img img{left: auto; top:-30px; transform:translateY(0);}



/* PRODUCT 공통 */
.product_style{}
.product_style dl dt{border-radius:10px;}
.product_style dl dd .prdCate{margin: 15px 0 6px;}
.product_style dl dd .prdName{font-size:16px;}
.product_style dl dd .price li{padding: 0 0 4px 55px;}
.product_style dl dd .price li:last-child{font-size:14px;}
.product_style dl dd .price li p{font-size:14px;}
.product_style dl dd .price li span{width: 55px;}
.product_style dl dd .price li strong{font-size:16px;}
.product_style dl > .basketBtn{bottom: 5px;}
.product_style dl > .basketBtn.basketBtn2{right: 10px; bottom: 140px;}
.product_style dl > .basketBtn.basketBtn3{right: 10px; bottom: 145px;}
.basketBtn{width:30px; height: 30px;}



/* BEST PRODUCT */
.best{}
.best .mTit span{margin-left: -82px; top:-19px; width:40px; height: 19px;}
.best .best_in{}
.best .best_in .best_photo{width: 100%; margin: 0 0 20px;}
.best .best_in .best_photo p{border-radius:20px;}
.best .best_in .best_photo p img{width: 100%;}
.best .best_in .best_list{width: 100%;}
.best .product_style dl dt{width: 110px;}
.best .product_style dl dd{width: calc(100% - 110px); padding: 0 0 0 10px;}
.best .product_style dl dd .prdCate{margin: 0 0 6px;}
.best .product_style dl dd .price{margin: 10px 0 0;}


/* LSPEOPLE BRAND */
.lsPeople{}
.lsPeople .lsPeople_in dl a dt{border-radius:20px;}
.lsPeople .lsPeople_in dl a dd{padding:20px;}
.lsPeople .slick-arrow{width:20px; height:20px; top:-44px;}


/* NEW PRODUCT */
.new{background:#f1f1f1 url('/img/shop/new_product_bg_m.png') no-repeat center/cover;}
.new .new_tit{width: 100%; padding: 0 0 0; float: left; text-align:center;}
.new .new_tit .mTit{margin: 0 0 15px; text-align:center;}
.new .new_tit .mTit br{display: none;}
.new .new_tit .mTit span{display:none;} 
.new .new_tit .mTxt{display: none;}
.new .new_tit .moreBtn{bottom: 5px;}
.new .new_cont{width:100%; float: left;}
.new .new_in{width: calc(100% + 10px); margin: 0 -5px;}
.new .new_in dl{padding: 0 5px;}
.new .slick-arrow{width:20px; height:20px; left:auto; top:-40px;}
.new .slick-prev{margin-left: 0; left: 10px;} 
.new .slick-next{margin-left: 0; right: 10px;}


/* PRODUCT LIST */
.prdList{}
.prdList .prdList_in dl{width: calc((100% - 20px)/2); margin:0 20px 40px 0;}
.prdList .prdList_in dl:nth-child(4n){margin-right: 20px;}
.prdList .prdList_in dl:nth-child(3n){margin-right: 20px;}
.prdList .prdList_in dl:nth-child(2n){margin-right: 0;}


/* BANNER */
.mTit.ko{font-size:16px;}
.banner .banner_in{width:100%;}
.banner .banner_in.drHelifa{padding: 40px 3% 40px 3%; background:url('/home/img/drHelifa_bg_m.jpg') no-repeat center/cover;}
.banner .banner_in.mineraline{padding: 40px 3% 40px 3%; background:url('/home/img/mineraline_bg_m.jpg') no-repeat center/cover;}


}
/*******************************************************************************
    @media ~480px                body,html{font-size:13px; }
*******************************************************************************/
@media all and (max-width:480px){

/* 공통 */
.mTit{font-size:20px;}
.mTit small{font-size:15px; margin-left: 6px;}
.mTxt{font-size:13px;}
.moreBtn{margin-top: -6px; width:7px; height:12px;}
.viewBtn span{font-size:14px; padding: 0 25px; height: 40px; line-height: 38px;}



/* PRODUCT 공통 */
.product_style{}
.product_style dl dd .prdCate{margin: 12px 0 6px;}
.product_style dl dd .prdName{font-size:14px;}
.product_style dl dd .price li{}
.product_style dl dd .price li:last-child{font-size:14px;}
.product_style dl dd .price li p{font-size:13px;}
.product_style dl dd .price li strong{font-size:14px;}
.product_style dl > .basketBtn.basketBtn2{bottom: 126px;}
.product_style dl > .basketBtn.basketBtn3{right: 5px; bottom: 126px;}


/* PRODUCT LIST */
.prdList{}
.prdList .prdList_in dl{width: calc((100% - 10px)/2); margin:0 10px 20px 0;}
.prdList .prdList_in dl:nth-child(4n){margin-right: 10px;}
.prdList .prdList_in dl:nth-child(3n){margin-right: 10px;}
.prdList .prdList_in dl:nth-child(2n){margin-right: 0;}


/* BEST PRODUCT */
.best{}
.best .mTit span{margin-left: -73px;}


/* LSPEOPLE BRAND */
.lsPeople{}
.lsPeople .lsPeople_in dl a dd{padding:15px;}
.lsPeople .slick-arrow{top:-42px;}


/* NEW PRODUCT */
.new .slick-arrow{top:-37px;}
}
/*******************************************************************************
    @media ~360px
*******************************************************************************/
@media all and (max-width:320px){




}