@charset "utf-8";

html {
    font-family: 'pingfang SC','helvetica neue',arial,'hiragino sans gb','microsoft yahei ui','microsoft yahei',simsun,sans-serif;
    font-size: 14px;
    -webkit-tap-highlight-color: transparent
}
html{
    font-size:12px;
}
body,button,dd,div,dl,dt,form,h1,h2,h3,h4,h5,h6,hr,input,li,ol,p,td,textarea,th,ul {
    margin: 0;
    padding: 0
}

h1,h2,h3,h4,h5,h6 {
    font-size: 100%
}

em,i {
    font-style: normal;
    font-weight: 400
}

button,input,select,textarea {
    font-family: PingFangSC-Light,'STHeiti Light','helvetica neue','hiragino sans gb',arial,'microsoft yahei ui','microsoft yahei',simsun,sans-serif
}

button,input,select {
    box-sizing: border-box
}

button {
    border: none
}

button,input[type=button],input[type=submit],select {
    cursor: pointer
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

li {
    list-style: none
}

a {
    text-decoration: none
}

a img,fieldset,iframe,img {
    border-width: 0;
    border-style: none
}

.clearfix:after,.clearfix:before {
    content: "";
    display: table
}

.clearfix:after {
    clear: both
}

.visually-hidden {
    position: absolute !important;
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px,1px,1px,1px);
    padding: 0 !important;
    border: 0 !important;
    height: 1px !important;
    width: 1px !important;
    overflow: hidden
}

.textoverflow {
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%
}

[class*=rno-],[class*=rno-]:after,[class*=rno-]:before {
    padding: 0;
    margin: 0;
    box-sizing: border-box
}


.page-header{
  width:900px;
  height:80px;
  display:flex;
  margin:0 auto;
  align-items:center;
}
.page-header .logo{
  width:44px;
  height:44px;
  background-image:url('./img/logo.png');
  background-size:cover;
  background-repeat: no-repeat;
  margin-right:10px;
}
.page-header .brand{
      width: 100px;
    height: 28px;
    background-image: url(./img/brand.png);
    background-size: cover;
    background-repeat: no-repeat;
    font-size: 24px;
    font-weight: bold;
}

.page-module{
  width:100%;
  position:relative;
}
.module-wrap{
  width:920px;
  height:100px;
  margin:0 auto;
  position:relative;
}

.module-1{
  height:470px;
  background: linear-gradient(to right, rgba(34,173,100), rgba(67,211,152));
}

.module-1 .channel-area{
  position:absolute;
  top:100px;
  left:0px;
}
.module-1 .channel-area .slogan{
  width: 426px;
    height: 41px;
    background-image: url(./img/slogan.png);
    background-size: 348px auto;
    background-repeat: no-repeat;
    font-size: 26px;
    color: #fff;
    font-weight: bold;
}

.module-2{
  height:484px;
  background-color:rgba(247, 247, 247, 1);
}
.module-2 .module-content{
  top:100px;
  left:0px;
}
.module-2 .phone-area{
  top:-320px;
  right:-50px;
}
.module-3{
  height:600px;
  background-color:#fff;
}
.module-3 .module-content{
  top:180px;
  right:0px;
}
.module-3 .phone-area{
  top:-160px;
  left:-50px;
}
.module-4{
  height:600px;
  background-color:rgba(247, 247, 247, 1);
}
.module-4 .module-content{
  top:200px;
  left:0px;
}
.module-4 .phone-area{
  top:-150px;
  right:-50px;
}

/* 渠道 */
.channel-list{
  margin-top:30px;
  display:flex;
}
.channel-list .channel-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  margin-right:10px;

}
.channel-list .channel-name{
  font-size:16px;
  color:#fff;
  margin-top:5px;
}
.channel-list .qr-code{
  width: 250px;
  height: 250px;
  cursor:pointer;
  transition:all 0.3s;
  border-radius:4px;
  overflow:hidden;
}
.channel-list .qr-code img{
  width:100%;
  height:100%;
}
.channel-list .qr-code:hover{
  transform:scale(1.1);
}


/* 文本 */
.module-content{
  position:absolute;
  color:#000;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  width:410px;
}
.module-content .title{
  font-size:32px;
  font-weight:600;
  position:relative;
  display:inline-block;
}
.module-content .title::after{
  content:'';
  display:block;
  background-color: rgba(31, 171, 98, 0.43);
  width: 100%;
  height: 17px;
  position:absolute;
  bottom:0;
  left:0;
}
.module-content .desc{
  font-size:20px;
  margin-top:20px;
  line-height:28px;
}


/* 手机 */
.phone-area{
  width:499px;
  height:591px;
  overflow: hidden;
  position:absolute;
}
.phone-area .phone-mask{
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  z-index:10;
  background-image:url('./img/phone-bg.png');
}
.phone-area .screen-image{
  width:357px;
  height:800px;
  position:absolute;
  background-size:357px auto;
  background-repeat: no-repeat;
  top:70px;
  left:75px;
}

/* 手机图片 */
.module-2 .phone-area .screen-image{
  background-image:url('./img/screen-1.png');
}
.module-3 .phone-area .screen-image{
  background-image:url('./img/screen-2.png');
}
.module-4 .phone-area .screen-image{
  background-image:url('./img/screen-3.png');
}


/* footer */
.page-footer{
  width:100%;
  padding:10px 0 10px 0;
  color:#A2ABB3;
  font-size:14px;
}
.uz-wrapper-footer{
  font-size: 12px;
  background: #F4F6F9;
  padding: 10px 0;
  position: fixed;
  bottom: 10px;
  left: 0;
  right: 0;
  text-align: center;
  color: #A2ABB3;
}
.beian-gongan{
  display:flex;
  align-items: center;
  justify-content: center;;
}
.uz-footer-section{
  display:flex;
  flex-direction:row;
  justify-content: center;;
}