body[page="resources"]{

    .leftmenu {
        position: relative;
        background-color: #f9f9f9;
        padding: 25px;
        width: 150px;
        font-size: 14px;
        z-index: 1;
        display: inline-block;
        vertical-align: top;
        text-align: left;
        margin-left: 40px;

        li{
                line-height: 30px;

                &:hover{
                    color: #666;
                }


                &.active{
                    color: #257874;
                }

                &.submenu{
                    margin-left: 15px;

                    display: none;
                }
        }
    }
    h2.maintitle {
        color: #257874;
        font-size: 18px;
        text-align: center;
    }

    h1.maintitle {
        font-size: 24px;
        letter-spacing: 1px;
        margin-bottom: 6px;
        margin-top: 5px;
        text-align: center;


    }
    


     .mainwrap {
        margin: auto;
        font-size: 16px;
        font-weight: 400;
        line-height: 30px;
        margin-bottom: 50px;
        color: #333;
        min-height: 250px;
        display: inline-block;
        margin-left: 60px;
        text-align: left;
        margin-right: 40px;
        width: calc(100% - 350px);


        .info{
             h1.maintitle{
                color: #6aaeab;
                font-weight: 500;
                margin-top: 30px;
            }

            .inform{
                    background-color: #f9f9f9;
                    padding: 20px;
                    margin-top: 30px;
                    margin-bottom: 30px;
                    padding-left: 50px;
                    padding-right: 50px;
            }
            article{
                text-align: left;

                img{
                    max-width: 100%;
                    height: auto !important;
                }

                
            }
            .each {
                font-size: 14px;
                color: #434343;
                letter-spacing: 3px;
                margin-bottom: 0px;
                margin-top: 0px;
                text-align: left;
            }
            .view{
                font-size: 14px;
                color: #717171;
                letter-spacing: 3px;
                margin-bottom: 40px;
                margin-top: 40px;
            }
        }

        .list{
            display: none;
        }


        .thead{
            background-color: #53a3a1;
            display: flex;
            color: #FFF;
            font-size: 14px;
            margin-top: 30px;

            li{
                flex: 1;
                padding: 5px;
                text-align: center;

                &.name{
                    flex: 3;
                }
                &.location{
                    flex:2;
                }
            }
        }
        .tbody{

            .each{
                 display: flex;
                 font-size: 14px;

                 &:hover{
                    color: #009688;
                 }


                 &:nth-child(even) {
                    background-color: #f9f9f9;
                 }

                li{
                    flex: 1;
                     text-align: center;
                     padding: 5px;

                     &.name{
                        flex: 3;
                        text-align: left;
                        letter-spacing: 0px;
                    }
                    &.location{
                        flex:2;
                    }
                }

                .btn{
                        border: 1px solid #999;
                    display: inline-block;
                    width: 55px;
                    font-size: 13px;
                    height: 25px;
                    line-height: 25px;
                    border-radius: 5px;
                    cursor: pointer;
                }
            }
        }

    }

    .nonedata{
        color: #b1b1b1;
        text-align: center;
        padding: 30px;
        font-size: 14px;
        display: none;
    }

  

    /* attachment */
    .attachment_wrap{
            margin-top: 50px;
            border-bottom: 1px dashed #e9e9e9;
            margin-bottom: 50px;


            li{
                text-align: left;
                    margin-bottom: 5px;

                i{
                    background-color: #138986;
                    color: #FFF;
                    width: 30px;
                    height: 30px;
                    border-radius: 30px;
                    text-align: center;
                    line-height: 30px;
                    margin-right: 5px;
                }
                .thename{
                    display: inline-block;
                    color: #138986;
                    font-size: 15px;
                }

                &:nth-child(1):before{
                    background-color: #e9e9e9;
                    height: 1px;
                    position: relative;
                    display: block;
                    content: '';
                    margin-bottom: 20px;
                }


                &:hover{
                    opacity: 0.7;
                }
            }
    }


    .photos_wrap{


        .each{
                background-color: #e9e9e9;
                width: 22%;
                padding-bottom: 15%;
                display: inline-block;
                border: 1px solid #e2e2e2;
                margin: 1%;
                background-size: cover;
                background-position: center;

                    background-size: contain;
                background-repeat: no-repeat;
                background-color: #e9e9e9;
        }
    }
}


body[page=resources][id=""] .mainwrap .list{
    display: block;
}
body[page=resources][id=""] .mainwrap .info{
    display: none;
}


/*  rwd  */
/* -----------------------------------*/
@media screen and (max-width: 1240px) {


    body[page=resources] .leftmenu{
        position: relative;
        top: 0;
        left: 0;
        padding: 15px;
        width: auto;
        margin-left: 0px;
        margin-right: 0px;
        text-align: center;
        margin-bottom: 20px;
        display: block;
    }
    .leftmenu li{
        line-height: 20px;
        display: inline-block;
        padding: 5px;
    }

    body[page=resources] .mainwrap {
        margin: auto;
        font-size: 14px;
        line-height: 25px;
        font-weight: 400;
        margin-bottom: 50px;
        color: #333;
        min-height: 150px;
        display: block;
        margin-left: 20px;
        text-align: left;
        margin-right: 20px;
        width: auto;
    }

    body[page=resources] .mainwrap .tbody .each{
        font-size: 13px;
        padding: 5px;
    }
    body[page=resources] .mainwrap .thead li.date{
        display: none;
    }
    body[page=resources] .mainwrap .tbody .each li.date{
         display: none;
    }

    body[page=resources] .photos_wrap .each{
        width: 40%;
        padding-bottom: 27%;
    }
    body[page=resources] .leftmenu li.submenu {
        margin-left: 0px;
    }
}