.tong { max-width: 1440px; width: 96%; margin-left: auto; margin-right: auto; } .tou { background: #fff; /*position: absolute;*/ height: 95px; z-index: 111; width: 100%; /*top: 0;*/ box-shadow: 0 0 10px rgba(0, 0, 0, 0.35); } .tou .tong { display: flex; justify-content: space-between; } .tou .logo { line-height: 95px; } .tou .dh { font-weight: 600; line-height: 95px; font-size: 26px; color: #045bb6; padding-left: 46px; background: url(../images/dh.png) no-repeat 0 50%; } .tou .yu { display: block; margin-right: 27px; font-size: 18px; color: #333333; line-height: 95px; text-transform: uppercase; } .c1 { margin-top: 94px; margin-bottom: 88px; } @media (max-width: 780px) { .c1 { margin: 40px 0; } } .c1 h2 { font-size: 34px; color: #045bb6; line-height: 1; font-weight: 600; } @media (max-width: 780px) { .c1 h2 { font-size: 26px; } } @media (max-width: 560px) { .c1 h2 { font-size: 20px; } } .c1 dd { font-size: 18px; line-height: 38px; color: #333333; margin-top: 30px; position: relative; } @media (max-width: 780px) { .c1 dd { font-size: 14px; line-height: 28px; margin-top: 20px; } } .c1 dd a.ck { display: block; position: absolute; right: 0; bottom: 0; line-height: 38px; width: 49px; height: 38px; background: url(../images/ck.png) no-repeat 50%; } .c1 dd a.ck:hover { background: url(../images/ckh.png) no-repeat 50%; } .c1 dd a.ck:hover img {} @media (max-width: 780px) { .c1 dd a.ck { line-height: 28px; height: 28px; } } .c1 .sec { display: flex; margin-top: 36px; } @media (max-width: 780px) { .c1 .sec { margin-top: 20px; } } .c1 .sec a { font-size: 16px; color: #333333; width: 155px; line-height: 45px; border: 1px solid #cccccc; text-align: center; } .c1 .sec a img { padding-right: 18px; vertical-align: sub; } .c1 .sec a:hover { color: #fff; background: #045bb6; border-color: #045bb6; } .c1 .sec a:hover img { filter: brightness(100); } .c1 .sec a:nth-child(1) { margin-right: 24px; } .c2 .list1 li:nth-child(1) { background: #efefef; } .c2 .list1 li a { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } @media (max-width: 560px) { .c2 .list1 li:nth-child(2) a { flex-direction: column-reverse; } } .c2 .list1 li .img { width: 38%; } @media (max-width: 560px) { .c2 .list1 li .img { width: 100%; } } .c2 .list1 li .img img { width: 100%; } .c2 .list1 li .zi { width: 52.5%; } @media (max-width: 560px) { .c2 .list1 li .zi { width: 100%; padding: 20px 0; } } .c2 .list1 li .zi h3 { font-size: 30px; color: #333333; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; margin: 0; } @media (max-width: 1200px) { .c2 .list1 li .zi h3 { font-size: 24px; } } @media (max-width: 780px) { .c2 .list1 li .zi h3 { font-size: 20px; } } .c2 .list1 li .zi dd { margin-top: 36px; font-size: 16px; line-height: 32px; color: #666666; text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; } @media (max-width: 1200px) { .c2 .list1 li .zi dd { margin-top: 20px; font-size: 14px; line-height: 28px; } } @media (max-width: 780px) { .c2 .list1 li .zi dd { margin-top: 14px; } } .c2 .list1 li .zi .ck { margin-top: 28px; font-size: 16px; color: #666666; border-radius: 30px; border: 1px solid #c1c1c1; width: 161px; line-height: 39px; text-align: center; } @media (max-width: 1200px) { .c2 .list1 li .zi .ck { margin-top: 16px; font-size: 14px; line-height: 32px; } } .c2 .list1 li .zi .ck:hover { background: #045bb6; color: #fff; border-color: #045bb6; } h2.bt { text-align: center; position: relative; font-family: arial; padding-bottom: 28px; font-weight: 500; } @media (max-width: 1025px) { h2.bt { padding-bottom: 14px; } } h2.bt b { position: relative; z-index: 11; font-size: 44px; color: #fff; } @media (max-width: 1025px) { h2.bt b { font-size: 32px; } } h2.bt p { position: absolute; left: 50%; transform: translateX(-50%); font-size: 54px; opacity: .2; color: #fff; top: 10px; width: 100%; } @media (max-width: 1025px) { h2.bt p { font-size: 32px; } } .c3 { background: url(../images/c3.png) no-repeat 50%; padding-top: 96px; padding-bottom: 59px; background-size: cover; background-attachment: fixed; } @media (max-width: 1025px) { .c3 { padding: 40px 0; } } .c3 .list2 { max-width: 1200px; margin-left: auto; margin-right: auto; display: flex; flex-wrap: wrap; margin-top: 62px; justify-content: space-between; } @media (max-width: 1025px) { .c3 .list2 { margin-top: 30px; } } @media (max-width: 780px) { .c3 .list2 { justify-content: start; } } .c3 .list2 li { width: 22%; margin-bottom: 14px; } @media (max-width: 780px) { .c3 .list2 li { width: 30.333%; margin-left: 1.5%; margin-right: 1.5%; } } @media (max-width: 480px) { .c3 .list2 li { width: 46%; margin-left: 2%; margin-right: 2%; } } .c3 .list2 li img { border: 2px solid #aeaeae; max-width: 100%; transition-duration: .3s; } .c3 .list2 li img:hover { border-color: #125dac; } .c4 { margin-top: 80px; } @media (max-width: 1025px) { .c4 { margin-top: 40px; } } .c4 h2 { font-size: 18px; color: #000000; padding-left: 22px; background: url(../images/h-4.png) no-repeat 0 50%; max-width: 1200px; margin-left: auto; margin-right: auto; } .c4 .content { max-width: 1200px; margin-left: auto; margin-right: auto; } @media (max-width: 1300px) { .c4 .content { width: 92%; } } @media (max-width: 780px) { .c4 .content { width: 84%; } } @media (max-width: 560px) { .c4 .content { width: 70%; } } .c4 .content .list2 { margin-top: 24px; margin-left: -18px; margin-right: -18px; position: relative; } .c4 .content .list2 .slick-arrow { position: absolute; top: 50%; margin-top: -18.5px; z-index: 11; width: 37px; height: 37px; outline: none; border: none; font-size: 0; } .c4 .content .list2 .slick-arrow.slick-prev { background: url(../images/yb.png) no-repeat 50%; left: -5.3125vw; transform: rotateY(180deg); } @media (max-width: 1440px) { .c4 .content .list2 .slick-arrow.slick-prev { left: -30px; } } .c4 .content .list2 .slick-arrow.slick-prev:hover { background: url(../images/zb.png) no-repeat 50%; transform: rotateY(0deg); } .c4 .content .list2 .slick-arrow.slick-next { background: url(../images/yb.png) no-repeat 50%; right: -5.3125vw; } @media (max-width: 1440px) { .c4 .content .list2 .slick-arrow.slick-next { right: -30px; } } .c4 .content .list2 .slick-arrow.slick-next:hover { background: url(../images/zb.png) no-repeat 50%; transform: rotateY(180deg); } .c4 .content .list2 li { margin: 0 18px; float: left; border: 1px solid #9f9f9f; overflow: hidden; } .c4 .content .list2 li img { width: 100%; transition-duration: .3s; } .c4 .content .list2 li:hover img { transform: scale(1.1); } .c5 { margin-top: 98px; background: url(../images/c5.png) no-repeat 50% 0; padding-top: 62px; padding-bottom: 172px; background-size: cover; } @media (max-width: 1025px) { .c5 { margin-top: 40px; padding-top: 40px; padding-bottom: 40px; } } @media (max-width: 560px) { .c5 { background-size: inherit; } } .c5 .content { margin-top: 55px; } @media (max-width: 1025px) { .c5 .content { margin-top: 34px; } } .c5 .content .list2 { display: flex; justify-content: space-between; flex-wrap: wrap; } .c5 .content .list2 li { width: 31.4%; } @media (max-width: 560px) { .c5 .content .list2 li { width: 100%; margin-bottom: 20px; } } .c5 .content .list2 li .img { overflow: hidden; } .c5 .content .list2 li:hover .img img { transform: scale(1.1); } .c5 .content .list2 li .img img { width: 100%; transition-duration: .3s; } .c5 .content .list2 li .zi { padding-top: 34px; } .c5 .content .list2 li .zi h3 { font-size: 18px; color: #333333; background: url(../images/jt.png) no-repeat 100% 50%; padding-right: 50px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .c5 .content .list2 li .zi dd { margin-top: 16px; font-size: 14px; color: #666666; line-height: 22px; } .c5 .content .list2 li:hover .zi h3 { background: url(../images/jth.png) no-repeat 100% 50%; color: #045bb6; } .foot { background: url(../images/foot.png) no-repeat 50% 0; background-size: cover; padding-top: 52px; } .foot .content { display: flex; justify-content: space-between; flex-wrap: wrap; padding-bottom: 7px; } .foot .con { border-bottom: 1px solid rgba(0, 0, 0, 0.2); } .foot .foot1 { max-width: 394px; margin-top: -8px; } @media (max-width: 720px) { .foot .foot1 { margin-top: 0; width: 100%; max-width: 100%; } } .foot .foot1 .logox img { max-width: 100%; } .foot .foot1 dd { margin-top: 32px; font-size: 14px; line-height: 25px; color: #fff; } .foot .foot2 { width: 366px; } @media (max-width: 1025px) { .foot .foot2 { display: none; } } .foot .foot2 #formsearch { width: 366px; height: 48px; border: 1px solid #bebebe; border-radius: 10px; } .foot .foot2 #formsearch input { height: 48px; line-height: 48px; border: none; background: none; outline: none; color: #bebebe; } .foot .foot2 #formsearch input#keyword { text-indent: 30px; font-size: 16px; float: left; width: calc(100% - 60px); } .foot .foot2 #formsearch input#keyword::-webkit-input-placeholder { color: #bebebe; } .foot .foot2 #formsearch input#s_btn { float: right; width: 60px; background: url(../images/ss.png) no-repeat 50%; font-size: 0; } .foot .foot2 .dh { color: #fff; margin-top: 26px; } .foot .foot2 .dh p { font-size: 16px; } .foot .foot2 .dh p:nth-child(2) { font-size: 30px; } .foot .foot3 { max-width: 260px; } @media (max-width: 720px) { .foot .foot3 { width: 100%; margin-top: 20px; } } .foot .foot3 .erx { margin-top: 9px; padding-right: 42px; } .foot .foot3 .erx img { max-width: 100%; } .foot .foot3 .er { text-align: center; color: #fff; /* width:48%; */ font-size: 12px; line-height: 44px; } .foot .foot3 .er img { max-width: 100%; } .foot .foot3 .dao { margin-top: 24px; line-height: 32px; color: #fff; font-size: 12px; width: 106px; } .foot .foot3 .dao a.popup_sqq { background: url(../images/1-1.png) no-repeat 50%; } .foot .foot3 .dao a.bds_tsina { background: url(../images/1-2.png) no-repeat 50%; } @media (max-width: 720px) { .foot .foot3 .dao { float: none; } } .foot .foot3 .dao img { padding: 0 6px; vertical-align: sub; } .foot .ban { border-top: 1px solid #336291; line-height: 28px; padding: 15px 0; } .foot .ban .contentx { display: flex; flex-wrap: wrap; justify-content: space-between; font-size: 14px; color: #fff; } .foot .ban .contentx a { color: #fff; } .gox { position: absolute; left: 50%; margin-left: -23.5px; bottom: 3%; z-index: 111; cursor: pointer; animation: round 1.3s ease-in-out .3s infinite alternate; text-align: center; } @media(max-width:560px) { .gox img { transform: scale(0.4); } } @keyframes round { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(0, 20px, 0); } }