/* == 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: pinch-zoom; touch-action: pinch-zoom; /* direct 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: 30px; } .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: 16px; 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; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .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; } .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden > .mCSB_container{ padding-bottom: 0; } .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{ -webkit-transition: opacity .2s ease-in-out, background-color .2s ease-in-out; -moz-transition: opacity .2s ease-in-out, background-color .2s ease-in-out; -o-transition: opacity .2s ease-in-out, background-color .2s ease-in-out; transition: opacity .2s ease-in-out, background-color .2s ease-in-out; } .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("//lifeggook.com/han/images/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); } /* ---------------------------------------- */ /* 스크롤시 옵션/구매버튼 이동 */ #mvarea_area { width:99%; float:left; } .mvarea_fix { position:fixed; bottom:-720px; right:13%; border:1px solid #ddd; padding:10px 10px 0 10px; background:#fff; width:550px !important; height:700px; z-index:40; display:block; -webkit-box-shadow: 0px 1px 5px 0px rgba(194,194,194,1); -moz-box-shadow: 0px 1px 5px 0px rgba(194,194,194,1); box-shadow: 0px 1px 5px 0px rgba(194,194,194,1); } /* 이동시 창 크기 측정 */ #mvarea_blank { position:relative; float:left; width:2px; z-index:-1; } .mvareasize { width:2px; height:100%; position:absolute; right:50%; z-index:-1; } .mvareasize2 { width:2px; height:100%; position:absolute; right:50%; z-index:-1; } .mvarea_def #mvarea { display:block !important; height:auto !important; } .mvarea_fix #mvarea { position:relative; padding:10px 10px 0 10px; overflow:auto; } .mvarea_def .mvarea_inside { position:relative; width:100%; margin:0 !important; padding:0 !important; } .mvarea_fix .mvarea_inside { position:relative; width:100%; } /* 구매버튼 영역 */ .mvarea_fix #scbtnzone { position:absolute; bottom:0; width:550px; background:#fff; z-index:1150; } /* 버튼 */ .detailpop_close { width:50px; height:50px; border-radius:2px overflow:hidden; position:absolute; top:-1px; right:-50px; z-index:100; text-align:center; color:#fff; font-weight:100; cursor: pointer; -webkit-box-shadow: 0px 1px 5px 0px rgba(194,194,194,1); -moz-box-shadow: 0px 1px 5px 0px rgba(194,194,194,1); box-shadow: 0px 1px 5px 0px rgba(194,194,194,1); } .detailpop_close .fa { width:50px; height:50px; line-height:50px; font-size:27px; } .detailpop_open { width:185px; height:50px; border-radius:2px overflow:hidden; position:fixed; right:13%; bottom:50px; z-index:100; text-align:center; font-size:16px; line-height:50px; color:#fff; font-weight:800; cursor: pointer; -webkit-box-shadow: 0px 1px 5px 0px rgba(194,194,194,1); -moz-box-shadow: 0px 1px 5px 0px rgba(194,194,194,1); box-shadow: 0px 1px 5px 0px rgba(194,194,194,1); } .mvarea_def .detailpop_open { display:none !important; } .mvarea_def .detailpop_close { display:none !important; } .deaddline { position:relative; display:block; width:100%; height:1px; } .mvarea_fix .deaddline { background:#555; } /* 스크롤시 상세정보탭 */ ul.atttap { position:relative; width: 100%; height: 59px; margin: 0px auto 50px; display:block; border:1px solid #e9e9e9; border-bottom:2px solid #232323; background:#fefefe; } ul.atttap li { position:relative; width: 22.8%; height:57px; line-height:60px; float:left; text-align:center; border-right:0px solid #ddd; text-align:center; } ul.atttap li:first-child { margin-left:4%; border-left:0px solid #ddd;} ul.atttap li.tap_sele { width: 22%; border:2px solid #232323; border-bottom:2px solid #fff; background:#fff; } ul.atttap li a { text-decoration:none; font-size:15px; color:#999; } ul.atttap li:hover a { font-size:15px; color:#111; } ul.atttap li.tap_sele > a { font-size:18px; color:#111; font-weight:500; } /* 삼각형 */ ul.atttap li.tap_sele .triangle_L { position:absolute; top: -2px; right:-20px; width: 0; height: 0; border-right: 18px solid transparent; border-left: 0 solid transparent; z-index:20; border-bottom: 59px solid #eee; } ul.atttap li.tap_sele .triangle_R { position:absolute; top: -2px; left:-20px; width: 0; height: 0; border-right: 0 solid transparent; border-left: 18px solid transparent; z-index:20; border-bottom: 59px solid #eee; } /* 쇼핑아이콘 */ .deicon { position:relative; text-align:center; border-bottom:1px solid #f3f3f3; background:#f3f3f3;} .deicon .deicondiv { position:relative; width:180px; display:inline-block; } .deicon .deiconimg { position:relative; width:80px; height:80px; margin:10px auto 10px; border-radius:50%; } .deicon p .fa { position:relative; width:80px; height:80px; line-height:80px; font-size:40px; color:#fff; border-radius:50%; transition: .5s; -webkit-transition: .5s; -moz-transition: .5s;} .deicondiv:hover .fa { margin-top:-20px; margin-left:-5px; width:90px; height:90px; line-height:90px; font-size:45px; } .deicon a { color:#666; font-size:14px; line-height:18px; text-decoration:none !important; } .deicon strong { padding-top:20px; font-size:17px; font-weight:400; line-height:28px; } /* 타임세일표시 */ .wrapping { position:absolute; top:1px; left:1px; width: 100%; z-index: 9; background: url("//lifeggook.com/han/images/bg/bg_white.png") repeat; border-radius:4px; display:none; } .clock-ticker { width: 100%; display: block; } ol.timesale { list-style: none; padding: 15px 0 7px; display: block; text-align: center; height:60px; border-bottom:1px solid #eee; } ol.timesale li { display: inline-block; margin: 0; } ol.timesale li span { font-size: 23px; font-weight: 700; line-height: 38px; width:60px; height:38px; display: block; color: #111; letter-spacing:-.3px; font-weight:700; } ol.timesale li p { color: #777; font-size: 11px; } ol.timesale li.seperator { font-size: 15px; line-height: 35px; vertical-align: top; color: #777; } .finished { position:relative; width:100%; height:82px; line-height:82px; background: url("//lifeggook.com/han/images/bg/bg_ccc20.png") repeat; font-size:18px; color:#111; font-weight: 700; display:none; text-align:center; z-index:10; } .xans-product-detail { position:relative; margin:0 auto; padding:30px 0 0 0; } .xans-product-detail .detailArea { padding:0 0 0 0; } .xans-product-detail .detailArea:after { content:""; display:block; clear:both; } .bg_gray { background:#fff; padding-bottom:50px; border-bottom:1px solid #f3f3f3; } .bg_gray .bg_grayin { position:relative; width:80%; max-width:1084px; margin:0 auto; } .procontrol { position:absolute; top:0px; left:5px;} .procontrol span a { color:#999; } .procontrol span:hover a { color:#111; } /* headingArea */ .xans-product-detail .headingArea { position:relative; padding:0 0 0px; } .xans-product-detail .headingArea h2 { display:inline; font-size:25px; line-height:30px; font-weight:500; color:#2e2e2e; } .xans-product-detail .headingArea .icon { display:block; } .xans-product-detail .headingArea .icon img { margin:0 3px 8px 0; vertical-align:middle; } .xans-product-detail .headingArea .icon .icon_img { margin:0; } .xans-product-detail .headingArea .supply { overflow:hidden; float:right; } .xans-product-detail .headingArea .supply span { padding:0 3px 0 0; font-size:16px; font-weight:bold; color:#555; } .soldicon { position:absolute; top:50%; margin-top:-19px; left:50%; margin-left:-65px; } .soldicon img { max-width:100%; } .pricearea { position:relative; width:100%; height:auto; display:table; margin-top:20px; margin-bottom:15px; } .pricearea_a1 { position:relative; width:auto; float:left; width:auto; height:auto; background:#fff; font-size:44px; line-height:59px; letter-spacing:-2px; color:#aa0000; max-height:60px; font-weight:700; } .pricearea_a2 { position:relative; display:block; float:left; width:auto; height:auto; background:#fff; padding-right:15px; margin-top:20px; } .pricearea_a3 { position:relative; display:block; float:left; width:auto; height:auto; background:#fff; margin-top:20px; } .pricearea .halflid1 , .pricearea .halflid2 , .pricearea .halflid3 { display:inline-block; position:relative; } .pricearea .halflid1 span { font-size:26px !important; line-height:40px !important; color:#999 !important; width:auto; display:block; font-weight:500; padding-right:9px; letter-spacing:-1px; } .pricearea .halflid1 .disnoul_left { display:block; position:absolute; top:-25px; left:0px; zoom:.5; width:100%; height:37px; overflow:hidden; } .pricearea .halflid2 span { font-size:26px !important; line-height:40px !important; color:#333; width:auto; display:block; font-weight:600; letter-spacing:-1px; } .pricearea .halflid2 .disnoul_left { display:block; position:absolute; top:-25px; left:0px; zoom:.5; width:100%; height:37px; overflow:hidden; } .pricearea .halflid3 span { font-size:26px !important; line-height:40px !important; color:#aa0000 !important; width:auto; display:block; font-weight:800; letter-spacing:-1px; } .pricearea .halflid3 .disnoul_left { display:block; position:absolute; top:-25px; left:0px; zoom:.5; width:100%; height:37px; overflow:hidden; } .pricearea_a3_arr { position:absolute; top:7px; left:0; font-size:17px; color:#fff; display:none; } /* IE9,10 */ @media screen and (min-width:0\0){ .pricearea .halflid1 .disnoul_left , .pricearea .halflid2 .disnoul_left , .pricearea .halflid3 .disnoul_left { top:-12px;} } /* 상품 할인률 */ .leftper { position:absolute; top:0; left:0; display:none; width:80px; height:60px; z-index:10; background:#fff;} .leftper:after { content : "%"; font-size:18px; margin-left:0px; } .leftper2 { position:absolute; top:0; left:0; display:none; width:80px; height:60px; z-index:11; background:#fff; } .leftper2:after { content : "%"; font-size:18px; margin-left:0px; } .leftper3 { position:absolute; top:0; left:0; display:none; width:80px; height:60px; z-index:12; background:#fff; } .leftper3:after { content : "%"; font-size:18px; margin-left:0px; } /* 상품 간략설명 상단으로 이동 */ .pricearea_des { margin-top:10px; margin-bottom:30px; width:95%; } .pricearea_des span { font-size:13px !important; color:#333 !important; font-weight:400; line-height:22px; } .pricearea_des .disnoul_left { display:none; } /* imgArea */ .xans-product-detail .imgArea { position:relative; width:46%; float:left; } .xans-product-detail .imgArea .keyImg { width:100%; margin:0 auto; } .xans-product-detail .imgArea .keyImg .thumbnail { display:inline-block; position:relative; width:100%; } .xans-product-detail .imgArea .keyImg .prdIcon { position:absolute; top:0; left:0; width:100%; height:100%; background-repeat:no-repeat; z-index:15;} .xans-product-detail .imgArea .keyImg img { width:100%; border:1px solid #e9e9e9; cursor:pointer; } .xans-product-detail .imgArea .listImg { overflow:hidden; width:100%; margin:4px 0 0 -5px; padding:0 4px;} .xans-product-detail .imgArea .listImg ul { min-width:400px; height:103px; margin:0 0 0 2px; font-size:0; line-height:0; } .xans-product-detail .imgArea .listImg li { display:inline-block; margin:0 4px; font-size:12px; line-height:14px; vertical-align:top; } .xans-product-detail .imgArea .listImg li img { width:100px; height:104px; border:1px solid #e9e9e9; cursor:pointer; } .xans-product-detail .imgArea .listImg button { position:absolute; top:2px; width:21px; height:100px; font-size:0; line-height:0; color:transparent; background:url("//lifeggook.com/han/images/btn_product_detail_ctrl.png") no-repeat; } .xans-product-detail .imgArea .listImg .prev { left:7px; background-position:0 0; } .xans-product-detail .imgArea .listImg .next { right:3px; background-position:-31px 0; } .xans-product-detail .imgArea .color { overflow:hidden; width:100%; margin:5px auto; } .xans-product-detail .imgArea .chips { float:left; width:18px; height:18px; margin:0 3px 3px 0; border:1px solid #e3e3e3; font-size:0; line-height:0; border-radius:3px; } .xans-product-detail .imgArea .xans-product-action { position:relative; width:100%; max-width:500px; margin:-44px auto 0; z-index:30; } .xans-product-detail .imgArea .xans-product-action a { height:30px; line-height:30px; font-size:12px; border:0; } .xans-product-detail .imgArea .xans-product-action .fa { margin-right:3px; } /* likeButton */ .xans-product-detail .likeButton { position:absolute; bottom:45px; left:-4px; z-index:30; } .xans-product-detail .likeButton button { display:inline-block; width:50px; } .xans-product-detail .likeButton button span { display:inline-block; height:22px; line-height:33px; vertical-align:middle; font-family: sans-serif; margin-left:-10px; } .xans-product-detail .likeButton button img { outline:0 !important; border:0 !important; background:none !important; } .xans-product-detail .likeButton.selected .count { color:#fff; } /* infoArea */ .xans-product-detail .infoArea { float:right; width:50%; } .xans-product-detail .infoArea p.delivery { padding:10px 0 0px; } .xans-product-detail .infoArea .guideArea { overflow:hidden; margin:0 0 0; padding:0 11px; border-top:1px solid #e8e8e8; } .xans-product-detail .infoArea .guideArea .info { float:left; color:#757575; } .xans-product-detail .infoArea .guideArea .sizeGuide { float:right; background:url("//img.echosting.cafe24.com/skin/base_ko_KR/product/ico_sizeGuide.gif") no-repeat 0 3px; margin:10px 0;} .xans-product-detail .infoArea .sizeGuide a { display:inline-block; padding:2px 15px 2px 24px; color:#353535; vertical-align:top; background:url("//img.echosting.cafe24.com/skin/base_ko_KR/product/ico_sizeGuide_go.gif") no-repeat 100% 6px; } .xans-product-detail .infoArea .sizeGuide a:hover { text-decoration:none; } .xans-product-detail .infoArea th { font-weight:normal; color:#353535; width:145px; padding:7px 0 8px 9px; text-align:left; vertical-align:middle; } .xans-product-detail .infoArea td { padding:7px 6px 8px 0; vertical-align:middle; } .xans-product-detail .infoArea img { vertical-align:middle; } .xans-product-detail .infoArea td input[type=text] { width:80%; } .xans-product-detail .infoArea select { width:100%; height:24px; font-size:12px; color:#353535; } .xans-product-detail .infoArea td #delivery_cost_prepaid { margin:0 0 5px; } .xans-product-detail .infoArea td.social { padding:4px 0 0; } .xans-product-detail .infoArea td.social img { cursor:pointer; } .xans-product-detail .infoArea td .sale { text-decoration:line-through; } .xans-product-detail .infoArea td .period { display:block; margin:7px 0 0; font-size:12px; color:#353535; } .xans-product-detail .infoArea td .mileage li { line-height:1.7em; } .xans-product-detail .infoArea td .delivery label { margin:0 30px 0 0; } .xans-product-detail .infoArea td img.qrcode { border:1px solid #e1e1e1; } .xans-product-detail .infoArea td #span_product_price_text { font-weight:normal; } .xans-product-detail .infoArea td #span_product_coupon_dc_price { color:#070705; } .xans-product-detail .infoArea td.fileInfo { color:#757575; } .xans-product-detail .infoArea td.fileInfo input { width:288px; border:1px solid #c5c5c5; border-right:1px solid #e9e9e9; border-bottom:1px solid #e9e9e9; } .xans-product-detail .infoArea td.fileInfo .infoDesc { margin:0 0 10px 0; } .xans-product-detail .infoArea td.fileInfo li { margin:4px 0 0; color:#757575; font-size:11px; } .xans-product-detail .infoArea td.fileInfo li img { vertical-align:bottom; } .xans-product-detail .delv_price_B strong { font-weight:normal; } .xans-product-detail .btnTooltip { display:inline-block; position:relative; z-index:10; vertical-align:middle; } .xans-product-detail .infoArea .xans-product-option tr th { vertical-align:middle; font-size:13px; font-weight:500; text-indent:15px; } .xans-product-detail .infoArea .xans-product-option tr td { padding:12px 10px 15px 0; } .xans-product-detail .infoArea .xans-product-option tr { border:2px dotted #ccc; background:#fefefe; } .xans-product-detail .infoArea .xans-product-option td.selectButton { text-align:right; } .xans-product-detail .infoArea .xans-product-addoption .txtByte { font-size:14px; vertical-align:middle; letter-spacing:0px; margin-left:3px; } .xans-product-detail .infoArea .xans-product-addoption .txtByte strong { color:#008bcc; } .disnoul { position:relative; border-top:1px solid #e9e9e9; padding:20px 0 5px; display:table; width:100%; } .disnoul_left { width:120px; height:100%; float:left; display:table-cell; } .disnoul_right { height:100%; width:auto; display: table-cell; } .disnosele .disnoul_left { width:auto; margin-left:15%; } .xans-product-detail .disno li { position:relative;line-height:16px; padding:3px 5px; margin-top:4px; } .xans-product-detail .disno li span { font-size:13px !important; color:#777 !important; line-height:20px; } @media all and (min-width:1px) and (max-width:1280px) { .disnosele .disnoul_left { margin-left:5%; } } /* 상품 옵션 */ .xans-product-detail .infoArea .xans-product-option { padding-bottom:10px; } .xans-product-detail .infoArea .xans-product-option .value { color:#767479; word-break:break-all; } .xans-product-detail .infoArea .xans-product-option .value .ec-product-value { color:#363437; } .xans-product-detail .infoArea .xans-product-option .ec-product-button li { position:relative; overflow:hidden; display:inline-block; margin:0 5px 3px 0; vertical-align:top; border:2px dotted #ccc; background:#fff; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; *display:inline; *zoom:1; } .xans-product-detail .infoArea .xans-product-option .ec-product-button li:last-child { margin-right:0; } .xans-product-detail .infoArea .xans-product-option .ec-product-button li a { display:block; min-width:30px; text-align:center; text-decoration:none; word-break:break-all; } .xans-product-detail .infoArea .xans-product-option .ec-product-button li a span { display:inline-block; padding:11px 10px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } .xans-product-detail .infoArea .xans-product-option .ec-product-button.ec-product-preview li { padding:4px; } .xans-product-detail .infoArea .xans-product-option .ec-product-button.ec-product-preview li a { min-width:30px; width:30px; height:30px; } .xans-product-detail .infoArea .xans-product-option .ec-product-button.ec-product-preview li a img { max-width:100%; max-height:100%; } .xans-product-detail .infoArea .xans-product-option .ec-product-button.ec-product-preview li a span { overflow:hidden; line-height:0; font-size:0; padding:0; text-indent:120%; white-space:nowrap; } .xans-product-detail .infoArea .xans-product-option .ec-product-button.ec-product-preview .ec-product-soldout span, .xans-product-detail .infoArea .xans-product-option .ec-product-button.ec-product-preview .ec-product-disabled span { position:absolute; left:0; top:0; z-index:1; } .xans-product-detail .infoArea .xans-product-option .ec-product-button.ec-product-preview .ec-product-soldout span { background:url("//img.echosting.cafe24.com/skin/base/product/soldout_bg.png") repeat; } .xans-product-detail .infoArea .xans-product-option .ec-product-button .ec-product-soldout { border-style:dashed; } .xans-product-detail .infoArea .xans-product-option .ec-product-button .ec-product-soldout a span { display:inline-block; width:100%; height:100%; cursor:not-allowed; color:#d7d7d7; } .xans-product-detail .infoArea .xans-product-option .ec-product-button .ec-product-soldout.ec-product-selected { border-style:dashed; } .xans-product-detail .infoArea .xans-product-option .ec-product-button .ec-product-disabled a { cursor:default; } .xans-product-detail .infoArea .xans-product-option .ec-product-button .ec-product-disabled a span { display:inline-block; width:100%; height:100%; color:#000; background:#555; filter:alpha(opacity=30); opacity:0.3; } .xans-product-detail .infoArea .xans-product-option .ec-product-button .ec-product-selected { border:2px solid #495164; } .xans-product-detail .infoArea .xans-product-option .ec-product-button .ec-product-selected a { margin:0px; } .xans-product-detail .infoArea .xans-product-option .ec-product-radio > li { display:inline-block; margin:0 0 3px; } .xans-product-detail .infoArea .xans-product-option .ec-product-radio label { margin:0 7px 0 0; } .xans-product-detail .infoArea .xans-product-option .ec-product-radio label input { margin:0 2px 0 0; } .xans-product-detail .infoArea .xans-product-option .ec-product-radio .ec-product-disabled, .xans-product-detail .infoArea .xans-product-option .ec-product-radio .ec-product-soldout { color:#d7d7d7; } /* xans-product-action */ .xans-product-detail .infoArea .xans-product-action { position:relative; padding:15px 0 0px; border-top:1px solid #e8e8e8; } .xans-product-detail .infoArea .xans-product-action a { font-size:20px; padding:23px 0 20px; } .xans-product-detail .infoArea .xans-product-action span { font-size:20px; letter-spacing:1px; font-weight:400; } .xans-product-detail .infoArea .xans-product-action p { font-size:13px; margin-bottom:3px; letter-spacing:0px; font-weight:400; display:block; clear:both; width:100%;} .xans-product-detail .infoArea .xans-product-action .bgwhite { background:#f9f9f9; } .xans-product-detail .infoArea .xans-product-action .bgwhite:hover { background:#eee; } .xans-product-detail .infoArea .xans-product-action .plus { background:#f9f9f9; } .xans-product-detail .infoArea .xans-product-action .talk { background:#f9f9f9; } .xans-product-detail .infoArea .xans-product-action .plus:hover { background:#fa981e; } .xans-product-detail .infoArea .xans-product-action .talk:hover { background:#7eac00; } .xans-product-detail .infoArea .xans-product-action .plus img { margin-top:.5px; margin-right:5px; } .xans-product-detail .infoArea .xans-product-action .talk img { margin-top:2px; margin-right:5px; } /* eventArea */ .xans-product-detail .eventArea { color:#353535; } .xans-product-detail .eventArea h3 { padding:0 0 0 9px; border-top:1px solid #e8e8e8; border-bottom:1px solid #e8e8e8; font-size:12px; color:#008bcc; line-height:39px; } .xans-product-detail .eventArea .event { padding:27px 10px 46px 9px; color:#353535; line-height:18px; } /* xans-myshop-benefit */ .xans-myshop-asyncbenefit { margin:30px 0; } .xans-myshop-asyncbenefit .member { margin:2px 0 19px; } .xans-myshop-asyncbenefit .member em { font-style:normal; } /* 상품 미리보기 이미지 */ #image_zoom_small { display:block; position:absolute; z-index:999; background:#fff; outline:2px solid #aaa; filter:alpha(opacity=50); opacity:0.5; } #zoom_wrap { position:absolute; top:0; left:103%; z-index:100; display:block;} .image_zoom_large { position:absolute; z-index:99; width:500px; height:500px; overflow:hidden; background:#fff; outline:1px solid #ececec; } .image_zoom_large .image_zoom_large_relative { position:relative; display:block; } .image_zoom_large .image_zoom_large_relative img#zoom_image { position:absolute; z-index:99; max-width:none; } #NaverChk_Button, #appPaymentButtonBox { clear:both; margin:10px 0 0; float:right; } #divNvPointInfo { display:none; position:absolute; z-index:99; width:245px; padding:10px; color:#777; background:#fff; border:1px solid #5B9761; } #divNvPointInfo a { display:block; padding:5px 0 0; color:#1ec228; } #divNvPointInfo a img { vertical-align:middle; } #imgNaverMileageHelp { cursor:pointer; } /* App payment button box */ #appPaymentButtonBox { max-width:600px; margin:10px auto 0; } #appPaymentButtonBox > div { margin:0 0 5px 0; } #appPaymentButtonBox > div:last-of-type { margin-bottom:0; } #appPaymentButtonBox #kakao-checkout-button { text-align: right; } /* 세트상품 및 추가구성상품 */ .xans-product-detail .productSet { margin:10px 0 0; border:1px solid #ddd; border-bottom:0; } .xans-product-detail .productSet > .title { position:relative; height:40px; line-height:40px; box-sizing:border-box; border-bottom:0px solid #ddd; } .xans-product-detail .productSet > .title h3 { margin:0 0 0 14px; font-size:14px; color:#fff; text-shadow: 1px 1px 1px #111;} .xans-product-detail .productSet > .title h3 span { margin-left:6px; color:#fff !important; font-size:12px; font-weight:400;} .xans-product-detail .productSet .product > li { position:relative; border-bottom:1px solid #ddd; width:100%; display:block; clear:both; height:180px; overflow-y:auto; } .product_left { position:relative; width:100%; float:none; clear:both; height:80px; border-bottom:1px dashed #eee; } .product_right { position:relative; width:100%; float:none; clear:both; height:auto; } .xans-product-detail .productSet .thumbnail { position:relative; margin:5px 15px 0 10px; z-index:1; width:100px; float:left; } .xans-product-detail .productSet .thumbnail img { width:67px; border:1px solid #ededed; } .xans-product-detail .productSet .thumbnail_right { position:relative; float:left; } .xans-product-detail .productSet .information { position:relative; width:100%; } .xans-product-detail .productSet .information p { margin:3px 0; line-height:20px; } .xans-product-detail .productSet .pname { position:relative; width:100%; height:24px; line-height:24px; background:#f5f5f5; text-align:center; white-space: nowrap; text-overflow: ellipsis; overflow:hidden; } .xans-product-detail .productSet .information .price .del { font-weight:normal; } .xans-product-detail .productSet .information .salePrice { color:#000; font-weight:bold; } .xans-product-detail .productSet .information .btnInfo { position:absolute; top:19px; right:19px; z-index:1; display:block; width:57px; height:20px; vertical-align:middle; background:url("//img.echosting.cafe24.com/skin/base_ko_KR/product/btn_info.gif") no-repeat 0 0; } .xans-product-detail .productSet .information .btnInfo.selected { background:url("//img.echosting.cafe24.com/skin/base_ko_KR/product/btn_info_on.gif") no-repeat 0 0; } .xans-product-detail .productSet .information .btnInfo span { overflow:hidden; font-size:0; width:0; height:0; line-height:0; text-indent:120%; } .xans-product-detail .productSet .option { padding:10px 19px 9px 10px; } .xans-product-detail .productSet .option > li { margin:0 0 12px; } .xans-product-detail .productSet .option .name { position:relative; display:block; width:50px; height:100%; line-height:30px; float:left; font-weight:normal; font-weight:600; } .xans-product-detail .productSet .option .value { margin-left:50px; } .xans-product-detail .productSet .option input[type=text] { width:80%; } .xans-product-detail .productSet .option .ec-base-qty { margin:7px 0 0; } .xans-product-detail .productSet .option .selectButton { margin:0 0 6px; text-align:right; } .xans-product-detail .productSet .guide { overflow:hidden; position:relative; margin:0 19px; } .xans-product-detail .productSet .guide:after { content:""; display:block; clear:both; } .xans-product-detail .productSet .guide .qty { float:left; display:inline-block; padding:12px 0; color:#757575; } .xans-product-detail .productSet .guide .qty:before { content:""; position:absolute; top:0; left:0; display:inline-block; width:100%; border-top:1px solid #e8e8e8; } .xans-product-detail .productSet .guide .sizeGuide { float:right; height:15px; margin:12px 0; background:url("//img.echosting.cafe24.com/skin/base/product/ico_sizeGuide.gif") no-repeat 0 1px; } .xans-product-detail .productSet .guide .sizeGuide:before { content:""; position:absolute; top:0; left:0; display:inline-block; width:100%; border-top:1px solid #e8e8e8; } .xans-product-detail .productSet .guide .sizeGuide a { display:inline-block; padding:0 15px 0 24px; background:url("//img.echosting.cafe24.com/skin/base/product/ico_sizeGuide_go.gif") no-repeat 100% center; } .xans-product-detail .productSet.additional .title span { color:#757575; font-weight:normal; } .xans-product-detail .productSet.additional .title .toggle { position:absolute; top:8px; right:8px; } .xans-product-detail .productSet.hide .product { display:none; } .xans-product-detail .productSet .ec-base-desc { padding:0 0 10px; border-top:0; border-bottom:1px solid #ddd; } .xans-product-detail .productSet .ec-base-desc dt { width:135px; padding:0 0 0 20px; } /* 수량 */ .ec-base-desc.quantity { margin:10px 0 0; padding:10px 0 0; border-top:1px solid #ddd; } .ec-base-desc.quantity dt { width:125px; padding:0 0 0 8px; } /* 총 상품 */ #totalProducts { margin:0 0 0; } #totalProducts table { margin:0; } #totalProducts table .left { text-align:left; } #totalProducts table .center { text-align:center; } #totalProducts table .right { padding-right:14px; font-weight:600; color:#111; text-align:right; font-size:18px; } #totalProducts thead th { height:0; padding:0; font-size:0; line-height:0; } #totalProducts tbody th { vertical-align:middle; } #totalProducts tbody td { padding:12px 0; border-top:4px solid #fff; color:#353535; line-height:18px; vertical-align:middle; word-wrap:break-word; word-break:break-all; background:#fcfcfc; } #totalProducts tbody tr td:first-child { padding-left:14px; } #totalProducts tbody td p { padding:0 10px 0 0; font-weight:400; line-height:21px; color:#999; } #totalProducts tbody td p.product span { font-weight:normal; color:#353535; line-height:18px; font-weight:600; font-size:15px;} #totalProducts tbody td p.product span.soldOut { color:#111; } #totalProducts tbody td img { vertical-align:middle; } #totalProducts tbody td .quantity { display:inline-block; position:relative; width:50px; vertical-align:top; } #totalProducts tbody td .quantity input { width:22px; height:23px; padding:0 2px 0 3px; line-height:23px; border:1px solid #d4d8d9; border-radius:3px 0 0 3px; } #totalProducts tbody td .quantity .up { position:absolute; left:28px; top:0; } #totalProducts tbody td .quantity .down { position:absolute; left:28px; top:12px; } #totalProducts tbody.option_products tr td .quantity input, #totalProducts tbody.add_products tr td .quantity input { height:19px; line-height:19px; } #totalProducts tbody.option_products tr td .quantity .down, #totalProducts tbody.add_products tr td .quantity .down { bottom:0; top:auto; } #totalProducts tbody td .mileage { display:block; white-space:nowrap; font-size:13px; } #totalProducts tbody td .mileage_price { } /* 총 상품 금액 */ .totalPrice { margin:0 0 0; color:#353535; vertical-align:middle; line-height:40px; height:40px; padding:30px 8px 0; } .totalPrice .total { color:#111; } .totalPrice .total em { font-style:normal; font-size:29px; font-weight:700; } .totalPrice .right { text-align:right; float:right;} /* 배송비 차등부과 레이어 */ .differentialShipping { display:none; overflow:hidden; position:absolute; left:50%; top:17px; z-index:100; width:350px; margin:0 0 0 -176px; } .differentialShipping h3.title { height:35px; padding:0 35px 0 19px; border:0; color:#fff; font-size:14px; line-height:35px; background:#495164; } .differentialShipping .content { padding:12px 18px 14px 18px; border:1px solid #757575; border-top:0; text-align:center; background:#fff; } .differentialShipping .close { position:absolute; right:14px; top:12px; } .differentialShipping .close img { cursor:pointer; } .differentialShipping .content ul { color:#757575; line-height:25px; } .differentialShipping .content li { overflow:hidden; } .differentialShipping .content li strong { float:left; font-weight:normal; } .differentialShipping .content li span { float:right; color:#2e2e2e; } .differentialShipping .content .info { margin:7px 0 0; padding:7px 0 0; border-top:1px dotted #b0b1b3; color:#80aeef; text-align:right; } /* 배송비레이어 */ .xans-product-detail .shippingFee { position:relative; display:inline-block; } .xans-product-detail .shippingFee .ec-base-tooltip { margin:0 0 0 -180px; width:360px; } .xans-product-detail .shippingFee .ec-base-tooltip table th { width:40px; } .xans-product-detail .shippingFee .ec-base-tooltip table th, .xans-product-detail .shippingFee .ec-base-tooltip table td { padding:7px 10px 8px 10px; } /* SNS 상품 홍보 */ .xans-product-customsns, .xans-product-customsns ul, .xans-product-customsns li { display:inline-block; vertical-align:middle; } .xans-product-customsns img { margin-bottom:2px; } /* 회원등급별 할인가 적용 */ .xans-product-detail .infoArea td > span > ul.discountMember > li { position:relative; float:left; } .xans-product-detail .infoArea td ul.discountMember li a { display:block; margin:0 4px 4px 0; } .xans-product-detail .infoArea td ul li .discount_layer h3 { margin:0 0 8px; padding:0 10px; font-size:12px; border-bottom:0; } .xans-product-detail .infoArea td ul li .discount_layer { display:block; left:-140px; min-width:300px;} .xans-product-detail .infoArea td ul li .discount_layer .content { overflow-x:hidden; overflow-y:auto; max-height:400px; } .xans-product-detail .infoArea td ul li .discount_layer thead th { padding:0; width:0; height:0; font-size:0; line-height:0; border-width:0 1px 0 1px; } .xans-product-detail .infoArea td ul li .discount_layer tbody th { width:auto; } /* 세트상품 추가정보 레이어 */ .xans-product-detail .productSet .product { position:relative; } .xans-product-detail .productSet .description { z-index:10; position:absolute; top:38px; right:0; padding:7px 0 0; } .xans-product-detail .productSet .description .xans-product-detail { position:relative; padding:15px; border:1px solid #565960; background:#fff; } .xans-product-detail .productSet .description > h3 { margin:0 0 8px; padding:0 10px; font-size:12px; border-bottom:0; background:url("//img.echosting.cafe24.com/skin/base/common/ico_layer_title.gif") no-repeat 0 50%; } .xans-product-detail .productSet .description p strong { color:#0088d4; } .xans-product-detail .productSet .description thead th { padding:0; height:0; font-size:0; line-height:0; } .xans-product-detail .productSet .description tbody { border:1px solid #d7d5d6; } .xans-product-detail .productSet .description th, .xans-product-detail .productSet .description tr:first-child th, .xans-product-detail .productSet .description tr:first-child td { background:#fbf9fa; border-right:1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8; color:#363636; } .xans-product-detail .productSet .description th, .xans-product-detail .productSet .description td { height:15px; border-bottom:1px solid #e8e8e8; } .xans-product-detail .productSet .description td, .xans-product-detail .productSet .description tr:first-child td { padding:5px 8px; text-align:left; background:#fff; } .xans-product-detail .productSet .description tr:last-of-type th, .xans-product-detail .productSet .description tr:last-of-type td { border-bottom:0; } .xans-product-detail .productSet .description .color td { font-size:0; line-height:0; } .xans-product-detail .productSet .description .chips { display:inline-block; width:28px; height:18px; margin:0 2px 3px 0; border:1px solid #e3e3e3; } .xans-product-detail .productSet .description .btnClose { background:transparent; } .xans-product-detail .productSet .description > .ec-base-tooltip { display:block; top:0; } .xans-product-detail .productSet .description > .ec-base-tooltip > .edge { z-index:20; position:absolute; left:auto; right:40px; display:block; margin:0 0 0 -5px; width:9px; height:6px; background:url("//img.echosting.cafe24.com/skin/base/common/ico_option_arrow.gif") no-repeat 0 0; } .xans-product-detail .additional .product { display:none; } /* 정기배송 */ .xans-product-detail .infoArea .regularDelivery { margin:20px 0 0; border-top:1px solid #e8e8e8; } .xans-product-detail .infoArea .regularDelivery th { vertical-align:top; } .xans-product-detail .infoArea .regularDelivery .gLabel { position:relative; margin:0 35px 0 0; } .xans-product-detail .infoArea .regularDelivery .badge { display:inline-block; position:relative; top:-1px; height:18px; margin:0 0 0 5px; padding:0 8px; border-radius:10px; line-height:18px; font-size:12px; font-family:"돋움","Dotum"; color:#fff; background-color:#009ffa; } .xans-product-detail .infoArea .regularDelivery .badge .icoDown { display:inline-block; position:relative; top:1px; overflow:hidden; width:8px; height:12px; border-radius:50%; line-height:10px; text-indent:-9999px; } .xans-product-detail .infoArea .regularDelivery .badge .icoDown:before { content:""; display:inline-block; position:absolute; top:3px; left:2px; width:4px; height:4px; background-color:#fff; } .xans-product-detail .infoArea .regularDelivery .badge .icoDown:after { content:""; display:inline-block; position:absolute; bottom:1px; left:0; width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent; border-top:4px solid #fff; } .xans-product-detail .infoArea .regularDelivery .info { margin:14px 0 0; } .xans-product-detail .infoArea .regularDelivery .info ul { margin:6px 0 0; } .xans-product-detail .infoArea .regularDelivery .info ul > li { margin:4px 0; letter-spacing:-.8px; } .xans-product-detail .infoArea .regularDelivery .info .icoSave { display:inline-block; height:12px; padding:0 2px; border:1px solid #ff5454; border-radius:3px; line-height:12px; color:#ff5454; } .xans-product-detail .infoArea .regularDelivery .info .icoDown { display:inline-block; position:relative; overflow:hidden; width:5px; height:10px; margin:0 0 0 2px; line-height:10px; text-indent:-9999px; } .xans-product-detail .infoArea .regularDelivery .info .icoDown:before { content:""; display:inline-block; position:absolute; top:0; left:2px; width:1px; height:10px; background-color:#ff5454; } .xans-product-detail .infoArea .regularDelivery .info .icoDown:after { content:""; display:inline-block; position:absolute; bottom:2px; left:-2px; padding:4px; border:solid #ff5454; border-width:0 1px 1px 0; transform:rotate(45deg); -webkit-transform:rotate(45deg); } #prdDetail img { max-width:100% !important; height:auto !important; } .xans-product-additional .cont { color:#888; line-height:23px; } .xans-product-additional .cont img { max-width:100%; } .xans-product-additional h3 { margin:50px 0 20px; line-height:15px; color:#111; font-size:17px; letter-spacing:-1px; text-transform:uppercase; font-weight:500;} .xans-product-additional h3:before { content: ""; width:10px; height:10px; display:block; background:#222; float: left; margin: 3px 7px 0 0; border-radius:50%; } /* 상품 게시판 */ .xans-product-additional div.board { padding:0px 0 46px; color:#888; line-height:18px; } .xans-product-additional div.board p.desc { padding:0 10px 0 9px; } .xans-product-additional div.board p.nodata { margin:15px 0 0; border:1px solid #e9e9e9; font-weight:bold; color:#888; line-height:39px; text-align:center; } .xans-product-additional div.board td .view { padding:16px 19px 0; line-height:18px; text-align:left; } #commentWriteForm_4, #commentWriteForm_6 { padding:0 19px; } #SecretForm_4, #SecretForm_6 { background:#fbf9fa; } #SecretForm_4 .view, #SecretForm_6 .view { padding:8px 0 7px; } #SecretForm_4 input, #SecretForm_6 input { width:41px; height:24px; margin:0 0 0 6px; border:0; font-size:0; line-height:0; cursor:pointer; background:url("//img.echosting.cafe24.com/skin/base_ko_KR/board/btn_ico_submit.gif") no-repeat 0 0; } #SecretForm_4 input#secure_password, #SecretForm_6 input#secure_password { width:130px; height:18px; margin-left:11px; padding:2px 2px 2px 4px; border:1px solid #e9e9e9; font-size:12px; line-height:14px; cursor:text; background:#fff; } #product-review-read td, #product-qna-read td { padding:0; } #product-review-read td #SecretForm_4 .view { padding-left:79px; } #product-qna-read td #SecretForm_6 .view { padding-left:213px; } .xans-product-additional .boardComment { padding:0 19px; } .xans-product-additional .boardComment li { position:relative; overflow:hidden; margin:10px 0 0 0; padding:12px 0 0; border-top:1px solid #e9e9e9; color:#353535; text-align:left; line-height:14px; } .xans-product-additional .boardComment li:first-child { margin-top:0; } .xans-product-additional .boardComment li .comment { margin:9px 0 0; padding:16px 0 15px 9px; border-top:1px solid #e9e9e9; line-height:18px; word-break:break-all; } .xans-product-additional .boardComment li .name { margin:0 21px 0 0; } .xans-product-additional .boardComment li .name input { width:13px; height:13px; margin:0 2px 0 0; vertical-align:-2px; *vertical-align:2px; } .xans-product-additional .boardComment li .date { margin:0 10px 0 0; font-size:11px; } .xans-product-additional .boardComment li .grade { margin:0 10px 0 0; } .xans-product-additional .boardComment li .button { position:absolute; right:0; top:6px; } .xans-product-additional .memoCont { margin:20px 15px; padding:10px 20px 15px 20px; border:1px solid #e9e9e9; color:#353535; text-align:left; background:#fbfafa; } .xans-product-additional .memoCont .user { overflow:hidden; padding:0 90px 0 0; } .xans-product-additional .memoCont .user input[type=text], .xans-product-additional .memoCont .user input[type=password] { width:135px; margin:0 10px 0 9px; } .xans-product-additional .memoCont .user .secret { margin:0 20px 0 10px; } .xans-product-additional .memoCont .user .secret label { margin:0; } .xans-product-additional .memoCont .user textarea { float:left; width:100%; padding:2px 0; height:44px; text-indent:4px; *margin-right:10px; } .xans-product-additional .memoCont .user a { float:right; margin:0 -90px 0 0; } .xans-product-additional .memoCont .nameArea { display:block; margin:0 0 10px; } .xans-product-additional .memoCont .nameArea .ec-base-help { margin-top:10px; } .xans-product-additional .memoCont .rating { margin:12px 0 0; } .xans-product-additional .memoCont .rating label { padding:0 10px 0 0; } .xans-product-additional .memoCont .rating em { font-style:normal; } .xans-product-additional .memoCont .text { margin:5px 0 0; font-size:11px; } .xans-product-additional .memoCont .text span { color:#33353d; } .xans-product-additional .memoCont .captcha { margin:8px 0 0; padding:10px 0 0; border-top:1px solid #e9e9e9; color:#757575; } .xans-product-additional .memoCont .captcha img { vertical-align:middle; } .xans-product-additional .memoCont .captcha input { margin:0 10px 0 20px; font-size:12px; } .xans-product-additional table.board td .view + form .memoCont { margin-top:0; } /* 댓글의 댓글 */ .xans-product-additional .boardComment li.replyArea { margin:-1px 0 0; padding:10px 0 7px 33px; border:1px solid #e9e9e9; background:url("//img.echosting.cafe24.com/skin/admin_ko_KR/board/ico_comment.gif") no-repeat 20px 15px; } .xans-product-additional .boardComment li.replyArea .commentSecret { margin-right:30px; } .xans-product-additional .boardComment li.replyArea .comment { margin:7px 0 0; padding:0; border-top:0; } /* 권한없을시 */ .xans-product-additional .noAccess { margin:15px 0 10px; border:1px solid #e9e9e9; font-weight:bold; color:#33353d; line-height:39px; text-align:center; } /* 미성년자 */ .xans-product-additional .minor { margin:15px 0 0; padding:35px 0 24px; border:1px solid #e9e9e9; font-weight:bold; color:#353535; line-height:14px; text-align:center; } .xans-product-additional .minor p:first-child img { margin:-11px 8px 0 0; vertical-align:top; } .xans-product-additional .minor strong { color:#33353d; } .xans-product-additional .minor .button { margin:-7px 0 0; } /* 비밀글 관련 */ .xans-product-additional .commentSecret { margin:10px 10px 5px 0; padding:10px 15px; border:1px solid #e9e9e9; background-color:#fbfafa; color:#353535; } .xans-product-relation { position:relative; height: auto; border-bottom:1px solid #f3f3f3; padding:90px 0 90px;} .xans-product-relation .relation { color:#8f8f91; line-height:1.8em; max-height:440px; overflow:hidden;} .xans-product-relation h2 { margin-bottom:20px; text-indent:7px; } .xans-product-relation .relation ul.prdList { display:table; width:100%; min-width:950px; margin:0 0; font-size:0; line-height:0; } .xans-product-relation .relation ul.prdList img { vertical-align:middle; } .xans-product-relation .relation ul.prdList li.item { display:inline-block; color:#888; vertical-align:top; *display:inline; *zoom:1; max-width:330px; } .xans-product-relation .relation ul.prdList li.item .box { margin:0 auto; font-size:13px; line-height:19px; } .xans-product-relation .relation ul.prdList li.item { width:25%; margin-bottom:10px; } .xans-product-relation .relation ul.prdList li.item .box { width:94%; } .xans-product-relation .relation ul.prdList li.item .box strong { display:block; margin:3px 0 0; color:#888; } .xans-product-relation .relation ul.prdList li.item .box .salePrice strong { color:#888; } .xans-product-relation .relation ul.prdList li.item .box .strike { font-weight:normal; text-decoration:line-through; } .xans-product-relation .relation ul.prdList li.item .thumb { width:100%; margin:0 0 10px; border:1px solid #ececec; } #prev_relation { top:53%; margin-top:-25px; left:-80px; } #next_relation { top:53%; margin-top:-25px; right:-80px; } .xans-coupon-productdetail { clear:both; overflow:hidden; padding:50px 0;} .xans-coupon-productdetail > .title { position:relative; } .xans-coupon-productdetail > .title .button { position:absolute; top:0px; left:50%; margin-left:-52px; padding:0 0; } .xans-coupon-productdetail .couponSkinArea { padding:50px 0 0; text-align:center; } .xans-coupon-productdetail .couponSkinArea ul { zoom:1; margin:0 auto; padding:0; } .xans-coupon-productdetail .couponSkinArea ul:after { content:""; display:block; clear:both; } .xans-coupon-productdetail .couponSkinArea ul li { display:inline; float:left; width:216px; padding:0; list-style:none; } .xans-coupon-productdetail .couponSkinArea ul.grid1 { width:216px; } .xans-coupon-productdetail .couponSkinArea ul.grid2 { width:840px; } .xans-coupon-productdetail .couponSkinArea ul.grid2 li { margin:0 10px; width:400px;} .xans-coupon-productdetail .couponSkinArea ul.grid3 { width:708px; } .xans-coupon-productdetail .couponSkinArea ul.grid3 li { margin:0 10px; } .xans-coupon-productdetail .couponSkinArea .coupon { width:216px; height:105px; margin-bottom:20px; font-size:12px; line-height:1.5; text-align:center; background-repeat:no-repeat; } .xans-coupon-productdetail .couponSkinArea .coupon img { border:0; } .xans-coupon-productdetail .couponSkinArea .coupon p { margin:0; padding:0; } .xans-coupon-productdetail .couponSkinArea .coupon .title { display:block; padding:8px 0 0; font-size:10px; line-height:15px; text-align:center; font-weight:normal; font-family: 'S-Core' !IMPORTANT} .xans-coupon-productdetail .couponSkinArea .coupon .discount { font-size:18px; line-height:28px; font-weight:600; text-align:center; text-decoration:none; letter-spacing:-1px; text-decoration:none; } .xans-coupon-productdetail .couponSkinArea .coupon .discount span { font-size:18px; font-family: 'S-Core' !IMPORTANT} .xans-coupon-productdetail .couponSkinArea .coupon .period { font-size:12px; line-height:17px; font-weight:400; text-align:center; letter-spacing:-1px; font-family: 'S-Core' !IMPORTANT;} .xans-coupon-productdetail .couponSkinArea .coupon .button { margin:5px 0 0; text-align:center; } .xans-coupon-productdetail .couponSkinArea .imgCoupon .title, .xans-coupon-productdetail .couponSkinArea .imgCoupon .discount, .xans-coupon-productdetail .couponSkinArea .imgCoupon .period, .xans-coupon-productdetail .couponSkinArea .imgCoupon .button { display:none; } .xans-coupon-productdetail .couponSkinArea .imgCoupon .detail { height:100%; } /* 쿠폰정보 레이어 */ #dCouponDetail { overflow:hidden; position:relative; width:398px; border:1px solid #e9e9e9; background:#fff; box-shadow:5px 5px 5px #d3d3d3; } #dCouponDetail h3 { height:35px; padding:0 35px 0 19px; color:#fff; font-size:14px; line-height:35px; background:#33353d; } #dCouponDetail h3 + a { position:absolute; right:20px; top:10px; } #dCouponDetail ul { padding:16px 10px 17px 20px; margin:25px 19px; background:#fbfbfb; } #dCouponDetail ul li { margin:7px 0 0; color:#2e2e2e; line-height:18px; } #dCouponDetail ul li:first-child { margin-top:0; } #dCouponDetail ul + a { display:block; padding:12px 0; text-align:center; border-top:1px solid #e9e9e9; background:#fbfbfb; } @charset "utf-8"; /* **************************** 폰트적용 **************************** */ @font-face { font-family: 'S-Core'; font-weight:100; src: url("//lifeggook.com/han/font/S-CoreDream-1Thin.woff") format('woff'); } @font-face { font-family: 'S-Core'; font-weight:200; src: url("//lifeggook.com/han/font/S-CoreDream-2ExtraLight.woff") format('woff'); } @font-face { font-family: 'S-Core'; font-weight:300; src: url("//lifeggook.com/han/font/S-CoreDream-3Light.woff") format('woff'); } @font-face { font-family: 'S-Core'; font-weight:400; src: url("//lifeggook.com/han/font/S-CoreDream-4Regular.woff") format('woff'); } @font-face { font-family: 'S-Core'; font-weight:500; src: url("//lifeggook.com/han/font/S-CoreDream-5Medium.woff") format('woff'); } @font-face { font-family: 'S-Core'; font-weight:600; src: url("//lifeggook.com/han/font/S-CoreDream-6Bold.woff") format('woff'); } @font-face { font-family: 'S-Core'; font-weight:700; src: url("//lifeggook.com/han/font/S-CoreDream-7ExtraBold.woff") format('woff'); } @font-face { font-family: 'S-Core'; font-weight:800; src: url("//lifeggook.com/han/font/S-CoreDream-8Heavy.woff") format('woff'); } @font-face { font-family: 'S-Core'; font-weight:900; src: url("//lifeggook.com/han/font/S-CoreDream-9Black.woff") format('woff'); } /* **************************** //필수 CSS 수정 및 삭제 불가 **************************** */ /* tag reset */ html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,img { margin:0; padding:0; } html { width:100%; height:100%; } body,code { font:13px 'Oswald', 'S-Core' , 'Noto Sans KR', 'Nanum Gothic' , 'Malgun Gothic',Verdana,Dotum,AppleGothic,sans-serif; color:#868686; background:#fff; letter-spacing:0px; font-weight:400; } body { min-width:1250px; } body#popup { min-width:0; } li { list-style:none; } img,fieldset { border:none; vertical-align:top; } table { width:100%; border:0; border-spacing:0; border-collapse:collapse; } caption { display:none; } th,td { border:0; vertical-align:top; } button { overflow:visible; padding:0; margin:0; border:0; cursor:pointer; } hr.layout { display:none; } a { text-decoration:none; color:#000; } a:hover { text-decoration:underline; } a:active { text-decoration:none; } .objHidden { visibility:hidden; position:absolute; left:-1000px; top:-1000px; height:0; width:0; } #content_CONTAINER table, #bi_inquire_content_CONTAINER table { border:0; margin:0 0 -1px; } #content_CONTAINER table:before, #bi_inquire_content_CONTAINER table:before { display:none; } #content_CONTAINER td, #bi_inquire_content_CONTAINER td { width:auto !important; padding:0; } table.nneditor-table { width:auto !important; } /* 결제진행바 */ #progressPaybarBackground { position:absolute; z-index:99; left:0; top:0; width:100%; height:100%; } #progressPaybarView { position:absolute; z-index:100; top:160px; left:20px; width:471px; font-size:12px; } #progressPaybarView .box { height:180px; background:url(//img.cafe24.com/images/ec_hosting/popup/layer_guide/bg_layer_box1.gif) 0 0 no-repeat; } #progressPaybarView .box .graph { padding:15px 0 0 0; text-align:center;} #progressPaybarView .box .graph span { display:block; text-align:center; margin:20px 0; } #progressPaybarView .box .txt { text-align:center; padding:15px 0 0; color:#555555; } div.layerProgress { filter:alpha(opacity=40); opacity:0.4; -moz-opacity:0.4; background-color:#999; } /* contents */ #skipNavigation {position:absolute; top:0; left:0; z-index:100; width:100%; height:0;} #skipNavigation p, #skipNavigation ul, #skipNavigation ul li {height:0;} #skipNavigation p a {position:absolute; left:0; top:0; display:block; overflow:hidden; width:1px; height:1px; margin-left:-1px; margin-bottom:-1px; text-align:center; color:#000; white-space:nowrap;} #skipNavigation p a:focus, #skipNavigation p a:hover, #skipNavigation p a:active {width:100%; height:auto; padding:10px 0; background:#c4122f; color:#fff; z-index:100;} .displaynone { display:none; } .dimmed { position:fixed; top:0; left:0; z-index:99; width:100%; height:100%; background:#fff; opacity:0.8; filter:alpha(opacity=80); } /* **************************** 필수 CSS 수정 및 삭제 불가 **************************** */ @charset "utf-8"; .allwarp { overflow:hidden; } /* 탐색경로바 */ .path { position:relative; overflow:hidden; height:30px; line-height:30px; *zoom:1; } .path span { overflow:hidden; position:absolute; width:0; height:0; white-space:nowrap; text-indent:100%; } .path ol { float:right; } .path li { float:left; padding:0 0 0 12px; margin:0 0 0 8px; color:#757575; background:url("//img.echosting.cafe24.com/skin/base/layout/ico_path.gif") no-repeat 0 10px; } .path li:first-child { background:none; } .path li a { position:relative; color:#757575; text-decoration:none;} .path li:hover a { color:#111; } .path li strong, .path li strong a { color:#2e2e2e; font-weight:500; } .path li > a:after { content : ""; position:absolute; left:-2px; bottom:0px; width:0%; height:8px; background:#fdf048; z-index:-1; } .path li:hover > a:after { width:100%; padding:0 2px; transition: all 0.3s ease 0s; } /* 타이틀 */ .titleArea { min-height:35px; margin:30px 0 20px; border-bottom:2px dotted #ccc; } .titleArea h2 { display:inline-block; color:#2e2e2e; font-weight:500; font-size:25px; *display:inline;} .titleArea p { display:inline-block; position:relative; margin:0 0 0 6px; padding:0 0 0 10px; color:#939393; *display:inline; } .titleArea p:before { display:inline-block; position:absolute; top:0; left:0; content:""; width:1px; height:13px; border-left:1px solid #d9d9d9; } .titleArea ul { padding:5px 0; color:#939393; line-height:18px; } .titleArea ul li { position:relative; padding:0 0 0 9px; } .titleArea ul li:before { display:block; position: absolute; top:50%; left:0; content:""; width:2px; height:2px; margin:-2px 0 0 0; background:#939393; } /* 퀵뷰 모달 */ #modalBackpanel { display:none; position:absolute; top:0; left:0; z-index:10000; width:100%; height:100%; background:#000; } #modalContainer { display:none; position:absolute; top:100px; left:100px; z-index:10001; width:975px; height:720px; border:1px solid #333; background:#fff; } #modalContainer #modalContent { width:100%; height:100%; } .baloon_add { position:absolute; top:30px; left:50%; margin-left: -30px; z-index:10; width:60px; height:30px; line-height:12px; border-radius:2px; text-align:center; background:#ae00ff; color:#fff; padding-top:4px;} /* Font */ .txtInfo { color:#707070; } .txtWarn { color:#777; } .txtEm { color:#aa0000; } .txtDel, .strike, .discount { text-decoration:line-through; font-weight:normal; } .strike strong, .discount strong { font-weight:normal; } .txtNormal { font-weight:normal; font-style:normal; } .txtNum { display:inline-block; font-size:11px; color:#939393; word-break:normal; } .txt11 { font-size:11px; } .txt12 { font-size:12px; } .txt14 { font-size:14px; } .txt16 { font-size:16px; } .txt18 { font-size:18px; letter-spacing:-1px; } .txtIcon { font-size:12px; font-style:normal; } .txtBreak { word-break:break-all; word-wrap:break-word; } /* JP, TW, CN */ html:lang(ja) .txt11, html:lang(zh) .txt11, html:lang(zh-tw) .txt11 { font-size:12px; } /* grid */ .gBlank5 { display:block; margin-top:5px; } .gBlank10 { display:block; margin-top:10px; } .gBlank20 { display:block; margin-top:20px; } .gBlank30 { display:block; margin-top:30px; } .gIndent10 { margin-left:10px; } .gIndent20 { margin-left:20px; } .gSpace10 { margin-right:10px; } .gSpace20 { margin-right:20px; } .gMerge { position:relative; z-index:1; margin-top:-1px; } /* ec-base-qty */ .ec-base-qty { position:relative; display:inline-block; width:50px; margin:0 1px 0 0; text-align:left; } .ec-base-qty input[type="text"] { width:22px; height:23px; padding:0 0 0 5px; line-height:25px; border:1px solid #e9e9e9; border-radius:3px 0 0 3px; } .ec-base-qty .up { position:absolute; left:27px; top:0; } .ec-base-qty .down { position:absolute; left:27px; bottom:0; } /* ec-base-chk */ .ec-base-chk { display:inline-block; position:relative; margin:0 8px 0 0; width:22px; height:22px; vertical-align:top; cursor:pointer; } .ec-base-chk input { z-index:1; position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; cursor:pointer; } .ec-base-chk .checkbox { position:absolute; top:0; left:0; width:100%; height:100%; background:url("//img.echosting.cafe24.com/skin/base/common/bg_join_check.png") no-repeat 0 0; } .ec-base-chk input:checked + .checkbox { background-position:-34px 0; } /* Form */ input,select,textarea { font-size:100%; color:#353535; vertical-align:middle; } input[type=radio], input[type=checkbox] { width:13px; height:13px; border:0; } input[type=text], input[type=password] { height:30px; line-height:32px; padding:2px 4px; border:1px solid #e9e9e9; color:#353535; font-size:12px; } input[type=radio] + label, input[type=checkbox] + label { margin:0 4px 0 2px; } /* 셀렉트박스 */ select::-ms-expand { display: none; } select { width: 200px; /* 원하는 너비설정 */ height:36px !important; border:1px solid #e9e9e9; font-family: inherit; /* 폰트 상속 */ background: url("//lifeggook.com/han/images/comselbtn.png") no-repeat 100% 50%; /* 네이티브 화살표 대체 */ border-radius: 0px; /* iOS 둥근모서리 제거 */ -webkit-appearance: none; /* 네이티브 외형 감추기 */ -moz-appearance: none; appearance: none; padding-left:10px; } textarea { padding:5px 6px; border:1px solid #e9e9e9; line-height:1.5; } input:-ms-input-placeholder, textarea:-ms-input-placeholder { color:#c1c1c1; } input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color:#c1c1c1; } input::-moz-placeholder, textarea::-moz-placeholder { color:#c1c1c1; opacity:1; } legend { visibility:hidden; position:absolute; left:-9999px; top:-9999px; width:0; height:0; line-height:0; } table tr.radioType input, span.noBorder input { border:none !important; width:auto !important; height:auto !important; margin:0 3px 0 0 !important; vertical-align:middle !important; background:none !important; } .gLabel { display:inline-block; } .gLabel label { margin-right:20px; line-height:22px; } .fWidthFull input[type=text] { width:100%; height:24px; -webkit-box-sizing:border-box; -moz-webkit-box:border-box; box-sizing:border-box; } .fWidthFull textarea { width:100%; -webkit-box-sizing:border-box; -moz-webkit-box:border-box; box-sizing:border-box; } .fList.typeHor .gLabel { margin-right:20px; } .fList.typeVer .gLabel { display:block; } .ec-base-tooltip { display:none; z-index:2; position:absolute; top:24px; padding:15px; border:1px solid #565960; background:#fff; -webkit-box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.15); -moz-box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.15); box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.15); } .ec-base-tooltip h3 { margin:0 0 8px; padding:0 10px; font-size:12px; border-bottom:0; background:url("//img.echosting.cafe24.com/skin/base/common/ico_layer_title.gif") no-repeat 0 50%; } .ec-base-tooltip h3 + p { margin:0 5px 10px; } .ec-base-tooltip h4 { margin:15px 10px 8px 5px; font-size:12px; } .ec-base-tooltip h4:before { display:inline-block; content:""; margin:0 5px 0 0; width:3px; height:3px; background:#666; vertical-align:middle; } .ec-base-tooltip .btnClose { position:absolute; right:14px; top:14px; } .ec-base-tooltip .edge { z-index:20; position:absolute; left:50%; top:-6px; display:block; margin:0 0 0 -5px; width:10px; height:6px; } .ec-base-tooltip .edge:before, .ec-base-tooltip .edge:after { display:inline-block; content:""; position:absolute; top:0; width:0; height:0; border:solid transparent; } .ec-base-tooltip .edge:before { margin:1px 0 0; border-bottom-color:#565960; border-width:0 5px 5px 5px; } .ec-base-tooltip .edge:after { left:1px; margin:2px 0 0; border-bottom-color:#fff; border-width:0 4px 4px 4px; } .ec-base-tooltip table th, .ec-base-tooltip table td { padding:8px 10px 7px 10px; border:1px solid #e8e8e8; line-height:1.5em; } .ec-base-tooltip table th { padding-right:0; background:#fbf9fa; } .ec-base-tooltip table thead th { text-align:center; } .ec-base-tooltip table tbody th { text-align:left; } .ec-base-tooltip table .left { text-align:left; } .ec-base-tooltip table .center { text-align:center; } .ec-base-tooltip table .right { text-align:right; } .ec-base-tooltip table .info { padding:0; color:#757575; } .ec-base-tooltip table p.info:before, .ec-base-tooltip table ul.info li:before { display:inline-block; content:""; margin:0 3px 0 0; width:4px; height:1px; background:#757575; vertical-align:middle; } .ec-base-tooltip .info { padding:10px 10px 0; margin:5px 0 0; } .ec-base-tooltip p.bullet, .ec-base-tooltip ul.bullet { margin:8px 10px; } .ec-base-tooltip p.bullet:before, .ec-base-tooltip ul.bullet li:before { display:inline-block; content:""; margin:-3px 3px 0 0; width:0; height:0; border:solid transparent; border-left-color:#333; border-width:2px 0 2px 2px; vertical-align:middle; } .ec-base-tooltip ul.bullet li { line-height:1.5em; } .ec-base-tooltip .txtEm { color:#008bcc; } .ec-base-tooltip .txtWarn { color:#f65b54; } /* typeUpper */ .ec-base-tooltip.typeUpper { top:auto; bottom:34px; } .ec-base-tooltip.typeUpper .edge { top:auto; bottom:-6px; } .ec-base-tooltip.typeUpper .edge:before { margin:0 0 -5px; border-top-color:#565960; border-width:5px 5px 0 5px; } .ec-base-tooltip.typeUpper .edge:after { left:1px; margin:0 0 -4px; border-top-color:#fff; border-width:4px 4px 0 4px; } span.ec-base-help, p.ec-base-help, ul.ec-base-help li { margin:2px 9px; padding:1px 0 1px 20px; line-height:1.4; background:url('//img.echosting.cafe24.com/skin/base/common/ico_info.gif') no-repeat 0 2px; } div.ec-base-help { margin:20px 0; border:1px solid #e9e9e9; line-height:18px; } div.ec-base-help > h2, div.ec-base-help > h3 { padding:19px 0 16px 10px; border-bottom:1px solid #e9e9e9; color:#101010; font-size:14px; background:#fbfbfb; } div.ec-base-help .inner { padding:0 9px 12px; } div.ec-base-help h4 { margin:22px 0 -4px; color:#999; font-size:12px; font-weight:normal; } div.ec-base-help h4:first-child { margin-top:13px; } div.ec-base-help p { margin:15px 0 0 10px; color:#999; } div.ec-base-help ul, div.ec-base-help ol { margin:15px 0 0 11px; } div.ec-base-help li { color:#999; } /* number */ div.ec-base-help ol li { padding:0 0 0 25px; background:url('//img.echosting.cafe24.com/skin/base/common/ico_number.png') no-repeat; } div.ec-base-help ol .item1 { background-position:-484px 0; } div.ec-base-help ol .item2 { background-position:-434px -100px; } div.ec-base-help ol .item3 { background-position:-384px -200px; } div.ec-base-help ol .item4 { background-position:-334px -300px; } div.ec-base-help ol .item5 { background-position:-284px -400px; } div.ec-base-help ol .item6 { background-position:-234px -500px; } div.ec-base-help ol .item7 { background-position:-184px -600px; } div.ec-base-help ol .item8 { background-position:-134px -700px; } div.ec-base-help ol .item9 { background-position:-84px -800px; } div.ec-base-help ol .item10 { background-position:-34px -900px; } /* typeDash */ div.ec-base-help ul li { padding:0 0 0 11px; background:url('//img.echosting.cafe24.com/skin/base/common/ico_dash.gif') no-repeat 0 7px; } .ec-base-help.typeDash li { padding:0 0 0 11px; background:url("//img.echosting.cafe24.com/skin/base/common/ico_dash.gif") no-repeat 0 7px; } .ec-base-tooltip .ec-base-help.typeDash li { margin:2px 0; } .ec-base-paginate { margin:30px 0; text-align:center; font-size:0; line-height:0; } .ec-base-paginate ol { display:inline-block; font-size:0; line-height:0; vertical-align:top; *display:inline; *zoom:1; *margin:0; } .ec-base-paginate li { display:inline-block; margin:0 0 0 -1px; border:1px solid #e9e9e9; font-size:12px; color:#33353d; vertical-align:top; *display:inline; *zoom:1; } .ec-base-paginate li:first-child { margin-left:0; } .ec-base-paginate img { vertical-align:top; opacity:.6; } .ec-base-paginate li a { display:block; width:33px; padding:9px 0; font-weight:bold; color:#939393; line-height:14px; background:#fff; } .ec-base-paginate li a:hover { text-decoration:none; background:#fbfbfb; } .ec-base-paginate li a.this { padding-bottom:6px; border-bottom:3px solid #33353d; color:#495164; } .ec-base-paginate a.nolink { cursor:default; } /* typeSub */ .ec-base-paginate.typeSub ol { margin:0 15px; vertical-align:middle; } .ec-base-paginate.typeSub li { font-size:12px; border:0; } .ec-base-paginate.typeSub img { vertical-align:middle; } .ec-base-paginate.typeSub li a { width:auto; margin:0 5px 0; padding:2px; color:#353535; background:none; } .ec-base-paginate.typeSub li a.this { color:#008bcc; text-decoration:underline; border:0; } .ec-base-paginate.typeSub .first { margin-right:3px; } .ec-base-paginate.typeSub .last { margin-left:3px; } .ec-base-tab { position:relative; } .ec-base-tab .menu { margin:50px 0 20px; background:#fff; border-top:0px dotted #ccc; border-bottom:1px solid #e9e9e9; height:57px; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; } .ec-base-tab .menu:after { content:""; display:block; clear:both; } .ec-base-tab .menu li { float:left; height:45px; line-height:45px; background:#fbfbfb; border:1px solid #e9e9e9; border-left:0; border-bottom:0; margin-top:10px; } .ec-base-tab .menu li a { display:block; min-width:190px; height:45px; padding:0 20px; color:#707070; text-decoration:none; outline:0; text-align:center; font-size:13px; } .ec-base-tab .menu li:first-child { border-left:1px solid #e9e9e9; } .ec-base-tab .menu li:hover a { color:#111; } .ec-base-tab .menu li.selected { background:#fff; height:56px; line-height:55px; margin-top:0px; border-radius:13px 13px 0 0; } .ec-base-tab .menu li.selected a { position:relative; color:#111; font-size:16px; font-weight:500; } .ec-base-tab > .right { position:absolute; top:8px; right:10px; line-height:24px; color:#909090; } /* grid (2~7) */ .ec-base-tab[class*="grid"] .menu { display:table; table-layout:fixed; width:100%; } .ec-base-tab[class*="grid"] .menu li { float:none; display:table-cell; vertical-align:middle; } .ec-base-tab[class*="grid"] .menu li a { display:inline-block; width:100%; min-width:0; margin:0; padding:11px 0; border:0; } .ec-base-tab[class*="grid"] .menu li.selected { position:relative; top:0; right:-1px; border:1px solid #292929; border-bottom:0; background:#33353d; } .ec-base-tab[class*="grid"] .menu li:first-child.selected { right:0; } .ec-base-tab[class*="grid"] .menu li.selected a { position:static; background:none; } .ec-base-tab.grid2 .menu li { width:50.5%; } .ec-base-tab.grid3 .menu li { width:34%; } .ec-base-tab.grid4 .menu li { width:25.5%; } .ec-base-tab.grid5 .menu li { width:20.5%; } .ec-base-tab.grid6 .menu li { width:17%; } .ec-base-tab.grid7 .menu li { width:14.8%; width:15% \0/; } .ec-base-tab.grid7 .menu li:first-child { width:13% \0/; } /* button */ [class^='btnNormal'], a[class^='btnNormal'] { display:inline-block; box-sizing:border-box; padding:2px 8px; border:1px solid #ddd; border-radius:0px; font-size:11px; line-height:18px; font-weight:normal; text-decoration:none; vertical-align:middle; word-spacing:-0.5px; letter-spacing:0; text-align:center; white-space:nowrap; color:#222; background: #f7f7f7; -webkit-box-shadow: 0.5px 1px 1px -1px rgba(133,133,133,1); -moz-box-shadow: 0.5px 1px 1px -1px rgba(133,133,133,1); box-shadow: 0.5px 1px 1px -1px rgba(133,133,133,1); } [class^='btnNormal2'], a[class^='btnNormal2'] { display:inline-block; box-sizing:border-box; padding:2px 18px; border:1px solid #ddd; border-radius:0px; font-size:11px; line-height:30px; font-weight:normal; text-decoration:none; vertical-align:middle; word-spacing:-0.5px; letter-spacing:0; text-align:center; white-space:nowrap; color:#222; background: #f7f7f7; -webkit-box-shadow: 0.5px 1px 1px -1px rgba(133,133,133,1); -moz-box-shadow: 0.5px 1px 1px -1px rgba(133,133,133,1); box-shadow: 0.5px 1px 1px -1px rgba(133,133,133,1); } [class^='btnSubmit'], a[class^='btnSubmit'] { display:inline-block; box-sizing:border-box; padding:2px 8px; border:1px solid #666; border-radius:0px; font-size:12px; line-height:18px; font-weight:normal; text-decoration:none; vertical-align:middle; word-spacing:-0.5px; letter-spacing:0; text-align:center; white-space:nowrap; background: #0e0e0e; } [class^='btnEm'], a[class^='btnEm'] { display:inline-block; box-sizing:border-box; padding:2px 8px; border:1px solid #828c95; border-radius:0px; font-size:12px; line-height:18px; font-weight:normal; text-decoration:none; vertical-align:middle; word-spacing:-0.5px; letter-spacing:0; text-align:center; white-space:nowrap; color:#fff; background-color:#84868b; } [class^='btnBasic'], a[class^='btnBasic'] { display:inline-block; box-sizing:border-box; padding:2px 8px; border:1px solid #e9e9e9; border-radius:0px; font-size:12px; line-height:18px; font-weight:normal; text-decoration:none; vertical-align:middle; word-spacing:-0.5px; letter-spacing:0; text-align:center; white-space:nowrap; color:#222; background-color:#f0f0f0; } [class^='btnNormal']:not(.disabled):hover, [class^='btnNormal2']:not(.disabled):hover { background: #f7f7f7; } [class^='btnSubmit']:not(.disabled):hover { background: #7d7e7d; } [class^='btnEm']:not(.disabled):hover { background-color:#77797d; } [class^='btnBasic']:not(.disabled):hover { background-color:#e5e5e5; } [class^='btnNormal'].disabled { border-color:#e3e3e3; color:#999; } [class^='btnSubmit'].disabled { background-color:#9297a2; color:#f0f0f0; } [class^='btnEm'].disabled { background-color:#b5b6b9; color:#f0f0f0; } [class^='btnBasic'].disabled { color:#999; } /* size */ [class^='btn'].sizeS { padding:6px 8px; } [class^='btn'].sizeM { padding:10px 16px; } [class^='btn'].sizeL { padding:14px 16px; min-width:80px; font-weight:bold; } /* width Fix */ [class^='btn'][class*='Fix'] { width:72px; word-break:keep-all; word-wrap:break-word; } [class^='btn'][class*='Fix'].sizeS { width:96px; } [class^='btn'][class*='Fix'].sizeM { width:120px; padding-left:8px; padding-right:8px; } [class^='btn'][class*='Fix'].sizeL { width:160px; padding-left:8px; padding-right:8px; } /* icon button */ a.btnLink { color:#222; } a.btnLink:hover { text-decoration:none; -webkit-box-shadow:0 1px 0 0 #222; -moz-box-shadow:0 1px 0 0 #222; box-shadow:0 1px 0 0 #222; } a.btnLink:after { content:""; display:inline-block; margin:-2px -2px 0 3px; vertical-align:middle; border:0 0 0 10px; border-style:solid; border-color:transparent transparent transparent #77797d; } [class^='btn'] i { display:none \0/IE8; } [class^='btn'] .icoArrow { display:inline-block; width:3px; height:3px; margin:-2px 1px 0 1px; border:2px solid #77797d; border-width:0 2px 2px 0; vertical-align:middle; transform:rotate(-45deg); -webkit-transform: rotate(-45deg); -moz-transform:rotate(-45deg); -ms-transform:rotate(-45deg); -o-transform:rotate(-45deg); } [class^='btnSubmit'] .icoArrow, [class^='btnEm'] .icoArrow { border-color:#f0f0f0; } [class^='btn'] .icoDelete { position:relative; overflow:hidden; display:inline-block; width:10px; height:10px; margin:-2px 2px 0 0; vertical-align:middle; -webkit-transform:rotate(45deg); transform:rotate(45deg); } [class^='btn'] .icoDelete:before { content:""; position:absolute; top:0; right:4px; width:2px; height:10px; background:#77797d; } [class^='btn'] .icoDelete:after { content:""; position:absolute; top:4px; right:0; width:10px; height:2px; background:#77797d; } [class^='btnSubmit'] .icoDelete:before, [class^='btnSubmit'] .icoDelete:after, [class^='btnEm'] .icoDelete:before, [class^='btnEm'] .icoDelete:after { background:#f0f0f0; } [class^='btn'] .icoAdd, [class^='btn'] .icoRemove { position:relative; overflow:hidden; display:inline-block; width:8px; height:8px; margin:-2px 2px 0 0; vertical-align:middle; } [class^='btn'] .icoAdd:before, [class^='btn'] .icoAdd:after, [class^='btn'] .icoRemove:before { content:""; position:absolute; top:50%; left:50%; width:8px; height:8px; border-radius:2px; background:#77797d; } [class^='btn'] .icoAdd:before, [class^='btn'] .icoRemove:before { height:2px; margin:-1px 0 0 -4px; } [class^='btn'] .icoAdd:after { width:2px; margin:-4px 0 0 -1px; } [class^='btn'] img { margin:-2px 1px 0; vertical-align:middle; } /* unique */ .btnLogin, a.btnLogin { display:inline-block; box-sizing:border-box; width:100px; height:70px; line-height:70px; border-radius:2px; text-align:center; font-size:12px; font-weight:bold; text-decoration:none; color:#fff; background-color:#4a5164; } .btnLogin:hover { background-color:#43495a; } .btnAgree, a.btnAgree { display:inline-block; box-sizing:border-box; width:80px; height:70px; line-height:70px; border:1px solid #d1d1d1; border-radius:2px; text-align:center; font-size:12px; font-weight:bold; color:#222; text-decoration:none; background-color:#fff; } .btnAgree:hover { background-color:#f3f3f3; } .btnToggle { display:inline-block; font-size:0; line-height:0; } .btnToggle button { display:inline-block; box-sizing:border-box; border:1px solid #d1d1d1; margin:0 -1px 0 0; padding:0 7px; height:24px; line-height:24px; text-align:center; font-size:12px; outline:0; text-decoration:none; color:#222; background:#fff; } .btnToggle button:first-child { border-radius:2px 0 0 2px; } .btnToggle button:last-child { border-radius:0 2px 2px 0; } .btnToggle button.selected { position:relative; border:1px solid #84868b; color:#fff; background:#84868b; } /* ec-base-button */ .ec-base-button { padding:10px 0; text-align:center; } .ec-base-button.justify { position:relative; } .ec-base-button:after { display:block; content:""; clear:both; } .ec-base-button .gLeft { float:left; text-align:left; } .ec-base-button .gRight { float:right; text-align:right; } .ec-base-button.justify .gLeft { position:absolute; left:0; } .ec-base-button.justify .gRight { position:absolute; right:0; } .ec-base-button .text { margin:0 6px 0 10px; color:#353535; line-height:24px; } /* type */ .ec-base-button.typeBorder { margin-top:-1px; padding:10px 20px; border:1px solid #e9e9e9; } .ec-base-button.typeBG { padding:10px 20px; border:1px solid #e9e9e9; background:#fbfafa; } /* gColumn */ .ec-base-button[class*="gColumn"] { margin:0 auto; display:-webkit-flex; display:-moz-flex; display:-ms-flex; display:flex; -webkit-justify-content:center; -moz-justify-content:center; -ms-justify-content:center; justify-content:center; } .ec-base-button[class*="gColumn"]:after { display:none; } .ec-base-button[class*="gColumn"] [class^='btn'] { margin:0 2px; padding-left:8px; padding-right:8px; word-break:keep-all; word-wrap:break-word; white-space:normal; -webkit-flex:1; -moz-flex:1; -ms-flex:1; flex:1; display:-webkit-flex; display:-moz-flex; display:-ms-flex; display:flex; -webkit-align-items:center; -moz-align-items:center; -ms-align-items:center; align-items:center; -webkit-justify-content:center; -moz-justify-content:center; -ms-justify-content:center; justify-content:center; } .ec-base-button[class*="gColumn"] [class^='btn'][class*='Fix'] { -webkit-flex:none; -moz-flex:none; -ms-flex:none; flex:none; } /* gFlex */ .ec-base-button[class*="gColumn"] .gFlex2 { -webkit-flex:2; -moz-flex:2; -ms-flex:2; flex:2; } .ec-base-button[class*="gColumn"] .gFlex3 { -webkit-flex:3; -moz-flex:3; -ms-flex:3; flex:3; } .ec-base-button[class*="gColumn"] .gFlex4 { -webkit-flex:4; -moz-flex:4; -ms-flex:4; flex:4; } /* base */ .ec-base-box { padding:20px; margin-left:auto; margin-right:auto; border:5px solid #e9e9e9; color:#33353d; } .ec-base-box.gHalf { position:relative; padding:20px 0; } .ec-base-box.gHalf:before { position:absolute; top:0; left:50%; display:block; content:""; width:1px; height:100%; background-color:#e6e6e6; } .ec-base-box.typeBg { background-color:#fbfafa; } .ec-base-box.typeThin { border-width:1px; border-color:#e9e9e9; } .ec-base-box.typeThin h3.boxTitle { margin:0 0 20px; font-size:20px; text-align:center; } .ec-base-box.typeThinBg { border-width:1px; border-color:#e9e9e9; background-color:#fbfafa; } .ec-base-box.center { text-align:center; } /* 약관 */ .ec-base-box.typeThinBg > .agree { padding:20px; border:1px solid #e9e9e9; background:#fff; } .ec-base-box.typeThinBg > .agree p { padding:0 0 17px; } /* typeMember */ .ec-base-box.typeMember { padding:30px ; } .ec-base-box.typeMember .information { display:table; table-layout:fixed; padding:10px 0; width:100%; box-sizing:border-box; } .ec-base-box.typeMember .information > .title, .ec-base-box.typeMember .information > .thumbnail { display:table-cell; padding:0 15px; width:70px; text-align:center; vertical-align:middle; } .ec-base-box.typeMember .information > .title { vertical-align:middle; } .ec-base-box.typeMember .information > .thumbnail img { max-width:70px; } .ec-base-box.typeMember .information .description { display:table-cell; padding:0 10px; width:auto; line-height:1.5em; border-left:1px solid #e9e9e9; vertical-align:middle; } .ec-base-box.typeMember.gMessage { border-width:1px; border-color:#e9e9e9; } .ec-base-box .message { display:block; padding:10px 0 10px 35px; border-bottom:1px solid #e9e9e9; background:#fbfbfb url("//img.echosting.cafe24.com/skin/base/common/ico_info.gif") no-repeat 10px center; } /* typeProduct */ .ec-base-box.typeProduct { display:table; table-layout:fixed; padding:15px 0; width:100%; box-sizing:border-box; } .ec-base-box.typeProduct .thumbnail, .ec-base-box.typeProduct .information { display:table-cell; padding:0 20px; vertical-align:middle; } .ec-base-box.typeProduct .thumbnail { width:100px; } .ec-base-box.typeProduct .thumbnail img { max-width:90px; border:1px solid #e9e9e9; } .ec-base-box.typeProduct .information { padding-left:0; } .ec-base-table table { position:relative; margin:0 0 0; border:1px solid #e9e9e9; border-top:0; color:#fff; line-height:1.5; } .ec-base-table.gLayoutFixed table { table-layout:fixed; } .ec-base-table.gLayoutFixed .gLayoutAuto table { table-layout:auto; } .ec-base-table table:before { position:absolute; top:0; left:0; display:block; content:""; width:100%; height:1px; background:#d7d5d5; } .ec-base-table thead th { padding:16px 0 15px; border-left:1px solid #e9e9e9; border-bottom:0px solid #e9e9e9; color:#111; vertical-align:middle; font-weight:normal; background:#fbfafa; } .ec-base-table tbody th { padding:16px 0 15px 18px; border:1px solid #e9e9e9; border-bottom-width:0; color:#111; text-align:left; font-weight:normal; background-color:#fbfafa; } .ec-base-table th { word-break:break-all; word-wrap:break-word; } .ec-base-table th:first-child { border-left:0; } .ec-base-table td { padding:16px 10px 15px; border-top:1px solid #e9e9e9; color:#353535; vertical-align:middle; word-break:break-all; word-wrap:break-word; } .ec-base-table td.clear { padding:0 !important; border:0 !important; } /* horizontal */ /* typeWrite */ .ec-base-table.typeWrite td { padding:13px 10px 12px; } .ec-base-table.typeWrite img { max-width:100% !important; height:auto !important; } /* vertical */ /* typeList */ .ec-base-table.typeList table { border:1px solid #e9e9e9; } .ec-base-table.typeList table:before { display:none; } .ec-base-table.typeList td { padding:18px 10px 17px; } .ec-base-table.typeList tfoot td { padding:15px 10px 17px; background:#fbfbfb; } .ec-base-table .message { border:1px solid #e9e9e9; padding:50px 0; text-align:center; color:#757575; font-weight:bold; } .ec-base-table table + .message { margin:-1px 0 0; } .ec-base-table table td.message { padding:50px 0; } .ec-base-table .scroll .message { border:0; } /* scroll */ .ec-base-table.typeList .head td { padding:11px 0 10px; border-left:1px solid #dfdfdf; border-bottom:1px solid #dfdfdf; color:#353535; vertical-align:middle; text-align:center; background:#fbfafa; } .ec-base-table.typeList .head td:first-child { border-left:0; } .ec-base-table.typeList .scroll { position:relative; overflow-x:hidden; overflow-y:scroll; max-height:185px; min-height:100px; border:1px solid #d7d5d5; border-top-width:0; margin-top:-1px; } .ec-base-table.typeList .scroll table { border:0; margin:0; } .ec-base-table.typeList .scroll table:before { display:none; } .ec-base-table.typeList .scroll .message { border: 0; } /* thead - blind */ .ec-base-table thead.blind, .ec-base-table thead.blind th { display:none; } .ec-base-table thead.blind + tbody tr:first-child th, .ec-base-table thead.blind + tbody tr:first-child td { border-top-width:0; } /* Line */ .ec-base-table.typeList.gLine table { border-width:0; border-bottom-width:1px; } /* common */ /* border, background style none */ .ec-base-table.typeClear table:before { display:none; } .ec-base-table.typeClear table, .ec-base-table.typeClear th, .ec-base-table.typeClear td { border:0 none; background:none; } .ec-base-table.typeClear th { font-weight:bold; } /* border */ .ec-base-table.gBorder td { border-left:1px solid #dfdfdf; } .ec-base-table.gBorder td:first-child { border-left:0; } .ec-base-table.gBorder td.gClearLine { border-left:0; } .ec-base-table.typeList.gBorder tbody td { border-color:#eee; } /* align */ .ec-base-table .left { text-align:left; } .ec-base-table .center { text-align:center; } .ec-base-table .right { text-align:right; } .ec-base-table.typeList .center td, .ec-base-table.typeList td.center { padding-left:0; padding-right:0; } .ec-base-table.typeList .center td.left { padding-left:10px; } .ec-base-table.typeList .center td.right { padding-right:10px; } .ec-base-table .top th, .ec-base-table th.top, .ec-base-table .top td, .ec-base-table td.top { vertical-align:top; } .ec-base-table .middle th, .ec-base-table th.middle, .ec-base-table .middle td, .ec-base-table td.middle { vertical-align:middle; } /* form */ .ec-base-table img { vertical-align:middle; } @media print { .ec-base-table table:before { display:none; } } .ec-base-desc { overflow:hidden; text-align:left; } .ec-base-desc:after { content:""; display:block; clear:both; } .ec-base-desc dt, .ec-base-desc .term { float:left; width:100px; margin:0 0 2px; padding:0 4px 0 0; line-height:22px;-webkit-box-sizing:border-box; -moz-webkit-box:border-box; box-sizing:border-box; font-weight:normal; } .ec-base-desc dd, .ec-base-desc .desc { display:block; margin:0 0 2px; padding:0 5px 0 100px; min-height:22px; line-height:22px; word-wrap:break-word; word-break:break-all; } .ec-base-desc dd:after, .ec-base-desc .desc:after { content:""; display:block; clear:left; } /* size */ .ec-base-desc.gSmall dt, .ec-base-desc.gSmall .term { width:30%; } .ec-base-desc.gSmall dd, .ec-base-desc.gSmall .desc { padding-left:30%; } .ec-base-desc.gMedium dt, .ec-base-desc.gMedium .term { width:40%; } .ec-base-desc.gMedium dd, .ec-base-desc.gMedium .desc { padding-left:40%; } .ec-base-desc.gLarge dt, .ec-base-desc.gLarge .term { width:50%; } .ec-base-desc.gLarge dd, .ec-base-desc.gLarge .desc { padding:0 0 0 50%; } /* align */ .ec-base-desc.centerDT dt, .ec-base-desc.centerDD dd, .ec-base-desc.centerDT .term, .ec-base-desc.centerDD .desc, .ec-base-desc.center, .ec-base-desc .center { text-align:center; } .ec-base-desc.rightDT dt, .ec-base-desc.rightDD dd, .ec-base-desc.rightDT .term, .ec-base-desc.rightDD .desc, .ec-base-desc.right, .ec-base-desc .right { text-align:right; } .ec-base-desc.rightDD dd, .ec-base-desc.rightDD .desc { padding-right:0; } /* typeBullet */ .ec-base-desc.typeBullet dt, .ec-base-desc.typeBullet .term { padding:0 4px 0 10px; background:url("//img.echosting.cafe24.com/skin/base/common/ico_arrow.png") no-repeat 0 7px; } /* typeDot */ .ec-base-desc.typeDot dt, .ec-base-desc.typeDot .term { position:relative; padding:0 4px 0 10px; } .ec-base-desc.typeDot dt:before, .ec-base-desc.typeDot .term:before { position:absolute; top:50%; left:0; content:""; display:block; width:2px; height:2px; margin:-2px 0 0 0; background:#383838; } .ec-base-product { margin:0; } .ec-base-product img { vertical-align:middle; } .ec-base-product .prdList { width:100%; margin:0; font-size:0; line-height:0; } .ec-base-product .prdList > li { position:relative; display:inline-block; color:#757575; vertical-align:top;} .ec-base-product .prdList > li.item:hover { z-index:40; } .ec-base-product .prdList .box { position:relative; } .ec-base-product .prdList .thumbnail { position:relative; margin:0; padding:2px; text-align:center; } .ec-base-product .prdList .thumbnail .prdImg { position:relative; border:0px solid; } .ec-base-product .prdList .thumbnail a img { width:100%; max-width:100%; box-sizing:border-box; border:1px solid #e9e9e9; border-radius:0; overflow:hidden; } .ec-base-product .grid2 .thumbnail { padding:0px; } .ec-base-product .grid2 .thumbnail .prdImg { border-right:1px solid #e9e9e9; } .ec-base-product .grid2 .thumbnail a img { outline:0px solid #e9e9e9; border:0px solid #e9e9e9; border-radius:0px; } .ec-base-product .prdList .thumbnail .wish { position:absolute; right:3px; bottom:4px; z-index:1; cursor:pointer; } /* 상품 체크박스 */ .ec-base-product ul.prdList .chk { position:absolute; z-index:31; top:8px; right:8px; opacity:.2; } .ec-base-product .prdList li.item:hover .chk { opacity:1; } /* grid */ .ec-base-product ul.grid2 { margin-top:1px; } .ec-base-product ul.grid2 > li { width:48%; margin:1% 1%; outline:1px solid #e9e9e9; background:#fff;} .ec-base-product ul.grid3 > li { width:31.33%; margin:1.5% 1% 3.5%; } .ec-base-product ul.grid4 > li { width:24%; margin:1.5% .5% 3.5%; } .ec-base-product ul.grid5 > li { width:19%; margin:1% 0.5% 3%; } .ec-base-product ul .box { width:94%; margin:0 auto; } .ec-base-product ul.gridbest > li { width:18.6%; margin:2.5% .7%; } .ec-base-product ul.gridbest > li:nth-child(-n+3) { width:31.33%; margin:2.5% 1% 5%; } .ec-base-product ul.gridbest > li:nth-child(n+4):nth-child(-n+15) { width:23%; margin:2.5% 1% 3%; } /* 상품명 */ .ec-base-product .prdList .description { margin:10px auto 0; padding:0 7px; font-size:12px; text-align:left; } .ec-base-product .prdList .description .name { display:block; text-align:left; margin-top:15px; font-weight:500; line-height:17px; white-space: nowrap; text-overflow: ellipsis; overflow:hidden; } .ec-base-product .prdList .description .name a { color:#111; } .ec-base-product .prdList .description .mileage { display:block; } .ec-base-product .prdList .description span.grid { display:block; } .ec-base-product ul.grid2 .name { margin-top:20% !important; margin-bottom:5px !important; border-bottom:0px solid !important; text-align:left; } @media all and (min-width:1px) and (max-width:1280px) { .ec-base-product ul.grid2 .name { margin-top:20px !important; padding:0 2px; } } /* module="product_ListItem" */ .ec-base-product .spec {margin:5px 0 0 0; } .ec-base-product .spec li { text-align:left; clear:both; word-break:break-all; line-height:19px; max-height:36px; padding:0; margin:0; overflow:hidden; font-weight:300; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .ec-base-product .spec li .title { font-weight:normal; vertical-align:top; } .ec-base-product .spec li .title span { vertical-align:top; } .ec-base-product .spec .halfli1 { width:auto; text-align:left; display:block; height:auto; line-height:auto; padding:10px 5px 0px 0; font-weight:300; } .ec-base-product .spec .halfli2 { width:auto; text-align:left; display:block; height:auto; line-height:auto; padding:10px 5px 0px 0; font-weight:500; } .ec-base-product .spec .halfli3 { position:relative; width:100% !important; height:auto; font-size:0px !important; line-height:17px; text-align:left; display:block; clear:both; margin-top:3px; } .ec-base-product .spec .halfli3 span { color:#f10404 !important; font-size:16px !important; font-weight:700; letter-spacing:0px; line-height:21px; } .ec-base-product .spec .halfli3 .title span { color:#fff !important; font-size:11px !important; font-weight:400; line-height:21px; background:#f10404; padding:2px 7px; margin-right:5px; border-radius:3px; } .ec-base-product .spec .halfli2 strong { font-size:10px !important; } .ec-base-product ul.grid2 .description, .ec-base-product ul.grid2 .description .name, .ec-base-product ul.grid2 .spec li { text-align:left; } /* 5단진열 - 브라우져 좁을때 소비자가 숨기기 @media all and (min-width:1px) and (max-width:1480px) { .ec-base-product ul.grid5 .spec .halfli1 { display:none; } } */ /* 상품아이콘 */ .ec-base-product .prdList .promotion { position:relative; width:100%; height:19px; text-align:left; display:block; margin-top:15px; } .ec-base-product .prdList .promotion img { margin:0 2px 2px 0; } .ec-base-product ul.grid2 .promotion { text-align:left; } .ec-base-product ul.grid2 .promotion img { margin-top:10px; } .ec-base-product ul.grid2 .promotion img:first-child { margin-left:0px !important; } .ec-base-product .prdList .thumbnail .sold { position:absolute; top:50%; margin-top:-18px; width:100%; text-align:center; } /* 상품 할인률 */ .perhan { display:none; position:absolute; left:5px; font-size:40px; line-height:40px; letter-spacing:-1px; color:#f10404; font-weight:700; z-index:30;} .perhan:after { content : "%"; font-size:14px; margin-left:1px; font-weight:400; } .perhanNO, .perhanNO:after { } .halfli2 .perhanNO { display:none !important; } /* 좋아요 버튼 */ .ec-base-product .prdList .thumbnail .likeButton { position:absolute; bottom:0px; left:-3px; z-index:30; opacity:0; } .ec-base-product .prdList .thumbnail .likeButton button { font-family:verdana; color:#555; letter-spacing:-1px; background:none; } .ec-base-product .prdList .thumbnail .likeButton button img { margin:0; vertical-align:middle; } .ec-base-product .prdList .thumbnail .likeButton button strong { height:31px; font-family:Tahoma; font-weight:400; font-size:10px; } .ec-base-product .prdList .thumbnail .likeButton .likePrdCount { position:absolute; width:25px; height:15px; display:block; top:11px; left:21px; line-height:15px; } .ec-base-product .prdList li.item:hover .likeButton { bottom:16px; opacity:1; } .ec-base-product .prdList .thumbnail .likeButton.selected { bottom:6px; opacity:1; } .ec-base-product .prdList .thumbnail .likeButton.selected button { color:#fff; } /* 옵션미리보기 줌 관심상품 장바구니담기 버튼 */ .ec-base-product li.item .button { position:absolute; display: block; bottom:0px; left:0; width:100%; z-index:29; cursor:pointer; text-align:center; } .ec-base-product .prdList li.item .thumbnail .button .option { position:relative; display:inline-block; top:26px; opacity:0; } .ec-base-product .prdList li.item:hover .button .option { top:-20px; opacity:1; } .ec-base-product .prdList .thumbnail .button .option img { border:1px solid #e9e9e9; border-radius:20%; outline:0px; width:30px; height:30px; background:#fff; margin:0 1px;} .ec-base-product ul.grid2 li.item .button { width:100%; } .ec-base-product .prdList .thumbnail .button .option1 { } .ec-base-product .prdList .thumbnail .button .option2 { transition-delay:0.1s; } .ec-base-product .prdList .thumbnail .button .option3 { transition-delay:0.2s; } .ec-base-product .prdList .thumbnail .button .option4 { transition-delay:0.3s; } /* 꾸미기아이콘 */ .ec-base-product .prdList .thumbnail .prdIcon { position:absolute; top:0px; left:0px; width:50px; height:61px; background-repeat:no-repeat; } .ec-base-product .prdList .thumbnail .icon { margin:0 0; vertical-align:middle; } .ec-base-product .prdList .thumbnail .icon:after { content:""; display:block; clear:both; } /* 컬러칩 */ .ec-base-product .spec li .color { position:absolute; top:15px; text-align:center; width:100%; left:0; } .ec-base-product .spec li .chips { width:8px; height:8px; margin:0 2.5px.0; font-size:0; line-height:0; display:inline-block; border-radius:50%; } .ec-base-product ul.grid2 .spec li .color { width:100%; } /* 호버시 정보노출 */ .ec-base-product .hidearea .description { position:absolute; top:0%; background:url("//lifeggook.com/han/images/bg/bg_white.png") repeat; margin:0; padding:0; width:100%; height:100%; z-index:10; display:none; } .ec-base-product .hidearea .description .name { text-align:center; margin-top:40%; } .ec-base-product .hidearea .spec li { text-align:center; white-space: nowrap; text-overflow: ellipsis; overflow:hidden; } .ec-base-product .hidearea .promotion { text-align:center;} .ec-base-product .hidearea .promotion img { margin:10px 2px 4px; } .ec-base-product .hidearea .spec li .color { display:none; } .ec-base-product .hidearea .description { text-align:center; } .ec-base-product .hidearea .spec li { text-align:center; } /* 페이드인 효과 */ .ec-base-product .hidearea > li.item:hover .description { display:block; -webkit-animation:fadeInUp .3s; -moz-animation:fadeInUp .3s; -ms-animation:fadeInUp .3s; animation:fadeInUp .3s; } /* right display - 2단지열 */ .ec-base-product ul.grid2 li:after { content:""; display:block; clear:both; } .ec-base-product ul.grid2 li .thumbnail { float:left; width:49%; text-align:left; margin:0; } .ec-base-product ul.grid2 li .description { position:relative; float:right; width:47%; padding:0; margin-right:2%; } .ec-base-product ul.grid2 li .description .chk { position:static; text-align:left; } .ec-base-product ul.grid2 li .perhan { left:0px;} /* Best 100 */ .list100 ul.prdList { counter-reset: section } .list100 ul.prdList li.item .thumbnail:before { content: "BEST\A" ; text-align:center; position:absolute; top:1px; left:0px; color:#fff; font-size:13px; z-index:20; width:50px; height:50px; line-height:23px; border-radius:0 0 10px 0; transition: .3s; -webkit-transition: .3s; -moz-transition: .3s; } .list100 ul.prdList li.item .thumbnail:after { counter-increment: section; content: counter(section) ; text-align:center; position:absolute; top:5px; left:1px; font-family:'GmarketSansMedium'; color:#fff000; font-size:18px; z-index:20; width:50px; height:50px; line-height:60px; } .list100 ul.prdList li.item .prdIcon { display:none; } .list100 ul.prdList li.item { } .main100 .morebtn { position:absolute; bottom:0; right:0; width:16.66%; height:auto; display:block; overflow:hidden; margin:0; padding:0; font-size:0; line-height:0; bottom:0;} .main100 .morebtn img { position:relative; width:100%; } .main100 .morebtn a { position:absolute; top:0; width:100%; height:100%; display:block; } .main100 .morebtn p { position:absolute; top:49%; width:100%; color:#fff; font-size:1.5vw; font-weight:800; text-align:center; } /* 꾸미기아이콘 위치지정 - 좌측상단지정으로 미사용 .ec-product-bgLT { background-position:left top; } .ec-product-bgLC { background-position:left center; } .ec-product-bgLB { background-position:left bottom; } .ec-product-bgRT { background-position:right top; } .ec-product-bgRC { background-position:right center; } .ec-product-bgRB { background-position:right bottom; } .ec-product-bgCT { background-position:center top; } .ec-product-bgCC { background-position:center center; } .ec-product-bgCB { background-position:center bottom; } */ /* 호버시라인 */ .ec-base-product li.hovimg .thumbnail:before, .ec-base-product li.hovimg .thumbnail:after { content: ""; width: 0; height: 0; position: absolute; opacity: 0; z-index: -1; transition: all 0.4s ease 0s; } .ec-base-product li.hovimg .thumbnail:before{ bottom: -1px; left: -1px; border-bottom: 2px solid ; border-left: 2px solid ; } .ec-base-product li.hovimg .thumbnail:after{ top: -1px; right: -1px; border-top: 2px solid ; border-right: 2px solid ; } .ec-base-product li.hovimg:hover .thumbnail:before, .ec-base-product li.hovimg:hover .thumbnail:after{ opacity: 1; width: 104%; height: 104%; } .ec-base-product .discountPeriod { display:inline-block; z-index:10; position:relative; width:55px; height:19px; vertical-align:middle; } .ec-base-product .layerDiscountPeriod { left:50%; top:26px; width:247px; margin:0 0 0 -124px; } .ec-base-product .layerDiscountPeriod strong.title { display:block; margin:0 0 12px; padding:0 35px 0 0; font-weight:bold; color:#2e2e2e; } .ec-base-product .layerDiscountPeriod .content p { margin:2px 0 0; font-size:11px; line-height:16px; color:#757575; letter-spacing:-1px; } .ec-base-product .layerDiscountPeriod .content p strong { font-weight:normal; font-size:12px; color:#2e2e2e; } .ec-base-product .layerDiscountPeriod .content p strong span { font-size:11px; } .ec-base-product .prdList .shippingFee { position:relative; display:inline-block; } .ec-base-product .prdList .shippingFee .button { display:inline-block; float:none; } .ec-base-product .prdList .shippingFee .ec-base-tooltip { z-index:11; display:block; margin:0 0 0 -170px; width:360px; } .ec-base-product .prdList .shippingFee .ec-base-tooltip table th { width:40px; } .ec-base-product .prdList .shippingFee .ec-base-tooltip table th, .ec-base-product .prdList .shippingFee .ec-base-tooltip table td { padding:7px 10px 8px 10px; } .ec-base-product .btnTooltip { position:relative; display:inline-block; } .differentialShipping { display:none; overflow:hidden; position:absolute; left:50%; top:17px; z-index:100; width:350px; margin:0 0 0 -176px; } .differentialShipping h3.title { margin:0; height:35px; padding:0 35px 0 19px; border:0; color:#fff; font-size:14px; line-height:35px; background:#495164; } .differentialShipping .content { padding:12px 18px 14px 18px; border:1px solid #757575; border-top:0; text-align:center; background:#fff; } .differentialShipping .close { position:absolute; right:14px; top:12px; } .differentialShipping .close img { cursor:pointer; } .differentialShipping .content ul { color:#757575; line-height:25px; } .differentialShipping .content li { overflow:hidden; } .differentialShipping .content li strong { float:left; font-weight:normal; } .differentialShipping .content li span { float:right; color:#2e2e2e; } .differentialShipping .content .info { margin:7px 0 0; padding:7px 0 0; border-top:1px dotted #b0b1b3; color:#80aeef; text-align:right; } @charset "UTF-8"; /*! * animate.css -https://daneden.github.io/animate.css/ * Version - 3.7.2 * Licensed under the MIT license - http://opensource.org/licenses/MIT * * Copyright (c) 2019 Daniel Eden */ @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeInDownBig { from { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInDownBig { from { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig; } @-webkit-keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-30px, 0, 0); transform: translate3d(-30px, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-30px, 0, 0); transform: translate3d(-30px, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes fadeInLeftBig { from { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInLeftBig { from { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } @-webkit-keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(30px, 0, 0); transform: translate3d(30px, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(30px, 0, 0); transform: translate3d(30px, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } @-webkit-keyframes fadeInRightBig { from { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInRightBig { from { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } @-webkit-keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 30px, 0); transform: translate3d(0, 30px, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 30px, 0); transform: translate3d(0, 30px, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInUpBig { from { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInUpBig { from { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } @-webkit-keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeOutDown { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes fadeOutDown { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } .fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown; } @-webkit-keyframes fadeOutDownBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @keyframes fadeOutDownBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } .fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig; } @-webkit-keyframes fadeOutLeft { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes fadeOutLeft { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } @-webkit-keyframes fadeOutLeftBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } @keyframes fadeOutLeftBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } .fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig; } @-webkit-keyframes fadeOutRight { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes fadeOutRight { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight; } @-webkit-keyframes fadeOutRightBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } @keyframes fadeOutRightBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } .fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig; } @-webkit-keyframes fadeOutUp { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes fadeOutUp { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } .fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp; } @-webkit-keyframes fadeOutUpBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @keyframes fadeOutUpBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } .fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig; } .slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp; } .animated { -webkit-animation-duration: .8s; animation-duration: .8s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .animated.delay-1s { -webkit-animation-delay: 1s; animation-delay: 1s; } .animated.delay-2s { -webkit-animation-delay: 2s; animation-delay: 2s; } .animated.delay-3s { -webkit-animation-delay: 3s; animation-delay: 3s; } .animated.delay-4s { -webkit-animation-delay: 4s; animation-delay: 4s; } .animated.delay-5s { -webkit-animation-delay: 5s; animation-delay: 5s; } .animated.fast { -webkit-animation-duration: 800ms; animation-duration: 800ms; } .animated.faster { -webkit-animation-duration: 500ms; animation-duration: 500ms; } .animated.slow { -webkit-animation-duration: 2s; animation-duration: 2s; } .animated.slower { -webkit-animation-duration: 3s; animation-duration: 3s; } @media (print), (prefers-reduced-motion: reduce) { .animated { -webkit-animation-duration: 1ms !important; animation-duration: 1ms !important; -webkit-transition-duration: 1ms !important; transition-duration: 1ms !important; -webkit-animation-iteration-count: 1 !important; animation-iteration-count: 1 !important; } } /*! * Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) */.fa.fa-pull-left,.fa.pull-left{margin-right:.3em}.fa,.fa-stack{display:inline-block}.fa-fw,.fa-li{text-align:center}@font-face{font-family:FontAwesome;src:url("//lifeggook.com/han/font/fontawesome-webfont.eot");src:url("//lifeggook.com/han/font/fontawesome-webfont.woff") format('woff'),url("//lifeggook.com/han/font/fontawesome-webfont.ttf") format('truetype'),url("//lifeggook.com/han/font/fontawesome-webfont.svg#fontawesomeregular") format('svg');font-weight:400;font-style:normal}.fa{font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.fa-lg{font-size:1.33333333em;line-height:.75em;vertical-align:-15%}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-fw{width:1.28571429em}.fa-ul{padding-left:0;margin-left:2.14285714em;list-style-type:none}.fa.fa-pull-right,.fa.pull-right{margin-left:.3em}.fa-ul>li{position:relative}.fa-li{position:absolute;left:-2.14285714em;width:2.14285714em;top:.14285714em}.fa-li.fa-lg{left:-1.85714286em}.fa-border{padding:.2em .25em .15em;border:.08em solid #eee;border-radius:.1em}.fa-pull-left{float:left}.fa-pull-right,.pull-right{float:right}.pull-left{float:left}.fa-spin{-webkit-animation:fa-spin 2s infinite linear;animation:fa-spin 2s infinite linear}.fa-pulse{-webkit-animation:fa-spin 1s infinite steps(8);animation:fa-spin 1s infinite steps(8)}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.fa-rotate-90{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";-webkit-transform:scale(-1,1);-ms-transform:scale(-1,1);transform:scale(-1,1)}.fa-flip-vertical{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";-webkit-transform:scale(1,-1);-ms-transform:scale(1,-1);transform:scale(1,-1)}:root .fa-flip-horizontal,:root .fa-flip-vertical,:root .fa-rotate-180,:root .fa-rotate-270,:root .fa-rotate-90{filter:none}.fa-stack{position:relative;width:2em;height:2em;line-height:2em;vertical-align:middle}.fa-stack-1x,.fa-stack-2x{position:absolute;left:0;width:100%;text-align:center}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:#fff}.fa-glass:before{content:"\f000"}.fa-music:before{content:"\f001"}.fa-search:before{content:"\f002"}.fa-envelope-o:before{content:"\f003"}.fa-heart:before{content:"\f004"}.fa-star:before{content:"\f005"}.fa-star-o:before{content:"\f006"}.fa-user:before{content:"\f007"}.fa-film:before{content:"\f008"}.fa-th-large:before{content:"\f009"}.fa-th:before{content:"\f00a"}.fa-th-list:before{content:"\f00b"}.fa-check:before{content:"\f00c"}.fa-close:before,.fa-remove:before,.fa-times:before{content:"\f00d"}.fa-search-plus:before{content:"\f00e"}.fa-search-minus:before{content:"\f010"}.fa-power-off:before{content:"\f011"}.fa-signal:before{content:"\f012"}.fa-cog:before,.fa-gear:before{content:"\f013"}.fa-trash-o:before{content:"\f014"}.fa-home:before{content:"\f015"}.fa-file-o:before{content:"\f016"}.fa-clock-o:before{content:"\f017"}.fa-road:before{content:"\f018"}.fa-download:before{content:"\f019"}.fa-arrow-circle-o-down:before{content:"\f01a"}.fa-arrow-circle-o-up:before{content:"\f01b"}.fa-inbox:before{content:"\f01c"}.fa-play-circle-o:before{content:"\f01d"}.fa-repeat:before,.fa-rotate-right:before{content:"\f01e"}.fa-refresh:before{content:"\f021"}.fa-list-alt:before{content:"\f022"}.fa-lock:before{content:"\f023"}.fa-flag:before{content:"\f024"}.fa-headphones:before{content:"\f025"}.fa-volume-off:before{content:"\f026"}.fa-volume-down:before{content:"\f027"}.fa-volume-up:before{content:"\f028"}.fa-qrcode:before{content:"\f029"}.fa-barcode:before{content:"\f02a"}.fa-tag:before{content:"\f02b"}.fa-tags:before{content:"\f02c"}.fa-book:before{content:"\f02d"}.fa-bookmark:before{content:"\f02e"}.fa-print:before{content:"\f02f"}.fa-camera:before{content:"\f030"}.fa-font:before{content:"\f031"}.fa-bold:before{content:"\f032"}.fa-italic:before{content:"\f033"}.fa-text-height:before{content:"\f034"}.fa-text-width:before{content:"\f035"}.fa-align-left:before{content:"\f036"}.fa-align-center:before{content:"\f037"}.fa-align-right:before{content:"\f038"}.fa-align-justify:before{content:"\f039"}.fa-list:before{content:"\f03a"}.fa-dedent:before,.fa-outdent:before{content:"\f03b"}.fa-indent:before{content:"\f03c"}.fa-video-camera:before{content:"\f03d"}.fa-image:before,.fa-photo:before,.fa-picture-o:before{content:"\f03e"}.fa-pencil:before{content:"\f040"}.fa-map-marker:before{content:"\f041"}.fa-adjust:before{content:"\f042"}.fa-tint:before{content:"\f043"}.fa-edit:before,.fa-pencil-square-o:before{content:"\f044"}.fa-share-square-o:before{content:"\f045"}.fa-check-square-o:before{content:"\f046"}.fa-arrows:before{content:"\f047"}.fa-step-backward:before{content:"\f048"}.fa-fast-backward:before{content:"\f049"}.fa-backward:before{content:"\f04a"}.fa-play:before{content:"\f04b"}.fa-pause:before{content:"\f04c"}.fa-stop:before{content:"\f04d"}.fa-forward:before{content:"\f04e"}.fa-fast-forward:before{content:"\f050"}.fa-step-forward:before{content:"\f051"}.fa-eject:before{content:"\f052"}.fa-chevron-left:before{content:"\f053"}.fa-chevron-right:before{content:"\f054"}.fa-plus-circle:before{content:"\f055"}.fa-minus-circle:before{content:"\f056"}.fa-times-circle:before{content:"\f057"}.fa-check-circle:before{content:"\f058"}.fa-question-circle:before{content:"\f059"}.fa-info-circle:before{content:"\f05a"}.fa-crosshairs:before{content:"\f05b"}.fa-times-circle-o:before{content:"\f05c"}.fa-check-circle-o:before{content:"\f05d"}.fa-ban:before{content:"\f05e"}.fa-arrow-left:before{content:"\f060"}.fa-arrow-right:before{content:"\f061"}.fa-arrow-up:before{content:"\f062"}.fa-arrow-down:before{content:"\f063"}.fa-mail-forward:before,.fa-share:before{content:"\f064"}.fa-expand:before{content:"\f065"}.fa-compress:before{content:"\f066"}.fa-plus:before{content:"\f067"}.fa-minus:before{content:"\f068"}.fa-asterisk:before{content:"\f069"}.fa-exclamation-circle:before{content:"\f06a"}.fa-gift:before{content:"\f06b"}.fa-leaf:before{content:"\f06c"}.fa-fire:before{content:"\f06d"}.fa-eye:before{content:"\f06e"}.fa-eye-slash:before{content:"\f070"}.fa-exclamation-triangle:before,.fa-warning:before{content:"\f071"}.fa-plane:before{content:"\f072"}.fa-calendar:before{content:"\f073"}.fa-random:before{content:"\f074"}.fa-comment:before{content:"\f075"}.fa-magnet:before{content:"\f076"}.fa-chevron-up:before{content:"\f077"}.fa-chevron-down:before{content:"\f078"}.fa-retweet:before{content:"\f079"}.fa-shopping-cart:before{content:"\f07a"}.fa-folder:before{content:"\f07b"}.fa-folder-open:before{content:"\f07c"}.fa-arrows-v:before{content:"\f07d"}.fa-arrows-h:before{content:"\f07e"}.fa-bar-chart-o:before,.fa-bar-chart:before{content:"\f080"}.fa-twitter-square:before{content:"\f081"}.fa-facebook-square:before{content:"\f082"}.fa-camera-retro:before{content:"\f083"}.fa-key:before{content:"\f084"}.fa-cogs:before,.fa-gears:before{content:"\f085"}.fa-comments:before{content:"\f086"}.fa-thumbs-o-up:before{content:"\f087"}.fa-thumbs-o-down:before{content:"\f088"}.fa-star-half:before{content:"\f089"}.fa-heart-o:before{content:"\f08a"}.fa-sign-out:before{content:"\f08b"}.fa-linkedin-square:before{content:"\f08c"}.fa-thumb-tack:before{content:"\f08d"}.fa-external-link:before{content:"\f08e"}.fa-sign-in:before{content:"\f090"}.fa-trophy:before{content:"\f091"}.fa-github-square:before{content:"\f092"}.fa-upload:before{content:"\f093"}.fa-lemon-o:before{content:"\f094"}.fa-phone:before{content:"\f095"}.fa-square-o:before{content:"\f096"}.fa-bookmark-o:before{content:"\f097"}.fa-phone-square:before{content:"\f098"}.fa-twitter:before{content:"\f099"}.fa-facebook-f:before,.fa-facebook:before{content:"\f09a"}.fa-github:before{content:"\f09b"}.fa-unlock:before{content:"\f09c"}.fa-credit-card:before{content:"\f09d"}.fa-feed:before,.fa-rss:before{content:"\f09e"}.fa-hdd-o:before{content:"\f0a0"}.fa-bullhorn:before{content:"\f0a1"}.fa-bell:before{content:"\f0f3"}.fa-certificate:before{content:"\f0a3"}.fa-hand-o-right:before{content:"\f0a4"}.fa-hand-o-left:before{content:"\f0a5"}.fa-hand-o-up:before{content:"\f0a6"}.fa-hand-o-down:before{content:"\f0a7"}.fa-arrow-circle-left:before{content:"\f0a8"}.fa-arrow-circle-right:before{content:"\f0a9"}.fa-arrow-circle-up:before{content:"\f0aa"}.fa-arrow-circle-down:before{content:"\f0ab"}.fa-globe:before{content:"\f0ac"}.fa-wrench:before{content:"\f0ad"}.fa-tasks:before{content:"\f0ae"}.fa-filter:before{content:"\f0b0"}.fa-briefcase:before{content:"\f0b1"}.fa-arrows-alt:before{content:"\f0b2"}.fa-group:before,.fa-users:before{content:"\f0c0"}.fa-chain:before,.fa-link:before{content:"\f0c1"}.fa-cloud:before{content:"\f0c2"}.fa-flask:before{content:"\f0c3"}.fa-cut:before,.fa-scissors:before{content:"\f0c4"}.fa-copy:before,.fa-files-o:before{content:"\f0c5"}.fa-paperclip:before{content:"\f0c6"}.fa-floppy-o:before,.fa-save:before{content:"\f0c7"}.fa-square:before{content:"\f0c8"}.fa-bars:before,.fa-navicon:before,.fa-reorder:before{content:"\f0c9"}.fa-list-ul:before{content:"\f0ca"}.fa-list-ol:before{content:"\f0cb"}.fa-strikethrough:before{content:"\f0cc"}.fa-underline:before{content:"\f0cd"}.fa-table:before{content:"\f0ce"}.fa-magic:before{content:"\f0d0"}.fa-truck:before{content:"\f0d1"}.fa-pinterest:before{content:"\f0d2"}.fa-pinterest-square:before{content:"\f0d3"}.fa-google-plus-square:before{content:"\f0d4"}.fa-google-plus:before{content:"\f0d5"}.fa-money:before{content:"\f0d6"}.fa-caret-down:before{content:"\f0d7"}.fa-caret-up:before{content:"\f0d8"}.fa-caret-left:before{content:"\f0d9"}.fa-caret-right:before{content:"\f0da"}.fa-columns:before{content:"\f0db"}.fa-sort:before,.fa-unsorted:before{content:"\f0dc"}.fa-sort-desc:before,.fa-sort-down:before{content:"\f0dd"}.fa-sort-asc:before,.fa-sort-up:before{content:"\f0de"}.fa-envelope:before{content:"\f0e0"}.fa-linkedin:before{content:"\f0e1"}.fa-rotate-left:before,.fa-undo:before{content:"\f0e2"}.fa-gavel:before,.fa-legal:before{content:"\f0e3"}.fa-dashboard:before,.fa-tachometer:before{content:"\f0e4"}.fa-comment-o:before{content:"\f0e5"}.fa-comments-o:before{content:"\f0e6"}.fa-bolt:before,.fa-flash:before{content:"\f0e7"}.fa-sitemap:before{content:"\f0e8"}.fa-umbrella:before{content:"\f0e9"}.fa-clipboard:before,.fa-paste:before{content:"\f0ea"}.fa-lightbulb-o:before{content:"\f0eb"}.fa-exchange:before{content:"\f0ec"}.fa-cloud-download:before{content:"\f0ed"}.fa-cloud-upload:before{content:"\f0ee"}.fa-user-md:before{content:"\f0f0"}.fa-stethoscope:before{content:"\f0f1"}.fa-suitcase:before{content:"\f0f2"}.fa-bell-o:before{content:"\f0a2"}.fa-coffee:before{content:"\f0f4"}.fa-cutlery:before{content:"\f0f5"}.fa-file-text-o:before{content:"\f0f6"}.fa-building-o:before{content:"\f0f7"}.fa-hospital-o:before{content:"\f0f8"}.fa-ambulance:before{content:"\f0f9"}.fa-medkit:before{content:"\f0fa"}.fa-fighter-jet:before{content:"\f0fb"}.fa-beer:before{content:"\f0fc"}.fa-h-square:before{content:"\f0fd"}.fa-plus-square:before{content:"\f0fe"}.fa-angle-double-left:before{content:"\f100"}.fa-angle-double-right:before{content:"\f101"}.fa-angle-double-up:before{content:"\f102"}.fa-angle-double-down:before{content:"\f103"}.fa-angle-left:before{content:"\f104"}.fa-angle-right:before{content:"\f105"}.fa-angle-up:before{content:"\f106"}.fa-angle-down:before{content:"\f107"}.fa-desktop:before{content:"\f108"}.fa-laptop:before{content:"\f109"}.fa-tablet:before{content:"\f10a"}.fa-mobile-phone:before,.fa-mobile:before{content:"\f10b"}.fa-circle-o:before{content:"\f10c"}.fa-quote-left:before{content:"\f10d"}.fa-quote-right:before{content:"\f10e"}.fa-spinner:before{content:"\f110"}.fa-circle:before{content:"\f111"}.fa-mail-reply:before,.fa-reply:before{content:"\f112"}.fa-github-alt:before{content:"\f113"}.fa-folder-o:before{content:"\f114"}.fa-folder-open-o:before{content:"\f115"}.fa-smile-o:before{content:"\f118"}.fa-frown-o:before{content:"\f119"}.fa-meh-o:before{content:"\f11a"}.fa-gamepad:before{content:"\f11b"}.fa-keyboard-o:before{content:"\f11c"}.fa-flag-o:before{content:"\f11d"}.fa-flag-checkered:before{content:"\f11e"}.fa-terminal:before{content:"\f120"}.fa-code:before{content:"\f121"}.fa-mail-reply-all:before,.fa-reply-all:before{content:"\f122"}.fa-star-half-empty:before,.fa-star-half-full:before,.fa-star-half-o:before{content:"\f123"}.fa-location-arrow:before{content:"\f124"}.fa-crop:before{content:"\f125"}.fa-code-fork:before{content:"\f126"}.fa-chain-broken:before,.fa-unlink:before{content:"\f127"}.fa-question:before{content:"\f128"}.fa-info:before{content:"\f129"}.fa-exclamation:before{content:"\f12a"}.fa-superscript:before{content:"\f12b"}.fa-subscript:before{content:"\f12c"}.fa-eraser:before{content:"\f12d"}.fa-puzzle-piece:before{content:"\f12e"}.fa-microphone:before{content:"\f130"}.fa-microphone-slash:before{content:"\f131"}.fa-shield:before{content:"\f132"}.fa-calendar-o:before{content:"\f133"}.fa-fire-extinguisher:before{content:"\f134"}.fa-rocket:before{content:"\f135"}.fa-maxcdn:before{content:"\f136"}.fa-chevron-circle-left:before{content:"\f137"}.fa-chevron-circle-right:before{content:"\f138"}.fa-chevron-circle-up:before{content:"\f139"}.fa-chevron-circle-down:before{content:"\f13a"}.fa-html5:before{content:"\f13b"}.fa-css3:before{content:"\f13c"}.fa-anchor:before{content:"\f13d"}.fa-unlock-alt:before{content:"\f13e"}.fa-bullseye:before{content:"\f140"}.fa-ellipsis-h:before{content:"\f141"}.fa-ellipsis-v:before{content:"\f142"}.fa-rss-square:before{content:"\f143"}.fa-play-circle:before{content:"\f144"}.fa-ticket:before{content:"\f145"}.fa-minus-square:before{content:"\f146"}.fa-minus-square-o:before{content:"\f147"}.fa-level-up:before{content:"\f148"}.fa-level-down:before{content:"\f149"}.fa-check-square:before{content:"\f14a"}.fa-pencil-square:before{content:"\f14b"}.fa-external-link-square:before{content:"\f14c"}.fa-share-square:before{content:"\f14d"}.fa-compass:before{content:"\f14e"}.fa-caret-square-o-down:before,.fa-toggle-down:before{content:"\f150"}.fa-caret-square-o-up:before,.fa-toggle-up:before{content:"\f151"}.fa-caret-square-o-right:before,.fa-toggle-right:before{content:"\f152"}.fa-eur:before,.fa-euro:before{content:"\f153"}.fa-gbp:before{content:"\f154"}.fa-dollar:before,.fa-usd:before{content:"\f155"}.fa-inr:before,.fa-rupee:before{content:"\f156"}.fa-cny:before,.fa-jpy:before,.fa-rmb:before,.fa-yen:before{content:"\f157"}.fa-rouble:before,.fa-rub:before,.fa-ruble:before{content:"\f158"}.fa-krw:before,.fa-won:before{content:"\f159"}.fa-bitcoin:before,.fa-btc:before{content:"\f15a"}.fa-file:before{content:"\f15b"}.fa-file-text:before{content:"\f15c"}.fa-sort-alpha-asc:before{content:"\f15d"}.fa-sort-alpha-desc:before{content:"\f15e"}.fa-sort-amount-asc:before{content:"\f160"}.fa-sort-amount-desc:before{content:"\f161"}.fa-sort-numeric-asc:before{content:"\f162"}.fa-sort-numeric-desc:before{content:"\f163"}.fa-thumbs-up:before{content:"\f164"}.fa-thumbs-down:before{content:"\f165"}.fa-youtube-square:before{content:"\f166"}.fa-youtube:before{content:"\f167"}.fa-xing:before{content:"\f168"}.fa-xing-square:before{content:"\f169"}.fa-youtube-play:before{content:"\f16a"}.fa-dropbox:before{content:"\f16b"}.fa-stack-overflow:before{content:"\f16c"}.fa-instagram:before{content:"\f16d"}.fa-flickr:before{content:"\f16e"}.fa-adn:before{content:"\f170"}.fa-bitbucket:before{content:"\f171"}.fa-long-arrow-up:before{content:"\f176"}.fa-long-arrow-left:before{content:"\f177"}.fa-long-arrow-right:before{content:"\f178"}.fa-apple:before{content:"\f17ž`ž` ‡^pƒ^hž` ž`h7 ž`"}.fa-dribbble:before{content:"\f17d"}.fa-skype:before{content:"\f17e"}.fa-foursquare:before{content:"\f180"}.fa-trello:before{content:"\f181"}.fa-female:before{content:"\f182"}.fa-male:before{content:"\f183"}.fa-gittip:before,.fa-gratipay:before{content:"\f184"}.fa-sun-o:before{content:"\f185"}.fa-moon-o:before{content:"\f186"}.fa-archive:before{content:"\f187"}.fa-bug:before{content:"\f188"}.fa-vk:before{content:"\f189"}.fa-weibo:before{content:"\f18a"}.fa-renren:before{content:"\f18b"}.fa-pagelines:before{content:"\f18c"}.fa-stack-exchange:before{content:"\f18d"}.fa-arrow-circle-o-right:before{content:"\f18e"}.fa-arrow-circle-o-left:before{content:"\f190"}.fa-caret-square-o-left:before,.fa-toggle-left:before{content:"\f191"}.fa-dot-circle-o:before{content:"\f192"}.fa-wheelchair:before{content:"\f193"}.fa-vimeo-square:before{content:"\f194"}.fa-try:before,.fa-turkish-lira:before{content:"\f195"}.fa-plus-square-o:before{content:"\f196"}.fa-space-shuttle:before{content:"\f197"}.fa-slack:before{content:"\f198"}.fa-envelope-square:before{content:"\f199"}.fa-wordpress:before{content:"\f19a"}.fa-openid:before{content:"\f19b"}.fa-bank:before,.fa-institution:before,.fa-university:before{content:"\f19c"}.fa-graduation-cap:before,.fa-mortar-board:before{content:"\f19d"}.fa-yahoo:before{content:"\f19e"}.fa-google:before{content:"\f1a0"}.fa-reddit:before{content:"\f1a1"}.fa-reddit-square:before{content:"\f1a2"}.fa-stumbleupon-circle:before{content:"\f1a3"}.fa-stumbleupon:before{content:"\f1a4"}.fa-delicious:before{content:"\f1a5"}.fa-digg:before{content:"\f1a6"}.fa-pied-piper-pp:before{content:"\f1a7"}.fa-pied-piper-alt:before{content:"\f1a8"}.fa-drupal:before{content:"\f1a9"}.fa-joomla:before{content:"\f1aa"}.fa-language:before{content:"\f1ab"}.fa-fax:before{content:"\f1ac"}.fa-building:before{content:"\f1ad"}.fa-child:before{content:"\f1ae"}.fa-paw:before{content:"\f1b0"}.fa-spoon:before{content:"\f1b1"}.fa-cube:before{content:"\f1b2"}.fa-cubes:before{content:"\f1b3"}.fa-behance:before{content:"\f1b4"}.fa-behance-square:before{content:"\f1b5"}.fa-steam:before{content:"\f1b6"}.fa-steam-square:before{content:"\f1b7"}.fa-recycle:before{content:"\f1b8"}.fa-automobile:before,.fa-car:before{content:"\f1b9"}.fa-cab:before,.fa-taxi:before{content:"\f1ba"}.fa-tree:before{content:"\f1bb"}.fa-spotify:before{content:"\f1bc"}.fa-deviantart:before{content:"\f1bd"}.fa-soundcloud:before{content:"\f1be"}.fa-database:before{content:"\f1c0"}.fa-file-pdf-o:before{content:"\f1c1"}.fa-file-word-o:before{content:"\f1c2"}.fa-file-excel-o:before{content:"\f1c3"}.fa-file-powerpoint-o:before{content:"\f1c4"}.fa-file-image-o:before,.fa-file-photo-o:before,.fa-file-picture-o:before{content:"\f1c5"}.fa-file-archive-o:before,.fa-file-zip-o:before{content:"\f1c6"}.fa-file-audio-o:before,.fa-file-sound-o:before{content:"\f1c7"}.fa-file-movie-o:before,.fa-file-video-o:before{content:"\f1c8"}.fa-file-code-o:before{content:"\f1c9"}.fa-vine:before{content:"\f1ca"}.fa-codepen:before{content:"\f1cb"}.fa-jsfiddle:before{content:"\f1cc"}.fa-life-bouy:before,.fa-life-buoy:before,.fa-life-ring:before,.fa-life-saver:before,.fa-support:before{content:"\f1cd"}.fa-circle-o-notch:before{content:"\f1ce"}.fa-ra:before,.fa-rebel:before,.fa-resistance:before{content:"\f1d0"}.fa-empire:before,.fa-ge:before{content:"\f1d1"}.fa-git-square:before{content:"\f1d2"}.fa-git:before{content:"\f1d3"}.fa-hacker-news:before,.fa-y-combinator-square:before,.fa-yc-square:before{content:"\f1d4"}.fa-tencent-weibo:before{content:"\f1d5"}.fa-qq:before{content:"\f1d6"}.fa-wechat:before,.fa-weixin:before{content:"\f1d7"}.fa-paper-plane:before,.fa-send:before{content:"\f1d8"}.fa-paper-plane-o:before,.fa-send-o:before{content:"\f1d9"}.fa-history:before{content:"\f1da"}.fa-circle-thin:before{content:"\f1db"}.fa-header:before{content:"\f1dc"}.fa-paragraph:before{content:"\f1dd"}.fa-sliders:before{content:"\f1de"}.fa-share-alt:before{content:"\f1e0"}.fa-share-alt-square:before{content:"\f1e1"}.fa-bomb:before{content:"\f1e2"}.fa-futbol-o:before,.fa-soccer-ball-o:before{content:"\f1e3"}.fa-tty:before{content:"\f1e4"}.fa-binoculars:before{content:"\f1e5"}.fa-plug:before{content:"\f1e6"}.fa-slideshare:before{content:"\f1e7"}.fa-twitch:before{content:"\f1e8"}.fa-yelp:before{content:"\f1e9"}.fa-newspaper-o:before{content:"\f1ea"}.fa-wifi:before{content:"\f1eb"}.fa-calculator:before{content:"\f1ec"}.fa-paypal:before{content:"\f1ed"}.fa-google-wallet:before{content:"\f1ee"}.fa-cc-visa:before{content:"\f1f0"}.fa-cc-mastercard:before{content:"\f1f1"}.fa-cc-discover:before{content:"\f1f2"}.fa-cc-amex:before{content:"\f1f3"}.fa-cc-paypal:before{content:"\f1f4"}.fa-cc-stripe:before{content:"\f1f5"}.fa-bell-slash:before{content:"\f1f6"}.fa-bell-slash-o:before{content:"\f1f7"}.fa-trash:before{content:"\f1f8"}.fa-copyright:before{content:"\f1f9"}.fa-at:before{content:"\f1fa"}.fa-eyedropper:before{content:"\f1fb"}.fa-paint-brush:before{content:"\f1fc"}.fa-birthday-cake:before{content:"\f1fd"}.fa-area-chart:before{content:"\f1fe"}.fa-pie-chart:before{content:"\f200"}.fa-line-chart:before{content:"\f201"}.fa-lastfm:before{content:"\f202"}.fa-lastfm-square:before{content:"\f203"}.fa-toggle-off:before{content:"\f204"}.fa-toggle-on:before{content:"\f205"}.fa-bicycle:before{content:"\f206"}.fa-bus:before{content:"\f207"}.fa-ioxhost:before{content:"\f208"}.fa-angellist:before{content:"\f209"}.fa-cc:before{content:"\f20a"}.fa-ils:before,.fa-shekel:before,.fa-sheqel:before{content:"\f20b"}.fa-meanpath:before{content:"\f20c"}.fa-buysellads:before{content:"\f20d"}.fa-connectdevelop:before{content:"\f20e"}.fa-dashcube:before{content:"\f210"}.fa-forumbee:before{content:"\f211"}.fa-leanpub:before{content:"\f212"}.fa-sellsy:before{content:"\f213"}.fa-shirtsinbulk:before{content:"\f214"}.fa-simplybuilt:before{content:"\f215"}.fa-skyatlas:before{content:"\f216"}.fa-cart-plus:before{content:"\f217"}.fa-cart-arrow-down:before{content:"\f218"}.fa-diamond:before{content:"\f219"}.fa-ship:before{content:"\f21a"}.fa-user-secret:before{content:"\f21b"}.fa-motorcycle:before{content:"\f21c"}.fa-street-view:before{content:"\f21d"}.fa-heartbeat:before{content:"\f21e"}.fa-venus:before{content:"\f221"}.fa-mars:before{content:"\f222"}.fa-mercury:before{content:"\f223"}.fa-intersex:before,.fa-transgender:before{content:"\f224"}.fa-transgender-alt:before{content:"\f225"}.fa-venus-double:before{content:"\f226"}.fa-mars-double:before{content:"\f227"}.fa-venus-mars:before{content:"\f228"}.fa-mars-stroke:before{content:"\f229"}.fa-mars-stroke-v:before{content:"\f22a"}.fa-mars-stroke-h:before{content:"\f22b"}.fa-neuter:before{content:"\f22c"}.fa-genderless:before{content:"\f22d"}.fa-facebook-official:before{content:"\f230"}.fa-pinterest-p:before{content:"\f231"}.fa-whatsapp:before{content:"\f232"}.fa-server:before{content:"\f233"}.fa-user-plus:before{content:"\f234"}.fa-user-times:before{content:"\f235"}.fa-bed:before,.fa-hotel:before{content:"\f236"}.fa-viacoin:before{content:"\f237"}.fa-train:before{content:"\f238"}.fa-subway:before{content:"\f239"}.fa-medium:before{content:"\f23a"}.fa-y-combinator:before,.fa-yc:before{content:"\f23b"}.fa-optin-monster:before{content:"\f23c"}.fa-opencart:before{content:"\f23d"}.fa-expeditedssl:before{content:"\f23e"}.fa-battery-4:before,.fa-battery-full:before,.fa-battery:before{content:"\f240"}.fa-battery-3:before,.fa-battery-three-quarters:before{content:"\f241"}.fa-battery-2:before,.fa-battery-half:before{content:"\f242"}.fa-battery-1:before,.fa-battery-quarter:before{content:"\f243"}.fa-battery-0:before,.fa-battery-empty:before{content:"\f244"}.fa-mouse-pointer:before{content:"\f245"}.fa-i-cursor:before{content:"\f246"}.fa-object-group:before{content:"\f247"}.fa-object-ungroup:before{content:"\f248"}.fa-sticky-note:before{content:"\f249"}.fa-sticky-note-o:before{content:"\f24a"}.fa-cc-jcb:before{content:"\f24b"}.fa-cc-diners-club:before{content:"\f24c"}.fa-clone:before{content:"\f24d"}.fa-balance-scale:before{content:"\f24e"}.fa-hourglass-o:before{content:"\f250"}.fa-hourglass-1:before,.fa-hourglass-start:before{content:"\f251"}.fa-hourglass-2:before,.fa-hourglass-half:before{content:"\f252"}.fa-hourglass-3:before,.fa-hourglass-end:before{content:"\f253"}.fa-hourglass:before{content:"\f254"}.fa-hand-grab-o:before,.fa-hand-rock-o:before{content:"\f255"}.fa-hand-paper-o:before,.fa-hand-stop-o:before{content:"\f256"}.fa-hand-scissors-o:before{content:"\f257"}.fa-hand-lizard-o:before{content:"\f258"}.fa-hand-spock-o:before{content:"\f259"}.fa-hand-pointer-o:before{content:"\f25a"}.fa-hand-peace-o:before{content:"\f25b"}.fa-trademark:before{content:"\f25c"}.fa-registered:before{content:"\f25d"}.fa-creative-commons:before{content:"\f25e"}.fa-gg:before{content:"\f260"}.fa-gg-circle:before{content:"\f261"}.fa-tripadvisor:before{content:"\f262"}.fa-odnoklassniki:before{content:"\f263"}.fa-odnoklassniki-square:before{content:"\f264"}.fa-get-pocket:before{content:"\f265"}.fa-wikipedia-w:before{content:"\f266"}.fa-safari:before{content:"\f267"}.fa-chrome:before{content:"\f268"}.fa-firefox:before{content:"\f269"}.fa-opera:before{content:"\f26a"}.fa-internet-explorer:before{content:"\f26b"}.fa-television:before,.fa-tv:before{content:"\f26c"}.fa-contao:before{content:"\f26d"}.fa-500px:before{content:"\f26e"}.fa-amazon:before{content:"\f270"}.fa-calendar-plus-o:before{content:"\f271"}.fa-calendar-minus-o:before{content:"\f272"}.fa-calendar-times-o:before{content:"\f273"}.fa-calendar-check-o:before{content:"\f274"}.fa-industry:before{content:"\f275"}.fa-map-pin:before{content:"\f276"}.fa-map-signs:before{content:"\f277"}.fa-map-o:before{content:"\f278"}.fa-map:before{content:"\f279"}.fa-commenting:before{content:"\f27a"}.fa-commenting-o:before{content:"\f27b"}.fa-houzz:before{content:"\f27c"}.fa-vimeo:before{content:"\f27d"}.fa-black-tie:before{content:"\f27e"}.fa-fonticons:before{content:"\f280"}.fa-reddit-alien:before{content:"\f281"}.fa-edge:before{content:"\f282"}.fa-credit-card-alt:before{content:"\f283"}.fa-codiepie:before{content:"\f284"}.fa-modx:before{content:"\f285"}.fa-fort-awesome:before{content:"\f286"}.fa-usb:before{content:"\f287"}.fa-product-hunt:before{content:"\f288"}.fa-mixcloud:before{content:"\f289"}.fa-scribd:before{content:"\f28a"}.fa-pause-circle:before{content:"\f28b"}.fa-pause-circle-o:before{content:"\f28c"}.fa-stop-circle:before{content:"\f28d"}.fa-stop-circle-o:before{content:"\f28e"}.fa-shopping-bag:before{content:"\f290"}.fa-shopping-basket:before{content:"\f291"}.fa-hashtag:before{content:"\f292"}.fa-bluetooth:before{content:"\f293"}.fa-bluetooth-b:before{content:"\f294"}.fa-percent:before{content:"\f295"}.fa-gitlab:before{content:"\f296"}.fa-wpbeginner:before{content:"\f297"}.fa-wpforms:before{content:"\f298"}.fa-envira:before{content:"\f299"}.fa-universal-access:before{content:"\f29a"}.fa-wheelchair-alt:before{content:"\f29b"}.fa-question-circle-o:before{content:"\f29c"}.fa-blind:before{content:"\f29d"}.fa-audio-description:before{content:"\f29e"}.fa-volume-control-phone:before{content:"\f2a0"}.fa-braille:before{content:"\f2a1"}.fa-assistive-listening-systems:before{content:"\f2a2"}.fa-american-sign-language-interpreting:before,.fa-asl-interpreting:before{content:"\f2a3"}.fa-deaf:before,.fa-deafness:before,.fa-hard-of-hearing:before{content:"\f2a4"}.fa-glide:before{content:"\f2a5"}.fa-glide-g:before{content:"\f2a6"}.fa-sign-language:before,.fa-signing:before{content:"\f2a7"}.fa-low-vision:before{content:"\f2a8"}.fa-viadeo:before{content:"\f2a9"}.fa-viadeo-square:before{content:"\f2aa"}.fa-snapchat:before{content:"\f2ab"}.fa-snapchat-ghost:before{content:"\f2ac"}.fa-snapchat-square:before{content:"\f2ad"}.fa-pied-piper:before{content:"\f2ae"}.fa-first-order:before{content:"\f2b0"}.fa-yoast:before{content:"\f2b1"}.fa-themeisle:before{content:"\f2b2"}.fa-google-plus-circle:before,.fa-google-plus-official:before{content:"\f2b3"}.fa-fa:before,.fa-font-awesome:before{content:"\f2b4"}.fa-handshake-o:before{content:"\f2b5"}.fa-envelope-open:before{content:"\f2b6"}.fa-envelope-open-o:before{content:"\f2b7"}.fa-linode:before{content:"\f2b8"}.fa-address-book:before{content:"\f2b9"}.fa-address-book-o:before{content:"\f2ba"}.fa-address-card:before,.fa-vcard:before{content:"\f2bb"}.fa-address-card-o:before,.fa-vcard-o:before{content:"\f2bc"}.fa-user-circle:before{content:"\f2bd"}.fa-user-circle-o:before{content:"\f2be"}.fa-user-o:before{content:"\f2c0"}.fa-id-badge:before{content:"\f2c1"}.fa-drivers-license:before,.fa-id-card:before{content:"\f2c2"}.fa-drivers-license-o:before,.fa-id-card-o:before{content:"\f2c3"}.fa-quora:before{content:"\f2c4"}.fa-free-code-camp:before{content:"\f2c5"}.fa-telegram:before{content:"\f2c6"}.fa-thermometer-4:before,.fa-thermometer-full:before,.fa-thermometer:before{content:"\f2c7"}.fa-thermometer-3:before,.fa-thermometer-three-quarters:before{content:"\f2c8"}.fa-thermometer-2:before,.fa-thermometer-half:before{content:"\f2c9"}.fa-thermometer-1:before,.fa-thermometer-quarter:before{content:"\f2ca"}.fa-thermometer-0:before,.fa-thermometer-empty:before{content:"\f2cb"}.fa-shower:before{content:"\f2cc"}.fa-bath:before,.fa-bathtub:before,.fa-s15:before{content:"\f2cd"}.fa-podcast:before{content:"\f2ce"}.fa-window-maximize:before{content:"\f2d0"}.fa-window-minimize:before{content:"\f2d1"}.fa-window-restore:before{content:"\f2d2"}.fa-times-rectangle:before,.fa-window-close:before{content:"\f2d3"}.fa-times-rectangle-o:before,.fa-window-close-o:before{content:"\f2d4"}.fa-bandcamp:before{content:"\f2d5"}.fa-grav:before{content:"\f2d6"}.fa-etsy:before{content:"\f2d7"}.fa-imdb:before{content:"\f2d8"}.fa-ravelry:before{content:"\f2d9"}.fa-eercast:before{content:"\f2da"}.fa-microchip:before{content:"\f2db"}.fa-snowflake-o:before{content:"\f2dc"}.fa-superpowers:before{content:"\f2dd"}.fa-wpexplorer:before{content:"\f2de"}.fa-meetup:before{content:"\f2e0"}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.sr-only-focusable:active,.sr-only-focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto} /* 로딩 - 상세페이지 */ .disno div#preloader { position: absolute; left: 0; top: 0; z-index: 30; width: 100%; height: 99%; overflow: hidden; background: #fff url("//lifeggook.com/han/images/loading-gear2.gif") no-repeat center center; } /* 로딩 - 상품후기 */ .wrapper_boArea div#preloader { position: absolute; left: 0; top: 0; z-index: 30; width: 100%; height: 99%; overflow: hidden; background: #fff url("//lifeggook.com/han/images/loading-gear2.gif") no-repeat center center; } /* 특정폰트 엑박오류로 인한 처리 */ br { opacity:0; color:#fff; } /* 바디 회색 선 - 세로 */ .bodyline1 { position:fixed; width:50%; min-width:625px; height:100%; border-right:1px solid #f3f3f3; left:0%; margin-left:-.5px; top:0; z-index:-2; } .bodyline2 { position:fixed; width:78%; height:100%; min-width:1300px; max-width:1750px; top:0; border-left:1px solid #f3f3f3; border-right:1px solid #f3f3f3; z-index:-1; left:0; right:0; margin-left:auto; margin-right:auto; } /* 로그인바 */ .log_warp { position:relative; width:100%; height:40px; z-index:65; border-bottom:1px solid #ededed; background: #fdfdfd; } .log_left { float:left; } .log_right { float:right; } /* 헤더 */ .header_warp { position:relative; width:100%; height:190px; z-index:20; overflow:hidden; background: #fff; } .headerin { position:relative; width:88%; display: table; table-layout: fixed; z-index: 23; margin:0 auto; } .header_inner1 { position:absolute; top:0; left:0; width:280px; height:190px; z-index: 24; } .header_inner2 { position:relative; width:100%; height:130px; margin:0 auto; display: table; z-index: 23; text-align:center; } .header_inner3 { position:absolute; top:0; right:0; width:280px; height:130px; z-index: 24; } /* 공통사용 중앙정렬 가이드 */ #contents { position:relative; width:100%; height:auto; margin:0 auto 0px; display:block; min-height:1200px; } #contents_sub { position:relative; width:100%; height:auto; margin:0 auto 0px; display:block; min-width:1250px; max-width:2680px; min-height:1200px; } .guide_contents { position:relative; width:75%; /* 노출되는 중앙 넓이 비율 */ margin:0 auto; min-width:1250px; max-width:1680px; } .guide_100p { width:100%; margin:0 auto; } .guide_90p { width:90%; margin:0 auto; max-width:1680px; } /* 한스타일 공통 화살표 */ .hannavi_1 { position: absolute; text-align: center; display: block; width: 50px; height: 50px; line-height: 50px; top: 50%; margin-top: -25px; z-index:52; border:1px solid #e9e9e9; color:#111; cursor:pointer; background: url("//lifeggook.com/han/images/bg/bg_white.png") repeat; opacity:1; } .hannavi_1_area .hannavi_1 { opacity:0; border:1px solid #fff; color:#111; } .hannavi_1_area:hover .hannavi_1 { opacity:1; } .hannavi_1_area:hover .hannavi_1:hover, .hannavi_1:hover { opacity:1; text-decoration:none; border:1px solid #fff; } .hannavi_1 .fa {width:50px;height:50px;line-height:50px; text-align:center; display:block; font-size:30px; } .hannavi_1.dark { border:1px solid #111; color:#fff; background: url("//lifeggook.com/han/images/bg/bg_00070.png") repeat; } .hannavi_1:hover .fa { color:#fff; } .hannavi_1.mover_left { left:-20px; } .hannavi_1.mover_right { right:-20px; } .hannavi_1_area:hover .hannavi_1.mover_left { left:-1px; } .hannavi_1_area:hover .hannavi_1.mover_right { right:-1px; } .hannavi_1_area:hover .hannavi_1.mover_left .fa { color:#fff; } .hannavi_1_area:hover .hannavi_1.mover_right .fa { color:#fff; } .hannavi_img { position: absolute; text-align: center; display: block; width: 50px; height: 65px; line-height: 65px; top: 50%; margin-top: -32px; z-index:52; cursor:pointer; opacity:.5; } .darkarea .hannavi_img { opacity:.7; } .hannavi_img:hover { opacity:1; } .hannavi_1.medium { width: 30px; height: 30px; line-height: 30px; } .hannavi_1.medium .fa {width:30px;height:30px;line-height:30px; font-size:20px; } .hannavi_1.medium:hover .fa { color:#fff; } .hannavi_small { position: absolute; text-align: center; display: block; width: 25px; height: 25px; line-height: 25px; z-index:52; } .hannavi_small .fa { line-height: 25px; color:#111; font-size:25px; opacity:.5; } .hannavi_small:hover .fa { color:#fff; } .hannavi_1_area:hover .fa { opacity:1; } .hannavi_mini { position:absolute; left:15px; width:20px; height:20px; line-height:20px; border-radius:0; opacity:0; text-align:center; text-decoration:none; z-index:52; -webkit-transition: .2s; -moz-transition: .2s; -ms-transition: .2s; transition: .2s; } .hannavi_mini.mover_top { top:0px; } .hannavi_mini.mover_bottom { top:41px; } .hannavi_mini_area:hover > .mover_top { opacity:1; top:10px;} .hannavi_mini_area:hover > .mover_bottom { opacity:1; top:31px; } .hannavi_mini .fa { font-size:11px; width:20px; height:20px; display:block; line-height:18px; color:#fff; } .hannavi_mini:hover { -webkit-transition: 0s; -moz-transition: 0s; -ms-transition: 0s; transition: 0s; text-decoration:none; } .hannavi_mini:hover .fa { color:#fff; } .hannavi_mini2 { position:absolute; top:0px; width:30px; height:30px; line-height:30px; border-radius:0; opacity:0; text-align:center; text-decoration:none; z-index:52; -webkit-transition: .2s; -moz-transition: .2s; -ms-transition: .2s; transition: .2s; } .hannavi_mini2.mover_left { left:-10px; } .hannavi_mini2.mover_right { left:41px; } .hannavi_mini_area:hover > .mover_left { opacity:1; left:0px; } .hannavi_mini_area:hover > .mover_right { opacity:1; left:31px; } .hannavi_mini2 .fa { font-size:16px; width:30px; height:30px; display:block; line-height:28px; color:#fff; } .hannavi_mini2:hover { -webkit-transition: 0s; -moz-transition: 0s; -ms-transition: 0s; transition: 0s; text-decoration:none; cursor:pointer;} .hannavi_mini2:hover .fa { color:#fff; } .hannavi_mini3 { position:absolute; bottom:4px; width:20px; height:20px; line-height:20px; border-radius:0; text-align:center; text-decoration:none; z-index:62; } .hannavi_mini3 .fa { font-size:11px; width:20px; height:20px; display:block; line-height:18px; color:#fff; } .hannavi_mini3:hover .fa { color:#fff; } /* 한스타일 공통 css 화살표 */ .hanarrL { position: absolute; display: block; width: 50px; height: 50px; z-index:50; } .hanarrL a { display: block; width: 50px; height: 50px;} .hanarrL .bar { position: absolute; left:0; top:0; display: block; height: 2px; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; transition: all .2s ease; } .hanarrL .top { -webkit-transform: translateY(11px) rotateZ(-45deg); -moz-transform: translateY(11px) rotateZ(-45deg); -ms-transform: translateY(11px) rotateZ(-45deg); -o-transform: translateY(11px) rotateZ(-45deg); transform: translateY(11px) rotateZ(-45deg); width: 34px; } .hanarrL .middle { -webkit-transform: translateY(22.5px) translateX(6px); -moz-transform: translateY(22.5px) translateX(6px); -ms-transform: translateY(22.5px) translateX(6px); -o-transform: translateY(22.5px) translateX(6px); transform: translateY(22.5px) translateX(6px); width: 0px; } .hanarrL .bottom { -webkit-transform: translateY(34px) rotateZ(45deg); -moz-transform: translateY(34px) rotateZ(45deg); -ms-transform: translateY(34px) rotateZ(45deg); -o-transform: translateY(34px) rotateZ(45deg); transform: translateY(34px) rotateZ(45deg); width: 34px; } .hanarrL:hover .bar { } .hanarrL:hover .top { -webkit-transform: translateY(15px) rotateZ(-30deg); -moz-transform: translateY(15px) rotateZ(-30deg); -ms-transform: translateY(15px) rotateZ(-30deg); -o-transform: translateY(15px) rotateZ(-30deg); transform: translateY(17px) rotateZ(-30deg); width: 20px; } .hanarrL:hover .middle { -webkit-transform: translateY(22.5px) translateX(3px); -moz-transform: translateY(22.5px) translateX(3px); -ms-transform: translateY(22.5px) translateX(3px); -o-transform: translateY(22.5px) translateX(3px); transform: translateY(22.5px) translateX(3px); width: 80px; } .hanarrL:hover .bottom { -webkit-transform: translateY(26px) rotateZ(30deg); -moz-transform: translateY(26px) rotateZ(30deg); -ms-transform: translateY(26px) rotateZ(30deg); -o-transform: translateY(26px) rotateZ(30deg); transform: translateY(28px) rotateZ(30deg); width: 20px; } .hanarrR { position: absolute; display: block; width: 50px; height: 50px; z-index:50; } .hanarrR a { display: block; width: 50px; height: 50px;} .hanarrR .bar { position: absolute; right:0; top:0; display: block; height: 2px; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; transition: all .2s ease; } .hanarrR .top { -webkit-transform: translateY(11px) rotateZ(45deg); -moz-transform: translateY(11px) rotateZ(45deg); -ms-transform: translateY(11px) rotateZ(45deg); -o-transform: translateY(11px) rotateZ(45deg); transform: translateY(11px) rotateZ(45deg); width: 34px; } .hanarrR .middle { -webkit-transform: translateY(22.5px) translateX(-6px); -moz-transform: translateY(22.5px) translateX(-6px); -ms-transform: translateY(22.5px) translateX(-6px); -o-transform: translateY(22.5px) translateX(-6px); transform: translateY(22.5px) translateX(-6px); width: 0px; } .hanarrR .bottom { -webkit-transform: translateY(34px) rotateZ(-45deg); -moz-transform: translateY(34px) rotateZ(-45deg); -ms-transform: translateY(34px) rotateZ(-45deg); -o-transform: translateY(34px) rotateZ(-45deg); transform: translateY(34px) rotateZ(-45deg); width: 34px; } .hanarrR:hover .bar { } .hanarrR:hover .top { -webkit-transform: translateY(17px) rotateZ(30deg); -moz-transform: translateY(17px) rotateZ(30deg); -ms-transform: translateY(17px) rotateZ(30deg); -o-transform: translateY(17px) rotateZ(30deg); transform: translateY(17px) rotateZ(30deg); width: 20px; } .hanarrR:hover .middle { -webkit-transform: translateY(22.5px) translateX(-3px); -moz-transform: translateY(22.5px) translateX(-3px); -ms-transform: translateY(22.5px) translateX(-3px); -o-transform: translateY(22.5px) translateX(-3px); transform: translateY(22.5px) translateX(-3px); width: 80px; } .hanarrR:hover .bottom { -webkit-transform: translateY(28px) rotateZ(-30deg); -moz-transform: translateY(28px) rotateZ(-30deg); -ms-transform: translateY(28px) rotateZ(-30deg); -o-transform: translateY(28px) rotateZ(-30deg); transform: translateY(28px) rotateZ(-30deg); width: 20px; } /* 공통버튼 */ [class^='btnSubmit'], a[class^='btnSubmit'] { color:#fff; background-color:#232323; } [class^='btnSubmit']:not(.disabled):hover { color:#fff; background-color:#111; } /* 한스타일 공통 페이징 */ .hanpage_1 { position: absolute; height: 16px; width:100%; display:table; font-size: 0px; line-height: 0; z-index:10; } .hanpage_1 a, .hanpage_1 li { background: none; width: 6px; height: 6px; border-radius:50%; display: inline-block; cursor: pointer; margin: 0 2px; border:3px solid #ccc; text-decoration:none; transition: .2s; -webkit-transition: .2s; -moz-transition: .2s; } .hanpage_1 a span { font-size:0; } .hanpage_1 a:hover { } .hanpage_1 a.selected { } .hanpage_1.top { top:10px; right:10px; width:auto;} .hanpage_2 { position: absolute; height: 16px; width:100%; display:table; font-size: 0px; line-height: 0; z-index:10; } .hanpage_2 a, .hanpage_2 li { background: none; width: 9px; height: 9px; border-radius:50%; display: inline-block; cursor: pointer; margin: 0 2.5px; border:0px solid #ccc; background-color:#ccc; text-decoration:none; transition: .2s; -webkit-transition: .2s; -moz-transition: .2s; } .hanpage_2 a span { font-size:0; } .hanpage_2 a:hover { } .hanpage_2 a.selected { } .hanpage_2.top { top:10px; right:10px; width:auto;} .hanpage_3 { position: absolute; height: 16px; width:100%; display:table; font-size: 0px; line-height: 0; z-index:10; } .hanpage_3 a, .hanpage_3 li { background: none; width: 7px; height: 7px; border-radius:50%; display: inline-block; cursor: pointer; margin: 0 2px; border:0px solid #ccc; background-color:#ccc; text-decoration:none; transition: .2s; -webkit-transition: .2s; -moz-transition: .2s; } .hanpage_3 a span { font-size:0; } .hanpage_3 a:hover { } .hanpage_3 a.selected { } .hanpage_3.top { top:10px; right:10px; width:auto;} /* 한스타일 공통 슬라이더 */ .carousel_guide { position:relative; z-index:-1; display:block !important; } .carousel_guide img { width:100%; } .simple_slide { position:relative; width: 100%; height: auto; cursor:pointer; overflow:hidden; } .simple_slide ul { position:absolute; width: 100%; height: auto; top:0; left:0; z-index:8; } .simple_slide ul li img { width: 100%; height: auto; display:block; } /* 한스타일 공통 H2 */ .h2_han { position:relative; font-weight:400; letter-spacing:5px; font-size:27px; line-height:27px; color:#232323; text-align:center; z-index:30; margin-bottom:25px; z-index:10; } .h2_han span { position:relative; font-weight:400; letter-spacing:1px; font-size:17px; line-height:20px; display:block; text-align:center; margin-bottom:5px; } .darkarea .morehan a { color:#fff; } .darkarea .fa { color:#fff000; } .h2_han_big { position:relative; font-weight:400; letter-spacing:5px; font-size:35px; line-height:38px; color:#232323; text-align:center; z-index:30; margin-bottom:25px; z-index:10; } .h2_han_big span { position:relative; font-weight:400; letter-spacing:1px; font-size:24px; line-height:24px; display:block; text-align:center; margin-bottom:5px; } .darkarea .h2_han_big { color:#fff; } .darkarea .h2_han_big span { } .leftarea .h2_han_big { text-align:left; margin-left:1%; } .leftarea .h2_han_big span { text-align:left;} .h2_han_small { position:relative; font-size:30px; line-height:30px; font-weight:500; color:#232323; text-align:left; letter-spacing:1px; z-index:30; margin-bottom:10px; z-index:10; } .h2_han_small span { position:relative; font-weight:400; font-size:13px; letter-spacing:0px; text-align:left; margin-left:5px; color:#777; } /* 공통 딜레이 타임지정 */ .trans2 { transition: .2s; -webkit-transition: .2s; -moz-transition: .2s; } .trans3 { transition: .3s; -webkit-transition: .3s; -moz-transition: .3s; } .trans5 { transition: .5s; -webkit-transition: .5s; -moz-transition: .5s; } .del3s { transition-delay:0.3s; } /* 공통사용 상하간격 공백 / 뒤 숫자가 상하간격 픽셀값입니다 */ .hanblank_1 { position:relative; width:100%; height:1px; display:block; clear:both; } .hanblank_2 { position:relative; width:100%; height:2px; display:block; clear:both; } .hanblank_3 { position:relative; width:100%; height:3px; display:block; clear:both; } .hanblank_4 { position:relative; width:100%; height:4px; display:block; clear:both; } .hanblank_5 { position:relative; width:100%; height:5px; display:block; clear:both; } .hanblank_10 { position:relative; width:100%; height:10px; display:block; clear:both; } .hanblank_20 { position:relative; width:100%; height:20px; display:block; clear:both; } .hanblank_30 { position:relative; width:100%; height:30px; display:block; clear:both; } .hanblank_40 { position:relative; width:100%; height:40px; display:block; clear:both; } .hanblank_50 { position:relative; width:100%; height:50px; display:block; clear:both; } .hanblank_60 { position:relative; width:100%; height:60px; display:block; clear:both; } .hanblank_70 { position:relative; width:100%; height:70px; display:block; clear:both; } .hanblank_80 { position:relative; width:100%; height:80px; display:block; clear:both; } .hanblank_90 { position:relative; width:100%; height:90px; display:block; clear:both; } .hanblank_100 { position:relative; width:100%; height:100px; display:block; clear:both; } .hanblank_110 { position:relative; width:100%; height:110px; display:block; clear:both; } .hanblank_120 { position:relative; width:100%; height:120px; display:block; clear:both; } .hanblank_130 { position:relative; width:100%; height:130px; display:block; clear:both; } .hanblank_140 { position:relative; width:100%; height:140px; display:block; clear:both; } .hanblank_150 { position:relative; width:100%; height:150px; display:block; clear:both; } .hanblank_160 { position:relative; width:100%; height:160px; display:block; clear:both; } .hanblank_170 { position:relative; width:100%; height:170px; display:block; clear:both; } .hanblank_180 { position:relative; width:100%; height:180px; display:block; clear:both; } .hanblank_190 { position:relative; width:100%; height:190px; display:block; clear:both; } .hanblank_200 { position:relative; width:100%; height:200px; display:block; clear:both; } .hanblank_250 { position:relative; width:100%; height:250px; display:block; clear:both; } /* reset */ li { list-style:none; } table { width:100%; border:0; border-spacing:0; border-collapse:collapse; } caption { display:none; } h1, h3 { margin:0; } /* common */ .ec-base-layer { position:absolute; z-index:100; border:1px solid #757575; background:#fff; } .ec-base-layer .header { padding:7px 35px 7px 19px; color:#fff; background:#33353d; } .ec-base-layer .header > h1, .ec-base-layer .header > h3 { font-size:14px; line-height:1.5; } .ec-base-layer .content { padding:20px; font-size:12px; } .ec-base-layer div.ec-base-help { margin-top:0; } .ec-base-layer .ec-base-button { padding:9px; border-top:1px solid #d7d5d5; text-align:center; background:#fbfafa; } .ec-base-layer .close { position:absolute; right:0; top:0; padding:11px 20px; cursor:pointer; } /* popup */ #popup .ec-base-layer { position:relative; border:0; } #popup .ec-base-layer .header { padding:12px 35px 12px 19px; } #popup .ec-base-layer .close { top:5px; } /* ec-base-table */ .ec-base-layer .content > .ec-base-table table:first-child { margin-top:0; } .ec-base-layer .ec-base-table table { line-height:1.4; } .ec-base-layer .ec-base-table thead th { padding:9px 0 8px; } .ec-base-layer .ec-base-table tbody th { padding:9px 0 8px 10px; } .ec-base-layer .ec-base-table td { padding:9px 10px 8px; } /* horizontal - typeWrite */ .ec-base-layer .ec-base-table.typeWrite td { padding:5px 10px 4px; } /* vertical - typeList */ .ec-base-layer .ec-base-table.typeList tfoot td { padding:10px 10px 12px; } /* typeBorder */ .ec-base-layer .ec-base-table.typeBorder tfoot td { padding:10px 10px 12px; } .xans-layout-multishopshipping { display:none; } .xans-layout-multishopshipping .worldshipLayer { top:303px; left:50%; width:448px; margin:0 0 0 -225px; } .xans-layout-multishopshipping .worldshipLayer .content { padding:153px 20px 30px; line-height:1.8; background:url("//img.echosting.cafe24.com/skin/base/link/bg_worldship.gif") center 21px no-repeat; } .xans-layout-multishopshipping .worldshipLayer .content .desc { display:block; margin:4px 0 14px; } .xans-layout-multishopshipping .worldshipLayer .select { margin:10px 0 0; } .xans-layout-multishopshipping .worldshipLayer .select select { width:100%; } .xans-layout-conversionpc { background:#fff; padding:45px; text-align:center; } .xans-layout-conversionpc a { margin:20px; padding:20px 40px 20px 110px; font-size:68px; color:#63666e; text-decoration:none; text-align:center; border:4px solid #9d9db0; border-radius:10px; background:url("//img.echosting.cafe24.com/skin/base/layout/ico_mobile.png") no-repeat 40px 50%; } #toppop_noti { position:relative; width:100%; height: 0px; overflow:hidden; } #simple_slider_topbanner { position:absolute; width:2000px; height: 60px; top:0; left:50%; margin-left:-1000px; } #carousel_topbanner li { position:relative; text-align:center; width:100%; height: 60px; display:block; } #carousel_topbanner li a { position:relative; font-weight:700; font-size:13px; color:#fff; letter-spacing:1px; text-decoration:none; display:block; margin:0 auto; text-align:center;} #prev_simple_slider_topbanner , #next_simple_slider_topbanner { position:absolute; right:37px; margin-right:33px; width:31px; height:33px; line-height:33px; bottom:2px; text-align:center; text-decoration:none; } #next_simple_slider_topbanner { margin-right:0; } #prev_simple_slider_topbanner .fa , #next_simple_slider_topbanner .fa { font-size:14px; width:31px; height:33px; line-height:33px; display:block; color:#fff; cursor:pointer; } /* 페이징 - 숨김처리 */ #pager_toppop { width:20%; top:47px; bottom:auto; left:40%; display:none !important; text-align:center; } #pager_toppop.hanpage_3 a { background-color:#888; } #pager_toppop.hanpage_3 a.selected { background-color:#fff; } /* 닫기 버튼 */ .toppop_close { position:absolute; bottom:0px; right:0px; text-align:center; cursor:pointer; z-index:101; } .toppop_close .fa { position:relative; width:35px; height:35px; line-height:35px; font-size:17px !important; color:#fff; z-index:22; } /* 열기 버튼 */ .toppop_open { position:absolute; width:35px; height:35px; top:0px; right:0px; text-align:center; cursor:pointer; z-index:101; border-radius:0 0 50% 50%; } .toppop_open .fa { position:relative; width:35px; height:35px; border-radius: 0; font-size:23px !important; color:#fff; line-height:35px; z-index:22; } /* 로그인바 - 회사소개외 */ .log_left p { position:relative; height:40px; line-height:40px; padding:0 20px; float:left; background:#fdfdfd; transition: .2s; -webkit-transition: .2s; -moz-transition: .2s; } .log_left p a { position:relative; color:#555; font-size:12px; letter-spacing:0px; display:block; } .log_left p:hover > a { text-decoration:none; color:#111; } .log_left p.homebtn { padding:0 30px; border-left:1px solid #ededed; border-right:1px solid #ededed; border-bottom:1px solid #fff; background:#fff; } .log_left p.homebtn a { color:#111; font-size:14px; font-weight:500; } /* 로그인바 - 로그인등 항목 */ .memberlog { float:left; } .memberlog ul li { position:relative; height:40px; line-height:40px; margin-left:4px; padding-left:4px; float:left; } .memberlog ul li a { position:relative; color:#555; font-size:12px; padding:0 4px; display:block; letter-spacing:0px; } .memberlog ul li:hover > a { text-decoration:none; color:#111; } .memberlog ul li a .bline { position:absolute; bottom:0; left:50%; width:0px; height:1px; background:#ddd; transition: .2s; -webkit-transition: .2s; -moz-transition: .2s; } .memberlog ul li a:hover > .bline { left:0%; width:100%; } /* 로그인바 - 장바구니 관심상품 즐겨찾기 버튼 */ .btnarea { float:left; } .btnarea .xans-layout-shoppinginfo li { position:relative; width:auto; height:40px; line-height:40px; margin-left:10px; float:left; } .btnarea .xans-layout-shoppinginfo li a { position:relative; color:#555; font-size:12px; letter-spacing:0px; padding:0 4px; } .btnarea .xans-layout-shoppinginfo li:hover > a { text-decoration:none; color:#111; } .btnarea .xans-layout-shoppinginfo li strong { font-weight:400; } .btnarea .xans-layout-shoppinginfo li .bline { position:absolute; bottom:0; left:50%; width:0px; height:1px; background:#ddd; transition: .2s; -webkit-transition: .2s; -moz-transition: .2s; } .btnarea .xans-layout-shoppinginfo li:hover > .bline { left:0%; width:100%; } /* 마이쇼핑 */ .navpop { position:relative; height:40px; line-height:40px; text-align:center; display: inline-block; } .navpop ul.navpopul { position: absolute; width:120px; top:40px; left:50%; margin-left:-64px; background: url("//lifeggook.com/han/images/bg/bg_white3.png") repeat; border:1px solid #ededed; padding:3px; text-align:left; } .navpop ul.navpopul li { width:120px; height:27px; line-height:27px; margin:0 0 0; } .navpop ul.navpopul li a { display: block; color:#111; font-size:11px; text-indent:5px; } .navpop ul.navpopul li:hover a { text-decoration:none; color:#fff; } /* 서브 사이드 메뉴 */ #catepop_warp { position: fixed; width: 300px; height: 100%; background:#fff; top: 0px; left:-310px; z-index:1100; -webkit-box-shadow: 2px 3px 8px 0px rgba(0,0,0,.1); -moz-box-shadow: 2px 3px 8px 0px rgba(0,0,0,.1); box-shadow: 2px 3px 8px 0px rgba(0,0,0,.1); } .catepop_in { position:relative; height:100%; display:block; } .catepop_inguide { position:relative; width:1px; height: 40%; display:inline-block; margin-left:-10px; } /* join 버튼 */ #catepop_warp .loginbtn { width:100%; height:70px; line-height:70px; } #catepop_warp .loginbtn a { font-size:14px; color:#666; font-weight:300; } #catepop_warp .loginbtn a strong { font-weight:500; font-size:22px; color:#111; margin-right:5px; } #catepop_warp .loginbtn .fa { font-size:22px; margin-left:25px; margin-right:5px; color:#111; } /* sns아이콘 */ #catepop_warp .follow { position:absolute; bottom:0; width:100%; height:100px; text-align:Center; } #catepop_warp .follow h3 { font-size:16px; color:#999; text-align:Center; letter-spacing:1px; } #catepop_warp .follow li { display:inline-block; width:40px; height:40px; margin:10px 1px 0; border-radius:3px; overflow:hidden; } #catepop_warp .follow li img { width:40px; height:40px; margin-left:0px; margin-top:0px; transition: .2s; -webkit-transition: .2s; -moz-transition: .2s; } #catepop_warp .follow li:hover img { width:50px; height:50px; margin-left:-5px; margin-top:-5px; } /* 토글 */ #cate_bar { position: relative; width: 100%; display:inline-block; vertical-align:middle; } #cate_bar_inner { position: relative; width: 100%;; height: auto; } #cate_bar_inner dl { position: relative; height: auto; line-height:55px; font-size:18px; color:#343434; text-align:left; letter-spacing:1px; background:#fff; text-indent:25px; } #cate_bar_inner dt { position: relative; width: 100%; height: auto; padding-bottom: 0px; padding-top: 0px; } #cate_bar_inner dd { position: relative; width: 100%; margin: 0px; padding: 0px; } #cate_bar_inner .slide_tap { position: relative; width: 100%; height: auto; margin: 0px; padding: 0px; } #cate_bar_inner dd ul { position: relative; width: 100%; height: auto; display: none; background:#fff; padding-bottom:5px; } #cate_bar_inner dd ul.firstul { display: block; } #cate_bar_inner dd > ul > li { position: relative; width: 100%; height:40px; line-height:40px; font-size: 15px; text-align: left; text-indent:50px; letter-spacing:0px; transition: .2s; -webkit-transition: .2s; -moz-transition: .2s; } #cate_bar_inner dd > ul > li > a { display: block; color:#777; } #cate_bar_inner dd > ul > li:hover { text-indent:60px; } #cate_bar_inner dd > ul > li:hover > a { color:#000; text-decoration:none; } #cate_bar_inner dd div { position: relative; width: 100%; text-align: center; cursor: pointer; } #cate_bar_inner .bar_arrow { position:absolute; left:0px; top:-55px; width:100%; height:55px; } #cate_bar_inner .bar_arrow img { position:absolute; right:30px; top:22px; } /* 전체카테고리 대분류 */ #cate_bar_inner .catedep1 { position:relative; text-align:left; width:100%; margin:0 auto; display:table; } #cate_bar_inner .catedep1 .catedep1_li { position:relative; width:100%; display:block; vertical-align:top; } #cate_bar_inner .catedep1 .catedep1_li > a { text-overflow:ellipsis; white-space:nowrap; overflow:hidden; } #cate_bar_inner .catedep1 .catedep1_li:hover { } #cate_bar_inner .catedep1 .catedep1_li:hover > a { border-bottom:1px solid #e9e9e9; } #cate_bar_inner .catedep1 .onarr { } #cate_bar_inner .catedep1 .onarr2:after { content: ''; position: absolute; width:10px; height: 10px; top: 14px; right:-65px; width: 100%; background: url("//lifeggook.com/han/images/onarr.png") no-repeat top center; z-index:10; opacity:.7; } #cate_bar_inner .catedep1 .onarr3:after { content: ''; position: absolute; width:10px; height: 10px; top: 14px; right:-65px; width: 100%; background: url("//lifeggook.com/han/images/onarr.png") no-repeat top center; z-index:10; opacity:.7; } /* 전체카테고리 2차분류 */ #cate_bar_inner .catedep2 { position: absolute; display: none; height:auto; top: 0px; width: 200px; left: 80%; padding:5px; border:1px solid #e9e9e9; background:#fff; } #cate_bar_inner .catedep2 .catedep2_li { position: relative; width: 100%; height:auto; line-height:35px; padding:0px; margin:0; text-indent:15px; transition: .2s; -webkit-transition: .2s; -moz-transition: .2s;} #cate_bar_inner .catedep2 .catedep2_li > a { position: relative; font-size:13px; color:#777; } #cate_bar_inner .catedep2 .catedep2_li:hover { text-indent:20px; } #cate_bar_inner .catedep2 .catedep2_li:hover > a { text-decoration:none; color:#111; } /* 전체카테고리 3/4차분류 */ #cate_bar_inner .catedep3 { position: absolute; display: none; height:auto; top: 0px; width: 170px; left: 90%; padding:5px; border:1px solid #e9e9e9; background:#fff; } #cate_bar_inner .catedep4 { position: absolute; display: none; height:auto; top: -1px; width: 170px; left: 90%; padding:5px; border:1px solid #e9e9e9; background:#fff; } #cate_bar_inner .catedep3_li, #cate_bar_inner .catedep4_li { position: relative; width: 170px; height:35px; line-height:35px; text-align:left; text-indent:15px; transition: .2s; -webkit-transition: .2s; -moz-transition: .2s;} #cate_bar_inner .catedep3_li a, #cate_bar_inner .catedep4_li a { position: relative; font-size:13px; color:#777; } #cate_bar_inner .catedep3_li.active , #cate_bar_inner .catedep4_li.active { text-indent:20px; } #cate_bar_inner .catedep3_li.active > a, #cate_bar_inner .catedep4_li.active > a { color:#111; text-decoration:none; } /* 스크롤바 */ .cusscrbar::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1); background-color: #fff; } .cusscrbar::-webkit-scrollbar { width: 5px; background-color: #F5F5F5; } .cusscrbar::-webkit-scrollbar-thumb { background-color: #777; border: 2px solid #999; } /* 전체카테고리 단추 */ .catepop_open .col { display: block; width: 230px; height: 50px; position: absolute; top:12px; left:0px; display:block; border-radius:5px 5px 0 0; transition: .2s; -webkit-transition: .2s; -moz-transition: .2s; } .catepop_open p { position: absolute; top:14px; left:94px; font-size:16px; font-weight:700; color:#fff; } .catepop_open .con { position:relative; cursor: pointer; display: inline-block; padding:17px 0 0 66px; } .catepop_open .bar { display: block; height: 2px; width: 18px; background: #fff; margin: 3px auto; } .catepop_open .con { width: auto; margin: 0 auto; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .catepop_open:hover .bar { background:#fff260; } .catepop_open:hover p { color:#fff260; transition: .3s; -webkit-transition: .3s; -moz-transition: .3s; } .catepop_open .middle { margin: 0 auto; } .catepop_open .bar { -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .catepop_openon .con .top { -webkit-transform: translateY(5px) rotateZ(45deg); -moz-transform: translateY(5px) rotateZ(45deg); -ms-transform: translateY(5px) rotateZ(45deg); -o-transform: translateY(5px) rotateZ(45deg); transform: translateY(5px) rotateZ(45deg); } .catepop_openon .con .bottom { -webkit-transform: translateY(-5px) rotateZ(-45deg); -moz-transform: translateY(-5px) rotateZ(-45deg); -ms-transform: translateY(-5px) rotateZ(-45deg); -o-transform: translateY(-5px) rotateZ(-45deg); transform: translateY(-5px) rotateZ(-45deg); } .catepop_openon .con .middle { width: 0; } /* 블랙배경 */ .reveal-modal-catebg { position: fixed; height: 100%; width: 100%; background:url("//lifeggook.com/han/images/bg/bg_modal2.png") repeat; z-index: 1099; top: 0; left: 0; display:none; } /* 닫기 버튼 */ .catepop_close { position:absolute; top:3px; right:0px; text-align:center; cursor:pointer; } .catepop_close .fa { position:relative; width:70px; height:70px; line-height:70px; font-size:23px; color:#111; } .xans-layout-multishoplist.thumb { float:left; position:relative; height:40px; line-height:40px; margin:0 5px 0 0px; } .xans-layout-multishoplist.thumb > ul { overflow:hidden; } .xans-layout-multishoplist.thumb > ul li { float:left; width:32px; margin:8px 4px 0 0; } .xans-layout-multishoplist.thumb > ul li a { text-decoration:none; } .xans-layout-multishoplist .multiOption a { display:inline-block; height:24px; line-height:24px; color:#666; } .xans-layout-multishoplist .multiOption a:hover { text-decoration:none; } .xans-layout-multishoplist .multiOption .ship, .xans-layout-multishoplist .multiOption .language { margin:0 15px 0 0; } .xans-layout-multishoplist .multiOption .language img { margin:0 6px 0 1px; } #simple_slider_header { position:relative; width: 280px; height: 190px; cursor:pointer; float:left; } #carousel_header { width: 280px; height: 190px; overflow:hidden; } #prev_simple_slider_header1 , #next_simple_slider_header1 { position:absolute; right:-10px; width:20px; height:20px; line-height:20px; display:block; background: #fff; text-align:center; opacity:0; } #prev_simple_slider_header1 { top:13px; } #next_simple_slider_header1 { top:34px; } #prev_simple_slider_header1 .fa , #next_simple_slider_header1 .fa { font-size:11px; width:20px; height:20px; line-height:20px; color:#fff; } #simple_slider_header:hover > #next_simple_slider_header1 , #simple_slider_header:hover > #prev_simple_slider_header1 { background:url("//lifeggook.com/han/images/bg/bg_00050.png") repeat; opacity:1; } #next_simple_slider_header1:hover .fa, #prev_simple_slider_header1:hover .fa { color:#fff; } #pager_header { bottom:75px; text-align:left; margin-left:5px; } /* 헤더중앙 검색창 */ .header_inner3 .xans-layout-searchheader { position:relative; width:260px; top:40px; float:right; } .header_inner3 .xans-layout-searchheader fieldset { position:relative; border:0px solid; width:260px; height:40px; z-index:12; border-radius:20px; } .header_inner3 .xans-layout-searchheader #keyword { width:220px; height:40px; padding:0 0 0 0; border:0; line-height:40px; font-size:13px; color:#fff; font-weight:600; background:none; text-indent:14px; letter-spacing:-0.5px;z-index:12; margin-top:2px;} .header_inner3 .xans-layout-searchheader .SearchHeader_btn { position:relative; float:right; width:40px; height:40px; cursor:pointer; } .header_inner3 .xans-layout-searchheader .SearchHeader_btn img { width:30px; height:30px; margin-top:5px; } .header_inner3 .xans-layout-searchheader #keyword:focus { } /* 인기검색어 */ .header_inner3 .popular { position:relative; margin-left:10px; margin-top:5px; width:243px; height:20px; float:left; } .header_inner3 .popularh2 { position:relative; width:70px; line-height:20px; color:#111; text-align:center; float:left; font-size:12px; } #carousel_popular { position:relative; float:left; width:130px; height:20px; overflow:hidden; transition: .3s; -webkit-transition: .3s; -moz-transition: .3s; transition-delay:0.5s; } .header_inner3 .popular:hover #carousel_popular { height:40px; transition-delay:0s; } .header_inner3 .popular ul { width:130px; height:20px; overflow:hidden; text-align:center;} .header_inner3 .popular li { width:130px; height:20px; line-height:21px; color:#111; text-align:left; text-indent:3px; overflow:hidden; } .header_inner3 .popular li a { color:#111; font-size:13px; } .header_inner3 .popular a:hover { text-decoration:none; font-weight:400; } .header_inner3 .popular li span { position:relative; float:left; width:15px; height:15px; line-height:15px; font-size:10px; margin:3px; text-align:center; text-indent:0px; color:#fff; } #prev_popular , #next_popular { position:absolute; top:3px; width:15px; height:15px; line-height:15px; display:block; text-align:center; opacity:1; border:1px solid #e5e5e5; background:#fff; } #prev_popular { right:7px; } #next_popular { right:27px; } #prev_popular .fa , #next_popular .fa { font-size:11px; width:16px; height:16px; line-height:16px; color:#111; } #prev_popular:hover , #next_popular:hover { } #prev_popular:hover .fa , #next_popular:hover .fa { color:#fff; } /* 팝업 검색창 */ #search_zone { position: fixed; height: 100%; width: 100%; z-index: 1000; top: 0; left: 0; display:none; } .search_zone { width: 510px; height: 350px; margin: -150px 0 0 -255px; position: fixed; left: 50%; top: 50%; z-index:1011; overflow:hidden; } .reveal-modal-searchbg { height: 100%; width: 100%; background:url("//lifeggook.com/han/images/bg/bg_modal2.png") repeat; z-index: 1001; top: 0; left: 0; } .search_close { position: fixed; left: 50%; top: 50%; margin-left:350px; margin-top:-200px; z-index:1220; cursor:pointer; } .search_close .fa { color:#fff; font-size:35px; } .search_zone h2 { color:#fff; line-height:20px; font-size:20px; font-weight:500; text-indent:0px; } /* 검색창 */ .search_zone .xans-layout-searchheader { position:relative; width:510px; top:20px; margin:0 auto;} .search_zone .xans-layout-searchheader fieldset { position:relative; border-bottom:3px solid #fff; width:510px; height:60px; overflow:hidden; z-index:12; } .search_zone .xans-layout-searchheader #keyword { width:450px; height:45px; padding:0 0 0 0; border:0; color:#ffff00; line-height:40px; font-size:34px; margin-top:5px; font-weight:600; text-indent:15px; letter-spacing:-1.5px;z-index:12; background:none; } .search_zone .xans-layout-searchheader .SearchHeader_btn { position:relative; float:right; width:60px; height:60px; cursor:pointer; } .search_zone .xans-layout-searchheader .SearchHeader_btn img { width:60px; height:60px; } .search_zone .xans-layout-searchheader #keyword:focus { outline:0 !important; border:0 !important; background:none !important; } /* 검색창 - 인기검색어 */ .search_zone .xans-layout-searchheader .popular { position:relative; width:510px; margin-top:70px; color:#fff; font-weight:400; line-height:30px; font-size:15px; } .search_zone .xans-layout-searchheader .popular h2 { margin-bottom:20px; } .search_zone .xans-layout-searchheader .popular p { margin-left:0px; } .search_zone .xans-layout-searchheader .popular p a { margin:0 10px 0 0; padding:0 0 0 10px; color:#fff; background:url("http://img.echosting.cafe24.com/skin/base_ko_KR/product/bg_popular_search.gif") no-repeat 0 13px; } .search_zone .xans-layout-searchheader .popular p a:first-child { padding-left:0; background:none; } .search_zone .xans-layout-searchheader .popular a:hover { text-decoration:none; color:#ffff00; } /* 상단 카테고리 */ .topcate_sub { position:relative; height:60px; border-top:1px solid #eee; border-bottom:3px solid; } .topcate_sub .sub_1 { position:absolute; top:0; left:0; width: 100%; height: 60px; float:left; text-align:left; z-index:22; } .topcate_sub .sub_2 { position:relative; width: auto; float:left; display: table; margin-left:240px; padding-right: 170px; z-index:23; } .topcate_sub .sub_2 ul {display: table; table-layout: fixed; width:100%; margin:0 auto; } .topcate_sub .sub_2 ul > li { position:relative; width:auto; text-align:center; display: table-cell; height:60px; line-height:60px; } .topcate_sub .sub_2 ul > li a { color:#121212; font-size:14px; font-weight:400; display:block; } .topcate_sub .sub_2 ul > li:hover > a { color:#111; text-decoration:none; font-weight:600; } .topcate_sub .sub_3 { position:absolute; top:0; right:0; width: 160px; height: 60px; float:right; z-index:24; } /* 상단 따라다니는 영역 */ #toparea_warp { position:relative; width:100%; height: 60px; margin-top:-60px; background:url("//lifeggook.com/han/images/bg/bg_white.png") repeat; z-index:60; transition: .5s; -webkit-transition: .5s; -moz-transition: .5s; } #toparea_warp.fixed { position:fixed; margin-top:0px; top:-1px; background:#fff; } /* 카테고리 우측 아이콘 */ .header_icon { position:absolute; top:14px; right:5px; width:auto; } .header_icon li { position:relative; float:left; margin-right:10px; text-align:center; transition: .2s; -webkit-transition: .2s; -moz-transition: .2s; } .header_icon li:nth-child(1) { width:36px; height:36px; border-radius:15%; cursor:pointer; } .header_icon li:nth-child(1) .fa { color:#fff; font-size:14px; margin:11px auto 0;} .header_icon li:nth-child(2) { width:36px; height:36px; border-radius:15%;} .header_icon li:nth-child(2) .fa { color:#fff; font-size:14px; margin:11px auto 0;} .header_icon li:nth-child(3) { width:36px; height:36px; border-radius:15%;} .header_icon li:nth-child(3) .fa { color:#fff; font-size:13px; margin:12px auto 0;} .header_icon li:hover { border-radius:50%; } .header_icon .xans-layout-shoppinginfo .countnm { position:absolute; right:-9px; top:-3px;display:block; width:auto; height:23px; background:url("//lifeggook.com/han/images/bg/bg_00050.png") no-repeat; color:#fff; border-radius:12.5px; text-align:center; margin-left:2px; z-index:10; } .header_icon .xans-layout-shoppinginfo .countnm span { font-size:9px; line-height:23px; padding:0 4px; font-weight:200;} /*좌측 따라다니는 메뉴 버튼관련 */ #menu_warp_in { position: absolute; display:block; top: 0px; left:0px; color:#fff; width:224px; height:60px; } #btn_open { position: absolute; border:3px solid; width: 224px; height: 50px; display:block; margin-top:0px; border-radius:0 0 5px 5px; z-index:15; } .btn_open { opacity:0; } .btn_open_fix { margin-top:60px !important; opacity:1; } #btn_open .fa { position: relative; top:12px; left:37px; } #btn_open .lin1 { position: absolute; left:80px; top:8px; font-size:14px; letter-spacing:1px; } #btn_open .lin2 { position: absolute; left:80px; top:25px; font-size:11px;} #open_nav_inner { position: absolute; display:block; left:0px; top:60px; } .default_open { margin-top:0; } .fixed_open { margin-top:-1500px; } #menu_warp_in:hover .fixed_open { margin-top:0; } .subtop #btn_open { margin-top:60px; } .subtop .btn_open { opacity:1; } .subtop .btn_open_fix { top:0px !important; } .subtop .default_open { margin-top:-1500px; } .subtop #menu_warp_in:hover .default_open { margin-top:0; } @media all and (min-width:1px) and (max-width:1280px) { #btn_open { margin-top:60px; } .btn_open { opacity:1; } .btn_open_fix { top:0px !important; opacity:1; } .default_open { margin-top:-1500px; } #menu_warp_in:hover .default_open { margin-top:0; } } /*좌측메뉴 */ .leftcate_warp { position:relative; width:224px; height: auto; z-index:21; border:3px solid; } /* 카테고리 대분류 */ .leftcate_warp .catedep1 { border-top:1px solid; } .leftcate_warp .catedep1_li { position:relative; display:block; width:224px; height: 42px; line-height:42px; font-size:13px; font-weight:500; list-style: none; margin: 0 0; border-top:1px solid; border-bottom:1px solid; text-indent:10px; } .leftcate_warp .catedep1_li > a { display: block; color:#fff; } .leftcate_warp .catedep1_li.active > a , .leftcate_warp .catedep1_li:hover > a { text-decoration:none; color:#fdf048; } .leftcate_warp .catedep1_li:first-child { } .leftcate_warp .catedep1_li:last-child { border-bottom:0 !important; } /* 카테고리 2차분류 팝업시 베너*/ .leftcate_warp .catedep1 .onarr { } .leftcate_warp .catedep1 .onarr2:after { content: ''; position: absolute; width:10px; height: 10px; top: 10px; right:-75px; width: 100%; background: url("//lifeggook.com/han/images/onarr.png") no-repeat top center; z-index:10;} .leftcate_warp .catedep1 .onarr3:after { content: ''; position: absolute; width:10px; height: 10px; top: 10px; right:-65px; width: 100%; background: url("//lifeggook.com/han/images/onarr.png") no-repeat top center; z-index:10;} /* 카테고리 2차분류 */ .leftcate_warp .catedep2 { position: absolute; display: none; width: 200px; height:auto; top: 0px; left: 210px; padding:10px 0; background:#fff; border:3px solid; } .leftcate_warp .catedep2:hover { } .leftcate_warp .catedep2 .catedep2_li { position:relative; text-align:left; width: 180px; height:30px; line-height:30px; font-size:12px; font-weight:400; line-height:30px; margin:0 10px 0; } .leftcate_warp .catedep2 .catedep2_li:first-child { } .leftcate_warp .catedep2 .catedep2_li a { display: block; color:#111; text-indent:5px; -webkit-transition: .2s; -moz-transition: .2s; -ms-transition: .2s; transition: .2s; } .leftcate_warp .catedep2 .catedep2_li.active > a { height:30px; color:#fff; text-indent:12px; text-decoration:none; } /* 카테고리 3/4차분류 */ .leftcate_warp .catedep3 { position: absolute; display: none; width: 170px; height:auto; left: 160px; top: 0px; border:2px solid; background:#fff; padding:5px 0 10px; } .leftcate_warp .catedep4 { position: absolute; display: none; width: 170px; height:auto; left: 135px; top: 0px; border:2px solid; background:#fff; padding:5px 0 10px; } .leftcate_warp .catedep3 .catedep3_li, .leftcate_warp .catedep4 .catedep4_li { position: relative; width: 150px; height:30px; padding:0px; font-size:12px; line-height:30px; margin:5px 10px 0; } .leftcate_warp .catedep3 .catedep3_li a, .leftcate_warp .catedep4 .catedep4_li a { display: block; color:#111; text-indent:5px; -webkit-transition: .2s; -moz-transition: .2s; -ms-transition: .2s; transition: .2s; } .leftcate_warp .catedep3 .catedep3_li.active > a, .leftcate_warp .catedep4 .catedep4_li.active > a { color:#111; text-indent:10px; text-decoration:none; } /* 커뮤니티 */ .nav_board { position:relative; height:60px; line-height:60px; text-align:center; z-index:22; } .nav_board > a { font-size:14px; font-weight:400; color:#111; } .nav_board:hover > a { text-decoration:none; color:#111; } .nav_board ul.jjj { position: absolute; width:170px; top:60px; left:50%; margin-left:-88px; background: #fff; border:3px solid; padding:10px 0;} .nav_board ul.jjj li { width:150px; height:30px; line-height:30px; margin:0 10px; text-indent:10px; float:none; display: block; text-align:left; } .nav_board ul.jjj li a { display: block; color:#111; font-size:12px; font-weight:400; } .nav_board ul.jjj li:hover a { text-decoration:none; color:#fff; font-weight:500; } @media all and (min-width:1px) and (max-width:1480px) { .nav_board > a { } } /* 페이드인 효과 */ .nav_board .jjj { -webkit-animation:fadeInUp .3s; -moz-animation:fadeInUp .3s; -ms-animation:fadeInUp .3s; animation:fadeInUp .3s; } #left_cate .catedep3, #left_cate .catedep4 { -webkit-animation:fadeInRight .3s; -moz-animation:fadeInRight .3s; -ms-animation:fadeInRight .3s; animation:fadeInLeft .3s; } #left_cate .catedep2 { -webkit-animation:fadeInRight .3s; -moz-animation:fadeInRight .3s; -ms-animation:fadeInRight .3s; animation:fadeInRight .3s; } .footer_line1 { width:100%; height:120px; padding-top:30px; background:#f3f3f3; } .footer_line1 > div > div { position:relative; float:left; display:inline-block; margin:0px auto; } .Farea1 { width:auto; height:100px; padding:0 50px 0 0; } .Farea2 { width:auto; height:100px; padding:0 0 0 50px; } /* 고객센터 */ .Farea1 .num_big { font-size:33px; line-height:33px; color:#111; letter-spacing:-1px; } .Farea1 .num_big strong { font-weight:500; } .Farea1 .num_small { font-size:13px; line-height:22px; color:#555; font-weight:300;} /* 계좌안내 */ .Farea2 .num_big { color:#555; line-height:33px; } .Farea2 .num_big span { width:40px; display:inline-block; float:left; font-size:13px; } .Farea2 .num_big strong { font-size:33px; color:#111;line-height:33px; font-weight:500; letter-spacing:-1px; } .Farea2 .num_small { font-size:13px; line-height:22px; color:#555; font-weight:300; } /* 홈 회사소개 이용약관 등 */ .footer_line2 { position:relative; width:100%; height:40px; border-top:1px solid #e9e9e9; z-index:30; } .footer_line2 .guide_contents { position:relative; height:40px; background:#fff; } .footer_line2 .utilMenu { overflow:hidden; height:40px; line-height:60px; *zoom:1; float:left; margin-left:-15px;} .footer_line2 .utilMenu li { float:left; padding-right:15px; margin-left:15px; font-size:14px; font-family:'GmarketSansLight' } .footer_line2 .utilMenu li a { position:relative; color:#333; text-decoration:none; } .footer_line2 .utilMenu li:hover a { color:#111; } .footer_line2 .logline { width:1px; height:10px; margin-top:26px; background:#ddd; float:left; } .footer_line2 .utilMenu li > a:after { content : ""; position:absolute; left:-7px; bottom:0px; width:0%; height:6px; background:#fdf048; z-index:-1; } .footer_line2 .utilMenu li:hover > a:after { width:100%; padding:0 7px; transition: all 0.3s ease 0s; } /* sns아이콘 */ .snsline_right { position: relative; width:auto; height:60px; float:right; display:table; z-index:10; margin-top:-70px; } .snsline_right ul { margin-top:10px; } .snsline_right li { float:left; width:40px; height:40px; margin-left:5px; border-radius:3px; overflow:hidden; } .snsline_right li img { width:40px; height:40px; margin-left:0px; margin-top:0px; transition: .2s; -webkit-transition: .2s; -moz-transition: .2s; } .snsline_right li:hover img { width:50px; height:50px; margin-left:-5px; margin-top:-5px; } .footer_line3 { height:150px; } .footer_line3 .guide_contents { position:relative; height:130px; padding:10px 0; background:#fff; } /* 법인명 대표자 등 */ .xans-layout-footer { position:relative; width:100%; margin:0 auto; } .xans-layout-footer .address { padding:12px 0; color:#888; line-height:25px; font-size:13px; } .xans-layout-footer .address span { padding:0 25px 0 0; } .xans-layout-footer .address span a { color:#777; } /* 하단로고*/ .footer_line3 .blogo { position:absolute; right:0; top:0px; } /* 하단 링크아이콘 */ .foot_link { position:absolute; width:700px; right:0; top:90px;} .foot_link ul li { position:relative; float:right; } .foot_link ul li img { width:80%; float:right; } /* 하단 카피라이터 */ .footer .copyright { position:relative; width:100%; height:35px; line-height:35px; text-align:center; color:#fff; font-size:12px; font-weight:400;} .xans-myshop-boardlist .notice .subject { font-weight:bold; word-break:break-all; word-wrap:break-word; } .xans-myshop-boardlisthead { margin:0 0 10px; } .xans-myshop-boardlist { margin:0 0 10px; } .xans-myshop-boardlist table { border:1px solid #d7d5d5; color:#353535; font-size:12px; line-height:1.4em; } .xans-myshop-boardlist table th { padding:12px 0 10px; border-right:1px solid #e3e3e3; background:#fbfafa; font-weight:normal; } .xans-myshop-boardlist table td { padding:6px 3px 4px; height:32px; border-top:1px solid #e3e3e3; border-right:1px solid #e3e3e3; text-align:center; vertical-align:middle; white-space: nowrap; text-overflow: ellipsis; overflow:hidden; } .xans-myshop-boardlist table th:last-child, .xans-myshop-boardlist table td:last-child { border-right:none; } .xans-myshop-boardlist table a, .xans-myshop-boardlist table a:hover { color:#000; } .xans-myshop-boardlist table .subject { word-break:break-all; text-align:left; padding-left:8px; } .xans-myshop-boardlist table .subject img { vertical-align:middle; margin:0 1px; } .xans-myshop-boardlist table .txtLess { color:#939393; font-size:11px; } .xans-myshop-boardlist table .category a { color:#7ca6d8; } .xans-myshop-boardlist table tbody.notice .subject { font-weight:bold; } .ajax_add .xans-myshop-boardlist table td.subject { width:180px; height:20px; overflow:hidden; } .ajax_add .xans-myshop-boardlist table a, .ajax_add .xans-myshop-boardlist table a:hover { color:#777; } /* 우측바 */ .sidemenu { position:fixed; right:-400px; top:0px; width:400px; height:100%; background:#fff; z-index:1000; border-left:1px solid #eee; display:none;} .sidemenu_inner { width:320px; height:100%; padding:40px; overflow-y:auto;} .sidemenu_btn { position:absolute; left:-60px; bottom:620px; width:50px; height:50px; z-index:1001; cursor:pointer; overflow:hidden; text-align:center; border-radius:20%; transition: .2s; -webkit-transition: .2s; -moz-transition: .2s; } .sidemenu_btn .fa { width:50px; height:50px; line-height:50px; text-align:center; display:block; color:#fff; font-size:16px; } .sidemenu_btn:hover { border-radius:50%; } .sidemenu_btn:hover .fa { font-size:20px; } .sidemenu a:hover, .sidemenu:hover a { text-decoration:none; } /* 우측바 타이틀 공통 */ h2.sidemenu_h2 { position:relative; font-weight:700; font-size:12px; color:#111; border:1px solid #ddd; border-bottom:0px solid #ccc; background:#fff; text-align:center; width:100%; height:30px; line-height:30px; text-decoration:none; margin-top:15px; } h2.sidemenu_h2 a { color:#111; } /* 즐겨찾기 바로가기 - 숨김처리 */ .sidemenu .sidelink { position: relative; width: 100%; height: auto; border-bottom:1px dashed #ccc; padding-bottom:10px; display:table; display:none; } .sidemenu .sidelink a { float: left; width: 48%; margin:1%; height:30px; line-height:30px; text-align:center; display:block; background:#eee; color:#777; border-radius:2px; font-size:11px; } /* 사이드바 이미지롤링 */ .sidebanner { position:relative; width:100%; } .sidebanner li { float:left; } .sidebanner img { width:100%; } .sidebanner .hannavi_mini2 { background: url("//lifeggook.com/han/images/bg/bg_00050.png") repeat; } #pager_side { bottom:10px; text-align:center; } /* 우측바 로그인 */ .sidemenu .xans-layout-login { } .sidemenu .xans-layout-login .check {} .sidemenu .xans-layout-login .check span { overflow:hidden; display:block; margin:0 0 10px; border:1px solid #e9e9e9; color:#8f8f91; border-radius:2px; *zoom:1; } .sidemenu .xans-layout-login .check label { height:32px; padding:0 0 0 8px; color:#c9c9c9; line-height:32px; } .sidemenu .xans-layout-login .check span label span { border:0; } .sidemenu .xans-layout-login .check input { width:95%; height:32px; padding:0; border:0; color:#8f8f91; line-height:32px; } .sidemenu .button a { float:right; width:60px; height:20px; line-height:20px; display:block; background:#252525; margin-left:3px; color:#fff; border-radius:2px; text-align:center; font-size:11px; } .sidemenu .button a:hover { background:#f9ab17; color:#111; } .sidemenu .snsArea li { width:100%; } .sidemenu .snsArea .btnNaver { display:block; margin:5px 0 0; border:0; border-radius:2px; font-size:13px; color:#fff; text-align:center; height:34px; line-height:33px; background:#26c826 url("//img.echosting.cafe24.com/skin/mobile/member/ico_btn_naver.png") no-repeat 13px 0; background-size:33px 33px; -moz-box-sizing:border-box; box-sizing:border-box; } .sidemenu .snsArea .btnFacebook { display:block; margin:5px 0 0; border:0; border-radius:2px; font-size:13px; color:#fff; text-align:center; height:33px; line-height:33px; background:#4267b2 url("//img.echosting.cafe24.com/skin/mobile/member/ico_btn_facebook.png") no-repeat 13px 0; background-size:33px 33px; -moz-box-sizing:border-box; box-sizing:border-box; } .sidemenu .snsArea .btnGoogle { display:block; margin:5px 0 0; border:0; border-radius:2px; font-size:13px; color:#fff; text-align:center; height:33px; line-height:33px; background:#517ff3 url("//img.echosting.cafe24.com/skin/mobile/member/ico_google.png") no-repeat 0 0; background-size:auto 31px; border:1px solid #517ff3; -moz-box-sizing:border-box; box-sizing:border-box; } .sidemenu .snsArea .btnKakao { display:block; margin:5px 0 0; border:0; border-radius:2px; font-size:13px; color:#3c1e1e; text-align:center; height:34px; line-height:33px; background:#ffeb00 url("//img.echosting.cafe24.com/skin/mobile/member/ico_btn_kakao.png") no-repeat 11px 1px; background-size:auto 33px; -moz-box-sizing:border-box; box-sizing:border-box; } .sidemenu .snsArea .btnLine { display:block; margin:5px 0 0; border:0; border-radius:2px; font-size:13px; color:#fff; text-align:center; height:34px; line-height:33px; background:#26c826 url("//img.echosting.cafe24.com/skin/mobile/member/ico_btn_line.png") no-repeat 10px 0; background-size:35px 33px; -moz-box-sizing:border-box; box-sizing:border-box; } /* 우측바 주문내역 */ .side_my.xans-myshop-orderstate { margin: 0; } .side_my.xans-myshop-orderstate .desc { font-weight:normal; font-size:11px; color:#868686; } .side_my.xans-myshop-orderstate .desc em { color:#868686; font-style:normal; } .side_my.xans-myshop-orderstate .state { overflow:hidden; padding:0px 0px; } .side_my.xans-myshop-orderstate .order { float:left; width:100%; } .side_my.xans-myshop-orderstate .order li { float:left; width:46%; padding:2% 1%; margin:1%; outline:1px solid #e9e9e9; border-radius:2px; text-align:center; } .side_my.xans-myshop-orderstate .order li strong { display:block; margin:2px 0 7px; font-size:11px; color:#868686; font-weight:normal;} .side_my.xans-myshop-orderstate .order li:hover { background:#f9f9f9; } .side_my.xans-myshop-orderstate .order .count { font-weight:bold; font-size:24px; color:#111; } .side_my.xans-myshop-orderstate .cs { width:100%; margin:5px auto; } .side_my.xans-myshop-orderstate .cs li { float:left; width:31.33%; height:27px; line-height:27px; background:#f9f9f9; outline:1px solid #e9e9e9; margin:1%; border-radius:2px; } .side_my.xans-myshop-orderstate .cs strong { font-weight:normal; font-size:12px; color:#868686; } .side_my.xans-myshop-orderstate .cs .count { padding:0 0 0 4px; font-weight:bold; color:#111; } .side_my.xans-myshop-orderstate .cs .icoDot { display:inline-block; width:2px; height:2px; margin:6px 0 0 0; background:#fafafa; vertical-align:top; } /* 우측바 탭 */ .logtabwrap, .logtabwrap2, .logtabwrap3 { position: relative; width: 100%; height: auto; border-bottom:1px dashed #ddd; padding-bottom:10px; display:table; } ul.logtabs, ul.logtabs2, ul.logtabs3 { width: 100%; height: 42px; margin:0 auto 5px; list-style: none; overflow: hidden; } ul.logtabs li,ul.logtabs2 li,ul.logtabs3 li { float: left; width: 50%; } ul.logtabs li a,ul.logtabs2 li a,ul.logtabs3 li a { position: relative; display: block; height: 30px; line-height: 30px; font-size: 12px; text-align: center; color: #999; background: #f9f9f9; border:1px solid #e9e9e9; } ul.logtabs li .activelog, ul.logtabs2 li .activelog2 , ul.logtabs3 li .activelog3 { background: #fff; color: #111; border-bottom:0px solid #e9e9e9; } .group:before, .group:after , .group2:before, .group2:after , .group3:before, .group3:after { content: " "; /* 1 */ display: table; /* 2 */ } .group:after, .group2:after, .group3:after { clear: both; } #logpanels, #logpanels2, #logpanels3 { width: 100%; height: auto; margin:0 auto; background: #fff; } #logpanels div, #logpanels2 div, #logpanels3 div { position:relative; width: 100%; height:auto; } #logtwo, #logtwo2, #logtwo3 { display: none; } /* 우측바 커뮤니티 */ .logtabwrap3 ol li { width:48%; height:25px; line-height:25px; letter-spacing:-1px; display:inline; float:left; outline:1px solid #e9e9e9; text-align:center; margin:1%; list-style:none; } .logtabwrap3 ol li a { color:#888; font-size: 11px; } .logtabwrap3 ol li:hover { background:#f9f9f9; color:#000; } .logtabwrap3 ol li:hover a { color:#111; text-decoration:none; } /* 탑/홈/바텀 버튼 */ .sctop { position:absolute; left:-60px; bottom:170px; width:50px; height:auto; display:block; z-index:100; border-radius:12px; overflow:hidden; transition: .2s; -webkit-transition: .2s; -moz-transition: .2s; } .sctop a { float:left; width:50px; height:50px; line-height: 50px; background:#555; color:#fff; } .sctop .fa { width:50px; height:50px; line-height:50px; text-align:center; display:block; float:left; font-size:16px; } .sctop:hover { border-radius:25px; } .sctop a:hover .fa { font-size:20px; } .sctop .sctopline { position:absolute; top:50px; left:10px; width:30px; height:2px; background: url("//lifeggook.com/han/images/bg/bg_white2.png") repeat; } /* 우측바 고객센터 계좌안내 */ .Farea1.side { width:320px !important; height:auto; padding:0 0px 0 0; } .Farea2.side { width:320px !important; height:auto; padding:0 0px 0 0px; } .sidemenu .fhline { position:relative; float:none; display:block; clear:both; width:18px; height:2px; background:#ddd; margin:10px 0;} .sidemenu .Farea1.side h4, .sidemenu .Farea2.side h4 { font-size:13px; color:#999; line-height:15px; letter-spacing:0px; font-weight:400; } .Farea1.side .num_big { font-size:24px; line-height:25px; color:#343434; font-weight:600;} .Farea1.side .num_small { font-size:12px; line-height:20px; color:#999; font-weight:300; } .Farea2.side .num_big { font-size:11px; line-height:21px; color:#999; font-weight:400; display:block; clear:both; } .Farea2.side .num_big span { width:70px; display:inline-block; float:left; } .Farea2.side .num_big strong { font-size:18px; line-height:24px; color:#343434; float:left; font-weight:600;} .Farea2.side .num_small { font-size:13px; line-height:21px; color:#999; font-weight:300; } .Farea2.side option { background:#fff; } .cd-product-wrapper.side-wrapper { position:absolute; bottom:278px; left:-60px; z-index: 102; } .cd-single-point, .cd-single-point > a { position:relative; width: 50px; height: 50px; margin-bottom:5px; display:block; border-radius:20%; transition: .2s; -webkit-transition: .2s; -moz-transition: .2s; } /* 단추 */ .cd-single-point { background: #f9f9f9; } .cd-single-point.is-open > a { background: #33353d; } .cd-single-point:hover { background: #eee; border-radius:50%; } /* 클릭시 + 돌아가는 효과 */ .cd-single-point > a::after, .cd-single-point > a:before { content: ''; position: absolute; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); background-color: #ffffff; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; transition-property: transform; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; transition-duration: 0.3s; } /* X 표시 */ .cd-single-point > a::after { height: 2px; width: 12px; opacity: 0; } .cd-single-point > a::before { height: 12px; width: 2px; opacity: 0; } /* X 표시 회전 */ .cd-single-point.is-open > a::after, .cd-single-point.is-open > a::before { -webkit-transform: translateX(-50%) translateY(-50%) rotate(135deg); -moz-transform: translateX(-50%) translateY(-50%) rotate(135deg); -ms-transform: translateX(-50%) translateY(-50%) rotate(135deg); -o-transform: translateX(-50%) translateY(-50%) rotate(135deg); transform: translateX(-50%) translateY(-50%) rotate(135deg); opacity: 1; } /* 버튼 아이콘 - fontawesome */ .is-open .cd-img-replace > .fa { opacity: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } .cd-img-replace > .fa { color:#888; opacity: 1; width:50px; height:50px; line-height:50px; text-align:center; font-size:13px; -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; transition-property: transform; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; transition-duration: 0.5s; } .cd-img-replace:hover > .fa { color:#111; } /* 툴팁 */ .cd-tip { position:absolute; right:55px; top:13px; width:auto; padding:0 10px; height:24px; line-height:24px; background: #f9f9f9; color:#343434; font-size:12px; border-radius:2px; z-index: 1003; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; transition-duration: 0.2s; opacity:0; visibility: hidden; display:block !important; white-space:nowrap !important; } .cd-img-replace:hover > .cd-tip { opacity:1; visibility: visible; } .is-open .cd-img-replace:hover > .cd-tip { opacity:0; visibility: hidden; } /* 열리는 팝업창 */ .cd-single-point .cd-more-info { position: absolute; top: -350px; right: 150%; width: 550px; height: 550px; z-index: 103; overflow-y: auto; padding: 0px; border-radius: 3px; border:1px solid #ddd; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); background-color: rgba(255, 255, 255, 0.9); visibility: hidden; opacity: 0; -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -ms-transform: scale(0.5); -o-transform: scale(0.5); transform: scale(0.5); -webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s, -webkit-transform 0.3s 0s, top 0.3s 0s, bottom 0.3s 0s, left 0.3s 0s, right 0.3s 0s; -moz-transition: opacity 0.3s 0s, visibility 0s 0.3s, -moz-transform 0.3s 0s, top 0.3s 0s, bottom 0.3s 0s, left 0.3s 0s, right 0.3s 0s; transition: opacity 0.3s 0s, visibility 0s 0.3s, transform 0.3s 0s, top 0.3s 0s, bottom 0.3s 0s, left 0.3s 0s, right 0.3s 0s; } /* 열리는 팝업창- 열릴때 */ .cd-single-point.is-open .cd-more-info { visibility: visible; opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: opacity 0.3s 0s, visibility 0s 0s, -webkit-transform 0.3s 0s, top 0.3s 0s, bottom 0.3s 0s, left 0.3s 0s, right 0.3s 0s; -moz-transition: opacity 0.3s 0s, visibility 0s 0s, -moz-transform 0.3s 0s, top 0.3s 0s, bottom 0.3s 0s, left 0.3s 0s, right 0.3s 0s; transition: opacity 0.3s 0s, visibility 0s 0s, transform 0.3s 0s, top 0.3s 0s, bottom 0.3s 0s, left 0.3s 0s, right 0.3s 0s; } /* 열리는창 - 닫기버튼/링크버튼 */ .cd-close-info { position:absolute; top:19px; right:12px; text-decoration:none; display:block; z-index:1000; } .cd-link { position:absolute; top:21px; right:39px; text-decoration:none; display:block; z-index:1000; background:#111; width:auto; height:21px; padding:0 10px; line-height:21px; color:#fff; border-radius:3px; text-align:center; font-size:11px;} a.xans-search-form { margin:0 0 20px; } /* .searchbox */ .xans-search-form .searchbox { margin:21px 0 20px; padding:45px 0; background:#fff; } .xans-search-form .searchbox fieldset { width:486px; margin:0 auto; padding:0 47px; } .xans-search-form .searchbox .item { margin:8px 0 0; color:#353535; line-height:20px; *zoom:1; } .xans-search-form .searchbox .item:after { content:""; display:block; clear:both; } .xans-search-form .searchbox .item strong { float:left; width:75px; padding:5px 10px 0 0; } .xans-search-form .searchbox .item input { padding:5px 4px 5px 10px; } .xans-search-form .searchbox .popular { margin:6px 0 0 86px; font-size:11px; line-height:18px; *zoom:1; } .xans-search-form .searchbox .popular.xans-search-hotkeyword { margin-bottom:17px; } .xans-search-form .searchbox .popular:after { content:""; display:block; clear:both; } .xans-search-form .searchbox .popular strong { float:left; min-width:55px; padding:0 10px 0 0; color:#6b6b6b; } .xans-search-form .searchbox .popular p a { margin:0 3px 0 0; padding:0 0 0 8px; color:#757575; background:url("//img.echosting.cafe24.com/skin/base/product/bg_popular_search.gif") no-repeat 0 3px; } .xans-search-form .searchbox .popular p a:first-child { padding-left:0; background:none; } .xans-search-form .searchbox .popular a:hover { color:#fe7b05; text-decoration:none; } .xans-search-form .searchbox .button { margin:30px 0 0 170px;} .xans-search-form .noData { padding:50px 0; text-align:center; line-height:1.8em; } .xans-search-form .noData > strong { display:block; color:#000; } .xans-search-form .noData > strong.warning { display:block; color:#111; font-size:25px; line-height:45px; } .xans-search-form .noData ul { margin:10px 0 0; } /* Input Size */ .xans-search-form .searchbox select { height:30px; } .xans-search-form .searchbox #category_no, .xans-search-form .searchbox #order_by { width:400px; } .xans-search-form .searchbox #search_type { width:120px; } .xans-search-form .searchbox #keyword { width:260px; } .xans-search-form .searchbox #exceptkeyword { width:200px; padding:5px 4px 5px 10px; } .xans-search-form .searchbox #product_price1 { width:170px; margin:0 5px 0 0; } .xans-search-form .searchbox #product_price2 { width:170px; margin:0 0 0 5px; } /* searchResult */ .xans-search-form .searchResult { overflow:hidden; border:1px solid #d7d5d5; text-align:right; line-height:38px; } .xans-search-form .searchResult .record { float:left; padding:0 0 0 8px; color:#333; } .xans-search-form .searchResult .listType { display:inline; margin:0 4px 0 0; } .xans-search-form .searchResult .listType li { display:inline; padding:0 6px 0 10px; color:#2e2e2e; cursor:pointer; background:url("//img.echosting.cafe24.com/skin/base/product/bg_result_type.gif") no-repeat 0 50%; } .xans-search-form .searchResult .listType li:hover { color:#008bcc; text-decoration:none; } .xans-search-form .searchResult .listType li:first-child { background:none; } .ajax_add .xans-search-form .searchbox fieldset { width:486px; margin:0 auto; padding:0 0px; } .ajax_add .xans-search-form .searchbox { margin:0px 0 20px; padding:25px 10px 35px; border:5px solid #e5e5e5; background:#fff; float:left; } .ajax_add .xans-search-form .searchbox .item strong { float:left; width:90px; padding:0 0 10px 10px; text-align:left; } .ajax_add .xans-search-form .searchbox #category_no, .ajax_add .xans-search-form .searchbox #order_by { width:350px; } .ajax_add .xans-search-form .searchbox #search_type { width:100px; } .ajax_add .xans-search-form .searchbox #keyword { width:237px; } .ajax_add .xans-search-form .searchbox #exceptkeyword { width:200px; } .ajax_add .xans-search-form .searchbox #product_price1 { width:158px; } .ajax_add .xans-search-form .searchbox #product_price2 { width:159px; } .ajax_add .xans-search-form .searchbox .popular { margin:20px 0 20px 50px; } /* Tab */ .xans-order-basketpackage .xans-order-tabinfo { margin:40px 0 0; } /* List */ .xans-order-basketpackage .xans-order-empty p { margin:50px 0; text-align:center; font-weight:bold; color:#868686; } .xans-order-basketpackage .orderListArea .title { height:38px; margin:20px 0 0; padding:0 0 0 9px; border:1px solid #e5e5e5; border-bottom:0; line-height:38px; background:#fafafa; } .xans-order-basketpackage .orderListArea .title h3 { color:#868686; font-size:12px; } .xans-order-basketpackage .boardList { margin:0 0 1px; border:1px solid #e5e5e5; color:#868686; line-height:1.5; } .xans-order-basketpackage .boardList th { padding:11px 0 9px; border-left:1px solid #e5e5e5; font-weight:normal; background:#fafafa; text-align:center;} .xans-order-basketpackage .boardList th:first-child { border-left:0; } .xans-order-basketpackage .boardList td { padding:8px 0 5px; border-top:1px solid #e5e5e5; text-align:center; vertical-align:middle; word-wrap:break-word; } .xans-order-basketpackage .boardList tfoot td { padding:15px 10px 17px; background:#fafafa; text-align:right; } .xans-order-basketpackage .boardList tfoot td .type { float:left; margin:6px 0 0; font-weight:normal; } .xans-order-basketpackage .boardList tfoot td .total { margin:0 0 0 15px; color:#343434; } .xans-order-basketpackage .boardList tfoot td .total span { font-size:17px; letter-spacing:-1px; } .xans-order-basketpackage .boardList td.thumb img { width:80px; } .xans-order-basketpackage .boardList td.product { padding-left:10px; text-align:left; } .xans-order-basketpackage .boardList td.product a { color:#333; } .xans-order-basketpackage .boardList td.product div.option, .xans-order-basketpackage .boardList td.product ul.option > li { margin:9px 0 0; color:#868686; line-height:16px; } .xans-order-basketpackage .boardList td.product ul.option > li > strong { display:block; color:#868686; } .xans-order-basketpackage .boardList td.product div.option span.file a, .xans-order-basketpackage .boardList td.product ul.option > li > span.file a { margin:0 0 0 4px; padding:0 0 0 11px; color:#868686; text-decoration:underline; background:url("http://img.echosting.cafe24.com/skin/base/common/ico_file.gif") no-repeat 0 2px; } .xans-order-basketpackage .boardList td .discount { text-decoration:line-through; } .xans-order-basketpackage .boardList td .discount strong {font-weight:normal; } .xans-order-basketpackage .boardList span.quantity { position:relative; display:inline-block; width:27px; margin:0 1px 4px 0; padding:0 21px 0 0; border:1px solid #e5e5e5; border-radius:2px; } .xans-order-basketpackage .boardList span.quantity input { width:22px; height:23px; padding:0 0 0 5px; border:0; line-height:23px; } .xans-order-basketpackage .boardList span.quantity .QuantityUp { position:absolute; left:27px; top:0; } .xans-order-basketpackage .boardList span.quantity .QuantityDown { position:absolute; left:27px; bottom:0; } .xans-order-basketpackage .boardList td.mileage, .xans-order-basketpackage .boardList td.delivery { color:#868686; } .xans-order-basketpackage .boardList td.mileage img { vertical-align:middle; } .xans-order-basketpackage .boardList td.button img { margin:1px 0; } .xans-order-basketpackage .xans-order-allotmentinfo { padding:10px 0 8px 10px; border-bottom:1px solid #e5e5e5; } .xans-order-basketpackage .xans-order-allotmentinfo .info { padding:8px 0 0 23px; color:#868686; font-size:11px; line-height:1.5; background:url("http://img.echosting.cafe24.com/skin/base/common/ico_info.gif") no-repeat 0 8px; } .xans-order-basketpackage .xans-order-basketpriceinfoguide p.info { padding:8px 0 8px 33px; border-bottom:1px solid #e5e5e5; color:#868686; line-height:1.5; font-size:11px; background:url("http://img.echosting.cafe24.com/skin/base/common/ico_info.gif") no-repeat 9px 8px; } .xans-order-basketpackage .xans-order-selectorder { margin:0 0 40px; } .xans-order-basketpackage .xans-order-totalorder { margin:10px 0 40px; } #NaverChk_Button { margin:10px 0; } /* Total */ .xans-order-basketpackage .xans-order-totalsummary { border:1px solid #e5e5e5; color:#868686; line-height:1.5; } .xans-order-basketpackage .xans-order-totalsummary th { height:39px; border-left:1px solid #e5e5e5; line-height:39px; background:#fafafa; } .xans-order-basketpackage .xans-order-totalsummary td { height:58px; border-top:1px solid #e5e5e5; border-left:1px solid #e5e5e5; line-height:58px; text-align:center; font-size:23px; } .xans-order-basketpackage .xans-order-totalsummary th:first-child, .xans-order-basketpackage .xans-order-totalsummary td:first-child { border-left:0; } .xans-order-basketpackage .xans-order-totalsummary th img { margin:0 0 0 10px; vertical-align:middle; } .xans-order-basketpackage .xans-order-totalsummary td.total { color:#343434; } .xans-order-basketpackage .xans-order-totalsummary td .box { word-wrap:break-word; word-break:break-all; } .xans-order-basketpackage .xans-order-totalsummary td .tail { font-size:14px; } .xans-order-basketpackage .xans-order-totalsummary td strong { letter-spacing:-1px; } .xans-order-basketpackage .xans-order-totaloversea { border:1px solid #e5e5e5; color:#868686; line-height:1.5; } .xans-order-basketpackage .xans-order-totaloversea th { height:39px; border-left:1px solid #e5e5e5; line-height:39px; background:#fafafa; } .xans-order-basketpackage .xans-order-totaloversea td { height:58px; border-top:1px solid #e5e5e5; border-left:1px solid #e5e5e5; line-height:58px; text-align:center; font-size:23px; } .xans-order-basketpackage .xans-order-totaloversea th:first-child, .xans-order-basketpackage .xans-order-totaloversea td:first-child { border-left:0; } .xans-order-basketpackage .xans-order-totaloversea th img { margin:0 0 0 10px; vertical-align:middle; } .xans-order-basketpackage .xans-order-totaloversea td.total { color:#868686; } .xans-order-basketpackage .xans-order-totaloversea td .box { word-wrap:break-word; word-break:break-all; } .xans-order-basketpackage .xans-order-totaloversea td .tail { font-size:14px; } .xans-order-basketpackage .xans-order-totaloversea td strong { letter-spacing:-1px; } .ajax_add .xans-order-basketpackage .xans-order-totalsummary td { font-size:15px; } /* 총 상품금액 상세내역 레이어 */ .xans-order-basketpackage .totalDetail { display:none; position:absolute; z-index:100; width:300px; color:#868686; } .xans-order-basketpackage .totalDetail h3 { height:35px; padding:0 35px 0 19px; color:#fff; font-size:14px; line-height:35px; background:#fafafa; } .xans-order-basketpackage .totalDetail .content { padding:20px; border:1px solid #e5e5e5; border-top:0; background:#fff; } .xans-order-basketpackage .totalDetail .close { position:absolute; right:20px; top:10px; } .xans-order-basketpackage .totalDetail .close img { cursor:pointer; } .xans-order-basketpackage .totalDetail .content p { color:#868686; font-size:16px; font-weight:bold; text-align:right; } .xans-order-basketpackage .totalDetail .content ul { line-height:25px; } .xans-order-basketpackage .totalDetail .content li { overflow:hidden; padding:0 0 0 6px; background:url("http://img.echosting.cafe24.com/skin/base/common/ico_square3.gif") no-repeat 0 10px; *zoom:1; } .xans-order-basketpackage .totalDetail .content li:first-child { margin:8px 0 0; padding-top:6px; border-top:1px dotted #e5e5e5; background-position:0 16px; } .xans-order-basketpackage .totalDetail .content li strong { float:left; font-weight:normal; } .xans-order-basketpackage .totalDetail .content li span { float:right; } /* 옵션변경 레이어 */ .xans-order-basketpackage .optionModify { display:none; position:absolute; z-index:100; width:450px; color:#868686; } .xans-order-basketpackage .optionModify h3 { height:35px; padding:0 35px 0 19px; color:#868686; font-size:14px; line-height:35px; background:#ddd; } .xans-order-basketpackage .optionModify .content { padding:20px; border-right:1px solid #e5e5e5; border-left:1px solid #e5e5e5; background:#fff; } .xans-order-basketpackage .optionModify .close { position:absolute; right:20px; top:10px; } .xans-order-basketpackage .optionModify .close img { cursor:pointer; } .xans-order-basketpackage .optionModify .btnArea { padding:9px 0; border:1px solid #e5e5e5; border-top:1px solid #e5e5e5; text-align:center; background:#fafafa; } .xans-order-basketpackage .optionModify .btnArea a:first-child img { margin-left:1px; } .xans-order-basketpackage .optionModify .btnArea img { margin:0 1px 0 0; } .xans-order-basketpackage .optionModify .prdInfo { margin:0 0 10px; padding:0 0 10px; border-bottom:1px dotted #e5e5e5; line-height:1.5; } .xans-order-basketpackage .optionModify .prdInfo li { color:#868686; font-weight:bold; } .xans-order-basketpackage .optionModify .prdInfo li.option { color:#868686; font-weight:normal; } .xans-order-basketpackage .optionModify .prdModify h4 { color:#868686; font-size:12px; } .xans-order-basketpackage .optionModify .prdModify li { padding:6px 0 0; *zoom:1; } .xans-order-basketpackage .optionModify .prdModify li:after { content:""; display:block; clear:both; } .xans-order-basketpackage .optionModify .prdModify li span { float:left; width:110px; margin:3px 0 0; } .xans-order-basketpackage .optionModify .prdModify li select { float:right; width:294px; height:24px; border:1px solid #e5e5e5; line-height:24px; font-size:12px; } .xans-order-basketpackage .optionModify .prdModify li input { float:right; width:286px; height:22px; padding:0 0 0 6px; border:1px solid #e5e5e5; color:#868686; line-height:22px; } .xans-product-recentlist table td a, .xans-product-recentlist table td .strike strong { color:inherit; } .xans-product-recentlist table td.product strong { display:block; color:#008bcc; } .xans-product-recentlist table td.image { position:relative; } .xans-product-recentlist table td.image img { max-width:120px; border:1px solid #d6d6d6; } .xans-product-recentlist table td.button [class^="btn"] { margin:1px 0; } .xans-product-recentlist table td .xans-product-setproduct { margin:5px 0 0; } .xans-product-recentlist table td .xans-product-setproduct li { margin:2px 0 0; color:#757575; } .xans-product-recentlist .soldicon { position:absolute; top:50%; margin-top:-14px; left:20%; width:60%;} .xans-product-recentlist .soldicon img { width:100%; } .ajax_add .xans-product-recentlist table th { text-align:center !important; } .ajax_add .xans-product-recentlist table td .soldicon { } .xans-myshop-wishlist .title { margin:30px 0 10px 10px; } .xans-myshop-wishlist .title h3 { color:#353535; font-size:12px; } /* List */ .xans-myshop-wishlist td.thumb img { max-width:80px; } .xans-myshop-wishlist td.price { word-break:normal; } .xans-myshop-wishlist td.button a { width:90px; margin:1px 0; } .xans-myshop-wishlist .name .ec-set-product-name { display:block; margin:0 0 3px; } .xans-myshop-wishlist .name { font-weight:400; } .xans-myshop-wishlist td div.option, .xans-myshop-wishlist td ul.option > li { margin:9px 0 0; color:#707070; line-height:16px; } .xans-myshop-wishlist td ul.option > li > strong { display:block; color:#353535; } .xans-myshop-wishlist td div.option span.file a, .xans-myshop-wishlist td ul.option > li > span.file a { margin:0 0 0 4px; padding:0 0 0 11px; color:#707070; text-decoration:underline; background:url("//img.echosting.cafe24.com/skin/base/common/ico_file.gif") no-repeat 0 2px; } /* 옵션변경 레이어 */ .xans-myshop-wishlist .optionModify { display:none; width:450px; color:#707070; } .xans-myshop-wishlist .optionModify .prdInfo { margin:0 0 10px; padding:0 0 10px; border-bottom:1px dotted #b0b1b3; line-height:1.5; } .xans-myshop-wishlist .optionModify .prdInfo li { color:#353535; font-weight:bold; } .xans-myshop-wishlist .optionModify .prdInfo li.option { color:#707070; font-weight:normal; } .xans-myshop-wishlist .optionModify .prdModify h4 { color:#353535; font-size:12px; } .xans-myshop-wishlist .optionModify .prdModify li { padding:6px 0 0; } .xans-myshop-wishlist .optionModify .prdModify li:after { content:""; display:block; clear:both; } .xans-myshop-wishlist .optionModify .prdModify li span { float:left; width:110px; margin:3px 0 0; } .xans-myshop-wishlist .optionModify .prdModify li select { float:right; width:294px; line-height:24px; font-size:12px; } .xans-myshop-wishlist .optionModify .prdModify li input[type=text] { float:right; width:284px; } /* 배송비레이어 */ .xans-myshop-wishlist .shippingFee { position:relative; display:inline-block; text-align:left; } .xans-myshop-wishlist .shippingFee .ec-base-tooltip { display:block; margin:0 0 0 -170px; width:360px; } .xans-myshop-wishlist .shippingFee .ec-base-tooltip table th { width:40px; } .xans-myshop-wishlist .shippingFee .ec-base-tooltip table th, .xans-myshop-wishlist .shippingFee .ec-base-tooltip table td { padding:7px 10px 8px 10px; text-align:left; } .ajax_add .xans-myshop-wishlist table th { text-align:center !important; } .ajax_add .xans-myshop-wishlist td.thumb { position:relative; } .ajax_add .xans-myshop-wishlist .soldicon { position:absolute; top:50%; margin-top:-14px; left:20%; width:60%;} .ajax_add .xans-myshop-wishlist .soldicon img { width:100%; } .ajax_add .xans-myshop-likeproductlist .message { margin:10px 0; text-align:center; font-weight:bold; color:#757575; } .ajax_add .xans-myshop-likeproductlist table th { text-align:center !important; } .ajax_add .xans-myshop-likeproductlist table td { text-align:left; } .ajax_add .xans-myshop-likeproductlist td.thumb { position:relative; text-align:center; } .ajax_add .xans-myshop-likeproductlist td.thumb img { width:110px; height:auto; } .ajax_add .xans-myshop-likeproductlist table td .soldicon { position:absolute; top:50%; margin-top:-14px; left:20%; width:60%;} .ajax_add .xans-myshop-likeproductlist table td .soldicon img { width:100%; } .xans-myshop-orderhistoryhead fieldset { margin:20px 0 0; padding:23px 20px; border:5px solid #e5e5e5; } .xans-myshop-orderhistoryhead fieldset img { vertical-align:middle; } .xans-myshop-orderhistoryhead fieldset .period { margin:0 7px; } .xans-myshop-orderhistoryhead fieldset .period a { margin:0 0 0 -5px; } .xans-myshop-orderhistoryhead fieldset .fText { width:72px; height:22px; margin:0 0 0 2px; padding:0 6px; border:1px solid #e5e5e5; line-height:22px; font-size:12px; } .xans-myshop-orderhistoryhead fieldset button { width:14px; height:14px; margin:0 5px 0 2px; background:none; } .xans-myshop-orderhistoryhead .stateSelect { display:inline-block; padding:0 12px 0 0; margin:0 5px 0 2px; background:url("http://img.echosting.cafe24.com/skin/base/common/ico_bar.gif") no-repeat 100% 6px; } .xans-myshop-orderhistoryhead ul { margin:10px 0 0; color:#868686; line-height:1.5; } .xans-myshop-orderhistoryhead ul li { padding:0 0 0 9px; background:url("http://img.echosting.cafe24.com/skin/base/common/ico_square2.gif") no-repeat 4px 7px; } .ajax_add .xans-myshop-orderhistoryhead fieldset { text-align:center; } .ajax_add .xans-myshop-orderhistoryhead ul li { text-align:center; } .xans-myshop-orderhistorylistitem .title { margin:40px 0 10px 10px; } .xans-myshop-orderhistorylistitem .title h3 { color:#868686; font-size:12px; } .xans-myshop-orderhistorylistitem table .empty { padding:50px 0; text-align:center; font-weight:bold; color:#868686; } .xans-myshop-orderhistorylistitem table { border-collapse:separate; border:1px solid #e5e5e5; color:#868686; line-height:1.5; } .xans-myshop-orderhistorylistitem table th { padding:11px 0 9px; border-left:1px solid #e5e5e5; font-weight:normal; vertical-align:middle; background:#fbfafa; text-align:center;} .xans-myshop-orderhistorylistitem table th:first-child { border-left:0; } .xans-myshop-orderhistorylistitem table td { padding:8px 0 5px; border-top:1px solid #e5e5e5; text-align:center; vertical-align:middle; } .xans-myshop-orderhistorylistitem table td a { color:#868686; } .xans-myshop-orderhistorylistitem table .number { width:135px; } .xans-myshop-orderhistorylistitem table .thumb { width:92px; } .xans-myshop-orderhistorylistitem table .product { width:auto; } .xans-myshop-orderhistorylistitem table .quantity { width:60px; } .xans-myshop-orderhistorylistitem table .price { width:110px; } .xans-myshop-orderhistorylistitem table .state { width:110px; } .xans-myshop-orderhistorylistitem table .service { width:110px; } .xans-myshop-orderhistorylistitem table td .line { text-decoration:underline; } .xans-myshop-orderhistorylistitem table td.number { letter-spacing:-1px; } .xans-myshop-orderhistorylistitem table td.thumb img { width:80px; } .xans-myshop-orderhistorylistitem table td.product { padding-left:10px; text-align:left; vertical-align:top; } .xans-myshop-orderhistorylistitem table td.product a { color:#868686; } .xans-myshop-orderhistorylistitem table td.product div.option, .xans-myshop-orderhistorylistitem table td.product ul.option > li { margin:9px 0 0; color:#868686; line-height:16px; } .xans-myshop-orderhistorylistitem table td.product ul.option > li > strong { display:block; color:#868686; } .xans-myshop-orderhistorylistitem table td.product div.option span.file a, .xans-myshop-orderhistorylistitem table td.product ul.option > li > span.file a { margin:0 0 0 4px; padding:0 0 0 11px; color:#868686; text-decoration:underline; background:url("http://img.echosting.cafe24.com/skin/base/common/ico_file.gif") no-repeat 0 2px; } .xans-myshop-orderhistorylistitem table td.product .free { margin:5px 0 0; } .xans-myshop-orderhistorylistitem table td.number img, .xans-myshop-orderhistorylistitem table td.state img { margin:1px 0; } .xans-myshop-orderhistorylistitem table td.state p { color:#868686; } .xans-myshop-orderhistorylistitem table td.state a { color:#868686; } /* 그레이 포인트색상 */ /* 기본으로 준비된 색상 이외의 포인트 색상으로 변경을 원하시면 */ /* 아래 코드에서 모든 값을 원하시는 색상값으로 변경해주시면 됩니다 */ /* 공통 백그라운드 색상 */ .hangrd_1 { background:#121212; } .hangrd_2 { background:#898989; } .hangrd_3 { background:#565656; } /* 공통 호버시 백그라운드 */ .pogrd_hov:hover { background:#121212 !important; } .pogrd_hov2:hover { background:#898989 !important; } /* 보더 색상 */ .hanbocol { border-color: #121212 !important; border-top-color: #e5e5e5 !important; } .hanbocol1 { border-color: #121212 !important; } .hanbocol2 { border-color: #898989 !important; } /* 검색창 */ .header_inner3 .xans-layout-searchheader fieldset { background:#121212; } /* 카테고리 */ #toparea_warp.fixed { background:#fff; } .topcate_sub .sub_2 .catedep2 { border-color: #121212 !important; } /* 카테고리 */ .leftcate_warp .catedep1 { border-color: #000; } .leftcate_warp .catedep1_li { background:#565656; border-top-color:#777; border-bottom-color:#000; } .leftcate_warp .catedep1_li > a { text-shadow: 1px 1px 1px #2f383f; } .leftcate_warp .catedep1_li.active { background:#121212; border-top-color:#121212; } .leftcate_warp .catedep2 .catedep2_li.active > a { background:#121212; } .leftcate_warp .catedep2 { border-color: #121212 !important; } .leftcate_warp .catedep3 { border-color: #121212 !important; } .leftcate_warp .catedep4 { border-color: #eee !important; } .leftcate_warp .catedep3 .catedep3_li.active > a, .leftcate_warp .catedep4 .catedep4_li.active > a { background:#eee; } .nav_board ul.jjj { border-color: #121212 !important; } /* 상품 호버시라인 */ .ec-base-product li.hovimg .thumbnail:before {border-color:#898989;} .ec-base-product li.hovimg .thumbnail:after {border-color:#898989;} /* 롤링탭 */ ul.icontab li a.icontab_active, ul.icontab2 li a.icontab2_active, ul.icontabT li a.icontabT_active { background:#121212; } /* 폰트 컬러, 제목, 더보기 박스 */ .foocol { color: #121212; } .foocol2 { color:#898989; } .foocol3 { color:#fff; } .foocolhov:hover { color: #121212; } .foocolhov2:hover { color:#898989; } /* 공통 CSS 화살표 */ .hanarrL .bar, .hanarrR .bar { background: #898989; } .hanarrL:hover .bar, .hanarrR:hover .bar { background: #121212; } /* 메인롤링 화살표 */ #prev_mainror .fa, #next_mainror .fa { color:#898989; } #play { border-color:#898989; } #play.paused { border-left-color:#898989; } /* 공통버튼 */ [class^='btnSubmit'], a[class^='btnSubmit'] { color:#fff; background-color:#555; } [class^='btnSubmit']:not(.disabled):hover { color:#fff; background-color:#121212; } /* 순위표시 색상*/ .list100 ul.prdList li.item .thumbnail:before , .icontabR_warp ul.prdList li.item:hover .thumbnail:before { background:#121212; } /* 페이징 */ .hanpage_1 a:hover { border-color:#898989; } .hanpage_1 a.selected { border-color:#121212; } .hanpage_2 a:hover { background-color:#898989; } .hanpage_2 a.selected { background-color:#121212; } .hanpage_3 a:hover { background-color:#898989; } .hanpage_3 a.selected { background-color:#121212; } #pager_mainror a.selected { border-top:3px solid #121212; } /* 분류페이지 하위분류 표시 */ .xans-product-menupackage .menuCategory > li.selected { outline:1px solid #121212; background:#121212; } .xans-product-menupackage .menuCategory > li > ul > li.selected { background:#121212;}