/*

=== File Name:index.css        ===

=== Website:www.xinhaoxuan.com ===

=== Date:OCT.25,2017	       ===

*/



@charset "utf-8";



/*---------Public styles----------*/

/*@import"bootstrap.min_1.css";

@import"font-awesome.min.css";

@import"jquery.fullpage_1.css";

@import"swiper-3.4.2.min_1.css";

@import"animate.min_1.css";

@import"banner.css";

@import"public_1.css";*/



/*-------Index-page styles------*/



.wrapper {padding-top: 0px}

.wrapper:before {

	content: "www.badoucms.com";

	position: fixed;

	left: -163px;

	top: 420px;

	z-index: 9;

	line-height: 16px;

	font-size: 14px;

	color: #9e9e9e;

	letter-spacing: 14px;

	transform: rotate(90deg);

}



.layout {

	position: absolute;

	top: 72px;

	bottom: 0px;

	right: 0px;

	left: 0px;

	overflow: hidden;

}

@media screen and (min-width: 1920px) {

	.layout {

		right: 72px;

		left: 72px;

	}

}

@media screen and (max-width: 1200px) {

	.wrapper:before {

		display: none;

	}

}

@media screen and (max-width: 1200px) {

	.layout {

		top: 50px;

	}

}

@media screen and (max-width: 767px) {

	.layout {

		position: static;

		top: 0px;

		bottom: 0px;

		height: 100%;

	}

}







/*==fullPage==*/



#fp-nav ul li, .fp-slidesNav ul li {

	width: 25px;

	text-align: right;

}

#fp-nav ul li a.active span,

.fp-slidesNav ul li a.active span {

	/* width: 100%; */

    background: #000000;

}

#fp-nav ul li a span,

.fp-slidesNav ul li a span {

	position: static;

	display: inline-block;

    width: 7px;

    height: 7px;

    border: 0px;

    border-radius: 50%;

    background: #bbbbbb;

    transition: .3s;

}

#fp-nav.right {

	right: 2px;

}

@media screen and (min-width: 1920px) {

	#fp-nav.right {

		right: 17px;

	}

}



.banner .swiper-slide {

	background-repeat: no-repeat;

	background-position: top;

}

@media screen and (max-width: 767px) {

	.banner {

		margin-top: 45px;

	}

	.banner .swiper-slide {

		padding: 54% 0;

		background-size: cover

	}

}



/*==box1==*/

.box1 {}

.box1-tit {

	position: absolute;

	top: 250px;

	left: 0px;

	right: 0px;

	z-index: 2;

	font-size: 30px;

	color: #fff;

	text-align: center;

}

.box1 ul {

	height: 100%;

}

.box1 ul li {

	position: relative;

	float: left;

	box-sizing: border-box;

	width: 20%;

	height: 100%;

	border-left: 1px solid #fff;

}

.box1 ul li:nth-of-type(1) {

	border-left: 0px;

}

.box1 ul li:nth-of-type(6) {

	display: none;

}

.box1 ul li:after {

	content: "";

	position: absolute;

	top: 0px;

	left: 0px;

	z-index: 1;

	width: 100%;

	height: 0px;

	background: rgba(0,0,0,.3);

	transition: height .6s, background .3s;

}

.box1 ul li:hover::after {

	background: rgba(0,0,0,.1);

}

.box1 ul li:nth-of-type(1):after {

	transition: height .6s .2s, background .3s;

}

.box1 ul li:nth-of-type(2):after {

	transition: height .6s .3s, background .3s;

}

.box1 ul li:nth-of-type(3):after {

	transition: height .6s .4s, background .3s;

}

.box1 ul li:nth-of-type(4):after {

	transition: height .6s .5s, background .3s;

}

.box1 ul li:nth-of-type(5):after {

	transition: height .6s .6s, background .3s;

}

.box1 ul li:nth-of-type(6):after {

	transition: height .7s .7s, background .3s;

}

.box1-show ul li:after {

	height: 100%;

}

.box1 ul li a {

	display: block;

	width: 100%;

	height: 100%

}

.box1 ul li .propic {

	position: absolute;

	top: 0px;

	left: 0px;

	z-index: 0;

	width: 100%;

	height: 100%;

}

.box1 ul li .flex {

	position: absolute;

	top: 0px;

	left: 0px;

	z-index: 2;

	width: 100%;

	height: 100%;

	display: flex;

	justify-content: center;

	align-items: center;

}

.box1 ul li .flex-content {

	width: 56%;

	min-width: 140px;

	padding: 30px 10px;

	margin: auto;

	border: 2px solid #fff;

	text-align: center;

}

.box1 ul li h3 {

	height: 24px;

	overflow: hidden;

	margin: 18px 0px 0px 0px;

	line-height: 24px;

	font-size: 16px;

	color: #ffffff;

	text-overflow: ellipsis;

	white-space: nowrap;

}

.box1 ul li h5 {

	height: 24px;

	overflow: hidden;

	margin: 0px;

	line-height: 24px;

	font-size: 14px;

	color: #dcdcdc;

	font-family: "Arial";

	text-overflow: ellipsis;

	white-space: nowrap;

	text-transform: capitalize;

}



@media screen and (max-width: 1062px) {

	.box1-tit {display: none}

	.box1 ul li {

		width: 33.33%;

		height: 50%;

		border-bottom: 1px solid #fff;

	}

	.box1 ul li:nth-of-type(6) {

		display: block;

	}

}

@media screen and (max-width: 767px) {

	.box1 {

		height: 826px;

	}

	.box1 ul li:after {

		height: 100%;

	}

}

@media screen and (max-width: 708px) {

	.box1 ul li {

		width: 50%;

		height: 33.33%;

	}

}

@media screen and (max-width: 354px) {

	.box1 ul li {

		width: 100%;

		height: 20%;

	}

	.box1 ul li:nth-of-type(6) {

		display: none;

	}

	.box1 ul li h2 {display: none}

	.box1 ul li .flex-content {

		padding: 10px;

	}

	.box1 ul li .proico {width: 44px}

	.box1 ul li h3 {margin-top: 6px}

}







/*==box2==*/

.box2 {}

.box2 ul {

	height: 100%;

	margin-bottom: 0px;

	background: url(../images/box2summary_08.jpg);

}

.box2 ul li {

	position: relative;

	float: left;

	width: 33.33%;

	height: 100%;

	display: flex;

	flex-direction: column;

  	justify-content: flex-start;

}

.box2 ul li .pic {

	width: 100%;

	height: 50%;

}

.box2 ul li .summary {

	box-sizing: border-box;

	width: 100%;

	height: 50%;

	padding: 3%;

	order: 1;

}

.box2 ul li:nth-of-type(2) .summary {order: 0}

.box2 ul li .summary .flex {

	width: 100%;

	height: 100%;

	text-align: center;

	display: flex;

    flex-direction: column;

    justify-content: center;

}

.box2 ul li .summary h3 {

	line-height: 26px;

	font-size: 16px;

	color: #000000;

	text-align: center;

	font-weight: bold;

	opacity: 0;

	transition-duration: 1s;

}

.box2 ul li .summary h3.opacity {

	opacity: 1;

}

.box2 ul li .summary h3 span {

	display: block;

}

.box2 ul li .summary hr {

	width: 30px;

	height: 2px;

	margin: 5% auto;

	border: none;

	background: #f04b01;

	opacity: 0;

	transition-delay: 1.5s;

}

.box2 ul li .summary hr.opacity {

	opacity: 1;

}

.box2 ul li .summary p {

	max-width: 450px;

	max-height: 104px;

	overflow: hidden;

	margin: auto;

	line-height: 26px;

	font-size: 14px;

	color: #505050;

	text-align: center;

	opacity: 0;

	transition-duration: 1s;

}

.box2 ul li .summary p.opacity {

	opacity: 1;

}

.box2 ul li .summary .more {

	display: block;

	box-sizing: border-box;

	width: 95px;

	height: 65px;

	padding: 6px 10px;

	margin: 5% auto 0px auto;

	border: 2px solid #777;

	line-height: 18px;

	font-size: 14px;

	color: #505050;

	text-align: left;

	vertical-align: middle;

}

.box2 ul li .summary .more span {
	text-transform: capitalize;
	display: block;

}

.box2 ul li .summary .more i {

	display: inline-block;

	width: 70%;

	height: 7px;

	background: url(../images/cellmore.png) no-repeat right;

	transition: .3s;

}

.box2 ul li .summary .more:hover {

	border-color: #000;

	color: #000;

}

.box2 ul li .summary .more:hover i {

	width: 100%;

	background: url(../images/cellmoreh.png) no-repeat right;

}



@media screen and (max-width: 1200px) {

	.box2 ul li {

		float: none;

		width: 100%;

		height: 33.33%;

		flex-direction: row;

  		justify-content: flex-start;

	}

	.box2 ul li .pic {

		width: 50%;

		height: 100%;

	}

	.box2 ul li .summary {

		width: 50%;

		height: 100%;

		padding: 2%;

	}

	.box2 ul li .summary h3 span {

		height: 26px;

		overflow: hidden;

	}

	.box2 ul li .summary hr {

		margin: 3% auto;

	}

	.box2 ul li .summary .more {

		height: 30px;

		padding: 0px;

		margin: 3% auto 0px auto;

		line-height: 26px;

		text-align: center;

	}

	.box2 ul li .summary .more i{

		display: none;

	}

}

@media screen and (max-width: 767px) {

	.box2 {

		height: 826px;

	}

	.box2 ul li .summary h3,

	.box2 ul li .summary hr,

	.box2 ul li .summary p {

		opacity: 1;

	}

}

@media screen and (max-width: 592px) {

	.box2 {

		height: auto;

	}

	.box2 ul li {

		display: block;

		padding-top: 15px;

	}

	.box2 ul li .summary {

	    width: 100%;

	    height: auto;

	}

	.box2 ul li .summary .flex {

		display: block;

	}

	.box2 ul li .summary h3 {margin-top: 0px}

	.box2 ul li .pic {

	    width: 100%;

	    height: auto;

	    padding: 25% 0px;

	}

}









/*==box3==*/

.box3 {position: relative;}

.linxinru {

	position: absolute;

	top: 0px;

	right: 15%;

	z-index: 0;

	width: 362px;

	height: 921px;

	background: url(../images/linxinru.png) no-repeat center;

}

@media screen and (max-width: 1530px) {

	.linxinru {

		right: 5%;

	}

}

@media screen and (max-width: 1200px) {

	.linxinru {

		display: none;

	}

}



.box3-top {

	display: flex;

	align-items: center;

	box-sizing: border-box;

	height: 100%;

	padding-left: 16%;

	background: url(../images/box3top_03.jpg) no-repeat;

	background-size:100% 100%;

	position: relative;

}

.box3-top:before{

	content:'';

	opacity: 1;

	display:block;

	position: absolute;

	top:0;

	left:50%;

	width:600px;

	height:100%;

	background:url("../images/joan1.jpg") no-repeat;

	background-size:cover;

}

.box3-top-content {

	opacity: 0;

	transition: .3s;

}

.box3-top-content-opacity {

	opacity: 1;

}

.box3-top h5 {

	margin: 0px;

	font-size: 30px;

	color: #ffffff;

	font-weight: bold;

	font-family: "Arial";

}

.box3-top h3 {

	margin: 4% 0px;

	font-size: 24px;

	color: #ffffff;

	letter-spacing: 4px;

}



.join-list ul {

	margin-bottom: 0px;

}

.join-list ul li {

	float: left;

	margin-right: 30px;

}

.join-list ul li a {

	position: relative;

	box-sizing: border-box;

	display: table-cell;

	width: 120px;

	height: 120px;

	border: 1px solid #fff;

	line-height: 40px;

	font-size: 16px;

	color: #fff;

	text-align: center;

	vertical-align: middle;

}

.join-list ul li i {

	display: block;

	width: 43px;

	height: 50px;

	margin: auto;

	transition: .6s;

}

.join-list ul li i.pinpai-ico {

	background: url(../images/jlist1.png) no-repeat center;

}

.join-list ul li i.tiaojian-ico {

	background: url(../images/jlist2.png) no-repeat center;

}

.join-list ul li i.youshi-ico {

	background: url(../images/jlist3.png) no-repeat center;

}

.join-list ul li i.liucheng-ico {

	background: url(../images/jlist4.png) no-repeat center;

}

.join-list ul li:hover i {

	transform: rotateY(360deg);

}





@media screen and (max-width: 1200px) {

	.box3-top {

		align-items: center;

		padding-left:3%;

	}

	.box3-top h5 {

		font-size: 30px;

	}

	.box3-top h4 {

		font-size: 16px;

	}

}

@media screen and (max-width: 767px) {

	.box3-top {

		padding: 20px;

	}

	.box3-top-content {

		opacity: 1;

	}

	.join-list ul li {

		float: left;

		width: 23%;

		margin: 1%;

	}

}

@media screen and (max-width: 414px) {

	.join-list ul li {

		float: left;

		width: 48%;

		margin: 2% 0px 4% 4%;

	}

	.join-list ul li:nth-of-type(2n+1) {

		margin-left: 0px;

	}

	.join-list ul li a {

		width: 187px;

		height: 110px;

	}

}





.box3-bottom {

	display:none;

	align-items: center;

	box-sizing: border-box;

	height: 50%;

	padding-left: 16%;

	background: url(../images/box2summary_08.jpg);

}

.box3-bottom-content {

	opacity: 0;

	transition: .3s;

}

.box3-bottom-content-opacity {

	opacity: 1;

}

.box3-bottom h5 {

	margin: 0px;

	line-height: 32px;

	font-size: 18px;

	color: #000000;

	font-weight: bold;

}

.box3-bottom p {

	margin: 3% 0px;

	max-width: 710px;

	line-height: 32px;

	font-size: 16px;

	color: #505050;

}

.box3-bottom .more {

	position: relative;

	z-index: 1;

	display: block;

	width: 294px;

	height: 60px;

	border: 1px solid #f04b01;

	border-radius: 3px;

	line-height: 60px;

	font-size: 18px;

	color: #f04b01;

	text-align: center;

}

.box3-bottom .more:before {

	content: '';

	position: absolute;

	top: -20px;

	left: -20px;

	bottom: -20px;

	right: -20px;

	border-radius: 3px;

	background: inherit;

	z-index: -1;

	opacity: 0.4;

	transform: scale3d(0.8, 0.5, 1);

}

.box3-bottom .more:hover {

	background: #f04b01;

	color: #fff;

	transition: background .1s .3s, color 0s .3s;

	animation: anim-moema-1 .3s forwards;

}

.box3-bottom .more:hover::before {

	animation: anim-moema-2 .3s .3s forwards;

}

@keyframes anim-moema-1 {

	60% {

		-webkit-transform: scale3d(0.8, 0.8, 1);

		transform: scale3d(0.8, 0.8, 1);

	}

	85% {

		-webkit-transform: scale3d(1.1, 1.1, 1);

		transform: scale3d(1.1, 1.1, 1);

	}

	100% {

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

		transform: scale3d(1, 1, 1);

	}

}



@keyframes anim-moema-2 {

	to {

		opacity: 0;

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

		transform: scale3d(1, 1, 1);

	}

}



@media screen and (max-width: 1200px) {

	.box3-bottom {

		align-items: center;

		justify-content: center;

		padding-left: 0px;

	}

	.box3-bottom .more {

		width: 220px;

		height: 40px;

		line-height: 40px;

	}

}

@media screen and (max-width: 767px) {

	.box3-bottom-content {

		opacity: 1;

	}

	.box3-bottom {

		padding: 20px;

	}

}

@media screen and (max-width: 414px) {

	.box3-bottom .more {

		width: 150px;

		height: 30px;

		line-height: 30px;

		font-size: 16px;

	}

}











/*==box4==*/

.box4 {

	display: flex;

	align-items: center;

	box-sizing: border-box;

	background: url(../images/box4_03.jpg) no-repeat center;

}

.box4-content {

	width: 100%;

}

.box4-word {

	max-width: 915px;

	margin: auto;

	text-align: center;

	opacity: 0;

	transition: .3s;

}

.box4-word-opacity {

	opacity: 1

}

.box4-word p {

	max-height: 204px;

	overflow: hidden;

	line-height: 34px;

	font-size: 14px;

	color: #ababab;

}

.box4-word .more {

	position: relative;
	text-transform: capitalize;
	z-index: 1;

	display: block;

	width: 134px;

	height: 32px;

	overflow: hidden;

	border: 1px solid #fff;

	margin: 4.5% auto 5% auto;

	border-radius: 16px;

	line-height: 32px;

	font-size: 14px;

	color: #fff;

	text-align: center;

}

.box4-word .more:before {

	content: '';

	position: absolute;

	top: 0px;

	left: 0px;

	width: 0px;

	height: 100%;

	border-radius: 16px;

	background: #f04b01;

	z-index: -1;

	transition: .4s;

}

.box4-word .more:hover::before {

	width: 102%;

}



.box4-list {

	position: relative;

	max-width: 1200px;

	padding: 0px 54px 28px 54px;

	margin: auto;	

	opacity: 0;

	transition: .3s;

}

.box4-list-opacity {

	opacity: 1

}

.box4-list:after {

	content: "";

	position: absolute;

	bottom: 0px;

	left: -360px;

	width: 1920px;

	height: 144px;

	background: rgba(255,255,255,.5);

}

.box4-list .swiper-pagination {

	display: none;

	width: 100%;

	bottom: 5px;

}

.box4-list .swiper-pagination-bullet {

	margin: 0px 5px;

}

.box4-list .swiper-button-prev {

	width: 23px;

	height: 40px;

	background: url(../images/prev1.png) no-repeat center;

}

.box4-list .swiper-button-next {

	width: 23px;

	height: 40px;

	background: url(../images/next1.png) no-repeat center;

}

.box4-list .swiper-button-disabled {

    opacity: .35;

    cursor: auto;

    pointer-events: none;

}





.box4-list  .pic {

	display: flex;

	justify-content: center;

	align-items: center;

	width: 100%;

	height: 248px;

	overflow: hidden;

	background: #f4f4f4;

}

.box4-list .pic img {

	max-width: 95%;

	max-height: 95%;

	transition: transform 2.2s cubic-bezier(.165,.84,.44,1), opacity .5s;

}

.box4-list .swiper-slide:hover .pic img {

	transform: scale(1.3);

    opacity: .6;

}

.box4-list h6 {

	height: 42px;

	overflow: hidden;

	margin: 0px;

	background: #fff;

	line-height: 42px;

	font-size: 16px;

	color: #616161;

	text-align: center;

	text-overflow: ellipsis;

	white-space: nowrap;

}



@media screen and (max-width: 1200px) {

	.box4 {padding: 20px}

}

@media screen and (max-width: 767px) {

	.box4-word,

	.box4-list {

		opacity: 1;

	}



	.box4-list {

		padding: 0px 0px 28px 0px;

	}

	.box4-list .swiper-pagination {

		display: block;

	}

	.box4-list .swiper-button-prev,

	.box4-list .swiper-button-next {

		display: none;

	}

}









/*==box5==*/

.box5 {

	bottom: 70px;

	display: flex;

	align-items: center;

	box-sizing: border-box;

	background: url(../images/box5_03.jpg) no-repeat center;

}

.box5-content {

	width: 100%;

}

.box5-content .title7 {

	opacity: 0;

	transition: .3s;

}

.title7-opacity {

	opacity: 1;

}



.news-nav {

	opacity: 0;

	transition: .3s;

}

.news-nav-opacity {

	opacity: 1;

}

.news-nav ul {

	text-align: center;

}

.news-nav ul li {

	display: inline-block;

	width: 136px;

	height: 34px;

	margin: 0px 9px;

}

.news-nav ul li.more {

	display: none;

}

.news-nav ul li a {

	position: relative;

	z-index: 1;

	display: block;

	overflow: hidden;

	border: 1px solid #fff;

	border-radius: 16px;

	line-height: 32px;

	font-size: 14px;

	color: #fff;

	text-align: center;

	text-overflow: ellipsis;

	white-space: nowrap;

}

.news-nav ul li a:before {

	content: '';

	position: absolute;

	top: 0px;

	left: 0px;

	width: 0px;

	height: 100%;

	border-radius: 16px;

	background: #f04b01;

	z-index: -1;

	transition: .4s;

}

.news-nav ul li a:hover::before {

	width: 102%;

}



.index-news {

	max-width: 910px;

	margin: auto;

}

.index-news ul {}

.index-news ul li {

	position: relative;

	z-index: 1;

	opacity: 0;

	transform: scale(1.1) translateY(-24px);

	transition: all .35s ease-out;

	transition-delay: 200ms,200ms;

}

.index-news ul li:nth-of-type(2) {transition-delay: 300ms,300ms;}

.index-news ul li:nth-of-type(3) {transition-delay: 400ms,500ms;}

.index-news ul li:nth-of-type(4) {transition-delay: 500ms,500ms;}

.index-news-addclass ul li {

	opacity: 1;

    transform: none;

}

.index-news ul li:after {

	content: "";

	position: absolute;

	z-index: -1;

	top: 0px;

	left: -505px;

	width: 1920px;

	height: 100%;

	background: rgba(255,255,255,.4);

	opacity: 0;

	transition: .3s;

}

.index-news ul li:hover::after {

	opacity: 1;

}

.index-news ul li a {

	display: flex;

	justify-content: space-between;

	align-items: center;

}

.index-news ul li .summary {

	box-sizing: border-box;

	width: 89%;

	max-width: 816px;

	height: 135px;

	padding-top: 20px;

	padding-left: 30px;

	margin-left: 30px;

	border-left: 1px solid transparent;

	transition: .3s;

}

.index-news ul li:hover .summary {

	border-left: 1px solid rgba(255,255,255,.7);

}

.index-news ul li .summary h6 {

	height: 20px;

	overflow: hidden;

	line-height: 20px;

	line-height: 20px;

	font-size: 16px;

	color: #fff;

}

.index-news ul li .summary p {

	max-height: 56px;

	overflow: hidden;

	line-height: 28px;

	font-size: 14px;

	color: #ababab;

}

.index-news ul li time {

	line-height: 20px;

	font-size: 18px;

	color: #fff;

}

.index-news ul li time span {

	display: block;

	line-height: 60px;

	font-size: 60px;

}



@media screen and (max-width: 1200px) {

	.box5 {

		bottom: 50px;

		padding: 0px 20px;

	}

}

@media screen and (max-width: 991px) {

	.news-nav ul li {

		display: none;

	}

	.news-nav ul li.more,

	.news-nav ul li:nth-of-type(1),

	.news-nav ul li:nth-of-type(2),

	.news-nav ul li:nth-of-type(3) {

		display: inline-block;

	}

	

	.index-news {margin: 3% auto 0px auto}

	.index-news ul li:nth-of-type(4) {display: none}

	.index-news ul li .summary {

		height: 120px;

		padding-top: 15px;

	}

	.index-news ul li time {

		font-size: 16px;

	}

	.index-news ul li time span {

		line-height: 50px;

		font-size: 50px;

	}

}

@media screen and (max-width: 767px) {

	.box5 {

		bottom: 57px;

		padding: 20px;

	}

	.box5-content .title7,

	.news-nav,

	.index-news ul li {

		opacity: 1;

		transform: none;

	}

	.news-nav ul li {

		float: left;

		width: 23%;

		margin: 0px 1%;

	}

	.index-news ul li {

		width: 100%;

		padding-top: 15px;

	}

	.index-news ul li a {

		display: block;

	}

	.index-news ul li time {

		display: inline-block;

	}

	.index-news ul li time {

		font-size: 16px;

	}

	.index-news ul li time span {

		position: relative;

		float: right;

		display: inline-block;

		padding-left: 4px;

		line-height: 20px;

		font-size: 16px;

	}

	.index-news ul li time span:after {

		content: ".";

		position: absolute;

		top: 0px;

		left: 0px;

		width: 4px;

		height: 100%;

	}

	.index-news ul li .summary {

		width: 100%;

		max-width: 100%;

		height: auto;

		padding-top: 5px;

		padding-bottom: 10px;

		padding-left: 0px;

		margin-left: 0px;

		border-left: 0px;

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

	}

	.index-news ul li:hover .summary {

		border-left: 0px;

	}

	.index-news ul li .summary h6 {

		text-overflow: ellipsis;

		white-space: nowrap;

	}

}

@media screen and (max-width: 414px) {

	.news-nav ul li {

		width: 31.33%;

	}

	.news-nav ul li:nth-of-type(3) {

		display: none;

	}

}







/*==底部==*/

.footer {

	position: fixed;

	left: 0px;

	bottom: 0px;

	width: 100%;

	margin-top: 0px;

	border-top-color: #fff;

    transform: translate3d(0,6vh,0);

    backface-visibility: hidden;

    perspective: 1000;

    opacity: 0;

    transition: transform .7s cubic-bezier(.165,.84,.44,1),opacity .3s ease;

}

.footer-show {

	transform: translate3d(0,0,0);

    opacity: 1;

}

@media screen and (max-width: 767px) {

	.footer {

		position: static;

		transform: translate3d(0,0,0);

	    opacity: 1;

	}

}



/*joan*/

.joan_box3{

	width:360px;

	background-color:rgba(255, 255, 255, .8);

	padding:2%;

	position: absolute;

	z-index:9;

	top:50%;

	right:13%;

	transform:translateY(-50%);

}

.joan_box3 h3{

	font-size:30px;

	font-weight:bold;

	color:#434144;

}

.joan_box3 span{

	display:block;

	margin-top:5px;

	color:#434144;

	font-size:14px;

	font-weight:bold;

	padding-bottom:5%;

	position: relative;

}

.joan_box3 span:before{

	content:'';

	opacity: 1;

	display:block;

	position: absolute;

	bottom:0;

	left:0;

	width:40px;

	height:3px;

	background-color:#434144;

}

.joan_box3 span b{

	color:#434144;

	font-size:14px;

	font-weight:normal;

}

.joan_box3 p{

	margin-top:5%;

	font-size:14px;

	color:#434144;

	line-height:26px;

}

.joan_box3 a{

	display:block;

	font-size:18px;

	margin-top:10%;

	width:160px;

	height:40px;

	line-height:40px;

	background-color:#434144;

	color:#DCB3A0;

	text-align:center;

	transition:.4s all;

}

.joan_box3 a:hover{

	color:#fff;

}

@media screen and (max-width: 1400px) {

	.joan_box3{right:5%;}

}

@media screen and (max-width: 1024px) {

	.joan_box3{display:none;}

	.box3-top{height:50%;}

	.box3-bottom{display:flex;}

	.box3-bottom-content{width:100%;padding:0 3%;}

}