﻿

.container { position: relative; width: 100%; }
.section { position:relative; background-size:cover!important; width:calc(100% - 250px)!important; margin-left:250px!important; overflow:hidden; }
@media all and (max-width:1200px){
	.section { width:100%!important; margin-left:0!important; }
}
.header_sj { position:fixed; top:0; left:0; right:0;  }
#fp-nav { display:none; }
/* 
.menu_2 { position:fixed; top:50%; right:2%; width:10px; margin-top:-85px; z-index:999; }
@media screen and (max-width: 1400px){
	.menu_2 { right:1%; }
}
.menu_2 li{ position:relative; margin-top:10px;text-align: center; padding:3px; border-radius:100%; }
.menu_2 li a { position: relative; display:block; width:4px; height:4px; border-radius:100%; background:#fff; }
.menu_2 li.active,.menu_2 li.hover { background:#fff; }
*/
@-webkit-keyframes bgShow {
	0% {
		background-size: 0%;
	}
	100% {
		background-size: 100%;
	}
}

@keyframes bgShow {
	0% {
		background-size: 0%;
	}
	100% {
		background-size: 100%;
	}
}

@-webkit-keyframes av_pulsate {
	0% {
	 -webkit-transform:scale(1);
	 opacity:0.0
	}
	50% {
	 opacity:0.7
	}

	100% {
	 -webkit-transform:scale(1.8);
	 opacity:0.0
	}
}
@keyframes av_pulsate {
	0% {
	 transform:scale(1);
	 opacity:0.0
	}
	50% {
	 opacity:0.7
	}


	100% {
	 transform:scale(1.8);
	 opacity:0.0
	}
}

.banArea { position:relative; width:100%; height:100%; overflow:hidden; }
.banner{ position:absolute; top:0; left:0; right:0; width:100%; height:67%; overflow:hidden; }
.banner .tempWrap { height:100%!important; }
.banner .bd { width:100%; height:100%; z-index:9; }
.banner .bd ul { width:100%; height:100%; }
.banner .bd ul li { background-size:cover!important; height:100%; }
.banner .bd ul li a { display:block; width:100%; height:100%; }
.banner .bd ul li a p { display:none; width:100%; height:100%; background-size:cover!important; }
.banner .hd { width:100%; position:absolute; left:0; z-index:11; bottom:20px; text-align:center; }
.banner .hd ul { display:inline-block; height:2px; }
.banner .hd ul li { position:relative; display:inline-block; width:8px; height:8px; margin:0 5px; background:#fff; border-radius:100%; font-size:0; cursor:pointer; }
.banner .hd ul .on { background:#fff; width:35px; border-radius:15px; }
.banner .prev,.banner .next { position: absolute; top: 50%; width:13px; height:34px; margin-top:-17px; z-index:9999; }
.banner .prev { left:5%; background: url(https://chachafood.com/images/prev.png) no-repeat center; }
.banner .next { right:5%; background: url(https://chachafood.com/images/next.png) no-repeat center; }
.ban01{ position:absolute; bottom:0; left:0; right:0; width:100%; height:33%; overflow:hidden; }
.ban01 ul { width:100%; height:100%;  }
.ban01 ul li { float:left; width:50%; height:100%; background-size:cover!important; cursor:pointer; }
.ban01 ul li p { display:none; width:100%; height:100%; background-size:cover!important; }
.video { position:absolute; top:0; right:0; bottom:0; left:0; background:#000; z-index:99; display:none; }
.video.on { display:block; }
.videocloase { position: absolute; top: 10px; right:10px; font-size: 50px; line-height: 1; color: #fff; z-index: 1; cursor: pointer; }
@media all and (max-width: 1200px) {
	.banner { padding-top: 60px;}
	.ban01{ height: 24%;}
}
@media all and (max-width:750px){
	.videoArea { position:absolute; top:0; left:0; right:0; top:30vh; }
	.banner .bd ul li a p { display:block; }
	.ban01 ul li p { display:block; }
}
.aArea { position:absolute; bottom:60px; left:10%; width:80%; z-index:5; }
.aArea .btn { position:absolute; right:0; bottom:40px; width:60px; z-index:5; }
.aArea .btn a { display:block; width:60px; height:58px; cursor:pointer; background-size:cover!important; }
.aArea .btn a.swiper-button-prev-white { background:url(../image/prev.jpg) no-repeat center; }
.aArea .btn a.swiper-button-next-white { background:url(../image/next.jpg) no-repeat center; }
.gallery-top01 { margin-bottom:80px!important; }
.gallery-top01 .swiper-slide .pic { float:right; width:calc(100% - 460px); }
.gallery-top01 .swiper-slide .txt { float:left; width:452px; padding-top:80px; }
.gallery-top01 .swiper-slide .txt .p1 { font-size:56px; color:#1b1b1b; line-height:63px; font-weight:bold; text-transform:uppercase; margin-bottom:40px; }
.gallery-top01 .swiper-slide .txt .p2 { font-size:22px; color:#d21d16; line-height:25px; font-weight:bold; margin-bottom:10px; }
.gallery-top01 .swiper-slide .txt .p2 i { display:none;; }
.gallery-top01 .swiper-slide .txt .p3 { font-size:22px; color:#333; line-height:25px;}
.gallery-top01 .swiper-slide .txt .p4 { margin-top:60px; }
.gallery-top01 .swiper-slide .txt .p4 a {display:block;position: relative;width:215px;height:56px;/* background:url(p02.png) no-repeat center; */border: 1px solid #d21d16;border-radius: 30px;overflow: hidden;transition: all 0.5s;font-size: 24px;font-family: Arial;font-weight: bolder;color: #d21d16;text-align: center;line-height: 56px;}
.gallery-top01 .swiper-slide .txt .p4 a::before {position: absolute; left: -1px; top: -1px; content: ''; width: 102%; height: 103%; background: #d21d16; border-radius: 30px;transform: scale(0,1); transform-origin: center right;    transition: transform 500ms cubic-bezier(0.86,0,0.07,1);    transition-timing-function: cubic-bezier(0.86,0,0.07,1);z-index: -1;}
.gallery-top01 .swiper-slide .txt .p4 a:hover {/* background:url(p01.png) no-repeat center; */color: #ffffff;}
.gallery-top01 .swiper-slide .txt .p4 a:hover::before {transform:scale(1,1); transform-origin: center left;}
div.gallery-thumbs01 { width:calc(100% - 140px); margin:0!important; overflow: inherit; }
.gallery-thumbs01 .swiper-slide { cursor:pointer;}
.gallery-thumbs01 .swiper-slide-thumb-active { background:url(../image/b01.png) no-repeat center center; animation: bgShow 1s ease forwards;}
.gallery-thumbs01 .swiper-slide-thumb-active::after {position: absolute; left: 0%; top: 0%; width: 54.3%; height: 71%; content: '\20'; background: #fee4e3; border-radius: 100%;animation: av_pulsate 2s linear infinite 1s; z-index: -1; opacity: 0;}
@media all and (max-width:1200px){
	.aArea { bottom:50px; }
	.gallery-top01 { margin-bottom:40px!important; }
	.gallery-top01 .swiper-slide .pic { width:50%; }
	.gallery-top01 .swiper-slide .txt { width:50%; padding-top:0; }
	.gallery-top01 .swiper-slide .txt .p1 { font-size:28px; line-height:35px; margin-bottom:20px; }
	.gallery-top01 .swiper-slide .txt .p2 { font-size:16px; line-height:20px; }
	.gallery-top01 .swiper-slide .txt .p3 { font-size:16px; line-height:20px; }
	.gallery-top01 .swiper-slide .txt .p4 { margin-top:30px; }
	.gallery-top01 .swiper-slide .txt .p4 a {display:block;width:143px;height:37px;line-height: 37px;font-size: 20px;}
}
@media all and (max-width:1000px){
	.aArea { bottom:20px; }
	.aArea .btn { display:none; }
	.gallery-top01 .swiper-slide .pic { float:none; width:100%; }
	.gallery-top01 .swiper-slide .txt { float:none; width:100%; margin-top:30px; }
	.gallery-top01 .swiper-slide .txt .p1 { font-size:20px; line-height:25px; margin-bottom:20px; }
	.gallery-top01 .swiper-slide .txt .p2 { font-size:16px; line-height:20px; }
	.gallery-top01 .swiper-slide .txt .p2 i { display:inline-block; font-weight:normal; text-transform:normal; color:#333; margin-left:0; }
	.gallery-top01 .swiper-slide .txt .p3 { display:none; }
	.gallery-thumbs01 { width:100%; }
}
.bArea { position:absolute; right:0; bottom:0; width:720px; padding:45px 90px 60px 90px; background:rgba(193,2,20,0.5); color:#fff; z-index:9; }
.bArea .p1 { font-size:50px; font-weight:bold; line-height:1; }
.bArea .p2 { font-size:30px; margin:25px 0; line-height:1; }
.bArea .p3 { font-size:18px; line-height:30px; margin-bottom:30px; }
.bArea .p4 a {position: relative; display:block; font-size:20px; width:210px; height:55px; text-align:center; line-height:55px; font-weight:bold; color:#fff; overflow: hidden; border:1px solid rgba(255,255,255,0.5); border-radius:30px; transition: all 0.5s;}
.bArea .p4 a::before{position: absolute; left: -1px; top: -1px; content: ''; width: 102%; height: 103%; background: #fff; border-radius: 30px;transform: scale(0,1); transform-origin: center right;    transition: transform 500ms cubic-bezier(0.86,0,0.07,1);    transition-timing-function: cubic-bezier(0.86,0,0.07,1);z-index: -1;}
.bArea .p4 a:hover {color: #d21d16;}
.bArea .p4 a:hover::before {transform:scale(1,1); transform-origin: center left;  }
@media all and (max-width:1200px){
	.bArea { position:absolute; right:0; bottom:0; width:100%; left:0; padding:20px; color:#fff; z-index:9; box-sizing: border-box; }
	.bArea .p1 { font-size:25px; font-weight:bold; line-height:1; }
	.bArea .p2 { font-size:18px; margin:25px 0; line-height:1; }
	.bArea .p3 { font-size:14px; line-height:25px; margin-bottom:20px; }
	.bArea .p4 a { font-size:14px; width:150px; height:35px; line-height:35px; }
}

@media all and (max-width: 750px){
	.bArea .p3 {
		 text-overflow: -o-ellipsis-lastline;
  		overflow: hidden;
  		text-overflow: ellipsis;
  		display: -webkit-box;
  		-webkit-line-clamp: 3;
  		line-clamp: 3;
  		-webkit-box-orient: vertical;
	}
}
.dArea { width:80%; margin:0 auto; }
.dArea .hd { border-bottom:1px solid #cbcdca; margin-bottom:30px; font-size:0; }
.dArea .hd ul li { position:relative; display:inline-block; font-size:20px; color:#000; height:60px; line-height:60px; text-transform:uppercase; padding:0 20px; cursor:pointer; }
.dArea .hd ul li.on { font-size:30px; color:#cc1c15; font-weight:bold; }
.dArea .hd ul li:after { position:absolute; left:0; bottom:-1px; right:0; width:100%; content:""; display:none; height:1px; background:#cc1c15; z-index:5; }
.dArea .hd ul li.on:after { display:block; }

/* å°†é¦–é¡µçš„newsä¿®æ”¹æˆswiperæ¢é¡µå½¢å¼ */
.dArea .news-swiper {
	padding-bottom: 60px;
}

.dArea .news-swiper .swiper-slide {
	width: 100%;
}

.dArea .news-swiper .news-swiper-prev,
.dArea .news-swiper .news-swiper-next {
	top: unset;
	bottom: 0;
	width: 40px;
	height: 26px;
    border: 1px solid #ddd;
    background: #fff;
	text-align: center;
	line-height: 26px;
    color: #333;
}

.dArea .news-swiper .news-swiper-prev {
    left: auto;
    right: 50%;
    margin-right: 130px;
}

.dArea .news-swiper .news-swiper-next {
    left: 50%;
    margin-left: 130px;
}

.dArea .news-swiper .news-swiper-prev:hover,
.dArea .news-swiper .news-swiper-next:hover {
	background: #ef0e16;
	color: #ffffff;
}

.dArea .news-swiper>.swiper-pagination-bullets .swiper-pagination-bullet {
	width: 24px;
	height: 26px;
	opacity: 1;
	font-size: 14px;
	background: #ffffff;
	color: #333333;
	text-align: center;
	line-height: 26px;
	border-radius: 0;
}

.dArea .news-swiper>.swiper-pagination-bullets .swiper-pagination-bullet:hover,
.dArea .news-swiper >.swiper-pagination-bullets .swiper-pagination-bullet-active {
	background: #ef0e16;
	color: #ffffff;
	opacity: 1;
}

.dArea .news-swiper>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
	bottom: 0;
}

.dArea .bd ul li { margin-bottom:30px; overflow:hidden; }
.dArea .bd ul li:last-child { margin-bottom:0; }
.dArea .bd ul li .pic { float:left; width:250px; height:auto; margin-right:30px; overflow:hidden; }
.dArea .bd ul li .pic img { width:100%; height:auto; transition: all 0.6s; }
.dArea .bd ul li dl { display:block; overflow:hidden; zoom:1; padding-top:10px; }
.dArea .bd ul li dl dt { font-size:24px; line-height:30px; color:#313131; line-height:30px; font-weight:bold; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; }
.dArea .bd ul li dl dt a { color:#313131; }
.dArea .bd ul li dl .d { margin:15px 0 10px; font-size:16px; color:#cc1c15; line-height:20px; font-weight:bold; }
.dArea .bd ul li dl .m { display:none; }
.dArea .bd ul li dl .i { color:#313131; font-size:16px; line-height:30px; height:60px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box;  -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.dArea .bd ul li:hover .pic img { transform: scale(1.1)!important; }
.dArea .bd ul li:hover dl dt { color:#cc1c15; }
.dArea .bd ul li:hover dl dt a { color:#cc1c15; }
@media all and (max-width:1500px){
	.dArea .hd {  margin-bottom:20px; }
	.dArea .bd ul li { margin-bottom:20px; }
	.dArea .bd ul li:last-child { margin-bottom:0; }
	.dArea .bd ul li .pic { width:200px; margin-right:20px; }
}
@media all and (max-width:1200px){
	.dArea .hd { margin-bottom:20px; font-size:0; }
	.dArea .hd ul li { font-size:16px; height:40px; line-height:40px; padding:0 15px; }
	.dArea .hd ul li.on { font-size:18px; }
	.dArea .hd ul li:after { bottom:-2px; }
	.dArea .bd ul li { margin-bottom:15px; }
	.dArea .bd ul li:last-child { margin-bottom:0; }
}
@media all and (max-width:1000px){
	.dArea { width:90%; margin:0 auto; }
	.dArea .hd ul li { font-size:14px; padding:0 5px; }
	.dArea .hd ul li.on { font-size:14px; }
	.dArea .hd ul li:after { bottom:-1px; }
	.dArea .bd ul li .pic { width:150px; }
	.dArea .bd ul li dl dt { font-size:16px; line-height:20px; line-height:20px; }
	.dArea .bd ul li dl .d { margin:10px 0; font-size:12px; line-height:20px; font-weight:bold; }
	.dArea .bd ul li dl .i { font-size:12px; line-height:25px; height:50px; }
}
@media all and (max-width:750px){
	.dArea .bd ul li .pic { width:120px; }
	.dArea .bd ul li dl { padding-top:0; }
	.dArea .bd ul li dl dt { font-size:14px;  }
	.dArea .bd ul li dl .d { margin:5px 0; }
	.dArea .bd ul li dl .i { font-size:12px; line-height:20px; height:40px; }
}
.tail { position:absolute; left:0; right:0; bottom:0; z-index:5; }
.active .aArea .swiper-slide .txt {
	-webkit-animation: fadeInLeft 1s 0s cubic-bezier(0.4, 0.01, 0.165, 0.99);
	animation: fadeInLeft 1s 0s cubic-bezier(0.4, 0.01, 0.165, 0.99);
}
.active .aArea .swiper-slide .pic {
	-webkit-animation: fadeInRight 1s 0s cubic-bezier(0.4, 0.01, 0.165, 0.99);
	animation: fadeInRight 1s 0s cubic-bezier(0.4, 0.01, 0.165, 0.99);
}
.active .aArea .btn {
	-webkit-animation: fadeInRight 1s 0s cubic-bezier(0.4, 0.01, 0.165, 0.99);
	animation: fadeInRight 1s 0s cubic-bezier(0.4, 0.01, 0.165, 0.99);
}
.active .aArea .gallery-thumbs01 {
	-webkit-animation: fadeInUp 1s 0s cubic-bezier(0.4, 0.01, 0.165, 0.99);
	animation: fadeInUp 1s 0s cubic-bezier(0.4, 0.01, 0.165, 0.99);
}
.active .bArea {
	-webkit-animation: fadeInRight 1s 0s cubic-bezier(0.4, 0.01, 0.165, 0.99);
	animation: fadeInRight 1s 0s cubic-bezier(0.4, 0.01, 0.165, 0.99);
}
.active .more {
	-webkit-animation: fadeInRight 1s 0s cubic-bezier(0.4, 0.01, 0.165, 0.99);
	animation: fadeInRight 1s 0s cubic-bezier(0.4, 0.01, 0.165, 0.99);
}

.active .dArea {
	-webkit-animation: fadeInUp 1s 0s cubic-bezier(0.4, 0.01, 0.165, 0.99);
	animation: fadeInUp 1s 0s cubic-bezier(0.4, 0.01, 0.165, 0.99);
}
.active .tail {
	-webkit-animation: fadeInUp 1s 0s cubic-bezier(0.4, 0.01, 0.165, 0.99);
	animation: fadeInUp 1s 0s cubic-bezier(0.4, 0.01, 0.165, 0.99);
}
/*
.active .a01 {
	-webkit-animation: fadeInLeft 1s 0s cubic-bezier(0.4, 0.01, 0.165, 0.99);
	animation: fadeInLeft 1s 0s cubic-bezier(0.4, 0.01, 0.165, 0.99);
}
.active .a02 {
	-webkit-animation: fadeInRight 1s 0s cubic-bezier(0.4, 0.01, 0.165, 0.99);
	animation: fadeInRight 1s 0s cubic-bezier(0.4, 0.01, 0.165, 0.99);
}
.active .a03 {
	-webkit-animation: fadeInUp 1s 0s cubic-bezier(0.4, 0.01, 0.165, 0.99);
	animation: fadeInUp 1s 0s cubic-bezier(0.4, 0.01, 0.165, 0.99);
}
.active .b02 {
	-webkit-animation: fadeInRight 1s 0s cubic-bezier(0.4, 0.01, 0.165, 0.99);
	animation: fadeInRight 1s 0s cubic-bezier(0.4, 0.01, 0.165, 0.99);
}
.active .c01 {
	-webkit-animation: fadeInLeft 1s 0s cubic-bezier(0.4, 0.01, 0.165, 0.99);
	animation: fadeInLeft 1s 0s cubic-bezier(0.4, 0.01, 0.165, 0.99);
}
.active .c02 {
	-webkit-animation: fadeInRight 1s 0s cubic-bezier(0.4, 0.01, 0.165, 0.99);
	animation: fadeInRight 1s 0s cubic-bezier(0.4, 0.01, 0.165, 0.99);
}
.active .d01 {
	-webkit-animation: fadeInLeft 1s 0s cubic-bezier(0.4, 0.01, 0.165, 0.99);
	animation: fadeInLeft 1s 0s cubic-bezier(0.4, 0.01, 0.165, 0.99);
}
.active .d02 {
	-webkit-animation: fadeInRight 1s 0s cubic-bezier(0.4, 0.01, 0.165, 0.99);
	animation: fadeInRight 1s 0s cubic-bezier(0.4, 0.01, 0.165, 0.99);
}
.active .d03 {
	-webkit-animation: fadeInUp 1s 0s cubic-bezier(0.4, 0.01, 0.165, 0.99);
	animation: fadeInUp 1s 0s cubic-bezier(0.4, 0.01, 0.165, 0.99);
}
*/


.section4 {
	z-index: 9;
}

.section4 a.more {
	display: block;
	position: relative;
	width: 215px;
	height: 56px;
	margin: 50vh auto 0;
	/* background: url(p01.png) no-repeat center; */
	border: 1px solid #fff;
	border-radius: 30px;
	transition: all 0.5s;
	overflow: hidden;
	font-size: 24px;
	font-family: Arial;
	color: #ffffff;
	font-weight: bold;
	text-align: center;
	line-height: 56px;
}

.section4 a.more::before {
	position: absolute;
	left: -1px;
	top: -1px;
	content: '';
	width: 102%;
	height: 103%;
	background: #fff;
	border-radius: 30px;
	transform: scale(0,1);
	transform-origin: center right;
	transition: transform 500ms cubic-bezier(0.86,0,0.07,1);
	transition-timing-function: cubic-bezier(0.86,0,0.07,1);
	z-index: -1;
}

.section4 a.more:hover {
	/* background: url(p02.png) no-repeat center; */
	color: #d21d16;
}

.section4 a.more:hover::before {
	transform: scale(1,1);
	transform-origin: center left;
}

.section5 {
	z-index: 9;
}

.section5 a.more {
	display: block;
	position: relative;
	width: 215px;
	height: 56px;
	margin: 4vh auto;
	/* background: url(p02.png) no-repeat center; */
	border: 1px solid #d21d16;
	border-radius: 30px;
	overflow: hidden;
	transition: all 0.5s;
	font-size: 24px;
	font-family: Arial;
	font-weight: bolder;
	color: #d21d16;
	text-align: center;
	line-height: 56px;
}

.section5 a.more::before {
	position: absolute;
    left: -1px;
    top: -1px;
    content: '';
    width: 102%;
    height: 103%;
    background: #d21d16;
    border-radius: 30px;
    transform: scale(0,1);
    transform-origin: center right;
    transition: transform 500ms cubic-bezier(0.86,0,0.07,1);
    transition-timing-function: cubic-bezier(0.86,0,0.07,1);
    z-index: -1;
}

.section5 a.more:hover {
	/* background: url(p01.png) no-repeat center; */
	color: #ffffff;
}

.section5 a.more:hover::before {
	transform: scale(1,1);
    transform-origin: center left;
}

.section6 .eArea02 form {
	position: relative;
	z-index: 9;
}

.section6 .eArea02 .send {
	position: absolute;
	left: 0;
	bottom: 0;
    width: 215px;
    height: 56px;
	background: url(../image/btn01.png) no-repeat center;
	border: 1px solid #d21d16;
	border-radius: 30px;
	overflow: hidden;
	transition: all 0.5s;
	cursor: pointer;
}

.section6 .eArea02 .send::before {
    position: absolute;
    left: -1px;
    top: -1px;
    content: '';
    width: 102%;
    height: 104%;
    background: #d21d16;
    border-radius: 30px;
    transform: scale(0,1);
    transform-origin: center right;
    transition: transform 500ms cubic-bezier(0.86,0,0.07,1);
    transition-timing-function: cubic-bezier(0.86,0,0.07,1);
    z-index: -1;
}

.section6 .eArea02 .subBox {
	position: relative;
	z-index: 9;
}

.section6 .eArea02 .subBox:hover .send {
	background: url(../image/btn02.png) no-repeat center;
}

.section6 .eArea02 .subBox:hover .send::before {
	transform: scale(1,1);
    transform-origin: center left;
}

@media all and (max-width:1200px){
    .section4 a.more {
    width: 143px;
    height: 37px;
    line-height: 37px;
    font-size: 20px;
    }

    .section5 a.more {
    width: 143px;
    height: 37px;
    line-height: 37px;
    font-size: 20px;
    }
}