.flex_box{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap
}
img{max-width: 100%;height: auto;}
h1{font-size: 40px;line-height: 48px;}

/* btn_box */
.btn_box{display: flex;justify-content: flex-start;flex-wrap: wrap;}
.btn_box a{border-radius: 8px;background: #00CEB2;height: 56px;margin-right: 16px;display: inline-block;line-height: 56px;text-align: center;font-weight: bold;font-size: 20px;color: #fff;box-sizing: border-box;min-width: 240px;padding: 0 16px;text-decoration: none;}
.btn_box a:hover{background-color: rgba(0, 206, 178, 0.8);}
.btn_box i{display: inline-block;width: 30px;height: 30px;background: url(/img/video-repair/windows.svg) no-repeat;background-size: 100%;margin-right: 8px;vertical-align: -8px;}
.btn_box.mac_btn_box i{display: inline-block;width: 30px;height: 30px;background: url(/img/video-repair/mac.svg) no-repeat;background-size: 100%;margin-right: 8px;vertical-align: -8px;}

.free_btn{display: inline-block;background: #00CEB2;line-height: 56px;min-width: 240px;height: 56px;font-size: 20px;font-weight: bold;margin: auto;text-align: center;color: #fff;}
.to_free{display: inline-block;background: #00CEB2;line-height: 56px;min-width: 240px;height: 56px;font-size: 20px;font-weight: bold;margin: auto;text-align: center;color: #fff;border-radius: 5px;cursor: pointer;}

/* banner */
.banner{max-width:100%;position:relative;z-index:0;padding-top:78px;padding-bottom:78px;background: #F9F6FF url(/img/video-player-online/banner-bg.jpg) center no-repeat;background-size: cover;text-align: center;}
.banner .container{max-width: 660px;}
.banner h1{font-size:39px;line-height: 48px;color:#222;margin-bottom:20px;font-weight:bold;}
.banner ul{max-width: 410px;margin: auto;}
.banner li{font-size: 16px;line-height: 24px;color: #222;margin-bottom: 6px;padding-left: 16px;position: relative;text-align: left;}
.banner li::before{width: 4px;height: 4px;border-radius: 50%;display: inline-block;background: #222222;overflow: hidden;clear: both;content: "";top: 10px;left: 0px;position: absolute;}
.banner .rating{margin: 20px auto 32px;font-size: 16px;line-height: 20px;color: #222222;}
.banner .try_pro{display: inline-block;font-size: 18px;line-height: 24px;color: #490FB4;font-weight: 400;margin-top: 16px;}
.banner .try_pro i{width: 20px;height: 20px;display: inline-block;background: url(/img/video-player-online/banner-icon.svg) center no-repeat;vertical-align: -4px;margin-right: 6px;}



/* switch_box */
.switch_box{justify-content: flex-start;align-items: center;margin:24px 0;}
.switch_box>span{margin-right: 16px;font-weight: bold;font-size: 16px;color: #111111;line-height: 19px;}
.switch_box{display: inline-block;padding: 2px;min-width: 124px;background: rgba(73, 15, 180, 0.3);border-radius: 36px;box-sizing: border-box;}
.switch_box{position: relative;display: flex;width: fit-content;}
.switch_box .item{padding: 0px 10px;font-weight: 400;font-size: 14px;color: #222222;line-height: 32px;box-sizing: border-box;text-align: center;position: relative;z-index: 2;cursor: pointer;user-select: none;height: 32px;display: inline-block;border-radius: 36px;}
.switch_box .item.active{background-color: #fff;}
.switch_box .windows i{background: url(/img/video-repair/windows-logo.svg) center/cover no-repeat;display: inline-block;width: 18px;height: 18px;background-size: 100%;margin-right: 5px;vertical-align: -4px;}
.switch_box .mac i{background: url(/img/video-repair/mac-logo.svg) center/cover no-repeat;display: inline-block;width: 18px;height: 18px;background-size: 100%;margin-right: 5px;vertical-align: -4px;}



/* fix_bar */
.fix_bar{box-shadow: 0px 4px 20px 0px rgba(95,86,108,0.11);background: #FFFFFF;height: 80px;position: sticky;top: 0;z-index: 10;}
.fix_bar .container{align-items: center;height: 100%;}
.fix_bar ul.fix_ul{max-width: 600px;width: 100%;}
.fix_bar ul.fix_ul li a,.fix_bar ul.fix_ul li.self{color: #222222;font-size: 20px;font-weight: bold;}
.fix_bar ul.fix_ul li.self{color: #5E52FF;}
.fix_bar ul.fix_ul li a:hover{text-decoration: underline;}
.fix_bar .fix_btn{zoom: 0.9;}


/* occasion */
.occasion{margin: 120px auto;}
h2{font-weight: bold;font-size: 40px;color: #222222;line-height: 48px;text-align: center;}
.occasion>div{margin-top: 50px;align-items: center;}
.occasion ul{max-width: 548px;width: 100%;}
.occasion ul li{border: 1px solid #E4D5FF;border-radius: 12px 12px 12px 12px;padding: 24px;box-sizing: border-box;border-radius: 12px 12px 12px 12px;margin-bottom: 12px;display: flex;align-items: center;justify-content: flex-start;cursor: pointer;}
.occasion ul li p{flex: 1;}
.occasion ul li.active{background: #F4EEFF;border: 1px solid #F4EEFF;}
.occasion ul li i{display: inline-block;background: url(/img/video-repair/repair-situations.svg) no-repeat;width: 60px;height: 60px;margin-right: 18px;}
.occasion ul li:nth-child(1) i{background-position: 0 0;}
.occasion ul li:nth-child(2) i{background-position: 0 -60px;}
.occasion ul li:nth-child(3) i{background-position: 0 -120px;}
.occasion ul li:nth-child(4) i{background-position: 0 -180px;}

.occasion .img_right img{display: none;max-width: 600px;width: 100%;}
.occasion .img_right img.active{display: block;}



/* main */
.main{margin: 120px auto;align-items: center;}
.main .text_part{max-width: 548px;width: 100%;}
.main .text_part .title{font-weight: bold;font-size: 40px;color: #222222;line-height: 48px;}
.main .text_part .info{font-weight: 400;font-size: 16px;color: #222222;line-height: 24px;margin-top: 12px;}

/* shining_box */
.shining_box{margin: 120px auto;}
.shining_box .item{max-width: 267px;width: 100%;background: #F9F6FF;border-radius: 8px 8px 8px 8px;border: 1px solid #D3BDFF;text-align: center;padding: 40px 28px;box-sizing: border-box;margin-top: 52px;}
.shining_box .item p:nth-child(2){font-weight: bold;font-size: 20px;color: #333;line-height: 28px;margin: 16px 0 12px;}
.shining_box .item p:nth-child(3){font-weight: 400;font-size: 16px;color: #333;line-height: 28px;}

/* step_box */
.step_box{padding: 100px 0px;background: #F4EEFF;}
.step_box>div{text-align: center;}
.step_box>div h2{margin: 0px auto 52px;}
.step_box>div>p{text-align: center;font-weight: 400;font-size: 16px;color: #9F9FA9;line-height: 24px;margin-bottom: 64px;}
.step_box .step_content{position: relative;}
.step_box>div .line{width: 100%;height: 2px;background: #D3BDFF;border-radius: 0px 0px 0px 0px;position: absolute;top: 48px;left: 50%;transform: translateX(-50%);z-index: 0;}
.step_box .step_item{max-width: 358px;text-align: center;margin: 0px auto 24px;position: relative;z-index: 1;}
.step_box .step_item>img{display: block;margin: 0px auto;}
.step_box .step_item>span{display: inline-block;min-width: 62px;line-height: 26px;background: #D3BDFF;border-radius: 22px;padding: 0px 16px;margin: 28px auto 16px;color: #C27AFF;line-height: 36px;font-size: 24px;color: #222222;font-weight: bold;position: relative;}
.step_box .step_item>span::before{clear: both;content: ""; width: calc(100% + 8px); height: 44px;position: absolute;top: -4px;left: 50%;transform: translateX(-50%);background: rgba(211,189,255,0.38);border-radius: 22px;z-index: -1;}
.step_box .step_item .title{font-weight: bold;font-size: 18px;color: #222222;line-height: 24px;margin: 0px auto 8px;}
.step_box .step_item .info{font-weight: 400;font-size: 14px;color: #222222;line-height: 22px;}
.step_box .free_btn{margin-top: 40px;}

/* article_box */
.article_box{padding: 100px 0px;background: #F4EEFF;}
.article_box>div h2{margin: 0px auto 32px;}
.article_box .article_item{max-width: 358px;margin: 20px auto 0px;background: #fff;border-radius: 10px;box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.1);position: relative;padding-bottom: 24px;}
.article_box .article_item img{border-radius: 10px 10px 0px 0px;}
.article_box .article_item a{padding: 0px 24px;box-sizing: border-box;display: block;font-size: 14px;line-height: 22px;font-weight: 500;color: #00CEB2;}
.article_box .article_item a::after{width: 100%;height: 100%;clear: both;content: "";position: absolute;top: 0px;left: 50%;transform: translateX(-50%);}
.article_box .article_item p{padding: 0px 24px;}
.article_box .article_item .title{font-weight: bold;font-size: 16px;color: #222222;line-height: 24px;margin: 24px auto 12px;}
.article_box .article_item .info{font-weight: 400;font-size: 14px;color: #666666;line-height: 24px;margin: 12px auto 12px;}

/* faq */
.faq{margin: 120px auto;position: relative;}
.faq h2{text-align: center;}
.faq_box{ margin-top: 32px;}
.faq_box>div{padding-top: 24px; padding-bottom: 24px;border-bottom: 1px solid #D9D9D9;padding-left: 32px;}
.faq_box>div .question{font-size: 20px;color: #222;font-weight: bold;line-height: 28px;position: relative;cursor: pointer;}
.faq_box>div .question::before{clear: both;content: ""; width: 18px; height: 21px; background: url(https://videosolo.net/img/videosolo-player/arrow-right.svg); position: absolute; left: -30px;top: 3px;}
.faq_box>div .answer{font-size: 16px;color: #222;line-height: 28px;margin-top: 12px;display: none;}
.faq_box>div.active .answer{ display: block;}




/* review_box */
.review_box{margin: 120px auto;}
.review_box ul{margin-top: 50px;}
.review_box ul li{background: #F8F8FA;border-radius: 20px 20px 20px 20px;max-width: 358px;box-sizing: border-box;padding: 30px;display: flex;flex-direction: column;justify-content: space-between;}
.review_box ul li>p{font-weight: 400;font-size: 16px;color: #222222;line-height: 24px;margin-bottom: 30px;}
.review_box .review_bottom{border-top: 1px solid #E3E3E9;padding-top: 18px;}
.review_box .author_info{max-width: 170px;width: 100%;justify-content: flex-start;align-items: center;}
.review_box .author_right{margin-left: 12px;display: flex;flex-direction: column;}
.review_box .review_bottom .name{font-weight: bold;font-size: 16px;color: #222222;margin-bottom: 2px;}
.review_box .review_bottom .place{font-weight: 400;font-size: 12px;color: #222222;}



/* solution */
.solution{margin: 120px auto;}
.solution_content{margin-top: 50px;}
.solution ul{border-radius: 20px 20px 20px 20px;border: 1px solid #D5C0FF;max-width: 550px;width: 100%;box-sizing: border-box;padding: 30px;}
.solution ul li{position: relative;margin-bottom: 20px;padding-left: 16px;}
.solution ul li a{font-weight: 400;font-size: 16px;color: #222222;line-height: 24px;}
.solution ul li a:hover{color: #5E52FF;}
.solution ul li:last-child{margin-bottom: 0;}
.solution ul li::before{position: absolute;width: 4px;height: 4px;background: #222;border-radius: 50%;position: absolute;top: 8px;left: 0;content: "";}



/* rec_box */
.rec_box{background: url(/img/videosolo-player/black.png), linear-gradient( 94deg, #EBE0FF 0%, #F8F5FF 100%);padding: 60px 0;position: relative;text-align: center;background-size: 100% auto;}
.rec_box::after{background: url(/img/video-repair/bottom-bg.png)no-repeat;position: absolute;top: 0;right: 0;content: "";width: 100%;height: 100%;background-size: cover;z-index: -1;}
.rec_box .pro_name{font-weight: bold;color: #222222;font-size: 40px;line-height: 48px;margin: 24px 0 12px;}
.rec_box .info{font-weight: 400;font-size: 16px;color: #222222;line-height: 24px;margin-bottom: 24px;}
.rec_box .switch_box{margin: 24px auto 20px;}
.rec_box .btn_box{justify-content: center;}
.rec_box .to_free{margin: 6px 12px;}
.rec_box .btn_box a{margin: 6px 12px;}


@media screen and (min-width:1921px){
  .banner{padding: 100px 0px;}
}
@media screen and (max-width: 1140px){
    .fix_bar{display: none;}
    .btn_box a{margin: 8px;}

    .occasion,.main,.step_box,.review_box,.solution,.shining_box,.faq{margin: 80px auto;}
    .occasion>div,.step_box>div>div,.review_box ul,.solution_content{margin-top: 32px;}
    .step_box,.article_box{padding: 80px 0px;}

    .occasion ul{order: 2;margin-top: 32px;}
    .occasion .img_right{order: 1;}
    .occasion>div,.main{flex-direction: column;justify-content: center;}

    .main .img_part{order: 1;}
    .main .text_part{margin-top: 32px;order: 2;text-align: center;}
    .main .text_part .title,h2,.rec_box .pro_name{font-size: 32px;line-height: 40px;}


    .review_box ul{max-width: 600px;width: 100%;flex-direction: column;justify-content: center;align-content: center;margin: 32px auto 0;}
    .review_box ul li{margin-bottom: 32px;max-width: 500px;}
    .review_box ul li:last-child{margin-bottom: 0;}

    .solution_content{flex-direction: column;align-items: center;}
    .solution ul.solution_right{margin-top: 32px;}

    .rec_box::after{display: none;}
    .shining_box .item{margin: 52px 12px 0px;}
    .shining_box>div{justify-content: center;}
    .step_box>div .line{display: none;}

}
@media screen and (max-width: 560px){
    .occasion,.main,.review_box,.solution,.shining_box,.faq{margin: 60px auto;}
    .step_box,.article_box{padding: 60px 0px;}
    .banner{padding: 50px 0px;}
    .rec_box{padding: 50px 0;}
    
    .main .text_part .title,h2,.rec_box .pro_name{font-size: 28px;line-height: 36px;}

    .occasion ul li{padding: 18px;}

    .review_box ul li{padding: 20px;}
    .review_box .review_bottom>img{flex: 1;zoom: 0.7;max-width: 116px;}
    .review_box .review_bottom{flex-wrap: nowrap;}
    .shining_box .item{margin-top: 20px;}
    .shining_box h2{margin-bottom: 12px;}
}