@charset "utf-8";

.main{position:relative;margin-top:84px;padding-top:96px;}
.main .bg{position:absolute;left:0;top:0;width:100%;height:calc(50% + 100px);background-image:url('../image/research_mb.png');background-repeat:no-repeat;background-size:cover;background-position:center;z-index:-1;}
.researchboxtitle{position:relative;color:#0562AF;font-style:normal;font-weight:700;line-height:1.2;display:inline-block;margin-bottom:16px;}
.researchboxtitle::after{content:'';position:absolute;width:40px;height:1px;right:-48px;background:#0562AF;top:50%;transform:translateY(-50%);}
.researchboxxq{color:#666;font-size:18px;font-weight:400;line-height:1.5;}
.researchbox_conbox{padding-top:44px;margin-bottom:60px;}
.researchbox_con{border-radius:40px 0px 40px 0px;width:100%;display:flex;position:relative;overflow:hidden;}
.researchbox_conleft{width:50%;position:relative;overflow:hidden;}
.researchbox_conleft .small_bg{position:absolute;left:0;top:0;width:100%;height:100%;background-position:center;background-repeat:no-repeat;background-size:cover;transition:all .4s;}
.researchbox_conleft:hover .small_bg{transform:scale(1.05);}
.researchbox_conright{width:50%;}
.researchbox_conleft img{width:100%;visibility:hidden;}
.researchbox_contop{position:absolute;left:50%;transform:translateX(-50%);top:50px;width:100%;width:90%;z-index:8;}
.researchbox_conline{width:100%;height:1px;background-color:rgba(255,255,255,0.30);}
.researchbox_contoptext{color:rgba(255,255,255,0.30);text-align:right;font-size:16px;font-style:normal;font-weight:400;line-height:26px;margin-bottom:16px;}
.researchbox_conright{order:2;background:var(--main-color);padding:139px 51px 30px 45px;}
.researchbox_conrighttitle{color:#FFF;font-style:normal;font-weight:700;line-height:1.4;margin-bottom:40px;}
.researchbox_conrightcon{display:flex;flex-wrap:wrap;margin-bottom:8px;margin-left:-16px;margin-right:-16px;}
.researchbox_conrightcon_item{display:flex;align-items:center;flex-shrink:0;margin-right:16px;margin-left:16px;margin-bottom:32px;}
.researchbox_conrightcon_item span{color:#FFF;text-align:center;font-size:18px;font-style:normal;font-weight:700;line-height:32px;align-items:center;padding:0 16px;}
.researchbox_conrightcon_item:nth-child(odd) span{min-width:140px;}
.researchbox_conrightconxq{position:relative;padding-bottom:35px;    /*overflow-y: auto;*/}
.researchbox_conrightconxq:before{content:"";position:absolute;right:0;bottom:0;width:140px;height:94px;max-width:20%;background-image:url(../image/re_dou.svg);background-size:contain;background-repeat:no-repeat;background-position:right bottom;opacity:0.1;}
.researchbox_conrightconxq_item{position:relative;display:flex;align-items:center;}
.researchbox_conrightconxq_item span{position:absolute;left:0;top:2px;color:rgba(255,255,255,0.50);font-size:20px;font-weight:700;}
.researchbox_conrightconxq_item p{padding-left:28px;margin-bottom:24px;color:#FFF;font-size:20px;font-weight:400;line-height:1.5;}
.ipand_img{display:none;}

.researchbox_img {
    text-align: center;
    padding-bottom: 34px;
}
.researchbox_img img {
    max-width: 100%;
}
.research_bottom {
    padding-top: 72px;
    padding-bottom: 130px;
background-image: url(../image/research_b_bg.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
overflow: hidden;
}
.top_loop {
    padding-top: 18px;
}
.research_b_list>ul {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    margin-left: -12px;
    margin-right: -12px;
}
.top_loop>ul>li {
    width: 33.33%;
    padding: 0 12px;
}
.bot_loop>ul>li {
    padding: 0 12px;
    width: 100%;
}
.research_b_list .line {
    padding-top: 32px;
padding-bottom: 24px;
    height: 100%;
    width: 100%;
    border-bottom: 1px solid #D4D4D4;
}
.research_b_list .research_b_t {
    color: var(--main-color);
    font-size:18px;
    font-weight: 700;
    line-height: 1.2;
}
.research_b_list .research_loop {
position: relative;
padding-left: 14px;
    margin-top: 16px;
    color: var(--dark);
font-size: 18px;
font-weight: 400;
line-height: 1.4;
}
.research_b_list .research_loop:before {
    content: "·";
    position: absolute;
    left: 0;
    top: 4px;
    color: var(--main-color);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
}
.bot_loop .ul {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    margin-left: -12px;
    margin-right: -12px;
}
.bot_loop .ul>li {
    width: 33.33%;
    padding: 0 12px;
}
@media (max-width:1440px){
    .researchbox_conrightcon{margin-left:-10px;margin-right:-10px;margin-bottom:20px;}
    .researchbox_conrightcon_item{margin-right:10px;margin-left:10px;margin-bottom:20px;}
    .researchbox_conrightcon_item span{line-height:32px;padding:0 9px;}
}
@media (max-width:1365px){
    .top_loop>ul>li {
        width: 50%;
    }
    .bot_loop .ul > li {
        width:50%;
    }
}
@media (max-width:1280px){
    
}
@media (max-width:991px){
    .researchbox_con{display:block;}
    .researchbox_conright{width:100%;padding:139px 35px 30px 35px;}
    .researchbox_conright{order:inherit;}
    .researchbox_conleft{width:100%;}
    .researchbox_conleft .mask{display:none;}
    .researchbox_conleft .small_bg{display:none;}
    .researchbox_conleft .ipand_img{display:block;visibility:visible;}
    .researchbox_contop{top:35px;}
    .research_b_list .research_loop {
        font-size: 16px;
    }
    .research_b_list .research_loop::before {
        content: "·";
        font-size: 14px;
    }
}
@media (max-width:767px){
    .main{margin-top:80px;}
    .researchboxxq{font-size:16px;}
    .researchbox_conright{padding:100px 25px 30px 25px;}
    .researchbox_contoptext{font-size:14px;line-height:1.2;margin-bottom:16px;}
    .researchbox_conrightcon{margin-left:0;margin-right:0;}
    .researchbox_conrightcon_item{width:100%;margin-left:0;margin-right:0;justify-content:space-between;}
    .researchbox_conrightconxq_item span{top:2px;font-size:16px;}
    .researchbox_conrightconxq_item p{padding-left:16px;margin-bottom:20px;font-size:16px;}
    
    .researchbox_conrighttitle {
        font-size: 20px;
    }
    .research_b_list .line {
        padding-top: 20px;
        padding-bottom: 20px;
    }
    .top_loop>ul>li {
        width: 100%;
    }
    .bot_loop .ul > li {
        width:100%;
    }
    .research_bottom {
        padding-top: 50px;
        padding-bottom: 60px;
    }

}
@media (max-width:350px){
    .researchbox_conright{padding:115px 25px 30px 25px;}
    .researchbox_conrightcon_item span{line-height:30px;padding:0 4px;}
}