.container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } .flex { display: flex; flex-wrap: wrap; justify-content: space-between; } .head { width: 100%; } .hd-show { height: 84px; display: flex; flex-wrap: wrap; justify-content: space-between; } .logo { height: 100%; display: flex; align-items: center; border-right: solid 1px #fff; } .logo a { display: block; overflow: hidden; } .logo a img { max-width: 100%; } .hd-nav { width: 72.8824%; display: flex; justify-content: flex-end; } .hd-right { width: 23.353%; display: flex; flex-wrap: wrap; justify-content: space-between; } .hd-lang { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; width: 37.7834%; } .hd-lang .lang-ico { overflow: hidden; } .hd-lang .lang-ico img { max-width: 100%; } .hd-lang a { display: block; font-size: 16px; color: rgba(17, 17, 17, 0.6); margin-left: 15px; } .hd-lang a:hover { color: #034399; } .hd-tel { background-color: #034399; width: calc(100% - 37.7834%); display: flex; align-items: center; justify-content: center; } .hd-tel p.hd-tit { font-size: 16px; color: rgba(255, 255, 255, 0.8); } .hd-tel h3 { font-size: 24px; font-family: Arial; font-weight: bold; color: #fff; font-style: italic; margin-top: 3px; } .navr { position: relative; justify-content: flex-end; align-items: center; } .ss { display: none; position: absolute; right: 0; top: 90px; width: 238px; padding: 20px; z-index: 999; background: rgb(0, 0, 0, 0.5); } .ss input { outline: none; line-height: 30px; width: 20%; background: none; border: 1px solid #145ba9; background: #145ba9; font-size: 13px; color: #fff; float: left; } .ss #keyword { padding-left: 10px; line-height: 30px; width: 80%; background: none; border: 1px solid rgba(255, 255, 255, .3); border-right:none; outline: none; font-size: 13px; color: rgba(255, 255, 255, .5); float: left; } .ss #keyword:-webkit-autofill { -webkit-text-fill-color: #fff !important; transition: background-color 5000s ease-in-out 0s; } .ss #keyword::placeholder { color: #fff; } @media(max-width:1430px) { .logo { width: 15%; height: 100%; display: flex; align-items: center; border-right: solid 1px #fff; padding-right: 1%; } .hd-lang a { margin-left: 8px; } .hd-tel h3 { font-size: 22px; } } @media(max-width:1200px) { .hd-tel h3 { font-size: 16px; } } .x-menu { width: 68.372%; display: flex; flex-wrap: wrap; justify-content: space-between; } .x-menu>li { position: relative; } .x-menu>li>a { height: 100%; display: flex; align-items: center; font-size: 17px; color: #333; position: relative; } /*.x-menu>li>a::after { content: ''; position: absolute; top: 0; left: 50%; width: 0; height: 5px; background-color: #034399; z-index: 9999; transition: all .3s ease; } .x-menu>li>a::before { content: ''; position: absolute; top: 0; right: 50%; width: 0; height: 5px; background-color: #034399; z-index: 9999; transition: all .3s ease; }*/ .x-menu>li.active>a { color: #145ba9; } .x-menu>li>a:hover { color: #145ba9; } .x-menu>li>a:hover::after, .x-menu>li>a:hover::before { width: 50%; } .x-sub-menu { position: absolute; z-index: 9999; width: 120px; left: 50%; top: 100%; margin-left: -60px; background: #fff; padding: 10px 0; opacity: 0; visibility: hidden; -webkit-transform: translateY(20px); transform: translateY(20px); -webkit-transition: all .5s ease; transition: all .5s ease; } .x-menu>li:hover .x-sub-menu { opacity: 1; visibility: visible; -webkit-transform: translateY(0); transform: translateY(0); } .x-sub-menu>li>a { display: block; text-align: center; font-size: 14px; color: #333; line-height: 1.5; padding: .5em; } .x-sub-menu>li>a:hover { background: #e9eaeb; } .x-sub-menu:after { display: none; content: ''; width: 0; height: 0; line-height: 0; font-size: 0; overflow: hidden; border-width: 10px; cursor: pointer; border-style: dashed dashed solid dashed; border-color: transparent transparent #fff transparent; border-top: none; position: absolute; top: -10px; left: 50%; margin-left: -10px; z-index: 99; } @media(max-width:1200px) { .x-menu>li>a { font-size: 15px; } } .banner { position: relative; } .banner .owl-carousel .owl-dots { position: absolute; z-index: 999; left: 0; width: 100%; text-align: center; font-size: 0; bottom: 6%; } .banner .owl-carousel .owl-dots button.owl-dot { display: inline-block; vertical-align: middle; font-size: 14px; margin: 0 1em; outline: none; background: rgba(255, 255, 255, 0.7); width: 10px; height: 10px; transition: all .5s; border-radius: 50%; } .banner .owl-carousel .owl-dots button.owl-dot:hover, .banner .owl-carousel .owl-dots button.owl-dot.active { background: #fff; width: 48px; border-radius: 15px; } /* 关于我们 */ .about { padding-top: 105px; background-size: cover !important; } .about .container { position: relative; padding-bottom: 28vh; } .about .about-title { text-align: left; color: #fff; font-size: 48px; font-weight: bold; line-height: 54px; } .about-more { margin-top: 70px; } .about-list { width: 100%; position: absolute; left: 0; bottom: -24%; right: 0; padding: 0 15px; } .about-list ul { display: flex; flex-wrap: wrap; margin: 0 -10px; } .about-list ul li { text-align: center; width: 25%; } .about-list ul li .item { background: #fff; margin: 0 10px; padding: 12%; } .about-list ul li h3 { color: #333; font-size: 24px; font-weight: bold; margin-bottom: 24px; margin-top: 30px; } .about-list ul li .img { width: 80px; height: 80px; overflow: hidden; margin: 0 auto; } .about-list ul li .img img { max-width: 100%; } .about-list ul li p { color: #666666; font-size: 15px; line-height: 25px; } .about-list ul li:hover .item { background: #0f328c; } .about-list ul li:hover .img img { transform: translateY(-80px); filter: drop-shadow(#fff 0 80px); } .about-list ul li:hover h3,.about-list ul li:hover p { color: #fff; } .abt-warp { position: absolute; top: 0; left: 0; width: 100%; padding-top: 80px; z-index: 999; } .abt-show { max-width: 710px; } .abt-tit { padding-left: 30px; border-left: solid 10px #034399; line-height: 1; margin-top: 30px; } .abt-tit h3 { font-size: 28px; font-weight: bold; color: #111; line-height: 1; } .abt-tit span { display: block; font-size: 32px; color: #666; margin-top: 8px; } .abt-text { font-size: 16px; line-height: 34px; color: #fff; margin-top: 30px; width: 60%; } .abt-more { display: flex; flex-wrap: wrap; justify-content: flex-start; margin-top: 30px; } .abt-more a { display: block; width: 160px; line-height: 48px; border: solid 1px #034399; border-radius: 6px; text-align: center; font-size: 16px; color: #034399; transition: all .3s ease; } .abt-more a.more1 { background-color: #034399; color: #fff; margin-right: 25px; } .abt-more a.more2:hover { background-color: #034399; color: #fff; } .abt-list { max-width: 1080px; background-color: #fff; box-shadow: 0px 14px 8px rgb(0 0 0 / 9%); padding: 51px 0; margin-top: 55px; } .abt-list ul { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } .abt-list ul::after, .abt-list ul::before {} .abt-list ul li { position: relative; } .abt-list ul li .abt-num { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: flex-start; } .abt-list ul li+li::after { position: absolute; content: ''; width: 1px; height: 49px; background: url(../images/lico.png)no-repeat center; left: -40px; top: 15px; z-index: 9999; } .abt-list ul li .abt-num h3 { font-size: 48px; font-family: Impact; font-weight: normal; color: #333; line-height: 44px; } .abt-list ul li .abt-num span { display: flex; align-items: center; justify-content: center; font-size: 14px; color: #fff; width: 24px; height: 24px; background-color: #034399; border-radius: 50%; margin-left: 10px; } .abt-list ul li p { font-size: 16px; color: #111; margin-top: 10px; } .abt-right { display: flex; justify-content: flex-end; } .abt-content { width: 53.125%; } .abt-con ul li { overflow: hidden; } .abt-con ul li img { max-width: 100%; } .apply { background: url(../images/apply_bg.jpg) top center no-repeat; background-size: cover; padding-top: 30vh; padding-bottom: 10vh; } .apply-list { margin-top: 55px; width: 100%; position: relative; max-height: 572px; } .tab-con .tab-main { opacity: 0; visibility: hidden; transition: all .5s ease; position: absolute; left: 0; top: 0; z-index: 9; right: 0; } .tab-con .tab-main img { width: 100%; } .tab-con .tab-main.active { position: static; opacity: 1; visibility: visible; } .tab-item { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .tab-item .csort { display: flex; flex-wrap: wrap; height: 100%; } .csort li { width: 25%; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; cursor: pointer; transition: all .5s ease; } .csort li:not(:last-child) { border-right: 1px solid rgba(255, 255, 255, 0.2); } .csort li .img img { max-width: 100%; } .csort li h3 { color: #ffffff; font-size: 24px; font-weight: normal; margin-top: 15px; } .csort li.active { padding-bottom: 50px; } @media(max-width:1730px) { .abt-list { max-width: initial; } } @media(max-width:1430px) { .abt-warp { padding-top: 40px; } .abt-show { max-width: 50%; } .abt-list { margin-top: 0px; } .abt-tit span { font-size: 26px; } } @media(max-width:1200px) { .abt-warp { padding-top: 10px; } .abt-tit span { font-size: 22px; } .abt-text { margin-top: 25px; } } @media(max-width:990px) { .abt-right { display: none; } .abt-warp { position: initial; } .abt-show { max-width: 100%; } .abt-list ul li+li::after { background: none; } } @media(max-width:768px) { .about { padding-top: 50px; } .about .about-title { font-size: 28px; line-height: 40px; } .abt-tit { padding-left: 10px; margin-top: 15px; border-left: solid 3px #e40012; } .abt-tit h3 { font-size: 24px; } .abt-tit span { font-size: 16px; } .about-more { margin-top: 30px; } .about-more img { width: 36px; height: 36px; } .about .container { padding-bottom: 6vh; } .about-list { position: relative; padding: 20px 0; } .about-list ul li { width: 50%; } .about-list ul li .item { padding: 12% 0; } .about-list ul li .img { width: 60px; height: 60px; } .about-list ul li h3 { font-size: 18px; } .about-list ul li p { font-size: 13px; } .abt-text { width: 100%; font-size: 14px; line-height: 28px; margin-top: 20px; } .abt-more a { width: 110px; line-height: 32px; } .abt-list ul { justify-content: space-evenly; } .abt-list ul li .abt-num h3 { font-size: 34px; } .abt-list ul li .abt-num span { width: 18px; height: 18px; } .abt-list ul li p { font-size: 15px; } } @media(max-width:550px) { .abt-list ul li{ margin-top: 10px; } } .tit { font-size: 48px; font-weight: bold; color: #222222; text-align: center; } .tit-span { display: block; text-align: center; width: 58px; height: 3px; background: #e32530; margin: 0 auto; margin-top: 20px; } .tit-p { text-align: center; color: #555555; font-size: 20px; margin-top: 15px; } @media(max-width:1730px) { .tit { font-size: 38px; } } @media(max-width:1200px) { .tit { font-size: 32px; } .th-tit { margin-top: 12px; } .th-tit p { margin-top: 14px; } } @media(max-width:550px) { .tit { font-size: 26px; } } /* 企业产能展示 */ .tech { padding: 120px 0; } .th-show { display: flex; flex-wrap: wrap; justify-content: space-between; } .th-left { width: 65.8824%; } .th-left .th-list { display: none; } .th-right { width: 23.2353%; } .th-tit { margin-top: 30px; } .th-tit h3 { font-size: 28px; font-weight: bold; color: #111; } .th-tit p { font-size: 18px; line-height: 32px; color: #666; margin-top: 20px; } .th-cfn { margin-top: 65px; } .th-cfn ul li { padding-left: 75px; padding-right: 20px; background-color: #eee; cursor: pointer; } .th-cfn ul li.cur { background-color: #f8f8f8; } .th-cfn ul li span { display: flex; justify-content: flex-start; align-items: center; line-height: 78px; font-size: 24px; color: #333; background: url(../images/th_ico1.png)no-repeat right center; position: relative; transition: all .5s ease; } .th-cfn ul li span::before { position: absolute; content: ''; width: 0; right: calc(100% + 33px); height: 1px; background-color: #034399; transition: all .5s ease; } .th-cfn ul li.cur span::before { width: 105px; } .th-cfn ul li.cur span { color: #034399; background: url(../images/th_ico2.png)no-repeat right center; } .th-cfn ul li span::after { display: block; content: ''; width: 127px; height: 1px; background: url(../images/th_ico.png)no-repeat; margin-left: 10px; } .th-list ul { display: flex; flex-wrap: wrap; justify-content: space-between; } .th-list ul::after, .th-list ul::before { display: none; } .th-list ul li { width: 32.1429%; } .th-list ul li a { display: block; position: relative; overflow: hidden; } .th-list ul li a .th-img { overflow: hidden; } .th-list ul li a .th-img img { width: 100%; transition: all .5s ease; } .th-list ul li a:hover .th-img img { transform: scale(1.1); } .th-list ul li a .th-text { position: absolute; bottom: 0; left: 0; width: 100%; background-image: linear-gradient(rgba(198, 8, 21, 0), #034399); } .th-list ul li a .th-text .th-con { padding: 40px 20px 35px 60px; position: relative; } .th-list ul li a .th-text .th-con::after { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; background-color: #034399; transform: translateY(100%); z-index: 9; transition: all .5s ease; } .th-list ul li a:hover .th-text .th-con::after { transform: translateY(0); } .th-list ul li a .th-text h3 { font-size: 18px; font-weight: bold; color: #fff; transform: translateY(40px); position: relative; z-index: 99; transition: all .3s ease; } .th-list ul li a .th-text h3::after { position: absolute; content: ''; width: 0; height: 1px; background-color: #fff; right: calc(100% + 12px); top: 8px; transition: all .3s ease; } .th-list ul li a:hover .th-text h3::after { width: 31px; transition-delay: 300ms; } .th-list ul li a .th-text p { font-size: 14px; color: rgba(255, 255, 255, 0.6); margin-top: 10px; transform: translateY(60px); position: relative; z-index: 99; transition: all .5s ease; } .th-list ul li a:hover .th-text h3 { transform: translateY(0); } .th-list ul li a:hover .th-text p { transform: translateY(0); } @media(max-width:1730px) { .th-cfn ul li { padding-left: 50px; } .th-cfn { margin-top: 15px; } .th-list ul li a .th-text .th-con { padding: 40px 20px 76px 60px; position: relative; } } @media(max-width:1430px) { .tech { padding: 120px 0 70px 0; } .th-list ul li a .th-text .th-con { padding: 15px 15px 76px 30px; } .th-right { width: 28%; } .th-cfn ul li.cur span::before { width: 60px; } .th-cfn ul li span { line-height: 60px; font-size: 20px; } } @media(max-width:1200px) { .th-cfn ul li { padding-left: 42px; } .th-list ul li a .th-text h3 { font-size: 16px; } .th-cfn ul li span { font-size: 16px; } .th-tit { margin-top: 12px; } .th-tit p { font-size: 15px; line-height: 24px; color: #666; margin-top: 8px; } } @media(max-width:990px) { .tech { padding: 0px 0 30px 0; } .th-show { flex-direction: column-reverse; } .th-left { width: 100%; margin-top: 35px; } .th-right { width: 100%; } .th-cfn ul li span::before { display: none; } } @media(max-width:768px) { .th-tit h3 { font-size: 24px; } .th-list ul li a .th-text h3 { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } } @media(max-width:550px) { .th-list ul li { width: 100%; margin-bottom: 20px; } .th-list ul li a .th-img img { width: 100%; } } /* 行业市场 */ .industry { position: relative; } .industry .title { position: absolute; width: 100%; left: 0; top: 160px; z-index: 999; } .industry .title .tit { -webkit-text-stroke: 1px #fff; } .industry .title h3 { font-size: 28px; font-weight: bold; color: #fff; margin-top: 30px; } .ind-show { position: relative; } .ind-imgs ul li { position: relative; } .ind-imgs ul li .ind-img { overflow: hidden; } .ind-imgs ul li .ind-img img { max-width: 100%; } .ind-imgs ul li .ind-text { position: absolute; width: 100%; left: 0; bottom: 230px; } .ind-imgs ul li .ind-text p { font-size: 18px; color: #fff; line-height: 30px; max-width: 1180px; } .ind-con { position: absolute; width: 100%; bottom: 0; left: 0; z-index: 9999; } .ind-list { border: solid 1px rgba(255, 255, 255, 0.4); } .ind-list ul li { width: 25%; cursor: pointer; transition: all .5s ease; } .ind-list ul li+li { border-left: solid 1px rgba(255, 255, 255, 0.4); } .ind-list ul li .con { position: relative; padding: 95px 25px 45px 45px; } .ind-list ul li .con .ind-ico { overflow: hidden; position: absolute; top: 15px; right: 25px; } .ind-list ul li .con .ind-ico img { max-width: 100%; opacity: .1; } .ind-list ul li .con h3 { font-size: 18px; font-weight: bold; color: #fff; position: relative; } .ind-list ul li .con h3::after { position: absolute; content: ''; width: 25px; height: 1px; background-color: rgba(255, 255, 255, 0.6); left: 0; top: -20px; opacity: 0; } .ind-list ul li.swiper-slide-thumb-active .con h3::after { opacity: 1; transition-delay: 500ms; } .ind-list ul li .con p { font-size: 16px; font-family: Arial; color: rgba(255, 255, 255, 0.4); margin-top: 10px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .ind-list ul li.swiper-slide-thumb-active { background-color: #034399; } @media(max-width:1730px) { .industry .title { top: 105px; } } @media(max-width:1430px) { .industry .title { top: 3vw; } } @media(max-width:1200px) { .ind-list ul li .con { padding: 50px 5px 35px 5px; } .ind-imgs ul li .ind-text { bottom: 170px; } } @media(max-width:990px) { .industry { margin-top: 30px; } .ind-show { margin-top: 20px; } .industry .title { position: initial; } .industry .title .tit { -webkit-text-stroke: 1px #999; } .industry .title h3 { font-size: 24px; font-weight: bold; color: #111; margin-top: 5px; } .ind-list ul li .con { padding: 20px 5px 20px 5px; } .ind-list ul li .con p { display: none; } .ind-imgs ul li .ind-text { bottom: 50%; } .ind-imgs ul li .ind-text p { font-size: 14px; line-height: 24px; } .ind-list ul li .con h3 { font-size: 15px; } } .test { padding-top: 115px; padding-bottom: 60px; } .test-cfn { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: flex-start; margin-top: 15px; } .test-cfn h3 { font-size: 28px; font-weight: bold; color: #111; } .test-cfn p { width: 46.4706%; line-height: 8px; margin-left: 15px; } .cfn-list { display: flex; flex-wrap: wrap; justify-content: center; } .cfn-list li { display: inline-block; } .cfn-list li a { font-size: 18px; color: #555555; display: block; line-height: 50px; text-align: center; padding: 0 30px; border-radius: 50px; } .cfn-list li.cur a { background-color: #145ba9; color: #fff; } .cfn-list li a:hover { color: #fff; background-color: #145ba9; } .ttz { display: none; } .test-show { margin-top: 45px; } .test-list ul li {} .test-list ul li a { display: block; } .test-list ul li a .test-img { overflow: hidden; } .test-list ul li a .test-img img { max-width: 100%; transition: all .5s ease; } .test-list ul li a:hover .test-img img { transform: scale(1.1); } .test-list ul li a .test-text { background-color: #f5f5f5; height: 100px; padding-left: 50px; padding-top: 25px; padding-right: 20px; } .test-list ul li a .test-text h3 { font-size: 18px; font-weight: bold; color: #111; position: relative; } .test-list ul li a .test-text h3::after { position: absolute; content: ''; width: 0; height: 2px; background-color: #034399; right: calc(100% + 10px); top: 8px; transition: all .3s ease; } .test-list ul li a .test-text p { font-size: 14px; color: #999; margin-top: 10px; } .test-list ul li a:hover .test-text h3 { color: #034399; } .test-list ul li a:hover .test-text h3::after { width: 31px; } .product .test-cfn p{ width: 45% } /*.cfn-list{*/ /* width: calc(100% - 112px - 15px - 45% - 10px);*/ /*}*/ @media(max-width:1730px) { .test-cfn p { width: 25%; overflow: hidden; } } @media(max-width:1430px) { .test { padding-top: 70px; } .test-cfn p { width: 20%; } } @media(max-width:1200px) { .test-cfn p { display: none; } .test-list ul li a .test-text { padding-left: 15px; padding-top: 20px; padding-right: 15px; } } @media(max-width:990px) { .test-show { margin-top: 25px; } } @media(max-width:768px) { .test-cfn h3 { font-size: 24px; } .test-list ul li a .test-text h3 { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .test { padding: 30px 0; } } @media(max-width:550px) { .test-list ul li a .test-text p { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } } .product { padding-top: 80px; padding-bottom: 50px; background: #f0f4f8; } .pro-cfn { margin-top: 45px; } .pro-cfn h3 { font-size: 28px; font-weight: bold; } .pro-cfn p { width: 45%; line-height: 8px; margin-left: 15px; } .pro-cfn p img{ width: 100%; } .pro-show { margin-top: 55px; } .pro-list ul li { padding-bottom: 30px; } .pro-list ul li a { display: block; margin: 0 12px; padding-top: 10px; } .pro-list ul li a .pro-img { overflow: hidden; transition: all .5s ease; } .pro-list ul li a .pro-img img { max-width: 100%; transition: all .5s ease; } .pro-list ul li a:hover .pro-img img { transform: scale(1.1); } .pro-list ul li a .pro-text { } .pro-list ul li a .pro-text h3 { font-size: 18px; color: #444444; position: relative; text-align: center; line-height: 5em; font-weight: normal; } .pro-list ul li a:hover .pro-text h3 { color: #145ba9; } .pro-list ul li a:hover .pro-img { box-shadow: 0 0 10px rgba(20, 91, 169, 0.1); } .pr-top { position: relative; } .pr-top .owl-carousel .owl-dots { position: absolute; z-index: 999; left: 0; width: 100%; text-align: center; font-size: 0; bottom: 0; } .pr-top .owl-carousel .owl-dots button.owl-dot { display: inline-block; vertical-align: middle; font-size: 14px; margin: 0 1em; outline: none; width: 12px; height: 12px; transition: all .5s; border-radius: 50%; border: 1px solid #145ca8; } .pr-top .owl-carousel .owl-dots button.owl-dot:hover, .pr-top .owl-carousel .owl-dots button.owl-dot.active { background: #145ca8; } @media(max-width:1730px) { .pro-cfn p { width: 25%; overflow: hidden; } } @media(max-width:1430px) { .product { padding-top: 30px; padding-bottom: 50px; } .pro-cfn p { width: 15%; overflow: hidden; } } @media(max-width:1200px) { .pro-cfn p { display: none; } } @media(max-width:990px) { .pro-list ul li a .pro-text h3{ text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } } @media(max-width:768px) { .pro-cfn h3 { font-size: 24px; } .pro-list ul li { width: 50%; float: left; padding-bottom: 10px; } .pro-list ul li a .pro-text h3 { font-size: 14px; line-height: 4em; } } .news { padding: 8vh 0; } .news-con { display: flex; flex-wrap: wrap; margin-top: 55px; justify-content: space-between; } .news-con .news-l { width: 49%; } .news-con .news-l li { list-style: none; } .news-con .news-l li .new-img { overflow: hidden; } .news-con .news-l li .new-img img { width: 100%; transition: all .5s; } .news-con .news-l li:hover img { transform: scale(1.1); } .news-con .news-l li h3 { color: #222222; font-size: 20px; font-weight: bold; margin: 30px 0; } .news-con .news-l li p { color: #666666; font-size: 14px; line-height: 24px; } .news-con .news-l li .new-text { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } .news-con .news-l li .new-text .txt { width: 75%; } .news-con .news-l li .new-text .date { width: 16.5%; } .news-con .news-l li .new-text .date span { color: #222222; font-size: 44px; font-weight: bold; font-family: arial; } .news-con .news-l li:hover h3,.news-con .news-l li:hover .new-text .date span { color: #165ba8; } .news-con .news-r { width: 47%; } .news-con .news-r li { list-style: none; } .news-con .news-r li { margin-bottom: 22px; background: #f0f4f8; padding: 4% 5%; } .news-con .news-r li h3 { color: #222222; font-size: 18px; font-weight: bold; margin-bottom: 12px; } .news-con .news-r li .summary { color: #777777; font-size: 14px; line-height: 24px; } .news-con .news-r li span { display: block; color: #888888; font-size: 14px; font-family: arial; background: url(../images/date.png) 0 50% no-repeat; padding-left: 28px; margin-top: 12px; } .news-con .news-r li:hover { background: #145ca8; } .news-con .news-r li:hover h3,.news-con .news-r li:hover .summary,.news-con .news-r li:hover span { color: #fff; } .news-con .news-r li:hover span { background: url(../images/date2.png) 0 50% no-repeat; } .new-show { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; } .new-left { width: 28.5294%; position: relative; } .new-left::after { position: absolute; content: ''; width: 200%; height: 900px; right: 0; top: -110px; background-color: #e7e6e6; z-index: 9; } .new-left .tit { -webkit-text-stroke: 1px #034399; position: relative; z-index: 99; } .new-tit { margin-top: 15px; position: relative; z-index: 99; } .new-tit h3 { font-size: 28px; font-weight: bold; color: #111; } .new-tit p { font-size: 32px; font-weight: bold; color: #999; margin-top: 20px; } .new-top { margin-top: 20px; position: relative; z-index: 99; } .new-top li a { display: block; } .new-top li a .new-img { overflow: hidden; } .new-top li a .new-img img { width: 100%; transition: all .5s ease; } .new-top li a:hover .new-img img { transform: scale(1.1); } .new-top li a .new-text { background-color: #e7e6e6; max-width: 425px; padding-top: 28px; margin-top: -60px; position: relative; z-index: 999; } .new-top li a .new-text h3 { font-size: 18px; font-weight: bold; color: #333; } .new-top li a:hover .new-text h3 { color: #034399; } .new-top li a .new-text p { font-size: 14px; line-height: 24px; color: #666; margin-top: 35px; } .new-right { width: 68.2353%; } .new-cfn { display: flex; flex-wrap: wrap; justify-content: flex-end; } .new-cfn ul { display: flex; flex-wrap: wrap; justify-content: flex-end; } .new-cfn ul li { margin-left: 45px; } .new-cfn ul li a { font-size: 18px; color: #111; padding-right: 15px; background: url(../images/tt_ico.png)no-repeat right center; } .new-cfn ul li a:hover { color: #034399; background: url(../images/tt_ico1.png)no-repeat right center; } .new-list { margin-top: 60px; padding-top: 20px; padding-bottom: 40px; border-bottom: solid 1px #e2e2e2; } .new-list ul li { position: relative; } .new-list ul li a { display: block; transition: all .5s ease; } .new-list ul li a:hover { transform: translateY(-20px); } .new-list ul li a .new-img { overflow: hidden; position: relative; } .new-list ul li a .new-img img { width: 100%; } .new-list ul li a .new-img::after { position: absolute; content: ''; width: 100%; height: 50%; background-image: linear-gradient(rgba(198, 8, 21, 0), #034399); bottom: 0; left: 0; transform: translateY(100%); transition: all .5s ease; } .new-list ul li a:hover .new-img::after { transform: translateY(0); } .new-list ul li::before { position: absolute; content: ''; width: 0; height: 1px; background-color: #c2c2c2; left: 0; bottom: -40px; transition: all .5s ease; } .new-list ul li:hover:before { width: 100%; } .new-list ul li a .new-text { background-color: #fff; height: 160px; text-align: center; padding: 40px 8px 25px; display: flex; flex-flow: column; justify-content: space-between; } .new-list ul li a .new-text h3 { font-size: 20px; font-weight: bold; color: #333; line-height: 32px; } .new-list ul li a .new-text span { font-size: 16px; color: #999; } @media(max-width:1730px) { .new-list ul li a .new-text h3 { font-size: 16px; font-weight: bold; color: #333; line-height: 32px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } } @media(max-width:990px) { .news { padding-top: 40px; padding-bottom: 40px; } .new-left { width: 100%; } .new-right { width: 100%; } .new-left::after { display: none; } .new-top li a .new-text { max-width: 100%; padding-bottom: 20px; padding-left: 10px; padding-right: 10px; } .new-top li a .new-text p { margin-top: 25px; } .new-cfn { display: none; } .new-list { margin-top: 25px; } .new-list ul li a .new-text { height: initial; padding: 18px 8px 25px; } } @media(max-width:768px) { .news { padding-bottom: 0px; } .new-tit h3 { font-size: 24px; } .new-tit p { font-size: 24px; margin-top: 10px; } } .hf { background: url(http://cdn.qsyseo.top/hanxun/assets/images/hf_banner.png)no-repeat center; padding-top: 110px; padding-bottom: 120px; } .hf-show { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } .hf-tit { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-end; } .hf-tit h3 { font-size: 48px; font-weight: bold; color: #fff; line-height: 1; } .hf-tit p { font-size: 18px; color: #fff; font-weight: bold; line-height: 1; margin-left: 10px; } .hf-tit p span { color: #fff; } .hf-left h4 { font-size: 18px; color: #fff; font-weight: bold; margin-top: 15px; } .hf-right span { display: block; font-size: 18px; color: rgba(255, 255, 255, 0.6); } .hf-right h3 { font-size: 36px; font-family: Arial; font-weight: 900; color: #fff; margin-top: 5px; } @media(max-width:990px) { .hf { padding-top: 45px; padding-bottom: 45px; } .hf-tit h3 { font-size: 32px; } .hf-right h3 { font-size: 30px; } .hf-right { margin-top: 10px; } } @media(max-width:550px) { .hf-right { margin-top: 25px; } } .foot { background-color: #01152c; margin-top: 2%; } .foot-top { padding: 50px 0; } .foot-top .container { display: flex; flex-wrap: wrap; justify-content: space-between; } .foot-fl { width: 60%; } .ft-nav { width: calc(100% / 4); } .ft-nav h3 { color: #fff; font-size: 17px; line-height: 36px; font-weight: bold; text-align: left; } .ft-nav ul { margin-top: 10px; } .ft-nav li a { display: block; font-size: 14px; color: rgba(255, 255, 255, 0.5); line-height: 32px; text-align: left; } .ft-nav li a:hover { color: #fff; } .ft-contact { width: 19%; } .ft-contact h3 { color: #fff; font-size: 17px; line-height: 36px; font-weight: bold; text-align: left; } .ft-contact .text { color: rgba(255, 255, 255, 0.5); font-size: 14px; line-height: 32px; } .ft-logo { width: 20%; } .ft-share { margin-top: 30px; } .ft-share .social-share .social-share-icon { width: 30px; height: 30px; border-radius: 3px; line-height: 30px; border: none; background: none; color: rgba(255, 255, 255, 0.3); font-size: 18px; margin-right: 10px; border: 1px solid rgba(255, 255, 255, 0.3); } .ft-ewm { overflow: hidden; padding-top: 45px; width: 9.5%; text-align: center; } .ft-ewm p { color: rgba(255, 255, 255, 0.5); font-size: 15px; line-height: 36px; } .ft-ewm img { max-width: 100%; } .foot-bt { padding: 20px 0; border-top: 1px solid rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.5); font-size: 14px; line-height: 38px; text-align: center; } .foot-bt a { color: rgba(255, 255, 255, 0.5); font-size: 14px; } .foot-bt a:hover { color: #fff; } .copy { float: left; } .reg { float: right; } .company-profile { padding-bottom: 50px; } .company-profile h3 { display: block; font-size: 36px; font-weight: bold; font-stretch: normal; line-height: 1.5; letter-spacing: 0px; color: #333333; text-align: center; } .company-profile .profile { font-size: 16px; font-weight: normal; font-stretch: normal; line-height: 2.1; letter-spacing: 0px; color: #333333; margin-top: 2.84%; } .company-profile .profile-img { margin-top: 5.6%; } .company-profile .profile-img ul { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: nowrap; } .company-profile .profile-img ul li { width: 24%; } .company-profile .profile-img ul li a { display: block; position: relative; overflow: hidden; padding-top: calc(276 / 353 * 100%); } .company-profile .profile-img ul li a img { position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1); transition: 0.5s ease; max-width: 100%; } .company-profile .profile-img ul li:hover img { transform: scale(1.1); } .company-culture { position: relative; overflow: hidden; z-index: 20; } .company-culture .culture-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; } .company-culture .culture-bg .img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; visibility: hidden; opacity: 0; transition: 0.5s ease; } .company-culture .culture-bg .img.active { z-index: 10; position: relative; visibility: visible; opacity: 1; transition: 0.3s all; } .company-culture .culture-bg .img img { display: block; width: 100%; height: 100%; object-fit: cover; max-width: 100%; } .company-culture h3 { position: absolute; top: 11%; left: 0; width: 100%; z-index: 30; text-align: center; display: block; font-size: 36px; font-weight: bold; font-stretch: normal; line-height: 1.5; letter-spacing: 0px; color: #fff; } .company-culture .cluture-txt { position: relative; z-index: 10; } .company-culture .cluture-txt ul { display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: unset; } .company-culture .cluture-txt ul li { border-right: 1px solid rgba(255, 255, 255, 0.1); flex: 1; position: relative; } .company-culture .cluture-txt ul li::after { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: linear-gradient(to top,#000000,rgba(0, 0, 0, 0)); opacity: 0; transition: 0.5s ease; z-index: 1; } .company-culture .cluture-txt ul li.active::after { opacity: 0.3; transition: 0.3s all; } .company-culture .cluture-txt ul li a { display: block; padding: 91% 17% 38.8%; text-align: center; transition: 0.5s ease; position: relative; z-index: 20; } .company-culture .cluture-txt ul li a .img { display: block; width: 100%; text-align: center; height: 60px; opacity: 0; transition: 0.5s ease; } .company-culture .cluture-txt ul li a .img img { max-width: 100%; display: block; margin: 0 auto; height: 100%; object-fit: contain; } .company-culture .cluture-txt ul li a .txt { margin-top: 9%; transition: 0.5s ease; } .company-culture .cluture-txt ul li a .txt h4 { font-size: 24px; font-weight: bold; font-stretch: normal; line-height: 1.5; letter-spacing: 0px; color: #ffffff; } .company-culture .cluture-txt ul li a .txt p { font-size: 15px; font-weight: normal; font-stretch: normal; line-height: 1.6; letter-spacing: 0px; color: rgba(255, 255, 255, 0.7); margin-top: 11%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; } .company-culture .cluture-txt ul li.active a .img { opacity: 1; transform: translateY(-32px); } .company-culture .cluture-txt ul li.active a .txt { transform: translateY(-32px); } .product-equip { padding: 90px 0; overflow: hidden; } .product-equip h3 { display: block; font-size: 36px; font-weight: bold; font-stretch: normal; line-height: 1.5; letter-spacing: 0px; color: #333333; text-align: center; } .product-equip .equip-txt { font-size: 16px; font-weight: normal; font-stretch: normal; line-height: 1.8; letter-spacing: 0px; color: #333333; width: 87.8%; margin: 1.25em auto 0; display: block; text-align: center; } .product-equip .equip-img { margin-top: 5%; overflow: hidden; } .product-equip .equip-img .swiper { margin: 0 -47.5%; width: 195%; } .product-equip .equip-img .swiper li a { display: block; opacity: 0.26; } .product-equip .equip-img li .img { padding-top: calc(510 / 958 * 100%); position: relative; overflow: hidden; } .product-equip .equip-img li.swiper-slide-active a { opacity: 1; } .product-equip .equip-img li .img img { position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover; max-width: 100%; } .fazhan-course { background-repeat: no-repeat; background-position: center; background-size: cover; padding: 80px 0 220px; overflow: hidden; } .fazhan-course h3 { display: block; font-size: 36px; font-weight: bold; font-stretch: normal; line-height: 1.5; letter-spacing: 0px; color: #333333; text-align: center; } .course-swiper1 { position: relative; z-index: 20; display: flex; align-items: flex-start; justify-content: space-between; margin-top: 6%; } .course-swiper1::before { content: ""; display: block; width: 100vw; height: 1px; background-color: #000000; opacity: 0.1; position: absolute; left: 50%; top: 24px; transform: translateX(-50%); z-index: -1; } .course-swiper1 .swiper-button-prev, .course-swiper1 .swiper-button-next { display: block; width: 49px; height: 49px; background-color: #bf1920; border-radius: 50%; background-repeat: no-repeat; background-position: center; background-size: contain; background-image: url(../images/course_button.png); position: relative; left: 0; top: 0; margin: 0; flex-shrink: 0; } .course-swiper1 .swiper-button-next { transform: rotate(180deg); -webkit-transform: rotate(180deg); } .course-swiper1 .swiper-button-prev::after, .course-swiper1 .swiper-button-next::after { display: none; } .course-swiper1 .swiper-button-prev {} .course-swiper1 .swiper-button-prev {} .course-swiper1 .swiper { margin: 0 30px; flex-grow: 1; } .course-swiper1 li { text-align: center; } .course-swiper1 li a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: inherit; color: inherit; line-height: inherit; padding-top: 13px; } .course-swiper1 li span { display: flex; align-items: center; justify-content: center; margin: 0 auto; width: 23px; height: 23px; border: solid 2px transparent; border-radius: 50%; } .course-swiper1 li.swiper-slide-active span { border-color: #bf1920; } .course-swiper1 li span::before { content: ""; display: block; background-color: #a5a5a5; width: calc(11 / 19 * 100%); height: calc(11 / 19 * 100%); border-radius: 50%; } .course-swiper1 li.swiper-slide-active span::before { background-color: #bf1920; } .course-swiper1 li h4 { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: Arial, Helvetica, sans-serif; font-size: 30px; font-weight: normal; font-stretch: normal; line-height: 1.5; letter-spacing: 0px; color: #a5a5a5; margin-top: 0.5em; } .course-swiper1 li.swiper-slide-active h4 { font-weight: bold; color: #bf1920; } .course-swiper2 { margin-top: 6%; } .course-swiper2 li {} .course-swiper2 li a { display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; padding: 0 50px; } .course-swiper2 li .time { display: flex; align-items: center; justify-content: center; } .course-swiper2 li .time h4 { font-family: Arial, Helvetica, sans-serif; font-size: 88px; font-weight: bold; font-stretch: normal; line-height: 1; letter-spacing: 0px; color: #bf1920; } .course-swiper2 li .time p { font-size: 30px; font-weight: normal; font-stretch: normal; line-height: 1; letter-spacing: 0px; color: #bf1920; margin-left: 1em; } .course-swiper2 li .sum { font-size: 16px; font-weight: normal; font-stretch: normal; line-height: 2; letter-spacing: 0px; color: #666666; margin-left: 7em; } .company-honor { background-repeat: no-repeat; background-position: center; background-size: cover; padding: 70px 0 66px; } .company-honor h3 { display: block; font-size: 36px; font-weight: bold; font-stretch: normal; line-height: 1.5; letter-spacing: 0px; color: #333333; text-align: center; } .honor-swiper { margin-top: 4.2%; position: relative; } .honor-swiper::after { content: ""; display: block; width: 108%; margin: 0 -4%; background-repeat: no-repeat; background-position: center; background-size: cover; padding-top: calc(83 / 1480 * 100%); background-image: url(../images/honor_swiper.png); margin-top: 1.6%; } .honor-swiper .swiper {} .honor-swiper li { } .honor-swiper li a { display: block; transform-origin: center 90%; transform: scale(0.71); } .honor-swiper li.swiper-slide-active a { transform: scale(1); } .honor-swiper li .img { position: relative; padding: 6% 5.625%; } .honor-swiper li .img div { padding-top: calc(410 / 284 * 100%); z-index: 10; position: relative; overflow: hidden; } .honor-swiper li .img div img { position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover; max-width: 100%; } .honor-swiper li .img::after { content: ""; display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background-repeat: no-repeat; background-position: center; background-size: cover; background-image: url(../images/honor_img.png); z-index: 20; } .honor-swiper li h4 { display: block; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; font-weight: normal; font-stretch: normal; line-height: 2; letter-spacing: 0px; color: #666666; margin-top: 1em; opacity: 0; visibility: hidden; padding: 0 1em; } .honor-swiper li.swiper-slide-active h4 { opacity: 1; visibility: visible; } .honor-swiper .swiper-button-prev, .honor-swiper .swiper-button-next { outline: none; display: flex; width: 24px; height: 44px; justify-content: center; align-items: center; overflow: hidden; } .honor-swiper .swiper-button-prev::after, .honor-swiper .swiper-button-next::after { content: ""; background: none; display: block; width: 16px; height: 16px; border: 2px solid #ffffff; border-color: transparent transparent #4d4d4d #4d4d4d; position: absolute; transform: rotate(45deg); -webkit-transform: rotate(45deg); position: relative; left: 0; top: 0; margin: 0; } .honor-swiper .swiper-button-prev:hover::after, .honor-swiper .swiper-button-next:hover::after { border-color: transparent transparent #ffffff #ffffff; } .honor-swiper .swiper-button-next { transform: rotate(180deg); -webkit-transform: rotate(180deg); } .honor-swiper .swiper-button-prev, .honor-swiper .swiper-button-next { display: flex; width: 36px; height: 60px; top: 40%; margin: 0; } .honor-swiper .swiper-button-prev::after, .honor-swiper .swiper-button-next::after { width: 26px; height: 26px; border-width: 4px; border-color: transparent transparent #cccccc #cccccc; left: 10px; } .honor-swiper .swiper-button-prev:hover::after, .honor-swiper .swiper-button-next:hover::after { border-color: transparent transparent #bf1920 #bf1920; } .honor-swiper .swiper-button-prev { left: -6%; } .honor-swiper .swiper-button-next { right: -6%; } @media(max-width:1730px) { .reg { float: left; } } @media(max-width:1430px) { .ft-right { padding-right: 0px; } .ft-right a { display: block; width: 130px; border: solid 1px #333; background-color: #f9f9f9; padding: 0 24px; margin-bottom: 10px; } .ft-right a span { line-height: 50px; } } @media(max-width:1200px) { .ft-name { font-size: 40px; } .ft-ewm { margin-left: 20px; } .ft-down { padding-bottom: 40px; } } @media(max-width:990px) { .ft-top { display: none; } .ft-right { display: none; } .ft-link { display: none; } .reg { display: none; } .ft-ewm { display: none; } .ft-contact { margin-left: 0; } } @media(max-width:768px) { .footer { padding-bottom: 20px; } .company-profile { padding: 40px 0 20px 0; } .company-profile h3, .company-culture h3, .product-equip h3, .fazhan-course h3, .company-honor h3 { font-size: 26px; } .company-culture { padding: 36px 0 20px; } .company-culture h3 { top: 0; position: relative; } .company-culture .cluture-txt { margin-top: 30px; overflow-y: hidden; overflow-x: auto; } .company-culture .cluture-txt ul li { width: 40vw; flex: none; } .company-culture .cluture-txt ul li a { padding: 40px 30px 32px; } .company-culture .cluture-txt ul li a .img { opacity: 1; height: 42px; } .company-culture .cluture-txt ul li a .txt { margin-top: 12px; } .company-culture .cluture-txt ul li a .txt h4 { font-size: 18px; } .company-culture .cluture-txt ul li a .txt p { font-size: 14px; margin-top: 10px; } .company-culture .cluture-txt ul li.active a .img { opacity: 1; transform: translateY(-16px); } .company-culture .cluture-txt ul li.active a .txt { opacity: 1; transform: translateY(-16px); } .product-equip { padding: 30px 0; } .fazhan-course { padding: 50px 0 80px; } .course-swiper1 .swiper-button-prev, .course-swiper1 .swiper-button-next { width: 40px; height: 40px; } .course-swiper1 li h4 { font-size: 18px; } .course-swiper1 li a { padding-top: 15px; } .course-swiper1 li span { width: 20px; height: 20px; } .course-swiper2 li a { flex-flow: column; align-items: flex-start; justify-content: flex-start; padding: 0 20px; } .course-swiper2 li .time { justify-content: flex-start; } .course-swiper2 li .time h4 { font-size: 32px; } .course-swiper2 li .time p { font-size: 16px; margin-left: 0.5em; } .course-swiper2 li .sum { line-height: 1.8; margin-left: 0; margin-top: 0.5em; font-size: 14px; } .company-honor { padding: 4.2% 0 4%; } .honor-swiper { padding: 0 30px; } .honor-swiper .swiper-button-next { right: 0; } .honor-swiper .swiper-button-prev { left: 0; } .pro-cfn { display: none; } .pro-show { margin-top: 30px; } .apply { padding: 6vh 0; } .tit-p { font-size: 14px; } .news-con .news-l,.news-con .news-r { width: 100%; } .news-con .news-l { margin-bottom: 30px; } .news-con .news-l li .new-text .txt { width: 100%; } .news-con .news-l li .new-text .date { width: 100%; } .news-con .news-l li h3 { font-size: 16px; margin: 20px 0; } .news-con .news-l li .new-text .date span { font-size: 24px; } .news-con .news-r li h3 { font-size: 16px; } .apply-list { margin-top: 30px; max-height: none; } .tab-con .tab-main { opacity: 1; visibility: visible; position: relative; margin-bottom: 15px; } .csort li { width: 100%; height: auto; border-right: none; position: relative; z-index: 9; } .csort li .img img { width: 30px; } .csort li h3 { font-size: 16px; } .csort li.active { padding-bottom: 0; } .banner .owl-carousel .owl-dots button.owl-dot:hover, .banner .owl-carousel .owl-dots button.owl-dot.active { width: 30px; } } @media (max-width: 640px) { .company-profile .profile-img ul { flex-flow: column; } .company-profile .profile-img ul li { width: 100%; margin-bottom: 10px; } .product-equip .equip-img { margin-top: 20px; } .product-equip .equip-img .swiper { margin: 0 -75%; width: 250%; } .honor-swiper { margin-top: 24px; } .honor-swiper .swiper { margin: 0 -50%; width: 200%; } .honor-swiper li h4 { font-size: 14px; margin-top: 0.5em; } }