/*初始化111*/ html,body{margin: 0;padding: 0;font-family:Microsoft YaHei; } .pagebox{ position:relative; } .btn.btn-primary{background-color:rgba(0, 174, 196, 1); } .e_pagebox{background-color:rgba(0, 174, 196, 0); }@media only screen and (min-width: 1200px){ } @media only screen and (max-width:996px) and (min-width: 769px){ } #c_portalResNews_list-15559897004681296 .p_page .pre .iconfont:before{ shadow-angle:0px; shadow-distance:0px; shadow-angle-ofInset:0px; shadow-distance-ofInset:0px; } #c_portalResNews_list-15559897004681296 .p_page .next .iconfont:before{ shadow-angle:0px; shadow-distance:0px; shadow-angle-ofInset:0px; shadow-distance-ofInset:0px; } #c_portalResNews_list-15559897004681296 .p_more .iconfont:before{ shadow-angle:0px; shadow-distance:0px; shadow-angle-ofInset:0px; shadow-distance-ofInset:0px; } #c_portalResNews_list-15559897004681296 .p_loading .iconfont:before{ shadow-angle:0px; shadow-distance:0px; shadow-angle-ofInset:0px; shadow-distance-ofInset:0px; } .biaoti {color:#333;font-size:20px;text-align:center;font-weight:600;} .biaoti1 {color:#00AEC4;font-size:18px;text-align:center;line-height: 180%;padding: 0px 0px 50px 0px;} .p_categoryBox .p_linkBox.click .color_assist, .p_categoryBox .p_linkBox.click a { color: #666; } .xuexiao { background: #f6f6f6; clear: both; margin: 30px 0px; min-height: 250px; } .xuexiao2 h3 { font-size: 18px; padding: 80px 0px 0px 100px; } .xuexiao2 p { font-size: 14px; padding: 20px 0px 0px 100px; line-height:180%; width:80%; color:#666; } .clearboth {clear:both;} .xuexiao1 img { width: 100%; } .biaoti2 h3 { background: #00AEC4; font-size: 14px; color: #fff; text-align: center; font-weight: normal; padding: 15px 0px; width: 100%; display: block; clear: both; } .c_portalResIntro_detail-01001 .p_con .biaoti2 img { width: 100% !important; display: block; } .p_page { display: inline-block !important; padding: 30px 0; } .gongsi { line-height: 180%; color: #666; padding-left: 0px; padding-right: 200px; } .gongsi p {padding-bottom:25px;} .swiper-slide{ overflow: hidden; } a:hover, a:active { color: #00aec4; text-decoration: none; } body .swiper-container{ height: 100vh; } .bg{ height: 100vh; width: 100%; position: absolute; z-index: 1; left: 0; top: 0; background-size: cover; } .box_1{ position: absolute; bottom: -60px; right: 0; z-index: 2; max-width: 1558px; width: 100%; height: 100%; } .box_1 img{ /* width: 100%; */ transition: all ease .3s; float: right; position: absolute; top: 0; right: 0; } .box1{ position: relative; height: 100vh; width: 100vw; } .box2{ display: table; width: 100%; height: 100vh; padding-top: 100px; } .box2_center{ display: table-cell; vertical-align: middle; } .box_2{ position: absolute; bottom: 0; left: 50%; z-index: 3; transform: translateX(-50%); width: 100vw; } .box_1200{ width: 100%; margin: 0 auto; position: relative; height: 100%; max-width: 1200px; } .box_2 img{ position: absolute; bottom: 0; left: 50%; z-index: 3; transform: translateX(-50%); } .box_3{ position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-100%); z-index: 3; } .box_4 { position: absolute; bottom: 110px; left: 0; right: 0; z-index: 3; } .box2_1450{ display: table-cell; vertical-align: middle; } .box2_1{ float: left; width: 41.38%; position: relative; border: 1px solid #eee; overflow: hidden; cursor: pointer; transition: all 1s ease-in-out; opacity:0; left:-300px; } .swiper-slide-active .box2_1{ float: left; width: 41.38%; position: relative; border: 1px solid #eee; overflow: hidden; cursor: pointer; transition: all 1s ease-in-out; transition-delay: 0.4s; opacity:1; left:0px; } .box2_1450_1{ position: relative; max-width: 1450px; width: 100%; margin: 0 auto; z-index: 2; transition: all ease .3s; } .box2_2{ float: right; width: 58.62%; } .box2_1 .t{ position: absolute; left: 0; top: 60px; right: 0; margin: 0 auto; max-width: 257px; width: 100%; } .box2_1 .cpp1{ position: absolute; left: 0; bottom: 60px; right: 0; margin: 0 auto; max-width: 257px; width: 61px; transition: all 0.6s ease-in-out; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } .box2_1 .cpp1:hover{ position: absolute; left: 0; bottom: 60px; right: 0; margin: 0 auto; max-width: 257px; width: 61px; transition: all 0.6s ease-in-out; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .box2_2_0{ border: 1px solid #eee; overflow: hidden; position: relative; float: right; width: 94.12%; margin-bottom: 45px; cursor: pointer; } .box2_2_2{ border: 1px solid #eee; overflow: hidden; position: relative; float: right; width: 94.12%; margin-bottom: 45px; cursor: pointer; transition: all 1.2s ease-in-out; opacity:0; top:300px; } .swiper-slide-active .box2_2_2{ border: 1px solid #eee; overflow: hidden; position: relative; float: right; width: 94.12%; margin-bottom: 45px; cursor: pointer; transition: all 1.2s ease-in-out; transition-delay: 1s; opacity:1; top:0px; } .box2_2_1 { border: 1px solid #eee; overflow: hidden; position: relative; float: right; width: 94.12%; margin-bottom: 45px; cursor: pointer; transition: all 1.2s ease-in-out; opacity:0; right:-400px; } .swiper-slide-active .box2_2_1 { border: 1px solid #eee; overflow: hidden; position: relative; float: right; width: 94.12%; margin-bottom: 45px; cursor: pointer; transition: all 1.2s ease-in-out; transition-delay: 0.6s; opacity:1; right:0px; } .box2_2_1 .t, .box2_2_2 .t, .box2_2_0 .t{ position: absolute; right: 10%; z-index: 2; top: 16%; max-width: 224px; width: 100%; } .box2_2_1 .cpp2{ position: absolute; right: 20%; z-index: 2; bottom: 15%; max-width: 224px; width: 61px; transition: all 0.6s ease-in-out; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } .box2_2_1 .cpp2:hover{ position: absolute; right: 20%; z-index: 2; bottom: 15%; max-width: 224px; width: 61px; transition: all 0.6s ease-in-out; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } } .box2_2_2{ margin-bottom: 0px; } .box2_1450_1 img{ width: 100%; } .box2_2_2 .t, .box2_2_0 .t{ right: auto; left: 10%; } .box2_2_2 .cpp3{ position: absolute; left: 20%; width:61px; z-index: 2; bottom:10%; transition: all 0.6s ease-in-out; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } .box2_2_2 .cpp3:hover{ position: absolute; left: 20%; width:61px; z-index: 2; bottom:10%; transition: all 0.6s ease-in-out; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .box2_2_0{ display:none; } .tduiimg{ width: 44.737%; float: left; position: absolute; top: 50%; transform: translateY(-50%); } .box3_1450{ /* display: table-cell; */ /* vertical-align: middle; */ width: 100%; /* position: absolute; */ /* top: 50%; */ /* transform: translateY(-50%); */ } .box3_1450_1{ width: 100%; position: relative; height: 387px; max-width: 1300px; padding: 0 30px; z-index: 999; margin: 0 auto; margin-top: 4%; } .box3_1450_1 .c_portalResNews_list-01001001{ width: 100%; } .box3{ /* display: table; */ width: 100%; height: 100vh; padding: 100px 0px 0; position: relative; } .e_news .e_link{ width: 100%; margin: 0 auto; max-width: 950px; position: relative; display: inline-block; left: 50%; transform: translateX(-50%); height: 376px; } .tduitext{ width: 47.263%; float: right; } .tduitext h2{ font-size: 34px; color: #fff; } .e_news .e_link:hover .tduitext::after{ background: rgba(62, 194, 210, 0); border: 1px solid #3ec2d2; color: #3ec2d2; } .box4{ display: table; width: 100%; height: 100vh; padding: 100px 0px 0; } .box4_1380{ display:block; vertical-align: middle; width: 100%; } .box4_1380_1{ position: relative; max-width: 1380px; width: 100%; margin: 40px auto 30px auto; z-index: 4; padding-top:300px; transition: all 1s ease-in-out; opacity:0; } .swiper-slide-active .box4_1380_1{ position: relative; max-width: 1380px; width: 100%; margin: 40px auto 30px auto; margin-top: 0px; padding-top:50px; z-index: 4; transition: all ease .3s; transition: all 1s ease-in-out; transition-delay: 0.4s; opacity:1; } .box4_6 {text-align:center;display:block;position:relative;z-index:999;padding-top:3%;} .box3_6 {text-align:center;display:block;position:relative;z-index:999;margin-top: 200px;} .box3_6 img,.box4_6 img { transition: all 0.6s ease-in-out; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } .box3_6:hover img,.box4_6:hover img{ transition: all 0.6s ease-in-out; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .box4_3{ position: absolute; bottom: 0; left: 50%; z-index: 3; transform: translateX(-50%); width: 100vw; } .box4_4 { position: absolute; bottom: 15%; left: 0; right: 0; z-index: 3; width: 100%; margin: 0 auto; max-width: 1400px; padding: 0 10px; } .box4_4 img{ float: right; } .box4_1{ width: 100%; padding: 0 30px; } .box4_1 h2{ font-size: 30px; text-align: center; color: #00aec4; font-weight: bold; margin-bottom: 20px; } .box4_1 p{ font-size: 14px; text-align: center; color: #666; margin-bottom: 35px; } .box4_1 img{ width: 100%; } .box4_1 a{ display: block; margin: 0 auto; margin-top: 3%; } .box4_1 a img{ margin: 0 auto; display: block; width: auto; } .box5 { display: table; width: 100%; height: 100vh; padding: 100px 0px 0; } .box5_1400 { display: table-cell; vertical-align: middle; width: 100%; } .box5_1400_1 { position: relative; max-width: 1440px; width: 100%; margin: 0 auto; z-index: 4; transition: all ease .3s; padding: 0 20px; } .box5_1{ float: left; width: 46%; border: 1px solid #443f3a; padding: 10% 2%; background: rgba(14, 14, 14, 0); transition:all ease .3s; cursor: pointer; transition: all 1s ease-in-out; opacity:0; left: -400px; position: relative; } .swiper-slide-active .box5_1{ float: left; width: 46%; border: 1px solid #443f3a; padding: 10% 2%; background: rgba(14, 14, 14, 0); transition:all ease .3s; cursor: pointer; transition: all 1s ease-in-out; transition-delay: 0.4s; opacity:1; left:0px; } .box5_2{ float: right; width: 46%; border: 1px solid #443f3a; padding: 10% 2%; cursor: pointer; position: relative; transition: all 1.3s ease-in-out; opacity:0; left:800px; position: relative; } .swiper-slide-active .box5_2{ float: right; width: 46%; border: 1px solid #443f3a; padding: 10% 2%; transition: all 1.3s ease-in-out; transition-delay: 0.4s; opacity:1; left:0px; } .swiper-slide-active .box5_1:hover, .swiper-slide-active .box5_2:hover{ background: rgba(14, 14, 14, 0.27); } .box5_1 img, .box5_2 img{ display: block; margin: 0 auto; transition: all 0.6s ease-in-out; } .box5_1 a img, .box5_2 a img{ display: block; margin: 0 auto; transition: all 0.6s ease-in-out; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } .box5_1 a:hover img,.box5_2 a:hover img{ transition: all 0.6s ease-in-out; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .box5_1 h2, .box5_2 h2{ color: #00aec4; font-size: 26px; text-align: center; margin: 7% 0; } .box5_1 p, .box5_2 p{ color: #fff; font-size: 14px; text-align: center; max-width: 350px; margin: 0 auto 10%; line-height: 25px; min-height: 80px; } .box5_1 a, .box5_2 a{ display: block; transition: all ease .3s; } .box6 { /* display: table; */ width: 100%; height: 100vh; padding: 100px 0px 0; position: relative; } .box6_1200 { /* display: table-cell; */ /* vertical-align: middle; */ width: 100%; position: absolute; top: calc((100% - 506px)/2); } .box6_1200_1 { position: relative; max-width: 1240px; width: 100%; margin: 0 auto; z-index: 4; transition: all ease .3s; overflow: hidden; padding: 0 20px; transition: all 2s ease-in-out; opacity:0; top:400px; } .swiper-slide-active .box6_1200_1 { position: relative; max-width: 1240px; width: 100%; margin: 0 auto; z-index: 4; transition: all ease .3s; overflow: hidden; padding: 0 20px; transition: all 2s ease-in-out; transition-delay: 1s; top:0px; opacity:1; } .newsWrac, newscenter_box{ width: 100%; } .newsWrac a{ padding: 40px; display: inline-block; border: 2px solid #01aec4; width: 100%; } .newsWrac .tduiimg { position: static; transform: translateY(0); overflow: hidden; } .newsWrac .tduitext h2{ color: #333333; font-size: 20px; margin: 30px 0; } .newsWrac .tduitext p{ font-size: 12px; color: #666666; line-height: 20px; } .newsWrac .tduitext::after{ content:'详细内容'; display: block; margin-top: 38px; background: #3ec2d2; width: 101px; text-align: center; line-height: 45px; border-radius: 25px; transition: all ease .3s; border: 1px solid #3ec2d2; color: #fff; } .newsWrac .tduitext time{ color: #666666; font-size: 14px; display: inline-block; margin-bottom: 30px; } .dd-pagination{ margin: 10px 0; display: inline-block; text-align: center; width: 100%; } .dd-pagination span{ margin: 0 5px; background: #666666; border: 1px solid #666666; } .dd-pagination span.swiper-pagination-bullet-active{ background: #00aec4; border: 1px solid #00aec4; } .box6_1200_1 .gre{ font-family: arial; color: rgba(0, 174, 196, .07); text-align: center; font-size: 96px; margin-bottom: 35px; transition: all 2s ease-in-out; opacity:0; position:relative; top:300px; } .swiper-slide-active .box6_1200_1 .gre{ font-family: arial; color: rgba(0, 174, 196, .07); text-align: center; font-size: 96px; margin-bottom: 35px; transition: all 2s ease-in-out; transition-delay: 0.2s; opacity:1; top:0px; } .newsWrac a img{ transition: all ease .3s; } .newsWrac a:hover img{ transform: scale(1.1); } .box7_1240 { display: table-cell; vertical-align: middle; width: 100%; } .box7_1240_1{ position: relative; max-width: 1280px; width: 100%; margin: 0 auto; z-index: 4; transition: all ease .3s; overflow: hidden; padding: 0 20px; } .box7_1{ display: inline-block; margin: 0 auto; width: 100%; } .box7_1 li img {position:relative;transition: all 0.5s ease-in-out;top:0px;} .box7_1 li:hover img {position:relative;transition: all 0.5s ease-in-out;top:-13px;} .box7_1 li{ display: inline-block; color: #fff; font-size: 18px; text-align: center; background: rgba(0, 0, 0, .21); border: 1px solid rgba(255, 255, 255, .21); border-radius: 13px; width: 30.333%; padding: 4% 0; margin: 0 1% 30px; transition:all ease .3s; cursor: pointer; position: relative; } .box7_1 li:hover {color:#00AEC4; transition: all 1s ease-in-out;} .zi1 { transition: all 1s ease-in-out; opacity:0; left:-100px; } .swiper-slide-active .zi1 { transition: all 1s ease-in-out; transition-delay: 0.2s; opacity:1; left:0px; } .zi2 { transition: all 1s ease-in-out; opacity:0; left:-100px; } .swiper-slide-active .zi2 { transition: all 1s ease-in-out; transition-delay: 0.5s; opacity:1; left:0px; } .zi3 { transition: all 1s ease-in-out; opacity:0; left:-100px; } .swiper-slide-active .zi3 { transition: all 1s ease-in-out; transition-delay: 0.8s; opacity:1; left:0px; } .zi4 { transition: all 1s ease-in-out; opacity:0; left:-100px; } .swiper-slide-active .zi4 { transition: all 1s ease-in-out; transition-delay: 1.1s; opacity:1; left:0px; } .zi5 { transition: all 1s ease-in-out; opacity:0; left:-100px; } .swiper-slide-active .zi5 { transition: all 1s ease-in-out; transition-delay: 1.4s; opacity:1; left:0px; } .zi6 { transition: all 1s ease-in-out; opacity:0; left:-100px; } .swiper-slide-active .zi6 { transition: all 1s ease-in-out; transition-delay: 1.7s; opacity:1; left:0px; } .box7_1 li p{ margin-top: 15px; } .box7 { display: table; width: 100%; height: 100vh; padding: 100px 0px 0; } .box7_1 li:hover{ background: rgba(0, 0, 0, 0.51); border: 1px solid rgba(255, 255, 255, .21); } #footer{ background: #1f1f1f; } .foot_bule{ background: #00aec4; padding: 40px 0; } @media screen and (max-width:1500px){ .box2_1450_1{ max-width: 1200px; } .box2_2_1 .t, .box2_2_2 .t { top: 20%; right: 5%; } .box2_2_2 .t, .box2_2_0 .t { right: auto !important; left: 8%; } .box2_2_1, .box2_2_2, .box2_2_0 { margin-bottom: 36px; } .box4_4 { bottom: 10%; } .box5_1400_1 { max-width: 1240px; } } @media screen and (max-width: 1300px){ .box2_1450_1{ max-width: 900px; } .box2_1 .t { max-width: 180px; top: 46px; } .box2_2_1 .t, .box2_2_2 .t { max-width: 180px; } .box2_2_2 .t { left: 6.5%; } .box2_2_1, .box2_2_2, .box2_2_0 { margin-bottom: 26px; } .box_4 { left: 5%; } .box_3{ left: 5%; max-width: 500px; } .box_3 img{ width:100%; } .e_news .e_link { max-width: 750px; } .box4_4 { bottom: 6%; } .navbox { width: calc(100% - 159px); } .black_1 { padding-right: 3%; } .black_2, .black_3 { padding: 0 4%; } } @media screen and (max-width:1200px){ } @media screen and (max-width:950px){ .box2_1450_1{ max-width: 750px; } .box2_1 .t { max-width: 140px; top: 40px; } .box2_2_1 .t, .box2_2_2 .t { max-width: 140px; } .box2_2_2 .t, .box2_2_0 .t { left: 8%; } .box2_2_1, .box2_2_2, .box2_2_0 { margin-bottom: 22px; } .newsWra { max-width: 750px !important; } } @media screen and (max-width:768px){ } @media only screen and (max-width: 768px){ .gongsi { line-height: 180%; color: #666; padding-left: 0px; padding-right: 0px; } } @media only screen and (min-width: 769px) { .p_page .pageNum.active { text-decoration: none; background:#00AEC4; color:#fff; border-color:#00AEC4; } .p_page .pageNum.active { text-decoration: none; background-color:#00AEC4; color: #fff; border-color: #00AEC4; } .p_page .next:hover { background: #00AEC4; border-color: #00AEC4; color: #fff; cursor: pointer } .p_page .next:active { background: #00AEC4; border-color: #00AEC4; color: #fff; } .p_page .pre:hover { color: #fff; background: #00AEC4; border-color: #00AEC4; cursor: pointer } .p_page .pre:active { background: #00AEC4; border-color: #00AEC4; color: #fff; } }