@charset "utf-8";
/* CSS Document */
/*统筹样式*/
* { 
	max-height: 999999px;
	margin: 0; padding: 0; 
	border: 0; 
	outline: 0; 
	font-style: inherit; font-size: 100%; font-family: inherit;
	box-shadow: none;
	-webkit-tap-highlight-color:rgba(0, 0, 0, 0); -ms-touch-action: manipulation; touch-action: manipulation;
}
:focus { outline: 0; }
table { border-collapse: collapse; border-spacing: 0; overflow: auto;}
ol, ul, li { list-style: none; }

a{text-decoration:none; -webkit-tap-highlight-color: rgba(255,255,255,0);}
a,a:link,a:visited,a:hover,a:active{ color: inherit; cursor: pointer;}

input, textarea, select, button { -webkit-appearance: none; -moz-appearance: none; appearance: none; line-height: normal;}
input:-webkit-autofill { background-color: none; } 
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button{
    -webkit-appearance: none !important;
    margin: 0; 
}
input[type="number"]{ -moz-appearance: textfield;}
button{ cursor: pointer; background: none;}

video{ display: block; }

html{ height: 100%; }
body{
	min-height: 100%;
	background: #F3F7FB; 
	font-family: 'PingFang','苹方','STHeitiSC-Light','MicrosoftYaHei','微软雅黑'; font-size: 12px; text-align: left; color: #282938; 
	-webkit-text-size-adjust: none;
	box-sizing: border-box;
	position: relative;
}

img{
	object-fit: contain;
}

.inner_box{
	max-width: 1440px;
	margin: 0 auto;
}


/*顶部导航栏*/
header{
	height: 64px;
	background: rgba(54, 65, 95, 0.70); backdrop-filter: blur(6.5px);
	position: relative; z-index: 1;
}
header img{
	height: 64px;
	display: block;
}
header h1{
	display: none;
}


/*banner*/
#Banner{
	height: 454px;
	margin-top: -64px;
	background: url('../img/bg_banner.jpg') no-repeat center; background-size: cover;
	position: relative; z-index: 0;
}
#Banner .slogan{
	max-width: 700px;
	padding: 47px 0 0 37px;
	background: rgba(0, 15, 53, 0.60); backdrop-filter: blur(5px);
	position: absolute; top: 64px; bottom: 0; left: 50%; right: 0;
	box-sizing: border-box;
}
#Banner .slogan img.start_time{
	width: 84px;
	margin-bottom: 16px;
	display: block;
}
#Banner .slogan img.slogan_img{
	height: 76px;
	margin-bottom: 20px;
	display: block;
}
#Banner .slogan .info_text{
	max-width: 560px;
	font-size: 22px; line-height: 34px; text-align: justify; color: rgba(255,255,255,0.7);
}


/*主体内容区域*/
#Content{
	background: #fff;
}

/*TAB*/
.bg_gray{
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #EFEFEF 100%);
}
#Content .tab{
	height: 210px;
	font-size: 0; line-height: 0; text-align: center;
	position: relative;
}
#Content .tab::after{
	margin-left: -18px;
	border-top: 32px solid #F2F2F2; border-left:  18px solid transparent; border-right:  18px solid transparent;
	position: absolute; bottom: -32px;
	content: '';
}
#Content .tab[select=aboutMe]::after{
	left: 12.5%;
}
#Content .tab[select=contactUs]::after{
	left: 37.5%;
}
#Content .tab[select=joinUs]::after{
	left: 62.5%;
}
#Content .tab[select=fish]::after{
	left: 87.5%;
}
#Content .tab .tab_inner{
	height: 86px; width: 25%;
	margin-top: 50px; padding: 12px 0;
	position: relative;
	display: inline-block; vertical-align: top;
	cursor: pointer;
}
#Content .tab .tab_inner ~ .tab_inner::before{
	width: 1px;
	background: rgba(0, 0, 0, 0.40);
	position: absolute; top: 0; bottom: 0; left: 0;
	content: '';
}
#Content .tab .tab_inner .tab_text{
	height: 86px; max-width: 90%;
	padding-left: 95px;
	position: relative;
	display: inline-block;
}
#Content .tab .tab_inner .tab_text .img_icon{
	width: 80px; height: 80px;
	margin-top: -40px;
	border-radius: 50%;
	background: #fff;
	position: absolute; left: 0; top: 50%;
}
#Content .tab .tab_inner .tab_text h2{
	padding-top: 10px;
	font-size: 32px; line-height: 40px; text-align: left; font-weight: bold;
	display: block;
}
#Content .tab .tab_inner .tab_text h4{
	font-size: 20px; line-height: 34px; letter-spacing: 0.2px; text-align: left; color: rgba(0, 0, 0, 0.60);
}

/*TAB内容*/
#Content .con_box{
	height: 478px;
	padding: 64px 0 78px;
}
#Content .con_box .con_item{
	height: 410px;
	padding: 46px 25px 22px;
	position: relative;
	display: none;
}
#Content .con_box .con_item.show{
	display: block;
}
#Content .con_box .con_item img{
	height: 478px;
	border-radius: 13px;
	box-shadow: 20px 20px 40px 0px rgba(0, 15, 53, 0.20);
	position: absolute; top: 0; left: 25px; bottom: 0;
}
#Content .con_box .con_item .text_box{
	max-width: 544px; width: 66%; height: 382px;
	padding: 14px 40px;
	border-radius: 13px;
	background: url('../img/bg_aboutMe.png') no-repeat right 31px bottom 27px #fff; background-size: 136px;
	box-shadow: 23px 23px 60px 0px rgba(0, 15, 53, 0.10);
	position: relative; z-index: 1;
	float: right;
}
#Content .con_box .con_item .text_box h3{
	height: 64px;
	font-size: 22px; line-height: 64px; font-weight: bold;
	position: relative;
}
#Content .con_box .con_item .text_box h3::before{
	height: 2px; width: 30px;
	margin-top: -1px;
	background: rgba(0, 0, 0, 0.30);
	position: absolute; left: -40px; top: 50%;
	content: '';
}
#Content .con_box .con_item .text_box .introduction{
	max-height: 318px;
	font-size: 16px; line-height: 28px; text-align: justify; color: rgba(0, 0, 0, 0.80);
	overflow-x: hidden; overflow-y: auto;
}
#Content .con_box .con_item .text_box .introduction + h3{
	margin-top: 10px;
}
#Content .con_box .con_item .text_box .introduction p + p{
	margin-top: 8px;
}




/*托底*/
footer{
	background: #fff;
}
footer .note{
	padding: 50px 0;
	background: url(../img/bg_footer.png) no-repeat center bottom; background-size: cover;
}
footer .note .gov{
	padding: 0 20px; margin-bottom: 20px;
	font-size: 18px; line-height: 34px; color: #fff; font-weight: bold;
}
footer .note .other{
	padding: 0 20px;
	font-size: 16px; line-height: 40px; color: rgba(255, 255, 255, .7); font-weight: bold;
}
footer .company{
	height: 80px;
	font-size: 14px; line-height: 80px; text-align: center; color: #282938;
}



/*移动端响应式*/
@media only screen and (max-device-width: 480px) {
	header, header img{
		height: 44px;
	}
	
	#Banner{
		height: 185px;
		margin-top: -44px; padding-top: 44px;
		background-position: 40% center;
	}
	#Banner .slogan{
		max-width: none;
		padding: 16px 0 0 36%;
		background: linear-gradient(90deg, rgba(255, 255, 255, 0.00) 0%, rgba(0, 15, 53, 1) 100%);
		backdrop-filter: blur(1px);
		left: 0; right: 0; top: 44px;
	}
	#Banner .slogan img.start_time{
		width: 56px;
		margin-bottom: 8px;
	}
	#Banner .slogan img.slogan_img{
		height: auto; width: 90%;
		margin-bottom: 10px;
	}
	#Banner .slogan .info_text{
		max-width: none;
		padding-right: 20px;
		font-size: 12px; line-height: 20px;
	}

	#Content .tab{
		display: none;
	}
	#Content .con_box{
		height: auto;
		padding: 20px 0;
	}
	#Content .con_box .con_item{
		height: auto;
		padding: 0 20px; margin-bottom: 20px;
		display: block;
	}
	#Content .con_box .con_item img{
		height: auto; width: 100%;
		border-radius: 13px 13px 0 0;
		box-shadow: none;
		position: unset;
	}
	#Content .con_box .con_item .text_box{
		max-width: none; width: 100%; height: auto;
		padding: 20px;
		box-shadow: 23px 23px 60px 0px rgba(0, 0, 5, 0.05);
		box-sizing: border-box;
		float: none;
	}
	#Content .con_box .con_item .text_box h3{
		height: 26px;
		margin-bottom: 12px;
		font-size: 18px; line-height: 26px;
	}
	#Content .con_box .con_item .text_box h3::before{
		display: none;
	}
	#Content .con_box .con_item .text_box .introduction{
		height: auto; max-height: none;
		font-size: 14px; line-height: 24px;
	}
	#Content .con_box .con_item .text_box .introduction + h3{
		margin-top: 20px;
	}

	footer .note{
		padding: 20px 0;
	}
	footer .note .gov{
		font-size: 13px; line-height: 22px; text-align: justify;
	}
	footer .note .other{
		font-size: 12px; line-height: 22px;
	}

	footer .company{
		height: 44px;
		font-size: 12px; line-height: 44px;
	}

}