@charset "utf-8";

.gjs-dashed .swiper-wrapper .swiper-slide{
  max-width:450px;
}

.gjs-dashed .voice .container::before{
  display:none;
}

.voice{
  margin-bottom:7.5rem;
}

.voice-swiper .swiper-wrapper {
  transition-timing-function: linear;
}

.voice .container{
  background:#FFFFFF;
  padding:2rem 0 4rem !important;
  position:relative;
}

.voice .container > p{
  padding: 0 5%;
}

.voice .container:has(.arrow-btn){
  padding:5rem 0 2.5rem !important;
}

.voice:has(.arrow-btn) h2{
  margin: -6.5rem auto 1.5rem;
}

.voice .container::before{
  content:"";
  position:absolute;
  width:11%;
  aspect-ratio:141/105;
  top:-5%;
  z-index:10;
  right:0;
  background:url(https://asunosmile.com/system_panel/uploads/images/20260908164435232048.png) no-repeat center/contain;
}

.voice .container::after{
  content:"";
  position:absolute;
  width:11%;
  aspect-ratio:141/105;
  bottom:0;
  z-index:10;
  left:-5%;
  background:url(https://asunosmile.com/system_panel/uploads/images/20260908164435232048.png) no-repeat center/contain;
}


.voice {
  text-align:center;
}

.voice h2{
  font-size:clamp(1.25rem, 1rem + 0.83vw, 2rem);
  margin: -3.5rem auto 1.5rem;
  display:flex;
  align-items:center;
  gap:10px;
  justify-content: center;
}

.voice h2::before,
.voice h2::after{
  content:"";
  width:40px;
  height:2px;
  background:#2E0000;
  transform: rotate(45deg);
}

.voice h2::after{
  transform: rotate(-45deg);
}

.voice .swiper{
  margin-top:2.5rem;
}

.voice-contents .container{
  display:grid;
  gap:3.5rem;
}

.voice-item{
  padding:20px ;
  background:#FFE87A;
  border-radius:1rem;
  box-shadow:0px 3px 6px rgba(0,0,0,0.16);
}

.voice-bg{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding:2rem 3rem;
  background:#fff;
  border-radius:1rem;
  background-image: repeating-linear-gradient(90deg, #2e0000, #2e0000 6px, transparent 6px, transparent 12px), repeating-linear-gradient(180deg, #2e0000, #2e0000 6px, transparent 6px, transparent 12px), repeating-linear-gradient(90deg, #2e0000, #2e0000 6px, transparent 6px, transparent 12px), repeating-linear-gradient(180deg, #2e0000, #2e0000 6px, transparent 6px, transparent 12px);
  background-position: left top, right top, left bottom, left top;
  background-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
  background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%;
}

.voice-bg > img{
  width:15%;
}

.voice-txt{
  width:80%;
}

.voice-txt h3{
  margin-bottom:16px;
  font-size:clamp(1rem, 0.917rem + 0.28vw, 1.25rem);
}

.voice-cta{
  margin:7.5rem auto 0;
  background:#fff;
  padding:4rem 5%;
  width:90%;
  max-width:1728px;
  display: flex;
  align-items: center;
  justify-content:end;
  gap:5%;
}

.voice-cta-img1{
  width:20%;
}

.voice-cta-txt{
  max-width:60%;
  width:fit-content;
}

.voice-cta-txt h2{
  font-size:clamp(1.25rem, 0.833rem + 1.39vw, 2.5rem);
}

.voice-cta-txt h3{
  font-size:clamp(1rem, 0.917rem + 0.28vw, 1.25rem);
  margin:14px 0 20px;
  padding-bottom:8px;
  background-image: repeating-linear-gradient(90deg, #2e0000, #2e0000 8px, transparent 8px, transparent 16px);
  background-position: left bottom;
  background-repeat: repeat-x;
  background-size: 100% 2px;
}

.voice-cta-img2{
  width:13%;
  animation: fv-deco-swing-reverse 2.4s steps(2, end) infinite;
}

@keyframes fv-deco-swing-reverse{
0% {
    -webkit-transform: rotate(4deg) translateY(0);
    transform: rotate(4deg) translateY(0);
}

50% {
    -webkit-transform: rotate(-3deg) translateY(2px);
    transform: rotate(-3deg) translateY(2px);
}
100% {
    -webkit-transform: rotate(2deg) translateY(-2px);
    transform: rotate(2deg) translateY(-2px);
}
}

.voice-cta-btn{
  display:flex;
  gap:2.5rem;
  flex-wrap:wrap;
  margin-top:2.5rem;
}

.voice-cta-btn .arrow-btn {
  margin: 0;
  max-width: 280px;
  width: 45%;
}

@media screen and (max-width: 1279px) {
  .voice-cta-btn .arrow-btn{
    width: 280px;
  }
  .voice-cta-img1 {
    width: 23%;
    margin-right: auto;
  }
  .voice-cta{
    gap:0;
    position: relative;
  }
  .voice-cta-btn{
    gap:1.5rem;
    margin-top: 1.5rem;
  }
  .voice-cta-img2 {
    width: 13%;
    position: absolute;
    right: -3%;
    bottom: -10%;
  }
  .voice-cta-txt {
    max-width: none;
    width: 75%;
  }
}

@media screen and (max-width: 1024px) {
  .voice-bg{
    flex-direction: column;
    gap: 1rem;
  }
  .voice-bg > img {
    width: 9rem;
  }
  .voice-txt,
  .voice-cta-txt{
    width:100%;
  }
  .voice-cta{
    flex-direction: column;
    align-items: center;
    gap: 2rem;
  }
  .voice-cta-img1 {
    width: 50%;
    margin-right: 0;
    max-width:300px;
  }
  .voice .container{
    width: 90%;
  }
  .voice-cta-img2{
    right: -2rem;
    bottom: -3rem;
    width: 7rem;
  }
}

@media screen and (max-width: 767px) {
  .voice .container {
    width: 100%;
    padding: 2rem 0 3rem !important;
  }
  .voice h2{
    margin-top:-2.8rem;
  }
  .voice h2::before, .voice h2::after{
    width: 22px;
  }
  .voice h2::after{
    margin-left: -8px;
  }
  .voice .container::before{
    width: 4rem;
    top: -1rem;
  }
  .voice .container::after{
    width: 4.5rem;
    bottom: -1rem;
    left: 0;
  }
  .voice-item {
    padding: 10px;
  }
  .voice-bg{
    padding: 1rem 1rem 2rem;
  }
  .voice-cta{
    margin: 3.5rem auto 0;
    padding: 2rem 5% 4rem;
    gap:1rem;
  }
  .voice-cta-img1 {
    width: 70%;
  }
  .voice {
    margin-bottom: 3.5rem;
  }
}