@font-face {
    font-family: MTD-Houstoner-Script;
    src: url(../fonts/home/MTD_Houstoner_Script.otf)
}

@font-face {
    font-family: SVN-Gilroy-Bold;
    src: url(../fonts/SVN-Gilroy-Bold.otf)
}

@font-face {
    font-family: SVN-Gilroy-XBold;
    src: url(../fonts/SVN-Gilroy-XBold.otf)
}

@font-face {
    font-family: SVN-Gilroy-SemiBold;
    src: url(../fonts/SVN-Gilroy-SemiBold.otf)
}

@font-face {
    font-family: SVN-Gilroy-Regular;
    src: url(../fonts/SVN-Gilroy-Regular.otf)
}

:root {
    --font-family-MTD-Houstoner-Script: 'MTD-Houstoner-Script';
    --font-family-SVN-Gilroy-Bold: 'SVN-Gilroy-Bold';
    --font-family-SVN-Gilroy-Regular: 'SVN-Gilroy-Regular';
    --font-family-SVN-Gilroy-SemiBold: 'SVN-Gilroy-SemiBold';
    --font-family-SVN-Gilroy-XBold: 'SVN-Gilroy-XBold';
    --text-black: #000;
    --text-red: #cb2128
}

.cta_top {
    background-color: #f8d7ce;
    padding: 12px 16px;
    width: 100%;
    animation: colorChange 10s infinite;
    position: fixed;
    top: 117px;
    z-index: 100;
    left: 0
}

@keyframes colorChange {
    0% {
        background-color: #f8d7ce
    }
    100% {
        background-color: #d2e3f1
    }
}

.cta_top .icon-promotion {
    font-size: 25px;
    margin-right: 14px
}

.cta_top .info {
    flex: 1 1 0
}

.cta_top .info-title {
    font-size: 24px;
    font-weight: 700
}

.cta_top .info .info-desc {
    font-size: 14px
}

.cta_top .info .info-desc p {
    font-size: 14px;
    margin-bottom: 0
}

.cta_top .bold {
    font-weight: 700
}

.cta_top .promotion-desc {
    font-size: 12px;
    line-height: 20px;
    font-weight: 400
}

.box_header {
    /*background: url(../../sunshine/images/home/bg_top.png) top center no-repeat;*/
    /*height: 803px;*/
    margin-top: 63px
}

.box_header_start {
    margin-top: 45px
}

.box_header_start_top {
    font-family: var(--font-family-MTD-Houstoner-Script), serif;
    font-size: 129px;
    margin-bottom: 0;
    height: 133px;
    padding-left: 8rem
}

.section-contact-sales-form {
    margin-top: -50px
}

.cta_top_mb {
    display: none
}

.popup-home {
    display:none;
    border-radius: 10px;
    position:fixed;
    top:50%; left:50%;
    transform:translate(-50%, -50%);
    max-width: 600px;
    min-width: 375px;
    max-height: 90vh;
    overflow-y: auto;
    background:white;
    overscroll-behavior: contain;
    box-shadow:0 4px 8px rgba(0,0,0,0.2);
    z-index:1000;
    padding:30px;
}

.popup-home .popup-title h2 {
    font-family: var(--font-family-SVN-Gilroy-Regular), serif;
    font-size: 22px;
    margin: 10px 0;
}

.popup-home .popup-title p {
    font-family: var(--font-family-SVN-Gilroy-Medium), serif;
    font-size: 16px;
    margin: 10px 0;
}

.popup-home .popup-content {
    margin-top: 20px;
}

.box_header_start_caption {
    font-family: var(--font-family-SVN-Gilroy-Regular), serif;
    font-size: 28px;
    padding-left: 8rem;
    margin-top: 5px;
    line-height: 1.5;
    margin-bottom: 0
}

.box_header_start_pc img {
    /*margin-left: 4.5rem*/
}

.box_header_start_pc .img-top-pc img {
    max-width: 60% !important;
}

.box_header_start_mobile .img-top-mobile img {
    max-width: 95% !important;
}

.box_header_start_bottom {
    margin-top: 40px;
}

.box_header_start_bottom a {
    margin: 0px 5px;
    border: 3px solid #fff;
    height: 57px;
    width: 100%;
    padding: 4px 0;
    border-radius: 30px;
    font-family: var(--font-family-SVN-Gilroy-Bold), serif;
    font-size: 24px;
    background: #f79e21;
    background: linear-gradient(90deg, rgba(247, 158, 33, 1) 0, rgba(240, 106, 34, 1) 50%, rgba(232, 34, 36, 1) 100%);
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.contact-form .btn-register .button-modal {
    margin: 10px 5px;
    border: 3px solid #fff;
    height: 45px;
    width: 185px;
    padding: 4px 0;
    border-radius: 15px;
    font-family: var(--font-family-SVN-Gilroy-Bold), serif;
    font-size: 18px;
    background: #f79e21;
    background: linear-gradient(90deg, rgba(247, 158, 33, 1) 0, rgba(240, 106, 34, 1) 50%, rgba(232, 34, 36, 1) 100%);
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.box_header_start_bottom a:hover {
    background: #d52229;
    background: linear-gradient(90deg, rgba(213, 34, 41, 1) 0, rgba(240, 102, 34, 1) 50%, rgba(247, 159, 33, 1) 100%)
}

.student_feelings_top h2 {
    font-family: var(--font-family-SVN-Gilroy-Bold), serif !important;
    font-size: 35px;
    line-height: 1.5;
    color: var(--text-red)
}

#achievements .alias {
    font-family: var(--font-family-SVN-Gilroy-Regular), serif;
    width: 75%;
    text-align: justify;
    text-align-last: center;
    margin: auto;
    padding-top: 10px;
    padding-bottom: 30px;
    font-size: 18px
}

#section-2 {
    background-image: url(../images/cam-nhan-hoc-vien/news/bg-2-1.webp), url(../images/cam-nhan-hoc-vien/news/bg-2-2.webp), url(../images/cam-nhan-hoc-vien/news/bg-2-3.webp), url(../images/cam-nhan-hoc-vien/news/bg-2-4.webp);
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    background-position: top -20px left, top -5px right, left 650px, right 75%;
    background-size: 15%, auto, 15%, 15%;
    margin-top: -50px;
    padding-top: 50px
}

.committed_learning {
    margin-top: -72px;
    padding-top: 72px
}

.committed_learning_top {
    width: 60%
}

.committed_learning_top p {
    font-family: var(--font-family-SVN-Gilroy-Bold), serif;
    font-size: 35px;
    color: #d42128;
    line-height: 1.3;
    margin-top: -250px;
    padding-top: 250px
}

.committed_learning_main .accordion-item {
    border: none;
    margin-bottom: 30px
}

.teacher-2-button {
    width: 200px;
    height: 50px;
    border: 2px solid #fff;
    background: #f79e21;
    background: linear-gradient(90deg, rgba(247, 158, 33, 1) 0, rgba(240, 106, 34, 1) 50%, rgba(232, 34, 36, 1) 100%);
    border-radius: 30px
}

.newspaper_item {
    position: relative;
    width: 90%
}

.newspaper_main {
    margin-top: 20px
}

.newspaper_main .owl-stage-outer {
    height: 350px
}

.newspaper_item p {
    text-align: justify;
    color: var(--text-black);
    font-size: 16px
}

.item-new {
    height: 340px
}

.item-new button {
    border-radius: 30px;
    margin-top: 10px;
    left: 22%;
    height: 30px;
    width: 160px;
    background: #f6931e;
    font-size: 16px;
    padding: 2px 0;
    bottom: 0;
    font-family: var(--font-family-SVN-Gilroy-Regular), serif;
}

.newspaper_item_content {
    margin-top: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.newspaper_top h2 {
    font-family: var(--font-family-SVN-Gilroy-Bold), serif;
    font-size: 35px;
    color: #d42128;
    margin-bottom: 0;
    padding-bottom: 30px
}

.teacher-2-button:hover {
    background: #d52229;
    background: linear-gradient(90deg, rgba(213, 34, 41, 1) 0, rgba(240, 102, 34, 1) 50%, rgba(247, 159, 33, 1) 100%);
}

.teacher-2-button a {
    font-family: var(--font-family-SVN-Gilroy-Bold), serif;
    color: #fff;
    font-size: 18px;
    padding: 9px 0
}

.committed_learning_main h3 button {
    color: #000;
    font-family: var(--font-family-SVN-Gilroy-Bold), serif;
    font-size: 1rem;
    padding-left: 50px
}

.committed_learning_main h3 img {
    top: -10px;
    left: -40px;
    z-index: 9
}

@media screen and (max-width: 767px) {
    .committed_learning_main h3 img {
        top: 50%;
        left: 0;
        transform: translate(0, -50%);
    }

    .committed_learning_main h3 button {
        padding-left: 80px;
        border-top-left-radius: 50px !important;
        border-bottom-left-radius: 50px !important
    }
}

.committed_learning_main .accordion-body {
    font-family: SVN_Gilroy_Regular, serif;
    color: #000;
    font-size: 1rem;
    padding-top: 10px;
    padding-left: 15px;
    padding-right: 30px;
    text-align: justify
}

.central_facility {
    padding: 50px 0 0 0 !important
}

.committed_learning_main .accordion-body p {
    margin-bottom: 0;
    font-family: var(--font-family-SVN-Gilroy-Regular), serif;
    font-size: 1rem
}

.committed_learning_main .accordion-item button {
    background: #e9e9e9;
    background: linear-gradient(90deg, rgba(233, 233, 233, 1) 0, rgba(233, 233, 233, 1) 35%, rgba(252, 252, 252, 1) 100%);
    border-radius: 20px
}

/*.accordion-item:first-of-type .accordion-button {*/
/*    border-top-left-radius: 20px !important;*/
/*    border-top-right-radius: 20px !important*/
/*}*/

.accordion-item:last-of-type .accordion-button.collapsed {
    border-bottom-right-radius: 20px !important;
    border-bottom-left-radius: 20px !important
}

.committed_learning_main .accordion-button:not(.collapsed) {
    box-shadow: none;
    color: #000
}

.committed_learning_top p span {
    font-family: var(--font-family-SVN-Gilroy-XBold), serif;
    color: #f6931f;
    font-size: 2.2rem
}

.committed_learning_main {
    width: 1167px;
    margin-top: 50px
}

.committed_learning_main_r img {
    max-width: 100%
}

.my-slider.owl-carousel .item {
    margin-left: 5px
}

.committed_learning_main_r button {
    background: red;
    width: 50px;
    height: 50px;
    border-radius: 50px;
    top: 50%;
    display: none;
    opacity: .2
}

.ping-focus {
    animation: ping-focus 2s cubic-bezier(0, 0, .2, 1) infinite;
    width: 105%;
    height: 70px;
    border-radius: 30px;
    text-align: justify;
    background: #fff
}

.see_route {
    width: 100%
}

.opening_schedule {
    width: 90%
}

.see_route .ping-focus {
    left: -7px;
    top: -7px
}

.opening_schedule .ping-focus {
    left: -7px;
    top: -7px
}

.see_route a {
    z-index: 2
}

.roadmap_wrapper:before {
    position: absolute;
    /*background: url(../../sunshine/images/home/icon_roadmap.png) top left no-repeat;*/
    width: 329px;
    /*height: 151px;*/
    content: '';
    z-index: 1;
    top: -151px;
    left: 44px
}

.roadmap_wrapper {
    border-radius: 25px;
    margin-top: 60px;
    margin-bottom: 60px;
    padding: 34px
}

.roadmap_wrapper_left li {
    width: 350px;
    height: 68px;
    margin-bottom: 13px;
    background: #d6d6d6;
    border-radius: 30px;
    color: var(--text-black);
    font-family: var(--font-family-SVN-Gilroy-Bold);
    display: block;
    padding: 17px 0;
    font-size: 24px;
    cursor: pointer
}

.roadmap_wrapper_left li h2 {
    color: var(--text-black);
    font-family: var(--font-family-SVN-Gilroy-Bold);
    font-size: 24px
}

.roadmap_wrapper_left li .h2 {
    color: var(--text-black);
    font-family: var(--font-family-SVN-Gilroy-Bold);
    font-size: 24px
}

.roadmap_main p {
    font-family: var(--font-family-SVN-Gilroy-Bold);
    font-size: 28px;
    color: var(--text-red);
    margin-bottom: 30px
}

.roadmap_wrapper_left li:hover {
    background: #d52229 !important;
    color: #fff !important
}

.roadmap_active .h2 {
    color: #fff !important
}

.roadmap_wrapper_left li:hover h2 {
    color: #fff !important
}

.roadmap_wrapper_left li:hover .h2 {
    color: #fff !important
}

.roadmap_active {
    background: #d52229 !important;
    color: #fff !important
}

.roadmap_active h2 {
    color: #fff !important
}

.roadmap_item ul li {
    position: relative;
    padding-left: 35px;
    font-family: var(--font-family-SVN-Gilroy-Regular);
    font-size: 20px;
    padding-bottom: 3px;
    color: var(--text-black)
}

.my-slider .item .teaching_staff_item .teaching_staff_certificate {
    color: #d22127 !important;
    text-shadow: unset !important;
    -webkit-text-stroke: unset !important;
    line-height: unset !important
}

.teacher-2 .title {
    font-size: 35px;
    font-family: var(--font-family-SVN-Gilroy-Bold);
    color: #f6931e !important
}

.teacher-2 .alias {
    width: 100%;
    font-family: var(--font-family-SVN-Gilroy-XBold);
    font-size: 35px;
    color: #d42128
}

.teacher-2 .item .teaching_staff_item .teaching_staff_certificate {
    font-family: var(--font-family-SVN-Gilroy-XBold) !important
}

.roadmap_item ul li:before {
    position: absolute;
    background: url(../../sunshine/images/home/icon_li.png) top left no-repeat;
    width: 8px;
    height: 8px;
    content: '';
    top: 12px;
    left: 10px
}

.roadmap_footer button {
    background: #f79e21;
    background: linear-gradient(90deg, rgba(247, 158, 33, 1) 0, rgba(240, 106, 34, 1) 50%, rgba(232, 34, 36, 1) 100%);
    border-radius: 30px;
    border: none;
    height: 50px;
    width: 530px;
    margin-top: 76px;
    font-family: var(--font-family-SVN-Gilroy-Bold);
    font-size: 28px;
    padding: 5px 0
}

.roadmap_footer button:before {
    content: '';
    display: block;
    position: absolute;
    background: rgba(255, 255, 255, .9);
    width: 60px;
    height: 100%;
    top: 0;
    filter: blur(30px);
    transform: translateX(-100px) skewX(-15deg);
    animation: slide 3s infinite 3s;
    z-index: 999
}

.roadmap_footer button:hover {
    background: #d52229;
    background: linear-gradient(90deg, rgba(213, 34, 41, 1) 0, rgba(240, 102, 34, 1) 50%, rgba(247, 159, 33, 1) 100%)
}

#achievements .alias {
    width: 75%;
    text-align: justify;
    text-align-last: center;
    margin: auto
}

#achievements .list-achievements .achievements-item {
    flex-basis: 30%
}

#achievements .list-achievements .achievements-item .image {
    height: 15rem;
    width: 100%;
    background-size: 100%;
    background-position: top 10% center;
    background-repeat: no-repeat
}

#achievements .list-achievements .achievements-item .left-box .name {
    font-size: 18px;
    font-family: var(--font-family-SVN-Gilroy-SemiBold);
    color: #000;
    font-weight: 700
}

#achievements .list-achievements .achievements-item .overall {
    bottom: 25%;
    left: -.5rem
}

#achievements .list-achievements .achievements-item .overall .score {
    top: 45%;
    left: .8rem;
    transform: translateY(-50%);
    font-size: 23px;
    color: #fff;
    font-weight: 700
}

#achievements .list-achievements .achievements-item .overlay-item {
    width: 100%;
    height: 100%;
    background-color: #00000061;
    top: 0;
    left: 0;
    visibility: hidden;
    z-index: 1;
}

#achievements .list-achievements .achievements-item:hover .overlay-item {
    visibility: visible
}

#achievements .list-achievements .achievements-item .result-item {
    position: fixed;
    width: 100%;
    height: 100%;
    color: #fff;
    top: 0;
    left: 0;
    background: #0000005d;
    z-index: 9999;
    display: none;
    justify-content: center;
    align-items: center
}

#achievements .list-achievements .achievements-item .result-item .content-box {
    max-width: 800px;
    max-height: 96vh;
    -webkit-animation-name: zoom;
    -webkit-animation-duration: .6s;
    animation-name: zoom;
    animation-duration: .6s;
    overflow: auto;
}

.achievement-active {
    display: flex !important
}

.achievements-item .box-thumbnail {
    padding-top: 61.86%;
}

#achievements .list-achievements .achievements-item .result-item .button-close {
    text-align: right;
    margin-bottom: .5rem;
    font-size: 22px;
    cursor: pointer
}

#load-more-achievements button, #load-more-btn button, #load-more-achievements a.btn-red, #load-more-btn a.btn-red {
    position: relative;
    border: none;
    cursor: pointer;
    padding: .5rem 2rem;
    font-weight: 700;
    background: #f79e21;
    background: linear-gradient(90deg, rgba(247, 158, 33, 1) 0, rgba(240, 106, 34, 1) 50%, rgba(232, 34, 36, 1) 100%);
    border-radius: 30px;
    z-index: 2;
    font-family: var(--font-family-SVN-Gilroy-Bold);
    color: #fff
}

#load-more-achievements button:before {
    content: '';
    display: block;
    position: absolute;
    background: rgba(255, 255, 255, .9);
    width: 60px;
    height: 100%;
    top: 0;
    filter: blur(30px);
    transform: translateX(-100px) skewX(-15deg);
    animation: slide 3s infinite 3s;
    z-index: 999
}

#load-more-achievements button:hover, #load-more-btn button {
    background: #d52229;
    background: linear-gradient(90deg, rgba(213, 34, 41, 1) 0, rgba(240, 102, 34, 1) 50%, rgba(247, 159, 33, 1) 100%)
}

.committed_learning_main_r {
    background: url(../../sunshine/images/home/bg-videoplay.webp) top left no-repeat;
    width: 100%;
    background-size: 100%;
    padding: 15px
}

.teacher-2-button:before {
    content: '';
    display: block;
    position: absolute;
    background: rgba(255, 255, 255, .9);
    width: 60px;
    height: 100%;
    top: 0;
    filter: blur(30px);
    transform: translateX(-100px) skewX(-15deg);
    animation: slide 3s infinite 3s;
    z-index: 999
}

.committed_learning_main_r iframe {
    width: 100%;
    height: 330px
}

@keyframes scaleEffect {
    0% {
        transform: scale(.2);
        opacity: 0
    }
    80% {
        transform: scale(1);
        opacity: .5
    }
    to {
        transform: scale(1.25);
        opacity: 0
    }
}

@keyframes ping-focus {
    0% {
        transform: scale(.2);
        opacity: 0
    }
    80% {
        transform: scale(1);
        opacity: .5
    }
    to {
        transform: scale(1.25);
        opacity: 0
    }
}

.list-slide-banner .owl-dots {
    justify-content: center;
    display: flex;
    gap: 12px;
    position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
    bottom: 38px
}

.list-slide-banner .owl-dots button.owl-dot.active span, .list-slide-banner .owl-dots button.owl-dot:hover span {
    background-color: #237c3a;
    border-radius: 50%;
    height: 12px;
    width: 12px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.list-slide-banner .owl-dots button.owl-dot {
    border: 2px solid #fff;
    background: #fff;
    border-radius: 50%;
    height: 16px;
    width: 16px;
    position: relative
}

.list-slide-banner .owl-nav {
    left: 25px;
    right: 25px
}

.list-slide-banner .owl-nav .owl-next:hover, .list-slide-banner .owl-nav .owl-prev:hover {
    background-color: #000000b3
}

.section-roadmap .title-roadmap, section .title-section {
    font-family: SVNGilroyBold;
    font-size: 40px;
    color: var(--color-primary);
    margin-bottom: 2rem;
    text-align: center
}

.section-description {
    padding: 87px 0;
    background: url(../images/home/bg-4.webp) top center/cover no-repeat
}

.section-description .img {
    width: 100%;
    height: 100%
}

.section-description .list-video {
    padding: 0 30px
}

.section-description .video {
    width: 560px;
    height: 315px;
    border-radius: 10px
}

.section-description .video .play-video {
    position: absolute;
    width: 70px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer
}

.section-description .video:active .play-video {
    transform: translate(-50%, -49%)
}

.section-description .video-1 {
    background: url(../images/home/bg-ielts-0-3.webp) top center/cover no-repeat
}

.section-description .video-2 {
    background: url(../images/home/bg-ielts-3-5.webp) top center/cover no-repeat
}

.section-description .video-3 {
    background: url(../images/home/bg-ielts-5-7.webp) top center/cover no-repeat
}

.section-description p {
    width: 100%;
    max-width: 600px;
    font-size: 18px;
    color: var(--black);
    text-align: justify
}

.section-description p:nth-child(3) {
    margin-bottom: 8px
}

.section-description .title {
    text-align: center;
    font-size: 40px;
    font-weight: 700;
    color: var(--color-primary)
}

.section-achievements .owl-nav, .section-description .owl-nav {
    z-index: -1
}

.section-statistics {
    padding: 50px 0;
    background: url(../images/home/bg-5.webp) top center/cover no-repeat
}

.section-statistics h2 {
    font-family: SVNGilroyBold;
    font-size: 40px;
    font-weight: 700;
    color: #fefdfd;
    margin-bottom: 40px
}

.section-statistics span.number {
    color: var(--yellow);
    font-size: 70px;
    font-family: SVNGilroyBold;
    text-align: center
}

.section-statistics span.unit {
    color: var(--yellow);
    font-size: 30px;
    font-weight: 700;
    text-align: center;
    top: 0;
    right: -23px
}

.section-statistics span.unit.plus {
    right: -16px
}

.section-statistics .statistics-item .description {
    font-family: SVNGilroyBold;
    color: var(--white);
    max-width: 340px;
    margin: 0 auto;
    font-size: 20px;
    font-weight: 700
}

.section-achievements {
    padding: 87px 0 0;
    background: url(../images/home/bg-3.webp) top center/cover no-repeat
}

.section-achievements h2 {
    color: var(--white);
    margin-bottom: 15px
}

.list-achievements .owl-item.active {
    transition: transform 1.5s cubic-bezier(.4, 0, .2, 1)
}

.list-achievements .owl-item {
    transform: scale(.6)
}

.list-achievements .owl-item.active.center {
    transform: scale(.9);
    z-index: 1
}

.list-achievements .item-achievement {
    width: 664px;
    height: 530px;
    flex-shrink: 0
}

.list-achievements .item-achievement .content {
    top: 0;
    left: 0;
    bottom: 0;
    right: 0
}

.list-achievements .item-achievement .content > div {
    top: 98px;
    right: 63px;
    max-width: 244px;
    padding: 11px 0
}

.list-achievements .item-achievement .content p.name {
    font-family: SVNGilroyBold;
    font-size: 20px;
    color: var(--white);
    font-weight: 700;
    margin-top: -3px;
    padding: 8px 10px;
    margin-bottom: 40px;
    background-color: var(--color-primary)
}

.list-achievements .item-achievement .content p {
    font-size: 20px;
    font-family: SVNGilroyBold;
    color: var(--color-primary)
}

.list-achievements .item-achievement .content span {
    font-size: 60px;
    font-family: SVNGilroyXBold;
    color: var(--color-primary);
    line-height: 60px;
    text-decoration: underline;
    margin-bottom: 10px
}

.list-achievements .item-achievement .content img {
    width: 251px;
    height: 369px;
    top: 80px;
    left: 77px;
    border-top-right-radius: 27px;
    border-bottom-left-radius: 27px;
    border-bottom-right-radius: 27px;
    border: 4px solid var(--color-primary);
    object-fit: cover
}

.section-info-course {
    padding: 108px 0 70px;
    background-color: transparent
}

.section-info-course .item-info-course {
    height: 272px;
    display: flex;
    flex-direction: column;
    align-items: center
}

.section-info-course img {
    background-color: #fff;
    margin-bottom: 25px
}

.section-info-course .title-info-course {
    font-family: SVNGilroyBold;
    font-size: 24px;
    color: var(--black);
    text-transform: uppercase
}

.section-info-course .title-info-course {
    font-size: 24px;
    color: var(--black);
    text-transform: uppercase
}

.section-info-course a button {
    width: 180px;
    height: 40px;
    margin-top: auto;
    background-color: transparent;
    box-shadow: rgba(99, 99, 99, .2) 0 2px 8px 0;
    transition: all .2s ease;
    border: none;
    font-size: 18px;
    font-family: SVNGilroyRegular
}

.section-info-course a button:hover {
    background-color: var(--color-primary);
    color: var(--white)
}

.section-students-comment {
    padding: 150px 0;
    background: url(../images/home/bg-09.webp) top center/cover no-repeat
}

.section-students-comment .list-star {
    left: 50%;
    top: 20px;
    transform: translateX(-50%);
    width: 220px
}

.section-students-comment h2 {
    color: var(--color-primary);
    font-size: 40px;
    text-transform: uppercase;
    margin-bottom: 36px
}

.section-students-comment .description {
    max-width: 915px;
    font-size: 18px;
    color: var(--black);
    margin-bottom: 66px;
    text-align: center
}

.section-students-comment .circle {
    position: relative;
    width: 570px;
    height: 570px;
    border-radius: 50%;
    background: url(../images/home/bg-11.webp) top center/cover no-repeat;
    background-size: auto;
    overflow: hidden;
    display: grid;
    grid-template-columns:repeat(1, 120px);
    grid-template-rows:repeat(5, 120px)
}

.section-students-comment .circle .row-2, .section-students-comment .circle .row-3, .section-students-comment .circle .row-4 {
    display: grid;
    grid-template-columns:repeat(5, 120px);
    gap: 10px
}

.section-students-comment .circle .row-1, .section-students-comment .circle .row-5 {
    display: grid;
    grid-template-columns:repeat(4, 120px);
    gap: 10px
}

.circle > div.row-2, .circle > div.row-4 {
    margin-left: -68px
}

.section-students-comment .circle-child {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid #fff;
    cursor: pointer;
    position: relative
}

.section-students-comment .circle-child .info {
    padding: 5px 0 10px;
    position: absolute;
    background-color: var(--color-primary);
    z-index: 1;
    top: 85%;
    left: 0;
    right: 0;
    transform: translateY(-50%)
}

.section-students-comment .circle-child .info h3 {
    color: var(--white);
    font-size: 8px;
    max-width: 120px;
    text-align: center;
    margin-bottom: 1px
}

.section-students-comment .circle-child .info span {
    color: var(--white);
    font-size: 6px;
    max-width: 120px;
    text-align: center;
    display: block
}

.section-students-comment .circle-child:active {
    transform: translateY(2px)
}

.section-students-comment .testimonial {
    font-size: 27px;
    text-transform: uppercase;
    font-weight: 700
}

.section-students-comment .testimonial .text-emphasize {
    color: #d32128
}

.section-students-comment .button-register {
    margin-top: 50px;
    display: flex;
    justify-content: center
}

.list-comment .item-comment img {
    width: 220px;
    height: 220px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-top-left-radius: 120px;
    border-bottom-right-radius: 120px;
    object-fit: cover
}

.list-comment .image {
    background-color: var(--color-primary)
}

.list-comment-pc .item-comment:first-child .image {
    border-top-right-radius: 130px;
    border-bottom-left-radius: 130px
}

.list-comment-pc .item-comment:nth-child(2) .image {
    border-top-right-radius: 130px;
    border-bottom-right-radius: 130px
}

.list-comment-pc .item-comment:last-child .image {
    border-top-left-radius: 130px;
    border-bottom-left-radius: 130px
}

.list-comment-mobile .item-comment .image {
    border-top-right-radius: 130px;
    border-bottom-left-radius: 130px
}

.list-comment-pc .item-comment:first-child .content-comment, .list-comment-pc .item-comment:last-child .content-comment {
    padding-top: 15px;
    padding-left: 20px
}

.list-comment-pc .item-comment:nth-child(2) .content-comment {
    padding-top: 15px;
    padding-right: 20px
}

.list-comment .image, .list-comment-pc .content-comment {
    width: 250px;
    height: 250px
}

.list-comment-mobile .content-comment, .list-comment-mobile .image {
    margin: 0 auto
}

.list-comment-mobile .content-comment h3 {
    padding-top: 15px
}

.list-comment-mobile .content-comment {
    max-width: 290px;
    width: 100%
}

.list-comment-mobile .owl-nav {
    top: 110px;
    left: calc(50% - 170px);
    right: calc(50% - 170px)
}

.list-comment .content-comment p.student_name {
    font-family: SVNGilroyBold;
    font-size: 18px;
    margin-bottom: 4px
}

.list-comment .content-comment p {
    font-size: 16px;
    text-align: justify;
    line-height: 1.4;
    color: var(--black)
}

.section-roadmap {
    min-height: 1115px;
    padding: 84px 0;
    background: url(../images/home/bg-6.webp) top center/cover no-repeat
}

.section-roadmap .title-roadmap {
    color: var(--color-primary);
    font-family: SVNGilroyBold;
    font-size: 40px;
    text-transform: uppercase;
    margin-bottom: 36px
}

.section-roadmap p.description {
    max-width: 860px;
    font-size: 18px;
    color: var(--black);
    margin-bottom: 46px;
    text-align: justify
}

.section-roadmap .list-roadmap {
    margin: 110px auto 50px
}

.section-roadmap .item-roadmap .up {
    top: 56px;
    left: 50%;
    transform: translateX(-50%)
}

.section-roadmap .item-roadmap .down {
    top: 283px;
    left: 50%;
    transform: translateX(-50%)
}

.section-roadmap .item-roadmap:nth-child(1) .down {
    top: 270px
}

.section-roadmap .item-roadmap .up h3 {
    color: var(--black);
    font-family: SVNGilroyHeavy;
    font-size: 23px;
    min-width: 154px;
    text-align: center
}

.section-roadmap .item-roadmap .down p.number-study {
    color: var(--white);
    font-family: SVNGilroyXBold;
    font-size: 30px;
    min-width: 154px;
    text-align: center;
    margin-bottom: 0
}

.section-roadmap .item-roadmap .up p {
    color: var(--black);
    font-family: SVNGilroySemiBold;
    font-size: 22px;
    text-align: center
}

.section-roadmap .item-roadmap .down p {
    color: var(--white);
    font-family: SVNGilroySemiBold;
    font-size: 20px;
    text-align: center
}

.section-roadmap-pc .person {
    bottom: -150px;
    left: 54px
}

.section-roadmap-pc .arrow {
    bottom: -26px;
    right: -874px
}

.section-roadmap .arrow p {
    color: var(--color-primary);
    font-family: SVNGilroyBold;
    font-size: 34px;
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translateY(-50%)
}

.text-emphasize {
    color: var(--color-primary)
}

.section-roadmap-pc .certificate {
    bottom: -40px;
    right: -1037px;
    z-index: 1
}

.section-roadmap-mobile .person {
    width: 160px;
    left: 40px;
    top: 12px;
    z-index: 1
}

.section-roadmap-mobile .arrow {
    transform: translate(-50%);
    left: 50%;
    top: 150px
}

.section-roadmap-mobile .certificate {
    top: 53px;
    width: 100px;
    right: 40px
}

.list-roadmap-mobile {
    max-width: 550px;
    margin: 0 auto;
    margin-bottom: 30px
}

.arrow-roadmap {
    padding-top: 16rem;
    max-width: 550px;
    margin: 0 auto
}

.section-roadmap-mobile .item-roadmap-mobile .left {
    left: 17px;
    top: 50%;
    transform: translateY(-50%)
}

.section-roadmap-mobile .item-roadmap-mobile .left .name-level {
    color: var(--black);
    font-weight: 700;
    font-size: 19px;
    min-width: 123px;
    text-align: center
}

.section-roadmap-mobile .item-roadmap-mobile .left p {
    color: var(--black);
    font-size: 16px;
    text-align: center;
    margin: 0
}

.section-roadmap-mobile .item-roadmap-mobile .right {
    left: 153px;
    top: 50%;
    transform: translateY(-50%)
}

.section-roadmap-mobile .item-roadmap-mobile .right h3 {
    color: var(--white);
    font-size: 22px
}

.section-roadmap-mobile .item-roadmap-mobile .right p {
    color: var(--white);
    font-size: 16px;
    margin: 0
}

.list-roadmap-mobile .item-roadmap-mobile:nth-child(2) .right {
    margin-left: 20px
}

.list-roadmap-mobile .item-roadmap-mobile:nth-child(3) .right {
    margin-left: 55px
}

.list-roadmap-mobile .item-roadmap-mobile:nth-child(4) .right, .list-roadmap-mobile .item-roadmap-mobile:nth-child(5) .right {
    margin-left: 70px
}

.list-roadmap-mobile .item-roadmap-mobile:last-child:last-child .right {
    margin-left: 85px
}

.section-media {
    padding: 70px 0 110px;
    background: url(../images/home/bg-7.webp) top center/cover no-repeat
}

.section-partner {
    padding: 90px 0;
    background: 0 0
}

.section-partner h2 {
    color: var(--color-primary);
    font-size: 40px;
    text-transform: uppercase;
    margin-bottom: 55px
}

.section-media h2 {
    font-size: 40px;
    text-transform: uppercase;
    margin-bottom: 55px;
    color: var(--white)
}

.list-partner {
    display: flex;
    flex-wrap: wrap;
    gap: 30px 12px
}

.item-media, .item-partner {
    padding: 0 20px;
    border: 2px solid #ff7000;
    border-radius: 10px;
    background: #fff;
    height: 100px;
    object-fit: cover
}

.item-media img, item-partner img {
    max-height: 100px
}

.g-30 {
    gap: 30px
}

.section-lecturers {
    padding: 90px 0;
    background: url(../images/home/bg-2.webp) top center/cover no-repeat
}

.section-lecturers h2 {
    font-size: 40px;
    color: var(--color-primary);
    text-transform: uppercase;
    margin-bottom: 55px
}

.item-lecturers {
    position: relative;
    width: 250px;
    height: 480px;
    background: url(../images/home/bg-8.webp) top center/cover no-repeat
}

.item-lecturers .content {
    width: 100%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 155px
}

.item-lecturers img {
    display: block;
    margin: 0 auto 12px;
    width: 140px !important;
    height: 140px !important;
    border-radius: 10px;
    object-fit: cover
}

.item-lecturers p.name {
    font-family: SVNGilroyBold;
    font-size: 17px;
    color: var(--color-primary);
    margin-bottom: 12px
}

.item-lecturers p.point {
    font-family: SVNGilroyBold;
    font-size: 17px;
    color: var(--black);
    margin-bottom: 12px
}

.item-lecturers i {
    font-family: SVNGilroyItalic;
    max-width: 170px;
    margin: 0 auto;
    line-height: 1.3
}

.section-category-sources h2 {
    margin-bottom: 30px
}

.section-category-sources p {
    max-width: 860px;
    font-size: 18px;
    color: var(--black);
    margin-bottom: 42px
}

.section-category-sources .list-category {
    display: grid;
    grid-template-columns:1fr 1fr 1fr;
    gap: 33.5px
}

.section-category-sources .item-category {
    position: relative;
    max-width: 375px;
    height: 250px;
    border-radius: 14px;
    overflow: hidden;
    z-index: 1;
    transition: all .25s ease
}

.section-category-sources .item-category:hover {
    cursor: pointer;
    transform: translateY(-10px) scale(1.01)
}

.section-category-sources .item-category > div {
    position: absolute;
    z-index: 1;
    left: 40px;
    bottom: 36px
}

.section-category-sources .item-category p {
    font-family: SVNGilroyXBold;
    color: var(--white);
    font-size: 32px;
    margin-bottom: 0
}

.section-category-sources .item-category img {
    height: 80px;
    margin-bottom: 25px
}

.section-category-sources .item-category::after {
    position: absolute;
    content: '';
    display: block;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: #210505;
    opacity: .7
}

.section-category-sources .item-category:nth-child(1) {
    background: url(../images/home/category-01.webp) top center/cover no-repeat
}

.section-category-sources .item-category:nth-child(2) {
    background: url(../images/home/category-02.webp) top center/cover no-repeat
}

.section-category-sources .item-category:nth-child(3) {
    background: url(../images/home/category-03.webp) top center/cover no-repeat
}

.section-category-sources .item-category:nth-child(4) {
    background: url(../images/home/category-04.webp) top center/cover no-repeat
}

.section-category-sources .item-category:nth-child(5) {
    background: url(../images/home/category-05.webp) top center/cover no-repeat
}

.section-category-sources .item-category:nth-child(6) {
    background: url(../images/home/category-06.webp) top center/cover no-repeat
}

.section-library {
    padding: 70px 0;
    background-color: #f5f5f5
}

.section-library p {
    max-width: 860px;
    font-size: 18px;
    color: var(--black);
    margin: 0 auto 42px
}

.section-library h2 {
    margin-bottom: 30px
}

.section-library .item-library {
    position: relative;
    background: url(../images/home/library-1.webp) top center/contain no-repeat;
    width: 280px;
    height: 400px;
    z-index: 1
}

.section-library .item-library::after {
    position: absolute;
    content: '';
    background: url(../images/home/shadow.webp) top center/contain no-repeat;
    display: block;
    width: 280px;
    height: 50px;
    bottom: -11px;
    left: 50%;
    transform: translate(-50%);
    filter: blur(4px)
}

.section-library .item-library img {
    display: block;
    margin: 26px auto 10px;
    height: 55px
}

.section-library .item-library div a {
    font-family: SVNGilroyBold;
    font-size: 20px;
    color: var(--white);
    text-transform: uppercase;
    padding-top: 26px;
    text-align: center;
    width: 100%
}

.section-library .item-library div a:hover {
    color: var(--white)
}

.section-library ul li::before {
    content: "\2022";
    color: red;
    font-weight: 700;
    display: inline-block;
    position: absolute;
    left: 17px
}

.section-library .item-library li {
    position: relative;
    font-family: SVNGilroyMedium;
    font-size: 15px;
    line-height: 1.3;
    color: var(--black);
    padding: 0 25px;
    margin-bottom: 5px;
    text-align: justify
}

.section-library .item-library li a {
    color: var(--black);
    font-family: SVNGilroyMedium;
    font-size: 15px;
    line-height: 1.3;
    text-align: justify
}

.section-library .owl-nav {
    top: calc(50% - 35px);
    z-index: -1
}

.section-social {
    min-height: 430px;
    padding: 80px 0
}

.section-social .item-social {
    position: relative;
    width: 205px;
    height: 180px;
    padding: 30px 0;
    box-shadow: rgba(99, 99, 99, .2) 0 2px 8px 0;
    background-color: var(--white);
    border-radius: 30px;
    text-align: center;
    cursor: pointer
}

.section-social .item-social img {
    position: absolute;
    top: 39%;
    transform: translate(-50%, -50%);
    width: 75px;
    align-self: center
}

.section-social .item-social p {
    position: absolute;
    font-family: SVNGilroyMedium;
    font-size: 18px;
    color: var(--black);
    font-weight: 700;
    bottom: 20px;
    width: 100%
}

.section-social .owl-carousel .owl-stage-outer {
    height: 215px;
    margin-top: 20
}

.section-social .owl-carousel .owl-stage {
    margin-top: 12px
}

.teaching_staff .owl-nav {
    display: block
}

.teaching_staff .carousel-control-next-icon {
    background: url(../../images/landing-pages/khoa-hoc-ielts/icon_next.png) top left no-repeat;
    width: 2.875rem;
    height: 2.875rem;
    right: -3.5rem;
    position: absolute
}

.teaching_staff .carousel-control-prev-icon {
    background: url(../../putaleng/images/landing-pages/khoa-hoc-ielts/icon_prev.png) top left no-repeat;
    width: 2.875rem;
    height: 2.875rem;
    left: -4.5rem;
    position: absolute
}

.teaching_staff {
    background: url(../../putaleng/images/landing-pages/khoa-hoc-ielts/teaching_staff.png) top center no-repeat
}

.teaching_staff_top h2 {
    font-family: SVNGilroyXBold;
    color: #e3801f;
    font-size: 2.813rem
}

.teaching_staff_top h2 span {
    font-family: SVNGilroyBold;
    color: #c12128;
    font-size: 1.875rem;
    padding: .938rem 0 1.563rem 0
}

.teaching_staff_item {
    width: 100%
}


.teaching_staff_item_icon {
    background: url(../../putaleng/images/landing-pages/khoa-hoc-ielts/link_6.3.png) top center no-repeat;
    background-size: 100% 100%;
    height: 60px;
    width: 157px;
    z-index: 1;
    top: -15px
}

.teaching_staff .owl-carousel .owl-stage-outer {
    padding-top: 13px
}

.teaching_staff_name {
    font-family: SVNGilroyBold;
    font-size: 1.255rem;
    margin-top: -.625rem;
    line-height: 1.3
}

.teaching_staff .owl-prev {
    left: -3.5rem;
    position: absolute
}

.teaching_staff .owl-next {
    right: -3.5rem;
    position: absolute
}

.teaching_staff_certificate {
    font-family: var(--font-family-SVN-Gilroy-XBold);
    color: #e3801f;
    font-size: 35px;
    -webkit-text-stroke: 2px #fff
}

.teaching_staff_content {
    font-family: var(--font-family-SVN-Gilroy-Regular);
    width: 91.5%;
    font-size: 1rem;
    text-align: justify;
    color: var(--text-black);
    margin: auto;
}

.teaching_staff_content p {
    margin-bottom: 0.6rem;
}

.my-slider .item .teaching_staff_item .teaching_staff_name {
    color: #d22225 !important
}

.committed_learning_main .carousel-control-prev {
    left: -34px
}

.committed_learning_main .carousel-control-next {
    right: -34px
}

.my-slider .item .teaching_staff_item .text {
    width: 100% !important
}

.my-slider .item .teaching_staff_item .text {
    margin-top: 20px !important
}

.my-slider .item .teaching_staff_item .teaching_staff_certificate {
    font-size: 35px !important
}

.teacher-2 .owl-nav {
    display: block !important;
    position: unset !important;
    transform: unset
}

.newspaper_main .owl-nav {
    display: block
}

.newspaper_main .owl-nav {
    top: 50% !important
}

.newspaper_main .owl-nav .owl-prev {
    position: absolute;
    left: -60px
}

.newspaper_main .owl-nav .owl-next {
    position: absolute;
    right: -40px
}

.bg_newspaper {
    background: url(../../sunshine/images/home/bg_newspaper.png) top center no-repeat;
    height: 921px;
    margin-top: -160px;
    padding-top: 130px
}

.teacher-2 .owl-nav .owl-prev {
    position: absolute;
    left: -40px;
    top: 27%;
    transform: translateY(-50%)
}

.teacher-2 .owl-nav .owl-next {
    position: absolute;
    right: -20px;
    top: 27%;
    transform: translateY(-50%)
}

.blog_share {
    margin-top: -10.7rem
}

.blog_share_main {
    margin-top: 3rem
}

.blog_share_top h2 {
    font-family: var(--font-family-SVN-Gilroy-Bold);
    font-size: 35px;
    color: #d42128;
    padding: 50px 0 0 0;
    margin-bottom: 0
}

.blog_share_item {
    border: 1px solid #df585e;
    border-radius: 30px;
    height: 60px;
    margin-bottom: 25px
}

.blog_share_item_active {
    background: #d42127
}

.blog_share_item_active a {
    color: #fff !important
}

.blog_share_right_top {
    font-family: var(--font-family-SVN-Gilroy-Bold);
    color: var(--text-black);
    font-size: 18px
}

.blog_share_right_item img {
    border-radius: 20px
}

.blog_share_right_item a {
    font-family: var(--font-family-SVN-Gilroy-Regular);
    color: var(--text-black);
    padding-top: 10px;
    font-size: 16px
}

.latest_news_main .owl-nav {
    display: block
}

.latest_news_main .owl-nav .owl-prev {
    position: absolute;
    left: -60px
}

.latest_news_main .owl-nav .owl-next {
    position: absolute;
    right: -40px
}

.blog_share_right_item a:hover {
    color: #d42128
}

.blog_share_item_first {
    margin-top: 37px
}

.blog_share_item:hover {
    background: #d42127
}

.blog_share_item:hover a {
    color: #fff
}

.blog_share_right_foo button {
    background: #f79e21;
    background: linear-gradient(90deg, rgba(247, 158, 33, 1) 0, rgba(240, 106, 34, 1) 50%, rgba(232, 34, 36, 1) 100%);
    border-radius: 30px;
    border: none;
    cursor: pointer;
    margin-top: 15px;
    padding: 5px 15px
}

.blog_share_right_foo button:before {
    content: '';
    display: block;
    position: absolute;
    background: rgba(255, 255, 255, .9);
    width: 60px;
    height: 100%;
    top: 0;
    filter: blur(30px);
    transform: translateX(-100px) skewX(-15deg);
    animation: slide 3s infinite 3s;
    z-index: 999
}

.blog_share_right_foo button:hover {
    background: #d52229;
    background: linear-gradient(90deg, rgba(213, 34, 41, 1) 0, rgba(240, 102, 34, 1) 50%, rgba(247, 159, 33, 1) 100%)
}

.blog_share_item a {
    padding: 11px 0;
    font-family: var(--font-family-SVN-Gilroy-Bold);
    font-size: 24px;
    color: var(--text-black)
}

.teaching_staff_footer p {
    font-family: SVNGilroyRegular;
    margin-bottom: 0;
    color: #333;
    font-size: 1.2rem
}

.latest_news_top {
    padding: 50px 0
}

.latest_news_top h2 {
    margin-bottom: 0;
    font-family: var(--font-family-SVN-Gilroy-Bold);
    font-size: 35px;
    color: #d42128
}

.latest_news_item {
    width: 93%
}

.central_facility_item a {
    box-shadow: rgba(0, 0, 0, .35) 0 0 10px
}

.central_facility_item a:hover {
    color: #fff
}

.central_facility_item p {
    font-family: var(--font-family-SVN-Gilroy-Bold) !important
}

.central_facility_item span {
    font-family: var(--font-family-SVN-Gilroy-Regular) !important
}

.central_facility_top {
    margin-top: 10px
}

.central_facility_item span {
    font-size: 16px !important
}

.central_facility_main {
    margin-top: 3rem
}

.central_facility {
    background: url(../../sunshine/images/home/bg_central_facility.png) top center no-repeat;
    height: 1084px;
    margin-top: -240px;
    padding-top: 20rem !important
}

.central_facility_top p {
    margin-bottom: 0;
    font-size: 35px;
    font-family: var(--font-family-SVN-Gilroy-Bold);
    color: #f6931e !important
}

.central_facility_top p span {
    font-family: var(--font-family-SVN-Gilroy-Bold);
    font-size: 35px;
    color: #d42128
}

.central_facility_item a:hover {
    background: #d52229;
    background: linear-gradient(90deg, rgba(213, 34, 41, 1) 0, rgba(240, 102, 34, 1) 50%, rgba(247, 159, 33, 1) 100%);
    color: #fff
}

.latest_news_image img {
    border-radius: 20px
}

.latest_news_name {
    font-family: var(--font-family-SVN-Gilroy-Regular);
    color: var(--text-black);
    padding-top: 15px;
    padding-bottom: 15px;
    font-size: 16px
}

.latest_news_name:hover {
    color: #d42128
}

.img-beauty {
    position: relative;
    width: 100%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    display: inline-block
}

.video {
    position: relative
}

.video img {
    position: absolute;
    color: #fff;
    font-size: 50px;
    top: 50%;
    left: 50%;
    margin: -25px 0 0 -25px;
    width: 50px !important;
    height: 50px !important
}

.box_header_start_mobile {
    display: none
}

.box_header_start_mobile > img {
    max-width: 100%;
}

.roadmap_wrapper_all_mobile {
    display: none
}

.box_header_start_bottom_mobile {
    display: none
}

.roadmap_wrapper_all_mobile .accordion-item {
    border: none;
    margin-bottom: 7px
}

.roadmap_wrapper_all_mobile .accordion-item .accordion-button {
    border-radius: 20px;
    background: #d6d6d6;
    color: var(--text-black);
    font-family: var(--font-family-SVN-Gilroy-Bold);
    font-size: 15px
}

.roadmap_wrapper_all_mobile .accordion-button::after {
    background: url(../../sunshine/images/home/icon_dot_next.png) top left no-repeat;
    width: 8px;
    height: 11px
}

.roadmap_wrapper_all_mobile .accordion-button:not(.collapsed)::after {
    background: url(../../sunshine/images/home/icon_dot_up.png) top left no-repeat;
    width: 12px;
    height: 8px;
    transform: rotate(-360deg)
}

.roadmap_wrapper_all_mobile .accordion-button:not(.collapsed) {
    box-shadow: unset;
    background: #d52229;
    color: #fff
}

.roadmap_wrapper_all_mobile_title p {
    margin-bottom: 0;
    font-family: var(--font-family-SVN-Gilroy-Bold);
    font-size: 18px;
    padding-bottom: 20px;
    color: #cb2128
}

.roadmap_wrapper_all_mobile_content {
    font-family: var(--font-family-SVN-Gilroy-Regular);
    font-size: 16px;
    color: var(--text-black)
}

.roadmap_wrapper_all_mobile .accordion-body {
    padding: 10px 0
}

.roadmap_wrapper_all_mobile_content ul li {
    position: relative;
    padding-left: 16px;
    font-family: var(--font-family-SVN-Gilroy-Regular);
    font-size: 16px;
    color: var(--text-black)
}

.roadmap_wrapper_all_mobile_content ul li:after {
    position: absolute;
    content: '';
    background: url(../../sunshine/images/home/icon_dot_mb.png) top left no-repeat;
    width: 7px;
    height: 7px;
    left: 0;
    top: 8px
}

.roadmap_wrapper_all_mobile_title p span {
    font-family: var(--font-family-SVN-Gilroy-Bold);
    font-size: 18px;
    color: #cb2128
}

#load-more-achievements {
    margin-top: 50px
}

.committed_learning_main .accordion-button::after {
    background: url(../../sunshine/images/home/icon_dot_next.png) top center no-repeat;
    width: 8px;
    height: 11px
}

.committed_learning_main .accordion-button:not(.collapsed)::after {
    transform: rotate(90deg)
}

.central_facility_item {
    width: 92.5%;
    margin-left: auto;
    margin-right: auto
}

.central_facility .owl-nav {
    display: block !important
}

.central_facility .owl-nav .owl-prev {
    position: absolute;
    left: -60px
}

.central_facility .owl-nav .owl-next {
    position: absolute;
    right: -40px
}

.central_facility .owl-item {
    padding-bottom: 15px
}

.central_facility_main_mobile {
    display: none
}

.box_header_start_img {
    margin-top: 5rem
}

.box_header_start_bottom {
    /*margin-left: 12rem*/
}

.scale-animation {
    animation: 1s ease-in-out 2s infinite normal none running scaleEffect
}

.committed_learning_main .accordion-item button:hover {
    color: #d42128
}

.central_facility_item_img img {
    max-width: 100%;
    aspect-ratio: 4/3
}

@media only screen and (min-width: 1200px) and (max-width: 1440px) {
    #section-2 {
        background-position: top -13px left, top 34px right, left 650px, right 75%
    }
}

@media only screen and (min-width: 1024px) and (max-width: 1152px) {
    .cta_top {
        top: 168px;
        width: 95.4%
    }

    .box_header_start_top {
        height: auto;
        padding-left: 0
    }

    .committed_learning_main h2 img {
        left: -30px
    }

    .roadmap_wrapper_left li {
        width: 100%;
        font-size: 18px
    }


    .teacher-2 .owl-nav .owl-prev {
        left: -24px
    }

    .bg_newspaper {
        margin-top: 0;
        padding-top: 0;
        height: unset;
        background: 0 0
    }

    .latest_news_main .owl-nav .owl-prev {
        left: -40px
    }

    .central_facility {
        background: 0 0
    }

    .blog_share {
        margin-top: 0
    }

    .newspaper_main .owl-nav .owl-prev {
        left: -42px
    }

    #section-2 {
        background: 0 0
    }

    #achievements .list-achievements .achievements-item {
        flex-basis: 28%
    }

    .committed_learning {
        margin-top: 0;
        padding-top: 0
    }

    .committed_learning_top {
        width: 100%
    }

    .committed_learning_main {
        width: 100%
    }

    .box_header {
        background-size: 100% 100%;
        height: 700px;
        margin-top: 65px
    }

    .box_header_start {
        margin-top: 20px
    }

    .box_header_start_img {
        width: 90%
    }

    .box_header_start_img img {
        width: unset;
        height: unset
    }

    .box_header_start_pc img {
        margin-left: 0;
        height: unset;
        width: unset
    }

    .box_header_start_caption {
        margin-top: 20px;
        font-size: 22px;
        padding-left: 0
    }

    .see_route {
        width: 100%
    }

    .opening_schedule {
        width: 100%
    }

    .box_header_start_bottom {
        margin-left: 0
    }

    .box_header_start_bottom a {
        font-size: 16px
    }

    .ping-focus {
        width: 105%
    }

    .box_header_start_bottom a {
        padding: 8px 0
    }
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
    .cta_top {
        top: 157px
    }

    .box_header {
        background-size: 100% 100%;
        height: 450px;
        margin-top: 62px
    }

    .box_header_start_img {
        width: 90%;
        margin-top: 3rem
    }

    .box_header_start_img img {
        width: unset;
        height: unset
    }

    .roadmap {
        margin-top: 3rem
    }

    .roadmap_wrapper_left li {
        width: 100%;
        font-size: 17px;
        padding: 22px 0
    }

    .roadmap_wrapper:before {
        left: 4px;
        z-index: -1;
        top: -82px
    }

    .roadmap_footer button {
        width: 100%;
        font-size: 15px
    }

    .roadmap_footer button {
        margin-top: 20px
    }

    .roadmap_main p {
        font-size: 18px;
        text-align: center
    }

    .roadmap_item ul li {
        font-size: 19px
    }

    #section-2 {
        background: 0 0
    }

    #achievements .list-achievements .achievements-item {
        margin-right: 20px;
        margin-bottom: 20px
    }

    #achievements .list-achievements .achievements-item .image {
        height: 10rem
    }

    #achievements .list-achievements .achievements-item .overall {
        bottom: 40%
    }

    .achievements-item .d-ipad {
        display: block !important
    }

    #load-more-achievements {
        margin-bottom: 20px
    }

    .committed_learning {
        margin-top: 0;
        padding-top: 0
    }

    .achievements {
        padding-bottom: 0 !important
    }

    .committed_learning_main {
        width: 100%
    }

    .committed_learning_main h2 img {
        left: -29px
    }

    .my-slider .item .teaching_staff_item {
        width: 90% !important
    }

    .my-slider .item .teaching_staff_item .teaching_staff_name {
        font-size: 18px !important
    }

    .my-slider .item .teaching_staff_item .teaching_staff_certificate {
        font-size: 27px !important
    }

    .teacher-2 .owl-nav .owl-prev {
        left: 0
    }

    .teacher-2 .owl-nav .owl-next {
        right: 0
    }

    .newspaper_main .owl-nav .owl-prev {
        left: 0
    }

    .newspaper_main .owl-nav .owl-next {
        right: 0
    }

    .bg_newspaper {
        background: 0 0;
        margin-top: 0;
        padding-top: 0;
        height: auto
    }

    .blog_share {
        margin-top: 0
    }

    .blog_share_top p {
        padding: 20px 0 0 0
    }

    .newspaper_item button {
        left: 12%
    }

    .blog_share_item a {
        font-size: 20px
    }

    .blog_share_item_first {
        margin-top: 0
    }

    .latest_news_top {
        padding: 20px 0
    }

    .latest_news_main .owl-nav .owl-prev {
        left: -20px
    }

    .latest_news_main .owl-nav .owl-next {
        right: -20px
    }

    .central_facility {
        background: 0 0;
        height: unset;
        margin-top: 0;
        padding-top: 0 !important
    }

    .central_facility_top p span {
        font-size: 30px
    }

    .central_facility_top p {
        font-size: 30px
    }

    .section-contact-sales-form {
        margin-top: 30px
    }


    .committed_learning_top p {
        margin-top: 0;
        padding-top: 0
    }

    .committed_learning_top {
        width: 100%
    }

    .box_header_start_top {
        font-size: 60px;
        height: unset;
        padding-left: 0
    }

    .box_header_start_pc img {
        margin-left: 0;
        width: unset;
        height: unset
    }

    .box_header_start {
        margin-top: 20px
    }

    .see_route {
        width: 100%
    }

    .box_header_start_bottom a {
        font-size: 16px
    }

    .box_header_start_bottom a {
        padding: 10px 0
    }

    .box_header_start_bottom {
        margin: 15px 0px;
    }

    .opening_schedule {
        width: 100%
    }

    .ping-focus {
        width: 105%
    }

    .roadmap_wrapper:before {
        background-size: 100% 100%;
        width: 200px;
        height: 100px
    }

    .roadmap_wrapper {
        margin-top: 0
    }

    .box_header_start_caption {
        font-size: 16px;
        margin-top: 0;
        padding-left: 0;
        padding-right: 20px
    }
}

@media (max-width: 767px) {
    .central_facility_item_img img {
        margin-left: auto;
        margin-right: auto
    }

    .popup-home {
        max-height: 70vh !important;
    }

    .cta_top {
        top: 194px
    }

    .newspaper_item {
        margin-left: auto;
        margin-right: auto;
        text-align: justify
    }

    .committed_learning_main h2 button {
        padding-right: 30px
    }

    .committed_learning_main .accordion-button::after {
        position: absolute;
        right: 12px
    }

    .item-new {
        height: unset
    }

    .item-new button {
        position: unset !important
    }

    .box_header_start_img {
        display: none
    }

    .central_facility_main_pc {
        display: none
    }

    .central_facility_main_mobile {
        display: block
    }

    .my-slider .owl-dots .owl-dot {
        margin-left: 4px
    }

    .my-slider .owl-dots .owl-dot {
        width: 1.6rem !important;
        height: 1.6rem !important
    }

    .central_facility .owl-nav .owl-prev {
        left: 0
    }

    .central_facility .owl-nav .owl-next {
        right: 0
    }

    .cta_footer_fix {
        width: 50px
    }

    .cta_item {
        padding-top: 5px;
        padding-bottom: 5px
    }

    .cta_item a {
        padding-bottom: 5px
    }

    .my-slider .owl-dots {
        display: flex !important;
        margin-left: auto;
        margin-right: auto
    }

    .newspaper_main {
        margin-top: 0
    }

    .newspaper_main .owl-nav .owl-prev {
        left: 0;
        transform: translateY(-5rem)
    }

    .blog_share_top p {
        margin-bottom: 0;
        padding: 10px 0 0 0;
        font-size: 30px
    }

    .blog_share_right_foo {
        padding-top: 20px
    }

    .blog_share_right_foo p {
        margin-top: -70px
    }

    .blog_share_right_item img {
        display: block;
        margin-left: auto;
        margin-right: auto
    }

    .latest_news_main .owl-nav .owl-prev {
        left: 0
    }

    .latest_news_top {
        padding: 90px 0 30px 0
    }

    .section-contact-sales-form {
        margin-top: 50px !important
    }

    .section-contact-sales-form .contact-form .title-contact-sale-form {
        font-size: 20px
    }

    .section-contact-sales-form .contact-form .title-contact-sale-form span {
        font-size: 20px
    }

    .my-slider .item .teaching_staff_item .teaching_staff_certificate {
        font-size: 27px !important
    }

    .teaching_staff_content {
        width: 100%;
    }

    .central_facility {
        background: 0 0;
        height: unset;
        margin-top: 0;
        padding-top: 0 !important
    }

    .latest_news_main .owl-nav .owl-next {
        right: 0
    }

    .blog_share_right_item:not(.blog_share_right_item_one) {
        display: none
    }

    .blog_share_main {
        margin-top: 0
    }

    .blog_share_item a {
        font-size: 18px
    }

    .newspaper_main .owl-nav .owl-next {
        right: 0;
        transform: translateY(-5rem)
    }

    .blog_share {
        margin-top: 20px
    }

    .newspaper_top p {
        font-size: 30px
    }

    .my-slider .owl-dots .owl-dot {
        display: inline-block !important
    }

    #load-more-achievements {
        margin-top: 30px
    }

    #load-more-achievements p {
        margin-top: -70px
    }

    .committed_learning_top {
        width: 100%
    }

    .committed_learning_top p {
        font-size: 30px
    }

    .committed_learning_top p span {
        font-size: 2rem
    }

    .committed_learning_main {
        width: 100%;
        margin-top: 15px
    }

    .committed_learning_main_r {
        background-size: 100% 100%;
        height: 365px
    }

    .committed_learning_main_r iframe {
        height: 300px
    }

    .committed_learning_main .carousel-control-prev {
        left: 0
    }

    .committed_learning_main .carousel-control-next {
        right: 0
    }

    .teacher-2 .title {
        font-size: 30px;
        color: #ec8a1f
    }

    .teacher-2 .alias {
        text-align: center !important;
        font-size: 30px
    }


    .teacher-2 .owl-nav .owl-prev {
        left: -15px;
        transform: translateY(-23rem)
    }

    .bg_newspaper {
        background: 0 0;
        height: unset;
        margin-top: 20px;
        padding-top: 0
    }

    .teacher-2-button {
        display: none
    }

    .teacher-2 .owl-nav .owl-next {
        right: 0;
        transform: translateY(-23rem)
    }

    .committed_learning_main_r button {
        width: 40px;
        height: 40px
    }

    .committed_learning_main h2 img {
        width: 43px;
        left: -10px
    }

    .box_header_start_pc {
        display: none
    }

    .committed_learning_main .accordion-item {
        margin-bottom: 20px
    }

    .box_header_start_bottom_mobile {
        display: block;
        background: 0 0;
        background-size: contain;
        height: unset
    }

    .roadmap_wrapper_all_mobile {
        display: block
    }

    .roadmap_wrapper_all_pc {
        display: none
    }

    .box_header_start_mobile {
        display: block
    }

    .box_header {
        position: relative;
        /*background: url(../../sunshine/images/home/bg_top_mobile.png) top center no-repeat;*/
        background-size: cover;
        /*height: 510px;*/
        margin-top: 81px
    }

    .roadmap_wrapper {
        padding: 11px;
        margin-top: 30px;
        margin-bottom: 30px;
    }

    .student_feelings_top .title {
        font-family: var(--font-family-SVN-Gilroy-Bold);
        color: #cb2128;
        font-size: 30px
    }

    .achievements-item:not(.achievements-item-one) {
        display: none
    }

    #achievements .alias {
        width: 100%
    }

    #achievements .list-achievements .achievements-item .image {
        border-radius: 12px
    }

    #achievements .list-achievements .achievements-item {
        flex-basis: 100%
    }

    .box_header_start_bottom_mobile {
        position: absolute;
        bottom: 50px;
        width: 90%;
        left: 2%
    }

    .box_header_start_top {
        font-size: 54px;
        text-align: center;
        height: unset;
        padding-left: 0
    }

    .box_header_start {
        margin-top: 22px
    }

    .box_header_start_caption {
        margin-top: 10px;
        margin-bottom: 20px;
        padding-left: 0
    }

    .roadmap_wrapper:before {
        background-size: 100% 100%;
        width: 114px;
        height: 53px;
        left: 3px;
        top: -40px;
        z-index: -1
    }

    .roadmap_footer button {
        width: 100%;
        height: 40px;
        font-size: 15px;
        margin-top: 30px;
        margin-bottom: 10px
    }

    .roadmap .shadow {
        box-shadow: 0 .2rem .4rem rgba(0, 0, 0, .15) !important
    }

    #section-2 {
        background: 0 0;
        margin-top: 0;
        padding-top: 0
    }

    .box_header_start_caption {
        font-size: 16px
    }

    .box_header_start_caption span {
        font-size: 16px;
        font-family: var(--font-family-SVN-Gilroy-Bold)
    }

    .box_header_start_bottom {
        margin-top: 40px;
    }

    .see_route {
        width: 100%;
        margin-bottom: 10px;
    }

    .see_route a {
        height: 50px
    }

    .opening_schedule {
        width: 100%
    }

    .opening_schedule a {
        height: 50px
    }

    .box_header_start_bottom a {
        font-size: 16px;
        padding: 8px 0
    }

    .ping-focus {
        width: 105%;
        height: 65px
    }
}

@media screen and (max-width: 320px) {
    .teacher-2 .owl-nav .owl-prev {
        transform: translateY(-21rem)
    }

    .teacher-2 .owl-nav .owl-next {
        transform: translateY(-21rem)
    }

    .teacher-2 .owl-nav img {
        width: 70%
    }
}