@charset "utf-8"; .banner a { display: block; overflow: hidden; } .banner a img { display: block; width: 100%; } .banner button { position: absolute; top: 50%; width: 32px; height: 49px; transform: translatey(-50%); background-position: center center; background-repeat: no-repeat; z-index: 99; } .banner .slick-prev { left: 56px; background-image: url(/uploads/image/images/arrows-l.png); } .banner .slick-next { right: 56px; background-image: url(/uploads/image/images/arrows-r.png); } .banner ul { bottom: 30px; } .banner ul button { display: none; } .banner ul li { width: 15px; height: 15px; border: 2px solid #fff; border-radius: 50%; margin-left: 9px; transition: all .3s; } .banner ul li.slick-active { background: #fff; } .s1-l { width: 708px; } .s1-banner a { display: block; overflow: hidden; position: relative; } .s1-banner .pic { padding-top: 61.86%; } .s1-banner a p { position: absolute; left: 0; right: 0; bottom: 26px; font-size: 18px; line-height: 1; color: #fff; padding-left: 20px; padding-right: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; z-index: 9; } .s1-banner button { position: absolute; top: 50%; width: 32px; height: 60px; transform: translatey(-50%); background-position: center center; background-repeat: no-repeat; z-index: 99; } .s1-banner .slick-prev { left: 0; background-image: url(/uploads/image/images/arrows-l2.png); } .s1-banner .slick-next { right: 0; background-image: url(/uploads/image/images/arrows-r2.png); } .s1-banner ul { width: auto; right: 24px; bottom: 24px; } .s1-banner ul button { display: none; } .s1-banner ul li { width: 12px; height: 12px; background: #a9a9aa; border-radius: 50%; margin-left: 10px; transition: all .3s; } .s1-banner ul li.slick-active { background: #fff; } .s1-banner a::after { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: url(/uploads/image/images/shadow.png)repeat-x bottom center; } .gg-tit { position: relative; } .gg-tit h4 { font-size: 36px; line-height: 1; color: #000; font-weight: normal; padding-left: 24px; position: relative; background: url(/uploads/image/images/tit-icon.png) no-repeat left center; } .gg-tit a { position: absolute; top: 50%; right: 0; padding-left: 42px; line-height: 28px; font-size: 14px; color: #0d5ea3; transform: translatey(-50%); background: url(/uploads/image/images/mores.png) left center no-repeat; } .s1-r { overflow: hidden; padding-left: 49px; } .s1-r ul>li { position: relative; line-height: 62px; background-image: url(/uploads/image/images/list-icon.png); background-position: left center; background-repeat: no-repeat; border-bottom: 1px solid #dddede; transition: all .3s; } .s1-r ul>li>a { display: block; font-size: 16px; color: #000000; padding-left: 20px; padding-right: 135px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .s1-r ul>li span { position: absolute; right: 0; top: 0; font-size: 16px; color: #666; } .s1-r ul>li:hover { background-image: url(/uploads/image/images/list-icon-on.png); } .s1-r ul>li:hover a { color: #0d5ea3; font-weight: 600; text-decoration: underline; } .s1-r ul { margin-top: 24px; } .s1 { padding: 37px 30px 33px; background: url(/uploads/image/images/s1-bg.jpg) no-repeat center center; background-size: cover; } .s2-list>ul>li { width: 31.43%; margin-top: 29px; background: #fff; } .s2-list>ul>li:nth-child(3n 2) { margin-left: 2.855%; margin-right: 2.855%; } .s2-list>ul>li a { display: block; } .s2-list>ul>li .tm { width: 99px; padding: 21px 0; background: #0d5ea3; } .s2-list>ul>li .tm span { display: block; font-size: 18px; line-height: 1; color: #fff; text-align: center; } .s2-list>ul>li .tm span:first-child { font-size: 30px; font-weight: 600; margin-bottom: 10px; } .s2-list>ul>li .tm-info { overflow: hidden; padding-left: 30px; padding-right: 10px; box-shadow: 3px 3px 5px 1px #cde0e5; } .s2-list>ul>li .tm-info p { font-size: 18px; line-height: 31px; color: #333; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; height: 62px; margin-top: 19px; margin-bottom: 19px; } .s2-list>ul>li:hover .tm-info p { color: #0d5ea3; font-weight: 600; } .s2-list>ul { margin-top: 7px; } .s2 { margin-top: 39px; } .s2-item { width: 31.43%; padding: 32px 30px 28px; background: #fff; box-shadow: 3px 3px 5px 1px #cde0e5; } .s2-item:nth-child(3n 2) { margin-left: 2.855%; margin-right: 2.855%; } .item h4 { color: #fff; font-size: 24px; line-height: 49px; padding-left: 23px; background: url(/uploads/image/images/s2-tit.png) no-repeat left center; } .item { border-bottom: 1px solid #0d5ea3; } .s2-item ul>li { position: relative; line-height: 58px; border-bottom: 1px solid #eeeeee; background-image: url(/uploads/image/images/list-icon2.png); background-position: left center; background-repeat: no-repeat; } .s2-item ul>li>a { display: block; font-size: 16px; color: #666; padding-left: 26px; padding-right: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .s2-item ul>li span { position: absolute; right: 0; top: 0; font-size: 16px; color: #666; } .s2-item ul>li:hover { background-image: url(/uploads/image/images/list-icon2-on.png); } .s2-item ul>li:hover a { color: #0d5ea3; font-weight: 600; text-decoration: underline; } .s2-item ul { margin-top: 10px; } .s2-list2 { margin-top: 35px; } .s3-banner .pic { padding-top: 77.70%; } .s3-banner a { display: block; overflow: hidden; position: relative; } .s3-banner ul>li { float: left; width: 287px; margin-left: 18px; } .s3-banner ul>li:first-child { margin-left: 0; } .s3-banner a p, .s3-banner2 a p { position: absolute; left: 0; right: 0; bottom: 0; font-size: 15px; line-height: 39px; color: #fff; text-align: center; background: rgba(0, 0, 0, .6); } .s3-banner ul { height: 223px; overflow: hidden; } .s3-banner a:hover img, .s3-banner2 a:hover img { transform: scale(1.1); } .s3-banner { margin-top: 35px; overflow: hidden; } .s3 { margin-top: 33px; padding: 34px 32px 28px; background: #fff; box-shadow: 3px 3px 5px 1px #cde0e5; } .s4-l { width: 45.89%; padding: 34px 30px; background: url(/uploads/image/images/s4-l.jpg) no-repeat center center; background-size: cover; } .s4-l ul>li { width: 18.75%; margin-left: 6.1%; margin-top: 35px; } .s4-l ul>li:nth-child(4n 1) { /* margin-left: 0; */ } .s4-l ul>li a { display: block; overflow: hidden; } .s4-l ul>li .s4-icon { width: 100%; max-width: 120px; height: 120px; background: #fff; border-radius: 50%; position: relative; transition: all .3s; } .s4-l ul>li .s4-icon img { position: absolute; left: 0; right: 0; top: 0; bottom: 0; max-width: 100%; max-height: 100%; margin: auto; } .s4-l ul>li .s4-icon img:nth-child(2) { display: none; } .s4-l ul>li p { font-size: 16px; line-height: 1; color: #333; text-align: center; margin-top: 28px; } .s4-l ul>li:hover .s4-icon { background: #0d5ea3; } .s4-l ul>li:hover .s4-icon img:first-child { display: none; } .s4-l ul>li:hover .s4-icon img:nth-child(2) { display: block; } .s4-r { width: 50%; padding: 34px 32px; background: url(/uploads/image/images/s4-r.jpg) no-repeat center center; background-size: cover; } .s4-r ul>li { width: 47.94%; margin-top: 38px; } .s4-r ul>li:nth-child(even) { margin-left: 4.12%; } .s4-r ul>li a { display: block; overflow: hidden; } .s4-r ul>li .pic { padding-top: 39.55%; } .s4-r ul>li p { font-size: 16px; line-height: 33px; color: #333; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: #fff; border: 1px solid #dcdcdc; } .s4-r ul>li:hover img { transform: scale(1.1); } .s4 { overflow: hidden; margin-top: 32px; } .index { padding-top: 37px; padding-bottom: 34px; background: url(/uploads/image/images/) no-repeat top center; background-size: cover; } @media screen and (max-width:1260px) { .s1-l { width: 568px; } .s1-banner a p { font-size: 14px; bottom: 15px; } .s1-banner ul li { width: 8px; height: 8px; } .s1-banner ul { bottom: 13px; } .s1-banner button { width: 20px; background-size: 20px auto; } .s1-r { padding-left: 20px; } .gg-tit h4 { font-size: 20px; padding-left: 10px; background-size: auto 15px; } .gg-tit a { font-size: 12px; padding-left: 20px; background-size: 12px auto; } .s1-r ul>li>a { font-size: 13px; padding-right: 80px; } .s1-r ul>li>span { font-size: 13px; } .s1-r ul>li { line-height: 50px; } .s1 { padding: 15px 10px 20px; } } @media screen and ( max-width: 1024px) { .banner { margin-top: 70px; } .banner button { width: 18px; background-size: 18px auto; } .banner .slick-next { right: 10px; } .banner .slick-prev { left: 10px; } .banner ul li { width: 10px; height: 10px; } .banner ul { bottom: 0; } .s1-r ul { margin-top: 10px; } .s1-r ul>li { line-height: 42px; } .s1-l { width: 468px; } .s2-list>ul>li .tm span:first-child { font-size: 22px; } .s2-list>ul>li .tm span { font-size: 14px; } .s2-list>ul>li .tm { width: 69px; padding: 11px 0; } .s2-list>ul>li .tm-info p { font-size: 13px; line-height: 24px; height: 48px; margin-top: 10px; margin-bottom: 10px; } .s2-list>ul>li .tm-info { padding-left: 15px; } .s2-list>ul>li { margin-top: 20px; } .item h4 { font-size: 18px; background-size: 100px auto; padding-left: 5px; line-height: 30px; } .s2-item { width: 32.5%; padding: 15px 10px 20px; } .s2-item:nth-child(3n 2) { margin-left: 0.83%; margin-right: 0.83%; } .s2-list2 { margin-top: 20px; } .s2-item ul>li>a { font-size: 13px; padding-right: 50px; padding-left: 15px; } .s2-item ul>li span { font-size: 12px; } .s2-item ul>li { line-height: 42px; background-size: 10px auto; } .s2 { margin-top: 20px; } .s3 { margin-top: 20px; padding: 15px 10px; } .s3-banner { margin-top: 15px; } .s3-banner ul>li { width: 187px; } .s3-banner ul { height: 146px; } .s3-banner a p { font-size: 12px; line-height: 30px; } .s3-banner>div { width: 100%!important; } .s4-l ul>li .s4-icon { max-width: 70px; height: 70px; margin: 0 auto; } .s4-l ul>li .s4-icon img { max-width: 30%; max-height: 30%; } .s4-l { padding-left: 10px; padding-right: 10px; } .s4-l ul>li p { font-size: 13px; margin-top: 15px; } .s4-r ul>li { margin-top: 15px; } .s4-r ul>li p { font-size: 13px; } .s4 { margin-top: 12px; } .index { padding-top: 15px; padding-bottom: 15px; } } @media screen and (max-width:768px) { .s1-l { float: none; width: auto; } .s1-r { padding-left: 0; margin-top: 15px; } .s2-list>ul>li { width: 49%; } .s2-list>ul>li:nth-child(3n 2) { margin-left: 0; margin-right: 0; } .s2-list>ul>li:nth-child(even) { margin-left: 2%; } .s2-item { float: none; width: auto; } .s2-item:nth-child(3n 2) { margin: 10px 0; } .s4-l, .s4-r { float: none; width: auto; padding: 15px 10px; } .s4-r { margin-top: 10px; } } @media screen and (max-width:640px) { .banner { margin-top: 50px; } .banner button { background-size: 8px auto; } } @media screen and (max-width:480px) { .s1-banner ul { right: 10px; } .s1-banner a p { font-size: 13px; padding-left: 10px; padding-right: 56px; } .s1-r ul>li { line-height: 38px; } .s2-list>ul>li { float: none; width: auto; margin-top: 10px; } .s2-list>ul>li .tm { width: 59px; padding: 8px 0; } .s2-list>ul>li .tm span:first-child { font-size: 20px; margin-bottom: 5px; } .s2-list>ul>li .tm span { font-size: 13px; } .s2-list>ul>li .tm-info p { margin-top: 3px; margin-bottom: 3px; } .s2-list>ul>li:nth-child(even) { margin-left: 0; margin-right: 0; } .s4-l ul>li { width: 32%; margin-left: 0; } .s4-l ul>li:nth-child(3n 2) { margin-left: 2%; margin-right: 2%; } } .box .hd{ margin-top:30px; text-align:left;} .box .hd li {float:left;} .box .hd li{ display:inline-block;margin:0 5px;overflow:hidden; font-size:18px; height:45px; line-height:45px;text-align:center; color:#333; cursor:pointer; position:relative; border:1px solid #2e73be; border-radius:25px;} .box .hd li:hover{background:#2e73be; color:#fff; font-weight:bold;} .box .hd li:hover a{color:#fff;} .box .hd li a:hover{color:#fff;} .box .hd li a{display:block;padding: 0 25px;} .box .hd li a.on{ background:#2e73be; color:#fff; font-weight:bold;} .s5 { margin: 30px 0; margin-top: 33px; padding: 34px 32px 28px; background: #fff; box-shadow: 3px 3px 5px 1px #cde0e5;} .s5 ul {margin-top: 20px;} .s5 ul li { padding: 0 20px; line-height: 36px; border: 1px solid #0d5ea3; float: left; background: #f0f8ff; border-radius: 20px; margin-right: 10px;} .s5 ul li:hover a { color: #0d5ea3; } @media screen and (max-width: 1024px){ .s5 { padding-left: 10px; padding-right: 10px; } .s5 ul li a { font-size: 13px; } }