/*Top*/
.yacht-top{width: 1200px;background: #fff;margin: 0 auto;border-radius: 8px;margin-top: 10px;padding: 10px;display: flex;justify-content: start;}
.yacht-imgs{width: 460px;border: 5px solid #f6f8fa;padding: 10px;}
.detail-body{flex: 1;margin-left: 20px;padding: 10px;color: #152030;line-height: 22px;}

.imgs-wrap{position: relative;}
.imgs-wrap .prev-btn,.imgs-wrap .next-btn{user-select: none;position: absolute;z-index: 999;width: 20px;cursor: pointer;display: none;justify-content: center;align-items: center;}
.imgs-wrap .prev-btn i,.imgs-wrap .next-btn i{font-size: 28px;font-weight: 400;color: #fff;}
.imgs-wrap:hover .prev-btn,.imgs-wrap:hover .next-btn{display: flex;justify-content: center;align-items: center;}
.imgs-wrap .prev-btn{width: 35px;height: 35px; left: 3px;top: calc(50% - 17px);;border-radius: 50%; background-color: rgba(0, 0, 0, .2);}
.imgs-wrap .next-btn{width: 35px;height: 35px; right: 3px;top: calc(50% - 17px);;border-radius: 50%; background-color: rgba(0, 0, 0, .2);}
.imgs-body li{position: relative;}
.imgs-body li img{width: 430px;height: 360px;display: block;}
.imgs-body li .info{position: absolute;bottom: 10px;left: 10px;font-size: 12px;color: #fff;line-height: 22px;}
.imgs-wrap .swiper-button-disabled i{color: #aaa;cursor:not-allowed;}

.yacht-imgs .thumbs{display: flex;justify-content: space-between;margin-top: 5px;}
.yacht-imgs .thumbs .imgs-thumbs{flex: 1;}
.yacht-imgs .thumbs .left-btn,.yacht-imgs .thumbs .right-btn{user-select: none;background: #e8e8e8;font-weight: 500; width: 20px;cursor: pointer; display: flex;justify-content: center;align-items: center;}
.yacht-imgs .thumbs .left-btn i,.yacht-imgs .thumbs .right-btn i{font-size: 28px;color: #ccc;}
.yacht-imgs .thumbs .left-btn{border-radius: 5px 0 0 5px;}
.yacht-imgs .thumbs .right-btn{border-radius: 0 5px 5px 0;}
.yacht-imgs .thumbs .left-btn:hover,.yacht-imgs .thumbs .right-btn:hover{background: rgba(20,99,179,0.1);color: #fff;}
.yacht-imgs .thumbs-body{flex: 1;display: flex;justify-content: start;}
.yacht-imgs .thumbs-body .item{width: 100px;height: 60px;margin: 0 3px;border: 1px solid #fff; display: inline-block; overflow: hidden;}
.yacht-imgs .thumbs-body .item img{width: 100px;height: 60px;}
.yacht-imgs .thumbs-body .item:nth-child(1){margin-left: 2px;}
.yacht-imgs .thumbs-body .on{border: 1px solid #0086f6;box-shadow: 0 0 3px 2px #aecdf7;}
.yacht-imgs .thumbs-body .swiper-slide-thumb-active{border: 1px solid #0086f6;box-shadow: 0 0 3px 2px #aecdf7;}
.yacht-imgs .thumbs .swiper-button-disabled i{color: #f5f5f5;cursor:not-allowed;}

.detail-body h1{font-size: 18px;font-weight: 600;border-bottom: 1px dashed #eee;padding: 5px 0;}
.detail-body .subtit{color: #304659;font-size: 14px;padding: 5px 0;}
.detail-body .price{color: #ff0000;font-size: 12px;padding: 10px 0;}
.detail-body .price .num{font-size: 32px;font-weight: 500;}
.detail-body .price .fh{font-size: 12px;font-style: normal;}
.detail-body .cuxiao{padding:0 0 10px 0px;line-height: 18px;}
.detail-body .cuxiao .icon{font-size: 13px; background: #FFE9D7;color: #FF9421;border-radius: 5px;padding: 4px 4px;}
.detail-body .cuxiao .icon i{font-size: 16px;}
.detail-body .cuxiao p{font-size: 13px;display: inline-block;color: #333;}
.detail-body .ts-lable li{font-size: 14px;color: #fff;font-weight: 400;background: #3aa0ff; display: inline-block;padding: 3px 10px;border-radius: 5px;margin: 0px 5px 5px 0;}
.detail-body .md-view{padding: 10px 5px;font-size: 14px;line-height: 30px;font-weight: 400;}
.detail-body .btn-view{padding: 10px 0;margin-top: 10px;}
.detail-body .btn-view a{font-size: 18px;color: #fff;padding: 8px 25px;margin-right: 20px; background:linear-gradient(to left, rgb(0, 118, 245) 0%, rgb(0, 167, 250) 100%);border-radius: 20px;font-weight: 500;}
.detail-body .btn-view i{font-size: 20px;margin-right: 5px;}
.detail-body .btn-view .tel{background:linear-gradient(to right,#f90,#f60);}
.detail-body .btn-view a:hover{background: #00AF4B;}
.detail-body .tips{padding: 10px 0;font-size: 16px;color: #00af4b;}
.detail-body .tips i{font-size: 20px;}

/*游轮预订*/
.order-body{color: #152030; width: 1200px;background: #fff;margin: 0 auto; padding: 20px; box-sizing: border-box; margin-top: 20px;border-radius: 8px;}
.order-body .step{display: flex;align-items: center; font-size: 14px;font-weight: 600;color: #304659;}
.order-body .step span{background: #0086f6;padding: 3px 10px;border-radius: 0px 20px 20px 0;color: #fff;margin-right: 5px;}
.order-body .bg{padding: 5px 0; background-image: linear-gradient(0deg, #fff 0%,rgba(20,99,179,0.1) 100%);}
/*选择航线*/
.order-body .route{display: flex;flex-wrap: nowrap;justify-content: space-between;}
.order-body .route .rfl,.order-body .route .rfr{width: 20px;height: 45px;margin: 0 10px;padding: 0 5px; display: flex;justify-content: center;align-items: center;cursor: pointer;}
.order-body .route .rfl i,.order-body .route .rfr i{font-size: 25px;font-weight: 600;color: #9b9b9b;}
.order-body .route .rfl:hover{background: rgba(20,99,179,0.1);border-radius: 5px 0 0 5px;}
.order-body .route .rfr:hover{background: rgba(20,99,179,0.1);border-radius: 0 5px 5px 0;}
.order-body .route{padding: 5px 0;align-items: center;}
.order-body .route .rwarp{flex: 1;display: flex;align-items: center; height: 80px;overflow: hidden; white-space: nowrap;position: relative;}
.order-body .route .rwarp .rcon{position: absolute; display: flex;flex-wrap: nowrap;flex-direction: row;justify-content: flex-start;align-items: center;}
.order-body .route .rwarp a{display: flex;flex-direction: column;white-space:nowrap;min-width: 135px;background: #fcfcfc; border: 1px solid #f1f1f1; border-radius: 5px;margin-right: 10px;padding: 8px 10px;font-size: 13px;color: #152030;position: relative;overflow: hidden;}
.order-body .route .rwarp a:hover{text-decoration: none;border:1px solid #0086f6;color: #0086f6;}
.order-body .route .rwarp .rname{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;box-sizing: border-box;}
.order-body .route .rwarp .on{background: #0086f6;color: #fff;border: 1px solid #0086f6;}
.order-body .route .rwarp .on .rname{color: #fff;}
/*选择团期*/
.order-body .ydate{display: flex;flex-wrap: nowrap;justify-content: space-between;}
.order-body .ydate .rfl,.order-body .ydate .rfr{width: 20px;height: 60px;margin: 0 10px;padding: 0 5px; display: flex;justify-content: center;align-items: center;cursor: pointer;}
.order-body .ydate .rfl i,.order-body .ydate .rfr i{font-size: 25px;font-weight: 600;color: #9b9b9b;}
.order-body .ydate .rfl:hover{ background: rgba(20,99,179,0.1);border-radius: 5px 0 0 5px;}
.order-body .ydate .rfr:hover{ background: rgba(20,99,179,0.1);border-radius: 0 5px 5px 0;}
.order-body .ydate{padding: 5px 0;align-items: center;}
.order-body .ydate .ywarp{flex: 1;display: flex;align-items: center; height: 80px;overflow: hidden; white-space: nowrap;position: relative;}
.order-body .ydate .ywarp .ycon{display: flex;flex-wrap: nowrap;flex-direction: row;justify-content: flex-start;align-items: center;position: absolute;}
.order-body .ydate .ywarp a{width: 110px;height: 55px; display: flex;flex-direction: column;align-items: center; box-sizing: border-box;border-radius: 5px;border:1px solid #f1f1f1;margin-right: 10px;cursor: pointer;position: relative;}
.order-body .ydate .ywarp a:hover{text-decoration: none;border:1px solid #0086f6;}
.order-body .ydate .ywarp .dw{display: flex;flex-direction:column; justify-content: center;align-items: center;}
.order-body .ydate .ywarp .date{width: 100%; background: #e7f3ff;color: #152030; padding: 2px 10px;font-size: 13px;border-radius: 5px 5px 0 0;overflow: hidden;}
.order-body .ydate .ywarp .week{color: #69798c;font-size: 12px;}
.order-body .ydate .ywarp .price{background: #fcfcfc;text-align: right;color: #ff0000;padding: 5px 0; font-size: 12px;}
.order-body .ydate .ywarp .price .num{font-size: 14px;font-weight: 400;}
.order-body .ydate .ywarp .price .fh{font-style: normal;}
.order-body .ydate .ywarp .price .qi{font-size: 10px}
.order-body .ydate .ywarp .on{background: #0086f6;color: #fff;border: 1px solid #0086f6;}
.order-body .ydate .ywarp .on .date{background: #0086f6;color: #fff;}
.order-body .ydate .ywarp .on .week{background: #0086f6;color: #fff;}
.order-body .ydate .ywarp .on .price{background: #0086f6;}
.order-body .ydate .ywarp .lable{position: absolute;top: -10px;right: 0;font-size: 11px;font-weight: 400;border-radius: 8px 8px 8px 0px; height: 15px;line-height: 15px; padding: 0px 8px; color: #fff; font-style: normal;}
.order-body .ydate .ywarp .sq{background: #D92121;background:linear-gradient(to right,#D92121,#D92121);}
.order-body .ydate .ywarp .bz{background: #D92121;background:linear-gradient(to right,#D92121,#D92121);}
.order-body .ydate .ywarp .tj{background: #f10;background:linear-gradient(to right,#f10,#f10);}
        
/*选择房型*/
.room{width: 100%;padding: 5px 0px;line-height: 26px;box-sizing: border-box;}
.room table{width: 100%;}
.room table tr{display: flex;flex-wrap: nowrap;justify-content: space-between;padding: 5px;background: #fff;}
.room table tr td{flex: 1.2;display: flex;justify-content: start;align-items: center; color: #152030;font-size: 13px;font-weight: normal;}
.room table tr .htd{flex: 2.5;text-align: left;}
.room table tr .fimg{flex: 1;}
.room table tr .text{flex: 2;}

.room table .head{background: #eee;}
.room table .rinfo{border-bottom: 1px solid #f1f1f1;padding: 12px 0;}
.room table .rinfo i{font-size: 13px;color: #0086f6; margin-right: 2px;}
.room table .rinfo img{width: 85px;height: 65px;margin:0 10px;border-radius: 3px;}
.room table .rinfo img:hover{ -webkit-transform: scale(1.05);-moz-transform: scale(1.05);-ms-transform: scale(1.05);-o-transform: scale(1.05);transform: scale(1.05);transition-duration: .8s;}
.room table .rinfo .oper{display: flex;flex-direction:column;justify-content: flex-start;}
.room table .rinfo .oper .rvn{white-space: nowrap;}
.room table .rinfo .oper .vip{background: #f30;background:linear-gradient(to right,#f40,#f30);font-weight: 400; font-size: 12px; color: #fff;border-radius: 10px 5px 5px 10px;padding: 0px 5px;font-style: normal;white-space: nowrap;}
.room table .rinfo .oper .vip i{color: #fff;}
.room table .rinfo .oper span{white-space: nowrap;}
.room table .rinfo .oper .rname{font-size: 13px;font-weight: 600;color: #152030;}
.room table .rinfo .oper .fd{font-size: 12px;color: #69798c;cursor: pointer;}
.room table .rinfo .oper .fd i{font-size: 14px;}
.room table .rinfo .price{flex: 2;display: flex;justify-content: start;align-items: center; text-align: right;color: #ff0000;font-size: 12px;}
.room table .rinfo .price .num{font-size: 16px}
.room table .rinfo .price .qi{font-size: 12px;}
.room table .rinfo .price .fh{font-style: normal;}
.room table .rinfo .order{width: 85px; background: #f60;padding: 2px 8px; color: #fff;font-weight: 400; text-align: center;font-size: 12px;border-radius: 5px;}
.room table .rinfo .order:hover{background: #f30;}
.room table .rinfo:hover{background: #F5F8FA;}
.room table .rinfo:hover .order{animation: move 1s;animation-iteration-count: 1;}
@keyframes move {0% {transform: translateX(0);} 50% {transform: translateX(-15px);} 100% {transform: translateX(0);}}
.room table .rinfo .ord{position: relative;}
.room table .rinfo .ord i{position: absolute;color: #bbb;font-size: 38px;top: 30%;left: 0%;z-index: 99;}
.room-body .ts{line-height: 22px;padding: 15px 10px;font-size: 12px;color: #69798c;background: #f1f2f3;border-radius: 5px;}
.room-body .ts span{color: #f60;}

/*航线内容*/
.route-view{width: 1200px;margin: 20px auto;}
.route-view .route-left,.route-view .route-right{border-radius: 8px;}
.route-view .route-left{position:relative; float: left;width: 950px;background: #fff;margin-right: 10px;padding-bottom: 10px;margin-bottom: 20px;}
.route-view .route-right{float: right;width: 240px;padding: 10px;}
        
/*左*/
.route-left .rnav{width: 950px;height: 50px;padding: 0 10px; border-radius: 10px 10px 0 0; background: #0086f6;color:#fff;}
.route-left .rnav ul{width: 940px;display: flex;flex-direction: row; flex-wrap: nowrap; justify-content: space-between;align-items:center;}
.route-left .rnav ul li{flex: 1;max-width: 175px;height: 42px;line-height: 42px;cursor: pointer; margin-top: 8px; font-size: 16px;font-weight: 400;text-align: center;}
.route-left .rnav .on{margin-bottom: -1px;background: #fff;border-radius: 10px 10px 0 0;color: #0086f6;font-weight: 500;}
.route-view .ntit{color: #0086f6;font-size: 14px;display: flex;justify-content: space-between;align-items: center;}
.route-view .ntit h2,.route-view .ntit h3{color: #0086f6;font-size: 14px;font-weight: 600;height: 25px;line-height: 25px;display: flex;justify-content: start;align-items: center;}
.route-view .ntit h2::before,.route-view .ntit h3::before{content: "";border-radius: 10px;background: #0086f6;display: inline-block;height: 100%;width: 5px;margin:0 10px 0 1px;}

/*游轮介绍*/
.route-left .yintro{margin-top: 30px;}
.yintro .yintro-body{padding: 20px 30px;}
.yintro .pars{box-shadow: 0 1px 6px #eee;border: 1px solid #eee;padding: 10px; font-size: 12px;display: flex;flex-wrap: nowrap;justify-content: start;}
.yintro .pars .cdiv{display: flex;justify-content: start;align-items: center;}
.yintro .pars img{width: 45px;margin: 0 10px;}
.yintro .pars h3{font-size: 22px;font-weight: 500;margin: 0 40px 0 10px;}
.yintro .pars .item{border-right: 1px solid #eee;flex: 1;color: #304659;line-height: 20px;margin:0 5px;text-align: center;}
.yintro .pars .item:last-child{border-right: 0px solid #eee;}
.yintro .pars .item span{color: #69798c;}
.yintro .pars .item span a{color: #69798c;}
.yintro .pars .item span a:hover{color: #0086f6;}
.yintro .info{font-size: 12px;text-indent: 2em;line-height: 25px;color: #152030;position: relative; margin-top: 15px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;text-overflow: ellipsis;display:-moz-box;-moz-box-orient:vertical;-moz-line-clamp: 3;display:box;box-orient:vertical;line-clamp: 3;overflow: hidden;}
.yintro .info .ec{font-style: normal;cursor: pointer;}
.yintro .info .ec::after{content: "...更多";position: absolute;right: 0;bottom: 0;color: #0086f6;background: #fff;display:inline-block;}
.yintro .info.on .ec::after{content: "收起";}
.yintro .info.on{-webkit-line-clamp:none;-moz-line-clamp:none;line-clamp: none;}
/*游轮特色*/
.feature .feature-body{margin:20px; padding: 10px 20px;font-size: 13px;line-height: 28px;color: #152030;background: #FFE9D7;border-radius: 5px;}

/*游轮行程*/
.travel-body{padding: 20px;font-size: 13px;line-height: 28px;color: #152030;}
.travel .day{position: relative; border-left: 1px dashed #eee;padding: 0 0 0 30px;}
.travel .day .dayno{display: flex;background: #f1faff;height: 30px;line-height: 30px;}
.travel .day .noindex{width: 70px;position: relative; padding: 0 15px; color: #fff; font-size: 13px;background: #f60;font-weight: bold;margin-right: 30px;}
.travel .day .noindex em{font-size: 16px;margin: 0 2px;}
.travel .day .summary{flex: 1; font-size: 13px;color: #152030;font-weight: 500;line-height: 16px;align-content: center;}
.travel .day .jian{position: absolute;z-index: 5;top: 0;right: -20px;width: 0;height: 0;border-top: 31px solid #f60;border-right: 20px solid transparent;}
.travel .day .pp{position: absolute;top: 2px;left: -2px;background: #fff;color: #ccc;}
.travel .day .can{position: relative;margin-top: 20px;}
.travel .day .can .ci{position: absolute;left: -38px;top: 0;background: #fff;color: #ccc;}
.travel .day .canbody{display: flex;flex-direction: row;}
.travel .day .canbody div{margin-right: 45px;color: #69798c;font-size: 12px;}
.travel .day .canbody i{font-size: 13px;color: #f60;}
.travel .day .daycon{font-size: 13px;color: #152030;padding: 10px 0 20px 0;line-height: 28px;}
.route-view .travel .cost{margin: 20px 0 0 0;}
/*费用*/
.route-view .cost{margin: 20px;border:1px solid #dde4ed;border-radius: 6px;line-height: 24px;}
.route-view .cost .cost-tit{background-color: #f6f8fa;padding: 8px 12px;font-size: 14px;font-weight: 500; border-radius: 6px 6px 0 0;}
.route-view .cost .cost-body{padding: 15px 20px;font-size: 13px;line-height: 28px;}
/*预订需知*/
.need .need-body{margin: 20px;padding: 10px 20px;font-size: 13px;line-height: 28px;background: #f2f5f9;border-radius: 5px;}
/*游轮设施*/
.facility{background: #fff;}
.facility ul{padding: 10px;font-size: 13px;line-height: 28px;color: #152030;}
.facility ul li{color: #152030;display: block;float: left;border-radius: 8px; width: 285px;border: 1px solid #eee;margin: 10px; padding: 15px;font-size: 12px;}
.facility ul li:hover{box-shadow: 0px 4px 16px 1px rgba(0,0,0,.12);}
.facility ul li img{width: 100%;height: 185px;}
.facility ul li img:hover{ -webkit-transform: scale(1.05);-moz-transform: scale(1.05);-ms-transform: scale(1.05);-o-transform: scale(1.05);transform: scale(1.05);transition-duration: .8s;}
.facility ul li .info{display: flex;flex-direction: column;}
.facility ul li .info .sname{font-size: 13px;}
.facility ul li .info .sname span{font-size: 12px;color: #bbb;margin-left: 5px;}
.facility ul li .info .pars{display: flex;justify-content: space-between;font-size: 12px;align-items: center;}
.facility ul li .info .pars i{margin: 0 5px;}
.facility ul li .info .intro{color: #69798c;}
.facility ul li .info .intro i{color: #ccc;}
.facility ul li .info .ope{color: #69798c;line-height: 22px; border: 1px solid #eee;padding: 0px 10px;border-radius: 20px;}
.facility ul li .info .ope:hover{color: #0086f6;border-color: #0086f6;}

/*服务保障*/
.route-right{padding: 10px;background: #f9fbfd;border: 1px solid #eaeef3;}
.guar{width: 100%;padding: 10px 10px;margin-top: 10px;}
.guar .tit{font-size: 16px;color: #1a3c5e;font-weight: 600;letter-spacing: 1px;height: 35px;line-height: 35px;border-bottom: 2px solid #2a7de1;}
.guar ul li{margin: 15px 0;border-radius: 5px; background: #fff;border: 1px solid #eaeef3;transition: all 0.2s ease;padding:10px 15px;display: flex;flex-direction: column; justify-content: start;align-items: start; font-size: 12px;color: #1a3c5e;}
.guar ul li:hover {background-color: #f0f7ff;transform: translateX(5px);}
.guar ul li span{margin-top: 10px; color: #1a3c5e;font-size: 13px;}
.guar ul li div{font-size: 16px;font-weight: 600;}
.guar ul li div i{font-size: 20px;margin-right: 5px;font-weight: 400;}

/*推荐*/
.tuijian-body{background: #fff;border-radius: 8px;border: 1px solid #eee;padding: 10px;margin-top: 20px;}
.tuijian-body .tit{color: #0086f6;font-size: 18px;padding: 10px;margin-bottom: 10px; font-weight: bold;border-bottom: 1px solid #eee;background: #f8f8f8;}
.tuijian-body .tit i{font-size: 22px;margin-right: 5px;font-weight: normal;}
.tuijian-body ul li{transition: all 0.2s ease;margin: 15px auto;}
.tuijian-body ul li a{color: #152030;display: flex;flex-direction: column;border: 1px solid #eee;padding: 10px;line-height: 26px;font-size: 14px;}
.tuijian-body ul li img{width: 175px;height: 145px; overflow: hidden;border-radius: 5px;}
.tuijian-body ul li img:hover{ -webkit-transform: scale(1.05);-moz-transform: scale(1.05);-ms-transform: scale(1.05);-o-transform: scale(1.05);transform: scale(1.05);transition-duration: .8s;}
.tuijian-body ul li .yname{font-size: 13px;}
.tuijian-body ul li .yname span{font-size: 12px;color:#69798c;}
.tuijian-body ul li .ydate{font-size: 12px;color: #69798c;height: 22px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
.tuijian-body ul li .ydate i{font-size: 12px;margin-right: 2px;}
.tuijian-body ul li .ydate span{color: #69798c;}
.tuijian-body ul li .price{text-align: right;color: #ff0000;font-size: 12px;margin-top: 5px;}
.tuijian-body ul li .price .fh{font-style: normal;}
.tuijian-body ul li .price .num{font-size: 14px}
.tuijian-body ul li .price .qi{font-size: 10px;}
.tuijian-body ul li a:hover{box-shadow: 0px 4px 16px 1px rgba(0,0,0,.12);}
.tuijian-body ul li:hover{transform: translateY(-5px);}

/*设施房型弹窗*/
.box-mask{position: fixed;top: 0;right: 0;bottom: 0;left: 0;background: rgba(0, 0, 0, 0.4);z-index: 996;transition: all 0.4s;}
.box-wrap{background: #fff;color: #152030;font-size: 12px; width: 1200px;height: 580px; min-height: calc(100vh - 10%); position: fixed;top: 5%;left: 0;right: 0;bottom: 0; margin: 0 auto;z-index: 998;border-radius: 10px;}
.box-wrap .head{display: flex;justify-content: space-between;height: 40px;border-bottom: 1px solid #eee;color: #152030;font-size: 14px;align-items: center;padding: 0 10px;}
.box-wrap .head .close{font-size: 24px;cursor: pointer;margin-right: 10px;}
.box-wrap .head .close:hover{animation: xzdh 0.6s;animation-iteration-count: 1;transform: rotate(180deg);}
@keyframes xzdh {from {transform: rotate(0deg);} to {transform: rotate(180deg);}}
.box-wrap .box-body{display: flex;flex-wrap: nowrap;padding: 20px;height: calc(95% - 20px);}
.box-wrap .box-body .box-left{width: 480px;border: 1px solid #eee;margin-right: 10px;padding: 10px;}
.box-wrap .box-body .box-right{flex: 1;border: 1px solid #eee;padding: 10px;}
.box-wrap .box-left .gallery{position: relative;}
.box-wrap .box-left .gallery img{width: 100%;height: 400px;overflow: hidden;}
        
.box-wrap .box-left .rf-prev-btn,.box-wrap .box-left .rf-next-btn{user-select: none;position: absolute;z-index: 999;width: 20px;cursor: pointer;display: flex;justify-content: center;align-items: center;z-index: 999;}
.box-wrap .box-left .rf-prev-btn i,.box-wrap .box-left .rf-next-btn i{font-size: 28px;font-weight: 400;color: #fff;}
.box-wrap .box-left .rf-prev-btn{width: 35px;height: 35px; left: 3px;top: calc(50% - 17px);;border-radius: 50%; background-color: rgba(0, 0, 0, .2);}
.box-wrap .box-left .rf-next-btn{width: 35px;height: 35px; right: 3px;top: calc(50% - 17px);;border-radius: 50%; background-color: rgba(0, 0, 0, .2);}
.box-wrap .box-left .gallery .swiper-button-disabled i{color: #aaa;cursor:not-allowed;}

.box-wrap .box-left .thumbs{display: flex;justify-content: space-between;margin-top: 5px;}
.box-wrap .box-left .thumbs .thumbs-item{width: 80px;height: 60px;overflow: hidden;border:2px solid #fff;}
.box-wrap .box-left .thumbs img{width: 80px;height: 60px;overflow: hidden;}
.box-wrap .box-left .thumbs .swiper-slide-thumb-active{border:2px solid #0086f6;}
.box-wrap .box-left .thumbs .rf-left-btn,.box-wrap .box-left .rf-right-btn{user-select: none;background: #e8e8e8;font-weight: 500; width: 20px;cursor: pointer; display: flex;justify-content: center;align-items: center;}
.box-wrap .box-left .thumbs .rf-left-btn i,.box-wrap .box-left .rf-right-btn i{font-size: 28px;color: #ccc;}
.box-wrap .box-left .thumbs .rf-left-btn{border-radius: 5px 0 0 5px;}
.box-wrap .box-left .thumbs .rf-right-btn{border-radius: 0 5px 5px 0;}
.box-wrap .box-left .thumbs .rf-left-btn:hover,.box-wrap .box-left .rf-right-btn:hover{background: rgba(20,99,179,0.1);color: #fff;}
.box-wrap .box-left .thumbs .swiper-button-disabled i{color: #f5f5f5;cursor:not-allowed;}
        
.box-wrap .box-right{font-size: 13px;height: 100%;overflow: scroll;padding:0 10px 20px 10px;}
.box-wrap .box-right h3{font-size: 14px;border-bottom: 1px dashed #eee;padding: 5px;font-weight: 600;}
.box-wrap .box-right ul{margin-top: 10px;padding: 6px;}
.box-wrap .box-right ul li{float: left; width: 33%;margin: 5px 0;}
.box-wrap .box-right ul li .name{color: #69798c;}
.box-wrap .box-right .intro{margin: 10px 0;padding: 5px;}
.box-wrap .box-right .intro .tit{font-weight: 500;padding: 5px 0;font-size: 14px;}
.box-wrap .box-right .intro .bg{background: #f5f9ff;padding: 10px;border-radius: 5px;}
.box-wrap .box-right .intro .bg2{background: #FFE9D7;padding: 10px;border-radius: 5px;}
.box-wrap .box-right .intro .desc{line-height: 28px;font-size: 13px;}
.box-wrap .box-right .ts{line-height: 20px;padding: 20px 10px;font-size: 13px;color: #69798c;}
.box-wrap .box-right .ts span{color: #f60;}

.keeptop{position:fixed;top:0;z-index:9;}