.f1{ padding: 80px 0 65px 0; background-color: #fff;}
.f1 .aboutimg{ flex: 1; position: relative;margin-top:68px;}
.f1 .aboutimg .bigimg { position: absolute; top: 0; right: 0; }
.f1 .aboutimg .bigimg img{ position: relative; width: 485px; height: 485px; border-radius: 50%; z-index: 1;}
.f1 .aboutimg .bigimg::before{ display: block; content: ""; width: 485px; height: 485px; border: #ccc dashed 3px; border-radius: 50%;  position: absolute; top: 0; right: 80px; z-index: 1; }

.f1 .smallimg { position: relative; z-index: 3; display: grid; gap: 50px; grid-template-columns: repeat(1,1fr); margin-top: -20px; margin-left: 50px;}
.f1 .smallimg a{display: block;height: 140px;width: 140px;border-radius: 50%;overflow: hidden;position: relative;background-color: var(--action-color);display: flex;justify-content: center;align-items: center;}
.f1 .smallimg a:nth-child(2){ margin-left: -50px;}
.f1 .smallimg a:hover{ background-color: var(--primary-color);}

.f1 .abouttext{ width: 526px; margin-right: 30px;}
.f1 .abouttext .hd{ margin-bottom: 10px; padding-top: 0;}
.f1 .abouttext .bd{ font-size: 23px; line-height: 1.5;}

.f1 .aboutnumb{ background-color: var(--primary-color); color: #fff; padding:5px 0; text-align: center; margin-top: 10px;}
.f1 .aboutnumb li{ flex: 1; border-right: #fff solid 1px; line-height: 1; padding: 10px 0;}
.f1 .aboutnumb li:last-child{ border-right: none;}
.f1 .aboutnumb li b{ font-size: 58px; font-weight: 700;}
.f1 .aboutnumb li i{font-size: 30px; }
.f1 .aboutnumb li p{ font-size: 30px;}

.f2{ position: relative; padding: 55px 0;}
.f2 .bd{ padding-top:50px;}
.f2 .iside{ display: flex;flex-direction: column; width: 225px;height: 553px;background: var(--primary-color);margin-right: 50px;}
.f2 .iside .iside_hd{height: 78px;border-bottom: #fff solid 1px;color: #fff;font-size: 37px;text-align: center;margin: 0 5px;line-height: 78px;}
.f2 .iside .tit span{ font-size: 61px;}
.f2 .iside .iside_hd .en{ left: 10px; bottom: 5px; font-size: 42px; color: #fff;font-weight:400;}
.f2 .iside .iside_ft{ height: 95px; color: #fff; text-align: center; padding: 10px 0; margin: 0 5px; border-top: #fff solid 1px;}
.f2 .iside .iside_bd{ padding: 10px 0; flex:1;}

.f2 .iside li{font-size: 25px;}
.f2 .iside li a{display: block;color: #fff;text-align: center;height: 45px;line-height: 45px;margin: 0 -5px;}
.f2 .iside li a:hover{ background: var(--action-color); box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.54);}

.f2 .iside .iside_ft .tel .txt{ font-size: 20px;}
.f2 .iside .iside_ft .tel .num{ font-size: 29px; font-weight: 500; line-height: 1.2;}

.f2 .list{ gap: 50px 45px;}
.f2 .list li{}
.f2 .list li a{ position: relative; display: block; border:var(--primary-color) solid 1px; }
.f2 .list li a .img{ border: var(--primary-color) solid 2px;}
.f2 .list li a .img img{ aspect-ratio: 281/241; object-fit: cover;}
.f2 .list li a .title{position: absolute;left: 25px;right: 25px;bottom: -20px;background: var(--primary-color);color: #fff;font-size: 18px;text-align: center;height: 40px;line-height: 40px;padding: 0 10px;}
.f2 .list li a:hover .title{background-color: var(--action-color);}

.f3 .hd{ padding-top: 10px;height: 198px;background:url(../image/hd_bd.jpg) no-repeat center center; background-size: 100% 100%;;}
.f3 .bd{ padding-top: 50px;}
.f3 .whybox{ flex: 1;}
.f3 .whybox{ padding-top: 26px;}
.f3 .whybox li{position: relative;height: 155px;border: var(--primary-color) solid 2px;padding: 50px;margin-bottom:90px;display: flex;align-items: center;}
.f3 .whybox li .tit{ position: absolute; left: -26px; top: -26px;  display: flex; background: #fff;}
.f3 .whybox li .tit i{width: 52px;height: 52px;background: var(--action-color);color: #fff;font-size: 40px;text-align: center;line-height: 52px;}
.f3 .whybox li .tit .txt{flex: 1;line-height: 1;padding: 0 10px;}
.f3 .whybox li .tit .cn{ font-size: 34px;}
.f3 .whybox li .tit .en{ font-size: 16px;}
.f3 .whybox li .desc{font-size: 25px;line-height: 1.2;}

.f4{ padding: 40px 0 90px 0;}
.f4 .bd{ height: 335px; padding: 55px 0 0 0;}
.f4 .bd li{ flex: 1; position: relative; margin-left: -66px;}
.f4 .bd li a{ position: absolute; left: 0; display: block;}
.f4 .bd li .img img{ max-width: 227px;}
.f4 .bd li:nth-child(2n) a{ top: 110px;}
.f4 .bd li:first-child{ margin-left: 0;}

.f5 .bd{ padding: 55px 0 0 0; position: relative;}
.f5 .bd ul{ margin: 30px 0;}
.f5 .bd li { padding: 10px;  background-color:var(--primary-color); }
.f5 .bd li a{ display: block; height: 100%; }
.f5 .bd li .img{}
.f5 .bd li .img img{ width: 100%; height: 100%;}
.f5 .bd li .title{ margin-bottom: 30px; font-size: 23px;color:#fff; text-align: center;}
.f5 .bd li .more{ position: absolute; left: 50%; bottom: -20px; width: 160px; margin-left: -80px; text-align: center; font-size: 20px; background-color: var(--action-color); color: #fff; padding: 4px 0;}
.f5 .bd li a:hover .more{ background-color: var(--primary-color); color: #fff;}

.f5 .bd .btn{ position: absolute;}
.f5 .bd  .btn{display: block;width: 35px;height: 35px;position: absolute;top: 50%;margin-top: -16px;z-index: 99;cursor: pointer;font-size: 32px;font-family: sans-serif;}
.f5 .bd  .cb-next{ right: -45px;  background: var(--primary-color); }
.f5 .bd  .cb-next::after{content: ' » ';color:#fff;vertical-align: middle;margin-top: -6px;display: block;}
.f5 .bd  .cb-prev{ left: -45px; background: var(--primary-color); }
.f5 .bd  .cb-prev::after{  content: ' « '; color:#fff;vertical-align: middle;margin-top: -6px;display: block;}

.f6{ padding: 50px 0; background-color: #f3f9fd;}
.f6 .hd{ display: flex; text-align: center;justify-content: center;}
.f6 .hd .en{ font-size: 60px;}
.f6 .bd ul{ margin: 60px 0;}
.f6 .bd li img{ aspect-ratio: 276 / 370; object-fit: contain;}
.f6 .bd .btns{ position:relative;height: 50px;    width: 230px;    margin: 0 auto;}

.f7{ padding: 70px 0;}
.f7 .bd{ padding: 50px 0 0 0;}
.f7 .bd li .img{ display: flex; height: 175px;}
.f7 .bd li .img .time{width: 175px;background: var(--primary-color);color: #fff;text-align: center;display: flex;flex-direction: column;justify-content: center;align-items: center;}
.f7 .bd li .img img{ flex: 1; height: 175px; object-fit: cover;}

/* .f7 .bd .list li a i{ font-size: 16px;} */

.commlist{ position: relative; width: 515px; height: 572px; background-color: #ececec; margin-bottom: 30px;}
.commlist li{ padding: 45px 30px;}
.commlist li .img{ position: relative; width:100%; height: 280px;}
.commlist li .img img{ width: 100%; height: 100%; object-fit: cover;}
.commlist li .img i{ position: absolute; left: 0; bottom: 0; font-size: 25px; color: #fff; padding: 10px; background-color: var(--primary-color);} 
.commlist li .title{ font-size: 56px; color: var(--primary-color); line-height: 1.5;}
.commlist li .desc{ margin: 10px 0; font-size: 25px; color:#111; line-height: 1.2; height: 80px; overflow: hidden;}
.commlist li .more span{ display: inline-block; padding: 10px 40px; background-color: var(--primary-color); color: #fff; font-size: 25px; line-height: 1.2;}
.commlist .btn{ display: block; width: 43px; height: 49px; position: absolute;top: 32%; margin-top: -30px; z-index: 99; cursor: pointer;font-size: 50px;
    font-family: sans-serif;}
.commlist .snext{ right: 30px;  background: rgba(255,255,255,0.3) url(../image/icon-n2.png) no-repeat center center; }
.commlist .snext::after{  content: ' » '; color: #fff;}
.commlist .sprev{ left: 30px; background: rgba(255,255,255,.3) url(../image/icon-n1.png) no-repeat center center; }
.commlist .sprev::after{  content: ' « '; color: #fff;}

.glist ul{gap: 30px 30px;}
.glist>div{height: 482px;}
.glist li{ }
.glist li a{ }
.glist li .time{ text-align: center; font-size: 106px; line-height: 1; border-right: #53534e solid 1px; }
.glist li .time i{ display: block; font-size: 33px;}
.glist li .title{ font-size: 26px;}
.glist li .desc{ font-size: 18px; line-height: 1.2; margin: 10px 0;}
.glist li a:hover{ color: var(--primary-color);}
.glist li a:hover .img{box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.68);}
.glist li a:hover .img .time{ background: var(--action-color);}
.glist .btn{ position: absolute; left: 0;  width: 100%; height: 20px; background-color: #f2f2f1; text-align: center;display: flex;align-items: center;justify-content: center;}
.glist .sprev2{ top: 0;}
.glist .sprev2 img{ transform: rotate(180deg);}
.glist .snext2{ bottom: 0;}
.glist .btn:hover{background-color: var(--primary-color);}
.glist .btn:hover img{ filter: invert(1);}