.campaign-sharevdo{
    overflow: hidden;
}
.wrap-slide-step-mobile{
    position: relative;
    float: left;
    width: 100%;
}
.campaign-sharevdo .bx-prev{
    position: absolute;
    top: 40%;
    left: 0;
    font-size: 50px;
    line-height: 50px;
    color: #000;
    -webkit-animation:colorchange 2s infinite alternate;
}
.campaign-sharevdo .bx-next{
    position: absolute;
    top: 40%;
    right: 0;
    font-size: 50px;
    line-height: 50px;
    color: #000;
    -webkit-animation:colorchange 2s infinite alternate;
}
.campaign-sharevdo .bx-next:hover , .campaign-sharevdo .bx-prevt:hover{
    opacity: 1;
}
.campaign-sharevdo .text-title{
    padding-top: 30px;
    padding-bottom: 40px;
}
.block-wrap{
    float: left;
    width: 100%;
}
.form-group{
    margin-bottom: 5px;
}
.campaign-sharevdo .background-inner{
    background: #FFF;
    border-radius: 10px;
    margin-bottom: 120px;
    z-index: 1;
}
.campaign-sharevdo .background-inner.bottom-none{
    margin-bottom: 0;
    padding-bottom: 100px;
    z-index: 1;
}
.campaign-sharevdo .shadow{
    margin-bottom: 20px;
    -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.campaign-sharevdo .shadow-dark{
    -webkit-box-shadow: 0px 5px 25px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 5px 25px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 5px 25px 0px rgba(0,0,0,0.75);
}
.background-yellow{
    background: #c6a673;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    z-index: 1;
    position: absolute;
    bottom: 0;
}
.wrap-position{
    position: relative;
    float: left;
    width: 100%;
    z-index: 1;
}
.icon-validate{
    float: right;
    font-size: 22px;
    width: 12%;
    text-align: right;
    color: #4caf50;
}


.campaign-sharevdo .top-banner{
    height: 642px;
    width: 100%;
    background: url("../img/campaign/share-vdo/top-banner.jpg") center no-repeat;
    background-size: cover;
}
.campaign-sharevdo .backgorund-color{
    background: #0064a0;
    background-image: url("../img/campaign/share-vdo/bg-grass.jpg");
    background-image: url("../img/campaign/share-vdo/bg-grass.png") , linear-gradient(#0064a0, #0064a0 28px, #fff 77%, #fff);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: contain; 
}
.campaign-sharevdo .background-color-blue{
    background: #0064a0;
    background-image: linear-gradient(#0064a0, #144a8a);
}
.campaign-sharevdo .block-rule{
    padding: 50px 0;
}
.campaign-sharevdo .block-rule .step-img .img-title{
    padding-bottom: 20px;
}
.campaign-sharevdo .block-rule .step-desc {
    color: #FFF;
    padding: 20px 0;
    font-family: "PSLDisplayProBold";
    font-size: 32px;
    line-height: 30px;
}
.campaign-sharevdo .block-rule .step-desc span{
    font-family: "PSLDisplayProReg";
    font-size: 30px;
}
.campaign-sharevdo .block-rule .step-desc b{
    font-size: 40px;
}
.campaign-sharevdo .block-rule .more-rule{
    margin-top: 50px;
}
.campaign-sharevdo .block-rule .more-rule a{
   color: #155092;
   font-family: "PSLDisplayProBold";
   font-size: 40px;
   padding: 10px;
   display: block;
   line-height: 36px;
}
.campaign-sharevdo .block-rule .more-rule a img{
    vertical-align: baseline;
}
.campaign-sharevdo .block-rule .more-rule a:hover img{
    margin-left: 10px;
}
.campaign-sharevdo .block-vdo{
    padding-bottom: 100px;
}
.campaign-sharevdo .block-vdo .shadow{
    margin-bottom: 30px;
}
.campaign-sharevdo .block-vdo .image-item-vdo-1{
    position: absolute;
    top: 200px;
    left: -150px;
}
.campaign-sharevdo .block-vdo .image-item-vdo-2{
    position: absolute;
    bottom: 70px;
    left: -170px;
}
.campaign-sharevdo .block-vdo .image-item-vdo-3{
    position: absolute;
    top: 200px;
    right: -150px;
}
.campaign-sharevdo .block-vdo .image-item-vdo-4{
    position: absolute;
    bottom: 70px;
    right: -140px;
}
.campaign-sharevdo .block-vdo .clear-both {
    clear: both;
}
.campaign-sharevdo .block-share{
    background: #FFF;
    float: left;
    width: 100%;
    font-family: "PSLDisplayProBold";
    font-size: 36px;
    line-height: 32px;
    padding: 15px;
}
.campaign-sharevdo .block-share .clip-desc{
    color: #1a4489;
    float: left;
}
.campaign-sharevdo .block-share .clip-desc .circle{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #1a4489;
    color: #FFF;
    float: left;
    font-size: 40px;
}
.campaign-sharevdo .block-share .clip-desc .circle span{
    display: inline-block;
    margin-top: 3px;
    margin-left: 12px;
}
.campaign-sharevdo .block-share .clip-desc p{
    display: inline-block;
    margin-top: 5px;
    margin-left: 5px;
}
.campaign-sharevdo .block-share .share {
    overflow: hidden;
    float: right;
    text-align: right;
}
.campaign-sharevdo .block-share .share a.click {
    cursor: pointer;
}
.campaign-sharevdo .block-form{
    padding-top: 50px;
    padding-bottom: 150px;
}
.campaign-sharevdo .block-form .text-title{
    padding-bottom: 10px;
}
.campaign-sharevdo .block-form form{
    padding-top: 20px;
}
.campaign-sharevdo .block-form label{
    font-family: "PSLDisplayProBold";
    font-size: 24px;
    color: #3f88bb;
    z-index: 1;
    position: relative;  
}
.campaign-sharevdo .block-form label.text-danger{
    color: #a94442;
}
.campaign-sharevdo .block-form input , .campaign-sharevdo .block-form select{
    font-family: "PSLDisplayProBold";
    font-size: 28px;  
    height: 55px;
    color: #000;
    border: 2px solid #a1a1a1;
    border-radius: 10px;
}
.campaign-sharevdo .block-form .button-upload{
    width: 100%;
    background: #007ec3;
    border: none;
    color: #FFF;
    float: left;
}
.campaign-sharevdo .block-form .text-upload{
    font-family: "PSLDisplayProReg";
    color: #666666;
    font-size: 30px;
    line-height: 22px;
    margin-top: 5px;
    float: left;
    width: 88%;
    word-break: break-word;
}
.campaign-sharevdo .block-form .myCheckbox input {
    display: none;
}
.campaign-sharevdo .block-form .myCheckbox span {
    width: 27px;
    height: 23px;
    display: inline-block;
    margin-top: 7px;
    background: url("../img/campaign/share-vdo/checkbox-noneactive.png");
}
.campaign-sharevdo .block-form .myCheckbox input:checked + span {
    background: url("../img/campaign/share-vdo/checkbox-active.png");
}
.campaign-sharevdo .block-form .terms{
    padding-top: 30px;
    border-top: 1px solid #d7d7d7;
    margin-top: 50px;
}
.campaign-sharevdo .block-form .terms p{
    font-size: 26px;
    font-family: "PSLTextProReg";
    color: #666666;
    font-weight: normal;
    line-height: 26px;
}
.campaign-sharevdo .block-form .btn-submit{
    font-family: "PSLDisplayProReg";
    color: #FFF;
    font-size: 50px;
    background: #007ec3;
    width: 100%;
    padding: 0;
    border-radius: 10px;
}
.campaign-sharevdo .block-form .block-submit{
    padding-bottom: 40px;
    padding-top: 20px;
}
.campaign-sharevdo .block-form .image-mascot{
    position: absolute;
    bottom: -40px;
    right: -210px;
    z-index: 2;
}
.campaign-sharevdo .block-form .image-milk-1{
    position: absolute;
    top: 20px;
    left: -176px;
    z-index: 2;
}
.campaign-sharevdo .block-form .image-milk-2{
    position: absolute;
    top: -10px;
    right: -180px;
}
.campaign-sharevdo .block-form .image-milk-3{
    position: absolute;
    bottom: -235px;
    left: -316px;
    z-index: 1;
}
.campaign-sharevdo .block-form .image-milk-4{
    position: absolute;
    top: 410px;
    left: -70px
}
.campaign-sharevdo .block-form .image-milk-5{
    position: absolute;
    top: -118px;
    left: 65px;
}

@media screen and (max-width: 912px) {
    .row-hidden-md{
        margin-right: -15px;
        margin-left: -15px;  
    }
    .campaign-sharevdo .block-share .share{
        width: 100%;
    }
}

@media screen and (max-width: 767px) {
    .row-mobile{
        margin-right: -10px;
        margin-left: -10px;
    }
    .row-mobile-30{
        margin-right: -30px;
        margin-left: -30px;
    }
    .width-12-percent{
        width: 12%;
    }
    .width-88-percent{
        width: 85%;
    }
    .campaign-sharevdo .shadow{
        width: 100%;
    }
    .campaign-sharevdo .text-title{
        padding-bottom: 20px;
        width: 60%;
        margin: 0 auto;
    }
    .campaign-sharevdo .block-rule{
        padding: 10px 0;
    }
    .campaign-sharevdo .block-rule .step-img .img-title{
        width: 60px;
        margin: 0 auto;
    }
    .campaign-sharevdo .block-rule .step-desc {
        font-size: 26px;
        line-height: 26px;
    }
    .campaign-sharevdo .block-rule .step-desc  span{
        font-size: 22px;
    }
    .campaign-sharevdo .block-rule .more-rule a img{
        vertical-align: sub;
    }
    .campaign-sharevdo .block-rule .more-rule{
        margin-top: 20px;
    }
    .campaign-sharevdo .block-rule .more-rule a{
        font-size: 24px;
    }
    .campaign-sharevdo .block-rule .step-desc b{
        font-size: 36px;
    }
    .campaign-sharevdo .block-share{
        font-size: 30px;
        padding: 5px;
    }
    .campaign-sharevdo .block-share .share img{
        width: 56px;
    }
    .campaign-sharevdo .block-share .clip-desc .circle{
        width: 15px;
        height: 15px;
        font-size: 16px;
        line-height: 10px;
    }
    .campaign-sharevdo .block-share .clip-desc p{
        font-size: 20px;
        margin-top: -9px;
        margin-bottom: 0;
        float: left;
    }
    .campaign-sharevdo .block-share .clip-desc .circle span{
        margin-left: 5px;
        margin-top: 2px;
    }
    .campaign-sharevdo .block-vdo .shadow {
        margin-bottom: 15px;
    }
    .campaign-sharevdo .block-vdo{
        padding-bottom: 30px;
    }
    .campaign-sharevdo .block-form{
        padding-top: 0;
        padding-bottom: 75px;
    }
    .campaign-sharevdo .block-form .text-title{
        width: 90%;
    }
    .campaign-sharevdo .block-form .shadow{
        margin-left: 0;
    }
    .campaign-sharevdo .block-form .image-mascot{
        right: -300px;
    }
    .campaign-sharevdo .block-form .image-mascot img{
        width: 50%;
        float: left;
    }
    .campaign-sharevdo .block-form .image-milk-1 {
        left: -280px;
    }
    .campaign-sharevdo .block-form .image-milk-1 img{
        width: 40%;
        float: right;
    }
    .campaign-sharevdo .block-form label{
        font-size: 20px;
        line-height: 20px;
    }
    .campaign-sharevdo .block-form input, .campaign-sharevdo .block-form select{
        font-size: 20px;
        height: 40px;
    }
    .campaign-sharevdo .block-form .text-upload{
        font-size: 16px;
        line-height: 16px;
    }
    .campaign-sharevdo .block-form .terms{
        margin-top: 20px;
    }
    .campaign-sharevdo .block-form .terms p{
        font-size: 20px;
        line-height: 20px;
    }
    .campaign-sharevdo .block-form .block-submit{
        padding-top: 0;
    }
    .campaign-sharevdo .block-form .btn-submit{
        font-size: 30px;
    }
    
}

@-webkit-keyframes colorchange {
    25% {
      
      color: #fff;
    }
    50% {
      
      color: #000;
    }
    75% {
      
        color: #fff;
    }
    100% {
        
        color: #000;
    }
  }