@import "style.css";
@import "icomoon.css";
@import "cards.css";
@import "common.css";

html,
body {
    margin: 0 0
}

#main {
    margin: 0 0
}

#login {
    width: 100vw;
    height: 100vh;
    position: absolute;
    background-color: #58ca7e;
    background-image: url('../images/boys-3396713_1920.jpg');
    background-size: cover
}
.codeArea{
    overflow: hidden;
    float: left;
}
.codeArea p{
    text-align: center;
    color: white;
}
#login h1 {
    text-align: center;
    margin-top: 50px;
    color: #ffffff
}

#login .contact-form {
    width: 400px;
    height: 200px;
    margin: 100px auto;
    text-align: center
}

#login .contact-form input {
    width: 80%;
    height: 50px;
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 25px;
    text-align: center;
    border-radius: 10px;
    border-style: none;
    border-color: #ddd;
    opacity: 0.7
}

#login .contact-form input:focus {
    outline: none;
    opacity: 0.9
}

#login .contact-form input[type='button'] {
    cursor: pointer;
    border-style: none
}

#login .contact-form input[type='button']:hover {
    background-color: #ffb400
}

#defaultPage {
    width: 100%;
    height: 100%;
    background-color: #efefef
}

#defaultPage .preloader {
    position: absolute;
    margin-left: -55px;
    margin-top: -100px;
    height: 110px;
    width: 110px;
    left: 50%;
    top: 50%
}

#defaultPage svg {
    width: 110px;
    height: 110px
}

#defaultPage path {
    stroke: #9ea1a4;
    stroke-width: 0.25;
    fill: #241E20
}

#defaultPage #cloud {
    position: relative;
    z-index: 2
}

#defaultPage #cloud path {
    fill: #efefef
}

#defaultPage #sun {
    margin-left: -10px;
    margin-top: 6px;
    opacity: 0;
    width: 60px;
    height: 60px;
    position: absolute;
    left: 45px;
    top: 15px;
    z-index: 1;
    animation-name: rotate;
    animation-duration: 16000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear
}

#defaultPage #sun path {
    stroke-width: 0.18;
    fill: #9ea1a4
}

@keyframes rotate {
    0% {
        transform: rotateZ(0deg)
    }
    100% {
        transform: rotateZ(360deg)
    }
}

#defaultPage .rain {
    position: absolute;
    width: 70px;
    height: 70px;
    margin-top: -32px;
    margin-left: 19px
}

#defaultPage .drop {
    opacity: 1;
    background: #9ea1a4;
    display: block;
    float: left;
    width: 3px;
    height: 10px;
    margin-left: 4px;
    border-radius: 0px 0px 6px 6px;
    animation-name: drop;
    animation-duration: 350ms;
    animation-iteration-count: infinite
}

#defaultPage .drop:nth-child(1) {
    animation-delay: -130ms
}

#defaultPage .drop:nth-child(2) {
    animation-delay: -240ms
}

#defaultPage .drop:nth-child(3) {
    animation-delay: -390ms
}

#defaultPage .drop:nth-child(4) {
    animation-delay: -525ms
}

#defaultPage .drop:nth-child(5) {
    animation-delay: -640ms
}

#defaultPage .drop:nth-child(6) {
    animation-delay: -790ms
}

#defaultPage .drop:nth-child(7) {
    animation-delay: -900ms
}

#defaultPage .drop:nth-child(8) {
    animation-delay: -1050ms
}

#defaultPage .drop:nth-child(9) {
    animation-delay: -1130ms
}

#defaultPage .drop:nth-child(10) {
    animation-delay: -1300ms
}

@keyframes drop {
    50% {
        height: 45px;
        opacity: 0
    }
    51% {
        opacity: 0
    }
    100% {
        height: 1px;
        opacity: 0
    }
}

#defaultPage .text {
    font-family: Helvetica, 'Helvetica Neue', sans-serif;
    letter-spacing: 1px;
    text-align: center;
    margin-left: -43px;
    font-weight: bold;
    margin-top: 20px;
    font-size: 11px;
    color: #a0a0a0;
    width: 200px
}

#ad-nav {
    margin-bottom: 20px
}

#news {
    position: relative
}

#news #add-n {
    position: absolute;
    top: 5%;
    right: 0;
    left: 0;
    background-color: rgba(221, 221, 221, 0.98);
    z-index: 11;
    padding: 5em 0;
    text-align: center;
    border-radius: 20px
}

#news #add-n textarea {
    resize: none
}

#manager .addManager {
    margin-bottom: 20px
}

html,
body {
    font-family: '微软雅黑', Helvetica, Tahoma, Arial, 'Hiragino Sans GB', "Microsoft YaHei", SimSun, Heiti, sans-serif;
    overflow-x: hidden
}

nav .active {
    color: #1bbc9b !important
}

nav .active:hover {
    color: #21dfb8 !important
}

nav .nav-Item {
    font-size: 22px !important
}

.news-box {
    position: relative
}

.news-box .status {
    position: absolute;
    z-index: 11;
    text-align: center
}

.news-box .status.icon-cross2 {
    top: 15px;
    right: 15px;
    color: #fed330;
    z-index: 12;
    font-size: 25px
}

.news-box .status.box {
    display: none;
    font-size: 35px;
    background-color: rgba(255, 255, 255, 0.8);
    width: 100%;
    height: 100%;
    border-radius: 3px
}

.news-box .status.box .icon-box {
    position: absolute;
    top: 35%;
    right: 0;
    left: 0
}

.news-box .status.box i {
    margin-bottom: 35px;
    font-size: 80px;
    color: hotpink
}

#copyright {
    text-align: center
}

#footer img {
    margin: 20px 0
}

@media (min-width: 992px) {
    #footer {
        display: flex;
        align-items: center
    }

    #copyright {
        text-align: left
    }
}

#home #big-bg {
    background-position-x: right !important;
    background-image: url('../images/boys-3396713_1920.jpg')
}

#home #big-bg #home-topic .container .download-img img {
    width: 150px
}

#home #big-bg-2 {
    background: url(../images/demoPhoto4.jpg) repeat-y;
    background-position-x: right !important;
   background-position-y: 800px;
}

#community {
    font-family: '微软雅黑', Helvetica, Tahoma, Arial, 'Hiragino Sans GB', "Microsoft YaHei", SimSun, Heiti, sans-serif
}

#community h2 {
    color: #5bc540
}

#community .fh5co-post-meta {
    padding: 0;
    text-align: right;
    border-top: none
}

#join .topic {
    color: #323740
}

#join #company-intro .warp {
    margin-bottom: 100px;
    color: #323740;
    font-size: 21px
}

#join #company-intro .box {
    display: flex;
    align-items: center;
    justify-content: center
}

#join #company-intro .box h2 {
    text-align: center;
    color: #F1AE08;
    transition: .3s
}

#join #company-intro .box h2:hover {
    color: #FEC216
}

#join #company-intro .box .images {
    border-radius: 50%
}

#join #company-intro .box .text {
    text-indent: 2em
}

#join #company-intro .form-box {
    text-align: center;
    border: 1px solid #cccccc;
    border-radius: 20px;
    background-color: #ffffff;
    padding: 20px 0
}

#join #company-intro .form-box .join-form label {
    text-align: center
}

#spinner {
    position: fixed;
    z-index: 9999999;
    width: 100%;
    height: 100%;
    background-color: #efefef
}

#spinner .preloader {
    position: absolute;
    margin-left: -55px;
    margin-top: -100px;
    height: 110px;
    width: 110px;
    left: 50%;
    top: 50%
}

#spinner svg {
    width: 110px;
    height: 110px
}

#spinner path {
    stroke: #9ea1a4;
    stroke-width: 0.25;
    fill: #241E20
}

#spinner #cloud {
    position: relative;
    z-index: 2
}

#spinner #cloud path {
    fill: #efefef
}

#spinner #sun {
    margin-left: -10px;
    margin-top: 6px;
    opacity: 0;
    width: 60px;
    height: 60px;
    position: absolute;
    left: 45px;
    top: 15px;
    z-index: 1;
    animation-name: rotate;
    animation-duration: 16000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear
}

#spinner #sun path {
    stroke-width: 0.18;
    fill: #9ea1a4
}

@keyframes rotate {
    0% {
        transform: rotateZ(0deg)
    }
    100% {
        transform: rotateZ(360deg)
    }
}

#spinner .rain {
    position: absolute;
    width: 70px;
    height: 70px;
    margin-top: -32px;
    margin-left: 19px
}

#spinner .drop {
    opacity: 1;
    background: #9ea1a4;
    display: block;
    float: left;
    width: 3px;
    height: 10px;
    margin-left: 4px;
    border-radius: 0px 0px 6px 6px;
    animation-name: drop;
    animation-duration: 350ms;
    animation-iteration-count: infinite
}

#spinner .drop:nth-child(1) {
    animation-delay: -130ms
}

#spinner .drop:nth-child(2) {
    animation-delay: -240ms
}

#spinner .drop:nth-child(3) {
    animation-delay: -390ms
}

#spinner .drop:nth-child(4) {
    animation-delay: -525ms
}

#spinner .drop:nth-child(5) {
    animation-delay: -640ms
}

#spinner .drop:nth-child(6) {
    animation-delay: -790ms
}

#spinner .drop:nth-child(7) {
    animation-delay: -900ms
}

#spinner .drop:nth-child(8) {
    animation-delay: -1050ms
}

#spinner .drop:nth-child(9) {
    animation-delay: -1130ms
}

#spinner .drop:nth-child(10) {
    animation-delay: -1300ms
}

@keyframes drop {
    50% {
        height: 45px;
        opacity: 0
    }
    51% {
        opacity: 0
    }
    100% {
        height: 1px;
        opacity: 0
    }
}

#spinner .text {
    font-family: Helvetica, 'Helvetica Neue', sans-serif;
    letter-spacing: 1px;
    text-align: center;
    margin-left: -43px;
    font-weight: bold;
    margin-top: 20px;
    font-size: 11px;
    color: #a0a0a0;
    width: 200px
}

.fh5co-nav-style-1 {
    margin-top: 0;
}