@charset "utf-8"; .container { position: relative; width: 100%; } .Area-hd { line-height:1.1; text-align:center; } .Area-hd .p1 { font-size:32px; font-weight:bold; color:#1d3571; } .Area-hd .p1 i { color:#333; } .Area-hd .p2 { font-size:18px; margin-top:15px; color:#888; text-transform:uppercase; } .Area-hd01 { text-align:left; } .aArea { background:url(aArea.jpg) no-repeat center bottom; padding:75px 0 35px; } .aArea01 { position:relative; margin-top:35px; padding-left:50px; } .aArea01 .pic { width:540px; overflow:hidden; } .aArea01 .pic img { transition: all 0.6s; } .aArea01 .pic01 { position:absolute; right:0; bottom:0; width:225px; z-index:1; overflow:hidden; } .aArea01 .pic01 img { transition: all 0.6s; } .aArea01 .txt { position:absolute; right:135px; top:40px; width:580px; height:320px; padding:45px 20px 0 20px; line-height:1.1; background:#fff; box-shadow:rgba(0,0,0,0.12) 0px 0px 16px; box-sizing: border-box; z-index:5; } .aArea01 .txt .p1 { font-size:18px; color:#333; font-weight:bold; } .aArea01 .txt .p2 { width:55px; height:1px; margin-top:10px; background:#1d3571; } .aArea01 .txt .p3 { font-size:16px; line-height:2; margin-top:15px; color:#888; } .aArea01 .txt .p4 { margin-top:35px; } .aArea01 .txt .p4 a { display:inline-block; width:130px; line-height:40px; font-size:14px; text-align:center; border:1px solid #1d3571; color:#1d3571; } .aArea01 .txt .p4 a i { padding-right:40px; background:url(a01.png) no-repeat center right; } .aArea01 .txt .p4 a:hover { background:#1d3571; } .aArea01 .txt .p4 a:hover i { color:#fff; background:url(a02.png) no-repeat center right; } .aArea01 .pic:hover img { transform: scale(1.1)!important; } .aArea01 .pic01:hover img { transform: scale(1.1)!important; } .bArea { position:relative; width:1920px; left:50%; margin-left:-960px; z-index:1; } .bArea .txt { position:absolute; top:50%; transform: translateY(-50%); left:0; right:0; text-align:center; color:#fff; letter-spacing:6px; line-height:1.1; z-index:2; } .bArea .txt .p1 { font-size:28px; font-weight:bold; } .bArea .txt .p2 { width:70px; height:1px; background:#fff; margin:15px auto 0; } .bArea .txt .p3 { font-size:18px; text-transform:uppercase; margin-top:20px; } .bArea .pic { overflow:hidden; } .bArea .pic img { transition: all 0.6s; } .bArea:hover .pic img { transform: scale(1.1)!important; } .cArea { padding:75px 0 60px; } .cArea01 { margin-top:50px; } .cArea01 ul li { float:left; width:31.66%; margin-right:2.5%; } .cArea01 ul li:nth-child(3n) { margin-right:0; } .cArea01 ul li:nth-child(n + 4) { margin-top:55px; } .cArea01 ul li:nth-child(n + 7) { width:48.75%; } .cArea01 ul li:nth-child(8) { margin-right:0; } .cArea01 ul li .txt { margin-top:15px; } .cArea01 ul li .txt .p1 { font-size:20px; color:#333; font-weight:bold; } .cArea01 ul li .txt .p2 { font-size:14px; color:#888; margin-top:10px; line-height:25px; height:50px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; } .cArea01 ul li .pic { overflow:hidden; } .cArea01 ul li .pic img { transition: all 0.6s; } .cArea01 ul li:hover .pic img { transform: scale(1.1)!important; } .cArea01 ul li:hover .txt .p1 { color:#1d3571; } .dArea { position:relative; } .dArea .hd01 { position:absolute; top:75px; color:#fff; left:50%; margin-left:-600px; z-index:5; } .dArea .hd01 em { display:inline-block; font-size:32px; font-weight:bold; margin-right:15px; } .dArea .hd01 i { display:inline-block; font-size:18px; text-transform:uppercase; } .dArea01 { position:relative; width:1920px; left:50%; margin-left:-960px; z-index:1; } .dArea01 .swiper-slide { position:relative; } .dArea01 .swiper-slide .txt { position:absolute; left:0; right:0; top:220px; color:#fff; line-height:1.1; z-index:5; } .dArea01 .swiper-slide .txt .p1 { font-size:24px; font-weight:bold; } .dArea01 .swiper-slide .txt .p2 { font-size:16px; line-height:30px; height:90px; margin-top:25px; max-width:770px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; } .dArea01 .swiper-slide .txt .p3 { margin-top:15px; } .dArea01 .swiper-slide .txt .p3 a { display:inline-block; width:130px; line-height:40px; font-size:14px; text-align:center; border:1px solid #fff; color:#fff; } .dArea01 .swiper-slide .txt .p3 a i { padding-right:40px; background:url(a02.png) no-repeat center right; } .dArea01 .swiper-slide .txt .p3 a:hover { background:#fff; } .dArea01 .swiper-slide .txt .p3 a:hover i { color:#1d3571; background:url(a01.png) no-repeat center right; } .dArea02 { position:absolute; left:0; right:0; bottom:50px; z-index:5; } .dArea02 .swiper-slide a { display:block; cursor:pointer; padding:7px 10px; background:rgba(0,0,0,0.7); } .dArea02 .swiper-slide .pic { float:left; width:135px; overflow:hidden; } .dArea02 .swiper-slide .pic img { transition: all 0.6s; } .dArea02 .swiper-slide .txt { float:right; width:calc(100% - 150px); padding-top:15px; } .dArea02 .swiper-slide .txt .p1 { font-size:16px; color:#fff; line-height:25px; min-height:50px; } .dArea02 .swiper-slide .txt .p2 { font-size:12px; color:#888; margin-top:5px; text-transform:uppercase; } .dArea02 .swiper-slide-thumb-active a { background:#fff; } .dArea02 .swiper-slide-thumb-active .txt .p1 { color:#333; } .dArea02 .swiper-slide:hover .pic img { transform: scale(1.1)!important; } .eArea { padding:65px 0 75px; } .eArea01 { position:relative; margin-top:50px; } .eArea01 .swiper-slide a { position:relative; display:block; overflow:hidden; } .eArea01 .swiper-slide .pic { position:relative; overflow:hidden; } .eArea01 .swiper-slide .pic img { transition: all 0.6s; } .eArea01 .swiper-slide .pic p { position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(29,53,113,0.8); z-index:1; opacity:0; transition: all 0.6s; } .eArea01 .swiper-slide .txt { position:absolute; width:230px; right:50px; top:155px; color:#fff; z-index:2; opacity:0; transition: all 0.6s; } .eArea01 .swiper-slide .txt .p1 { font-size:20px; } .eArea01 .swiper-slide .txt .p2 { font-size:12px; margin-top:15px; } .eArea01 .swiper-slide .txt .p3 { font-size:14px; margin-top:15px; line-height:25px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; } .eArea01 .swiper-slide:hover .pic img { transform: scale(1.1)!important; } .eArea01 .swiper-slide:hover .pic p { opacity:1; } .eArea01 .swiper-slide:hover .txt { right:20px; opacity:1; } .eArea01 .prev-e01,.eArea01 .next-e01 { position:absolute; top:50%; width:45px; height:60px; transform: translateY(-50%); background-color:#7f7f7f; background-position:center center; background-repeat:no-repeat; z-index:2; cursor:pointer; } .eArea01 .prev-e01 { background-image:url(e01.png); left:-70px; } .eArea01 .next-e01 { background-image:url(e02.png); right:-70px; } .eArea01 .prev-e01:hover,.eArea01 .next-e01:hover { background-color:#1d3571; } .fArea { padding:40px 0 100px; background:#f5f6f8; } .fArea01 { margin-top:30px; } .fBox01 { float:left; width:390px; position:relative; } .fBox01 .pic { position:relative; overflow:hidden; } .fBox01 .pic img { transition: all 0.6s; } .fBox01 .pic p { position:absolute; left:0; right:0; top:0; bottom:0; background:rgba(0,0,0,0.5); z-index:2; } .fBox01 .txt { position:absolute; top:100px; left:45px; right:60px; color:#fff; z-index:2; } .fBox01 .txt .p1 { font-size:16px; font-weight:bold; } .fBox01 .txt .p2 { font-size:16px; margin-top:65px; line-height:25px; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; } .fBox01 .txt .p3 { font-size:14px; margin-top:20px; line-height:25px; height:50px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; } .fBox01 .txt .p4 { width:12px; height:2px; background:#01a3e2; margin-top:70px; } .fBox01:hover .pic img { transform: scale(1.1)!important; } .fBox02 { float:right; width:calc(100% - 415px); } .fBox02 ul li { background:#fff; } .fBox02 ul li:nth-child(n + 2) { margin-top:20px; } .fBox02 ul li a { position:relative; display:block; } .fBox02 ul li .pic { float:right; width:275px; overflow:hidden; } .fBox02 ul li .pic img { transition: all 0.6s; } .fBox02 ul li .txt { float:left; width:calc(100% - 275px); padding:50px 40px 0 50px; color:#000; box-sizing: border-box; } .fBox02 ul li .txt .p1 { font-size:14px; } .fBox02 ul li .txt .p2 { font-size:16px; margin-top:25px; line-height:25px; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; } .fBox02 ul li .txt .p3 { font-size:14px; margin-top:10px; line-height:25px; height:50px; color:#777; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; } .fBox02 ul li:hover .txt .p2 { color:#1d3571; } .fBox02 ul li:hover .pic img { transform: scale(1.1)!important; } .gArea { padding:60px 0 50px; } .gArea01 { margin-top:40px; } .gArea01 .swiper-slide a { display:block; border:1px solid #eee; overflow:hidden; } .gArea01 .swiper-slide a img { transition: all 0.6s; } .gArea01 .swiper-slide:hover a img { transform: scale(1.1)!important; } .swiper-pagination-g01 { width:100%; text-align:center; margin-top:20px; } .swiper-pagination-g01 .swiper-pagination-bullet { width:10px; height:10px; margin:0 5px; background:#ccc; border-radius:100%; opacity:1; } .swiper-pagination-g01 .swiper-pagination-bullet-active { background:#1d3571; } .hArea { padding-bottom:30px; line-height:25px; } .hArea .p1 { float:left; font-size:16px; color:#333; width:80px; } .hArea .p2 { float:right; font-size:14px; color:#c8c8c8; width:calc(100% - 80px); } .hArea .p2 a { padding:0 10px; color:#c5c5c5; } .hArea .p2 a:hover { color:#1d3571; }