.ss-banner { display: none; } .nav_b { float: right; margin-top: 15px; position: relative; z-index: 1000; } .nav_bar { float: left; } .nav_bar ul li { height: 50px; position: relative; float: left; font-size: 18px; padding: 0 15px; background: url(../images/png.png) repeat; } .nav_bar ul li a { color: #333; } .nav_bar .xl_nav { position: absolute; left: 0; top: -999px; transition: none; -webkit-transition: none; } .nav_bar .xl_nav .xl_nav_box { transition: all 0.4s; -webkit-transition: all 0.4s; opacity: 0; filter: Alpha(opacity=0); background: url(../images/bb.png); border: 1px solid #e7e7e7; border-top: 3px solid #2eb6aa; width: 498px; position: relative; } .nav_bar .xl_nav .xl_nav_box b { position: absolute; left: 50px; top: -9px; display: block; width: 13px; height: 7px; background: url(../images/nav_t.png); } .nav_bar ul li:hover .xl_nav { top: 60px; } .nav_bar ul li:hover .xl_nav_box { margin-top: -10px; opacity: 1; filter: Alpha(opacity=100); } .nav_bar .xl_nav .cf { padding: 10px 20px 20px; } .nav_bar .xl_nav ul { float: left; width: 50%; } .nav_bar .xl_nav ul li { float: none; width: auto; height: auto; display: block; border-bottom: 1px solid #c8c6c7; margin: 0 10px; padding: 12px 0; } .nav_bar .xl_nav ul .li { border-bottom: 0; } .nav_bar .xl_nav ul li i { display: block; } .nav_bar .xl_nav ul li a { font-size: 16px; color: #000; transition: all 0.4s; -webkit-transition: all 0.4s; text-shadow: none; } .nav_bar .xl_nav ul li i em { padding-top: 5px; display: block; } .nav_bar .xl_nav ul li i em a { line-height: 25px; display: block; font-size: 16px; color: #646464; } .nav_bar .xl_nav ul li a:hover { color: #2eb6aa; } .nav_bar .xl_nav ul li i em .three { border-bottom: 1px solid #c8c6c7; padding: 0px 0 5px 0; display: block; } .nav_bar .xl_nav ul li i em .three em { padding: 0 18px; } .nav_bar .xl_nav ul li i em .three em a { font-size: 14px; line-height: 20px; } .nav_bar .li6 .xl_nav, .nav_bar .li7 .xl_nav, .nav_bar .li8 .xl_nav { left: auto; right: 0px; } .nav_bar .li6 .xl_nav .xl_nav_box b, .nav_bar .li7 .xl_nav .xl_nav_box b, .nav_bar .li8 .xl_nav .xl_nav_box b { right: 50px; left: auto; } .nav_bar .li3 .xl_nav .xl_nav_box, .nav_bar .li4 .xl_nav .xl_nav_box, .nav_bar .li5 .xl_nav .xl_nav_box, .nav_bar .li8 .xl_nav .xl_nav_box { width: 205px; } .nav_bar .li3 .xl_nav .xl_nav_box ul, .nav_bar .li4 .xl_nav .xl_nav_box ul, .nav_bar .li5 .xl_nav .xl_nav_box ul, .nav_bar .li8 .xl_nav .xl_nav_box ul { width: 100%; float: none; } .header .topimg .slick-list li, .slick-track, .slick-list, .slick-slider, .header .topimg, .header { min-height: 400px; } .header { width: 100%; float: left; } .header .topimg { position: relative; z-index: 0; } .header .topimg .slick-list li { background-repeat: no-repeat; background-position: center top; background-size: cover; height: calc(100vh - 340px)!important; background-size: 100%!important; position: relative; } @media screen and (max-width: 1000px) { .header .topimg .slick-list li { height: calc(100vw * 0.469); } } @media screen and (max-width: 400px) { .header .topimg .slick-list li { height: calc(100vw * 0.6); } } @media screen and (max-width: 1400px) { .header .topimg .slick-list li h3 { font-size: 30px; right: 50px; bottom: 140px; } } @media screen and (max-width: 1000px) { .header .topimg .slick-list li h3 { bottom: 40px; } } @media screen and (max-width: 700px) { .header .topimg .slick-list li h3 { max-width: 100%; text-align: center; width: auto; right: 25px; left: 25px; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; bottom: 15px; text-shadow: 1px 1px 0px #000; } } @media screen and (max-width: 700px) { .header .topimg .slick-list li h3 { bottom: 10px; } } .header .topimg .slick-list li a { position: absolute; top: 0; width: 100%; height: 100%; /*background: url(../images/bgrad_1.png) left -1px repeat-x, url(../images/bgrad_2.png) repeat-x bottom left;*/ } @media screen and (max-width: 1000px) { .header .topimg .slick-list li a { background: url(../images/bgrad_2.png) repeat-x bottom left; background-size: 7%; } } .header .topimg .arrow { position: absolute; top: 50%; background: #000; color: #fff; font-size: 40px; height: 70px; width: 70px; margin-top: -35px; border-radius: 50%; opacity: 0.5; filter: alpha(opacity=50); text-align: center; cursor: pointer; z-index: 1000; border: 1px solid rgba(255, 255, 255, 0.5); } .header .topimg .arrow i { line-height: 65px; } .header .topimg .arrow.pre { left: 30px; } .header .topimg .arrow.next { right: 30px; } .header .topimg .arrow:hover { opacity: 0.4; filter: alpha(opacity=40); } .header .topimg .slick-dots { position: absolute; bottom: -40px; width: 100%; text-align: center; z-index: 1000; } .header .topimg .slick-dots li { display: inline-block; width: auto; float: none; vertical-align: middle; } .header .topimg .slick-dots li button { background: #A8B3C6; border: 0 none; border-radius: 7px; cursor: pointer; display: block; font-size: 0; height: 12px; line-height: 0; margin: 0 8px; outline: medium none; padding: 0; width: 12px; } .header .topimg .slick-dots li.slick-active button { background: #5e068c; } .header .topimg .slick-dots { bottom: 20px; left: 50%; margin-left: -50px; width: auto!important; text-align: left; } @media screen and (max-width: 1000px) { .header .topimg .slick-dots { bottom: 30px; } } @media screen and (max-width: 700px) { .header .topimg .slick-dots { text-align: center; bottom: 45px; } } .header .topimg .slick-dots li button { font-size: 16px; color: #fff; background: rgba(255, 255, 255, 0.5); height: 12px; width: 12px; border-radius: 100px; font-family: 'Raleway'; } @media screen and (max-width: 700px) { .header .topimg .slick-dots li button { font-size: 0; border-radius: 6px; height: 10px; width: 10px; background: #fff; } } .header .topimg .slick-dots li.slick-active button { background: #fff; font-weight: bold; } .header .topimg .slick-dots .moreimg { display: inline-block; background: #9f8027; color: #fff; padding: 0 15px; height: 30px; line-height: 30px; border-radius: 15px; margin-left: 30px; } @media screen and (max-width: 700px) { .header .topimg .slick-dots .moreimg { margin-left: 10px; font-size: 9px; line-height: 20px; height: 20px; border-radius: 10px; padding: 0 8px; } } .header .topimg .slick-dots .moreimg:hover { background: #461C8E; } .slide__text { position: absolute; width: 1300px; margin: 150px auto 0; top:20%; z-index:1000; left:10%; } .slide__text h3 { font-size: 49px; line-height: 58px; color: #fff; text-shadow: 1px 2px rgba(0, 0, 0, 0.3); margin: 0; font-weight: 700; max-width:800px; } .slide__text p { font-weight: 700; max-width: 650px; font-size: 24px; color: #fff; line-height: 1.4; display: block; margin: 25px 0; } @font-face { font-family: 'icon'; src: url('icon.eot?23948535'); src: url('icon.eot?23948535#iefix') format('embedded-opentype'), url('icon.woff2?23948535') format('woff2'), url('icon.woff?23948535') format('woff'), url('icon.ttf?23948535') format('truetype'), url('icon.svg?23948535#icon') format('svg'); font-weight: normal; font-style: normal; } .icon-search:before { content: '\e95c'; } .icon-angle-left:before { content: '\e99b'; } /* '?' */ .icon-angle-right:before { content: '\e99c'; } /* '?' */ [class^="icon-"]:before, [class*=" icon-"]:before { font-family: "icon"; font-style: normal; font-weight: normal; speak: none; display: inline-block; text-decoration: inherit; width: 0.5em; margin-right: .2em; text-align: center; font-variant: normal; text-transform: none; line-height: 1em; margin-left: .2em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; border-radius: 100%; padding: 8px 10px 8px 8px; } .motion_1 { transition: all 0.5s ease-out; } .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; top: 0; left: 0; display: block; margin-left: auto; margin-right: auto; } .slick-track:before, .slick-track:after { display: table; content: ''; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { display: none; float: left; height: 100%; min-height: 1px; } [dir='rtl'] .slick-slide { float: right; } .slick-slide img { display: block; width: 100%; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } /********sss20191215************/ .header .topimg .slick-list li, .slick-track, .slick-list, .slick-slider, .header .topimg, .header { min-height: auto; } .ss-banner { display: block; width: 100%; } .header .topimg .slick-list li { background: none; height: auto!important; } .header .topimg .slick-list li { height: auto!important; } .slide__text { } @media screen and (max-width: 1550px) { .header .topimg .arrow i { line-height: auto; } .icon-angle-right:before { padding: 0; position: absolute; left: 15px; top: 10px; } .icon-angle-left:before { padding: 0; position: absolute; left: 10px; top: 10px; } .header .topimg .arrow { width: 60px; height: 60px; } .slide__text h3 { font-size: 30px; right: auto; left: 5%; max-width: 50%; line-height: 50px; height: 100px; bottom: auto; position: absolute; top: 0; } .slide__text p { position: absolute; left: 5%; margin: 0; top: 100px; } .slide__text { margin: 10% auto 0; } .header .topimg .slick-dots { bottom: 15px; } } @media screen and (max-width: 1400px) { .slide__text h3, .slide__text p { left: 10%; } } @media screen and (max-width: 1100px) { .nav_bar ul li { font-size: 16px; padding: 0 10px; } } @media screen and (max-width: 1000px) { .header .topimg .arrow { width: 30px; height: 30px; line-height: 30px; font-size: 30px; } .slide__text { display: none; } .icon-angle-right:before, .icon-angle-left:before { left: 3px; top: 0px; } .header .topimg .slick-list li, .slick-track, .slick-list, .slick-slider, .header .topimg, .header { min-height: auto; } .slide__text, .header .topimg .arrow.next, .header .topimg .arrow.pre { display: none!important; } .header .topimg .slick-dots li button { width: 6px; height: 6px; margin: 0 3px; } .header .topimg .slick-dots { bottom: 5px; } .header .topimg .slick-dots { margin-left: -24px; } }