/* featured projects */
#projects {margin-bottom:100px;}
#projects .main-container-kv{position: relative;margin:0 auto;width:100%;}
#projects .main-container-kv .banner{position: relative; width:100%;height: auto;}
#projects .main-container-kv .banner img{ position: absolute;width:100%;height: 100%;top: 0;left: 0;opacity: 1; object-fit: cover; object-position:center; }
#projects .main-container-kv .banner .bannerCaption{font-size: 12px; line-height: 1.2; background: #fff; color: #000; position: absolute; right: 0; bottom: 0;}
#projects .main-container-kv .banner .pc{display:block;}
#projects .main-container-kv .banner .mobi{display:none;}

#projects .main-container-kv .banner,
#projects .main-container-kv .swiperOut{position:relative;}
#projects .main-container-kv .swiper-container{overflow:hidden;}
#projects .main-container-kv .swiper-slide{position:relative}
#projects .main-container-kv .swiper-button{position:absolute;top:50%;border-color:#0d9860;}
#projects .main-container-kv .swiper-pagination {z-index: 1;}

#projects .main-container-kv .banner img {position: unset;  width: 100%;  height: auto;}
#projects .main-container-kv .banner .bannerCt {position: absolute; color: #fff;width:48%;height: 100%; top: 0; left: 0;background: linear-gradient(90deg, rgba(0, 0, 0, 0.8) 10%, rgba(0, 0, 0, 0) 100%);}
#projects .main-container-kv .banner .bannerCt .wrap-cont .content {position:absolute; max-width:1280px;color:#fff; box-sizing:border-box;bottom: 40px;width:80%;margin-left: 40px;background: none;display: block;}
#projects .main-container-kv .banner .bannerCt .wrap-cont .content .bTitle {color: #fff;font-size: 3.2rem;border-bottom:1px solid;padding-bottom:10px;font-family: 'Helvetica-Bold';}
#projects .main-container-kv .banner .bannerCt .wrap-cont .content .bTitle .bTitle2 {font-size: 2rem;font-family: 'Helvetica';line-height: 2.4rem;padding-top: 10px;}
#projects .main-container-kv .banner .bannerCt .wrap-cont .content .bNumber {color: #fff;font-size: 3.2rem;margin-top:10px;font-family: 'Helvetica-Bold';}
#projects .main-container-kv .banner .bannerCt .wrap-cont .content .bCopy{color: #fff;font-size: 1.8rem;margin-top:10px;margin-bottom:80px;line-height: 2.4rem;}

#projects .aiib-arrow-slide {display:inline-block;position:absolute; width: 30px;height:30px;top: 37%;background:transparent;text-indent:-9999px;border-top: 2px solid #8d1a1f;border-left:2px solid #8d1a1f;transition:all 250ms ease-in-out;text-decoration: none;  color: transparent;}
#projects .aiib-arrow-slide:hover {  border-width: 5px;}
#projects .aiib-arrow-slide.next { right: -20px; transform: rotate(135deg);z-index: 1;}
#projects .aiib-arrow-slide.prev { left: -20px; transform: rotate(-45deg);z-index: 1;}

#projects a.btn-2021-white:hover {background-color: #0d9860;color: #fff;}
#projects a.btn-2021-white:hover span.btn-2021-white-arrow{background: url(/cms/en/.content/home-2021/img/_common/icon_arrow-right-white.svg) right bottom no-repeat;}

@media only screen and (max-width: 1280px){
	 #projects .aiib-arrow-slide.prev {left: 10px;}
	 #projects .aiib-arrow-slide.next {right: 10px;}
}

@media only screen and (max-width: 992px){
	 #projects .main-container-kv .swiper-button{top:40%;}
}

@media only screen and (max-width: 768px){ 
	#projects .main-container-kv .content{}
	#projects .main-container-kv .content .headline{font-size:34px;width:100%;}
	#projects .main-container-kv .banner .bannerCt {width: 100%;}
	#projects .main-container-kv .banner .bannerCt .wrap-cont .content {top: 20px;width: 90%;}
	#projects .main-container-kv .banner .bannerCt .wrap-cont .content .bCopy {margin-bottom: 0;}
	#projects .main-container-kv .banner .bannerCt .wrap-cont .content .bTitle .bTitle2{font-size: 1.8rem;}
	#projects .main-container-kv .banner .bannerCt .wrap-cont .content .bTitle, #projects .main-container-kv .banner .bannerCt .wrap-cont .content .bNumber {font-size: 2.6rem;}
	#projects .aiib-arrow-slide.prev {left: 10px; border-color: #fff;}
	#projects .aiib-arrow-slide.next {right: 10px; border-color: #fff;}
}

@media only screen and (max-width: 576px){
	#projects .main-container-kv .banner .pc{display:none;}
	#projects .main-container-kv .banner .mobi{display:block;}
	#projects .main-container-kv .banner .bannerCt {width: 100%;background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 20%, rgba(0, 0, 0, 0) 100%);}
	#projects .main-container-kv .banner .bannerCt .wrap-cont .content {top: 50px;}
	#projects .main-container-kv .banner .bannerCt .wrap-cont .content .bCopy {font-size: 1.6rem;}
	#projects .slideOut .swiper-button { display: block!important;}
}


#projects .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{width: 16px; height: 16px; background: none; border: 3px solid #fff; border-color: rgba(255,255,255,0.75); border-radius: 50%; box-shadow: rgb(0 0 0 / 40%) 0px 4px 12px; margin-right: 20px;}
#projects .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet:hover, 
#projects .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet-active{border-color: #fff;opacity: 1;}


@media only screen and (max-width: 768px){
	#projects .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {margin-right: 12px;}
	#projects :root {--swiper-theme-color: #8d1a1f;	}
	#projects .swiper-button:focus-visible{ outline: none;}
}

#projects .relatedTopicsWrap {margin: 30px 0 50px 0;padding: 0;}
#projects .relatedTopicsWrap .relatedTopics2{display: flex;justify-content: space-between;}
@media only screen and (max-width: 768px){
	#projects .relatedTopicsWrap .relatedTopics2 {flex-direction: column;}
	#projects .relatedTopicsWrap .relatedTopics2 .btn-2021-red {width: 49%!important;}
	#projects .relatedTopicsWrap .relatedTopics2 .btn-2021-red.long-text {line-height:26px;}
}

@media only screen and (max-width: 576px){
	#projects .relatedTopicsWrap .relatedTopics2 .btn-2021-red {width: 80%!important;}
}