.my-skin-type-wrap{
    /*
    position : fixed;
    top : 0;
    left : 0;
    width  : 100vw;
    height : 100vh;
    overflow-y : scroll;
    z-index : 3;
    background-color : #fff;
    */
}

.my-skin-type-wrap .title-wrap{
    /* border-bottom : 1px solid #767676; */
}

.my-skin-type-wrap .title-wrap .wrap{
    height : 80px;
    text-align: center;
    position : relative;
    line-height : 80px;
}

.my-skin-type-wrap .title-wrap .btn-back{
    position : absolute;
    top : 50%;
    transform : translateY(-50%);
    left : 0;
    display : none;
}

.my-skin-type-wrap .title-wrap .icon.back{
    width : 16px;
    height : 16px;
}

.my-skin-type-wrap .title-wrap .title{
    font-size : 20px;
    font-weight : 700;
    color : #767676;
}


/* 컨텐츠 시작 */
.my-skin-type-wrap .contents-wrap {
    /*padding-top : 40px;*/
    /*padding-bottom : 100px;*/
}

.my-skin-type-wrap .contents-wrap .wrap > .title{
    font-size : 20px;
    font-weight : 700;
    margin-bottom : 80px;
    display: flex;
    gap: 8px;
}

.my-skin-type-wrap .contents-wrap .wrap > .title > span{
    display : block;
    font-size: 20px;
    font-weight: 300;
    margin-bottom : 8px;
}

.my-skin-type-wrap .skin-type-pentagon{
    width: 500px;
    height: 500px;
    position : relative;
    /*padding : 45px 80px;*/
    display : inline-block;
}
.my-skin-type-wrap .skin-type-pentagon div{
    width: 100%;
    height: 100%;
}
.my-skin-type-wrap .skin-type-pnetagon div canvas{
    width: 100%;
    height: 100%;
}
.my-skin-type-wrap .skin-type-pentagon > div{
    position : absolute;
    text-align : center;
}

.my-skin-type-wrap .skin-type-pentagon .water-retention{
    top : 0;
    left : 50%;
    transform : translateX(-50%);
    display: none;
}

.my-skin-type-wrap .skin-type-pentagon .skin-elasticity{
    left : 0;
    top : 100px;
    display: none;
}

.my-skin-type-wrap .skin-type-pentagon .oil-retention{
    right : 0;
    top : 100px;
    display: none;
}

.my-skin-type-wrap .skin-type-pentagon .skin-transparency{
    bottom : 0;
    left : 80px;
    display: none;
}

.my-skin-type-wrap .skin-type-pentagon .skin-protection{
    bottom : 0;
    right : 80px;
    display: none;
}

.my-skin-type-wrap .skin-type-pentagon > div .value{
    font-size : 16px;
    margin-bottom : 6px;
}

.my-skin-type-wrap .skin-type-pentagon > div .title{
    font-size  :14px;
    color : #767676;
}

.skin-type-grape-slogan-wrap{
    display : flex;
    align-items: center;
    justify-content: space-around;
    margin : 0 auto 80px;

    flex-direction: row-reverse;
}
.skin-type-slogan{
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 400px;
}
.skin-type-slogan > p{
    font-size : 64px;
    font-weight : 700;
    color : #3a4c40;
    /*text-align: center;*/
    word-break: keep-all;
}
.skin-type-slogan > p:nth-child(1){
    color: #1c1c1c;
    font-size: 16px;
    font-weight: 500;
}
.skin-type-slogan > p:nth-child(2){
    font-size: 14px;
    font-weight: 500;
    color: #767676
}
.skin-type-slogan > p > span{
    font-size : 24px;
    font-weight : 500;
    /*margin-top : 24px;*/
    color : #1c1c1c;
    display : block;
}

.skin-type-list-wrap > ul >li{
    display : flex;
    align-items: center;
    justify-content: center;
    color : #bbb;
    padding-bottom: 10px;
    border-bottom: 1px solid #efefef;
    margin-bottom: 10px;
    gap: 40px;
}

.skin-type-list-wrap > ul >li .title{
    font-size : 16px;
    font-weight : 500;
}

.skin-type-list-wrap > ul >li.on .title{
    color : #1c1c1c;
    width: 70px;
}

.skin-type-list-wrap > ul >li .from{
    text-align: center;
    width : 50px;
    word-break: keep-all;
}

.skin-type-list-wrap > ul >li .from > span:first-child{
    font-size : 14px;
    font-weight : 300;
    margin-bottom : 10px;
    display : block;
}

.skin-type-list-wrap > ul >li .from > span:nth-child(2){
    font-size : 24px;
    font-weight : 600;
}

.skin-type-list-wrap > ul >li .to {
    text-align: center;
    width : 50px;
    word-break: keep-all;
}

.skin-type-list-wrap > ul >li .to > span:first-child{
    font-size : 14px;
    font-weight : 300;
    margin-bottom : 8px;
    display : block;
}

.skin-type-list-wrap > ul >li .to > span:nth-child(2){
    font-size : 24px;
    font-weight : 600;
}

.skin-type-list-wrap > ul >li button{
    /*width : 156px;*/
    padding: 8px 16px;
    /*height : 40px;*/
    color : #3a4c40;
    border : 1px solid rgba(58, 76, 64, 0.4);
    border-radius: 4px;
    transition: 0.3s;
    font-weight: 700;
    font-size: 14px;
}
.skin-type-list-wrap > ul >li button:hover{
    background-color: #ededed;
}

.skin-type-list-wrap > ul >li .status-bar{
    display : flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    max-width: 400px;
}


.skin-type-list-wrap > ul >li .bar{
    width : 100%;
    padding: 0 8px;
    height : 4px;
    border-radius : 20px;
    background-color : rgba(58, 76, 64, 0.2);
    position : relative;
}

.skin-type-list-wrap > ul >li .bar > span:first-child{
    position : absolute;
    left : 50%;
    top : 50%;
    height : 100%;
    background-color : rgba(58, 76, 64, 0.2);
    border-radius : 20px;
    width: 1px;
    height: 12px;
    transform: translate(-50%,-50%);
}

.skin-type-list-wrap > ul >li.on .bar > span:nth-child(2){
    position : absolute;
    width : 12px;
    height : 12px;
    border-radius : 50%;
    background-color : #3a4c40;
    top : -2px;
    transform : translate(-50%,calc(-50% + 4px));
}

.skin-type-list-wrap > ul >li .bar > span:nth-child(3){
    position : absolute;
    left : 22%;
    top : 0;    
    transform : translate(-50%,calc(-50% - 24px));
    color : #1c1c1c;
    word-break: keep-all;
}


@media screen and (max-width :1016px){

    .my-skin-type-wrap .title-wrap .wrap{
        width : 95%;
    }

    .my-skin-type-wrap .contents-wrap .wrap{
        width : calc(100% - 20px)
    }
    skin-type-list-wrap{
        padding: 0 10px;
    }
    .my-skin-type-wrap .contents-wrap{
        padding: 0 10px;
    }
}

@media screen and (max-width : 768px) {
    .my-skin-type-wrap .contents-wrap .wrap > .title{
        font-size : 20px;
        margin-bottom : 60px;
    }    

    .skin-type-grape-slogan-wrap{
        flex-direction: column;
        margin-bottom : 60px;
        padding: 0 10px;
        gap: 24px;
    }
    .skin-type-slogan{
        width: 100%;
        padding: 20px 0;
        border-top: 1px solid #f7f7f7;
        align-items: center;
    }
    .my-skin-type-wrap .skin-type-pentagon{
        width: 100%;
        height: 75vw;
        margin-left : 0;
        /*margin-bottom : 40px;*/
    }

    .skin-type-slogan > p{
        font-size : 40px;
    }

    .skin-type-slogan > p > span{
        font-size : 16px;
    }


    .skin-type-list-wrap > ul >li{
        border-bottom : 1px solid #efefef;
        flex-direction: column;
    }

    .skin-type-list-wrap > ul >li .pc-none{
        display : flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        /*margin-bottom : 14px;*/
    }

    /*.skin-type-list-wrap > ul >li .title{*/
    /*    font-size : 18px;*/
    /*}*/

    .skin-type-list-wrap > ul >li .status-bar{
        width : 100%;
        /*margin-bottom : 10px;*/
    }

    .skin-type-list-wrap > ul >li button{
        /*width : 120px;*/
    }
    .skin-type-list-wrap > ul >li{
        gap: 8px;

    }
    
}


@media screen and (max-width:460px) {
    .my-skin-type-wrap .title-wrap .wrap{
        height : 40px;
        line-height : 40px;
    }

    .my-skin-type-wrap .title-wrap .title{
        font-size : 14px;
        font-weight : 500;
    }

    .my-skin-type-wrap .title-wrap .icon.back{
        width : 6px;
        height : 12px;
        background-image : url('../../images/icons/mobile-back.svg');
    }


    .my-skin-type-wrap .contents-wrap .wrap > .title{
        font-size : 16px;
        margin-bottom : 40px;
    }

    .my-skin-type-wrap .contents-wrap .wrap > .title > span{
        font-size: 14px;
        margin-bottom : 0px;
    }

    /*.my-skin-type-wrap .skin-type-pentagon{*/
    /*    padding: 40px 60px;*/
    /*}*/
    

    .my-skin-type-wrap .skin-type-pentagon svg{
        max-width : 215px;
        width : 57vw;
    }

    .my-skin-type-wrap .skin-type-pentagon > div .value{
        font-size : 14px;
    }

    .my-skin-type-wrap .skin-type-pentagon > div .title{
        font-size : 12px;
    }

    .skin-type-slogan > p{
        font-size : 32px;
    }

    .skin-type-grape-slogan-wrap{
        margin-bottom : 40px;
    }

    .skin-type-list-wrap > ul >li .title{
        font-size : 16px;
    }

    .my-skin-type-wrap .contents-wrap .wrap{
        width : 100%;
    }
}