@charset "utf-8";

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



body { margin:0; padding:0; font-family:Microsoft JhengHei; position:relative; font-size:16px;}

body.main-body { background:#29aba0; }

img { border:0; vertical-align:middle;}

input { vertical-align:middle; font-family:Microsoft JhengHei;}

select {  font-family:Microsoft JhengHei;}



/*  漸變效果 */

a {transition: all 0.3s ease 0s; text-decoration:none; color:#333;}

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

* html .clearfix {height: 1%;}/* End hide from IE-mac */

/*  padding and border no width  */

*{

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */

 -moz-box-sizing: border-box;   /* Firefox, other Gecko */

 box-sizing: border-box;        /* Opera/IE 8+ */

}



.wallpeper { width:100%; overflow:hidden; }

.main-box { background: #ffffff; background-size: contain; padding-bottom:100px;  }

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

.i-main-box { padding:0 0 0 10px;}

.slicknav_menu { display: none;}

/*  header */

header { background:#819dd3; background-size: cover;  position:relative; }

header .top-bg { background:url(../images/top-bg-img.jpg) center no-repeat;  background-size: cover; display: flex; flex-wrap: wrap; position: relative;}

header .logo { padding:15px; width:130px; flex: none;}

header .logo img { width:100px; height: auto;}



header .top-company-name { flex: 1; padding:15px 5px 0 5px; color:#ffffff; font-size:32px; font-weight: bold; display: flex; align-items: center; flex-wrap: wrap; align-content: center;}

header .top-company-name span { display:block; font-size:14px; color: #fff; width: 100%;}



header:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}/* Hides from IE-mac \*/

* html header {height: 1%;}/* End hide from IE-mac */



header .top-bg nav { width: calc(100% - 20px); flex: none; }



.login-info { font-size:14px; color:#cccccc; float:right; line-height:28px; padding:15px 10px;}

.login-info a { color:#cccccc; padding:0 5px;}

.login-info span.name { color:#cccccc; padding-right:10px;}

.login-info a img { height:14px; width:auto; padding-right:5px;}



.sub-top-bg img { margin-bottom:20px; width:100%; height:auto; max-width:100%;  }



ul.top-tool { list-style:none; padding:5px 10px; margin:0; position:absolute; right:0; top:15px;  border:0px #CCCCCC solid; border-radius: 20px; display: flex; align-items: center;}

ul.top-tool li { display:inline-block; margin:  0 5px;}

ul.top-tool li.member-id { color: #ffffff; font-size: 14px;}

ul.top-tool li a { display:block; padding:5px; color:#333; font-weight: bold; font-size:14px;}

ul.top-tool li.icon a {  padding:5px 0;}

ul.top-tool li a:hover { color:#F00;}

ul.top-tool li img { height:30px; width:auto; transition: all 0.3s ease;}

ul.top-tool li:hover img { opacity:0.6;}

ul.top-tool li .search-input { background:#EFEFEF; border:0; border-radius: 2px 0 0 2px; width:100px; margin:0; font-family:Microsoft JhengHei; font-size:14px; padding:2px 5px 3px 15px;}

ul.top-tool li .search-btn { font-family:Microsoft JhengHei; background:#2496a0; color:#ffffff; padding:0px 15px; margin:0; line-height:24px; font-size:14px; border:0; border-radius:0 2px 2px 0;}

ul.top-tool li.cart { position: relative;}

ul.top-tool li.cart a {  display: block; width: 30px; height: 30px; background-image: url(../images/icon-cart.svg); background-position: center; background-repeat: no-repeat; background-size: cover;}

ul.top-tool li.cart > span { width: 20px; height: 20px; text-align: center; line-height: 20px; background-color: #d14200; color: #ffffff; font-size: 12px; position: absolute; right: -5px; top: -5px; border-radius: 99em;}



/*  nav  */

nav { background:rgba(255, 255, 255, 0.9); padding:0px; margin:10px; border-radius: 5px; box-shadow: 0px 0px 10px #31685c; display:block; clear:both;}

.menu { margin:0 auto; padding:0; list-style:none; display: flex; max-width: 1200px;}

.menu>li { color:#333333; font-size:16px; position:relative; flex: 1;} 

.menu>li>a { display:block; color:#333333; padding:8px 15px; text-align:center; letter-spacing:3px;}

.menu>li>a:hover, .menu>li.active a { background:#66ccc0; color:#ffffff;}

.menu>li.cart>a  { background:none;  padding:0 10px; color:#08575e; border-right:0;}

.menu>li.cart>a:hover { color:#333333;}

.menu>li.cart>a img { height:16px; width:auto; padding-right:5px; vertical-align:middle; margin-top:-4px;}

.menu li>span {display:block; display:block; color:#333333; padding:8px 15px; text-align:center; letter-spacing:3px; cursor: pointer;}

.menu li:hover>span { background:#66ccc0; color: #ffffff;}

.menu li:last-child>span { border-right:0; }



.menu li>ul.sub { background: rgba(102, 204, 192, 0.9); opacity:0; position:absolute; left:0px; top:50px; width:100%; transition: all 0.3s ease 0s; visibility: hidden; z-index: 9999; border-top: 1px #ffffff solid;}

.menu li:hover>ul.sub {  opacity:1; top:37px; transition: all 0.3s ease 0s; visibility: visible; }

.menu li>ul.sub { margin:0; padding:0; list-style:none;}

.menu li>ul.sub>li a { display:block; color:#333; font-size:16px; padding:7px; color: #ffffff; text-shadow: 1px 1px 0 rgba(99, 99, 99, 0.3); text-align: center;}

.menu li>ul.sub>li:last-child a {border-bottom:0;}

.menu li>ul.sub>li a:hover {color:#333333;  background: rgba(78, 131, 124, 0.9); color: #ffffff; }









.Related-link { padding:0 5px;}

.Related-link h3.title { text-align:center; margin:15px 0 10px 0;  color:#66c3cc;}

.Related-link h3.title img { height:16px; width:auto; vertical-align:middle; display:inline-block;}

.Related-link #myDiv { height:225px; overflow:hidden; }

.Related-link a { display:block; margin-bottom:5px; padding:10px; font-size:16px; background:#66ccc0; color:#ffffff; border-radius: 4px;}

.Related-link a:hover { background:#0c848f;}







/* index-area  */

.index-area { display: flex; flex-wrap: wrap; margin-top: 20px;}

.index-area .flex-1 { flex: 1; margin-right: 10px;}

.index-area .w-250 { width: 250px; flex: none;}



/*  banner  */

.banner {}



/* member   */

h3.left-title { text-align:center; font-size:24px; margin:0; padding:5px 0 10px 0; font-weight:600;} 

.left-menu02 { }

.left-menu02 ul { margin:0; padding:0; list-style:none;}

.left-menu02 ul li { margin: 0 0 0px 0; border-bottom: 1px #CCCCCC dotted; font-size:14px;}

.left-menu02 ul li a { font-size: 14px; color: #999; display: block; padding: 7px 0 7px 30px;}

.left-menu02 ul li a:hover { background:#999999; color:#ffffff;}



.member-cont { background:#FFF;}

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

.member-cont .cont-box { padding:10px 0;}



.member-form {  }

.member-form .note { font-size:14px; color:#F30; padding:0 0 10px 0;}

.member-form .form-lis { display: -webkit-box;

	display: -webkit-flex;

	display: -ms-flexbox;

	display: flex;

	-webkit-flex-wrap: wrap;

	    -ms-flex-wrap: wrap;

	        flex-wrap: wrap; font-size:14px; line-height:1.2em; padding:6px 0; border-bottom:1px #CCCCCC dotted;}

.member-form .form-lis .title { background:#ffffff; display:block; font-size:14px; color:#666666; width:120px; padding:5px 7px; text-align:right; border-left:3px #2fc6ad solid;}

.member-form .form-lis .data { background:#ffffff; display:block; padding:5px 7px; -webkit-flex: 1; flex: 1; font-size:14px; color: #333;}

.member-form .form-lis input.data { border:1px #CCCCCC solid; width:100%; font-size:14px; font-family:Microsoft JhengHei; border-radius: 4px; }

.member-form .form-lis textarea.data { border:0; width:100%; font-size:14px; font-family:Microsoft JhengHei; }



.order-lis { }

.order-lis .data-info { background:url(../images/cart-bg.jpg); font-size:16px; text-align:center; color:#C63; padding:10px; border:1px #CCCCCC dashed; margin-bottom:10px;}

.order-lis ul { list-style:none; margin:0; padding:0;}

.order-lis ul li { display: -webkit-box;

	display: -webkit-flex;

	display: -ms-flexbox;

	display: flex;

	-webkit-flex-wrap: wrap;

	    -ms-flex-wrap: wrap;

	        flex-wrap: wrap; background:#FFF; border-bottom:1px #E4E4E4 solid; font-size:14px;}

.order-lis ul li>div { -webkit-flex: 1; flex: 1; text-align:center;  font-size:14px; padding: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:#2fc6ad; color:#ffffff; padding:0px; font-size:14px;}

.order-lis ul li.th-lis .finish {  color:#ffffff; font-size:14px;}

.order-lis ul li .number { text-align:left;}

.order-lis ul li .number a { color: #86883C;}

.order-lis ul li .number a:hover { color: #F00;}

.order-lis ul li .number a img { height:16px; width:auto; padding-right:5px; opacity:0.5;}

.order-lis ul li .finish { color:#CCC;}

.order-lis ul li .time span { display: none;  color: #08575e; }

.order-lis ul li .unpaid { color: #F63;}

.order-lis ul li .preparing { color:#693;}

.order-lis ul li .shipped { color: #999; }

.order-lis ul li .shipped a { color: #F93;}



.search-bar { padding-bottom:10px;  display: -webkit-box;

	display: -webkit-flex;

	display: -ms-flexbox;

	display: flex;

	-webkit-flex-wrap: wrap;

	    -ms-flex-wrap: wrap;

	        flex-wrap: wrap; margin-bottom:10px; border-bottom:1px #CCCCCC solid;}

.search-bar input.text { padding:3px 7px; font-family:Microsoft JhengHei;}

.search-bar .kyeword { display: -webkit-box;

	display: -webkit-flex;

	display: -ms-flexbox;

	display: flex;

	-webkit-flex-wrap: wrap;

	    -ms-flex-wrap: wrap;

	        flex-wrap: wrap; width:50%; padding-right:5px;-webkit-flex: none; flex: none;}

.search-bar .kyeword input.text { -webkit-flex: 1; flex: 1;}

.search-bar .kyeword input.search-btn { width:100px; border:0; background:#333; color:#ffffff;  font-size:14px; padding:3px 7px; font-family:Microsoft JhengHei; cursor:pointer;}

.search-bar .kyeword input.search-btn:hover { background:#930;}



.search-bar .timearea { -webkit-flex: 1; flex: 1; display: -webkit-box;

	display: -webkit-flex;

	display: -ms-flexbox;

	display: flex;

	-webkit-flex-wrap: wrap;

	    -ms-flex-wrap: wrap;

	        flex-wrap: wrap; padding-left:5px;}

.search-bar .timearea .time-box { -webkit-flex: 1; flex: 1; display: -webkit-box;

	display: -webkit-flex;

	display: -ms-flexbox;

	display: flex;

	-webkit-flex-wrap: wrap;

	    -ms-flex-wrap: wrap;

	        flex-wrap: wrap;}

.search-bar .timearea .time-box span { display:block; width:10%; text-align:center;-webkit-flex: none; flex: none;}

.search-bar .timearea .time-box input { font-size:14px; font-family:Microsoft JhengHei; display:block;-webkit-flex: 1; flex: 1; width:80%; }

.search-bar .timearea input.search-btn { width:100px; border:0; background:#333; color:#ffffff;  font-size:14px; padding:3px 7px; font-family:Microsoft JhengHei; cursor:pointer;-webkit-flex: none;

          flex: none; display:block;}

.search-bar .timearea input.search-btn:hover { background:#930;}



/*  content  內文  */

.font-title { font-size:30px; margin:0 0 10px 0; padding:0; color:#333; font-weight:normal;}

.font-title-02 { font-size:18px; margin:30px 0 10px 0; color: #000; font-weight:normal; padding-left:10px; border-left:3px #333333 solid; }

.font-content { font-size:14px; line-height:1.6em; padding:10px 0 20px 0; color: #666;}

.font-content ol { margin:0; padding-left:20px;}

.img-left { padding-right:20px; padding-bottom:10px;}

.img-right { padding-left:20px; padding-bottom:10px;}





/*  about  內文  */

.about-pro { padding:0 20px;}

.about-pro img { max-height:150px; height:auto; width:auto;}

.pro-title { color:#808239; font-size:16px; margin:0; padding:20px 0 10px 0;}





/*  left-menu  */

.left-menu-title { background:#386ba4; padding:7px 10px; text-align:center; color:#ffffff;}

.left-menu { margin:10px 0 0 0; padding:0 0 15px 0; list-style:none; }

.left-menu>li { border-bottom: 1px #ebebeb solid;  }

.left-menu>li:hover { border-bottom: 1px #66ccc0 solid;}

.left-menu>li>a, .left-menu>li>span { background:url(../images/left-menu-icon.png)  5px 10px no-repeat; display:block; padding:8px 0px 8px 30px ; color: #333333; font-size:16px;}

.left-menu>li>span>a { display:block; color:#ffffff;}

.left-menu>li>span>a:hover { color: #CCC;}

.left-menu>li>a:hover { background:url(../images/left-menu-icon.png) 5px 10px no-repeat #66ccc0; color:#ffffff; }

.left-menu>li.active a { background:url(../images/left-menu-icon.png) 5px 10px no-repeat #4ab3a6; color:#ffffff; }

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

.left-menu>li>.sub {}



.sub { list-style:none; margin:0 0 10px 0px; padding:0;}

.sub>li { border-bottom:1px #CCCCCC dotted;}

.sub>li>a, .sub>li>span {font-size:14px; color:#999; display:block; padding:7px 0 7px 30px;}

.sub>li>a:hover { background:#CCC; color:#ffffff;}



/*  page  */

.page-box {  overflow:hidden; padding:5px; max-width: 1200px; margin: 0 auto;}

.page-title { text-align:center; border-bottom:4px #29aba0 solid; }

.page-title h3 { font-weight:normal; font-size:24px; margin:0; padding:10px 0px 10px 0px; display: inline-block; }

.page-title h3 span {  font-size:14px; color:#999; text-align:center; padding:5px 0 0 0; margin-top:5px;}

.page-title h3 span::before { content:"/"; padding-right:5px;}

.page-box .content-box { background:#ffffff; min-height:300px; padding: 0px; position:relative; z-index:10;}

.page-box .page-cornor { position:relative; z-index:1; } 

.page-box .page-cornor .left { position:absolute; bottom:0px; left:0px;}

.page-box .page-cornor .right { position:absolute; bottom:0px; right:0px;}



.sub-title { font-size:18px; font-weight:normal; color:#333333; margin:0; padding:10px 0px; line-height:32px; vertical-align:middle;}

.sub-title img { padding-right:5px; vertical-align:middle;}



.max-1200 { max-width: 1200px; margin: 0 auto;}



/* activity */

.activity ul { list-style:none; margin:0; padding:0 0 20px 0;}

.activity ul li { float:left; width:25%; padding:5px;}

.activity ul li a { display:block; width:100%; height:200px; background:center; background-size: cover;}

.activity ul li:hover a { opacity:0.7;}

.activity ul li h3 { line-height:1.5em; height:5em; overflow:hidden; font-size:16px; font-weight:normal;}



/* index-highlight */

.index-highlights { }

.index-highlights ul { list-style:none; margin:0; padding:0 0 20px 0;}

.index-highlights ul li { float:left; width:25%; padding:5px; height:200px;}

.index-highlights ul li a { display:block; width:100%; height:100%; background:center; background-size: cover;}

.index-highlights ul li a:hover { opacity:0.8;}

.index-highlights a.more { display:block; width:150px; background:#2496a0; color:#ffffff; line-height:40px; text-align:center; margin:0 auto;}



/* message */

.message-box { padding:50px 0;}

.message-box .table-box { background: url(../images/cart-bg.jpg); padding:10px 20px; max-width:500px; margin:0 auto; border:5px #2fc6ad solid; }

.message-box .table-box h3 { font-weight:normal; margin:0 0 10px 0; padding-bottom:10px; font-size:16px; border-bottom:1px #CCCCCC dotted;}

.message-box .table-box h3 img { height:18px; opacity:0.5; padding:0 5px 2px 0;}

.message-box .table-box .content { font-size:14px; line-height:1.6em; min-height:100px;}

.message-box .table-box .content span { color:#C30;}

.message-box .table-box .forget { padding-top:10px; font-size:14px; line-height:1.6em; min-height:100px; color:#C30;}



/* cart */

.cart-lis { background:#ffffff; }

.cart-lis h3.title { background:#2fc6ad; font-weight:normal; margin:0; color:#ffffff; padding:10px 10px 10px 10px; font-size:18px; }

.cart-lis h3.title img { height:18px; width:auto; padding-right:5px; margin-top:-3px;}

.cart-table { font-size:14px; }



.cart-table ul { background: url(../images/cart-bg.jpg); list-style:none; margin:0; padding:0;}

.cart-table ul li { display: -webkit-box;

	display: -webkit-flex;

	display: -ms-flexbox;

	display: flex;

	-webkit-flex-wrap: wrap;

	    -ms-flex-wrap: wrap;

	        flex-wrap: wrap; border-bottom:1px #CCC dotted; 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: -webkit-flex;display: -webkit-box;

	display: -webkit-flex;

	display: -ms-flexbox;

	display: flex;

	-webkit-flex-wrap: wrap;

	    -ms-flex-wrap: wrap;

	        flex-wrap: wrap;

  -webkit-align-items: center;

          align-items: center;

  -webkit-justify-content: center;

          justify-content: center; }

		  

 .cart-table ul li .del { width:50px;  display: -webkit-flex;display: -webkit-box;

	display: -webkit-flex;

	display: -ms-flexbox;

	display: flex;

	-webkit-flex-wrap: wrap;

	    -ms-flex-wrap: wrap;

	        flex-wrap: wrap;

  -webkit-align-items: center;

          align-items: center;

  -webkit-justify-content: 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: #ffffff; color:#333333; font-size:14px;  border-bottom:5px #cccccc solid;}

.cart-table ul li.th-lis>div { padding:7px 5px; border-left:1px #ED8B8B 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; border-radius: 8px;}

.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; background: #FAFAF8; padding-bottom:20px; }

.cart-table ul li .space { -webkit-flex: 3; flex: 3; text-align:right; }

.cart-table ul li .total { width: auto; flex: none; color:#F60; text-align:center; padding: 0 10px;}

.freight { color: #84823E;}

.cart-table ul li .delivery { -webkit-flex: 1; flex: 1; text-align:right; }

.delivery-info { background:#ffffff; font-size:14px; color:#333; line-height:1.6em; margin-bottom:5px; }

.delivery-info h3 { background: #2fc6ad; margin:0; padding:10px; font-size:16px; border-bottom:4px #29aba0 solid;  font-weight:normal; color:#ffffff;}

.delivery-info h3 img { padding-right:5px; height:18px; width:auto;}

.delivery-member { padding:10px 10px 20px 10px; background: url(../images/cart-bg.jpg);}

.delivery-member-info { display: -webkit-box;

	display: -webkit-flex;

	display: -ms-flexbox;

	display: flex;

	-webkit-flex-wrap: wrap;

	    -ms-flex-wrap: wrap;

	        flex-wrap: wrap; padding-top:5px;}

.delivery-member-info span { display:block; padding-right:5px; width:80px; -webkit-flex: none; flex: none; line-height:30px;}

.delivery-member-info input.data { display:block; border:0; background: #ffffff; border:1px #E5E5E5 solid; color:#333; -webkit-flex: 1;  flex: 1; padding:5px; font-family:Microsoft JhengHei; line-height: 1.5em; }

.delivery-member-info textarea.data { display:block; border:0; background: #ffffff; border:1px #E5E5E5 solid; color:#333; -webkit-flex: 1;  flex: 1; padding:5px; font-family:Microsoft JhengHei; line-height: 1.5em; }

.delivery-member-info select { display:block; border:0; background: #ffffff; border:1px #E5E5E5 solid; color:#333; -webkit-flex: 1;  flex: 1; padding:5px; font-family:Microsoft JhengHei; line-height: 1.5em; }

.delivery-member-info input.checkbox { display:inline-block;}

.delivery-member-info .data-no-border { display:block; border:0;  color:#333; -webkit-flex: 1;  flex: 1; padding:5px; }

.delivery-member-info .data-no-border input.radio { margin-top: -3px;}

.delivery-member-info .data { line-height: 30px;}

.delivery-member-info .data input.checkbox { margin: -3px 8px 0 0;}



.btn { padding:10px; text-align:center; }

.btn a { background: #2fc6ad; color:#ffffff; display: inline-block; padding:8px 25px; border-radius: 6px;}

.btn a:hover { background:#D4D4D4; color:#ffffff;}



.order-finish { background:#ffffff; max-width:860px; margin:20px auto; padding:10px; border:1px #e0e0e0 solid;}

.remittance-info { padding:10px;  background: #2fc6ad; color:#ffffff; border:1px #29aba0 solid;  line-height:1.6em;}

.status-info { padding:10px; background: #2fc6ad; color:#ffffff; border:1px #29aba0 solid; line-height:1.6em; text-align:center; font-size:16px;}



/* product */

.product-lis { background:#ffffff; margin:0 -1%; padding:20px 0px; list-style:none;}

.product-lis li { float:left; width:23%; margin:1%;transition: all 0.3s ease 0s; padding:5px;}

.product-lis li:hover { background:#E9E9E9;transition: all 0.3s ease 0s;}

.product-lis li .photo { background-position:center; background-size:cover; }

.product-lis li .photo a { display:block; width:100%; height:0; padding-bottom:100%;}

.product-lis li .photo img { max-height:100%; max-width:100%; width:auto; height:auto;}

.product-lis li h3 { margin:10px 0 5px 0; padding:0; text-align:center;}

.product-lis li h3 a { color:#333; font-size:14px; display:block; height:3.6em; line-height:1.2em; overflow:hidden;}

.product-lis li h3 a:hover { color:#C60;}

.product-lis li .quantity { text-align:center; font-size:14px; padding-bottom:10px; color:#666;}

.product-lis li .quantity-num { width:110px; margin:0 auto 10px auto;}

.product-lis li .price { font-size:20px; color:#F00; text-align:center; padding-bottom:10px; font-family:BebasNeue;}



.add-to-order {color:#ffffff; text-align:center;}

.add-to-order a { display: inline-block; font-size:14px; color:#333333; padding:5px 15px; border:1px #EEEEEE solid;}

.add-to-order a img { height:14px; width:auto; padding-right:10px;}

.add-to-order a:hover { background:#EEEEEE;}



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







/* product detaile */

.pro-detail-box { }

.product-cont { background:#ffffff; position:relative; z-index:10; padding: 15px 0px 15px 0px;}

.detail-title { border-bottom:2px #ffd3d7 solid; font-size:18px; font-weight:normal; color:#972c2c; margin:0; padding:0 0 10px 0; line-height:1.4em;}

.detail-title img { padding-right:5px;}



.product-box { display: -webkit-box;

	display: -webkit-flex;

	display: -ms-flexbox;

	display: flex;

	-webkit-flex-wrap: wrap;

	    -ms-flex-wrap: wrap;

	        flex-wrap: wrap;}

.product-info { -webkit-flex: 1; flex: 1; font-size:14px;  line-height:1.8em; color:#666; position:relative; padding:0 0 70px 0; height:auto;}

.product-photo { -webkit-flex: 1; flex: 1; text-align:center; padding-right:10px}

.product-photo img { max-height:400px; max-width:100%; width:auto; height:auto;}

.product-info .cart { position:absolute; bottom:0; width:100%; border-bottom:1px #CCCCCC solid;  border-top:1px #CCCCCC solid; padding:7px 0; text-align:center;}

.product-info .cart a.btn-cart { background:#48c3ce; display: inline-block; line-height:30px; color:#ffffff; font-style:16px; padding:0 20px; }

.product-info .cart a.btn-cart:hover { background:#ce4881; } 



.product-info .briefly { padding:10px 0; color:#666; font-size:14px; line-height:1.6em; max-height:140px; overflow-y: scroll; }

.pro-info-title { background:#f3f3f3;  padding:10px; font-size:16px; text-align:center; color:#999; margin:20px 0; }





/* hot-pro */

.hot-pro { padding-bottom:10px; border-bottom:2px #6CC solid;}

.hot-pro-title { text-align:center; background:#6CC; color:#ffffff; margin:10px 0 5px 0 ; padding:5px; font-size:16px; font-weight:500; }

.hot-pro .item { margin-bottom:10px; border-bottom:1px #CCCCCC dotted; }

.hot-pro .item img { max-width:100%; width:100%; height:auto;}

.hot-pro .item h3 { margin: 10px 0; font-weight:500; font-style:14px; color:#666;}



/*STYLE 1*/

.product-info .briefly-style::-webkit-scrollbar-track

{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; background-color: #F5F5F5;}

.product-info .briefly-style::-webkit-scrollbar

{width: 12px; background-color: #F5F5F5;}

.product-info .briefly-style::-webkit-scrollbar-thumb

{ border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: #2496a0;}



@media screen and (max-width: 1000px) {

   .product-info .briefly { max-height:100px; }

}



.spec {  padding: 0 0 0px 0; margin-bottom:10px; text-align:left;}

.spec .pro-color { list-style:none;  margin:0 0 10px 0; padding:0 0 10px 0; border-bottom:1px #F0F0F0 solid;}

.spec .pro-color li { display:inline-block; width:20px; height:20px; border:3px #f0f0f0 solid; cursor:pointer; transition: all 0.3s ease 0s; margin-right:5px; }

.spec .pro-color li:hover, .spec .pro-color li.active { border:3px #333333 solid; transition: all 0.3s ease 0s; }





.spec .pro-size { list-style:none; margin:0 0 10px 0; padding:0 0 10px 0; border-bottom:1px #F0F0F0 solid;}

.spec .pro-size li { display:inline-block; width:40px; padding:2px 5px; border:1px #d6d6d6 solid; font-size:16px; line-height:20px; text-align:center; cursor:pointer; transition: all 0.3s ease 0s; margin-right:5px;}

.spec .pro-size li:hover, .spec .pro-size li.active { background:#48c3ce; border:1px #48c3ce solid; color:#ffffff; transition: all 0.3s ease 0s; }



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





.pro-sec { height:30px; text-align:center;}

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





.m-table { list-style:none; margin:0; padding:10px 0 20px 0;}

.m-table li { display: -webkit-box;

	display: -webkit-flex;

	display: -ms-flexbox;

	display: flex;

	-webkit-flex-wrap: wrap;

	    -ms-flex-wrap: wrap;

	        flex-wrap: wrap; border-bottom:1px #CCC dotted; color: #737360;}

.m-table li span { display:block; -webkit-flex: 1; flex: 1; text-align:center; padding:5px; line-height:1.6em;}

.m-table li:first-child { border-top:3px #CCC solid;}



.product-info .price { width:100%; text-align:right; font-size:16px; font-family:BebasNeue; color:#F00; padding:15px 0 10px 0;}

.product-info .price span { font-size:48px; font-family:BebasNeue; padding-left:5px; display: inline-block; line-height:48px; }

.product-title { font-size:24px; margin:0; padding:0 0 10px 0; color:#333; font-weight:normal;}

.product-time { font-size:16px; margin:0 0 10px 0; color:#a8a69c; font-weight:normal; }

.product-content { font-size:14px; line-height:1.6em; padding:0 0 20px 0; color:#3a3a3a;}

.product-content img { display:block; width:auto; height:auto; max-width:100%; margin-bottom:10px;}



.count { display:inline-block; line-height:30px; padding-right:5px;}

.qtyInputBox { display: -webkit-box;

	display: -webkit-flex;

	display: -ms-flexbox;

	display: flex;

	-webkit-flex-wrap: wrap;

	    -ms-flex-wrap: wrap;

	        flex-wrap: wrap;}

.qtyInputBox input { line-height:30px; height:30px; border:1px #CCCCCC solid; width:50px; display:block; text-align:center;}

.qtyInputBox span { display:block; width:30px; cursor:pointer; }

.qtyInputBox span button.fa-plus { background:#FFF; line-height:30px; height:30px; border:1px #CCCCCC solid; border-left:0; width:100%; cursor:pointer;  }

.qtyInputBox span button.fa-minus { background:#FFF; line-height:30px; height:30px; border:1px #CCCCCC solid; border-right:0; width:100%; cursor:pointer;  }

.qtyInputBox span button { padding:6px; }

.qtyInputBox span button img { width:100%; height:auto;}





/* album 原有特效

.album { padding: 10px 0 0 0px;}

.album .title { font-weight:500; font-size:24px; position:relative; margin:10px 0;}

.album .title h3 { background:#ffffff; margin:0; padding:0 15px 0 0; font-size:24px; color: #257137; font-weight: 400; letter-spacing:-2; display:inline-block; z-index:2; position:relative;}

.album .title>span { border-bottom:1px #257137 solid; position:absolute; top:16px; left:0; display:block; width:100%; z-index:1;}

.album .title a.more-link { position:absolute; right:0; top:1px; color:#257137; font-size:14px; z-index:5; background:#ffffff; padding:5px 0 5px 10px;}

.album .title a.more-link:hover { color:#39F;}

.album #div_marquee{ width:100%; overflow:hidden; margin-right:10px;}

.album #inmarquee {float: left; width: 1700%;}

.album #marquee1 {float: left; }

.album #marquee2 {float: left; }



.album #marquee1 a, .album #marquee2 a  { display:inline-block; margin:0 5px 0 0 ;}

.album #marquee1 a img, .album #marquee2 a img { height:100px; width:auto; }

*/





/* album 2022-0324 調整 */

.album { padding: 0px 0 0 0px;}

.album .title { font-weight:500; font-size:24px; position:relative; margin:10px 0;}

.album .title h3 { background:#ffffff; margin:0; padding:0 15px 0 0; font-size:24px; color: #257137; font-weight: 400; letter-spacing:-2; display:inline-block; z-index:2; position:relative;}

.album .title>span { border-bottom:1px #257137 solid; position:absolute; top:16px; left:0; display:block; width:100%; z-index:1;}

.album .title a.more-link { position:absolute; right:0; top:1px; color:#257137; font-size:14px; z-index:5; background:#ffffff; padding:5px 0 5px 10px;}

.album .title a.more-link:hover { color:#39F;}

.album .marquee {display: flex; flex-wrap: wrap; margin: 0 -5px;}

.album .marquee > a { flex: none; width: calc(20% - 10px); display: block; margin:0 5px 10px 5px; transition: all 0.3s ease; border-radius: 4px; overflow: hidden;}

.album .marquee > a > img { width: 100%; height: auto;}

.album .marquee > a:hover { filter: brightness(2);}



/* search-history */

.search-history { padding-bottom:15px;}

.history-title { position: relative; background:#d7fcff;  padding:8px 15px; border:3px #bcdbed solid; margin-bottom:10px; font-style:16px; color:#2496a0; text-align:center;}

.history-title .icon { width:40px; height: auto; position:absolute; top:-12px; left:50%; margin-left:-20px; }

.search-history ul { list-style:none; margin:0; padding:0;}

.search-history ul li { padding:10px; border-bottom:1px #f2f2f2 solid; position:relative;}

.search-history ul li:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}

.search-history ul li .rank { background:#F30; width:40px; height:40px; line-height:40px; text-align:center; color:#ffffff; font-size:16px; position:absolute; top:-10px; left:-10px;}

.search-history ul li .photo { height:120px; float:left; width:50%;  border:1px #E7E7E7 solid; text-align:center; padding:5px;}

.search-history ul li .photo img { width:auto; height:auto; max-height:100%;}

.search-history ul li .pro-name {  float:left; width:50%;  }

.search-history ul li .pro-name a.name { font-size:14px; color:#333; display:block; line-height:1.4em; padding: 0 0 10px 10px;}

.search-history ul li .price {  font-family:BebasNeue; color:#f08c98; font-size:23px; display:block; text-align: right; }





/* hot-rank */

.hot-rank { padding-bottom:15px;}

.hot-rank-title { position:relative; background:#fff2f1;  padding:8px 15px; border:3px #f4d0ce solid; margin-bottom:10px; font-style:16px; color:#e6635b; text-align:center;}

.hot-rank-title .icon { width:40px; height: auto; position:absolute; top:-12px; left:50%; margin-left:-20px; }

.hot-rank ul { list-style:none; margin:0; padding:0;}

.hot-rank ul li { padding:10px; border-bottom:1px #f2f2f2 solid; position:relative;}

.hot-rank ul li:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}

.hot-rank ul li .rank { background:#F30; width:40px; height:40px; line-height:40px; text-align:center; color:#ffffff; font-size:26px; position:absolute; top:5px; left:5px; border-radius:10px 0 10px 0; font-family:BebasNeue;}

.hot-rank ul li .photo { height:120px; float:left; width:50%; border:1px #E7E7E7 solid; text-align:center; padding:5px;}

.hot-rank ul li .photo img { width:auto; height:auto; max-height:100%;}

.hot-rank ul li .pro-name { float:left; width:50%; }

.hot-rank ul li .pro-name a.name { font-size:14px; color:#333; display:block; line-height:1.4em; padding: 0 0 10px 10px;}

.hot-rank ul li .price {  font-family:BebasNeue; color:#f08c98; font-size:23px; display:block; text-align: right; }





/* class-list */ 

.class-list { display: flex; flex-wrap: wrap; padding:0px; min-height:300px; margin: 20px -1% ;}

.class-list ul { list-style:none; margin:0; padding:0 0 10px 0; }

.class-list ul li { padding:5px 0;  border-bottom:1px #d42e2e dotted; font-size:16px; }

.class-list ul li:last-child { border-bottom:0; }

.class-list ul li span { float:left; width:95px; color:#d42e2e; border-right:1px #d42e2e solid; line-height:1.2em; }

.class-list ul li a { color:#333; display:block;  margin-left:110px; }

.class-list ul li a:hover { color:#F60;}



.class-cover { padding: 10px 0 25px 0; }

.class-cover .photo { max-width: 640px; margin: 0 auto; background-position: center; background-repeat: no-repeat; background-size: cover; border-radius: 12px;}

.class-cover .photo:before { content: ''; display: block; width: 100%; height: 0; padding-bottom: 56%;}





.lis-item { width:31.33%; margin:1%; flex: none;}

.lis-item:hover {  transition: all 0.3s ease 0s;}

.lis-item .photo { width:100%; }

.lis-item .photo a { display:block; width:100%; height:0; padding-bottom:60%; background-position:center; background-size:cover; }

.lis-item .photo a:hover { opacity:0.7;}

.lis-item .time { font-size:16px; color:#4899a2; padding: 10px 0; text-align:center; border-bottom:1px #d7d7d7 solid; display:block; }

.lis-item h4 { margin:0; padding:0; font-weight:500; }

.lis-item h4 a { color:#535353; font-size:16px; padding:10px 5px; line-height:1.4em; display:block; height:60px; overflow:hidden;}

.lis-item h4 a:hover { color:#4899a2;}



/* class-info */

.class-info { margin: 0 0 20px 0; padding: 0;}

.class-info li { display: flex; border-bottom: 1px #eeeeee solid; padding: 8px 0; font-size: 14px; }

.class-info li label { width: 75px; flex: none; color: #8f8f8f; font-weight: bold; }

.class-info li label::after { content: '-'; padding: 0 5px;} 

.class-info li > div { flex: 1; color: #474747;}

.class-info li.price { line-height: 24px;}

.class-info li.price > div {  font-size: 18px;font-weight: bold; color: #c22612;}



.class-content { font-size: 14px; color: #333333; line-height: 1.6em;}



/* news */ 

.news-list { padding:15px 0 20px 0; }

.news-list ul { list-style:none; margin:0; padding:0 0 10px 0; }

.news-list ul li { padding:5px 0;  border-bottom:1px #d42e2e dotted; font-size:16px; }

.news-list ul li:last-child { border-bottom:0; }

.news-list ul li span { float:left; width:95px; color:#d42e2e; border-right:1px #d42e2e solid; line-height:1.2em; }

.news-list ul li a { color:#333; display:block;  margin-left:110px; }

.news-list ul li a:hover { color:#F60;}



.news-cont { position:relative; z-index:10; padding-bottom:30px;}

.news-title { font-size:22px; margin:20px 0 20px 0; padding:0; color:#303030; font-weight:normal; font-weight: bold;}

.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 { border:1px rgb(221, 221, 221) solid; border-left: 0; border-right: 0; font-size:14px; margin:0 0 10px 0; color:#29c9c1; font-weight:normal; padding:6px 0; }

.news-content { font-size:14px; line-height:1.6em; padding:0 0 20px 0; color:#454545;}

.news-content img { display:block; width:auto; height:auto; max-width:100%; margin-bottom:10px;}



.lis-itim { padding:10px 0px;  border-bottom:1px #CCCCCC dotted;}

.lis-itim:last-child { border-bottom: 0;}

.lis-itim:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}/* Hides from IE-mac \*/

* html .lis-itim {height: 1%;}/* End hide from IE-mac */

.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:60%; background-position:center; background-size:cover; }

.lis-itim .photo a:hover { opacity:0.7;}

.lis-itim .time { background:#66ccc0; text-align:center; font-size:14px; color: #fff; display:block; width:100px; float:left; font-weight:bold; border-radius: 4px 0 0 4px; }

.lis-itim h4 { margin:0 0 0 110px; padding:0; font-weight:500;}

.lis-itim h4 a { color:#000000; font-size:14px; padding:0; line-height:1.4em; display:block;}

.lis-itim h4 a:hover { color:#4899a2;}

.lis-itim p { margin:0 0 0 110px; padding:5px 0 0 0; font-size:14px; color:#999; }





/*  index-news  */

.i-news { padding:10px 10px 10px 0; border-radius:0 0 5px 5px;}

.i-news-title { position:relative; margin-bottom:20px;}

.i-news-title h3 { background:#ffffff; margin:0; padding:0 15px 0 0; font-size:24px; color: #6C6; font-weight: 400; letter-spacing:-2; display:inline-block; z-index:1; position:relative;}

.i-news-title>span { border-bottom:1px #999999 solid; position:absolute; top:16px; left:0; display:block; width:100%; z-index:1;}

.i-news-title a.more-link { position:absolute; right:0; top:1px; color:#6C6; font-size:14px; z-index:5; background:#ffffff; padding:5px 0 5px 10px;}

.i-news-title a.more-link:hover { color:#39F;}

.i-news .list { width:100%; padding:0; list-style:none; margin:0; min-height:250px;}

.i-news .list li { margin:0 0 10px 0; padding:0 0 10px 0; border-bottom:1px #CCCCCC dotted; }

.i-news .list li h3 { color:#000; margin:0; padding:0; font-size:18px; font-weight:normal; }

.i-news .list li h3 a { color:#333333; font-size:14px; display:block; margin-right:90px; }

.i-news .list li h3 a:hover { color:#69F;}

.i-news .list li h3 .time { float:right; text-align:right; color:#999; font-size:14px;} 

.i-news .list li p { margin:0; padding:10px 0; font-size:12px; color:#666; }



.i-class { border-radius:0 0 5px 5px;}

.i-class  h3 { color: #7e9ad2;}

.i-class a.more-link { color: #7e9ad2;}





/*  index-products  */

.i-products  { padding:10px 0 10px 0;}

.i-products-title { position:relative; margin-bottom:20px;}

.i-products-title h3 { background:#ffffff; margin:0; padding:0 15px 0 0; font-size:30px; color:#000;  font-weight: 400; letter-spacing:-2; display:inline-block; z-index:1; position:relative;}

.i-products-title>span { border-bottom:1px #999999 solid; position:absolute; top:20px; left:0; display:block; width:100%; z-index:1;}

.i-products-title a.more-link { position:absolute; right:0; top:4px; color:#333333; font-size:16px; z-index:5; background:#ffffff; padding:5px 0 5px 10px;}

.i-products-title a.more-link:hover { color:#39F;}

.i-products .list { width:100%; padding:0; list-style:none; margin:0;}

.i-products .list li { width:24%; float:left; margin:0 0.5% 10px 0.5%; height:250px; overflow:hidden;}

.i-products .list li .cover { width:100%; background-size:cover; background-position:center; background-repeat:no-repeat; }

.i-products .list li .cover a { display:block; padding-bottom:80%; width:100%;  height:0;}

.i-products .list li h3 { color:#000000; margin:0px 0 0px 0; padding:0; font-size:18px; font-weight:normal; }

.i-products .list li span { display:block; font-size:12px; color:#666; padding:5px 0 3px 0; }



.i-products .hot-pro li { width:49%; height:500px; }



.events-photos { padding:10px 0;}

.events-photos a { padding:5px; display:inline-block; margin:5px 2px; border-radius:5px; border:1px #CCCCCC solid;}

.events-photos a img { height:150px; width:auto; border-radius:2px;}

.events-photos a:hover { opacity:0.8;}





/* footer */

footer { background:#2fc6ad; padding:0px 0 0px 0; margin-top:-15px;}

.foot-link { background:#ffffff; border-top:3px #F8F8F8 solid;}

.foot-link ul { list-style:none; padding:0px 0; margin:0; text-align:center;}

.foot-link ul li { display:inline-block; }

.foot-link ul li a { color:#20747c; padding:10px 20px; display:block; font-size:14px;}

.foot-link ul li a:hover { background:#F6F6F6; }

.foot-icon { height:18px; width:auto; padding-right:10px;}



footer .bg { padding:10px 0; display: -webkit-box;

  margin:0 auto;

  max-width:1040px; 

  

	display: -webkit-flex;

	display: -ms-flexbox;

	display: flex;

	-webkit-flex-wrap: wrap;

	    -ms-flex-wrap: wrap;

	        flex-wrap: wrap;}

.foot-info { color:#ffffff; font-size:14px; -webkit-flex: 1;flex: 1; line-height:2em;}

.foot-info .foot-logo { float:left; width:80px; height:auto;}

.foot-info .info { margin-left:100px;}

.foot-info .info br { display:none;}

.foot-info h3 { margin:0 0 5px 0; padding:0 0 5px 0; border-bottom:1px #cee0f5 solid;}

.foot-info a { color:#ffffff;}

.foot-info a:hover { color: #FF3;}

.copyright { background:#29aba0; padding:10px 0 15px 0; font-size:14px; text-align:center; color:#ffffff;}

.company-name { font-size:16px; line-height:1.6em; display:block;}

.counter { background:#5c5f62; text-align:center; padding:8px 10px; color:#FFF; font-size:16px; border-bottom:1px #0099CC solid;}



/* form */

.form {  }

.form .note { font-size:14px; color:#F30; padding:0 0 10px 0;}

.form .form-lis { display: -webkit-box;

	display: -webkit-flex;

	display: -ms-flexbox;

	display: flex;

	-webkit-flex-wrap: wrap;

	    -ms-flex-wrap: wrap;

	        flex-wrap: wrap; font-size:14px; line-height:1.2em; padding:3px 0;}

.form .form-lis .title { display:block; font-size:14px; color:#333333; width:120px; padding:5px 7px; text-align:right; border-left:3px #5dc2cc solid;}

.form .form-lis .data {  background:#ffffff; display:block; padding:5px 7px; -webkit-flex: 1; flex: 1; font-size:14px; color: #666; border:1px #ececec solid; border-radius: 4px;}

.form .form-lis .data-no-border {  background:#ffffff; display:block; padding:5px 7px; -webkit-flex: 1; flex: 1; font-size:14px; color: #666;}

.form .form-lis input.data { border:0; width:100%; font-size:14px; font-family:Microsoft JhengHei; border:1px #ececec solid; border-radius: 4px;}

.form .form-lis textarea.data { border:0; width:100%; font-size:14px; font-family:Microsoft JhengHei;  border:1px #ececec solid; border-radius: 4px;}

.form .form-lis .code {  background:#ececec; display:block; padding:0; -webkit-flex: 1; flex: 1; font-size:14px; color: #666;}

.form .form-lis .code img.img-code { height:29px; width:auto; float:right;}

.form .form-lis .code input { border:0;  font-size:14px; font-family:Microsoft JhengHei;padding:5px 7px; border-radius: 4px;}



h3.form-title-03 { text-align:center; font-size:20px; background:#66ccc0; color:#fff; padding:5px; font-weight:500; border-radius: 5px 5px 0 0; }

h3.form-title-03 img { height:18px; width:auto; display:inline-block; vertical-align: central; margin-right:5px;}



.from-box { padding: 10px 0 0 10px;}

.form-box-cont { font-size:14px; line-height:1.6em; color: #666; padding:0 10px 0 0;}



.botton-m { text-align:center; font-size:14px; margin-top:10px; padding:10px 0 20px 0; }

.botton-m a { display:inline-block; color:#ffffff; padding:7px 15px; font-size:16px; border-radius: 4px;}

.botton-m a.left { background:#5dc2cc; margin-right:5px;}

.botton-m a.left:hover { background: #C60;}

.botton-m a.mid { background:#933; margin-right:5px;}

.botton-m a.mid:hover { background:#C03;}

.botton-m a.right { background:#2496a0; }

.botton-m a.right:hover { background:rgb(68, 18, 28);}



.botton-m a.apply { background:#5dc2cc; padding: 12px 20px; font-size: 24px;}

.botton-m a.apply:hover { background: #C60;}







/* login */

.abgne_tab {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-bg01 {  padding: 20px;}	

.login-bg01 h2 {margin: 0 0 20px; font-size:18px; text-align:center; font-weight:normal;}



.page-box .login-bg { }



.login .form-lis { display: -webkit-box;

	display: -webkit-flex;

	display: -ms-flexbox;

	display: flex;

	-webkit-flex-wrap: wrap;

	    -ms-flex-wrap: wrap;

	        flex-wrap: wrap; font-size:14px; line-height:1.2em; padding:3px 0;}

.login .form-lis .title { display:block; font-size:14px; color:#333333; width:120px; padding:5px 7px; text-align:right; border-left:3px #2496a0 solid;  }

.login .form-lis .data { border:1px #ececec solid; display:block; padding:5px 7px; -webkit-flex: 1; flex: 1; font-size:14px; color:#333333}

.login .form-lis input.data { width:100%; font-size:14px; font-family:Microsoft JhengHei; }

.login .form-lis textarea.data { width:100%; font-size:14px; font-family:Microsoft JhengHei; }

.login .form-lis .code { background:#e7dcdc; display:block; padding:0; -webkit-flex: 1; flex: 1; font-size:14px; color: #666;}

.login .form-lis .code img.img-code { height:29px; width:auto; float:right;}

.login .form-lis .code input { background:#e7dcdc; border:0;  font-size:14px; font-family:Microsoft JhengHei;padding:5px 7px;color:#333333; }



.login .btn a { background:#2496a0;color:#ffffff; border:0; font-size:14px; border-radius: 4px; }

.login .btn a:hover { background:#6a3939; } 



/* bookmark */

.bookmark { border-top:1px #cccccc solid; text-align:center; font-size:14px; padding:10px 0; color:#333333; margin:0px 0 5px 0;  border-radius:0 0 5px 5px;}

.bookmark a { background:#ffffff; display:inline-block; border:0; padding:5px 10px; color: #333333; margin:5px; border:1px  #F0F0F0 solid; }

.bookmark a:hover { background:#CCCCCC; color:#ffffff;}

.bookmark select { background:#ffffff; border:0; padding:5px; color: #81795A; margin:0 2px; border:1px #CCCCCC solid;}



/* 框架 */

.col-box { display: -webkit-box;

	display: -webkit-flex;

	display: -ms-flexbox;

	display: flex;

	-webkit-flex-wrap: wrap;

	    -ms-flex-wrap: wrap;

	        flex-wrap: wrap; margin:0 -0.5%;}

.content-box img { max-width:100%; width:auto; height:auto;}

.col-1 { width:8.33%; margin:0.5%;}

.col-2 { width:15.66%; margin:0.5%;}

.col-3 { width:23.99%; margin:0.5%;}

.col-4 { width:32.32%; margin:0.5%;}

.col-5 { width:40.65%; margin:0.5%;}

.col-6 { width:48.98%; margin:0.5%;}

.col-7 { width:57.31%; margin:0.5%;}

.col-8 { width:65.64%; margin:0.5%;}

.col-9 { width:73.97%; margin:0.5%;}

.col-10 { width:82.3%; margin:0.5%;}

.col-11 { width:90.63%; margin:0.5%;}

.col-12 { width:99%;margin:0.5%;}



.google-map { padding:5px; background:#CCC; height:200px; width:98%; margin:10px 0px 0 0;}



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

/* 通用 */

::-webkit-input-placeholder { color:#836363; }

::-moz-placeholder { color:#836363; } /* firefox 19+ */

:-ms-input-placeholder { color:#836363; } /* ie */

input:-moz-placeholder { color:#836363; }



/* webkit专用 */

#field2::-webkit-input-placeholder { color:#836363; }

#field3::-webkit-input-placeholder { color:#836363; background:lightgreen; text-transform:uppercase; }

#field4::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#836363; }



/* mozilla专用 */

#field2::-moz-placeholder { color:#836363; }

#field3::-moz-placeholder { color:#836363; background:lightgreen; text-transform:uppercase; }

#field4::-moz-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#836363; }