#culture {
  background: #fcf4e4;
}
.culture {
  position: relative;
  height: 100%;
  overflow: hidden;
}
.culture .section_title {
  top: 60rem;
}
.culture .bg {
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  opacity: 0.74;
  display: block;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(180deg, #fdf6ee 0%, #fdf6ee 100%);
}
.culture .bg_masking {
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  opacity: 0.28;
  transform: scaleY(-1);
  background-image: linear-gradient(180deg, rgba(238, 238, 238, 0) 0%, #ffc06b 100%);
}
.culture .main {
  position: absolute;
  width: 1480rem;
  height: 695rem;
  left: 50%;
  top: 204rem;
  transform: translate(-50%, 0);
  transform-origin: center top;
}
.culture .reel {
  overflow: hidden;
  width: 100%;
  opacity: 0;
  transition: all 0s linear 1s;
}
.culture .reel .content_wrap {
  height: 385rem;
  position: relative;
  margin: auto;
  width: 0rem;
  padding: 0 35rem;
  box-sizing: border-box;
  overflow: hidden;
  transition: width 0.5s;
}
.culture .reel .content_wrap .border {
  position: absolute;
  top: 0rem;
  bottom: 0rem;
  z-index: 20;
  width: 35rem;
}
.culture .reel .content_wrap .border.left {
  left: 0;
}
.culture .reel .content_wrap .border.right {
  right: 0;
  transform: rotate(180deg);
}
.culture .reel .content_wrap .border .wood {
  position: absolute;
  top: 0rem;
  bottom: 0rem;
  left: 50%;
  transform: translateX(-50%);
  width: 18rem;
  background-image: linear-gradient(270deg, #624a26 1%, #b08c58 43%, #6a5238 100%);
  border-radius: 9rem;
}
.culture .reel .content_wrap .border .sild {
  position: absolute;
  top: 8rem;
  bottom: 8rem;
  width: 35rem;
  background: url('/expert/web/static/culture/sild_bg.png') repeat left top;
  border-radius: 5rem;
  overflow: hidden;
  box-shadow: 3rem 2rem 6rem 0 rgba(0, 0, 0, 0.23);
  transition: all 0.5s;
}
.culture .reel .content_wrap .border .sild .effect {
  width: 100%;
  height: 100%;
  background-image: linear-gradient(270deg, #0a0703 0%, #ffe7c8 48%, #000000 100%);
  opacity: 0.2;
}
.culture .reel .content_wrap.open {
  width: 100%;
  transition: width 1.7s;
}
.culture .reel .content_wrap.open .border .sild {
  background-position: right top;
  transition: all 1s;
}
.culture .reel .content_wrap.open .content .text {
  padding-bottom: 36rem;
  opacity: 1;
  transition: all 1s ease-in 0.1s;
}
.culture .reel .content_wrap.open .content .background {
  opacity: 1;
  transition: all 1s ease-in 0.3s;
}
.culture .reel .content {
  padding: 30rem 80rem;
  background: url('/expert/web/static/culture/reel_bg.jpg') repeat center left;
  background-size: 100% 100%;
  height: calc(100% - 24rem);
  position: absolute;
  left: 50%;
  top: 12rem;
  transform: translate(-50%, 0%);
  width: 1480rem;
  box-sizing: border-box;
  z-index: 10;
  border-radius: 8rem;
  overflow: hidden;
  transition: all 0s linear 1s;
}
.culture .reel .content img.pic {
  height: 100%;
  width: 100%;
  border: 1rem solid #d2983a;
  box-sizing: border-box;
  padding: 1rem;
}
.culture .reel .content .text {
  position: absolute;
  padding-bottom: 0rem;
  text-align: center;
  left: 80rem;
  right: 80rem;
  padding-top: 100rem;
  color: #fff;
  bottom: 30rem;
  opacity: 0;
  transition: all 0.1s ease-in-out 0.4s;
  transform-origin: center bottom;
}
.culture .reel .content .text h2 {
  font-weight: normal;
  font-size: 40rem;
  line-height: 1.1;
}
.culture .reel .content .text p {
  line-height: 1.2;
  margin: 24rem auto;
  width: 760rem;
  font-size: 24rem;
}
.culture .reel .content .text img.more {
  margin: auto;
  width: 168rem;
}
.culture .list {
  display: flex;
  width: 100%;
  min-width: 1200rem;
  justify-content: space-between;
  position: relative;
  transform: scale(1);
  transition: all 0s linear 1s;
  margin-top: -220rem;
}
.culture .list .item_wrap {
  width: 25%;
  position: relative;
  padding-bottom: 32rem;
  opacity: 0;
  transition: all 0s linear 1s;
}
.culture .list .item_wrap .title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -10rem;
  font-size: 24rem;
  text-align: center;
  color: #6f6c66;
  margin: 0;
}
.culture .list .item {
  margin: 0 auto;
  width: 188rem;
  border: 1rem solid #ad7e4a;
  padding: 8rem;
  border-radius: 100%;
  position: relative;
  transition: none;
}
.culture .list .item .thumb {
  width: 100%;
  display: block;
}
.culture .list .item .line_dot {
  opacity: 0;
  width: 0;
  height: 0;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.culture .list .item .line_dot img {
  width: calc(100% + 26rem);
  margin: -13rem;
}
.culture .list .cur .item,
.culture .list .item_wrap:hover .item {
  transition: all 0.5s ease-out 0s;
  width: 170rem !important;
  background: url('/expert/web/static/culture/cur_bg_new.png') no-repeat center;
  background-size: 100% 100%;
  margin: -26rem auto -42rem auto;
  padding: 48rem;
  border: none;
}
.culture .list .cur .item .thumb,
.culture .list .item_wrap:hover .item .thumb {
  position: relative;
}
.culture .list .cur .item .line_dot,
.culture .list .item_wrap:hover .item .line_dot {
  transition: all 0.5s ease-out 0s;
  opacity: 1;
  position: absolute;
  content: ' ';
  border: 1rem solid #f7edd2;
  border-radius: 100%;
  width: 160rem;
  height: 160rem;
}
.culture .list .cur .title,
.culture .list .item_wrap:hover .title {
  transition: all 1s ease-out;
  bottom: -40rem;
}
.culture .list .cur .item {
  animation: culture_cur_item 20s forwards linear 0.1s infinite;
}
.culture .list .cur .item .thumb {
  animation: culture_cur_pic 20s forwards linear 0.1s infinite;
}
.culture .list::before,
.culture .list .item_wrap::before,
.culture .list::after,
.culture .list .item_wrap::after {
  content: ' ';
  width: 15%;
  height: 1rem;
  position: absolute;
  bottom: 0;
  border-bottom: 1rem dashed #ad7e4a;
  opacity: 0;
  transition: all 0s linear 1s;
}
.culture .list::before,
.culture .list .item_wrap::before {
  left: 0;
}
.culture .list::after,
.culture .list .item_wrap::after {
  right: 0;
}
.culture .list::before,
.culture .list::after {
  width: 3%;
}
.culture .list::before {
  left: -3%;
}
.culture .list::after {
  right: -3%;
}
.current .list {
  margin-top: 15rem;
  width: 100%;
  transform: scale(0.8);
  transition: all 2.5s ease-out 1.5s;
}
.current .list::before,
.current .list .item_wrap::before,
.current .list::after,
.current .list .item_wrap::after {
  opacity: 1;
  transition: all 1.5s ease-out 1s;
}
.current .list .item_wrap {
  opacity: 1;
  transition: all 1s ease-in 0.5s;
}
.current .reel {
  height: 385rem;
  opacity: 1;
  transition: all 1s ease-in 1s, height 1s ease-in 1.5s, opacity 1s linear 2.5s;
  overflow: visible;
}
.current .reel .content_wrap {
  transition: width 0.5s ease-out, transform 1s ease-in 1.5s;
  transform: translate(0rem, 0);
}
.current .reel .content {
  padding: 30rem 80rem;
  transition: all 0s ease-in-out 3s;
}
@keyframes culture_cur_item {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
@keyframes culture_cur_pic {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes culture_cur_line_dot {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}