.header{position: relative;top: 0;left: 0;z-index: 10; box-sizing:border-box;padding: 0 5.2%;width: 100%;color: #fff;line-height: 1.5;border-bottom: 1px solid rgba(255,255,255,0.3); transition:.4s all ease;-ms-transition:.4s all ease;-webkit-transition:.4s all ease;} .header .logo{display: block;float: left;height: 3.5vw;/* max-height: 2.3vw; margin-top: 1.815vw;*/ position: absolute;left:4.16%;top: 50%;transform: translateY(-50%);-ms-transform: translateY(-50%);-webkit-transform: translateY(-50%);} .header .logo img{display: block;width: auto;max-height: 100%;} .header .logo .b{display: none;} .MenuList_f1{z-index: 2;max-height: 100%;text-align: right;font-size: 0;display: inline-block;vertical-align: middle;} .MenuList_f1 .stmenu{display: inline-block;margin-right: 1.3vw;position: relative;padding: 2vw 1vw 2vw 1vw;margin-right: 1.5vw; box-sizing:border-box;display: none;} .MenuList_f1 a{display: block;} .MenuList_f1 a span{display: block;font-size: 16px;transition:.1s all ease;text-transform: uppercase;text-align: center;} .MenuList_f1 .stmenu:nth-last-child(1) .child{opacity: 0;} .MenuList_f1 .child{display: none; position: absolute;top: 5.1vw;left: 50%;width: 180px;overflow: hidden;background: rgba(255,255,255,0.7); transform: translate(-50% , 0);-ms-transform: translate(-50% , 0);-webkit-transform: translate(-50% , 0);} .MenuList_f1 .child li a span{display: block;color: #333;padding: 1vw;text-align: center;border-bottom: none;font-size: 16px;text-transform: uppercase;} .MenuList_f1 .stmenu:nth-child(1), .MenuList_f1 .stmenu:nth-child(2), .MenuList_f1 .stmenu:nth-child(3), .MenuList_f1 .stmenu:nth-child(6), .MenuList_f1 .stmenu:nth-child(7), .MenuList_f1 .stmenu:nth-child(8), .MenuList_f1 .stmenu:nth-child(4), .MenuList_f1 .stmenu:nth-child(5) { display: inline-block; } .nav_xl_a {position:absolute;right: 5.2%; cursor:pointer;z-index:999;width: 2.2vw; height: 2.6vw;top: 50%;-webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); background: url(../images/MENU.png) center no-repeat;background-size: contain;} .nav_xl_a span{position: absolute;border-radius: 2px;display: block;background:#feda84;height:2px; width: 0%;right:0; top:50%; margin-left:0;transition:.4s all ease;opacity: 0;} .nav_xl_a .h2 {-webkit-transform:translate3d(0,-10px,0); transform:translate3d(0,-10px,0);width:100%;} .nav_xl_a .h3 {-webkit-transform:translate3d(0,10px,0); transform:translate3d(0,10px,0);} .a1{background: none;} .a1 .h2 {-webkit-transform:rotate3d(0,0,1,45deg); transform:rotate3d(0,0,1,45deg);width: 100%;display: block;opacity: 1;} .a1 .h1 {-webkit-transform:rotate3d(0,0,1,-45deg); transform:rotate3d(0,0,1,-45deg);width: 100%;display: block;opacity: 1;} .a1 .h3,.a1 span:before{width: 0;opacity: 0;} #tophone{padding: 0.3vw 0.7vw 0.3vw 46px;font-weight: bold;border-radius: 1.7vw;background: url(../images/phone.png) rgba(255,255,255,0.24) no-repeat; background-position: 10px center;background-size: auto 30px;margin-right: 1.6vw;font-family: Arial;line-height: 1.5; display: inline-block;vertical-align: middle; } .header>.fr{display: inline-block;padding-right: 36px;box-sizing:border-box;} .header .lang {position: relative;padding-right: 0;margin-right: 30px;display: inline-block;vertical-align: middle;} .header .lang #btnxl{border-bottom: 1px solid #feda84;padding-bottom: 5px;color: #feda84;position: relative;} .header .lang .sllist{display: none;overflow: hidden;position: absolute;border-top: 2vw solid transparent;top: 1.2vw;left: 50%;width: 180px;overflow: hidden;; transform: translate(-50% , 0);-ms-transform: translate(-50% , 0);-webkit-transform: translate(-50% , 0);} .header .lang .sllist a{background: rgba(255,255,255,0.7);color: #333;display: block;font-size: 16px;line-height: 1.0;padding: 10px 0;text-align: center;} .header .lang .sllist a img{display: block;width: 100%;} .header .lang #btnxl:after{content: "";display: block; width: 0;height:0;border-left:5px solid transparent;position: absolute;top: 7px;right: -18px; border-right: 4px solid transparent;border-top: 4px solid #feda84; } .ceng{position: fixed;width: 100%;right: 0;top: 0;background-color: #fff;opacity: 0.8; height: 100%;z-index: 3;display: none;} .footer{color: #c6c6c7;background: rgba(0,0,0,0.7); padding: 1.5vw 8.35%;font-size: 14px;box-sizing: border-box;} #menu.hide{ opacity: 0; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } #menu{position: absolute;right: 0; padding-top: 10vw;opacity: 1; color: #fff;z-index: 5;width: 40%;height: 100%;box-sizing: border-box;background: #eba720; -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); -webkit-transition: all .6s ease; -o-transition: all .6s ease; transition: all .6s ease;} .MenuList_c1 {width: 80%;margin-left: 10%;} .MenuList_c1 .MenuItems>li:nth-child(1){display: none;} .MenuList_c1 .MenuItems>li{display: block;position: relative;} .MenuList_c1 .drop{font-size: 20px;display: block;padding: 2vh 0;} .MenuList_c1 .drop+div{display: none;position: absolute;left: 160px;top: 50%;z-index: 2;border-radius: 6px;padding: 1vw 3vw;background: #fff;transform: translateY(-49%);text-align: center;} .MenuList_c1 .drop+div:after{content: ""; display: block; width: 0; height: 0; border-top: 9px solid transparent; position: absolute; top: 50%; left: -9px; border-bottom: 9px solid transparent; border-right: 9px solid #fff; transform: translateY(-50%);} .MenuList_c1 .drop+div li{margin-bottom: 20px;color: #000;font-size: 18px;} .MenuList_c1 .drop+div li:last-child{margin-bottom: 0;} .MenuList_f1 .stmenu.mlang{display: none;} .MenuList_b1{background: #f4f5f8;border-top: 1px solid #e6ecf1;padding: 2vw 8.35% 4vw 8.35%;font-size: 0;text-align: center;} .MenuList_b1>ul{display: flex;justify-content: space-between;} .MenuList_b1 .stmenu{/* width: 11.8%; */display: inline-block;vertical-align: top;text-align: left;/* margin-right: 5.7vw; */} .MenuList_b1 .stmenu:nth-child(1){display: none;} .MenuList_b1 .stmenu:last-child{width: auto;margin-right: 0;} .MenuList_b1 .stmenu>h3{font-size: 18px;color: #2a2a2a;margin-bottom: 23px;} .MenuList_b1 .child span{font-size: 16px;color: #4a4a4a;} .MenuList_b1 .child li{margin-bottom: 10px;display: block;} .footer{line-height: 1.8;} .footer .fl{width: calc(100% - 220px);} .footer .fr{width: 200px;text-align: right;} .MenuList_c1 .MenuItems>li.cur{color: #513503;} .hbg {width: 100%;z-index: 10; position: absolute;padding-bottom: 2vw; background: linear-gradient(rgba(0,94,176,0.10) ,transparent); background: -ms-linear-gradient(rgba(0,94,176,0.10) ,transparent); background: -webkit-linear-gradient(rgba(0,94,176,0.10) ,transparent); } .whbg .hbg { background: linear-gradient(rgba(0,0,0,0.38) ,transparent); background: -ms-linear-gradient(rgba(0,0,0,0.38) ,transparent); background: -webkit-linear-gradient(rgba(0,0,0,0.38) ,transparent); } .onlineService { position: fixed; right: 3%; bottom: 8%; z-index: 20 } @media (max-width: 768px) { .onlineService { bottom:3% } } .onlineService .box { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-radius: 100px; background-image: linear-gradient(45deg, #550B00, #4B3908, #550B00, #4B3908); background-size: 400% 400%; -webkit-animation: Gradient 7s ease infinite; animation: Gradient 7s ease infinite; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 20px; -webkit-transition-property: all; transition-property: all; -webkit-transition-duration: .2s; transition-duration: .2s; -webkit-transition-timing-function: "ease"; transition-timing-function: "ease"; -webkit-box-shadow: 0 0 10px rgba(9,102,179,0.3); box-shadow: 0 0 10px rgba(9,102,179,0.3) } @media screen and (max-width: 640px) { .onlineService .box { padding-top:8px; padding-bottom: 8px } } @media screen and (max-width: 640px) { .onlineService .box { padding-left:16px; padding-right: 16px } } .onlineService .box .icon { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 26 26' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='fw_icon_zxkf_w' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cpath d='M22.8583388,10.0424653 C22.0133949,5.25416392 17.9292024,1.73333333 13.000088,1.73333333 C8.07077557,1.73333333 3.98673708,5.39502091 3.14163916,10.0424433 C2.29665126,10.7466623 1.73333333,12.0142211 1.73333333,13.281692 C1.73333333,14.9716898 2.71915621,16.9433575 4.26834104,16.9433575 C5.67662486,16.9433575 5.67662486,15.3942167 5.67662486,13.281692 C5.67662486,11.3100242 5.67662486,9.76083938 4.69084599,9.6199824 C5.53576787,5.81750385 8.91587349,3.00080418 13.000088,3.00080418 C17.0841265,3.00080418 20.4642101,5.81750385 21.309176,9.47923543 C20.3233531,9.76086139 20.3233531,11.1691672 20.3233531,13.140813 C20.3233531,14.5364437 20.3233531,15.5170953 20.5973432,16.2198838 C20.5998518,16.2263314 20.6063654,16.2324049 20.6049571,16.2391606 C19.8070169,20.0197437 17.5067195,21.59089 15.2533157,22.1542739 C14.8308548,21.59089 13.9858669,21.1684511 13.000066,21.1684511 C11.5915841,21.1684511 10.4649923,21.872626 10.4649923,22.7175919 C10.4649923,23.5626898 11.5915841,24.2667767 13.000066,24.2667767 C14.4083498,24.2667767 15.5350297,23.5626898 15.5350297,22.7175919 C17.7883454,22.1542739 20.5111918,20.2104651 21.0275501,16.6616216 C21.0266698,16.6676731 21.0363302,16.6701597 21.0409294,16.6742087 C21.1856153,16.8025006 21.4586812,16.8025006 21.731659,16.8025006 C23.2808218,16.8025006 24.2666667,14.8308108 24.2666667,13.140791 C24.2666667,12.0142211 23.7033267,10.7466623 22.8583388,10.0424653 L22.8583388,10.0424653 Z' id='path' stroke='%23FFFFFF' stroke-width='0.5' fill='%23FFFFFF' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; height: 1.8vw; width: 1.8vw; min-width: 15px; min-height: 15px } .onlineService .box .title { font-size: 16px; overflow: hidden; white-space: nowrap; color: #fff } @media (max-width: 990px) { .onlineService .box .title { font-size:14.4px } } @media (max-width: 768px) { .onlineService .box .title { font-size:12.8px } } .header.act{background: rgba(0,94,176,0.7);} .header .logo .c{display: none;} .index .header .logo .c{display: block;} .index .header .logo .w{display: none;} .index .hbg{position: static;background: none;padding: 0;} .index .header,.index .header.act{background: none;position: fixed;color: #4a1003;} .index .lang #btnxl{color: #4a1003;border-color: #4a1003;} .index .lang #btnxl:after{border-top-color: #4a1003;} .index .nav_xl_a span{background-color: #4a1003;} .index #tophone{color: #000;} .index .nav_xl_a{background-image: url(../images/MENU2.png);} .index .nav_xl_a.a1{background: none;} @media screen and (min-width: 1250px){ .MenuList_f1 a:hover,.MenuList_c1 a:hover{color: #f8cd46;} .MenuList_f1 a:hover span,.MenuList_f1 .on .drop span{color: #f8cd46;} .MenuList_f1 .child li a:hover span{background-color: #f8cd46;} .MenuList_b1 .child li a:hover span{color: #f8cd46;} .MenuList_f1 .on {border-bottom: 1px solid #feda84;} .fp-viewing-0 .MenuList_f1 a:hover span,.fp-viewing-0 .MenuList_f1 .on .drop span{color: #fff;} .fp-viewing-0 .MenuList_f1 .on {border-color: #fff;} } @media screen and (max-width: 1440px){ .MenuList_c1 .drop{font-size: 16px;} .MenuList_f1 a span{font-size: 16px;} .MenuList_f1 .stmenu{margin-right: 1vw;} .MenuList_b1 .stmenu:nth-child(9),.MenuList_b1 .stmenu:nth-child(2){display: none;} .MenuList_b1 .child span{font-size: 14px;} .MenuList_b1 .stmenu>h3{font-size: 16px;} } @media screen and (max-width: 1250px){ .MenuList_f1 .stmenu{margin-right: 0;} .MenuList_f1 a span{font-size: 14px;} } @media screen and (max-width: 1170px){ .header .logo{height: 50px;} .header{padding: 15px 5.2%;} #tophone{background-size: 30px auto;font-weight: normal;padding-left: 45px; background-position: 12px center;line-height: 1.4; border-radius: 20px;} .MenuList_f1{display: none;} .MenuList_c1 .drop{font-size: 18px;padding: 1vh 0;} #menu{padding-top: 120px;width: 50%;} .footer{padding: 1.5vw 5.2%;} .MenuList_c1 .MenuItems>li{position: static;} .MenuList_c1 .drop+div{position: fixed;transform: translate(100%, 0);background: #eba720;padding: 0;border-radius: 0;top: 0;left: auto; right: 0;width: 55%;height: 100%;display: block;opacity: 0;padding-top: 130px; -webkit-transition: all .6s ease; -o-transition: all .6s ease; transition: all .6s ease;} .MenuList_c1 .on .drop+div{opacity: 1;transform: translate(0, 0);} .MenuList_c1 .drop+div:after{display: none;} .MenuList_c1 .drop+div li{color: #fff;} } @media screen and (max-width: 1024px){ #menu.hide{display: none;} .MenuList_b1{display: none;} } @media screen and (max-width: 640px){ .header .lang .sllist a{font-size: 4vw;} .nav_xl_a{display: block;width: 10vw;height: 9vw;} .hbg{position: fixed;} .header>.fr{padding-right: 16.8vw} .header .lang .sllist{top: 11vw;width: 140px;} .header{padding: 4.16vw 4.16%;border: none;height: 19.3vw;} .header .logo{height: 9.4vw;max-height: 100%;margin: 0; max-width: 50%;top: 4.8vw;-webkit-transform: none; -ms-transform: none; -o-transform: none; transform: none;} .header .MenuList_f1,#tophone{display: none;} .MenuList_c1 .drop{font-size: 4.2vw;font-weight: normal;padding: 0.5em 0;} .footer{line-height: 1.8;font-size: 3.4vw;padding: 3.5vw 3%;text-align: center;} .index .footer,.aijia .footer{margin-top: 0;} .footer .fl,.footer .fr{float: none;text-align: center;width: auto;display: inline;} .hbg.mobact{background: #eba720;} .MenuList_c1{width: 100%;margin: 0 auto;} #menu{position: fixed; top: 0;width: 100%;height: auto;padding: 20vw 5vw 6vw 5vw;box-sizing: border-box;overflow: hidden;display: block; transition:0.1s all ease;-ms-transition:0.1s all ease;-webkit-transition:0.1s all ease;color: #4a1003;background: rgba(250,190,0,0.95);} .MenuList_c1 .MenuItems>li.cur{color: #ffec80;} .MenuList_c1 .MenuItems>li:nth-child(1){display: block;} #menu.hide{ -webkit-transform: none; -ms-transform: none; -o-transform: none; transform: none; display: block; visibility: hidden; } #menu.hide .MenuItems>li{ -webkit-transform: translateX(-100px); -ms-transform: translateX(-100px); -o-transform: translateX(-100px); transform: translateX(-100px); opacity: 0; } #menu.hide .MenuItems>li:nth-child(2n+1) { -webkit-transform: translateX(100px); -ms-transform: translateX(100px); -o-transform: translateX(100px); transform: translateX(100px); } #menu .MenuItems>li{ -webkit-transform: none; -ms-transform: none; -o-transform: none; transform: none; transition:.8s all ease;-ms-transition:.8s all ease;-webkit-transition:.8s all ease; opacity: 1; } .MenuItems li a{height: auto;line-height: 1.5;font-size: 4vw;padding: 1vw 3.5vw;} .MenuItems>li.fa>a{position: relative;} .MenuItems>li.fa>a:after{content: "";display: block; width: 2vw;height: 2vw;border-top: 1px solid #fff;border-right: 1px solid #fff; position: absolute;right: 4vw;top: 50%;-webkit-transform: translateY(-50%) rotate(45deg); -ms-transform: translateY(-50%) rotate(45deg); -o-transform: translateY(-50%) rotate(45deg); transform: translateY(-50%) rotate(45deg);} .MenuItems>li.fa.on>a:after{ -webkit-transform: translateY(-50%) rotate(90deg); -ms-transform: translateY(-50%) rotate(90deg); -o-transform: translateY(-50%) rotate(90deg); transform: translateY(-50%) rotate(90deg); } /* .MenuList_c1 .drop+div li{float: left;min-width: 25%;margin: 0;} .MenuList_c1 .drop+div li a{padding: 2vw;line-height: 1.5;display: block;} .MenuList_c1 .drop+div{display: none;width: 100%; padding: 0; position: static;-webkit-transform: none; -ms-transform: none; -o-transform: none; transform: none;} .MenuItems>li.on .drop+div{display: block;} */ }