/* CSS Document */

/*peopleinfo*/
.peopleinfo {
position: relative;
padding-top: 43%; background:url(../image/bg_tou.png);

}

.info_per{ width:100%; display:block; overflow:hidden; background-color:#fff; padding-top:3%; margin-bottom:-2%;}
.info_per li{ width:92%; font-weight:bold !important; float:left; padding:0 4%; font:14px/24px "microsoft yahei"; color:#333;}
.info_per li span{ color:#333; font-weight:normal;}
.peopleinfo .warpper {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
text-align:center;
}

.peopleinfo .warpper .avator {
position:relative; margin-top:2%; width:100%; padding-top:25%; z-index:10; text-align:center; background:url(../image/pe_bg.png) center no-repeat; background-size:24%; 
}

.peopleinfo .warpper .avator img {
width: 20%;
height:80%;
position:absolute;
left:50%;top:50%;
transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); border-radius:50%;
}

.peopleinfo .warpper h3 {
text-align: center;
font-size: 22px;
overflow:hidden; font-family:"microsoft yahei";
padding-bottom: 2%; color:#333
}

.peopleinfo .warpper .info {
overflow:hidden; display:inline-block; margin-top:3%; width:100%;
}

.peopleinfo .warpper .info span {
color: #333;

    padding: 0 10px;
    border-right: 1px solid #c8c8c8;
    font: 14px/14px "microsoft yahei";
	
	max-width: 32%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
	
	

}

.inf_posi{ position:absolute; width:100%; padding-top:30%; left:0; top:35px;}

.num_info{ width:32%; top:0; height:100%; position:absolute; left:25px; background:url(../image/qipao.png) no-repeat center; background-size:100%;}
.num_info span{width:100%; display:block; margin-top:30%; font:16px/28px "microsoft yahei"; text-align:center;}
.num_info span em{ font:18px/28px "microsoft yahei"; color:#f30; display:block;}

.order_info{ width:21%; top:0; height:70%; position:absolute; right:60px; background:url(../image/qipao.png) no-repeat center; background-size:100%;}
.order_info span{width:100%; display:block; margin-top:26%; font:16px/28px "microsoft yahei"; text-align:center;}
.order_info span em{ font:18px/28px "microsoft yahei"; color:#f30; display:block;}


/*peopleinfo end*/

.nv_p{ width:100%; overflow:hidden;padding-bottom: 4%; margin-bottom:2%; background-color:#fff; border-top:1px solid #e7e7e7; }
.nv_p .per_n_p{ float:left; width:25%; text-align:center; margin-top:4%;}
.nv_p .per_n_p img{ width:75px; height:75px; margin:2% 0;}
.nv_p .per_n_p p{ font:18px/40px "microsoft yahei"; color:#333;}


/*anli*/
.pic_st{ width:100%; overflow:hidden;}
.pic_st .ti_de{ background-color:#f8f8f8;}
.pic_st .pic_s_box{ width:98%; padding:1%; padding-bottom:6%; overflow:hidden; border-top:1px solid #e7e7e7; background-color:#f7f7f7;}


.pic_st .pic_s_box .per_pic{ background-color:#fff; margin:1%; float:left; width:48%;}


.pic_st .pic_s_box p{ width:98%; margin:0 1%; text-align:center; font:20px/56px "microsoft yahei"; height:56px; overflow:hidden;}
.image-box {position:relative; display:block; overflow:hidden;}
.image-box img {
    width: 100%; height:100%; position:absolute; top:0;left:0;
}
.per_ho .image-box { padding-top:66%; float:left; width:100%;}
.per_pic .image-box { padding-top:64%; width:100%;}

.ti_de{ width:100%; overflow:hidden; background-color:#fff;}
.ti_de h3{ float:left; font:26px/60px "microsoft yahei"; color:#333; margin-left:20px;}
.ti_de a{ float:right; font:18px/60px "simsun"; color:#333; margin-right:20px;}
.ti_de span{font: 20px/60px "microsoft yahei"; color: #333; float: right; height: 60px; overflow: hidden;margin-right: 20px;}
.ti_de span b {color: #f30; font-size: 24px;margin:0 5px;}



/*yuyue*/
.book_st{ width:100%; overflow:hidden; background-color:#fff;}
.b_inp_b{ width:100%; overflow:hidden; height:500px; background-color:#fff; border-top:1px solid #e7e7e7;}
.b_inp_b .per_i_b{ width:90%; margin:20px auto; border:1px solid #e7e7e7; height:72px; border-radius:10px; background-color:#fff;}
.b_inp_b .per_i_b input{ width:100%; height:100%; font:22px/72px "microsoft yahei"; color:#666; text-indent:10px; outline:none;}
.b_inp_b button{ width: 90%; border: none; height: 74px; color: #fff;  border-radius: 10px; display: block;  text-align: center; outline:none;  margin: 25px auto;  background-color: #ff3300;font: 22px/74px "microsoft yahei";}
.bo_inf{ width:100%; overflow:hidden;}
.bo_inf .per_book{ width:90%; margin:0 auto; overflow:hidden;}
.out_b_s{ position:relative; width:100%; overflow:hidden; padding-bottom:2%; background-color:#f7f7f7;}
.in_b_s{ position:absolute; top:0; left:0; overflow:hidden; width:100%;}

.bo_inf .per_book p{ float:left; width:20%; text-align:center; font:22px/50px "microsoft yahei"; color:#666;}
.num_de{ width:100%; text-align:center;}

.num_de p{ text-align:center; font:22px/80px "microsoft yahei"; margin:10px 0; width:100%;}
.num_de p span{ padding:10px; color:#fff;  font-size:32px; background:url(../image/num_bg.png) no-repeat center;}
.num_de p em{ margin:0 5px;}
.suc_inf{ width:100%; text-align:center; overflow:hidden; background-color:#fff; height:460px; padding:20px 0; display:none;}

.suc_inf p{ font:26px/40px "microsoft yahei"; color:#3fb837; margin-top:10px;} 
.suc_inf .f_c_s{ font-size:20px; line-height:34px; color:#333; margin-top:50px;}

.suc_inf span{ font:20px/30px "microsoft yahei"; display:inline-block; color:#f60; margin-top:10px; padding-left:28px; background:url(../image/pho.jpg) left center no-repeat;}
.suc_inf img{ width:15%; margin-top:44px;}
.suc_inf a{ display:block; cursor:pointer; margin: 30px auto; width:120px; height:30px; text-align:center; font:18px/30px "microsoft yahei"; color:#fff; background-color:#ff5600; border-radius:3px;}


.book_st .ti_de{}

.book_st .b_inp_b{ border-top:none;}

/*xinwendongtai*/

.new_stoe{width:100%;overflow:hidden;margin:0 auto;background-color: #f7f7f7;}
.new_stoe .ti_de{ background-color:#f8f8f8;}

.new_stoe .per_s_new{ width:94%; overflow:hidden; margin:0 auto; padding:1% 0; background-color:#f7f7f7; border-top:1px solid #e7e7e7; }

.new_stoe .per_s_new .image-box{    width: 32%;float: left; padding-top: 19.2%;   margin: 2.0% 2%; overflow: visible; margin-left: 0;}


.new_stoe .per_s_new .new_s_info{ overflow:hidden; margin:0 auto; margin-top:2.5%;}

.new_stoe .per_s_new .new_s_info p{ font:22px/32px "microsoft yahei"; color:#333; max-height:64px; width:100%; margin-bottom:10px; overflow:hidden;}

.new_stoe .per_s_new :nth-child(2) p{ height:64px;overflow:hidden;}
.new_stoe .per_s_new .new_s_info span{ float:left; font:16px/32px "microsoft yahei"; color:#666;}
.new_stoe .per_s_new .new_s_info i{float:right; font:16px/32px "microsoft yahei"; font-style:normal; color:#666;}



.swiper-pagination2 .swiper-pagination-bullet-active {
    opacity: 0.65 !important;
    background-color: #f60 !important;
}

body {
    padding: 0;
    margin: 0 auto;
    max-width: 600px;
    /* font-family: Microsoft YaHei, arial,simsun,"宋体",sans-serif; */
    font-size: 14px;
    background-color: #f7f7f7;
}

.foot_s {

    margin-top:2%;
    background-size: 15px;
    background:url(../image/bg_4.jpg)  repeat-x !important;
    background-color: #ffffff !important; 
}


/*commonfrm*/
.commonfrm div {
    padding: 1.8% 0;
}

.commonfrm div input, .commonfrm div textarea {
/*border-radius: 4px;*/
width: 100%;
border: 1px solid #DEDEDE;
padding: 2.5% 1%;
/*box-shadow: 0 0 4px #ccc;*/
border-radius:5px;


outline: none;
box-sizing: border-box;
resize: none;
}

.commonfrm div:last-child {
padding: 1.2% 0 2.2%;
}

.commonfrm div:last-child input {
height:42px;
border:none;
line-height: 0;
background-color: #F40;
font-size: 100%;
color: #fff;
font-weight: 700;
font-family: tahoma,"Microsoft YaHei",arial,simsun,"宋体",sans-serif;



}


/*comintro*/
#comintro {
    margin-bottom: 3%;
}

    #comintro .top {
        background: #fff;
        padding: 1.85% 0;
        height: 18px;
        position: relative;
    }

        #comintro .top span {
            color: #333;
            font-size: 105%;
            font-weight: 700;
            padding-left: 3%;
        }

    #comintro .bot {
        padding: 4.5% 4%;
    background-color: #fff;
    font-size: 13px;
    line-height: 24px;
    color: #666;
		*zoom:1;
    }
	

	
	#comintro .bot:after{ content:"\20"; display:block; height:0; clear:both;}

        #comintro .bot img {
            float: left;
            width: 49%;
            padding: 0 2% 0% 0;
        }

        #comintro .bot p {
            line-height: 1.7;
            text-indent: 8%;
            font-size: 86%;
            color: #333;
        }
/*comintro end*/

/*commontop*/
.commontop .top {
    background-color: #fff;
    padding: 1.85% 0;
    height: 18px;
    position: relative;
	border-bottom: 1px solid #e7e7e7
}

.commontop .top span.left {
        color: #333;
        font-size: 105%;
        font-weight: 700;
        padding-left: 3%;
    }

.commontop .top i {
        position: absolute;
        top: 9%;
        right: 3%;
        height: 91%;
        width: 26%;
        box-sizing: border-box;
        padding-top: .7%;
        font-style: normal;
    }

.commontop .top i a {
		display: inline-block;
		width: 50%;
		text-align: center;
		font-size: 95%;
		color: #999;
	}

	  .commontop .top i a.sel {
		  color: #666;
	  }

        
.complate .commontop .top span, .desplate .commontop .top span {
    color: #333;
    font-size: 105%;
    font-weight: 700;
    padding-left: 3%;
}
/*commontop end*/

/*xgtlist*/
#xgtlist {
    padding: 3% 0 0;
    position: relative;
    overflow-y: auto;
}

    #xgtlist .item {
        position: relative;
        float: left;
        width: 47%;
        background: #fff;
        display: inline;
        word-wrap: break-word;
        word-break: normal;
        opacity: 0;
        transition: opacity 1s;
        overflow: hidden;
        transition: all .5s;
		text-align:center;
    }

        #xgtlist .item div:first-child img {
            width: 100%;
			height:125px;
			margin-bottom:2.5%;
        }

        #xgtlist .item div:last-child {
            padding: 3%;
            color: #666;
            font-size: 95%;
            line-height: 1.6;
        }
/*xgtlist end*/

.complate .warpper, .desplate .bot .warpper {
    background-color: #fff;
    padding: 5% 3%;
    text-align: center;
}

    .complate .warpper span, .desplate .bot .warpper span {
        padding-left: 30px;
        position: relative;
        font-size: 115%;
    }

        .complate .warpper span:before, .desplate .bot .warpper span:before {
            content: "";
            position: absolute;
            left: 2px;
            top: 2px;
            width: 14px;
            padding-top: 14px;
            border: 1px solid #cacaca;
        }

        .complate .warpper span:after, .desplate .bot .warpper span:after {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 23px;
            padding-top: 23px;
            background: url('../image/right2.png') 0px 1px no-repeat;
            background-size: 100% auto;
        }

.complate #zxgdlistwarpper {
    background-color: #fff;
    overflow-y: auto;
    padding-bottom: 5%;
}

.complate .commonfrm, .desplate .commonfrm {
    background-color: #fff;
    padding: 1% 3%;
}

.com { margin-bottom:10px;}

/*artblock*/

.artblock ul {
    background-color: #fff;
    padding: 0 3%;
	margin-bottom:-1px;
}

    .artblock ul li {
        padding: 4.6% 0;
        overflow-y: auto;
        border-bottom: #f7f7f7 solid 1px;
    }

        .artblock ul li a div:first-child {
            color: #333;
            font-size: 105%;
            padding-bottom: 2%;
        }

        /*.artblock ul li.s1 a div.first {
            float: right;
            width: 68%;
            line-height: 160%; height:38px; overflow:hidden;
        }*/
		.artblock ul li.s1 a div.first {
            float: right;
            width: 68%;
            line-height: 145%; height:56px; overflow:hidden;
        }

        .artblock ul li.s1 a div.sec {
            float: left;
            width: 30%;
            text-align:left;
            margin-right: 2%;
        }

            .artblock ul li.s1 a div.sec img {
                width: 95%;
                max-height:65px;
                min-height:65px;
                overflow-y:hidden;
            }

        .artblock ul li a div.third {
            color: #9a9a9a;
            font-size: 80%;
        }

            .artblock ul li a div.third span:first-child {
                float: left;
            }

            .artblock ul li a div.third span:last-child {
                float: right;
            }

        .artblock ul li.s2 a div.sec {
            padding-bottom: 1.7%;
        }

            .artblock ul li.s2 a div.sec img {
                width: 32%;
                padding-left: 2%;
				max-height:120px;
				overflow-y:hidden;
            }

                .artblock ul li.s2 a div.sec img:first-child {
                    padding-left: 0;
                }
/*artblock end*/

/*artdetail*/
#artdetail {
    background-color: #fff;
    padding: 1% 3%; margin-bottom:10px;
}

    #artdetail .title {
        text-align: center;
        font-size: 115%;
        padding: 4% 0;
    }

    #artdetail .artinfo {
        text-align: center;
        padding: 0 0 2%;
        font-size: 95%;
        color: #858585;
    }

        #artdetail .artinfo span {
            padding: 0 2%;
        }

    #artdetail .content {
        color: #858585;
        line-height: 1.6;
        padding: 4% 0;
		overflow:hidden;
        border-top: 2px solid #e1e1e1;
    }
	
#artdetail .content img{ max-width:95%; height:auto; margin:10px auto;}

        #artdetail .content .b1 {
            color: #333;
            padding-bottom: 9%;
        }

            #artdetail .content .b1 div {
                float: left;
                width: 33.3%;
            }

                #artdetail .content .b1 div:last-child {
                    text-align: right;
                }

        #artdetail .content .b2 img {
            width: 100%;
        }

        #artdetail .content .b3 .top {
            padding: 4% 0;
            color: #333;
            font-size: 115%;
            text-align: center;
            position: relative;
        }

            #artdetail .content .b3 .top:before {
                content: "";
                position: absolute;
                left: 0;
                top: 50%;
                width: 100%;
                border-top: 1px solid #e1e1e1;
            }

            #artdetail .content .b3 .top h3 {
                display: inline;
                padding: 0 10px 0 35px;
                position: relative;
                background-color: #fff;
            }

                #artdetail .content .b3 .top h3:before {
                    content: "";
                    position: absolute;
                    left: 10px;
                    top: -2px;
                    width: 22px;
                    height: 22px;
                    border-radius: 100px;
                    background: #999 url(../image/zxgd.png) center 0px no-repeat;
                    background-size: 100% auto;
                    border-top: 1px solid #e1e1e1;
                    background-size: 83% auto;
                }

        #artdetail .content .step1 .top h3:before {
            background-position-y: 2px;
        }

        #artdetail .content .step2 .top h3:before {
            background-position-y: -45px;
        }

        #artdetail .content .step3 .top h3:before {
            background-position-y: -95px;
        }

        #artdetail .content .step4 .top h3:before {
            background-position-y: -144px;
        }

        #artdetail .content .step5 .top h3:before {
            background-position-y: -195px;
        }

        #artdetail .content .step6 .top h3:before {
            background-position-y: -244px;
        }

        #artdetail .content .step7 .top h3:before {
            background-position-y: -296px;
        }

        #artdetail .content .b3 .bot img {
            width: 100%;
            padding-top: 3%;
        }
/*artdetail end*/
/*留言*/
#message{ margin-bottom: 2.8%;}
#message ul li{ line-height:165%; color:#333;}
#message ul li p{ margin-bottom:0.25%;}
#message ul li b{ font-weight:normal; margin:auto 1%;}
#message ul li b a{ color:#777;}
#message .fujia_xx{ color:#777;}

#message .huifu_xx{ border:1px solid #DDD; background-color:#EEE; display:block; padding:2%; margin-top:2%;}
#message .huifu_xx .hf_r{color:#777; margin-bottom:0.25%;}

#message .right{ float:right; padding-right:5%;}

.com .top i a {
    width: 100%;
    font-size: 80%;
}
.com .top i {
    width: auto;
    text-align: right;
}

@media screen and (max-width: 500px){
.peopleinfo .warpper .info {
    margin-top: 1%;
}
.peopleinfo .warpper h3 {
    font-size: 16px;

    font-weight: bold;
    margin-top: 1%;
}

.inf_posi {
    top: 20px;
}
.num_info span {
	margin-top:28%;
    font: 13px/20px "microsoft yahei";

}
.num_info{ left:10px;}
.order_info{ right:30px;}

.num_info span em {
    font: 12px/20px "microsoft yahei";

}
.order_info span {
    margin-top: 25%;
    font: 13px/20px "microsoft yahei";

}

.order_info span em {
    font: 12px/20px "microsoft yahei";
}

.nv_p .per_n_p p{ font:13px/24px "microsoft yahei";}
.nv_p .per_n_p img{ width:48px; height:48px; margin:1% 0;}
.nv_p .per_n_p{ margin-top:3%;}
.nv_p{padding-bottom:3%;}

.pic_st .pic_s_box p {
    width: 96%;
    margin: 0 2%;
    font: 14px/30px "microsoft yahei";
    height: 30px;
}

.ti_de h3 {
    font: 16px/40px "microsoft yahei";margin-left: 10px;
}

.peopleinfo .warpper .info span {
    font: 12px/14px "microsoft yahei";
}

.ti_de a {
    font: 12px/40px "simsun";
    margin-right: 10px;
}

	.num_de p span {
    padding: 7px;
    font-size: 20px;
    background-size: 22px;
}
	.num_de p {
    font: 14px/36px "microsoft yahei";
}

.b_inp_b .per_i_b {
    margin: 10px auto;
    height: 48px;
    border-radius: 5px;
}

.b_inp_b .per_i_b input {
    font: 14px/48px "microsoft yahei";
    text-indent: 10px;
}
.b_inp_b button {
    height: 48px;
    border-radius: 5px;
    margin: 15px auto;
    font: 17px/48px "microsoft yahei";
}

	
	.b_inp_b {
	height: 320px;
}
	.suc_inf {height:280px;}
	.suc_inf a {
    margin: 10px auto;
    width: 90px;
    height: 24px;
    font: 14px/24px "microsoft yahei";
}

/*.new_stoe .per_s_new .new_s_info p {
    font: 14px/20px "microsoft yahei";
    max-height: 40px;
    width: 100%;
    margin-bottom: 0px; 
}*/
.new_stoe .per_s_new .new_s_info p {
    font: 14px/22px "microsoft yahei";
    max-height:66px;
    width: 100%;
    margin-bottom: 0px; 
}
.new_stoe .per_s_new .new_s_info span {
    font: 12px/30px "microsoft yahei";
	width: 120px;
    overflow: hidden;
    height: 20px;
}


.new_stoe .per_s_new .new_s_info i {
    font: 12px/30px "microsoft yahei";
}	
	

}