@font-face {
    font-family: 'Comfortaa-Light';
    src: url('../js/fonts/Comfortaa-Light.ttf');
}
@font-face {
    font-family: 'Lato-Regular';
    src: url('../js/fonts/Lato-Regular.ttf');
}
@font-face {
    font-family: 'Comfortaa-Bold';
    src: url('../js/fonts/Comfortaa-Bold.ttf');
}
@font-face {
    font-family: 'Comfortaa-Regular';
    src: url('../js/fonts/Comfortaa-Regular.ttf');
}
:root{
    --alien_width:90px;
}
body {margin: 0px;padding: 0px;}

.show_a{ height: 5px;width:1%;background-color: #4faeaf;margin: 0px auto;top: 45%;position: relative;}

.social_icons {position: relative; }
.facebook {position: absolute;top: 40px;right: 60px; }
.linkedin { position: absolute;top: 40px;right: 30px; }


.m_container {width: 100%;height: 100%;margin: 0px;padding: 0px;background-repeat: no-repeat;background-size: 100% 100%;}
.m_up {height: 87%;width: 100%;}
.m_up_top {width: 100%;height: 25%;text-align: center;padding: 10px 0px;}
.m_up_top > img {height: 73%; width: auto;}
/*.m_up_top_a{*/
/*    border-radius:50%;*/
/*    position: absolute;width:50%;height: 35%;z-index: 10;left:0; right:0;margin: auto;*/
/*    background: -webkit-radial-gradient( rgba(0,0,0,0.5) 3% ,rgba(0,0,0,0 ) 70%); !* Safari 5.1 - 6 *!*/
/*    background: -o-radial-gradient( rgba(0,0,0,0.5) 3% ,rgba(0,0,0,0 ) 70%); !* Opera 11.1 - 12*!*/
/*    background: -moz-radial-gradient( rgba(0,0,0,0.5) 3% ,rgba(0,0,0,0 ) 70%); !* Firefox 3.6 - 15*!*/
/*    background: radial-gradient( rgba(0,0,0,0.5) 3% ,rgba(0,0,0,0 ) 70%); !* 标准的语法 *!*/
/*}*/
.m_up_mid {  width: 100%; height: 60%; text-align: center;}
.m_up_mid_c { width: 100%; text-align: center;padding-top:3%; }
.m_up_mid_c > img:last-child { width: 65%; }
.m_up_mid_t { padding-top: 6%;height: 14%;margin: 0px auto;}
.m_up_mid_txt {font-size: 30px;letter-spacing: 2px;font-family: Comfortaa-Light;font-weight: 600;margin-top: 20px;color: #ffffff;}
.m_up_mid_b { width: 100%; text-align: center; padding-top: 4%; height: 25%;}
.m_up_mid_b > img {height: 100%;width: auto;}
.m_up_mid_b > img:hover{cursor: pointer;}
.m_bot {
    height: 13%;
    width: 100%;
    background: -webkit-linear-gradient(left,rgba(8,49,0,0.1),rgba(8,49,0,0.7),rgba(8,49,0,0.1)); /* Safari 5.1 - 6 */
    background: -o-linear-gradient(right,rgba(8,49,0,0.1),rgba(8,49,0,0.7),rgba(8,49,0,0.1)); /* Opera 11.1 - 12*/
    background: -moz-linear-gradient(right,rgba(8,49,0,0.1),rgba(8,49,0,0.7),rgba(8,49,0,0.1)); /* Firefox 3.6 - 15*/
    background: linear-gradient(to right, rgba(8,49,0,0.1), rgba(8,49,0,0.7),rgba(8,49,0,0.1)); /* 标准的语法 */
    text-align: center;
}
.m_bot p{
    margin: 0px;
    color: #ffffff;
    padding-left: 5%;
    padding-right: 5%;
    font-family: Lato-Regular;
    text-align: center;
}
/*.m_bot>p:first-child{padding-top:1%;}*/

.alien_container{width: 100%;height:100%;position: absolute;left: 0px;top: 0px;pointer-events:none}
.alien_in{
    /*background-image:url("../image/aliens.png");*/
    background-repeat: no-repeat;
    background-position: left;
    background-size:100% 100%;
    width: var(--alien_width);
    height: calc(var(--alien_width)/0.67);
    position: absolute;
    pointer-events:none;
}
.alien_in_a{
    /*width: var(--alien_width);*/
    height: auto;
    position: absolute;
    pointer-events:none;

}

.cloud_container{width: 100%;height:100%;position: absolute;left: 0px;top: 0px;pointer-events:none}
.clouds{
    display: block;
    position: absolute;
    filter:alpha(Opacity=80);-moz-opacity:0.8;opacity: 0.8;
    width:auto;
    height: 70%;
    pointer-events:none;
}

.sub_container{
    margin: 0px;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    position: absolute;
    z-index: 9900;
    background-image:url("../images/black.png");
    background-repeat: repeat;
}
.sub_message{
    width: 180px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    top: 100px;
    margin: 0px auto;
    display: block;
    position: absolute;
    z-index: 9990;
    background-color:rgba(0,150,136,0.8);

}
.sub_row{
    height: 80%; color: #ffffff;width: 90%;max-width: 810px;margin: 5% auto 4% auto;min-height: 500px;
}
.sub_row_top{
    height: 80px;text-align: left;
}
.sub_row_top>span{
    letter-spacing:2px;margin-top: 20px;line-height: 60px;display: block;float: left;font-family: Comfortaa-Regular;font-size: 36.63px;
}
.sub_row_top>span:hover{
    cursor: pointer;
}
.sub_row_top>img{
    height: 46px;width: 46px;display: block;float: right;padding-top: 24px;
}
.sub_row_top>img:hover,.sub_row_input>img:hover{
    cursor: pointer;
}

.sub_row_form{height: 70px;width: 100%}
.sub_row_forma{width: 100%}
.sub_row_formb{min-height: 225px;}
.sub_row_form_txt{
    display: block;
    float: left;
    letter-spacing:3px;
    text-align: left;
    width: 20%;
}
.sub_row_form_txt>span{
    line-height: 60px;
    font-size: 24px;
    font-family:Comfortaa-Regular;
}
.sub_row_form_input{
    width: 80%;
    text-align: left;
    display: block;
    float: left;
    padding:7px 0px;

}
.sub_row_form_input>input{
    line-height: 36px;
    width: 100%;
    color: #000000;
}
.sub_row_form_input>textarea{
    display: block;
    margin: 0 auto;
    overflow: hidden;
    width: 100%;
    font-size: 14px;
    height: 222px;
    line-height: 24px;
    padding: 2px;
    resize: none;
    color: #000000;
}

.sub_row_button:hover{
    cursor: pointer;
}

.sub_row_bot{
    width:100%;padding-left: 20%;
}
.sub_row_bot>img{
    width: 127px;
    height: 127px;
}

@media screen and (max-width: 770px) {
    .m_container {
        width: 100%;
        height: 100%;
        margin: 0px;
        padding: 0px;
        background-image: url("../images/bg_ipad.jpg");
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .m_up_mid_c > img {height: auto;width: 95%;}
    /*.m_up_mid_t {padding-top: 20%; height: 12%;}*/
    .m_up_mid_t {padding-top: 20%; width: 100%;height: auto;}
    .m_up_mid_t > img {  width: 95%;  height: auto;  }
    .m_up_mid_b { width: 100%;text-align: center; padding-top: 10%; height: 25%; }
    .m_up_mid_txt{font-size:30px;}
    .m_bot p{font-size: 17px;padding-left: 4%;padding-right: 4%}
    /*.m_bot>p:first-child{padding-top:4%;}*/
    .sub_row{margin-top: 15%;height: 70%}
    .sub_row_form_txt{width: 25%}
    .sub_row_form_input{width: 75%}
    .sub_row_bot{
        width:100%;padding-left: 25%;
    }
    .sub_row_form_txt>span{font-size: 22px;}
    #ay{
        display: none;
    }
}

@media screen and (max-width: 415px) {
    .m_container {
        width: 100%;
        height: 100%;
        margin: 0px;
        padding: 0px;
        background-image: url("../images/bg_mobile.jpg");
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .m_up_mid_txt {font-size: 22px;letter-spacing: 1px;font-family: Comfortaa-Light;font-weight: 600;margin-top: 20px;color: #ffffff;}
    .m_up_mid_t {  height: 45%;padding-top: 5%;}
    .m_up_mid_b { width: 100%;text-align: center; padding-top: 5%; height: 25%; }
    .m_up_mid_t > img {  width: 95%;  height: auto;  }
    #m_img {  content: url("../images/mid_txt_m.png");}
    .m_bot p{font-size: 14px; padding-left: 8%;padding-right: 8%}
    .m_bot>p:first-child{padding-top: 4%;width: 240px;margin: 0px auto;}
    .m_bot>p:last-child{display: none}
    .sub_row{margin-top: 10%;height: 70%}
    .sub_row_form_txt{width: 40%}
    .sub_row_form_input{width: 60%;}
    .sub_row_bot{
        width:100%;padding-left: 40%;
    }
    .sub_row_form_txt>span{font-size: 18px;}
    .sub_row_bot>img{
        width: 90px;
        height: 90px;
    }
    .sub_row_formb{min-height: 135px;}
    .sub_row_form_input>textarea{height: 120px;}

    .clouds{
        height: 40%;
    }
    #ay{
        display: none;
    }
    .m_up_top{height: 20vh}
}