/*
特别鸣谢: 彼岸临窗
*/


body {
    font-family: Arial, sans-serif;
    background-color: #fafafa;
    color: #333;
    margin: 0;
    padding: 0;
    position: absolute;
    width:calc(100vw - 17px); /* 17px是我电脑当前分标率下滚动条的宽度，可自行设置宽度*/
    -webkit-font-smoothing: antialiased;
    background-image: url('../img/body.jpg');
    background-position: left top;
    background-size: auto;
    background-repeat: repeat;
    background-attachment: fixed;
}


/**全局样式**/
.hidden {
    display: none;
}

.flex {
    display: inline-flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}

.nobg {
    background: none;
    color: #333;
}

.nobg .layui-nav-item a,.nobg .layui-nav-item a:hover, .nobg .layui-this a {
    color: #333;
}

.logo {
    display: block;
    width: 130px;
    height: 60px;
}

.layui-nav.layui-bg-gray .layui-this a {
    color:#373737;
    font-weight: bold;
}

.layui-nav .layui-this:after {
    width: 30%;
    left: 35%;
}

.layui-nav .layui-nav-item {
    line-height: 40px;
}

.container {
    height: calc(100vh - 110px);
    padding-top: 50px;
    box-sizing: border-box;
    overflow: hidden;
}

.introduce {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
        margin-right: 30px;
}

.miniapp {
    opacity: 0.8;
    width: 200px;
    border-radius: 80px;
}

.name {
    font-size: 25px;
    line-height: 2;
    margin-top: 10px;
    font-weight: bold;
}

.slogan {
    margin-top: 10px;
    letter-spacing: 2px;
    font-size: 16px;
}


.app {
    display: flex;
}

.app img {
    height: 600px;
    object-fit: contain;
}


.app01 {
    margin-right: -70px;
}


.footer {
    height: 30px;
    color: #9b9b9b;
    margin: 10px auto;
    text-align: center;
}

.footer a{
    color: #9b9b9b;
}

.footer a:hover {
    color: #9b9b9b;
}

/**祝福页面**/
/**祝福墙**/
/* 设置瀑布流布局 */
    .comment-list {
        list-style: none;
        padding: 0;
        min-height: 100vh;
        position: relative;
    }

    .comment-item {
        background: #f9f9f9;
        padding: 20px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        margin-bottom: 20px;
        position: absolute;
        width: 43%; /* 确保两列的宽度加上间距的总和等于50% */
    }

    .comment-content {
        margin-bottom: 10px;
    }

    .comment-info span {
        display: block;
        text-align: right;
        margin-top: 5px;
    }

#comments .comment-list li:nth-child(5n+1) {
    background: #f9f9f9;
}

#comments .comment-list li:nth-child(5n+2){
    background:rgba(255, 252, 229, 1);
}

#comments .comment-list li:nth-child(5n+3){
    background:rgba(217, 255, 226, 0.46);
}


#comments .comment-list li:nth-child(5n+4){
    background:rgba(255, 233, 156, 0.45);
}

#comments .comment-list li:nth-child(5n){
    background:rgba(255, 226, 210, 0.27);
}

.comment-container {
    padding: 30px 40px;
}

.comment-content {
    word-wrap: break-word;
    line-height: 2rem;
}

.comment-content p {
    margin: 0;
    padding-left: 0 !important;
    word-break: break-all;
    text-align: justify;
    color: #606975;
    line-height: 30px !important;
    position: relative;
    padding-bottom: 20px;
    font-size: 14px;
    background: -webkit-gradient( linear, left top, left bottom, from(#05241d), color-stop(2%, rgba(255, 255, 255, 0)) );
    background: -moz-repeating-linear-gradient(top,#05241d,#05241d 29px,rgba(255, 255, 255, 0) 30px);
	background: repeating-linear-gradient(top,#05241d,#05241d 29px,rgba(255, 255, 255, 0) 30px
    );		
    -webkit-background-size: 100% 30px;
}

.loadmore {
    text-align: center;
    margin: 10px auto 40px;
}

.loadmore button {
    padding: 3px 20px;
    border-radius: 100px;
    background: #16b777;
    color: #fff;
    border: #6d998e 1px solid;
    font-size: 14px;
    letter-spacing: 2px;
    cursor: pointer;
}

.loadmore button:disabled {
    border: none;
    background: none;
    color: #ababab;
    cursor: no-drop;
}

.tips {
    margin-top: 10px;
    color: #404040;
    opacity: 0.5;
    letter-spacing: 1px;
}

.tips span {
    color: #ff2e2e;
    margin-right: 5px;
}

/**隐藏移动端元素**/
.appinfo,.m-slogan,.m-footer {
    display: none;
}



/***以下代码兼容各种分辨率的屏幕**/

/**针对超大屏幕 超高分辨率的屏幕适配 如macbook surface等**/

/* 针对2560x1440分辨率 视图窗口为1423左右的屏幕 */
@media screen and (max-width: 1500px) {
    .flex,#comments {
        width: 70%;
        margin-left: 15%;
    }


}

/* 针对手机设备的适配 */
@media (max-width: 480px) {
    /* 确保没有全局重置导致问题 */
    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }
        
    @font-face {
        font-family: 'FZSS';
        src: url('https://cdn.bypic.cn/UI/font/FZSSJW.woff2') format('woff2'),
             url('https://cdn.bypic.cn/UI/font/FZSSJW.woff') format('woff'),
             url('https://cdn.bypic.cn/UI/font/FZSSJW.ttf') format('truetype'); 
        font-weight: normal;
        font-style: normal;
    }
    
    .flex,#comments {
        width: 90%;
        margin-left: 5%;
    }
    
    
    body {
        background: #ffffff;
        padding-top: 10px;
        width: 100%;
        box-sizing: border-box;
        margin-bottom: 20px;
    }
    

    .container {
        height: calc(100vh - 110px);
        padding-top: 50px;
        box-sizing: border-box;
    }
    .container .flex {
        display: inline-flex;
        justify-content: flex-start;
        align-items: center;
        flex-direction: column;
    }
    .app,.introduce,.footer{
        display: none;
    }
    
    .appinfo {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
    }
    
    .appinfo img {
        width: 80px;
        height: 80px;
        border-radius: 10px;
        box-shadow: 1px 1px 4px 0px #a5a5a5;
        margin-bottom: 10px;
    }
    
    .appinfo img.APP-QR {
        box-shadow: none;
        margin-top: 20px;
    }
    
    .appinfo h1 {
        font-family: FZSS;
        font-size: 20px;
        line-height: 2;
    }
    
    .appinfo span {
        font-size: 12px;
        color: #939393;
    }
    
    .appinfo a {
        color: #fff;
        background: #009f72;
        padding: 5px 15px;
        margin-top: 20px;
        border-radius: 50px;
        font-size: 12px;
        letter-spacing: 2px;
        border: none;
        
    }

    .m-slogan {
        display: block;
        margin-top: 30px;
        padding: 30px;
        font-size: 16px;
        letter-spacing: 1px;
        font-family: FZSS;
        text-align: center;
        line-height: 2;
        font-weight: bold;
    }
    
    /**移动端祝福也页**/
    .layui-col-xs12 {
        margin: 0 20px;
        width: calc(100% - 20px);
    }
    
    .comment-item {
        padding: 10px;
        margin-bottom: 10px;
        width:45%;
    }
    .comment-container {
        padding: 5px;
    }
    
    .comment-content p{
        line-height: 20px !important;
        background: -webkit-gradient(linear, left top, left bottom, from(#05241d), color-stop(2%, rgba(255, 255, 255, 0)));
        background: -moz-repeating-linear-gradient(top, #05241d, #05241d 29px, rgba(255, 255, 255, 0) 20px);
        background: repeating-linear-gradient(top, #05241d, #05241d 29px, rgba(255, 255, 255, 0) 20px);
        -webkit-background-size: 100% 20px;
        font-size: 12px;
        padding-bottom: 5px;
    }
    
    .comment-info span {
        color: #3f3f3f;
        font-size: 12px;
        display: block;
        text-align: right;
        margin-top: 2px;
    }
    
    /**底部**/
    .m-footer {
        display: block;
        color: #9b9b9b;
        margin: 10px auto;
        text-align: center;
        width: 80%;
        line-height: 1.5;
        font-size: 12px;
    }
    
    .m-footer a {
        color: #9b9b9b;
    }
    

    
    
    
    
    
    
    
    
    
    
    
}