@charset "utf-8";

.fv{
  margin:10% 0 -5rem;
  position:relative;
  z-index: 10;
}

.fv-txt{
  position:relative;
  width:fit-content;
}

.fv-txt img{
  width: 14%;
  top: 0;
  position: absolute;
  right: 21.5%;
  opacity:0;
  transition:0.3s;
  transition-delay:0.3s;
}

.fv-txt img.fadeUp{
  opacity:1;
}

.fv-bg{
  position: absolute;
  bottom:5%;
  left: 0%;
  z-index: 1;
  width: 100%;
  opacity: 0.4;
}

.fv .container{
  width:90%;
  max-width: none;
}

.fv h1{
  font-size:clamp(1.5rem, 0.591rem + 3.03vw, 4rem);
}

.fv h1 strong{
  color:transparent;
  margin: 0 2rem;
  opacity: 0;
}

.fv p{
  font-size:clamp(1.125rem, 0.989rem + 0.45vw, 1.5rem);
  margin:2rem 0 5rem;
}

.fv-swiper{
  width:90%;
  margin:0 2.5% 0 auto;
}

.fv-swiper img{
  object-fit:cover;
  aspect-ratio:338/179;
}

.scroll_down{
  position:absolute;
  top: 70%;
  right: 7.5%;
  z-index: 10;
}

.scroll_down p{
  position: absolute;
  left: -8px;
  bottom: 87px;
  color: #000;
  font-size: clamp(1.125rem, 0.989rem + 0.45vw, 1.5rem);
  writing-mode: vertical-lr;
  text-decoration: none;
  margin: 0;
  line-height: 1;
}

.scroll_down:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: -2.25px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background:#000;
  animation:
    circlemove 1.6s ease-in-out infinite,
    cirlemovehide 1.6s ease-out infinite;
}

@keyframes circlemove{
  0%{bottom:80px;}
  100%{bottom:0px;}
}

@keyframes cirlemovehide{
  0%{opacity:0}
  50%{opacity:1;}
  80%{opacity:0.9;}
  100%{opacity:0;}
}

.scroll_down:after{
  content:"";
  position: absolute;
  bottom:0;
  left:0;
  width:0.5px;
  height: 80px;
  background:#000;
}


.news .container{
  max-width:790px;
}

.news .container .btn{
  margin:2.5rem 0 0 auto;
}

.news-main .webgene-item {
  margin-bottom: 1.5rem;
}

.top-about{
  margin:7.5rem 0 0;
}

.top-about-wrap{
  display:flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1253px;
  margin: 0 auto 0 12.5%;
}

.top-about-txt{
  width:55%;
}

.top-about-txt .blue-btn{
  margin:4rem 0 0 auto;
}

.top-about-txt h2{
  font-size:clamp(1.25rem, 0.432rem + 2.73vw, 3.5rem);
  margin:3.5rem 0 4.5rem;
}

.top-about-txt h2 + p{
  line-height:calc(48/20);
}

.top-about-img{
  width:40%;
  max-width: 420px;
  position:relative;
}

.counter,
.counter2{
  font-size:clamp(3.75rem, 1.477rem + 7.58vw, 10rem);
  line-height:1;
  color:#78B2D5;
  font-weight:600;
  position:absolute;
  top:9%;
}

.counter2{
  right: 5%;
  top: 66%;
}

.white-bg{
  padding:80px 0 120px;
  position: relative;
}

.white-bg .container{
  position: relative;
  z-index: 10;
  max-width:1488px;
}

.white-bg::before,
.white-bg::after{
  content:"";
  position:absolute;
  left:0;
  top:-200px;
  aspect-ratio:3840/450;
  width:100%;
  z-index: 1;
  background:url(https://t-style-of.com/system_panel/uploads/images/20260220122652865506.png) no-repeat center/contain;
}

.white-bg::after{
  top:auto;
  bottom:-220px;
  z-index: 5;
  background:url(https://t-style-of.com/system_panel/uploads/images/20260220122652639574.png) no-repeat center/contain;
}

.top-service h2{
  margin:1.5rem 0 5rem;
  font-size:clamp(1.5rem, 0.727rem + 2.58vw, 3.625rem);
}

.gray-p{
  color:#888888;
  position:relative;
  margin-bottom:4rem;
  z-index: 1;
}

.gray-p::before{
  content:"";
  position:absolute;
  width:100%;
  height:0.3px;
  background:#888888;
  top: 50%;
  left: 0%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  z-index: -1;
}


.gray-p p{
  background:#fff;
  padding-right:1rem;
  font-size:clamp(1rem, 0.909rem + 0.3vw, 1.25rem);
  width: fit-content;
}

.top-service-wrap{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom:140px;
}

.top-service-wrap.reverse{
  flex-direction:row-reverse;
}

.top-service-wrap > img{
  border-radius:20px;
  width:49%;
  aspect-ratio: 736 / 490;
  object-fit: cover;
}

.top-service-txt{
  width:46%;
}

.top-service-txt h3{
  font-size:clamp(1.125rem, 0.989rem + 0.45vw, 1.5rem);
  padding:14px 3rem;
  width:fit-content;
  line-height:1;
  background:#E5F2FF;
  border-radius:2rem;
}

.top-service-txt h4{
  font-size:clamp(1.5rem, 1.136rem + 1.21vw, 2.5rem);
  margin:2rem 0;
}

.top-service-txt .accent{
  max-width:495px;
}

.top-service-txt .arrow-btn{
  margin:2rem 0 0;
}

.top-service-btn{
  max-width:1024px;
  margin:0 auto 7.5rem;
  display: flex;
  justify-content: space-between;
}

.top-service-btn .top-service-wrap{
  flex-direction: column-reverse;
  gap: 1.5rem;
  width: 47.5%;
  max-width: 460px;
}

.top-service-btn .top-service-txt h3{
  font-size:18px;
}

.top-service-btn .top-service-txt h4{
  font-size:clamp(1.125rem, 0.989rem + 0.45vw, 1.5rem);
  margin: 1.5rem 0 1rem;
}

.top-service-btn .top-service-txt .accent{
  font-size:14px;
}

.top-service-btn .top-service-wrap > img,
.top-service-btn .top-service-txt{
  width:100%;
}

.house .top-service-txt h3{
  background:#C2E2DE;
}

.house.top-service-wrap{
  margin-bottom:0;
}

.insta{
  margin-bottom:140px;
}

.insta .container{
  max-width:1180px;
}

.insta .arrow-btn{
  margin-top:4rem;
}

.cta-swiper-bg.top-bottom{
  top:auto;
  bottom:2rem;
  transform:none;
  left: 0;
}

.cta-tel h2{
  font-size:clamp(1.25rem, 0.977rem + 0.91vw, 2rem);
  margin-bottom: 0;
}

.cta-tel .cta-btn{
  margin-top:20px;
}

.cta-tel .cta-btn img {
  width: 2rem;
}

.cta-tel .tel-btn p{
  font-size:clamp(1.5rem, 0.773rem + 2.42vw, 3.5rem);
}

.cta-tel .tel-btn strong{
  font-size:clamp(1rem, 0.909rem + 0.3vw, 1.25rem);
  right: auto;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}

.cta-tel .container{
  overflow: auto;
  box-shadow: none;
  max-width: 890px;
  padding: 5rem 5% 7rem !important;
}

.cta-tel .container::before{
  background: #fff;
  opacity:1;
}

@media screen and (max-width: 1880px) {
  .white-bg::before{
    top: -180px;
  }
  .white-bg::after{
    bottom: -180px;
  }
}

@media screen and (max-width: 1540px) {
  .white-bg::before{
    top: -140px;
  }
  .white-bg::after{
    bottom: -160px;
  }
}

@media screen and (max-width: 1365px) {
  .white-bg::after{
    bottom: -140px;
  }
}

@media screen and (max-width: 1192px) {
  .white-bg::before{
    top: -120px;
  }
  .white-bg::after{
    bottom: -120px;
  }
}

@media screen and (max-width: 1024px) {
  .white-bg::before{
    top: -100px;
  }
  .white-bg::after{
    bottom: -100px;
  }
  .fv {
    margin: 15% 0 -5rem;
  }
  .top-about-wrap{
    margin:0 auto;
  }
  .top-about-txt h2{
    margin: 1.5rem 0 2.5rem;
  }
  .top-about-img {
    width: 100%;
    max-width: 260px;
  }
  .top-about-txt,
  .top-service-txt{
    width: 100%;
  }
  .top-about-wrap{
    margin: 0 auto;
    flex-direction: column-reverse;
    gap: 1rem;
  }
  .top-service-wrap,
  .top-service-wrap.reverse{
    flex-direction: column-reverse;
    gap: 2.5rem;
  }
  .top-service-wrap > img{
    width: 100%;
    max-width: 450px;
  }
  .top-service-txt h4{
    margin:1rem 0;
  }
}

@media screen and (max-width: 850px) {
  .white-bg::before{
    top: -80px;
  }
  .white-bg::after{
    bottom: -80px;
  }
}


@media screen and (max-width: 767px) {
  .fv h1{
    font-size:1.5rem;
  }
  .fv h1 em{
    display:block !important;
    margin-top: 1rem;
  }
  .fv h1 strong{
    margin: 0 1rem;
  }
  .fv-txt img{
    width: 27%;
    top: auto;
    right: auto;
    left: 32%;
    bottom: 0;
  }
  .fv p{
    margin: 1rem 0 2rem;
    font-size: 16px;
  }
  .fv {
    margin: 80px 0 -2.5rem;
  }
  .scroll_down p{
    font-size:12px;
    left: -4px;
    bottom: 60px;
  }
  .fv-swiper {
    width: 100%;
    margin: 0;
  }
  .counter, .counter2 {
    font-size: 5rem;
  }
  .white-bg::before {
    top: -43px;
  }
  .white-bg::after {
    bottom: -44px;
  }
  .white-bg {
    padding: 40px 0;
  }
  .top-service h2 {
    margin: 0.5rem 0 1rem;
  }
  .gray-p{
    margin-bottom: 2rem;
  }
  .top-service-txt h4,
  .top-service-btn .top-service-txt h4{
    font-size: 1.25rem;
    margin: 1rem 0;
  }
  .top-service-wrap{
    margin-bottom: 80px;
  }
  .top-about-wrap{
    gap:0;
  }
  .top-about-txt h2 {
    margin: 0.5rem 0 1rem;
  }
  .top-about-txt .blue-btn {
    margin: 2rem 0 0 auto;
  }
  .top-service-txt h3,
  .top-service-btn .top-service-txt h3{
    font-size: 1rem;
    padding: 10px 1rem;
  }
  .top-service-btn{
    flex-direction: column;
    gap: 1.5rem;
    margin: 0 auto 0rem;
  }
  .top-service-btn .top-service-wrap{
    width:100%;
  }
  form .row{
    padding: 10px 0;
  }
  .cta-tel .container{
    padding: 2rem 0% 3rem !important;
  }
}