/* CSS Document */
/* ---reset.css--- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* ---reset.css-------------------------------------------------------------------------- */
*{
margin: 0;
padding: 0;
-webkit-box-sizing:border-box;
box-sizing:border-box;
font-family: "微軟正黑體",Arial, Helvetica, sans-serif;
}
html{
font-family:Arial, Helvetica, sans-serif;
-webkit-text-size-adjust:none;
}
body{
background-color:#FFF;
}
/* ##############################DeskTop First 桌機版優先########################################################## */
#WRAPPER{
/*width:1200px;*/
margin:0 auto;
box-shadow:1px 1px 3px #333333;
overflow:hidden;
}
#HEADER{
background: rgb(255,255,255); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlNWU1ZTUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(229,229,229,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(229,229,229,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-8 */
height:60px;
padding-left:20px;
}
#HEADER h1{
float:left;
display:block;
overflow:hidden;
}
article{
height:100%;
overflow:hidden;
background-color:#ededed;}
.container{
overflow:hidden;
}
#FOOTER{
clear:both;
width:100%;
height:auto;
background:#EDEDED;
}
#FOOTER ul{
width:80%;
margin:0 auto;
color:#666;
height:auto;
font-size:12px;
padding-top:20px;
text-align:center;
line-height:1.5;
height:100px;
}
.REMARK{
border:1px dotted #009999;
font-size:12px;
color:#063;
display:block;
padding:10px;
line-height:1.2;
width:100%;
margin:8px auto;
overflow:hidden;
}
.NAV_TITLE{
color:#FFF;
font-size:.1.1em;
box-shadow: 0 0 3px #222;
width:120px;
float:left;
border-radius: 20px 100px;
text-align:center;
background: rgb(157,213,58); /* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(157,213,58,1) 0%, rgba(128,194,23,1) 27%, rgba(161,213,79,1) 66%, rgba(124,188,10,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(157,213,58,1)), color-stop(27%,rgba(128,194,23,1)), color-stop(66%,rgba(161,213,79,1)), color-stop(100%,rgba(124,188,10,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, rgba(157,213,58,1) 0%,rgba(128,194,23,1) 27%,rgba(161,213,79,1) 66%,rgba(124,188,10,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, rgba(157,213,58,1) 0%,rgba(128,194,23,1) 27%,rgba(161,213,79,1) 66%,rgba(124,188,10,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, rgba(157,213,58,1) 0%,rgba(128,194,23,1) 27%,rgba(161,213,79,1) 66%,rgba(124,188,10,1) 100%); /* IE10+ */
background: linear-gradient(135deg, rgba(157,213,58,1) 0%,rgba(128,194,23,1) 27%,rgba(161,213,79,1) 66%,rgba(124,188,10,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a', endColorstr='#7cbc0a',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
/*~~~~~~~~~~~~~~~~~~~~MEM_ADD~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.FORM{
width:600px;margin:0 auto; line-height:2.2; border-radius:10px; padding:20px; border:1px dashed #222;
background: #FFF;
}
.FORM li{
clear:both;
}
.MEM_TITLE{
width:200px;
display:block;
float:left;
text-align:right;
}
.SUBMIT{
text-align:center;
}
.TXT_BOX{
height:30px; width:30%;
}
.ENEWS{
width:15px;
height:15px;
}
.btn_mem{
height:44px;width:100px;
}
/*~~~~~~~~~~~~~~~~~~~MEM_QUERY~&_DＥＴＩＡＬ~~~~~~~~~~~~~~~*/
.ORDER_INFO ol{
display:block;
padding:10px;
background:#FFC;
margin:10px auto;
border-bottom:1px solid #CCC;
}
.ORDER_INFO ol li{
line-height:1.8;
}
.ORDER_INFO ol li.MORE{
text-align:right;
}
.ORDER_INFO ol li.MORE a{
text-decoration:none;
color:#069;
}
.ORDER_DETIAL ul{
width:100%;
clear:both;
overflow:hidden;
}
.ORDER_DETIAL ul li{
display:block;
float:left;
clear:none;
width:auto;
padding:4px;
}
.ORDER_DETIAL .PRD01{
width:50%;
}
.ORDER_DETIAL .PRD02{
width:25%;
}
.ORDER_DETIAL .PRD03{
width:20%;
}
.DETIAL_TITLE{
background:#70D1BC;
overflow:hidden;
border-bottom:1px solid #999;
border-top:1px solid #999;
box-shadow:1px -1px 3px #CCC;
line-height:1.2;
}
.TOTAL_PRICE{
margin-top:2%;
width:30%; float:right;
border-top:1px solid #F00;
padding-left:45%;
font-weight:bold;
}
.ORDER_DETIAL h4{
color:#06C;
border-bottom:1px solid #CCC;
font-weight:bold;
text-align:center;
}
.MEM_INFO{
font-size:13px;
line-height:1.6;
letter-spacing:1px;
text-align:justify;
text-justify:inter-cluster;
}
.MONEY{
color:#F00;
font-family:Verdana, Geneva, sans-serif;
}
/*~~~~~~~~~~~~~~~~~~~~~~~~MEMBER_WISHLIST~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.WISHLIST{
display:block;
overflow:hidden;
width:1100px;margin:0 auto; line-height:2.2; border-radius:10px; padding:20px; border:1px dashed #222;
background: #FFF;font-size:13px;
color:#999;
}
.WISHLIST li{
float:left;
line-height:1.5;
}
.WISHLIST ol li{
float:none;
}
.WISHLIST ol li img{
float:left;
}
.WISHBOX{
width:20%;
}
.WISHBOX2{
width:60%;
}
.WISHBOX3{
width:20%;
}
.PRD_PHOTO{
width:100%;
display:block;
overflow:hidden;
}
.PRD_NAME{
width:100%;
height:100px;
display:block;
overflow:hidden;
font-size:12px;
}
.PRD_PRICE{
width:100%;
height:100px;
display:block;
overflow:hidden;
color:#999;
}
.PRD_TITLE{
color:#09C;
font-size:1.2em;
}
.DESC{
height:55px;
display:block;
overflow:hidden;
margin-bottom:5px;
color:#099;
}
.WISH_MORE{
text-align:right;
}
.ICON{
color:#066;
font-weight:bold;
padding:5px 10px 0 15px;
}
/*~~~~~~~~~~~~~~~~~~~~MEM_MODIFY2~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.FORM_MODIFY{
width:900px;margin:0 auto; line-height:2.2; border-radius:10px; padding:20px; border:1px dashed #222;
background: #FFF;
font-size:13px;
}
.FORM_MODIFY li{
}
.MODIFY_BOX{
width:50%;
float:left;
}
.profile_info{
width:80px;display:block;float:left;text-align:right;
}
.MIN_REMARK{
color:#666;
font-size:12px;
}
/* ################################以下為 手機版 #################################################################*/
@media screen and (max-width: 599px) {
#HEADER h1 img{
float:left;
display:block;
overflow:hidden;
width:100px;
}
#FOOTER{
clear:both;
width:100%;
height:auto;
background:#EDEDED;
}
#FOOTER ul{
width:90%;
margin:0 auto;
color:#666;
height:auto;
font-size:11px;
padding-top:20px;
text-align:center;
line-height:1.2;
height:100px;
}
/*~~~~~~~~~~~~~~~~~~~~MEM_ADD~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.FORM{
width:320px;margin:0 auto; line-height:2.2; border-radius:10px; padding:10px; border:1px dashed #999999;font-size:13px;
}
.TXT_BOX{
height:44px; width:100%;
margin:0 auto;
}
.btn_mem{
height:44px;width:200px;
}
.FORM li{
clear:both;
}
.MEM_TITLE{
width:160px;
display:block;
float:left;
text-align:left;
}
.SUBMIT{
text-align:center;
}
.ENEWS{
width:25px;
height:25px;
}
/*~~~~~~~~~~~~~~~~~~~~~~~~MEMBER_WISHLIST~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.WISHLIST{
display:block;
overflow:hidden;
width:320px;
margin:0 auto;
line-height:2.2;
border-radius:10px;
padding:10px;
border:1px dashed #222;
background: #FFF;font-size:12px;
color:#999;
}
.WISHLIST li{
float:none;
line-height:1.5;
}
.WISHLIST ol li{
float:none;
}
.WISHLIST ol li img{
float:left;
}
.WISHBOX{
width:100%;
}
.WISHBOX2{
width:100%;
float:left;
}
.WISHBOX3{
width:40%;
float:right;
}
.PRD_PHOTO{
width:100%;
display:block;
overflow:hidden;
}
.PRD_NAME{
width:100%;
height:100px;
display:block;
overflow:hidden;
font-size:12px;
}
.PRD_PRICE{
width:100%;
height:100px;
display:block;
overflow:hidden;
color:#999;
}
.DESC{
height:55px;
display:block;
overflow:hidden;
margin-bottom:5px;
color:#099;
}
/*~~~~~~~~~~~~~~~~~~~~MEM_MODIFY2~MOBILE~~~~~~~~~~~~~~~~~~~~~~~~~*/
.FORM_MODIFY{
width:100%;
min-width:320px;
margin:0 auto; line-height:2.2; border-radius:10px; padding:20px; border:1px dashed #222;
background: #FFF;
font-size:13px;
}
.FORM_MODIFY li{
}
.MODIFY_BOX{
width:100%;
float:none;
}
}
/* ###############################以下為 平板電腦 ################################################################*/
@media screen and (min-width: 600px) and (max-width: 1024px) {
.item{width:33.3%;}
/*~~~~~~~~~~~~~~~~~~~~~~~~MEMBER_WISHLIST~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.WISHLIST{
display:block;
overflow:hidden;
width:700px;
margin:0 auto;
line-height:2.2;
border-radius:10px;
padding:20px;
border:1px dashed #222;
background: #FFF;font-size:12px;
color:#999;
}
.WISHLIST li{
float:left;
line-height:1.5;
}
.WISHLIST ol li{
float:none;
}
.WISHLIST ol li img{
float:left;
}
.WISHBOX{
width:20%;
}
.WISHBOX2{
width:60%;
float:left;
}
.WISHBOX3{
width:20%;
float:right;
}
.PRD_PHOTO{
width:100%;
display:block;
overflow:hidden;
}
.PRD_NAME{
width:100%;
height:100px;
display:block;
overflow:hidden;
font-size:12px;
}
.PRD_PRICE{
width:100%;
height:100px;
display:block;
overflow:hidden;
color:#999;
}
.DESC{
height:55px;
display:block;
overflow:hidden;
margin-bottom:5px;
color:#099;
}
.WISH_MORE{
text-align:right;
}
/*~~~~~~~~~~~~~~~~~~~~MEM_MODIFY2_平板~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.FORM_MODIFY{
width:650px;margin:0 auto; line-height:2.2; border-radius:10px; padding:20px; border:1px dashed #222;
background: #FFF;
font-size:12px;
}
}