@charset "utf-8"; /************************************** nature ***************************************/ /* reset:Start */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button,header{margin:0;padding:0} fieldset,img{border:0 none} dl,ul,ol,menu,li{list-style:none} blockquote,q{quotes:none} blockquote:before,blockquote:after,q:before,q:after{content:'';content:none} input,select,textarea,button{vertical-align:middle} input {outline:none; border:0;} input:focus,button:focus,textarea:focus{outline:none;} button{border:0 none;background-color:transparent;cursor:pointer} body{background:#fff;-webkit-text-size-adjust:none;} body,th,td,input,select,textarea,button{font-size:13px;font-family:'noto',Tahoma,sans-serif;font-weight:400; color:#666} /*body,th,td,input,select,textarea,button{font-family:'나눔고딕',Nanum Gothic}*/ a{color:#666;text-decoration:none} a:active,a:hover{text-decoration:none;} address,caption,cite,code,dfn,em,var{font-style:normal;font-weight:400} .clear{clear:both} figure{line-height:0} table caption{display:none !important;} *,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;} .blind,legend,.hidden{display:block;overflow:hidden;position:absolute;top:-1000em;left:0} strong {font-weight:600} hr {display:none;} input[type="submit"] {cursor:pointer;} input[type=text]::-ms-clear {display:none;} /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block;} .clearfix:after {content:''; display:block; clear:both;} /* * Nanum Barun Gothic (Korean) http://hangeul.naver.com */ @font-face { font-family: 'noto'; font-style: normal; font-weight: 200; src: local('Noto Sans Light'), local('NotoSans-Light'); src: url(../font/notokr-light.eot); src: url(../font/notokr-light.eot?#iefix) format('embedded-opentype'), url(../font/notokr-light.woff2) format('woff2'), url(../font/notokr-light.woff) format('woff'), url(../font/notokr-light.ttf) format('truetype') } @font-face { font-family: 'noto'; font-style: normal; font-weight: 400; src: local('Noto Sans Regular'), local('NotoSans-Regular'); src: url(../font/notokr-regular.eot); src: url(../font/notokr-regular.eot?#iefix) format('embedded-opentype'), url(../font/notokr-regular.woff2) format('woff2'), url(../font/notokr-regular.woff) format('woff'), url(../font/notokr-regular.ttf) format('truetype') } @font-face { font-family: 'noto'; font-style: normal; font-weight: 600; src:local('Noto Sans Medium'), local('NotoSans-Medium'); src:url(../font/notokr-medium.eot); src:url(../font/notokr-medium.eot?#iefix) format('embedded-opentype'), url(../font/notokr-medium.woff2) format('woff2'), url(../font/notokr-medium.woff) format('woff'), url(../font/notokr-medium.ttf) format('truetype') } @font-face { font-family: 'noto'; font-style: normal; font-weight: 800; src:local('Noto Sans Bold'), local('NotoSans-Bold'); src:url(../font/notokr-bold.eot); src:url(../font/notokr-bold.eot?#iefix) format('embedded-opentype'), url(../font/notokr-bold.woff2) format('woff2'), url(../font/notokr-bold.woff) format('woff'), url(../font/notokr-bold.ttf) format('truetype') } .point {color:#70963f} .loading {position:fixed; top:0; left:0; z-index:9999; width:100%; height:100%} .loading:after {display:block; content:''; position:absolute; width:100%; height:100%; background:#000; opacity:0.1; filter:alpha(opacity=10)} .loading img {position:absolute; top:50%; left:50%; z-index:100; margin:-100px 0 0 -100px} .loading.nr img {width:110px; margin:-55px 0 0 -55px} .loading.nr .dim {display:block; content:''; position:absolute; width:100%; height:100%; background:#000; opacity:0.1; filter:alpha(opacity=10)} .loading.nr:after {display:none} .payment_section {position:relative} .payment_section .loading {position:absolute;} .payment_section .loading:after {display:none} .border_t {border-top:1px solid #e9e9e9} /* Margin */ .sec5 {margin-top:5px;} .sec10 {margin-top:10px;} .sec15 {margin-top:15px;} .sec20 {margin-top:20px;} .sec25 {margin-top:25px;} .sec30 {margin-top:30px;} .sec35 {margin-top:35px;} .sec40 {margin-top:40px;} .sec45 {margin-top:45px;} .sec50 {margin-top:50px;} /* > */ .gt {display:inline-block; width:5px; height:10px; background:url(../images/btn/spr_btns.png) no-repeat -36px -18px} /* Title */ .title_wrap:after {display:block; content:''; clear:both} .title_wrap > h3 {float:left} .title_wrap > h4 {float:left} .title_wrap > .aside {float:right} .title_wrap em {color:#70953f} .tit_sub {font-size:32px; color:#222; font-weight:600; letter-spacing:-1px} .tit_sub_02 {font-size:24px; color:#222; font-weight:400; letter-spacing:-1px} .tit_sub_02.v2 {font-size:20px; color:#232323; font-weight:400} .tit_sub_03 {font-size:14px; color:#222; font-weight:600} /* List */ .data_null {width:100% !important; padding:100px 0; border:1px solid #e9e9e9; border-width:1px 0 !important;;text-align:center; font-size:14px; line-height:22px } .data_null .ico_spr {display:block; margin:0 auto 15px} .data_null.v2 {border:0} .list_type {} .list_type > li {padding-left:8px; background:url(../images/bul/bu_list.gif) no-repeat 0 7px; line-height:22px} .list_type2 {} .list_type2 > li {padding-left:8px; background:url(../images/bul/bu_list2.gif) no-repeat 1px 8px; color:#71963f; line-height:18px} .list_type3 > li {padding-left:9px; background:url(../images/bul/bu_list4.gif) no-repeat 0 7px} .disc_mk {padding-left:19px; background:url(../images/bul/bu_list3.gif) no-repeat 0 2px; color:#999; font-size:12px} .disc_guide {color:#999} .guide_box {padding:20px; background:#f8f8f8} .guide_box dt {font-size:15px; color:#333; font-weight:600} .guide_box dd {margin-top:10px} /* Button */ .btn_wrap {text-align:center; font-size:0} .btn_wrap > a {margin-left:5px} .btn_wrap > a:first-child {margin-left:0} .btn_wrap:after {display:block; content:''; clear:both} .btn_wrap > .aside_l {float:left} .btn_wrap > .aside_r {float:right} .btn_wrap > .aside_l a {margin-left:5px} .btn_wrap > .aside_r a {margin-left:5px} .btn_wrap > .aside_l a:first-child {margin-left:0} .btn_wrap > .aside_r a:first-child {margin-left:0} .btn_big {display:inline-block; width:186px; height:50px; border:1px solid #c6c6c6; line-height:48px; text-align:center; font-size:16px; color:#333; letter-spacing:-1px} .btn_big.v2 {background:#70953f; border-color:#70953f; color:#fff} .btn_big.v3 {background:#ccc; color: #fff;} .btn_large {display:inline-block; height:30px; padding:0 15px; line-height:28px; background:#5f5f5f; border:1px solid #5f5f5f; font-size:13px; color:#fff; letter-spacing:-1px} .srch {background:#95979d; border:1px solid #8b8d97} .btn_large.arrow {padding-right:10px; background:#fff; border:1px solid #dedede; color:#333} .btn_large.btn_close {padding-right:10px; background:#fff; border:1px solid #dedede; color:#333} .btn_large .btn_spr {width:7px; height:10px; margin:9px 0 0 8px; vertical-align:top } .btn_large.btn_close .btn_spr {width:10px; height:10px; background-position:-109px -35px} .btn_medium {display:inline-block; height:30px; padding:0 12px; line-height:28px; background:#5f5f5f; border:1px solid #5f5f5f; font-size:13px; color:#fff; letter-spacing:-1px;text-align:center;} .grey {background:#ebebeb; border:1px solid #dedede; color:#333} .white {background:#fff; border:1px solid #dedede; color:#333} .grey2 {background:#999; border:1px solid #999; color:#fff} .dark_grey {background: #5f5f5f;border: 1px solid #575757;color: #fff !important;} .btn_small {display:inline-block; height:24px; padding:0 15px; line-height:22px; background:#fff; border:1px solid #dedede; color:#333; font-size:12px; letter-spacing:-1px} .btn_small.arrow {padding-right:10px} .btn_small .btn_spr {width:7px; height:10px; margin:5px 0 0 8px; vertical-align:top; background-position:-27px 0} .btn_small2 {display:inline-block; height:24px; padding:0 10px; line-height:22px; background:#fff; border:1px solid #dedede; color:#333; font-size:12px; letter-spacing:-1px}s .btn_small2.arrow {padding-right:7px} .btn_small2.down {padding-right:7px} .btn_small2 .btn_spr {width:5px; height:10px; margin:7px 0 0 8px; vertical-align:top; background-position:-89px 0} .btn_small2.down .btn_spr {width:10px; height:10px; margin:7px 0 0 5px; vertical-align:top; background-position:-167px -93px} .wrap-option-box .btn_small2 {display:none; } .btn_slide {width:100%; text-align:center; font-size:0} .btn_slide a {display:block; text-indent:-9999px; background:url(../images/btn/btn_slide.png) no-repeat 0 0} .btn_slide ul {overflow:hidden; display:inline-block; vertical-align:middle} .btn_slide ul li {float:left; margin-left:5px} .btn_slide ul li:first-child {margin-left:0} .btn_slide ul li a {display:block; width:12px; height:14px; background-position:-17px 0} .btn_slide ul li.active a {background-position:0 0} .btn_slide .btn_stop {display:inline-block; width:11px; height:14px; margin-left:10px; background-position:-34px 0; vertical-align:middle} .btn_slide .btn_play {display:inline-block; width:11px; height:14px; margin-left:10px; background-position:-49px 0; vertical-align:middle} .btn_direct {display:inline-block; position:absolute; top:0; width:9px; height:15px; text-indent:-9999px; background:url(../images/btn/spr_btns.png) no-repeat 0 0} .btn_direct.prev {left:0; background-position:-440px -279px} .btn_direct.next {right:0; background-position:-472px -279px} .page_nav{margin-top:30px;font-size:0;text-align:center} .page_nav .btn{display:inline-block;vertical-align:middle;background:url(../images/btn/spr_btns.png); border-top:0;} .page_nav .btn_first{width:29px;height:29px;background-position:-250px 0;} .page_nav .btn_prev3{width:28px;height:29px;background-position:-300px 0;margin-right:7px;} .page_nav .btn_next3{width:29px;height:29px;background-position:-350px 0;margin-left:7px;} .page_nav .btn_last{width:29px;height:29px;background-position:-400px 0;} .page_nav ul{display:inline-block;vertical-align:middle;line-height:normal;} .page_nav ul li{display:inline-block;position:relative;padding-left:15px;vertical-align:middle;} .page_nav ul li:first-child{padding-left:0;} .page_nav ul li:after{display:block;content:'';position:absolute;top:6px;left:0;width:3px;height:3px;background:url(../images/bg_dot.png) no-repeat 0 0;} .page_nav ul li:first-child:after{display:none;} .page_nav ul li a,.page_nav ul li strong{padding:0 6px;font-size:14px;} .page_nav ul li a{color:#666;line-height:27px;} .page_nav ul li strong{display:inline-block;width:27px;height:27px;line-height:27px;border:1px solid #dfdfdf; color:#70953f;} .direction-nav a {display:block; position:absolute; top:0; width:36px; height:68px; text-indent:-9999px; background:url(../images/btn/spr_btns.png) no-repeat 0 0} .direction-nav .prev {left:0; background-position:-171px -250px} .direction-nav .next {right:0; background-position:-273px -250px} .direction-nav2 a {display:block; position:absolute; top:0; width:24px; height:49px; text-indent:-9999px; background:url(../images/btn/spr_btns.png) no-repeat 0 0} .direction-nav2 .prev {left:0; background-position:0 -250px;} .direction-nav2 .next {right:0; background-position:-100px -250px;} .direction-nav3 a {display:block; position:absolute; top:0; width:20px; height:38px; text-indent:-9999px; background:url(../images/btn/spr_btns.png) no-repeat 0 0} .direction-nav3 .prev {left:0; background-position:-348px -267px;} .direction-nav3 .next {right:0; background-position:-402px -267px;} .input_number {position:relative; width:110px; height:32px; border:1px solid #dedede; font-size:16px} .input_number input[type='text'] {border:0; height:30px; padding:0; text-align:center; font-size:16px; color:#424242} .input_number a {display:inline-block; position:absolute; top:0; width:30px; height:30px; background:url(../images/btn/spr_btns.png) no-repeat 0 0; text-indent:-9999px; text-align:center} .input_number .minus {left:0; background-position:-311px -101px; border-right:1px solid #e8e8e8;} .input_number .add {right:0; background-position:-344px -101px; border-left:1px solid #e8e8e8} .btn_buy_wrap {font-size:0} .btn_buy_wrap a {width:133px; height:60px; margin:0; border-left:0; line-height:58px; font-size:16px; vertical-align:middle} .btn_buy_wrap .v2 {width:176px; font-size:20px; border-left:1px solid #70953f} .btn_buy_wrap .v3 {width:176px; font-size:20px; border-left:1px solid #c6c6c6;} .btn_buy_wrap a span {display:inline-block; width:22px; height:22px; margin-right:8px; background:url(../images/btn/spr_btns.png) no-repeat 0 0; vertical-align:middle } .btn_buy_wrap a .cart {background-position:-31px -68px} .btn_buy_wrap a .wish {height:20px; background-position:-89px -70px} .small_btn{display:block;margin-bottom:5px;width:48px;height:19px;line-height:17px;text-align:center;margin-right:5px;font-size:12px;color:#719444;border:1px solid #719444;} .small_btn.v1{display:inline-block;} .small_btn.v2{display:inline-block;width:72px;border:1px solid #dbdbdb;color:#999;} /* spr btn */ .btn_spr {display:inline-block; background:url(../images/btn/spr_btns.png) no-repeat 0 0; vertical-align:middle} .close {width:18px; height:18px; background-position:-107px 0; text-indent:-9999px} .btn_facebook {display:inline-block; width:25px; height:25px; background:url(../images/btn/spr_btns.png) no-repeat -176px -156px; text-indent:-9999px} .btn_kakao {display:inline-block; width:25px; height:25px; background:url(../images/btn/spr_btns.png) no-repeat -205px -156px; text-indent:-9999px} .btn_share {display:inline-block; width:25px; height:25px; background:url(../images/btn/spr_btns.png) no-repeat -234px -156px; text-indent:-9999px} .btn_facebook:hover {background-position:-176px -189px} .btn_kakao:hover {background-position:-205px -189px} .btn_share:hover {background-position:-234px -189px} .btn_kakaostory {display:inline-block; width:25px; height:25px; background:url(../images/btn/spr_btns.png) no-repeat -205px -156px; text-indent:-9999px} .btn_url-copy {display:inline-block; width:25px; height:25px; background:url(../images/btn/spr_btns.png) no-repeat -234px -156px; text-indent:-9999px} .btn_kakaostory:hover {background-position:-205px -189px} .btn_url-copy:hover {background-position:-234px -189px} /* spr mypage sns */ .my_sns i {display:inline-block; width:30px; height:30px; margin-right:10px; background:url(../images/spr_my_sns.png) no-repeat; text-indent:-9999px;vertical-align:middle;} .my_sns i.kakaotalk {background-position:0px 0;} .my_sns i.naver {background-position:-40px 0;} .my_sns i.payco {background-position:-80px 0;} /* spr ico */ .ico_spr {display:inline-block; background:url(../images/spr_ico.png) no-repeat 0 0; vertical-align:middle} .ico_spr.crown {width:32px; height:21px; background-position:0 0} .ico_spr.new_mark {width:32px; height:35px; background-position:0 -44px} .ico_spr.only {width:34px; height:26px; background-position:0 -102px} .ico_spr.f_member {width:18px; height:27px; background-position:-62px 0} .ico_spr.f_shop {width:22px; height:26px; background-position:-60px -47px} .ico_spr.f_cs {width:23px; height:22px; background-position:-59px -102px} .ico_spr.like_it {width:20px; height:20px; background-position:-121px 0} .ico_spr.comment {width:21px; height:22px; background-position:-121px -49px} .ico_spr.vs {width:94px; height:94px; background-position:0 -162px} .ico_spr.ico_spr.insta {width:34px; height:32px; background-position:-126px -162px} .ico_spr.check {width:85px; height:85px; background-position:0 -269px} .ico_spr.cart {width:46px; height:21px; background-position:-160px 0; text-align:right} .ico_spr.cart .num {display:inline-block; width:22px; height:21px; line-height:21px; font-size:12px; color:#fff; text-align:center} .ico_spr.cart2 {width:21px; height:21px; background-position:-160px 0} .ico_spr.hit {width:16px; height:11px; background-position:-223px 0} .ico_spr.bag {width:30px; height:32px; background-position:-466px -435px} .ico_spr.pay {width:30px; height:32px; background-position:-516px -435px} .ico_spr.pay_end {width:31px; height:32px; background-position:-567px -435px} .active .bag {background-position:-466px -477px} .active .pay {background-position:-516px -477px} .active .pay_end {background-position:-567px -477px} .ico_spr.coupon {width:36px; height:21px; background-position:-759px 0} .ico_spr.m_coup {width:25px; height:27px; background-position:-823px 0} .ico_spr.point {width:30px; height:30px; background-position:-871px 0} .ico_spr.plus {width:30px; height:30px; background-position:-130px -279px} .ico_spr.equal {width:30px; height:30px; background-position:-182px -279px} .ico_spr.question {width:18px; height:18px; background-position:-237px -285px} .ico_spr.sale2 {width:9px; height:9px; background-position:-124px -106px} .ico_spr.caution {width:49px; height:49px; background-position:-180px -95px} .ico_spr.question2{width:49px; height:49px; background:url(../images/spr_ico_02.png) no-repeat -100px 0; } .ico_spr.paper {width:30px; height:32px; background-position:-180px -376px} .ico_spr.man {width:30px; height:32px; background-position:-229px -376px} .st_end {width:35px; height:32px; background-position:-303px -376px} .active .paper {background-position:-180px -426px} .active .man {background-position:-229px -426px} .active .st_end {background-position:-303px -426px} .ico_spr.welcome {width:162px; height:105px; background-position:-375px -294px} .ico_spr.find {width:14px; height:13px; background-position:-254px -56px} .ico_spr.join {width:17px; height:16px; background-position:-303px -56px} .ico_spr.find_end {width:120px; height:120px; background-position:-479px 0} .srch_result .ico_spr.find_end {width:120px; height:120px; background-position:-842px -383px} .ico_spr.caution2 {width:28px; height:28px; background-position:-253px -97px} .ico_spr.minus {width:30px; height:30px; background-position:-185px -323px} .ico_spr.mark {width:20px; height:20px; background-position:-227px -173px} .ico_spr.mark2 {width:20px; height:20px; background-position:-292px -174px} .ico_spr.no_mark {width:20px; height:20px; background-position:-261px -174px} .ico_spr.end_chk {width:47px; height:47px; background-position:-69px -486px} .ico_spr.download {width:12px; height:12px; background-position:-239px -332px} .ico_spr.review_photo {width:18px; height:18px; background-position:-136px -482px} .ico_spr.review_used {width:18px; height:18px; background-position:-162px -482px} .ico_spr.used_good {width:18px; height:18px; background-position:-188px -482px} .ico_spr.state_chk {width:18px; height:18px; background-position:-217px -482px} .ico_spr.state_sold {width:18px; height:18px; background-position:-245px -482px} .ico_spr.state_sold_out {width:18px; height:18px; background-position:-271px -482px} .ico_spr.notice_stiky {width:16px; height:15px; background-position:-709px 0} /* Tab */ .tab_sub {display:table; table-layout:fixed; width:100%} .tab_sub li {display:table-cell} .tab_sub li a {display:block; position:relative; height:39px; border:1px solid #dedede; border-left:0;background-color:#fff; text-align:center; line-height:37px; font-size:14px} .tab_sub li.active a:after {position:absolute; content:''; bottom:-10px; left:50%; width:0; height:0; margin-left:-5px; border-bottom:5px solid #71963f; border-top:5px solid #71963f; border-bottom:5px solid transparent; border-left:5px solid transparent; border-right:5px solid transparent;} .tab_sub li:first-child a {border-left:1px solid #dedede} .tab_sub li.active a {background:#71963f; border-color:#71963f; color:#fff} .tab_sub2 {display:table; table-layout:fixed; width:100%} .tab_sub2 li {display:table-cell} .tab_sub2 li a {display:block; position:relative; height:47px; border:1px solid #e9e9e9; border-left:0; border-bottom-color:#333; line-height:45px; text-align:center; font-size:15px; color:#888; font-weight:600} .tab_sub2 li:first-child a {border-left:1px solid #e9e9e9} .tab_sub2 li:first-child.active a {border-left:0} .tab_sub2 li.active a {border-color:#333; border-bottom:0; color:#222} .tab_sub2 li.active a:after {display:inline-block; content:''; position:absolute; bottom:0; left:-1px; width:1px; height:47px; background:#333;} .benefit .tab_sub2 {margin-bottom:30px;} .tab_cont {display:none; } .tab_cont.active {display:block; } /* highlight text */ .abbr_q {display:inline-block; width:50px; height:50px; background:url(../images/bg/bg_question.png) no-repeat 0 0; line-height:47px; text-align:center; font-size:27px; color:#fff} .abbr_q2 {font-size:27px; color:#70953f} /* Input */ input:disabled {background:#fff} input[type='text'], input[type='password'] {width:100%; height:32px; padding-left:10px; line-height:30px; border:1px solid #dedede; color:#666} .form_item {position:relative; } .form_item .i_label {position:absolute; visibility:visible; top:6px; left:10px; color:#999; z-index:0} .form_item .i_label.visible{z-index:2} .form_item .hidden {visibility:hidden} .form_item .i_text {position:relative; z-index:1; border:1px solid #dedede; background:transparent} .form_item .i_text2 {position:relative; z-index:1; border:1px solid #dedede; background:transparent} .form_srch {overflow:hidden} .form_srch .form_item {float:left; width:456px} .form_srch .btn_srch {display:inline-block; float:left; padding:0 15px; height:32px; margin-left:4px; border:1px solid #8b8d97; background:#95979d; line-height:30px; font-size:14px; color:#fff; cursor:pointer} .ip_file {position:relative} .ip_file input {position:absolute; top:0; right:0; width:1px; z-index:-1; opacity:0; filter:alpha(opacity=0)} .add_img {overflow:hidden; max-height:70px; margin-top:10px; font-size:0} .add_img img {width:70px; height:70px; vertical-align:bottom} .add_img a {display:inline-block; width:19px; height:19px; margin-left:5px; background:url(../images/btn/spr_btns.png) no-repeat -475px -88px; vertical-align:bottom} /*input_schedule{s}*/ .form_schd{padding:20px 0;border-top:1px solid #666;border-bottom:1px solid #e9e9e9;background-color:#f8f8f8;text-align:center;} .form_schd .list_date{display:inline-block;overflow:hidden;margin-right:11px;vertical-align:middle;} .form_schd .list_date li{float:left;width:50px;height:32px;text-align:center;line-height:30px;background-color:#fff;border:1px solid #dedede;border-left:none;cursor:pointer;} .form_schd .list_date li:first-child{border-left:1px solid #dedede;} .form_schd .list_date .active{background-color:#70953f;} .form_schd .list_date .active a{color:#fff;} .form_schd .list_date li:first-child{margin-left:0;} .form_schd .inquiry_date{display:inline-block;vertical-align:middle;} .form_schd .inquiry_date .ip_txt{width:150px;height:32px;vertical-align:middle;} .form_schd .inquiry_date button{display:inline-block;margin-left:-20px;overflow:hidden;width:14px;height:13px;margin-left:-25px;background:url(../images/spr_ico_02.png) no-repeat 0 -50px;vertical-align:middle;text-indent:-999em} .form_schd .txt_hypen{margin-left:10px;font-size:12px;vertical-align:middle;} .form_schd .srch_product{position:relative;margin-top:10px;padding-right:51px;} .form_schd .btn_srch {display:inline-block;vertical-align:middle;padding:0 15px; height:32px; margin-left:5px; border:1px solid #8b8d97; background:#95979d; line-height:30px; font-size:14px; color:#fff; cursor:pointer} /*input_schedule{e}*/ .custom_form {position:relative; padding-left:32px} .custom_form input {position:absolute; top:0; left:0; width:1px; height:1px; opacity:0; filter:alpha(opacity=0)} .custom_form label {cursor:pointer;} .custom_form label > em {display:inline-block; position:absolute; top:50%; left:0; width:24px; height:24px; margin-top:-12px; background:url(../images/btn/spr_form.png) no-repeat 0 0; cursor:pointer} .custom_form .checked > em {background-position:-36px 0} .custom_form .ip_rdo > em {background-position:0 -30px} .custom_form .ip_rdo.checked > em {background-position:-36px -30px} .custom_form.v2 {padding-left:56px} .custom_form.v2 label > em {width:56px; height:33px; background-position:0 -66px} .custom_form.v2 label.checked > em {background-position:-72px -66px} .custom_form.v3 {padding-left:27px; } .custom_form.v3 .ip_chk > em {width:18px; height:18px; margin-top:-9px; background-position:-80px 0} .custom_form.v3 .ip_chk.checked > em {background-position:-107px 0} .custom_form.v4 {padding-left:27px; } .custom_form.v4 .ip_chk > em {width:18px; height:18px; margin-top:-9px; background-position:-80px -30px;} .custom_form.v4 .ip_chk.checked > em {background-position:-107px -30px;} .checkbox {position:relative;} .checkbox input[type="checkbox"] { border-radius: 0; -webkit-appearance: none;-moz-appearance: none; appearance: none; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border: 0;} .checkbox input[type="checkbox"] + label em {display:inline-block; margin-right:5px; width:24px; height:24px;background:url(../images/btn/spr_form.png) no-repeat 0 0;cursor:pointer;} .checkbox input[type="checkbox"]:checked + label em{background:url(../images/btn/spr_form.png) no-repeat -36px 0px;} .radio {position:relative;} .radio input[type="radio"] { border-radius: 0; -webkit-appearance: none;-moz-appearance: none; appearance: none; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border: 0;} .radio input[type="radio"] + label em {display:inline-block; margin-top:-1px;margin-right:5px; width:18px; height:18px;background:url(../images/btn/spr_form.png) no-repeat -80px -30px;cursor:pointer;vertical-align:middle; } .radio input[type="radio"]:checked + label em{background:url(../images/btn/spr_form.png) no-repeat -107px -30px;} .radio.v2 {position:relative;} .radio.v2 input[type="radio"] { border-radius: 0; -webkit-appearance: none;-moz-appearance: none; appearance: none; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border: 0;} .radio.v2 input[type="radio"] + label em {display:inline-block; margin-top:-1px;margin-right:5px; width:24px; height:24px;background:url(../images/btn/spr_form.png) no-repeat 0px -30px;cursor:pointer;vertical-align:middle; } .radio.v2 input[type="radio"]:checked + label em {background:url(../images/btn/spr_form.png) no-repeat -36px -30px;} .radio.v2 label {cursor:pointer;} .sel_box {width:120px; height:30px; border:1px solid #dedede; line-height:28px; color:#666; cursor:pointer} .sel_box .selectbox {padding-left:10px; height:100%;} .sel_box .selectbox:after {display:inline-block; content:''; position:absolute; top:3px; right:0; width:31px; height:28px; margin-top:-3px; background:url(../images/btn/spr_form.png) no-repeat -66px -125px; } .sel_box .selectbox .value {overflow:hidden; display: inline-block; width: 100%; padding-right: 31px; white-space: nowrap; text-overflow: ellipsis;} .sel_box em {color:#e93e44} /* .sel_box .selectbox:after {display:inline-block; content:''; position:absolute; top:50%; right:10px; width:10px; height:6px; margin-top:-3px; background:url(../images/btn/spr_form.png) no-repeat -6px -125px; } */ .sel_box .selectbox .list {overflow-y:auto; position:absolute; top:28px; left:-1px; z-index:2; right:-1px; max-height:180px; border:1px solid #dedede; background:#fff; line-height:24px} .sel_box .selectbox .list li {display:block; padding:5px 10px; cursor:pointer} .sel_box .selectbox .list li.sold_out {background:#dedede;}/* 임시 */ .selectbox.disabled {height:28px; background:#efefef} .sel_box.v2 {width:140px; height:28px; line-height:28px; border:0; color:#999; cursor:pointer} .sel_box.v2 .selectbox:after {top:50%; right:30px; width:13px; height:7px; margin-top:-4px; background-position:-35px -125px} .sel_box.v2.bdr {height:30px; line-height:30px; border:1px solid #dedede} .sel_box.v2.bdr .selectbox:after {right:10px} .sel_box.v3 .selectbox:after {display:inline-block; content:''; position:absolute; top:50%; right:10px; width:10px; height:6px; margin-top:-3px; background:url(../images/btn/spr_form.png) no-repeat -6px -125px; } /* Them */ .img_box {overflow:hidden;} .img_box img {width:100%} /* Video */ .vd_player {overflow:hidden; position:relative;} .vd_player .btn_play {display:block; position:absolute; top:0; left:0; z-index:1; width:100%; height:100%} .vd_player .btn_play img {display:block; width:100%} .vd_player .video {display:none; position:absolute; top:0; left:0; z-index:0; width:100%; height:100%; background:#000; text-align:center} /* Star */ .star_rating, .star_rating span {overflow:hidden; display:inline-block; width:63px; height:12px; background:transparent url(../images/btn/spr_btns.png) no-repeat 0 -322px; font-size:0 } .star_rating span {text-indent:-9999px; background-position:0 -339px} .star_rating_view, .star_rating_view span {width:91px; height:15px; background-position:0 -360px} .star_rating_view span {background-position:0 -383px} .star_rating_mv, .star_rating_mv span {width:145px; height:24px; background-position:0 -409px} .star_rating_mv span {background-position:0 -441px} .txt_rating {display:inline-block; padding:0 15px; height:24px; background:#9bb578; border-radius:20px; line-height:24px; font-weight:400; color:#fff} .txt_rating.chk {padding-right:20px; height:32px; background:#cecece; line-height:32px; border-radius:20px; font-size:15px; cursor:pointer;} .txt_rating.active {background:#9bb578} .txt_rating.chk .ico_spr {width:12px; height:11px; margin-right:8px; background-position:-165px -50px} /* View */ .info {} .info:after {display:block; content:''; clear:both} .info .info_l {float:left} .info .info_r {float:right} .info span {font-size:14px} .info .star_rating_view, .info .star_rating_view span {font-size:0} .info .star_rating_view, .info .star_rating_view span {cursor:default} .txt_review .star_rating, .txt_review .star_rating span {cursor:default} .info > span {margin-left:20px} .info span .ico_spr {margin-right:5px} .info > span:first-child {margin-left:0} .info em {font-size:12px; font-weight:400; font-family:'Georgia'; font-style:italic} .info .tag {display:inline-block; margin-left:20px; font-size:0} .info .tag li {display:inline-block; margin-left:2px; padding:0 9px; height:22px; border:1px solid #cddabb; line-height:20px; font-size:12px} .info .tag li:first-child {margin-left:0} .info strong {display:inline-block; position:relative; margin-left:30px; padding-left:30px; font-size:14px; vertical-align:middle} .info strong:after {display:inline-block; content:''; position:absolute; top:50%; left:0; height:15px; width:1px; margin-top:-8px; background:#e9e9e9; } .info strong:first-child {margin-left:0; padding-left:0;} .info strong:first-child:after {display:none} .info strong > span {margin-left:10px} .info.v2 {padding:10px 0} .article dt {font-size:18px; color:#222; font-weight:600 } .article dd {margin-top:5px} .article dd .date {font-size:12px} .article dd.v2 {margin-top:10px; border-top:1px solid #e9e9e9} /* aticla list */ .list_srch_null {padding:100px 0 20px; text-align:center} .list_srch_null .caution {display:block; margin:0 auto 15px} .article_list{overflow:hidden;margin-top:30px;} .article_list li{position:relative;float:left;width:332px;margin-left:20px;margin-bottom:20px;border:1px solid #e9e9e9;} .article_list li:first-child, .article_list .r_first{margin-left:0;clear: both;} .article_list li a{display:block;} .article_list li a .img_box img{display:block;width:100%;} .article_list li a dl:after{position:absolute;content:'';left:50%;margin-left:-10px;top:207px;width: 0; height: 0; border-left: 10px solid transparent;border-right: 10px solid transparent;border-bottom: 13px solid #fff;} .article_list li a dl{overflow:hidden;padding:25px 20px;} .article_list li a dl dt{overflow:hidden; height:46px; font-size:16px;color:#222;font-weight:600;margin-bottom:15px;} .article_list li a dl dd.category{position:absolute;padding:8px 17px;border-radius:30px;color:#fff;top:10px;left:10px;font-style:13px} .article_list li a dl dd.category.v1{background: #d6a367;} .article_list li a dl dd.category.v2{background: #78adb5;} .article_list li a dl dd.category.v3{background: #d49494;} .article_list li a dl dd.category.v4{background: #e0be65;} .article_list li a dl dd.category.v5{background: #a3aeca;} .article_list li a dl dd.category.v6{background: #9bb578;} .article_list li a dl dd.date{float:left;font-size:14px;color:#888888;} .article_list li a dl dd.view{float:right;font-size:14px;color:#888888;} .article_list li .img_box {overflow:hidden; height:220px} .btn_more.arrow{display:block;width:100%;height:38px;text-align:center;line-height:38px;border:1px solid #dedede;color:#333;cursor:pointer;} .btn_more.arrow span{display:inline-block;margin-left:6px;width:10px;height:6px;background:url(../images/btn/spr_btns2.png);background-position:0 0;} /* Table */ .tble_type table, .tble_type2 table, .tble_type3 table, .tble_type4 table {margin:0;} .in-table th {padding:0 !important; margin:0;} table {width:100%; border-collapse:collapse; border-spacing:0; table-layout:fixed} .tble_type {border-top:1px solid #c6c6c6; border-bottom:1px solid #c6c6c6; line-height:18px;} .tble_type th, .tble_type td {padding:12px 0 13px; padding-left:20px; border-top:1px solid #e9e9e9; text-align:left; font-size:14px} .tble_type tr:first-child th, .tble_type tr:first-child td {border-top:0} .tble_type th {font-weight:600; color:#222; background:#f8f8f8} .tble_type td {} .tble_type2 {border-top:1px solid #c6c6c6; border-bottom:1px solid #c6c6c6; line-height:18px;} .tble_type2 th, .tble_type2 td {padding:12px 0 13px; border-left:1px solid #e9e9e9; text-align:center; font-size:14px} .tble_type2 tr th:first-child, .tble_type2 tr td:first-child {border-left:0} .tble_type2 thead th {font-weight:600; color:#222; background:#f8f8f8} .tble_type2 tbody th {padding-left:20px; border-top:1px solid #e9e9e9; color:#222; font-weight:600; text-align:left; } .tble_type2 tbody td {border-top:1px solid #e9e9e9} .tble_type3 {border-top:1px solid #666; border-bottom:1px solid #e0e0e0; line-height:18px;} .tble_type3 th, .tble_type3 td {padding:12px 0 13px; text-align:center; font-size:13px; color:#444} .tble_type3 tbody td {border-top:1px solid #ededed; color:#444} .tble_type3 th {background:#f8f8f8; color:#333} .tble_type3 td.title {text-align:left; padding-left:10px} .tble_type3 td.title a {text-decoration:underline; color:#444} .wrap-cart .tble_type3 th, .wrap-cart .tble_type3 td {padding:12px 0 13px; text-align:center; font-size:14px; color:#444} table td .btn_medium {margin-top:4px} table td .btn_medium:first-child {margin-top:0} .tble_type4 {border-top:1px solid #333; border-bottom:1px solid #c6c6c6; line-height:18px;} .tble_type4 th, .tble_type4 td {padding:12px 0 13px; border-top:1px solid #e9e9e9; text-align:left; font-size:14px;color:#333333;text-align:center;} .tble_type4 th{border-bottom:1px solid #c6c6c6;} .tble_type4 tr:first-child th, .tble_type4 tr:first-child td {border-top:0} .tble_type4 tbody td{font-size:13px;color:#888;} .tble_type4 tbody td:first-child{color:#666;} .notice_box{display:inline-block;width:72px;height:19px;line-height:16px;margin:0;padding:0;letter-spacing:-1px;border:1px solid #9bb578;color:#9bb578;font-size:11px;} .tble_type4 tbody td.title{text-align:left;} .tble_type4 tbody td.title .new{display:inline-block;margin-left:14px;width:33px;height:19px;line-height:19px;background-color: #ff7777;color:#fff;font-size:12px;text-align:center;} .tble_type4 tbody td.title a{color:#424242;} .tble_type4 tbody tr.fix{background-color: #f8fbf5} .tble_type4.v2 td, .tble_type4 th{letter-spacing:-1px} .tble_type4.v2 thead th{font-size:14px;color:#999;} .tble_type4.v2 thead th em{margin-right:10px;color:#666;} .tble_type4.v2 thead th.title{font-size:16px;color:#333;text-align:left;} .tble_type4.v2 tbody tr td{padding:35px 0 40px 20px;color:#424242;text-align:left;} .tble_type4.line1 tbody td.title a {overflow:hidden; text-overflow:ellipsis; display:inline-block; max-width:92%; white-space:nowrap; vertical-align:middle} .faq_type .list_title.active .title a {text-decoration:underline; font-weight:600} .faq_type .list_title .title a {color:#424242} .faq_type .list_title .title a:after {position:absolute;top:6px;right:30px;display:inline-block; content:''; width:10px; height:11px; margin-left:10px; background:url(../images/btn/spr_btns.png) no-repeat -127px -73px; vertical-align:middle} .faq_type .list_title.active .title a:after {background-position:-127px -93px} .faq_type .list_view td {padding:20px; border-top:0; background:#f8f8f8;font-size:13px} .faq_type .list_view {display:none} .faq_type .list_view.active {display:table-row} .faq_type .list_view td.answer_td {padding:0;} /* Product List*/ .list_sorting {overflow:hidden; padding-bottom:15px; margin:40px 0 30px; border-bottom:2px solid #222} .list_sorting .sel_cat {float:left} .list_sorting .sel_cat ol, .list_sorting .sel_cat ol li {float:left} .list_sorting .sel_cat ol li {position:relative; padding-left:12px; margin-right:8px; font-size:14px; color:#222; font-weight:600} .list_sorting .sel_cat ol li:after {display:inline-block; content:''; position:absolute; top:50%; left:0; width:5px; height:10px; margin-top:-5px; background:url(../images/btn/spr_btns.png) no-repeat -36px -18px} .list_sorting .sel_cat ol li:first-child {padding-left:0; font-weight:400; color:#666} .list_sorting .sel_cat ol li:first-child:after {display:none} .list_sorting .sel_cat > span {display:block; float:left; position:relative; padding-left:10px; color:#222; font-size:14px; } .list_sorting .sel_cat > span:after {display:inline-block; content:''; position:absolute; top:50%; left:0; width:1px; height:12px; margin-top:-6px; background:#dedede} .list_sorting .sel_btns {float:right} .list_sorting .sel_btns li {position:relative; float:left; margin-left:10px; padding-left:10px } .list_sorting .sel_btns li:first-child {margin-left:0; padding-left:0} .list_sorting .sel_btns li:after {display:inline-block; content:''; position:absolute; top:50%; left:0; width:1px; height:12px; margin-top:-6px; background:#dedede} .list_sorting .sel_btns li:first-child:after {display:none} .list_sorting .sel_btns li a {font-size:14px; cursor:pointer;} .list_sorting .sel_btns li.active a {color:#222; font-weight:600} .list_sorting .sel_btns li .btn_chk_list:after {display:none} .list_sorting .sel_btns li.active a:after {background-position:-450px -7px} .list_sorting .sel_btns .btn_chk_list .best {display:inline-block;margin-bottom:2px;margin-right:6px;vertical-align:middle;width:13px;height:13px;background:url(../images/spr_ico_02.png) -100px -50px;} .list_sorting .sel_btns li.active .btn_chk_list .best {background-position:-130px -50px;} .product_list {border-bottom:1px solid #e9e9e9; } .product_list:after {display:block; content:''; clear:both} .product_list > li {position:relative; float:left; width:25%; height:370px; border-right:1px solid #e9e9e9; border-top:1px solid #e9e9e9; text-align:center } .product_list > li > a {display:block; padding:0 38px;} .product_list > li:first-child, .product_list li.r_first {border-left:1px solid #e9e9e9} .product_list > li .img_box {width:100%; padding-top:30px} .product_list > li .img_box img {display:block; width:100%} .product_list > li > a > dl > dt {overflow:hidden; position:relative; height:85px; padding-top:45px; font-size:14px} .product_list > li > a > dl > dt em {overflow:hidden; display:block; position:absolute; top:5px; left:0; width:100%; height:36px; color:#70953f; font-size:13px; text-align:center} .product_list > li > a > dl > dd.price {margin-top:5px; font-size:16px; color:#222; font-weight:600; letter-spacing:-1px} .product_list > li > a > dl > dd.price del {color:#999; margin-right:5px; font-size:13px; font-weight:400} .product_list > li > a > dl > dd.tag {position:absolute; top:-1px; left:-1px; z-index:1; width:44px} .product_list > li > a > dl > dd.tag > em {display:block; width:44px; height:44px; margin-top:-1px; text-align:center} .product_list > li > a > dl > dd.tag > em:first-child {margin-top:0} .product_list > li > a > dl > dd.tag > em.new {height:40px; line-height:40px; background:#83ac5b; color:#fff; font-size:12px; font-weight:600} .product_list > li > a > dl > dd.tag > em.best {height:40px; line-height:40px; background:#83ac5b; color:#fff; font-size:12px; font-weight:600} .product_list > li > a > dl > dd.tag > em.sale {padding-top:7px; border:1px solid #c2d7a8; background:#fff; color:#333; font-size:12px; font-weight:600} .product_list > li > a > dl > dd.tag > em.sale > span {display:block; width:12px; height:11px; margin:0 auto; background-position:-288px -331px} .product_list > li > a > dl > dd.tag > em.sale strong {font-size:14px; font-weight:800} .product_list > li > a > dl > dd.tag > em.event {height:40px; padding-top:11px; border:1px solid #c2d7a8; background:#f2f8e8; font-size:10px; color:#88b661; font-weight:600; letter-spacing:-1px} .product_list > li > a > dl > dd.tag > em.event2 {height:40px; padding-top:11px; border:1px solid #c2d7a8; background:#f2f8e8; font-size:10px; color:#88b661; font-weight:600; letter-spacing:-1px} .product_list > li > a > dl > dd.tag > em.plus {line-height:42px; border:1px solid #c2d7a8; background:#fff; color:#444; font-size:13px; font-weight:800} .product_list > li > a > dl > dd.tag > em.plus span {color:#8db853} .product_list > li > a > dl > dd.tag > em img {width:100%; height:100%;} .product_list > li > a > dl > dd.tag > .good_names_explain {width:44px; height:40px;} .product_list > li > a > dl > dd.tag > .good_names_explain img {width:100%; height:100%;} .product_list > li > a > dl > dd.state {margin-top:10px; font-size:11px} .product_list > li > a > dl > dd.state span {display:inline-block; width:54px; height:19px; border:1px solid #888; line-height:17px; font-size:12px; color:#444; letter-spacing:-1px} .product_list > li > a > dl > dd.state em {display:inline-block; width:54px; height:19px; border:1px solid #f39fa2; line-height:17px; font-size:12px; color:#e96f74; letter-spacing:-1px} .product_list > li > a > dl > dd.state strong {display:inline-block; width:54px; height:19px; margin-left:5px; border:1px solid #e68719; line-height:17px; font-size:12px; color:#e68719; letter-spacing:-1px} .product_list > li > a > dl > dd.state strong:first-child {margin-left:0} .product_list > li > a > dl > dd.award {overflow:hidden; position:absolute; top:10px; right:10px} .product_list > li > a > dl > dd.award > img {display: block;width: 55px;margin-bottom: 5px;/* margin-left:5px; */} .product_list > li > a > dl > dd.award > img:first-child {margin-left:0} .product_list > li > a > dl > dd.award > .txt_tag{position:relative;display:inline-block;margin-left:5px;width:42px;height:42px;overflow:hidden;} .product_list > li > a > dl > dd.award > .txt_tag > img{width:100%;} .product_list > li > a > dl > dd.award > .txt_tag > .txt_content{position:absolute;top:0;left:0;width:42px;height:42px;padding-top:7px;text-align:center;color:#fff;font-size:10px;line-height:11px;letter-spacing:-1px;font-weight:200;text-align:center;} .product_list > li > a > dl > dd.award > .txt_tag > .txt_content strong{font-size:15px;} .product_list > li > a > dl > dd.award > .txt_tag > .txt_content em{font-size:8px;} .product_list > li .pro_over {display:none; position:absolute; top:-1px; left:-1px; z-index:2; width:259px; height:371px; padding:50px 20px 0; border:1px solid #414141; background:url(../images/bg/bg_pro_over.png) repeat 0 0; text-align:center; transition:0.5s ease} .product_list > li .pro_over.type_only_btn {background:none} .product_list > li.active .pro_over {display:block} .product_list > li .pro_over .title {position:relative; height:auto; padding-top:23px; font-size:14px} .product_list > li .pro_over .title em {display:block; position:absolute; top:0; left:0; width:100%; font-size:13px; color:#70953f; text-align:center} .product_list > li .pro_over .title strong {overflow:hidden; display:block; height:40px;} .product_list > li .pro_over .txt {margin-top:15px; padding:15px 0; border-top:1px solid #ccc; border-bottom:1px solid #ccc; font-size:14px} .product_list > li .pro_over .option {position:relative; width:202px; margin:20px auto 0; padding:0 25px} .product_list > li .pro_over .option .op_img_list, .product_list > li .pro_over .option .op_text_list {overflow:hidden} .product_list > li .pro_over .option .op_img_list ul, .product_list > li .pro_over .option .op_text_list ul {position:relative; left:0; width:10000px; height:30px} .product_list > li .pro_over .option .op_img_list ul li, .product_list > li .pro_over .option .op_text_list ul li {position:relative; float:left} .product_list > li .pro_over .option .op_img_list ul li span {display:block; position:relative; width:31px; height:30px; padding-top:2px; font-size:0; text-align:center; cursor:pointer} .product_list > li .pro_over .option .op_img_list ul li span i.option_color {display:block; width:26px; height:26px; border-radius:100%;} .product_list > li .pro_over .option .op_img_list ul li span img {display:block; width:26px; height:26px; border-radius:100%} .product_list > li .pro_over .option .op_img_list li.active span:after {display:block; content:''; position:absolute; top:1px; left:0; width:27px; height:27px; border:2px solid #000; border-radius:100%} .product_list > li .pro_over .option .op_text_list ul li {margin-right:2px; width:auto} .product_list > li .pro_over .option .op_text_list ul li span {display:block; padding:0 10px; height:26px; line-height:22px; border:1px solid #dedede } .product_list > li .pro_over .option .op_text_list ul li.active span {border-width:2px; border-color:#70953e} .product_list > li .pro_over .option .op_txt_list {margin-top:10px} .product_list > li .pro_over .option .op_txt_list li {display:none; color:#999} .product_list > li .pro_over .option .op_txt_list li.active {display:block} .product_list > li .pro_over .option .op_txt_list li em {color:#e96f74} .product_list > li .pro_over .option .btn_direct {display:block; position:absolute; top:5px; width:10px; height:18px; text-indent:-9999px; background:url(../images/spr_pro_option.png) no-repeat 0 0; cursor:pointer} .product_list > li .pro_over .option .prev {left:0} .product_list > li .pro_over .option .next {right:0; background-position:-192px 0} .product_list > li .pro_over .option_txt {position:absolute; bottom:64px; left:0; width:100%; padding:10px 0; background:#fff4f6; font-size:14px} .product_list > li .pro_over .option_txt span {display:inline-block; width:20px; height:20px; margin-right:8px; background:url(../images/spr_pro_option.png) no-repeat -1px -26px; text-indent:-9999px; vertical-align:middle} .product_list > li .btns {display:none; position:absolute; bottom:0; left:0; z-index:3; width:100%; font-size:0} .product_list > li.active .btns {display:block} .product_list > li .btns a {display:inline-block; width:50%; height:54px; background:#414141; line-height:54px; font-size:13px; color:#fff} .product_list > li .btns .btn_cart {border-right:1px solid #545454} .product_list > li .btns a span {display:inline-block; width:17px; height:16px; margin-right:5px; background:url(../images/spr_pro_option.png) no-repeat -59px -29px; vertical-align:middle} .product_list > li .btns .btn_cart span {width:17px; height:18px; background-position:-31px -26px} .product_list > li.sold_out .btns .btn_cart {color:#a0a0a0} .product_list > li.sold_out .btns .btn_cart span {background-position:-123px -26px} .product_list > li.no_srch {float:none; width:100%; height:auto; border:none;} /* 스카이 스크래퍼 */ .br_sky > ul {position:fixed; top:320px; right:0; width:54px; z-index:10; background:#385731;} .br_sky.open > ul {right:319px} .br_sky > ul li a {display:block; height:57px; border-top:1px solid #628539; text-align:center; font-size:10px; color:#c6d4b4; background:url(../images/spr_sky.png) no-repeat 0 0; font-weight:600} .br_sky > ul .my a {height:56px; padding-top:37px; background-position:0 0; border-top:0} .br_sky > ul .my_cart a {position:relative; background-position:0 -57px} .br_sky > ul .my_recent a {padding-top:33px; letter-spacing:-1px; background-position:0 -114px} .br_sky > ul .recomm a {padding-top:33px; letter-spacing:-2px; background-position:0 -171px} .br_sky > ul li.top a {height:34px; padding-top:14px; color:#fff; background-position:0 -227px; font-weight:400; border-top:0; text-indent:-9999px} .br_sky > ul li a:hover {border-top-color:#294723} .br_sky > ul .my a:hover, .br_sky > ul .my.active a {color:#fff; background-position:-56px 0} .br_sky > ul .my_cart a:hover, .br_sky > ul .my_cart.active a {background-position:-56px -57px} .br_sky > ul .my_recent a:hover, .br_sky > ul .my_recent.active a {color:#fff; background-position:-56px -114px} .br_sky > ul .recomm a:hover, .br_sky > ul .recomm.active a {color:#fff; background-position:-56px -171px} .br_sky > ul li.top a:hover, .br_sky > ul li.top.active a {background-position:-56px -227px; color:#719444 } .br_sky > ul .my_cart a .num {display:inline-block; position:absolute; top:12px; right:8px; width:22px; height:17px; line-height:17px; text-align:center; font-size:12px; color:#222} .br_sky .my_sky_list > div {display:none; position:fixed; top:0; right:0; z-index:101; width:319px; height:100%; padding:40px 30px; background:#fff; border-left:1px solid #719444; letter-spacing:-1px} .br_sky.open .my_sky_list > div.active {display:block} .br_sky .my_sky_list > div h3 {padding-bottom:15px; border-bottom:2px solid #333; font-size:15px; color:#222; font-weight:600; letter-spacing:-1px} .br_sky .my_sky_list > div .btn_close {display:block; position:absolute; top:26px; right:30px; width:29px; height:29px; text-indent:-9999px; background:url(../images/btn/spr_btns.png) no-repeat -167px 0} .br_sky .my_sky_list > .my ul {overflow:hidden; position:relative} .br_sky .my_sky_list > .my ul:after {display:block; content:''; position:absolute; top:0; left:50%; width:1px; height:100%; background:#e9e9e9} .br_sky .my_sky_list > .my ul li {float:left; width:50%; height:137px; border-bottom:1px solid #e9e9e9; text-align:center; font-size:0} .br_sky .my_sky_list > .my ul li span {display:inline-block; width:39px; height:70px; vertical-align:middle; background:url(../images/spr_ico.png) no-repeat -617px 0} .br_sky .my_sky_list > .my ul li .point {background-position:-617px 0} .br_sky .my_sky_list > .my ul li .coupon {background-position:-617px -89px} .br_sky .my_sky_list > .my ul li .mobile {background-position:-617px -178px} .br_sky .my_sky_list > .my ul li .order {background-position:-617px -267px} .br_sky .my_sky_list > .my ul li dl {font-size:13px; vertical-align:middle} .br_sky .my_sky_list > .my ul li dl dt {color:#222} .br_sky .my_sky_list > .my ul li dl dd {margin-top:10px; font-size:14px; } .br_sky .my_sky_list > .my ul li dl dd strong {font-size:18px; color:#719444; font-weight:400} .br_sky .my_sky_list > .my > div {margin-top:20px} .br_sky .my_sky_list > .my > div > a {display:block; height:38px; margin-top:20px; background:#719444; line-height:38px; text-align:center; font-size:15px; color:#fff} .br_sky .my_sky_list > .my > div > div {font-size:0} .br_sky .my_sky_list > .my > div > div a {width:84px; height:92px; padding:0; margin-left:2px; text-align:center; border:0; background:#f4f4f4; font-size:14px; color:#222} .br_sky .my_sky_list > .my > div > div a:first-child {margin-left:0} .br_sky .my_sky_list > .my > div > div a .ico_spr {display:block; width:85px; height:29px; margin:20px auto 10px; background:url(../images/spr_ico.png) no-repeat 0 0} .br_sky .my_sky_list > .my > div > div a .my_order {background-position:-688px -63px} .br_sky .my_sky_list > .my > div > div a .my_like_pro {background-position:-775px -63px} .br_sky .my_sky_list > .my > div > div a .my_question {background-position:-862px -63px} .br_sky .my_sky_list .my_pro_list li {position:relative; margin-top:10px} .br_sky .my_sky_list .my_pro_list li > a:first-child {display:block; position:relative; padding:10px; border:1px solid #eee; } .br_sky .my_sky_list .my_pro_list li > a:after {display:block; content:''; clear:both} .br_sky .my_sky_list .my_pro_list li:first-child {margin-top:0} .br_sky .my_sky_list .my_pro_list li > a .img_box {float:left; width:100px} .br_sky .my_sky_list .my_pro_list li > a .img_box img {vertical-align:top} .br_sky .my_sky_list .my_pro_list li > a dl {float:left; width:119px; padding-left:10px} .br_sky .my_sky_list .my_pro_list li > a dt {overflow:hidden; width:100px; height:63px; padding-top:10px} .br_sky .my_sky_list .my_pro_list li > a dd.price {margin-top:10px; color:#222; font-weight:600} .br_sky .my_sky_list .my_pro_list li > a dd.price del {margin-right:5px; color:#999; font-weight:400} .br_sky .my_sky_list .my_pro_list li > a dd.sold_out {width:54px; height:19px; margin-top:7px; border:1px solid #f39fa2; text-align:center; line-height:17px; color:#e96f74; font-size:12px; } .br_sky .my_sky_list .my_pro_list li dd.tag {position:absolute; top:-1px; left:-1px; z-index:1; width:44px} .br_sky .my_sky_list .my_pro_list li dd.tag > em {display:block; width:44px; height:44px; margin-top:-1px; background:#fff; text-align:center} .br_sky .my_sky_list .my_pro_list li dd.tag > em:first-child {margin-top:0} .br_sky .my_sky_list .my_pro_list li dd.tag > em.new {height:40px; line-height:40px; background:#83ac5b; color:#fff; font-size:12px; font-weight:600} .br_sky .my_sky_list .my_pro_list li dd.tag > em.best {height:40px; line-height:40px; background:#83ac5b; color:#fff; font-size:12px; font-weight:600} .br_sky .my_sky_list .my_pro_list li dd.tag > em.sale {padding-top:7px; border:1px solid #c2d7a8; color:#333; font-size:12px; font-weight:600} .br_sky .my_sky_list .my_pro_list li dd.tag > em.sale > span {display:block; width:12px; height:11px; margin:0 auto; background-position:-288px -331px} .br_sky .my_sky_list .my_pro_list li dd.tag > em.sale strong {font-size:14px; font-weight:800} .br_sky .my_sky_list .my_pro_list li dd.tag > em.event {height:40px; padding-top:11px; border:1px solid #c2d7a8; background:#f2f8e8; font-size:10px; color:#88b661; font-weight:600; letter-spacing:-1px} .br_sky .my_sky_list .my_pro_list li dd.tag > em.plus {line-height:42px; border:1px solid #c2d7a8; color:#444; font-size:13px; font-weight:800} .br_sky .my_sky_list .my_pro_list li dd.tag > em.plus span {color:#8db853} .br_sky .my_sky_list .my_pro_list li .btn_del {display:block; position:absolute; top:11px; right:11px; width:11px; height:11px; text-indent:-9999px; background:url(../images/btn/spr_btns.png) no-repeat -489px -22px} .br_sky .my_sky_list .my_cart > div {position:relative; height:90%; margin-top:20px; padding-bottom:130px} .br_sky .my_sky_list .my_cart .my_pro_list {overflow-y:auto; max-height:100%} .br_sky .my_sky_list .my_cart > div > div {position:absolute; bottom:0; left:0; width:100%} .br_sky .my_sky_list .my_cart > div > div dl {padding:0 10px; font-weight:600} .br_sky .my_sky_list .my_cart > div > div dl:after {display:block; content:''; clear:both} .br_sky .my_sky_list .my_cart > div > div dl dt {float:left; font-size:16px; color:#222} .br_sky .my_sky_list .my_cart > div > div dd {float:right; margin-top:-10px; font-size:16px; color:#424242} .br_sky .my_sky_list .my_cart > div > div dl dd strong {font-size:28px; color:#71963f; font-weight:400} .br_sky .my_sky_list .my_cart > div > div > .btn_wrap {margin-top:20px; font-size:0} .br_sky .my_sky_list .my_cart > div > div > .btn_wrap a {display:inline-block; width:50%; height:38px; margin:0; border:1px solid #c6c6c6; border-left:0; line-height:36px; text-align:center; font-weight:600; font-size:15px; color:#333; } .br_sky .my_sky_list .my_cart > div > div > .btn_wrap a:first-child {background:#70953f; border-color:#70953f; color:#fff} .br_sky .my_sky_list .my_cart > div > div p {margin-top:5px; text-align:center} .br_sky .my_sky_list .my_recent > div {position:relative; height:90%; margin-top:20px} .br_sky .my_sky_list .my_recent .my_pro_list {overflow-y:auto; max-height:100%} .br_sky .my_sky_list .my_recent > div > div {position:absolute; bottom:0; left:0; width:100%} .br_sky .my_sky_list .recomm h3 {border-bottom:0} .br_sky .my_sky_list .recomm > div {position:relative; height:90%; padding-top:85px} .br_sky .my_sky_list .recomm > div ul {} .br_sky .my_sky_list .recomm .tab_sub2 {overflow:hidden; display:block; position:absolute; top:0; left:0; } .br_sky .my_sky_list .recomm .tab_sub2 li {display:block; float:left; width:86px} .br_sky .my_sky_list .recomm .tab_sub2 li a {height:65px; padding-top:10px; font-size:13px; line-height:16px; background:#f8f8f8} .br_sky .my_sky_list .recomm .tab_sub2 li a em {color:#719444} .br_sky .my_sky_list .recomm .tab_sub2 li:first-child a {} .br_sky .my_sky_list .recomm .tab_sub2 li:first-child a em {display:inline-block; padding-top:5px} .br_sky .my_sky_list .recomm .tab_sub2 li.active a {background:#fff} .br_sky .my_sky_list .recomm .tab_sub2 li.active a:after {height:65px} .br_sky .my_sky_list .recomm .tab_sub2 li:first-child.active a:after {left:0} .br_sky .my_sky_list .recomm .my_pro_list {overflow-y:auto; max-height:100%} .br_sky .my_sky_list .recomm > div > div {margin-top:60px; text-align:center} .br_sky .my_sky_list .recomm > div > div p {margin-top:15px; font-size:14px; line-height:18px} .br_sky .my_sky_list .recomm > div > div p strong {display:block; color:#444; font-weight:600} .br_sky .my_sky_list .recomm > div > div p strong em {color:#719444} .br_sky .my_sky_list .recomm > div > div > a {display:inline-block; margin-top:30px; width:167px; height:38px; background:#719444; text-align:center; line-height:38px; color:#fff; font-size:15px} /* Layout */ #wrap {min-width:1036px} .w_cont {width:1036px; margin:0 auto} .top_br_area {position:relative; width:100%; height:80px; transition:0.5s ease} .top_br_area.hidden {display:none} .top_br_area .top_cont {display:block;position:relative;min-width:1036px;height:100%;overflow:hidden;} /*.top_br_area .w_cont {position:absolute; top:0; left:50%; margin-left:-1000px; width:2000px; height:80px; text-align:center;}*/ .top_br_area a img {display:block; position:absolute; left:50%;-webkit-transform: translateX(-50%);-moz-transform: translateX(-50%);transform: translateX(-50%);width:2000px; height:80px;} .top_br_area .btn_close {display:inline-block; position:absolute; top:25px; left:50%; margin-left:482px; /*right:482px;*/ width:36px; text-align:center} .top_br_area a span {display:inline-block; width:36px; height:15px; margin-top:8px; line-height:15px; font-size:8px; color:#ddd; background:#333; border-radius:5px} .top_br_area a .btn_spr {width:24px; height:23px; margin-top:0; background:url(../images/btn/spr_btns.png) no-repeat -425px -94px; border-radius:0;} .fix_top {padding-top:52px} .fix_top #header {position:fixed; top:0; left:0; z-index:100; width:100%; transition:1s ease} .fix_top #header .menu_area {} .fix_top #header .logo_area {padding:0} .fix_top #header .logo_area h1 {display:none} .fix_top #header .logo_area .ranking {display:none} .fix_top #header .logo_area .srch_top {bottom:-34px; left:819px; z-index:1; width:240px; padding-right:49px; background:#fff} .fix_top #header .menu_area .btn_cart {right:32px; bottom:14px; z-index:1} .fix_top #header .menu_area .btn_cart.hidden {z-index:0} .fix_top #header .logo_area .srch_top .form_item {overflow:hidden; position:absolute; right:55px; width:0; border:0} .fix_top #header .logo_area .srch_top .form_item .i_label {left:14px} .fix_top #header .logo_area .srch_top .btn_close {overflow:hidden; width:0; transition:0.5s ease} .fix_top #header .logo_area .srch_top.open {bottom:-34px; left:829px; z-index:1; width:240px; padding-right:49px; background:#e4e4e4}/* .fix_top #header .logo_area .srch_top.open .form_item, .fix_top #header .logo_area .srch_top.open .btn_close {display:block}*/ .fix_top #header .logo_area .srch_top.open .form_item {width:191px} .fix_top #header .logo_area .srch_top.open .btn_close {width:30px} .fix_top #header .logo_area .srch_top .btn_srch {right:24px} .fix_top #header .logo_area .srch_top.open .btn_srch {right:34px} .fix_top #header .srch_top .srch_auto {width:230px} .fix_top #header .srch_top .btn_close {display:inline-block} .fix_top #header .top {display:none} #wrap.nr_main #header .top {display:block} #wrap.nr_main #header .logo_area {padding:17px 0 17px} #wrap.nr_main #header .logo_area h1 {display:block} #wrap.nr_main #header .logo_area .ranking {display:block} #wrap.nr_main #header .btn_cart {right:0; bottom:12px} #wrap.nr_main #header .logo_area .srch_top {bottom:-6px; right:0; width:220px; height:30px; padding-right:30px} #wrap.nr_main #header .logo_area .srch_top.open {} #wrap.nr_main #header .logo_area .srch_top .form_item {position:static; width:100%; border:1px solid #dedede} #wrap.nr_main #header .logo_area .srch_top .form_item .i_label {left:10px} #wrap.nr_main #header .logo_area .srch_top .btn_srch {right:0} #wrap.nr_main #header .srch_top .btn_close {display:none} #wrap.nr_main #header .logo_area .srch_top.open {bottom:-6px; right:0; left:819px; z-index:1; width:220px; padding-right:30px; background:#fff}/* .fix_top #header .logo_area .srch_top.open .form_item, .fix_top #header .logo_area .srch_top.open .btn_close {display:block} #wrap.nr_main #header .logo_area .srch_top.open .form_item {width:191px}*/ #wrap.nr_main #header .logo_area .srch_top.open .btn_close {width:0} #wrap.nr_main #header .logo_area .srch_top.open .btn_srch {right:0} #header {position:relative; background:#fff; transition:1s ease} #header .top {height:30px; background:#89b03f; color:#fff; line-height:30px} #header .top .w_cont:after {display:block; content:''; clear:both} #header .top .w_cont > .btn_main {position:relative; float:left; padding-left:16px; margin-right:25px; color:#fff} #header .top .w_cont > .btn_main:after {display:block; content:''; position:absolute; top:10px; left:0; width:12px; height:10px; background:url(../images/btn/spr_btns.png) no-repeat -207px -103px} #header .top .w_cont > dl {position:relative; float:left; width:140px} #header .top .w_cont > dl a {display:block; color:#fff} #header .top .w_cont > dl dt a:after {display:block; content:''; position:absolute; top:12px; right:10px; width:9px; height:7px; background:url(../images/btn/spr_btns.png) no-repeat -249px -135px} #header .top .w_cont > dl dd {display:none; position:absolute; top:30px; left:0; z-index:999; width:180px; border:1px solid #d4dfc5; background:#fff} #header .top .w_cont > dl dd ul {line-height:34px} #header .top .w_cont > dl dd ul li {border-top:1px solid #eaefe3; font-size:0} #header .top .w_cont > dl dd ul li:first-child {border-top:0} #header .top .w_cont > dl dd ul li a {display:block; position:relative; padding-left:41px; font-size:12px; color:#888} #header .top .w_cont > dl dd ul li a:after {display:block; content:''; position:absolute; top:6px; left:10px; width:21px; height:21px; background:url(../images/btn/spr_btns.png) no-repeat 0 0} #header .top .w_cont > dl dd ul li .kr:after {background-position:-392px -326px} #header .top .w_cont > dl dd ul li .eng:after {background-position:-392px -360px} #header .top .w_cont > dl dd ul li .cn:after, #header .top .w_cont > dl dd ul li .glo:after {background-position:-392px -395px} #header .top .w_cont > dl.active dt a:after {background-position:-278px -135px} #header .top .w_cont > dl.active dd {display:block} #header .top .user_menu {float:right; line-height:30px} #header .top .user_menu li {float:left; padding-left:10px; margin-left:23px} #header .top .user_menu li:first-child {margin-left:0} #header .top .user_menu li a {color:#fff; font-weight:200} #header .logo_area {padding:17px 0 17px} #header .logo_area .w_cont {position:relative; z-index:10} #header .logo_area h1 {width:210px; margin:0 auto} #header .logo_area h1 img {display:block; } #header .logo_area .ranking {position:absolute; bottom:-3px; left:0} #header .logo_area .ranking .rank_list {overflow:hidden; width:210px; height:23px; line-height:23px} #header .logo_area .ranking .rank_list ol {position:relative} #header .logo_area .ranking .rank_list ol li a {overflow:hidden; display:block; height:23px} #header .logo_area .ranking .rank_list ol li a em {display:inline-block; background:url(../images/spr_best10_txt.png) no-repeat 0 0; vertical-align:middle} #header .logo_area .ranking .rank_list ol li a em.best {width:33px; height:11px; background-position:-157px -26px} #header .logo_area .ranking .rank_list ol li a em.num {width:22px; height:10px; background-position:-68px -6px} #header .logo_area .ranking .rank_list ol li.rk_2 em.num {height:11px; background-position:-68px -52px} #header .logo_area .ranking .rank_list ol li.rk_3 em.num {height:14px; background-position:-68px -99px} #header .logo_area .ranking .rank_list ol li.rk_4 em.num {height:14px; background-position:-68px -145px} #header .logo_area .ranking .rank_list ol li.rk_5 em.num {height:14px; background-position:-68px -192px} #header .logo_area .ranking .rank_list ol li.rk_6 em.num {height:14px; background-position:-68px -235px} #header .logo_area .ranking .rank_list ol li.rk_7 em.num {height:13px; background-position:-68px -285px} #header .logo_area .ranking .rank_list ol li.rk_8 em.num {height:14px; background-position:-68px -328px} #header .logo_area .ranking .rank_list ol li.rk_9 em.num {height:14px; background-position:-68px -377px} #header .logo_area .ranking .rank_list ol li.rk_10 em.num {height:11px; background-position:-68px -424px} #header .logo_area .ranking .rank_list ol li a .arrow {width:22px; height:10px; background-position:-56px -2px} #header .logo_area .ranking .rank_list ol li a .txt {overflow:hidden; text-overflow:ellipsis; display:inline-block; width:120px; margin-right:10px; color:#666; vertical-align:middle; white-space:nowrap; font-size:13px} #header .logo_area .ranking .all_ranking {display:none; width:200px; position:absolute; top:0; left:0; z-index:10; padding-bottom:20px; border:1px solid #d4dfc5; background:#fff} #header .logo_area .ranking .all_ranking.active {display:block} #header .logo_area .ranking .all_ranking dt { padding:16px 0 8px; background:url(../images/bg/bg_best_tit.gif) no-repeat 50% 100%; text-align:center} #header .logo_area .ranking .all_ranking dt > span {display:inline-block; width:57px; height:12px; background:url(../images/spr_best10_txt.png) no-repeat -159px 0; } #header .logo_area .ranking .all_ranking dd li {padding:0 20px; margin-top:15px} #header .logo_area .ranking .all_ranking dd li a {overflow:hidden; text-overflow:ellipsis; display:inline-block; max-width:100%; white-space:nowrap; font-size:12px} #header .logo_area .ranking .all_ranking dd li a:hover {text-decoration:underline; font-weight:400; color:#70963f} #header .logo_area .ranking .all_ranking dd li a em {display:inline-block; width:18px; height:8px; background:url(../images/spr_best10_txt.png) no-repeat 0 -3px; vertical-align:middle} #header .logo_area .ranking .all_ranking dd li.rk_2 em {height:9px; background-position:0 -30px} #header .logo_area .ranking .all_ranking dd li.rk_3 em {height:11px; background-position:0 -58px} #header .logo_area .ranking .all_ranking dd li.rk_4 em {height:10px; background-position:0 -87px} #header .logo_area .ranking .all_ranking dd li.rk_5 em {height:10px; background-position:0 -115px} #header .logo_area .ranking .all_ranking dd li.rk_6 em {height:11px; background-position:0 -140px} #header .logo_area .ranking .all_ranking dd li.rk_7 em {height:10px; background-position:0 -171px} #header .logo_area .ranking .all_ranking dd li.rk_8 em {height:11px; background-position:0 -196px} #header .logo_area .ranking .all_ranking dd li.rk_9 em {height:11px; background-position:0 -226px} #header .logo_area .ranking .all_ranking dd li.rk_10 em {height:9px; background-position:0 -254px} #header .srch_top {position:absolute; bottom:-6px; right:0; width:220px; height:30px; padding-right:30px; font-size:0} #header .srch_top .btn_close {display:none; position:absolute; top:0; right:0; width:24px; height:30px; line-height:30px; background:#fff; text-align:center} #header .srch_top .form_item {display:inline-block; width:100%; border:1px solid #dedede; font-size:13px; color:#222; line-height:30px; vertical-align:middle} #header .srch_top .form_item .i_label {top:0; white-space:nowrap} #header .srch_top .btn_srch {position:absolute; top:0; right:0;width:20px; height:30px; background-position:0 -16px; font:0/0 a;cursor:pointer;} #header .srch_top input {width:100%; height:30px; padding-left:10px; line-height:30px; border:0; } #header .srch_top .srch_auto {display:none; position:absolute; top:30px; left:0; z-index:11; width:230px; border:1px solid #dedede; background:#fff; font-size:13px; color:#666; letter-spacing:-1px} #header .srch_top .srch_auto.active {display:block} #header .srch_top .srch_auto ul {padding:20px; line-height:27px} #header .srch_top .srch_auto ul li a {overflow:hidden; text-overflow:ellipsis; display:block; max-width:100%; white-space:nowrap} #header .srch_top .srch_auto em {color:#70953f; font-weight:600} #header .srch_top .srch_auto p {padding:20px 0; text-align:center} #header .srch_top .srch_auto p em {font-weight:400} #header .srch_top .srch_auto > div {overflow:hidden; padding:0 10px 0 20px; background:#f8f8f8; font-size:12px; line-height:38px} #header .srch_top .srch_auto > div a {float:left; text-decoration:underline; color:#aaa} #header .srch_top .srch_auto > div .btn_auto {float:right; text-decoration:none} #header .srch_top .srch_auto > div .btn_auto:after {display:inline-block; content:''; width:8px; height:7px; margin-left:4px; background:url(../images/btn/spr_btns.png) no-repeat -488px -5px; vertical-align:middle} #header .menu_area {position:relative; border-bottom:1px solid #e4ebdc; letter-spacing:-1px} #header .menu_area .w_cont {position:relative; padding:8px 0} #header .menu_area .btn_category {display:block; position:absolute; left:0; bottom:13px; width:107px; height:18px; background-position:0 -126px} #header .menu_area .btn_category.active {background-position:0 -158px} #header .menu_area .btn_cart {position:absolute; right:0; bottom:12px} #header .menu_area .gnb {text-align:center; font-size:0} #header .menu_area .gnb:after {display:block; content:''; clear:both} #header .menu_area .gnb > li {display:inline-block; margin-left:40px; font-size:18px; font-weight:600; color:#222} #header .menu_area .gnb > li:first-child {margin-left:0} #header .menu_area .gnb > li > a {position:relative; padding:0 5px; color:#222} #header .menu_area .gnb > li > a:hover {color:#89b03f} #header .menu_area .gnb > li > a:hover:after {display:block; content:''; position:absolute; bottom:-9px; left:0; z-index:11; width:100%; height:3px; background:#89b03f} #header .menu_area .gnb_sub {display:none; position:absolute; left:0; width:100%; z-index:10; background:#fff; border-top:1px solid #e3eada; border-bottom:1px solid #70963f} #header .menu_area .gnb_sub .w_cont {overflow:hidden; display:none; padding:0; min-height:244px} #header .menu_area .gnb_sub .w_cont.active {display:block} #header .menu_area .gnb_sub .w_cont > dl {float:left; width:150px; height:244px; font-size:14px} #header .menu_area .gnb_sub .w_cont > dl > dt {display:block;overflow:hidden;position:absolute;top:-1000em;left:0} #header .menu_area .gnb_sub .w_cont > dl > dd {float:left; width:150px; height:100%; padding:7px 0; background:#f0e6d3} #header .menu_area .gnb_sub .w_cont > dl > dd ul li {height:38px} #header .menu_area .gnb_sub .w_cont > dl > dd ul li:first-child {margin-top:0} #header .menu_area .gnb_sub .w_cont > dl > dd ul li a {display:block; width:100%; height:100%; padding-left:25px; background:#f0e6d3; border-top:1px solid #e1d3b6; line-height:37px; color:#624f2b} #header .menu_area .gnb_sub .w_cont > dl > dd ul li a:hover {background:#e9dec7; border-color:#e5d8be} #header .menu_area .gnb_sub .w_cont > dl > dd ul li:first-child a {border-top:0} #header .menu_area .gnb_sub .w_cont > .br_area {float:left; width:886px; height:244px; border-right:1px solid #e3eada} #header .menu_area .gnb_sub .w_cont > .br_area .slide_wrap {float:left; position:relative; width:490px; padding:20px 60px 0} #header .menu_area .gnb_sub .w_cont > .br_area .slide_frame {overflow:hidden; width:370px; height:180px} #header .menu_area .gnb_sub .w_cont > .br_area .slide_frame .slides li {width:370px; height:180px} #header .menu_area .gnb_sub .w_cont > .br_area .slide_frame .direction-nav a {top:112px; width:9px; height:15px} #header .menu_area .gnb_sub .w_cont > .br_area .slide_frame .direction-nav .prev {left:30px; background-position:-440px -279px} #header .menu_area .gnb_sub .w_cont > .br_area .slide_frame .direction-nav .next {right:30px; background-position:-472px -279px} #header .menu_area .gnb_sub .w_cont > .br_area .slide_frame .btn_slide {position:absolute; bottom:-23px; left:0} #header .menu_area .gnb_sub .w_cont > .br_area .link_list {float:left; width:395px; height:100%; border-left:1px solid #e3eada} #header .menu_area .gnb_sub .w_cont > .br_area .link_list li {float:left; height:100%; border-left:1px solid #f4f4f4} #header .menu_area .gnb_sub .w_cont > .br_area .link_list li:first-child {border-left:0} #header .menu_area .gnb_sub .brand > .br_area .slides li a {overflow:hidden; display:block; background:#f7f7f7} #header .menu_area .gnb_sub .brand > .br_area .slides li .img_box {float:left; width:180px; height:180px} #header .menu_area .gnb_sub .brand > .br_area .slides li .img_box img {width:100%;} #header .menu_area .gnb_sub .brand > .br_area .slides li .img_box .img_h {height:100%; width:auto} #header .menu_area .gnb_sub .brand > .br_area .slide_wrap .slides li a dl {position:relative; float:left; width:190px; padding:25px 20px 0; letter-spacing:-1px; font-weight:600} #header .menu_area .gnb_sub .brand > .br_area .slide_wrap .slides li a dl:after {position:absolute; content:''; top:30px; left:-10px; width:0; height:0; border-top:8px solid transparent; border-bottom:8px solid transparent; border-right:11px solid #f7f7f7;} #header .menu_area .gnb_sub .brand > .br_area .slide_wrap .slides li a dl dt {font-size:14px; color:#222} #header .menu_area .gnb_sub .brand > .br_area .slide_wrap .slides li a dl dt em {display:block; width:75px; height:20px; margin-bottom:10px; border:1px solid #70953f; line-height:18px; text-align:center; font-size:12px; color:#70953f } #header .menu_area .gnb_sub .brand > .br_area .slide_wrap .slides li a dl dd {width:51px; height:7px; margin-top:15px; background:url(../images/btn/spr_btns.png) no-repeat 0 -201px; text-indent:-9999px} #header .menu_area .gnb_sub .bnefit > .br_area .slide_wrap {padding:20px 40px 0} #header .menu_area .gnb_sub .bnefit > .br_area .slide_frame {width:100%; height:180px} #header .menu_area .gnb_sub .bnefit > .br_area .slide_frame .slides li {width:100%; height:100%} #header .menu_area .gnb_sub .bnefit > .br_area .slide_frame .slides li a {display:block; padding:0 10px} #header .menu_area .gnb_sub .bnefit > .br_area .slide_frame .slides li a:after {display:block; content:''; clear:both} #header .menu_area .gnb_sub .bnefit > .br_area .slide_frame .slides li .img_box {position:relative; float:right; width:180px; height:180px; } #header .menu_area .gnb_sub .bnefit > .br_area .slide_frame .slides li .img_box .award {position:absolute; top:10px; right:10px;} #header .menu_area .gnb_sub .bnefit > .br_area .slide_frame .slides li .img_box .award > img {display: block;width: 40px;margin-bottom: 5px;/* margin-left:5px; */} #header .menu_area .gnb_sub .bnefit > .br_area .slide_frame .slides li .img_box .award > img:first-child {margin-left:0} #header .menu_area .gnb_sub .bnefit > .br_area .slide_frame .slides li dl {float:left; width:210px; padding:20px 0 0 0; letter-spacing:-1px} #header .menu_area .gnb_sub .bnefit > .br_area .slide_frame .slides li dl dt {font-size:24px; color:#222} #header .menu_area .gnb_sub .bnefit > .br_area .slide_frame .slides li dl dd {margin-top:20px; font-size:13px} #header .menu_area .gnb_sub .bnefit > .br_area .slide_frame .slides li dl .pro_view {width:84px; height:30px; border:1px solid #dedede; line-height:28px; text-align:center; color:#424242} #header .menu_area .gnb_sub .bnefit > .br_area .slide_frame .slides li dl .pro_view:after {display:inline-block; content:''; width:7px; height:10px; margin:9px 0 0 5px; background:url(../images/btn/spr_btns.png) no-repeat 0 0; vertical-align:top} #header .menu_area .gnb_sub .event > .br_area .slide_wrap {padding-top:30px} #header .menu_area .gnb_sub .event > .br_area .slide_frame {overflow:visible; height:160px} #header .menu_area .gnb_sub .event > .br_area .img_box {overflow:visible; position:relative; width:370px;} #header .menu_area .gnb_sub .event > .br_area .img_box img {height:160px; vertical-align:top} #header .menu_area .gnb_sub .event > .br_area .ico_event_day {display:inline-block; position:absolute; top:3px; left:-4px; width:51px; height:29px; background:url(../images/spr_ico.png) no-repeat -377px -451px; line-height:23px; text-align:center; font-size:12px; font-weight:600; color:#fff } #header .menu_area .gnb_sub .event > .br_area .slide_frame .btn_slide {bottom:-13px} #header .menu_area .gnb_sub .community > .br_area .slides li a {overflow:hidden; display:block; background:#f7f7f7} #header .menu_area .gnb_sub .community > .br_area .slides li .img_box {position:relative; float:left; width:180px; height:180px} #header .menu_area .gnb_sub .community > .br_area .slides li .img_box img {position:absolute; top:50%; left:50%} #header .menu_area .gnb_sub .community > .br_area .slides li .img_box .img_h {height:100%; width:auto} #header .menu_area .gnb_sub .community > .br_area .slides li dl {float:left; width:190px; height:180px; padding:20px} #header .menu_area .gnb_sub .community > .br_area .slides li dl dt {overflow:hidden; height:56px; font-size:14px; color:#222; font-weight:600} #header .menu_area .gnb_sub .community > .br_area .slides li dl .rating {margin-top:15px} #header .menu_area .gnb_sub .community > .br_area .slides li dl .user {margin-top:15px; font-family:'Georgia'; font-size:13px; color:#666; font-style:italic} #header .menu_area .gnb_sub .community > .br_area .slides li dl .type {margin-top:5px; font-size:12px} #header .menu_area .all_menu {display:none; position:absolute; z-index:999; width:100%; min-height:381px; background:#fff; border-bottom:1px solid #70963f} #header .menu_area .all_menu .w_cont {padding:0} #header .menu_area .all_menu .w_cont:after {display:block; content:''; clear:both} #header .menu_area .all_menu .w_cont h2 {position:absolute; top:-49px; left:0; z-index:10; width:150px; height:55px; background:#f0e6d3 url(../images/btn/spr_btns.png) no-repeat -166px -410px; text-indent:-9999px} #header .menu_area .all_menu .w_cont > ul {float:left; padding-top:12px; width:150px; height:380px; background:#f0e6d3} #header .menu_area .all_menu .w_cont > ul > li > a {display:block; position:relative; height:34px; padding-left:30px; line-height:34px; color:#624f2b; border-bottom:1px solid #e1d3b6;font-size:14px; font-weight:400} #header .menu_area .all_menu .w_cont > ul > li > a:hover, #header .menu_area .all_menu .w_cont > ul > li.active > a {background:#e9dec7} /* #header .menu_area .all_menu .w_cont > ul > li > a:after {display:none; content:''; position:absolute; right:-6px; top:13px; width:6px; height:12px; background:url(../images/bg/bg_1depth_over.png) no-repeat 0 0} #header .menu_area .all_menu .w_cont > ul > li > a:hover:after, #header .menu_area .all_menu .w_cont > ul > li.active > a:after {display:block}*/ #header .menu_area .all_menu .depth2_box {overflow:hidden; display:none; position:absolute; top:0; left:150px; width:750px; background:#fff} #header .menu_area .all_menu .active .depth2_box {display:block} #header .menu_area .all_menu .depth2_box > ul {float:left; width:164px; height:380px; padding-top:5px; background:#fafafa} #header .menu_area .all_menu .depth2_box > ul > li {padding-left:13px; margin-top:10px} #header .menu_area .all_menu .depth2_box > ul > li > a {display:inline-block; position:relative; padding-left:17px; font-size:13px; color:#444} #header .menu_area .all_menu .depth2_box > ul > li > a:hover {text-decoration:underline; color:#6e8041; font-weight:400} #header .menu_area .all_menu .depth2_box > ul > li a:hover:after {display:block; content:''; position:absolute; top:4px; left:0; width:12px; height:10px; background:url(../images/btn/spr_btns.png) no-repeat -426px -326px} #header .menu_area .all_menu .depth2_box > dl {float:left; width:550px; height:380px; border-left:1px solid #ececec} #header .menu_area .all_menu .depth2_box > dl > dt {height:85px; padding-top:25px; background:url(../images/bg/bg_menubest_tit.gif) no-repeat 50% 100%; text-align:center; font-weight:400; font-size:18px; color:#222} #header .menu_area .all_menu .depth2_box > dl > dt strong {font-weight:600} #header .menu_area .all_menu .depth2_box > dl > dd {} #header .menu_area .all_menu .depth2_box > dl > dd ul {font-size:0; text-align:center} #header .menu_area .all_menu .depth2_box > dl > dd ul li {position:relative; display:inline-block; width:33%; padding:0 20px; font-size:13px} #header .menu_area .all_menu .depth2_box > dl > dd ul li .award {position:absolute; top:10px; right:10px;} #header .menu_area .all_menu .depth2_box > dl > dd ul li .award > img {display: block;width: 40px;margin-bottom: 5px;/* margin-left:5px; */} #header .menu_area .all_menu .depth2_box > dl > dd ul li .award > img:first-child {margin-left:0} #header .menu_area .all_menu .depth2_box > dl > dd ul li dt {height:28px; margin:20px 0} #header .menu_area .all_menu .depth2_box > dl > dd ul li img {display:block; width:100%} #header .menu_area .all_menu .depth2_box > dl > dd ul li dd {color:#222; font-size:16px; font-weight:600} #header .menu_area .all_menu .depth2_box > dl > dd ul li dd del {margin-right:5px; color:#999; font-size:13px} #header .menu_area .all_menu .br_area {float:right; width:135px; height:380px; border-left:1px solid #ececec; border-right:1px solid #ececec} #header .menu_area .all_menu .br_area li:first-child a {padding-top:20px} #header .menu_area .all_menu .br_area li a {display:block; width:100%; height:100%; padding-top:15px; text-align:center} #header .menu_area .all_menu .br_area li a strong {display:block; margin-top:5px; font-size:14px; color:#222} #header .menu_area .all_menu .br_area li a .ico_spr {width:81px; height:81px} #header .menu_area .all_menu .br_area li a .crown {background-position:-716px -189px} #header .menu_area .all_menu .br_area li a .new_mark {background-position:-716px -302px} #header .menu_area .all_menu .br_area li a .only {background-position:-716px -417px} #footer .nr_foot {padding:50px 0 57px 0; background:#f8f8f8} #footer .nr_foot .board_area {overflow:hidden} #footer .nr_foot dt {height:30px; font-weight:600; color:#222; font-size:16px} #footer .nr_foot dt a {color:#222} #footer .nr_foot .board_area dd {color:#999; line-height:18px} #footer .nr_foot .board_area dd a {color:#999} #footer .nr_foot .board_area > dl {float:left; width:355px; height:86px; padding-left:30px; padding-right:40px; border-left:1px solid #e8e8e8} #footer .nr_foot .board_area > dl:first-child {width:340px; padding-left:0; border:0} #footer .nr_foot .board_area > dl > dd > ul > li a {overflow:hidden; text-overflow:ellipsis; display:inline-block; max-width:100%; white-space:nowrap} #footer .nr_foot .board_area > ul {float:left} #footer .nr_foot .board_area > ul > li {float:left; width:170px; height:86px; border-left:1px solid #e8e8e8; font-size:12px} #footer .nr_foot .board_area > ul > li:first-child {width:171px} #footer .nr_foot .board_area > ul > li a {display:inline-block; padding-left:30px} #footer .nr_foot .board_area > ul > li dl dd {margin-top:5px; line-height:16px} #footer .nr_foot .board_area > ul > li dl dt span {margin-right:10px} #footer .nr_foot .sns_area {overflow:hidden; margin-top:50px} #footer .nr_foot .sns_area dl {float:right; height:24px; line-height:24px} #footer .nr_foot .sns_area dl:first-child {float:left} #footer .nr_foot .sns_area dl dt {float:left} #footer .nr_foot .sns_area dl dt span {margin-right:10px} #footer .nr_foot .sns_area dl dd {float:left; margin-left:58px; color:#999} #footer .nr_foot .sns_area dl dd strong {margin-right:10px; color:#70963f; font-size:18px} #footer .nr_foot .sns_area dl dd ul {height:24px;} #footer .nr_foot .sns_area dl dd ul li {float:left; margin-left:40px} #footer .nr_foot .sns_area dl dd ul li:first-child {margin-left:0} #footer .nr_foot .sns_area dl dd ul li a {display:inline-block; height:24px; background:url(../images/spr_sns.png) no-repeat 0 0} #footer .nr_foot .sns_area dl dd ul li.facebook a {width:12px; background-position:0 0} #footer .nr_foot .sns_area dl dd ul li.insta a {width:24px; background-position:-52px 0} #footer .nr_foot .sns_area dl dd ul li.utube a {width:24px; background-position:-116px 0} #footer .nr_foot .sns_area dl dd ul li.kakao a {width:12px; background-position:-180px 0} #footer .nr_foot .sns_area dl dd ul li.blog a {width:27px; background-position:-232px 0} #footer .nr_foot .sns_area dl dd ul li.facebook a:hover {background-position:0 -33px} #footer .nr_foot .sns_area dl dd ul li.insta a:hover {background-position:-52px -33px} #footer .nr_foot .sns_area dl dd ul li.utube a:hover {background-position:-116px -33px} #footer .nr_foot .sns_area dl dd ul li.kakao a:hover {background-position:-180px -33px} #footer .nr_foot .sns_area dl dd ul li.blog a:hover {background-position:-232px -33px} #footer .site_foot {border-top:1px solid #ededed} #footer.refusal_footer .site_foot {border:0} #footer .site_foot .foot_menu .w_cont {padding:7px 0} #footer .site_foot .foot_menu .w_cont:after {display:block; content:''; clear:both} #footer .site_foot .foot_menu .w_cont > ul {float:left; padding:8px 0} #footer .site_foot .foot_menu .w_cont > ul li {float:left; height:12px; padding-left:8px; margin-left:8px; border-left:1px solid #ddd; line-height:12px} #footer .site_foot .foot_menu .w_cont > ul li:first-child {border:0; padding:0; margin:0} #footer .site_foot .foot_menu .w_cont > ul li a em {color:#70963f} #footer .site_foot .foot_menu .w_cont > dl {position:relative; float:right; line-height:25px} #footer .site_foot .foot_menu .w_cont > dl dt a {display:block; width:180px; height:27px; padding-left:10px; border:1px solid #dedede; font-size:12px; vertical-align:middle } #footer .site_foot .foot_menu .w_cont > dl dt a span {position:absolute;top:50%;margin-top:-3px;right:6px;display:inline-block; width:8px; height:5px;background:url(../images/btn/btn_arrow.png) no-repeat 0 0} #footer .site_foot .foot_menu .w_cont > dl dd {display:none; position:absolute; top:26px; left:0; z-index:10; width:180px; border:1px solid #dedede; background:#fff} #footer .site_foot .foot_menu .w_cont > dl.active dd {display:block} #footer .site_foot .foot_menu .w_cont > dl dd ul {line-height:34px} #footer .site_foot .foot_menu .w_cont > dl dd ul li {border-top:1px solid #eaefe3; font-size:0} #footer .site_foot .foot_menu .w_cont > dl dd ul li:first-child {border-top:0} #footer .site_foot .foot_menu .w_cont > dl dd ul li a {display:block; position:relative; padding-left:31px; font-size:12px; color:#888} #footer .site_foot .foot_menu .w_cont > dl dd ul li a:after {display:block; content:''; position:absolute; top:6px; left:5px; width:21px; height:21px; background:url(../images/btn/spr_btns.png) no-repeat 0 0} #footer .site_foot .foot_menu .w_cont > dl dd ul li .kr:after {background-position:-392px -326px} #footer .site_foot .foot_menu .w_cont > dl dd ul li .eng:after {background-position:-392px -360px} #footer .site_foot .foot_menu .w_cont > dl dd ul li .cn:after, #footer .site_foot .foot_menu .w_cont > dl dd ul li .glo:after {background-position:-392px -395px} #footer .site_foot .address_area {padding:20px 0; border-top:1px solid #ededed} #footer .site_foot .address_area .w_cont > div {overflow:hidden; margin-top:15px} #footer .site_foot .address_area .w_cont > div address {float:left} #footer .site_foot .address_area .w_cont > div > div {float:right; font-size:12px; color:#999} #footer .site_foot .address_area .w_cont > div > div a {float:left} #footer .site_foot .address_area .w_cont > div > div p {float:left; margin-left:10px} #footer .site_foot .address_area .w_cont > div > div strong {display:block; margin-bottom:5px } #footer .site_foot .address_area .w_cont > div address p {margin-top:3px; line-height:24px} #footer .site_foot .address_area .w_cont > div address p:first-child {margin-top:0} #footer .site_foot .address_area .w_cont > div address p > span, #footer .site_foot .address_area .w_cont > div address p > .btn_small2 {margin-left:7px} #footer .site_foot .address_area .w_cont > div address p > span:first-child {margin-left:0} #footer .site_foot .address_area .w_cont > div address .copy {font-size:12px} #content {width:1036px; margin:0 auto} #content.v2 {width:100%} #content .sub_navi {overflow:hidden; margin-top:10px} #content .sub_navi li {position:relative; float:left; margin-left:10px; padding-left:12px; color:#444} #content .sub_navi li:first-child {margin-left:0; padding-left:0} #content .sub_navi li:after {display:inline-block; content:''; position:absolute; top:50%; left:0; width:5px; height:10px; margin-top:-5px; background:url(../images/btn/spr_btns.png) no-repeat -36px -18px} #content .sub_navi li:first-child:after {display:none} #content .sub_navi li a {color:#888} #content .sub_navi li:first-child a {display:inline-block; width:16px; height:14px; background:url(../images/btn/spr_btns.png) no-repeat -48px -16px; text-indent:-9999px; vertical-align:middle} #content .sub_tit_wrap {} #content .sub_tit_wrap h2 {padding:17px 0 14px; border-bottom:2px solid #333; text-align:center; font-size:38px; font-weight:600; color:#222} #content .sub_tit_wrap.v2 h2 {padding-bottom:22px; border-bottom:0} #content .sub_tit_wrap.v3 h2 {padding-bottom:20px; border-bottom:0} .onsale_title{font-size:24px;color:#222;font-weight:400;padding-bottom:15px;margin-bottom:30px;border-bottom:2px solid #333;} .flow_sub {overflow:hidden} .flow_sub li {float:left; width:341px; padding:16px 32px 15px; margin-left:6px; background:#f3f3f3; color:#999} .flow_sub li:first-child {margin-left:0} .flow_sub li.active {width:342px; background:#70953f; color:#fff} .flow_sub li > span {float:left; } .flow_sub li > strong {float:left; margin-left:15px; font-size:16px; font-weight:400} .flow_sub li.active > strong {font-weight:600; } .flow_sub li > strong span {display:block; font-size:12px} .flow_sub li .bag, .flow_sub li .pay , .flow_sub li .pay_end {margin-top:3px} /* Layer Popup */ .pop_layer {display:none; position:absolute; top:0; left:0; width:100%; height:100%; z-index:100} .pop_layer.open {display:block} .pop_layer .bg {position:fixed; width:100%; height:100%; background:#000; opacity:0.46; filter:alpha(opacity=46)} .pop_layer .pop_wrap {position:absolute; top:100px; left:50%; width:800px; margin-left:-400px; padding:32px; border:2px solid #666; background:#fff} .pop_layer .pop_wrap .btn_close {display:inline-block; position:absolute; top:32px; right:32px; width:29px; height:29px; background:url(../images/btn/spr_btns.png) no-repeat -167px 0; text-indent:-9999px} .pop_header h2 {font-size:22px; color:#222; font-weight:600; max-width:680px;} .pop_header .btn_close {display:inline-block; position:absolute; top:32px; right:32px; width:29px; height:29px; background:url(../images/btn/spr_btns.png) no-repeat -167px 0; text-indent:-9999px} .pop_header {padding-bottom:10px; border-bottom:2px solid #333} .pop_content {margin-top:20px; font-size:14px; } /* 우편번호찾기 */ #zip_code_pop .pop_wrap {width:639px; margin-left:-320px} #zip_code_pop fieldset > dl {text-align:center; font-size:14px} #zip_code_pop fieldset > dl dt {padding:16px 0} #zip_code_pop fieldset > dl dt a {margin-left:20px} #zip_code_pop fieldset > dl dd.srch {padding:20px 0; background:#f8f8f8; border:0; border-top:1px solid #e9e9e9; border-bottom:1px solid #e9e9e9; font-size:0} #zip_code_pop fieldset > dl dd.srch input {width:180px; margin-right:5px} #zip_code_pop fieldset > dl dd.srch input, #zip_code_pop fieldset > dl dd.srch a {display:inline-block; vertical-align:middle} #zip_code_pop fieldset > dl dd.result {padding:20px 0; } #zip_code_pop fieldset > dl dd.result em {color:#e93e44} #zip_code_pop .addr_list > div {padding:20px 0; border-top:1px solid #dedede; text-align:center; font-size:0} #zip_code_pop .addr_list > div .sel_box {display:inline-block; width:180px; vertical-align:middle; font-size:13px; text-align:left} #zip_code_pop .addr_list > div .sel_box:first-child {width:160px; margin-right:5px} #zip_code_pop .addr_list dl {border-top:1px solid #c6c6c6; border-bottom:1px solid #c6c6c6} #zip_code_pop .addr_list dl dt {height:32px; line-height:30px; background:#f8f8f8; border-bottom:1px solid #e9e9e9; font-size:13px; color:#888; font-size:0} #zip_code_pop .addr_list dl dt span {display:inline-block; width:80%; font-size:13px; text-align:center} #zip_code_pop .addr_list dl dt span:first-child {width:20%} #zip_code_pop .addr_list dl dd {overflow-y:auto; max-height:300px} #zip_code_pop .addr_list dl dd li {padding:15px 0; border-top:1px solid #e9e9e9;} #zip_code_pop .addr_list dl dd li:first-child {border-top:0} #zip_code_pop .addr_list dl dd li a {display:block; font-size:0} #zip_code_pop .addr_list dl dd li a strong {display:inline-block; width:20%; font-size:13px; text-align:center; vertical-align:top} #zip_code_pop .addr_list dl dd li a span {display:inline-block; width:80%; font-size:13px; vertical-align:top} #zip_code_pop .addr_list dl dd > p {padding:15px 0; text-align:center} /* 카드무이자 */ .card_list th, .card_list td {padding:38px 0; border-top:1px solid #e9e9e9} .card_list th {vertical-align:top} .card_list th img {max-width:100%} .card_list tr:first-child th, .card_list tr:first-child td {border-top:0} .card_list td {padding-left:10px} .card_list td strong {font-size:14px; color:#424242} .card_list td ul {margin-top:10px; font-size:13px; color:#888; line-height:20px} /* 포토리뷰상세 */ #pop_review_view .article {margin-bottom:30px; border-bottom:1px solid #aaa} #pop_review_view .text_area {margin:30px 0} #pop_review_view .article_review {overflow:hidden; height:240px; border-top:1px solid #333; border-bottom:1px solid #333; text-align:center } #pop_review_view .article_review > div {float:left; width:180px; height:100%; padding:20px 27px; border-right:1px solid #e9e9e9} #pop_review_view .article_review > div > p {margin-top:20px} #pop_review_view .article_review > div > p {overflow:hidden; height:38px} #pop_review_view .article_review > dl {float:left; width:552px; height:100%; padding:0 30px} #pop_review_view .article_review > dl > dt {line-height:48px; height:48px; font-size:14px; color:#222; font-weight:600} #pop_review_view .article_review > dl > dd {border-top:1px solid #e9e9e9} #pop_review_view .article_review > dl > dd ul {overflow:hidden} #pop_review_view .article_review > dl > dd ul li {float:left; width:110px; height:189px; padding:20px 0; margin-left:17px} #pop_review_view .article_review > dl > dd ul li:first-child {margin-left:0} #pop_review_view .article_review > dl > dd ul li .img_box {position:relative; width:100%; height:85px} #pop_review_view .article_review > dl > dd ul li .img_box .img_w {height:100%; width:auto} #pop_review_view .article_review > dl > dd ul li dl dt {overflow:hidden; height:34px; margin-top:10px; font-size:13px} #pop_review_view .article_review > dl > dd ul li dl dd {margin-top:10px; font-size:11px; font-family:'Georgia'; font-style:italic} #pop_review_view .article_review > dl > dd .null {height:189px} #pop_review_view .article_review > dl > dd .null:after {display:inline-block; content:''; vertical-align:middle; width:1px; height:100%} #pop_review_view .btn_wrap {margin-bottom:40px} #pop_review_view .btn_wrap a {display:inline-block; width:86px; height:38px; border:1px solid #dedede; background:#ebebeb; line-height:36px; font-size:15px; color:#333; text-align:center} #pop_review_view .btn_wrap a:first-child {background-color:#fff} /*사용리뷰상세*/ #pop_used_review .info.v2 {margin-top:10px; border-top:1px solid #e9e9e9} #pop_used_review .pop_content > dl {overflow:hidden; position:relative; padding:20px 0; border-top:1px solid #aaa; border-bottom:1px solid #aaa} #pop_used_review .pop_content > dl:after {display:block; content:''; position:absolute; top:20px; bottom:20px; left:181px; width:1px; background:#e9e9e9} #pop_used_review .pop_content > dl > dt {float:left; width:182px; height:100%; padding:10px 20px; text-align:center} #pop_used_review .pop_content > dl > dt .img_box {width:120px; height:120px; margin:0 auto} #pop_used_review .pop_content > dl > dt p {overflow:hidden; height:36px; margin-top:20px} #pop_used_review .pop_content > dl > dd {float:left; width:550px; height:100%; padding:10px 30px; line-height:22px;} #pop_used_review .btn_wrap {margin-top:20px} #pop_used_review .btn_wrap a {display:inline-block; width:86px; height:38px; border:1px solid #dedede; background:#ebebeb; line-height:36px; font-size:15px; color:#333; text-align:center} #pop_used_review .btn_wrap a:first-child {background-color:#fff} /* 리뷰정책 */ #pop_review_guide .pop_content {margin-top:0} #pop_review_guide .pro_detail_txt {line-height:18px} #pop_review_guide .review_guide > div {margin-bottom:20px; font-size:0; text-align:center} #pop_review_guide .review_guide > div span {display:inline-block; width:160px; height:54px; padding-left:93px; padding-top:4px; border-left:1px solid #e9e9e9; background:url(../images/bg/bg_review_text.jpg) no-repeat 30px 0; font-size:14px; color:#222; font-weight:600} #pop_review_guide .review_guide > div span:first-child {border:0; margin-right:30px; padding-left:73px; background:url(../images/bg/bg_review_photo.jpg) no-repeat 30px 0; } #pop_review_guide .review_guide > div span strong {display:block; font-size:16px; color:#719444} #pop_review_guide .review_guide ul li {margin-top:5px} #pop_review_guide .review_guide ul li strong {color:#222} #pop_review_guide .review_guide ul li em {color:#719444} #pop_review_guide .review_guide dt {margin-top:35px; font-size:16px; color:#222} #pop_review_guide .review_guide dd {margin-top:18px;} #pop_review_guide .review_guide dd .list_type3 {line-height:20px} #pop_review_guide .review_guide dd .list_type3 ul {font-size:13px; color:#888} #pop_review_guide .review_guide .review_point_txt {overflow:hidden; margin:15px 0; padding:15px 0; background:#fafafa} #pop_review_guide .review_guide .review_point_txt li {float:left; width:244px; padding-left:20px; border-left:1px solid #eee} #pop_review_guide .review_guide .review_point_txt li:first-child {border-left:0} #pop_review_guide .review_guide .review_point_txt li strong {display:block; margin-bottom:10px; font-size:15px; color:#222} #pop_review_guide .review_guide .review_point_txt li span {font-size:13px; color:#555} /* 쉐이크박스안내*/ #pop_shake_box .event_pro {padding:20px 0 30px} #pop_shake_box .event_pro dt {font-size:15px; color:#333; text-align:center} #pop_shake_box .event_pro dt strong {display:block; font-size:24px; font-weight:400} #pop_shake_box .event_pro dd {margin-top:25px} #pop_shake_box .event_pro dd ol {overflow:hidden; padding-left:15px} #pop_shake_box .event_pro dd ol li {float:left; width:154px; height:139px;padding-left:20px; padding-top:70px; background:url(../images/spr_ico.png) no-repeat 0 -703px;border-left:1px solid #e9e9e9; font-size:13px; color:#666; line-height:18px; letter-spacing:-1px} #pop_shake_box .event_pro dd ol li.step1 {padding-left:0; border-left:0} #pop_shake_box .event_pro dd ol li.step2 {width:159px; background-position:-155px -703px} #pop_shake_box .event_pro dd ol li.step3 {width:184px; background-position:-314px -703px} #pop_shake_box .event_pro dd ol li.step4 {width:180px; background-position:-499px -703px} #pop_shake_box .ticket_pro {position:relative; padding:30px 0 0 186px; border-top:1px solid #e9e9e9} #pop_shake_box .ticket_pro:after {display:inline-block; content:''; position:absolute; top:64px; left:15px; width:144px; height:81px; background:url(../images/spr_ico.png) no-repeat -694px -702px} #pop_shake_box .ticket_pro dt {padding-left:30px; font-size:24px; color:#333} #pop_shake_box .ticket_pro dd {margin-top:20px; padding-bottom:20px} #pop_shake_box .ticket_pro dd ul {overflow:hidden} #pop_shake_box .ticket_pro dd ul li {margin-top:5px; font-size:14px; color:#666; letter-spacing:-1px} #pop_shake_box .ticket_pro dd ul li.tip1, #pop_shake_box .ticket_pro dd ul li.tip2, #pop_shake_box .ticket_pro dd ul li.tip3 {float:left; width:278px} #pop_shake_box .ticket_pro dd ul li.tip4, #pop_shake_box .ticket_pro dd ul li.tip5 {float:right; width:220px; margin-top:-50px} #pop_shake_box .ticket_pro dd ul li.tip5 {margin-top:-22px} #pop_shake_box .ticket_pro dd ul li em {display:inline-block; width:55px; height:22px; margin-right:10px; border-radius:10px; background:#e9ded4; text-align:center; line-height:22px; font-size:10px; color:#3f3835; vertical-align:middle} /* 검색 */ .nr_srch{padding-bottom:80px;} .nr_srch .srch_top{padding:40px 0;background-color:#f8f8f8;border:1px solid #e9e9e9;border-width:1px 0;} .nr_srch .srch_top .srch_box{position:relative;width:480px;margin:0 auto} .nr_srch .srch_top .srch_box.null{padding-bottom:0;border-bottom:none;} .nr_srch .srch_top .srch_box .form_srch{} .nr_srch .srch_top .srch_box .form_item{float:left;width:420px;} .nr_srch .srch_top .srch_box .form_item .i_text{background-color:#fff;} .nr_srch .srch_top .srch_box .form_item .i_text2{background-color:#fff;} .nr_srch .srch_top .srch_box .btn_srch{float:right;width:54px;padding:0;background-color:#70953e;text-align:center;} .nr_srch .srch_top .srch_box .srch_option{position:absolute;top:31px;left:0;width:420px;border:1px solid #dedede;background-color:#fff;z-index:5} .nr_srch .srch_top .srch_box .srch_option .txt_auto{padding:15px 20px;font-size:13px;color:#666;line-height:22px;} .nr_srch .srch_top .srch_box .srch_option .auto_push{overflow:hidden;position:relative;padding:0 20px;background-color:#f8f8f8;line-height:38px;} .nr_srch .srch_top .srch_box .srch_option .auto_push .btn_auto{float:left;font-size:12px;font-weight:400;color:#aaa;text-decoration:underline;} .nr_srch .srch_top .srch_box .srch_option .auto_push .btn_auto_close{float:right;position:relative;padding-right:12px;font-size:12px;font-weight:400;color:#aaa;} .nr_srch .srch_top .srch_box .srch_option .auto_push .btn_auto_close:after{display:block;content:'';position:absolute;top:15px;right:0;width:8px;height:7px;background:url(../images/btn/spr_btns.png) no-repeat -488px -5px;} .nr_srch .srch_top .srch_box .srch_option .keyword_push{position:relative;min-height:245px;} .nr_srch .srch_top .srch_box .srch_option .keyword_push .list_keyword{width:258px;padding:10px 20px;} .nr_srch .srch_top .srch_box .srch_option .keyword_push .list_keyword li{line-height:32px} .nr_srch .srch_top .srch_box .srch_option .keyword_push .list_keyword li a{font-size:14px;font-weight:200;color:#666;} .nr_srch .srch_top .srch_box .srch_option .keyword_push .list_keyword li a span{font-weight:400;color:#70953f;} .nr_srch .srch_top .srch_box .srch_option .keyword_push .keyword_view{position:absolute;top:0;right:0;bottom:0;width:160px;border-left:1px solid #d2d2d2;text-align:center} .nr_srch .srch_top .srch_box .srch_option .keyword_push .keyword_view:after{display:inline-block;content:'';height:100%;vertical-align:middle;} .nr_srch .srch_top .srch_box .srch_option .keyword_push .keyword_view .view_item{display:inline-block;vertical-align:middle;} .nr_srch .srch_top .srch_box .srch_option .keyword_push .keyword_view .view_item a{display:block;} .nr_srch .srch_top .srch_box .srch_option .keyword_push .keyword_view .img_box{width:130px;height:130px;margin:0 auto;} .nr_srch .srch_top .srch_box .srch_option .keyword_push .keyword_view dl{margin-top:10px;} .nr_srch .srch_top .srch_box .srch_option .keyword_push .keyword_view dt{display:inline-block; max-width:130px; font-size:12px;color:#767676;line-height:14px;} .nr_srch .srch_top .srch_box .srch_option .keyword_push .keyword_view dd{margin-top:4px;font-size:14px;color:#333;font-weight:400;letter-spacing:-1px} .nr_srch .srch_top .beauty_trend{margin-top:30px;} .nr_srch .srch_top .beauty_trend dl{} .nr_srch .srch_top .beauty_trend dt{overflow:hidden;width:160px;height:32px;margin:0 auto;background:url(../images/tit/tit_beauty_trand.png) no-repeat 0 0;text-indent:-999em;} .nr_srch .srch_top .beauty_trend dd{margin-top:15px;} .nr_srch .srch_top .beauty_trend dd ul{margin-top:-20px; margin-left:-20px; font-size:0;text-align:center} .nr_srch .srch_top .beauty_trend dd ul li{display:inline-block;margin-top:20px;margin-left:20px;vertical-align:top;} /*.nr_srch .srch_top .beauty_trend dd ul li:first-chlid{margin-left:0;}*/ .nr_srch .srch_top .beauty_trend dd ul li a{display:block;padding:0 10px;border:1px solid #e9e9e9;background-color:#fff;font-size:13px;color:#888;line-height:28px;} .nr_srch .srch_top .beauty_trend dd ul li a:hover{background-color:#666;border-color:#666;color:#fff;} .nr_srch .list_srch{} .nr_srch .list_srch .list_sorting{margin-bottom:40px;padding:0 0 10px 0;border-bottom:1px solid #222} .nr_srch .list_srch .list_sorting .txt_srch{float:left;position:relative;padding-left:10px;font-size:13px;color:#666;} .nr_srch .list_srch .list_sorting .txt_srch em{position:absolute;top:3px;left:0;} .nr_srch .list_srch .list_sorting .txt_srch strong{color:#70963f;} .nr_srch .list_srch .product_list {margin-bottom:30px} .nr_srch .list_srch .beauty_trend{margin-top:40px;} .nr_srch .list_srch .beauty_trend dl{} .nr_srch .list_srch .beauty_trend dt{position:relative;text-align:center;font-size:20px;color:#333;letter-spacing:-1px;} .nr_srch .list_srch .beauty_trend dt:after{position:absolute;left:50%;margin-left:-11px;bottom:-20px;display:block;content:'';width:22px;height:1px;background:#424242;} .nr_srch .list_srch .beauty_trend dd{margin-top:40px;} .nr_srch .list_srch .beauty_trend dd ul{font-size:0;text-align:center} .nr_srch .list_srch .beauty_trend dd ul li{display:inline-block;margin-left:20px;vertical-align:top;} .nr_srch .list_srch .beauty_trend dd ul li:first-chlid{margin-left:0;} .nr_srch .list_srch .beauty_trend dd ul li a{display:block;padding:0 10px;border:1px solid #e9e9e9;background-color:#fff;font-size:13px;color:#888;line-height:28px;} .nr_srch .list_srch .beauty_trend dd ul li a:hover{background-color:#666;border-color:#666;color:#fff;} .nr_srch .list_srch .no_srch{padding:60px 0 100px;text-align:center;} .nr_srch .list_srch .no_srch p{margin-top:15px;} .no_srch{padding:60px 0 100px;text-align:center;} .no_srch p{margin-top:15px;} .best_seller {padding-top:40px; border-top:2px solid #333; text-align:center} .best_seller > dt {margin-bottom:5px; font-size:20px; color:#222} .best_seller > dd {overflow:hidden; position:relative; margin-top:10px; padding:50px 43px 0} .best_seller > dd:after {display:block; content:''; width:1px; height:40px; position:absolute; top:0; left:50%; background:#424242} .best_seller > dd > .viewport > ul {overflow:hidden; width:10000px} .best_seller > dd > .viewport > ul > li {float:left; width:190px !important; margin-left:4px; padding:0 25px} .best_seller > dd > .viewport > ul > li:first-child {margin-left:0} .best_seller > dd ul li dl {margin-top:15px} .best_seller > dd ul li dl dt {overflow:hidden; height:35px} .best_seller > dd ul li dl dd {margin-top:15px; font-size:16px; color:#222; font-weight:600} .best_seller > dd ul li dl dd del {margin-right:5px; font-size:13px; color:#999; font-weight:400} .best_seller .direction-nav a {top:168px; width:20px; height:38px} .best_seller .direction-nav .prev {background-position:-348px -267px} .best_seller .direction-nav .next {background-position:-402px -267px} .best_seller .btn_slide {margin-top:40px} .nr_srch .best_seller .btn_slide {position:static; margin-top:40px;} /* 해시태그 */ .hash_wrap {padding-bottom:60px} .hash_wrap .top_tag {width:100%; min-height:120px; margin-top:10px; background:#b1b7a7; text-align:center} .hash_wrap .top_tag > span {display:inline-block; height:31px; padding:0 20px; background:url(../images/bg/bg_hash_tag.png) repeat 0 0; line-height:31px; font-size:20px; color:#222; font-weight:600; font-style:italic; vertical-align:middle} .hash_wrap .top_tag:after {display:inline-block; content:''; height:120px; vertical-align:middle} .hash_wrap .top_tag_br {position:relative; width:100%; min-height:220px; margin-top:10px; text-align:center} .hash_wrap .top_tag_br img {position:absolute; left:50%; margin-left:-800px; vertical-align:top} .hash_wrap .top_tag_br .w_cont {position:absolute; top:0; left:50%; width:1036px; margin-left:-518px} .hash_wrap .top_tag_br .w_cont .txt_area {width:550px; padding-top:55px; text-align:center} .hash_wrap .top_tag_br .w_cont .txt_area span {display:inline-block; height:31px; padding:0 20px 0 18px; background:url(../images/bg/bg_hash_tag.png) repeat 0 0; line-height:30px; font-size:20px; color:#222; font-weight:800; font-style:italic; letter-spacing:-1px } .hash_wrap .product_list {margin:76px 0 30px} .hash_wrap .tag_area {position:relative; margin-top:20px; padding:20px 80px 10px; border-top:1px solid #333; border-bottom:1px solid #d9d9d9; background:#f8f8f8; text-align:center} .hash_wrap .tag_area ul {overflow:hidden; font-size:0; height:39px} .hash_wrap .tag_area ul li {display:inline-block;} .hash_wrap .tag_area ul li a {display:inline-block; padding:0 10px; height:29px; margin:0 20px 10px 0; border:1px solid #e9e9e9; background:#fff; line-height:27px; font-size:14px; color:#888} .hash_wrap .tag_area ul li.active a {border-color:#666; background-color:#666; color:#fff} .hash_wrap .btn_tag {display:block; position:absolute; bottom:-27px; left:50%; width:95px; height:27px; margin-left:-48px; border:1px solid #d9d9d9; border-radius:0 0 3px 3px; background:#fff; line-height:25px; color:#222; font-weight:600} .hash_wrap .btn_tag .close_t {display:none} .hash_wrap .btn_tag:after {display:inline-block; content:''; width:14px; height:14px; margin-top:5px; margin-left:5px; background:url(../images/btn/spr_btns.png) no-repeat -395px -193px; vertical-align:top} .hash_wrap .tag_area.open ul {height:auto} .hash_wrap .open .btn_tag .close_t {display:inline-block} .hash_wrap .open .btn_tag .open {display:none} .hash_wrap .open .btn_tag:after {background-position:-395px -171px} .alert_list {display:none; position:absolute; top:50%; left:50%; z-index:10; margin:-57px 0 0 -57px} #pop_caution .pop_wrap {width:380px; top:200px; margin-left:-190px; padding:32px 0; letter-spacing:-1px} #pop_caution .pop_content {margin-top:0} .caution_txt {text-align:center; font-size:14px; line-height:22px} .caution_txt p {margin-top:20px} .caution_txt em {color:#719444} .caution_txt .btn_wrap {margin-top:25px} .caution_txt .btn_wrap a {display:inline-block; width:88px; height:38px; line-height:36px; background:#ebebeb; border:1px solid #dedede; color:#333; font-size:15px; text-align:center} .caution_txt .btn_wrap a.v2 {background:#5f5f5f; border-color:#5f5f5f; color:#fff} .pop_adver {position:absolute; top:250px; left:100px; z-index:100;} .pop_floating {position:absolute; left:100px; top:250px; z-index:100} .pop_adver.closed {display:none} .pop_floating.closed {display:none} .pop_window_wrap {text-align:center} .pop_window_wrap img , .pop_floating img, .pop_adver img {vertical-align:top} .btn_mobile {display:none; margin-top:50px; padding-bottom:50px} .btn_mobile.active {display:block; text-align:center; } .btn_mobile a {display:inline-block; width:244px; height:60px; line-height:58px; border:1px solid #dedede; font-size:24px; color:#222; font-weight:600} /***************************** bxslider ******************************/ .bx-wrapper { position: relative; width:100%;height:100%; margin: 0 auto 60px; padding: 0; *zoom: 1; } .bx-wrapper img { max-width: 100%; display: block; } /** THEME ===================================*/ .bx-wrapper .bx-viewport { position:fixed; top:0;left:0;right:0;bottom:0; width:100%;height:100% !important; background: #fff; /*fix other elements on the page moving (on Chrome)*/ -webkit-transform: translatez(0); -moz-transform: translatez(0); -ms-transform: translatez(0); -o-transform: translatez(0); transform: translatez(0); } .bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto { position: absolute; bottom: -30px; width: 100%; } /* LOADER */ .bx-wrapper .bx-loading { min-height: 50px; background: url(images/bx_loader.gif) center center no-repeat #fff; height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: 2000; } /* PAGER */ .bx-wrapper .bx-pager { text-align: center; font-size: .85em; font-family: Arial; font-weight: bold; color: #666; padding-top: 20px; } .bx-wrapper .bx-pager .bx-pager-item, .bx-wrapper .bx-controls-auto .bx-controls-auto-item { display: inline-block; *zoom: 1; *display: inline; } .bx-wrapper .bx-pager.bx-default-pager a { background: #666; text-indent: -9999px; display: block; width: 10px; height: 10px; margin: 0 5px; outline: 0; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } .bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active { background: #000; } /* DIRECTION CONTROLS (NEXT / PREV) */ .bx-wrapper .bx-prev { left: 10px; background: url(images/controls.png) no-repeat 0 -32px; } .bx-wrapper .bx-next { right: 10px; background: url(images/controls.png) no-repeat -43px -32px; } .bx-wrapper .bx-prev:hover { background-position: 0 0; } .bx-wrapper .bx-next:hover { background-position: -43px 0; } .bx-wrapper .bx-controls-direction a { position: absolute; top: 50%; margin-top: -16px; outline: 0; width: 32px; height: 32px; text-indent: -9999px; z-index: 9999; } .bx-wrapper .bx-controls-direction a.disabled { display: none; } /* AUTO CONTROLS (START / STOP) */ .bx-wrapper .bx-controls-auto { text-align: center; } .bx-wrapper .bx-controls-auto .bx-start { display: block; text-indent: -9999px; width: 10px; height: 11px; outline: 0; background: url(images/controls.png) -86px -11px no-repeat; margin: 0 3px; } .bx-wrapper .bx-controls-auto .bx-start:hover, .bx-wrapper .bx-controls-auto .bx-start.active { background-position: -86px 0; } .bx-wrapper .bx-controls-auto .bx-stop { display: block; text-indent: -9999px; width: 9px; height: 11px; outline: 0; background: url(images/controls.png) -86px -44px no-repeat; margin: 0 3px; } .bx-wrapper .bx-controls-auto .bx-stop:hover, .bx-wrapper .bx-controls-auto .bx-stop.active { background-position: -86px -33px; } /* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */ .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager { text-align: left; width: 80%; } .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto { right: 0; width: 35px; } /* IMAGE CAPTIONS */ .bx-wrapper .bx-caption { position: absolute; bottom: 0; left: 0; background: #666\9; background: rgba(80, 80, 80, 0.75); width: 100%; } .bx-wrapper .bx-caption span { color: #fff; font-family: Arial; display: block; font-size: .85em; padding: 10px; } /*************************************************** jQuery UI - v1.11.4 - 2015-10-01 ****************************************************/ /* Layout helpers ----------------------------------*/ .ui-helper-hidden { display: none; } .ui-helper-hidden-accessible { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; } .ui-helper-clearfix:before, .ui-helper-clearfix:after { content: ""; display: table; border-collapse: collapse; } .ui-helper-clearfix:after { clear: both; } .ui-helper-clearfix { min-height: 0; /* support: IE7 */ } .ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); /* support: IE8 */ } .ui-front { z-index: 100; } /* Interaction Cues ----------------------------------*/ .ui-state-disabled { cursor: default !important; } /* Icons ----------------------------------*/ /* states and images */ .ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; } /* Misc visuals ----------------------------------*/ /* Overlays */ .ui-widget-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; } .ui-draggable-handle { -ms-touch-action: none; touch-action: none; } .ui-resizable { position: relative; } .ui-resizable-handle { position: absolute; font-size: 0.1px; display: block; -ms-touch-action: none; touch-action: none; } .ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; } .ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0; } .ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0; } .ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0; height: 100%; } .ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0; height: 100%; } .ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; } .ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; } .ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; } .ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px; } .ui-selectable { -ms-touch-action: none; touch-action: none; } .ui-selectable-helper { position: absolute; z-index: 100; border: 1px dotted black; } .ui-sortable-handle { -ms-touch-action: none; touch-action: none; } .ui-accordion .ui-accordion-header { display: block; cursor: pointer; position: relative; margin: 2px 0 0 0; padding: .5em .5em .5em .7em; min-height: 0; /* support: IE7 */ font-size: 100%; } .ui-accordion .ui-accordion-icons { padding-left: 2.2em; } .ui-accordion .ui-accordion-icons .ui-accordion-icons { padding-left: 2.2em; } .ui-accordion .ui-accordion-header .ui-accordion-header-icon { position: absolute; left: .5em; top: 50%; margin-top: -8px; } .ui-accordion .ui-accordion-content { padding: 1em 2.2em; border-top: 0; overflow: auto; } .ui-autocomplete { position: absolute; top: 0; left: 0; cursor: default; } .ui-button { display: inline-block; position: relative; padding: 0; line-height: normal; margin-right: .1em; cursor: pointer; vertical-align: middle; text-align: center; overflow: visible; /* removes extra width in IE */ } .ui-button, .ui-button:link, .ui-button:visited, .ui-button:hover, .ui-button:active { text-decoration: none; } /* to make room for the icon, a width needs to be set here */ .ui-button-icon-only { width: 2.2em; } /* button elements seem to need a little more width */ button.ui-button-icon-only { width: 2.4em; } .ui-button-icons-only { width: 3.4em; } button.ui-button-icons-only { width: 3.7em; } /* button text element */ .ui-button .ui-button-text { display: block; line-height: normal; } .ui-button-text-only .ui-button-text { padding: .4em 1em; } .ui-button-icon-only .ui-button-text, .ui-button-icons-only .ui-button-text { padding: .4em; text-indent: -9999999px; } .ui-button-text-icon-primary .ui-button-text, .ui-button-text-icons .ui-button-text { padding: .4em 1em .4em 2.1em; } .ui-button-text-icon-secondary .ui-button-text, .ui-button-text-icons .ui-button-text { padding: .4em 2.1em .4em 1em; } .ui-button-text-icons .ui-button-text { padding-left: 2.1em; padding-right: 2.1em; } /* no icon support for input elements, provide padding by default */ input.ui-button { padding: .4em 1em; } /* button icon element(s) */ .ui-button-icon-only .ui-icon, .ui-button-text-icon-primary .ui-icon, .ui-button-text-icon-secondary .ui-icon, .ui-button-text-icons .ui-icon, .ui-button-icons-only .ui-icon { position: absolute; top: 50%; margin-top: -8px; } .ui-button-icon-only .ui-icon { left: 50%; margin-left: -8px; } .ui-button-text-icon-primary .ui-button-icon-primary, .ui-button-text-icons .ui-button-icon-primary, .ui-button-icons-only .ui-button-icon-primary { left: .5em; } .ui-button-text-icon-secondary .ui-button-icon-secondary, .ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary { right: .5em; } /* button sets */ .ui-buttonset { margin-right: 7px; } .ui-buttonset .ui-button { margin-left: 0; margin-right: -.3em; } /* workarounds */ /* reset extra padding in Firefox, see h5bp.com/l */ input.ui-button::-moz-focus-inner, button.ui-button::-moz-focus-inner { border: 0; padding: 0; } .ui-datepicker { width: 257px; padding:0; display: none; } .ui-datepicker .ui-datepicker-header { position: relative; height:45px; line-height:45px; } .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { overflow:hidden; position: absolute; top: 10px; width: 25px; height: 25px; cursor:pointer; } .ui-datepicker .ui-datepicker-prev { left: 5px; background:url(../images/btn_cal_prev.png) 50% 50% no-repeat; } .ui-datepicker .ui-datepicker-next { right: 5px; background:url(../images/btn_cal_next.png) 50% 50% no-repeat; } .ui-datepicker .ui-datepicker-title { text-align: center; } .ui-datepicker .ui-datepicker-title select { font-size: 1em; margin: 1px 0; } .ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year { width: 45%; } .ui-datepicker table { width: 100%; border-collapse: collapse; } .ui-datepicker thead {border:1px solid #e2e2e2;} .ui-datepicker th { background:#f9f9f9; border-top:1px solid #e2e2e2; border-bottom:1px solid #e2e2e2; text-align: center; color:#33353d; line-height:30px; font-weight: 700; border: 0; } .ui-datepicker td { border-bottom: 1px solid #dedede;border-right: 1px solid #dedede;line-height:30px;text-align:center;font-size:12px;color:#33353d;font-weight:700 } .ui-datepicker td a{display:block;height:100%;} .ui-datepicker tr td:first-child {border-left: 1px solid #dedede;} .ui-datepicker-week-end a {color:#ad1901} .ui-datepicker-today {background:#fcf4f1} .guide_text {display:none; margin:15px 0; padding-left:36px; font-size:12px; color:#666; line-height:23px} .guide_text li {position:relative; padding-left:10px; } .guide_text li:before {display:inline-block;position:absolute; top:8px; left:0; content:''; width:2px;height:3px;background:url(../images/sp_ico.png) no-repeat -265px 0} .ui-datepicker .ui-datepicker-buttonpane { background-image: none; margin: .7em 0 0 0; padding: 0 .2em; border-left: 0; border-right: 0; border-bottom: 0; } .ui-datepicker .ui-datepicker-buttonpane button { float: right; margin: .5em .2em .4em; cursor: pointer; padding: .2em .6em .3em .6em; width: auto; overflow: visible; } .ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { float: left; } /* with multiple calendars */ .ui-datepicker.ui-datepicker-multi { width: auto; } .ui-datepicker-multi .ui-datepicker-group { float: left; } .ui-datepicker-multi .ui-datepicker-group table { width: 95%; margin: 0 auto .4em; } .ui-datepicker-multi-2 .ui-datepicker-group { width: 50%; } .ui-datepicker-multi-3 .ui-datepicker-group { width: 33.3%; } .ui-datepicker-multi-4 .ui-datepicker-group { width: 25%; } .ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header, .ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header { border-left-width: 0; } .ui-datepicker-multi .ui-datepicker-buttonpane { clear: left; } .ui-datepicker-row-break { clear: both; width: 100%; font-size: 0; } /* RTL support */ .ui-datepicker-rtl { direction: rtl; } .ui-datepicker-rtl .ui-datepicker-prev { right: 2px; left: auto; } .ui-datepicker-rtl .ui-datepicker-next { left: 2px; right: auto; } .ui-datepicker-rtl .ui-datepicker-prev:hover { right: 1px; left: auto; } .ui-datepicker-rtl .ui-datepicker-next:hover { left: 1px; right: auto; } .ui-datepicker-rtl .ui-datepicker-buttonpane { clear: right; } .ui-datepicker-rtl .ui-datepicker-buttonpane button { float: left; } .ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current, .ui-datepicker-rtl .ui-datepicker-group { float: right; } .ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header, .ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header { border-right-width: 0; border-left-width: 1px; } .ui-dialog { overflow: hidden; position: absolute; top: 0; left: 0; padding: .2em; outline: 0; } .ui-dialog .ui-dialog-titlebar { padding: .4em 1em; position: relative; } .ui-dialog .ui-dialog-title { float: left; margin: .1em 0; white-space: nowrap; width: 90%; overflow: hidden; text-overflow: ellipsis; } .ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 20px; margin: -10px 0 0 0; padding: 1px; height: 20px; } .ui-dialog .ui-dialog-content { position: relative; border: 0; padding: .5em 1em; background: none; overflow: auto; } .ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin-top: .5em; padding: .3em 1em .5em .4em; } .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { float: right; } .ui-dialog .ui-dialog-buttonpane button { margin: .5em .4em .5em 0; cursor: pointer; } .ui-dialog .ui-resizable-se { width: 12px; height: 12px; right: -5px; bottom: -5px; background-position: 16px 16px; } .ui-draggable .ui-dialog-titlebar { cursor: move; } .ui-menu { list-style: none; padding: 0; margin: 0; display: block; outline: none; } .ui-menu .ui-menu { position: absolute; } .ui-menu .ui-menu-item { position: relative; margin: 0; padding: 3px 1em 3px .4em; cursor: pointer; min-height: 0; /* support: IE7 */ /* support: IE10, see #8844 */ } .ui-menu .ui-menu-divider { margin: 5px 0; height: 0; font-size: 0; line-height: 0; border-width: 1px 0 0 0; } .ui-menu .ui-state-focus, .ui-menu .ui-state-active { margin: -1px; } /* icon support */ .ui-menu-icons { position: relative; } .ui-menu-icons .ui-menu-item { padding-left: 2em; } /* left-aligned */ .ui-menu .ui-icon { position: absolute; top: 0; bottom: 0; left: .2em; margin: auto 0; } /* right-aligned */ .ui-menu .ui-menu-icon { left: auto; right: 0; } .ui-progressbar { height: 2em; text-align: left; overflow: hidden; } .ui-progressbar .ui-progressbar-value { margin: -1px; height: 100%; } .ui-progressbar .ui-progressbar-overlay { height: 100%; filter: alpha(opacity=25); /* support: IE8 */ opacity: 0.25; } .ui-progressbar-indeterminate .ui-progressbar-value { background-image: none; } .ui-selectmenu-menu { padding: 0; margin: 0; position: absolute; top: 0; left: 0; display: none; } .ui-selectmenu-menu .ui-menu { overflow: auto; /* Support: IE7 */ overflow-x: hidden; padding-bottom: 1px; } .ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup { font-size: 1em; font-weight: bold; line-height: 1.5; padding: 2px 0.4em; margin: 0.5em 0 0 0; height: auto; border: 0; } .ui-selectmenu-open { display: block; } .ui-selectmenu-button { display: inline-block; overflow: hidden; position: relative; text-decoration: none; cursor: pointer; } .ui-selectmenu-button span.ui-icon { right: 0.5em; left: auto; margin-top: -8px; position: absolute; top: 50%; } .ui-selectmenu-button span.ui-selectmenu-text { text-align: left; padding: 0.4em 2.1em 0.4em 1em; display: block; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ui-slider { position: relative; text-align: left; } .ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; -ms-touch-action: none; touch-action: none; } .ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; } /* support: IE8 - See #6727 */ .ui-slider.ui-state-disabled .ui-slider-handle, .ui-slider.ui-state-disabled .ui-slider-range { filter: inherit; } .ui-slider-horizontal { height: .8em; } .ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; } .ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; } .ui-slider-horizontal .ui-slider-range-min { left: 0; } .ui-slider-horizontal .ui-slider-range-max { right: 0; } .ui-slider-vertical { width: .8em; height: 100px; } .ui-slider-vertical .ui-slider-handle { left: -.3em; margin-left: 0; margin-bottom: -.6em; } .ui-slider-vertical .ui-slider-range { left: 0; width: 100%; } .ui-slider-vertical .ui-slider-range-min { bottom: 0; } .ui-slider-vertical .ui-slider-range-max { top: 0; } .ui-spinner { position: relative; display: inline-block; overflow: hidden; padding: 0; vertical-align: middle; } .ui-spinner-input { border: none; background: none; color: inherit; padding: 0; margin: .2em 0; vertical-align: middle; margin-left: .4em; margin-right: 22px; } .ui-spinner-button { width: 16px; height: 50%; font-size: .5em; padding: 0; margin: 0; text-align: center; position: absolute; cursor: default; display: block; overflow: hidden; right: 0; } /* more specificity required here to override default borders */ .ui-spinner a.ui-spinner-button { border-top: none; border-bottom: none; border-right: none; } /* vertically center icon */ .ui-spinner .ui-icon { position: absolute; margin-top: -8px; top: 50%; left: 0; } .ui-spinner-up { top: 0; } .ui-spinner-down { bottom: 0; } /* TR overrides */ .ui-spinner .ui-icon-triangle-1-s { /* need to fix icons sprite */ background-position: -65px -16px; } .ui-tabs { position: relative;/* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */ padding: .2em; } .ui-tabs .ui-tabs-nav { margin: 0; padding: .2em .2em 0; } .ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 0; margin: 1px .2em 0 0; border-bottom-width: 0; padding: 0; white-space: nowrap; } .ui-tabs .ui-tabs-nav .ui-tabs-anchor { float: left; padding: .5em 1em; text-decoration: none; } .ui-tabs .ui-tabs-nav li.ui-tabs-active { margin-bottom: -1px; padding-bottom: 1px; } .ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor, .ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor, .ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor { cursor: text; } .ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor { cursor: pointer; } .ui-tabs .ui-tabs-panel { display: block; border-width: 0; padding: 1em 1.4em; background: none; } .ui-tooltip { padding: 8px; position: absolute; z-index: 9999; max-width: 300px; -webkit-box-shadow: 0 0 5px #aaa; box-shadow: 0 0 5px #aaa; } body .ui-tooltip { border-width: 2px; } /* Component containers ----------------------------------*/ .ui-widget-content { z-index:101 !important; border: 3px solid #000; background: #fff; color: #33353d; } .ui-widget-header { font-size:18px; font-weight: 700; } .ui-widget-header a { color: #ffffff; } /* Interaction states ----------------------------------*/ .ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #666; text-decoration: none; } .ui-state-focus a, .ui-state-focus a:hover, .ui-state-focus a:link, .ui-state-focus a:visited { text-decoration: none; } .ui-state-active, .ui-datepicker-calendar .ui-state-active { border: 1px solid #1c94c4; background: #ffffff font-weight: bold; color: #666; } .ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #666; text-decoration: none; } /* == malihu jquery custom scrollbar plugin == Plugin URI: http://manos.malihu.gr/jquery-custom-content-scroller */ /* CONTENTS: 1. BASIC STYLE - Plugin's basic/essential CSS properties (normally, should not be edited). 2. VERTICAL SCROLLBAR - Positioning and dimensions of vertical scrollbar. 3. HORIZONTAL SCROLLBAR - Positioning and dimensions of horizontal scrollbar. 4. VERTICAL AND HORIZONTAL SCROLLBARS - Positioning and dimensions of 2-axis scrollbars. 5. TRANSITIONS - CSS3 transitions for hover events, auto-expanded and auto-hidden scrollbars. 6. SCROLLBAR COLORS, OPACITY AND BACKGROUNDS 6.1 THEMES - Scrollbar colors, opacity, dimensions, backgrounds etc. via ready-to-use themes. */ /* ------------------------------------------------------------------------------------------------------------------------ 1. BASIC STYLE ------------------------------------------------------------------------------------------------------------------------ */ .mCustomScrollbar{ -ms-touch-action: none; touch-action: none; /* MSPointer events - direct all pointer events to js */ } .mCustomScrollbar.mCS_no_scrollbar, .mCustomScrollbar.mCS_touch_action{ -ms-touch-action: auto; touch-action: auto; } .mCustomScrollBox{ /* contains plugin's markup */ position: relative; overflow: hidden; height: 100%; max-width: 100%; outline: none; direction: ltr; } .mCSB_container{ /* contains the original content */ overflow: hidden; width: auto; height: auto; } /* ------------------------------------------------------------------------------------------------------------------------ 2. VERTICAL SCROLLBAR y-axis ------------------------------------------------------------------------------------------------------------------------ */ .mCSB_inside > .mCSB_container{ margin-right: 15px; } .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden{ margin-right: 0; } /* non-visible scrollbar */ .mCS-dir-rtl > .mCSB_inside > .mCSB_container{ /* RTL direction/left-side scrollbar */ margin-right: 0; margin-left: 30px; } .mCS-dir-rtl > .mCSB_inside > .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden{ margin-left: 0; } /* RTL direction/left-side scrollbar */ .mCSB_scrollTools{ /* contains scrollbar markup (draggable element, dragger rail, buttons etc.) */ position: absolute; width: 6px; height: auto; left: auto; top: 0; right: 0; bottom: 0; } .mCSB_outside + .mCSB_scrollTools{ right: -26px; } /* scrollbar position: outside */ .mCS-dir-rtl > .mCSB_inside > .mCSB_scrollTools, .mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools{ /* RTL direction/left-side scrollbar */ right: auto; left: 0; } .mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools{ left: -26px; } /* RTL direction/left-side scrollbar (scrollbar position: outside) */ .mCSB_scrollTools .mCSB_draggerContainer{ /* contains the draggable element and dragger rail markup */ position: absolute; top: 0; left: 0; bottom: 0; right: 0; height: auto; } .mCSB_scrollTools a + .mCSB_draggerContainer{ margin: 20px 0; } .mCSB_scrollTools .mCSB_draggerRail{ width: 2px; height: 100%; margin: 0 auto; -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px; } .mCSB_scrollTools .mCSB_dragger{ /* the draggable element */ cursor: pointer; width: 100%; height: 30px; /* minimum dragger height */ z-index: 1; } .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ /* the dragger element */ position: relative; width: 4px; height: 100%; margin: 0 auto; -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px; text-align: center; } .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{ width: 12px; /* auto-expanded scrollbar */ } .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ width: 8px; /* auto-expanded scrollbar */ } .mCSB_scrollTools .mCSB_buttonUp, .mCSB_scrollTools .mCSB_buttonDown{ display: block; position: absolute; height: 20px; width: 100%; overflow: hidden; margin: 0 auto; cursor: pointer; } .mCSB_scrollTools .mCSB_buttonDown{ bottom: 0; } /* ------------------------------------------------------------------------------------------------------------------------ 3. HORIZONTAL SCROLLBAR x-axis ------------------------------------------------------------------------------------------------------------------------ */ .mCSB_horizontal.mCSB_inside > .mCSB_container{ margin-right: 0; margin-bottom: 30px; } .mCSB_horizontal.mCSB_outside > .mCSB_container{ min-height: 100%; } .mCSB_horizontal > .mCSB_container.mCS_no_scrollbar_x.mCS_x_hidden{ margin-bottom: 0; } /* non-visible scrollbar */ .mCSB_scrollTools.mCSB_scrollTools_horizontal{ width: auto; height: 16px; top: auto; right: 0; bottom: 0; left: 0; } .mCustomScrollBox + .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal{ bottom: -26px; } /* scrollbar position: outside */ .mCSB_scrollTools.mCSB_scrollTools_horizontal a + .mCSB_draggerContainer{ margin: 0 20px; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerRail{ width: 100%; height: 2px; margin: 7px 0; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger{ width: 30px; /* minimum dragger width */ height: 100%; left: 0; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ width: 100%; height: 4px; margin: 6px auto; } .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{ height: 12px; /* auto-expanded scrollbar */ margin: 2px auto; } .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ height: 8px; /* auto-expanded scrollbar */ margin: 4px 0; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft, .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight{ display: block; position: absolute; width: 20px; height: 100%; overflow: hidden; margin: 0 auto; cursor: pointer; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft{ left: 0; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight{ right: 0; } /* ------------------------------------------------------------------------------------------------------------------------ 4. VERTICAL AND HORIZONTAL SCROLLBARS yx-axis ------------------------------------------------------------------------------------------------------------------------ */ .mCSB_container_wrapper{ position: absolute; height: auto; width: auto; overflow: hidden; top: 0; left: 0; right: 0; bottom: 0; margin-right: 30px; margin-bottom: 30px; } .mCSB_container_wrapper > .mCSB_container{ padding-right: 30px; padding-bottom: 30px; } .mCSB_vertical_horizontal > .mCSB_scrollTools.mCSB_scrollTools_vertical{ bottom: 20px; } .mCSB_vertical_horizontal > .mCSB_scrollTools.mCSB_scrollTools_horizontal{ right: 20px; } /* non-visible horizontal scrollbar */ .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden + .mCSB_scrollTools.mCSB_scrollTools_vertical{ bottom: 0; } /* non-visible vertical scrollbar/RTL direction/left-side scrollbar */ .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden + .mCSB_scrollTools ~ .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_scrollTools.mCSB_scrollTools_horizontal{ right: 0; } /* RTL direction/left-side scrollbar */ .mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_scrollTools.mCSB_scrollTools_horizontal{ left: 20px; } /* non-visible scrollbar/RTL direction/left-side scrollbar */ .mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden + .mCSB_scrollTools ~ .mCSB_scrollTools.mCSB_scrollTools_horizontal{ left: 0; } .mCS-dir-rtl > .mCSB_inside > .mCSB_container_wrapper{ /* RTL direction/left-side scrollbar */ margin-right: 0; margin-left: 30px; } .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden > .mCSB_container{ padding-right: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden > .mCSB_container{ padding-bottom: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden{ margin-right: 0; /* non-visible scrollbar */ margin-left: 0; } /* non-visible horizontal scrollbar */ .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden{ margin-bottom: 0; } /* ------------------------------------------------------------------------------------------------------------------------ 5. TRANSITIONS ------------------------------------------------------------------------------------------------------------------------ */ .mCSB_scrollTools, .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCSB_scrollTools .mCSB_buttonUp, .mCSB_scrollTools .mCSB_buttonDown, .mCSB_scrollTools .mCSB_buttonLeft, .mCSB_scrollTools .mCSB_buttonRight{ } .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar, /* auto-expanded scrollbar */ .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail{ -webkit-transition: width .2s ease-out .2s, height .2s ease-out .2s, margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, opacity .2s ease-in-out, background-color .2s ease-in-out; -moz-transition: width .2s ease-out .2s, height .2s ease-out .2s, margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, opacity .2s ease-in-out, background-color .2s ease-in-out; -o-transition: width .2s ease-out .2s, height .2s ease-out .2s, margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, opacity .2s ease-in-out, background-color .2s ease-in-out; transition: width .2s ease-out .2s, height .2s ease-out .2s, margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, opacity .2s ease-in-out, background-color .2s ease-in-out; } /* ------------------------------------------------------------------------------------------------------------------------ 6. SCROLLBAR COLORS, OPACITY AND BACKGROUNDS ------------------------------------------------------------------------------------------------------------------------ */ /* ---------------------------------------- 6.1 THEMES ---------------------------------------- */ /* default theme ("light") */ .mCSB_scrollTools{ opacity: 0.75; filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)"; } .mCS-autoHide > .mCustomScrollBox > .mCSB_scrollTools, .mCS-autoHide > .mCustomScrollBox ~ .mCSB_scrollTools{ opacity: 0; filter: "alpha(opacity=0)"; -ms-filter: "alpha(opacity=0)"; } .mCustomScrollbar > .mCustomScrollBox > .mCSB_scrollTools.mCSB_scrollTools_onDrag, .mCustomScrollbar > .mCustomScrollBox ~ .mCSB_scrollTools.mCSB_scrollTools_onDrag, .mCustomScrollBox:hover > .mCSB_scrollTools, .mCustomScrollBox:hover ~ .mCSB_scrollTools, .mCS-autoHide:hover > .mCustomScrollBox > .mCSB_scrollTools, .mCS-autoHide:hover > .mCustomScrollBox ~ .mCSB_scrollTools{ opacity: 1; filter: "alpha(opacity=100)"; -ms-filter: "alpha(opacity=100)"; } .mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.4); filter: "alpha(opacity=40)"; -ms-filter: "alpha(opacity=40)"; } .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.75); filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)"; } .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.85); filter: "alpha(opacity=85)"; -ms-filter: "alpha(opacity=85)"; } .mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.9); filter: "alpha(opacity=90)"; -ms-filter: "alpha(opacity=90)"; } .mCSB_scrollTools .mCSB_buttonUp, .mCSB_scrollTools .mCSB_buttonDown, .mCSB_scrollTools .mCSB_buttonLeft, .mCSB_scrollTools .mCSB_buttonRight{ background-image: url(mCSB_buttons.png); /* css sprites */ background-repeat: no-repeat; opacity: 0.4; filter: "alpha(opacity=40)"; -ms-filter: "alpha(opacity=40)"; } .mCSB_scrollTools .mCSB_buttonUp{ background-position: 0 0; /* sprites locations light: 0 0, -16px 0, -32px 0, -48px 0, 0 -72px, -16px -72px, -32px -72px dark: -80px 0, -96px 0, -112px 0, -128px 0, -80px -72px, -96px -72px, -112px -72px */ } .mCSB_scrollTools .mCSB_buttonDown{ background-position: 0 -20px; /* sprites locations light: 0 -20px, -16px -20px, -32px -20px, -48px -20px, 0 -92px, -16px -92px, -32px -92px dark: -80px -20px, -96px -20px, -112px -20px, -128px -20px, -80px -92px, -96px -92px, -112 -92px */ } .mCSB_scrollTools .mCSB_buttonLeft{ background-position: 0 -40px; /* sprites locations light: 0 -40px, -20px -40px, -40px -40px, -60px -40px, 0 -112px, -20px -112px, -40px -112px dark: -80px -40px, -100px -40px, -120px -40px, -140px -40px, -80px -112px, -100px -112px, -120px -112px */ } .mCSB_scrollTools .mCSB_buttonRight{ background-position: 0 -56px; /* sprites locations light: 0 -56px, -20px -56px, -40px -56px, -60px -56px, 0 -128px, -20px -128px, -40px -128px dark: -80px -56px, -100px -56px, -120px -56px, -140px -56px, -80px -128px, -100px -128px, -120px -128px */ } .mCSB_scrollTools .mCSB_buttonUp:hover, .mCSB_scrollTools .mCSB_buttonDown:hover, .mCSB_scrollTools .mCSB_buttonLeft:hover, .mCSB_scrollTools .mCSB_buttonRight:hover{ opacity: 0.75; filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)"; } .mCSB_scrollTools .mCSB_buttonUp:active, .mCSB_scrollTools .mCSB_buttonDown:active, .mCSB_scrollTools .mCSB_buttonLeft:active, .mCSB_scrollTools .mCSB_buttonRight:active{ opacity: 0.9; filter: "alpha(opacity=90)"; -ms-filter: "alpha(opacity=90)"; } /* theme: "dark" */ .mCS-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.15); } /*이거*/ .mCS-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); } .mCS-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: rgba(0,0,0,0.85); } .mCS-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: rgba(0,0,0,0.9); } .mCS-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -80px 0; } .mCS-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -80px -20px; } .mCS-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -80px -40px; } .mCS-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -80px -56px; } /* ---------------------------------------- */ /* theme: "light-2", "dark-2" */ .mCS-light-2.mCSB_scrollTools .mCSB_draggerRail, .mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail{ width: 4px; background-color: #fff; background-color: rgba(255,255,255,0.1); -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; } .mCS-light-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 4px; background-color: #fff; background-color: rgba(255,255,255,0.75); -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; } .mCS-light-2.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-dark-2.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-light-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ width: 100%; height: 4px; margin: 6px auto; } .mCS-light-2.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.85); } .mCS-light-2.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-light-2.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.9); } .mCS-light-2.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px 0; } .mCS-light-2.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -20px; } .mCS-light-2.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -40px; } .mCS-light-2.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -56px; } /* theme: "dark-2" */ .mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.1); -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; } .mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; } .mCS-dark-2.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } .mCS-dark-2.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-dark-2.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); } .mCS-dark-2.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px 0; } .mCS-dark-2.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -20px; } .mCS-dark-2.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -40px; } .mCS-dark-2.mCSB_scrollTools .mCSB_buttonRight{ background-position: -120px -56px; } /* ---------------------------------------- */ /* theme: "light-thick", "dark-thick" */ .mCS-light-thick.mCSB_scrollTools .mCSB_draggerRail, .mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail{ width: 4px; background-color: #fff; background-color: rgba(255,255,255,0.1); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .mCS-light-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 6px; background-color: #fff; background-color: rgba(255,255,255,0.75); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .mCS-light-thick.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-dark-thick.mCSB_scrollTools_horizontal .mCSB_draggerRail{ width: 100%; height: 4px; margin: 6px 0; } .mCS-light-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ width: 100%; height: 6px; margin: 5px auto; } .mCS-light-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.85); } .mCS-light-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-light-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.9); } .mCS-light-thick.mCSB_scrollTools .mCSB_buttonUp{ background-position: -16px 0; } .mCS-light-thick.mCSB_scrollTools .mCSB_buttonDown{ background-position: -16px -20px; } .mCS-light-thick.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -20px -40px; } .mCS-light-thick.mCSB_scrollTools .mCSB_buttonRight{ background-position: -20px -56px; } /* theme: "dark-thick" */ .mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.1); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); } .mCS-dark-thick.mCSB_scrollTools .mCSB_buttonUp{ background-position: -96px 0; } .mCS-dark-thick.mCSB_scrollTools .mCSB_buttonDown{ background-position: -96px -20px; } .mCS-dark-thick.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -100px -40px; } .mCS-dark-thick.mCSB_scrollTools .mCSB_buttonRight{ background-position: -100px -56px; } /* ---------------------------------------- */ /* theme: "light-thin", "dark-thin" */ .mCS-light-thin.mCSB_scrollTools .mCSB_draggerRail{ background-color: #fff; background-color: rgba(255,255,255,0.1); } .mCS-light-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 2px; } .mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_draggerRail{ width: 100%; } .mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ width: 100%; height: 2px; margin: 7px auto; } /* theme "dark-thin" */ .mCS-dark-thin.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.15); } .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); } .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); } .mCS-dark-thin.mCSB_scrollTools .mCSB_buttonUp{ background-position: -80px 0; } .mCS-dark-thin.mCSB_scrollTools .mCSB_buttonDown{ background-position: -80px -20px; } .mCS-dark-thin.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -80px -40px; } .mCS-dark-thin.mCSB_scrollTools .mCSB_buttonRight{ background-position: -80px -56px; } /* ---------------------------------------- */ /* theme "rounded", "rounded-dark", "rounded-dots", "rounded-dots-dark" */ .mCS-rounded.mCSB_scrollTools .mCSB_draggerRail{ background-color: #fff; background-color: rgba(255,255,255,0.15); } .mCS-rounded.mCSB_scrollTools .mCSB_dragger, .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger, .mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger{ height: 14px; } .mCS-rounded.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 14px; margin: 0 1px; } .mCS-rounded.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-rounded-dark.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_dragger{ width: 14px; } .mCS-rounded.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ height: 14px; margin: 1px 0; } .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{ width: 16px; /* auto-expanded scrollbar */ height: 16px; margin: -1px 0; } .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, .mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ width: 4px; /* auto-expanded scrollbar */ } .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{ height: 16px; /* auto-expanded scrollbar */ width: 16px; margin: 0 -1px; } .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, .mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ height: 4px; /* auto-expanded scrollbar */ margin: 6px 0; } .mCS-rounded.mCSB_scrollTools .mCSB_buttonUp{ background-position: 0 -72px; } .mCS-rounded.mCSB_scrollTools .mCSB_buttonDown{ background-position: 0 -92px; } .mCS-rounded.mCSB_scrollTools .mCSB_buttonLeft{ background-position: 0 -112px; } .mCS-rounded.mCSB_scrollTools .mCSB_buttonRight{ background-position: 0 -128px; } /* theme "rounded-dark", "rounded-dots-dark" */ .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); } .mCS-rounded-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.15); } .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); } .mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -80px -72px; } .mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -80px -92px; } .mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -80px -112px; } .mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -80px -128px; } /* theme "rounded-dots", "rounded-dots-dark" */ .mCS-rounded-dots.mCSB_scrollTools_vertical .mCSB_draggerRail, .mCS-rounded-dots-dark.mCSB_scrollTools_vertical .mCSB_draggerRail{ width: 4px; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{ background-color: transparent; background-position: center; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail{ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAANElEQVQYV2NkIAAYiVbw//9/Y6DiM1ANJoyMjGdBbLgJQAX/kU0DKgDLkaQAvxW4HEvQFwCRcxIJK1XznAAAAABJRU5ErkJggg=="); background-repeat: repeat-y; opacity: 0.3; filter: "alpha(opacity=30)"; -ms-filter: "alpha(opacity=30)"; } .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{ height: 4px; margin: 6px 0; background-repeat: repeat-x; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonUp{ background-position: -16px -72px; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonDown{ background-position: -16px -92px; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -20px -112px; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonRight{ background-position: -20px -128px; } /* theme "rounded-dots-dark" */ .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail{ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALElEQVQYV2NkIAAYSVFgDFR8BqrBBEifBbGRTfiPZhpYjiQFBK3A6l6CvgAAE9kGCd1mvgEAAAAASUVORK5CYII="); } .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -96px -72px; } .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -96px -92px; } .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -100px -112px; } .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -100px -128px; } /* ---------------------------------------- */ /* theme "3d", "3d-dark", "3d-thick", "3d-thick-dark" */ .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-repeat: repeat-y; background-image: -moz-linear-gradient(left, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%); background-image: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0.5)), color-stop(100%,rgba(255,255,255,0))); background-image: -webkit-linear-gradient(left, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); background-image: -o-linear-gradient(left, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); background-image: -ms-linear-gradient(left, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); background-image: linear-gradient(to right, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); } .mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ background-repeat: repeat-x; background-image: -moz-linear-gradient(top, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.5)), color-stop(100%,rgba(255,255,255,0))); background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); background-image: -o-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); background-image: -ms-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); background-image: linear-gradient(to bottom, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); } /* theme "3d", "3d-dark" */ .mCS-3d.mCSB_scrollTools_vertical .mCSB_dragger, .mCS-3d-dark.mCSB_scrollTools_vertical .mCSB_dragger{ height: 70px; } .mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger{ width: 70px; } .mCS-3d.mCSB_scrollTools, .mCS-3d-dark.mCSB_scrollTools{ opacity: 1; filter: "alpha(opacity=30)"; -ms-filter: "alpha(opacity=30)"; } .mCS-3d.mCSB_scrollTools .mCSB_draggerRail, .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px; } .mCS-3d.mCSB_scrollTools .mCSB_draggerRail, .mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail{ width: 8px; background-color: #000; background-color: rgba(0,0,0,0.2); box-shadow: inset 1px 0 1px rgba(0,0,0,0.5), inset -1px 0 1px rgba(255,255,255,0.2); } .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #555; } .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 8px; } .mCS-3d.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{ width: 100%; height: 8px; margin: 4px 0; box-shadow: inset 0 1px 1px rgba(0,0,0,0.5), inset 0 -1px 1px rgba(255,255,255,0.2); } .mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ width: 100%; height: 8px; margin: 4px auto; } .mCS-3d.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px -72px; } .mCS-3d.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -92px; } .mCS-3d.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -112px; } .mCS-3d.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -128px; } /* theme "3d-dark" */ .mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.1); box-shadow: inset 1px 0 1px rgba(0,0,0,0.1); } .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{ box-shadow: inset 0 1px 1px rgba(0,0,0,0.1); } .mCS-3d-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px -72px; } .mCS-3d-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -92px; } .mCS-3d-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -112px; } .mCS-3d-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -120px -128px; } /* ---------------------------------------- */ /* theme: "3d-thick", "3d-thick-dark" */ .mCS-3d-thick.mCSB_scrollTools, .mCS-3d-thick-dark.mCSB_scrollTools{ opacity: 1; filter: "alpha(opacity=30)"; -ms-filter: "alpha(opacity=30)"; } .mCS-3d-thick.mCSB_scrollTools, .mCS-3d-thick-dark.mCSB_scrollTools, .mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer{ -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; } .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .mCSB_inside + .mCS-3d-thick.mCSB_scrollTools_vertical, .mCSB_inside + .mCS-3d-thick-dark.mCSB_scrollTools_vertical{ right: 1px; } .mCS-3d-thick.mCSB_scrollTools_vertical, .mCS-3d-thick-dark.mCSB_scrollTools_vertical{ box-shadow: inset 1px 0 1px rgba(0,0,0,0.1), inset 0 0 14px rgba(0,0,0,0.5); } .mCS-3d-thick.mCSB_scrollTools_horizontal, .mCS-3d-thick-dark.mCSB_scrollTools_horizontal{ bottom: 1px; box-shadow: inset 0 1px 1px rgba(0,0,0,0.1), inset 0 0 14px rgba(0,0,0,0.5); } .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ box-shadow: inset 1px 0 0 rgba(255,255,255,0.4); width: 12px; margin: 2px; position: absolute; height: auto; top: 0; bottom: 0; left: 0; right: 0; } .mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ box-shadow: inset 0 1px 0 rgba(255,255,255,0.4); } .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #555; } .mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ height: 12px; width: auto; } .mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer{ background-color: #000; background-color: rgba(0,0,0,0.05); box-shadow: inset 1px 1px 16px rgba(0,0,0,0.1); } .mCS-3d-thick.mCSB_scrollTools .mCSB_draggerRail{ background-color: transparent; } .mCS-3d-thick.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px -72px; } .mCS-3d-thick.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -92px; } .mCS-3d-thick.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -112px; } .mCS-3d-thick.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -128px; } /* theme: "3d-thick-dark" */ .mCS-3d-thick-dark.mCSB_scrollTools{ box-shadow: inset 0 0 14px rgba(0,0,0,0.2); } .mCS-3d-thick-dark.mCSB_scrollTools_horizontal{ box-shadow: inset 0 1px 1px rgba(0,0,0,0.1), inset 0 0 14px rgba(0,0,0,0.2); } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ box-shadow: inset 1px 0 0 rgba(255,255,255,0.4), inset -1px 0 0 rgba(0,0,0,0.2); } .mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -1px 0 rgba(0,0,0,0.2); } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #777; } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer{ background-color: #fff; background-color: rgba(0,0,0,0.05); box-shadow: inset 1px 1px 16px rgba(0,0,0,0.1); } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: transparent; } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px -72px; } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -92px; } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -112px; } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -120px -128px; } /* ---------------------------------------- */ /* theme: "minimal", "minimal-dark" */ .mCSB_outside + .mCS-minimal.mCSB_scrollTools_vertical, .mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical{ right: 0; margin: 12px 0; } .mCustomScrollBox.mCS-minimal + .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox.mCS-minimal + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox.mCS-minimal-dark + .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox.mCS-minimal-dark + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal{ bottom: 0; margin: 0 12px; } /* RTL direction/left-side scrollbar */ .mCS-dir-rtl > .mCSB_outside + .mCS-minimal.mCSB_scrollTools_vertical, .mCS-dir-rtl > .mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical{ left: 0; right: auto; } .mCS-minimal.mCSB_scrollTools .mCSB_draggerRail, .mCS-minimal-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: transparent; } .mCS-minimal.mCSB_scrollTools_vertical .mCSB_dragger, .mCS-minimal-dark.mCSB_scrollTools_vertical .mCSB_dragger{ height: 50px; } .mCS-minimal.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-minimal-dark.mCSB_scrollTools_horizontal .mCSB_dragger{ width: 50px; } .mCS-minimal.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.2); filter: "alpha(opacity=20)"; -ms-filter: "alpha(opacity=20)"; } .mCS-minimal.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-minimal.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.5); filter: "alpha(opacity=50)"; -ms-filter: "alpha(opacity=50)"; } /* theme: "minimal-dark" */ .mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.2); filter: "alpha(opacity=20)"; -ms-filter: "alpha(opacity=20)"; } .mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.5); filter: "alpha(opacity=50)"; -ms-filter: "alpha(opacity=50)"; } /* ---------------------------------------- */ /* theme "light-3", "dark-3" */ .mCS-light-3.mCSB_scrollTools .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail{ width: 6px; background-color: #000; background-color: rgba(0,0,0,0.2); } .mCS-light-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 6px; } .mCS-light-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-light-3.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools_horizontal .mCSB_draggerRail{ width: 100%; height: 6px; margin: 5px 0; } .mCS-light-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-light-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ width: 12px; } .mCS-light-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-light-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ height: 12px; margin: 2px 0; } .mCS-light-3.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px -72px; } .mCS-light-3.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -92px; } .mCS-light-3.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -112px; } .mCS-light-3.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -128px; } /* theme "dark-3" */ .mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); } .mCS-dark-3.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } .mCS-dark-3.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-dark-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); } .mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.1); } .mCS-dark-3.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px -72px; } .mCS-dark-3.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -92px; } .mCS-dark-3.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -112px; } .mCS-dark-3.mCSB_scrollTools .mCSB_buttonRight{ background-position: -120px -128px; } /* ---------------------------------------- */ /* theme "inset", "inset-dark", "inset-2", "inset-2-dark", "inset-3", "inset-3-dark" */ .mCS-inset.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail{ width: 12px; background-color: #000; background-color: rgba(0,0,0,0.2); } .mCS-inset.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 6px; margin: 3px 5px; position: absolute; height: auto; top: 0; bottom: 0; left: 0; right: 0; } .mCS-inset.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ height: 6px; margin: 5px 3px; position: absolute; width: auto; top: 0; bottom: 0; left: 0; right: 0; } .mCS-inset.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-2-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-3-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{ width: 100%; height: 12px; margin: 2px 0; } .mCS-inset.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset-2.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px -72px; } .mCS-inset.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset-2.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -92px; } .mCS-inset.mCSB_scrollTools .mCSB_buttonLeft, .mCS-inset-2.mCSB_scrollTools .mCSB_buttonLeft, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -112px; } .mCS-inset.mCSB_scrollTools .mCSB_buttonRight, .mCS-inset-2.mCSB_scrollTools .mCSB_buttonRight, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -128px; } /* theme "inset-dark", "inset-2-dark", "inset-3-dark" */ .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); } .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); } .mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.1); } .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px -72px; } .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -92px; } .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonLeft, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonLeft, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -112px; } .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonRight, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonRight, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -120px -128px; } /* theme "inset-2", "inset-2-dark" */ .mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: transparent; border-width: 1px; border-style: solid; border-color: #fff; border-color: rgba(255,255,255,0.2); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail{ border-color: #000; border-color: rgba(0,0,0,0.2); } /* theme "inset-3", "inset-3-dark" */ .mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail{ background-color: #fff; background-color: rgba(255,255,255,0.6); } .mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.6); } .mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); } .mCS-inset-3.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } .mCS-inset-3.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-inset-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); } .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.75); } .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.85); } .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.9); } /* ---------------------------------------- */ /** * Swiper 3.4.1 * Most modern mobile touch slider and framework with hardware accelerated transitions * * http://www.idangero.us/swiper/ * * Copyright 2016, Vladimir Kharlampidi * The iDangero.us * http://www.idangero.us/ * * Licensed under MIT * * Released on: December 13, 2016 */ .swiper-container{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;z-index:1}.swiper-container-no-flexbox .swiper-slide{float:left}.swiper-container-vertical>.swiper-wrapper{-webkit-box-orient:vertical;-moz-box-orient:vertical;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-transition-property:-webkit-transform;-moz-transition-property:-moz-transform;-o-transition-property:-o-transform;-ms-transition-property:-ms-transform;transition-property:transform;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}.swiper-container-android .swiper-slide,.swiper-wrapper{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-o-transform:translate(0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.swiper-container-multirow>.swiper-wrapper{-webkit-box-lines:multiple;-moz-box-lines:multiple;-ms-flex-wrap:wrap;-webkit-flex-wrap:wrap;flex-wrap:wrap}.swiper-container-free-mode>.swiper-wrapper{-webkit-transition-timing-function:ease-out;-moz-transition-timing-function:ease-out;-ms-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out;margin:0 auto}.swiper-slide{-webkit-flex-shrink:0;-ms-flex:0 0 auto;flex-shrink:0;width:100%;height:100%;position:relative}.swiper-container-autoheight,.swiper-container-autoheight .swiper-slide{height:auto}.swiper-container-autoheight .swiper-wrapper{-webkit-box-align:start;-ms-flex-align:start;-webkit-align-items:flex-start;align-items:flex-start;-webkit-transition-property:-webkit-transform,height;-moz-transition-property:-moz-transform;-o-transition-property:-o-transform;-ms-transition-property:-ms-transform;transition-property:transform,height}.swiper-container .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-wp8-horizontal{-ms-touch-action:pan-y;touch-action:pan-y}.swiper-wp8-vertical{-ms-touch-action:pan-x;touch-action:pan-x}.swiper-button-next,.swiper-button-prev{position:absolute;top:50%;width:27px;height:44px;margin-top:-22px;z-index:10;cursor:pointer;-moz-background-size:27px 44px;-webkit-background-size:27px 44px;background-size:27px 44px;background-position:center;background-repeat:no-repeat}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-prev,.swiper-container-rtl .swiper-button-next{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");left:10px;right:auto}.swiper-button-prev.swiper-button-black,.swiper-container-rtl .swiper-button-next.swiper-button-black{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")}.swiper-button-prev.swiper-button-white,.swiper-container-rtl .swiper-button-next.swiper-button-white{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")}.swiper-button-next,.swiper-container-rtl .swiper-button-prev{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");right:10px;left:auto}.swiper-button-next.swiper-button-black,.swiper-container-rtl .swiper-button-prev.swiper-button-black{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")}.swiper-button-next.swiper-button-white,.swiper-container-rtl .swiper-button-prev.swiper-button-white{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")}.swiper-pagination{position:absolute;text-align:center;-webkit-transition:.3s;-moz-transition:.3s;-o-transition:.3s;transition:.3s;-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-container-horizontal>.swiper-pagination-bullets,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:10px;left:0;width:100%}.swiper-pagination-bullet{width:8px;height:8px;display:inline-block;border-radius:100%;background:#000;opacity:.2}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-moz-appearance:none;-ms-appearance:none;-webkit-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-white .swiper-pagination-bullet{background:#fff}.swiper-pagination-bullet-active{opacity:1;background:#007aff}.swiper-pagination-white .swiper-pagination-bullet-active{background:#fff}.swiper-pagination-black .swiper-pagination-bullet-active{background:#000}.swiper-container-vertical>.swiper-pagination-bullets{right:10px;top:50%;-webkit-transform:translate3d(0,-50%,0);-moz-transform:translate3d(0,-50%,0);-o-transform:translate(0,-50%);-ms-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:5px 0;display:block}.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 5px}.swiper-pagination-progress{background:rgba(0,0,0,.25);position:absolute}.swiper-pagination-progress .swiper-pagination-progressbar{background:#007aff;position:absolute;left:0;top:0;width:100%;height:100%;-webkit-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0);transform:scale(0);-webkit-transform-origin:left top;-moz-transform-origin:left top;-ms-transform-origin:left top;-o-transform-origin:left top;transform-origin:left top}.swiper-container-rtl .swiper-pagination-progress .swiper-pagination-progressbar{-webkit-transform-origin:right top;-moz-transform-origin:right top;-ms-transform-origin:right top;-o-transform-origin:right top;transform-origin:right top}.swiper-container-horizontal>.swiper-pagination-progress{width:100%;height:4px;left:0;top:0}.swiper-container-vertical>.swiper-pagination-progress{width:4px;height:100%;left:0;top:0}.swiper-pagination-progress.swiper-pagination-white{background:rgba(255,255,255,.5)}.swiper-pagination-progress.swiper-pagination-white .swiper-pagination-progressbar{background:#fff}.swiper-pagination-progress.swiper-pagination-black .swiper-pagination-progressbar{background:#000}.swiper-container-3d{-webkit-perspective:1200px;-moz-perspective:1200px;-o-perspective:1200px;perspective:1200px}.swiper-container-3d .swiper-cube-shadow,.swiper-container-3d .swiper-slide,.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top,.swiper-container-3d .swiper-wrapper{-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;transform-style:preserve-3d}.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-container-3d .swiper-slide-shadow-left{background-image:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(right,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-moz-linear-gradient(right,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(right,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-right{background-image:-webkit-gradient(linear,right top,left top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(left,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-moz-linear-gradient(left,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(left,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-top{background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(bottom,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-moz-linear-gradient(bottom,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(bottom,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-bottom{background-image:-webkit-gradient(linear,left bottom,left top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(top,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-moz-linear-gradient(top,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(top,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-coverflow .swiper-wrapper,.swiper-container-flip .swiper-wrapper{-ms-perspective:1200px}.swiper-container-cube,.swiper-container-flip{overflow:visible}.swiper-container-cube .swiper-slide,.swiper-container-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-container-cube .swiper-slide .swiper-slide,.swiper-container-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-active .swiper-slide-active,.swiper-container-flip .swiper-slide-active,.swiper-container-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-cube .swiper-slide-shadow-bottom,.swiper-container-cube .swiper-slide-shadow-left,.swiper-container-cube .swiper-slide-shadow-right,.swiper-container-cube .swiper-slide-shadow-top,.swiper-container-flip .swiper-slide-shadow-bottom,.swiper-container-flip .swiper-slide-shadow-left,.swiper-container-flip .swiper-slide-shadow-right,.swiper-container-flip .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;backface-visibility:hidden}.swiper-container-cube .swiper-slide{visibility:hidden;-webkit-transform-origin:0 0;-moz-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0;width:100%;height:100%}.swiper-container-cube.swiper-container-rtl .swiper-slide{-webkit-transform-origin:100% 0;-moz-transform-origin:100% 0;-ms-transform-origin:100% 0;transform-origin:100% 0}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-next,.swiper-container-cube .swiper-slide-next+.swiper-slide,.swiper-container-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-container-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0;width:100%;height:100%;background:#000;opacity:.6;-webkit-filter:blur(50px);filter:blur(50px);z-index:0}.swiper-container-fade.swiper-container-free-mode .swiper-slide{-webkit-transition-timing-function:ease-out;-moz-transition-timing-function:ease-out;-ms-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out}.swiper-container-fade .swiper-slide{pointer-events:none;-webkit-transition-property:opacity;-moz-transition-property:opacity;-o-transition-property:opacity;transition-property:opacity}.swiper-container-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-fade .swiper-slide-active,.swiper-container-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-zoom-container{width:100%;height:100%;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-pack:center;-moz-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-moz-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain}.swiper-scrollbar{border-radius:10px;position:relative;-ms-touch-action:none;background:rgba(0,0,0,.1)}.swiper-container-horizontal>.swiper-scrollbar{position:absolute;left:1%;bottom:3px;z-index:50;height:5px;width:98%}.swiper-container-vertical>.swiper-scrollbar{position:absolute;right:3px;top:1%;z-index:50;width:5px;height:98%}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:rgba(0,0,0,.5);border-radius:10px;left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;-webkit-transform-origin:50%;-moz-transform-origin:50%;transform-origin:50%;-webkit-animation:swiper-preloader-spin 1s steps(12,end) infinite;-moz-animation:swiper-preloader-spin 1s steps(12,end) infinite;animation:swiper-preloader-spin 1s steps(12,end) infinite}.swiper-lazy-preloader:after{display:block;content:"";width:100%;height:100%;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-position:50%;-webkit-background-size:100%;background-size:100%;background-repeat:no-repeat}.swiper-lazy-preloader-white:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")}@-webkit-keyframes swiper-preloader-spin{100%{-webkit-transform:rotate(360deg)}}@keyframes swiper-preloader-spin{100%{transform:rotate(360deg)}} /* //nature */ /************************** enter *************************/ /* html {overflow-y:scroll; font-size:62.5%;} body {position:relative; width:100%; font-size:12px; line-height:1;} body,input,button,textarea,select,option {color:#666; font-family:'NB', sans-serif;} h1,h2,h3,h4,h5,h6 {font-size:14px;} img, fieldset{border:0;} i,em,address {font-style:normal;} ol, ul {list-style:none;} blockquote, q {quotes:none;} blockquote:before, blockquote:after, q:before, q:after {content:'';} table {border-collapse:collapse; table-layout:fixed; width:100%;} th, td {margin:0; padding:0; font-size:12px;} input, label {border:0; vertical-align:middle;} input {outline:none;} label {cursor:pointer;} input[type='checkbox'], input[type='radio'] {width:13px; height:13px;} input[type='submit'], input[type='image'] {cursor:pointer;} input[type='checkbox'] {border:1px solid #999;} input[type='password'], input[type='file'] {border:1px solid #ddd; background:#fff; padding:2px; font-size:12px;} input[type='text'] {-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; border:1px solid #ddd; font-size:12px;} input:-webkit-autofill {-webkit-box-shadow: 0 0 0 1000px white inset;} textarea {box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; padding:5px; border:1px solid #ddd; font-size:12px;} textarea:hover, input:hover, textarea:active, input:active, textarea:focus, input:focus, button:focus, button:active, button:hover {outline:0 !important;} a {color:#666; text-decoration:none;} hr {display:none;} ::-webkit-input-placeholder {color:#999;} ::-moz-placeholder {color:#999;} :-ms-input-placeholder {color:#999 !important;} ::-ms-input-placeholder {color:#999 !important;} :-moz-placeholder {color:#999;} ::placeholder {color:#999;} .placeholdersjs {color:#999;} .hidden, .blind, legend {display:block; overflow:hidden; position:absolute; top:-1000em; left:0;} caption {display:none;} legend {font:0/0 a;} .dummy {*zoom:1;} .table_fixed {table-layout:fixed;} .nobr {overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .cur_P {cursor:pointer;} .cut-text {overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .strike {text-decoration:line-through;} .underline {text-decoration:underline;} .word_break {word-break:break-all;} .c_class {font:0/0 a;} .show {display:block;} .hidden {display:none;} .clear-after:after {content:''; display:block; clear:both;} .clearfix:after {content:''; display:block; clear:both;} */ /* skip navigation */ /* .skip {display:block;} .skip a {display:block; position:absolute; left:0; top:-1000em; z-index:9999; width:100%; background-color:navy; color:yellow; font-size:15px; font-weight:bold; text-align:center;} .skip a:hover,.skip a:active,.skip a:focus {top:0; padding:20px 0;} */ /* no Development */ .no-dev {background:rgba(58,60,188,.4);} /********************************** facebox.css **********************************/ #facebox {position:absolute; top:0; left:0; z-index:500; background:#fff;} #facebox .popup {display:inline; position:relative; float:left; /*border:3px solid rgba(0,0,0,0); -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; -webkit-box-shadow:0 0 18px rgba(0,0,0,0.4); -moz-box-shadow:0 0 18px rgba(0,0,0,0.4); box-shadow:0 0 18px rgba(0,0,0,0.4);*/} #facebox .content {/*display:table; float:left; padding:0; border-radius:4px; -webkit-border-radius:4px; -moz-border-radius:4px; background:#fff;*/} #facebox .popup .popup_title {background:#000 !important; overflow:hidden; height:46px;} #facebox .popup .popup_title h1 {float:left; color:#fff; line-height:46px; margin-left:20px;} #facebox .popup .popup_title .btn-close-layer {float:right; cursor:pointer;} #facebox .content > p:first-child {margin-top:0;} #facebox .content > p:last-child {margin-bottom:0;} #facebox .close {display:none !impotant; position:absolute; top:0; right:0; width:46px; height:46px;} #facebox facebox_close_btn {display:none !impotant;} #facebox .close img {display:none;} #facebox .close:hover img {opacity:1.0; filter:alpha(opacity=100);} #facebox .loading {text-align:center;} #facebox .image {text-align:center;} #facebox img {margin:0; border:0;} #facebox_overlay {position:fixed; top:0; right:0; bottom:0; left:0;/* width:100%; height:100%; */opacity: 0.46 !important;filter: alpha(opacity=46) !important;} .facebox_hide {z-index:-100;} .facebox_overlayBG {z-index:99; background-color:#000;} #facebox .pop_layer .pop_wrap {top:0;} /* jQuery FlexSlider v2.6.0 */ .flex-container a:hover, .flex-slider a:hover {outline:none;} .slides, .slides > li, .flex-control-nav, .flex-direction-nav {margin:0; padding:0; list-style:none;} .flex-pauseplay span {text-transform:capitalize;} /* base styles */ .flexslider {margin:0; padding:0;} .flexslider .slides > li {display:none; -webkit-backface-visibility:hidden;} .flexslider .slides img {display:block; width:100%;} .flexslider .slides:after {content:"\0020"; display:block; clear:both; visibility:hidden; height:0; line-height:0;} html[xmlns] .flexslider .slides {display:block;} * html .flexslider .slides {height:1%;} .no-js .flexslider .slides > li:first-child {display:block;} /********************************** Title **********************************/ .title-top {position:relative;margin:53px 0 46px 0;text-align:center} .title-top {position:relative;margin:53px 0 46px 0;text-align:center} .title-top:before{display:block;content:'';width:60px;height:1px;background:#000;position:absolute;bottom:5px;left:0;margin-top:-1px;} .title-top .title-box h2, .title-top .title-box .title{font-size:50px;font-weight:700;color:#000;line-height:1} .title-top .more{position:absolute;bottom:5px;right:0;font-size:14px;padding:0 17px 8px 5px;line-height:1; font-weight:700} .title-top .more:after{display:block;content:'';width:100%;height:1px;background:#000;position:absolute;left:0;bottom:0} .title-top .more:before{display:block;content:'';width:6px;height:9px;background:url(../images/common/arr_more.png) no-repeat;position:absolute;top:3px;right:5px} .title-top .title-option {position:absolute;bottom:5px;right:0;} .title-option .option-box {position:relative;} .title-option .option-box ul {position:absolute; top:20px; right:0; background:#fff; text-align:left; border:1px solid #ccc; min-width:65px; padding:5px 10px; z-index:10; display:none;} .title-option .option-box ul.on {display:block;} .title-option .option-box ul li {padding:4px 0;} .title-option .option-box ul li a {display:block;color:#999;} .title-option .option-box ul li a:hover {color:#333;} .title-option .option-box > a {font-size:13px; padding:0 17px 8px 5px; line-height:13px; font-weight:700; color:#333; display:block;} .title-option .option-box > a:after{display:block;content:'';width:100%;height:1px;background:#000;position:absolute;left:0;bottom:0} .title-option .option-box > a:before{display:block;content:'';width:9px;height:5px;background:url(../images/common/arrow_down02.png) no-repeat;position:absolute;top:3px;right:5px} .title-top.sub .title-box h2, .title-top.sub .title-box .title{font-size:30px;} .title-top.sub .more{} /* 사업자회원가입 팝업 */ .operators_pop {padding:17px;} .operators_pop1 {margin-bottom:24px;} .operators_pop1:after {content:''; display:block; clear:both;} .operators_pop1 h2 {margin-top:3px; float:left; font-size:16px; font-weight:bold; color:#000;} .operators_pop1 a {float:right;} .operators_nunber {margin-bottom:14px; font-size:14px; color:#000;} .operators_nunber span {color:#b99c61; text-decoration:underline;} .my_info_table {border-top:1px solid #000;} .my_info_table th, .my_info_table td {padding:14px 0 14px 20px; border-bottom:1px solid #ccc;} .my_info_table th {text-align:left; background:#f8f8f8;} .operators_contant dd {margin:30px 0; text-align:center;} .operators_contant dd a.sub_k_buttom.buttom_m {position:relative; top:1px;} .wrap-line-tit {margin-bottom:50px; padding-left:15px;} .wrap-line-tit h3 {font-size:15px; font-weight:800; color:#000; margin:0; padding:0;} .wrap-line-tit:after {content:''; display:block; clear:both;}