@import url("../common/base.css?version_tmp=5");


.details-container {
    padding-bottom: 55px;
    overflow: hidden;
}



.banner-wrap {
    margin: 0;
}
.banner-wrap .swiper-box {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.banner-wrap .banner-list {
    display: flex;
    align-items: center;
}
.banner-wrap .swiper-slide {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    position: relative;
}
.banner-wrap .swiper-slide .img-inner {
    width: 100vw;
    height: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
}
.banner-wrap .swiper-slide .img-inner img {
    max-width: 100vw;
    max-height: 100vw;
}
.banner-wrap .swiper-pagination {
    position: absolute;
    bottom: 10px;
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    z-index: 10;
    border-radius: 10px;
    padding: 1px 12px 2px 12px;
    letter-spacing: -1px;
    left: 50%;
    margin-left: -22px;
}
.banner-wrap .swiper-pagination .swiper-pagination-current, .banner-wrap .swiper-pagination-total {
    color: #fff;
}
.swiper-close-btn {
    display: none;
    position: absolute;
    z-index: 1210;
    top: 16px;
    left: 0;
    padding: 10px;
}
.swiper-close-btn i {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: rgba(153, 153, 153, .3);
    font-size: 20px;
    color: #fff;
}
.banner-wrap.fixed-banner {
    position: fixed;
    top: 0;
    background: #000;
    width: 100%;
    height: 100%;
    z-index: 1200;
    display: flex;
    align-items: center;
    margin: 0;
    max-width: 768px;
}
.banner-wrap.fixed-banner .swiper-close-btn {
    display: flex;
}
.banner-wrap.fixed-banner .swiper-pagination {
    position: absolute;
    bottom: 15px;
    color: #fff;
    z-index: 100;
    letter-spacing: -1px;
    left: 50%;
    margin-left: -22px;
    background: #000;
    font-size: 14px;
}
.banner-wrap.fixed-banner .swiper-box {
    overflow: visible;
    position: static;
}




.goods-top .goods-info {
    padding: 15px;
    background: #fff;
    margin-bottom: 10px;
}
.goods-top .goods-info .goods-title {
    font-size: 18px;
    line-height: 27px;
    text-align: left;
    color: #333333;
    word-wrap: break-word;
    margin-bottom: 10px;
}
.goods-top .goods-info .goods-title > h1 {
    font-size: 18px;
    line-height: 27px;
    text-align: left;
    color: #333333;
    word-wrap: break-word;
}
.goods-top .goods-info .goods-price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.goods-top .goods-info .goods-price-row .goods-price {
    align-items: center;
    display: flex;
}
.goods-top .goods-info .goods-price-row .goods-price .span1 {
    font-size: 12px;
    color: #999;
}
.goods-top .goods-info .goods-price-row .goods-price .span2 {
    font-size: 18px;
    color: #E64545;
}
.goods-top .goods-info .goods-price-row .g-p-r-right {
    display: flex;
    align-items: center;
    font-size: 12px;
}
.goods-top .goods-info .goods-price-row .g-p-r-right .goods-time {
    letter-spacing: 0.5px;
    margin-right: 20px;
}
.goods-top .goods-info .goods-price-row .g-p-r-right .goods-look {
    display: flex;
    align-items: center;
}
.goods-top .goods-info .goods-price-row .g-p-r-right .goods-look > i {
    font-size: 16px;
    color: #666;
    margin-right: 5px;
}
.goods-top .rank-info {
    background: #fff;
    margin-bottom: 10px;
    padding: 12px 15px;
    color: #f60;
}



/* 已选 规格（型号）和属性 */
.spec-and-attr {
    margin-bottom: 10px;
    min-height: 68px;
    background-color: #fff;
    display: flex;
    align-items: center;
    padding: 13px 0;
}
.spec-and-attr .spec-and-attr-inner {
    overflow: hidden;
    display: flex;
    align-items: center;
    flex: 1;
}
.spec-and-attr .spec-and-attr-inner .inner-left {
    padding: 0 15px;
    display: flex;
    align-items: center;
}
.spec-and-attr .spec-and-attr-inner .inner-left .left-inner .icon-purchase {
    display: flex;
    justify-content: center;
    font-size: 20px;
    font-weight: 400;
    line-height: 20px;
    color: #FF9500;
}
.spec-and-attr .spec-and-attr-inner .inner-left .left-inner .has-choosed {
    margin-top: 2px;
    display: flex;
    justify-content: center;
    font-size: 14px;
    font-weight: 400;
    color: #999999;
}
.spec-and-attr .spec-and-attr-inner .inner-line {
    height: 42px;
    border-left: solid 1px #EDF0F2;
}
.spec-and-attr .spec-and-attr-inner .inner-right {
    flex: 1;
    font-size: 14px;
    font-weight: 400;
    color: #333333;
    margin-left: 18px;
    overflow: hidden;
}
.spec-and-attr .spec-and-attr-inner .inner-right .goods-spec {
    display: flex;
}
.spec-and-attr .spec-and-attr-inner .inner-right .goods-spec .spec-desc {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-all;
}
.spec-and-attr .spec-and-attr-inner .inner-right .goods-attr {
    display: flex;
}
.spec-and-attr .spec-and-attr-inner .inner-right .goods-attr .attr-desc {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.spec-and-attr .i-right {
    margin-right: 15px;
}
.spec-and-attr .i-right .icon-app-right {
    font-size: 16px;
    line-height: 16px;
    color: #999999;
    vertical-align: -3px;
}



/* 商品参数 商品包装 注册信息 */
.goods-four-keywords {
    background-color: #fff;
    margin-bottom: 10px;
}
.goods-four-keywords .goods-one-keywords {
    border-bottom: solid 1px #EDF0F2;
    cursor: pointer;
    height: 45px;
    background-color: #FFFFFF;
    display: flex;
    align-items: center;
    margin-left: 15px;
}
.goods-four-keywords .goods-one-keywords .param-left {
    width: 71px;
    margin-right: 5px;
    font-size: 14px;
    line-height: 21px;
    text-align: left;
    color: #999999;
}
.goods-four-keywords .goods-one-keywords .param-right {
    flex: 1;
    display: flex;
    justify-content: space-between;
    padding-right: 15px;
}
.goods-four-keywords .goods-one-keywords .param-right .param-right-word {
    height: 21px;
    font-size: 14px;
    line-height: 21px;
    text-align: left;
    color: #333333;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-all;
}
.goods-four-keywords .goods-one-keywords .param-right .i-right {
    display: flex;
    align-items: center;
}
.goods-four-keywords .goods-one-keywords .param-right .i-right .icon-app-right {
    font-size: 16px;
    line-height: 16px;
    color: #999999;
    position: relative;
    top: -1px;
}
.goods-four-keywords .goods-one-keywords .param-right.after-sale-im {
    justify-content: flex-end;
}
.goods-four-keywords .goods-one-keywords .param-right.after-sale-im .im-enter {
    color: #09F;
}
.goods-four-keywords div:last-child {
    border: none;
}


/* 订货号/货期 */
.goods-attrs {
    padding: 0 15px;
    background: #fff;
    margin-bottom: 10px;
}
.goods-attrs .attr {
    height: 45px;
    display: flex;
    align-items: center;
    border-bottom: solid 1px #EDF0F2;
}
.goods-attrs .attr:last-of-type {
    border-bottom: none;
}
.goods-attrs .attr .attr-left {
    min-width: 71px;
    margin-right: 5px;
    font-size: 14px;
    color: #999;
}
.goods-attrs .attr .attr-right {
    font-size: 14px;
    flex: 1;
    min-width: 0;
}


/* 商品介绍 */
.goods-intro {
    background: #fff;
    margin-bottom: 10px;
}
.goods-intro .intro-tab {
    height: 45px;
    display: flex;
    justify-content: center;
    border-bottom: solid 1px #EDF0F2;
}
.goods-intro .intro-tab .tab {
    position: relative;
    font-size: 14px;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}
.goods-intro .intro-tab .tab.active {
    color: #09f;
}
.goods-intro .intro-tab .tab.active::after {
    content: "";
    display: block;
    width: 56px;
    height: 2px;
    background: #09f;
    position: absolute;
    bottom: 0;
    left: calc(50% - 28px);
}
.goods-intro .goods-content {
    display: none;
    padding: 0 15px 15px;
    overflow: hidden;
}
.goods-intro .goods-content .box {
    padding: 15px 0 0;
}
.goods-intro .goods-content .box:nth-child(2n) {
    border-top: solid 1px #EDF0F2;
    margin-top: 15px;
}
.goods-intro .goods-content .box .s-title {
    margin-bottom: 10px;
}
.goods-intro .goods-content .box .font {
    overflow: hidden;
}
.goods-intro .goods-content .box .font > p {
    line-height: 28px;
    margin: 0;
    padding: 0;
}
.goods-intro .goods-content .box .font .avc-span {
    display: block;
    margin-bottom: 10px;
}
.goods-intro .goods-content .ai-tip {
    padding: 10px;
    border-radius: 3px;
    background: linear-gradient(-90deg, #DCEAFF, #F2FAFF);
    display: flex;
    margin-top: 15px;
}
.goods-intro .goods-content .ai-tip > img {
    width: 24px;
    height: 24px;
    margin-right: 10px;
}
.goods-intro .goods-content .ai-tip > p {
    margin: 0;
    font-size: 12px;
    color: #025;
    letter-spacing: 1px;
}
.goods-intro .jingxuan-pro {
    display: none;
}
.goods-intro .active {
    display: block;
}
.goods-intro .jingxuan-pro .pro-list .pro-item {
    display: flex;
    padding: 15px;
    border-bottom: solid 1px #EDEFF2;
}
.goods-intro .jingxuan-pro .pro-list .pro-item:last-of-type {
    border-bottom: none;
}
.goods-intro .jingxuan-pro .pro-list .pro-item > img {
    width: 70px;
    height: 70px;
    margin-right: 10px;
}
.goods-intro .jingxuan-pro .pro-list .pro-item .pro-right {
    font-size: 12px;
    flex: 1;
    min-width: 0;
}
.goods-intro .jingxuan-pro .pro-list .pro-item .pro-right .pro-title {
    margin-bottom: 5px;
}
.goods-intro .jingxuan-pro .pro-list .pro-item .pro-right .pro-price {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.goods-intro .jingxuan-pro .pro-list .pro-item .pro-right .pro-price .price {
    color: #999;
}
.goods-intro .jingxuan-pro .pro-list .pro-item .pro-right .pro-price .price font {
    color: #E64545;
}
.goods-intro .jingxuan-pro .pro-list .pro-item .pro-right .pro-price .get-price {
    width: 78px;
    height: 28px;
    line-height: 28px;
    background-color: #09F;
    border-radius: 3px;
    font-size: 12px;
    text-align: center;
    color: #fff;
}


/* 相关推荐 */
.related {
    background: #fff;
    padding: 15px 12.5px;
    margin-bottom: 10px;
}
.related .title {
    font-size: 14px;
    padding: 0 10px;
}
.related .single-row {
    padding-top: 10px;
    margin-bottom: -5px;
}
.related .single-row .item {
    box-sizing: border-box;
    display: block;
    width: 100%;
    height: 34px;
    border: solid 1px #EDF0F2;
    background: #fff;
    border-radius: 3px;
    font-size: 12px;
    line-height: 34px;
    margin: 0 2.5px 5px;
    padding: 0 10px;
}
.related .list {
    padding-top: 10px;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: -5px;
}
.related .list .item {
    box-sizing: border-box;
    display: block;
    width: calc(33.32% - 5px);
    height: 34px;
    border: solid 1px #EDF0F2;
    background: #fff;
    border-radius: 3px;
    font-size: 12px;
    line-height: 34px;
    text-align: center;
    margin: 0 2.5px 5px;
    padding: 0 10px;
}


/* 黑色遮罩层 */
.fullpage-mask {
    display: none;
    max-width: 768px;
    min-width: 320px;
    position: fixed;
    z-index: 1200;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
}


/* 参数蒙层 */
.goods-common-prop {
    display: none;
    max-width: 768px;
    min-width: 320px;
    border-radius: 12px 12px 0 0;
    width: 100%;
    height: 482px;
    position: fixed;
    z-index: 1220;
    bottom: 0;
    background-color: #fff;
    padding-top: 15px;
}
.goods-common-prop .prop-title {
    font-size: 18px;
    line-height: 27px;
    text-align: center;
    color: #333;
    position: relative;
}
.goods-common-prop .prop-content {
    margin-top: 15px;
    padding-bottom: 100px;
    height: 422px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
.goods-common-prop .prop-content .prop-oneline {
    min-height: 45px;
    padding-top: 11px;
    padding-bottom: 11px;
    padding-right: 15px;
    display: flex;
    margin-left: 15px;
    border-bottom: solid 1px #EDF0F2;
}
.goods-common-prop .prop-content .prop-oneline .prop-left {
    width: 90px;
    font-size: 14px;
    line-height: 21px;
    color: #999999;
    margin-right: 16px;
}
.goods-common-prop .prop-content .prop-oneline .prop-right {
    flex: 1;
    font-size: 14px;
    line-height: 21px;
    color: #333333;
    word-break: break-all;
}
.goods-common-prop .prop-close-button {
    width: 100%;
    position: absolute;
    z-index: 1240;
    bottom: 0;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 10px;
    background-color: #fff;
    bottom: constant(safe-area-inset-bottom);
    bottom: env(safe-area-inset-bottom);
}
.goods-common-prop .prop-close-button .close-button {
    padding-top: 11px;
    width: 100%;
    height: 45px;
    background-color: #0099FF;
    border-radius: 3px;
    font-size: 15px;
    line-height: 27px;
    text-align: center;
    color: #FFFFFF;
}


/* 规格和属性蒙层 */
.spec-and-attr-prop {
    display: none;
    max-width: 768px;
    min-width: 320px;
    border-radius: 12px 12px 0 0;
    width: 100%;
    height: 482px;
    position: fixed;
    z-index: 1220;
    bottom: 0;
    background-color: #fff;
    bottom: constant(safe-area-inset-bottom);
    bottom: env(safe-area-inset-bottom);
}
.spec-and-attr-prop .prop-fork {
    padding-top: 10px;
    display: flex;
    justify-content: flex-end;
}
.spec-and-attr-prop .prop-fork .icon-delete {
    font-size: 24px;
    font-weight: 400;
    color: #666666;
    margin-right: 10px;
}
.spec-and-attr-prop .prop-goods-info {
    padding: 10px 15px 15px;
    display: flex;
}
.spec-and-attr-prop .prop-goods-info .prop-goods-img {
    background-color: #fff;
    border: solid 1px #CED2D9;
    margin-right: 10px;
    width: 100px;
    min-width: 100px;
    height: 100px;
    position: relative;
}
.spec-and-attr-prop .prop-goods-info .prop-goods-img img {
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}
.spec-and-attr-prop .prop-goods-info .prop-goods-desc {
    flex: 1;
}
.spec-and-attr-prop .prop-goods-info .prop-goods-desc .prop-goods-name {
    font-size: 14px;
    font-weight: 400;
    color: #333333;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
}
.spec-and-attr-prop .prop-goods-info .prop-goods-desc .prop-goods-order {
    margin-top: 5px;
    font-size: 12px;
    font-weight: 400;
    color: #999999;
}
.spec-and-attr-prop .prop-goods-info .prop-goods-desc .prop-market-price {
    font-size: 12px;
    font-weight: 400;
    color: #999;
}
.spec-and-attr-prop .prop-goods-info .prop-goods-desc .prop-market-price font {
    color: #E64545;
}
.spec-and-attr-prop .prop-goods-info .prop-goods-desc .prop-not-onsale {
    font-size: 14px;
    color: #E64545;
    margin-top: 5px;
}
.spec-and-attr-prop .prop-goods-main-body {
    height: 323px;
    padding-bottom: 100px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
.spec-and-attr-prop .prop-goods-main-body .spec-attr-line-wrapper .spec-attr-line {
    border-bottom: solid 1px #edf0f2;
    margin: 0 15px 20px;
    padding: 10px 0 8px;
}
.spec-and-attr-prop .prop-goods-main-body .spec-attr-line-wrapper .spec-attr-line:last-child {
    border-bottom: none;
}
.spec-and-attr-prop .prop-goods-main-body .spec-attr-line-wrapper .spec-attr-line .sa-title {
    font-size: 14px;
    color: #333333;
    margin-bottom: 10px;
}
.spec-and-attr-prop .prop-goods-main-body .spec-attr-line-wrapper .spec-attr-line .sa-body {
    display: flex;
    justify-content: flex-start;
    text-align: center;
    flex-wrap: wrap;
}
.spec-and-attr-prop .prop-goods-main-body .spec-attr-line-wrapper .spec-attr-line .sa-body .sa-one-wrapper {
    padding: 0 12px 12px 0;
}
.spec-and-attr-prop .prop-goods-main-body .spec-attr-line-wrapper .spec-attr-line .sa-body .sa-one-wrapper .sa-one {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 15px;
    border: solid 1px #CED3D9;
    border-radius: 3px;
    font-size: 14px;
    color: #333333;
    word-break: break-all;
}
.spec-and-attr-prop .prop-goods-main-body .spec-attr-line-wrapper .spec-attr-line .sa-body .sa-one-wrapper .sa-one.disabled {
    border: dashed 1px #CED3D9;
    color: #CED3D9;
    pointer-events: none;
}
.spec-and-attr-prop .prop-goods-main-body .spec-attr-line-wrapper .spec-attr-line .sa-body .sa-one-wrapper .sa-one.active {
    border: solid 1px #FF9500;
    color: #FF9500;
    pointer-events: none;
}
.spec-and-attr-prop .prop-common-button {
    width: 100%;
    position: absolute;
    bottom: 0;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #fff;
}
.spec-and-attr-prop .prop-common-button .single-button {
    padding-top: 11px;
    width: 100%;
    height: 45px;
    background-color: #FF9500;
    border-radius: 3px;
    font-size: 15px;
    line-height: 27px;
    text-align: center;
    color: #FFFFFF;
}


/* 商品未上架弹层 */
.not-onsale-modal {
    display: none;
    max-width: 768px;
    min-width: 320px;
    border-radius: 12px 12px 0 0;
    width: 100%;
    position: fixed;
    z-index: 1220;
    bottom: 0;
    background-color: #F5F7FA;
    bottom: constant(safe-area-inset-bottom);
    bottom: env(safe-area-inset-bottom);
}
.not-onsale-modal-title {
    position: relative;
    height: 62px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.not-onsale-modal-title span {
    font-size: 18px;
}
.not-onsale-modal-title .modal-close {
    font-size: 0;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}
.not-onsale-modal-title .modal-close .vd-icon {
    font-size: 24px;
    color: #666;
}
.not-onsale-modal .not-onsale-main {
    padding-bottom: 10px;
}
.not-onsale-main .not-onsale-scroll {
    height: 100%;
    overflow-y: scroll;
}

/* 表单 */
.not-onsale-main .common-form-wrapper {
	padding: 0 10px;
}
.not-onsale-main .common-form-wrapper .common-form {
	border-radius: 3px;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
	background-color: #fff;
	padding: 0 0 25px;
	position: relative;
	z-index: 1;
}
.not-onsale-main .common-form-wrapper .common-form .sku-info-wrapper {
	padding: 20px 25px 0;
}
.not-onsale-main .common-form-wrapper .common-form .sku-info-wrapper .sku-info {
	padding-bottom: 10px;
	display: flex;
}
.not-onsale-main .sku-info .si-left {
	min-width: 80px;
	width: 80px;
	height: 80px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: 10px;
}
.not-onsale-main .sku-info .si-left img {
	max-width: 100%;
	max-height: 100%;
}
.not-onsale-main .sku-info .si-right {
	flex: 1;
	overflow: hidden;
}
.not-onsale-main .sku-info .si-right .sku-name {
	color: #000;
}
.not-onsale-main .sku-info .si-right .sku-desc {
	font-size: 12px;
	color: #999;
}
.not-onsale-main .sku-info .si-right .not-onsale-tip {
	font-size: 14px;
	color: #E64545;
	margin-top: 5px;
}

/* 输入框 */
.not-onsale-main .common-input-wrapper {
	padding: 0 25px;
}
.not-onsale-main .common-input-wrapper .common-input {
	display: flex;
	align-items: center;
	height: 50px;
	border-bottom: solid 1px #DAE0E6;
}
.not-onsale-main .common-input-wrapper .common-input .ci-left {
	min-width: 56px;
	margin-right: 15px;
}
.not-onsale-main .common-input-wrapper .common-input .ci-right {
	flex: 1;
    height: 100%;
}
.not-onsale-main .common-input-wrapper .common-input .ci-right input {
	width: 100%;
    height: 100%;
    border: none;
}
.not-onsale-main .common-input-wrapper .common-input .ci-right input::placeholder {
	color: #C2C6CC;
}

/* 您想了解 */
.not-onsale-main .common-choice {
	padding: 10px 22.5px 5px;
}
.not-onsale-main .common-choice .title {
	padding: 0 2.5px;
}
.not-onsale-main .common-choice .cc-ul {
	margin-top: 10px;
	display: flex;
	flex-wrap: wrap;
}
.not-onsale-main .common-choice .cc-ul .cc-li {
	border-radius: 3px;
	margin: 0 2.5px 5px;
	font-size: 12px;
	padding: 10px 13px;
	border: solid 1px #F5F7FA;
	background-color: #F5F7FA;
}
.not-onsale-main .common-choice .cc-ul .cc-li.active {
	background-color: #FFF0E5;
	border: solid 1px #FF9900;
	color: #FF9900;
}
/* 提交按钮 */
.not-onsale-main .common-btn-wrapper {
	margin-top: 20px;
	padding: 0 25px;
}
.not-onsale-main .common-btn-wrapper .common-btn {
	border-radius: 3px;
	background-color: #f90;
	width: 100%;
	height: 45px;
	line-height: 45px;
	text-align: center;
	color: #fff;
	font-size: 16px;
}




.fade-enter-active, .fade-leave-active {
    transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.fade-enter, .fade-leave-to {
    opacity: 0;
}

.slide-enter-active, .slide-leave-active {
    transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.slide-enter, .slide-leave-to {
    transform: translate3d(0, 482px, 0);
}