/******************************************************************/ /**********************MOBILE mall*******************************/ /******************************************************************/ @import url('/mobile/css/datepicker-unified.mobile.css'); :root { --brand: #D82D28; --brand-dark: #B4231F; --ink-logo: #111111; } html,body {margin:0;padding:0px;height:100%;} body{text-align:center;overflow-x:hidden;background:#f5f5f5;} body, select, input, textarea, pre {font: 1em 'Nanum Gothic',NanumGothic,'malgun gothic','dotum', sans-serif; color:#666;} img {border:0;vertical-align: middle;} form {margin:0px;} p,ol, ul, dl, li, dt, dd{ list-style:none;margin:0px;padding:0px;text-align:left; } .png24 { tmp:expression(setPng24(this)); } .cut {text-overflow:ellipsis;overflow:hidden;white-space:nowrap;} #fix {position:relative;} a:link,a:active,a:visited{color:#999;text-decoration:none;} a:hover{color:#666;text-decoration:none;} input,select,textarea{vertical-align:middle;margin:0px;padding:0px;font: 1em 'Nanum Gothic',NanumGothic,'malgun gothic','dotum', sans-serif;} h1,h2,h3,h4,h5,h6 {padding:0px;margin:0px;} pre {font-size:0.85em; white-space:pre-line; *white-space:pre;text-align:justify;line-height:160%;margin:0px;} #wrapper {width:100%;} #header {position:absolute;width:100%;z-index:99999;background:#fff;}/*fixed*/ #header .logoZone {height:56px;text-align:center;border-top:0;border-bottom:1px solid #ECECEC;background:#fff;display:flex;align-items:center;justify-content:center;box-sizing:border-box;overflow:visible;} #header .logoZone a{color:#2C2C2C;font-weight:bold;font-size:0.85em;} #header .logoZone .logo {margin-top:0;height:24px;width:auto;display:block;color:#2C2C2C;font-size:1.8em;line-height:24px;} #header .logoZone .logo span {font-size:0.7em;color:#111111} #header .logoZone .left{position:absolute;left:0px;top:17px;} #header .logoZone .left img{height:25px;margin-left:5px;} #header .logoZone .center {margin:0px 45px 0px 95px;position:relative;} #header .logoZone .center input[type=text] {width:100%;margin-top:10px;border:0px;height:35px;border-radius:3px;-moz-border-radius: 3px; -webkit-border-radius: 3px;} #header .logoZone .right{position:absolute;right:5px;top:17px;width:40px;} #header .auth_top {position:absolute;right:8px;top:50%;transform:translateY(-50%);z-index:100000;display:flex;gap:6px;} #header .auth_top a{display:inline-block;padding:6px 11px;min-height:24px;line-height:1.35;border:1px solid #E5E7EB;border-radius:10px;background:#F8FAFC;color:#2C2C2C;font-size:0.74em;font-weight:bold;letter-spacing:0;} #header .auth_top a:hover, #header .auth_top a:active{background:#EEF2F6;color:#2C2C2C;} /* #header .menu {height:35px;text-align:center;letter-spacing:-1px;border-top:solid 2px #D82D28;border-bottom:solid 1px #ddd;background:#f5f5f5;overflow:hidden;*zoom:1;} #header .menu:after {content:"";display:block;clear:both;} #header .menu a{float:left;width:25%;text-align:center;font-size:0.85em;letter-spacing:0px;line-height:100%;color:#999;border-left:1px solid #ddd;text-align:center;margin-top:10px;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} */ #header .menu {height:35px;text-align:center;letter-spacing:-1px;border-top:solid 2px #D82D28;border-bottom:solid 1px #ddd;background:#f5f5f5;display: -webkit-box;display: -moz-box; display: -ms-flexbox; display: box;} #header .menu:after {content:"";display:block;clear:both;} #header .menu a{display:block;height:1.2em;-moz-box-flex: 1;-webkit-box-flex: 1.0;-ms-flex: 1.0;box-flex: 1.0;text-align:center;font-size:0.85em;letter-spacing:0px;color:#999;border-left:1px solid #ddd;text-align:center;margin-top:10px;} #header .menu a:first-child{border:0px;} #header .menu a:hover, #header .menu a:active, #header .menu a.on{color:#D82D28;} #header .menu a i {color:#ffcc00;} #dialog-form {background:#fff !important;border:1px solid #d9d9d9;box-sizing:border-box;opacity:1 !important;} .ui-widget-overlay {background:#000;opacity:0.38;filter:alpha(opacity=38);} .ui-dialog .ui-dialog-titlebar {display:none !important;} .ui-dialog .ui-dialog-buttonpane {margin:0 !important; padding:10px 16px !important; border-top:1px solid #e2e8f0 !important; background:#fff !important; text-align:center !important; display:block !important;} .ui-dialog .ui-dialog-buttonset {float:none !important; display:flex !important; gap:10px !important; justify-content:center !important; width:100% !important;} .ui-dialog .ui-dialog-buttonset button {min-width:92px; height:34px; line-height:32px; padding:0 14px; margin:0; border-radius:8px; border:1px solid #b8c6d5; background:linear-gradient(to bottom, #f8fbff 0%, #e9f0f7 100%); color:#3f5368; font-size:12px; font-weight:bold; cursor:pointer; transition:all 0.16s ease;} .ui-dialog .ui-dialog-buttonset button:hover {border-color:#9db1c6; background:linear-gradient(to bottom, #f0f6fd 0%, #e1eaf3 100%); color:#304457;} .ui-dialog .ui-dialog-buttonset button:first-child {border-color:#0f5f9d; background:linear-gradient(to bottom, #2f86cf 0%, #1569ad 100%); color:#fff;} .ui-dialog .ui-dialog-buttonset button:first-child:hover {border-color:#0c4e84; background:linear-gradient(to bottom, #2476bd 0%, #0f5a97 100%); color:#fff;} .ui-dialog.pay-config-error-dialog .ui-dialog-buttonset button:first-child {border-color:#8a120f !important; background:linear-gradient(to bottom, #f65a4b 0%, #cc1f1a 100%) !important; color:#fff !important; box-shadow:0 2px 8px rgba(204,31,26,0.32) !important;} .ui-dialog.pay-config-error-dialog .ui-dialog-buttonset button:first-child:hover {border-color:#6c0f0c !important; background:linear-gradient(to bottom, #ea4a3b 0%, #b71b17 100%) !important; color:#fff !important;} body.pay-config-error-open {overflow:hidden !important; height:100% !important;} .ui-widget-overlay.pay-config-error-overlay {opacity:0.72 !important; filter:alpha(opacity=72) !important; background:#000 !important;} body.mobile-notice-open {overflow:hidden !important; height:100% !important;} .ui-widget-overlay.mobile-notice-overlay {position:fixed !important; top:0 !important; left:0 !important; width:100% !important; height:100% !important; opacity:0.55 !important; filter:alpha(opacity=55) !important; background:#000 !important; z-index:100000 !important;} .ui-dialog.mobile-notice-dialog {position:fixed !important; top:50% !important; left:50% !important; transform:translate(-50%, -50%) !important; margin:0 !important; z-index:100001 !important; max-height:calc(100vh - 48px) !important; max-width:calc(100vw - 32px) !important; border-radius:12px !important; box-shadow:0 12px 36px rgba(15,23,42,0.28) !important;} .ui-dialog.mobile-notice-dialog .ui-dialog-content {max-height:calc(100vh - 140px) !important; overflow-y:auto !important;} .ui-dialog.deal-download-dialog {border:1px solid #e5ebf2;border-radius:10px;box-shadow:0 16px 38px rgba(16,24,40,0.18);overflow:hidden;max-width:100vw;} .ui-dialog.deal-download-dialog .ui-dialog-titlebar-close {display:none !important;} .ui-dialog.deal-download-dialog .ui-dialog-content {padding:8px !important;background:#ffffff;overflow-y:auto !important;overflow-x:hidden !important;} .ui-dialog.postcode-dialog-widget {border:2px solid #D82D28;border-radius:8px;box-shadow:0 10px 28px rgba(0,0,0,0.28);overflow:hidden;max-width:96vw;background:#fff !important;opacity:1 !important;} .ui-dialog.postcode-dialog-widget.ui-widget-content {background:#fff !important;} .ui-dialog.postcode-dialog-widget .ui-dialog-title {font-size:0.95em;font-weight:bold;color:#333;} .ui-dialog.postcode-dialog-widget .ui-dialog-titlebar-close {display:none !important;} .ui-dialog.postcode-dialog-widget .ui-dialog-content {padding:0 !important;border:0;background:#fff !important;opacity:1 !important;} .ui-dialog.postcode-dialog-widget .ui-dialog-buttonpane {padding:8px 12px;} .ui-dialog.postcode-dialog-widget .ui-dialog-buttonset button {min-width:80px; height:36px; line-height:34px; padding:0 16px;} /* jQuery UI Datepicker 스타일 */ .ui-widget-header {background:#f7fafc !important; border:1px solid #e5ebf2 !important; color:#1f2d3d !important;} .ui-widget-content {background:#ffffff !important; border:1px solid #e5ebf2 !important; color:#223045 !important;} .ui-state-default {background:#f8fafc !important; border:1px solid #e0e6ee !important; color:#223045 !important; font-weight:normal !important;} .ui-state-default:hover {background:#f0f4f9 !important; border-color:#d0d8e3 !important;} .ui-state-active {background:#0f4c81 !important; border-color:#0f4c81 !important; color:#ffffff !important;} .ui-state-highlight {background:#e3f2fd !important; border:1px solid #90caf9 !important; color:#0f4c81 !important;} #ui-datepicker-div {width:250px !important; border:1px solid #d8e2ee !important; border-radius:10px !important; box-shadow:0 10px 24px rgba(15,53,88,0.18) !important; padding:8px !important; max-width:96vw !important; background:#ffffff !important;} #ui-datepicker-div .ui-datepicker {width:100% !important; border:none !important; background:transparent !important; font-size:12px !important; padding:0 !important;} #ui-datepicker-div .ui-datepicker-header {background:linear-gradient(to bottom, #2f86cf 0%, #1f5f98 100%) !important; border:0 !important; padding:6px 6px !important; min-height:32px !important; line-height:1.2 !important; border-radius:7px !important; color:#ffffff !important; position:relative !important;} #ui-datepicker-div .ui-datepicker-title {display:flex !important; align-items:center !important; justify-content:center !important; gap:7px !important; height:2.2em !important; font-weight:bold !important; color:#ffffff !important; line-height:1 !important; margin:0 40px !important; padding:0 !important; text-align:center !important;} #ui-datepicker-div .ui-datepicker-prev, #ui-datepicker-div .ui-datepicker-next {width:28px !important; height:28px !important; padding:0 !important; box-sizing:border-box !important; border:1px solid #c9d6e4 !important; border-radius:6px !important; background:#ffffff !important; top:50% !important; cursor:pointer !important; position:absolute !important; transform:translateY(-50%) !important; text-indent:0 !important; font-size:0 !important; line-height:0 !important; overflow:hidden !important;} #ui-datepicker-div .ui-datepicker-prev {left:6px !important;} #ui-datepicker-div .ui-datepicker-next {right:6px !important;} #ui-datepicker-div .ui-datepicker-prev:hover, #ui-datepicker-div .ui-datepicker-next:hover {border-color:#b8c9db !important; background:#f7fbff !important;} #ui-datepicker-div .ui-datepicker-prev span, #ui-datepicker-div .ui-datepicker-next span {display:block !important; position:absolute !important; top:50% !important; left:50% !important; width:14px !important; height:14px !important; margin:-7px 0 0 -7px !important; background:none !important; background-repeat:no-repeat !important; background-position:center center !important; background-size:14px 14px !important; text-indent:-9999px !important; border:0 !important;} #ui-datepicker-div .ui-datepicker-prev span:before, #ui-datepicker-div .ui-datepicker-next span:before {content:none !important; display:none !important;} #ui-datepicker-div .ui-datepicker-prev:before, #ui-datepicker-div .ui-datepicker-next:before {content:none !important; display:none !important;} #ui-datepicker-div .ui-datepicker-prev span {transform:none !important; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M10.5 3.5L6 8l4.5 4.5' fill='none' stroke='%23355f8d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;} #ui-datepicker-div .ui-datepicker-next span {transform:none !important; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 3.5L10 8l-4.5 4.5' fill='none' stroke='%23355f8d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;} #ui-datepicker-div .ui-state-default {background:#ffffff !important; border:1px solid transparent !important; color:#2f3f54 !important; border-radius:5px !important;} #ui-datepicker-div .ui-state-active {background:#3f74c7 !important; border-color:#3f74c7 !important; color:#ffffff !important;} #ui-datepicker-div .ui-state-highlight {background:#fff8ed !important; border:1px solid #f0bf72 !important; color:#c97b00 !important;} /* datepicker 월/년 선택 드롭다운 */ .ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year {border:1px solid #d0dbe8 !important; border-radius:4px !important; background:#ffffff !important; color:#1f3550 !important; height:2.2em !important; line-height:2.2em !important; padding:0 16px 0 4px !important; font-size:11px !important; box-sizing:border-box !important; margin:0 !important; width:5.6em !important;} .ui-datepicker select.ui-datepicker-month {border:1px solid #d0dbe8 !important; border-radius:4px !important; background:#ffffff !important; color:#1f3550 !important; height:2.2em !important; line-height:2.2em !important; padding:0 16px 0 4px !important; font-size:11px !important; box-sizing:border-box !important; margin:0 !important; width:4.2em !important;} #header .search {background:#f5f5f5;height:2.3em;border-bottom:solid 1px #ddd;padding-top:0.7em;} #header .search input[type=text] {width:70%;border:solid 1px #ddd;} #footer {clear:both;width:100%;text-align:center;color:#708090;border-top:solid 1px #ddd;padding:15px 0px;} #footer a.prev {position:fixed;left:0px;bottom:1em;opacity:0.7;filter:alpha(opacity=70);letter-spacing:0px;width:2.5em;height:2em;z-index:99999999} #footer p.desc {font-size:0.75em;letter-spacing:-0.05em;color:#adb6c2;line-height:130%;text-align:center;padding-bottom:0.5em;} #footer p.info {font-size:0.75em;letter-spacing:-0.1em;color:#708090;line-height:130%;text-align:center;padding-bottom:0.5em;} #footer p.info b {color:#D82D28} #footer p.copy {font-size:0.7em;text-transform:uppercase;color:#adb6c2;text-align:center;} #footer p.copy a {color:#adb6c2;text-decoration:underline} #footer p.menu {font-size:0.75em;display:table;margin:0px auto;padding-top:0.5em;} #footer p.menu:after {content:"";display:block;clear:both;} #footer p.menu a{display:block;float:left;vertical-align:middle;;color:#708090;font-weight:bold;border-right:solid 1px #bbb;padding:0em 0.8em;} #footer p.menu a:last-child {border:0px;} /***************************** INDEX*********************************************/ #visual {width:calc(100% - 0.9em);height:auto;margin:10px auto 0;overflow:hidden;border:0;border-radius:10px;background:#111;box-sizing:border-box;} #visual .bx-wrapper, #visual .bx-viewport{position:relative;width:100% !important;height:auto !important;top:0;left:0;margin:0;border:0 !important;box-shadow:none;background:transparent;border-radius:10px;overflow:hidden;} #visual .bxslider, #visual .bxslider li{height:auto !important;margin:0;padding:0;} #visual .bxslider li{background:none;} #visual .bxslider li a{display:block;height:auto;} #visual .bxslider li img{display:block;width:100%;height:auto;vertical-align:top;} #visual .bx-wrapper .bx-pager, #visual .bx-wrapper .bx-controls-auto{position:absolute;bottom:8px;width:100%;z-index:3;} #visual .bx-wrapper .bx-pager{padding-top:0;text-align:center;} #visual .bx-wrapper .bx-pager.bx-default-pager a{width:7px !important;height:7px !important;margin:0 4px;background:rgba(255,255,255,.42);border-radius:50%;} #visual .bx-wrapper .bx-pager.bx-default-pager a.active, #visual .bx-wrapper .bx-pager.bx-default-pager a:hover{background:#fff;} .bx-viewport, .bx-wrapper{ position:relative; width:100%; height:100% !important; top:0; left:0;} .bxslider, .bxslider li{height: 100% !important;} .bxslider li{ background-position: 50% 50%; background-size: auto 100%;} .bxslider li a {display:block;height:100%;} .bx-wrapper .bx-viewport{ border: none !important;} .bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto {position: absolute;bottom: 2em;width: 100%;z-index:999999} .bx-wrapper .bx-pager {padding-top: 0px;} .bx-wrapper .bx-pager.bx-default-pager a { width:12px !important;height:12px !important;background-size:100% 100%;margin:0em 0.5em} #container.idx #visual + #idx_title.idx-title-section-break{padding-top:1.1em;} /****************************** CONTENT ***************************************/ #container {padding-top:56px;} /** header height : padding-top:7.2em;메뉴있을시 padding-top:95px;**/ #container.idx {background:#ebebeb;}/*background:url('../images/bg.gif') #e6e6e6;*/ #container.detail {padding-top:56px;} #container #loc {text-align:left;margin:1em 0em;padding:0em 0.5em;font-size:0.9em;} #container #loc a:last-child {font-weight:bold;color:#333;} #container #loc span {font-family:"굴림";color:#aaa;padding:0em 0.5em;} #container #idx_title {padding:1.5em 0.5em 0em 0.5em;color:#bbb;font-size:0.9em;text-align:left;} #container #idx_title b {color:#333;} #container #idx_title strong {color:#D82D28;} #container #idx_title.idx-title-section-break {position:relative;padding:1.6em 0.75em 1em;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;text-align:center;} #container #idx_title.idx-title-section-break .idx-title-section-break__glow {position:absolute;inset:0;background:radial-gradient(ellipse 70% 80% at 50% 40%, rgba(216,45,40,.08), transparent 70%);pointer-events:none;} #container #idx_title.idx-title-section-break .idx-title-section-break__row {position:relative;display:flex;align-items:center;gap:10px;width:100%;} #container #idx_title.idx-title-section-break .idx-title-section-break__line {flex:1 1 auto;min-width:16px;height:1px;padding:0;font-size:0;color:transparent;opacity:.88;} #container #idx_title.idx-title-section-break .idx-title-section-break__line:first-child {background:linear-gradient(90deg, transparent, #111);} #container #idx_title.idx-title-section-break .idx-title-section-break__line:last-child {background:linear-gradient(90deg, #111, transparent);} #container #idx_title.idx-title-section-break h1.idx-title-section-break__badge {flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;margin:0;padding:8px 16px;border-radius:999px;background:#111;color:#fff;font-size:0.72em;font-weight:800;letter-spacing:.07em;line-height:1.2;text-transform:uppercase;white-space:nowrap;box-shadow:0 6px 16px rgba(0,0,0,.12);} #container #title_main {font-size:1.8em;font-weight:bold;color:#333;height:1.5em;text-align:center;margin-top:1em;} #container #title_main b {color:#D82D28;} #container #title_sub {text-align:center;padding:0.5em 0em;border-bottom:dashed 1px #ddd;margin:0em 1em;} #container #title_sub h1{font-size:1.3em;font-weight:normal;color:#333;} #container #title_sub h1 b {color:#D82D28;} #container #title_sub h1 span {display:block;padding:0.3em 0em;font-size:0.65em;font-weight:normal;color:#999;letter-spacing:-0.09em} #container .count {padding-top:0.5em;} #container .count b {color:#D82D28} #container .sort a {color:#666;display:inline-block;padding:0px 0.5em;border-left:1px solid #bbb;} #container .sort a:first-child {border:0px;} #container .sort a img {margin-left:3px;} #container #idxCate {zoom:1;background:#fff;padding:0.5em;border-bottom:solid 1px #ddd;} #container #idxCate:after {clear:both;display:block;content:"";} #container #idxCate li {float:left;width:32%;height:5em;font-size:0.9em;border-bottom:dashed 1px #ddd;padding-top:1em;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;letter-spacing:-0.07em;text-align:left;margin-right:1%} #container #idxCate li:nth-child(1), #container #idxCate li:nth-child(4) {margin-left:1%;} #container #idxCate li:nth-child(4), #container #idxCate li:nth-child(5), #container #idxCate li:nth-child(6) {border-bottom:0px;} #container #idxCate li.best {clear:both;width:100%;height:auto !important;background:#ffeee8;border:1px solid #f5cfc1;padding:1em;} #container #idxCate li.best div {float:left;font-size:1.8em;padding-right:10px;width:50%;color:#f67241;} #container #idxCate li.best a{color:#f67241;} #container #idxCate li.best span {color:#ff9d78} #container #idxCate li .ico {width:2.6em;height:2.6em;float:left;border-radius:50%;-moz-border-radius: 50%; -webkit-border-radius: 50%;background:#ff9d78;margin-right:0.5em;}/*d82d28,6dcbfc*/ #container #idxCate li a{color:#666;} #container #idxCate li a:hover .ico, #container #idxCate li a:active .ico {background:#D82D28} #container #idxCate li img {width:100%;}/*float:left;width:30%;*/ #container #idxCate li span {display:block;color:#bbb;font-size:0.45em;letter-spacing:-0.05em;padding-top:0.3em;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;} #container #cateSub {border-left:solid 2px #ddd;margin:0em 0.5em;zoom:1;} #container #cateSub:after {clear:both;display:block;content:""} #container #cateSub li {float:left;display:table;border-collapse:collapse;border-spacing:0px;text-align:center;width:20%;height:3em;webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;background:#fff;border-right:solid 1px #ddd;border-bottom:solid 1px #ddd;} #container #cateSub li a{display:table-cell;width:100%;font-size:0.85em;height:3em;vertical-align:middle;padding:0em 0.5em;color:#666;} #container #cateSub li a:hover, #container #cateSub li a:active, #container #cateSub li a.on {background:#D82D28;color:#fff;font-weight:bold;} #container #cateSub li:nth-child(1), #container #cateSub li:nth-child(2), #container #cateSub li:nth-child(3), #container #cateSub li:nth-child(4), #container #cateSub li:nth-child(5) {border-top:2px solid #ddd;} #container #cateSub li:nth-child(5n) {border-right:2px solid #ddd;} #container #cateSub li:nth-last-child(1), #container #cateSub li:nth-last-child(2), #container #cateSub li:nth-last-child(3), #container #cateSub li:nth-last-child(4), #container #cateSub li:nth-last-child(5) {border-bottom:2px solid #ddd;} #container #idx_list {padding:0.5em 0.3em; zoom:1} #container #idx_list:after{content:"";display:block;clear:both;} #container #idx_list li:not(.idx-product-item){float:left;width:48%;box-shadow:0px 1px 2px rgba(0,0,0,0.15);background:#fff;margin:0.45em 1%;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;border-radius:5px;-moz-border-radius:5px; -webkit-border-radius:5px;} #container #idx_list li a{display:block;position:relative;} #container #idx_list li .icon {position:relative;top:0.8em;left:0.8em;font-weight:bold;font-size:1em;width:3.5em;height:3em;padding-top:0.5em;margin-bottom:-4em;text-align:center;background:#D82D28;color:#fff;border-radius:50%;-moz-border-radius:50%; -webkit-border-radius:50%;} #container #idx_list li .icon span{font-size:0.75em;font-weight:normal;color:#ffa7ba;} #container #idx_list li .thum {width:100%;border-radius:5px 5px 0px 0px;-moz-border-radius:5px 5px 0px 0px; -webkit-border-radius:5px 5px 0px 0px;} #container #idx_list li .block {padding:0.5em 0.7em;} #container #idx_list li .block .txt {height:4em;overflow:hidden;letter-spacing:-0.05em} #container #idx_list li .block h1 {font-size:1em;color:#333;font-weight:normal;padding-bottom:0.05em;line-height:1.5em;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;} #container #idx_list li .block h2 {font-size:0.8em;color:#999;font-weight:normal;line-height:1.5em;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;} #container #idx_list li .block h3 {font-size:0.7em;color:#ff6600;font-weight:bold;height:1.2em;letter-spacing:0px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;} #container #idx_list li .block .price {padding-top:0.5em;border-top:dashed 1px #ddd;} #container #idx_list li .block .price_s {font-size:1.2em;font-weight:normal;color:#D82D28;} #container #idx_list li .block .price_s span {font-size:0.8em;padding-right:3px;} #container #idx_list li .block .price_s b{font-family:tahoma;} #container #idx_list li .block .price_n {font-size:0.85em;font-family:tahoma;color:#999;text-decoration:line-through;} #container #idx_list li .block .price_s .price_label, #container #idx_list li .block .price_n .price_label{display:inline-block;font-size:0.72em;letter-spacing:-0.03em;white-space:nowrap;padding-right:4px;text-decoration:none;} #container #idx_list li .block .price_s .price_unit, #container #idx_list li .block .price_n .price_unit{font-size:0.75em;padding-left:1px;} #container #idx_list li.idx-product-item {float:none;clear:both;display:block;width:100%;margin:0.5em 0;position:relative;border:1px solid #ddd;overflow:hidden;} #container #idx_list li.idx-product-item.is-picked {border-color:#D82D28;box-shadow:inset 0 0 0 1px rgba(216,45,40,.18),0 1px 2px rgba(0,0,0,0.15);} #container #idx_list li.idx-product-item .idx-card-body {display:flex;align-items:stretch;position:relative;cursor:pointer;outline:none;} #container #idx_list li:not(.idx-product-item) .idx-card-body {display:block;position:relative;cursor:pointer;outline:none;} #container #idx_list li .idx-thumb-wrap {position:relative;} #container #idx_list li .idx-thumb-wrap .idx-dc-badge{position:absolute;top:7px;right:7px;z-index:5;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-width:36px;padding:4px 6px 4px;border-radius:6px;background:#D82D28;color:#fff;line-height:1;box-shadow:0 2px 6px rgba(216,45,40,.35);pointer-events:none;} #container #idx_list li .idx-thumb-wrap .idx-dc-badge em{display:block;font-size:8px;font-style:normal;font-weight:700;letter-spacing:.06em;opacity:.95;} #container #idx_list li .idx-thumb-wrap .idx-dc-badge b{display:block;font-size:12px;font-weight:800;letter-spacing:-0.04em;} #container #idx_list li.idx-product-item.is-picked .idx-thumb-wrap .idx-dc-badge{z-index:3;} #container #idx_list li.idx-product-item.is-picked .idx-thumb-wrap:before{content:'';position:absolute;top:0;right:0;bottom:0;left:0;width:auto;height:auto;background:rgba(17,17,17,.52);z-index:4;pointer-events:none;} #container #idx_list li.idx-product-item.is-picked .idx-thumb-wrap:after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;width:38%;height:38%;max-width:88px;max-height:88px;min-width:48px;min-height:48px;margin:auto;background:url('/images/ico_selected_check.svg') no-repeat 50% 50%;background-size:contain;z-index:5;pointer-events:none;filter:drop-shadow(0 4px 14px rgba(0,0,0,.4));} #container #idx_list li .idx-thumb-wrap .idx-detail-button{position:absolute;right:8px;bottom:8px;display:inline-flex;align-items:center;gap:6px;padding:5px 8px 5px 6px;border-radius:999px;background:rgba(20,26,34,.88);color:#fff !important;font-size:11px;line-height:1;box-shadow:0 4px 10px rgba(0,0,0,.2);z-index:3;cursor:pointer;text-decoration:none;} #container #idx_list li .idx-thumb-wrap .idx-detail-button .ico{display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;border-radius:50%;background:#D82D28;} #container #idx_list li .idx-thumb-wrap .idx-detail-button .ico img{width:10px;height:10px;} #container #idx_list li .idx-thumb-wrap .idx-detail-button .txt{font-weight:bold;letter-spacing:-0.02em;} #container #idx_list li .idx-thumb-wrap .idx-detail-button:hover{background:rgba(8,12,18,.95);} #idx_sell_floating{position:fixed;right:10px;bottom:62px;z-index:9998;display:flex;flex-direction:column;align-items:flex-end;gap:7px;} #idx_sell_floating:not(:has(#seller-live-fab-stack)){padding:10px;background:#fff;border:1px solid rgba(17,17,17,.08);border-radius:20px;box-shadow:0 16px 40px rgba(17,17,17,.22);} #idx_sell_floating:not(:has(#seller-live-fab-stack)) #idx_search_btn, #idx_sell_floating:not(:has(#seller-live-fab-stack)) #idx_cart_btn, #idx_sell_floating:not(:has(#seller-live-fab-stack)) #idx_clear_selection_button, #idx_sell_floating:not(:has(#seller-live-fab-stack)) #idx_bulk_sell_button{box-shadow:none;} #idx_sell_floating #idx_clear_selection_button{display:inline-flex;align-items:center;gap:8px;min-width:116px;height:36px;padding:0 12px 0 8px;border:1px solid rgba(216,45,40,.22);border-radius:12px;background:linear-gradient(180deg,#fff7f7 0%,#ffe8e7 100%);color:#B4231F;font-size:11px;font-weight:bold;cursor:pointer;box-shadow:0 8px 22px rgba(180,35,31,.18);} #idx_sell_floating #idx_clear_selection_button .ico{position:relative;display:flex;align-items:center;justify-content:center;width:23px;height:23px;border-radius:8px;background:#D82D28;box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 5px 10px rgba(216,45,40,.26);flex-shrink:0;} #idx_sell_floating #idx_clear_selection_button .ico .mark{position:relative;display:block;width:12px;height:12px;transform:rotate(-28deg);} #idx_sell_floating #idx_clear_selection_button .ico .mark:before{content:'';position:absolute;left:1px;top:2px;width:7px;height:7px;border:2px solid #fff;border-right-color:transparent;border-radius:50%;} #idx_sell_floating #idx_clear_selection_button .ico .mark:after{content:'';position:absolute;right:0;top:1px;width:0;height:0;border-top:3px solid transparent;border-bottom:3px solid transparent;border-left:5px solid #fff;transform:rotate(18deg);} #idx_sell_floating #idx_clear_selection_button .txt{line-height:1;letter-spacing:-0.02em;color:#B4231F;} #idx_sell_floating #idx_bulk_sell_button{display:flex;align-items:center;gap:7px;padding:8px 12px 8px 8px;border:0;border-radius:12px;background:#D82D28;color:#fff;cursor:pointer;box-shadow:0 6px 20px rgba(216,45,40,.3);} #idx_sell_floating #idx_bulk_sell_button .ico{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.22);flex-shrink:0;} #idx_sell_floating #idx_bulk_sell_button .ico img{width:15px;height:15px;} #idx_sell_floating #idx_bulk_sell_button .txt{display:flex;flex-direction:column;line-height:1.2;text-align:left;} #idx_sell_floating #idx_bulk_sell_button .txt strong{font-size:12px;font-weight:bold;color:#fff;} #idx_sell_floating #idx_bulk_sell_button .txt em{font-size:10px;font-style:normal;color:rgba(255,255,255,.8);} #idx_sell_floating #idx_bulk_sell_button .txt em b{color:#fff;font-weight:bold;} #idx_sell_floating #idx_bulk_sell_button.active{background:#B4231F;box-shadow:0 6px 24px rgba(216,45,40,.4);} #idx_sell_floating #idx_bulk_sell_button.active .ico{background:rgba(255,255,255,.22);} @keyframes idx-btn-jingle { 0% { transform:rotate(0) scale(1); } 10% { transform:rotate(-8deg) scale(1.06); } 25% { transform:rotate(7deg) scale(1.06); } 40% { transform:rotate(-5deg); } 55% { transform:rotate(4deg); } 70% { transform:rotate(-2deg); } 85% { transform:rotate(1deg); } 100% { transform:rotate(0) scale(1); } } #idx_sell_floating #idx_bulk_sell_button.jingle { animation:idx-btn-jingle 0.55s cubic-bezier(.36,.07,.19,.97); } #container #endmsg {text-align:center;margin:4em auto;} #container #endmsg .title h1{font-size:1.5em;color:#333;} #container #endmsg .title h2{font:0.85em normal tahoma;color:#999;} #container #endmsg .txt {width:70%;margin:2em auto;border:1px solid #999;border-width:0px 1px;font-size:0.9em;} /****************** Paging ******************************/ #container .paging { padding-top: 16px; margin: 16px 0 0; text-align: center; font-size: 0; } #container .paging a, #container .paging span, #container .paging .page-num, #container .paging .page-nav { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; line-height: 1; margin: 0 2px; padding: 0 8px; border: 1px solid #d2deec; border-radius: 6px; background: #ffffff; color: #49658a; font-size: 12px; text-decoration: none; box-sizing: border-box; vertical-align: middle; } #container .paging a:hover, #container .paging .page-num:hover, #container .paging .page-nav:hover { border-color: #b8cbe3; background: #f4f8fd; color: #2f527b; } #container .paging a.point, #container .paging a.on, #container .paging .page-num.current, #container .paging span.current, #container .paging .point, #container .paging .on { background: #2b5f97; border-color: #2b5f97; color: #ffffff; } #container .paging .page-nav.disabled, #container .paging .disabled { color: #9fb1c7; border-color: #dbe5f1; background: #f8fbff; pointer-events: none; } /****************** Btns ********************************/ #container .btn_white {border:solid 1px #999;background:#fff;color:#666;display:inline-block;*display:inline;*zoom:1;text-align:center;cursor:pointer;vertical-align:middle; background: -moz-linear-gradient(top, #ffffff 0%, #eef0f3 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#eef0f3)); background: -webkit-linear-gradient(top, #ffffff 0%,#eef0f3 100%); background: -o-linear-gradient(top, #ffffff 0%,#eef0f3 100%); background: -ms-linear-gradient(top, #ffffff 0%,#eef0f3 100%); background: linear-gradient(to bottom, #ffffff 0%,#eef0f3 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eef0f3',GradientType=0 ); } #container .btn_white.small {font-size:0.85em;color:#666;height:1.8em;line-height:1.8em;padding:0px 0.8em;} #container .btn_white.big {font-size:1.2em;color:#333;font-weight:bold;min-width:4em;height:3em;line-height:3em;padding:0px 0.5em;} #container .btn_white.bigR {font-size:1.2em;color:#D82D28;min-width:4em;height:3em;line-height:3em;padding:0px 0.5em;border:solid 1px #D82D28;} #container .btn_white.bigR img {width:1.2em;margin-right:3px;} #container .btn_red {border:solid 1px #D82D28;background: #D82D28;color:#fff;display:inline-block;*display:inline;*zoom:1;text-align:center;cursor:pointer;vertical-align:middle; background: -moz-linear-gradient(top, #D82D28 0%, #B4231F 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#D82D28), color-stop(100%,#B4231F)); background: -webkit-linear-gradient(top, #D82D28 0%,#B4231F 100%); background: -o-linear-gradient(top, #D82D28 0%,#B4231F 100%); background: -ms-linear-gradient(top, #D82D28 0%,#B4231F 100%); background: linear-gradient(to bottom, #D82D28 0%,#B4231F 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#D82D28', endColorstr='#B4231F',GradientType=0 );} #container .btn_red.small {font-size:0.85em;height:1.8em;line-height:1.8em;padding:0px 0.8em;} #container .btn_red.big {font-size:1.2em;min-width:4em;height:3em;line-height:3em;padding:0px 0.5em;} #container .btn_red.big img {width:1.2em;margin-right:3px;} /* Mobile-wide button baseline normalization */ #container a.btn_white, #container a.btn_red, #container button.btn_white, #container button.btn_red { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; white-space: nowrap; text-decoration: none; vertical-align: middle; line-height: 1; } #container input.btn_white, #container input.btn_red { display: inline-block; box-sizing: border-box; vertical-align: middle; text-align: center; padding-top: 0; padding-bottom: 0; } a#topBtn {display:block;font-size:0.75em;font-weight:bold;line-height:100%;color:#333;padding:0.5em;text-align:center;margin:0px 0.07em; position:fixed;right:0.8em;bottom:1em;opacity:0.7;filter:alpha(opacity=70);letter-spacing:0px;width:2.5em;height:2em;z-index:99999999;cursor:pointer; border:solid 1px #999;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; background: #ffffff; background: -moz-linear-gradient(top, #ffffff 0%, #eef0f3 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#eef0f3)); background: -webkit-linear-gradient(top, #ffffff 0%,#eef0f3 100%); background: -o-linear-gradient(top, #ffffff 0%,#eef0f3 100%); background: -ms-linear-gradient(top, #ffffff 0%,#eef0f3 100%); background: linear-gradient(to bottom, #ffffff 0%,#eef0f3 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eef0f3',GradientType=0 ); } /********** responsive **************************/ #Mask{ position:absolute; z-index:99999; background-color:#FFF; left:0; top:0;display:none;} #paygate_loading {position:absolute;top:300px;left:50%;width:390px;height:390px;padding:20px;margin:0px -205px;background:#fff;border:solid 2px #333;text-align:left;box-shadow:0px 3px 3px rgba(0,0,0,0.15);z-index:999999999;display:none;} #paygate_loading h1 {font-size:18px;height:30px;border-bottom:solid 1px #ddd;color:#000;margin-bottom:10px;*zoom:1} #paygate_loading h1:after {display:block;clear:both;content:"";} #paygate_loading h1 span {display:block;float:left;} #paygate_loading h1 a {display:block;float:right;font-weight:normal;} #paygate_loading h2 {font-size:24px;font-weight:bold;height:40px;color:#666;} #paygate_loading .body {height:240px;} #paygate_loading table tr {height:36px;} #paygate_loading table th {font-size:12px;color:#333;padding-right:10px;text-align:right;text-transform:uppercase;} #paygate_loading table td {color:#999;} #paygate_loading input[type=radio] {margin:0px 2px;} #paygate_loading input[type=text], #paygate_loading input[type=password] {border:solid 1px #ddd;height:26px;width:150px;} #paygate_loading .date input{width:80px;} #paygate_loading span {padding-left:10px;} #paygate_loading .btnWrap {text-align:right;padding-top:20px;border-top:dashed 1px #ddd;text-align:center;} #paygate_loading .btnWrap a{width:250px;} #paygate_card {position:absolute;top:50%;left:50%;width:760px;height:350px;padding:20px;margin:0px -400px;background:#fff;border:solid 2px #333;text-align:left;box-shadow:0px 3px 3px rgba(0,0,0,0.15);z-index:999999999;display:none;} #paygate_card h1 {font-size:18px;height:30px;border-bottom:solid 1px #ddd;color:#000;margin-bottom:10px;*zoom:1} #paygate_card h1:after {display:block;clear:both;content:"";} #paygate_card h1 span {display:block;float:left;} #paygate_card h1 a {display:block;float:right;font-weight:normal;} #paygate_card h2 {font-size:24px;font-weight:bold;height:40px;color:#666;} #paygate_card .body {height:240px;} #paygate_card table tr {height:36px;} #paygate_card table th {font-size:12px;color:#333;padding-right:10px;text-align:right;text-transform:uppercase;} #paygate_card table td {color:#999;} #paygate_card input[type=radio] {margin:0px 2px;} #paygate_card input[type=text], #paygate_card input[type=password] {border:solid 1px #ddd;height:26px;width:150px;} #paygate_card .date input{width:80px;} #paygate_card span {padding-left:10px;} #paygate_card .btnWrap {text-align:right;padding-top:20px;border-top:dashed 1px #ddd;text-align:center;} #paygate_card .btnWrap a{width:250px;} html {font-size: 80%;} /*font-size: 87.5%;*/ @media (min-width: 360px) { html { font-size: 90%; } } @media (min-width:601px){ html { font-size: 100%; } }