@charset "UTF-8";
@import url('./user.common.css');
/**************************************************/
/* ================================= common */
/* === snb_program === */
.snb_program{
    position: fixed; z-index: 100; left: 30px; top: calc(50% - 242.5px + 85px);
    width: 180px; padding: 66px 0 30px;
    background: #fff;
    border: 1px solid #C0C0C0;
    border-radius: 60px 60px 0 0;
    -webkit-border-radius: 60px 60px 0 0;
    -moz-border-radius: 60px 60px 0 0;
    -ms-border-radius: 60px 60px 0 0;
    -o-border-radius: 60px 60px 0 0;
}
.snb_program:before{
    position: absolute; z-index: 10; left: 48px; top: -40px;
    display: flex; flex-flow: row wrap; align-items: center; justify-content: center;
    width: 80px; height: 80px;
    background: #000; border-radius: 50%;
    color: #fff; text-align: center; white-space: pre; font-size: 15.5px; line-height: 1.35; cursor: default;font-weight: 300;
    content: '전체\A프로그램';
}

.snb_program ul{ max-height: 50vh; overflow-y: auto; }
.snb_program li { position: relative;}
.snb_program li > *{ padding-left: 28px; }

.snb_program li > a{ 
    height: 20px; margin-bottom: 10px; font-size: 15.5px; line-height: 20px; transition: font-weight 0.15s ease-out; 
    -webkit-transition: font-weight 0.15s ease-out; 
    -moz-transition: font-weight 0.15s ease-out; 
    -ms-transition: font-weight 0.15s ease-out; 
    -o-transition: font-weight 0.15s ease-out; 
}
.snb_program li > a:hover{ font-weight: 500;}
.snb_program summary{
    position: absolute; top: 0; right: 18px;
    width: 20px; height: 20px;
    background: url("data:image/svg+xml,%3Csvg width='17' height='15' viewBox='0 0 17 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 0H8V7H0V8H8V15H9V8H17V7H9V0Z' fill='%237F7F7F'/%3E%3C/svg%3E%0A")  no-repeat center;
    border-radius: 2px;
}
.snb_program summary:hover{ filter: brightness(45%);}
.snb_program details[open] summary{ 
    background-image: url("data:image/svg+xml,%3Csvg width='15' height='1' viewBox='0 0 15 1' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect y='1' width='1' height='15' transform='rotate(-90 0 1)' fill='%237F7F7F'/%3E%3C/svg%3E%0A");
}
.snb_program details div{ padding-bottom: 20px;}
.snb_program details a{ 
    display: block; padding: 5px 0; line-height: 1.45; font-size: 12px; font-weight: 300; 
}
.snb_program details a:hover{ text-indent: 2px;}







/**************************************************/
/* ================================= layout */
/* === page_program_clinic === */
/* --- sec_1 */
#page_program_clinic #sec_1 img{ width: 100%;}
#page_program_clinic #sec_1 p{ font-weight: 300; }
#page_program_clinic #sec_1 span{  letter-spacing: 0.36px;}

/* --- sec_2 */
#page_program_clinic #sec_2 * {color: #333; }
#page_program_clinic #sec_2 p {  font-weight: 300; }

/* --- sec_3 */
#page_program_clinic #sec_3 { background: url(../img/user/program/clinic_sec3_bg.jpg) no-repeat center/cover;}
#page_program_clinic #sec_3 .maxWidth2{  display: flex; flex-flow: row wrap; align-items: center; }
#page_program_clinic #sec_3 *:not(img){ width: 100%; text-align: center;  color: #333; }
#page_program_clinic #sec_3 p{ font-weight: 300; }
#page_program_clinic #sec_3 img{ width: 100%; border-radius: 50%;}

/* --- sec_4 */
#page_program_clinic #sec_4{  background-color: #cc99661a; }
#page_program_clinic #sec_4 .wrap { text-align: center;}
#page_program_clinic #sec_4 .wrap span{ font-weight: 300;  color: #ccc; }

#page_program_clinic #sec_4 ul{ width: 100%;}
#page_program_clinic #sec_4 li{ display: flex; justify-content: space-between; align-items: center;}
#page_program_clinic #sec_4 li p{ width: 100%; font-weight: 300; }
#page_program_clinic #sec_4 li a{ text-align: center;}


/* === page_program_symptom === */
/* bx_bn */
#page_program_symptom .bx_bn { position: relative; }
#page_program_symptom .bx_bn img{ width: 100%;}
#page_program_symptom .bx_bn p{ width: 100%; }

/* bx_point */
#page_program_symptom .bx_point p{ 
    display: block; padding-bottom: 10px; border-bottom: 1px solid #C0C0C0; 
    text-align: center; color: #333; 
}
#page_program_symptom .bx_point img{ display: block; width: 100%; max-width: 952px; margin: auto;}

/* --- sec_3 */
#page_program_symptom #sec_3 .bx_bn p{ color: #333;}

/* === page_program_type === */



/* === page_program_spa === */
#page_program_spa #sec_2 .wrap:after{
    display: block; width: 1px; background: #C0C0C0;
    content: '';
}
#page_program_spa #sec_2 .wrap > *{ color: #333; text-align: center; }
#page_program_spa #sec_2 .wrap h4{ font-weight: 500;}

#page_program_spa #sec_2 ul{ display: flex; flex-flow: row wrap; max-width: 1742px; padding: 0 30px; margin: auto; }
#page_program_spa #sec_2 li{ position: relative;}
#page_program_spa #sec_2 li:before{
    position: absolute; left: 0; top: 0; 
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%; 
    content: attr(title); color: #fff; font-weight: 500;
}
#page_program_spa #sec_2 li:nth-of-type(n+2):nth-of-type(-n+3):before{ color: #333; }

#page_program_spa #sec_2 li img{ width: 100%; border-radius: 50%; }


/* === page_program_personal === */
/* --- sec_1 */
#page_program_personal #sec_1 h4{ text-align: center;  font-weight: 300; color: #333; }

/* --- sec_2 */
#page_program_personal #sec_2 *{ color: #333; }
#page_program_personal #sec_2 p{  font-weight: 300; }
#page_program_personal #sec_2 img{ width: 100%;}




/**************************************************/
/* ================================= responsive */
@media screen and (min-width: 1025px){
    /* ==================== common */


    
    /* ==================== layout */
    /* === page_program_clinic === */
    #page_program_clinic #sec_0 h5{ color: #333 !important;  }

    /* --- sec_1 */
    #page_program_clinic #sec_1 { display: flex; flex-flow: row wrap; align-items: center;}
    #page_program_clinic #sec_1 p{ position: relative; margin: 262px 0 78px; font-size: 25px; }
    #page_program_clinic #sec_1 p:first-of-type{ width: 75%; padding-left: 170px; line-height: normal;}
    #page_program_clinic #sec_1 p:last-of-type{ width: 25%; padding-left: 52px;  line-height: 1; }
    #page_program_clinic #sec_1 p:last-of-type:before{ 
        position: absolute; left: 0; bottom: calc(50% - 47.5px);
        display: block; width: 1px; height: 95px; background: #C0C0C0;
        content: '';
    }

    #page_program_clinic #sec_1 span{ margin-top: 20px; font-size: 18px;}

    /* --- sec_2 */
    #page_program_clinic #sec_2{ 
        display: flex; flex-flow: row wrap; align-items: center; justify-content: space-between; padding: 200px 0 198px;
    }
    #page_program_clinic #sec_2 > *{ width: calc(50% - 141px);}
    #page_program_clinic #sec_2 div{ font-size: 25px;  }
    #page_program_clinic #sec_2 p{ margin-top: 38px;  font-size: 18px; }
    
    /* --- sec_3 */
    #page_program_clinic #sec_3{ padding: 162px 0 155px;}
    #page_program_clinic #sec_3 h4{ font-size: 30px; }
    #page_program_clinic #sec_3 p{ margin: 45px 0 66px; font-size: 20px; }
    #page_program_clinic #sec_3 div{ flex: 1; padding: 0 50.5px;  font-size: 20px; }
    #page_program_clinic #sec_3 img{ margin-bottom: 60px; }

    /* --- sec_4 */
    #page_program_clinic #sec_4{ padding: 205px 0 188px;}
    #page_program_clinic #sec_4 .wrap h4{ 
        display: flex; align-items: center; justify-content: space-evenly; width: 100%; margin: 30px 0 215px; font-size: 35.5px; 
    }
    #page_program_clinic #sec_4 .wrap h4:before,
    #page_program_clinic #sec_4 .wrap h4:after{
        display: inline-block; width: 442px; height: 1px; background: #C0C0C0;
        content: '';
    }
    #page_program_clinic #sec_4 .wrap span{ font-size: 25px; letter-spacing: 12.5px;}

    #page_program_clinic #sec_4 li img{ width: calc(50% + 68px); }
    #page_program_clinic #sec_4 li div{ width: 50%;  max-width: 492px; margin: auto; font-size: 25px; }
    #page_program_clinic #sec_4 li p{ margin-top: 30px; font-size: 18px; line-height: 2.78; }
    #page_program_clinic #sec_4 li a{ width: 142px; line-height: 42px; border: solid 0.3px #C0C0C0; background: #fff; }

    #page_program_clinic #sec_4 li:nth-of-type(even){ margin: 190px 0;}
    #page_program_clinic #sec_4 li:nth-of-type(even) div{ text-align: right;}
    #page_program_clinic #sec_4 li:nth-of-type(1) a{ margin-top: 262px;}
    #page_program_clinic #sec_4 li:nth-of-type(n+2):nth-of-type(-n+3) a{ margin-top: 150px;}
    #page_program_clinic #sec_4 li:nth-of-type(4) a{ margin-top: 148px;}


    /* === page_program_symptom === */
    /* bx_bn */
    #page_program_symptom .bx_bn{ margin: 146px auto 170px;}
    #page_program_symptom .bx_bn p{ 
        position: absolute; bottom: 0; right: 0; padding: 70px; 
        text-align: right; line-height: 1.4; font-size: 25px; color: #fff; 
    }

    /* bx_point */
    #page_program_symptom .bx_point p{ width: 268px; margin: 0 auto 94px;}

    /* --- sec_1 */
    #page_program_symptom #sec_1 li span{ margin-top: 90px;}

    /* --- sec_2 */
    #page_program_symptom #sec_2 li div{ text-align: right;}
    #page_program_symptom #sec_2 li span{ margin-top: 26px;}
    #page_program_symptom #sec_2 li a{ margin-left: auto; }


    /* === page_program_case === */
    #page_program_case #sec_1 li span{ margin-top: 154px;}
    #page_program_case #sec_1 li:nth-of-type(1) span{ margin-top: 122px;}
    

    /* === page_program_type === */
    #page_program_type #sec_0 .wrap *{ color: #333;}

    #page_program_type #sec_1 li span{ margin-top: 154px;}
    #page_program_type #sec_3 li { text-align: right;}
    #page_program_type #sec_3 li span{ margin-top: 50px;}
    #page_program_type #sec_3 li a{ margin-left: auto;}

    /* === page_program_special === */
    #page_program_special #sec_0 .wrap *{ color: #333;}
    #page_program_special #sec_1 .bx_list li:nth-of-type(3) div{ max-width: 532px;}

    /* === page_program_extra === */
    #page_program_extra #sec_0 .wrap *{ color: #333;}


    /* === page_program_spa === */
    #page_program_spa #sec_2 .wrap h4{ margin: 190px auto 34px; font-size: 25px;}
    #page_program_spa #sec_2 .wrap p{ font-size: 18px; line-height: 2.22; }
    #page_program_spa #sec_2 .wrap:after{ height: 112px; margin: 50px auto 54px; }

    #page_program_spa #sec_2 ul{ gap: 85px 91px; }
    #page_program_spa #sec_2 li{ width: calc(33.33% - 60.66px);}
    #page_program_spa #sec_2 li:before{  font-size: 25px; }

    /* === page_program_personal === */
    /* --- sec_1 */
    #page_program_personal #sec_1 h4{ margin-top: 190px; font-size: 25px; }

    #page_program_personal #sec_1 .bx_list li:first-of-type{ margin-top: 95px;}
    #page_program_personal #sec_1 .bx_list li img{ width: calc(55% + 68px);}
    #page_program_personal #sec_1 .bx_list li div{ width: 45%; margin: auto auto 0}

    /* --- sec_2 */
    #page_program_personal #sec_2{ padding: 240px 0 260px; text-align: center;}
    #page_program_personal #sec_2 > p{ font-size: 25px; }
    #page_program_personal #sec_2 img{ margin: 96px auto 116px; }

    #page_program_personal #sec_2 .wrap h4{ margin: 30px auto 40px; font-size: 30px; }
    #page_program_personal #sec_2 .wrap p{ line-height: 2.64; font-size: 22px; }
    #page_program_personal #sec_2 .wrap a{ 
        width: 142px; height: 44px; margin-top: 40px; 
        border: 1px solid #C0C0C0; line-height: 42px; 
    }
}
@media screen and (max-width: 1680px){

}
@media screen and (max-width: 1024px){
    /* ==================== common */


    /* ==================== layout */
    /* === page_program_clinic === */
    /* --- sec_1 */
    #page_program_clinic #sec_1 p{ width: 100%; text-align: center;}
    #page_program_clinic #sec_1 p:first-of-type{ padding: 60px 30px; line-height: 1.57; }
    #page_program_clinic #sec_1 p:last-of-type{ padding: 30px 30px 60px; }
    #page_program_clinic #sec_1 img{ position: relative; left: -30px; width: calc(100% + 60px);}

    /* --- sec_2 */
    #page_program_clinic #sec_2 img{ display: block; width: 100%; max-width: 560px; margin: auto; }
    #page_program_clinic #sec_2 div{ max-width: 240px; margin: 50px auto 98px; text-align: center; font-size: 1.07rem; }
    #page_program_clinic #sec_2 p{ margin-top: 28px; font-size: 0.85rem; line-height: 1.83; }

    /* --- sec_3 */
    #page_program_clinic #sec_3{ padding: 64px 0 75px; }
    #page_program_clinic #sec_3 h4{ font-size: 1.07rem; }
    #page_program_clinic #sec_3 p{ max-width: 275px; margin: 30px auto 10px; font-size: 0.85rem; line-height: 1.83; }
    #page_program_clinic #sec_3 > div{ width: 100%; font-size: .85rem; line-height: 1.5; }
    #page_program_clinic #sec_3 img{ display: block; max-width: 300px; margin: 50px auto 26px;}

    /* --- sec_4 */
    #page_program_clinic #sec_4{ padding: 70px 30px;}
    #page_program_clinic #sec_4 .wrap h4{ margin: 10px 0; font-size: 1.07rem; }
    #page_program_clinic #sec_4 .wrap span{ font-size: 0.85rem; }

    #page_program_clinic #sec_4 ul{ max-width: 560px; margin: auto; }
    #page_program_clinic #sec_4 li{ position: relative; flex-flow: column nowrap; margin-top: 40px;}
    #page_program_clinic #sec_4 li *{ text-align: center; color: #fff;}
    #page_program_clinic #sec_4 li img{ width: 100%;}
    #page_program_clinic #sec_4 li div{
        position: absolute; left: 0; bottom: 0; 
        width: 100%; padding: 8px;
        line-height: 1.2; font-size: 1.07rem; 
    }
    #page_program_clinic #sec_4 li p{ margin-top: 4px; font-size: 0.85rem; }
    #page_program_clinic #sec_4 li p:first-of-type{ margin-top: 18px;}
    #page_program_clinic #sec_4 li a{ width: 100%; height: 40px; margin-top: 20px; border: 1px solid #fff; line-height: 38px;}

    /* === page_program_symptom === */
    /* bx_bn */
    #page_program_symptom .bx_bn img{ 
        display: block; max-width: 560px; margin: auto; border-radius: 50%;
    }
    #page_program_symptom .bx_bn p { 
        margin: 36px auto 54px; text-align: center; font-size: 0.85rem; color: #333; line-height: 1.83; 
    }
    
    /* === page_program_spa === */
    #page_program_spa #sec_2 .wrap h4{ margin: 30px auto; font-size: 1.07rem;}
    #page_program_spa #sec_2 .wrap p{ font-size: 0.85rem;  line-height: 1.83; }
    #page_program_spa #sec_2 .wrap:after{ height: 52px; margin: 24px auto; }

    #page_program_spa #sec_2 ul{ justify-content: center; gap: 40px; }
    #page_program_spa #sec_2 li{ width: calc(50% - 20px); max-width: 300px;}
    #page_program_spa #sec_2 li:before{ font-size: 1rem; }


    /* === page_program_personal === */
    /* --- sec_1 */
    #page_program_personal #sec_1 h4{ margin-top: 60px; font-size: 1.07rem; }

    #page_program_personal #sec_1 .bx_list{ max-width: unset; margin-bottom: 0; }
    #page_program_personal #sec_1 .bx_list li:first-of-type{ max-width: 560px; margin: auto;}

    #page_program_personal #sec_1 .bx_list li:last-of-type{ position: relative; left: -30px; width: calc(100% + 60px); margin-top: 100px; }
    #page_program_personal #sec_1 .bx_list li:last-of-type img{ height: 380px; object-fit:cover;}
    #page_program_personal #sec_1 .bx_list li:last-of-type p{ margin-bottom: 16px;}

    /* --- sec_2 */
    #page_program_personal #sec_2{ position: relative; top: -200px; max-width: 560px; }
    #page_program_personal #sec_2 *{ color: #fff; text-align: center; font-size: 0.85rem; font-weight: 300; }
    #page_program_personal #sec_2 > *:not(img){
        position: absolute; 
    }
    #page_program_personal #sec_2 > p{ top: 45px; left: 0; right:0; margin: auto; font-size: 0.92rem;}
    #page_program_personal #sec_2 .wrap{ 
        top: 0; left: 0; 
        display: flex; flex-flow: column nowrap; justify-content: space-between; 
        width: 100%; height: 100%; padding: 80px 38px 12px;  
    }
    #page_program_personal #sec_2 .wrap p{  line-height: 2; }
    #page_program_personal #sec_2 .wrap a{ 
        width: 100%; height: 40px; border: 1px solid #fff; line-height: 38px;
    }
}
@media screen and (max-width: 560px){
    /* ==================== common */
    /* --- sec_cm_2 */
    .sec_cm_2 .swiper-scrollbar{ bottom: 130px; }

    /* ==================== layout */
    /* === page_program_spa === */
    #page_program_spa #sec_2 ul{ flex-flow: column nowrap; align-items: center; }
    #page_program_spa #sec_2 li{ width: 100%; max-width: 198px;}
}