/**
 * 作者:lianghaolv
 * QQ:1948712434
 * 时间:2020-09-30
 * 说明:本css文件首页内的样式。
 */

/* ********************************* */
#banner_box img{
	width: 100%;
	height: auto;
}

/* 粉末治金制品大全 */
#product{
	margin-top: 50px;
}

#product .title {
	font-size: 32px;
	font-weight: 400;
	text-align: center;
}

#product .eng_name {
	color: #0169CA;
	font-size: 28px;
	margin-top: 10px;
	margin-bottom: 20px;
	text-align: center;
}

#product .nav_box {
	display: flex;
	display: -webkit-flex;
	justify-content: space-between;
	-webkit-justify-content: space-between;
}

#product .nav_item {
	cursor: pointer;
	width: 305px;
	height: 150px;
	display: flex;
	display: -webkit-flex;
	justify-content: space-between;
	-webkit-justify-content: space-between;
	padding: 15px;
	box-sizing: border-box;
	box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
}

#product .nav_item .cont {
	width: 130px;
}

#product .nav_item .sub_title {
	font-size: 16px;
	font-weight: 400;
}

#product .nav_item .remarks {
	font-size: 14px;
	margin-top: 8px;
	color: #6F6F6F;
}

#product .nav_item .img {
	width: 120px;
	width: 120px;
}

#product .nav_box .nav_item_on{
	background-color: #386697;
}

#product .nav_box .nav_item_on *{
	color: #fff;
}


/*****nav对应的内容****/
#product .nav_cont {
	margin-top: 75px;
	height: 700px;
	overflow: hidden;
	margin-bottom: 50px;
	overflow: hidden;
}

#product .detail_box {
	position: relative;
	display: flex;
	display: -webkit-flex;
	justify-content: space-between;
	-webkit-justify-content: space-between;
	align-items: flex-end;
	flex-wrap: wrap;
}

#product .nav_cont a{
	margin-bottom: 30px;
	text-align: center;
}

#product .nav_cont .big_img {
	min-width: 600px;
	min-height: 400px;
	width: 600px;
	height: 400px;
}

#product .nav_cont .mini_img {
	min-width: 300px;
	min-height: 200px;
	width: 300px;
	height: 200px;
	float: left;
}

#product .nav_cont .name {
	line-height: 50px;
	background-color: #7F7F7F;
	color: #fff;

}

#product .detail_box>a:nth-child(2) .name,
#product .detail_box>a:nth-child(3) .name {
	color: #101010;
	background-color: transparent;
}

#product .detail_box .text {
	position: absolute;
	right: 0;
	top: 0;
	width: 600px;
	font-size: 18px;
	text-align: justify;
}


#product .detail_box .text p {
	font-size: 16px;
	color: #6F6F6F;
	margin-top: 10px;
	line-height: 32px;
	overflow: hidden;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:3;
	display: -webkit-box;
}

/* ******************* */
#quality {
	width: 100%;
	height: 705px;
	background-color: rgba(0,0,0,0.7);
	color: #fff;
	text-align: center;
	box-sizing: border-box;
	position: relative;
	background-position: 50% 0;
	overflow: hidden;
	margin-bottom: 35px;
	display: flex;
	display: -webkit-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
}

#quality::before{
	position: absolute;
	width: 100%;
	height: 100%;
	content: "";
	top: 0;
	left: 0;
	background-image: url('/template/khw/img/home_bg_2.jpg');
	background-repeat: no-repeat;
	z-index: -1;
	display: block;
}

#quality .title{
	font-weight: 400;
	font-size: 38px;
	line-height: 64px;
}

#quality .remarks{
	font-size: 24px;
    line-height: 44px;
    opacity: 0.8;
    margin-bottom: 40px;
}

#quality .sub_title{
	font-size: 26px;
    line-height: 55px;
}

#quality .sub_rem{
	font-size: 16px;
    line-height: 25px;
}

#quality .cont_box{
	display: flex;
	display: -webkit-flex;
	align-items:center;
}

#quality .cont_item{
	width: 466px;
	height: 360px;
}

#quality .cont_item:nth-child(2){
	height: 466px;
}

#quality .cont_item .bg{
	width: 466px;
	height: 466px;
	border-radius: 50%;
}

#quality .left_item,
#quality .right_item{
	display: flex;
	display: -webkit-flex;
	justify-content: space-between;
	text-align: right;
	align-items: center;
} 

#quality .left,
#quality .right{
	display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
}

#quality .right_item{
	text-align: left;
}

#quality .youshi_icon{
	width: 90px;
	height: 90px;
	border-radius: 50%;
}

#quality .youshi_cont{
	width: calc(100% - 120px);
}

/* *********四大优势*********** */
#merit {
	overflow: hidden;
	margin-bottom: 40px;
}

#merit .row {
	position: absolute;
    left: 28%;
    top: 0;
    width: 0;
    height: 260px;
    border-right: 2px solid #C9C9C9;
}

#merit .col,
#merit .col_right {
	position: absolute;
    left: -50%;
    top: 260px;
    width: 92%;
    border-bottom: 2px solid #C9C9C9;
    z-index: -1;
}

#merit .col_right {
	left: 80%;
	z-index: -2;
}

#merit .merit_box {
	margin-top: 35px;
	position: relative;
	display: flex;
	display: -webkit-flex;
	justify-content: space-between;
	-webkit-justify-content: space-between;
	flex-wrap: wrap;
}

#merit .merit_item {
	width: 350px;
	height: 260px;
	padding-right: 50px;
	box-sizing: border-box;
	line-height: 26px;
	font-size: 14px;
	text-align: justify;
}

#merit .merit_item:nth-child(3) {
	height: 250px;
}


#merit .merit_four {
	width: 260px;
	padding-right: 10px;
}

#merit .title {
	position: relative;
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 20px;
	background-color: #fff;
}

#merit .title_num {
	display: inline-block;
	width: 50px;
	height: 50px;
	background-color: #3E82DE;
	line-height: 50px;
	font-size: 32px;
	text-align: center;
	color: #fff;
	font-weight: 400;
	margin-right: 15px;
}

#merit .big_img {
	width: 540px;
	height: 260px;
}

#merit .mini_img {
	width: 275px;
	height: 250px;
}

/* *******定制咨询******* */
#details {
	height: 150px;
	display: flex;
	display: -webkit-flex;
	overflow: hidden;
}

#details .bg {
	width: 68.5%;
}

#details .cont {
	width: 31.5%;
	padding: 18px;
	box-sizing: border-box;
	background-color: #386697;
	color: #fff;
	font-size: 14px;
}

#details .remarks {
	font-size: 16px;
}

#details .eng_name {
	font-size: 20px;
	margin-top: 5px;
	margin-bottom: 20px;
}

#details .btn {
	display: inline-block;
	width: 120px;
	height: 40px;
	text-align: center;
	line-height: 40px;
	color: #fff;
	border: 1px solid #fff;
	border-radius: 20px;
}

/* ***********客户案列************ */
#case {
	text-align: center;
	margin-top: 50px;
	margin-bottom: 50px;
}

#case .title,
#merit .big_title{
	font-size: 32px;
	font-weight: 400;
	text-align: center;
}

#case .remarks,
#merit .remarks{
	font-size: 28px;
	text-align: center;
	color: #0169CA;
}

#case .case_list {
	display: flex;
	display: -webkit-flex;
	justify-content: space-around;
	font-size: 14px;
	color: #979797;
	width: 1100px;
	margin: 35px auto;
}

#case .case_item {
	width: 265px;
	box-sizing: border-box;
}

#case .img {
	width: 265px;
	height: 245px;
}

#case .name {
	font-weight: 400;
	font-size: 18px;
	color: #101010;
	margin-bottom: 10px;
	margin-top: 28px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#case .text {
	margin-top: 10px;
	overflow:hidden;
	-webkit-line-clamp:3;
	-webkit-box-orient:vertical;
	display: -webkit-box;
	text-align: justify;
}

/* logo栏 */
#case .logo_list {
	display: flex;
	display: -webkit-flex;
	justify-content: space-between;
	flex-wrap: wrap;
	background-color: #386697;
	padding: 30px 60px;
	box-sizing: border-box;
}

#case .logo_item {
	width: 210px;
	height: 70px;
	background-image: url(/template/khw/img/index/logo_list.png);
	background-repeat: no-repeat;
	background-color: #fff;
	margin-bottom: 20px;
	background-position: -8px -10px;

}

#case .logo_item:nth-child(2) {
	background-position: -8px -280px;
}

#case .logo_item:nth-child(3) {
	background-position: -235px -280px;
}

#case .logo_item:nth-child(4) {
	background-position: -8px -190px;
}

#case .logo_item:nth-child(5) {
	background-position: -8px -100px;
}

#case .logo_item:nth-child(6) {
	background-position: -8px -375px;
}

#case .logo_item:nth-child(7) {
	background-position: -235px -190px;
}

#case .logo_item:nth-child(8) {
	background-position: -235px -370px;
}

#case .logo_item:nth-child(9) {
	background-position: -235px -100px;
}

#case .logo_item:last-child {
	background-position: -235px -10px;
}

/* **********走进翔宇*********** */
#enter {
	background-color: #F5F5F5;
	text-align: center;
	padding-top: 50px;
	padding-bottom: 40px;
}

#enter .title {
	font-size: 32px;
	font-weight: 400;
}

#enter .remarks {
	color: #0169CA;
	font-size: 28px;
	margin-top: 5px;
	margin-bottom: 15px;
}

#enter .bg {
	background: url(/template/khw/img/home_bg_1.jpg) no-repeat;
	height: 400px;
}

#enter .bg .banner {
	width: 800px;
	height: 400px;
}

#enter .text {
	font-size: 14px;
	line-height: 28px;
	margin-top: 30px;
	margin-bottom: 20px;
}

#enter .more {
	display: inline-block;
	width: 150px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	background-color: #3894FF;
	color: #fff;
	border-radius: 20px;
}


/* *************三栏************** */
#three_col {
	display: flex;
	justify-content: space-between;
	padding-top: 50px;
	padding-bottom: 100px;
}

#three_col .col_item {
	width: 350px;
}

#three_col .title {
	margin-bottom: 25px;
	font-size: 18px;
	font-weight: 600;
}

#three_col .remarks{
	overflow: hidden;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:2;
	display: -webkit-box;
	color: #666;
	font-size: 14px;
}

#three_col .col_item .title_logo {
	display: inline-block;
	width: 30px;
	height: 30px;
	background-image: url(/template/khw/img/css_sprites_1.png);
	background-repeat: no-repeat;
	vertical-align: middle;
	 background-position: -13px -152px;
}

#three_col .col_item:nth-child(2) .title_logo{
	background-position: -161px -152px;
}

#three_col .col_item:last-child .title_logo{
	background-position: -112px -152px;
}



#three_col .top_img {
	width: 350px;
	height: 150px;
	margin-bottom: 20px;
}

#three_col .link {
	min-height: 80px;
	margin-bottom: 20px;
}

#three_col .link span {
	color: #999999;
	font-size: 12px;
}

#three_col .link span:first-child {
	margin-right: 30px;
}

#three_col .link i {
	display: inline-block;
	width: 15px;
	height: 15px;
	background-position: left -1200px top -149px;
	background: url(/template/khw/img/index/time.png) no-repeat;
	background-size: cover;
	vertical-align: text-bottom;
	margin-right: 5px;
}

#three_col .link .last_i{
	background-image: url(/template/khw/img/index/visi.png);
}

#three_col .link .sub_title {
	font-size: 16px;
	font-weight: 600;
	overflow: hidden;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	margin-bottom: 10px;
	    line-height: 26px;
		display: -webkit-box;
}


#three_col .video_item {
	padding: 25px 20px;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	background-color: #F5F5F5;
	margin-bottom: 20px;
}

#three_col .video_item .sub_title {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 16px;
	font-weight: 400;
	margin-bottom: 12px;
}

#three_col .video_item .remarks {
	font-size: 12px;
}

#three_col .video_item .icon {
	width: 50px;
	height: 50px;
	border-radius: 50%;
}

#three_col .video_item .left {
	width: 240px;
}

#three_col .video_item .right {
	position: relative;
	width: 50px;
	cursor: pointer;
}

#three_col .video_item .right:after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-6px,-12px);
	display: inline-block;
	border: 10px solid transparent;
	border-left: 15px solid #FFFFFF;
	opacity: 1;
}