/* 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/foxstory01/wizdesign2/slide_prev.png) 50% 50% no-repeat; } /* 이전화살표 이미지경로 */ #main_slide .mslide .slick-next{right:50%;margin-right:-645px;background:url(/design/foxstory01/wizdesign2/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/foxstory01/wizdesign2/slide_prev.png) 50% 50% no-repeat; opacity:0.5; filter:alpha(opacity=50);} /* 이전화살표 마우스오버시 효과 */ #main_slide .mslide .slick-next:hover{background:url(/design/foxstory01/wizdesign2/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; } /* 현재도트사이즈 */ /* 상품슬라이드 */ .item-silde { width:100%; margin:0 auto 50px; position:relative; border:0px solid #000 } .item-silde .s-item { display:block; padding:5px; position:relative; } .item-silde .s-item .item-thumb { position:relative; margin-bottom:10px; } .item-silde .s-item .item-thumb img { width: 100%; /* height:px; */ } .slick-slider { 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;} .slick-slider:hover .slick-next, .item-silde .slick-slider:hover .slick-prev{display:block !important;} .invisible{visibility: hidden;} .slick-list{ overflow: hidden; display:block; margin:0;padding:10px 0 50px;} .slick-list:focus{outline: none;} .slick-list.dragging{ cursor: pointer;cursor: hand;} .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);} .slick-track{ left:0;top:0;display:block;} .slick-track:before,.slick-track:after{content: "";display: table;} .slick-track:after{clear:both;} .slick-loading .slick-track{visibility: hidden;} .slick-slide { float:left; height:100%; min-height:1px;display: none;} [dir="rtl"] .slick-slide { position:relative; } .slick-slide img { max-width:100%; } .slick-slide.slick-loading img{ display: none;} .slick-slide.dragging img{pointer-events: none;} .slick-initialized .slick-slide {display:block;} .slick-loading .slick-slide{visibility: hidden;} .item-silde .slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent;} .item-silde .slick-prev, .item-silde .slick-next{ position:absolute;display:block !important;cursor: pointer;width:32px;height:60px;font-size:0;top:33%; outline: none;padding:0;border:0; opacity:0.3; filter:alpha(opacity=30);background:transparent; z-index:2;} /* 화살표 처음위치 */ .item-silde .slick-prev { left:30px;background:url(/design/foxstory01/wizdesign/slide_prev6.png) 50% 50% no-repeat; } /* 이전화살표 이미지경로 */ .item-silde .slick-next{right:30px;background:url(/design/foxstory01/wizdesign/slide_next6.png) 50% 50% no-repeat; } /* 다음화살표 이미지경로 */ .item-silde:hover .slick-prev{ left:10px; opacity:1;filter:alpha(opacity=100);} /* 이전마우스오버시 위치 */ .item-silde:hover .slick-next{ right:10px;opacity:1;filter:alpha(opacity=100);} /* 다음마우스오버시 위치 */ .item-silde .slick-prev:hover{background:url(/design/foxstory01/wizdesign/slide_prev6.png) 50% 50% no-repeat; opacity:1; filter:alpha(opacity=100);} /* 이전화살표 마우스오버시 효과 */ .item-silde .slick-next:hover{background:url(/design/foxstory01/wizdesign/slide_next6.png) 50% 50% no-repeat; opacity:1; filter:alpha(opacity=100);} /* 다음화살표 마우스오버시 효과 */ .item-silde .slick-prev, .item-silde .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 .slick-slider{margin-bottom:0;} .item-silde .slick-dots { position:absolute;bottom:0px;left:-0px;padding:0;display:block;list-style: none;display:block;text-align:center;width:100%; border:0px solid #000; } .item-silde .slick-dots li{position: relative;display: inline-block;margin:0 4px;padding:0;cursor: pointer;} .item-silde .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 .slick-dots li button:hover,.slick-dots li button:focus{outline: none;} .item-silde .slick-dots li button:hover:before,.slick-dots li button:focus:before{opacity:1;} .item-silde .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 .slick-dots li.slick-active button:before { background:#999; width:10px; /* 도트사이즈 */ opacity: 1; } /* 현재도트사이즈 */ /* 미리보기아이콘노출 */ .item-thumb .over_view { position:absolute;width:100%;height:35px;text-align:center;opacity:0;bottom:0;right:0;left:0;z-index:10; } .item-wrap .li-over:hover .over_view {opacity:1;bottom:20px;} .item-thumb .over_view > * {cursor:pointer;} .item-thumb .over_view div { display: inline-block; opacity:1;position:relative;-webkit-transition:0.3s ease-in-out;-moz-transition:0.3s ease-in-out;-o-transition:0.3s ease-in-out;transition:0.3s ease-in-out; } .item-thumb .over_view div i {display:inline-block;margin:0 4px;border-radius:50%; color:#999; box-shadow:0 3px 4px rgba(150,150,150,0.1); background-color:rgba(255, 255, 255, 1); font-size:16px; width:35px; height:35px; line-height:35px; } .item-thumb .over_view div:hover i {display:inline-block;margin:0 4px;border-radius:50%; color:#000; box-shadow:0 3px 4px rgba(150,150,150,0.1); background-color:rgba(255, 255, 255, 1); font-size:16px; width:35px; height:35px; line-height:35px; } .item-thumb .over_view a.item-option{height:22px; background:url('/design/d4-0278/wizdesign/icon_opt.png') no-repeat center;} .item-thumb .over_view a.item-option img{ opacity:0; width:22px; height:22px;} /* 앵커메뉴 */ .tap_menu { width:100%;height:36px;margin:50px auto;border-bottom:1px solid #eee;text-align:center;} .tap_menu ul{font-size:0;line-height:0;letter-spacing:-4px;} .tap_menu ul li{ display:inline-block;letter-spacing:0;vertical-align:top; float:left;width:calc(100% / 8);} .tap_menu ul li a{ display:block; height:40px;line-height:40px;margin:0 0 0 -1px;border:1px solid #eee;border-bottom:none;background:#f6f6f6;color:#999;text-align:center;font-size:12px; text-transform:uppercase; } .tap_menu ul li a:hover{ background:#f1f1f1;color:#111;} .tap_menu ul li.on a { position:relative;z-index:1;height:41px;line-height:41px; border:1px solid #eee;border-bottom:none;background:#fff;font-weight:700;color:#ff487e; margin:0 0 0 0px; } .tap_menu span{display:inline-block;line-height:12px;margin:0 0 0 5px;padding:2px 4px;border-radius:5px;background:#d2d2d2;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/foxstory01/wizdesign2/main_arrow_prev_black.png) 50% 50% no-repeat; } /* 이전화살표 이미지경로 */ #rollbnr-box .item01 .slick-next{ right:-20px; background:url(/design/foxstory01/wizdesign2/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/foxstory01/wizdesign2/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/foxstory01/wizdesign2/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/foxstory01/wizdesign2/main_arrow_prev_black.png) 50% 50% no-repeat; } /* 이전화살표 이미지경로 */ .sbnr2 .slick-next{ right:-20px; background:url(/design/foxstory01/wizdesign2/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/foxstory01/wizdesign2/main_arrow_prev_black.png) 50% 50% no-repeat; opacity:1; filter:alpha(opacity=100);} /* 이전화살표 마우스오버시 효과 */ .sbnr2 .slick-next:hover{ right:0px;background:url(/design/foxstory01/wizdesign2/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/foxstory01/wizdesign2/arr-topr-up.png) 50% 50% no-repeat; } /* 이전화살표 이미지경로 */ .long-slide .slick-next{top:79px;right:0;;background:url(/design/foxstory01/wizdesign2/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/foxstory01/wizdesign2/arr-topr-up.png) 50% 50% no-repeat; opacity:0.8; filter:alpha(opacity=80);} /* 이전화살표 마우스오버시 효과 */ .long-slide .slick-next:hover{background:url(/design/foxstory01/wizdesign2/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 ;} /* 메인 신상품영역 */ /* 상품슬라이드 */ .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/foxstory01/wizdesign2/slide_prev.png) 50% 50% no-repeat; } /* 이전화살표 이미지경로 */ .item-silde-re .slick-next{right:20px;background:url(/design/foxstory01/wizdesign2/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/foxstory01/wizdesign2/slide_prev.png) 50% 50% no-repeat; opacity:0.5; filter:alpha(opacity=50);} /* 이전화살표 마우스오버시 효과 */ .item-silde-re .slick-next:hover{background:url(/design/foxstory01/wizdesign2/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/foxstory01/wizdesign2/slide_prev_w.png) 50% 50% no-repeat; } /* 이전화살표 이미지경로 */ .intro_slide .slick-next{right:50%;margin-right:-300px;background:url(/design/foxstory01/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; } /* 현재도트사이즈 */ .-ani { animation:opac 2s;-webkit-animation:opac 2s;transition:2s;}@keyframes opac{from {opacity:0}to {opacity:1}}@-webkit-keyframes opac{from {opacity:0}to {opacity:1} } .-ani {-webkit-transition-property: width,height,background-color,font-size,left,top,right,bottom,border,color,margin,opacity;-webkit-transition-duration:0.5s;-webkit-transition-timing-function:ease;-ms-transition-property: width,height,background-color,font-size,left,top,right,bottom,border,color,margin,opacity;-ms-transition-duration:0.5s;-ms-transition-timing-function:ease;-ms-transition-property: width,height,background-color,font-size,left,top,right,bottom,border,color,margin,opacity;-ms-transition-duration:0.5s;-ms-transition-timing-function:ease;-o-transition-property: width,height,background-color,font-size,left,top,right,bottom,border,color,margin,opacity;-o-transition-duration:0.5s;-o-transition-timing-function:ease;transition-property: width,height,background-color,font-size,left,top,right,bottom,border,color,margin,opacity;transition-duration:0.5s;transition-timing-function:ease;} .-ani:hover{-webkit-transition-property: width,height,background-color,font-size,left,top,right,bottom,border,color,margin,opacity;-webkit-transition-duration:0.5s;-webkit-transition-timing-function:ease;-ms-transition-property: width,height,background-color,font-size,left,top,right,bottom,border,color,margin,opacity;-ms-transition-duration:0.5s;-ms-transition-timing-function:ease;-ms-transition-property: width,height,background-color,font-size,left,top,right,bottom,border,color,margin,opacity;-ms-transition-duration:0.5s;-ms-transition-timing-function:ease;-o-transition-property: width,height,background-color,font-size,left,top,right,bottom,border,color,margin,opacity;-o-transition-duration:0.5s;-o-transition-timing-function:ease;transition-property: width,height,background-color,font-size,left,top,right,bottom,border,color,margin,opacity;transition-duration:0.5s;transition-timing-function:ease;} /* 베너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; -webkit-transition:all 0.3s;-khtml-transition:all 0.3s ease;-moz-transition:all 0.3s;-ms-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s; } .bnrArea li { margin:5px; border:0px solid #000; position:relative; /* background:rgba(0,0,0,0.6);*/ -webkit-transition:all 0.3s;-khtml-transition:all 0.3s ease;-moz-transition:all 0.3s;-ms-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s; } .bnrArea .imgup li:hover img { opacity: 0.8; filter: alpha(opacity=80); } .bnrArea .flex {display:flex;} .movt5:hover { -webkit-transform:translateY(-5px);transform: translateY(-5px); } /* 배너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); } .ins { margin:50px auto; } .ins .title {font-size:16px;line-height:1.5;margin:0px 0 10px;padding:0 0 10px;font-weight:600;color:#333;border-bottom:0px solid #ddd; text-align:center; } .ins .title > span{ display:inline-block;*display:inline;*zoom:1;vertical-align:bottom;font-size:13px;line-height:1.5;font-weight:normal;color:#999;margin:0 0 0 10px;} /* BASIC css end */