.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.right-\[20px\] {
  right: 20px;
}

.bottom-\[20px\] {
  bottom: 20px;
}

.bottom-0 {
  bottom: 0px;
}

.z-50 {
  z-index: 50;
}

.float-left {
  float: left;
}

.-mt-\[5vh\] {
  margin-top: -5vh;
}

.-mt-\[50px\] {
  margin-top: -50px;
}

.mt-\[30px\] {
  margin-top: 30px;
}

.mt-\[80px\] {
  margin-top: 80px;
}

.-mt-\[80px\] {
  margin-top: -80px;
}

.mb-\[50px\] {
  margin-bottom: 50px;
}

.mb-\[40px\] {
  margin-bottom: 40px;
}

.mt-\[10px\] {
  margin-top: 10px;
}

.mr-\[2px\] {
  margin-right: 2px;
}

.mt-\[-2px\] {
  margin-top: -2px;
}

.mt-\[25px\] {
  margin-top: 25px;
}

.mt-\[150px\] {
  margin-top: 150px;
}

.mb-\[20px\] {
  margin-bottom: 20px;
}

.mr-\[10px\] {
  margin-right: 10px;
}

.block {
  display: block;
}

.hidden {
  display: none;
}

.h-\[380px\] {
  height: 380px;
}

.h-\[390px\] {
  height: 390px;
}

.h-full {
  height: 100%;
}

.h-\[190px\] {
  height: 190px;
}

.h-\[18px\] {
  height: 18px;
}

.h-\[80px\] {
  height: 80px;
}

.w-full {
  width: 100%;
}

.w-\[55\%\] {
  width: 55%;
}

.w-\[45\%\] {
  width: 45%;
}

.w-\[630px\] {
  width: 630px;
}

.w-\[30\%\] {
  width: 30%;
}

.w-\[18px\] {
  width: 18px;
}

.transform {
  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y))
    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
    rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y))
    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.cursor-pointer {
  cursor: pointer;
}

.resize {
  resize: both;
}

.overflow-hidden {
  overflow: hidden;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.break-words {
  overflow-wrap: break-word;
}

.break-all {
  word-break: break-all;
}

.rounded-\[10px\] {
  border-radius: 10px;
}

.rounded-\[8px\] {
  border-radius: 8px;
}

.rounded-\[6px\] {
  border-radius: 6px;
}

.rounded-\[4px\] {
  border-radius: 4px;
}

.bg-\[\#ffda81\] {
  --tw-bg-opacity: 1;
  background-color: rgb(255 218 129 / var(--tw-bg-opacity));
}

.bg-\[\#e1322e\] {
  --tw-bg-opacity: 1;
  background-color: rgb(225 50 46 / var(--tw-bg-opacity));
}

.bg-gradient-to-b {
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}

.from-\[\#fff\] {
  --tw-gradient-from: #fff;
  --tw-gradient-to: rgb(255 255 255 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-\[\#fff1cc\] {
  --tw-gradient-from: #fff1cc;
  --tw-gradient-to: rgb(255 241 204 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-\[\#ffecd1\] {
  --tw-gradient-to: #ffecd1;
}

.to-\[\#ffcd57\] {
  --tw-gradient-to: #ffcd57;
}

.p-\[10px\] {
  padding: 10px;
}

.p-\[20px\] {
  padding: 20px;
}

.p-\[8px\] {
  padding: 8px;
}

.px-\[40px\] {
  padding-left: 40px;
  padding-right: 40px;
}

.px-\[4px\] {
  padding-left: 4px;
  padding-right: 4px;
}

.py-\[20px\] {
  padding-top: 20px;
  padding-bottom: 20px;
}

.py-\[40px\] {
  padding-top: 40px;
  padding-bottom: 40px;
}

.pb-\[30px\] {
  padding-bottom: 30px;
}

.pb-0 {
  padding-bottom: 0;
}

.pr-\[8vw\] {
  padding-right: 8vw;
}

.pl-\[30px\] {
  padding-left: 30px;
}

.pb-\[50px\] {
  padding-bottom: 50px;
}

.pb-\[20px\] {
  padding-bottom: 20px;
}

.pl-\[35\%\] {
  padding-left: 35%;
}

.pr-\[20px\] {
  padding-right: 20px;
}

.pt-\[50vw\] {
  padding-top: 50vw;
}

.pt-\[20px\] {
  padding-top: 20px;
}

.pb-\[10px\] {
  padding-bottom: 10px;
}

.text-center {
  text-align: center;
}

.indent-\[30px\] {
  text-indent: 30px;
}

.text-\[16px\] {
  font-size: 16px;
}

.text-\[20px\] {
  font-size: 20px;
}

.text-\[18px\] {
  font-size: 18px;
}

.text-\[14px\] {
  font-size: 14px;
}

.font-bold {
  font-weight: 700;
}

.font-medium {
  font-weight: 500;
}

.leading-\[29px\] {
  line-height: 29px;
}

.leading-\[40px\] {
  line-height: 40px;
}

.tracking-\[2px\] {
  letter-spacing: 2px;
}

.text-\[\#84090b\] {
  --tw-text-opacity: 1;
  color: rgb(132 9 11 / var(--tw-text-opacity));
}

.text-\[\#810006\] {
  --tw-text-opacity: 1;
  color: rgb(129 0 6 / var(--tw-text-opacity));
}

.text-\[\#8f585d\] {
  --tw-text-opacity: 1;
  color: rgb(143 88 93 / var(--tw-text-opacity));
}

.text-gray-800 {
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity));
}

.transition {
  transition-property:
    color,
    background-color,
    border-color,
    text-decoration-color,
    fill,
    stroke,
    opacity,
    box-shadow,
    -webkit-transform,
    -webkit-filter,
    -webkit-backdrop-filter;
  transition-property: color, background-color, border-color,
    text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,
    backdrop-filter;
  transition-property:
    color,
    background-color,
    border-color,
    text-decoration-color,
    fill,
    stroke,
    opacity,
    box-shadow,
    transform,
    filter,
    backdrop-filter,
    -webkit-transform,
    -webkit-filter,
    -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 0.15s;
}

.twenty-spirit .spirit-article-list .spirit-article-item {
  position: relative;
  padding-left: 20px;
}

.twenty-spirit .spirit-article-list .spirit-article-item p {
  font-size: 18px;
  border-bottom: 1px dashed #e8e4e1;
  color: #84090b;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-top: 10px;
  padding-bottom: 10px;
}

.twenty-spirit .spirit-article-list .spirit-article-item > img {
  position: absolute;
  left: 0px;
  top: 13px;
  height: 18px;
  width: 18px;
}

.twenty-spirit .spirit-article-list .spirit-article-item span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.twenty-spirit .spirit-article-list .spirit-article-item:last-child p {
  border-bottom: none;
}

.twenty-spirit .spirit-article-list .spirit-article-item:hover {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfEAAAA7CAMAAABc6EMpAAAA51BMVEUAAAD/3Ij/8sz/78H/7Lr/6bH/8MT/4Zj/8cj/7Lf/56n/45//8MT/4JP/5aX/5KD/3o3/8cf/8cj/7r//5qb/8Mb/8sr/6rP/7r7/8cj/35H/35H/7sD/457/8sz/35L/8cn/6K//5qf/8sz/3Ij/7b3/8cn/5qj/8sz/3In/7Lr/6K7/7sD/78L/8MX/8cn/8sz/67f/6rT/6bD/7b3/8Mf/8cr/3o//3Yr/67j/6rX/6bL/7bz/7b7/56z/56r/5qj/5aX/5KP/78T/5KH/457/4pz/4pr/4Zf/4JX/35P/35H/3Yysjph8AAAAKnRSTlMAVarS0tIdI+vm0tK/sT0Q4JaHf2JhSwsG1MmKQy377cu3jXBM/PPqpJ31LIrMAAABi0lEQVR42u3VB1bCABCE4UUhIYGEkkBCr1YUsFDsvXv/8xhBkLQL7M53hf/NG1pyy8X9LeCjUOgpFM/tpcfATbNEcZTKGBiaxiVvYOBMNcsUxalMgam0QhGsKbDVdikktzsCvooUUhoBZ+ErL4yAs/CVZyfAWpYC2hPgLXjllSEwF7jy7SEwl1ZQXJisv/gTsFf0FT8G/uooLkxaQXFhshvFj0ACC8WlqaO4MJqyKn4DMqyuPHkOQlgoLsxOfVn8GqTQnEXxQxCjgOLSmCguTPK3+AUIUvKKn4AgGopLo1LqEgTRiFKnIIiF4rJojlf8CuSwySt+BmJ0CMVF0ZRF8QFIYRKKi2LTgj4AGbq0pN+CCB36o9+BBHpuXfweBNhTaUV/AAFMWss8An82/cs8A3td2pB5Ae4M8hV/BeYyOdpUfQPeWir5GO/Am0l+tQ9gzaYA8xM4q1FI/gv4MigsMQO2qjmKYMyAqbxKURzjG1jygkdza3NgyAseSz1ozYEZ/4eHNfoJYKTfoGg/Cz4OdyWEfnAAAAAASUVORK5CYII=)
    100%;
}

.twenty-spirit .spirit-article-list .spirit-article-item:hover > img {
  left: 10px;
}

.twenty-spirit .spirit-article-list .spirit-article-item:hover p {
  padding-left: 10px;
  border-bottom-color: transparent;
  font-weight: 900;
}

.twenty-spirit .twenty-spirit-swiper-pagination {
  margin: 0 10px;
}

.twenty-spirit .twenty-spirit-swiper-pagination .swiper-pagination-bullet {
  background: #deb589;
  width: 10px;
  height: 10px;
}

.twenty-spirit
  .twenty-spirit-swiper-pagination
  .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: #c01920;
}

.twenty-spirit
  .twenty-spirit-swiper-pagination
  .swiper-pagination-bullet
  + .swiper-pagination-bullet {
  margin-left: 20px;
}

.twenty-spirit .swiper-button-disabled {
  cursor: not-allowed;
}

.study .study-article-list .study-article-item {
  position: relative;
  margin-bottom: 40px;
  height: 180px;
  cursor: pointer;
  border-radius: 6px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  --tw-gradient-from: #fff1cc;
  --tw-gradient-to: rgb(255 241 204 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: #ffcd57;
}

.study .study-article-list .study-article-item:hover {
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}

.study .study-article-list .study-article-item:last-child {
  margin-bottom: 0;
}

.hover\:pl-\[36\%\]:hover {
  padding-left: 36%;
}

@media (max-width: 1024px) {
  .max-\[1024px\]\:relative {
    position: relative;
  }

  .max-\[1024px\]\:right-0 {
    right: 0px;
  }

  .max-\[1024px\]\:bottom-\[10px\] {
    bottom: 10px;
  }

  .max-\[1024px\]\:float-none {
    float: none;
  }

  .max-\[1024px\]\:mt-\[-20px\] {
    margin-top: -20px;
  }
  .max-\[1024px\]\:mt-\[-15px\] {
    margin-top: -15px;
  }

  .max-\[1024px\]\:mt-\[10px\] {
    margin-top: 10px;
  }

  .max-\[1024px\]\:mt-\[40px\] {
    margin-top: 40px;
  }

  .max-\[1024px\]\:mt-\[-50px\] {
    margin-top: -50px;
  }

  .max-\[1024px\]\:mb-\[10px\] {
    margin-bottom: 10px;
  }

  .max-\[1024px\]\:mt-\[20px\] {
    margin-top: 20px;
  }

  .max-\[1024px\]\:block {
    display: block;
  }

  .max-\[1024px\]\:h-auto {
    height: auto;
  }

  .max-\[1024px\]\:w-full {
    width: 100%;
  }

  .max-\[1024px\]\:overflow-auto {
    overflow: auto;
  }

  .max-\[1024px\]\:px-\[10px\] {
    padding-left: 10px;
    padding-right: 10px;
  }

  .max-\[1024px\]\:py-\[20px\] {
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .max-\[1024px\]\:py-\[10px\] {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .max-\[1024px\]\:pr-0 {
    padding-right: 0;
  }

  .max-\[1024px\]\:pl-\[10px\] {
    padding-left: 10px;
  }

  .max-\[1024px\]\:pt-\[56vw\] {
    padding-top: 56vw;
  }

  .max-\[1024px\]\:text-center {
    text-align: center;
  }
  .max-\[1024px\]\:size-\[14px\] {
    font-size: 14px !important;
  }
  .max-\[1024px\]\:size-\[12px\] {
    font-size: 12px !important;
  }
}

@media (min-width: 1024px) {
  .min-\[1024px\]\:block {
    display: block;
  }
}

@media (min-width: 1280px) {
  .xl\:pt-\[50vw\] {
    padding-top: 50vw;
  }
}

.h-390 {
  height: 390px;
}
