.dryGoodsView {background-color: #f5f5ff;}
.breadcrumb { padding-bottom: 29px;}
.goods-box { padding: 0 20px; background: #FFFFFF;  border-radius: 6px; margin-bottom: 20px;}
.nav-box { height: 63px; align-items: center; flex-wrap: unset;}
.nav-box .left { width: calc(100% - 100px); align-items: center;}
.nav-box .left .tit {font-size: 20px;color: #333333; margin-right: 34px;}
.nav-box .left .nav { flex: 1; height: 30px; font-size: 14px; line-height: 30px; color: #666666;}
.nav-box .left .nav span { margin-right: 30px;position: relative;cursor: pointer;}
.nav-box .left .nav span.active { color: #4EADFF;}
.nav-box .left .nav span.active::after { content: '';width: 34px; height: 2px; background: #6FB9FF; position: absolute; left: 50%;margin-left: -17px;bottom: -6px;}
.nav-box .more { font-size: 14px;color: #666666; margin-left: 40px;}
.nav-box .more .icon { font-size: 12px;}
.list {}
.list .item { padding: 15px 20px; width: calc(50% - 10px);border: 1px solid #E8E8E8; border-radius: 6px;margin-bottom: 20px;}
.list .item:hover { background: #F3F3F5;}
.list .item img { width: 51px; height: 61px; object-fit: contain; margin-right: 15px;}
.list .item .text { flex: 1;}
.list .item .text .name { font-size: 18px; color: #333333; line-height: 30px;}
.list .item .text .desc { margin-top: 8px; font-size: 12px; color: #999999; line-height: 24px;}
.list .item .text .desc span {margin-right: 20px;}
.list .item .text .desc span:last-child {margin-right: 0;}
.recommend-list {}
.recommend-list .item {width: calc(33.33% - 13px);}
.recommend-list .item img { width: 40px;height: 48px;}
.recommend-list .item .text .name { font-size: 16px;line-height: 22px;}
.recommend-list .item .text .desc { line-height: 18px;margin-top: 6px;}

*::-webkit-scrollbar {/*滚动条整体样式*/ width: 0; height: 0;}
*::-webkit-scrollbar-thumb {/*滚动条里面小方块*/ border-radius: 0; -webkit-box-shadow: inset 0 0 0 rgba(0,0,0,0); background: rgba(0,0,0,0);}
*::-webkit-scrollbar-track {/*滚动条里面轨道*/ -webkit-box-shadow: inset 0 0 0 rgba(0,0,0,0); border-radius: 0; background: rgba(0,0,0,0);}
*::-webkit-scrollbar-corner { background-color: rgba(0,0,0,0); }
.menu-list{position: fixed;left: 205px;top: 50%;border-radius: 6px;box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.14);width: 96px;background: #fff;z-index: 999;} 
@media screen and (max-width: 767px) {  .banner .f-box{width:150px;right:2%;} }
.menu-list.m-bottom{bottom: 589px;top: auto;}
.menu-list li{width: 86px;margin: 0 auto;height: 40px;display: flex;align-items: center;justify-content: center;}
.menu-list li:not(:first-child){border-top: 1px solid #DCDCDC;}
.menu-list li a{color: #333;display: block;height: 100%;width: 100%;display: flex; align-items:center; justify-content:center}
.menu-list li:first-child{border-radius: 6px 6px 0 0;}
.menu-list li:last-child{border-radius: 0 0 6px 6px;}
.menu-list li.active{width: 100%;background-color: #39A6FF;}
.menu-list li.active a{color: #fff;}
.menu-list li:hover{background-color: #39A6FF;width: 100%;border-color: #39A6FF;cursor: pointer;}
.menu-list li:hover a{color: #fff;}
@media screen and (max-width:1219px){
  .menu-list{left: 20px;} 
}
@media screen and (max-width:991px){
  .menu-list{left: 5px;font-size: 12px;width: 60px;}
  .menu-list li{width: 50px;height: 30px;} 
}

.catlist-box .catlist { flex: 1; margin-right: 20px;}
.catlist-box .seach-box { width: 100%;}
.catlist-box .seach-box { border-radius: 6px; overflow: hidden;background-color: #fff;}
.catlist-box .seach-box .text {box-sizing:border-box;height: 44px;display: inline-block;width: calc(100% - 60px);padding : 0 12px}
.catlist-box .seach-box .text::placeholder {color: #AAAAAA;}
.catlist-box .seach-box .submit{display: inline-block;width: 126px;height: 44px;background-color: #39A6FF;color: #fff;text-align: center}
.catlist-box .nav-list { background: #FFFFFF; border-radius: 6px;padding: 15px; justify-content: flex-start; margin-top: 20px;}
.catlist-box .nav-list .tit { font-size: 20px;color: #333333; line-height: 30px;margin-right: 33px;}
.catlist-box .nav-list .nav { flex: 1;} 
.catlist-box .list-box { margin-top: 20px; padding: 15px 20px 20px; background: #FFFFFF; border-radius: 6px;}
.catlist-box .list-box .taglist { }
.catlist-box .list-box .taglist a { display: inline-block; text-align: center; min-width: 37px; font-size: 14px;color: #666666;line-height: 24px; margin-right: 20px;}
.catlist-box .list-box .taglist a.active { color: #4EADFF;position: relative;}
.catlist-box .list-box .taglist a.active::after { content: '';width: 37px; height: 2px; background: #6FB9FF; position: absolute; left: 50%;margin-left: -18px;bottom: 0;}
.catlist-box .list-box .recommend-list { margin-top: 12px;}
.catlist-box .list-box .recommend-list .item { width: calc(50% - 10px);} 
.catlist-box .right { width: 320px;}
.catlist-box .right .r-item { background: #FFFFFF; border-radius: 6px; margin-bottom: 20px;}
.course-title { padding: 20px; font-size: 16px;color: #333333;line-height: 18px; align-items: center;}
.course-title div { font-size: 16px;color: #333333;line-height: 18px; align-items: center;justify-content: flex-start; font-weight: bold;}
.course-title div img { margin-right: 10px;}
.course-title a { font-size: 12px;color: #999999;line-height: 18px;}
.course-title a .icon { font-size: 12px;}

.curriculum-box { padding: 0 20px;background-color: #fff}
.curriculum-box .item{width:100%;cursor: pointer;padding-bottom: 20px;border: unset;position: relative;}
.curriculum-box .item .img-box{position: relative;border-radius: 6px;overflow: hidden}
.curriculum-box .item .img-box img{display: block;width: 100%}
.curriculum-box .item .img-box .bg{display: flex; align-items:center; justify-content:center ;background-color: rgba(0,0,0,0.4);opacity: 0;position: absolute;top: 0;bottom: 0;left: 0;right: 0;transition: all .4s}
.curriculum-box .item .img-box .bg .icon{color: #fff;font-size: 46px;}
.curriculum-box .item .img-box:hover .bg{opacity: 1;}
.curriculum-box .item .img-box img{transition: all .4s}
.curriculum-box .item .img-box:hover img{transform: scale(1.1);}
.curriculum-box .item .img-box .tag{position: absolute;top: 0;left: 0;display: inline-block;width: 70px;height: 28px;line-height: 26px;text-align: center;color: #fff;font-size: 12px;border-radius: 6px;border-bottom-left-radius: 0;border-top-left-radius: 0}
.curriculum-box .item .img-box .tag.free{ background-image: linear-gradient(#6ABCFF, #0487F2);}
.curriculum-box .item .img-box .tag.member{ background-image: linear-gradient(#FFA365,#FF7517);}
.curriculum-box .cont-box{padding: 0 9px;box-sizing: border-box}
.curriculum-box .cont-box .title{margin-top: 13px;transition: all .4s;display: block; font-size: 14px;color: #333333;}
.curriculum-box .cont-box .title a{transition: all .4s; display: inline-block; white-space: nowrap;max-width:100%; overflow: hidden; text-overflow:ellipsis;}
.curriculum-box .cont-box .title:hover a{color:#39A6FF }
.curriculum-box .cont-box .tag-box.title a{max-width: calc(100% - 39px)}
.curriculum-box .cont-box .title .tag{left:5px;font-size:12px;position:relative;top:-5px;width: 34px;height: 19px;display: inline-block;text-align: center;line-height: 17px;border-radius: 2px}
.curriculum-box .cont-box .bot{margin-top: 8px;color: #999;font-size: 12px} 

.catlist-box .giftbag { padding: 30px 30px; text-align: center;}
.catlist-box .giftbag .code { width: 197px;height: 194px;}
.catlist-box .giftbag .name { font-size: 16px; color: #333333; line-height: 26px; margin-top: 5px;}
.catlist-box .giftbag .bot { padding-left: 30px; text-align: left; padding-top: 9px;}
.catlist-box .giftbag .bot p { margin-top: 12px; font-size: 14px;line-height: 22px;}
.catlist-box .giftbag .bot p img { margin-right: 8px;}
.catlist-box .giftbag .bot p span { color: #DD2244;}

.catlist-box .r-item.service {padding: 20px;box-sizing: border-box}
.catlist-box .r-item.service h1 {font-size: 16px; line-height: 22px; font-weight: bold; margin-bottom: 18px;justify-content: flex-start;align-items: center;}
.catlist-box .r-item.service h1 img {margin-right: 13px;}
.catlist-box .r-item.service .list{box-sizing:border-box;cursor:pointer;text-align: center;height: 42px;line-height: 40px;background-color: #F5F5F5;border-radius: 10px;margin-bottom: 10px}
.catlist-box .r-item.service .list a{color: #666;transition: all .4s;display: flex; align-items:center; justify-content:left; padding-left: 22px; border-radius: 10px;box-sizing:border-box;border: 1px solid transparent;}
.catlist-box .r-item.service .list:hover a{color: #39a6ff;border: 1px solid #39a6ff;border-radius: 10px;box-sizing:border-box;}
.catlist-box .r-item.service .list a img{display: inline-block;margin-right: 9px}
.catlist-box .r-item.service .list .active{color: #39a6ff;border: 1px solid #39a6ff;}

.detail-box .detail { flex: 1; margin-right: 20px;}
.detail-box .detail .info-box { padding: 20px; background: #FFFFFF; border-radius: 6px;}
.detail-box .detail .info-box .info { }
.detail-box .detail .info-box .info .left { }
.detail-box .detail .info-box .info .left img { width: 49px; height: 61px; margin-right: 16px;}
.detail-box .detail .info-box .info .left .text .name { font-size: 20px; color: #333333; line-height: 32px; font-weight: bold;}
.detail-box .detail .info-box .info .left .text .desp { margin-top: 3px; font-size: 12px; color: #999999; line-height: 22px;}
.detail-box .detail .info-box .info .down { margin-top: 10px; width: 110px; height: 40px; background: #39A6FF; box-shadow: 0px 7px 20px 0px rgba(66,170,255,0.4000); border-radius: 20px;font-size: 14px; color: #FFFFFF; line-height: 40px; text-align: center; }

.detail-box .detail .info-box .desc { margin-top: 25px; font-size: 14px;color: #666666;line-height: 24px;}
.detail-box .detail .info-box .bot { margin-top: 24px;}
.detail-box .detail .info-box .bot span { font-size: 14px;color: #666666;line-height: 20px;}
.detail-box .detail .info-box .bot button { margin-left: 20px; padding: 0 10px; height: 26px; background: #FF7517; border-radius: 13px;border: none;font-size: 12px;color: #FFFFFF;line-height: 20px;}
.detail-box .detail .info-box .bot button span { font-size: 14px;color: #FFFFFF;}

.detail-box .detail .list-box { margin-top: 20px; background: #FFFFFF; border-radius: 6px;padding: 0 20px;}
.detail-box .detail .title-box { padding: 18px 0; justify-content: flex-start;font-size: 16px;color: #333333; font-weight: bold;}
.detail-box .detail .title-box img { margin-right: 10px;} 
.detail-box .detail .recommend-list .item { width: calc(50% - 10px);} 

.detail-box .service { margin-top: 20px; background: #FFFFFF; border-radius: 6px;padding: 0 20px;}
.detail-box .service h1 { font-size: 16px; line-height: 22px; font-weight: bold; padding: 18px 0;justify-content: flex-start;align-items: center;}
.detail-box .service h1 img { margin-right: 13px;}
.detail-box .service .slist .item { padding: 30px; border: 1px solid #EEEEEE; border-radius: 6px; width: calc(25% - 15px); text-align: center; margin-bottom: 20px;}
.detail-box .service .slist .item img{ max-width: 100%;}
.detail-box .service .slist .item p { margin-top: 25px; font-size: 16px;color: #333333;line-height: 1;}
@media screen and (max-width: 1023px) { 
  .detail-box .service .slist .item { width: calc(50% - 10px);}
}

.detail-box .right { width: 320px;}
.detail-box .right .r-item { background: #FFFFFF; border-radius: 6px; margin-bottom: 20px;}
.detail-box .right .userbox { padding: 20px 0 15px; background-image: url(../image/drygoods/user-bg.png);background-size: 100% 100%; text-align: center;}
.detail-box .right .userbox .avatar {width: 80px; height: 80px; border-radius: 50%;}
.detail-box .right .userbox .name {font-size: 18px;color: #333333; line-height: 32px; margin-top: 3px;}
.detail-box .right .userbox .tab { box-sizing: border-box; margin-top: 9px; height: 18px; background: url(../image/icon/userCenter/icon_vip.png) no-repeat; background-size: 12px 10px; background-position: 4px 3px; display: inline-block; padding: 2px 4px 2px 19px; border-radius: 9px; border: 1px solid #FF7517; font-size: 12px; line-height: 1; color: #FF7517;}
.detail-box .right .userbox .tab.gray{-webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: gray;}
.detail-box .right .userbox .tab.try{ background: none;padding-left: 4px;}
.detail-box .right .userbox .score {font-size: 14px;color: #333333;line-height: 24px; margin-top: 8px;}
 
.mySwiper { flex: 1; height: 100%; overflow: hidden;}
.swiper-slide { width: auto; max-width: 500px; height: 30px; line-height: 30px; cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
/* .swiper-slide-active {color: #6FB9FF;}*/
.swiper-slide.active {color: #6FB9FF;}
.swiper-slide.active a {color: #6FB9FF;}
.swiper-slide.active::after { content: '';width: 34px; height: 2px; background: #6FB9FF; position: absolute; left: 50%;margin-left: -17px;bottom: 0;} 
.swiper-button-prev { display: none; width: 23px; height: 20px; background: #39A6FF; border-radius: 4px; line-height: 20px;position: relative; top: 0; left: 0; margin-top: 5px; margin-right: 20px; text-align: center; z-index: 1;}
.swiper-button-prev::after { font-size: 12px; color: #FFFFFF;}
.swiper-button-next { width: 23px; height: 20px; background: #39A6FF; border-radius: 4px; line-height: 20px;position: relative; top: 0; right: 0; margin-top: 5px; margin-left: 20px; text-align: center; z-index: 1;}
.swiper-button-next::after { font-size: 12px; color: #FFFFFF;}

/*.list-box .list { display: none;}*/
.list-box .list1 { display: block;}