/* 662n.cn clean rebuild — theme written for this site (slate #2d3c4b + red #c52f35) */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font: 14px/1.7 "Microsoft YaHei", "PingFang SC", sans-serif; color: #333; background: #f4f6f8; }
ul, li { list-style: none; }
a { color: #333; text-decoration: none; }
a:hover { color: #c52f35; }
img { border: 0; max-width: 100%; }
.wrap { width: 1200px; max-width: 96%; margin: 0 auto; }
.clear { clear: both; }
.fl { float: left; } .fr { float: right; }
.clearfix::after { content: ""; display: block; clear: both; }

/* top bar */
#top_main { background: #232f3c; color: #b9c4cf; font-size: 12px; }
#top { display: flex; justify-content: space-between; padding: 6px 0; }
#top a { color: #b9c4cf; }
#top a:hover { color: #fff; }

/* header */
#logo_main { background: #fff; }
#logo { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; }
.WebLogo img { max-height: 64px; }
.WebLogo a { font-size: 28px; font-weight: bold; color: #2d3c4b; }
.head-tel { text-align: right; }
.head-tel .ht-label { display: block; font-size: 13px; color: #74818f; letter-spacing: 2px; }
.head-tel b { font-size: 30px; color: #c52f35; line-height: 1.2; font-family: Arial, sans-serif; }
.head-tel .ht-mail { display: block; font-size: 13px; color: #74818f; }

/* nav */
#nav_main { background: #2d3c4b; }
.navigationlist { display: flex; }
.navigationlist li a { display: block; padding: 13px 34px; color: #fff; font-size: 16px; }
.navigationlist li a:hover { background: #c52f35; color: #fff; }
.navigationlist li.current a { background: #c52f35; }

/* banner */
#banner_main { width: 100%; overflow: hidden; position: relative; background: #1d2936; }
#banner { max-width: 1920px; margin: 0 auto; }
.bannerlist li { display: none; }
.bannerlist li:first-child { display: block; }
.bannerlist img { width: 100%; display: block; }
#banner_main .hd { position: absolute; bottom: 12px; left: 0; right: 0; text-align: center; }
#banner_main .hd li { display: inline-block; width: 22px; height: 6px; margin: 0 3px; background: rgba(255,255,255,.5); color: transparent; cursor: pointer; }
#banner_main .hd li.on { background: #c52f35; }

/* service strip */
#service_main { background: #fff; border-bottom: 1px solid #e3e8ec; }
.service-row { display: flex; padding: 18px 0; }
.svc { flex: 1; text-align: center; border-right: 1px solid #eef1f4; }
.svc:last-child { border-right: 0; }
.svc b { display: block; font-size: 17px; color: #2d3c4b; }
.svc span { font-size: 12px; color: #8a97a3; }

/* home section heads */
.left_title1, .left_title2, .left_title3, .left_title4 { border-bottom: 2px solid #e3e8ec; padding-bottom: 8px; margin-bottom: 16px; position: relative; }
.left_title1 h2, .left_title2 h2, .left_title3 h2, .left_title4 h2 { display: inline-block; font-size: 22px; color: #2d3c4b; border-bottom: 2px solid #c52f35; padding-bottom: 8px; margin-bottom: -10px; }
.left_title1 p, .left_title2 p, .left_title3 p { display: inline-block; margin-left: 12px; color: #8a97a3; font-size: 13px; }
.left_title4 .more { float: right; color: #8a97a3; font-size: 13px; margin-top: 8px; }
#floor_1_main, #floor_2_main, #floor_3_main, #floor_4_main { background: #fff; margin-top: 14px; padding: 26px 0; }
#floor_2_main { background: #eef2f5; }

/* home floor 1: brand list + product grid */
#floor_1 .left_title1 { float: left; width: 240px; border-bottom: 0; }
#floor_1 .left_title1 h2 { display: block; border-bottom: 0; }
#floor_1 .left_title1 p { display: block; margin: 4px 0 14px; }
.textlist1 li { margin-bottom: 6px; }
.textlist1 a { display: block; background: #2d3c4b; color: #fff; padding: 9px 16px; }
.textlist1 a:hover { background: #c52f35; color: #fff; }
#floor_1 .left_body1 { margin-left: 264px; }
.gridlist1 { display: flex; flex-wrap: wrap; gap: 16px; }
.gridlist1 li { width: calc((100% - 48px) / 4); text-align: center; background: #fff; }
.gridlist1 .InfoPicture, .gridlist2 .InfoPicture { display: block; overflow: hidden; background: #f2f4f6; text-align: center; }
.gridlist1 .InfoPicture img { width: 100%; height: 180px; object-fit: contain; display: block; }
.gridlist1 .InfoPicture:hover img, .gridlist2 .InfoPicture:hover img { opacity: .85; }
.gridlist1 .InfoTitle { display: block; padding: 8px 4px; font-size: 13px; line-height: 1.5; min-height: 46px; }
.noimg { display: flex; align-items: center; justify-content: center; height: 180px; color: #aab4bd; }
.gridlist2 { display: flex; flex-wrap: wrap; gap: 16px; }
.gridlist2 li { width: calc((100% - 48px) / 4); text-align: center; }
.gridlist2 .InfoPicture img { width: 100%; height: 190px; object-fit: contain; display: block; }
.gridlist2 .InfoTitle { display: block; padding: 8px 4px 2px; font-size: 14px; }
.gridlist2 .InfoTime { color: #98a4ae; font-size: 12px; padding-bottom: 6px; }
.left_bottom3 { text-align: center; margin-top: 14px; }
.left_bottom3 a, .more-btn { display: inline-block; background: #c52f35; color: #fff; padding: 8px 28px; border-radius: 3px; }
.left_bottom3 a:hover, .more-btn:hover { background: #a52429; color: #fff; }

/* home about + photos */
.about-flex { display: flex; gap: 24px; }
.about-txt { flex: 1; color: #4c5a68; }
.about-txt p { margin-bottom: 14px; }
.photo-row { display: flex; gap: 12px; width: 56%; }
.photo-row li { flex: 1; text-align: center; }
.photo-row img { width: 100%; height: 120px; object-fit: cover; display: block; }
.photo-row span { display: block; font-size: 13px; padding-top: 6px; }

/* home news */
.news-col { float: left; width: 49%; }
.news-col + .news-col { margin-left: 2%; }
.newslist li { border-bottom: 1px dashed #dde3e8; padding: 8px 0; }
.newslist li a { font-size: 14px; }
.newslist li span { float: right; color: #98a4ae; font-size: 12px; }
.newslist.faq li p { color: #7b8794; font-size: 13px; margin-top: 2px; }

/* friend links */
#link_main { background: #fff; margin-top: 14px; padding: 18px 0 24px; }
.link_title h2 { font-size: 17px; color: #2d3c4b; margin-bottom: 10px; }
.link_text li { display: inline-block; margin-right: 18px; }
.link_text a { color: #74818f; font-size: 13px; }

/* footer */
#floor_6_main { background: #2d3c4b; margin-top: 30px; }
#floor_6 { display: flex; gap: 40px; padding: 30px 0; color: #c3cdd6; }
#floor_6_1 { flex: 1.2; }
#floor_6_2 { flex: 1; }
.bottom_navigation { margin-bottom: 14px; }
.bottom_navigation li { display: inline-block; margin-right: 22px; }
.bottom_navigation a { color: #fff; font-size: 15px; }
.foot-cats { font-size: 13px; line-height: 2; color: #93a2b0; }
.foot-cats a { color: #c3cdd6; }
.contact_wrap li { margin-bottom: 6px; font-size: 13px; }
#copyright_main { background: #1d2936; }
#copyright { padding: 12px 0; text-align: center; color: #8494a3; font-size: 12px; }
#copyright a { color: #8494a3; }

/* inner layout */
#picture { background: #2d3c4b url(/assets/img/d/file/system-style/banner/2019-01-11/503dc19cd6722dfed7d574c5ba57d223.jpg) center/cover no-repeat; }
#picture .pic-t { padding: 52px 0; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.55); }
.pic-big { display: block; font-size: 34px; font-weight: bold; letter-spacing: 3px; }
.pic-sub { display: block; font-size: 16px; margin-top: 6px; color: #e8edf1; }
.inner { display: flex; gap: 26px; margin-top: 22px; align-items: flex-start; }
.left-col { width: 260px; flex: none; }
#right { flex: 1; min-width: 0; background: #fff; padding: 22px 26px; }
.rightcontent { background: #2d3c4b; color: #fff; padding: 11px 18px; font-size: 16px; }
.subchannel_main { background: #fff; border: 1px solid #e3e8ec; border-top: 0; }
.subchannellist > li > a { display: block; padding: 9px 16px; border-bottom: 1px solid #eef1f4; color: #3d4c5c; }
.subchannellist > li > a:hover { color: #c52f35; }
.subchannellist li.on > a { background: #fdf0f0; color: #c52f35; font-weight: bold; }
.subchannellist li.trail > a { color: #c52f35; }
.subchannellist.lv1 > li > a { font-size: 15px; font-weight: bold; }
.subchannellist.lv2 { margin-left: 14px; border-left: 2px solid #eef1f4; }
.subchannellist.lv2 > li > a { font-size: 13.5px; padding: 7px 12px; }
.subchannellist.lv3 { margin-left: 12px; border-left: 2px solid #f3f5f7; }
.subchannellist.lv3 > li > a { font-size: 13px; color: #5d6d7d; padding: 6px 10px; }
.side-contact { background: #fff; border: 1px solid #e3e8ec; margin-top: 18px; padding: 16px 18px; font-size: 13px; }
.side-contact h3 { color: #2d3c4b; font-size: 15px; margin-bottom: 8px; border-bottom: 2px solid #c52f35; padding-bottom: 6px; }
.side-contact p { margin-bottom: 4px; color: #5d6d7d; }
.crumb { color: #8a97a3; font-size: 13px; margin-bottom: 14px; }
.crumb a { color: #8a97a3; }
.subcats { margin-bottom: 16px; }
.subcats a { display: inline-block; background: #eef2f5; color: #3d4c5c; padding: 5px 14px; margin: 0 8px 8px 0; border-radius: 3px; font-size: 13px; }
.subcats a:hover { background: #c52f35; color: #fff; }
.inner-grid li { width: calc((100% - 32px) / 3); }
.inner-cases li { width: calc((100% - 32px) / 3); }
.noimgbox { height: 190px; display: flex; align-items: center; justify-content: center; color: #aab4bd; }
.empty { padding: 30px 0; color: #98a4ae; }

/* article list */
.artlist li { display: flex; gap: 16px; border-bottom: 1px solid #eef1f4; padding: 16px 0; }
.artlist .InfoTime { flex: none; width: 76px; text-align: center; background: #eef2f5; padding: 10px 0; height: fit-content; }
.artlist .InfoTime b { font-size: 26px; color: #c52f35; display: block; line-height: 1.1; }
.artlist .InfoTime p { color: #8a97a3; font-size: 12px; }
.artlist .art-main a { font-size: 17px; font-weight: bold; color: #2d3c4b; }
.artlist .art-main p { color: #7b8794; font-size: 13px; margin-top: 4px; }

/* detail */
.about_main { padding-bottom: 10px; }
.about_title h1 { font-size: 24px; color: #2d3c4b; text-align: center; line-height: 1.4; }
.about_data { text-align: center; color: #98a4ae; font-size: 13px; margin: 10px 0 18px; }
.about_img01 { text-align: center; margin-bottom: 16px; }
.about_img01 img { max-width: 620px; max-height: 460px; object-fit: contain; }
.about_con { font-size: 15px; color: #3d4c5c; overflow-wrap: break-word; }
.about_con p { margin-bottom: 12px; }
.about_con img { display: block; margin: 10px auto; }
.about_con table { border-collapse: collapse; margin: 10px 0; max-width: 100%; }
.about_con td, .about_con th { border: 1px solid #dfe5ea; padding: 6px 10px; }
.about_con h2, .about_con h3 { color: #2d3c4b; margin: 16px 0 8px; }
.about_page { border-top: 1px solid #eef1f4; margin-top: 22px; padding-top: 14px; font-size: 13px; }
.right_title { border-bottom: 2px solid #e3e8ec; margin: 24px 0 10px; }
.right_title .ChannelName { font-size: 17px; color: #2d3c4b; }
.tuijian li { padding: 5px 0; border-bottom: 1px dashed #eef1f4; }

/* pagination */
.pager { text-align: center; margin: 24px 0 6px; }
.pager .pg { display: inline-block; min-width: 34px; padding: 5px 10px; margin: 0 3px; border: 1px solid #dfe5ea; background: #fff; }
.pager .pg.cur { background: #c52f35; color: #fff; border-color: #c52f35; }
.pager .pg:hover { border-color: #c52f35; }

/* guestbook */
.msgform p { margin-bottom: 14px; }
.msgform label { display: inline-block; width: 90px; vertical-align: top; }
.msgform input[type=text], .msgform textarea { width: 70%; border: 1px solid #ccd5dc; padding: 8px; font: inherit; }
.msgform button { background: #c52f35; color: #fff; border: 0; padding: 9px 34px; cursor: pointer; font-size: 15px; }
.ok-msg { background: #eef7ee; border: 1px solid #bcd8bc; padding: 10px 14px; margin-bottom: 14px; }
.err-msg { background: #fdf0f0; border: 1px solid #e5bcbc; padding: 10px 14px; margin-bottom: 14px; }
.hp { position: absolute; left: -9999px; height: 1px; overflow: hidden; }

/* responsive */
@media (max-width: 900px) {
    .wrap { width: 94%; }
    .navigationlist { flex-wrap: wrap; }
    .navigationlist li a { padding: 10px 14px; font-size: 14px; }
    #logo { flex-direction: column; gap: 10px; }
    .head-tel { text-align: center; }
    .service-row { flex-wrap: wrap; }
    .svc { flex: 1 1 45%; border-right: 0; margin-bottom: 10px; }
    #floor_1 .left_title1 { float: none; width: auto; }
    #floor_1 .left_body1 { margin-left: 0; }
    .gridlist1 li, .gridlist2 li, .inner-grid li, .inner-cases li { width: calc((100% - 16px) / 2); }
    .about-flex { flex-direction: column; }
    .photo-row { width: 100%; flex-wrap: wrap; }
    .photo-row li { flex: 1 1 45%; }
    .news-col { float: none; width: 100%; margin-left: 0 !important; }
    .inner { flex-direction: column; }
    .left-col { width: 100%; }
    #floor_6 { flex-direction: column; }
    #top_2 { display: none; }
}