@charset "utf-8"; .banner a { display: block; position: relative; } .banner a:after { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: url("../images/shadow.png") repeat-x top center; } .banner img { display: block; width: 100%; } .banner button { position: absolute; top: 50%; width: 64px; height: 64px; background-position: center center; background-repeat: no-repeat; transform: translateY(-50%); z-index: 8; cursor: pointer; } .banner .slick-prev { left: 50px; background-image: url("../images/arrows-l.png"); } .banner .slick-next { right: 50px; background-image: url("../images/arrows-r.png"); } .s1-tit { float: left; width: 280px; padding: 33px 0; background: url("../images/s1-tit.png") no-repeat right center; } .s1-tit h4 { font-size: 30px; line-height: 1; color: #fff; text-align: center; } .s1-tit p { font-size: 21px; line-height: 1; color: #fff; text-align: center; margin-top: 15px; font-family: 'times new roman'; } .s1-banner { overflow: hidden; padding-top: 20px; } .s1-banner a { display: block; } .s1-banner .s1-icon { position: relative; width: 58px; height: 58px; margin: auto; } .s1-banner .s1-icon img { left: 0; right: 0; top: 0; bottom: 0; position: absolute; max-width: 100%; max-height: 100%; margin: auto; transition: all .3s; } .s1-banner a p { font-size: 20px; line-height: 1; color: #fff; text-align: center; margin-top: 20px; } .s1-banner a:hover .s1-icon img { transform: rotateY(180deg); } .section1 { padding: 21px 0 25px; overflow: hidden; background: url("../images/section1.jpg") no-repeat center center;background-size:100%; } .gg-tit { position: relative; font-size: 0; text-align: center; } .tit-text { display: inline-block; padding: 2.5px 60px; margin: 0 auto; background: url("../images/gg-tit.png") no-repeat center center; background-size: cover; } .tit-text img { display: inline-block; vertical-align: middle; width: 30px; height: 47px; } .tit-text div { display: inline-block; vertical-align: middle; margin-left: 5px; } .tit-text div h4 { font-size: 28px; line-height: 1; color: #333; text-align: center; } .tit-text div p { font-size: 26px; line-height: 1; color: #7197c9; font-family: 'times new roman'; margin-top: 9px; text-align: center; } .mores { position: absolute; right: 0; top: 50%; transform: translateY(-50%); } .mores span { display: block; font-size: 14px; line-height: 1; color: #1e58a6; padding-right: 10px; } .mores img { display: block; width: 42px; height: 16px; padding-left: 8px; margin-top: 4px; } .s2-l { float: left; width: 47.87%; margin-top: 48px; } .s2-l a { display: block; overflow: hidden; } .img-box { padding-top: 14px; padding-left: 14px; position: relative; } .img-box:after { content: ''; position: absolute; height: 100%; width: 100%; max-width: 660px; max-height: 430px; top: 0; left: 0; background: #1e58a6; } .img-box .pic { padding-top: 65.15%; z-index: 1; } .s2-info h4 { font-size: 24px; line-height: 1; color: #002d5c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .s2-info p { font-size: 15px; line-height: 26px; color: #666; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis; height: 78px; margin-top: 20px; } .s2-info { padding-top: 32px; padding-left: 15px; } .pic-text:hover img { transform: scale(1.1); } .s2-r { float: left; width: 48.22%; margin-left: 3.91%; margin-top: 48px; } .s2-r>ul>li { float: left; width: 47.05%; margin-bottom: 25px; } .s2-r>ul>li:nth-child(even) { margin-left: 5.9%; } .s2-r>ul>li a { display: block; overflow: hidden; } .s2-r>ul>li .pic { padding-top: 68.75%; } .s2-r>ul>li p { font-size: 18px; line-height: 26px; color: #333333; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; height: 76px; margin-top: 15px; padding: 0 5px; } .s2-r>ul>li:hover img { transform: scale(1.1); } .s2-r>ul>li:hover p { color: #1e58a6; } .section2 { padding-top: 61px; padding-bottom: 95px; background: url("../images/section2.png") no-repeat center center; background-size: cover; } .s3-hd { position: relative; text-align: center; } .s3-hd .tit-text img, .s3-hd .tit-text p { display: none; } .s3-hd .tit-text h4, .s3-hd .tit-text p { color: #b2c4d7; font-weight: normal; } .s3-hd .tit-text.on h4 { font-weight: 600; color: #fff; } .s3-hd .tit-text { background: none; cursor: pointer; } .s3-hd .tit-text.on { background: url(../images/s3-tit.png) no-repeat center center; background-size: cover; } .s3-hd .tit-text.on p { display: block; } .s3-hd .tit-text.on h4 { font-weight: 600; color: #fff; } .s3-hd .tit-text.on img { display: inline-block; vertical-align: middle; } .s3-hd .mores a { color: #fff; display: none; } .s3-hd .mores span { color: #fff; } .sl>li { float: left; width: 22.98%; margin-left: 2.02%; transition: all .3s; margin-bottom: 30px; } .sl>li:first-child { margin-left: 0; } .sl>li:nth-child(5){ margin-left: 0;} .sl>li>a { display: block; position: relative; } .sl>li>a>div { padding: 21px 21px 25px; /* border-bottom: 1px dashed #cccccc; */ } .sl>li>a>div:nth-child(2) { padding: 29px 26px 55px; border: none; } .sl>li>a>div { background: #e6eaef; transition: all .3s; } .sl>li h4 { font-size: 18px; line-height: 37px; color: #333333; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis; height: 105px; text-align: justify; } .sl>li span { display: inline-block; font-size: 13px; line-height: 20px; height: 20px; color: #fff; text-align: center; padding: 0 10px; width: 55.8px; box-shadow: 2px -1px 5px #adccdb; border-radius: 5px 5px 0px 0px; background: #0086e9; /* border-radius: 3px 6px 9px 0px; */ margin-top: 15px; } .sl>li p { font-size: 14px; line-height: 30px; color: #666666; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; text-overflow: ellipsis; height: 120px; } .sl>li>a>span { position: absolute; width: 60px; height: 60px; bottom: -29px; left: 50%; transform: translateX(-50%); background: #ef8018 url(../images/s3-icon.png) no-repeat center center; border-radius: 50%; display: none; } .sl>li:hover { transform: translateY(-30px); } .sl>li:hover a>div { background: #215ba8; } .sl>li:hover a>div h4, .sl>li:hover a>div p { color: #fff !important; } .sl>li:hover>a>span { display: block; } .s3-bd { margin-top: 57px; } .s3-bd>ul { display: none; } .section3 { padding-top: 62px; padding-bottom: 57px; background: url("../images/section3.jpg") no-repeat center center; background-size: cover; } .s4-list>ul li:nth-child(2n+1) { margin-top: 40px; } .s4-list>ul li:first-child { margin-left: 0; } .s4-list>ul li>a { display: block; position: relative; overflow: hidden; padding: 0 31.5px; } .s4-list>ul li>a>div { position: relative; } .s4-list>ul li>a:after { content: ''; position: absolute; left: 31.5px; top: 100%; bottom: 0; right: 31.5px; margin: auto; background: rgba(0, 78, 162, 0.8); transition: all .3s; } .s4-list>ul li .pic { padding-top: 151.72%; } .s4-list>ul li>a>div>span { height: 80px; position: absolute; width: 68%; left: 0; right: 0; bottom: 20px; display: block; font-size: 20px; line-height: 40px; /* line-height: 67px; */ color: #fff; text-align: center; margin: auto; background: rgba(0, 0, 0, 0.7); } .s4-info { position: absolute; left: 0; right: 0; top: 120%; bottom: 0; width: 82.75%; max-height: 90.90%; margin: auto; padding: 39px 34px 0; background: rgba(0, 0, 0, 0.5); z-index: 9; transition: all .3s; } .s4-info h4 { font-size: 24px; line-height: 1; color: #00a0e9 !important; text-align: center; } .s4-info p { font-size: 14px; line-height: 30px; color: #fff; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 8; overflow: hidden; text-overflow: ellipsis; height: 240px; margin-top: 22px; } .s4-info span { position: absolute; left: 0; right: 0; bottom: 0; width: 54.1%; margin: auto; font-size: 16px; line-height: 40px; color: #fff; text-align: center; background: #ef8018; } .s4-list>ul li:hover .s4-info, .s4-list>ul li:hover>a:after { top: 0; } .s4-list>ul li:hover>a>div>span { display: none; } .s4-list>ul { overflow: hidden; } .s4-list { margin-top: 63px; } .section4 { padding-top: 62px; padding-bottom: 63px; background: #edf1f9; } .section5 .gg-tit h4 { color: #fff; } .section5 .tit-text { background: url(../images/s3-tit.png) no-repeat center center; background-size: cover; } .section5 .tit-text p { color: #abc4df; font-weight: normal; } .s5-banner-nav { height: 430px; padding:0 50px; background: url("../images/s5-banner.png") no-repeat bottom 80px center; } .s5-banner-nav a { display: block; overflow: hidden; height: 170px; } .s5-banner-nav .s5-item { width: 100px; height: 100px; border: 5px solid #00a0e9; background: #00a0e9; border-radius: 50%; margin: 35px auto 0; position: relative; } .s5-banner-nav .slick-slide { transition: all .3s; } .s5-banner-nav .s5-item:after { content: ''; position: absolute; width: 160px; height: 160px; border: 1px dashed #4775a3; border-radius: 50%; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); display: none; } .s5-banner-nav .s5-item h4 { font-size: 20px; line-height: 90px; color: #fff; text-align: center; } .s5-banner-nav .slick-slide { margin-top: 85px; } .s5-banner-nav .slick-active { margin-top: 180px; } .s5-banner-nav .slick-center { margin-top: 260px; } .s5-banner-nav .slick-center .s5-item { background: #fff; } .s5-banner-nav .slick-center .s5-item:after { display: block; } .s5-banner-nav .slick-center .s5-item h4 { color: #00a0e9; } .s5-banner-for a { display: block; overflow: hidden; } .s5-banner-for a ul>li { float: left; width: 30%; position: relative; font-size: 16px; line-height: 40px; color: #fff; padding-left: 35px; background: url("../images/s5-list.png") no-repeat left center; } .s5-banner-for a ul>li:nth-child(3n+2) { margin-left: 8%; margin-right: 2%; } .s5-banner-for a ul { overflow: hidden; } .s5-banner-for button { position: absolute; top: 50%; width: 64px; height: 64px; background-position: center center; background-repeat: no-repeat; transform: translateY(-50%); z-index: 99; cursor: pointer; } .s5-banner-for .slick-prev { left: 0; background-image: url("../images/arrows-l.png"); } .s5-banner-for .slick-next { right: 0; background-image: url("../images/arrows-r.png"); } .s5-banner-for { padding: 0 258px; margin-top: 48px; } .section5 .gg-tit { position: absolute; left: 50%; top: 80px; transform: translateX(-50%); z-index: 99; } .section5 { padding-bottom: 102px; position: relative; background: url("../images/section5.jpg") no-repeat center center; background-size: cover; background-attachment: fixed; } .s6-banner a { display: block; padding: 0 15px; overflow: hidden; } .s6-banner a>div { overflow: hidden; } .s6-banner img { display: block; width: 100%; transition: all .3s; } .s6-banner button { position: absolute; top: 50%; width: 64px; height: 64px; background-position: center center; background-repeat: no-repeat; transform: translateY(-50%); z-index: 99; cursor: pointer; } .s6-banner .slick-prev { left: -75px; background-image: url("../images/arrows-l.png"); } .s6-banner .slick-next { right: -75px; background-image: url("../images/arrows-r.png"); } .s6-banner a:hover img { transform: scale(1.1); } .s6-banner { margin-top: 63px; } .section6 { padding-top: 75px; padding-bottom: 110px; background: url("../images/section6.jpg") no-repeat center center; background-size: cover; background-attachment: fixed; } .back { position: fixed; right: 20px; bottom: 0px; width: 220px; height: 110px; display: none; z-index: 999; } .back img { display: block; width: 100%; } .back.on { bottom: 46%; } @media screen and (max-width: 1410px) { .s6-banner .slick-next { right: 0; } .s6-banner .slick-prev { left: 0; } .back { width: 140px; height: 30px; } .back.on { bottom: 49%; } } @media screen and (max-width: 1160px) { .banner { margin-top: 74px; } .banner a:after { display: none; } .s4-list>ul li>a { padding: 0 10px; } .s4-info, .s4-list>ul li>a:after { left: 10px; right: 10px; } .back.on { bottom: 46%; } } @media screen and (max-width: 1024px) { .banner button { width: 34px; height: 34px; background-size: 34px; } .banner .slick-prev { left: 10px; } .banner .slick-next { right: 10px; } .s1-tit { width: 180px; padding: 20px; } .s1-tit h4 { font-size: 20px; } .s1-tit p { font-size: 12px; margin-top: 10px; } .s1-banner .s1-icon { width: 38px; height: 38px; } .s1-banner a p { font-size: 14px; margin-top: 12px; } .s1-banner { padding-top: 10px; } .section1 { padding: 15px 0; } .tit-text img { width: 20px; height: 35px; } .tit-text div h4 { font-size: 20px; } .tit-text div p { font-size: 13px; margin-top: 5px; } .tit-text { padding: 2.5px 30px; } .mores img { width: 32px; height: 12px; margin-top: 2px; } .mores span { font-size: 12px; } .s2-info { padding-top: 15px; } .s2-info h4 { font-size: 16px; } .s2-info p { font-size: 12px; margin-top: 10px; } .s2-r>ul>li p { font-size: 14px; line-height: 22px; height: 44px; margin-top: 10px; } .s2-l { width: 49.25%; margin-top: 15px; } .s2-r { width: 49.25%; margin-left: 1.5%; margin-top: 15px; } .s2-r>ul>li:nth-child(even) { margin-left: 3%; } .s2-r>ul>li { width: 48.5%; margin-bottom: 10px; } .section2 { padding-top: 20px; padding-bottom: 25px; } .s3-bd>ul>li>a>div { padding: 20px 15px; } .s3-bd>ul>li>a>div:nth-child(2) { padding: 15px 15px 30px; } .s3-bd>ul>li h4 { font-size: 14px; } .s3-bd>ul>li span { font-size: 12px; line-height: 20px; margin-top: 10px; } .s3-bd>ul>li p { font-size: 12px; } .s3-bd>ul>li>a>span { width: 40px; height: 40px; bottom: -20px; background-size: 15px auto; } .s3-bd { margin-top: 25px; } .section3 { padding-top: 25px; padding-bottom: 40px; } .s4-list a { display: block; } .s4-list>ul li>a>div>span { font-size: 16px; line-height: 40px; } .s4-info h4 { font-size: 18px; } .s4-info p { font-size: 12px; line-height: 22px; height: 176px; margin-top: 10px } .s4-info span { font-size: 12px; line-height: 28px; } .s4-info { padding: 20px 15px 0; } .s4-list { margin-top: 25px; } .s4-list ul li:nth-child(2n+1) { margin-top: 0; } .section4 { padding-top: 25px; padding-bottom: 30px; } .section5 .gg-tit { position: relative; left: auto; top: auto; transform: translateX(0); z-index: 99; } .s5-banner-nav .slick-active, .s5-banner-nav .slick-center, .s5-banner-nav .slick-slide { margin-top: 0; } .s5-banner-nav { height: auto; background: none; margin-top: 20px; } .s5-banner-nav .s5-item h4 { font-size: 14px; line-height: 70px; } .s5-banner-nav .s5-item { width: 80px; height: 80px; margin: auto; } .s5-banner-nav .s5-item:after { width: 110px; height: 110px; } .s5-banner-nav a { height: auto; padding: 20px 0; } .s5-banner-for { padding: 0 100px; margin-top: 30px; } .s5-banner-for a ul>li { font-size: 12px; line-height: 30px; padding-left: 25px; } .s5-banner-for a ul>li:nth-child(3n+2) { margin-left: 5%; margin-right: 5%; } .s5-banner-for button { width: 34px; height: 34px; background-size: 34px; } .banner .slick-next { right: 10px; } .banner .slick-prev { left: 10px; } .section5 { padding: 20px 0; } .s6-banner { margin-top: 15px; } .section6 { padding-top: 25px; padding-bottom: 30px; } .s6-banner button { width: 34px; height: 34px; background-size: 34px; } .s6-banner .slick-next { right: 15px; } .s6-banner .slick-prev { left: 15px; } .back.on { bottom: 67%; } } @media screen and (max-width: 768px) { .sl>li:nth-child(5){display: none;} .sl>li:nth-child(6){display: none;} .sl>li:nth-child(7){display: none;} .sl>li:nth-child(8){display: none;} .sl>li { float: left; width: 99.98%; margin-left: 0; transition: all .3s; margin-bottom: 30px; } .s1-tit { float: none; width: auto; background: none; padding: 0; } .s1-tit h4 { font-size: 18px; } .s1-banner { margin-top: 15px; padding: 0; } .s2-l, .s2-r { float: none; width: auto; } .s2-r { margin-top: 15px; margin-left: 0; } .s3-bd>ul>li { width: 49%; margin-left: 0; margin-top: 10px; } .s3-bd>ul>li:nth-child(even) { margin-left: 2%; } .s3-bd { margin-top: 10px; } .section3 { padding-bottom: 20px; } .s4-list>ul>li { width: 49%; margin-left: 0; margin-top: 10px; } .s4-list>ul>li:nth-child(2n+1) { margin-top: 10px; } .s4-list>ul>li:nth-child(even) { margin-left: 2%; } .s4-info span { position: absolute; bottom: 0; left: 0; right: 0; margin: auto; } .s5-banner-for { padding: 0; } .s5-banner-for a ul { padding: 0 100px; } .s5-banner-for a ul { display: flex; justify-content: space-around; flex-wrap: wrap; } .s5-banner-for a ul>li { flex-basis: 50%; } .s5-banner-for a ul>li:nth-child(3n+2) { margin-left: 0; margin-right: 0; } .s6-banner a { padding: 0 10px; } .back { bottom: 150px; width:90px; } .back.on { bottom: 61%; } } @media screen and (max-width: 640px) { .banner { margin-top: 60px; } .s1-tit h4, .tit-text div h4 { font-size: 16px; } .s1-tit p { margin-top: 5px; } .s1-banner .s1-icon { width: 30px; height: 30px; } .tit-text img { width: 15px; height: 25px; } .tit-text div p { font-size: 12px; margin-top: 2px; } .tit-text { padding: 0; background: none; } .mores img { display: none; } .s2-info h4 { font-size: 14px; } .s2-info p { line-height: 22px; height: 66px; margin-top: 5px; } .s2-info { padding: 10px 10px 0; } .s2-r>ul>li p { font-size: 12px; margin-top: 5px; } .s2-r, .s2-l { margin-top: 10px; } .section2 { padding-top: 15px; padding-bottom: 10px; } .s3-hd .tit-text.on, .section5 .tit-text { background: none; } .s3-hd .tit-text:last-child { margin-left: 10px; } .s3-bd>ul>li:hover { transform: translateY(-10px); } .s4-list>ul li>a>div>span { bottom: 10px; line-height: 32px; } .s4-info h4 { font-size: 14px; } .s4-info p { -webkit-line-clamp: 5; height: 110px; } .s4-info span { width: 50%; } .s5-banner-for a ul { padding: 0 50px; } .section6 { padding-top: 15px; padding-bottom: 20px; } .s4-info { padding: 10px 10px 0; } .section4 { padding-top: 15px; padding-bottom: 15px; } .s4-list { margin-top: 10px; } .s5-banner-nav { margin-top: 15px; padding:0; } .section5 { padding-bottom: 10px; } .s5-banner-nav a { padding: 12px 0; } .back.on { bottom: 59%; } } @media screen and (max-width: 480px) { .section1 { padding: 10px 0; } .s2-r>ul>li, .s3-bd>ul>li { float: none; width: auto; } .s2-r>ul>li:nth-child(even), .s3-bd>ul>li:nth-child(even) { margin-left: 0; } .s3-bd>ul>li h4 { display: block; height: auto; } .s3-bd>ul>li p { -webkit-line-clamp: 2; height: 60px; } .s3-bd>ul>li>a>div, .s3-bd>ul>li>a>div:nth-child(2) { padding: 10px; } .s5-banner-nav .s5-item h4 { font-size: 12px; line-height: 50px; } .s5-banner-nav .s5-item { width: 60px; height: 60px; border-width: 3px; } .s5-banner-nav .s5-item:after { width: 80px; height: 80px; } .s5-banner-for a ul>li { flex-basis: 100%; } .s5-banner-for { margin-top: 15px; } .s6-banner a { padding: 0; } .s6-banner .slick-prev { left: 0; } .s6-banner .slick-next { right: 0; } .s4-list>ul li>a>div>span { font-size: 12px; line-height: 26px; } .s4-info span { line-height: 22px; } .s4-list>ul li>a { padding: 0 5px; } .s4-info, .s4-list>ul li>a:after { left: 5px; right: 5px; } .back.on { bottom: 81%; } } .times dd { color: #fff; text-align: center; /* display: inline-block; */ font-size: 23px; border-radius: 0px 0px 5px 5px; width: 55.8px; border-top: solid 1px #fff; line-height: 28px; color: #fff; font-weight: bold; box-shadow: 2px -1px 5px #83b6cd; padding: 0 10px; font-family: serif; background: #0086e9; /* margin-top: 15px; */ } * { margin: 0; padding: 0; } * { margin: 0; padding: 0; } .s5-banner-nav .slick-slide:last-child(display:none;}