/* BASIC css start */
/* 섹션 공통 */
section{margin-bottom: 130px;}
.sec_inner{width:1400px; margin:0 auto}
section h2{text-align: center;font-family: 'Lora', serif; color: #454545; font-size: 25px; font-weight: 400; margin-bottom: 10px;}
section p.tit{ text-align: center;font-family: 'Noto Sans KR', sans-serif; font-size: 13px; color: #aaa; margin-bottom: 50px; font-weight: 400;}


/* sec1 */
#sec1{position: relative;}
#sec1 .swiper{}
#sec1 .swiper ul{width: 100%;}
#sec1 .swiper ul li{width: 100%;}
#sec1 .swiper ul li a{display: block; width: 100%; position: relative;}
#sec1 .swiper ul li a img{width: 100%; }
#sec1 .swiper ul li a ul.text_cont{position: absolute; top: 20%; left: 50%;transition: left .5s, opacity .6s; transform: translateX(-700px);}
#sec1 .swiper ul li a ul.text_cont.white>*{color:#fff;}
#sec1 .swiper ul li a ul.text_cont li{position: relative; left: -700px; opacity: 0;font-family: 'Noto Sans KR', sans-serif; color: #000; line-height: 1.2;}
#sec1 .swiper ul li a ul.text_cont li:nth-child(1){ transition: left 1s, opacity 1.5s; font-size: 56px; font-weight: 400; font-family: 'Butler', serif;}
#sec1 .swiper ul li a ul.text_cont li:nth-child(2){ transition: left 1.4s, opacity 1.5s; font-size: 18px; margin-top: 22px; font-weight: 300; font-family: 'Pretendard', sans-serif;}
#sec1 .swiper ul li a ul.text_cont li:nth-child(3){ transition: left 1.7s, opacity 2s;  font-size: 18px; margin-top: 13px; font-weight: 300; font-family: 'Pretendard', sans-serif;}
#sec1 .swiper ul li a ul.text_cont li:nth-child(4){ transition: left 1.9s, opacity 2s;  font-size: 18px; margin-top: 55px; font-family: 'Butler', serif; width: 150px; heigh: 50px; border: solid 2px; line-height: 48px; text-align:center;}
#sec1 .swiper ul li a ul.text_cont.show li{left: 0; opacity: 1;}
#sec1 .swiper_btn_prev{ position:absolute; left:50% !important; top:50%; transform:translate(-900px,-50%); z-index:4; cursor:pointer}
#sec1 .swiper_btn_next{position:absolute; right:50%  !important; top:50%; transform:translate(900px,-50%);z-index:4; cursor:pointer}
#sec1 .swiper-pagination{transform:translateY(-11px)}
#sec1 .swiper-pagination-bullet{background-color:#fff !important; margin:0 6px;}
#sec1 .swiper-pagination-bullet-active{background-color:#fff !important;}
#sec1 .play_control{position: absolute; bottom: 10px; z-index: 90; left: 55%;transform: translateY(-10px);}
#sec1 .play_control a{display:block}
#sec1 .play_control a img{}
#sec1 .play_control.stop{}
#sec1 .play_control.stop img{visibility: hidden;}
#sec1 .play_control.stop::after{content: "▶"; display: block; color: #fff; font-size: 10px; position: absolute; top: 49%; left: 50%; transform: translate(-50%,-50%);}


/* sec2 */
#sec2{}
#sec2 .sec_inner{}
#sec2 .sec_inner h2{}
#sec2 .sec_inner p.tit{}
#sec2 .sec_inner .sec2_cont{position: relative;}
#sec2 .sec_inner .sec2_cont .swiper{width: 1310px !important; margin:0 auto}
#sec2 .sec_inner .sec2_cont .swiper>div{}
#sec2 .sec_inner .sec2_cont .swiper>div ul.swiper-slide{width: 1310px !important; height: 515px; display: grid;grid-template-columns: 1fr 1fr 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; column-gap: 15px; row-gap: 15px; }
#sec2 .sec_inner .sec2_cont .swiper>div ul.swiper-slide li{width: 250px; height: 250px; }
#sec2 .sec_inner .sec2_cont .swiper>div ul.swiper-slide li:first-child{grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 3; width: 515px; height: 515px;}
#sec2 .sec_inner .sec2_cont .swiper>div ul.swiper-slide li a{display: block; position: relative; width: 100%; height: 100%;}
#sec2 .sec_inner .sec2_cont .swiper>div ul.swiper-slide li a img{width: 100%; height: 100%; object-fit: cover;}
#sec2 .sec_inner .sec2_cont .swiper>div ul.swiper-slide li a .info{z-index: 10; position: absolute;transition: opacity .4s;  opacity: 0; background-color: rgba(255, 255, 255, 0.74); width: 90%;  left: 50%; bottom: 5%; transform: translateX(-50%); padding: 20px;}
#sec2 .sec_inner .sec2_cont .swiper>div ul.swiper-slide li a .info.fade{opacity: 1;}
#sec2 .sec_inner .sec2_cont .swiper>div ul.swiper-slide li a .info .prdprice{margin-bottom:0 !important}
#sec2 .sec_inner .sec2_cont .swiper>div ul.swiper-slide li:first-child .info .prdname{font-size:17px !important; margin-bottom:11px !important}
#sec2 .sec_inner .sec2_cont .swiper>div ul.swiper-slide li:first-child .info .prdprice .price{font-size:18px !important}
#sec2 .sec_inner .sec2_cont .swiper>div ul.swiper-slide li:first-child .info .prdprice strike{font-size:15px !important}
#sec2 .sec_inner .sec2_cont .swiper>div ul.swiper-slide li:first-child .info .prdprice .percent{font-size:22px !important}
#sec2 .swiper_btn_prev{ position:absolute; left:50% !important; top:50%; transform:translate(-800px,-50%); z-index:22; cursor:pointer}
#sec2 .swiper_btn_next{position:absolute; right:50%  !important; top:50%; transform:translate(800px,-50%);z-index:22; cursor:pointer}

/* menu */
#menu{margin-bottom:0px !important; background-color:#f4f4f4;}
#menu .sec_inner{padding:100px 0; }
#menu .sec_inner h2{ }
#menu .sec_inner .menu_cont{position: relative;}
#menu .sec_inner .menu_cont .swiper{}
#menu .sec_inner .menu_cont .swiper{}
#menu .sec_inner .menu_cont .swiper ul{ }
#menu .sec_inner .menu_cont .swiper ul li{ }
#menu .sec_inner .menu_cont .swiper ul li a{}
#menu .sec_inner .menu_cont .swiper ul li a img{}

/* 카테고리 */
.link_connect{    padding: 0 10px; }
.link_connect ul { *zoom:1; font-size: 0; }
.link_connect ul li { display: inline-block; width: calc(100% / 7); margin: 0 0 12px; text-align: center;}
.link_connect ul li a{ color: #000; font-size: .8rem; font-family: 'Noto Sans KR', sans-serif;}
.link_connect ul li a img{display: block; width: 90%; padding-bottom: 30px; margin: 0 auto;}


/* sec3 */
#sec3{background-color:#fafafa; margin-bottom:50px !important;}
#sec3 .sec_inner{padding:50px 0}
#sec3 h2{text-align:left !important; float:left; transform:translateY(40px); font-weight:400 !important;}
#sec3 p.tit{ text-align:left !important; font-family: 'Noto Sans KR', sans-serif; font-size: 13px; color: #aaa; margin-bottom: 0px; font-weight: 400; transform: translateY(80px) translateX(-136px) !important;}
#sec3 .countdown{font-family: 'Lora', serif;}
#sec3 .sec3_prd{position: relative; }
#sec3 .sec3_prd ul{display: flex;justify-content: space-between; width:1050px; float:right; }
#sec3 .sec3_prd ul li{display: inline-block;}
#sec3 .sec3_prd ul li .sec2_prd_info{}
#sec3 .sec3_prd ul li #count{position: absolute;top: 50px;  left: 0;color:#c3b099; padding:13px 0;display:none; margin-top:50px}
#sec3 .sec3_prd ul li #count strong{font-family: 'Lora', serif;font-size: 23px; font-weight: 400; letter-spacing:4px;margin:0 4px}
#sec3 .sec3_prd ul li:first-child #count{display:block}
#sec3 .sec3_prd ul li .tumb{position: relative;}
#sec3 .sec3_prd ul li .tumb span.percent_icon{position: absolute; top: 15px; left: 15px; display:inline-block; width:50px; height:50px; border-radius:50%; background-color:#b7a797; color:#fff; text-align:center; line-height:50px; font-family: 'Red Hat Display', sans-serif; font-size:15px; font-weight:600 }


/* sec4 */
#sec4{}

#sec4 .sec4_prd{}
#sec4 .sec4_prd .swiper{}
#sec4 .sec4_prd .swiper ul{}
#sec4 .sec4_prd .swiper ul li{width: 880px; height: 450px;}
#sec4 .sec4_prd .swiper ul li>a{display:block; position: relative; width: 100%; height: 100%;}
#sec4 .sec4_prd .swiper ul li>a img{}
#sec4 .sec4_prd .swiper ul li .txt_cont{position: absolute; left: 5%; top: 72%; transform: translate(0%,0%); z-index: 10;text-align: left; opacity: 0; margin-top: 60px;  transition: margin-top .7s, opacity 2s;}
#sec4 .sec4_prd .swiper ul li .txt_cont.show{opacity: 1;  margin-top: 0;}
#sec4 .sec4_prd .swiper ul li .txt_cont>*{text-align: left;font-family: 'Noto Sans KR', sans-serif; color: #222;}
#sec4 .sec4_prd .swiper ul li .txt_cont h3{ font-size: 40px; font-weight: 500; margin-bottom: 0px; }
#sec4 .sec4_prd .swiper ul li .txt_cont p{font-size: 18px; font-weight: 500; margin-bottom: 0px;}
#sec4 .sec4_prd .swiper ul li .txt_cont a{display: inline-block; border: 1px solid #000; height: 33px; width: 80px; line-height: 27px; text-align: center; font-weight: 600;font-size: 14px; transition: background-color .3s;}
#sec4 .sec4_prd .swiper ul li .txt_cont a:hover{background-color: rgba(255,255,255,.3);}
#sec4 .sec4_prd .swiper ul li .txt_cont.white>*{color: #fff;}
#sec4 .sec4_prd .swiper ul li .txt_cont.white>a{border-color: #fff;}
#sec4 .swiper_btn_prev{ position:absolute; left:50% !important; top:50%; transform:translate(-600px,-50%); z-index:22; cursor:pointer}
#sec4 .swiper_btn_next{position:absolute; right:50%  !important; top:50%; transform:translate(600px,-50%);z-index:22; cursor:pointer}


/* 중간배너*/
#mid_banner{width: 100%; height:210px;}
.mid_ban li {float:left; width:50%;}
.mid_ban li img{width:100%;}

/* sec5 테마 */
#sec5{width: 1400px; height:700px; margin: 0 auto;}
#sec5 .sec5_ban{width: 850px; position: absolute; left: 0;}
#sec5 .sec_inner{width: 1400px;  height:550px;}
#sec5 h2{text-align:left !important; font-family: 'Noto Serif KR', serif; color: #; font-size: 40px;  font-weight: 500;  padding-top: 5px;}
#sec5 p.tit{text-align:left !important; padding-top: 25px; margin-bottom: 30px !important;font-family: 'Pretendard', sans-serif; line-height: 1.6; color: #; font-size: 15px;font-weight: 500;}
#sec5 .sec5_prd{width: 800px; position: relative; float:right;}
#sec5 .sec5_prd .prd_sec{float: right;  height: 100%; border-top:1px solid #ebebeb; padding-top:20px;}
#sec5 .sec5_prd .prd_sec ul{height: 100%; width:100%; }
#sec5 .sec5_prd .prd_sec ul>li{width: 50% !important; padding:10px;}
#sec5 .sec5_prd .prd_sec ul>li:first-child{margin-bottom:0px}
#sec5 .sec5_prd .prd_sec ul>li .tumb{float: left; height:150px; width: 150px;}
#sec5 .sec5_prd .prd_sec ul>li .tumb a{display: block;width: 100%; height: 100%;}
#sec5 .sec5_prd .prd_sec ul>li .tumb a img{width: 100%; height: 100%; object-fit: cover;}
#sec5 .sec5_prd .prd_sec ul>li .info{float: left; height: 100%; width: 230px; background-color: #fff;padding:0 30px;display:flex; justify-content:center; flex-direction:column; border:0px solid #ebebeb}
#sec5 .sec5_prd .prd_sec ul>li .info p{margin:6px 0}
#sec5 .sec5_prd .prd_sec ul>li .info .prdname{border-bottom:1px solid #ebebeb; font-size:15px; padding-bottom:15px; }
#sec5 .sec5_prd .prd_sec ul>li .info .prdetc{font-size:15px}
#sec5 .sec5_prd .prd_sec ul>li .info .prdprice{margin-top:16px}
#sec5 .sec5_prd .prd_sec ul>li .info .prdprice span{font-size:18px}
#sec5 .sec5_prd .prd_sec ul>li .info .prdprice .price{}
#sec5 .sec5_prd .prd_sec ul>li .info .prdprice strike{font-size:16px}


/* sec6 */
#sec6{ }
#sec6 .sec_inner{ }
#sec6 .sec_inner h2{}
#sec6 .sec_inner .sec6_cate{}
#sec6 .sec_inner .sec6_cate ul{display:flex}
#sec6 .sec_inner .sec6_cate ul li{width:calc(100% / 5); border:1px solid #f0f0f0; border-bottom:1px solid #cccccc}
#sec6 .sec_inner .sec6_cate ul li:not(:last-child){border-right:none}
#sec6 .sec_inner .sec6_cate ul li.on{border-top:1px solid #222 !important; border-right:1px solid #222 !important; border-left:1px solid #222 !important; border-bottom:none !important }
#sec6 .sec_inner .sec6_cate ul li a{display:block; width:100%; text-align:center; font-family: 'Noto Sans KR', sans-serif; color:#666; font-size: 15px; font-weight: 400; letter-spacing: -.3px;transition: color .4s, border-color .3s, font-weight .3s; display:inline-block; padding: 14px 0;}
#sec6 .sec_inner .sec6_cate ul li.on>a{ color: #000 !important; }
#sec6 .sec6_prd{}
#sec6 .sec6_prd>div{display: none; position:relative;padding-top: 65px;}
#sec6 .sec6_prd>div ul{display:flex; flex-wrap:wrap}
#sec6 .sec6_prd>div.show{display: block;}

/* 협찬 */
#spon{width: 100%; height:550px;}
#spon .spon_ban{width: 550px; position: absolute;}
#spon .spon_ban img{width: 100%;}
#spon .sec_inner{width: 1400px;  height:550px;}
#spon h2{text-align:left !important; font-family: 'Pretendard',sans-serif; color: #111111; font-size: 32px; font-weight: 500;  padding-top: 35px;}
#spon p.tit{text-align:left !important; padding-top: 8px; margin-bottom: 30px !important; font-family: 'Pretendard', sans-serif; line-height: 1.6; color: #; font-size: 15px; font-weight: 500;}
#spon .spon_prd{width: 800px; position: relative; float:right;}
#spon .spon_prd .prd_sec{float: right;  height: 100%; border-top:1px solid #ebebeb; padding-top:20px; border-bottom:1px solid #ebebeb; padding-bottom:20px;}
#spon .spon_prd .prd_sec ul{height: 100%; width:100%; }
#spon .spon_prd .prd_sec ul>li{width: 50% !important; padding:10px;}
#spon .spon_prd .prd_sec ul>li:first-child{margin-bottom:0px}
#spon .spon_prd .prd_sec ul>li .tumb{float: left; height:150px; width: 150px;}
#spon .spon_prd .prd_sec ul>li .tumb a{display: block;width: 100%; height: 100%;}
#spon .spon_prd .prd_sec ul>li .tumb a img{width: 100%; height: 100%; object-fit: cover;}
#spon .spon_prd .prd_sec ul>li .info{float: left; height: 100%; width: 230px; background-color: #fff;padding:0 30px;display:flex; justify-content:center; flex-direction:column; border:0px solid #ebebeb}
#spon .spon_prd .prd_sec ul>li .info p{margin:6px 0}
#spon .spon_prd .prd_sec ul>li .info .prdname{border-bottom:1px solid #ebebeb; font-size:15px; padding-bottom:15px; }
#spon .spon_prd .prd_sec ul>li .info .prdetc{font-size:15px}
#spon .spon_prd .prd_sec ul>li .info .prdprice{margin-top:16px}
#spon .spon_prd .prd_sec ul>li .info .prdprice span{font-size:18px}
#spon .spon_prd .prd_sec ul>li .info .prdprice .price{}
#spon .spon_prd .prd_sec ul>li .info .prdprice strike{font-size:16px}

/* sec7 */
#sec7{background-color:#fafafa;  margin-bottom:0px !important;}
#sec7 .sec_inner{padding:100px 0}


#sec7 .sec_inner .rev_sec{position:relative; }
#sec7 .sec_inner .rev_sec .swiper{padding-bottom: 70px;}
#sec7 .sec_inner .rev_sec .swiper ul{width: 100%;}
#sec7 .sec_inner .rev_sec .swiper ul li{ height: 520px; }
#sec7 .sec_inner .rev_sec .swiper ul li .rv_thumb{width: 100%; height: 520px;}
#sec7 .sec_inner .rev_sec .swiper ul li .rv_thumb a{display: block; width: 100%; height: 100%;}
#sec7 .sec_inner .rev_sec .swiper ul li .rv_thumb a img{width: 100%; height: 100%; object-fit: cover;}
#sec7 .sec_inner .rev_sec .swiper ul li .rv_txt{height: 185px; padding: 30px; background-color:#fff}
#sec7 .sec_inner .rev_sec .swiper ul li .rv_txt .prd_name{color: #242424; font-size: 16px;font-family: 'Noto Sans KR', sans-serif; font-weight: 600; padding-bottom: 10px; letter-spacing: -.7px; }
#sec7 .sec_inner .rev_sec .swiper ul li .rv_txt .rv_cont{}
#sec7 .sec_inner .rev_sec .swiper ul li .rv_txt .rv_cont p{line-height:1.5;font-size: 14px; color: #999999; font-family: 'Noto Sans KR', sans-serif; font-weight: 400; letter-spacing: -.7px;}
#sec7 .sec_inner .rev_sec .swiper ul li .rv_txt .rv_score{margin-top: 14px;}
#sec7 .sec_inner .rev_sec .swiper ul li .rv_txt .rv_score>span{}
#sec7 .sec_inner .rev_sec .swiper ul li .rv_txt .rv_score .heart{}
#sec7 .sec_inner .rev_sec .swiper ul li .rv_txt .rv_score .heart img{display: inline-block; transform: translateY(-2px); margin-right:4px}
#sec7 .sec_inner .rev_sec .swiper ul li .rv_txt .rv_score .score{color: #242424; font-size: 17px; font-family: 'Red Hat Display', sans-serif;}
#sec7 .swiper-pagination-bullet{background-color:#000 !important; margin:0 8px;}
#sec7 .swiper_btn_prev{ position:absolute; left:50% !important; top:40%; transform:translate(-800px,-50%); z-index:4; cursor:pointer}
#sec7 .swiper_btn_next{position:absolute; right:50%  !important; top:40%; transform:translate(800px,-50%);z-index:4; cursor:pointer}



/* sec8 */
#sec8{margin-top: 130px;}
#sec8 .sec_inner{}
#sec8 .sec_inner h2{margin-bottom: 40px !important;}
#sec8 .sec_inner .sec8_cont{}
/* BASIC css end */