@charset "UTF-8";

/*area_banner*/
.area_banner {  }
.area_banner { position: relative; }
.area_banner img { width: 100%; }
.area_banner .swiper-pagination { bottom: 40px; height: 6px; }
.area_banner .swiper-pagination .swiper-pagination-bullet { width: 48px; height: 6px; margin: 0 15px; vertical-align: top; background: #fff; border-radius: 0; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3); }

.bannerBox { position: relative; }
.bannerBox img { position: relative; transform: translate(0, 0); }
.bannerText { position: absolute; top: 260px; left: 0; width: 100%; text-align: center; color: #fff; }
.bannerText h2 { margin: 20px 0; font-size: 60px; line-height: 1.2em; }
.bannerText p { font-size: 30px; color: #ccc; }

/*介紹*/
.introBox { display: flex; flex-direction:row-reverse; justify-content: space-between; align-items: center; margin-bottom: 64px; padding-top: 64px; }
.introBox .bn { flex: 1 0 500px; max-width: calc(50% - 40px); }
.introBox .bn img { max-width: 100%; }
.introBox .textbox { flex: 2 1 auto; margin-right: 80px; }
.introBox .textbox p { margin-bottom: 20px; font-size: 24px; line-height: 36px; }
.introBox h2 { margin-bottom: 30px; font-size: 64px; line-height: 1em; font-weight: 500; color: #1e2f54; }
.introBox h3 { margin-bottom: 32px; font-size: 24px; line-height: 1.2em; }
.introBox .textbox .num {
  margin-bottom: 30px;
  font-family: "Roboto";
  font-size: 48px;
  font-weight: 700;
  color: #f5c60b;
}
/*right*/
.introBox.right { flex-direction:row; justify-content: flex-start; }
.introBox.right .bn { margin-right: 20px; }
.introBox.right .textbox { margin: 0 0 0 20px; }

/*分享
.area_review { position: relative; margin-bottom: 64px; }
.area_review .title { display: flex; flex-direction: column; text-align: center; margin: 0 auto 50px; }
.area_review .title span { align-self:center; display: block; width: 5.5em; margin: 0 0 20px; padding-top: 40px; font-size: 36px; line-height: 1.2em; font-weight: 300; color: #898989; border-top: solid 1px #e5e5e5; }
.area_review a.btn { align-self:center; display: block; width: 150px; line-height: 36px; color: #fff; background: #434343; border-radius: 18px; transition: 0.2s; }
.area_review a.btn:hover { background: #666; }
.area_review .swiper-wrapper { display: flex; justify-content: space-between; }
.area_review .swiper-button-prev ,
.area_review .swiper-button-next { display: none; }
.reviewBox { flex: 0 1 auto; width: auto; padding: 0 20px; }
.reviewBox:nth-child(1) { padding-left: 0; }
.reviewBox:nth-last-child(1) { padding-right: 0; }
.reviewBox .reviewImg { width: 240px; }
.reviewBox .reviewImg img { width: 100%; }*/


@media screen and (max-width: 1200px) {
	

}

@media screen and (max-width: 1024px) {
	/*分享*/
	.area_review .swiper-wrapper { justify-content: flex-start; }
	.area_review .swiper-button-prev ,
	.area_review .swiper-button-next { display: block; top: calc(50% + 40px); width: 20px; height: 40px;  }
	.area_review .swiper-button-prev { left: 10px; background: url(../images/btn_prev_01.png) center no-repeat; background-size: 100% auto; }
	.area_review .swiper-button-next { right: 10px; background: url(../images/btn_next_01.png) center no-repeat; background-size: 100% auto; }
	.reviewList { margin: 0 30px; }
	.reviewBox { flex: 0 0 auto; width: 100%; padding: 0; }
	.reviewBox .reviewImg { width: auto; }
	
}

@media screen and (max-width: 800px) {

	/*area_banner*/
	.area_banner { margin-bottom: 40px; }
	.area_banner .swiper-pagination { bottom: 20px; }
	.area_banner .swiper-pagination .swiper-pagination-bullet { width: 32px; margin: 0 10px; }

	/*介紹*/
	.introBox { display: block; margin-bottom: 40px; padding: 0; }
	.introBox .bn,
	.introBox.right .bn { width: calc(100% - 40px); max-width: 420px; margin: 0 auto 20px; text-align: center; }
	.introBox .textbox,
	.introBox.right .textbox { margin: 0; text-align: center; }
	.introBox .textbox img ,
	.introBox.right .textbox img { max-width: 40%; }
	.introBox .textbox p { font-size: 16px; font-weight: 300; line-height: 24px; }
	.introBox h2 { margin-bottom: 20px; font-size: 32px; }
  .introBox h3 { margin-bottom: 0; font-size: 16px; font-weight: 300; }
  .introBox .textbox .num {
    margin-bottom: 10px;
    text-align: center;
    font-size: 30px;
  }

	/*分享*/
	.area_review .title { display: flex; flex-direction: row; justify-content: space-between; text-align: center; margin: 0; padding: 30px 10px; border-top: solid 1px #e5e5e5; }
	.area_review .title span { margin: 0; padding: 0; font-size: 24px; border: 0; }
	.area_review a.btn { width: 100px; line-height: 30px; border-radius: 8px; }
}

@media screen and (max-width: 500px) {

	/*介紹*/
	.introBox.right .bn { max-width: 320px; }
	.introBox .textbox,
	.introBox.right .textbox { margin: 0; text-align: left; }
	.introBox h2 { text-align: center; }

	/*分享*/
	.area_review .swiper-button-prev ,
	.area_review .swiper-button-next { width: 15px; height: 30px; }
}