@charset "utf-8";

#footer{margin-top:0;}

#content .inr{max-width:1400px; width:96%; margin:0 auto;}
#content > div[class^="area_"]{margin-top:150px;}
#content h2.tit{margin-bottom:50px; font-size:35px; font-weight:400; color:#111; font-family:'GmarketSansMedium';}
#content h2.tit i{display:inline-block; margin-left:15px; font-size:18px; color:#555; font-weight:normal; font-family:'Pretendard Variable', Sans-serif;}

.img.mob{display:none !important;}

/* 비주얼 */
.area_visual{width:100%; overflow:hidden;}
.area_visual .swiper{overflow:visible; max-width:1400px; width:96%;}
.area_visual .mob{display:none !important;}
.area_visual .swiper-slide span{display:block; border-radius:30px; overflow:hidden;}
.area_visual .swiper-slide span img{width:100%;}
.area_visual .swiper-button-next, 
.area_visual .swiper-button-prev{margin-top:0; transform:translateY(-50%); width:80px; height:80px; border-radius:50%; background:#fff; box-shadow:0 0 30px rgba(20,49,52,0.2); transition:0.3s ease;}
.area_visual .swiper-button-next:hover, 
.area_visual .swiper-button-prev:hover{background:#118d9c; box-shadow:0 0 30px rgba(17,141,156,0.5);}
.area_visual .swiper-button-prev, 
.area_visual .swiper-rtl .swiper-button-next{left:-40px;}
.area_visual .swiper-button-next, 
.area_visual .swiper-rtl .swiper-button-prev{right:-40px;}
.area_visual .swiper-button-prev:after, 
.area_visual .swiper-button-next:after{font-size:26px; font-weight:600; color:#118d9c; transition:0.3s ease;}
.area_visual .swiper-button-prev:hover:after, 
.area_visual .swiper-button-next:hover:after{color:#fff;}
.area_visual .swiper-button-prev:after, 
.area_visual .swiper-rtl .swiper-button-next:after{margin-left:-4px;}
.area_visual .swiper-button-next:after, 
.area_visual .swiper-rtl .swiper-button-prev:after{margin-right:-4px;}
.area_visual .swiper-pagination{display:none;}


/* 베스트상품 */
.area_best .tit{text-align:center;}
.area_best .best_wrap{display:flex; justify-content:space-between;}

.area_best .swiper{width:47%;}
.area_best .swiper [data-shop-list="default"]{margin-left:0;}
.area_best .swiper [data-shop-list="default"] > li{padding-left:0; margin-bottom:0;}
.area_best .swiper [data-shop-list="default"] > li .img{padding-top:89%;}
.area_best .swiper [data-shop-list="default"] > li > a > i{display:block; margin-top:20px; font-size:16px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.area_best .swiper [data-shop-list="default"] > li > a > em{font-size:24px; font-weight:bold; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.area_best .swiper [data-shop-list="default"] > li > a .price i{font-size:26px;}
.area_best .swiper [data-shop-list="default"] > li > a .price i+i{font-size:20px;}
.area_best .swiper [data-shop-list="default"] > li *[data-shop-list="util"]{margin-top:calc(89% - 50px); right:15px;}
.swiper-pagination{left:auto !important; bottom:2.5% !important; right:0 !important; width:auto !important; font-size:0;}
.swiper-pagination-bullet{width:25px; height:10px; background:#ddd; border-radius:5px; opacity:1; transition:0.2s ease;}
.swiper-pagination-bullet:hover{background:#118d9c;}
.swiper-pagination-bullet-active{width:58px; background:#118d9c;}

.area_best .pr_list{padding-left:30px; width:53%; box-sizing:border-box;}
.area_best .pr_list [data-shop-list="default"] > li{width:50%; margin-bottom:30px;}
.area_best .pr_list [data-shop-list="default"] > li .img:before{content:''; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.7); z-index:1; opacity:0; transition:0.5s ease;}
.area_best .pr_list [data-shop-list="default"] > li:hover .img:before{opacity:0.5;}
.area_best .pr_list .pr_info{position:absolute; padding:0 15px; top:42px; box-sizing:border-box; width:100%; z-index:2;}
.area_best .pr_list .pr_info i{display:none; font-size:14px; color:#f5f5f5; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; width:100%;}
.area_best .pr_list [data-shop-list="default"] > li:hover .pr_info i{display:block;}
.area_best .pr_list .pr_info em{display:block; margin-top:4px; padding-bottom:8px; font-weight:400; letter-spacing:-0.5px; color:#fff; font-weight:500; font-size:18px; border-bottom:1px solid #fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.area_best .pr_list [data-shop-list="default"] > li > a .price{position:absolute; padding:15px; bottom:0; width:100%; box-sizing:border-box; z-index:2;}
.area_best .pr_list [data-shop-list="default"] > li > a .price i{color:#fff;}
.area_best .pr_list [data-shop-list="default"] > li > a .price i+i{color:rgba(255,255,255,0.7);}
.area_best .pr_list [data-shop-list="default"] > li > a .price:before{content:''; display:block; position:absolute; top:0; left:15px; width:calc(100% / 1 - 30px); height:1px; background:#fff;}
.area_best .pr_list [data-shop-list="default"] > li > a .price:after{content:'+'; display:block; position:absolute; top:50%; right:15px; transform:translateY(-50%); width:26px; height:26px; font-size:22px; font-weight:500; color:#118d9c; background:#fff; border-radius:50%; text-align:center; line-height:25px;}
.area_best .pr_list [data-shop-list="default"] > li *[data-shop-list="util"]{margin-top:calc(100% - 137px);}
.area_best .pr_list [data-shop-list="default"] > li *[data-shop-icon="icon"]{z-index:2;}


/* 인기상품 */
.area_main_prl01{padding:100px 0; background:#f5fafa;}
.area_main_prl01 [data-shop-list="default"] > li{margin-bottom:40px;}


/* 메인 공지사항 */
.area_notice{display:flex; padding-bottom:150px; justify-content:space-between;}
.area_notice .tit_wrap{position:relative; width:330px; padding:0 15px; background:#118d9c; border-radius:30px; box-shadow:10px 20px 50px 15px rgba(17,141,156,0.3); z-index:10;}
.area_notice .tit_wrap .box{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center; width:96%;}
.area_notice .tit_wrap .box img{display:block; margin:auto; width:60px;}
.area_notice .tit_wrap .box h2.tit{margin:30px 0 50px !important; color:#fff !important;}
.area_notice .tit_wrap .box h2.tit i{margin-top:18px; margin-left:0 !important; display:block !important; color:#fff !important;}
.area_notice .tit_wrap .box a{display:block; position:relative; margin:auto; padding:5px 18px; width:120px; background:#fff; color:#118d9c; font-size:18px; border-radius:25px; text-align:left; border:2px solid #fff; transition:0.3s ease;}
.area_notice .tit_wrap .box a:after{content:'+'; display:block; position:absolute; top:-6px; right:18px; font-size:30px; font-weight:500; color:#118d9c; transition:0.3s ease;}
.area_notice .tit_wrap .box a:hover{background:#118d9c; color:#fff;}
.area_notice .tit_wrap .box a:hover:after{color:#fff;}
.area_notice .swiper{margin:0; padding-bottom:60px; width:calc(100% / 1 - 440px);}
.area_notice .swiper ul li{background:#fff; border:1px solid #ddd; border-radius:30px; transition:0.3s ease;}
.area_notice .swiper ul li:hover{border-color:#118d9c;}
.area_notice .swiper ul li a{display:block; padding:50px 25px 40px; width:100%;}
.area_notice .swiper ul li a h2{position:relative; padding-top:20px; margin-bottom:35px; overflow:hidden; text-overflow:ellipsis; text-align:left; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; color:#222; font-size:20px; font-weight:500;}
.area_notice .swiper ul li a h2:before{content:''; display:block; position:absolute; top:0; left:0; width:30px; height:4px; background:#118d9c; border-radius:2px;}
.area_notice .swiper ul li a p{overflow:hidden; text-overflow:ellipsis; text-align:left; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; font-size:16px; color:#666;}
.area_notice .swiper ul li a i{display:block; position:relative; margin-top:60px; font-size:13px; color:#aaa; width:100%;}
.area_notice .swiper ul li a i:after{opacity:0; content:'+'; display:block; position:absolute; bottom:-31px; right:0px; font-size:30px; font-weight:500; color:#118d9c; transition:0.3s ease;}
.area_notice .swiper ul li:hover a i:after{opacity:1; bottom:-11px;}
.area_notice .swiper-scrollbar{background:#e8e8e8;}
.area_notice .swiper-horizontal>.swiper-scrollbar, 
.area_notice .swiper-scrollbar.swiper-scrollbar-horizontal{bottom:0; left:0; height:6px;}
.area_notice .swiper-scrollbar-drag{background:#118d9c;}






@media screen and (max-width:1500px){
    .area_visual .swiper-button-next, 
    .area_visual .swiper-button-prev{width:60px; height:60px;}
    .area_visual .swiper-button-prev:after, 
    .area_visual .swiper-button-next:after{font-size:21px;}
    .area_visual .swiper-button-prev, 
    .area_visual .swiper-rtl .swiper-button-next{left:15px;}
    .area_visual .swiper-button-next, 
    .area_visual .swiper-rtl .swiper-button-prev{right:15px;}
}


@media screen and (max-width:1400px){
    .area_notice .tit_wrap{width:280px;}
    .area_notice .swiper{width:calc(100% / 1 - 330px);}
}

@media screen and (max-width:1024px){
    .area_visual{margin-top:100px;}
    .area_visual .mob{display:block !important;}
    .area_visual .web{display:none !important;}
    
    #content > div[class^="area_"]{margin-top:110px;}
    #content h2.tit{margin-bottom:35px; font-size:28px;}
    #content h2.tit i{font-size:16px;}
    
    .area_best .best_wrap{display:block;}
    .area_best .swiper{width:55%;}
    .area_best .swiper [data-shop-list="default"] > li .img{padding-top:100%;}
    .area_best .swiper [data-shop-list="default"] > li > a > i{font-size:14px;}
    .area_best .swiper [data-shop-list="default"] > li > a > em{font-size:18px;}
    .area_best .swiper [data-shop-list="default"] > li > a > i{margin-top:15px;}
    .area_best .swiper [data-shop-list="default"] > li > a .price i{font-size:20px;}
    .area_best .swiper [data-shop-list="default"] > li > a .price i+i{font-size:16px;}
    .area_best .swiper [data-shop-list="default"] > li *[data-shop-list="util"]{margin-top:calc(100% - 50px);}
    .area_best .swiper-pagination{bottom:8px !important;}
    .area_best .pr_list{padding-left:0; margin:50px auto 0; width:80%;}
    .area_best .pr_list [data-shop-list="default"] > li{margin-bottom:20px;}
    .area_best .pr_list .pr_info i{font-size:13px;}
    .area_best .pr_list .pr_info em{padding-bottom:6px; font-size:15px;}
    .area_best .pr_list [data-shop-list="default"] > li *[data-shop-list="util"]{margin-top:calc(100% - 119px);}
    
    .area_main_prl01{padding:80px 0;}
    .area_main_prl01 [data-shop-list="default"] > li{width:calc(100% / 3);}
	.area_main_prl01 [data-shop-list="default"] > li:nth-child(4n+1){clear:none;}
	.area_main_prl01 [data-shop-list="default"] > li:nth-child(3n+1){clear:left;}
    
    .area_notice{padding-bottom:100px;}
    .area_notice .tit_wrap{box-shadow:5px 10px 22px rgba(17,141,156,0.3); width:250px;}
    .area_notice .tit_wrap .box img{width:40px;}
    .area_notice .tit_wrap .box h2.tit{margin:20px 0 30px !important;}
    .area_notice .tit_wrap .box h2.tit i{margin-top:5px;}
    .area_notice .tit_wrap .box a{padding:4px 15px; font-size:15px; width:100px;}
    .area_notice .tit_wrap .box a:after{right:10px; top:-5px; font-size:25px;}
    .area_notice .swiper{padding-bottom:40px; width:calc(100% / 1 - 280px);}
    .area_notice .swiper ul li a{padding:35px 20px 30px;}
    .area_notice .swiper ul li a h2{padding-top:15px; margin-bottom:20px; font-size:16px;}
    .area_notice .swiper ul li a p{font-size:14px;}
    .area_notice .swiper ul li a i{margin-top:40px;}
    
    
}

@media screen and (max-width:767px){
    #content > div[class^="area_"]{margin-top:80px;}
    #content h2.tit{margin-bottom:25px; font-size:22px;}
    #content h2.tit i{display:block; margin-left:0; margin-top:5px; font-size:15px;}
    
    .swiper-pagination-bullet{width:20px; height:8px;}
    .swiper-pagination-bullet-active{width:40px;}
    
    .area_visual{margin-top:88px;}
    .area_visual .swiper-slide span{border-radius:20px;}
    .area_visual .swiper-button-next, 
    .area_visual .swiper-button-prev{display:none;}
    .area_visual .swiper-pagination{display:block; right:auto !important; bottom:15px !important; width:100% !important;}
    .area_visual .swiper-pagination-bullet{background:#fff;}
    .area_visual .swiper-pagination-bullet-active{background:#118d9c;}
    
    .area_best .swiper{width:80%;}
    .area_best .pr_list{margin-top:40px; width:96%;}
    
    .area_main_prl01{padding:60px 0;}
    
    .area_notice{padding-bottom:80px;}
    .area_notice .tit_wrap{width:160px; padding:0 10px; border-radius:20px;}
    .area_notice .tit_wrap .box img{width:35px;}
    .area_notice .tit_wrap .box h2.tit{margin:12px 0 25px !important;}
    .area_notice .swiper{width:calc(100% / 1 - 180px);}
    .area_notice .swiper ul li{border-radius:20px;}
}

@media screen and (max-width:620px){
    .area_best .pr_list .pr_info{top:35px; padding:0 10px;}
    .area_best .pr_list [data-shop-list="default"] > li{margin-bottom:10px;}
    .area_best .pr_list .pr_info em{margin-top:2px;}
    .area_best .pr_list [data-shop-list="default"] > li > a .price{padding:8px 10px 10px;}
    .area_best .pr_list [data-shop-list="default"] > li > a .price:before{left:10px; width:calc(100% / 1 - 20px);}
    .area_best .pr_list [data-shop-list="default"] > li > a .price:after{right:10px;}
    .area_best .pr_list [data-shop-list="default"] > li *[data-shop-list="util"]{margin-top:calc(100% - 94px);}
    
    .area_main_prl01 [data-shop-list="default"] > li{margin-bottom:30px;}
    .area_main_prl01 [data-shop-list="default"] > li{width:calc(100% / 2);}
	.area_main_prl01 [data-shop-list="default"] > li:nth-child(3n+1){clear:none;}
	.area_main_prl01 [data-shop-list="default"] > li:nth-child(2n+1){clear:left;}
}

@media screen and (max-width:580px){
    .area_best .swiper{width:100%;}
    .area_best .pr_list{width:100%;}
    .area_best .pr_list .pr_info{position:static; padding:0;}
    .area_best .pr_list [data-shop-list="default"] > li{margin-bottom:30px;}
    .area_best .pr_list [data-shop-list="default"] > li{width:calc(100% / 2);}
	.area_best .pr_list [data-shop-list="default"] > li:nth-child(3n+1){clear:none;}
	.area_best .pr_list [data-shop-list="default"] > li:nth-child(2n+1){clear:left;}
    .area_best .pr_list [data-shop-list="default"] > li .img:before{display:none;}
    .area_best .pr_list .pr_info i{display:block; margin-top:10px; color:#888;}
    .area_best .pr_list .pr_info em{color:#111; margin-top:4px; padding-bottom:0;}
    .area_best .pr_list [data-shop-list="default"] > li > a .price{position:static; padding:0;}
    .area_best .pr_list [data-shop-list="default"] > li > a .price:after{display:none;}
    .area_best .pr_list [data-shop-list="default"] > li > a .price i{color:#118d9c;}
    .area_best .pr_list [data-shop-list="default"] > li > a .price i+i{color:#aaa;} 
    .area_best .pr_list [data-shop-list="default"] > li *[data-shop-list="util"]{margin-top:calc(100% - 53px);}
}