/*--A Design by W3layouts 
Author: W3layout
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
--*/
/*--- reset code ---*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, dl, dt, dd, ol, nav ul, nav li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

ol, ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* start editing from here */
a {
    text-decoration: none;
}

.txt-rt {
    text-align: right;
}

/* text align right */
.txt-lt {
    text-align: left;
}

/* text align left */
.txt-center {
    text-align: center;
    /*-- W3Layouts --*/
}

/* text align center */
.float-rt {
    float: right;
}

/* float right */
.float-lt {
    float: left;
}

/* float left */
.clear {
    clear: both;
}

/* clear float */
.pos-relative {
    position: relative;
}

/* Position Relative */
.pos-absolute {
    position: absolute;
}

/* Position Absolute */
.vertical-base {
    vertical-align: baseline;
}

/* vertical align baseline */
.vertical-top {
    vertical-align: top;
}

/* vertical align top */
nav.vertical ul li {
    display: block;
}

/* vertical menu */
nav.horizontal ul li {
    display: inline-block;
}

/* horizontal menu */
img {
    max-width: 100%;
}

/*--- end reset code ---*/
body {
    background: url(/assets/img/login/bg.png);
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    -ms-background-size: 100% 100%;
    font-family: 'Sansita', sans-serif;
}

*, *:before, *:after {
    box-sizing: border-box;
}

html {
    overflow-y: scroll;
}

h1 {
    font-size: 40px;
    font-weight: normal;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 50px 0;
    color: #fff;
}

.form-head-w3l h2 {
    text-align: center;
    font-size: 40px;
    width: 60px;
    height: 60px;
    line-height: 40px;
    border-radius: 50%;
    border: 2px solid #3e3939;
    margin: 0 auto;
    background: #00CED1;
    text-shadow: 2px 2px 3px;
    font-weight: 600;
    color: #3e3939;
}

.form-w3ls {
    position: relative;
    left: 50%;
    /*top: 50%;*/
    transform: translate(-50%, 0%);
    background: url(/assets/img/login/frombg.png) no-repeat center center;
    background-size: cover;
    width: 1300px;
    height: 800px
}

.title h1 {
    padding: 0;
    margin-bottom: 50px;
    text-align: center;
    color: #333333;
    font-size: 20px;
    font-weight: 400;
}

.tab-content {
    position: absolute;
    left: 16%;
    top: 25%;
    width: 400px;
    /*height: 600 ox;*/
}

.form-w3ls .right {
    position: absolute;
    right: 10%;
    top: 25%;
}

div#signin-agile .tage input[type="checkbox"] {
    width: 14px;
    height: 14px;
    border: 1px solid #333;
    vertical-align: middle;
    display: inline-block;
}

.tage span {
    font-size: 14px;
    color: #999999;
}

.tab-group {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 155px;
}

.tab-group:after {
    content: "";
    display: table;
    clear: both;
}

.tab-group li a {
    display: block;
    text-decoration: none;
    padding: 15px;
    color: #212121;
    font-size: 20px;
    margin-right: 25px;
    float: left;
    text-align: center;
    cursor: pointer;
    -webkit-transition: .5s ease;
    transition: .5s ease;
}

.tab-group li a:hover {
    color: #212121;
}

.tab-group .active a {
    color: #212121;
}

.cl-effect-4 li a {
    position: relative;
}

.cl-effect-4 li a::after {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 1px;
    background: #00CED1;
    content: '';
    opacity: 0;
    -webkit-transition: height 0.3s, opacity 0.3s, -webkit-transform 0.3s;
    -moz-transition: height 0.3s, opacity 0.3s, -moz-transform 0.3s;
    transition: height 0.3s, opacity 0.3s, transform 0.3s;
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    transform: translateY(-10px);
}

.cl-effect-4 li.active a::after, .cl-effect-4 li a:hover::after, .cl-effect-4 li a:focus::after {
    height: 2px;
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    transform: translateY(0px);
}

/*-- Sign In Form --*/
p.header {
    font-size: 16px;
    font-weight: 500;
    color: #212121;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.input_item {
    width: 400px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    background-color: #fff;
    border: 1px solid #EBEBEB;
    border-radius: 30px;
    height: 50px;
    overflow: hidden;
}

.input_item img {
    width: 30px;
    padding-left: 10px;
}

div#signin-agile input[type="text"], div#signin-agile input[type="password"], div#signup-agile input[type="text"], div#signup-agile input[type="email"], div#signup-agile input[type="password"] {
    width: 370px;
    height: 48px;
    outline: none;
    border: none;
    padding-left: 15px;
}

div#signin-agile input[type="text"]:focus, div#signin-agile input[type="password"]:focus, div#signup-agile input[type="text"]:focus, div#signup-agile input[type="email"]:focus, div#signup-agile input[type="password"]:focus {
    /*background-color: #AFEEEE;*/
    /*border-color: r #00CED1;*/
}

/*--验证码--*/
div#signin-agile input[name="captcha"] {
    width: 78%;
}

div#signin-agile .code {
    position: relative;
    /*width: 20%;*/
    /*top: 15px;*/
}

div#signin-agile .code img {
    width: 140px;
    height: 40px;
}

.tage {
    cursor: pointer;
}

/*--checkbox--*/
div#signin-agile input[type="checkbox"] {
    display: none;
}

div#signin-agile input[type="checkbox"] + label {
    position: relative;
    padding-left: 2em;
    border: none;
    outline: none;
    font-size: 1em;
    color: #212121;
    font-weight: 400;
    cursor: pointer;
}

div#signin-agile input[type="checkbox"] + label span:first-child {
    width: 14px;
    height: 14px;
    /*border: 2px solid #00CED1;*/
    position: absolute;
    left: 0;
    /*background: #00CED1;*/
    top: 3px;
}

div#signin-agile input[type="checkbox"]:checked + label span:first-child:before {
    content: "";
    background: url(/assets/img/login/tick.png) no-repeat;
    position: absolute;
    left: 0px;
    top: 0px;
    font-size: 10px;
    width: 10px;
    height: 10px;
}

/*--//checkbox--*/
div#signin-agile .sign-in {
    margin-top: 30px;
    border: none;
    background-color: #039BFC;
    width: 100%;
    height: 50px;
    line-height: 50px;
    border-radius: 30px;
    text-align: center;
    color: #fff;
    font-size: 16px;
    font-family: 'Sansita', sans-serif;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}

/*div#signin-agile .sign-in:hover {*/
/*    background-color: #00adb5;*/
/*    font-family: 'Sansita', sans-serif;*/

/*    color: #000000;*/
/*}*/

/*-- /Sign In Form --*/
/*-- Sign Up Form --*/
div#signup-agile .register {
    padding: 10px;
    background-color: #00CED1;
    width: 100%;
    border: none;
    cursor: pointer;
    color: #000000;
    outline: none;
    letter-spacing: 1px;
    font-weight: 600;
    font-family: 'Sansita', sans-serif;
    font-size: 20px;
    margin-top: 5%;
    text-transform: uppercase;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}

div#signup-agile .register:hover {
    background-color: #00adb5;
    color: #000000;
}

/*-- /Sign Up Form --*/
p.copyright {
    font-size: 16px;
    font-weight: normal;
    letter-spacing: 1px;
    text-align: center;
    padding: 50px 0;
    color: #fff;
}

p.copyright a {
    color: #7bf904;;
}

p.copyright a:hover {
    color: #b0b5a9;
}

/*-- Responsive start here --*/
@media (max-width: 1600px) {
    /*.form-w3ls {*/
    /*    width: 38%;*/
    /*}*/
}

@media (max-width: 1440px) {

    .form-w3ls {
        width: 500px;
        padding:50px 0;
        height: auto;
        background: white;
        border-radius: 15px;
    }

    .form-w3ls .right {
        display: none;
    }

    .tab-content {
        position: relative;
        top:0;
        left:0;
        margin:0 auto;
    }

    .tab-group {
        margin: 0 0 30px 124px;
    }
}

@media (max-width: 1366px) {
    .tab-group {
        margin: 0 0 30px 112px;
    }
}

@media (max-width: 1280px) {
    .tab-group {
        margin: 0 0 30px 125px;
    }
}

@media (max-width: 1080px) {
    h1 {
        font-size: 35px;
        padding: 40px 0;
    }

    .tab-group li a {
        font-size: 17px;
    }

    .tab-group {
        margin: 0 0 40px 96px;
    }

    p.header {
        font-size: 14px;
    }

    div#signin-agile input[type="checkbox"] + label {
        font-size: 14px;
        padding-right: 25px;
    }

    div#signin-agile input[type="checkbox"] + label span:first-child {
        top: 0;
    }

    div#signin-agile .sign-in {
        font-size: 17px;
    }

    p.copyright {
        font-size: 14px;
        line-height: 30px;
    }
}

@media (max-width: 1024px) {
    .tab-group {
        margin: 0 0 40px 114px;
    }

    .form-w3ls {
        width: 80%;
    }
}

@media (max-width: 991px) {
    .tab-group {
        margin: 0px 0 40px 93px;
    }

    .form-w3ls {
        /*width: 45%;*/
        padding: 25px 40px;
    }

    div#signup-agile .register {
        margin-bottom: 30px;
    }
}

@media (max-width: 900px) {
    .tab-group {
        margin: 0px 0 40px 91px;
    }

    .form-w3ls {
        /*width: 50%;*/
    }
}

@media (max-width: 800px) {
    .form-w3ls {
        width: 55%;
        padding: 25px 35px;
    }

    .tab-content {
        width: auto;
    }

    .input_item {
        width: auto;
    }

    div#signin-agile input[type="text"], div#signin-agile input[type="password"], div#signup-agile input[type="text"], div#signup-agile input[type="email"], div#signup-agile input[type="password"] {
        width: auto;
    }
}

@media (max-width: 768px) {
    h1 {
        font-size: 32px;
        padding: 35px 0;
    }

    .form-w3ls {
        width: 60%;
    }

    div#signin-agile input[type="text"], div#signin-agile input[type="password"], div#signup-agile input[type="text"], div#signup-agile input[type="email"], div#signup-agile input[type="password"] {
        margin: 13px 0 25px;
    }

    .tab-group {
        margin: 0 0 35px 102px;
    }

    div#signin-agile input[type="checkbox"] + label {
        display: block;
        margin-top: -3px;
    }

    div#signin-agile .sign-in {
        margin-top: 22px;
    }

    p.copyright {
        padding: 35px 0 20px;
    }
}

@media (max-width: 736px) {
    .tab-group {
        margin: 0 0 35px 92px;
    }
}

@media (max-width: 667px) {
    .tab-group {
        margin: 0 0 35px 89px;
    }

    .form-w3ls {
        width: 65%;
    }
}

@media (max-width: 640px) {
    .tab-group {
        margin: 0 0 35px 87px;
    }

    .form-w3ls {
        width: 70%;
    }

    .tab-group li a {
        font-size: 15px;
    }

    p.header {
        font-size: 13px;
    }

    div#signin-agile input[type="text"], div#signin-agile input[type="password"], div#signup-agile input[type="text"], div#signup-agile input[type="email"], div#signup-agile input[type="password"] {
        font-size: 15px;
    }
}

@media (max-width: 568px) {

    h1 {
        font-size: 25px;
        padding: 30px 0;
    }

    .tab-group {
        margin: 0 0 35px 75px;
    }
}

@media (max-width: 480px) {
    .form-w3ls {
        width: 80%;
    }

    p.copyright {
        padding: 30px 10px;
    }

    .tab-group {
        margin: 0 0 30px 66px;
    }
}

@media (max-width: 414px) {
    .tab-group {
        margin: 0 0 30px 52px;
    }

    .form-w3ls {
        width: 85%;
    }

    p.header {
        font-size: 13px;
    }

    div#signin-agile input[type="text"], div#signin-agile input[type="password"], div#signup-agile input[type="text"], div#signup-agile input[type="email"], div#signup-agile input[type="password"] {
        margin: 10px 0 12px;
    }
}

@media (max-width: 384px) {
    .tab-group {
        margin: 0 0 30px 45px;
    }

    .form-w3ls {
        padding: 15px 30px;
    }

    div#signup-agile .register {
        font-size: 17px;
    }
}

@media (max-width: 375px) {
    h1 {
        font-size: 23px;
        padding: 20px 0;
    }

    .tab-group {
        margin: 0 0 30px 41px;
    }
}

@media (max-width: 320px) {
    h1 {
        font-size: 23px;
    }

    .tab-group {
        margin: 0 0 30px 39px;
    }

    .tab-group li a {
        margin-right: 12px;
    }

    .form-w3ls {
        width: 90%;
        padding: 10px 20px;
    }

    div#signin-agile input[type="text"], div#signin-agile input[type="password"], div#signup-agile input[type="text"], div#signup-agile input[type="email"], div#signup-agile input[type="password"] {
        font-size: 15px;
        margin: 10px 0 20px;
    }

    div#signin-agile .sign-in, div#signup-agile .register {
        font-size: 16px;
    }

    p.copyright {
        padding: 10px 10px;
    }
}

/*-- //Responsive end here--*/