@charset "utf-8";
@import url("styles.css");
/*
   * The qq.465320335 *
   * http://xoabc.com/ *
   * Released on: 2019,07,24 *
*/  

/* header */
.header {
    width: 100%
}
.header .logo {
    margin: 16px 0 13px
}
.header .search {
    color: #717171;
    margin-top: 24px;
}
.header .search span {
    display: inline-block;
    margin-left: 25px
}
.header .search span i {
    display: inline-block;
    vertical-align: top;
    padding: 0 5px
}
.header .search .on {
    color: #ce000a;
    font-size: 16px
}
.header .search a {
    color: #717171;
}
.header .search .s_box {
    border: 4px solid #f2f2f2;
    padding: 3px 7px
}
.header .search .s_box input {
    border: 0 none;
    display: inline-block;
    vertical-align: middle
}
.header .search .s_box .s_ipt {
    width: 165px;
    color: #666;
    font-size: 16px
}
.header .naver {
    width: 100%;
    height: 48px;
    background-color: #c5141d;
    position: relative;
}
.header .naver li {
    display: inline-block;
    background: url(/images/navx.png) right center no-repeat;
    text-transform: uppercase
}
.header .naver li:last-child {
    background: 0 none
}
.header .naver li a {
    color: #fff;
    display: block;
    padding: 0 35px
}
.header .naver li .drow {
    display: none;
    position: absolute;
    top: 48px;
    left: 50%;
    margin-left: -589px;
    width: 1198px;
    border: 1px solid #ddd;
    border-top: 0 none;
    background-color: #f9f9f9;
    z-index: 999999
}
.header .naver li:hover .drow {
    display: block
}
.header .naver li .drow .hd {
    position:relative;
    width: 177px;
    height: 250px;
    border-right: 1px solid #d6d6d6;
    float: left;
    background-color: #fff
}
.header .naver li .drow .hd li {
    display: block;
    background: 0 none;
    cursor: pointer;
    position: relative;
}
.header .naver li .drow .hd li a {
    color: #c7000b;
    padding: 0 0 0 20px
}
.header .naver li .drow .hd li.on {
    background-color: #f1f1f1;
}
.header .naver li .drow .hd li i {
    display: block;
    position: absolute;
    right: 12px;
    top: 27%
}

.header .naver li .drow .bd {
    width: 1000px;
    font-weight: normal;
    padding: 18px 0;
    float: right
}
.header .naver li .drow .bd li {
    background: 0 none;
    margin-right: 8px
}
.header .naver li .drow .bd li a {
    color: #555;
    padding: 0 20px;
    background-color: #f3f3f3;
    border: 1px solid #f0f0f0
}
.header .naver li .drow .bd li a:hover {
    background-color: #c5141d;
    border: 1px solid #fff;
    color: #fff;
}
.header .naver li .drow li a:hover {
    text-decoration: none
}
.header .naver li .drow li {
    text-transform: none
}

/* main */
.main {
    width: 1140px;
    margin: 0 auto;
}
.wrapper {
    width: 100%;
}
.wrapper .wp_bt {
    color: #222222;
    padding: 36px 0 31px
}
.wrapper .class_box {
    width: 100%;
    background-color: #eff4f7;
    padding-bottom: 28px;
}
.wrapper .class_box li {
    float: left;
    width: 20%
}
.wrapper .class_box li a>img {
    width: 128px;
    height: 128px;
    border-radius: 50%;
    -webkit-transition: 0.4s;
    -webkit-transition: -webkit-transform 0.4s ease-out;
    transition: transform 0.4s ease-out;
    -moz-transition: -moz-transform 0.4s ease-out;
}
.wrapper .class_box li a>img:hover {
    transform: rotateZ(360deg);
    -webkit-transform: rotateZ(360deg);
    -moz-transform: rotateZ(360deg);
}
.wrapper .class_box li span {
    display: block;
    line-height: 55px;
}
.wrapper .class_box li a {
    color: #151515;
}
.wrapper .class_box li span img {
    max-width: 100% !important;
    max-height: 100% !important;
    border-radius: 0;
    display: inline-block;
    padding-right: 5px
}
.wrapper .class_box li a:hover {
    text-decoration: none;
    color: #c5141d;
}
.wrapper .product {
    padding-bottom: 40px;
}
.wrapper .product ul {
    margin-right: -13px
}
.wrapper .product li {
    float: left;
    width: 217px;
    margin: 0 13px 6px 0
}
.wrapper .product li:hover {
    border-color: #c5141d
}
.wrapper .product li .pro_pic {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    overflow: hidden;
    width: 213px;
    height: 144px;
    border: 1px solid #eaeaea;
    border-radius: 3px;
    padding: 0 1px;
}
.wrapper .product li img {
    max-width: 100%;
    max-height: 100%
}
.wrapper .product li:hover img {
    opacity: 0.8;
}
.wrapper .product li p {
    font-size: 13px;
    line-height: 16px;
    height: 32px;
    padding-top: 10px;
    overflow: hidden;
}
.wrapper .product li p a {
    color: #222;
}
.wrapper .product li p a:hover {
    color: #c5141d;
}
.wrapper .case {
    width: 100%;
    padding-bottom: 55px;
    background-color: #eff4f7;
}
.wrapper .case ul {
    margin-right: -10px
}
.wrapper .case li {
    float: left;
    width: 179px;
    height: 159px;
    border: 1px solid #eaeaea;
    background-color: #fff;
    margin-right: 10px
}
.wrapper .case li:hover {
    border-color: #c5141d
}
.wrapper .case li .case_pic {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    overflow: hidden;
    width: 159px;
    height: 139px;
    padding: 10px
}
.wrapper .case li img {
    max-width: 100%;
    max-height: 100%
}

/* column */
.col {
    width: 100%;
    padding: 15px 0
}
.col .col_left {
    width: 18%;
    border: 1px solid #eee;
    padding: 0.5% 1.2% 1%
}
.col .col_left .left_bt {
    color: #333;
    border-bottom: 1px solid #eee
}
.col .col_left .left_bt i {
    color: #666;
}
.col .col_left .left_bt span {
    border-bottom: 3px solid #c5141d;
    display: inline-block;
    margin-bottom: -2px;
    padding: 0 8px
}
.col .col_left .left_list {
    padding: 6% 0 3%;
}
.col .col_left .left_list li {
    border-bottom: 1px solid #eee;
    padding-left: 3px
}
.col .col_left .left_list li span {
    display: inline-block;
    width: 39px;
    text-align: center;
    margin-right: 2px
}
.col .col_left .left_list li span img {
    max-width: 100% !important;
    max-height: 100% !important;
    border-radius: 0;
    display: inline-block;
    padding-right: 2px;
    width: 70%
}
.col .col_left .left_list li a {
    display: block;
    padding: 13px 0
}
.col .col_left .left_list li a:hover {
    text-decoration: none;
}
.col .col_left .left_list li i {
    display: inline-block;
    padding: 0 3px 0 5px
}
.col .col_left .left_pic {
    margin: 7px 0 5px
}
.col .col_left .left_pic img {
    max-width: 100%
}
.col .col_right {
    width: 75.5%;
    padding: 0.5% 1.2% 1%;
    border: 1px solid #eee;
}
.col .col_right .r_bt {
    color: #333;
    border-bottom: 1px solid #eee
}
.col .col_right .r_btl {
    padding: 0
}
.col .col_right .r_btl i {
    color: #666;
}
.col .col_right .r_btl span {
    border-bottom: 3px solid #c5141d;
    display: inline-block;
    margin-bottom: -2px;
    padding: 0 8px 0 3px
}
.col .col_right .r_btr {
    color: #888;
}
.col .col_right .r_btr a {
    color: #888;
}
.col .col_right .r_btr a:hover {
    color: #c5141d;
}
.col .col_right .r_cn {
    padding: 2% 0.5%
}
.col .col_right .r_cn img {
    max-width: 100%
}

/* news */
.newslist {
    padding: 1% 0
}
.newslist li {
    border-bottom: 1px solid #eee;
    padding: 12px 5px;
}
.newslist li a {
    display: block;
}


/* products */
.products {
    padding: 2% 0 5%
}
.products li {
    float: left;
    width: 30.33333%;
    margin: 1.5%
}
.products li img {
    width: 100%
}
.products li .link-pic {
    width: 100%;
    height: 233px;
    display: inline-block;
    overflow: hidden;
}
.products li img {
    height: 100%;
    transition: all 0.6s;
    -webkit-transition: all .6s
}
.products li:hover img {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
}
.products li p {
    margin-top: 2px;
}
.products li p a {
    display: block;
    background-color: #f7f7f7;
    color: #626262;
    font-size: 15px;
    line-height: 50px;
}
.products li p a:hover {
    background-color: #AA1E22;
    color: #fff;
}

/* photolist */
.photolist {
    padding: 2% 0 1%
}
.photolist ul {
    margin-right: -14px
}
.photolist li {
    float: left;
    width: 202px;
    margin: 0 14px 0 0
}
.photolist li:hover {
    border-color: #c5141d
}
.photolist li img {
    max-width: 100%;
    max-height: 100%;
    transition: all 0.6s;
    -webkit-transition: all .6s
}
.photolist li:hover img {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
}
.photolist li .link-pic {
    width: 200px;
    height: 134px;
    border: 1px solid #eee;
    padding: 0 1px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    overflow: hidden;
}
.photolist li p a {
    display: block;
    font-size: 13px;
    line-height: 30px;
    padding-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}
.photolist li span {
    display: block;
    padding: 8px 0;
    line-height: 18px;
    height: 36px;
    overflow: hidden;
}

/* product_info */
.p_info {
    padding: 20px
}
.p_info .p_info_left {
    width: 40%
}
.p_info .p_info_left img {
    width: 100%
}
.p_info .p_info_right {
    width: 55%;
    padding: 0 1.2% 18px;
    border: 1px solid #666;
    background-color: #5f5f5f;
    text-indent: 5px;
}
.p_info .p_info_right span {
    display: block;
    color: #ccc;
    font-size: 13px;
    padding: 5px 0
}
.p_info .p_info_right span a {
    color: #ccc;
}
.p_info .p_info_right span i {
    color: #c5141d;
}
.p_info .p_info_right span.bt {
    color: #c5141d;
    font-weight: bold;
    font-size: 18px;
    padding: 22px 0 18px;
    border-bottom: 1px solid #666
}
.p_info .p_info_right span.jg {
    padding-top: 18px;
}
.p_info .p_info_right span.jg i {
    font-size: 16px;
    font-weight: bold;
}
.p_info .p_info_right span.cs {
    border-bottom: 1px solid #666;
    padding-bottom: 18px;
    margin-bottom: 15px;
}
.p_info .p_info_right span.nx {
    font-size: 12px
}
.p_info .p_info_desc_bt {
    border-bottom: 2px solid #c5141d;
    margin-top: 20px;
}
.p_info .p_info_desc_bt span {
    background-color: #c5141d;
    padding: 7px 40px;
    display: inline-block
}
.p_info .p_info_desc {
    padding: 10px 0
}
.p_info .p_info_desc img {
    max-width: 100%
}


/* details */
.details {
    padding: 2% 5px;
}
.details .title {
    color: #c5141d
}
.details .time {
    color: #afafaf;
    padding: 0 0 16px;
    border-radius: 1px;
    margin: 12px 0 16px;
    border-bottom: 1px solid #eee;
}
.details .time i {
    display: inline-block;
    padding: 0 3px 0 5px;
}
.details .pics {
    margin: 3% 0
}
.details .pics img {
    max-width: 100%;
}
.details .contents {
    padding: 1%;
    color: #666;
}
.details .contents img {
    max-width: 100%;
}
.details .contents table,
.details .contents tr,
.details .contents td {
    border: 1px solid #ccc
}
.details .down {
    padding: 0
}
.details .down a {
    display: block;
    background: url(/images/downs.png) 10px center no-repeat #f9f9f9;
    line-height: 35px;
    margin: 8px 0;
    padding-left: 35px
}
.details .down a:hover {
    text-decoration: none;
}
.details .next {
    margin-top: 15px;
    padding: 2%;
    color: #666;
    background-color: #f5f5f5;
}
.details .next a {
    color: #666;
}
.details .next a:hover {
    color: #c5141d;
}

/* Next */
.cp-Next { 
    width:100%;
    padding:20px 0;
    background-color: #f5f5f5;
}

/* message */
.message {
    padding: 0;
}
.message .msg {
    padding: 0;
}
.message .msg-form {
    padding: 0;
}
.message .msg-form li {
    margin-bottom: 8px;
    display: block;
}
.message .msg-form li span {
    display: inline-block;
    vertical-align: top;
    width: 130px
}
.message .msg-form li span i {
    color: #f00;
    padding-right: 5px;
}
.message .msg-form li input,
.message .msg-form li textarea {
    border: 0 none;
}
.message .msg-form li .ipt {
    border: 1px solid #BDBFC0;
    padding: 5px;
    width: 55%;
    color: #666;
}
.message .msg-form li .texta {
    height: 80px;
    vertical-align: middle;
}
.message .msg-form li .ipt-code {
    width: 40%;
}
.message .msg-form li img {
    height: 26px;
    display: inline-block;
    vertical-align: -8px;
    margin-left: 3px;
}
.message .msg-form li .btn {
    background: #990000;
    color: #fff;
    padding: 6px 6%;
    cursor: pointer;
    margin-left: 129px;
}

/* footer */
.footer {
    width: 100%;
    background: #ededed;
    border-top: 6px solid #c5141d;
    padding: 53px 0;
    color: #3d3d3d;
}
.footer a {
    color: #222;
}
.footer a:hover {
    color: #c5141d;
}
.footer .f_nav {
    text-transform: uppercase;
}
.footer .f_nav li {
    display: inline-block
}
.footer .f_nav li a {
    display: inline-block;
    padding: 0 10px 0 7px
}
.footer .f_copy {
    padding: 30px 0 10px;
    color: #333;
}


input::-webkit-input-placeholder { /* WebKit browsers */
  color: #aeaeae;
  font-size: 13px;
}
input::-moz-placeholder { /* Mozilla Firefox 19+ */
  color: #aeaeae;
  font-size: 13px;
}
input:-ms-input-placeholder { /* Internet Explorer 10+ */
  color: #aeaeae;
  font-size: 13px;
}
video::-webkit-media-controls-enclosure {
    overflow:hidden;
}
video::-webkit-media-controls-panel {
    width: calc(100% + 30px)
}
#dituContentn img {max-width:none !important}
#dituContentn div {box-sizing:initial !important}