body {
    box-sizing: border-box;
    margin: 0;
    overflow-x: hidden;
}

body.th {
    font-family: "IBM Plex Sans Thai", serif;
}

body.en {
    font-family: "Gantari", serif;
}

h1 {
    font-size: 54px;
    line-height: 110%;
    font-weight: 400;
}

h2 {
    font-size: 48px;
    line-height: 110%;
    font-weight: 400;
}

h3 {
    font-size: 32px;
    line-height: 110%;
    font-weight: 400;
}

h4 {
    font-size: 24px;
    line-height: 110%;
    font-weight: 400;
}

h6 {
    font-size: 18px;
    line-height: 110%;
    font-weight: 400;
}

.pb-16 {
    padding-bottom: 16px;
}

/* header */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 800;
}

#header {
    height: 72px;
    background: #FFFFFF;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    border-style: solid;
    border-color: #e5e5e5;
    border-width: 0px 0px 1px 0px;
}

header .header-menu {
    height: 72px;
    display: flex;
}

header .logo {
    display: flex;
    align-items: center;
    padding: 0 27px;
}

header .logo-din-39 {
    flex-shrink: 0;
    width: 76px;
    height: 47px;
    position: relative;
    object-fit: cover;
}

header .navbar-menu {
    display: flex;
    flex-direction: row;
    gap: 54px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    height: 72px;
    position: relative;
    padding-left: 64px;
    font-size: 16px;
    line-height: 110%;
}

header .navbar-items {
    display: flex;
    flex-direction: row;
    gap: 0px;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
    border-style: solid;
    border-color: #e5e5e5;
    border-width: 0px 0px 1px 0px;
}

header .navbar-items:hover {
    border-style: solid;
    border-color: #D55801;
    border-width: 0px 0px 2px 0px;
    cursor: pointer;
}

header .navbar-items.home {
    padding: 0 7px;
}

header .navbar-items a {
    text-decoration: none;
    color: #000000;
}

header .navbar-items.active {
    border-style: solid;
    border-color: #D55801;
    border-width: 0px 0px 2px 0px;
    cursor: pointer;
}

header .header-social {
    display: flex;
    gap: 16px;
}

header .header-social img {
    width: 24px;
    height: 24px;
}

header .header-social img:hover,
footer .social-footer img:hover,
.about-us-section-5 .social img:hover,
.contact-us-section-2 .social img:hover {
    cursor: pointer;
    filter: invert(42%) sepia(77%) saturate(4400%) hue-rotate(13deg) brightness(94%) contrast(99%);
}

header .header-right {
    height: 72px;
    display: flex;
    align-items: center;
}

header .header-language {
    height: 72px;
    display: flex;
    align-items: center;
    padding-left: 24px;
    cursor: pointer;
}

header .sub-language-menu {
    display: none;
}

header .sub-language-menu.active {
    background: #ffffff;
    border-radius: 4px;
    border-style: solid;
    border-color: #000000;
    border-width: 1px;
    padding: 4px;
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    gap: 0px;
    align-items: flex-start;
    justify-content: flex-start;
    width: 200px;
    position: absolute;
    box-shadow: 12px 12px 20px 0px rgba(0, 0, 0, 0.1);
    right: 2%;
}

header .sub-mobile-menu.active {
    background: #ffffff;
    border-radius: 4px;
    border-style: solid;
    border-color: #000000;
    border-width: 1px;
    padding: 16px 8px;
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    gap: 0px;
    align-items: flex-start;
    justify-content: flex-start;
    width: 220px;
    position: absolute;
    box-shadow: 12px 12px 20px 0px rgba(0, 0, 0, 0.1);
    right: 4%;
}

header .sub-language-menu-item,
header .sub-mobile-menu-item {
    display: flex;
    justify-content: space-between;
    width: 190px;
    padding: 6px 20px;
}

header .header-icon-mobile {
    height: 72px;
    display: none;
    align-items: center;
    padding-left: 24px;
    cursor: pointer;
}

header .link-menu {
    display: flex;
    align-items: baseline;
}

header .icon-close-menu,
header .sub-mobile-menu {
    display: none;
}

header .sub-mobile-menu-item.active,
header .sub-mobile-menu-item:hover {
    color: #d55801;
}

header .header-social-box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
}

/* end header */

/* home */
#banner-slider {
    margin-top: 72px;
    overflow-x: hidden;
}

#banner-slider .carousel-item {
    background: no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#banner-slider .carousel-item img {
    width: 100%;
    height: 567px;
    object-fit: cover;
}

#banner-slider .carousel-control-prev {
    width: auto;
    padding-left: 56px;
    opacity: 1;
}

#banner-slider .carousel-control-next {
    width: auto;
    padding-right: 56px;
    opacity: 1;
}

#banner-slider .carousel-dot {
    position: absolute;
    top: 575px;
    width: 100%;
}

#banner-slider .carousel-dot-1 {
    display: flex;
    gap: 8px;
    justify-content: center;
}

#banner-slider .carousel-dot-item {
    width: 12px;
    height: 8px;
    background: #dcdcdc;
    border-radius: 100px;
}

#banner-slider .carousel-dot-item.active {
    width: 40px !important;
    background: #d55801 !important;
}

.carousel-indicators {
    margin-bottom: 2rem;
}

.carousel-indicators [data-bs-target] {
    box-sizing: content-box;
    flex: 0 1 auto;
    width: 12px;
    height: 8px;
    padding: 0;
    margin-right: 3px;
    margin-left: 3px;
    text-indent: -999px;
    cursor: pointer;
    background-color: #dcdcdc;
    border: 0;
    opacity: 1;
    transition: opacity .6s ease;
    border-radius: 9px;
}

.carousel-indicators .active {
    width: 40px !important;
    background-color: #d55801 !important;
}

#banner-slider .home-txt-1-span {
    content: "";
    display: block;
}

#banner-slider .join-us {
    /* font-family: "Gantari", serif !important; */
    background: transparent;
    color: #ffffff;
    border: 1px solid #ffffff;
    padding: 14px 19px;
    min-width: 172px;
    font-size: 14px;
    letter-spacing: 0.0125em;
    font-weight: 600;
}

#banner-slider .join-us:hover {
    background: #D55801;
    border: 1px solid #D55801;
    color: #FFFFFF;
}

#banner-slider .home-img-txt {
    color: #FFFFFF;
    width: 100%;
    display: grid;
    padding: 0 20%;
    position: absolute;
    top: 170px;
    /* text-align: center; */
}

#banner-slider .home-txt-1 {
    font-size: 60px;
    font-weight: 600;
    line-height: 110%;
    padding-bottom: 48px;
    margin: 0;
}

#banner-slider .home-txt-2 {
    /* width: 100%; */
    font-size: 18px;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: 0.2px;
    /* left: 50%;
    transform: translate(-50%, -50%); */
}

.home-section-2 {
    padding: 148px 128px;
}

.home-section-2 .section-2-info {
    display: flex;
}

.home-section-2 .section-2-image {
    display: flex;
    align-items: center;
    flex: 0 1 calc(40%);
    background: linear-gradient(90deg, rgb(164 175 187) 0%, rgb(195 206 215) 35%, rgb(205 215 225) 100%);
}

.home-section-2 .section-2-image img {
    width: 100%;
}

.home-section-2 .section-2-txt {
    flex: 0 1 calc(60%);
    padding-left: 128px;
}

.home-section-2 .section-2-about-us {
    font-size: 14px;
    line-height: 140%;
    letter-spacing: 0.2px;
    font-weight: 400;
    padding-bottom: 16px;
    margin: 0;
}

.home-section-2 .home-txt {
    font-size: 18px;
    line-height: 140%;
    letter-spacing: 0.2px;
    font-weight: 400;
    margin: 0;
}

.home-section-2 .section-2-din39 {
    color: #d55801;
    font-size: 54px;
    line-height: 110%;
    font-weight: 600;
    padding-bottom: 24px;
    margin: 0;
}

.section-2-detail {
    display: grid;
    padding-bottom: 48px;
}

.home-section-2 .see-more {
    padding: 14px 34px;
    font-family: "Gantari", serif;
    font-size: 14px;
    letter-spacing: 0.0125em;
    font-weight: 600;
    background: #ffffff;
    color: #000000;
    border: 1px solid #000000;
}

.home-section-2 .see-more:hover {
    background: #D55801;
    border: 1px solid #D55801;
    color: #FFFFFF;
}

.home-section-3 {
    padding: 128px 148px;
    background: #E0D2AC;
}

.home-section-3 .section-3-title {
    font-size: 54px;
    line-height: 110%;
    font-weight: 600;
    color: #d55801;
    padding-bottom: 56px;
    display: flex;
    justify-content: center;
    margin: 0;
}

.home-section-3 .classes-home {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.home-section-3 .classes-home-card {
    flex-grow: 1;
    width: 31%;
}

.home-section-3 .card-classes-flex {
    display: flex;
    background: #fff;
}

.home-section-3 .classes-detail {
    flex: 0 1 calc(55%);
    padding: 64px 24px;
    display: flex;
    flex-flow: column;
}

.home-section-3 .classes-detail-title {
    /* font-size: 24px;
    line-height: 120%; */
    font-weight: 600;
    color: #3a3845;
    padding-bottom: 24px;
    margin: 0;
}

.home-section-3 .classes-detail-age {
    padding-bottom: 16px;
    margin: 0;
}

.home-section-3 .classes-detail-other {
    color: #595667;
    font-size: 16px;
    line-height: 140%;
    letter-spacing: 0.2px;
    font-weight: 400;
    padding-bottom: 16px;
    margin: 0;
}

.home-section-3 .fine-out-more {
    font-size: 14px;
    letter-spacing: 0.0125em;
    font-weight: 400;
    text-decoration: underline;
    margin-top: auto;
}

.home-section-3 .fine-out-more:hover {
    cursor: pointer;
    color: #d55801;
}

.home-section-3 .classes-image {
    flex: 0 1 calc(45%)
}

.th .home-section-3 .classes-image img,
.en .home-section-3 .classes-image img {
    width: 100%;
    height: 498px;
    object-fit: cover;
}

.home-section-3 .classes-1 .text-braek-line {
    content: "";
    display: block;
}

.home-section-4 {
    padding: 60px 148px;
}

.home-section-4 .section-4-info {
    display: grid;
    gap: 24px;
}

.home-section-4 .section-4-img {
    display: flex;
    justify-content: center;
}

.home-section-4 .section-4-img img {
    width: 248px;
}

.home-section-4 .section-4-txt {
    text-align: center;
    padding: 24px 0;
    margin: 0;
}

.home-section-4 .section-4-txt-span {
    content: "";
    display: block;
}

.home-section-4 .ceo-name {
    color: #31373d;
    text-align: center;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    line-height: 19.6px;
    letter-spacing: -0.1px;
    font-weight: 500;
    margin: 0;
}

.home-section-4 .position {
    color: #555e67;
    text-align: center;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    line-height: 19.6px;
    letter-spacing: -0.1px;
    font-weight: 500;
    margin: 0;
}

.home-section-4 .section-4-ceo {
    display: grid;
    gap: 4px;
}

.home-section-5 .section-5-gallery {
    position: relative;
    display: flex;
    overflow-x: auto;
}

.home-section-5 .section-5-gallery img {
    width: 480px;
}

.section-5-gallery::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.section-5-gallery .thin_scroll {
    scrollbar-width: thin;
}


.home-section-5 .image {
    opacity: 1;
    display: block;
    width: 100%;
    height: auto;
    transition: .5s ease;
    backface-visibility: hidden;
}

.home-section-5 .gallery-img:hover .image {
    cursor: pointer;
    filter: hue-rotate(17deg) brightness(60%) contrast(105%);
}



/* end home */

/* footer */
footer {
    padding: 64px 64px 24px 64px;
    border-top: 1px solid #e8e8e8;
}

footer .footer-detail {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

footer .logo {
    padding-left: 27px;
    cursor: pointer;
}

footer .footer-logo-din-39 {
    width: 76px;
}

footer .social-footer {
    padding: 0 8px;
    display: flex;
    gap: 8px;
}

footer .footer-social-box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
}

/* end footer */

/* about us */
.about-us-section-1 img {
    width: 100%;
}

.about-us-section-2 {
    padding: 128px 148px 96px 148px;
}

.about-us-section-2 .about-us {
    display: flex;
    gap: 48px;
}

.about-us-section-2 .about-us-title {
    min-width: 30%;
    padding: 0px 0px 48px 0px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: flex-start;
    justify-content: flex-start;
    flex-shrink: 0;
    position: relative;
}

.about-us-section-2 .text-title {
    color: #d55801;
    line-height: 110%;
    font-weight: 600;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 0;
}

.about-us-section-2 .about-us-info {
    padding: 0px 0px 0px 128px;
    display: flex;
    flex-direction: column;
    flex: 1;
    position: relative;
}

.about-us-section-2 .about-us-info-1,
.about-us-section-2 .about-us-info-2 {
    font-size: 18px;
    line-height: 140%;
    letter-spacing: 0.2px;
    margin: 0;
}

.about-us-section-2 .about-us-info-name {
    font-size: 18px;
    line-height: 140%;
    letter-spacing: 0.2px;
    font-weight: 500;
    margin: 0;
    padding-top: 8px;
}

.about-us-section-3 {
    padding: 0 148px;
}

.about-us-section-3 .section-3-detail {
    display: flex;
    gap: 24px;
}

.about-us-section-3 .flex-img-1 {
    flex: 0 1 calc(50.9% - 24px);
}

.about-us-section-3 .flex-img-2 {
    flex: 0 1 calc(48.9%);
}

.about-us-section-3 .section-3-detail img {
    width: 100%;
}

.about-us-section-4 .section-4-detail {
    padding: 96px 295px 0 295px;
}

.about-us-section-4 video {
    width: 850px;
    height: 450px;
    object-fit: cover;
}

.about-us-section-5 {
    padding: 48px 295px 0 295px;
}

.about-us-section-5 .section-5-detail {
    display: grid;
    justify-content: center;
    gap: 24px;
    padding: 96px 0;
}

.about-us-section-5 .section-5-txt {
    text-align: center;
    font-size: 32px;
    line-height: 110%;
    font-weight: 400;
    margin: 0;
}

.about-us-section-5 .text-din39 {
    color: #d55801;
}

.about-us-section-5 .social {
    display: flex;
    justify-content: center;
    gap: 16px;
    padding: 8px 0;
}

.about-us-section-5 .social-box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
}

.about-us-section-5 .see-where-the-magic {
    content: "";
    display: block;
}

/* end about us */

/* classes */
.classes-section-1 img {
    width: 100%;
}

.classes-section-1 .classes-img-txt {
    color: #FFFFFF;
    width: 100%;
    display: grid;
    text-align: center;
    position: absolute;
    top: 295px;
    left: 50%;
    transform: translate(-50%, -50%);
}

.classes-section-1 .classes-txt-2 {
    width: 100%;
    font-size: 18px;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: 0.2px;
}

.classes-section-2 {
    padding: 128px 148px 96px 148px;
}

.classes-section-2 .section-2-info {
    display: grid;
}

.classes-section-2 .section-2-title {
    text-align: center;
    padding: 0px 0px 48px 0px;
}

.classes-section-2 .text-title {
    color: #d55801;
    line-height: 110%;
    font-weight: 600;
    margin: 0;
}

.classes-section-2 .section-2-detail {
    padding: 0px 0px 0px 128px;
    display: flex;
    font-size: 18px;
    line-height: 140%;
    letter-spacing: 0.2px;
    font-weight: 400;
}

.classes-section-3 {
    padding: 0 148px;
}

.classes-section-3 .event-feed__grid-wrapper {
    align-items: stretch;
}

.classes-section-3 .grid-wrapper {
    list-style: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: 0;
    margin-left: 0;
    row-gap: 24px;
    column-gap: 24px;
}

.classes-section-3 ul {
    margin-left: 1.75rem;
    padding: 0;
}

.classes-section-3 li {
    list-style: none;
    margin-bottom: 56px;
}

.classes-section-3 .classes-detail-txt li {
    list-style: disc;
    margin: 0;
    font-size: 12px;
}

.classes-section-3 .classes-item {
    position: relative;
    display: grid !important;
    grid-template-rows: auto 1fr 0;
    height: 100%;
    width: 100%;
    grid-template-rows: auto;
    grid-template-columns: 34vw 1fr 0;
}

.classes-section-3 .classes-item-image {
    width: 34vw;
}

.classes-item-image .image-classes {
    display: flex;
    gap: 16px;
    padding-top: 16px;
}

.classes-item-image .image-classes .image-classes-box {
    flex: 0 1 calc(25%);
}

.classes-item-image .image-show img {
    width: 100%;
    height: 346px;
    object-fit: cover;
}

.en .classes-item-image .image-show.classes-1 img {
    height: 382px;
}

.th .classes-item-image .image-show.classes-4 img {
    height: 453px;
}

.en .classes-item-image .image-show.classes-4 img {
    height: 477px;
}

.th .classes-item-image .image-show.classes-5 img,
.en .classes-item-image .image-show.classes-5 img {
    height: 611px;
}

.th .classes-item-image .image-show.classes-6 img {
    height: 840px;
}

.en .classes-item-image .image-show.classes-6 img {
    height: 720px;
}

.classes-item-image .image-classes img {
    width: 100%;
    height: 92px;
    object-fit: cover;
    cursor: pointer;
}

.classes-item-image .image-classes .active img,
.classes-item-image .image-classes img:hover {
    border: 2px solid #d55801;
}

.classes-section-3 .classes-item-detail {
    display: flex;
    height: 100%;
    position: relative;
}

.classes-item-detail .card-hover {
    display: flex;
    height: 100%;
    position: relative;
}

.classes-item-detail .card-hover:after {
    transition: background-color 300ms ease;
    position: absolute;
    content: " ";
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: #ff5c4d;
}

.classes-item-detail .classes-item-detail-all {
    display: flex;
    padding: 24px 0;
    box-sizing: border-box;
}

.classes-item-detail .detail-1 {
    padding: 54px 24px 54px 54px;
    border-right: 1px solid #e8e8e8;
    display: flex;
    flex-flow: column;
    min-width: 54%;
}

.classes-item-detail .btn-group_join-us {
    margin-top: auto;
}

.classes-item-detail .btn-group_join-us2 {
    display: none;
}

.classes-item-detail .detail-2 {
    padding: 54px 24px 54px 54px;
    min-width: 46%;
}

.classes-item-detail .classes-detail {
    font-size: 18px;
    line-height: 120%;
    font-weight: 600;
    color: #0a0a0a;
    padding-bottom: 24px;
    margin: 0;
}

.classes-item-detail .classes-5 .classes-detail {
    font-size: 16px;
    line-height: 140%;
    font-weight: 600;
    letter-spacing: 0.2px;
    color: #0a0a0a;
    margin: 0;
    padding-bottom: 8px;
}

.classes-item-detail .classes-font {
    font-size: 16px;
    line-height: 140%;
    letter-spacing: 0.2px;
}

.classes-item-detail .classes-font-title {
    font-weight: 600;
}

.classes-item-detail .classes-detail-txt {
    font-size: 16px;
    line-height: 140%;
    letter-spacing: 0.2px;
    font-weight: 400;
    margin: 0;
}

.th .classes-item-detail .classes-detail-txt_c6 {
    display: none;
}

.classes-item-detail .classes-cost-detail {
    display: grid;
    gap: 16px;
}

.classes-item-detail .classes-cost-detail.classes-5 {
    gap: 0px;
}

.classes-item-detail .classes-detail-txt.classes-5 {
    padding-left: 8px;
}

.classes-item-detail .painting-class {
    font-size: 32px;
    line-height: 110%;
    font-weight: 600;
    padding-bottom: 24px;
    margin: 0;
}

.classes-item-detail .painting-class-detail {
    color: #0a0a0a;
    font-size: 18px;
    line-height: 140%;
    letter-spacing: 0.2px;
    font-weight: 400;
    margin: 0;
}

.classes-section-4 {
    padding: 56px 0 0 148px;
    background: #E0D2AC;
}

.classes-section-4 .section-4-info {
    display: flex;
}

.classes-section-4 .section-4-detail {
    width: 80%;
    display: grid;
    align-content: center;
    padding: 56px 128px 56px 0;
}

.classes-section-4 .image img {
    width: 100%;
    height: 100%;
}

.classes-section-4 .title {
    padding-bottom: 24px;
    font-size: 54px;
    line-height: 110%;
    font-weight: 600;
    color: #d55801;
}

.classes-section-4 .detail {
    padding-bottom: 48px;
    font-size: 18px;
    line-height: 140%;
    letter-spacing: 0.2px;
    font-weight: 400;
}

.classes-section-4 .btn-group-join {
    display: flex;
    gap: 16px;
}

.en .classes-section-3 .join-us,
.en .classes-section-4 .join-us {
    font-family: "Gantari", serif;
}

.th .classes-section-3 .join-us,
.th .classes-section-4 .join-us {
    font-family: "IBM Plex Sans Thai", serif;
}

.classes-section-3 .join-us,
.classes-section-4 .join-us {
    font-size: 14px;
    letter-spacing: 0.0125em;
    font-weight: 600;
    padding: 14px 19px;
    min-width: 136px;
    background: transparent;
    border: 1px solid #000000;
    color: #000000;
}

.en .classes-section-4 .see-more {
    font-family: "Gantari", serif;
}

.th .classes-section-4 .see-more {
    font-family: "IBM Plex Sans Thai", serif;
}

.classes-section-4 .see-more {
    font-size: 14px;
    letter-spacing: 0.0125em;
    font-weight: 600;
    padding: 14px 19px;
    width: 136px;
    background: #000000;
    color: #FFFFFF;
    border: 1px solid #000000;
}

.classes-section-4 .join-us:hover,
.classes-section-4 .see-more:hover,
.classes-section-3 .join-us:hover {
    background: #D55801;
    border: 1px solid #D55801;
    color: #FFFFFF;
}

.classes-section-5 .section-5-gallery {
    position: relative;
    display: flex;
    overflow-x: auto;
}

.classes-section-5 .section-5-gallery img {
    width: 480px;
}

.section-5-gallery::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.section-5-gallery .thin_scroll {
    scrollbar-width: thin;
}

.classes-section-5 .image {
    opacity: 1;
    display: block;
    width: 100%;
    height: auto;
    transition: .5s ease;
    backface-visibility: hidden;
}

.classes-section-5 .gallery-img:hover .image {
    cursor: pointer;
    filter: hue-rotate(17deg) brightness(60%) contrast(105%);
}

.classes-section-1 .classes-txt-1 {
    display: inline-table;
    width: 100%;
    font-size: 60px;
    font-weight: 600;
    line-height: 110%;
    margin-bottom: 16px;
}

.classes-section-2 .text-title-2 {
    content: "";
    display: block;
}

.th .home-section-3 .classes-image.classes-2 img {
    object-position: 0;
}

/* end classes */

/* contact */
.contact-us-img-txt {
    color: #FFFFFF;
    width: 100%;
    display: grid;
    text-align: center;
    position: absolute;
    top: 235px;
    left: 50%;
    transform: translate(-50%, -50%);
}

.contact-us-txt-1 {
    width: 100%;
    font-size: 60px;
    font-weight: 600;
    line-height: 110%;
    margin-bottom: 16px;
}

.contact-us-txt-2 {
    width: 100%;
    font-size: 18px;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: 0.2px;
    margin: 0;
}

.link-language {
    display: flex;
    align-items: baseline;
}

.link-language img {
    width: 32px;
    height: 10px;
    object-fit: cover;
    filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(17deg) brightness(0%) contrast(100%);
}

.contact-us-info {
    padding: 48px 0 40px 0;
    display: flex;
    justify-content: space-between;
    gap: 24px;
}

.contact-us-info .info-1 {
    display: grid;
    align-items: end;
    grid-template-rows: auto 0fr;
    gap: 32px;
}

.contact-us-info .info-2 {
    display: grid;
    align-content: space-between;
}

.contact-info-1,
.contact-info-2 {
    display: grid;
    gap: 16px;
}

.title-info-1 {
    display: flex;
    font-size: 16px;
    line-height: 140%;
    letter-spacing: 0.2px;
    font-weight: 600;
    padding-bottom: 16px;
    margin: 0;
}

.title-info-2 {
    display: flex;
    font-size: 16px;
    line-height: 140%;
    letter-spacing: 0.2px;
    font-weight: 600;
    margin: 0;
}


.contact-detail {
    display: flex;
    flex-direction: row;
    gap: 40px;
    align-items: flex-start;
    justify-content: flex-start;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
}

.call-us-detail {
    display: flex;
    flex-direction: column;
    gap: 0px;
    align-items: flex-start;
    justify-content: flex-start;
    flex-shrink: 0;
    position: relative;
}

.frame-10000019303 {
    padding: 0px 0px 8px 0px;
    display: flex;
    flex-direction: row;
    gap: 0px;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
}

.call-us {
    color: #000000;
    text-align: left;
    font-size: 14px;
    line-height: 140%;
    letter-spacing: 0.2px;
    font-weight: 400;
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 0;
}

.component-14 {
    display: flex;
    flex-direction: column;
    gap: 0px;
    align-items: flex-start;
    justify-content: flex-start;
    align-self: stretch;
    flex-shrink: 0;
    height: 22px;
    position: relative;
}

.text {
    color: #0057ff;
    text-align: left;
    font-size: 14px;
    line-height: 140%;
    letter-spacing: 0.2px;
    font-weight: 400;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;
}

.text.mobile {
    text-decoration: underline;
}

.frame-1000001932 {
    display: flex;
    flex-direction: column;
    gap: 0px;
    align-items: flex-start;
    justify-content: flex-start;
    flex-shrink: 0;
    position: relative;
}

.email-us {
    color: #000000;
    text-align: left;
    font-size: 14px;
    line-height: 140%;
    letter-spacing: 0.2px;
    font-weight: 400;
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 0;
}

.info-line {
    padding: 8px 0px 0px 0px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    justify-content: flex-start;
    align-self: stretch;
    flex: 1;
    position: relative;
    margin: 0;
}

.info-line .text {
    color: #211f1f;
    text-align: left;
    font-size: 16px;
    line-height: 140%;
    letter-spacing: 0.2px;
    font-weight: 400;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.scan-qr-code {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    justify-content: flex-start;
    flex-shrink: 0;
    width: 128px;
    height: 128px;
    position: relative;
}

.scan-qr-code .image {
    flex-shrink: 0;
    width: 128px;
    height: 128px;
    position: relative;
    object-fit: cover;
}

.address-info {
    font-size: 14px;
    line-height: 140%;
    letter-spacing: 0.2px;
    font-weight: 400;
    padding-bottom: 5px;
}

.address-info .address {
    display: flex;
    cursor: pointer;
}

.address-info .address-title {
    padding-bottom: 8px;
    margin: 0;
}

.address-info .address-detail {
    padding-left: 8px;
    margin: 0;
}

.opening-hours-info {
    display: grid;
    gap: 5px;
}

.opening-hours-title {
    padding-bottom: 8px;
    margin: 0;
}

.opening-hours,
.opening-day {
    display: flex;
    flex-direction: row;
    gap: 0px;
    align-items: flex-start;
    justify-content: flex-start;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
}

.opening-hours .opening-hours-1,
.opening-day .opening-hours-1 {
    font-size: 14px;
    line-height: 140%;
    letter-spacing: 0.2px;
    font-weight: 400;
    position: relative;
    width: 128px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 0;
}

.opening-hours .opening-hours-2,
.opening-day .opening-hours-2 {
    font-size: 14px;
    line-height: 140%;
    letter-spacing: 0.2px;
    font-weight: 400;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 0;
}

.contact-us-section-1 img {
    width: 100%;
}

.contact-us-section-2 {
    padding: 0 148px;
}

.contact-us {
    display: flex;
    flex-wrap: wrap;
    gap: 56px;
    padding: 128px 48px 56px 48px;
}

.contact-us .contact-us-detail {
    flex: 0 1 calc(65% - 56px);
}

.contact-us .contact-us-img {
    flex: 0 1 35%;
}

.contact-us-img img {
    width: 100%;
    height: 100%;
}

.contact-us-google-map {
    width: 99.81%;
    height: 350px;
}

.contact-us-section-2 .text-title {
    font-weight: 600;
    color: #D55801;
    margin: 0;
}

.contact-us-section-2 .social {
    padding: 8px;
    display: flex;
    gap: 24px;
}

.contact-us-section-2 .text-braek-line {
    content: "";
    display: block;
}

/* end contact */

.section-4-detail {
    position: relative;
}

.section-4-detail>video {
    width: 100%;
    vertical-align: middle;
}

.section-4-detail>video.has-media-controls-hidden::-webkit-media-controls {
    display: none;
}

.video-overlay-play-button {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 10px calc(50% - 50px);
    position: absolute;
    top: 20px;
    left: 0;
    display: block;
    opacity: 0.95;
    cursor: pointer;
    transition: opacity 150ms;
}

.video-overlay-play-button:hover {
    opacity: 1;
}

.video-overlay-play-button.is-hidden {
    display: none;
}

.img-bg-video,
.img-bg-video-2 {
    display: none;
}

.back-top {
    /* display: block; */
    position: fixed;
    right: 25px;
    bottom: 25px;
    z-index: 10;
    background: #D55801;
    border-radius: 50%;
    opacity: 0;
}

.back-top a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 1px 6px #0000001a;
    transition: all 0.4s ease 0s;
}

.back-top img {
    height: 14px;
    filter: invert(100%) sepia(100%) saturate(1%) hue-rotate(283deg) brightness(168%) contrast(169%);
}

.back-top.show {
    cursor: pointer;
    -webkit-animation-name: fadeInDown;
    -moz-animation-name: fadeInDown;
    -o-animation-name: fadeInDown;
    animation-name: fadeInDown;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: .5s;
    -moz-animation-duration: .5s;
    -o-animation-duration: .5s;
    animation-duration: .5s;
}

.line-sticky {
    /* display: block; */
    position: fixed;
    right: 25px;
    bottom: 80px;
    z-index: 10;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
}

.line-sticky img {
    width: 44px;
    height: 44px;
}

.line-sticky.show {
    cursor: pointer;
    -webkit-animation-name: fadeInDown;
    -moz-animation-name: fadeInDown;
    -o-animation-name: fadeInDown;
    animation-name: fadeInDown;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translatey(20px);
        -moz-transform: translatey(20px);
        -o-transform: translatey(20px);
        transform: translatey(20px);
    }

    to {
        opacity: 1;
        -webkit-transform: translatey(0);
        -moz-transform: translatey(0);
        -o-transform: translatey(0);
        transform: translatey(0);
    }
}

.gallery-img-overlay {
    position: absolute;
    top: 0;
    height: 100%;
    width: 480px;
    opacity: 0;
    transition: .3s ease;
    cursor: pointer;

}

.gallery-img:hover .gallery-img-overlay {
    opacity: 1;
}

.gallery-img-overlay .icon-ig {
    padding: 5px;
    color: white;
    font-size: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
}

.gallery-img-overlay .icon-ig .p-icon-ig {
    display: flex;
    padding: 8px;
    border-radius: 50%;
    background: #fff;
}

.gallery-img-overlay .icon-ig .p-icon-ig img {
    width: 24px;
    height: 24px;
}

.fadein {
    opacity: 0;
    transition: all 1.5s;
    transform: translate(0, 100px)
}

.fadein.visible {
    opacity: 1;
    transform: translate(0, 0);
}

.fadein-home-about {
    opacity: 0;
    transition: all 1.5s;
    transform: translate(0, 100px)
}

.fadein-home-about.visible {
    opacity: 1;
    transform: translate(0, 0);
}

.fadein-classes {
    opacity: 0;
    transition: all 1.5s;
    transform: translate(0, 100px)
}

.fadein-classes.visible {
    opacity: 1;
    transform: translate(0, 0);
}

.fadein-classes-1 {
    opacity: 0;
    transition: all 1.5s;
    transform: translate(0, 100px)
}

.fadein-classes-1.visible {
    opacity: 1;
    transform: translate(0, 0);
}

/* mobile */
@media (min-width: 375px) and (max-width: 767px) {

    /* header */
    header .navbar-menu,
    header .header-social {
        display: none;
    }

    header .header-icon-mobile {
        display: flex;
    }

    header .logo {
        padding: 0;
    }

    /* end header */

    /* home */
    #banner-slider .carousel-item img {
        height: 567px;
        object-fit: cover;
        object-position: 27%;
    }

    #banner-slider .home-img-txt {
        padding: 0 48px;
    }

    #banner-slider .home-txt-1 {
        font-size: 48px;
    }

    .home-section-2 {
        padding: 0;
    }

    .home-section-2 .section-2-info {
        display: grid;
    }

    .home-section-2 .section-2-txt {
        flex: unset;
        padding: 72px 24px 48px 24px;
    }

    .home-section-2 .section-2-din39 {
        font-size: 32px;
    }

    .home-section-4 {
        padding: 32px 24px;
    }

    .home-section-4 .section-4-txt {
        font-size: 18px;
        line-height: 120%;
    }

    .home-section-4 .section-4-img img {
        width: 128px;
    }

    header .sub-language-menu.active {
        right: 16%;
    }

    .home-section-3 {
        padding: 72px 24px;
    }

    .home-section-3 .section-3-title {
        font-size: 48px;
    }

    .home-section-3 .classes-home {
        display: grid;
    }

    .home-section-3 .classes-home-card {
        width: 100%;
    }

    .home-section-3 .card-classes-flex {
        display: grid;
    }

    .th .home-section-3 .classes-image img,
    .en .home-section-3 .classes-image img {
        height: 205px;
    }

    .home-section-3 .classes-image.classes-2 img {
        object-position: 0px 38%;
    }

    .home-section-3 .classes-image.classes-4 img {
        object-position: bottom;
    }

    .home-section-3 .classes-image.classes-6 img {
        object-position: 0px 83%;
    }

    .home-section-3 .classes-detail {
        padding: 32px 24px;
    }

    .home-section-3 .classes-2 .text-braek-line,
    .home-section-3 .classes-6 .text-braek-line {
        content: "";
        display: block;
    }

    .home-section-5 .section-5-gallery img {
        width: 209px;
    }

    /* end home */

    /* about us */
    .about-us-section-1 img {
        height: 567px;
        object-fit: cover;
        object-position: 82%;
    }

    .about-us-section-2 {
        padding: 48px 24px 72px 24px;
    }

    .about-us-section-2 .about-us {
        display: grid;
        gap: 0;
    }

    .about-us-section-2 .text-title {
        font-size: 32px;
    }

    .about-us-section-2 .about-us-title {
        padding: 0 0 24px 0;
    }

    .about-us-section-2 .about-us-info {
        padding: 0;
    }

    .about-us-section-3 {
        padding: 0 24px;
    }

    .about-us-section-3 .section-3-detail {
        display: grid;
    }

    .about-us-section-4 .section-4-detail {
        padding: 56px 24px 0 24px;
    }

    .about-us-section-5 {
        padding: 0 32px;
    }

    .about-us-section-5 .section-5-txt {
        font-size: 18px;
        line-height: 120%;
        padding: 0 32px;
    }

    .about-us-section-5 .see-where-the-magic {
        display: inline;
    }

    /* .video-overlay-play-button {
        display: none;
    } */

    .about-us-section-4 video {
        display: none;
    }

    .img-bg-video {
        display: block;
    }

    /* end about us */

    /* classes */
    .classes-section-1 img {
        height: 567px;
        object-fit: cover;
    }

    .classes-section-1 .classes-txt-1 {
        font-size: 48px;
        padding: 0 20px;
    }

    .classes-section-1 .classes-txt-span,
    .classes-section-1 .classes-txt-span3 {
        display: inline-block;
    }

    .th .classes-section-1 .classes-txt-2 {
        top: 320px;
    }

    .en .classes-section-1 .classes-txt-2 {
        top: 340px;
    }

    .classes-section-2 {
        padding: 72px 24px 24px 24px;
    }

    .classes-section-2 .section-2-title {
        text-align: left;
        padding: 0px 0px 24px 0px;
    }

    .classes-section-2 .text-title {
        font-size: 32px;
    }

    .classes-section-2 .text-title-2 {
        display: inline;
    }

    .classes-section-3 {
        padding: 0 24px;
    }

    .classes-section-3 .grid-wrapper {
        display: grid;
        row-gap: 0;
    }

    .classes-section-3 .classes-item {
        grid-template-rows: none;
        grid-template-columns: none;
    }

    .classes-section-3 .classes-item-image {
        width: 100%;
    }

    .classes-item-image .image-classes {
        display: none;
    }

    .classes-item-detail .classes-item-detail-all {
        display: grid;
    }

    .classes-item-detail .detail-1 {
        padding: 0;
        border-right: 0;
    }

    .classes-item-detail .painting-class {
        font-size: 18px;
        line-height: 120%;
    }

    .classes-item-detail .painting-class-detail {
        font-size: 16px;
        padding-bottom: 24px;
    }

    .classes-item-detail .btn-group_join-us {
        display: none;
    }

    .classes-item-detail .btn-group_join-us2 {
        display: block;
    }

    .classes-item-detail .detail-2 {
        padding: 24px 0;
    }

    .classes-item-detail .classes-item-detail-all {
        padding: 24px 0 48px 0;
    }

    .classes-section-4 {
        padding: 0 24px;
    }

    .classes-section-4 .section-4-info {
        display: grid;
    }

    .classes-item-image .image-show.classes-4 img,
    .classes-item-image .image-show.classes-5 img,
    .classes-item-image .image-show.classes-6 img {
        height: 345px;
    }

    .classes-section-4 .title {
        font-size: 32px;
    }

    .classes-section-4 .section-4-detail {
        width: 100%;
        padding: 24px 0;
    }

    .classes-section-4 .detail {
        padding-bottom: 24px;
    }

    .classes-section-4 .image img {
        height: 280px;
        object-fit: cover;
        object-position: 58%;
    }

    .classes-section-5 .section-5-gallery img {
        width: 209px;
    }

    .th .classes-item-image .image-show.classes-1 img,
    .en .classes-item-image .image-show.classes-1 img,
    .th .classes-item-image .image-show.classes-2 img,
    .en .classes-item-image .image-show.classes-2 img,
    .th .classes-item-image .image-show.classes-3 img,
    .en .classes-item-image .image-show.classes-3 img,
    .th .classes-item-image .image-show.classes-4 img,
    .en .classes-item-image .image-show.classes-4 img,
    .th .classes-item-image .image-show.classes-5 img,
    .en .classes-item-image .image-show.classes-5 img,
    .th .classes-item-image .image-show.classes-6 img,
    .en .classes-item-image .image-show.classes-6 img {
        height: 327px;
    }

    /* end classes */

    /* contact us */
    .contact-us-section-1 img {
        height: 567px;
        object-fit: cover;
    }

    .contact-us-txt-1 {
        font-size: 48px;
        padding: 0 32px;
    }

    .contact-us-txt-2 {
        top: 310px
    }

    .contact-us-section-2 {
        padding: 0 32px;
    }

    .contact-us {
        padding: 104px 24px 24px 24px;
        gap: 24px;
    }

    .contact-us-section-2 .text-title {
        font-size: 32px;
    }

    .contact-us .contact-us-detail {
        flex: unset;
    }

    .contact-us-info {
        flex-wrap: wrap;
    }

    .contact-us .contact-us-img {
        flex: unset;
        width: 100%;
    }

    .contact-us-img img {
        height: 219px;
        object-fit: cover;
    }

    .title-info-1 {
        padding-bottom: 0px;
    }

    .contact-detail {
        display: grid;
        gap: 16px;
    }

    .info-1 {
        gap: 0;
    }

    .contact-us-google-map {
        height: 190px;
    }

    .contact-us-img-txt {
        top: 290px;
    }

    .contact-us-section-1 .text-braek-line,
    .contact-us-section-1 .text-braek-line2 {
        content: "";
        display: block;
    }

    /* end contact us */

    /* footer */
    footer {
        padding: 40px 24px 24px 24px;
    }

    footer .footer-detail {
        display: grid;
        gap: 24px;
    }

    footer .logo {
        padding-left: 0px;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    footer .grid-item:nth-child(2) {
        order: 2;
        text-align: center;
    }

    footer .ft-din39 {
        content: "";
        display: block;
    }

    footer .social-footer {
        justify-content: center;
        padding: 8px;
    }

    .about-us-section-5 .section-5-detail {
        padding: 72px 0;
    }

    /* end footer */

    .gallery-img-overlay {
        width: 209px;
    }
}

/* ipad แนวตั้ง */
@media (min-width: 768px) and (max-width: 1023px) {
    .fadein-home-about {
        opacity: 1;
        transform: translate(0, 0);
    }

    /* header */
    header .navbar-menu {
        display: none;
    }

    header .header-icon-mobile {
        display: flex;
    }

    header .logo {
        padding: 0;
    }

    /* end header */

    /* footer */
    footer {
        padding: 40px 24px 24px 24px;
    }

    footer .footer-detail {
        display: grid;
        gap: 24px;
    }

    footer .logo {
        padding-left: 0px;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    footer .grid-item:nth-child(2) {
        order: 2;
        text-align: center;
    }

    footer .ft-din39 {
        display: inline;
    }

    footer .social-footer {
        justify-content: center;
        padding: 8px;
    }

    footer .footer-detail {
        justify-content: unset;
    }

    /* end footer */

    /* home */
    .home-section-2 {
        padding: 0;
    }

    #banner-slider .home-txt-1 {
        font-size: 54px;
    }

    .home-section-2 .section-2-din39 {
        font-size: 48px;
    }

    .home-section-2 .section-2-info {
        display: grid;
    }

    .home-section-2 .section-2-txt {
        padding: 104px;
    }

    .home-section-3 {
        padding: 104px 32px;
    }

    .home-section-3 .section-3-title {
        font-size: 48px;
    }

    .home-section-3 .classes-home {
        display: grid;
    }

    .home-section-3 .classes-home-card {
        width: 100%;
    }

    .home-section-3 .classes-image.classes-4 img {
        object-position: bottom;
    }

    .contact-us-img-txt {
        top: 290px;
    }

    .home-section-3 .classes-2 .text-braek-line,
    .home-section-3 .classes-6 .text-braek-line {
        content: "";
        display: block;
    }

    .home-section-4 {
        padding: 60px 128px;
    }

    .home-section-4 .section-4-txt-span {
        display: inline;
    }

    /* end home */

    /* about us */
    .about-us-section-1 img {
        height: 567px;
        object-fit: cover;
    }

    .about-us-section-2 {
        padding: 104px 104px 96px 104px;
    }

    .about-us-section-2 .about-us {
        display: grid;
        gap: 0;
    }

    .about-us-section-2 .about-us-info {
        padding: 0;
    }

    .about-us-section-3 {
        padding: 0 32px 96px 32px;
    }

    .about-us-section-3 .flex-img-1 {
        flex: 0 1 calc(51.8% - 24px);
    }

    .about-us-section-4 .section-4-detail {
        padding: 0 32px;
    }

    .about-us-section-4 video {
        height: 368px;
    }

    .about-us-section-5 {
        padding: 96px 56px 0 56px;
    }

    .video-overlay-play-button {
        top: 0;
    }

    .about-us-section-4 video {
        display: none;
    }

    .img-bg-video-2 {
        display: block;
    }

    /* end about us */

    /* classes */
    .classes-section-1 img {
        height: 523px;
        object-fit: cover;
    }

    .classes-section-1 .classes-txt-1 {
        font-size: 54px;
        padding: 0 115px;
    }

    .classes-section-1 .classes-txt-2 {
        top: 324px;
    }

    .classes-section-1 .classes-txt-span3 {
        display: inline-block;
    }

    .classes-section-2 {
        padding: 104px 104px 96px 104px;
    }

    .classes-section-2 .section-2-title {
        text-align: left;
    }

    .classes-section-2 .text-title-2 {
        display: inline;
    }

    .classes-section-3 {
        padding: 0 32px;
    }

    .classes-item-image .image-classes {
        display: none;
    }

    .classes-section-3 .classes-item {
        grid-template-columns: 22vw 1fr 0;
    }

    .classes-section-3 .classes-item-image {
        width: 22vw;
    }

    .classes-item-detail .detail-1 {
        padding: 24px;
        min-width: 60%;
    }

    .classes-item-detail .detail-2 {
        padding: 24px;
        min-width: 40%;
    }

    .classes-item-detail .painting-class {
        font-size: 24px;
    }

    .classes-item-image .image-show.classes-1 img {
        height: 543px;
        object-position: 38%;
    }

    .classes-item-image .image-show.classes-2 img {
        height: 458px;
        object-position: 43%;
    }

    .classes-item-image .image-show.classes-3 img {
        height: 459px;
        object-position: 48%;
    }

    .th .classes-item-image .image-show.classes-4 img {
        height: 579px;
        object-position: 64%;
    }

    .en .classes-item-image .image-show.classes-4 img {
        height: 670px;
        object-position: 64%;
    }

    .th .classes-item-image .image-show.classes-5 img {
        height: 1085px;
        object-position: 77%;
    }

    .en .classes-item-image .image-show.classes-5 img {
        height: 876px;
        object-position: 80%;
    }

    .th .classes-item-image .image-show.classes-6 img {
        height: 1358px;
        object-position: 62%;
    }

    .en .classes-item-image .image-show.classes-6 img {
        height: 1307px;
        object-position: 59%;
    }

    .classes-item-detail .classes-detail-span {
        content: "";
        display: block;
    }

    .classes-section-4 {
        padding: 56px 32px 0 32px;
    }

    .classes-section-4 .section-4-info {
        display: grid;
    }

    .classes-section-4 .section-4-detail {
        width: 100%;
    }

    /* .classes-section-4 .btn-group-join {
        padding-bottom: 56px;
    } */

    .classes-section-4 .image img {
        height: 409px;
        object-fit: cover;
    }

    /* end classes */

    /* contact */
    .contact-us-section-1 img {
        height: 567px;
        object-fit: cover;
    }

    .contact-us-section-2 {
        padding: 0 32px;
    }

    .contact-us-google-map {
        height: 300px;
    }

    .contact-us {
        display: grid;
        padding: 104px 24px 56px 24px;
    }

    .contact-us-section-2 .text-title {
        font-size: 48px;
    }

    .contact-us-img img {
        height: 454px;
        object-fit: cover;
    }

    .contact-detail {
        display: grid;
        gap: 16px;
    }

    .contact-us-info .info-1 {
        gap: 0;
    }

    .contact-us-info {
        padding: 48px 0 0 0;
    }

    .contact-us-section-1 .text-braek-line {
        content: "";
        display: block;
    }

    .contact-us-txt-2 {
        top: 325px;
    }

    .contact-us-section-1 .text-braek-line3 {
        content: "";
        display: block;
    }

    .contact-us-section-1 .text-braek-line,
    .contact-us-section-1 .text-braek-line2 {
        display: inline;
    }

    /* end contact */
}

/* ipad แนวนอน */
@media (min-width: 1024px) and (max-width: 1365px) {
    .fadein-home-about,
    .fadein-classes,
    .fadein-classes-1 {
        opacity: 1;
        transform: translate(0, 0);
    }

    /* header */
    header .navbar-menu {
        display: none;
    }

    header .header-icon-mobile {
        display: flex;
    }

    header .logo {
        padding: 0;
    }

    /* end header */

    /* home */
    .home-section-2 {
        padding: 0;
    }

    .home-section-2 .section-2-info {
        display: grid;
    }

    .home-section-2 .section-2-txt {
        padding: 104px;
    }

    .home-section-2 .section-2-din39 {
        font-size: 48px;
    }

    .home-section-3 {
        padding: 104px 32px;
    }

    .home-section-3 .section-3-title {
        font-size: 48px;
    }

    .home-section-3 .classes-home {
        display: grid;
    }

    .home-section-3 .classes-home-card {
        width: 100%;
    }

    .home-section-3 .classes-image.classes-4 img {
        object-position: bottom;
    }

    .home-section-3 .classes-image.classes-6 img {
        object-position: 0px 67%;
    }

    .home-section-3 .classes-2 .text-braek-line,
    .home-section-3 .classes-6 .text-braek-line {
        content: "";
        display: block;
    }

    /* end home */

    /* about us */
    .about-us-section-1 img {
        height: 567px;
        object-fit: cover;
    }

    .about-us-section-2 {
        padding: 104px 104px 96px 104px;
    }

    .about-us-section-2 .about-us {
        display: grid;
        gap: 0;
    }

    .about-us-section-2 .about-us-info {
        padding: 0;
    }

    .about-us-section-3 {
        padding: 0 32px 96px 32px;
    }

    .about-us-section-4 .section-4-detail {
        padding: 0 32px;
    }

    .about-us-section-3 .flex-img-1 {
        flex: 0 1 calc(51.1% - 24px);
    }

    .about-us-section-5 {
        padding: 48px 56px 0 56px;
    }

    .video-overlay-play-button {
        top: 0;
    }

    .about-us-section-4 video {
        display: none;
    }

    .img-bg-video-2 {
        display: block;
    }

    /* end about us */

    /* classes */
    .classes-section-1 img {
        height: 567px;
        object-fit: cover;
    }

    .classes-section-1 .classes-txt-1 {
        font-size: 54px;
    }

    .classes-item-detail .classes-detail-span {
        content: "";
        display: block;
    }

    .classes-section-1 .classes-txt-span2,
    .classes-section-1 .classes-txt-span3 {
        display: inline-block;
    }

    .classes-section-1 .classes-txt-2 {
        top: 321px;
    }

    .classes-section-2 {
        padding: 96px 104px 104px 104px;
    }

    .classes-section-2 .section-2-title {
        text-align: left;
        padding: 0;
    }

    .classes-section-3 {
        padding: 0 32px;
    }

    .classes-item-image .image-classes {
        display: none;
    }

    .classes-section-3 .classes-item {
        grid-template-columns: 18vw 1fr 0;
    }

    .classes-section-3 .classes-item-image {
        width: 18vw;
    }

    .classes-item-detail .detail-1,
    .classes-item-detail .detail-2 {
        padding: 24px;
    }

    .classes-item-detail .painting-class {
        font-size: 24px;
    }

    .th .classes-item-image .image-show.classes-1 img {
        height: 429px;
        object-position: 33%;
    }

    .en .classes-item-image .image-show.classes-1 img {
        height: 497px;
        object-position: 33%;
    }

    .classes-item-image .image-show.classes-2 img {
        height: 436px;
        object-position: 45%;
    }

    .classes-item-image .image-show.classes-3 img {
        height: 437px;
    }

    .th .classes-item-image .image-show.classes-4 img {
        height: 542px;
        object-position: 62%;
    }

    .en .classes-item-image .image-show.classes-4 img {
        height: 542px;
        object-position: 62%;
    }

    .th .classes-item-image .image-show.classes-5 img {
        height: 682px;
        object-position: 75%;
    }

    .en .classes-item-image .image-show.classes-5 img {
        object-position: 75%;
    }

    .th .classes-item-image .image-show.classes-6 img {
        height: 933px;
        object-position: 62%;
    }

    .en .classes-item-image .image-show.classes-6 img {
        height: 925px;
        object-position: 65%;
    }

    .classes-section-4 {
        padding: 56px 0 0 32px;
    }

    .classes-section-4 .section-4-detail {
        flex: 0 1 calc(50%);
        padding-right: 104px;
    }

    .classes-section-4 .image {
        flex: 0 1 calc(50%);
    }

    .classes-section-4 .image img {
        height: 439px;
        object-fit: cover;
        object-position: 79%;
    }



    /* end classes */

    /* contact */
    .contact-us-section-1 img {
        height: 567px;
        object-fit: cover;
    }

    .contact-us-section-2 {
        padding: 0 32px;
    }

    .contact-us {
        display: grid;
        padding: 104px 24px 56px 24px;
    }

    .contact-us-img img {
        height: 454px;
        object-fit: cover;
    }

    .contact-us-section-2 .text-title {
        font-size: 48px;
    }

    .contact-us-info {
        padding: 48px 0 0 0;
    }

    .contact-us-info .info-1 {
        gap: 0;
    }

    .contact-us-img-txt {
        top: 290px;
    }

    .contact-us-section-1 .text-braek-line3 {
        content: "";
        display: block;
    }

    .contact-us-section-1 .text-braek-line {
        display: inline;
    }

    .contact-us-txt-2 {
        top: 325px;
    }

    /* end contact */

    /* footer */

    footer .logo {
        padding: 0;
    }

    /* end footer */
}

@media (min-width: 1366px) and (max-width: 1469px) {
    .fadein-home-about,
    .fadein-classes-1  {
        opacity: 1;
        transform: translate(0, 0);
    }

    .th .home-section-3 .classes-image.classes-1 img,
    .th .home-section-3 .classes-image.classes-2 img,
    .th .home-section-3 .classes-image.classes-3 img {
        height: 498px;
    }

    .en .home-section-3 .classes-image.classes-1 img,
    .en .home-section-3 .classes-image.classes-2 img,
    .en .home-section-3 .classes-image.classes-3 img {
        height: 528px;
    }

    .th .home-section-3 .classes-image.classes-4 img,
    .th .home-section-3 .classes-image.classes-5 img,
    .th .home-section-3 .classes-image.classes-6 img {
        height: 673px;
    }

    .en .home-section-3 .classes-image.classes-4 img,
    .en .home-section-3 .classes-image.classes-5 img,
    .en .home-section-3 .classes-image.classes-6 img {
        height: 629px;
    }

    .th .classes-item-image .image-show.classes-1 img {
        height: 382px;
        object-position: 33%;
    }

    .en .classes-item-image .image-show.classes-1 img {
        height: 405px;
        object-position: 33%;
    }

    .th .classes-item-image .image-show.classes-2 img {
        height: 396px;
    }

    .classes-item-image .image-show.classes-3 img {
        height: 411px;
    }

    .th .classes-item-image .image-show.classes-4 img {
        height: 727px;
    }

    .en .classes-item-image .image-show.classes-4 img {
        height: 729px;
    }

    .th .classes-item-image .image-show.classes-5 img {
        height: 902px;
        object-position: 73%;
    }

    .en .classes-item-image .image-show.classes-5 img {
        height: 737px;
        object-position: 69%;
    }

    .th .classes-item-image .image-show.classes-6 img {
        height: 1175px;
    }

    .en .classes-item-image .image-show.classes-6 img {
        height: 1123px;
    }

    .video-overlay-play-button {
        top: 37px;
    }

    .about-us-section-4 video {
        display: none;
    }

    .img-bg-video-2 {
        display: block;
    }
}

@media (min-width: 1470px) and (max-width: 1500px) {
    .fadein-home-about,
    .fadein-classes-1 {
        opacity: 1;
        transform: translate(0, 0);
    }

    .th .home-section-3 .classes-image.classes-1 img,
    .th .home-section-3 .classes-image.classes-2 img,
    .th .home-section-3 .classes-image.classes-3 img,
    .en .home-section-3 .classes-image.classes-1 img,
    .en .home-section-3 .classes-image.classes-2 img,
    .en .home-section-3 .classes-image.classes-3 img {
        height: 498px;
    }

    /* .en .home-section-3 .classes-image img {
        height: 602px;
    } */

    .th .home-section-3 .classes-image.classes-4 img,
    .th .home-section-3 .classes-image.classes-5 img,
    .th .home-section-3 .classes-image.classes-6 img {
        height: 626px;
    }

    .en .home-section-3 .classes-image.classes-4 img,
    .en .home-section-3 .classes-image.classes-5 img,
    .en .home-section-3 .classes-image.classes-6 img {
        height: 540px;
    }

    .en .classes-item-image .image-show.classes-1 img {
        height: 382px;
        object-position: 33%;
    }

    .th .classes-item-image .image-show.classes-2 img {
        height: 396px;
    }

    .classes-item-image .image-show.classes-3 img {
        height: 411px;
    }

    .th .classes-item-image .image-show.classes-4 img {
        height: 727px;
    }

    .en .classes-item-image .image-show.classes-4 img {
        height: 729px;
    }

    .th .classes-item-image .image-show.classes-5 img {
        height: 767px;
    }

    .en .classes-item-image .image-show.classes-5 img {
        height: 702px;
    }

    .th .classes-item-image .image-show.classes-6 img {
        height: 1139px;
    }

    .en .classes-item-image .image-show.classes-6 img {
        height: 988px;
    }

    .video-overlay-play-button {
        top: 40px;
    }
}

@media (min-width: 1501px) and (max-width: 1605px) {
    .fadein-home-about,
    .fadein-classes-1 {
        opacity: 1;
        transform: translate(0, 0);
    }

    .th .home-section-3 .classes-image.classes-1 img,
    .th .home-section-3 .classes-image.classes-2 img,
    .th .home-section-3 .classes-image.classes-3 img {
        width: 100%;
        height: 498px;
        object-fit: cover;
    }

    .th .home-section-3 .classes-image.classes-4 img,
    .th .home-section-3 .classes-image.classes-5 img,
    .th .home-section-3 .classes-image.classes-6 img {
        width: 100%;
        height: 606px;
        object-fit: cover;
    }

    .en .home-section-3 .classes-image.classes-4 img,
    .en .home-section-3 .classes-image.classes-5 img,
    .en .home-section-3 .classes-image.classes-6 img {
        width: 100%;
        height: 508px;
        object-fit: cover;
    }

    .en .classes-item-image .image-show.classes-1 img {
        height: 382px;
        object-position: 33%;
    }

    .th .classes-item-image .image-show.classes-3 img {
        height: 364px;
    }

    .en .classes-item-image .image-show.classes-3 img {
        height: 355px;
    }

    .th .classes-item-image .image-show.classes-4 img {
        height: 566px;
    }

    .en .classes-item-image .image-show.classes-4 img {
        height: 568px;
    }

    .th .classes-item-image .image-show.classes-5 img {
        /* height: 647px; */
        height: 724px;
    }

    .en .classes-item-image .image-show.classes-5 img {
        height: 670px;
        object-position: 70%;
    }

    .th .classes-item-image .image-show.classes-6 img {
        height: 997px;
    }

    .en .classes-item-image .image-show.classes-6 img {
        height: 943px;
    }

    .video-overlay-play-button {
        top: 40px;
    }
}

@media (min-width: 1606px) {
    .fadein-home-about,
    .fadein-classes-1 {
        opacity: 1;
        transform: translate(0, 0);
    }
}