@charset "utf-8";

.top-banner{
  max-width: 300px;
  position: fixed;
  z-index: 100;
  bottom: 2.5%;
  left: 2.5%;
  opacity:0;
  transition: 0.3s;
  z-index: -100;
  visibility: hidden;
}

.top-banner.show{
  opacity:1;
  visibility: visible;
  z-index: 100;
}

.top-banner.show:hover{
  opacity:0.7;
}

#root{
  background:#F8F8F8;
}

.fv{
  padding:240px 5% 0;
  margin-bottom:4rem;
  position:relative;
}

.fv::before{
  content:"";
  position:absolute;
  width: 38%;
  aspect-ratio: 1612 / 1037;
  top: -1%;
  left: -5%;
  background:url(https://colors-s.com/system_panel/uploads/images/20251222152916785332.png) no-repeat center/contain;
}

.fv-img > img{
  aspect-ratio:1728/623;
  object-fit:cover;
}

.fv-txt{
  position:absolute;
  width:max-content;
  max-width: 600px;
  bottom: 5%;
  left: 10%;
}

.fv-txt h1{
  line-height: 1.3;
}

.fv-txt h1 span{
  color:#fff;
  font-size:clamp(1.5rem, 0.909rem + 1.97vw, 3.125rem);
}


.fv-txt h1 em{
  color:#FFA908;
}

.fv-txt img{
  width: 85%;
  margin: 0.5rem 0 0;
  display:block;
}

.fv-btn-wrap{
  display:flex;
  max-width:1345px;
  justify-content: space-between;
}

.fv-btn{
  width:15%;
  color:#5F5F5F;
  font-size:clamp(1rem, 0.909rem + 0.3vw, 1.25rem);
  font-weight:bold;
  position:relative;
}

.fv-btn:hover{
  opacity:1;
  color:#FF7006;
}

.fv-btn::before{
  content:"";
  position:absolute;
  width:1px;
  height:100%;
  background:#C7C7C7;
  right:-20%;
  top:0;
}

.fv-btn:last-child::before{
  display:none;
}

.fv-btn-p{
  display:flex;
  gap:1rem;
  align-items:center;
  justify-content: center;
}

.fv-btn-p div{
  width:1.5rem;
  background:#5F5F5F;
  border-radius:999vh;
  height:1.5rem;
  position:relative;
  transition:0.3s;
}

.fv-btn:hover .fv-btn-p div{
  background:#FF7006;
}

.fv-btn-p div img{
  position:absolute;
  width:11px;
  top: 50%;
  left: 55%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.fv-btn-img{
  width:70%;
  margin:1rem auto 0;
  background:#5F5F5F;
  border-radius:999vh;
  position:relative;
  aspect-ratio:1/1;
  transition:0.3s;
}

.fv-btn:hover .fv-btn-img{
  background:#FF7006;
}

.fv-btn-img img{
  position:absolute;
  width:60%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  aspect-ratio: 1 / 1;
}

.top-home{
  margin:7.5rem auto;
}

.top-home-title{
  text-align:center;
  color:#1F2C5C;
  font-size:clamp(1rem, 0.955rem + 0.15vw, 1.125rem);
  font-weight:bold;
}

.top-home-title p{
  width:fit-content;
  margin:0 auto 10px;
  position:relative;
}

.top-home-title p::before{
  content:"";
  position:absolute;
  width:262px;
  height:60px;
  top: -2rem;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  background:url(https://colors-s.com/system_panel/uploads/images/20251222174524485568.png) no-repeat center/contain;
}

.top-home-title h2{
  font-size:clamp(1.25rem, 0.795rem + 1.52vw, 2.5rem);
}

.top-home-wrap{
  display: flex;
  justify-content: space-between;
  margin: 3.5rem 0 2rem;
}

.top-home-item{
  width:30%;
  max-width:400px;
}

.top-home-item p{
  text-align:center;
  color:#1F2C5C;
  font-weight:600;
  border:2px solid #1F2C5C;
  padding:0 8px 12px;
  position:relative;
  border-top:none;
  width: 90%;
  margin: 0 auto 20px;
  font-size:clamp(1rem, 0.955rem + 0.15vw, 1.125rem);
}

.top-home-item p::before{
  content: "";
  position: absolute;
  width: 21px;
  height:15px;
  bottom:-10px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  background: url(https://colors-s.com/system_panel/uploads/images/20251222175040909591.png) no-repeat center / contain;
}

.top-soudan{
  max-width:640px;
  width: fit-content;
  margin:4rem auto;
  text-align:center;
  display:flex;
  justify-content: center;
  gap: 2.5rem;
  align-items: center;
  position: relative;
}

.top-soudan img{
  width: 40%;
  position: absolute;
  left: -45%;
}

.top-soudan-txt{
  width: fit-content;
  font-weight:600;
  font-size:clamp(1.25rem, 0.795rem + 1.52vw, 2.5rem);
}

.top-soudan-txt span{
  color:#000;
}

.top-soudan-txt em{
  color:#FF7006;
  font-weight:600;
  display: inline;
  padding: 0 4px 2px 4px;
  background: linear-gradient(transparent 95%, #FF7006 0%);
}

.top-soudan-txt p:first-child span{
  font-size:clamp(1rem, 0.818rem + 0.61vw, 1.5rem);
}

.top-soudan-txt .orange-title:nth-child(2) span::before,
.top-soudan-txt .orange-title:nth-child(2) span::after{
  animation-delay: 0.5s  !important;
}

.top-soudan-txt .orange-title:nth-child(3) span::before,
.top-soudan-txt .orange-title:nth-child(3) span::after{
  animation-delay: 1s !important;
}

.top-soudan-txt .orange-title.fadeUp span::before{
  background: #F8F8F8 !important;
}

.top-feature{
  padding:2rem 0 5rem;
  background:#fff;
  position:relative;
  z-index:1;
}

.top-feature .container,
.top-home{
  max-width:1345px;
}

.top-feature::before{
  content:"";
  position: absolute;
  width: 100%;
  aspect-ratio:3840/525;
  top: -5rem;
  left: 0%;
  z-index:-1;
  background: url(https://colors-s.com/system_panel/uploads/images/20251222181026493919.png) no-repeat center / contain;
}

.top-feature::after{
  content:"";
  position: absolute;
  width: 13%;
  aspect-ratio: 484 / 510;
  top: 1.5rem;
  left: 8%;
  z-index: -1;
  z-index:-1;
  background: url(https://colors-s.com/system_panel/uploads/images/20251222181620239828.png) no-repeat center / contain;
}

.top-feature-wrap{
  display:flex;
  justify-content: space-between;
}

.top-feature-item{
  width:31%;
  text-align:center;
}

.top-feature-item p:last-child{
  text-align:left;
  font-size:14px;
}

.top-feature-item img + p{
  margin-top:20px;
}

.top-feature-item h3{
  font-size:clamp(1.125rem, 0.989rem + 0.45vw, 1.5rem);
  margin:8px 0 20px;
}

.top-feature .img-btn{
  margin:3.5rem auto 0;
}

.hoken{
  padding-bottom:0;
}

.top-service{
  padding:5rem 0 10rem;
  background:#fff;
}

.top-service .container{
  width:85%;
}

.top-service-wrap{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width:75%;
  position:relative;
  margin-bottom:7.5rem;
}

.top-service-wrap::before{
  content:"";
  position:absolute;
  width: 13%;
  aspect-ratio: 154 / 378;
  right: -10%;
  bottom:0;
  background:url(https://colors-s.com/system_panel/uploads/images/20251222171545464211.png) no-repeat center/contain;
}

.top-service-wrap:last-child{
  margin: 0 5% 0 auto;
  z-index: 1;
}

.top-service-wrap:last-child .top-service-txt h3::before{
  background:url(https://colors-s.com/system_panel/uploads/images/20251222171027289869.png) no-repeat center/contain;
}

.top-service-wrap:last-child::before{
  background:url(https://colors-s.com/system_panel/uploads/images/20251222171545204871.png) no-repeat center/contain;
}

.top-service-wrap:last-child::after{
  content:"";
  position:absolute;
  width: 55%;
  aspect-ratio: 1656 / 906;
  left: -45%;
  bottom: 0%;
  z-index: -1;
  background:url(https://colors-s.com/system_panel/uploads/images/20251222172745218091.png) no-repeat center/contain;
}

.top-service-wrap > img{
  width:55%;
}

.top-service-txt{
  width:38%;
  position:relative;
}

.top-service-txt::before{
  content:"";
  position:absolute;
  width: 20%;
  height: 3px;
  background: #1F2C5C;
  left: -25%;
  top: 1.25rem;
}

.top-service-txt > p{
  line-height:2;
}

.top-service-txt h3{
  font-size:clamp(1.25rem, 0.977rem + 0.91vw, 2rem);
  display:flex;
  align-items:center;
  gap:1.5rem;
  margin-bottom:2rem;
}

.top-service-txt h3::before{
  content:"";
  display:block;
  width:2rem;
  height:28px;
  background:url(https://colors-s.com/system_panel/uploads/images/20251222171027950745.png) no-repeat center/contain;
}

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

.top-news{
  margin-bottom:7.5rem;
  position: relative;
  z-index: 1;
}

.top-news > img{
  position:absolute;
  width:7%;
  right:7.5%;
  bottom:10%;
}

.top-news::before{
  content: "";
  position: absolute;
  left: -12%;
  top: 15%;
  z-index: -1;
  width: 35%;
  background: url(https://colors-s.com/system_panel/uploads/images/20251222092742984641.png) no-repeat center / contain;
  aspect-ratio: 1663 / 1047;
}

.top-news .container{  
  max-width: 1152px;
}

.top-news .btn{
  margin-top:3rem;
}

.company{
  padding:2.5rem 0;
  background:#fff;
}

.company-wrap{
  display:flex;
  justify-content: space-between;
  align-items: flex-start;
}

.company-img{
  width:45%;
}

.company-img h3{
  color:#1F2C5C;
  font-size:clamp(1rem, 0.909rem + 0.3vw, 1.25rem);
  margin-bottom:1rem;
  text-align: center;
}

.company-img h3 strong{
  font-size:clamp(1.25rem, 0.977rem + 0.91vw, 2rem);
}

.company-img img{
  width:85%;
  margin:0 auto;
  display:block;
}

.company-txt{
  width:50%;
}

.company-txt strong{
  color:#1F2C5C;
  font-size:clamp(1.125rem, 0.989rem + 0.45vw, 1.5rem);
  font-weight:bold;
}

.company-txt .btn{
  margin:2rem 0 0;
}

@media screen and (max-width: 1600px) {
  .top-news > img {
    width: 5%;
    right: 9%;
    bottom: -10%;
  }
  .fv-btn-p{
    gap:0.5rem;
  }
  .fv-btn{
    font-size:1rem;
  }
  .fv-btn-p div {
    width: 1.25rem;
    height: 1.25rem;
    min-height: auto !important;
  }
  .top-feature-item h3 {
    font-size: 18px;
  }
  .top-service-wrap::before{
    right: -13%;
  }
  .fv-btn-p div img {
    width: 8px;
  }
}

@media screen and (max-width: 1400px) {
  .fv {
    padding: 240px 2.5% 0;
  }
  .fv-btn {
    font-size: 14px;
  }
  .top-service-wrap{
    width: 85%;
  }
  .top-home-item p{
    width: 100%;
    font-size: 14px;
  }
  .top-service-txt h3{
    gap: 1rem;
    margin-bottom: 1rem;
  }
  .top-home-title p::before{
    width: 200px;
    height: 48px;
  }
}

@media screen and (max-width: 1024px) {
  .top-banner {
    max-width: 240px;
  }
  .fv-img > img {
    aspect-ratio: 1728 / 800;
  }
  .fv-txt{
    bottom: 2.5%;
    left: 5%;
    width: 75%;
  }
  .fv-txt img {
    width: 80%;
  }
  .fv-btn-wrap {
    width: 95%;
  }
  .fv-btn {
    font-size: 12px;
    width: 20%;
  }
  .fv-btn::before{
    right:0;
  }
  .fv-btn-img {
    width: 60%;
  }
  .fv-btn-p {
    gap: 4px;
  }
  .fv-btn-p div {
    width: 1rem;
    height: 1rem;
  }
  .fv-btn-p div img {
    width: 7px;
  }
  .top-soudan-txt {
    width: fit-content;
  }
  .company-wrap {
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
  }
  .company-img img {
    width: 400px;
  }
  .company-img,
  .company-txt{
    width: 100%;
  }
  .company-txt{
    max-width:450px;
  }
  .company-txt .btn {
    margin: 2rem auto 0;
  }
  .top-service-wrap {
    width: 100%;
  }
  .top-news .container {
    max-width: 1152px;
    width: 90%;
  }
  .top-news::before {
    left: -12%;
    top: -10%;
    width: 45%;
  }
  .top-news > img {
    width: 6%;
  }
  .top-home-wrap,
  .top-feature-wrap,
  .top-service-wrap{
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
  }
  .top-home-item,
  .top-feature-item{
    width: 100%;
    max-width: 300px;
  }
  .top-service-wrap > img{
    width: 100%;
    max-width: 450px;
  }
  .top-service-txt{
    width: fit-content;
  }
  .top-feature::after {
    width: 20%;
    top: 0;
    left: 5%;
  }
  .top-service-wrap::before {
    right: 0%;
  }
  .top-service-wrap:last-child::after{
    display:none;
  }
}

@media (max-width: 767px) {
  .top-banner {
    opacity:1;
    visibility: visible;
    z-index: 100;
    max-width: 200px;
    bottom: auto;
    top: 11px;
    right: calc(40px + 5%);
    left: auto;
    width: 140px;
  }
  .fv-img > img {
    aspect-ratio: 1 / 1;
  }
  .company-img img {
    width: 300px;
  }
  .top-news > img,
  .top-news::before,
  .fv-btn::before,
  .top-service-txt::before{
    display:none;
  }
  .fv::before {
    width: 90%;
    top: -1%;
    left: -10%;
  }
  .fv {
    padding: 180px 2.5% 0;
    margin-bottom: 2rem;
  }
  .fv-txt{
    width: fit-content;
  }
  .fv-btn{
    width: calc(100% / 3);
  }
  .fv-btn-wrap{
    flex-wrap: wrap;
    gap: 2rem 0;
    justify-content: center;
  }
  .top-home-wrap{
    margin: 2rem 0 2rem;
  }
  .top-soudan{
    gap: 1rem;
    margin: 2rem auto;
  }
  .top-feature::before{
    top: -3rem;
  }
  .top-feature {
    padding: 2rem 0 3rem;
  }
  .main {
    padding: 0rem 0 5rem;
  }
  .paint{
    padding: 2.5rem 0 3rem;
  }
  .top-service {
    padding: 2.5rem 0;
  }
  .top-news {
    margin-bottom: 2.5rem;
  }
  .fv-btn-wrap + .cta{
    margin:2.5rem auto 0;
  }
  .top-home {
    margin: 5rem auto;
  }
  .top-home-item, .top-feature-item{
    max-width:none;
  }
  .top-service-txt{
    width:100%;
  }
  .top-service-wrap::before {
    right: -3%;
    width: 16%;
  }
  .top-service-txt .btn {
    margin: 1rem 0 0;
  }
  .fv-txt h1{
    line-height: 1;
  }
  .top-soudan img {
    width: 30%;
    left: -35%;
  }
}

.top-banner{

  z-index:9999!important;
}
@media screen and ( max-width:345px ){
.top-banner{
width: 110px!important;

}
}