/* ============================================================================
 * Inspire_the_next.css 鈥 妯″潡鍒嗙被娉ㄩ噴
 * 浣滅敤鍩燂細鎵€鏈夋牱寮忓凡缁熶竴鏀舵暃鍒 #inspirethenext锛堝搴 <main id="inspirethenext">锛
 * 妯″潡鍒掑垎鍙傝€冿細inspirethenext/index.html
 *
 * 妯″潡娓呭崟锛
 *   1. 椤堕儴 Banner        -> .inspirethenext-banner
 *   2. 鏁板瓧鍖栬祴鑳借棰      -> .cred-video
 *   3. 鏍稿績鑳藉姏鍗＄墖杞挱    -> .card-section .swiper.card-swiper
 *   4. 鏍稿績鑳藉姏鍗＄墖鍒楄〃    -> .card-section.card-list
 *   5. 鏁板瓧鍖栧熀纭€璁炬柦      -> .digit-infra
 *   6. 鑱旂郴鍜ㄨ CTA 妯箙   -> .contact-cta
 * ============================================================================ */

/* 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲
   妯″潡 1锛氶《閮 Banner锛圛nspire the next 缃插悕妯箙锛
   瀵瑰簲 HTML锛欬section class="inspirethenext-banner">
   鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺 */
#inspirethenext .inspirethenext-banner{
    width: 100%;
    min-height: 280px;            /* 鐢 min-height 鑰屼笉鏄 height */
    height: auto; 
    margin-bottom: 40px;
    background: url('/image/ml_portal/2026/Inspire_the_next/top_branding_itn.jpg') no-repeat;
    background-size: cover;
    background-position: center;
    padding: 5rem 0;
}
#inspirethenext .inspirethenext-banner .inspirethenext-banner-img{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    overflow: hidden;
}
#inspirethenext .inspirethenext-banner .inspirethenext-banner-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#inspirethenext .inspirethenext-banner .inspirethenext-banner-text{
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
#inspirethenext .inspirethenext-banner .inspirethenext-banner-text p{
    color: #fff;
    font-size: 1rem;
    line-height: 1.8;
}
#inspirethenext .inspirethenext-banner .inspirethenext-banner-text img{
    width: 95%;
    max-width: 420px;
}


/* 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲
   妯″潡 2锛氭暟瀛楀寲璧嬭兘瑙嗛
   瀵瑰簲 HTML锛欬section class="card-section"> 鈥 <div class="cred-video">
   鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺 */
#inspirethenext .cred-video {
    display: inline-flex;
    align-items: center;
    aspect-ratio: 16 / 9;
    width: 100%;
    position: relative;
}


/* 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲
   妯″潡 3锛氭牳蹇冭兘鍔涘崱鐗囪疆鎾紙Swiper 瀹瑰櫒锛
   瀵瑰簲 HTML锛欬div class="swiper card-swiper">
   鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺 */
#inspirethenext .card-section .swiper.card-swiper{
    overflow: hidden;
    max-width: 1275px;
}


/* 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲
   妯″潡 4锛氭牳蹇冭兘鍔涘崱鐗囧垪琛
   瀵瑰簲 HTML锛欬section class="card-section card-list">
   鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺 */
#inspirethenext .card-section.card-list{
    padding-inline: 0;
}
#inspirethenext .card-section.card-list h2.card-title{
    padding-left: 15px;
}
#inspirethenext .card-section p.TextStyle1{
    font-size: 1rem;
}
#inspirethenext .card-section.card-list p.TextStyle1{
    max-width: 1306px;
    padding-inline: 15px;
}
#inspirethenext .card-section.card-list .card-desc{
    margin-bottom: 0;
}
@media screen and (max-width: 1306px){
    #inspirethenext .card-section.card-list{
        padding-inline: 15px;
    }
    #inspirethenext .card-section.card-list h2.card-title{
        padding-left: 0;
    }
    #inspirethenext .card-section.card-list p.TextStyle1{
        padding-inline: 0;
    }
}
@media screen and (max-width: 996px){
    #inspirethenext .card-section.card-list{
        padding-inline: 0;
    }
    #inspirethenext .card-section.card-list h2.card-title,
    #inspirethenext .card-section.card-list p.TextStyle1{
        padding-left: 15px;
    }
}


/* 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲
   妯″潡 5锛氭暟瀛楀寲鍩虹璁炬柦锛圖igitalizing Infrastructure锛
   瀵瑰簲 HTML锛欬section class="card-section digit-infra">
   鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺 */
#inspirethenext .digit-infra{
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.5625rem;
    align-items: stretch;
    margin-bottom: 40px;
    background: #f4f4f4;
    padding: 1.5rem;
    max-width: 1275px;
}
#inspirethenext .digit-infra> div:first-child{
    flex: 1 1 0;
    background: #F4F4F4;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
#inspirethenext .digit-infra> div:first-child > iframe{
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
#inspirethenext .digit-infra> div:last-child{
    flex: 1 1 0;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
#inspirethenext .digit-infra> div:last-child > p,
#inspirethenext .digit-infra> div:last-child > p span{
    font-size: 1rem;
    line-height: 24px;
}
#inspirethenext .digit-infra> div:last-child > p strong{
    color: #0C0C0C;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.3;
    margin: 8px 0 0;
}
@media screen and (max-width: 1306px) {
    #inspirethenext .digit-infra{
        width: auto;
        margin-inline: 15px;
    }
}
@media screen and (max-width: 996px) {
    #inspirethenext .digit-infra{
        flex-direction: column;
        gap: 24px;
    }
    #inspirethenext .digit-infra> div:first-child,
    #inspirethenext .digit-infra> div:last-child{
        flex: 1 1 auto;
        width: 100%;
    }
}


/* 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲
   妯″潡 6锛氳仈绯诲挩璇 CTA 妯箙
   瀵瑰簲 HTML锛欬section class="contact-cta">
   鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺 */
#inspirethenext .contact-cta{
    background: url('/image/ml_portal/2026/Inspire_the_next/RedLoRes.png') no-repeat center / cover;
    /* padding: 36px 100px; */
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}
#inspirethenext .contact-cta .card-section{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 36px 100px;
}
#inspirethenext .contact-cta .card-section .button .btn-arrow.notBg{
    background-color: #fff;
}
#inspirethenext .contact-cta p{
    color: #fff;
    font-size: 28px;
    font-weight: 700;
}
@media screen and (max-width: 768px) {
    #inspirethenext .contact-cta .card-section{
        flex-direction: column;
        gap: 20px;
        align-items: flex-start;
        padding: 30px;
    }
    #inspirethenext .contact-cta  p{
        font-size: 22px;
    }
}