caimei365-www/src/main/resources/static/css/supplier-login/text_info.css

html {
    scroll-behavior: smooth;
    scroll-padding-top: 7vh;
}
body{
    width: 100vw;
    height: 100vh;
}
#scrollTop {
    display: none !important;
}
[v-cloak] {
    opacity: 0;
}
.text_info {
    width: 100vw;
    height: 100%;
    box-sizing: border-box;
    overflow-y: scroll;
}
.text_info .text_info_contain {
    height: auto;
    padding: 10vh 24vw;
    box-sizing: border-box;
    width: 100%;
    background: #fff;
}
.text_info .text_info_contain p {
    font-size: 16px;
    line-height: 30px;
    color: #777;
}
.username {
    color: #FF5B00;
    position: relative;
    cursor: pointer;
    box-sizing: border-box;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.username::after {
    content: '\276F';
    font-weight: normal;
    position: absolute;
    right: -14px;
    top: 0;
    transform: rotate(90deg);
    transition: .3s;
}
.username:hover {
    border-bottom: 1px solid;
}
.username:hover::after{
    transform: rotate(270deg);
}
.username .el-popover__reference-wrapper .el-button--text {
    color: #FF5B00;
}
.el-popover {
    padding: 5px !important;
    min-width: 90px !important;
}
.el-popover .cShow {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}
.el-popover__reference{
    font-size: 0.8vw;
}
.a_cm {
    padding: 10px;
}
.login_a:hover {
    color: white;
}
.slide_icon {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: fixed;
    right: 1vw;
    bottom: 140px;
    background: #FF5B00;
    border-radius: 4px;
    padding: 4px;
    height: auto;
    z-index: 999;
}
.slide_icon .slide_icon_item {
    width: 100%;
    height: 65px;
    display: flex;
    justify-content: center;
    align-items: end;
    color: #FFFFFF;
    font-size: 14px;
    cursor: pointer;
    padding: 0.4vw 0;
    box-sizing: border-box;
}
.slide_icon_item:nth-child(1){
    background: url(/img/supplier-login/float/d.png) center no-repeat;
    background-position: top;
}
.slide_icon_item:nth-child(3){
    background: url(/img/supplier-login/float/z.png) center no-repeat;
}
.slide_icon_item:nth-child(2){
    border-top: 1px solid rgb(255,255,255, 0.3);
    border-bottom: 1px solid rgb(255,255,255, 0.3);
    background: url(/img/supplier-login/float/w.png) center no-repeat;
    background-position: top;
}
.tooltip {
    background: #FFFFFF;
    box-shadow: 0px 4px 16px 0px rgba(51,51,51,0.12);
    border-radius: 4px;
    z-index: 999;
    position: fixed;
    transition: .3s;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    right: 90px;
}

.slide_icon .slide_icon_item .tooltip_1{
    width: 170px;
    height: 64px;
    padding: 10px;
    text-align: center;
    display: none;
    opacity: 0;
}
.slide_icon .slide_icon_item .tooltip_1 .day {
    color: #666666;
    font-size: 16px;
}
.slide_icon .slide_icon_item .tooltip_1 .phone_number {
    color: #FF5B00;
    font-size: 20px;
}
.slide_icon .slide_icon_item .tooltip_1::after {
    content: '';
    height: 0;
    width: 0;
    border: 10px solid transparent;
    border-left: 15px solid white;
    display: block;
    position: absolute;
    right: -20px;
    bottom: 0;
}
.slide_icon .slide_icon_item .tooltip_2::after {
    content: '';
    height: 0;
    width: 0;
    border: 10px solid transparent;
    border-left: 15px solid white;
    display: block;
    position: absolute;
    right: -20px;
    top: 0;
}
.slide_icon .slide_icon_item .tooltip_2{
    width: 150px;
    height: 150px;
    display: none;
    opacity: 0;
}
.slide_icon .slide_icon_phone:hover .tooltip_1 {
    opacity: 1;
    display: flex;
}
.slide_icon .slide_icon_qrcode:hover .tooltip_2 {
    opacity: 1;
    display: flex;
}
.slide_icon_item .slide_icon_phone .slide_icon_text {
    color:#666666;
}
.slide_icon .slide_icon_item .slide_icon_phone .slid_phonenumber {
    font-size: 1vw;
    color: #FF5B00;
}
.login_header{
    width: 100vw;
    display: flex;
    justify-content: center;
    height: 7vh;
    position: fixed;
    top: 0;
    left: 0;
    background: #fff;
    z-index: 999;
}
.login_header_container{
    width: 95vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.img_logo {
    display: flex;
    align-items: center;
    cursor: pointer;
}
.img_logo .logo {
    width: 5.5vw;
    height: 4vh;
    background: url("/img/supplier-login/logo.png") no-repeat;
    background-size: 100% 100%;
}
.text {
    font-size: 1.2vw;
    font-weight: 400;
    color: #272727;
}
.header_link{
    align-items: center;
    position: relative;
    height: 100%;
    display: flex;
    overflow: hidden;
}
.header_link .nav_link {
    position: absolute;
    left: 36vw;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: end;
    width: 6vw;
    height: 100%;
    transition: .3s;
}
.header_link .nav_link .nav_link_item{
    width: 1.2vw;
    height: 0.2vh;
    background: #FF5B00;
    border-radius: 8px;
    margin-bottom: 1vh;
}
.header_link .header_link_itme {
    cursor: pointer;
    font-size: 0.84vw;
    width: 6vw;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}
.header_link .header_link_itme:hover{
    color: #FF5B00;
    transform: scale(1.1);
}
.header_link_itme:nth-child(1):hover ~ .nav_link {
    left: 0vw !important;
}
.header_link_itme:nth-child(2):hover ~ .nav_link {
    left: 6vw !important;
}
.header_link_itme:nth-child(3):hover ~ .nav_link {
    left: 12vw !important;
}
.header_link_itme:nth-child(4):hover ~ .nav_link {
    left: 18vw !important;
}
.header_link_itme:nth-child(5):hover ~ .nav_link {
    left: 24vw !important;
}
.header_link_itme:nth-child(6):hover ~ .nav_link {
    left: 30vw !important;
}
.header_link_itme:nth-child(7):hover ~ .nav_link {
    left: 36vw !important;
}
.header_link_itme:nth-child(8):hover ~ .nav_link {
    left: 49vw !important;
}
.isActiveLink {
    color: #FF5B00;
    transform: scale(1.1);
}
.login_header_container .iphone {
    width: 12vw;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 5%;
}
.login_header_container .iphone div:nth-child(1){
    width: 36px;
    height: 36px;
    background: url("/img/supplier-login/iPhone.png") no-repeat;
    background-size: contain;
    background-position: center;
}
.login_header_container .iphone div:nth-child(2) {
    color: #FF5B00;
    font-size: 1vw;
    margin-left: 5px;
    font-weight: bold;
    white-space: nowrap;
}
.login_header_container .login_regist {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 8vw;
    height: 100%;
}
.login_header_container .login_regist .login_btn{
    width: 40%;
    font-size: 0.7vw;
    border: 1px solid #ccc;
    text-align: center;
    padding: 0.2vw;
}
#login_content {
    position: relative;
    width: 100vw;
}
#fullpage {
    width: 100vw;
    position: absolute;
    left: 0;
    top: 0;
    height: 800vh;
    scroll-behavior: smooth;
    transition: all 0.8s ease;
}
#fullpage .page {
    width: 100vw;
    height: 100vh;
    scroll-snap-align: start;
    box-sizing: border-box;
    overflow: hidden;
}
#fullpage #zeroPage {
    height: auto;
    padding-top: 7vh;
}
#zeroPage .el-carousel__container {
    height: 510px;
}
.el-carousel__item:nth-child(1) {
    display: flex;
    justify-content: center;
    align-items: center;
}
#zeroPage .banner01 {
    background: url("/img/supplier-login/01-banner/banner-01.png") no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
#zeroPage .banner01 .left {
    height: 155px;
    width: 640px;
    background: url(/img/supplier-login/01-banner/banner-02-left.png) no-repeat;
    background-size: contain;
    background-position: right;
}
#zeroPage .banner01 .right {
    height: 377px;
    width: 459px;
    background: url(/img/supplier-login/01-banner/banner-01-right.png) no-repeat;
    background-size: contain;
}
#zeroPage .banner02 {
    background: url("/img/supplier-login/banner-2/banner-02.png") no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-position: center;
}
#zeroPage .banner02 .left {
    height: 45%;
    width: 50%;
    background: url(/img/supplier-login/banner-2/banner-02-left.png) no-repeat;
    background-size: contain;
    background-position: right;
}
#zeroPage .banner02 .right {
    height: 70%;
    width: 40%;
    background: url(/img/supplier-login/banner-2/banner-02-right.png) no-repeat;
    background-size: contain;
}
.el-carousel__item:nth-child(2) {
    display: flex;
    justify-content: center;
    align-items: center;
    background: url("/img/supplier-login/01-banner/banner-01.png");
}
.el-carousel__indicator--horizontal .el-carousel__button {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #ccc;
    opacity: 1;
}
.el-carousel__indicator--horizontal.is-active .el-carousel__button{
    width: 6px;
    height: 6px;
    background: #FF5B00;
    border-radius: 50%;
    opacity: 1;
}
#zeroPage {
    background-color: #fff;
}
#zeroPage .server {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 600px;
    box-sizing: border-box;
}
.server .server_1,
.server .server_2,
.server .server_3 {
    height: 460px;
    width: 390px;
    position: relative;
}
#zeroPage .server .box {
    position: absolute;
    height: 100%;
    width: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: ease-in-out 600ms;
    -o-transition: ease-in-out 600ms;
    transition: .5s;
}
#zeroPage .server .tourist_bg,
#zeroPage .server .sale_bg,
#zeroPage .server .operate_bg {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    font-size: 18px;
    padding: 60px;
    box-sizing: border-box;
}
#zeroPage .server .operate,
#zeroPage .server .tourist,
#zeroPage .server .sale {
    width: 400px;
    height: 100%;
    transition: .5s;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    font-size: 18px;
    padding: 30px;
    box-sizing: border-box;
    background: linear-gradient(0deg, #FF5B00, #FF9300);
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
    color: #fff;
    white-space: nowrap;
}
#zeroPage .server .tourist_logo {
    width: 100px;
    height: 100px;
    background: url("/img/supplier-login/cycle/-11.png") no-repeat;
    background-size: cover;
}
#zeroPage .server .tourist_bg_logo {
    background: url("/img/supplier-login/cycle/1.png") no-repeat;
    width: 160px;
    height: 160px;
    background-size: cover;
}
#zeroPage .server .tourist_bg_title {
    color: black;
}
#zeroPage .server .tourist_title {
    color: #fff;
}
#zeroPage .server .server_1:hover .tourist_bg{
    -webkit-transform: rotateY(180deg) !important;
    transform: rotateY(180deg) !important;
}
#zeroPage .server .server_1:hover .tourist {
    -webkit-transform: rotateY(0deg) !important;
    transform: rotateY(0deg) !important;
}
#zeroPage .server .server_2:hover .operate_bg{
    -webkit-transform: rotateY(180deg) !important;
    transform: rotateY(180deg) !important;
}
#zeroPage .server .server_2:hover .operate {
    -webkit-transform: rotateY(0deg) !important;
    transform: rotateY(0deg) !important;
}
#zeroPage .server .server_3:hover .sale_bg{
    -webkit-transform: rotateY(180deg) !important;
    transform: rotateY(180deg) !important;
}
#zeroPage .server .server_3:hover .sale {
    -webkit-transform: rotateY(0deg) !important;
    transform: rotateY(0deg) !important;
}
#zeroPage .server .operate_logo {
    background: url("/img/supplier-login/cycle/-22.png") no-repeat;
    width: 100px;
    height: 100px;
    background-size: cover;
}
#zeroPage .server .operate_bg_logo {
    background: url("/img/supplier-login/cycle/2.png") no-repeat;
    width: 160px;
    height: 160px;
    background-size: cover;
}
#zeroPage .server .operate_bg_title {
    color: black;
}
#zeroPage .server .all_cont {
    font-size: 16px;
    box-sizing: border-box;
    text-align: center;
}
#zeroPage .server .sale_logo {
    background: url("/img/supplier-login/cycle/-33.png") no-repeat;
    width: 100px;
    height: 100px;
    background-size: cover;
}
#zeroPage .server .sale_bg_logo {
    background: url("/img/supplier-login/cycle/3.png") no-repeat;
    width: 160px;
    height: 160px;
    background-size: cover;
}
#zeroPage .server .sale_bg_title {
    color: black;
}
#firstPage {
    background: url("/img/supplier-login/selection/select_bg.png") no-repeat;
    background-size: cover;
    height: 1014px !important;
}
#firstPage .selection {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 78px;
}
#firstPage .selection .selection_item{
    padding-top: 20px;
    box-sizing: border-box;
    transition: .3s;
    height: 666px;
}
#firstPage .selection .selection_item:hover {
    padding-top: 0;
}
#firstPage .selection .selection_item:hover .select_btn {
    background-color: #FF5B00;
    color: white;
}
#firstPage .selection .selection_item:nth-child(2){
    margin: 2vh;
}
#firstPage .selection_item .selection_item_contain {
    width: 392px;
    height: 646px;
    background-color: #fff;
}
#firstPage .selection_item .selection_item_contain .contain_bg_01 {
    width: 392px;
    height: 120px;
    background: url("/img/supplier-login/selection/select_01.png") no-repeat;
    background-size: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 40px;
}
#firstPage .selection_item .selection_item_contain .contain_bg_02 {
    width: 392px;
    height: 120px;
    background: url("/img/supplier-login/selection/select_02.png") no-repeat;
    background-size: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 2vw;
}
#firstPage .selection_item .selection_item_contain .contain_bg_03 {
    width: 392px;
    height: 120px;
    background: url("/img/supplier-login/selection/select_03.png") no-repeat;
    background-size: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 2vw;
}
#firstPage .selection_item_contain .bg1_text {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    font-size: 18px;
    padding: 48px;
    box-sizing: border-box;
    height: 526px;
}
.bg1_contain {
    display: flex;
    align-items: center;
    width: 100%;
    font-size: 0.8vw;
    height: 3.5vh;
    white-space: nowrap;
}
.square_icon {
    width: 0.2vw;
    height: 0.2vw;
    border: 1px solid #B2B2B2;
    margin: 0 0.5vw;
    transform: rotate(45deg);
}
.text_contain {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 257px;
}
.select_btn {
    width: 100%;
    height: 5vh;
    border: 1px solid #E2E2E2;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    cursor: pointer;
}
.select_btn_login {
    width: 100%;
    height: 5vh;
    border: 1px solid #E2E2E2;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    background: #cccccc;
}
.Title {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;
    width: 100%;
    height: 11vh;
    margin-top: 5vh;
}
.Title .text {
    font-size: 1.8vw;
}
.Title .title {
    font-size: 0.9vw;
}
#secondPage .operationa{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 4vh;
}
#secondPage .operationa_contain {
    width: 940px;
    height: 570px;
    position: relative;
}
#secondPage .operationa_contain .bg2{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url("/img/supplier-login/oprate/bg_1.png") no-repeat;
    background-size: cover;
}
#secondPage .operationa_contain .bg3{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url("/img/supplier-login/oprate/author/bg_2.png") no-repeat;
    background-size: cover;
}
#secondPage .operationa_contain .bg1 {
    position: absolute;
    left: 0;
    top: 10px;
    width: 97.8%;
    height: 90%;
    background: url(/img/supplier-login/oprate/bg_2.png) no-repeat;
    background-size: contain;
    background-position: right;
}
#secondPage .operationa_contain .bg4 {
    left: 6px;
    top: 14px;
    width: 70%;
    height: 100%;
    background: url(/img/supplier-login/oprate/bg_1.png) no-repeat;
    background-size: contain;
    position: absolute;
    z-index: -1;
}
.operationa_contain .online_store {
    width: 400px;
    height: 70px;
    position: absolute;
    display: flex;
    align-items: center;
    left: 75px;
    top: 45px;
    border-bottom: 2px solid #FFCEAF;
}
.operationa_contain .online_store .online_logo {
    width: 62px;
    height: 100%;
    border-bottom: 6px solid #FFC39A;
    border-radius: 4px;
    background: url(/img/supplier-login/oprate/house.png) no-repeat;
    background-size: contain;
    background-position: top;
}
.online_title {
    font-size: 1.8vw;
    font-weight: bold;
    margin-left: 20px;
}
.operationa_contain .author_active {
    width: 400px;
    height: 70px;
    position: absolute;
    display: flex;
    align-items: center;
    right: 75px;
    top: 45px;
    border-bottom: 2px solid #FFCEAF;
    flex-direction: row-reverse;
}
.operationa_contain .author_active .online_logo {
    width: 62px;
    height: 100%;
    border-bottom: 6px solid #FFC39A;
    border-radius: 4px;
    background: url(/img/supplier-login/oprate/z.png) no-repeat;
    background-size: contain;
    background-position: top;
}
.online_title {
    font-size: 1.8vw;
    font-weight: bold;
    margin-right: 20px;
}
.operationa_contain .online {
    width: 383px;
    height: 53px;
    position: absolute;
    display: flex;
    align-items: center;
    left: 56px;
    top: 37px;
}
.online_title {
    font-size: 28px;
    font-weight: bold;
    margin-right: 20px;
}
.operationa_contain .online .online_logo{
    width: 62px;
    height: 100%;
    border-radius: 4px;
    background: url(/img/supplier-login/oprate/house.png) no-repeat;
    background-size: contain;
    background-position: top;
}
.operationa_contain .author {
    width: 222px;
    height: 65px;
    position: absolute;
    display: flex;
    align-items: center;
    right: 40px;
    top: 20px;
}
.operationa_contain .author .author_logo {
    height: 65px;
    width: 65px;
    background: url(/img/supplier-login/oprate/z.png) no-repeat;
    background-size: contain;
}
.operationa_contain .author .author_title {
    font-size: 28px;
    color: #FFFFFF;
}
.operationa_contain .contain {
    width: 690px;
    height: 400px;
    position: absolute;
    left: 120px;
    top: 133px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
}
.operationa_contain .contain .contain_logo {
    width: 100%;
    height: 150px;
    background: url(/img/supplier-login/oprate/title.png) no-repeat;
    background-size: contain;
    background-position: center;
}
.operationa_contain .contain .contain_list {
    width: 100%;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.operationa_contain .contain .contain_list .list_item {
    width: 200px;
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 2px solid white;
    justify-content: space-around;
    align-items: center;
    background: #FDF0E9;
    box-shadow: 0px 6px 50px 0px rgba(255,91,0,0.24);
    border-radius: 16px;
    padding: 20px;
    box-sizing: border-box;
}
.operationa_contain .contain .contain_list .list_item:nth-child(2){
    margin: 0 1%;
}
.operationa_contain .contain .contain_list .list_item:nth-child(1) div:nth-child(1) {
    width: 80px;
    height: 50px;
    background: url(/img/supplier-login/oprate/p.png) no-repeat;
    background-size: contain;
    background-position: center;
}
.operationa_contain .contain .contain_list .list_item:nth-child(2) div:nth-child(1) {
    width: 80px;
    height: 50px;
    background: url(/img/supplier-login/oprate/l.png) no-repeat;
    background-size: contain;
    background-position: center;
}
.operationa_contain .contain .contain_list .list_item:nth-child(3) div:nth-child(1) {
    width: 80px;
    height: 50px;
    background: url(/img/supplier-login/oprate/s.png) no-repeat;
    background-size: contain;
    background-position: center;
}
.operationa_contain .athor_contain {
    width: 690px;
    height: 400px;
    position: absolute;
    left: 120px;
    top: 133px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
}
.operationa_contain .athor_contain .athor_contain_logo {
    width: 100%;
    height: 150px;
    background: url(/img/supplier-login/oprate/author/logo.png) no-repeat;
    background-size: contain;
    background-position: center;
}
.operationa_contain .athor_contain .athor_contain_list {
    width: 100%;
    height: 200px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
}
.athor_contain_list .list_item {
    width: 97%;
    height: 25%;
    border: 1px solid #FFC9A9;
    border-radius: 50px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.athor_contain_list .list_item:nth-child(1) .list_item_logo  {
    background: url(/img/supplier-login/oprate/author/02.png) no-repeat;
    background-size: contain;
    background-position: center;
    width: 42px;
    height: 50px;
    position: absolute;
    left: 10px;
    top: 0;
}
.athor_contain_list .list_item:nth-child(2) .list_item_logo  {
    background: url(/img/supplier-login/oprate/author/03.png) no-repeat;
    background-size: contain;
    background-position: center;
    width: 42px;
    height: 50px;
    position: absolute;
    left: 10px;
    top: 0;
}
.athor_contain_list .list_item:nth-child(3) .list_item_logo  {
    background: url(/img/supplier-login/oprate/author/04.png) no-repeat;
    background-size: contain;
    background-position: center;
    width: 42px;
    height: 50px;
    position: absolute;
    left: 10px;
    top: 0;
}

.athor_contain_list .list_item .text_contain{
    width: 80%;
    height: 100%;
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: row;
    color: #FFC9A9;
}
.athor_contain_list .list_item .text_contain .text_contain_item {
    font-size: 16px;
    font-weight: bold;
}
.athor_contain_list .list_item .text_contain .text_contain_item2 {
    width: 1px;
    height: 20px;
    background: #ffe2d3;
    margin: 0 10px;
}
.athor_contain_list .list_item .text_contain .text_contain_item3 {
    font-size: 16px;
}
#thirdPage {
    background: #fff;
}
.pageInner {
    height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.pageInner .container {
    width: 1200px;
    height: 20vw;
    display: flex;
    justify-content: space-between;
    position: relative;
}
.pageInner .thirdPage_container_contant {
    position: absolute;
    width: 100%;
    height: 5vw;
    left: 0;
    top: -6vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.pageInner .thirdPage_container_contant .container_title {
    width: 33%;
    height: 100%;
    border-bottom: 1px solid #FF5B00;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    font-weight: bold;
    font-size: 1.5vw;
    color: #FF5B00;
    opacity: 0;
}
.pageInner .container .container_item {
    height: 100%;
    width: 18%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}
.container_item .container_item_active .container_item_hover {
    width: 100%;
    height: 50%;
    display: flex;
    position: absolute;
    flex-direction: column;
    font-size: 0.8vw;
    color: #202020;
    transition: .3s;
    justify-content: space-around;
    align-items: center;
    padding: 1vw 0;
    box-sizing: border-box;
}
.container_item .container_item_active .container_item_hover2 {
    width: 100%;
    height: 50%;
    display: flex;
    position: absolute;
    flex-direction: column;
    font-size: 0.8vw;
    color: #202020;
    transition: .3s;
    justify-content: space-around;
    align-items: center;
    padding: 1vw 0;
    box-sizing: border-box;
    bottom: 0;
}
.container_item .container_item_active .item_title {
    display: none;
    font-size: 1.5vw;
    color: #FF5B00;
    font-weight: bold;
    width: 80%;
}
.container_item .container_item_active .item_contant {
    display: none;
    color: #666666;
    font-size: 18px;
    width: 80%;
}
.container_item .container_item_active .item_logo {
    width: 4vw;
    height: 4vw;
}
.container_item .container_item_active .item_logo_box {
    width: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
}
#item_logo_1 {
    background: url(/img/supplier-login/05-page/信.png) center no-repeat;
    background-size: contain;
}
#item_logo_2 {
    background: url(/img/supplier-login/05-page/矩.png) center no-repeat;
    background-size: contain;
}
#item_logo_3 {
    background: url(/img/supplier-login/05-page/正.png) center no-repeat;
    background-size: contain;
}
#item_logo_4 {
    background: url(/img/supplier-login/05-page/SEO.png) center no-repeat;
    background-size: contain;
}
#item_logo_5 {
    background: url(/img/supplier-login/05-page/CRM.png) center no-repeat;
    background-size: contain;
}
#item_logo_6 {
    background: url(/img/supplier-login/05-page/认.png) center no-repeat;
    background-size: contain;
}
#item_logo_7 {
    background: url(/img/supplier-login/05-page/美.png) center no-repeat;
    background-size: contain;
}
#item_logo_8 {
    background: url(/img/supplier-login/05-page/私.png) center no-repeat;
    background-size: contain;
}
#item_logo_9 {
    background: url(/img/supplier-login/05-page/分.png) center no-repeat;
    background-size: contain;
}
#item_logo_10 {
    background: url(/img/supplier-login/05-page/会.png) center no-repeat;
    background-size: contain;
}
#item_logo_11 {
    background: url(/img/supplier-login/05-page/金.png) center no-repeat;
    background-size: contain;
}
#item_logo_12 {
    background: url(/img/supplier-login/05-page/交.png) center no-repeat;
    background-size: contain;
}
#thirdPage .container_item .container_item_active {
    height: 50%;
    width: 100%;
}
#thirdPage .container_item .container_item_active:hover #item_logo_1 {
    background: url(/img/supplier-login/05-page/slide/01.png) center no-repeat;
}
#thirdPage .container_item .container_item_active:hover #item_logo_2 {
    background: url(/img/supplier-login/05-page/slide/02.png) center no-repeat;
}
#thirdPage .container_item .container_item_active:hover #item_logo_3 {
    background: url(/img/supplier-login/05-page/slide/03.png) center no-repeat;
}
#thirdPage .container_item .container_item_active:hover #item_logo_4 {
    background: url(/img/supplier-login/05-page/slide/04.png) center no-repeat;
}
#thirdPage .container_item .container_item_active:hover #item_logo_5 {
    background: url(/img/supplier-login/05-page/slide/05.png) center no-repeat;
}
#thirdPage .container_item .container_item_active:hover #item_logo_6 {
    background: url(/img/supplier-login/05-page/slide/06.png) center no-repeat;
}
#thirdPage .container_item .container_item_active:hover #item_logo_7 {
    background: url(/img/supplier-login/05-page/slide/07.png) center no-repeat;
}
#thirdPage .container_item .container_item_active:hover #item_logo_8 {
    background: url(/img/supplier-login/05-page/slide/08.png) center no-repeat;
}
#thirdPage .container_item .container_item_active:hover #item_logo_9 {
    background: url(/img/supplier-login/05-page/slide/09.png) center no-repeat;
}
#thirdPage .container_item .container_item_active:hover #item_logo_10 {
    background: url(/img/supplier-login/05-page/slide/10.png) center no-repeat;
}
#thirdPage .container_item .container_item_active:hover #item_logo_11 {
    background: url(/img/supplier-login/05-page/slide/11.png) center no-repeat;
}
#thirdPage .container_item .container_item_active:hover #item_logo_12 {
    background: url(/img/supplier-login/05-page/slide/12.png) center no-repeat;
}
#thirdPage .container_item .container_item_active:hover .container_item_hover {
    background: #F7F7F7 !important;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 111;
}
#thirdPage .container_item .container_item_active:hover .container_item_hover2 {
    background: #F7F7F7 !important;
    height: 100%;
    left: 0;
    z-index: 111;
}
#thirdPage .container_item .container_item_active:hover .item_logo_box {
    justify-content: end;
}
#thirdPage .container_item .container_item_active:hover .item_logo {
    width: 5.2vw;
    height: 5.2vw;
}
#thirdPage .container_item .container_item_active:hover .item_title {
    display: block !important;
}
#thirdPage .container_item .container_item_active:hover .item_title_p {
    display: none !important;
}
#thirdPage .container_item .container_item_active:hover .item_contant {
    display: block !important;
}
#thirdPage .container_item .container_item_active:hover .container_title:nth-child(1){
    display: flex !important;
}
#fourPage .pageInner_contain {
    width: 80%;
    height: 30vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#fourPage .pageInner_contain .nextChange {
    width: 40px;
    height: 48px;
    border: 1px solid #E2E2E2;
    border-radius: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #E2E2E2;
    cursor: pointer;
}
#fourPage .pageInner_contain .isActiveNext{
    border: 1px solid #FF5B00;
    color: #FF5B00;
}
#fourPage .el-carousel--horizontal {
    width: 90%;
}
#fourPage .el-carousel__arrow{
    display: none;
}
#fourPage .el-carousel__item {
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-sizing: border-box;
}
#fourPage .el-carousel__item .four_logo_1 {
    width: 50%;
    height: 80%;
}
#fourPage .el-carousel__item .logo_text {
    width: 45%;
    height: 80%;
    display: flex;
    flex-direction: column;
    justify-content: start;
    overflow: hidden;
}
#fourPage .el-carousel__item .logo_text .logo_title {
    font-size: 1.25vw;
    color: black;
    font-weight: bold;
    margin-bottom: 2vw;
}
#fourPage .el-carousel__item .logo_text .analysis {
    font-size: 0.8vw;
    line-height: 2vw;
}
#fivePage {
    background: url(/img/supplier-login/07-caimei/bg.png) no-repeat;
    background-size: 100% 100%;
}
#fivePage .inner_contain {
    width: 100%;
    height: 67vh;
    margin-top: 7vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
#fivePage .inner_contain .inner {
    width: 64%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
}
#fivePage .inner_contain .inner .caimei_introduction {
    color: white;
    font-size: 18px;
    width: 1200px;
    height: auto;
    padding: 3vh;
    background-color: rgba(255,255,255, 0.2);
    box-sizing: border-box;
    line-height: 40px;
}
#fivePage .inner_contain .inner .caimei_report {
    width: 90%;
    height: 55%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.caimei_report .report_item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    height: 100%;
    width: 20%;
}
.caimei_report .report_item .report_logo {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.6vw;
    width: 12vw;
    height: 9vw;
    background: url(/img/supplier-login/07-caimei/cirle.png) no-repeat center;
    background-size: contain;
    font-weight: bold;
    color: white;
}
.caimei_report .report_item .report_title {
    font-size: 0.8vw;
    color: #fff;
}
.caimei_report .report_item .report_line{
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: center;
}
.caimei_report .report_item .report_line .box1 {
    padding: 0.52vw 1px;
    height: 5.2vw;
}
.caimei_report .report_item .report_line .card4 {
    background-image: linear-gradient(#fff 35%, rgba(255,255,255,0) 0%);
    background-position: left;
    background-size: 1px 10px;
    background-repeat: repeat-y;
}
.caimei_report .report_item .report_line .container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}
.caimei_report .report_item .report_line .container .box {
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.caimei_report .report_item .report_line .container .box span {
    position: absolute;
    box-sizing: border-box;
    border: none;
    background: #FFFFFF;
    border-radius: 50%;
    animation: animate 1s linear infinite;
    animation-delay: calc(0.5s * var(--i))
}

#sixPage .community {
    width: 1200px;
    height: 70vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2vw;
    flex-direction: column;
}
.community .community_video{
    width: 100%;
    height: 45%;
    font-size: 1vw;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}
.community .community_article {
    width: 100%;
    height: 45%;
    font-size: 1vw;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}
.community_title {
    padding: 1% 0;
    font-size: 1vw;
}
.community .community_list {
    width: 100%;
    display: flex;
    /*justify-content: space-between;*/
    align-items: center;
    height: 90%;
}
.community_list .video_list_item {
    width: 24%;
    height: 100%;
    box-sizing: border-box;
    padding-top: 5px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    transition: .2s;
    cursor: pointer;
}
.community_list .article_list_item {
    width: 24%;
    height: 100%;
    box-sizing: border-box;
    padding-top: 5px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    transition: .2s;
    cursor: pointer;
}
.article_list_item .article_list_item_content {
    height: 100%;
    width: 100%;
    border: 1px solid #EAEAEA;
    box-sizing: border-box;
    color: #202020;
}
.video_list_item .video_list_item_content {
    height: 100%;
    width: 100%;
    border: 1px solid #EAEAEA;
    box-sizing: border-box;
    color: #202020;
    position: relative;
}
.video_list_item .video_list_item_content .player_bg {
    position: absolute;
    width: 100%;
    height: 60%;
    box-sizing: border-box;
    left: 0;
    top: 0;
    background: rgba(24, 23, 23, 0.4);
    display: none;
    justify-content: center;
    align-items: center;
    transition: .2s;
    z-index: 11;
}
.video_list_item_content .video_player {
    width: 100%;
    height: 60%;
    box-sizing: border-box;
    overflow: hidden;
}
.article_list_item_content .article_bg {
    width: 100%;
    height: 60%;
    box-sizing: border-box;
    overflow: hidden;
}
.video_list_item_content .video_title {
    width: 100%;
    height: 40%;
    box-sizing: border-box;
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 22px;
    padding: 20px
}
.article_list_item_content .article_text {
    width: 100%;
    height: 40%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
    font-size: 0.7vw;
    color: #808080;
}
.article_list_item_content .text_title {
    color: #202020;
    font-size: 1vw;
    width: 100%;
    box-sizing: border-box;
    border-left: 3px solid #FF5B00;
    padding: 0 4%;
}
.video_list_item:nth-child(1):hover {
    padding: 0 0 5px 0;
}
.video_list_item:nth-child(1):hover .video_list_item_content {
    box-shadow: 0px 6px 35px 0px rgba(255,157,102,0.12);
    color: #FF5B00;
}
.video_list_item:nth-child(1):hover .player_bg {
    display: flex;
}
.video_list_item:nth-child(2):hover .player_bg {
    display: flex;
}
.video_list_item:nth-child(3):hover .player_bg {
    top: 0;
    display: flex;
}
.video_list_item:nth-child(4):hover .player_bg {
    top: 0;
    display: flex;
}
.video_list_item:nth-child(2):hover {
    padding: 0 0 5px 0;
}
.video_list_item:nth-child(2):hover .video_list_item_content {
    box-shadow: 0px 6px 35px 0px rgba(255,157,102,0.12);
    color: #FF5B00 !important;
}
.video_list_item:nth-child(3):hover {
    padding: 0 0 5px 0;
}
.video_list_item:nth-child(3):hover .video_list_item_content {
    box-shadow: 0px 6px 20px 0px rgba(255,157,102,0.12);
    color: #FF5B00 !important;
}
.video_list_item:nth-child(4):hover {
    padding: 0 0 5px 0;
}
.video_list_item:nth-child(4):hover .video_list_item_content{
    box-shadow: 0px 6px 20px 0px rgba(255,157,102,0.12);
    color: #FF5B00;
}
.article_list_item:nth-child(1):hover {
    padding: 0 0 5px 0;
}
.article_list_item:nth-child(1):hover .article_list_item_content {
    box-shadow: 0px 6px 20px 0px rgba(255,157,102,0.12);
    color: #FF5B00 !important;
}
.article_list_item:nth-child(2):hover .article_list_item_content {
    box-shadow: 0px 6px 20px 0px rgba(255,157,102,0.12);
    color: #FF5B00 !important;
}
.article_list_item:nth-child(3):hover .article_list_item_content {
    box-shadow: 0px 6px 20px 0px rgba(255,157,102,0.12);
    color: #FF5B00 !important;
}
.article_list_item:nth-child(4):hover .article_list_item_content {
    box-shadow: 0px 6px 20px 0px rgba(255,157,102,0.12);
    color: #FF5B00 !important;
}
.article_list_item:nth-child(2):hover {
    padding: 0 0 5px 0;
}
.article_list_item:nth-child(3):hover {
    padding: 0 0 5px 0;
}
.article_list_item:nth-child(4):hover {
    padding: 0 0 5px 0;
}
.article_list_item:nth-child(1):hover .text_title,
.article_list_item:nth-child(2):hover .text_title,
.article_list_item:nth-child(3):hover .text_title,
.article_list_item:nth-child(4):hover .text_title {
    color: #FF5B00 !important;
}
@keyframes animate {
    0% {
        width: 0;
        height: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        width: 50px;
        height: 50px;
        opacity: 0;
    }
}
.cm_video_player {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(24, 23, 23, 0.5);
    display: none;
    z-index: 999;
    justify-content: center;
    align-items: center;
}