* {
    box-sizing: border-box;
}

/* body 样式 */
body {
    font-family: Arial;
    margin: 0;
    /* 设置最大宽度 */
    /*max-width: 1080px;*/
    /* 页面居中 */
    margin: auto;
    /* 默认背景颜色 */
    background-color:#f6f5f3 ;
}

/* 标题 */
/* 头部 */
.header {
    padding: 30px;
    text-align: left;
    color: rgb(247, 162, 162);
    min-height: 100px;
/* 设置背景图片 */
/*    background-color: #b3080a;*/
    background-image: url("../img/headBackground.png");
    background-size: cover;
    background-repeat: no-repeat;


}

.header-logo{
    width: 1100px;
    margin: auto;
}
.header-info{
    margin: auto;
    float: left;
}
/* 标题 */
.header h1 {
    padding-left: 120px;
    margin:auto;
    font-size: 40px;
    font-style: italic;

}
.header p{
    font-style: italic;
    font-size: 25px;
}

/* 导航 */
.navbar {
    overflow: hidden;
    background-color: rgb(239, 239, 240);
    max-width: 1100px;
    margin: auto;

}

/* 设置导航栏文本 */



/* 导航栏样式 */
.navbar a {
    float: left;
    display: block;
    color: #000000;

    transition-duration: 0.4s;

    text-align:right;
    padding: 14px 20px;
    text-decoration: none;

    display: flex;
    flex-direction: row;
    align-items: flex-end;
}

/* 右侧链接*/
/*.navbar a.right {*/
/*    float: right;*/
/*}*/

/* 鼠标移动到链接的颜色 */
.navbar a:hover {
    background-color: #50c9ff;
    color: rgb(0, 0, 0);
    font-weight: 700;

}


/* 列容器 */
/*装main和side的*/
.row {
    display: -ms-flexbox; /* IE10 */
    display: flex;
    -ms-flex-wrap: wrap; /* IE10 */
    flex-wrap: wrap;
    max-width: 1100px;
    margin: auto;
    min-height: 800px;
}

/* 创建两个列 */
/* 边栏 */
.side {
    -ms-flex: 30%; /* IE10 */
    flex: 30%;
    background-color: #f8f8f8;
    padding: 20px;
    /* 背景图片 */

}
/* 链接无下划线 */
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:none;}
a:active {text-decoration:underline;}
/* 主要的内容区域 */
.main {
    /*-ms-flex: 70%; !* IE10 *!*/
    flex: 70%;
    background-color: white;
    padding: 20px;
    min-height: 800px;
}

/* 测试图片 */
.fakeimg {
    background-color: rgba(115, 110, 110, 0.539);
    width: 100%;
    padding: 20px;
}



/* 底部 */
.footer {
    padding: 15px;
    text-align: center;
    background: #a60e12;
    font-size: 5px;
    color: white;
}
.copyright a:link {
    text-decoration:none;
color: #a4a4a4}    /* unvisited link */
.copyright a:visited {text-decoration:none;
    color: #a4a4a4
} /* visited link */
.copyright a:hover {text-decoration:underline;}   /* mouse over link */
.copyright a:active {text-decoration:underline;}  /* selected link */
/*首页================================*/
.map{

    width: 200px;
    height: auto;
}
.showSchoolItemContainer{
    display: flex;
    flex-direction: column;
    
}
.showSchoolItem{
    margin-bottom: 50px;
    height:auto;
    width: 100%;
    background-color: #ffffff;
}
.showSchoolItem img{
    width: 100%;

}
/*首页================================*/
/* 底部-消除链接颜色 */
/*                      =================惠院风光css=============                                 */
.fixTips{
    top: 500px;
    position: fixed;
}
/*                                       百叶窗    */

.windowShades{
    /* 引入字体 */
    font-family: 'Muli',sans-serif;
    /* 弹性布局 水平 + 垂直居中 */
    display: flex;
    align-items: center;
    justify-content: center;
    /**/

    /* 100%的窗口高度 */
    /*height: 100vh;*/
    height: 100%;
    /* 溢出隐藏 */
    overflow: hidden;
    margin: 0;
    background-color: #f2f2f4;
}

.windowShadesContainer{
    display: flex;
    width: 90vw;
    /*height: 50%;*/
}

.panel{
    /* 跟封面一样大小 */
    background-size: cover;
    /* 把封面图片居中 */
    background-position: center;
    background-repeat: no-repeat;
    height: 80vh;
    /* 边框圆角 */
    border-radius: 50px;
    color: #fff;
    /* 鼠标放上变小手 */
    cursor: pointer;
    flex: 0.5;
    margin: 10px;
    /* 相对定位 */
    position: relative;
    -webkit-transition: all 700ms ease-in;
}

.panel h3{
    font-size: 24px;
    /* 绝对定位 */
    position: absolute;
    bottom: 20px;
    left: 20px;
    margin: 0;
    opacity: 0;
}

.panel.active{
    flex: 5;
}

.panel.active h3 {
    opacity: 1;
    transition: opacity 0.3s ease-in 0.4s;
}

@media (max-width:480px){
    .windowShadesContainer{
        width: 100vw;
    }
    .panel:nth-of-type(4),
    .panel:nth-of-type(5){
        display: none;
    }
}
/*                                       百叶窗    end*/
/*                           具体细节           */

.imgDetailOuter{
    width: 100%;
    display: flex;
    flex-direction: row;
    padding: 20px;
    background-color: #f9f9fa;
    /*margin: auto;*/
    border-top-style: inset;
    border-width: 10px;
    margin-bottom: 100px;


}
.detailImg{

    /*height: 400px;*/
    /*width: 600px;*/
    flex: 45%;/*设置弹性盒子占比*/
    background-color: #f9f9fa;

    /*border-style: dotted;*/
    /*border-width: 5px;*/
    overflow: hidden;

}
.detailImg img{
    height: 400px;
    width: 450px;
    object-fit: cover;
    /*overflow: hidden;*/
    transform: scale(1.2);
}
/*切换图片按钮*/
.button {
    display: inline-block;
    border-radius: 4px;
    background-color: #f6f6f8;
    border: none;
    color: #2b2b2c;
    text-align: center;
    font-size: 20px;
    padding: 10px;
    width: 50px;
    transition: all 0.5s;
    cursor: pointer;
    margin: 0px;


/*    */
/*    object-fit: none;*/
}

.button span {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.5s;
}

.button span:after {
    /*content: '»';*/
    position: absolute;
    opacity: 0;
    top: 0;
    right: -20px;
    transition: 0.5s;
}

.button:hover span {
    /*padding-right: 20px;*/
    padding-top: 20px;
}

.button:hover span:after {
    opacity: 1;
    right: 0;
}
/*切换图片按钮*/

.refreshButton{
    object-fit: none;
    margin-right: 20px;
}

.detailText{
    flex: 55%;
    /*设置文本格式*/
    letter-spacing:1px;
    /*line-height:140%;!*行高*!*/
    padding-left: 10px;
    background-color: rgb(248, 248, 249);
}

/*设置浮现动画效果*/
/*.detailText{*/
/*    opacity: 0.5;*/
/*}*/
/*.detailText.active{*/
/*    opacity: 1;*/
/*    transition: opacity 0.5s;*/
/*}*/
/*设置浮现动画效果*/
.detailText p{
    /*设置文本缩进*/
    text-indent:50px;

}

/*                           具体细节          end */


.sceneryRow {
    display: -ms-flexbox; /* IE10 */
    display: flex;
    -ms-flex-wrap: wrap; /* IE10 */
    flex-wrap: wrap;
    max-width: 1100px;
    margin: auto;
    background-color: #ffffff;
}
.sceneryMain {
    /*-ms-flex: 70%; !* IE10 *!*/
    flex: 100%;
    background-color: white;
    padding: 20px;
}



/*                      =================惠院风光css===========                                 */

/*                      =================留言板css===========                                 */
.messageShow{
    width: 100%;
    height: 800px;
    /* 相对定位 */
    position: relative;
    /*top: 50px;*/
    /*设置滚动条*/
    overflow-y: scroll;
}

/*滚动条*/
.messageShow::-webkit-scrollbar{/*滚动条整体部分，其中的属性有width,height,background,border等（就和一个块级元素一样）（位置1）*/
    width:10px;
    height:10px;
}
/*.messageShow::-webkit-scrollbar-button{!*滚动条两端的按钮，可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果（位置2）*!*/
/*background:#fff;*/
/*}*/
.messageShow::-webkit-scrollbar-track{/*外层轨道，可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果（位置3）*/
    background:#f8f9fa;
}
.messageShow::-webkit-scrollbar-track-piece{/*内层轨道，滚动条中间部分（位置4）*/
    background:#f8f9fa;
}
.messageShow::-webkit-scrollbar-thumb{/*滚动条里面可以拖动的那部分（位置5）*/
    background:#00000033;
    border-radius:4px;
}
.messageShow::-webkit-scrollbar-corner {/*边角（位置6）*/
    background:#c0c0c0;
}
/*.messageShow::-webkit-scrollbar-resizer  {!*定义右下角拖动块的样式（位置7）*!*/
/*background:#FF0BEE;*/
/*}*/
.messageShow{
    scrollbar-arrow-color: #f4ae21; /**//*三角箭头的颜色*/
    scrollbar-face-color: #333; /**//*立体滚动条的颜色*/
    scrollbar-3dlight-color: #666; /**//*立体滚动条亮边的颜色*/
    scrollbar-highlight-color: #666; /**//*滚动条空白部分的颜色*/
    scrollbar-shadow-color: #999; /**//*立体滚动条阴影的颜色*/
    scrollbar-darkshadow-color: #666; /**//*立体滚动条强阴影的颜色*/
    scrollbar-track-color: #666; /**//*立体滚动条背景颜色*/
    scrollbar-base-color:#f8f8f8; /**//*滚动条的基本颜色*/
}

/*滚动条*/

.messageShow::after{
    content: "";
    /* 绝对定位 */
    position: absolute;
    top: -10px;
    left: 50%;
    width: 5px;
    z-index: 1;
    height: 110%;
    background-color: rgb(248, 169, 171);
}

.box{
    /* 相对定位 */
    position: relative;
    width: 100%;
    /*height: 120px;*/
    height: auto;
    margin-bottom: 50px;
    display: flex;
    /* 均匀排列每个元素
    首个元素放置于起点，末尾元素放置于终点 */
    justify-content: space-between;
}

.left,.right{
    position: relative;
    width: 40%;
    height: auto;
    /* background-color: rgba(255,255,255,.5); */
    border-radius: 15px;
    color: rgb(167, 255, 243);
    text-align: center;
    padding: 10px;
}

/*时间位置*/
.sendTime{
    position: relative;
    float: right;
    right: 0;
    bottom: 0;
    color: #1ec8e9;
    margin-top: 10px;
}

/* 页面范围内偶数的匹配元素 */
.box:nth-child(even) .left{
    background-color: rgb(120, 120, 244);
    box-shadow: rgba(0, 0, 0,.3);
}


/* 页面范围内奇数的匹配元素 */
.box:nth-child(odd) .right{
    background-color: rgb(120, 120, 244);
    box-shadow: rgba(0, 0, 0,.3);
}

.center{
    width: 15%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}
/* >是子元素选择器 */
.center > span{
    width: 120px;
    border-radius: 10px;
    text-align: center;
    font: 600 18px '';
    line-height: 50px;
    background-color: rgba(255, 196, 196, 0.5);
}
/*.messageShow{*/
/*    height: 300px;*/
/*    width: 600px;*/
/*    background-color: #eccff1;*/
/*    !*overflow-y:scroll;!*溢出设置滚条*!*!*/
/*}*/


/*                      =================留言板css===========                                 */



/* 响应式布局 - 在屏幕设备宽度尺寸小于 400px 时, 让导航栏目上下堆叠显示 */
@media screen and (max-width: 680px) {
    .row {
        flex-direction: column;
    }

    .navbar {
        display: flex;
        width: 100%;
        flex-direction: column;
        flex-wrap: wrap;


    }
    .navbar a{
        display: flex;
        justify-content: center;
        width: 100%;
    }


    /* 响应式使字体变大 */
    .navbar{
        font-size: 21px;
        font-weight: bold;
    }
    h2{
        font-size: 50px;
    }
    h3{
        font-size: 25px;
    }

    .main p{
        font-size: 25px;
    }
    .main h5{
        font-size: 30px;
    }
    .main h6{
        font-size: 25px;
    }
}