/* BASIC css start */ /* ===== 패널기본소스 ===== */ .side-r-box { width:70px; position:fixed; top:0px; right:0px; z-index:9; height: 100%; border-left:0px solid #eee; } .side-r-box .r_quick_inner { width:70px; position:relative; z-index:2; height:100%; } .side-r-box .r_quick_inner .q_btn { position: absolute; top: 50%; right:69px ; background:#fff; width: 30px; height: 50px; z-index:9; border:1px solid #ddd; border-right:1px solid #fff ; display: block; cursor: pointer;} .side-r-box .r_quick_inner .q_btn i { color:#000; font-size:30px; line-height: 50px; } .side-r-box .r_quick_inner .q_btn.is-active i { -ms-transform: rotate(180deg); /* IE 9 */ -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */ transform: rotate(180deg); } .door_toggle { position: absolute; top: 50%; margin-top:-200px; left: -0px; border-radius: 0%; -webkit-border-radius: 0%; cursor: pointer; border:1px solid #ddd} .side-r-box .hamburger { text-align:center; background:#fff ; padding:0px; width: 70px; height: 40px; border-bottom:1px solid #fff} .side-r-box .hamburger .hamburger-box { width: 40px; height: 40px; display: inline-block; position: relative; text-align:center; } .side-r-box .hamburger .hamburger-inner { display: block; top: 50%; margin-top: -2px; left:23%} .side-r-box .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after{ position: absolute; background:#000 !important; width:20px !important; height:2px!important;/* 두께 */ border-radius: 4px; position: absolute; transition-property: transform;transition-duration: 0.15s;transition-timing-function: ease; } .side-r-box .hamburger:hover { opacity: 1; } .side-r-box .hamburger-inner::before, .hamburger-inner::after { content: ""; display: block; } .side-r-box .hamburger-inner::before { top: -5px; } .side-r-box .hamburger-inner::after { bottom: -5px; } .hamburger--spin-r .hamburger-inner { transition-duration: 0.22s; transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spin-r .hamburger-inner::before { transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; } .hamburger--spin-r .hamburger-inner::after { transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spin-r.is-active .hamburger-inner { transform: rotate(-225deg); transition-delay: 0.12s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--spin-r.is-active .hamburger-inner::before { top: 0; opacity: 0; transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; } .hamburger--spin-r.is-active .hamburger-inner::after { bottom: 0; transform: rotate(90deg); transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); } /* ===== 아이콘 ===== */ .side-r-box .r_quick_inner .scroll { width:180px; height:100%; } /* 스크롤박스 */ .side-r-box .r_icon { position:relative; display:block; text-align:center; width: 70px; background:#fff; border-left:0px solid #eee; border-bottom:1px solid #fff; padding: 10px 0 ; } .side-r-box .r_icon a { display:block; } .side-r-box .r_icon i { color:#666; font-size: 20px; } .side-r-box .r_icon:hover i{color:#222;} .side-r-box .r_icon .cart { position:absolute; top:4px; left:0px; width:15px; height:15px;line-height:15px; background:#ffbb28;border-radius:50%;text-align:center;color:#fff;font-size:9px;font-weight:400;} .side-r-box .kaka { background:#ffe000; } .side-r-box .kaka i { color:#191919 ; font-size: 30px; } .side-r-box .r_icon a span { text-align: center; display: block; font-size: 10px; color: #a0a0a0; padding-top:3px !important; } .side-r-box .r_bnr1 { margin-top:20px; } #scroll_box { width:200px; position:fixed; top:0px; right:-200px; z-index:9; height: 100%; border-left:1px solid #eee; background:#fff; } #scroll_box .r_box { margin: 0 auto; width: 160px; position:relative; } #scroll_box .r_box .scrollclose { position: absolute; top: 50%; left:-75px ; background:#222; width: 30px; height:30px; border-radius: 50%; padding: 10px;text-align: center; z-index:9; border:1px solid #ddd; display: block; cursor: pointer; opacity: 0; display:none; } #scroll_box .r_box .scrollclose i { color:#fff; font-size:30px; line-height: 30px; hidden; text-align: center; } #scroll_box .r_box .scrollclose.is-active { opacity: 1; display:block; } /* ===== 사각박스메뉴 ===== */ .r_box .r_board_box {width:160px;margin-top:10px; } .r_box .r_board_box ul {} .r_box .r_board_box li { display:inline-block; _display:inline; *display:inline; } .r_box .r_board_box li a {display:block; color:#7c7c7c; width:78px; padding:5px; margin-bottom:2px;box-sizing:border-box;border:1px solid #eee; text-align:center;font-size:11px; letter-spacing: 0px; -webkit-transition:all 0.35s ease;-khtml-transition:all 0.35s ease;-moz-transition:all 0.35s ease;-ms-transition:all 0.35s ease;-o-transition:all 0.35s ease;transition:all 0.35s ease;} .r_box .r_board_box li a:hover {color:#fff; background:#333;border:1px solid #333; } #scroll_box .r_bnr2 { margin-top:10px; } /* ===== 고객센터 ===== */ #scroll_box .r_box .r_call { margin-top:30px; } #scroll_box .r_box .r_call .tit { margin: 8px 0 10px; font-size: 11px; color: #666; } #scroll_box .r_box .r_call .tel { font-size:15px; color: #333;font-weight: 700; padding: 0 0 10px; } #scroll_box .r_box .r_call .line { width:10px;height:2px; margin:10px 0; background:#999; } #scroll_box .r_box .r_call p { font-size:11px; color: #666; } #scroll_box .r_box .r_call p em { letter-spacing: -1px; width: 32px; height: 18px; line-height: 18px; background: #f2f2f2; display: inline-block; text-align: center; border-radius: 5px; margin:5px 0;} /* ===== 뱅크센터 ===== */ #scroll_box .r_box .r_bank { } #scroll_box .r_box .r_bank .tit { margin: 8px 0 10px; font-size: 11px; color: #666;} #scroll_box .r_box .r_bank .line { width:10px;height:2px; margin:10px 0; background:#999; } #scroll_box .r_box .r_bank p { font-size:11px; color: #666; line-height: 17px; } /* ===== 오늘본상품 ===== */ .vtit { width:160px; text-align:left; margin:0 auto;padding:5px 0px; border-top:0px solid #d5d5d5; border-bottom:0px solid #d5d5d5; margin-bottom:0px; font-size:11px;font-weight:700; color:#333; } #viewArea { position:relative;width:160px;margin:0 auto; over-flower} #viewArea .s-item { position:relative;display:block; text-align:center; } #viewArea .s-item img{ margin:0 auto; width:160px; /* height:px; */ text-align:center;} #viewArea .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;} #viewArea .imgList .slick-slider:hover .slick-next,#viewArea .imgList .slick-slider:hover .slick-prev{display:block !important;} #viewArea .imgList .invisible{visibility: hidden;} #viewArea .imgList .slick-list{position: relative;overflow: hidden;display:block;margin:0;padding:0;} #viewArea .imgList .slick-list:focus{outline: none;} #viewArea .imgList .slick-list.dragging{cursor: pointer;cursor: hand;} #viewArea .imgList .slick-slider .slick-track,#viewArea .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);} #viewArea .imgList .slick-track{position: relative;left:0;top:0;display:block;} #viewArea .imgList .slick-track:before,.slick-track:after{content: "";display: table;} #viewArea .imgList .slick-track:after{clear:both;} #viewArea .imgList .slick-loading .slick-track{visibility: hidden;} #viewArea .imgList .slick-slide{ float: left;height:100%;min-height:1px;display: none;} [dir="rtl"] .imgList .slick-slide{ } #viewArea .imgList .slick-slide img{ display:block; } #viewArea .imgList .slick-slide.slick-loading img{display: none;} #viewArea .slick-slide.dragging img{pointer-events: none;} #viewArea .slick-initialized .slick-slide {display:block;} #viewArea .imgList .slick-loading .slick-slide{visibility: hidden;} #viewArea .imgList .slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent;} #viewArea .imgList .slick-prev,#viewArea .imgList .slick-next {position:absolute;display:block !important;cursor: pointer;width:16px;height:30px;font-size:0;top:50%;margin-top:-15px;outline: none;padding:0;border:0; opacity:0; filter:alpha(opacity=0);background:transparent; z-index:2;} /* 화살표 처음위치 */ #viewArea .imgList .slick-prev{left:5px; background:url(/design/schtak/wiz2022/slide3_prev.png) 50% 50% no-repeat; } /* 이전화살표 이미지경로 */ #viewArea .imgList .slick-next{right:5px; background:url(/design/schtak/wiz2022/slide3_next.png) 50% 50% no-repeat; } /* 다음화살표 이미지경로 */ #viewArea .imgList:hover .slick-prev{ opacity:1;filter:alpha(opacity=100);} /* 이전마우스오버시 위치 */ #viewArea .imgList:hover .slick-next{ opacity:1;filter:alpha(opacity=100);} /* 다음마우스오버시 위치 */ #viewArea .imgList .slick-prev:hover{ opacity:0.5; filter:alpha(opacity=50);} /* 이전화살표 마우스오버시 효과 */ #viewArea .imgList .slick-next:hover{ opacity:0.5; filter:alpha(opacity=50);} /* 다음화살표 마우스오버시 효과 */ #viewArea .imgList .slick-prev,#viewArea .imgList .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;} #viewArea .imgList .slick-slider{margin-bottom:0;} #viewArea .imgList .slick-dots{ position:absolute;bottom:0px;padding:0;display:block;list-style: none;display:block;text-align:center;width:100%;} #viewArea .imgList .slick-dots li {position: relative;display: inline-block;margin:0 2px;padding:0;cursor: pointer;} #viewArea .imgList .slick-dots li button{border:0;background: transparent;display:block;outline: none;line-height:0;font-size:0;color: transparent;padding:0;cursor: pointer;} #viewArea .imgList .slick-dots li button:hover,.slick-dots li button:focus{outline: none;} #viewArea .imgList .slick-dots li button:hover:before,.slick-dots li button:focus:before{opacity:1;} #viewArea .imgList .slick-dots li button:before{display:block;width:5px;height:5px;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;} #viewArea .imgList .slick-dots li.slick-active button:before { background:#333; width:10px; /* 도트사이즈 */ opacity: 1; } /* 현재도트사이즈 */ /* BASIC css end */