/*单页复用**********/
section{
    position: relative;
    width: 100%;
}
#OtherContact>div,footer,#ContactPicturesBox p,#ContactPicturesBox,.TitleBox,#Display,#Recommand,#Poster,#BrandDisplay,#PosterBackground,#CurvedLine,#BrandDisplayTop,#BrandDisplayBottom{
    position: relative;
}
/*SectionTitle*/
.TitleBox img:nth-child(1){
    /*width: 32rem;*/
    /*height: 7rem;*/
    /*margin-left: -16rem;*/
    /*margin-top: -3.5rem;*/
}
.TitleBox img:nth-child(2){
    width: 10rem;
    height: 3rem;
    margin-left: -5rem;
    margin-top: -3.5rem;
}
.TitleBox p{
    color: red;
    font-size: 2rem;
    /*font-family: cursive;*/
    text-align: center;
    position: relative;
    top: 46%;
}
.TitleBox{
    /*height: 12rem;*/
}
.Title{
    text-align: center;
    /* border: 1px solid; */
    width: 90%;
    /* height: 12rem; */
    margin: 0 auto;
}
.Title>h2 {
    /* margin: 10px; */
    padding-top: 40px;
    font-size: 22px;
    color: #2d8fcc;
}
.Title>div {
    padding: 15px 0;
}
.Title>div>span {
    font-size: 16px;
}
/*Header导航**********************/
/*Poster*************************/
#Poster{
    height: auto!important;
    min-height: 0;
}
#Slogan{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50%;
    margin: -12% 0 0 -20%;
    /*opacity: 0;*/
    animation: rotate .8s 1 forwards linear;
}

@keyframes rotate {
    100% {
        padding: 0 100px;
        /*opacity: 1;*/
    }
}
/*BrandSection*******************/
#BrandDisplay{
    /*background: url("../images/品牌展示背景_02.jpg");*/
    /*background-size:100% 100%;*/
}
#BrandDisplay>div:nth-child(2){
}
#BrandPicturesBox{
    /* width: 80rem; */
    max-width: 1400px;
    margin: 0 auto;
}
#BrandPicturesBox>div{
    float: left;
    padding: 2rem 3rem;
    position: relative;
    width: 33%;
}
.BrandPictureTransition>div {
    overflow: hidden;
    width: 339px;
    height: 340px;
}
.BrandPictureTransition>p {
    text-align: center;
    font-size: 20px;
    padding: 5px 0;
}
.BrandPictureTransition>div>img {
    width: 100%;
    transition: all 1s;
}
.BrandPictureTransition>div:hover>img{
    transform: scale(1.2,1.2);
}

/*@media (max-width: 1100px) {*/
/*#BrandPicturesBox>div{*/
/*float: left;*/
/*position: relative;*/
/*}*/
/*}*/
.BrandPictureTransition>img:nth-child(1){
    width: 20rem;
    transition: all 1s;
    border-radius: 8%;
}
.BrandPictureTransition>img:nth-child(2){
    opacity: 0;
    position: absolute;
    left: -0.8rem;
    top: -2.8rem;
    transform: scale(.9,.9);
}
.BrandPictureTransition>p:nth-child(3){
    text-align: center;
    padding: 1.5rem 0;
    font-size: 2rem;
}
.BrandPictureTransition:hover>img:nth-child(1){
    transform: scale(1.1,1.1);
}
.BrandPictureTransition:hover>img:nth-child(2){
    opacity: 1;
}
/*Recommand*************************/
#Recommand{
    background: url("../images/菜品推荐背景_02.jpg");
    background-size:100% 100%;
}
#RecommandPicturesBox{
    /* border: 1px solid; */
    /*width: 110rem;*/
    margin: 0 auto;
    overflow: hidden;
    padding: 1rem 0 1rem 0;
}
#RecommandPicturesBox>div{
    float: left;
}
/*菜品推荐动画***********************/
.FoldPic{
    box-sizing: border-box;
    position: relative;
    width: 90px;
    height:450px;
    border-top: 4px solid transparent;
}
.FoldPic>img{
    width: 700px;
    height:450px;
}
.FoldPic:hover{
    border-top:4px #d71619 solid;
    -o-animation: f1 .5s linear;
    -moz-animation: f1 .5s linear;
    -webkit-animation:f1 .5s linear;
    -o-animation-fill-mode: forwards;
    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode: forwards;
    z-index: 999;
}
.FoldPic:hover>img{
    height: 450px;
}
@-o-keyframes f1{
    100%{width:825px;}
}
@-moz-keyframes f1{
    100%{width:825px;}
}
@-webkit-keyframes f1{
    100%{width:825px;}
}
/*HoverDishDetailBox**************/
.HoverDishDetailBox{
    display: none;
}
/*#ClassicFlagshipPicBox>div*/
.FoldPic:hover>.HoverDishDetailBox{
    display: block;
    z-index: 20;
    width: 125px;
    height: 450px;
    background-color: rgba(255,255,255,1);
    position: absolute;
    top: 0;
    right: 0;
    /*border-top: 0.3rem solid #d71619;*/
}
.HoverDishDetail>div:nth-child(1){
    color: #f00;
    margin: 1rem auto;
    border-radius: 50%;
    border: 0.18rem #f00 solid;
    width: 5rem;
    height: 5rem;
    text-align: center;
    font-size: 3rem;
    font-weight: bold;
    line-height: 5rem;
}
.HoverDishDetail>div:nth-child(2){
    padding: 0 0 .3rem 0;
    text-align: center;
    font-weight: bold;
    width: 8rem;
    margin: 0 auto;
    border-bottom: 2px #f00 solid;
}
.HoverDishDetail>p:nth-child(3){
    line-height: 1.3rem;
    margin: 0 auto;
    width: 4rem;
    height: 20rem;
    padding: 1rem 0;
    font-size: 1.2rem;
}
.HoverDishDetail>div:nth-child(4){
    position: relative;
    bottom: 0px;
    text-align: center;
}
/*Display*************************/
.Animation1{
    animation: exchange 1s forwards;
}
@keyframes exchange {
    100%{
        transform: translate(355px) scale(1.51,1.51);
    }
}
#Display{
    background: url("../images/风采展示背景_11.jpg");
    background-size:100% 100%;
}
#DisplayBoxPicturesBox{
    /*border: 1px solid;*/
    width: 99rem;
    margin: 0 auto;
    overflow: hidden;
    padding: 1rem 0 1rem 8rem;
}
#DisplayBoxPicturesBox>div{
    float: left;
    line-height: 348px;
}
/*Contact*************************/
#Contact{
    background: url("../images/联系我们背景_24.jpg");
    background-size:100% 100%;
}
/*#ContactPicturesBox{*/
/*}*/

@media (min-width: 1100px) {
    #ContactPicturesBox{
        max-width: 90rem;
        margin: 0 auto;
        overflow: hidden;
        padding: 1rem 0 1rem 8rem;
    }
}
@media (max-width: 1100px) {
    #ContactPicturesBox{
        max-width: 70rem;
        margin: 0 auto;
        overflow: hidden;
        padding: 1rem 0 1rem 0rem;
    }
}

/*#ContactPicturesBox{*/
/*!*border: 1px solid;*!*/
/*!*width: 99rem;*!*/
/*margin: 0 auto;*/
/*overflow: hidden;*/
/*padding: 1rem 0 1rem 8rem;*/
/*}*/
#ContactPicturesBox p{
    color: #fff;
    font-size: 3rem;
    padding: .4rem;
    /* font-weight: bold; */
    /* margin-right: 2rem; */
}
#ContactPicturesBox p>span{
    position: absolute;
    left: -4rem;
    line-height: 1.42857143;
}
#Map{
    float: left;
}
#ContactWay{
    float: left;
    padding-left: 5rem;
}
.OtherContactIcon{
    left: 15rem;
    z-index: 10;
    position: absolute;
    top: 7rem;
}
#OtherContact{
    float: right;
    /*margin-top: 2rem;*/
}
#OtherContact>div{
    /*float: left;*/
    padding-bottom: 5rem;
}
#OtherContact>div:nth-child(1){
    padding-right: 5rem;
}
#OtherContact>div>img:nth-child(1){
    width: 14rem;
    height: 14rem;
}
#Address{
    margin-top: 2rem;
}
.logo{
    width: 10rem;
    left: 12rem;
    position: absolute;
}
.logo a{
    text-decoration: none;
    font-size: 3rem;
    display: block;
    color: #fff;
    line-height: 4.5rem;
    font-weight: bold;
}

/*五张图片在缩略图时所显示的位置调整*/
#demo li:nth-of-type(1) img{ transform: translate(-210px);}
#demo li:nth-of-type(2) img{ transform: translate(-180px);}
#demo li:nth-of-type(3) img{ transform: translate(-380px);}
#demo li:nth-of-type(4) img{ transform: translate(-450px);}
#demo li:nth-of-type(5) img{ transform: translate(-320px);}
#demo{width:1160px;height:512px;margin:60px auto 0 auto;}
/*@media (max-width: 1100px) {*/
/*#demo {*/
/*width:1000px;height:512px;margin:60px auto 0 auto;*/
/*}*/
/*}*/
#demo img{width: 700px; height: 512px; max-width: 700px;}
#demo li{float:left;position:relative;width:82px;height:100%;overflow:hidden;cursor:pointer; transition:0.5s; transform-origin:bottom;filter:alpha(opacity=50);opacity:0.5;}
#demo li img{transition:1.2s;}
#demo li a{display:block;}
#demo li div{position:absolute;bottom:0;left:0;width:100%;background:#000;line-height:32px;filter:alpha(opacity=70);opacity:0.7;text-indent:2em;}
#demo li div a{color:#FFF;text-decoration:none;}
#demo li div a:hover{color:#F00;text-decoration:none;}
#demo li.active{cursor:pointer; transform:scale(1.02,1.08); z-index:3;width:700px;filter:alpha(opacity=100);opacity:1;}
#demo li.active img{transform:translate(0px);}
#demo li:nth-of-type(1){transform-origin:bottom left;}
#demo li:nth-of-type(5){transform-origin:bottom right;}

#Product{
    /*min-width: 95rem;*/
    /*max-height: 50rem;*/
}
.ProductPicsBox{
    width: 1550px;
    margin: 0 auto;
}
@media (min-width:1450px ) and (max-width: 1769px) {
    .ProductPicsBox{
        width:1240px;
    }
}
@media (max-width: 1449px) {
    .ProductPicsBox{
        width:940px;
    }
}

.ProductPicsBox.clearfix>div {
    margin: 1rem 1rem;
    overflow: hidden;
    float: left;
}
.CustomStyleOne{
    background: #f4d000;
    color: #fff;
    position: relative;
}
.CustomStyleOne>img{
    transition: all 1s;
    width: 285px;
    height: 197px;
}
.CustomStyleOne>div>h2{
    letter-spacing: 1px;
    font-size: 1.4rem;
    position: absolute;
    top: 40px;
    left: 40px;
    transition: all 1s;
    opacity: 0;
}
.CustomStyleOne>div>div{
    position: absolute;
    top: 80px;
    left: 40px;
    width: 0;
    height: 1px;
    border-top: 5px #F48135 solid;
    transition: all 1s;
    opacity: 0;
}
.CustomStyleOne>div>p{
    width: 200px;
    height: 40px;
    font-size: 1.4rem;
    position: absolute;
    z-index: 1;
    top: 110px;
    left: 350px;
    transition: all 1s;
    opacity: 0;
}
.CustomStyleOne:hover>img{
    opacity: .5;
}
.CustomStyleOne:hover>div>h2{
    opacity: 1
}
.CustomStyleOne:hover>div>div{
    width: 200px;
    opacity: 1;
}
.CustomStyleOne:hover>div>p{
    font-size: 1.4rem;
    z-index: 999;
    top: 110px;
    left: 60px;
    opacity: 1;
}
/*Advantage*****************************/
/*.AdvantageBody>div:nth-child(1) {*/
/*float: left;*/
/*}*/
.AdvantageBody.clearfix {
    /*width: 80%;*/
    margin: 0 auto;
}
.AdvantageBodyPicBox{
    float: left;
    overflow: hidden;
}
.AdvantageBodyContent{
    padding-left: 30px;
    float: right;
    overflow: hidden;
    /*max-width: 545px;*/
}
.AniTest{
    /*animation: rotateInDownLeft 2s forwards;*/
}
.AniTest2{
    animation: rotateInDownLeft 3s forwards;
}
.bounceInRight1{
    animation: bounceInRight 4s forwards;
}
.bounceInRight2{
    animation: bounceInRight 5s forwards;
}
.bounceInRight3{
    animation: bounceInRight 6s forwards;
}
.AdvantagePiece.clearfix {
    float: left;
    padding-bottom: 60px;
    width: 100%;
}
.AdvantagePiece>div, .AdvantagePiece>p {
    float: left;
}
.AdvantagePiece>div {
    width: 170px;
    margin-right: 20px;
    position: relative;
}
.AdvantagePiece>p {
    width: 70%;
    height: 100px;
    overflow: hidden;
}
.AdvantagePiece>div>p {
    position: absolute;
    right: 0;
    font-size: 16px;
    bottom: -4px;

}
@media (min-width:1770px ){
    .AdvantageBody.clearfix{
        width:1550px;
    }
    .AdvantageBodyContent{
        width: 900px;
    }
}
@media (min-width:1450px ) and (max-width: 1769px) {
    .AdvantageBody.clearfix{
        width:1240px;
    }
    .AdvantageBodyContent{
        width: 800px;
    }
}
@media (max-width: 1449px) {
    .AdvantageBody.clearfix{
        width:940px;
    }
    .AdvantageBodyContent{
        width: 535px;
    }
    .AdvantagePiece>p {
        width: 60%;
    }
}
/*AboutUs*************************/
#AboutUs{
    background: url("../images/background3.png");
    background-size: cover;
}
.AboutUsContentBox {
    width: 80%;
    margin: 0 auto;
    padding-top: 300px;
    height: 500px;
}
.AboutUsTitle {
    text-align: end;
    margin-top: 100px;
    float: left;
    width: 20%;
    font-weight: bold;
}
.AboutUsTitle>h2 {
    font-size: 26px;
}
.AboutUsTitle>p {
    font-size: 20px;
}
.AboutUsBrief {
    width: 70%;
    margin-left: 10%;
    color: #fff;
    float: right;
}
.AboutUsBrief>h3 {
    padding: 25px 0;
    font-size: 22px;
}
/*News*************************/
.NewsBox{
    margin: 0 auto;
    width: 80%;
}
.NewsArticalBox{
    padding: 30px 0;
}
.NewsUL{
    padding-left: 5%;
}
.NewsUL>li{
    list-style: initial;
    width: 45%;
    float: left;
    /* padding-left: 50px; */
    padding: 10px 0 10px 0px;
    margin-left: 30px;
    /*text-align: center;*/
}

.Banner{
    /*overflow: hidden;*/
}
.BannerContent{
    display: flex;
    background-color: #2d3e50;
    /*-moz-box-shadow: 3px 3px 5px #888888;*/
    /*box-shadow: 3px 3px 5px #888888;*/
    /*overflow: hidden;*/
    /*min-height: 340px;*/
}
.BannerTitle{
    width: 30%;
    /*height: 237px;*/
    position: relative;
}
.BannerTitle,.BannerImgBox{
    float: left;
}
.BannerTitle>img{
    position: absolute;
    right: 0;
    height: 100%;
    /*bottom: 0;*/
    top: 0;
}
.BannerImgBox{
    width: 70%;
    overflow: hidden;
 }
.BannerImg{
    width: 100%;
}
.BlueBottomBorder{
    width: 80%;
    margin: 5px auto;
    background-color: #00a1cb;
    height: 5px;
    -moz-box-shadow: 3px 3px 5px #888888;
    box-shadow: 3px 3px 5px #888888;
}
#CompanyProfileContent{
    width: 80%;
    margin: 0 auto;
    font-size: 18px;
}
.CompanyProfileArticle{
    padding: 0px 0 40px 0;
    text-indent: 40px;
    letter-spacing: 1px;
}
.CompanyProfileRemark{
    text-align: end;
}
/*@media (min-width:1770px ){*/
    /*#CompanyProfileContent{*/
        /*width:1430px;*/
    /*}*/
/*}*/
/*@media (min-width:1450px ) and (max-width: 1769px) {*/
    /*#CompanyProfileContent{*/
        /*width:1120px;*/
    /*}*/
/*}*/
/*@media (max-width: 1449px) {*/
    /*#CompanyProfileContent{*/
        /*width:820px;*/
    /*}*/
/*}*/
.NewsListUL>li:hover>a{
    color: #00a1cb;
}
.NewsListUL>li>a{
    width: 100%;
    clear: both;
    color: #000;
    display: block;
    padding: 4px 0 4px 8%;
    font-size: 16px;
    min-width: 800px;
}
.NewsListUL>li>a>span{
    width: 100px;
    float: right;
}