@font-face { font-family: "almm"; src: url("../font/almm/AlimamaAgileVF-Thin.woff2") format("woff2"), url("../font/almm/AlimamaAgileVF-Thin.woff") format("woff"); } html{ overflow:hidden; } body{ font-family: Microsoft YaHei, Microsoft YaHei,almm; } .post-title-EN{ font-family: "almm"; } #usercenter{ font-size: 20px; } .btn{ height: 50px; width: 150px; border-radius: 40px; letter-spacing: 2px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; /* 其他样式 */ line-height: 1.5; /* 行高,根据你的需要调整 */ } #loginBtn{ background: #fff; } .opacity-05{ background-color: rgba(255, 255, 255, 0.5); } .mr-20{ margin-right:20px; } .mbox2Brief p{ margin-bottom: 15px; } #videoModal{ position: fixed; height: calc(100vh); width: calc(100vw); z-index: 99; display: none; background: rgba(0, 0, 0, .5); } .mobileLanglist{ display: none; } .timeline { position: relative; display: flex; align-items: center; padding: 0 50px; } .timeline::before { content: ''; position: absolute; width: 6px; background-color: #ddd; top: 0; bottom: 0; left: 50px; margin-left: -3px; } .timeline-item { padding: 20px 30px; position: relative; background-color: inherit; width: 30%; } .timeline-item:not(:first-child)::before { content: ''; position: absolute; width: 50%; height: 2px; background-color: #ddd; top: 29px; right: -25%; z-index: -1; } .flex-index{ display: flex !important; align-items: center !important; } .timeline-item:not(:last-child)::after { content: ''; position: absolute; width: 50%; height: 2px; background-color: #ddd; top: 29px; left: 100%; z-index: -1; } .timeline-icon { border: 5px solid #fff; border-radius: 50%; position: absolute; background-color: #ddd; left: -50px; height: 40px; width: 40px; line-height: 30px; text-align: center; font-size: 1.5em; color: white; } .timeline-content { padding: 10px 20px; background-color: white; position: relative; border-radius: 6px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); } .timeline-content h3 { margin-top: 0; color: #333; } .timeline-content p { color: #777; font-size: 0.9em; } #timeLineBox{ position: absolute; transition: 1s linear; top:0 } .mbox5Img{ display: flex; align-items: center; justify-content: center; width: 100% !important; height: 117px !important; padding: 10px; } .mbox5Img img{ width: 80px !important; } .mbox5Hov{ display: flex; align-items: center; justify-content: center; color:#fff } .footer{ position: relative; bottom:0; left: 0; padding: 25px 10px; width: 100%; text-align: center; color:#fff; background: #003399; } .videoPlayBtn{ position: absolute; right: 20%; top:50%; font-size: 6rem; color: #fff; } .videoPlayBtnPhone{ display: none; font-size: 6rem; color: #333; } .menu:hover .child-menu{ /* display: block; */ opacity: 1; } .child-menu{ /* display: none; */ opacity: 1; transition: .5s linear; } .child-menu p{ height: 30px; line-height: 30px; font-size: 1.5rem; margin: 10px 0; } .child-menu p:hover{ color:#fff !important } .menu-info{ padding: 50px 0 0 10%; } .menu-info-p{ margin: 10px 0; font-size: 1.25rem; } .mbox2Bg{ background-image: url(assets/bg.jpg); background-size: cover; } .mbox4Lef{ background-image: url(assets/bg2.png); background-size: cover; } .counter{ font-size: 7rem; letter-spacing: 5px; } .mbox5Bg{ background: url('./assets/box5Bg.jpg') no-repeat; background-size:cover ; } .mbox2TitEn{ display: flex; align-items: center; justify-content: center; /* position: absolute; */ width: 100%; height: 200px; top:0; left:0; color: #fff; background-image: url('./assets/bg3.pic.jpg'); background-size: cover; } .mbox2TitEn_counter{ display:flex; width: 100%; justify-content: center; } /* .mbox5List .swiper-slide a{ background-color: #fff; } */ .mOnLine{ background-color: #003399; transition: 0.2s linear; } .mOnLineIco{ display: flex; align-items: center; justify-content: center; background: #003399; transition: 0.2s linear; height: 60px; } .onLineWx, .onLineQQ{ border:none !important; } .menu{ cursor: pointer; } .page-breadcrumb li{ padding: 0.1em 0;line-height: 30px;cursor: pointer; } .mOnLine{ background-color: #003399; transition: 0.1s linear; z-index: 8; } .mOnLineIco{ background: #003399; transition: 0.1s linear; } .mOnLineCon { /* background: #003399; */ transition: 0.1s linear; } .mOnLine:hover .mOnLineCon{ /* background: #009966; */ } .menu{ cursor: pointer; } .menuBg{ z-index: 8; } .navList li a{ color:#fff !important; } .navList li a:hover{ color: #009966 !important; } #vd{ width: 50%;height: auto;position: absolute;top:25%;left: 25%; } .video-close{ font-size: 2rem;position: absolute;top:25%;left: 20%;z-index: 999; cursor: pointer; background: #fff; height: 20px; width: 20px; line-height: 24px; text-align: center; border-radius: 100%; } .mbox8Mes li input{ background-color: #fff; border-radius: 3px; padding: 0 10px; height: 40px; color:#333; } .mbox8Mes li{ margin-bottom: 20px; } .mbox8Mes li textarea{ width: calc(100%); background-color: #fff; border-radius: 3px; padding: 0 10px; margin: 0; color:#333 } .svbutton{ display: block; width: 120px; height: 40px; line-height: 40px; text-align: center; border-radius: 2px 2px 2px 2px; border: 1px solid #fff; cursor: pointer; } .mbox8RigBotflex{ display: flex; flex-wrap: wrap; align-items: flex-end; text-align: left; width: 90%; margin-left: 5%; } .mbox8RigBotflexmtop{ margin: 10px 0; padding: 10px 0; border-top: 1px solid #f1f2f3; } .mbox8RigBotflexmr{ margin-right: 20px; flex:0 0 100% } .mbox8RigBotflex h3{ margin-bottom: 16px; font-size: 16px; color:#333 ; } .mbox8RigBotflex p{ display: flex; flex-wrap: wrap; align-items: center; color: #333; justify-content: space-between; } .mbox8RigBotflex p a{ display: inline-block; width: 30%; color: #333; margin-right:10px; line-height: 25px; } .mbox8RigBotflex p a i{ margin-right:5px; } .foot{ padding: 25px 10px; width: 100%; text-align: center; color: #fff; background: #003399; } .form-group-flex{ display: flex; align-items: center; padding: 8px 0; border: 1px solid #CCCCCC; border-radius: 4px; margin-bottom: 20px !important; } .form-group-flex a{ display: block; /* width: 100px; */ padding:15px 10px; /* height: 30px; */ line-height: 0px ; flex: 1 0 auto; margin:0 8px 0 10px; color: #003399 !important; text-align: center; border: 1px solid #003399; border-radius: 2px; cursor: pointer; } .form-group-flex input{ font-size: 1.6rem; border: none; margin-bottom: 0; outline: none; box-shadow: none !important; } .form-group-input{ font-size: 1.6rem !important; padding:9px 15px !important; height: 50px !important; border: 1px solid #CCCCCC !important; box-shadow: none !important; margin-bottom: 20px !important; } .form-group-btn{ display: block; width: 200px; height: 56px; line-height: 56px; text-align: center; color: #fff !important; background: #009966; border-radius: 5px 5px 5px 5px; margin: 0 auto; cursor: pointer; } .bottomLine{ display: inline-block; border-bottom: 2px solid #009966 !important; padding-bottom: 14px; } .mOnLineCon{ cursor: pointer; } .onLineWx .mOnLineCon{ bottom: -47px; } .menu-info-container{ width: 40%; } #navlodin{ border-bottom: 1px solid #f1f2f3; } .mOnLineCon{ border-radius: 4px 0 0 4px; } .loginInBtn .mOnLineCon{ background: #fff; bottom: 0px; } .onLineWx,.onLineQQ{ border-bottom: 1px solid #337ab74a; } .input-error-message{ text-align: right; margin: -10px 0 10px 0; color: #a94442; font-size: 12px; } .idxpage5 .fp-tableCell{ display:block !important; } .mbox8{ padding-top: calc(100vh - 820px); } .mytag{ font-size: 12px; padding: 5px; margin: 5px 0 0 15px; color:#3685FC ; border: 1px solid #3685FC; border-radius: 3px; line-height: 10px !important; } .imgBg{ position: relative; } .imgBg::after{ content: ''; position: absolute; top:0; left:0; height: 100%; width: 100%; background: rgba(0, 0, 0, .5); } .mbox5Bg{ background-image: url('../assets/timelineBg.jpg'); } .new-timeline-item{ display: flex; position: absolute; width: 180px; /* overflow: hidden; */ } .new-timeline-item h5{ overflow: hidden; /* 确保超出的内容会被隐藏 */ display: -webkit-box; /* 作为弹性伸缩盒子模型显示 */ word-wrap:break-word; -webkit-line-clamp: 2; /* 限制在两行 */ -webkit-box-orient: vertical; /* 垂直排列盒子 */ text-overflow: ellipsis; /* 超出的文本显示为省略号 */ white-space: normal; /* 允许文本换行 */ color: #fff; text-align: left; transition: .5s ease-in-out; font-size: 1.4rem; } .new-timeline-item > div > img{ margin-bottom: 10px; transition: .5s ease-in-out; } .new-timeline-item>div{ /* overflow: hidden; */ transition: .5s ease-in-out; } .lineIcon{ position: absolute; top:0; left: -35px; height: 200px; } .dot{ position: absolute; height: 15px; width: 15px; border-radius: 100%; border: 1px solid #fff; background-color: #061045; } .new-timeline-item>div:hover .timeline-item-text{ transform: translateX(-20px); } .new-timeline-item>div:hover img{ transform: translateX(-20px); box-shadow: 0 0 10px #999; } .new-timeline-item>div:hover h5{ transform: translateX(-20px); } .new-timeline-item:hover .dot{ background: #fff; box-shadow: 0 0 10px #999; } .timeline-item-text{ position: absolute; top: 145px; padding:0 15px; font-size: 12px; text-align: left; overflow: hidden; /* 确保超出的内容会被隐藏 */ display: -webkit-box; /* 作为弹性伸缩盒子模型显示 */ word-wrap:break-word; -webkit-line-clamp: 4; /* 限制在两行 */ -webkit-box-orient: vertical; /* 垂直排列盒子 */ text-overflow: ellipsis; /* 超出的文本显示为省略号 */ white-space: normal; /* 允许文本换行 */ transition: .5s ease-in-out; } .timeline-item1{ top:262px; left: 105px; } .timeline-item2{ top:258px; left: 320px; } .timeline-item3{ top:234px; left: 525px; } .timeline-item4{ top:167px; left: 745px; } .timeline-item5{ top:460px; left: 35px; } .timeline-item6{ top:460px; left: 240px; } .timeline-item7{ top:457px; left: 460px; } .timeline-item8{ top:436px; left: 666px; } .timeline-item9{ top:386px; left: 870px; } .timeline-item10{ top:93px; left: 935px; } .timeline-item11{ top:286px; left: 1100px; } .dot1{ bottom: -56px; left: -41px; } .dot2{ bottom: -60px; left: -41px; } .dot3{ bottom: -80px; left: -39px; } .dot4{ bottom: -114px; left: -39px; } .dot5{ top: -29px; left: -39px; } .dot6{ top: -29px; left: -39px; } .dot7{ top: -27px; left: -41px; } .dot8{ top: -27px; left: -42px; } .dot9{ top: -27px; left: -42px; } .dot10{ bottom: -132px; left: -39px; } .dot11{ top: -27px; left: -42px; } .mobdot{ position: absolute; height: 13px; width: 13px; border-radius: 100%; border: 1px solid #fff; background-color: #061045; color: #fff; } .mobdot1{ left: -5px; bottom: -28px; } .mobdot1::before{ content: '1909'; position: absolute; left: -10px; top: -28px; } .mobdot2{ left: 25px; bottom: -28px; } .mobdot2::before{ content: '1920'; position: absolute; left: -10px; bottom: -28px; } .mobdot3{ left: 60px; bottom: -27px; } .mobdot3::before{ content: '1932'; position: absolute; left: -10px; top: -28px; } .mobdot4{ left: 95px; bottom: -26px; } .mobdot4::before{ content: '1960'; position: absolute; left: -10px; bottom: -28px; } .mobdot5{ left: 130px; bottom: -26px; } .mobdot5::before{ content: '1973'; position: absolute; left: -10px; top: -28px; } .mobdot6{ left: 175px; bottom: -22px; } .mobdot6::before{ content: '2010'; position: absolute; left: -10px; bottom: -28px; } .mobdot7{ left: 210px; bottom: -16px; } .mobdot7::before{ content: '2011'; position: absolute; left: -10px; top: -28px; } .mobdot8{ left: 255px; top:41px } .mobdot8::before{ content: '2012'; position: absolute; left: -10px; bottom: -28px; } .mobdot9{ left: 283px; top:30px } .mobdot9::before{ content: '2020'; position: absolute; left: -20px; top: -20px; } .mobdot10{ left: 314px; top:14px } .mobdot10::before{ content: '2023'; position: absolute; left: -4px; top: 22px; } .mobdot11{ left: 350px; top:-10px } .mobdot11::before{ content: '2025'; position: absolute; left: -20px; top: -20px; } .mobactive{ background: #fff; box-shadow: 0 0 10px #999; } .brandModal{ display: flex; align-items: center; justify-content: center; position:fixed; top:0; right:0; bottom:0; left:0; z-index:9; background:rgba(34,34,34,.9); opacity:1; transition:all .5s ease 0s; transform:translate(-100%,0)} .modalImagePanel{ /* transform: scale(1.2); */ width: 400px; background: #fff; border-radius: 0 0 30px 0; } .modalImagePanel > div { padding: 0 20px 20px 20px; } .modalImagePanel > div > h5{ margin-bottom: 20px; font-size: 18px; } .modalImagePanel > div > p { line-height: 25px; font-size: 14px; color: #666; } .brandModal > img{ transition: .5s linear; cursor: pointer; } .brandModal > img:hover{ transform: scale(1.5); } .brandModal .navClose{ position: absolute; top:20px; right: 20px; } .mbox6 .mbox4List{ padding: 0 110px; } .flex-mbox6{ display: flex; align-items: flex-start; padding: 15px; margin-bottom: 15px; background-color: #fff; box-shadow: 0px 2px 6px 1px rgba(0,0,0,0.16); } .mbox6Bg{ background-color: #f1f2f3; } .newsItemCover{ /* flex:1 0 auto; */ width: 320px; height: 200px; margin-right: 15px; } .titleBox{ flex:1; padding: 20px 20px 0 20px; text-align: left; } .summary{ line-height: 30px; color: #999; margin-top: 30px; } @media (max-width:375px) { .mbox8Mes li { margin-bottom: 10px !important; } .mbox8Left{ padding: 10px 10px 1px 10px !important; } .mbox2TitEn_counter{ margin-top: 20px; } .mbox2Brief p{ line-height: 18px; } .grid { grid-template-columns: repeat(4, 1fr); gap: 10px 1rem !important; min-height: auto; } .timeLineMobile{ transform: scale(0.8); } .mbox6 .mbox4List{ padding: 0; } /* 超小屏缩放 */ .mbox2Text{ transform: scale(0.85); } .mbox3 { transform: scale(0.85); } } @media (max-width:400px) { /* 超小屏缩放 */ .mbox2Text{ transform: scale(0.85); } .mbox3 { transform: scale(0.85); } } @media (max-width:640px) { .logo{ a { display: flex; align-items: center; .flex-index{ display: block; margin: 0 0 0 5px; } } } .child-menu p{ font-size: 12px; } .idxpage5 .fp-tableCell{ display:block } .foot{ font-size: 10px; } .mobileLanglist{ display: flex; align-items: center; } .mobileLang{ flex:1 0 auto; height: 20px; width: 20px; line-height: 22px; text-align: center; border-radius: 2px; margin: 0 5px; font-size: 12px; background: #fff; } .mobileNavLogin{ flex:1 0 auto; height: 20px; padding: 0 3px; line-height: 22px; text-align: center; border-radius: 2px; margin: 0 5px; font-size: 12px; background: #003399; color:#fff; border: 1px solid #fff; } .mobileMbox5Tit{ margin-top: 40px; } .footer{ display: none; } .mbox2Brief{ max-height: 504px; } .videoPlayBtn{ display: none; } .videoPlayBtnPhone{ display: block; text-shadow: 0 0 2px #000; } .banText2{ transform:translate(-50%,-50%) scale(0.8); } .menu-info-container{ width: 100%; } .menu-info{ padding: 20px 0 0 20px !important; } .mbox2TitEn{ height: 150px; position: relative; } .mbox2TitEn_counter{ display: flex; flex-direction: column; align-items: center; } .mbox2TitEn_counter span{ margin-right: 0 !important; } .counter{ font-size: 4rem; margin-top: 20px; } #vd{ height: 100%; width: 100%; left: 0; top:0; background-color: rgba(0, 0, 0, 0.5); } .video-close{ font-size: 4rem; position: absolute; top:20%; left: 10px; color:#fff; z-index: 999; } .mbox8Right{ padding: 15px 20px; } .box3RigImg { position: relative !important; height: 200px; top: 0%; left: 0; width: 100%; transform: translateY(0%) !important; } .mbox{ padding-top:0 } .mbox8RigBotflexmr{ margin: 15px 20px 0 0; flex: 0 0 100%; } .mbox8RigBotflex { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-end; text-align: left; width: 100%; margin: 0; } .mbox8Mes{ font-size: 0; } .mbox8Mes li textarea{ background-color: #fff; border-radius: 3px; padding: 0 10px; margin: 0; color:#333 } .svbutton{ font-size: 14px; width: calc(50% - 5px); flex: 1 0 auto; } .mbox8Mes li:nth-child(1), .mbox8Mes li:nth-child(2) { display: inline-block; width: calc(50% - 5px); vertical-align: middle; } .mbox8Mes li:nth-child(1){ margin-right: 10px; } .mbox8Right{ line-height: 20px; } .mbox8RigBotflex h3{ margin-bottom: 8px; } .mbox8RigEn{ display: none; } .mbox8RigBotflexmr:nth-child(1){ margin-top: 0; } .footer { display: block; padding:20px 10px; font-size: 10px; } .page-banner-content span{ font-size: 12px; } .section-space{ height: 20px !important; } .flex-mbox6{ display: block; padding: 0; } .mbox6{ padding: 30px; } .newsItemCover{ width: 100%; } .titleBox{ flex: 1; padding: 20px; text-align: left; } .summary{ display: none; } .flex-mbox6 img{ display: none; } .flex-mbox6:nth-child(1) img{ display: block; } .flex-mbox6 h4{ font-size: 16px; } .mbox6 .mbox4List{ padding: 0; } .mbox8RigBotflex p a{ display: inline-block; width: 45%; color: #333; margin-right:10px; line-height: 25px; } } .empty{ height: 400px; display: flex; align-items: center; justify-content: center; background-color: #fff; } .mOnLineIco:hover,.mOnLineLang:hover{ background-color: #009966; } .mOnLine{ padding:0; } .onLineWx .mOnLineCon a{ color: #333 !important; font-size: 12px; } .onLineWx .mOnLineCon{ padding: 0; overflow: hidden; } .mOnLineLang { display:flex; align-items: center; justify-content: center; /* background-color: #009966; */ padding:10px 0 25px 0; } .lang-item{ line-height: 48px; color: #666; font-size: 14px; transition: .1s linear; } /* .lang-item:hover{ background-color: #009966; color: #fff !important; } */ @media only screen and (max-width: 767px) { .page-banner-content .page-breadcrumb { right: 20px; position: absolute !important; top: 0; transform: none; margin-top: 0px; max-width: 100%; } } @media (min-width: 768px) { .modal-login-dialog { width: 400px; margin: 30px auto; } } @media (max-width: 992px) { .box3RigImg { position: relative !important; top: 0%; left: 0; width: 100%; transform: translateY(0%) !important; } .mbox4LefBtn { line-height: 32px; } .mbox8Wrap{ padding: 10px; } } @media (max-width: 1600px) { .menu-info { padding: 50px 0 0 15%; } .mOnLineCon { right:50px; } .mOnLineIco{ height: 50px; } } /* 定义元素样式 */ .breath-effect { animation: breathe 2s ease-in-out infinite; } /* 定义动画 */ @keyframes breathe { 0%, 100% { transform: scale(0.9); /* 起始和结束时缩小 */ } 50% { transform: scale(1); /* 中间时恢复原始大小 */ } }