@charset "utf-8";
/* CSS Document */
/**自定义样式**/
*{ margin: 0 ; padding: 0;}
html{ font-size:20px;}
body {
    font-family:"Microsoft JhengHei", "Helvetica Neue", Helvetica, 'SimHei', Arial, sans-serif;  color:#555; background: #ffffff;  /*font-family: "Microsoft JhengHei"; 微軟正黑*/
    font-size: 14px;font-weight:300;
}
input, textarea, selet, option, button{outline: none;}
input[type="submit"], input[type="reset"], input[type="button"], button { -webkit-appearance: none; /*去掉苹果的默认UI来渲染按钮*/}
input:-webkit-autofill{ background: none;}

a{color: #333;text-decoration: none;  }
a:focus,a:hover{text-decoration: none; color:#2196ce;}
li{list-style: none;}

/*body a{outline:none;blr:expression(this.onFocus=this.blur());}  去掉a标签点击后的虚线*/
/* ----- clear fix for floats ----- */
/* these styles instruct non-IE browsers to render container elements so that they fully enclose floats */
/* without this class applied, a float might hang over the bottom border of it's container */
.clearfix:after {content:"."; width:0; height:0; line-height:0; font-size:0; display:block; clear:both; visibility:hidden; overflow:hidden;margin:0;}
.clearfix {display:inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height:1%;}
.clearfix {display:block;}
/* End hide from IE-mac */
.box{width: 1200px; margin: 0 auto;}

/*======框架样式重置初始化========*/
.h1,h1,.h2,h2,.h3,h3,.h4,h4,.h5,h5,.h6,h6{ margin: 0;}
.h16{ font-size:16px;}
.h20{ font-size:20px;}
.h22{ font-size:22px;}
.h28{ font-size:28px;}


.fr{ float: right;}
.fl{ float: left;}

/*-------------導航---------------*/
.header-banner-box{ position: relative; width: 100%; height: 100%; display: block;}
/**/
.header-box { border: none; border-radius: 0; background: #f5f5f5; border-bottom:solid 1px #eee;  width:100%;}
.navbar-logo{ width:285px; height:72px; margin:13px 30px; float: left;}
.navbar-logo img{ width:285px; height:72px;}

.navbar-menu{ float: right; position: relative;}
.navbar-menu .nav{}
.navbar-menu .nav li{ float: left; margin:0 28px; line-height:114px; height: 98px; position: relative; }
.navbar-menu .nav li .nav-li-ol{ position:absolute; left:50%; top:98px; opacity:0;  margin-left: -80px; background: #2aabd2; z-index: 999; width: 160px;height:0; overflow: hidden; border-radius:0 0 4px 4px; visibility:visible;opacity:1; -moz-transform:scale(0); -webkit-transform:scale(0);  -o-transform:scale(0);transform: scale(0); }
.navbar-menu .nav li .nav-li-ol li{ line-height: 40px; height: 40px;margin: 0; width: 100%;text-align: center; }
.navbar-menu .nav li .nav-li-ol li a{ color: #fff;}
.navbar-menu .nav li .nav-li-ol li a:before{ display: none;}
.navbar-menu .nav li .nav-li-ol li:hover{ background: #0ca4d2;}
.navbar-menu .nav li.active .nav-li-ol{height:auto;opacity:1;-webkit-transition: all .6s ease; -moz-transition: all .6s ease; -ms-transition:  all .6s ease;  -o-transition:  all .6s ease; transition: all .6s ease;-moz-transform:scale(1,1); -webkit-transform:scale(1,1);  -o-transform:scale(1,1);transform: scale(1); }
.navbar-menu .nav li .nav-li-ol>li{-webkit-animation-duration:.5s;-o-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both}
.navbar-menu .nav li .nav-li-ol>li:nth-child(1) {-webkit-animation-delay:.02s;-o-animation-delay:.02s;animation-delay:.02s}
.navbar-menu .nav li .nav-li-ol>li:nth-child(2) {-webkit-animation-delay:.04s;-o-animation-delay:.04s;animation-delay:.04s}
.navbar-menu .nav li .nav-li-ol>li:nth-child(3) {-webkit-animation-delay:.06s;-o-animation-delay:.06s;animation-delay:.06s}
.navbar-menu .nav li .nav-li-ol>li:nth-child(4) {-webkit-animation-delay:.08s;-o-animation-delay:.08s;animation-delay:.08s}
.navbar-menu .nav li .nav-li-ol>li:nth-child(5) {-webkit-animation-delay:.1s;-o-animation-delay:.1s;animation-delay:.1s}
.navbar-menu .nav li .nav-li-ol>li:nth-child(6) {-webkit-animation-delay:.12s;-o-animation-delay:.12s;animation-delay:.12s}
.navbar-menu .nav li .nav-li-ol>li:nth-child(7) {-webkit-animation-delay:.14s;-o-animation-delay:.14s;animation-delay:.14s}
.navbar-menu .nav li .nav-li-ol>li:nth-child(8) {-webkit-animation-delay:.16s;-o-animation-delay:.16s;animation-delay:.16s}
.navbar-menu .nav li .nav-li-ol>li:nth-child(9) {-webkit-animation-delay:.18s;-o-animation-delay:.18s;animation-delay:.18s}
.navbar-menu .nav li .nav-li-ol>li:nth-child(10){-webkit-animation-delay:.2s;-o-animation-delay:.2s;animation-delay:.2s}
.navbar-menu .nav li a::before{ width:0; height: 2px; background: #2aabd2; content:""; position: absolute; left:50%; bottom:26px;-webkit-transition: all .4s ease; -moz-transition: all .4s ease; -ms-transition:  all .4s ease;  -o-transition:  all .4s ease; transition: all .4s ease; }
.navbar-menu .nav li:last-child a::before{ display: none;}
.navbar-menu .nav li:hover a::before{left:0%; width:100%;}


/*中英文*/
.navbar-menu .nav li.language{position:absolute; top:0; right:0px;background: #2c3e50; height: 40px; line-height: 40px; }
/*.navbar-menu .nav li.language:hover{ background: #2aabd2;}*/
.navbar-menu .nav li.language a{ display: inline-block; font-size:14px; color: #ccdded; text-align: center; padding:0 9px;-webkit-transition: all .4s ease; -moz-transition: all .4s ease; -ms-transition:  all .4s ease;  -o-transition:  all .4s ease; transition: all .4s ease;}
.navbar-menu .nav li.language a i{ color: #ccdded; }
.navbar-menu .nav li.language .language-menu{position:absolute; top:40px; right:0px; width: 51px;background: #405060; z-index: 999; padding-bottom:0px; overflow: hidden; display: none;}
.navbar-menu .nav li.language .language-menu a{ float: none; height:30px; line-height:30px; margin: 0; text-align: center;border-bottom: solid 1px #737f8c; display: block;}
.navbar-menu .nav li.language .language-menu a:last-child{ border-bottom:none;}
.navbar-menu .nav li.language .language-menu  a{padding:0; }
.navbar-menu .nav li.language .language-menu a:hover{ color: #fff;  background: #2aabd2;}
.navbar-menu .nav li.language.language-show .language-menu{height:auto;-webkit-transition: all .8s ease; -moz-transition: all .8s ease; -ms-transition:  all .8s ease;  -o-transition:  all .8s ease; transition: all .8s ease;}

/*========文字动画======*/
.words-animation{}
.words-animation span {display:inline-block;color: #fff;opacity: 0;transform: translate(200px, -100px) scale(2);animation: ballDrop .3s forwards;}

@keyframes ballDrop {
  60% {
    transform: translate(0, 20px) rotate(-180deg) scale(.5);
  }
  100% {
    transform: translate(0) rotate(0deg) scale(1);
    opacity: 1;
  }
}


/*========首頁標======*/

 /*底部*/
.footer-bg-bg{ background:#2f323b; width: 100%; }
.footer-bg{ padding-top: 52px;}
.footer-introduction{ border-bottom: solid 1px #606269; padding-bottom: 56px;}
.footer-introduction .fl{ color: #fff; width:70%;}
.contact-us-title{ width: 100%;}
.contact-us-title h2{font-size:40px; font-weight:normal;margin-bottom: 10px;}
.contact-us-title p{ font-weight: 300;}

.form-contact-us{width: 100%; }
.form-contact-us .form-input{margin: 15px auto; width:32.14%;   float: left; margin-right:15px; }
.form-contact-us .form-input:nth-child(3){margin-right:0; }
.form-contact-us .form-input span{display: block; height:30px; line-height:30px;}
.form-contact-us .form-input input{ display: block;width:100%; height:36px; padding:10px 13px; border-radius:4px; background-color:rgba(255,255,255,.6); border: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; color: #fff; }
.form-contact-us .form-input textarea{display: block;width:100%;line-height:22px;padding:10px 13px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;border:0; background-color:rgba(255,255,255,.6); -webkit-border-radius:0;min-height:50px; resize:none; border-radius:4px; color:#fff; font-family:"Microsoft JhengHei";  }

.form-contact-us .form-button{margin: 0;width:30%; height:40px; line-height:40px;background-color:#2196ce; cursor: pointer;border-radius:4px;}
.form-contact-us .form-button #form-btn{ width:100%; background: #2196ce; border: none; color: #fff;cursor: pointer;border-radius:4px;}

.footer-introduction .fr{color: #fff; }
.footer-introduction .fr p{color: #97989d; font-size: 16px; }
.footer-introduction .fr p span{ background: url("../images/mail-tel.png") left 8px no-repeat; padding-left: 24px; display: block;line-height:30px;}
.footer-introduction .fr p span:nth-child(2){ background: url("../images/mail-tel.png") left -23px no-repeat;}
.footer-introduction .fr p span:last-child{ background: url("../images/mail-tel.png") left -54px no-repeat;}

.footer-icon{ margin-top: 40px; font-size: 16px;}
.footer-icon a{ color: #fff;-webkit-transition: all .5s ease; -moz-transition: all .5s ease; -ms-transition:  all .5s ease;  -o-transition:  all .5s ease; transition: all .5s ease; width:26px;  height: 26px; display: inline-block;;  border: 1px dashed transparent; text-align: center; line-height:26px;}
.footer-icon a:hover{color: #2196ce;border-color: #fff;  -webkit-border-radius: 50%;   -moz-border-radius: 50%;  border-radius: 50%; }

.footer{border-top: solid 1px #383b44; padding-top: 5px; line-height: 60px; height: 60px; font-size: 12px; font-weight:400; background-color: rgba(0,0,0,0.25); color: #ffffff;}
.footer a{text-decoration: underline; color: #fff;-webkit-transition: all .4s ease; -moz-transition: all .4s ease; -ms-transition:  all .4s ease;  -o-transition:  all .4s ease; transition: all .4s ease;}
.footer a:hover{color: #2196ce;}


@media only screen and (max-width:1360px){
    .box{width: 980px; margin: 0 auto;}
    /*nav*/
    .navbar-menu .nav li{ margin:0 18px;}


}



@media only screen and (max-width:768px){
    /*======框架样式重置初始化========*/
    .h1,h1{font-size:1.4rem}
    .h2,h2{font-size:1rem}
    .h3,h3{font-size:.75rem}
    .h4,h4{font-size:.5rem}
    .h16{ font-size:.55rem;}
    .h20{ font-size:.65rem;}
    .h22{ font-size:.7rem;}
    .h28{ font-size:.85rem;}

	
}