/* 全局 */
body { background: #fff; }

/* 页头导航 */
.nav { position: fixed; left: 0; top: 0; z-index: 999; width: 100%; height: 80px; box-shadow: 0 0 0 0 rgba(0,0,0,0.05); background: rgba(255, 255, 255,0.8); overflow: hidden; transition: 0.3s }
.nav.scroll { background: #FFF; box-shadow: 0 3px 3px 0 rgba(0,0,0,0.05); transition: 0.3s }
.nav .layui-container { position: relative; transition: all 400ms ease-out; }
.nav .nav-logo { position: absolute; top: 0; left: 15px; height: 100%; line-height: 80px; }
.nav .nav-logo img { box-sizing:border-box; padding:10px; max-height: 100%; }
.nav .nav-list { display: inline-block; height: 80px; }
.nav .nav-list button { position: absolute; top: 30px; right: 15px; width: 25px; height: 30px; border: none; outline: none; background-color: transparent; cursor: pointer; }
.nav .nav-list button span { display: block; margin-bottom: 6px; width: 25px; height: 2px; background: #2db5a3; transition: 0.5s; }
.nav .nav-list button span.spa1 { transform: rotate(45deg); }
.nav .nav-list button span.spa3 { transform: rotate(-45deg) translate(5px,-5px); }
.nav .layui-nav { position: absolute; top: 80px; right: 0; width: 100%; color: #000; background: transparent; }
.nav .layui-nav .layui-nav-item { display: block; line-height: 60px; }
.nav .layui-nav .layui-nav-item a { padding: 0; font-size: 18px; color: #000; }
.nav .layui-nav .layui-this a, .nav .layui-nav .layui-nav-item a:hover { color: #2db5a3; }

/* 页尾导航 */
.footer { clear:both; padding: 70px 0; background: #5e6664; }
.footer .footer-link { padding:30px 0 50px 0; }
.footer .footer-link a { margin-right: 20px; line-height: 22px; color: #a5aaa9; transition: 0.3s; }
.footer .footer-link a:hover { color: #dce1e0; transition: 0.3s; }
.footer .footer-contact { color: #fff; }
.footer .footer-contact a { color: #a5aaa9; }
.footer .footer-contact .contact-qrcode { text-align:left; }
.footer .footer-contact .contact-info { line-height: 30px; }
.footer .footer-contact .contact-copy { margin-top:0; line-height: 30px; text-align: right; }

/* 首页-轮播 */
#banner img { min-width: 100%; height: 500px; }
#banner .panel { position: absolute; top: 35%; left: 50%; margin-left: -200px; padding:30px 50px; width: 400px; text-align: center; }
#banner .panel .title { color: #333; font-size: 48px; line-height: 200%; letter-spacing: 10px; }
#banner .panel .desc { color: #666; font-size: 32px; line-height: 150%; letter-spacing: 5px; }

/* 项目列表 */
.section { margin: 60px 0; }
.section.gray { background-color: #f8f8f8; }
.section h2 { line-height: 160px; color: #2db5a3; text-align: center; font-size: 36px; }
.item-list .item { display: block; padding-bottom:20px; width: 100%; border: 1px solid #DEDEDE; text-align: center; transition: 0.3s; }
.item-list .item:hover { box-shadow: 0 0 3px 3px #EEE; transition: 0.3s; }
.item-list .item .item-img { }
.item-list .item .item-img img { width: 100%; }
.item-list .item .item-img img:hover { transition: 2s; transform: rotateY(180deg); }
.item-list .item .item-title { line-height: 48px; font-size: 18px; color: #333; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.item-list .item .item-desc { padding:10px; height: 60px; line-height: 20px; font-size: 14px; color: #939393; overflow: hidden; }

.item-list .item2 { display: block; padding-bottom: 20px; width: 100%; border:0; border-bottom: 1px solid #DEDEDE; }
.item-list .item2 .item-img {  }
.item-list .item2 .item-img img { width: 100%; }
.item-list .item2 .item-img img:hover { transition: 2s; transform: rotateY(180deg); }
.item-list .item2 .item-title { line-height: 32px; font-size: 18px; color: #333; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.item-list .item2 .item-desc { margin-top: 10px; height: 60px; line-height: 20px; font-size: 14px; color: #939393; overflow: hidden; }
.item-list .item2 .item-tips { margin-top: 10px; font-size: 14px; color: #939393; }
.item-more { padding: 60px 0; text-align: center; }
.item-more a { padding: 10px 50px; border-radius: 3px; line-height: 46px; background: #7fd3c6; color: #FFF; font-size: 24px; }

/* 分页 */
#pager .layui-laypage { display: block; margin-top: 70px; text-align: center; }
#pager .layui-laypage a, #pager .layui-laypage span { margin-right: 20px; height: 40px; line-height: 40px; border-radius: 3px; font-size: 18px; color: #e3e3e3; }

/* 内页横幅 */
.banner { height: 320px; margin-top: 80px; }
.banner .title { font-size: 36px; line-height: 216px; }
.banner .title.active { padding-top: 120px; transition: 1.5s; }
.banner .title p { color: #606060; font-size: 36px; text-align: center; line-height: 50px; letter-spacing: 5px; }
.banner .title p.en { font-size: 20px; letter-spacing: 3px; }
.banner.product { background: url(/Contents/imgs/nav_img1.jpg) no-repeat center top; background-size: cover; }
.banner.case { background: url(/Contents/imgs/nav_img2.jpg) no-repeat center top; background-size: cover; }
.banner.news { background: url(/Contents/imgs/nav_img3.jpg) no-repeat center top; background-size: cover; }
.banner.about { background: url(/Contents/imgs/nav_img4.jpg) no-repeat center top; background-size: cover; }

/** 关于 */
.about-tab { padding: 30px 0; text-align: center; }
.about-tab li { display: inline-block; margin-left: 15px; padding: 0 22px; border: 1px solid #e2e2e2; border-radius: 3px; line-height: 46px; font-size: 20px; color: #b5b5b5; cursor: pointer; }
.about-tab li:first-child { margin-left: 0; }
.about-tab li.layui-this, .aboutab li:hover { border-color: #afddd7; color: #2ab5a3; transition: 0.3s; }
.about-content { font-size: 16px; line-height: 35px; text-align: justify; padding: 40px 0 60px 0; }

/* 文章页 */
.detail { margin-top: 80px; text-align: center; }
.detail .navlink { text-align: left; line-height: 104px; }
.detail h1 { padding-top: 6px; }
.detail .desc { color: #686868; font-size: 18px; line-height: 82px; }
.detail .content { font-size: 18px; line-height: 42px; text-align: justify; padding: 40px 0 102px 0; }
.detail img { max-width: 100%; }

/* 分辨率适配 */
@media screen and (max-width: 768px) { /*手机平板*/
    .footer .footer-contact .contact-copy { margin-top: 30px; text-align: left; }
    #banner .panel { margin-left: -100px; padding:0; width: 200px;  }
    #banner .panel .title { color: #333; font-size: 32px; letter-spacing: 5px; }
    #banner .panel .desc { color: #666; font-size: 24px; letter-spacing: 2px; }
    .banner .title { padding-top: 170px; }
    .section { margin: 30px 0; }
    .item-more { padding: 30px 0; text-align: center; }
    .item-more a { line-height:30px; font-size:16px; }
    .about-tab { padding: 20px 0; }
    .about-tab li { padding: 0 10px; font-size: 14px; line-height: 28px; }
    #pager .layui-laypage a, #pager .layui-laypage span { margin-right: 4px; padding: 0 12px; height: 30px; line-height: 30px; font-size: 14px; }
}
@media screen and (min-width: 768px) { /*电脑*/
    .nav { max-height: 80px; }
    .nav .nav-list button { display: none; }
    .nav .layui-nav { position: absolute; top: 0; margin: 0; padding: 0 5px; width: auto; border-radius: 0; }
    .nav .layui-nav .layui-nav-item { display: inline-block; margin: 0 30px; line-height: 80px; }
}