@charset "utf-8"; html { font-size: 62.5%; /*10 ÷ 16 × 100% = 62.5%*/ } body { margin: 0; padding: 0; text-align: left; color: #001200; font-size: 1.4rem; /*1.6 × 10px = 16px */ font-family: "Microsoft YaHei", Arial, helvetica, sans-serif; background: #ffffff; /*background: #fff;*/ } :root { --prop: 1; --base_color: #01519e; } .base_color { color: #01519e !important; } .base_bg { background: var(--base_color) !important; } a { transition: all 0.3s; } a:link { color: #333333; text-decoration: none } a:visited { color: #333333; text-decoration: none } a:hover { text-decoration: none; color: #000; } a:focus { outline: none; -moz-outline: none; } .nav-pills .nav-link.active, .nav-pills .show>.nav-link { background-color: var(--base_color); } img { border: 0px; } input { outline: none; } ul, li, dl, dt, dd { list-style-type: none; list-style: none; margin: 0; padding: 0; text-align: left; } canvas { margin: 0; padding: 0; display: block; border: none; } .dv { display: inline-block !important; vertical-align: middle; } .mr_10 { margin-right: 10px; } .imgbox img.img-fluid { width: 100%; min-height: 100%; } .imgbox { position: relative; overflow: hidden; } .imgbox:after { content: ''; display: block; } .imgbox img, .imgbox video, .imgbox div.contbox { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .imgbox_4_3, .imgbox_1_1 { background: #fff; } .imgbox_3_1:after { margin-top: 33.3333%; } .imgbox_5_2:after { margin-top: 40%; } .imgbox_2_1:after { margin-top: 50%; } .imgbox_600_345:after { margin-top: 57.5%; } .imgbox_5_3:after { margin-top: 60%; } .imgbox_400_265:after { margin-top: 66.25%; } .imgbox_4_3:after { margin-top: 75%; } .imgbox_1_1:after { margin-top: 100%; } .imgbox_3_4:after { margin-top: 133.33%; } .imgbox_4_3 video { width: 100% !important; margin: 0 auto; display: block; } .valign-wrapper { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .valign-wrapper .fluid-img { margin: 0 auto !important; } .ImgScale img, .ImgScale i { transition: all 0.3s; } .ImgScale:hover img, .ImgScale:hover i { transform: translate(-50%, -50%) scale(1.05); } .IScale i, .IScale img { transition: all 0.3s; } .IScale:hover i, .IScale:hover img { transform: translate(-50%, -50%) rotateY(180deg); } .rotateY:before { transform: rotateY(180deg); } .pro-imgs{ position: relative;} .pro-imgs::before{ content: ''; width: 100%; height: 100%; background: url(../Image/cpsy.png) no-repeat; background-size: cover; position: absolute; z-index: 3; top: 0px; left: 0px;} .fs14 { font-size: 1.4rem; } .fs15 { font-size: 1.5rem; } .fs16 { font-size: 1.6rem; } .fs17 { font-size: 1.7rem; } .fs18 { font-size: 1.8rem; } .fs19 { font-size: 1.9rem; } .fs20 { font-size: 2.0rem; } .fs22 { font-size: 2.2rem; } .fs24 { font-size: 2.4rem; } .fs26 { font-size: 2.6rem; } .fs35 { font-size: 3.5rem; } .fs40 { font-size: 4.0rem; } .fs45 { font-size: 4.5rem; } .fs70 { font-size: 7.0rem; } .op6 { opacity: 0.6; } .op8 { opacity: 0.8; } i.fs20 { font-size: 2.0rem; } .lh-15 { line-height: 1.5; } .lh-18 { line-height: 1.8; } .lh-20 { line-height: 2.0; } .rounded-20 { border-radius: 20px; } /*PAGE ----------------------------------------*/ .share_to { display: inline-block; line-height: 30px; } .share_to a { display: inline-block; vertical-align: middle; margin: 0 10px 0 0; color: #FFF; border-radius: 50%; text-align: center; line-height: 30px; width: 30px; height: 30px; overflow: hidden; } .share_to a i { font-size: 2.6rem; } .share_to a:hover { background: #f00 !important; } .share_to a:nth-child(1) { background: #ff6600; } .share_to a:nth-child(2) { background: #3dc464; } .share_to a:nth-child(3) { background: #d54135; } .share_to a:nth-child(4) { background: #1493d0; } .share_to a:nth-child(5) { background: #f8b500; } .de-page-mian { overflow: hidden; text-align: center; font-size: 0; margin: 10px 0 35px; } .de-page-mian .page-inner { display: inline-block; overflow: hidden; } .de-page-mian .page-inner a { display: block; float: left; min-width: 26px; padding: 0 5px; height: 36px; border: 1px solid #dddddd; background: #fff; text-align: center; line-height: 36px; font-size: 14px; color: #333; margin-right: -1px; overflow: hidden; } .de-page-mian .page-inner a.active, .de-page-mian .page-inner a:hover { color: #fff; border-color: var(--base_color); background: var(--base_color); } .de-page-mian .page-inner a.prev { margin-right: 10px; background: #fff url(../Image/prev.jpg) no-repeat center; } .de-page-mian .page-inner a.prev.on { background: #fff url(../Image/prev-hover.jpg) no-repeat center; } .de-page-mian .page-inner a.prev:hover { background-color: #fff; border-color: #dddddd; } .de-page-mian .page-inner a.next { margin-left: 10px; margin-right: 15px; background: #fff url(../Image/next.jpg) no-repeat center; } .de-page-mian .page-inner a.next.on { background: #fff url(../Image/next-hover.jpg) no-repeat center; } .de-page-mian .page-inner a.next:hover { background-color: #fff; border-color: #dddddd; } .de-page-mian .page-inner a.page-btn { font-size: 12px; margin-right: 0; width: 63px; margin-left: 10px; } .de-page-mian .page-inner span { display: block; font-size: 12px; color: #333; float: left; line-height: 38px; } .de-page-mian .page-inner input { display: block; float: left; height: 36px; width: 36px; border: 1px solid #dddddd; text-align: center; line-height: 36px; font-size: 14px; color: #333; margin: 0 5px; } .prev_next li .box { border: 1px dotted #ccc; color: #000; border-radius: 3px; transition: all 0.3s; } .prev_next li .box:hover { background: var(--base_color); color: #fff; } .prev_next li .box:hover a { color: #fff; } /* Header ----------------------------------------*/ .name_box_w { height: 85px; font-size: 1.6rem; overflow: hidden; background: #ffffff; /*background-image: linear-gradient(to right,#fff 50%,var(--base_color) 50%);*/ } .logo { height: 85px; } .nav_box li { position: relative; } .nav_box li a:after { position: absolute; top: 0; right: -6px; line-height: 85px; content: ""; display: inline-block; opacity: 0.3; } .nav_box li:last-child a:after { display: none; } nav.nav a { color: #333333; height: 85px; line-height: 85px; padding: 0; background: url(../Image/nav_h.gif) center 100px no-repeat; transition: all 0.3s; } nav.nav a:hover, nav.nav .active { background: url(../Image/nav_h.gif) center bottom no-repeat; } .en a:hover { background: #990000 !important; } .top_tel p { height: 85px; } .top_tel a { border-radius: 30px; color: var(--base_color); } .top_tel a i { background: var(--base_color); } /*NAV*/ #banner_box { width: 100%; overflow: hidden; position: relative; padding-top: var(--base_h); } #page_banner_box { width: 100%; position: relative; box-sizing: cover; height: auto; } /*BANNER*/ .in_line { width: 90px; height: 10px; display: block; margin: 3rem auto; margin: calc(var(--prop) * 3rem) auto; background: url(../Image/in_title_line.png) center no-repeat; } .location a { color: #fff; } .location a:hover { color: #f60; } .type_nav a { border-left: 5px solid var(--base_color) !important; } .type_nav a:hover { background: var(--base_color); color: #fff; } /*LOCATION*/ /* Footer ----------------------------------------*/ .page-footer { background: #01519e; overflow: hidden; position: relative; color: #fff; } .footer-info { font-size: 1.5rem; line-height: 2.4; } .footer-info a { color: #fff; } .footer-info a:hover { color: #fff; } .footer-copyright { background-color: rgba(0,0,0,0.5); color: #fff; } .link_box a { color: #fff; } .link_box a:hover { color: #ff0; } #page-footer-gt { z-index: 9; width: 100%; height: 70px; box-sizing: border-box; padding: 10px 0; background: var(--base_color); color: #fff; position: fixed; bottom: 0; left: 0; } #page-footer-gt ul li { width: 25%; text-align: center; float: left; color: #fff; transition: all 0.3s; box-sizing: border-box; } #page-footer-gt ul li a { color: #fff; width: 100%; height: 70px; display: block; } #page-footer-gt ul li i { width: 30px; height: 30px; display: block; margin: 0 auto; } #page-footer-gt ul li:nth-child(1) i { background: url(../Image/e1.png); background-size: 100%; } #page-footer-gt ul li:nth-child(2) i { background: url(../Image/e2.png); background-size: 100%; } #page-footer-gt ul li:nth-child(3) i { background: url(../Image/e3.png); background-size: 100%; } #page-footer-gt ul li:nth-child(4) i { background: url(../Image/e4.png); background-size: 100%; } #page-footer-gt.five ul li { width: 20% !important; } #page-footer-gt.five ul li.back { padding: 10px 0; } /*FOOTER*/ /*INDEX*/ .in_title { max-width: 100%; color: #333; height: 80px; } .in_title .fs35 { position: relative; display: inline-block;} .in_title .fs35 span { position: relative; z-index: 2; } .in_title .fs35:after { content: ""; position: absolute; z-index: 1; left: 50%; transform: translateX(-50%); margin-top: -30px; margin-left: 80px; display: block; width: 53px; height: 7px; background: var(--base_color); } .more a{ background: var(--base_color); border-bottom: 2px solid #fa9300; color: #fff; } .more a:hover { background: #fa9300; border-bottom: 2px solid var(--base_color); color: #fff; } #in_ys li:nth-child(1) { background: #0e71cb; color: #ffffff; } #in_ys li:nth-child(2) { background: #f6f6f6; color: #000000; } #in_ys li:nth-child(3) { background: #0e71cb; color: #ffffff; } #in_ys li:nth-child(4) { background: #f6f6f6; color: #000000; } #in_box1 .type a.active,#in_box1 .type a:hover { background: var(--base_color); color: #fff; } .in_gs_pic:after { content: ""; display: block; width: 150px; height: 200px; background: var(--base_color); position: absolute; right: 0; top: -20px; z-index: 0;} .in_gs_pic a { position: relative; z-index: 1; } .in_ys_list li p.title:after { content: ""; display: block; margin: 20px auto; width: 100px; height: 3px; background: var(--base_color); } #in_box5 .newslist a:hover div.float-left { color: #fff !important; background: var(--base_color) !important; } #in_box5 .newslist a:hover div.float-left * { color: #ffffff; } .pro_gd .title_box i { display: block; margin: 10px auto; width: 30px; height: 1px; background: rgba(0,0,0,0.5); } .pro_gd a:hover .title_box { background-color: var(--base_color) !important; color: #fff !important; } .pro_gd a:hover .title_box i { background: rgba(255,255,255,0.5); } /*PAGE*/ /*NEWS CONTENTS PAGE*/ .mainInfo iframe { width: 100%; height: 600px; } .mainInfo img { max-width: 100% !important; height: auto !important; } /*PRODUCTS LIST PAGE*/ .proUL li { margin-bottom: 30px; } .proUL li a .cont { background: var(--base_color); color: #c09a64; color: #c09a64; } .picUL li { margin-bottom: 30px; } .picList li { margin-bottom: 30px !important; } /*MESSAGE*/ #page_index #c_mess_box input, #page_index #c_mess_box textarea { margin-bottom: 10px !important; } #page_mess_box li { margin-bottom: 10px; } #page_mess_box li input { height: 40px; } .de-contact .contact-list .lineT { border-left: 5px solid var(--base_color); padding-left: 10px; } .de-contact .contact-list { border: 1px solid #efefef !important; background: #fafafa; border-radius: 10px; margin-bottom: 30px; } .de-contact .contact-list li { margin-bottom: 10px; } .de-contact .contact-list ul li div { padding-left: 60px; color: #595959; padding: 15px 15px 15px 60px; border-radius: 5px; } .de-contact .contact-list ul li div.icon-01 { background: url(../Image/contact-icon-01.png) no-repeat 10px 10px #fff; } .de-contact .contact-list ul li div.icon-02 { background: url(../Image/contact-icon-02.png) no-repeat 10px 10px #fff; } .de-contact .contact-list ul li div.icon-03 { background: url(../Image/contact-icon-03.png) no-repeat 10px 10px #fff; } .de-contact .contact-list ul li div.icon-04 { background: url(../Image/contact-icon-04.png) no-repeat 10px 10px #fff; } .de-contact .contact-list ul li div.icon-05 { background: url(../Image/contact-icon-05.png) no-repeat 10px 10px #fff; } .de-contact .contact-list ul li div.icon-06 { background: url(../Image/contact-icon-06.png) no-repeat 10px 10px #fff; } #dituContent { width: 100%; height: 445px; margin: 0 auto 30px; border: 1px dotted #ccc; border-radius: 10px; }