/* keyvis Start */
.section-keyvis-cust.section-keyvis-slide {
    height: 400px;
}

#sec-keyvis-Product {
    background: url('../images/product/keyvis-Product.jpg') no-repeat center center;
    background-size: cover;
}

.ver-bm #sec-keyvis-Product {
    background: url('../images/product/keyvis-Product.jpg') no-repeat center center;
    background-size: cover;
}

#sec-keyvis-Product .keyvis-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;

    margin-top: 0px;
}

#sec-keyvis-Product .keyvis-headline-tag {
    margin-top: -50px;
}

#sec-keyvis-Product .keyvis-headline-tag h1 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;

    text-shadow: 0px 0px 50px rgba(0, 0, 0, 1), 0px 0px 30px rgba(0, 0, 0, 1), 0px 0px 10px rgba(0, 0, 0, 1);
}

@media (max-width: 640px) {
    .section-keyvis-cust.section-keyvis-slide {
        height: 260px;
    }

    #sec-keyvis-Product {
        background: url('../images/product/keyvis-Product-xs.jpg') no-repeat center center;
        background-size: cover;
    }

    .ver-bm #sec-keyvis-Product {
        background: url('../images/product/keyvis-Product-xs.jpg') no-repeat center center;
        background-size: cover;
    }

    #sec-keyvis-Product .keyvis-headline-tag h1 {
        flex-direction: column;
    }
}

@media (min-width: 641px) and (max-width: 860px) {
    .section-keyvis-cust.section-keyvis-slide {
        height: 400px;
    }

    #sec-keyvis-Product {
        background: url('../images/product/keyvis-Product-sm.jpg') no-repeat center center;
        background-size: cover;
    }

    .ver-bm #sec-keyvis-Product {
        background: url('../images/product/keyvis-Product-sm.jpg') no-repeat center center;
        background-size: cover;
    }

    #sec-keyvis-Product .keyvis-headline-tag {
        margin-top: 0px;
    }

    
 
}
/* keyvis End */


/* intro Start */
.panel-intro {
    position: relative;
    margin-top: -180px;
}

.intro-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
    gap: 20px;
}

.intro-col {
    flex: 0 0 30%;
    max-width: 30%;
}

.intro-feature-row {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
}

.intro-feature-col {

}

#col-unisex {
    padding-bottom: 80px;
}

#col-regain {
    padding-bottom: 0px;
}

#col-feature {
    padding-bottom: 30px;
}

.intro-img {
    margin: auto;
    width: 100%;
}

.product-pants #col-unisex {
    flex: 0 0 20%;
    max-width: 20%;
}

.product-pants #col-regain {
    flex: 0 0 40%;
    max-width: 40%;
    padding-bottom: 0px;
}

.product-pants #col-feature {
    flex: 0 0 30%;
    max-width: 30%;
    padding-bottom: 0px;
}

#img-feature-pants.intro-img {
    width: 80%;
}

.intro-img img {
    margin: auto;
    width: 100%;
}

#img-unisex {
    margin-right: 20px;
    max-width: 160px;
}

#img-regain {
    max-width: 400px;
}

.product-pants #img-regain {
    max-width: 540px;
}

#img-waistband,
#img-breathable {
    max-width: 180px;
}

.intro-title {
    position: relative;
    margin-top: 30px;
}

.bg-line-txt {
    position: relative;
    padding: 0px 60px;
}

.line-txt {
    display: inline-block;
    position: relative;
    z-index: 2;
    padding: 0px 10px;
    text-align: center;
}

.bg-line-txt::after {
    content: "";
    position: absolute;
    z-index: 1;
    left: 0px;
    top: 50%;
    width: 100%;
    height: 1px;
    background-color: #333333;
}

@media (max-width: 640px) {
    .panel-intro {
        margin-top: -130px;
    }

    .intro-row {
        flex-direction: column;
        align-items: center;
        gap: 0px;
    }

    #col-unisex,
    #col-regain,
    #col-feature {
        flex: 0 0 100%;
        max-width: 100%;
        padding-bottom: 0px;
    }

    .product-pants #col-unisex,
    .product-pants #col-regain,
    .product-pants #col-feature {
        flex: 0 0 100%;
        max-width: 100%;
        padding-bottom: 0px;
    }

    #img-feature-pants.intro-img {
        width: 64%;
    }

    #col-unisex {
        order: 2;
    }

    #col-regain {
        order: 1;
    }

    #col-feature {
        order: 3;
    }

    #img-unisex {
        margin-right: 0px;
        max-width: 110px;
    }

    #img-regain {
        max-width: 260px;
    }

    .product-pants #img-regain {
        max-width: 320px;
    }

    #img-waistband,
    #img-breathable {
        max-width: 150px;
    }
}

@media (max-width: 860px) {
    
}

@media (min-width: 641px) and (max-width: 860px) {
    #col-unisex {
        flex: 0 0 20%;
        max-width: 20%;
        padding-bottom: 50px;
    }

    #col-regain {
        flex: 0 0 50%;
        max-width: 50%;
    }

    #col-feature {
        flex: 0 0 30%;
        max-width: 30%;
    }

    .product-pants #col-unisex {
        flex: 0 0 15%;
        max-width: 15%;
    }

    .product-pants #col-regain {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .product-pants #col-feature {
        flex: 0 0 35%;
        max-width: 35%;
    }
}

@media (min-width: 861px) and (max-width: 1024px) {
    
}

@media (min-width: 1025px) and (max-width: 1280px) {
    
}

/* intro End */

/* feature Start */
#sec-regain-product-Features {
                                            
}

.camp-comfort-container {
}

.camp-comfort-inner {
    
}

.comfort-feature-container {
    position: relative;
    margin-top: 0px;
}

.comfort-flex {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 100%;
    height: auto;
}

.comfort-item {
    position: relative;
}

.comfort-product {
    position: relative;
    margin: auto;
    width: 100%;
    max-width: 620px;
}

.comfort-product img {
    margin: auto;
    width: 100%;
}

.comfort-features {
    position: absolute;
    top: 0px;
    left: 0px;
    margin-top: 0px;
    width: 100%;
    height: 100%;
}

.comfort-feature-row {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0px;
}

.comfort-feature-col {
    position: absolute;
    padding: 5px;
    width: 24%;
}

#comfort-feature-col-1 {
    top: 0px;
    left: -30px;
}

#comfort-feature-col-2 {
    top: 220px;
    left: -30px;
}

#comfort-feature-col-3 {
    top: 420px;
    left: -30px;
}

#comfort-feature-col-4 {
    top: 140px;
    right: -30px;
}

#comfort-feature-col-5 {
    top: 340px;
    right: -30px;
}

.comfort-feature-card {
    padding: 10px;
    /* border-radius: 10px;
    background-color: #ffffff;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.2); */
}

.comfort-feature-num {
    display: flex;
    justify-content: center;
    align-items: center;

    position: relative;
    margin-bottom: 10px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: #00BBB4;
    color: #ffffff;
    font-size: 24px;
    line-height: 24px;
}

.comfort-feature-title {
    margin-bottom: 10px;
    font-size: 16px;
    line-height: 24px;
}

.comfort-feature-desc {

}

@media (max-width: 640px) {
    
    .comfort-flex {
        flex-direction: column;
        height: auto;
    }

    .comfort-feature-col {
        position: relative;
    }
    
    #comfort-feature-col-1 {
        top: 0px;
        left: 0px;
        right: auto;
    }
    
    #comfort-feature-col-2 {
        top: 0px;
        left: 0px;
        right: auto;
    }
    
    #comfort-feature-col-3 {
        top: 0px;
        left: 0px;
        right: auto;
    }
    
    #comfort-feature-col-4 {
        top: 0px;
        left: 0px;
        right: auto;
    }
    
    #comfort-feature-col-5 {
        top: 0px;
        left: 0px;
        right: auto;
        width: 70%;
    }

    .comfort-features {
        position: relative;
        top: 0px;
        left: 0px;
        margin-top: 30px;
        width: 100%;
        height: 100%;
    }

    .comfort-feature-num {
        width: 32px;
        height: 32px;
        font-size: 18px;
        line-height: 18px;
    }

    .comfort-feature-title {
        font-size: 14px;
        line-height: 18px;
    }

    .comfort-feature-desc {
        font-size: 12px;
        line-height: 16px;
    }

    .comfort-features {
        position: relative;
        margin-top: 30px;
    }

    .comfort-feature-col {
        flex: 1 0 50%;
        padding: 5px;
    }

    .comfort-feature-card {
        padding: 10px;
    }

}

@media (min-width: 641px) and (max-width: 860px) {
    .comfort-product {
        margin: auto;
        margin-bottom: 100px;
        width: 100%;
        max-width: 400px;
    }
    
    .comfort-feature-col {
        padding: 5px;
        width: 30%;
    }

    #comfort-feature-col-1 {
        top: 0px;
        left: -30px;
    }
    
    #comfort-feature-col-2 {
        top: 150px;
        left: -30px;
    }
    
    #comfort-feature-col-3 {
        top: 280px;
        left: -30px;
    }
    
    #comfort-feature-col-4 {
        top: 60px;
        right: -30px;
    }
    
    #comfort-feature-col-5 {
        top: 220px;
        right: -30px;
    }

    .comfort-feature-card {
        padding: 10px;
    }

    .comfort-feature-num {
        width: 32px;
        height: 32px;
        font-size: 18px;
        line-height: 18px;
    }

    .comfort-feature-title {
        font-size: 14px;
        line-height: 18px;
    }

    .comfort-feature-desc {
        font-size: 12px;
        line-height: 16px;
    }
}

@media (max-width: 860px) {
    
    
}

@media (min-width: 861px) {
    
}
/* feature End */

/* tag 9wonder Start */
.tag-9wonders {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;

    position: absolute;
    top: 50%;
    left: 0px;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%);

    max-width: 120px;
}

.img-9wonders {
    flex: 0 0 90px;
    margin: auto;
    width: 100%;
    max-width: 90px;
}

.img-9wonders img {
    margin: auto;
    width: 100%;
}

.txt-9wonders {
    flex: 1;
    font-size: 20px;
    line-height: 24px;
    font-weight: bold;
    color: #000000;
    text-align: center;
}

@media (max-width: 640px) {
    .tag-9wonders {
        flex-direction: row;
        max-width: 100%;
        top: auto;
        left: 50%;
        right: auto;
        -webkit-transform: translate(-50%, 0px);
        -moz-transform: translate(-50%, 0px);
        transform: translate(-50%, 0px);
    }

    .img-9wonders {
        max-width: 40px;
    }
}

@media (min-width: 641px) and (max-width: 860px) {
    .tag-9wonders {
        left: -30px;
    }

    .img-9wonders {
        flex: 0 0 60px;
        max-width: 60px;
    }
}
/* tag 9wonder End */

/* pants feature Start */
#panel-feature-pants {

}

#panel-feature-pants .comfort-product {
    margin-top: 150px;
    margin-bottom: 150px;
}

#panel-feature-pants .comfort-feature-row {
    width: 100%;
    height: 100%;
    align-content: space-between;
}

#panel-feature-pants .comfort-feature-col {
    flex: 1 0 20%;
    position: relative;
}

@media (max-width: 640px) {
    #panel-feature-pants .comfort-product {
        margin-top: 0px;
        margin-bottom: 0px;
    }

    #panel-feature-pants .comfort-feature-col {
        flex: 1 0 50%;
    }
}
/* pants feature End */

/* put on Start */
.panel-PutOn {
}

.col-cust-PutOn {
}

.PutOn-step-card {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;

    margin-bottom: 30px;
}

.PutOn-step-tmb {
    margin: 0px;
    width: 116px;
}

.PutOn-step-tmb img {
    margin: 0px;
    width: 100%;
}

.PutOn-step-desc {
    flex: 1;
}
/* put on End */

/* size guide Start */
.panel-SizeGuide {

}

.SizeGuide-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
}

.SizeGuide-col {
    flex: 0 0 48%;
    max-width: 48%;
}

.SizeGuide-card {
    position: relative;
}

.SizeGuide-pic {
    position: relative;
    margin: auto;
    width: 100%;
    max-width: 500px;
}

.SizeGuide-pic img {
    margin: auto;
    width: 100%;
}

.SizeGuide-pic::after {
    content: '';
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    background-color: #ffffff;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.SizeGuide-detail {
}

.SizeGuide-title {

}

.SizeGuide-table {
    margin-top: 30px;
}

.tb-SizeGuide {
    border-radius: 20px;
    overflow: hidden;
}

.tr-SizeGuide {
    
}

.tr-SizeGuide:not(:last-child) {
    border-bottom: 1px solid #00bbb4;
}

.td-SizeGuide {
    padding: 20px 20px;
    background-color: #ffffff;
}

.td-SizeGuide,
.td-SizeGuide h3 {
    font-size: 18px;
    line-height: 24px;
}

.tr-SizeGuide:not(:first-child) .td-SizeGuide:first-child {
    border-right: 1px solid #00bbb4;
}

.td-SizeGuide.td-header {
    background-color: #00bbb4;
}

@media (max-width: 640px) {
    .SizeGuide-row {
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: 20px;
    }

    .SizeGuide-col {
        flex: 1;
        max-width: 100%;
    }

    .SizeGuide-pic {
        max-width: 300px;
    }

    .SizeGuide-pic::after {
        width: 250px;
        height: 250px;
    }
}

@media (max-width: 860px) {
    .td-SizeGuide {
        padding: 10px 30px;
    }

    .td-SizeGuide:first-child {
        width: 158px;
    }

    .td-SizeGuide,
    .td-SizeGuide h3 {
        font-size: 16px;
        line-height: 22px;
    }

    .SizeGuide-pic::after {
        width: 250px;
        height: 250px;
    }
}

@media (min-width: 641px) {
    .SizeGuide-col:nth-child(1) {
        order: 2;
    }

    .SizeGuide-col:nth-child(2) {
        order: 1;
    }
}
/* size guide End */

/* measure Start */
.panel-Measure {
}

.panel-Measure-title {
}

.measure-step-list {
}

.measure-step-item {
    margin-bottom: 20px;
}

.measure-step-num {
}

.measure-step-desc {

}
/* measure End */