@charset "utf-8";
@font-face {  font-family: BebasNeue; src: url(../font/BebasNeue.otf);}

body { background:#EFEEEF; margin:0; padding:0; font-family:Microsoft JhengHei; position:relative; font-size:16px;}
img { border:0; vertical-align:middle;}
input { vertical-align:middle; font-family:Microsoft JhengHei;}
select {  font-family:Microsoft JhengHei;}

/*  漸變效果 */
a {transition: all 0.3s ease 0s; text-decoration:none;}

.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}/* End hide from IE-mac */


/*  padding and border no width  */
*{
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
 -moz-box-sizing: border-box;   /* Firefox, other Gecko */
 box-sizing: border-box;        /* Opera/IE 8+ */
}

.wallpeper { width:100%; overflow:hidden; }
.main-box {  }
.in-main-box { }
.inside-main-box { max-width:1200px; margin:0 auto; padding:20px 0;  }


.left-bg { position:absolute; top:0; left:0; width:auto; height:auto; z-index:1; }

.top-banner {background-position:top; background-repeat:no-repeat; background-size: cover; }
.top-banner h3 { max-width:1200px; margin:0 auto; font-size:24px; color:#333; padding:40px 10px;}
.top-banner h3 span { display:block; font-size:18px; padding-top:0px; color:#666;}

.title-bg01 { background-image:url(../images/inside-bg.jpg);}
.title-bg02 { background-image:url(../images/inside-bg02.jpg);}
.title-bg03 { background-image:url(../images/inside-bg.jpg);}
.title-bg04 { background-image:url(../images/inside-bg.jpg);}
.title-bg05 { background-image:url(../images/inside-bg.jpg);}
.title-bg06 { background-image:url(../images/inside-bg.jpg);}


/*  header */
.header { background:url(../images/top-bg.jpg) repeat no-repeat #ffffff; background-size:cover; position:relative; z-index:11; padding:10px;  margin:0 auto; }
.header .logo { padding:20px 0; }
.header .logo img { height:auto; width:300px;}
.header .top-slogan { position:absolute; right:10px; top:25%; height:50%; }

.login-info { font-size:14px; color:#C30; position:absolute; right:0; top:10px;}
.login-info a { color:#666; padding:0 5px;}
.login-info span.name { color:#333; padding-right:10px;}
.login-info a img { height:14px; width:auto; padding-right:5px;}

ul.top-tool { list-style:none; padding:5px 10px; margin:0; position:absolute; right:0; top:50%; margin-top:-25px;  border:0px #CCCCCC solid; border-radius: 20px;}
ul.top-tool li { display:inline-block;}
ul.top-tool li a { display:block; padding:5px; color:#333; font-size:14px;}
ul.top-tool li.icon a {  padding:5px 0;}

ul.top-tool li a:hover { color:#F00;}
ul.top-tool li img { height:30px; width:auto;}
ul.top-tool li:hover img { opacity:0.6;}
ul.top-tool li .search-input { background:#EFEFEF; border:0; border-radius: 2px 0 0 2px; width:100px; margin:0; font-family:Microsoft JhengHei; font-size:14px; padding:2px 5px 3px 15px;}
ul.top-tool li .search-btn { font-family:Microsoft JhengHei; background:#2496a0; color:#ffffff; padding:0px 15px; margin:0; line-height:24px; font-size:14px; border:0; border-radius:0 2px 2px 0;}

/*  nav  */
nav { background:#E53A75; }
.menu { margin:0; padding:0; list-style:none; text-align:center;}
.menu>li { float:left; color:#090404; font-size:14px; position:relative; width:14.28%;} 

.menu>li>a { display:block; color:#ffffff; border-right:1px #ffffff solid; text-align:center; padding:5px 0px; line-height:25px;}
.menu>li>a:hover { background:#c82c5f;}

.menu li>span.main-nav {display:block; color:#ffffff; padding:5px 0px; border-right:1px #ffffff solid; text-align:center; cursor:pointer; line-height:25px;}
.menu li>ul.sub { opacity:0; position:absolute; left:0; top:50px; width:100%; transition: all 0.3s ease 0s; visibility: hidden; z-index: 9999;}
.menu li:hover>span { background:#c82c5f; }

.menu li:last-child>span, .menu li:last-child>a { border-right:0; }
.menu li>ul.sub { margin:0; padding:0; list-style:none; width:100%;}
.menu li>ul.sub>li { padding:0; border-bottom:1px #ffffff solid;}
.menu li>ul.sub>li:last-child { border-bottom:0;}
.menu li>ul.sub>li a { background:rgba(181,75,116,0.8); display:block; color:#ffffff; font-size:14px; padding:7px;}
.menu li>ul.sub>li a:hover { background:rgba(181,110,180,0.8); }
.menu li:hover>ul.sub {  opacity:1; top:35px; transition: all 0.3s ease 0s; visibility: visible; }

.slicknav_menu { display:none;}

/*  banner  */
.banner {}
.banner img { width:100%; height:auto;}

/* member   */

.left-menu02 { }
.left-menu02 ul { margin:0; padding:0; list-style:none;}
.left-menu02 ul li { margin: 0 0 0px 0; border-bottom:1px #aae5eb solid; font-size:14px;}
.left-menu02 ul li a { background:#ffffff; color:#999999; padding:5px 10px; display:block;}
.left-menu02 ul li a:hover { background:#999999; color:#ffffff;}

.member-cont { background:#FFF;}
.member-cont .title { padding:10px 15px; margin:0; background: #5dc2cc;  color:#ffffff; font-weight:normal; font-size:16px;}
.member-cont .cont-box { padding:10px 0;}

.member-form {  }
.member-form .note { font-size:14px; color:#F30; padding:0 0 10px 0;}
.member-form .form-lis { display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	    -ms-flex-wrap: wrap;
	        flex-wrap: wrap; font-size:14px; line-height:1.2em; padding:3px 0; border-bottom:1px #CCCCCC dotted;}
.member-form .form-lis .title { background:#ffffff; display:block; font-size:14px; color:#666666; width:120px; padding:5px 7px; text-align:right; border-left:3px #CCCCCC solid;}
.member-form .form-lis .data { background:#ffffff; display:block; padding:5px 7px; -webkit-flex: 1; flex: 1; font-size:14px; color: #333;}
.member-form .form-lis input.data { border:1px #CCCCCC solid; width:100%; font-size:14px; font-family:Microsoft JhengHei; }
.member-form .form-lis textarea.data { border:0; width:100%; font-size:14px; font-family:Microsoft JhengHei; }

.order-lis { }
.order-lis .data-info { background:url(../images/cart-bg.jpg); font-size:16px; text-align:center; color:#C63; padding:10px; border:1px #CCCCCC dashed; margin-bottom:10px;}
.order-lis ul { list-style:none; margin:0; padding:0;}
.order-lis ul li { display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	    -ms-flex-wrap: wrap;
	        flex-wrap: wrap; background:#FFF; border-bottom:1px #E4E4E4 solid; font-size:14px;}
.order-lis ul li>div { -webkit-flex: 1; flex: 1; text-align:center;  font-size:14px; padding:5px ; border-left:1px #f0f0f0 dotted;}
.order-lis ul li>div:first-child { border-left:0; t } 
.order-lis ul li.th-lis { text-align:center; background:#B6B7A2; color:#ffffff; padding:0px; font-size:14px; border:1px #868457 solid;}
.order-lis ul li.th-lis .finish {  color:#ffffff; font-size:14px;}
.order-lis ul li .number { text-align:left;}
.order-lis ul li .number a { color: #86883C;}
.order-lis ul li .number a:hover { color: #F00;}
.order-lis ul li .number a img { height:16px; width:auto; padding-right:5px; opacity:0.5;}
.order-lis ul li .finish { color:#CCC;}
.order-lis ul li .time {  }
.order-lis ul li .unpaid { color: #F63;}
.order-lis ul li .preparing { color:#693;}
.order-lis ul li .shipped { color: #999; }
.order-lis ul li .shipped a { color: #F93;}

.search-bar { padding-bottom:10px;  display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	    -ms-flex-wrap: wrap;
	        flex-wrap: wrap; margin-bottom:10px; border-bottom:1px #CCCCCC solid;}
.search-bar input.text { padding:3px 7px; font-family:Microsoft JhengHei;}
.search-bar .kyeword { display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	    -ms-flex-wrap: wrap;
	        flex-wrap: wrap; width:50%; padding-right:5px;-webkit-flex: none; flex: none;}
.search-bar .kyeword input.text { -webkit-flex: 1; flex: 1;}
.search-bar .kyeword input.search-btn { width:100px; border:0; background:#333; color:#ffffff;  font-size:14px; padding:3px 7px; font-family:Microsoft JhengHei; cursor:pointer;}
.search-bar .kyeword input.search-btn:hover { background:#930;}

.search-bar .timearea { -webkit-flex: 1; flex: 1; display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	    -ms-flex-wrap: wrap;
	        flex-wrap: wrap; padding-left:5px;}
.search-bar .timearea .time-box { -webkit-flex: 1; flex: 1; display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	    -ms-flex-wrap: wrap;
	        flex-wrap: wrap;}
.search-bar .timearea .time-box span { display:block; width:10%; text-align:center;-webkit-flex: none; flex: none;}
.search-bar .timearea .time-box input { font-size:14px; font-family:Microsoft JhengHei; display:block;-webkit-flex: 1; flex: 1; width:80%; }
.search-bar .timearea input.search-btn { width:100px; border:0; background:#333; color:#ffffff;  font-size:14px; padding:3px 7px; font-family:Microsoft JhengHei; cursor:pointer;-webkit-flex: none;
          flex: none; display:block;}
.search-bar .timearea input.search-btn:hover { background:#930;}

/*  content  內文  */
.font-title { font-size:30px; margin:0 0 10px 0; padding:0; color:#333; font-weight:normal;}
.font-title-02 { font-size:18px; margin:0 0 10px 0; color:#a8a69c; font-weight:normal; }
.font-content { font-size:14px; line-height:1.6em; padding:20px 0; color:#3a3a3a;}
.img-left { padding-right:20px; padding-bottom:10px;}
.img-right { padding-left:20px; padding-bottom:10px;}


/*  about  內文  */
.about-pro { padding:0 20px;}
.about-pro img { max-height:150px; height:auto; width:auto;}
.pro-title { color:#808239; font-size:16px; margin:0; padding:20px 0 10px 0;}


/*  left-menu  */
.left-menu { background:#e9e9e9; margin:0; padding:15px ; list-style:none; }
.left-menu>li { border-bottom:1px #BC6788 solid; }
.left-menu>li:last-child { border-bottom:0; }
.left-menu>li>a, .left-menu>li>span { display:block; padding:10px; color: #878787; font-size:16px; text-align:center;}
.left-menu>li>a:hover,.left-menu>li.active>a, .left-menu>li.active>span { background:#BC6788; color:#ffffff;   }
.left-menu>li.active {border-bottom:0; }

.m-left-menu { display:none; }
.left-menu>li>.sub { padding-left: 20px;}

.sub { list-style:none; margin:0 0 10px 10px; padding:5px 0 10px 0;}
.sub>li { padding:3px 0;}
.sub>li>a, .sub>li>span {font-size:14px; color:#999; display:block;}
.sub>li>a:hover { color:#69F;}

/* faq-icon */
.faq-icon { padding:10px 0; }
.faq-icon a { display:block; width:15.6%; margin:0.5%; float:left;}
.faq-icon a img { width:100%; height:auto;}
.faq-icon a:hover { opacity:0.8;}

.faq-list { border-top:3px #E53A75 solid; padding:15px 0 0 0; }
ul.accordionPart { list-style:none; margin:0; padding:10px 0; }
ul.accordionPart li { padding:10px 0; border-bottom:1px #CCCCCC dotted; }
ul.accordionPart li:nth-child(even) { background:#E8E8E8;}
ul.accordionPart li .qa_title a { font-size:16px; font-weight:400; color:#000000; padding:0px 10px; display:block; }
ul.accordionPart li .qa_content { font-size:14px; font-weight:400; color: #666; padding:5px 10px; }
ul.accordionPart li a.close_qa { display:inline-block; background:#C33; color:#ffffff; padding: 5px 10px; border-radius: 5px;}
ul.accordionPart li a.close_qa:hover { background:#933;}

a.qa_showall { background:#69C; color:#fff; display:inline-table; padding:2px 8px; font-size:14px; border-radius: 3px;}
a.qa_showall:hover { background:#399;}
a.qa_hideall { background:#E53A75; color:#fff; display:inline-table; padding:2px 8px; font-size:14px; border-radius: 3px;}
a.qa_hideall:hover { background: #C06; }

/* links-list */
.links-list { }
.links-list .item { width:24%; margin:0.5%; float:left; padding:5px; background:#FFF;}
.links-list .item a { display:block; width:100%; height:0; padding-bottom:80%; background-position:center; background-repeat:no-repeat; background-size:cover;}
.links-list .item a:hover { opacity:0.8;}
.links-list .item h3 { text-align:center; font-size:14px; line-height:1.4em; height:2.8em; color:#666; overflow: hidden; margin:8px 0; font-weight:500;}

/*  page  */
.page-box {  border-radius:10px; overflow:hidden; }
.page-title { border-bottom:3px #BC6788 solid;margin:0 0 20px 0;}
.page-title h3 { font-weight:normal; font-size:24px; color:#000000; margin:0 0 0px 0; padding:0 0 15px 0px; }

.page-box .content-box { background:#ffffff; min-height:300px; padding: 15px 0px 30px 0px; position:relative; z-index:10;}
.page-box .page-cornor { position:relative; z-index:1; } 
.page-box .page-cornor .left { position:absolute; bottom:0px; left:0px;}
.page-box .page-cornor .right { position:absolute; bottom:0px; right:0px;}

.sub-title { background:#ffd3d7; font-size:18px; text-align:center; font-weight:normal; color:#972c2c; margin:0; padding:10px 20px; line-height:32px; border-radius: 5px 5px 0 0;}
.sub-title img { padding-right:5px;}



/* 首頁模組 */
h3.index-h3 { border-left:4px #669933 solid; color:#669933; font-size:16px; font-weight:normal; padding-left:10px; line-height:16px;}
.inde-video iframe { display:block; width:100%; height:200px; }
.inde-pro a { display:block; width:100%; height:200px; background:center; background-size: cover; }
.inde-pro a:hover { opacity:0.8;}
.inde-fbfans iframe { display:block; width:100%; height:200px; }
.inde-event-box { display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	    -ms-flex-wrap: wrap;
	        flex-wrap: wrap;}
.inde-event-box a {display:block; height:200px; -webkit-flex: 1;  flex: 1; background:center; background-size: cover;}
.inde-event-box a:hover { opacity:0.8;}
.inde-event-box:first-child a { margin-right:3px;}
.inde-event-box:last-child a { margin-left:3px;}

.index-title { color:#2d2d2d; font-size:24px; font-weight:500; line-height:1em; border-left:5px #d42e2e solid; padding:0 0 0 10px; position:relative;}
h3.index-title img { position:absolute; left:10px; bottom:0; width:50px; height:auto;}

/* activity */
.activity ul { list-style:none; margin:0; padding:0 0 20px 0;}
.activity ul li { float:left; width:25%; padding:5px;}
.activity ul li a { display:block; width:100%; height:200px; background:center; background-size: cover;}
.activity ul li:hover a { opacity:0.7;}
.activity ul li h3 { line-height:1.5em; height:5em; overflow:hidden; font-size:16px; font-weight:normal;}

/* index-highlight */
.index-highlights { }
.index-highlights ul { list-style:none; margin:0; padding:0 0 20px 0;}
.index-highlights ul li { float:left; width:25%; padding:5px; height:200px;}
.index-highlights ul li a { display:block; width:100%; height:100%; background:center; background-size: cover;}
.index-highlights ul li a:hover { opacity:0.8;}
.index-highlights a.more { display:block; width:150px; background:#2496a0; color:#ffffff; line-height:40px; text-align:center; margin:0 auto;}

/* message */
.message-box { padding:50px 0;}
.message-box .table-box { background: url(../images/cart-bg.jpg); padding:10px 20px; max-width:500px; margin:0 auto; border:5px #E2E2E2 solid; }
.message-box .table-box h3 { font-weight:normal; margin:0 0 10px 0; padding-bottom:10px; font-size:16px; border-bottom:1px #CCCCCC dotted;}
.message-box .table-box h3 img { height:18px; opacity:0.5; padding:0 5px 2px 0;}
.message-box .table-box .content { font-size:14px; line-height:1.6em; min-height:100px;}
.message-box .table-box .content span { color:#C30;}
.message-box .table-box .forget { padding-top:10px; font-size:14px; line-height:1.6em; min-height:100px; color:#C30;}


.btn { padding:10px; text-align:center; }
.btn a { background: #F4F4F4; color:#666666; display: inline-block; padding:5px 15px; border:2px #D4D4D4 solid;}
.btn a:hover { background:#D4D4D4; color:#ffffff;}

.order-finish { background:#ffffff; max-width:500px; margin:0 auto; padding:10px; border:1px #999999 dashed;}
.remittance-info { padding:10px; background: #FEDEDE; color:#930; border:1px #F3A5A5 dashed; line-height:1.6em;}
.status-info { padding:10px; background: #6FC; color:#930; border:1px #98BF91 dashed; line-height:1.6em; text-align:center; font-size:16px;}

/* product */
.product-lis { background:#ffffff; margin:0; padding:20px 10px; list-style:none;}
.product-lis li { float:left; width:23%; margin:1%;transition: all 0.3s ease 0s; padding:5px;}
.product-lis li:hover { background:#E9E9E9;transition: all 0.3s ease 0s;}
.product-lis li .photo { background-position:center; background-size:cover; }
.product-lis li .photo a { display:block; width:100%; height:0; padding-bottom:100%;}
.product-lis li .photo img { max-height:100%; max-width:100%; width:auto; height:auto;}
.product-lis li h3 { margin:10px 0 5px 0; padding:0; text-align:center;}
.product-lis li h3 a { color:#333; font-size:14px; display:block; height:3.6em; line-height:1.2em; overflow:hidden;}
.product-lis li h3 a:hover { color:#C60;}
.product-lis li .quantity { text-align:center; font-size:14px; padding-bottom:10px; color:#666;}
.product-lis li .quantity-num { width:110px; margin:0 auto 10px auto;}
.product-lis li .price { font-size:20px; color:#F00; text-align:center; padding-bottom:10px; font-family:BebasNeue;}

.add-to-order {color:#ffffff; text-align:center;}
.add-to-order a { background: #f09696; display: inline-block; font-size:14px; color:#ffffff; padding:5px 15px; border-radius: 4px;}
.add-to-order a img { height:14px; width:auto; padding-right:10px;}
.add-to-order a:hover { background:#EEA2A2;}

.none-search { padding:20px; border:1px #FFCCCC dashed; text-align:center;  font-size:16px; line-height:1.6em; color:#666; margin-top:20px; }

/* product detaile */
.pro-detail-box { padding-left:30px;}
.product-cont { background:#ffffff; position:relative; z-index:10; padding: 15px 0px 15px 0px;}
.detail-title { border-bottom:2px #ffd3d7 solid; font-size:18px; font-weight:normal; color:#972c2c; margin:0; padding:0 0 10px 0; line-height:1.4em;}
.detail-title img { padding-right:5px;}

.product-box { display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	    -ms-flex-wrap: wrap;
	        flex-wrap: wrap;}
.product-info { -webkit-flex: 1; flex: 1; font-size:14px;  line-height:1.8em; color:#666; position:relative; padding:0 0 70px 0; height:auto;}
.product-photo { -webkit-flex: 1; flex: 1; text-align:center; padding-right:10px}
.product-photo img { max-height:400px; max-width:100%; width:auto; height:auto;}
.product-info .cart { position:absolute; bottom:0; width:100%; border-bottom:1px #CCCCCC solid;  border-top:1px #CCCCCC solid; padding:7px 0; text-align:center;}
.product-info .cart a.btn-cart { background:#48c3ce; display: inline-block; line-height:30px; color:#ffffff; font-style:16px; padding:0 20px; }
.product-info .cart a.btn-cart:hover { background:#ce4881; } 

.product-info .briefly { padding:10px 0; color:#666; font-size:14px; line-height:1.6em; max-height:140px; overflow-y: scroll; }
.pro-info-title { background:#f3f3f3;  padding:10px; font-size:16px; text-align:center; color:#999; margin:20px 0; }

/*STYLE 1*/
.product-info .briefly-style::-webkit-scrollbar-track
{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; background-color: #F5F5F5;}
.product-info .briefly-style::-webkit-scrollbar
{width: 12px; background-color: #F5F5F5;}
.product-info .briefly-style::-webkit-scrollbar-thumb
{ border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: #2496a0;}

@media screen and (max-width: 1000px) {
   .product-info .briefly { max-height:100px; }
}

.spec {  padding: 0 0 0px 0; margin-bottom:10px; text-align:left;}
.spec .pro-color { list-style:none;  margin:0 0 10px 0; padding:0 0 0px 0; border-bottom:1px #F0F0F0 solid;}
.spec .pro-color li { display:inline-block; width:20px; height:20px; border:3px #f0f0f0 solid; cursor:pointer; transition: all 0.3s ease 0s; margin-right:5px; }
.spec .pro-color li:hover, .spec .pro-color li.active { border:3px #333333 solid; transition: all 0.3s ease 0s; }


.spec .pro-size { list-style:none; margin:0 0 10px 0; padding:0 0 10px 0; border-bottom:1px #F0F0F0 solid;}
.spec .pro-size li { display:inline-block; width:40px; padding:2px 5px; border:1px #d6d6d6 solid; font-size:16px; line-height:20px; text-align:center; cursor:pointer; transition: all 0.3s ease 0s; margin-right:5px;}
.spec .pro-size li:hover, .spec .pro-size li.active { background:#48c3ce; border:1px #48c3ce solid; color:#ffffff; transition: all 0.3s ease 0s; }

.spec .pro-size select {  font-family:Microsoft JhengHei; font-size:14px; border:1px #48c3ce solid; color: #669; padding: 3px 10px; }


.pro-sec { height:30px; text-align:center;}
.pro-sec select { font-family:Microsoft JhengHei; font-size:12px; border:1px #CCCCCC solid; color: #666; padding: 3px 10px; width:110px; margin:0 auto; }


.m-table { list-style:none; margin:0; padding:10px 0 20px 0;}
.m-table li { display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	    -ms-flex-wrap: wrap;
	        flex-wrap: wrap; border-bottom:1px #CCC dotted; color: #737360;}
.m-table li span { display:block; -webkit-flex: 1; flex: 1; text-align:center; padding:5px; line-height:1.6em;}
.m-table li:first-child { border-top:3px #CCC solid;}

.product-info .price { width:100%; text-align:right; font-size:16px; font-family:BebasNeue; color:#F00; padding:15px 0 10px 0;}
.product-info .price span { font-size:48px; font-family:BebasNeue; padding-left:5px; display: inline-block; line-height:48px; }
.product-title { font-size:24px; margin:0; padding:0 0 10px 0; color:#333; font-weight:normal;}
.product-time { font-size:16px; margin:0 0 10px 0; color:#a8a69c; font-weight:normal; }
.product-content { font-size:14px; line-height:1.6em; padding:0 0 20px 0; color:#3a3a3a;}
.product-content img { display:block; width:auto; height:auto; max-width:100%; margin-bottom:10px;}

.count { display:inline-block; line-height:30px; padding-right:5px;}
.qtyInputBox { display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	    -ms-flex-wrap: wrap;
	        flex-wrap: wrap;}
.qtyInputBox input { line-height:30px; height:30px; border:1px #CCCCCC solid; width:50px; display:block; text-align:center;}
.qtyInputBox span { display:block; width:30px; cursor:pointer; }
.qtyInputBox span button.fa-plus { background:#FFF; line-height:30px; height:30px; border:1px #CCCCCC solid; border-left:0; width:100%; cursor:pointer;  }
.qtyInputBox span button.fa-minus { background:#FFF; line-height:30px; height:30px; border:1px #CCCCCC solid; border-right:0; width:100%; cursor:pointer;  }
.qtyInputBox span button { padding:6px; }
.qtyInputBox span button img { width:100%; height:auto;}


/* search-history */
.search-history { padding-bottom:15px;}
.history-title { position: relative; background:#d7fcff;  padding:8px 15px; border:3px #bcdbed solid; margin-bottom:10px; font-style:16px; color:#2496a0; text-align:center;}
.history-title .icon { width:40px; height: auto; position:absolute; top:-12px; left:50%; margin-left:-20px; }
.search-history ul { list-style:none; margin:0; padding:0;}
.search-history ul li { padding:10px; border-bottom:1px #f2f2f2 solid; position:relative;}
.search-history ul li:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.search-history ul li .rank { background:#F30; width:40px; height:40px; line-height:40px; text-align:center; color:#ffffff; font-size:16px; position:absolute; top:-10px; left:-10px;}
.search-history ul li .photo { height:120px; float:left; width:50%;  border:1px #E7E7E7 solid; text-align:center; padding:5px;}
.search-history ul li .photo img { width:auto; height:auto; max-height:100%;}
.search-history ul li .pro-name {  float:left; width:50%;  }
.search-history ul li .pro-name a.name { font-size:14px; color:#333; display:block; line-height:1.4em; padding: 0 0 10px 10px;}
.search-history ul li .price {  font-family:BebasNeue; color:#f08c98; font-size:23px; display:block; text-align: right; }


/* hot-rank */
.hot-rank { padding-bottom:15px;}
.hot-rank-title { position:relative; background:#fff2f1;  padding:8px 15px; border:3px #f4d0ce solid; margin-bottom:10px; font-style:16px; color:#e6635b; text-align:center;}
.hot-rank-title .icon { width:40px; height: auto; position:absolute; top:-12px; left:50%; margin-left:-20px; }
.hot-rank ul { list-style:none; margin:0; padding:0;}
.hot-rank ul li { padding:10px; border-bottom:1px #f2f2f2 solid; position:relative;}
.hot-rank ul li:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.hot-rank ul li .rank { background:#F30; width:40px; height:40px; line-height:40px; text-align:center; color:#ffffff; font-size:26px; position:absolute; top:5px; left:5px; border-radius:10px 0 10px 0; font-family:BebasNeue;}
.hot-rank ul li .photo { height:120px; float:left; width:50%; border:1px #E7E7E7 solid; text-align:center; padding:5px;}
.hot-rank ul li .photo img { width:auto; height:auto; max-height:100%;}
.hot-rank ul li .pro-name { float:left; width:50%; }
.hot-rank ul li .pro-name a.name { font-size:14px; color:#333; display:block; line-height:1.4em; padding: 0 0 10px 10px;}
.hot-rank ul li .price {  font-family:BebasNeue; color:#f08c98; font-size:23px; display:block; text-align: right; }




/* index-catalog */
.index-catalog {
 margin-bottom:30px; }
.index-catalog:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.index-catalog .index-catalog-banner {  float:left; width:25%;}
.index-catalog .index-catalog-banner a { display:block; width:100%;}
.index-catalog .index-catalog-banner a img { width:100%; height:auto;}
.index-catalog .index-catalog-list {  padding-left:10px; float:left; width:75%; } 
.index-catalog .index-catalog-list>h3 { background:#CCC; color:#ffffff; padding:5px 10px; margin:0; font-size:20px;}
.index-catalog .index-catalog-list ul { list-style:none; margin:0; padding:10px 0 0 0; margin:0 -5px;}
.index-catalog .index-catalog-list ul li { width:33.33%; float:left; padding:0 5px;}
.index-catalog .index-catalog-list ul li .photo { background-position:center; background-size:cover; transition: all 0.3s ease 0s;}
.index-catalog .index-catalog-list ul li .photo:hover { opacity:0.8; transition: all 0.3s ease 0s;}
.index-catalog .index-catalog-list ul li .photo a { display:block; width:100%; height:0; padding-bottom:100%;}
.index-catalog .index-catalog-list ul li h3 { margin:10px 0; padding:0; font-size:14px; color:#666; line-height:1.4em; height:2.8em; overflow:hidden;}
.index-catalog .index-catalog-list ul li .price {font-family:BebasNeue; color:#f08c98; font-size:23px; display:block; text-align: right; }

/* i-recommend */ 
.i-recommend { margin:0 -0.5%; }
.i-recommend .i-cota-title { background:#F96; color:#ffffff; font-size:20px; margin:0; padding:10px;}
.i-recommend .i-cota-title span { float:right;}
.i-recommend .i-cota-title02 { background:#fad65c; color:#ffffff; font-size:20px; margin:0; padding:10px;}
.i-recommend .i-cota-title02 span { float:right;}
.i-recommend .i-cota-title03 { background:#b7dde0; color:#ffffff; font-size:20px; margin:0; padding:10px;}
.i-recommend .i-cota-title03 span { float:right;}

.i-recommend .i-cota { float:left; width: 32.33%; margin:30px 0.5% ; border:1px #f4f0f0 solid; padding:10px;}
.i-recommend .i-cota .pro-box { display:none; }
.i-recommend .i-cota .pro-box .photo {  text-align:center; background-position:center; background-size:cover; }
.i-recommend .i-cota .pro-box .photo a { display:block; width:100%; height:0; padding-bottom:100%;}
.i-recommend .i-cota .pro-box h3 { font-size:14px; line-height:1.4em; height:2.8em; overflow:hidden; color:#666; margin:10px 0; padding:0;}
.i-recommend .i-cota .pro-box span { font-family:BebasNeue; color:#f08c98; font-size:36px; text-align:right; display:block;  }

.rec-pro-lis { list-style:none; margin:0 -1%; padding:0;}
.rec-pro-lis li { border:3px #CCC solid; float:left; width:31.33%; height:0; padding-bottom:30%; margin:0 1%; text-align:center; cursor:pointer; opacity:0.8;transition: all 0.3s ease 0s; background-position:center; background-size:cover;}
.rec-pro-lis li img { width:100%; height:auto;}
.rec-pro-lis li:hover, .rec-pro-lis li.active { border:3px #6CC solid; opacity:1; transition: all 0.3s ease 0s;}


/* links */ 
.links { }
.links a { display:block; margin-bottom:10px; padding:5px; background:#ffffff; }
.links a img { width:100%; height:auto;}

.links .index-more { padding-top:50px; margin-bottom:30px; }
.links .index-more .more-box { border-bottom:1px #E53A75 solid; position:relative; height:0; }
.links .index-more .more-box span { background:#ffffff; display:block; width:120px; padding:5px 10px; font-size:15px; color:#E53A75; border:1px #E53A75 solid; position:absolute; left:50%; top:0; margin:-16px 0 0 -60px; text-align:center;}

/*  index-news  */
.i-news { padding:10px  0px 0; }
.i-team { background:#ffe6c9; padding:10px 0 0px 0;}

.news-more { }
.news-more a { background:#2496a0; color:#ffffff; font-size:14px; display: inline-block; padding:10px 50px; }
.news-more a:hover { background:#900;}

.index-one { float:left; width:60%; padding:0 10px;}
.index-one .photo { background:#ffffff; padding:10px; border:1px #c7c7c7 solid; float:left; width:30%; }
.index-one .photo img { width:100%; height:auto;}
.index-one .photo:hover { opacity:0.6;}
.index-one .cont { float:left; width:70%; padding:0 10px 0 20px;}
.index-one .time { color:#d42e2e; font-size:18px; }
.index-one h3 { font-size:18px; color:#000000; margin:0 0 10px 0; padding:0; }
.index-one p { margin:0; padding:10px 0; font-size:16px; color:#686868; line-height:1.6em;}

.index-list { paddingt:0px;}
.index-list ul { list-style:none; margin:0 0 10px 0; padding:0; }
.index-list ul li { padding:5px 0; font-size:16px; }
.index-list ul li .photo { background:#fff; width:180px; float:left; padding:8px; border:1px #ffbad2 solid;}
.index-list ul li .photo a { display:block; width:100%; height:0; padding-bottom:80%; background-position:center; background-repeat:no-repeat; background-size:cover;}
.index-list ul li .photo a:hover { opacity:0.6;}
.index-list ul li span.time { margin-left:200px; display:block; color:#d42e2e; }
.index-list ul li h3 { margin:5px 0; margin-left:200px;}
.index-list ul li h3 a { color:#333; display:block; }
.index-list ul li h3 a:hover { color:#F60;}
.index-list ul li p { margin:0 0 0 200px; padding:0; color:#6B6A6B; font-size:14px; }

.i-news .index-more { padding-top:30px; margin-bottom:0px; }
.i-news .index-more .more-box { border-bottom:1px #E53A75 solid; position:relative; height:0; }
.i-news .index-more .more-box a { background:#ffffff; display:block; width:120px; padding:5px 10px; font-size:15px; color:#E53A75; border:1px #E53A75 solid; position:absolute; left:50%; top:0; margin:-16px 0 0 -60px; text-align:center;}
.i-news .index-more .more-box a:hover { background:#E53A75; color:#ffffff;}

/* i-class  */
.i-class { padding:30px  0px 0; }
.i-class-list { paddingt:0px;}
.i-class-list ul { list-style:none; margin:0 0 10px 0; padding: 0; }
.i-class-list ul li { padding:5px 0; font-size:16px; }
.i-class-list ul li .photo { background:#fff; width:180px; float:left; padding:8px; border:1px #33A08B solid;}
.i-class-list ul li .photo a { display:block; width:100%; height:0; padding-bottom:80%; background-position:center; background-repeat:no-repeat; background-size:cover;}
.i-class-list ul li .photo a:hover { opacity:0.6;}
.i-class-list ul li span.time { margin-left:200px; display:block; color:#33A08B; }
.i-class-list ul li h3 { margin:5px 0; margin-left:200px;}
.i-class-list ul li h3 a { color:#333; display:block; }
.i-class-list ul li h3 a:hover { color:#F60;}
.i-class-list ul li p { margin:0 0 0 200px; padding:0; color:#6B6A6B; font-size:14px; }

.i-class .index-more { padding-top:30px; margin-bottom:0px; }
.i-class .index-more .more-box { border-bottom:1px #33A08B solid; position:relative; height:0; }
.i-class .index-more .more-box a { background:#ffffff; display:block; width:120px; padding:5px 10px; font-size:15px; color:#E53A75; border:1px #33A08B solid; position:absolute; left:50%; top:0; margin:-16px 0 0 -60px; text-align:center;}
.i-class .index-more .more-box a:hover { background:#33A08B; color:#ffffff;}


.i-box { padding: 20px 0 0 0;}
.i-box-3 { padding: 20px 0 0 0; margin:0 -0.5%;}
.i-sup { float:left; width:65%;} 
.team-lis { padding-right:30px;}
.team-lis a { display:block; text-align:center; float:left; width:25%; padding:5px; color:#4a4a4a; font-size:16px;}
.team-lis a img { width:80%; display:block; padding:0 0 10px 0; margin:0 auto;}
.team-lis a:hover { opacity:0.6;}

.i-video { float:left; width:32.7%; margin-left:2.3%; } 
.i-video>div { background:#e3e1d2; padding:20px 10px; text-align:center; }
.i-video>div img { max-width:280px; width:100%; height:auto; }

.i-facebook { padding:0px; }
.i-facebook .index-title { padding:0px 0 0 15px; }
.i-facebook iframe { margin:0 auto; max-width:340px; width:100%;}

.i-heart-code { float:left; width:32.3%; margin:0.5%;} 
.i-heart-code>div { background: url(../images/heart-bg.jpg); background-size:cover; padding:55px 10px; text-align:center; }
.i-heart-code>div img { max-width:280px; width:100%; height:auto; }

.i-QRcode { float:left; width:32.3%; margin:0.5%;} 
.i-QRcode>div { background: url(../images/sky-bg.jpg); background-size:cover; padding:20px 10px; text-align:center; }
.i-QRcode>div img { max-width:200px; width:100%; height:auto; }

/* news */ 
.news-list { paddingt:0px; min-height:300px;}
.news-list ul { list-style:none; margin:0; padding:0 0 10px 0; }
.news-list ul li { padding:20px 0;  border-bottom:1px #CCCCCC dotted; font-size:16px; }
.news-list ul li .photo { width:250px; float:left; padding:5px; background:#F7F7F7; }
.news-list ul li .photo a { display:block; width:100%; padding-bottom:60%; height:0; background-size:cover;}
.news-list ul li .photo a:hover { opacity:0.8;} 
.news-list ul li:last-child { border-bottom:0; }
.news-list ul li .info { margin-left:260px;}
.news-list ul li .info span.time {  color: #999; font-size:12px; display:block; line-height:1.2em; padding:5px 0; }
.news-list ul li .info a { color:#333;}
.news-list ul li .info a:hover { color:#F60;}
.news-list ul li .info p { font-size:12px; color:#999; line-height:1.4em; margin:0; padding:5px 0;}
.news-list ul li .info .more { font-size:12px; text-align:right;}
.news-list ul li .info .more a { color: #333; }
.news-list ul li .info .more a:hover { color: #F30; }

.news-cont { position:relative; z-index:10; padding-bottom:30px;}
.news-title { font-size:30px; margin:0 0 10px 0; padding:0; color:#333; font-weight:normal;}
.news-time { font-size:18px; margin:0 0 10px 0; color:#a8a69c; font-weight:normal; }
.news-content { font-size:14px; line-height:1.6em; padding:20px 0; color:#3a3a3a;}
.news-content img { display:block; width:auto; height:auto; max-width:100%; margin-bottom:10px;}


/* download */ 
.download-list { paddingt:0px; min-height:300px;}
.download-list ul { list-style:none; margin:0; padding:0 0 10px 0; }
.download-list ul li { padding:5px 0;  border-bottom:1px #d42e2e dotted; font-size:16px; }
.download-list ul li:last-child { border-bottom:0; }
.download-list ul li span { background: #6CC; float:left; width:95px; color:#ffffff; font-size:12px; text-align:center; line-height:21px; display:block; border-radius:3px; }
.download-list ul li a { color:#333; display:block;  margin-left:110px; }
.download-list ul li a:hover { color:#F60;}


.contact-info { font-size:14px; line-height:1.6em; color:#333; padding-bottom:20px;}
.font-title { font-size:16px; color:#960;}

/* footer */
footer { background:#f2668e; padding:0px 0 0px 0;}
.foot-link { max-width:1200px; padding:35px 0; margin:0 auto;}
.foot-link ul {  margin:0 auto; list-style:none; padding:0px 0; text-align:center; margin:0 -1.2%;}
.foot-link ul li { display:inline-block; width:15%; margin:0 0.6%;  }
.foot-link ul li a { color:#20747c; border:1px #969a99 solid; display:block; font-size:14px;}
.foot-link ul li a img { width:100%; height:auto;}
.foot-link ul li a:hover { background:#F6F6F6; }
.foot-icon { height:18px; width:auto; padding-right:10px;}

footer .bg { background:url(../images/footer-bg.jpg) #f2668e right no-repeat; background-size:contain; padding:20px 30px; border-top:10px #F45B06 solid; }

.foot-logo { float:left; width:150px; height:auto;}
.foot-info { color:#ffffff; margin:0 0 0 180px; padding:0; font-size:14px; line-height:1.6em; letter-spacing:1.5px; display:flex;}
.foot-info a { color:#ffffff;}
.foot-info a:hover { color:#FF0;}
.foot-info>div {-webkit-flex: 1;  flex: 1; }
.foot-info .info {-webkit-flex: none; flex: none;  width: 350px;}
.foot-link-logo { width: auto; height:40px; float:left; margin:20px 15px 0 0; display:block;}
.foot-link-logo02 { width: auto; height:50px; float:left; margin:15px 15px 0 0; display:block;}

.foot-info span.company-name { font-size:18px; display:block;}
footer .copyright { background:#B22256; color:#ffffff; font-size:14px; padding:10px; text-align:right;}

.sosho-link { margin-top: 5px; }
.sosho-link a { display:inline-block; margin:0 5px 0 0;} 
.sosho-link a img { width:30px; height:auto;}

/* form */
.form { max-width:500px; }
.form .note { font-size:14px; color:#F30; padding:0 0 10px 0;}
.form .form-lis { display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	    -ms-flex-wrap: wrap;
	        flex-wrap: wrap; font-size:14px; line-height:1.2em; padding:3px 0;}
.form .form-lis .title { background:#fffbec; display:block; font-size:14px; color:#333333; width:120px; padding:5px 7px; text-align:right; border-left:3px #ff7c24 solid;}
.form .form-lis .data {  background:#ffffff; display:block; padding:5px 7px; -webkit-flex: 1; flex: 1; font-size:14px; color: #666; border:0;}
.form .form-lis input.data { border:0; width:100%; font-size:14px; font-family:Microsoft JhengHei; }
.form .form-lis textarea.data { border:0; width:100%; font-size:14px; font-family:Microsoft JhengHei;}
.form .form-lis .code {  background:#ffffff; display:block; padding:0; -webkit-flex: 1; flex: 1; font-size:14px; color: #666;}
.form .form-lis .code img.img-code { height:29px; width:auto; float:right;}
.form .form-lis .code input { border:0;  font-size:14px; font-family:Microsoft JhengHei;padding:5px 7px; }

.botton-m { text-align:center; font-size:14px; margin-top:10px; padding:10px 0 20px 0; }
.botton-m a { display:inline-block; color:#ffffff; padding:5px 15px; font-size:14px;}
.botton-m a.left { background:#5dc2cc; margin-right:5px;}
.botton-m a.left:hover { background: #C60;}
.botton-m a.mid { background:#933; margin-right:5px;}
.botton-m a.mid:hover { background:#C03;}
.botton-m a.right { background:#2496a0; }
.botton-m a.right:hover { background:#F03;}

.google-map { padding: 10px; background:#ffffff; height:300px; width:100%;}
 

/* bookmark */
.bookmark { background:#E63A76; text-align:center; font-size:14px; padding:10px 0; color:#ffffff; margin:0px 0 5px 0;  border-radius:0 0 5px 5px;}
.bookmark a { background:#ffffff; display:inline-block; border:0; padding:5px 10px; color: #E63A76; margin:5px; }
.bookmark a:hover { background: #dc1b52; color:#ffffff;}
.bookmark select { background:#ffffff; border:0; padding:5px; color: #81795A; margin:0 2px;}

/* 框架 */

.col-box { margin:0 -0.5%; }
.col-box:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}/* Hides from IE-mac \*/
* html .col-box {height: 1%;}/* End hide from IE-mac */

.content-box img { max-width:100%; width:auto; height:auto;}
.col-1 { width:8.33%; margin:0.5%; float:left;}
.col-2 { width:15.66%; margin:0.5%; float:left;}
.col-3 { width:23.99%; margin:0.5%; float:left;}
.col-4 { width:32.32%; margin:0.5%; float:left;}
.col-5 { width:40.65%; margin:0.5%; float:left;}
.col-6 { width:48.98%; margin:0.5%; float:left;}
.col-7 { width:57.31%; margin:0.5%; float:left;}
.col-8 { width:65.64%; margin:0.5%; float:left;}
.col-9 { width:73.97%; margin:0.5%; float:left;}
.col-10 { width:82.3%; margin:0.5%; float:left;}
.col-11 { width:90.63%; margin:0.5%; float:left;}
.col-12 { width:99%;margin:0.5%;}

/***** 表單預設文字顏色設定 *****/
/* 通用 */
::-webkit-input-placeholder { color:#836363; }
::-moz-placeholder { color:#836363; } /* firefox 19+ */
:-ms-input-placeholder { color:#836363; } /* ie */
input:-moz-placeholder { color:#836363; }

/* webkit专用 */
#field2::-webkit-input-placeholder { color:#836363; }
#field3::-webkit-input-placeholder { color:#836363; background:lightgreen; text-transform:uppercase; }
#field4::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#836363; }

/* mozilla专用 */
#field2::-moz-placeholder { color:#836363; }
#field3::-moz-placeholder { color:#836363; background:lightgreen; text-transform:uppercase; }
#field4::-moz-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#836363; }