@font-face {
        font-family: 'Arial Rounded MT Bold';
        src: url('../../fonts/single-landing-fonts/ArialRoundedMTBold.ttf') format('ttf'),
             url('../../fonts/single-landing-fonts/ArialRoundedMTBold.woff') format('woff')
             url('../../fonts/single-landing-fonts/ArialRoundedMTBold.woff2') format('woff2');
        font-weight: normal;
        font-style: normal;
    }
    @font-face {
        font-family: 'Arial Rounded MT';
        src: url('../../fonts/single-landing-fonts/ArialRoundedMT.ttf') format('ttf'),
             url('../../fonts/single-landing-fonts/ArialRoundedMT.woff') format('woff')
             url('../../fonts/single-landing-fonts/ArialRoundedMT.woff2') format('woff2');
        font-weight: normal;
        font-style: normal;
    }
    @font-face {
        font-family: 'BoldZhunYuan';
        src: url('../../fonts/single-landing-fonts/CloudYuanCuGBK.ttf') format('ttf'), 
             url('../../fonts/single-landing-fonts/CloudYuanCuGBK.woff') format('woff'),
             url('../../fonts/single-landing-fonts/CloudYuanCuGBK.woff2') format('woff2');
        font-weight: bolder;
        font-style: normal;
    }
    @font-face {
        font-family: 'NormalZhunYuan';
        src: url('../../fonts/single-landing-fonts/Reeji-CloudYuanZhun-GBK.ttf') format('ttf'),
             url('../../fonts/single-landing-fonts/Reeji-CloudYuanZhun-GBK.woff') format('woff'),
             url('../../fonts/single-landing-fonts/Reeji-CloudYuanZhun-GBK.woff2') format('woff2');
        font-weight: bolder;
        font-style: normal;
    }
    @font-face {
        font-family: 'LightZhunYuan';
        src: url('../../fonts/single-landing-fonts/Reeji-CloudYuanXi-GBK.ttf') format('ttf'),
             url('../../fonts/single-landing-fonts/Reeji-CloudYuanXi-GBK.woff') format('woff'),
             url('../../fonts/single-landing-fonts/Reeji-CloudYuanXi-GBK.woff2') format('woff2');
        font-weight: normal;
        font-style: normal;
    }
    @font-face {
        font-family: 'HelveticaBlack';
        src: url('../../fonts/single-landing-fonts/HelveticaRounded-Black.otf') format('otf'),
             url('../../fonts/single-landing-fonts/HelveticaRounded-Black.woff') format('woff'),
             url('../../fonts/single-landing-fonts/HelveticaRounded-Black.woff2') format('woff2');
        font-weight: normal;
        font-style: normal;
    }
    @font-face {
        font-family: 'HelveticaBold';
        src: url('../../fonts/single-landing-fonts/HelveticaRounded-Bold.otf') format('otf'),
             url('../../fonts/single-landing-fonts/HelveticaRounded-Bold.woff') format('woff'),
             url('../../fonts/single-landing-fonts/HelveticaRounded-Bold.woff2') format('woff2');
        font-weight: normal;
        font-style: normal;
    }

   h1 {
       font-family: "BoldZhunYuan";
   }
   h5 {
        font-family: "NormalZhunYuan";
   }
   p {
        font-family: "NormalZhunYuan";
   }
   .zhunyuan {
        font-family: "NormalZhunYuan"!important;
   }
   .boldzhunyuan {
        font-family: "BoldZhunYuan"!important;
    }
    .lightzhunyuan {
        font-family: "LightZhunYuan"!important;
    }
   .helvetica {
        font-family: "HelveticaBold"!important;
   }
   .helvetica-black {
    font-family: "HelveticaBlack"!important;
    }
   .arial-rounded-mt {
        font-family: "Arial Rounded MT";
        font-weight: 900;
        letter-spacing: 1.3px;
   }
   .railway {
        font-family: "Railway"!important;
        font-weight: 900;
        /* letter-spacing: 1.3px; */
    }
   .font-weight-bold {
       font-weight: bold!important;
   }
   body { 
        height: 100%;
        width: 100%;
        font-family: "NormalZhunYuan";
        overflow-x: hidden;
        overflow-y: auto;
    }
    #landing {
        overflow-y: hidden;
        overflow-x: hidden;
    }
    .section-title {
        font-family: 'Raleway';
        font-size: 2.5rem;
        letter-spacing: 2px;
    } 
    .section-sub-title {
        font-family: "BoldZhunYuan";
        font-weight: 900;
        font-size: 1.25rem;
        line-height: 2rem;
        letter-spacing: 2px;
    }
    .section-sub-title-time {
        font-family: "BoldZhunYuan";
        font-weight: 900;
        font-size: 1.5rem;
        letter-spacing: 2px;
    }
    .section-1 {
        height: 100%;
    }
    .vertical-align-list {
        display: flex;
        justify-content: center;
        align-content: center;
        flex-direction: column;
    } 
    .color-darkblue {
        color: #2E2E4D;
    }
    #registerWebinalModal .modal-body {
        padding: 2rem;
    }
    .register-input {
        background-color:#e4e4e4;
        border-radius: 20px;
        height: calc(1.5em + .75rem + 10px);
    }
    .form-group label {
        font-weight: 700;
    }
    .btn-primary {
        background-color: #68D8DB !important;
        border-color: #68D8DB;
        font-size: 18px;
        font-weight: 700;
        color: #0C6868;
        letter-spacing: 1px;
        border: 0px solid rgba(108, 89, 179, 0.75);
        border-radius: 40px;
        transition: all 0.3s ease 0s;
        box-shadow: 2px 17px 31px -8px rgb(30 30 30 / 65%);
        -webkit-box-shadow: 2px 17px 31px -8px rgb(30 30 30 / 65%);
        -moz-box-shadow: 2px 17px 31px -8px rgba(30, 30, 30, 0.65);
    }
    .btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show>.btn-primary.dropdown-toggle:focus {
        box-shadow: 2px 17px 31px -8px rgb(30 30 30 / 65%);
        -webkit-box-shadow: 2px 17px 31px -8px rgb(30 30 30 / 65%);
        -moz-box-shadow: 2px 17px 31px -8px rgba(30, 30, 30, 0.65);
    }
    .btn-primary.focus, .btn-primary:focus {
        color: #0C6868;
        box-shadow: 2px 17px 31px -8px rgb(30 30 30 / 65%);
        -webkit-box-shadow: 2px 17px 31px -8px rgb(30 30 30 / 65%);
        -moz-box-shadow: 2px 17px 31px -8px rgba(30, 30, 30, 0.65);
    }
    .btn-xl {
        /* font-size: 18px; */
        font-size: 1.25rem;
        padding: 15px 20px;
        margin-top: 5px;
    }
    .ribbon {
        position: absolute;
        /* width: fit-content; */
        top: 9%;
        left: -13px;
        z-index: 5;
        padding: 0 50px;
        height: 50px;
        color: black;
        /* font: bold 25px monospace; */
        text-align: center;
        line-height: 50px;
        z-index:9;
        background: #f9ce3f;
    }
    
    .ribbon:before {
        content: '';
        position: absolute;
        right: 0px;
        bottom: 0;
        width: 0;
        height: 0;
        border-right: 25px solid #3181F0;
        border-bottom: 25px solid transparent;
        border-top: 25px solid transparent;
    }
    
    .r1:after{
        content: " ";
        display: inline-block;
        border-top: 15px solid #9c6e04;
        border-left: 15px solid transparent;
        position: absolute;
        top: 50px;
        left: -1px;
        z-index:9;
    }
    .rib{
      width: 70px;
      height: 30px;
      z-index:0;
      position: absolute;
    }
    .ri1{
      top: 40px;
      left: -52px;
    }
    .blue-box .ribbon{
        color:#3181F0;
        font-weight:900;
        font-size: 50px
    }
    .blue-box{
        position: relative;
        padding-top:5.8em !important;
        height:100%;
        background-color:#3181F0;
        border-radius:30px;
        box-shadow: 5px 6px 3px -2px #2e2e4d;
        -webkit-box-shadow: 5px 6px 3px -2px #2e2e4d;
        -moz-box-shadow: 5px 6px 3px -2px #2E2E4D;
    }
    .padding-inner{
        padding: 0em 3em;
    }
    .styled-hr{
        position: absolute;
        bottom:0%;
        left: 9%;
        width: 80%;
        background-color: #F9CE3F;
        border: 4px solid #F9CE3F;
    }
    div.rounded{
        border-radius:20px !important;
        background-color:#F2F2F2;
        height:fit-content;
        position: relative;    
        margin-top: 100px;
    }

    
    
    .title-comment {
        color: #4F1CDD;
        padding-top: 80px;
    }
    .comment-top{
        /* margin-top:10em; */
    }
    .comment{
        position: relative;
        font-weight: 600;
    }
    .prof-pic{
        position: absolute;
        left:24%;
        top:-85px;
    }
    .hr-text {
        line-height: 1em;
        position: relative;
        outline: 0;
        border: 0;
        color: #4F1CDD;
        text-align: center;
        height: 3.2em;
        /* opacity: 0.5; */
    }

    .hr-text:before {
        content: "";
        /* background: linear-gradient(to right, transparent, #818078, transparent); */
        background-color: #4F1CDD;
        background-image: linear-gradient( 90deg, #4F1CDD 30%, white 30%, white 70%, #4F1CDD 70%);
        position: absolute;
        left: 0;
        top: 50%;
        width: 100%;
        height: 2px;
    }

    .hr-text:after {
        content: attr(data-content);
        position: relative;
        display: inline-block;
        color: white;
        font-weight: 600;
        padding: 0 1.5em;
        font-size: 1.45em;
        letter-spacing: 2px;
        line-height: 2.5em;
        background-color: #4F1CDD;
        border-radius: 30px;
    }
    .arrow-pointer {
        width: 100%;
        height: 50px;
        padding: 40px;
        background: #32557f;
        position: relative;

    }
    .arrow-pointer:after {
        content: '';
        position: absolute;
        left: -1px; bottom: 0; width: 0; height: 0;
        border-left: 25px solid #CB81D8;
        border-top: 25px solid transparent;
        border-bottom: 25px solid transparent;
    }

    .arrow-pointer:before {
        content: '';
        position: absolute;
        right: -1px;
        bottom: 0;
        width: 0;
        height: 0;
        border-right: 25px solid #CB81D8;
        border-bottom: 25px solid transparent;
        border-top: 25px solid transparent;
    }
    .arrow-pointer-1 {
        width: 100%;
        height: 200px;
        background: #F9CE3F;
        position: relative;

    }
    .arrow-pointer-1:after {
        content: '';
        position: absolute;
        left: -1px; bottom: 0; width: 0; height: 0;
        border-left: 25px solid #6ebac7;
        border-top: 100px solid transparent;
        border-bottom: 100px solid transparent;
    }

    .arrow-pointer-1:before {
        content: '';
        position: absolute;
        right: -1px;
        bottom: 0;
        width: 0;
        height: 0;
        border-right: 25px solid #6ebac7;
        border-bottom: 100px solid transparent;
        border-top: 100px solid transparent;
    }
    .bookmarkRibbon {
        border:       50px solid blue;        /* All borders set */
        border-left:  0;                      /* Remove left border */
        border-right: 30px solid transparent; /* Right transparent */
        width:        100px;                  /* Increase element Width */
    }
    .gal-section img{
        background-color:#f1f1f1;
    }
    .theme-blue{
        background-color: #4F1CDD;
    }
    .purple-box{
        position: relative;
        /* overflow: hidden; */
        border-radius:30px;
    }
    .purple-box .main-img-1{
        position: absolute;
        width: 85%;
        left: 50%;
        top: 56%;
        transform: translate(-50%, -50%);
        z-index: 3;
    }
    .purple-box .main-img-2{
        position: absolute;
        width: 80%;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 3;
    }
/* 
    .purple-box .main-img.smaller {
        width: 90%;
    } */
    .purple-box .container-padding {
        padding: 120px 50px;
    }
    .purple-box .side-img{
        position: absolute;
        width:15%;
        top: 9%;
        left: -1%;
        z-index: 5;
    }
    .purple-box .side-img img{
        width:100%
    }    
    .purple-box .side-img .side-title{
        position:absolute;
        right: 25%;
        top: 0;
        margin: .2em 0em;
    }    
    .register-btn{
        border-radius:100px;
        background-color: #6ebac7;
    }
    #styled-btn{
        box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
    }
    .thanks-section img{
        width:7em;
    }
    .cross-bg{
        height: 100%;
    }
    .overlay-cross-bg {
        background-color: #00000036;
    }
    .cross-bg .box{
        border-radius: 20px;
        background-color: white;
        /* height: 100%; */
        padding: 70px 90px;
        width: fit-content;
    }
    img.locker{
        width:4em;
    }
    img.creative-1{
        margin-top:-19em;
    }
    img.arrow-size{
        width: 50px;
    }
    .special-bg{
        background-color:white;
    }
    .purple-bg{
        background-color: #CB81D8;
        height:100%;
        padding: 50px 10%;
    }
    .stive-icon{
        width: 200px;
        margin-top: 10vh
    }
    .header-top {
        font-family: 'Railway';
    }
    .head-content{
        height:3em;
    }
    .center-any{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .yellow-ribbon{
        background-color: #F9CE3F;
    }
    .theme-bg{
        background-color: #6ebac7;
    }
    .theme-gold{
        color:gold
    }
    .lp-2{
        padding-left:2em;
    }

    .support {

    }
    
    .ribbon-danyuan {
        position: absolute;
        /* width: fit-content; */
        top: 9%;
        left: -13px;
        z-index: 5;
        padding: 0 50px;
        height: 50px;
        color: #4F1CDD;
        font: bold 25px;
        font-family: "BoldZhunYuan";
        text-align: center;
        line-height: 50px;
        z-index:9;
        background: #E2B340;
        font-weight: bold;
        font-size: 25px;
        font-family: "BoldZhunYuan";
    }
    
    .ribbon-danyuan:before {
        content: '';
        position: absolute;
        right: 0px;
        bottom: 0;
        width: 0;
        height: 0;
        border-right: 25px solid #4F1CDD;
        border-bottom: 25px solid transparent;
        border-top: 25px solid transparent;
    }
    .color-blue-link {
        cursor: pointer;
        color: #4f1cdd !important;
    }
    .color-white-link {
        cursor: pointer;
        color: #ededed;
        text-decoration: underline;
    }
    .color-white-link:hover {
        color:#0C6868;
    }

    .color-blue-purple {
        color: #4F1CDD;
    }
    .r1-danyuan:after{
        content: " ";
        display: inline-block;
        border-top: 15px solid #9c6e04;
        border-left: 15px solid transparent;
        position: absolute;
        top: 50px;
        left: -1px;
        z-index:9;
    }
    .rib-danyuan{
      width: 70px;
      height: 30px;
      z-index:0;
      position: absolute;
    }
    .ri1-danyuan{
      top: 40px;
      left: -52px;
    }
    
    .card-artist {
        position: relative;
        margin-top: 0;
    }

    .icon-card-artist {
        position: absolute;
        top: 55px;
        left: 15px;
        width: 35px;
    }

    .promotion-img-container {
        max-width: 400px;
    }
    

    .modal-dialog {
        max-width: 700px;
    }

    .bg-img {
        padding-top: 70%;
        background-position: center;
        background-size: cover; 
        -o-background-size:cover; 
        -moz-background-size:cover; 
        -webkit-background-size:cover; 
        background-repeat: no-repeat;
    }

    .bg-promo {
        padding-top: 50%;
        background-position: center;
        background-size: cover; 
        -o-background-size:cover; 
        -moz-background-size:cover; 
        -webkit-background-size:cover; 
        background-repeat: no-repeat;
    }

    .bullet li {
		list-style: none;
		position: relative;
		padding: 0 0 0 20px;
	}

    ul.bullet li::before {
        content: "";
        position: absolute;
        left: 0;
        top: 10px;
        width: 12px;
        height: 12px;
        background-color: #F9CE3F;
        border-radius: 50%;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
    }
    .img-jeff {
        width:70%;
        max-width:70%;
    }

    .video-1 {
        max-width: 100%;
        max-height: 100%;
    }

    .videoWrapper {
        position: relative;
        padding-bottom: 56%; /* 16:9 */
        height: 0;
        
    }
    .videoWrapper iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    .video-container{
        position: relative;
        width: 100%;
        margin:auto;
    }

    .video-container-1{
        position: relative;
        width: 100%;
        margin:auto;
    }

    .ytp-large-play-button {
        width: 300px!important;
        height: 300px!important;
        top: 50%!important;
        left: 50%!important;
        transform: translate(-50%, -50%)!important;
        margin-left: 0!important;
        margin-top: 0!important;
    }


    .play-button {
        position: absolute;
        width: 100%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%)!important;
        height: 100%;
    }

    .play-btn-img {
        display:none;
    }

    .play-button:hover > .play-btn-img {
        display:block;
    }

    .play-button img {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 12%;
        transform: translate(-50%, -50%)!important;
        animation: pulses 2s linear infinite;
        cursor: pointer;
    }

    .fw.section-sub-title {
        width: 38%;
    }

    .bg-promo-container {
        background-color: #49a4a7;
        
    }

    .bg-promo-container .section-title {
        color: white;
        font-size: 4.2rem;
        font-weight: bold;
    }

    .bg-promo-container .section-title .yellow {
        color: #f6ce3e;
    }

    .bg-promo-container .white-container {
        padding: 30px;
        background-color: #ffffff;
        border-radius: 35px;
        position: relative;
    }

    .white-container .disabled-div {
        background-color: rgb(152 152 152 / 61%);
        position: absolute;
        width:100%;
        height: 100%;
        z-index: 999;
        border-radius: 35px;
        top: 0;
        left: 0;

    }

    .white-container.yellow-border {
        border: 10px solid #f6ce3e;
    }

    .pax-img {
        width: 200px;
    }

    h1.big-price {
        font-family: "HelveticaBlack"!important;
        color: #192545;
        font-size: 4.2rem;
        font-weight: bold;
    }

    h1.big-price:before {
        content: 'RM';
        color: #192545;
        font-size: 3.2rem;
        font-weight: bold;
        vertical-align: top;
        line-height: 1.45em;
    }
    .per-day-price{
        font-family: "HelveticaBold"!important;
        color: #192545;
        font-size: 3.0rem;
    }
    .per-month-price {
        font-family: "HelveticaBold"!important;
        font-size: 1.8rem;
        color:#2c4477;
        background-color: #f0f0f0;
    }

    .btn-buy {
        font-size: 2rem;
        font-weight: 700;
        text-align: center;
        color: #0C6868!important;
        width: 100%;
        padding-top: 20px;
        padding-bottom: 20px;
        box-shadow: none;
    }

    .btn-disabled {
        background-color: #F2F2F2!important;
        color: grey!important;
        pointer-events: none;
    }

    .ribbon-pro {
        position: absolute;
        right: -58px;
        top: -30px;
    }
    .limit-time {
        position: absolute;
        color: #f6ce3e;
        font-size: 1.6rem;
        font-family: "BoldZhunYuan"!important;
        right: -3px;
        top: -15px;
    }

      
    .limit-time-img {
        width: 90%;
    }

    .time-range {
        font-size: 2.0rem; 
        letter-spacing: 2px;
    }

    .btn-primary.count-down.disabled, .btn-primary.count-down:disabled {
        
        opacity: 1!important;
    }

    .red-cross {
        font-family: "HelveticaBold"!important;
        font-size: 2rem;
        color: #901b12;
    }

    .mini-price-slash {
        position: relative;
        width: 80%;
        height: 0;
        border-top: 3px solid #901b12;
        transform: translate(-45%, 0) rotate(-10deg);
        left: 46%;
        top: 25px;
        z-index: 1;
    }

    @keyframes pulses {
        0%   {
            width: 12%
        }
        25%  {
            width: 11%
        }
        50%  {
            width: 10%
        }
        75%  {
            width: 11%
        }
        100% {
            width: 12%
        }
    }

    .home-video {
        background-size: cover; 
        -o-background-size:cover; 
        -moz-background-size:cover; 
        -webkit-background-size:cover; 
        background-size:100% 100%; 
        background-position: center; 
        background-repeat: no-repeat;
    }


    .margin-video {
        margin: 0px 100px 50px 100px;
    }

    .time-ready-title {
        font-size:1.7em;
    }
    .time-ready-subtitle {
        font-size:1.2em;
    }
    .time-ready-p{
        font-size:1.1em;
    }
    .time-ready{
        font-size:1.4em;
    }
    .limit-cross.cross-bg {
        padding: 100px 50px;
    }
    .cross-bg .box.time-limit-box{
        width: 60%; 
        padding: 40px 70px;
    }

    @media (max-width: 360px){
        .section-1 {
            /* height: 100vh!important; */
        }
        .section-title {
            font-size: 1.2rem!important;
        } 
        .section-sub-title {
            font-size: 1.05rem!important;
            line-height: 1.5rem!important; 
        }
        .container .purple-box .ribbon-danyuan {
            /* left: -4%!important; */
            top: 3%;
        }
        
        .yellow-ribbon .mobile-arrow.arrow-pointer-1 {
            height: 400px!important;
        }
        .yellow-ribbon .mobile-arrow.arrow-pointer-1:after {
            border-top: 200px solid transparent!important;
            border-bottom: 200px solid transparent!important;
        }
    
        .yellow-ribbon .mobile-arrow.arrow-pointer-1:before {
            border-bottom: 200px solid transparent!important;
            border-top: 200px solid transparent!important;
        }
        .offset-custom-mobile {
            padding-left: 0.8rem!important;
            padding-right: 0.8rem!important;
        }
        .mobile-1.mobile-2.arrow-pointer {
            height: 220px;
    
        }
        .mobile-1.mobile-2.arrow-pointer:after {
            border-top: 110px solid transparent;
            border-bottom: 110px solid transparent;
        }
    
        .mobile-1.mobile-2.arrow-pointer:before {
            border-bottom: 110px solid transparent;
            border-top: 110px solid transparent;
        }
        
        .comment-top .comment .title-comment {
            padding-top: 100px!important;
        }
        .white-container .ribbon-pro {
            right: -127px;
        }
        img.limit-time-img   {
            width: 65%;
        }
    }
    @media (max-width:500px) {
        .mobile-1.arrow-pointer {
            height: 180px;
    
        }
        .mobile-1.arrow-pointer:after {
            border-top: 90px solid transparent;
            border-bottom: 90px solid transparent;
        }
    
        .mobile-1.arrow-pointer:before {
            border-bottom: 90px solid transparent;
            border-top: 90px solid transparent;
        }
        .theme-bg.jeff-padding {
            padding-left:10px;
            padding-right:10px;
        }    
    }
    @media (max-width: 767px){  
        .time-ready-title {
            font-size:1.6em;
        }
        .time-ready-subtitle {
            font-size:1.1em;
        }
        .time-ready-p{
            font-size:1em;
        }
        .time-ready{
            font-size:1em;
        }
        .ribbon-pro {
            right: -113px;
        }
        .limit-time-img   {
            width: 70%;
        }
        .limit-time {
            position: absolute;
            color: #f6ce3e;
            font-size: 1.2rem;
            font-family: "BoldZhunYuan"!important;
            right: -3px;
            top: -18px;
        }
        .subscribe-title.section-title {
            font-size: 1.8rem!important;
        }

        h1.big-price {
            font-family: "HelveticaBlack"!important;
            color: #192545;
            font-size: 3.4rem;
            font-weight: bold;
        }
    
        h1.big-price:before {
            font-size: 2.7rem;
        }
        .per-day-price{
            font-size: 2.5rem;
        }
        .per-month-price {
            font-size: 1.4rem;
        }

        .red-cross {
            font-family: "HelveticaBold"!important;
            font-size: 2rem;
        }
        .jeff-padding {
            padding-left:20px;
            padding-right:20px;
        }    
        .sw.fw.section-sub-title {
            width: 100%;
        }
        .support {
            font-size: 2rem;
        }
        .lp-2 {
            padding-left: 0;
            padding-right: 0;
        }
        /* .modal-dialog {
            max-width: 90%;
        } */
        .video-container {
            height: 80vh;
        }
        .height-video-responsive {
            height: 80vh;
        }
        .promotion-img-container {
            max-width: 100%;
        }
        .rounded .comment {
            height: fit-content!important;
        }
        .comment .title-comment {
            padding-top: 90px!important;
        }
        .comment-top{
            margin-top:0;
        }
        .hr-text {
            line-height: 3.5em;
        }
        .hr-text:after { 
            font-size: 1em;
        }
        .card-artist {
            margin-top: 20px;
        }
        .purple-box .main-img{
            position: relative;
            width: 100%;
            left: 50%;
            top: 50%;
        }
        .purple-box .container-padding {
            padding: 50px;
        }
        .btn-primary {
            font-size: 16px!important;
        }
        .offset-custom-mobile {
            padding-left: 1.5rem;
            padding-right: 1.5rem;
        }
        .cross-bg .box{
            width: 90%!important;
            padding: 35px 20px!important;
        }
        .section-1 {
            /* height: 70vh; */
        }
        .stive-icon {        
            padding-top: 40px!important;
            margin-top: 0;
            width: 100px!important;
        }
        .section-title {
            font-size: 1.65rem;
            letter-spacing: 1.2px;
        } 
        .section-sub-title {
            font-size: 1.2rem;
            letter-spacing: 1.2px;
        }
        .section-sub-title-2{
            font-size: 1.5rem;
        }
        .section-sub-title-time {
            font-family: "BoldZhunYuan";
            font-weight: 900;
            font-size: 1.25rem;
            line-height: 2rem;
            letter-spacing: 2px;
        }
        .purple-box .ribbon-danyuan {
            /* left: -3.5%!important; */
            top: 3%;
        }
        
        .mobile-arrow.arrow-pointer-1 {
            height: 380px!important;
        }
        .mobile-arrow.arrow-pointer-1:after {
            border-top: 190px solid transparent!important;
            border-bottom: 190px solid transparent!important;
        }
    
        .mobile-arrow.arrow-pointer-1:before {
            border-bottom: 190px solid transparent!important;
            border-top: 190px solid transparent!important;
        }

        .home-video.margin-video {
            margin: 0px 15px 15px 15px;
        }
    }
    @media(max-width: 989px) { 
        .cross-bg .box {
            padding: 40px 70px;
        }
        .margin-video {
            margin: 0px 50px 50px 50px;
        }
    
        .fw.section-sub-title {
            width: 50%;
        }
        .ribbon-danyuan {
            /* left: -1.6%!important; */
        }
        
        .arrow-pointer-1 {
            height: 300px!important;
        }
        .arrow-pointer-1:after {
            border-top: 150px solid transparent!important;
            border-bottom: 150px solid transparent!important;
        }
    
        .arrow-pointer-1:before {
            border-bottom: 150px solid transparent!important;
            border-top: 150px solid transparent!important;
        }
        .arrow-pointer {
            height: 100px;
    
        }
        .arrow-pointer:after {
            border-top: 50px solid transparent;
            border-bottom: 50px solid transparent;
        }
    
        .arrow-pointer:before {
            border-bottom: 50px solid transparent;
            border-top: 50px solid transparent;
        }
    }
    @media (max-width: 1200px){
        .limit-cross.cross-bg {
            padding: 3rem 0;
        }
        .cross-bg .box.time-limit-box{
            width: 80%; 
            padding: 40px 50px;
        }
        .title-comment {
            padding-top: 50px;
        }
        .ribbon-danyuan {
            /* left: -1.4%; */
        }
        /* .ribbon {
            left: -3.1%;
        } */
        .stive-icon {
            padding-top: 0;
        }
        img.creative-1 {
            margin-top: 0!important;
        }
        .section-1 {
            /* height: 70vh; */
        }

        .arrow-pointer-1 {
            height: 250px;
    
        }
        .arrow-pointer-1:after {
            border-top: 125px solid transparent;
            border-bottom: 125px solid transparent;
        }
    
        .arrow-pointer-1:before {
            border-bottom: 125px solid transparent;
            border-top: 125px solid transparent;
        }
    }