/* BASIC css start */ #contentWrap { width:100%; } #header { border-bottom:0px solid #F6F6F6 !important; } /* 메인상단영역아래 라인 없애기 */ #header:after { content: ""; clear: both; display: block; } /* 메인큰이미지영역 */ .sp600 {height:600px;} #section01 { position:absolute;top:-244px ;z-index:1;width:100%;height:845px; overflow:hidden; } #section01:after { content: ""; clear: both; display: block; } #main_slide { position:relative; width:100%; clear: both;} #main_slide .mslide { position:absolute; width:5000px; height:auto; top:0; left:50% !important; margin-left:-2500px; z-index:3 } #main_slide .s-item { position:relative;display:block; text-align:center; } #main_slide .s-item img{ margin:0 auto; /* height:px; */ text-align:center;} #main_slide .slick-slider {position: relative;display:block;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;-ms-touch-action: pan-y;touch-action: pan-y;-webkit-tap-highlight-color: transparent;} #main_slide .mslide .slick-slider:hover .slick-next,#main_slide .mslide .slick-slider:hover .slick-prev{display:block !important;} #main_slide .mslide .invisible{visibility: hidden;} #main_slide .mslide .slick-list{position: relative;overflow: hidden;display:block;margin:0;padding:0;} #main_slide .mslide .slick-list:focus{outline: none;} #main_slide .mslide .slick-list.dragging{cursor: pointer;cursor: hand;} #main_slide .mslide .slick-slider .slick-track,#main_slide .slick-slider .slick-list{-webkit-transform: translate3d(0,0,0);-moz-transform: translate3d(0,0,0);-ms-transform: translate3d(0,0,0);-o-transform: translate3d(0,0,0);transform: translate3d(0,0,0);} #main_slide .mslide .slick-track{position: relative;left:0;top:0;display:block;} #main_slide .mslide .slick-track:before,.slick-track:after{content: "";display: table;} #main_slide .mslide .slick-track:after{clear:both;} #main_slide .mslide .slick-loading .slick-track{visibility: hidden;} #main_slide .mslide .slick-slide{ float: left;height:100%;min-height:1px;display: none;} [dir="rtl"] .mslide .slick-slide{ } #main_slide .mslide .slick-slide img{ display:block; } #main_slide .mslide .slick-slide.slick-loading img{display: none;} #main_slide .slick-slide.dragging img{pointer-events: none;} #main_slide .slick-initialized .slick-slide {display:block;} #main_slide .mslide .slick-loading .slick-slide{visibility: hidden;} #main_slide .mslide .slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent;} #main_slide .mslide .slick-prev,#main_slide .mslide .slick-next{position:absolute;display:block !important;cursor: pointer;width:32px;height:60px;font-size:0;top:63%;margin-top:-25px;outline: none;padding:0;border:0; opacity:0; filter:alpha(opacity=0);background:transparent; z-index:2;} /* 화살표 처음위치 */ #main_slide .mslide .slick-prev{left:50%;margin-left:-645px;background:url(/design/vusqorakfl/wizdesign/slide_prev.png) 50% 50% no-repeat; } /* 이전화살표 이미지경로 */ #main_slide .mslide .slick-next{right:50%;margin-right:-645px;background:url(/design/vusqorakfl/wizdesign/slide_next.png) 50% 50% no-repeat; } /* 다음화살표 이미지경로 */ #main_slide .mslide:hover .slick-prev{margin-left:-690px; opacity:1;filter:alpha(opacity=100);} /* 이전마우스오버시 위치 */ #main_slide .mslide:hover .slick-next{margin-right:-690px;opacity:1;filter:alpha(opacity=100);} /* 다음마우스오버시 위치 */ #main_slide .mslide .slick-prev:hover{background:url(/design/vusqorakfl/wizdesign/slide_prev.png) 50% 50% no-repeat; opacity:0.5; filter:alpha(opacity=50);} /* 이전화살표 마우스오버시 효과 */ #main_slide .mslide .slick-next:hover{background:url(/design/vusqorakfl/wizdesign/slide_next.png) 50% 50% no-repeat; opacity:0.5; filter:alpha(opacity=50);} /* 다음화살표 마우스오버시 효과 */ #main_slide .mslide .slick-prev,#main_slide .mslide .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;} #main_slide .mslide .slick-slider{margin-bottom:0;} #main_slide .mslide .slick-dots{position:absolute;bottom:15px;padding:0;display:block;list-style: none;display:block;text-align:center;width:100%;} #main_slide .mslide .slick-dots li{position: relative;display: inline-block;margin:0 4px;padding:0;cursor: pointer;} #main_slide .mslide .slick-dots li button{border:0;background: transparent;display:block;outline: none;line-height:0;font-size:0;color: transparent;padding:0;cursor: pointer;} #main_slide .mslide .slick-dots li button:hover,.slick-dots li button:focus{outline: none;} #main_slide .mslide .slick-dots li button:hover:before,.slick-dots li button:focus:before{opacity:1;} #main_slide .mslide .slick-dots li button:before{display:block;width:8px;height:8px;content: "";;background:#888; border-radius:100px;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;} #main_slide .mslide .slick-dots li.slick-active button:before { background:#333; width:25px; /* 도트사이즈 */ opacity: 1; } /* 현재도트사이즈 */ /* 탭메뉴 */ #tapSlider { position: relative; display:block; width:1300px;height:auto;margin:0 auto 20px;outline:none;z-index:1; } #tapSlider .slick-slider{ position: relative;display:block;box-sizing:border-box;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;-webkit-touch-callout: none;-khtml-user-select: none;-ms-touch-action: pan-y;touch-action: pan-y;-webkit-tap-highlight-color: transparent;} #tapSlider .slick-list{position: relative;display:block; overflow: hidden;margin:0;padding:0;} #tapSlider .slick-list:focus{outline: none;}.slick-list.dragging{cursor: pointer;cursor: hand;} #tapSlider .slick-slider .slick-track,.slick-slider .slick-list{-webkit-transform: translate3d(0,0,0);-moz-transform: translate3d(0,0,0);-ms-transform: translate3d(0,0,0);-o-transform: translate3d(0,0,0);transform: translate3d(0,0,0);} #tapSlider .slick-track{position: relative;top:0;left:0;display:block;} #tapSlider .slick-track:before,.slick-track:after{display: table;content: '';} #tapSlider .slick-track:after{clear:both;} #tapSlider .slick-loading .slick-track{visibility: hidden;} #tapSlider .slick-slide{display: none;float: left;height:100%;min-height:1px;}[dir='rtl'] .slick-slide{float: right;} #tapSlider .slick-slide img{display:block;}.slick-slide.slick-loading img{display: none;}.slick-slide.dragging img{pointer-events: none;} #tapSlider .slick-initialized .slick-slide{display:block;} #tapSlider .slick-loading .slick-slide{visibility: hidden;} #tapSlider .slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent;} #tapSlider .slick-arrow.slick-hidden{display: none;} #tapSlider .slick-list:focus{outline: none;} #tapSlider .slick-prev:before,#tapSlider .slick-next:before{} #tapSlider .slick-dots { position:absolute;top:0px;padding:0;display:block;list-style: none;display:block;text-align:center;width:100%; } #tapSlider .slick-dots li{ position: relative;display: inline-block;margin:0 4px;padding:0;cursor: pointer;} #tapSlider .slick-dots li button{border:0;background: transparent;display:block;outline: none;line-height:0;font-size:0;color: transparent;padding:0;cursor: pointer;} #tapSlider .slick-dots li button:hover,.slick-dots li button:focus{outline: none;} #tapSlider .slick-dots li button:hover:before,.slick-dots li button:focus:before{opacity:1;} #tapSlider .slick-dots li button:before{display:block;width:10px;height:10px;content: "";;background:#ddd; border-radius:100px;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;} #tapSlider .slick-dots li.slick-active button:before { background:#333; width:10px; /* 도트사이즈 */ opacity: 1; } /* 현재도트사이즈 */ #tapSlider .slick-prev,#tapSlider .slick-next { position:absolute;display:block !important;cursor: pointer;width:61px;height:41px;font-size:0; top:50%;margin-top:5px;outline: none;padding:0;border:0; opacity:1; filter:alpha(opacity=0);background:transparent; z-index:2;} /* 화살표 처음위치 */ #tapSlider .slick-prev{ left:-20px; background:url(/design/vusqorakfl/wizdesign/arr-week-left.png) 50% 50% no-repeat; } /* 이전화살표 이미지경로 */ #tapSlider .slick-next{right:-20px; background:url(/design/vusqorakfl/wizdesign/arr-week-right.png) 50% 50% no-repeat; } /* 다음화살표 이미지경로 */ #tapSlider:hover .slick-prev{margin-left:-35px;opacity:0.7;filter:alpha(opacity=70);} /* 이전마우스오버시 위치 */ #tapSlider:hover .slick-next{margin-right:-38px;opacity:0.7;filter:alpha(opacity=70);} /* 다음마우스오버시 위치 */ #tapSlider .slick-prev:hover{background:url(/design/vusqorakfl/wizdesign/arr-week-left.png) 50% 50% no-repeat; opacity:1; filter:alpha(opacity=100);} /* 이전화살표 마우스오버시 효과 */ #tapSlider .slick-next:hover{background:url(/design/vusqorakfl/wizdesign/arr-week-right.png) 50% 50% no-repeat; opacity:1; filter:alpha(opacity=100);} /* 다음화살표 마우스오버시 효과 */ #tapSlider .slick-prev,#tapSlider .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;} #tapSlider .cont { position:relative;display:block; font-size:0;overflow:hidden; margin:50px auto 0; vertical-align:top; padding:0px; } #tapSlider .cont ul { margin-left:0px !important; } #tapSlider .item-wrap { margin:0 auto; width:1300px; border:0px solid #ccc; padding-left:5px;padding-bottom:10px; } /* 탭상품진열 */ .tap-list { zoom: 1; } .tap-list:after { content: ""; clear: both; display: block; } .tap-list .item { float: left; width: 260px; text-align: center; padding-bottom: 1px; border:0px solid #ccc; } .tap-list .item .item_hover{ width: 259px; margin: 0 auto; position:relative; } .tap-list .item .item_hover .thumb { width:259px; height: auto; } .tap-list .item .item_hover .thumb img { width:259px; height: auto; } .tap-list .item .item_hover .-imgcont_box {display:none; position:absolute;width:100%;height:100%;top:0;left:0; background:rgba(0,0,0,0.6); } .tap-list .item .item_hover .-imgcont_box .-imgcont_out { display:table;height:100%;width:100%; } .tap-list .item .item_hover .-imgcont_box .-imgcont { width:100%; height:100%; display:table-cell; vertical-align:middle; padding:0 25px;} .tap-list .item .item_hover .-imgcont li { padding:5px 0; text-align:center; line-height:19px; } .tap-list .item .item_hover .-imgcont .name {padding-bottom: 5px; font-size:12px; color: #fff; font-weight:bold; border-bottom:1px solid #F0F0F0; } .tap-list .item .item_hover .-imgcont .subname { color: #fff; font-size:12px; } .tap-list .item .item_hover .-imgcont .color { padding-top: 10px; } .tap-list .item .item_hover .-imgcont .price01 { font-weight:none; color:#fff; padding-right:10px; text-decoration:line-through; } .tap-list .item .item_hover .-imgcont .price02 { font-weight:none; color:#fff; } /* 슬라이드 + 배너5개 ▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼ */ #rollbnr-box { width:1300px;margin:0 auto; position:relative; clear: both ; padding-top:80px; } #rollbnr-box .item01 {float:left; width:400px; height:550px; overflow: hidden;} #rollbnr-box .item01 .s-item {position:relative;display:block; /* height:px; */ text-align:center;margin:0 auto;} #rollbnr-box .item01 .s-item img{ margin:0 auto; /* height:px; */ } #rollbnr-box .item01 .slick-prev,#rollbnr-box .slick-next{position:absolute;display:block !important;cursor: pointer;width:30px;height:50px;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;} /* 화살표 처음위치 */ #rollbnr-box .item01 .slick-prev{ left:-20px; background:url(/design/vusqorakfl/wizdesign/main_arrow_prev_black.png) 50% 50% no-repeat; } /* 이전화살표 이미지경로 */ #rollbnr-box .item01 .slick-next{ right:-20px; background:url(/design/vusqorakfl/wizdesign/main_arrow_next_black.png) 50% 50% no-repeat; } /* 다음화살표 이미지경로 */ #rollbnr-box .item01:hover .slick-prev{ left:0px; margin-left:0px;opacity:0.7;filter:alpha(opacity=70);} /* 이전마우스오버시 위치 */ #rollbnr-box .item01:hover .slick-next{ right:0px; margin-right:0px;opacity:0.7;filter:alpha(opacity=70);} /* 다음마우스오버시 위치 */ #rollbnr-box .item01 .slick-prev:hover{ left:0px;background:url(/design/vusqorakfl/wizdesign/main_arrow_prev_black.png) 50% 50% no-repeat; opacity:1; filter:alpha(opacity=100);} /* 이전화살표 마우스오버시 효과 */ #rollbnr-box .item01 .slick-next:hover{ right:0px;background:url(/design/vusqorakfl/wizdesign/main_arrow_next_black.png) 50% 50% no-repeat; opacity:1; filter:alpha(opacity=100);} /* 다음화살표 마우스오버시 효과 */ #rollbnr-box .item01 .slick-prev,#rollbnr-box .item01 .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;} #rollbnr-box .item01 .slick-slider{margin-bottom:0;} #rollbnr-box .item01 .slick-dots{ position:absolute;bottom:20px;padding:0;display:block;list-style: none;display:block;text-align:center;width:100%;} #rollbnr-box .item01 .slick-dots li{position: relative;display: inline-block;margin:0 4px;padding:0;cursor: pointer;} #rollbnr-box .item01 .slick-dots li button{border:0;background: transparent;display:block;outline: none;line-height:0;font-size:0;color: transparent;padding:0;cursor: pointer;} #rollbnr-box .item01 .slick-dots li button:hover,.slick-dots li button:focus{outline: none;} #rollbnr-box .item01 .slick-dots li button:hover:before,.slick-dots li button:focus:before{opacity:1;} #rollbnr-box .item01 .slick-dots li button:before{display:block;width:7px;height:7px;content: ""; background:#888; border-radius:100px;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;} #rollbnr-box .item01 .slick-dots li.slick-active button:before { background:#333; width:25px; /* 도트사이즈 */ opacity: 1; } /* 현재도트사이즈 */ #rollbnr-box .item02 {float:left; width:580px; padding:0 20px;} #rollbnr-box .item02 .item02-1 { } #rollbnr-box .item02 .item02-2 { clear: both ;padding-top:20px; } #rollbnr-box .item03 {float:right;} #rollbnr-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; } #rollbnr-box img:hover { opacity:0.7;filter:alpha(opacity=70); -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; } /* 슬라이드배너 sbnr2 */ #sbnr_box { width:100%; margin:0 auto; padding:50px 0 ;position:relative; clear: both; background:rgba(245,245,245,0.5);overflow: hidden; } #sbnr_box h2 { margin:0 auto; text-align:center; padding:0px 0 10px ; font-size:20px; font-weight:700; } #sbnr_box h3 { margin:0 auto; text-align:center; padding:0px 0 50px ; font-size:14px; color:#999 } #sbnr_box h2:after { border-bottom:1px solid #000 } .sbnr2 { max-width:1300px; margin:0 auto 0px;height:autox; overflow: hidden;} .sbnr2 .s-item { position:relative;display:block; /* height:px; */ text-align:center;margin:0 auto; background:rgba(0,0,0,1); } .sbnr2 .s-item img{ margin:0 auto; -o-transition:0.3s !important;-ms-transition:0.3s !important;-moz-transition:0.3s !important;-webkit-transition:0.3s !important;transition:0.3s !important;- } .sbnr2 .s-item img:hover { margin:0 auto; opacity:0.7;filter:alpha(opacity=70);} .sbnr2 .slick-prev,.sbnr2 .slick-next{position:absolute;display:block !important;cursor: pointer;width:30px;height:50px;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;} /* 화살표 처음위치 */ .sbnr2 .slick-prev{ left:-20px; background:url(/design/vusqorakfl/wizdesign/main_arrow_prev_black.png) 50% 50% no-repeat; } /* 이전화살표 이미지경로 */ .sbnr2 .slick-next{ right:-20px; background:url(/design/vusqorakfl/wizdesign/main_arrow_next_black.png) 50% 50% no-repeat; } /* 다음화살표 이미지경로 */ .sbnr2:hover .slick-prev{ left:0px; margin-left:0px;opacity:0.7;filter:alpha(opacity=70);} /* 이전마우스오버시 위치 */ .sbnr2:hover .slick-next{ right:0px; margin-right:0px;opacity:0.7;filter:alpha(opacity=70);} /* 다음마우스오버시 위치 */ .sbnr2 .slick-prev:hover{ left:0px;background:url(/design/vusqorakfl/wizdesign/main_arrow_prev_black.png) 50% 50% no-repeat; opacity:1; filter:alpha(opacity=100);} /* 이전화살표 마우스오버시 효과 */ .sbnr2 .slick-next:hover{ right:0px;background:url(/design/vusqorakfl/wizdesign/main_arrow_next_black.png) 50% 50% no-repeat; opacity:1; filter:alpha(opacity=100);} /* 다음화살표 마우스오버시 효과 */ .sbnr2 .slick-prev,.sbnr2 .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;} .sbnr2 .slick-slider{margin-bottom:0;} .sbnr2 .slick-dots{ position:absolute;bottom:20px;padding:0;display:block;list-style: none;display:block;text-align:center;width:100%;} .sbnr2 .slick-dots li{position: relative;display: inline-block;margin:0 4px;padding:0;cursor: pointer;} .sbnr2 .slick-dots li button{border:0;background: transparent;display:block;outline: none;line-height:0;font-size:0;color: transparent;padding:0;cursor: pointer;} .sbnr2 .slick-dots li button:hover,.slick-dots li button:focus{outline: none;} .sbnr2 .slick-dots li button:hover:before,.slick-dots li button:focus:before{opacity:1;} .sbnr2 .slick-dots li button:before{display:block;width:7px;height:7px;content: ""; background:#888; border-radius:100px;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;} .sbnr2 .slick-dots li.slick-active button:before { background:#333; width:25px; /* 도트사이즈 */ opacity: 1; } /* 현재도트사이즈 */ /* 풀배너4개배너 full-box */ #full-box { width:100% ; margin:0 auto; position:relative; clear: both } .full_banner {margin:0 0 50px;} .full_banner:after {content:"";display:block;clear:both;} .full_banner ul {margin:0; padding:0; } .full_banner ul li { overflow:hidden; position:relative; float:left; display:inline-block;*display:inline; width:25%; font-size:12px; line-height:18px;vertical-align:top;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;-ms-transition:all 0.3s ease;-o-transition:all 0.3s ease;transition:all 0.3s ease;} .full_banner .text_hover { overflow:hidden;position:absolute;top:0;left:0;display:inline-block;text-align:center;vertical-align:middle;width:0; height:100%; z-index:2; margin:0;padding:0;opacity:0.0;background:rgba(0,0,0,0.7);box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;-ms-transition:all 0.3s ease;-o-transition:all 0.3s ease;transition:all 0.3s ease;} .full_banner ul li:hover .text_hover {z-index:2;opacity:1.0;width:100%;} .full_banner ul li:nth-child(2) .text_hover,.full_banner ul li:nth-child(4) .text_hover {left:auto;right:0;} .full_banner .over_txt { overflow:hidden; display:table; width:100%;height:100%; padding:0; color:#fff; vertical-align:middle;text-align:center;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box; } .full_banner .over_txt p {position:relative;top:0;left:0;display:table-cell;vertical-align:middle;padding:30px 20px; width:100%; color:#fff;font-size:18px;line-height:30px; letter-spacing:0.05em; opacity:0.0;text-align:center;font-family:'Roboto','Nanum Gothic',sans-serif;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-webkit-transition:all 1.0s ease;-moz-transition:all 1.0s ease;-ms-transition:all 1.0s ease;-o-transition:all 1.0s ease;transition:all 1.0s ease;} .full_banner li:hover .over_txt p { opacity:1.0; } .full_banner .over_txt p span {font-weight:500;font-size:30px;} /* 롱슬라이드배너영역 long_box */ #long_box { position:relative; overflow:hidden; border:0px solid #000 ; width:100% ; height:250px; } #long_box .long-inner { position:absolute; left:50% !important; overflow:hidden; margin-left:-1000px; top:0px; width:2000px; height:auto; border:0px solid #000 } .long-slide .s-item { position:relative;display:block; height:auto; text-align:center; margin:0 auto;} .long-slide .s-item img{ text-align:center; /* height:px; */ } .long-slide .slick-prev,.long-slide .slick-next{position:absolute;display:block !important;cursor: pointer;width:30px;height:30px;font-size:0; outline: none;padding:0;border:0; opacity:0; filter:alpha(opacity=0); left:50% !important; margin-left:620px; background:transparent; z-index:3;} /* 화살표 처음위치 */ .long-slide .slick-prev{top:49px; right:0; background:url(/design/vusqorakfl/wizdesign/arr-topr-up.png) 50% 50% no-repeat; } /* 이전화살표 이미지경로 */ .long-slide .slick-next{top:79px;right:0;;background:url(/design/vusqorakfl/wizdesign/arr-topr-down.png) 50% 50% no-repeat; } /* 다음화살표 이미지경로 */ .long-slide:hover .slick-prev{ opacity:0.5;filter:alpha(opacity=50);} /* 이전마우스오버시 위치 */ .long-slide:hover .slick-next{ opacity:0.5;filter:alpha(opacity=50);} /* 다음마우스오버시 위치 */ .long-slide .slick-prev:hover{background:url(/design/vusqorakfl/wizdesign/arr-topr-up.png) 50% 50% no-repeat; opacity:0.8; filter:alpha(opacity=80);} /* 이전화살표 마우스오버시 효과 */ .long-slide .slick-next:hover{background:url(/design/vusqorakfl/wizdesign/arr-topr-down.png) 50% 50% no-repeat; opacity:0.8; filter:alpha(opacity=80);} /* 다음화살표 마우스오버시 효과 */ .long-slide .slick-prev,.long-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;} .long-slide .slick-slider{margin-bottom:0;} .long-slide .slick-dots { position:absolute; bottom:5px; padding:0; list-style: none; display:block; text-align:center;width:100%; opacity:1; filter:alpha(opacity=100); -moz-transition:0.3s !important;-webkit-transition:0.3s !important;transition:0.3s !important;} .long-slide:hover .slick-dots { opacity:1;filter:alpha(opacity=100);} /* 이전마우스오버시 위치 */ .long-slide .slick-dots li { position: relative;display: inline-block;margin:0;padding:0;cursor: pointer; } .long-slide .slick-dots li button { background: transparent;display:block;outline: none;line-height:0;font-size:0;color: transparent;padding:0;cursor: pointer;} .long-slide .slick-dots li button:hover,.slick-dots li button:focus{outline: none;} .long-slide .slick-dots li button:hover:before,.slick-dots li button:focus:before{opacity:1;} .long-slide .slick-dots li button:before{display:block;width:30px;height:5px;content: "";;background:#ddd; border-radius:0px;border:0px solid #888;font-size:0; margin:0 1px; 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;} .long-slide .slick-dots li.slick-active button:before { background:#000; width:30px; /* 도트사이즈 */ opacity: 1; } /* 현재도트사이즈 */ /* 기본롱배너 mlong */ .mlong { text-align:center; padding:20px 0 0px } .mlong img { } .mlong 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;} /* 동영상배너 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;} /* 메인상품타이틀코드 */ .mtitbox { display: block; width: 100%; margin: 0px auto 0px; padding: 50px 0 30px; } .mtitbox h2 {display:block; margin: 0 auto 15px; padding:10px 0px ; line-height:35px; border-bottom: none; text-align:center; } .mtitbox h2 span.mname { display:block; margin:0 auto; background-color:#fff; width:250px; color:#333; font-size:15px; font-family:'Montserrat','Roboto Condensed'; font-weight:500; border-bottom:1px solid #fff; } .mtitbox h2 span.mname:hover{ background-color:#FFF; color:#000;} .mtitbox h2 span.mname.on { display:block; margin:0 auto; width:100%; background-color:#fff; color:#000; font-size:16px; font-weight:700; border-bottom:1px solid #999; /* border-radius:50px; */ } .mtitbox h2 span.mdot {display:block; width:30px; height:1px; margin:10px auto 10px; border-bottom:6px dotted #666;} /* 상품공통 */ #proWarp { width:1300px; margin:0 auto; position:relative; clear: both ; padding:50px 0 ;} /* 메인 신상품영역 */ /* 퀵버튼 */ .bullets-container.active { left:0px; opacity: 1; } .bullets-container { display: table; position: fixed; left: 0px; height: 100%; z-index: 9; font-weight: normal; -webkit-transition:all 1s; -moz-transition:all 1s; -o-transition:all 1s; transition:all 1s; opacity: 0; border:0px solid #000; } .section-bullets { transition-duration: .3s; list-style: none; margin: 0; display: table-cell; vertical-align: middle; } .section-bullets li { display: block; text-align: left; font-size: 11px; text-transform: uppercase; line-height: 1; position: relative; border-top-right-radius: 30px; border-bottom-right-radius: 30px; cursor: pointer; margin-bottom: 1px; } .section-bullets li a:before { content: ' '; width: 0; height: 100%; background-color: #eee; position: absolute; left: 0; top: 0; border-top-right-radius: 30px; border-bottom-right-radius: 30px; transition-duration: .0s; } .section-bullets li a:after { content: ' '; width: 6px; height: 6px; border-radius: 50%; background-color: #000; position: absolute; left: 5px; top: 8px; transition-duration: .0s; } .section-bullets li a { color: #000; font-size: 11px; overflow: hidden; position: relative; display: inline-block; transition-duration: .0s; opacity: 0.5; margin-left: 5px; padding: 5px 20px 5px 10px; text-decoration: none; min-height: 11px; } .section-bullets li:nth-child(5) a { color: #ff0909; font-weight: bold; } .section-bullets li span { position: relative; left: 5px; transition-duration: 0.0s; opacity: 0; } .section-bullets li.active a { opacity: 1; } .section-bullets li.active a:before { width: 100%; transition-duration: .0s; transition-delay: 0.0s; } .section-bullets li:hover a { opacity: 0.7; } .section-bullets li:hover span { opacity: 1; transition-delay: 0.0s; } .section-bullets li.active span { opacity: 1; transition-duration: .0s; transition-delay: 0.0s; } /* 상품슬라이드 */ .item-silde-re { width:100%; margin:0 auto 50px; position:relative; border:0px solid #000 } .item-silde-re .s-item { display:block; padding:5px; position:relative; overflow:hidden; } .item-silde-re .s-item > img { max-width: auto; /* height:px; */ overflow:hidden; } .item-wrap .item-thumb a img { width: 210px; transition:opacity 0.25s ease-in-out; } .item-silde-re .slick-vertical .slick-slide {display:block;height:auto;border:1px solid transparent;} .item-silde-re .slick-prev, .item-silde-re .slick-next{ position:absolute;display:block !important;cursor: pointer;width:32px;height:60px;font-size:0;top:40%; outline: none;padding:0;border:0; opacity:0.3; filter:alpha(opacity=30);background:transparent; z-index:2;} /* 화살표 처음위치 */ .item-silde-re .slick-prev{left:20px; background:url(/design/vusqorakfl/wizdesign/slide_prev.png) 50% 50% no-repeat; } /* 이전화살표 이미지경로 */ .item-silde-re .slick-next{right:20px;background:url(/design/vusqorakfl/wizdesign/slide_next.png) 50% 50% no-repeat; } /* 다음화살표 이미지경로 */ .item-silde-re:hover .slick-prev{ left:10px; opacity:1;filter:alpha(opacity=100);} /* 이전마우스오버시 위치 */ .item-silde-re:hover .slick-next{ right:10px; opacity:1;filter:alpha(opacity=100);} /* 다음마우스오버시 위치 */ .item-silde-re .slick-prev:hover{background:url(/design/vusqorakfl/wizdesign/slide_prev.png) 50% 50% no-repeat; opacity:0.5; filter:alpha(opacity=50);} /* 이전화살표 마우스오버시 효과 */ .item-silde-re .slick-next:hover{background:url(/design/vusqorakfl/wizdesign/slide_next.png) 50% 50% no-repeat; opacity:0.5; filter:alpha(opacity=50);} /* 다음화살표 마우스오버시 효과 */ .item-silde-re .slick-prev, .item-silde-re .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;} .item-silde-re .slick-slider{margin-bottom:0;} .item-silde-re .slick-dots { position:absolute;bottom:-30px;left:-0px;padding:0;display:block;list-style: none;display:block;text-align:center;width:100%; border:0px solid #000; } .item-silde-re .slick-dots li{position: relative;display: inline-block;margin:0 4px;padding:0;cursor: pointer;} .item-silde-re .slick-dots li button{border:0;background: transparent;display:block;outline: none;line-height:0;font-size:0;color: transparent;padding:0;cursor: pointer;} .item-silde-re .slick-dots li button:hover,.slick-dots li button:focus{outline: none;} .item-silde-re .slick-dots li button:hover:before,.slick-dots li button:focus:before{opacity:1;} .item-silde-re .slick-dots li button:before{display:block;width:10px;height:10px;content: "";;background:#d1d1d1; border-radius:100px;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;} .item-silde-re .slick-dots li.slick-active button:before { background:#999; width:10px; /* 도트사이즈 */ opacity: 1; } /* 현재도트사이즈 */ /* 상품명 + 추가상품명 */ .item-wrap .item-thumb .binWrap { width: 210px; height:210px; background:rgba(0,0,0,0.6); } .item-wrap .item-thumb .binimg { width: 210px; height:100%; display:table; text-align:center; } .item-wrap .item-thumb .binimg .txt { width:100%; height:100%; color:#F6F6F6; display:table-cell; vertical-align:middle; text-align:center;} .item-info-re .item-pro { padding-top: 10px; font-size:13px; color:#333; font-weight:bold; } .item-info-re .item-name { padding-top: 10px; font-size:12px; color:#666; letter-spacing:0px;} .item-info-re .item-subname { padding-top: 10px; font-size:12px; color:#999; } .main_title {text-align:center; } .main_title h1 { font-size:38px; padding-bottom:5px; font-weight:600; color:#414141; text-transform:uppercase;letter-spacing:-1px; margin-top:100px; } .main_title .subtxt { font-size:16px; color:#000; font-weight:300; margin:0 0 30px 0; } .main_title .btn { text-align:center; margin:0 auto 30px; width:200px; } .main_title .btn a { display:block; text-align:center; color:#333; font-size:14px; font-weight:bold; border:3px solid #333; border-radius:15px; background: #f2f2f2; height: 36px; line-height: 34px; ;-moz-transition:0.3s !important;-webkit-transition:0.3s !important;transition:0.3s !important; } .main_title .btn a:hover { display:block; color:#fff; background: #333; } /* -- 플로팅팝업 -- */ #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/vusqorakfl/wizdesign/slide_prev_w.png) 50% 50% no-repeat; } /* 이전화살표 이미지경로 */ .intro_slide .slick-next{right:50%;margin-right:-300px;background:url(/design/vusqorakfl/wizdesign/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; } /* 현재도트사이즈 */ /* 포인트무비 */ #header .top-inner .top-inner-right li.join { position:relative; } #header .top-inner .top-inner-right li.join .pointBox {position:absolute;z-index:90;top:22px; left:50%;-o-transform:translate(-50%,0);-ms-transform:translate(-50%,0);-moz-transform:translate(-50%,0);-webkit-transform:translate(-50%,0);transform:translate(-50%,0); } #header .top-inner .top-inner-right li.join .pointBox > i{ display:block;color:#666;font-size:20px } #header .top-inner .top-inner-right li.join .pointBox > span{ margin:-9px 0 0 0;display:block;padding:1px 10px;background:#666;border-radius:5px;font-size:10px;line-height:18px;color:#fff;letter-spacing:0.5px } #header .top-inner .top-inner-right li.join .pointBox { -o-animation:animate-pointBox 0.7s linear infinite;-ms-animation:animate-pointBox 0.7s linear infinite;-moz-animation:animate-pointBox 0.7s linear infinite;-webkit-animation:animate-pointBox 0.7s linear infinite;animation:animate-pointBox 0.7s linear infinite;} @-o-keyframes animate-pointBox{50%{margin-top:4px }} @-ms-keyframes animate-pointBox{50%{margin-top:4px }} @-moz-keyframes animate-pointBox{50%{margin-top:4px }} @-webkit-keyframes animate-pointBox{50%{margin-top:4px }} @keyframes animate-pointBox{50%{margin-top:4px }} /* BASIC css end */