*{
    padding: 0;
    margin: 0;
}
body{
    /*min-width: 1800px;*/
    position: absolute;
    width: 100%;
    height: 100%;
}
#app{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    -webkit-text-size-adjust:none
}
.programDialog{
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background: #fff;
    padding: 20px 10px;
    border-radius: 10px;
    box-shadow: 0 0 3px 2px #dddcdc;
    width: 210px;
}
.programDialog .programcloas{
    position: absolute;
    right: 20px;
    font-size: 23px;
    display: inline-block;
    top: 6px;
    font-weight: 600;
    color: #333;
    cursor: pointer;
}
.programDialog .programcont img{
    width: 90%;
    margin: 0 auto;
    display: block;
}
.programDialog .programtext{
    text-align: center;
    font-size: 15px;
    margin-top: 12px;
}
.left{
    width: 324px;
    flex: 1;
    height: 100vh;
    background-image: url("../img/leftBackground.png");
    background-size:100% 100%;
    background-repeat:no-repeat;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}
.left .logoTitle{
    width: 197px;
    height: 45px;
    margin: 70px auto 40px;
}
.left .leftText{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 73px;
}
.leftText .txetSpan{
    font-size: 27px;
    font-weight: bold;
    color: #E26E4A;
}
.leftText .spanText{
    color: #777777;
    font-size: 16px;
    margin-bottom: 4px;
}
.leftText .spanTextBig{
    color: #777777;
    font-weight: bold;
    font-size: 16px;
    white-space: nowrap;  /*强制span不换行*/
    display: inline-block;  /*将span当做块级元素对待*/
    margin-bottom: 4px;
}
.leftFooter{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 50px;
}
.leftFooter .login{
    width: 183px;
    height: 183px;
    margin-bottom: 16px;
}
.leftFooter .login1{
    width: 82px;
    height: 82px;
    border-radius: 50%;
    border: 3px solid #E5E5E5;
    margin-bottom: 8.5px;
}
.leftFooter p{
    font-size: 14px;
    color: #666666;
    margin-bottom: 34px;
}
.leftFooter .leftFooterS{
    width: 207px;
    height: 41px;
    border-radius: 5px;
    border: 0.5px solid #BFBFBF;
    display: flex;
    align-items: center;
    justify-content: center;
}
.leftFooterY{
    width: 207px;
    height: 41px;
    border-radius: 10px;
    background-color: #E26E4A;
    display: flex;
    align-items: center;
    justify-content: center;
}
.leftFooterS img{
    width: 16px;
    height: 16px;
    margin-right: 5px;
}
.leftFooterY img{
    width: 16px;
    height: 16px;
    margin-right: 5px;
}
.leftFooterY span{
    font-size: 16px;
    display: inline-block;
    white-space: nowrap;
    color: #FFFFFF;
}
.leftFooterS span{
    font-size: 16px;
    display: inline-block;
    white-space: nowrap;
    color: #0E283E;
}
.right{
    margin-left: 324px;
    flex-grow: 1;
}
.right .header{
    width: 100%;
    height: 649px;
    background-color: #f86b44;
    background-image: url("../img/headerBg.png");
    background-size:100% 100%;
    background-repeat:no-repeat;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 126px;
    padding-right: 195px;
    box-sizing: border-box;
    color: #FFFFFF;
}
.header img{
    /*width: 530px;*/
    /*height: 443px;*/
}
.header h1{
    display: block;
    font-size: 46px;
}
.header h3{
    display: block;
    font-size: 22px;
    margin: 10.5px auto 30.5px;
}
.header p{
    display: block;
    font-size: 18px;
}
.header .headerTitler{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.headerTitler h1{
    font-size: 44px;
    font-weight: 700;
    color: #ffffff;
    margin: 33px 0 29px;
}
.headerTitler .headlertoplist{
    opacity: 0.8;
    font-size: 18px;
    font-weight: 400;
    color: #ffffff;
    margin: 11px 0;
}
.headerTitler .headlerBtn{
    width: 192px;
    height: 52px;
    background: #ffffff;
    border-radius: 10px;
    font-size: 22px;
    font-weight: 700;
    color: #e26e4a;
    text-align: center;
    line-height: 52px;
    margin-top: 51px;
}
.headlertop{
    width: 285px;
    display: flex;
    align-items: end;
    justify-content: space-between;
}
.headlertop h4{
    font-size: 33px;
    font-weight: 700;
    color: #ffffff;
    display: inline-block;
    position: relative;
}
.headlertop h4::before{
    content: '小程序';
    display: block;
    position: absolute;
    right: -50px;
    top: -15px;
    font-size: 12px;
    font-weight: 700;
    color: #e26e4a;
    padding: 5px;
    background: rgba(255,255,255,0.8);
    border-radius: 12px 12px 12px 0px;
}
.headlertop span{
    font-size: 16px;
    color: #ffffff;
}
.right .main{
    width: 100%;
    height: 520px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 117px;
    padding-right: 145px;
    box-sizing: border-box;
}
.main .titleiconbtn{
    text-align: center;
}
.main .titleiconbtn img{
    width: 70px;
    height: 70px;
}
.main .titleiconbtn h3{
    font-size: 24px;
    font-weight: 700;
    color: #638dfe;
    letter-spacing: 4.8px;
    margin: 6px auto 38px;
}
.main .titleiconbtn .freeusebtn{
    width: 176px;
    height: 48px;
    background: #638dfe;
    border-radius: 10px;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    color: #ffffff;
    line-height: 48px;
}
/*.mainOne{*/
    /*background-image: url("../img/mainOne.png");*/
    /*background-size:100% 100%;*/
    /*background-repeat:no-repeat;*/
    /*padding-left: 183px;*/
    /*padding-right: 153px;*/
    /*box-sizing: border-box;*/
/*}*/
/*.mainTwo{*/
    /*background-image: url("../img/mainTwo.jpg");*/
    /*background-size:100% 100%;*/
    /*background-repeat:no-repeat;*/
    /*padding-left: 139px;*/
    /*padding-right: 202px;*/
    /*box-sizing: border-box;*/
/*}*/
/*.mainThree{*/
    /*background-image: url("../img/mainThree.jpg");*/
    /*background-size:100% 100%;*/
    /*background-repeat:no-repeat;*/
    /*padding-left: 183px;*/
    /*padding-right: 226px;*/
    /*box-sizing: border-box;*/
/*}*/
/*.headerTitler .mainTitle{*/
    /*display: flex;*/
    /*align-items: center;*/
    /*margin-bottom: 33px;*/
/*}*/
/*.mainTitle img{*/
    /*width: 40px;*/
    /*height: 37px;*/
    /*margin-right: 7px;*/
/*}*/
/*.mainTitle h3{*/
    /*font-size: 32px;*/
    /*color: #E26E4A;*/

/*}*/
.headerTitler .mainCon{
    display: flex;
    align-items: center;
    margin-bottom: 7px;
}
.headerTitler .mainCon img{
    width: 9px;
    height: 9px;
    margin-right: 7px;
}
.headerTitler .mainCon span{
    font-size: 20px;
    color: #666666;
    letter-spacing: 3.6px;
}
.main .logoMain1{
    width: 553px;
    height: 417px;
}
.main .logoMain2{
    width: 559px;
    height: 416px;
}
.main .logoMain3{
    width: 624px;
    height: 284px;
    margin-right: -48px;
 }
.footer{
    width: 100%;
    /*height: 227px;*/
    background-color: #0E283C;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}
.titleModel{
    width: 100%;
    height: 85%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 180px;
    padding-right: 195px;
    box-sizing: border-box;
}
.footerLeft{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    color: #FFFFFF;
}
.footerLeft h3{
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 26px;
}
.footerLeft p{
    font-size: 14px;
}
.footerRight{
    display: flex;
    align-items: center;
}
.footerRight img{
    width: 114px;
    height: 114px;
    margin-left: 38px;
}
.footer span{
    width: 100%;
    height: 15%;
    display: block;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #FFFFFF;
}