@import url('./font-awesome/css/font-awesome.min.css');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;700;800&display=swap');

@font-face{
   font-family: "Poppins";
   src: url('./font/Poppins/Poppins-Light.ttf') format("truetype");
   font-weight: 300;
};
@font-face{
   font-family: "Poppins";
   src: url('./font/Poppins/Poppins-Regular.ttf') format("truetype");
   font-weight: 400;
};
@font-face{
   font-family: "Poppins";
   src: url("./font/Poppins/Poppins-Medium.ttf") format("truetype");
   font-weight: 500;
};
@font-face{
   font-family: "Poppins";
   src: url("./font/Poppins/Poppins-SemiBold.ttf") format("truetype");
   font-weight: 600;
};
@font-face{
   font-family: "Poppins", sans-serif;
   font-weight: 700;
   src: url("./font/Poppins/Poppins-Bold.ttf") format("truetype"),
};
@font-face{
   font-family: "Poppins",sans-serif;
   font-weight:800;
   src: url("./font/Poppins/Poppins-ExtraBold.ttf") format("truetype");
};
*{
   margin:0;
   padding:0;
   box-sizing:border-box;
   text-decoration:none;

   list-style:none;
   font-family: "Poppins", sans-serif;
   font-weight: 300;
}
a:hover{
   text-decoration:none;
}
:root{
   --green-main: #0F808C;
   --green-light: #0F8895;
   --dark-blue: #1A2948;
   --blur-dark-blue: rgba(26,41,72,0.5);
   --white: #FFFFFF;
   --gray-text: #A3AAB3;
   --gray-border: #D4D8E1;
   --bg-gray:#E9ECF0;
   --light-blue: #0D8996;
}

h1, h2, h3, h4, h5, h6, p, div, ul, ol, li, label, table{
   margin:0;
   padding:0;
   font-family: "Poppins", sans-serif;
   font-weight: 300;
}
b, strong{
   font-weight: 700;
}
table{
   width: 100%;
   table-layout: fixed
}
button{
   border:0;
   outline: none;
}
html,body{
   overflow-y:unset !important;
   overflow-x: hidden;
}
body{
   font-family: "Poppins", sans-serif;
   font-weight: 300;
   color: var(--dark-blue);
   max-width: 100%;
}
input{
   outline: none;
}
.text-green{
   color: var(--green-main)
}
.text-weight-bold{
   font-weight: 700;
}
.each-row{
   padding-top: 100px;
   padding-bottom: 100px;
}
.background-gray{
   background-color: #E9ECF0;
}
.first-section{
   padding-top: 100px;
   padding-bottom: 100px;
   position: relative;
}
.first-section::before{
   width: 80px;
   height: 80px;
   background-color: var(--green-main);
   position: absolute;

   top: 0;
   right:0;
   content: '';
   transform: translateY(-50%);
}
@media screen  and (max-width: 595px) {
   .first-section::before{
      display: none;
   }
}
#page{
   width:100%;
}
#page__header{
   width:100%;
}
#page__body{
   width:100%;
}
#header__top{
   width: 100%;
   height: 36px;
   background-color: var(--green-main);
   position: relative;
   display: flex;
   align-items: center;
}
#header__top .left-color{
   position: absolute;
   left: 0;
   top: 0;
   width: 50%;
   height:36px;
   background-color: var(--dark-blue);
}
#header__top .select-wrapper{
   display:inline;
   align-items: center;
   float: right;
   position: relative;
   width:180px;
   height:24px;
}
#header__top .select-wrapper img{
   position: absolute;
   left:5px;
   top:50%;
   width:17px;
   height:17px;
   z-index: 2;
   transform: translateY(-50%);
}
#header__top .select-wrapper .down-arrow{
   position: absolute;
   right:5px;
   top:50%;
   z-index: 2;

   transform: translateY(-50%);
   font-size: 18px;
   display:flex;
   color: var(--dark-blue);
}
#header__top .select-container{
   padding-left: 27px;
   position: relative;
   display:flex;
   font-weight: 300;

   width: 100%;
   height:100%;
   font-size:11px;
   color:var(--dark-blue);

   outline: none;
   -webkit-appearance: none;
   background-color:rgba(255,255,255,.5);
   border:0;
}
#header__menu, #page__header-mobile{
   background: #FFFFFF;
   box-shadow: 0 10px 25px 0 rgba(0,0,0,0.11);
   width: 100%;
   transition: all 0.25s linear;

   position: relative;
   z-index: 99;
}
#header__menu.start-fixed{
  opacity: 0;
  visibility: hidden;
}
#header__menu.start-fixed.fixed,#page__header-mobile.fixed,#page__header-mobile.fixed-clicked{
   position: fixed;
   top: 0;
   left: 0;
   z-index: 99;
   /* transform: translateY(-100%); */
   /* animation: slide-down-navigation 0.5s; */
}
#header__menu.start-fixed.fixed.fixed-up{
   opacity: 1;
   visibility: visible;
   transform: translateY(0);
 }
body.admin-bar #header__menu.fixed,
body.admin-bar #page__header-mobile.fixed,
body.admin-bar #page__header-mobile.fixed-clicked {
   /* top: 32px; */
}
#header__menu--background{
   width: 100%;
   display: none;
}
#page__header-mobile.fixed-clicked{
   animation: none;
}
@-webkit-keyframes slide-down-navigation{
   0% {
      opacity: 0;
      -webkit-transform: translateY(-100%);
              transform: translateY(-100%);
      }
   100% {
      opacity: 1;
      -webkit-transform: translateY(0);
               transform: translateY(0);
      }
}
@keyframes slide-down-navigation{
   0% {
      opacity: 0;
      -webkit-transform: translateY(-100%);
              transform: translateY(-100%);
      }
   100% {
      opacity: 1;
      -webkit-transform: translateY(0);
               transform: translateY(0);
      }
}
#menu__masthead{
   padding: 15px 0;
   display: flex;
   align-items: center;
   justify-content: space-between;
}
#menu__masthead .search-side,#page__navigation-mobile .search-side{
   width: 380px;
   height: 32px;
   position:relative;
   background-color: #EBEDF0;
   display:flex;
}
#page__navigation-mobile .search-side{
   width: 300px;
   margin: 0 auto 30px;
}
#menu__masthead .search-side .search-type::placeholder{
   color: var(--dark-blue);
}
#menu__masthead .search-side .search-type:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color: red;
  }

#menu__masthead .search-side .search-type::-ms-input-placeholder { /* Microsoft Edge */
color: red;
}
#menu__masthead .search-side .search-type, #page__navigation-mobile .search-type{
   border: 0;
   outline: none;
   text-decoration: none !important;
   height:100%;
   width:100%;
   background-color:transparent;
   font-size: 12px;
   line-height:32px;

   color: var(--dark-blue);
   padding-left: 20px;
}
#menu__masthead .search-side .search-type::placeholder, #page__navigation-mobile .search-side .search-type::placeholder{
   color: var(--dark-blue);
   opacity:1;
}
#menu__masthead .search-button, #page__navigation-mobile .search-button{
  width:30px;
  height:100%;
  border: 0;
  background-color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
}
#menu__masthead .search-button img, #page__navigation-mobile .search-button img{
  width: 12px;
  height: 13px;
}
#menu__masthead .logo{
   width: 160px;
   height: 55px;
   cursor: pointer;
}
#menu__masthead .logo img{
   width: 100%;
   height: 100%;
}
#menu__masthead .social-item:not(:last-child){
   margin-right: 5px;
   height:33px;
   width:33px;
}
#menu__masthead .social-item img{
   width: 33px;
   height: 33px;
}
#menu__navigation .first-container{
   display: flex;
   flex-wrap: wrap;
}
#menu__navigation .first-item{
   position: relative;
   display:inline-block;
}
#menu__navigation .first-link{
   padding:30px 20px;
   color: var(--dark-blue);
   font-size: 18px;
   cursor: pointer;

   display:block;
   font-weight: 700;
}
#menu__navigation .first-link.first{
   padding-left:0;
}
#menu__navigation .second-container{
   position: absolute;
   left: 50%;
   top: 100%;
   transform: translateX(-50%);

   background-color: #FFFFFF;
   padding: 8px 0;
   width: 252px;
   box-shadow: 0 -1px 25px 0 rgba(0,0,0,0.11), 0 10px 25px 0 rgba(0,0,0,0.11);

   border-radius: 3px;
   display: none;
   z-index: 2;
   list-style: none;
}
#menu__navigation .second-container::before{
   position: absolute;
   top: 0;
   left: 50%;
   transform: translate(-50%,-100%);

   width: 0;
	height: 0;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;

	border-bottom: 15px solid var(--white);
   z-index:90;
   content:'';
}
#menu__navigation .second-link{
   display:block;
   padding:20px;
   font-size: 18px;
   font-weight: 700;

   cursor: pointer;
   display:block;
   color: var(--dark-blue);
   text-align: center;

}
#menu__navigation .second-link:hover{
   background-color: var(--green-main);
   color: var(--white);
}
#menu__navigation .first-item:hover .second-container{
   display: block;
}
#page__header-mobile{
   height: 120px;
   width: 100%;
   display:flex;
   justify-content: space-between;

   align-items: center;
   padding:25px 30px 25px 20px;
   background-color: var(--white);
   display: none;
}
#page__header-mobile .logo{
   height: 100%;
}
#page__header-mobile .logo img{
   height: 100%;
}
#page__header-mobile .hamburger{
   color: var(--green-main);
   font-size: 30px;
   cursor: pointer;
}
#page__header-mobile .hamburger-icon{
   width: 40px;
   height: 5px;
   background-color: var(--green-main);
   border-radius: 50px;

   position: relative;
   transition: all 0.25s linear;
}
#page__header-mobile .hamburger-icon.show{
   background-color: var(--white);
}
#page__header-mobile .hamburger-icon::before,#page__header-mobile .hamburger-icon::after{
   width: 40px;
   height: 5px;
   background-color: var(--green-main);
   border-radius: 50px;

   position: absolute;
   left: 0;
   content: '';
   transition: all 0.25s linear;
}
#page__header-mobile .hamburger-icon.show::before{
   top: 0;
   transform: rotate(45deg);
}
#page__header-mobile .hamburger-icon.show::after{
   transform: rotate(-45deg);
   bottom: 0;
}
#page__header-mobile .hamburger-icon::before{
   top: -10px;
}
#page__header-mobile .hamburger-icon::after{
   bottom: -10px;
}
#page__navigation-mobile{
   position: fixed;
   left: 100%;
   top: 120px;
   width: 100%;

   min-height: 100vh;
   height: 100%;
   z-index: 999;
   background-color: var(--green-main);
   padding: 50px 0px;

   opacity: 0;
   transition: opacity 0.3s linear,left 0.3s linear, top 0.25s linear;
   display: none;
   overflow: scroll;
}
#page__navigation-mobile.show{
   left: 0;
   opacity: 1;
   width: 100vw;
}
#page__navigation-mobile::before{
   position:absolute;
   right: 40px;
   top: 0px;
   content: '';

   width: 0;
   height: 0;
   border-left: 16px solid transparent;
	border-right: 16px solid transparent;

	border-bottom: 20px solid var(--green-main);
   transform:  translate(20%,-100%);
}
#page__navigation-mobile .select-country-wrapper{
   float: none;
   margin: 0 auto 30px;
}
#page__navigation-mobile .select-country-wrapper{
   align-items: center;
   position: relative;
   width:180px;
   height:24px;
}
#page__navigation-mobile .select-country-wrapper img{
   position: absolute;
   left:5px;
   top:50%;
   width:17px;

   height:17px;
   z-index: 2;
   transform: translateY(-50%);
}
#page__navigation-mobile .select-country-wrapper .down-arrow{
   position: absolute;
   right:5px;
   top:50%;
   z-index: 2;
   transform: translateY(-50%);
   font-size: 18px;
   display:flex;
   color: var(--dark-blue);
}
#page__navigation-mobile .select-country-wrapper .select-container{
   padding-left: 27px;
   position: relative;
   display:flex;
   font-weight: 300;
   width: 100%;
   height:100%;
   font-size:11px;
   color:var(--dark-blue);
   outline: none;
   -webkit-appearance: none;
   background-color:rgba(255,255,255,.5);
   border:0;
}
#page__navigation-mobile .social-side{
   text-align: center;
   margin: 0 auto 40px;
}
#page__navigation-mobile .social-item:not(:last-child){
   margin-right: 10px;
}
#page__navigation-mobile .social-item img{
   width: 40px;
   height: 40px;

}
#page__navigation-mobile .menu-side{
   margin: 0 auto;
   text-align: center;
   list-style: none;
}
#page__navigation-mobile .menu-side ul{
   list-style: none;
}
/* #page__navigation-mobile .menu-side li{
   padding: 20px 0;
} */
#page__navigation-mobile .menu-side a{
   font-size: 24px;
   color: var(--white);
   font-weight: 700;
   display: block;

   padding: 20px 0;
   position: relative;
}
#page__navigation-mobile .first-item{
   position: relative;
}
#page__navigation-mobile .first-item .menu-signal{
   position: absolute;
   right: 50%;
   top: 50%;
   content: '';
   transform: translate(150px,-50%) rotate(0);
   transition: transform 0.4s linear;
}
#page__navigation-mobile .first-item .menu-signal.clicked{
   transform: translate(150px,-50%) rotate(180deg);
}
#page__navigation-mobile .menu-side .second-container{
   background-color: var(--dark-blue);
   /* margin-top: 20px; */
}
#page__navigation-mobile .menu-side .second-container .menu-item{
   max-height: 0px;
   opacity: 0;
   visibility: hidden;
   transition: all 0.4s linear;
   display: block;
}
#page__navigation-mobile .menu-side .second-container.show .menu-item{
   max-height: 100px;
   opacity: 1;
   visibility: visible;
}
#page__navigation-mobile .menu-side .second-container .menu-item a{
   max-height: 0px;
   opacity: 0;
   visibility: hidden;
   transition: all 0.4s linear;
   display: block;
}
#page__navigation-mobile .menu-side .second-container.show .menu-item a{
   max-height: 100px;
   opacity: 1;
   visibility: visible;
}
/* Page Body */
#page__body{
   width:100%;
}
#body__head-image{
   width:100%;
   position: relative;
}
#body__head-image .image-background{
   width:100%;
   height:auto;
}
#body__head-image .title-container{
   position:absolute;
   width:100%;
   bottom: 50px;
   left: 0;
   padding-left: 20px;
}
#body__head-image .title{
   max-width: 1180px;
   width:100%;
   margin: 0 auto;
   color: var(--white);
   text-transform: none;
   font-size: 43px;
   font-weight:bold;
   position:relative;
}
#body__head-image .title-container.homepage .title::before{
   position: absolute;
   top: 45px;
   left: -125px;
   width: 100px;

   height: 2px;
   content:'';
   background-color: var(--white);
}
#body__head-image .title-container.homepage .title{
   font-size: 28px;
   font-weight:600;
}
#body__head-image .title-container.homepage .special-text{
   font-size: 48px;
   color: var(--dark-blue);
   font-weight: 700;
}
#body__head-image .extra-box{
    position: absolute;
    height: 80px;
    bottom: -40px;
    left: 0;
    width: 100%;
}
#body__head-image .extra-box .box{
  width: 80px;
  height: 80px;
  background-color: var(--green-light);
  margin-left: auto;
}
@media screen and (max-width:1200px) {
   #body__head-image .title{
      font-size: 36px;
   }
}
@media screen and (max-width:595px) {
   #header__top .select-wrapper{
      width:160px;
   }
   #body__head-image .title{
      font-size: 24px;
   }
   #body__head-image .title-container.homepage .special-text{
      font-size: 36px;
   }
}
.homepage__introduce .introduce__container{
   position: relative;
   padding: 100px 15px 100px;
   font-size: 30px;
   line-height: 66px;

   color: var(--dark-blue);
}
.homepage__introduce .introduce__container::before{
   position: absolute;
   width: 60px;
   height: 60px;
   content: '';

   background-color: var(--green-main);
   right:0;
   top: -30px;
}
.homepage__introduce .introduce__container::after{
   position: absolute;
   width: 60px;
   height: 60px;
   content: '';

   background-color: var(--dark-blue);
   left:0;
   bottom: -30px;
   z-index:3;
}
.homepage__introduce .introduce__row-container{
   display:flex;
   align-items: center;
   width:100%;
}
.homepage__introduce .introduce__row-container.right{
   justify-content: flex-end;
   margin-bottom: 80px;
}
.homepage__introduce .introduce__row-container.left{
   justify-content: flex-start;
   margin-bottom: 80px;
}
.homepage__introduce .introduce__row-container.center{
   display: block;
   text-align: center;
   margin-bottom: 80px;
}
.homepage__introduce .introduce__row-container .image-text{
   width:192px;
}
.homepage__introduce .introduce__row-container.right .image-container{
   margin-left: 80px;
   position: relative;
}
.homepage__introduce .introduce__row-container.right .text-side{
   text-align: right;
}
.homepage__introduce .introduce__row-container.left .image-container{
   margin-right: 80px;
   position: relative;
}
.homepage__introduce .introduce__row-container.left .text-side{
   text-align: left;
}
.homepage__introduce .introduce__row-container.center .text-side{
   text-align: center;
}
.homepage__introduce .introduce__row-container.center .image-container{
   position: relative;
   width: fit-content;
   margin: 30px auto 0;
}
.homepage__introduce .image-container.first img{
   width:100%;
   max-width: 520px;
   position: relative;
   z-index: 10;
}
.homepage__introduce .image-container.first .background-color{
   width: 100%;
   height: 100%;
   position: absolute;
   top: 15px;

   left: 15px;
   content: '';
   border-radius: 10px;
   background-color: var(--green-main);

   z-index: 8;
}
.homepage__introduce .image-container.first .background-color::before{
   position: absolute;
   width: 100%;
   height: 100%;
   content:'';

   right: 12px;
   bottom: 12px;
   background-color: var(--white);
   z-index: 9;
}
.homepage__introduce .image-container.second img{
   width:100%;
   max-width: 720px;
   position: relative;
   z-index: 10;
}
.homepage__introduce .image-container.second .background-color{
   width: 100%;
   height: 100%;
   position: absolute;
   top: 15px;

   left: 15px;
   content: '';
   border-radius: 15px;
   background-color: var(--dark-blue);

   z-index: 8;
}
.homepage__introduce .image-container.second .background-color::before{
   position: absolute;
   width: 100%;
   height: 100%;
   content:'';

   right: 15px;
   bottom: 15px;
   background-color: var(--white);
   z-index: 9;
}
.homepage__introduce .image-container.third img{
   width:100%;
   max-width: 1020px;
   position: relative;
   z-index: 10;
}
.homepage__introduce .image-container.third .background-color{
   width: calc( 100% + 28px ) ;
   height: 100%;
   position: absolute;
   bottom: 14px;

   left: -14px;
   content: '';
   border-radius: 10px;
   background-color: var(--green-main);

   z-index: 8;
}
.homepage__introduce .image-container.third .background-color::before{
   position: absolute;
   width: calc( 100% - 20px) ;
   height: 100%;
   content:'';

   top: 10px;
   left: 10px;
   background-color: var(--white);
   z-index: 9;
}
.homepage__introduce .image-container.fourth img{
   width:100%;
   max-width: 700px;
   position: relative;
   z-index: 10;
}
.homepage__introduce .image-container.fourth .background-color{
   width: 100%;
   height: 100%;
   position: absolute;
   bottom: 15px;

   right: 15px;
   content: '';
   border-radius: 10px;
   background-color: var(--dark-blue);

   z-index: 8;
}
.homepage__introduce .image-container.fourth .background-color::before{
   position: absolute;
   width: 100%;
   height: 100%;
   content:'';

   top: 12px;
   left: 12px;
   background-color: var(--white);
   z-index: 9;
}
@media  screen and (max-width: 1024px) {
   .homepage__introduce .introduce__container{
      font-size: 24px;
      line-height: 48px;
   }
   .homepage__introduce .introduce__row-container.right{
      margin-bottom: 50px;
   }
   .homepage__introduce .introduce__row-container.left{
      margin-bottom: 50px;
   }
   .homepage__introduce .introduce__row-container.center{
      margin-bottom: 50px;
   }
   .homepage__introduce .image-container.first img{
      max-width: 420px;
   }
   .homepage__introduce .image-container.second img{
      max-width: 580px;
   }
   .homepage__introduce .introduce__row-container.left .image-container{
      margin-right: 50px;
   }
   .homepage__introduce .introduce__row-container.right .image-container{
      margin-left: 50px;
   }
}
@media screen and (max-width: 992px){
   .homepage__introduce .introduce__row-container{
      display: block;
   }
   .homepage__introduce .introduce__row-container.left .image-container{
      margin: 0 0 50px;
      text-align: right;
   }
   .homepage__introduce .introduce__row-container.right .image-container{
      margin: 0 0 50px;
      text-align: left;
   }
   .homepage__introduce .introduce__row-container.right .text-side{
      margin-bottom: 50px;
   }
}
@media screen and (max-width: 768px){
   .homepage__introduce .introduce__row-container.left .text-side{
      width: 100%;
   }
   .homepage__introduce .introduce__row-container.left{
      display: flex;
      flex-direction: column-reverse;
   }
   .homepage__introduce .introduce__row-container.right .text-side{
      margin-bottom: 30px;
   }
   .homepage__introduce .introduce__row-container.right .image-container{
      margin: 0 0 30px;
   }
   .homepage__introduce .introduce__row-container .text-side{
      margin-bottom: 30px;
   }
   .homepage__introduce .introduce__row-container.left{
      margin-bottom: 0px;
   }
}
@media screen and (max-width: 595px) {
   .homepage__introduce .introduce__container{
      padding: 60px 15px 0px;
   }
   .homepage__introduce .introduce__row-container{
      padding: 0 15px;
   }
   .homepage__introduce .introduce__container::before{
      right: 15px;
   }
   .homepage__introduce .introduce__container::after{
      left: 15px;
   }
}
.homepage__approach{
   width:100%;
   padding:100px 0;
   background-color: var(--green-main);
}
.homepage__approach .approach-container{
   width:100%;
   max-width: 840px;
   margin:0 auto;
   background-color: var(--green-main);

   text-align: center;
   color: var(--white);
   font-size: 24px;
   font-family: "Poppins";

   font-weight: 300;
   padding: 15px;
}
.homepage__approach .title{
   font-family: "Poppins";
   font-size: 40px;
   font-weight: 700;
   margin-bottom: 20px;
}

.homepage__type{
   width: 100%;
   display:flex;
   font-weight: 300;
}
.homepage__type .type__item{
   width: 50%;
   height: 600px;
   position: relative;
   overflow: hidden;
}

.homepage__type .type__item::before{
   width: 100%;
   height: 100%;
   position: absolute;
   content: '';

   left: 0;
   top: 0;
   background-color: rgba(0, 0, 0, 0.5);
   opacity: 1;

   transition: opacity 0.25s linear;
   z-index: 9;
}
.homepage__type .type__item.hovered::before{
   opacity: 0;
}
.homepage__type .type__item.hovered::after{
   width: 0;
   height: 0;
   border-left: 30px solid transparent;
   border-right: 30px solid transparent;

   border-bottom: 40px solid var(--white);
   position: absolute;
   bottom: 0;
   left: 50%;

   transform: translateX(-50%);
   content: '';
   animation: change-arrow-type .5s;
   -webkit-animation: change-arrow-type .5s;
   z-index: 10;
}
.homepage__type .type__item.hovered .type__image{
   transform: scale(1.1);
}
@keyframes change-arrow-type{
   0%{
      opacity:0;
   }
   100%{
      opacity:1;
   }
}
@-webkit-keyframes change-arrow-type{
   0%{
      opacity:0;
   }
   100%{
      opacity:1;
   }
}
.homepage__type .type__image{
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.25s linear;

   position: relative;
   z-index: 8;
}
.homepage__type .type__button-container{
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%,-50%);

   text-align: center;
   width: 100%;
   z-index: 10;
}
.homepage__type .type__button-container .title{
   font-size: 40px;
   line-height: 48px;
   padding: 10px 40px;
   display: flex;

   justify-content: center;
   align-items: center;
   width: 100%;
   max-width: 450px;

   background-color: rgba(15,128,140,0.5);
   color: var(--white);
   border-radius: 5px;
   margin:0 auto 80px;

   font-weight: 700;
}
.homepage__type .type__button-container .title.gray{
   background-color: rgba(26,41,72,0.5);
}
.homepage__type .type__button-container .type__button{
   width: 280px;
   background-color: var(--white);
   height: 48px;
   color:  #0F808C;

   border: 0;
   outline: none;
   border-radius:100px;

   font-weight: 700;
}
.homepage__type .type__button-container .type__button.gray{
   color: var(--dark-blue);
}
.homepage__type .type__content{
   padding: 50px 15px;
   font-size:18px;
   line-height: 30px;
   display: none;

   position: relative;
}
.homepage__type .type__content::before{
   width: 0;
   height: 0;
   border-left: 30px solid transparent;
   border-right: 30px solid transparent;

   border-bottom: 40px solid var(--white);
   position: absolute;
   top: 0;
   left: 50%;

   transform: translate(-50%,-100%);
   content: '';
}
.homepage__type .type__content .title{
   font-size: 40px;
   line-height:60px;
   margin-bottom: 20px;
}
.homepage__type .type__content .choose__button{
   margin: 30px auto 0;
}
@media screen and (max-width: 1024px){
   /* .homepage__type .type__item{
      height: auto;
   } */
}
@media screen and (max-width: 768px){
   .homepage__type{
      display: block;
   }
   .homepage__type .type__item{
      width: 100%;
   }
   .homepage__type .type__content{
      display: block;
   }
   .homepage__type .type__button-container .title{
      font-size: 32px;
      line-height: 40px;
      max-width: 400px;
   }
}
.homepage__choose{
   /* padding: 100px 0; */
   width: 100%;
   background-color: white;
   font-size: 18px;

   line-height: 30px;
   color: var(--dark-blue);
   font-weight: 300;
}
.homepage__choose .choose__item{
   width: 100%;
   background-color: white;
   align-items: center;
   padding:50px 100px;

   display: none;
}
.homepage__choose .choose__item.chosen{
   display:flex;
   animation: slide-up-chosen 0.5s;
   -webkit-animation: slide-up-chosen 0.4s;
}
@keyframes slide-up-chosen{
   0%{
      transform: translateY(50%);
   }
   100%{
      transform: translateY(0);
   }
}
@-webkit-keyframes slide-up-chose{
   0%{
      transform: translateY(50%);
   }
   100%{
      transform: translateY(0);
   }
}
.homepage__choose .choose__item .title{
   font-size: 40px;
   line-height:60px;
   margin-bottom: 20px;
   font-weight:700;
}
.homepage__choose .choose__item .content-container{
   padding: 30px 60px 0 0;
   position: relative;
}
.homepage__choose .choose__item .content-container::before{
   position: absolute;
   top: 0;
   left: 0;
   width: 200px;

   height:2px;
   background-color: var(--dark-blue);
   content:'';
}
.homepage__choose .choose__item .content-container .content .text-special-green{
  font-weight: 700;
  color: var(--green-main);
  font-size: 24px;
}
.homepage__choose .choose__button,.homepage__type .type__content .choose__button{
   min-width: 380px;
   height: 48px;
   background-color: var(--green-main);
   display: flex;

   justify-content: center;
   align-items: center;
   color: var(--white);
   border-radius: 100px;

   font-size: 20px;
   font-weight: 700;
}
@media screen and (max-width: 992px){
   .homepage__choose .choose__item{
      padding: 50px 50px;
   }
   .homepage__choose .choose__item .content-container{
      padding: 30px 30px 0 0;
   }
   .homepage__choose .choose__button{
      min-width: 300px;
   }
}
@media screen and (max-width: 768px){
   .homepage__choose{
      display: none;
   }
}
.homepage__see{
   width: 100%;
   background-color: var(--dark-blue);
}
.homepage__see .content{
   padding: 100px 0;
   color: var(--white);
   text-align: center;
   font-size: 36px;

   font-weight: 700;
}
.homepage__see .see-logo{
   max-width: 400px;
   width: 100%;
   height: auto;
   position: absolute;

   right: 0;
   bottom:0;
}
.homepage__see .see-logo img{
   width: 100%;
   height: 100%
}
@media screen and (max-width: 768px){
   .homepage__see .see-logo{
      max-width: 500px;
   }
}
.homepage__snapshot{
   width:100%;
   padding: 100px 0;
   background-size: 100% 100%;
   text-align: center;

   font-size: 28px;
   color: var(--white);
   font-weight: 300;
}
.homepage__snapshot p{
   font-weight: 700;
}
.homepage__snapshot .image-phone{
   width:100%;
   max-width: 980px;
   height: auto;
}
/* Product */
.product .product__background{
   position: absolute;
   left: 0;
   top: 400px;
   width:100%;

   max-width: 1300px;
}
.product .product__background img{
   width: 100%;
   height: auto;
}
.product__info{
   margin-bottom: 100px;
}
.product__info .info-image-wrapper{
   position: relative;
   width:100%;
   /* padding-right:60px; */
   height: auto;
}
.product__info .info-image-container{
   width: 100%;
   position: relative;
}
.product__info .info-image-container img{
   width:100%;
   height: auto;
}
.product__info .info-image-container .view-text,
.product__info .info-image-wrapper .view-text {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   text-align:center;
   padding: 10px;
   color: var(--white);
   background-color: var(--dark-blue);
   font-weight: 700;
}
.product__info .product__introduce{
   font-size: 20px;
   line-height: 24px;
}
.product__info .product__introduce .name{
   font-size: 24px;
   line-height: 30px;
   font-weight: 700;
   margin-bottom: 10px;
}
.product__info .product__introduce .collection{
   margin-bottom: 25px;
   text-transform: none;
}
.product__info .product__introduce .content{
   margin-bottom: 60px;
}
.product__info .product__introduce .get-in-touch-button{
   width: 280px;
   height: 48px;
   display:flex;
   justify-content: center;

   align-items:center;
   color: var(--white);
   background-color:var(--green-main);
   border-radius:50px;

   font-weight: 700;
}
.product__specification{
   width: 100%;
   margin-bottom: 100px;
   padding: 40px 20px;
   box-shadow: 2px 2px 9px 3px #00000040;
}

.product__specification.mobile{
   display:none;
}
.product__specification table, .product__specification td, .product__specification tr{
   border: 2px solid var(--white);
   border-collapse: collapse;
}
.product__specification .t-row td:first-child,.product__specification .t-row td:nth-child(3){
   background-color: var(--dark-blue);
   color:var(--white);
   padding:10px 20px;
   font-weight:500;

   text-transform: uppercase;
   text-align: center;
}
.product__specification .t-row td:nth-child(2),.product__specification .t-row td:nth-child(4){
   background-color: #E5E7EA;
   color: var(--dark-blue);
   padding:0 20px;
   text-align: center;
}
.product__specification .t-row td{
   width: 25%;
   height: 60px;
   word-break: break-word;
}
@media  screen and (max-width:992px) {
    .product__specification{
      padding: 30px 15px;
    }
   .product__info .info-image-container{
      padding-right: 0;
      margin-bottom: 30px;;
   }
   .product__info .info-image-container .view-text{
      width: 100%;
   }
   .product__info .product__introduce .name,.product__info .product__introduce .collection{
      text-align: center;
   }
   .product__info .product__introduce .get-in-touch-button{
      margin: 0 auto;
   }
}
@media screen and (max-width:768px) {
   .product__specification{
      display: none;
   }
   .product__specification.mobile{
      display: block;
   }
   .product__specification .t-row td{
      width: 50%;
   }
}
/* Collection-detail */
.collection-detail{
   font-family: "Poppins";
   position:relative;
}
.collection-detail__background{
   position: absolute;
   top: 200px;
   left: 0;
   width: 860px;

   height: auto;
}
.collection-detail__background img{
   width: 100%;
}
.collection-detail .production-name{
   font-size: 47px;
   line-height: 55px;
   font-weight: 700;
}
.collection-detail .collection-text{
   font-size: 23px;
   line-height: 30px;
}
.collection-detail .production-description{
   font-size: 18px;
   line-height: 30px;
}
.collection-detail .title-side{
  display: flex;
  flex-direction: column;
}
.collection-detail .title-side.reverse{
  flex-direction: column-reverse;
}
.collection-detail .left{
   padding-right: 60px;
   display: flex;
   flex-direction: column;
   gap: 30px;
}
.collection-detail .production-table{
   width:100%;
}
.collection-detail .production-table tr{
   border-bottom: 1px solid #000000;
   width:100%;
}
.collection-detail .production-table .production-criteria{
   font-weight: 700;
   padding:15px;
   width: 45%;
   font-size: 18px;
}
.collection-detail .production-table .production-value{
   padding: 15px;
   display: flex;
   flex-wrap: wrap;
   font-size: 18px;

   word-break: break-word;
}
@media screen and (max-width: 768px){
   .collection-detail .production-description{
      margin-bottom: 30px;;
   }
}
/* Color side */
.product__color .title{
   font-size: 40px;
   font-weight: 700;
   text-align: center;
   margin-bottom: 100px;

   text-transform: uppercase;
}
.product__color .color__container{
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   column-gap: 40px;
   row-gap: 40px;
}
.product__color .color__item{
   width: 100%;
   height:240px;
   background-size: 100% 100%;
   background-position: center center;

   display: flex;
   justify-content: center;
   align-items: center;
   cursor: pointer;

   transition: transform 0.25s linear;
   flex-direction: column;
}
.product__color .color__item:last-child:nth-child(3n + 1){
  grid-column: 2 / span 1;
}
.product__color .color__item:hover{
   transform :scale(1.1);
}
.product__color .color__name{
   color: var(--white);
   font-size: 24px;
}
@media  screen and (max-width:992px) {
   .product__color .color__container{
      grid-template-columns: 1fr 1fr;
   }
   .product__color .color__container > *:last-child:nth-child(2n+1) {
    grid-column: 1;
  }
}
@media  screen and (max-width:768px) {
   .product__color .color__container{
      grid-template-columns: 1fr;
   }
   .product__color .color__item{
      height:300px;
   }
   .product__color .color__item:hover{
      transform :scale(1);
   }
   .product__color .title{
      margin-bottom: 60px;
   }
}
/* other-collection side */
.product__others-collection .title{
   color: var(--green-main);
   font-size: 40px;
   font-weight: 700;
   text-align:center;

   margin-bottom: 100px;
   text-transform: uppercase;
}
.others-collection__container{
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   column-gap: 40px;
   row-gap: 40px;
}
.others-collection__container.two-items{
   display: grid;
   grid-template-columns: 1fr 1fr;
   column-gap: 100px;
   row-gap: 100px;
}
.others-collection__container.one-item{
  grid-template-columns: 1fr;
  display: flex;
  justify-content: center;
}
.others-collection__item{
   height: 340px;
   width: 100%;
   overflow: hidden;
   border-radius: 5px;

   box-shadow: 0 10px 25px 0 rgba(0,0,0,0.11);
   background: #FFFFFF;
}
.others-collection__item.one-item{
  width: 100%;
  max-width: 464px;
}
.others-collection__item:hover .head-image{
   margin-top:-200px;
}
/* .others-collection__item:hover .name{
   border-top: 5px solid var(--dark-blue)
} */
.others-collection__item .head-image{
   width: 100%;
   height: 284px;
   transition: margin-top 0.25s linear;
   object-fit: cover;
}
.hybrid-collections .others-collection__item .head-image {
  height: 395px !important;
}
.spc-pdp .others-collection__item,
.lvt-pdp .others-collection__item,
.spc-plp .others-collection__item,
.lvt-plp .others-collection__item,
.page-lvt .others-collection__item,
.page-spc .others-collection__item {
  height: 404px;
}
.spc-pdp .others-collection__item .head-image,
.lvt-pdp .others-collection__item .head-image,
.spc-plp .others-collection__item .head-image,
.lvt-plp .others-collection__item .head-image,
.page-lvt .others-collection__item .head-image,
.page-spc .others-collection__item .head-image {
  width: 100%;
  height: 335px !important;
}
.spc-pdp .others-collection__item:hover .head-image,
.lvt-pdp .others-collection__item:hover .head-image,
.spc-plp .others-collection__item:hover .head-image,
.lvt-plp .others-collection__item:hover .head-image,
.page-lvt .others-collection__item:hover .head-image,
.page-spc .others-collection__item:hover .head-image {
  margin-top: -210px;
}
.others-collection__item .product-type-label{
  padding: 10px 0;
  border-top: 5px solid var(--dark-blue);
}
.others-collection__item .product-type-label .text-inside{
  color: white;
  padding: 5px 10px;
  width: fit-content;
  border-radius: 40px;

  margin: 0 auto;
  font-size: 18px;
  position: relative;
  text-transform: uppercase
}
.others-collection__item .product-type-label .text-inside.blue{
  background-color: var(--dark-blue);
}
.others-collection__item .product-type-label .text-inside.green{
  background-color: var(--green-light);
}
.others-collection__item .product-type-label .text-inside.light-blue{
  background-color: var(--light-blue);
}
.others-collection__item .name{
   width: 100%;
   /* height: 80px; */
   color: var(--dark-blue);
   font-size: 20px;

   line-height: 28px;
   font-weight: 700;
   text-transform: uppercase;
   display:flex;

   justify-content: center;
   align-items: center;
   padding: 0 20px;
   text-align: center;

   transition: border-top 0.25s linear;
}
.hybrid-collections .others-collection__item .name{
  margin-top: 10px;
}
.others-collection__item .specification-container{
   text-align: center;
   height: 200px;
}
.others-collection__item .specification{
   text-align: center;
   font-size: 16px;
   line-height: 24px;
}
.others-collection__item .direction-button{
   width: 50px;
   height: 50px;
   color: var(--white);
   background-color: var(--green-main);

   display: block;
   font-size: 25px;
   border-radius: 50%;
   display:flex;

   justify-content: center;
   align-items: center;
   margin: 10px auto 0;
}
.others-collection__item.two-items{
   height: 440px;
}
.others-collection__item.two-items:hover .head-image{
   margin-top:-250px;
}
.hybrid-collections .others-collection__item.two-items:hover .head-image{
  margin-top: -250px !important;
}
.others-collection__item.two-items .head-image{
   height: 346px;
   object-fit: cover;
}
.others-collection__item.two-items .specification-container{
   text-align: center;
   height: 250px;
}
.others-collection__item.two-items .specification{
   text-align: center;
   font-size: 16px;
   line-height: 32px;
}
.spc-pdp .others-collection__item.two-items,
.lvt-pdp .others-collection__item.two-items,
.spc-plp .others-collection__item.two-items,
.lvt-plp .others-collection__item.two-items,
.page-lvt .others-collection__item.two-items,
.page-spc .others-collection__item.two-items {
  height: 404px;
}
.spc-pdp .others-collection__item.two-items:hover .head-image,
.lvt-pdp .others-collection__item.two-items:hover .head-image,
.spc-plp .others-collection__item.two-items:hover .head-image,
.lvt-plp .others-collection__item.two-items:hover .head-image,
.page-lvt .others-collection__item.two-items:hover .head-image,
.page-spc .others-collection__item.two-items:hover .head-image {
  margin-top:-250px;
}
.spc-pdp .others-collection__item .name,
.lvt-pdp .others-collection__item .name,
.spc-plp .others-collection__item .name,
.lvt-plp .others-collection__item .name,
.page-lvt .others-collection__item .name,
.page-spc .others-collection__item .name {
  padding: 20px;
}
@media screen and (max-width: 992px){
   .others-collection__container{
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: 40px;
      row-gap: 40px;
   }

}
@media screen and (max-width: 768px){
    .others-collection__item.one-item{
      width: 100%;
    }
   .others-collection__item,.others-collection__item.two-items{
      height: auto;
   }
   .others-collection__item:hover .head-image{
      margin-top:0;
   }
   .product__others-collection .title{
      margin-bottom: 60px;
   }
   .others-collection__item:hover .name{
      border-top: 0;
   }
   .others-collection__item.two-items:hover .head-image{
      margin-top:0;
   }
   .others-collection__container.two-items{
      grid-template-columns: 1fr;
   }
}
@media screen and (max-width: 595px){
   .others-collection__container{
      grid-template-columns: 1fr;
   }
}
/* collection */
.collection__content-section.two p{
   font-size: 28px;
   line-height: 38px;
   text-align: center;
   font-weight: 700;
}
.collection__content-section.one p{
   font-size: 28px;
   line-height: 32px;
   text-align: center;
   font-weight: 700;
}
.collection__construction{
   background-color: var(--bg-gray);
   position: relative;
   overflow:hidden;
}
.collection__construction .full-image-mobile{
   width:100%;
   height: auto;
   position: relative;
   display: none;

   margin-top: 30px;
   margin-bottom: -20px;
   right: -20vw;
   transform: scaleX(-1);
}
.collection__construction .full-image-mobile.temporarily{
  width:100%;
  height: auto;
  position: relative;
  display: none;

  margin-top: 30px;
  margin-bottom: -20px;
  right: -20vw;
  transform: translateY(0);
}
.collection__construction .head-text{
   color: var(--green-main);
   font-size: 46px;
   font-weight: 700;
}
.collection__construction .left{
   padding-right: 50px;
}
.collection__construction .division-row{
   width: 200px;
   height: 2px;
   background-color: var(--dark-blue);
   margin: 80px 0;
}
.collection__construction .construction__properties{
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.collection__construction .construction__property {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.collection__construction .construction__property .title{
   font-size:24px;
   line-height: 30px;
   font-weight: 700;
}
.collection__construction .construction__property .content,
.collection__construction .construction__property li{
   font-size:22px;
   line-height: 28px;
   color: #444444;
   font-weight: 200;
}
.collection__construction .construction__property ul{
  list-style: none;
  padding-left: 0;
}
.collection__construction .construction__property ul li{
  padding-left: 20px;
  position: relative;
}
.collection__construction .construction__property ul li::before{
  content: '';
  position: absolute;
  left: 0;
  top: 50%;

  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background-color: var(--dark-blue);

  border-radius: 50%;
}
.collection__construction .right{
   position: inherit;
}
.collection__construction .right .full-image{
   position: absolute;
   top: 35%;
   right: -12rem;
   width: 75rem;

   transform: scaleX(-1);
}
.collection__construction .right .full-image.temporarily{
  position: absolute;
   top:0;
   right:0;
   width: 45%;
   max-width: 650px;
   transform: rotateY(0);
   /* transform: rotateY('angle'); */
}

.collection__roomvo .roomvo__container .title{
   font-size: 40px;
   font-weight: 700;
   line-height: 48px;
   margin-bottom: 60px;

   color: var(--white);
}
.collection__roomvo .dark-blue-background{
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;

   height: 680px;
   background-color: var(--dark-blue);
}
.collection__roomvo .image-background{
   position: absolute;
   top: 680px;
   right: 0;
   width: 800px;

   height: auto;
}
.collection__roomvo .image-background img{
   width: 100%;
   height: auto;
}
.collection__roomvo .roomvo__container .content{
   font-size: 20px;
   line-height: 36px;
   margin-bottom: 200px;
   color: var(--white);
}
.collection__roomvo .roomvo__container .division-line{
   margin: 50px 0 120px;
   width: 200px;
   height: 2px;
   background-color: var(--white)
}
.collection__roomvo .small-picture-container, .collection__roomvo .large-picture-container{
   margin-bottom: 40px;
}
.collection__roomvo .small-picture-container p, .collection__roomvo .large-picture-container p{
   font-size: 24px;
   font-weight: 700;
}
.collection__roomvo .small-picture-container .picture-wrapper {
  width: fit-content;
  margin-bottom: 15px;
}
.collection__roomvo .large-picture-container .picture-wrapper {
  width: 100%;
  margin-bottom: 15px;
}
.collection__roomvo .small-picture-container .picture-wrapper.border-blue,
.collection__roomvo .large-picture-container .picture-wrapper.border-blue{
  border-bottom: 5px solid var(--dark-blue);
}
.collection__roomvo .small-picture-container .picture-wrapper.border-green,
.collection__roomvo .large-picture-container .picture-wrapper.border-green{
  border-bottom: 5px solid var(--green-main);
}
.collection__roomvo .small-picture-container img{
   width: 100%;
   max-width: 380px;
   height: auto;
}
.collection__roomvo .large-picture-container img{
   width: 100%;
   height: auto;
}
.collection__roomvo .roomvo__container .install-text{
   text-align: right;
   font-size: 50px;
   color: var(--green-main);
   font-weight: 700;
}
.collection__roomvo .roomvo__container .install-text.desktop{
   display: block;
}
.collection__roomvo .roomvo__container .install-text.mobile{
   display: none;
   text-align: left;
   margin-bottom:40px;
}
@media screen and (max-width: 1200px){
   .collection__construction .right .full-image{
      width: 45rem;
      right: -7rem;
      top: 200px;
   }
}
@media screen and (max-width: 992px){
   .collection__construction{
      padding: 0;
   }
   .collection__construction .container{
      width: 100%;
      max-width: 100%;
   }
   .collection__construction .row{
      display: flex;
      flex-direction: column-reverse;
   }
   .collection__construction .right{
      display: none;
   }
   .collection__construction .right .full-image{
      position: relative;
      width:100%;
      height:auto;
      top: 0x;

      right: -20vw;
   }
   /* .collection__construction .head-text{
      font-size: 40px;
   } */
   .collection__construction .right{
      padding-left: 0;
      padding-right: 0;
   }
   .collection__roomvo .dark-blue-background{
      height: 560px;
   }
   .collection__roomvo .roomvo__container .content{
      margin-bottom: 100px;
   }
   .collection__roomvo .roomvo__container .division-line{
      display: none;
   }
   .collection__roomvo .small-picture-container img{
      max-width: 100%;
   }
}
@media  screen and (max-width: 768px) {
   .collection__construction .division-row{
      display: none;
   }
   .collection__roomvo .dark-blue-background{
      height: 630px;
   }
   .collection__construction .full-image-mobile{
      display: block;
   }
   .collection__construction .full-image-mobile.temporarily{
    display: block;
   }
   .collection__construction .right .full-image{
      display: none;
   }
   .collection__construction .left{
      padding-right: 15px;
   }
   .collection__roomvo .roomvo__container .install-text{
      font-size: 40px;
   }
   .collection__roomvo .roomvo__container .install-text.desktop{
      display: none;
   }
   .collection__roomvo .roomvo__container .install-text.mobile{
      display: block;
   }
}
@media  screen and (max-width: 595px) {
   .collection__roomvo .dark-blue-background{
      height: 580px;
   }
   .collection__roomvo .roomvo__container .title{
      font-size: 32px;
      margin-bottom: 40px;
   }
   .collection__roomvo .roomvo__container .content{
      font-size: 18px;
      line-height: 30px;
      margin-bottom: 80px;
   }
}
/* Sustainability */
.sustainability__introduce{
   background-size: cover;
   background-position: center center;
}
.sustainability__introduce .introduce__content{
   width: 100%;
   margin-right:60px;
}
.sustainability__introduce .introduce__content p{
   color: var(--white);
   font-size: 18px;
   line-height: 27px;
}
.sustainability__introduce .introduce__logo img{
   width: 173px;
   height: 232px;
}
.sustainability__specification .specification__top {
   display: flex;
   align-items: center;
   margin-bottom:100px;
}
.sustainability__specification .specification__top .left{
   display: flex;
   align-items: center;
   margin-right: 100px
}
.sustainability__specification .specification__top .left{
   display: flex;
   align-items: center
}
.sustainability__specification .hexagon-image--left img,.sustainability__specification .hexagon-image--right img{
   width: 260px;
   height: 220px;
   display: block;
   object-fit: cover;
}
.sustainability__specification .hexagon-image--right{
   margin-left:-55px;
}
.sustainability__specification .hexagon-image--right img:first-child{
   margin-bottom:10px;
}
.sustainability__specification .specification__top .content{
   font-size: 24px;
   line-height: 38px;
}
.sustainability__specification .specification__bar{
   width: 100%;
   height: 200px;
   display: grid;
   grid-template-columns: repeat(6,1fr);

   justify-items: center;
   align-items: center;
   position:relative;
   background-color: var(--green-main);

   border-radius: 100px;
   margin: 100px 0;
   padding: 30px;
   flex-wrap: wrap;
}
.sustainability__specification .specification__bar img{
   height: 100px;
   width: 100px;
}
.sustainability__specification .specification__bar .bar-image{
   height: 100px;
   width: 100px;
}
.sustainability__specification .bar__logo{
   position:absolute;
   bottom:0;
   right: 50px;
}
.sustainability__specification .bar__logo img{
   width: 560px;
   height:190px;
   margin:0;
}
.sustainability__specification .specification__bottom{
   /* padding: 0 100px; */
   padding: 0;
}
.sustainability__specification .specification__bottom p{
   font-size: 20px;
   line-height: 28px;
}
.sustainability__assure{
   margin-bottom: 100px
}
.sustainability__assure .assure__logo{
   width: 40%;
   text-align: center;
}
.sustainability__assure .assure__logo img{
   width: 300px;
   height: auto;
   max-width: 100%;
}
.sustainability__assure .assure__content{
   width: 60%;
   padding-right: 20px;
}
.sustainability__assure h2.p2 span.s1{
   font-family: "Poppins", sans-serif;
   font-weight: 700;
   color: var(--dark-blue);
   font-size: 28px;

   line-height: 36px;
   margin-bottom: 20px;
   font-style: initial;
   display: block;
}
.sustainability__assure .assure__content p{
   font-family: "Poppins", sans-serif;
   font-weight: 300;
   color: var(--dark-blue);
   font-size: 20px;

   line-height: 28px;
}
.sustainability__specification .specification__bottom p:not(:last-child){
   margin-bottom: 40px;
}
@media screen and (max-width: 992px) {
   .sustainability__introduce .introduce__content p{
      margin-bottom: 30px;
   }
   .sustainability__introduce .introduce__logo{
      text-align: center;
   }
   .sustainability__specification .specification__top {
      display: block;
      text-align: center;
   }
   .sustainability__specification .specification__top .left{
      width: 100%;
      justify-content: center;
      margin: 0 0 30px;
   }
   .sustainability__specification .specification__bar{
      height: 180px;
      margin: 50px 0;
   }
   .sustainability__specification .specification__bar .bar-image{
      width: 80px;
      height: 80px;
   }
}
@media screen and (max-width: 768px) {
   .sustainability__specification .hexagon-image--left img, .sustainability__specification .hexagon-image--right img{
      width: 200px;
      height: 175px;
   }
   .sustainability__specification .specification__bar{
      height: unset;
      padding: 30px 30px;
      grid-template-columns: repeat(3,1fr);
      row-gap: 20px;

      border-radius: 50px;
   }
   .sustainability__specification .specification__bottom{
      padding: 0 15px;
   }
   .sustainability__specification .bar__logo{
      right: 0;
   }
   .sustainability__specification .bar__logo img{
      width: 460px;
      height: 150px;
   }
   .sustainability__assure{
      margin-bottom: 60px
   }
   .sustainability__assure .assure__logo{
      width: 100%;
      text-align: center;
      margin-bottom: 40px;
   }
   .sustainability__assure .assure__content{
      width: 100%;
      padding-right: 0;
      margin-bottom:30px;
   }
}
@media screen and (max-width: 595px) {
   .sustainability__specification .bar__logo img{
      width: 350px;
      height: 120px;
   }
   .sustainability__specification .hexagon-image--right img:first-child{
      margin-bottom:8px;
   }
   .sustainability__specification .hexagon-image--right{
      margin-left: -43px;
   }
   .sustainability__specification .specification__top {
      display: block;
   }
}
/* FAQ side */
.faq .faq__search{
   width: 100%;
   height: 90px;
   padding: 0px 150px;
   border: 2px solid #000000;

   border-radius:100px;
   display: flex;
   align-items: center;
   margin-bottom: 50px;
}
.faq .faq__search .search-type{
   border: 0;
   outline: 0;
   width:100%;
   padding: 0;
   font-weight: bold;
   display: inline-block;
   font-size: 40px;
   color: var(--green-light);
}
.faq .faq__search .search-type::placeholder{
   color: var(--green-light);
   font-size: 40px;
}
.faq__search .search-button{
   font-size: 60px;
   color: var(--green-light);
   background-color: transparent;
}
.faq__questions{
   list-style-type: none;
}
.faq__questions .faq__item{
   counter-increment: step-counter;
   position: relative;
   padding-left: 35px;
   margin-bottom: 30px;
}
.faq__questions .faq__item::before{
   content: counter(step-counter)'.';
   margin-right: 5px;
   font-size: 24px;
   line-height: 30px;
   color: var(--green-light);
   position: absolute;
   top: 0;
   left:0;
   font-weight: bold;
}
.faq__questions .faq__item .item__question{
   font-size: 24px;
   line-height: 30px;
   color: var(--green-light);
   font-weight: bold;
   margin-bottom: 10px;
   cursor: pointer;
}
.faq__questions .faq__item .item__answer,.faq__questions .faq__item .item__sub-answer{
   font-size: 18px;
   line-height: 30px;
   color: var(--dark-blue);
   display: none;
}
.faq__questions .faq__item.active .item__answer,.faq__questions .faq__item.active .item__sub-answer{
   display: block;
}
.faq__questions .faq__item ul{
   list-style-type: none;
}
.faq__questions .faq__item .item__sub-answer{
   position: relative;
   padding-left:20px;
}
.faq__questions .faq__item .item__sub-answer::before{
   position:absolute;
   content: 0;
   width: 5px;
   height: 5px;

   border-radius: 50%;
   content: '';
   background-color: #000000;
   left:0;

   top: 15px;
   transform: translateY(-50%);
}
@media screen and (max-width: 1200px){
   .faq .faq__search{
      padding: 0px 30px;
   }
}
@media screen and (max-width: 1025px){
   .faq .faq__search{
      height: 60px;
   }
   .faq .faq__search .search-type {
      font-size: 30px;
   }
   .faq .faq__search .search-type::placeholder {
      font-size: 30px;
   }
   .faq__search .search-button {
      font-size: 30px;
   }
}
@media screen and (max-width: 769px){
   .faq .faq__search .search-type {
      font-size: 24px;
   }
   .faq .faq__search .search-type::placeholder {
      font-size: 24px;
   }
   .faq__search .search-button {
      font-size: 24px;
   }
   #header__menu{
      display:none;
   }
   #page__header-mobile{
      display: flex;
   }
   #page__navigation-mobile{
      display: block;
   }
}
@media screen and (max-width: 596px){
   .faq .faq__search {
      padding: 0px 15px;
      height: 50px;
  }
  .faq .faq__search .search-type {
      font-size: 16px;
   }
   .faq .faq__search .search-type::placeholder {
      font-size: 16px;
   }
   .faq__search .search-button {
      font-size: 16px;
   }
}
/* Room-Visualizer */
.visualizer__roomvo .top img{
   width: 100%;
}
.visualizer__roomvo .bottom{
   background-color: var(--green-main);
   padding: 20px 15px;
   display: flex;
   align-items: center;
}
.visualizer__roomvo .bottom .title{
   font-size: 40px;
   font-weight: 700;
   color: var(--white);
}
.visualizer__roomvo .bottom .content-container{
   display: flex;
   align-items: center;
   justify-content: space-between;
}
.visualizer__roomvo .bottom .direct-button{
   font-size: 20px;
   font-weight: 700;
   color: var(--white);
   background-color: var(--dark-blue);

   width: 180px;
   height: 60px;
   border-radius: 100px;
   display: flex;

   justify-content: center;
   align-items: center;
}
.visualizer__instruction .instruction__item{
 display: flex;

}
.visualizer__instruction .sub-content{
   font-size: 20px;
   line-height: 32px;
   text-align: center;
   margin-bottom: 80px;
}
.visualizer__instruction .main-content{
   font-size: 28px;
   line-height: 40px;
   font-weight: 700;
   text-align: center;
}
.visualizer__instruction .instruction__item:not(:last-child){
   margin-bottom:100px;
}
.visualizer__instruction .instruction__item .image-side{
   padding-right: 100px;
}
.visualizer__instruction .instruction__item.even-number .image-side{
   padding-left: 100px;
   padding-right: 0px;
}
.visualizer__instruction .instruction__item .image-show{
   width: 100%;
   height: auto;
}
.visualizer__instruction .instruction__item .content-container{
   display:flex;
}
.visualizer__instruction .instruction__item.even-number .content-container{
   justify-content: flex-end;
}
.visualizer__instruction .instruction__item .image-number{
   width: 200px;
   height: 200px;
}
.visualizer__instruction .instruction__item .subject{
   font-size: 24px;
   font-weight: 700;
   margin-bottom: 16px;
}
.visualizer__instruction .instruction__item .content{
   font-size: 18px;
   line-height: 26px;
}
.visualizer__instruction .instruction__item.even-number .image-side{
   padding-left: 100px;
}
.visualizer__instruction .instruction__item.even-number .content-container{
   text-align: right;
}
.visualizer__get-started{
   background-color: #D6DAE3;
   padding: 30px 0;
}
.visualizer__get-started .link{
   height: 60px;
   width: 380px;
   max-width:90vw;
   background-color: var(--dark-blue);

   font-size: 20px;
   color: var(--white);
   display: flex;
   align-items:center;

   justify-content: center;
   margin: 0 auto;
   border-radius: 100px;
   font-weight: 700;
}
@media screen and (max-width: 992px){
   .visualizer__instruction .instruction__item{
      flex-direction: column;
      align-items: center;
   }
   .visualizer__instruction .instruction__item.even-number{
      flex-direction: column-reverse;
      align-items: center;
   }
   .visualizer__instruction .instruction__item .image-side,.visualizer__instruction .instruction__item.even-number .image-side{
      padding: 0;
      margin-bottom: 30px;
   }
   .visualizer__instruction .instruction__item .content-container,.visualizer__instruction .instruction__item.even-number .content-container{
      justify-content: center;
   }
}
@media screen and (max-width: 768px){
   .visualizer__instruction .instruction__item:not(:last-child){
      margin-bottom: 60px;
   }
   .visualizer__roomvo .bottom .title{
      font-size: 32px;
   }
   .visualizer__roomvo .bottom .direct-button{
      font-size: 16px;
      width: 140px;
      height: 50px;
   }
}
@media screen and (max-width: 595px){
   .visualizer__roomvo .bottom .content-container{
      flex-direction: column;
   }
   .visualizer__roomvo .bottom .title{
      margin-bottom: 20px;
   }
   .visualizer__instruction .instruction__item .image-number
   {
      width: 150px;
      height: 150px;
   }
}
/* Store */
.store .head-title{
   font-size: 40px;
   text-align: center;
   color: var(--green-main);
   font-weight: 700;

   margin-bottom: 30px;
}
.store .content{
   font-size: 20px;
   line-height:30px;
   text-align: center;
   margin-bottom: 100px;
}
.store .store__map {
   box-shadow: 0 10px 25px 0 rgba(0,0,0,0.11);
}
.store .store__map img{
  width: 100%;
}
/* search */
.search .title{
   color: var(--dark-blue);
   font-size: 24px;
   font-weight: 700;
   margin-bottom:40px;
}
.search .results{
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   column-gap: 30px;
   row-gap: 30px;
}
.search .results-item{
   position: relative;
   transition: transform 0.3s linear;
   -webkit-transition: transform 0.3s linear;
}
.search .results-item:hover{
   transform: scale(1.05);
}
.search .results-item img{
   width: 100%;
   height: 100%;
}
.search .results-item .name{
   color: var(--white);
   position: absolute;
   left: 50%;
   top: 50%;

   width:max-content;
   font-size: 24px;
   transform:translate(-50%,-50%);
}
@media screen and (max-width: 768px){
   .search .results{
      grid-template-columns: 1fr 1fr;
   }
}
@media screen and (max-width: 595px){
   .search .results{
      grid-template-columns: 1fr ;
   }
}
/* Footer */
#page__footer{
   width: 100%;
   background-color: var(--green-main);
   position: relative;
   padding: 120px 120px 150px;
}
#page__footer .image-footer-bg{
   position: absolute;
   width:100vw;
   bottom:0;
   left:0;
   z-index:2;
}
#page__footer .image-footer-bg img{
   width:100%;
   height:auto;
   z-index:2;
}
#page__footer .copyright-text{
   position: absolute;
   bottom: 20px;
   z-index: 3;
   color: var(--white);

   font-size: 16px;
   width: 100%;
   text-align: center;
}
#footer-box{
   position:relative;
   width: 100%;
   margin: 0 auto;
   display:flex;

   background-color: #FFFFFF;
   z-index: 10;
   opacity: 1;
   border-radius:8px;

   overflow: hidden;
   max-width: 1200px;
}
#footer-box .left{
   width:480px;
   min-width: 480px;
   padding: 80px 80px 52px;
   background-color: #1A2948;

   display: flex;
   flex-direction: column
}
#footer-box .left .logo{
   width: 150px;
   height: 50px;
   margin-bottom: 50px;
}
#footer-box .left .direction-item{
   display: flex;
   align-items: center;
   padding: 20px 40px;
   border-bottom: 2px solid rgba(15, 128, 140,0.3);

   cursor: pointer;
}
#footer-box .left .direction-item:hover{
   background-color: var(--green-main);
   border-radius:5px;
}
#footer-box .left .icon-pages{
   width: 28px;
   height: 29px;
   margin-right: 20px;
}
#footer-box .left .name-pages{
   color: var(--white);
   font-weight:700;
   font-size: 18px;
}
#footer-box .left .subname-pages{
   color: var(--white);
   font-weight:300;
   font-size: 14px;
}
#footer-box .social-container{
   margin-top: auto;
}
#footer-box .social-item img{
   width: 32px;
   height: 32px;
   margin-right:5px;
}
#footer-box .right-side{
   width:100%;
   max-width:100%;
   padding: 60px 80px 30px;
}
#footer-box .right .top-title,
#footer-box .right h3.gform_title {
   font-size: 40px;
   color: var(--dark-blue);
   margin-bottom: 30px;
   font-weight: 700;
}
#footer-box .right .info-group{
   display: grid;
   grid-template-columns: 1fr 1fr;
   column-gap: 30px;
}
#footer-box .right .info-title,
#footer-box .right label.gfield_label {
   font-size: 16px;
   color: var(--dark-blue);
   margin: 10px 0 0;
   font-weight: 300;
}
#footer-box .right .required-signal{
   color:red;
   font-size: 18px;
}
#footer-box .right .info-container {
   position: relative;
}
#footer-box .right .info-container .image-arrow{
   position: absolute;
   bottom:22px;
   right: 15px;
   transform: translateY(50%);

   width:12px;
   z-index: 8;
}
#footer-box .right .info-input,
#footer-box .right .ginput_container_text input,
#footer-box .right .ginput_container_phone input,
#footer-box .right .ginput_container_email input,
#footer-box .right .ginput_container_select select {
   display:flex;
   align-items: center;
   width:100%;
   padding: 0 15px;
   height: 44px;
   color: var(--dark-blue);
   font-weight:700;
   border: 2px solid var(--gray-border);
   border-radius: 5px;
   position: relative;
   z-index:9;
   background-color: transparent;
   outline: none;
   font-size:16px;
}
#footer-box .right select.info-input{
   color: var(--dark-blue);
   font-weight:700;
}
/* #footer-box select.info-input option[value="first"]{
   color: var(--gray-text);
} */
#footer-box .right .info-input::placeholder,
#footer-box .right input::placeholder {
   color: var(--gray-text);
   font-weight: 300;
}
#footer-box .right select{
   -webkit-appearance: none;
   -moz-appearance: none;
}
#footer-box .right .info-textarea,
#footer-box .right textarea {
   display:block;
   width:100%;
   height: 120px;
   padding: 12px 15px;

   color: var(--dark-blue);
   font-weight:700;
   border: 2px solid var(--gray-border);
   border-radius: 5px;
}
#footer-box .right textarea::placeholder {
   color: var(--gray-text);
   font-weight: 300;
}
#footer-box .right .info-textarea::placeholder{
   color: var(--gray-text);
   font-weight:300;
}
#footer-box .right .radio-side{
   display:flex;
   margin: 10px 0 30px;
}
#footer-box .radio-item:not(:last-child){
   margin-right: 20px;
}
#footer-box .radio-item {
   position: relative;
}
#footer-box .radio-item input {
   position: absolute;
   left: -9999px;
}
#footer-box .ginput_container_radio .gfield_radio li {
   margin: 0 20px 10px 0;
}
#footer-box .ginput_container_radio .gfield_radio li input {
   -ms-transform: scale(1.1); /* IE 9 */
   -webkit-transform: scale(1.1); /* Chrome, Safari, Opera */
   transform: scale(1.1);
}
#footer-box .ginput_container_radio .gfield_radio li label {
   font-size: 16px;
   color: var(--dark-blue);
   position: relative;
   padding-left: 5px;
   padding-top: 5px;
}
#footer-box .radio-item label{
   color: var(--dark-blue);
   position: relative;
   padding-left: 20px;
   padding-top: 2px;

}
#footer-box .radio-item label::after{
   position: absolute;
   width: 14px;
   height: 14px;
   border-radius: 50%;

   content: '';
   border: 1px solid var(--dark-blue);
   top: 50%;
   left: 0;

   transform: translateY(-50%);
}
#footer-box .radio-item .radio-dot{
   position: absolute;
   width: 8px;
   height: 8px;
   border-radius: 50%;

   content: '';
   background-color: var(--dark-blue);
   top: 50%;
   left: 7px;

   transform: translate(-50%,-50%);
   display: none;
}
#footer-box .radio-item input:checked ~ .radio-dot{
   display: block
}
#footer-box .right .submit-button,
#footer-box .right .gform_button {
   width: 100%;
   max-width: 380px;
   height: 48px;
   border-radius: 50px;
   border: 0;
   background-color: var(--dark-blue);
   color: var(--white);
   font-weight: 400;
   font-size:20px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto;
}
@media only screen and (max-width: 1400px){
   #footer-box .left{
      width:400px;
      min-width: 400px;
      padding: 80px 40px 52px;
   }
   #footer-box .right-side{
      padding: 60px 40px 30px;
   }
}
@media only screen and (max-width: 1200px){
   #footer-box .right h3.gform_title{
      font-size: 32px;
   }
   #footer-box .left{
      width:320px;
      min-width: 320px;
      padding: 80px 20px 52px;
   }
   #footer-box .right .info-group{
      grid-template-columns: 1fr;
   }
}
@media only screen and (max-width: 992px){
   #page__footer{
      padding: 120px 0 150px;
   }
   #footer-box {
      display: block;
   }
   #footer-box .left .direction-container{
      margin-bottom: 50px;
   }
   #footer-box .left{
      width:100%;
      padding: 50px 40px;
   }
   #footer-box .left .logo{
      margin: 0 auto 40px;
   }
   #footer-box .social-container{
      text-align: center;
   }
   #footer-box .right-side{
      width:100%;

   }
   #footer-box .right .top-title{
      text-align: center;
   }
}
@media only screen and (max-width: 595px){
   #footer-box .left .direction-item{
      padding: 20px;
   }
   #footer-box .right .top-title{
      font-size: 32px;
   }
   #footer-box .right h3.gform_title{
      font-size: 24px;
   }
}
/* search */
.search .title{
   color: var(--dark-blue);
   font-size: 24px;
   font-weight: 700;
   margin-bottom:40px;
}
.search .results{
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   column-gap: 30px;
   row-gap: 30px;
}
.search .results-item{
   position: relative;
   transition: transform 0.3s linear;
   -webkit-transition: transform 0.3s linear;
}
.search .results-item:hover{
   transform: scale(1.05);
}
.search .results-item .name{
   color: var(--white);
   position: absolute;
   left: 50%;
   top: 50%;

   width:max-content;
   font-size: 24px;
   transform:translate(-50%,-50%);
}
@media screen and (max-width: 768px){
   .search .results{
      grid-template-columns: 1fr 1fr;
   }
}
@media screen and (max-width: 595px){
   .search .results{
      grid-template-columns: 1fr ;
   }
}
.footer-form-message::placeholder{
   color: var(--gray-text);
   font-weight: 300;
}

/* Popup Manual */
.popup-warranty,
.popup-maintenance,
.popup-installation {
   position: fixed;
   z-index: 99;
   left: 0;
   top: 0;

   width: 100vw;
   height: 100vh;
   background-color: rgba(0,0,0,0.7);
   display:none;
}
.popup-warranty__box,
.popup-maintenance__box,
.popup-installation__box {
   background-color: var(--green-light);
   position: absolute;
   top: 50%;
   left: 50%;

   transform: translate(-50%,-50%);
   padding: 50px 30px 30px;
   text-align: center;
   border-radius: 8px;

   width: 100%;
   max-width: 780px
}
.popup-warranty__box .exit-character,
.popup-maintenance__box .exit-character,
.popup-installation__box .exit-character {
   position: absolute;
   right: 15px;
   top: 5px;
   font-size: 40px;

   color: var(--white);
   cursor: pointer;
}
.popup-warranty__box .title,
.popup-maintenance__box .title,
.popup-installation__box .title {
   font-size: 28px;
   color: var(--white);
   font-weight: 700;
   margin-bottom: 50px;
}
.popup-warranty__box .choice-side,
.popup-maintenance__box .choice-side,
.popup-installation__box .choice-side {
   background-color: var(--white);
   border-radius: 5px;
   padding: 30px 15px;
   min-height: 200px;

   background-image: url('../images/SH_collection_1_roomvo_background.png');
   background-position: center center;
   background-repeat: no-repeat;
   background-size: cover;

   display: flex;
   flex-direction: column;
   justify-content: center;
}
.popup-warranty__box .choice-side .each-choice:not(:last-child),
.popup-maintenance__box .choice-side .each-choice:not(:last-child),
.popup-installation__box .choice-side .each-choice:not(:last-child) {
   margin-bottom: 25px;
}
.popup-warranty__box .each-choice h2,
.popup-maintenance__box .each-choice h2,
.popup-installation__box .each-choice h2 {
   font-size: 24px;
   font-weight: 700;
   color: var(--dark-blue);
}
.popup-warranty__box .each-choice a,
.popup-maintenance__box .each-choice a,
.popup-installation__box .each-choice a {
   font-size: 16px;
   text-decoration: underline;
   cursor:pointer;
}
/* .popup-maintenance__box .each-choice a{
   color: var(--dark-blue);
} */
.popup-warranty__box .each-choice a:hover,
.popup-maintenance__box .each-choice a:hover,
.popup-installation__box .each-choice a:hover {
   text-decoration: underline;
}

/* Tablepress FAQ */
.page-template-page-faq .tablepress tfoot th,
.page-template-page-faq .tablepress thead th {
   background-color: var(--green-light);
   color: #fff;
}

.page-template-page-faq .tablepress tbody td.column-1 {
   background-color: #1A2948;
   color: #fff;
}

.page-template-page-faq .tablepress tbody td.column-5 {
   color: var(--green-light);
   font-weight: 500;
}

.page-template-page-faq .tablepress td,
.page-template-page-faq .tablepress th {
   text-align: center;
   vertical-align: middle;
}

.page__body .content p {
   margin-bottom: 20px;
}
.gform_wrapper .top_label li.gfield.gf_right_half{
   position: relative;
}
.footer-form-select-country div.ginput_container_select{
   position: relative;
}
.footer-form-select-country div.ginput_container_select::before{
   position: absolute;
   right: 20px;
   top: 50%;
   transform: translateY(-50%);

   background-image: url('../images/SH_down_arrow.png');
   background-size: 100% 100%;
   background-position: center center;
   width: 17px;

   height: 10px;
   content:'';
}

.collection__introduce-top{
  padding: 80px 0;
}
.collection__introduce-top .wrapper{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 80px;
}
.collection__introduce-top .small-description{
  font-size: 24px;
  line-height: 32px;
  text-align: center;
  color: var(--green-light);
}
.collection__introduce-top .bottom-wrapper{
  display: grid;
  grid-template-columns: 1fr 55%;
  gap: 15px;
}
.collection__introduce-top .image-description{
  padding: 0 0 10px 10px;
  position: relative;
  width: 100%;
  max-width: 450px;
  margin-left: auto;
  height: fit-content;
}
.collection__introduce-top .image-description::after{
  position: absolute;
  content: "";
  width:calc(100% - 10px);
  height: calc(100% - 10px);

  bottom: 0;
  left: 0;
  background-color: var(--dark-blue);
  border-radius: 8px;
}
.collection__introduce-top .image-description::before{
  position: absolute;
  content: "";
  bottom: 8px;
  left: 8px;

  width: calc(100% - 8px);
  height: calc(100% - 8px);
  background-color: white;
  z-index: 1;
}
.collection__introduce-top .image-description img{
  width: 100%;
  aspect-ratio: 16 / 9;
  position: relative;
  z-index: 2;

  object-fit: cover;
}
.collection__introduce-top .content-description {
  padding-top: 20px;
  padding-left: 20px;
}
.collection__introduce-top .content-description .title {
  display: flex;

}
.collection__introduce-top .content-description .title .special-box {
  color: white;
  position: relative;
  font-weight: 700;
  font-size: 32px;
  line-height: 40px;
}
.collection__introduce-top .content-description .title .normal-box {
  font-weight: 700;
  color: var(--green-light);
  font-weight: 700;
  font-size: 32px;
  line-height: 40px;
}
.collection__introduce-top .content-description .title .special-box::before {
  position: absolute;
  content: "";
  width: calc(100% + 20px);
  aspect-ratio: 1 / 1;

  right: 0;
  top: -20px;
  background-color: #0F808C;
  z-index: -1;
}
.collection__introduce-top .content-description .description-wrapper{
  padding-left: 20px;
  position: relative;
  z-index: 2;
}
.collection__introduce-top .content-description .description{
  padding: 20px;
  background-color: #1A2948;
  color: white;
  font-size: 18px;
  line-height: 32px;
}
@media (max-width: 768px) {
  .collection__introduce-top{
    padding: 40px 0;
  }
}

.collection__introduce-bottom {
  background-color: var(--bg-gray);
}
.collection__introduce-bottom .wrapper{
  padding: 20px;
  position: relative
}
.collection__introduce-bottom .image-blur{
  position: absolute;
  height: 300px;
  width: auto;
  top: -100px;
  right: 0;
}
.collection__introduce-bottom .image-blur img{
  height: 100%;
  width: auto;
}
.collection__introduce-bottom .top-title{
  display: flex;
}
.collection__introduce-bottom .top-title .special-box{
  position: relative;
}
.collection__introduce-bottom .top-title .special-box .text{
  color: white;
  font-size: 32px;
  line-height: 40px;
  font-weight: 700;

  z-index: 2;
  position: relative;
}
.collection__introduce-bottom .top-title .special-box::before{
  position: absolute;
  width: calc(100% + 20px);
  aspect-ratio: 16 / 9;
  right: 0;

  top: -20px;
  content: "";
  z-index: 1;
  background-color: var(--dark-blue);
}
.collection__introduce-bottom .top-title .normal-box{
  color: var(--dark-blue);
  font-size: 32px;
  line-height: 40px;
  font-weight: 700;
}
.collection__introduce-bottom .bottom-description-wrapper {
  padding-left: 20px;
}
.collection__introduce-bottom .bottom-description {
  padding: 20px;
  background-color: var(--green-light);
  color: white;
  font-size: 18px;

  line-height: 40px;
  position: relative;
  z-index: 2;
}

.sec-diy {
  padding: 0 0 80px;
}
.sec-diy .top-image{
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 80vh;
  position: relative;

  z-index: 1;
}
.sec-diy .top-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sec-diy .middle-container{
  width: 100%;
  position: relative;
  z-index: 2;
  margin-top: -120px;
  margin-bottom: 80px;
}
.sec-diy .middle-box{
  width: 100%;
  max-width: 800px;
  margin-left: auto;
  background-color: var(--dark-blue);

  padding: 40px 70px;
  display: flex;
  flex-direction: column;
  gap: 40px;

  position: relative;
}
.sec-diy .middle-box::before{
  width: 100px;
  height: 100px;
  background-color: var(--green-light);
  content: "";

  position: absolute;
  left: -50px;
  top: -50px;
}
.sec-diy .middle-box .title{
  color: var(--green-light);
  font-weight: 700;
  font-size: 40px;
  line-height: 48px;
}
.sec-diy .middle-box .description{
  color: white;
  font-size: 18px;
  line-height: 32px;
}
.sec-diy .bottom-description{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap:80px;
}
.sec-diy .bottom-description .box-image{
  padding-right: 10px;
  padding-top: 10px;
  position: relative;
  height: fit-content;
}
.sec-diy .bottom-description .box-image::before{
  position: absolute;
  content: "";
  right: 8px;
  top: 8px;
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  background-color: white;
  z-index: 2;
}
.sec-diy .bottom-description .box-image::after{
  position: absolute;
  content: "";
  right: 0;
  top: 0;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  background-color: var(--dark-blue);
  z-index: 1;
  border-radius: 8px;
}
.sec-diy .bottom-description .box-image img{
  width: 100%;
  aspect-ratio: 4 / 3;
  position: relative;
  z-index: 3;
}
.sec-diy .bottom-description .content-container{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 40px
}
.sec-diy .bottom-description .title{
  color: var(--green-light);
  font-size: 40px;
  font-weight: 700;
  position: relative;
  padding-bottom: 10px;
}
.sec-diy .bottom-description .title::before{
  position: absolute;
  content: "";
  bottom: 0;
  left: 0;
  width: 200px;
  height: 1px;
  background-color: var(--dark-blue);
}
.sec-diy .bottom-description .description{
  color: var(--dark-blue);
  font-size: 18px;
  line-height: 32px;
}
@media (max-width: 992px) {
  .sec-diy {
    padding: 40px 0;
  }
}