xsdot_css_product_view
/* Product view */ .prd-header {float:left;line-height:20px;margin:0px;padding-bottom:7px;font-size:16px;} .prd-row {clear:both;overflow:hidden;height:1px;background-color:#fafafa;margin-bottom:4px;} .prd-view-del {height:1px;clear:both;overflow:hidden;margin-top:2px;margin-bottom:2px;} .prd-tb {clear:both;overflow:hidden;padding:4px;} .prd-tbl {float:left;font-size:14px;padding-top:8px;line-height:12px;} .prd-fnd {float:left;font-size:14px;padding-top:5px;line-height:12px;} .sel-ob {float:right;border:1px solid #a0a0a0;} .sel-va {float:right;margin-right:4px;border:1px solid #a0a0a0;} @media (max-width: 600px) { .prd-tb {padding:4px 0px 4px 0px;} .prd-fnd {float:none;width:100%;border-width:0px 0px 1px 0px;border-style:solid;border-color:#e0e0e0;margin-bottom:6px;padding-top:0px;padding-bottom:5px;} } .prd-ttc {display:none;} .pc1 {position:relative;overflow:hidden;margin:12px 0px 12px 0px;padding:8px;border-radius:3px;} .pc1-cnt {overflow:hidden;line-height:24px;font-size:13px;} .pc1-cnt p {margin-bottom:6px;} .pc1-cnt a {color:#c0c0c0;} .pc1-cnt p a {color:#303030;} .pc1 h2 {font-size:17px;margin-top:8px;padding:0px;} .pc1 figure {float:left;width:200px;padding-right:16px;} .pc1 figure img {border-radius:3px;} .pc1 figure:hover {opacity: 0.84;} .pc1-order-button {position:relative;height:38px;margin-top:8px;} .pc1-order-quantity {position:absolute;} .pc1-order-quantity > input {float:left;width:30px;height:36px;text-align:center;padding:0px;border:1px solid #e0e0e0;margin-left:3px;margin-right:3px;} .pc1-oq-less, .pc1-oq-more {float:left;width:20px;height:36px;line-height:36px;text-align:center;border:1px solid #e0e0e0;font-size:18px; font-weight:bold;cursor:pointer;} .pc1-oq-less:hover, .pc1-oq-more:hover {background-color:#f0f0f0;} .pc1-oq-less {border-top-left-radius:3px;border-bottom-left-radius:3px;} .pc1-oq-more {border-top-right-radius:3px;border-bottom-right-radius:3px;} .pc1-order-bc {margin-left:86px;width:200px;} .pc1-order-bc > input {padding:0px;width:100%;height:38px;} @media (max-width: 980px) { .pc1 figure {width:160px;} } @media (max-width: 680px) { .pc1 {padding:0px;} .pc1:hover {-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} .pc1 figure {clear:both;float:none;width:64%;margin:auto;margin-top:54px;padding:0px;} .pc1-cnt {clear:both;padding:0px;margin:0px;padding-top:8px;} .pc1 h2 {position:absolute;top:0px;text-align:center;width:100%;} .pc1 p {opadding:8px;} .pc1-ob {margin:auto;margin-top:12px;margin-bottom:16px;} .row-disc {margin-right:6px;} .pc1-order-button {width:100%;margin:auto;margin-top:8px;} .pc1-order-bc {margin-left:86px;background-color:#00ff00;width:auto;} .pc1-order-bc > input {padding:0px;width:100%;} } @media (max-width: 460px) { .pc1 h2 {font-size:15px;} } .pc2 {position:relative;overflow:hidden;float:left;width:49%;margin:12px 0.5% 12px 0.5%} .pc2-cnt {overflow:hidden;line-height:24px;font-size:13px;} .pc2-cnt p {margin-bottom:6px;} .pc2-cnt a {color:#c0c0c0;} .pc2-cnt p a {color:#303030;} .pc2 h2 {font-size:18px;margin-top:8px;padding:0px;} .pc2 figure {float:left;width:160px;padding-right:16px;} .pc2 figure img {border-radius:3px;} .pc2 figure:hover {opacity: 0.84;} .pc2-order-button {position:relative;height:38px;margin-top:8px;} .pc2-order-quantity {position:absolute;} .pc2-order-quantity > input {float:left;width:30px;height:36px;text-align:center;padding:0px;border:1px solid #e0e0e0;margin-left:3px;margin-right:3px;} .pc2-oq-less, .pc1-oq-more {float:left;width:20px;height:36px;line-height:36px;text-align:center;border:1px solid #e0e0e0;font-size:18px; font-weight:bold;cursor:pointer;} .pc2-oq-less:hover, .pc1-oq-more:hover {background-color:#f0f0f0;} .pc2-oq-less {border-top-left-radius:3px;border-bottom-left-radius:3px;} .pc2-oq-more {border-top-right-radius:3px;border-bottom-right-radius:3px;} .pc2-order-bc {margin-left:86px;width:200px;} .pc2-order-bc > input {padding:0px;width:100%;height:38px;} @media (max-width: 980px) { .pc2 {float:none;width:100%;margin:12px 0px 12px 0px;} } @media (max-width: 680px) { .pc2 {padding:0px;float:none;} .pc2:hover {-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} .pc2 figure {clear:both;float:none;width:64%;margin:auto;margin-top:54px;padding:0px;} .pc2-cnt {clear:both;padding:0px;margin:0px;padding-top:8px;} .pc2 h2 {position:absolute;top:0px;text-align:center;width:100%;} .pc2 p {opadding:8px;} .row-disc {margin-right:6px;} .pc2-order-button {width:100%;margin:auto;margin-top:8px;} .pc2-order-bc {margin-left:86px;background-color:#00ff00;width:auto;} .pc2-order-bc > input {padding:0px;width:100%;} } @media (max-width: 460px) { .pc2 h2 {font-size:15px;} } .pi2 {display:block;margin:0px;padding:0px;text-align:center;} .pi2 li {position:relative;display:inline-block;list-style:none;width:48.0%;margin-left:0.6%;margin-right:0.6%;vertical-align:top;overflow:hidden;} .pi2 li a {margin:0px;margin-top:6px;margin-bottom:2px;padding:0px;line-height:22px;font-size:12px;font-weight:bold;text-align:center;display:block;color:#e0e0e0;} .pi2 li figure {margin-top:6px;height:0;padding-bottom:100%;} .pi2 li figure:hover {opacity: 0.84;} .pi2 img {border-radius:9px;-moz-border-radius:9px;} .pi2 div {margin:auto;} .pi3 {display:block;margin:0px;padding:0px;text-align:center;} .pi3 li {position:relative;display:inline-block;list-style:none;width:32.0%;margin-left:0.4%;margin-right:0.4%;vertical-align:top;overflow:hidden;} .pi3 li a {margin:0px;margin-top:6px;margin-bottom:2px;padding:0px;line-height:22px;font-size:12px;font-weight:bold;text-align:center;display:block;color:#e0e0e0;} .pi3 li figure {margin-top:6px;height:0;padding-bottom:100%;} .pi3 li figure:hover {opacity: 0.84;} .pi3 img {border-radius:9px;-moz-border-radius:9px;} .pi3 div {margin:auto;} .pi4 {display:block;margin:0px;padding:0px;text-align:center;} .pi4 li {position:relative;display:inline-block;list-style:none;width:23.8%;margin-left:0.4%;margin-right:0.4%;vertical-align:top;overflow:hidden;} .pi4 li a {margin:0px;margin-top:6px;margin-bottom:2px;padding:0px;line-height:22px;font-size:12px;font-weight:bold;text-align:center;display:block;color:#e0e0e0;} .pi4 h3 {line-height:22px;font-size:14px;font-weight:bold;} .pi4 li figure {margin-top:6px;height:0;padding-bottom:100%;} .pi4 li figure:hover {opacity: 0.84;} .pi4 img {border-radius:9px;-moz-border-radius:9px;} .pi4 div {margin:auto;} .pi5 {display:block;margin:0px;padding:0px;text-align:center;list-style:none !important;} .pi5 li {position:relative;display:inline-block;padding:0xp !important;list-style:none !important;width:18.9%;margin-left:0.3%;margin-right:0.3%;vertical-align:top;overflow:hidden;} .pi5 li a {padding:0px;margin:0px;margin-top:6px;margin-bottom:3px;line-height:22px;font-size:12px;font-weight:bold;text-align:center;display:block;color:#e0e0e0;} .pi5 h3 {line-height:22px;font-size:14px;font-weight:bold;} .pi5 li figure {margin-top:6px;height:0;padding-bottom:100%;} .pi5 img {border-radius:3px;} .pi5 div {margin:auto;} .pi5 li figure:hover {opacity: 0.84;} .pc5 {display:block;margin:0px;padding:0px;text-align:center;list-style:none !important;} .pc5 li {position:relative;display:inline-block;padding:0xp !important;list-style:none !important;width:18.9%;margin-left:0.3%;margin-right:0.3%;vertical-align:top;overflow:hidden;} .pc5 li a.title {position:absolute;z-index:10;width:100%;padding:0px;margin:0px;margin-top:6px;margin-bottom:3px;line-height:22px;font-size:15px;font-weight:bold;text-align:center;display:block;color:#e0e0e0;background-color:rgba(255, 255, 255, 0.6);} .pc5 h3 {line-height:22px;font-size:15px;font-weight:bold;} .pc5 li figure {margin-top:16px;height:0;padding-bottom:100%;} .pc5 li P {font-size:12px;line-height:22px;} .pc5 img {border-radius:3px;} .pc5 div {margin:auto;} .pc5 li figure:hover {opacity: 0.84;} .trunc-pc5 {height:66px;overflow:hidden;} .pi-price {display:block;text-align:center;font-weight:bold;font-size:11px;color:#e49f26;padding-bottom:6px;} /* discount */ .row-disc {float:right;background-color:#ff583e;color:#ffffff;line-height:32px;width:32px;font-size:11px;text-align:center;border-radius:16px;-moz-border-radius:16px;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-o-transform: rotate(45deg);} .icn-disc {position:absolute;z-index:4;right:4px;top:4px;background-color:#ff583e;color:#ffffff;line-height:32px;width:32px;font-size:11px;text-align:center;border-radius:16px;-moz-border-radius:16px;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-o-transform: rotate(45deg);} @media (max-width: 840px) { .pi4 li {width:22.0%;margin-left:0.6%;margin-right:0.6%;} .pi5 li {width:31.0%;margin-left:0.4%;margin-right:0.4%;} .pc5 li {width:31.0%;margin-left:0.4%;margin-right:0.4%;} } @media (max-width: 660px) { .pi4 li {width:48.0%;margin-left:0.6%;margin-right:0.6%;} .pi3 li {width:48.0%;margin-left:0.6%;margin-right:0.6%;} } @media (max-width: 600px) { .pit5 li {width:32.0%;margin-left:0.4%;margin-right:0.4%;} } @media (max-width: 460px) { .pc5 li, .pi5 li, .pi4 li {width:48.0%;margin-left:0.4%;margin-right:0.4%;} .pi3 li, .pi2 li {width:100.0%;margin-left:0.0%;margin-right:0.0%;} } @media (max-width: 420px) { .pit5 li {width:48.0%;margin-left:0.8%;margin-right:0.8%;} } @media (max-width: 380px) { .pc5 li, .pi5 li, .pi4 li {width:100.0%;margin-left:0.0%;margin-right:0.0%;} } /* tool tip */ #info_tool {padding:8px 8px 8px 8px;border:1px solid #343434;background-color:#343434;max-width:300px;color:#ffffff;border-radius:3px;-moz-border-radius:3px;font-size:13px;line-height:22px;-webkit-box-shadow: 4px 4px 4px -2px rgba(0,0,0,0.4);-moz-box-shadow: 4px 4px 4px -2px rgba(0,0,0,0.4);box-shadow: 4px 4px 4px -2px rgba(0,0,0,0.4);opacity:0.85;} .prd-tt-del {height:1px;clear:both;background-color:#202020;overflow:hidden;margin-top:2px;margin-bottom:2px;} .select-dd { odisplay: block; font-size: 14px; ofont-weight: bold; color: #606060; line-height: 1.3; padding: 8px; box-sizing: border-box; margin-left: 6px; border: 1px solid #f0f0f0; box-shadow: 0 1px 0 1px rgba(0,0,0,.01); border-radius: 3px; -moz-appearance: none; -webkit-appearance: none; appearance: none; background-color: #fff; background-image: none; background-repeat: no-repeat, repeat; background-position: right .7em top 50%, 0 0; background-size: .65em auto, 100%; } .select-dd::-ms-expand { display: none; } .select-dd:hover { border-color: #888; } .select-dd:focus { border-color: #aaa; box-shadow: 0 0 1px 1px rgba(59, 153, 252, .7);box-shadow: 0 0 0 1px -moz-mac-focusring;ocolor: #c0c0c0;outline: none; } .oselect-dd option { font-weight:normal; }