body{
    font: 14px/1.5 DINFONT;
    overflow-x: hidden;
    color: #333333;
    position: relative;
    min-width: 1200px;
    max-width: 1920px;
    margin: 0 auto;
    padding-top: 110px;
}
.header{
    width: 100%;
    height: 110px;
    /* background: #000; */
    background: url(../images/color_bg.jpg) center center no-repeat;
    background-size: 100% 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10000;
    transition: height 0.3s;
}
.logo{
    width: 239px;
    height: 56px;
    float: left;
    margin: 30px 0 0 32px;
}
.home{
    float: left;
    width: 30px;
    height: 30px;
    margin: 40px 0 0 40px;
}
.home a{
    width: 100%;
    height: 100%;
    display: block;
}
.nav{
    float: right;
    margin-top: 45px;
    margin-right: 200px;
    position: relative;
}
.nav:after{
    content: "";
    width: 1px;
    height: 20px;
    background-color: rgba(255, 255, 255, 0.2);
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -10px;
}
.nav li{
    float: left;
    margin: 0 1px;
}
.nav li a{
    color: #ffffff;
    font-size: 17px;
    padding: 0 30px;
    display: block;
    transition: all 0.3s;
    position: relative;
}
.nav li a:after{
    background: #827e7c;
    height: 2px;
    width: 0;
    content: "";
    display: block;
    transition: all ease 0.3s;
    left: 0;
    right: 0;
    margin: 3px auto 0;
}
.nav li a:hover{
    color: #fff;
}
.nav li a:hover:after{
    width: 100%;
}
.lang{
    position: absolute;
    right: 20px;
    top: 50%;
    font-size: 16px;
    margin-top: -18px;
}
.lang:before{
    content: "Language: ";
    color: #fff;
    font-size: 14px;
    font-weight: normal;
}
.lang select{
    height: 30px;
    margin-top: 5px;
    margin-left: 5px;
    background-color: transparent;
    color: #fff;
    font-family: DINFONT;
    font-size: 16px;
    line-height: 30px;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    outline: none;
}
.lang select option{
    color: #000;
}
.flexslider{
    position: relative;
    height: 900px;
    overflow: hidden;
}
.slides{
    position: relative;
    z-index: 1;
}
.slides li{
    height: 900px;
}
.flex-control-nav{
    position: absolute;
    bottom: 10px;
    z-index: 2;
    width: 100%;
    text-align: center;
}
.flex-control-nav li{
    display: inline-block;
    width: 40px;
    height: 4px;
    margin: 0 5px;
    *display: inline;
    zoom: 1;
    font-size: 0;
}
.flex-control-nav a{
    display: inline-block;
    width: 40px;
    height: 4px;
    overflow: hidden;
    background-color: #fff;
    cursor: pointer;
}
.flex-control-nav .flex-active{
    background-color: #000;
}
.index-about{
    width: 1200px;
    height: 520px;
    margin: 80px auto 0;
}
.index-about-pic{
    width: 400px;
    height: 520px;
    float: left;
    overflow: hidden;
}
.index-about-wrap{
    width: 740px;
    height: 520px;
    float: right;
    overflow: hidden;
}
.index-about-wrap h1{
    font-size: 48px;
    color: #000000;
    margin-top: 30px;
}
.index-about-main{
    font-size: 16px;
    line-height: 33px;
    height: 231px;
    overflow: hidden;
    text-align: justify;
    margin-top: 30px;
}
.index-about-btn{
    width: 280px;
    height: 60px;
    border: 1px solid #000000;
    text-align: center;
    line-height: 60px;
    color: #000000;
    font-size: 24px;
    display: block;
    transition: all 0.3s;
    margin-top: 60px;
}
.index-about-btn:hover{
    background: #000000;
    color: #ffffff;
}
.index-pro{
    width: 100%;
    height: 500px;
    background: url(../images/index_pro_bg.jpg) center center no-repeat;
    margin-top: 80px;
}
.index-pro-wrap{
    width: 1200px;
    height: 500px;
    margin: 0 auto;
    overflow: hidden;
}
.index-pro-left{
    float: left;
}
.index-pro-left h1{
    font-size: 60px;
    letter-spacing: 4px;
    color: #ffffff;
    margin-top: 60px;
}
.index-pro-list{
    width: 420px;
    margin-top: 20px;
}
.index-pro-list li{
    width: 200px;
    height: 50px;
    float: left;
    margin-left: 20px;
    margin-bottom: 20px;
}
.index-pro-list li:nth-child(2n+1){
    margin-left: 0;
}
.index-pro-list li a{
    width: 100%;
    height: 100%;
    display: block;
    background: rgba(255, 255, 255, 0.5);
    color: #ffffff;
    text-align: center;
    line-height: 50px;
    font-size: 18px;
    padding: 0 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: all 0.3s;
}
.index-pro-list li a:hover{
    background: rgba(0, 0, 0, 0.8);
}
.index-pro-video{
    width: 550px;
    height: 350px;
    float: right;
    overflow: hidden;
    margin-top: 75px;
    background: rgba(0, 0, 0, 0.5);
}
.index-pro-swiper{
    width: 600px;
    margin-top: 50px;
    overflow: hidden;
    position: relative;
}
.index-pro-swiper .swiper {
    width: 100%;
    height: 100%;
}
.index-pro-swiper .swiper-slide{
    border: 0px solid rgba(255, 255, 255, 0.5);
}
.index-pro-swiper .swiper-slide img{
    display: block;
    width: 100%;
    height: auto;
}
.index-news{
    width: 1200px;
    margin: 60px auto 0;
    overflow: hidden;
}
.index-news h1{
    font-size: 60px;
    letter-spacing: 4px;
    position: relative;
}
.index-news h1:after{
    content: "";
    width: 500px;
    height: 1px;
    background: #b6b6b6;
    position: absolute;
    right: 200px;
    top: 50%;
    margin-top: 2px;
}
.index-news-list{
    width: 1200px;
    margin-top: 35px;
}
.index-news-list li{
    width: 580px;
    height: 50px;
    float: left;
    margin-left: 40px;
    margin-bottom: 30px;
}
.index-news-list li:nth-child(2n+1){
    margin-left: 0;
}
.index-news-list li span{
    width: 120px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    /* background: #000000; */
    background: url(../images/color_bg.jpg) center center no-repeat;
    background-size: 100% 100%;
    color: #ffffff;
    font-size: 18px;
    display: block;
    float: left;
}
.index-news-list li a{
    width: 460px;
    height: 50px;
    padding: 0 15px;
    line-height: 50px;
    font-size: 16px;
    background: #eeeeee;
    color: #000000;
    display: block;
    float: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: all 0.3s;
}
.index-news-list li a:hover{
    background: rgba(0, 0, 0, 0.2);
}
.footer{
    width: 100%;
    padding: 40px 0;
    /* background: #000000; */
    background: url(../images/color_bg.jpg) center center no-repeat;
    background-size: 100% 100%;
    color: #b0b0b0;
    margin-top: 40px;
}
.footer-wrap{
    width: 1200px;
    margin: 0 auto;
    overflow: hidden;
}
.footer-main-top{
    width: 100%;
    overflow: hidden;
    margin: 0 -15px 40px;
}
.footer-item{
    width: calc(33.333% - 30px);
    float: left;
    margin: 0 15px;
}
.footer-item-title{
    font-size: 20px;
    color: #fff;
    border-bottom: 1px solid #fff;
    padding-bottom: 10px;
}
.footer-item-list{
    width: 100%;
    padding: 15px 0;
    font-size: 16px;
}
.footer-item-list a{
    display: block;
    float: left;
    width: 50%;
    color: #fff;
    padding: 5px 0;
    transition: all 0.3s;
}
.footer-item-list a:hover{
    color: #b0b0b0;
}
.footer-item-list p{
    color: #fff;
}
.footer-main-bot .cp{
    float: left;
}
.footer-main-bot .cyweb{
    float: right;
}
.footer-main-bot a{
    color: #b0b0b0;
}
/*内页*/
.inside-banner{
    width: 100%;
    height: 500px;
    position: relative;
}
.inside-banner img{
    width: 1920px;
    height: 500px;
    position: absolute;
    left: 50%;
    margin-left: -960px;
    top: 0;
}
.inside-sort{
    width: 100%;
    padding: 35px 0;
    background: #e2e2e2;
    overflow: hidden;
}
.inside-sort-wrap{
    width: 1200px;
    margin: 0 auto;
    overflow: hidden;
}
.inside-sort-list li{
    float: left;
    width: 200px;
    padding: 0 10px;
}
.inside-sort-list li a{
    font-size: 16px;
    color: #555555;
    display: block;
    position: relative;
    padding-left: 15px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: all 0.3s;
}
.inside-sort-list li a:before{
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background: #555555;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -5px;
    transition: all 0.3s;
}
.inside-sort-list li a:hover{
    color: #000000;
}
.inside-sort-list li a:before:hover{
    background: #000000;
}
.container{
    width: 1200px;
    height: auto;
    min-height: 500px;
    overflow: hidden;
    margin: 0 auto;
}
.inside-title{
    font-size: 40px;
    font-weight: bold;
    color: #000000;
    letter-spacing: 10px;
    margin: 80px 0;
    position: relative;
}
.inside-title:after{
    content: "";
    width: 220px;
    height: 1px;
    background: #000000;
    position: absolute;
    left: 0;
    bottom: -40px;
}
.inside-about{
    line-height: 30px;
    font-size: 16px;
}
.inside-about img{
    max-width: 1200px;
    height: auto;
}
.inside-news-list{
    width: 100%;
    overflow: hidden;
}
.inside-news-list li{
    line-height: 50px;
    border-bottom: 1px solid #eeeeee;
    position: relative;
    padding-left: 20px;
    padding-right: 5px;
    overflow: hidden;
    transition: all 0.3s;
}
.inside-news-list li a{
    font-size: 16px;
    color: #333333;
    float: left;
    height: 50px;
    width: 1000px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    transition: all 0.3s;
}
.inside-news-list li:before{
    content: "";
    width: 6px;
    height: 6px;
    background: #333333;
    position: absolute;
    left: 5px;
    top: 50%;
    margin-top: -3px;
}
.inside-news-list li span{
    float: right;
    line-height: 50px;
    color: #999999;
    transition: all 0.3s;
}
.inside-news-list li:hover{
    background: #f5f5f5;
}
.inside-news{
    width: 1200px;
    overflow: hidden;
}
.inside-news-show-title{
    font-size: 24px;
    line-height: 35px;
    text-align: center;
}
.inside-news-show-data{
    font-size: 14px;
    color: #999999;
    text-align: center;
    margin: 20px 0;
}
.inside-news-show-main{
    line-height: 30px;
    font-size: 16px;
}
.inside-news-show-main img{
    max-width: 1200px;
    height: auto;
}
.inside-pro{
    width: 100%;
    overflow: hidden;
}
.inside-pro-list{
    overflow: hidden;
}
.inside-pro-list li{
    width: 386px;
    height: 386px;
    margin-left: 21px;
    border: 1px solid #eeeeee;
    float: left;
    margin-bottom: 30px;
    background: rgba(0, 0, 0, 0.2);
    position: relative;
}
.inside-pro-list li:nth-child(3n+1){
    margin-left: 0;
}
.inside-pro-list li a{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 385px;
    height: 385px;
}
.inside-pro-list li a img{
    vertical-align: middle;
}
.inside-pro-list li p{
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    text-align: center;
    color: #ffffff;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 11;
    opacity: 0;
    transition: all 0.3s;
    font-size: 18px;
    letter-spacing: 4px;
    overflow: hidden;
    display: table;
}
.inside-pro-list li p span{
    display: table-cell;
    vertical-align: middle;
}
.inside-pro-list li:hover p{
    opacity: 1;
}
.pro-show-pic{
    width: 550px;
    float: left;
}
.pro-show-info{
    width: 610px;
    float: right;
}
.pro-show-info h1{
    font-size: 30px;
    color: #000;
    padding: 5px 0 10px;
    border-bottom: 1px solid #000;
}
.pro-info-item{
    background-color: #f5f5f5;
    padding: 10px 15px;
    margin-top: 20px;
}
.pro-info-item p{
    font-size: 16px;
    color: #000;
    font-weight: bold;
    padding: 3px 0;
}
.pro-info-item p span{
    color: #999;
    margin-right: 8px;
}
.pro-info-color{
    background-color: #f5f5f5;
    padding: 15px;
    margin-top: 20px;
}
.pro-info-color>span{
    font-size: 16px;
    color: #999;
    font-weight: bold;
}
.pro-color-list{
    overflow: hidden;
    margin-top: 10px;
}
.pro-color-list>span{
    width: 30px;
    height: 30px;
    display: block;
    border-radius: 15px;
    float: left;
    margin-left: 15px;
    overflow: hidden;
    position: relative;
}
.pro-color-list>span:first-child{
    margin-left: 0;
}
.pro-color-list>span:before{
    content: "";
    width: 50px;
    height: 50px;
    border-radius: 25px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5));
    position: absolute;
    left: 20%;
    top: 20%;
    z-index: 2;
}
.pro-info-normal{
    background-color: #f5f5f5;
    padding: 15px;
    margin-top: 20px;
}
.pro-info-normal>span{
    font-size: 16px;
    font-weight: bold;
    color: #999;
    margin-right: 8px;
}
.pro-show-btn{
    margin-top: 20px;
    overflow: hidden;
}
.pro-show-btn a{
    width: 50%;
    height: 50px;
    background-color: #000;
    color: #fff;
    display: block;
    text-align: center;
    line-height: 50px;
    font-size: 16px;
    float: left;
    transition: all 0.3s;
}
.pro-show-btn a:first-child{
    width: 56%;
    background-color: #FF8F00;
}
.pro-show-btn a:last-child{
    width: 40%;
    margin-left: 4%;
}
.pro-show-btn a:hover{
    opacity: 0.8;
}
.pro-share{
    margin-top: 40px;
}
.pro-share>span{
    color: #666;
    font-size: 16px;
}
.pro-share-list{
    margin-top: 10px;
}
.pro-share-list>a{
    margin-right: 15px;
}
.pro-show-detail{
    width: 100%;
    overflow: hidden;
    margin-top: 50px;
}
.pro-detail-left{
    width: 650px;
    float: left;
}
.pro-detail-right{
    width: 500px;
    float: right;
}
.pro-detail-item{
    overflow: hidden;
    margin-bottom: 30px;
}
.pro-detail-item-title{
    font-size: 20px;
    color: #000;
    border-bottom: 2px solid #000;
    padding: 10px 0;
}
.pro-detail-item-main{
    font-size: 16px;
}
.pro-detail-content{
    line-height: 26px;
    padding: 20px 0;
}
.pro-detail-content img{
    max-width: 100%;
    height: auto;
}
.pro-detail-list{
    width: 100%;
}
.pro-detail-list li{
    border-bottom: 1px solid #000;
    padding: 10px 0;
    overflow: hidden;
}
.pro-detail-list li span{
    float: left;
    display: block;
    color: #666;
    width: 380px;
}
.pro-detail-list li a{
    float: right;
    color: #000;
}
.related-pro-title{
    padding: 10px 20px;
    font-size: 30px;
    color: #000;
    background-color: #f5f5f5;
}
.related-pro-list{
    overflow: hidden;
    margin-top: 15px;
}
.related-pro-list li{
    width: 277px;
    height: 277px;
    float: left;
    margin: 15px 0 15px 30px;
}
.related-pro-list li:nth-child(4n+1){
    margin-left: 0;
}
.related-pro-list li img{
    width: 100%;
    height: 100%;
    display: block;
}
.inside-contact{
    line-height: 24px;
    height: auto;
    font-size: 16px;
    background: url(../images/news03.gif) right bottom no-repeat;
}
.inside-contact img{
    max-width: 1200px;
    height: auto;
}
.feedback-mask{
    width: 100%;
    height: 100%;
    z-index: 99;
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    display: none;
}
.feedback-wrap{
    width: 500px;
    padding: 20px 30px 30px;
    background-color: #fff;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
    position: fixed;
    left: 50%;
    top: -600px;
    margin-left: -250px;
    z-index: 999999;
    display: none;
}
.feedback-title{
    border-bottom: 2px solid #000;
    color: #000;
    padding-bottom: 15px;
    font-size: 24px;
}
.feedback-close{
    width: 24px;
    height: 24px;
    text-align: center;
    line-height: 24px;
    font-size: 30px;
    font-weight: bold;
    color: #000;
    position: absolute;
    right: 30px;
    top: 25px;
    cursor: pointer;
}
.feedback-pro{
    font-size: 20px;
    color: #000;
    font-weight: bold;
    padding-top: 15px;
}
.feedback-pro span{
    color: #666;
    display: block;
    font-size: 16px;
}
.feedback-item{
    margin-top: 15px;
}
.feedback-item label{
    color: #666;
    display: block;
    font-size: 16px;
}
.feedback-item input{
    width: 100%;
    height: 50px;
    border: 1px solid #ddd;
    margin-top: 10px;
    font-size: 18px;
    padding: 0 15px;
    color: #000;
}
.feedback-item textarea{
    width: 100%;
    height: 100px;
    border: 1px solid #ddd;
    margin-top: 10px;
    font-size: 18px;
    padding: 10px;
    color: #000;
    resize: vertical;
    font-family: "DINFONT";
}
.feedback-main button{
    width: 100%;
    height: 50px;
    background-color: #000;
    color: #fff;
    margin-top: 30px;
    font-size: 16px;
    border: none;
    font-family: "DINFONT";
}
.feedback-main button:hover{
    opacity: 0.8;
}
/*页码*/
.page{
    text-align: center;
    height: 30px;
    margin-top: 20px;
    font-size: 14px;
}
.page span{
    padding: 0 10px;
    height: 30px;
    display: inline-block;
    line-height: 28px;
    border: #F0EEEF 1px solid;
    margin: 0 3px;
    color: #D3D3D3;
    background: #FFFFFF;
    zoom: 1;
}
.page a{
    padding: 0 10px;
    height: 30px;
    display: inline-block;
    line-height: 28px;
    border: #333333 1px solid;
    border-radius: 3px;
    margin: 0 3px;
    color: #FFFFFF;
    background: #333333;
    zoom: 1;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}
.page a:hover{
    background: #000000;
    text-decoration: none;
    border-color: #000000;
}

.small-img{
	display: flex;
	align-items:center;
	justify-content: center;
}
.clearfix:before,
.clearfix:after{
  display: table;
  line-height: 0;
  content: "";
}
.magnifier{
	width: 500px;
	position: relative;
	float: left;
}
.magnifier-container{
	width: 500px;
	height: 500px;
	overflow: hidden;
	position: relative;
	border: 1px solid #ddd;
}
.move-view{
	width: 100px;
	height: 100px;
	position: absolute;
	background-image: url('../images/move-box.png');
}
.images-cover{
	height: 100%;
	width: 100%;
	position: relative;
}
.images-cover img{
	position: absolute;
}
.magnifier-assembly{
	height: 92px;
	overflow: hidden;
	position: relative;
	padding-left: 30px;
	padding-right: 30px;
}
.magnifier-btn{
	position: absolute;
	font-family: "宋体";
	width: 100%;
	top: 50%;
	left: 0;
	margin-top: -40px;
}
.magnifier-btn span{
	line-height: 80px;
	height: 80px;
	width: 20px;
	background-color: #6e6e6e;
	color: #fff;
	display: block;
	z-index: 9998;
	text-align: center;
	font-size: 20px;
	cursor: pointer;
	border-radius: 3px;
}
.magnifier-btn .magnifier-btn-left{
	float: left;
}
.magnifier-btn .magnifier-btn-right{
	float: right;
}
.magnifier-line{
	position: relative;
	overflow: hidden;
	height: 92px;
}
.magnifier-line ul{
	display: block;
	font-size: 0;
	width: 10000%;
	position: absolute;
	left: 0;
	z-index: 9997;
}
.magnifier-line li{
	float: left;
	width: 100px;
	cursor: pointer;
}
.magnifier-line ul > .active .small-img{
	border-color: #bbb;
}
.small-img{
	height: 78px;
	padding: 1px;
	margin: 5px;
	overflow: hidden;
	border: 1px solid #ddd;
	text-align: center;
}
.small-img img{
	max-width: 100%;
	max-height: 100%;
}
.magnifier-view{
	width: 100%;
	height: 100%;
	position: absolute;
	right: -105%;
	top: 0;
	z-index: 9999;
	background-color: #fff;
	display: none;
	overflow: hidden;
}
.magnifier-view img{
	display: block;
}
.animation03{
	transition: all 0.3s ease-in 0.1s;
	-ms-transition: all 0.3s ease-in 0.1s;
	-moz-transition: all 0.3s ease-in 0.1s;
	-webkit-transition: all 0.3s ease-in 0.1s;
	-o-transition: all 0.3s ease-in 0.1s;
}

.num-input{
    height: 30px;
    display: inline-block;
    overflow: hidden;
    vertical-align: middle;
}
.num-input .num-subtract, .num-input .num-add{
    width: 30px;
    height: 30px;
    line-height: 28px;
    display: block;
    float: left;
    text-align: center;
    border: 1px solid #ddd;
    font-size: 20px;
    color: #000;
    background-color: #fff;
    cursor: pointer;
    font-family: arial;
}
.num-input input[type="text"]{
    width: 50px;
    height: 30px;
    float: left;
    border: 1px solid #ddd;
    text-align: center;
    color: #000;
    outline: none;
}
.pro-cart{
    width: 60px;
    height: 60px;
    position: fixed;
    right: 10px;
    top: 60%;
    z-index: 10;
}
.pro-cart a{
    width: 60px;
    height: 60px;
    display: block;
    text-align: center;
    line-height: 60px;
    border-radius: 30px;
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg t='1655456733754' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='38098' width='30' height='30'%3E%3Cpath d='M940.9 236H282.8c-8 0-14.8-5.6-16.3-13.4l-12.8-64.9c-3.3-16.7-18-28.8-35-28.8h-119C80 129 64 144.9 64 164.7c0 19.7 16 35.7 35.7 35.7h89.6s0.1 0 0.1 0.1l94.2 477.9c3.3 16.7 18 28.8 35 28.8h476.2c19.5 0 36-15.3 36.5-34.7 0.5-20.1-15.7-36.6-35.7-36.6h-434c-8 0-14.8-5.6-16.3-13.4l-10.1-51.2c-2-10.3 5.8-19.9 16.3-19.9h478.1c6.8 0 12.9-4.1 15.4-10.4l113.6-278.6c5.1-12.7-4.1-26.4-17.7-26.4z' p-id='38099' fill='%23ffffff'%3E%3C/path%3E%3Cpath d='M375.1 815.9m-79.1 0a79.1 79.1 0 1 0 158.2 0 79.1 79.1 0 1 0-158.2 0Z' p-id='38100' fill='%23ffffff'%3E%3C/path%3E%3Cpath d='M730.8 815.9m-79.1 0a79.1 79.1 0 1 0 158.2 0 79.1 79.1 0 1 0-158.2 0Z' p-id='38101' fill='%23ffffff'%3E%3C/path%3E%3C/svg%3E") center center no-repeat #FF8F00;
}
.pro-cart span{
    width: 20px;
    height: 20px;
    display: block;
    text-align: center;
    line-height: 20px;
    border-radius: 10px;
    background-color: red;
    color: #fff;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
}
.goods-list{
    width: 100%;
    background-color: #f5f5f5;
    padding: 10px 30px;
}
.goods-list .goods-item{
    border-bottom: 1px solid #e2e2e2;
    padding: 20px 0;
    overflow: hidden;
    position: relative;
}
.goods-list .goods-item-pic{
    width: 120px;
    height: 120px;
    border: 1px solid #eee;
    float: left;
}
.goods-list .goods-item-pic img{
    width: 100%;
    height: 100%;
}
.goods-list .goods-info{
    width: calc(100% - 140px);
    float: right;
}
.goods-list .goods-title{
    font-size: 24px;
    color: #000;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.goods-list .goods-price{
    font-size: 16px;
    margin-top: 10px;
    color: #333;
}
.goods-list .goods-price span{
    color: #999;
    margin-right: 5px;
}
.goods-list .goods-num{
    margin-top: 20px;
}
.goods-list .goods-del{
    font-size: 14px;
    color: #666;
    margin-top: 20px;
    cursor: pointer;
    position: absolute;
    right: 0;
    top: 0;
}
.goods-list .goods-del:hover{
    color: #ce1d21;
}
.goods-list .goods-total{
    padding: 15px 0;
}
.goods-list .goods-total p{
    text-align: right;
    font-size: 20px;
    color: #333;
    padding: 5px 0;
    position: relative;
}
.goods-list .goods-total p span{
    margin-right: 5px;
    color: #999;
}
.goods-list .goods-total p em{
    width: 16px;
    height: 16px;
    display: block;
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg t='1655643473988' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='5028' width='48' height='48'%3E%3Cpath d='M512 47.476364c-256.651636 0-465.454545 208.802909-465.454545 465.454545 0 256.698182 208.802909 465.501091 465.454545 465.501091s465.454545-208.802909 465.454545-465.501091-208.802909-465.454545-465.454545-465.454545z m0 861.137454c-218.158545 0-395.636364-177.477818-395.636364-395.682909 0-218.158545 177.477818-395.636364 395.636364-395.636364 218.158545 0 395.636364 177.477818 395.636364 395.636364 0 218.158545-177.477818 395.682909-395.636364 395.682909zM687.522909 418.443636a173.474909 173.474909 0 0 1-138.379636 169.704728v52.130909a34.909091 34.909091 0 0 1-69.818182 0v-83.456a34.909091 34.909091 0 0 1 34.909091-34.909091c57.064727 0 103.470545-46.405818 103.470545-103.470546s-46.405818-103.470545-103.470545-103.470545-103.517091 46.405818-103.517091 103.470545a34.909091 34.909091 0 0 1-69.818182 0 173.474909 173.474909 0 0 1 173.288727-173.288727 173.521455 173.521455 0 0 1 173.335273 173.288727zM512 715.217455a48.081455 48.081455 0 1 0 0 96.116363 48.081455 48.081455 0 0 0 0-96.116363z' p-id='5029' fill='%232c2c2c'%3E%3C/path%3E%3C/svg%3E") center center no-repeat;
    background-size: cover;
    opacity: 0.5;
    position: absolute;
    right: -20px;
    top: 50%;
    margin-top: -8px;
    cursor: pointer;
}
.cart-btn{
    text-align: right;
    margin-top: 20px;
}
.cart-btn a{
    padding: 0 15px;
    height: 40px;
    background-color: #FF8F00;
    color: #fff;
    display: inline-block;
    line-height: 40px;
    font-size: 16px;
}
.fee-detail{
    padding: 20px;
}
.fee-detail .fee-info{
    font-size: 18px;
    background-color: #f5f5f5;
    padding: 5px 15px;
    margin-bottom: 15px;
}
.fee-detail .fee-main{
    border: 1px solid #ddd;
    padding: 10px 0;
}
.fee-detail p{
    font-size: 18px;
    padding: 5px 0;
}
.fee-detail p span{
    width: 150px;
    display: inline-block;
    text-align: right;
    margin-right: 10px;
    color: #999;
}
.order-wrap-title{
    font-size: 20px;
}
.order-wrap-notice{
	margin-top: -20px; 
	margin-bottom: 20px;
}
.payment-notice{
	margin-top: -10px; 
}
.order-main{
    background-color: #f5f5f5;
    margin-top: 10px;
    padding: 40px;
    overflow: hidden;
    margin-bottom: 30px;
}
.address-item{
    width: 48%;
    margin-bottom: 20px;
    float: left;
    margin-left: 4%;
    margin-bottom: 20px;
}
.address-item:nth-child(2n+1){
    margin-left: 0;
}
.address-item label{
    font-size: 18px;
    display: block;
    margin-bottom: 6px;
}
.address-item select{
    width: 100%;
    height: 40px;
    line-height: 40px;
    padding: 0 10px;
    font-size: 18px;
    border: 1px solid #000;
    outline: none;
}
.address-item input{
    width: 100%;
    height: 40px;
    padding: 0 10px;
    font-size: 18px;
    border: 1px solid #000;
    outline: none;
}
.address-item textarea{
    width: 100%;
    height: 100px;
    padding: 10px;
    font-size: 18px;
    border: 1px solid #000;
    outline: none;
}
.pay-item{
    float: left;
    margin-right: 30px;
    line-height: 20px;
}
.pay-item input{
    width: 20px;
    height: 20px;
    vertical-align: bottom;
}
.pay-item label{
    font-size: 20px;
    margin-left: 5px;
}
.pay-btn{
    text-align: left;
    margin-top: 20px;
}
.pay-btn a{
    width: 200px;
    height: 50px;
    text-align: center;
    background-color: #FF8F00;
    color: #fff;
    display: inline-block;
    line-height: 50px;
    font-size: 20px;
}
.pay-success{
    padding-top: 200px;
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg t='1655731981158' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='2932' width='128' height='128'%3E%3Cpath d='M874.119618 149.859922A510.816461 510.816461 0 0 0 511.997 0.00208a509.910462 509.910462 0 0 0-362.119618 149.857842c-199.817789 199.679789-199.817789 524.581447 0 724.260236a509.969462 509.969462 0 0 0 362.119618 149.857842A508.872463 508.872463 0 0 0 874.119618 874.120158c199.836789-199.679789 199.836789-524.581447 0-724.260236zM814.94268 378.210681L470.999043 744.132295a15.359984 15.359984 0 0 1-5.887994 4.095996c-1.751998 1.180999-2.913997 2.362998-5.276994 2.913997a34.499964 34.499964 0 0 1-13.469986 2.914997 45.547952 45.547952 0 0 1-12.897986-2.303998l-4.095996-2.363997a45.291952 45.291952 0 0 1-7.009992-4.095996l-196.902793-193.789796a34.126964 34.126964 0 0 1-10.555989-25.186973c0-9.37399 3.583996-18.74698 9.98399-25.186974a36.429962 36.429962 0 0 1 50.372947 0l169.98382 167.423824L763.389735 330.220732a37.059961 37.059961 0 0 1 50.371947-1.732998 33.647965 33.647965 0 0 1 11.165988 25.186973 35.544963 35.544963 0 0 1-9.98399 24.575974v-0.04z m0 0' p-id='2933' fill='%2336ab60'%3E%3C/path%3E%3C/svg%3E") center 50px no-repeat;
    text-align: center;
    font-size: 40px;
    color: #000;
}
.pay-success-info{
    padding: 30px;
    background-color: #f5f5f5;
    font-size: 24px;
    line-height: 40px;
    margin-top: 50px;
    text-align: center;
}
.pay-success-info img{
    height: 200px;
    margin-top: 20px;
}
.pay-success-btn{
    text-align: center;
    margin-top: 50px;
}
.pay-success-btn a{
    width: 200px;
    height: 50px;
    text-align: center;
    background-color: #FF8F00;
    color: #fff;
    display: inline-block;
    line-height: 50px;
    font-size: 20px;
    margin: 0 20px;
}
.pay-success-btn a:last-child{
    background-color: #fff;
    color: #333;
    border: 1px solid #333;
}
.pay-success-btn a:hover{
    opacity: 0.9;
}
.pay-fail{
    padding-top: 200px;
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg t='1655733554244' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='4700' width='128' height='128'%3E%3Cpath d='M512.697 63.445c-247.538 0-448.208 200.67-448.208 448.208 0 247.54 200.67 448.208 448.208 448.208 247.54 0 448.208-200.668 448.208-448.208 0-247.539-200.668-448.208-448.208-448.208z m177.99 581.763c12.264 12.273 12.264 32.17 0 44.427-12.284 12.273-32.172 12.273-44.454 0L512.916 556.318 379.59 689.635c-12.274 12.273-32.162 12.273-44.445 0-12.266-12.256-12.266-32.154 0-44.427l133.334-133.353-133.334-133.318c-12.266-12.256-12.266-32.17 0-44.444 12.282-12.256 32.17-12.256 44.445 0l133.326 133.335 133.317-133.335c12.282-12.256 32.17-12.256 44.453 0 12.265 12.274 12.265 32.19 0 44.444L557.351 511.855l133.335 133.353z' p-id='4701' fill='%23d81e06'%3E%3C/path%3E%3C/svg%3E") center 50px no-repeat;
    text-align: center;
    font-size: 40px;
    color: #000;
}

/* mask box loading msg box start */
.mask-box { width: 100%; height: 100%; position: fixed; top: 0; z-index: 9999999;}
.mask-box:before{content: ''; background-color: #111211; width: 100%; height: inherit; position: fixed; display: block;
    opacity: 0.7;
    filter: alpha(opacity=70);
}
.mask-box .box-body{width: 100%; height: 100%; margin:0 auto; position: relative;}
.mask-box .box-body .box-center{ position: relative; top: 50%; margin-top:-100px; }
.mask-box .box-body .box-center .box-loading{ margin:0 auto; width: 90%; max-width: 328px; height: 125px; background-color: #fff;
    padding:25px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-box-shadow: 0 12px 20px 0 rgb(0 0 0 / 21%);
    -moz-box-shadow: 0 12px 20px 0 rgb(0 0 0 / 21%);
    box-shadow: 0 12px 20px 0 rgb(0 0 0 / 21%);
}

.mask-box .box-body .box-center .box-loading .title-line{ width: 100%; margin:10px auto; margin-bottom: 10px; }
.mask-box .box-body .box-center .box-loading .title-line .ico-loading {width: 24px;  height: 24px; float: left;}
.mask-box .box-body .box-center .box-loading .title-line .ico-loading .sp { width: 24px;  height: 24px;  clear: both;  margin: 0 auto;}
.mask-box .box-body .box-center .box-loading .title-line .ico-loading .sp-circle {
    border: 4px rgba(0, 0, 0, 0.15) solid;
    border-top: 4px #FF8F00 solid;
    border-radius: 50%;
    -webkit-animation: spCircRot .9s infinite linear;
    animation: spCircRot .9s infinite linear;
}
.mask-box .box-body .box-center .box-loading .title-line .title-txt{ font-size: 18px; font-weight: 500;  color: #434343; float: left; margin-left:10px;}
.mask-box .box-body .box-center .box-loading .message-txt{ width: 100%; font-size: 12px; color: #79807C; line-height: 20px; margin-top: 12px; }