@charset "utf-8";
/* CSS Document */
/**自定义样式**/
*{ margin: 0 ; padding: 0;}
html{ font-size:20px;}
html,body{width:100%; height:100%;}
body {  font-family:"Microsoft YaHei", "Helvetica Neue", Helvetica, 'SimHei', Arial, sans-serif;  color:#555; background: #f2f2f2;  /*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: #090b17;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 */

.viewport{max-width:750px; margin: 0 auto;position: relative; background: #fff;height:100%; overflow: hidden;}


/*======框架样式重置初始化========*/
.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 {position:relative; left:0; top:0;z-index:100; border: none; border-radius: 0; background: #fff;width:100%;  }
.navbar-logo { width:6.1rem; /*height:1.25rem; */margin:0 0 0 .5rem;  overflow: hidden; }
.navbar-logo .vertical-align-middle img{ /*width:6.1rem; height:1.25rem;*/ max-width: 100%; display: block;}
/*导航按钮*/
.navbar-menu-btn{ margin:0 .5rem ; cursor: pointer; display:inline-block;}
.navbar-menu-btn .bar:before,.navbar-menu-btn .bar,.navbar-menu-btn .bar:after {-webkit-transition:-webkit-transform .6s ease-in-out;-o-transition:-o-transform .6s ease-in-out;transition:transform .6s ease-in-out;}
.navbar-menu-btn:before,.navbar-menu-btn:after {content:"";-webkit-transition: all .8s ease; -moz-transition: all .8s ease; -ms-transition:  all .8s ease;  -o-transition:  all .8s ease; transition: all .8s ease;}
.navbar-menu-btn:before,.navbar-menu-btn .bar,.navbar-menu-btn:after {display:block;width:23px;height:3px;margin:0;background:#282828;border-radius:1px;}
.navbar-menu-btn .bar {margin:.3em 0;}
.opennav .navbar-menu-btn:before {-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);-webkit-transform-origin:8%;-ms-transform-origin:8%;-o-transform-origin:8%;transform-origin:8%;}
.opennav .navbar-menu-btn .bar{opacity:0;}
.opennav .navbar-menu-btn:after {-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-transform-origin:8%;-ms-transform-origin:8%;-o-transform-origin:8%;transform-origin:8%;}
/*导航*/
.navbar-menu{ position: absolute;  top:1.9rem; left:-100%;  right: 0;  bottom: 0;  z-index: 1;  width:calc(100% - 100px); height:100%; background: #f6f6f6;overflow-y: auto;}
.navbar-menu .nav{ padding:1rem .5rem;}
.navbar-menu .nav li{ overflow: visible; text-align:left; font-size: .7rem; line-height:2rem;}
.navbar-menu .nav li a{transform: translateY(120px) translateX(120px); opacity: 0;color: #444;display: block;-webkit-transition: all 0.6s; -moz-transition: all 0.6s; -ms-transition: all 0.6s; -o-transition: all 0.6s; transition: all 0.6s;}
.navbar-menu .nav li a strong{ font-weight: 300;}
.navbar-menu .nav li .nav-li-ol{z-index: 999; height:0; overflow: hidden; padding-left: .6rem;}
.navbar-menu .nav li .nav-li-ol li{ line-height:1.2rem; height:1.2rem;margin: 0; width: 100%;text-align:left; }
.navbar-menu .nav li .nav-li-ol li a:before{ display: none;}
.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;}
.navbar-menu .nav li:nth-child(1) a, .navbar-menu .nav li:nth-child(1) i{transition-delay: .05s;}
.navbar-menu .nav li:nth-child(2) a, .navbar-menu .nav li:nth-child(2) i{transition-delay: .1s;}
.navbar-menu .nav li:nth-child(3) a, .navbar-menu .nav li:nth-child(3) i{transition-delay: .15s;}
.navbar-menu .nav li:nth-child(4) a, .navbar-menu .nav li:nth-child(4) i{transition-delay: .2s;}
.navbar-menu .nav li:nth-child(5) a, .navbar-menu .nav li:nth-child(5) i{transition-delay: .25s;}
.navbar-menu .nav li:nth-child(6) a, .navbar-menu .nav li:nth-child(6) i{transition-delay: .3s;}
.navbar-menu .nav li:nth-child(7) a, .navbar-menu .nav li:nth-child(7) i{transition-delay: .35s;}
.navbar-menu .nav li:nth-child(8) a, .navbar-menu .nav li:nth-child(8) i{transition-delay: .4s;}
.navbar-menu .nav li:nth-child(9) a, .navbar-menu .nav li:nth-child(9) i{transition-delay: .45s;}
.navbar-menu .nav li:nth-child(10) a, .navbar-menu .nav li:nth-child(10) i{transition-delay: .5s;}
.navbar-menu .nav li:nth-child(11) a, .navbar-menu .nav li:nth-child(11) i{transition-delay: .55s;}
.navbar-menu .nav li:nth-child(12) a, .navbar-menu .nav li:nth-child(12) i{transition-delay: .6s;}
.navbar-menu .nav li:nth-child(13) a, .navbar-menu .nav li:nth-child(13) i{transition-delay: .65s;}
.navbar-menu .nav li:nth-child(14) a, .navbar-menu .nav li:nth-child(14) i{transition-delay: .7s;}
.navbar-menu .nav li:nth-child(15) a, .navbar-menu .nav li:nth-child(15) i{transition-delay: .75s;}

.opennav .navbar-menu{left: 0; box-shadow: 1px 0 10px rgba(150,150,150,.3);}
.opennav .navbar-menu .nav li a{transform: translateY(0px) translateX(0);  opacity: 1;}
.viewport-box .header-box{box-shadow: 0px 0px 6px rgba(0, 0, 0, .1);}
.header-box{ padding:.5rem 0; }
.header-box .fr{padding: .3rem 0 .25rem;}
/*中英文*/
.language{ display:inline-block;height: 22px;line-height: 22px; vertical-align: text-bottom; padding:0 .6rem;}
.language a{ display: inline-block; font-size:14px; color: #aaa; text-align: center;-webkit-transition: all .4s ease; -moz-transition: all .4s ease; -ms-transition:  all .4s ease;  -o-transition:  all .4s ease; transition: all .4s ease;line-height: 22px; padding-left: 25px;}
.language a{}
.language a.cn{ background-image:url("../images/language.png");background-size:20px; background-position:0 1px; background-repeat: no-repeat; }
.language a.en{ background-image:url("../images/language.png");background-size:20px; background-position:0 -30px; background-repeat: no-repeat; }



/*right*/
.container-body{position:absolute;  top:2.2rem;  right: 0;  left: 0;  bottom: 0;  background: #fff;  -webkit-transition: left 250ms ease;  -moz-transition: left 250ms ease;  -o-transition: left 250ms ease;  transition: left 250ms ease;  -webkit-transition: -webkit-transform 250ms ease;  -moz-transition: -moz-transform 250ms ease;  -o-transition: -o-transform 250ms ease;  transition: transform 250ms ease; overflow-y:auto; }
.opennav .container-body{-webkit-transform: translate(calc(100% - 100px),0);  -moz-transform: translate(calc(100% - 100px),0);  -ms-transform: translate(calc(100% - 100px),0);
 -o-transform: translate(calc(100% - 100px),0);  transform: translate(calc(100% - 100px),0);}

/*========文字动画======*/
.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:#333; width: 100%; }
.footer-bg{  background-size:contain 100%;  }
.footer-introduction{ border-bottom: solid 1px #222; padding:5%;}
.footer-introduction .introduction{ color: #fff; padding-bottom: 1rem;}
.footer-introduction .introduction p{ color: #97989d; font-size: 14px; line-height: 24px;}
.footer-introduction h4{ font-size:22px; font-weight:normal; margin-bottom:.2rem;}
.footer-introduction .contact-way{color: #fff; }
.footer-introduction .contact-way p{color: #97989d; font-size: 16px; }
.footer-introduction .contact-way p span{ background: url("../images/mail-tel.png") left 10px no-repeat; padding-left: 24px; display: block;line-height:36px;}
.footer-introduction .contact-way p span:last-child{ background: url("../images/mail-tel.png") left -21px no-repeat;}
.footer-introduction .contact-way p span a{color: #97989d;}

.footer-icon{ margin:0.5rem 0 0; font-size: 16px; text-align: center;}
.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:.3rem 0; font-size: 12px; font-weight:400; background-color: rgba(0,0,0,0.25); color: #ffffff; overflow: hidden;}
.footer div{ line-height:26px; text-align: center;}
.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;}