@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap");
@font-face {
    font-family: ProximaNova-Black;
    src: url('/assets/web-resources/business/fonts/bbs-pop-up/ProximaNova-Black.ttf');
}
@font-face {
    font-family: ProximaNova-Bold;
    src: url('/assets/web-resources/business/fonts/bbs-pop-up/ProximaNova-Bold.ttf');
}
@font-face {
    font-family: ProximaNova-Light;
    src: url('/assets/web-resources/business/fonts/bbs-pop-up/ProximaNova-Light.ttf');
}
@font-face {
    font-family: ProximaNova-Regular;
    src: url('/assets/web-resources/business/fonts/bbs-pop-up/ProximaNova-Regular.ttf');
}

body{
    padding: 0px;
    font-family: 'ProximaNova-Regular';
}

/********************************************************
** [+] START BANNER 815 x 320
********************************************************/

    .banner_815x320{
        width: 815px;
        height: 320px;
        max-width: 815px;
        max-height: 320px;
        border-radius: 10px;
        background: url('/assets/web-resources/business/images/bbs-pop-up/banner/bg_815_320.png') no-repeat center;
        background-size: cover;
        overflow: hidden;
    }

    .banner_815x320 .banner_wrapper{
        padding: 0px 0 0 25px;
        font-family: 'ProximaNova-Regular';
        color: #FFFFFF;
        display: flex;
        align-items: center;
    }

    .banner_815x320 .banner_wrapper .banner_content{
        width: 35%;
    }
    .banner_815x320 .banner_wrapper .banner_kv{
        width: 65%;
        height: 320px;
    }

    .banner_815x320 .banner_wrapper .banner_content h2{
        font-family: 'ProximaNova-Regular';
        font-style: normal;
        font-weight: 500;
        font-size: 36px;
        letter-spacing: -0.02em;
        color: #FFFFFF;
        margin-top: 0.3em;
        margin-bottom: .3em;    
        line-height: 35px;
    }

    .banner_815x285 .banner_wrapper .banner_content .banner-caption{
        font-size: 18px;
    }

    .banner_815x320 .banner_wrapper .banner_content a.link-learn-more{
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 400;
        color: #6DD2EE;
        text-decoration: none;
        font-size: 15px;
    }
    .banner_815x320 .banner_wrapper .banner_content a.link-learn-more svg {
        vertical-align: middle;
    }

    .banner_815x320 .banner_wrapper .banner_content a.link-learn-more:hover{
        color: #6DD2EE;
    }

    .banner_815x320 .banner_wrapper .banner_content .icon_container{
        display: flex;
        align-items: center;
        font-size: 14px;
    }

/********************************************************
** [-] END BANNER 750 x 320
********************************************************/

/********************************************************
** [+] START BANNER 750 x 320
********************************************************/

    .banner_750x320{
        width: 750px;
        height: 320px;
        max-width: 750px;
        max-height: 320px;
        border-radius: 10px;
        background: url('/assets/web-resources/business/images/bbs-pop-up/banner/bg_750_320.png') no-repeat center;
        background-size: cover;
        overflow: hidden;
    }

    .banner_750x320 .banner_wrapper{
        padding: 0px 0 0 25px;
        font-family: 'ProximaNova-Regular';
        color: #FFFFFF;
        display: flex;
        align-items: center;
    }

    .banner_750x320 .banner_wrapper .banner_content{
        width: 35%;
    }
    .banner_750x320 .banner_wrapper .banner_kv{
        width: 65%;
        height: 320px;
    }

    .banner_750x320 .banner_wrapper .banner_content h2{
        font-family: 'ProximaNova-Regular';
        font-style: normal;
        font-weight: 500;
        font-size: 36px;
        letter-spacing: -0.02em;
        color: #FFFFFF;
        margin-top: 0.3em;
        margin-bottom: .3em;    
        line-height: 35px;
    }

    .banner_750x320 .banner_wrapper .banner_content .banner-caption{
        font-size: 18px;
    }
    
    .banner_750x320 .banner_wrapper .banner_content a.link-learn-more{
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 400;
        color: #6DD2EE;
        text-decoration: none;
        font-size: 15px;
    }
    .banner_750x320 .banner_wrapper .banner_content a.link-learn-more svg {
        vertical-align: middle;
    }

    .banner_750x320 .banner_wrapper .banner_content a.link-learn-more:hover{
        color: #6DD2EE;
    }

    .banner_750x320 .banner_wrapper .banner_content .icon_container{
        display: flex;
        align-items: center;
        font-size: 14px;
    }

/********************************************************
** [-] END BANNER 750 x 320
********************************************************/



/********************************************************
** [+] START BANNER 587 x 285
********************************************************/

    .banner_587x285{
        width: 587px;
        height: 285px;
        max-width: 587px;
        max-height: 285px;
        border-radius: 10px;
        background: url('/assets/web-resources/business/images/bbs-pop-up/banner/bg_587_285.png') no-repeat center;
        background-size: cover;
        overflow: hidden;
    }

    .banner_587x285 .banner_wrapper{
        padding: 0px 0 0 25px;
        font-family: 'ProximaNova-Regular';
        color: #FFFFFF;
        display: flex;
        align-items: center;
    }

    .banner_587x285 .banner_wrapper .banner_content{
        width: 40%;
    }
    .banner_587x285 .banner_wrapper .banner_kv{
        width: 60%;
        height: 285px;
    }

    .banner_587x285 .banner_wrapper .banner_content h2{
        font-family: 'ProximaNova-Regular';
        font-style: normal;
        font-weight: 500;
        font-size: 28px;
        letter-spacing: -0.02em;
        color: #FFFFFF;
        margin-top: 0.3em;
        margin-bottom: .3em;    
        line-height: 27px;
    }

    .banner_587x285 .banner_wrapper .banner_content .banner-caption{
        font-size: 14px;
    }

    .banner_587x285 .banner_wrapper .banner_content a.link-learn-more{
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 400;
        color: #6DD2EE;
        text-decoration: none;
        font-size: 13px;
    }
    .banner_587x285 .banner_wrapper .banner_content a.link-learn-more svg {
        vertical-align: middle;
    }

    .banner_587x285 .banner_wrapper .banner_content a.link-learn-more:hover{
        color: #6DD2EE;
    }

    .banner_587x285 .banner_wrapper .banner_content .icon_container{
        display: flex;
        align-items: center;
        font-size: 12px;
    }

/********************************************************
** [-] END BANNER 587 x 285
********************************************************/



/********************************************************
** [+] START BANNER MOBILE
********************************************************/

    .banner_mobile{
        width: 375px;
        max-width: 375px;
        border-radius: 10px;
        background: url('/assets/web-resources/business/images/bbs-pop-up/banner/bg_mobile.png') no-repeat center;
        background-size: cover;
        overflow: hidden;
    }

    .banner_mobile .banner_wrapper{
        padding: 10px;
        font-family: 'ProximaNova-Regular';
        color: #FFFFFF;
    }

    .banner_mobile .banner_wrapper .banner_content {
        display: flex;
        align-items: center;
    }

    .banner_mobile .banner_wrapper .banner_content p {
        margin: 0px;
    }

    .banner_mobile .banner_wrapper .banner_content .banner-title{
        font-size: 18px;
        font-weight: 600;
    }

    .banner_mobile .banner_wrapper .banner_content .banner-caption{
        font-size: 14px;
    }

    .banner_mobile .banner_wrapper button.close {
        padding: 0;
        background-color: transparent;
        border: 0;
    }

    .banner_mobile .banner_wrapper .close {
        float: right;
        color: #212121;
        text-shadow: 0 1px 0 #fff;
        opacity: .5;
        cursor: pointer;
    }

    .banner_mobile .banner_wrapper .close:hover {
        opacity: 1;
    }

    .banner_mobile .banner_wrapper .btn-download{
        padding: 10px;
        background-color: transparent;
        border: 1px solid #ffffff; 
        color: #ffffff; 
        border-radius: 5px;
        width: 100%;
        cursor: pointer;
    }

    .banner_mobile .banner_wrapper .btn-download:hover{
        padding: 10px;
        background-color: transparent;
        border: 1px solid #6DD2EE; 
        color: #6DD2EE;
        border-radius: 5px;
        width: 100%;
        cursor: pointer;
    }
/********************************************************
** [-] END BANNER MOBILE
********************************************************/