.flex_box{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap
}
img{max-width: 100%;height: auto;}

/* banner */
.banner {padding: 78px 0px;background: url(/img/video-repair/banner-bg.png) no-repeat center center/cover;text-align: center; text-align: left;}
.banner .container{align-items: center;}
.banner_left{max-width: 520px;width: 100%;}
.banner .info{font-weight: 400;font-size: 16px;color: #222222;line-height: 24px;margin: 12px 0 24px;}
.banner ul li{font-size: 16px;color: #222222;line-height: 24px;position: relative;padding-left: 12px;}
.banner ul li::before{position: absolute;width: 4px;height: 4px;background: #222;border-radius: 50%;position: absolute;top: 10px;left: 0;content: "";}
.banner .review{color: #222222;font-weight: bold;font-size: 16px;margin-top: 24px;}
.banner .review img{vertical-align: -5px;margin-left: 4px;}

/* 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;}

/* 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.win_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;}


/* 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;}


/* step_box */
.step_box{margin: 120px auto;background: #F4EEFF;padding: 100px 0;}
.step_box>div>div{margin-top: 50px;align-items: center;}
.step_box .step_left{max-width: 530px;width: 100%;}
.step_box .step_img .img_item{display: none;max-width: 530px;width: 100%;}
.step_box .step_img .img_item.active{display: block;}

.step_box .step_btn{margin-top: 24px;display: flex;justify-content: center;}
.step_box .step_btn i{display: inline-block;background: #00B89F;width: 30px;opacity: 0.2;height: 16px;border-radius: 8px;margin: 0 10px;cursor: pointer;}
.step_box .step_btn i.active{opacity: 1;width: 60px;}

.step_box .step_right{max-width: 546px;width: 100%;}
.step_box .step_right .step_item{margin: 30px 0;padding: 0 0 0 16px;}
.step_box .step_right .step_item.active{border-radius: 12px; background: #FFF; padding: 16px}
.step_box .step_item .step_title{display: inline-block;background: #00B89F;border-radius: 22px 22px 22px 22px;height: 44px;background: rgba(0,184,159,0.38);padding: 4px;box-sizing: border-box;cursor: pointer;}
.step_box .step_item .step_title span{color: #FFFFFF;line-height: 36px;font-size: 24px;font-weight: bold;background: #00B89F;border-radius: 22px 22px 22px 22px;display: inline-block;line-height: 36px;padding: 0 16px;}

.step_box .step_info{font-weight: 400;font-size: 16px;color: #222222;line-height: 24px;margin: 18px 0 0;display: none;}
.step_box .step_info span{font-weight: bold;}
.step_box .step_right .step_item.active .step_info{display: block;}

.step_box .go_more{color: #5E52FF;}
.step_box .go_more:hover{text-decoration: underline;}



/* 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: linear-gradient( 94deg, #EBE0FF 0%, #F8F5FF 100%);padding: 60px 0;position: relative;text-align: center;}
.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;}
.rec_box .switch_box{margin: 24px auto 20px;}
.rec_box .btn_box{justify-content: center;}



@media screen and (max-width: 1140px){
    .fix_bar{display: none;}

    .banner{padding: 50px 0;}
    .banner .container{flex-direction: column;}
    .banner .banner_left{max-width: 900px;margin-bottom: 32px;text-align: center;}
    .banner .banner_left ul{text-align: left;max-width: 600px;width: 100%;margin: 0 auto;}
    .banner .switch_box{margin: 20px auto;}
    .banner .btn_box{justify-content: center;}


    .btn_box a{margin: 8px;}



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

    .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;}

    .step_box>div>div{flex-direction: column;justify-content: center;}
    .step_box .step_right{margin-top: 32px;text-align: center;}
    .step_box .step_right .step_item{text-align: left;}


    .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;}

}

@media screen and (max-width: 560px){
    .occasion,.main,.step_box,.review_box,.solution{margin: 60px auto;}
    .step_box,.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;}

    .step_box .step_item .step_title{zoom: 0.8;}
    .step_box .step_right .step_item{margin: 20px auto;}
    .step_box .step_info{margin: 12px 0 0;}

    .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;}
}