html,
      body {
          width: 100%;
          height: 100%;
          min-width: 1200px;
          font-family: "Microsoft YaHei", "微软雅黑", Helvetica, Arial, sans-serif;
          background-color: #fff;
      }

      html,
      body,
      a,
      p,
      div,
      ul,
      li,
      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
      }

      a {
          text-decoration: none;
      }

      img {
          border: none;
          outline: none;
      }

      .clearfix {
          display: block;
          clear: both;
      }

      ul,
      ol {
          list-style: none;
      }

      /* 页面样式 */
      #wrap {
          width: 100%;
          height: 100%;
          background: #f6f6f6;
          overflow: hidden;
      }

      /* 滚动条 */
      .s-scroll::-webkit-scrollbar {
          width: 6px;
          height: 6px;
      }

      .s-scroll::-webkit-scrollbar-button:vertical {
          display: none;
      }

      .s-scroll::-webkit-scrollbar-button:vertical:start:increment,
      .s-scroll::-webkit-scrollbar-button:vertical:end:decrement {
          display: none;
      }

      .s-scroll::-webkit-scrollbar-track:vertical {
          background-color: transparent;
      }

      .s-scroll::-webkit-scrollbar-track-piece {
          background-color: transparent;
      }

      .s-scroll::-webkit-scrollbar-thumb:vertical {
          background-color: #aaa;
          border: 2px solid #fff;
          border-width: 2px 2px 2px 0;
      }

      .main {
          width: 100%;
          height: 100%;
          overflow-y: auto;
          overflow-x: hidden;
      }
      .banner {
          width: 100%;
          height: 100%;
          background: url("https://p1.ssl.qhimg.com/t01f67338484653af21.jpg") center top no-repeat;
          background-color: #000;
          background-size: cover;
          display: flex;
          flex-direction: column;
      }

      .page_logo{
          position: fixed;
          left: 52px;
          top: 24px;
          z-index: 19;
          width: 195px;
          height: 36px;
          background: url('https://p5.ssl.qhimg.com/t017dfc52d1815674e8.png') 0 0 / auto  100% no-repeat;
      }

      .core-zone {
          padding: 80px 0 16px;
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
      }

      .header::after {
          content: "";
          width: 100%;
          height: 1px;
          position: absolute;
          left: 0;
          bottom: 0;
          background: linear-gradient(270deg, rgba(219, 86, 255, 0.2) 2%, #8c56ff 20.5%, #0a5feb 84.5%, rgba(0, 82, 217, 0.2) 100%)
      }

      .logo img {
          width: 100%;
          display: block
      }

      .header-link li {
          float: left;
          position: relative
      }

      .li-popup a,
      .core-zone h1 {
          overflow: hidden;
          display: block
      }

      .li-popup a {
          width: 100%;
          color: rgba(0, 0, 0, 0.9);
          font-size: 14px;
          line-height: 22px;
          padding: 3px
      }

      .core-zone h1 {
          color: #fff;
          text-align: center;
          font-size: 72px;
          font-weight: 700;
          line-height: 92px
      }

      .core-zone h3 {
          color: #fff;
          text-align: center;
          font-size: 28px;
          line-height: 36px;
          margin-top: 12px;
          font-weight: 300;
          opacity: .9;
          letter-spacing: 1.12px
      }

      .header-link li>a,
      .header-link li>p {
          color: #fff;
          opacity: .8;
          text-align: center;
          font-size: 14px;
          padding: 0 16px;
          line-height: 36px
      }

      .core-zone h1 span,
      .core-zone h1 img {
          display: inline-block;
          vertical-align: bottom
      }

      .core-zone h1 span {
          font-size: 80px
      }

      .core-zone h1 img {
          height: 92px
      }

      .header-link li>p i {
          display: inline-block;
          width: 12px;
          height: 8px;
          background-image: url("https://p0.ssl.qhimg.com/t01bea429c0df9ca2c9.png");
          background-position: center center;
          background-repeat: no-repeat;
          background-size: cover;
          filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://p0.ssl.qhimg.com/t01bea429c0df9ca2c9.png', sizingMethod='scale');
          margin-left: 4px
      }

      .down-link:hover {
          background: linear-gradient(91deg, #00e492 2.35%, #02ce5c 99.58%)
      }

      .down-link:active {
          background: linear-gradient(91deg, #00c47d 2.35%, #00a94a 99.58%)
      }

      .li-popup a:hover {
          color: #000;
          background-color: rgba(0, 0, 0, 0.06)
      }

      .is-mac label input:hover {
          background-position-x: -100%
      }

      .is-mac label input:active {
          background-position-x: -200%
      }

      .header-link li a:hover {
          opacity: 1
      }

      .header-link li:hover i {
          transform: rotate(180deg)
      }

      .header-link li:hover .li-popup {
          display: block
      }

      blockquote {
          width: 100%;
          height: 1px;
          background: rgba(0, 0, 0, 0.1);
          margin: 20px 0
      }

      .banner-btns {
          text-align: center;
          margin-top: 50px;
          display: table;
          margin: 50px auto 0
      }

      .logo_hover {
          display: none
      }

      .banner-swiper {
          width: 1200px;
          height: 400px;
          margin: 0 auto;
          background: url(https://se3.360simg.com/t0116701f871e59ea8f.png) center bottom no-repeat;
          background-size: cover;
          overflow: hidden;
          padding-left: 32px;
          padding-right: 1px;
          flex-shrink: 0;
      }

      .swiper-box {
          height: 240px;
          width: 100%;
          position: relative
      }


      .marquee-con:hover #marquee {
          animation-play-state: paused;
      }

      #marquee{
          display: flex;
          justify-content: flex-start;
          align-items: center;
          width: fit-content;
          height: 240px;
          will-change: transform;
          animation: loop 60s linear 0s infinite; 
      }
      @keyframes loop {
          0% {
              transform: translate(0)
          }

          to {
              transform: translate(-50%)
          }
      }

      .marquee-con {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          width: fit-content;
          height: 240px;
          will-change: transform;
      }

      .marquee-box {
          width: 100%;
          height: 100%;
          overflow: hidden
      }

      .fun-display,
      .fun-display-box {
          overscroll-behavior: none;
          width: 100%
      }

      .fun-display {
          position: relative;
          overflow: hidden
      }

      .fun-display-box {
          height: 100vh;
          min-height: 640px;
          display: flex;
          flex-wrap: nowrap;
          padding-top: 104px
      }

      .fun-display-background,
      .tabs-box {
          width: 100vw;
          position: absolute;
          left: 0
      }

      .fun-display-background {
          height: 100vh;
          pointer-events: none;
          background: url("https://p1.ssl.qhimg.com/t0197ef29e7e98a9350.png") no-repeat center center;
          background-size: cover;
          z-index: 0;
          top: 0
      }

      .tabs-box {
          z-index: 9;
          top: 48px
      }

      .tabs {
          display: flex;
          padding: 8px 6px;
          align-items: flex-start;
          border-radius: 60px;
          border: 1px solid rgba(0, 0, 0, 0.1);
          background: rgba(255, 255, 255, 0.5);
          width: 647px;
          height: 56px;
          margin: 0 auto
      }

      .fun-display-item,
      .item-box {
          justify-content: center;
          align-items: center
      }

      .fun-display-item {
          width: 100%;
          display: flex;
          flex-direction: column;
          position: relative;
          z-index: 2
      }

      .item-box {
          margin-top: 40px;
          display: flex
      }

      .banner-btns span {
          display: inline-block;
          position: relative;
          float: left;
          margin: 0 16px
      }

      .ai-browser a {
          border: 1px solid #8da4ff;
          background: rgba(0, 0, 0, 0.35);
          color: #8da4ff
      }

      .se-browser a {
          background: linear-gradient(to right, #fff, #fff, #fff, #74fff5, #5bffa6, #5bffa6, #69e6dc, #53e695);
          background-size: 600% 100%;
          box-shadow: 0 4px 20px 0 rgba(255, 255, 255, 0.4);
          color: #000;
          font-weight: 700;
          position: relative;
          transition: background .5s
      }

      .se-browser>img {
          width: 72px;
          height: 72px;
          position: absolute;
          right: -88px;
          top: -14px
      }

      .se-browser p {
          color: #fff;
          text-align: center;
          font-size: 14px;
          margin-top: 16px;
          opacity: .5
      }

      .se-browser em {
          width: 60px;
          height: 32px;
          position: absolute;
          right: -12px;
          top: -12px;
          background: url(https://se2.360simg.com/t01ce56317261ee8132.png);
          background-size: cover;
          font-size: 0;
          font-style: normal
      }

      .banner-swiper h4 {
          color: #fff;
          text-align: center;
          font-size: 18px;
          font-weight: 400;
          display: table;
          margin: 90px auto 24px;
          position: relative;
          padding: 0 8px
      }

      .swiper-box::before,
      .swiper-box::after {
          content: "";
          position: absolute;
          top: 0;
          z-index: 2;
          width: 60px;
          height: 100%
      }

      .swiper-box::after {
          right: 0;
          background: linear-gradient(90deg, rgba(61, 47, 158, 0) 0, #3d2f9e 100%)
      }

      .swiper-box::before {
          left: 0;
          background: linear-gradient(-90deg, rgba(50, 59, 143, 0) 0, #323b8f 100%)
      }

      .marquee-box ul {
          white-space: nowrap
      }

      .tabs>a {
          display: flex;
          height: 40px;
          padding: 10px 16px;
          justify-content: center;
          align-items: center;
          color: rgba(0, 0, 0, 0.6);
          text-align: center;
          font-size: 16px;
          cursor: pointer;
          margin: 0 2px
      }

      .fun-display-item h3 {
          color: #000;
          font-size: 54px;
          font-weight: 700;
          line-height: 71px;
          text-align: center
      }

      .banner-btns span a {
          width: 330px;
          height: 80px;
          border-radius: 100px;
          line-height: 80px;
          display: inline-block;
          font-size: 28px;
          cursor: pointer
      }

      .se-browser a img {
          width: 32px;
          height: 36px;
          margin-right: 4px;
          vertical-align: middle;
          margin-top: -6px;
      }

      .banner-swiper h4::before,
      .banner-swiper h4::after {
          content: "";
          width: 24px;
          height: 1px;
          position: absolute;
          top: 50%;
          margin-top: -1px
      }

      .banner-swiper h4::before {
          background: linear-gradient(-90deg, #fff 0, rgba(255, 255, 255, 0) 100%);
          left: -24px
      }

      .banner-swiper h4::after {
          background: linear-gradient(90deg, #fff 0, rgba(255, 255, 255, 0) 100%);
          right: -24px
      }

      .marquee-box ul li {
          width: 220px;
          height: 240px;
          margin-left: 20px;
          float: left
      }

      .login-housekeeper h3 span,
      .reader h3 span,
      .ocr h3 span,
      .ai-writing h3 span {
          background: linear-gradient(259deg, #48acff 7.99%, #365cf5 38.65%, #e16bff 84.64%);
          background-clip: text;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent
      }

      .marquee-box ul li img {
          width: 100%;
          height: 100%
      }

      .login-housekeeper .item-box-left {
          width: 463px;
          margin-right: 48px;
          display: flex;
          justify-content: flex-start;
          flex-direction: column
      }

      .login-housekeeper .item-box-right {
          width: 560px
      }

      .ai-browser a:hover {
          border: 1px solid #fff;
          background: rgba(0, 0, 0, 0.45);
          color: #fff
      }

      .ai-browser a:active {
          border: 1px solid #718dff;
          color: #718dff;
          background: rgba(0, 0, 0, 0.45)
      }

      .se-browser a:hover {
          background-position-x: 50%
      }

      .se-browser a:active {
          background-position-x: 100%
      }

      .tabs>a.active {
          color: #0052d9;
          transition: color .2s ease-in-out
      }

      .login-housekeeper .item-box-left span {
          width: 100%;
          display: block;
          padding: 8px 0;
          overflow: hidden;
          position: relative;
          padding-left: 40px
      }

      .login-housekeeper .item-box-right img,
      .reader .item-box-left img {
          width: 100%;
          display: none
      }

      .login-housekeeper .item-box-left span i {
          width: 32px;
          height: 32px;
          display: inline-block;
          margin-right: 8px;
          margin-top: 5px;
          background-size: auto 100%;
          background-position-x: 100%;
          position: absolute;
          top: 8px;
          left: 0
      }

      .login-housekeeper .item-box-left span dl {
          float: left
      }

      .login-housekeeper .item-box-left span dt {
          color: rgba(0, 0, 0, 0.4);
          font-size: 28px;
          font-weight: 700;
          line-height: 38px;
          margin-bottom: 4px
      }

      .login-housekeeper .item-box-left span dd {
          color: rgba(0, 0, 0, 0.4);
          font-size: 20px;
          line-height: 26px
      }

      .se-browser a:hover .logo_normal {
          display: none
      }

      .se-browser a:hover .logo_hover {
          display: inline-block
      }
      .fst_btm_t{
          width: 100%;
          height: 72px;
          background: #212135;
          flex-shrink: 0;
          font-size: 12px;
          color:  rgba(0, 0, 0, 0.40);
          text-align: center;
          line-height: 72px;
          color: #999;
          font-size: 12px;
          font-style: normal;
          font-weight: 400;
          display: none;
      }