﻿.bobo_application{padding:85px 0;background:#f8f8f8}
.bobo_application .tit{text-align:center}
.bobo_application .tit em {font-size:16px;color:var(--text-color-active);font-weight:600;letter-spacing:3px;text-transform:uppercase}
.bobo_application .tit h3 {margin:20px 0 0;font-size:36px;line-height:1;color:#333;font-weight:700}
.bobo_application .tit p {margin:35px 0 0;font-size:20px;line-height:1.8;color:#666}

.bobo_application .list {margin:50px 0 0;display:flex;flex-direction:row-reverse}
.bobo_application .bd {flex:1;overflow:hidden}
.bobo_application .bd ul li {width:100%;position:relative;background:#fff;padding-bottom:15px}
.bobo_application .bd ul li .pic {display:block;width:100%;overflow:hidden}
.bobo_application .bd ul li .pic img {width:100%;display:block;transition:all 0.3s ease 0s;-webkit-transition:all 0.3s ease 0s}
.bobo_application .bd ul li .top {position:absolute;left:30px;top:30px;right:30px;display:flex;align-items:center}
.bobo_application .bd ul li .top h5 {margin-left:20px;color:#fff;font-size:20px;font-weight:700}
.bobo_application .bd ul li .txt {position:relative;z-index:200;margin:-175px 15px 0;background:rgb(43 59 88 / 90%);padding:25px;box-sizing:border-box;font-size:18px;color:#fff;line-height:2}
.bobo_application .bd ul li:hover .pic img {transform:scale(1.01);-webkit-transform:scale(1.01)}
.bobo_application .hd {width:350px;margin-right:35px;overflow:hidden}
.bobo_application .hd ul li {padding:0 8px;font-size:20px;color:#666;font-weight:700;line-height:56px;height:56px;border-bottom:3px solid transparent;cursor:pointer;position:relative;text-transform:uppercase}
.bobo_application .hd ul li + li {margin-top:10px}
.bobo_application .hd ul li.on {border-bottom-color:var(--bg-color);color:var(--text-color-active)}

@media screen and (max-width:1680px){

}



@media screen and (max-width:1550px){

.bobo_application .hd{width:320px;}
.bobo_application .hd ul li {font-size:19px}  
}


@media screen and (max-width:1441px) {
.bobo_application {padding:75px 0;}
.bobo_application .tit h3 {font-size:34px}
.bobo_application .hd ul li {font-size:18px}
.bobo_application .bd ul li .txt {padding:22px;font-size:17px;line-height:1.6}
.bobo_application .tit p{margin:30px 0 0;font-size:19px;}
.bobo_application .hd{width:300px;}
.bobo_application .hd ul li {font-size:18px}
}

@media screen and (max-width:1367px) {
.bobo_application {padding:70px 0;}
.bobo_application .tit h3 {font-size:32px}
.bobo_application .tit p{margin:25px 0 0;font-size:18px;}
.bobo_application .hd{width:260px;}
.bobo_application .hd ul li{font-size:17px;}
  
}

@media screen and (max-width:1280px) {
.bobo_application {padding:60px 0;}
.bobo_application .tit h3 {font-size:30px}
.bobo_application .tit p{margin:20px 0 0;font-size:17px;}
.bobo_application .hd {width:230px;margin-right:30px;}
.bobo_application .hd ul li{font-size:16px;padding:0 5px;}
}
                           
@media screen and (max-width:1246px) {
.bobo_application{padding:30px 0 20px;}
.bobo_application .tit em {font-size:15px;}
.bobo_application .tit h3 {margin:15px 0 0;font-size:28px;}
.bobo_application .tit p {margin:15px 0 0;font-size:16px;line-height:24px;}
.bobo_application .list {margin:30px 0 0;flex-direction:column}
.bobo_application .bd {width:100%}
.bobo_application .bd ul li {width:100%;position:relative;background:#fff;padding-bottom:15px}
.bobo_application .bd ul li .pic {display:block;width:100%;overflow:hidden}
.bobo_application .bd ul li .pic img {width:100%;display:block;transition:all 0.3s ease 0s;-webkit-transition:all 0.3s ease 0s}
.bobo_application .bd ul li .top {position:absolute;left:15px;top:20px;right:15px;display:flex;align-items:center}
.bobo_application .bd ul li .top h5 {margin-left:20px;color:#fff;font-size:20px;font-weight:700}
.bobo_application .bd ul li .txt {margin:0;background:rgba(43,59,88,0.9);padding:15px;font-size:15px;line-height:1.3}

.bobo_application .hd {width:100%;margin:30px 0 0;overflow:hidden}
.bobo_application .hd ul{display:flex;flex-wrap:wrap;justify-content:center;}
.bobo_application .hd ul li {padding:0 10px;font-size:17px;line-height:40px;height:40px;background:#fff;border-bottom:none;margin:0 5px 10px;}
.bobo_application .hd ul li + li{margin-top:0}
.bobo_application .hd ul li.on {color:#fff;background:var(--text-color-active);}
.bobo_application .bd ul li{
    display: flex;
    flex-direction: column;
    align-items: center;
}
}

@media screen and (max-width:1155px){
    .bobo_application .list{
        width: auto !important;
    }
}

@media screen and (max-width:576px) {
.bobo_application .tit h3 {font-size:26px}
.bobo_application .hd ul li{font-size:16px;}
}

@media screen and (max-width:480px) {
.bobo_application .tit h3 {font-size:24px}
.bobo_application .tit p {font-size:15px}
.bobo_application .hd ul li{font-size:15px;line-height:38px;height:38px;}
.bobo_advantage ul li .ico{width:70px;}
.bobo_advantage ul li .ico img{width:45px;}
}

@media screen and (max-width:420px) {
.bobo_application .tit h3 {font-size:22px}
.bobo_application .hd ul li{font-size:14px;}

}
