@font-face {
    font-family: 'TTNormsProRegular';
    src: url('../font/TT-Norms-Pro-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TTNormsProMedium';
    src: url('../font/TT-Norms-Pro-Medium.woff') format('woff'),
         url('../font/TT-Norms-Pro-Medium.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TTNormsProBold';
    src: url('../font/TT-Norms-Pro-Bold.woff') format('woff'),
         url('../font/TT-Norms-Pro-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../font/Roboto-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../font/Roboto-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5;
    color: #333333;
}

.btn-tertiary:hover {
    color: #ffffff !important;
    background: #0051a8 !important;
    border-color: #0051a8 !important;
}

#partner ul {
    padding-left: 0;
    flex-flow: row wrap;
    gap: 48px;
}
#partner ul li {
    width: calc(25% - 48px);
    a {
        padding: 8px 40px;
    }
}

#partner ul li p {
    font-size: 0.875rem;
    color: #0074D9;
    margin-bottom: 0;
}

.hero-banner {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;    
    object-position: right;
}

#overview {
    
    li {
        border-radius: 16px;
        background-color: #f2f4f7;
        overflow: hidden;
        max-width: 540px;
        max-height: 500px;
    }
    .card-contant {
        padding: 24px;
        text-align: left;
        p {
            line-height: 1.5;
        }
    }
}

.partner-tier h3 {
    /* font-size: 1.5rem;
    line-height: 1.333;
    font-weight: 700; */
    text-transform: uppercase;
}

.PA-VideoBanner-wrap {
    overflow: hidden;
}

.PA-VideoBanner-wrap .VideoBanner-img {
    left: 50%;
    right: inherit;
    transform: translate(-40%, 0px);
}

@media (max-width: 1024px) {
    #overview {
        li {
            max-height: none;
        }
    }
    #partner ul {
        gap: 30px;
    }
    #partner ul li {
        width: calc(25% - 30px);
        a {
            padding: 8px 20px;
        }
    }
}

@media (max-width: 768px) {
    #overview {
        ul {
            align-items: center;
        }  
    }
    .hero-section {
        position: relative;
        overflow: hidden;
    }
    .hero-section .container {
        padding-top: 70vw;
        padding-bottom: 30px;
        padding-left: 0;
        padding-right: 0;
        
    }
    .hero-banner {
        position: absolute;
        top: 0;
        left: 50%;
        z-index: 1;
        width: 200vw;
        height: 100%;
        object-fit: contain;
        object-position: top;
        max-width: none;
        transform: translate(-128vw, 0px);
        
    }
    .kv__bg {
        background: linear-gradient(180deg, rgba(15, 135, 166, 0) 32.31%, #17263b 52%) !important;
    }
    #partner ul {
        gap: 30px;
    }
    #partner ul li {
        width: calc(33.3333% - 30px);
        a {
            padding: 8px 20px;
        }
    }
}

@media (max-width: 480px) {
    .kv__bg {
        background: linear-gradient(180deg, rgba(15, 135, 166, 0) 32.31%, #17263b 41%) !important;
    }
    #overview {
        li {
            max-height: none;
        }
    }
    #partner ul{
        gap: 20px;
    }
    #partner ul li {
        width: calc(50% - 20px);
        
        a {
            padding: 8px 20px;
        }
    }
    #partner ul li p {
        font-size: 0.813rem;
    }
}

@media (min-width: 1440px) {
    .hero-banner {        
        object-fit: contain;    
    }
}