@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: #ddd;  /*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[type=radio],input[type=checkbox]{  -webkit-appearance: none;/*去掉默认样式 */  border-radius: 0;  border: none !important;}
form input[checked]{-webkit-appearance:none;/*去掉默认样式 */}
input:-webkit-autofill{ background: none;}
input[type=number] {  -moz-appearance: textfield;}
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {  -webkit-appearance: none;  margin: 0;  }
a{color: #090b17;text-decoration: none;  }
a:focus,a:hover{text-decoration: none; color:#007fc8;}
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: #f5f5f5;height:100%; overflow-x:hidden;}
.lecture-details-box{overflow-y: scroll;-webkit-overflow-scrolling: touch;}

/*======框架样式重置初始化========*/
.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:5; border: none; border-radius: 0; background: #fff;width:100%;  }
.navbar-logo { width:200px; /*height:1.25rem; */margin:.5rem 0 0 .5rem;  overflow: hidden; }
.navbar-logo .vertical-align-middle img{ /*width:6.1rem; height:1.25rem;*/ max-width: 100%;}
/*导航按钮*/
.navbar-menu-btn{ margin:.7rem .5rem .7rem 0; 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:#35c2bd;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:auto; background: #f6f6f6;}
.navbar-menu .nav{ padding:1rem .5rem;}
.navbar-menu .nav li{ overflow: visible; text-align:left; font-size: .7rem; height: 2rem; line-height:2rem;}
.navbar-menu .nav li a{transform: translateY(120px) translateX(120px); opacity: 0;color: #3f3a39;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:hover a{ color: #007fc8;}
.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;}

.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;}

/*中英文*/
.language{ display:inline-block;height: 22px;line-height: 22px; vertical-align: text-bottom; padding:.7rem .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:1.98rem;  right: 0;  left: 0;  bottom: 0;height:100%;  background: #f5f5f5;  -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;}
.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);}

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

/*会员注册弹窗*/
.SignUp-fixed-box{display: none; position:fixed; left:0%; top:0%;  z-index:5; width:100%; height:100%; background-color:rgba(0,0,0,.5); }
.SignUp-fixed-box.show{ display:block; }
.SignUp-registration{ width:13rem; margin:50px auto; background-color:#fff;border-radius:10px;-webkit-border-radius:10px;  padding: .5rem;-webkit-animation-duration: 1s;  animation-duration: 1s;  -webkit-animation-fill-mode: both;  animation-fill-mode: both;}
.SignUp-fixed-box.show .SignUp-registration{    -webkit-animation-name: bounceInDown;  animation-name: bounceInDown;}
/*2*/
.title-describe{text-align: center;position: relative;padding-top:1rem;}
.title-describe p{line-height:1rem; font-size:.6rem;display:inline-block;color:#444; padding:0 8px;text-align: center;}
.title-describe h2{ font-size:.9rem;font-weight:normal;color: #0d3966;position: relative; margin-bottom: .3rem; }
.title-describe h2 span{padding:0 .3rem;position: relative;z-index:9; background: #fff; }
.title-describe h2:before{ position:absolute; left:25%; top:50%; content: ""; width:50%; height:2px;background: #0d3966; z-index: 8;    }
.title-describe .close{ position:absolute; right:2%; top:4%; width:30px; height:30px;background:url("../images/validate-icon-3.png") center no-repeat; background-size:100%; z-index: 8; cursor:pointer;    }

.SignUp-registration .title-describe p{ font-size:15px;line-height:24px; }

.SignUp-form{}
.SignUp-form{width:80%; margin:0 auto 0;  }
.SignUp-form ul{margin-bottom: 1rem;}
.SignUp-form ul li{float:left;width: 100%;padding:.3rem 0; }
.SignUp-form ul li .Required-input{ display: table;color:#444;line-height:1rem; font-size:.6rem;width:100%;}
.SignUp-form ul li .Required-input span{display: table-cell; vertical-align:text-top; width:2.8rem;line-height:1.2rem;text-align:left; vertical-align:-webkit-baseline-middle; text-align:center;border:solid 1px #e5e5e5; background: #f5f5f5; border-right:0;  }
.SignUp-form ul li .Required-input .input-contact{border:solid 1px #e5e5e5;height:1.2rem;}
.SignUp-form ul li .Required-input .input-contact{border:solid 1px #e5e5e5;height:1.2rem; font-size: 0;}
.SignUp-form ul li .Required-input .input-contact input{border:none;background:none; box-shadow:none; width:100%;height:1.2rem;  line-height:1.2rem;padding:0 .3rem; /*font-size:.5rem;*/ box-sizing:border-box;  -moz-box-sizing:border-box;  -webkit-box-sizing:border-box;  }

.SignUp-form ul li.validate .Required-input .input-contact{border:solid 1px #e5e5e5;height:1.2rem; }
.SignUp-form ul li.validate .Required-input .input-contact input{width:50%; }
.SignUp-form ul li.validate .Required-input .input-contact .gain{width:50%; font-size:15px;  cursor:pointer;height:1.2rem;  line-height:1.2rem; background: #e6f4fc;border: 0;box-shadow:0;  }
.SignUp-form ul li.validate{ position:relative;  }
.SignUp-form ul li.validate .Required-input #error{ position:absolute; right:0; bottom:-.6rem; color: #f00;    }

/*滑动验证*/
#SliderBox{width:100%;height:1.2rem;  line-height:1.2rem;;position:relative;background-color:#e6f4fc;overflow:hidden;text-align:center;user-select:none;-moz-user-select:none;-webkit-user-select:none;border:solid 1px #e5e5e5;}
#SliderBox #SliderBg{position:absolute;left:0;top:0;height:100%;background-color:#35c2bd;z-index:1;}
#SliderBox #SliderLabel{width:60px;position:absolute;left:0;top:0;height:1.2rem;  line-height:1.2rem;z-index:3;cursor:move;background:url("../images/validate-icon-1.png") center no-repeat #fff;background-size:.65rem;/*border-left:solid 1px #e5e5e5;*/}
#SliderBox #SliderLabel.icon-ok-bg{background:url("../images/validate-icon-2.png") center no-repeat;background-size:.65rem;}
#SliderBox #LabelTip{position:absolute;left:0;width:100%;height:100%;font-size: 14px;font-family:'Microsoft Yahei',serif;color:#444;line-height:1.2rem;ext-align:center;z-index:2;}
/*btn*/
.submit-btn{width:46%; margin:1.2rem auto; }
.submit-btn button{ display:inline-block; width:100%; height:1.4rem; line-height:1.4rem; color:#fff; font-size:.6rem; border-radius:3px; -webkit-border-radius:3px;     background:#35c2bd;background: -moz-linear-gradient(135deg, #35c2bd 0%, #21a7c1 54%, #1191c2 100%);  background: -webkit-linear-gradient(135deg, #35c2bd 0%, #21a7c1 54%, #1191c2 100%); background: linear-gradient(135deg, #35c2bd 0%, #21a7c1 54%, #1191c2 100%); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#35c2bd, endColorstr=#1191c2);/*IE<9>*/ -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=1, startColorstr=#007fc8, endColorstr=#0d3966)";/*IE8+*/ -webkit-transition:background 1s ease; -ms-transition:background 1s ease; -moz-transition:background 1s ease; transition:background 1s ease;  border:0; cursor: pointer;}


 /*底部*/
.footer-bg{ background:#01141f; width: 100%;margin-top:1rem;  }
.footer-nav{text-align: center; padding:1rem 0 .6rem; }
.footer-nav li{ display: inline-block; padding:0 .45rem; position: relative;}
.footer-nav li:before{ position:absolute; right:0%; top:20%; content: ""; width:1px; height:.5rem;background: #f0faff; z-index: 1;    }
.footer-nav li:last-child:before{display: none;}
.footer-nav li a{font-size:.6rem; color: #f0faff;}


.footer-info{font-size: .5rem; line-height:1rem; padding:1rem 0 .6rem; text-align: center; /*background-color: rgba(0,0,0,0.25);*/ color: #f0faff;}
.footer-info div{text-align: center;}
.footer-info a{text-decoration: underline; color: #f0faff;-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-info a:hover{color: #007fc8;}







@media only screen and (max-width:480px){
.navbar-logo { width:160px; margin-top:.65rem; }

.SignUp-form{ width: 100%;}

}