/* s_about_box */
.s_about_box{overflow: hidden;}
.about_top{padding-top: 65px;}
.about_top .about_left{width: 45%; position: relative;}
.about_top .about_left .pic{border-radius: 12px; padding-bottom: 78.5%;}
.about_top .about_left .year_div{background: var(--commonColor); color: #fff; border-radius: 50%; width: 200px; height: 200px; text-align: center; position: absolute; left: -65px; top: -65px; display: flex; flex-direction: column; justify-content: center;}
.about_top .about_left .year_div .year{font-size: 64px; line-height: 0.9; font-family: 'DIN-Medium'; font-weight: bold;}
.about_top .about_left .year_div .title{font-size: 20px; font-family: 'Archivo Black-Regular'; margin: 6px 0; line-height: 28px; padding: 0 10px;}
.about_top .web_th{width: 51%;}
.about_top .about_left:hover .year_div{animation: swing 0.5s;}

.about_content{margin-top: 2.5%; color: #666; line-height: 28px;}
.about_content *{font-family: inherit !important;}

.contact_div{margin-top: 4%;}
.contact_div .item_cont{width: 49%; margin-right: 2%; align-items: center;}
.contact_div .item_cont:nth-child(2n){margin-right: 0;}
.item_cont .icon{width: 72px; height: 72px; border-radius: 50%; background-color: var(--commonColor); background-repeat: no-repeat; background-position: center; background-size: 50% auto; margin-right: 12px;}
.item_cont .icon_phone{background-image: url(../img/phone.png);}
.item_cont .icon_email{background-image: url(../img/email1.png);}
.item_cont .cont_info{flex: 1;}
.item_cont .cont_info p.th{font-weight: bold; margin-bottom: 5px;}
.item_cont:hover .icon{animation: swing 0.5s;}
.item_cont .cont_info a:hover{text-decoration: underline;}

@media only screen and (max-width: 1450px) {
	.about_top .about_left .year_div .year{font-size: 56px;}
	.about_top .about_left .year_div .title{font-size: 18px;}
}
@media only screen and (max-width: 1300px) {
	.about_top{padding-top: 60px;}
	.about_top .about_left .year_div{width: 170px; height: 170px; left: -60px; top: -60px;}
	.about_top .about_left .year_div .year{font-size: 48px;}
	.item_cont .icon{width: 60px; height: 60px;}
}
@media only screen and (max-width: 1024px) {
	.about_top .about_left .year_div{left: -30px;}
}
@media only screen and (max-width: 980px) {
	.about_top{flex-direction: column;}
	.about_top{padding-top: 30px;}
	.about_top .about_left{width: 100%;}
	.about_top .about_left .year_div{width: 150px; height: 150px; left: -15px; top: -30px;}
	.about_top .about_left .year_div .year{font-size: 36px;}
	.about_top .about_left .year_div .title{font-size: 16px; line-height: 26px;}
	.about_top .web_th{width: 100%; margin-top: 20px;}
	.contact_div{margin-top: 0;}
	.contact_div .item_cont{width: 100%; margin-right: 0; margin-top: 20px;}

	.about_content{margin-top: 20px;}
}


/* s_about_service */
.s_about_service .service_ul{margin-top: 2.4%;}
.service_ul .service_item{width: 31.5%; margin-right: 2.75%; padding: 4%; border-radius: 12px;}
.service_ul .service_item:nth-child(3n){margin-right: 0;}
.service_ul .service_item:nth-child(n+4){margin-top: 2.75%;}
.service_ul .service_item{text-align: center;}
.service_ul .service_item img{display: block; height: 110px; width: auto; margin: 0 auto;}
.service_ul .service_item .title{font-weight: bold; font-size: 24px; text-transform: uppercase; line-height: 1.3; margin: 20px 0 10px;}
.service_ul .service_item .brief{color: #777; line-height: 28px;}
.service_ul .service_item:hover{box-shadow: 0px 0px 42px 12px rgba(0, 0, 0, 0.12);}
.service_ul .service_item:hover img{animation: swing 0.5s;}
@media only screen and (max-width: 1450px) {
	.service_ul .service_item{padding: 4% 3.4%;}
	.service_ul .service_item img{height: 96px;}
	.service_ul .service_item .title{font-size: 22px;}
}
@media only screen and (max-width: 1300px) {
	.service_ul .service_item{padding: 30px 24px;}
	.service_ul .service_item img{height: 86px;}
	.service_ul .service_item .title{font-size: 20px; min-height: 2.6em;}
}
@media only screen and (max-width: 980px) {
	.s_about_service .service_ul{margin-top: 20px;}
	.service_ul .service_item{padding: 22px 18px; width: 100%; margin-right: 0; box-shadow: 0px 0px 12px 6px rgba(0, 0, 0, 0.12);}
	.service_ul .service_item:nth-child(n+2){margin-top: 20px;}
	.service_ul .service_item img{height: 72px;}
	.service_ul .service_item .title{font-size: 18px; min-height: unset;}
}

/* about_history */
.history_title{background: url(../img/bg_th.png) no-repeat center bottom; height: 90px; padding-top: 28px; background-size: auto 100%; line-height: 62px; font-family: 'Archivo Black-Regular'; font-size: 32px; text-transform: uppercase; text-align: center; color: #fff;}

.history_inner{margin-top: 4%;}
.history_item{position: relative;}
.history_item::before{position: absolute; content: ''; background: var(--commonColor); width: 5px; top: 50px; left: 50%; z-index: 0; transform: translateX(-50%); bottom: 10px;}
.history_item:first-child::before{border-radius: 5px 5px 0 0;}
.history_item .year{display: block; width: 120px; border-radius: 6px; height: 38px; line-height: 38px; background: var(--commonColor); color: #fff; font-size: 20px; font-weight: bold; text-align: center; margin: 0 auto;}
.history_info{padding: 4% 0 5%;}
.history_item:last-child .history_info{padding-bottom: 0;}
.history_info .info_item{width: calc(50% + 15px); position: relative; padding-right: 62px; height: 100%;}
.history_info .info_item .info{border: 1px solid var(--commonColor); padding: 6% 5%;}
.history_info .info_item .icon{width: 34px; height: 34px; border-top: 1px solid var(--commonColor); border-right: 1px solid var(--commonColor); position: absolute; right: 45px; top: 50%; margin-top: -17px; background: #fff; transform: rotate(45deg);}
.history_info .info_item .cycle{width: 30px; height: 30px; position: absolute; top: 50%; margin-top: -15px; background: #FFF2F2; border-radius: 50%; right: 0;}
.history_info .info_item .cycle::before{display: block; content: ''; width: 14px; height: 14px; border: 4px solid var(--commonColor); border-radius: 50%; background: #fff; margin: 4px;}
.history_info .info_item .title{font-family: 'Archivo Black-Regular'; font-size: 36px; line-height: 1.3;}
.history_info .info_item .brief{color: #777; line-height: 28px; margin-top: 10px;}

.history_info .pic_item{width: calc(50% - 42px); margin-top: 9.5%;}
.history_info .pic_item .date{background: #B1B0AC; border-radius: 2px; position: relative; display: inline-block; line-height: 36px; padding: 0 20px; font-weight: bold; color: #fff; margin-left: 5px;}
.history_info .pic_item .date::before{content: ''; width: 10px; height: 10px; background: #B1B0AC; position: absolute; left: -5px; top: 50%; margin-top: -5px;  transform: rotate(45deg);}
.pic_item .images_list{margin-top: 4%; margin-left: 5px;}
.pic_item .images_list li{width: 23%; margin-right: calc(8% / 3);}
.pic_item .images_list li:nth-child(4n){margin-right: 0;}
.pic_item .images_list li:nth-child(n+5){margin-top: 2.6%;}
.pic_item .images_list li .pic{padding-bottom: 100%;}

.pic_item .single_pic{margin-top: 4%; margin-right: 5px;}
.pic_item .single_pic .pic{padding-bottom: 60%;}

.history_item:nth-child(2n) .history_info{flex-direction: row-reverse;}
.history_item:nth-child(2n) .history_info .info_item{padding-right: 0; padding-left: 62px;}
.history_item:nth-child(2n) .history_info .info_item .icon{right: unset; left: 45px; border: none; border-left: 1px solid var(--commonColor); border-bottom: 1px solid var(--commonColor);}
.history_item:nth-child(2n) .history_info .info_item .cycle{right: unset; left: 0;}
.history_item:nth-child(2n) .pic_item{text-align: right;}
.history_item:nth-child(2n) .history_info .pic_item .date{margin-left: 0; margin-right: 5px;}
.history_item:nth-child(2n) .history_info .pic_item .date::before{left: unset; right: -5px;}
.history_item:nth-child(2n) {}

@media only screen and (max-width: 1450px) {
	.history_title{font-size: 30px;}
	.history_info .info_item .title{font-size: 32px;}
}
@media only screen and (max-width: 1350px) {
	.history_info .info_item .title{font-size: 30px;}
	.history_title, .history_inner{zoom: 0.9;}
}
@media only screen and (max-width: 980px) {
	.history_title, .history_inner{zoom: 1;}
	.history_title{background-size: 100% auto; max-width: 360px; height: 56px; line-height: 34px; font-size: 24px; padding-top: 20px; margin: 0 auto;}
	.history_item::before{display: none;}
	.history_item:nth-child(n+2){margin-top: 20px;}
	.history_info{flex-direction: column !important; padding: 15px 0;}
	.history_info .info_item{order: 1 !important; width: 100%; padding: 0 !important;}
	.history_info .info_item .icon,
	.history_info .info_item .cycle{display: none;}
	.history_info .info_item .title{font-size: 24px;}
	.history_info .info_item .info{padding: 20px 16px; padding: 0; border: 0;}
	.history_info .pic_item{width: 100%; order: 2 !important; margin: 18px 0 0 !important;}
	.history_info .pic_item .date{margin-left: 0;}
	.history_info .pic_item .date::before{display: none;}
	.pic_item .images_list{margin-top: 20px; margin-left: 0;}
	.pic_item .single_pic{margin-top: 20px; margin-right: 0;}
	.history_item:nth-child(2n) .pic_item{text-align: left;}

	.pic_item .images_list li{width: 48.5%; margin-right: 3%;}
	.pic_item .images_list li:nth-child(2n){margin-right: 0;}
	.pic_item .images_list li:nth-child(n+3){margin-top: 3%;}
}


/* s_about_map */
.s_about_map .map_inner{margin-top: 2.4%;}
.map_left{width: 35%; position: relative; z-index: 1;}
.map_left .title{font-family: 'Archivo Black-Regular'; font-size: 40px;}
.map_left .brief{font-size: 20px; margin-top: 15px; line-height: 30px; color: #666;}
.map_right{width: 62%; position: relative;}
.map_right .map_pic{display: block; width: 100%; height: auto;}

.point, .point::before, .point::after {
	display: block; position: absolute; width: 6px; height: 6px; border-radius: 50%; content: '';
}

@keyframes scale {
	0% {transform: scale(1); opacity: .9;}
	100% {transform: scale(5); opacity: 0;}
}
@keyframes scale2 {
	0% {transform: scale(1); opacity: .9;}
	100% {transform: scale(10); opacity: 0;}
}

.point, .point::before, .point::after {background: var(--commonColor); cursor: pointer;}
.point:hover::before {animation: scale 2s infinite;}
.point:hover::after {animation: scale2 2s infinite;}
.point p {
	font-family: 'MyriadPro-Regular'; font-weight: 400; font-size: 20px;
	color: var(--commonColor); padding-top: 8px; line-height: 26px; position: absolute;
	left: 50%; transform: translateX(-50%); opacity: 0;
	transition: all 0.3s ease-in-out; white-space: nowrap; cursor: pointer;
	pointer-events: none;
	text-shadow: 0 0 4px rgba(255, 255, 255, 1);
}
.point:hover p {opacity: 1; pointer-events: auto;}


@media only screen and (max-width: 1450px) {
	.map_left .title{font-size: 36px;}
	.map_left .brief{font-size: 18px;}
}
@media only screen and (max-width: 1350px) {
	.map_left .title{font-size: 32px;}
	.map_left .brief{font-size: 16px;}
}
@media only screen and (max-width: 1200px) {
	.map_left .title{font-size: 30px;}
}
@media only screen and (max-width: 980px) {
	.s_about_map .map_inner{margin-top: 20px; flex-direction: column;}
	.map_left .title{font-size: 24px;}
	.map_left{width: 100%; text-align: left;}
	.map_inner .web_th .brief{margin: 20px 0 0; max-height: unset;}
	.map_inner .more_btn{margin: 6px 0 0;}
	.map_right{width: 100%; margin: 20px 0 0; overflow: hidden;}
}


/* s_about_form */
.s_about_form{position: relative; padding: 7% 0 5%; margin-top: 3.5%;}
.s_about_form::before{position: absolute; top: 0; left: 0; bottom: 0; width: 57%; background: #F3F3F3; content: ''; z-index: 0;}

.about_form{}
.about_form .web_th{width: 40%;}
.about_form .web_th .title{font-size: 45px; color: #333; text-transform: uppercase;}
.about_form .web_th .brief{font-family: 'MicrosoftPhagsPa'; margin: 5px 0 25px;}
.about_form .web_th .email a{color: #14457B; font-size: 20px; font-family: 'MyriadPro-Semibold'; line-height: 30px; background: url(../img/icon14.png) no-repeat left center; padding-left: 40px; display: inline-block; height: 30px;}
.form_div{width: 50%;}
.about_form .web_th .email a:hover{color: #2C6DF5; background-image: url(../img/icon14_1.png);}

.form_input input, .form_input textarea{height: 48px; width: 100%; background: #D8D8D8; border: 0; font-size: 16px; margin-bottom: 18px; padding: 0 15px;}
.form_input textarea{height: 144px; line-height: 28px; padding: 10px 15px; margin-bottom: 14px;}

.form_btn .submit_btn{font-family: 'Poppins-Medium'; color: #fefefe; background: #14457B; border: 0; margin: 0; height: 44px; width: 166px; font-size: 16px;}
.form_btn .submit_btn:hover{background: #2C6DF5;}

@media only screen and (max-width: 1450px) {
	.about_form .web_th .title{font-size: 40px;}
}
@media only screen and (max-width: 1350px) {
	.about_form .web_th .title{font-size: 35px;}
}
@media only screen and (max-width: 1200px) {
	.about_form .web_th .title{font-size: 30px;}
	.s_about_form{padding: 6% 0 5%;}
}
@media only screen and (max-width: 950px) {
	.s_about_form{padding: 30px 0;}
	.s_about_form::before{width: 100%;}
	.about_form .web_th .title{font-size: 24px;}
	.about_form{flex-direction: column;}
	.about_form .web_th{width: 100%;}
	.about_form .web_th .brief{margin-bottom: 15px;}
	.form_div{width: 100%; margin-top: 20px;}
	.form_input input, .form_input textarea{margin-bottom: 15px;}
}