/*================================================*/
/* FROM CONTENT PAGE BANNER                       */
/*================================================*/

/* BANNERS */
.billboard {display: block; position: relative; width: 100%; max-width: 100%; height: 250px; margin: 0; padding: 0; background-color: var(--red); z-index: 0; overflow: hidden;}
.billboard .billboard-banner {display: flex; flex-flow: wrap; flex: 100%; align-items: center; background-size: 100% auto; background-position: top; width: 100%; left: 0px; background: var(--red);}
    .rtl .billboard .billboard-banner {right: 0px; left: auto;}
.billboard .billboard-banner .billboard-text--wrapper {flex: 1; padding: 0 50px;}

.billboard .billboard-text--wrapper h1 {display: block; max-width: 500px; max-height: 140px; overflow: hidden; box-sizing: border-box; font-size: 42px; font-weight: 700; color: white; line-height: 1.0;}
.billboard .billboard-text--wrapper h2 {display: block; max-width: 500px; max-height: 100px; overflow: hidden; box-sizing: border-box; font-size: 22px; font-weight: 700; color: white; line-height: 1.2;}
.billboard .billboard-banner .billboard-text {font-size: 42px; font-weight: 700; line-height: 1.2;  color:#fff;}
html[lang="ko-kr"] .billboard .billboard-banner .billboard-text {font-size: 45px;}

.billboard .billboard-banner .billboard-banner-white {position: relative; flex: 1; width: 100%; min-height: 250px;}
    .rtl .billboard .billboard-banner .billboard-banner-white {-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 15% 100%); clip-path: polygon(0 0, 100% 0, 100% 100%, 15% 100%);}
.billboard .billboard-banner .billboard-banner-black {position: absolute; top: 0; bottom: 0; left: 0; right: 10px;}
    .rtl .billboard .billboard-banner .billboard-banner-black {left: 10px; right: 0; -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 15% 100%); clip-path: polygon(0 0, 100% 0, 100% 100%, 15% 100%);}

.billboard .billboard-banner .billboard-img-body {position: absolute;top: 0;bottom: 0;left: 0;right: 20px;-webkit-clip-path: polygon(0% 0, 100% 0, 85% 100%, 0 100%);clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);}	
    .rtl .billboard .billboard-banner .billboard-img-body {left: 20px; right: 0; -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 15% 100%);  clip-path: polygon(0 0, 100% 0, 100% 100%, 15% 100%);}	
.billboard .billboard-banner .billboard-img-body img {width: 100%; height: 100%; object-fit: cover;}


@media (max-width: 1220px) {
    .billboard .billboard-banner .billboard-img-body img {width: 100%; height: 100%; object-fit: cover;}
}

@media (max-width: 800px) {
    .billboard {height: auto;}
    .billboard .billboard-banner {display: block; background: var(--red);}   
    .billboard .billboard-banner .billboard-body {padding: 10px 30px; height: auto;} 
    .billboard .billboard-banner .billboard-text {margin: 0; font-size: 20px !important; line-height: normal !important; color: #fff;}
    html[lang="ko-kr"] .billboard .billboard-banner .billboard-text {font-size: 20px !important;}
    
    .billboard .billboard-banner .billboard-banner-white {position: relative; flex: 1; width: 100%; min-height: 150px; background: #fff; -webkit-clip-path: none; clip-path: none;}
        .rtl .billboard .billboard-banner .billboard-banner-white {-webkit-clip-path: none; clip-path: none;}
    .billboard .billboard-banner .billboard-banner-black {position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: #000; -webkit-clip-path: none; clip-path: none;}
        .rtl .billboard .billboard-banner .billboard-banner-black {left: 0; right: 0; -webkit-clip-path: none; clip-path: none;}
    
    .billboard .billboard-banner .billboard-img-body {position: absolute; top: 0; bottom: 0; left: 0; right: 0; -webkit-clip-path: none; clip-path: none;}
        .rtl .billboard .billboard-banner .billboard-img-body {left: 0; right: 0; -webkit-clip-path: none; clip-path: none;}
    .billboard .billboard-banner .billboard-img-body img {width: 100%; height: 100%; object-fit: cover;}

    .billboard .billboard-banner .billboard-text--wrapper {padding: 15px 30px; height: auto; overflow: hidden;}
    .billboard .billboard-text--wrapper h1 {max-width: none; max-height: none; font-size: 22px; line-height: 0.5; white-space: nowrap; text-overflow: ellipsis;}
    .billboard .billboard-text--wrapper h2 {max-width: none; max-height: none; font-size: 14px; line-height: normal;}

}