* { margin: 0; padding: 0; list-style: none; outline-style: none; text-decoration: none; } html, body { width: 100%; min-height: 100%; } body { background-color: #fff; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { /* display: inline-block; */ } .text-center { text-align: center; } .nav { width: 100%; position: absolute; top: 0; left: 0; padding: 25px; box-sizing: border-box; z-index: 10; } .nav-left { float: left; } .nav-left .logo { width: 80px; height: 80px; background: url("../image/logo.png") no-repeat; background-size: 80px 80px; float: left; } .nav-left .nav-name { font-family: ToppanBunkyuMidashiGothicStdN-ExtraBold; font-size: 44px; color: #ffffff; float: left; line-height: 80px; margin-left: 20px; } .nav-right { float: right; } .nav-right .nav-item { float: left; font-family: PingFangSC-Medium; font-size: 24px; color: #ffffff; margin: 0px 30px; line-height: 80px; position: relative; cursor: pointer; } .nav-right .actived { color: #FFC84E; } .nav-right .actived:after { position: absolute; content: ''; left: 0; bottom: 5px; height: 8px; width: 100%; background-color: #fff; background-image: linear-gradient(90deg, #ffc84e 0%, #f2367a 97%); } .item-title { position: relative; } .item-title:after { position: absolute; content: ''; left: 0; bottom: 5px; height: 8px; width: 100%; background-image: linear-gradient(90deg, #ffc84e 0%, #f2367a 97%); } .banner { position: relative; } .banner img { height: 100%; width: 100%; } .banner .swiper-container { /*height: 570px;*/ } .swiper-pagination-bullet { border-radius: 10px; width: 31px; } .swiper-pagination-bullet-active { background-color: #fff; } .new { margin-top: 50px; line-height: 50px; font-size: 26px; margin: 70px 15%; width: 70%; } .new-title { font-size: 26px; color: #1e1e1e; } .new-sub { font-size: 14px; text-align: center; line-height: 36px; color: #7f7f7f; margin-bottom: 40px; } .new-group { /* float: right;*/ width: 100%; box-sizing: border-box; } .news-box { width: 33.33%; height: 300px; margin: 20px auto; float: left; position: relative; } .new-item { width: 283px; max-width: 95%; height: 100%; position: absolute; top: 50%; left: 50%; margin-left: -141.5px; margin-top: -50%; /*margin: 20px auto;*/ box-shadow: 0 3px 10px 0 rgba(107, 107, 107, 0.50); border-radius: 10px; overflow: hidden; } .new-item:hover { cursor: pointer; } /*.new-item:nth-child(3n) { margin-right: 0; }*/ .nav-item-img img { width: 100%; height: 100%; } .nav-item .nav-item-value { /*min-height: 100px;*/ } .new-item .new-item-name { max-width: 283px; font-size: 16px; color: #333; height: 82px; line-height: 24px; font-weight: 700; text-align: left; padding: 0 15px; } .new-item .new-item-name { word-break: normal; /*overflow: hidden; white-space:normal; text-overflow:ellipsis; -o-text-overflow:ellipsis;*/ } .new-item .new-item-name a { color: #000; text-decoration: none; } .new-item-time { color: #999; font-size: 12px; padding-left: 15px; height: 34px; line-height: 34px; } .news-img { text-align: center; margin-top: 40px; } .news-img img { width: 100%; max-width: 900px; /*max-height: 350px;*/ } .view-more { margin-top: 10px; text-align: center; } .view-more button { border-radius: 100px; padding: 10px 30px; background-image: linear-gradient(90deg, #ffc84e 0%, #f2367a 97%); outline-style: none; cursor: pointer; border: none; color: #fff; } .clear { clear: both; } .about { width: 100%; height: 100%; position: relative; } .back-img { width: 100%; height: 700px; } .back-img img { width: 100%; height: 100%; } .about-container { position: absolute; top: 10px; } .special-title { font-family: PingFangSC-Semibold; font-size: 26px; color: #ffffff; text-align: center; } .special-title span { padding: 10px; position: relative; } .special-title span:after { position: absolute; content: ''; bottom: -12px; left: 12px; height: 8px; width: 100px; background-color: #fff; background-image: linear-gradient(90deg, #ffc84e 0%, #f2367a 97%); } .about-content { padding: 30px 20%; font-family: PingFangSC-Regular; font-size: 17px; color: #f1f1f1; } .about-content p { margin-top: 40px; text-indent: 20px; } .cooperation-group { text-align: center; } .cooperation-title { font-family: PingFangSC-Semibold; font-size: 24px; color: #ffffff; text-align: center; margin: 30px 0; } .cooperation-item { background-color: #fff; width: 160px; height: 55px; border-radius: 4px; margin-right: 26px; margin-bottom: 15px; display: inline-block; } .cooperation-item img { width: 40px; height: 40px; margin-top: 10px; margin-left: 10px; } .cooperation-item .item-right { width: 110px; float: right; line-height: 22px; padding-top: 10px; box-sizing: border-box; } .cooperation-item .item-right .item-name { font-family: PingFangSC-Regular; font-size: 17px; color: #1e1e1e; text-align: center; } .cooperation-item:first-child .item-name { font-size: 12px; line-height: 15px; } .cooperation-item:first-child .item-right { padding-top: 5px; } .cooperation-item .item-right .item-href { font-family: PingFangSC-Regular; font-size: 10px; color: #1e1e1e; text-align: center; } .join { padding: 30px 20%; } .all { text-align: left; font-family: PingFangSC-Semibold; font-size: 24px; color: #000; line-height: 80px; } .join-table { background: #ffffff; box-shadow: 0 3px 10px 0 rgba(107, 107, 107, 0.50); border-radius: 5px; border: 1px solid #ccc; overflow: hidden; height: 567px; } .join-left { width: 30%; float: left; height: 100%; } .join-left > div { position: relative; padding: 19px 30px; font-size: 17px; } .join-th { background-image: linear-gradient(90deg, #ffc84e 0%, #f2367a 97%); color: #fff; } .join-item { position: relative; border-bottom: 1px solid #d8d8d8; cursor: pointer; } .join-item .item-icon { width: 0; height: 0; border-top: 10px solid transparent; border-left: 10px solid #d8d8d8; border-bottom: 10px solid transparent; position: absolute; right: 20px; top: 50%; margin-top: -5px; } .join-item.actived { background-color: #cde7ff; } .join-item.actived .item-icon { border-left: 10px solid #ff985c; } .join-title { padding: 10px 30px; } .join-right { float: left; border-left: 1px solid #ccc; padding: 20px; height: 567px; overflow: auto; width: 70%; box-sizing: border-box; } .join-right-title:before { position: absolute; content: ""; width: 6px; height: 20px; background-color: #ff985c; top: 4px; left: 0; } .join-right-title { font-family: PingFangSC-Medium; font-size: 18px; color: #1e1e1e; position: relative; padding-left: 15px; } .join-right p { font-family: PingFangSC-Regular; font-size: 15px; color: #1e1e1e; margin: 13px 0; } .right-expect { padding-top: 20px; border-top: 1px solid #d8d8d8; } .right-expect:before{ top: 24px; } .join-email { text-align: right; font-family: PingFangSC-Semibold; font-size: 18px; color: #fd0101; margin-top: 30px; } .foot { background-color: #333; color: #fff; width: 100%; margin-top: 50px; } .foot .foot-left { float: left; width: 50%; box-sizing: border-box; padding: 50px; } .foot .foot-left p { line-height: 30px; margin: 10px 0; font-size: 14px; } .foot-top { width: 100%; } .foot .foot-right { width: 49%; float: right; padding: 40px; box-sizing: border-box; } .foot .foot-right .foot-code { float: left; margin-right: 20px; position: relative; padding-right: 160px; } .foot .foot-right .foot-code img { width: 100px; height: 100px; } .foot .foot-right .foot-code .foot-code-name { text-align: center; position: absolute; top: 50%; transform: translateY(-50%); left: 108px; font-size: 14px; } .foot-bot { text-align: center; color: #7f7f7f; font-size: 14px; padding: 20px 0; border-top: 1px solid #7f7f7f; } .foot-bot a { margin-left: 20px; color: #7f7f7f; } .foot-box { float: right; } @media screen and (min-width: 1367px) { .new { max-width: 1000px; margin: 70px auto; width: 64%; } .about-container { top: 50px; } } @media screen and (max-width: 1367px) and (min-width: 1201px) { .new { margin: 70px 15%; width: 70%; } .join-table { height: 567px; } } @media screen and (max-width: 1200px) and (min-width: 980px) { .new { margin: 70px auto; width: 80%; } .join-table { height: 592px; } .join-right { min-height: 592px; } .foot .foot-right { width: 49%; float: right; padding: 50px 8px; box-sizing: border-box; } } @media screen and (max-width: 640px) { .nav-left .logo { width: 2rem; height: 2rem; background-size: 2rem 2rem; } .nav-left .nav-name { font-size: 0.7rem; line-height: 2rem; } .nav-right { display: none; } .banner #container { height: 10rem; } .new { width: 80%; margin: 20px 10%; } .about-content { padding: 1.5rem 10%; } .new-title { font-size: 1rem; } .new-sub { font-size: 0.8rem; margin-bottom: 0.5rem; } .new-img { width: 100%; } .new-group { width: 100%; } .news-box { width: 100%; height: 5rem; margin: 0.6rem auto; float: left; position: relative; } .new-item { width: 283px; height: 100%; position: relative; top: 0; left: 0; margin-left: 0; margin-top: 0; box-shadow: 0 3px 10px 0 rgba(107, 107, 107, 0.50); border-radius: 10px; overflow: hidden; } .view-more { margin-top: 0; } .dis { display: none; } .back-img { height: 50rem; } .about-container { top: 2rem; } .new-item { padding-bottom: 0rem; width: 100%; margin-bottom: 1rem; border-radius: 0.1rem; } .nav-item-img { width: 4rem; height: 3rem; float: left; margin-top: 0.5rem; margin-left: 0.5rem; } .nav-item-img img{ height: auto !important; } .nav-item-value { float: left; width: calc(100% - 4.5rem); padding: 0.5rem; box-sizing: border-box; } .new-item .new-item-name { width: 100%; font-size: 0.7rem; height: 3.3rem; line-height: 0.9rem; font-size: 0.7rem; box-sizing: border-box; } .new-item-time { line-height: 1rem; text-align: right; padding-right: 1.2rem; } .special-title { font-size: 1rem; } .special-title span:after { width: 4rem; } .about-content { font-size: 0.7rem; } .about-content p { margin-top: 1rem; } .cooperation-group { padding: 0.5rem; text-align: left; } .cooperation-item { width: 48%; margin-right: 2%; margin-bottom: 0.5rem; } .cooperation-item img { width: 1.2rem; height: 1.2rem; } .cooperation-item:nth-child(even) { margin-right: 0; } .cooperation-item .item-right .item-name { font-size: 0.7rem; } .cooperation-item:first-child .item-name { font-size: 0.6rem; } .join { padding: 1rem; } .join-table { height: auto; } .join-left { width: 34%; } .all { font-size: 1rem; } .join-left > div { padding: 1rem 0.7rem; font-size: 0.7rem; } .join-right { width: 65%; padding: 0.5rem; min-height: 33.7rem; } .join-right p { font-size: 0.6rem; margin: 0.5rem 0; } .join-right-title { font-size: 0.7rem; } .foot .foot-left { width: 100%; padding-bottom: 0; padding: 0 1rem; } .foot .foot-right { width: 100%; padding: 0 1rem; } .join-item .item-icon { right: 0.2rem; margin-top: -0.4rem; border-top: 0.4rem solid transparent; border-left: 0.4rem solid #d8d8d8; border-bottom: 0.4rem solid transparent; } .join-item.actived .item-icon { border-left: 0.4rem solid #ff985c } .join-email { font-size: 0.7rem; text-align: left; } .right-expect { padding-top: 0.3rem; } .foot-box { width: 100%; } .foot .foot-right .foot-code img { width: 4rem; height: 4rem; } .foot .foot-right .foot-code { padding-right: 0; width: 25%; margin: 0 12.5%; } .foot .foot-right .foot-code .foot-code-name { display: none; } .foot-bot a { margin-left: 0; display: block; } } /*轮播*/ #container { width: 100%; height: 600px; overflow: hidden; } .sections, .section { height: 100%; } #container, .sections { position: relative; } .section { background-color: #000; background-size: cover; background-position: 50% 50%; text-align: center; color: white; } #section0 { background-image: url('../image/banner1.jpg?v=1.0'); } #section1 { background-image: url('../image/banner2.jpg?v=1.0'); } #section2 { background-image: url('../image/banner3.jpg?v=1.0'); } ::-webkit-scrollbar-track-piece { background-color: #fff; -webkit-border-radius: 0 } ::-webkit-scrollbar { width: 10px; height: 10px } ::-webkit-scrollbar-thumb { height: 50px; background-color: #b8b8b8; -webkit-border-radius: 6px; outline: 2px solid #fff; outline-offset: -2px; border: 2px solid #fff; filter: alpha(opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5 } ::-webkit-scrollbar-thumb:hover { height: 50px; background-color: #878987; -webkit-border-radius: 6px }