@charset "utf-8";

/* CSS Document */

header {

    height: 70px;

    width: 100%;

    border-bottom: 1px solid rgba(255, 255, 255, 0.35);

    transition: all .3s ease-in-out;

}

.header{

    display: flex;

    flex-flow: row nowrap;

    align-items: center;

    position: relative;

    z-index: 7;

}

.header .logo {

    position: relative;

    display: block;

    margin-left: 5%;

	width:200px;
}

.header .logo img {

    width: 100%;

}

.header .nav {

    font-size: 16px;

    color: #fff;

    margin-right: 20px;

    position: relative;

	margin-left: 110px;

}

.header .nav .li {

    margin: 0 30px;

    position: relative;

}

.header .nav .warp-btn {

    flex-flow: row nowrap;

    justify-content: flex-start;

    align-items: center;

    display: block;

    height: 70px;

    line-height: 70px;

    position: relative;

    color: #121212;

    cursor: pointer;

    transition: all .3s ease;

}



.header .nav .nav-item {

    position: absolute;

    top: 70px;

    width: 200px;

    left: 0;

    font-size: 16px;

    display: none;

	box-shadow: 0 0 3px 3px rgba(0,0,0,.1);

}

.header .nav .nav-item p {

    width: 100%;

    line-height: 1.5;

    display:block;

	border-bottom:1px solid #fff;

	background: #f6f6f6;

}

.header .nav .nav-item p:last-child{

	border-bottom:none;

}

.header .nav .nav-item a {

    height: 60px;

    line-height: 60px;

    display: block;

    color:#333;

    transition: all .3s ease;

	padding-left: 15px;

}

.header .nav .nav-item p:hover{

	background:#7b8d2e

}

.header .nav .nav-item p:hover a{

	color:#fff;

}

.header .right-btn {

    position: relative;

    width: auto;

    height: 80px;

    margin: 0 30px;

    /* border-left: 1px solid rgba(255, 255, 255, 0.35); */

}

.header:hover .right-btn a, 

.header.active .right-btn a {

    color: #111;

}

.scaleX{

	animation: scaleX 1.5s linear infinite alternate;

	-webkit-animation: scaleX 1.5s linear infinite alternate;

}

.scaleB{

	animation: scaleB 1.5s linear infinite alternate;

	-webkit-animation: scaleB 1.5s linear infinite alternate;

}

@-webkit-keyframes scaleX{

	0%{

		transform: scaleX(1);

	}

	100%{

		transform: scaleX(0.5);

	}

}



@-webkit-keyframes scaleB{

	0%{

		transform: scaleX(0.5);

	}

	100%{

		transform: scaleX(1);

	}

}

@keyframes scaleX{

	0%{

		transform: scaleX(1);

	}

	100%{

		transform: scaleX(0.5);

	}

}

@keyframes scaleB{

	0%{

		transform: scaleX(0.5);

	}

	100%{

		transform: scaleX(1);

	}

}

.fix{

	position:fixed;

	z-index: 99;

	top:0;

	background: #fff;

	box-shadow: 0 3px 5px 3px rgba(0,0,0,.08);

	height:60px;

}

.fix .header .nav .warp-btn{

	height:60px;

	line-height: 60px;

}

.fix .header .nav .nav-item{

	top:60px;

}

/*********************页脚********************/

.backtop-1 {

    position: fixed;

    bottom: 200px;

    right: 3%;

    background-color: rgba(0, 0, 0, 0.22);

    cursor: pointer;

    height: 46px;

    padding: 0;

    margin: 0;

    width: 46px;

    z-index: 11;

    box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 10%);

    -webkit-transform: scale(0, 0);

    -ms-transform: scale(0, 0);

    transform: scale(0, 0);

    opacity: 0;

    -webkit-transform: translate(0, 50px);

    -ms-transform: translate(0, 50px);

    transform: translate(0, 50px);

    ransition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1);

}

.backtop-1.active {

    -webkit-transform: scale(1, 1);

    -ms-transform: scale(1, 1);

    transform: scale(1, 1);

    opacity: 1;

}

.backtop-1 svg {

    height: 20px;

    width: 20px;

    fill: #fff;

    -webkit-animation: start-backtop-1 1.5s infinite ease-in-out;

    animation: start-backtop-1 1.5s infinite ease-in-out;

}



@keyframes start-backtop-1 {

  0%, 30% {

    opacity: 0;

    -webkit-transform: translate(0, 5px);

            transform: translate(0, 5px);

  }

  40% {

    opacity: 1;

    -webkit-transform: translate(0px, 0px);

            transform: translate(0px, 0px);

  }

  100% {

    opacity: 0;

    -webkit-transform: translate(0px, -6px);

            transform: translate(0px, -6px);

  }

}



footer{

	border-top: 1px solid #dcdcdc;

	padding:20px 0;

}

footer p{

	text-align:center;

}







/******************侧边栏*******************/

.lang{

    background: url("../images/en.png") left center no-repeat;

    padding-left:30px;

    position: absolute;

    right: 150px;

}

.burger-menu {

    display: -webkit-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: flex;

    -webkit-flex-wrap: wrap;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

    -webkit-box-align: end;

    -webkit-align-items: flex-end;

    -ms-flex-align: end;

    align-items: flex-end;

    -webkit-box-pack: center;

    -webkit-justify-content: center;

    -ms-flex-pack: center;

    justify-content: center;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -webkit-flex-direction: column;

    -ms-flex-direction: column;

    flex-direction: column;

    width: auto;

    padding: 15px 0;

    cursor: pointer;

    position: absolute;

	right:150px;

    -webkit-animation-name: header-menu;

    animation-name: header-menu;

    -webkit-animation-duration: 1s;

    animation-duration: 1s;

    -webkit-animation-timing-function: ease;

    animation-timing-function: ease;

    -webkit-animation-fill-mode: both;

    animation-fill-mode: both;

    -webkit-animation-delay: 1.6s;

    animation-delay: 1.6s;

    display: none;

}

.burger-menu span {

    position: relative;

    display: inline-block;

    width: 40px;

    height: 2px;

    background-color: #1a1919;

    margin: 4px 0;

    -webkit-transition: 0.3s ease;

    transition: 0.3s ease;

}

.burger-menu:hover span:first-of-type {

    -webkit-transform: translateX(-4px);

    transform: translateX(-4px);

}

.burger-menu:hover span:last-of-type {

    -webkit-transform: translateX(4px);

    transform: translateX(4px);

}



.menu-container {

    display: -webkit-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: flex;

    -webkit-flex-wrap: wrap;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -webkit-flex-direction: column;

    -ms-flex-direction: column;

    flex-direction: column;

    -webkit-box-align: start;

    -webkit-align-items: flex-start;

    -ms-flex-align: start;

    align-items: flex-start;

    -webkit-box-pack: center;

    -webkit-justify-content: center;

    -ms-flex-pack: center;

    justify-content: center;

    padding: 30px 0px;

    width: 0;

    height:100vh;

    background-color:#f6f7f8;

    position: fixed;

    top: 0;

    z-index: 99;

    -webkit-transition: width 0.7s ease, padding 0.7s ease;

    transition: width 0.7s ease, padding 0.7s ease;

    -webkit-transition-delay: 0.5s;

    transition-delay: 0.5s;

	overflow: hidden;

}

.menu-container.show {

    padding: 0px;

    width: 100%;

}

.menu-container .close-menu {

    display: -webkit-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: flex;

    -webkit-flex-wrap: wrap;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

    -webkit-box-align: end;

    -webkit-align-items: flex-end;

    -ms-flex-align: end;

    align-items: flex-end;

    -webkit-box-pack: center;

    -webkit-justify-content: center;

    -ms-flex-pack: center;

    justify-content: center;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -webkit-flex-direction: column;

    -ms-flex-direction: column;

    flex-direction: column;

    padding: 15px 0;

    cursor: pointer;

    position: absolute;

    z-index:  999;

    top: 110px;

    right: 40px;

    -webkit-transition: 0.5s ease;

    transition: 0.5s ease;

}

.menu-container .close-menu span {

    display: inline-block;

    width: 41px;

    height: 2px;

    background-color: #7b8d2e;

}



.menu-container .close-menu span:first-of-type {

    -webkit-transform: rotate(45deg) translateX(0.5px);

    transform: rotate(45deg) translateX(0.5px);

}

.menu-container .close-menu span:last-of-type {

    -webkit-transform: rotate(-45deg);

    transform: rotate(-45deg);

}

.menu-container .menu-image {

    position: absolute;

    top: 0px;

    right: 0px;

    z-index: 1;

    width: 0%;

    -webkit-align-self: flex-end;

    -ms-flex-item-align: end;

    align-self: flex-end;

    height: 100vh;

    background-repeat: no-repeat;

    background-size: cover;

    background-position: center;

    -webkit-transition: 0.6s ease;

    transition: 0.6s ease;

    -webkit-transition-delay: 0s;

    transition-delay: 0s;

	display: block;

}

.menu-container.show .menu-image {

    -webkit-transition-delay: 0.6s;

    transition-delay: 0.6s;

    width: 40%;

}

.menu-scroll-container{

	display:block;

	position:relative;

}

.scroll-content {

	width: 100vw;

    overflow-x: hidden !important;

    -webkit-transform: translate3d(0, 0, 0);

    transform: translate3d(0, 0, 0);

}

.scroll-content .lang-btn{

	padding: 0px 130px 0 130px;

}

.scroll-content .lang-btn a{

	font-size:18px;

	font-weight: 700;

	line-height: 1;

	color:#121212;

	font-family: "Din", sans-serif;

}

.scroll-content .menu-items{

	margin-bottom: 30px;

	padding: 100px 130px 0 130px;

    display: block;

	width: calc(60% - 260px);

}

.scroll-content .menu-item{

	position: relative;

	width:200px;

}

.menu-item:not(:last-child) {

    margin-bottom: 20px;

}

.menu-link {

    color: #333;

    font-size: 24px;

    line-height: 1.08;

    text-transform: uppercase;

    transition: color 0.5s ease;

}

.menu-item.menu-item-has-children > .menu-link::after {

    content: '';

    display: inline-block;

    vertical-align: middle;

    width: 6px;

    height: 6px;

    border-right: 2px solid currentColor;

    border-bottom: 2px solid currentColor;

    transform: rotate(-45deg);

    margin-left: 15px;

    position: relative;

    top: -3px;

}

.submenu {

    position: absolute;

    top: 10px;

    left: 100%;

    width: 100%;

    padding-left: 10px;

	opacity: 0;

    visibility: hidden;

    transition: all 0.6s ease;

}

.submenu .menu-item:not(:last-child) {

    margin-bottom: 15px;

}

.submenu-link {

    font-size: 18px;

}

.menu-item.menu-item-has-children:hover .submenu {

    opacity: 1;

    visibility: visible;

}