@charset "utf-8";

/* 
 * content CSS Document
 */

#content h2{margin:80px 0 45px 0; font-size:35px; font-weight:300; color:#393939; text-align:center;}
.pdl{padding:0 10px;}

.area_visual{position:relative;}
.area_visual,
.area_visual .list{height:502px;}
.area_visual .list li{height:100%;}
.area_visual .list li,
.area_visual .list li i{background-repeat:no-repeat; background-position:50% 0; background-size:cover; font-size:0px; border-radius: 10px;}
.area_visual .list li i{opacity:0; display:block; position:relative; z-index:1; width:100%; padding-top:60%;}
.area_visual .list li a{display:block; position:absolute; top:0px; left:0px; z-index:2; width:100%; height:100%; font-size:0px;}
.area_visual .bx-pager{position:absolute; left:22px; bottom:30px;}
.area_visual .bx-pager > div,
.area_visual .bx-pager > div > a{display:inline-block;}
.area_visual .bx-pager .bx-pager-link{width:8px; height:8px; margin:0 7px; background-color:#fff; border-radius:50%; box-shadow:3px 3px 3px rgba(0,0,0,0.09); font-size:0px; transition:all 0.3s ease 0s;}
.area_visual .bx-pager .bx-pager-link.active{background-color:#60432b;}
.area_visual .bx-controls .bx-controls-direction > a{position:absolute; top:50%; width:25px; height:40px; transform:translateY(-50%); background:url(/images/main/icon_arrow.png)no-repeat 50% 50%; font-size:0;}
.area_visual .bx-controls .bx-controls-direction > a.bx-prev{left:20px; transform:translateY(-50%) rotate(-180deg);}
.area_visual .bx-controls .bx-controls-direction > a.bx-next{right:20px;}

/* 공지사항 */
.area_notice_wrap{display:block; position:relative; width:100%; max-width:1200px; overflow:hidden; margin:0 auto;}
.area_notice{position:relative; float:left; margin:70px 0 90px 0; width:calc(50% - 35px); height:auto; font-weight:300; font-size:14px; color:#5e5e5e;}
.area_notice:nth-child(2){float:right;}
.area_notice h3{font-size:18px; font-weight:700; padding-bottom:20px; margin-bottom:26px; border-bottom:2px solid #888;}
.area_notice ul{position:relative; margin-top:15px; width:100%;}
.area_notice ul li{margin-bottom:8px;}
.area_notice ul li a{display:block; width:60%; padding-left:12px; line-height:1.8em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:300;}
.area_notice ul li a:hover{color:#888;}
.area_notice ul li a:before{content:''; position:absolute; left:0px; margin-top:12px; display:block; background-color:#2b2b2b; width:2px; height:2px; border-radius: 50%;}
.area_notice ul li > div{padding:18px 0; text-align:center;}
.area_notice ul li a span.date{float:right; position:absolute; right:0px; font-weight: 500; color:#2e2e2e;}
.btn_more{display:block; position:absolute; top:0px; right:0px; width:10px; height:36px;  text-indent:100%; font-size:0px; background:url(/images/main/btn_more.png) no-repeat 50% 50%; background-size:10px 10px;}

/* 배너영역 */
.area_banner{position: relative;}
.area_banner:after{content:''; display:block; clear:both;}
.area_banner li{display:block; float:left; margin-right:4px; width:calc(100% / 4 - 3.1px);}
.area_banner li a{display:block; padding:15px 5px; width:100%; border:1px solid #efefef;}
.area_banner li:last-child{margin-right: 0;}
.area_banner li a > img{display:block; margin:0 auto; width:100%; max-width: 204px;}

/* 제품목록 */
.area_shopList .area_product_best .count{position: absolute; right:0px; bottom:0px;}

@media all and (max-width:1299px){
    #content h2{margin:40px 0 25px 0; font-size: 30px;}

    .area_notice{margin:20px 0 50px 0; width:calc(50% - 10px);}

	.area_visual,
	.area_visual .list{height:400px;}
}

@media all and (max-width:1024px){
	.area_visual,
	.area_visual .list,
	.area_visual .bx-viewport{height:100% !important;}
	.area_visual .list li i{opacity:1;}
}

@media all and (max-width:768px){
    #content h2{font-size: 25px;}

    .area_notice h3{padding-bottom: 15px; margin-bottom:20px;}
    .area_notice ul li{margin-bottom: 5px;}
}

@media all and (max-width:480px){
    #content h2{font-size: 20px;}

    .area_notice{margin:15px 0; width:100%;}
    .area_notice h3{font-size:16px; padding-bottom: 10px; margin-bottom:15px;}
    .area_notice ul li{margin-bottom: 0;}

    .area_banner{margin-top: 20px;}
    .area_banner li{margin:0 3px 3px 0; width:calc(100% / 2 - 2.1px);}
    .area_banner li:nth-child(even){margin-right: 0;}
    .area_banner li a > img{max-width: 130px;}

    .area_shopList .area_product_best .count{position: relative; bottom:inherit; right:inherit; top:0px; left:0px;}
}