.sidebar{position: fixed; top: 50%; left: 10px; transform: translateY(-50%); z-index: 150;}
.sidebar li{width: 45px; height: 45px; border-radius: 50%; position: relative; cursor: pointer; margin: 15px 0; background: #d1d1d1; z-index: 1; transition: all .3s;}
.sidebar li a{position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; z-index: 10;}
.sidebar li::after{content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; z-index: 5;}
.sidebar li.wechat::after{background: url(../images/sidebar01.png) no-repeat center;}
.sidebar li.weibo::after{background: url(../images/sidebar02.png) no-repeat center;}
.sidebar li.icon::after{background: url(../images/sidebar03.png) no-repeat center;}
.sidebar li.jd::after{background: url(../images/sidebar05.png) no-repeat center;}
.sidebar li.tmall::after{background: url(../images/sidebar06.png) no-repeat center;}
.sidebar li.dy::after{background: url(../images/sidebar04.png) no-repeat center;}
.sidebar li .qrcode{width: 188px; height: 227px; position: absolute; left: calc(100% + 3px); top: 50%; transform: translateY(-50%); padding: 17px 17px 17px 28px; display: none; font-size: 14px;}
.sidebar li .qrcode img{width: 100%; border-radius: 5px;}
.sidebar li .qrcode .tit{color: #fff; text-align: center; line-height: 1.5; margin-top: 7px;}
.sidebar li .qrcode{background: url(../images/qrcode-bg-red.png) no-repeat center;}
.sidebar li:hover{
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0.65+0,0+100;Neutral+Density */
background: -moz-linear-gradient(top, #b83d33, #780e0b); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #b83d33,#780e0b); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #b83d33,#780e0b); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}

.heart .sidebar li .qrcode{background: url(../images/qrcode-bg-blue.png) no-repeat center;}
.heart .sidebar li:hover{
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0.65+0,0+100;Neutral+Density */
background: -moz-linear-gradient(top, #004c59, #01333b); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #004c59,#01333b); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #004c59,#01333b); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}

.story-sause .sidebar li .qrcode{background: url(../images/qrcode-bg-gold.png) no-repeat center;}
.story-sause .sidebar li:hover{
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0.65+0,0+100;Neutral+Density */
background: -moz-linear-gradient(top, #c8b792, #a3906f); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #c8b792,#a3906f); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #c8b792,#a3906f); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}
.story-rui .sidebar li .qrcode{background: url(../images/qrcode-bg-gold01.png) no-repeat center; width: 189px; height: 197px;}
.story-rui .sidebar li:hover{
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0.65+0,0+100;Neutral+Density */
background: -moz-linear-gradient(top, #c8b792, #a3906f); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #c8b792,#a3906f); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #c8b792,#a3906f); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}

.mybanner.has-video{cursor: pointer;}
.video-box{position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: rgba(0, 0, 0, 0.5); z-index: 200; display: none;}
.video-box video{position: absolute; width: 90%; max-width: 1000px; height: auto; top: 50%; left: 50%; transform: translate(-50%,-50%);}


.heart{overflow: hidden;}
.heart .inner{background-size: cover; background-repeat: repeat-y; background-position: center top;margin-top:-1px}

.heart .part{padding: 4.6875% 0;}
.heart .title{padding-bottom: 1.3888%; text-align: center; font-weight: bold; font-size: 40px; background-clip: text; -webkit-background-clip: text; color: transparent; background-image: linear-gradient(to top,#b99254,#f7e0bb); line-height: 1; color: #ffe7c5;}
@media(max-width: 768px) {
    .heart .inner{background-size: contain;}
    .heart .title{font-size: 22px;}
}
.heart .story{/*background: url(../images/brand-story-bg.png) no-repeat center; */ padding-bottom: 1.6875%;}
.heart .story .block{padding: 0 12.5%;}
.heart .story .intro{color: #fff; padding: 0 14.8%; line-height: 1.8; text-align: center; font-weight: lighter; font-size:14px;}
.heart .story ul{margin: 4.86% -3.86% 0;}
.heart .story li{width: 33.33%; float: left; padding: 0 1.388%; margin-bottom: 3%; text-align: center;}
// .heart .story .pic{text-align: center; padding-top: 100%; margin-bottom: 0.7%; position: relative; background-size: 85%; background-position: center; background-repeat: no-repeat;}
// .heart .story .pic::before{content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: url(../images/li-bg.png) no-repeat center bottom; background-size: contain;}
.heart .story .txt{text-align: justify; color: #fff; line-height: 1.8; font-size:14px;}
.heart .story .pic{padding-top: 57.5%; background-size: 100%; margin-bottom:5%; background-repeat: no-repeat; background-position: center; transition: all .3s; position: relative; overflow: hidden;border-radius: 10px;}
.heart .story .pic:hover{background-size:110%;}
.heart .story .spec{position: relative;}
.heart .story .spec::before{content: ''; background-color: transparent; width: 20px; height: 20px; border-radius: 50%; right: 0; top: 0; transform: translate(50%,-50%); position: absolute;}
.heart .story .spec::after{content: ''; background-color: transparent; width: 20px; height: 20px; border-radius: 50%; right: 0; bottom: 0; transform: translate(50%,50%); position: absolute;}
.heart .story .spec i{position: absolute; width: 20px; height: 100%; left: -10px; top: 0;}
.heart .story .spec i::before{content: ''; background-color: transparent; width: 100%; height: 20px; border-radius: 50%; right: 0; top: 0; transform: translateY(-50%); position: absolute;}
.heart .story .spec i::after{content: ''; background-color: transparent; width: 100%; height: 20px; border-radius: 50%; right: 0; bottom: 0; transform: translateY(50%); position: absolute;}
.heart .story .spec::before,
.heart .story .spec::after,
.heart .story .spec i::after,
/* .heart .spec .spec i::before{background-color: #035F6E;}*/
@media(max-width: 1024px){
    .heart .story ul{margin: 4.86% -2% 0;}
    .heart .story li{padding: 0 2%;}
}
@media(max-width: 960px){
    .heart .story .intro{padding: 0 8%;}
}
@media(max-width: 640px){
    .heart .story .intro{padding: 0;}
}
@media(max-width: 480px) {
    .heart .story li{width: 100%;}
}

.heart .spirit{text-align: center; background: url(../images/spirit-bg.png) no-repeat center top; background-size: 100%;}
.heart .spirit .tit-box{padding: 2.43% 0 1.04%; background: url(../images/spirit-tit-bg.png) no-repeat center; background-size: contain; margin-bottom: 1.11%;}
.heart .spirit .subtit{line-height: 1; color: #b99254; text-align: center;}
.heart .spirit .intro{color: #fff; max-width: 1000px; margin: auto;  line-height: 1.8; text-align: center; font-weight: lighter; }
@media(max-width: 1024px){
    .heart .spirit .intro{padding: 0 10%;}
    .heart .spirit{background-position: center;}
}
@media(max-width: 640px) {
    .heart .spirit .intro{padding: 0;}
}

.heart .mission ul{margin: 3.472% -1.388% 0; position: relative; z-index: 1;}
.heart .mission li{width: 33.33%; float: left; padding: 0 1.388%; margin-bottom: 2%; text-align: center;}
.heart .mission .block{padding: 0 15.625%;}
.heart .mission .pic{padding-top: 100%; position: relative; background-size: 85%; background-position: center; background-repeat: no-repeat;}
.heart .mission .pic::before{content: ''; position: absolute; width: 100%; height: 100%; top: 0; background-size: contain;}
.heart .mission .content{background: url(../images/line-icon.png) no-repeat left 41% top; z-index: 2; position: relative; padding: 4.46% 0; width:85%; margin: auto;}
.heart .mission .tit{width: 45%; float: left; text-align: right; padding-top:5%; padding-right: 8.46%; line-height: 1.4; background-clip: text; -webkit-background-clip: text; color: transparent; background-image: linear-gradient(to top,#b99254,#f7e0bb);}
.heart .mission li:nth-child(3) .tit{padding-top:3%}
.heart .mission .right{width: 55%; float: right;/* padding-left: 4.46%; */}
.heart .mission dl{text-align: left; line-height: 1.5;}
.heart .mission dt{display: inline-block; color: #b99254; vertical-align: top; padding-right: 4.46%;}
.heart .mission dd{display: inline-block; vertical-align: top; color: #fff;}
.heart .mission .txt{text-align: left; color: #b99254; }
.heart .mission .txt1{text-align: left; color: #fff; }
.heart .mission .pic{padding-top: 57.5%; background-size: 100%; margin-bottom:5%; background-repeat: no-repeat; background-position: center; transition: all .3s; position: relative; overflow: hidden; border-radius:10px}
.heart .mission .pic:hover{background-size:110%;}
.heart .mission .spec{position: relative;}
.heart .mission .spec::before{content: ''; background-color: transparent; width: 20px; height: 20px; border-radius: 50%; right: 0; top: 0; transform: translate(50%,-50%); position: absolute;}
.heart .mission .spec::after{content: ''; background-color: transparent; width: 20px; height: 20px; border-radius: 50%; right: 0; bottom: 0; transform: translate(50%,50%); position: absolute;}
.heart .mission .spec i{position: absolute; width: 20px; height: 100%; left: -10px; top: 0;}
.heart .mission .spec i::before{content: ''; background-color: transparent; width: 100%; height: 20px; border-radius: 50%; right: 0; top: 0; transform: translateY(-50%); position: absolute;}
.heart .mission .spec i::after{content: ''; background-color: transparent; width: 100%; height: 20px; border-radius: 50%; right: 0; bottom: 0; transform: translateY(50%); position: absolute;}
.heart .mission .spec::before,
.heart .mission .spec::after,
.heart .mission .spec i::after,
/* .heart .mission .spec i::before{background-color: #035F6E;}*/


@media(max-width: 768px){
    .heart .mission li{width: 100%; margin-bottom: 5%;}
    .heart .mission .block{padding: 0 30%;}
}
@media(max-width: 640px){
    .heart .mission .block{padding: 0 20%;}
}
@media(max-width: 640px){
    .heart .mission .block{padding: 0 10%;}
}

.heart .core ul{margin-top: 1.388%;}
.heart .core li{width: 19.86%; float: left; position: relative; transition: width .3s; height: 100%;}
.heart .core li .block{position: relative;}
.heart .core .pic{width: 100%; padding-top: 93.1%; background-size: cover; background-position: center; background-repeat: no-repeat;}
.heart .core .content{position: absolute; width: 100%; left: 0; bottom: 0; color: #fff; padding: 13.98% 11.1%; z-index: 5;  transition: 0.5s;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0.65+0,0+100;Neutral+Density */
background: -moz-linear-gradient(bottom,  rgba(10,99,129,0.85) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(bottom,  rgba(10,99,129,0.85) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to top,  rgba(10,99,129,0.85) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}
.heart .core .cover{position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(10,99,129); transition: all .3s; z-index: 3; opacity: .4;}
.heart .core li.active{width: 40.27%;}
.heart .core .tit{line-height: 1; margin-bottom: 2.97%; transition: all .3s;}
.heart .core .txt{font-size: 14px; line-height: 1.8;}
.heart .core li.active .content{padding: 6.89% 5.86%;}
.heart .core li.active .cover{opacity: 0;}
.heart .core li.active .txt{-webkit-line-clamp:inherit}
@media(max-width: 960px){
    .heart .core .content{padding: 4%;}
    .heart .core li.slick-current .cover{opacity: 0;}
}
@media(max-width: 640px){
    .heart .core li{padding: 0 10px;}
    .heart .core .txt{font-size: 12px;}
}

.heart .history{padding-bottom: 10.41%;}
.heart .history .subtit{text-align: center; color: #fff; font-family: 'SourceHanSerifCNRegular'; }
.heart .history ul{position: relative; margin: 6.52% -4.86% 0; padding: 0 4.86%;}
.heart .history .slick-list{overflow: visible;}
.heart .history ul::before{content: ''; background-color: #b2a780; height: 2px; width: 100%; left: 0; top: 50%; transform: translateY(-50%); position: absolute;}
.heart .history li{ padding: 0 1.388%; height: 430px; position: relative; transition: all .3s;}
.heart .history li .content{position: absolute; width: 200%; top: 0; left: 0; border-left: 1px solid #659088; height: 50%; padding: 0 9.5%;}
.heart .history li .content::before{content: ''; background: url(../images/dot-icon.png) no-repeat center; width: 16px; height: 17px; position: absolute; left: 0; bottom: 0; transform: translate(-50%,50%);}
.heart .history li:nth-child(2n) .content{top: 50%; padding-top: 20.5%;}
.heart .history li:nth-child(2n) .content::before{bottom: auto; top: 0; transform: translate(-50%,-50%);}
.heart .history li:not(.slick-active){opacity: 0;}
.heart .history .tit{font-size: 30px; color: #b99254; line-height: 1; padding-bottom: 3.125%;}
.heart .history .tit span{font-size: 16px; padding-left: 10px;}
.heart .history .intro{color: #fff; line-height: 2;font-size:14px;}
.heart .history .slick-arrow.slick-prev{background: url(../images/prev-icon.png) no-repeat center; width: 18px; height: 18px; border: none!important; opacity: 1; transition: all .3s;}
.heart .history .slick-arrow.slick-next{background: url(../images/next-icon.png) no-repeat center;
    width: 18px;
    /* height: 18px;  */
    border: none!important; opacity: 1; transition: all .3s;}
.heart .history .slick-prev::before{content: none;}
.heart .history .slick-next::before{content: none;}
.heart .history .slick-disabled{opacity: 0;}
@media(max-width: 1400px){
    .heart .history ul{margin: 6.52% 0 0;}
}
@media(max-width: 640px){
    .heart .history ul::before{top: 100%;}
    .heart .history li .content{position: relative; top: 0!important; height: 100%; width: 100%; padding: 0 0 10px 9.5%; }
    .heart .history li:nth-child(2n) .content{padding-top: 0;}
    .heart .history li:nth-child(2n) .content::before{top: auto; bottom: 0; transform: translate(-50%,50%);}
    .heart .history li{height: auto;}
    .heart .history .slick-prev{top: auto; bottom: 0; transform: translateY(50%);}
    .heart .history .slick-next{top: auto; bottom: 0; transform: translateY(50%);}
}

.heart .product .series{background-color: #025b6a; text-align: center; padding: 4.16% 0 1.5625%;}
.heart .product .title{font-size: 40px; text-shadow: 0 5px 5px 5px rgba(0, 0, 0, 0.1); padding-bottom: 4.16%;}
.heart .product dl{display: inline-block; vertical-align: top; text-align: left;  padding: 0 3%; white-space: nowrap;}
.heart .product dl:not(:last-child){background: url(../images/line-icon01.png) no-repeat right center; background-size: contain;}
.heart .product dt{color: #ecc184; padding-bottom: 12px;}
.heart .product dd{display: inline-block; color: #eae0c8; cursor: pointer; position: relative; padding-bottom: 13px; margin-right: 35px; line-height: 1;}
.heart .product dd:last-child{margin-right: 0;}
.heart .product dd::before{content: ''; width: 0; height: 3px; background-color: red; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);}
.heart .product dd.on{color: #b41b26;}
.heart .product dd.on::before{width: 100%;}
.heart .product li{display: none;}
.heart .product li a{display: block; position: relative; background-color:#025462;}
/* .heart .product .info{position: absolute; top: 9%; left: 41.6%; width: 51.04%;} */
.heart .product li a > img{width:50%;float:left;}
.heart .product .info{width:50%;float: right; padding:5% 12.5% 0 4.6875%;}
.heart .product .pic{ right: 0; width: auto; bottom:0; display:block; margin-left:auto; height:250px;margin-top:-15%; transform:translateX(20%);}
/*.heart .product .pro-tit{color: #ffe7c5;padding-left:50px; background: url(../images/tit-icon04.png) no-repeat left center;}*/
.heart .product .pro-tit{color: #ffe7c5;}
.heart .product .price{display: inline-block; line-height: 50px; padding: 0 20px; border: 1px solid rgba(249,219,176, .2); color: #ffe7c5;}
.heart .product .price span{font-size: 30px;}
.heart .product .price i{ display: inline-block;font-style: normal;}
.heart .product .share{padding-top: 6%; display:none;}
.heart .product .share .btn{width: 40px; height: 40px; margin: 0 15px; display: inline-block; position: relative; vertical-align: top; border-radius: 50%; cursor: pointer;}
.heart .product .share .btn .qrcode{width: 90px; height: 90px; position: absolute; bottom: calc(100% + 10px); background-color: #fff; display: none; left: 50%; transform: translateX(-50%);}
/* .heart .product .share .btn:hover .qrcode{display: block;} */
.heart .product .share .jd{background: url(../images/jd-icon.png) no-repeat center #095a73;}
.heart .product .share .tmall{background: url(../images/tmall-icon.png) no-repeat center #095a73;}
.heart .product .share .dy{background: url(../images/dy-icon.png) no-repeat center #095a73;}
.heart .product .content{color: #fff; padding-bottom: 3.5%;}
.heart .product .content span{display: inline-block; margin-right: 5%; font-size: 18px; line-height: 1.8;}
.heart .product .content .detail{padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid rgba(227,199,155,.75);}
.heart .product .content .tit1{color: #e3c79b; font-size: 18px; line-height: 1.8;}
.heart .product .content .txt{font-size: 16px; font-weight: lighter; line-height: 1.8;}
.heart .product .content p.con-tit{color:#e3c79b; padding-top: 2%; border-top: 1px solid #e3c79b;}

/*@media(min-width: 1023px){
    .heart .product .price{position: absolute; top: 0; padding: 20px 5px; left: -60%;text-align: center;}
.heart .product .price i{writing-mode: vertical-lr;margin: auto;display: block; }
    /*.heart .product .price span{writing-mode: horizontal-tb;}*/
.heart .product .price i:nth-child(2){padding:5px 0; writing-mode: rl-tb;}
}
@media(min-width: 1200px){
.heart .product .price{ left: -50%; }
} */
@media(max-width: 1600px){
    .heart .product .info{top: 5%;}
    .heart .product .content .tit1,
    .heart .product .content span{font-size: 16px;}
}
@media(max-width: 1400px){
    .heart .product .content .tit1,
    .heart .product .content .txt,
    .heart .product .content span{font-size: 14px; line-height: 1.3;}
    .heart .product .pro-tit{line-height: 1.2;}
    .heart .product .pic{height:200px;}
}
@media(max-width: 1200px){
    .heart .product dl{padding: 0 3% 3%;}
    .heart .product dd{margin-right: 25px;}
    .heart .product .info{padding: 3% 5% 0 3%;}
}
@media(max-width: 1024px){
   /* .heart .product .info{position: relative; background-color: #003038; width: 100%; left: 0; padding: 3%;} */
    .heart .product li a > img{width:100%}
    .heart .product .info{width:100%;}
    .heart .product .pic{position:initial;margin-top:0; transform:translateX(0);}
}
@media(max-width: 768px) {
    .heart .product .title{font-size: 30px;}
    .heart .product .price span{font-size: 20px;}
    .heart .product .series{ position: relative; padding-bottom: 80px;}
    .heart .product dl{ display: inline-block; width: 32%}
    .heart .product dl dt{ background: #003038; color: #fff; text-align: center; padding: 0; line-height: 40px; border-radius: 10px;}
    .heart .product dl .sub{ font-size: 16px; display: none; bottom:20px; position: absolute; width: 100%; text-align: center; left: 0;}
    .heart .product dl.show .sub{ display: block}
    .heart .product dl.show dt{background: #ecc184; }
}
@media(max-width: 640px){
    .heart .product .price{line-height: 40px; padding: 0 10px;}
}


.mybanner .slick-dots{bottom: 15%;}


.story-page .title{font-size: 40px; color: #333; padding-bottom: 1.73%; line-height: 1; text-align: center;}
.story-page .triangle{position: relative;}
.story-page .triangle::before{content: ''; width: 0; height: 0; border: 15px solid transparent; border-bottom-color: #fff; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);}
.story-page .triangle::after{content: ''; width: 0; height: 0; border: 10px solid transparent; border-bottom-color: #83181e; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);}

.story-page .spec{position: relative;}
.story-page .spec::before{content: ''; background-color: transparent; width: 20px; height: 20px; border-radius: 50%; right: 0; top: 0; transform: translate(50%,-50%); position: absolute;}
.story-page .spec::after{content: ''; background-color: transparent; width: 20px; height: 20px; border-radius: 50%; right: 0; bottom: 0; transform: translate(50%,50%); position: absolute;}
.story-page .spec i{position: absolute; width: 20px; height: 100%; left: -10px; top: 0;}
.story-page .spec i::before{content: ''; background-color: transparent; width: 100%; height: 20px; border-radius: 50%; right: 0; top: 0; transform: translateY(-50%); position: absolute;}
.story-page .spec i::after{content: ''; background-color: transparent; width: 100%; height: 20px; border-radius: 50%; right: 0; bottom: 0; transform: translateY(50%); position: absolute;}
@media(max-width: 768px) {
    .story-page .title{font-size: 24px;}
}
.story-page .part1{padding: 7.2% 0 4.94%; text-align: center;}
.story-page .part1 .intro{text-align: center; line-height: 2.2; padding-top: 1.2%;}

.story-page .part2{padding: 3.64% 0 3.125%;}
.story-page .part2 .subtit{text-align: center;  line-height: 1.8;}
.story-page .part2 ul{margin: 4.86% -4.16% 0;}
.story-page .part2 li{width: 33.33%; float: left; padding: 0 4.16%; margin-bottom: 2%;}
.story-page .part2 .pic{padding-top: 57.5%; background-size: 100%; background-repeat: no-repeat; background-position: center; transition: all .3s; position: relative; overflow: hidden;}
.story-page .part2 .spec::before,
.story-page .part2 .spec::after,
.story-page .part2 .spec i::after,
.story-page .part2 .spec i::before{background-color: #fff;}
.story-page .part2 li:hover .pic{background-size: 110%;}
.story-page .part2 .tit{line-height: 1;  margin: 5% 0;color:#333;}
.story-page .part2 .sub{line-height: 1; margin-bottom: 6.25%;}
.story-page .part2 .txt{ line-height: 1.8;}
@media(max-width: 640px){
    .story-page .part2 li{width: 100%; margin-bottom: 4%;}
    .story-page .part2 .tit{margin: 2% 0;}
    .story-page .part2 .sub{margin-bottom: 1%;}
}

.story-page .part3{background: url(../images/story-part3-bg.jpg) no-repeat center top; padding-top: 5.2%;}
.story-page .part3 .subtit{text-align: center; color: #555; }
.story-page .part3 .slider-nav{text-align: center; max-width: 1100px; margin: 5.2% auto 0;}
.story-page .part3 .slider-nav li{display: inline-block; text-align: left; padding: 0 0 30px; position: relative; cursor: pointer;}
.story-page .part3 .slider-nav li .tit-box{padding: 0 50px;}
.story-page .part3 .slider-nav li:not(:last-child) .tit-box{border-right: 1px solid #d2d2d2;}
.story-page .part3 .slider-nav li.slick-current::before{content: ''; width: 0; height: 0; border: 10px solid transparent; border-bottom-color: #f7f7f7; bottom: 0; left: 50%; transform: translateX(-50%); position: absolute;}
.story-page .part3 .slider-nav li .tit{padding-top: 9px; transform: all .3s; position: relative; line-height: 1;color:#333;}
.story-page .part3 .slider-nav li .sub{line-height: 1; margin-top: 15px; color: #999;font-size:15px;}
.story-page .part3 .slider-nav li.slick-current .tit{color: #7b0e0e;}
.story-page .part3 .slider-nav li.slick-current .tit::before{content: ''; width: 100%; height: 2px; background-color: #7b0e0e; position: absolute; top: 0; left: 0;}
.story-page .part3 .slider-nav li.slick-current .sub{color: #bdad96;}
.story-page .part3 .slider-for{background-color: #f7f7f7;}
.story-page .part3 .slider-for li{background-color: #f7f7f7; padding: 40px;}
.story-page .part3 .pic{width: 55.88%; float: right; padding-top: 35%; background-size: 100%; background-repeat: no-repeat; background-position: center; transition: all .3s;}
.story-page .part3 li:hover .pic{background-size: 110%;}
.story-page .part3 .spec::before,
.story-page .part3 .spec::after,
.story-page .part3 .spec i::after,
.story-page .part3 .spec i::before{background-color: #f7f7f7;}
.story-page .part3 .content{width: 44%; float: left; padding: 5.88% 8% 0 4.41%;line-height: 1.5; color:#333;}
.story-page .part3 .content dl:not(:last-child){margin-bottom: 5.5%;}
.story-page .part3 .content dt{ line-height: 1; margin-bottom: 4.25%; position: relative;}
.story-page .part3 .content dt::before{content: ''; width: 14px; height: 14px; border: 1px solid #c3c3c3; background-color: transparent; position: absolute; top: 1px; left: -20px; border-radius: 50%;}
.story-page .part3 .content dd{margin-bottom: 2%;}
@media(min-width: 1025px){
    .story-page .part3 .slider-nav li{width: auto!important;}
}
@media(max-width: 1200px){
    .story-page .part3 .slider-nav li .tit-box{padding: 0 40px;}
}
@media(max-width: 768px){
    .story-page .part3 .content{width: 100%; float: none; padding: 0 4% 4% 4.41%;}
    .story-page .part3 .pic{width: 100%; padding-top: 63.4%;}
}
@media(max-width: 640px){
    .story-page .part3 .slider-nav li .tit-box{padding: 0 20px;}
    .story-page .part3 .slider-for li{padding: 25px;}
}


.story-page .part4{padding-top: 4.6875%;padding-bottom: 4.6875%;}
.story-page .part4 .subtit{text-align: center;}
.story-page .part4 .box{margin-top: 2.08%; position: relative;}
.story-page .part4 .slider-for .pic{width: 55.2%; float: left; padding-top: 33.5%; background-size: 100%; background-repeat: no-repeat; background-position: center; transition: all .3s; overflow: hidden;}
.story-page .part4 .slider-for li:hover .pic{background-size: 110%;}
.story-page .part4 .spec::before,
.story-page .part4 .spec::after,
.story-page .part4 .spec i::after,
.story-page .part4 .spec i::before{background-color: #fff;}
.story-page .part4 .slider-for .content{width: 39.58%; float: right; padding-top: 7.63%;}
.story-page .part4 .slider-nav{position: absolute; width: 39.58%; top: 0; right: 0; border-bottom: 1px solid #f1f1f1; z-index: 20;}
.story-page .part4 .slider-nav li{width: auto!important; margin-right: 55px; cursor: pointer; padding-bottom: 22px; position: relative;color:#333;}
.story-page .part4 .slider-nav li.slick-current{color: #e60012;}
.story-page .part4 .slider-nav li.slick-current::before{content: ''; background-color: #e60012; width: 100%; height: 3px; position: absolute; bottom: 0; left: 0;}
.story-page .part4 dl:not(:last-child){padding-bottom: 3.5%;}
.story-page .part4 dt{ line-height: 1; padding-bottom: 10px; color: #555;}
.story-page .part4 dd{ line-height: 2; color: #999; text-align: justify;}
@media(max-width: 1400px){
    .story-page .part4 .slider-nav li{margin-right: 30px;}
}
@media(min-width: 960px){
.story-page .part4 dd .u3 li{ float: left; width: 33.333%;}
.story-page .part4 dd .u2 li{ float: left; width: 50%;}
}
@media(max-width: 960px){
    .story-page .part4 .slider-nav li{margin-right: 15px;}
}
@media(max-width: 768px){
    .story-page .part4 .slider-for .pic{width: 100%; padding-top: 60.52%; float: none;}
    .story-page .part4 .slider-for .content{width: 100%; float: none; padding: 4% 0;}
    .story-page .part4 .slider-nav{width: 100%; position: initial; margin-bottom: 3%;}
}

.story-classic .part5{text-align: center; padding: 4.6875% 0 23.69%; background-size: cover; background-repeat: no-repeat; background-position: center;}
.story-classic .part5 .subtit{}
.story-classic .part5 .tit{line-height: 1; padding: 2.77% 0 0.69%;color:#333;}
.story-classic .part5 .intro{ text-align: center; line-height: 1.8;}
@media(max-width: 768px){
.story-classic .part5 .intro{ padding-bottom:30%}
}

.story-page .part6{padding-top: 3.64%;padding-bottom: 3.64%;}
.story-page .part6 .subtit{text-align: center;  padding-top: 2.5%;color:#333;}
.story-page .part6 .slider-nav{max-width:350px; margin: 15px auto 25px;}
.story-page .part6 .slider-nav li{width: auto!important; margin: 0 27px; color: #999; position: relative; padding-bottom: 13px; cursor: pointer;}
.story-page .part6 .slider-nav li.slick-current{color: #ff0000;}
.story-page .part6 .slider-nav li.slick-current::before{content: ''; background-color: red; width: 100%; height: 3px; position: absolute; bottom: 0; left: 0;}
.story-page .part6 .slider-for li{background-color: #eaeaea; position: relative;}
.story-page .part6 .slider-for .pic{width: 43.75%; position: absolute; top: 0; left: 0;}
.story-page .part6 .slider-for li .auto{padding: 5.72% 0 2% 0; position: relative;}
.story-page .part6 .slider-for li .detail{width: 58.25%; margin: 0 0 0 auto; padding-left: 6.94%; padding-right:15%;}
.story-page .part6 .slider-for li .img{width: 22.22%; position: absolute; right: 0; bottom: 20%;}
.story-page .part6 .price{display: inline-block; line-height: 50px; padding: 0 20px; border: 1px solid #c3c3c3; color: #333; margin-top:5%;}
.story-page .part6 .price span{font-size: 30px;}
.story-page .part6 .share{padding-top: 27%;}
.story-page .part6 .share .btn{width: 40px; height: 40px; margin: 0 15px; display: inline-block; position: relative; vertical-align: top; border-radius: 50%; cursor: pointer; transition: all .3s;}
.story-page .part6 .share .btn .qrcode{width: 110px; height: 110px; position: absolute; bottom: calc(100% + 10px); background: url(../images/qrcode-bg.png) no-repeat center; background-size: 100%; padding: 10px; display: none; left: 50%; transform: translateX(-50%);}
/* .heart .product .share .btn:hover .qrcode{display: block;} */
.story-page .part6 .share .jd{background: url(../images/jd-icon.png) no-repeat center #555555;}
.story-page .part6 .share .tmall{background: url(../images/tmall-icon.png) no-repeat center #555555;}
.story-page .part6 .share .dy{background: url(../images/dy-icon.png) no-repeat center #555555;}
.story-page .part6 .share .jd:hover{background: url(../images/jd-icon.png) no-repeat center #7b0000;}
.story-page .part6 .share .tmall:hover{background: url(../images/tmall-icon.png) no-repeat center #7b0000;}
.story-page .part6 .share .dy:hover{background: url(../images/dy-icon.png) no-repeat center #7b0000;}
.story-page .part6 .share .btn:hover::before{content: ''; border: 5px solid transparent; border-bottom-color: #7b0000; position: absolute; bottom: 99%; left: 50%; transform: translateX(-50%);}
.story-page .part6 .tit-box{padding-left: 40px; background:  no-repeat left center;}
.story-page .part6 .sub{color: #891e1e; line-height: 1; margin-bottom: 12px;}
.story-page .part6 .tit{font-size: 30px; color: #000; line-height: 1;}
.story-page .part6 .slick-arrow{border-radius: 0;}
/* .story-page .part6 .slick-next{right: 4.6875%;} */
.story-page .part6 .slick-prev{left: 4.6875%;}
.story-page .part6 .content{padding-top: 6%; color: #333; line-height: 1.8;}
.story-page .part6 .content .txt{ padding-bottom: 5%;}
.story-page .part6 p{ color: #333; margin: 0;}
/* .story-page .part6 p span{display: inline-block; vertical-align: top;} */
.story-page .part6 p.f24{margin-bottom: 5%;}
.story-page .part6 p.f18{line-height: 1.8;}
.story-classic .part6 .tit-box{background-image:url(../images/tit-icon.png)}
.story-sause .part6 .tit-box{background-image:url(../images/tit-icon05.png)}
.story-sause .part6 .slider-for li .detail{ padding-right: 0}
.story-page .part6 .slider-for li .photo,
.story-sause .part6 .slider-for li .photo{ width: 50%; padding-top: 3%}
.story-sause .part6 .price{ margin-top: 0}
.story-sause .part6 .share{ position: absolute; bottom: 14%;left:76%; min-height: 70px;}
.story-sause .part6 .share .btn{ display: block; margin: 15px 0}
@media(min-width: 1023px){
	.story-page .part6 .slider-for li .photo,
	.story-sause .part6 .slider-for li .photo{ position: absolute; right: 0; bottom: 0; width: 25%; padding-top: 0; }
	.story-sause .part6 .share{ position: static; padding-top: 0; margin-top: 5%;}
	.story-sause .part6 .share .btn{ display: inline-block;}
	.story-page .part6 .slider-for li .detail,
	.story-sause .part6 .slider-for li .detail{ position: relative;}
	.story-page .part6 .slider-for li .auto{ padding-bottom: 3%;}
}
@media(max-width: 1024px){
    .story-page .part6 .slider-for .pic{width: 100%; position: initial;}
    .story-page .part6 .slider-for li .detail{width: 100%; padding-left: 0; padding-right: 33%;}
    .story-page .part6 .slider-for li .auto{padding: 5% 0;}
    .story-page .part6 .share{padding-top: 6%;}
    .story-page .part6 .price{margin-top: 0;}
    .story-page .part6 .slider-for li .img{width: 36%;}
}
@media(max-width: 640px){
    .story-page .part6 .slider-for li .img{position: initial; width: 40%; margin-bottom: 8%;}
    .story-page .part6 .slider-for li .detail{padding-right: 0;}
    .story-page .part6 .slider-for li .photo,
    .story-sause .part6 .slider-for li .photo{ width: 80%; }
    .story-sause .part6 .share{ position: absolute; bottom: 14%;left:auto; right: 0}
    .story-page .part6 .slick-arrow{top: 20%; width: 40px; height: 40px;}
}



.story-sause .part6 .slider-nav{max-width: 500px;}
.story-sause .part5{color: #fff; padding: 13.75% 0 15%;}
.story-sause .part5 .title{color: #fff; text-align: left; padding-bottom: 0;}
.story-sause .part5 .auto{text-align: right;}
.story-sause .part5 .box{display: inline-block; width: 50%; text-align: left; padding-left: 3.68%;}
.story-sause .part5 .subtit{padding: 6.94% 0 4.16%; }
.story-sause .part5 .intro{line-height: 2; }
@media(max-width: 1024px){
    .story-sause .part5 .intro,
    .story-sause .part5 .title{text-align: center;}
    .story-sause .part5 .box{width: 100%; text-align: center; padding-left: 0;}
}
@media(max-width: 640px){
    .story-sause .part6 .slider-nav li{margin: 0 10px;}
    .story-sause .part6 .slider-nav{max-width: 360px;}
}

.story-rui .title{text-align: center;}
.story-rui .title span{ line-height: 1; color: #7f6c43; padding: 25px 44px 25px 0; background: url(../images/tit-icon01.png) no-repeat right center; display: inline-block; background-size: contain;}

.story-rui .part1{padding: 3.64% 0;}
.story-rui .part1 .img{margin: 2.77% 0 2.43%;}
.story-rui .part1 ul{margin: 0 -3.95%;}
.story-rui .part1 li{width: 33.33%; float: left; padding: 0 3.95%; margin-bottom: 2%;}
.story-rui .part1 .box{padding-left: 6.43%; border-bottom: 1px solid #e8e8e8;}
.story-rui .part1 .tit{color: #a89161; margin-bottom: 2%;}
.story-rui .part1 .txt{color: #999; font-size: 14px; line-height: 1.8;}
@media(min-width: 1025px){
    .story-rui .part1 .box{min-height: 195px;}
}
@media(max-width: 1024px){
    .story-rui .part1 li{width: 100%;}
    .story-rui .part1 .box{padding-bottom: 2%;}
}
@media(max-width: 640px){
    .story-rui .part1 .box{padding-left: 0;}
}

.story-rui .part2{padding-bottom: 6.25%;}
.story-rui .part2 .auto{padding-top: 2.6%;}
.story-rui .part2 .left{width: 50%; float: left; position: relative;}
.story-rui .part2 .box{position: absolute; top: 50%; left: 0; padding: 0 38% 0 8.33%; transform: translateY(-50%); color: #fff;}
.story-rui .part2 .left img{width: 100%;}
.story-rui .part2 .left .tit{ padding-bottom: 4%; line-height: 1.8;}
.story-rui .part2 .left .intro{font-size: 14px; line-height: 1.8;}
.story-rui .part2 .right{width: 50%; float: left; padding-left: 7.77%;}
.story-rui .part2 .sub{color: #999; padding-right: 36.66%; padding-bottom: 3%;}
.story-rui .part2 .pic{width: 100%; padding-top: 58.62%; background-size: 100%; background-repeat: no-repeat; background-position: center; transition: all .3s;}
.story-rui .part2 .content{padding-left: 30%; line-height: 1;}
.story-rui .part2 .right .tit{color: #a89161; margin: 4.6% 0 2.81%;}
.story-rui .part2 .slick-arrow{top: 84.54%; transform: translateY(0); width: 62px; height: 62px; border-radius: 0; padding: 0; transition: all .3s; border-color: #e6e6e6;}
.story-rui .part2 .slick-arrow:focus{border-color: #e6e6e6;}
.story-rui .part2 .slick-arrow::before{content: none;}
.story-rui .part2 .slick-prev{background: url(../images/prev-icon01.png) no-repeat center #fff; transform: rotate(180deg);}
.story-rui .part2 .slick-next{background: url(../images/prev-icon01.png) no-repeat center #fff; left: 62px;}
.story-rui .part2 .slick-prev:hover{background: url(../images/prev-icon01-on.png) no-repeat center #dcd1ac; border-color: #dcd1ac;}
.story-rui .part2 .slick-next:hover{background: url(../images/prev-icon01-on.png) no-repeat center #dcd1ac; border-color: #dcd1ac;}
@media(max-width: 1200px){
    .story-rui .part2 .sub{padding-right: 0;}
    .story-rui .part2 .slick-arrow{width: 42px; height: 42px;}
    .story-rui .part2 .slick-next{left: 42px;}
}
@media(max-width: 1024px){
    .story-rui .part2 .right{width: 100%; float: none; padding-left: 0%;}
    .story-rui .part2 .left{width: 100%; float: none; padding-bottom: 3%;}
    .story-rui .part2 .right .tit{margin: 2.3% 0 1.9%;}
    .story-rui .part2 .slick-arrow{top: 90.22%; width: 62px; height: 62px;}
    .story-rui .part2 .slick-next{left: 62px;}
    .story-rui .part2 .content{padding-left: 20%;}
}
@media(max-width: 640px){
    .story-rui .part2 .slick-arrow{top: 40%; width: 42px; height: 42px;}
    .story-rui .part2 .slick-next{left: auto; right: 0;}
    .story-rui .part2 .content{padding-left: 0;}
    .story-rui .part2 .box{ padding: 0 5%}
}

.story-rui .part3{position: relative;background-color: #dcd1ac;}
.story-rui .part3 .title span{background-image: url(../images/tit-icon03.png);}
.story-rui .part3 .slider-for li{ position: relative; min-height:694px;}
.story-rui .part3 .slider-for .pic{width: 50%; height: 100%; position: absolute; top: 0; right: 0; background-size:cover; background-repeat: no-repeat; background-position: center; transition: all .3s;}
.story-rui .part3 .slider-for .pic img{ display: none}
.story-rui .part3 .slider-for .auto{padding:285px 37.5% 2% 0;}
.story-rui .part3 .slider-for .content{padding-right: 19%;}
.story-rui .part3 .slider-for .content p{margin: 0; line-height: 1.5;}
.story-rui .part3 .slider-for .content p.f20{color: #7f6c43;margin-bottom: .7%;}
.story-rui .part3 .slider-for .content p.f16{color: #a89161; margin-bottom: 2%;}
.story-rui .part3 .box{position: absolute; top:60px; left: 0; z-index: 10; width: 100%;}
.story-rui .part3 .box .auto{padding-right: 37.5%;}
.story-rui .part3 .box .title{text-align: left;}
.story-rui .part3 .slider-nav{margin-top: 4.16%;}
.story-rui .part3 .slider-nav li{cursor: pointer; color: #a89161; position: relative; line-height: 1; overflow: hidden; padding-right: 7%;}
.story-rui .part3 .slider-nav li::before{content: ''; background-color: #ceb888; width: 1px; height: calc(100% - 13px); position: absolute; bottom: 0; right: 30%;}
.story-rui .part3 .slider-nav li:last-child::before{content: none;}
.story-rui .part3 .slider-nav li .tit{margin-bottom: 13px; position: relative; display: inline-block; padding-top: 13px;}
.story-rui .part3 .slider-nav li.slick-current{color: #7f6c43;}
.story-rui .part3 .slider-nav li.slick-current .tit::before{content: ''; left: 0; top: 0; width: 100%; height: 2px; background-color: #7f6c43; position: absolute;}
@media(max-width: 1600px){
    .story-rui .part3 .box .auto{padding-right: 45.5%;}
    .story-rui .part3 .slider-nav{margin-top: 2%;}
}
@media(max-width: 1400px){
    .story-rui .part3 .slider-nav li .tit{margin-bottom: 8px;}
}
@media(max-width: 1024px){
    .story-rui .part3{ margin-bottom: 4%}
    .story-rui .part3 .slider-for .pic{ position: relative; width: 100%; height: auto}
    .story-rui .part3 .slider-for .pic img{ display:block}
    .story-rui .part3 .box{position: initial; padding: 4% 0; background-color: #dcd1ac; width: 100%;}
    .story-rui .part3 .slider-for .auto{padding: 3% 0;}
    .story-rui .part3 .slider-for .content,
    .story-rui .part3 .box .auto{padding: 0;}
    .story-rui .part3 .slider-for li{ min-height: inherit}
}
@media(max-width: 640px){
    .story-rui .part3 .slider-nav .f20{font-size: 14px;}
}

.story-rui .part4{background-position: center;}
.story-rui .part4{padding: 10.2% 0 19%; color: #fff;}
.story-rui .part4 .auto{padding-left: 41.66%;}
.story-rui .part4 .title{text-align: left;}
.story-rui .part4 .tit{line-height: 1; margin: 40px 0 26px; letter-spacing: 12px;}
.story-rui .part4 .txt{line-height: 1; letter-spacing: 12px;}
@media(max-width: 1024px){
    .story-rui .part4 .auto{padding-left: 0; text-align: center;}
    .story-rui .part4 .title{text-align: center;}
    .story-rui .part4 .tit{margin: 2.77% 0 1.8%;}
}
@media(max-width: 640px){
    .story-rui .part4 .tit,
    .story-rui .part4 .txt{letter-spacing: 5px; line-height: 1.5;}
}

.story-rui .part5{padding-top: 3.64%;}
.story-rui .part5 .auto.center{text-align: center;}
.story-rui .part5 .subtit{text-align: center; padding-top: 2.5%; color: #333;}
.story-rui .part5 .slider-nav{/*max-width: 255px;*/ margin: 15px auto 30px; display: inline-block;}
.story-rui .part5 .slider-nav .slick-track{min-width: 500px;}
.story-rui .part5 .slider-nav li{width:auto!important; margin: 0 27px; color: #333; position: relative; padding-bottom: 13px; cursor: pointer;}
.story-rui .part5 .slider-nav li.slick-current{color: #a89161;}
.story-rui .part5 .slider-nav li.slick-current::before{content: ''; background-color: #a89161; width: 100%; height: 3px; position: absolute; bottom: 0; left: 0;}
.story-rui .part5 .slider-for li{background-color: #fff; position: relative;}
.story-rui .part5 .slider-for .piccon{width:50%;float:left}
.story-rui .part5 .slider-for .pic{width: 100%;position: relative;top: 0;left: 0;padding-top: 76.45%;background-size: cover;background-repeat: no-repeat;background-position: center;}
.story-rui .part5 .slider-for .pic .box{position: absolute; top: 50%; left: 12.5%; transform: translateY(-50%); color: #fff; /*padding-right: 58%;*/ display:flex;}
.story-rui .part5 .slider-for .pic .box .tit1{ /*margin-bottom: 5%;*/ writing-mode: vertical-lr; display:block; font-size:24px;text-orientation: upright;}
.story-rui .part5 .slider-for .pic .box .intro{line-height: 1.8; writing-mode: vertical-lr; display:block; font-size:14px;text-orientation: upright;}
.story-rui .part5 .slider-for li .auto{padding: 1.59% 0 .5% 0; position: relative;width:50%;float:right;}
.story-rui .part5 .slider-for li .detail{width: 100%; margin: 0 0 0 auto; padding-left: 6.45%; position: relative;}
.story-rui .part5 .slider-for li .detail .img{max-width: 334px; width:34.94%;}
.story-rui .part5 .price{display: inline-block; line-height: 48px; padding: 0 20px; margin-bottom: 4.77%; border: 1px solid #c3c3c3; color: #333; margin-top: 3%;}

.story-rui .part5 .Description{margin-top: 1%;padding-left: 0%;text-align:left; margin-bottom: 1%;width: 100%;color:#333;}

.story-rui .part5 .price span{font-size: 30px; line-height: 1;}
.story-rui .part5 .share{position: absolute; bottom: 14%; left: 63.5%;}
.story-rui .part5 .share .btn{width: 40px; height: 40px; margin: 15px 0; position: relative; vertical-align: top; border-radius: 50%; cursor: pointer; transition: all .3s;}
.story-rui .part5 .share .btn .qrcode{width: 140px; height: 129px; position: absolute; top: 50%; left: calc(100% + 8px); background: url(../images/qrcode-bg-gold02.png) no-repeat center; background-size: 100%; padding: 13px 13px 13px 23px; display: none; transform: translateY(-50%);}
.story-rui .part5 .share .jd{background: url(../images/jd-icon.png) no-repeat center #acacac;}
.story-rui .part5 .share .tmall{background: url(../images/tmall-icon.png) no-repeat center #acacac;}
.story-rui .part5 .share .dy{background: url(../images/dy-icon.png) no-repeat center #acacac;}
.story-rui .part5 .share .jd:hover{background: url(../images/jd-icon.png) no-repeat center #bfa979;}
.story-rui .part5 .share .tmall:hover{background: url(../images/tmall-icon.png) no-repeat center #bfa979;}
.story-rui .part5 .share .dy:hover{background: url(../images/dy-icon.png) no-repeat center #bfa979;}
.story-rui .part5 .tit-box{padding-left: 60px; background: url(../images/tit-icon02.png) no-repeat left center; background-size: contain; margin-bottom: 3%;}
.story-rui .part5 .sub{color: #333;  line-height: 1; margin-bottom: 8px;}
.story-rui .part5 .tit{font-size: 30px; color: #000; line-height: 1;}
.story-rui .part5 .slick-arrow{border-radius: 0;}
/* .story-rui .part5 .slick-next{right: 4.6875%;} */
.story-rui .part5 .slick-prev{left: 4.6875%;}
.story-rui .part5 .content{ line-height: 1.8;}
.story-rui .part5 .content .txt{padding-bottom: 1%;}
.story-rui .part5 p{color: #333; margin: 0; font-size: 18px; padding: 2px 0;}
.story-rui .part5 p span{display: inline-block; vertical-align: top; line-height: 1.8;}
.story-rui .part5 p.f30{font-size: 30px;}
.story-rui .part5 p.f18{line-height: 1.8;}
@media(max-width: 1400px){
.story-rui .part5 .slider-for .piccon{width:60%;}
.story-rui .part5 .slider-for li .auto{width:40%;}
}
@media(max-width: 1024px){
  .story-rui .part5 .slider-for li .detail{padding-left: 5%;min-height: auto;}
  .story-rui .part5 .Description{width:100%;padding-left:0}
.story-rui .part5 .slider-for .piccon{width:100%}  
}
@media(max-width: 1024px){
    .story-rui .part5 .slider-for .pic{width: 100%; position: relative; padding-top: 72.91%;}
    .story-rui .part5 .slider-for li .detail{width: 100%; padding-left: 0; padding-right: 33%;}
    .story-rui .part5 .slider-for li .auto{padding: 5% 0;width:100%}
    .story-rui .part5 .share{padding-top: 6%;}
    .story-rui .part5 .slider-for li .img{width: 36%;}
    .story-rui .part5 .slider-for .pic .box .tit1{font-size:20px;}
}
@media(max-width: 640px){
    .story-rui .part5 .slider-for li .detail{padding-right: 0;}
    .story-rui .part5 p{font-size: 14px;}
    .story-rui .part5 .share{position: initial;}
    .story-rui .part5 .share .btn{display: inline-block; margin: 0 15px;}
    .story-rui .part5 .share .btn .qrcode{bottom: calc(100% + 8px); top: auto; left: 50%; transform: translateX(-50%) rotate(-90deg);}
    .story-rui .part5 .share .btn .qrcode img{transform: rotate(90deg);}
    .story-rui .part5 .slider-for .pic .box .tit1{font-size:18px;}
}
@media(max-width: 480px){
    .story-rui .part5 .slider-for .pic{background-color: #0c0b32; background-position: top;}
    .story-rui .part5 .slider-for .pic .box{position: initial; padding-right: 0; transform: translate(0,0); width: 94%; margin: auto; padding-bottom: 3%;}
}


.heart .story li,
.heart .mission li{ transition: 0.5S}
.heart .story li:hover,
.heart .mission li:hover{ transform: translateY(-20px)}

.editor_about{font-family:'SourceHanSerifCNRegular'}

.news_main .auto{position: relative;}
.infoShare{ text-align: center; position: absolute; right:-10%; top:3%;}
.infoShare dt{  color: #5F6464; margin-bottom: 10px;}
.infoShare a{ display: block; height: 40px; width: 40px; color: #5F6464 ; margin-bottom: 24px;cursor: pointer;position: relative;}
.infoShare img{ display: block; margin: auto; padding-top: 6px;}
.infoShare .in{ padding-top: 7px;}
.infoShare .xl{ padding-top: 8px;}
.infoShare .lz{ padding-top: 9px;}

.infoShare .icon{ display: block; width: 32px; height: 32px; background: url("../images/wx.png") no-repeat 0 0; background-size: contain; margin: 0 auto; transition: background 0.2s linear;}
.infoShare .icon_in{ background-image: url("../images/in.png");}
.infoShare .icon_xl{ background-image: url("../images/xl.png");}


.infoShare a:hover .icon_wx{ background-image: url("../images/wx_hover.png");}
.infoShare a:hover .icon_in{ background-image: url("../images/in_hover.png");}
.infoShare a:hover .icon_xl{ background-image: url("../images/xl_hover.png");}
#qrcode{
  display: none;
}
#qrcode img{
  position: absolute;
  left: -120px;
  bottom: 0;
  border: 10px solid #fff;
  padding: 0;
  max-width: none;
}
a.wx:hover #qrcode{
  display: block;
}

p.img_no_indent{ text-indent: 0!important}


.story-Microsoft,
.story-Microsoft *{ font-family: 'Microsoft YaHei'!important; text-align: left!important;}
.story-Microsoft .part3 .slider-nav,
.story-Microsoft .part6 .slider-nav{ margin-left: 0; margin-right: 0; }

.story-HY,
.story-HY *{ font-family: 'HYZiKuTangYiShanKaiJ'!important; text-align: left!important;}
.story-HY .part3 .slider-nav,
.story-HY .part6 .slider-nav{ margin-left: 0; margin-right: 0;  }
@media(max-width: 640px){
.story-page .part1 .intro,
.story-page .part2 .subtit,
.story-page .part3 .subtit,
.story-page .part5 .intro,
.story-page .part5 .subtit,
.heart .story .intro,
.heart .spirit .intro{ text-align: left; }
}
@media(max-width:640px){
    .infoShare{ display: none; }
.info_title dl dt{ display: block; }
.info_title dl  a{ display: inline-block; height: 40px; line-height: 40px; width: 40px;vertical-align: middle; color: #5F6464 ; cursor: pointer;position: relative;}
.info_title dl  img{ display: block; margin: auto; padding-top: 6px;}


.info_title dl  .icon{ display: inline-block; vertical-align: middle; width: 32px; height: 32px; background: url("../images/wx.png") no-repeat 0 0; background-size: contain; margin: 0 auto; transition: background 0.2s linear;}
.info_title dl  .icon_in{ background-image: url("../images/in.png");}
.info_title dl  .icon_xl{ background-image: url("../images/xl.png");}

}

.columns {display: flex;flex-wrap: wrap;}
.columns .column{width: 50%;}

.PopUpForm .item_box#item_box .name{width: 130px;}
.PopUpForm .item_box#item_box .tips{padding-left: 140px;}