dootask/public/site/css/home.css

/* 头部样式 */
.head{
  text-align: center;
  background: var(--bg-1-url) top left no-repeat;
  background-size: cover;
}
section{
  background: var(--bg-2-url) bottom left no-repeat;
}
/* 底部样式 */
.footer-layut{
  border-top: var(--border-color) solid 1px;
}
.collaboration{
  width: 100%;
  max-width: 1280px;
  max-height: 243px;
  margin: 0 auto;
  position: relative;
  margin-bottom: 120px;
}
.collaboration-content{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 5;
}
/* .collaboration-content-zh{
  top: 27.7%;
  left: 36.7%;
}
.collaboration-content-en{
  top: 27.7%;
  left: 28.6%;
} */
.collaboration-txt{
  color: #fff;
  text-align: center;
}
/* 合作公司 */
.companies{
  height: 100%;
  background: var(--bg-fa-color);
}
.companies-con{
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 88px 0;
}
.companies-h1{
  text-align: center;
  color: var(--text-color);
}
.companies-ul{
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-top: 56px;
}
.companies-ul .companies-ul-item{
  height: 64px;
}
.companies-ul .companies-ul-item img{
  height: 100%;
  display: inline-block;
}
.ten_img{
  opacity: 0; 
  animation-name: fadeSlideIn2; 
  animation-duration: 2s; 
  animation-delay: 0.6s; 
  transition-timing-function: ease;
  animation-fill-mode: forwards; 
}
/* 定义动画 */
@keyframes fadeSlideIn2 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* 功能卡片 */
.card{
  height: auto;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}
.card-pic{
  max-width: 717px;
}
.card-con{
  padding-top: 120px;
}
.card-con-768{
  padding-top: 56px;
  display: none;
}
.card-con-layout{
  display: flex;
  align-items: flex-start;
  margin-top: 56px;
}
.card-h1{
  text-align: center;
  color: var(--text-color);
}
.card-ul{
  width: 483px;
  margin-right: 48px;
  padding-right: 32px;
}
.card-768-ul .icon{
  flex: 1;
  display: inline-block;
  padding: 10px;
  background-color: var(--bg-292c2f-color);
  box-shadow: 0px 4px 9px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  margin-bottom: 16px;
}
.card-ul .card-ul-item{
  display: flex;
  align-items: center;
  padding: 24px 16px;
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  max-height: 50px;
  transition: max-height 1s ease;
}
@keyframes fadeSlideIn3 {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.card-ul .card-ul-item:hover{
  background-color: var(--bg-hover-color);
}
.card-ul .card-ul-item .icon{
  flex: 1;
  display: inline-block;
  padding: 10px;
  background-color: var(--bg-292c2f-color);
  box-shadow: 0px 4px 9px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  margin-right: 24px;
}
.card-ul .card-ul-item .arrows{
  display: inline-block;
  height: 18px;
  width: 18px;
}
.card-ul-item-h3{
  color: var(--text-color);
}
.card-ul-item-unfolded{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 14;
}
.card-ul-item-expand{
  display: none;
}
.card-ul-item-expand-tit{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.card-ul-item-txt{
  display: inline-block;
  color: var(--txt-gray-color);
  opacity: 0;
  animation: fadeSlideIn3 0.5s cubic-bezier(0.61, -0.01, 0.57, 0.96) forwards var(--delay);
}
@keyframes fadeSlideIn3 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.card-ul-item.active{
  align-items: flex-start !important;
  max-height: 138px;
}
.card-ul-item.active .arrows{
  transform: rotate(180deg);
}
.card-ul-item.active .card-ul-item-unfolded{
  display: none;
}
.card-ul-item.active .card-ul-item-expand{
  display: inline-block;
}

/* 为什么选择我们 */
.choose{
  position: relative;
  height: auto;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  z-index: 10;
}
.choose-con{
  padding: 240px 0 120px 0;
}
.choose-con-768{
  display: none;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding-bottom: 88px;
}
.choose-con-768-box{
  position: relative;
  width: calc(100vw);
  overflow-x: hidden;
}
.zh_choose_768,.en_choose_768{
  /* min-height: 257px; */
}
.choose-con-768-ul{
  z-index: 99;
  display: flex;
  position: absolute;
  left: 0;
  top: 10px;
  transition: all cubic-bezier(0, -0.26, 0.13, 1.04) .8s;
}
.choose-con-768-ul::-webkit-scrollbar {
  display: none;
}
.choose-con-768-item{
  padding: 30px 24px;
  width: calc(100vw - 88px);
  min-height: 177px;
  height: 100%;
  background: var(--choose-bg-hover-color);
  box-shadow: 0px 2px 8px 4px rgba(0, 0, 0, 0.05);
  border-radius: 12px;
  margin: 0 20px;
}
#card-indicators {
  position: absolute;
  bottom: 54px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99;
}
.card-indicators-item {
  list-style: none;
  margin: 0 5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--border-color);
  cursor: pointer;
  transition: background-color 0.3s ease-in-out;
}
.card-indicators-item.active {
  background-color: var(--txt-theme-color);
}
.arcs2{
  display: inline-block;
  position: absolute;
  width: 100%;
  left: 0;
  bottom: -28px;
}
.choose-con-ul{
  display: flex;
  justify-content: space-between;
}
.choose-con-item{
  width: calc(18vw + 12px);
  padding: 24px;
  
}
.choose-con-ul .hover{
  cursor: pointer;
  transition: all .3s ease-in-out;
}
.choose-con-ul .hover:hover{
  background-color: var(--choose-bg-hover-color);
  box-shadow: 0px 2px 8px 4px rgba(0, 0, 0, 0.05);
  border-radius: 12px;
  transform: translateY(-16px);
}
.choose-con-tit{
  color: var(--text-color);
  padding-top: 80px;
  position: relative;
  width: fit-content;
}
.home_pic7_768{
  display: none;
}