@charset "utf-8";



/* !Resetin
---------------------------------------------------------- */
header {
    z-index: 10;
}

label {
  cursor: pointer;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 100%;
}



img {
  vertical-align: top;
  max-width: 100%;
}



.howsolvehd {
  display: flex;
  justify-content: center;
  text-align: center;
}

.howsolvehd .con {
  position: relative;
}

.howsolvehd .tip {
  position: relative;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.35;
  color: #80360E;
}

.howsolvehd .tip::before {
  content: "";
  position: absolute;
  left: -42px;
  top: 10px;
  display: block;
  width: 24px;
  height: 1px;
  background-color: #80360E;
  transform: rotate(65deg);
  transform-origin: 0 0;
}

.howsolvehd .tip::after {
  content: "";
  position: absolute;
  right: -42px;
  top: 10px;
  display: block;
  width: 24px;
  height: 1px;
  background-color: #80360E;
  transform: rotate(-65deg);
  transform-origin: 100% 0;
}

.howsolvehd .doubt {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 304px;
  height: 40px;
  margin: 12px 0 10px;
  line-height: 40px;
  background: linear-gradient(45deg, #FE8BBB, #FF7D34);
  border-radius: 20px;
}

.howsolvehd .doubt::after {
  content: "";
  position: absolute;
  right: 36px;
  bottom: -8px;
  display: block;
  width: 18px;
  height: 12px;
  background: linear-gradient(45deg, #FE8BBB, #FF7D34);
  clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
}

.howsolvehd .doubt .txt {
  font-size: 20px;
  font-weight: 400;
  color: #fff;
}

.howsolvehd .specialmovie {
  position: relative;
  display: inline-block;
  vertical-align: top;
  padding: 20px;
}

.howsolvehd .specialmovie::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  display: block;
  width: 119px;
  height: 119px;
  background: url(../img/top/img_specialmovie_scroll.svg) center / contain no-repeat;
  animation: scrollin 18s linear infinite;
}

.howsolvehd .specialmovie .pic {
  width: 240px;
  height: 79px;
  background: url(../img/top/img_specialmovie.svg) center / contain no-repeat;
}

.howsolvehd .ico {
  margin-top: -12px;
  margin-bottom: 10px;
}

.howsolvetab {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  row-gap: 20px;
  column-gap: 25px;
  width: 485px;
  max-width: 100%;
  margin: 15px auto 70px;
}

.howsolvetab .item {
  position: relative;
  width: 110px;
  height: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.howsolvetab .item::before {
  content: "";
  position: absolute;
  top: 0;
  top: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  background: url(../img/top/img_tab_bg02.svg) center / contain no-repeat
}

.howsolvetab .item:nth-child(even)::before {
  transform: rotate(180deg);
}

.howsolvetab .item .txt {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.35;
  color: #D08A64;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: all .3s;
  text-align: center;
}

.howsolvetab .iconew {
  position: absolute;
  left: 50%;
  bottom: 50%;
  display: block;
  transform: translate(-50%, -16px);
}

.howsolvetab .iconew img {
  display: block;
}

.slickitem {
  width: 342px;
  max-width: 100%;
  padding-top: 40px;
  background: url(../img/top/img_tab_bg02.svg) 0 0 / 150px auto no-repeat;
}

.slickitem .hd {
  position: relative;
  z-index: 1;
}

.slickitem .hd .tit {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 18px;
}

.slickitem .hd .tit .pic {
  width: 50px;
  height: 50px;
}

.slickitem .hd .txt {
  padding-top: 10px;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.35;
  color: #80360E;
}

.slickitem .hd .tit .iconew {
  position: absolute;
  left: 68px;
  top: -3px;
  width: 34px;
  height: 14px;
  background: url(../img/top/ico_new.svg) center / contain no-repeat;
}

.slickitem .hd .tip {
  width: 315px;
  max-width: 100%;
  height: 76px;
  padding-top: 8px;
  padding-bottom: 12px;
  margin: 5px auto;
  text-align: center;
  background: url(../img/top/img_bubble.svg) center / contain no-repeat;
}

.slickitem .hd .sub {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.35;
  color: #B99300;
}

.slickitem .bd {
  position: relative;
  width: 262px;
  height: 451px;
  margin: 0 auto;
  background-color: #E8E8E8;
  border: 10px solid #fff;
  box-shadow: 0 3px 40px rgba(0, 0, 0, .1);
}

.slickitem .bd .moviebox {
  position: relative;
  height: 0;
  overflow: hidden;
  padding: 20px 0 170%;
}

.slickitem .bd .moviebox iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
}

.slickitem .bd .moviebox .btnplay::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../img/top/img_playmovie.svg) center no-repeat;
  cursor: pointer;
  z-index: 10;
}

.slickitem .bd .moviebox .btnplay img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9;
}



.howsolveslick .swiper-container {
  padding: 0 calc(50% - 191px) 62px;
}

.howsolveslick .swiper-slide {
  padding: 0 20px;
}

.howsolveslick .swiper-pagination-progressbar {
  width: 62%;
  height: 3px;
  top: auto;
  bottom: 0;
  left: 19%;
  background-color: #F4D2C0;
}

.howsolveslick .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background-color: #ff752a;
}

.howsolveslick .swiper-button-next,
.howsolveslick .swiper-button-prev {
  width: 20px;
  height: 90px;
  top: auto;
  bottom: 238px;
  background: url(../img2024/top/ico_arrow-prev.svg) center / contain no-repeat;
}

.howsolveslick .swiper-button-prev {
  left: calc(50% - 180px);
}

.howsolveslick .swiper-button-next {
  right: calc(50% - 180px);
  transform: rotateY(180deg);
}

.howsolveslick .swiper-button-next:after,
.howsolveslick .swiper-button-prev:after {
  content: "";
}





@media screen and (max-width:768px){
    .slickitem .bd {
    position: relative;
    width: 320px;
    height: 550px;
    margin: 0 auto;
    background-color: #E8E8E8;
    border: 10px solid #fff;
    box-shadow: 0 3px 40px rgba(0, 0, 0, .1);
}

.howsolveslick .swiper-button-prev {
    left: calc(50% - 180px);
}

.howsolveslick .swiper-button-next {
    right: calc(50% - 180px);
    transform: rotateY(180deg);
}
.howsolveslick .swiper-button-next,
.howsolveslick .swiper-button-prev {
  width: 20px;
  height: 90px;
  top: auto;
  bottom: 310px;
  background: url(../img2024/top/ico_arrow-prev.svg) center / contain no-repeat;
}
    section {
    width: 106%;
    margin: 0 auto;
}

.howsolveslick .swiper-button-next {
    right: calc(50% - 175px);
    transform: rotateY(180deg);
}
.howsolveslick .swiper-button-prev {
    left: calc(50% - 195px);
}
.howsolveslick .swiper-slide {
    padding: 0 20px 0 10px;
}
    
}