@charset "utf-8";

#pri_wrap { width: 1200px; margin: 0 auto; padding-bottom: 150px; position: relative;}
.ctt_admin {text-align:right}

.tab{ position: relative;}
.tab > .tabnav{ display: flex; flex-wrap: wrap; align-items: stretch;}
.tab > .tabnav li{ flex: 0 0 20%; box-sizing: border-box; text-align: center; margin: 0 0 -1px -1px; display: flex;}
.tab > .tabnav li a{ background-color: #fff; border: 1px solid #ddd; font-size:20px; color: #777; line-height:65px; display: flex; align-items: center; 
 justify-content: center; width: 100%;}
.tab > .tabnav li a:hover{ color: #222;}
.tab > .tabnav li a.active{ background-color: #9C895E; border-color: #9C895E; color: #fff; font-weight: 700;}
.tab_else{ margin-top: 70px;}
.pri_top{ padding: 70px 0;}
.pri_info{ display: flex; align-items: center;}
.pri_img{ width: 100%; flex: 5;}
.pri_img img{ width: 100%;}
.pri_txt{ flex: 5; padding-left: 80px;}
.pri_txt h3{ font-family: "Noto Serif KR"; font-size: 18px; color: #666; font-weight: normal; letter-spacing: 0;}
.pri_txt h1{ font-size: 55px; font-weight: normal; font-weight: 500; color: #333; margin: 20px 0 30px 0;}
.pri_txt h2{ font-size: 23px; color: #9C895E; font-weight: normal; font-weight: 500; border-bottom: 1px solid #c5c1b7; padding-bottom: 40px; margin-bottom: 40px;}
.pri_txt p{ font-size: 18px; line-height: 1.8; color: #999;}

.tab .tab .tabnav{ margin-bottom: 50px;}
.tab .tab .tabnav li{ flex:1; box-sizing: border-box; text-align: center; margin: 0 0 -1px -1px;}
.tab .tab .tabnav li a{ background-color: #fff; border: 1px solid #ddd; font-size:17px; color: #777; line-height:45px;}
.tab .tab .tabnav li a:hover{ color: #222;}
.tab .tab .tabnav li a.active{ background-color: #9C895E; border-color: #9C895E; color: #fff; font-weight: 600;}

.pri_box{ position: relative;}
.pri_tit{ font-size: 28px; font-weight: 700; color: #333; margin-bottom: 20px;}
.pri_s{ font-size: 15px; color: #999; font-weight: 300; position: absolute; top: 20px; right: 10px;}
.pri_tit span{ font-size: 20px; color: #c40000; display: inline-block; margin-left: 10px;}
.pri_box ul{ border-top: 1px solid #9C895E;}
.pri_box li{ padding: 30px 30px; border-bottom: 1px dashed #ddd;}
.pri_box dl{ display: flex; justify-content: space-between; align-items: center;}
.pri_box dt{ font-size: 23px; color: #333; font-weight: 500;}
.pri_box dd{ font-size: 28px; font-weight: 700; color: #222; text-align: right;}
.pri_box dd > del{ font-size: 20px; font-weight: 300; color: #999; display: block;}

/*상담연결 : head.php안에 있음*/
#price_btn{ z-index: 21; width: 100%; max-width: 1200px; position: fixed; bottom: 10px; left: 50%; transform: translateX(-50%);}
.btn_consult2 .modal_btn { display: block; width: 100%; padding: 30px ; background-color: #9C895E; border: 0; border-radius: 15px; cursor: pointer; font-size: 30px; font-weight: 500; color: #fff; line-height: 1.2; box-shadow: 0 5px 15px rgba(0,0,0,0.1); transition: all 0.3s; display: flex; justify-content: center; align-items: center;}
.btn_consult2 .modal_btn img{ width: 100%;}
.btn_consult2 .modal_btn span{ display: inline-block; width: 70px; margin-right: 10px;}
.btn_consult2 .modal_btn:hover { border-radius: 5px; background-color: #444; transition: all 0.3s;}

@media screen and (max-width: 1279px) {
    #pri_wrap { width: 95%;}
    .pri_top{ min-height: 350px;}
    #price_btn{ max-width: 100%;}
}
@media screen and (max-width: 1023px) {
    #pri_wrap{ padding-bottom: 80px;}
    .tab > .tabnav li a{ font-size:18px; line-height:50px;}
    .pri_info{ display: block;}
    .pri_img{ flex: none;}
    .pri_txt{ flex: none; padding: 50px 3% 0 3% ;}
    .pri_txt h1{ font-size: 40px;}
    .pri_txt h2{ font-size: 21px;}
    .tab .tab .tabnav{ margin-bottom: 30px;}
    .tab .tab .tabnav li a{ font-size:16px; line-height:40px;}
    .pri_tit{ font-size: 25px;}
    .pri_tit span{ font-size: 18px;}
    .pri_box dt{ font-size: 20px;}
    .pri_box dd{ font-size: 25px;}
    .pri_box dd > del{ font-size: 18px;}
    #price_btn{ bottom: 90px; width: 98%;}
    .btn_consult2 .modal_btn { padding: 15px 30px; border-radius: 8px; font-size: 25px;}
}
@media screen and (max-width: 767px) { 
    #pri_wrap{ padding-bottom: 50px;}
    .tab > .tabnav li{ flex: 0 0 33.3%;}
    .tab > .tabnav li a{ font-size:16px; line-height:45px;}
    .pri_top{ padding: 40px 0;}
    .pri_txt{ padding: 30px 0 0 0;}
    .pri_txt h3{ font-size: 15px;}
    .pri_txt h1{ font-size: 30px; margin: 10px 0 20px 0;}
    .pri_txt h2{ font-size: 20px; line-height: 1.2; padding-bottom: 30px; margin-bottom: 30px;}
    .pri_txt p{ font-size: 17px; line-height: 1.6;}
    .pri_txt p > br{ display: none;}
    .tab .tab .tabnav li{ flex: 0 0 50%;}
    .tab .tab .tabnav li a{ font-size:15px; line-height:1; padding: 10px 0;}
    .pri_box{ margin-top: 30px;}
    .pri_tit{ font-size: 20px; margin-bottom: 10px;}
    .pri_tit span{ font-size: 16px; display: block; margin: 5px 0 0 0;}
    .pri_s{ top: 10px; right: 5px;}
    .pri_box li{ padding: 20px 10px;}
    .pri_box dl{ display: block;}
    .pri_box dt{ font-size: 18px; margin-bottom: 10px;}
    .pri_box dd{ font-size: 20px;}
    .pri_box dd > del{ font-size: 15px;}
    #price_btn{ bottom: 70px; width: 100%;}
    .btn_consult2 .modal_btn { padding: 15px 10px; border-radius: 0px; font-size: 20px;}
    .btn_consult2 .modal_btn span{ width: 45px;}
}

/* Treatment price notes: separate typography from the price. */
#pri_wrap .pri_box dd .clinic-item-desc {
    display: block;
    margin-top: 5px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: #777;
    white-space: normal;
    overflow-wrap: anywhere;
}
@media (max-width: 600px) {
    #pri_wrap .pri_box dd .clinic-item-desc { font-size: 14px; }
}