@charset "utf-8";
/* CSS Document 
Create:2021/7/6
Author:Xingdong
Copyright:华商网络 http://www.dgce.com.cn
*/
html {
	font-family:"Times New Roman";
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	width:100%;height:100%;
}
body {background: url(../images/login_bg.jpg)no-repeat center;width:100%;height: 100%;background-size: 100%100%;}
body{display: flex;align-items: center; /*定义body的元素垂直居中*/justify-content: center; /*定义body的里的元素水平居中*//* width:100%; */overflow: hidden;}
ul {
	padding: 0;
	margin: 0
}
ul li {
	list-style: none
}
a {
	color: #1890ff;
	text-decoration: none
}
h1, h2, h3, h4, h5 {
	margin: 0
}
body{position:relative;}

.hs_inse img{max-width:100%;}
.hs_logo{/* width:100%; */position: absolute;top: 10%;left: 75%;}

.mian_ser{width: 63vw;display: flex;justify-content: flex-end;margin-top: 10%;}
.hs_login_app{/* max-width: 1200px; *//* background-repeat:no-repeat; *//* background-position:center top; *//* background-image:url(../images/login_bg.png); */}
.copyright{left:0;width:100%;text-align:center;padding:60px 0 20px 0;color:#ffffff;line-height:1.8}
.copyright a{color:#FFF;font-height:bold;}
.hs_info{width: 60%;/* margin:auto; */}
.hs_info .hs_logo{padding:40px 0 0 0;width:100%;height:60px;text-align:center;}
.hs_text{font-size: 2vw;color: #fff;font-weight: bold;text-align: center;}
.hs_login_info{
    width: 65%;
    margin: auto;
}
#Hs_system_form{
	padding-top: 20px;
	margin:auto;
}
#Hs_system_form .HsLoginForm{
}
.HsLoginForm .HsLogin{
	width: 86%;
	position: relative;
	margin: 15px auto 15px auto;
}
.HsLoginForm .HsLogin input{
	width:98%;
	height: 45px;
	text-indent: 3.5rem;
	font-size: 14px;
	border:1px solid #dcdcdc;
	border-radius:6px;
	-moz-border-radius: 6px;
	-khtml-border-radius: 6px;
	-webkit-border-radius: 6px;
}
.HsLoginForm .HsLogin input.vcode{
	width:50%;
	height: 46px;
	text-indent: 3.5rem;
	font-size: 14px;
	border:1px solid #dcdcdc;
	border-radius:6px;
	-moz-border-radius: 6px;
	-khtml-border-radius: 6px;
	-webkit-border-radius: 6px;
}
#Hs_system_form .HsLoginForm .HsLoginButton{
	width: 86%;
	margin: auto;
}
.HsLoginButton #button{
	width: 100%;
	background-color: #3e79ff;
	border: none;
	color: white;
	padding: 12px 0;
	font-size: 16px;
	display:block;
	border-radius: 5px;
	-moz-border-radius: 56px;
	-khtml-border-radius: 56px;
	/* -webkit-border-radius: 56px; */
	/* -webkit-box-shadow:2px 2px 8px #d4e5fc; */
	-moz-box-shadow:2px 2px 8px #d4e5fc;
	/* box-shadow:2px 2px 8px #d4e5fc; */
}
.HsLoginForm .HsLogin .fainput{
    position:absolute;
    left: 20px;
    top: 13px;
    font-size: 20px;
    color:#999;
}
.HsLoginForm .HsLogin .faeye{
    position: absolute;
    right: 20px;
    top: 12px;
    font-size: 20px;
    cursor: pointer;
}
.clear{clear:both;width:100%;}



/* 圆圈 */

 @keyframes animtran {
            from {
                transform: rotateZ(0deg);
            }
            to {
                transform: rotateZ(360deg);
            }
        }

        @keyframes animtrans {
            from {
                transform: rotateZ(360deg);
            }
            to {
                transform: rotateZ(0deg);
            }
        }

        @-webkit-keyframes animtran {
            from {
                transform: rotateZ(0deg);
            }
            to {
                transform: rotateZ(360deg);
            }
        }

        @-webkit-keyframes animtrans {
            from {
                transform: rotateZ(360deg);
            }
            to {
                transform: rotateZ(0deg);
            }
        }

        #advert {
            width: 20%;
            height: 100%;
            position: absolute;
            right: 5%;
            bottom: -47%;
            z-index: -1;
        }
		#advert2{position:relative;}

        #advert .bg1 {
            width: 800px;
            height: 800px;
            position: absolute;
            top: 20px;
            left: 20px;
            border-radius: 50%;
            z-index: 1;
                 /* 背景色渐变 */
                     /* 规定背景的划分区域 */
            background: repeating-linear-gradient(#19379f, #020b42 120%, #1b2c7b 11%);
        }

        #advert .bg1 div {
            width: 800px;
            height: 800px;
            border: #1946aa 1px solid;
            border-radius: 50%;
            position: relative;
            animation: animtran 16s linear infinite;
            -webkit-animation: animtran 16s linear infinite;
        }

        #advert .bg1 img {
            max-width: 50px;
            position: absolute;
            animation: animtrans 16s linear infinite;
            -webkit-animation: animtrans 16s linear infinite;
            opacity: 0.8;
        }

        #advert .bg1 .icon01 {
              bottom: 31%;
              left: -0.5%;
              opacity: 0.8;
        }

        #advert .bg1 .icon02 {
            top: 11.5%;
            left: 16%;
        }

        #advert .bg1 .icon03 {
            top: 29%;
            left: 0%;
        }

        #advert .bg1 .icon04 {
            top: 24%;
            right: 5.5%;
        }

        #advert .bg1 .icon05 {
            top: 45%;
            right: -3%;
        }

        #advert .bg1 .icon06 {
            bottom: 35%;
            right: 1%;
        }

        #advert .bg1 .icon07 {
            bottom: -25px;
            left: 105px;
        }

        #advert .bg2 {
            width: 600px;
            height: 600px;
            position: absolute;
            top: 135px;
            left: 135px;
            z-index: 9;
            background: repeating-linear-gradient(#19379f, #020b42 120%, #1b2c7b 11%);
            z-index: 2;
            border-radius: 50%;
        }

        #advert .bg2 div {
            width: 600px;
            height: 600px;
            border: #1946aa 1px solid;
            border-radius: 50%;
            position: relative;
            animation: animtrans 12s linear infinite;
            -webkit-animation: animtrans 12s linear infinite;
        }

        #advert .bg2 span {
            display: inline-block;
            background-color: #2074c2;
            overflow: hidden;
            border-radius: 50%;
            position: absolute;
            opacity: 0.8;
            animation: animtran 6s linear infinite;
            -webkit-animation: animtran 6s linear infinite;
        }

        #advert .bg2 img {
            padding: 1px;
            display: block;
        }

        #advert .bg2 .icon08 {
            top: 28%;
            left: 3.5%;
        }

        #advert .bg2 .icon09 {
            bottom: 26%;
            left: 2%;
        }

        #advert .bg2 .icon10 {
            bottom: 42%;
            right: -0.5%;
        }


        #advert .bg3 {
            width: 400px;
            height: 400px;
            position: absolute;
            top: 240px;
            left: 240px;
            z-index: 8;
            background: repeating-linear-gradient(#19379f, #020b42 120%, #1b2c7b 11%);
            z-index: 3;
            border-radius: 50%;
        }

        #advert .bg3 div {
            width: 400px;
            height: 400px;
            border: #1946aa 1px dotted;
            border-radius: 50%;
            position: relative;
            animation: animtran 8s linear infinite;
            -webkit-animation: animtran 8s linear infinite;
        }

        #advert .bg3 span {
            display: inline-block;
            opacity: 0.8;
            background-color: #2074c2;
            overflow: hidden;
            border-radius: 50%;
            position: absolute;
            animation: animtrans 4s linear infinite;
            -webkit-animation: animtrans 4s linear infinite;
        }

        #advert .bg3 img {
            padding: 1px;
            display: block;
        }

        #advert .bg3 .icon11 {
            top: 25%;
            right: 1%;
        }

        #advert .bg3 .icon12 {
            bottom: 23%;
            right: 4%;
        }

        #advert .content {
           
            background: linear-gradient(to right, #fa71ad, #c77dd1);
            position: absolute;
            z-index: 11;
            left: 85px;
            top: 125px;
            border-radius: 5px;
            text-align: center;
            line-height: 50px;
            color: #fff;
            font-size: 20px;
            box-shadow: #f6f6f6 8px 8px 8px 4px;
            cursor: pointer;
        }


        @keyframes ani-one {
            from {
                left: 260px;
            }
            to {
                left: 16px
            }
        }

        @keyframes ani-two {
            from {
                left: 260px;
            }
            to {
                left: 70px
            }
        }

        @keyframes ani-three {
            from {
                top: 0;
                left: 0;
            }
            to {
                top: 8px;
                left: 8px;
            }
        }

        @keyframes ani-four {
            0% {
                width: 130px;
                height: 50px;
                left: 85px;
                top: 125px;
                box-shadow: #f6f6f6 8px 8px 8px 4px;
                border: #eee 0px solid;
                margin-left: 0;
            }
            100% {
                width: 259px;
                height: 333px;
                left: 50%;
                top: 0px;
                box-shadow: #FFFFFF 0 0 0 0;
                border: #eee 1px solid;
                margin-left: -130px;
            }
        }

        @keyframes ani-five {
            from {
                opacity: 1;
            }
            to {
                opacity: 0;
            }
        }

        @keyframes ani-six {
            from {
                left: 260px;
            }
            to {
                left: 0;
            }
        }

        @-webkit-keyframes ani-one {
            from {
                left: 260px;
            }
            to {
                left: 16px
            }
        }

        @-webkit-keyframes ani-two {
            from {
                left: 260px;
            }
            to {
                left: 70px
            }
        }

        @-webkit-keyframes ani-three {
            from {
                top: 0;
                left: 0;
            }
            to {
                top: 8px;
                left: 8px;
            }
        }

        @-webkit-keyframes ani-four {
            0% {
                width: 130px;
                height: 50px;
                left: 85px;
                top: 125px;
                box-shadow: #f6f6f6 8px 8px 8px 4px;
                border: #eee 0px solid;
                margin-left: 0;
            }
            100% {
                width: 259px;
                height: 333px;
                left: 50%;
                top: 0px;
                box-shadow: #FFFFFF 0 0 0 0;
                border: #eee 1px solid;
                margin-left: -130px;
            }
        }

        @-webkit-keyframes ani-five {
            from {
                opacity: 1;
            }
            to {
                opacity: 0;
            }
        }

        @-webkit-keyframes ani-six {
            from {
                left: 260px;
            }
            to {
                left: 0;
            }
        }

        #applyfor {
            width: 259px;
            height: 333px;
            margin: 20% auto;
            position: relative;
            display: none;
        }

        #applyfor form {
            padding: 13px 16px 30px;
            width: 225px;
            height: 288px;
            border: #eee 1px solid;
            border-radius: 6px;
            /* box-shadow: #f6f6f6 10px 10px 0px; */
            position: relative;
            background-color: #fff;
            overflow: hidden;
        }

        #applyfor #shadow {
            width: 259px;
            height: 333px;
            border-radius: 5px;
            position: absolute;
            z-index: -1;
            top: 0;
            left: 0;
            background-color: #f3f3f3;
        }

        #applyfor button {
            width: 120px;
            height: 46px;
            background: linear-gradient(to right, #fa71ad, #c77dd1);
            border-radius: 5px;
            text-align: center;
            line-height: 46px;
            cursor: pointer;
            color: #fff;
            font-size: 20px;
            box-shadow: #f6f6f6 8px 8px 8px 4px;
            border: none;
            margin: 30px 0;
            padding: 0;
            position: absolute;
            top: 228px;
            left: 260px;
        }

        #applyfor input {
            width: 225px;
            border: none;
            border-bottom: #eee 1px solid;
            margin-top: 20px;
            padding: 10px 0 10px 26px;
            font-size: 16px;
            box-sizing: border-box;
            background-repeat: no-repeat;
            background-size: auto 18px;
            background-position: 0 center;
            position: absolute;
            left: 260px;
        }

        #applyfor input:nth-child(2) {
            background-image: url(icons/tower.png);
            margin-top: 30px;
            top: 41px;
        }

        #applyfor input:nth-child(3) {
            background-image: url(icons/people.png);
            top: 110px;
        }

        #applyfor input:nth-child(4) {
            background-image: url(icons/tel.png);
            top: 169px;
        }

        #applyfor form div {
            position: absolute;
            width: 257px;
            height: 50px;
            line-height: 50px;
            top: 0;
            left: 0;
            background-color: #f6f6f6;
        }

        #applyfor i {
            display: inline-block;
            width: 6px;
            height: 18px;
            background: linear-gradient(to bottom, #fa71ad, #c77dd1);
            border-radius: 2px;
            position: absolute;
            top: 16px;
            left: 16px;
        }

        #applyfor span {
            margin-left: 34px;
            color: #333333;
            /* position: absolute;
            display: inline-block;
            width: 64px; */
        }

        input::-webkit-input-placeholder {
            /* WebKit browsers */
            color: #999999;
        }

        input:-moz-placeholder {
            /* Mozilla Firefox 4 to 18 */
            color: #999999;
        }

        input::-moz-placeholder {
            /* Mozilla Firefox 19+ */
            color: #999999;
        }

        input:-ms-input-placeholder {
            /* Internet Explorer 10+ */
            color: #999999;
        }

        .animation-paused {
            animation-play-state: paused !important;
            -webkit-animation-play-state: paused !important;
        }

        .animation-one {
            animation: ani-one 0.6s ease 1;
            -webkit-animation: ani-one 0.6s ease 1;
        }

        .animation-two {
            animation: ani-two 0.6s ease 1;
            -webkit-animation: ani-two 0.6s ease 1;
        }

        .animation-three {
            animation: ani-three 0.6s ease 1;
            -webkit-animation: ani-three 0.6s ease 1;
        }

        .animation-four {
            animation: ani-four 0.3s ease 1;
            -webkit-animation: ani-four 0.3s ease 1;
        }

        .animation-five {
            animation: ani-five 0.5s ease 1;
            -webkit-animation: ani-five 0.5s ease 1;
        }

        .animation-six {
            animation: ani-six 0.6s ease 1;
            -webkit-animation: ani-six 0.6s ease 1;
        }

        .opacity0 {
            opacity: 0;
        }
		
		
		
		
/* 	粒子 */
        .point,.point::before,.point::after{position: absolute;width: 12px;height: 12px;border-radius: 50%;content: '';}
        .point::before{animation: scale 2s infinite; }
        .point::after{animation: scale2 2s infinite; }
		.point2::before{animation: scale 3s infinite; }
		.point2::after{animation: scale2 3s infinite; }
		.point3::before{animation: scale 4s infinite; }
		.point3::after{animation: scale2 4s infinite; }
		
		.point4::before{animation: scale 5s infinite; }
		.point4::after{animation: scale2 5s infinite; }
        @keyframes scale{0%{ transform: scale(1); opacity:.9}100%{ transform: scale(6); opacity: 0;}}
        @keyframes scale2{0%{ transform: scale(1);opacity:.9;}100%{ transform: scale(12);opacity:0;}}
        

        .point,.point::before,.point::after{
        /* 设置颜色 */
        background-color: rgba(1, 88, 255, .9);}
        .point2,.point2::before,.point2::after{
        /* 设置颜色 */
        background-color:rgba(1, 88, 255, .9);}
        .point3,.point3::before,.point3::after{
        /* 设置颜色 */
        background-color:  rgba(1, 88, 255, .9);}
        .point4,.point4::before,.point4::after{
        /* 设置颜色 */
        background-color:  rgba(1, 88, 255, .9);}
        
		.content img{width: 100%;transform: rotateX(30deg);}
		.content{overflow: hidden;position: absolute;background-size: 100% 100%;left: 5%;width: 35%;}
		.point{top: 55%;left: 68%;}
		.point2{top: 44%;left: 39.5%;}
		.point3{top: 46%;left: 82%;}
		.point4{top: 61%;l;left: 49%;}