/* section01 */
#section01{ width: 100%; padding: 60px 0 100px; position: relative; justify-content: center;}
#section01 a{ display: block; width: 120px; height: 120px; text-align: center; margin: 0 30px;}
#section01 .circle{width: 100%; height: 100%; position: relative; border-radius: 50%; border: 1px solid rgba(170,170,170,.2);}
#section01 .circle .circle-inner{ width: 100px; height: 100px; line-height: 100px; border-radius: 50%; background-color: #f8f8f8; text-align: center; position: absolute; transition: .3s; display: flex; justify-content: center; align-items: center; left: 0; right: 0; top: 0; bottom: 0; margin: auto;}
#section01 .circle .normal{ display: block;}
#section01 .circle .hover{display: none;}
#section01 p{ font-size: 14px; padding-top: 20px;}
#section01 a:hover .circle{ border: 1px solid 1px solid rgba(18,61,109,.2); }
#section01 a:hover .circle .circle-inner{ background-color: #133e6e;}
#section01 a:hover .circle .normal{ display: none;}
#section01 a:hover .circle .hover{display: block;}
#section01 a:hover p{ color: #133e6e;}
#section01 a.active .circle{ border: 1px solid 1px solid rgba(18,61,109,.2); }
#section01 a.active .circle .circle-inner{ background-color: #133e6e;}
#section01 a.active .circle .normal{ display: none;}
#section01 a.active .circle .hover{display: block;}
#section01 a.active p{ color: #133e6e;}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
    #section01{ width: 100%; padding: 40px 0 10px; position: relative; justify-content: center;}
    #section01 a{ display: block; width: 110px; height: 110px; text-align: center; margin: 0 20px 55px;}
    #section01 .circle .circle-inner{ width: 90px; height: 90px; line-height: 90px; }
    #section01 .circle .normal{ display: block;}
    #section01 .circle .hover{display: none;}
    #section01 p{ font-size: 12px; padding-top: 10px;}
}



/* section02 */
#section02{ padding: 100px 0; width: 100%; overflow: hidden; font-size: 0; background-color: #f8f8f8;}
#section02 .wrap1620{ position: relative; text-align: left; align-items: flex-start; }
#section02 .all-full-swiper{ width: 50%; height: 456px;}
#section02 .text-wrap{ width: 50%; padding-left: 60px;}
#section02 .tit{ width: 100%; padding-bottom: 50px; border-bottom: 1px solid rgba(34,34,34,.2); position: relative;}
#section02 .tit h3{ font-size: 40px; padding-bottom: 10px;}
#section02 .tit p{ font-size: 16px; }
#section02 .tit:after{ content: ''; width: 68px; height: 1px; background-color: #222; bottom: -1px; left: 0; position: absolute;}
#section02 .content{ padding: 50px 0 70px; font-size: 13px; color: #777; line-height: 28px; word-break: keep-all;}
/* =================== 1660px =================== */
@media (max-width: 1660px) {
}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
    #section02{ padding: 60px 0;}
    #section02 .all-full-swiper{ width: 100%; height: 51.87vw; margin-bottom: 35px;}
    #section02 .text-wrap{ width: 100%; padding-left: 0;}
    #section02 .tit{ padding-bottom: 30px; }
    #section02 .tit h3{ font-size: 30px; padding-bottom: 10px;}
    #section02 .tit p{ font-size: 14px; }
    #section02 .tit:after{ width: 34px; }
    #section02 .content{ padding: 30px 0 50px; font-size: 12px; line-height: 22px; }
}


.all-swiper .all-btn-wrap{ position: relative; left: 0; right: unset; margin: unset; bottom: unset;}