@charset "UTF-8";

@media all and (max-width:480px){

    .content{margin: 30px auto 0 auto !important}
    .content div section{width: 100%;margin: 0 0 2% 0}
    
    .content-nav-left{display: none}
    
    .content-nav-slide{width: 100%}
    .content-nav-slide ul{overflow: hidden;height: 75px;width: 80%;margin: 0 auto}
    .content-nav-slide ul li{float: left;text-align: center}
    .content-nav-slide ul li a{display: inline-block;padding: 24px 0}
    .content-nav-slide ul li span{display: inline-block;height: 100%;font-weight: 400;letter-spacing: -.065em}
    .content-nav-slide ul li span:hover{cursor: pointer;border-bottom: 2px solid #5291ab;color: #5291ab}
    
}
@media all and (min-width:481px) and (max-width:767px){

    .content{margin: 30px auto 0 auto  !important}
    .content div section{width: 100%;margin: 0 0 2% 0}
    
    .content-nav-left{display: none}
    
    .content-nav-slide{width: 100%}
    .content-nav-slide ul{overflow: hidden;height: 75px;width: 80%;margin: 0 auto}
    .content-nav-slide ul li{float: left;text-align: center}
    .content-nav-slide ul li a{display: inline-block;padding: 24px 0}
    .content-nav-slide ul li span{display: inline-block;height: 100%;font-weight: 400;letter-spacing: -.065em}
    .content-nav-slide ul li span:hover{cursor: pointer;border-bottom: 2px solid #5291ab;color: #5291ab}

}
@media all and (min-width:768px) and (max-width:1024px){

    .content{margin: 30px auto 0 auto !important}
    .content div section{float: left;width: 50%;margin: 0 0 2% 0}
    
    .content-nav-left{display: none}
    
    .content-nav-slide{width: 100%}
    .content-nav-slide ul{overflow: hidden;height: 75px;width: 80%;margin: 0 auto}
    .content-nav-slide ul li{float: left;text-align: center}
    .content-nav-slide ul li a{display: inline-block;padding: 24px 0}
    .content-nav-slide ul li span{display: inline-block;height: 100%;font-weight: 400;letter-spacing: -.065em}
    .content-nav-slide ul li span:hover{cursor: pointer;border-bottom: 2px solid #5291ab;color: #5291ab}
    
    .content div section .section-area{height: 309px}
    figure{height: 193px;overflow: hidden}

}
@media all and (min-width:1025px) and (max-width:1280px){
    
    .content{margin: 30px auto 0 auto !important}
    .content div section{float: left;width: 33.3%;margin: 0 0 2% 0}
    
    .content-nav-left{display: none}
    
    .content-nav-slide{width: 100%}
    .content-nav-slide ul{overflow: hidden;height: 75px;width: 80%;margin: 0 auto}
    .content-nav-slide ul li{float: left;text-align: center}
    .content-nav-slide ul li a{display: inline-block;padding: 24px 0}
    .content-nav-slide ul li span{display: inline-block;height: 100%;font-weight: 400;letter-spacing: -.065em}
    .content-nav-slide ul li span:hover{cursor: pointer;border-bottom: 2px solid #5291ab;color: #5291ab}
    
    .content div section .section-area{height: 291px}
    figure{height: 175px;overflow: hidden;}

}
@media all and (min-width:1281px){

    .content{overflow: hidden;padding: 30px 0 50px 0}
    .content > div{float: right;width: 1050px}
    .content div section{float: left;width: 33.3%;margin: 0 0 2% 0}
    
    .content-nav-slide{display: none}
    
    .content-nav-left{float: left;width: 200px;margin: 0 30px 0 0}
    .content-nav-left ul li{border-bottom: 1px solid #ccc}
    .content-nav-left ul li a{display: inline-block;width: 100%;height: 100%}
    .content-nav-left ul li a:hover{cursor: pointer;background: #000;color: #fff}
    .content-nav-left ul li span{padding: 24px 10px 26px 10px;display: inline-block;height: 100%;font-weight: 400;letter-spacing: -.065em}
    
    .content div section .section-area{height: 303px}
    figure{height: 187px;overflow: hidden}

}

.list-top{margin: 0 auto 30px auto !important}

.content div article{overflow: hidden}

.content div section .section-area{width: 95%;margin: 0 auto;background: #fff;border:1px solid #ccc}
.content div section .section-area:hover{background: rgba(0,0,0,0.1)}
.content div section .section-area a{display: inline-block;width: 100%;height: 100%}
.content div section .section-area a figure{text-align: center;width: 100%;border-bottom: 1px solid #e9e9e9}
.content div section .section-area a figure img{width: 100%}

.content div section .section-area h4{
    font-size: 18px;
    font-weight: 500;
    line-height: 26px;
    letter-spacing: -.065em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient:vertical;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 90%;
    margin: 0 auto 20px auto
}
.content div section .section-area h4 span{}

/*nav*/
.content-nav ul li .select{font-weight: 700}

.content-nav ul li a{display: inline-block;width: 100%;height: 100%}
.content-nav ul li span{display: inline-block;height: 100%;font-weight: 400;letter-spacing: -.065em}

.category{margin: 5px auto 0 auto;width: 96%}
.category span{color: #5291ab;font-weight: 700;letter-spacing: -.065em;font-size: 16px; padding: 7px 10px;display: inline-block}

.content-nav-slide{position: relative;top:-15px}
.content-nav-slide ul{position: relative;z-index: 2}
.content-nav-slide .slide-btn{position: absolute;top:18px;width: 100%}
.content-nav-slide .slide-btn span{float: left;width: 40px;height: 40px;border-radius: 5px;margin: 0 0 0 5px;text-align: center;border:1px solid #e9e9e9}
.content-nav-slide .slide-btn span:hover{cursor: pointer;opacity: 0.6}
.content-nav-slide .slide-btn span i{display: inline-block;margin: 11px 0 0 0}
.content-nav-slide .slide-btn span i img{width: 10px;margin: 0 auto}
.content-nav-slide .slide-btn span:first-child i img{transform: rotate(180deg)}
.content-nav-slide .slide-btn span:last-child{float: right}