body {background-color: #f2f2f2;}
.warp {margin-top: 20px;}
.btn:hover,
.btn:active,
.btn:focus,
.btn:active:focus {background-color: #ff5050; outline: none; border: 0;}

.breadcrumb {background-color: #fff;}
.detail {display: flex; padding: 20px; background: #fff; border-radius: 4px;}
.product-image {border-radius: 8px; object-fit: cover; overflow: hidden;}
.detail-info {padding: 0 20px;}
.p-title {margin: 0 0 5px 0; font-size: 22px; font-weight: bold; color: #353537;}
.p-subtitle {margin: 0 0 5px 0; font-size: 13px; color: #666;}
.p-detail {display: flex; align-items: center; gap: 20px; min-height: 60px;}
.price-box {display: flex; align-items: baseline; padding-bottom: 5px;}
.price-box > span {line-height: 1;}
.currency {color: #ff0000; font-size: 14px; font-weight: bold;}
.price {padding: 0 5px; color: #ff0000; font-size: 22px; font-weight: bold;}
.annual {color: #999; font-size: 14px;}
.expire {padding-left: 10px;}

/* end-time */
.end-time {padding: 0 8px;}
.end-time-label {height: 18px;}
.end-time-label > span {display: inline-block; padding: 0 5px; background-color: #e87874; color: #fff; font-size: 12px; border-radius: 4px;}
.end-in {display: flex; align-items: center; gap: 5px; padding: 6px 0; font-size: 13px;}
.end-in > .number {display: inline-block; padding: 2px 5px; background-color: #dd8658; color: #fff; border-radius: 4px;}
.end-in > .esymbol {color: #999;}

.p-btn-box {display: flex; flex-direction: column; align-items: flex-start;}
.tip {margin-bottom: 1px; padding: 0 10px; border: 1px solid #e8afb6; background-color: #f2dede; border-radius: 3px; font-size: 12px; color: #ae0e0b;}
.btn-buy {min-width: 240px; padding: 4px 0; background-color: #ff3333; font-weight: bold; font-size: 18px; color: #fff; border: 0;}
.btn-buy[disabled] {background-color: #888;}
.p-others {display: flex; align-items: center; gap: 50px; margin-top: 16px;}
.p-others > li {display: inline-flex; align-items: center; gap: 5px;}
.p-others > li > span {font-size: 13px; color: #999;}

.description {margin-top: 20px; padding: 20px; background: #fff; border-radius: 4px;}
.chapter + .chapter {margin-top: 20px;}
.chapter > header {padding-bottom: 20px; border-bottom: 1px solid #eee; background: none;}
.chapter > header > h4 {display: inline-block; min-width: 180px; margin: 0; padding: 8px; background-color: #f6c41c; color: #fff; text-align: center; font-size: 14px; font-weight: bold; border-radius: 4px;}

.content-item {line-height: 44px;}
.content-item > span {font-size: 14px; color: #51515f;}
.btn-entry {margin-left: 10px; padding: 4px 16px; background-color: #ff3333; border-radius: 20px; color: #fff; border: 0;}
.content > p {margin: 16px 0 0; font-size: 14px; color: #51515f;}

@media screen and (max-width: 768px) {
    .price-box {margin-bottom: 16px;}
    .p-btn-box {display: flex; flex-direction: column; align-items: stretch;}
    .p-others {flex-wrap: wrap; gap: 10px;}
    .p-others > li {width: 100%;}
    .content-item > a {display: block; width: fit-content;}
    .chapter + .chapter {margin-top: 50px;}
    .content-item {line-height: 2;}
    .web-button .btn:hover,
    .web-button .btn:active,
    .web-button .btn:focus,
    .web-button .btn:active:focus {background-color: #ff8431; outline: none; border: 0;}
    .web-button .btn-buy[disabled] {background-color: #888;}
    .web-button .btn,
    .web-button .loader-inner {width: 70%;}
    .web-button .cm_pm .loader-inner {top: 0;}
    .web-button .tip {position: absolute; bottom: 60px; left: 0; width: 90%; margin: 0 5px;}
}