:root {
  --text-main: #545454;  
  --primary-main2: #00391a;  
  --primary-yellow: #ffd403;  
  --secondary-blue: #B7CBD0;  
  --secondary-green: #3D4E3E;  
  --secondary-grey: #e6e6e6; 
  --text-black: #181D27; 
}   
a{
  text-decoration: none !important; 
}
a:hover{
  text-decoration: none;
} 
body{
  font-family: "Kanit", sans-serif;
  font-style: normal;  
  overflow-x: hidden !important;
}    
.sect1{ 
  background-color: #fff;
  position: relative;
  padding-top: 30px;
  height: 100vh; 
}
.sect1 .box-color{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100vh - 200px); 
  z-index: 1;
}
.sect1 h3{ 
  font-weight: 600; 
  font-size: 64px; 
  line-height: 100%;
  letter-spacing: 10%;
  color: rgba(84,84,84,.5);
  transform: rotate(-90deg); 
  position: absolute;
  z-index: 3;
  top: 72%;
  left: 13%;
}  
.sect1 .container-fluid{ 
  position: relative;
  z-index: 2;
}
.sect1 .col-lg-12{
  padding-left: 534px;
  padding-left: 30%;
} 
.sect1 h2{
  color: rgba(84,84,84,.5);
  font-size: 64px;
  margin-bottom: -10px;
  font-weight: 400;
}
.sect2{  
  background-color: #fff; 
  padding-top: 100px;
  padding-bottom: 100px;
}
.sect2 .container-fluid{ 
  background-color: #192524;
  height: 650px;
}
.sect2 .img2{
  height: auto;
  max-width: 100%;
  margin-top: -20px;
}
.sect2 h2{ 
  font-weight: 500; 
  font-size: 24px; 
  line-height: 150%;
  color: white; 
  margin-top: 60px;
}
.sect2 h3{ 
  font-weight: 400; 
  font-size: 16px; 
  line-height: 150%;
  color: white;   
}
.sect2 p{
  font-weight: 400; 
  font-size: 14px; 
  line-height: 150%;
  color: white;   
}
.btn-des2{ 
  font-weight: 700; 
  font-size: 22px; 
  line-height: 100%; 
  background-color: #4E5F7B;
  padding: 10px 20px;
  border-radius: 100px;
  color: white;
  margin-top: 90px;
  transition: 0.3s;  
  box-shadow: 0px 4px 4px 0px #00000040; 
}
.btn-des2:hover{  
  background-color: #545454; 
  color: white;
}
.bgf{  
  height: 190px;
  width: 100%;
  background-image: url(../../designdecor_6styles/images/mid_century/bgf.webp);
  background-size: 100% auto !important;
  background-repeat: no-repeat !important;
  background-position: top center;
}
.sect3{  
  background-color: #fff; 
  padding-top: 40px;
  padding-bottom: 50px;
  height: 100%;
  min-height: calc( 1080px - 200px);
}
.sect3 h2{   
  font-weight: 700; 
  font-size: 32px; 
  line-height: 100%; 
  color: #4E5F7B;
  margin-bottom: 40px;
}
.sect3 h3{ 
  font-weight: 500; 
  font-size: 20px; 
  line-height: 28px; 
}
.sect3 p{   
  font-weight: 500; 
  font-size: 18px; 
  line-height: 28px; 
  color: #545454;
}
.sect3 .btn-des2{   
  margin-top: 20px;
}
.plan-long{
  width: 100%;
  height: 201px;  
  display: block;
  margin: auto;
  margin-top: 100px;
  border-radius: 130px;
  background: rgba(123,143,176,0.6); 
  padding-left: 40px;
  padding-right: 40px;
}
.plan-long .img{
  max-height: 160px;
  width: auto;
 /* object-fit: cover;*/
  display: block;
  margin: auto;
  margin-top: -70px;
  margin-bottom: 25px; 
  transition: all 0.3s ease;
}
.plan-long .img:hover {
  transform: translateY(-4px); 
}  
.plan-ver{
  width: 100%;
  height: 600px;  
  background: rgba(123,143,176,0.6);  
  border-top-left-radius: 250px;
  border-top-right-radius: 250px;
  border-bottom-right-radius: 100px;
  border-bottom-left-radius: 100px;  
}
.plan-ver .img{ 
  width: auto;
  height: 370px;
  display: block;
  margin: auto;
 /* margin-left: -20%;*/
}
.plan-long .btn.btn-text{
  min-width: 100px;
  background-color: white;
  border-radius: 100px; 
  font-weight: 500; 
  font-size: 15px; 
  line-height: 100%; 
  color: #545454;
  box-shadow: 0px 4px 4px 0px #00000040; 
  transition: 0.3s;  
  margin-right: 10px;
}
.plan-long .btn.btn-text:hover{ 
  background-color: #7B8FB0;
  color: white;
}
.btn.like{
  width: 25px !important;
  height: 25px;
  background-color: white;
  border-radius: 100px;  
  box-shadow: 0px 4px 4px 0px #00000040; 
  transition: 0.3s;   
  padding: 0 !important; 
}
.btn.like:focus{
  background-color: white;
  border: none;
}
.btn.like img{
  width: 15px;
  height: 13px;
  display: block;
  margin: auto;
  margin-top: 6px;
}
.plan-ver h4{
  text-align: center;
  color: #4E5F7B;
  font-size: 32px;
}
.plan-ver h4 strong{
  font-weight: bold;
  margin-bottom: 20px;
}
.plan-ver .btn-des2{
  font-weight: bold;
  margin-bottom: 20px;
} 
.plan-ver .text-des{   
  font-weight: 400; 
  font-size: 20px; 
  line-height: 100%;
  letter-spacing: 5%;
  text-align: center;
  color: #4E5F7B;
  display: block;
  transition: 0.3s; 
} 
.plan-ver .text-des:hover{   
  color: rgba(84,84,84,.5); 
} 
.sect4{
  height: 540px;
  background-image: url(../../designdecor_6styles/images/mid_century/sect4-bg.webp);
  background-size: 100% auto !important;
  background-repeat: no-repeat !important;
  background-position: center;
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
} 
.sect4:after{
  content: "";
  height: 540px;
  width: 100%;
  background: rgb(25, 37, 36, .7);
  z-index: 11;
  position: absolute;
  left: 0;
  top: 0 ;
} 
.sect4 .container-xl{
  position: relative;
  z-index: 13; 
}
.sect3 .container{
  position: relative;
  z-index: 13; 
}
.sect4 .swiper-wrapper { 
  height: 100%;
  display: flex;
}
.sect4 .img-fluid{ 
  box-shadow: 0px 4px 4px 0px #00000040; 
  height: 360px;
  width: auto;
 /* object-fit: cover;*/
}
.sect4 .swiper-button-next, .sect4 .swiper-button-prev { 
  color:#000; 
  border-radius:50%;
  width: 38px !important; 
  height: 38px !important; 
  z-index: 10 !important;
  box-shadow:0 4px 12px rgba(0,0,0,0.12);
  opacity: 1;
}  
.sect4 .swiper-button-prev{
  left: -5% !important; 
  opacity: 1;
  height: 60px;
  width: 60px;
  background-color: rgba(176, 147, 123, .5);
  color: white;
}  
.sect4 .swiper-button-next{
  right: -5% !important; 
  opacity: 1;
  height: 60px;
  width: 60px;
  background-color: rgba(176, 147, 123, .5);
  color: white;
}   
.sect4 .swiper-button-prev:after{
  content: unset !important;
}   
.sect4 .swiper-button-next:after{
  content: unset !important;
}    
.sect4 .swiper-button-prev i{
  color: black;
}  
.sect4 .swiper-button-next i{
  color: black;
}  
.sect5{
  min-height: 1080px;
  height: 100%;  
  position: relative;
  z-index: 3; 
} 
.sect5:after{ 
  position: absolute;
  content: "";
  width: 45%;
  background-image: url(../../designdecor_6styles/images/mid_century/sect5-bg.webp);
  background-size: auto 100% !important;
  background-repeat: no-repeat !important;
  background-position: right   center;
  height: 100%;
  min-height: 1080px;
  top: 0;
  left: 0;
} 
.sect5 .dexx{
  z-index: 11;
  position: relative;
  margin-top: 180px;
  padding: 50px;
  min-height: 400px;
  background-color: rgba(123, 143, 176, .7);
} 
.sect5 h2{   
  font-weight: 700; 
  font-size: 32px; 
  line-height: 40px; 
  color: #4E5F7B; 
}
.sect5 h3{ 
  font-weight: 500; 
  font-size: 20px; 
  line-height: 30px; 
  color: white;
}
.sect5 p{   
  font-weight: 500; 
  font-size: 16px;  
  color: white;
  line-height: 25px; 
}
.pro-pad{
  margin-top: 20px;
  padding-left: 50px;
  min-height: 1080px;
}
.productx{
  height: 150px;
  background-image: url(../../designdecor_6styles/images/mid_century/bg-item.webp);
  background-size: auto 140px !important;
  background-repeat: no-repeat !important;
  background-position: bottom center;
  margin-top: 20px;
  margin-bottom: 20px;
}
.productx .img-product{
  height: 140px;
  width: auto;
 /* object-fit: cover;*/
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.pro-pad .btn-text{
  box-shadow: 0px 4px 4px 0px #00000040;
  color: #4E5F7B;
  border-radius: 100px;
  margin-right: 2px;
  width: 170px;
  font-size: 13px;
}
.productx .img-product.s1{
  height: 150px; 
}
.productx .img-product.s2{
  height: 160px; 
}
.productx .img-product.s3{
  height: 190px; 
}
.productx .img-product.s4{
  height: 140px; 
}
.productx .img-product.s5{
  height: 150px; 
}
.productx .img-product.s6{
  height: 150px; 
}
.productx .img-product.s7{
  height: 150px; 
}
.productx .img-product.s8{
  height: 150px; 
}
.productx .img-product.s9{
  height: 150px; 
}
.productx .img-product.s10{
  height: 150px; 
}
.productx .img-product.s11{
  height: 160px; 
}
.productx .img-product.s12{
  height: 170px; 
}
.sect6{
  min-height: calc(1080px - 150px);
  height: 100%; 
  position: relative;
  z-index: 3; 
  padding-top: 100px; 
} 
.sect6 .swiper-slide img{
  height: 388px;
 /* object-fit: cover;*/
}
.sect6  h2{ 
  font-weight: 400; 
  font-size: 64px;  
  margin-bottom: 20px;
  color: #4E5F7B;
}
.sect6  .swiper-slide a{  
  font-weight: 500; 
  font-size: 36px;   
  color: #4E5F7B;
}
.sect6  .swiper-slide a div{  
  position: relative;
  z-index: 13; 
}

.sect6 .swiper-button-next, .sect6 .swiper-button-prev { 
  color:#000; 
  border-radius:50%;
  width: 38px !important; 
  height: 38px !important; 
  z-index: 10 !important;
  box-shadow:0 4px 12px rgba(0,0,0,0.12);
  opacity: 1;
}  
.sect6 .swiper-button-prev{
  top: 50px;
  left: 92% !important; 
  opacity: 1;
  height: 60px;
  width: 60px;
  background-color: rgba(78, 95, 123, 1);
  color: white;
}  
.sect6 .swiper-button-next{
  top: 50px;
  right:  0; 
  opacity: 1;
  height: 60px;
  width: 60px;
  background-color: rgba(78, 95, 123, 1);
  color: white;
}   
.sect6 .swiper-button-prev:after{
  content: unset !important;
}   
.sect6 .swiper-button-next:after{
  content: unset !important;
}    
.sect6 .swiper-button-prev i{
  color: black;
}  
.sect6 .swiper-button-next i{
  color: black;
}  
.but-social{
  margin-top: 100px;
}
.but-social .btn{
  min-width: 185px;
  height: 45px; 
  opacity: 1;
  border-radius: 100px;
  background: #4E5F7B;
  box-shadow: 0px 4px 4px 0px #00000040;
  margin-left: 15px;
  margin-right: 15px; 
  font-weight: 500; 
  font-size: 16px; 
  color: #fff; 
  position: relative;
  padding-top: 8px;
  padding-left: 38px;
  transition: 0.3s;  
}
.but-social .btn img{
  width: 28px;
  height: 28px;  
 /* object-fit: cover;*/
  border-radius: 100%;
  position: absolute;
  left: 10px;
}
.but-social .btn:hover{
  color: #000;
  background-color: rgba(176, 147, 123, .8);
}
.text-rot{
  position: absolute;
  top: 35%;
  right: -11%; 
  font-weight: 600; 
  font-size: 64px; 
  line-height: 100%;
  letter-spacing: 10%;
  color: rgba(84,84,84,.2); 
  transform: rotate(-90deg); 
}
/*  
  transition: 0.3s;  
######################################################################################################
###################################################################################################### 
*/ 
 

@media only screen and (max-width: 1024px) { /* MOBILE */
  .mb-x{
    display: none !important;
  } 
  .sect1 h2 { 
    font-size: 34px; 
  }
  .sect1 h1{
    color: #545454;
    font-size: 54px;
    font-weight: 700;
  }
  .sect1 h3 { 
    font-size: 30px; 
    top: 72%;
    left: 12%;
  }
}
@media only screen and (max-width: 600px) { /* MOBILE */  
  .sect1 h3 { 
    font-size: 30px; 
    top: 63%;
    left: -2%;
  }
  .sect2 .img2{
    width: 50%;
    display: block;
    margin: auto;
    margin-top: -20px;
  }
  .sect2 .container-fluid{  
    height: 100%;
  }
  .sect2 .btn-des2{
    margin-top: 30px;
    margin-bottom: 30px;
  }
  .sect2 { 
    padding-top: 60px;
    padding-bottom: 60px;
  } 
  .bgf {
    display: none;
  }
  .plan-long {
    height: auto;
    padding-bottom: 50px;
  }
  .plan-long .img {
    margin-top: 50px;
  } 
  .plan-ver {
    width: 80%;
    height: 525px; 
    display: block;
    margin: auto;
    margin-top: 40px;
  }
  .plan-ver .img {
    height: 280px;
   /* margin-left: -24%;*/
  }
  .sect3 { 
    padding-top: 20px;
    padding-bottom: 50px;
  }
  .sect4 .img-fluid { 
    padding: 35px;
  } 
  .sect4 .swiper-button-prev{
    left: 5% !important; 
  }  
  .sect4 .swiper-button-next{
    right: 5% !important; 
  }   
  .sect4 {
    height: 540px; 
    background-size: auto 100%  !important; 
    align-items: center;
  }
  .sect5 h2 { 
    font-size: 24px; 
  }
  .sect5 h3 { 
    font-size: 16px; 
  }
  .sect5 p { 
    font-size: 14px; 
  }
  .sect5{
    height: 100%;
    padding-bottom: 50px;
  }
  .sect5 .dexx {
    z-index: 11;
    position: relative;
    margin-top: 0px;
    padding: 30px;
    min-height: 400px;
    background-color: rgba(123, 143, 176, .7);
  }
  .sect5:after{  
    content: unset !important; 
  } 
  .pro-pad{
    padding-left: 15px;
  }
  .sect6 h2 { 
    font-size: 30px; 
  }
  .sect6 .swiper-button-prev {
    top: 20px;
    left: 70% !important; 
  }
  .sect6 .swiper-button-next {
    top: 20px;
    left: 85% !important; 
  }
  .sect6 .swiper-slide img {
    height: 275px; 
  }
  .but-social .btn{ 
    min-width: unset; 
    height: 64px; 
    display: block;
    margin-top: 10px;
    font-size: 24px;
    line-height: 40px;
  }
  .but-social .btn img{ 
    margin-left: 2px;
    height: 42px;
    width: 42px;
    margin-top: 2px;
  } 

  .pro-pad .btn-text{
    box-shadow: 0px 4px 4px 0px #00000040;
    color: #4E5F7B;
    border-radius: 100px;
    margin-right: 0px;
    width: 128px;
    font-size: 13px;
  }

  .productx .img-product.s1{
    height: 150px; 
  }
  .productx .img-product.s2{
    height: 160px; 
  }
  .productx .img-product.s3{
    height: 170px; 
  }
  .productx .img-product.s4{
    height: 120px; 
  }
  .productx .img-product.s5{
    height: 150px; 
  }
  .productx .img-product.s6{
    height: 150px; 
  }
  .productx .img-product.s7{
    height: 150px; 
  }
  .productx .img-product.s8{
    height: 150px; 
  }
  .productx .img-product.s9{
    height: 150px; 
  }
  .productx .img-product.s10{
    height: 150px; 
  }
  .productx .img-product.s11{
    height: 160px; 
  }
  .productx .img-product.s12{
    height: 170px; 
  }

}
@media only screen and (max-width: 480px) { /* MOBILE */   
  .sect2 .container-fluid {
    background-color: #192524;
    height: 100%;
  }
  .sect2 .btn-des2{
    margin-top: 30px;
    margin-bottom: 30px;
  }
  .sect2 { 
    padding-top: 60px;
    padding-bottom: 60px;
  } 
  .sect1 { 
    height: 100%;
  }
  .sect1 .box-color { 
    height: calc(100% - 50px); 
  }
  .img-1x {
    max-width: 100%;
 /* object-fit: cover;*/
    width: 100%;
  } 
  .sect1 h3 {
    font-size: 24px;
    top: 65%;
    left: -2%;
  } 
  .sect1 h2 {
    font-size: 24px;
  }
  .text-rot { 
    top: 34%;
    right: -27%; 
    font-size: 36px; 
  }
}
@media only screen and (min-width: 1025px) { /* IPAD */
  
  .sect1 h2{
    color: rgba(84,84,84,.5);
    font-size: 54px;
    margin-bottom: -10px;
  }
  .sect1 h1{
    color: #545454;
    font-size: 96px;
    font-weight: 700;
  }
  .sect1 h3{ 
    font-weight: 600; 
    font-size: 64px; 
    line-height: 100%; 
    color: rgba(84,84,84,.5);
    transform: rotate(-90deg); 
    position: absolute;
    z-index: 3;
    top: 56%;
    left: 0;
  }   
  .sect2 .container-fluid {
    background-color: #192524;
    height: 100%;
  }
  .sect2 .btn-des2{
    margin-top: 30px;
    margin-bottom: 30px;
  }
}      

@media only screen and (min-width: 1200px) { /* PC */ 
  .sect1{ 
    background-color: #fff;
    position: relative;
    padding-top: 30px;
    height: 100vh; 
  }
  .sect1 h2{ 
    font-size: 44px; 
  } 
  .sect1 h1{ 
    font-size: 54px; 
  } 
  .sect1 .box-color{ 
    height: calc(100vh - 120px);  
  }
  .sect1 h3{  
    font-size: 44px;  
    top: 72% ;
    left: 15% ; 
  } 
  .img-1x{ 
    max-width: 71%;
 /* object-fit: cover;*/
    position: absolute;
    right: -10px;
  } 
}     

@media only screen and (min-width: 1600px) { /* PC */
  .sect1 h1{
    color: #545454;
    font-size: 96px;
    font-weight: 700;
  }
  .sect1 h3{ 
    font-weight: 600; 
    font-size: 64px; 
    line-height: 100%;
    letter-spacing: 10%;
    color: rgba(84,84,84,.5);
    transform: rotate(-90deg); 
    position: absolute;
    z-index: 3;
    top: 67% !important;
    left: 13% !important; 
  }   
  .img-1x{ 
    max-width: 68%;  
 /* object-fit: cover;*/
  } 
  .sect1{ 
    background-color: #fff;
    position: relative;
    padding-top: 30px;
    height: 100vh; 
  }
  .sect1 .box-color{ 
    height: calc(100vh - 200px);  
  }
  .sect1 h2{ 
    font-size: 54px; 
  } 
}      

@media (width: 1920px) { 
  .img-1x {
    max-width: 71%;
 /* object-fit: cover;*/
    width: 71%;
  }
  .sect1 h3 { 
    top: 61% !important;
    left: 13% !important;
  } 
  .sect1 .box-color {
    height: calc(100vh - 296px);
  } 
  .sect1 h2 {
    font-size: 64px;
  }
}

@media (width: 480px) {  
  .plan-ver .img {
    height: 280px;
   /* margin-left: -10%;*/
  }
}

@media (min-width: 607px) and (max-width: 608px) { /* IPAD MINI */
  .sect1{
    height: 100%;
  }   
  .sect1 .box-color{
    height: calc(100% - 75px); 
  }
  .img-1x {
    max-width: 100%;
 /* object-fit: cover;*/
    width: 100%;
  } 
  .sect1 h3 {
    font-size: 30px;
    top: 66%;
    left: 5%;
  }
  .sect2{
    height: 100%;
    padding-bottom: 100px;
  }  
  .sect2 .container-fluid {
    height: 100%;
    padding-bottom: 50px;
  }
  .btn-des2 { 
    margin-top: 50px; 
    margin-bottom: 50px; 
  }
  .bgf {
    height: 100px; 
  }
  .plan-ver {
    margin-top: 40px;
  }
  .sect4 .swiper-button-prev {
    left:  5% !important; 
  }
  .sect4 .swiper-button-next {
    right:  5% !important; 
  }
  .sect5:after { 
    width: 0 !important; 
  }
  .text-rot { 
    top: 53%;
    right: -35%; 
  }
  .sect6 .swiper-button-prev { 
    left: 83% !important; 
  }
  .sect6 .swiper-button-next { 
    left: 92% !important; 
  }
}
  
@media (width: 820px) {  /* IPAD AIR5 */
  .sect1 h3 {
    font-size: 30px;
    top: 72%;
    left: 10%;
  }
  .sect1{
    height: 100%;
  }
  .sect1 .box-color{
    height: calc(100% - 75px); 
  }
  .sect2{
    height: 100%;
    padding-top: 100px;
    padding-bottom: 150px;
  }
  .sect3{
    height: 100%;
    padding-top: 30px;
    padding-bottom: 30px;
  }
  .plan-ver  {
    margin-top: 40px;
  } 
  .plan-ver .img {
    height: 370px !important; 
    margin-left: 0% !important;
  }
  .img-1x{ 
    max-width: 100%;  
 /* object-fit: cover;*/
  } 
  .sect4 .swiper-button-next {
    right: 5% !important; 
  }
  .sect4 .swiper-button-prev {
    left: 5% !important; 
  } 
  .sect5:after{ 
    position: absolute;
    content: "";
    width: 0%;
    background-image: url(../../designdecor_6styles/images/mid_century/sect5-bg.webp);
    background-size: auto 100% !important;
    background-repeat: no-repeat !important;
    background-position: right   center;
    height: 100%;
    min-height: 1080px;
    top: 0;
    left: 0;
  } 
  .text-rot { 
    top: 65%;
    right: -27%; 
  } 
  .sect6 .swiper-button-prev { 
    left: 87% !important; 
  }
  .btn-des2 { 
    margin-top: 30px; 
  }
  .bgf {
    height: 100px; 
  }
}
 
@media (min-width: 573px) and (max-width: 581px) {  /* IPAD AIR4 */
  .sect1 h3 {
    font-size: 30px;
    top: 64%;
    left: 5%;
  }
  .sect1{
    height: 100%;
  }
  .sect1 .box-color{
    height: calc(100% - 75px); 
  }
  .sect2{
    height: 100%;
    padding-top: 100px;
    padding-bottom: 150px;
  }
  .sect3{
    height: 100%;
    padding-top: 30px;
    padding-bottom: 30px;
  }
  .plan-ver  {
    margin-top: 40px;
  }  
  .plan-ver .img {
    height: 300px !important;
    margin-left: -3% !important;
  }
  .img-1x{ 
    max-width: 100%;  
 /* object-fit: cover;*/
  } 
  .sect4 .swiper-button-next {
    right: 5% !important; 
  }
  .sect4 .swiper-button-prev {
    left: 5% !important; 
  } 
  .sect5:after{ 
    position: absolute;
    content: "";
    width: 0%;
    background-image: url(../../designdecor_6styles/images/mid_century/sect5-bg.webp);
    background-size: auto 100% !important;
    background-repeat: no-repeat !important;
    background-position: right   center;
    height: 100%;
    min-height: 1080px;
    top: 0;
    left: 0;
  } 
  .text-rot { 
    top: 65%;
    right: -36%; 
  }  
  .btn-des2 { 
    margin-top: 30px; 
  }
  .bgf {
    height: 100px; 
  } 
  .sect6 .swiper-button-prev {
    left: 80% !important;
  }
  .sect6 .swiper-button-next {
    left: 90% !important;
  }
}
 
@media (min-width: 1504px) and (max-width: 1559px) { /* Macbook Air 1559x975 -- Pro Display XDR  1504x846*/ 
  .sect1{  
    height: 100vh; 
  }
  .sect1 .box-color{
    height: calc(100% - 378px); 
  }
  .sect1 h2{ 
    font-size: 44px; 
  } 
  .sect1 h1{ 
    font-size: 54px; 
  }  
  .sect1 h3{    
    top: 54%;
    left: 16%;
  } 
  .img-1x{ 
    max-width: 71%;
 /* object-fit: cover;*/
    position: absolute;
    right: -10px;
  } 
  .text-rot { 
    top: 55%;
    right: -13.5%; 
  }
}     

@media (min-width: 1727px) and (max-width: 1728px) { /* Macbook Pro 16 */ 
  .sect1{  
    height: 100vh; 
  }
  .sect1 .box-color{
    height: calc(100% - 378px); 
  }
  .sect1 h2{ 
    font-size: 44px; 
  } 
  .sect1 h1{ 
    font-size: 54px; 
  }  
  .sect1 h3{    
    top: 45.5% !important;
    left: 12% !important;
  } 
  .img-1x{ 
    max-width: 71%;
 /* object-fit: cover;*/
    position: absolute;
    right: -10px;
  } 
  .text-rot { 
    top: 55%;
    right: -12%; 
  }
} 


@media (width: 1280px)  { /* Studio Display 1280x720 */ 
  .sect1{  
    height: 100vh; 
  }
  .sect1 .box-color{
    height: calc(100% - 218px); 
  }
  .sect1 h2{ 
    font-size: 44px; 
  } 
  .sect1 h1{ 
    font-size: 54px; 
  }  
  .sect1 h3{    
    top: 60% !important;
    left: 12% !important;
  } 
  .img-1x{ 
    max-width: 71%;
 /* object-fit: cover;*/
    position: absolute;
    right: -10px;
  } 
  .text-rot { 
    top: 55%;
    right: -16%; 
  }
  .plan-ver .img { 
    height: 315px; 
  }
} 


@media (width: 1120px)  { /* iMac 24 1120x630  */ 
  .sect1{  
    height: 100vh; 
  }
  .sect1 .box-color{
    height: calc(100% - 218px); 
  }
  .sect1 h2{ 
    font-size: 44px; 
  } 
  .sect1 h1{ 
    font-size: 54px; 
  }  
  .sect1 h3{    
    top: 60% !important;
    left: 12% !important;
    font-size: 44px; 
  } 
  .img-1x{ 
    max-width: 71%;
 /* object-fit: cover;*/
    position: absolute;
    right: -10px;
  } 
  .text-rot { 
    top: 55%;
    right: -20%; 
  }
  .plan-ver .img { 
    height: 300px; 
  }
  .sect4 .swiper-button-prev {
    left: 5% !important; 
  }
  .sect4 .swiper-button-next {
    right: 5% !important; 
  }
}