@import url('https://fonts.googleapis.com/css2?family=Spectral+SC:wght@400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,400;0,700;1,400;1,700&display=swap');
body, html{
    margin:0;
    padding:0;
}
body{
    background:url('images/bg-gradient.png') repeat-x #1c3644;
    font-family:"Spectral",serif;
}
img{
    max-width:100%;
}
a{
    color:#1c3745;
}

#header{
    margin: 0 auto;
    width:1035px;
    max-width:100%;
    height:200px;
    display:flex;
    padding:40px 20px 15px 20px;
    box-sizing:border-box;
    align-items:flex-end;
}
#header-left{
    position:relative;
}
#logo{
    display:block;
    position:relative;
    z-index:20;
}
#logo-deco{
    position:absolute;
    bottom:-162px;
    width:150%;
    left:-51px;
}
#header-right{
    width:728px;
    flex-grow:0;
    flex-shrink:0;
    font-family:"Spectral SC",serif;
    margin-left:50px;
    font-size:1.2em;
}
#menu-click{
    display:none;
}
#top-space{
    margin-bottom:15px;
    width:728px;
    height:90px;
    background:#ccc;
}
#menu{
    display:flex;
    justify-content:space-evenly;
}
#menu a{
    color:#fff;
    text-decoration:none;
}
#menu a:hover{
    color:#d09dcf;
}
@media screen and (max-width:1150px){
    #logo-deco{
        display:none;
    }
    #header-right{
        margin-left:20px;
    }
    #header{
        padding:15px;
        height:auto;
    }
}
@media screen and (max-width:1000px){
    #header{
        display:block;
    }
    #header-left{
        max-width:300px;
        margin: 0 auto;
    }
    #header-right{
        margin: 0 auto;
    }
}
@media screen and (max-width:780px){
    #header-right{
        width:100%;
        box-sizing:border-box;
    }
    #top-space{
        width:300px;
        height:50px;
        overflow:hidden;
        margin: 0 auto;
        margin-bottom:20px;
    }
}
@media screen and (max-width:650px){
    #menu-click{
        display:block;
        color:#fff;
        text-align:center;
        cursor:pointer;
    }
    #menu{
        display:block;
        display:none;
        text-align:center;
        padding-top:10px;
    }
    #menu a{
        display:block;
        padding:5px 0;
    }
}

#main-bg{
    background:url('images/bg.png') no-repeat top center;
    width:1035px;
    margin: 0 auto;
    max-width:100%;
    border-radius:25px;
    padding-bottom:40px;
}
#middle{
    display:flex;
    justify-content:space-evenly;
    padding:40px 40px 20px 40px;
}
#middle-left{
    width:100%;
    text-align:center;
}
#middle-right{
    width:160px;
    flex-grow:0;
    flex-shrink:0;
    order:1;
    margin-left:20px;
}
#right-space{
    width:160px;
    height:600px;
    margin-bottom:20px;
    background:#ccc;   
}
#hiveworks{
    display:block;
    max-width:130px;
    margin: 0 auto;
}
.cc-nav{
    display:flex;
    max-width:550px;
    margin: 0 auto;
    justify-content:space-evenly;
    align-items:center;
    padding:20px;
    box-sizing:border-box;
    width:100%;
}
@media screen and (max-width:1150px){
    #middle{
        padding:40px 20px 20px 20px;
    }
}
@media screen and (max-width:790px){
    #middle{
        flex-wrap:wrap;
    }
    #middle-right{
        width:300px;
        margin: 0 auto;
        padding-top:20px;
    }
    #right-space{
        width:300px;
        height:250px;
        overflow:hidden;
    }
    #hiveworks{
        display:none;
    }
}
@media screen and (max-width:600px){
    #main-bg{
        border-radius:0 0 25px 25px;
    }
    #middle{
        padding:20px 0;
    }
}

/* jump bar */
#hw-jumpbar,.hw-jump-title{
    background:#7186cf;
}
.hw-jump-mid{
    background:#b098d5;
}
#hw-jumpbar{
    max-width: 700px;
    margin: 0 auto;
}

#bottom{
    max-width:800px;
    margin: 0 auto;
    padding:40px;
    border-radius:25px;
    box-sizing:border-box;
    background:#fff;
    margin-top:20px;
    display:flex;
}
#bottom-left{
    width:100%;
}
#bottom-right{
    width:300px;
    flex-grow:0;
    flex-shrink:0;
    margin-left:30px;
}
#bottom-space{
    width:300px;
    height:250px;
    background:#ccc;
}
.cc-newsheader{
    font-weight:bold;
    border-bottom:2px solid #e8e9e9;
    font-family:'Spectral SC',serif;
    font-size:1.6em;
}
.cc-publishtime{
    text-align:right;
    font-size:.8em;
}
#links{
    padding:20px;
    text-align:center;
}
#links-header{
    font-family:'Spectral SC',serif;
    font-weight:bold;
    border-bottom:2px solid #e8e9e9;
    font-size:1.6em;
}
#links-list{
    padding-top:10px;
}
#links-list a{
    text-decoration:none;
    font-size:1.6em;
    display:block;
    padding:5px 0;
}
@media screen and (max-width:700px){
    #bottom{
        display:block;
    }
    #bottom-right{
        margin: 0 auto;
    }
    #bottom-space{
        display:none;
    }
}

#footer{
    font-weight:bold;
    text-transform:uppercase;
    display:flex;
    padding:20px;
    justify-content:space-evenly;
    font-size:.8em;
}
#footer a{
    color:#fff;
    text-decoration:none;
}
#footer a:hover{
    color:#d09dcf;
}
#hiveworks-bottom{
    display:none;
}
@media screen and (max-width:700px){
    #footer{
        display:block;
        font-size:1.2em;
        text-align:center;
    }
    #footer a{
        display:block;
        padding:5px 0;
    }
    #hiveworks-bottom{
        display:block;
        max-width:130px;
        margin: 0 auto;
        margin-top:20px;
    }
}

#text-area{
    background:#fff;
    padding:30px;
    text-align:left;
}