/* BASIC css start */
#content { padding:50px 40px 50px; }

/* 왼쪽퀵배너 */
.closed {position: absolute; z-index:1000;  right:-36px;height:35px;  top: calc(50%); margin-top:-12.5px; background: rgba(215,215,215,0.8);box-sizing: border-box;padding: 10px 10px 13px 10px;box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.1); border-top-right-radius: 5px;border-bottom-right-radius: 5px;  cursor:pointer;}
.closed i {font-size: 16px;}
.closed:hover {background:#fff;}
#popupLeft { background: rgba(255,255,255,1); box-shadow: -1px 0px 1px 1px rgba(0,0,0,0.1); position: fixed;top:50%;  margin-top:-212.5px; width: 375px; height: 410px;padding: 10px;left: -395px; z-index: 999999;}
#popupLeft .rbnr li{ margin-bottom:10px; overflow:hidden;}
#popupLeft .rbnr li:last-child { margin-bottom:0px;}
#popupLeft img {max-width:100%;}
#popupLeft.active{left:0;}
#popupLeft.active .closed {background:#fff;  }
.closed.active,
#popupLeft {-webkit-transition:all 0.3s ease-in-out 0s;-moz-transition:all 0.3s  'easeInOutExpo';-o-transition:all 0.3s 'easeInOutExpo';transition:all 0.3s ease-in-out 0.1s;}


#main_content .swiper-container-horizontal > .swiper-pagination-bullets {bottom:auto; left:auto; width:auto; right:20px; top:45%; text-align:center; }
#main_content .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {display:block; margin:15px auto; width:13px; height:13px;  }
#main_content .swiper-pagination-bullet-active {background:#000; width:13px; height:13px; }
.swiper-container {margin:0 auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}
.swiper-wrapper {position:relative;width:100%;height:100%;z-index:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;-o-transition-property:transform;transition-property:transform;transition-property:transform,-webkit-transform;-webkit-box-sizing:content-box;box-sizing:content-box}
.swiper-container-fade .swiper-slide img {width:100%; }



/* 공지사항 */

.notice {margin:70px 0 30px;text-align:center;}
.notice p { font-weight:400; margin-bottom:10px; line-height:23px;}
.notice p.con {font-size:12px;color:#aaa;}
.notice p.info {font-size:10px;color:#ccc;text-transform:uppercase;letter-spacing:0.02em;}
.notice p.info span {color:#ddd;margin:0 6px;}
.notice hr {display:inline-block;width:8px;border-top:1px solid #aaa;margin-top:25px;}



/* 베너5개영역 */
.bnr5 { overflow:hidden; padding-bottom:6px;  }
.bnr5  li { overflow:hidden; }
.bnr5 a {display:block;width:100%;text-align:center;}
.bnr5 a img { max-width:100%; height:auto; }
.bnr5 .flex { display:flex;   overflow:hidden; background:#000;}
.bnr5 .flex .flex2 { flex:2; position:relative;text-align:center;  }
.bnr5 .flex li:hover img {  opacity: 0.8; filter: alpha(opacity=80);  }
.bnr5 .flex > * {flex:1;}
.bnr5  .text1 {position:relative;text-align:center;background:#f7f7f7;}
.bnr5  .text1 h2 { position:relative; font-weight:bold;font-size:30px;letter-spacing:3px;color:#999;}
.bnr5  .text1 h2:after {content:"";position:absolute;width:14px;height:1px;background:#999;left:calc(50% - 7px);bottom:-20px;}
.bnr5  .text1 p { padding-top:40px;font-weight:300; color:#9e9e9e; font-size:18px;letter-spacing:0.1px;line-height:24px; font-family: "맑은 고딕", "Malgun Gothic"}
.bnr5  .text1 p.btn { margin:41px auto;display:inline-block;   border:1px solid #999; font-weight:700; color:#999;padding:5px 20px; font-size:14px;letter-spacing:0.2px; }
.bnr5  .text1:hover h2 { color:#000;}
.bnr5  .text1:hover p.btn { border:1px solid #000; background:#000; color:#fff;}


/* 베너4개영역 */
.bnrArea { overflow:hidden;padding:10px 5px 20px; margin-top:10px;}
.bnrArea a {display:block;width:100%;text-align:center;}
.bnrArea a img {max-width:100%;height:auto;background-color:#f7f7f7; }
.bnrArea li { margin:5px; border:0px solid #000;  position:relative; /* background:rgba(0,0,0,0.6);*/  }
.bnrArea .imgup li:hover img { opacity: 0.8; filter: alpha(opacity=80); }
.bnrArea .flex {display:flex;}
.bnrArea .flex > * {flex:2}
	

 

/* 픽스롱배너 */
.mbnr_bg {width:100%;height:500px;text-align:center;} /* 픽스고정이미지 */
.mbnr_bg .sinner { position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;height:210px;}
.mbnr_bg .txtBox h1 { font-size:13px;line-height:40px;font-weight:normal;color:#666;letter-spacing:0.05em;}
.mbnr_bg .txtBox h2 { font-size:11px;line-height:20px; margin:7px auto 20px; color:#aaa;font-weight:normal;}
.mbnr_bg .txtBox hr { width:8px;display:inline-block;margin:4px 0 6px;border-top:1px solid #aaa;}
.mbnr_bg .txtBox .btn { width:130px; font-size:10px; padding:10px 20px; background:rgba(0,0,0,0.6);   border-radius:5px ; color:#fff ; text-transform: uppercase; }
.mbnr_bg .txtBox .btn:hover { background:rgba(0,0,0,0.9);  }





/* 슬라이드 */
.wd100 {  background:#fbfbfb; padding:50px; }



/* 배너2개 */
.full {
	width:100%;
	background:rgba(248,248,248,1);
	overflow:hidden;
	padding:50px 0;
}


.bnr2x1 {margin:0px auto;}
.bnr2x1 li {float:left;	width:49%;margin-right:calc(2%);-webkit-transition:-webkit-transform 0.5s ease-in-out; transition:transform 0.5s ease-in-out; }
.bnr2x1 li:nth-child(2) { margin-right:0px; !important }
.bnr2x1 li img {width:100%;-webkit-transition:-webkit-transform 0.5s ease-in-out; transition:transform 0.5s ease-in-out;}
/* .bnr2x1 li:hover img { -webkit-transform:translateY(-10px); transform: translateY(-10px); } */

.bnr2x1 .posAb { left: 50%; transform: translateX(-50%); top: calc(50% ); z-index:99 }
.bnr2x1 .posAb .btn a {} 
.bnr2x1 .posAb.btn { display:block; font-size:10px; padding:10px 30px; background:rgba(0,0,0,0.2);  font-size:12px; text-align:center;  border-radius:0px ; color:#fff ; text-transform: uppercase; border:1px solid #fff}
.bnr2x1 li:hover .posAb.btn { background:rgba(0,0,0,0.9);  }





/* 동영상배너 movie */

#movie { width:100%; margin:0 auto 50px; position:relative;  clear: both;  background:rgba(245,245,245,0.9); height:430px; padding:50px 0 50px;   }    /* 메인동영상영역 */
#movie .movie-box { width:1300px; margin:0 auto;  }
#movie .movie-box  .movie-l { float:left;  width:550px;  }
#movie .movie-box  .movie-l .movie_txt1 {font-size:50px; line-height:50px; color:#333; letter-spacing:0px; padding:20px 0 15px;}
#movie .movie-box  .movie-l .movie_txt2 {font-size:12px;   line-height:12px; color:#191e21;  padding-bottom:5px;}
#movie .movie-box  .movie-l .movie_txt3 {font-size:28px; color:#191e21; text-align:left; line-height:30px;}
#movie .movie-box  .movie-l .movie_txt4 {font-size:13px; color:#999999; line-height:20px; padding-top:18px; letter-spacing:-0.5px;}
#movie .movie-box  .movie-l .movie_txt5 { }
#movie .movie-box  .movie-l .movie_txt5 a {  display: block; background:rgba(0,0,0,0.9); width:200px; padding:5px 10px;  font-size:13px; color:#fff; letter-spacing:0; margin-top:30px;}

#movie .movie-box  .movie-l .movie_txt5 a:hover {  background:#999; color:#fff; }

#movie .movie-box  .tit { line-height:50px; font-size:13px; font-family:'Libre Baskerville', 'arial', 'Nanum Gothic'; font-weight:normal; font-style:italic; color:#555; letter-spacing:1px;}
#movie .movie-box  .move-r { float:right; }
#movie .movie-box img { -ms-transition:all 0.4s ease-out;-moz-transition:all 0.4s ease-out; -webkit-transition: all 0.4s ease-out; -o-transition: all 0.4s ease-out; transition: all 0.4s ease-out;}
#movie .movie-box img:hover { opacity:0.8;filter:alpha(opacity=80);  -ms-transition:all 0.4s ease-out;-moz-transition:all 0.4s ease-out; -webkit-transition: all 0.4s ease-out; -o-transition: all 0.4s ease-out; transition: all 0.4s ease-out;}






/* 인스타그램 */
.instaWidget { padding: 30px 0px 100px; text-align: center; background: #fff; max-width:1200px; margin:0 auto;}
.instaWidget .instit p { font-size: 20px !important ;display: block; height: 25px;}
.instaWidget .instit p i ,
.instaWidget .instit p a { font-size: 22px ;display: inline-block;line-height: 20px;vertical-align: middle;padding: 0 5px; }
.instaWidget .tag{  font-size: 15px ; position: relative; display: inline-block; height: 25px; margin: 15px 0 40px;line-height: 25px; white-space: nowrap;background: #636363;border-radius: 5px;padding: 3px 25px;}
.instaWidget .tag a { color:#fff}
.instaWidget .inst-flex  {width:100%;}
.instaWidget .inst-flex ul { display:flex;position:relative; margin:-1px; flex-direction:row-reverse;}
.instaWidget .inst-flex ul li {flex:1;border:1px solid transparent;}
.instaWidget .inst-flex ul li a {display:block;width:100%;background-color:#f0f0f0;}
.instaWidget .inst-flex ul li a img {width:100%;height:auto;}






/* -- 플로팅팝업 -- */
#popupWrap #popupBox {position:fixed;left:30px;bottom:10px; width:400px; height: 400px; z-index:999;  display:none;background: none; 
-webkit-animation:swing .8s; 
-ms-animation:swing .8s; 
-moz-animation:swing .8s; 
animation:swing .8s; 
}

/* 열기버튼 */
#popupWrap .popup_open { position:fixed; left:10px; bottom:20px; height:100px; width:100px; background: none; z-index:50; cursor:pointer; }
/* 닫기버튼 */
#popupWrap .popup_close { position:absolute; top:10px; right:40px; text-align:center; cursor:pointer;  z-index:100;}
#popupWrap .popup_close i { position:relative; width:30px; height:30px; border-radius:5px; background:#f3f3f3; border: 2px solid #333; font-size:20px !important; color:#222; line-height:30px;  z-index:130; }
#popupWrap #popupcheckbox { position:absolute; width:30px; height:30px; top:0px; right:0px;border-radius: 5px ;cursor:pointer;  z-index:110;color:#fff; font-weight:400; display:none; overflow:hidden; background:#333; border: 2px solid #333; box-shadow: 0 2px 2px rgba(0,0,0,0.4); }
/* 열지않기 버튼 */
#popupWrap .popup_close:hover #popupcheckbox {width:190px; }
#popupWrap .popupcheck { float:left; height: 22px !important; width: 22px !important; margin-top:4px; margin-left:12px; cursor: pointer;  }
#popupWrap .popupcheckinput { float:left; line-height:30px;  margin-left:6px; font-size:13px; color:#fff  }


/* -- 인트로팝업 -- */
#introWrap { position:fixed; height:100%; width:100%; z-index: 2000; top:0; left:0; display:none; }
#introWrap .reveal-modal-bg { top:0;left:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.5) ; z-index: 2001; }
#introWrap #introBox {  position:absolute; left:50%; top:50%; margin-left:-250px; margin-top:-350px; width:500px; height:650px; z-index:2002; display:block; background:none; 

   -webkit-animation:pulse .8s;  
   -moz-animation:pulse .8s;  
   -ms-animation:pulse .8s;  
    animation:pulse .8s;  
}

/* 열기버튼 */
.intro_open { position:fixed; left:10px;bottom:100px; height:100px; width:100px; border-radius:0; background:none; z-index:50; cursor:pointer;  }
/* 닫기버튼 */
#introWrap .intro_close {position:absolute; top:-15px; right:-15px; text-align:center; cursor:pointer; z-index:100; }
#introWrap .intro_close i { position:relative; width:30px; height:30px; border-radius:5px; background:#f3f3f3; border: 2px solid #333; font-size:20px !important; color:#222; line-height:30px;  z-index:130; }
#introWrap #introcheckbox { position:absolute; width:30px; height:30px; top:0px; right:0px;border-radius: 5px ;cursor:pointer;  z-index:110;color:#fff; font-weight:400; display:none; overflow:hidden; background:#333; border: 2px solid #333; box-shadow: 0 2px 2px rgba(0,0,0,0.4); }
#introWrap .intro_close:hover #introcheckbox { width:190px; }

/* 열지않기 버튼 */
#introWrap .introcheck {  float:left; height: 22px !important; width: 22px !important; margin-top:4px; margin-left:12px; cursor: pointer;   }
#introWrap .introcheckinput { float:left; line-height:30px;  margin-left:6px; font-size:13px; color:#fff  }






/* ▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼ 인트로팝업영역 ▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼ */

.intro_slide .s-item { position:relative;display:block; height:650px; text-align:center; margin:0 auto;}
.intro_slide .s-item img{ text-align:center;  margin:0 auto; }
.intro_slide .slick-prev,.intro_slide .slick-next{position:absolute;display:block !important;cursor: pointer;width:32px;height:60px;font-size:0;top:50%;margin-top:-25px;outline: none;padding:0;border:0; opacity:0; filter:alpha(opacity=0);background:transparent; z-index:2;}   /* 화살표 처음위치 */

.intro_slide .slick-prev{left:50%;margin-left:-300px;background:url(/design/xlsksl1018/wizdesign2/slide_prev_w.png) 50% 50% no-repeat; }   /* 이전화살표 이미지경로 */
.intro_slide .slick-next{right:50%;margin-right:-300px;background:url(/design/xlsksl1018/wizdesign2/slide_next_w.png) 50% 50% no-repeat; }  /* 다음화살표 이미지경로 */
.intro_slide:hover .slick-prev{ margin-left:-310px; opacity:1;filter:alpha(opacity=100);} /* 이전마우스오버시 위치 */
.intro_slide:hover .slick-next{ margin-right:-310px;opacity:1;filter:alpha(opacity=100);}  /* 다음마우스오버시 위치 */
.intro_slide .slick-prev:hover{ }  /* 이전화살표 마우스오버시 효과 */
.intro_slide .slick-next:hover{ }  /* 다음화살표 마우스오버시 효과 */
.intro_slide .slick-prev,.intro_slide .slick-next{-o-transition:0.3s !important;-ms-transition:0.3s !important; -moz-transition:0.3s !important;-webkit-transition:0.3s !important;transition:0.3s !important;}
.intro_slide .slick-slider{margin-bottom:0;}
.intro_slide .slick-dots{position:absolute;bottom:-15px;padding:0;display:block;list-style: none;display:block;text-align:center;width:100%;  opacity:0; filter:alpha(opacity=0); -moz-transition:0.3s !important;-webkit-transition:0.3s !important;transition:0.3s !important;}
.intro_slide:hover .slick-dots{ opacity:1;filter:alpha(opacity=100);} /* 이전마우스오버시 위치 */
.intro_slide .slick-dots li{position: relative;display: inline-block;margin:0 4px;padding:0;cursor: pointer;}
.intro_slide .slick-dots li button{border:0;background: transparent;display:block;outline: none;line-height:0;font-size:0;color: transparent;padding:0;cursor: pointer;}
.intro_slide .slick-dots li button:hover,.slick-dots li button:focus{outline: none;}
.intro_slide .slick-dots li button:hover:before,.slick-dots li button:focus:before{opacity:1;}
.intro_slide .slick-dots li button:before{display:block;width:10px;height:10px;content: "";;background:#000; border-radius:5px;border:0px solid #888;font-size:0;text-align:center;color: white;opacity:1;-o-transition:0.3s !important;-ms-transition:0.3s !important;-moz-transition:0.3s !important;-webkit-transition:0.3s !important;transition:0.3s !important;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing: grayscale;}
.intro_slide .slick-dots li.slick-active button:before {   background:#fff; width:20px;  /* 도트사이즈 */ opacity: 1; }  /* 현재도트사이즈 */
 





/* 탭메뉴 */


.shopping_tip { width: 1245px; margin:0 auto; }
.shopping_tip .tip {	WIDTH: 100%; OVERFLOW: hidden }
#scrollTabs { MARGIN-TOP: 0px; WIDTH: 100% }
#scrollTabs .pagination { WIDTH: 100%; BACKGROUND: url(/design/xlsksl1018/wizdesign/tabs_bg.gif) repeat-x left bottom; OVERFLOW: hidden}
#scrollTabs .pagination li { BORDER-BOTTOM: #E5E5E5 1px solid; TEXT-ALIGN: center; BORDER-LEFT: #E5E5E5 1px solid; LINE-HEIGHT: 41px; WIDTH: 248px; BACKGROUND: #f5f5f5; FLOAT: left; HEIGHT: 41px; COLOR: #6c6c6c; BORDER-TOP: #E5E5E5 1px solid; FONT-WEIGHT: 700; BORDER-RIGHT: #E5E5E5 1px; }
 #scrollTabs .pagination li a {	DISPLAY: block; COLOR: #686c75;font-size:11px;line-height:41px;}
 #scrollTabs .pagination li.last-child {	BORDER-RIGHT: #E5E5E5 1px solid ; WIDTH: 247px;  }
 #scrollTabs .pagination li.current { PADDING-BOTTOM: 1px; BACKGROUND: #fff; BORDER-BOTTOM-WIDTH: 0px; COLOR: #ff576a}
 #scrollTabs .pagination li.current A { COLOR: #CC9270}
 #scrollTabs .slides_container { padding:20px;BORDER-BOTTOM: #E5E5E5 1px solid; BORDER-LEFT: #E5E5E5 1px solid; WIDTH: 1203px; HEIGHT: 100%; OVERFLOW: hidden; BORDER-TOP: #E5E5E5 1px; BORDER-RIGHT: #E5E5E5 1px solid}
 #scrollTabs .slides_container li {WIDTH: 100%; }





.item-list5 { zoom: 1; overflow: hidden; padding-bottom: 20px; }
.item-list5:after { content: ""; clear: both; display: block; }

.item-list5 .item { float: left; width: 240px;text-align: center; }
.item-list5 .item .thumb { margin: 0 auto 0px; width:220px; height: auto;  }
.item-list5 .item .thumb img { width:220px ; height: auto; position:relative;}
.item-list5 .item .info { width: 220px; margin:0 auto; }
.item-list5 .item .info li { margin-bottom: 5px; color: #7b7b7b; }
.item-list5 .item .info .name { margin-top: 10px; margin-bottom: 10px;text-align:left; font-size:12px; font-weight:bold;  font-family: 'Nanum Gothic', 돋움, dotum; color: #888888; }
.item-list5 .item .info .subname { color: #7F7F7F; text-align:left; padding-top:0px; font-size:12px; font-family: 'Nanum Gothic', 돋움, dotum;  }

.item-list5 .item .thumb {  position:relative; }
.item-list5 .item .thumb .gnb_sub { display:none; }       
.item-list5 .item .thumb:hover .gnb_sub { display:block; position:absolute; left:0px; top:0 ; }
.item-list5 .aa { text-align:center;  width:220px; height:312px; background:url(/design/xlsksl1018/wizdesign/box.png) 0 0; }
.item-list5 .aa { color:#fff;font-weight:bold;   }
.item-list5 .aa .name { color : #fff; font-weight:bold; padding-top:130px;   }






/* 메인슬라이드 */

/* BASIC css start */


        .jssorb05 {
            position: absolute;
        }
        .jssorb05 div, .jssorb05 div:hover, .jssorb05 .av {
            position: absolute;
	/* size of bullet elment */
 width: 16px;
            height: 16px;
	text-align: center;

	background: url(/design/xlsksl1018/wizdesign/b05.png) no-repeat;
	overflow: hidden;
	cursor: pointer; 
}
        .jssorb05 div { background-position: -7px -7px; }
        .jssorb05 div:hover, .jssorb05 .av:hover { background-position: -37px -7px; }
        .jssorb05 .av { background-position: -67px -7px; }
        .jssorb05 .dn, .jssorb05 .dn:hover { background-position: -97px -7px; }

        .jssora22l, .jssora22r {
            display: block;
            position: absolute;
            /* size of arrow element */
            width: 40px;
            height: 58px;
            cursor: pointer;
            background: url('/design/xlsksl1018/wizdesign/a22.png') center center no-repeat;
            overflow: hidden;
        }
        .jssora22l { background-position: -10px -31px; }
        .jssora22r { background-position: -70px -31px; }
        .jssora22l:hover { background-position: -130px -31px; }
        .jssora22r:hover { background-position: -190px -31px; }
        .jssora22l.jssora22ldn { background-position: -250px -31px; }
        .jssora22r.jssora22rdn { background-position: -310px -31px; }

/* BASIC css end */



/* 슬라이드 end */



/* pc더보기 버튼 추가 영역 */
.product-wrap .more { text-align:center; margin: 24px 0px;}
.btn_moreGray {width:224px; height:35px; line-height: 35px; background-color:#efefef; border:0px none; font-weight:bold; display: block; margin: 0 auto;}
.btn_moreGray span {color:#aaaaaa;}
.btn_moreGray span em {color:#f1191f;}


/* BASIC css end */