@charset "UTF-8";
.sub_play { width: 1.2rem; height: 1.2rem; line-height: 1.2rem; font-size: 0.8rem; text-align: center; border-radius: 50%; display: inline-block;  color: #fff; background: #215c00; vertical-align: middle;}

/* 센터소개 */
.about_wrap{ display: flex; flex-wrap: wrap; align-items: center; gap: 3rem 2rem; }
.about_wrap .img{ line-height:0; border-radius:0.5rem; overflow:hidden;}
.about_wrap .img img{ max-width:100%;}
.about_wrap .top_txt{ flex: 1; font-weight: 200; font-size:1rem;}
.about_wrap .top_txt p.bold{ font-size:1.5rem; line-height:1.2;}
.about_wrap .top_txt p.bold strong{ font-weight: 700; color:#215c00;}
.about_wrap .top_txt p + p{ margin-top:2rem;}
.about_wrap .txt{ flex: auto; }
.about_wrap .txt p + p{ margin-top:1.5rem;}

/* 병원별 예약 및 진료실 안내 */
.reserv_wrap > ul { width: calc(100% + 2rem); margin-left: -1rem;}
.reserv_wrap > ul > li {margin: 1rem;width: calc((100% / 3) - 2rem);border: 1px solid #e0e0e0;border-radius: 0.5rem;float: left;}
.reserv_wrap .sub_logo { display: flex; justify-content: center; align-items: center; height: 4.9rem; border-bottom: 2px dotted #e0e0e0;}
.reserv_wrap .cont { padding: 1.5rem;}
.reserv_wrap .cont .on_book { display: block; line-height: 2.5rem; font-size: 0.9rem; color: #010101; text-align: center; border: 1px solid #e0e0e0; border-radius: 0.5rem; margin-top: 1rem; transition: all 0.2s;}
.reserv_wrap .cont .on_book i { font-size: 1rem;}
.reserv_wrap .cont .on_book:hover,
.reserv_wrap .cont .on_book:focus { background: #8ca30a; color: #fff;}

/* 선별검사 */
.test_ul.tab_content { margin-top: 1rem; }
.test_ul.tab_content li + li { margin-top: 0.4rem; padding-top: 0.4rem; border-top: 1px dashed #e0e0e0;}
.test_ul.tab_content .radio_box { margin-top: 0.2rem; padding-left: 1rem;}

/* 선별검사  : 질문지 */
.ptsd_test .tit_util{ margin-bottom:0.5rem;}
.ptsd_test .tit_util .util{ font-size:0.8rem; }
.ptsd_test .qna_wrap > h5{ display: flex; gap: 0 1rem; line-height:1.4; font-size:1rem; font-weight: 600; padding-right:1rem; border-radius:0.5rem; background:#f6f6f6;}
.ptsd_test .qna_wrap > h5 i{ display: flex; align-items: center; justify-content: center; min-width:3rem; font-size:1.5rem; color:#fff; border-radius:0.5rem; box-shadow:0 0 5px rgba(42, 105, 0, 0.5); background:#2a6900;}
.ptsd_test .qna_wrap > h5 span{ padding:0.75rem 0; line-height:1.5rem;}
.ptsd_test .qna_wrap li{ display: flex; gap: 0 0.25rem; padding:1rem 0; line-height:1.3rem; }
.ptsd_test .qna_wrap li .num{ font-weight: 700; }
.ptsd_test .qna_wrap li + li{ border-top:1px dashed #ccc; }
.ptsd_test .qna_wrap li > p{ position:relative; flex: 1; padding-left:1.5rem; margin-right:1rem; color:#000; }
.ptsd_test .qna_wrap li > p:before{ content:""; position:absolute; left:0; top:0.65rem; border-top:1px solid #444; width:1rem; }
.ptsd_test .qna_wrap li > .item{ display:flex; gap:0.4rem 1rem; flex-wrap:wrap; min-width: 20rem; justify-content: end; }
.ptsd_test .qna_wrap .YN li > .item{ min-width:7rem;}
.ptsd_test .qna_wrap li input,
.ptsd_test .qna_wrap li label{ vertical-align: middle;}

/* 선별검사 : radio button */
.ptsd_test .radio_box input[type="radio"] + label {position:relative; display:flex; align-items:center; gap:0.3rem; cursor: pointer; font-size:0.85rem; font-weight:400; color:#555; letter-spacing:0px; transition: all 0.2s ease; }
.ptsd_test .radio_box input[type="radio"] + label:before {content:'';  position:relative; width: 0.8rem; height:0.8rem; background:#fff; border:3px solid #fff; outline:2px solid #555555; padding-left:0px!important; border-radius:50%; transition: all 0.2s ease; }
.ptsd_test .radio_box input[type="radio"]:checked + label:before { background:#555555; }
.ptsd_test .radio_box input[type="radio"]:hover + label,
.ptsd_test .radio_box input[type="radio"]:focus + label,
.ptsd_test .radio_box input[type="radio"]:checked + label { color:#000; font-weight: 700; font-size:0.85rem; }
.ptsd_test .radio_box input[type="radio"]:hover + label,
.ptsd_test .radio_box input[type="radio"]:focus + label{ text-decoration: underline;}
.ptsd_test .radio_box input[type="radio"]:checked + label:before { background:#555555; }
.ptsd_test .radio_box input[type="radio"] {position: absolute; opacity: 0; width: 1px; height: 1px; }

/* 선별검사  : 결과 */
.ptsd_test.result{ padding:1.5rem; border-radius:0.5rem; background:#f5f9f8;}
.ptsd_test.result .tit{ margin:1rem auto 1.5rem; text-align: center;}
.ptsd_test.result .tit h4{ font-size:1.2rem; font-weight: 700; color:#215c00;}
.ptsd_test.result .tit p{ font-size:1rem; color:#333; font-weight: 400;}
.ptsd_test.result .inr{ padding:1.5rem; border-radius:0.5rem; background:#fff; }
.ptsd_test.result .inr .txt{ text-align: center; font-size:1.4rem; font-weight: 200; color:#000; margin-bottom:0.25rem;}
.ptsd_test.result .inr .txt strong{ font-weight: 700; }
.ptsd_test.result .inr .box_st2{ padding:0.5rem 1rem; text-align: center;}
.ptsd_test.result .inr .ty2{ display: flex; gap: 0 0.5rem; justify-content: right; align-items: center;}
.ptsd_test.result .inr .ty2 > p{ width:25%; text-align: center; }
.ptsd_test.result .inr .txt.positive strong{ color:#f00; }

/* PTSD 자가힐링 */
.audioWr .box_st3{ display: flex; align-items: center; gap:0 0.5rem; padding:1rem;}
.audioWr .box_st3 > p{ width:3rem; height:3rem; text-align: center; line-height:3rem; font-size:1.2rem; border-radius: 0.5rem; background:#f5f9f8; color:#215c00;}
.audioWr .box_st3 > strong{ flex: 1;}
.audioWr .box_st3 > button{ width:1.5rem; height:1.5rem; border-radius:50%; padding:0; min-width:0px; }
.audioWr .box_st3 > button i{margin:0; }

@media screen and (max-width:1560px) {
    /* 병원별 예약 및 진료실 안내 */
    .reserv_wrap > ul { width: calc(100% + 1rem); margin-left: -0.5rem;}
    .reserv_wrap > ul > li {margin: 0.5rem; width: calc((100% / 2) - 1rem); }
    .reserv_wrap .cont { padding: 1rem;}
}

@media screen and (max-width:1360px) {
   /* 센터소개 */
   .about_wrap{ align-items: start;}
}

@media screen and (max-width:1100px) {
    /* 선별검사  : 결과 */
    .ptsd_test.result .inr .ty2 > p{ flex:1;}
}

@media screen and (max-width:1024px) {
    
    /* 센터소개 */
    .about_wrap{ flex-direction: column; gap: 1.5rem 0; align-items: center;}

    /* 선별검사  : 질문지 */
    .ptsd_test .qna_wrap li{ flex-wrap: wrap;}
    .ptsd_test .qna_wrap li > .item{ width:100%; min-width:0px; justify-content: start; margin-top:0.5rem; padding-left:3rem;}

}

@media screen and (max-width:820px) {
    /* 선별검사  : 결과 */
    .ptsd_test.result .inr .txt{ font-size:1.2rem;}
    .ptsd_test.result .inr .ty2 > p strong{ display: block;}
}

@media screen and (max-width:768px) {
    .greeting_wrap .inBox { min-height: auto;}
}

@media screen and (max-width:660px) {
    
   /* 센터소개 */
   .about_wrap .top_txt p.bold{ font-size:1.3rem;}

    /* 병원별 예약 및 진료실 안내 */ 
    .reserv_wrap > ul > li { width: calc((100%) - 1rem); }
    .reserv_wrap .sub_logo { height: 3.5rem; }
    .reserv_wrap .cont .on_book { line-height: 1.8rem; font-size: 0.8rem; }

    /* 선별검사  : 질문지 */
    .ptsd_test .qna_wrap > h5{ font-size: 0.9rem;}
    .ptsd_test .qna_wrap .YN li > .item{ min-width:0px; width:100%; margin-top:0.5rem;}

}

@media screen and (max-width:580px) {
 
    /* PTSD 자가힐링 */
    .audioWr .box_st3{ padding:0.5rem 0.75rem;}
    .audioWr .box_st3 > p{ width:2rem; height:2rem; line-height:2rem; font-size:1.1rem;} 
}

@media screen and (max-width:480px) {
    /* 선별검사  : 결과 */
    .ptsd_test.result .inr .box_st2{ font-size:0.8rem;}
    .ptsd_test.result .inr .ty2{ flex-direction: column; gap: 0.25rem 0;}
    .ptsd_test.result .inr .ty2 > p { width:100%;}
    .ptsd_test.result .inr .ty2 > p strong{ display: inline;}
}


@media screen and (max-width:360px) {
    
    /* 센터소개 */
    .about_wrap .top_txt p.bold{ font-size:1.3rem;}
 
     /* 병원별 예약 및 진료실 안내 */ 
     .reserv_wrap > ul > li { width: calc((100%) - 1rem); }
     .reserv_wrap .sub_logo { height: 3.5rem; }
     .reserv_wrap .cont .on_book { line-height: 1.8rem; font-size: 0.8rem; }
 
     /* 선별검사  : 질문지 */
     .ptsd_test .qna_wrap li > p{ padding-left:0.25rem; }
     .ptsd_test .qna_wrap li > p:before{ display: none;}
     .ptsd_test .qna_wrap li > .item{ padding-left:1.75rem;}
 
 
}