@charset "UTF-8";
.topArea{
   overflow: hidden;
}

.topArea::before{
   content: '';
   background-image: url(../images/img/home/about-deco-pic.png);
   background-repeat: no-repeat;
   background-size: contain;
   width:23%;
   height: 60%;
   position: absolute;
   top: 34%;
   right: -7%;
   z-index: 3;
}

.bannerArea:after{
   content: '';
   background: #00000091;
   width: 100%;
   height: 100%;
   position: absolute;
   bottom: 0;
   left: 0;
   z-index: 1;
}

.bannerArea:before{
   content: '';
   background-image: url(../images/img/home/banner-layer.png);
   background-repeat: no-repeat;
   background-position: bottom;
   background-size: cover;
   z-index: 2;
   width: 100%;
   height: 100%;
   position: absolute;
   bottom: 0;
   left: 0;
}

.bannerArea .slickBox .slick-prev{
   left: -15%;
}

.bannerArea .slickBox .slick-next{
   right: -15%;
}

.bannerArea .Img .innerImg{
   padding-top: 55%;
}

.bannerArea .TxtBox{
   position: absolute;
   top: 35%;
   left: 5%;
   transform: translateY(-50%);
   z-index: 3;
}

.bannerArea .TxtBox b{
   color: #d6a12e;
   font-size: 4rem;
   font-weight: 100;
}

.bannerArea .TxtBox h2{
   color: #fff;
   letter-spacing: 3px;
   margin-top: 1rem;
   font-weight: 300;
}

.bannerArea .arrow{
   position: absolute;
   bottom: 2rem;
   left: 0;
   width: 100%;
   animation-name: move-animate;
   animation-duration: 3s;
   animation-iteration-count: infinite;
   animation-fill-mode: both;
}

@keyframes move-animate{
   0%,
   100% {
      bottom: 2rem;
   }

   50% {
      bottom: 3rem;
   }
}

.bannerArea .arrow img{
   width: 4%;
   z-index: 5;
   display: block;
   margin: 0 auto;
}

/* about */

.aboutArea{
   background-image: url(../images/img/home/about-bg.jpg);
   background-repeat: no-repeat;
   background-size: cover;
}

.aboutArea .Txt{
   text-align: center;
   z-index: 3;
}

.aboutArea .Txt h2{
   letter-spacing: 3px;
}

.aboutArea .aboutBox{
   padding: 10% 0;
}

.aboutArea .aboutBox .Txt h2{
   margin-bottom: 2rem;
}

.aboutArea .aboutBox .Txt h3{
   font-weight: 700;
   margin-bottom: 3rem;
   line-height: 1.7;
   margin-top: 2rem;
   letter-spacing: 3px;
}

.aboutArea .aboutBox .Txt h5{
   font-weight: 700;
   letter-spacing: 1px;
   margin-top: 5rem;
   margin-bottom: 3rem;
}


.aboutArea .aboutBox .Txt small{
   color: #fff;
}

.aboutArea .aboutBox .Txt p{
   text-align: center;
}

.aboutArea .aboutBox .Txt p span{
   margin-left: 16px;
}

.aboutArea .aboutBox .Txt p span::after{
   content: '';
   width: 4px;
   height: 4px;
   background: #fff;
   border-radius: 50%;
   position: absolute;
   top: 50%;
   left: -10px;
   transform: translateY(-50%);
}

.aboutArea .caseList{
   padding: 0 20%;
}

.aboutArea .caseList .col h2{
   margin-bottom: 1rem;
   font-weight: 500;
}

.aboutArea .brandBox{
   background: #898989;
   padding: 10% 0;

}

.aboutArea .brandBox .Txt{
   color: #fff;
}

.aboutArea .brandBox .Txt h2{
   margin-bottom: 2rem;
}

.aboutArea .brandBox .Txt p{
   text-align: center;
}

.aboutArea .brandBox .brandList{
   display: flex;
   align-items: center;
   margin-top: 5rem;
   justify-content: center;
   flex-wrap: wrap;
   padding: 0 3%;
}

.aboutArea .brandBox .brandList .item{
   display: flex;
   align-items: center;
   justify-content: center;
   width: 25%;
}

.aboutArea .brandBox .brandList .item .number{
   width: 27%;
   display: block;
   margin-right: 10px;
}

.aboutArea .brandBox .brandList:last-child .item:nth-child(3) .number{
   width: 25%;
}

.aboutArea .brandBox .brandList .item .Txt{
   width: 60%;
}

.aboutArea .brandBox .brandList .item:nth-child(3) .Txt{
   width: 75%;
}

.aboutArea .brandBox .brandList .item .Txt p{
   line-height: 1.7;
   margin-bottom: 0;
   font-size: 0.85rem;
   letter-spacing:0;
}
/* work */
.workArea{
   padding: 5% 0;
   overflow: hidden;
}

.workArea .title h2{
   font-weight: 300;
   padding-left: 18%;
}

.workArea .workSlick .slick-slide {
   transform: scale(0.8);
}

.workArea .workSlick .slick-current{
   transform: scale(1);
}

.workArea .workSlick .slick-prev {
   left: 16%;
   z-index: 10;
}

.workArea .workSlick .slick-next {
   right: 16%;
}

.workArea .workSlick .slick-next,.workArea .workSlick .slick-prev {
   top: 55%;
}

.workArea .workSlick .slick-dots{
   bottom: -40px;
}

.workArea .item {
   background: #f8b62b;
   padding-top: 4rem;
   display: block;
}

.workArea .item::after{
   content: '';
   width: 100%;
   height: 4rem;
   background: #fff;
   position: absolute;
   top: 0;
   left: 0;
}

.workArea .item .Img .innerImg{
   padding-top: 75%;
   z-index: 5;
}

.workArea .item .TxtBox{
   display: flex;
   flex-direction: column;
   align-items: center;
}

.workArea .item .Txt .caseName{
   font-size: 2rem;
   color: #fff;
   letter-spacing: 2px;
}

.workArea .item .Txt .wrap-text{
   word-break: break-word;
}

.workArea .item .Txt .caseArea{
   color: #fff;
}

.workArea .item .Txt .caseInfo{
   font-weight: 500;
   margin-top: 2rem;
   line-height: 1.5;
}

.workArea .item .Txt .btn{
   margin-top: 2rem;
}

.workArea .decoTitle{
   padding: 0.8rem 1rem;
   line-height: 1.2;
   color: #fff;
   background: #f8b62b;
   position: absolute;
   top: -2rem;
   right: 8%;
   z-index: 5;
}

/* process */

.processArea{
   overflow: hidden;
   background-image: url(../images/img/home/process-bg.jpg);
   background-attachment: fixed;
   background-size: cover;
   padding-bottom: 5%;
}

.processArea .title{
   display: flex;
   align-items: end;
   color: #fff;
   margin-bottom: 3rem;
   padding-left: 1%;
}

.processArea .title b{
   font-size: 8rem;
   letter-spacing: 1rem;
   margin-right: 1rem;
   font-weight: 100;
   line-height: 1;
}

.processArea .title h2{
   font-weight: 300;
}

.processArea .processSlick{
   padding-left: 1%;
}

.processArea .processSlick a .item,.processArea .processSlick .slick-slide{
   transform: scale(0.95);
}

.processArea .processSlick .slick-current{
   transform: scale(1);
   transition: all 0.6s;
}

.processArea .processSlick a .item .Img::after{
   content: '';
   width: 100%;
   height: 100%;
   background: #0000007a;
   position: absolute;
   top: 0;
   left: 0;
   transition: all 0.6s;
}

.processArea .processSlick a:hover .item .Img::after,.processArea .processSlick .slick-current .item .Img::after{
   background: transparent;
   transition: all 0.6s;
}

.processArea .processSlick a .item .Img .innerImg{
   padding-top: 80%;
   overflow: hidden;
}


.processArea .processSlick a .item .caseInfo{
   display: flex;
   align-items: end;
   color: #000;
   border-bottom: 4px solid #9b9a9863;
   padding: 1rem 0;
}

.processArea .processSlick a:hover .item .caseInfo,.processArea .processSlick .slick-current .item .caseInfo{
   border-bottom: 4px solid #fff;
}

.processArea .processSlick a:hover .item .caseInfo::after,.processArea .processSlick .slick-current .item .caseInfo:after{
   content: '•••';
   color: #fff;
   font-size: 1.2rem;
   position: absolute;
   right: 0;
   top: 2rem;
}

.processArea .processSlick a .item  .caseInfo .caseName{
   margin-bottom: 0;
   margin-right: 1rem;
}

.processArea .processSlick .slick-prev {
   left: 1%;
   z-index: 10;
   top: 45%;
}

.processArea .processSlick .slick-next {
   right: 1%;
   top: 45%;
}

/* service */
.serviceArea{
   overflow: hidden;
   padding: 5% 0;
   background: #eeeeee;
}

.serviceArea .title h2{
   color: #f8b62b;
   text-align: center;
   letter-spacing: 4px;
   font-size: 3rem;
   font-weight: 300;
   margin-bottom: 4rem;
}

.serviceArea .serviceBox{
   padding: 0 7%;
}

.serviceArea .serviceBox .col::after{
   content: '\F285';
   display: inline-block;
   font-family: bootstrap-icons !important;
   font-style: normal;
   font-weight: normal !important;
   font-variant: normal;
   text-transform: none;
   line-height: 1;
   vertical-align: -0.125em;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   font-size: 2.5rem;
   color: #f8b62b;
   opacity: 1;
   position: absolute;
   top: 20%;
   left: -5%;
}

.serviceArea .serviceBox .col:first-child:after{
   color: transparent;
}


.serviceArea .serviceBox .icon{
   display: block;
   width: 50%;
   margin: 0 auto 2.5rem auto;
}

.serviceArea .serviceBox h4{
   color: #f8b62b;
   text-align: center;
   font-weight: 700;
   letter-spacing: 2px;
}

.serviceArea .serviceBox p{
   text-align: center;
}

/* contact */
.contactArea{
   padding: 5% 0;
   background: #f8b62b;
}

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

.contactArea .contactBox .title h2{
   color: #fff;
   text-align: center;
   letter-spacing: 4px;
   font-size: 3rem;
   font-weight: 300;
   margin-bottom: 3rem;
}

.contactArea .contactBox h5{
   color: #fff;
   text-align: center;
   font-weight: 300;
   line-height: 1.7;
   letter-spacing: 2px;
}

.contactArea .contactBox .lineBtn{
   display: flex;
   justify-content: center;
   margin-top: 3rem;
}

.contactArea .contactBox .lineBtn a{
   background: #fff;
   color:#f8b62b;
   border: 1px solid #fff;
   padding: 0 2.5rem;
   border-radius: 16px;
   display: flex;
   align-items: center;
   justify-content: center;
}

.contactArea .contactBox .lineBtn a:hover{
   color: #fff;
   background:#f8b62b;
   border: 1px solid #fff;
}

.contactArea .contactBox .lineBtn i{
   font-size: 3rem;
   margin-right: 10px;
}

.contactArea .contactBox .lineBtn span{
   font-size: 1.2rem;
   letter-spacing: 2px;
   font-weight: 700;
}

.contactArea .contactBox .info{
   padding: 3rem 0 1rem 0;
   margin-top: 3rem;
}

.contactArea .contactBox .info .tel{
   margin-bottom: 2rem;
   display: flex;
   align-items: end;
   justify-content: center;
}

.contactArea .contactBox .info .address{
   margin-bottom: 2rem;
   display: inline;
}

.contactArea .contactBox .info .address:after{
   content: '';
   width: 100%;
   height: 1px;
   background: #fff;
   position: absolute;
   bottom: -3rem;
   left: 0;
}

.contactArea .contactBox .info .address:before{
   content: '';
   width: 100%;
   height: 1px;
   background: #fff;
   position: absolute;
   bottom: 8rem;
   left: 0;
}

.contactArea .contactBox .info .tel a{
   font-size: 1.7rem;
}

.contactArea .contactBox .info a{
   font-size: 1.5rem;
   line-height: 1;
}

.contactArea .contactBox .info span{
   font-size: 1rem;
   margin-right: 10px;
   color: #fff;
   min-width: 70px;
   letter-spacing: 1px;
}

.contactArea .contactBox .info .logo{
   width: 75px;
   margin-right: 10px;
}

@media (max-width:1809px) {
   .aboutArea .brandBox .brandList .item:nth-child(3) .Txt{
      margin-left: -14px;
   }

   .aboutArea .brandBox .brandList:last-child .item:nth-child(3) .Txt{
      margin-left: -14px;
      width: 90%;
   }
}


@media (max-width:1700px) {
   .aboutArea .brandBox .brandList:last-child .item:nth-child(3) .Txt{
      width: 100%;
   }

   .aboutArea .brandBox .brandList .item .Txt p{
      font-size: 0.8rem;
   }

}

@media (max-width:1600px) {
   .aboutArea .aboutBox .Txt h3{
      font-size: 1.5rem;
   }
   .aboutArea .brandBox .brandList .item:nth-child(3) .Txt{
      margin-left: -15px;
   }

   .aboutArea .brandBox .brandList:last-child .item:nth-child(3) .Txt{
      margin-left: -15px;
   }

   .aboutArea .brandBox .brandList .item .Txt p{
      font-size: 0.75rem;
   }

}




@media (max-width:991px) {
   .topArea::before{
      top: 60%;
      right: -7%;
      width:35%;
      height: 40%;
      opacity: 0.6;
   }

   .bannerArea:before{
      height: 70%;
   }


   .bannerArea .Img .innerImg{
      padding-top: 177%;
   }

   .bannerArea .TxtBox b{
      font-size: 2.2rem;
   }
   
   .bannerArea .TxtBox h2{
      font-size: 1.5rem;
      letter-spacing: 1px;
      margin-top: 0;
   }

   .bannerArea .arrow img{
      width: 13%;
   }

   /* about */
   .aboutArea .Txt h2{
      letter-spacing: 1px;
   }

   .aboutArea .aboutBox{
      padding: 3rem 0;
   }

   .aboutArea .aboutBox .Txt h2{
      margin-bottom: 1.5rem;
   }
   
   .aboutArea .aboutBox .Txt h5{
      font-size: 1.5rem;
      line-height: 1.7;
      margin-top: 3rem;
      margin-bottom: 1.4rem;
   }

   .aboutArea .aboutBox .Txt h3{
      letter-spacing: 1px;
      margin-bottom: 2rem;
   }

   .aboutArea .aboutBox .caseList{
      padding: 0 9%;
   }

   .aboutArea .brandBox .brandList{
      padding-left: 6%;
   }

   .aboutArea .brandBox .brandList:last-child{
      margin-top: 0;
   }

   .aboutArea .brandBox .brandList .item{
      width: 40%;
      margin-bottom: 3rem;
   }

   .aboutArea .brandBox .brandList .item .number{
      margin-right: 0;
      width: 15%;
   }

   .aboutArea .brandBox .brandList .item:nth-child(3) .Txt{
      margin-left: 0;
   }

   .aboutArea .brandBox .brandList:last-child .item:nth-child(3) .Txt {
      margin-left: -8px;
   }
   
   .aboutArea .brandBox .brandList:last-child .item:nth-child(3) .number{
      width: 15%;
   }
   
   .aboutArea .brandBox .brandList .item .Txt{
      width: 70%;
   }

   .aboutArea .brandBox .brandList .item .Txt h5{
      font-size: 1.2rem;
      letter-spacing: 1px;
   }

   .aboutArea .brandBox .brandList .item .Txt p{
      font-size: 0.8rem;
   }

   /* work */
   .workArea{
      padding: 3rem 5%;
   }

   .workArea .title h2{
      padding-left: 0;
      text-align: center;
      margin-bottom: 2rem;
   }

   .workArea .workSlick .slick-track {
      display: flex !important;
      align-items: center;
   }

   .workArea .workSlick .slick-prev {
      left: -5%;
      top: 53%;
   }
   
   .workArea .workSlick .slick-next {
      right: -5%;
      top: 53%;
   }

   .workArea .item {
      padding-top: 0;
      padding-bottom: 2rem;
   }

   .workArea .item::after{
      top: auto;
      bottom: 0;
      z-index: 1;
   }

   .workArea .item .TxtBox{
      display: block;
      padding: 1.5rem 5%;
   }

   .workArea .item .Txt .caseName{
      font-size: 1.5rem;
   }

   .workArea .item .Txt .caseArea{
      font-size: 1rem;
   }

   .workArea .item .Txt .caseInfo{
      margin-top: 1rem;
      margin-bottom: 0;
      font-size: 0.9rem;
   }

   .workArea .item .Txt .btnBox{
      text-align: right;
   }

   .workArea .item .Txt .btn{
      margin-top: 0;
   }

   .workArea .decoTitle{
      top: auto;
      bottom: -2rem;
      right: 1.5rem;
   }

   /* process */

   .processArea{
      padding: 3rem 5%;
      background-image: url(../images/img/home/process-bg-m.jpg);
      background-attachment: scroll;
   }

   .processArea .title{
      display: block;
      text-align: center;
      margin-bottom: 1rem;
   }

   .processArea .title b{
      font-size: 3rem;
      letter-spacing: 2px;
      margin-right: 0;
   }
   
   .processArea .processSlick .slick-prev {
      left: -5%;
   }
   
   .processArea .processSlick .slick-next {
      right: -5%;
   }

   .processArea .processSlick a .item{
      transform: scale(1);
   }

   .processArea .processSlick a:hover .item .caseInfo::after,.processArea .processSlick .slick-current .item .caseInfo:after{
      top: 1.4rem;
   }
   

   .processArea .caseInfo .caseName{
      font-size: 1.5rem;
   }

   .processArea .caseInfo .caseArea{
      font-size: 1rem;
   }

   /* service */
   .serviceArea{
      padding: 3rem 0;
   }

   .serviceArea .title h2{
      font-size: 1.5rem;
      letter-spacing: 1px;
      margin-bottom: 2rem;
   }
   .serviceArea .serviceBox{
      padding: 0 5% 0 3%;
   }
   
   .serviceArea .serviceBox .col::after{
      font-size: 2rem;
      top: 14%;
      left: -8%;
   }
   
   .serviceArea .serviceBox .col:nth-child(3):after,.serviceArea .serviceBox .col:last-child:after{
      color: transparent;
   }

   .serviceArea .serviceBox .icon{
      width: 40%;
      margin: 0 auto 1.5rem auto;
   }
   
   .serviceArea .serviceBox h4{
      font-size: 1rem;
   }
   
   .serviceArea .serviceBox p{
      font-size: 0.8rem;
   }
   
   /* contact */
   .contactArea{
      padding: 3rem 0 4rem 0;
   }

   .contactArea .contactBox .title h2{
      letter-spacing: 2px;
      font-size: 1.5rem;
      margin-bottom: 2rem;
   }

   .contactArea .contactBox h5{
      font-size: 0.85rem;
      font-weight: 400;
   }

   .contactArea .contactBox .lineBtn{
      margin-top: 2rem;
   }
   
   .contactArea .contactBox .lineBtn a{
      padding: 0 1.5rem;
   }
      
   .contactArea .contactBox .lineBtn i{
      font-size: 1.7rem;
      margin-right: 10px;
   }
   
   .contactArea .contactBox .lineBtn span{
      font-size: 1rem;
      letter-spacing: 1px;
   }
   .contactArea .contactBox .info{
      padding: 2rem 0 1rem 0;
      margin-top: 2rem;
   }

   .contactArea .contactBox .info .address:after{
      bottom: -1.5rem;
   }
   
   .contactArea .contactBox .info .address:before{
      bottom: 6rem;
   }
   
   
   .contactArea .contactBox .info .tel a{
      font-size: 1.1rem;
   }
   
   .contactArea .contactBox .info a{
      font-size: 1.1rem;
      letter-spacing: 0.5px;
   }
   
   .contactArea .contactBox .info span{
      font-size: 0.8rem;
      margin-right: 3px;
      min-width: 60px;
   }

   .contactArea .contactBox .info .logo{
      width: 80px;
      margin-right: 5px;
   }
   
}

@media (max-width:767px) {
   .aboutArea .brandBox .brandList .item{
      width: 50%;
   }

   .aboutArea .brandBox .brandList .item .number{
      width: 27%;
   }

   .aboutArea .brandBox .brandList:last-child .item:nth-child(3) .number{
      width: 27%;
   }

   .aboutArea .brandBox .brandList:last-child .item:nth-child(3) .Txt p{
      margin-left: -3px;
   }

   .serviceArea .serviceBox .icon{
      width: 70%;
      margin: 0 auto 1.5rem auto;
   }
   
}