/* BASIC css start */
/* 메인 비쥬얼 배너 */
#mainSpot { position:relative; width:100%; min-width:1024px; height:888px; overflow:hidden }
#mainSpot .inner {margin-left: -960px;position:absolute;top:0;left:50%;right:0;width: 1920px;height: 888px;}
#mainSpot .bx-pager { position:absolute; bottom:15px; left:0; right:0; height:11px; text-align:center }
#mainSpot .bx-pager .bx-pager-item { display:inline-block;  margin:0 7px }
*:first-child+html #mainSpot .bx-pager .bx-pager-item { display:inline } /* IE7 Hack */
#mainSpot .bx-pager .bx-pager-item a { display:block; width:11px; height:11px; text-indent:-9999em; background:url(//image.makeshop.co.kr/makeshop/d3/basic_simple/main/sp_spot_pager.png) 0 0 no-repeat }
#mainSpot .bx-pager .bx-pager-item a.active { background-position:0 -11px }
#mainSpot .swiper_progress {width: 160px;height: 2px;background: rgba(255,255,255,.4); margin:6px 0; margin-right:15px;}
#mainSpot .swiper_progress span { background:#fff; }
.bottom_btn_list { width:225px; position:absolute; left:50%; bottom:26px; transform: translateX(-50%); -webkit-transform: translateX(-50%);  -ms-transform:translateX(-50%);  -o-transform: translateX(-50%);  -moz-transform: translateX(-50%); z-index:10; }
.bottom_btn_list>div { position:relative!important; float:left; height:15px; line-height:15px; }
.bottom_btn_list>div.swiper_fraction { font-size:14px; color:#fff; font-weight:500; }
.bottom_btn_list>div.slide_button { float:right; cursor:pointer; }
.main_banner_arrow {width: 95vw;min-width: 1024px;position: absolute;top:50%;left:50%;height:0;z-index:10;transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%);-o-transform: translate(-50%,-50%);-moz-transform: translate(-50%,-50%);}
.main_banner_arrow .left_arrow { float:left; }
.main_banner_arrow .right_arrow { float:right; }

#mainSpot .swiper-container .swiper-slide .main_banner_inner { width: 82vw;min-width: 1024px; position:absolute; top:0; left:50%; transform: translateX(-50%); -webkit-transform: translateX(-50%);  -ms-transform:translateX(-50%);  -o-transform: translateX(-50%);  -moz-transform: translateX(-50%); height:100%; }
#mainSpot .swiper-container .swiper-slide .main_banner_text { width:576px; height:337px; background:rgba(255,255,255,.9); padding:70px 54px; box-sizing:border-box; -webkit-box-sizing:border-box; right:0; position:absolute; bottom:268px; }
#mainSpot .swiper-container .swiper-slide .main_banner_text h1.title {font-size:26px;color:#1c1b1b;font-weight:500;margin-bottom: 15px; }
#mainSpot .swiper-container .swiper-slide .main_banner_text p.sub_title {font-size:18px;color:#888;font-weight:500;margin-bottom: 36px;}
#mainSpot .swiper-container .swiper-slide .main_banner_text p.content {height:63px; font-size:15px;color:#1c1b1b;font-weight:400;margin-bottom: 36px;font-style:italic; line-height:1.5; }
#mainSpot .swiper-container .swiper-slide .main_banner_text a {font-size:13px;color:#1c1b1b;font-weight:400;  position:relative;}


#mainSpot .swiper-container .swiper-slide .main_banner_text { transition: opacity 1s cubic-bezier(.19,1,.22,1),transform 2s cubic-bezier(.19,1,.22,1);
    transition-delay: .4s;     transform: translateY(15px); opacity:0; }
#mainSpot .swiper-container .swiper-slide .main_banner_text h1.title { transition: opacity 1s cubic-bezier(.19,1,.22,1),transform 2s cubic-bezier(.19,1,.22,1);
    transition-delay: .5s;     transform: translateY(15px); opacity:0; }
#mainSpot .swiper-container .swiper-slide .main_banner_text p.sub_title {transition: opacity 1s cubic-bezier(.19,1,.22,1),transform 2s cubic-bezier(.19,1,.22,1);
    transition-delay: .6s;     transform: translateY(15px); opacity:0;}
#mainSpot .swiper-container .swiper-slide .main_banner_text p.content { transition: opacity 1s cubic-bezier(.19,1,.22,1),transform 2s cubic-bezier(.19,1,.22,1);
    transition-delay: .7s;     transform: translateY(15px);  opacity:0;}  
#mainSpot .swiper-container .swiper-slide .main_banner_text a {transition: opacity 1s cubic-bezier(.19,1,.22,1),transform 2s cubic-bezier(.19,1,.22,1);
    transition-delay: .8s;     transform: translateY(15px); opacity:0;}

#mainSpot .swiper-container .swiper-slide.swiper-slide-active .main_banner_text, #mainSpot .swiper-container .swiper-slide.swiper-slide-active .main_banner_text h1.title, #mainSpot .swiper-container .swiper-slide.swiper-slide-active .main_banner_text p.sub_title,
#mainSpot .swiper-container .swiper-slide.swiper-slide-active .main_banner_text p.content, #mainSpot .swiper-container .swiper-slide.swiper-slide-active .main_banner_text a {     transform: none;
    opacity: 1; transform:perspective(1px) }


#mainSpot .swiper-container .swiper-slide .main_banner_text a:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 1px;
    background: #1c1b1b;
    transform: scaleX(1);
    opacity: 1;
    transform-origin: left;
    transition: transform .7s cubic-bezier(.19,1,.22,1) .2s;
}



#mainSpot .swiper-container .swiper-slide .main_banner_text a:hover:after {
    transform: scaleX(0);
    transform-origin: right;
}



/*
body.on_load #mainSpot .swiper-container .swiper-slide .main_banner_text, body.on_load #mainSpot .swiper-container .swiper-slide .main_banner_text h1.title, body.on_load #mainSpot .swiper-container .swiper-slide .main_banner_text p.sub_title,
body.on_load #mainSpot .swiper-container .swiper-slide .main_banner_text p.content,body.on_load #mainSpot .swiper-container .swiper-slide .main_banner_text a {     transform: none;
    opacity: 1; }
*/


/* 이미지 배너 */
.imgBanner {margin: 111px auto 110px;position:relative;width: 49%;min-width:1024px;overflow:hidden;text-align: center;}
.imgBanner ul { *zoom:1;display: inline-block;width: 100%;}
.imgBanner ul:after { display:block; clear:both; content:'' }
.imgBanner ul li {float:left;width: 25.03%;margin-right: 11.955%; text-align:center; padding-right:10px; box-sizing:border-box;}
.imgBanner ul li:last-of-type { margin-right:0; }
.imgBanner ul li img { width:100%; border-radius:50%; position: relative; border:5px solid transparent; box-sizing:border-box; transition:.2s all;}
.imgBanner ul li p { margin-top:23px; font-size:24px; color:#1c1b1b; font-weight:400; }
.imgBanner ul li p span { display:block; margin-top:3px; font-size:14px; color:#1c1b1b; font-weight:500;  }
.imgBanner ul li:hover img { border-color:#fff; box-shadow: 9px 9px 7px 6px rgb(53 55 91 / 10%) }


/* 상품 목록 영역 */
.product-wrap { margin:0 auto; position:relative; width:1100px }

/* 고정 이미지 배너 */
.fixedBnnr { position:relative; width:100%; min-width:1100px; height:220px; background:url(//image.makeshop.co.kr/makeshop/d3/basic_simple/main/fixbn.jpg) center top no-repeat fixed }
.fixedBnnr .inner { margin:0 auto; position:relative; width:1100px; text-align:center }
.fixedBnnr .inner .tx { padding-top:100px; font-size:16px; color:#fff; letter-spacing:16px }

.item_box { width:100%; min-width:1024px; }
.item_box>h1 {font-size: 28px;color:#1c1b1b;text-align: center;font-weight: 500;}
.item_box .swiper-slide { border-right:1px solid #1c1b1b; box-sizing:border-box; }
.item_box .swiper-slide>img { width:100%; }
.item_box .swiper-container { overflow:hidden; border-top:1px solid #1c1b1b; }

.item_cover { display:none; background:rgba(255,255,255,.7); position:absolute; top:0; left:0; width:100%; height:100%; transition:.3s all; }

.item_cover .item_text { width:100%; text-align:center; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%);  -ms-transform: translate(-50%,-50%);  -o-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); }
.item_cover .item_text .top_title { font-size:14px; color:#1c1b1b; font-weight:400; margin-bottom:12px; }
.item_cover .item_text .subject_title { font-size:18px; color:#1c1b1b; font-weight:400; margin-bottom:45px; }
.item_cover .item_text .item_content { font-size:13px; color:#1c1b1b; font-weight:400; font-style:italic; margin-bottom: 47px; }
.item_cover .item_text .item_thickness { font-size:13px; color:#1c1b1b; font-weight:400; font-style:italic; margin-bottom:45px; }
.item_cover .item_text a { font-size:11px; color:#1c1b1b; font-weight:400; position:relative; }

.item_cover .item_text a:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 1px;
    background: #1c1b1b;
    transform: scaleX(1);
    opacity: 1;
    transform-origin: left;
    transition: transform .7s cubic-bezier(.19,1,.22,1) .2s;
}



.item_cover .item_text a:hover:after {
    transform: scaleX(0);
    transform-origin: right;
}



.item_arr {position:relative;overflow: hidden;text-align: center;margin: 24px 0 40px;}
.item_arr>div {display: inline-block;width: 40px;height: 40px;background-size: 7px auto!important;background-repeat:no-repeat!important;margin: 0 3px;cursor: pointer;border: 1px solid #eaeaea;border-radius: 50%; outline:none; }
.item_arr>div.left_arr {background:url(/design/surflo/pc/item_left.png);background-position: 47% center!important;}
.item_arr>div.right_arr { background:url(/design/surflo/pc/item_right.png); background-position: 54% center!important; }
.item_arr>div.left_arr.swiper-button-disabled { background:url(/design/surflo/pc/item_left_disable.png);  }
.item_arr>div.right_arr.swiper-button-disabled {background:url(/design/surflo/pc/item_right_disable.png);}
/* BASIC css end */