.pc-header { width: 100%; position: fixed; top: 0; left: 0; z-index: 1000000000; transition: background 0.2s linear; opacity: 0; padding-top: 0.24rem; height: 0.286rem !important; padding-bottom: 0.24rem; } .pc-header::after { content: ""; width: 0; height: 0; display: block; float: none; clear: both; } .pc-header .box { width: 73%; margin: 0 auto; position: relative; } .pc-header .box .logo { height: 0.286rem; position: relative; } .pc-header .box .logo img { height: 100%; position: absolute; top: 0; left: 0; transition: 0.3s; } .pc-header .box .logo img.gray { opacity: 0; } .pc-header .box .logo img.white { opacity: 1; } .pc-header .box .right { position: absolute; right: 0; top: 0; } .pc-header .box .right .subsidiary { width: 1.15rem; margin-top: 0.1rem; height: 0.375rem; } .pc-header .box .right .subsidiary .exhibit { cursor: pointer; margin-bottom: 16px; } .pc-header .box .right .subsidiary .exhibit::after { content: ""; width: 0; height: 0; display: block; float: none; clear: both; } .pc-header .box .right .subsidiary .exhibit span { font-size: 0.12rem; line-height: 0.12rem; color: #ffffff; transition: 0.5s; display: block; float: left; } .pc-header .box .right .subsidiary .exhibit .icon { margin-left: 12px; height: 0.06rem; margin-top: 0.03rem; float: left; position: relative; } .pc-header .box .right .subsidiary .exhibit .icon img { height: 100%; display: block; position: absolute; top: 0; left: 0; transition: 0.5s; } .pc-header .box .right .subsidiary .exhibit .icon img.gray { opacity: 0; } .pc-header .box .right .subsidiary .exhibit .icon img.white { opacity: 1; } .pc-header .box .right .subsidiary .conceal { width: 10rem; background-color: white; box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.02); display: none; height: 3.37501rem; position: absolute; left: 0; top: 0.5rem; } .pc-header .box .right .subsidiary .conceal .bg { background-color: white; width: 100%; height: 100%; } .pc-header .box .right .subsidiary .conceal .bg .img { position: absolute; top: 0; right: 0; width: 100%; height: 3.37501rem; } .pc-header .box .right .subsidiary .conceal .bg .img img { height: 100%; } .pc-header .box .right .subsidiary .conceal .bg .link { position: relative; } .pc-header .box .right .subsidiary .conceal .bg .link .list { padding-top: 0.6675rem; margin-left: 1.95rem; } .pc-header .box .right .subsidiary .conceal .bg .link .list .item { margin-bottom: 0.6675rem; } .pc-header .box .right .subsidiary .conceal .bg .link .list .item .text span { display: block; padding-left: 0.18rem; font-size: 0.24rem; font-weight: bold; line-height: 0.24rem; letter-spacing: -0.0075rem; color: #000000; position: relative; } .pc-header .box .right .subsidiary .conceal .bg .link .list .item .text span::after { content: ""; width: 4px; height: 100%; background-color: #e84127; position: absolute; top: 0; left: 0; } .pc-header .box .right .subsidiary .conceal .bg .link .list .item ul { margin-top: 0.2925rem; } .pc-header .box .right .subsidiary .conceal .bg .link .list .item ul::after { content: ""; width: 0; height: 0; display: block; float: none; clear: both; } .pc-header .box .right .subsidiary .conceal .bg .link .list .item ul li { float: left; margin-right: 0.525rem; } .pc-header .box .right .subsidiary .conceal .bg .link .list .item ul li a { font-size: 0.18rem; line-height: 0.18rem; color: #000000; transition: 0.5s; } .pc-header .box .right .subsidiary .conceal .bg .link .list .item ul li:hover a { color: #e84127; } .pc-header .box .line { width: 3px; height: 0.15rem; background-color: #e84127; float: right; margin-top: 0.16rem; position: absolute; right: 1.345rem; bottom: 0.05rem; } .pc-header .box .nav { position: absolute; right: calc(1.345rem + 3px); bottom: 0; height: 1.2rem; width: 6.48rem; transition: 0.3s; } .pc-header .box .nav .nav-box { width: 15rem; position: absolute; right: 0.21rem; bottom: 0; } .pc-header .box .nav .nav-box::after { content: ""; width: 0; height: 0; display: block; float: none; clear: both; } .pc-header .box .nav .nav-box nav ul { position: absolute; right: 0.855rem; bottom: -0.225rem; transition: 0.5s; } .pc-header .box .nav .nav-box nav ul li { display: inline-block; margin: 0 0.1275rem; position: relative; height: 0.4rem; } .pc-header .box .nav .nav-box nav ul li::after { content: ""; width: 0; height: 2px; background-color: #e84127; position: absolute; bottom: 0; left: 0; transition: 0.5s; } .pc-header .box .nav .nav-box nav ul li:first-child { margin-left: 0; } .pc-header .box .nav .nav-box nav ul li a { display: block; font-size: 0.135rem; line-height: 0.145rem; width: 100%; font-weight: bold; color: #ffffff; height: 0.145rem; overflow: hidden; position: relative; transition: 0.2s; } .pc-header .box .nav .nav-box nav ul li a span { display: block; transition: 0.5s; } .pc-header .box .nav .nav-box nav ul li a span.out { margin-bottom: 0.075rem; } .pc-header .box .nav .nav-box nav ul li .down-box { position: absolute; left: 0; top: 0.4rem; width: 1.275rem; background-color: white; height: 4.11501rem; display: none; overflow: hidden; box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.02); } .pc-header .box .nav .nav-box nav ul li .down-box .box-left { float: left; width: 60%; } .pc-header .box .nav .nav-box nav ul li .down-box .box-left .img { width: 100%; } .pc-header .box .nav .nav-box nav ul li .down-box .box-left .img img { width: 100%; } .pc-header .box .nav .nav-box nav ul li .down-box .box-left .text { position: absolute; top: 1rem; left: 1.935rem; } .pc-header .box .nav .nav-box nav ul li .down-box .box-left .text .title { font-size: 0.51rem; font-weight: bold; line-height: 0.51rem; letter-spacing: -0.0225px; color: #f0f0f0; } .pc-header .box .nav .nav-box nav ul li .down-box .box-left .text .p { width: 4.68rem; margin-top: 0.45rem; font-size: 0.135rem; line-height: 0.27rem; letter-spacing: -0.0075rem; color: #ffffff; } .pc-header .box .nav .nav-box nav ul li .down-box .box-left .text .button { margin-top: 0.45rem; font-size: 0.135rem; line-height: 0.135rem; color: #fff; } .pc-header .box .nav .nav-box nav ul li .down-box .box-left .text .button img { height: 0.135rem; margin-left: 0.12rem; } .pc-header .box .nav .nav-box nav ul li .down-box .box-right { float: left; width: 40%; background-color: white; } .pc-header .box .nav .nav-box nav ul li .down-box .box-right .list { width: 100%; margin-top: 0.585rem; position: relative; overflow: hidden; } .pc-header .box .nav .nav-box nav ul li .down-box .box-right .list .item-bg { content: ""; width: 100%; height: 0.525rem; background-color: #e84127; position: absolute; left: 0; top: -0.525rem; z-index: 1; transition: 0.5s; } .pc-header .box .nav .nav-box nav ul li .down-box .box-right .list .item { width: 100%; position: relative; z-index: 2; } .pc-header .box .nav .nav-box nav ul li .down-box .box-right .list .item a { width: 100%; height: 0.525rem; display: block; line-height: 0.525rem; transition: 0.5s; } .pc-header .box .nav .nav-box nav ul li .down-box .box-right .list .item a span { display: block; font-size: 0.18rem; line-height: 0.525rem; color: #000000; padding-left: 0.9225rem; position: relative; transition: 0.5s; } .pc-header .box .nav .nav-box nav ul li .down-box .box-right .list .item a span img { height: 0.17rem; vertical-align: middle; margin-left: 0.45rem; } .pc-header .box .nav .nav-box nav ul li .down-box .box-right .list .item a span::after { content: ""; width: 0.0225rem; height: 0.18rem; background-color: #e84127; position: absolute; top: 0.1725rem; left: 0.6225rem; } .pc-header .box .nav .nav-box nav ul li .down-box .box-right .list .item:hover a span { color: white; } .pc-header .box .nav .nav-box nav ul li:hover a .out { margin-top: -0.21rem; } .pc-header .box .nav .nav-box nav ul li:hover::after { width: 100%; } .pc-header .box .nav .nav-box nav ul li.ts .down-box .box-right .list { margin-top: 0.3rem; } .pc-header .box .nav .nav-box nav.open ul { right: 6.75rem; } .pc-header .box .nav .nav-box .search { position: absolute; right: 0; bottom: 0.05rem; width: 0.225rem; height: 0.15rem; transition: 0.5s; } .pc-header .box .nav .nav-box .search .search-inputbox { width: 100%; height: 0.15rem; line-height: 0.15rem; position: relative; } .pc-header .box .nav .nav-box .search .search-inputbox .text { border: none; float: right; opacity: 0; transition: 0.5s; outline: none; color: #fff; border-bottom: solid 2px #e84127; font-size: 14px; line-height: 0.15rem; height: 0.225rem; width: 10px; padding-left: 0.225rem; padding-right: 0.225rem; padding-bottom: 0.075rem; -webkit-box-sizing: border-box; box-sizing: border-box; background-color: transparent; overflow: hidden; position: fixed; caret-color: #fff; -moz-user-select: text; -ms-user-select: text; user-select: text; -webkit-user-select: text; } .pc-header .box .nav .nav-box .search .search-inputbox .text:focus::placeholder { opacity: 0; } .pc-header .box .nav .nav-box .search .search-inputbox .text::-webkit-input-placeholder { color: #fff; } .pc-header .box .nav .nav-box .search .search-inputbox .text::-moz-placeholder { color: #fff; } .pc-header .box .nav .nav-box .search .search-inputbox .text:-moz-placeholder { color: #fff; } .pc-header .box .nav .nav-box .search .search-inputbox .text:-ms-input-placeholder { color: #fff; } .pc-header .box .nav .nav-box .search .search-inputbox .sub { position: absolute; z-index: 3; left: 0; top: 0; width: 0.135rem; height: 0.15rem; background-color: rgba(0, 0, 0, 0); border: 0; background-image: url(../images/icon_search.png); background-position: center; background-size: 0.135rem 0.135rem; background-repeat: no-repeat; cursor: pointer; } .pc-header .box .nav .nav-box .search .search-inputbox .close { position: absolute; width: 0.1rem; height: 0.1rem; right: 0.1rem; top: 0; line-height: 20px; cursor: pointer; z-index: 2; background-image: url(../images/icon_close_w.png); background-size: 0.1rem 0.1rem; background-repeat: no-repeat; background-position: 99% 0; opacity: 0; transition: 0.5s; } .pc-header .box .nav .nav-box .search.open { width: 6rem; } .pc-header .box .nav .nav-box .search.open .search-inputbox .text { opacity: 1; width: 42%; } .pc-header .box .nav .nav-box .search.open .search-inputbox .close { opacity: 1; } .pc-header .box .nav.height { height: 5rem; } .pc-header.open { background-color: white; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05); } .pc-header.open .box .logo img.gray { opacity: 1; } .pc-header.open .box .logo img.white { opacity: 0; } .pc-header.open .box .right { bottom: calc(0.068rem - 12px); } .pc-header.open .box .right .subsidiary { height: 0.45rem; } .pc-header.open .box .right .subsidiary .exhibit span { color: #666; } .pc-header.open .box .right .subsidiary .exhibit .icon img.gray { opacity: 1; } .pc-header.open .box .right .subsidiary .exhibit .icon img.white { opacity: 0; } .pc-header.open .box .nav { bottom: 0; } .pc-header.open .box .nav .nav-box .search .search-inputbox .text { color: #666; caret-color: #666; } .pc-header.open .box .nav .nav-box .search .search-inputbox .text::-webkit-input-placeholder { color: #666; } .pc-header.open .box .nav .nav-box .search .search-inputbox .text::-moz-placeholder { color: #666; } .pc-header.open .box .nav .nav-box .search .search-inputbox .text:-moz-placeholder { color: #666; } .pc-header.open .box .nav .nav-box .search .search-inputbox .text:-ms-input-placeholder { color: #666; } .pc-header.open .box .nav .nav-box .search .search-inputbox .sub { background-image: url(../images/icon_search_g.png); } .pc-header.open .box .nav .nav-box .search.open { width: 6rem; } .pc-header.open .box .nav .nav-box .search.open .search-inputbox .text { opacity: 1; width: 42%; } .pc-header.open .box .nav .nav-box .search.open .search-inputbox .close { background-image: url(../images/icon_close_g.png); } .pc-header.open .box .nav .nav-box nav ul li::after { content: ""; width: 0; height: 2px; background-color: #e84127; position: absolute; bottom: 0; left: 0; transition: 0.3s; } .pc-header.open .box .nav .nav-box nav ul li a { color: #666; } .pc-header.open .box .nav .nav-box nav ul li:hover::after { width: 100%; } .pc-header.open .box .nav .nav-box nav ul li .down-box { top: 0.4rem; } .pc-header.open .box .nav .nav-box nav ul li .down-box .box-left .text .button a { color: #fff; } .pc-header.open .box .nav .nav-box nav.open ul { right: 6.75rem; } .pc-header.open1 { background-color: white; } .pc-header.open1 .phone { color: #666; } .pc-header.open1 .phone a { color: #666; } .pc-header.open1 .phone span { color: #666; } .pc-header.open1 .box .logo img.gray { opacity: 1; } .pc-header.open1 .box .logo img.white { opacity: 0; } .pc-header.open1 .box .right .subsidiary .exhibit span { color: #666; } .pc-header.open1 .box .right .subsidiary .exhibit .icon img.gray { opacity: 1; } .pc-header.open1 .box .right .subsidiary .exhibit .icon img.white { opacity: 0; } .pc-header.open1 .box .nav .nav-box .search .search-inputbox .text { color: #666; caret-color: #666; } .pc-header.open1 .box .nav .nav-box .search .search-inputbox .text::-webkit-input-placeholder { color: #666; } .pc-header.open1 .box .nav .nav-box .search .search-inputbox .text::-moz-placeholder { color: #666; } .pc-header.open1 .box .nav .nav-box .search .search-inputbox .text:-moz-placeholder { color: #666; } .pc-header.open1 .box .nav .nav-box .search .search-inputbox .text:-ms-input-placeholder { color: #666; } .pc-header.open1 .box .nav .nav-box .search .search-inputbox .sub { background-image: url(../images/icon_search_g.png); } .pc-header.open1 .box .nav .nav-box .search.open { width: 6rem; } .pc-header.open1 .box .nav .nav-box .search.open .search-inputbox .text { opacity: 1; width: 42%; } .pc-header.open1 .box .nav .nav-box .search.open .search-inputbox .close { background-image: url(../images/icon_close_g.png); } .pc-header.open1 .box .nav .nav-box nav ul li::after { content: ""; width: 0; height: 2px; background-color: #e84127; position: absolute; bottom: 0; left: 0; transition: 0.3s; } .pc-header.open1 .box .nav .nav-box nav ul li a { color: #666; } .pc-header.open1 .box .nav .nav-box nav ul li:hover::after { width: 100%; } .pc-header.open1 .box .nav .nav-box nav ul li .down-box { top: 0.4rem; } .pc-header.open1 .box .nav .nav-box nav ul li .down-box .box-left .text .button a { color: #fff; } .pc-header.open1 .box .nav .nav-box nav.open ul { right: 6.75rem; } .m-header { display: none; } .inner-banner { width: 100%; height: 4.27501rem; position: fixed; } .inner-banner .img { width: 100%; } .inner-banner .img img { width: 100%; } .inner-banner .title { position: absolute; left: 13.5%; bottom: 1.23rem; } .inner-banner .title .cn { font-size: 0.39rem; font-weight: bold; line-height: 0.39rem; color: #ffffff; } .inner-banner .title .en { font-family: "DIN-Bold"; font-size: 0.315rem; line-height: 0.315rem; letter-spacing: -0.0075rem; color: #ffffff; opacity: 0.3; margin-top: 0.24rem; } .inner-banner .title .p { width: 5.77501rem; margin-top: 0.1725rem; font-size: 0.135rem; line-height: 0.27rem; color: #ffffff; } .inner-banner-box { width: 100%; height: 4.27501rem; } .inner-nav { width: 100%; height: 0.525rem; border-bottom: solid 0.0075rem #e3e3e3; background-color: white; position: relative; } .inner-nav::after { content: ""; width: 0; height: 0; display: block; float: none; clear: both; } .inner-nav .left { float: left; margin-left: 13.5%; margin-top: 0.1875rem; } .inner-nav .left .h2 { font-size: 0.15rem; line-height: 0.15rem; font-weight: bold; color: #000000; padding-right: 0.36rem; border-right: solid 0.015rem #bcbcbc; } .inner-nav nav { float: left; margin-left: 0.36rem; } .inner-nav nav ul li { float: left; position: relative; } .inner-nav nav ul li::after { content: ""; width: 100%; height: 0; background-color: #e84127; position: absolute; bottom: 0; left: 0; z-index: 1; transition: 0.3s; } .inner-nav nav ul li a { position: relative; z-index: 2; width: 100%; height: 100%; display: block; line-height: 0.525rem; font-size: 0.135rem; color: #000000; padding: 0 0.15rem; transition: 0.3s; } .inner-nav nav ul li:hover::after { height: 0.525rem; } .inner-nav nav ul li:hover a { color: white; } .inner-nav nav ul li.active { background-color: #e84127; } .inner-nav nav ul li.active a { color: white; } .scroll::-webkit-scrollbar { width: 3px; } .scroll::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.5); border-radius: 10px; } .scroll::-webkit-scrollbar-thumb { border-radius: 10px; background: #ea4027; } footer { width: 100%; position: relative; z-index: 2; } footer .return { width: 100%; height: 0.3075rem; background-color: #e84127; cursor: pointer; padding-top: 0.1425rem; } footer .return img { width: 0.165rem; display: block; margin-left: calc(50vw - 0.0825rem); } footer .bottom { width: 100%; background-color: #333333; padding-top: 0.585rem; overflow: hidden; } footer .bottom .box { width: 73%; margin: 0 auto; } footer .bottom .box .bottom-logo::after { content: ""; width: 0; height: 0; display: block; float: none; clear: both; } footer .bottom .box .bottom-logo .img { height: 0.286rem; float: left; } footer .bottom .box .bottom-logo .img img { height: 100%; } footer .bottom .box .bottom-logo .text { float: left; margin-left: 0.4425rem; padding-left: 0.255rem; border-left: solid 1px rgba(218, 218, 218, 0.3); font-size: 0.165rem; font-weight: bold; line-height: 0.285rem; color: #656565; opacity: 0.7; } footer .bottom .box .link-box { width: 100%; margin-top: 0.5925rem; } footer .bottom .box .link-box::after { content: ""; width: 0; height: 0; display: block; float: none; clear: both; } footer .bottom .box .link-box .left { float: left; } footer .bottom .box .link-box .left ul::after { content: ""; width: 0; height: 0; display: block; float: none; clear: both; } footer .bottom .box .link-box .left ul li { width: 1.2rem; float: left; } footer .bottom .box .link-box .left ul li dl { width: 100%; } footer .bottom .box .link-box .left ul li dl dt { font-size: 0.135rem; line-height: 0.135rem; margin-bottom: 0.1425rem; } footer .bottom .box .link-box .left ul li dl dt a { color: #6f6f6f; } footer .bottom .box .link-box .left ul li dl dt:hover a { color: white; } footer .bottom .box .link-box .left ul li dl dd { font-size: 0.105rem; line-height: 0.225rem; } footer .bottom .box .link-box .left ul li dl dd a { color: #595959; } footer .bottom .box .link-box .left ul li dl dd:hover a { color: white; } footer .bottom .box .link-box .right { float: right; } footer .bottom .box .link-box .right .qr-code { width: 1.095rem; } footer .bottom .box .link-box .right .qr-code img { width: 100%; } footer .bottom .box .contact { width: 100%; margin-top: 0.39rem; padding-bottom: 0.6rem; } footer .bottom .box .contact::after { content: ''; width: 0; height: 0; display: block; float: none; clear: both; } footer .bottom .box .contact .phone1 { width: 1.5rem; float: left; font-size: 0.105rem; line-height: 0.12rem; color: #666666; } footer .bottom .box .contact .phone1 a { display: block; font-family: "DIN-BOLD"; font-size: 0.16rem; line-height: 0.21rem; color: #e84127; margin-top: 0.15rem; } footer .bottom .box .contact .phone2 { width: 2.1rem; float: left; font-size: 0.105rem; line-height: 0.12rem; color: #666666; } footer .bottom .box .contact .phone2 a { display: block; font-family: "DIN-BOLD"; font-size: 0.16rem; line-height: 0.21rem; color: #e84127; margin-top: 0.15rem; } footer .bottom .box .contact .phone3 { width: 1.5rem; float: left; font-size: 0.105rem; line-height: 0.12rem; color: #666666; } footer .bottom .box .contact .phone3 a { display: block; font-family: "DIN-BOLD"; font-size: 0.16rem; line-height: 0.21rem; color: #e84127; margin-top: 0.15rem; } footer .bottom .box .contact .links { width: 1.995rem; float: right; height: 0.48rem; background-color: #282828; position: relative; } footer .bottom .box .contact .links .text-show { width: 100%; height: 100%; cursor: pointer; } footer .bottom .box .contact .links .text-show .text { font-size: 0.1125rem; line-height: 0.48rem; color: #464646; float: left; padding-left: 0.165rem; } footer .bottom .box .contact .links .text-show .img { width: 0.075rem; float: right; padding-right: 0.165rem; margin-top: 0.2175rem; } footer .bottom .box .contact .links .text-show .img img { width: 100%; display: block; } footer .bottom .box .contact .links .link { width: 100%; background-color: #282828; position: absolute; left: 0; bottom: 0.48rem; display: none; } footer .bottom .box .contact .links .link ul { width: 100%; } footer .bottom .box .contact .links .link ul li { width: 100%; } footer .bottom .box .contact .links .link ul li a { display: block; width: calc(100% - 0.165rem); padding-left: 0.165rem; font-size: 0.1125rem; line-height: 0.27rem; color: #5e5d5d; } footer .bottom .box .contact .links .link ul li:hover a { background-color: #e84127; color: white; } footer .copyright { width: 100%; height: 0.5025rem; background-color: #191919; } footer .copyright .box { width: 73%; margin: 0 auto; } footer .copyright .box::after { content: ""; width: 0; height: 0; display: block; float: none; clear: both; } footer .copyright .box .left { float: left; font-size: 0.1125rem; line-height: 0.5025rem; color: #4a4a4a; } footer .copyright .box .left a { color: #4a4a4a; } footer .copyright .box .left a:hover { color: #8b8b8b; } footer .copyright .box .right { float: right; font-size: 0.1125rem; line-height: 0.5025rem; color: #4a4a4a; } footer .copyright .box .right a { color: #4a4a4a; } footer .copyright .box .right a:hover { color: #8b8b8b; } .page { width: 100%; margin: 0 auto; margin-top: 0.6375rem; padding-bottom: 1rem; text-align: center; } .page::after { content: ""; width: 0; height: 0; display: block; float: none; clear: both; } .page .prve { width: 0.525rem; height: 0.525rem; border: solid 0.0075rem #c7c7c7; transition: 0.5s; display: inline-block; position: relative; } .page .prve a { width: 100%; height: 100%; display: block; } .page .prve a span { width: 0.0975rem; height: 0.1725rem; display: block; position: relative; margin: 0 auto; margin-top: 0.17625rem; } .page .prve a span img { position: absolute; top: 0; left: 0; width: 100%; transition: 0.5s; } .page .prve a span img.gray { opacity: 1; } .page .prve a span img.red { opacity: 0; } .page .prve:hover { border: solid 0.0075rem #e84127; } .page .prve:hover a span img.gray { opacity: 0; } .page .prve:hover a span img.red { opacity: 1; } .page .number { display: inline-block; position: relative; vertical-align: top; } .page .number ul li { width: 0.525rem; height: 0.525rem; border: solid 0.0075rem #c7c7c7; transition: 0.5s; display: inline-block; position: relative; margin-left: 0.1125rem; } .page .number ul li a { width: 100%; height: 100%; display: block; font-size: 0.165rem; line-height: 0.525rem; color: #999999; text-align: center; } .page .number ul li:hover { border: solid 0.0075rem #e84127; } .page .number ul li:hover a { color: #e84127; } .page .number ul li.active { border: solid 0.0075rem #e84127; background-color: #e84127; } .page .number ul li.active a { color: white; } .page .next { width: 0.525rem; height: 0.525rem; border: solid 0.0075rem #c7c7c7; transition: 0.5s; display: inline-block; position: relative; margin-left: 0.1125rem; } .page .next a { width: 100%; height: 100%; display: block; } .page .next a span { width: 0.0975rem; height: 0.1725rem; display: block; position: relative; margin: 0 auto; margin-top: 0.17625rem; } .page .next a span img { position: absolute; top: 0; left: 0; width: 100%; transition: 0.5s; } .page .next a span img.gray { opacity: 1; } .page .next a span img.red { opacity: 0; } .page .next:hover { border: solid 0.0075rem #e84127; } .page .next:hover a span img.gray { opacity: 0; } .page .next:hover a span img.red { opacity: 1; } @media screen and (max-width: 1020px) { .pc-header { display: none; } .m-header { display: block; width: 100%; position: fixed; top: 0; left: 0; z-index: 1000000000; height: 0.8574rem; transition: 0.2s; padding-bottom: 24px; background-color: #ffffff; padding-bottom: 0.3rem; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05); } .m-header::after { content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1; display: block; float: none; clear: both; background-color: rgba(255, 255, 255, 0.85); } .m-header .logo { float: left; position: relative; height: 0.5574rem; margin-top: 0.3rem; margin-left: 5%; } .m-header .logo img { position: absolute; top: 0; left: 0; height: 100%; } .m-header .home { float: right; margin-top: 0.3537rem; margin-right: 5%; cursor: pointer; position: relative; width: 0.45rem; height: 0.45rem; } .m-header .home .line { width: 0.45rem; height: 0.06rem; background-color: #666; margin-bottom: 0.1rem; border-radius: 0.05rem; transition: 0.5s; } .m-header .home .line1 { position: absolute; top: 0; left: 0; } .m-header .home .line2 { position: absolute; left: 0; top: 0.16rem; } .m-header .home .line3 { position: absolute; top: 0.32rem; left: 0; } .m-header .home.home-close .line1 { position: absolute; transform: rotate(45deg); top: 0.14rem; } .m-header .home.home-close .line2 { position: absolute; left: 1rem; } .m-header .home.home-close .line3 { position: absolute; transform: rotate(-45deg); top: 0.14rem; } .m-header .search { float: right; margin-right: 0.3rem; margin-top: 0.3537rem; width: 0.45rem; height: 0.45rem; cursor: pointer; } .m-header .search i { font-size: 0.4rem; color: #666; } .m-header .search-box { width: 100%; height: 1.4rem; background-color: white; position: fixed; top: 1.1574rem; left: 0; z-index: 2; display: none; } .m-header .search-box .text { width: 80%; height: 0.9rem; margin-top: 0.25rem; margin-left: calc(10% - 0.1rem); border: 0; border-radius: 0; padding-left: 0.2rem; background-color: #f6f6f6; box-shadow: 3px 4px 18px 0px rgba(0, 0, 0, 0.07); font-size: 0.3rem; } .m-header .search-box .sub { width: 0.9rem; height: 0.9rem; position: absolute; right: calc(10% - 0.1rem); top: calc(0.2rem + 1px); border-radius: 0 ; background-color: rgba(232, 65, 39, 0); border: 0; background-image: url(../images/icon_search_g.png); background-size: 0.45rem 0.45rem; background-repeat: no-repeat; background-position: center; } .m-header .down-nav { width: 100%; height: calc(100vh - 1.1574rem); display: block; position: fixed; top: 1.1574rem; left: -100%; z-index: 3; transition: 0.5s; } .m-header .down-nav .box { width: 40%; height: 100%; background-color: white; padding-top: 0.3rem; } .m-header .down-nav .box nav { width: 100%; } .m-header .down-nav .box nav ul li { width: 100%; height: 1rem; text-align: center; transition: 0.5s; } .m-header .down-nav .box nav ul li a { width: 100%; height: 100%; display: block; font-size: 0.3rem; line-height: 1rem; color: #333; font-weight: bold; } .m-header .down-nav .box nav ul li .list { position: absolute; top: -1px; left: -20vw; width: 60vw; height: 100vh; background-color: #f6f6f6; padding-top: 0.3rem; text-align: left; display: block; z-index: -1; transition: 0.5s; } .m-header .down-nav .box nav ul li .list .item { padding-left: 0.5rem; } .m-header .down-nav .box nav ul li .list .item a { font-weight: normal; } .m-header .down-nav .box nav ul li.li-open { background-color: #f6f6f6; } .m-header .down-nav .box nav ul li.li-open .list { left: 40vw; } .m-header .down-nav.mobile-open { left: 0; } .m-header .mobile-mask { width: 100%; height: calc(100vh - 1.1574rem); display: none; position: fixed; top: 1.1574rem; left: 0; z-index: 2; background-color: rgba(0, 0, 0, 0.8); } .inner-banner { width: 100%; height: 5rem; } .inner-banner .img { width: 100%; height: 100%; position: relative; overflow: hidden; } .inner-banner .img img { width: auto; height: 100%; position: absolute; top: 0; left: -1000px; right: -1000px; margin: auto; } .inner-banner .title { position: absolute; left: 5%; bottom: 1rem; } .inner-banner .title .cn { font-size: 0.42rem; font-weight: bold; line-height: 0.42rem; color: #ffffff; } .inner-banner .title .en { font-family: "DIN-Bold"; font-size: 0.315rem; line-height: 0.315rem; letter-spacing: -0.0075rem; color: #ffffff; opacity: 0.3; margin-top: 0.24rem; } .inner-banner .title .p { width: 90%; font-size: 0.25rem; line-height: 0.4rem; } .inner-banner-box { width: 100%; height: 5rem; } .inner-nav { width: 100%; height: 1rem; border-bottom: solid 0.0075rem #e3e3e3; background-color: white; } .inner-nav::after { content: ""; width: 0; height: 0; display: block; float: none; clear: both; } .inner-nav .left { float: left; margin-left: 5%; margin-top: 0.32rem; } .inner-nav .left .h2 { font-size: 0.36rem; line-height: 0.36rem; font-weight: bold; color: #000000; padding-right: 0.2rem; border-right: solid 0.015rem #bcbcbc; } .inner-nav nav { float: left; margin-left: 0.2rem; width: calc(95% - 2rem); overflow-x: scroll; } .inner-nav nav ul li { width: 1.9rem; float: left; position: relative; } .inner-nav nav ul li::after { content: ""; width: 100%; height: 0; background-color: #e84127; position: absolute; bottom: 0; left: 0; z-index: 1; transition: 0s; } .inner-nav nav ul li a { position: relative; z-index: 2; width: 100%; height: 100%; display: block; line-height: 1rem; font-size: 0.3rem; color: #000000; padding: 0; text-align: center; transition: 0s; } .inner-nav nav ul li:hover::after { height: 1rem; } .inner-nav nav ul li:hover a { color: white; } .inner-nav nav ul li.active { background-color: #e84127; } .inner-nav nav ul li.active a { color: white; } .page { width: 100%; margin: 0 auto; margin-top: 0.6375rem; padding-bottom: 1rem; text-align: center; } .page::after { content: ""; width: 0; height: 0; display: block; float: none; clear: both; } .page .prve { width: 0.7rem; height: 0.7rem; border: solid 0.0075rem #c7c7c7; transition: 0.5s; display: inline-block; position: relative; } .page .prve a { width: 100%; height: 100%; display: block; } .page .prve a span { width: 0.18rem; height: 0.34rem; display: block; position: relative; margin: 0 auto; margin-top: 0.17625rem; } .page .prve a span img { position: absolute; top: 0; left: 0; width: 100%; transition: 0.5s; } .page .prve a span img.gray { opacity: 1; } .page .prve a span img.red { opacity: 0; } .page .prve:hover { border: solid 0.0075rem #e84127; } .page .prve:hover a span img.gray { opacity: 0; } .page .prve:hover a span img.red { opacity: 1; } .page .number { display: inline-block; position: relative; vertical-align: top; } .page .number ul li { width: 0.7rem; height: 0.7rem; border: solid 0.0075rem #c7c7c7; transition: 0.5s; display: inline-block; position: relative; margin-left: 0.1125rem; } .page .number ul li a { width: 100%; height: 100%; display: block; font-size: 0.25rem; line-height: 0.7rem; color: #999999; text-align: center; } .page .number ul li:hover { border: solid 0.0075rem #e84127; } .page .number ul li:hover a { color: #e84127; } .page .number ul li.active { border: solid 0.0075rem #e84127; background-color: #e84127; } .page .number ul li.active a { color: white; } .page .next { width: 0.7rem; height: 0.7rem; border: solid 0.0075rem #c7c7c7; transition: 0.5s; display: inline-block; position: relative; margin-left: 0.1125rem; } .page .next a { width: 100%; height: 100%; display: block; } .page .next a span { width: 0.18rem; height: 0.34rem; display: block; position: relative; margin: 0 auto; margin-top: 0.17625rem; } .page .next a span img { position: absolute; top: 0; left: 0; width: 100%; transition: 0.5s; } .page .next a span img.gray { opacity: 1; } .page .next a span img.red { opacity: 0; } .page .next:hover { border: solid 0.0075rem #e84127; } .page .next:hover a span img.gray { opacity: 0; } .page .next:hover a span img.red { opacity: 1; } footer .return { width: 100%; height: 0.6rem; background-color: #e84127; cursor: pointer; padding-top: 0.35rem; } footer .return img { width: 0.3rem; display: block; margin-left: calc(50vw - 0.15rem); } footer .bottom { width: 100%; background-color: #333333; padding-top: 0.585rem; overflow: hidden; } footer .bottom .box { width: 90%; margin: 0 auto; } footer .bottom .box .bottom-logo { width: 100%; } footer .bottom .box .bottom-logo::after { content: ""; width: 0; height: 0; display: block; float: none; clear: both; } footer .bottom .box .bottom-logo .img { height: 0.6rem; float: none; } footer .bottom .box .bottom-logo .img img { height: 100%; display: block; margin: 0 auto; } footer .bottom .box .bottom-logo .text { float: none; text-align: center; margin-left: 0; padding-left: 0; border-left: 0; font-size: 0.4rem; font-weight: bold; line-height: 0.4rem; margin-top: 0.3rem; color: #656565; opacity: 0.7; } footer .bottom .box .link-box { width: 100%; margin-top: 0.3rem; } footer .bottom .box .link-box::after { content: ""; width: 0; height: 0; display: block; float: none; clear: both; } footer .bottom .box .link-box .left { display: none; float: left; width: 100%; } footer .bottom .box .link-box .left ul { width: 100%; } footer .bottom .box .link-box .left ul li { width: 25%; float: left; } footer .bottom .box .link-box .left ul li dl { width: 100%; } footer .bottom .box .link-box .left ul li dl dt { font-size: 0.135rem; line-height: 0.135rem; margin-bottom: 0.1425rem; } footer .bottom .box .link-box .left ul li dl dt a { color: #6f6f6f; } footer .bottom .box .link-box .left ul li dl dd { font-size: 0.105rem; line-height: 0.225rem; display: none; } footer .bottom .box .link-box .left ul li dl dd a { color: #595959; } footer .bottom .box .link-box .right { float: none; } footer .bottom .box .link-box .right .qr-code { width: 2rem; margin: 0 auto; } footer .bottom .box .link-box .right .qr-code img { width: 100%; } footer .bottom .box .contact { width: 100%; margin-top: 0.39rem; padding-bottom: 0.6rem; } footer .bottom .box .contact::after { content: ''; width: 0; height: 0; display: block; float: none; clear: both; } footer .bottom .box .contact .phone1 { width: 100%; float: none; text-align: center; font-size: 0.24rem; line-height: 0.3rem; color: #666666; } footer .bottom .box .contact .phone1 a { display: block; font-size: 0.4rem; line-height: 0.4rem; color: #e84127; margin-top: 0.15rem; } footer .bottom .box .contact .phone2 { width: 100%; float: none; text-align: center; font-size: 0.24rem; line-height: 0.3rem; margin-top: 0.3rem; color: #666666; } footer .bottom .box .contact .phone2 a { display: block; font-size: 0.4rem; line-height: 0.4rem; color: #e84127; margin-top: 0.15rem; } footer .bottom .box .contact .phone3 { width: 100%; float: none; text-align: center; font-size: 0.24rem; line-height: 0.3rem; margin-top: 0.3rem; color: #666666; } footer .bottom .box .contact .phone3 a { display: block; font-size: 0.4rem; line-height: 0.4rem; color: #e84127; margin-top: 0.15rem; } footer .bottom .box .contact .links { width: 4rem; float: none; margin: 0 auto; margin-top: 0.3rem; height: 0.6rem; background-color: #282828; position: relative; } footer .bottom .box .contact .links .text-show { width: 100%; height: 100%; cursor: pointer; } footer .bottom .box .contact .links .text-show .text { font-size: 0.25rem; line-height: 0.6rem; color: #464646; float: left; padding-left: 0.165rem; } footer .bottom .box .contact .links .text-show .img { width: 0.15rem; float: right; padding-right: 0.165rem; margin-top: 0.225rem; } footer .bottom .box .contact .links .text-show .img img { width: 100%; display: block; } footer .bottom .box .contact .links .link { width: 100%; background-color: #282828; position: absolute; left: 0; bottom: 0.6rem; display: none; } footer .bottom .box .contact .links .link ul { width: 100%; } footer .bottom .box .contact .links .link ul li { width: 100%; } footer .bottom .box .contact .links .link ul li a { display: block; width: calc(100% - 0.165rem); padding-left: 0.165rem; font-size: 0.25rem; line-height: 0.4rem; color: #5e5d5d; } footer .bottom .box .contact .links .link ul li:hover a { background-color: #e84127; color: white; } footer .copyright { width: 100%; height: 1.4rem; background-color: #191919; } footer .copyright .box { width: 90%; margin: 0 auto; } footer .copyright .box::after { content: ""; width: 0; height: 0; display: block; float: none; clear: both; } footer .copyright .box .left { float: none; padding-top: 0.3rem; font-size: 0.25rem; line-height: 0.4rem; color: #4a4a4a; text-align: center; } footer .copyright .box .left a { color: #4a4a4a; display: block; } footer .copyright .box .left a:hover { color: #8b8b8b; } footer .copyright .box .right { float: right; font-size: 0.1125rem; line-height: 0.5025rem; color: #4a4a4a; } footer .copyright .box .right a { color: #4a4a4a; } footer .copyright .box .right a:hover { color: #8b8b8b; } }