@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap');
@import url('bootstrap-icons.css');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,400;1,500;1,600;1,700;1,800;1,900&family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap');
@font-face {  font-family: BebasNeue; src: url(../font/BebasNeue.otf);}



body { margin:0; padding:0; padding: 86px 0 0 0; height: 100%; font-family:'Montserrat' , 'Noto Sans TC' , bootstrap-icons ,Microsoft JhengHei; font-weight: 300; position:relative; font-size:16px;}
img { border:0; vertical-align:middle; max-width: 100%;}
input { vertical-align:middle; font-family:'Montserrat' ,'Noto Sans TC',Microsoft JhengHei; border: 0;}
select, textarea {  font-family:'Montserrat' , 'Noto Sans TC' , 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%; padding: 0px 0 50px 0; min-height: calc(100% - 336px); }
.wallpeper.index { padding: 0; }
.main-box { max-width:1200px; margin:0 auto; border-radius: 15px; }
.left-bg { position:absolute; top:0; left:0; width:auto; height:auto; z-index:1; }

/*  header */
header { position:fixed; top: 0; left: 0; width: 100%; z-index: 900; background-color: rgba(255 255 255 / 0.9); box-shadow: 0 0 10px rgba(0 0 0 /0.3);}
header .logo { max-width: 380px; flex: none; padding-top: 15px; transition: all 0.3s ease;}
header .logo a { display:block; transition: all 0.3s ease;}
header .logo img { width:100%; height:auto; transition: all 0.3s ease;}
header nav { flex: 1; }

.top-head { position:relative; display: flex; flex-wrap: wrap; max-width:1200px; margin:0 auto;  transition: all 0.3s ease; }

.login-info { font-size:16px; color:#333333; position:absolute; right:0px; top:10px; text-align:right; display: none;}
.login-info a { color:#000000; padding:0 5px;}
.login-info span.name { color:#000000; padding-right:10px;}
.login-info a img { height:14px; width:auto; padding-right:5px;}


ul.top-tool { display: none; list-style:none; padding:5px 0px; margin:0; position:absolute; right:0; bottom:50px; border:0px #CCCCCC solid; border-radius: 20px;}
ul.top-tool li { display:inline-block; margin: 0 4px;}
ul.top-tool li:first-child { display: none;}
ul.top-tool li a { display:block; color:#333; font-size:14px;}
ul.top-tool li a:hover { color:#F00;}
ul.top-tool li a:before { content: ''; width: 24px; height: 24px; display: block; background-position: center; background-repeat: no-repeat; background-size: cover;}
ul.top-tool li a.icon-member:before { background-image: url(../images/icon-member.svg);}  
ul.top-tool li a.icon-cart:before { background-image: url(../images/icon-cart.svg);}  

ul.top-tool li .search-input { background:#ffffff; border:0; border-radius: 2px 0 0 2px; width:100px; margin:0; font-family:Microsoft JhengHei; font-size:14px; padding:2px 5px 3px 15px; color:#a28f88; height:26px;}
ul.top-tool li .search-btn { background: url(../images/icon-05.png) #ffffff no-repeat; background-size: contain; font-family:Microsoft JhengHei; padding:0px 15px; margin:0; line-height:24px; font-size:14px; border:0; border-radius:0 2px 2px 0; height:26px;}

.language { padding-left:10px; display:inline-table; }
.language a { display:inline-block; background:#000000; color:#ffffff; margin:0 0 0 3px; border-radius: 99em; font-size:12px; text-align:center; width:22px; line-height:22px; }
.language a:hover { background:#960; }


/*  nav  */
nav { flex: 1; }
.menu { padding:0px 0 0 0; list-style:none;  display: flex; margin: 0; overflow: hidden; justify-content: flex-end;}
.menu>li {  color:#333333; font-size:18px; position:relative; }
.menu>li>a { display:block; color:#333333; padding:30px 20px; text-align:center; transition: all 0.3s ease 0s; position: relative;}
.menu>li>a:before { content: ''; display: block; width: 0; height: 0; border-style: solid; border-width: 0px 5px 0 5px; border-color: #271470 transparent transparent transparent; position: absolute; top: 0; left: calc(50% - 3px); transition: all 0.3s ease; opacity: 0;}
.menu>li>a:after { content: ''; display: block; width: 0px; height: 1px; background-color: #271470; position: absolute; bottom: 15px; left: 25%; transition: all 0.3s ease;}
.menu>li.cart>a  { background:none;  padding:0 10px; color:#ffffff; border-right:0;}
.menu>li.cart>a:hover { background:#000000;  }
.menu>li.cart>a img { height:16px; width:auto; padding-right:5px; vertical-align:middle; margin-top:-4px;}
.menu>li>span { display:block; color:#000000; padding:10px 10px; border-bottom:5px #0d0b0c solid; transition: all 0.3s ease 0s; cursor:pointer;}

.menu>li>a:hover, .menu>li:hover>span, .menu>li.active>a, .menu>li.active>span { color: #271470; transition: all 0.3s ease 0s;}
.menu>li>a:hover:before { opacity: 1; border-width: 8px 5px 0 5px;}
.menu>li>a:hover:after { width: 40px; left: calc(50% - 20px);}

.menu li>div { background: rgba(0,0,0,0.9); opacity:0; position:absolute; padding:10px 40px 20px 40px; left:-160px; top:30px; width:500px; transition: all 0.3s ease 0s; visibility: hidden; z-index: 9999;}

.menu li:hover>div {  opacity:1; top:41px; transition: all 0.3s ease 0s; visibility: visible; }
.menu li ul.sub { margin:0; padding:0; list-style:none; width:23%; margin:0 1%; float:left; min-height:120px;}
.menu li ul.sub h3 { color:#ffffff; font-size:16px; margin:10px 0 5px 0; padding-bottom:5px; border-bottom:1px #3A3F0A solid;}
.menu li ul.sub>li a { display:block; color:#d18800; font-size:12px; padding:3px 7px;}
.menu li ul.sub>li a:hover {color:#FF0; }

/* 手機板選單 */
.m-burger { display: none; position: fixed; right: 30px; top: 30px;  width: 56px; height: 36px; z-index: 995; cursor: pointer; transition: all 0.3s ease; }
.m-burger.down { top: 20px; }
.m-burger:before { content: ''; display: block; height: 1px; background-color: #333333; transition: all 0.3s ease; }
.m-burger:after { content: ''; display: block; height: 1px; background-color: #333333; transition: all 0.3s ease; }
.m-burger span { display: block; width: 100%; height: 1px; background-color: #333333; margin: 13px 0; transition: all 0.3s ease; }
.m-burger.active span { width: 0; margin: 0; background-color: #ffffff; }
.m-burger.active:before { transform: rotate(45deg); width: 110%; margin-top: 20px; background-color: #ffffff; transition: all 0.3s ease; }
.m-burger.active:after { transform: rotate(-45deg); width: 110%; margin-top: -2px; background-color: #ffffff; transition: all 0.3s ease; }
.menu>li a.a-m { display:none;}


/* 其他選單 */
.other-menu { background-color: rgba(0, 0, 0, 0.9); position: fixed; top: 0px; right: -360px; max-width: 360px; bottom: 0; z-index: 945; transition: all 0.5s ease; padding: 80px 20px 20px 20px;  font-size: 18px; z-index: 900; }
.other-menu>div.menu-copyright { color: #ececec; font-size: 12px; padding: 10px 0 0 0; border-top: 1px #666666 solid; margin-top: 20px; display: block; text-align: center;}
.other-menu a { display: block;  padding: 5px 0; color: #ececec; text-align: center; }
.other-menu a:before { content: ''; display: block; margin: 15px auto 0 auto; width: 50px; height: 50px;  background-repeat: no-repeat; background-position: center;  background-size: contain; opacity: 0.3; display: none; }

.other-menu a:hover { color: #fffeb0;}
.other-menu a:hover:before { filter: brightness(3);opacity: 1;}
.other-menu.active { right: 0;}
.other-menu .quick-search-box { display: flex; width: 100%; margin: 10px 20px 20px 0;}

.quick-search-box .search-text { flex: 1; border: 0; line-height: 36px; margin: 0 5px 0 0; padding: 0 10px; font-size: 16px; width: calc(100% - 50px);  background-color: transparent; background-color: #f7f6f6; border-radius: 8px; }
.quick-search-box button.search-btn {  flex: none; width: 45px; height: 36px; background-color: transparent; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url(../images/icon-search.svg); border: 0; filter: brightness(5);}



/*  banner  */
.banner { overflow:hidden; position: relative; z-index: 1; overflow: hidden;}
.banner-box { width:100%; overflow:hidden; }
.banner-box-m { display:none; }

.subbanner { margin: 10px 0; }
.subbanner img { width:100% !important; height:auto; }
.subbanner a.mop { display:none; }


/* top-banner */
.top-banner {  max-width:1200px; margin:0 auto 0px auto; display: none; }
.top-banner img { width:100%; height:auto;}
.top-banner .pc { display:block;}
.top-banner .mobile { display:none;}


/* company-history */
.company-history { padding: 0; }
.company-history h4 { text-align: center; font-size: 24px; font-weight: 300; }
.company-history ul { list-style: none; padding: 0; margin: 0; }
.company-history ul li { margin-bottom: 10px; display: flex; flex-wrap: wrap; }
.company-history ul li label { display: flex; align-items: center; justify-content: left; flex: none; width: 100px; padding: 10px; background-color:#00a1e0 ; color: #ffffff; position: relative; font-weight: 500; }
.company-history ul li label:after { content: ''; display: block; position: absolute; top: calc(50% - 1px); right: 0; width: 30px; height: 2px; background-color: #d3d3d3; }
.company-history ul li > div { flex: 1; padding: 10px;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ececec+0,ffffff+100 */
	background: rgb(236,236,236); /* Old browsers */
	background: -moz-linear-gradient(left,  rgba(236,236,236,1) 0%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  rgba(236,236,236,1) 0%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  rgba(236,236,236,1) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ececec', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
	}




/* member   */
.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 { padding: 20px 15px 30px 15px; }


.order-lis { padding: 10px 20px; }
.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 0 10px 0; padding:0;}
.order-lis ul li { display: flex; flex-wrap: wrap; background:#FFF; border-bottom:1px #E4E4E4 solid; font-size:16px;}
.order-lis ul li>div { display: flex; justify-content: center; align-items: center; flex: 1; text-align:center; font-weight: 500;  font-size:16px; padding: 8px 5px ; border-left:1px #f0f0f0 dotted;}
.order-lis ul li>div:first-child { border-left:0; } 
.order-lis ul li.th-lis { text-align:center; background:#357ab9; color:#ffffff; padding:0px; font-size:16px; border:0;}
.order-lis ul li.th-lis .finish {  color:#ffffff; font-size:16px;}
.order-lis ul li .number { text-align:left;}
.order-lis ul li .number a { color: #1684b8; display: block; width: 100%; height: 100%; display: flex; align-items: center; justify-content: left;}
.order-lis ul li .number a:hover { color: #58caff;}
.order-lis ul li .number a i { margin-right: 5px; }
.order-lis ul li .finish { color:#CCC;}
.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;}



.point-portal { text-align:center; padding: 20px 10; color:#d18800; font-size:20px;}
.search-bar { padding-bottom:10px; display: flex; 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: flex; 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: flex; flex-wrap: wrap; padding-left:5px;}

.search-bar .timearea .time-box { -webkit-flex: 1; flex: 1; display: flex;  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:24px; margin:0 0 10px 0; padding:0 20px 20px 20px; color:#000000; font-weight:normal; position: relative;}
.font-title:before  { content: ''; display: block; width: calc( 100% - 30px ); height: 3px; background-color: #f5f5f5; position: absolute; bottom: 0; right: 0; }
.font-title:after { content: ''; display: block; width: 50px; height: 3px; background-color: #0d749c; position: absolute; bottom: 0; left: 20px; }
.font-title i { margin-right: 10px; }
.font-title-02 { font-size:18px; margin:0 0 10px 0; color:#333333; font-weight: 700; }
.font-content { font-size:16px; line-height:1.6em; padding:20px; color:#333333;}
.img-left { padding-right:20px; padding-bottom:10px;}
.img-right { padding-left:20px; padding-bottom:10px;}

.sign-box { background-color: #ffffff; max-width:980px; margin:40px auto; padding:20px;border: 0; border-radius: 12px; box-shadow: 0 0 15px rgba(0 0 0 /0.1); }
.sign-box .left-menu-title { margin: -12px -12px 0 -12px; border-radius: 12px 12px 0 0;}

/*  about  內文  */
.about-logo { max-width: 480px; margin: 50px auto; }
.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-title { background: #000; color:#ffffff; font-size:18px; padding:10px; text-align:center; }
.left-menu { margin:0 0 0 0; padding:0 0 15px 0; list-style:none; }
.left-menu>li { text-align:center; transition: all 0.3s ease 0s; margin: 0px 0; border-top: 1px transparent solid;}
.left-menu>li>a { display:block; padding:10px 0 10px 0; color: #000000; font-size:16px;}
.left-menu>li>span { display:block; padding:8px ; color: #000000; margin:0 10%; font-size:16px;}
.left-menu>li>a:hover, .left-menu>li.active>span { background: #271470; color:#ffffff; }
.left-menu>li:hover, .left-menu>li.active { background:#271470; color:#ffffff; transition: all 0.3s ease 0s; border-top: 1px #0d749c solid;}
.left-menu>li:hover span, .left-menu>li.active>a { color:#ffffff;}
.left-menu>li:last-child a { border-bottom:0;}

.m-left-menu { display:none; }

.left-menu>li>.menu-line { max-width:100px; margin:0px auto; border-bottom:1px #aa9d93 solid;}
.left-menu>li:hover>.menu-line, .left-menu>li.active>.menu-line { border-bottom:1px transparent solid;}
.left-menu .sub { background:#f7f6f6; list-style:none; padding:5px 0 0px 0; }
.left-menu>li.active>.sub { background: #dddddd;}
.left-menu .sub>li { padding:3px 0; margin:0 10%;}
.left-menu .sub>li.active a { color: #D18800; }
.left-menu .sub>li:last-child { padding-bottom:20px; }
.left-menu .sub>li>a, .sub>li>span {font-size:14px; color:#999; display:block;}
.left-menu .sub>li>a:hover { color:#000000;}


/*  page  */

.page-box {  overflow: hidden; }
.page-title { background:#271470; background-image: url(../images/title-bg.png); background-position: center right; background-repeat: no-repeat; background-size: auto 100%;}
.page-title h3 { font-weight:normal; font-size:14px; color:#ffffff; margin:0; padding:45px 40px 45px 50px; display: inline-block;  }
.page-title h3 span { display:block; font-size:36px; color:#a9e2f3; text-align:center; padding-left: 30px; }
.page-box .content-box { min-height:300px; padding: 20px 15px 30px 15px; 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; 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;}


/* faq-item */
.faq-item { margin-bottom:15px; border-radius: 12px; overflow: hidden;}
.faq-item .Q-title { background:#e0e0e0; font-size:18px; text-align: center; font-weight: bold; color:#1a1a1a; padding: 12px 20px;}
.faq-item p { background:#f7f3f1; padding: 15px 20px; font-size:14px; line-height:1.6em; border-top: 1px #a1a1a1 dotted; margin: 0;  }



/* 首頁模組 */
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: flex; 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;}



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


/* message */
.message-box { background-color: #ffffff; max-width:680px; padding: 20px 20px 20px 10px; border-radius: 12px; margin: 20px auto 0 auto; box-shadow: 0 0 20px rgba(0 0 0 /0.1); }
.message-box .table-box { padding-left: 20px; }
.message-box .table-box .content { font-size:16px; line-height:1.6em; padding: 20px 0;}
.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;}


/* cart */
.cart-lis h3.title { background:#a59187; font-weight:normal; margin:0; color:#ffffff; padding:10px 10px 10px 10px; font-size:16px; }
.cart-lis h3.title img { height:18px; width:auto; padding-right:5px; margin-top:-3px;}
.cart-table { font-size:14px;  padding-left: 20px; padding-bottom: 20px; }
.cart-table ul { list-style:none; margin:0; padding:0;}
.cart-table ul li { display: flex;  flex-wrap: wrap; border-bottom:1px #CCC dotted; padding:5px 0;}

.cart-table ul li .photo, 
 .cart-table ul li .name, 
 .cart-table ul li .quantity, 
 .cart-table ul li .price,
 .cart-table ul li .subtotal
 { -webkit-flex: 1; flex: 1; display: flex; flex-wrap: wrap;  align-items: center; justify-content: center; font-weight: 500; }

 .cart-table ul li .del { width:50px; display: flex; flex-wrap: wrap;  align-items: center; justify-content: center; }
 .cart-table ul li .del a { background:#F00; color:#fff; display:block; padding:3px 5px;; border-radius: 4px;  }	
 .cart-table ul li .del a:hover { background:#900;}  
.cart-table ul li .price span,  .cart-table ul li .subtotal span { display:none;}		  
.cart-table ul li.th-lis .photo { height:auto;  }
.cart-table ul li.th-lis { background: #357ab9; color:#ffffff; font-size:16px;}
.cart-table ul li.th-lis>div { padding:7px 5px; border-left:1px #b1e3f0 dotted;}
.cart-table ul li.th-lis>div:first-child { border-left:0; }  
.cart-table ul li .photo { height:150px; text-align:center; padding:10px;}
.cart-table ul li .photo img { max-width:100%; max-height:100%; width:auto; height:auto;}
.cart-table ul li .unit { display:block; width:100%; padding:5px 0 0 0; text-align:center; }
.cart-table ul li .quantity .qtyInputBox { width:100%; }



.cart-table ul li.portal { border-bottom:0; padding-bottom:20px; padding-top: 10px; font-size: 18px; font-weight: 500;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f7f7f7+0,ffffff+92 */
	background: rgb(247,247,247); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(247,247,247,1) 0%, rgba(255,255,255,1) 92%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(247,247,247,1) 0%,rgba(255,255,255,1) 92%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(247,247,247,1) 0%,rgba(255,255,255,1) 92%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
 }
.cart-table ul li .space { -webkit-flex: 3; flex: 3; text-align:right; }
.cart-table ul li .total { -webkit-flex: 1; flex: 1; color:#F60; text-align:center;}
.point-now { text-align:center; color:#d18800;}
.freight { color: #84823E;}
.point-deduction { color: #F00; padding-left:20px;}
.cart-table ul li .delivery { -webkit-flex: 1; flex: 1; text-align:right; }
.delivery-info { font-size:16px; color:#000000; margin-bottom:5px; }
.delivery-member { padding:10px 10px 20px 10px;}
.delivery-member-info { display: flex;flex-wrap: wrap; padding-top:8px;}
.delivery-member-info span {display:block; font-size: 16px; padding-right:5px; width:80px; flex: none; line-height:30px;}
.delivery-member-info input { display:block; border:0;font-size: 16px; background: #ffffff; border:1px #E5E5E5 solid; color:#333; flex: 1; padding:5px 10px; font-family:Microsoft JhengHei; border-radius: 5px; box-shadow: 0 0 5px #d3d3d3 inset; border: 0; }
.delivery-member-info select { display:block; border:0; font-size: 16px; background: #ffffff; border: 0; border-radius: 5px; box-shadow: 0 0 5px #d3d3d3 inset;  color:#333; -webkit-flex: 1;  flex: 1; padding:5px 10px; font-family:Microsoft JhengHei; }
.delivery-member-info .data { background:#fff; flex: 1; font-size: 16px;  line-height:30px; color: #999; }
.delivery-member-info input.checkbox { display:inline-block; vertical-align: middle; margin: -3px 5px 0 0; width: 20px; height: 20px;}



.remittance-info { padding:10px; background: #FEDEDE; color:#930; border:1px #F3A5A5 dashed; line-height:1.6em;}
.status-info { padding:10px; margin-top:10px; color:#333333; border:1px #A99C93 dashed; line-height:1.6em; text-align:center; font-size:18px;}
.left-img-box img { width: 100%; height: auto; border-radius: 0 !important; }

/* product */
.product-lis { margin:0; padding:10px 0 0 20px; list-style:none; display: flex; flex-wrap: wrap;}
.product-lis li { background:#ffffff; flex: none;  width: calc(100%/4 - 20px); margin:10px; transition: all 0.3s ease 0s; padding:10px 10px 40px 10px; position: relative; }
.product-lis li:hover { background:#f7f6f6;transition: all 0.3s ease 0s;border-radius: 8px; overflow: hidden;}
.product-lis li .photo { background-position:center; background-size:cover; border-radius: 8px; }
.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;  font-weight: 500;}
.product-lis li h3 a { color:#333; font-size:14px; display:block; line-height:1.2em; padding: 0;}
.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; display: none;}
.product-lis li .price { position: absolute; bottom: 0; left: 0; width: 100%; font-size:15px; padding:10px; color:#c95c5c;display: flex;justify-content: flex-end; text-align: right; font-weight:500;}
.product-lis li .price a { display: table;color:#c95c5c;position: relative;padding: 0 0 0 12px;}
.product-lis li .price a:before {content: "";display: block;width: 0;height: 0;border-style: solid;border-width: 4px 0 4px 6px;border-color: transparent transparent transparent #c95c5c;position: absolute;top: 7px;left: 0;}
.product-lis li .price a:hover {}
.product-lis li .add-to-order { display: none;}

.add-to-order {color:#ffffff; text-align:center;}
.add-to-order a { background: #a36c45; display:block; font-size:14px; color:#ffffff; padding:5px 15px; margin-bottom:5px; border-radius: 4px;}
.add-to-order a img { height:16px; width:auto; margin-top: -3px;}
.add-to-order a:hover { background:#785c51;}

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

@media screen and (max-width: 1080px) {
    .product-lis li { width: calc(100%/3 - 10px);margin: 5px;}
}
@media screen and (max-width: 640px) {
    .product-lis {  padding:0; }
    .product-lis li { width: calc(100%/2 - 10px);}
}




/* product detaile */
.product-cont {  position:relative; z-index:10; padding: 15px 0px 15px 0px; display: flex; flex-wrap: wrap;}
.detail-title { border-bottom: 3px #dadada solid; font-size:24px; font-weight:normal; color:#000000; margin:0; padding:12px 0 10px 0; line-height:1.4em; position: relative;}
.detail-title:after { content: ''; display: block; width: 40px; height: 3px; background-color: #0d749c; position: absolute; bottom: -3px; left: 0; }
.detail-title img { padding-right:5px;}

.product-box { flex: 1;}

.product-info{flex: 1; margin-left: 20px;}
.product-info .pro-name { font-size: 30px; color: #333333; margin: 0 0 20px 0; line-height: 1.2;}
.product-info .pro-price { font-size: 18px; padding-top: 15px; }
.product-info .pro-price span { font-size: 24px; font-style: italic; color: #df2828; font-weight: 500; }
.product-info .count-box { font-size: 18px; padding-top: 15px; }
.product-info .photo { width: 100%; flex: none; }

.pro-info-lis .list { display: flex; margin-bottom: 10px; font-size: 18px; }
.pro-info-lis .list label { width: 115px; flex: none; padding: 5px; }
.pro-info-lis .list .info { flex: 1; padding: 5px; background-color: #f9f7ff; color: #666666; border-left: 1px #271470 solid; position: relative; padding-left: 20px; }
.pro-info-lis .list .info:before { content: ''; display: inline-block; position: absolute; top: calc(50% - 6px); left: 0; width: 0; height: 0; border-style: solid; border-width: 6.5px 0 6.5px 7px; border-color: transparent transparent transparent #271470;}


.product-info .pro-btn { display: flex; flex-wrap: wrap; padding: 20px 0; margin: 20px 0 0 0;}
.product-info .pro-btn .btn { position: relative; color: #ffffff; font-size: 20px; font-weight: 500; padding: 5px 10px 5px 52px; }
.product-info .pro-btn a.pro-btn-addcart { width: 45%; background-color: #271470; margin: 5px;}
.product-info .pro-btn a.pro-btn-addcart:hover { background-color: #593ad6;}
.product-info .pro-btn a.pro-btn-addcart span.btn-addcart { display: block; width: 52px; height: 52px; background-image: url(../images/index-pro-btn-addcart.svg); background-position: center; background-repeat: no-repeat; background-size: cover; position: absolute; left: 10px; bottom: 0px; }
.product-info .pro-btn a.pro-btn-buy { width: 45%; background-color: #e67b20; margin: 5px;}
.product-info .pro-btn a.pro-btn-buy:hover { background-color: #ffae66;}
.product-info .pro-btn a.pro-btn-buy span.btn-addcart { display: block; width: 52px; height: 52px; background-image: url(../images/index-pro-btn-buy.svg); background-position: center; background-repeat: no-repeat; background-size: cover; position: absolute; left: 10px; bottom: 0px; }
.product-info .pro-btn a.pro-btn-demand { width: 100%; background-color: #271470;}
.product-info .pro-btn a.pro-btn-demand:hover { background-color: #6446D5;}
.product-info .pro-btn a.pro-btn-demand span.btn-addcart { display: block; width: 52px; height: 52px; background-image: url("../images/index-pro-btn-demand.svg"); background-position: center; background-repeat: no-repeat; background-size: cover; position: absolute; left: 10px; bottom: 0px; }
@media screen and (max-width: 1080px) {
    .product-cont {display: block;}
    .product-box { flex:initial;width: 100%;}
    .product-info{flex:initial;width: 100%;margin: 30px 0 0 0;}
}
@media screen and (max-width: 640px) {
    
}

/* 產品優勢 */
.product-point { background-color: #000000; padding: 20px; }
.product-point .product-point-cont { max-width: 1200px; margin: 0 auto; }
.product-point .product-point-cont .title{display: block;
    font-size: 36px;
    color: #fff;
    text-align: center;
    font-weight: 400;
    letter-spacing: 0.2em;
    z-index: 10;
    position: relative;
    margin: 20px 0;
  }
.product-point .product-point-list { display: flex; flex-wrap: wrap; }
.product-point .product-point-list .list { width: 50%; flex: none; padding: 10px; display: flex; flex-wrap: wrap; margin: 10px 0; }
.product-point .product-point-list .list .icon { width: 90px; flex: none; margin-right: 10px; }
.product-point .product-point-list .list .cont { flex: 1; }
.product-point .product-point-list .list .cont h3 { color: #ffb372; font-size: 20px; font-weight: 400; margin: 0 0 5px 0; padding: 0; }
.product-point .product-point-list .list .cont p { font-size: 16px; color: #ffffff; padding: 0; margin: 0; }


/* 產品應用 */
.product-applications { background-image: url(../images/index-product-applocation.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; padding: 60px 0; }
.product-applications .title { width: 200px; margin: 0 auto; display: flex; position: relative; z-index: 5; margin-bottom: 20px;}
.product-applications .title .first { width: auto; flex: none; font-size: 65px; color: #333333; font-weight: 700; line-height: 1em; margin-right: 5px; }
.product-applications .title .last { flex: l; font-size: 30px; color: #333333; font-weight: 500;}
.product-applications .title .last span { font-size: 16px; color: #271470; line-height: 2.3em; }
.product-applications .slogan { max-width: 1100px; margin: 10px auto; position: relative; line-height: 1em; z-index: 1; margin-top: -40px; }
.product-applications .slogan span { font-size: 16px; color: #666666; display: block; width: 100%; position: absolute; bottom: 30%; left: 0; text-align: center; line-height: 1em;}

.product-applications .product-applications-list { text-align: center; max-width: 1520px; margin: 0 auto; }
.product-applications .product-applications-list .list { display: inline-block; width: calc(100% / 4 - 30px); margin: 12px; background-position: center; background-repeat: no-repeat; background-size: cover; border-radius: 99em; overflow: hidden; box-shadow: 0 5px 10px rgba(0 0 0 /0.3); }
.product-applications .product-applications-list .list:before { content: ''; display: block; width: 100%; height: 0; padding-bottom: 100%; }

/* 延長保鮮 */
.product-extended-freshness { background-image: url(../images/index-extended-freshness.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; padding: 100px 0; display: flex; align-items: center; justify-content: center; }
.product-extended-freshness .extended-freshness-box { text-align: center; color: #ffffff; font-size: 20px; }
.product-extended-freshness .extended-freshness-box h3 { font-size: 40px; margin: 0 0 15px 0; padding: 0; }
.product-extended-freshness .extended-freshness-box p { margin: 0; padding: 0; letter-spacing: 0.2em; font-weight: 400; }
.product-extended-freshness .extended-freshness-box p span { font-size: 36px; }

/* 操作步驟 */
.product-steps { background-image: url(../images/index-stage.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; padding: 50px 0 120px 0; }
.product-steps .title { position: relative; margin-bottom: 80px; }
.product-steps .title span.front { display: block; font-size: 36px; color: #333333; text-align: center; font-weight: 400; letter-spacing: 0.2em; z-index: 10; position: relative; }

.product-steps .steps-list { max-width: 1300px; margin: 0 auto; position: relative; }
.product-steps .steps-list .basic-line { background-image: url(../images/index-step-line.png); background-position: top center; background-repeat: no-repeat; background-size: 100% auto; }
.product-steps .steps-list .basic-line:before { content: ''; display: block; width: 100%; height: 0; padding-bottom: 14%; }
.product-steps .steps-list .list { display: inline-block; width: 16.6%; position: absolute; }
.product-steps .steps-list .list label { font-size: 48px; font-weight: 700; color: #271470; width: 62px; margin: 0 auto; text-align: center; display: block; }
.product-steps .steps-list .list label:before { content: 'STEP'; font-size: 20px; font-weight: 500; }
.product-steps .steps-list .list label span.number { display: block; line-height: 0.8em;}
.product-steps .steps-list .list label span.number:before { content: '\F518'; font-size: 20px; display: block; text-align: center; }

.product-steps .steps-list .list p { padding: 10px 15px; font-size: 15px;}

.product-steps .steps-list .list.step01 { top: -7%; left: 0%; }
.product-steps .steps-list .list.step02 { top: -16%; left: 16.6%; }
.product-steps .steps-list .list.step03 { top: -21%; left: 33.2%; }
.product-steps .steps-list .list.step04 { top: -21%; left: 49.8%; }
.product-steps .steps-list .list.step05 { top: -16%; left: 66.4%; }
.product-steps .steps-list .list.step06 { top: -7%; left: 83%; }

/* 適用範圍廣  真空效果好 */
.product-great { background-image: url(../images/index-great.jpg); background-position: top center; background-repeat: no-repeat; background-size: cover; padding: 100px 0; font-size: 32px; font-weight: 500; text-align: center; color: #ffffff; letter-spacing: 0.2em; }
.product-great span { padding: 20px; }

/* 效果展示 */
.product-video { position: relative; }

.product-video .cont-box { max-width: 1100px; margin: 0 auto; display: flex; flex-wrap: wrap; z-index: 10; position: relative;}
.product-video .cont-box .title { width: 75px; flex: none; margin-right: 40px; font-size: 36px; color: #333333; display: flex; justify-content: center; align-items: center; position: relative; font-weight: 500; }
.product-video .cont-box .title span { position: relative; z-index: 10; }
.product-video .cont-box .title .video-text { font-size: 100px; color: #f8ede4; font-weight: 700; letter-spacing: 0.1em; transform: rotate(90deg); position: absolute; top: 40%; left: -210%; z-index: 1; }
.product-video .cont-box .video { flex: 1; display: flex; align-items: center; justify-content: center; }
.product-video .cont-box .video .video-box { position: relative; width: 100%; border: 1px #333333 solid; padding: 10px; background-color: #ffffff; }
.product-video .cont-box .video .video-box:before { content: ''; display: block; width: 100%; height: 0; padding-bottom: 56%; }
.product-video .cont-box .video .video-box iframe { width: calc(100% - 20px); height: calc(100% - 20px);  position: absolute; top: 10px; left: 10px; border: 0; }


/* pro img */
.pro-img-box { position: relative; border-radius: 8px; overflow: hidden;}
.pro-img-box .base-box { height:0; width:100%; padding-bottom:100%;}
.pro-img-box .video-deta { position:absolute; width:100%; height:100%; top:0; left:0;}
.pro-img-box .video-deta .photo { background-position:center; background-size: cover; width:100%; height:100%; }

.small-photo .flex-direction-nav { display: none;}
.small-photo ul li { background-position: center; background-repeat: no-repeat; background-size: cover; border-radius: 4px; cursor: pointer; border: 1px #ececec solid; }
.small-photo ul li:before { content: ''; display: block; width: 100%; height: 0; padding-bottom: 100%;  }



.product-info { font-size:16px;  line-height:1.8em; color:#666; position:relative; height:auto;}
.product-photo {text-align:center; max-width: 480px; margin: 0 auto;}
.product-photo img { max-height:400px; max-width:100%; width:auto; height:auto;}
.product-info .cart {  width:100%; color:#000000; padding:7px 0; text-align:center;}
.product-info .cart a.btn-cart { background: #271470; display:inline-block; border-radius: 4px; vertical-align:middle; line-height:30px; color:#ffffff; font-size:18px; padding: 10px 40px; margin-top: 20px;}
.product-info .cart a.btn-cart:hover { background:#674bd8; } 
.product-info .cart a.btn-cart i { margin-right: 10px; }


.product-info .briefly { color:#000000; font-size:16px; line-height:1.6em; overflow-y: auto; }
.pro-info-title {  padding:10px 0; font-size:20px; font-weight: 300; color:#333333; margin:20px 0; position: relative; border-bottom: 3px #ececec solid; }
.pro-info-title:before { content: ''; display: block; width: 60px; height: 3px; background-color: #0d749c; position: absolute; bottom: -3px; left: 0; }

/* download-list */
.download-list { padding: 10px 10px 0 20px ; }
.download-list .lis { display: flex; flex-wrap: wrap;font-size: 16px; padding: 10px 0; border-bottom: 1px #b4d6e4 dotted; }
.download-list .lis .time { width: 90px; flex: none; display: flex; align-items: center; color: #00a1e0; font-weight: 500;}
.download-list .lis .name { flex: 1; display: flex; align-items: center; }
.download-list .lis a.btn-download {  width: 60px; background-color: #271470; border-radius: 4px; color: #ffffff; font-size: 20px; text-align: center; padding: 8px; }
.download-list .lis a.btn-download:hover { background-color: #5e44c4; }
@media screen and (max-width:640px){
    .download-list { padding: 0 ; }
}

/** 常見問題 **/
.faq{padding: 10px 10px 0 20px;}
.faq>ul{margin:0; padding:0; list-style:none;}
.faq>ul>li{border-bottom: 1px #b4d6e4 dotted;margin: 0;background:#ffffff;}
.faq>ul>li:hover{}
.faq>ul>li .qa_title{ position: relative;color:#222222;}
.faq>ul>li .qa_title:before{content: "";display: block;width: 2px; height: 16px;background: #271470;position: absolute;top: 20px;right: 17px;z-index: 1;}
.faq>ul>li .qa_title:after{content: "";display: block;width: 16px; height: 2px;background: #271470;position: absolute;top: 27px;right: 10px;z-index: 1;}
.faq>ul>li .qa_title a{color:#222222; display:block; padding:15px 40px 15px 60px;position: relative;}
.faq>ul>li .qa_title a:before{content: "Q. ";display: block;position: absolute;top:14px;left: 15px;color: #00a1e0;font-size: 30px;font-weight:500;line-height: 1;}
.faq>ul>li .qa_title a:hover{background:#f3f3f3;}
.qa_title_on{position: relative;background:#f3f3f3;}
.qa_title_on:before{transform: rotateZ(45deg);}
.qa_title_on:after{transform: rotateZ(45deg);}
.faq>ul>li .qa_content{border-top:1px #b4d6e4 dotted; padding:15px; font-size:16px; color:#444444;}
.faq>ul>li .qa_content a{color:#00a1e0; display:inline-block;}
.faq>ul>li .qa_content a:hover{background:none;color: #271470;}
@media screen and (max-width:1024px){
    .faq>ul>li .qa_title{font-size:16px;}
    .faq>ul>li .qa_title a:before{top:12px;}
}
@media screen and (max-width:640px){
    .faq{ padding: 0 ; }
}

/* float-icon */
.float-icon { position: fixed; right: 10px; bottom: 150px;  z-index: 950; width: 48px; font-size: 24px; }
.float-icon a { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 99em; background-color: #2193b6; color: #ffffff; margin-bottom: 8px; position: relative;}
.float-icon a span { position: absolute; right: 0; top: 0; width: 18px; height: 18px; text-align: center; font-size: 12px; background-color: #d32b2b; color: #ffffff; border-radius: 3px; }
.float-icon a:hover { background-color: #2d7fb9; }
.float-icon a.top {  opacity: 0; pointer-events: none;}
.float-icon a.top.show {  opacity: 1; pointer-events: all;}

/*STYLE 1*/
.product-info .briefly-style::-webkit-scrollbar-track
{ 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; box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: #aa9d93;}



.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 10px 0; border-bottom:1px #666666 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:0; 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 #666666 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 #aa9d93 solid; color: #aa9d93; 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: flex; 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%; font-size:16px;  color:#d18800;  display: flex; }
.product-info .price .normal { flex: 1; color:#4999ce; padding: 20px 0; text-align: center; font-size: 24px; font-weight: 500; }
.product-info .price .normal span { font-family: Arial; display:inline-block; }
.product-info .price .special { flex: 1; text-align: right; }
.product-info .price .special span { font-size: 36px; font-family: Arial; font-weight:bold; padding-left:5px; display: inline-block;  }
.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:16px; line-height:1.6em; padding:0 0 20px 0; color:#000000;}
.product-content img { display:block; width:auto; height:auto; max-width:100%; margin-bottom:10px;}


.count { display:inline-block; line-height:30px; padding:0 5px; vertical-align:middle;}
.qtyInputBox { display: flex; flex-wrap: wrap; max-width: 120px;}
.qtyInputBox input { background: none; color:#333333; font-size: 24px; line-height:36px; max-width: calc(100% - 72px); flex: 1; display:block; text-align:center;}
.qtyInputBox span { display:flex; width:36px; flex: none; align-items: center; justify-content: center; cursor:pointer; }
.qtyInputBox span button.fa-plus { background-image: url(../images/count-add.svg);  }
.qtyInputBox span button.fa-minus { background-image: url(../images/count-less.svg);  }
.qtyInputBox span button { background:#ffffff; color:#CCC; width: 30px; height:30px; flex: none; border:1px #CCCCCC solid; cursor:pointer; border-radius: 99em; background-position: center; background-repeat: no-repeat; background-size: 70% auto;  }
.qtyInputBox span button img { display: none;}

.Spec-list { margin: 10px 0; }
.Spec-list > div { padding: 10px; font-size: 16px; border-radius: 4px; border: 1px #dadada solid; background-color: #ffffff; color: #000; display: inline-block; margin: 2px; line-height: 1.2em; font-weight: 500; cursor: pointer; transition: all 0.3s ease; }
.Spec-list > div.active, .Spec-list > div:hover { border: 1px #00a1e0 solid;  background-color: #00a1e0; color: #ffffff; }


/* 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; margin-top:20px;}
.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*/
.index-main {  width:100%; }

/* index-products */
.index-products { background-image: url(../images/index-product-applocation.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; padding: 60px 0; }
.index-products .title { width: 200px; margin: 0 auto; display: flex; position: relative; z-index: 5;}
.index-products .title .first { width: auto; flex: none; font-size: 72px; color: #333333; font-weight: 700; line-height: 1em; margin-right: 5px; }
.index-products .title .last { flex: l; font-size: 28px; color: #333333; font-weight: 500;}
.index-products .title .last span { font-size: 16px; color: #271470; line-height: 1.3em; }
.index-products .slogan { max-width: 1100px; margin: 10px auto; position: relative; line-height: 1em; z-index: 1; margin-top: -20px; }
.index-products .slogan span { font-size: 16px; color: #666666; display: block; width: 100%; position: absolute; bottom: 30%; left: 0; text-align: center; line-height: 1em;}

.index-products .index-products-list { text-align: center; max-width: 1400px; margin: 0 auto; }
.index-products .index-products-list .i-pro-item { display: inline-block; width: calc(100% / 5 - 30px); margin: 10px; overflow: hidden;  position: relative; padding: 10px; color: #333;}

.index-products .index-products-list .i-pro-item img{
    border-radius: 50%; 
    box-shadow: 0 5px 10px rgba(0 0 0 /0.3);
    padding: 10px; 
    transition: .3s;
}

.index-products .index-products-list .i-pro-item:hover img{
    transform: scale(103%);
}

.index-products .index-products-list .i-pro-title{
    font-size: 20px;
    margin-top: 10px;
}


    .swiper {
          width: 100%;
          height: 100%;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      display: flex;
      padding: 20px 100px;
    }

.swiper-button-next:after, .swiper-button-prev:after{
    color: #333;
}


/* index-map */
.index-map { position: relative; padding: 50px 0; }
.index-map:after { content: ''; width: 30%; background-color: #f8ede4; height: 100%; position: absolute; right: 0; top: 0; z-index: 1;} 
.index-map .cont-box { max-width: 1400px; margin: 0 auto; display: flex; flex-wrap: wrap; z-index: 10; position: relative;}
.index-map .cont-box .title { width: 75px; flex: none; margin-right: 40px; font-size: 36px; color: #333333; display: flex; justify-content: center; align-items: center; position: relative; font-weight: 500; }
.index-map .cont-box .title span { position: relative; z-index: 10; }
.index-map .cont-box .title .map-text { font-size: 100px; color: #f8ede4; font-weight: 700; letter-spacing: 0.1em; transform: rotate(90deg); position: absolute; top: 43%; z-index: 1; }
.index-map .cont-box .map { flex: 1; display: flex; align-items: center; justify-content: center; }
.index-map .cont-box .map .map-box { position: relative; width: 100%; border: 1px #333333 solid; padding: 10px; background-color: #ffffff; }
.index-map .cont-box .map .map-box:before { content: ''; display: block; width: 100%; height: 0; padding-bottom: 56%; }
.index-map .cont-box .map .map-box iframe { width: calc(100% - 20px); height: calc(100% - 20px);  position: absolute; top: 10px; left: 10px; border: 0; }



/* index-carousel */
.index-carousel { padding: 50px 0; }

.index-carousel .banner-carousel { max-width: 1200px; margin: 0 auto; }
.index-carousel .banner-carousel .flexslider { margin-bottom: 1px; }


.banner-carousel-pro-img-box { position: relative; overflow: hidden;}
.banner-carousel-pro-img-box .base-box { height:0; width:100%; padding-bottom:33.3%;}
.banner-carousel-pro-img-box .video-deta { position:absolute; width:100%; height:100%; top:0; left:0;}
.banner-carousel-pro-img-box .video-deta .photo { background-position:center; background-size: cover; width:100%; height:100%; }

.banner-carousel-small-photo .flex-direction-nav { display: none;}
.banner-carousel-small-photo ul li { background-position: center; background-repeat: no-repeat; background-size: cover; cursor: pointer; border: 1px #ececec solid; transition: all 0.3s ease; filter: brightness(0.5);}
.banner-carousel-small-photo ul li.flex-active-slide { filter: brightness(1); }
.banner-carousel-small-photo ul li:before { content: ''; display: block; width: 100%; height: 0; padding-bottom: 33.3%;  }

 













/* i-recommend */ 
.i-recommend { margin:0 -10px; display: flex; flex-wrap: wrap;  }
.i-recommend .item { background:#ffffff; width:calc(50% - 20px); margin:0 10px; flex: none; display: flex; border-radius: 12px; overflow: hidden; box-shadow: 0 0 8px #b3b3b3;}
.i-recommend .item .photo { width:55%; flex: none; margin-right: 10px; }
.i-recommend .item .photo a { display:block; width:100%; height:0; padding-bottom: 75%; background-size:cover; background-position:center;}
.i-recommend .item .photo:hover a { opacity:0.8;}
.i-recommend .item .info { flex: 1; color:#333333; height:100%; position:relative; padding: 25px 25px 25px 25px; }
.i-recommend .item .info h3 { margin:0; font-size:16px; line-height:1.2em; margin-bottom:10px;}
.i-recommend .item .info p { margin:0; font-size:14px; line-height:1.2em; color: #666666; }
.i-recommend .item .info a.i-recommend-more { background:url(../images/i-recommend-more.jpg); background-size:cover; position:absolute; bottom:15px; right:15px; display:block; width:24px; height:10px;}


.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;}

.cart-note h3 { background:#000000; color:#ffffff; text-align:center; padding:10px;}
.cart-note p { border:1px #CCCCCC solid; padding:15px; font-size:14px; line-height:1.6em; }


/* i-video */
.i-video { margin:0 -0.5% 0px -0.5%; }
.i-video .item { background:#a36c45; width:32.33%; margin:0 0.5% 10px 0.5%; float:left;}
.i-video .item .i-video-media { width:100%; height:220px; }
.i-video .item h3 { font-size:16px; text-align:center; padding:10px 10px; margin:0;}
.i-video .item h3 a {  color:#faefe9; display:block; height:1.2em; line-height:1.2em; overflow:hidden; }
.i-video .item h3 a:hover { color:#ffffff;}


/* i-community */
.i-community { margin:0 -0.5% 10px -0.5%; height:475px; overflow:hidden; }
.i-community .banner-area { width:32.33%; margin:0 0.5% 10px 0.5%; height:100%; float:left; }
.i-community .banner-area img { width:100%; height:auto; margin-bottom:10px;}
.i-community .search-code { background:url(../images/search-code-m.jpg) #b2b06f no-repeat center bottom; background-size: contain; width:32.33%; margin:0 0.5% 10px 0.5%; height:100%; float:left; padding:15px; color:#ffffff;  }
.i-community .ig { width:32.33%; margin:0 0.5% 10px 0.5%;  height:100%; float:left;} 

.search-code .search-box { padding:5px 0; }
.search-code .search-box .search-input { background:#ffffff; border:0; border-radius: 2px 0 0 2px; width:calc(100% - 30px); margin:0; font-family:Microsoft JhengHei; font-size:14px; padding:2px 5px 3px 15px; color:#a28f88; height:26px;}
.search-code .search-box .search-btn { background: url(../images/icon-05.png) #ffffff no-repeat; background-size: contain; font-family:Microsoft JhengHei; padding:0px 15px; margin:0; line-height:24px; font-size:14px; border:0; border-radius:0 2px 2px 0; height:26px;}

.confirm-box { padding:10px 0 10px 20px; font-size: 16px;}
.confirm-box input { width: 20px; height: 20px; margin-right: 10px; }

.multiple-items { padding:0px 10px; margin:0 auto; width:95%;}
.multiple-items .slick-slide { padding:10px; margin:5px; background:#ffffff; border:1px #CCCCCC solid;  border-radius:5px;}
.multiple-items img { width:100%; height:auto;}
.slick-prev:before, .slick-next:before { color:#a26c46 !important;}


/* news */ 
.news-list { padding:0px; min-height:300px; margin:0 -1%;}
.news-cont { position:relative; z-index:10; padding-bottom:30px;}
.news-cont .cover { margin-bottom:20px;}
.news-title { font-size:24px; margin:0 0 10px 0; padding:0; color:#bd7c7c; font-weight:normal; text-align:center;}
.news-title span { background:url(../images/news-detail-icon.png); background-size:cover; width:20px; height:20px; float:left; display:block; margin:5px 5px 0 0; }
.news-time { font-size:18px; margin:10px 0 15px 0; color: #639; font-weight:normal; padding:6px 15px; }
.news-content { font-size:14px; line-height:1.6em; padding:0 0 20px 0; color:#333333;}
.news-content img { display:block; width:auto; height:auto; max-width:100%; margin-bottom:10px;}


.lis-itim { width:23%; margin:0 1% 2% 1%; float:left;}
.lis-itim:hover {  transition: all 0.3s ease 0s;}
.lis-itim .photo { width:100%; }
.lis-itim .photo a { display:block; width:100%; height:0; padding-bottom:100%; background-position:center; background-size:cover; }
.lis-itim .photo a:hover { opacity:0.7;}
.lis-itim .time { font-size:16px; color:#4899a2; padding: 10px 0; text-align:center; border-bottom:1px #d7d7d7 solid; display:block; }
.lis-itim h4 { margin:0; padding:0; font-weight:500; }
.lis-itim h4 a { color:#535353; font-size:16px; padding:10px 5px; line-height:1.4em; display:block; height:60px; overflow:hidden;}
.lis-itim h4 a:hover { color:#4899a2;}

.news-list { padding-left: 30px; }
.lis-itim02 { display: flex; flex-wrap: wrap; font-size:16px; border-bottom: 1px #b4d6e4 dotted; }
.lis-itim02:hover {  transition: all 0.3s ease 0s;}
.lis-itim02 .time { color:#00a1e0; font-weight: 500; flex: none; width: 100px; display: flex; align-items: center; padding: 10px 0; }
.lis-itim02 a { color:#000000; padding: 0; line-height:1.4em; display:block;  padding: 10px 0;}
.lis-itim02 a:hover { color: #00a1e0; }



/* batch-number-lis */
.batch-number-lis { list-style:none; margin:0; padding:0; }
.batch-number-lis li { border-bottom:1px #CCC dotted;}
.batch-number-lis li a { background: url(../images/batch-number-icon.png) left center no-repeat; display:block; padding:5px 0 5px 30px; color:#333;}
.batch-number-lis li a:hover { color:#66C;}


/* store */
.store-list { padding:0px; min-height:300px; margin:0;}
.store-itim { width:100%; margin:0  0 2% 0; padding-bottom:10px; border-bottom:1px #CCC dotted; }
.store-itim:hover {  transition: all 0.3s ease 0s;}
.store-itim .photo { float:left; width:50%;  }
.store-itim .photo a { display:block; width:100%; height:0; padding-bottom:65.5%; background-position:center; background-size:cover; }
.store-itim .photo a:hover { opacity:0.7;}


.store-itim .info { float:left; margin-left:1%; width:49%;}
.store-itim h4 { margin:0 0 10px 0; padding:0; border-left:3px #000000 solid; }
.store-itim h4 a { color:#000000; font-size:20px; font-weight: bold; padding:0px 20px; line-height:1.4em; display:block;}
.store-itim h4 a:hover { color: #900;}
.store-itim .info p { overflow:auto; margin:0; padding:5px 20px 20px 20px; font-size:14px; line-height:1.6em; color:#333;}

.store-itim .info .right { height:182px; background:#f7f3f1; border:1px #a59187 solid;}
.store-itim:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}/* Hides from IE-mac \*/
* html .store-itim {height: 1%;}/* End hide from IE-mac */

.store-cont .cont h4 { background:#a59187; margin:0; padding:0; color:#ffffff; font-size:16px; padding:5px 10px; line-height:1.4em; }
.store-cont .cont p { background:#f7f3f1; height:150px; overflow:auto; margin:0; padding:20px 10px; font-size:14px; line-height:1.6em; color:#333;}
.store-cont .map { height:300px;}

.index-store { width:32.33%; margin:0 0% 10px 0.5%; float:left; }
.index-store ul { list-style:none; margin:0; padding:0;}
.index-store ul li { float:left; width:49%; margin:0 1% 2% 0; }
.index-store ul li:nth-child(even) { margin:0 0 2% 1%;  }
.index-store ul li a { display:block; background:#000000; padding:1px;}
.index-store ul li img { width:100%; height:auto;}



/*  index-news  */

.i-news { padding:10px 0 10px 0; display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	    -ms-flex-wrap: wrap;
	        flex-wrap: wrap; }

.i-news .title {  text-align:center; width:180px; border-right:1px #cfcfcf solid; }
.i-news .title h3 { font-size:30px; color:#e23030; margin:0; padding:0; font-weight:normal; }
.i-news .title h3 span { font-size:24px; color:#000000; display:block; }
.i-news .news-list { -webkit-flex: 1; flex: 1; padding-left:20px;}
.i-news .news-list .lis {  border-bottom:1px #66CC66 dashed; padding:5px 0;}
.i-news .news-list .lis a { color:#333; display:block; font-size:14px; }
.i-news .news-list .lis a:hover { color:#F60;}
.i-news .news-more { display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	    -ms-flex-wrap: wrap;
	        flex-wrap: wrap; width: 200px; -webkit-flex: none; flex: none; text-align:center; display: -webkit-flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;}

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





/* footer */
footer { background: #333333; padding:0; }

.foot-link { display: flex; flex-wrap: wrap; padding-bottom:20px; color:#ffffff; font-size: 12px; color: #ffffff; vertical-align: middle;}
.foot-link a { color:#ffffff; padding:5px 10px; font-size:14px; flex: none; width: 33.3%; position: relative; padding-left: 12px;}
.foot-link a:before {content: ''; position: absolute; left: 0; top: calc(50% - 3.5px); display: inline-block; width: 0; height: 0; border-style: solid; border-width: 3.5px 0 3.5px 5px; border-color: transparent transparent transparent #ffffff; }
.foot-link a:hover { color:#ffe70c;}

.foot-logo { max-width: 300px; margin-bottom: 20px; }
.foot-icon { height:18px; width:auto; padding-right:10px;}
.foot-info { max-width:1200px; color:#ffffff; margin:0 auto; padding:30px 0; font-size:14px; display: flex; flex-wrap: wrap;}
.foot-info > div { flex: 1; margin-right: 40px;}
.foot-info > div:last-child { margin-right: 0; }
.foot-info .logo-link { max-width: 330px; flex: none; }
.foot-info .social-icon { width: 100%; flex: none; display: flex; flex-wrap: wrap; }
.foot-info .social-icon .line-qr { width: 120px; flex: none; margin-right: 10px; }
.foot-info .social-icon > div { flex: 1; display: flex; align-items: center; justify-content: center; }
.foot-info .social-icon a { display: inline-block; margin: 0 10px; font-size: 40px; color: #ffffff; }

.foot-info .social-icon a.link-fb { background-image: url(../images/icon-fb.svg);}
.foot-info .social-icon a.link-ig { background-image: url(../images/icon-ig.svg);}
.foot-info .social-icon a.link-line { background-image: url(../images/icon-line.svg);}
.foot-info a { color: #ffffff;}
.foot-info a:hover { color:#ffe70c;}

.company-info { padding-top: 10px; }
.company-info h3 { font-size: 18px; font-weight: 500; margin: 0 0 15px 0; padding-bottom: 15px; border-bottom: 1px #ffffff solid; position: relative; }
.company-info h3:before { content: ''; background-color: #ffffff; display: inline-block; width: 60px; height: 3px; position: absolute; bottom: -2px; left: 0; }
.company-info > div { padding: 5px 0; font-size: 16px;}
.company-info > div i { margin-right: 12px; }

.copyright { background-color: #000000; padding: 0px 0 10px 0; font-size:12px; text-align:center; color: #ffffff; padding: 10px; }
.copyright a { color: #ffffff; margin-left: 20px; display: inline-block; }
.copyright a:hover { color: #ffe70c; }

/* contect*/
.contact-info { background:#ffffff; padding:15px 20px 15px 5px; margin-bottom:20px; height:200px;}
.contact-info .left-box { float:left; width:59%; height:100%; padding-left:30%; }
.contact-info .left-box p { font-size:14px; line-height:1.6em; }
.contact-info .right-box { float:right; width:39%; height:100%; }

.business-banner { width:100%; height:auto;}


/* form */
.form .note { font-size:14px;background: #F30;color: #ffffff; padding:5px 15px;margin:25px 0 10px 0;display: table;border-radius: 3px;}
.form .form-lis {  display: flex;  flex-wrap: wrap; font-size:14px; line-height:1.4; margin:0 0 5px 0; overflow: hidden;}

.form .form-lis .title { display:flex; align-items: center; font-size:16px; color:#000000; width:100px; flex: none; padding: 5px 0;}
.form .form-lis .data { background-color: transparent; display:block; padding: 10px 0; flex: 1; font-size:16px; color: #666; border: 0; border-bottom: 1px #b4d6e4 solid;}
.form .form-lis input.data { background-color: transparent;  border:0; flex: 1;  padding: 10px 0; max-width: calc(100% - 100px); font-size:16px; border-bottom: 1px #b4d6e4 solid; }
.form .form-lis textarea.data { border: 0;  padding: 5px 0; width:100%; font-size:16px;  border-bottom: 1px #b4d6e4 solid;}
.form .form-lis .code {   display:flex; padding:0; flex: 1; font-size:16px; color: #666; }
.form .form-lis .code img.img-code { height:29px; width:auto; flex: none;}
.form .form-lis .code input { flex: 1;}

.form .form-lis.check-lis { font-size: 16px; color: #949494; align-items: center; background-color: #f7f7f7; border-radius: 4px; padding: 5px; }
.form .form-lis.check-lis input.checkbox { width: 18px; height: 18px;  display: inline-block; vertical-align: middle; margin-right: 10px; }

.form.member { padding: 15px 20px;}
.form.member .form-lis .title { width: 120px; }
.form.member .form-lis input.data { max-width: calc(100% - 100px); }

.form.delivery-member { padding-left: 20px; }

.contact-form { padding-left: 20px; }


.form.login { padding: 20px 0; max-width: 480px; margin: 0 auto; }

.form.login .form-lis .data,
.form.login .form-lis input.data, 
.form.login .form-lis textarea.data, 
.form.member .form-lis .data,
.form.member .form-lis input.data,
.form.member .form-lis textarea.data { border-bottom: 1px #b4d6e4 solid; }

/** 表單欄位 **/
.form-box input, .form-box img{vertical-align:middle;}
.opinion{display:flex; flex-wrap:wrap; margin:5px 0; border:1px solid #ced4da; border-radius:3px; overflow:hidden;}
.opinion-left01{background:#e9ecef; width:110px; min-width:110px; padding:5px 15px; font-weight:bold; font-size:16px; font-family:"Microsoft JhengHei"; color:#495057; line-height:1.8; display:flex; align-items:center;}
.input-main-style01{flex:1; width:100%; border:0; margin:0; padding:5px 15px; font-size:16px; font-family:"Microsoft JhengHei"; color:#333; line-height:1.8; min-height:37px;}
.input-main-style02{background:#f4f8fb; flex:1; width:100%; border:0; margin:0; padding:5px 15px; font-size:16px; font-family:"Microsoft JhengHei"; color:#333; line-height:1.8; min-height:37px;}
.input-main-style03{background:#f4f8fb; flex:1; width:100%; border:0; margin:5px 0 0 0; padding:5px 15px; font-size:16px; font-family:"Microsoft JhengHei"; color:#333; line-height:1.8; min-height:37px;}
.input-main-select{background:none; flex:1; width:100%; border:0; margin:0; padding:5px; font-size:16px; font-family:"Microsoft JhengHei"; color:#333; line-height:1.8; display:flex; flex-wrap:wrap;}
.input-main-select select{background:#f4f8fb; width:calc(50% - 2.5px); margin-right:5px; padding:5px 15px; line-height:1.8; border:0; font-size:16px; font-family:"Microsoft JhengHei"; color:#333; min-height:37px;}
.input-main-select select:nth-child(2){margin-right:0;}
.select-style{background:#8a6e0c; font-size:16px; color:#ffffff; line-height:20px; padding:5px 10px; border:0;}
.input-style01{background:#f4f8fb; flex:1; width:100%; border:0; margin:0; padding:5px 15px; font-size:16px; font-family:"Microsoft JhengHei"; color:#333; line-height:1.8; min-height:37px;}
input:disabled{background-color:#fff; color:#2d7fb9; cursor:no-drop;}
.btn.openlink{margin:3px 0; padding:0 10px; text-align:center; font-size:16px; line-height:1.5; font-weight:bold; background-color:#2d7fb9; color:#fff; border-radius:5px;}
.btn.openlink:hover{background-color:#ffbe00;}
img.code{width:100px; height:37px; margin:0; vertical-align:middle; display:inline-block;}
.pay-main{padding:0;font-size: 16px; color: #333333;border-radius:0;margin: 15px 0 ;}



.botton-m { text-align:center; font-size:16px; margin-top:10px; padding:10px 0 20px 0; }
.botton-m a { display:inline-block; background:#2193b6; color:#ffffff; border:0; font-size:16px; padding: 10px 15px; margin-right: 10px; }
.botton-m a:hover { background: #30cfff; }
.botton-m a:last-child { margin-right: 0; }




/* login */
.abgne_tab { background:url(../images/cart-bg.jpg); max-width: 550px; margin: 0px auto; }
	ul.tabs { width: 100%; list-style:none; display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	    -ms-flex-wrap: wrap;
	        flex-wrap: wrap; margin:0; padding:0;  }
	ul.tabs li { position: relative; -webkit-flex: 1; flex: 1; text-align:center; font-size:14px;}
	ul.tabs li a {display: block; background: #e1e1e1; padding: 10px 5px; color: #545035; text-decoration: none; border:1px #e1e1e1 solid; border-bottom:0;}
	ul.tabs li a:hover {background: none;  border:1px #CCCCCC solid; border-bottom:0; }
	ul.tabs li.active a { background: none; border:1px #CCCCCC solid; border-bottom:0;}
	ul.tabs li a img { height:24px; width:auto; padding-right:5px;}
	
	div.tab_container {clear: left;width: 100%; border-top: none; border:1px #CCCCCC solid; border-top:0; }
	div.tab_container .tab_content {padding: 20px;}
	div.tab_container .tab_content h2 {margin: 0 0 20px; font-size:18px; text-align:center; font-weight:normal;}

.login-tool { display: flex; padding: 10px 0; font-size: 18px; max-width: 340px; margin: 0 auto; }	
.login-tool a { flex: 1; color: #3e8ecf; }
.login-tool a i { margin-right: 10px; }
.login-tool a.login { display: flex; flex: 1; align-items: center; justify-content: left; }
.login-tool a.forget { display: flex; flex: 1; align-items: center; justify-content: right; }

.login-bg01 {  padding: 20px 40px; background-color: #ffffff; border-radius: 12px; max-width: 680px; margin: 20px auto 0 auto; box-shadow: 0 0 20px rgba(0 0 0 /0.1);}	
.login-bg01 h2 {margin: 0 0 20px; font-size:18px; text-align:center; font-weight:normal;}

.page-box .login-bg { background:url(../images/login-img.png) top left no-repeat #ffffff;}

.btn { padding:20px 0; text-align:center; }
.btn a { background:#2193b6; color:#ffffff; border:0; font-size:16px; padding: 10px 15px; }
.btn a:hover { background:#30cfff; } 
.btn a.btn-login { width: 180px ; display: inline-block; }


/* bookmark */
.bookmark { text-align:center;  padding:15px 0; margin:15px 0 5px 0; border-top:1px #e6e6e6 dotted; }
.bookmark>span { font-size:16px; color:#333333; display:inline-block;}
.bookmark a { background:#000000; font-size:16px; display:inline-block; border:0; padding:5px 15px; color: #ffffff; margin:5px; border-radius: 2px; }
.bookmark a:hover { background: #900;}
.bookmark select { background:#ffffff; border:1px #a59187 solid; padding:5px; color: #81795A; margin:0 2px;}
.bookmark .portal-pages { text-align:center; margin-top:10px;}
.bookmark .portal-pages span { display:inline-block;  color:#000000; font-size:14px; padding-top:10px; border-top:1px #a59187 solid; min-width:150px;  }



/* 框架 */
.col-box { display: flex; flex-wrap: wrap; margin:0 -5px;}
.col-box .content-box { padding-left: 10px;}
.content-box img { max-width:100%; width:auto; height:auto; border-radius: 4px;}

.col-1 { width: calc(9.33% - 10px); margin:0 5px; flex: none;}
.col-2 { width: calc(16.66% - 10px); margin:0 5px; flex: none;}
.col-3 { width: calc(24.99% - 10px); margin:0 5px; flex: none;}
.col-4 { width: calc(33.32% - 10px); margin:0 5px; flex: none;}
.col-5 { width: calc(41.65% - 10px); margin:0 5px; flex: none;}
.col-6 { width: calc(49.98% - 10px); margin:0 5px; flex: none;}
.col-7 { width: calc(58.31% - 10px); margin:0 5px; flex: none;}
.col-8 { width: calc(66.64% - 10px); margin:0 5px; flex: none;}
.col-9 { width: calc(74.97% - 10px); margin:0 5px; flex: none;}
.col-10 { width: calc(83.3% - 10px); margin:0 5px; flex: none;}
.col-11 { width: calc(91.63% - 10px); margin:0 5px; flex: none;}
.col-12 { width: calc(100% - 10px); margin:0 5px; flex: none;}

.left-gray-bg { border-right: 1px #e0e0e0 dotted;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#eff1ff+1,ffffff+100 */
	background: rgb(239,241,255); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(239,241,255,1) 1%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(239,241,255,1) 1%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(239,241,255,1) 1%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eff1ff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}
.max600 { max-width: 600px; margin: 0 auto;}

.table-style { border-collapse: collapse; }
.table-style th { padding: 5px 10px; background-color: #333333; color: #ffffff; font-weight: 400; border: 1px #5a5a5a  solid; }
.table-style td { padding: 5px 10px; background-color: #ffffff; border: 1px #5a5a5a  solid; }



/* flex-body */
.flex-body { display: flex; flex-wrap: wrap; }
.flex-body .flex-1 { flex: 1; }
.flex-body .flex-50 { width: 50%; flex: none;  }
.content-left { padding: 10px 20px; padding-left: 0; text-align: justify; margin-bottom: 40px; }
.content-right { padding: 10px 20px; padding-right: 0; text-align: justify; margin-bottom: 40px; }
.content-left img, .content-right img { max-width: 100%; height: auto; box-shadow: 0 10px 8px rgba(0 0 0 /0.1);  }

/* icon */
.icon { display: inline-block; width: 24px; height: 24px; vertical-align: middle; margin: -3px 5px 0 0; background-position: center; background-repeat: no-repeat; background-size: contain;  }
.icon.icon-order { background-image: url(../images/icon-order.svg); filter: brightness(5); } 
.icon.icon-member { background-image: url(../images/icon-member.svg); filter: brightness(5);  } 
.icon.icon-note { background-image: url(../images/icon-note.svg); }


/* 需求單 */
.demand-list { display: flex; flex-wrap: wrap; border-bottom: 1px #d8d8d8 solid; padding-bottom: 10px; margin-bottom: 10px; }
.demand-list .pro-name {  flex: 1; display: flex; align-items: center; margin: 10px 0; }
.demand-list .count-box { width: 200px; flex: none; display: flex; align-items: center; justify-content: right; margin: 10px 0;}
.demand-list .Spec-box { width: 100%; flex: none; }
.demand-list .Spec-box .Spec-list { margin: 0;}
.demand-list .demand-potal { width: 100%; flex: none;text-align: right; font-size: 24px; color: #00a1e0; }


.Spec-box { display: flex; }
.Spec-box label { width: 60px; flex: none; display: flex; align-items: center;}
.Spec-box .Spec-list { flex: 1; }

/* pop */
.pop { position: fixed; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.9); top: 0; right: 0; z-index: 996; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center;  justify-content: center; transition: all 0.5s ease; opacity: 0; visibility: hidden; }
.pop.open {  opacity: 1; visibility: visible; transition: all 0.5s ease; }
.pop-body { background-color: #ffffff; border-radius: 4px; max-width: 640px;  width: 80%; padding: 20px; overflow: hidden; position: relative; max-height: calc(100vh - 30px);overflow-y: auto; }

.pop-cont { overflow-y: auto; height: auto; max-height: calc(100% - 50px); padding-right: 10px;}
.pop-body h2 { text-align: center;}
.pop-body h3 { color: #727071; text-align: center;}
.pop .btn-close {display: block; font-size: 40px; width: 40px; height: 40px; line-height: 40px; color: #F30; position: absolute; top: 20px; right: 20px; cursor: pointer; transition: all 0.3s ease; z-index: 1;}
.pop .btn-close:before {  content: '\F659'; font-family: bootstrap-icons !important; }
.pop .btn-close:hover { opacity: 0.8; transform: rotate(90deg); }

/***** 表單預設文字顏色設定 *****/

/* 通用 */
::-webkit-input-placeholder { color:#c7c0c0; }
::-moz-placeholder { color:#c7c0c0; } /* firefox 19+ */
:-ms-input-placeholder { color:#c7c0c0; } /* ie */
input:-moz-placeholder { color:#c7c0c0; }


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


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


/** 購物車模組 **/
#sidr-left{font-size: 14px; display:none; position:absolute; position:fixed; top:0; height:100%; z-index:999999; width:260px; overflow-y:auto;  background:#222222; color:#fff;box-shadow:inset 0 0 15px 0 rgba(0,0,0,.2);}
#sidr-left *{font-size: 14px;  color:#fff;}
#sidr-left .cart-header{padding:11px 15px;font-size: 18px;  text-align:center; position:relative;background: #357ab9;}
#sidr-left .cart-header .cross{position:absolute; top:5px; right:10px;}
#sidr-left .cart-header .fa{font:20px FontAwesome;}
#sidr-left .ng-hide{padding:15px; text-align:center;}
#sidr-left .cart-items{padding:15px;}
#sidr-left .cart-item{margin:10px 0; display:flex;}
#sidr-left .cart-item .product-link{width:45px;}
#sidr-left .cart-item .product-link img{width:100%;}
#sidr-left .cart-item .cart-item-content{flex:1; margin:0 10px;}
#sidr-left .cart-item .cart-item-content .title{font-size:13px;}
#sidr-left .cart-item .cart-item-content .ng-scope{font-size:13px;}
#sidr-left .cart-item .cart-item-content .price-details{font-size:13px;}
#sidr-left .cart-item .cart-item-content .ng-binding{font-size:13px;}
#sidr-left .cart-item a.remove{width:30px; font-size:14px; color:#ddd; font-family:Arial, "Microsoft JhengHei";}
#sidr-left .cart-item a.remove:hover{color:#e67b20;}
#sidr-left .cart-chkt-btn{width:100%; display:block; padding:15px;}
#sidr-left .cart-chkt-btn button{width:100%; font-size:15px; padding:10px 15px;  text-align:center; background-color:#ffffff; border-radius:3px;border: 0;color: #222222;}
#sidr-left .cart-chkt-btn button:hover{background-color:#357ab9;color: #ffffff;}
.modal-backdrop{position:fixed; top:0; right:0; bottom:0; left:0;}