html,body{ width: 100%; height: 100%; box-sizing: border-box; margin: 0; padding: 0; } .container{ width: 100%; height: 100%; overflow: hidden; overflow-y: auto; box-sizing: border-box; } .Va-document{ width: 100%; height: auto; box-sizing: border-box; font-size: 12px; } .Va-document .title-head{ width: 100%; background-color: #ffffff; text-align: center; color: #ffffff; } .Va-document .title-head .my-content{ max-width: 1280px; margin: auto; display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center; padding: 10px 0; } .Va-document .title-head .my-content a.logo{ display: inline-block; } .Va-document .title-head .my-content a.logo img{ height: 40px; } .Va-document .title-head .my-content .user-area { display: table; } .Va-document .title-head .my-content .user-area .nav { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; padding-left: 0; margin-bottom: 0; list-style: none; } .Va-document .title-head .my-content .user-area ul li.login { padding-left: 20px; margin-left: 20px; border-left: 1px solid #707070; height: 22px; font-size: 14px; line-height: 22px; } .Va-document .title-head .my-content .user-area ul li.dropdown.login{ padding-left: 0px; } .Va-document .title-head .my-content .user-area ul li.dro-r.login{ margin-left: 0px; } .Va-document .title-head .my-content .user-area ul li.login a span { padding-left: 20px; color: #627A8E !important; } .Va-document .title-head .my-content .user-area a { text-decoration: none !important; } .Va-document .content-info{ width: 100%; box-sizing: border-box; } .Va-document .content-info .my-box1{ width: 100%; box-sizing: border-box; background-image: url('../img/1.jpg'); /* background-size: auto 100%; */ background-repeat: no-repeat; background-position: center; padding: 50px 0; } .Va-document .content-info .my-box1 .my-content{ max-width: 1280px; margin: auto; } .Va-document .content-info .my-box1 .my-content .banner-title{ display: flex; flex-wrap: wrap; } .Va-document .content-info .my-box1 .my-content .banner-title .tit.tip{ font-size: 14px; margin: 0; } .Va-document .content-info .my-box1 .my-content .el-row{ display: flex; flex-wrap: wrap; align-items: center; } .Va-document .content-info .my-box1 .my-content .el-col{ padding: 0 25px; } .Va-document .content-info .my-box1 .my-content .col-l{ padding-right: 40px; } .Va-document .content-info .my-box1 .my-content .col-r{ padding-left: 40px; } .Va-document .content-info .my-box1 .my-content h5.title{ color: #ffffff; font-size: 28px; margin-top: 90px; } .Va-document .content-info .my-box1 .my-content p.tit{ color: #ffffff; font-size: 18px; margin: 25px 0; } .Va-document .content-info .my-box1 .my-content .banner-title a.btn{ display: inline-block; background-color: #EC1920; padding: 8px 30px; color: #ffffff; border-radius: 5px; text-decoration: none; margin: 100px 0 50px; font-size: 14px; } .Va-document .content-info .my-box1 .my-content a.tit.tip{ color: #909399; font-size: 18px; margin: 25px 0; text-decoration: none; } .Va-document .content-info .my-box2{ width: 100%; box-sizing: border-box; border-bottom: 1px solid #EC1920; } .Va-document .content-info .my-box2 .my-content{ /* max-width: 1280px; */ margin: auto; padding: 20px 30px; box-sizing: border-box; } .Va-document .content-info .my-content .content{ display: flex; align-items: center; justify-content: space-around; flex-wrap: wrap; } .Va-document .content-info .my-content .content .el-col{ display: flex; align-items: center; justify-content: center; /* flex-wrap: wrap; */ padding: 20px; } .Va-document .content-info .my-box2 .my-content .red{ font-size: 40px; font-weight: bold; color: #DF3737; } .Va-document .content-info .my-box2 .my-content .small{ flex: 1; font-size: 18px; color: #434343; margin-left: 8px; } .Va-document .content-info .my-box3{ width: 100%; box-sizing: border-box; background-color: #F8F8F8; padding: 50px 0; } .Va-document .content-info .my-box3 .my-content{ margin: auto; max-width: 1280px; } .Va-document .content-info .my-box3 .my-content .banner-btn{ max-width: 1280px; padding: 0 50px; margin: auto; text-align: center; font-size: 22px; margin-bottom: 0; color: #ffffff; cursor: pointer; display: flex; flex-wrap: wrap; } .Va-document .content-info .my-box3 .my-content .banner-btn .box{ margin-bottom: 4px; /* height: 100%; */ } .Va-document .content-info .my-box3 .my-content .banner-btn .box p{ width: 100%; height: 100%; margin: 0; padding: 20px 0; box-sizing: border-box; display: flex; align-items: center; justify-content: center; } .Va-document .content-info .my-box3 .my-content .banner-btn .box-1{ background-color: #207DE5; } .Va-document .content-info .my-box3 .my-content .banner-btn .box-2{ background-color: #50976B; } .Va-document .content-info .my-box3 .my-content .banner-btn .box-3{ background-color: #FFCD6A; } .Va-document .content-info .my-box3 .my-content .banner-btn .box-4{ background-color: #9D9D9D; } .Va-document .content-info .my-box3 .my-content .banner{ width: 100%; height: 100%; position: absolute; text-decoration: none; } .Va-document .content-info .my-box3 .my-content .banner>img{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); } .Va-document .content-info .my-box3 .my-content .banner p.tip{ position: absolute; bottom: 30px; color: #909399; left: 150px; font-size: 14px; } .Va-document .content-info .my-box3 .my-content .banner .tip1{ position: absolute; bottom: 150px; left: 10px; font-weight: bold; font-size: 40px; color: #333333; } .Va-document .content-info .my-box3 .my-content .banner .tip1 .tip1-box{ display: flex; } .Va-document .content-info .my-box3 .my-content .banner .tip1 .tip1-box.tip1-box1{ align-items: flex-end; margin-bottom: 20px; margin-left: 50px; } .Va-document .content-info .my-box3 .my-content .banner .tip1 .tip1-box.tip1-box2{ align-items: end; } .Va-document .content-info .my-box3 .my-content .banner .tip1 .tip1-box p{ margin: 0 50px; } .Va-document .content-info .my-box3 .my-content .banner .tip1 .tip1-box img{ width: 120px; height: 67px; } .Va-document .content-info .my-box3 .my-content .banner .tip1 .tip1-box.tip1-box1 img{ transform: rotate(180deg); } .Va-document .content-info .my-box3 .my-content .banner .tip2{ position: absolute; bottom: 340px; left: 230px; font-weight: bold; font-size: 40px; display: flex; flex-direction: column; flex-wrap: wrap; justify-content: center; align-items: center; color: #ffffff; } .Va-document .content-info .my-box3 .my-content .banner .tip2 .tip1-box{ display: flex; } .Va-document .content-info .my-box3 .my-content .banner .tip2 .tip1-box.tip1-box1{ align-items: flex-end; margin-bottom: 20px; margin-left: 50px; } .Va-document .content-info .my-box3 .my-content .banner .tip2 .tip1-box.tip1-box2{ align-items: end; } .Va-document .content-info .my-box3 .my-content .banner .tip2 .tip1-box p{ margin: 0 50px; } .Va-document .content-info .my-box3 .my-content .banner .tip2 .tip1-box img{ width: 120px; height: 67px; } .Va-document .content-info .my-box3 .my-content .banner .tip2 .tip1-box.tip1-box1 img{ transform: rotate(180deg); } .Va-document .content-info .my-box4{ width: 100%; box-sizing: border-box; } .Va-document .content-info .my-box4 .my-content{ /* max-width: 1280px; */ margin: auto; /* padding: 0 50px; */ } .Va-document .content-info .my-box4 .my-content h5.title{ display: flex; justify-content: center; margin-top: 50px; } .Va-document .content-info .my-box4 .my-content h5.title span{ text-align: center; font-size: 28px; margin-bottom: 20px; color: #ffffff; background-color: #1CABE3; margin: auto; padding: 6px 15px; } .Va-document .content-info .my-box4 .my-content .el-row { display: flex; flex-wrap: wrap; align-items: center; } .Va-document .content-info .my-box4 .my-content .content-big{ display: inline-block; width: 100%; background-image: url('../img/3.jpg'); background-size: auto 100%; background-repeat: no-repeat; background-position: center; } .Va-document .content-info .my-box4 .my-content .content-box{ max-width: 1280px; margin: auto; padding: 0 50px; } .Va-document .content-info .my-box4 .my-content .box{ margin: 150px 0 100px; font-size: 26px; font-weight: bold; color: #1BABE1; } .Va-document .content-info .my-box4 .my-content .box-con{ margin-bottom: 50px; } .Va-document .content-info .my-box4 .my-content .box-con .content{ padding: 0 15px; } .Va-document .content-info .my-box4 .my-content .box-con .content img{ width: 100%; } .Va-document .content-info .my-box4 .my-content .box-con .content .tit{ background-color: #1CABE3; width: 100%; text-align: center; padding: 8px 4px; color: #ffffff; } .Va-document .content-info .my-box5{ width: 100%; box-sizing: border-box; background-image: url('../img/4.jpg'); /* background-size: 100%; */ background-repeat: no-repeat; background-position: center; padding: 50px 0; margin-top: 50px; } .Va-document .content-info .my-box5 .my-content{ max-width: 1280px; margin: auto; padding: 0 50px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; } .Va-document .content-info .my-box5 .my-content .tit h5{ font-size: 20px; color: #ffffff; margin: 0; } .Va-document .content-info .my-box5 .my-content .tit p{ font-size: 18px; color: #ffffff; margin-bottom: 0; } .Va-document .content-info .my-box5 .my-content .btn a{ text-decoration: none; color: #ffffff; background-color: #EC1920; padding: 10px 50px; font-size: 16px; border-radius: 4px; display: inline-block; } .Va-document .content-info .my-box6{ width: 100%; box-sizing: border-box; background-image: url('../img/5.jpg'); /* background-size: 100%; */ background-repeat: no-repeat; background-position: center; padding: 50px 0; margin-top: 50px; } .Va-document .content-info .my-box6 .my-content{ max-width: 1280px; margin: auto; padding: 0 50px; text-align: center; } .Va-document .content-info .my-box6 .my-content .content-box{ width: 500px; background-color: rgba(0,0,0,0.4); box-shadow: 0px 0px 2px #dad6d6; padding: 25px 50px; margin: auto; } .Va-document .content-info .my-box6 .my-content .tit h5{ font-size: 20px; color: #ffffff; margin: 0; margin-bottom: 20px; } .Va-document .content-info .my-box6 .my-content .content-box .el-input__inner,.Va-document .content-info .my-box6 .my-content .content-box .el-textarea__inner{ background-color: rgba(255,255,255,0.5); color: #ffffff; font-weight: bold; } .Va-document .content-info .my-box6 .my-content .content-box input::-webkit-input-placeholder{ color:#ffffff; font-weight: bold; } .Va-document .content-info .my-box6 .my-content .content-box input::-moz-placeholder{ /* Mozilla Firefox 19+ */ color:#ffffff; font-weight: bold; }   .Va-document .content-info .my-box6 .my-content .content-box input:-moz-placeholder{ /* Mozilla Firefox 4 to 18 */ color:#ffffff; font-weight: bold; } .Va-document .content-info .my-box6 .my-content .content-box input:-ms-input-placeholder{ /* Internet Explorer 10-11 */ color:#ffffff; font-weight: bold; } .Va-document .content-info .my-box6 .my-content .content-box textarea::-webkit-input-placeholder{ color:#ffffff; font-weight: bold; } .Va-document .content-info .my-box6 .my-content .content-box textarea::-moz-placeholder{ /* Mozilla Firefox 19+ */ color:#ffffff; font-weight: bold; }   .Va-document .content-info .my-box6 .my-content .content-box textarea:-moz-placeholder{ /* Mozilla Firefox 4 to 18 */ color:#ffffff; font-weight: bold; } .Va-document .content-info .my-box6 .my-content .content-box textarea:-ms-input-placeholder{ /* Internet Explorer 10-11 */ color:#ffffff; font-weight: bold; } .Va-document .content-info .my-box6 .my-content .content-box .el-form-item.is-error .el-input__inner, .el-form-item.is-error .el-input__inner:focus, .el-form-item.is-error .el-textarea__inner, .el-form-item.is-error .el-textarea__inner:focus, .el-message-box__input input.invalid, .el-message-box__input input.invalid:focus{ border-color:#ffffff; } .Va-document .content-info .my-box6 .my-content .btn a{ text-decoration: none; color: #ffffff; background-color: #EC1920; padding: 10px 50px; font-size: 16px; border-radius: 4px; display: inline-block; } .Va-document .content-info .my-box7{ width: 100%; box-sizing: border-box; background-color: #212D3E; } .Va-document .content-info .my-box7 .my-content{ max-width: 1280px; margin: auto; padding: 25px 50px; color: #9AA4B2; } .Va-document .content-info .my-box7 .my-content p{ margin: 20px 0; font-size: 14px; } .Va-document .content-info .my-box7 .my-content .bottom{ display: flex; justify-content: space-between; } .Va-document .content-info .my-box7 .my-content p a{ text-decoration: none; color: #4990ef; } .el-form-item.agree .el-form-item__content{ line-height: 24px; margin-top: 10px; } div.menu-logo { margin: 0 6px; cursor: pointer; user-select: none; } .menu-logo.chooseLang{ /* border: 1px solid #C5C5C9; */ width: 130px; /* margin-bottom: 10px; */ text-align: center; line-height: 22px; } .s-btn{ background-color: #EB3F57; border-color: #EB3F57; } .el-button--primary:active,.el-button:focus,.el-button--primary:hover{ background-color: #EB3F57; border-color: #EB3F57; opacity: 0.8; } .el-input__inner:focus{ border-color: #EB3F57; } @media screen and (max-width: 768px) { .Va-document .content-info .my-box1{ padding: 10px 0; background-size: auto 100%; } .Va-document .content-info .my-box1 .my-content h5.title{ font-size: 20px; margin-top: 0; } .Va-document .content-info .my-box1 .my-content p.tit{ margin: 10px 0; } .Va-document .content-info .my-box1 .my-content .el-col{ padding: 10px 15px; } .Va-document .content-info .my-box1 .my-content .banner-title a.btn{ margin: 0; } .Va-document .content-info .my-box2{ padding: 0 15px; } .Va-document .content-info .my-box2 .my-content .red{ font-size: 26px; width: 45px; height: 45px; } .Va-document .content-info .my-box2 .my-content .red img{ width: 45px; height: 45px; } .Va-document .content-info .my-box2 .my-content .el-col{ justify-content: space-around; padding: 10px; } .Va-document .content-info .my-box2 .my-content{ margin-bottom: 0px; } .Va-document .content-info .my-box2 .my-content .small{ font-size: 15px; } .Va-document .content-info .my-box3 { margin-top: 0px; } .Va-document .content-info .my-box3 .my-content{ padding: 0 15px; } .Va-document .content-info .my-box3 .my-content .con-box .el-col { box-sizing: border-box; padding: 10px; } .Va-document .content-info .my-box3 .my-content h5.title { text-align: center; font-size: 20px; margin-bottom: 0; } .el-carousel__container{ height: 150px !important; } .Va-document .content-info .my-box3 .my-content .banner-btn{ font-size: 16px; } .Va-document .content-info .my-box3 .my-content .banner-btn .box p{ padding: 12px 20px; } .Va-document .content-info .my-box3 .my-content .banner p.tip { bottom: 0px; left: 10px; font-size: 12px; } .Va-document .content-info .my-box3 .my-content .banner .tip1 { position: absolute; bottom: 35px; left: 0px; font-weight: bold; font-size: 14px; color: #333333; } .Va-document .content-info .my-box3 .my-content .banner .tip1 .tip1-box p { margin: 0 0px; } .Va-document .content-info .my-box3 .my-content .banner .tip1 .tip1-box.tip1-box1{ margin-left: 0; margin-bottom: 10px; } .Va-document .content-info .my-box3 .my-content .banner .tip1 .tip1-box img { width: 41px; height: 28px; } .Va-document .content-info .my-box3 .my-content .banner .tip2 { position: absolute; bottom: 70px; left: 0px; font-size: 14px; color: #ffffff; } .Va-document .content-info .my-box3 .my-content .banner .tip2 .tip1-box.tip1-box1 { margin-left: 0; margin-bottom: 10px; } .Va-document .content-info .my-box3 .my-content .banner .tip2 .tip1-box img { width: 41px; height: 28px; } .Va-document .content-info .my-box3 .my-content .banner-btn{ padding: 0 20px; } .Va-document .content-info .my-box4 .my-content { padding: 0; } .Va-document .content-info .my-box4 .my-content .content-big{ background-image: none; } .Va-document .content-info .my-box4 .my-content h5.title { text-align: center; margin-bottom: 4px; } .Va-document .content-info .my-box4 .my-content .el-row .box-r { padding-right: 0px; } .Va-document .content-info .my-box4 .my-content .el-row .box-l { padding-left: 0px; } .Va-document .content-info .my-box4 .my-content .step .sum { width: 40px; height: 40px; border-radius: 50px; background-color: #DF3737; font-size: 20px; color: #ffffff; text-align: center; line-height: 40px; margin-right: 15px; } .Va-document .content-info .my-box4 .my-content .step .tit h5 { font-size: 18px; margin: 15px 0; } .Va-document .content-info .my-box4 .my-content .step .tit p { font-size: 16px; } .Va-document .content-info .my-box4 .my-content i.el-icon-arrow-down { font-size: 36px; font-weight: bold; } .Va-document .content-info .my-box4 .my-content h5.title span{ font-size: 16px; } .Va-document .content-info .my-box4 .my-content .box { margin: 20px; font-size: 16px; font-weight: bold; } .Va-document .content-info .my-box4 .my-content .content-box { padding: 0 12px; } .Va-document .content-info .my-box4 .my-content .box-con .el-col{ margin-bottom: 8px; } .Va-document .content-info .my-box4 .my-content .box-con .content .tit{ font-size: 14px; } .Va-document .content-info .my-box5 { margin-top: 0px; } .Va-document .content-info .my-box5 .my-content { justify-content: center; } .Va-document .content-info .my-box5 .my-content .tit h5 { font-size: 18px; } .Va-document .content-info .my-box5 .my-content .tit p { font-size: 16px; margin-top: 10px; } .Va-document .content-info .my-box5 .my-content .btn a { margin-top: 20px; } .Va-document .content-info .my-box6 { margin-top: 0px; } .Va-document .content-info .my-box6 .my-content .content-box { width: 100%; padding: 10px; box-sizing: border-box; } .Va-document .content-info .my-box6 .my-content .tit h5 { font-size: 16px; margin-bottom: 10px; } .Va-document .content-info .my-box7 .my-content { padding: 15px; } .Va-document .title-head .my-content .user-area ul li.login { padding-left: 3px; margin-left: 3px; } .menu-logo.chooseLang{ margin: 0; width: 120px; } .Va-document .title-head .my-content .user-area ul li.login a span { padding-left: 0px; } }