codefever/www/static/css/main.css

/* section */
section {
    display: block;
    width: 100%;
}

/* login */
.login-body {
    background-color: #f7f8fa;
}

.section-body{
    width:1184px;
    height:644px;
    position:absolute;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);
    box-shadow: 0px 10px 20px 0px rgba(96, 104, 120, 0.1);
}

.login-wrap {
    background-color: #FFF;
    height: 644px;
}
.login-wrap-inner {
    margin: 0 auto;
    padding: 60px 0;
}
.login-wrap .form-group .error {
    color: #e73131 !important;
    margin-bottom: unset;
}
.login-wrap .form-group {
    text-align: left !important;
}

@media (max-width: 576px) {
    .login-wrap-inner {
        padding: 60px 20px;
    }
}

.login-top {
    margin-bottom: 50px;
}
.login-logo {
    margin-bottom: 15px;
}

.login-wrap input.form-control{
    border: none;
    border-bottom: 1px solid #DEE2EC;
    border-radius: 0;
}

.login-wrap input.form-control:focus{
    box-shadow: unset;
}

.login-wrap input::-webkit-input-placeholder {
    color: #B1B6C3 !important;
    font-size: 15px !important;
 }
 .login-wrap input:-moz-placeholder {
    color: #B1B6C3 !important;
    font-size: 15px !important;
 }
 .login-wrap input::-moz-placeholder {
    color: #B1B6C3 !important;
    font-size: 15px !important;
 }
 .login-wrap input:-ms-placeholder {
    color: #B1B6C3 !important;
    font-size: 15px !important;
 }
 .login-wrap .forget-sign {
     margin-top: 20px;
     margin-bottom: 30px;
 }
.login-bottom {
    line-height: 40px;
    border-radius: 4px;
    border: 1px solid #DEE2EC;
    font-size: 1.1rem;
}
.login-wrap .third-login {
    margin-top: 50px;
    margin-bottom: 30px;
    position: relative;
}
.login-wrap .third-login:after,
.login-wrap .third-login:before {
    display: block;
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 56px;
    border-top: 1px solid #DEE2EC;
}
.login-wrap .third-login:after {
    left: auto;
    right: 0;
}
.login-wrap .input-group .btn {
    padding: 8px 12px;
}
.login-wrap #captchaImage {
    height: 45px;
    width: 100%;
    cursor: pointer;
}
.login-wrap .country-menu {
    max-height: 200px;
    overflow: auto;
    width: 338px;
    padding: 5px 0;
    margin-left: -2px;
}

.login-wrap .country-menu li {
    padding: 0 5px;
}
#tel-error {
    width: 100%;
}
.country-menu .country-item {
    cursor: pointer;
}
.country-menu > li:hover {
    background-color: #eee;
}

/* service */
.service-common-section-2 {
    height: 50px;
    line-height: 50px;
}
.service-common-section-2 .nav-underline {
    height: 3px;
    width: 24px;
    left: 50%;
    margin-left: -12px;
    bottom: 1px;
    background: #0035EC;
}
.service-common-section-2 a:link {
    text-decoration:none;
}
.about-section-1, .about-section-2, .about-section-3 {
    padding-top: 70px;
}
.about-section-3 {
    padding-bottom: 70px;
}
.about-img-wrap {
    padding: 20px 50px 0 110px;
}
@media (max-width: 768px) {
    .about-img-wrap {
        padding: 0 20px;
    }
}
.contact-section-1 {
    margin: 70px 0;
}
.contact-section-1 .xian-div {
    background-color: #FFF;
    padding: 50px 30px;
    height: 180px;
}
.service-section {
    margin: 70px 0;
}

.activityBox {
    width: 644px;
}

.login-logo img {
    height: 60px;
}

#btn_get_code, .btn_get_code{
    border-bottom: 1px solid #DEE2EC;
}

.intl-tel-input.separate-dial-code .selected-flag,
.intl-tel-input.allow-dropdown .flag-container:hover .selected-flag{
    background-color: unset;
}

@media screen and (max-width: 1184px) {
    .activityBox {
        width: 0;
    }
    .section-body{
        width:80%;
        max-width: 540px;
    }
}

@media screen and (max-width: 768px) {
    .activityBox {
        width: 0;
    }
    .section-body{
        width:90%;
    }
}

/* doc */
.doc-left {
    padding-bottom: 32px;
    border-right: 1px solid #DEE2EC;
}
.doc-left,
.doc-right {
    height: 100vh;
    overflow: auto;
}
.doc-left::-webkit-scrollbar {
    width: 4px;
}
.doc-left::-webkit-scrollbar-thumb {
    display: none;
    border-radius: 4px;
    background: #7f7f7f;
}
.doc-left:hover::-webkit-scrollbar-thumb {
    display: block;
}
.doc-right {
    padding: 0;
}
.doc-logo {
    width: 100%;
    margin: 22px auto;
}
.switch {
    display: inline-block;
    border: 4px solid transparent;
    border-bottom-color: #2F354D;
    border-top: none;
    transition: transform .1s;
}
.menu.opened .switch {
    transform: rotate(-180deg);
}
.menu .menu-first,
.menu .menu-second > div {
    line-height: 32px;
    cursor: pointer;
}
.menu .menu-first:hover,
.menu .menu-second > div:hover {
    font-weight: bold;
}
.menu .menu-second {
    display: none;
}
.menu.opened .menu-second {
    display: block;
}
.normal-link {
    color: #2F354D !important;
    text-decoration: none !important;
}
.menu .normal-link {
    display: block;
}
.header {
    top: 0px;
    z-index: 2;
    height: 64px;
    position: sticky;
    padding: 0px 32px;
    background: #fff;
}
.header.shadow {
    box-shadow: 0px 10px 30px 0px rgba(66, 72, 86, 0.1);
}
.header .title h1 {
    font-size: 20px;
    color: #24292F;
    font-weight: bold;
    display: none;
    margin: 0;
}
.header .lang {
    width: 96px;
    cursor: pointer;
    padding: 8px 16px;
    margin-right: 64px;
    position: relative;
    display: inline-block;
}
.header .lang.opened {
    color: #3455DB;
}
.lang .lang-menu {
    left: 0;
    top: 100%;
    width: 150%;
    display: none;
    padding: 8px 0px;
    position: absolute;
    background: #fff;
    box-shadow: 0px 10px 30px 0px rgba(66, 72, 86, 0.1);
}
.lang .switch {
    transform: rotate(-180deg);
}
.lang.opened .switch {
    transform: none;
    border-bottom-color: #3455DB;
}
.lang.opened .lang-menu {
    display: block;
}
.lang .lang-menu > div {
    line-height: 32px;
    padding: 0px 16px;
    cursor: pointer;
}
.lang .lang-menu a.normal-link.active {
    color: #3455DB !important;
}
.lang .lang-menu > div:hover {
    background: #EFF3F8;
}
.doc-content {
    padding: 0px 16px;
}
.doc-content-left {
    width: calc(100% - 194px);
}
.doc-content-left .doc {
    margin: 0px auto;
    padding: 0px 64px 64px;
}
.doc-nav {
    top: 80px;
    z-index: 1;
    width: 194px;
    position: sticky;
    border-left: 2px solid #DEE2EC;
}
.doc-nav a {
    display: block;
    color: #7A859E;
    line-height: 28px;
    text-decoration: none;
    padding: 0px 16px;
    transform: translateX(-2px);
}
.doc-nav a.active,
.doc-nav a:hover {
    font-weight: bold;
    color: #2F354D;
}
.doc-nav a.active {
    border-left: 2px solid #3455DB;
}