.link-header{ width: 100%; padding: 10px 0px; background: #3d59ae; box-sizing: border-box; } .link-warp{ width: 1180px; margin: auto; } .nav-warp{ display: flex; } .link-logo{ flex: 0 0 auto; height: 60px; } .link-logo img{ height: 100%; width: auto; } .link-nav{ flex: 0 0 auto; margin-left: auto; } .link-nav ul{ width: 100%; display: flex; align-items: center; height: 100%; } .link-nav-title{ font-size: 15px; color: white; padding: 0px 25px; transition: .6s ease; } .link-nav-list:hover .link-nav-title{ color: #C51007; } .link-menu{ flex: 0 0 auto; width: 60px; height: 60px; display: none; margin-left: auto; cursor: pointer; } .menu-box{ width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .menu-warp{ width: 40px; position: relative; /* overflow: hidden; */ } .menu-xt{ width: 100%; height: 4px; margin-bottom: 5px; background: white; border-radius: 5px; transition: 0.6s ease; } .xt2{ transition: 0.3s ease; } .xt1On{ transform: rotate(45deg); position: absolute; top: 2px; } .xt2On{ opacity: 0; visibility: hidden; transform: translateX(-30px); } .xt3On{ transform: rotate(-45deg); position: absolute; top: 2px; } .menu-xt:last-child{ margin-bottom: 0; } .menu-page{ width: 100%; position: fixed; padding: 10px 0px; top: 60px; height: calc(100vh - 60px); transform: translateY(60px); opacity: 0; z-index: -1; visibility: hidden; transition: 0.6s ease; background: #fff; } .menu-page-act{ transform: translateY(0px); opacity: 1; z-index: 99; visibility: visible; } .menu-title{ width: 100%; border-bottom: 1px dashed #F8F8F8; } .menu-title a{ display: block; padding: 15px 0px; font-size: 15px; color: #656565; text-align: center; } .link-footer{ width: 100%; padding: 30px 0px; background: #3D59AE; } .footer-list{ width: 100%; font-size: 13px; color: white; line-height: 24px; } .link-page{ width: 100%; padding: 15px 0px; background: #333; } .link-local{ display: flex; padding-left: 200px; align-items: center; } .link-search{ flex: 0 0 auto; display: flex; align-items: center; } .search-l{ flex: 0 0 auto; } .search-l input{ width: 240px; height: 40px; font-size: 13px; color: #656565; background: #fff; padding: 5px 10px; line-height: 30px; } .search-r{ flex: 0 0 auto; } .search-r input{ line-height: 40px; background: #e4e4e4; color: #656565; font-size: 13px; padding: 0px 20px; } .local-warp{ flex: 0 0 auto; margin-left: auto; } .link-level{ display: flex; } .level-nav{ flex: 0 0 auto; transform: translateY(-80px); width: 180px; } .view-warp{ width: 100%; } .level-header{ width: 100%; padding: 20px 10px; box-sizing: border-box; font-size: 24px; color: white; text-align: center; /* margin-bottom: 1px; */ background: #3D59AE; } .level-warp{ width: 100%; background: #333; } .contact-warp{ width: 100%; background: #333; padding:20px 10px; } .level-list{ width: 100%; border-bottom: 1px solid #545454; } .level-list a{ display: block; font-size: 15px; color: white; padding: 12px 10px; text-align: center; transition: 0.6s ease; } .link-cuttur{ background: #3D59AE; } .level-list:hover a{ background: #3D59AE; } .contact-hedaer{ width: 100%; display: flex; justify-content: center; } .contact-ico{ flex: 0 0 auto; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; } .contact-ico i{ color: white; font-size: 28px; } .contact-name{ flex: 0 0 auto; font-size: 16px; color: white; margin-left: 5px; font-weight: bold; } .contact-tel{ margin-top: 10px; } .tel-list{ font-size: 14px; font-family: arial; color: white; text-align: center; line-height: 28px; } .link-view{ flex: auto; margin-left: 20px; } .content{ width: 100%; } .content p{ font-size: 16px; color: #656565; line-height: 28px; } .swiper-slide img{ width: 100%; } .swiper-container{ background: #333; } .index-title{ width: 175px; height: 50px; margin: auto; position: relative; } .title-name{ line-height: 50px; text-align: center; position: relative; font-size: 16px; color: #656565; letter-spacing: 1px; cursor: pointer; transition: 0.6s ease; } .title-name::before{ content: ''; position: absolute; bottom: 0; width: 30%; height: 1px; background: #666; left: 35%; } .indexxt{ position: absolute; background: #3D59AE; transition-timing-function: linear; } .inxt1{ bottom: 0; width: 3px; height: 1px; right: 50%; transition: 0.1s ease; transition-delay: 0.3s; } .inxt2{ bottom: 0; width: 1px; left: 50%; height: 1px; transition: 0.1s ease; transition-delay: 0.3s; } .inxt3{ bottom: 0; width: 1px; height: 0px; left: 0; transition: 0.3s ease; transition-delay: 0.2s; } .inxt4{ bottom: 0; width: 1px; right: 0; height: 0px; transition: 0.3s ease; transition-delay: 0.2s; } .inxt5{ top: 0; width: 0px; height: 1px; left:0; transition: 0.5s ease; transition-delay: 0s; } .inxt6{ top: 0; width: 0px; right: 0; height: 1px; transition: 0.5s ease; transition-delay: 0s; } .index-title:hover .inxt1,.index-title:hover .inxt2{ width: 50%; transition-delay: 0s; } .index-title:hover .inxt3,.index-title:hover .inxt4{ height: 100%; transition-delay: 0.15s; } .index-title:hover .inxt5,.index-title:hover .inxt6{ width: 50%; transition-delay: 0.2s; } .index-title:hover .title-name{ color: #3D59AE; } .link-banner{ width: 100%; position: relative; } .lang{ position: absolute; top: 50px; width: 100%; height: 40px; z-index: 1; } .lang ul{ width: 100%; display: flex; justify-content: flex-end; box-sizing: border-box; padding-right: 50px; } .lang-list a{ display: block; padding: 5px 10px; margin-right: 20px; font-size: 12px; color: white; border: 1px solid #fff; } .link-video-box{ position: fixed; width: 300px; top: 10%; left: 0; z-index: 9999; background: #3a3b4c; border-radius: 10px; padding: 10px; box-sizing: border-box; } /* .index-title:hover .inxt2{ width: 50%; } */ .link-colse{ width: 100%; display: flex; height: 30px; justify-content: flex-end; } .clso{ width: 20px; height: 20px; border-radius: 50%; background: #3D59AE; display: flex; align-items: center; justify-content: center; } .clso i{ font-size: 12px; color: white; } .link-pc-nav{ display: block; } .link-web-nav{ display: none; position: fixed; top: 0; width: 100%; z-index: 99999; } .lin-about{ padding: 80px 0px; } .link-about-con{ margin: 50px auto 0px; width: 800px; } .link-about-more{ width: 100%; display: flex; justify-content: center; margin-top: 30px; } .link-about-more a{ display: block; padding: 10px 25px; border: 1px solid #3D59AE; font-size: 15px; color: #3D59AE; transition: 0.6s ease; } .link-about-more:hover a{ background: #3D59AE; color: white; } .link-about-conetnt{ font-size: 15px; text-align: center; line-height: 28px; color: #656565; font-weight: 300; text-indent: 2em; }