@charset "utf-8";
@import "font-awesome.min.css";

body { background:#fff url(../images/bg.jpg) top center repeat-x; width:100%; height:auto; margin:0; padding:0; font-family:"微軟正黑體"; font-size: 14px; line-height: 1.6;}
html { width:100%; height:auto;}

.warpper { background: #fae9fd;  max-width:1140px; margin:0 auto;box-shadow: 0 0 15px 0 rgba(0,0,0,.4);overflow: hidden;}

.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}/* End hide from IE-mac */
a { text-decoration:none;transition: all 0.3s ease 0s;}
img { border:0; vertical-align:middle;max-width: 100%;}
input { vertical-align:middle;}
.slicknav_menu {display:none;}
input.select-box { border:1px #CBCBCB solid; padding:5px 3%; width:20px; height:20px; text-align:center; margin-bottom:5px; }
:focus{outline: 0;}

/*** 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+ */
}


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

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

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


/*** 手機選單、選單 色塊-變色  ***/
.b-color, .slicknav_menu { background:#884ab7; max-width:1140px; margin:0 auto;  } /** 選單顏色 ***/
.slicknav_icon-bar { background-color: #FFF;} /** 手機選單ICON按鈕色 ***/
.slicknav_btn { } /** 手機選單ICON按鈕底色 ***/

.b-color>li:hover, .b-color>li>ul>li>a:hover, .slicknav_nav .slicknav_row:hover, .slicknav_nav a:hover { color: #fff8c8;background: url(../images/menu-icon.png)no-repeat left 5px center; } /** 選單滑入顏色 ***/
.slicknav_nav>li {} 
.border-color { border-left:7px #A0A0A0 solid;} /** 標題顏色 ***/


header { max-width:1140px; margin:0 auto;border-top:4px #5b2f7c solid;background:#f9efff url(../images/top_bg.jpg)no-repeat right bottom;overflow: hidden; height:128px;}
.head-main { max-width:1140px; margin:0 auto; height:128px;padding:0; position:relative; }
.head-tool { position: absolute; bottom:15px; right:15px; text-align:center; overflow:hidden;display: flex;}
.head-tool li {width: 30px; list-style:none; padding:0px; margin:5px;border-radius: 5px;overflow: hidden;}
.head-tool li a {display: block; border-radius: 5px;overflow: hidden;transition: all 0.3s ease 0s;}
.head-tool li a:hover {border-radius: 50px;overflow: hidden;transition: all 0.3s ease 0s;}

.slogan{ position:absolute; right:50%; top: 64px;width: 250px;height: auto; }
.head-main .logo { position:absolute; left:10px; top: 10px; width:245px; height:auto;}
.head-main .logo a {display: block; color:#000000;}
.head-main .logo img { width:100%; height:auto;}
.home{display:none;}

@media screen and (max-width: 640px) {
header { position: inherit;height:120px;border-top:0;padding: 43.38px 0 0 0;}
.head-main { position: inherit;height:120px;}
.head-main .logo { position:fixed; left:5px; top:5px; width:110px; height:auto;z-index: 1000;filter:drop-shadow(0px 0px 2px rgba(255,255,255,.7));}
.head-tool { position:fixed;z-index: 1000; bottom:inherit;top:2px; right:70px; text-align:center; overflow:hidden;display: flex;}
.home{display:block;position:fixed;top:3px;right:115px;z-index: 1000;font-size: 30px;color: #fff;line-height: 1.2;}
.home a{display: block; color: #fff;}
.home a:hover{color: #fae9fd;}
} 

.banner { background: #ffffff;  max-width:1140px; margin:0 auto; position: relative; }
.banner img { vertical-align:middle; width:100%; height:auto; position:absolute;}

h3.login-title { margin:0 0 10px 0; font-family:"Times New Roman"; font-size:24px; line-height:30px; color:#9B9B9B;}
.login-tool { }
.icon-tool { width:40px; height:auto; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}

@keyframes slogan{
0%{ position:absolute; right:-10%; top:-10%;opacity:0;transform:rotate(0deg);}
100%{ position:absolute; right:50%; top: 64px;opacity:1;transform:rotate(360deg);}
}
@-moz-keyframes slogan{
0%{ position:absolute; right:-10%; top:-10%;opacity:0;transform:rotate(0deg);}
100%{ position:absolute; right:50%; top: 64px;opacity:1;transform:rotate(360deg);}
}
@-webkit-keyframes slogan{
0%{ position:absolute; right:-10%; top:-10%;opacity:0;transform:rotate(0deg);}
100%{ position:absolute; right:50%; top: 64px;opacity:1;transform:rotate(360deg);}
}
@-o-keyframes slogan{
0%{ position:absolute; right:-10%; top:-10%;opacity:0;transform:rotate(0deg);}
100%{ position:absolute; right:50%; top: 64px;opacity:1;transform:rotate(360deg);}
}
.slogan{animation:slogan 1.5s ease-out;-moz-animation:slogan 1.5s ease-out;-webkit-animation:slogan 1.5s ease-out;-o-animation:slogan 1.5s ease-out;}

@media screen and (max-width:1055px){
.slogan{ position:absolute; right:30%; top: 64px;width: 250px;height: auto; }
@keyframes slogan{
0%{ position:absolute; right:-10%; top:-10%;opacity:0;transform:rotate(0deg);}
100%{ position:absolute; right:30%; top: 64px;opacity:1;transform:rotate(360deg);}
}
@-moz-keyframes slogan{
0%{ position:absolute; right:-10%; top:-10%;opacity:0;transform:rotate(0deg);}
100%{ position:absolute; right:30%; top: 64px;opacity:1;transform:rotate(360deg);}
}
@-webkit-keyframes slogan{
0%{ position:absolute; right:-10%; top:-10%;opacity:0;transform:rotate(0deg);}
100%{ position:absolute; right:30%; top: 64px;opacity:1;transform:rotate(360deg);}
}
@-o-keyframes slogan{
0%{ position:absolute; right:-10%; top:-10%;opacity:0;transform:rotate(0deg);}
100%{ position:absolute; right:30%; top: 64px;opacity:1;transform:rotate(360deg);}
}
.slogan{animation:slogan 1.5s ease-out;-moz-animation:slogan 1.5s ease-out;-webkit-animation:slogan 1.5s ease-out;-o-animation:slogan 1.5s ease-out;}
}
@media screen and (max-width:765px){
.slogan{ position:absolute; right:15%; top: 64px;width: 250px;height: auto; }
@keyframes slogan{
0%{ position:absolute; right:-10%; top:-10%;opacity:0;transform:rotate(0deg);}
100%{ position:absolute; right:15%; top: 64px;opacity:1;transform:rotate(360deg);}
}
@-moz-keyframes slogan{
0%{ position:absolute; right:-10%; top:-10%;opacity:0;transform:rotate(0deg);}
100%{ position:absolute; right:15%; top: 64px;opacity:1;transform:rotate(360deg);}
}
@-webkit-keyframes slogan{
0%{ position:absolute; right:-10%; top:-10%;opacity:0;transform:rotate(0deg);}
100%{ position:absolute; right:15%; top: 64px;opacity:1;transform:rotate(360deg);}
}
@-o-keyframes slogan{
0%{ position:absolute; right:-10%; top:-10%;opacity:0;transform:rotate(0deg);}
100%{ position:absolute; right:15%; top: 64px;opacity:1;transform:rotate(360deg);}
}
.slogan{animation:slogan 1.5s ease-out;-moz-animation:slogan 1.5s ease-out;-webkit-animation:slogan 1.5s ease-out;-o-animation:slogan 1.5s ease-out;}
}
@media screen and (max-width:640px){
.slogan{ position:absolute; right:inherit;left: 10px; top: 64px;width: 250px;height: auto; }
@keyframes slogan{
0%{ position:absolute; right:inherit;left:-10%; top:-10%;opacity:0;transform:rotate(0deg);}
100%{ position:absolute; right:inherit;left: 10px; top: 64px;opacity:1;transform:rotate(360deg);}
}
@-moz-keyframes slogan{
0%{ position:absolute; right:inherit;left:-10%; top:-10%;opacity:0;transform:rotate(0deg);}
100%{ position:absolute; right:inherit;left: 10px; top: 64px;opacity:1;transform:rotate(360deg);}
}
@-webkit-keyframes slogan{
0%{ position:absolute; right:inherit;left:-10%; top:-10%;opacity:0;transform:rotate(0deg);}
100%{ position:absolute; right:inherit;left: 10px; top: 64px;opacity:1;transform:rotate(360deg);}
}
@-o-keyframes slogan{
0%{ position:absolute; right:inherit;left:-10%; top:-10%;opacity:0;transform:rotate(0deg);}
100%{ position:absolute; right:inherit;left: 10px; top: 64px;opacity:1;transform:rotate(360deg);}
}
.slogan{animation:slogan 1.5s ease-out;-moz-animation:slogan 1.5s ease-out;-webkit-animation:slogan 1.5s ease-out;-o-animation:slogan 1.5s ease-out;}
}


/*****  購物車  *****/
.jump-window-box  { max-width:500px;width: 100%; margin:0 auto; border:1px #a576c7 solid; padding:20px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,f8f6fb+100 */
background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(248,246,251,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(248,246,251,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(248,246,251,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f8f6fb',GradientType=0 ); /* IE6-9 */}

.shopping-car-main{width: 100%;display: block;}
.cart-body { margin:0 auto;padding:30px 0; width: 100%;}
.shopping-car { padding:0 0px;width: 100%;display: block;margin: 0 0 30px 0;} 
th.shopping-car-th { background: #69C; font-size:16px; color:#FFF; text-align:center; line-height:25px;  border-right:1px #fff dotted;} 
.shopping-car td { text-align:center; font-size:12px; line-height:1.5em; padding:5px 10px; border-bottom:1px #CCC dotted; border-right:1px #CCC dotted;}
.shopping-car img.pro-photo { width:90px; height:90px; margin-right:10px; }
.shopping-car .pro-name { font-size:16px; color: #333; text-align:left; }
.shopping-car .price { font-size:16px; color: #333;}

.shopping-car .count { font-size:16px; color:#900;}
.shopping-car .count-portal { padding:10px 0; margin-bottom:20px;}
              .count-price { font-size:24px; font-family:Verdana; color: #900; font-weight:bold;}
.shopping-car .portal { display:block; font-size:16px; color:#900; float:right; text-align:right;}
.shopping-car .freight { display:block; font-size:16px; color:#900; padding-bottom:10px;}
ul.shopping-car-list { display:table; width:100%; list-style:none; margin:0; padding:0;}
ul.shopping-car-list li { display:flex; flex-wrap:wrap; -webkit-align-items:center; align-items:center; /*垂直置中*/ -webkit-justify-content:center; justify-content:center; /*水平置中*/  border-bottom:1px dotted #c4b6cd; padding:15px 5px; }
ul.shopping-car-list li:nth-child(odd) {background: #fcf9ff;}
ul.shopping-car-list li.th { background:#3a2847; color: #fff;  min-height:0px; padding:5px; border:0; }
.th .shop-car-info, .th .shop-car-name, .th .shop-car-price, .th .shop-car-quantity, .th .shop-car-subtotal, .th .shop-car-del { padding:5px 10px; }

.shop-car-info { display:flex;align-items: center; font-size:16px; vertical-align:middle; text-align:left;}
.shop-car-info a.pro-photo { width:60px; height:60px; float:left; margin-right:10px; background-size:cover; background-repeat:no-repeat; background-position:center; }
.shop-car-info .description{ font-weight:bold; font-size:16px;  margin:0px; word-wrap: break-word; color:#333;}
.shop-car-info .description .spec { font-weight:normal; font-size:13px; line-height:18px; color:#666; }
.shop-car-price { display:table-cell; height:100%; font-size:16px; vertical-align:middle; text-align:center;}
.shop-car-quantity { display:table-cell; height:100%;  font-size:16px; vertical-align:middle; text-align:center;}
.shop-car-subtotal{ display:table-cell; height:100%;  font-size:16px; vertical-align:middle; text-align:center;}
.shop-car-del { display:table-cell; height:100%;  font-size:16px; vertical-align:middle; text-align:center;}
.shop-car-del a { background:#d81c1c; color:#fff; padding:5px 10px; }
.shop-car-del a:hover { background:#ff1b1b; /* Old browsers */}
.shopping-car .oproject { font-size:15px; color:#000; display:none; font-weight:bold; }
.shopping-car .original-price { display:block; font-size:12px; text-decoration:line-through; }
.shopping-car .numb { font-size:16px; color:#66f;}
.shopping-list-more{ text-align:center; padding:10px 0 0 0;}

@media screen and (max-width:640px){
.shopping-car .price { text-align:right;}
.shopping-car .count { font-weight:bold; font-size:20px; text-align:right; color:#a70002; float:right; width:auto;}
ul.shopping-car-list li.th { display:none;}
.shopping-car { padding:0px;} 
.shop-car-img { width:100%; height:auto; text-align:center; border-bottom:1px #D3D3D3 dotted; margin-bottom:10px; display:block;}
.shop-car-img img.pro-photo { width:86%; max-width:180px; height:auto; padding:10px; border:1px #CCC solid; margin:10px auto; text-align:center; display:block;}
.shop-car-name { float:none; display:block;  width:100%;  padding-top:0PX;  font-size:15px; text-align:center;} 
.shop-car-price {  width:100%;  padding-top:0PX;  font-size:15px; text-align:center;}
.shop-car-quantity {  width:100%; padding-top:0PX;  font-size:15px; text-align:center;}
.shop-car-subtotal{ width:100%;  padding-top:0PX;  font-size:15px; text-align:center;}
.shopping-car .portal { width:100%; text-align: center;}
.shopping-car .freight { width:100%;  text-align: center;}
.shopping-car .oproject { font-size:15px; color:#000; display: inline; }
ul.shopping-car-list li { display:inline-block; flex-wrap:nowrap; -webkit-align-items:center; align-items:center; /*垂直置中*/ -webkit-justify-content:left; justify-content:left; /*水平置中*/width: 100%; }
.shop-car-del {position: relative;top: 2px; }
.shopping-car .numb { display:inline-block; float:left; width:calc(50% - 51px); }
}

.checkout-box {}
.checkout-box h3 { background: #cca932; border-left:5px #7e6c2d solid; font-size:15px; color:#fff; line-height:40px; margin: 0 0 5px 0; padding-left:20px; font-weight:500;}
.check-box { padding:5px; font-size:15px; color:#000;}
.check-box a { color:#000;}
.check-box a:hover { color:#960; } 
.section-body{width: 100%;}
.checkout-cart-summary{margin:0px ; padding:15px;background: #fff2f2;font-size: 16px;line-height: 1.6;}
.checkout-cart-summary>div{margin-bottom:0px;}
.checkout-cart-summary>div.total{margin-top:10px; padding-top:10px; border-top:1px solid #f1b9b9; font-weight:bold;}
.checkout-cart-summary>div.total .toc{font-family:Verdana; font-weight:bold; color:#900; font-size:large;}
.checkout-cart-summary>div.cart-coupon{color:#e96161;}

.appointment { max-width:600px; margin:0 auto;}
.appointment-title { text-align:center;}

/*****  產品專區  *****/
.pro-store-info { font-size:13px; line-height:1.5em; color:#666; padding:10px 0 10px 35px; border-bottom:1px #CCC dotted; margin-bottom:20px;}
.pro-search-info { font-size:18px; color:#64691F; line-height:1.5em; border-bottom:1px #CCC dotted; margin-bottom:20px; text-align:center; padding-bottom:10px;}
.pro-list {}
.pro-list ul { max-width:1140px; margin:0 auto; padding:0; list-style:none;display: flex;flex-wrap: wrap;}
.pro-list ul li {  width:calc(25% - 10px);margin: 5px; padding:5px; text-align:center; box-shadow:0 0 0 1px #c9b6c9;position: relative;}
.pro-list ul li:hover { background:#fffaff;box-shadow: 4px 4px 0 0 #c9b6c9,0 0 0 1px #c9b6c9;}
.pro-list ul li h4 { font-size:16px; color:#103881; font-weight:bold; padding:5px 0 5px 0; margin:0;text-align: left;  }
.pro-list ul li .pro-content-main {padding: 0 0 100px 0;}
.pro-list ul li .pro-content { font-size:14px; color:#333; padding:5px 0 5px 0; margin:0;text-align: left; }
.pro-list ul li .index-pro-store {color:#666; padding:0; display:block;font-size:14px;text-decoration: line-through;margin: 5px 0;text-align: right;}
.pro-list ul li .index-pro-price { color:#b83400; font-size:16px; padding:0; display:block;font-weight:bold;text-align: right;}
.pro-list ul li .pro-content span{border-radius: 5px;font-size: 14px; color: #fff; background:#103881; width: 80px;padding: 2px 10px;text-align: center;display: table;margin: 5px 0 2px 0;}
.pro-list ul li img{box-shadow: 0 0 0 1px #eee;}

.pro-photo { background:#fff; width:100%; position: relative;display: flex;align-items: center;justify-content: center;}
.pro-photo a { }
.pro-photo img.index-pro-img { width: auto; height: auto; flex-shrink:0;}
@media screen and (max-width: 750px) {
.pro-list ul li {  width:calc(33.3333% - 10px);}
}
@media screen and (max-width: 640px) {
.pro-list ul li {  width:calc(50% - 10px);}
}
@media screen and (max-width: 380px) {
.pro-list ul li {  width:calc(100% - 0px);margin: 5px 0;}
}
a.cart { background:#45780c; padding:5px 8px; color:#fff; font-size:16px; display:block; border:1px #45780c solid;  width:100%; text-align: center;margin: 5px 0 0 0;}
a.cart img { padding-right:0px; vertical-align:middle;}
a.cart:hover { background:#639828; color:#fff;}
.fa-shopping-cart{font-size: 20px;color: #fff;padding: 0 10px 0 0;}
.cart-price{position: absolute;bottom: 0;left: 0;width: 100%;display: block;padding: 5px;}

.pro-detaile { padding-left:30px; padding-right: 20px; }
h3.pro-detaile-title { background: url(../images/pro-detaile-name.jpg) left top no-repeat; font-size: 22px; color:#333; line-height:30px; padding: 5px 0 10px 50px; margin: 0 0 10px 0; font-weight: normal;}
.pro-detaile-box { display: flex;}
.pro-detaile-box>div {  -webkit-flex: 1;  flex: 1;}
.pro-detaile-photo-box { width: 50%;}
.pro-detaile-spe-box { width: 50%; position: relative; padding-bottom: 180px;}

.pro-detaile .pro-photo-box {background:#fff; width:100%; margin:0 0 10px 0; padding:0 20px 0 0;}
.pro-detaile .pro-photo-box img { width:100%; height:auto;}

.pro-specification {  font-size:12px; line-height:1.5em; color:#333; position:relative; margin-bottom:10px;}
.pro-specification p { }
.pro-content { padding:0px 0; font-size:12px; line-height:1.5em; color:#999; clear:both;} 
.pro-content p.spec { margin:0; padding:0; font-size:12px; line-height:1.5em; color:#333;}

.pro-list-date { background: url(../images/time.png) left center no-repeat; font-size:12px; color: #968c69; padding-left: 20px;}

h3.pro-introduce { background: url(../images/detail-title-bg.jpg) right no-repeat;font-weight:normal; border-left:5px #111111 solid; padding:8px 0 8px 20px; font-size:20px; color:#333;}
.pro-qr-code {}
.pro-qr-code img { width:100px; height:auto;}
.cart-info { position: absolute; width: 100%; bottom: 0; }
.cart-info .price { font-size:28px; line-height: 32px; font-weight:bold; color: #F00;  vertical-align:middle; display: inline-block; float: right;}
.cart-info .quantity { font-size:16px; color: #333;  vertical-align:middle; display:block; padding:10px 0; line-height:30px;}
.cart-info .quantity select { line-height:25px;}
.check-out { text-align:center;  vertical-align:middle; display:block;}
.check-out a {display:block; vertical-align:middle;  font-size:13px; min-width:130px; color:#333; padding:5px 10px; margin:10px 0; text-shadow:-1px -1px 0 #fff;-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background: #FFF; border:1px #D4D4D4 solid;}	
.check-out a:hover { background: #D4D4D4;  text-shadow:-1px -1px 0 #A2A2A2; color:#333;}
.check-out a img { vertical-align:middle; margin-right:10px;}
.add-to-cart { padding-top: 10px;}
.add-to-cart a.cart { width: 100px; display: inline-block;}

.size { margin:5px 0; padding:7px 0; border-bottom:1px #DFDFDF solid;  border-top:1px #DFDFDF solid; }
.size ul { list-style:none; margin:0 auto; padding:0;}
.size ul li { background:#AAAAAA; font-size:12px; color:#ffffff;  margin:0 2px; float:left; cursor:pointer; width:25px; line-height:25px; text-align:center;}
.size ul li:hover { background:#000;}
.size ul li.active { background:#000; }
.size ul li.none { background:#E7E7E7; }
.size ul li.title { background: none; font-size:15px; color:#575757; width:auto; }

/**** 產明細圖片特效樣式 ****/
.slider-wrap								{ width: 100%;}	
.stripViewer .panelContainer		        { width: 400% !important;}	
.stripViewer .panelContainer  .panel ul		{ text-align: left; margin: 0 15px 0 30px; width: 100%}
.stripViewer								{ position: relative; overflow: hidden; width:100%; height: auto; }
.stripViewer .panelContainer				{ position: relative; left: 0; top: 0; width:400%; }
.stripViewer .panelContainer .wrapper       { width:100%; display: flex; height: 400px; vertical-align: middle; text-align:center;align-items: center;justify-content: center;}
.stripViewer .panelContainer img            { width: auto; height: auto; max-width:100%; max-height:100%;}
.stripViewer .panelContainer .panel			{ float: left; position: relative;}
.stripNavL, .stripNavR, .stripNav			{ display: none; width:100%; }
.slider-wrap a                              { height:auto;}
.nav-thumb 									{ margin-right: 0; }
#movers-row									{ margin:5px 0 0 0; width:101%; }
#movers-row div								{ width: 25%; float: left; padding-right:1%; }
#movers-row div a.cross-link 				{ float: right; display: flex; width: 100%; height: 120px; vertical-align: middle; text-align:center;align-items: center;justify-content: center; border: 1px #C0C0C0 solid;}
#movers-row div a.cross-link img			{ width: auto; height: auto; max-width:100%; max-height:100%;}
.photo-meta-data							{ background: url(/html/ezcatfiles/myweb62/img/img/60175/transpBlack.png); padding: 10px; height: 30px; 
											  margin-top: -50px; position: relative; z-index: 9999; color: white; }
.photo-meta-data span 						{ font-size: 13px; }
.cross-link									{ display: block; margin-top: 0px; position: relative; padding-top: 0px;}
.active-thumb 								{ background: transparent url(/html/ezcatfiles/myweb62/img/img/60175/icon-uparrowsmallwhite.png) top center no-repeat; }
.panel { width:25%;} /**四張圖 乘 四分之一 **/

/** 關於我們 **/
.about{margin: 0 0 20px 0;}
.about h4{padding:2px 10px;margin:15px 0 5px 0; font-size: 18px; color: #333; font-weight: bold;}
.about ul{list-style:square;padding: 0;margin: 0 0 0 20px; font-size: 12px;display: flex;flex-wrap: wrap;}
.about ul li{font-size: 16px;color: #333;width:calc(25% - 20px); padding: 5px 5px;margin: 0 20px 0 0;}
.about-title001{background: rgb(208, 255, 162);}
.about-title002{background: rgb(185, 255, 255);}
.about-title003{background: rgb(255, 223, 255);;}
@media screen and (max-width:940px){
.about ul li{width:calc(33.3333% - 20px); }
}
@media screen and (max-width:760px){
.about ul li{width:calc(50% - 20px); }
}

/*****  聯絡我們  *****/
.contact-body {margin: 0 0 15px 0;font-size: 16px; color: #333;}
.contact-note { padding:10px 0; font-size:16px; color:#F00;text-align: center;}
.contact-left { }
.contact-left img { width:100%; height:auto; margin-top:0px; }
.cart-btn { margin: 15px 0 ;display: flex;justify-content: flex-end;width: 100%;}

.btn-send { font-size:13px;} 
a.btn-send { background: #481a6b; padding: 5px 20px; text-align:center; font-size:13px; color:#fff;  margin:2px 0 2px 5px;}
a.btn-send:hover { background: #290444;}
a.btn-reset { background:#666666;  padding: 5px 20px; text-align:center; font-size:13px; color:#fff; margin:2px 0 2px 5px;}
a.btn-reset:hover { background:#444444;}

a.btn-send-over { background: #9c9c9b; padding: 5px 20px; text-align:center; font-size:13px; color:#fff; width:100px; margin:2px; }
a.btn-send-over:hover { background: #b9b9b9;}

/*****  FAQ  *****/
.faq {}
.faq>ul { margin:0; padding:0 5px; list-style:none;counter-reset:num;}
.faq>ul>li { margin: 5px 0;}
.faq>ul>li .qa_title { color:#F00; font-weight:normal; display:block;position: relative;}
.faq>ul>li .qa_title>a:before{counter-increment:num; content:counter(num) '. ';}
.faq>ul>li .qa_title:before{content:" » Q";position: absolute;top:5px;left:10px;}
.faq>ul>li .qa_title>a {background:rgb(255, 255, 204);color:#F00; font-size:16px; display:block; padding:5px 10px 5px 40px;border: 1px rgb(255, 255, 204) solid;}
.faq>ul>li .qa_title>a:hover {border: 1px #cece88 solid;box-shadow: 3px 3px 0 0 #cece88;}
.faq>ul>li .qa_content { border-top:3px #cece88 solid; padding:10px; font-size:15px;color:#333;}
.faq>ul>li .qa_content>a { color:#333;display:initial;}
.faq>ul>li .qa_content>a:hover {background: none; text-decoration: underline;}

.opacl { font-size:13px; margin:0 0 10px 0; }
.opacl>a { background:#6f4f86; color:#fff; padding: 5px 10px; margin:0 5px; border-radius: 5px 0px 5px 0px;}
.opacl>a:hover { background:#311446;}
a.close_qa { font-size:13px;} 
#qaContent{}
.accordionPart{}

/** 評價 **/
.evaluation{}
.evaluation ul { margin:0; padding:0 5px; list-style:none;counter-reset:num;}
.evaluation ul li { margin: 5px 0;}
.evaluation ul li .evaluation_title {background:rgb(255, 255, 204);color:#F00; font-weight:normal; display:block;position: relative;padding:5px 160px 5px 5px;}
.evaluation ul li .evaluation_title-time{position: absolute; top:10px;right: 5px;font-size: 13px;}
.evaluation ul li .evaluation_content { border-top:3px #cece88 solid; padding:10px; font-size:15px;color:#333;}
.evaluation ul li .evaluation_content>a { color:#333;display:initial;}
.evaluation ul li .evaluation_content>a:hover {background: none; text-decoration: underline;}
@media screen and (max-width:640px){
.evaluation ul li .evaluation_title {padding:5px ;}
.evaluation ul li .evaluation_title-time{position:inherit; top:inherit;right:inherit;text-align: right;}
}

/*****  最新消息  *****/
.news {}
.news ul { margin:0; padding:0; list-style:none;}
.news ul { list-style:none;}
.news ul li { clear:both; border-bottom:1px #c3b8cc dotted; }
.news ul li a { color:#333;padding:10px 5px; display:flex;}
.news ul li a:hover {}
.news ul li .news-date { width:100px;background: #5e2588;padding: 2px 10px;color: #fff; font-size: 14px;text-align: center; border-radius: 5px;margin: 0 15px 0 0;display:flex;align-items: center;}
.news ul li .news-lis-cont {flex: 1;color: #333; font-size: 16px;display:flex;align-items: center;}
.time {width:100px;background: #5e2588;padding: 2px 10px;color: #fff; font-size: 14px;text-align: center; margin: 0 0 15px 0;}
@media screen and (max-width:500px){
.news ul li a {display:block;}
.news ul li .news-date { width:100px;margin: 0 0 5px 0;}
.news ul li .news-lis-cont {flex: 1;width: 100%;}
}
/** 服務項目 **/
.service{}
.service>ul{list-style:square;padding: 0;margin: 0 0 0 20px;color:#F00;font-size: 14px;display: flex;flex-wrap: wrap;}
.service>ul>li{padding:0;margin: 5px 20px 15px 5px;width: calc(50% - 25px);}
.service .service-title{color:#F00;font-size: 18px;margin: 0;padding:0;}
.service .service-content{color: #333;font-size: 16px;padding: 3px;}
.service .service-content>ol{padding: 0;margin: 0 0 0 25px;list-style: decimal-leading-zero;}
.service .service-content>ol>li{padding:3px;margin: 0;}
.service02{}
.service02>ul{list-style:none;padding: 0;margin:0px;color:#F00;display: flex;flex-wrap: wrap;}
.service02>ul>li{padding:0;margin: 5px;width: calc(33.3333% - 10px);}
.service02>ul>li:first-of-type{border: 1px rgb(208, 255, 162) solid; }
.service02>ul>li:first-of-type .service02-title{background: rgb(208, 255, 162); }
.service02>ul>li:nth-child(2n){border: 1px rgb(185, 255, 255) solid; }
.service02>ul>li:nth-child(2n) .service02-title{background: rgb(185, 255, 255); }
.service02>ul>li:nth-child(3n){border: 1px rgb(255, 223, 255) solid; }
.service02>ul>li:nth-child(3n) .service02-title{background: rgb(255, 223, 255); }
.service02 .service02-title{color:#609;font-size: 18px;margin: 0;padding:5px 10px;font-weight: bold;}
.service02 .service02-content{color: #333;font-size: 16px;padding:5px 10px;}
.service02 .service02-content>ol{padding: 0;margin: 0 0 0 25px;list-style: decimal-leading-zero;}
.service02 .service02-content>ol>li{padding:3px;margin: 0;}
.service03{}
.service-title02{color:#F00;font-size: 18px;padding: 5px ;margin:15px 0 5px 0;font-weight: normal;}
.service-title03{color:#036;font-size: 18px;padding: 5px ;margin:15px 0 5px 0;font-weight: normal;}
.service03>ul{list-style:circle;padding: 0;margin: 0 0 0 40px;color:#333;font-size: 16px;display: flex;flex-wrap: wrap;}
.service03>ul>li{padding:0;margin: 2px 0;width:100%;}

@media screen and (max-width:910px){
.service>ul>li{margin: 5px 0px 5px 0px;width: calc(100% - 0px);}
.service02>ul>li{margin: 5px 0;width: calc(100% - 0px);}
}

/*****  內頁架構  *****/
.content-body-main {padding: 20px;}
.content-body{border-radius: 10px; background: #fff;box-shadow: inset 0 0 0 4px #f3f3f3;padding: 10px;height: 100%;border: 1px #ddd solid;display: flex;flex-wrap: wrap;}

.i-content-body {display: flex;padding: 20px;}
.i-content-body-left {flex:2;width: 100%;margin: 0 20px 0 0;}
.i-content-body-left img{width: 100%;}
.i-content-body-right {flex:1;width: 100%;}

.content-body-left {padding: 0px 10px 300px 0px;flex: 1;position: relative;overflow: hidden;width: 100%;}
.content-body-right {padding:0 0 0 10px;flex:3.5;width: 100%;}

.page-title { font-size:20px; color:#609; padding:5px; margin:10px 0 20px 0; border-bottom:2px #ffd9ec dotted;width: 100%; display: block; }
.page-title:before {content: "";display: inline-block;width: 5px; height: 20px; border: 1px #989898 solid;border-radius: 50px;position: relative;top: 4px;margin: 0 10px 0 0;/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#efefef+0,989898+100 */
background: rgb(239,239,239); /* Old browsers */
background: -moz-linear-gradient(top, rgba(239,239,239,1) 0%, rgba(152,152,152,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(239,239,239,1) 0%,rgba(152,152,152,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(239,239,239,1) 0%,rgba(152,152,152,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#989898',GradientType=0 ); /* IE6-9 */}
.page-main { padding: 0; font-size: 16px; color:#333; }
.page-main>a{color:#333; }
.page-main>a:hover{text-decoration: underline;}

.font_001{font-size:18px; color:#609; }
.font_002{font-size:18px; color:#F00;padding: 0 10px; }
.font_003{color:#F00;}
.content-page{display: flex;align-items: center;}
.content-page-left{flex: 1;margin: 0 15px 0 0;}
.content-page-right{width:210px;}
.contact-page{display: flex;align-items: center;}
.contact-page-right{width:210px;}
.contact-page-right img{display: block;}
.content-page-right02{}
.content-page-right02 ul{list-style: none;padding: 0;margin: 0;display: flex;flex-wrap: wrap;justify-content: center;}
.content-page-right02 ul li{padding: 0;margin:5px;width: calc(33.3333% - 10px);text-align: center;}
.content-page-right02 ul li img{}
.content-page-right02 h4{width: 100%; color: #666;font-size: 13px; text-align: center;padding:0;margin: 0;font-weight: normal;}


.left-menu-title { font-size:13px; color: #fff; padding:35px 10px 5px 10px;margin: 0 10px; text-align: right;font-family: arial;line-height: 1.4;border-bottom: 1px #fff dotted;  background: url(../images/left-title-icon.png) no-repeat left 15px bottom;display: flex;flex-wrap: wrap;align-items: flex-end;justify-content: flex-end;}
.in-left-menu {position: relative; z-index: 1;background: url(../images/left-menu_bg.jpg)repeat-y center center;background-size:100%; border-radius: 10px;margin: 15px 0 0 0;}
.in-left-menu>ul { margin:0 10px 0 40px;padding:10px 0;}
.in-left-menu>ul>li {font-size:16px; color:#fff; padding:0;font-weight: bold;}
.in-left-menu>ul>li>a {color:#fff; display:block; padding:5px 0;}
.in-left-menu>ul>li>a:hover { color: #FFC;}
.in-left-menu>ul>li ul { margin:5px 0 0 40px; padding:0; list-style: square;} 
.in-left-menu>ul>li ul li { border-top:1px #CCC dotted; padding:5px;}
.in-left-menu>ul>li ul li:hover { background: #E8E8E6;} 
.in-left-menu>ul>li ul li a { font-size:13px; color:#666; display:block;}
.in-left-menu>ul>li ul li a:hover { color: #71743D;  }
.in-left-images{position: absolute; bottom: 0;right: 0;width: 100%;z-index: 0;}
.in-left-images img{width: 100%;}
.m_classLink{display:none;}

.in-top-menu {margin: 0 0 10px 0;  }
.in-top-menu>ul { margin:0; padding:0; list-style:none;display: flex;justify-content: flex-end;flex-wrap: wrap; }
.in-top-menu>ul>li  {font-size:15px; color:#fff; padding:0;margin: 5px; min-width: 130px;text-align: center;font-weight: bold;}
.in-top-menu>ul>li>a {display: block; color: #fff;box-shadow: inset 1px 1px 2px 0 #fec906,2px 2px 0 0 rgba(0,0,0,.2);border: 1px #fc5e10 solid;border-radius: 5px;padding: 2px 10px;/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fc5e10+0,fec906+100 */
background: rgb(252,94,16); /* Old browsers */
background: -moz-linear-gradient(top, rgba(252,94,16,1) 0%, rgba(254,201,6,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(252,94,16,1) 0%,rgba(254,201,6,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(252,94,16,1) 0%,rgba(254,201,6,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fc5e10', endColorstr='#fec906',GradientType=0 ); /* IE6-9 */}
.in-top-menu>ul>li>a:hover {/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fec906+0,fc5e10+100 */
background: rgb(254,201,6); /* Old browsers */
background: -moz-linear-gradient(top, rgba(254,201,6,1) 0%, rgba(252,94,16,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(254,201,6,1) 0%,rgba(252,94,16,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(254,201,6,1) 0%,rgba(252,94,16,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fec906', endColorstr='#fc5e10',GradientType=0 ); /* IE6-9 */}

.m_classLink02{display:none;}

@media screen and (max-width:930px){
.i-content-body {display:block;padding: 10px;}
.i-content-body-right {display: flex;flex-wrap: wrap;}
}
@media screen and (max-width:850px){
.content-body-main {padding: 20px 10px;}
.left-menu-title { font-size:12px;background: url(../images/left-title-icon.png) no-repeat left 0 bottom;}
.in-left-menu>ul { margin:0 10px 0 30px;}
}
@media screen and (max-width:750px){
.contact-page{display:block;}
.contact-page-right{width: 100%; margin:10px auto 0 auto ;text-align:center ;display:flex;flex-wrap: wrap; align-items: center;justify-content: center;}
.contact-page-right img{display:inline-block;margin: 5px;}
.content-page-right02 ul li{width: calc(50% - 10px);}
}
@media screen and (max-width:640px){
.content-body-left {padding: 0px 0px 0px 0px;flex: inherit;overflow:inherit;}
.content-body-right {padding:0 ;flex: inherit;}
.in-left-images{display: none;}
.left-menu-title {padding:30px 10px 5px 10px;margin: 0 ;border-bottom: 0;background: url(../images/left-title-icon.png) no-repeat left 5px bottom;}
.in-left-menu {margin: 0;}
	
.content-page{display:block;}
.content-page-left{flex:inherit;margin: 0 ;}
.content-page-right{width:210px;margin: 10px auto 0 auto;}

.classBox{padding:10px;}
ul.classLink{display:none;}
.m_classLink{display:block; position:relative; background-color:#fff; border:1px solid #310f54;}
.m_classLink a.main{display:block; background:none; font-size:15px; font-family:"微軟正黑體", "新細明體", sans-serif; color:#333; position:relative; padding:8px;}
.m_classLink a.main i{display:block; font-size:15px; background:#310f54; width:45px; height:100%; text-align:center; color:#FFF; line-height:40px; position:absolute; right:0; top:0;}
.m_classLink ul{display:none; margin:0; padding:0; list-style:none; width:100%; background:#FFF; border:1px solid #310f54; position:absolute; left:0; top:100%; z-index:999; box-sizing:border-box;}
.m_classLink ul li{margin:0; padding:0;}
.m_classLink ul li a{display:block; padding:8px; border-top:1px solid #310f54; font-family:"微軟正黑體", "新細明體", sans-serif; font-size:15px; color:#222;}
.m_classLink ul li:first-child a{border:none;}
.m_classLink ul li a:hover{background:#f5f1f8;}
.m_classLink ul li ul{display:block; margin:0 10px 10px 10px; padding:0; list-style:none;width: calc(100% - 20px);  background:#FFF; border:1px solid #310f54; position:inherit; left:inherit; top:inherit; z-index:999; box-sizing:border-box;}

.classBox02{padding:0 0 10px 0;}
ul.classLink02{display:none;}
.m_classLink02{display:block; position:relative; background-color:#fff; border:1px solid #fc5e10;}
.m_classLink02 a.main02{display:block; background:none; font-size:15px; font-family:"微軟正黑體", "新細明體", sans-serif; color:#333; position:relative; padding:8px;}
.m_classLink02 a.main02 i{display:block; font-size:15px; background:#fc5e10; width:45px; height:100%; text-align:center; color:#FFF; line-height:40px; position:absolute; right:0; top:0;}
.m_classLink02 ul{display:none; margin:0; padding:0; list-style:none; width:100%; background:#FFF; border:1px solid #fc5e10; position:absolute; left:0; top:100%; z-index:0; box-sizing:border-box;}
.m_classLink02 ul li{margin:0; padding:0;}
.m_classLink02 ul li a{display:block; padding:8px; border-top:1px solid #fc5e10; font-family:"微軟正黑體", "新細明體", sans-serif; font-size:15px; color:#222;}
.m_classLink02 ul li:first-child a{border:none;}
.m_classLink02 ul li a:hover{background:#fff8f5;}
.m_classLink02 ul li ul{display:block; margin:0 10px 10px 10px; padding:0; list-style:none;width: calc(100% - 20px);  background:#FFF; border:1px solid #fc5e10; position:inherit; left:inherit; top:inherit; z-index:999; box-sizing:border-box;}
}
@media screen and (max-width:360px) {
.content-page-right02 ul li{margin: 5px 0;width: calc(100% - 0px);}
}

/*****  內頁BANNER  *****/
.inside-banner { width: 100%;margin: 0 0 20px 0; }
.inside-banner .banner-title {}
.inside-banner .banner-title img {width: 100%;}


/*****  首頁產品  *****/
.index-pro { margin:10px 0 0 0;}
.index-pro h3 {display: table;color: #807760;font-size: 16px;border: 1px #ecd2ff solid;border-bottom:0;border-radius: 5px 5px 0 0;background: #fff;padding:2px 10px;margin: 0 0 -1px 5px;position: relative;}
.index-pro h3:before {content: "";display:inline-block;width: 6px; height: 18px;background: #cbbd98;margin: 0 8px 0 0;position: relative;top:3px;}
.index-pro ul {  margin:0 ; padding:0; list-style:none;display: flex;}
.index-pro ul li {width: calc(50% - 20px); margin:5px 10px; padding:0; text-align:center;}
.index-pro ul li:hover {}
.index-pro ul li h4 { font-size:14px; color:#4e4e4e; font-weight:normal; padding:5px 0 5px 0; margin:0; }
.index-pro ul li img{box-shadow:0 0 0 1px #dbd2b9;border: 4px #e7e0ce solid;border-radius: 10px;}

a.check { background:#ffffff; padding:5px 8px; color:#cecece; font-size:15px; display:block; border:1px #bbbbbb solid;  width:49%; margin-left:1%; float:left;}
a.check img { padding-right:0px; vertical-align:middle;}
a.check:hover { background: #ffffff; color:#5C0001;}

.index-more { max-width:1140px;  margin:50px auto 0 auto; position:relative; }
.index-more a { background:url(../images/index-more-pro.png) #2a2a2a bottom no-repeat; color:#ffffff; width:132px; padding: 10px 0 20px 0; display:block; margin:0 auto; text-align:center; }


/*****  首頁連結  *****/
.index-link {border: 1px #ecd2ff solid;background: #fff url(../images/link_bg.png) no-repeat bottom right;box-shadow:4px 4px 5px 0 rgba(218,218,218,.75);padding: 10px;display: flex;align-items: center;margin: 10px 0 0 0;}
.index-link h3 {margin: 0 5px 0 0;padding: 0;width: 23px;}
.index-link ul { margin:0; padding:0; list-style:none;flex: 1;display: flex;}
.index-link ul li {width: 50%;padding: 5px;border-right: 1px #847b65 solid;display: flex;align-items: center;justify-content: center;}
.index-link ul li:nth-child(2n) {border-right:0;}

/** 首頁影音 **/
.i-video{margin:10px 0 0 0;}
.i-video h3 {display: table;color: #807760;font-size: 16px;border: 1px #ecd2ff solid;border-bottom:0;border-radius: 5px 5px 0 0;background: #fff;padding:2px 10px;margin: 0 0 -1px 5px;position: relative;}
.i-video h3:before {content: "";display:inline-block;width: 6px; height: 18px;background: #cbbd98;margin: 0 8px 0 0;position: relative;top:3px;}
.i-video-youtube {display: block;position: relative;height: 0;overflow: hidden;padding: 0; padding-bottom:70%;}
.i-video-youtube iframe {position: absolute;height: 100%;width: 100%;left: 0;top: 0;}

/*****  首頁最新消息 *****/
.i-news {}
.i-bg { border: 1px #ecd2ff solid;background: #fff;box-shadow:4px 4px 5px 0 rgba(218,218,218,.75);padding: 10px; }
.i-news h3 {display: table;color: #807760;font-size: 16px;border: 1px #ecd2ff solid;border-bottom:0;border-radius: 5px 5px 0 0;background: #fff;padding:2px 10px;margin: 0 0 -1px 5px;position: relative;}
.i-news h3:before {content: "";display:inline-block;width: 6px; height: 18px;background: #cbbd98;margin: 0 8px 0 0;position: relative;top:3px;}
.i-news ul { list-style:square; color:#7b7b7b; padding:0px; margin:0 0 0 20px;}
.i-news ul li { padding:0; font-size:12px;color: #7b7b7b;border-bottom: 1px #d5ceb9 dashed;}
.i-news ul li a { color:#7b7b7b;font-size:14px; display:block; padding:5px;}
.i-news ul li a:hover { color:#333333;}
.more{font-family: arial;font-size: 13px;color: #807760;text-align: right;margin:5px 0 0 0;}
.more a{color: #807760;background: url(../images/more-icon.png)no-repeat right top 4px;padding: 0 15px 0 0;}
.more a:hover{}

@media screen and (max-width:930px){
.index-pro{width: 52.5%;}
.index-link {width: 100%;margin: 10px 0 0 0;}
.i-video{width:calc(47.5% - 10px);margin:10px 0 0 10px;}
.i-news {width: 100%;margin:10px 0 0px 0;}
}
@media screen and (max-width:640px){
.index-pro{width:100%;}
.i-video{width:100%;margin:10px 0 0 0px;}
}


/***  版面欄位  ***/
.main { padding-top:0px;}
.col-100 {float:left; width:100%;}
.col-010 { width:9%; margin-right:1%; float:left;}
.col-015 { width:14%; margin-right:1%; float:left;}
.col-020 { width:19%; margin-right:1%; float:left;}
.col-025 { width:24%; margin-right:1%; float:left;}
.col-030 { width:29%; margin-right:1%; float:left;}
.col-040 { width:39%; margin-right:1%; float:left;}
.col-045 { width:44%; margin-right:1%; float:left;}
.col-050 { width:49%; margin-right:1%; float:left;}
.col-055 { width:54%; margin-right:1%; float:left;}
.col-060 { width:59%; margin-right:1%; float:left;}
.col-065 { width:64%; margin-right:1%; float:left;}
.col-070 { width:69%; margin-right:1%; float:left;}
.col-075 { width:74%; margin-right:1%; float:left;}
.col-080 { width:79%; margin-right:1%; float:left;}
.col-085 { width:84%; margin-right:1%; float:left;}

.cor-010 { width:10%; float:left;}
.cor-015 { width:15%; float:left;}
.cor-020 { width:20%; float:left;}
.cor-025 { width:25%; float:left;}
.cor-030 { width:30%; float:left;}
.cor-035 { width:35%; float:left;}
.cor-040 { width:40%; float:left;}
.cor-045 { width:45%; float:left;}
.cor-050 { width:50%; float:left;}
.cor-055 { width:55%; float:left;}
.cor-060 { width:60%; float:left;}
.cor-065 { width:55%; float:left;}
.cor-070 { width:70%; float:left;}
.cor-075 { width:75%; float:left;}
@media screen and (max-width: 750px) {
.cor-p-015 { width:15%; float:left;}
.cor-p-020 { width:20%; float:left;}
.cor-p-025 { width:25%; float:left;}
.cor-p-030 { width:30%; float:left;}
.cor-p-035 { width:35%; float:left;}
.cor-p-040 { width:40%; float:left;}
.cor-p-045 { width:45%; float:left;}
.cor-p-050 { width:50%; float:left;}
.cor-p-055 { width:55%; float:left;}
.cor-p-060 { width:60%; float:left;}
.cor-p-065 { width:55%; float:left;}
.cor-p-070 { width:70%; float:left;}
.cor-p-075 { width:75%; float:left;}
}
@media screen and (max-width:640px) {
.col-m  { width:100%; margin-right:0%; float:none;}
.col-100 {}
.col-015, .col-020, .col-025, .col-030, .col-035, .col-040, .col-045, .col-050, .col-055, .col-060, .col-065, .col-070, .col-075, .col-080,.col-085 { width:100%; margin-right:0%;}
.cor-015, .cor-020, .cor-025, .cor-030, .cor-035, .cor-040, .cor-045, .cor-050, .cor-055, .cor-060, .cor-065, .cor-070, .cor-075, .cor-080,.cor-085 { width:100%;}
}



/***  選單與下拉  ***/
nav {  }
 .menu { padding:0; list-style:none; position:relative;  margin: 0 auto;display: flex;justify-content: center;border-bottom: 2px #fff solid;box-shadow: 0 1px 0 0 #884ab7,0 1px 50px 0 #af83cb;}
 .menu>li { color:#fff; font-size:18px;text-align:center; position:relative; margin: 0 1px; border-right:1px #fff solid; cursor:pointer;box-shadow: 1px 0 0 0 #4d3e47,-1px 0 0 0 #fff;}
.menu>li:first-child{box-shadow:0px 0 0 0 #4d3e47,0px 0 0 0 #fff;}
.menu>li:last-of-type{border-right:0;box-shadow: 0 0 0 0 #4d3e47,-1px 0 0 0 #fff;}
 .menu>li>a {display: block; color:#fff;padding:2px 34px;text-shadow: 1px 1px 0 #000;}  
 .menu>li>a:hover {color: #fff8c8;background: url(../images/menu-icon.png)no-repeat left 10px center;}
@media screen and (max-width:1150px) {
.menu>li>a {padding:2px 20px;}
.menu>li>a:hover {background: url(../images/menu-icon.png)no-repeat left 5px center;}
}
@media screen and (max-width:930px) {
.menu>li>a {padding:2px 10px;}  
.menu>li>a:hover {background:none;}
}
@media screen and (max-width:765px) {
.menu>li>a {padding:2px 5px;}  
}
@media screen and (max-width:690px) {
.menu>li {font-size:16px;}  
}

@media screen and (max-width: 640px) {
	.slicknav_menu { display:none;}
	.js #menu {	display:none;}
	.js .slicknav_menu {display:block;position: fixed;width: 100%; z-index: 1000;}
} 
/***  step  ***/
.steps { text-align:center; padding:30px 0;width: 100%;display: block; }
.steps .step { display:inline-block; width:240px; max-width:33%; text-align:center; margin:0 -2px;}
.steps .step span { display:block; font-weight:bold;  }
.steps .step span.badge { position:relative; height:30px; line-height:30px; text-align:center; }
.steps .step span.badge .text { position:absolute; left:calc(50% - 15px); font-size:18px; font-family:Arial; color:#fff; background-color:#d9d9d9; display:inline-block; width:30px; height:30px; line-height:30px; border-radius:50%; z-index:1; }
.steps .step.active span.badge .text { color:#fff; background-color:#592b70; }
.steps .step span.badge:before { content:""; position:absolute; background-color:#d9d9d9; width:100%; height:2px; top:50%; left:0; margin-top:-1px; z-index:0; }
.steps .step:first-child .badge::before {width:50%; left:50%;}
.steps .step:last-child .badge::before {width:50%; right:50%;}
@media screen and (max-width:640px){
.step li { font-size: 18px; }
.step li span { height: 38px; padding: 5px 10px; }
}

/***  表單欄位  ***/
.form-box { }
.form-box input, .form-box img { vertical-align:middle;}
.form-style01 { font-size:14px; font-family:"微軟正黑體"; color:#4E4E4E; padding:5px 0 10px 0; line-height:20px; width:100%;}

.opinion {padding: 10px;border-bottom: 1px #ddd dashed;display: flex;flex-wrap: wrap;}
.opinion-left01 { background:none;width: 75px;min-width:75px; padding:5px 10px; font-size:15px; font-family:"微軟正黑體"; color:#333;font-weight:bold;line-height:1.8;}
.opinion-left02 { background:none;width:110px;min-width:110px; padding:5px 10px; font-size:15px; font-family:"微軟正黑體"; color:#333;font-weight:bold;line-height:1.8;}
				  			  
.input-main-style01 {background:none; flex: 1;width:100%; border:none; margin:0; padding:5px 10px; font-size:15px; font-family:"微軟正黑體"; color:#333; line-height:1.8;}
.input-main-style01 label{padding: 0 10px 0 0;}
.input-main-style02 { background:#fafafa; flex: 1;width:100%; border: 1px #333 solid; margin:0; padding:5px 10px; font-size:15px; font-family:"微軟正黑體"; color:#333; line-height:1.8;}
.input-main-style03 { background:#fafafa; flex: 1;width:100%; border: 1px #333 solid;  padding:5px 10px; font-size:15px; font-family:"微軟正黑體"; color:#333; line-height:1.8;margin: 5px 0 0 0;}

.input-main-select { background:#fafafa; flex: 1;width:100%;display: flex;flex-wrap: wrap; border:0; margin:0; padding:0; font-size:15px; font-family:"微軟正黑體"; color:#333; line-height:1.8;}
.input-main-select select { background:#fafafa; width:50%;padding:7.5px 10px;  line-height:1.8; border: 1px #333 solid; font-size:15px; font-family:"微軟正黑體";}
.input-main-select select:nth-child(2) {border-right:0; }

.select-style { background: #8a6e0c; font-size:15px; color:#ffffff; line-height:20px; padding:5px 10px; border: 0; }
.input-style01 { background:#fafafa; border: 1px #333 solid; padding:5px 10px; line-height:1.8; font-size:15px; font-family:"微軟正黑體"; color:#333; width:100%; flex: 1; }
img.code { width:100px; height:39px; margin:0; vertical-align:middle;}
.input-main-style01:focus, .input-main-style02:focus, .input-main-style03:focus, .input-style01:focus, .input-main-select select {outline: 0;}
@media screen and (max-width:750px){
.opinion {padding: 5px 0px;}
}
@media screen and (max-width:640px){
.input-main-style01 label{display: block;padding: 0;}
}
@media screen and (max-width:450px){
.opinion-left02 {width:100%;min-width:inherit;}
}

/* 頁次 */	
.page{ font:13px/40px "微軟正黑體"; color:#333; text-align: center; clear:both; margin-top:20px; }
  .page a { background:#481a6b; color:#fff; padding:5px 15px; }
  .page a:hover { background: #290444; color: #fff;}
  .page br { display:none;}
@media screen and (max-width:640px){
.page{ }
.page br { display: block;}
}


/******  底部資訊  ******/
footer {padding: 10px;background: #884ab7;}
footer .footer { color:#fff; font-size:15px;position: relative;text-align:left;}
footer .footer span {padding: 0 10px;}
.wd { color:#fff; font-size:12px;position: absolute;bottom: 0 ;right:0;} 
.wd a{ color:#fff; } 
.wd a:hover{ color:#e8d7f5;} 
@media screen and (max-width:580px){
footer .footer { text-align: center;}
footer .footer span {display:block;padding: 0;}
footer .footer br {display:none;}
.wd { position:inherit;bottom:inherit;right:inherit;} 
}

/* 購買數量增減模組 */
.qtyInputBox{display:inline-table; vertical-align:middle; height:30px;}
.qtyInputBox .input-group-btn, .qtyInputBox input{display:table-cell; position:relative; float:left; top:0; }
.qtyInputBox button{display:block; width:30px; height:30px; margin:0; padding:0; vertical-align:middle; border:1px solid #ccc;}
.qtyInputBox button i{display:block; width:100%; height:100%; margin:0; padding:0; line-height:30px; background-color:#fff;}
.qtyInputBox button i:hover{background-color:#eee;}
.qtyInputBox input{margin-bottom:0; width:calc(100% - 60px); height:30px; line-height:30px; border:0; border-top:1px solid #ccc; border-bottom:1px solid #ccc; vertical-align:middle; padding:0 5px; text-align:center; }
.qtyInputBox button:focus, input:focus{outline:0;}

/* 購物車狀況模組 */
#sidr-left{font:15px/1.8em Arial, "Microsoft JhengHei"; display:none; position:absolute; position:fixed; top:0; height:100%; z-index:999999; width:260px; overflow-x:none; overflow-y:auto; font-family:"lucida grande",tahoma,verdana,arial,sans-serif; font-size:15px; background:#29043c; color:#fff; box-shadow:0 0 25px 0 #14021d;}
#sidr-left *{font:13px/1.6 Arial, "Microsoft JhengHei"; color:#fff;}
#sidr-left .cart-header{padding:10px;font-size: 20px; text-align: center;color: #fff;font-weight: bold;background: #714c83;position: relative;}
.fa-fw{position: absolute; top: 5px;right:5px;}
#sidr-left .cart-header .fa{font:20px FontAwesome;}

#sidr-left .ng-hide{padding:10px;text-align: center;font-size: 16px; color: #fff;}
#sidr-left .cart-items{padding:15px;}
#sidr-left .cart-item{margin:10px 0;}
#sidr-left .cart-item .product-link img{margin-right:10px;width:60px;height:60px;float:left;}
#sidr-left .cart-item .cart-item-content{float:left; width:125px;}
#sidr-left .cart-item a.remove{color:#ffd8d8; float:right;font-family: "Microsoft JhengHei";}
#sidr-left .cart-item a.remove:hover{color:#ff6e6e;}
#sidr-left .cart-chkt-btn{ width:100%; display:block; padding:15px;}
#sidr-left .cart-chkt-btn button{width:100%; font-size:14px; line-height:1.6; padding:6px 12px; border:1px solid #714c83; text-align: center; background-color:#714c83; border-radius:4px; }
#sidr-left .cart-chkt-btn button:hover{background-color:#803ca2;box-shadow: 0 0 25px 0 inset #29043c;}

.modal-backdrop{position:fixed; top:0; right:0; bottom:0; left:0;}