﻿

/*公共样式 common.css*/
a{text-decoration: none; color: #000;}
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;font-family: "微软雅黑";} 
fieldset,img,input,button {border:0} 
address,caption,cite,code,dfn,em,strong,th,var,i {font-style:normal;font-weight:normal} 
ol,ul {list-style:none} 
caption,th {text-align:left} 
h1,h2,h3,h4,h5,h6,b {font-weight:normal}
.mui-popup{border:1px solid #ddd;}
body{
	width:100%;
	float: left;
	display:-webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content:center;
　　-moz-box-pack:center;
　　-webkit--moz-box-pack:center;
　　box-pack:center;
	justify-content:center;
	-webkit-align-items:center;
　　box-align:center;
　　-moz-box-align:center;
　　-webkit-box-align:center;
	align-items:center;
	background: #fff;
}
.content{
    max-width: 750px;
    width: 100%;
    float: left;
    background: #fff;
    padding-top: 1.28rem;
    padding-bottom:0.4rem;
}

/*侧滑导航*/

.sideslipNav.mui-off-canvas-right{
    width: 50%;
    background: #fff;
}
.sideslipNav_list{width: 100%;float: left;}
.sideslipNav_list h1{
    display: inline-block;
    width: 100%;
    height: 1.28rem;
    line-height: 1.28rem;
    float: left;
    background: #0091FF;
    font-size: 0.38rem;
    color: #fff;
    text-align: center;
}
.sideslipNav_list ul{width: 100%;float: left;}
.sideslipNav_list ul li{
    width: 100%;
    height: 1rem;
    float: left;
}
.sideslipNav_list ul li a{
    display: inline-block;
    width: 100%;
    height: 1rem;
    float: left;
    line-height: 1rem;
    font-size: 0.32rem;
    color: #666666;
    text-align: center;
}
.sideslipNav_list ul .sideslipNav_active{background: rgba(0,145,225,0.5);}
.sideslipNav_list ul .sideslipNav_active a{color: #fff;}



/*兼容性css代码*/

/*定义子元素排列*/
.flex_direction{
	display:-webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
　　-webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -moz-box-orient:vertical;
    -moz-box-direction:normal;
    flex-direction:column;
    -webkit-flex-direction:column;
}
/*横向排列布局*/
.justify_content{
	display:-webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
　　-webkit-justify-content:center;
　　-moz-box-pack:center;
　　-webkit--moz-box-pack:center;
　　box-pack:center;
	justify-content:center;
}
/*竖向排列布局*/
.align_items{
	display:-webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
　　-webkit-align-items:center;
　　box-align:center;
　　-moz-box-align:center;
　　-webkit-box-align:center;
	align-items:center;
}
/*伸缩盒子布局兼容*/
.flex{
	display:-webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
　　box-flex:num;
　　-webkit-box-flex:num;
　　-moz-box-flex:num;
　　flex:num;
　　-webkit-flex:num;
}
/*定义子元素排列（两端对齐）*/
.space_between{
	display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
/*定义子元素排列（两端对齐 + 自动换行）*/
.space_between_wrap{
	display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
}
/*定义子元素排列（靠右对齐）*/
.flex_end{
	display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
}

/*定义旋转180度*/
.rotate_180{
	transform:rotate(180deg);
	-ms-transform:rotate(180deg); 	/* IE 9 */
	-moz-transform:rotate(180deg); 	/* Firefox */
	-webkit-transform:rotate(180deg); /* Safari 和 Chrome */
	-o-transform:rotate(180deg); 	/* Opera */
}

/*定义超出两行显示...*/
.txt_1{
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    overflow:hidden; 
    text-overflow:ellipsis;
    display:-webkit-box; 
    -webkit-box-orient:vertical;
    -webkit-line-clamp:1; 
}
.txt_2{
	display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
	overflow:hidden; 
	text-overflow:ellipsis;
	display:-webkit-box; 
	-webkit-box-orient:vertical;
	-webkit-line-clamp:2; 
}
.txt_3{
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    overflow:hidden; 
    text-overflow:ellipsis;
    display:-webkit-box; 
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3; 
}
.txt_4{
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    overflow:hidden; 
    text-overflow:ellipsis;
    display:-webkit-box; 
    -webkit-box-orient:vertical;
    -webkit-line-clamp:4; 
}
.txt_5{
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    overflow:hidden; 
    text-overflow:ellipsis;
    display:-webkit-box; 
    -webkit-box-orient:vertical;
    -webkit-line-clamp:5; 
}
.txt_6{
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    overflow:hidden; 
    text-overflow:ellipsis;
    display:-webkit-box; 
    -webkit-box-orient:vertical;
    -webkit-line-clamp:6; 
}
.txt_7{
	display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
	overflow:hidden; 
	text-overflow:ellipsis;
	display:-webkit-box; 
	-webkit-box-orient:vertical;
	-webkit-line-clamp:7; 
}


/*定义空时的样式*/
.undefined{
    display: inline-block;
    width: 100%;
    line-height: 0.4rem;
    font-size: 0.28rem;
    color: #333333;
    float: left;
    text-align: left;
    padding: 0.2rem 0;
}


/*定义加载样式*/
.he{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0px;
    bottom: 0px;
    z-index: 99999999999;
    background-color: rgba(0, 0, 0, 0.4);
}
.loader{
    width: 140px;
    height: 140px;
    text-align: center;
    position: absolute;
    top: calc(50% - 70px);
    left: calc(50% - 70px);
    padding-top: 15px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 5px;
}
#loader-1{width: 60px;height: 60px;}
.load-msg{height: 50px;line-height: 50px;color: #fff;font-size: 13px;}
svg path, svg rect {fill: #17a085;}


/*隐藏Y轴滚动条还能继续滚动兼容写法*/
.overf_y{
	overflow-y: auto;
    scrollbar-width: none; 
    -ms-overflow-style: none; 
    &::-webkit-scrollbar { 
      display: none;
    }
}
.overf_y::-webkit-scrollbar{display: none;}

/*隐藏X轴滚动条还能继续滚动兼容写法*/
.overf_x{
    overflow-x: auto;
    scrollbar-width: none; 
    -ms-overflow-style: none; 
    &::-webkit-scrollbar { 
      display: none;
    }
}
.overf_x::-webkit-scrollbar{display: none;}


/*订购弹窗样式*/
.popup_bg{
    width: 7.5rem;
    position: fixed;
    top:0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    background: rgba(0,0,0,0.5);
    z-index: 995;
    display: none;
}
.popup{
    width: 7.5rem;
    position: fixed;
    top:0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    z-index: 999;
    opacity: 0;
    transition: all 0.5s;
}
.popup_form{
    width: 7.02rem;
    background: #fff;
    overflow: hidden;
}
.popup_form>span{
    display: inline-block;
    width: 100%;
    height: 0.8rem;
    float: left;
    line-height: 0.8rem;
    font-size: 0.32rem;
    color: #fff;
    text-align: center;
    background: #0091FF;
}
.popup_input{
    width: 100%;
    padding: 0.4rem 0.7rem;
    float: left;
}
.popup_input form{width: 100%;float: left;}
.popup_input input{
    width: 100%;
    height: 0.84rem;
    float: left;
    line-height: 0.84rem;
    font-size: 0.26rem;
    color: #333333;
    margin: 0px;
    margin-top: 0.25rem;
    padding: 0px 0.5rem;
    background: #f5f5f5;
    border-radius: 0.1rem;
    border:0px;
}
.popup_input textarea{
    width: 100%;
    height: 2.2rem;
    float: left;
    margin-top: 0.25rem;
    border:0px;
    outline: none;
    line-height: 1.5em;
    color: #333333;
    padding: 0.25rem 0.5rem;
    background: #f5f5f5;
    border-radius: 0.1rem;
    font-size: 0.26rem;
}
.popup_input input::-webkit-input-placeholder{color:#999999;}
.popup_input textarea::-webkit-textarea-placeholder{color:#999999;}
.popup_btn{
    width: 100%;
    height: 0.48rem;
    float: left;
    margin-top: 0.35rem;
    margin-bottom:0.2rem;
}
.popup_btn a{
    display: inline-block;
    width: 2.02rem;
    height: 0.48rem;
    float: left;
    line-height: 0.48rem;
    font-size: 0.26rem;
    color: #fff;
    background: #0091FF;
    text-align: center;
}



/*首页头部样式*/
.header{
    width: 7.5rem;
    height: 1.1rem;
    background: #fff;
    box-shadow: 0px 6px 8px rgba(1,15,43,0.1);
    float: left;
    position: fixed;
    top:0;
    left: 0;
    z-index: 99999;
	margin: 0 auto;
    left: auto;
    right: auto;
}
.header>img{
    width: 4.7rem;
    height: 0.69rem;
    float: left;
    margin-left:0.36rem;
    margin-top: 0.25rem;
}
.header>a{
    width: 0.6rem;
    height: 1.1rem;
    float: right;
    margin-right: 0.36rem;
}
.header>a img{
    width: 0.53rem;
    height: 0.4rem;
    float: left;
}


/*通用*/
.head{
    width: 7.5rem;
    height: 0.94rem;
    background: #fff;
    float: left;
    position: fixed;
    top:0;
    left: 0;
    z-index: 99999;
    margin: 0 auto;
    left: auto;
    right: auto;
    box-shadow: 0px 6px 8px rgba(1,15,43,0.1);
}
.head span{
    width: 100%;
    height: 0.94rem;
    float: left;
    line-height: 0.94rem;
    font-size: 0.36rem;
    color: #000;
    position: relative;
    text-align: center;
}
.head a:nth-child(1){
    width: 0.94rem;
    height: 0.94rem;
    float: left;
    position: absolute;
    left: 0px;
    z-index: 5;
}
.head a:nth-child(3){
    width: 0.73rem;
    height: 0.94rem;
    float: left;
    position: absolute;
    right: 0.3rem;
    z-index: 5;
}
.head a:nth-child(1) img{width: 0.24rem;height: 0.4rem;float: left;}
.head a:nth-child(3) img{width: 0.53rem;height: 0.4rem;float: left;}



/*导航样式*/
.i_nav{
	width: 7.5rem;
	float: left;
    padding-top:0.55rem;
    padding-bottom:0.36rem;
}
.i_nav ul{width: 100%;float: left;}
.i_nav ul li{
	width: 1.8rem;
	float: left;
    margin-right:0.1rem;
}
.i_nav ul li:nth-child(4n){margin-right: 0;}
.i_nav ul li a{
	display: inline-block;
	width: 100%;
	float: left;
}
.i_nav ul li a>img{
    width: 1.2rem;
    height: 1.2rem;
    margin:0 0.3rem;
    float: left;
}
.i_nav ul li a span{
	display: inline-block;
	width: 100%;
	height: 0.85rem;
	line-height:0.85rem;
	font-size: 0.24rem;
	text-align: center;
	color: #1256c3;
}

/*底部*/
.footer{
    width: 7.5rem;
    height: 1.16rem;
    float: left;
    background: #0091FF;
    position: fixed;
    bottom: 0;
    left: auto;
    right: auto;
    z-index: 88;
    box-shadow: 0px -4px 8px 1px rgba(0, 0, 0, 0.1);
}
.footer ul{width: 100%;float: left;}
.footer ul li{
    width: 2.5rem;
    height: 1.16rem;
    float: left;
    background: #fff;
}
.footer ul li:nth-child(2){
    border-top-right-radius: 2rem;
    border-bottom-right-radius: 2rem;
}
.footer ul li:nth-child(3){background: #0091FF;}
.footer ul li a{
    display: inline-block;
    height: 0.85rem;
    float: left;
}
.footer ul li:nth-child(3) a{height: 0.72rem;}
.footer ul li a img{width: 0.5rem;height: 0.5rem;float: left;margin:0;}
.footer ul li:nth-child(3) a img{width: 0.72rem;height: 0.72rem;float: left;}
.footer ul li a span{
    display: inline-block;
    width: 100%;
    height: 0.35rem;
    line-height: 0.35rem;
    float: left;
    text-align: center;
    font-size:0.24rem;
    color: #0068C2;
}



/*公共的标题样式*/
.title_common{
    width: 100%;
    height: 2.4rem;
    float: left;
}
.title_common img{width: 100%;height: 2.4rem;float: left;}

/*回到顶部*/
.goback {
    width: 0.6rem;
    height: 0.78rem;
    position: fixed;
    bottom: 2.75rem;
    right: 0.24rem;
    z-index: 994;
}
.goback img {
    width: 100%;
    float: left;
}




/*二维码*/
.r_qrcode{
    width: 7.5rem;
    position: fixed;
    bottom: 0;
    top:0;
    float: left;
    background: rgba(0,0,0,0.5);
    z-index: 999999;
}
.r_qrcode_bg{
    width: 7.02rem;
    height: 6.46rem;
    float: left;
    background: url(../img/default/sj-zyba-tc-bg1.png) no-repeat;
    background-size: 100% 100%;
    background-position: center;
}
.r_qrcode_bg>span{
    display: inline-block;
    width: 100%;
    height: 0.7rem;
    float: left;
    line-height: 0.7rem;
    font-size: 0.32rem;
    color: #fefefe;
    text-align: center;
}
.r_qrcode_img{
    width: 100%;
    height: 3.98rem;
    float: left;
}
.r_qrcode_img img{width: 2.6rem;height: 2.6rem;float: left;}
.r_qrcode_bg>p{
    display: inline-block;
    width:100%;
    height: 0.44rem;
    line-height: 0.44rem;
    float: left;
    font-size: 0.28rem;
    color: #333333;
    text-align: center;
}
.r_quxiao{
    width: 100%;
    height: 0.5rem;
    float: left;
    margin-top: 0.46rem;
}
.r_quxiao>a{
    display: inline-block;
    width: 2.18rem;
    height: 0.5rem;
    float: left;
    line-height: 0.5rem;
    font-size: 0.24rem;
    color: #fff;
    text-align: center;
    background: url(../img/default/sj-zyba-tc-anniu1.png) no-repeat;
    background-size: 100% 100%;
}



/*提交验证*/
.r_verify{
    width: 100%;
    padding: 0.48rem 0.35rem 1.14rem 0.35rem;
    float: left;
}
.r_verify label{
    width: 100%;
    height: 0.86rem;
    float: left;
    margin-top:0.66rem;
}
.r_verify label span{
    display: inline-block;
    width: 0.54rem;
    float: left;
    height: 0.86rem;
    line-height: 0.86rem;
    font-size: 0.28rem;
    color: #ff0000;
}
.r_verify label input{
    width: calc(100% - 0.54rem);
    height: 0.86rem;
    float: left;
    line-height: 0.86rem;
    font-size: 0.24rem;
    color: #333;
    background:#f5f5f5;
    margin: 0px;
    padding: 0 0.6rem;
    border: 0px;
    border-radius: 0px;
}
.r_verify label input::-webkit-input-placeholder{color: #c7ced2;}
.r_verify_click{
    width: 100%;
    height: 0.5rem;
    float: left;
    padding: 0 0.9rem;
}
.r_verify_click a{
    display: inline-block;
    width: 2.18rem;
    height: 0.5rem;
    float: left;
    line-height: 0.5rem;
    font-size: 0.24rem;
    color: #fff;
    text-align: center;
    background: url(../img/default/sj-zyba-tc-anniu1.png) no-repeat;
    background-size: 100% 100%;
}



.common_phone{
    width: 7.5rem;
    float: left;
    padding: 0.6rem 0;
}
.common_phone a{
    width: 5rem;
    height: 0.6rem;
    float: left;
    background: url(../img/sy_4dys_Button.png) no-repeat;
    background-size: 100% 100%;
}


/*图片预览*/
.mui-preview-image.mui-fullscreen {
    position: fixed;
    z-index: 200000;
    background-color: #000;
}
.mui-preview-header,
.mui-preview-footer {
    position: absolute;
    width: 100%;
    left: 0;
    z-index: 10;
}
.mui-preview-header {
    height: 44px;
    top: 0;
}
.mui-preview-footer {
    height: 50px;
    bottom: 0px;
}
.mui-preview-header .mui-preview-indicator {
    display: block;
    line-height: 25px;
    color: #fff;
    text-align: center;
    margin: 15px auto 4;
    width: 70px;
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 12px;
    font-size: 16px;
}
.mui-preview-image {
    display: none;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
.mui-preview-image.mui-preview-in {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}
.mui-preview-image.mui-preview-out {
    background: none;
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut;
}
.mui-preview-image.mui-preview-out .mui-preview-header,
.mui-preview-image.mui-preview-out .mui-preview-footer {
    display: none;
}
.mui-zoom-scroller {
    position: absolute;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    -webkit-backface-visibility: hidden;
}
.mui-zoom {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.mui-slider .mui-slider-group .mui-slider-item img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}
.mui-android-4-1 .mui-slider .mui-slider-group .mui-slider-item img {
    width: 100%;
}
.mui-android-4-1 .mui-slider.mui-preview-image .mui-slider-group .mui-slider-item {
    display: inline-table;
}
.mui-android-4-1 .mui-slider.mui-preview-image .mui-zoom-scroller img {
    display: table-cell;
    vertical-align: middle;
}
.mui-preview-loading {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: none;
}
.mui-preview-loading.mui-active {
    display: block;
}
.mui-preview-loading .mui-spinner-white {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -25px;
    margin-top: -25px;
    height: 50px;
    width: 50px;
}
.mui-preview-image img.mui-transitioning {
    -webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
    transition: transform 0.5s ease, opacity 0.5s ease;
}
@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-webkit-keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}