/* com_th */
.com_th{text-align: left;}
.com_th .title{font-size: 50px; line-height: 1.2; font-family: 'Roboto-Bold'; color: #020C1E; text-transform: capitalize;}
.com_th .title .txt{color: inherit; position: relative; font-size: inherit;}
.com_th .title .txt b{color: var(--commonColor);}
.com_th .title a.txt:hover{color: var(--commonColor); text-decoration: underline;}
.com_th .brief{line-height: 1.75; color: var(--txtColor); margin-top: 12px; font-family: 'Roboto-Regular'; font-size: 16px;}

.th_center{text-align: center;}

.th_white .title{color: #fff;}
.th_white .title a.txt:hover{color: var(--commonColor);}
.th_white .brief{color: #fff;}

@media only screen and (max-width: 1550px) {
	.com_th .title{font-size: 46px;}
}
@media only screen and (max-width: 1400px) {
	.com_th .title{font-size: 42px;}
}
@media only screen and (max-width: 1350px) {
	.com_th .title{font-size: 38px;}
}
@media only screen and (max-width: 1200px) {
	.com_th .title{font-size: 36px;}
    .com_th .brief{font-size: 16px;}
}
@media only screen and (max-width: 980px) {
	.com_th .title{font-size: 26px;}
	.com_th .title br{display: none;}
	.com_th .brief{margin-top: 10px; font-size: 16px;}
}

/* pubMore */
.pubMore{display: inline-block; padding: 0 26px; border-radius: 4px; color: #fff; height: 48px; line-height: 48px; background: var(--commonColor); border: 2px solid var(--commonColor); cursor: pointer; text-transform: uppercase; font-weight: bold;}

.pubMore:hover{background: #fff; color: var(--commonColor);}

/* swiper */
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{
    margin: 0 8px;
}
@media only screen and (max-width: 980px){
    .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet,
    .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{
        margin: 0 5px;
    }
}

.container {background: #F6F6F7;}

.above_description {margin-top: 5%;}
.above_description .com_th .brief{font-size: 18px;}

/* related */
.related_inner{position: relative; margin-top: 2.2%; padding-bottom: 50px;}

.related-prev, .related-next{width: 48px; height: 48px; border-radius: 50%; margin-top: -54px; background-position: center; background-repeat: no-repeat; background-size: 30px auto; background-color: transparent; opacity: 1; transition: all 0.5s ease; display: none;}
.related-prev::after, .related-next::after{content: '' !important; display: none;}
.related-prev{background-image: url(../img/icon_left_h.png); left: -66px;}
.related-next{background-image: url(../img/icon_right_h.png); right: -66px;}
.related-prev:hover, .related-next:hover{background-color: var(--commonColor); background-size: 30px auto;}
.related-prev:hover{background-image: url(../img/icon_left.png);}
.related-next:hover{background-image: url(../img/icon_right.png);}

@media only screen and (max-width: 1640px){
    .related-prev{left: -55px;}
    .related-next{right: -55px;}
}
@media only screen and (max-width: 980px){
    .related-prev, .related-next{display: none;}
    .related_inner{margin-top: 12px; padding: 0 0 35px;}
}

.related_th .title{font-size: 38px;}
@media only screen and (max-width: 1450px){
    .related_th .title{font-size: 36px;}
}
@media only screen and (max-width: 980px){
    .related_th .title{font-size: 26px;}
}

/* c_related_video */
.c_related_video{overflow: hidden;}
.related_video_inner .swiper-slide{width: calc((100% - 52px) / 3); margin-right: 26px; height: auto;}

.related_video_item{height: 100%; position: relative;}
.related_video_item .pic{padding-bottom: 66%;}
.related_video_info{padding: 16px 0 0;}
.related_video_info .title{font-family: 'Work Sans-Regular'; font-size: 20px; line-height: 30px; overflow: hidden; font-weight: 400;}

.related_video_item .item_icon{display: block; width: 60px; height: 60px; position: absolute; left: 50%; top: 50%; margin: -30px 0 0 -30px; border-radius: 50%; z-index: 0;}
.related_video_item .item_icon::after{display: block; position: relative; width: 100%; height: 100%; content: ''; background: rgba(0, 0, 0, .5); background-repeat: no-repeat; background-position: center; background-image: url(../img/play.png); opacity: 1; background-size: 20px auto; z-index: 2; border-radius: 50%;}
.related_video_item .item_icon::before{position: absolute; width: 100%; height: 100%; left: 0; top: 0; border-radius: 50%; content: ''; background: rgba(0, 0, 0, 0.4); z-index: 1;}

.related_video_item:hover .related_video_info .title{color: var(--commonColor); text-decoration: underline;}
.related_video_item:hover .related_video_info .brief{color: #333;}
.related_video_item:hover .item_icon{opacity: 1;}
.related_video_item:hover .item_icon::before{animation: pulsate 2s infinite;}


@media only screen and (max-width: 1300px) {
    .related_video_info .title{font-size: 19px;}
}
@media only screen and (max-width: 980px) {
	.related_video_inner .swiper-slide{width: 100%; margin-right: 16px;}
	.related_video_info{padding: 15px 0 0;}
	.related_video_info .title{font-size: 18px; max-height: unset; display: block; height: auto;}
}

@-webkit-keyframes pulsate{from{opacity: 1;transform: scale(1)}to{opacity: 0;transform: scale(1.4)}}
@keyframes pulsate {from{opacity: 1;transform: scale(1)}to{opacity: 0;transform: scale(1.4)}}


/* c_related_pro */
.c_related_pro{overflow: hidden;}
.related_pro_inner .swiper-slide{height: auto; width: calc((100% - 72px) / 4); margin-right: 24px;}

.related_pro_item{position: relative; height: 100%;}
.related_pro_item>a{padding: 20px 20px 24px; display: block; background: #fff; height: 100%;}
.related_pro_item .pro_pic{padding-bottom: 100%; background: #fff;}
.related_pro_item .title{margin: 16px 0 0; font-size: 20px; line-height: 1.3; overflow: hidden; font-family: 'Work Sans-Bold'; text-transform: uppercase; text-align: center;}
.related_pro_item:hover>a{background: var(--commonColor);}
.related_pro_item:hover .title{color: #fff;}

@media only screen and (max-width: 1200px) {
    .related_pro_item>a{padding: 16px 16px 20px;}
    .related_pro_item .title{font-size: 19px;}
}
@media only screen and (max-width: 980px) {
	.related_pro_inner .swiper-slide{width: 100%; margin-right: 16px;}
	.related_pro_item .title{height: auto; font-size: 18px; display: block;}
}


/* c_related_news */
.c_related_news{overflow: hidden;}
.related_news_inner .swiper-slide{width: calc((100% - 52px) / 3); margin-right: 26px; height: auto;}

.related_news_item{height: 100%; position: relative;}

.related_news_item .pic{padding-bottom: 70%;}

.related_news_info{padding: 16px 0 0;}
.related_news_info .date{color: #666; font-size: 20px;}
.related_news_info .title{font-family: 'Work Sans-Regular'; font-size: 20px; margin: 10px 0 0; line-height: 1.5; overflow: hidden; font-weight: 600;}

.related_news_item:hover .related_news_info .title{color: var(--commonColor); text-decoration: underline;}
.related_news_item:hover .related_news_info .brief{color: #333;}


@media only screen and (max-width: 1300px) {
    .related_news_info .date{font-size: 18px;}
    .related_news_info .title{font-size: 19px;}
}
@media only screen and (max-width: 980px) {
	.related_news_inner .swiper-slide{width: 100%; margin-right: 16px;}
	.related_news_info{padding: 15px 0 0;}
	.related_news_info .title{font-size: 18px; max-height: unset; display: block; height: auto;}
}

/* c_related_news */
.c_related_case{overflow: hidden;}
.related_case_inner .swiper-slide{width: calc((100% - 64px) / 3); margin-right: 32px; height: auto;}

.related_case_item{height: 100%; position: relative;}

.related_case_item .pic{padding-bottom: 70%;}

.related_case_info .title{font-family: 'Roboto-Bold'; font-size: 22px; margin: 20px 0 12px; line-height: 1.5; overflow: hidden; font-weight: 600; color: #020C1E;}
.related_case_info .brief{color: var(--txtColor); font-family: 'Roboto-Regular'; line-height: 28px; height: 84px;}

.related_case_item .item_btn {position: relative; display: inline-block; font-family: 'Roboto-Bold'; font-weight: bold; font-size: 18px; color: var(--commonColor); line-height: 38px; margin-top: 10px;}
.related_case_item .item_btn:after {content: '\f0da'; font-family: 'fontawesome'; margin-left: 10px;}
.related_case_item .item_btn:before {content: ''; position: absolute; bottom: 0; display: inline-block; width: 0; height: 1px; background: var(--commonColor); transition: width .5s ease-out;}
.related_case_item:hover .item_btn:before {width: 100%;}

.related_case_item:hover .related_case_info .title{color: var(--commonColor);}
.related_case_item:hover .related_case_info .brief{color: #555;}


@media only screen and (max-width: 1300px) {
    .related_case_info .date{font-size: 18px;}
    .related_case_info .title{font-size: 19px;}
}
@media only screen and (max-width: 980px) {
	.related_case_inner .swiper-slide{width: 100%; margin-right: 16px;}
	.related_case_info .title{font-size: 18px; max-height: unset; display: block; height: auto; margin: 14px 0 10px;}
    .related_case_item .item_btn{margin-top: 6px;}
}

/* c_related_app */
.c_related_app{overflow: hidden;}
.related_app_inner .swiper-slide{width: calc((100% - 52px) / 3); margin-right: 26px; height: auto; margin-bottom: 10px; overflow: unset;}
.swiper_related_app{padding: 0 10px;}

.related_app_item{height: 100%; position: relative; box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.1); border-radius: 8px;}
.related_app_item>a{height: 100%;}

.related_app_item .pic{padding-bottom: 70%; border-radius: 8px 8px 0 0;}

.related_app_info{padding: 16px; flex: 1;}
.related_app_info .title{font-family: 'Work Sans-Regular'; font-size: 20px; line-height: 1.4; overflow: hidden; font-weight: 600;}
.related_app_info .brief{color: #666; line-height: 28px; overflow: hidden; position: absolute; left: 0; width: 100%; bottom: 0;}

.related_app_item:hover .related_app_info .brief{color: #333;}
.related_app_item:hover{box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.3);}


@media only screen and (max-width: 980px) {
	.related_app_inner{margin-left: -10px; width: calc(100% + 20px);}
	.related_app_inner .swiper-slide{width: 100%; margin-right: 0;}
	.related_app_info{padding: 15px;}
	.related_app_info .title{font-size: 20px; max-height: unset; display: block; height: auto;}
}

.innerContent{color: var(--txtColor); line-height: 28px; font-family: 'Roboto-Regular'; text-transform: none;}