input{
	height: 34px;
    font-size: 16px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 50px;
    width: 100%;
    box-sizing: border-box;
	
}

select{
	height: 34px;
    font-size: 16px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 3px;
    width: 100%;
    box-sizing: border-box;
	
}

option{
	margin:5px;
	
}

textarea{
    font-size: 16px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 3px;
    width: 100%;
    box-sizing: border-box;	
}

.form input::-webkit-input-placeholder {
	opacity:0;
}

.form input:-ms-input-placeholder {
	opacity:0;
}

.form input::placeholder {
	opacity:0;
}


.form .phone input::-webkit-input-placeholder { 
	opacity:1;
}

.form .phone input:-ms-input-placeholder {
	opacity:1;
}

.form .phone input::placeholder {
	opacity:1;
}

.form textarea::-webkit-input-placeholder {
	opacity:0;
}

.form textarea:-ms-input-placeholder {
	opacity:0;
}

.form textarea::placeholder {
	opacity:0;
}

.h1{
	font-size:40px;
	color:#000;
	font-weight:700;
	margin-bottom:30px;
	text-align:center;
}

.h1 span{
	font-size:40px;
	color:#5ec92e;
	font-weight:500;
	margin-bottom:30px;
	text-align:center;
}


.h2{
	font-size:24px;
	font-weight:700;
	
}


.page_banner{
	border-bottom:30px solid #92308d;
	background-repeat:no-repeat;
	background-position:right;
    padding-bottom: 150px;	
	position:relative;	
	background-size:cover;
	clear:both;
}

.page_container{
	padding:120px 0px;
}


.btn_container{
	text-align:center;
	margin-top:40px;
	
}

.btn{
	display:inline-block;
	background-color:#5ec92e;
	border:1px solid #5ec92e;
	transition:0.6s all;
	
}
.btn:hover{
	border-radius:8px;
	transition:0.6s all;
	
}

.btn a{
	display:inline-block;
	padding:12px 30px;
	color:#fff;
	font-weight:700;
	
}

.btn_w{
	background-color:#fff;
	border:1px solid #5ec92e;
	
}


.btn_w a{
	color:#525252;
	
}
.btn_g{
	background-color:#ccc;
	border:1px solid #ccc;	
}


.del_btn{
	text-align:center;
}

.del_btn .btn{
	background:transparent;
	border-radius:5px;
}

.del_btn .btn a{
	color:#5ec92e;
	padding:8px 20px;
}


.add_new.btn{
	background:transparent;
	border-radius:50px;
}

.add_new.btn a{
	color:#5ec92e;
	padding:8px 20px;
	font-size:12px;
}

.control_menu{
	margin-top:15px;
	
}

.qty{
	text-align:right;
	
}


.qty input{
	text-align:right;
	width:60%
}

#linecard .container{overflow:hidden;}

.lineCard_area{
	width:16.66%;
	float:left;
}

.lineCard_area .lineCard{
	height:210px;
	position:relative;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
	cursor:pointer;
	margin:10px;
}

.lineCard_area:hover .lineCard{
	transform: rotateY(180deg);
}

.lineCard_area .lineCard .front{
	background-color:#eee;
}

.lineCard_area .lineCard .back{
	background-color:#5ec92e;
    transform: rotateY(180deg);
}

.lineCard_area .lineCard img{
	width:80%;
	margin:auto;
	padding:10px;
}

.lineCard_area .lineCard .front, .lineCard_area .lineCard .back{
	border-radius:15px;
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}





.about_intro{
	width:60%;
	margin-left:auto;
	margin-right:auto;
	line-height:2em;
	letter-spacing:0px;
	font-weight:900;
	text-align:center;
	padding:0px 0 90px 0;
	font-size:18px;
}


.about_area{
	background-image:url('../img/about_bg.jpg');
	background-repeat:no-repeat;
	background-size:cover;
	background-attachment:fixed;
	padding:80px 0px 120px 0px;

}


.about_area .container{
	position:relative;
	padding-top:1900px;
	
}



.about_area p{

	letter-spacing:2px;	
	
}

.about_container{
	position:absolute;
	width:100%;
	top:0px;
	z-index:20;	
	box-sizing: border-box;
	left:0px;
	line-height:2em;
	font-size:18px;
}

.about_bg{
	position:relative;
	width:100%;
	border-radius:15px;
	box-sizing: border-box;
	transform: skew(0deg, 0deg);
	height:1760px;
	background-color:#fff;
	transition:all 0.8s; 
}



.about_slogan{
	margin-bottom:80px;
	font-size:30px;
	
}

.about_slogan .line1{
	color:#5ec92e;
	margin-bottom:30px;
	
}

.about_slogan .line2{
	font-weight:700;
	margin-left:120px;
	
}

.animate__animated .about_bg{
	transform: skew(0deg, -4deg);
	transition:all 0.8s; 
	transition-delay:0.8s;


}


.about_content{
	position:absolute;
	top:0px;
	height: 800px;
	padding:120px;	
	box-sizing:border-box;
}



.about_content_part1{
	float:left;
	width:100%;
}

.about_content_part2{
	float:left;
	width:100%;
}

.aboutUs_IMG1{
	float:left;
	width:30%;
}
.aboutUs_word1{
	float:left;
	width:70%;
}
.aboutUs_word1 p{
	width:100%;
	padding:0 20px;
}

.aboutUs_word2{
	float:left;
	width:70%;
	padding:30px 0;
}
.aboutUs_word2 p{
	width:100%;
	padding:0 20px;
}

.aboutUs_IMG2{
	float:left;
	width:30%;
	padding:30px 0;
}

.aboutUs_word3{
	float:right;
	width:68%;
	padding:30px 0 30px 20px;
}

.aboutUs_word3 p{
	width:100%;
}


.video_container{ width:50%; float:left;}

.video_container{ margin:auto;}

#milestone .container{}

.milestone_intro{
	width:100%;
	margin-left:auto;
	margin-right:auto;
	line-height:2em;
	letter-spacing:0px;
	font-weight:900;
	padding:0px 0 90px 0;
	font-size:18px;
}

.milestone{
	width:33.33%;
	padding:20px;
	float:left;
	margin:0 -20px;
    position: relative;
    z-index: 3;
}

.milestone_office{
	padding:40px 60px;
	border-radius:15px;
	background-size:cover;
	margin:0 20px;
	min-height:380px;
	background-position:bottom;
}

.milestone_MA{background-image:url('../img/img-milestone-MA.jpg')}
.milestone_SZ{background-image:url('../img/img-milestone-SZ.jpg')}
.milestone_HK{background-image:url('../img/img-milestone-HK.jpg')}

.milestone_office p{width:90%; text-align:left;}
.milestone_office p.title{    
	font-size: 24px;
    font-weight: 700;
	margin-bottom: 30px;
}

.contact .milestone p{text-align:left;}

.milestone p{color: #525252;}

.milestone_office span{color: #5ec92e;}

.milestone_office p.address,.milestone_office p.tel,.milestone_office p.email{padding-left:30px;position:relative;padding-bottom:30px;}

.milestone_office p.address:before{content:""; height:24px; width:24px; background:url('../img/icon-address.png'); position:absolute; left:0}
.milestone_office p.tel:before{content:""; height:24px; width:24px; background:url('../img/icon-tel.png'); position:absolute; left:0}
.milestone_office p.email:before{content:""; height:24px; width:24px; background:url('../img/icon-email.png'); position:absolute; left:0}

.milestone_part2{background-color:#fff; margin-top:280px;padding-bottom:80px;}
.milestone_part2 p{
	width:60%;
	margin-left:auto;
	margin-right:auto;
	line-height:2em;
	letter-spacing:0px;
	font-weight:900;
	padding-top:60px;
	font-size:18px;
	overflow:auto;
	
}

.milestone_part2 .btn_container{text-align: center;margin-bottom: 40px;}
.btn{
	display: inline-block;
    border-radius: 50px;
    background-color: #5ec92e;
    border: 1px solid #5ec92e;
    transition: 0.6s all;
}

.milestone_part3{ 
	margin:0 auto; 
	background:url('../img/BG-milestone.jpg') right bottom #f0f7f0 no-repeat; 
	padding:60px 0 80px;
}

.milestone_part3 .container{}

.milestone_part3 .about_bg{
    height: auto;
	width: 70%;
	transform: skew(0deg, -4deg);
}

.milestone_part3_content{
    top: 100px;
    height: auto;
    padding:80px 30px 30px;
    box-sizing: border-box;
	transform: skew(0deg, 4deg);
}

.milestone_part3_content p{
	width:100%;
	margin:0;
	padding-bottom:30px;
}




.culture{ 
	margin:0 auto; 
	padding:60px 0 80px;
	overflow: auto;
}

.cultureContainer{
	position: relative;
    min-height: 1px;
	float:left;
	transform: skew(0deg, -4deg);
	margin-bottom:80px;
	}


.gallery img{border:4px solid #fff;}
.gallery img:hover{border:4px solid #efc56a;}

.culture .about_bg{
    height: auto;
	padding-left:15px;
	padding-right:15px;
	padding-bottom: 20px;
	float:left;
}

.culture_content{
    top: 100px;
    height: auto;
    padding:80px 30px 30px;
    box-sizing: border-box;
	transform: skew(0deg, 4deg);
}

.culture_content p{
	width:100%;
	margin:0;
	padding-bottom:30px;
}

.culture p.title{    
	font-size: 24px;
    font-weight: 700;
	margin-bottom: 30px;
}

.culture .gallery .col-xs-6{padding:0 6px;}


.btn_w{
	background-color: #fff;
    border: 1px solid #5ec92e;
}
	
.btn a{
	display: inline-block;
    padding: 12px 30px;
    color: #fff;
    font-weight: 700;
}

.btn_w a{
	color: #525252;
}

.btn:hover{
	border-radius: 8px;
    transition: 0.6s all;
}

#aboutus .page_container, #milestone .page_container{
	padding-bottom:0px;
	
}

#quality .page_container, #milestone .page_container, #News .page_container, #QC .page_container, #contactUs .page_container,#advantages .page_container, #culture .page_container{
	background-color:#edefef;
	
}


.qc_intro{
	font-weight:700;		
}

.qc_intro span{
	margin-left:40px;
	display:block;
	font-weight:500;	
	
}

.qc_list{
	margin-top:80px;
	
}

.qc_list .left{
	float:left;
	width:50%;
	padding:5px;
	box-sizing:border-box;
	
}

.qc_list .right{
	float:left;
	width:50%;
	padding:5px;
	padding-top:50px;
	box-sizing:border-box;
	
}

.qc_list .item{
	width:100%;
	padding:5px 0;
	

	
}

.qc_list .text_container{

	background-color:#fff;
	height:450px;
	border-radius:15px;		

}

.qc_list .text_container .col_td{
	height:450px;
	padding:80px;
	box-sizing:border-box;		
}


.qc_list .text_container .title{
	font-size:24px;
	font-weight:700;
	margin-bottom:30px;
	position:relative;	
	padding-left:68px;
}


.qc_list .text_container.item1 .title::before{
	content:"1";
	position:absolute;
	left:0px;
	top:-8px;
	color:#fff;
	background-color:#5ec92e;
	padding:8px;
	height: 50px;
	width: 50px;
	border-radius:50px;
	text-align:center;
	box-sizing:border-box;
}


.qc_list .text_container.item2 .title::before{
	content:"2";
	position:absolute;
	left:0px;
	top:-8px;
	color:#fff;
	background-color:#5ec92e;
	padding:8px;
	height: 50px;
	width: 50px;
	border-radius:50px;
	text-align:center;
	box-sizing:border-box;
}


.qc_list .text_container.item3 .title::before{
	content:"3";
	position:absolute;
	left:0px;
	top:-8px;
	color:#fff;
	background-color:#5ec92e;
	padding:8px;
	height: 50px;
	width: 50px;
	border-radius:50px;
	text-align:center;
	box-sizing:border-box;
}


.qc_list .text_container .content{
	font-size:18px;
	padding-left:68px;
}

.qc_list .img_container{
	background-position:50%;
	background-repeat:no-repeat;
	background-size:cover;
	width:100%;
	height:450px;	
	border-radius:15px;
	
}
#QC .container, #advantages .container{overflow:hidden;}
#certificate .container{width:750px;}
#certificate .container img{margin:auto;}
.quality{float:left; width:33%; margin: -20px; padding: 20px;}
.quality_list{border-radius:15px; overflow:auto; margin:20px;}
.quality_list .black{padding:20px; background-color:#1a1a1a;margin: auto; text-align: center;}
.quality_list .black p{width:100%; margin:auto; color:#fff;text-align: center;}
.quality_list .white{padding:20px; background-color:#fff;margin: auto; min-height: 270px;}
.quality_list .white p{width:100%; margin:auto; color:#525252;text-align: left;font-size:18px;}



.advantages{float:left; width:50%; margin: -20px; padding: 20px;}
.advantages2{margin-top:60px;}
.advantages_list{border-radius:15px; overflow:auto; margin:20px;}
.advantages_list .list{padding:20px; background-color:#1a1a1a;margin: auto; text-align: center;background-size:cover; background-position:bottom;}
.advantages_list .list p{width:80%; margin:auto; color:#fff;text-align: center; font-size:24px; font-weight:700;}

.advantages_list .list1{background-image:url('../img/BG-advantages1.jpg')}
.advantages_list .list2{background-image:url('../img/BG-advantages2.jpg')}
.advantages_list .list3{background-image:url('../img/BG-advantages3.jpg')}
.advantages_list .list4{background-image:url('../img/BG-advantages4.jpg')}
.advantages_list .list5{background-image:url('../img/BG-advantages5.jpg')}
.advantages_list .list6{background-image:url('../img/BG-advantages6.jpg')}
.advantages_list .list7{background-image:url('../img/BG-advantages7.jpg')}

.page_container.container{width:1600px; max-width:90%; margin:auto;}
.product_list .Part_title{padding-bottom:25px;}
.product_list .Part_title b{font-size:25px;}
.product_list .part1{width:100%; overflow:auto;}
.product_list .left{float:left; width:36%;}
.product_list .right{float:left;padding-left:25px; width:60%;}
.product_list .Part_subtitle{width:40%; padding:10px 0;float:left;}
.product_list .Part_subtitle b{font-size:18px;}
.product_list .Part_info{padding:10px 0;}
.product_list .right p:nth-of-type(1){padding-top:0;}
.product_list .right span{font-weight:600;}
.product_list .part1 .css_td.add_btn{float:left;padding-left:25px;}
.product_list .details{width:100%;background-color:#edefef; padding:0 15px;}
.product_list .details_title{padding:60px 0 25px;font-size:25px;}
.product_list .details span{width:50%;}
.product_list .details:nth-of-type(odd){background-color:#f7f7f7;}



.add_btn{
	text-align:center;
}

.add_btn .btn{
	background:transparent;
	border-radius:0px;
}

.add_btn .btn:hover{
	border-radius:5px;
}

.add_btn .btn a{
	color:#5ec92e;
	padding:8px 20px;
}

.added_btn{
	text-align:center;
}


.added_btn .btn{
	background:transparent;
	border-radius:0px;
	border:0px;
}

.added_btn .btn:hover{
	border-radius:0px;
}

.added_btn .btn a{
	color:#ccc;
	padding:8px 20px;
}



.search_section{
	padding:0px 0 80px 0; 
	
}
 
.search_section .search{
	position:relative;
	
}

.search_section .search input{
	border-radius:3px;	
	border:0px;
	background-color:#edefef;
	border-radius:50px;
	height: 63px;
	font-size:20px;
	font-weight:700;
	padding-left:25px;
}

.search_section .search input::placeholder {
	font-size:20px;
	font-weight:700;
	color:#a4a4a4;
}

.search_section .search .search_btn{
	background-color:#5ec92e;
	height:40px;
	display:inline-block;
	border-radius:3px;		
	padding:8px 15px;
	box-sizing:border-box;
	font-size:18px;
	color:#fff;
	border-radius: 50px;
    height: 55px;
	padding-top:15px;
	position:absolute;
	right:4px;
	top:4px;
}

.product_list{
	padding:0 30px;
	
}

.product_list .css_table .css_td{
	font-size:16px;
	padding:15px;
	
}

.product_list .css_table .css_td.product_photos{
	max-width:100px;
	min-width:64px;
}



#contactUs .page_container{padding-top:0; }

.contact input, .contact textarea, .contact select{
	border-radius: 50px;
	padding:10px 25px;
}

.contact p{
	font-size:20px;
	text-align:center;
}

.contact .contact_info{
	text-align:left;
	padding-bottom:60px;
	overflow:hidden;
	background-image:url('../img/BG-contactUs.jpg');
	background-size:cover;
}

.contact .contact_info h3{
	text-align:left;
	width:90%;
	margin-left:auto;
	margin-right:auto;
}


.contact .part .contact_info .item{
	width:80%;
	margin-left:auto;
	margin-right:auto;
	border-bottom:1px solid #333;
	margin-bottom:15px;
}


.contact .part .contact_info .label{
	display:block;
	margin-bottom:10px;
	font-weight:700;
	font-size:18px;
	width:90%;
	margin-left:auto;
	margin-right:auto;
}

.contact .part .contact_info .info{
	display:block;
	font-size:18px;
	color:#737373;
	margin-bottom:15px;
	width:90%;
	margin-left:auto;
	margin-right:auto;
}


.contact .part .contact_info .row{
	width:90%;
	margin-left:auto;
	margin-right:auto;
}


.contact .part .contact_info .col{
	padding:0px;
}


.contact .part .contact_info .col .label{
	width:100%;
	margin-left:auto;
	margin-right:auto;
}

.contact .part .contact_info .col .info{
	width:100%;
	margin-left:auto;
	margin-right:auto;
}

.contact .part2{
	padding-top:20px;
	padding-bottom:180px;
	
}

.contact_form{
	margin-top:60px;
}

.contact_form .input_container{
	width:100%;
	min-height:105px;
}

.contact_form .input_container input{
	width:100%;
	height:50px;
	background-color:#e6e6e6;
	border:0px;
	font-size:18px;
	box-sizing:border-box;
}

.contact_form .input_container select{
	width:100%;
	height:50px;
	background-color:#e6e6e6;
	border:0px;
	font-size:18px;
	box-sizing:border-box;

}


.contact_form .input_container textarea{
	width:100%;
	background-color:#e6e6e6;
	border:0px;
	font-size:18px;
	box-sizing:border-box;
	resize: none;

}

.contact_form .input_container select#interested{
	margin-bottom:10px;

}

.contact_form .input_container .label{
	font-size:18px;
	margin-bottom:5px;

}

.contact_form .input_container input::-webkit-input-placeholder{
	font-size:18px;
}

.contact_form .input_container input:-ms-input-placeholder{
	font-size:18px;
}

.contact_form .input_container input::placeholder{
	font-size:18px;
}


.contact_form .input_container input:focus{
	outline: none;
}

.contact_form .input_container select:focus{
	outline: none;
}

.contact_form .input_container textarea:focus{
	outline: none;
}

.contact_form .input_container span{
	color:red;
	font-size:12px;
}

.contact_form .input_container .warning{
	text-align:right;
	display:none;
}

.contact_form .input_container .warning.active{
	display:block;
}

.contact_form .row .col-6:first-child{
	padding-right:50px;
}

.contact_form .row .col-6:last-child{
	padding-left:50px;
}
.contact .staff_info{padding:60px  0; background-color: #fff;}
.contact .staff_info .staff{ padding: 30px 10px; background: #eee; margin: 10px 0; border-radius: 10px;}
.contact .staff_info .staff p{ width:100%; text-align:left; font-size:18px;}
.contact .staff_info .staff p img{float:left;}
.contact .staff_info .staff p.name{font-size:24px; color:#5ec92e; font-weight:700;padding-bottom:10px;}

.btn_container{
	text-align:center;
	width:100%;
	margin-top:30px;
}


.btn_container .button{
	display:inline-block;
	margin-left:10px;
	margin-right:10px;
	padding-top:10px;
	padding-bottom:10px;
	cursor:pointer;
}

.btn_container .button.main{
	background-color:#000;

}

.btn_container .button a{
	color:#fff;
	font-weight:700;
	padding:10px 50px;
}


.btn_container .button.grey{
	background-color:#aaa;
}

@media (max-width: 1529px){
	.lineCard_area{
		width:25%;
}
	.lineCard_area .lineCard{
		height:240px;
}

.aboutUs_word2{
	width:100%;
}

.aboutUs_word2 p{
	padding:0;
}

.aboutUs_IMG2{
	float: none;
    text-align: center;
	width:100%;
	padding:0;
}

.aboutUs_word3{
	float:left;
	width:100%;
}

.aboutUs_word3 p{
	float:left;
	padding:0;
	width:100%;
}

.about_area .container{
	padding-top:2900px;
}

.about_bg{
	height: 2700px;
}


}


@media (max-width: 1230px){
	
.about_area .container{
	padding-top:3000px;
}

.about_bg{
	height:2800px;
}
}

@media (max-width: 1200px){
	
.about_area .container{
	padding-top:3000px;
}

.about_bg{
	height:2800px;
}
}


@media (max-width: 1299px){


	.about_intro{
		width:80%
		
	}
	.milestone_office{
	padding:20px;
	min-height:420px;
	}
	
	.milestone_part3_content{
    padding:60px 30px 30px;
}
.cultureContainer{
	width: 100%;
}
    .quality{
		width:50%;
}
    .quality_list .white{
		min-height: 330px;
}

}

@media (max-width: 991px){
	.about_content {
    position: static; 
    height: auto;
    padding: 80px 20px;
    box-sizing: border-box;
    background: #fff;
	border-radius:15px;
		}
	
	.about_bg {
    height: auto;

	}
	
	.aboutUs_IMG1{
		width:100%;
	}
	
	.aboutUs_word1{
		width:100%;
		
	}
	.aboutUs_word1 p{
		padding:0;
	}
	
	.about_intro{
		width:80%
		
	}	
	
	.about_intro{
		width:100%
		
	}
	
	.about_container{
		position:static;
		
	}
	
	.video_container{width:100%; float:none;}
	
	.about_area .container{
		padding-top: 80px;
		
	}
	
	.about_slogan{
		margin-top:80px;
		
	}
	
	.about_area p{
		width:100%;
		
	}
			
	.milestone{
		width:100%;
	}
	
	.milestone_office{
		min-height:auto;
	}
	
	
	
	.lineCard_area{
		width:50%;
}
	.lineCard_area .lineCard{
		height:240px;
}

	.product_list .css_table .css_td.product_photos{
		max-width:unset;
		min-width:unset;
	}
	
	.qty {
		text-align: left;
	}
	
	.product_list .Part_subtitle{
		width:100%;
	}
	
	.product_list .Part_info{
		width:100%;
	}
	
	.product_list p{
		width:100%;
	}
	.product_list .left,.product_list .right,.product_list .part1 .css_td.add_btn{
		float:none;
		padding-left:0;
	}
	.product_list .right{
		padding:40px 0;
	}
	.product_list .details{
		width:auto;
	}
	
	.product_list .left{ width:100%;}
}
	
@media (max-width: 767px){
	.milestone_part3 .about_bg{
		width:100%;
	}
	
	.lineCard_area .lineCard{
		height:40vw;
}
	.quality{
		width:100%;
}
    .quality_list .white{
		min-height: auto;
}
	.advantages{
		width:100%
	}
	.advantages2{
		margin-top: -20px;
		padding-top: 0;
	}
	#certificate .container{
		width:auto;
	}
}



.news_area .news{
	width:100%;
	background-color:#fff;
	padding:60px 0;
	max-width:1200px;
	margin:0 auto 60px;
	text-align:center;
}

.news_area .news p.date{
    font-size: 16px;
	color:#525252;
	width:70%;
	text-align:left;
}

.news_area .news p.subtitle{
	font-weight:700;
    font-size: 20px;
	color:#525252;
	width:70%;
	text-align:left;
}

.news_area .news .imgArea{
	text-align: center;
    width: 70%;
    margin: auto;
	padding:40px 0;
	}

.news_area .news .wordArea{
	width:70%;
	margin:auto;
	}
	
.news_area .news .wordArea p{
    font-size: 16px;
	color:#525252;
	text-align:left;
	width:100%;
}
