@charset "utf-8"; /************************/ /* overlay && overflow /************************/ .overflow-visible{ overflow:visible; } .overflow-hidden{ overflow:hidden; height: 100%; } .icon-facicons{ width: 16px; height: 16px; } .overlay { position: fixed; display: block; z-index: 9999; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.5); } .overlay2 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; background-color: #e7ebee; opacity: 0.6; z-index: 100; } /*------------------------------------- /* fix facebook's mobile debug /*-------------------------------------*/ .fb-comments, .fb_iframe_widget iframe[style], .fb_iframe_widget span[style] { width: 100% !important; display:block !important; } /*------------------------------------- /* 常用自訂style /*-------------------------------------*/ .easy-autocomplete-container{ z-index : 9999; } /* width */ .mainall { width:100%; background-color:#fff} .main966 { margin:0 auto; width:966px; overflow:hidden; background-color:#fff; height:auto;} .main950 { margin:0 auto; width:950px; margin:8px; overflow:hidden; height:auto;} /* float */ .fleft{ float:left; } .fright{ float:right; } /* clear && display */ .clearfix { display: block; clear:both; } .clear { clear:both;} .disblock { display: block;} .disnone { display: none;} /* margin */ .mgt8 { margin-top:8px;} .mgt10 { margin-top:10px;} .mgt20 { margin-top:20px;} .mgt30 { margin-top:30px;} .mgb10 { margin-bottom:10px;} .mgb20 { margin-bottom:20px;} .mgb30 { margin-bottom:30px;} .mgb35 { margin-bottom:35px;} .mgl5 { margin-left:5px;} .mgl8 { margin-left:8px;} .mgl10 { margin-left:10px;} .mgl20 { margin-left:20px;} .mgr5 { margin-right:5px;} .mgr10 { margin-right:10px;} .mgr15 { margin-right:15px;} .mg5 { margin:5px;} .mg10 { margin:10px;} .mg15 { margin:15px;} .mg20 { margin:20px;} .mgtb10 { margin-bottom:10px; margin-top:10px;} .mgtb20 { margin-bottom:20px; margin-top:20px;} .mgtb30 { margin-bottom:30px; margin-top:30px;} .mgtb40 { margin-bottom:40px; margin-top:40px;} .mgtb50 { margin-bottom:50px; margin-top:50px;} .mgtb60 { margin-bottom:60px; margin-top:60px;} /* padding */ .padt8 { padding-top:8px;} .padt10 { padding-top:10px;} .padt20 { padding-top:20px;} .padt30 { padding-top:30px;} .padt40 { padding-top:40px;} .padb10 { padding-bottom:10px;} .padb20 { padding-bottom:20px;} .padl10 { padding-left:10px;} .padl5 { padding-left:5px;} .padr10 { padding-right:10px;} .padr2 { padding-right:2px;} .padr5 { padding-right:5px;} .pad5 { padding:5px;} .pad10 { padding:10px;} .pad12 { padding:12px;} .pad15 { padding:15px;} .pad20 { padding:20px;} .padtb30 { padding-bottom:30px; padding-top:30px;} .padtb40 { padding-bottom:40px; padding-top:40px;} .padtb50 { padding-bottom:50px; padding-top:50px;} /* color */ .colorfff { color:#fff;} .color02b { color:#02bdd3;} .color777 { color:#777;} .colorccc { color:#CCC;} .colorred { color:#FF0000;} .colorblue{ color:#0000FF;} .colorgreen{ color:#5cb85c;} /* bg */ .bg066 { background-color:#066; } .bg099 { background-color:#099; } .bgfff { background-color:#fff; } .bge7e { background-color:#e7ebee; } /* line */ .line6 { clear:both; height:6px;} .llinered3 { clear:both; height:3px; border-left: 3px solid #f04848;} .llineblue3 { clear:both; height:3px; border-left: 3px solid #0000FF;} .llinegreen3{ clear:both; height:3px; border-left: 3px solid #5cb85c;} /* font-weight */ .strong{ font-weight:bold; } .normal{ font-weight:normal; } /* font-size */ .fontsize14{ font-size:14px; } .fontsize16{ font-size:16px; } .fontsize18{ font-size:18px; } .fontsize20{ font-size:20px; } /* 分隔線 */ .separator { color:#CCCCCC; display:inline; } /* border */ .borderddd { border: 1px solid #ddd; } .borderlccc { border-left:1px solid #CCCCCC; } .borderlred { border-left:1px solid #f04848; } .borderlred2 { border-left:2px solid #f04848; } .borderbred2 { border-bottom:2px solid #f04848; } .borderbddd { border-bottom:1px solid #ddd;} .borderbgreen3 { border-bottom: 3px solid #72c02c;} .no-border { border: medium none; border: 0 none; } /* border-radius */ .radius5{ border-radius: 5px; } /* img */ .media-img { max-width: 100%; height: auto; } /* string */ /* 接著在文字的區塊使用 text-overflow: ellipsis; 注意:在使用text-overflow: ellipsis; 時, 需要一併設定 white-space: nowrap; 及 text-overflow: ellipsis; 才會有效果。 */ .ellipsis { display: inline-block; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 1; display: -webkit-box; } /* .ellipsis:after { content: ""; text-align: right; position: absolute; bottom: 0; right: 0; width: 70%; background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%); } */ .ellipsis-clamp2 { -webkit-line-clamp: 2; /*height:2.8em;*/ } .ellipsis-clamp3 { -webkit-line-clamp: 3; /*height:4.2em;*/ } .ellipsis-nowrap { white-space: nowrap; } /* modal */ .filter-modal-list { height: 70vh; overflow-y: scroll; } /* .rank */ .rank-block{ width: 28px; height: 28px; font-size: 1.2em; line-height: 24px; text-align: center; display: block; position: absolute; left: 3px; top: 3px; z-index: 99; } /* .label-rank{ position:absolute; left: 1px; top: 1px; font-size: 12px; z-index: 99; } */ .rank-tag { padding: 0 7px; font-size: 1em; color: #FFFFFF; text-transform: uppercase; font-weight: bold; position: absolute; left: 0; top: 0; z-index: 50; opacity: 0.9; } .rank-tag123 { padding-left: 25px; background-repeat: no-repeat; background-image: url(../images/icon-hot.png); background-position: 4px center; } /* .discount */ .discount-tag{ /*background: rgba(0,0,0,0) url(../images/redlabel.png) no-repeat scroll 0 0;*/ color: #fff; cursor: default; font-size: 11px; font-weight: 700; height: 30px; line-height: 18px; position: absolute; right: 8px; text-align: center; bottom: 18px; width: 60px; background-color: red; border-radius: 50%; padding: 6px; } .discount-tag span { font-size: 18px; margin-right: 2px; } .rank-tag123 { padding-left: 25px; background-repeat: no-repeat; background-image: url(../images/icon-hot.png); background-position: 4px center; } /**************************** modal ****************************/ /* fix modal bug */ .modal-open { padding-right: 0px !important; } /**************************** boxshadow ****************************/ .shadow1 { box-shadow: 0 1px 3px -1px rgba(0, 0, 0, 0.4); } .shadow3 { box-shadow: 0 0 4px #cccccc; } .shadow4 { box-shadow: 0 0 4px #CCCCCC; background-color: #FFF; } /* .btn-default { border-color: #ccc; } .btn-default.active{ -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; background: rgba(0, 0, 0, 0) linear-gradient(to top, #e6e6e6 0px, #f2f2f2 100%) repeat scroll 0 0; box-shadow: none; border-color: #ccc; } */ /*------------------------------------ /* .TagBox /*------------------------------------*/ .TagBox{ margin-top: 5px; } .TagBox > li { display: inline-block; font-size: 12px; letter-spacing: normal; margin: 6px 0 ; word-spacing: normal; zoom: 1; } .TagBox > li a { color: #948888; display: block; padding: 4px; border: 1px solid #ccc; text-decoration: none; } /*------------------------------------ /* .tbox1 /*------------------------------------*/ .tbox1 { border-radius: 3px; background-color: #fff; border: 1px solid #ddd; /*box-shadow: 0px 1px 2px -1px #555;*/ } .tbox1-head { background: #eaeaea; font-weight: bold; padding: 8px 12px; line-height:1.2em; display: block; border-top: 1px solid #ddd; clear: both; content: " "; } .tbox1 .tbox1-head:first-child { border-top: 0px; } .tbox1-body, .tbox1-footer { padding: 12px; } .tbox1-pager { /*padding-left: 12px;*/ text-align: center; } /*------------------------------------ /* .tbox2 /*------------------------------------*/ .tbox2 { background: #ffffff; margin-bottom: 30px; display: block; box-shadow: 0 1px 1px rgba(180,180,180,0.5); -webkit-box-shadow: 0 1px 1px rgba(180,180,180,0.5); -moz-box-shadow: 0 1px 1px rgba(180,180,180,0.5); /* overflow: hidden; border-radius: 3px; */ } .tbox2-head { font-size: 16px; text-transform: uppercase; vertical-align: middle; white-space: nowrap; padding: 10px 0px; clear: both; display: block; content: " "; margin: 0; color: #1f1f1f; } .tbox2 .title { padding: 10px; color: #1d82c8; font-size: 16px; font-weight: 700; line-height: 1.1; border-bottom: 1px solid #e6e6e6; } .tbox2-head .liner { padding-right: 10px; } .tbox2-head img.icon-facicons{ vertical-align: none ; } .tbox2-head h3{ margin: 0px; display:inline-block; font-weight: bold; } .tbox2-head h3 .count{ /*color: #9a9a9a;*/ font-size: 14px; } .tbox2-body { margin-bottom: -1px; margin-right: -1px; overflow: hidden; } .tbox2-footer { } /*------------------------------------ /* .tbox3 /*------------------------------------*/ .tbox3 { background: #ffffff; /*border-radius: 3px;*/ box-shadow: 0 0 3px 2px hsla(0,0%,62%,.15); margin-bottom: 30px; display: block; overflow: hidden; /*box-shadow: 0 0 3px 2px hsla(0,0%,62%,.15);*/ } .tbox3-head { font-size: 18px; text-transform: uppercase; vertical-align: middle; white-space: nowrap; padding: 10px 0px; clear: both; display: block; content: " "; margin: 0; color: #1f1f1f; } .tbox3-head .liner { padding-right: 10px; } .tbox3-head h3{ margin: 0px; display:inline-block; font-weight: bold; } /*------------------------------------ /* .tbox5 /*------------------------------------*/ .tbox5 { background: #ffffff; overflow: hidden; position: relative; display: block; box-shadow: 0 1px 1px rgba(180,180,180,0.5); -webkit-box-shadow: 0 1px 1px rgba(180,180,180,0.5); -moz-box-shadow: 0 1px 1px rgba(180,180,180,0.5); margin-bottom: 15px; /* -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; */ } .tbox5-head { font-size: 18px; text-transform: uppercase; vertical-align: middle; white-space: nowrap; padding: 10px 0px; clear: both; display: block; content: " "; margin: 0; color: #1f1f1f; background: #f5f6f8; } /*------------------------------------ /* .item-box /*------------------------------------*/ .item-box { background: #fff; border-color: #ddd #ddd #ddd #fff; border-width: 1px 1px 1px 0; border-style: solid solid solid none; padding: 15px; margin-top: -1px; text-align: center; display: block; /* overflow: hidden; border: 1px solid #ddd; */ } .item-box > a { color: #369; text-decoration: none; } .item-box .sub_title{ color: #c00; width: 100%; padding: 0; height: 20px; margin-top:5px; } .item-box img { display: block; height: 150px; margin: 0 auto; transform: scale(1); -webkit-transform: scale(1); transition: all 0.25s cubic-bezier(0.4,0,1,1) 0s; -webkit-transition: all 0.25s cubic-bezier(0.4,0,1,1) 0s; } .item-box:hover img { transform: scale(1) translateY(-3px); opacity: .9; } .item-box h4 { color: #333; font-size: 16px; font-weight: 800; letter-spacing: 0; transition: all 0.25s cubic-bezier(0.4,0,1,1) 0.1s; -webkit-transition: all 0.25s cubic-bezier(0.4,0,1,1) 0.1s; line-height: 22px; margin: 6px 0; } .item-box .price{ color: #FF0000; font-family: "Century Gothic"; font-size: 22px; font-weight: bold; width: 50%; width: calc(100% - 60px); } .item-box .price span{ font-size: 18px; padding-right: 2px; } .item-box del{ color:#AAA; } .item-box .btn-danger { background:#ef4141; padding: 3px 12px; } @media screen and (max-width: 768px) { div.item-box { width: 33.33%; float: left; } } @media screen and (max-width: 480px) { div.item-box { width: 50%; float: left; } } /*------------------------------------- /* .box /*------------------------------------ .box.border { border: medium none; } .box { border: 1px solid #D8D8D8; border-radius: 3px 3px 3px 3px; overflow: hidden; background: url("../images/box_top_left.png") no-repeat scroll left top transparent; } .border { border-bottom: 1px dashed #C7C7C7; } .box_tr { background: url("../images/box_top_right.png") no-repeat scroll right top transparent; } .box_bl { background: url("../images/box_bot_left.png") no-repeat scroll left bottom transparent; } .box_br { background: url("../images/box_bot_right.png") no-repeat scroll right bottom transparent; } .box_t { background: url("../images/box_top.png") repeat-x scroll left top transparent; margin: 0 7px; } .box_b { background: url("../images/box_bot.png") repeat-x scroll left bottom transparent; padding: 7px 0; } .box_r { background: url("../images/box_right.png") repeat-y scroll right top transparent; margin: 0 -7px; } .box_l { background: url("../images/box_left.png") repeat-y scroll left top #F8F8F8; margin-right: 7px; overflow: hidden; padding: 23px 23px 16px 30px; } h2, h3 { color: #000000; font: 22px/25px 'CommunistRegular',Arial,sans-serif; margin-bottom: 24px; text-transform: uppercase; } .widget_wpsc_categorisation .wpsc_categorisation_group { float: right; margin-bottom: 10px; position: relative; width: 100%; } ul.border li, .box.border ul li { border-bottom: 1px dashed #D4D4D4; } ul.list2 li, .box_l ul li { color: #72767A; margin-bottom: 5px; vertical-align: middle; } .box_l ul li { list-style: disc inside url("../images/list2_bul.png"); } ul.list li, .box_l ul li, footer .inner-box ul li { padding-bottom: 7px; } */ /*------------------------------------- /* .box /*------------------------------------- .box { border-radius: 5px 5px 5px 5px; box-shadow: 2px 2px 0 #E1E1E1; background: url("../images/box-header.gif") repeat-x scroll 0 0 #FFFFFF; border: 1px solid #BBBBBB; margin-bottom: 15px; padding: 0; position: relative; } .box h2 { background: url("../images/icons/bullet_go.png") no-repeat scroll 10px center transparent; color: #555555; font-size: 13px; font-weight: bold; height: 23px; padding: 5px 36px; position: relative; text-shadow: 1px 1px 0 #FFFFFF; } .box img.toggle { cursor: pointer; position: absolute; right: 10px; top: 10px; } .box section { font-size: 11px; padding: 10px; } .box ul li { border-bottom: 1px dashed #D6D8D9; padding: 0; } .box ul li a { background: url("../images/icons/bullet_yellow.png") no-repeat scroll 0 center transparent; color: #333333; display: block; padding: 3px 5px 3px 18px; } .box ul ul { margin-left: 15px; } .box ul ul li { border-bottom: medium none; } /*------------------------------------- /* .d_title /*-------------------------------------*/ .d_title, .d_title .d_left, .d_title .d_right, .f_title, .f_title .f_left, .f_title .f_right, .e_title, .e_title .e_left, .e_title .e_right { background: url("../images/master.png") repeat scroll 0 0 transparent; } .d_title { background-position: 0 -92px; height: 31px; width: 100%; } .d_title h5 { color: SaddleBrown; float: left; font-weight: bold; line-height: 31px; } .d_title .d_right { background-position: -240px 0; float: right; height: 31px; width: 10px; } .d_title .d_left { background-position: 0 0; float: left; height: 31px; width: 10px; } .d_table { width: 100%; } #confine_search dl { border-left: 1px solid #D4D4D4; border-right: 1px solid #D4D4D4; clear: both; z-index: 3000; } #confine_search dt { background-color: #EAEAEA; font-weight: bold; padding: 5px 7px 4px; } #confine_search dd { padding: 8px 2px 0 12px; } #confine_search dd a { color: #005599; font-family: Arial,Courier,sans-serif; font-weight: normal; text-decoration: none; } .c4 { border-left: 1px solid #D4D4D4; border-right: 1px solid #D4D4D4; display: block; font-size: 1px; height: 2px; margin: 0; overflow: hidden; } .c3 { border-left: 1px solid #D4D4D4; border-right: 1px solid #D4D4D4; display: block; font-size: 1px; height: 1px; margin: 0 1px; overflow: hidden; } .c2 { border-left: 2px solid #D4D4D4; border-right: 2px solid #D4D4D4; display: block; font-size: 1px; height: 1px; margin: 0 1px; overflow: hidden; } .c1 { background: none repeat scroll 0 0 #D4D4D4; display: block; font-size: 1px; height: 1px; margin: 0 3px; overflow: hidden; } /*------------------------------------- /* .btn /*------------------------------------- .btn { -moz-transition-duration: 0.05s; -moz-transition-property: color, -moz-box-shadow, text-shadow; -moz-transition-timing-function: ease-in-out; border: 1px solid transparent; border-radius: 0.2em 0.2em 0.2em 0.2em; box-shadow: 0 1px rgba(255, 255, 255, 0.8), 0 1px rgba(255, 255, 255, 0.35) inset; cursor: pointer; display: inline-block; line-height: 1em; padding: 0.45em 0.825em; position: relative; text-align: center; } .btn:hover { text-decoration: none; } .btn strong { line-height: 15px; position: relative; z-index: 2; } .btn span { -moz-transition-duration: 0.5s; -moz-transition-property: opacity; -moz-transition-timing-function: ease-in-out; border: 1px solid; border-radius: 0.3em 0.3em 0.3em 0.3em; bottom: -1px; box-shadow: 0 1px rgba(255, 255, 255, 0.35) inset; display: block; left: -1px; opacity: 1; position: absolute; right: -1px; top: -1px; z-index: 1; } .btn:hover span { -moz-transition-duration: 0.05s; -moz-transition-property: opacity; -moz-transition-timing-function: linear; } .btn:active span { -moz-transition: none 0s ease 0s; } .btn11, .btn11 span { border-radius: 2px 2px 2px 2px; font-size: 11px; } .btn13, .btn13 span { border-radius: 3px 3px 3px 3px; font-size: 13px; } .btn18, .btn18 span { border-radius: 4px 4px 4px 4px; font-size: 18px; } .btn24, .btn24 span { border-radius: 5px 5px 5px 5px; font-size: 24px; } */ /**************************** bootstrap框架5等分 ****************************/ .col-md-1-5 { width: 20%; float: left; } .col-xs-1-5,.col-sm-1-5,.col-md-1-5,.col-lg-1-5 { min-height: 1px; padding-left: 15px; padding-right: 15px; position: relative; } @media (min-width: 768px) { .col-sm-1-5 { width: 20%; float: left; } } @media (min-width: 992px) { .col-md-1-5 { width: 20%; float: left; } } @media (min-width: 1200px) { .col-lg-1-5 { width: 20%; float: left; } }