/* Tailer Form */
@charset "UTF-8";

.tailer-form {
    padding: 1rem;
    margin: 2rem 0rem;
    background-color: #f8f8f8;
}

.tailer-form .box-title {
    padding: .5rem 0rem;
    text-align: center;
}

.tailer-form .field-icon-box .field-icon {
    font-size: 1.25rem;
}

.tailer-form #tailer_requirement {
    width: 100%;
}

.tailer-form .btn-box {
    text-align: center;
}

.tailer-form .btn-box button {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: inline-block;
    color: #fff;
    padding: .75rem 5rem;
    margin: 1rem auto;
    border-radius: 1.5rem;
    background-color: #eb6100;
}

.tailer-form .btn-box button.doing {
    background-color: #b8b7b7;
    color: #f9f9f9;
}

/* Prod Show */
.prod-show {
    display: block;
}

.prod-show img {
    display: inline-block;
    width: 100%;
    height: auto;
    vertical-align: middle;
}

/* Prod Header */
.prod-header {
    padding: 2rem 0rem;
    color: #8c5701;
    background-color: #fcf9f4;
}

.prod-header .prod-title {
    padding: 1rem 0rem;
}

.prod-header .prod-dests {
    padding: .5rem 0rem;
}

/* Prod Detail */
.prod-detail {
    padding: 3rem 0rem;
}

.prod-detail:after {
    display: block;
    content: "";
    clear: both;
    height: 0;
    visibility: hidden;
}

.prod-detail .detail-left {
    float: left;
    width: 60rem;
}

/* Items Head */
.items-head {
    position: relative;
    padding: .75rem 1rem;
    margin: 3rem 0rem;
    background-color: #f5f0e8;
}

.items-head .head-title {
    font-size: 1.125rem;
}

.items-head .expand-all-btn {
    display: inline-block;
    position: absolute;
    top: .5rem;
    right: 1rem;
    cursor: pointer;
}

.items-head .expand-all-btn .maxicon {
    display: inline-block;
    transform: rotate(0);
    transition: transform .3s;
}

.items-head .collapse-all .maxicon {
    display: inline-block;
    transform: rotate(45deg);
    transition: transform .3s;
}

/* Item */
.item {
    display: block;
    margin: 1rem 0rem;
}

.item .item-title {
    font-size: 1.125rem;
    font-weight: 400;
    position: relative;
    color: #960;
    border: 1px solid #e4ddd3;
}

.item .item-title .item-num {
    display: inline-block;
    color: #fff;
    background-color: #f60;
    padding: .25rem 1rem;
    margin-right: 2rem;
}

.item .item-title .item-trigger {
    position: absolute;
    top: .5rem;
    right: 0rem;
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    line-height: 1.4rem;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
    transform: rotate(0);
    transition: transform .3s;
}

.item .item-title .item-trigger-open {
    transform: rotate(180deg);
    transition: transform .3s;
}

.item .item-body {
    display: none;
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid #e4ddd3;
    border-top: 0px;
}

.item .item-body p,
.item .item-body p span {
    font-size: .875rem;
}

.item .item-body .item-salts{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 1rem;
}


.item .item-body-open {
    display: block;
}



/* Info Box */
.info-box .box-title {
    font-size: 1.125rem;
    font-weight: 700;
    padding: 1rem;
    margin: 2rem 0rem;
    background-color: #f5f0e8;
}

.info-box dl {
    padding: 0rem 1rem;
    margin-bottom: 1rem;
}

/* Price Intro */
.price-intro {
    margin: 2.5rem 0rem;
}

.price-intro .info-body .info-body-title {
    font-weight: 600;
    padding: 0rem 1rem;
}

.price-intro dl dt {
    padding: 0rem;
}

.price-intro dl dd {
    position: relative;
    margin: .5rem 0rem .5rem 1.2rem;
}

.price-intro dl dd:last-child {
    margin-bottom: 0rem;
}

.price-intro dl dd:before {
    position: absolute;
    top: .45rem;
    left: -1.2rem;
    display: inline-block;
    content: "";
    width: .5rem;
    height: .5rem;
    background-color: #a0a0a0;
    border-radius: 50%;
}

/* QA Header */
.qa-header .box-title {
    padding: 1rem;
    margin: 2rem 0rem;
    line-height: 1.5rem;
    background-color: #f5f0e8;
}

.qa-header .box-body {
    padding: .5rem 1rem;
}

.qa-header .leave-message {
    display: inline-block;
    font-weight: 700;
    padding: .5rem 3rem;
    margin: 1rem 0rem;
    border-radius: 6rem;
    border: 1px solid #ff6633;
    cursor: pointer;
    background-color: #f8f8f8;
}

.qa-header .leave-message:hover {
    background-color: #f2f2f2;
}

.qa-header .leave-message .icon-arrow-down {
    display: inline-block;
    transform: rotate(-90deg);
    transition: transform .3s;
}

.qa-header .leave-message.message-active .icon-arrow-down {
    display: inline-block;
    transform: rotate(0);
    transition: transform .3s;
}

/* Detail Right */
.prod-detail .detail-right {
    float: right;
    width: 20rem;
}

/* Prod Attrs */
.prod-attrs {
    padding: 1rem;
    border: 1px solid #e4ddd3;
}

.attr-price-info {
    color: #999;
    text-align: right;
    margin-bottom: 1rem;
}

.attr-price-info .price {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: red;
    padding: 1rem 0rem;
}

.attr-common-info {
    padding: .5rem 0rem;
    border-bottom: 1px solid #e4ddd3;
}

.attr-common-info:last-child {
    border-bottom: 0;
}

.attr-common-info .attr-title {
    float: left;
    width: 40%;
}

.attr-common-info .attr-val {
    float: right;
    width: 55%;
    color: #666;
}

/* Inquiry Button */
.inquiry-btn {
    display: block;
    text-align: center;
    padding: .75rem 2rem;
    margin: 2rem 0rem;
    border: 1px solid #ff9900;
    border-radius: 2rem;
    background-color: #eb6100;
    color: #fff;
    cursor: pointer;
}

.inquiry-btn:hover {
    color: #fff;
    background-color: #c60;
}

/* Prod Map */
.prod-map img {
    display: inline-block;
    width: 100%;
}

/* QA Form Outer */
.qa-form-outer {
    display: none;
}

.qa-form-inner {
    display: block;
    margin: 0 auto;
    max-width: 1000px;
    min-width: 320px;
    padding: 1.5rem;
    margin: .5rem 0rem;
    border-radius: .5rem;
    border: 1px solid #f5f0e8;
}

.qa-form .box-title {
    padding: .5rem 0rem;
    text-align: center;
}

.qa-form .field-input-small {
    max-width: 300px;
    min-width: 100px;
}

.qa-form .field-icon-box .field-icon {
    font-size: 1.25rem;
}

.qa-form .btn-box {
    text-align: center;
}

.qa-form .btn-box button {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: inline-block;
    color: #fff;
    padding: .75rem 5rem;
    margin: 1rem auto;
    border-radius: 1.5rem;
    background-color: #eb6100;
}

.qa-form #vp_content {
    display: block;
    width: 100%;
}

.qa-form .field-input-outer:after {
    display: block;
    content: "";
    clear: both;
    height: 0;
    visibility: hidden;
}

.qa-form .field-input-verify {
    float: left;
    width: 10rem;
}

.qa-form #vcode {
    float: left;
    display: block;
    height: 2rem;
    padding: 0rem .5rem;
    margin: 1rem 0rem;
}

/* QA Item Head */
.qa-item-head {
    padding: .5rem 1rem;
    margin-top: 1rem;
}

.qa-item-head:after {
    display: block;
    content: "";
    clear: both;
    height: 0;
    visibility: hidden;
}

.qa-item-head .head-left .item-head {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    line-height: 1rem;
    font-size: .75rem;
    text-align: center;
    border-radius: 2rem;
    border: 1px solid #ff9900;
}

.qa-item-head .head-left .item-name {
    font-weight: 700;
}

.qa-item-head .head-right .item-date {
    display: inline-block;
    color: #848383;
    margin-right: 1rem;
}

.qa-item-head .head-right .item-good {
    display: inline-block;
    color: #848383;
}

/* QA Item */
.qa-item {
    padding: 1rem;
    border-bottom: 1px solid antiquewhite;
}

.qa-item-answer {
    padding: 1rem;
    margin-top: 1rem;
    border-top: 1px dashed #e8e8e8;
}

/* QA List Pager */
.qa-list-pager {
    margin: 1rem;
}

.qa-list-pager span {
    display: inline-block;
    font-weight: 700;
    margin: .5rem .25rem;
}

.qa-list-pager span.page-num {
    width: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    text-align: center;
    cursor: pointer;
}

.qa-list-pager span.page-cur {
    color: #fff;
    border-radius: 1.5rem;
    margin: .5rem;
    background-color: #484848;
}

.qa-list-pager span.page-next,
.qa-list-pager span.page-prev {
    color: #121212;
    background-color: #989898;
}

.qa-list-pager .page-view-all {
    display: inline-block;
    font-size: .75rem;
    margin-left: .5rem;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .prod-detail .detail-left,
    .prod-detail .detail-right {
        float: none;
        width: 100%;
    }

    .prod-intro{
        padding: 0rem .5rem;
    }

    .prod-attrs {
        margin-top: 1rem;
    }

    .items-head .head-title {
        font-size: 1rem;
    }

    .item .item-title {
        font-size: 1rem;
    }

    .qa-form .field-input-small {
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .prod-header .prod-title {
        font-size: 1.5rem;
    }

    .prod-intro{
        padding: 0rem .5rem;
    }

    .attr-price-info .price {
        font-size: 1.5rem;
    }

    .inquiry-btn {
        padding: .5rem 1rem;
    }
}