body {
    font-size: 12px;
    margin: 0px;
    padding: 0px;
    font-size: 14px;
    font-family: "微软雅黑";
}

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
    margin: 0;
    padding: 0;
}

    input[readonly] {
        color: #939192;
        background: #f7f7f7 !important;
        cursor: default;
    }
/*母版页*/
.yh_top_wap {
    width: 100%;
    /*min-width:1200px;*/
    height: 78px;
    /*background-color: black;*/
    top: 0;
    /*position: fixed;
    z-index: 1;*/
}

.yh_bottom_wap {
    width: 100%;
    height: 202px;
    background-color: #f2f9ff;
    font-size: 16px;
    color: #000;
    position: relative;
    text-align: center;
    /*min-width:1200px;*/
}

    .yh_bottom_wap div {
        height: 120px;
        font-size: 14px !important;
        color: #a2acb3;
        line-height: 30px;
        margin: auto;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
    }

        .yh_bottom_wap div ul li {
            display: inline-block;
            /*width: 80px;*/
        }

            .yh_bottom_wap div ul li a {
                color: #000 !important;
            }

                .yh_bottom_wap div ul li a:hover {
                    text-decoration: none !important;
                }

    .yh_gun {
        padding: 0 15px 0 15px;
        color: #a2acb3;
    }

    a:focus{outline:none !important;}

 @font-face {
    font-family: 'electronicFont';
    src: url('../Scripts/SiYuanHeiTi-Regular/SOURCEHANSANSCN-NORMAL_0.otf');
}

.yh_top_logo {
    /*width: 644px;*/
    height: 78px;
    float: left;
}

    .yh_top_logo img {
        margin: 20px 0px 0px 20px;
    }


.active span {
    color: #f66f6a !important;
}

.menu {
    /*width: 45%;*/
    /*min-width:1200px;*/
    height: 78px;
    /*position: absolute;*/
    margin: auto;
    text-align: right;
    /*float: left;*/
    padding-right: 3rem;
    /*left:700px*/
}

.clearfix li {
    display: inline-block;   
    text-align: center;
    margin-left:-5px;


}

.clearfix_a {
    float: left;
    display: block;
    line-height: 78px;
    color: #384248;
    font-size: 18px;
    cursor: pointer;
    font-family:electronicFont;
    text-decoration:none;
    padding-left:3rem;
}

    .clearfix_a:hover {
        color: #f3544f;
        text-decoration:none;
    }
/*首页*/
.Home-Page {
    width: 100%;
    position: relative;
    text-align: center;
}

.pimg {
    width: 100%;
    /*height: 100%;*/
    /*max-height:678px*/

}

.pimgx {
    width: 100%;
    /*height: 100%;*/
    /*max-height:450px*/

}

#pagfrist {
    background:
        url(../Image/Images/image_1.png);
    background-size:contain;
}
#pagsecond {
    background:
        url(../Image/Images/image_2.png);
    background-size:contain;
}
#div4 {
    background:
        url(../Image/Images/image_3.png);
    background-size:contain;
}
/* 导航 */
.nav {
    position: fixed;
    top: 40%;
    right: 50px;
    width: 20px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.nav-item {
    display: block;
    width: 20px;
    height: 20px;
    margin-bottom: 26px;
    border-radius: 50%;
    background-image: url('../Image/Images/bnt_choose.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    z-index: 1000;
}

    .nav-item.active {
        background-image: url('../Image/Images/bnt_selected.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        z-index: 1000;
    }

/* 翻页动画 */
.out {
    display: none;
}

.in, .out {
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.in {
    display: block !important;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-duration: 500ms;
    animation-timing-function: ease-out;
    animation-duration: 500ms;
    margin-top:90px;
}

.out {
    display: none !important;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-duration: 300ms;
    animation-timing-function: ease-in;
    animation-duration: 300ms;
}
/* slide */
.slide.in {
    -webkit-animation-name: slideinfrombottom;
    animation-name: slideinfrombottom;
}

.slide.out {
    -webkit-animation-name: slideouttotop;
    animation-name: slideouttotop;
}

.slide.in.reverse {
    -webkit-animation-name: slideinfromtop;
    animation-name: slideinfromtop;
}

.slide.out.reverse {
    -webkit-animation-name: slideouttobottom;
    animation-name: slideouttobottom;
}

@-webkit-keyframes slideinfrombottom {
    from {
        -webkit-transform: translateY(100%);
    }

    to {
        -webkit-transform: translateY(0);
    }
}

@keyframes slideinfrombottom {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

@-webkit-keyframes slideouttotop {
    from {
        -webkit-transform: translateY(0);
    }

    to {
        -webkit-transform: translateY(-100%);
    }
}

@keyframes slideouttotop {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-100%);
    }
}

@-webkit-keyframes slideinfromtop {
    from {
        -webkit-transform: translateY(-100%);
    }

    to {
        -webkit-transform: translateY(0);
    }
}

@keyframes slideinfromtop {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}

@-webkit-keyframes slideouttobottom {
    from {
        -webkit-transform: translateY(0);
    }

    to {
        -webkit-transform: translateY(100%);
    }
}

@keyframes slideouttobottom {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(100%);
    }
}

.parentdiv {
    position: absolute;
    width: 90%;
    height: 90%;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
}
.prodiv {
    position: absolute;
    width: 90%;   
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
}


@media screen and (max-device-width: 1699px) {
    .postion1 {
        position: absolute;
        top: 5px;
        width: 800px;
        left: 0;
        right: 0;
        margin: auto;
    }

    .postion2 {
        position: absolute;
        top: 30px;
        left: 0;
        width: 600px;
        text-align: left;
    }

    .postion3 {
        position: absolute;
        right: 30vh;
        top: 10vh;
    }

    .postion4 {
        position: absolute;
        top: 300px;
        left: 30vh;
    }

    .postion5 {
        position: absolute;
        top: 300px;
        right: -10px;
        width: 600px;
        text-align: left;
    }

    .prodiv ul li:nth-child(1) {
        font-size: 30px;
        color: #242a38;
    }

    .prodiv ul li:nth-child(2) {
        font-size: 14px;
        color: black;
        margin-top: 1vh;
    }

    .Image_rjcp {
        width: 456px !important;
        height: 456px;
        position: absolute;
        left: 100px;
        top: 0;
        bottom: 0;
        margin: auto;
    }

    .Details {
        position: absolute;
        left: 656px;
        width: 500px;
        height: 492px;
        top: 100px;
        bottom: 0;
        margin: auto;
    }
    .Details ul li {
        display: -webkit-box;
        font-size: 20px;
        color: #242a38;
        line-height: 73px;
        cursor: pointer;
        list-style-type:none;
    }
    .variousCM {
    position: absolute;
    width: 1215px;
    height: 400px;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    /*margin-top:70px;*/
}
    .variousCM ul li {
            display: inline-block;
            width: 250px;
            height: 80px;
            background-color: #fff;
            border-radius: 6px;
            margin-left: 10px;
            position: relative;
            cursor: pointer;
        }
      .variousCM div:first-child {
        margin-top: 50px;
    }
      .variousCM div:last-child {
        margin-top: 20px;
    }
    .imgs4 {
        width:533px !important;
        height:70px !important;
    }
}


@media screen and (min-device-width: 1700px) {
    .postion1 {
        position: absolute;
        top: 70px;
        width: 800px;
        left: 0;
        right: 0;
        margin: auto;
    }

    .postion2 {
        position: absolute;
        top: 30px;
        left: 80px;
        width: 600px;
        text-align: left;
    }

    .postion3 {
        position: absolute;
        right: 30vh;
        top: 10vh;
    }

    .postion4 {
        position: absolute;
        top: 500px;
        left: 30vh;
    }

    .postion5 {
        position: absolute;
        top: 450px;
        right: 60px;
        width: 600px;
        text-align: left;
    }
    
    .prodiv ul li:nth-child(1) {
        font-size: 36px;
        color:#242a38
    }
    .prodiv ul li:nth-child(2) {
        font-size: 16px;
        color:black;
        margin-top: 2vh
    }

    .Image_rjcp {
    width: 556px !important;
    height: 556px;
    position: absolute;
    left: 300px;
    top: 0;
    bottom: 0;
    margin: auto;
}
    .Details {
    position: absolute;
    left: 856px;
    width: 600px;
    height: 592px;
    top: 0;
    bottom: 0;
    margin: auto;
}
    .Details ul li {
        display: -webkit-box;
        font-size: 24px;
        color: #242a38;
        line-height: 83px;
        cursor: pointer;
        list-style-type:none;
    }
    .variousCM {
    position: absolute;
    width: 1215px;
    height: 650px;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}   
    .variousCM ul li {
            display: inline-block;
            width: 286px;
            height: 152px;
            background-color: #fff;
            border-radius: 6px;
            margin-left: 10px;
            position: relative;
            cursor: pointer;
        }
    .variousCM div {
        margin-top: 80px;
    }
}


    .postion2 ul li {
        display: -webkit-box !important;
        list-style-type:none;
    }

.page-text ul li {
    color: #ffffff;
    display: -webkit-inline-box;
    list-style-type:none;
}

    .page-text ul li span:first-child {
        color: #f15a56;
    }

    .page-text ul li input {
        width: 192px;
        height: 52px;
        font-size: 26px;
        border: 0;
        border-radius: 26px;
        background-color: #f15a56;
        margin-top: 20px;
        cursor: pointer;
    }

    .postion5 ul li {
        display: -webkit-box !important;
    }

.desoverflow p {
    max-width: 600px;
    max-height: 100px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}







.Details ul li:nth-child(2), .Details ul li:nth-child(6) {
    /*margin-left: 50px;*/
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .Details ul li:nth-child(2), .Details ul li:nth-child(6) {
        margin-left: 50px;
    }
}
        

        .Details ul li:nth-child(3), .Details ul li:nth-child(5) {
            margin-left: 75px;
        }

        .Details ul li:nth-child(4) {
            margin-left: 85px;
        }

        .Details ul li img {
            width: 54px !important;
            height: 54px;
        }

        
         .variousCM ul {
        margin-top: 20px;
    }
            .variousCM ul li img {
                position: absolute;
                margin: auto;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
            }

            .variousCM ul li:nth-child(1) {
                margin-left: 0px !important;
            }

  

        .variousCM div span {
            margin: 20px 0px 20px 0px;
        }

.title {
    font-size: 30px;
    color: #fff;
    font-weight: bold;
}

.showtitle {
    font-size: 22px;
    color: #fff;
    position: absolute;
    right: 10px;
    cursor: pointer;
    margin-top: 10px !important;
}


@media (max-width: 1442px) and (min-width: 992px) {
    .testdown {
        position: absolute;
        top: 0;
        left: 38%;
    }

    .testdown img {
        height:153px !important;
    }

    #productlist {
        height:35em !important;
    }


    /*#hzhb {
    height:370px !important;
}*/
}


    .testdown {
        position: absolute;
        top: 0;
        left: 38%;
    }

    .testdown img {
        height:218px;
    }


 #productlist {
        height:45em;
    }
/*#hzhb {
    height:520px;
}*/



    /*轮播图*/

@charset "utf-8";
/* banner */
.c-banner{
	width: 100%;
    margin-top: 80px;
	position: relative;
}
.c-banner img{
	width: 100%;
}
.c-banner .banner ul{
	list-style: none;
	padding-left: 0px;
	margin-bottom: 0px;
}
.c-banner .banner ul li{
	position: absolute
	display: none;
	opacity: 0;
}
.c-banner .banner ul li:nth-child(1){
	opacity: 1;
	display: block;
}
.c-banner .banner ul li img{
	width: 100%;
	position: absolute;
	top: 0px;
}
.c-banner .banner ul li:first-child img{
	position: relative;
}
.c-banner .nexImg,.c-banner .preImg{
	padding: 25px 10px 25px 10px;
	position: absolute;
	top: 50%;
	margin-top: -53px;
	background: #000000;
	opacity: 0.5;
	border-radius: 5px;
	z-index: 10;
	
}
.c-banner .nexImg:hover,.c-banner .preImg:hover{
	opacity: 0.8;
}
.c-banner .nexImg{
	right: 0px;
}
.c-banner .nexImg img,.c-banner .preImg img{
	
	
}
.c-banner .jumpBtn{
	width: 100%;
	position: absolute;
	bottom: 20px;
	text-align: center;
}
.c-banner .jumpBtn ul{
	margin-bottom: 0px;
	padding: 0px;
}

.c-banner .jumpBtn ul li{
	width: 30px;
	height: 30px;
	border-radius: 50%;
	display: inline-block;
	background-color: white;
	opacity: 0.9;
	margin-left: 10px;
}
.c-banner .jumpBtn ul li:first-child{
	margin-left: 0px;
}
@media screen and (max-width:768px) {
	.c-banner{
		width: 100%;
		height: 345px;
		overflow: hidden;
	}
	.c-banner .banner ul li img{
		width: 768px;
		height: 345px;
		position: absolute;
		left: 50%;
		margin-left: -384px;
	}
}