@charset "UTF-8";



.banner-special{ background: url(../images/banner_special.jpg) left center no-repeat; background-size: cover; height: 2.9rem;}

#special{ position: relative; background: #f8f8f8;}



.section{ padding: .5rem 0;}

.section-heading{ position: relative; text-align: center; line-height: 1; margin-bottom: .4rem;}

.section-heading h2{ position: relative; font-size: var(--font-30); color: #101010; padding-bottom: .3rem;}

.section-heading h2::after{ content: ''; position: absolute; left: 0; right: 0; bottom: .1rem; width: .4rem; height: .04rem; background: #f8621f; margin: 0 auto;}

.section-heading p{ font-size: var(--font-20); color: #40434a; text-transform: uppercase}

.section-heading.white h2{ color: #fff;}

.section-heading.white h2::after{ background: #fff;}

.section-heading.white p{ color: #fff;}



/* highlights */

.highlights{ position: relative;}

.highlights ul{ display: flex; justify-content: center; flex-wrap: wrap; margin: 0 -.05rem;}

.highlights ul li{ padding: 0 .05rem; width: 25%; margin-bottom: .1rem; line-height: 1;}

.highlights ul li a{ display: flex; flex-direction: column; justify-content: center; align-items: center; height: 2.22rem; background: #fff; border-radius: .2rem;}

.highlights ul li i{ display: block; background-position: center; background-repeat: no-repeat; background-size: .56rem; width: .96rem; height: .96rem; border-radius: 50%; background-color: #fff1e9; margin-bottom: .3rem;}

.highlights ul li.item1 i{ background-image: url(../images/icon_special_highlights_orange1.png);}

.highlights ul li.item2 i{ background-image: url(../images/icon_special_highlights_orange2.png);}

.highlights ul li.item3 i{ background-image: url(../images/icon_special_highlights_orange3.png);}

.highlights ul li.item4 i{ background-image: url(../images/icon_special_highlights_orange4.png);}

.highlights ul li.item5 i{ background-image: url(../images/icon_special_highlights_orange5.png);}

.highlights ul li.item6 i{ background-image: url(../images/icon_special_highlights_orange6.png);}

.highlights ul li.item7 i{ background-image: url(../images/icon_special_highlights_orange7.png);}

.highlights ul li strong{ display: block; font-weight: normal; font-size: var(--font-22); color: #40434a;}



/* chain */

.chain .section-main{ display: flex; justify-content: space-between;}

.chain .section-main img{ display: block; width: 100%;}

.chain dl{ position: relative;}

.chain dl.item1{ width: 4rem;}

.chain dl.item2{ width: 1.6rem;}

.chain dl.item3{ width: 1rem;}

.chain dl dt{ display: flex; justify-content: center; text-align: center; margin-bottom: .2rem;}

.chain dl dt h3{ font-size: var(--font-20); color: #fff; width: 1.4rem; line-height: .38rem; background: #1b4b93; border-radius: .06rem;}

.chain dl dd{ background: #fff; box-shadow: 0 5px 16px rgba(3, 3, 3, .07); padding: .1rem;}

.chain dl dd h4{ text-align: center; font-size: var(--font-18); margin-bottom: 0rem;}

.chain dl dd p img{ display: block; margin: 0 auto; max-width: 100%;}



/* polymerize */

.polymerize{ position: relative; background: url(../images/special_polymerize_bg.jpg) center top no-repeat;}

.polymerize-tabs{ text-align: center;}

.polymerize-tabs ul{ display: flex;}

.polymerize-tabs ul li{ flex-shrink: 0; font-size: var(--font-28); background: #142d5f; color: #fff; width: 1.6rem; height: .7rem; line-height: .7rem; cursor: pointer;}

.polymerize-tabs ul li.active{ background: #f8621f;}

.polymerize-boxs{ padding: .4rem .35rem;}

.polymerize-box .img{ margin-bottom: .4rem;}

.polymerize-box .img img{ display: block; width: 100%;}

.polymerize-box p{ font-size: var(--font-24); color: #ebebeb; line-height: 1.8; text-indent: 2em; padding: 0 .1rem; margin-bottom: .4rem;}

.polymerize-box a.btn-orange-border{ display: block; margin: 0 auto; width: 2.7rem; line-height: .55rem; border-radius: .27rem; text-align: center; font-size: var(--font-28); color: #f8621f;}


/* .polymerize-box ul li{ position: relative; background: #fff; border-radius: .16rem; box-shadow: 0 0 .13rem rgba(3, 3, 3, .1); padding: .70rem .25rem .2rem; overflow: hidden; margin-bottom: .3rem;} */
.polymerize-box ul li{ position: relative; background: #fff; border-radius: .16rem; box-shadow: 0 0 .13rem rgba(3, 3, 3, .1); padding: .2rem; overflow: hidden; margin-bottom: .3rem;}

.polymerize-box ul li h4{ font-size: var(--font-28); margin-bottom: .2rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}

.polymerize-box ul li h4 a{ color: #000;}

.polymerize-box ul li p{ font-size: var(--font-22); color: rgba(71, 70, 70, .8); margin-bottom: .2rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}

.polymerize-box ul li .info{ display: flex; justify-content: space-between; border-top: 1px dashed #e5e5e5; font-size: var(--font-20); color: rgba(0, 0, 0, .5); padding-top: .2rem;}

.polymerize-box ul li .btn{ position: absolute; left: 0; top: 0; font-size: var(--font-20); color: #ee5936; text-align: center; background: rgba(238, 89, 54, .2); width: 2.36rem; height: .55rem; border-radius: 0 .275rem .275rem 0; line-height: .55rem;}


/* chart */

.chart{ position: relative;}

.chart dl{ display: flex; justify-content: space-between; align-items: center; height: 5rem; background: #fff; border-radius: .2rem; margin-bottom: .4rem;}

.chart dl dt{ padding-left: .4rem;}

.chart dl dt p{ margin-bottom: .25rem;}

.chart dl dt img{ width: .51rem;}

.chart dl dt h3{ font-size: .32rem; font-weight: bold; line-height: 1; margin-bottom: .25rem;}

.chart dl dt ul{ margin-bottom: .3rem;}

.chart dl dt ul li{ font-size: var(--font-20); color: #5e5751; line-height: 2.3;}

.chart dl dt a.btn-orange{ width: 2.28rem; height: .58rem; line-height: .58rem; border-radius: .29rem; font-size: var(--font-28);}

.chart dl dd{ width: 4.3rem; display: flex; flex-direction: column; justify-content: center;}

.chart dl dd p{ margin: .2rem 0;}

.chart dl dd p img{ display: block; max-width: 100%; margin: 0 auto;}



/* report */

.report{ position: relative;}

.report-tabs{ margin-bottom: .4rem;}

.report-tabs ul{ display: flex; justify-content: center; line-height: 1;}

.report-tabs ul li{ position: relative; font-size: var(--font-30); color: #0d0d0d; margin: 0 .5rem; padding-bottom: .25rem; cursor: pointer;}

.report-tabs ul li.active{ color: #ec5a3e;}

.report-tabs ul li.active::after{ content: ''; position: absolute; left: .05rem; right: .05rem; bottom: 0; height: .06rem; background: #ec5a3e; border-radius: .03rem;}

.report-boxs{ position: relative;}

.report-boxs ul{ display: flex; flex-wrap: wrap;}

.report-boxs ul li{ width: 50%; padding: 0 .13rem; margin-bottom: .26rem;}

.report-boxs ul li a{ display: block;}

.report-boxs ul li img{ display: block; width: 100%;}



/* question */

.question{ position: relative;}

.question-main{ position: relative; background: url(../images/special_question_bg.png) center top no-repeat; background-size: 6.18rem; height: 7.2rem;}

.question ul li{ position: absolute; width: 3rem; background-repeat: no-repeat; background-size: .72rem;}

.question ul li.left{ background-position: right top; text-align: right; padding-right: .8rem;}

.question ul li.right{ background-position: left top; text-align: left; padding-left: .8rem;}

.question ul li.item1{ left: .1rem; top: .55rem; background-image: url(../images/icon_question1.png); background-position: right .4rem; width: 3.5rem;}

.question ul li.item2{ right: .3rem; top: .8rem; background-image: url(../images/icon_question2.png); background-position: left .4rem; width: 2.87rem;}

.question ul li.item3{ left: .1rem; top: 2.8rem; background-image: url(../images/icon_question3.png); background-position: right .25rem; width: 2.5rem;}

.question ul li.item4{ right: .4rem; top: 3.5rem; background-image: url(../images/icon_question4.png); background-position: left .3rem; width: 2.3rem;}

.question ul li.item5{ left: 0; right: 0; top: 4.5rem; margin: 0 auto; padding-top: .95rem; background-image: url(../images/icon_question5.png); background-position: center top; text-align: center; width: 2.8rem;}

.question ul li h3{ font-size: var(--font-28); color: #3f3f41; margin-bottom: .15rem; line-height: 1; font-weight: bold;}

.question ul li p{ font-size: var(--font-16); color: #5e5e5f; line-height: 1.8;}



/* advantage */

.advantage{ background: url(../images/special_advantage_bg.jpg) center top no-repeat;}

.advantage ul li{ position: relative; counter-increment: myIndex; background: #fff; border-radius: .16rem; padding: .35rem .35rem .35rem 1.6rem; margin-bottom: .25rem;}

.advantage ul li i{ position: absolute; left: .35rem; top: 0; bottom: 0; margin: auto; display: block; width: 1.05rem; height: 1.05rem; border-radius: 50%; background-color: #eef4f9; background-position: center; background-repeat: no-repeat;}

.advantage ul li.item1 i{ background-image: url(../images/icon_special_advantage_blue1.png);}

.advantage ul li.item2 i{ background-image: url(../images/icon_special_advantage_blue2.png);}

.advantage ul li.item3 i{ background-image: url(../images/icon_special_advantage_blue3.png);}

.advantage ul li.item4 i{ background-image: url(../images/icon_special_advantage_blue4.png);}

.advantage ul li.item5 i{ background-image: url(../images/icon_special_advantage_blue5.png);}

.advantage ul li strong{ display: block; font-size: var(--font-28); font-weight: bold; color: #323131; line-height: 1; margin-bottom: .15rem;}

.advantage ul li span{ display: block; font-size: var(--font-20); color: #8d8b8b;}

.advantage ul li a::after{ position: absolute;  content: counter(myIndex); right: .2rem; bottom: -.3rem; font-size: .9rem; color: #fce5d7; font-style: italic;}



/* others */

.others{ position: relative;}

.others ul{ display: flex; justify-content: space-between; flex-wrap: wrap;}

.others ul li{ width: 3.35rem; padding: .2rem .25rem; border-radius: .06rem; background: #fff url(../images/special_others_item_bg.jpg) center top no-repeat; background-size: cover; margin-bottom: .2rem;}

.others ul li h4{ background: url(../images/icon_others_orange.png) left center no-repeat; background-size: .27rem; padding-left: .35rem; font-weight: bold; font-size: var(--font-28); margin-bottom: .3rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}

.others ul li h4 a{ color: #222223;}

.others ul li p{ font-size: var(--font-22); color: #7a7b7e; text-indent: 2em; line-height: 1.8;}



/* media */

@media (max-width: 640px){

}



@media (max-width: 576px){

}



@media (max-width: 480px){

}



@media (max-width: 375px){

    .question ul li.item1{ top: .2rem;}

    .question ul li.item2{ top: 0; right: .1rem; width: 3.2rem; background-position: left .8rem;}

    .question ul li.item4{ top: 3rem; right: .1rem; width: 2.7rem;}

}