/* 预设 */
.row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.row-between {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.col {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.col-between {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}


.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}

span {
  text-align: center;
  font-family: "Microsoft YaHei";
}

p {
  text-align: center;
}

/* 字体 */
.white {
  color: white;
}

.black {
  color: #303445;
}

.grey {
  color: #59607B;
}

.blue {
  color: #3091F2
}

.bold {
  font-weight: bold;
}

.font14 {
  font-size: 14px;
}

.font16 {
  font-size: 16px;
}

.font18 {
  font-size: 18px;
}

.font20 {
  font-size: 20px;
}

.font24 {
  font-size: 24px;
}

.font26 {
  font-size: 26px;
}

.font28 {
  font-size: 28px;
}

.font34 {
  font-size: 34px;
}

/* 全局 */
.mid-box {
  width: 360px;
  height: 214px;
  border-radius: 10px;
}

.small-box {
  width: 300px;
  height: 200px;
  border-radius: 10px;
}

.fat-box {
  width: 301px;
  height: 150px;
  border-radius: 10px;
}

.black-mask {
  position: absolute;
  z-index: 10;
}



.grey-line {
  height: 0px;
  border-bottom: 1px solid #E3E3E3;
}

.white-line {
  height: 0px;
  border-bottom: 1px solid #fff;
}

.grey-bg {
  background-color: #F9F9F9;
}

.white-bg {
  background-color: #fff;
}

.blue-bg {
  background-color: #3091F2
}

.green-bg {
  background-color: #52CD88;
}

.low-blue-bg {
  background-color: #26A6FF;
}

.high-black-bg {
  background-color: #767687;
}

.full-width {
  width: 100%;
}

.full-height {
  height: 100%;
}

.footer {
  width: 1920px;
  height: 490px;
  background-color: #141821;
}

body .nav-wrap {
  position: fixed;
  top: 0;
  z-index:4;
}

/* 0 banner */
.banner-bg {
  width: 1920px;
  height: 578px;
}

.banner {
  margin: 177px 1171px 0px 470px;
  align-items: start;
  align-self: start;
  justify-self: start;
}

.banner>img {
  left: 0px;
  top: 58px;
  position: absolute;
  width: 1920px;
  height: 520px;
  z-index: -1;
}

.banner>div {
  font-size: 58px;
  width: 310px;
  height: 56px;
  letter-spacing: 4px;
}

.btn-wrap {
  display: flex;
  justify-content: space-between;
}

.banner>div>div {
  font-size: 58px;
  position: relative;
  left: -4px;
  bottom: 80px;
}

.banner>span {
  margin: 28px 0px 43px;
  letter-spacing: 4px;
}

.banner a {
  border-radius: 20px;
  width: 146px;
  height: 40px;
  background-color: #5ba5f6;
}

.banner a:hover {
  background-color: #3D77FF;
}

/* 1 what's the baidu mini program? TODO: */
.what-bg {
  width: 1920px;
  height: 520px;
}

.what {
  margin: 0px 300px;
}

.what>h2 {
  margin: 69px 0px;
}

.what>div>div>span {
  max-width: 280px;
  margin-top: 21px;
}



/* 2 how to go online baidu mini program?*/
.how-bg {
  width: 1920px;
  height: 456px;
}

.how {
  margin: 0px 294px;
}

.how>h2 {
  margin: 89px;
}

.how>div>div>p {
  position: relative;
  top: -52px;
  z-index: 3;
  font-size: 30px;
  line-height: 28px;
}

.how>div>div>span {
  margin-bottom: 19px;
  width: 108px;
}

.how>div>div>img {
  width: 62px;
  height: 70px;
  margin-bottom: 4px;
  z-index: 2;
}

.how>div>div {
  width: 73px;
}

.how>.grey-line {
  position: relative;
  top: -152px;
  width: 1180px;
}

/* 3 three advantages of baidu mini program*/
.advantages-bg {
  width: 1920px;
  height: 1140px;
}

.advantages {
  margin: 80px 300px 29px;
}

.nav {
  margin: 115px 160px 65px;
  width: 1000px;
}

.arraw {
  width: 8px;
}

.nav>a {
  width: 135px;
  height: 34px;
}

.nav>a>img {
  height: 35px;
  width: auto;
}

.nav-norm {
  color: #E3E3E3;
}

.nav-choosed {
  color: #3091F2;
}

/* 三个页面 */
.advantages-pages {
  width: 1320px;
  height: 774px;
  border: 1px solid #E3E3E3;
}

.accurate {
  margin: 39px 50px 46px;
  display: flex;
}

.accurate>div>img {
  width: 360px;
  height: 640px;
  border: 0px solid #DEDEDE;
  margin-bottom: 32px;
}

.intelligence {
  margin: 48px 131px 62px 123px;
  display: none;
}

.intelligence>div {
  margin: 62px 0 47px;
}

.intelligence>img {
  width: 1067px;
  height: 385px;
}

.int-box {
  width: 301px;
  height: 150px;
  border-radius: 10px;
}

.exo {
  display: none;
}

.exo>div {
  width: 1070px;
  height: 306px;
}

.exo-mid {
  margin: 35px 0px 24px;
}

.exo-mid>.left {
  width: 198px;
}

.exo-mid>.right {
  width: 875px;
  height: 306px;
}

.exo-mid-title {
  padding-right: 200px;
  margin-top: 35px;
  margin-bottom: 27px;
}

.exo-mid>.right>div>div>.right {
  margin: 56px 96px 73px 0px;
  width: 80px;
  height: 90px;
}

.exo-mid>.right>div>div>.left {
  align-self: flex-start;
}

.exo-mid>.right>div>div>.mid {
  position: relative;
  top: -20px;

}

.exo-mid>.right>div>div .line {
  margin: 25px 0px 15px;
}

.exo-bottom>.left {
  width: 198px;
}

.exo-bottom>.right {
  width: 875px;
  height: 306px;
  flex-wrap: wrap;
}

.arrow {
  position: relative;
  height: 0px;
  width: 0px;
  border-top: 5px solid transparent;
  border-left: 9px solid rgba(150, 159, 175, 1);
  border-bottom: 5px solid transparent;
  right: -204px;
  top: -21px;
}

.exo-icon {
  width: 217px;
  height: 153px;
  justify-content: end;
  margin-bottom: 1px;
}

.exo-icon>span {
  margin-bottom: 23px;
}

/* 4 billion traffic support */
.traffic-bg {
  width: 1920px;
  height: 990px;
}

.traffic {
  margin: 0px 300px;
}

.traffic>h2 {
  margin: 77px 0 59px;
}

.traffic>img {
  width: 1120px;
  height: 346px;
  margin: 76px 0px 57px;
}

.traffic>p {
  width: 350px;
  height: 50px;
}

.traffic>div>div>div>span {
  margin: 63px auto 23px;
}

.traffic>div>div>div>p {
  max-width: 224px;
}

/* 5 our support for baidu mini program */
.support-bg {
  width: 1920px;
  height: 452px;
}

.support {
  margin: 0px 300px;
}

.support>h2 {
  margin: 79px 0 59px;
}

.support>div>div>div>span {
  margin: 61px auto 11px;
}

.support>div>div>div>p {
  margin: 10px auto;
  max-width: 208px;
}

.support>div>div>div>.white-line {
  width: 96px;
}

/* 6 package entry */
.package-bg {
  width: 1919px;
  padding-bottom: 80px;
}

.package {
  margin: 0px 571px;
}

.package>h2 {
  margin: 68px 0 57px;
}

.package>img {
  width: 778px;
  height: 469px;
  cursor: pointer;
}

/* 7 application case  */
.case-bg {
  width: 1920px;
  height: 640px;
}

.case {
  margin: 68px 450px 91px;
}

.case>p {
  margin: 23px 0 44px;
  color: #59607B;
}

.case>.list {
  margin-bottom: 35px;
  height: 288px;
  flex-wrap: wrap;
}

.case>a {
  width: 210px;
  height: 60px;
  border-radius: 6px;
}

.case>a:hover {
  background-color: #6cb0f4;
}

.QR-box {
  width: 324px;
  height: 144px;
  justify-content: start;
}

.QR-icon {
  width: 324px;
  justify-content: start;
}

.QR-icon>img {
  width: 88px;
  height: 88px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(227, 227, 227, 1);
  border-radius: 50%;
  margin: 29px 17px 29px 29px;
  opacity: 1;
}

.QR-mask {
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(227, 227, 227, 1);
  justify-content: space-between;
  opacity: 0;
  height: 142px;
  width: 322px;
  position: absolute;
}

.QR-mask>img {
  width: 110px;
  height: 110px;
  background: rgba(227, 227, 227, 1);
  margin: 17px 6px 17px 19px;
}

.QR-mask>span {
  width: 187px;
  text-align: left;
}

.exo-button {
  width: 140px;
  height: 52px;
  border-radius: 10px;
  margin-bottom: 10px;
}

.exo .line {
  width: 403px;
  height: 2px;
  background: rgba(150, 159, 175, 1);
}

/* hover样式 */
.QR-mask:hover {
  opacity: 1;
}