/*修改*/

.title{
  padding: 0 0;
}

.header{
	background-color: #facd4d !important;
}
.footer{
	background-color: #000 !important;
}

.wrap-topview, .main-section{
	background-color: transparent !important;
}

body{
	background: url(../images/bg.jpg) no-repeat center top fixed !important;
	background-color: #fcecc8 !important;
}
.m-wrap-topview{
	display: none;
}
.toppic-pid-box {
    padding-top: 0 !important;
    background: none !important;
}
.deals-list-box{
	background: #f1f1f1;
}
.toppic-pid-box .toppic-title{
	background-color: #ca0000 !important;
	padding: 0.5rem 0;
}
.toppic-pid-box .toppic-title h3{
	border-bottom: 1px solid #FFF;
	border-top: 1px solid #FFF;
	margin-bottom: 0;
	font-style: italic;
	padding: 0 0 0.5rem;
	cursor: pointer;
}
.toppic-pid-box .toppic-title h3 span{
	color: #fff000;
	font-size: 2.5rem;
	padding: 0 0.1rem;
}
.toppic-pid-box .toppic-title h3 span span{
	font-size: 1.8rem;
}
.toppic-pid-box .toppic-title h3 span.sm{
	color: #fff000;
	font-size: 1.3rem;
	padding: 0 0 0 0.5rem;
}
.toppic-pid-box .toppic-title h3.m-title{
	display: none;
}
.toppic-pid-box h4{
	color: #FFF;
	text-align: center;
    border-radius: 1rem 1rem 0 0;
    margin:0 auto;
	padding: 0.8rem 0;
	letter-spacing:0.5rem;
}
.title_kv{
	margin: 80px 0 50px calc(50% - 142px);
}
.wrap-topview .title_kv{
	animation: flipInY 1s ease-out alternate;
  	-webkit-animation: flipInY 1s ease-out alternate;
}
@keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
@-webkit-keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

#foodtop-box{ display: none; }
.tab-center{display: none;}
.tab-right{
	bottom: 12rem; 
    right: 15rem;  
    padding: 0; 
    position: fixed; 
    text-align: center; 
    z-index: 9999;
}
.tab-right div{
    z-index: 100;
    outline: none;
    color: #FFF;
    cursor: pointer;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: .9rem;
    line-height: 2.9rem;
    padding: 0.1rem 0 0;
    margin-bottom: .5rem;
    background-color: #57618e;
}
.tab-right div:hover{
	background-color: #8294d5;
}
/* RESPONSIVE-------------------------------------------------- */
@media only screen and (max-width: 1680px) and (min-width: 1367px){
.tab-right {
    right: 4.5rem;
	}
}
@media only screen and (max-width: 1366px) and (min-width: 1281px){
.tab-right {
    right: 2rem;
	}
}
@media only screen and (max-width: 1280px) and (min-width: 1199px){
.tab-right {
    right: 1rem;
	}
}
@media (max-width: 1198px){
.tab-right {
    right: 2rem;
	}
}
@media only screen and (max-width: 1024px) and (min-width: 970px){
.tab-right {
    right: 1rem;
	}
}
@media (max-width: 969px){ 
	body{
		background: url(../images/bg.jpg) no-repeat center -10px fixed !important;
		background-size: 200% !important;
		background-color: #fcecc8 !important;
	}
	.title{
		max-width: 100% !important;
		    flex: 0 0 100% !important;
		padding: 0 0 0;
	}
	.topBanner-box {
    	padding-bottom: 1rem;
	}
	.title_kv{
		margin: 50px 0 10px calc(50% - 142px);	
	}
	.tab-right{display: none;}
	.tab-center {
		position: fixed;
		top: 0;
		padding: 6px;
	   	width: 100%;
	    background: #facd4d;
	    z-index: 998;
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	}
	.tab-center a{
		flex-grow: 1;
		margin:0 6px;
	}
	.tab-center div{
		text-align: center;
		letter-spacing:0.2rem;
	    background-color: #57618e;
    	border-radius: 10px;
    	color: #fff;
    	font-size: 1.2rem;
    	padding: 10px;
	}
	.tab-center div:hover{
		background-color: #8294d5;
	}
}
@media (max-width: 815px){ 
	body{
		background-size: 220% !important;
		background-color: #fcecc8 !important;
	}
}
@media (max-width: 750px){ 
	body{
		background-size: 270% !important;
		background-color: #fcecc8 !important;
	}
}
@media (max-width: 560px){ 
	body{
		background: url(../images/bg.jpg) no-repeat center top fixed !important;
		background-size: 270% !important;
		background-color: #fcecc8 !important;
	}
}
/* APP and mobile */
@media (max-width: 500px){
	.wrap-topview{
		display: none;
	}
	.m-wrap-topview{
		display: block;
	}
	.title_kv{
		margin: 0;	
	}
	.toppic-pid-box .toppic-title h3.m-title{
		display: block;
	}
	.toppic-pid-box .toppic-title h3{
		font-size: 1.4rem !important;
		line-height: 1.1 !important;
	}
  	.toppic-pid-box h4{
		font-size: 1.2rem;
		padding: 0.3rem 0;
	}
	.toppic-pid-box{
		background-color: #f1f1f1!important;
	}
	.title_kv{
		width: 100%;
	    margin: 50px auto 0;	
	}
	.toppic-pid-box h4{
	    border-radius: 0;
	}
	.tab-center div{
    	border-radius: 6px;
    	font-size: 1rem;
	}
}