.f1{ padding: 80px 0 65px 0; background-color: #fff;}
.f1 .aboutimg{ width: 572px; aspect-ratio: 572/306}
.f1 .aboutimg img{ width: 100%; height: 100%; border: var(--primary-color) solid 1px;  object-fit: cover; }
.f1 .aboutimg .bigimg img{ aspect-ratio: 543/306;}

.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: 30px;}
.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{ font-size: 23px;}
.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 .iside{width: 335px; height: 780px; padding: 10px; background: url(../image/side-bg.jpg);}
.f2 .iside .hd{ height: 90px; margin-bottom: 10px; background-color: var(--primary-color); color: #fff; padding: 10px 10px; font-size: 25px; }
.f2 .iside .tit span{ font-size: 61px;}
.f2 .iside .hd .en{ left: 10px; bottom: 5px; font-size: 42px; color: #fff;font-weight:400;}
.f2 .iside .ft{ padding: 0;}
.f2 .iside .bd{ padding: 0; height: 410px; }

.f2 .iside li{ padding: 10px 0; border-bottom: #4a4a4a solid 1px; font-size: 33px;}
.f2 .iside li a{ display: block; border-left: #4a4a4a solid 3px; padding-left: 20px; line-height: 1.5; color: #4a4a4a;}
.f2 .iside li a:hover{ color: var(--primary-color); border-left: #fff solid 3px; background-color: var(--primary-color); color: #fff;}

.f2 .iside .ft .pic{ padding: 10px 0; text-align: center;}
.f2 .iside .ft .tel{ align-items: center; background: var(--primary-color); color: #fff; font-size: 25px; padding: 10px 10px; font-weight: 400; line-height: 1.2;}
.f2 .iside .ft .tel .icon{ margin-right: 10px;}
.f2 .iside .ft .tel .txt{ font-size: 25px;}
.f2 .iside .ft .tel .num{ font-size: 33px; font-weight: 500;}

.f2 .bdlist{  border: var(--primary-color) solid 2px; padding: 35px 35px; margin-left: 10px;}
.f2 .hotcp{ border: var(--primary-color) solid 1px; padding: 5px; margin-bottom: 35px;}
.f2 .hotcp .img{ border: var(--primary-color ) solid 1px;}
.f2 .hotcp .img img{ aspect-ratio: 1/1;}
.f2 .hotcp .txt{ padding: 0 20px;}
.f2 .hotcp .txt .title{ display: block; border-bottom: #333 solid 1px; font-size: 56px; line-height: 1.5; font-weight: 500; color: var(--primary-color);}
.f2 .hotcp .txt .desc{ height: 210px;}
.f2 .hotcp .txt .more{ display: block;}
.f2 .hotcp .txt .more a{display: inline-block; padding: 5px 10px; background-color: var(--primary-color); color: #fff; font-size: 25px; line-height: 1.2;}

.f2 .list{}
.f2 .list ul{  row-gap: 30px;}
.f2 .list li{padding: 20px; border:var(--primary-color) solid 1px; background-color: #fff;}
.f2 .list li a{ position: relative; display: block; }
.f2 .list li a .img{}
.f2 .list li a .img img{ aspect-ratio: 1/1;}
.f2 .list li a .title{ position: absolute; left: 0; bottom: 0; width: 100%; background: var(--primary-color); color: #fff; font-size: 18px; line-height: 1.2; text-align: center;}

/* .f2 .bd{ flex: 1; padding: 30px; box-shadow:0 0 10px rgba(0,0,0,0.1);}
.f2 .bd ul{display: grid;   gap: 15px;}
.f2 .bd ul li{ position: relative;}
.f2 .bd ul li a{ display: block; height: 100%;}
.f2 .bd ul li img{ width: 100%; height: 100%; object-fit: cover;}
.f2 .bd ul li .title{ display: none;}
.f2 .bd ul li .more{ position: absolute; bottom: 10px; left: 20px; text-decoration: underline; color: var(--primary-color);}
.f2 .bd ul li:first-child{  grid-row: span 2;} */

.f3{ background:#f3f9fd url(../image/bg1.jpg) no-repeat center center; background-size: 100% 100%;;}
.f3 .hd{ display: flex; justify-content: center; height: 303px; background: url(../image/hd1.png) no-repeat center center; }
.f3 .hd .tit{}
.f3 .hd .tit .txtl{ font-size: 132px; font-weight: bold;color: #fff !important;}
.f3 .hd .tit .txtr{ }
.f3 .hd .tit .txtr b{ font-size: 80px;color: #fff !important;}
.f3 .hd .tit .txtr span{ display: block; background-color: #fff; color: var(--primary-color); font-size: 25px; padding: 0 10px; margin-top: 10px;}
.f3 .hd .en{ color: #fff; bottom: auto; left: 50%; top: 40%; transform: translate(-50%, -50%); font-size: 150px;}

.f3 .bd{ padding: 55px 0 0 0;}
.f3 .bd ul{}
.f3 .bd ul li{ padding: 20px 15px; background-color: #fff; text-align: center;cursor:pointer;}
.f3 .bd ul li .img{ display: flex; height: 155px; justify-content: center; align-items: center;}
.f3 .bd ul li .img img{ }
.f3 .bd ul li .tit{ font-size: 33px; color: #111; padding: 0 10px; line-height: 1.2;}
.f3 .bd ul li .tit{font-size: 33px;color: #111;padding: 0 10px;line-height: 1.2;}
.f3 .bd ul li .tit::after{ display: inline-block; content:" "; width: 50px; height: 1px; background-color: #111; margin: 10px auto;}
.f3 .bd ul li .txt{ font-size: 15px; color: #3a3a3a;}
.f3 .bd ul li:hover{ background-color: var(--primary-color); }
.f3 .bd ul li:hover *{color: #fff !important;}
.f3 .bd ul li:hover img{filter: brightness(0) invert(1);}

.f3 .ft{ text-align: center;}

.f4{ padding: 40px 0 90px 0;}
.f4 .hd{ display: flex;justify-content: space-between;    align-items: center;}
.f4 .bd{ padding: 55px 0 0 0;}
.f4 .bd li a{ display: block; position: relative;filter: grayscale(0);}
.f4 .bd li a .tit{ position: absolute; left: 20px; top: 20px; font-size: 30px; color: #fff;text-shadow: 0px 2px 4.5px rgba(0, 0, 0, 0.75);writing-mode: vertical-rl; letter-spacing: 2px;}
.f4 .bd li a:hover{filter: grayscale(0);}

.f5{ background: url(../image/hd2.png) no-repeat center top; background-size: cover; padding: 55px 0 90px 0;}
.f5 .hd{ display: flex;justify-content: space-between;    align-items: center;}
.f5 .hd .tit span,.f5 .hd .en{ color: #fff;}
.f5 .hd .more{ background-color: #fff; color: var(--primary-color);}
.f5 .bd{ padding: 55px 0 0 0; position: relative;}
.f5 .bd ul{ margin: 30px 0;}
.f5 .bd li { width: 380px; height: 452px;padding: 20px 20px;  background-color: #fff;box-shadow: 0px 2px 12.6px 1.4px rgba(0, 0, 0, 0.43); }
.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{ font-size: 21px;color: var(--primary-color); border-bottom: var(--primary-color) 1px solid; text-align: center;}
.f5 .bd li .desc{ height:43px; overflow:hidden; font-size: 14px;color: var(--primary-color);}
.f5 .bd li .more{ position: absolute; left: 50%; bottom: -20px; width: 160px; margin-left: -80px; text-align: center; font-size: 25px; background-color: #fff; color: var(--primary-color);box-shadow: 0px 2px 12.6px 1.4px rgba(0, 0, 0, 0.75);}
.f5 .bd li a:hover .more{ background-color: var(--primary-color); color: #fff;}

.f5 .bd .btn{ position: absolute;}
.f5 .bd  .btn{ display: block; width:68px; height: 81px; position: absolute;top: 50%; margin-top: -40px; z-index: 99; cursor: pointer; font-size: 90px;font-family: sans-serif;}
.f5 .bd  .cb-next{ right: -80px;  background: rgba(0,0,0,.3); }
.f5 .bd  .cb-next::after{  content: ' » '; color:#fff;vertical-align: middle;}
.f5 .bd  .cb-prev{ left: -80px; background: rgba(0,0,0,.3); }
.f5 .bd  .cb-prev::after{  content: ' « '; color:#fff;vertical-align: middle;}

.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{ border:var(--primary-color) 3px solid;}
.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 .hd{ display: flex; justify-content: space-between;    align-items: center;}
.f7 .bd{ padding: 50px 0 0 0;}

/* .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: 30px; color: var(--primary-color); line-height: 1.5;}
.commlist li .desc{ margin: 10px 0; font-size: 18px; color:#111; line-height: 1.2; height: 85px; 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{ margin-left: 45px; height: 572px; position: relative; padding: 45px 0;}
.glist>div{height: 482px;}
.glist li{ background-color: #f2f2f1; padding: 10px; margin-bottom: 20px;}
.glist li a{ color: #53534e;}
.glist li .time{ text-align: center; font-size: 108px; line-height: 1; border-right: #53534e solid 1px; padding-right: 20px; margin-right: 20px;}
.glist li .time i{ display: block; font-size: 26px;}
.glist li .title{ font-size: 26px;}
.glist li .desc{ font-size: 18px; color: #53534e; line-height: 1.2; margin: 10px 0;}
.glist li a:hover{ color: var(--primary-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);}