/* 大筆電 */
@media (max-width: 1600px) {
}

/* 筆電 */
@media (max-width: 1440px) and (min-width: 991px) {

}

/* 大橫式平板(例: iPad Pro/Air) */
@media (max-width: 1200px) and (min-width: 992px) {
    
}

/* 平板（<=992px） */
@media (max-width: 992px) {

    .text-header {
        font-size: 28px;
        font-weight: 700;
    }

    .text-subheader {
        font-size: 21px;
        font-weight: 700;
    }

    .text-subtitle {
        font-size: 21px;
        font-weight: 400;
    }

    /* #region -----Hero(Banner) 區塊樣式----- */

    .hero{
        margin-top: 70px;
    }

    .hero-container{
        padding: 0px;;
    }

    .hero-text{
        padding: 0px 20px;
    }

    .hero-text [name="title"] {
        margin-bottom: 20px;
    }

    .hero-img{
        order: -1;
        padding: 54px 49px 42px 49px;
    }

    .hero-img img[name="Background"] {
        width: 100%;
        height: auto;
    }

    .hero-img img[name="Main"] {
        width: 35%;
        height: auto;
    }

    /* #endregion */ 

    /* #region -----Story(Banner) 區塊樣式----- */
    .story{
        padding: 50px 20px 34px 20px;
    }

    .story-container{
        justify-content: center;
    }

    .story-container video{
        width: 100%;
        height: auto;
        aspect-ratio: 353/246;
    }

    .story-text{
        width: 100%;
        margin-top: 30px;
    }
    
    .story [name="title"] {
        margin-bottom: 20px;
    }

    /* #endregion */ 

    /* #region -----Awards 區塊樣式----- */
    .awards {
        padding: 50px 20px;
    }

    .awards-text {
        margin-bottom: 30px;
    }

    .awards-list {
        width: 100%;
        gap: 30px;
    }

    .awards-item-container {
        flex: 0 0 auto;
        width: 100%;
        height: 100%;
        min-height: 520px;
        padding: 0px;
    }

    .awards-item p{
        font-weight: 300;
    }

    /* #endregion */ 

    /* #region -----Milestones 區塊樣式----- */

    .milestones {
        height: 600px;
    }

    .milestones video {
        width: 100%;
        height: auto;
        top: 70%;
    }

    /* Hide desktop video and show mobile video on tablet and mobile */
    .milestones .video-desktop {
        display: none;
    }

    .milestones .video-mobile {
        display: block;
    }

    .milestones-container [name="title"] {
        padding-top: 50px;
    }

    .milestones-container [name="content"] {
        padding-top: 105px;
    }

    /* #endregion */ 

    /* #region -----Innovation 區塊樣式----- */

    .innovation {
        padding: 50px 20px;
    }

    .innovation-header{
        width: 100%;
    }

    .innovation-header [name="title"]{
        padding-bottom: 30px;
    }

    .innovation-header [name="content"]{
        padding-bottom: 7px;
    }

    .innovation-body{
        margin: 0;
        gap: 30px;
    }

    .innovation-body a{
        width: 100%;
    }

    /* #endregion */ 

    /* #region -----Global 區塊樣式----- */

    .global {
        padding: 50px 20px;
    }

    .global .dropdown-list{
        width: 100%;
        padding-top: 2px;
        padding-bottom: 61px;
    }

    .global [name="title"] h1{
        margin-bottom: 30px;
    }

    .global [name="content"] {
        --bs-gutter-x: 0;
        gap: 30px;
    }

    .global [name="other"] h1{
        margin-bottom: 34px;
        justify-content: center;
    }

    .global-countries{
        gap: 34px;
        display: grid;
        justify-content: center;
    }

    /* #endregion */ 

    /* #region -----Sustainability 區塊樣式----- */
    .sustainability-text {
        width: 100%;
        max-width: unset;
        padding: 30px 20px;
        margin: 0;
        justify-content: center;
    }

    .sustainability-text [name="title"] {
        padding: 0 5%;
    }

    .sustainability-text p {
        margin-bottom: 20px;
    }

    .sustainability-text .btn{
        margin-top: 10px;
        margin-bottom: 20px;
    }

    /* #endregion */ 

    /* #region -----Join Us 區塊樣式----- */
    .join-us-image {
        order: -1;
    }

    .join-us-text {
        width: 100%;
        max-width: unset;
        padding: 30px 20px;
        margin: 0;
        justify-content: center;
    }

    .join-us-text [name="title"] {
        padding: 0 5%;
    }

    .join-us-text p {
        margin-bottom: 20px;
    }

    .join-us-text .btn{
        margin-top: 10px;
        margin-bottom: 20px;
    }
    /* #endregion */ 
    

}

/* 小平板或大手機（<=768px） */
@media only screen and (max-width: 768px) {
    .awards-item-container{
        min-height: 520px;
    }
}

/* 小型手機（<=576px） */
@media (max-width: 576px) {
    .awards-item-container{
        min-height: 600px;
    }

    .milestones video {
        top: 50%;
    }
}

@media (max-width: 375px) {
    .milestones video {
        top: 45%;
    }
}