* { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; min-width: 1280px; } h1, h2, h3, p { margin: 0; padding: 0; font-family: XinGothic,Helvetica, sans-serif; } span { display: inline-block; } /* 涓嬮潰鏄痓anner鍥 */ .img_mobile,.img_mobile_title,.img_mobile_subtitle{ display: none; } .img_pc,.img_pc_title,.img_pc_subtitle{ display: block; } .mobile_text{ display: none; } .pc_text{ display: block; } .content { width: 100%; background: rgb(39, 39, 41); position: relative; } .max_1320 { max-width: 1320px; width: 84%; margin: 0 auto; } .number_title { margin: 30px 0; } .banner { background: #191919; /* height: 560px; */ padding: 1%; } .banner_img { word-break: keep-all; white-space: nowrap; width: 97%; margin: 0 auto; overflow: hidden; position: relative; font-size: 0; } .big_banner_img { width: 100%; position: relative; } .banner_img li { display: inline-block; width: 25%; margin: 0 4px; position: relative; cursor: pointer; } .banner_img li img { width: 100%; } .banner_words { color: #fff; text-align: center; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 80%; padding-top: 10%; } .banner_words h1 { font-family: SKSans-BoldItalic; color: rgba(255, 255, 255, 0.32); font-size: 60px; } .banner_words h1:last-of-type { border-bottom: 1px solid rgba(255, 255, 255, 0.32); } .banner_words p { font-size: 30px; } .pag_btn { text-align: center; margin: 30px 0; } div .control_btn { width: 30px; height: 30px; /* border-radius: 50%; */ background-image: url("../images/culture/Right_Small.png"); background-repeat: no-repeat; background-size: contain; vertical-align: middle; background-position: center; cursor: pointer; } .img_num { display: inline-block; width: 200px; } .img_num span { width: 10px; height: 10px; margin: 0 5px; background: #D8D8D8; border-radius: 50%; vertical-align: middle; } .img_num span.actived { background: #fff; } div .prev_btn { background-image: url("../images/culture/Left_Small.png"); } .big_banner_img { width: 100%; } .big_banner { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); transition: 0.4s; -webkit-transition: 0.4s; -moz-transition: 0.4s; -ms-transition: 0.4s; -o-transition: 0.4s; ; } .big_banner_show { z-index: 99; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); transition: 0.4s; -webkit-transition: 0.4s; -moz-transition: 0.4s; -ms-transition: 0.4s; -o-transition: 0.4s; position: relative; } .big_banner_img li { width: 100%; display: inline-block; } .big_banner_img > img { width: 100%; } .big_banner_words { position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto; padding: 3% 0; } .big_banner_words h2 { font-family: SKSans-BoldItalic; font-size: 60px; color: #0069C8; letter-spacing: 0; line-height: 56px; } .big_banner_words .h2_box { padding-bottom: 10px; position: relative; } .big_banner_words .h2_box::after { content: ""; display: block; width: 400px; background: #0069C8; height: 1px; position: absolute; bottom: 0; left: 0; margin: auto; } .big_banner_words > h3 { font-family: PingFangSC-Semibold; font-size: 30px; color: #F0F0F0; letter-spacing: 1.5px; line-height: 32px; color: #f0f0f0; margin-top: 10%; position: relative } .image2_big { display: none; } .banner_img_box { /* width: 90%; */ margin: 0 auto; margin-top: 2%; white-space: normal; } .banner_img_box div { width: 49%; display: inline-block; } .culture_box .item { background: url("../images/culture/six_concept_item_bg.png") left top no-repeat; } .culture_box .item .title { font-family: XinGothic-Bold; font-size: 32px; font-weight: 500; margin-left: 58px; margin-top: 8px; color: #0069c8; } .culture_box .item .info { font-size: 20px; margin-left: 40px; margin-top: 12px; line-height: 160%; } @media screen and (max-width: 1280px) { .culture_box .item .title { font-size: 26px; } .culture_box .item .info { font-size: 14px; } .margin_top { margin-top: 0.5%; } } @media screen and (min-width: 1281px) and (max-width: 1369px) { .culture_box .item .title { font-size: 28px; } .culture_box .item .info { font-size: 16px; } .margin_top { margin-top: 1%; } } @media screen and (min-width: 1340px) and (max-width: 1441px) { .culture_box .item .title { font-size: 30px; } .culture_box .item .info { font-size: 17px; } .margin_top { margin-top: 1.5%; } } @media screen and (min-width: 1442px) and (max-width: 1601px) { .culture_box .item .title { font-size: 31px; } .culture_box .item .info { font-size: 18px; } .margin_top { margin-top: 2%; } } @media screen and (min-width: 1920px) { .culture_box .item .title { font-size: 32px; } .culture_box .item .info { font-size: 20px; } .margin_top { margin-top: 3%; } } .culture_box .item:nth-of-type(1), .culture_box .item:nth-of-type(3), .culture_box .item:nth-of-type(5), .culture_box .item:nth-of-type(7) { padding-right: 40px; } .culture_box .item:nth-of-type(2), .culture_box .item:nth-of-type(4), .culture_box .item:nth-of-type(6), .culture_box .item:nth-of-type(8) { text-align: left !important; padding-left: 80px; background: url("../images/culture/six_concept_item_bg.png") 80px top no-repeat; } .margin_top { margin-top: 3%; } .banner_img_box div img { width: 80%; } .create_time div { width: 33%; } .create_time div img { width: 50%; } .banner_img_box div:nth-of-type(2), .banner_img_box div:nth-of-type(4), .banner_img_box div:nth-of-type(6), .banner_img_box div:nth-of-type(8) { text-align: right; } .big_banner_words > img { display: block; } .big_banner_words > .img_mobile,.big_banner_words > .img_mobile_title,.big_banner_words >.img_mobile_subtitle{ display: none; } .swiper-slide img.bg_img { /*width: 100%;*/ } .big_banner_words > h3::before, .float_content_span h1::before, .h2_words:before { content: ""; display: inline-block; width: 30px; height: 50px; background-image: url("../images/culture/Line.png"); background-repeat: no-repeat; background-size: contain; background-position: center; position: absolute; left: -2%; top: 0; margin: auto; } .banner_img_box .block_img { display: block; margin: 0 auto; text-align: center; } .big_banner_words b { font-family: PingFangSC-Semibold; font-size: 40px; color: #0069C8; letter-spacing: 1.5px; line-height: 32px; } div .big_banner_control_btn { position: absolute; left: 4%; top: 0; bottom: 0; margin: auto; width: 80px; /* height: 80px; */ background-image: url("../images/culture/Left.png"); background-repeat: no-repeat; background-size: contain; cursor: pointer; background-position: center; } div .big_banner_next { left: auto; right: 4%; background-image: url("../images/culture/Right.png"); } .more_btn { width: 17px; height: 11px; background-image: url("../images/culture/moreIcon.png"); background-repeat: no-repeat; background-size: contain; background-position: center; cursor: pointer; position: relative; right: 6%; } .banner_img_box p { font-size: 12px; color: #CACACA; letter-spacing: 0; line-height: 22px; width: 83%; text-align: left; display: inline-block; } .banner_img_box div.more_text { width: 100%; display: none; position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto; } .banner_img_box div.more_text p { width: 90%; } .banner_img_box .create_text_show { display: block; width: 100%; position: relative; } .create_time_text { transition: 0.5s; -webkit-transition: 0.5s; -moz-transition: 0.5s; -ms-transition: 0.5s; -o-transition: 0.5s; } .create_time_text:nth-of-type(4), .create_time_text:nth-of-type(5) { margin-top: 5%; } .words_opacity2 { transform: translateY(150%); transition: 1s; -webkit-transform: translateY(150%); -moz-transform: translateY(150%); -ms-transform: translateY(150%); -o-transform: translateY(150%); transform: translateY(150%); -webkit-transition: 1s; -moz-transition: 1s; -ms-transition: 1s; -o-transition: 1s; } .words_opacity, .big_banner div .words_opacity { opacity: 0; transition: 1s; } .culture_create_bg_big { display: none; } div.create_time { margin-top: 6%; } div .create_time_text:nth-of-type(2), div .create_time_text:nth-of-type(3), div .create_time_text:nth-of-type(5) { text-align: left; position: relative; left: 10%; } div.create_time .create_time_text { text-align: left; } /* banner鍥剧粨鏉 */ /* 涓嬮潰鏄〃鐜板舰寮 */ .main_content { position: relative; width: 100%; } .less_height { overflow: hidden; height: 700px; } .main_content > img.bg_img { width: 100%; } .main_content_words { position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto; padding: 2% 0; font-family: PingFangSC-Semibold; font-size: 24px; color: #F0F0F0; letter-spacing: 0; line-height: 45px; } .title_float_box { background: rgba(0, 0, 0, 0.558); display: none; position: relative; } .title_float_box::before { content: ""; display: block; width: 0; height: 0; border-width: 50px; border-style: solid; position: absolute; top: -100px; left: 10%; border-color: transparent transparent rgba(0, 0, 0, 0.558) transparent; } .mid_trangle::before { left: 0; right: 0; margin: auto; } .right_trangle::before { left: auto; right: 10%; } .float_box_content { width: 90%; margin: 0 auto; transition: 1s; margin-top: 6%; } .float_content_span { font-size: 12px; color: #CACACA; letter-spacing: 0; line-height: 22px; display: inline-block; width: 39%; margin: 1% 5%; vertical-align: top; } .toUp { transition: 1s; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: 1s; -moz-transition: 1s; -ms-transition: 1s; -o-transition: 1s; } .float_content_span h1 { font-family: SKSans-BoldItalic; font-size: 28px; color: #0069C8; letter-spacing: -0.19px; line-height: 46px; position: relative; text-indent: 1em; } .small_height { position: relative; } .title_box { text-align: center; transition: 1s; } .titile_box_span { width: 30%; height: 90px; background: rgba(0, 0, 0, 0.62); border-radius: 20px; margin: 0 1%; margin-top: 10%; font-family: XinGothic-Bold; font-size: 30px; color: #FAFAFA; letter-spacing: 0; line-height: 90px; cursor: pointer; } .main_content_words .h2_words { width: 80%; margin: 14% auto; position: relative; } .main_content_words .h2_words h2 { margin: 2%; } .border_check { border: 1px solid #0069C8; } .swiper-slide .img_pc{ width: 100%; } /* 琛ㄧ幇褰㈠紡缁撴潫 */ @media screen and (max-width:1440px) { .less_height { height: auto; } .titile_box_span { height: 70px; line-height: 70px; margin-top: 7%; } .banner_words h1 { font-size: 50px; } .banner_words p { font-size: 20px; } .main_content_words h2, .titile_box_span { font-size: 24px; } .main_content_words .h2_words { margin: 10% auto; } .big_banner img { width: auto; } .big_banner_words > h3 { font-size: 24px; } .big_banner_words b { font-size: 30px; } .banner_img_box1 img { width: 40%; } .float_box_content { width: 100%; } .num_title { width: 20%; } .number_title { width: 15%; } .create_time_text:nth-of-type(4), .create_time_text:nth-of-type(5) { margin-top: 3%; } } @media screen and (max-width: 1280px) { div.create_time { margin-top: 1%; } @media screen and (min-width: 1281px) and (max-width: 1367px) { div.create_time { margin-top: 2%; } } @media screen and (min-width: 1368px) and (max-width: 1441px){ div.create_time { margin-top: 2.5%; } } @media screen and (min-width: 1442px) and (max-width: 1601px){ div.create_time { margin-top: 3%; } } @media screen and (min-width: 1602px) and (max-width: 1873px){ div.create_time { margin-top: 4%; } } @media screen and (min-width: 1874px) and (max-width: 1920px){ div.create_time { margin-top: 5%; } }