* { box-sizing: border-box; }

.about02-page{

	position: relative;



}

.about02-page .header{

	position: absolute;

	top: 50px;

	left: 50px;

	right: 50px;

	z-index: 9;

}

.about02-page .header .logo{

	float: left;

	width: 174px;

	height: 22px;

	background-repeat: no-repeat;

	background-size: 100% auto;

	background-image: url(../images/index_header_logo.png);

	background-position: center bottom;

}

.about02-page .header .menu{

	float: right;

	width: 40px;

	height: 40px;

	background-repeat: no-repeat;

	background-size: 100% auto;

	background-image: url(../images/index_header_menu.png);

	background-position: center bottom;

	cursor: pointer;

	position: relative;

}

.about02-page .header .menu p{

	position: absolute;

	left: 0;

	top: 100%;

	margin-top: 10px;

	width: 100%;

	text-align: center;

	font-size: 14px;

	color: #333;

	font-weight: lighter;

}

.about02-page .main{

	background-color: #fff;

	height: 100%;

	width: 100%;

	display: flex;

	align-items: center;

	justify-content: center;

	flex-direction: column;

	-webkit-display: flex;

	-webkit-align-items: center;

	-webkit-justify-content: center;

	-webkit-flex-direction: column;

}

.about02-page .main .title{

	font-size: 36px;

	color: #333;

	font-weight: normal;

	margin-bottom: 7.2%;

}

.about02-page .main .container-box{

	position: relative;

	height: 63%;

	width: 100%;

	display: flex;

	align-items: center;

	-webkit-display: flex;

	-webkit-align-items: center;

}

.about02-page .gallery-top{

	height: 100%;

	position: relative;

	z-index: 2;

	border-radius: 50%;

	background-color: #fff;

	border: 10px solid #f0863b;

	margin: 0 auto;

}

.about02-page .gallery-top .bg{

	height: 100%;

	width: auto;

	opacity: 0;

}

.about02-page .gallery-top .swiper-wrapper{

	position: absolute;

	left: 0;

	top: 0;

	width: 100%;

	height: 100%;

}

.about02-page .gallery-top .swiper-slide{

	display: flex;

	align-items: center;

	justify-content: flex-start;

	flex-direction: column;

	-webkit-display: flex;

	-webkit-align-items: center;

	-webkit-justify-content: flex-start;

	-webkit-flex-direction: column;

	padding: 0 12%;

	text-align: center;

	background-repeat: no-repeat;

	background-position: center center;

}

 

.about02-page .gallery-top .swiper-slide .line{

	width: 1px;

	height: 10%;

	background-color: #333;

	margin-bottom: 10px;

	margin-top: 10px;

}

.about02-page .gallery-top .swiper-slide h5{

	font-size: 18px;

	color: #333;

	font-weight: lighter;

	font-family: 'roboto';

	margin:8% 0%;

}

.about02-page .gallery-top .swiper-slide h3{

	font-size: 62px;

	color: #f0863b;

	font-family: 'roboto';

	font-weight: bold;

	margin-bottom:8%;

}

.about02-page .gallery-top .swiper-slide p{

	font-size: 14px;

	color: #666;

	font-weight: lighter;

	line-height: 30px;

	max-height: 8.6em;

	padding-right: 4px;

	max-width: 100%;

}

.about02-page .gallery-top .swiper-slide p b{

	font-weight: bold;

}

.about02-page .gallery-top .swiper-pagination{

	bottom: 10%;

	font-size: 12px;

	color: #666;

	font-family: 'roboto';

}

.about02-page .gallery-top .swiper-pagination .swiper-pagination-current{

	color: #f0863b;

	font-size: 18px;

}

.about02-page .gallery-thumbs{

	position: absolute;

	left: 0;

	top: 23.6%;

	width: 100%;

	height: 12px;

	z-index: 1;

	background-repeat: repeat-x;

	background-image: url(../images/about02_page_bgline.png);

	background-position: center center;

	transform: rotate(-5deg);

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

}

.about02-page .gallery-thumbs .swiper-wrapper{

	width: auto;

	margin-left: -260px;

}

.about02-page .gallery-thumbs .swiper-slide{

	cursor: pointer;

	width: 12px;

	height: 12px;

	border-radius: 50%;

	background-color: #f0863b;

	margin: 0 20px;

}

.about02-page .gallery-thumbs .swiper-slide.swiper-slide-active{

	background-color: transparent;

	margin: 0 260px;

}

.about02-page .swiper-button-prev,.about02-page .swiper-button-next{

	width: 20px;

	height: 34px;

	margin-top: -17px;

	background-repeat: no-repeat;

	background-size: 100% auto;

	background-position: center top;

	z-index: 9;

}

.about02-page .swiper-button-prev{

	background-image: url(../images/about02_prev.png);

	left: 16.6%;

}

.about02-page .swiper-button-next{

	background-image: url(../images/about02_next.png);

	right: 16.6%;

}

.about02-page .swiper-button-prev.swiper-button-disabled,.about02-page .swiper-button-next.swiper-button-disabled{

	opacity: 1;

	background-position: center bottom;

}



 

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

	

	.about02-page .header{

		top: 0.9375rem;

		left: 0.9375rem;

		right: 0.9375rem;

	}

	.about02-page .header .logo{

		width: 5.4375rem;

		height: 0.6875rem;

		margin-top: 0.3125rem;

		margin-left: 0.3125rem;

	}

	.about02-page .header .menu{

		width: 1.25rem;

		height: 1.25rem;

	}

	.about02-page .header .menu p{

	    margin-top: 0.1875rem;

	    font-size: 0.5625rem;

		white-space: nowrap;

	}

	.about02-page .main .title{

		font-size: 1.125rem;

		margin-bottom: 2.375rem;

	}

	.about02-page .main .container-box{

		height: auto;

		flex-direction: column;

		-webkit-flex-direction: column;

	}

	.about02-page .gallery-top{

		height: auto;

		width: 95%;

		border: 0.3125rem solid #f0863b;

		margin-bottom: 1.875rem;

	}

	.about02-page .gallery-top .bg{

		height: auto;

		width: 100%;

	}

	.about02-page .gallery-top .swiper-slide{

		padding: 0 3.125rem;

	}

	.about02-page .gallery-top .swiper-slide .line{

		height: 1.5625rem;

		margin-bottom: 0.9375rem;

		margin-top: 1.375rem;

	}

	.about02-page .gallery-top .swiper-slide h5{

		font-size: 0.75rem;

		margin-bottom: 0.75rem

	}

	.about02-page .gallery-top .swiper-slide h3{

		font-size: 2.0625rem;

		margin-bottom: 2.0625rem;

	}

	.about02-page .gallery-top .swiper-slide p{

		font-size: 0.75rem;

		line-height: 1.25rem;

		max-height: 7.5rem;

	}

	.about02-page .gallery-top .swiper-pagination{

		bottom: 1.625rem;

		font-size: 0.5625rem;

	}

	.about02-page .gallery-top .swiper-pagination .swiper-pagination-current{

		font-size: 0.75rem;

	}

	.about02-page .mobile-page-box{

		width: 86.67%;

		margin: 0 auto;

		display: flex;

		align-items: center;

		justify-content: space-between;

		-webkit-display: flex;

		-webkit-align-items: center;

		-webkit-justify-content: space-between;

		height: auto;

	}

	.about02-page .gallery-thumbs{

		position: static;

		height: auto;

		background-image: none;

		transform: rotate(0deg);

		-webkit-transform: rotate(0deg);

	}

	.about02-page .gallery-thumbs .swiper-wrapper{

		display: none;

	}

	.about02-page .gallery-thumbs .swiper-pagination{

		position: static;

	}

	.about02-page .gallery-thumbs .swiper-pagination-bullet{

		width: 0.25rem;

		height: 0.25rem;

		background-color: #aaa;

		margin: 0 0.3125rem;

		opacity: 1;

		vertical-align: middle;

	}

	.about02-page .gallery-thumbs .swiper-pagination-bullet.swiper-pagination-bullet-active{

		background-color: #f0863b;

	}

	.about02-page .swiper-button-prev,.about02-page .swiper-button-next{

		width: 0.625rem;

		height: 1.0625rem;

		margin-top: 0;

		position: static;

	}



}

 



 @media (max-width:900px) {

	 .about02-page .gallery-top{ margin-bottom:0px;

	 } 

	 

	 }