/* nav-bar */
.nav-bar{
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 50;
	width: 100%;
	background: #fff;
	
	display: flex;
	justify-content: space-between;
}
.applets-banner .applets-banner-img,.creative-recommendation-banner{
	display: block;
}
.nav-bar .nav-lis{
	width: 20%;
	display: block;
	text-align: center;
	padding-bottom: 1rem ;
	box-sizing: border-box;
}
.nav-bar .nav-lis img{
	width: 1.54rem;
	position: absolute;
	bottom: 0.47rem;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
}
.nav-bar .nav-lis div{
	width: 100%;
	height: 2.94rem;
	position: relative;
}
.nav-bar .nav-lis span{
	letter-spacing: 0.03rem;
	color: #aaaaaa;
	font-size: 0.86rem;
}
.nav-bar .nav-lis .default-nav-icon{
	display: block;
}
.nav-bar .nav-lis .active-nav-icon{
	display: none;
}
.nav-bar .active-nav .default-nav-icon{
	display: none;
}
.nav-bar .active-nav .active-nav-icon{
	display: block;
}

.nav-bar .active-nav span{
	background: linear-gradient(to right,#f8b502,#ea5115);
	-webkit-background-clip: text;
	color: #ea5115;
	color: transparent;
}
/* home start */
body{
	background: #f5f5f5;
}
/* .base-fixed-header{
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;
} */

.fixed{
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;
	box-sizing: border-box;
}
.banner{
	width: 100%;
	max-height: 11.95rem;
	overflow: hidden;
	background: #fff;
}
.banner .swiper-pagination{
	left:50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
}
.banner .swiper-pagination-bullet{
	width: 0.68rem;
	height: 0.68rem;
	border-radius: 100%;
	background-color: #949494;
	opacity: 0.6;
	margin-right: 0.55rem;
}
.banner .swiper-pagination-bullet-active{
	width: 1.54rem;
	background-color: #ff6601;
	border-radius: 0.3rem;
}
.home-header{
	padding: 3.26rem 0 1.2rem;
	background: #fff;
}
.base-title{
	text-align: center;
}
.base-text{
	font-size: 1.5rem;
	color: #ff6b17;
	position: relative;
	padding-bottom: 0.47rem;
}
.base-text::after{
	content: '';
	display: inline-block;
	position: absolute;
	width: 51%;
	height: 0.26rem;
	background-color: #ff6b17;
	border-radius: 0.11rem;
	left: 0;
	bottom:0rem;
}
.base-text::before{
	content: '';
	display: inline-block;
	position: absolute;
	width: 25.8%;
	height: 0.26rem;
	background-color: #ff6b17;
	border-radius: 0.11rem;
	left: 55.94%;
	bottom:0rem;
}
.search-layout{
	margin: 1.1rem auto 0;
	width: 70.8%;	
	height: 2.86rem;
	box-shadow: -0.03rem 0.03rem 0rem 0rem 
		rgba(215, 126, 10, 0.41);
	border-radius: 1.34rem;
	border: solid 1px #f39209;
	box-sizing: border-box;
}
.search-layout img{
	width:1.2rem;
	vertical-align: middle;
	margin-left: 1.07rem;
}
.search-layout input{
	width:85%;
	height: 100%;
	line-height: 2.86rem;
	vertical-align: middle;
	font-size: 0.84rem;
	box-sizing: border-box;
	padding-right: 1.28rem;
	color: #7f7f7f;
	/* text-align: right; */
	text-align: left;
}
.case-list{
	width: 100%;
	padding: 1.37rem 1.5rem 0rem;	
	box-sizing: border-box; 
}
.case-list li{
	margin-bottom: 2.5rem;
	padding: 1rem 0;
	display: flex;
	height: 22.31rem;
	overflow: hidden;
	justify-content: space-between;
	background: #fff;
	box-shadow: 0rem 0rem 0.3rem 0rem 
			rgba(139, 139, 139, 0.3);
}
.case-list li:last-child{
	margin-bottom: 6rem;
}
.case-poster{
	width: 50.14%;
	height: 100%;
	overflow: hidden;	
	display: block;
	margin-left:6px;
}
.case-poster img{
	object-fit: cover;
	width: 100%;
	display: block;
	height: 100%;
}
.case-message{
	padding: 1.5rem 0.68rem 0 1.15rem;
	box-sizing: border-box;
	width: 49.86%;
}
.case-title{
	font-size: 1.2rem;
	color: #626262;
	position: relative;
	box-sizing: border-box;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
.case-title::before{
	content: '';
	display: inline-block;
	width: 0.26rem;
	height: 1.11rem;
	vertical-align: middle;
	margin-right: 0.21rem;
	margin-top: -0.1rem;
	background-color: #626262;
}
.case-brief-introduction{
	font-size: 0.73rem;
	color: #777777;
	height: 2.7rem;
	line-height: 1.36rem;
	text-align: justify;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;	
	margin: 1rem 0 1.04rem;
}

.code-case-lyaout{
	border-top: 1px solid #e1e1e1;
}
.case-code{
	width: 6.66rem;
	height: 6.66rem;
	background-image: url(../images/code-wrapper.png);
	background-color: #fff;
	background-size: 100% 100%;
	position: relative;
	margin: 1.42rem auto 0.5rem;
}
.case-code img{
	width: 5.6rem;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
}
.case-try-text{
	font-size: 1.04rem;
	color: #919191;
	text-align: center;
	display: block;
}
.try-play{
	width: 6.7rem;
	height: 2.13rem;
	border-radius: 1.06rem;
	border: solid 1px #ff6601;
	text-align: center;
	margin: 1.4rem auto 0;
	display: block;
	line-height: 2.13rem;
	font-size: 1.03rem;
	color: #ff6b17;
}

/* about us */
.about-us-layout{
	width: 100%;
	padding: 1.37rem 1.54rem 6rem;
	box-sizing: border-box; 
}
.about-header{
	background-color: #ffffff;
	box-shadow: 0rem 0rem 0.3rem 0rem 
		rgba(139, 139, 139, 0.3);
	padding: 1.28rem 0.34rem 1.07rem;
	box-sizing: border-box;
}
.logo{
	width: 49.77%;
	margin: 0 auto 1.8rem;
}
.group-photo{
	width: 100%;
}
.group-photo img{
	width: 100%;
	display: block;
}
.about-title{
	font-size: 2.01rem;
	margin: 0.97rem 0 2rem;
}
.company-detail{
	width: 90%;
	margin: 0 auto 1.66rem;
	text-align: center;
	font-size: 0.8rem;
	color: #535353;
	line-height: 1.92rem;
}
.company-message{
	background-color: #ffffff;
	box-shadow: 0rem 0rem 0.3rem 0rem 
		rgba(139, 139, 139, 0.3);
	padding:1.24rem  0.38rem 1.58rem;
	box-sizing: border-box;
	margin-top: 1.34rem; 
}
.company-message-title{
	font-size: 2.01rem;
}
.contact-layout{
	margin: 1.66rem 0 0.8rem;
	padding-bottom: 1.15rem;
	border-bottom: 1px solid #aaaaaa;
	display: flex;
	justify-content: space-between;
}
.contact-layout div{
	width: 33.33%;
	position: relative;
}
.contact-layout div::after{
	background:  #a1a1a1;
	content: '';
	display: inline-block;
	position: absolute;
	width: 1px;
	height: 1rem;
	right: 0%;
	top:55%;
	transform: translateY(-50%);
}
.contact-layout div:last-child{
	padding-left: 1.2rem;
	box-sizing: border-box;
}
.contact-layout div:nth-child(2){
	padding-left: 0.8rem;
	box-sizing: border-box;
}
.contact-layout div:nth-child(2)::after{
	right: -5%;
}
.contact-layout div:last-child::after{
	display: none;
}
.contact-layout img{
	width: 1.28rem;
	vertical-align: middle;
}

.contact-layout span{
	font-size: 0.8rem;
	color: #a1a1a1;
	vertical-align: middle;
}
.address-message{
	display: flex;
	justify-content: space-between;
}
.address-message img{
	width: 1.15rem;
	height: 1.15rem;
	display: block;
	vertical-align: top;
	margin-top: 0.3rem;
}
.addr{
	width: 90.17%;
	font-size: 0.8rem;
	color: #a1a1a1;
}
.addr span{
	display: block;
	margin-bottom: 0.5rem;
}
.addr span:last-child{
	margin-bottom: 0;
}
.address-code{
	width: 7.55rem;
	height: 7.55rem;
	background-image: url(../images/code-wrapper.png);
	background-color: #fff;
	background-size: 100% 100%;
	position: relative;
	margin: 2.22rem auto 0.4rem;
}
.address-code img{
	width: 6.49rem;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
}
.address-contact{
	font-size:0.94rem;
	color: #ff6601;
	text-align: center;
	display: block;
}

/* mg动画 */
.mg-animation-banner{
	width: 100%;
}
.mg-animation-nav{
	width: 100%;
	background: #fff;
	padding-bottom:1.4rem ;
}
.mg-style-nav{
	width: 78.53%;
	margin:-2.13rem auto 1.07rem;
	background-color: #ffffff;
	box-shadow: 0rem 0rem 0.3rem 0rem 
		rgba(217, 92, 0, 0.3);
	border-radius: 0.85rem ;
	padding: 1.07rem 0.9rem 2.05rem;
	box-sizing: border-box;
	position: relative;
	z-index: 1;
}
.style-nav-list{
	display: flex;
	justify-content: space-between;
	margin-top: 1.28rem;
}
.style-nav-lis{
	width: 4.39rem;
}
.style-nav-img{
	width: 100%;
}
.style-nav-lis .base-text{
	font-size: 0.73rem;
}
.mg-case-list{
	padding: 1.8rem 1.54rem 1rem;
	margin-bottom: 6rem;
	box-sizing: border-box;
}
.mg-case-lis{
	background-color: #fff;
	box-shadow: 0rem 0rem 0.3rem 0rem 
		rgba(139, 139, 139, 0.3);
		margin-bottom: 1.83rem;
}
.mg-case-poster{
	height: 14.25rem;
	overflow: hidden;
	position: relative;
}
.mg-case-poster video{
	width: 100%;
	height: 100%;
	overflow: hidden;
	object-fit: cover;
}
.mg-case-play{
	width: 4.39rem;
	position: absolute;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
	z-index: 2;
}
.mg-case-play img{
	display: block;
	width: 100%;
}
.mg-case-detail{
	box-sizing: border-box;
	padding: 0.9rem 0.68rem 1.32rem;
}

.mg-case-title{
	font-size: 1.3rem;
	color: #626262;
	position: relative;
	box-sizing: border-box;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
.mg-case-title::before{
	content: '';
	display: inline-block;
	width: 0.26rem;
	height: 1.15rem;
	vertical-align: middle;
	margin-right: 0.26rem;
	margin-top: -0.2rem;
	background-color: #626262;
}
.mg-case-info{
	font-size: 0.94rem;
	color: #777;
	line-height: 1.36rem;
	text-align: justify;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	margin: 1rem 0 1.04rem;
}
.contact-price{
	display: flex;
	justify-content: flex-end;
}
.contact-price-btn{
	font-size: 0.98rem;
	color: #ff6b17;
	width: 6.7rem;
	height: 2.13rem;
	border-radius: 1.06rem;
	border: solid 1px #ff6601;
	text-align: center;
	line-height: 2.13rem;
	display: block;
}

/* 小程序 */
.applets-banner{
	width: 100%;
	position: relative;
}
.applets-banner .search-layout{
	width: 59.2%;
	position: absolute;
	top:67.73%;
	margin: 0;
	background: #fff;
	left: 5.3%;
	height: 1.92rem;
}
.applets-banner .search-layout input{
	line-height: 1.92rem;
}
.applets-case-layout{
	padding: 1.37rem 1.54rem 6rem;
	box-sizing: border-box;
}
.applets-nav{
	display: flex;
	justify-content: space-between;
	background-color: #fff;
	padding: 1.07rem 1.75rem 1.07rem;
}

.applets-nav .base-title .base-text{
	font-size: 1.3rem;
	color: #626262;
}

.applets-nav .base-title .base-text::after{
	background-color: #626262;
}
.applets-nav .base-title .base-text::before{
	background-color: #626262;
}

.applets-nav .applets-nav-active .base-text{
	color: #ff6b17;
}

.applets-nav .applets-nav-active .base-text::after{
	background-color: #ff6b17;
}
.applets-nav .applets-nav-active .base-text::before{
	background-color: #ff6b17;
}

/* 创意推荐 */
.creative-recommendation-banner{
	width: 100%;
}
.creative-recom-nav{
	width: 100%;
	padding: 0 1.45rem 1.66rem;
	background: #fff;
	box-sizing: border-box;
	/* position: relative; */
}
.creative-recom-nav .search-layout{
	margin: -1.5rem auto 1.7rem;
	background: #fff;
	position: relative;
	z-index: 1;
}
.creative-nav-list{
	display: flex;
	justify-content: space-between; 
}
.creative-nav-list .time_nav {
	width: 100%;
	white-space: nowrap;
	overflow-x: auto;
	margin-bottom: 0.3rem;
	color: #626262;
	font-size: 1.24rem;
}
.time_nav a{
	color: #ff6b17;
}
.creative-nav-list .time_nav span{
	padding: 0 0.8rem;
	display: inline-block;
}
.creative-nav-list .sceen-list .on{
	color: #ff6b17;
}
.creative-nav-list .base-title{
	display: inline-block;
}
.creative-nav-list .base-title .base-text{
	color: #626262;
	font-size: 1.24rem;
	padding-bottom: 0.3rem;
}
.creative-nav-list .base-title .base-text::after{
	background-color: #626262;
}
.creative-nav-list .base-title .base-text::before{
	background-color: #626262;
}
.creative-nav-list .creative-nav-active .base-text{
	color: #ff6b17;
}
.creative-nav-list .creative-nav-active .base-text::after{
	background-color: #ff6b17;
}
.creative-nav-list .creative-nav-active .base-text::before{
	background-color: #ff6b17;
}

.select-wrap{
	font-size: 1.25rem;
	color: #7f7f7f;
	height: 1.7rem;
	width: 22%;
}
.select-wrap .defualt-select{
	box-sizing: border-box;
	padding-right: 1rem;
	position: relative;
	height: 1.7rem;
	text-align: center;
}

.select-wrap .defualt-select::before{
	content: '';
	display: inline-block;
	width: 0rem;
	height: 0rem;
	border-style: solid;
	border-width: 0.4rem;
	border-color: #ff9a16 transparent transparent transparent;
	position: absolute;
	right: 0;
	top:45%;
}
.sceen-list{
	width: 100%;
	position: absolute;
	top: 28%;
	z-index: 2;
	left: 0;
	background: #fff;
	display: none;
	z-index: 10;
}
.creative-fixed .sceen-list{
	top:99%;
}
.empty{
	text-align: center;
}
.sceen-list li{
	font-size: 1.25rem;
	color: #7f7f7f;
	line-height: 2.7rem;
	text-align: center;
	margin-bottom: 0.2rem;
	text-align: center;
}
.sceen-list li span{
	white-space: nowrap;
}
.sceen-list .screen-active,.sceen-list .screen-active a{
	color: #ff6b17;
}
.creative-case-layout{
	padding: 1.28rem 1.54rem 6rem;
	box-sizing: border-box;
	overflow: auto;
}
.creative-case-lis{
	width: 48.82%;
	/* padding-bottom: 1.75rem; */
	padding-bottom: 1rem;
	float: left;
	margin-right: 0.5rem;
	margin-bottom: 1.5rem;
	background-color: #ffffff;
	box-shadow: 0rem 0rem 0.3rem 0rem 
		rgba(139, 139, 139, 0.3);
	border-radius: 0.85rem;
	box-sizing: border-box;
	overflow: hidden;
}
.creative-case-lis:nth-child(even){
	margin-right: 0;
}
.creative-case-post{
	width: 100%;
	height: 13.78rem;
	overflow: hidden;
}
.creative-case-post img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.creative-case-details{
	/* padding:0.68rem  0.34rem 1.28rem; */
	padding:0.68rem  0.34rem 1rem;
	box-sizing: border-box;
	border-bottom: 1px solid #e1e1e1;
}
 .creative-case-title{
	font-size: 0.97rem;
	color: #626262;
	line-height: 1.2rem;
	position: relative;
	box-sizing: border-box;
	text-align: justify;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	/* min-height: 2.35rem; */
	min-height: 2.3rem;
	padding-right: 0.5rem;
}
.creative-case-title::before {
    content: '';
    display: inline-block;
    width: 0.26rem;
    height: 1.11rem;
    vertical-align: middle;
    margin-right: 0.21rem;
    margin-top: -0.15rem;
    background-color: #626262;
}
.creative-message{
	display: flex;
	justify-content: space-between;
	/* padding: 1.45rem 0.45rem 0; */
	padding: 1rem 0.45rem 0;
	box-sizing: border-box;
}

.creative-message div{	
	overflow: hidden;
	white-space: nowrap;
	/* font-size: 0.83rem; */
	font-size: 1rem;
	width: 50%;
	color: #565656;
}

.creative-message .time {
	display: flex;
	align-items: center;
}

.eye{
	width: 50%;
	text-align: right;
}
.creative-message div img{
	width: 0.85rem;
	margin-right: 0.18rem;
}

.creative-details-logo{
	width: 14.3rem;
	margin: 1.96rem auto 1.83rem;
}
.creative-details-layout{
	margin: 0rem auto 6rem;
	width: 85.06%;
	background: #fff;
	padding-bottom:1.8rem;
}
.details-sw,.details-sw-main{
	width: 100%;
	/* height: 41.05rem; */
}
.details-sw-main .inside-img{
	position: absolute;
	top: 11.5%;
	left: 6.8%;
	width: 87.4%;
}
#mobile_chat_card{
	height: 11.4em!important;
	background: #fff!important;
}
.card-content{
	-webkit-line-clamp: 4!important;
}
.details-message{
	display: flex;
	justify-content: space-between;
	box-sizing: border-box;
	padding:3.6rem 1.75rem 0 0.47rem;
}
.details-left{
	width: 72.35%;
}
.details-introduction{
	font-size: 0.91rem;
	color: #777777;
	line-height: 1.36rem;
	text-align: justify;
	/* display: -webkit-box; */
	/* -webkit-box-orient: vertical; */
	/* -webkit-line-clamp: 3; */
	overflow: hidden;
	margin: 1.62rem 0 0rem;
}
.details-right{
	width: 27.65%;
}
.details-case-code{
	width: 6.12rem;
	height: 6.12rem;
	background-image: url(../images/code-wrapper.png);
	background-color: #fff;
	background-size: 100% 100%;
	position: relative;
	margin: 0rem auto 1.2rem;
}
.details-case-code img{
	width: 5.35rem;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
}
.details-case-try-text{
	font-size: 0.72rem;
	color: #ff6601;
	text-align: center;
	display: block;
}

.outside,.inside-img{
	border: 0;
	display: block;
}
.creative-details-layout .swiper-pagination{
	left:50%;
	/* top: 49.5rem; */
   bottom: 1%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
}
.creative-details-layout .swiper-pagination-bullet{
	width: 0.68rem;
	height: 0.68rem;
	border-radius: 100%;
	background-color: #ff6601;
	margin-right: 0.65rem;
	opacity: 1;
	position: relative;
}
.creative-details-layout .swiper-pagination-bullet-active::before{
	content: '';
	display: inline-block;
	width: 1.15rem;
	height: 1.15rem;
	border:1px solid  #ff6601;
	position: absolute;
	top: -30%;
	left: -30%;
	border-radius: 100%;
	box-sizing: border-box;
}

.base-fixed-header{
	position: absolute;
	width: 100%;
	z-index: 2;
	
}
/* 下来加载 */
#wrapper{
	position: relative;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	  overflow:auto;
}
.home-wrapper{
	padding: 23.76rem 1.54rem 6rem;
}
#scroller {
	/* left: 0; */
	/* position: relative; */
	/* z-index: 1; */
	/*	-webkit-touch-callout:none;*/
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	width: 100%;
	/* padding-bottom:6rem; */
	box-sizing: border-box;
}




.fixed-top-applets{
	padding: 5.47rem 1.54rem 6rem;
}





.pullDown,
.pullUp {
	text-align: center;
	height: 40px;
	line-height: 40px;
	font-size: 12px;
	color: #888;
	font-family: Arial, Microsoft YaHei;
}

.pullUp {
	display: block;
}

.loader {
	display: inline-block;
	font-size: 0px;
	padding: 0px;
	display: none;
}

.loader span {
	vertical-align: middle;
	border-radius: 100%;
	display: inline-block;
	width: 10px;
	height: 10px;
	margin: 0 2px;
	-webkit-animation: loader 0.8s linear infinite alternate;
	animation: loader 0.8s linear infinite alternate;
}

.loader span:nth-child(1) {
	-webkit-animation-delay: -1s;
	animation-delay: -1s;
	background: rgba(245, 103, 115, 0.6);
}

.loader span:nth-child(2) {
	-webkit-animation-delay: -0.8s;
	animation-delay: -0.8s;
	background: rgba(245, 103, 115, 0.8);
}

.loader span:nth-child(3) {
	-webkit-animation-delay: -0.26666s;
	animation-delay: -0.26666s;
	background: rgba(245, 103, 115, 1);
}

.loader span:nth-child(4) {
	-webkit-animation-delay: -0.8s;
	animation-delay: -0.8s;
	background: rgba(245, 103, 115, 0.8);
}

.loader span:nth-child(5) {
	-webkit-animation-delay: -1s;
	animation-delay: -1s;
	background: rgba(245, 103, 115, 0.4);
}

@keyframes loader {
	from {
		transform: scale(0, 0);
	}

	to {
		transform: scale(1, 1);
	}
}

@-webkit-keyframes loader {
	from {
		-webkit-transform: scale(0, 0);
	}

	to {
		-webkit-transform: scale(1, 1);
	}
}

.creative-fixed{
	width: 100%;
	position: fixed;
	top: -4%;
	left: 0;
	z-index: 1;
	box-sizing: border-box;
}

.pullDownLabel,.pullUpLabel,.loader{
	text-align: center;
}
.applets-case-layout .case-brief-introduction{
	min-height: 5.1rem;
	-webkit-line-clamp: 4;
}
.hide{
	display: none;
}