.banner { margin-left: 70px; position: relative; z-index: 10; } .banner::before { content: ''; display: block; width: 100%; height: 63.74%; background: url(../images/bannerb.png) no-repeat; position: absolute; left: -70px; top: 0; } .banner li a { position: relative; } .banner li a::after { content: ''; display: block; width: 100%; height: 262px; background: rgba(0, 0, 0, 7); background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 7)); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 7)); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 7)); /* Firefox 3.6 - 15 */ background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 7)); position: absolute; left: 0; /* top: 0; */ bottom: 0; } .bannerPic { padding-bottom: 39.46%; overflow: hidden; } .main { display: block; } .banner .slick-dots { bottom: 54px; width: 70px; height: 180px; background: #2c3196; padding: 23px 0; right: 1px; text-align: center; top: calc(50% - 80px); border-top-left-radius: 15px; border-bottom-left-radius: 15px; } .banner .slick-dots li { width: 25px; height: 25px; margin: 10px 6px; } .banner .slick-dots li button { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .3); position: relative; } .banner .slick-dots li.slick-active button::before { content: ''; display: block; width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); position: absolute; left: -11px; top: -11px; } .banner .slick-dots li.slick-active button { background: #fff } .banner .slick-arrow { width: 60px; height: 60px; border-radius: 50%; top: calc(50% - 30px); margin-top: 0; } .banner .slick-arrow.slick-prev { left: 10px; background: rgba(0, 0, 0, .3) url(../images/pl1.png) no-repeat 26px 23px; /* margin-left: -550px; */ top: calc(33.33% - 30px); } .banner .slick-arrow.slick-prev:hover { background: #2c4780 url(../images/pl1.png) no-repeat 26px 23px; } .banner .slick-arrow.slick-next { /* right: 50%; */ background: rgba(0, 0, 0, .42) url(../images/pl.png) no-repeat 28px 24px; margin-right: 0; left: 10px; top: calc(66.66% - 30px); } .banner .slick-arrow.slick-next:hover { background: #2c4780 url(../images/pl.png) no-repeat 28px 24px; } .bannersb { width: 160px; background: #efeff4; padding: 20px 0; position: absolute; right: 0; z-index: 10; bottom: 0; text-align: center; cursor: pointer; } .bannersb span { width: 16px; height: 22px; display: inline-block; } .bannersb:hover span { transition: all .3s ease-in-out; transform: scale(1.3); } .bann li a { display: block; position: relative; } .bannerp { font-size: 36px; color: #fff; position: absolute; width: 100%; left: 0; bottom: 38px; z-index: 1000; } /* mode1 */ .mode1 { position: relative; padding: 55px 0; } .mode1::before { content: ''; display: block; width: 100%; height: 446px; background: url(../images/mode1bg.png) no-repeat; position: absolute; top: -96px; } .banner::after { content: ''; display: block; width: 23.23%; height: 1px; background: #2c3196; position: absolute; left: -70px; bottom: 96px; } .mode1 .gp-container { position: relative; } .mode1 .gp-container::after { content: ''; display: block; width: 444px; height: 444px; position: absolute; /* background: url(../images/mode1a.png) no-repeat; */ left: 235px; bottom: -124px; } .title { position: relative; z-index: 10 } .title h2 { color: #222 !important; position: relative; line-height: 69px; padding-left: 34px; display: inline-block; vertical-align: middle; } .mode5 .title5 h2 { color: #222 !important; position: relative; line-height: 32px; padding-left: 34px; display: inline-block; vertical-align: middle; } .title h2::before, .mode5 .title5 h2::before { content: ''; display: block; width: 17px; height: 69px; background: url(../images/tb.png) no-repeat; position: absolute; left: 0; top: 0px; } .mode5 .title5 h2::before { top: -9px; } .title span::after { content: ''; display: block; width: 31px; height: 36px; background: url(../images/ta.png) no-repeat; position: absolute; right: -90px; top: 11px; } .title3 span { position: relative } .title3 span::after { background: url(../images/tta.png) no-repeat; } .title span { font-size: 36px; font-family: "DidotLTStd-Bold"; position: relative; vertical-align: middle; line-height: 63px; margin-left: 15px; margin-top: 6px; color: #cccc; display: inline-block; position: relative; } .title span a { color: #ccc } .more2 { position: absolute; bottom: 0 } .more { display: inline-block; width: 80px; height: 40px; margin-top: 18px; line-height: 40px; color: #757575; border-radius: 40px; position: relative; text-align: center; z-index: 10; background: rgba(0, 0, 0, .1); } .more::before { content: ''; display: block; width: 4px; height: 4px; border-radius: 50%; background: #2c4780; position: absolute; left: -2px; top: calc(50% - 2px); } .mode1Ul { overflow: hidden; margin: 0 -20px; position: relative; z-index: 10; } .mode1Ul li { transition: all .3s ease-in-out; } .mode1Ul li:hover { transform: translateX(5px); } .mode1Ul a { display: block; margin: 0 20px; padding-bottom: 10px; } .mode1Pic { padding-bottom: 56.36%; } .mode1Infor { padding: 20px 33px; background: #fff; box-shadow: 5px 0px 16px rgba(0, 0, 0, .06); padding-bottom: 40px; } .mode1Infor p { line-height: 28px; color: #222; margin-bottom: 15px; } .dateout { text-align: right; position: relative; } .dateout::before { content: ''; display: block; width: 44px; height: 1px; background: #e5e5e5; position: absolute; left: 0; top: 50%; } .date { line-height: 54px; color: #999; text-align: right; display: inline-block; /* margin-top: 11px; */ position: relative; } .date::before { content: ''; display: block; width: 54px; height: 54px; background: url(../images/datea.png) no-repeat; position: absolute; left: -67px; right: 0; } /* mode2 */ .mode2 { position: relative; } .mode2::before { content: ''; display: block; width: 100%; height: 444px; background: url(../images/mode2b.png) no-repeat; background-size: cover; position: absolute; right: 0; bottom: 0; } .mode2Ul { position: relative; z-index: 10; box-shadow: 0px 0px 16px rgba(0, 0, 0, .06); } .mode2Ul li { transition: all .2s ease-in-out; } .mode2Ul li:hover { transform: translateX(5px); } .mode2Ul a { display: block; background: #fff; border-right: 1px solid #eeeeee; padding: 37px 33px 68px 33px; } .date2 { display: inline-block; background: #f5f5fa; width: 81px; padding: 10px 0; /* height: 80px; */ text-align: center; } .date2 span:nth-child(1) { color: #757575; line-height: 28px; } .date2 h2 { color: #2c3196; font-size: 27px; } .date2Infor { margin-left: 100px; } .date2Infor { line-height: 26px; height: 52px; color: #222; overflow: hidden; } .mode2Top { overflow: hidden; padding-bottom: 27px; margin-bottom: 20px; border-bottom: 1px solid #e5e5e5; } .mode2Ul p { line-height: 23px; height: 69px; overflow: hidden; color: #999; } /* mode3 */ .mode3 { padding-top: 73px; padding-bottom: 60px; position: relative; } .mode3 .gp-container { position: relative; } .mode3 .gp-container::after { content: ''; display: none; width: 444px; height: 444px; position: absolute; background: url(../images/mode1a.png) no-repeat; left: 50%; margin-left: -222px; bottom: -124px; } .mode3::before { content: ''; display: block; width: 100%; height: 444px; background: url(../images/mode3bgf.png) no-repeat; background-size: cover; position: absolute; left: 0; top: -40px; } .title2 h2 { position: relative; line-height: 32px; width: 32px; padding-left: 34px; display: inline-block; margin-right: 0; } .title2 h2::before { background: url(../images/tb2.png) no-repeat; position: absolute; left: 0; top: 0; } .title2 span::after { background: url(../images/ta2.png) no-repeat; position: absolute; right: 0; left: 11px; width: 36px; height: 31px; top: 293px; } .title2 span { font-size: 36px; font-family: "DidotLTStd-Bold"; position: relative; vertical-align: top; line-height: 54px; margin-top: 0; margin-left: 0; display: inline-block; position: relative; writing-mode: vertical-lr; } .title2 span a { color: rgba(0, 0, 0, .3); } .title2 { position: relative; display: inline-block; } .more2 { position: absolute; left: 0; bottom: -182px; margin-top: 0; } .more2::before { content: ''; display: block; width: 4px; height: 4px; border-radius: 50%; background: #2c4780; right: 0; left: 77px; } .mode3main { margin-left: 140px; position: relative; z-index: 100; } .mode3l { width: 600px; display: block; position: relative; } .mode3lPic { padding-bottom: 66.67%; } .mode3Infor { padding: 20px 30px; background: #fff; box-shadow: 0px 0px 16px rgba(0, 0, 0, .06); margin-right: 50px; } .mode3Infor { position: absolute; left: 0; bottom: 0; } .date3 { background: none; width: auto; padding: 0; text-align: right; padding-right: 30px; border-right: 1px solid #e0e0e0; margin-right: 30px; } .mode3Infor p { line-height: 26px; height: 52px; overflow: hidden; color: #222; } .mode3Ul { margin-left: 630px; } .mode3Ul li { margin-bottom: 17px; transition: all .3s ease-in-out; } .mode3Ul li:hover { transform: translateX(5px); } .mode3Ul li a { display: block; box-shadow: 0px 0px 0px rgb(0 0 0 / 6%); background: #f5f5f5; overflow: hidden; } .mode3UlInfor { margin-left: 183px; padding: 20px 25px; } .mode3UlImg { width: 183px; } .mode3Ulpic { padding-bottom: 66.67%; } .mode3UlInfor p { line-height: 26px; color: #222; } .line { width: 40px; height: 1px; background: #d7d7d7; margin-top: 15px; margin-bottom: 5px; display: block; } .date4 p { color: #2c3196; display: inline-block; } .date4 h3 { font-size: 25px; color: #2c3196; display: inline-block; } /* mode4 */ .mode4 { margin-bottom: 93px; } .mode4 .gp-container { position: relative; } .mode4 .gp-container::after { content: ''; display: block; width: 444px; height: 444px; position: absolute; background: url(../images/mode1a.png) no-repeat; right: 0; bottom: -124px; } .mode4Ul { overflow: hidden; z-index: 100; position: relative; margin: 0 -5px; } .mode4Ul li { margin-bottom: 10px; box-sizing: border-box; /* overflow: hidden; */ /* padding:5px; */ transition: all .3s ease-in-out; } .mode4Ul li a { display: block; padding: 27px 41px; z-index: 1000; background: #fff; border: 1px solid #f0f0f0; margin: 0 5px; overflow: hidden; position: relative; } .mode4Ul li a::before { content: ''; display: block; width: 0px; height: 0px; background: url(../images/hz.png); background-size: cover; position: absolute; left: 0; top: 0; transition: all .5s ease-in-out; } .mode4Ul li:hover a::before { width: 124px; height: 124px; left: calc(100% - 104px); top: 58px; } .mode4Ul li:hover a { box-shadow: 16px 0px 44px rgba(44, 49, 150, .2) } .mode4Ul p { line-height: 26px; color: #222; margin-bottom: 20px; padding-bottom: 5px; position: relative; } .mode4Ul li:hover p::before { width: 100%; } .mode4Ul li:hover p { font-weight: bold; } .mode4Ul p::before { content: ''; display: block; width: 0%; height: 1px; background: #e5e5e5; position: absolute; left: 0; bottom: 0; transition: all 0.5s ease; } .mode4Ul span { line-height: 28px; display: block; color: #999; } /* mode5 */ .mode5 { position: relative; } .mode5con { overflow: hidden; } .mode5::before { content: ''; display: block; width: 100%; height: 644px; position: absolute; left: 0; top: 0px; background: url(../images/mode5bg.png) no-repeat; background-size: cover; z-index: 1; } .mode5 ul li a { display: block; overflow: hidden; margin: 0 5px; position: relative; } .name { text-align: center; font-size: 18px; position: absolute; left: 0; bottom: 0; padding: 20px 8px; } .name p { text-align: center; } .mode5 ul li a::before { content: ''; display: block; width: 100%; height: 60px; background: rgba(0, 0, 0, 7); background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 7)); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 7)); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 7)); /* Firefox 3.6 - 15 */ background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 7)); position: absolute; left: 0; /* top: 0; */ bottom: 0; } .mode5Img { padding-bottom: 140%; } .title5 { position: absolute; left: 0; top: 0; z-index: 100; background: #fff; padding-top: 10px; /* padding-bottom: 82px; */ box-sizing: border-box; padding-left: 20px; padding-right: 20px; } .more5 { position: absolute; left: 14px; bottom: 0; /* right: 0; */ margin-top: 0; } .mode5Ul { margin: 0 -5px; overflow: hidden; position: relative; z-index: 10; margin-left: 164px; } .mode5Ul>li { padding-bottom: 5px; } .mode5Ul li.slick-active a { position: relative; } .mode5Ul li.slick-active a::after { content: ''; display: block; width: 85%; height: 6px; background: #e0c67e; position: absolute; left: 0; bottom: -6px; } .mode5Ul .slick-dots { bottom: -36px; } .mode5Ul .slick-dots li.slick-active { width: 28px; height: 28px; line-height: 28px; border-radius: 50%; text-align: center; padding: 0; background: #fff; } .mode5Ul .slick-dots button { width: 8px; height: 8px; background: rgba(44, 49, 150, .2); } /* mode6 */ .mode6 { margin: 36px 0; } .mode6Ul { overflow: hidden; margin: 0 -6px; position: relative; z-index: 10; font-size: 0; } .mode6Ul li { width: calc(100% / 5); display: inline-block; margin-bottom: 18px; transition: all .3s ease-in-out; } .mode6Ul li:hover { transform: translateX(5px); } .mode6Ul li a { display: block; margin: 0 6px; border: 1px solid #fff; background: rgba(0, 0, 0, .06); box-sizing: border-box; padding: 24px 10px; text-align: center; color: #222; text-align: center; } .mode6 .gp-container { position: relative; /* z-index: 1; */ } .mode6 .gp-container::after { content: ''; display: block; width: 444px; height: 444px; position: absolute; background: url(../images/mode1a.png) no-repeat; right: 170px; bottom: -324px; } /* mode7 */ .mode7 { overflow: hidden; margin-top: 126px; } .title7 { width: 19.7%; float: left; position: relative; padding-bottom: 63px; } .title7::before { content: ''; display: block; width: 1px; height: 147px; background: #e5e5e5; position: absolute; right: -219px; top: 0; } .title7 span { font-size: 36px; font-family: "DidotLTStd-Bold"; position: relative; vertical-align: middle; line-height: 36px; margin-left: 32px; margin-top: 0px; color: #cccc; display: inline-block; position: relative; } .title7 span::after { /* right: -66px; */ top: -1px; } .mode7r { padding-top: 20px; margin-left: 617px; } .mode7Ul { margin: 0 -5px; overflow: hidden; } .mode7Ul a { display: block; margin: 0 5px; background: #fff; box-shadow: 0px 0px 16px rgba(0, 0, 0, .1); padding: 4px; position: relative; z-index: 10; } .mode7Pic { padding-bottom: 54.87%; overflow: hidden; } .mode7Infor { width: 123px; height: 47px; position: absolute; left: 4px; z-index: 2; bottom: 4px; display: inline-block; } .mode7Infor::before { content: ''; display: block; width: 123px; height: 5px; background: #e7e9e7; position: absolute; left: -3px; top: 0; } .mode7Infor::after { content: ''; display: block; width: 5px; height: 47px; background: #e7e9e7; position: absolute; right: 3px; top: 3px; } .mode7con { background: rgba(44, 49, 150, .9); width: 100%; display: inline-block; height: 100%; margin-top: 3px; overflow: hidden; margin-left: -3px; text-align: center; line-height: 47px; } .gotopout { width: 40px; height: 40px; position: fixed; text-align: center; padding: 10px; right: 0; z-index: 100; top: 70%; background: rgba(44, 49, 150, .9); } @media screen and (max-width: 1460px) { .mode7r { margin-left: 417px; } .title7 span::after { right: -66px; } .title7::before { display: none; } .mode7 { overflow: hidden; margin-top: 40px; } } @media screen and (max-width: 1301px) { .mode3UlInfor { margin-left: 183px; padding: 20px 12px; } .title2 span { line-height: 36px; } .mode3main { margin-left: 100px; } .title span { font-size: 22px; line-height: 22px; } .title span::after { top: -8px; } .title2 span::after { top: 193px; left: -5px; } .more2 { color: #fff; } .mode5Ul { margin-left: 132px; } } @media screen and (max-width: 1200px) { .banner .slick-dots { height: 130px; top: calc(50% - 65px); width: 50px; } .bannerp { font-size: 24px; } .banner .slick-dots li { width: 25px; height: 25px; margin: 5px 6px; } .bannersb { width: 120px; background: #efeff4; padding: 10px 0; } .mode1::before { top: -46px } .banner .slick-arrow { transform: scale(.8); } .title2 h2 { padding-left: 26px; } .mode1, .mode2, .mode3 { overflow: hidden; } } @media screen and (max-width: 1101px) { .banner .slick-arrow.slick-prev { left: 10px; margin-left: 0; } .banner .slick-arrow.slick-next { right: 10px; margin-right: 0; } .title2 { float: none; display: block; } .mode3main { margin-left: 0; } .title2 h2 { padding-left: 26px; width: auto; vertical-align: middle; line-height: 69px; } .title2 span { writing-mode: horizontal-tb; vertical-align: middle; } .title2 span::after { content: ''; display: block; width: 31px; height: 36px; background: url(../images/ta3.png) no-repeat; position: absolute; top: -5px; left: 228px; } .more2 { position: static; float: right; margin-top: 16px; } .mode3l { width: 100%; float: none; } .mode3Ul { margin-left: 0; margin-top: 20px; } .mode3Ul li a { display: block; box-shadow: 0px 0px 0px rgb(0 0 0 / 6%) !important; background: #f5f5f5; overflow: hidden; } .title5 { position: static; padding-bottom: 0; z-index: 100; left: 0; position: relative; height: auto !important; } .title5 h2 { padding-left: 26px; width: auto; vertical-align: middle; line-height: 69px !important; } .mode6Ul li { width: calc(100% / 5); } .title7 { width: 100%; padding-bottom: 0px; } .title7::before { display: none; } .mode7r { margin-left: 0; } .mode7 { margin-top: 0; } .mode5 .title5 h2::before { top: 0px; } .mode5Ul { margin-left: 0px; } } @media screen and (max-width: 997px) { .chinese { display: none; } .banner { margin-left: 30px; position: relative; } .banner::before { left: -30px; } .bannerp { bottom: 15px; } .banner .slick-dots { transform: scale(.5); right: -11px; top: calc(50% - 80px); } .banner li a::after { height: 52px; } .mode1Ul li, .mode2Ul li { margin-bottom: 20px; } .mode2Ul a { padding: 25px; } .banner::after { display: none; } .mode4 { margin-bottom: 45px; } } @media screen and (max-width:800px) {} @media screen and (max-width:768px) { .bannersb { transform: scale(.5); right: -29px; bottom: -12px; } .mode1::before { top: -22.5px } .bannerp { font-size: 16px; } .name { padding: 10px; } .mode6Ul li { width: calc(100% / 3); } .mode7Ul li { margin-bottom: 10px; } } @media screen and (max-width:672px) {} @media screen and (max-width:479px) { .mode6Ul li { width: calc(100% / 2); } .banner .slick-arrow { display: none !important; } .banner .slick-dots { transform: scale(.3); right: -16px; top: 0; } .banner { margin-left: 10px; position: relative; } .mode1, .mode2, .mode3 { padding: 25px 0; } .mode1Infor { padding: 15px; } .mode2Ul a { padding-bottom: 0; } .mode2Ul li:last-child a { padding-bottom: 25px; } .title span::after { display: none; } .mode6 .gp-container::after { right: 0; } } @media screen and (max-width:412px) { .bannersb { display: none; } .title span { display: none; } .banner .slick-dots { top: -15px; } }