@charset "euc-kr";
@import url("common.css");

/* slick-slider 필수 css */
.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-list:focus{outline:none;}
.slick-list.dragging{cursor:pointer; cursor:hand;}
.slick-slider .slick-track,.slick-slider .slick-list{-webkit-transform:translate3d(0, 0, 0); -moz-transform:translate3d(0, 0, 0); -ms-transform:translate3d(0, 0, 0); -o-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0);}
.slick-track{position:relative; top:0; left:0; display:block;}
.slick-track:before,.slick-track:after{display:table; content:'';}
.slick-track:after{clear:both;}
.slick-loading .slick-track{visibility:hidden;}
.slick-slide{display:none; float:left; height:100%; min-height:1px; -webkit-transform: translate3d(0,0,0);}
[dir='rtl'] .slick-slide{float:right;}
.slick-slide img{display: block; margin:0 auto;}
.slick-slide.slick-loading img{display:none;}
.slick-slide.dragging img{pointer-events:none;}
.slick-initialized .slick-slide{display:block;}
.slick-loading .slick-slide{visibility:hidden;}
.slick-vertical .slick-slide{display:block;height:auto; border:1px solid transparent;}
.slick-arrow.slick-hidden{display:none;}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}
.slick-slide {
   -webkit-transform: translate3d(0,0,0);
}

#main_container {position:relative;}


/*메인비주얼*/
#visual,
#visual .mv-ul {position:relative}
#visual{width:100%; min-width:320px;}
#visual .mv-li {position:relative; width:100%; height:123vw;/*padding-top:70vw;*/ box-sizing:border-box;}

#visual .mv-li .img {position:absolute; top:0; left:0; width:100%;height:100%; }
#visual .mv-li .bg01 {background:url('/m/img/main/m_main_visual01.jpg') no-repeat center top /cover}
#visual .mv-li .bg02 {background:url('/m/img/main/m_main_visual02.jpg') no-repeat center top /cover}
#visual .mv-li .bg03 {background:url('/m/img/main/m_main_visual03.jpg') no-repeat center top /cover}/* 
#visual .mv-li .bg04 {background:url('/m/img/main/m_main_visual04_1.jpg') no-repeat center top /cover}
#visual .mv-li .bg05 {background:url('/m/img/main/m_main_visual05_1.jpg') no-repeat center top /cover} */
#visual .mv-li .inner{text-align:center;}
#visual .mv-li01 .inner{margin-top:/* 73% */ 15%;}
#visual .mv-li02 .inner{margin-top:67%;}
#visual .mv-li03 .inner{margin-top:67%;}
#visual .mv-li .txt {position:relative; z-index:1;}

#visual .mv-li .txt p {font-size:34px; color:#322121; font-weight:800; line-height:1.3; text-align:center; letter-spacing:-0.25px; font-family:'Nanum Myeongjo', serif;}
#visual .mv-li .txt p em,
#visual .mv-li .txt p span {position:relative; display:inline-block; vertical-align:top; color:#ff4611; line-height:1.3;}
#visual .mv-li .txt p span:before {position:absolute; display:block; width:10px; height:10px; top:-15px; left:50%; border-radius:50%; background:#ff4611; content:''; transform:translateX(-50%); -webkit-transform:translateX(-50%); -ms-transform:translateX(-50%); -moz-transform:translateX(-50%); -o-transform:translateX(-50%); }
#visual .mv-li .txt > span {display:block; font-family: 'Noto Sans KR', sans-serif; font-size:14px; font-weight:500; color:#84715a; line-height:18px; text-align:center; padding-top:10px;}
#visual .mv-li .txt > a {display:block; color:#84715a;font-size:16px; letter-spacing:-0.5px; width:185px; height:45px; line-height:43px; border:1px solid #b9ac96; text-align:center; border-radius:5px; margin:30px auto 0;}
#visual .mv-li .txt > a img {display:inline-block; vertical-align:middle; margin-left:12px; margin-top:-5px; transition:all 0.5s;}
#visual .mv-li .txt > a:hover img{margin-left:20px;}
#visual .mv-ul .slick-dots {position:absolute; width:100%; text-align:center; font-size:0; bottom:22px; z-index:444;}
#visual .mv-ul .slick-dots li {display:inline-block; vertical-align:top; margin-right:11px;}
#visual .mv-ul .slick-dots li:last-of-type {margin-right:0;}
#visual .mv-ul .slick-dots li button {display:block; width:12px; height:12px; background-color:#b9aea0; transition:width 0.5s; text-indent:-9999px; border:none; box-shadow:none;}
#visual .mv-ul .slick-dots li button:focus {outline:none;}
#visual .mv-ul .slick-dots li.slick-active button {width:60px; height:1px; margin-top:5px;}
 
/*메인컨텐츠*/
#main_contents{position:relative; width:100%; min-width:320px;}
.con_pd{padding:75px 0 45px;}

/*product sale*/
#product{position:relative;}
.before_bg:before{content:"";display:block; width:124px; height:48px; background:url("/m/img/main/before_bg.png") no-repeat;position:absolute; left:50%; top:0;
transform:translateX(-50%);
-moz-transform:translateX(-50%);
-webkit-transform:translateX(-50%);
-o-transform:translateX(-50%);
-ms-transform:translateX(-50%);
}
#product .tit{text-align:center;}
#product .tit > h2{margin-bottom:40px; color:#222; font-weight:700; font-size: 36px; line-height: 1;}
#product .tit > h2 > strong{font-family: 'Kanit', sans-serif;font-weight:900; font-size:48px; }

#product ul{width:100%;position:relative;}
#product ul li{width: calc((100% - 0.53191489362%) / 2); float:left; position:relative; text-align:center; border:1px solid #ebebeb; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; margin-bottom:2.53191489362%}
#product ul li:nth-child(odd){margin-right:0.53191489362%;}
#product ul li .img{height:0; padding-top:103.7%;}
#product ul li img{width:100%; position:absolute;left:0; top:0;}
#product ul li a{display:block;}
#product ul li .txt{width:100%; padding:6px 0 22px; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;}
#product ul li .txt > span.orange{display:inline-block; vertical-align:top; line-height:30px; width:30px; height:30px; border-radius:50%; background-color:#ff4611; color:#fff; font-size:9px; font-weight:500;}
#product ul li .txt > .tit{height:45px; font-size:13px; line-height:18px;color:#333; font-weight:500;}
#product ul li .txt > .price .no_sale{font-size:11px; color:#888; font-weight:700; margin-right:15px;text-decoration: line-through;}
#product ul li .txt > .price .sale{color:#d0111b;font-weight:700;}
#product .more{position:absolute; right:0; top:30px;}
#product .more > a{display:inline-block; width:100%; height:100%;}
#product .more span{display:block; margin-bottom:1px; border-radius:2px; float:left; width:8px; height:8px;}
#product .more span:nth-child(odd){margin-right:1px;}
#product .more span.b_l{clear:both;}
#product .sale_wrap .tit h2 > strong{color:#ff4611;}
#product .sale_wrap .more span{background-color:#ff4611;}

/*banner*/
#banner{width:100%;min-width:320px; height:82vw;min-height:400px; padding-top:12vw; box-sizing:border-box; position:relative; background:url("/m/img/main/main_banner_bg.jpg") no-repeat center/cover;}
#banner .banner_wrap{width:100%;}
#banner .txt{color:#fff;display:inline-block; padding-left:53%;}
#banner .txt dl{letter-spacing:-0.25px;}
#banner .txt dl dt{font-size:20px; font-weight:900; position:relative; padding-bottom:10px;}
#banner .txt dl dt:before{content:"";display:block; width:12px; height:12px; background-color:#fff; border-radius:50%; position:absolute;left:-84px; bottom:-6px;}
#banner .txt dl dt:after{content:"";display:block; width:260px; height:1px; background-color:#fff; opacity:0.3;position:absolute; right:0; bottom:0}
#banner .txt dl dt > span{font-size:40px;}
#banner .txt dl dd{ margin-top:15px;font-weight:400; font-size:12px;}
#banner .circle{position: relative; top: 6vw; left: 50%; display: inline-block;
transform: translateX(-50%);
-webkit-transform:translateX(-50%);
-moz-transform:translateX(-50%);
-o-transform:translateX(-50%);
-ms-transform:translateX(-50%);
}
#banner .circle ul{}
#banner .circle ul li{float:left; width:144px; height:144px; border-radius:50%; border:5px solid rgba(255,255,255,0.3); text-align:center; position:relative;}
#banner .circle ul li:first-child{margin-right:50px;}
#banner .circle ul li:first-child:after{content:"";display:block; width:50px; height:1px; background-color:rgba(255,255,255,0.3); position:absolute;top:50%; left:149px;
transform:translateY(-50%);
-webkit-transform:translateY(-50%);
-moz-transform:translateY(-50%);
-o-transform:translateY(-50%);
-ms-transform:translateY(-50%);
}
#banner .circle ul li > a{display:block; width:100%; height:100%;}
#banner .circle ul li div{position:relative; top:50%;
transform:translateY(-50%);
-webkit-transform:translateY(-50%);
-moz-transform:translateY(-50%);
-o-transform:translateY(-50%);
-ms-transform:translateY(-50%);
}
#banner .circle ul li p{color:#fff; font-size:24px; font-weight:500;}

#product .sale_wrap .product_btn{margin-top:50px;} 
#product .sale_wrap .product_btn a{display:block; position:relative; margin:0 auto;width:300px; height:54px; line-height:54px; text-align:center; background-color:#555;color:#fff;font-size:18px;}
#product .sale_wrap .product_btn a:after{content:"";display:block; width:33px; height:5px; background:url("/m/img/main/icon_arr02.png") no-repeat; opacity:0.5; position:absolute; right:62px; top:50%;
transform:translateY(-50%);
-webkit-transform:translateY(-50%);
-moz-transform:translateY(-50%);
-o-transform:translateY(-50%);
-ms-transform:translateY(-50%);
}

/*product new*/
#product .new_wrap .tit h2 > strong{color:#39b54a;}
#product .new_wrap .more span{background-color:#39b54a;}
#product ul li .txt > span.green{display:inline-block; vertical-align:top; line-height:30px; width:30px; height:30px; border-radius:50%; background-color:#39b54a; color:#fff; font-size:9px; font-weight:500;}
#product .new_wrap .product_btn{margin-top:50px;} 
#product .new_wrap .product_btn a{display:block; position:relative; margin:0 auto;width:300px; height:54px; line-height:54px; text-align:center; background-color:#555;color:#fff;font-size:18px;} 
#product .new_wrap .product_btn a:after{content:"";display:block; width:33px; height:5px; background:url("/m/img/main/icon_arr02.png") no-repeat; opacity:0.5; position:absolute; right:62px; top:50%;
transform:translateY(-50%);
-webkit-transform:translateY(-50%);
-moz-transform:translateY(-50%);
-o-transform:translateY(-50%);
-ms-transform:translateY(-50%);
}



/*******************************************************************************
	@media
*******************************************************************************/
@media all and (max-width:1888px) {
.inner1880{padding:0 16px;}
#product .more{position:absolute; right:16px; top:30px;}

}

@media all and (max-width:640px) {

}



/*******************************************************************************
	@media 461px~640px
*******************************************************************************/
@media all and (min-width:461px) and (max-width:640px) {


/* 메인 - 상품리스트 */


}


/*******************************************************************************
	@media 320px~ 460px
*******************************************************************************/
@media all and (max-width:460px) {
	#main_container h2 {font-size:22px;}
}

@media all and (max-width:420px) {
	#visual .mv-li02 .inner{margin-top:65%;}
	#visual .mv-li03 .inner{margin-top:65%;}
	#visual .mv-li .txt p {font-size:28px;}
	#visual .mv-li .txt > a {margin:12px auto 0;}
	#banner .circle ul li{width:124px; height:124px;}
	#banner .txt dl dd br{display:none;}


}