html,
body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  font-size: 20px;
}

.layui-layer {
  font-size: 14px;
}

.layui-layer-content {
  padding: 20px;
  line-height: 25px;
}

.main {
  background: url('/img/background.png') bottom;
  /* background-image: -ms-linear-gradient(top left, #F5991E 0%, #FD6E07 100%);
    background-image: -moz-linear-gradient(top left, #F5991E 0%, #FD6E07 100%);
    background-image: -o-linear-gradient(top left, #F5991E 0%, #FD6E07 100%);
    background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #F5991E), color-stop(100, #FD6E07));
    background-image: -webkit-linear-gradient(top left, #F5991E 0%, #FD6E07 100%);
    background-image: linear-gradient(to bottom right, #F5991E 0%, #FD6E07 100%); */
  width: 100%;
  height: 100%;
  position: relative;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding-top: 0.8rem;
}

.wrapper {
  padding: 4.5rem 18rem 0 18rem;
  z-index: 2;
}

.wrapper.higher {
  padding-top: 3rem;
}

.logo {
  position: absolute;
  top: 1rem;
  left: 1rem;
  width: 12rem;
}

.tips {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 3rem;
  cursor: pointer;
  z-index: 999;
  opacity: 0.8;
  -moz-opacity: 0.8;
  -webkit-opacity: 0.8;
}

.tips:hover {
  opacity: 1;
  -moz-opacity: 1;
  -webkit-opacity: 1;
  filter: drop-shadow(0px 0px 20px yellow);
}

.cont {
  margin: 0 auto;
  /* padding: 1.8rem 2.8rem 2rem 2.8rem; */
  padding: 1.8rem 6rem 2rem 6rem;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.86);
  -webkit-box-shadow: #999 0 0 10px;
  box-shadow: #999 0 0 10px;
  position: relative;
  z-index: 99;
}

.cont1,
.cont2 {
  border-radius: 0 0 20px 20px;
}

.cont1 {
  margin: 0 auto;
  width: 77%;
  height: 50px;
  background: rgba(255, 255, 255, 0.2);
  box-shadow: #999 0 0 14px;
}

.cont2 {
  margin: -50px auto 0 auto;
  width: 90%;
  height: 25px;
  background: rgba(255, 255, 255, 0.3);
  box-shadow: #999 0 0 10px;
}

.flower {
  position: absolute;
  z-index: -1;
  filter: alpha(Opacity=100);
  -moz-opacity: 1;
  -webkit-opacity: 1;
  opacity: 1;
}

.flower:nth-of-type(1) {
  top: 22px;
  left: -260px;
  width: 290px;
}

.flower:nth-of-type(2) {
  top: -20px;
  right: -324px;
  width: 316px;
}

.flower:nth-of-type(3) {
  bottom: -160px;
  left: -350px;
  width: 502px;
}

.flower:nth-of-type(4) {
  bottom: -100px;
  right: 164px;
  width: 200px;
}

.flower:nth-of-type(5) {
  bottom: -20px;
  right: -300px;
  width: 274px;
}

.title {
  text-align: center;
  padding-bottom: 1.2rem;
}

.title img {
  width: 100%;
}

.title p {
  font-size: 3vw;
  color: #643276;
  margin-left: -1vw;
}

.img_links {
  text-align: left;
  margin: 0 auto;
  width: 1110px;
  overflow-y: auto;
  height: 510px;
}

.img_links.img_links_jcfz {
  width: 980px;
}

.img_links a {
  /* display: inline-block; */
  display: none;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  border: 1px solid rgba(231, 42, 41, 0);
}

.img_links a:hover {
  border: 1px solid rgba(231, 42, 41, 1);
}

.footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  color: #fff;
  z-index: 99;
}

.footer p {
  margin: 10px 0;
}

.sp_text {
  font-size: 22px;
}

.cp_right {
  font-size: 16px;
}

.cp_right span {
  margin-right: 24px;
}

.cp_right span:last-of-type {
  margin-right: 0;
}

.cp_right span a {
  color: #fff;
}

/*响应式匹配*/

/*笔记本常见1 1600*900屏幕 1600*758*/

@media only screen and (max-width: 1824px) {
  html {
    font-size: 14px;
  }

  .main {
    padding: 4rem 4rem 0 4rem;
  }

  .wrapper {
    padding: 3rem 14rem;
  }

  .wrapper.higher {
    padding-top: 0;
  }

  .cont {
    padding: 1.2rem 2.8rem 1.2rem 2.8rem;
  }

  .title {
    padding-bottom: 1rem;
  }

  /* .cont1,
    .cont2 {
        display: none;
    } */

  .flower:nth-of-type(1) {
    top: 22px;
    left: -220px;
    width: 242px;
  }

  .flower:nth-of-type(2) {
    top: -20px;
    right: -230px;
    width: 262px;
  }

  .flower:nth-of-type(3) {
    bottom: -100px;
    left: -248px;
    width: 416px;
  }

  .flower:nth-of-type(4) {
    bottom: -100px;
    right: 100px;
    width: 180px;
  }

  .flower:nth-of-type(5) {
    bottom: -20px;
    right: -240px;
    width: 228px;
  }

  .img_links {
    width: 880px;
    height: 440px;
  }

  .img_links.img_links_jcfz {
    width: 820px;
  }

  /* 注意: zoom属性在firefox浏览器下不兼容, 对于图片改变高度实现等比例缩放 */
  .img_links img {
    height: 140px;
  }

  .footer {
    margin-top: 1rem;
  }

  .sp_text {
    font-size: 16px;
  }

  .cp_right {
    font-size: 14px;
  }

  .footer img {
    height: 30px;
  }
}

/* 1280*800 / 1440*900 */
@media only screen and (max-width: 1824px) and (min-height: 780px) {
  .main {
    padding-top: 6rem;
  }
}

/*笔记本常见2 1366*768屏幕 1366*626 */

@media only screen and (max-width: 1439px) {
  .main {
    padding-top: 4rem;
  }

  .flower:nth-of-type(1) {
    top: 22px;
    left: -182px;
    width: 204px;
  }

  .flower:nth-of-type(2) {
    top: -20px;
    right: -230px;
    width: 222px;
  }

  .flower:nth-of-type(3) {
    bottom: -100px;
    left: -248px;
    width: 350px;
  }

  .flower:nth-of-type(4) {
    bottom: -80px;
    right: 90px;
    width: 150px;
  }

  .flower:nth-of-type(5) {
    bottom: -20px;
    right: -220px;
    width: 194px;
  }

  .title p {
    margin-left: 0;
  }

  .img_links {
    width: 720px;
    height: 360px;
  }

  .img_links.img_links_jcfz {
    width: 600px;
  }

  .img_links img {
    height: 120px;
  }
}

/* 1280*1024 / 1280*960 */
@media only screen and (max-width: 1281px) {
  html {
    font-size: 14px;
  }

  .main {
    padding: 8rem 4rem 0 4rem;
  }

  .wrapper {
    padding: 3rem 4rem;
  }

  .wrapper.higher {
    padding-top: 0;
  }

  .cont {
    padding: 1.2rem 2.8rem 1.2rem 2.8rem;
  }

  .title {
    padding-bottom: 1rem;
  }

  /* .cont1,
    .cont2 {
        display: none;
    } */

  .flower:nth-of-type(1) {
    top: 22px;
    left: -110px;
    width: 242px;
  }

  .flower:nth-of-type(2) {
    top: -60px;
    right: -100px;
    width: 262px;
  }

  .flower:nth-of-type(3) {
    bottom: -122px;
    left: -110px;
    width: 416px;
  }

  .flower:nth-of-type(4) {
    bottom: -128px;
    right: 280px;
    width: 242px;
  }

  .flower:nth-of-type(5) {
    bottom: -20px;
    right: -100px;
    width: 228px;
  }

  .img_links {
    width: 860px;
    height: 430px;
  }

  .img_links.img_links_jcfz {
    width: 820px;
  }

  /* 注意: zoom属性在firefox浏览器下不兼容, 对于图片改变高度实现等比例缩放 */
  .img_links img {
    height: 150px;
  }

  .footer {
    margin-top: 1rem;
  }

  .sp_text {
    font-size: 16px;
  }

  .cp_right {
    font-size: 14px;
  }

  .footer img {
    height: 30px;
  }
}

@media only screen and (max-width: 1439px) and (min-height: 700px) {
  .img_links img {
    height: 140px;
  }
}

/* 1280*800 / 1280*760 */
@media only screen and (min-width: 1150px) and (max-width: 1281px) and (max-height: 801px) {
  .main {
    padding: 4rem 2rem 2rem 2rem;
  }

  .wrapper {
    padding: 4rem 8rem;
  }

  .cont {
    padding: 1rem 8rem 1rem 8rem;
  }

  .cont1,
  .cont2 {
    display: none;
  }

  .img_links {
    width: 740px;
    height: 370px;
  }

  .img_links img {
    height: 120px;
  }

  .flower:nth-of-type(1) {
    top: -10px;
    left: -140px;
    width: 242px;
  }

  .flower:nth-of-type(2) {
    top: -40px;
    right: -80px;
    width: 262px;
  }

  .flower:nth-of-type(3) {
    bottom: -110px;
    left: -130px;
    width: 200px;
  }

  .flower:nth-of-type(4) {
    bottom: -110px;
    right: 140px;
    width: 160px;
  }

  .flower:nth-of-type(5) {
    bottom: 50px;
    right: -120px;
    width: 228px;
  }

  .sp_text {
    font-size: 14px;
  }

  .cp_right {
    font-size: 12px;
  }

  .footer img {
    height: 26px;
  }
}

/* 1280*800 / 1280*760 */
@media only screen and (min-width: 1150px) and (max-width: 1281px) and (max-height: 721px) {
  .wrapper {
    padding: 4rem 10rem;
  }

  .cont {
    padding: 1rem 8rem 1rem 8rem;
  }

  .img_links img {
    height: 120px;
  }

  .flower:nth-of-type(1) {
    top: -10px;
    left: -140px;
    width: 242px;
  }

  .flower:nth-of-type(2) {
    top: -40px;
    right: -80px;
    width: 262px;
  }

  .flower:nth-of-type(3) {
    bottom: -70px;
    left: -130px;
    width: 300px;
  }

  .flower:nth-of-type(4) {
    bottom: -70px;
    right: 140px;
    width: 242px;
  }

  .sp_text {
    font-size: 0;
  }
}

/*旧电脑常见 1024*768屏幕 1024*626*/

@media only screen and (max-width: 1199px) {
  .main {
    padding: 5rem 2rem 0 2rem;
  }

  .wrapper {
    padding: 3rem 4rem;
  }

  .flower:nth-of-type(1) {
    top: 36px;
    left: -57px;
    width: 154px;
  }

  .flower:nth-of-type(2) {
    top: 26px;
    right: 26px;
    width: 168px;
  }

  .flower:nth-of-type(3) {
    bottom: -46px;
    left: -46px;
    width: 265px;
  }

  .flower:nth-of-type(4) {
    bottom: 32px;
    right: 118px;
    width: 156px;
  }

  .flower:nth-of-type(5) {
    bottom: -112px;
    right: -32px;
    width: 144px;
  }

  .img_links {
    text-align: center;
    width: auto;
    height: 310px;
  }

  .img_links img {
    height: 100px;
  }

  .footer img {
    height: 22px;
  }
}

/* iPad Pro 1024*1366 */

@media only screen and (max-width: 1199px) and (min-height: 1300px) {
  .img_links.img_links_jcfz {
    width: 630px;
  }

  .img_links img {
    height: 168px;
  }

  .footer img {
    height: 30px;
  }
}

@media only screen and (max-width: 1199px) and (min-height: 700px) {
  .img_links img {
    height: 158px;
  }
}

/* iPad Pro/iPad 768*1024 */

@media only screen and (max-width: 1023px) {
  .main {
    padding: 6rem 4rem 0 4rem;
  }

  .wrapper {
    padding: 1rem 1rem;
  }

  .img_links.img_links_jcfz {
    width: 550px;
  }

  .img_links img {
    height: 135px;
  }

  .footer img {
    height: 22px;
  }

  .cp_right {
    font-size: 13px;
  }
}

@media only screen and (max-width: 1023px) and (min-height: 1000px) {
  .img_links img {
    height: 116px;
  }

  .footer img {
    height: 26px;
  }
}

@media only screen and (max-width: 1023px) and (min-height: 1200px) {
  .img_links img {
    height: 180px;
  }

  .img_links.img_links_jcfz img {
    height: 144px;
  }
}

/* iPhone 6/7/8 Plus iPhone5/SE*/

@media only screen and (max-width: 767px) {
  .main {
    padding: 4rem 1.5rem 0 1.5rem;
  }

  .wrapper {
    padding: 1rem 0rem;
  }

  .logo {
    width: 8rem;
    top: 1rem;
  }

  .cont1 {
    margin: 0 auto;
    width: 77%;
    height: 25px;
    display: none;
  }

  .cont2 {
    margin: -38px auto 0 auto;
    width: 90%;
    height: 25px;
    display: none;
  }

  .flower {
    display: none;
  }

  .img_links.img_links_jcfz {
    width: 254px;
  }

  .img_links img {
    height: 66px;
  }

  .footer img {
    height: 20px;
  }
}

/* Galaxy S5 */

@media only screen and (max-width: 413px) {
  .cont {
    padding: 0.5rem 1rem 1.2rem 1rem;
  }

  .title {
    padding-bottom: 0.5rem;
  }

  .img_links img {
    height: 58px;
  }
}

/* iPhone 6/7/8 */
@media only screen and (max-width: 413px) and (min-height: 660px) {
  .cont {
    padding: 1.2rem 2rem 1.2rem 2rem;
  }

  .img_links.img_links_jcfz {
    width: 280px;
  }

  .img_links img {
    height: 57px;
  }
}

/* Pixel2/Mi8 */
@media only screen and (max-width: 413px) and (min-height: 730px) {
  .cont {
    padding: 1.2rem 2rem 1.2rem 2rem;
  }

  .img_links img {
    height: 66px;
  }
}

/* iPhone X */
@media only screen and (max-width: 413px) and (min-height: 800px) {
  .img_links.img_links_jcfz {
    width: 304px;
    margin-left: -12px;
  }

  .cont {
    padding: 1.2rem 2rem 1.2rem 2rem;
  }

  .img_links img {
    height: 80px;
  }
}

/* Pixel 2 XL*/
@media only screen and (max-width: 415px) and (min-height: 813px) {
  .cont {
    padding: 1.2rem 2rem 1.2rem 2rem;
  }

  .cont1,
  .cont2 {
    display: block;
  }

  .img_links.img_links_jcfz {
    width: 320px;
  }

  .img_links img {
    height: 82px;
  }
}

/* Galaxy X5*/
@media only screen and (max-width: 359px) {
  .main {
    padding: 4rem 1.5rem 0 1.5rem;
  }

  .cont {
    padding: 0.5rem 1rem 1.2rem 1rem;
  }

  .title {
    padding-bottom: 0.5rem;
  }

  .img_links img {
    height: 50px;
  }

  .footer img {
    height: 18px;
  }

  .cp_right {
    font-size: 14px;
  }

  .cp_right span:first-of-type {
    margin-right: 0;
    display: block;
  }
}