@charset "utf-8";
/* reset CSS */
*{word-wrap:break-word}
html,body,h1,h2,h3,h4,h5,h6,hr,p,iframe,dl,dt,dd,ul,ol,li,pre,form,button,input,textarea,th,td,fieldset{margin:0;padding:0}
ul,ol,dl{list-style-type:none}
html,body{*position:static}
html{font-family: sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}
address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:400}
input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}
input,button{overflow: visible;vertical-align:middle;outline:none}
input{appearance: none;-webkit-appearance: none;}
body,th,td,button,input,select,textarea{font-family:"Microsoft Yahei","Hiragino Sans GB","Helvetica Neue",Helvetica,tahoma,arial,Verdana,sans-serif,"WenQuanYi Micro Hei","\5B8B\4F53";font-size:12px;color: #333;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing:grayscale}
body{line-height:1.6}
h1,h2,h3,h4,h5,h6{font-size:100%}
a,area{outline:none;blr:expression(this.onFocus=this.blur())}
a{text-decoration:none;cursor: pointer; color:#666;}
a:hover{text-decoration:none;outline:none; color:#ff3838;}
a.ie6:hover{zoom:1}
a:focus{outline:none}
a:hover,a:active{outline:none}:focus{outline:none}
sub,sup{vertical-align:baseline}
button,input[type="button"], input[type="submit"] {line-height:normal !important;}
/* img css */
img{border:0;vertical-align:middle}
a img,img{-ms-interpolation-mode:bicubic}
html,body {overflow:hidden;width:100%;height:100%;background:linear-gradient(to left,#aeccf0 100%,#e6f0fc 90%);}
/* clear css */
.clear{ clear:both;}
.cl:after,.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}.cl,.clearfix{zoom:1}
.clear10{clear:both;font-size:1px;width:100%;height:10px;visibility:hidden;margin-top:0px!important;*margin-top:-1px;line-height:0;}
.clear20{clear:both;font-size:1px;width:100%;height:20px;visibility:hidden;margin-top:0px!important;*margin-top:-1px;line-height:0;}

.bg{position:absolute;left:0;top:0;right:0;bottom:0;width:100%;height:100%;}
.logo{position:absolute;width:180px;height:67px;top:27px;left:20px;background-size:100% auto;background-repeat:no-repeat;z-index:2;}
.lang_cn .logo{background-image:url(../images/cn_logo.png);}
.lang_en .logo,.lang_fr .logo{background-image:url(../images/en_logo.png);}
.logo img {width: 180px;}
.lang-select{border-width: 1px;border-color: rgb(3, 70, 143);border-style: solid;position: absolute;right:30px;top: 27px;width: auto;height: 35px;border-radius:19px;overflow: hidden;z-index:9;}
.lang-select.show{height:140px;}
.lang-select .arrow{position:absolute;right:15px;top:13px;width:14px;height:10px;background:url(../images/select_arrow.png);}
.lang-select.show .arrow{transform:rotate(180deg);}
.lang-select a,.lang-select span{display:block;width:100%;height:35px;color:#03468f;font-size:14px;text-indent:17px;line-height:35px;padding-right: 35px;}
.lang-select a{background:rgba(255,255,255,0.3);}
.login-wrap {width: 505px;height: 364px;box-sizing: border-box;padding: 0 70px;border-radius: 4px;box-shadow: 0px 2px 12px 0px rgba(105, 105, 105, 0.07);background: rgba(255, 255, 255, .8);position: absolute;top: 40.65%;left: 50%;transform: translate(-50%, -50%);animation: boxShow 1s ease-in-out  alternate;overflow: hidden;transition: 1.5s;}
.login-wrap h1{font-size:18px;height:52px;line-height:52px;position:relative;font-weight:normal;padding-top:20px;text-align: center;white-space: nowrap;}
.login-wrap h1:after{content:' ';position:absolute;left:11%;bottom:-2px;width:72px;border-bottom:2px solid #028bff;}
.lang_en .login-wrap h1,.lang_fr .login-wrap h1{font-size:17px;font-weight: bold;}
.lang_en .login-wrap h1:after,.lang_fr .login-wrap h1:after{left: 0;}
.login-form{padding-top:15px;width:100%;}
.form-item{background-color:#f7f7f7;width: 100%;height: 50px;line-height:50px;font-size:16px;margin-top:22px;color:#424242;overflow:hidden;}
.form-item label{float:left;width:60px;}
.form-item label .icon{display:inline-block;background-image:url(../images/form-icons.png);background-repeat: no-repeat;margin:0 18px 0 26px;vertical-align:-4px; background-size: 88%;}
.form-item label .user{width:20px;height:18px;background-position:0 0;}
.form-item label .password{width:20px;height:18px;background-position:0px -18px;}
.form-item .txt-input{float:left;height:50px;border:0;background:transparent;font-size:16px;text-indent:1em;width:300px;}
.login-form .submit{border-radius: 26px;box-shadow: 0px 8px 18px 0px rgba(0, 138, 255, 0.41);width: 100%;height: 48px;color: #fff;text-align:center;border:0;margin-top:36px;font-size:16px;font-weight:normal;
	background-image: -moz-linear-gradient( 180deg, rgb(80,57,251) 0%, rgb(0,141,255) 100%);
	background-image: -webkit-linear-gradient( 180deg, rgb(80,57,251) 0%, rgb(0,141,255) 100%);
	background-image: -ms-linear-gradient( 180deg, rgb(80,57,251) 0%, rgb(0,141,255) 100%);
}
.info-wrap{position:absolute;left:0;right:0;bottom:0;width:75.52084%;/*1450px*/height:23.14815%;margin:0 auto;z-index:5;overflow:hidden;
	background-image: -moz-linear-gradient( -92deg, rgb(224,195,253) 0%, rgb(142,197,253) 100%);
	background-image: -webkit-linear-gradient( -92deg, rgb(224,195,253) 0%, rgb(142,197,253) 100%);
	background-image: -ms-linear-gradient( -92deg, rgb(224,195,253) 0%, rgb(142,197,253) 100%);
	box-shadow: 0px 5px 25.81px 3.19px rgba(3, 70, 143, 0.11);
}
.info-wrap .switch-btn{position:absolute;width:46px;height:46px;right:44px;top:43px;background:url(../images/switch-btn.png) 0 0 no-repeat;background-size: 100%;z-index:10;}
.info-wrap .switch-btn.up{background-position:0 -47px;}
.info-wrap .inbox{position:absolute;width:450px;left:0;right:0;top:0;bottom: 0;margin:auto;height:80px;/*overflow:hidden;*/display: flex;flex-direction: column;align-content: space-between;}
.info-wrap .header{width:100%;margin:0 auto;/*position: absolute;left: 50%;margin-left: -225px;top: 50%; margin-top: -38px;*/}
.info-wrap .header .hblogo{float:left;width:80px;height:71px;background: url(../images/hblogo1.png) no-repeat;margin-right:26px;}
.info-wrap .header p{float:left;font-size:24px;font-weight: bold;color:#5b85c5;white-space: nowrap;line-height:1.6em;margin-top:-2px;}
.info-wrap .header p span{display: block;font-size:18px;color:#5985c5;font-weight: normal;}
.lang_en .info-wrap .inbox{width:580px;}
.lang_fr .info-wrap .inbox{width:610px;}
.lang_en .info-wrap .header p span,.lang_fr .info-wrap .header p span{text-align: center;}
.lang_en .info-wrap .header p span:before,.lang_fr .info-wrap .header p span:before{content:'——';display: inline-block;vertical-align: 2px;margin-right:8px;}
.lang_en .info-wrap .header p span:after,.lang_fr .info-wrap .header p span:after{content:'——';display: inline-block;vertical-align: 2px;margin-left:8px;}
.info-wrap .menu-list{margin-left:14%;/*550px;*/padding-top:60px;margin-top:300px;width:86%;/*610px;*/}
.info-wrap .menu-list li{float:left;line-height:52px;height:52px;font-size:16px;width:40%;margin-right:10%;white-space: nowrap;}
.info-wrap .menu-list li a{display:block;padding-left:35px;color:#5985c5;background: url(../images/menu.png)left center no-repeat;}
.copyright{position: absolute;left:0;right:0;margin:0 auto;font-weight: lighter;bottom:0;z-index:10;color:#03468F;text-align:center;line-height:32px;  font-size: 12px;}
.copyright a{color:#03468F;}
@media screen and (max-width:800px){
	.info-wrap .switch-btn{top:15px;}
	.info-wrap .menu-list{margin:300px 0 0 15%;width:90%;}
	.lang_en .info-wrap .inbox,.lang_fr .info-wrap .inbox{width:80%;padding:0 10%;}
	.lang_en .info-wrap .header p,.lang_fr .info-wrap .header p{font-size:18px;}
	.lang_en .info-wrap .header .hblogo,.lang_fr .info-wrap .header .hblogo{width:60px;height:53px;background-size:100% auto;}
}
@media screen and (min-width:600px) and (max-height:790px){
	.info-wrap.show .inbox{margin-top:65px !important;animation:all 5s ;}
	.info-wrap .menu-list{padding-top:20px !important;}
	.info-wrap .menu-list li{line-height:42px !important;height:42px !important;}
}
@media screen and (min-width:600px) and (max-height:730px){
	.info-wrap .inbox{margin-top:35px !important;animation:all 5s ;}
	.info-wrap .menu-list{padding-top:20px !important;}
	.info-wrap .menu-list li{line-height:42px !important;height:42px !important;}
}
@media screen and (max-width:600px){
	.logo{left:10%;top:20px;width: 125px;background-size: 100% auto;height:47px;}
	.lang-select{height:24px;line-height: 24px;right:20px;border-radius:12px;top:20px;}
	.lang-select.show{height:96px;}
	.lang-select a,.lang-select span{line-height:24px;text-indent:12px;height:24px;padding-right:25px;font-size:12px;}
	.lang-select .arrow{width:10px;height:8px;background-size:100% auto;right:8px;top:8px;background-repeat:no-repeat;}
	.login-wrap{width:80%;padding:0 20px;animation:none;top:46%;height:330px;}
	.login-wrap h1{font-size:16px;white-space: nowrap;}
	.login-wrap h1:after{left:2px;}
	.form-item {display: flex;height:40px;line-height:40px;}
	.form-item label{width:36px;overflow:hidden;float:none;}
	.form-item label .icon{margin:0 8px;}
	.form-item label .user,.form-item label .password{width:18px;height:16px;background-size: 85%;}
	.form-item label .password{background-position: 0 -16px}
	.form-item .txt-input{line-height:40px;height:40px;float:none;}
	.login-form .submit{height:40px;}
	.lang_en .login-wrap h1, .lang_fr .login-wrap h1{font-size: 18px;font-weight: bold;white-space: break-spaces;line-height: 22px;text-align: left;}
	.info-wrap{width:90%;}
	.info-wrap .switch-btn{width:28px;height:28px;right:15px;top:20px;background-size:28px;}
	.info-wrap .switch-btn.up{background-position:0 -28px;}
	.info-wrap .inbox,.lang_en .info-wrap .inbox,.lang_fr .info-wrap .inbox{width:100%;padding:0;}
	.info-wrap .header{margin:0 auto;display:flex;align-items: center;justify-content:center;text-align: center;width:100%;}
	.info-wrap .header .hblogo,.lang_en .info-wrap .header .hblogo,.lang_fr .info-wrap .header .hblogo{float:none;width:40px;height:36px;margin-right:14px;background-size:100% auto;}
	.info-wrap .header p{float:none;font-size:17px;margin:0;line-height:1.125em;}
	.info-wrap .header p span{font-size:12px;letter-spacing:0.5px;margin-top: 7px;}
	.lang_en .info-wrap .header,.lang_fr .info-wrap .header{align-items:flex-start;}
	.lang_en .info-wrap .header p,.lang_fr .info-wrap .header p{white-space:break-spaces;line-height:1.125em;width:64%;margin-top:-2px;text-align: left;}
	.lang_fr .info-wrap .header p{width:66%;}
	.lang_en .info-wrap .header p span,.lang_fr .info-wrap .header p span{white-space: nowrap;text-align:left;}
	.lang_en .info-wrap .header p span:before,.lang_fr .info-wrap .header p span:before,.lang_en .info-wrap .header p span:after,.lang_fr .info-wrap .header p span:after{display: none;}
	.info-wrap .menu-list{margin-left:105px;padding-top:15px;margin-top:600px;width:auto;display:none;flex-direction: column;align-items: baseline;align-content: flex-end;flex: 1;}
	.info-wrap .menu-list.show{display: flex;}
	.info-wrap .menu-list li{float:none;margin-right:30px;line-height:inherit;height: auto;font-size: 14px;width: 100%;flex: 1;}
	.info-wrap .menu-list li a{display:block;padding-left:18px;color:#5985c5;background-size:12px;}
	.copyright{line-height:1.5em;font-size:10px;}
	.copyright a{display:block;}
}
@media screen and (max-width:420px){
	.info-wrap .menu-list{margin-left:127px;}
}
@media screen and (max-width:380px){
	.info-wrap .menu-list{margin-left:32.5%;}
}
@media screen and (max-width:350px){
	.lang-select{height:20px;line-height: 20px;right:20px;border-radius:10px;}
	.lang-select.show{height:80px;}
	.lang-select a,.lang-select span{line-height:20px;text-indent:8px;height:20px;font-size:12px;}
	.lang-select .arrow{top:6px;}
	.login-wrap{width:84%;height:300px;top:48%;}
	.login-wrap h1{font-size:14px;}
	.info-wrap .inbox {margin:auto;align-items: center;height:40px;}
	.info-wrap .header p{margin-top:-5px;}
	.info-wrap .header p span{margin-top:4px;line-height:1em;}
	.lang_en .info-wrap .header p, .lang_fr .info-wrap .header p{font-size:12px;}
	.lang_en .info-wrap .header p span, .lang_fr .info-wrap .header p span{font-size:10px;}
	.form-item{height:40px;line-height:40px;margin-top:15px;}
	.form-item label{width:46px;}
	.form-item label .icon{margin:0 8px;}
	.form-item .txt-input{height:40px;line-height:40px;font-size:14px;}
	.login-form .submit{font-size:16px;height:42px;border-radius:42px;margin-top:25px;}
	.info-wrap .switch-btn{top:12px;}
	.info-wrap .header{width:76%;}
	.info-wrap .menu-list{margin-left:48px;padding-top:15px;}
}
@keyframes boxShow {
	0% {
		width: 0px;
		height: 5px;
	}

	10% {
		width: 50px;
		height: 5px;
	}

	15% {
		width: 100px;
		height: 5px;
	}

	20% {
		width: 150px;
		height: 5px;
	}

	25% {
		width: 200px;
		height: 5px;
	}

	30% {
		width: 250px;
		height: 5px;
	}

	35% {
		width: 300px;
		height: 5px;
	}

	40% {
		width: 350px;
		height: 5px;
	}

	45% {
		width: 450px;
		height: 5px;
	}

	50% {
		width: 500px;
		height: 5px;
	}

	55% {
		height: 33px;
	}

	60% {
		height: 66px;
	}

	65% {
		height: 99px;
	}

	70% {
		height: 132px;
	}

	75% {
		height: 165px;
	}

	80% {
		height: 198px;
	}

	85% {
		height: 231px;
	}

	90% {
		height: 264px;
	}

	95% {
		height: 297px;
	}

	100% {
		height: 330px;
	}
}