@charset "utf-8";

/* CSS Document */



/* reset css */

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, input, textarea, p, th, td {margin:0 0; padding:0 0; -webkit-text-size-adjust:none;}

table {border-collapse:collapse; border-spacing:0;}

img {border:0;}

ol, ul {list-style:none;}

a{outline:none; hlbr:expression(this.onFocus=this.blur()); text-decoration:none;}

input , textarea{outline:none;}



body{font-family:"微軟正黑體",arial; background:url(../images/bg.jpg)}



/* header */

#header{ width:100%; background:#FFF; border-bottom:5px solid #e5e5e5;}

#header .top{ width:100%; background:#f9f9f9; height:21px; border-bottom:1px solid #e5e5e5;}

#header .top .wrapper{ width:1000px; margin:0 auto;}

#header .top .wrapper .language{ float:right; background:#ebebeb; font-size:12px; color:#ccc9c9;}

#header .top .wrapper .language span{ background:url(../images/language_icon.png) no-repeat center; width:26px ; height:21px; display:inline-block; border-right:1px solid #ccc9c9; float:left;}

#header .top .wrapper .language a{ line-height:21px; color:#000; font-size:13px; display:inline-block; padding:0 10px}

#header .top .wrapper .language a:hover{ color:#666;}

#header .wrapper{ width:1000px; margin:0 auto; height:77px;}

#header .wrapper .logo{ width:345px; height:60px; float:left; margin-top:8px; background:url(../images/logo.png) no-repeat; background-size:auto 60px;}

#slide {

  position: relative;

}

#slide img {

  position: absolute;

  top: 0;

  left: 0;

  display: block;

  width: 100%;

  opacity: 0;

  visibility: hidden;

  transition: 0.8s;

}

#slide img:first-child {

  position: static;

}

#slide img.show {

  opacity: 1;

  visibility: visible;

}



#header .wrapper .nav{ float:left; margin: 0 0 0 30px}

#header .wrapper .nav li{ float:left;}

#header .wrapper .nav li a{ font-size:20px; color:#000; font-weight:bold; display:block; height:82px; padding:40px 30px 0 30px; box-sizing:border-box;}

#header .wrapper .nav li a:hover ,#header .wrapper .nav li a.active{ border-bottom:5px solid #1d2088;  transition: all .3s;}



/* banner */

#banner{ width:100%; height:300px; background:#18416c; position:relative; overflow:hidden}

#banner img{ display:block; margin:0 auto;}

#banner .text{ width:1000px; height:300px; position:absolute; top:0; left:50%; margin-left:-500px;}

#banner .text .ch{ font-size:33px; color:#FFF; font-weight:bold; text-shadow: 1px 1px 5px #000; position:absolute; top:40%; left:6%; line-height: 32px;}

#banner .text .en{ font-size:18px; color:#eaeaea; position:absolute; top:58%; left:6%; width:100%; }



/* main */

#main{ width:1000px; margin:0 auto; overflow:hidden;}

.bread{ width:100%; font-size:14px; margin:10px 0}

.bread a:hover{ color:#0b5ab4;}

.bread a{ display:inline-block; color:#000; margin:0 5px;}

.bread span{  margin:0 5px; display:inline-block}

.bread .home{ background:url(../images/home.png) left center no-repeat; background-size:15px auto; text-indent:20px;}



.left_menu{ float:left; width:24%;}

.left_menu .title{ font-size:18px; background:#2455a7; color:#FFF; height:57px; border-left:5px solid #1b6df4; line-height:57px; text-indent:25px;}

.left_menu .title open{ display:none;}

.left_menu ul{ border:1px solid #dbdbdb; background:#FFF;}

.left_menu ul li{ border-bottom:#dbdbdb 1px solid;}

.left_menu ul li a{ display:block;  color:#000; font-size:14px;  transition: all .3s; padding:20px;}

.left_menu ul li a:hover,.left_menu ul li a.active{ background:#ebebeb;}

.left_menu .agent{ background:url(../images/agent_bg.jpg) left #2fa17d no-repeat; height:84px; padding:6px; box-sizing:border-box; border:1px solid #dbdbdb; margin:20px 0 0 0;}

.left_menu .agent a{ border:1px solid #FFF; display:block; font-size:22px; color:#FFF; font-weight:bold; height:100%; text-align:right; padding:30px 20px 0 0; box-sizing:border-box;}



.con {border:1px solid #dbdbdb; background:#FFF; width:73%;margin: 0 0 0 3%; float:left; box-sizing:border-box; min-height:500px; padding:30px;}

.con .title{ color:#000; font-size:23px; border-bottom:1px solid #e5e5e5; margin:0 0 25px 0;}

.con .title span{ border-bottom:1px solid #2e73bf; position:relative; line-height:40px; display:inline-block;}

.con .title span:after{ content:""; position:absolute; background:url(../images/tittle_arow.jpg); width:17px; height:8px; top:40px; left:50%; margin-left:-10px;}



.con .products{}

.con .products ul{ overflow:hidden;}

.con .products ul li{ float:left; background:#e8f3ff; width:50%; border:1px solid #FFF; box-sizing:border-box; padding:25px 95px 25px 20px;font-size:14px;  transition: all .3s; position:relative;}

.con .products ul li:hover{ background:#a3c8f1}

.con .products ul li:nth-child(even){ background:#f0f0f0;}

.con .products ul li:nth-child(even):hover{ background:#a3c8f1}

.con .products ul li a{ position:absolute; right:10px; top:25px; background:#2fa17d; border-radius:5px; color:#FFF; font-size:13px;padding:5px 8px; margin:0 5px 0 0; border:2px #63c5a6 solid; border-top:0; border-left:0; display:block; width:60px }

.con .products ul li a span{ background:url(../images/more_icon.png); width:6px; height:8px; display:inline-table; }

.con .products .line{ width:100%; height:2px; background:#e5e5e5; margin-top:20px;}

.con .products .editor{  margin-top:20px;}

.con .products .editor img{ max-width:100%; height:auto;}



.pagination{ text-align:center; margin:15px 0 0 0;}

.pagination a{ font-size:14px; color:#434141; margin:0 5px; display:inline-block; cursor:pointer; height:20px;}

.pagination a.active,.pagination a:hover{ color:#2e73bf;}

.pagination a.btn{border-radius:5px; width:20px; height:20px; text-indent:-9999px;}

.pagination a.arrow_top{ background:url(../images/page.png) #c4c4c4; background-position: 0 20px}

.pagination a.arrow_bottom{ background:url(../images/page.png) #c4c4c4; background-position: 20px 20px}

.pagination a.arrow_pro{ background:url(../images/page.png) #2e73bf; background-position: 0 0}

.pagination a.arrow_next{ background:url(../images/page.png) #2e73bf; background-position: 20px 0}

.pagination a.arrow_top:hover{ background:url(../images/page.png) #898787; background-position: 0 20px}

.pagination a.arrow_bottom:hover{ background:url(../images/page.png) #898787; background-position: 20px 20px}

.pagination a.arrow_pro:hover{ background:url(../images/page.png) #09528a; background-position: 0 0}

.pagination a.arrow_next:hover{ background:url(../images/page.png) #09528a; background-position: 20px 0}



/* main */

.about_bg{background:url(../images/about_bg.jpg) bottom no-repeat #FFF; background-size:100%; auto; padding: 30px 30px 200px 30px;}

/*.about{ width:100%; min-height:430px; }

.about p{ font-size:15px; color:#1F1F1F; float:left; width:70%; line-height:28px; padding:0 22px 0 0; box-sizing:border-box;}

.about .right_pic{ float:left; width:30%;}

.about .right_pic img{ width:100%; height:auto; box-shadow:2px 2px 8px #333333; margin:0 0 20px 0;}*/

.about{line-height: 2 ;}



.contact{}

.contact .form{ }

.contact .form dl{ width:70%; overflow:hidden; margin:0 auto 15px auto;font-size:14px;}

.contact .form dl dt{ float:left; width:25%; padding:0 0 0 20px; box-sizing:border-box;  }

.contact .form dl dd{ float:left; width:75%; }

.contact .form dl dd input{ width:100%; box-sizing:border-box; padding:8px 5px; border:1px solid #B2B2B2}

.contact .form dl dd textarea{ width:100%; height:100px; box-sizing:border-box; border:1px solid #B2B2B2; padding:8px 5px;}

.contact .form .btn{ text-align:center; margin:10px 0 20px 0;}

.contact .form .btn div{ display:inline-block; width:60px; height:25px; font-size:14px; line-height:25px; color:#FFF; background:#2e73bf; border-right:2px solid #619bdc;  border-bottom:2px solid #619bdc; margin:0 10px; border-radius:3px; text-align:center; cursor:pointer; transition: all .3s;   }

.contact .form .btn div:hover{ background:#083b82}

.contact .info{  overflow:hidden; line-height:2; }

.contact .info .comany_con{ width:50%; float:left; padding:20px 15px; box-sizing:border-box;}

.contact .info .comany_con h2{ font-size:18px; line-height:25px;}

.contact .info .comany_con p{ font-size:14px; line-height:20px;}

.contact .info .comany_con .map{ position: relative; padding-bottom: 65.25%; padding-top: 30px; height: 0; overflow: hidden; margin:15px 0 0 0;}

.contact .info .comany_con .map iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

.contact .info .comany_con .text{ height:110px;}

.contact_area{background:url(../images/contact_bg.jpg) bottom no-repeat #FFF; background-size:100%; auto; padding: 30px 30px 200px 30px;}







/* footer */

#footer{background: #2e73d3; /* Old browsers */

background: -moz-linear-gradient(top, #2e73d3 0%, #224a9b 100%); /* FF3.6-15 */

background: -webkit-linear-gradient(top, #2e73d3 0%,#224a9b 100%); /* Chrome10-25,Safari5.1-6 */

background: linear-gradient(to bottom, #2e73d3 0%,#224a9b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2e73d3', endColorstr='#224a9b',GradientType=0 ); /* IE6-9 */

padding:10px 0; box-sizing:border-box; margin:20px 0 0 0;}

#footer .wrapper{ width:1000px; margin:0 auto;text-align:center;}

#footer .wrapper .link{ font-size:12px;  color:#FFF;}

#footer .wrapper .link a{ color:#FFF; font-size:13px; margin:0 5px;}

#footer .wrapper .link a:hover{ color: #FFF; text-decoration:underline;}

#footer .wrapper .copyright{ color:#FFF; font-size:13px; margin:3px 0 0 0;}

#footer .wrapper .copyright a{ color: #619bdc ;}

#footer .wrapper .copyright a:hover{ color: #4a87cb ; text-decoration:underline;}



/* RWD */

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

#header .top .wrapper{ width:100%;}

#header .wrapper{ width:100%;}

#main{ width:100%;}

#header .wrapper .nav{ margin: 0 0 0 15px;}

#banner .text{width:100%; left:0; margin-left: 0;}

#footer .wrapper{ width:100%; padding:0 10px ; box-sizing:border-box;}

}

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

#header	{ border-bottom: 5px solid #e5e5e5;}

#header .wrapper .logo{ float:none; margin:10px auto; width:173px;}

#header .wrapper{ height:107px; }

#header .wrapper .nav{ width:100%; margin:0; }

#header .wrapper .nav li{ width:33.3%;}

#header .wrapper .nav li a{height:42px; padding:5px 0 0 0; box-sizing:border-box; text-align:center;}

#banner{  height:150px;}

#banner img{ width:auto; height:100%;}

#banner .text .ch { top:55px; font-size:18px; line-height:20px;}

#banner .text .en { top:85px; font-size:12px; line-height:12px;}

}

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

.left_menu{ width:100%;}	

.con{ width:100%; margin:0}

.left_menu .title{ position:relative;}

.left_menu .title .open{ display:block; width:95%; height:100%; position:absolute; background:url(../images/pro_open.png) no-repeat right center; top:0;}

.left_menu ul{ display:none;}

.left_menu .agent{ width:150px; position:absolute; top:274px; right:0; height:39px;}

.left_menu .agent a{ border:0; padding:0; font-size:20px;}

}

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

#banner img{ margin-left: -50%;}

#header .wrapper .nav li a{ font-size:16px;}

.con{ padding:15px;}

.con .products ul li{ padding:10px 10px 50px 10px ;}

.con .products ul li a{ bottom:10px; top:auto; right:50%; margin-right:-39px;}



.about{ padding:0 0 150px 0 ;}

.about p{ width:100%; padding:0;}

.about .right_pic{ width:100%;}

.about .right_pic img{ width:48%; float:left; margin:1%; box-sizing:border-box;}



.contact .form dl{ width:100%;}

.contact .info .comany_con{ width:100%;}

.contact .info .comany_con .text{ height:auto;}

}

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

#header .wrapper{ }

#header .wrapper .logo{}

.left_menu .agent{ height:35px; width:100%; left:0; top:220px; border:0; opacity:0.7;background: #2fa17d; }

.left_menu .agent a{font-size:18px; }

}