@charset "utf-8";

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

.area_visual{position:relative; max-width:1400px; display: flex; justify-content: flex-end; margin:40px auto 0;}
.area_visual .bx-wrapper{width:1106px;}
.area_visual .list li a{display:block;}
.area_visual .list li a,
.area_visual .list li div{overflow:hidden; border-radius:15px;}
.area_visual .list .web{display:block; overflow:hidden; position:relative; height:auto;}
.area_visual .list .web img{position:relative; width:100%;}
.area_visual .list .mob{display:none;}
.area_visual .bx-controls{position:absolute; right:45px; bottom:37px; display: flex; flex-direction: row-reverse; z-index:70;}
.area_visual .bx-controls .bx-next,
.area_visual .bx-controls .bx-prev{opacity:0; display:inline-block; position:absolute; top:50%; z-index:70; width:30px; height:50px; box-sizing:border-box; padding-top:5px; background-color:rgba(255,255,255,0.3); transform:translateY(-50%); font-size:0px; transition:opacity 0.3s ease, background 0.3s ease;}
.area_visual .bx-controls .bx-prev{left:50%; margin-left:-750px;}
.area_visual .bx-controls .bx-next{right:50%; margin-right:-750px; transform:translateY(-50%) scaleX(-1);}
.area_visual .bx-controls .bx-next:before,
.area_visual .bx-controls .bx-next:after,
.area_visual .bx-controls .bx-prev:before,
.area_visual .bx-controls .bx-prev:after{content:''; display:block; width:2px; height:20px; margin:0 6px; background:#b9b9b9; transition:background 0.3s ease;}
.area_visual .bx-controls .bx-next:before,
.area_visual .bx-controls .bx-prev:before{transform:rotate(45deg); transform-origin:0 100%;}
.area_visual .bx-controls .bx-next:after,
.area_visual .bx-controls .bx-prev:after{transform:rotate(-45deg); transform-origin:0 0;}
.area_visual .bx-controls .bx-pager{position:relative; top:-1px;}
.area_visual .bx-pager-item{display:inline-block; padding:0 6px;}
.area_visual .bx-pager-link{display:inline-block; width:9px; height:9px; background:#fff; border-radius:100%; font-size:0px; transition:0.3s ease;}
.area_visual .bx-pager-link.active{background:#3d75da;}
.area_visual .bx-wrapper:hover .bx-next,
.area_visual .bx-wrapper:hover .bx-prev{opacity:1;}
.area_visual .bx-controls .bx-next:hover,
.area_visual .bx-controls .bx-prev:hover{background-color:rgba(255,255,255,0.8);}
.area_visual .bx-controls .bx-next:hover:before,
.area_visual .bx-controls .bx-next:hover:after,
.area_visual .bx-controls .bx-prev:hover:before,
.area_visual .bx-controls .bx-prev:hover:after{background:#777;}

.area_visual .bx-controls-auto{position:relative; bottom:1px;}
.area_visual .bx-controls a{display:inline-block; background-image:url(../images/main/icon_control.png); background-repeat:no-repeat; text-indent:100%; overflow:hidden; white-space:nowrap;}
.area_visual .bx-controls-auto a{margin-left:5px; width:12px; height:12px;}
.area_visual .bx-controls-auto a.bx-stop{background-position:-14px 0px;}
.area_visual .bx-controls-auto a.bx-start{background-position:0 0px;}


#content{margin:0 auto;}
#content > div[class^="area_"]{margin-top:70px;}
#content h2{margin-bottom:40px; font-size:40px; font-weight:bold; color:#111; line-height:1em;}
#content h2 i{display:block; font-size:15px; font-weight:600;}
.area_product{display: flex; justify-content: flex-end; max-width:1400px; margin:0 auto;}
.area_best{position:relative; width:1106px;}
.area_best *[data-shop-list="default"]{margin-left:0px;}
.area_best *[data-shop-list="default"] > li{padding-left:0; margin:0 18px 45px 0; width:calc((100% / 4) - 13.6px); width:-webkit-calc((100% / 4) - 13.6px); transition:0.3s ease;}
.area_best *[data-shop-list="default"] > li:nth-child(4n){margin-right:0;}
/*
.area_best *[data-shop-list="default"] > li:before{content:''; opacity:0; display:block; position:absolute; left:0px; top:0px; width:1px; height:100%; background:#0b327a; transition:0.3s ease;}
.area_best *[data-shop-list="default"] > li:after{content:''; opacity:0; display:block; position:absolute; left:0px; top:0px; width:100%; height:1px; background:#0b327a; transition:0.3s ease;}
.area_best *[data-shop-list="default"] > li.active{z-index:70; border-color:#0b327a; box-shadow:20px 30px 20px rgba(0,0,0,0.08);}
.area_best *[data-shop-list="default"] > li.active:before,
.area_best *[data-shop-list="default"] > li:nth-child(4n) ~ li.active:after{opacity:1;}
.area_best *[data-shop-list="default"] > li.active:first-child:before,
.area_best *[data-shop-list="default"] > li:nth-child(4n+1):before{opacity:0;}
*/
.area_best *[data-shop-list="default"] > li .img{position:relative; border-radius:20px; overflow:hidden;}
.area_best *[data-shop-list="default"] > li .img img{position:absolute; top:50%; left:50%; width:auto; height:100%; transform:translate(-50%, -50%) scale(1); transition:all 0.3s ease;}
.area_best *[data-shop-list="default"] > li.active .img img{transform:translate(-50%, -50%) scale(1.08);}
.area_best *[data-shop-list="default"] > li > a > em,
.area_best *[data-shop-list="default"] > li > a > i{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.area_best *[data-shop-list="default"] > li *[data-shop-icon="icon"]{display:none;}
.area_best *[data-shop-list="default"] > li *[data-shop-list="util"]{left:15px; margin-top:calc(100% - 77px);}
.area_best *[data-shop-list="default"] > li .pd_txt{margin:20px 0 0;}
.area_best *[data-shop-list="default"] > li .pd_txt em{font-size:17px; font-weight:600; color:#292929; line-height:1em; word-break:keep-all; font-family: "Pretendard", Sans-serif;}
.area_best *[data-shop-list="default"] > li .pd_txt,
.area_best *[data-shop-list="default"] > li > a .price{text-align:left; font-family: 'Montserrat', "Pretendard", sans-serif;}
.area_best *[data-shop-list="default"] > li > a .price{margin-top:5px;}
.area_best *[data-shop-list="default"] > li > a .price i:after{display:none;}
.area_best *[data-shop-list="default"] > li > a .price i:last-child:after{display:inline-block; margin-left:1px; font-size:17px; font-weight:bold; font-family: 'Montserrat', "Pretendard", sans-serif;}
.area_best *[data-shop-list="default"] > li > a .price i.original_price{margin:0 3px;}
.area_best *[data-shop-list="default"] > li > a .percent{position:relative; visibility:visible; display:inline-block; opacity:1; height:auto; padding:0 !important; background:none; margin-top:0 !important; font-size:17px; font-weight:bold; color:#16579b; transition:none;}
.area_best .btn{position:absolute; top:7px; right:0;}
.area_best .btn a{display:inline-block; font-weight:bold; font-size:15px; color:#272727; line-height:1em; transition:0.3s ease;}
.area_best .btn a:hover{color:#222;}






@media screen and (max-width:1720px){
	/*.area_visual .list li a,
	.area_visual .list li div{padding-left:15px; padding-right:15px; border:0px;}
	
	.area_visual .list .web{padding-top:31.627906976744185vw;}	
	.area_visual .list .web,
	.area_visual .list .mob{overflow:hidden; border-radius:15px;}	
	*/
	.area_visual .bx-controls .bx-prev{left:50px; margin-left:0px;}
	.area_visual .bx-controls .bx-next{right:50px; margin-right:0px;}
}
@media screen and (max-width:1500px){
	.area_visual{width:90%;}
	.area_visual .bx-wrapper{width:calc(100% - 300px);}
	.area_product{width:90%;}
	.area_best{width:calc(100% - 300px);}
}

@media screen and (max-width:1300px){
	.area_visual{margin:30px auto 0;}
	.area_visual .bx-wrapper{width:calc(100% - 250px);}
	.area_visual .bx-controls{right:35px; bottom:30px;}
	.area_visual .bx-pager-item{padding:0 5px;}

	.area_best{width:calc(100% - 250px);}
}
@media screen and (max-width:1200px){
	.area_visual .bx-wrapper{width:calc(100% - 220px);}
	.area_best{width:calc(100% - 220px);}
}
@media screen and (max-width:1024px){
	.area_visual .bx-wrapper{width:100%;}
	.area_visual .bx-controls{right:25px; bottom:25px;}
	.area_visual .bx-pager-item{padding:0 4px;}
	.area_visual .bx-pager-link{width:8px; height:8px;}
	.area_best{width:100%;}
}
@media screen and (max-width:1250px){
	.area_info .customer{width:30%;}
	.area_info .bank{width:45%;}
	.area_info .category{width:25%;}
	.area_info .category .site{width:100%;}

}

@media screen and (max-width:1024px){
	#content > div[class^="area_"]{margin-top:40px;}
	#content h2{margin-bottom:30px;}
	.area_best *[data-shop-list="default"] > li *[data-shop-list="util"]{left:10px;}
}

/*
@media screen and (max-width:850px){
	.area_best *[data-shop-list="default"] > li{width:calc(100% / 3);}
	.area_best *[data-shop-list="default"] > li:nth-child(4n+1){clear:none; border-left-width:0px;}
	.area_best *[data-shop-list="default"] > li:nth-child(3n+1){clear:left; border-left-width:1px;}
	.area_best *[data-shop-list="default"] > li:nth-child(3n) ~ li{border-top-width:0px;}
	
	.area_info .customer{width:40%;}
	.area_info .bank{width:60%}
	.area_info .category{display:none;}
}
*/
@media screen and (max-width:900px){
	.area_best *[data-shop-list="default"] > li{width:calc((100% / 3) - 12px); width:-webkit-calc((100% / 3) - 12px);}
	.area_best *[data-shop-list="default"] > li:nth-child(4n){margin:0 18px 45px 0;}
	.area_best *[data-shop-list="default"] > li:nth-child(3n){margin-right:0;}
	*[data-shop-list="default"] > li:nth-child(4n+1){clear:inherit;}
}
@media screen and (max-width:800px){
	.area_visual .list .web{display:none;}
	.area_visual .list .mob{display:block;}
	.area_visual .list .mob img{width:100%;}
	
	.area_visual .bx-controls .bx-next,
	.area_visual .bx-controls .bx-prev{opacity:1;}
}

@media screen and (max-width:768px){
	.area_visual .bx-controls{right:20px; bottom:20px;}
	.area_visual .bx-pager-link{width:7px; height:7px;}
	.area_visual .bx-controls-auto a{margin-left:7px;}


	.area_best *[data-shop-list="default"] > li{margin:0 18px 30px 0; width:calc((100% / 2) - 9px); width:-webkit-calc((100% / 2) - 9px);}
	.area_best *[data-shop-list="default"] > li:nth-child(4n){margin:0 18px 30px 0;}
	.area_best *[data-shop-list="default"] > li:nth-child(3n){margin:0 18px 30px 0;}
	.area_best *[data-shop-list="default"] > li:nth-child(2n){margin-right:0;}
}
@media screen and (max-width:680px){
	#content h2{margin-bottom:20px; font-size:30px;}

}



@media screen and (max-width:550px){
	.area_visual{margin:0; width: 100%;}
    .area_visual .list li a, .area_visual .list li div{border-radius: 0;}
	.area_visual .bx-controls{right:15px; bottom:5px;}
	.area_visual .bx-pager-link{width:5px; height:5px;}
	.area_visual .bx-pager-item{padding:0 3px;}
	.area_visual .bx-controls-auto a{margin-left:5px; width:8px; height:9px; background-size:cover;}
	.area_visual .bx-controls-auto a.bx-stop{background-position:-9px 0px;;}


	#content > div[class^="area_"]{margin-top:30px;}
	.area_best *[data-shop-list="default"] > li .img{border-radius:12px;}
	.area_best *[data-shop-list="default"] > li .pd_txt, 
	.area_best *[data-shop-list="default"] > li > a .price{text-align:center;}
	.area_best *[data-shop-list="default"] > li .pd_txt em{font-size:16px;}
	.area_best *[data-shop-list="default"] > li > a .percent{font-size:16px;}
	.area_best *[data-shop-list="default"] > li > a .price{margin-top:3px; }
	.area_best *[data-shop-list="default"] > li > a .price i.original_price{font-size:13px;}
	*[data-shop-list="default"] > li > a .price i:last-child{font-size:17px;}

	
}
@media screen and (max-width:480px){
	.area_visual .bx-controls .bx-prev{left:25px;}
	.area_visual .bx-controls .bx-next{right:25px;}
	

}

@media screen and (max-width:450px){
	.area_best *[data-shop-list="default"] > li *[data-shop-list="util"]{margin:10px 0 0; display:flex; justify-content: center; align-items: center;}
	*[data-shop-list="default"] > li *[data-shop-list="util"] > a{height:15px; margin:0;}
}

/*
@media screen and (max-width:420px){
	#content > div[class^="area_"]{margin-top:45px;}
	.area_best .btn{top:30px;}
	#content h2{font-size:25px;}
}

@media screen and (max-width:370px){
	#content h2{text-align:center;}
	.area_best .btn{position:static; margin-top:30px; text-align:center;}
	.area_best .btn a,
	.area_best .btn a:last-child{margin-right:5px; margin-left:5px; padding:5px 15px; border:1px solid #fff; border-radius:3px;}
	.area_best .btn a.more{border-color:#0b327a;}
	.area_best .btn a:after{display:none;}
	
	#content .area_info h2{text-align:left;}
}
*/