@charset "utf-8";
@font-face {  font-family: BebasNeue; src: url(../font/BebasNeue.otf);}
html { min-height:100%;}
body { background: #eeeeee; margin:0; padding:0; min-height:100%; font-family:Microsoft JhengHei; position:relative; font-size:16px; position:relative;}
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; position:relative; z-index:0; padding:0 0 0px 0;}
.main-box { max-width:1200px; margin:0 auto;  }
.left-bg { position:absolute; top:0; left:0; width:auto; height:auto; z-index:1; }
#gotop { position:fixed; right:10px; bottom:40px; background:rgba(0,0,0,0.6); width:48px; height:48px; text-align:center; line-height:48px; color:#ffffff; font-size:14px; cursor:pointer;}
#gotop { background:rgba(0,0,0,1); }

/** 首頁 **/
.index-text-m { position: absolute;  width:365px; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 100; }
.index-text-m img { height: auto; width: 100%; max-width:250px; margin:0 auto 20px auto; display: block;  }
.index-note { color: #ffffff; font-family:Microsoft JhengHei;}

.col-mid {
	display: -webkit-flex;
    display:flex;
    -webkit-align-items: center;
            align-items: center;
    -webkit-justify-content: center;
            justify-content: center; 
}
.col-01 { -webkit-flex: 1;  flex: 1;  }
.index-enter { padding: 15px 0;}

.index-enter a { display: block; color: #C7C7C7; text-decoration: none; background: rgba(0,0,0,0.5); font-family: engraversGothic, Microsoft JhengHei; font-size: 16px; padding: 5px 15px; max-width: 150px; margin: 0 auto; color: #C7C7C7; border: 1px #5E5E5E solid; text-align: center;  transition: all 0.3s ease 0s; }
.index-enter a:hover { background: rgba(0,0,0,0.9); transition: all 0.3s ease 0s; color: #ffffff; border: 1px #ffffff solid; }

@keyframes fadeOut {
  from {  opacity: 0; }
  to { opacity: 1; }
}

body.index {   animation-duration: 3s;  animation-name: fadeOut;}
body {  animation-duration: 2s;  animation-name: fadeOut;}
.index-banner { position:absolute; top:0; left:0; width:100%; height:100%;}
.index-banner-box { position:relative; width:100%; height:100%;}
.map-box { background: #CCC; padding:5px; width:100%; height:470px;}



.index-lis { }
#myMenu { }
#myMenu ul { list-style: none; margin:0; padding:10px 0;}
#myMenu ul li { float:left; width:20%; text-align:center; border-left:5px #c23b42 solid; cursor:pointer; font-size:18px;}
#myMenu ul li.active { color:#c23b42; border-left:5px #F93 solid;}
#myMenu ul li:hover { color: #F93;}
#myBox .box { display:none;}

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

.item-lis .photo { position: relative; float:left; width:200px; background-position:center; background-repeat:no-repeat; background-size:cover; }
.item-lis .photo:after { content:""; display:block; width:100%; height:0; padding-bottom:70%;  }
.item-lis .photo:hover { opacity:0.8;}
.item-lis .photo a { display:block; width:100%; height:100%; position:absolute; top:0; left:0;}
.item-lis .item-info { margin-left:210px;}
.item-lis .item-info span.time { color:#F00; font-size:16px;}
.item-lis .item-info h3 { margin:0; padding:5px 0; font-size:18px; font-weight:normal;}
.item-lis .item-info p { margin:0; padding:0; font-size:14px; line-height:1.6em; height:4.8em; color:#999; overflow:hidden; }
.index-lis .box .more-btn { text-align:right;}
.index-lis .box .more-btn a { display:inline-block; color:#f35b07; vertical-align:middle;}
.index-lis .box .more-btn a img { display:inline-block; height:16px; width:auto; vertical-align:middle;}
.index-lis .box .more-btn a:hover { color: #36C;}

.index-video {  }
.index-video h3 { padding-left:10px; border-left:5px #077c8d solid; font-size:18px; font-weight:normal; margin:10px 0; padding:0 0 0 10px;  }
.index-video .video-box { height:340px; }
.index-video .video-box iframe { border:1px #CCCCCC solid; padding:7px; }
.index-video .more-btn { text-align:right; }
.index-video .more-btn a { display:inline-block; color:#f35b07; vertical-align:middle;}
.index-video .more-btn a img {  display:inline-block; height:16px; width:auto; vertical-align:middle;}
.index-video .more-btn a:hover { color: #36C;}

.i-features { padding:20px 0;}
.i-features .item { float:left; width:25%;}
.i-features .item a {}
.i-features .item a:hover { opacity: 0.8;}
.i-features .item img { width:100%; height:auto;}


.i-tool { padding:20px 0;}
.i-tool .item { float:left; width:33.33%; position:relative;}
.i-tool .item span {display:block; width:100%; height:0; padding-bottom:53%; }
.i-tool .item a { position:absolute; top:0; left:0; width:100%; height:100%; color:#4C4B4C; font-size:18px;
  display: -webkit-flex;
  display:         flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
}
.i-tool .item a img { width:36px; height:auto; margin-right:5px;}
.i-tool .item a:hover { opacity: 0.8;}
.i-tool .item img { width:100%; height:auto;}
.i-tool .icon01 { background:#e5ced4;}
.i-tool .icon02 { background:#e0d9fa;}
.i-tool .icon03 { background:#84d4f5;}
.i-tool .icon04 { background:#b0efe4;}
.i-tool .icon05 { background:#f9f9df;}
.i-tool .icon06 { background:#f4c2c5;}

/*  header */
header .top-cont { position:relative; max-width:1200px; margin:0 auto 0px auto; z-index:100;}
header .top-cont .logo { float:left;}
header .top-cont .logo a { display:inline-block; padding:5px 0;}
header .top-cont .logo img { width:150px; height: auto;}
.logo-m { display:none;}

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 { background:#EDAF32; list-style:none; padding:10px 0px; margin:0; margin-left:180px; text-align:right;}
ul.top-tool li { display:inline-block;}
ul.top-tool li a { display:block; padding:0 10px; color:#ffffff; font-size:14px; line-height:24px; border-right:1px #ffffff solid;}
ul.top-tool li a:hover { color: #FF6;}
ul.top-tool li img { height: auto; width:24px; margin-right:3px;}
ul.top-tool li.icon { margin:0 2px;}
ul.top-tool li.icon a { display:inline-block; width:24px; border-right:0; padding:0;}
ul.top-tool li.icon a img { width:100%; height:auto; }

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) top center no-repeat; background-size: contain; padding:0px; margin:0 10px 0 5px; line-height:99em; border:0; cursor:pointer; height:24px; overflow:hidden;}

#top-bar{ position:fixed;top:0; left:0; width:100%; z-index:999;}





#top-bar{ position:fixed;top:0; left:0; width:100%; z-index:999;}


/*  nav  */
nav { background:#2285A0; margin-left:180px; padding:0px;}
.menu { margin:0; padding:0; list-style:none; text-align:center;}
.menu>li { color:#333333; font-size:14px; position:relative; display:inline-block;} 
.menu>li>a { display:block; color:#ffffff; padding:2px 15px; margin-right:3px; text-align:center; letter-spacing:1px; position:relative;}
.menu>li>a:hover, .menu>li.active a { color: #FF9;}
.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: rgba(34,133,160,0.8); opacity:0; position:absolute; left:0px; top:50px; width:100%; 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:#ffffff; 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:31px; transition: all 0.3s ease 0s; visibility: visible; }
.menu>li.icon { padding:0 15px; border-right:0;}
.menu>li.icon>a { display: inline-block; margin:0 5px 0 0; padding:0; vertical-align:top; width:22px; height:22px; border-radius: 99em; overflow:hidden; }
.menu>li.icon>a img { width:100%; height:auto; }

.menu>li:after {content:"";  position:absolute; right:0; top:50%; margin-top:-8px; width:1px; height:16px; border-right:1px #ffffff solid;}
.menu li:last-child:after { display:none;}
.menu>li.icon>a:after { display:none;}


.Related-link {}
.Related-link a { display:block; margin-bottom:5px;}
.Related-link img { width:100%; height:auto;}

li.m-tool { display:none;}




/* 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 { width:23%; margin:1%; float:left; overflow:hidden; border-radius:7px; transition: all 0.3s ease 0s;}
.news-list ul li:hover {transition: all 0.3s ease 0s; }
.news-list ul li .photo { width:100%; background-size:cover; background-position:center; background-repeat:no-repeat; position:relative; overflow:hidden; border-radius:5px;}
.news-list ul li .photo a, .news-list ul li .photo span { display:block; width:100%; padding-bottom:100%; height:0; background-size:cover; position:relative; z-index:10;}
.news-list ul li .photo a:hover, .news-list ul li .photo span:hovr { opacity:0.8;} 
.news-list ul li .photo .info { background:rgba(0,0,0,0.8); display:flex; position:absolute; width:100%; top:0; bottom:0; text-align:center; opacity:0; color: #ffffff; padding:10px;
display:flex; text-align:center;
-webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
   z-index:1;
   transition: all 0.5s ease 0s;
   position:0;
}
.news-list ul li:hover .photo .info { opacity:1; transition: all 0.5s ease 0s;}
.news-list ul li .photo .info span.time { color: #ffffff; font-size:16px; display:block; line-height:1.2em; padding:5px 0; }
.news-list ul li .photo .info p { margin:0; padding:0;  max-height:2.8em; line-height:1.4em; overflow:hidden; text-align:left; }
.news-list ul li .photo .info .more { font-size:12px; display: none; color: #ffffff; padding-top:5px;}
.news-list ul li span.name { display:block; line-height:1.6em; height:3.2em; overflow:hidden; font-size:14px; margin-top:8px;}

.news-cont { position:relative; z-index:10; padding-bottom:10px;}
.news-title { font-family:"Times New Roman", Microsoft JhengHei; font-size:24px; margin:0 0 10px 0; padding:10px 0; color:#333; font-weight:normal; border-bottom:1px #999999 dotted;}
.news-time { font-size:14px; margin:0 0 10px 0; color:#a8a69c; font-weight:normal; }
.news-content { font-size:14px; line-height:1.6em; padding:0px 0; color:#3a3a3a;}
.news-content img { display:block; width:auto; height:auto; max-width:100%; margin-bottom:10px;}

.news-list02 { }
.news-list02 .lis-item { border-bottom:1px #dfdfdf solid; padding:10px 0; }
.news-list02 .lis-item:last-child { border-bottom:0;}
.news-list02 .lis-item h4 { padding:0 0 5px 0; margin:0; font-size:18px;}
.news-list02 .lis-item h4 a { color:#000000; display:block; }
.news-list02 .lis-item h4 a:hover { color: #66C; }
.news-list02 .lis-item p { padding:0 0 10px 0; margin:0; font-size:16px; color:#999;}
.news-list02 .lis-item .time { display:block; font-size:14px; color:#ea0718; padding-bottom:5px;}
.news-list02 .lis-item .more { text-align:right;}
.news-list02 .lis-item .more a { display:inline-block; color:#2286a0; font-size:14px; }
.news-list02 .lis-item .more a:hover { color:#000000;}



.news-list03 { }
.news-list03 .lis-item { border-bottom:1px #dfdfdf solid; padding:10px 0; }
.news-list03 .lis-item:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}/* Hides from IE-mac \*/
* html .news-list03 .lis-item {height: 1%;}/* End hide from IE-mac */
.news-list03 .lis-item .photo { float:left; width:200px; background:#ffffff; padding:5px; }
.news-list03 .lis-item .photo a { display:block; background-position:center; background-size:cover;}
.news-list03 .lis-item .photo a span { display:block; width:100%; height:0; padding-bottom:75%;}
.news-list03 .lis-item .info { margin-left:210px;}
.news-list03 .lis-item:last-child { border-bottom:0;}
.news-list03 .lis-item .info  h4 { padding:0 0 5px 0; margin:0; font-size:18px;}
.news-list03 .lis-item .info  h4 a { color:#000000; display:block; }
.news-list03 .lis-item .info  h4 a:hover { color: #66C; }
.news-list03 .lis-item .info  p { padding:0 0 10px 0; margin:0; font-size:16px; color:#999;}
.news-list03 .lis-item .info  .time { display:block; font-size:14px; color:#ea0718; padding-bottom:5px;}
.news-list03 .lis-item .info  .more { text-align:right;}
.news-list03 .lis-item .info  .more a { display:inline-block; color:#2286a0; font-size:14px; }
.news-list03 .lis-item .info  .more a:hover { color:#000000;}


.download-list { }
.download-list .lis-item { border-bottom:1px #dfdfdf solid; padding:10px 0; }
.download-list .lis-item:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}/* Hides from IE-mac \*/
* html .download-list .lis-item {height: 1%;}/* End hide from IE-mac */
.download-list .lis-item:last-child { border-bottom:0;}
.download-list .lis-item .icon { float:left;  }
.download-list .lis-item .icon a { display:block; background:#2286a0; color:#FFF; padding:10px; width:110px; font-size:12px; line-height:30px; text-align:center; border-radius:5px;}
.download-list .lis-item .icon a:hover { background:#69F;}
.download-list .lis-item .info { margin:0 0 0 120px;}
.download-list .lis-item h4 { margin:0; padding:0;}
.download-list .lis-item h4 a { color:#000000; display:block; }
.download-list .lis-item h4 a:hover { color: #66C; }
.download-list .lis-item p { padding:0 0 10px 0; margin:0; font-size:16px; color:#999;}
.download-list .lis-item .time { display:block; font-size:14px; color:#ea0718; padding-bottom:5px;}
.download-list .lis-item .more { text-align:right;}
.download-list .lis-item .more a { display:inline-block; color:#2286a0; font-size:14px; }
.download-list .lis-item .more a:hover { color:#000000;}



.video-list {}
.video-list ul { list-style:none; padding:10px 0; margin:0 -1%;}
.video-list ul:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}/* Hides from IE-mac \*/
* html .video-list ul {height: 1%;}/* End hide from IE-mac */
.video-list ul li { float:left; width:48%; margin:1%; }
.video-list ul li .box { width:100%; position:relative; }
.video-list ul li .video-box { display:block; width:100%;}
.video-list ul li .video-box span { display:block; width:100%; height:0; padding-bottom:56%; }
.video-list ul li .video-iframe { position:absolute; top:0; left:0; width:100%; height:100%;}
.video-list ul li h3 { padding-left:10px; border-left:3px #666666 solid; font-size:18px; font-weight:normal; margin:10px 0; line-height:1.2em; height:2.4em; overflow:hidden;} 


.works-photo-lis { }
.works-photo-lis img { max-width:100%; width:100%; height:auto; display:block; margin-bottom:15px; }

.page-chage { position:relative; max-width:150px; margin:0 auto; text-align:center; font-size:12px; line-height:30px;}
.page-chage a { display:block; border:1px #CCCCCC solid; color:#cccccc; width:30px; height:30px; line-height:28px; font-size:16px; text-align:center;}
.page-chage a.prev { float:left;}
.page-chage a.next { float:right; }
.page-chage a:hover { background:#666666; border:1px #666666 solid; color:#ffffff; }

/*  banner  */
.banner { }

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

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

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

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

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

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

/*  content  內文  */
.font-title { font-size:30px; margin:0 0 10px 0; padding:0; color:#333; font-weight:normal;}
.font-title-02 { font-size:18px; margin:0px 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;}

.contact-cont { font-size:14px; line-height:1.4em; }
.contact-cont>div { padding-bottom:10px;}
img.contact-icon { width:16px !important; height:auto !important; display:inline-block; vertical-align: middle; margin-right:5px;}

/*  left-menu  */
.left-menu-title { background:#386ba4; padding:7px 10px; text-align:center; color:#ffffff;}
.left-menu { background:#d6d8d7; margin:48px 0 0 0; padding:10px; list-style:none; }
.left-menu>li { }
.left-menu>li>a, .left-menu>li>span { display:block; padding:8px; color: #4d4f4e; font-size:14px; border-bottom:1px #46bddc solid; text-align:center;}
.left-menu>li>a:hover, .left-menu>li.active>a, .left-menu>li.active>span { background:#2286a0; 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 0px;}
.sub>li>a:hover { background:#09C; color:#ffffff;}

.slicknav_nav .sub>li>a, .sub>li>span { background:#F63; color:#ffffff; border-bottom:1px #FFFF99 dotted;}

/*  page  */
.page-box {  overflow:hidden; padding-top:5px; }
.page-title { position:relative; max-width:1200px; margin:0 auto;}
.page-title img { width:100%; height:auto;}
.page-title h3 { font-weight:normal; font-size:28px; margin:0; padding:10px 0px 10px 0px; position:absolute; top:50%; margin-top:-45px; left:10%;}
.page-title h3 span {  font-size:22px; color:#000000; display:block;}
.page-box .content-box { min-height:300px; padding: 0px; position:relative;}
.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:24px; font-weight:normal; color:#333333; margin:0; padding:10px 0px; line-height:1.2em; border-bottom:4px #2286a0 solid;}
.sub-title img { padding-right:5px; vertical-align:middle;}



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


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






/* 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-news  */
.i-news { padding:10px 0 10px 0;}
.i-news-title { position:relative; margin-bottom:20px;}
.i-news-title h3 { background:#ffffff; margin:0; padding:0 15px 0 0; font-size:60px; color:#386ba4; font-weight:bold; letter-spacing:-2; display:inline-block; z-index:1; position:relative;}
.i-news-title>span { border-bottom:2px #386ba4 solid; position:absolute; top:48px; left:0; display:block; width:100%; z-index:1;}
.i-news-title a.more-link { position:absolute; right:0; top:27px; color:#386ba4; font-size:16px; z-index:5; background:#ffffff; padding:10px 0 10px 10px;}
.i-news-title a.more-link:hover { color:#39F;}
.i-news .list { width:100%; padding:0; list-style:none; margin:0;}
.i-news .list li { width:19%; float:left; margin:0 0.5% 10px 0.5%; height:330px; overflow:hidden;}
.i-news .list li .cover { background-size:cover; background-position:center; background-repeat:no-repeat; }
.i-news .list li .cover a { display:block; padding-bottom:70%; width:100%;  height:0;}
.i-news .list li h3 { color:#386ba4; margin:0; padding:10px 0 0 0; font-size:18px; }
.i-news .list li p { margin:0; padding:10px 0; font-size:14px; color:#666; }

/* links */
.links { background:#ffffff;border-top:1px #4c4c4c solid; position:relative; margin-top:40px;}
.links .link-title { background:#ffffff; position:absolute; top:-15px; left:50%; margin:0 0 0 -60px; line-height:30px; width:120px; font-size:18px; font-weight:normal; text-align:center; padding:0; border:1px #4c4c4c solid; letter-spacing:2px;}
.link-box { text-align:center; padding:20px; position:relative; padding-bottom:20px; }
.links a { display:inline-block; width:120px; height:120px; background-position:center; background-size:cover; background-repeat:no-repeat; margin:10px;  border-radius:5px; overflow:hidden;}

.links a.more-btn { position:absolute; right:10px; bottom:10px; display: inline-block; height:auto; width:auto; font-size:14px; color:#69C; margin:0; padding:5px; }
.links a.more-btn:hover { color:#F03;}

/* footer */
footer { background:#E8E8E8; padding:0px 0 0px 0; margin:10px 0 0 0;}
.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:#020707; 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 { 
  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:#ffffff; margin:0 auto; padding:10px 5px; font-size:14px; -webkit-flex: 1;flex: 1; line-height:1.6em;}
.foot-info h3 { margin:0 0 5px 0; padding:0 0 5px 0;}
.foot-info h3 a {color:#175782; border-left:0; padding:0; margin:0;}
.foot-info a { color:#000000; display:block; padding:0 0 0 10px; margin-left:8px; border-left:1px #999999 solid;}
.foot-info a:hover { color: #66C;}

.foot-compy-info { background:#2285A0; padding:15px;}
.foot-compy-info .box { max-width:1200px; margin:0 auto;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	    -ms-flex-wrap: wrap;
	        flex-wrap: wrap;}
.foot-compy-info .box>div { font-size:14px; line-height:1.8em; color:#ffffff;  -webkit-flex: 1;flex: 1; }
.foot-compy-info .box>div a { color:#ffffff; padding:3px 10px 3px 0; display:inline-block;}
.foot-compy-info .box>div a:hover { color:#FF9;}
.foot-compy-info .box>div img { width:20px; height:auto;}

.foot-compy-info .box>div.company { -webkit-flex: initial;  flex: initial; width: 250px;}
.foot-compy-info .box>div.company h3 { padding:0; margin:0 0 5px 0; font-weight:normal; font-size:20px;}
.foot-compy-info .box>div.qr-code { -webkit-flex: initial;  flex: initial; width: 100px; min-width: 100px;}
.foot-compy-info .box>div.qr-code img { width:100%; height:auto;}
.foot-compy-info .box>div .Community-icon a img { width:36px; height:auto; }

.copyright { background: #175782; 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;}

.btn-title { display:block; padding:10px; text-align:center; cursor:pointer; transition: all 0.3s ease 0s;}
.btn-title:hover { background:#3CC; color:#ffffff; transition: all 0.3s ease 0s;}

.footer-menu .footer-menu-box { display:none; }

/* form */
.contact-mail { padding-top:20px; border-top:1px #CCC dotted; margin-top:10px;}

.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;}
.form .form-lis input.data { border:0; width:100%; font-size:14px; font-family:Microsoft JhengHei; border:1px #ececec solid; }
.form .form-lis textarea.data { border:0; width:100%; font-size:14px; font-family:Microsoft JhengHei;  border:1px #ececec solid;}
.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; }

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

/* bookmark */
.bookmark { background:#2286a0; text-align:center; font-size:14px; padding:10px 0; color:#ffffff; margin:0px 0 5px 0;  border-radius:0 0 5px 5px;}
.bookmark a { background:#ffffff; display:inline-block; border:0; padding:5px 10px; color: #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:0;}

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

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