@charset "utf-8";
@import url("/frame/swiper/swiper-bundle.min.css");
@import url("/frame/font-awesome.min.css");
@import url("https://www.3wen.cn/frame/iconfont/icon-uni.css");
@import url("/frame/frame.css");
@import url("/css/common.css");

div[id^="think_page_trace"]{
	display: none;
}input,.input{
	display: inline-block;
	width: 100%;
	height: 34px;
	padding: 6px;
	font-size: 14px;
	color: #555555;
	background: #FFFFFF;
	border: solid 1px #CCCCCC;
	border-radius: 4px;
	box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
	transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
:focus-visible{outline-color: #18A689;}
input::-moz-placeholder{color: #999999;}
input::-ms-input-placeholder{color: #999999;}
input::-webkit-input-placeholder{color: #999999;}
option{
	font-size: 14px;
	padding: 5px 12px;
}
button{
	background: #EEEEEE;
	border: none;
	cursor: pointer;
}
iframe{
	width: 100%;
	height: 100%;
	border: none;
}
a{
	color: #333333;
	text-decoration: none;
}
h1{font-size: 36px;}
h2{font-size: 30px;}
h3{font-size: 24px;}
h4{font-size: 18px;}
h5{font-size: 14px;}
h6{font-size: 12px;}
ul,li{
	list-style: none;
}
a:hover{
	color: #f00;
}
.f500{
	font-weight: 500;
}
.bgzdy{
	background: #f00;
}
.scroll{
	overflow: auto;
}
/* frame */
.swiper-wrapper{
	height: auto;
}
.swiper-slide>a{
	font-size: 0;
}
/* header */
header{
	position: relative;
	z-index: 100;
}
.header{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 60px;
	padding: 0 5%;
}
.logob{
	height: 100%;
	padding: 0 10px;
}
.logo{
	height: 77px;
	width: auto;
}
.navb{
	height: 100%;
	padding-right: 10px;
}
.nav1{
	position: relative;
	height: 100%;
}
.navt1{
	display: inline-block;
	height: 60px;
	padding: 0 20px;
	line-height: 60px;
}
.nav1:hover>a{
	color: #f00;
}
.navb2{
	position: absolute;
	top: 60px;
	left: 0;
	width: 100%;
	background: #fff;
	z-index: 9;
	display: none;
}
.nav2{
	height: 50px;
	line-height: 50px;
	text-align: center;
	border-bottom: solid 1px #000;
}
.nav2:hover{
	background-color: #f00;
}
.nav2:hover a{
	color: #fff;
}
.navt2{
	display: inline-block;
	width: max-content;
	height: 50px;
}
/* sidebar */
.sidebar-rightb{
	position: fixed;
	width: 40px;
	right: 0;
	bottom: 150px;
	text-align: center;
	z-index: 100;
}
.sidebar-rightb a,.sidebar-rightb i,.sidebar-rightb span{
	color: #FFFFFF;
}
.sidebar-rightb>div{
	width: 40px;
	height: 40px;
	background: rgba(123,123,123,.8);
	float: right;
	margin: 3px 0;
	cursor: pointer;
}
.sidebar-rightb>div:hover{
	background: #000;
}
/* tel */
.sidebar-rightb>.sidebar_tel{
	position: relative;
	background-color: rgba(0,0,0,0);
}
.sidebar_tel>a{
	position: absolute;
	left: 0;
	background: rgba(123,123,123,.8);
	transition: left 0.6s;
}
.sidebar_tel>a>div{
	position: relative;
	min-width: 40px;
	height: 40px;
	text-align: center;
	line-height: 40px;
}
.sidebar_tel i{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
.sidebar_tel span{
	display: inline-block;
	width: 110px;
}
.sidebar_tel:hover>a{
	left: -110px;
	background-color: #000;
}
/* wechat */
.sidebar_wechat{
	position: relative;
	padding-top: 10px;
	transition: width 0.6s;
}
.sidebar_wechatcode{
	position: absolute;
	top: 40px;
	right: 40px;
	display: none;
	width: 180px;
	height: auto;
	background: #000;
}
.sidebar_wechat:hover{
	width: 220px;
}
.sidebar_wechat:hover .sidebar_wechatcode{
	display: block;
}
/* QQ */
.sidebar_qq{
	padding-top: 8px;
}
/* share */
.sidebar_share{
	position: relative;
	padding-top: 7px;
}
.contactbar-bg{
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(0,0,0,.7);
	z-index: 100;
	display: none;
}
.bread{
	padding: 10px;
}
/* footer */
footer{
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	height: 36px;
	background-color: #FFFFFF;
	z-index: 90;
}
.copyright{
	text-align: right;
	line-height: 36px;
}
.share{
	height: 16px;
	padding: 0 30px;
	border-left: solid 1px #999999;
}
.qrcode-bg{
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(0, 0, 0, .5);
	display: none;
}
.qrcode{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 260px;
	padding: 30px;
	background-color: #FFFFFF;
}
#qrcode *{
	width: 100%;
	height: auto;
}
.comment-box{
	position: fixed;
	right: 0;
	bottom: 36px;
	width: 180px;
	display: none;
}
.comment-tit{
	padding: 20px;
	background-color: #333;
}
.comment-qq{
	padding: 15px 30px;
	background-color: #666;
	border-top: solid 1px #999;
	border-bottom: solid 1px #999;
}
.comment-tel{
	padding: 20px 30px;
	background-color: #666;
}
/* html */
.house{
	padding: 0 10%;
	background-color: #f9f9f9;
}
.pad{
	padding: 28px;
	background: #FFFFFF;
}
.pads{
	padding: 18px;
	background: #FFFFFF;
}
.video video{
	width: 100%;
	height: auto;
}
.content video{
	display: block;
	margin: 0 auto;
}
/* phone */
.lcbody{
	width: 30px;
	height: 30px;
	position: relative;
	transform: translateZ(0px) rotate(0deg);
	transition: transform 0.4s cubic-bezier(0.4, 0.01, .165, 0.99);
	float: right;
	margin: 15px;
	z-index: 10;
	display: none;
}
.open .lcbody{
	transform: translateZ(0px) rotate(90deg);
	-webkit-transform: translateZ(0px) rotate(90deg);
}
.lcitem{
	position: absolute;
	left: 0;
	top: 0;
	transform: translateZ(0px) rotate(0deg);
	transition: transform 0.25s cubic-bezier(0.4, 0.01, 0.165, 0.99) 0s;
	-webkit-transform: translateZ(0px) rotate(0deg);
	-webkit-transition: -webkit-transform 0.25s cubic-bezier(0.4, 0.01, 0.165, 0.99) 0s;
	width: 30px;
	height: 30px;
}
.open .lcitem{
	transform: translateZ(0px) rotate(45deg);
	transition: transform 0.25s cubic-bezier(0.4, 0.01, 0.165, 0.99) 0.2s;
	-webkit-transform: translateZ(0px) rotate(45deg);
	-webkit-transition: -webkit-transform 0.25s cubic-bezier(0.4, 0.01, 0.165, 0.99) 0.2s;
}
.lcitem .rect.topa{
	transform: translate3d(0px, -6px, 0px);
	-webkit-transform: translate3d(0px, -6px, 0px);
}
.lcitem .rect.bottoma{
	transform: translate3d(0px, 6px, 0px);
	-webkit-transform: translate3d(0px, 6px, 0px);
}
.lcitem .rect{
	background: #868686;
}
.lcitem .rect{
	width: 30px;
	height: 2px;
	background: #999999;
	position: absolute;
	left: 0;
	top: 14px;
	transition: transform 0.2s ease 0.2s;
	-webkit-transition: -webkit-transform 0.2s ease 0.2s;
}
.open .lcitem .rect{
	transition: transform 0.2s ease 0s;
	transform: translate3d(0px, 0px, 0px);
	-webkit-transition: -webkit-transform 0.2s ease 0s;
	-webkit-transform: translate3d(0px, 0px, 0px);
}
.open .lcitem.bottoma{
	transform: translateZ(0px) rotate(-45deg);
	-webkit-transform: translateZ(0px) rotate(-45deg);
}

.navshowl,.navhidel,.navshowt,.navhidet{
	animation-duration: 0.3s;
	animation-timing-function: ease-out;
	animation-fill-mode: both;
}
.navshowl{
	animation-name: leftin;
}
.navhidel{
	animation-name: toleft;
}
.navshowt{
	animation: topin .5s ease-in;
	transition: max-height .3s ease-in;
	transform-origin: 50% 0;
}
.navhidet{
	overflow-y: auto;
	max-height: 0!important;
	transition: max-height .3s ease-out;
}
@keyframes leftin{
	0%{
		opacity: 0;
		transform: translateX(-100%);
	}
	100%{
		opacity: 1;
		transform: translateX(0);
	}
}
@keyframes toleft{
	0%{
		opacity: 1;
		transform: translateX(0);
	}
	100%{
		opacity: 0;
		transform: translateX(-100%);
	}
}
@keyframes topin{
	0%{transform: scale(1,0);}
	100%{transform: scale(1,1);}
}
@keyframes totop{
	0%{
		opacity: 1;
		transform: translateY(0);
	}
	100%{
		opacity: 0;
		transform: translateY(-100%);
	}
}
.right90{
	transition: 0.3s;
	transform: rotate(90deg);
}
.ph.fa{
	transform-origin: 20px 30px 0;
}

/* 框架 */
.swiper-slide>a{
	font-size: 0;
}
.sidebar{
	position: sticky;
	top: 0;
}

.content{
	font-size: 16px;
	line-height: 2;
}
.content span,.content p{
	font-size: 18px;
}
.content img{
	width: auto;
}

@media (min-width: 1000px) {
	.header.bg{
		background: #fff;
		box-shadow: 0 0 10px #ccc;
	}
	.nav1:hover .navb2{
		display: block;
	}
	.adsH{
		height: 60px;
	}
	/* contact */
	.contactbar-box{
		width: 25%;
		min-width: 375px;
	}
	.contact-tc{
		text-align: center;
	}
}

@media (max-width: 999px) {
	header{
		height: 60px;
	}
	.header{
		background: #fff;
		box-shadow: 0 0 10px #ccc;
	}
	.logob{
		position: relative;
		z-index: 10;
	}
	.swiper-ads,.swiper-ads .swiper-slide{
		height: 150px;
	}
	.swiper-ads img{
		height: 100%;
		object-fit: cover;
	}
	.count{width: unset;}
	.phhide{
		display: none;
	}
	.top,.house{
		padding: 0 5px;
	}
	.top>ul.fl{
		display: none;
	}
	.lcbody{
		display: block;
	}
	.navb{
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 100px 0 50px;
		background: #FFFFFF;
		z-index: 9;
		display: none;
		overflow: auto;
	}
	li.nav1{
		position: relative;
		width: 100%;
		height: unset;
		padding: 0 5%;
		display: inline-block;
	}
	.navt1{
		display: inline-block;
		width: 100%;
		line-height: 8vh;
		margin: 0;
		font-size: 16px;
		text-align: left;
		border-bottom: solid 1px #E5E5E5;
	}
	.nav1>.ph.fa{
		position: absolute;
		top: 0;
		right: 10px;
		display: block;
		padding: 15px 20px;
		font-size: 24px;
	}
	.navb2{
		position: unset;
		display: block;
		width: 90%;
		max-width: unset;
		background: unset;
		border-top: unset;
		margin: 0;
		margin-left: 10%;
	}
	.nav2{
		width: 100%;
		height: 6vh;
		border-bottom: solid 1px #E5E5E5;
	}
	.navt2{
		display: block;
		line-height: 6vh;
	}
	.bread{
		padding: 10px 12px;
	}
	/* contact */
	.contactbar-box{
		width: calc(100% - 30px);
		max-width: 375px;
		min-width: 300px;
	}
	.b4{
		width: 50%;
	}
	.b4 .pad20{
		padding: 10px 0;
	}
	footer{
		position: relative;
	}
}.banner.pc{
	height: calc(100% - 36px);
}
.banner,.page-banner,.swiper-banner{
	height: 100%;
}
.adsbox{
	position: relative;
	display: inline-block;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.adsimg{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.swiper-pagination-bullet{
	position: relative;
	margin: 25px 0!important;
}
/* .swiper-pagination-bullet::before{
	content: "";
}
.swiper-pagination-bullet::after{
	position: absolute;
	content: "";
	top: 10px;
	left: 3px;
	width: 1px;
	height: 20px;
	background: #ccc;
} */
.house{
	background-color: rgba(0, 0, 0, 0);
}
.bgimg{
	background-repeat: no-repeat;
	background-size: 100%;
}
.bgimg-ct{
	background-repeat: no-repeat;
	background-position: center;
}
.imgauto{
	overflow: hidden;
}
.product-img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: all 600ms;
}
.product-bg{
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.3);
	opacity: 0;
	transition: all 600ms;
}
.product,.product::before,.product::after{
	position: absolute;
	left: 50%;
	transform: translate(-50%,-50%);
}
.product{
	top: 0;
	width: 68px;
	height: 68px;
	border: solid 2px #fff;
	border-radius: 60px;
	opacity: 0;
	transition: all 600ms;
}
.product::before,.product::after{
	top: 50%;
	content: "";
	background: #fff;
}
.product::before{
	width: 22px;
	height: 2px;
}
.product::after{
	width: 2px;
	height: 22px;
}
.product-hover:hover .product-img{
	scale: 1.3;
}
.product-hover:hover .product-bg{
	opacity: 1;
}
.product-hover:hover .product{
	top: 50%;
	opacity: 1;
}
.about{
	transform: translateY(75%);
}
.index-story-tit{
	position: absolute;
	top: 200px;
	left: 0;
	width: 10%;
	text-align: right;
}
.index-news-tit{
	position: absolute;
	left: 0;
	width: 10%;
	text-align: right;
}
.friend{
	transition: all 600ms;
}
.friend:hover{
	box-shadow: 0 10px 20px #ccc;
}
.hr{
	height: 1px;
	background: #666;
}
.index-contact-top,.index-contact-bottom{
	padding: 0 5%;
}
.index-contact-top{
	height: 45%;
	padding-top: 220px;
}
.index-contact-bottom{
	height: 55%;
	background-color: #333;
}
.index-contact-bottom input,.index-contact-bottom .input{
	background-color: unset;
	border: none;
	border-bottom: solid 1px #666;
}
.input.text{
	height: 150px;
}
.index-contact-bottom button{
	color: #fff;
	background-color: unset;
	border: solid 1px #666;
}

@media (min-width: 1000px) {
	.adsH{
		height: 0;
	}
	.house{
		margin-top: 60px;
	}
}

@media (max-width: 999px) {
	.swiper-banner{
		height: 240px;
	}
	main.banner{
		height: auto;
	}
}

.aos,.aos-r,.aos-l{
	position: relative;
	transition: all 1s;
	opacity: 0;
}
.aos{
	top: 300px;
}
.aos-r{
	right: 300px;
}
.aos-l{
	left: 300px;
}
.swiper-slide-active .aos-box .aos{
	top: 0;
	opacity: 1;
}
.swiper-slide-active .aos-box .aos-r{
	right: 0;
	opacity: 1;
}
.swiper-slide-active .aos-box .aos-l{
	left: 0;
	opacity: 1;
}