@charset "utf-8";
/* CSS Document */

#engineering { margin: 0 auto; padding: 60px 0; }
#engineering>.title { text-align: center; margin: 0 auto; padding: 50px 0; }
#engineering>.title>h3 { font-size: 4rem; font-weight: normal; color: #333; margin: 0 auto; }

#engineering>.display { margin: 0 auto; padding: 50px 0; }
#engineering>.display .list>ul>li { display: block; float: left; width: 31.33%; margin-bottom: 3%; margin-right: 3%; transition: all .35s; }
#engineering>.display .list>ul>li:nth-child(3n) { margin-right: 0; }
#engineering>.display .list>ul>li>a { display: block; }
#engineering>.display .list>ul>li>a .img { position: relative; overflow: hidden; }
#engineering>.display .list>ul>li>a .img:after { position: absolute; z-index: 10; left: 0; bottom: 0; width: 100%; height: 0; background: rgba(0,91,91,.4); content: ''; transition: all .6s; }
#engineering>.display .list>ul>li>a .img>span { position: absolute; z-index: 20; left: 20px; bottom: 0; width: auto; padding: 8px 20px; font-size: 1.6rem; color: #fff; background: rgba(50,150,212,.8); }
#engineering>.display .list>ul>li>a .img>img { width: 100%; height: auto; transition: all 1s; }
#engineering>.display .list>ul>li>a .box { padding: 20px 5px; }
#engineering>.display .list>ul>li>a .box>.tit { height: 50px; font-size: 1.8rem; font-weight: bold; color: #333; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; transition: all .35s; }
#engineering>.display .list>ul>li>a .box>.time { display: inline-block; background: #f7f7f7; margin-top: 10px; padding: 8px 16px; font-size: 1.4rem; color: #999; }
#engineering>.display .list>ul>li>a:hover .tit { color: rgba(4,91,169,1); }
#engineering>.display .list>ul>li>a:hover .img>img { transform: scale(1.1); }
#engineering>.display .list>ul>li>a:hover .img:after { height: 100%; }

#engineering>.view { margin: 0 auto; padding: 150px 0 50px 0; }
#engineering>.view .title { text-align: left; font-size: 4rem; color: #333; padding: 20px 0; }
#engineering>.view .group { text-align: left; border-bottom: 1px solid #ddd; padding: 30px 0; }
#engineering>.view .group>.counts { display: inline-block; float: left; font-size: 1.6rem; color: #666; padding-right: 50px; }
#engineering>.view .group>.type { position: relative; display: inline-block; float: left; font-size: 1.6rem; color: #666; padding: 0 50px; }
#engineering>.view .group>.type:after { position: absolute; z-index: 1; left: 0; top: 50%; margin-top: -7px; width: 1px; height: 14px; background: #ccc; content: ''; }
#engineering>.view .group>.type:before { position: absolute; z-index: 1; right: 0; top: 50%; margin-top: -7px; width: 1px; height: 14px; background: #ccc; content: ''; }
#engineering>.view .group>.share { display: inline-block; float: left; padding-left: 50px; box-sizing: border-box; width: 300px; }
#engineering>.view .group>.share>.tit { display: block; float: left; font-size: 1.6rem; color: #666; }
#engineering>.view .group>.share>.bshare-custom { float: left; }
#engineering>.view .group>.share>.bshare-custom a { margin-left: 20px; padding-left: 0!important; background: none!important; text-decoration: none!important; }
#engineering>.view .group>.share>.bshare-custom a.iconfont { font-size: 2rem; color: #999!important; transition: all .35s; }
#engineering>.view .group>.share>.bshare-custom a:hover { color: rgba(50,150,212,1)!important; }
#engineering>.view .content { padding: 50px 0; margin: 0 auto; font-size: 1.6rem; color: #333; line-height: 2.8rem; }
#engineering>.view .content img { max-width: 60%; height: auto; vertical-align: middle; }
#engineering>.view .content>p { margin-bottom: 20px; }

#engineering>.view .pageurl { border-top: 1px solid #ddd; padding: 30px 0; }
#engineering>.view .pageurl>.url { display: block; width: 70%; }
#engineering>.view .pageurl>.url>a { display: block; padding: 6px 0; font-size: 1.4rem; color: #666; }
#engineering>.view .pageurl>.url>a>strong { position: relative; padding-right: 13px; }
#engineering>.view .pageurl>.url>a>strong:after { position: absolute; z-index: 1; right: 0; top: 0; width: 10px; height: 100%; content: '：'; }
#engineering>.view .pageurl>.url>a>span { color: #666; transition: all .35s; }
#engineering>.view .pageurl>.url>a>span.no { color: #999!important; text-decoration: none!important; }
#engineering>.view .pageurl>.url>a:hover span { color: rgba(4,91,169,1); text-decoration: underline; }
#engineering>.view .pageurl>.back { width: 160px; text-align: center; }
#engineering>.view .pageurl>.back>a { display: block; padding: 10px 0; font-size: 1.6rem; color: rgba(50,150,212,1); border: 2px solid rgba(50,150,212,1); border-radius: 5px; transition: all .35s; }
#engineering>.view .pageurl>.back>a:hover { background: rgba(50,150,212,1); color: #fff; }

@media only screen and (max-width: 1360px) {
#engineering>.display .list>ul>li { width: 48%; margin-right: 0; }
#engineering>.display .list>ul>li:nth-child(even) { float: right; }
}

@media only screen and (max-width: 980px) {
#engineering { padding: 30px 0; }
#engineering>.title { padding: 10px 0; }
#engineering>.title>h3 { font-size: 3.2rem; }
#engineering>.display .list>ul>li>a .box>.tit { font-size: 1.8rem; }

#engineering>.view .title { text-align: center; font-size: 3.2rem; }
#engineering>.view .group { text-align: center; }
#engineering>.view .group>.counts { float: none; padding-right: 30px; }
#engineering>.view .group>.type { float: none; padding: 0 30px; }
#engineering>.view .group>.share { float: none; width: auto; padding-left: 30px; }
}

@media only screen and (max-width: 860px) {
#engineering>.view .content { font-size: 1.4rem; line-height: 2.4rem; }
#engineering>.view .content img { max-width: 100%; }
}

@media only screen and (max-width: 640px) {
#engineering>.title>h3 { font-size: 2.8rem; }

#engineering>.display .list>ul>li { width: 100%; float: none; }
#engineering>.display .list>ul>li:nth-child(even) { float: none; }
#engineering>.display .list>ul>li>a .box>.tit { font-size: 1.6rem; height: auto; -webkit-line-clamp: none; }

#engineering>.view .title { font-size: 2.8rem; }
#engineering>.view .group>.counts { font-size: 1.4rem; }
#engineering>.view .group>.type { font-size: 1.4rem; }
#engineering>.view .group>.share>.tit { font-size: 1.4rem; }
#engineering>.view .group>.share>.bshare-custom a { margin-left: 10px; }

#engineering>.view .pageurl>.url { float: none; width: 100%; }
#engineering>.view .pageurl>.url>a { display: block; padding: 10px 0; text-align: center; margin-bottom: 5px; font-size: 1.6rem; color: #666; border: 2px solid #ccc; border-radius: 5px; transition: all .35s; }
#engineering>.view .pageurl>.url>a>strong { font-weight: normal; padding-right: 0; }
#engineering>.view .pageurl>.url>a>span { display: none; }
#engineering>.view .pageurl>.back { width: 100%; float: none; }
#engineering>.view .pageurl>.back>a { background: rgba(50,150,212,1); color: #fff; }
}

@media only screen and (max-width: 520px) {
#engineering>.title>h3 { font-size: 2.4rem; }
#engineering>.display { padding: 30px 0; }

#engineering>.view { padding: 80px 0 0 0; }
#engineering>.view .title { font-size: 2.2rem; }
#engineering>.view .group { padding: 20px 0; }
#engineering>.view .group>.counts { padding-right: 10px; font-size: 1.2rem; }
#engineering>.view .group>.type { font-size: 1.2rem; padding: 0 10px; }
#engineering>.view .group>.type:before { display: none; }
#engineering>.view .group>.share { display: block; text-align: center; padding: 10px 0 0 0; }
#engineering>.view .group>.share>.tit { display: none; float: none; }
#engineering>.view .group>.share>.bshare-custom { display: inline-block; float: none; }
}