@charset "utf-8";
/*
	1. $Reset
	2. $body,html
	3. $共用
	4. $架構
*/

/* $Reset
--------------------------------------------------------------------------------------*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}

/* $body,html
--------------------------------------------------------------------------------------*/
html,
body {
    width: 100%;
    min-width: 1024px;
    background: url(../images/bg.png) repeat center;
    overflow-x: hidden;
    font-family: Arial,"微軟正黑體","新細明體","蘋果儷黑體",  Verdana, Helvetica, sans-serif;}


/* $共用
--------------------------------------------------------------------------------------*/
/*----清除浮動技巧----*/
.clearfix:before,
.clearfix:after {content: " ";display: table;}
.clearfix:after {clear: both;}
.clearfix {*zoom: 1;}
/*----清除浮動技巧----*/





/*______________________________________________________________________________________
	
	 								CSS  Contenter
________________________________________________________________________________________*/

.wrapper{position: relative; width: 100%; }
.top{width: 100%; background: #f6f6f6; padding: 50px 0; }
.area{ width: 1024px; margin: 0 auto; }
.float_L{ float: left; width: 50%; }
.float_R{ float: right; width: 50%;}
.mainA h1{ font-size: 30px; color: #383838; line-height: 2em; }
.mainA{ width: 423px; margin: 50px auto 0 auto; }
.mainA p{ font-size: 16px; letter-spacing: 1px; color: #383838; }
h2{ font-size: 26px; text-align: center; color: #f6881a; margin: 50px 0;  }
.sort{width: 100%; border-bottom:1px solid #f6881a; }
.region{display: block; width: 142px; margin: 0 auto; padding: 8px 0; text-align: center; color: #fff; font-weight: bold; background: #f6881a; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px;}

ul.container { /* display: flex; */ display: block;/* flex-direction: row; */ box-sizing: border-box; margin: 40px 0; }
ul.container li.item{  /* flex-grow: 3; */ position: relative; margin: 20px auto;width: 33%; height: 212px;   display: inline-block; vertical-align: top;  }
ul.container li.item:after{position: absolute; content: ""; right: 0; top: 0; width: 1px; height: 100%; background: url("../images/line.gif") repeat-y left top; -webkit-background-size:contain; -moz-background-size:contain; background-size:contain; }
ul.container li.item a{border: 1px solid #fff; -webkit-transition: all .4s cubic-bezier(0.215, 0.61, 0.355, 1); -moz-transition: all .4s cubic-bezier(0.215, 0.61, 0.355, 1); -o-transition: all .4s cubic-bezier(0.215, 0.61, 0.355, 1); transition: all .4s cubic-bezier(0.215, 0.61, 0.355, 1); }
ul.container li.item a:hover{ border: 1px solid #e7e7e7; }
ul.container li.item a .logo,ul.container li.item a .name{-webkit-transition: all .4s cubic-bezier(0.215, 0.61, 0.355, 1); -moz-transition: all .4s cubic-bezier(0.215, 0.61, 0.355, 1); -o-transition: all .4s cubic-bezier(0.215, 0.61, 0.355, 1); transition: all .4s cubic-bezier(0.215, 0.61, 0.355, 1);  }
ul.container li.item a:hover .logo{  opacity: 0.9;  -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
ul.container li.item a:hover .name{ color: #f6881a; }
ul.container li.item:nth-child(3n):after{ display: none; }
ul.container li a{width: 95%; margin: 0 auto; display: block; text-decoration: none; color: #5c5c5c;  padding: 0 20px 30px 20px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;  }

.logo{ display: block; text-align: center;      line-height: 85px;  vertical-align: middle; height: 85px; } 
.name{ font-size: 16px; font-weight: bold; color: #383838; margin: 10px 0; display: block; text-align: center; }
.font{ font-size: 14px; color: #5c5c5c; text-align: left;   width: 100%; }
.logo img{ vertical-align: middle; }




ul.container li.item2{ width: 100%; }
ul.container li.item2 a .name,ul.container li.item3 a .name{
-webkit-transition: all .4s cubic-bezier(0.215, 0.61, 0.355, 1);
-moz-transition: all .4s cubic-bezier(0.215, 0.61, 0.355, 1);
-o-transition: all .4s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: all .4s cubic-bezier(0.215, 0.61, 0.355, 1);}
ul.container li.item2 a:hover .name,ul.container li.item3 a:hover .name{ color: #f6881a; }



ul.container li.item3{ width: 49%; display: inline-block; vertical-align: top; }
ul.container li.item3 a{ padding: 5px 0; }

div.tw_block{ margin: 5px 0; }
ul.container li.item3 a{ padding: 0; margin: 0px 0; }

footer{ text-align: center; padding: 10px 0; font-size: 13px; color: #fff; background: #f6881a; }