* { border: 0; outline: 0; margin: 0; padding: 0; list-style: none; border-collapse: collapse; text-decoration: none; touch-action: manipulation; } h1, h2, h3, p { margin: 0; padding: 0; } a { text-decoration: none; } ::-webkit-scrollbar { width: 5px; height: 0px; overflow: hidden; } ::-webkit-scrollbar-track { background: $trackBg; } ::-webkit-scrollbar-thumb { background: #00549e; } ::-webkit-input-placeholder { color: #999; } ::-moz-placeholder { color: #999; } :-moz-placeholder { color: #999; } :-ms-input-placeholder { color: #999; } input, button, select, textarea { color: #333; font-size: 1em; font-family: 'PingFangSC-Medium', 'PingFang SC', 'Microsoft Yahei', 'Hiragino Sans GB', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', 'sans-serif'; font-weight: 500; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; appearance: none; -webkit-appearance: none; background: none; } button, input[type="submit"] { cursor: pointer; } body { color: #333; font-size: 16px; font-family: 'PingFangSC-Medium', 'PingFang SC', 'Microsoft Yahei', 'Hiragino Sans GB', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', 'sans-serif'; font-weight: 500; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.5; background-color: #f1f8ff; } @media screen and (max-width: 1440px) { body { font-size: 14px; } } @media screen and (max-width: 1024px) { body { font-size: 12px; } } @media screen and (max-width: 750px) { body { font-size: 0.28rem; } } html, body { overflow-x: hidden; } @font-face { font-family: "DIN-Black"; src: url("./../font/DIN-Black.otf"); } @font-face { font-family: "DIN-Medium"; src: url("./../font/DIN-Medium.otf"); } /* @font-face { font-family: "PingFang"; font-weight: 400; src: url('./../font/PINGFANG REGULAR.ttf'); } @font-face { font-family: "PingFang"; font-weight: 500; src: url('./../font/PINGFANG MEDIUM.ttf'); } @font-face { font-family: "PingFang"; font-family 'PingFangSC-Semibold', 'PingFang SC', 'Microsoft Yahei', 'Hiragino Sans GB', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', 'sans-serif' font-weight: 600; src: url('./../font/PINGFANG HEAVY.ttf'); } */ .wrapper { padding: 0 60px; max-width: 1920px; margin: 0 auto; } @media screen and (max-width: 1920px) { .wrapper { padding: 0 clamp(20px, calc(60 / 1920 * 100vw), 60px); } } @media screen and (max-width: 750px) { .wrapper { padding: 0 0.3rem; } } .wrap { padding: 0 150px; max-width: 1620px; margin: 0 auto; } @media screen and (max-width: 1920px) { .wrap { padding: 0 clamp(20px, calc(150 / 1920 * 100vw), 150px); } } @media screen and (max-width: 750px) { .wrap { width: auto; padding: 0 0.3rem; } } .wp { padding: 0 150px; max-width: 1200px; margin: 0 auto; } @media screen and (max-width: 1920px) { .wp { padding: 0 clamp(20px, calc(150 / 1920 * 100vw), 150px); } } @media screen and (max-width: 750px) { .wp { width: auto; padding: 0 0.3rem; } } .index .wrapper, .index .wrap { max-width: 100%; } .h50 { margin-bottom: 50px; } @media screen and (max-width: 1920px) { .h50 { margin-bottom: calc(50 / 1920 * 100vw); } } @media screen and (max-width: 990px) { .h50 { margin-bottom: 25px; } } @media screen and (max-width: 750px) { .h50 { margin-bottom: 0.5rem; } } .h60 { margin-bottom: 60px; } @media screen and (max-width: 1920px) { .h60 { margin-bottom: calc(60 / 1920 * 100vw); } } @media screen and (max-width: 990px) { .h60 { margin-bottom: 30px; } } @media screen and (max-width: 750px) { .h60 { margin-bottom: 0.6rem; } } .h80 { margin-bottom: 80px; } @media screen and (max-width: 1920px) { .h80 { margin-bottom: calc(80 / 1920 * 100vw); } } @media screen and (max-width: 990px) { .h80 { margin-bottom: 40px; } } @media screen and (max-width: 750px) { .h80 { margin-bottom: 0.8rem; } } .h100 { margin-bottom: 100px; } @media screen and (max-width: 1920px) { .h100 { margin-bottom: calc(100 / 1920 * 100vw); } } @media screen and (max-width: 990px) { .h100 { margin-bottom: 50px; } } @media screen and (max-width: 750px) { .h100 { margin-bottom: 1rem; } } .hidePc { display: none; } @media screen and (max-width: 990px) { .hidePc { display: block; } } .showPc { display: block; } @media screen and (max-width: 990px) { .showPc { display: none; } } .header_dark_page #header { background-color: #f1f8ff; border-bottom: 1px solid #d5dee8; } .header_dark_page #header.tapstate, .header_dark_page #header.scrolled, .header_dark_page #header:hover { color: #333; background-color: #fff; } .header_dark_page #header.tapstate .container .logo img.dark, .header_dark_page #header.scrolled .container .logo img.dark, .header_dark_page #header:hover .container .logo img.dark { display: block; } .header_dark_page #header.tapstate .container .logo img.white, .header_dark_page #header.scrolled .container .logo img.white, .header_dark_page #header:hover .container .logo img.white { display: none; } .header_dark_page #header.tapstate .container .link, .header_dark_page #header.scrolled .container .link, .header_dark_page #header:hover .container .link { color: #333; } .header_dark_page #header.tapstate .container .navigator li .v1, .header_dark_page #header.scrolled .container .navigator li .v1, .header_dark_page #header:hover .container .navigator li .v1 { color: #333; } .header_dark_page #header.tapstate .container .navigator li .v1:hover, .header_dark_page #header.scrolled .container .navigator li .v1:hover, .header_dark_page #header:hover .container .navigator li .v1:hover { color: #00549e; } .header_white_page #header { color: #fff; } .header_white_page #header:hover, .header_white_page #header.tapstate, .header_white_page #header.scrolled { color: #333; background-color: #fff; } .header_white_page #header:hover .container .logo img.dark, .header_white_page #header.tapstate .container .logo img.dark, .header_white_page #header.scrolled .container .logo img.dark { display: block; } .header_white_page #header:hover .container .logo img.white, .header_white_page #header.tapstate .container .logo img.white, .header_white_page #header.scrolled .container .logo img.white { display: none; } .header_white_page #header:hover .container .link, .header_white_page #header.tapstate .container .link, .header_white_page #header.scrolled .container .link { color: #333; } .header_white_page #header:hover .container .navigator li .v1, .header_white_page #header.tapstate .container .navigator li .v1, .header_white_page #header.scrolled .container .navigator li .v1 { color: #333; } .header_white_page #header:hover .container .navigator li .v1:hover, .header_white_page #header.tapstate .container .navigator li .v1:hover, .header_white_page #header.scrolled .container .navigator li .v1:hover { color: #00549e; } .header_white_page #header .container .logo img.dark { display: none; } .header_white_page #header .container .logo img.white { display: block; } .header_white_page #header .container .link { color: #fff; } .header_white_page #header .container .navigator li .v1 { color: #fff; } .header_white_page #header .container .navigator li .v1:hover { color: #333; } .header_space { padding: 20px 0; height: 50px; } @media screen and (max-width: 1920px) { .header_space { padding: calc(20 / 1920 * 100vw) 0; } } @media screen and (max-width: 750px) { .header_space { padding: 0; height: 1rem; } } #header { position: fixed; z-index: 9; left: 0; right: 0; top: 0; color: #333; padding: 20px 0; height: 50px; -webkit-transition: 0.35s; -ms-transition: 0.35s; transition: 0.35s; } @media screen and (max-width: 1920px) { #header { padding: calc(20 / 1920 * 100vw) 0; } } @media screen and (max-width: 750px) { #header { padding: 0; height: 1rem; } } #header:hover, #header.scrolled, #header.tapstate { color: #333; background-color: #fff; } #header:hover .container .logo img.dark, #header.scrolled .container .logo img.dark, #header.tapstate .container .logo img.dark { display: block; } #header:hover .container .logo img.white, #header.scrolled .container .logo img.white, #header.tapstate .container .logo img.white { display: none; } #header:hover .container .link, #header.scrolled .container .link, #header.tapstate .container .link { color: #333; } #header:hover .container .navigator li .v1, #header.scrolled .container .navigator li .v1, #header.tapstate .container .navigator li .v1 { color: #333; } #header:hover .container .navigator li .v1:hover, #header.scrolled .container .navigator li .v1:hover, #header.tapstate .container .navigator li .v1:hover { color: #00549e; } #header.white { color: #fff; } #header.white:hover, #header.white.tapstate { color: #333; background-color: #fff; } #header.white:hover .container .logo img.dark, #header.white.tapstate .container .logo img.dark { display: block; } #header.white:hover .container .logo img.white, #header.white.tapstate .container .logo img.white { display: none; } #header.white:hover .container .link, #header.white.tapstate .container .link { color: #333; } #header.white:hover .container .navigator li .v1, #header.white.tapstate .container .navigator li .v1 { color: #333; } #header.white:hover .container .navigator li .v1:hover, #header.white.tapstate .container .navigator li .v1:hover { color: #00549e; } #header.white .container .logo img.dark { display: none; } #header.white .container .logo img.white { display: block; } #header.white .container .link { color: #fff; } #header.white .container .navigator li .v1 { color: #fff; } #header.white .container .navigator li .v1:hover { color: #333; } #header ul, #header li, #header ol { margin: 0; padding: 0; list-style: none; } #header .container { display: -ms-flexbox; display: -webkit-box; display: flex; align-items: center; justify-content: space-between; } #header .container .left { display: -ms-flexbox; display: -webkit-box; display: flex; align-items: center; } #header .container .logo img { display: block; max-height: 26px; -webkit-transition: 0.35s; -ms-transition: 0.35s; transition: 0.35s; } @media screen and (max-width: 750px) { #header .container .logo img { max-height: 0.4rem; max-width: 50vw; } } #header .container .logo img.dark { display: block; } #header .container .logo img.white { display: none; } #header .container .link { color: #333; margin-left: 60px; height: 100%; display: -ms-flexbox; display: -webkit-box; display: flex; align-items: center; } @media screen and (max-width: 1920px) { #header .container .link { margin-left: calc(60 / 1920 * 100vw); } } @media screen and (max-width: 1024px) { #header .container .link { display: none; } } @media screen and (max-width: 750px) { #header .container .link { margin-left: 0.2rem; } } #header .container .link i { font-size: calc(12 / 16 * 1em); margin-right: 0.8em; } @media screen and (max-width: 750px) { #header .container .link span { display: none; } } #header .container .menu { cursor: pointer; height: 50px; display: -ms-flexbox; display: -webkit-box; display: flex; align-items: center; position: relative; z-index: 9; margin-left: 60px; } @media screen and (max-width: 1920px) { #header .container .menu { margin-left: calc(60 / 1920 * 100vw); } } @media screen and (max-width: 1024px) { #header .container .menu { display: -ms-flexbox; display: -webkit-box; display: flex; } } @media screen and (max-width: 750px) { #header .container .menu { font-size: 0.4rem; height: 1rem; padding: 0 0.2rem; justify-content: center; margin-left: 0.1rem; } } #header .container .menu:first-child { margin-left: 0; } #header .container .menu i { line-height: 1; margin-left: 8px; } #header .container .menu .icon-menu { display: block; } #header .container .menu .close { display: none; } @media screen and (max-width: 750px) { #header .container .menu span { display: none; } } #header .container .menu.open .icon-menu { display: none; } #header .container .menu.open .close { display: block; } #header .container .navigator { display: -ms-flexbox; display: -webkit-box; display: flex; } @media screen and (max-width: 1024px) { #header .container .navigator { display: none; } } #header .container .navigator li { position: relative; margin-right: 80px; } @media screen and (max-width: 1920px) { #header .container .navigator li { margin-right: calc(80 / 1920 * 100vw); } } @media screen and (max-width: 1440px) { #header .container .navigator li { margin-right: calc(60 / 1920 * 100vw); } } @media screen and (max-width: 1280px) { #header .container .navigator li { margin-right: calc(40 / 1920 * 100vw); } } #header .container .navigator li .v1 { color: #333; line-height: 2; height: 50px; display: -ms-flexbox; display: -webkit-box; display: flex; align-items: center; -webkit-transition: 0.35s; -ms-transition: 0.35s; transition: 0.35s; } #header .container .navigator li.active .v1 { color: #00549e; } #header .container .navigator li .sub { position: absolute; top: 100%; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); font-size: 14px; background-color: #fff; -webkit-border-radius: 0 0 5px 5px; -ms-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; display: none; } #header .container .navigator li .sub .s1 { color: #333; line-height: 2; text-align: center; display: block; white-space: nowrap; } #header .container .navigator li .sub .s1:hover { color: #00549e; } #header .container .navigator li:hover .v1 { color: #00549e; } #header .container .right { display: -ms-flexbox; display: -webkit-box; display: flex; align-items: center; } #header .container .right .lang, #header .container .right .search, #header .container .right .menu { cursor: pointer; height: 50px; display: -ms-flexbox; display: -webkit-box; display: flex; align-items: center; position: relative; z-index: 9; margin-left: 45px; } @media screen and (max-width: 1920px) { #header .container .right .lang, #header .container .right .search, #header .container .right .menu { margin-left: calc(45 / 1920 * 100vw); } } @media screen and (max-width: 750px) { #header .container .right .lang, #header .container .right .search, #header .container .right .menu { height: 1rem; padding: 0 0.2rem; justify-content: center; margin-left: 0.1rem; } } #header .container .right .lang:first-child, #header .container .right .search:first-child, #header .container .right .menu:first-child { margin-left: 0; } #header .container .right .search i { font-size: 20px; } @media screen and (max-width: 750px) { #header .container .right .search i { font-size: 0.4rem; } } #header .container .right .lang { cursor: default; position: relative; } #header .container .right .lang:hover .option { opacity: 1; visibility: visible; } @media screen and (max-width: 1024px) { #header .container .right .lang .ptext { display: none; } } #header .container .right .lang .ptext i { font-size: calc(10 / 16 * 1em); margin-left: 0.8em; display: inline-block; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } @media screen and (max-width: 750px) { #header .container .right .lang .ptext i { font-size: 0.2rem; } } #header .container .right .lang .mtext { font-size: 18px; display: none; } @media screen and (max-width: 1024px) { #header .container .right .lang .mtext { display: block; } } @media screen and (max-width: 750px) { #header .container .right .lang .mtext { font-size: 0.36rem; } } #header .container .right .lang .option { opacity: 0; visibility: hidden; -webkit-transition: 0.35s; -ms-transition: 0.35s; transition: 0.35s; position: absolute; left: 50%; top: 80%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); padding: 5px; background-color: rgba(255,255,255,0.95); -webkit-border-radius: 35px; -ms-border-radius: 35px; border-radius: 35px; display: -ms-flexbox; display: -webkit-box; display: flex; } @media screen and (max-width: 990px) { #header .container .right .lang .option { position: fixed; left: 0; top: 70px; right: 0; padding: 0; -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); background-color: #fff; border-top: 1px solid #00549e; -webkit-border-radius: 0; -ms-border-radius: 0; border-radius: 0; } } @media screen and (max-width: 750px) { #header .container .right .lang .option { top: 1rem; } } @media screen and (max-width: 990px) { #header .container .right .lang .option li { flex: 1; } } #header .container .right .lang .option li:last-child { border-width: 0; } #header .container .right .lang .option li.active a { color: #00549e; } @media screen and (max-width: 990px) { #header .container .right .lang .option li.active a { color: #fff; background-color: #00549e; } } @media screen and (max-width: 990px) { #header .container .right .lang .option li.active a:hover { color: #fff; } } #header .container .right .lang .option a { color: #333; padding: 0 10px; text-align: center; line-height: 40px; display: block; } @media screen and (max-width: 750px) { #header .container .right .lang .option a { line-height: 1rem; } } #header .container .right .menu { display: -ms-flexbox; display: -webkit-box; display: flex; -webkit-transition: 0.35s; -ms-transition: 0.35s; transition: 0.35s; } @media screen and (max-width: 1024px) { #header .container .right .menu { display: -ms-flexbox; display: -webkit-box; display: flex; } } @media screen and (max-width: 750px) { #header .container .right .menu { font-size: 0.4rem; } } #header .container .right .menu i { line-height: 1; margin-left: 8px; } #header .container .right .menu .icon-menu { display: block; } #header .container .right .menu .close { display: none; } @media screen and (max-width: 750px) { #header .container .right .menu span { display: none; } } #header .container .right .menu.open .icon-menu { display: none; } #header .container .right .menu.open .close { display: block; } #sideMenu { position: fixed; z-index: 99; left: -100vw; width: 100vw; top: 0; bottom: 0; background: rgba(0,0,0,0.5); -webkit-transition: 0.35s ease-in; -ms-transition: 0.35s ease-in; transition: 0.35s ease-in; } #sideMenu.show { left: 0; } #sideMenu.show .cont { -webkit-transform: none; -ms-transform: none; transform: none; } @media screen and (max-width: 750px) { #sideMenu.open .navigator .v1 { opacity: 0; -webkit-transform: translateX(50%); -ms-transform: translateX(50%); transform: translateX(50%); -webkit-transition: all 1s linear; -ms-transition: all 1s linear; transition: all 1s linear; } } @media screen and (max-width: 750px) { #sideMenu.open .back { display: block; } } #sideMenu ul, #sideMenu li, #sideMenu ol { margin: 0; padding: 0; list-style: none; } #sideMenu .cont { height: 100%; width: 540px; display: -ms-flexbox; display: -webkit-box; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; background-color: #fff; background-image: url("../images/bg1.jpg"); background-repeat: no-repeat; background-position: left center; -webkit-background-size: cover; -ms-background-size: cover; background-size: cover; -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); -webkit-transition: 0.55s ease-in 0.15s; -ms-transition: 0.55s ease-in 0.15s; transition: 0.55s ease-in 0.15s; } @media screen and (max-width: 1920px) { #sideMenu .cont { width: calc(540 / 1920 * 100vw); } } @media screen and (max-width: 750px) { #sideMenu .cont { width: 100vw; } } #sideMenu .head { display: -ms-flexbox; display: -webkit-box; display: flex; align-items: center; justify-content: space-between; padding: 0 25px; position: relative; z-index: 3; } @media screen and (max-width: 750px) { #sideMenu .head { padding: 0 0.3rem; width: calc(1rem + 1em); } } #sideMenu .close { font-size: 2em; color: #00549e; cursor: pointer; } @media screen and (max-width: 750px) { #sideMenu .close { font-size: 0.4rem; line-height: 1rem; } } #sideMenu .back { display: none; } #sideMenu .logo { max-width: 50%; height: 80px; display: -ms-flexbox; display: -webkit-box; display: flex; align-items: center; } @media screen and (max-width: 750px) { #sideMenu .logo { height: 1rem; display: none; } } #sideMenu .logo img { display: block; max-height: 26px; max-width: 100%; } @media screen and (max-width: 750px) { #sideMenu .logo img { max-height: 0.4rem; max-width: 50vw; } } #sideMenu .navigator { font-family: 'PingFangSC-Semibold', 'PingFang SC', 'Microsoft Yahei', 'Hiragino Sans GB', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', 'sans-serif'; font-weight: 600; flex: 1; display: -ms-flexbox; display: -webkit-box; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; justify-content: center; } #sideMenu .navigator ul { position: relative; /* &:hover { .subg { width: 540px @media screen and (max-width: 1920px) { width calc(540/1920*100vw) } @media screen and (max-width: 750px) { width 40vw } } } */ } #sideMenu .navigator li.open .v1 { color: #00549e; } #sideMenu .navigator li.open .subg { width: 540px; } @media screen and (max-width: 1920px) { #sideMenu .navigator li.open .subg { width: calc(540 / 1920 * 100vw); } } @media screen and (max-width: 750px) { #sideMenu .navigator li.open .subg { width: 100%; } } #sideMenu .navigator li.open .sub { opacity: 1; visibility: visible; } #sideMenu .navigator .v1 { color: #333; font-size: 24px; height: 105px; padding: 0 80px 0 100px; -webkit-transition: all 0.35s linear 0.35s; -ms-transition: all 0.35s linear 0.35s; transition: all 0.35s linear 0.35s; display: -ms-flexbox; display: -webkit-box; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 1; } @media screen and (max-width: 1920px) { #sideMenu .navigator .v1 { font-size: clamp(16px, calc(24 / 1080 * 100vh), calc(24 / 1920 * 100vw)); height: clamp(30px, calc(105 / 1080 * 100vh), calc(105 / 1920 * 100vw)); padding: 0 calc(80 / 1920 * 100vw) 0 calc(100 / 1920 * 100vw); } } @media screen and (max-width: 750px) { #sideMenu .navigator .v1 { font-size: 1em; height: 1rem; padding: 0 0.3rem; } } #sideMenu .navigator .v1 i { font-size: calc(16 / 24 * 1em); } #sideMenu .navigator .subg { z-index: 2; position: fixed; left: 540px; top: 0; bottom: 0; background-color: #fff; background-image: url("../images/bg5.jpg"); background-repeat: no-repeat; background-position: left center; -webkit-background-size: cover; -ms-background-size: cover; background-size: cover; overflow: hidden; width: 0; -webkit-transition: all 0.55s ease-out; -ms-transition: all 0.55s ease-out; transition: all 0.55s ease-out; } @media screen and (max-width: 1920px) { #sideMenu .navigator .subg { left: calc(540 / 1920 * 100vw); } } @media screen and (max-width: 750px) { #sideMenu .navigator .subg { left: 1rem; } } #sideMenu .navigator .sub { z-index: 3; position: absolute; left: 100%; top: 0; width: 100%; opacity: 0; visibility: hidden; -webkit-transition: all 0.55s ease-out; -ms-transition: all 0.55s ease-out; transition: all 0.55s ease-out; } @media screen and (max-width: 750px) { #sideMenu .navigator .sub { left: 1rem; } } #sideMenu .navigator .sub .s1 { color: #666; font-size: 18px; height: 95px; padding: 0 90px; display: -ms-flexbox; display: -webkit-box; display: flex; align-items: center; } @media screen and (max-width: 1920px) { #sideMenu .navigator .sub .s1 { font-size: clamp(14px, calc(18 / 1080 * 100vh), calc(18 / 1920 * 100vw)); height: clamp(30px, calc(95 / 1080 * 100vh), calc(95 / 1920 * 100vw)); padding: 0 calc(90 / 1920 * 100vw); } } @media screen and (max-width: 750px) { #sideMenu .navigator .sub .s1 { font-size: 0.24rem; height: 0.8rem; } } #sideMenu .navigator .sub .s1:hover { color: #00549e; } #searchBox { position: fixed; z-index: 8; left: 0; right: 0; top: 90px; bottom: 0; color: #fff; background: #00549e; border-top: 1px solid rgba(255,255,255,0.1); display: -ms-flexbox; display: -webkit-box; display: flex; overflow: hidden; opacity: 0; visibility: hidden; -webkit-transition: 0.35s; -ms-transition: 0.35s; transition: 0.35s; } @media screen and (max-width: 1920px) { #searchBox { top: calc(40 / 1920 * 100vw + 50px); } } @media screen and (max-width: 750px) { #searchBox { top: 1rem; } } #searchBox .close { cursor: pointer; position: absolute; right: 50px; top: 50px; font-size: 20px; width: 50px; height: 50px; background-color: rgba(255,255,255,0.5); -webkit-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; display: -ms-flexbox; display: -webkit-box; display: flex; justify-content: center; align-items: center; } @media screen and (max-width: 1920px) { #searchBox .close { right: calc(50 / 1920 * 100vw); top: calc(50 / 1920 * 100vw); } } @media screen and (max-width: 750px) { #searchBox .close { right: 0.4rem; top: 0.4rem; font-size: 0.4rem; width: 0.8rem; height: 0.8rem; } } #searchBox .cont { flex: 1; display: -ms-flexbox; display: -webkit-box; display: flex; justify-content: center; align-items: center; overflow: hidden; } #searchBox .cont .cont_box { width: 90%; max-width: 740px; padding: 50px 0; } @media screen and (max-width: 750px) { #searchBox .cont .cont_box { width: 100%; padding: 0.2rem 0; margin: 0 0.4rem; } } #searchBox .cont .title { font-size: 64px; line-height: 1.25; font-weight: 500; text-align: center; margin-bottom: 50px; } @media screen and (max-width: 1920px) { #searchBox .cont .title { font-size: calc(64 / 1920 * 100vw); margin-bottom: calc(50 / 1920 * 100vw); } } @media screen and (max-width: 750px) { #searchBox .cont .title { font-size: 0.48rem; margin-bottom: 0.5rem; } } #searchBox .cont .form { height: 50px; position: relative; background-color: #fff; margin-bottom: 20px; -webkit-border-radius: 25px; -ms-border-radius: 25px; border-radius: 25px; display: -ms-flexbox; display: -webkit-box; display: flex; } @media screen and (max-width: 1920px) { #searchBox .cont .form { height: calc(50 / 1920 * 100vw); min-height: 40px; -webkit-border-radius: calc(25 / 1920 * 100vw); -ms-border-radius: calc(25 / 1920 * 100vw); border-radius: calc(25 / 1920 * 100vw); margin-bottom: calc(20 / 1920 * 100vw); } } @media screen and (max-width: 750px) { #searchBox .cont .form { height: 0.8rem; -webkit-border-radius: 0.8rem; -ms-border-radius: 0.8rem; border-radius: 0.8rem; margin-bottom: 0.2rem; } } #searchBox .cont .form ::-webkit-input-placeholder { color: #00549e; } #searchBox .cont .form ::-moz-placeholder { color: #00549e; } #searchBox .cont .form :-moz-placeholder { color: #00549e; } #searchBox .cont .form :-ms-input-placeholder { color: #00549e; } #searchBox .cont .form .inp, #searchBox .cont .form .btn { height: 50px; background: none; } @media screen and (max-width: 1920px) { #searchBox .cont .form .inp, #searchBox .cont .form .btn { height: calc(50 / 1920 * 100vw); min-height: 40px; } } @media screen and (max-width: 750px) { #searchBox .cont .form .inp, #searchBox .cont .form .btn { height: 0.8rem; } } #searchBox .cont .form .inp { flex: 1; padding: 0 20px; } @media screen and (max-width: 1920px) { #searchBox .cont .form .inp { padding: 0 calc(20 / 1920 * 100vw); } } @media screen and (max-width: 750px) { #searchBox .cont .form .inp { padding: 0 0.2rem; } } #searchBox .cont .form .btn { color: #00549e; font-size: 20px; padding: 0 20px; cursor: pointer; display: -ms-flexbox; display: -webkit-box; display: flex; align-items: center; } @media screen and (max-width: 1920px) { #searchBox .cont .form .btn { padding: 0 calc(20 / 1920 * 100vw); } } @media screen and (max-width: 750px) { #searchBox .cont .form .btn { padding: 0 0.2rem; } } #searchBox .cont .hotWords { padding: 0 20px; } @media screen and (max-width: 750px) { #searchBox .cont .hotWords { padding: 0 0.2rem; } } #searchBox .cont .hotWords dl { display: -ms-flexbox; display: -webkit-box; display: flex; margin-bottom: 10px; } @media screen and (max-width: 1920px) { #searchBox .cont .hotWords dl { margin-bottom: calc(10 / 1920 * 100vw); } } @media screen and (max-width: 750px) { #searchBox .cont .hotWords dl { margin-bottom: 0.1rem; } } #searchBox .cont .hotWords dl dt { margin-right: 10px; } #searchBox .cont .hotWords dl dd { flex: 1; } #searchBox .cont .hotWords .tit { margin-bottom: 20px; } @media screen and (max-width: 1920px) { #searchBox .cont .hotWords .tit { margin-bottom: calc(20 / 1920 * 100vw); } } @media screen and (max-width: 750px) { #searchBox .cont .hotWords .tit { margin-bottom: 0.2rem; } } #searchBox .cont .hotWords .tit i { margin-right: 5px; } #searchBox .cont .hotWords .link a { color: #fff; white-space: nowrap; margin: 5px; } #searchBox .cont .hotWords .link a:hover { text-decoration: underline; } #searchBox.show { opacity: 1; visibility: visible; } #footer { color: #fff; background-color: #00549e; position: relative; z-index: 3; } #footer a { color: #fff; } #footer ul, #footer li, #footer ol { margin: 0; padding: 0; list-style: none; } #footer .wrap { width: 80%; } @media screen and (max-width: 750px) { #footer .wrap { width: auto; } } #footer .ftop { display: -ms-flexbox; display: -webkit-box; display: flex; justify-content: space-between; padding: 90px 0 60px; border-bottom: 1px solid rgba(255,255,255,0.1); } @media screen and (max-width: 1920px) { #footer .ftop { padding: calc(90 / 1920 * 100vw) 0 calc(60 / 1920 * 100vw); } } @media screen and (max-width: 1024px) { #footer .ftop { display: block; } } @media screen and (max-width: 750px) { #footer .ftop { padding: 0.5rem 0; } } #footer .ftop .right { width: calc(950 / 1720 * 100%); } @media screen and (max-width: 1024px) { #footer .ftop .right { width: auto; } } #footer .ftop .finfo { /* width: 410px; */ width: 430px; } @media screen and (max-width: 1440px) { #footer .ftop .finfo { /* width: 340px; */ width: 350px; } } @media screen and (max-width: 1024px) { #footer .ftop .finfo { display: none; } } #footer .ftop .finfo .title { font-size: 50px; font-weight: 400; margin-bottom: 20px; } @media screen and (max-width: 1920px) { #footer .ftop .finfo .title { font-size: calc(50 / 1920 * 100vw); margin-bottom: calc(20 / 1920 * 100vw); } } @media screen and (max-width: 750px) { #footer .ftop .finfo .title { font-size: 0.4rem; margin-bottom: 0.1rem; } } #footer .ftop .finfo .tabtit { font-size: calc(18 / 16 * 1em); font-weight: 600; border-bottom: 1px solid rgba(255,255,255,0.1); margin-bottom: 30px; display: -ms-flexbox; display: -webkit-box; display: flex; justify-content: space-between; } @media screen and (max-width: 1920px) { #footer .ftop .finfo .tabtit { margin-bottom: calc(30 / 1920 * 100vw); } } @media screen and (max-width: 750px) { #footer .ftop .finfo .tabtit { font-size: 0.32rem; margin-bottom: 0.15rem; } } #footer .ftop .finfo .tabtit li { cursor: pointer; display: -ms-inline-flexbox; display: -webkit-inline-flexbox; display: inline-flex; padding-bottom: 10px; border-bottom: 3px solid transparent; margin-right: 40px; -webkit-transition: 0.35s; -ms-transition: 0.35s; transition: 0.35s; } @media screen and (max-width: 1920px) { #footer .ftop .finfo .tabtit li { margin-right: calc(40 / 1920 * 100vw); } } @media screen and (max-width: 750px) { #footer .ftop .finfo .tabtit li { margin-right: 0.2rem; } } #footer .ftop .finfo .tabtit li.active { border-color: #fff; } #footer .ftop .finfo .tabcon .tabcon_item { display: none; word-break: break-all; } #footer .ftop .finfo .tabcon .tabcon_item.active { display: block; } #footer .ftop .finfo .list .list_item { display: -ms-flexbox; display: -webkit-box; display: flex; margin-bottom: 10px; } @media screen and (max-width: 1920px) { #footer .ftop .finfo .list .list_item { margin-bottom: calc(10 / 1920 * 100vw); } } @media screen and (max-width: 750px) { #footer .ftop .finfo .list .list_item { margin-bottom: 0.1rem; } } #footer .ftop .finfo .list .list_item .icon { width: 1.5em; margin-right: 5px; } #footer .ftop .finfo .list .list_item p { flex: 1; } #footer .ftop .finfo .list .list_item p a { font-size: calc(14 / 16 * 1em); font-family: 'Arial, Helvetica, sans-serif'; } #footer .ftop .finfo .list .list_item p a:hover { text-decoration: underline; } #footer .ftop .fnav { display: -ms-flexbox; display: -webkit-box; display: flex; justify-content: space-between; } @media screen and (max-width: 1024px) { #footer .ftop .fnav { display: none; } } #footer .ftop .fnav li { margin-right: 10px; flex: 1; } #footer .ftop .fnav li:last-child { margin-right: 0; } #footer .ftop .fnav h4 { font-size: calc(20 / 16 * 1em); font-weight: 600; margin-bottom: 10px; } @media screen and (max-width: 750px) { #footer .ftop .fnav h4 { font-size: 0.32rem; } } #footer .ftop .fnav .s1 { line-height: 2.5; } #footer .ftop .fnav .s1:hover { text-decoration: underline; } #footer .ftop .fshare { float: right; } @media screen and (max-width: 1024px) { #footer .ftop .fshare { text-align: center; float: none; } } @media screen and (max-width: 750px) { #footer .ftop .fshare { text-align: center; } } #footer .ftop .fshare .title { font-weight: 600; margin-bottom: 15px; } @media screen and (max-width: 750px) { #footer .ftop .fshare .title { margin-bottom: 0.2rem; } } #footer .ftop .fshare a { display: -ms-inline-flexbox; display: -webkit-inline-flexbox; display: inline-flex; align-self: center; -webkit-transition: 0.35s; -ms-transition: 0.35s; transition: 0.35s; margin-right: 20px; position: relative; } @media screen and (max-width: 1920px) { #footer .ftop .fshare a { margin-right: calc(20 / 1920 * 100vw); } } @media screen and (max-width: 1024px) { #footer .ftop .fshare a { margin: 0 calc(20 / 1024 * 100vw); } } @media screen and (max-width: 750px) { #footer .ftop .fshare a { margin: 0 0.2rem; } } #footer .ftop .fshare a:last-child { margin-right: 0; } #footer .ftop .fshare a:hover { -webkit-transform: scale(0.85); -ms-transform: scale(0.85); transform: scale(0.85); } #footer .ftop .fshare a:hover .pop { opacity: 1; visibility: visible; } #footer .ftop .fshare i { font-size: calc(24 / 16 * 1em); } @media screen and (max-width: 750px) { #footer .ftop .fshare i { font-size: 0.4rem; } } #footer .ftop .fshare .pop { position: absolute; left: 50%; bottom: 100%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: 140px; height: 140px; background-color: #fff; -webkit-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px; margin-bottom: 15px; opacity: 0; visibility: hidden; -webkit-transition: 0.35s; -ms-transition: 0.35s; transition: 0.35s; } #footer .ftop .fshare .pop::after { content: ''; position: absolute; left: 50%; top: 100%; width: 0; height: 0; border: 10px solid; border-color: #fff transparent transparent transparent; -webkit-transform: translateX(-50%) scaleX(0.8); -ms-transform: translateX(-50%) scaleX(0.8); transform: translateX(-50%) scaleX(0.8); margin-top: -1px; filter: drop-shadow(2px 5px 5px rgba(0,0,0,0.2)); } #footer .ftop .fshare .pop img { width: 100%; height: 100%; display: block; } #footer .fbot { color: rgba(255,255,255,0.7); padding: 60px 0 50px; display: -ms-flexbox; display: -webkit-box; display: flex; align-items: center; justify-content: space-between; } @media screen and (max-width: 1920px) { #footer .fbot { padding: calc(60 / 1920 * 100vw) 0 calc(50 / 1920 * 100vw); } } @media screen and (max-width: 990px) { #footer .fbot { display: block; text-align: center; } } @media screen and (max-width: 750px) { #footer .fbot { padding: 0.3rem 0; } } #footer .fbot a { color: rgba(255,255,255,0.7); } .g_toolbox { position: absolute; z-index: 9; right: 20px; top: 40px; } @media screen and (max-width: 1920px) { .g_toolbox { top: calc(40 / 1080 * 100vh); } } @media screen and (max-width: 750px) { .g_toolbox { top: 0.4rem; } } @media screen and (max-width: 1920px) { .g_toolbox { right: calc(20 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .g_toolbox { right: 0.1rem; } } .g_toolbox.fixbot { position: fixed; top: auto; bottom: 40px; } .g_toolbox .toTop, .g_toolbox .toMsg { color: #fff; width: 56px; height: 56px; background-color: #002a50; -webkit-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; display: -ms-flexbox; display: -webkit-box; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; } @media screen and (max-width: 1920px) { .g_toolbox .toTop, .g_toolbox .toMsg { width: clamp(40px, calc(56 / 1920 * 100vw), 56px); height: clamp(40px, calc(56 / 1920 * 100vw), 56px); margin-bottom: calc(10 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .g_toolbox .toTop, .g_toolbox .toMsg { width: 0.7rem; height: 0.7rem; margin-bottom: 0.1rem; } } #main { overflow: hidden; position: relative; z-index: 1; } .tc { text-align: center; } .fc3 { color: #333; } .g_morebtn { color: #00549e; font-family: 'PingFangSC-Regular', 'PingFang SC', 'Microsoft Yahei', 'Hiragino Sans GB', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', 'sans-serif'; font-weight: 400; display: -ms-inline-flexbox; display: -webkit-inline-flexbox; display: inline-flex; align-items: center; } .g_morebtn i { font-size: calc(12 / 16 * 1em); line-height: 1; } .g_morebtn span { display: block; margin-left: 10px; -webkit-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg); } .gm_more { color: #00549e; font-family: 'PingFangSC-Regular', 'PingFang SC', 'Microsoft Yahei', 'Hiragino Sans GB', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', 'sans-serif'; font-weight: 400; display: -ms-inline-flexbox; display: -webkit-inline-flexbox; display: inline-flex; align-items: center; } .gm_more .ico { color: #fff; width: 32px; height: 32px; background-color: #00549e; -webkit-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; display: -ms-flexbox; display: -webkit-box; display: flex; align-items: center; justify-content: center; margin-right: 8px; } @media screen and (max-width: 750px) { .gm_more .ico { width: 0.4rem; height: 0.4rem; } } .gm_more .ico i { font-size: calc(10 / 16 * 1em); } @media screen and (max-width: 750px) { .gm_more .ico i { font-size: 0.16rem; } } .gm_more.fcw { color: #fff; } .gm_more.fcw .ico { color: #00549e; background-color: #fff; } .g_loadbtn { color: #00549e; font-family: 'PingFangSC-Regular', 'PingFang SC', 'Microsoft Yahei', 'Hiragino Sans GB', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', 'sans-serif'; font-weight: 400; display: -ms-inline-flexbox; display: -webkit-inline-flexbox; display: inline-flex; align-items: center; } .g_loadbtn i { font-size: calc(24 / 16 * 1em); line-height: 1; margin-left: 10px; } .gbtn3 { color: #fff; font-family: 'PingFangSC-Regular', 'PingFang SC', 'Microsoft Yahei', 'Hiragino Sans GB', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', 'sans-serif'; font-weight: 400; height: 50px; padding: 0 15px; min-width: 100px; background-color: #00549e; -webkit-border-radius: 25px; -ms-border-radius: 25px; border-radius: 25px; -webkit-box-sizing: content-box; -ms-box-sizing: content-box; box-sizing: content-box; display: -ms-inline-flexbox; display: -webkit-inline-flexbox; display: inline-flex; align-items: center; justify-content: center; } @media screen and (max-width: 1920px) { .gbtn3 { height: calc(50 / 1920 * 100vw); min-height: 35px; min-width: calc(100 / 1920 * 100vw); -webkit-border-radius: calc(25 / 1920 * 100vw); -ms-border-radius: calc(25 / 1920 * 100vw); border-radius: calc(25 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .gbtn3 { padding: 0 0.2rem; height: 0.6rem; min-width: 1rem; -webkit-border-radius: 0.3rem; -ms-border-radius: 0.3rem; border-radius: 0.3rem; } } .gt1 { color: #00549e; font-size: 50px; font-family: 'PingFangSC-Semibold', 'PingFang SC', 'Microsoft Yahei', 'Hiragino Sans GB', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', 'sans-serif'; font-weight: 600; line-height: 1.2; text-align: center; margin-bottom: 40px; } @media screen and (max-width: 1920px) { .gt1 { font-size: calc(50 / 1920 * 100vw); margin-bottom: clamp(20px, calc(40 / 1920 * 100vw), 40px); } } @media screen and (max-width: 750px) { .gt1 { font-size: 0.48rem; margin-bottom: 0.4rem; } } .gt1 .line { display: block; width: 2px; height: calc(30 / 50 * 1em); background: #00549e; margin: 20px auto 0; } @media screen and (max-width: 1920px) { .gt1 .line { margin-top: calc(20 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .gt1 .line { margin-top: 0.2rem; } } .gt1.white { color: #fff; } .gt1.white .line { background: #fff; } .gt1.tlr { text-align: left; } .gt1.tlr .line { margin-left: 0; } .gt2 { font-size: 50px; font-family: 'PingFangSC-Semibold', 'PingFang SC', 'Microsoft Yahei', 'Hiragino Sans GB', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', 'sans-serif'; font-weight: 600; } @media screen and (max-width: 1920px) { .gt2 { font-size: calc(50 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .gt2 { font-size: 0.48rem; } } .gt3 { color: #00549e; font-family: 'PingFangSC-Semibold', 'PingFang SC', 'Microsoft Yahei', 'Hiragino Sans GB', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', 'sans-serif'; font-weight: 600; font-size: 40px; margin-bottom: 40px; } @media screen and (max-width: 1920px) { .gt3 { font-size: calc(40 / 1920 * 100vw); margin-bottom: clamp(20px, calc(40 / 1920 * 100vw), 40px); } } @media screen and (max-width: 750px) { .gt3 { font-size: 0.4rem; margin-bottom: 0.4rem; } } /* .gtit_box { flexbox() align-items: center justify-content: space-between margin-bottom 40px @media screen and (max-width: 1920px) { margin-bottom calc(40/1920*100vw) } @media screen and (max-width: 990px) { margin-bottom 20px } @media screen and (max-width: 750px) { margin-bottom .4rem } } .gtit { margin-bottom 60px @media screen and (max-width: 1920px) { margin-bottom calc(60/1920*100vw) } @media screen and (max-width: 990px) { margin-bottom 30px } @media screen and (max-width: 750px) { margin-bottom .4rem } } */ #ban { height: 800px; position: relative; background-color: #00549e; background-repeat: no-repeat; background-position: center; -webkit-background-size: cover; -ms-background-size: cover; background-size: cover; overflow: hidden; } @media screen and (max-width: 1920px) { #ban { height: calc(800 / 1920 * 100vw); } } @media screen and (max-width: 750px) { #ban { height: 6rem; } } #ban .bg, #ban .bg_m { width: 100%; height: 100%; position: relative; overflow: hidden; background-repeat: no-repeat; background-position: center; -webkit-background-size: cover; -ms-background-size: cover; background-size: cover; } #ban .bg::after, #ban .bg_m::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 50%; background-image: linear-gradient(180deg, rgba(38,97,163,0.3), rgba(38,97,163,0)); } #ban .bg video, #ban .bg_m video { width: 100%; height: 100%; object-fit: cover; } #ban .bg_m { display: none; } #ban .text { color: #fff; border-top: 1px solid rgba(255,255,255,0.5); background-color: rgba(255,255,255,0.25); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); position: absolute; left: 0; right: 0; bottom: 0; } #ban .text .title { font-size: 50px; min-height: 105px; display: -ms-flexbox; display: -webkit-box; display: flex; align-items: center; } @media screen and (max-width: 1920px) { #ban .text .title { font-size: calc(50 / 1920 * 100vw); min-height: calc(105 / 1920 * 100vw); } } @media screen and (max-width: 750px) { #ban .text .title { font-size: 0.48rem; min-height: 1.2rem; } } #ban .top { position: absolute; left: 0; right: 0; top: 100px; } @media screen and (max-width: 1920px) { #ban .top { top: calc(100 / 1920 * 100vw); } } @media screen and (max-width: 750px) { #ban .top { top: 1.2rem; } } #ban .top .m_breadcrumb_nav { color: #fff; } #ban .top .m_breadcrumb_nav a { color: #fff; } #ban .top .m_breadcrumb_nav a:hover { color: #fff; } #ban .top .m_breadcrumb_nav span { color: #fff; } #ban .top .m_breadcrumb_nav.black { color: #333; } #ban .top .m_breadcrumb_nav.black a { color: #333; } #ban .top .m_breadcrumb_nav.black a:hover { color: #333; } #ban .top .m_breadcrumb_nav.black a .icon-home { color: #00549e; } #ban .top .m_breadcrumb_nav.black span { color: #333; } .m_breadcrumb_nav { display: -ms-flexbox; display: -webkit-box; display: flex; align-items: center; } .m_breadcrumb_nav i { margin-right: 15px; } @media screen and (max-width: 1920px) { .m_breadcrumb_nav i { margin-right: calc(15 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .m_breadcrumb_nav i { margin-right: 0.15rem; } } .m_breadcrumb_nav i.icon-gt { font-size: calc(12 / 16 * 1em); } .m_breadcrumb_nav a { color: #333; margin-right: 15px; } @media screen and (max-width: 1920px) { .m_breadcrumb_nav a { margin-right: calc(15 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .m_breadcrumb_nav a { margin-right: 0.15rem; } } .m_breadcrumb_nav a:hover { color: #00549e; } .white .header_dark_page #header, .white #header { background-color: #fff; } .white #breadcrumb { background-color: #fff; margin-bottom: 0; } #breadcrumb { position: relative; border-bottom: 1px solid #d5dee8; margin-bottom: 30px; } @media screen and (max-width: 1920px) { #breadcrumb { margin-bottom: calc(30 / 1920 * 100vw); } } @media screen and (max-width: 1024px) { #breadcrumb { position: static; margin-bottom: calc(100 / 1920 * 100vw); } } @media screen and (max-width: 750px) { #breadcrumb { margin-bottom: 0.3rem; margin-bottom: 0.6rem; } } #breadcrumb .box { display: -ms-flexbox; display: -webkit-box; display: flex; align-items: center; justify-content: space-between; height: 100px; } @media screen and (max-width: 1920px) { #breadcrumb .box { height: clamp(50px, calc(100 / 1920 * 100vw), 100px); } } @media screen and (max-width: 750px) { #breadcrumb .box { height: 1rem; } } #breadcrumb .box .m_breadcrumb_nav { font-size: calc(14 / 16 * 1em); } #breadcrumb .box .m_menu_snav { width: 960px; position: absolute; top: 0; left: 0; right: 0; margin: 0 auto; } @media screen and (max-width: 1920px) { #breadcrumb .box .m_menu_snav { width: calc(960 / 1920 * 100vw); } } @media screen and (max-width: 1024px) { #breadcrumb .box .m_menu_snav { position: fixed; z-index: 7; width: 70vw; left: -100vw; right: auto; bottom: 0; top: 0; padding-top: 80px; margin: 0; background-color: #fff; -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.15); -ms-box-shadow: 0 0 10px rgba(0,0,0,0.15); box-shadow: 0 0 10px rgba(0,0,0,0.15); -webkit-transition: 0.55s; -ms-transition: 0.55s; transition: 0.55s; overflow-y: auto; } } @media screen and (max-width: 750px) { #breadcrumb .box .m_menu_snav { padding-top: 1rem; } } #breadcrumb .box .m_menu_snav.open { left: 0; } #breadcrumb .box .m_menu_snav .s1 { height: 100px; } @media screen and (max-width: 1920px) { #breadcrumb .box .m_menu_snav .s1 { height: clamp(50px, calc(100 / 1920 * 100vw), 100px); margin-bottom: 10px; } } @media screen and (max-width: 750px) { #breadcrumb .box .m_menu_snav .s1 { height: 1rem; } } .snav_box { height: 70px; position: relative; z-index: 2; } @media screen and (max-width: 1440px) { .snav_box { height: 60px; } } @media screen and (max-width: 1280px) { .snav_box { height: 50px; } } @media screen and (max-width: 750px) { .snav_box { height: 1rem; border-bottom: 1px solid #d5dee8; } } .snav_box .jsTicknav { position: absolute; z-index: 8; left: 0; right: 0; top: 0; } .snav_box .jsTicknav.fixed { border-top: 1px solid #d5dee8; background-color: #fff; position: fixed; top: 90px; } @media screen and (max-width: 1920px) { .snav_box .jsTicknav.fixed { top: calc(50px + calc(40 / 1920 * 100vw)); } } @media screen and (max-width: 750px) { .snav_box .jsTicknav.fixed { top: 1rem; } } #snav { margin-bottom: -72px; position: relative; z-index: 3; } @media screen and (max-width: 1440px) { #snav { margin-bottom: -62px; } } @media screen and (max-width: 1280px) { #snav { margin-bottom: -52px; } } @media screen and (max-width: 750px) { #snav { margin-bottom: -1rem; border-bottom: 1px solid #d5dee8; } } #snav .swiper { overflow: visible; border-bottom: 1px solid #d5dee8; } @media screen and (max-width: 750px) { #snav .swiper { border: 0; } } #snav .swiper .swiper-wrapper { display: -ms-flexbox; display: -webkit-box; display: flex; justify-content: space-between; } #snav .swiper .swiper-prev, #snav .swiper .swiper-next { position: absolute; z-index: 9; top: 0; bottom: 0; color: #00549e; cursor: pointer; padding: 0 10px; display: -ms-flexbox; display: -webkit-box; display: flex; align-items: center; } #snav .swiper .swiper-prev.swiper-button-disabled, #snav .swiper .swiper-next.swiper-button-disabled { display: none; } #snav .swiper.flexauto .swiper-wrapper { display: -ms-flexbox; display: -webkit-box; display: flex; justify-content: flex-start; } #snav .swiper.flexauto .swiper-wrapper .swiper-slide { margin-right: 300px; } @media screen and (max-width: 1920px) { #snav .swiper.flexauto .swiper-wrapper .swiper-slide { margin-right: calc(300 / 1920 * 100vw); } } @media screen and (max-width: 750px) { #snav .swiper.flexauto .swiper-wrapper .swiper-slide { margin-right: 0; } } #snav .swiper .swiper-prev { left: 0; } #snav .swiper .swiper-next { right: 0; } #snav .swiper .swiper-slide { width: auto !important; } #snav .swiper .swiper-slide .sv1 { color: #333; font-size: 20px; height: 70px; cursor: pointer; display: -ms-inline-flexbox; display: -webkit-inline-flexbox; display: inline-flex; align-items: center; } @media screen and (max-width: 1920px) { #snav .swiper .swiper-slide .sv1 { font-size: calc(20 / 16 * 1em); } } @media screen and (max-width: 1440px) { #snav .swiper .swiper-slide .sv1 { height: 60px; } } @media screen and (max-width: 1280px) { #snav .swiper .swiper-slide .sv1 { height: 50px; } } @media screen and (max-width: 750px) { #snav .swiper .swiper-slide .sv1 { font-size: 0.32rem; height: 1rem; margin: 0 0.2rem; } } #snav .swiper .swiper-slide.active .sv1 { color: #00549e; border-bottom: 3px solid #00549e; } .m_menu_snav { display: -ms-flexbox; display: -webkit-box; display: flex; justify-content: space-between; } @media screen and (max-width: 1024px) { .m_menu_snav { padding: 10px; } } @media screen and (max-width: 750px) { .m_menu_snav { padding: 0.2rem; } } @media screen and (max-width: 1024px) { .m_menu_snav .item { margin-bottom: 20px; } } .m_menu_snav dl { display: none; } @media screen and (max-width: 1024px) { .m_menu_snav dl { display: -ms-flexbox; display: -webkit-box; display: flex; flex-wrap: wrap; } } .m_menu_snav dl dd { margin: 4px; } .m_menu_snav dl dd.active .sv1 { color: #fff; background-color: #00549e; } .m_menu_snav dl .sv1 { color: #333; padding: 6px 15px; background-color: transparent; -webkit-border-radius: 16px; -ms-border-radius: 16px; border-radius: 16px; display: block; } .m_menu_snav dl .ssv1 { color: #333; padding: 6px 15px; background-color: transparent; -webkit-border-radius: 16px; -ms-border-radius: 16px; border-radius: 16px; display: block; } .m_menu_snav .s1 { color: #333; font-size: calc(18 / 16 * 1em); position: relative; display: -ms-flexbox; display: -webkit-box; display: flex; align-items: center; } .m_menu_snav .s1::after { content: ''; height: 2px; width: 0; background-color: #00549e; -webkit-transition: 0.35s; -ms-transition: 0.35s; transition: 0.35s; position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .m_menu_snav .s1:hover { color: #00549e; } .m_menu_snav .active .s1 { color: #00549e; } .m_menu_snav .active .s1::after { width: 100%; } .m_snav_list { margin-bottom: 100px; } @media screen and (max-width: 1920px) { .m_snav_list { margin-bottom: clamp(50px, calc(100 / 1920 * 100vw), 100px); } } @media screen and (max-width: 750px) { .m_snav_list { margin-bottom: 1rem; } } .m_snav_list dl { display: -ms-flexbox; display: -webkit-box; display: flex; justify-content: center; flex-wrap: wrap; } .m_snav_list dl dd { margin: 4px; } .m_snav_list dl dd.active .sv1 { color: #fff; background-color: #00549e; } .m_snav_list dl dd.active .ssv1 { color: #fff; background-color: #00549e; } .m_snav_list dl .sv1 { color: #333; padding: 6px 15px; background-color: transparent; -webkit-border-radius: 16px; -ms-border-radius: 16px; border-radius: 16px; display: block; } .m_snav_list dl .ssv1 { color: #333; padding: 6px 15px; background-color: transparent; -webkit-border-radius: 16px; -ms-border-radius: 16px; border-radius: 16px; display: block; } .filterBtn { font-size: calc(24 / 16 * 1em); cursor: pointer; display: none; } .g_page { display: -ms-flexbox; display: -webkit-box; display: flex; justify-content: center; align-items: center; } @media screen and (max-width: 750px) { .g_page { display: block; margin-top: 0.6rem; } } .g_page dl { display: -ms-flexbox; display: -webkit-box; display: flex; justify-content: center; } .g_page dl dd { width: 40px; height: 40px; background-color: #fff; border: 1px solid rgba(0,0,0,0.05); -webkit-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; -webkit-transition: 0.5s; -ms-transition: 0.5s; transition: 0.5s; cursor: pointer; margin: 0 6px; display: -ms-flexbox; display: -webkit-box; display: flex; justify-content: center; align-items: center; } @media screen and (max-width: 1920px) { .g_page dl dd { width: clamp(32px, calc(40 / 1920 * 100vw), 40px); height: clamp(32px, calc(40 / 1920 * 100vw), 40px); } } @media screen and (max-width: 750px) { .g_page dl dd { width: 0.7rem; height: 0.7rem; margin: 0 0.05rem; } } .g_page dl dd.current { color: #fff; background-color: #00549e; } .g_page dl dd:hover { color: #00549e; } .g_page .line { height: 1em; border-right: 1px solid #d5dee8; margin: 0 10px; } @media screen and (max-width: 750px) { .g_page .line { display: none; } } .g_page .form { display: -ms-flexbox; display: -webkit-box; display: flex; justify-content: center; align-items: center; } @media screen and (max-width: 750px) { .g_page .form { margin-top: 0.3rem; display: none; } } .g_page .form .inp, .g_page .form .btn { font-size: calc(14 / 16 * 1em); width: 40px; height: 40px; background-color: #fff; border: 1px solid rgba(0,0,0,0.05); -webkit-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; margin: 0 6px; } @media screen and (max-width: 1920px) { .g_page .form .inp, .g_page .form .btn { width: clamp(32px, calc(40 / 1920 * 100vw), 40px); height: clamp(32px, calc(40 / 1920 * 100vw), 40px); } } @media screen and (max-width: 750px) { .g_page .form .inp, .g_page .form .btn { width: 0.7rem; height: 0.7rem; margin: 0 0.05rem; } } .g_page .form .inp { text-align: center; } .g_page .form .btn { cursor: pointer; } .popBox { position: fixed; z-index: 99; left: 0; top: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5); } .popBox .pop_close { color: #fff; font-size: 28px; width: 60px; height: 60px; background-color: #00549e; -webkit-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; cursor: pointer; position: absolute; z-index: 99; right: 40px; top: 40px; display: -ms-flexbox; display: -webkit-box; display: flex; align-items: center; justify-content: center; } @media screen and (max-width: 1920px) { .popBox .pop_close { font-size: clamp(20px, calc(28 / 1920 * 100vw), 28px); right: calc(40 / 1920 * 100vw); top: calc(40 / 1920 * 100vw); width: clamp(35px, calc(60 / 1920 * 100vw), 60px); height: clamp(35px, calc(60 / 1920 * 100vw), 60px); } } @media screen and (max-width: 750px) { .popBox .pop_close { right: 0.2rem; top: 0.2rem; width: 0.6rem; height: 0.6rem; } } .popBox .popCon { width: 1280px; height: 760px; background-color: #000; -webkit-border-radius: 30px; -ms-border-radius: 30px; border-radius: 30px; overflow: hidden; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } @media screen and (max-width: 1920px) { .popBox .popCon { width: clamp(50%, calc(1280 / 1920 * 100vw), 1280px); height: clamp(50%, calc(760 / 1920 * 100vw), 760px); } } @media screen and (max-width: 750px) { .popBox .popCon { width: 90%; height: 60%; } } .popBox .map { width: 100%; height: 100%; } .popBox .map .anchorBL { display: none !important; } .fancyBox { display: none; position: fixed; z-index: 99; left: 0; top: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5); } .fancyBox .fancyCont { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 90%; max-width: 1620px; padding: 90px 70px; background-color: #fff; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 30px; -ms-border-radius: 30px; border-radius: 30px; overflow: hidden; } @media screen and (max-width: 1920px) { .fancyBox .fancyCont { padding: calc(90 / 1920 * 100vw) calc(70 / 1920 * 100vw); -webkit-border-radius: calc(30 / 1920 * 100vw); -ms-border-radius: calc(30 / 1920 * 100vw); border-radius: calc(30 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .fancyBox .fancyCont { padding: 0.6rem 0.4rem; -webkit-border-radius: 0.2rem; -ms-border-radius: 0.2rem; border-radius: 0.2rem; } } .fancyBox .fancy_close { color: #fff; font-size: 28px; width: 60px; height: 60px; background-color: #00549e; -webkit-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; cursor: pointer; position: absolute; z-index: 99; right: 40px; top: 40px; display: -ms-flexbox; display: -webkit-box; display: flex; align-items: center; justify-content: center; } @media screen and (max-width: 1920px) { .fancyBox .fancy_close { font-size: clamp(20px, calc(28 / 1920 * 100vw), 28px); right: calc(40 / 1920 * 100vw); top: calc(40 / 1920 * 100vw); width: clamp(35px, calc(60 / 1920 * 100vw), 60px); height: clamp(35px, calc(60 / 1920 * 100vw), 60px); } } @media screen and (max-width: 750px) { .fancyBox .fancy_close { right: 0.2rem; top: 0.2rem; width: 0.6rem; height: 0.6rem; } } .fancyBox .fancy_head { font-size: calc(18 / 16 * 1em); text-align: center; margin-bottom: 60px; } @media screen and (max-width: 1920px) { .fancyBox .fancy_head { margin-bottom: calc(60 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .fancyBox .fancy_head { font-size: 0.24rem; margin-bottom: 0.6rem; } } .fancyBox .fancy_head .title { font-size: 52px; font-family: 'PingFangSC-Semibold', 'PingFang SC', 'Microsoft Yahei', 'Hiragino Sans GB', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', 'sans-serif'; font-weight: 600; margin-bottom: 10px; } @media screen and (max-width: 1920px) { .fancyBox .fancy_head .title { font-size: clamp(20px, calc(52 / 1920 * 100vw), 52px); } } @media screen and (max-width: 750px) { .fancyBox .fancy_head .title { font-size: 0.4rem; margin-bottom: 0.1rem; } } .fancyBox .fancy_body_inner { max-height: 60vh; overflow-y: auto; } .m_email_form .legend { font-size: calc(22 / 16 * 1em); margin-bottom: 20px; } @media screen and (max-width: 1920px) { .m_email_form .legend { margin-bottom: calc(20 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .m_email_form .legend { font-size: 0.32rem; margin-bottom: 0.2rem; } } @media screen and (max-width: 1920px) and (min-aspect-ratio: 1920/960) { .m_email_form .legend { margin-bottom: calc(20 / 1080 * 100vh); } } .m_email_form .form_row { display: -ms-flexbox; display: -webkit-box; display: flex; justify-content: space-between; flex-wrap: wrap; margin-bottom: 90px; } @media screen and (max-width: 1920px) { .m_email_form .form_row { margin-bottom: calc(90 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .m_email_form .form_row { margin-bottom: 0.6rem; } } .m_email_form .form_row .form_item { width: clamp(26%, 31%, 365px); } @media screen and (max-width: 990px) { .m_email_form .form_row .form_item { width: 100%; } } @media screen and (max-width: 1920px) and (min-aspect-ratio: 1920/960) { .m_email_form .form_row { margin-bottom: calc(90 / 1080 * 100vh); } } .m_email_form .tag { line-height: calc(45 / 16); } @media screen and (max-width: 990px) { .m_email_form .tag { line-height: 2; } } .m_email_form .inp { height: 55px; border-bottom: 1px solid #d5dee8; display: block; width: 100%; margin-bottom: 30px; } @media screen and (max-width: 1920px) { .m_email_form .inp { margin-bottom: calc(30 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .m_email_form .inp { height: 0.8rem; margin-bottom: 0.3rem; } } .m_email_form .inp.inp_area { resize: none; } @media screen and (max-width: 1920px) and (min-aspect-ratio: 1920/960) { .m_email_form .inp { margin-bottom: calc(30 / 1080 * 100vh); } } .m_email_form .submit { color: #fff; height: 50px; padding: 0 20px; min-width: 160px; background-color: #00549e; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 25px; -ms-border-radius: 25px; border-radius: 25px; cursor: pointer; display: -ms-flexbox; display: -webkit-box; display: flex; align-items: center; justify-content: center; } @media screen and (max-width: 1920px) { .m_email_form .submit { min-width: calc(160 / 1920 * 100vw); height: clamp(35px, calc(50 / 1920 * 100vw), 50px); } } @media screen and (max-width: 750px) { .m_email_form .submit { padding: 0 0.2rem; min-width: 3rem; height: 0.8rem; } } .m_email_form .label { margin-bottom: 30px; } @media screen and (max-width: 1920px) { .m_email_form .label { margin-bottom: calc(30 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .m_email_form .label { margin-bottom: 0.3rem; } } .m_email_form .label .inp_check { width: 1em; height: 1em; border: 2px solid #00549e; background-color: transparent; -webkit-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; position: relative; top: -2px; display: inline-block; vertical-align: middle; margin-right: 4px; } @media screen and (max-width: 750px) { .m_email_form .label .inp_check { width: 0.32rem; height: 0.32rem; margin-right: 0.1rem; } } .m_email_form .label .inp_check::after { color: transparent; font-size: 12px; content: '\e82b'; font-family: 'iconfont'; position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: -ms-inline-flexbox; display: -webkit-inline-flexbox; display: inline-flex; justify-content: center; align-items: center; } .m_email_form .label .inp_check:checked { background-color: #00549e; } .m_email_form .label .inp_check:checked::after { color: #fff; } @media screen and (max-width: 1920px) and (min-aspect-ratio: 1920/960) { .m_email_form .label { margin-bottom: calc(30 / 1080 * 100vh); } } /* .wow { -webkit-animation-delay .3s animation-delay .3s &:nth-child(2) { -webkit-animation-delay .45s animation-delay .45s } &:nth-child(3) { -webkit-animation-delay .6s animation-delay .6s } &:nth-child(4) { -webkit-animation-delay .75s animation-delay .75s } &:nth-child(5) { -webkit-animation-delay .9s animation-delay .9s } &:nth-child(6) { -webkit-animation-delay 1.05s animation-delay 1.05s } &:nth-child(7) { -webkit-animation-delay 1.2s animation-delay 1.2s } } */ @-webkit-keyframes movepoint { 0% { opacity: 1; -webkit-transform: translateY(0); } 50% { opacity: 0.6; -webkit-transform: translateY(-10px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-webkit-keyframes moveup { 0% { opacity: 0; -webkit-transform: translateY(50px); -ms-transform: translateY(50px); transform: translateY(50px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } @-moz-keyframes moveup { 0% { opacity: 0; -webkit-transform: translateY(50px); -ms-transform: translateY(50px); transform: translateY(50px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes scaleBigSmall { 0% { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } @-moz-keyframes scaleBigSmall { 0% { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } @-webkit-keyframes scaleSmallBig { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } } @-moz-keyframes scaleSmallBig { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } } .letter-ani { display: inline-block; opacity: 0; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); transition-behavior: normal; transition-duration: 0.55s; transition-timing-function: ease; transition-property: all; } .letter-ani.wow { opacity: 1; -webkit-transform: none; -ms-transform: none; transform: none; } .platMenu_bg { position: fixed; z-index: 8; left: 0; right: 0; top: 90px; bottom: 0; background: rgba(0,0,0,0.6); display: none; } #platMenu { position: fixed; z-index: 8; left: 0; right: 0; top: 90px; padding: 20px 0; background: #fff; border-top: 1px solid #e8e8e8; display: none; /* &::before { content: '' position: fixed z-index -1 left: 0 right: 0 top 0 height: 100vh background-color blackRgb(0.5) // opacity: 0 // visibility: hidden trans(.35s) } &::after { content: '' position: absolute z-index 1 left: 0 right: 0 top 0 bottom: 0 background-color blackRgb(0.5) background $white } */ } @media screen and (max-width: 1920px) { #platMenu { top: calc(50px + 40 / 1920 * 100vw); } } #platMenu.show { left: 0; -webkit-transform: none; -ms-transform: none; transform: none; display: block; } @media screen and (max-width: 1024px) { #platMenu.show { display: none; } } #platMenu ul, #platMenu li, #platMenu ol { margin: 0; padding: 0; list-style: none; } #platMenu .box { display: -ms-flexbox; display: -webkit-box; display: flex; max-width: 1920px; margin: 0 auto; position: relative; z-index: 2; } #platMenu .box .column { flex: 1; padding: 0 40px; border-right: 1px solid #e8e8e8; } @media screen and (max-width: 1920px) { #platMenu .box .column { padding: 0 calc(40 / 1920 * 100vw); } } #platMenu .box .column:last-child { border: 0; } #platMenu .hd { font-size: 22px; line-height: 1; display: -ms-flexbox; display: -webkit-box; display: flex; align-items: center; margin-bottom: 20px; } @media screen and (max-width: 1920px) { #platMenu .hd { margin-bottom: calc(20 / 1920 * 100vw); } } @media screen and (max-width: 1440px) { #platMenu .hd { font-size: 20px; } } @media screen and (max-width: 1280px) { #platMenu .hd { font-size: 18px; } } @media screen and (max-width: 1024px) { #platMenu .hd { font-size: 16px; } } @media screen and (max-width: 750px) { #platMenu .hd { font-size: 0.32rem; margin-bottom: 0.2rem; } } #platMenu .hd .ico { width: 40px; height: 40px; display: -ms-flexbox; display: -webkit-box; display: flex; justify-content: center; align-items: center; } @media screen and (max-width: 1920px) { #platMenu .hd .ico { width: clamp(20px, calc(40 / 1920 * 100vw), 40px); height: clamp(20px, calc(40 / 1920 * 100vw), 40px); } } @media screen and (max-width: 750px) { #platMenu .hd .ico { width: 0.6rem; height: 0.6rem; } } #platMenu .hd .ico img { max-width: 100%; height: 100%; filter: brightness(0); -webkit-transition: 0.55s; -ms-transition: 0.55s; transition: 0.55s; } #platMenu .list { display: -ms-flexbox; display: -webkit-box; display: flex; flex-wrap: wrap; justify-content: space-between; } #platMenu .list .item { width: calc(50% - 7px); margin-bottom: 10px; } #platMenu .list .item:hover .item_con { color: #00549e; } #platMenu .list .item:hover .picture img { -webkit-transform: translateY(-6px); -ms-transform: translateY(-6px); transform: translateY(-6px); } #platMenu .list .item .item_con { color: #999; display: block; } #platMenu .list .item .picture { height: 80px; background-color: #f6f6f6; overflow: hidden; display: -ms-flexbox; display: -webkit-box; display: flex; justify-content: center; align-items: center; margin-bottom: 5px; } @media screen and (max-width: 1920px) { #platMenu .list .item .picture { height: clamp(50px, calc(80 / 1920 * 100vw), 80px); } } @media screen and (max-width: 750px) { #platMenu .list .item .picture { height: 1rem; } } #platMenu .list .item .picture img { display: block; max-width: 100%; max-height: 100%; -webkit-transition: 0.45s; -ms-transition: 0.45s; transition: 0.45s; } #platMenu .list .item .title { font-size: calc(14 / 16 * 1em); text-align: center; -webkit-transition: 0.45s; -ms-transition: 0.45s; transition: 0.45s; } .menu_snav_box .m_menu_snav { display: -ms-flexbox; display: -webkit-box; display: flex; align-items: center; justify-content: space-between; height: 100px; max-width: 960px; margin: 0 auto; padding: 0; } @media screen and (max-width: 1920px) { .menu_snav_box .m_menu_snav { height: clamp(50px, calc(100 / 1920 * 100vw), 100px); width: calc(960 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .menu_snav_box .m_menu_snav { height: 1rem; width: auto; padding: 0 0.3rem; } } .menu_snav_box .m_menu_snav .item { margin-bottom: 0; } .menu_snav_box .m_menu_snav .s1 { height: 100px; } @media screen and (max-width: 1920px) { .menu_snav_box .m_menu_snav .s1 { height: clamp(50px, calc(100 / 1920 * 100vw), 100px); } } @media screen and (max-width: 750px) { .menu_snav_box .m_menu_snav .s1 { height: 1rem; } } .m_menu_swiper { padding: 20px 0 10px; background-color: #fff; border-top: 1px solid #d5dee8; border-bottom: 1px solid #d5dee8; margin-bottom: 20px; } @media screen and (max-width: 750px) { .m_menu_swiper { padding: 0.2rem 0; } } .m_menu_swiper .list { display: -ms-flexbox; display: -webkit-box; display: flex; justify-content: center; } @media screen and (max-width: 750px) { .m_menu_swiper .list { justify-content: flex-start; overflow-x: auto; } } .m_menu_swiper .list .item { width: 190px; margin: 0 5px; } @media screen and (max-width: 1920px) { .m_menu_swiper .list .item { width: clamp(120px, calc(190 / 1920 * 100vw), 190px); } } @media screen and (max-width: 750px) { .m_menu_swiper .list .item { flex: none; width: 2.4rem; margin: 0 0.1rem; } } .m_menu_swiper .list .item:hover .item_con, .m_menu_swiper .list .item.active .item_con { color: #00549e; } .m_menu_swiper .list .item:hover .picture img { -webkit-transform: translateY(-6px); -ms-transform: translateY(-6px); transform: translateY(-6px); } .m_menu_swiper .list .item .item_con { color: #999; display: block; } .m_menu_swiper .list .item .picture { height: 80px; background-color: #f6f6f6; overflow: hidden; display: -ms-flexbox; display: -webkit-box; display: flex; justify-content: center; align-items: center; margin-bottom: 5px; } @media screen and (max-width: 1920px) { .m_menu_swiper .list .item .picture { height: clamp(50px, calc(80 / 1920 * 100vw), 80px); } } @media screen and (max-width: 750px) { .m_menu_swiper .list .item .picture { height: 1rem; } } .m_menu_swiper .list .item .picture img { display: block; max-width: 100%; max-height: 100%; -webkit-transition: 0.45s; -ms-transition: 0.45s; transition: 0.45s; } .m_menu_swiper .list .item .title { text-align: center; -webkit-transition: 0.45s; -ms-transition: 0.45s; transition: 0.45s; } @-moz-keyframes movepoint { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 50% { opacity: 0.6; -webkit-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes movepoint { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 50% { opacity: 0.6; -webkit-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } @-o-keyframes movepoint { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 50% { opacity: 0.6; -webkit-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } @keyframes movepoint { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 50% { opacity: 0.6; -webkit-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } @-moz-keyframes loop1 { 0% { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes loop1 { 0% { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } @-o-keyframes loop1 { 0% { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes loop1 { 0% { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } @-moz-keyframes loop2 { 0% { -webkit-transform: rotate(40deg); -ms-transform: rotate(40deg); transform: rotate(40deg); } 100% { -webkit-transform: rotate(400deg); -ms-transform: rotate(400deg); transform: rotate(400deg); } } @-webkit-keyframes loop2 { 0% { -webkit-transform: rotate(40deg); -ms-transform: rotate(40deg); transform: rotate(40deg); } 100% { -webkit-transform: rotate(400deg); -ms-transform: rotate(400deg); transform: rotate(400deg); } } @-o-keyframes loop2 { 0% { -webkit-transform: rotate(40deg); -ms-transform: rotate(40deg); transform: rotate(40deg); } 100% { -webkit-transform: rotate(400deg); -ms-transform: rotate(400deg); transform: rotate(400deg); } } @keyframes loop2 { 0% { -webkit-transform: rotate(40deg); -ms-transform: rotate(40deg); transform: rotate(40deg); } 100% { -webkit-transform: rotate(400deg); -ms-transform: rotate(400deg); transform: rotate(400deg); } } @-moz-keyframes loop3 { 0% { -webkit-transform: rotate(80deg); -ms-transform: rotate(80deg); transform: rotate(80deg); } 100% { -webkit-transform: rotate(440deg); -ms-transform: rotate(440deg); transform: rotate(440deg); } } @-webkit-keyframes loop3 { 0% { -webkit-transform: rotate(80deg); -ms-transform: rotate(80deg); transform: rotate(80deg); } 100% { -webkit-transform: rotate(440deg); -ms-transform: rotate(440deg); transform: rotate(440deg); } } @-o-keyframes loop3 { 0% { -webkit-transform: rotate(80deg); -ms-transform: rotate(80deg); transform: rotate(80deg); } 100% { -webkit-transform: rotate(440deg); -ms-transform: rotate(440deg); transform: rotate(440deg); } } @keyframes loop3 { 0% { -webkit-transform: rotate(80deg); -ms-transform: rotate(80deg); transform: rotate(80deg); } 100% { -webkit-transform: rotate(440deg); -ms-transform: rotate(440deg); transform: rotate(440deg); } } @-moz-keyframes loop4 { 0% { -webkit-transform: rotate(-30deg); -ms-transform: rotate(-30deg); transform: rotate(-30deg); } 100% { -webkit-transform: rotate(330deg); -ms-transform: rotate(330deg); transform: rotate(330deg); } } @-webkit-keyframes loop4 { 0% { -webkit-transform: rotate(-30deg); -ms-transform: rotate(-30deg); transform: rotate(-30deg); } 100% { -webkit-transform: rotate(330deg); -ms-transform: rotate(330deg); transform: rotate(330deg); } } @-o-keyframes loop4 { 0% { -webkit-transform: rotate(-30deg); -ms-transform: rotate(-30deg); transform: rotate(-30deg); } 100% { -webkit-transform: rotate(330deg); -ms-transform: rotate(330deg); transform: rotate(330deg); } } @keyframes loop4 { 0% { -webkit-transform: rotate(-30deg); -ms-transform: rotate(-30deg); transform: rotate(-30deg); } 100% { -webkit-transform: rotate(330deg); -ms-transform: rotate(330deg); transform: rotate(330deg); } } @-moz-keyframes ctol { 0% { -webkit-transform: translateX(50%); -ms-transform: translateX(50%); transform: translateX(50%); } 100% { -webkit-transform: none; -ms-transform: none; transform: none; } } @-webkit-keyframes ctol { 0% { -webkit-transform: translateX(50%); -ms-transform: translateX(50%); transform: translateX(50%); } 100% { -webkit-transform: none; -ms-transform: none; transform: none; } } @-o-keyframes ctol { 0% { -webkit-transform: translateX(50%); -ms-transform: translateX(50%); transform: translateX(50%); } 100% { -webkit-transform: none; -ms-transform: none; transform: none; } } @keyframes ctol { 0% { -webkit-transform: translateX(50%); -ms-transform: translateX(50%); transform: translateX(50%); } 100% { -webkit-transform: none; -ms-transform: none; transform: none; } } @-moz-keyframes linescale { 0% { clip-path: ellipse(0 0 at calc(643 / 802 * 100%) calc(420 / 802 * 100%)); } 100% { clip-path: ellipse(100% 100% at calc(643 / 802 * 100%) calc(420 / 802 * 100%)); } } @-webkit-keyframes linescale { 0% { clip-path: ellipse(0 0 at calc(643 / 802 * 100%) calc(420 / 802 * 100%)); } 100% { clip-path: ellipse(100% 100% at calc(643 / 802 * 100%) calc(420 / 802 * 100%)); } } @-o-keyframes linescale { 0% { clip-path: ellipse(0 0 at calc(643 / 802 * 100%) calc(420 / 802 * 100%)); } 100% { clip-path: ellipse(100% 100% at calc(643 / 802 * 100%) calc(420 / 802 * 100%)); } } @keyframes linescale { 0% { clip-path: ellipse(0 0 at calc(643 / 802 * 100%) calc(420 / 802 * 100%)); } 100% { clip-path: ellipse(100% 100% at calc(643 / 802 * 100%) calc(420 / 802 * 100%)); } } @-moz-keyframes dotscalealt { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5); } 100% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } @-webkit-keyframes dotscalealt { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5); } 100% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } @-o-keyframes dotscalealt { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5); } 100% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } @keyframes dotscalealt { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5); } 100% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } @-moz-keyframes fade { 0% { opacity: 0; visibility: hidden; } 100% { opacity: 1; visibility: visible; } } @-webkit-keyframes fade { 0% { opacity: 0; visibility: hidden; } 100% { opacity: 1; visibility: visible; } } @-o-keyframes fade { 0% { opacity: 0; visibility: hidden; } 100% { opacity: 1; visibility: visible; } } @keyframes fade { 0% { opacity: 0; visibility: hidden; } 100% { opacity: 1; visibility: visible; } }