#middle .banner-wrap { width: 600px; }
#middle .banner-wrap > div { display:flex; flex-direction: column; margin-top: 20px; }
#middle .banner-wrap > div:first-child { margin-top: 0px; }
#middle .banner-wrap > div:nth-child(2) { display:flex; flex-direction: row; justify-content: space-between;}
#middle .banner-wrap > div:nth-child(2) img { width:290px;}

#middle .banner-wrap .link { position: absolute; border: 1px solid red; z-index: 1; }

#middle .banner-wrap .link.banner1 { width: 133px; height: 40px; margin-left: 233px; margin-top: 324px; border: 0; }
#middle .banner-wrap .link.banner4-1 { width: 304px; height: 38px; margin-left: 356px; margin-top: 65px; border: 0; }
#middle .banner-wrap .link.banner4-2 { width: 304px; height: 38px; margin-left: 356px; margin-top: 115px; border: 0; }

#middle .box:first-child { margin-top: 0px;}
#middle .box { background-color: white; width: 320px; padding: 30px 30px 39px 30px; margin-top: 20px; }
#middle .box > * { display: block; }
#middle .box > *:first-child { margin-top:0px !important; }
#middle .box .image { text-align: center; }
#middle .box .image img { max-width: 100%; max-height: 160px;}
#middle .box .tag { margin-top: 20px; padding: 5px 10px; display: inline-block; font-size: 13px; color: white; }
#middle .box .tag.blue { background-color: #4390ef; }
#middle .box .tag.red { background-color: #c11444; }
#middle .box .tag.gray { background-color: #6b7176; }
#middle .box .tag.purple { background-color: #7e48ea; }
#middle .box .title { font-size: 15px; font-weight:bold; color: #212121; margin-top: 10px;}
#middle .box .date { font-size: 13px; color: #999999; margin-top: 10px;  }
#middle .box .text { font-size: 14px; color: #555555; margin-top: 20px; line-height: 1.5; letter-spacing: -1px; }
#middle .box .more { float: right; margin-top: 15px; }
#middle .box .imageBox { max-height:230px;overflow:hidden; text-align: center}

#middle .right-wrap { display: flex; flex-direction: row;}
#middle .right-wrap .info-wrap { margin-left: 20px; }
#middle .right-wrap .article-wrap { margin-left: 20px; }


#outer_container { 
    overflow: hidden;
    margin: 0;          
}
#inner_container {
	overflow-y: hidden;
    overflow-x: hidden;
    width: calc(100% + 0px);

    float: left;   
    height:870px;
}



#poplayer{
    width: 667px;
    height: 937px;
    position:absolute;
    top:150px; left:100px;
    border:1px solid black;
    background-color: #ffffff;
    z-index:9999;
    display:none;
}

#poplayer img {
    width:100%;
}

#poplayer h1{
    text-align: center;
}

#poplayer p{
    margin-top:10px;
    font-size:13px;
    line-height:20px;
}

#poplayer .footer{
    clear:both;
    position:absolute;
    height:28px;
    right: 0; bottom: 0;
    width:100%;
    text-align: right;
    background-color: #d4d4d4;
    font-size:14px;

}


/* MOBILE */
@media only screen and (max-width: 1000px) {


    #middle .centered-wrap { flex-direction: column;}
    #middle .banner-wrap { width: 100%; }
    #middle .banner-wrap img { width: 100%; }
    #middle .banner-wrap a { width: 100%; }
    #middle .banner-wrap > div { width: calc(100% - 40px); margin-left: 20px; margin-right: 20px; }
    #middle .banner-wrap > div:first-child { width: 100%; margin-left:0; margin-right: 0;}
    #middle .banner-wrap > div:nth-child(2) a { width: calc(100% - 10px)}
    #middle .banner-wrap > div:nth-child(2) a:last-child { margin-left: 20px; }
    #middle .banner-wrap .link.banner1 { margin-left: 120px; margin-top: 173px; }
    #middle .banner-wrap .link.banner4-1 { margin-left: 5px;margin-top: 100px;width: 150px;height: 36px;}
    #middle .banner-wrap .link.banner4-2 { margin-left: 165px;margin-top: 100px;width: 150px;height: 36px;}

    #middle .right-wrap .info-wrap { margin: 20px 5px 10px 20px; display:flex; flex-direction: column; width:50%;}
    #middle .right-wrap .article-wrap {margin: 20px 10px 10px 5px;display:flex;flex-direction: column;width: 50%;}

    #middle .box {width: calc(100% - 40px);}
    #middle .box a { width: 100%; }
    #middle .box {padding: 15px 15px 20px 15px;margin-top: 20px;}

    #middle .box .tag {font-size: 11px;}
    #middle .box .title { font-size: 13px; }
    #middle .box .date { font-size: 12px;}
    #middle .box .text { font-size: 12px;}

    #inner_container {
        width: auto;
        float: none;
        height: auto;
    }

    #poplayer{
        width: 99vw;
        height: 145vw;
        top:0px; left:0px;
    }
    #poplayer p {
        display:none;
    }
}

@media only screen and (max-width: 300px) {
    #middle .right-wrap { flex-direction: column; }
}