/*메인이미지*/
#main_visual{margin:30px 0 0; width:100%;}
#main_visual:after{ display:block; content:""; clear:both;}
#main_visual .main_top{width:100%; margin:0 0 20px;}
#main_visual .main_top > div{float:left;}
#main_visual .main_top:after{ display:block; content:""; clear:both;}
#main_visual .main_left{width:calc(100% - 580px); height:260px; margin:0 20px 0 0;}
#main_visual .main_left .swiper-slide{height:30px;}
#main_visual .main_left a{display:block; width:100%; height:100%;}
#main_visual .main_left img{width:100%; height:100%; border-radius:10px;}
#main_visual .main_left .swiper-pagination{top:5px; bottom:unset; left:5px; text-align:left;}
#main_visual .main_left .main_middle{width:100%; height:100%;}
#main_visual .main_left .main_middle:after{ display:block; content:""; clear:both;}
#main_visual .main_left .main_middle > li{float:left; margin:0 20px 0 0; width:calc((100% / 2) - 10px); height:100%;}
#main_visual .main_left .main_middle > li:last-child{margin:0;}
#main_visual .main_left .main_middle > li img{width:100%;}
#main_visual .main_left .main_middle > li > a{display:block; width:100%; height:100%;}

#main_visual .main_right{width:560px; height:260px;}
#main_visual .main_right img{width:100%; height:100%; border-radius:10px;}
.main_bottom{position:relative;}
#main_visual .main_bottom .swiper-slide{height:115px;}
.main_bottom img{width:100%; height:100%;}

.main_bottom > .arrow div{outline:none; top:52%; width:20px; height:34px; background:url(../img/app/icon_prodcut_arrow.svg)no-repeat center; opacity:0.6;}
body.ie .main_bottom > .arrow div{top:42%;}
.main_bottom > .arrow div:after{display:none;}
.main_bottom > .arrow div.swiper-button-prev{left:-40px; transform:rotate(-180deg);}
.main_bottom > .arrow div.swiper-button-next{right:-40px;}
.main_bottom img{border-radius:8px;}

section{position:relative; margin:60px 0 0; }
section > h3{display:block; margin:0 0 20px; font-size:22px; font-weight:500; color:#333; line-height:1.5em;}
section .btn_more{position:absolute; top:0; right:0;}

.main_middle:after{ display:block; content:""; clear:both;}
.main_middle > li{float:left; margin:0 20px 0 0; width:calc((100% / 2) - 10px);}
.main_middle > li:last-child{margin:0;}
.main_middle > li img{width:100%;}

@media screen and (max-width:1300px) {
	.main_bottom > .arrow{display:none;}
}
@media screen and (max-width:1250px) {
	#main_visual .main_left{width:calc(50% - 10px);}
	#main_visual .main_right{width:calc(50% - 10px);}
}
@media screen and (max-width:1024px){
	#main_visual .main_left,
	#main_visual .main_left .swiper-slide{height:200px;}
	#main_visual .main_right{height:200px;}
}
@media screen and (max-width:768px){
	section{margin:30px 0 0;}
	#main_visual .main_top{margin:0 0 20px;}
	#main_visual .main_left{width:100%; height:auto;}
	#main_visual .main_right{width:100%; height:auto;}
	.main_middle{display:block; margin:0 0 20px;}
	section > h3{font-size:20px;}
}
@media screen and (max-width:550px){
	#main_visual{margin:10px 0 0;}
	#main_visual .main_top{margin:0 0 10px;}
	#main_visual .main_left .main_middle{margin:0 0 10px;}
	#main_visual .main_left .main_middle > li{margin:0 10px 0 0; width:calc((100% / 2) - 5px);}
	section > h3{margin:0 0 15px; font-size:18px;}
	#main_visual .main_bottom .swiper-slide{height:95px;}
}
/* 협력업체 */
.area_partner ul{}
.area_partner ul:after{ display:block; content:""; clear:both;}
.area_partner ul > li{position:relative; float:left; padding:20px 10px; width:calc(100% / 4); width:-webkit-calc(100% / 4); border:1px solid #eee; border-right:none; box-sizing:border-box; border-right:none; transition:all 0.3s ease; text-align:center; overflow:hidden;}
.area_partner ul > li:hover{box-shadow: 0px 5px 12.75px 2.25px rgba(0, 159, 255, 0.07);}
.area_partner ul > li:nth-child(4n){border-right:1px solid #eee;}
.area_partner ul > li:nth-child(n+5){border-top:none;}
.area_partner ul > li:before,
.area_partner ul > li:after{content:''; display:block; width:100%; height:64px; box-sizing:border-box; position:absolute; transition:all 0.3s ease 0s;}
body.ie .area_partner ul > li:after{height:65px;}
/*.area_partner ul > li:before{top:0px; left:0px; border:1px solid #eee;}*/
.area_partner ul > li:after{top:0px; left:0px;  border:2px solid #0f74da;  transform:scale(1.1,1.1); transition:all 0.2s ease 0s;}
.area_partner ul > li:hover:after{transform:scale(1,1);}
.area_partner ul > li > a{font-size:16px; font-weight:300; color:#111;}


#area_category{position:relative; width:100%;}
#area_category > ul{}
#area_category > ul:after{content:""; display:block; clear:both;}
#area_category > ul > li{position:relative; float:left; width:calc((100% / 7) - 1px); width:-webkit-calc(100% / 7); height:50px; border-bottom:1px solid #eee; border-left:1px solid #eee; box-sizing:border-box; text-align:center; overflow:hidden; transition:all 0.3s ease;}
#area_category > ul > li:nth-child(-n+7){border-top:1px solid #eee; height:51px;}
#area_category > ul > li:nth-child(7n),
#area_category > ul > li:last-child{border-right:1px solid #eee;}
#area_category > ul > li > a{display:block; width:100%; height:100%; padding:12px 5px; font-size:15px; color:#333; line-height:1.7em;}
body.ie .area_category > ul > li > a{letter-spacing:-1px;}
#area_category > ul > li:before,
#area_category > ul > li:after{content:''; display:block; width:100%; height:49px; box-sizing:border-box; position:absolute; transition:all 0.3s ease 0s;}
#area_category > ul > li:after{top:0px; left:0px;  border:2px solid #0f74da;  transform:scale(1.1,1.1); transition:all 0.2s ease 0s;}
#area_category > ul > li:hover:after{transform:scale(1,1);}
#area_category > ul > li:hover{box-shadow: 0px 5px 12.75px 2.25px rgb(0 159 255 / 7%);}

@media screen and (max-width:1300px) {
	#area_category > ul > li{width:calc(100% / 6); width:-webkit-calc(100% / 6);}
	#area_category > ul > li:nth-child(7n){border-right:none;}
	#area_category > ul > li:nth-child(6n),
	#area_category > ul > li:last-child{border-right:1px solid #eee;}	
	#area_category > ul > li:nth-child(-n+6){border-top:1px solid #eee; height:51px;}
	#area_category > ul > li:nth-child(7){border-top:none; height:50px;}
}
@media screen and (max-width:1024px) {
	#area_category > ul > li{width:calc(100% / 4); width:-webkit-calc(100% / 4);}
	#area_category > ul > li:nth-child(6n),
	#area_category > ul > li:nth-child(7n){border-right:none;}
	#area_category > ul > li:nth-child(4n),
	#area_category > ul > li:last-child{border-right:1px solid #eee;}
	#area_category > ul > li:nth-child(-n+4){border-top:1px solid #eee; height:51px;}
	#area_category > ul > li:nth-child(5),
	#area_category > ul > li:nth-child(6){border-top:none; height:50px;}
}
@media screen and (max-width:768px){
	.area_partner ul > li{width:calc(100% / 2); width:-webkit-calc(100% / 2);}
	.area_partner ul > li:nth-child(2n){border-right:1px solid #eee;}
	.area_partner ul > li:nth-child(n+3){border-top:none;}
}
@media screen and (max-width:650px) {
	#area_category > ul > li{width:calc(100% / 3); width:-webkit-calc(100% / 3); height:35px !important;}
	#area_category > ul > li:nth-child(4n),
	#area_category > ul > li:nth-child(6n),
	#area_category > ul > li:nth-child(7n){border-right:none;}
	#area_category > ul > li:nth-child(3n),
	#area_category > ul > li:last-child{border-right:1px solid #eee;}
	#area_category > ul > li:nth-child(-n+3){border-top:1px solid #eee; height:51px;}
	#area_category > ul > li:nth-child(4){border-top:none; height:50px;}
	#area_category ul > li > a{font-size:13px; letter-spacing:-1px; line-height:1.9em;}
	#area_category > ul > li:before, 
	#area_category > ul > li:after{display:none;}
	#area_category ul > li > a{padding:5px;}
	#area_category > ul > li:hover > a{color:#0f74da; font-weight:bold;}
}
@media screen and (max-width:550px){
	.area_partner ul > li{padding:12px 10px;}
	.area_partner ul > li > a{font-size:15px;}
	.area_partner ul > li:before, 
	.area_partner ul > li:after{height:49px;}
}

@media screen and (max-width:400px) {
		
	#area_category > ul > li{width:calc(100% / 2); width:-webkit-calc(100% / 2);}
	#area_category > ul > li:nth-child(3n){border-right:none;}
	#area_category > ul > li:nth-child(2n),
	#area_category > ul > li:last-child{border-right:1px solid #eee;}
	#area_category > ul > li:nth-child(-n+2){border-top:1px solid #eee; height:51px;}
	#area_category > ul > li:nth-child(3){border-top:none; height:50px;}
}

/* 광고 */
.area_ad{position:relative; width:100%; margin:30px 0;}
.area_adbn{width:100%; margin:30px 0;}/*
.area_adbn .swiper-slide{height:218px;}*/
.area_adbn img{width:100%; height:auto;}
.area_bn{width:100%;}
.area_bn img{width:100%; border-radius:10px;}
#mbanner{ width:90%; margin:50px auto; border-radius:8px !important; overflow:hidden !important; box-shadow:0px 2px 4px rgba(0,0,0,0.2);}
#mbanner img{ width:100%;}
#mbanner .swiper-container { width: 100%; height: 100%;}
#mbanner .swiper-slide {/* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; }
#mbanner .swiper-container-horizontal>.swiper-pagination-bullets, #mbanner .swiper-pagination-custom, #mbanner .swiper-pagination-fraction{ width:auto; left:auto; right:10px; bottom:auto; top:10px;}
#mbanner .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{ margin:0 3px;}
#mbanner .swiper-pagination-bullet{ background:#fff;}
#mbanner .swiper-pagination-bullet-active{ background:#fff; opacity:1;}
@media screen and (min-width:1024px) {
#mbanner{ width:100%; margin:0px auto; border-radius:0px !important;box-shadow:none; background:#2482d9;}
.mbanner_box{ width:1200px; margin:0 auto}
}

/* 상품 */
.area_product{}
.area_product > ul:after{ display:block; content:""; clear:both;}
.area_product > ul > li{float:left; margin:0 25px 30px 0; width:calc((100% / 4) - 20px); width:-webkit-calc((100% / 4) - 20px);}
.area_product > ul > li:nth-child(4n){margin:0;}
.area_product > ul > li > a{display:block; width:100%; height:auto;}
.area_product > ul > li > a .area_img{position:relative; width:100%; height:240px; border-radius:20px; overflow:hidden;}
.area_product > ul > li > a .area_img > img{position:absolute; top:50%; left:50%; width:100%; height:100%; border-radius:20px; transform:translate(-50%, -50%); transition:all 0.3s ease;}
.area_product > ul > li:hover > a .area_img > img{transform:translate(-50%, -50%) scale(1.1 , 1.1);}
.area_product > ul > li > a .area_txt{margin:10px 0 0;}
.area_product > ul > li > a .area_txt h3{display:block; font-size:15px; color:#111; line-height:1.5em; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; overflow: hidden;}
.area_product > ul > li > a .area_txt span{display:block; font-size:15px; font-weight:200; color:#444; line-height:1.5em; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; overflow: hidden;}
.area_product > ul > li > a .area_txt em{display:block; margin:5px 0 0; font-size:17px; font-weight:bold; color:#ff0012; line-height:1.5em;}
.area_product > ul.col5 {    display: flex;    flex-wrap: wrap;}
.area_product > ul.col5 > li{width:calc((100% / 5) - 20px); width:-webkit-calc((100% / 5) - 20px);}
.area_product > ul.col5 > li:nth-child(4n){margin:0 25px 30px 0;}
.area_product > ul.col5 > li:nth-child(5n){margin:0;}
.area_product > ul.col5 > li > a .area_img{height:200px;}
.area_product > ul.col5 > li.nodata{width:100%; text-align:center;}
.area_product > ul.col5 > li p{font-size:16px; padding:20px; box-sizing:border-box; color:#555;}

.area_txt span.soldout {
        display: unset!important;
    font-size: 0.4em!important;
    padding: 5px;
    color: #0077e8!important;
    font-weight: 800!important;
    border-radius: 5px;
    border: 1px solid #0077e8;
    background: #e6f3ff;
}
.text span.soldout {
        display: unset!important;
    font-size: 0.4em!important;
    padding: 5px;
    color: #0077e8!important;
    font-weight: 800!important;
    border-radius: 5px;
    border: 1px solid #0077e8;
    background: #e6f3ff;
}

@media screen and (max-width:1250px) {
	.area_product > ul > li > a .area_img,
	.area_product > ul.col5 > li > a .area_img{height:0; padding-bottom:95%;}
}
@media screen and (max-width:1024px) {
	.area_product > ul.col5 > li{width:calc((100% / 4) - 19px); width:-webkit-calc((100% / 4) - 19px);}
	.area_product > ul.col5 > li:nth-child(4n){margin:0;}
	.area_product > ul.col5 > li:nth-child(5n){margin:0 25px 30px 0;}
}
@media screen and (max-width:768px){

	.area_product > ul > li{width:100%; margin:0; border-bottom:1px solid #eee;}
	.area_product > ul > li:first-child{border-top:1px solid #eee;}
	.area_product > ul.col5 > li:first-child{border-top:none;}
	
	.area_product > ul > li > a{padding:20px 0;}
	.area_product > ul > li > a:after{ display:block; content:""; clear:both;}
	.area_product > ul > li > a .area_img{display:inline-block; width:120px; height:120px; padding-bottom:0; vertical-align:middle;}
	.area_product > ul > li > a .area_txt{display:inline-block; margin:0 0 0 10px; width:calc(100% - 154px); vertical-align:middle;}
	.area_product > ul.col5 > li{margin:0 25px 30px 0; border-bottom:none; width:calc((100% / 2) - 13px); width:-webkit-calc((100% / 2) - 13px);}
	.area_product > ul.col5 > li:nth-child(2n){margin:0;}
	.area_product > ul.col5 > li:nth-child(5n){}
	.area_product > ul.col5 > li > a{padding:0;}
	.area_product > ul.col5 > li > a .area_img{display:block; margin:0; width:100%; height:0; padding-bottom:95%;}
	.area_product > ul.col5 > li > a .area_txt{display:block; width:100%; margin:10px 0 0;}
	.area_adbn{margin:10px 0;}
}
@media screen and (max-width:550px){
	.area_product > ul.col5 > li{margin:0 12px 20px 0; width:calc((100% / 2) - 6px); width:-webkit-calc((100% / 2) - 6px);}
	.area_product > ul.col5 > li:nth-child(2n){margin:0;}
	.area_product > ul.col5 > li:nth-child(5n){margin:0 12px 20px 0;}

}
.area_notice{margin:70px 0;}
.area_notice .lt{border:1px solid #ddd; box-shadow: 0px 5px 9px 1px rgba(0, 0, 0, 0.03); border-radius:10px; box-sizing:border-box; padding:26px 0;}
.area_notice .lt:after{ display:block; content:""; clear:both;}
.area_notice .lt .lt_title{float:left; display:block; width:120px;}
.area_notice .lt > a > h3{text-align:center; font-size:16px; font-weight:bold; line-height:1.5em; color:#111;}
body.ie .area_notice .lt > a > h3{line-height:1.9em;}
.area_notice .lt > ul{margin:0; float:left; width:calc(100% - 120px); width:-webkit-calc(100% - 120px);}
.area_notice .lt > ul > li{position:relative;}
.area_notice .lt > ul > li a{display:block; width:85%; padding:0; font-family: 'GmarketSansLight'; font-weight:normal; font-size:15px; color:#555; line-height:1.7em;     text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
    overflow: hidden;}
.area_notice .lt > ul > li a strong{position:relative; top:3px;}
.area_notice .lt > ul > li span{position:absolute; top:50%; right:20px; transform:translateY(-50%); font-weight:bold; font-size:14px;}
body.ie .area_notice .lt > ul > li span{top:53%;}

@media screen and (max-width:768px){
	.area_notice{margin:40px 0; display:none;}
	.area_notice .lt{padding:20px 0;}
}
@media screen and (max-width:550px){
	.area_notice .lt .lt_title{width:85px;}
	.area_notice .lt > a > h3{font-size:15px;}
	.area_notice .lt > ul > li a{font-size:14px;}
	.area_notice .lt > ul > li span{display:none;}
	.area_notice .lt > ul > li a strong{top:4px;}
	.area_notice .lt > ul{width:calc(100% - 85px); width:-webkit-calc(100% - 85px);}

	/*#main.area_adbn .swiper-slide{height:89px;}*/
}