.f1{ padding: 80px 0 165px 0; background-color: #eee;}
.f1 .hd{}
.f1 .hd .tit{ color: #fff;  line-height: 1;}
.f1 .hd .tit .cn{ font-size: 50px; font-weight: bold;}
.f1 .hd .tit .en{ font-size: 25px;}
.f1 .aboutimg{ width: 50%;}
.f1 .aboutimg img{ max-width: none;}
.f1 .abouttext{ height: 453px; background: url(../image/about-bg.png) no-repeat center center; background-size: cover; padding: 30px 45px;box-shadow: 8.302px 7.217px 15.68px 0.32px rgba(0, 0, 0, 0.36);}
.f1 .abouttext .bd{ padding: 20px 0; font-size: 23px; line-height: 1.5;}
.f1 .abouttext .more{ display: block; width: 175px; height: 40px; line-height: 40px; text-align: center; font-size: 21px; color: #fff; background: var(--primary-color); margin-top: 20px;}
.f1 .iabout{display: flex;align-items:center;}

.f1 .icompany{ height: 404px; margin-top: 60px; background: url(../image/f2-bg.png) no-repeat center center; background-size: cover; padding: 30px 60px; text-align: center;box-shadow: 8.302px 7.217px 15.68px 0.32px rgba(0, 0, 0, 0.36);}
.f1 .icompany .bd{ padding: 20px 0; font-size: 23px; line-height: 1.5;}
.f1 .icompany .ft{ display: flex;justify-content: space-around;}
.f1 .icompany .ft a{ position: relative; }
.f1 .icompany .ft a img{ position: relative; z-index: 1;box-shadow: 5px 5px 15.68px 0.32px rgba(0, 0, 0, 0.36);}
.f1 .icompany .ft a::before{ position: absolute; z-index: 0; width: 100%; height: 100%; left: 15px; top: 15px; background: var(--primary-color); content: ' '; box-shadow: 5px 5px 10px 0.32px rgba(0, 0, 0, 0.36);}

.f2 .bd{ padding: 115px 0 50px 0;}
.f2 .bd ul{ display: flex; flex-wrap: wrap; justify-content: space-between;}
.f2 .bd li{position: relative;width: 509px;height: 200px;margin-left:50px; margin-bottom:110px; padding: 15px 20px 20px 45px;background: url(../image/f2-item-bg.png);border-radius: 0 0 50px 0;box-shadow: 3px 2px 5px 0.12px rgba(0, 0, 0, 0.36);color: #fff;}
.f2 .bd li .tit{display: flex;align-items: center;font-size: 40px;padding-left:20px;}
.f2 .bd li .tit img{ margin-right: 5px;}
.f2 .bd li .numb{position: absolute;left: -55px;top: -55px;width: 96px;height: 96px;background: var(--primary-color);color: #fff;font-size: 58px;font-weight: bold;border-radius: 30px 0 0 0;box-shadow: 3px 3px 5px 0.1px rgba(0, 0, 0, 0.36);line-height: 96px;text-align: center;}
.f2 .bd li .desc{font-size: 23px;line-height: 1.3;}


.f3{ position: relative; padding: 55px 0;}
.f3 .iside{ display: flex;flex-direction: column; width: 360px;height: 686px;background:url(../image/isider-bg.png) no-repeat;margin-right: 50px;}
.f3 .iside .iside_hd{height: 88px;border-bottom: #fff solid 2px;color: #fff;font-size: 54px;text-align: center;margin: 0 5px;line-height: 88px;}
.f3 .iside .tit span{ font-size: 61px;}
.f3 .iside .iside_hd .en{ left: 10px; bottom: 5px; font-size: 42px; color: #fff;font-weight:400;}
.f3 .iside .iside_bd{ padding: 0 0; flex:1;}

.f3 .iside li{font-size: 25px; position: relative; }
.f3 .iside li a{ display: flex;height: 100px;color: #fff;text-align: center;align-items: center;justify-content: center;border-bottom: #fff solid 1px;margin: 0 20px;}
.f3 .iside li a span{position: relative;}
.f3 .iside li a::before{ display: none; background: var(--primary-color);content: "";position: absolute;bottom: 20px;left: 20px; width: 370px;height: 62px;}
.f3 .iside li a::after{display: none; content: '';
    content: '';
    width: 0;
    height: 0;
    border-top: 12px solid #124350;
    border-right: 30px solid transparent;
    position: absolute;
    right: -30px;
    top: 80px;
}
.f3 .iside li a:hover::before,.f3 .iside li a:hover::after{ display: block; }

.f3 .list{ gap: 18px 20px;}
.f3 .list li{}

.f3 .list li a{ position: relative; display: block; }
.f3 .list li a .img{ }
.f3 .list li a .img img{ aspect-ratio: 250/178; object-fit: cover;}
.f3 .list li a .info{ padding: 0 10px; background: var(--primary-color);color: #fff;align-items: center;}
.f3 .list li a .title{ height: 35px;font-size: 21px;height: 40px;line-height: 40px;}
.f3 .list li a .more { padding: 0 10px; border-left: #fff solid 1px; font-size: 21px;font-family: '宋体';}
.f3 .list li:first-child{ grid-column: span 2;grid-row: span 2;}
.f3 .list li:first-child .info{height: 110px;}
.f3 .list li:first-child .img img{ aspect-ratio: 250/165; }
.f3 .list li:first-child .title{ font-size: 30px;}
.f3 .list li:first-child .desc{ font-size: 21px; line-height: 1.2;}
.f3 .list li:first-child .more{ font-size: 21px;padding:20px 10px;}


.f4{ margin-bottom: 50px;}
.f4 .bd{ position: relative;}
.f4 .bd::after,.f4 .bd::before,.f4 .bd .c{ content: ''; position: absolute; width: 101px; height: 101px; border-radius:10px 0 10px 0; background:linear-gradient(-180deg, #ffc905, #ffe337); z-index: 0;}
.f4 .bd::after{ left: 0; bottom: 0;}
.f4 .bd::before{right: 0; top:0;}
.f4 .bd .c{ left: 50%; top: 50%; transform: translate(-50%, -50%); background:linear-gradient(-180deg, #45daff, #45daff); z-index: 0;}

.f4 .bd ul{position: relative; z-index: 1; column-gap: 0;padding: 60px 30px;}
.f4 .bd li{ position: relative; display: flex; height: 255px;align-items: center;justify-content: center;}
.f4 .bd li .txt{ width: 470px; font-size: 25px; line-height: 1.5;}
.f4 .bd li img{border-radius:30px 0 30px 0; box-shadow: 3px 3px 5px 0.1px rgba(0, 0, 0, 0.36); overflow: hidden;}

.f5{ margin-bottom: 50px;}
.f5 .bd ul{}
.f5 .bd li{ position: relative;}
.f5 .bd li .img{box-shadow: 3px 3px 5px 0.1px rgba(0, 0, 0, 0.36);}
.f5 .bd li .img::before{content: '';position: absolute;width: 100%;height: 100%;border-radius:10px 0 10px 0;background:linear-gradient(-180deg, #ffc905, #ffe337);z-index: -1;left: 22px;top: 22px;}
.f5 .bd li .title{ position: absolute; left: 30px; top: -10px; width: 41px; height: 118px;background: var(--primary-color); color: #fff; box-shadow: 3px 3px 5px 0.1px rgba(0, 0, 0, 0.36); font-size: 21px; text-align: center; writing-mode: vertical-rl;}
.f5 .bd li .title::after{
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-bottom: 10px solid #124350;
    border-right: 10px solid transparent;
    position: absolute;
    right: -10px;
    top: 0;
    }
.f6 .bd li{ height: 508px; padding: 30px; background: url(../image/f6-bg.png) no-repeat center center; background-size: 100% 100%;;}
.f6 .bd li .img{ width: 568px; height: 445px; border-radius: 80px 0 80px 0;  overflow: hidden;}
.f6 .bd li .img img{ width: 100%; height: 100%; object-fit: cover;}
.f6 .bd li .info{ flex: 1; padding-left: 30px;}
.f6 .bd li .title{ font-size: 52px; color: #fff; line-height: 1.2;}
.f6 .bd li .title::after{ content: ''; display: block; width: 30%; height: 3px; background: #fff; margin-top: 10px;}
.f6 .bd li .desc{font-size: 21px;color: #5b4107;line-height: 1.5;padding: 20px 0;height: 210px;}
.f6 .bd li .more{ font-size: 21px; color: #fff; background: var(--primary-color); padding: 10px 20px; border-radius: 15px 0 15px 0; margin-top: 20px;}
.f6 .bd .swiper{ padding-bottom: 50px;}
.f6 .bd .swiper .swiper-pagination-bullet{ background-color: #f6a977;}
.f6 .bd .swiper .swiper-pagination-bullet-active{ background-color: #ef6103;}



/*  
.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{ margin-bottom: 50px;}
.f7 .bd{}
.f7 .toppic{ width: 50%; margin-right: 50px;}
.f7 .toppic{ padding: 30px; background: var(--action-color); }
.f7 .toppic a{ color: #fff;}
.f7 .toppic .img{ position: relative;}
.f7 .toppic .img img{ aspect-ratio: 443/329;}
.f7 .toppic .img .more{ position: absolute; left: -12px; top: 50%; transform: translateY(-50%); width: 170px; height: 50px; background:var(--primary-color); color: #fff; text-align: center;  font-size: 30px; line-height: 50px;  }
.f7 .toppic .img .more::after{
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-top: 12px solid #11404c;
    border-left: 12px solid transparent;
    position: absolute;
    left: 0;
    bottom: -12px;
    }
.f7 .toppic .title{ font-size: 30px; font-weight: bold; margin: 20px 0; line-height: 1.2;}
.f7 .toppic .title::after{ content: ''; display: block; width: 30px; height: 2px; background: #fff; margin: 6px 0 0 0;}
.f7 .toppic .desc{ font-size: 21px; color: #fff; line-height: 1.2; color: #5b4107;}

.f7 .glist{ border-top: #111 2px solid;border-bottom: #111 2px solid;}
.f7 .glist li{ height: 58px; line-height: 58px; font-size: 25px; border-bottom: #ccc 1px dotted;}
.f7 .glist li i{ font-size: 21px; color: var(--primary-color); margin-right: 10px;}
.f7 .glist li .title{ color: #5a5a5a;}
.f7 .glist li .time{ color: #666; font-size: 16px;}

/* .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;}