.foreheadTopImg {
    background-image: url('../img/lifting/forehead/head01pc.jpg');
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
}
.midfaceTopImg {
    background-image: url('../img/lifting/midface/head01pc.jpg');
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
}
.faceTopImg {
    background-image: url('../img/lifting/face/head01pc.jpg');
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
}
.miniTopImg {
    background-image: url('../img/lifting/mini/head01pc.jpg');
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
}
.threadTopImg {
    background-image: url('../img/lifting/thread/head01pc.jpg');
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
}
.laserTopImg {
    background-image: url('../img/lifting/laser/head01pc.jpg');
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
}

@media screen and (max-width: 767px) {
    .foreheadTopImg {
        background-image: url('../img/lifting/forehead/head02mo.jpg');
        background-size: cover;
        background-position: top;
        background-repeat: no-repeat;
    }
    .midfaceTopImg {
        background-image: url('../img/lifting/midface/head02mo.jpg');
        background-size: cover;
        background-position: top;
        background-repeat: no-repeat;
    }
    .faceTopImg {
        background-image: url('../img/lifting/face/head02mo.jpg');
        background-size: cover;
        background-position: top;
        background-repeat: no-repeat;
    }
    .miniTopImg {
        background-image: url('../img/lifting/mini/head02mo.jpg');
        background-size: cover;
        background-position: top;
        background-repeat: no-repeat;
    }
    .threadTopImg {
        background-image: url('../img/lifting/thread/head02mo.jpg');
        background-size: cover;
        background-position: top;
        background-repeat: no-repeat;
    }
    .laserTopImg {
        background-image: url('../img/lifting/laser/head02mo.jpg');
        background-size: cover;
        background-position: top;
        background-repeat: no-repeat;
    }
}

/* 안면거상 절개방식 */
.incisionBox img {
    max-width: 460px;
    width: 100%;
    height: auto;
    border-radius: 30px;
    margin-bottom: 20px;
}
.incisionBox {
    margin: 50px auto 0 auto;
    max-width: 500px;
    width: 100%;
}
.incisionBox > div {
    text-align: center;
    padding: 20px 20px 40px 20px;
    border-radius: 50px;
    background: white;
}
@media screen and (max-width: 767px) {
    .incisionBox {margin: 20px auto 0 auto;}
}



/* 레이저종류 */
.typesoflasers {
    margin-top: 50px;
}
.typesoflasers img {
    display: block;
    max-width: 395px;
    width: 100%;
    height: auto;
    margin: 0 auto;
}
.laserType {
    text-align: center;
    /* border: 1px solid red; */
    padding: 30px 10px;
}
.laserComent {
    /* border: 1px solid red; */
    height: 300px;
    position: relative;
}
.laserType:nth-of-type(2n-1) .laserDot {  
    margin: 20px auto 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 100%;
    background: #CEA781;
}
.laserType:nth-of-type(2n) .laserDot {
    margin: 20px auto 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 100%;
    background: #FFAF5E;
}
.laserType:nth-of-type(2n-1) .laserDashed {
    margin: 0 auto;
    height: 40px;
    display: inline;
    border-left: 1px dashed #CEA781;
}
.laserType:nth-of-type(2n) .laserDashed {
    margin: 0 auto;
    height: 40px;
    display: inline;
    border-left: 1px dashed #FFAF5E;
}
.laserType:nth-of-type(2n-1) .laserName {
    background: #CEA781;
    color: white;
    max-width: 200px;
    width: 100%;
    border-radius: 30px;
    margin: 0 auto;
    padding: 2px 0;
}
.laserType:nth-of-type(2n) .laserName {
    background: #FFAF5E;
    color: white;
    max-width: 200px;
    width: 100%;
    border-radius: 30px;
    margin: 0 auto;
    padding: 2px 0;
}
.laserType:nth-of-type(2n-1) .laserTag {
    color: #CEA781;
    font-size: 0.8rem;
    margin-top: 10px;
}
.laserType:nth-of-type(2n) .laserTag {
   color: #FFAF5E;
    font-size: 0.8rem;
    margin-top: 10px;
}
.laserCom {
    padding: 20px 40px;
    word-break: keep-all;
}
@media screen and (max-width: 991px) {
    .typesoflasers {
        margin-top: 20px;
    }
    .laserType {
        padding: 10px 0;
        /* text-align: left; */
    }
    .laserComent {
        padding-top: 20px;
        position: relative;
        height: auto;
    }
    .laserType:nth-of-type(2n-1) .laserDot {    
        position: absolute;
        top: 16px;
        left: -20px;
        width: 6px;
        height: 6px;
        border-radius: 100%;
        background: #CEA781;
    }
    .laserType:nth-of-type(2n) .laserDot {    
        position: absolute;
        top: 16px;
        right: -20px;
        width: 6px;
        height: 6px;
        border-radius: 100%;
        background: #FFAF5E;
    }
    .laserType:nth-of-type(2n-1) .laserDashed {
        position: absolute;
        top: 38px;
        left: -18px;
        width: 30%;
        height:0;
        border-top: 1px solid #CEA781;
        border-left: none;
        z-index: 0;
    }
    .laserType:nth-of-type(2n) .laserDashed {
        position: absolute;
        top: 38px;
        right: -18px;
        width: 30%;
        height:0;
        border-top: 1px solid #FFAF5E;
        border-left: none;
        z-index: 0;
    }
    .laserType:nth-of-type(2n-1) .laserComent {
        padding-left: 10px;
    }
    .laserType:nth-of-type(2n) .laserComent {            
        padding-right: 10px;
    }
    .laserCom {
        padding: 10px 0;
        /* word-break: keep-all; */
    }
}



/* 실종류 */
.threadSortBox img {
    max-width: 500px;
    width: 100%;
    border-radius: 30px;
    margin-bottom: 20px;
}
.threadSort span {display: inline-block;}
.threadTitle {
    border-radius: 50px;
    background: white;
    width: fit-content;
    padding: 6px 20px;
    margin: 0 auto;
}
.threadSort > div {
    text-align: center;
    margin: 10px;
    padding: 20px;
    border-radius: 50px;
    background: #f7f3f2;
}

.threadSort > div > div {margin-bottom: 14px;}
.threadInfo {display: flex; flex-wrap: nowrap;}
.threadInfo > div {
    width: 50%;
    padding: 16px 0;
    margin: 8px 0;
}
.threadInfo > div span {display: block;}
.threadInfo > div:first-child {border-right: 1px solid gray;}
.hashtag {color: #EE7B38; font-weight: bold;}


/* 단면구조 */

.threadStructure {
    margin-bottom: 50px;
    text-align: center;
}
.threadStructure span {
    background: #EE7B38; 
    color: white;
    width: fit-content;
    padding: 4px 16px;
    border-radius: 30px;
    font-size: 16px;
    margin: 0 auto 10px auto;
}
.threadStructure img {
    max-width: 1000px;
    width: 100%;
    height: auto;
}

.compareBox {
    /* border: 1px solid red; */
    text-align: center;
    margin: 0 auto;
    max-width: 1500px;
    width: 100%;
    word-break:keep-all;
}
.compareTitleBox {
    display: flex;
}
.compareTitleBox .compareTitle {
    /* border: 1px solid blue; */
    /* background: white; */
    width: 49%;
}
.compareTitleBox .compareTitle .normalThread {
    background: #E9C4AE;
    border-radius: 20px 20px 0 0;
    line-height: 50px;
    color: white;
}
.compareTitleBox .compareTitle .myliftThread {
    background: #EE7B38;
    border-radius: 20px 20px 0 0;
    line-height: 50px;
    color: white;
}
.compareTitleBox .compareTitle div:nth-of-type(2) { 
    background: white;
    padding: 30px 5px;
}
.compareTitleBox .blankThread {
    width: 2%;
}
.compareTitle img {
    max-width: 450px;
    width: 100%;
    height: auto;
}
.compareCom {
    display: flex;
    background: white;
}

.compareCom .compareComBox {
    width: 45%;
    /* border: 1px solid red; */
    display: flex;
    align-items: center;
    justify-content: center;
}
.compareCom .compareOpt {
    width: 10%;
    background: #EEA377;
    color: white;
    /* border-radius: 50px 50px 0 0; */
    display: flex;
    align-items: center;
    justify-content: center;

}
.compareCom span {
    /* display: block; */
    /* border: 1px solid; */
    margin: 10px 20px;
}

.compareUnderline {
    /* height: 50px; */
    background: white;
    display: flex;
}
.compareUnderline span {
    margin: 5px auto;
}
.compareUnderline div:nth-of-type(2n-1) {
    width: 45%;
    /* border-top: 1px solid gray; */
}
.compareUnderline div:nth-of-type(2n) {
    width: 10%;
    background: #EEA377;
}
.compareUnderline div:nth-of-type(2n-1) span {
    width: 90%;
    border-top: 1px solid gray;
}
.compareUnderline div:nth-of-type(2n) span {
    width: 80%;
    border-top: 1px solid white;
    /* background: #EEA377; */

}
.compareRadiusTop {
    display: flex;
    height: 60px;
    background: white;        
}
.compareRadiusTop div:nth-of-type(2n-1) {
    width: 45%;
}
.compareRadiusTop div:nth-of-type(2n) {
    width: 10%;
    border-radius: 60px 60px 0 0;
    background: #EEA377;
}
.compareRadiusBottom {
    display: flex;
    height: 60px;
    background: white; 
    border-radius: 0 0 20px 20px;       
}
.compareRadiusBottom div:nth-of-type(2n-1) {
    width: 45%;
}
.compareRadiusBottom div:nth-of-type(2n) {
    width: 10%;
    border-radius: 0 0 60px 60px;
    background: #EEA377;
}

@media screen and (max-width: 575px) {
    
    .compareCom .compareComBox,
    .compareUnderline div:nth-of-type(2n-1),
    .compareRadiusTop div:nth-of-type(2n-1),
    .compareRadiusBottom div:nth-of-type(2n-1) {
        width: 40%;
    }
    .compareCom .compareOpt,
    .compareUnderline div:nth-of-type(2n),
    .compareRadiusTop div:nth-of-type(2n),
    .compareRadiusBottom div:nth-of-type(2n) {
        width: 20%;
    }
    .compareCom span {
        margin: 8px 8px;
    }
    .compareRadiusTop {
        height: 40px;      
    }
    .compareRadiusBottom {
        height: 40px;  
    }
}



/* 나이대별 추천 */
.detailthreadGraph h2:nth-of-type(2) {
    display: inline-block;
    background: linear-gradient(to top, #FFA74E 40%, transparent 40%);
}
.threadGraphBox {max-width: 1300px; margin-top: 50px;}
.threadGraphXY {
    border-left: 2px solid black;
    border-bottom: 2px solid black;
    position: relative;
}
.titleY {
    position: absolute;
    top: -36px;
    left: -30px;
    font-size: 0.9rem;
}
.titleX {
    position: absolute;
    bottom: -32px;
    width: 10%;
    text-align: center;
    white-space: nowrap;
    font-size: 0.9rem;
}
.titleX1 {left: 15%;}
.titleX2 {left: 35%;}
.titleX3 {left: 55%;}
.titleX4 {left: 75%;}
.dashedX {
    border-top: 1px dashed #adadad;
    height: 80px;
}
.nodashedX {
    border: none;
    height: 160px;
}
.graphBar span {
    /* border: 1px solid blue; */
    text-align: center;
    margin: 0 auto;
}
.graphBar1 {
    position: absolute;
    bottom: 0;
    left: 15%;
    /* border: 1px solid red; */
    width: 10%;
}
.graphBar2 {
    position: absolute;
    bottom: 0;
    left: 35%;
    width: 10%;
}
.graphBar3 {
    position: absolute;
    bottom: 0;
    left: 55%;
    width: 10%;
}
.graphBar4 {
    position: absolute;
    bottom: 0;
    left: 75%;
    width: 10%;
}
.graphBar .barName {
    position: relative;
}
.graphBar .barName div {
    border: fit-content;
    /* border: 1px solid red; */
    white-space: nowrap;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
}
.graphBar span:nth-of-type(2) {
    width: 4px;
    height: 4px;
    border-radius: 100%;
    background: #bbbbbb;
}
.graphBar span:nth-of-type(3) {
    border-left: 1px dotted #BBBBBB;
    height: 30px;
    width: 1px;
}
.graphBar1 span:nth-of-type(4) {
    height: 100px;
    border-radius: 50px 50px 0 0;
    background: #FCEBCD;
    width: 80%;
}
.graphBar2 span:nth-of-type(4) {
    height: 180px;
    border-radius: 50px 50px 0 0;
    background: #F7DFB9;
    width: 80%;
}
.graphBar3 span:nth-of-type(4) {
    height: 260px;
    border-radius: 50px 50px 0 0;
    background: #FFAE5D;
    width: 80%;
}
.graphBar4 span:nth-of-type(4) {
    height: 340px;
    border-radius: 50px 50px 0 0;
    background: #FF7747;
    width: 80%;
}

@media screen and (max-width: 991px) {
    .threadGraphBox {
        margin-top: 20px;
    }
    .titleY {
        position: absolute;
        top: 0;
        left: 10px;
        width: 20px;
        font-size: 0.8rem;
    }
    .graphBar1 span:nth-of-type(4) {
        width: 100%;
    }
    .graphBar2 span:nth-of-type(4) {
        width: 100%;
    }
    .graphBar3 span:nth-of-type(4) {
        width: 100%;
    }
    .graphBar4 span:nth-of-type(4) {
        width: 100%;
    }
    .graphBar1 {
        position: absolute;
        bottom: 0;
        left: 10%;
        /* border: 1px solid red; */
        width: 14%;
    }
    .graphBar2 {
        position: absolute;
        bottom: 0;
        left: 30%;
        width: 14%;
    }
    .graphBar3 {
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 14%;
    }
    .graphBar4 {
        position: absolute;
        bottom: 0;
        left: 70%;
        width: 14%;
    }
    .titleX1 {left: 10%;}
    .titleX2 {left: 30%;}
    .titleX3 {left: 50%;}
    .titleX4 {left: 70%;}
    }


.triangleY {
    position: absolute;
    top: -9px;
    left: -9px;
    width: 0;
    height: 0;
    border-bottom: 8px solid black;
    border-top: 8px solid transparent;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
}