.f1{ padding: 80px 0 65px 0; background-color: #fff;}
.f1 .hd .en{ font-size: 118px;}
.f1 .aboutimg{ position: relative; width: 600px;padding-right: 30px;}
.f1 .aboutimg img{width: 100%;height: 100%;object-fit: cover;}
.f1 .aboutimg .bigimg img{}
.f1 .aboutimg .more{ position:absolute; right:0; bottom:245px; background: var(--primary-color) url(../image/icon-l.png) no-repeat 125px center; color:#fff; padding: 10px 60px 10px 10px; font-size: 50px; line-height: 1.2;}

.f1 .aboutimg .more::after{content: '';position: absolute;bottom: -31px;right: 12px;width: 0;height: 0;border-top: 23px solid transparent;border-bottom: 23px solid transparent;border-right: 23px solid #042b53;z-index: 0;transform: rotate(45deg);}


.f1 .smallimg { display: grid; gap: 10px; grid-template-columns: repeat(3,1fr); margin-top: 10px;}
.f1 .smallimg a{ display: block; }
.f1 .aboutimg .smallimg img{aspect-ratio: 4/3;}
.f1 .abouttext{ flex: 1; padding-right: 35px;}
.f1 .abouttext .hd{ margin-bottom: 55px;}
/* .f1 .abouttext .hd .en{transform: translate(-33%, -50%);}
.f1 .abouttext .hd .tit i{ width: 265px;}
.f1 .abouttext .hd .tit::after{ display: none;}
.f1 .abouttext .hd .tit span{ padding-right: 0;} */
.f1 .abouttext .bd{ height: 335px; font-size: 22px; overflow: hidden;}

.f1 .abouttext ul{ gap: 20px;}
.f1 .abouttext ul li{ background-color: var(--primary-color); color: #fff; padding: 10px 20px; font-size: 23px; line-height: 1.2; text-align: center;}
.f1 .abouttext ul li .img{ padding: 10px 0; display: flex; justify-content: center; align-items: center; aspect-ratio: 1/1; overflow: hidden;}
.f1 .abouttext ul li .img img{}
.f1 .abouttext ul li .text{ position: relative; padding: 10px 0 0 0;}
.f1 .abouttext ul li .text::before{ content: ''; display: block; width: 30%; height: 1px; margin: 0 auto; background-color: #fff; margin-bottom: 10px;}

.f1 .abouttext .more{ margin-top: 50px; text-align: left;}
.f1 .abouttext .more a{ display: inline-block; padding: 10px 40px; background-color: var(--primary-color); color: #fff; font-size: 25px; line-height: 1.2;}


.f2{ position: relative; padding: 55px 0;}
.f2::before{ content: ''; display: block; width: 100%; height: 370px; position: absolute; top: 0; left: 0; background-color: var(--primary-color); z-index: 0;}

.f2 .bdlist{ position: relative;}
.f2 .list{}
.f2 .list ul{  row-gap: 30px;}
.f2 .list li{ padding-right: 15px; }
.f2 .list li a{ position: relative; display: block; padding: 15px; background-color: #fff;box-shadow: 3.394px 6.122px 10px 0px rgba(6, 0, 1, 0.45);}
.f2 .list li a .img{}
.f2 .list li a .img img{ aspect-ratio: 1/1;}
.f2 .list li a .title{font-size: 25px;color: var(--primary-color);line-height: 1.2;padding: 15px 0;}
.f2 .list li a .title::after{content: '';display: block;width: 10%;height: 2px;background-color: var(--primary-color);margin-top: 5px;}
.f2 .list li a .desc{font-size: 14px;color: var(--primary-color);opacity: 0.5;line-height: 1.2;padding-bottom: 10px;}
.f2 .list li a .more{position:absolute;right: -12px;bottom: 20px;background: var(--primary-color);color:#fff;padding: 5px 20px;font-size: 20px;line-height: 1.2;}
.f2 .list li a .more::after{content: '';position: absolute;bottom: -11px;right: 5px;width: 0;height: 0;border-top: 8px solid transparent;border-bottom: 8px solid transparent;border-right: 8px solid #042b53;z-index: 0;transform: rotate(45deg);}



.f3{ padding: 40px 0 90px 0; background: #f2f6f9;}
.f3 .hd{ display: flex;justify-content: space-between;    align-items: center;}
.f3 .bd{ padding: 55px 0 0 0;}
.f3 .bd ul{ width: 416px; background: #fff; margin-right: 70px;column-gap:0;}
.f3 .bd li{ border-bottom: #eee solid 1px; border-right: #eee solid 1px;}
.f3 .bd li a{ display: block; padding: 20px; position: relative;}
.f3 .bd li a .img{ height: 95px; display: flex; align-items: center;}

.f3 .bd li a .tit{position: relative;font-size: 25px;color:var(--primary-color);line-height: 1.2;}
.f3 .bd li a .tit::before{content: '';display: block;width: 13%;height: 1px;background-color: var(--primary-color);margin: 10px 0;}
.f3 .bd li a:hover{ background: var(--primary-color); }
.f3 .bd li a:hover img{ filter: brightness(0) invert(1);}
.f3 .bd li a:hover *{ color: #fff;}

.f3 .imgbox{ height: 386px;position: relative; padding-right: 30px; }
.f3 .imgbox img{ width: 100%; height: 100%; object-fit: cover;}
.f3 .imgbox .title{ position:absolute; right:0; bottom:50px; background: var(--primary-color); color:#fff; padding: 10px 20px; font-size: 50px; line-height: 1.2;}
.f3 .imgbox .title::after{content: '';position: absolute;bottom: -31px;right: 12px;width: 0;height: 0;border-top: 23px solid transparent;border-bottom: 23px solid transparent;border-right: 23px solid #042b53;z-index: 0;transform: rotate(45deg);}


.f4{ position: relative; padding: 55px 0 90px 0;}
.f4::before{ content: ''; display: block; width: 100%; height: 370px; position: absolute; top: 0; left: 0; background-color: var(--primary-color); z-index: 0;}
.f4 .hd{ display: flex;justify-content: space-between;    align-items: center;}
.f4 .hd .tit span,.f4 .hd .en{ color: #fff;}
.f4 .hd .more{ background-color: #fff; color: var(--primary-color);}
.f4 .bd{ position: relative;}
.f4 .bd ul{ }
.f4 .caselist{ position: absolute; width: 302px; height: 508px; background-color: rgba(21,65,152,.82); top: 84px; left: 56px; z-index: 99;}
.f4 .caselist>div{ height:calc(100% - 40px);}
.f4 .caselist li a{ padding: 15px; border-bottom: rgba(255,255,255,.3) solid 1px; align-items: center;}
.f4 .caselist li .img{ width: 130px; height: 96px;}
.f4 .caselist li .img img{ width: 100%; height: 100%; object-fit: cover;}
.f4 .caselist li .title{ line-height: 1.2; font-size: 25px; padding-right: 20px; color: #fff;}
.f4 .casebox .img{ width:1168px;height:690px; box-shadow: 0px 0px 21px 0px rgba(6, 0, 1, 0.86);}
.f4 .casebox .img img{ width: 100%; height: 100%; object-fit: cover;}
.f4 .casebox .title{ position:absolute; right:0; bottom:50px; background: var(--primary-color); color:#fff; padding: 10px 20px; font-size: 50px; line-height: 1.2;}
.f4 .casebox .title::after{content: '';position: absolute;bottom: -31px;right: 12px;width: 0;height: 0;border-top: 23px solid transparent;border-bottom: 23px solid transparent;border-right: 23px solid #042b53;z-index: 0;transform: rotate(45deg);}


.f4 .bd .btn{ width: 100%; height: 20px;  text-align: center;display: flex;align-items: center;justify-content: center;background-color: transparent;}
.f4 .bd .btn img{filter: invert(100);}
.f4 .bd .cb-prev{ top: 0; border-bottom: rgba(255,255,255,.3) solid 1px; }
.f4 .bd .cb-prev img{ transform: rotate(180deg);}
.f4 .bd .cb-next{ bottom: 0;border-top: rgba(255,255,255,.3) solid 1px;}
.f4 .bd .btn:hover{background-color: var(--primary-color);}
/* .f4 .bd .btn:hover img{ filter: invert(1);} */

.f6{ padding: 50px 0; background-color: #f2f6f9;}
.f6 .bd { position: relative; padding: 0 50px;}
.f6 .bd ul{ margin: 60px 0;}
.f6 .bd li { padding: 0 32px;}
.f6 .bd li img{ aspect-ratio: 311 / 220; object-fit: contain; box-shadow: 0px 0px 21px 0px rgba(6, 0, 1, 0.86);}
.f6 .bd .btns{ position:absolute; top: 50%; left: 0; width: 100%; transform: translateY(-50%); display: flex; justify-content: space-between; align-items: center; z-index: 99;}
.f6 .bd .btns .btn{ width: 50px; height: 50px; border: var(--primary-color) solid 1px; background: #fff; display: flex; justify-content: center; align-items: center; cursor: pointer;}
.f6 .bd .btns .btn:hover{ background-color: var(--primary-color);}
.f6 .bd .btns .btn:hover img{ filter: invert(0) brightness(100);}

.f7{position: relative;padding: 15px 0;}
.f7::before{content: '';display: block;width: 100%;height: 215px;position: absolute;top: 0;left: 0;background-color: var(--primary-color);z-index: 0;}
.f7 .hd{ display: flex; justify-content: space-between;    align-items: center;}
.f7 .bd{ position: relative; padding: 50px 0 0 0;}

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



.glist{ position: relative; padding: 45px 0; margin: 0 -20px;}
.glist>div{ padding: 0 20px;}
.glist ul{ margin: 20px 0;}
.glist li{ position: relative; padding-right: 12px;}
.glist li a{ display: block;background-color: #fff; padding:20px; box-shadow: 3.394px 6.122px 18px 0px rgba(6, 0, 1, 0.45);}
.glist li .img{ width: 327px; height: 220px; }
.glist li .img img{ width: 100%; height: 100%; object-fit: cover;}
.glist li .time{ position: absolute; right: 0; top: 20px; background-color: var(--primary-color); font-size: 21px; color: #fff; padding: 3px 10px;}
.glist li .time::after{content: '';position: absolute;bottom: -11px;right: 5px;width: 0;height: 0;border-top: 8px solid transparent;border-bottom: 8px solid transparent;border-right: 8px solid #042b53;z-index: 0;transform: rotate(45deg);}
.glist li .title{ font-size: 25px; color: var(--primary-color);}
.glist li .title::after{content: '';display: block;width: 13%;height: 1px;background-color: var(--primary-color);margin: 10px 0;}

.glist li .desc{ font-size: 18px; color: #111; line-height: 1.2; margin: 10px 0;}



.f7 .bd .btns{ position:absolute; top: 50%; left: -90px; right: -90px; transform: translateY(-50%); display: flex; justify-content: space-between; align-items: center; z-index: 99;}
.f7 .bd .btns .btn{ width: 73px; height: 73px; border: var(--primary-color) solid 2px; background: #fff; display: flex; justify-content: center; align-items: center; cursor: pointer;}
.f7 .bd .btns .btn:hover{ background-color: var(--primary-color);}
.f7 .bd .btns .btn:hover img{ filter: invert(0) brightness(100);}