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

body { background:#0d0c0c url(../images/main-bg.jpg) right bottom no-repeat; margin:0; padding:0; font-family:Microsoft JhengHei; position:relative; font-size:16px;}
img { border:0; vertical-align:middle;}
input { vertical-align:middle; font-family:Microsoft JhengHei;}
select {  font-family:Microsoft JhengHei;}

/*  漸變效果 */
a {transition: all 0.3s ease 0s; text-decoration:none; color: #CCC;}
.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; position:relative; z-index:15; }
.main-box { max-width:1100px; margin:0 auto; padding-bottom:40px;  }
.left-bg { position:absolute; top:0; left:0; width:auto; height:auto; z-index:1; }

.index-logo { position:absolute; top:0px ; left:0px; z-index:99; }
.index-logo img { width:400px; height:auto;}

/*  header */
header { position:relative; z-index:100; background-color:rgba(0,102,153,0.85);}
header.index { margin-top:-60px;}
header.index .logo { display:none;}

.logo { position: absolute; top:0px; left:20px;}
.logo img { width:400px; height: auto;}

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

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

ul.top-tool { list-style:none; padding:0px 0px; margin:5px 0 0 0; float:right;}
ul.top-tool li { display:inline-block; line-height:28px;}
ul.top-tool li a { display:block; padding:15px 0px 15px 0; color:#333; font-size:14px;}
ul.top-tool li a:hover { color:#F00;}
ul.top-tool li img { height:20px; width:auto; padding-right:5px;}
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 {  background: url(../images/icon-search.png) center no-repeat; background-size: contain; padding:0px 15px; margin:0 0 0 5px; line-height:24px; border:0; cursor:pointer;}

/*  nav  */
nav { padding:0px; max-width:1100px; margin:0 auto; }
.menu { margin:0; padding:0; list-style:none; text-align: right;}
.menu>li { color:#fffefe; font-size:18px; position:relative; display:inline-block;} 
.menu>li>a { display:block; color:#fffefe; padding:16px 10px 16px 10px; line-height:28px; text-align:center; letter-spacing:3px; transition: all 0s ease 0s;}

.menu>li>a:hover, .menu>li.active a { border-bottom:4px #779056 solid; padding-bottom:12; transition: all 0s ease 0s;}
.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.main-nav {display:block; color:#cccccc; padding:15px 10px; text-align:center; cursor:pointer; line-height:28px;}
.menu li>ul.sub { background: #EFEFEF; opacity:0; position:absolute; left:-25px; top:30px; width:126px; transition: all 0.3s ease 0s; visibility: hidden; z-index: 9999;}
.menu li:hover>span { background:#F1F1F1; }

.menu li:last-child>span { border-right:0; }
.menu li>ul.sub { margin:0; padding:0; list-style:none;}
.menu li>ul.sub>li a { display:block; color:#333; font-size:14px; padding:7px;}
.menu li>ul.sub>li:last-child a {border-bottom:0;}
.menu li>ul.sub>li a:hover {color:#333333; background: #F8F8F8; }

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

.menu>li.language>a { display: inline-block; background:#779056; color:#ffffff; padding:0; font-size:12px; line-height:32px; width:32px; text-align:center; border-radius: 99em; letter-spacing:0;}
.menu>li.language>a:hover { background:#a4d365; border-bottom:0; padding-bottom:0;}

nav .sub-menu { display:none;}


/*  banner  */
.banner { z-index:1; position: relative;}


/* index-servic */ 
.index-service { max-width:1100px; margin:0 auto; padding:50px 0;}
.index-service .service-tr { width:100%; position:relative; white-space: nowrap;}
/*
.index-service .service-tr .box { width:100%; height:0; padding-bottom:25%;}
.index-service .service-tr .box .box-in { position:absolute; left:0; width:100%; top:0; bottom:0;}
*/
.index-service .service-tr .item { width:17%; margin:-8.5% 4% 4% 4%; border-radius:8px; float: left; position: relative; overflow:hidden; transform:rotate(45deg);white-space: nowrap;} 
.index-service .service-tr .item>div { width:100%; padding-bottom:100%; height:0;}
.index-service .service-tr .item a { background:#779056; display:block; position:absolute; left:0; top:0; width:100%; height:100%;}
.index-service .service-tr .item a:hover { background:#6C6;}
.index-service .service-tr .item a span { width:100%; height:100%; display:block; text-align:center; color:#ffffff; font-size:14px; padding:10% 0 0 0; transform:rotate(-45deg);}
.index-service .service-tr .item a span img {  display:block; margin:0 auto 10px auto; }
/**
.index-service .service-tr .item a span br { display:none;}
**/
.index-service .service-tr .item .service-bg { background:url(../images/index-service-bg.png) left repeat-y;}

.index-service .service-tr .item:nth-child(1), 
.index-service .service-tr .item:nth-child(2), 
.index-service .service-tr .item:nth-child(3),
.index-service .service-tr .item:nth-child(4) { margin-top:4%; }
.index-service .service-tr .item:nth-child(5) { margin-left:16.5%; }

.index-service .service-tr .item.belu a { background:#03708b; }
.index-service .service-tr .item.belu:hover a { background:#3CF;}


@media screen and (max-width: 1100px) {
    .index-service .service-tr .item a span { font-size:12px; }
	.index-service .service-tr .item a span img { width: 100px; height:auto;}
}

/*  content  內文  */
.font-title { font-size:30px; margin:0 0 10px 0; padding:0; color: #F0F0F0; font-weight:normal;}
.font-title-02 { font-size:18px; margin:30px 0 10px 0; color:#F0F0F0; font-weight:normal; padding-left:10px; border-left:3px #F0F0F0 solid; }
.font-content { font-size:16px; line-height:1.6em; padding:10px 0 20px 0; color: #cccccc;}
.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  */
h3.left-title { color:#ffffff;}
.left-menu { margin:0; padding:0 0 15px 0; list-style:none; background:#333; }
.left-menu>li { border-bottom:1px #d3d3d3 dotted; }
.left-menu>li>a, .left-menu>li>span { background:url(../images/left-menu-icon.png) 10px 10px no-repeat; display:block; padding:8px 0px 8px 35px ; color:#ffffff; font-size:16px;}
.left-menu>li>a:hover, .left-menu>li.active>span { background:url(../images/left-menu-icon.png) 10px 10px no-repeat #03708b; color:#ffffff; }
.m-left-menu { display:none; }
.left-menu>li>.sub { padding-left: 25px;}

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

/*  page  */
.page-box {  overflow:hidden; padding-top:30px; }
.page-title { text-align:center; border-bottom:1px #666 solid; position:relative;}
.page-title h3 { font-weight:normal; color:#ffffff; font-size:24px; margin:0; font-weight:bold; padding:25px 40px 25px 50px; display: inline-block;}
.page-title h3:before { content:""; position:absolute; bottom:0; left:0; border-bottom:4px #3399CC solid; width:100px; }
.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 { min-height:300px; padding: 15px 0px 30px 0px; position:relative; z-index:10;}
.page-box .page-cornor { position:relative; z-index:1; } 
.page-box .page-cornor .left { position:absolute; bottom:0px; left:0px;}
.page-box .page-cornor .right { position:absolute; bottom:0px; right:0px;}

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


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

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

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

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


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

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

/*  index-products  */
.i-products  { padding:30px 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%; overflow:hidden;}
.i-products .list li .cover { width:100%; background-size:cover; background-position:center; background-repeat:no-repeat; margin-bottom:5px; }
.i-products .list li .cover a { display:block; padding-bottom:100%; width:100%;  height:0;}
.i-products .list li h3 { color:#ffffff; margin:0px 0 0px 0; padding:0; font-size:18px; height:2.8em; line-height:1.4em; font-weight:normal; overflow:hidden;}
.i-products .list li>span { display:block; font-size:14px; color:#39C; line-height:1.6em; padding:5px 0 3px 0; }
.i-products .list li p { color: #CCC; margin:0px 0 0px 0; padding:0; font-size:14px; height:8em; line-height:1.4em; font-weight:normal; }

/* product detaile */
.pro-detail-box { }
.product-cont { background:#ffffff; position:relative; z-index:10; padding: 15px 0px 15px 0px;}
.detail-title { border-left:5px #ffd3d7 solid; font-size:20px; font-weight:normal; color: #6FF; margin:10px 0 40px 0; padding:5px 0 5px 20px; 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%; padding:7px 0; text-align:center;}
.product-info .cart a.btn-cart { background:#000000; 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 { padding:10px; font-size:16px; text-align:center; color:#000000; margin:20px 0; border-bottom:1px #CCCCCC solid; }

a.measuring { font-size:14px; color:#F30; padding-left:5px;}
a.measuring:hover { color:#F93;} 


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


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

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

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

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


/* news */ 
.news-list { paddingt:0px; min-height:300px;}
.news-list ul { list-style:none; margin:0; padding:0 0 10px 0; }
.news-list ul li { padding: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:30px 0;}
.news-title { font-size:22px; margin:0 0 10px 0; padding:0; color:#ffffff;}
.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 { background:#779056; font-size:14px; margin:0 0 10px 0; color:#ffffff; font-weight:normal; padding:6px 15px; }
.news-content { font-size:16px; line-height:1.6em; padding:0 0 20px 0; color:#cccccc;}
.news-content img { display:block; width:auto; height:auto; max-width:100%; margin-bottom:10px;}


.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 { margin:0 0 10px ; }
.lis-itim:hover {  transition: all 0.3s ease 0s;}
.lis-itim .time { font-size:16px; color:#ffffff; padding:8px; border-right:3px #CCCCCC solid; display:block; text-align:center; float:left; width:120px; background:#03708b; border-radius: 8px 0 0 8px;}
.lis-itim h4 { margin:0 0 0 130px; padding:0; font-weight:500; }
.lis-itim h4 a { color:#cccccc; font-size:16px; padding:5px 0 10px 0; line-height:1.4em; display:block;}
.lis-itim h4 a:hover { color:#4899a2;}


/*  index-news  */
.i-news { padding:50px 0 10px 0;}
.i-news-title { position:relative; margin-bottom:20px;}
.i-news-title h3 { margin:0; color:#ffffff; padding:0 15px 0 0; font-size:26px; }
.i-news-title h3>span { color:#78b8d9; font-size:30px; padding-right:20px; }
.i-news-title a.more-link { position:absolute; right:0; top:8px; font-size:14px; background:#779056; color:#ffffff; padding:5px 10px; border-radius: 4px;}
.i-news-title a.more-link:hover { background:#6C9;}
.i-news .list { padding:0; list-style: square; color:#dcdcdc; margin:0 0 0 25px;}
.i-news .list li { margin:0 0 10px 0; color:#dcdcdc; }
.i-news .list li h3 { color:#dcdcdc; font-size:16px; font-weight:normal; margin:5px 0; }
.i-news .list li h3 a { color:#CCC;}
.i-news .list li h3 a:hover { color: #FF9;}

/* footer */
footer { background:url(../images/foot-bg.png) center bottom no-repeat; padding:0px 0 0px 0; margin:0 auto; border-top:3px #4c9d5d solid; max-width:1100px; border-bottom:10px #5180ac solid;}
.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; color:#cdcdcd; }
.foot-link ul li a { color:#cdcdcd; 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:0px; display: -webkit-box;
  margin:0 auto;
  max-width:1200px; 

	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	    -ms-flex-wrap: wrap;
	        flex-wrap: wrap;}
.foot-info { max-width:1200px; color:#cdcdcd; margin:0 auto; padding:25px 0 0 0; font-size:14px; -webkit-flex: 1;flex: 1; line-height:1.8em; }
.foot-info a { color:#cdcdcd;}
.foot-info a:hover { color:#666666;}
.copyright { padding:10px 0 15px 0; font-size:14px; text-align:center; color:#333333; margin:0 10px; border-top:1px #CCCCCC solid;}


.foot-info.undertitle { width: 300px; min-width: 100px; -webkit-flex: initial; flex: initial; padding:0; text-align:center;}
.foot-info.undertitle h3 { font-size:22px; color:#ffffff; margin:0; padding:15px 0 0 0; font-weight:normal; }
.foot-info.undertitle P { font-size:12px; color:#ffffff; margin:0; padding:0px 0 20px 0;  }

/* form */
.form { max-width:500px; }
.form .note { font-size:14px; color:#F30; padding:0 0 10px 0;}
.form .form-lis { display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	    -ms-flex-wrap: wrap;
	        flex-wrap: wrap; font-size:14px; line-height:1.2em; padding:3px 0;}
.form .form-lis .title { display:block; font-size:14px; color:#cccccc; 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; border-radius: 3px;}
.form .form-lis input.data { border:0; width:100%; font-size:14px; font-family:Microsoft JhengHei; border-radius: 3px; }
.form .form-lis textarea.data { border:0; width:100%; font-size:14px; font-family:Microsoft JhengHei; border-radius: 3px;}
.form .form-lis .code {  background:#ececec; display:block; padding:0; -webkit-flex: 1; flex: 1; font-size:14px; color: #666; border-radius: 3px;}
.form .form-lis .code img.img-code { height:29px; width:auto; float:right;}
.form .form-lis .code input { border:0;  font-size:14px; font-family:Microsoft JhengHei;padding:5px 7px; }

.botton-m { text-align:center; font-size:14px; margin-top:10px; padding:10px 0 20px 0; }
.botton-m a { display:inline-block; color:#ffffff; padding:5px 15px; font-size:14px;}
.botton-m a.left { background:#5dc2cc; margin-right:5px; border-radius: 3px;}
.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; border-radius: 3px; }
.botton-m a.right:hover { background:#F03;}


/* 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:#ffffff;}
.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:#ffffff; }

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

/* bookmark */
.bookmark { border-top:1px #666666 solid; text-align:center; font-size:14px; padding:10px 0; color:#ffffff; margin:0px 0 5px 0;  border-radius:0 0 5px 5px;}
.bookmark a { background:#03708b; display:inline-block; border:0; padding:5px 10px; color:#ffffff; margin:5px; border-radius: 3px; }
.bookmark a:hover { background: #69C; color:#ffffff;}
.bookmark select { background:#ffffff; border:0; padding:5px; color: #81795A; margin:0 2px;  border-radius: 3px;}

/* 框架 */
.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%;}


.pro-de-img { text-align:center;}
.pro-de-img img { max-width:300px; height:auto;}
.pro-de-img h3 { text-align:center; color:#3FF;}

/***** 表單預設文字顏色設定 *****/
/* 通用 */
::-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; }

li.sub-link a { border-left:3px #779056 solid; padding-left:10px !important;}


.login-360 { max-width:360px; margin:0 auto; padding:50px 0;}
.login-box { padding-bottom:20px;}
.in-style { border:1px #CCCCCC solid; padding:3px 8px; margin-bottom:10px; border-radius:5px; width:100%; display:block; font-size:16px; line-height:1.6em;}
.login-360 .note { font-size:16px; color:#FC0; line-height:1.6em;}
.btn-login { display:block; width:100%; background:#C00; font-size:14px; color:#ffffff; border-radius:5px; line-height:1.6em; padding:6px 10px; overflow:hidden; text-align:center; letter-spacing:3px;}
.btn-login:hover { background:#F90;}