.show-on-collapse{
    display: none;
}

@media only screen
  and (min-device-width: 1280px) 
  and (max-device-width: 1837px){
    .center-parent{
        width: 100%;
    }

    .platform-advantage-cards-wrapper{
        width: 100%;
    }
}

@media only screen and (max-width: 1280px) {
    /* Home Page */
    .wrap{
        padding: 0 16px;
    }

    .center-parent{
        width: 100%;
    }

    .landing-background-text-container {
        padding: 60px 0 0 60px;
    }

    .landing-mission-wrapper .mission-top {
        flex-direction: column;
        margin-bottom: 24px;
    }

    .landing-mission-wrapper .mission-top-left {
        flex: 0 0 auto;
    }

    .landing-mission-wrapper .mission-top-right {
        padding-top: 25.6px;
        font-size: 12px;
        line-height: 1.7;
    }

    .landing-mission-wrapper #mission-top-title {
        font-size: 24px;
        line-height: 40px;
    }

    .landing-mission-wrapper #mission-top-subtitle {
        font-size: 36px;
        line-height: 1.2;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .landing-mission-wrapper .mission-card-container {
        flex-direction: column;
        gap: 24px;
    }

    .landing-mission-wrapper .mission-card-highlight,
    .landing-mission-wrapper .mission-card {
        flex: 1;
        min-height: 372px;
        padding: 32px;
    }

    .landing-mission-wrapper .mission-card-title {
        font-size: 19.2px;
        line-height: 1.4;
        margin-bottom: 53.6px;
    }

    .landing-mission-wrapper .mission-card-description {
        font-size: 12.8px;
        line-height: 1.7;
    }

    .landing-mission-wrapper .mission-num {
        font-size: 38.4px;
        line-height: 1.2;
    }

    .landing-mission-wrapper .mission-card-icon {
        flex: 0 1 131.2px;
    }

    .landing-mission-wrapper .mission-card-icon > img {
        width: 67.2px;
        height: 67.2px;
        border-radius: 50%;
        background-color: #f0f5f6;
        padding: 10.5px;
    }

    .landing-mission-wrapper .mission-label {
        font-size: 11.2px;
        line-height: 20.8px;
    }

    .landing-platform-wrapper .platform-text-container{
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        gap: 44px;
    }

    .landing-platform-wrapper .platform-photo-container {
        grid-row-start: 2;
        grid-row-end: 3;
    }

    .landing-platform-wrapper #platform-text-title {
        font-size: 36px;
        line-height: 65.6px;
    }

    .landing-platform-wrapper #platform-text-subtitle {
        font-size: 24px;
        line-height: 40px;
    }

    .landing-platform-wrapper .platform-photo-container {
        padding: 0;
    }

    .landing-platform-wrapper .platform-photo-on-top,
    .landing-platform-wrapper #platform-photo-1,
    .landing-platform-wrapper .platform-photo-on-bottom {
        width: 100%;
    }

    .landing-platform-wrapper #platform-photo-2,
    .landing-platform-wrapper #platform-photo-3 {
        width: 50%;
        margin: 0;
    }

    .landing-platform-wrapper .platform-photo-on-bottom {
        gap: 12px;
    }

    .landing-platform-wrapper .platform-game-list-top {
        flex-direction: column;
        gap: 8px;
    }

    .landing-platform-wrapper .platform-game-info-text {
        font-size: 19.2px;
        line-height: 20.8px;
        margin-bottom: 20px;
    }

    .landing-platform-wrapper .platform-game-list-item,
    .landing-platform-wrapper .platform-game-list-item-light {
        font-size: 12.8px;
        line-height: 20.8px;
        margin-bottom: 16px;
    }

    .landing-platform-wrapper .platform-game-list-line {
        margin: 16px 0 32px;
    }

    .landing-platform-wrapper .platform-button-container {
        margin-top: 8px;
    }

    .landing-platform-wrapper .platform-button-container > button {
        margin: 0 auto;
    }

    .landing-team-wrapper {
        padding: 41.2px 16px 10px;
    }

    .landing-team-wrapper .landing-team-container {
        height: auto;
        padding: 36px 16px;
        flex-direction: column;
    }

    .landing-team-wrapper .landing-team-text-container {
        width: 100%;
        max-width: none;
        padding-bottom: 24px;
    }

    .landing-team-wrapper #landing-team-title {
        font-size: 36px;
        line-height: 65.6px;
        margin-bottom: 38.4px;
    }

    .landing-team-wrapper #landing-team-subtitle {
        font-size: 16px;
        line-height: 1.5;
    }

    .landing-team-wrapper .team-button-container {
        margin: 0 auto;
    }

    .footer-wrapper .footer-container {
        padding: 42px 47px 53px;
        flex-direction: column;
        gap: 24px;
    }
    .footer-wrapper .footer-right {
        gap: 28px;
    }
    .footer-wrapper .footer-left > a > img {
        width: 100%;
        max-width: 282px;
        height: auto;
    }
    .footer-wrapper .footer-left {
        display: flex;
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }
    .footer-wrapper .footer-info-text {
        font-size: 12.8px;
        line-height: 20.8px;
    }

    /* Serious Game */
    .platform-catalogue-title-wrapper{
        width: 100%;
    }

    .platform-introduce-container{
       flex-direction: column;
        width: 100%;
        gap: 24px;
    }

    .platform-introduce-left, .platform-introduce-right{
        margin: 0 auto;
        width: 100%;
    }

    .platform-introduce-left{
        gap: 24px;
    } 

    .platform-advantage-cards-wrapper{
        width: 100%;
    }

    .platform-advantage-card {
        padding: 60px 10px 42px 10px;
    }

    .platform-featrue-title-wrapper{
        flex-direction: column;
        align-items: baseline;
    }

    .platform-featrue-cards-wrapper{
        width: 100%;
        margin-top: 24px;
    }

    .platform-featrue-card{
        margin: 0 auto;
    }

    .platform-training-mode-wrapper{
        flex-direction: column;
        margin-top: 16px;
        gap: 64px;
    }

    .platform-training-mode-container{
        width: 100%;
        margin: 0 auto;
        margin-top: 24px;
        align-items: baseline;
    }

    .platform-training-mode-header2{
        text-align: left;
    }

    .platform-training-mode-right {
        width: 100%;
    }

    .platform-training-mode-right img{
        width: 100%;
    }

    .platform-catalogue-wrapper{
        margin: 0 auto;
    }

    .platform-seemore-container .movie-content-show {
        width: 100%;
        height: auto;
        margin: 60px auto;
    }
    
    .platform-introduce-insight-wrapper{
        left: 30%;
    }

    .platform-featrue-card-photo-wrapper{
        height: min-content;
        margin-top: 28px;
    }

    #platform-featrue-card-photo1,
    #platform-featrue-card-photo2,
    #platform-featrue-card-photo3,
    #platform-featrue-card-photo4{
        max-width: 100%;
        height: auto;
    }

    .contact-container{
        flex-direction: column;
    }
    
    .contact-right, #contact-section{
        margin: 0 auto;
    }

    .team-member-item {
        width: calc(100% / 2 - 40px);
    }
}

@media only screen and (max-width: 767px) {
    /* Home Page */
    .wrap{
        width: 100%;
    }
    .center-parent{
        width: 100%;
    }

    .nav-box {
        height: 70px;
    }
    .nav-box .menu-button {
        display: none;
    }
    .nav-box .burger-toggle {
        justify-content: flex-end;
    }
    .nav-box .navbar-collapse {
        position: absolute;
        top: 100%;
        z-index: 20;
        background: #fff;
        padding-right: 16px;
    }
    .show-on-collapse{
        display: block;
    }
    .landing-top-wrapper {
        height: auto;
    }

    .landing-top-wrapper .landing-background-text-container {
        padding: 24px;
    }

    .landing-top-wrapper #landing-background-wrapper-1 #landing-background-text-1 {
        font-size: 36px;
        letter-spacing: 0px;
    }

    .landing-top-wrapper #landing-background-wrapper-2 #landing-background-text-2 {
        font-size: 12px;
        width: 300px;
    }

    .landing-top-wrapper .landing-background-header {
        gap: 12.8px;
    }

    .landing-mission-wrapper {
        margin-top: 40px;
    }

    .landing-mission-wrapper .mission-top {
        flex-direction: column;
    }

    
    /* Serious Game */
    .platform-catalogue-title-wrapper{
        width: 100%;
    }

    .platform-introduce-container{
        flex-direction: column;
        width: 100%;
        gap: 24px;
    }

    .platform-introduce-left, .platform-introduce-right{
        margin: 0 auto;
        width: 100%;
    }

    .platform-introduce-left{
        gap: 24px;
    } 

    .platform-advantage-cards-wrapper{
        width: 100%;
    }

    .platform-advantage-card {
        padding: 60px 10px 42px 10px;
    }

    .platform-featrue-cards-wrapper{
        width: 100%;
        margin-top: 24px;
    }

    .platform-featrue-title-left{
        width: 100%;
    }
    
    .platform-featrue-card{
        margin: 0 auto;
        gap: 6px;
    }

    .platform-training-mode-wrapper{
        flex-direction: column;
        margin-top: 16px;
        gap: 64px;
    }

    .platform-training-mode-right{
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .platform-training-mode-right{
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .platform-training-mode-container{
        width: 100%;
        margin: 0 auto;
        margin-top: 24px;
        align-items: baseline;
    }

    .platform-training-mode-header2{
        text-align: left;
    }
    
    .platform-training-mode-right {
        width: 100%;
    }

    .platform-training-mode-right img{
        width: 100%;
    }

    .platform-catalogue-wrapper{
        margin: 0 auto;
        background: #FFF;
        box-shadow: 4.8px 3.2px 56px 6.4px rgba(48, 123, 196, 0.09);
    }

    .platform-seemore-container .movie-content-show {
        width: 100%;
        height: auto;
        margin: 60px auto;
    }
    
    .platform-introduce-insight-wrapper{
        left: 0;
    }

    .platform-featrue-card-photo-wrapper{
        height: min-content;
        margin-top: 28px;
    }

    #platform-featrue-card-photo1,
    #platform-featrue-card-photo2,
    #platform-featrue-card-photo3,
    #platform-featrue-card-photo4{
        max-width: 100%;
        height: auto;
        object-fit: contain;
    }

    .platform-advantage-cards-wrapper{
        flex-direction: column;
    }
    .contact-container{
        flex-direction: column;
    }
    .contact-right,
    .contact-left,
    .contact-header{
        width: 100%;
    }
    .contact-right, #contact-section{
        margin: 0 auto;
    }

    .team-member-item {
        width: calc(100% / 2 - 40px);
    }
}


@media only screen and (min-width: 256px) and (max-width: 767px) {
    .landing-background-title{
        width: 100%;
    }

    .platform-introduce-insight-wrapper{
        width: 100%;    
        margin: 342px 0px;
    }

    .platform-featrue-cards-wrapper{
    }

    .platform-featrue-title-left{
        width: 100%;
    }

    .platform-featrue-card-photo-wrapper{
        height: min-content;
        margin-top: 28px;
    }

    #platform-featrue-card-photo1,
    #platform-featrue-card-photo2,
    #platform-featrue-card-photo3,
    #platform-featrue-card-photo4{
        max-width: 100%;
        height: auto;
        object-fit: contain;
    }

    .platform-training-mode-card{
        width: 100%;
    }

    .platform-training-mode-card-photo{
        /* left: 50%; */
        left: 0;
    }

    .platform-catalogue-item-wrapper{
        width: 100%;
    }

    .team-wrapper{
        width: 100%;
    }

    .team-member-item-wrapper{
        width: 100%;
    }

    .team-member-item {
        width: calc(100% / 1 - 40px);
    }
}