@charset "utf-8";

/* 공통속성 */
.container{width: 1440px; margin: 0 auto; height: inherit}
.left{float: left}
.right{float: right}
.light{font-weight: 300}
h1{position: absolute; left: 50%; transform: translateX(-50%); margin-top: 26px}
h2{margin-top: 100px; color: #333; font-size: 21px; font-weight: 500; text-align: center}

/* 레이아웃 */
#wrap{width: 100%; height: 4096px; /* background: url(../images/home_1920.jpg) no-repeat */}
#header{position: relative; top: 0; width: 100%; height: 80px; z-index: 2}
#contents{width: 100%; margin-top: -80px}
#main_slide{width: 100%; height: 640px}
#best{width: 100%; height: 385px}
#gift{width: 100%; height: 540px}
#brand{width: 100%; height: 812px}
#recommend{width: 100%; height: 435px; margin-top: 100px; background: #f7f5f3}
#insta{width: 100%; height: 350px}
#footer{width: 100%; height: 300px; margin-top: 100px; border-top: 1px solid #ccc}


/* header */
.menu{float: left; margin: 31px 0 0 35px}
.menu>ul>li{position: relative; float: left; padding: 0 15px 27px 15px}
.menu>ul>li>a{position: relative; display: block; letter-spacing: 0;}
.menu>ul>li:hover>a{border-bottom: 1px solid #222;}
.menu ul.sub{display: none; position: absolute; top: 50px; left: 0; width: 100%; height: 180px; padding-top: 20px}
.menu ul.sub li{margin-bottom: 10px}
.menu ul.sub li a{display: block; width: 100%; font-size: 15px; color: #888; text-align: center; letter-spacing: 0.5px;}
.menu ul.sub li:hover a{color: #222}
.menu_bg{width: 100%; position: absolute; top: 81px; left: 0; background: url(../images/menu_bg.png) no-repeat right 10px rgba(255,255,255,.9); height: 200px}
.menu_bg p{text-align: center;}
.menu_bg .t_txt{margin-top: 70px; color: rgba(68,35,35,.6); font-size: 28px; font-weight: 300}
.menu_bg .s_txt{margin-top: 10px; color: #bbb; letter-spacing: 0}

.r_menu{position: relative; float: right; margin: 27px 50px 0 0; z-index: 3}
.r_menu li{float: left; margin-left: 30px}

/* header clone */
#header-clone{position: fixed; top: -500px; width: 100%; height: 60px; transition: top 0.3s; background: rgba(255,255,255,.92); border-bottom: 1px solid #ccc; z-index: 99}
#header-clone.visible{top: 0;}
#header-clone h1{margin-top: 20px}
#header-clone h1 img{width: 130px}

#header-clone .menu{margin-top: 19px}
#header-clone .menu>ul>li{position: relative; float: left; padding: 0 15px 19px 15px}
#header-clone .menu ul.sub{display: none; position: absolute; top: 41px; left: 0; width: 100%; height: 180px; padding-top: 20px}
#header-clone .menu_bg{width: 100%; position: absolute; top: 61px; left: 0; background: url(../images/menu_bg.png) no-repeat right 10px rgba(255,255,255,1); height: 200px; box-shadow: 0 5px 5px rgba(92, 71, 51,.1);}
.menu_bg p{text-align: center;}

#header-clone .r_menu{margin-top: 18px}

/* main_slide */
.slide_1{width: 100%; height: 424px; padding-top: 214px; background: url(../images/main_1.jpg) no-repeat}
.slide_2{width: 100%; height: 424px; padding-top: 214px; background: url(../images/main_2.jpg) no-repeat}
.slide_3{width: 100%; height: 424px; padding-top: 214px; background: url(../images/main_3.jpg) no-repeat}
.slider a{display: block; width: 100%; height: 424px; }
.slider .main_txt{width: 1440px; margin: 0 auto;}
.slider .feature{display: inline-block; margin-bottom: 18px; padding: 5px 10px; color: #fff; font-size: 16px; font-weight: 500; letter-spacing: 0; background: rgba(66,35,33,.6)}
.slider .t_txt{color: #fff; font-size: 48px; font-weight: 600; line-height: 48px}
.slider .t_txt span{font-weight: 300}
.slider .s_txt{margin-top: 18px; color: #fff; font-size: 22px; letter-spacing: -0.5px; line-height: 32px}
.slider .hashtag{margin-top: 20px; color: #6A3823; font-size: 24px; font-weight: 600; letter-spacing: 0}

.slider .slide_2 .feature{background: rgba(188,49,75,.5)}
.slider .slide_2 .t_txt span{font-size: 30px; letter-spacing: 0}
.slider .slide_2 .hashtag{color: #bc314b}

.slider .slide_3 .feature{background: rgba(63,100,129,.8)}
.slider .slide_3 .t_txt{color: #422321}
.slider .slide_3 .s_txt{color: #333}
.slider .slide_3 .hashtag{color: #3F6481}

/* best */
#best h2{margin-bottom: 35px;}
.best_slide{position: relative; padding: 88px 0 0 110px}
.best_slide ul{/*width: 1204px; margin: 58px auto 0 auto;*/ overflow: hidden}
.best_slide ul li{float: left; width: 224px; margin-right: 110px}
.best_slide ul li:last-child{margin-right: 0}
.best_slide ul li img{width: 224px; height: 224px}

.best_txt p{text-align: center}
.best_txt .s_txt{color: #666; font-size: 13px; font-weight: 300; letter-spacing: 0}
.best_txt .t_txt{font-size: 15px}
.best_txt .price{color: #910707; font-size: 16px}
.best_txt .price span{color: #333; font-size: 15; text-decoration: line-through;}

.best_slide .prev{position: absolute; top: 120px; left: 0}
.best_slide .next{position: absolute; top: 120px; right: 0}

/* gift */
#gift h2{width: 100%; height: 222px; padding-top: 78px; color: #fff; background: url(../images/gift_h2_bg.jpg); background-attachment: fixed; background-size: cover}

.gift_con{width: 1440px; height: 400px; margin-top: -160px; background: url(../images/gift_bg.jpg) no-repeat}

.gift_con_left{float: left; width: 403px; height: 316px; padding: 84px 0 0 84px}
.gift_con_left .mon{width: 115px; padding-bottom: 12px; color: #422321; font-size: 38px; font-weight: 300; border-bottom: 1px solid #422321}
.gift_con_left .mon span{font-size: 22px}
.gift_con_left h3{margin-top: 12px; color: #888; font-size: 32px; font-weight: 300; line-height: 42px; letter-spacing: -2px;}
.gift_con_left .s_txt{margin-top: 64px; color: #666; font-size: 16px; font-weight: 300; letter-spacing: 0;}
.gift_con_left .s_txt span{font-weight: 500}
.gift_con_left h3 span{color: #422321; font-weight: 500}

.gift_con_right{position: relative; float: left; width: 953px; height: 400px}
.gift_con_right .cleanser{position: absolute; top: 179px; left: 130px}
.gift_con_right .water{position: absolute; top: 156px; right: 100px}
.gift_con_right dt{color: #333; letter-spacing: -0.5px}
.gift_con_right dd{margin-top: 12px; color: #666; font-size: 14px; letter-spacing: 0; line-height: 20px}
.gift_con_right dd.hashtag{margin-top: 8px; color: #6A3823; font-weight: 500}

/* brand */
#brand h2{height: 88px; margin-top: 120px; background: url(../images/brand_h2_bg.jpg) no-repeat center bottom;}
#brand p{margin: 18px 0 30px 0; color: #555; text-align: center;}
#brand video{display: block; width: 1080px; height: auto; margin: 0 auto}

/* recommend */
.re_left{float: left;}
.re_left h2{margin: 0; padding: 80px 0 0 0; text-align: left;}
.re_left .m_txt{margin: 14px 0 10px 0; color: #555; letter-spacing: -0.5px}
.re_left .s_txt{color: #666; font-size: 13px; letter-spacing: -0.5px}

.re_tab{margin-top: 36px}
.re_tab ul li{height: 36px; margin-bottom: 15px}
.re_tab ul li a{display: inline-block; width: auto; height: 36px; padding: 0 16px; color: #fff; font-size: 18px; letter-spacing: 0; line-height: 36px; text-align: center; background: rgba(68,35,35,.3); border-radius: 36px;}
.re_tab ul li a.on, .re_tab ul li a:hover{background: rgba(68,35,35,.7);}

.re_list{float: right; margin-top: 60px}
.re_list_1, .re_list_2, .re_list_3{position: relative; top: 0; left: 0}
.re_list ul li{float: left; width: 280px; margin-left: 19px}
.re_list img{width: 280px; height: 280px}
.re_list dl{text-align: center; width: 280px; margin-top: -16px}
.re_list dl dt{}
.re_list dl dd{float: left;}
.re_list dl dd.price{margin: 1px 10px 0 95px; font-size: 15px; text-decoration: line-through;}
.re_list dl dd.dc{color: #910707;}

/* insta */
#insta h2{letter-spacing: 0; margin-bottom: 55px}
#insta ul li{float: left; width: 270px; height: 270px; margin-right: 22px}
#insta ul li img{width: 270px; height: 270px}
#insta ul li:last-child{margin-right: 0}

/* top btn */
.top_btn{display: none; position: fixed; right: 70px; bottom: 70px; width: 42px; height: 43px; font-size: 13px; font-weight: 500; text-align: center; line-height: 80px; border: 1px solid #6A3823; border-radius: 50%; background: url(../images/top_btn_bg.png) no-repeat center 11px; cursor: pointer; z-index: 99}
.top_btn:hover{color: #fff; background: url(../images/top_btn_bg_on.png) no-repeat center 11px #6A3823;}

/* footer */
.foot_menu{float: left; width: 550px}
.foot_menu h2{margin: 40px 0 15px 0; text-align: left}
.foot_menu ul li a{display: block; margin-bottom: 3px; color: #666; font-size: 12px; letter-spacing: 0}

.cs{float: left; width: 550px}
.cs h3, .sns h3{margin: 40px 0 23px 0; color: #666; font-weight: 600; letter-spacing: 0;}
.cs ul li{color: #666; font-size: 12px; font-weight: 300; letter-spacing: 0; line-height: 18px}
.cs ul li.tel{margin-bottom: 8px; color: #666; font-size: 24px; font-weight: 300; letter-spacing: 0}
.cs ul li span{font-weight: 500;}

.sns{float: left;}
.sns ul li a{display: block; margin-bottom: 3px; color: #666; font-size: 12px; letter-spacing: 0}

.foot_bottom{width: 100%; margin-top: 35px; color: #888; font-size: 12px; letter-spacing: 0; line-height: 20px}