@keyframes fadeInLeft /*CSS动画 自左向右滑动*/
{
    from 
    {
      opacity: 0;
      transform: translate3d(-100%, 0, 0);
    }
    to 
    {
      opacity: 1;
      transform: none;
    }
}
@keyframes fadeInRight /*CSS动画 自右向左滑动*/
{
    from 
    {
      opacity: 0;
      transform: translate3d(100%, 0, 0);
    }
    to 
    {
      opacity: 1;
      transform: none;
    }
}
@keyframes fadeInDown /*CSS动画 自下向上滑动*/
{
    from 
    {
      opacity: 0;
      transform: translate3d(0%, 100%, 0);
    }
    to 
    {
      opacity: 1;
      transform: none;
    }
}
@keyframes fadeInUp /*CSS动画 自上向下滑动*/
{
    from 
    {
      opacity: 0;
      transform: translate3d(0%, -100%, 0);
    }
    to 
    {
      opacity: 1;
      transform: none;
    }
}
@keyframes fade-in  /*CSS动画 渐渐显示*/
{  
    0% {opacity: 0;}
    100% {opacity: 1;}
}
html,body 
{
    height: 100%;
    width: 100%;
    margin: 0px;
}
#container /*页面布局*/
{
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}
a, a:hover, a:link, a:visited /*超链接样式 页面中header以及footer中多次应用超链接*/
{
    font-size: 15px;
    color: gray;
    text-decoration: none;
    margin-left: 20px;
    font-family: "Microsoft YaHei";
}
a:hover
{
    color: white;
    text-decoration: underline;
    transition: all .2s;
}
p   /*p以及h1标签样式 页面中数次使用h1和p标签*/
{
    font-size: 28px;
    text-indent: 2em;
    text-align: left;
    line-height: 38px;
    font-family: "楷体";
}
h1
{
    font-size: 50px;
    text-align: center;
    font-family: "楷体";
    padding-top: 20px;
    margin-bottom: 0px;
    display: none;
}
header /*header 以及.head 布局 导航栏 永远显示在页面最上面*/
{
    flex: 0 0 auto;
}
.head
{   
    position: fixed;
    width: 1900px;
    padding-top: 0px;
    background-color: rgb(53, 53, 53);
    height: 60px;
    line-height: 60px;
    z-index: 9999;
}
.head img /*head中的图片 包括鞍职校徽 分院院徽 以及页面的标题*/
{
    margin-left: 80px;
    padding: 0px;
    height: 60px;
}
#headtitleimg 
{
    position: absolute;
    left: 800px;
}
#a1, #a2, #a3 /*head中的三个导航超链接的样式*/
{
    position: absolute;
    top: 10px;
    width: 150px;
    left: 1280px;
    font-size: 18px;
}
#a2
{
    left: 1430px;
}
#a3
{
    left: 1580px;
}
footer /*footer 以及.foot 布局 最下面页脚栏 在正文下方显示*/
{
    flex: 0 0 auto;
    background-color: #212121;
    margin: 0px;
    height: 50px;
    width: 1900px;
}
.foot
{
    padding-top: 13px;
    text-align: center;
}
.main /*页面主要内容*/
{
    flex: 1 0 auto;
    text-align: center;
}
.firstpage /*首页*/
{
    width: 1900px;
    height: 969px;
    background-image: url("firstpagebg.jpg");
}
#firstpageimg /*首页中的图片*/
{
    float: left;
    display: block;
    width: 1050px;
    padding-top: 250px;
    padding-left: 50px;
    animation-duration: 2s;
    animation-fill-mode: both;
    animation-name: fadeInLeft;
}
#firstpageimgdown /*首页最下方加载按钮*/
{
    position: absolute;
    width: 600px;
    top: 900px;
    left: 660px;
    animation-duration: 2s;
    animation-fill-mode: both;
    animation-name: fadeInDown;
}
#firstpageinfo /*首页内容介绍*/
{
    float: left;
    position: absolute;
    left: 1180px;
    top: 180px;
    width: 650px;
}
#firstpageinfo p /*首页内容介绍文字样式*/
{
    font-size: 22px;
    line-height: 30px;
    animation: fade-in;  
    animation-duration: 2s; 
}
.firstpage h1 /*首页标题文字*/
{
    position: absolute;
    animation: fade-in;  
    animation-duration: 2s; 
    padding-top: 60px;
    padding-left: 700px;
    display: block;
    width: 510px;
}
#vis /*其他内容最开始隐藏 在滑动或点击加载也面后，显示*/
{
    display: none;
}
.page    /*文档中游食情中的背景*/
{
    width: 1900px;
    height: 910px;
    margin-top: 50px;
}
#youshuidong
{
    background-image: url("youbg1.jpg");
}
#youguanmenshan
{
    background-image: url("youbg2.jpg");
}
#youlaobiangou
{
    background-image: url("youbg3.jpg");
}
#youqita
{
    background-image: url("youbg4.jpg");
}
.pageinfo /*文档中游食情中的文字*/
{
    float: left;
    position: absolute;
    display: none;
}
#shuidonginfo
{
    left: 140px;
    top: 1520px;
    width: 1650px;
}
#guanmenshaninfo
{
    left: 1000px;
    top: 2150px;
    width: 850px;
}
#laobiangouinfo
{
    left: 150px;
    top: 3080px;
    width: 850px;
}
.page img /*游中img统一设定float display*/
{
    float: left;
    display: none;
}
#youshuidong img /*不同景点再统一设定该景点图片的宽度以及其他信息 如果有需要特殊修改的则特殊修改*/ /*本溪水洞图片*/
{
    width: 500px;
    padding-top: 80px;
    padding-left: 100px;
}
#youguanmenshan img /*关门山 图片*/
{
    width: 400px;
    padding-top: 120px;
}
#guanmenshanimg1
{
    padding-left: 100px;
}
#guanmenshanimg2
{
    padding-left: 50px;
}
#youlaobiangou img /*老边沟 图片*/
{
    width: 525px;
}
#laobiangouimg1
{
    padding-top: 0px;
    padding-left: 1100px;
}
#laobiangouimg2
{
    padding-left: 1305px;
}
#youqita img /*其他 图片*/
{
    position: absolute;
    display: block;
    width: 540px;
    left: 0px;
    top: -15px;
}
.youimghover /*游 其他 中CSS设计hover 鼠标放上弹出介绍*/
{
    float: left;
    overflow: hidden;
    position: relative;
    display: none;
    height: 390px;
    width: 540px;
}
#youimghover1
{
    margin: 20px;
}
#youimghover2
{
    top: 400px;
    left: -150px;
}
#youimghover3
{
    left: -150px;
}
#youimghover4
{
    left: 750px;
    top: 10px;
}
.youhovertext 
{
    position: absolute;
    width: 540px;
    top: 320px;
    background: rgba(0, 0, 0, 0.7);
    transition: all 1s;
}
.youhovertext h4 
{
    line-height: 80px;
    font-size: 30px;
    color: white;
    text-align: center;
    margin: 0px;
    font-family: "楷体";
}
.youhovertext p 
{
    margin: 0px;
    font-size: 25px;
    line-height: 30px;
    color: white;
    height: 390px;
    text-align: left;
    padding: 0px 5px 0px 5px;
}
.youhovertext:hover
{
    top: 0px;
}

#shiyangtang    /*食羊汤*/
{
    background-image: url("shibg1.jpg");
}
#xiaoshiyangtangimg1
{
    width: 850px;
    margin-left: 50px;
    margin-top: 120px;
}
#xiaoshiyangtanginfo
{
    left: 980px;
    top: 5030px;
    width: 880px;
}
#shilongshanquan /*食龙山泉啤酒*/
{
    background-image: url("shibg2.jpg");
}
#shilongshanquan img
{
    width: 600px;
    margin-top: 40px;
}
#longshanquanpijiuimg1
{
    margin-left: 300px;
}
#longshanquanpijiuimg2
{
    margin-left: 100px;
}
#longshanquanpijiuinfo
{
    left: 100px;
    top: 6340px;
    width: 1720px;
}
#shihuanqiuzhaji /*食炸鸡*/
{
    background-image: url("shibg3.jpg");
}
#huanqiuzhajiimg1
{
    width: 500px;
    margin-left: 1350px;
    margin-top: 40px;
}
#huanqiuzhajiimg2
{
    width: 500px;
    margin-left: 880px;
    margin-top: 0px;
}
#huanqiuzhajiinfo
{
    left: 100px;
    top: 6950px;
    width: 720px;
}
#shiqita /*食其他*/
{
    background-image: url("shibg4.jpg");
}
#shiqita img
{
    margin-top: 10px;
}
#shiqitaimg1
{
    width: 300px;
    margin-left: 110px;
}
#shiqitaimg2
{
    width: 670px;
    margin-left: 200px;
}
#shiqitaimg3
{
    width: 300px;
    margin-left: 200px;
}
#shiqitainfo1
{
    left: 20px;
    top: 8250px;
    width: 550px;
}
#shiqitainfo2
{
    left: 620px;
    top: 8250px;
    width: 675px;
}
#shiqitainfo3
{
    left: 1350px;
    top: 8250px;
    width: 550px;
}
.pageinfo h5 /*食其他中的小标题*/
{
    font-family: "楷体";
    font-size: 30px;
    margin-top: 20px;
    margin-bottom: 0px;
}
#shiqitainfo1 h5
{
    padding-right: 65px;
}
#shiqitainfo3 h5
{
    padding-left: 20px;
}
#benxihu /*情本溪湖*/
{
    background-image: url("qingbg1.jpg");
}
#benxihu img
{
    width: 500px;
    margin-left: 150px;
}
#benxihuimg1
{
    margin-top: 30px;
}
#benxihuimg2
{
    clear: left;
}
#benxihuiinfo
{
    left: 850px;
    top: 8850px;
    width: 950px;
}
#benxihuiinfo p
{
    color: white;
}
#yaodugangdu /*情药都钢都*/
{
    background-image: url("qingbg2.jpg");
}
#yaodugangdu img
{
    width: 550px;
    margin-left: 670px;
    margin-top: 30px;
}
#yaodugangduimg2
{
    clear: left;
}
#yaodugangdu .pageinfo /*药都钢都的文字背景*/
{
    top: 9780px;
    width: 650px;
    padding: 0px;
    background-color: rgba(0, 0, 0, 0.4);
}
#yaodugangduinfo1
{
    left: 20px;
    height: 740px;
}
#yaodugangduinfo2
{
    left: 1220px;
    height: 750px;
}
#yaodugangdu .pageinfo p
{
    color: white;
    margin-top: 0px;
}
#xuexiao /*情学校*/
{
    background-image: url("qingbg3.jpg");
}
#xuexiao img
{
    width: 400px;
    margin-left: 60px;
    margin-top: 480px;
}
#xuexiaoinfo
{
    left: 250px;
    top: 10700px;
    width: 1350px;
}
#xuexiaoinfo p
{
    color: black;
}
#qingqita /*情 其他 本溪历史*/
{
    background-image: url("qingbg4.jpg");
    height: 2850px;
}
.lastpageoner img
{
    display: block;
    width: 150px;
    height: 150px;
    
}
.page .lastpageimg
{
    border: black 1px solid;
}
.lastpageoner, .lastpageonel /*单个历史的div 区分左右*/
{
    width: 952px;
    margin-top: 60px;
    margin-left: 935px;
    height: 150px;
    text-align:right;
    display: none;
}
.lastpageonel
{
    margin-left: 63px;
    text-align: left;
}
#qingqita p /*单个历史的p样式*/
{
    font-family: "Microsoft Black";
    float: left;
    margin: 0px;
    font-size: 20px;
    width: 550px;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    margin: 0px 50px 0px 50px;
} 

.lastpageonel img
{
    display: block;
    width: 150px;
    height: 150px;
}
#last /*结束页面*/
{
    background-image: url("lastpagebg.jpg");
}
#last h1
{
    color: orange;
    font-size: 75px;
    padding-top: 70px;
}
#lastimg1, #lastimg2, #lastimg3, #lastimg4 /*结束页面7张图片摆放*/
{
    width: 400px;
    margin-left: 40px;
    margin-top: 50px;
}
#lastimg1
{
    margin-left: 90px;
}
#lastimg5, #lastimg6, #lastimg7
{
    width: 400px;
    margin-left: 80px;
    margin-top: 90px;
}
#lastimg5
{
    margin-left: 280px;
}