.index .sliderBox { top: 107px; right: 0; position: fixed; width: 100%; z-index: 2; -webkit-transition: all .4s ease; transition: all .4s ease; overflow: hidden; } .index .sliderBox li { background: center center no-repeat; background-size: cover; } .index .sliderBox .next, .index .sliderBox .prev { width: 52px; height: 45px; display: block; cursor: pointer; position: absolute; top: 50%; -webkit-transition: all .3s; transition: all .3s; } .index .sliderBox .next { background: url(../image/next.png) no-repeat center; right: -100px; } .index .sliderBox .prev { background: url(../image/prev.png) no-repeat center; left: -100px; } .index .sliderBox .icon { display: block; width: 34px; height: 99px; background: url(../image/Icon.png) no-repeat center; position: absolute; left: 50%; bottom: 30px; z-index: 9; -webkit-animation: myfirst linear .5s infinite alternate; animation: myfirst linear .5s infinite alternate; } @-webkit-keyframes myfirst { from { bottom: 30px; -webkit-transition: all .4s ease; transition: all .4s ease; } to { bottom: 35px; -webkit-transition: all .4s ease; transition: all .4s ease; } } @keyframes myfirst { from { bottom: 30px; -webkit-transition: all .4s ease; transition: all .4s ease; } to { bottom: 35px; -webkit-transition: all .4s ease; transition: all .4s ease; } } .index .sliderBox:hover .next { right: 80px; } .index .sliderBox:hover .prev { left: 80px; } .index .sliderBox:hover .next:hover { background: url(../image/nextH.png) no-repeat center; } .index .sliderBox:hover .prev:hover { background: url(../image/prevH.png) no-repeat center; } .index .sliderBox .mediaBox { width: 100%; height: 100%; position: relative; display: none; } .index .sliderBox .mediaBox .downIcon { position: absolute; bottom: 15px; left: 50%; margin-left: -8px; } .index .newsBox { background: #f4f4f4; position: relative; z-index: 3; } .index .newsBox .container { height: 322px; padding: 44px 0 28px; overflow: hidden; } .index .newsBox .container .sliderBox2 { display: none; } .index .newsBox .container .leftWrap { height: 100%; float: left; padding-right: 10px; width: 46.1%; } .index .newsBox .container .newsLeft { height: 100%; padding: 0 36px 20px; background: #fff; } .index .newsBox .container .newsLeft .mediaLink { display: none; } .index .newsBox .container .newsLeft .newsTab { overflow: hidden; padding-bottom: 15px; } .index .newsBox .container .newsLeft .newsTab li { float: left; cursor: pointer; padding-top: 26px; font-size: 14px; color: rgba(94, 91, 94, 0.56); margin-right: 20px; vertical-align: bottom; } .index .newsBox .container .newsLeft .newsTab li.active { background: url(../image/Nav-bk.jpg) repeat-x left top; } .index .newsBox .container .newsLeft .newsContent ul li { display: none; } .index .newsBox .container .newsLeft .newsContent ul li.active { display: block; } .index .newsBox .container .newsLeft .newsContent h1 { font-size: 29px; color: #341a33; opacity: 0.5; padding-bottom: 5px; font-family: Montserrat-Regular; } .index .newsBox .container .newsLeft .newsContent h3 { font-size: 20px; color: #bc8f4b; padding-bottom: 15px; } .index .newsBox .container .newsLeft .newsContent p { font-size: 14px; color: rgba(137, 137, 137, 0.78); } .index .newsBox .container .newsRight { height: 100%; float: right; width: 53.9%; } .index .newsBox .container .newsRight .titleBox { display: none; } .index .newsBox .container .newsRight ul { overflow: hidden; height: 100%; } .index .newsBox .container .newsRight ul li { position: relative; height: 100%; /* width: 16.25%; */ width: 19.6%; float: left; margin-right: 0.5%; background: #fff; } .index .newsBox .container .newsRight ul li a { display: block; width: 100%; padding-top: 100px; position: relative; z-index: 2; text-align: center; } .index .newsBox .container .newsRight ul li a h3 { color: #8e858e; font-size: 22px; line-height: 22px; padding-bottom: 37px; /* text-align: left; */ /* padding-left: 16px; */ } .index .newsBox .container .newsRight ul li a p { /* padding-left: 16px; */ /* text-align: left; */ color: rgba(121, 104, 121, 0.15); font-size: 19px; line-height: 22px; letter-spacing: -1px; font-family: DINCond-BoldAlternate; } .index .newsBox .container .newsRight ul li .bg { position: absolute; top: -246px; left: 0; width: 100%; height: 100%; } .index .newsBox .container .newsRight ul li.active h3 { color: #fff; } .index .newsBox .container .newsRight ul li.active a p { color: rgba(255, 255, 255, 0.74); } .index .newsBox .container .newsRight ul li.lastTab .bg { background: #eeb742; } .index .newsBox .container .newsRight ul li.tab1 .bg { background: #ea4b3d; } .index .newsBox .container .newsRight ul li.tab2 .bg { background: #4bb033; } .index .newsBox .container .newsRight ul li.tab3 .bg { background: #0656a2; } .index .newsBox .container .newsRight ul li.tab5 .bg { background: #baa289; } .index .newsBox .container .newsRight ul li.tab7 .bg { background: #ff7e00; } .index .newsBox .container .newsRight ul li.tab5 { margin-right: 0; } .index .newsBox .container .newsRight ul li.tab6 .bg { background: #00aeff; } .index .subContent { height: 213px; position: relative; z-index: 3; background: #f4f4f4; margin: 0 auto; } .index .subContent .leftWrap { height: 100%; float: left; padding-right: 10px; } .index .subContent .leftWrap .leftBox { position: relative; } .index .subContent .leftWrap .leftBox .bd li { height: 213px; } .index .subContent .leftWrap .leftBox .bd li a { height: 100%; } .index .subContent .leftWrap .leftBox .bd li img { display: none; } .index .subContent .leftWrap .leftBox .bd .ban1 { background: url(../image/indexBottomLeft1.jpg) center no-repeat; position: relative; } .index .subContent .leftWrap .leftBox .bd .ban1 .leftContent { position: absolute; top: 76px; right: 167px; color: #dcd0b9; } .index .subContent .leftWrap .leftBox .bd .ban1 .leftContent h1 { color: #74726d; font-size: 20px; padding-bottom: 10px; } .index .subContent .leftWrap .leftBox .bd .ban1 .leftContent p { font-size: 14px; color: #4b4b4b; } .index .subContent .leftWrap .leftBox .bd .ban1 .leftContent span { font-size: 29px; color: #d99530; font-family: Montserrat-Regular; } .index .subContent .leftWrap .leftBox .bd .ban2 { background: url(../image/indexBottomLeft2.jpg) right center no-repeat; position: relative; } .index .subContent .leftWrap .leftBox .bd .ban2 .leftContent { position: absolute; top: 76px; right: 155px; } .index .subContent .leftWrap .leftBox .bd .ban2 .leftContent h1 { color: #74726d; font-size: 20px; padding-bottom: 10px; } .index .subContent .leftWrap .leftBox .bd .ban2 .leftContent p { color: #968673; font-size: 14px; } .index .subContent .leftWrap .leftBox .bd .ban2 .leftContent span { font-size: 29px; color: #ddbfaf; font-family: Montserrat-Regular; } .index .subContent .leftWrap .leftBox .dotBox { position: absolute; right: 40px; top: 40px; } .index .subContent .leftWrap .leftBox .dotBox li { float: left; width: 26px; height: 4px; background: #fff; margin-left: 5px; } .index .subContent .leftWrap .leftBox .dotBox li.on { background: #e62129; } .index .subContent .rightBox { height: 100%; float: right; background: url(../image/indexBottomRight.jpg) center no-repeat; position: relative; } .index .subContent .rightBox .leftContent { position: absolute; left: 30px; top: 103px; } .index .subContent .rightBox .leftContent h1 { font-size: 17px; color: #000; opacity: 0.46; padding-bottom: 5px; } .index .subContent .rightBox .leftContent p { font-size: 29px; color: #b0a8a6; font-family: DINCond-BoldAlternate; letter-spacing: -1px; } .index .subContent .rightBox .rightContent { position: absolute; left: 400px; top: 110px; font-size: 13px; color: #898989; opacity: 0.89; line-height: 21px; width: 250px; } .index .phoneBox { display: none; } .index .phoneBox .mediaNews { background-color: #fff; padding: 20px; } .index .phoneBox .mediaNews>h1 { font-size: 18px; color: #58585e; padding-bottom: 5px; text-align: center; } .index .phoneBox .mediaNews>h2 { font-size: 22px; color: #dad9da; padding-bottom: 15px; font-family: DINCond-BoldAlternate; text-align: center; border-bottom: 2px solid #656565; } .index .phoneBox .mediaNews .newsImg { padding: 20px 0 20px 40%; position: relative; } .index .phoneBox .mediaNews .newsImg img { position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 35%; } .index .phoneBox .mediaNews .newsImg h1 { font-size: 16px; color: #e62129; padding-bottom: 3px; } .index .phoneBox .mediaNews .newsImg h2 { font-size: 16px; color: #cb9c5c; font-family: Montserrat-Regular; padding-bottom: 3px; } .index .phoneBox .mediaNews .newsImg p { font-size: 14px; color: #666666; line-height: 18px; } .index .phoneBox .mediaNews .newsList li { border-top: 1px solid #d8d8d8; line-height: 50px; } .index .phoneBox .mediaNews .newsList li p { font-size: 16px; color: #6e6e6e; width: 74%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .index .phoneBox .mediaNews .newsList li span { color: #b5b5b4; font-size: 14px; } .index .phoneBox .mediaNews .moreButton { line-height: 50px; text-align: center; font-size: 14px; color: #e62129; border: 1px solid #e62129; } .index .phoneBox .phoneBottom { background: #f4f4f4; padding: 40px 20px 20px; } .index .phoneBox .phoneBottom .otherLink { margin-bottom: 40px; } .index .phoneBox .phoneBottom .otherLink a { position: relative; width: 50%; font-size: 0; color: #727286; float: left; } .index .phoneBox .phoneBottom .otherLink a img { width: 100%; } .index .phoneBox .phoneBottom .otherLink a span { font-size: 14px; position: absolute; top: 47%; left: 34%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .index .phoneBox .phoneBottom .sliderBox1 { position: relative; } .index .phoneBox .phoneBottom .sliderBox1 .bd ul li { position: relative; font-size: 0; } .index .phoneBox .phoneBottom .sliderBox1 .bd ul li>img { width: 100%; } .index .phoneBox .phoneBottom .sliderBox1 .bd ul li .rightContent { width: 50%; position: absolute; right: 0; top: 0; height: 100%; background: rgba(0, 0, 0, 0.5); padding: 11% 0 0 9%; } .index .phoneBox .phoneBottom .sliderBox1 .bd ul li .rightContent h1 { font-size: 16px; color: #fff; padding-bottom: 5px; } .index .phoneBox .phoneBottom .sliderBox1 .bd ul li .rightContent h2 { font-size: 0; line-height: 20px; } .index .phoneBox .phoneBottom .sliderBox1 .bd ul li .rightContent h2 img { vertical-align: middle; margin-right: 5px; width: 17px; } .index .phoneBox .phoneBottom .sliderBox1 .bd ul li .rightContent h2 span { font-size: 16px; font-family: DINCond-BoldAlternate; color: #ea4b3d; vertical-align: middle; } .index .phoneBox .phoneBottom .sliderBox1 .dotBox { position: absolute; right: 10px; top: 10px; } .index .phoneBox .phoneBottom .sliderBox1 .dotBox li { float: left; width: 26px; height: 4px; background: #fff; margin-left: 5px; } .index .phoneBox .phoneBottom .sliderBox1 .dotBox li.on { background: #e62129; } @media (max-width: 1200px) { .index .newsBox .container { height: auto; } .index .newsBox .container .leftWrap { width: 100%; padding-right: 0; padding-bottom: 20px; } .index .newsBox .container .newsRight { width: 100%; height: 250px; padding: 0 36px; } .index .subContent { padding: 0 36px; height: auto; } .index .subContent .leftWrap, .index .subContent .rightBox { height: 213px; padding-right: 0; } .index .subContent .leftWrap { margin-bottom: 28px; /* .leftBox .bd li{ background-position-x:center!important; } */ } } @media (max-width: 760px) { .index .newsBox .container .newsRight { height: auto; } .index .newsBox .container .newsRight ul li.tab1 { /* background: #ea4b3d; */ border-top: 3px solid #ea4b3d; } .index .newsBox .container .newsRight ul li.tab2 { /* background: #4bb033; */ border-top: 3px solid #4bb033; } .index .newsBox .container .newsRight ul li.tab3 { /* background: #0656a2; */ border-top: 3px solid #0656a2; } .index .newsBox .container .newsRight ul li.tab5 { /* background: #baa289; */ border-top: 3px solid #baa289; } .index .newsBox .container .newsRight ul li.tab6 { /* background: #00aeff; */ border-top: 3px solid #00aeff; } .index .newsBox .container .newsRight ul li.tab7 { /* background: #ff7e00; */ border-top: 3px solid #ff7e00; } .index .newsBox .container .newsRight ul li { width: 48%; margin: 0 1% 20px; overflow: hidden; height: 250px; } .index .newsBox .container .leftWrap, .index .newsBox .container .newsRight { padding-left: 20px; padding-right: 20px; } .index .subContent { padding: 0; } .index .subContent .rightBox .leftContent { top: 10px; left: 20px; } .index .subContent .rightBox .rightContent { left: 20px; top: 76px; } .index .sliderBox .next, .index .sliderBox:hover .next { right: 10px; } .index .sliderBox .prev, .index .sliderBox:hover .prev { left: 10px; } } @media (max-width: 640px) { .index .sliderBox { top: 75px; } .index .sliderBox .bd, .index .sliderBox .prev, .index .sliderBox .next, .index .sliderBox .icon { display: none; } .index .sliderBox .mediaBox { display: block; background: url(../image/mediaBg.jpg) center center no-repeat; background-size: cover; } .index .newsBox .container { padding-top: 0; padding-bottom: 20px; } .index .newsBox .container .sliderBox2 { display: block; } .index .newsBox .container .newsMediaBg { display: block; width: 100%; } .index .newsBox .container .newsLeft { display: none; } .index .subContent { display: none; } .index .phoneBox { display: block; z-index: 2; position: relative; } } @media (max-width: 480px) { .index .newsBox .container .newsRight .titleBox { display: block; text-align: center; } .index .newsBox .container .newsRight .titleBox h1 { font-size: 18px; color: #58585e; padding-bottom: 5px; } .index .newsBox .container .newsRight .titleBox p { font-size: 22px; color: #dad9da; padding-bottom: 15px; font-family: DINCond-BoldAlternate; } .index .newsBox .container .newsRight ul { display: flex; /* margin: 0 -20px; */ } .index .newsBox .container .newsRight ul li { /* width: 15%; */ margin: 0 0.5%; height: 130px; } .index .newsBox .container .newsRight ul li a { padding-top: 28px; } .index .newsBox .container .newsRight ul li a h3 { font-size: 14px; line-height: 22px; padding-bottom: 16px; /* text-align: left; */ /* padding-left: 8px; */ } .index .newsBox .container .newsRight ul li a p { /* padding-left: 8px; */ color: #e1dde1; font-size: 12px; line-height: 15px; } .index .newsBox .container .newsRight ul li .bg { top: -126px; } .index .newsBox .container .newsRight ul li:hover h3 { color: #8e858e; } .index .newsBox .container .newsRight ul li:hover a p { color: #e1dde1; } .index .subContent { padding: 0 20px; } .index .subContent .leftWrap { margin-bottom: 20px; height: auto; } .index .subContent .leftWrap .leftBox .bd li.ban1, .index .subContent .leftWrap .leftBox .bd li.ban2 { height: 160px; background: url(../image/mediaBg2.jpg) center center no-repeat; background-size: cover; } .index .subContent .leftWrap .leftBox .bd li.ban1 img, .index .subContent .leftWrap .leftBox .bd li.ban2 img { position: absolute; right: 68%; top: 40px; width: 80px; display: block; } .index .subContent .leftWrap .leftBox .bd li.ban1 .leftContent, .index .subContent .leftWrap .leftBox .bd li.ban2 .leftContent { left: 35%; top: 45px; } .index .subContent .leftWrap .leftBox .bd li.ban1 .leftContent h1, .index .subContent .leftWrap .leftBox .bd li.ban2 .leftContent h1 { font-size: 14px; padding-bottom: 5px; } .index .subContent .leftWrap .leftBox .bd li.ban1 .leftContent p, .index .subContent .leftWrap .leftBox .bd li.ban2 .leftContent p { font-size: 12px; } .index .subContent .leftWrap .leftBox .bd li.ban1 .leftContent span, .index .subContent .leftWrap .leftBox .bd li.ban2 .leftContent span { font-size: 16px; color: #b7918b; } .index .subContent .leftWrap .leftBox .dotBox { right: 10px; top: 10px; } .index .subContent .rightBox { margin-bottom: 20px; height: 160px; background: url(../image/mediaBg3.jpg) center center no-repeat; background-size: cover; } .index .subContent .rightBox .leftContent, .index .subContent .rightBox .rightContent { display: none; } } @media (max-width: 460px) { .index .subContent .leftWrap .leftBox .bd .ban2 .leftContent, .index .subContent .leftWrap .leftBox .bd .ban1 .leftContent { left: 20px; right: inherit; } } @media (min-width: 2200px) { .index .sliderBox { max-width: 2200px; left: 0; margin: 0 auto; } } @media(max-width:1200px) { .index .subContent .rightBox .rightContent { width: auto; right: 20px; } }