﻿.about-us>.l-wrap{max-width:100%;padding:0}
.about-us .page-main{padding:0}
.about-us .page-sub{display:flex;margin-top:20px}
.about-us .page1-dev{margin-bottom:30px}
.about-us .page1-dev p{font-weight:700;color:var(--color);line-height:1}
.about-us .page-sub div{width:25px;height:2px;background:#e41602;margin-right:4px}
.about-us .page-title{font-weight:700;font-size:42px;color:#0f1e36;line-height:1.2;text-align:left}
.about-us .page1{padding:80px 0}
.about-us .page1 .l-wrap{display:flex;align-items:center}
.about-us .page1-right{width:49%;position:relative;padding-left:60px}
.about-us .page1-left{flex:1;padding-right:7%}
.about-us .page1-location{position:absolute;bottom:50px;left:0}
.about-us .page1-box{background:#0b1b2b;padding:35px 20px;color:#fff;margin-bottom:20px;max-width:240px}
.about-us .page1-text{margin-top:30px;color:#4a4a4a;line-height:36px}
.about-us .page1-box .p1{font-weight:700;font-size:38px;color:#fff;line-height:1;display:flex;align-items:center}
.about-us .page1-box .p2{font-size:20px;color:#fff;line-height:28px;margin-top:15px}
.about-us .page1-box .p1 sub{font-size:40px;margin-left:15px}
.about-us .page2{padding:80px 0;background:#f3f4f3}
.about-us .page2 .page-title{text-align: center;}
.about-us .page2-top{text-align:center}
.about-us .page2 .page-sub{justify-content:center}
.about-us .page2-contant{margin-top:40px;display:flex;align-items:center}
.about-us .page2-left{width:48%;border-radius:10px;overflow:hidden}
.about-us .page2-left iframe{height: 450px;}
.about-us .page2-right{flex:1;padding-left:80px}
.about-us .page2-btn{margin-top:40px}
.about-us .page2-btn a{width:216px;height:59px;background:var(--color);border-radius:5px;display:flex;justify-content:center;align-items:center;color:#fff;text-transform:uppercase;line-height:1;transition:all .3s ease-in-out}
.about-us .page2-btn a em{margin-left:15px;line-height:1;transform:rotateZ(-45deg);font-size:var(--fontsize18);font-weight:var(--fontbold6);width:18px;transition:all .3s ease-in-out}
.about-us .page2-btn a:hover em{transform:rotateZ(0)}
.about-us .page2-btn a:hover{text-decoration:unset}
.about-us .page2-bottom{display:flex;margin-top:60px;justify-content:space-between}
.about-us .page2-icon{display:flex;margin-bottom:15px;transition: all .3s ease-in-out;}
.about-us .page2-icon em{font-size:34px;width:34px;color:var(--color);line-height:1}
.about-us .page2-box{width:25%;display:flex;flex-direction:column;align-items:center;text-align:center;position:relative}
.about-us .page2-box::after{position:absolute;content:'';width:1px;height:40px;background:#000;right:0;top:50%;transform:translateY(-50%);opacity:.2}
.about-us .page2-box:nth-last-child(1)::after{display:none}
.about-us .page2-text{font-size:20px;color:#0f1e36;line-height:30px;font-weight:600}
.about-us .page3{padding: 100px 0;}
.about-us .page3 .page-title{text-align: left;}
.about-us .page3 .l-wrap{display:flex;align-items:center;justify-content: space-between;}
.about-us .paeg3-right{width: 46%;position: relative;}
.about-us .page3-left{width: 45%;}
.about-us .page3-text{margin-top: 30px;color: #4A4A4A;line-height: 36px;}
.about-us .page3-contant{margin-top: 30px;}
.about-us .page3 .cerSwiper{padding-bottom: 45px;}
.about-us .page3 .cerSwiper .swiper-pagination{bottom: 0;}
.about-us .page4 .page-title{text-align: center;}
.about-us .page4{padding: 80px 0 180px;background: #f6f6f6;}
.about-us .page4 .page-sub{justify-content: center;}
.about-us .page4-box{background: #FFFFFF;box-shadow: 0px 2px 17px 1px rgba(184, 184, 184, 0.32);border-radius: 10px;padding: 65px 20px;width: 32%;}
.about-us .page4-contant{display: flex;justify-content: space-between;margin-top: 40px;}
.about-us .page4-ioce{display: flex;justify-content: center;margin-bottom: 25px;transition: all .3s ease-in-out;}
.about-us .page4-ioce em{font-size: 48px;width: 48px;color: var(--color);line-height: 1;}
.about-us .page4-con{text-align: center;}
.cerSwiper .swiper-slide img{width: 100%;}
.about-us .page4-tit{font-weight: bold;font-size: 22px;color: #000002;line-height: 1;margin-bottom: 15px;}
.about-us .page2-box:hover .page2-icon{transform: rotateY(180deg);}
.about-us .page4-box:hover .page4-ioce{transform: rotateY(180deg);}
@media (max-width:1640px) {.about-us .page-title{font-size: 38px;}
.about-us .page1,.about-us .page2,.about-us .page3{padding: 65px 0;}
.about-us .page1-box .p1{font-size: 28px;}
.about-us .page1-box .p1 sub{font-size: 26px;}
.about-us .page1-location{bottom: 25px;}
.about-us .page1-left{padding-right: 5%;}
.about-us .page4{padding: 65px 0 160px;}}
@media (max-width:1420px) {.about-us .page-title{font-size: 34px;}
.about-us .page1, .about-us .page2, .about-us .page3{padding: 50px 0;}
.about-us .page1-box{padding: 25px 15px;margin-bottom: 10px;}
.about-us .page2-right{padding-left: 50px;}
.about-us .page2-text{font-size: 18px;}
.about-us .page3-left,.about-us .paeg3-right{width: 48%;}
.about-us .page4-box{padding: 45px 20px;}
.about-us .page4-ioce em{font-size: 42px;width: 42px;}
.about-us .page4-tit{font-size: 20px;}}
@media (max-width:1366px) {.about-us .page1-box .p2{font-size: 16px;}
.about-us .page1-box .p1{font-size: 24px;}
.about-us .page1-box .p1 sub{font-size: 20px;}
.about-us .page1-box{max-width: 220px;}
.about-us .page-title{font-size: 30px;}
.about-us .page2-btn a{width: 175px;height: 50px;}
.about-us .page2-btn {margin-top: 20px;}}
@media (max-width:1024px) {.about-us .page1-left {padding-right: 3%;}
.about-us .page-title{font-size: 26px;}
.about-us .page1-box .p1{font-size: 20px;}
.about-us .page1-box .p2 {font-size: 14px;margin-top: 5px;line-height: 1.52;}
.about-us .page1-box {max-width: 190px;}
.about-us .page1-text{margin-top: 15px;line-height: 1.6;}
.about-us .page1-dev {margin-bottom: 10px;}
.about-us .page-sub{margin-top: 10px;}
.about-us .page2-contant{flex-direction: column;margin-top: 30px;}
.about-us .page2-left{width: 100%;}
.about-us .page2-right {padding-left: 0;margin-top: 20px;}
.page2-left img{width: 100%;}
.about-us .page2-text {font-size: 16px;line-height: 1.52;}
.about-us .page3-text{margin-top: 20px;color: #4A4A4A;line-height: 1.6;}}
@media (max-width:768px) {.about-us .page-title{font-size: 24px;}
.about-us .page1, .about-us .page2, .about-us .page3 {padding: 35px 0;}
.about-us .page1 .l-wrap{flex-direction: column;}
.about-us .page1-left {padding-right: 0;}
.about-us .page1-right{margin-top: 30px;width: 60%;}
.about-us .page2-bottom{margin-top: 50px;flex-wrap: wrap;}
.about-us .page2-box{width: 50%;margin-bottom: 25px;}
.about-us .page2-box:nth-of-type(2n)::after{display: none;}
.about-us .page3 .l-wrap{flex-direction: column;}
.about-us .page3-left, .about-us .paeg3-right{width: 100%;}
.about-us .paeg3-right{margin-top: 35px;}
.about-us .page4 {padding: 40px 0 110px;}
.about-us .page4-contant{margin-top: 25px;}
.about-us .page4-tit {font-size: 18px;margin-bottom: 6px;}
.about-us .page4-box {padding: 25px 10px;}}
@media (max-width:550px) {.about-us .page-title{font-size: 22px;}
.about-us .page1-right{width: 100%;}
.about-us .page2-btn a {width: 160px;height: 45px;font-size: 14px;}
.about-us .page4-contant{flex-wrap: wrap;}
.about-us .page4-box{width: 100%;margin-bottom: 20px;}
.about-us .page2-text{font-size: 14px;}
.about-us .page2-left iframe{height: 330px;}}