/* @charset "utf-8"; */ @font-face { font-family: "DidotLTStd-Bold"; src: url('../fonts/DidotLTStd-Bold.woff2') format('woff2'), url('../fonts//DidotLTStd-Bold.woff') format('woff'), url('../fonts/DidotLTStd-Bold.ttf') format('ttf'); font-weight: normal; font-style: normal; } .mobile_bg { width: 100%; height: 100%; z-index: 90; position: fixed; top: 0; left: 0; background: rgba(0, 0, 0, 0.6); display: none; } .gp-menu { width: 100%; z-index: 12098; position: relative; display: none; } .gp-menu-header { position: absolute; top: 10px; right: 0; z-index: 996; width: 10%; display: none; } .gp-menu-link { float: left; line-height: 40px; height: 40px; padding-left: 15px; } .gp-menu-link a { color: #fff; } .gp-menu-header-icon { color: #821b1e; height: 24px; font-size: 25px; text-align: center; /* float: right; */ width: 32px; position: relative; -webkit-transition: background 0.5s; -moz-transition: background 0.5s; -o-transition: background 0.5s; transition: background 0.5s; /* margin-right: 5px; */ cursor: pointer; } .gp-menu-header-icon span { position: absolute; left: calc((100% - 25px) / 2); top: calc((100% - 2px) / 3); width: 27px; height: 3px; background-color: #065895; } .gp-menu-header-icon-out span { width: 28px; height: 2px; background-color: #fff; display: block; border-radius: 0px; } .gp-menu-header-icon-out span:nth-child(1) { animation-duration: 0.5s; animation-fill-mode: both; animation-name: outfirst; } .gp-menu-header-icon-out span:nth-child(2) { animation-duration: 0.5s; animation-fill-mode: both; animation-name: outsecond; } .gp-menu-header-icon-out span:nth-child(3) { animation-duration: 0.5s; animation-fill-mode: both; animation-name: outthird; } .gp-menu-header-icon span:nth-child(1) { transform: translateY(9px) rotate(0deg); } .gp-menu-header-icon span:nth-child(2) { transform: translateY(0px) rotate(0deg); } .gp-menu-header-icon span:nth-child(3) { transform: translateY(-9px) rotate(0deg); } @keyframes outfirst { 0% { transform: translateY(0) rotate(-45deg); } 100% { transform: translateY(-4px) rotate(0deg); } } @keyframes outsecond { 0% { transform: translateY(0) rotate(45deg); } 100% { transform: translateY(4px) rotate(0deg); } } @keyframes outthird { 0% { transform: translateY(0) rotate(90deg); } 100% { transform: translateY(12px) rotate(0deg); } } .gp-menu-header-icon-click span { background-color: #fff; top: calc((100% - 2px) / 2.1); } .gp-menu-header-icon-click span:nth-child(1) { animation-duration: 0.5s; animation-fill-mode: both; animation-name: clickfirst; } .gp-menu-header-icon-click span:nth-child(2) { animation-duration: 0.5s; animation-fill-mode: both; animation-name: clicksecond; } .gp-menu-header-icon-click span:nth-child(3) { animation-duration: 0.5s; animation-fill-mode: both; animation-name: clickthird; } @keyframes clickfirst { 0% { transform: translateY(4px) rotate(0deg); } 100% { transform: translateY(0) rotate(45deg); } } @keyframes clicksecond { 0% { transform: translateY(-4px) rotate(0deg); } 100% { transform: translateY(0) rotate(-45deg); } } @keyframes clickthird { 0% { opacity: 0 } 100% { opacity: 0 } } .gp-menu-nav { width: 100%; position: fixed; top: 0; right: 0px; padding-top: 89px; padding-bottom: 20px; background: #93171f; display: none !important; } .gp-menu-nav>ul { width: 100%; } .gp-menu-nav>ul li { -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: returnToNormal; animation-name: returnToNormal; } .gp-menu-nav>ul.gp-avg-1>li:nth-child(1) { border-top: 1px solid rgba(255, 255, 255, 0.3); } .gp-menu-nav>ul.gp-avg-1>li { position: relative; border-bottom: 1px solid rgba(255, 255, 255, 0.3); } .gp-menu-nav>ul.gp-avg-1>li>a { display: inline-block; padding: 15px 0 15px 25px; font-size: 1.8rem; } .gp-menu-nav>ul>li>ul { background: rgba(0, 0, 0, 0.1); padding: 0 25px } .gp-menu-nav>ul>li>ul a { display: inline-block; padding: 10px 0; /* font-size: 2.4rem; */ } .gp-menu-arrow { cursor: pointer; width: 30px; height: 47px; line-height: 47px; color: #fff; text-align: center; position: absolute; right: 0; top: 0; /* font-size: 2.8rem; */ margin-right: 10px; transition: all 0.3s ease-in-out; } .gp-menu-arrow img { display: inline-block; width: 8px; margin: 0 auto; } .gp-menu-nav>ul>li.on .gp-menu-arrow { transform: rotate(-90deg); } .gp-menu-nav li ul { display: none; } .gp-menu-nav a { color: #fff; } .open .gp-menu-link { display: none; } .open .gp-menu-header { background: none; } @-webkit-keyframes returnToNormal { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes returnToNormal { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .bg-black span { background: #c7000a; } .gp-menu-nav.gp-menu-dropdown2 { background: #F5F5F5; } .gp-menu-nav.gp-menu-dropdown2>ul { position: relative; } .gp-menu-nav.gp-menu-dropdown2>ul>li { border-bottom: none; position: static; } .gp-menu-nav.gp-menu-dropdown2>ul>li>a { padding: 0; display: block; text-align: center; height: 50px; line-height: 50px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; margin: 0 5px; position: relative; z-index: 900; color: #333; } .gp-menu-nav.gp-menu-dropdown2>ul>li>a.icon-down:after { content: "\e73a"; font-size: 1.4rem; margin-left: 5px; transition: all 0.3s; display: inline-block; } .gp-menu-nav.gp-menu-dropdown2>ul>li>a.icon-down:before { content: ''; content: ''; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid #000; position: absolute; left: 50%; bottom: -100%; margin-left: -5px; opacity: 0.2; transition: all 0.3s; } .gp-menu-nav.gp-menu-dropdown2>ul>li.on>a.icon-down:before { bottom: 0; } .gp-menu-nav.gp-menu-dropdown2>ul>li>ul { position: absolute; left: 0; width: 100%; z-index: 1000; background: #fff; box-shadow: 0 0 3px rgba(0, 0, 0, .15); right: 5px; padding: 8px 0; text-align: center; } .gp-menu-nav.gp-menu-dropdown2>ul>li>ul a { color: #666 } .gp-menu-nav.gp-menu-dropdown2>ul li { -webkit-animation-fill-mode: none; animation-fill-mode: none } .gp-menu-nav.gp-menu-dropdown2>ul>li.on>a.icon-down:after { transform: rotate(180deg); } .gp-menu-nav.gp-menu-offcanvas1 { position: fixed; display: block; transform: translate(-150%, 0); transition: all 1s ease-in-out; width: 85%; right: auto; left: 0 } .open .gp-menu-offcanvas1 { transform: translate(0, 0); position: absolute; } .gp-menu-nav.gp-menu-offcanvas2 { position: fixed; display: block; transform: translate(150%, 0); transition: all 1s ease-in-out; width: 100%; } .open .gp-menu-offcanvas2 { transform: translate(0, 0); position: absolute; } .gp-search { width: 160px; overflow: hidden; display: inline-block; * display: inline; * zoom: 1; height: 44px; vertical-align: top; background: rgba(0, 0, 0, .1); border-radius: 44px; } .search { /* text-align: right; */ margin-bottom: 15px; } .gp-ser { width: 100%; height: 44px; z-index: 9999994; margin: 0 auto; position: relative; } .gp-search button { position: absolute; height: 44px; line-height: 44px; border: none; background: none; top: 0px; overflow: hidden; } .gp-search input { height: 44px; line-height: 44px; border: none; } .gp-search button { position: absolute; height: 44px; border: none; background: #153261; border-radius: 50%; top: 0px; overflow: hidden; } .gp-search input.notxt { color: rgba(255, 255, 255, .5); width: 100px; background: none; position: absolute; left: auto; right: 0; padding: 0 20px; box-sizing: border-box; outline: none; } .gp-search .notxt1 { position: absolute; /* width: calc(100% - 20px); */ padding: 0 20px; box-sizing: border-box; height: 44px; line-height: 44px; left: 0; top: 0; cursor: pointer; color: #fff; background: none; } .gp-search .notxt1::after { content: ''; display: block; width: 2px; height: 19px; position: absolute; background: rgba(255, 255, 255, .14); right: 0; top: 50%; transform: translateY(-50%); } .nav ul li:hover .subNav { -webkit-animation-name: zoomIn; animation-name: zoomIn; animation-duration: 0.6s; -webkit-animation-duration: 0.6s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; visibility: visible !important; display: block; } .fadeInUpSmall { -webkit-animation-name: fadeInUpSmall; animation-name: fadeInUpSmall; animation-duration: 0.4s; -webkit-animation-duration: 0.4s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; visibility: visible !important; } .zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn; animation-duration: 0.5s; -webkit-animation-duration: 0.5s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; visibility: visible !important; display: block; } @-webkit-keyframes zoomIn { from { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } @keyframes fadeInUpSmall { 0% { opacity: 0; -webkit-transform: translate3d(0, 20px, 0); -ms-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } 100% { opacity: 1; -webkit-transform: none; -ms-transform: none; transform: none; } } @keyframes flipInY { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } .link{ margin-right: 20px; } .link a,.link span{ font-size: 14px; display: inline-block; vertical-align: middle; line-height: 44px; } .link span{width: 1px;height: 16px;background: #fff;margin: 0 5px;} .nav { position: absolute; z-index: 60; bottom: -25px; width: 66%; right: 0; /* margin-top: 15px; */ } .nav li { /* display: block; */ /* text-align: center; */ position: relative; } .subNav { width: 150px; position: absolute; padding-bottom: 4px; left: calc(50% - 75px); top: 46px; display: none; padding: 10px 0; box-sizing: border-box; background: rgba(147, 23, 31, 1); background: -o-linear-gradient(bottom, rgba(147, 23, 31, 1), rgba(147, 23, 31, 0.5)); background: -moz-linear-gradient(bottom, rgba(147, 23, 31, 1), rgba(147, 23, 31, 0.5)); background: linear-gradient(to bottom, rgba(147, 23, 31, 1), rgba(147, 23, 31, 0.5)); z-index: 100; } .subNav dd:hover { background: rgba(147, 23, 31, 1); } .subNav dd:hover a { color: #fff } .subNav dd { padding: 8px 10px; text-align: center; } .subNav a { font-size: 15px; line-height: 20px; display: block; color: #fff; display: block; /* margin: 0px 12%; */ } .nav li:hover .subNav { -webkit-animation-name: flipInY; animation-name: flipInY; animation-duration: 0.6s; -webkit-animation-duration: 0.6s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; visibility: visible !important; display: block; } .header .gp-container { position: relative; } .logo { display: inline-block; float: left; } .logo1 { display: inline-block; max-width: 347px; overflow: hidden; vertical-align: middle; } /* nav */ .nav1 { display: flex; position: relative; justify-content: space-between; align-items: center; flex-wrap: wrap; font-size: 0; } .nav ul li { /* display: inline-block; */ position: relative } .nav ul li>a { font-size: 1.8rem; display: block; /* width: 100%; */ line-height: 26px; padding-bottom: 20px; box-sizing: border-box; position: relative; } .nav ul li>a::before { content: ''; display: block; width: 0px; height: 4px; background: #fff; position: absolute; left: 50%; bottom: 4px; transition: all .3s ease-in-out; } .nav ul li.on a::before { left: 0; width: 100%; } .nav ul li.on .subNav { display: block; } .nav ul li.on .subNav dl { overflow: hidden; } .nav ul li.on .subNav dl dd { height: auto; line-height: 20px; text-align: left; } .nav ul li.on .subNav dl dd a { display: block; line-height: 22px; font-size: 14px; font-weight: normal; color: #fff; padding: 8px 10px 8px 10px; } .nav ul li.on .subNav dl dd:hover { color: #fff; background-color: #8c0000; } .subNav dd:hover a { font-weight: bold; } #gp-serBtn4 { position: relative; z-index: 801; } .gp-search4 { height: 0; border: none; width: 100% !important; overflow: hidden; position: fixed !important; top: 50%; z-index: 802; left: 0; margin: 0; } .gp-search4 .gp-ser { max-width: 800px; } .gp-search4 input, .gp-search4 button { height: 40px; line-break: 40px; } .gp-search4 .gp-ser { height: 40px; border: 1px solid #ccc; margin-top: 20px; } .gp-search4 .notxt1 { background: #004EA2; position: absolute; width: 25% !important; height: 100% !important; right: 0; cursor: pointer; color: #fff !important; } .gp-search4 .gp-ser { display: none; border: none; background: #fff; } .gp-search4.active .gp-ser { display: block; } .gp-search4.active { height: 80px; } .searchActive .gp-overlay { top: 0; } .gp-serBtn2 { width: 26px; height: 26px; /* background: url(../images/serBtn.png) no-repeat; */ position: absolute !important; right: 0px; top: 50%; transform: translateY(-50%); } .header { padding: 30px 0; box-sizing: border-box; text-align: center; background: #93171f; align-items: center; } .gp-container2 { width: 83%; margin: 0 auto; position: relative; } .heaed-top { overflow: hidden; } .sx { display: inline-block; max-width: 277px; overflow: hidden; position: absolute; right: 30%; top: 0; } /* footer */ footer { position: relative; /* overflow: hidden; */ } footer::before { content: ''; display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: url(../images/footer.png) no-repeat; background-size: cover; } .footer { padding: 70px 0 100px; box-sizing: border-box; overflow: hidden; position: relative; z-index: 5; } .footerl { text-align: left; display: inline-block; vertical-align: top; } .footerr { text-align: right; display: inline-block; vertical-align: top; } .footerlogo { display: inline-block; max-width: 246px; } .footermiddle { margin: 15px 0 20px; } .footermiddle p span { font-size: 12px; color: #fff; line-height: 22px; display: block; text-align: left; } .footermiddle p span:nth-child(2) {} .footerbottom p span { font-size: 12px; color: rgba(255, 255, 255, .5); line-height: 22px; display: block; text-align: left; } .footerbottom p span:nth-child(2) {} .ewmul { margin: 0 -10px; overflow: hidden; display: inline-block; /* width: 50%; */ } .ewmul li { margin-bottom: 20px; display: inline-block; } .ewmbox { padding-bottom: 100%; } .ewmul a { display: block; margin: 0 10px; } .ewms { width: 130px; height: 130px; padding: 0; box-sizing: border-box; margin: 0 auto; background: #fff; } .ewms .ewmbox.gp-img-responsive img{left: 0;top: 0;transform: translate(0%, 0%);} .ewms .ewmbox.gp-img-responsive img:hover{ transform: cale(1) translate(0%, 0%) !important; } .ewmtxt { padding-top: 10px; box-sizing: border-box; line-height: 30px; text-align: center; } .footeradd h2 { margin-bottom: 34px; text-align: left; margin-top: 15px; } .addfooterul{ display: flex; flex-wrap: wrap; margin: 0 -5px; } .addfooterul li { width: 50%; margin-bottom: 10px; text-align: left; font-size: 14px; opacity: .7; } .addfooterul li a { display: block; padding-left: 30px; box-sizing: border-box; position: relative; margin: 0 5px; } .footeradd{ display: inline-block; width: 25%; vertical-align: top; } .addfooterul li a::before { content: ''; display: block; width: 15px; height: 15px; background: url(../images/link.svg) no-repeat; position: absolute; background-size: contain; left: 0; top: 3px; }.addfooterul2 li a::before{ background: url(../images/zy.svg) no-repeat; background-size: contain; } .footcon {display: flex;justify-content: space-between;} @media screen and (max-width: 1500px) { .gp-container2 { width: 93% !important; } } @media screen and (max-width: 1301px) { .gp-container { width: 1200px !important; } .logo1 { max-width: 250px; } .nav { bottom: -32px; width: 75%; /* right: 4.3%; */ } .nav ul li>a { font-size: 1.8rem; padding-bottom: 12px; } .subNav { top: 38px; } .sx { max-width: 210px; right: 36%; } } @media screen and (max-width: 1201px) { .gp-container { width: 1000px !important; } } @media screen and (max-width: 1100px) { .gp-container { width: 900px !important; } .sx { right: 40%; } .footeradd{ width: 23%; } .addfooterul { margin:0 -5px } .addfooterul li a{margin:0 5px} .nav {width: 77%;} .footerlogo { max-width: 200px; } .footerl{ width: 21%; } .footerr{} .ewmul{ margin: 0 -5px; } .ewmul a{ margin: 0 5px; } } @media screen and (max-width:1024px) { .footerr { text-align: left; } } @media screen and (max-width:997px) { .gp-container { width: auto !important; margin: 0 15px; } .link{ display: none; } .mlink{ display: inline-block; } .footerl{ width: 50%; } .search, .nav { display: none !important; } .gp-menu, .gp-menu-nav { display: block !important; } .gp-menu-header { width: 32px; top: 32px; right: 20px; display: block; } .header { padding: 20px 0; } .sx { max-width: 210px; right: 10%; top: 12px; } .search2 { display: inline-block !important; margin: 20px; vertical-align: middle; } .gp-search { width: 160px; } .gp-container2 { width: auto; margin: 0 15px; } } @media screen and (max-width:880px) { .footer { padding: 35px 0 50px; } .footcon { display: block; font-size: 0; text-align: left; } .footerl { text-align: left; margin-bottom: 20px; display: block; } .footerr { display: block; text-align: center !important; float: right; vertical-align: top; position: absolute; right: 0; top: 35px; } .footeradd { width: 50%; display: inline-block; vertical-align: top; /* text-align: left; */ } .footeradd h2 { margin-bottom: 20px; text-align: left; } .footeradd a { display: block; padding-right: 20px; box-sizing: border-box; text-align: left; } } @media screen and (max-width:768px) { .gp-container { width: auto !important; margin: 0 15px; } .footer { padding: 35px 0 50px; } .sx { max-width: 130px; } } @media screen and (max-width:630px) { .footeradd{ width:100% } .footeradd ul { margin: 0 -5px; overflow: hidden; } .footerl { width: 100%; } .footeradd { width: 100%; display: inline-block; } .footeradd:nth-child(1){ } .footeradd a { padding: 0; margin: 0 10px; text-align: left; } .ewmul { display: block; margin: 0 auto; } .footerr { width: 100%; margin: 20px 0; position: static; } } @media screen and (max-width:479px) { .gp-menu-header { top: 20px; transform: scale(.8); } .gp-menu-nav { padding-top: 80px; } .header { padding: 10px 0; } .footerl{ width:100% } .sx { display: none; } .footerlogo, .footermiddle, .footerbottom { margin: 0 auto; } .footermiddle, .footerbottom { /* width: 50%; */ } .footerbottom p span:nth-child(2) { margin: 0 !important; } .footerlogo { max-width: 220px; } } @media screen and (max-width:470px) { .footer span { display: block !important; margin: 0 !important; } } @media screen and (max-width:414px) { .gp-menu-header { top: 21px; transform: scale(.8); } } @media screen and (max-width:400px) { .search2,.mlink{ display: block !important; } .mlink{ margin-left: 20px; } .search2{margin-bottom:0;} .gp-menu-header { top: 22px; right: 8px; transform: scale(.8); } .footerlogo, .footermiddle, .footerbottom { margin-left: 0; width: auto; } } @media screen and (max-width:320px) { .gp-search { width: 80%; } .logo1 { max-width: 75%; float: left; } }