<template>
  <div class="trad-cont">
    <div class="login-bg">
      <img src="@/assets/login/trad-banner.svg" class="mobile-img">
      <div class="bg-line" />
      <div ref="bgBottomRef" class="bg-bottom wow animate__fadeInUp" data-wow-duration="2s">
        <div v-for="item in bannerList" :key="item.order" class="bottom-card">
          <div class="first-line">{{ item.firstDesc }}</div>
          <div class="second-line">{{ item.secondDesc }}</div>
        </div>
      </div>
    </div>

    <div v-if="!isShowPCBottom" class="register-cont">
      <el-button type="text" class="register-btn" @click="$parent.loginClick('register')">立即注册</el-button>
    </div>

    <div class="sec-cont">
      <div ref="secLeft" class="sec-left wow animate__fadeInLeft" data-wow-duration="1s" />
      <div ref="secRight" class="sec-right wow animate__fadeInUp" data-wow-duration="1s">
        <div class="sec-right-t">
          <div class="sec-t-t">贸理通</div>
          <div class="sec-t-b">贸理通是卖方通过长银贸易管理平台向买方销售货物或提供服务，长安银科为客户提供应收账款融资、管理等服务。</div>
        </div>
        <div class="sec-right-b">
          <div class="sec-r-b-l">“让资产流动起来”</div>
          <el-button type="text" class="sec-r-b-r" @click="contactUsCkick">联系我们</el-button>
        </div>
      </div>
    </div>
    <div class="line-cont">
      <div class="line" />
      <div class="line-desc">贸理通的产品特点有哪些？</div>
    </div>
    <!-- 特征 -->
    <div class="feature-cont">
      <div
        ref="featurnLeft"
        class="feature-l wow animate__fadeInLeft"
        data-wow-duration="1s"
      />
      <div
        ref="featurnRight"
        class="feature-r wow animate__fadeInRight"
        data-wow-duration="1s"
      />
    </div>
    <div class="line-cont">
      <div class="line" />
      <div class="line-desc">客户使用贸理通需满足什么条件？</div>
    </div>

    <div ref="conditionRef" class="condition-cont wow animate__fadeInUp" data-wow-duration="1s">
      <div
        v-for="item in conditionList"
        :id="`conditionBoxRefs${item.order}`"
        :key="item.order"
        class="condi-box"
        :style="{
          backgroundImage: `url(${item.imgUrl})` ,
          width: isMidScreen ? '30%' : ''
        }"
      >
        <div class="condi-b">
          <img :src="item.iconUrl">
          <div class="condi-b-line" />
          <div class="condi-b-desc">{{ item.desc }}</div>
        </div>
        <div class="condi-over-cont">
          <img :src="item.hoverUrl">
        </div>
      </div>
    </div>

    <!-- <div class="line-cont line-cont-orange">
      <div class="line" />
      <div class="line-desc">我们的办公环境</div>
    </div>
    <div class="environment" /> -->

    <div class="line-cont line-cont-orange">
      <div class="line" />
      <div class="line-desc line-desc-orange">贸理通产品流程</div>
    </div>

    <div ref="productRef" class="process-bg wow animate__fadeInUp" data-wow-duration="1s">
      <img src="@/assets/login/process.png">
    </div>

    <div class="line-cont line-cont-orange">
      <div class="line" />
      <div class="line-desc line-desc-orange">我们的合作伙伴</div>
    </div>

    <div class="carousel">
      <div ref="scrollRefs" class="carousel-side">
        <div class="animate-cont">
          <img
            v-for="(item) in carouselList1"
            :key="item.order"
            :src="item"
          >
        </div>
      </div>
      <div ref="scrollRefs" class="carousel-side">
        <div class="animate-cont">
          <img
            v-for="(item) in carouselList2"
            :key="item.order"
            :src="item"
          >
        </div>
      </div>
      <div ref="scrollRefs" class="carousel-side">
        <div class="animate-cont">
          <img
            v-for="(item) in carouselList3"
            :key="item.order"
            :src="item"
          >
        </div>
      </div>
    </div>
    <div v-if="isShowPCBottom" ref="joinRefs" class="join">
      <div class="join-l">
        <div class="join-line" />
        <div class="l-title">长安银科欢迎您！</div>
        <p>总部地址</p>
        <div class="l-orange org-addr">地址：西安市经济技术开发区凤城二路51号白桦林金融创新中心D栋13层</div>
        <p>有疑问吗？</p>
        <div class="l-orange org-phone">致电我们：029-86689192</div>
        <p>与我们联系</p>
        <div class="l-orange org-email">邮箱地址：citp@changan-inkasso.com</div>
        <div class="qrocde" />
        <div class="qrcode-desc">关注长银</div>
      </div>
      <div class="join-mid" />
      <div class="join-r">
        <div class="join-line" />
        <p class="r-p-contact">联系我们</p>
        <p>我们将为您提供专业的应收账款服务方案，让您的资产流动起来！</p>
        <div class="r-input-cont">
          <div class="r-input">
            <div class="ipnut-title">单位名称</div>
            <el-input v-model="contactParam.contactName" type="text" class="input-cont" />
          </div>
          <div class="r-input">
            <div class="ipnut-title">您的电话</div>
            <el-input v-model="contactParam.phoneNumber" type="text" class="input-cont" />
          </div>
          <div class="r-input">
            <div class="ipnut-title">您的邮箱地址</div>
            <el-input v-model="contactParam.email" type="text" class="input-cont" />
          </div>
          <div class="r-input">
            <div class="ipnut-title">企业类型</div>
            <el-input v-model="contactParam.enterpriseType" type="text" class="input-cont" />
          </div>
        </div>
        <div class="text-raea-cont">
          <div class="ipnut-title">您的留言</div>
          <el-input v-model="contactParam.infoContent" type="textarea" />
        </div>

        <el-button type="text" class="join-btn" @click="handleContactUs">联系我们</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import 'animate.css'
import WOW from 'wow.js'
import { isMobileDevice } from '@/utils/index'
import { contactUs } from '@/api/user'

export default {
  data() {
    return {
      bannerList: [
        {
          order: 0,
          firstDesc: '65亿+',
          secondDesc: '累计人民币融资额'
        },
        {
          order: 1,
          firstDesc: '10亿+',
          secondDesc: '累计支持企业出口额'
        },
        {
          order: 2,
          firstDesc: '200万元+',
          secondDesc: '平均融资额'
        }
      ],
      conditionList: [
        {
          order: 0,
          desc: '卖方为中小微供货商或贸易商',
          imgUrl: require('@/assets/login/mask_1.png'),
          iconUrl: require('@/assets/login/condi_1.png'),
          hoverUrl: require('@/assets/login/hover_1.png')
        },
        {
          order: 1,
          desc: '买方符合准入标准',
          imgUrl: require('@/assets/login/mask_2.png'),
          iconUrl: require('@/assets/login/condi_2.png'),
          hoverUrl: require('@/assets/login/hover_2.png')
        },
        {
          order: 2,
          desc: '可通过科技平台全链条管理贸易及融资',
          imgUrl: require('@/assets/login/mask_3.png'),
          iconUrl: require('@/assets/login/condi_3.png'),
          hoverUrl: require('@/assets/login/hover_3.png')
        }
      ],
      carouselList1: [
        require('@/assets/login/scroll_1.png'),
        require('@/assets/login/scroll_2.png'),
        require('@/assets/login/scroll_3.png'),
        require('@/assets/login/scroll_4.png'),
        require('@/assets/login/scroll_5.png'),
        require('@/assets/login/scroll_6.png'),
        require('@/assets/login/scroll_7.png'),
        require('@/assets/login/scroll_8.png'),
        require('@/assets/login/scroll_9.png'),
        require('@/assets/login/scroll_10.png')
      ],
      carouselList2: [
        require('@/assets/login/scroll_21.png'),
        require('@/assets/login/scroll_20.png'),
        require('@/assets/login/scroll_19.png'),
        require('@/assets/login/scroll_18.png'),
        require('@/assets/login/scroll_17.png'),
        require('@/assets/login/scroll_16.png'),
        require('@/assets/login/scroll_15.png'),
        require('@/assets/login/scroll_14.png'),
        require('@/assets/login/scroll_13.png'),
        require('@/assets/login/scroll_12.png')
      ],
      carouselList3: [
        require('@/assets/login/scroll_11.png'),
        require('@/assets/login/scroll_22.png'),
        require('@/assets/login/scroll_23.png'),
        require('@/assets/login/scroll_24.png'),
        require('@/assets/login/scroll_25.png'),
        require('@/assets/login/scroll_26.png'),
        require('@/assets/login/scroll_27.png'),
        require('@/assets/login/scroll_28.png'),
        require('@/assets/login/scroll_29.png'),
        require('@/assets/login/scroll_30.png'),
        require('@/assets/login/scroll_31.png'),
        require('@/assets/login/scroll_32.png')
      ],
      contactParam: {
        contactName: '',
        phoneNumber: '',
        email: '',
        enterpriseType: '',
        infoContent: ''
      },
      isShowPCBottom: true
    }
  },
  computed: {
    isMidScreen() {
      return window.screen.width < 1470
    }
  },
  created() {
  },
  mounted() {
    new WOW().init()
    // 添加监听器，当滚动到目标位置时执行动画
    // window.addEventListener('scroll', this.handleScroll)

    this.initConditionMouseEvent()
    this.isMobile()
    window.addEventListener('resize', this.isMobile)
  },
  destroyed() {
    // window.removeEventListener('scroll', this.handleScroll)
    window.removeEventListener('resize', this.isMobile)
  },
  methods: {
    // handleScroll() {
    //   const bgBottomRef = this.$refs.bgBottomRef
    //   const secLeftRef = this.$refs.secLeft
    //   const secRightRef = this.$refs.secRight
    //   const featurnLeft = this.$refs.featurnLeft
    //   const featurnRight = this.$refs.featurnRight
    //   const conditionRef = this.$refs.conditionRef
    //   const productRef = this.$refs.productRef

    //   if (this.isElementInViewport(bgBottomRef)) {
    //     bgBottomRef.classList.add('wow', 'animate__fadeInUp')
    //   }

    //   if (this.isElementInViewport(secLeftRef)) {
    //     secLeftRef.classList.add('wow', 'animate__fadeInLeft')
    //   }

    //   if (this.isElementInViewport(secRightRef)) {
    //     secRightRef.classList.add('wow', 'animate__fadeInUp')
    //   }

    //   if (this.isElementInViewport(featurnLeft)) {
    //     featurnLeft.classList.add('wow', 'animate__fadeInLeft')
    //   }

    //   if (this.isElementInViewport(featurnRight)) {
    //     featurnRight.classList.add('wow', 'animate__fadeInRight')
    //   }

    //   if (this.isElementInViewport(conditionRef)) {
    //     conditionRef.classList.add('wow', 'animate__fadeInUp')
    //   }

    //   if (this.isElementInViewport(productRef)) {
    //     secRightRef.classList.add('wow', 'animate__fadeInUp')
    //   }
    // },
    // 判断元素是否在视窗内
    // isElementInViewport(el) {
    //   const rect = el.getBoundingClientRect()
    //   return (
    //     rect.top >= 0 &&
    //     rect.left >= 0 &&
    //     rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    //     rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    //   )
    // },
    initConditionMouseEvent() {
      const conditionBoxRefs0 = document.getElementById('conditionBoxRefs0')
      const conditionBoxRefs1 = document.getElementById('conditionBoxRefs1')
      const conditionBoxRefs2 = document.getElementById('conditionBoxRefs2')
      conditionBoxRefs0.addEventListener('mouseenter', this.conditionMounseEnter)
      conditionBoxRefs0.addEventListener('mouseleave', this.conditionMounseLeave)
      conditionBoxRefs1.addEventListener('mouseenter', this.conditionMounseEnter)
      conditionBoxRefs1.addEventListener('mouseleave', this.conditionMounseLeave)
      conditionBoxRefs2.addEventListener('mouseenter', this.conditionMounseEnter)
      conditionBoxRefs2.addEventListener('mouseleave', this.conditionMounseLeave)
    },
    // 条件模块鼠标hover
    conditionMounseEnter(e) {
      e.target.classList.add('condi-over')
    },
    // 条件模块鼠标离开
    conditionMounseLeave(e) {
      e.target.classList.remove('condi-over')
    },
    // 联系我们按钮点击
    contactUsCkick() {
      const joinRefs = this.$refs.joinRefs
      if (joinRefs) {
        joinRefs.scrollIntoView({ behavior: 'smooth' })
      } else {
        const scrollHeight = document.documentElement.scrollHeight
        window.scrollTo({
          top: scrollHeight,
          behavior: 'smooth'
        })
      }
    },
    // 是否是手机端
    isMobile() {
      if (isMobileDevice() && window.screen.width < 768) {
        this.isShowPCBottom = false
      } else {
        this.isShowPCBottom = true
      }
    },
    // 联系我们按钮点击
    handleContactUs() {
      if (this.contactParam.phoneNumber === '') {
        this.$message.warning('请输入联系电话')
        return
      } else {
        if (!/^\d$/g.test(this.contactParam.phoneNumber) && this.contactParam.phoneNumber.length !== 11) {
          this.$message.warning('请输入合法电话号码')
          return
        }
      }
      if (this.contactParam.email !== '') {
        if (this.contactParam.email.indexOf('@') === -1) {
          this.$message.warning('请输入合法邮箱')
          return
        }
      }
      contactUs(this.contactParam).then(() => {
        this.$message.success('留言成功')
        this.$router.go(0)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@keyframes partnermove {
  0% {
    transform: translate(0)
  }
  100%{
    transform: translate(-50%);
  }
}

@keyframes bordermove {
  0% {
    border-bottom: 0px solid #FE7D0B;
  }
  50% {
    border-bottom: 10px solid #FE7D0B;
  }
  100%{
    border-bottom: 3px solid #FE7D0B;
  }
}
.trad-cont {
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: #fff;
  // background-image: url("../../../assets/login/trade_bg.jpg");
  // background-position: 0 1500px;
  // background-repeat: no-repeat;
  .login-bg {
    width: 100%;
    height: 900px;
    background-color: #292929;
    background-image: url("../../../assets/login/bg.jpg");
    background-position: 0 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .img {
      width: 570px;
      height: 134px;
    }
    .bg-line {
      width: 92px;
      height: 1px;
      border: 2px solid #FE7D0B;
      margin: 30px 0 148px 0;
    }
    .bg-bottom {
      width: 65%;
      display: flex;
      justify-content: space-between;
      .bottom-card {
        display: flex;
        flex-direction: column;
        width: 374px;
        height: 170px;
        color: #fff;
        text-align: center;
        background-color: rgba(0, 0, 0, .4);
        // border-bottom: 3px solid #FE7D0B;
        animation: bordermove 1s ease forwards;
        margin: 0;
        .first-line {
          font-size: 40px;
          font-weight: 600;
          margin: 36px 0 32px 0;
        }
        .second-line {
          font-size: 20px;
        }
      }
    }
  }
  .sec-cont {
    display: flex;
    width: 65%;
    height: 856px;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    margin: 0 auto;
    .sec-left {
      width: 30%;
      height: 536px;
      margin: 0 25px 0 0;
      background: url('../../../assets/login/business-p.png') no-repeat center;
    }
    .sec-right {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      // width: 60%;
      flex: 1;
      height: 536px;
      .sec-right-t {
        display: flex;
        width: 100%;
        height: 384px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: #F5F6F6;
        padding: 0 98px;
        flex: 1;
        .sec-t-t {
          font-size: 40px;
          color: #FE7D0B;
          font-weight: 600;
          margin-bottom: 10px;
        }
        .sec-t-b {
          width: 100%;
          height: 42px;
          font-size: 14px;
          line-height: 21px;
          color: #333;
          text-indent: 24px;
          margin-top: 80px;
        }
      }
      .sec-right-b {
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 100%;
        height: 126px;
        background-color: #FE7D0B;
        .sec-r-b-l {
          font-size: 16px;
          color: #fff;
          margin-left: 80px;
          letter-spacing: 8px;
        }
        .sec-r-b-r {
          width: 128px;
          height: 40px;
          background-color: #fff;
          color: #333;
        }
      }
    }
  }
  .line-cont {
    width: 100%;
    text-align: center;
    background-color: #fff;
    .line {
      width: 18px;
      height: 2px;
      border: 2px solid #D9D9D9;
      margin: 0 auto 20px;
    }
    .line-desc {
      font-size: 16px;
      font-weight: 600;
      color: #2C4270;
    }
  }
  .line-cont-orange {
      padding: 90px 0 160px;
      .line-desc {
        color: #FE7D0B;
      }
    }
  .feature-cont {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 65%;
    height: 702px;
    margin: 0 auto;
    // margin: 140px 0;
    // padding: 140px 0;
    background-color: #fff;
    .feature-l {
      width: 30%;
      height: 228px;
      margin-right: 20px;
      background: url('../../../assets/login/feature_l.png') no-repeat center;
    }
    .feature-r {
      width: 60%;
      height: 422px;
      background: url('../../../assets/login/feature_r.png') no-repeat center;
      background-size: cover;
    }
  }
  .condition-cont {
    display: flex;
    justify-content: space-between;
    width: 65%;
    height: 606px;
    margin: 0 auto;
    padding: 90px 0 0;
    background-color: #fff;
    .condi-box {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding-bottom: 60px;
      width: 383px;
      height: 100%;
      background-size: cover;
      background-repeat: no-repeat;
      .condi-b {
        width: 100%;
        padding-left: 40px;
        img {
          width: 38px;
          height: 38px;
        }
        .condi-b-line {
          width: 18px;
          height: 2px;
          border: 2px solid #FE7D0B;
          margin: 8px 0 20px;
        }
        .condi-b-desc {
          font-size: 16px;
          color: #fff;
        }
      }
      .condi-over-cont {
        display: none;
      }
    }
    .condi-over {
      position: relative;
      .condi-over-cont {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        background-color: #FE7D0B;
        z-index: 9;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .condi-box:nth-child(2) {
        margin: 0 25px;
      }
    }
    .condi-box:nth-child(2) {
      margin: 0 25px;
    }
  }
  .environment {
    width: 100%;
    height: 480px;
    // padding: 240px 0;
    background: url('../../../assets/login/trade_bg.jpg') no-repeat center;
    background-size: cover;

  }
  .process-bg {
    width: 100%;
    height: 552px;
    background-color: #fff;
    text-align: center;
    img {
      width: 977px;
      height: 100%;
    }
  }
  .carousel {
    width: 100%;
    background-color: #fff;
    margin-bottom: 310px;
    .carousel-side {
      display: flex;
      width: 980px;
      height: 72px;
      margin: 22px auto;
      overflow: hidden;
      white-space: nowrap;
      .animate-cont {
        animation: partnermove 40s linear infinite;
      }
      img {
        width: 162px;
        height: 72px;
        margin-right: 86px;
      }
    }
  }

  .join {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 840px;
    background-image: url('../../../assets/login/join_us.png');
    .join-l {
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 20%;
      height: 100%;
      .l-title {
        font-size: 32px;
        font-weight: 600;
        color: #fff;
        margin: 22px 0 48px;
      }
      p {
        font-size: 16px;
        color: #fff;
        margin-bottom: 14px;
      }
      .l-orange {
        position: relative;
        font-size: 16px;
        color: #FE7D0B;
        margin-bottom: 30px;
      }
      .org-addr::before {
        position: absolute;
        left: -30px;
        display: inline-block;
        content: ' ';
        width: 20px;
        height: 20px;
        background-image: url('../../../assets/login/join_adress.png');
        background-repeat: no-repeat;
      }
      .org-phone::before {
        position: absolute;
        left: -30px;
        display: inline-block;
        content: ' ';
        width: 20px;
        height: 20px;
        background-image: url('../../../assets/login/join_phone.png');
        background-repeat: no-repeat;
      }
      .org-email::before {
        position: absolute;
        left: -30px;
        display: inline-block;
        content: ' ';
        width: 20px;
        height: 20px;
        background-image: url('../../../assets/login/join_mail.png');
        background-repeat: no-repeat;
      }
      .qrocde {
        width: 130px;
        height: 130px;
        margin-top: 76px;
        background: url('../../../assets/login/qrcode.png');
      }
      .qrcode-desc {
        width: 130px;
        font-size: 16px;
        color: #fff;
        margin-top: 12px;
        text-align: center;
      }
    }
    .join-mid {
      width: 4%;
    }
    .join-r {
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 44%;
      height: 100%;
      p {
        font-size: 14px;
        color: #999
      }
      p.r-p-contact {
        font-size: 16px;
        color: #fff;
        margin: 20px 0 28px;
      }
      .r-input-cont {
        display: flex;
        flex-wrap: wrap;
        .r-input {
          min-width: 44%;
          color: #fff;
          margin: 10px 30px 0 0;
          .ipnut-title {
            font-size: 16px;
            margin-bottom: 4px;
          }
          .input-cont {
            width: 100%;
            height: 50px;
            border: 1px solid #fff;
            ::v-deep .el-input__inner {
              height: 50px;
              line-height: 50px;
              background-color: transparent;
              border: none;
              color: #fff;
            }
          }
        }
      }
      .text-raea-cont {
        width: 100%;
        margin-top: 30px;
        .ipnut-title {
          color: #fff;
          margin: 10px 0 4px 0;
        }
        ::v-deep .el-textarea__inner {
          width: 92%;
          height: 250px;
          color: #fff;
          border: 1px solid #fff;
          background-color: transparent;
        }
      }
      .join-btn {
        width: 120px;
        height: 44px;
        color: #fff;
        background-color: #FE7D0B;
        margin-top: 46px;
      }
    }
    .join-line {
      width: 16px;
      height: 2px;
      border: 2px solid #FE7D0B;
    }
  }
}

@media screen and (max-width: 768px) {
  .trad-cont {
    // display: flex;
    // flex-direction: column;
    // width: 100%;
    // background-color: #fff;
    // background-image: url("../../../assets/login/trade_bg.jpg");
    // background-position: 0 1500px;
    // background-repeat: no-repeat;
    padding: 0 0px 170px;
    background-image: none;
    background-color: #fff;
    margin-top: 60px;
    .login-bg {
      width: 100%;
      height: 176px;
      // background-color: #292929;
      // background-image: url("../../../assets/login/bg.jpg");
      // background-position: 0 0;
      background-size: cover;
      // display: flex;
      // justify-content: center;
      // align-items: center;
      img {
        width: 195px;
        height: 46px;
      }
      .bg-line {
        display: none;
      }
      .bg-bottom {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 24px;
        .bottom-card {
          display: flex;
          flex-direction: column;
          width: 102px;
          height: 48px;
          color: #fff;
          text-align: center;
          background-color: rgba(0, 0, 0, .4);
          border-bottom: 3px solid #FE7D0B;
          margin: 0 20px;
          opacity: .7;
          .first-line {
            font-size: 14px;
            font-weight: 600;
            margin: 10px 0 0;
          }
          .second-line {
            font-size: 10px;
          }
        }
      }
    }

    .register-cont {
      width: 100%;
      text-align: center;
      margin-top: 20px;
      .register-btn {
        width: 262px;
        height: 40px;
        color: #fff;
        background-color: #FE7D0B;
        text-align: center;
        font-size: 14px;
        border-radius: 20px;
      }
    }

    .sec-cont {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: auto;
      justify-content: center;
      align-items: center;
      background-color: #fff;
      padding: 0 10px;
      .sec-left {
        width: 100%;
        height: 158px;
        margin: 20px 0 0 0;
        background: url('../../../assets/login/business-p.png') no-repeat center;
        background-size: cover;
      }
      .sec-right {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 100%;
        height: auto;
        .sec-right-t {
          display: flex;
          width: 100%;
          height: auto;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          background-color: #F5F6F6;
          padding: 10px 20px 12px;
          .sec-t-t {
            font-size: 14px;
            color: #FE7D0B;
            font-weight: 600;
            margin-bottom: 10px;
          }
          .sec-t-b {
            width: 100%;
            height: 42px;
            font-size: 12px;
            line-height: 18px;
            color: #333;
            text-indent: 24px;
            margin-top: 20px;
          }
        }
        .sec-right-b {
          display: flex;
          justify-content: space-around;
          align-items: center;
          width: 100%;
          height: auto;
          background-color: #FE7D0B;
          padding: 5px 0;
          .sec-r-b-l {
            font-size: 14px;
            color: #fff;
            margin-left: 0;
          }
          .sec-r-b-r {
            width: 90px;
            height: 30px;
            background-color: #fff;
            color: #333;
          }
        }
      }
    }
    .line-cont {
      width: 100%;
      text-align: center;
      background-color: #fff;
      padding: 40px 0;
      .line {
        width: 18px;
        height: 2px;
        border: 2px solid #D9D9D9;
        margin: 0 auto 20px;
      }
      .line-desc {
        font-size: 16px;
        font-weight: 600;
        color: #2C4270;
      }
    }
    .line-cont-orange {
        .line-desc {
          color: #FE7D0B;
        }
      }
    .feature-cont {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      width: 100%;
      height: auto;
      background-color: #fff;
      padding: 0 10px;
      .feature-l {
        width: 100%;
        height: 228px;
        margin-right: 0px;
        background: url('../../../assets/login/feature_l.png') no-repeat center;
      }
      .feature-r {
        width: 100%;
        height: 228px;
        background: url('../../../assets/login/feature_r.png') no-repeat center;
        // background-size: cover;
      }
    }
    .condition-cont {
      display: flex;
      justify-content: center;
      width: 100%;
      height: auto;
      // margin: 90px 0 160px;
      padding: 10px 10px 0;
      background-color: #fff;
      .condi-box {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding-bottom: 30px;
        // width: 30%;
        height: 152px;
        background-size: cover;
        background-repeat: no-repeat;
        .condi-b {
          width: 100%;
          padding-left: 0px;
          text-align: center;
          img {
            width: 20px;
            height: 20px;
          }
          .condi-b-line {
            width: 18px;
            height: 2px;
            border: 2px solid #FE7D0B;
            margin: 8px auto 8px;
          }
          .condi-b-desc {
            font-size: 12px;
            color: #fff;
          }
        }
        .condi-over-cont {
          display: none;
        }
      }
      .condi-over {
        position: relative;
        .condi-over-cont {
          display: block;
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          width: 100%;
          height: 100%;
          background-color: #FE7D0B;
          z-index: 9;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .condi-box:nth-child(2) {
          margin: 0 25px;
        }
      }
      .condi-box:nth-child(2) {
        margin: 0 25px;
        padding-bottom: 40px;
      }
    }
    .environment {
      width: 100%;
      padding: 0;
    }
    .process-bg {
      width: 100%;
      height: 190px;
      background-color: #fff;
      text-align: center;
      img {
        width: 335px;
        height: 100%;
      }
    }
    .carousel {
      width: 100%;
      background-color: #fff;
      margin-bottom: 0px;
      .carousel-side {
        display: flex;
        width: 980px;
        height: 72px;
        margin: 22px auto;
        overflow: hidden;
        white-space: nowrap;
        .animate-cont {
          animation: partnermove 40s linear infinite;
        }
        img {
          width: 162px;
          height: 72px;
          margin-right: 86px;
        }
      }
    }
  }
}

@media screen and (min-width: 1930px) {
  .trad-cont {
    .login-bg {
      height: 1200px !important;
      background-size: cover !important;
      img {
        transform: scale(1.5) !important;
        margin: 200px 0 70px !important;
      }
    }
  }
  .bg-bottom {
    width: 56% !important;
    margin-top: 180px !important;
  }
  .sec-cont {
    width: 56% !important;
  }
  .feature-cont {
    width: 56% !important;
  }
  .condition-cont {
    width: 56% !important;
  }
}
</style>
