@charset "utf-8";
html,
body {
    font-family: 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    height: 100%;
    font-size: 14px;
}

body {
    margin: 0;
}

header {
    position: fixed;
    height: 60px;
    width: 100%;
    /* background-color: rgba(13, 71, 161, 0.8); */
    background-color: rgba(38, 50, 56, 0.9);
    /* background-color: rgba(0, 0, 0, 0.5); */
    color: #fff;
    z-index: 100;
}

header #logo {
    line-height: 60px;
    background-image: url(../chengsu_logo_black.svg);
    background-repeat: no-repeat;
    background-size: 36px;
    background-position-y: center;
    padding-left: 50px;
    font-size: 18px;
    color: #00E5FF;
    font-weight: 600;
}

.content {
    width: 95%;
    max-width: 1300px;
    margin: 0 auto;
}

.row, header .content {
    display: flex;
    display: -webkit-flex;
}

nav {
    text-align: right;
    flex: auto;
    line-height: 60px;
}

nav a {
    text-decoration: none;
}

nav a:link,
nav a:visited {
    color: #fff;
}

nav a:hover {
    color: #00E5FF;
}

#banner {
    /* background-image: radial-gradient(circle at 20% 70%, #0D47A1, #2196F3); */
    background-color: #37474F;
    overflow: hidden;
}

#banner .content {
    position: relative;
    height: 600px;
    overflow: hidden;
}

#banner .content:after {
    content: '';
    z-index: 0;
    width: 600px;
    height: 500px;
    background-size: 100%;
    background-repeat: no-repeat;
    opacity: 0.05;
    position: absolute;
    bottom: -17%;
    left: 5%;
    background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4IiB2aWV3Qm94PSIwIDAgNDY1LjIgNDY1LjIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQ2NS4yIDQ2NS4yOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPGcgaWQ9IkxheWVyXzJfMTZfIj4KCQk8Zz4KCQkJPHBhdGggZD0iTTI3OS41OTEsNDIzLjcxNGMtMy44MzYsMC45NTYtNy43NDcsMS44MDUtMTEuNjI5LDIuNTJjLTEwLjE0OCwxLjg4Ny0xNi44NTcsMTEuNjQ3LTE0Ljk4LDIxLjgwNCAgICAgYzAuOTI3LDQuOTk3LDMuNzY1LDkuMTU5LDcuNjE4LDExLjg3NmMzLjk3MSwyLjc5NSw5LjAyNSw0LjA1NywxNC4xNzUsMy4wOTljNC42MjMtMC44NTgsOS4yODItMS44NjcsMTMuODU0LTMuMDA4ICAgICBjMTAuMDIxLTIuNDk0LDE2LjEyNi0xMi42NDYsMTMuNjI2LTIyLjY2MkMyOTkuNzYxLDQyNy4zMTgsMjg5LjYxOCw0MjEuMjE4LDI3OS41OTEsNDIzLjcxNHoiIGZpbGw9IiNGRkZGRkYiLz4KCQkJPHBhdGggZD0iTTQxNy44ODcsMTczLjA0N2MxLjMxLDMuOTQ4LDMuODExLDcuMTcxLDYuOTcsOS4zOThjNC42ODQsMy4yOTksMTAuODEzLDQuNDA5LDE2LjY2MiwyLjQ3NSAgICAgYzkuODA2LTMuMjU2LDE1LjExOS0xMy44MywxMS44NzUtMjMuNjMxYy0xLjQ3OC00LjQ2OC0zLjExOC04Ljk1LTQuODY1LTEzLjMxNGMtMy44MzYtOS41OS0xNC43MTQtMTQuMjU5LTI0LjMwOS0xMC40MjMgICAgIGMtOS41ODUsMy44MzQtMTQuMjU2LDE0LjcxNS0xMC40MTcsMjQuMzA4QzQxNS4yNzEsMTY1LjUyOCw0MTYuNjQ2LDE2OS4yOTMsNDE3Ljg4NywxNzMuMDQ3eiIgZmlsbD0iI0ZGRkZGRiIvPgoJCQk8cGF0aCBkPSJNMzQwLjM2LDM5Ny4wMTNjLTMuMjk5LDIuMTc4LTYuNzA0LDQuMjg2LTEwLjEzNCw2LjI2MWMtOC45NDksNS4xNjItMTIuMDE0LDE2LjYwMS02Ljg1NCwyNS41NDYgICAgIGMxLjQwMSwyLjQzMywzLjI2Nyw0LjQyMiw1LjQxNiw1Ljk0MmM1Ljc2OSw0LjA1OSwxMy42MDQsNC42NjcsMjAuMTI3LDAuOTA5YzQuMDc4LTIuMzUyLDguMTMzLTQuODU0LDEyLjA2Mi03LjQ1MiAgICAgYzguNjE0LTUuNjkxLDEwLjk4NS0xNy4yOTQsNS4yOTEtMjUuOTEyQzM2MC41NzUsMzkzLjY4NiwzNDguOTc3LDM5MS4zMTgsMzQwLjM2LDM5Ny4wMTN6IiBmaWxsPSIjRkZGRkZGIi8+CgkJCTxwYXRoIGQ9Ik00NjUuMDIyLDIyNS4yNzljLTAuNDA3LTEwLjMyMi05LjEwMS0xOC4zNTYtMTkuNDI2LTE3Ljk1M2MtMTAuMzEyLDAuNDA3LTE4LjM1Miw5LjEwNC0xNy45NDcsMTkuNDIyICAgICBjMC4xNTUsMy45NDUsMC4xOTUsNy45NDksMC4xMDQsMTEuODljLTAuMTQ1LDYuNDczLDMuMDIxLDEyLjI0Myw3Ljk0MSwxNS43MTFjMi45MzEsMi4wNjQsNi40ODgsMy4zMTMsMTAuMzQ1LDMuNDAxICAgICBjMTAuMzIyLDAuMjI5LDE4Ljg3Ni03Ljk1OCwxOS4xMDUtMTguMjg1QzQ2NS4yNDcsMjM0Ljc1Niw0NjUuMjA4LDIyOS45ODUsNDY1LjAyMiwyMjUuMjc5eiIgZmlsbD0iI0ZGRkZGRiIvPgoJCQk8cGF0aCBkPSJNNDE0LjgzNSwzNDcuODE2Yy04LjI3Ny02LjIxLTE5Ljk4Ny00LjUyNC0yNi4xODYsMy43MzhjLTIuMzc0LDMuMTY0LTQuODc0LDYuMjg5LTcuNDM0LDkuMjk4ICAgICBjLTYuNjksNy44Ni01Ljc0NSwxOS42NjYsMi4xMTUsMjYuMzYxYzAuNDQ4LDAuMzgsMC45MDEsMC43MjksMS4zNzEsMS4wNTdjNy44MTQsNS41MDksMTguNjc0LDQuMjQzLDI0Ljk5Mi0zLjE3MSAgICAgYzMuMDU3LTMuNTksNi4wMzctNy4zMjMsOC44NzQtMTEuMTAyQzQyNC43NjcsMzY1LjczNSw0MjMuMDg5LDM1NC4wMTcsNDE0LjgzNSwzNDcuODE2eiIgZmlsbD0iI0ZGRkZGRiIvPgoJCQk8cGF0aCBkPSJNNDQyLjMyNSwyODAuMjEzYy05Ljg1NS0zLjA5LTIwLjM1LDIuMzk2LTIzLjQzOCwxMi4yNTFjLTEuMTgyLDMuNzY1LTIuNDkyLDcuNTQ4LTMuOTA2LDExLjI1MyAgICAgYy0zLjEwNSw4LjE1Ni0wLjEzLDE3LjEzLDYuNjksMjEuOTM5YzEuMjUxLDAuODc5LDIuNjI5LDEuNjI0LDQuMTI2LDIuMTljOS42NDksMy42ODIsMjAuNDU0LTEuMTU5LDI0LjEzMi0xMC44MTIgICAgIGMxLjY3OS00LjQwNSwzLjIzNy04LjkwNiw0LjY0Ni0xMy4zODJDNDU3LjY2LDI5My43OTUsNDUyLjE3OCwyODMuMzAzLDQ0Mi4zMjUsMjgwLjIxM3oiIGZpbGw9IiNGRkZGRkYiLz4KCQkJPHBhdGggZD0iTTE5Ny45OTksNDI2LjQwMmMtMTYuNzItMy4wMDItMzIuNzU5LTguMTE0LTQ3Ljk2OC0xNS4yNDRjLTAuMTgtMC4wOTQtMC4zNDEtMC4yMDEtMC41My0wLjI4NyAgICAgYy0zLjU4NC0xLjY4Ny03LjE2Mi0zLjQ5NC0xMC42My01LjM4MmMtMC4wMTItMC4wMTQtMC4wMzQtMC4wMjMtMC4wNTMtMC4wMzFjLTYuMzYzLTMuNTA0LTEyLjU3My03LjM4MS0xOC42MDYtMTEuNjI4ICAgICBDMzIuMjQsMzMxLjg2LDExLjA4OCwyMDkuODcyLDczLjA2MiwxMjEuOTAxYzEzLjQ3Ni0xOS4xMjIsMjkuNzg0LTM1LjA3NSw0Ny45NjUtNDcuNzE5YzAuMjI0LTAuMTU2LDAuNDQ4LTAuMzExLDAuNjctMC40NjggICAgIGM2NC4wNjctNDQuMTQ0LDE1MS4wNi00Ny4xMTksMjE5LjA4OS0xLjc1N2wtMTQuNjExLDIxLjExMWMtNC4wNjIsNS44NzYtMS41NjMsMTAuMTU4LDUuNTQ4LDkuNTE4bDYzLjQ2Ny01LjY4MiAgICAgYzcuMTItMC42NCwxMS4zNzgtNi43OTksOS40NjMtMTMuNjc1TDM4Ny42MSwyMS44MjNjLTEuOTA4LTYuODg0LTYuNzkzLTcuNzA4LTEwLjg1OS0xLjgzM2wtMTQuNjQ1LDIxLjE2MSAgICAgQzMxMi4xODIsNy42MzgsMjUyLjMwMy01LjE0MSwxOTIuODcsNS4xNjVjLTUuOTg2LDEuMDM2LTExLjg4OCwyLjMwNC0xNy43MDksMy43OGMtMC4wNDUsMC4wMDgtMC4wODEsMC4wMTMtMC4xMTcsMC4wMjEgICAgIGMtMC4yMjUsMC4wNTUtMC40NTMsMC4xMjgtMC42NzIsMC4xODlDMTIzLjEyMiwyMi4zMTYsNzguNDA3LDUyLjIwNyw0Ni41LDk0Ljg1NWMtMC4yNjksMC4zMTktMC41NDYsMC42MzEtMC44LDAuOTc4ICAgICBjLTEuMDYxLDEuNDI5LTIuMTE0LDIuODkxLTMuMTQ1LDQuMzUzYy0xLjY4NiwyLjM5Ni0zLjM0OCw0Ljg1Mi00LjkzOCw3LjMwOGMtMC4xOTksMC4yOTYtMC4zNTEsMC41OTctMC41MjUsMC44OTYgICAgIEMxMC43NjIsMTQ5LjE5MS0xLjkzOCwxOTYuMzYxLDAuMjQsMjQ0LjM4M2MwLjAwNSwwLjE1OC0wLjAwNCwwLjMxNywwLDAuNDc5YzAuMjExLDQuNjkxLDAuNTgzLDkuNDQ3LDEuMDg4LDE0LjEyOSAgICAgYzAuMDI3LDAuMzAyLDAuMDk0LDAuNTg4LDAuMTQ1LDAuODljMC41MjIsNC43MDgsMS4xNzcsOS40MjcsMS45OTgsMTQuMTQ1YzguMzQ0LDQ4LjEzOCwzMS4wNTIsOTEuNDU1LDY1LjA3OSwxMjUuMTYgICAgIGMwLjA3OSwwLjA3OSwwLjE2MSwwLjE2NSwwLjI0MSwwLjI0N2MwLjAyOCwwLjAzMSwwLjA1OSwwLjA0NywwLjA4NiwwLjA3NmM5LjE0Miw5LjAxNywxOS4wODYsMTcuMzU3LDI5Ljc5MywyNC44OTggICAgIGMyOC4wMiwxOS43NDQsNTkuMjIxLDMyLjc5NSw5Mi43MjksMzguODA4YzEwLjE2NywxLjgyNywxOS44NzktNC45NDEsMjEuNzAzLTE1LjEwMyAgICAgQzIxNC45MjUsNDM3Ljk0MywyMDguMTYzLDQyOC4yMjMsMTk3Ljk5OSw0MjYuNDAyeiIgZmlsbD0iI0ZGRkZGRiIvPgoJCQk8cGF0aCBkPSJNMjIxLjEyNCw4My4xOThjLTguMzYzLDAtMTUuMTM3LDYuNzgtMTUuMTM3LDE1LjEzMXYxNTAuNzQ3bDEzNy44Nyw3MS4yNzFjMi4yMTksMS4xNDksNC41OTUsMS42OSw2LjkzMywxLjY5ICAgICBjNS40NzYsMCwxMC43NjUtMi45ODIsMTMuNDU0LTguMTg1YzMuODM1LTcuNDI2LDAuOTMzLTE2LjU0OS02LjQ5My0yMC4zODRsLTEyMS41MDctNjIuODE4Vjk4LjMyOSAgICAgQzIzNi4yNDMsODkuOTc4LDIyOS40NzcsODMuMTk4LDIyMS4xMjQsODMuMTk4eiIgZmlsbD0iI0ZGRkZGRiIvPgoJCTwvZz4KCTwvZz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K)
}

#banner .adv {
    margin: 140px 0 0 0;
    z-index: 1;
    position: relative;
}

#banner .adv h3 {
    margin-bottom: 0;
    color: #ddd;
    font-weight: 300;
    font-size: 150%;
}

#banner .adv h1 {
    font-size: 300%;
    color: #fff;
    margin-top: -0.2em;
}

#banner .adv h1 em {
    color: #80DEEA;
    margin-right: 0.2em;
}

#banner .adv #for-student {
    margin-left: 60px;
}

#login-box {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.2);
    /* height: 400px; */
    width: 400px;
    border-top: 4px solid #4DD0E1;
    z-index: 2;
    /* rgba(77,208,225, 0.7);*/
}

#login-box form {
    margin: 20px 40px;
}

#login-box form h2 {
    color: #fff;
}

#login-box form input[type="text"],
#login-box form input[type="tel"],
#login-box form input[type="number"],
#login-box form input[type="password"] {
    display: block;
    width: 100%;
    box-sizing: border-box;
    font-size: 120%;
    margin-bottom: 1em;
    border: none;
    background-color: rgba(38,50,56, 0.3);
    padding: 12px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    /* border-radius: 4px; */
    color: #fff;
    /* border: 1px solid #9E9E9E; */
}

#login-box form input:focus {
    outline: none;
    background-color: rgba(38,50,56, 0.5);
}

button {
    outline: none;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill {
    /* background-color: rgba(255, 255, 255, 0.5) !important; */
    -webkit-text-fill-color: #FFF8E1;
    -webkit-box-shadow: 0 0 0 1000px rgba(38,50,56, 0.5) inset;
    transition: background-color 5000s ease-in-out 0s;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #aaa;
    opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #aaa;
}

::-ms-input-placeholder { /* Microsoft Edge */
    color: #aaa;
}

#login-box form label {
    font-size: 120%;
    margin-bottom: 0.5em;
    display: block;
    color: #333;
}

#login-box form button {
    font-size: 100%;
    border-radius: 0;
    border: none;
    padding: 8px 0;
    width: 100px;
}

#login-box form button[type="submit"] {
    background-color: #00E5FF;
    color: #000;
}

#login-box form button[type="submit"]:hover {
    background-color: #84FFFF;
}

#login-box form button[type="button"] {
    background-color: transparent;
    color: #fff;
}

#login-box form button[type="button"]:hover {
    background-color: #455A64;
}

#reset-pwd-block {
    display: none;
}

.btn-registry {
    border: none;
    border-radius: 0;
    font-size: 130%;
    width: 160px;
    padding: 12px 0;
    margin-top: 60px;
    background-color: #FBC02D;
}

.btn-registry:hover {
    background-color: #FF8F00;
}

a.read-more {
    font-size: 130%;
    margin-left: 2em;
    color: #FBC02D;
    text-decoration: none;
}

a.read-more:hover {
    color: #fff;
}

.phone-box {
    position: relative;
}

.phone-box #sendSmsBtn {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background-color: transparent;
    border: none;
    color: #00E5FF;
}

.warn-msg {
    color: #ffcc00;
}

.intro {
    display: flex;
    display: -webkit-flex;
}

.intro > div {
    flex: auto;
    /* border-right: 1px solid #eee; */
    margin-right: 60px;
    padding-bottom: 40px;
}

.intro h3 {
    font-size: 150%;
}

.intro ul {
    padding: 0;
    margin: 0 1em;
    color: #444;
}

.block {
    padding: 60px 0;
}

.screenshot {
    border-radius: 5px;
    box-shadow: 0 0 30px #aaa;
}

.qrcode {
    text-align: center;
    position: fixed;
    right: 20px;
    bottom: 20px;
    color: #AAA;
    font-size: 12px;
}

.qrcode img {
    margin-top: 16px;
}

.intro-text {
    font-size: 120%;
    flex: auto;
    position: relative;
}

.intro-text h3 {
    font-size: 250%;
    color: #AAA;
    font-weight: normal;
    margin-top: 2em;
    margin-bottom: 0.5em;
}

.intro-text ul {
    list-style: none;
    margin: 0;
    padding: 0;
    line-height: 180%;
}

#block-2 {
    background-color: #f4f4f4;
}

.intro-img {
    width: 50%;
}

.intro-img+.intro-text {
    padding-left: 80px;
}

.intro-text+.intro-img {
    padding-left: 80px;
}

footer {
    background-color: #37474F;
    color: #ccc;
    padding: 50px 0;
}

footer ul {
    padding: 0 1em;
    margin: 0;
}

footer h3 {
    margin: 0.5em 0;
    color: #fff;
}

footer h4 {
    margin: 0;
    font-weight: normal;
}

footer #contact:target h3 {
    color: #fc0 !important;
}

.backdrop {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 101;
    display: none;
}

dialog {
    display: block;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 60px;
    width: fit-content;
    height: fit-content;
    width: -webkit-fit-content;
    height: -webkit-fit-content;
    margin: auto;
    border: none;
    padding: 30px;
    background: white;
    width: 400px;
}

dialog h1 {
    margin: 0;
}

dialog label {
    padding: 6px 0;
    display: inline-block;
}

dialog input[type="text"],
dialog input[type="password"] {
    border: none;
    padding: 8px;
    box-sizing: border-box;
    display: block;
    margin-bottom: 0.5em;
    font-size: 110%;
    width: 100%;
    border: 1px solid #ccc;
}

.dummy-input {
    position: absolute;
    top: -1000px;
    width: 1px;
    height: 1px;
    border: none;
    opacity: 0;
}

.warnning {
    color: #ff6600;
}


dialog .vcode-box {
    position: relative;
}

dialog #sendSmsBtn2 {
    position: absolute;
    right: 5px;
    top: 10px;
    border: none;
    color: #39f;
    background-color: transparent;
}

dialog button {
    width: 100px;
    border-radius: 0;
    border: none;
    font-size: 100%;
    padding: 8px 0;
    background-color: #80DEEA;
}

dialog button:hover {
    background-color: #ffcc00;
}

dialog .buttons {
    margin-top: 1em;
}

dialog .btn-cancel {
    background-color: transparent;
}