@charset "utf-8";
/* CSS Document */

/*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, img, ins, kbd, q, s, samp,
small, strike, strong, 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,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}
html{
	height:100%;
}
body {
	line-height: 1.5em;
	font-family:Arial,微軟正黑體,Microsoft JhengHei,新細明體,sans-serif;
	height:100%;
	font-size:16px;
}
strong{
	font-weight:bold;
	color:#940000;
	font-size: 1.2em;
    line-height: 2em;
    letter-spacing: .1em;
}
ol, ul, li {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

/*start*/
header{
height: 93px;
    width: 100%;
    position: absolute;
	background-color:#FFFFFF;
    z-index: 990;
    box-shadow: 0 1px 10px rgba(0,0,0,.3);
    background-image: url(images/crossword.png);
}
img{
	max-width:100%;
	height: auto !important;
}
nav{
	width:100%;
	margin:0 auto;
}
nav ul{
	position: absolute;
    right: 7%;
	padding-top: 17px;
}
nav ul li{
	display:inline;
}
nav ul li a{
	padding:0 .8em;
	color:#888888;
	letter-spacing:.1em;
	display: inline-block;
}
.navBox{
	width:1170px; 
	margin:0 auto;
	position: relative;
}

.language{
	font-size:.8em;
	position: absolute;
    right: 2%;
    top: 35px;
}
.language a{ 
	font-size:.8em;
	transition:all .3s ease;
}
.language a:hover{
	color:#e4e4e4;
}
*:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.btn{
	width:55px; 
	height:55px; 
	line-height: 105px;
	background-image:url(images/header-icon.png); 
}
.btn1{
	background-position:-6px 0;
	transition: opacity .3s ease;
	opacity:1;
}
.btn1:hover{
	opacity:0;
}
.btn1hover{
	background-position:-62px 0;
	position:absolute;
	top:17px;
	transition: opacity .3s ease;
	opacity:0;
}
.btn1hover:hover{
	opacity:1;
}
.btn1hover:after{
	font-size:.8em;
	content:"關於勝林";
	width:100px;
	position:absolute;
	top:10px;
	left: -2px;
}
.btn2{
	background-position:-118px 0;
	transition: opacity .3s ease;
	opacity:1;
}
.btn2:hover{
	opacity:0;
}
.btn2hover{
	background-position:-174px 0;
	position:absolute;
	top:17px;
	transition: opacity .3s ease;
	opacity:0;
}
.btn2hover:hover{
	opacity:1;
}
.btn2hover:after{
	font-size:.8em;
	content:"服務項目";
	position:absolute;
	top:10px;
	width:100px;
	left: -2px;
}
.btn3{
	background-position:-229px 0;
	transition: opacity .3s ease;
	opacity:1;
}
.btn3:hover{
	opacity:0;
}
.btn3hover{
	background-position:-285px 0;
	position:absolute;
	top:17px;
	transition: opacity .3s ease;
	opacity:0;
}
.btn3hover:hover{
	opacity:1;
}
.btn3hover:after{
	font-size:.8em;
	content:"服務團隊";
	position:absolute;
	top:10px;
	width:100px;
}
.btn4{
	background-position:-341px 0;
	transition: opacity .3s ease;
	opacity:1;
}
.btn4:hover{
	opacity:0;
}
.btn4hover{
	background-position:-397px 0;
	position:absolute;
	top:17px;
	transition: opacity .3s ease;
	opacity:0;
}
.btn4hover:hover{
	opacity:1;
}
.btn4hover:after{
	font-size:.8em;
	content:"環保新聞";
	position:absolute;
	top:10px;
	width:100px;
}
.btn5{
	background-position:-452px 0;
	transition: opacity .3s ease;
	opacity:1;
}
.btn5:hover{
	opacity:0;
}
.btn5hover{
	background-position:-508px 0;
	position:absolute;
	top:17px;
	transition: opacity .3s ease;
	opacity:0;
}
.btn5hover:hover{
	opacity:1;
}
.btn5hover:after{
	font-size:.8em;
	content:"常見問題";
	position:absolute;
	top:10px;
	width:100px;
	left: -2px;
}
.btn6{
	background-position:-563px 0;
	transition: opacity .3s ease;
	opacity:1;
}
.btn6:hover{
	opacity:0;
}
.btn6hover{
	background-position:-619px 0;
	position:absolute;
	top:17px;
	transition: opacity .3s ease;
	opacity:0;
}
.btn6hover:hover{
	opacity:1;
}
.btn6hover:after{
	font-size:.8em;
	content:"聯絡我們";
	position:absolute;
	top:10px;
	left:-2px;
	width:100px;
}
#icon2{
    height: 100%;

}
#icon2 ul{
	border-bottom: #999999 1px dotted;
	padding-bottom: 50px;
	padding-left:120px;
}
#icon2 ul li{
    display: inline-block;
	width:98px; 
	height:120px; 
	position:relative;
	padding: 25px;
}
#icon2 ul li a{
	color:#000000;
}
.icon2btn{
	width:95px; 
	height:95px; 
	line-height: 110px;
	background:url(images/sersive-icon.png) no-repeat; 
}

.serviceTitle{
    font-weight: bold;
    color: #940000;
    font-size: 1em;
    letter-spacing: 0em;
}
#logo{
	margin-top:0;
	padding-left: 75px;
	float:left;
}
#logo img{
	margin: 3% 0;
}
#logo-s{
	float:none;
	margin:0 auto;
	text-align:center;
	display:none;
}
#logo-s img{display:none;}

.logo-s{margin:0 auto;}

a{
	color:#000000;
	font-size:16px;
	text-decoration:none;
}
p{
	
	font-size:.95em;
	color:#000000;
	line-height:1.4em;
}
p a{
	
	font-size:18px;
	color:blue;
	line-height:1.5em;
	text-decoration:none;
}
em{
	color:#ff0000;
	font-size:1em;
}
h5{
    color: #00612E;
    font-size: 1.3em;
    font-weight: bold;
    letter-spacing: .1em;
    float: left;
}
.indexMore a{
    position: absolute;
    right: 5%;
    bottom: 5%;
    font-weight: bold;
    color: #00612E;
}
.indexMore a:hover{
	color: #00933F;
}
.circle{
	border-radius: 100%;
    width: 1.4em;
    height: 1.4em;
    background: #00612E;
    float: left;
    position: relative; 
}
.circle:after{
	content: "";
    position: absolute;
    right: 22%;
    top: 25%;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-left: 10px solid white;
    border-bottom: 5px solid transparent;
}

#mobile{
	display:none;
}
#mobile a{
	color:#000;
	font-size:18px;
	letter-spacing:2px;
	line-height: 31px;
}
.mobileTop{
	margin-top:2px;
}
#wrapper{
    min-height: 100%;
    position: relative;
}
#indexBg{
    min-height: 100%;
    position: relative;
    background-image: url(images/subtle_freckles.png);
    background-position: center;
}

.item{
	width:auto;
	height:39px;
	padding:15px 0 0 0;
	background-color: rgba(167, 214, 228, 0.95);
    cursor:pointer;
    text-align:center;
    border: 1px #FFFFFF dotted;
    transition: all .2s ease;
    max-width: 100%;
}
.item:hover{
    background-color: rgba(190, 227, 239, 0.95);
}
.aa_item{
	position:absolute;
	left:0px; 
	cursor:pointer;
	z-index: 9999;
}
#banner{
	max-width:100%;
	text-align:center;
	margin:0 auto;
	padding-top: 93px;
}
#banner_s{
	display:none;
}
#content{
	margin:0 auto;
	overflow: hidden;
}
#navlist_mobile{
	display:none;
	background-color: #3D3D3D;
}
footer ul{
	box-sizing: border-box;
	padding-left:30px;
}
footer ul li{
	background: url(images/icon_mobile.png) no-repeat left;
	border-bottom:1px #000000 dashed;
	height:55px;
	box-sizing: border-box;
	padding:20px 0 0 30px;
}
footer ul li a{
	color:#FFFFFF;
}
#content_right{
	padding-top: 75px;
	padding-bottom: 40px;
}
#navlist ul li{
  	background:url(images/icon.png) no-repeat left;
 	padding:0 0 0 20px;
}
footer{
	background-color:#2E8B57;
	width:100%;
	position: absolute;
    /*bottom: 0;*/

}
#keyBg{
	background-color:#D3D3D3;
	height:100%;
	width:100%;
}

#foot{
	width:100%;
	color:#ECECEC;
	line-height:1.4em;
	font-size: 0.8em;
}
#foot a{
	color:#C1C1C1;
	transition:all .5s ease;
	font-size: .9em;
}
#foot a:hover{
	color:#a7e7f7;
}
.footbox{
	width: 1065px;
	margin: 0.5em auto;
}
.footTxLt{
    display: inline-block;
}
.footTxRt{
	padding-left: 30px;
    display: inline-block;
    letter-spacing: .08em;
    padding-top: 8px;
    vertical-align: top;
    width: 400px;
}
.footTx{
	display: inline-block;
}
.qrcode{
	margin-top: 2px;
	display: inline-block;
	vertical-align: top;
	padding-right: 10px;
}
.copyright{
	font-size: .9em;
}
.hot{
	height:auto;
	margin:0 auto;
	float:left;
	width: 1200px;
}
.about{
    font-size: 1.7em;
    padding-top: 5%;
    letter-spacing: .1em;

    color: #0080CE;

    animation:fadeIn .4s ease-in-out 1;
}
hr{
	color: #22ACFF;
    height: 2px;
    background-color: #22ACFF;
    border: 0px;
}
.fadeinContent{

}
/*BG*/
.bg{
    position: fixed;
    background-attachment: scroll;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;

    background-position: center;
    z-index: -1;
}
#aboutBg{
	background-image: url(images/about_bg.jpg);
	background-position: center 60px;
}
#newsBg{
	background-image: url(images/subtle_freckles.png);
	background-position: center center;
}
#fiberBg{
	background-image: url(images/fiber_bg.jpg);
}
#logisticBg{
	background-image: url(images/logistic_bg.jpg);
}
#inquireBg{
	background-image: url(images/inquire_bg.jpg);
}
#contactBg{
	background-image: url(images/contact_bg.jpg);
}
/*index*/
#index_margin{
	width:1200px;
	margin:0 auto;
}
.indexBox{
	width:1500px; 
	margin:0 auto; 
	padding: 0% 0 3% 0;

}
@keyframes fade{
	0%{opacity:0;}
	100%{opacity:1;}
}
.index4Box{
	width:265px; 
	height:300px; 
	background:#FFF; 
	margin:2% 1%; 
	display: inline-table; 
	border-top: #009966 8px solid;
	box-shadow: 2px 3px 3px rgba(0,0,0,.5);
	position:relative;
}
.BoxAbout{
	background-image:url(images/about.jpg);
	width:100%;
	height:100px;
	background-size:auto 100%;
    /*background-position: center center;*/
    transition:all .3s ease;
}
.BoxAbout:hover{
	-webkit-filter: saturate(3);
	filter: saturate(3);
}
.BoxText{
    line-height: 1.5em;
    margin: 3% 5%;
    font-size: .95em;
}
.BoxService{
	background-image:url(images/service.jpg);
	width:100%;
	height:100px;
	background-size:auto 100%;
    background-position: -50px;
    transition:all .3s ease;
}
.BoxService:hover{
	-webkit-filter: saturate(3);
	filter: saturate(3);
}
.BoxTeam{
	background-image:url(images/team.jpg);
	width:100%;
	height:100px;
	background-size:auto 100% ;
    background-position: center center;
    transition:all .3s ease;
}
.BoxTeam:hover{
	-webkit-filter: saturate(3);
	filter: saturate(3);
}
.BoxNews{
	background-image:url(images/news.jpg);
	width:100%;
	height:100px;
	background-size:auto 100% ;
    background-position: center center;
    transition:all .3s ease;
}
.BoxNews:hover{
	-webkit-filter: saturate(3);
	filter: saturate(3);
}
.BoxQa{
	background-image:url(images/qa.jpg);
	width:100%;
	height:100px;
	background-size:auto 100% ;
    background-position: right center;
    transition:all .3s ease;
}
.BoxQa:hover{
	-webkit-filter: saturate(3);
	filter: saturate(3);
}
.table{
	padding: 0 0 30px 30px;
}
.newtable1{
	height:100%; 
	line-height:33px;	
}
.newtable2{
	height:100%; 
	line-height:34px;	
}
.date{
	color:#1d609a;
	font-size:1em;
	padding: 0 0 0 10px;
	font-family:Arial, Helvetica, sans-serif;
	float:left;
  	width: 15%;
  	vertical-align: top;
}
.news{
	color:#323232;
	display: inline-block;
 	width: 75%;
}
.news a{
	color:#323232 !important;
	font-size:1em;
}
.news a:hover{
	color:#af1919 !important;
}
.news2{
	color:#323232;
	font-size:1em;
	padding-left:230px;
}
.page{
	width:280px;
	margin:50px auto;
	font-family:Arial, Helvetica, sans-serif;
	text-align: center;
}
.page a{
	color: #000000 !important;
    text-decoration: none;
    padding: 8px 13px;
    background-color: #e8e8e8;
    border-radius: 25px;
    font-family: Arial,微軟正黑體,Microsoft JhengHei,新細明體,sans-serif;
}
.page a:hover{
	background-color:#af1919;
	color:#FFFFFF !important;
	font-size:16px;
	text-decoration:none;
}
.spanpage a{
	background-color:#cecece;
	color:#FFFFFF;
}
.blue{
	color:#0087D8;
	line-height:1.4em;
	font-weight:bold;
}
.red{
	color: #0087D8;
	line-height:1.4em;
	font-weight:bold;
	font-size:1.2em;
}
.about_margin{
	margin:0 auto;
	width:1000px;
}

/*news*/
.news_margin{
	margin:0 auto;
	width:1000px;
}
.news_t{
	color:#940000;
	font-size:1.2em;

}
.news_img{
	float:left;
	margin-right:10px;
}
hr{
	width:100%;	
}
.back{
	color:#32495d;
	float:right;
	margin-top: 30px;
}
h1{
	color:#00612E;
	font-size: 1.6em;
	font-weight:bold;
	line-height:3em;
	letter-spacing:.2em;
}
h2{
	color:#000000;
	font-size:1.3em;
	line-height:2em;
	padding-bottom: 10%;
}
/*contact*/
.contact_margin{
	margin:0 auto;
	width:1000px;
}
.contact_margin iframe{
	width:100%;
	height:300px;
    padding: 5px;
    display: inline-block;
}
.contact_margin p{
	float: none;
    display: inline-block;
    width: 45%;
    margin-right: 10px;
}
.newsBox{
	background: url(images/arches.png);
}
.indexAboutBox img{
	width:50%;
	float:left;
}
.indexAboutText{
	width:50%;
	float:left;
	padding: 5% 5% 0 5%;
    box-sizing: border-box;
}
#indexfootimg{
	float:left;
	height:230px;
	position: relative;
}
.indexfoottext{
    color: #FFFFFF;
    font-size: 2.25em;
    text-align: center;
    position: absolute;
    top: 45%;
    left: 35%;
    letter-spacing: .3em;
}
input[type="text"]{
    background-color: #ffffff;
    border: 1px solid #cccccc;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border linear .2s, box-shadow linear .2s;
    -moz-transition: border linear .2s, box-shadow linear .2s;
    -o-transition: border linear .2s, box-shadow linear .2s;
    transition: border linear .2s, box-shadow linear .2s;
    width: 100%;
}
.contactBox{
	width:420px;
	height: 450px;
	display: inline-block;
    padding: 1%;
    vertical-align: top;
}
.contactBoxContent{
	width:100%;
	padding: 1% 0;
	float: left;
}

textarea{
	width:100%;
}
select{
	width:100%;
}
.contactTx{
	padding: 5px;
    display: inline-block;
    vertical-align: top;
    word-wrap: break-word;
    width: 45%;
}
.contactTx .contactTitle{
    font-weight: bold;
    letter-spacing: .1em;
    color: #CC1923;
    line-height: 2em;
    font-size: 1.2em;
}
.inquireBg{
	/*background-image:url(images/login.png); */
	width:974px; 
	height:612px;
	padding-top: 10%;
    box-sizing: border-box;
}
.InquireWhiteBg{
	width:487px; 
	height:300px; 
	background:rgba(255,255,255,.6); 
	margin:0 auto;
	padding-top: 5%;
    box-sizing: border-box;
}
.whiteBg strong{
	font-weight: bold;
    color: initial;
    font-size: initial;
    line-height: initial;
    letter-spacing: initial;
}
.loginBg{
	width:321px;
	height:145px;
	border:#00612E 3px solid;
	border-radius: 20px;
    background: #FFFFFF;
    margin: 0 auto;
}
.InquireWhiteBg p{
	color:#007330;
	font-weight:bold;
	padding-left: 17%;
}
.loginBox{
	width:270px;
    margin: 7% auto 0 auto;
	height:130px;
}
.loginFront{
	width:40%;
	float: left;
}
.loginBack{
	width:60%;
	float: left;
}
.loginBoxContent{
	width:90%;
	float: left;
	margin: 2% 0;
}
.loginBoxContent input{
	font-size:1em;
}
.loginBtn{
    background: #00612E;
    color: #FFFFFF;
    border-radius: 15px;
    width: 50px;
    height: 30px;
}
.loginBtn:hover{
	background: #00933F;
}
.loginBtnBox{
	margin:0 auto;
	width: 120px;
	padding-top: 80px;
}
.inquire_margin{
    width: 974px;
    margin: 0 auto;
}
.erp_margin{
	width:974px;
	margin:0 auto;
}
.erpBoxContent{
	width:50%;
	float:left;
	margin: 1% 0;
}
.erpFront{
	width:30%;
	float:left;
	display:inline-block;
}
.erpBack{
	width:50%;
	float:left;
	display:inline-block;
}
.erpBox{
	margin-left: 10%;
}
.erpBoxBtn{
	width:120px;
	margin:0 auto;
}
.erpBoxBtn input{
    margin-top: 20%;
}
.contactBtn{
	margin-bottom:10%;
}
.whiteBg{
	background: rgba(255,255,255,.92);
    padding: 0 3%;
    margin-top: 5%;
    padding-bottom: 2.5%;
    min-height: 600px;
}
.whiteBg a{
	font-size:16px;
	color:#af1919;

}
.whiteBg a:hover{
	color:#e64949;
}
.serviceBox{
padding:20px 30px 30px 30px; background:#fff;
}
.serviceBtn img{
max-width:100%; padding:10px 0;
}
.serviceBtnTitle{
font-size:2em; line-height:2em;
color:#000000;
}
.serviceBtnTitleS{
font-size:1.2em; line-height:2em;
}

.PSS {
    font-family: 微軟正黑體, aria, helvetica, sans-serif;
    color: #ffffff;
    text-align: left;
    line-height: 36px;
    background-color: #d7f0fd;
    border-radius: 40px;
    margin: 20px auto;
    height: auto;
    width: 100%;
    padding: 10px 0;
    display: inline-table;
}
.PSh1 {
    width: 80px;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    padding: 10px;
    float: left;
    height: 100%;
    color:#32495d;
}
.PSh2 {
    width: 80%;
    text-align: left;
    padding-left: 10px;
    border-left: 4px #ffffff double;
    font-size: 20px;
    color: #EBEAFF;
    float: left;
    height: 100%;
    color:#0058a5;
    font-weight: bold;
}
.PSh3 {
    text-align: left;
    padding-left: 10px;
    border-left: 4px #ffffff double;
    font-size: 16px;
    float: left;
    height: 100%;
    width: 80%;
    color: #000000;
}
.breadcrumbNews{
    background: none;
    border-radius: inherit;
    margin: 0;
    padding: 0;
    list-style: none;
}
.footLogo{
    display: inline-block;
    vertical-align:middle;
    margin: 10px 0 0 10px;
}
.follow{
    display: inline-block;
    padding-left: 15px;
}
.follow span img{
	vertical-align:middle;
	padding: 0 10px 4px;
}
.fb{
	background-position: -6px 0;
    transition: opacity .3s ease;
}
.fb:hover{
	opacity:.7;
}
.twitter{
	background-position: -6px -35px;
    transition: opacity .3s ease;
}
.twitter:hover{
	opacity:.7;
}
.in{
	background-position: -6px -70px;
    transition: opacity .3s ease;
}
.in:hover{
	opacity:.7;
}
.youtube{
	background-position: -6px -105px;
    transition: opacity .3s ease;
}
.youtube:hover{
	opacity:.7;
}
.ps{
	color:#AD0009;
}
.contactTx img {
    width: 200px;
}

.prodectBox img{
	display: inline-block;
    width: 300px;
    padding: 0 10px 0;
}
.prodectBoxText{
	display: inline-block;
	vertical-align:top;
}
.prodectBoxTextWidth{
	width:60%;
}
.footBottom{
	bottom:0px;
}
.towerBox{
	border-bottom: #999999 1px dotted;
	padding: 20px 0 10px;
}
.towerBox img{
	width: 20%;
	display: inline-block;
}
.towerBox div{
	display: inline-block;
	vertical-align:top;
	padding-top:20px;
	width: 75%;
}
.towerBox div a{
	color: #D8222C;
    font-size: 1.2em;
    font-weight:bold;
}
.towerBox div a:hover{
	color: #FF8347;
}

.cannedtowerBox{
	border-bottom: #999999 1px dotted;
	padding: 20px 0 10px;
}
.cannedtowerBox img{
	width: 40%;
	display: inline-block;
}
.cannedtowerBox div{
	display: inline-block;
	vertical-align:top;
	padding-top:20px;
	width: 55%;
}
.cannedtowerBox div a{
	color: #D8222C;
    font-size: 1.2em;
    font-weight:bold;
}
.cannedtowerBox div a:hover{
	color: #FF8347;
}
.formBox .form {
    position: relative;
    margin-bottom: 25px;
}
.b-box {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.formBox .form label {
    display: block;
    background: #C9EAFF;
    font-size: 15px;
    height: 30px;
    line-height: 30px;
    width: 171px;
    padding: 0 10px;
    color: #545454;
    position: absolute;
    font-weight: bold;
    left: 0;
    top: 0;
}
.formBox .form input[type="text"] {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding: 5px;
    padding-left: 195px;
    width: 100%;
    height: 30px;
    line-height: 30px;
    border: 1px solid #C9EAFF;
    font-size: 1em;
}
input[type="text"] {
    -webkit-appearance: none;
}
.formBox .form textarea {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    width: 100%;
    height: 100px;
    padding: 5px 5px;
    padding-left: 195px;
    border: 1px solid #ccc;
    font-size: 1em;
    font-family: Arial,微軟正黑體,Microsoft JhengHei,新細明體,sans-serif;
}
.formBox {
    margin-bottom: 25px;
    color: #222;
    font-size: 1em;
    margin-top: 30px;
}
.formBox form .btn a {
    display: inline-block;
    padding: 7px 15px;
    font-size: 16px;
    color: #FFF;
    border-radius: 3px;
    margin: 0 10px;
}
a.btn_color1 {
    background: #2B80CC;
    color: #FFF;
    padding: 5px 10px;
    border-radius: 5px;
    margin: 10px 10px;
    transition: all .4s ease;
    font-weight: bold;
}
a.btn_color1:hover {
    background: #78BFFF;
    color: #FFFFFF;
    padding: 10px 20px;
}
.send{
    text-align: center;
    margin-top: 80px;
}
.number{
	padding-left:195px;
	font-weight:bold;
	display:inline-block;
	padding-top: 3px;
    color: #D0000B;
}
.formPS{
	color: #D8222C;
    padding-left: 10px;
    font-size: .9em;
    display:inline-block;
}
.foot_fb{
	background:url(images/foot_fb.png) no-repeat; 
	height:28px; 
	width:35px; 
	display:inline-block; 
	vertical-align: middle;
	padding: 2px 10px 0;
	transition: all .3s ease;
}
.foot_fb:hover{
	background:url(images/foot_fb2.png) no-repeat; 
	padding-bottom: 6px;
}
.foot_line{
	background:url(images/foot_line.png) no-repeat; 
	height:28px; 
	width:35px; 
	display:inline-block; 
	vertical-align: middle;
    padding: 2px 10px 0;
    transition: all .3s ease;
}
.foot_line:hover{
	background:url(images/foot_line2.png) no-repeat; 
	padding-bottom: 6px;
}
.foot_mail{
	background:url(images/foot_mail.png) no-repeat; 
	height:28px; 
	width:35px; 
	display:inline-block; 
	vertical-align: middle;
    padding: 2px 10px 0;
    transition: all .3s ease;
}
.foot_mail:hover{
	background:url(images/foot_mail2.png) no-repeat; 
	padding-bottom: 6px;
}
@keyframes fadeIn{
	0%{opacity:0; transform:translate(0,-20px);}
	100%{opacity:1; transform:translate(0,0px);}
}

/*螢幕大小*/

@media screen and (max-width: 1600px) { 
	#navlist ul{  width: 900px;margin: 0 40px;}
	#navlist ul li{  display: inline;}
	#content_right{  padding-left: 0; }
}
@media screen and (max-width: 1400px) { 
	.indexAboutText{ padding: 3% 4% 0 5%;}
	.navBox{ width: 85%;}
	.indexBox{width: 1145px;}
	.index4Box{width: 260px;}	
}
@media screen and (max-width: 1300px) { 
	nav ul{padding-right:2%;}
	h1{line-height: 2em;}
	h2{line-height: 1.5em;}
	.navBox{ width: 90%;    height: 65px;}
}
@media screen and (min-width: 1200px){
	#mobile{display:none; visibility:hidden;}
}
@media screen and (max-width: 1200px) { 
	#index_margin{width: 1002px; margin: 0 auto;}
	#footFloat{margin-bottom:15px;}
	.news_margin{  width: 90%;}
	.news {  width: 750px;}
	.date{  padding: 0 0 0 40px;  width: 130px;}
	.hot{width: 1000px;}
	header{height: 80px;}
	nav ul{display:none;}
	#logo{text-align: center; float:none;}
	#aa{background:url(images/aa.png) no-repeat;width:55px;height:35px;margin:15px 0 0 10px;float:left;}
	#logo img{margin:0;}
	.bg{ background-size:  auto; background-position: center top;}
	.indexBox{ width: 1060px;}
	.index4Box {width: 240px;}
	.language{display:none;}
	#banner{    padding-top: 75px;}
}
@media screen and (max-width: 1080px) { 
	#index_margin{  width: 936px;}
	nav ul{padding-right:60px;}
	.date{  padding: 0 0 0 30px;  width: 100px;}
	.news{width: 80%;}
	.hot{  width: 940px;}
	.about_margin{width:90%;}
	.erp_margin{width:90%;}
	.contact_margin{width:90%;    margin-bottom: 10%;}
	.contact_margin p{float:none;}
	h2{font-size: 1.1em;}
	h5{font-size: 1.2em;}
	h1{font-size: 1.4em;}
	#content_right{padding-bottom: 60px;}
	.indexBox{width: 660px;}
	.index4Box{width: 300px; margin: 2% 2%;}
	.indexWrapper{ padding: 5% 0;}
	footer{padding-bottom:0;}
	.footbox{ width: 100%; margin: .5em auto;}
	.footTxLt{ display:block; width: 505px; margin: 30px auto 0;}
	.footTxRt{ padding-left:0; display:block; width: 490px; margin: 0px auto 30px;}
	.footBottom{bottom:auto;}
	.prodectBoxTextWidth{width:43%;}
}
@media screen and (max-width: 980px) { 
	nav ul{padding-right:50px;}
	.indexAboutBox img {width: 100%; float:none;}
	h2 {padding-bottom: 5%;}
	.indexAboutText {padding: 3% 4% 8% 5%; width: 100%; float:none;}
	.inquire_margin{width:700px;}
	.inquireBg{width:700px; padding-top: 15%;}
}
@media screen and (max-width: 840px) { 
	#content_right{overflow: inherit;}
	#index_margin{width: 720px;}
	.date{  padding: 0 0 0 10px; }
	.news{width: 75%;}
	.hot {width: 100%}
	#keyBg{background-color: #3D3D3D;}
}
@media screen and (max-width: 768px) { 
	#index_margin {width: 680px;}
	.inquire_margin{width:500px;}
	.inquireBg{width:500px; padding-top: 20%;}
	.InquireWhiteBg{width:400px;}
	.erpBoxContent{width:100%;}

	.indexBox{width: 90%; padding-bottom: 5%;}
	.index4Box{width: 100%; margin: 4% 0; height: 300px;}
	.BoxAbout{ height:150px;}
	.BoxNews{ height:150px;background-position: 0;}
	.BoxFiber{ height:150px;}
	.BoxLogistic{ height:150px; }
	.serviceBtnTitle{font-size:1.7em;}
	.serviceBtnTitleS{font-size: 1.1em;}
	.serviceBox{padding:20px 20px 30px 20px;}
	.indexWrapper{padding-bottom: 0;}
	.contact_margin p{ width: 100%;}
	.contactTx{ width: 95%;}
	.prodectBoxTextWidth{width:100%;}
	.prodectBox img{width:90% !important;}
	.PSh1{width: 95%;}
	.PSh2{width: 95%;text-align:center;    border-left: transparent;}
	.PSh3{width: 95%;text-align:center;    border-left: transparent;}
	#banner{display:none;}
	#banner_s{display: block;padding-top:70px;}
}
@media screen and (max-width: 640px) { 
	#index_margin{width:95%;}
	.news{width: 70%; padding: 0 0 0 10px;}
	.news_t{float:none;}
	#footFloat{ float:none; text-align:center;}
	#content_right{padding-bottom: 80px;}
	.towerBox div{ width: 100%;}
	.towerBox img{ width: 200px; display: block; margin: 0 auto;}
	.cannedtowerBox div{ width: 100%;}
	.cannedtowerBox img{ width: 400px; display: block; margin: 0 auto; }
	
}
@media screen and (max-width: 520px) { 
	.inquire_margin{width:400px;}
	.inquireBg{width:400px;}
	.InquireWhiteBg{width:300px; height: 220px;}
	.InquireWhiteBg p{padding-left: 8%;}
	.contactBox{width:90%;}
	.loginBoxContent{width: 90%;}
	.loginBg{width:250px;}
	.loginBox{ width: 220px;}
	.loginFront{width:45%;}
	.loginBack{width:55%;}
	#content_right{padding-bottom: 100px;}
	.serviceBox{padding:20px 15px 30px 15px;}
	.footTxLt{width: 288px;}
	.follow{padding-left: 0; margin: 15px 0;}
	.copyright{ margin: 5px 0; line-height:1.7em;}
	.footTxRt{ width: 288px;}
	.footTx{width: 270px; word-break: break-word; letter-spacing: 0em;}
	.qrcode{ padding-right: 5px;}
	.prodectBox img{float: none; width: 95%; padding: 0 10px 0;}
	.prodectBox{height: auto;}
	.prodectBox p{width: 95%; margin:0 auto;}
}
@media screen and (max-width: 480px) { 
	header{height:69px;}
	.news{width:100%;}
	#aa{  background-size: 80%;margin:20px 0 0 10px;}
	.mobileTop{margin-top:0;}
	.footbox{width:90%;}

	#logo img{display: none;}
	#logo-s{display: block;}
	#logo-s img{display: block;}
	#banner{padding-top: 68px;}
	.BoxNews {    background-position: -170px;}
	#icon2 ul{ padding-left: 40px;}
}
@media screen and (max-width: 400px) { 
	.inquire_margin{width:300px;}
	.inquireBg{width:300px; height:500px;}
	.InquireWhiteBg{width:280px;}
	
	#icon2{text-align:center;}
	.formBox .form label{    position: initial;}
	.formBox .form input[type="text"]{padding-left: 10px;}
	.number {padding-left: 10px;}
}
@media screen and (max-width: 342px) { 
	.contactTx{font-size: .95em;}
}