@charset "utf-8";

/* CSS Document */





/******************************



1. basic

2. index banner

3. index.html style



******************************/











/*********************************

1. basic

*********************************/



#logo {

    border:0px!important;

    clip:rect(1px, 1px, 1px, 1px) !important;

    height:1px!important;

    overflow: hidden!important;

    padding:0px!important;

    position:absolute !important;

    width:1px!important;

}



.index #content-wrap {

	margin: 0px;

	padding: 0px;

	float: left;

	width: 100%;

}



.index #content-wrap {



}



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

	

.index #content-wrap {

	/*margin-top: 50px;

	margin-bottom: 50px*/

}

	

}



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

	

.index #content-wrap {

	margin-top: 0px;

}

	

}



/*********************************

2. index banner

*********************************/



.index-banner-section {

	margin: 0px;

	padding: 0px;

	float: left;

	width: 100%;

	position: relative;

}



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

	

.index-banner-section {

	margin-top: 50px;

}

	

}



.swiper-slide {

	float: left;

	width: 100%;

}



.video-fluid {

	width: 100%;

	height: auto;

}



 /*banner:swiper*/

.index-banner .swiper-container {

	width: 100%;

	height: 100%;

}



.index-banner .swiper-slide {

	text-align: center;

	font-size: 18px;

	display: -webkit-box;

	display: -ms-flexbox;

	display: -webkit-flex;

	display: flex;

	-webkit-box-pack: center;

	-ms-flex-pack: center;

    -webkit-justify-content: center;

    justify-content: center;

    -webkit-box-align: center;

    -ms-flex-align: center;

    -webkit-align-items: center;

    align-items: center;

}



.swiper-slide picture {

	float: left;

	width: 100%;

}



.swiper-slide img {

	float: left;

	width: 100%;

}



.swiper1 .swiper-button-prev {

	background-image: url("../images/basic/swiper_arrow_prev1.png")!important;

	background-repeat: no-repeat;

	background-position: center center;

	background-size: contain!important;

	text-indent: -99999px;

	height: 50px!important;

	width: 50px!important;

	z-index: 90;

	left: 0px!important;

}



.swiper1 .swiper-button-next {

	background-image: url("../images/basic/swiper_arrow_next1.png")!important;

	background-repeat: no-repeat;

	background-position: center center;

	background-size: contain!important;

	text-indent: -99999px;

	height: 50px!important;

	width: 50px!important;

	z-index: 90;

	right: 0px!important;	

}



.swiper1 .swiper-pagination-bullet {

	width: 10px;

	height: 10px;

	background-color: #ccc;

	opacity: 1;

}



.swiper1 .swiper-pagination-bullet-active {

	background-color: #76f9ff;

	opacity: 1;

}



.swiper2 .swiper-button-prev {

	background-image: url("../images/basic/swiper_arrow_prev2.png")!important;

	background-repeat: no-repeat;

	background-position: center center;

	background-size: contain!important;

	text-indent: -99999px;

	height: 50px!important;

	width: 40px!important;

	z-index: 90;

	left: 0px!important;

}



.swiper2 .swiper-button-next {

	background-image: url("../images/basic/swiper_arrow_next2.png")!important;

	background-repeat: no-repeat;

	background-position: center center;

	background-size: contain!important;

	text-indent: -99999px;

	height: 50px!important;

	width: 40px!important;

	z-index: 90;

	right: 0px!important;	

}



.swiper2 .swiper-pagination-bullet {

	width: 10px;

	height: 10px;

	background-color: #ccc;

	opacity: 1;

}



.swiper2 .swiper-pagination-bullet-active {

	background-color: #6fba2a;

	opacity: 1;

}



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

	opacity: 0;

}



/*banner content*/

.banner-content {

	float: left;

	width: 100%;

	position: absolute;

	bottom: 25%;

	z-index: 1;

	text-align: center;

}



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

	

.banner-content {

	bottom: 15%;

}

	

.banner-content a {

	width: 107px;

}



.banner-content a img {

	width: 40px;

}

	

.banner-content a span {

	font-weight: 700;

	padding: 3px 12px 3px 12px;

	font-size: 0.8em;

}

	

}



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

	

.banner-content {

	bottom: 25%;

}

	

.banner-content a {

	width: 186px;

}



.banner-content a span {

	font-weight: 700;

	padding: 3px 20px 3px 20px;

	font-size: 1.5em;

}

	

}



.banner-content a {

	display: inline-block;

	position: relative;

}



.banner-content a img {

	display: inline-block;

}



.banner-content a span {

	float: left;

	border: 1px solid #989898;

	color: #989898;

	background-color: #f0f3f4;

	transition: all 0.2s ease-in-out;

}



.banner-content a:hover span {

	background-color: #989898;

	border: 1px solid #989898;

	color: #fff;

}



.arrow-bounce {

	-webkit-animation: arrow 1s infinite;

	-moz-animation: arrow 1s infinite;

	-o-animation: arrow 1s infinite;

	animation: arrow 1s infinite;

	animation-timing-function: cubic-bezier(1, 0, 0, 1);

}



@-webkit-keyframes arrow {

  0% {

    padding-bottom: 7px;

  }

  50% {

    padding-bottom: 2px;

  }

  100% {

    padding-bottom: 7px;

  }

}

@-moz-keyframes arrow {

  0% {

    padding-bottom: 7px;

  }

  50% {

    padding-bottom: 2px;

  }

  100% {

    padding-bottom: 7px;

  }

}

@keyframes arrow {

  0% {

    padding-bottom: 7px;

  }

  50% {

    padding-bottom: 2px;

  }

  100% {

    padding-bottom: 7px;

  }

}



/*********************************

3. index

*********************************/



/*article-section-1*/

.article-section-1 {

	float: left;

	width: 100%;

	padding-top: 8%;

	padding-bottom: 8%;

	background-image: url("../images/index_about_bg.jpg");

	background-position: center;

	background-size: cover;

}



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

	

.article-section-1 {

	padding-top: 10%;

	padding-bottom: 10%;

}

	

}



.article-section-1 .article-top {

	float: left;

	width: 100%;

	margin-bottom: 20px;

	text-align: center;

}



.article-section-1 .article-top .title {

	display: inline-block;

	line-height: 1.2;

	font-size: 3em;

	font-weight: 500;

	padding-left: 20px;

	padding-right: 20px;

	color: #fff;

}



.article-section-1 .article-top .desc {

	float: left;

	line-height: 2;

	width: 100%;

	font-size: 1.1em;

	padding-left: 20px;

	padding-right: 20px;

	padding-top: 40px;

	padding-bottom: 40px;

	color: #dfdfe0;

}



.article-section-1 .article-bottom {

	float: left;

	width: 100%;

	text-align: center;

}



.article-section-1 .article-bottom a {

	display: inline-block;

	border: 1px solid #989898;

	color: #989898;

	transition: all 0.2s ease-in-out;

	font-weight: 700;

	padding: 5px 50px 5px 50px;

	font-size: 1.2em;

}



.article-section-1 .article-bottom a:hover {

	background-color: #989898;

	border: 1px solid #989898;

	color: #fff;

	text-decoration: none;

}



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



.article-section-1 .article-top .title {

	font-size: 1.5em;

}



.article-section-1 .article-top .desc {

	float: left;

	line-height: 1.5;

	font-size: 0.9em;

	padding-top: 20px;

	padding-bottom: 20px;

}

	

.article-section-1 .article-bottom a {

	padding: 3px 12px 3px 12px;

	font-size: 0.8em;

}

	

}



#About {

	float: left;

	width: 100%;

    padding-top: 100px;

    margin-top: -100px;

}



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



#About {

	float: left;

	width: 100%;

    padding-top: 50px;

    margin-top: -50px;

}

	

}



/*article-section-2*/

.article-section-2 {

	float: left;

	width: 100%;

}



.article-section-2 .article, .article-section-2 .article .article-ul {

	float: left;

	width: 100%;

	padding: 0;

	margin: 0;

	list-style: none;

}



.article-section-2 .article .article-ul li {

	float: left;

	width: 100%;

}



.article-section-2 .article .article-ul li .leftBox {

	float: left;

	background-size: cover;

	background-position: center;

}



.article-section-2 .article .article-ul li .rightBox {

	float: left;

	text-align: center;

	background-color: #f4f4f4;

}



.text .title {

	color: #292929;

}



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

	

.article-section-2 .article .article-ul li .leftBox {

	width: 50%;

	height: 710px;

	background-attachment: fixed;

}

	

.article-section-2 .article .article-ul li .rightBox {

	display: flex;

	align-items: center;

	justify-content: center;

	width: 50%;

	height: 710px;

	font-size: 1.2em;

	padding-left: 20px;

	padding-right: 20px;

}



.text .title {

	margin-bottom: 10px;

	font-size: 1.8em;

}



.article-section-2 .article .article-ul li:nth-child(1) .leftBox {

	background-image: url("../images/index_about_photo1.jpg");

}



.article-section-2 .article .article-ul li:nth-child(2) .leftBox {

	background-image: url("../images/index_about_photo2.jpg");

}



.article-section-2 .article .article-ul li:nth-child(3) .leftBox {

	background-image: url("../images/index_about_photo3.jpg");

}

	

}



@media only screen and (min-width: 992px) and (max-width: 1399px) {

	

.article-section-2 .article .article-ul li .leftBox {

	width: 50%;

	height: 710px;

	background-attachment: fixed;

}

	

.article-section-2 .article .article-ul li .rightBox {

	display: flex;

	align-items: center;

	justify-content: center;

	width: 50%;

	height: 710px;

	font-size: 1em;

	padding-left: 20px;

	padding-right: 20px;

}



.text .title {

	margin-bottom: 10px;

	font-size: 1.4em;

}

	

.article-section-2 .article .article-ul li:nth-child(1) .leftBox {

	background-image: url("../images/index_about_photo1.jpg");

}



.article-section-2 .article .article-ul li:nth-child(2) .leftBox {

	background-image: url("../images/index_about_photo2.jpg");

}



.article-section-2 .article .article-ul li:nth-child(3) .leftBox {

	background-image: url("../images/index_about_photo3.jpg");

}

	

}



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

	

.article-section-2 .article .article-ul li .leftBox {

	width: 100%;

	height: 300px;

}

	

.article-section-2 .article .article-ul li .rightBox {

	float: left;

	width: 100%;

	font-size: 0.9em;

	padding-left: 10px;

	padding-right: 10px;

	padding-top: 40px;

	padding-bottom: 40px;

}



.text .title {

	font-size: 1.3em;

}

	

.article-section-2 .article .article-ul li:nth-child(1) .leftBox {

	background-image: url("../images/index_about_photo1-1.jpg");

}



.article-section-2 .article .article-ul li:nth-child(2) .leftBox {

	background-image: url("../images/index_about_photo2-1.jpg");

}



.article-section-2 .article .article-ul li:nth-child(3) .leftBox {

	background-image: url("../images/index_about_photo3-1.jpg");

}

	

}



/*article-section-3*/

.article-section-3 {

	float: left;

	width: 100%;

	padding-top: 5%;

	padding-bottom: 5%;

	background-color: #fdfcfc;

}



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

	

.article-section-3 {

	padding-top: 10%;

	padding-bottom: 10%;

}

	

}



.article-section-3 .article-top {

	float: left;

	width: 100%;

	margin-bottom: 20px;

	text-align: center;

}



.article-section-3 .article-top .title {

	display: inline-block;

	line-height: 1.2;

	font-size: 1.8em;

	font-weight: 500;

	padding-left: 80px;

	padding-right: 80px;

	padding-top: 15px;

	padding-bottom: 15px;

	color: #292929;

	border: 1px solid #292929;

}



.article-section-3 .article-top .desc {

	float: left;

	line-height: 2;

	width: 100%;

	font-size: 1.1em;

	padding-left: 20px;

	padding-right: 20px;

	padding-top: 40px;

	padding-bottom: 40px;

	color: #979696;

}



.article-section-3 .article-bottom {

	float: left;

	width: 100%;

	text-align: center;

}



.article-section-3 .article-bottom a {

	display: inline-block;

	color: #b89d93;

	transition: all 0.2s ease-in-out;

	font-weight: 700;

	padding: 5px 70px 5px 0px;

	font-size: 1.2em;

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

	background-position: 70px center;

	background-size: 40px;

	background-repeat: no-repeat;

}



.article-section-3 .article-bottom a:hover {

	text-decoration: none;

	background-position: 80px center;

}



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



.article-section-3 .article-top .title {

	font-size: 1.5em;

	padding-left: 60px;

	padding-right: 60px;

}



.article-section-3 .article-top .desc {

	float: left;

	line-height: 1.5;

	font-size: 0.9em;

	padding-top: 20px;

	padding-bottom: 20px;

}

	

.article-section-3 .article-bottom a {

	padding: 5px 50px 5px 0px;

	background-position: 40px center;

	font-size: 0.8em;

}



.article-section-3 .article-bottom a:hover {

	background-position: 50px center;

}



}



#equipment-1 {

	float: left;

	width: 100%;

	height: 250px;

	background-image: url("../images/index_equipment_bg.jpg");

	background-position: center;

	background-size: cover;

	background-attachment: fixed;

}



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

	

#equipment-1 {

	background-attachment: scroll;

}

	

}



/*article-section-4*/

.article-section-4 {

	float: left;

	width: 100%;

	padding-top: 5%;

	padding-bottom: 5%;

	background-color: #fdfcfc;

}



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

	

.article-section-4 {

	padding-top: 10%;

	padding-bottom: 10%;

}

	

}



.article-section-4 .article-top {

	float: left;

	width: 100%;

	margin-bottom: 20px;

	text-align: center;

}



.article-section-4 .article-top .title {

	display: inline-block;

	line-height: 1.2;

	font-size: 1.8em;

	font-weight: 500;

	padding-left: 80px;

	padding-right: 80px;

	padding-top: 15px;

	padding-bottom: 15px;

	color: #292929;

	border: 1px solid #292929;

}



.article-section-4 .article-top .desc {

	float: left;

	line-height: 2;

	width: 100%;

	font-size: 1.1em;

	padding-left: 20px;

	padding-right: 20px;

	padding-top: 40px;

	padding-bottom: 40px;

	color: #979696;

}



.article-section-4 .article-bottom {

	float: left;

	width: 100%;

	text-align: center;

}



.article-section-4 .article-bottom a {

	display: inline-block;

	color: #b89d93;

	transition: all 0.2s ease-in-out;

	font-weight: 700;

	padding: 5px 70px 5px 0px;

	font-size: 1.2em;

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

	background-position: 70px center;

	background-size: 40px;

	background-repeat: no-repeat;

}



.article-section-4 .article-bottom a:hover {

	text-decoration: none;

	background-position: 80px center;

}



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



.article-section-4 .article-top .title {

	font-size: 1.5em;

	padding-left: 60px;

	padding-right: 60px;

}



.article-section-4 .article-top .desc {

	float: left;

	line-height: 1.5;

	font-size: 0.9em;

	padding-top: 20px;

	padding-bottom: 20px;

}

	

.article-section-4 .article-bottom a {

	padding: 5px 50px 5px 0px;

	background-position: 40px center;

	font-size: 0.8em;

}



.article-section-4 .article-bottom a:hover {

	background-position: 50px center;

}



}

 

#service-1 {

	float: left;

	width: 100%;

	height: 250px;

	background-image: url("../images/index_service_bg.jpg");

	background-position: center;

	background-size: cover;

	background-attachment: fixed;

}



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

	

#service-1 {

	background-attachment: scroll;

}

	

}



/*article-section-5*/

.article-section-5 {

	float: left;

	width: 100%;

	padding-top: 5%;

	padding-bottom: 5%;

	background-image: url("../images/index_production_bg.jpg");

	background-position: center;

	background-size: cover;

}



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

	

.article-section-5 {

	padding-top: 10%;

	padding-bottom: 10%;

}

	

}



.article-section-5 .article-top {

	float: left;

	width: 100%;

	margin-bottom: 20px;

	text-align: center;

}



.article-section-5 .article-top .title {

	display: inline-block;

	line-height: 1.2;

	font-size: 1.8em;

	font-weight: 500;

	padding-left: 80px;

	padding-right: 80px;

	padding-top: 15px;

	padding-bottom: 15px;

	color: #292929;

	border-bottom: 1px solid #292929;

}



.article-section-5 .article-top .desc {

	float: left;

	line-height: 2;

	width: 100%;

	font-size: 1.1em;

	padding-left: 20px;

	padding-right: 20px;

	padding-top: 40px;

	padding-bottom: 40px;

	color: #575757;

}



.article-section-5 .article-bottom {

	float: left;

	width: 100%;

	text-align: center;

}



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



.article-section-5 .article-top .title {

	font-size: 1.5em;

	padding-left: 60px;

	padding-right: 60px;

}



.article-section-5 .article-top .desc {

	float: left;

	line-height: 1.5;

	font-size: 0.9em;

	padding-top: 20px;

	padding-bottom: 20px;

}



}



.mobileMode {

	display: none;	

}



.pcMode {

	display: block;

}



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



.pcMode {

	display: none;

}



.mobileMode {

	display: block;

}

	

}



#Production {

	float: left;

	width: 100%;

    padding-top: 100px;

    margin-top: -100px;

}



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



#Production {

	float: left;

	width: 100%;

    padding-top: 50px;

    margin-top: -50px;

}

	

}



/*article-section-6*/

.article-section-6 {

	float: left;

	width: 100%;

	padding-top: 5%;

	padding-bottom: 5%;

}



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

	

.article-section-6 {

	padding-top: 10%;

	padding-bottom: 10%;

}

	

}



.article-section-6 .article-top {

	float: left;

	width: 100%;

	margin-bottom: 20px;

	text-align: center;

}



.article-section-6 .article-top .title {

	display: inline-block;

	line-height: 1.2;

	font-size: 1.8em;

	font-weight: 500;

	padding-left: 60px;

	padding-top: 15px;

	padding-bottom: 15px;

	color: #565656;

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

	background-position: left center;

	background-repeat: no-repeat;

}



.article-section-6 .article-top .desc {

	float: left;

	line-height: 2;

	width: 100%;

	font-size: 1.1em;

	padding-left: 20px;

	padding-right: 20px;

	padding-top: 40px;

	padding-bottom: 40px;

	color: #979696;

}



.article-section-6 .article-bottom {

	float: left;

	width: 100%;

	text-align: center;

}



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



.article-section-6 .article-top .title {

	font-size: 1.5em;

}

	

}



#Contact {

	float: left;

	width: 100%;

    padding-top: 100px;

    margin-top: -100px;

}



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



#Contact {

	float: left;

	width: 100%;

    padding-top: 50px;

    margin-top: -50px;

}

	

}



#form {

	margin: auto;

	max-width:650px;

}



#form .form-words1 {

	float: left;

	height: 47px;

	width: calc(100% - 51px);

	padding: 0;

	margin: 0;

	padding-left: 15px;

	padding-right: 15px;

	margin-bottom: 35px;

}



#form .form-words2 {

	float: left;

	height: 47px;

	width: 100%;

	padding: 0;

	margin: 0;

	border: 1px solid #dadada;

	padding-left: 15px;

	padding-right: 15px;

	margin-bottom: 35px;

}



#form .form-words3 {

	float: left;

	height: 150px;

	width: 100%;

	padding: 15px;

	padding-top: 10px;

	padding-bottom: 10px;

	margin: 0;

	border: 1px solid #dadada;

	margin-bottom: 35px;

}



#form input {

    border: 1px solid #dadada;

}



#form input:focus, #form textarea:focus {

    outline:none;

}



.formCodeText {

	text-align: right;

	line-height: 78px;

	margin-bottom: 35px;

}



.form-icon {

    border: 1px solid #dadada;

	border-left: none;

	box-sizing: border-box;

}





.formBtn .form-btn-submit {

	display: inline-block;

	line-height: 1.2;

	font-size: 1.2em;

	font-weight: 500;

	padding-left: 60px;

	padding-right: 60px;

	padding-top: 7px;

	padding-bottom: 7px;

	color: #292929;

	border: 1px solid #292929;

	background-color: #fff;

	transition: all 0.2s ease-in-out;

}



.formBtn .form-btn-submit:hover {

	color: #fff;

	border: 1px solid #fff;

	background-color: #292929;

}



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



#form .form-words1 {

	margin-bottom: 10px;

}



#form .form-words2 {

	margin-bottom: 10px;

}



#form .form-words3 {

	margin-bottom: 10px;

}



.formCodeText {

	text-align: left;

	line-height: 1.4;

	margin-bottom: 10px;

}

	

.formCode {

	margin-bottom: 20px;

}

	

}



/*input focus*/

div.location > span.holder {

	position: absolute;

	margin: 5px 8px;

	color: #575757;

	cursor: auto;

	z-index: 1;

	left: 24px;

	top: 5px;

}



div.location > span.holder > span.gray {

	color: #a1a0a0;

	font-size: 0.8em;

}