.product-top .container{
   position: relative;
}
.product-top .main{
    width: 100%;
    padding: 90px 60px 70px;
    background: var(--white);
    box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, .1);
    margin-top: -80px;
}
.product-top .top{
    text-align: center;
}
.product-top .process{
    display: block;}
.product-top .top h2{
    display: inline-block;
    font-size: 36px;
    color: var(--fttcolor);
    
    position: relative;
    z-index: 1;
}
.product-top .top h2::before{
    content: '';
    position: absolute;
    left: -7px;
    top: -7px;
    width: 26px;
    height: 26px;
    background: var(--bgscolor);
    z-index: -1;
}
.tit{
    margin-top: 70px;
}
.tit h3{
    display: inline-block;
    padding: 16px 0 8px 87px;
    font-size: 28px; font-weight: 600;
    color: var(--fttcolor);
    
    position: relative;
    background: url("/static/images/products/refining/refining-bg.jpg") no-repeat;
}
.tit h3::before{
    content: '01';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    font-size: 60px;
    color: #B5B5B5;
}
.tit p{
    margin: 10px 0 50px;
    font-size: 16px;
    color: var(--ftcolor);
}
.advantages .tit h3{
    background: url("/static/images/products/refining/technical-advantages-bg.jpg") no-repeat;
}
.advantages .tit h3::before{
    content: '02';
}
.output .tit h3{
    background: url("/static/images/products/refining/processing-output-bg.jpg") no-repeat;
}
.output .tit h3::before{
    content: '03';
}
.parameter .tit h3{
    background: url("/static/images/products/refining/parameter-comparison-bg.jpg") no-repeat;
}
.parameter .tit h3::before{
    content: '04';
}
.indicator .tit h3{
    background: url("/static/images/products/refining/indicator-advantages-bg.jpg") no-repeat;
}
.indicator .tit h3::before{
    content: '05';
}
.process .img{
    position: relative;
    margin-bottom: 125px;
}
.process .img img{
    border-radius: 80px 0 80px 0;
}
.process .img h3{
    
    font-size: 26px;
    color: var(--white);
    line-height: 20px;
    position: absolute;
    right: 40px;
    top: 30px;
}
.process .img p{
    width: 90%;
    padding: 30px 70px;
    background: var(--white);
    border-radius: 30px;
    font-size: 20px;
    color: var(--fttcolor);
    line-height: 26px;
    text-align: center;
    margin: 0 auto;
    position: absolute;
    bottom: -78px;
    left: 0;
    right: 0;
    box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, .1);
}
.advantages .advantages-main{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.advantages .advantages-main ul{
    width: 33%;
}
.advantages ul li{
    padding: 18px 33px 18px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, .1);
    border-radius: 10px;
    margin-bottom: 20px;
}
.advantages ul li:last-child{
    margin-bottom: 0;
}
.advantages ul li img{
    width: 45px;
}
.advantages ul li p{
    width: 83%;
    font-size: 16px;
    color: var(--fttcolor);
    line-height: 20px;
}
.advantages .advantages-main>img{
    width: 30%;
    margin: 0 35px;
}
.output ul{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
.output ul li{
    width: calc(50% - 50px);
    display: flex;
    align-items: center;
    padding-left: 16px;
    padding-bottom: 20px;
    border-bottom: 1px dashed #E3E3E3;
    position: relative;
    margin-bottom: 23px;
}
.output ul li:last-child,.output ul li:nth-child(13){
    border-bottom: 0;
    padding-bottom: 0;
}
.output ul li::before{
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 5px;
    height: 21px;
    background: var(--bgcolor);
}
.output ul li span,.output ul li p{
    font-family: 'Roboto-Medium';
    font-size: 20px;
    color: var(--fttcolor);
}
.output ul li span{
    
}
.output ul li p{
    margin-left: 20px;
}
.parameter-indicator{
    display: flex;
    justify-content: space-between;
    margin-top: 70px;
}
.parameter-indicator .tit{
    margin-top: 0;
}
.parameter-indicator .indicator{
    padding-left: 30px;
    border-left: 1px dashed #E3E3E3;
    margin-left: 40px;
}
.parameter-indicator .indicator .tit p{
    margin-bottom: 65px;
}
@media (any-hover: hover) {
    .output ul li a:hover{
        color: var(--bgscolor);
    }
}

@media(min-width:768px) and (max-width:1440px){
    .product-top .top h1{
        font-size: 36px;
    }
}

@media(min-width:768px) and (max-width:1260px){
    .product-top .top h1{
        font-size: 30px;
    }
    .solution-desc .solution-text p{
        font-size: 16px!important;
        line-height: 22px!important;
    }
    .parameter-indicator .indicator ul li{
        width: 148px;
    }
    .parameter-indicator .indicator ul li:nth-child(2) {
        margin: 20px 0;
    }
    .parameter-indicator .indicator .indicator-main {
        padding: 0px 50px;
    }

}
@media(min-width:768px) and (max-width:1024px){
    .advantages ul li img{
        width: 30px;
    }
    .advantages .advantages-main>img{
        width: 30%;
        margin: 0 20px;
    }
    .parameter-indicator .indicator .indicator-main {
        padding: 0px 40px;
    }
    .parameter-indicator .indicator ul {
        top: 60px;
    }
    .parameter-indicator .indicator ul li {
        width: 125px;
        height: 40px;
        border-radius: 20px;
        line-height: 40px;
        font-size: 14px;
    }
    .parameter-indicator .indicator ul li:nth-child(2) {
        margin: 18px 0;
    }
    .parameter-indicator .indicator ul li:first-child {
        line-height: 16px;
    }
    .parameter-indicator .indicator ul:first-child li:first-child, .parameter-indicator .indicator ul:first-child li:last-child {
        margin-left: 20px;
    }
    .parameter-indicator .indicator ul:last-child :nth-child(2) {
        margin-left:20px;
    }
}

@media screen and (max-width:768px){
    .product-top .top h1{
        font-size: 26px;
        display: inline;
        line-height: 30px;
    }
    .product-top .top h1::before{
        left: -6px;
        top: -2px;
        width: 18px;
        height: 18px;
    }
    .product-top .main{
        padding: 45px 15px 35px;
        margin-top: -35px;
    }
    .tit {
        margin-top: 35px;
    }
    .tit h2 {
        padding: 10px 0 5px 50px;
        font-size: 24px;
    }
    .tit h2::before {
        font-size: 40px;
    }
    .tit p {
        margin: 6px 0 30px;
        font-size: 14px;
        line-height: 21px;
    }
    .process .img {
        margin-bottom: 25px;
    }
    .process .img img {
        border-radius: 40px 0 40px 0;
    }
    .process .img h3 {
        display: none;
    }
    .process .img p{
        width: 100%;
        padding: 20px 15px;
        border-radius: 10px;
        font-size: 14px;
        line-height: 21px;
        position: unset;
        margin-top: 20px;
    }
    .advantages .advantages-main{
        flex-wrap: wrap;
    }
    .advantages .advantages-main ul{
        width: 100%;
    }
    .advantages .advantages-main>img {
        width: 100%;
        margin: 25px 0;
    }
    .advantages ul li {
        padding: 15px 20px 15px 15px;
    }
    .advantages ul li img {
        width: 36px;
    }
    .output ul li{
        width: 100%;
        padding-left: 10px;
        padding-bottom: 15px;
        margin-bottom: 20px;
    }
    .output ul li span, .output ul li p{
        font-size: 16px;
        line-height: 20px;
    }
    .output ul li::before {
        width: 3px;
        height: 16px;
    }
    .output ul li:nth-child(13){
        padding-bottom: 15px;
        border-bottom: 1px dashed #E3E3E3;
    }
    .output ul li p{
        margin-left: 20px;
    }
    .parameter-indicator{
        margin-top: 0;
        flex-wrap: wrap;
    }
    .parameter-indicator .tit{
        margin-top: 35px;
    }
    .parameter-indicator .indicator {
        padding-left: 0;
        border-left: 0;
        margin-left: 0;
    }
    .parameter-indicator .indicator .tit p {
        margin-bottom: 30px;
    }
    .parameter-indicator .indicator .indicator-main {
        padding: 0px 40px;
    }
}