.main {position: relative; padding: 3.2rem 0 10rem;}
.main .inner {display: flex; flex-direction: column; row-gap: 8rem; position: relative;}
.main .section {display: flex; flex-direction: column; row-gap: 2.5rem;}
.main .section.section-flex {display: flex; flex-wrap: wrap; align-items: flex-start; flex-direction: row;}
.section-heading--title {font-size: 2rem; font-weight: 700;}

.float-notice {height: 4.5rem; overflow: hidden; background: #f8f8f8; border-radius: 1rem; padding: 1rem; margin-bottom: 3.2rem;}
.float-notice a {display: flex; align-items: center; column-gap: 2rem;}
.float-notice .float-notice--title {color: var(--blue); display: -webkit-box; overflow: hidden; white-space: normal; word-wrap: break-word; -webkit-line-clamp: 1; line-clamp: 1; -webkit-box-orient: vertical; text-overflow: ellipsis; word-break: break-all;}

.section-teacherAd {justify-content: space-between}
.section-teacherAd article {display: flex; flex-direction: column; row-gap: 3rem;}
.section-teacherAd--left {width: 63%;}
.section-teacherAd--left .banner {position: relative; width: 100%; overflow: hidden; border-radius: 1rem; cursor:pointer;}
.section-teacherAd--left .banner::after {content: ""; display: block; padding-bottom: 31%;}
.section-teacherAd--left .banner img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.section-teacherAd--left .banner-title {position: absolute; top: 50%; left: 2.5rem; transform: translateY(-50%); font-size: 2.5rem; line-height: 1.6em; color: #fff; font-weight: 500; z-index: 1;}
.section-teacherAd--right {width: 32%;}
.section .slide {position: relative;}
.section .slide .swiper-container {overflow: hidden;}
.section .slide-teacher .swiper-slide {align-self: stretch; height: auto;}
.section .slide-teacher .item-box {height: 100%;}
.section .slide-casting .swiper-slide {border-radius: 1rem; overflow: hidden; position: relative;}
.section .slide-casting .swiper-slide::after {content: ""; display: block; padding-bottom: 61.2%;}
.section .slide-casting .swiper-slide img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;  width:100%;}
.section .slide-arrow {width: 3.5rem; height: 3.5rem; border-radius: 50px; background: #fff; box-shadow: 0 0 10px rgba(35,24,21,0.35); position: absolute; top: 50%;  z-index: 10;}
.section .slide-arrow.slide-arrow--prev {left: 0; transform: translate(-50%, -50%); display: none;}
.section .slide-arrow.slide-arrow--next {right: 0; transform: translate(50%, -50%);}
.section .slide-arrow span {display: block; width: 100%; height: 100%; position: relative; text-indent: 0; font-size: 0; line-height: 0; color: transparent;}
.section .slide-arrow span::after {content: ">"; display: inline-block; position: absolute; top: 50%; left: 50%; width: 7.5px; height: 8.5px; font-size: 1.5rem; color: #888; }
.section .slide-arrow.slide-arrow--prev span::after {/*background: url('../images/main/slide-arrow.svg') no-repeat 50% 50% / contain;*/ transform: rotate(180deg) translate(50%, 0);}
.section .slide-arrow.slide-arrow--next span::after {/*background: url('../images/main/slide-arrow.svg') no-repeat 50% 50% / contain;*/ transform: translate(-50%, 0);}

.gallery {display: flex; flex-wrap: wrap; gap: 3.5rem;}
.gallery-item {width: calc((100% - 7rem)/ 3); position: relative; cursor: pointer;}
.gallery-item .gallery-item--img {position: relative; overflow: hidden; width: 100%;}
.gallery-item .gallery-item--img::after {content: ""; display: block; padding-bottom: 100%; width: 100%; }
.gallery-item img {position: absolute; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.gallery-item .gallery-item--text {position: absolute; bottom: 2.5rem; left: 0; padding: 0 2.5rem; width: 100%; z-index: 2;}
.gallery-item .gallery-item--text .text-title {font-size: 2.4rem; color: #fff; font-weight: 900; }

.section-fieldNew .gallery-item .gallery-item--img::before {content: ""; display: inline-block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #000; z-index: 1; opacity: 0.3; visibility: visible; transition: opacity 0.3s;}

.gallery.gallery-col2 .gallery-item {width: calc((100% - 3.5rem)/ 2);}
.gallery-col2 .gallery-item .gallery-item--img::after {content: none;}
.gallery-col2 .gallery-item img {position: static;}

.item-box {background: #F8F8F8; border-radius: 1rem; padding: 2rem 2rem 1rem 1.5rem;}
.item-box a {display: flex; flex-direction: column; row-gap: 1.5rem;}
.item-box--text {display: flex; flex-direction: column; row-gap: 1rem;}
.item-box .teacher-name {display: flex; column-gap: 8px; align-items: baseline; font-weight: 600;}
.item-box .teacher-position {color: #8f8f8f; font-weight: 400; display: -webkit-box; overflow: hidden; white-space: normal; word-wrap: break-word; -webkit-line-clamp: 1; line-clamp: 1; -webkit-box-orient: vertical; text-overflow: ellipsis; word-break: break-all; width: 58%;}
.item-box .teacher-desc {color: #666666; font-weight: 400;}
.item-box--img {display: flex; align-items: center; justify-content: center; margin-left: auto; width: 9rem; height: 9rem; border-radius: 999px; overflow: hidden;}
.item-box--img img {width: 100%; height: 100%; object-fit: cover;}

.main .section.section-rolling {row-gap: 1.5rem;}
.section-rolling .box {display: flex; flex-direction: column; row-gap: 1.5rem; padding: 2rem 2.5rem 3.5rem; border-radius: 1rem; }
.section-rolling .box ul {display: flex; justify-content: space-between; font-size: 1.4rem; width: 75%;} 
.section-rolling .box ul li.rolling-title {display: -webkit-box; overflow: hidden; white-space: normal; word-wrap: break-word; -webkit-line-clamp: 1; line-clamp: 1; -webkit-box-orient: vertical; text-overflow: ellipsis; word-break: break-all; width: 25%;}
.section-rolling .section-content {background: #Fff; padding: 1.25rem 2rem 1.25rem 5rem; border-radius: 1rem; overflow: hidden;}
.section-rolling .slide-castingProcess {height: 3.5rem;}
.section-rolling .slide-castingProcess .swiper-container {height: 100%;}
.section-rolling .swiper-slide a {display: flex; align-items: center; justify-content: space-between;} 
.section-rolling .chip {font-weight: 400; width: 10rem; padding: 6px 5px 7px; font-size: 1.4rem; line-height: 1.4em; border-radius: 6px;}

.section-wellknown .border-box {display: flex; align-items: center; border-radius: 15px; overflow: hidden;} 
.section-wellknown .box-represent {width: 35%; position: relative; align-self: stretch;}
.section-wellknown .box-represent .box-represent--img {height: 100%; position: relative; overflow: hidden; box-shadow: inset 0 0 0 0.5px #626262;}
.section-wellknown .box-represent .box-represent--img::after {content: ""; position: absolute; inset: 0; top: 0; right: 0; bottom: 00; left: 0; background: radial-gradient(ellipse at center, rgba(0,0,0,0) 40%, rgba(0,0,0,0.6) 100%);}
.section-wellknown .box-represent .box-represent--img img {display: block; width: 100%; height: 100%; object-fit: cover;}
.section-wellknown .box-represent .box-represent--text {display: flex; flex-direction: column; row-gap: 2rem; position: absolute; bottom: 2rem; left: 3.5rem;}
.section-wellknown .box-represent .text-title {font-size: 2.4rem; font-weight: 900; color: #fff;}
.section-wellknown .box-represent--text .butn {width: 10.7rem; padding: 0.6rem 1.2rem;}
.section-wellknown .box-wellknown {width: 65%; padding: 2.6rem 4.5rem; border-top: 0.5px solid #c9c9c9; border-bottom: 0.5px solid #c9c9c9; border-right: 0.5px solid #c9c9c9; border-top-right-radius: 15px; border-bottom-right-radius: 15px;}
.section-wellknown .box-wellknown ul {display: flex; align-items: flex-start; column-gap: 1.5rem;}
.section-wellknown .box-wellknown li {display: flex; flex-direction: column; row-gap: 2.5rem;}
.section-wellknown .box-wellknown .wellknown-img {border-radius: 1.7rem; overflow: hidden;}
.section-wellknown .box-wellknown .wellknow-text {text-align: center; font-size: 1.6rem; color: #3E3A39;}
.section-wellknown .box-wellknown .wellknow-text span {color: #595757; }

@media (hover: hover) {
    .section-fieldNew .gallery-item:hover .gallery-item--img::before {opacity: 0; visibility: hidden; z-index: 1;}
}

@media (max-width: 1280px) {
    .section-rolling .section-content {padding: 1.25rem 2rem 1.25rem 2.5rem;}
}

@media (max-width: 1024px) {
    .section-teacherAd--left .banner-title {font-size: 2.3rem; line-height: 1.4em;}

    .gallery {gap: 1.5rem;}
    .gallery-item {width: calc((100% - 3rem)/ 3)}
    .gallery-item .gallery-item--text {padding: 0 2rem;}
}

@media (max-width: 768px) {
    .section-teacherAd article {width: 100%;}
    .section-teacherAd--left .banner::after {padding-bottom: 38%}

    .item-box--img {width: 7rem; height: 7rem;}

    

    .gallery-item {width: calc((100% - 1.5rem) / 2);} 
    .gallery-item .gallery-item--text {bottom: 1.5rem;}
    .gallery.gallery-col2 .gallery-item {width: 100%;}
    .gallery-item .gallery-item--text .text-title {font-size: 2rem;}

    .section-wellknown .border-box {flex-direction: column;}
    .section-wellknown .box-represent {width: 100%; height: 48rem;}
    .section-wellknown .box-wellknown {width: 100%; padding: 2rem; border-left: 0.5px solid #595757; border-top-right-radius: 0; border-bottom-right-radius: 15px;
    border-top: 0; border-bottom-left-radius: 15px;}
}

@media (max-width: 640px) {
    .section-rolling .slide-castingProcess {height: 7.2rem;}
    .section-rolling .swiper-slide a {flex-wrap: wrap; row-gap: 1.5rem;}
    .section-rolling .box ul {width: 100%;}
    .section-rolling .chip {width: 100%;}
    
}

@media (max-width: 480px) {
    .section-teacherAd--left .banner::after {padding-bottom: 52%;}
    .section-teacherAd--left .banner-title {font-size: 2rem;}

    .section-rolling .box ul {flex-wrap: wrap; row-gap: 1rem;}
    .section-rolling .box li {width: 45%;}
    .section-rolling .box ul li.rolling-title {width: 50%;}
    

    .section-rolling .slide-castingProcess {height: 10.4rem;}
    .section-wellknown .box-represent {height: 36rem;}
    .section-wellknown .box-wellknown {padding: 1.5rem;}
}