.itopplus-background {

}
body {
  overflow: hidden;
      font-family: "LINE Seed Sans TH";
}


.itopplus-slide{
  background-image: url(https://itp1.itopfile.com/ImageServer/z_itp_27012025k6f7/0/0/ImtroPagez-z1225942451630.jpg);
  background-size: 100% auto;
  background-repeat: no-repeat;
}


.itopplus-banner{
  display: none;
}







/*  Layout */
.boderedlayoutClient {
  border-top: 0px dashed transparent;
  border-left: 0px dashed transparent;
  border-right: 0px dashed transparent;
  border-bottom: 0px dashed transparent;
}


/* class  */


.sunshine-grid {
    display: grid;
    grid-template-columns: 54% 44%;
    margin-bottom: 3%;
    gap: 20px;
}
.sunshine-family {
    padding: 3% 3% 2.8%;
}
.sunshine-logo {
    width: 50%;
    margin-bottom: 7%;
}
.sunshine-family h2 {
    color: #0c61b0;
    font-weight: 600;
}
.sunshine-family h5 {
    color: #111032;
    letter-spacing: 1.5px;
    margin-bottom: 3%;
}
.sunshine-family h3 {
    white-space: break-spaces;
    /* text-align: justify; */
    margin-right: 3.3%;
}
.sunshine-family-text {
    font-size: 16px;
}
.sunshine-button {
    display: flex;
    width: 100%;
    justify-content: center;
    gap: 10px;
    margin-top: 15%;
}
.sunshine-button-iamge {
    width: 10%;
    align-self: center;
}
.sunshine-button-text {
    font-size: 14px;
    align-self: center;
    color: #656565;
}
.sunshine-icon {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin-top: 5%;
    row-gap: 20px;
    column-gap: 25px;
    margin-bottom: -5%;
}
.sunshine-bg {
    /* background-color: rgb(255 255 255 / 40%); */
    /* border: solid 1px #d9dde3; */
    /* border-radius: 20px; */
    background-image: url(http://itp1.itopfile.com/ImageServer/z_itp_27012025k6f7/0/0/bgz-z1269805087209.webp);
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center;
    padding: 18% 10%;
    transition: 0.5s;
}
.sunshine-bg:hover {
    transform: scale(1.05);
}
.sunshine-block {
    align-self: center;
}




h1,h2,h3,h4,h5,h6 {
  line-height: inherit;
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 400;
}

h1 {
  font-size: 2em;
}
h2 {
  font-size: 3em;
}
h3 {
  font-size: 18px;
}
h4 {
  font-size: 20px;
}
h5 {
  font-size: 22px;
}
h6 {
  font-size: 26px;
}
p {
  font-size: 16px;
}






 
@media screen and (min-width : 1900px) {
.sunshine-family {
    padding: 1% 3% 3%;
}
.sunshine-family h5 {
    letter-spacing: 1.7px;
} 
.sunshine-family h3 {
    margin-right: 6%;
} 
.sunshine-logo {
    width: 45%;
}
.sunshine-button-text {
    font-size: 16px;
} 
.sunshine-button-iamge {
    width: 8%;
} 
.sunshine-bg {
    padding: 19% 10%;
}
.sunshine-icon {
    display: grid;
    grid-template-columns: repeat(2,1fr););
    margin-top: 7%;
    margin-bottom: -7%;
    row-gap: 20px;
    column-gap: 25px;
} 
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
h2 {
    font-size: 4em;
}
h3 {
    font-size: 20px;
} 
h5 {
    font-size: 30px;
}
  
  
  
}

@media screen and (max-width : 1191px) {
.itopplus-slide {
    background-size: cover;
    background-position: center;
}
.sunshine-family {
    padding: 10% 3% 10%;
}  
  
  
  

  
}  
  
@media screen and (max-width : 900px) {
.sunshine-family h5 {
    font-size: 14px;
}
.sunshine-family {
    padding: 3% 3% 3%;
}  
  
  
  
  
  
h2 {
    font-size: 2em;
} 
h3 {
    font-size: 16px;
} 
}

@media screen and (max-width : 480px) {
body {
  overflow: unset;

}
  
  
.sunshine-grid {
    grid-template-columns: repeat(1, 1fr);
}
.sunshine-family h2 {
    font-size: 24px;
} 
.sunshine-family h5 {
    font-size: 16px;
} 
.sunshine-family-text {
    font-size: 14px;
    text-align: center;
    margin-top: 10%;
} 
  
  
}