/* header start */ body{padding: 19rem 0 0;background: url(../images/bg.png) no-repeat right top/60rem auto, url(../images/bg2.png) no-repeat -18rem 52rem/133.4rem auto, url(../images/bg3.png) no-repeat left 76.6rem/100% auto #efebea;} .header{width:100%;min-width:30rem;z-index:12;top: 0;position: absolute;width: 100%;left: 0;top: 0;} /* .header::before{content: '';display: block;position: absolute;left: 0;right: 0;top: 0;background: linear-gradient(180.00deg, rgba(0, 0, 0, 1),rgba(0, 0, 0, 0));height: 20rem;pointer-events: none;z-index: 2;} */ .header .gp-container{align-items: center;padding-top: 4rem;padding-bottom: 2rem;} .header .ser{position: absolute;width: 25rem;height: 4rem;top: 5.5rem;right: 0;display: none;} .header .ser_btn.on .ser{display: block;} .header .search{background: #fff;border-radius: 5rem;box-shadow: 0 0 ;} .header .search .notxt1{background: #9a0000 url(../images/ser2.png) no-repeat center/2.2rem auto;height: 3.6rem;top: .2rem;right: .2rem;width: 3.6rem;border-radius: 5rem;} .header .search .notxt{color: #000;} .header .search .notxt::placeholder{color: #666;} .logo{width: 34.7rem;width: 31rem;} .header_lf{background: #fff;border-radius: 5rem;padding: 0 1.2rem;width: 128.5rem;align-items: center;} .top_links{position: relative;text-align: center;height: 5rem;line-height: 5rem;z-index: 10;display: flex; align-items: center;justify-content: flex-end;} .top_links a{position: relative;display: block;margin: 0 0 0 2rem;color: #9a0000;width: 5rem;height: 5rem;flex-shrink: 0;text-align: center;border-radius: 50%;cursor: pointer;} .top_links a.ch{background: url(../images/ch.png) no-repeat center/100%;} .top_links a > .ico{width: 100%;height: 100%;} .top_links a.ser_btn{background: #fff url(../images/ser.png) no-repeat center/2.2rem auto;} .nav{position:relative;width: 74.6rem;margin: 0 2.6rem 0 0;} .nav ul{display: flex;align-items: flex-start;justify-content: space-between;} .nav li{margin: 0;line-height: 3rem;height: 8.5rem;display: flex;align-items: center;} .nav li > a{color: #000;} .nav li > a.cur,.nav li > a:hover{color: #9a0000;} .nav .sub_nav{position:absolute;left: 50%;top: 100%;display:none;transform: translateX(-50%);background: #fff;padding: .5rem 3.5rem;border-radius: 2.2rem;margin: 1.1rem 0 0;} .nav li.on .sub_nav{display: block;} .nav .sub_nav dl{margin: 0 0 0;position: relative;white-space: nowrap;display: flex;} .nav .sub_nav dd{flex-shrink: 0;} .nav .sub_nav a{display:block;line-height: 1.5em;position: relative;padding: 2rem 0;text-align: center;margin: 0 2rem;color: #282828;} .nav .sub_nav a:hover,.nav .sub_nav a.cur{color: #9a0000;} /* .nav ul li:hover .sub_nav{display: block;} */ .nav ul li.on .sub_nav{-webkit-animation-name:flipInY;animation-name:flipInY;animation-duration:.6s;-webkit-animation-duration:.6s;animation-timing-function:ease-in-out;-webkit-animation-timing-function:ease-in-out;visibility:visible!important;display:block} @keyframes flipInY{ /* from{-webkit-transform:perspective(40rem) rotate3d(0,1,0,90deg);transform:perspective(40rem) rotate3d(0,1,0,90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0} 40%{-webkit-transform:perspective(40rem) rotate3d(0,1,0,-20deg);transform:perspective(40rem) rotate3d(0,1,0,-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in} 60%{-webkit-transform:perspective(40rem) rotate3d(0,1,0,10deg);transform:perspective(40rem) rotate3d(0,1,0,10deg);opacity:1} 80%{-webkit-transform:perspective(40rem) rotate3d(0,1,0,-5deg);transform:perspective(40rem) rotate3d(0,1,0,-5deg)} to{-webkit-transform:perspective(40rem);transform:perspective(40rem)} */ from{opacity: 0;} to{opacity: 1;} } /* .header.currents{position: fixed;} .header::before{background: linear-gradient(180.00deg, rgba(177, 4, 14, .8) ,rgba(177, 4, 14, 0));} */ .header.currents{} @media screen and (max-width:1640px){ } @media screen and (max-width:1280px){ } @media screen and (max-width:996px){ body{padding: 0;} .header{position: relative;height: auto;} .header.currents{display:none!important} .nav, .top_link,.wrap_nav,.top_links{display:none} .header::before{display: none;} .header .gp-container{padding-top: 2rem;padding-bottom: 2rem;} .header{background: #fff;} .header .logo .l1{display: none;} .header .logo .l2{display: block;} .logo{padding: 0;} } @media screen and (max-width:767px){ .logo{overflow:hidden;width:220px;max-width:100%;text-align:center;position:relative;} } /* header end */ /* mob_nav */ @media screen and (max-width:996px){ .mobile_header{position: absolute;z-index: 1000;top: 0;width: 100%;} .mob_nav_btn{height:38px;text-align:left;width:38px;z-index: 1000;position:absolute;cursor:pointer;margin-right:0;font-weight:700;text-align:right;right:20px;top:12px;-webkit-transition:background .5s;-moz-transition:background .5s;-o-transition:background .5s;transition:background .5s;background: #b1040e;border-radius: 50%;} .mob_nav_btn.on{/*background-image:url(../images/m_nav2.png);*//* right:20px; *//* top:20px; */ position: fixed;} .mob_nav_btn span{position:absolute;left:calc((100% - 22px)/ 2);top:calc((100% - 1px)/ 2);width:22px;height:2px;background-color:#fff;animation-duration:.5s;animation-fill-mode:both;} .mob_nav_btn.on span{/* background: #b1040e; */} .mob_nav_btn span:nth-child(1){transform:translateY(4px) rotate(0);animation-name:outfirst} .mob_nav_btn span:nth-child(2){transform:translateY(-4px) rotate(0);animation-name:outsecond} .mob_nav_btn span:nth-child(3){transform:translateY(-4px) rotate(0);animation-name:outthird} @keyframes outfirst{ 0%{transform:translateY(0) rotate(-45deg)} 100%{transform:translateY(-8px) rotate(0)} } @keyframes outsecond{ 0%{transform:translateY(0) rotate(45deg)} 100%{transform:translateY(0px) rotate(0)} } @keyframes outthird{ 0%{transform:translateY(0) rotate(90deg)} 100%{transform:translateY(8px) rotate(0)} } .mob_nav_btn.on span:nth-child(1){animation-name:clickfirst} .mob_nav_btn.on span:nth-child(2){animation-name:clicksecond} .mob_nav_btn.on span:nth-child(3){animation-name:clickthird} @keyframes clickfirst{ 0%{transform:translateY(4px) rotate(0)} 100%{transform:translateY(0) rotate(45deg)} } @keyframes clicksecond{ 0%{transform:translateY(-4px) rotate(0)} 100%{transform:translateY(0) rotate(-45deg)} } @keyframes clickthird{ 0%{opacity:0} 100%{opacity:0} } .mobile_header_cover{display:block;position:fixed;left:0;right:0;top:0;bottom:100%;background:rgba(0,0,0,.7);z-index:9;transition:all ease-in-out .2s;-ms-transition:all ease-in-out .2s;-moz-transition:all ease-in-out .2s;-webkit-transition:all ease-in-out .2s;-o-transition:all ease-in-out .2s} .mobile_header_cover.on{bottom:0} .mobile-header{max-width:90%;position: fixed;top: 0;right:0;z-index:995;overflow:auto;overflow-x: hidden; background:#fff;display:none;width:392px;border-left:8px solid #b1040e;height: 100vh;} .mobile-header.on{animation-duration:.5s;animation-fill-mode:both;animation-name:y_scale;display:block} .mobile-nav{width:100%;padding-top: 50px;} .mobile-nav li{position:relative;padding:0 0;border-bottom:1px solid #f2f2f2} .mobile-nav li a{display:block;line-height: 25px;text-decoration:none;font-size:18px;-webkit-transition:all .5s;-moz-transition:all .5s;-o-transition:all .5s;transition:all .5s;padding:13px 60px 12px 30px;} .mobile-nav dd a{-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-name:returnToNormal;animation-name:returnToNormal} @-webkit-keyframes returnToNormal{ from{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)} to{opacity:1;-webkit-transform:none;transform:none} } @keyframes returnToNormal{ from{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)} to{opacity:1;-webkit-transform:none;transform:none} } .mobile_sub_nav{padding:0 22px 0 8px;background: #f3f3f3;overflow:hidden;} .mobile-nav dd a{/* height:35px; */line-height: 22px;border-top: 1px solid rgba(135,135,135,.1);font-size:16px;padding-left: 40px;position:relative;} .mobile-nav dd:first-child a{border-top:0} .mobile-nav dd a::before{content:'';display:block;position:absolute;left:50%;right:50%;top:0;bottom:0;background:#b1040e;transition:all ease-in-out .3s;-ms-transition:all ease-in-out .3s;-moz-transition:all ease-in-out .3s;-webkit-transition:all ease-in-out .3s;-o-transition:all ease-in-out .3s;z-index:-1} .mobile-nav dd:hover a{color:#fff} .mobile-nav dd:hover a::before{left:-30px;right:-30px} .mobile-nav .arrow{color:#666;position:absolute;right:0;top: 2px;font-size:15px;cursor:pointer;width:45px;height:45px;text-align:center;line-height:45px;-webkit-transition:all .5s;-moz-transition:all .5s;-o-transition:all .5s;transition:all .5s;/*background:url(../images/mobile_arrow1.png) center no-repeat;*/ } .mobile-nav .on .arrow{/*background-image:url(../images/mobile_arrow2.png)*/transform: rotate(90deg); } .mobile_sub_nav{display:none} /* li.on .mobile_sub_nav{display:block} */ .mobile_search{height:56px;z-index:600;overflow:hidden;position:relative;transition:all ease-in-out .3s;-ms-transition:all ease-in-out .3s;-moz-transition:all ease-in-out .3s;-webkit-transition:all ease-in-out .3s;-o-transition:all ease-in-out .3s;margin:30px 40px 15px;border:1px solid #d3d3d3} .mobile_search .search .notxt1{background: #b1040e;color: #fff;} .mob_links{color:#fff;text-align: center;line-height:40px} .mob_linksIn{overflow:hidden;float:right;margin-right:50px} .mob_links dl dt::before{background:#fff;opacity:.75} .mob_links dl{margin: 0 0 10px;overflow: hidden;} .mob_links dl:nth-child(2){margin:0} .mob_links dl a{color: #333;opacity:.75;font-size:14px} .mob_links dl dt{position:relative} .mob_links dl dt::before{content:'';position:absolute;width: 16px;height: 2px;background:#a7a8a7;bottom: 0;left: calc(50% - 8px);} .mob_links dl dt a{font-size:14px;color: #333;font-weight:700} .mob_links dl dd{padding: 0 10px;position:relative;display: inline-block;} .mob_links dl dd::before{content:'';position:absolute;width:5px;height:1px;opacity:.3;background:#fff;right:10px;top:50%} .mob_links dl dd:last-child::before{display:none} .mobile_search{height: 36px;margin: 20px;} /* .mobile_search .search input.notxt1{background-color: #fff; background-size: 20px; } */ .mobile_search .search i{position: absolute;z-index: 2;right: 0;top: 50%;transform: translateY(-50%);text-align: center;font-size: 18px;width: 25%;pointer-events: none;color: #b1040e;} } @media screen and (max-width:767px){ .mob_nav_btn{} .mobile-nav{padding-top:70px} .mobile-nav li a{line-height:30px} .mobile-nav dd a{padding-left:60px} .mobile-nav .arrow{top:6px} .mobile_search .search input.notxt1{width: 60px;} .search input.notxt{width: calc(100% - 60px);padding-left: 20px;} } /* mob_nav end */ /* footer start */ footer{clear:both;position:relative;color:#fff;margin: 0 0 0;z-index: 2;padding: 10rem 0 0;overflow: hidden;} footer .gp-container{align-items: center;} footer .top{background: url(../images/footer_bg2.png) no-repeat top center/100% auto;padding: 2.4rem 0 2.2rem;border-radius: 4rem 4rem 0 0;} footer .links .title{float: left;} footer .links .box{margin-left: 4em;} footer .links .box a{display: inline-block;vertical-align: top;margin: 0 10rem 0 0;color: #fff;} footer .bottom{position: relative;background: #8f000b;padding: 5.8rem 0 5.8rem;} footer .bottom::before{content: '';display: block;position: absolute;right: 0;background: url(../images/footer_bg.png) no-repeat center/cover;width: 65.7rem;height: 38.8rem;top: -9.4rem;} .footer_lf{/* width: 92rem; */} .footer_rt{width: 80rem;align-items: center;} .footer_logo{width: 23rem;margin: 0 0 2.9rem;} .footer_logo .logo2{width: 61%;} .footer_code{order: 2;} .footer_code ul{margin: 0 0;text-align: right;} .footer_code li{width: auto;} .footer_code .item{margin: 0;text-align: center;position: relative;color: #fff;} .footer_code .item img{display: block;margin: 0 auto 1.2rem;width: 14.4rem;} .contact_us{color: #fff;} .copy_right{text-align: right;padding: .8rem 0 0;line-height: 2.5em;} .copy_right a{color: inherit;} .copy_right p{/* display: inline-block; */vertical-align: top;} @media screen and (max-width:996px){ .footer{width: auto;max-width: initial;/* padding-top: 50px; *//* padding-bottom: 14px; */} .footer_lf{width: 100%;} .footer_logo{margin: 0 auto 30px;} .footer_rt{width: 100%;text-align: center;} .footer_code ul{text-align: center;} .footer_code{margin: 20px 0;} .copy_right{text-align: center;} } @media screen and (max-width:767px){ /* */ footer .top{background: #8c726e;border-radius: 20px 20px 0 0;} .footer_links{width: 100%;padding: 20px 0;} .footer_lf{flex-wrap: wrap;width: 100%;} .footer_rt{width: 100%;padding: 20px 0 0;align-items: center;} .footer_bottom{padding: 20px 0;} .footer_logo{width: 60%;margin: 0 auto 20px;order: 0;} .footer_code{width: 100%;margin: 0;text-align: center;} .footer_code .hover_box{left: 50%;transform: translateX(-50%);} .contact_us{width: 100%;text-align: center;} } @media screen and (max-width:413px){ footer .links .title{float: none;} footer .links .box{margin: 0;} footer .links .box a{margin: 0;} } /* footer end */