@charset "utf-8";

* { padding:0; margin:0; font-weight:normal; font-style:normal; font-family:Arial,"Microsoft YaHei", "微软雅黑";}
html,body { width:100%; height:100%;}

a { color:#1388ca; text-decoration:none;}
a:hover,a:active { color:#f60;}

.excessive { transition:0.2s; -moz-transition:0.2s; -webkit-transition:0.2s; -o-transition:0.2s;}
.hidden { display:none;}
.opacity { opacity:1;}
.opacity:hover { opacity:0.7;}

.container_fluid { height:100%;}
.container_row { display:flex; align-items:stretch; height:100%;}
.propaganda { width:60%; position:relative; overflow:hidden; background:linear-gradient(to bottom, #020307 -50%, #2668e1 100%);}
.lcontainer_login { width:40%; background-color:#fff;}

.fog_row { width:200%; position:absolute; bottom:30%; left:0;}
.fog_txt { position:absolute; color:#fff; left:25%; user-select:none; opacity:.7; transform:translateX(-50%);}
.fog_txt span { font-size:2vw; letter-spacing:5px; position:relative; cursor:default; display:inline-block;}
.fog_txt span.active{ animation:smoke 2.5s linear forwards; transform-origin:bottom;}
.show{ animation:show-letter .5s linear forwards;}

.fog {  position:absolute;  height:100%;  width:100%;  overflow:hidden;}
.fog_img {  position: absolute;  height: 100vh;  width: 300vw; background-size:contain; background-position:center; background-repeat:repeat-x;}
.fog_img_1 {  background-image:url("../img/fog-1.png");  -webkit-animation:marquee 60s linear infinite; animation:marquee 60s linear infinite;}
.fog_img_2 {  background-image:url("../img/fog-2.png");  -webkit-animation:marquee 40s linear infinite; animation:marquee 40s linear infinite;}

@-webkit-keyframes marquee {
	0% { -webkit-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0);}
	100% { -webkit-transform:translate3d(-200vw, 0, 0); transform:translate3d(-200vw, 0, 0);}
}
@keyframes marquee {
	0% { -webkit-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0);}
	100% { -webkit-transform:translate3d(-200vw, 0, 0); transform:translate3d(-200vw, 0, 0);}
}
@keyframes show-letter{
	0% { opacity:0; filter:blur(20); transform:translateX(600px) translateY(-600px) rotate(360deg) scale(4);}
    100% { opacity:1; filter:blur(0); transform:translateX(0) translateY(0) rotate(0deg) scale(1);}
}
@keyframes smoke{
	0% { opacity:1; filter:blur(0); transform:translateX(0) translateY(0) rotate(0deg) scale(1);}
	80% { opacity:0; filter:blur(20px); transform:translateX(300px) translateY(-300px) rotate(360deg) scale(4);}
	100% { opacity:1; filter:blur(0);}
}

.login_fluid { width:80%; margin:10% auto;}
.login_title { font-size:32px; color:#555; line-height:32px;}
.login_title img { height:50px; padding-right:10px; vertical-align:middle;}
.login_title a { font-size:16px; padding-left:20px; color:#777;}
.login_title a:hover { color:#f60;}

.login_fluid h2 { padding-top:50px;}
.login_fluid h2 string { font-size:40px;}
.login_fluid h2 span { font-size:16px; padding-left:10px;}
.login_fluid h2 a { font-size:16px;}

.login_input input { border:1px solid #eee;  box-shadow:0 0 8px #eee; height:55px; line-height:55px; font-size:16px; width:100%; border-radius:10px; outline:none; margin-top:30px; text-indent:20px;}
.login_input textarea { border:1px solid #eee;  box-shadow:0 0 8px #eee; height:95px; line-height:150%; font-size:16px; width:100%; border-radius:10px; outline:none; margin-top:30px; box-sizing:border-box; padding:20px;}
.login_input input.err,
.login_input textarea.err { border:1px solid #f77;  box-shadow:0 0 8px #f77;}
.login_input input:focus,
.login_input textarea:focus { border:1px solid #3092f4; box-shadow:0 0 8px #3092f4;}
.login_input img { vertical-align:middle; cursor:pointer;}
.login_input .submit { margin-top:30px;}
.login_txt { display:none;}
.login_txt_open { padding:20px; line-height:200%;}
.login_txt_open p { text-indent:30px;}
.login_txt_open strong { font-weight:bold;}

.login_chkbox { margin-top:30px; user-select:none;}
.login_chkbox span { display:inline-block; border:1px solid #bbb; border-radius:5px; text-align:center; height:20px; line-height:20px; width:20px; margin-right:10px; cursor:pointer; box-shadow:0 0 8px #eee;}
.login_chkbox span:before { content:'\eab5'; font-family:'icofont'; speak:none; font-size:16px;}
.login_chkbox span.active { border-color:#191; box-shadow:0 0 4px #191;}
.login_chkbox span.active:before { content:'\e960'; color:#191;}

.login_find { display:flex;}
.login_find a { margin-top:10px; display:inline-block; font-size:14px; flex:1;}
.find { text-align:right;}

.login_select_top { margin-top:30px;}
.login_select,.login_select_none { display:block; padding:20px 0; cursor:pointer; color:#333;}
.login_select:before,.login_select_none:before { content:"\e90d"; font-family:'icofont'; speak:none; color:#f60;}
.login_select_none,.login_select_none:before { color:#aaa;}

.login_find_class { margin-top:20px; text-indent:10px; color:#555;}
.login_find_class span { color:#f60;}

.login_button { margin-top:100px;}

#login_err { color:#f00; font-size:16px; padding-left:10px;}
.submit { display:block; height:55px; line-height:55px; background-color:#1388ca; border-radius:10px; color:#fff; text-align:center; font-size:18px; margin-top:10px;}
.submit:hover,.submit:active { color:#fff;}

.login_auth_title { border-top:1px solid #ccc; margin-top:50px; display:block; position:relative; text-align:center;}
.login_auth_title span { background-color:#fff; top:-15px; line-height:30px; position:relative; padding:0 20px; font-size:16px;}
.login_auth_icon { display:flex; align-items:stretch;}
.login_auth_icon a { font-family:'icofont'; speak:none; font-size:32px; padding:20px 0; border-radius:10px; color:#1388ca; flex:1; text-align:center;}
.login_auth_icon a.none { color:#aaa;}

.copyright { margin-top:60px; font-size:14px; color:#777; line-height:200%;}
.copyright span { padding-left:10px; white-space:nowrap;}