/* BASIC css start */ #preview_wrap { display:none} /* ============= 상단토글배너 =============== */ /* 상단배너 (사용설정시 삭제 : display:none;) ( 사용하지 않을 경우 .toggle_box { display:none;} ) */ .toggle_box .toggle_banner {margin:0px;width:100%; text-align:center;overflow:hidden; display:none; z-index:99; } .toggle_box .btnarea-open { position:relative; width:100% ; margin: 0 auto ;height:0px; z-index:99; border:0px solid #FF0000} .toggle_box .btnarea-closed { position:relative; width:100% ; margin: 0 auto ; height:0px;z-index:99;} .toggle_box .btnarea-open .openbtn { width:24px;height:43px; top:5px; left:30px !important; position:absolute;} /* 열기버튼위치 */ .toggle_box .btnarea-closed .closebtn { width:24px;height:43px; top:-60px; left:30px !important; position:absolute; } /* 닫기버튼위치 */ .toggle_box .closebtn {cursor:pointer;margin:0 auto;position:relative;} .toggle_box .openbtn {display:none;cursor:pointer;margin:0 auto;position:relative;} .toggle_box .img_bg { background-repeat:no-repeat; background-position:top center;} .toggle_box .img_bg a { display:block; } .toggle_box .tmslide .toggle_banner_img { padding:0; margin:0; display:block; width:100%; } .toggle_box .tmslide .img_bg { padding:0; margin:0; list-style:none; width:1904px; } .toggle_box .nav { position:relative;top:0px;width:0px;height:0px;z-index:3;margin:0 auto;} .toggle_box .prev {position:absolute;cursor:pointer;margin:0 auto;display:block;} .toggle_box .next { position:absolute;cursor:pointer;margin:0 auto;display:block;} .toggle_box .nav {} .toggle_box .openbtntxt { display:none; } .toggle_box .closebtntxt { display:none; } .toggle_box .prevtxt {display:none;} .toggle_box .nexttxt {display:none;} .toggle_box_top .toggle_banner { height:80px; } .toggle_box_top .tmslide .img_bg { height:80px; } .toggle_box_top .prev { top:5px; left:650px;} .toggle_box_top .next { top:65px; left:650px;} .toggle_box_top .prev {opacity:0.7; width:15px; height:10px; background:url(/design/winwinmall/96wiz/btn_up.png); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .toggle_box_top .next {opacity:0.7; width:15px; height:10px; background:url(/design/winwinmall/96wiz/btn_down.png); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .toggle_box_top .prev:hover {opacity:1; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .toggle_box_top .next:hover { opacity:1; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;} /* ============= 상단영역 =============== */ #header { position:relative; margin:0 auto; border-bottom:1px solid #F6F6F6; z-index:5; width:100%; } #header .top-inner-box.fixed {width:100%; position:fixed; margin:0 auto; top:0px; background:rgba(255,255,255,0.97); height:40px; border-bottom:1px solid ##ddd; z-index:6} #header .top-inner-box {width:100%; margin:0 auto; /* background:rgba(255,255,255,0.97); */ z-index:6; border-bottom:1px solid #ddd;} #header .top-inner { width:1300px;margin:0 auto; height:40px; padding:0; } #header .top-inner ul.top-inner-left {float:left;text-align:center } #header .top-inner ul.top-inner-left > li { float:left;position:relative;margin-left:15px;white-space:nowrap } #header .top-inner ul.top-inner-left > li > a{ font-size:11px;line-height:40px;color:#666;letter-spacing:0.5px;white-space:nowrap } #header .top-inner ul.top-inner-left > li.board > a {color:#333; letter-spacing:0.5px } #header .top-inner ul.top-inner-left > li:hover > a{ color:#333; font-weight:bold;} #header .top-inner ul.top-inner-left > li.home{ width:50px;background-color:rgba(55,55,55,0.9);margin-right:16px } #header .top-inner ul.top-inner-left > li.home:hover{background-color:rgba(55,55,55,0.7);} #header .top-inner ul.top-inner-left > li.home a {color:#fff;display:block } #header .top-inner ul.top-inner-left > li.home i { font-size:25px; line-height:40px; } #header .top-inner ul.top-inner-left > li:first-child { position:absolute; height:0;margin-left:0;overflow:hidden;-o-transition:height 0.3s 0.3s ease;-ms-transition:height 0.3s 0.3s ease;-moz-transition:height 0.3s 0.3s ease;-webkit-transition:height 0.3s 0.3s ease;transition:height 0.3s 0.3s ease;} #header .top-inner-box.fixed ul.top-inner-left > li:first-child {height:40px;-o-transition:height 0.3s 0.6s ease;-ms-transition:height 0.3s 0.6s ease;-moz-transition:height 0.3s 0.6s ease;-webkit-transition:height 0.3s 0.6s ease;transition:height 0.3s 0.6s ease;} #header .top-inner ul.top-inner-left > li:nth-child(2){margin-left:0;-o-transition:margin-left 0.3s 0.6s ease;-ms-transition:margin-left 0.3s 0.6s ease;-moz-transition:margin-left 0.3s 0.6s ease;-webkit-transition:margin-left 0.3s 0.6s ease;transition:margin-left 0.3s 0.6s ease;} #header .top-inner-box.fixed ul.top-inner-left > li:nth-child(2) {margin-left:70px;-o-transition: margin-left 0.3s 0.3s ease;-ms-transition:margin-left 0.3s 0.3s ease;-moz-transition:margin-left 0.3s 0.3s ease;-webkit-transition:margin-left 0.3s 0.3s ease;transition:margin-left 0.3s 0.3s ease;} #header .top-inner ul.top-inner-left > li:before {float:left;display:block;content:""; width:1px;height:9px;background:#d7d7d7;margin-top:16px;margin-left:-6px;margin-right:10px } #header .top-inner ul.top-inner-left > .add:before { float:left;display:block;content:""; width:0px;height:9px;background:#d7d7d7;margin-top:16px;margin-left:-6px;margin-right:10px } #header .top-inner ul.top-inner-left li i{ font-size:13px;line-height:40px;margin:0 5px 0 0;} #header .top-inner ul.top-inner-left > li.board:after{content:""; display:none; } #header .top-inner ul.top-inner-left > li.board:hover:after{display:block } #header .top-inner ul.top-inner-left > li.board:hover ul.-ly {display:block } #header .top-inner ul.top-inner-left > li.board ul.-ly {display:none; } #header .top-inner ul.top-inner-left > li.board ul.-ly li { min-width:100px;text-align:left; border-top:1px solid #eee; } #header .top-inner ul.top-inner-left > li.board ul.-ly li:first-child{border-top:0px solid #ddd;} #header .top-inner ul.top-inner-left > li.board ul.-ly li a {display:block;font-size:11px;line-height:30px;padding:0 13px;color:#999} #header .top-inner ul.top-inner-left > li.board ul.-ly li:hover a{background:#efefef } #header .top-inner .top-inner-right {float:right;text-align:center ; } #header .top-inner .top-inner-right li { float:left; position:relative; margin-right:15px; white-space:nowrap ; } #header .top-inner .top-inner-right li a { font-size:11px;line-height:42px;color:#333;letter-spacing:0.5px;white-space:nowrap } #header .top-inner .top-inner-right li.join a {color:#333; font-weight:bold; letter-spacing:0.5px } #header .top-inner .top-inner-right li:hover > a{ color:#333; font-weight:bold; } #header .top-inner .top-inner-right li .count{margin:0 0 0 3px;padding:3px 5px;background:#777;border-radius:4px;text-align:center;color:#fff;font-size:10px;font-weight:400;} #header .top-inner .top-inner-right ul > li:before { float:left;display:block;content:""; width:1px;height:9px;background:#d7d7d7;margin-top:16px;margin-left:-6px;margin-right:10px } #header .top-inner .top-inner-right .log:before { float:left;display:block;content:""; width:0px;height:9px;background:#d7d7d7;margin-top:16px;margin-left:-6px;margin-right:10px } #header .top-inner .top-inner-right li.myshop > a { color:#333; letter-spacing:0.5px } #header .top-inner .top-inner-right li.myshop:after{ content:""; display:none; } #header .top-inner .top-inner-right li.myshop:hover:after{display:block ;} #header .top-inner .top-inner-right li.myshop:hover ul.-ly {display:block; } #header .top-inner .top-inner-right li.myshop ul.-ly { display:none;} #header .top-inner .top-inner-right li.myshop ul.-ly li:before { width:0px;} #header .top-inner .top-inner-right li.myshop ul.-ly li { min-width:100px;text-align:left; border-top:1px solid #eee; margin-right:0px;} #header .top-inner .top-inner-right li.myshop ul.-ly li:first-child{border-top:0px solid #ddd;} #header .top-inner .top-inner-right li.myshop ul.-ly li a {display:block;font-size:11px;line-height:30px;padding:0 13px;color:#999; } #header .top-inner .top-inner-right li.myshop ul.-ly li:hover a{background:#efefef; } /* 레이어메뉴 */ .-ly {position:absolute;top:40px;left:50%; margin-left:-50px; padding:5px; border:1px solid #eee; background-color:rgba(255,255,255,0.95);z-index:90 ; } .-ly:after, .-ly:before { bottom: 100%;left: 50%; border: solid transparent;content: " ";height: 0;width: 0; position: absolute;pointer-events: none;} .-ly:after {border-color: rgba(255, 255, 255, 0); border-bottom-color: #ffffff; border-width: 5px;margin-left: -5px;} .-ly:before {border-color: rgba(221, 221, 221, 0);border-bottom-color: #dddddd; border-width: 6px;margin-left: -6px;} /* 포인트무비 */ #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 }} /* 검색창 */ .sch-box { position:relative; } .sch-box .sch { background:#ddd; height:26px; width:180px; border-radius:4px; margin-top:7px; } .sch-box .sch input { border:0 } .sch-box .sch .keyword { background:none; width:140px;height:22px;padding:2px 0px 0 0px;line-height:20px;font-size:11px;color:#666 ; } .sch-box .sch i { font-size:14px; } .sch-box .sch a { display:inline-block;color:#fff;font-size:14px; position:absolute;top:-5px;right:7px } .sch-box .sch:hover { background:#000; } .sch-box .sch:hover .keyword, .sch-box .sch:hover i { color:#fff; } #header-inner { position:relative; /* background:#fff; */ width:100%; } /* ▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼ 상단슬라이드배너영역 ▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼ */ #top_LBox { position:absolute; left:50% !important;overflow:hidden; margin-left:-630px; top:15px; width:200px; height:140px; z-index:2; } .Lslide .s-item { position:relative;display:block; height:120px; text-align:center; margin:0 auto;} .Lslide .s-item img{ text-align:center; margin:0 auto; width:140px; height:140px; } .Lslide .slick-prev,.Lslide .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;} /* 화살표 처음위치 */ .Lslide .slick-prev{left:50%;margin-left:-80px;background:url(/design/winwinmall/wizdesign/slide3_prev.png) 50% 50% no-repeat; } /* 이전화살표 이미지경로 */ .Lslide .slick-next{right:50%;margin-right:-80px;background:url(/design/winwinmall/wizdesign/slide3_next.png) 50% 50% no-repeat; } /* 다음화살표 이미지경로 */ .Lslide:hover .slick-prev{margin-left:-100px;opacity:1;filter:alpha(opacity=100);} /* 이전마우스오버시 위치 */ .Lslide:hover .slick-next{margin-right:-100px;opacity:1;filter:alpha(opacity=100);} /* 다음마우스오버시 위치 */ .Lslide .slick-prev:hover{background:url(/design/winwinmall/wizdesign/slide3_prev.png) 50% 50% no-repeat; opacity:0.5; filter:alpha(opacity=50);} /* 이전화살표 마우스오버시 효과 */ .Lslide .slick-next:hover{background:url(/design/winwinmall/wizdesign/slide3_next.png) 50% 50% no-repeat; opacity:0.5; filter:alpha(opacity=50);} /* 다음화살표 마우스오버시 효과 */ .Lslide .slick-prev,.Lslide .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;} .Lslide .slick-slider{margin-bottom:0;} .Lslide .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;} .Lslide:hover .slick-dots{ opacity:1;filter:alpha(opacity=100);} /* 이전마우스오버시 위치 */ .Lslide .slick-dots li{position: relative;display: inline-block;margin:0 4px;padding:0;cursor: pointer;} .Lslide .slick-dots li button{border:0;background: transparent;display:block;outline: none;line-height:0;font-size:0;color: transparent;padding:0;cursor: pointer;} .Lslide .slick-dots li button:hover,.slick-dots li button:focus{outline: none;} .Lslide .slick-dots li button:hover:before,.slick-dots li button:focus:before{opacity:1;} .Lslide .slick-dots li button:before{display:block;width:5px;height:5px;content: "";;background:#888; 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;} .Lslide .slick-dots li.slick-active button:before { background:#333; width:20px; /* 도트사이즈 */ opacity: 1; } /* 현재도트사이즈 */ #top_RBox { position:absolute; left:50% !important; overflow:hidden; margin-left:400px; top:0px; width:240px; height:150px; z-index:2; border:0px solid #000 } .Rslide .s-item { position:relative;display:block; height:150px; text-align:center; margin:0 auto;} .Rslide .s-item img{ text-align:center; width:140px; height:140px; } .Rslide .slick-prev,.Rslide .slick-next{position:absolute;display:block !important;cursor: pointer;width:30px;height:30px;font-size:0;margin-top:0px;outline: none;padding:0;border:0; opacity:0; filter:alpha(opacity=0);background:transparent; z-index:2;} /* 화살표 처음위치 */ .Rslide .slick-prev{top:0%; right:0; background:url(/design/winwinmall/wizdesign/arr-topr-up.png) 50% 50% no-repeat; } /* 이전화살표 이미지경로 */ .Rslide .slick-next{top:30px;right:0;;background:url(/design/winwinmall/wizdesign/arr-topr-down.png) 50% 50% no-repeat; } /* 다음화살표 이미지경로 */ .Rslide:hover .slick-prev{ opacity:0.5;filter:alpha(opacity=50);} /* 이전마우스오버시 위치 */ .Rslide:hover .slick-next{ opacity:0.5;filter:alpha(opacity=50);} /* 다음마우스오버시 위치 */ .Rslide .slick-prev:hover{background:url(/design/winwinmall/wizdesign/arr-topr-up.png) 50% 50% no-repeat; opacity:0.8; filter:alpha(opacity=80);} /* 이전화살표 마우스오버시 효과 */ .Rslide .slick-next:hover{background:url(/design/winwinmall/wizdesign/arr-topr-down.png) 50% 50% no-repeat; opacity:0.8; filter:alpha(opacity=80);} /* 다음화살표 마우스오버시 효과 */ .Rslide .slick-prev,.Rslide .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;} .Rslide .slick-slider{margin-bottom:0;} .Rslide .slick-dots{position:absolute;bottom:5px;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;} .Rslide:hover .slick-dots{ opacity:1;filter:alpha(opacity=100);} /* 이전마우스오버시 위치 */ .Rslide .slick-dots li{position: relative;display: inline-block;margin:0 4px;padding:0;cursor: pointer;} .Rslide .slick-dots li button{border:0;background: transparent;display:block;outline: none;line-height:0;font-size:0;color: transparent;padding:0;cursor: pointer;} .Rslide .slick-dots li button:hover,.slick-dots li button:focus{outline: none;} .Rslide .slick-dots li button:hover:before,.slick-dots li button:focus:before{opacity:1;} .Rslide .slick-dots li button:before{display:block;width:5px;height:5px;content: "";;background:#888; 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;} .Rslide .slick-dots li.slick-active button:before { background:#333; width:20px; /* 도트사이즈 */ opacity: 1; } /* 현재도트사이즈 */ /* ============= 로고영역 =============== */ #header-inner .hd_logo_box { position:relative;height:150px;margin:0 auto; clear:both; } #header-inner .hd_logo {position:relative; z-index:2; top:25px; width:300px;height:100px; margin:0 auto; text-align:center; } #header-inner .hd_logo img{ position:absolute; left:0; } #header-inner .hd_logo .off{top:0;visibility:visible;filter:alpha(opacity=100);opacity:1.0;-webkit-opacity:1.0;} #header-inner .hd_logo:hover .off{top:-15px;visibility:hidden;filter:alpha(opacity=0);opacity:0;-webkit-opacity:0;} #header-inner .hd_logo .on{top:15px;visibility:hidden;filter:alpha(opacity=0);opacity:0;-webkit-opacity:0;} #header-inner .hd_logo:hover .on{top:0;visibility:visible;filter:alpha(opacity=100);opacity:1.0;-webkit-opacity:1.0;} /* ============= 주메뉴영역 =============== */ #header #hd_Allbox.fixed {width:100%; position:fixed; margin:0 auto; background:rgba(255,255,255,.97);box-shadow:0 3px 4px rgba(0,0,0,0.15); border-top:0px solid #eee; border-bottom:1px solid #eee; top:40px;} #header #hd_Allbox {width:100%; margin:0 auto; /* background:rgba(255,255,255,.97); */ box-shadow:none; border-top:1px solid rgba(0,0,0,.08); border-bottom:1px solid rgba(0,0,0,.08);transition:box-shadow 1s ease;-webkit-transition:box-shadow 1s ease; } #hd_Allbox { width:100%; margin:0 auto; height:50px; border:0px solid #FF9696; position:relative; filter:alpha(opacity=100); opacity:1; } #hd_menu { width:1300px; margin:0 auto; height:50px; position:relative; } #hd_menu .allmenu { width:50px;height:50px ; float:left; display:table-cell; position:relative;} #hd_menu .btn-allmenu { display:block; position:absolute;top:12px;left:13px;-o-transition:background 0.15s 0.0s ease-in-out;-ms-transition:background 0.15s 0.0s ease-in-out;-moz-transition:background 0.15s 0.0s ease-in-out;-webkit-transition:background 0.15s 0.0s ease-in-out;transition:background 0.15s 0.0s ease-in-out;} #hd_menu .allmenu:hover { color:#fff; background:#333;-o-transition:background 0.15s 0.0s ease-in-out;-ms-transition:background 0.15s 0.0s ease-in-out;-moz-transition:background 0.15s 0.0s ease-in-out;-webkit-transition:background 0.15s 0.0s ease-in-out;transition:background 0.15s 0.0s ease-in-out;} #hd_menu .allmenu:hover .btn-allmenu { display:block; color:#fff; -o-transition:background 0.15s 0.0s ease-in-out;-ms-transition:background 0.15s 0.0s ease-in-out;-moz-transition:background 0.15s 0.0s ease-in-out;-webkit-transition:background 0.15s 0.0s ease-in-out;transition:background 0.15s 0.0s ease-in-out;} .all_Wrap { float:left; width:50px;height:50px; position:relative; border-right:1px solid rgba(0,0,0,.08);border-left:1px solid rgba(0,0,0,.08);cursor:pointer;font-size:0;transition-delay:.05s;-webkit-transition-delay:.05s; } .all_btn {position:absolute;top:18px; left:15px; width:20px;height:17px;overflow:visible;cursor:pointer;-webkit-transition:all 400ms ease-out 0ms;-moz-transition:all 400ms ease-out 0ms;-o-transition:all 400ms ease-out 0ms;transition:all 400ms ease-out 0ms;} .all_btn .line {position:absolute;background-color:#666;overflow:hidden;width:20px;height:2px;left:0;-webkit-transition:all 400ms ease-out 0ms;-moz-transition:all 400ms ease-out 0ms;-o-transition:all 400ms ease-out 0ms;transition:all 400ms ease-out 0ms;} .all_btn .line:nth-child(1) {top:0;left:0;animation-delay:0.33s;} .all_btn .line:nth-child(2) {top:6px;left:0;animation-delay:0s; } .all_btn .line:nth-child(3) {top:12px;left:0;animhd_menuation-delay:0.66s;} .all_Wrap.clicked { background:rgba(255,255,255,.97); } .all_Wrap.clicked .all_btn .line:nth-child(1) {-webkit-transform:translateY(6px) rotate(45deg);transform:translateY(6px) rotate(45deg);-webkit-transition:all 400ms ease-out 0ms;-moz-transition:all 400ms ease-out 0ms;-o-transition:all 400ms ease-out 0ms;transition:all 400ms ease-out 0ms;width:20px;} .all_Wrap.clicked .all_btn .line:nth-child(2) {opacity:0;-webkit-transition:all 400ms ease-out 0ms;-moz-transition:all 400ms ease-out 0ms;-o-transition:all 400ms ease-out 0ms;transition:all 400ms ease-out 0ms;width:13px;} .all_Wrap.clicked .all_btn .line:nth-child(3) {-webkit-transform:translateY(-6px) rotate(-45deg);transform:translateY(-6px) rotate(-45deg);-webkit-transition:all 400ms ease-out 0ms;-moz-transition:all 400ms ease-out 0ms;-o-transition:all 400ms ease-out 0ms;transition:all 400ms ease-out 0ms;width:20px;} /* 전체메뉴 */ #hd_menu nav { } #allMenu { position:absolute; width:1300px; top:50px;left:0; display:none; background-color:rgba(255,255,255,1); border:1px solid rgba(0,0,0,.08); text-align:left;z-index:99; } #allMenu .allLeft { float:left; width:70%; border-right:1px #eee solid; padding:35px 0px; vertical-align:top; text-transform:uppercase; max-height:400px; } #allMenu .allLeft .mCSB_inside > .mCSB_container{padding-right:1%} #allMenu .allLeft_inner ul { font-size:0; line-height:0; letter-spacing:0;text-align:left; } #allMenu .allLeft_inner .cate1ul { padding-left:20px; } #allMenu .allLeft_inner .cate1 { margin:0 0 30px;width:20%;padding:0 2%;display:inline-block;*display:inline;*zoom:1;vertical-align:top; border:0px #000 solid; } #allMenu .allLeft_inner .cate1 > a { width:100%;color:#333; font-size:12px;padding:6px 2%;line-height:20px;height:auto;margin-bottom:6px;font-weight:500;display:block; border-bottom:1px #eaeaea solid; } #allMenu .allLeft_inner .cate1 > a:hover { color:#940000; } #allMenu .allLeft_inner .cate2 li { position:relative; width:96%; } #allMenu .allLeft_inner .cate2 li > i { position:absolute; z-index:9; right:0px;top:8px; color:#999; font-size:12px; } #allMenu .allLeft_inner .cate2 a,#allMenu .allRight a { position:relative; padding:4px 5px;line-height:18px; border-radius:3px; -webkit-border-radius:3px;display:block;white-space:normal; background:rgba(255,255,255,0);-webkit-transition:background 200ms linear;transition:background 200ms linear;} #allMenu .allLeft_inner .cate2 li:hover > a,#allMenu .allRight a:hover{ color:#fff; background:#b1b1b1; } #allMenu .allLeft_inner .cate2 li:hover > i { color:#fff; } /* 중분류카테고리 */ .allLeft_inner .cate2 .cate3 { position:absolute; z-index:9; left:50%; transform:translateX(40%); width: 150px !important;border-radius:4px;border:1px solid #eaeaea;background:rgba(255,255,255,0) !important; padding: 5px; top:0px; visibility:hidden; opacity:1; -webkit-transition:all 0.3s;-moz-transition:all 0.3s;-ms-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s;} .allLeft_inner .cate2 li:hover .cate3 { top:0px;opacity:1; visibility:visible; background:rgba(255,255,255,1) !important; } .allLeft_inner .cate2 > ul.cate3 { background-color:rgba(25,25,25,0.8) !important; padding: 5px 0px; width: 200px !important; } .allLeft_inner .cate2 > li:hover > ul.cate3 > li { display:block; margin: 0px; background:rgba(255,255,255,1) !important; } .allLeft_inner .cate2 > ul.cate3 > li > a { display: block;width:100%;color: #bdbdbd;line-height: 24px;font-size: 10px; text-align: center; font-weight:600; } .allLeft_inner .cate2 > ul.cate3 > li:hover > a { color:#fff; background-color:rgba(0,0,0,0.5);} #allMenu .allRight { width:30%; margin-left:-1px;padding-left:1.1%; background:#fff; display:table-cell; vertical-align:top; padding:35px 0px; float:left;text-transform:uppercase; } #allMenu .allRight a {color:#666;} #allMenu .allRight a:hover{ color:#fff; background:#b1b1b1;} #allMenu .allRight .all_board_li h2{color:#222;font-size:11px;padding:6px 5px;line-height:16px;height:auto;margin-bottom:6px;font-weight:500;display:block;border-bottom:1px #eaeaea solid;} #allMenu .allRight .all_board_inner .all_board_li {margin:0 5% 30px;width:39.5%;display:inline-block;zoom:1;*display:inline;vertical-align:top;} #allMenu .allRight .all_cs_center .all_board_li{margin:0 5% 20px;width:90%;} #allMenu .allRight .all_board_li .cs_tel_inner{padding-left:6px;font-size:11px;color:#555;line-height:160%;} #allMenu .allRight .all_board_li .cs_tel_inner .cs_tel{font-family:Oswald;font-size:15px;color:#333;padding:5px 0 6px;} #allMenu .allRight .all_board_li .cs_tel_inner .cs_time{ font-size:11px;color:#333;padding:5px 0 6px;} #allMenu .allRight .all_bank_center .all_board_li{margin:0 5% 20px;width:90%;} #allMenu .allRight .all_board_li .cs_bank_inner {padding-left:6px;font-size:11px;color:#555;line-height:160%;} #allMenu .allRight .all_board_li .cs_bank_inner .cs_bank{font-family:Oswald;font-size:13px;color:#333;padding:5px 0 6px;} #allMenu .allRight .all_board_li .cs_bank_inner .cs_bank{ font-size:11px;color:#333;padding:5px 0 6px;} #hd_menu .hd_left { float:left; border:0px #000 solid; width:1148px; text-align:center;} /* 카테고리 */ .category { box-sizing:border-box; font-size:0; line-height:0; } .category li { position:relative; display:inline-block; } .category li > a { display:block; color:#000; letter-spacing:0; line-height:50px; font-size:15px; font-family: 'Montserrat',Roboto,'나눔고딕',"Nanum Gothic"; font-weight:500; } /* 메뉴간격 */ .category li:hover > a {color:#9c9c9c; } .category li:last-child > a { margin-right:0;} /* 중분류카테고리 */ .category .sub-category { visibility:hidden; opacity:0; -webkit-transition:all 0.3s;-moz-transition:all 0.3s;-ms-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s; } .category > li:hover .sub-category { top:50px;opacity:1; visibility:visible; } .category .sub-category > ul { border:0px solid #eee; background-color:rgba(255,255,255,0.95); width: 130px; border-radius:0px;} .category .sub-category > ul > li { display:block; margin: 0px; } .category .sub-category > ul > li > a { display: block; color: #666; line-height: 30px; font-size: 12px; padding:0 10px; text-align: left; -webkit-transition:all 0.3s;-moz-transition:all 0.3s;-ms-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s; } .category .sub-category > ul > li:hover > a { color:#fff; background:#b1b1b1; border-radius:3px; } /* 레이어화살표*/ .-ly1 { position:absolute;top:55px;left:50%; transform:translateX(-50%); padding:5px; border:1px solid #eee; background-color:rgba(255,255,255,0.95);z-index:90 ; } .-ly1:after, .-ly1:before { bottom: 100%;left: 50%; border: solid transparent;content: " "; height: 0;width: 0; position: absolute;pointer-events: none; } .-ly1:after {border-color: rgba(255, 255, 255, 0); border-bottom-color: #fff; border-width: 5px;margin-left: -5px;} .-ly1:before {border-color: rgba(221, 221, 221, 0);border-bottom-color: #dddddd; border-width: 6px;margin-left: -6px;} .category .sub-category li { position:relative; width:96%; text-align: left !important;} .category .sub-category li > i { position:absolute; z-index:9; right:0px;top:8px; color:#999; font-size:12px; } .category .sub-category a { display:block; position:relative; padding:4px 5px;line-height:18px; border-radius:3px; -webkit-border-radius:3px;display:block;white-space:normal; background:rgba(255,255,255,0);-webkit-transition:background 200ms linear;transition:background 200ms linear;} .category .sub-category li:hover > a:hover{ color:#333; background:#ebebeb; } .category .sub-category li:hover > i { color:#fff; } /* 소분류카테고리 */ .category .sub-category .cate3 { position:absolute; z-index:9; left:50%; transform:translateX(50%); width: 130px !important;border-radius:0px;border:1px solid #eaeaea;background:rgba(255,255,255,0) !important; padding: 5px; top:0px; visibility:hidden; opacity:1; -webkit-transition:all 0.3s;-moz-transition:all 0.3s;-ms-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s;} .category .sub-category li:hover .cate3 { top:0px;opacity:1; visibility:visible; background:rgba(255,255,255,1) !important; } #hd_menu .time { float:right; border-left:1px #eee solid; border-right:1px #eee solid; width:100px; line-height:50px; height:50px;text-align:center; font-weight:bold; background-color:rgba(255,255,255,0.95);} #hd_menu .time i { font-size: 14px; margin-top:5px; margin-right:5px; } #hd_menu .time a { font-size: 14px; } #hd_menu .time:hover { background:#333; color:#fff } #hd_menu .time:hover a { display:block; color:#fff ; line-height:50px; } /* 핫딜 */ .timeWarp { margin:0 auto 50px; position:relative; text-align:center; width:100% ; height:300px; background:url(/design/winwinmall/wizdesign/time-bg.gif) 50% 50% no-repeat; padding-top:40px; } /* 핫딜 배경이미지 */ .timeWarp:after { content: ""; display: block; clear: both; } .timeWarp p { margin-bottom:5px; } .timeWarp .txt1 { font-size: 16px; color:#eee; } .timeWarp .txt2 { font-size: 40px; color:#ecb67c; font-weight: bold; } .timeWarp .txt3 { font-size: 13px; color:#eee; } .timeWarp .txt4 { font-size: 13px; color:#eee; } .timeWarp .count { position:absolute;bottom:20px;left:50% ; margin-left:-240px; } /*! CountdownTimer for jQuery @version2.0.0 (https://harshen.github.io/jQuery-countdownTimer/). * Written by Harshen Pandey (https://remote.com/harshen) January 2014. * @license MIT (https://github.com/harshen/jQuery-countdownTimer/blob/master/LICENSE.md) * and GPLv3 (https://github.com/harshen/jQuery-countdownTimer/blob/master/LICENSE-GPL.md). * @release - 27/10/2017 * Copyright (c) 2017 - 2020 Harshen Pandey * Please attribute the author if you use it. */ /* jQuery.countdownTimer.css*/ .style { width: 100%; font-family: sans-serif; font-weight: bold; border-style: solid; } .colorDefinition { margin:0 auto; background: #fff; color : #dfd700; border-color: #fff; } .size_xl { font-size:50px; border-width: 8px; border-radius: 6px; } .size_lg { font-size:40px; border-width: 7px; border-radius: 5px; } .size_md { font-size:30px; border-width: 5px; border-radius: 4px; } .size_sm { font-size:20px; border-width: 3px; border-radius: 3px; } .size_xs { font-size:15px; border-width: 2px; border-radius: 2px; } .lang-rtl { direction: rtl; } .displaySection { display: inline-block; margin:0 3px; font-size: 75%; text-align: center; border-right: 0px solid #F0068E; border-radius: 5px; background: #333; padding:3px 0; } .timerDisplay > span.displaySection:last-child { border-right: none; } .label6 .displaySection { width: 15%; } .label5 .displaySection { width: 18%; } .label4 .displaySection { width: 23.5%; } .label3 .displaySection { width: 31.8%; } .label2 .displaySection { width: 48.6%; } .label1 .displaySection { width: 98%; } .numberDisplay { font-size: 200%; } .periodDisplay { display: block; } .timerDisplay { clear: both; width: 100%; padding: 8px 4px; text-align: center; float: left; } .labelformat { display: inline-block; width: 460px; font-size: 15px; border-width: 7px; border-radius: 5px; } /* BASIC css end */