/* 공통 */
.sub  {overflow-x: clip;}
.bgTxt {font-size: 6.25rem; letter-spacing: .075em; font-weight: 700; color: #edfcf3; width: 100%; white-space: nowrap; line-height: 1; text-align: center;}

#bgTxt {padding: 50px 0 80px;}

@media(max-width:768px) {
    #bgTxt {padding: 25px 0 40px;}
}

/* 탭 */
#tabs {padding: 70px 0 100px;}
#tabs ul {gap: 1rem;}
#tabs li a {display: block; border: 1px solid var(--pointcolor); border-radius: .5rem; width: 12rem; margin: auto; text-align: center; padding: 1rem; color: var(--pointcolor);}
#tabs li.active a {background: var(--pointcolor); color: #fff; font-weight: 600;}

@media(max-width:768px) {
    #tabs {padding: 70px 0 80px;}
    #tabs ul {width: 90%; margin: auto;}
    #tabs li {width: 50%;}
    #tabs li a {width: 100%;}
}

/* 정의 */
#definition .imgbox img {border-radius: .75rem; overflow: hidden;}
#definition .bgTxt {position: absolute; left: 50%; transform: translateX(-50%); bottom: -3.5rem; z-index: -1;}

#definition .flexList {--x-gap: 0rem; --y-gap: 3.5rem;}

#definition2 .flexList {--x-gap: 0rem; --y-gap: 3.5rem;}
#definition2 .imgbox {border: 1px solid var(--sub2color); border-radius: .75rem; overflow: hidden;}
#definition2 .textbox {padding-left: 6.5%;}

#definition2 .causebox {background: #e8f9f2; border-radius: 1.25rem; padding: 3rem 0;}
#definition2 .causebox .flexList {--x-gap: 1.5rem; max-width: 1200px; width: 90%; margin: auto;}
#definition2 .causebox .icon {width: 10.625rem;}

@media(max-width:990px) {
    #definition2 .textbox {padding-left: 0; order: -1; text-align: center;}
    #definition2 .causebox .flexList {max-width: 40rem;}
}

@media(max-width:500px) {
    #definition2 .causebox .flexList {max-width: 25rem;}
}

/* 종류 */
#typical .tabs {text-align: center; color: var(--pointcolor); max-width: 60rem; width: 100%; margin: auto; --x-gap: .625rem; --y-gap: .625rem;}
#typical li {border: 1px solid var(--pointcolor); padding: 1rem 0; border-radius: .5rem; transition: .3s; cursor: pointer;}
#typical li.current {background: var(--pointcolor); color: #fff; font-weight: 600;}

#typical .typicalSwiper {width: 85%; margin: auto;}
#typical .swiper-slide {display: flex; justify-content: center; align-items: center;}
#typical .imgbox {border: 1px solid var(--sub2color); border-radius: .75rem; overflow: hidden;}
#typical .textbox {padding-left: 6.5%;}

#typical .swiperBtn {display: flex; width: 100%; justify-content: space-between; position: absolute; top: 55%; transform: translateY(-50%);}
#typical .swiperBtn > div {position: initial;}
#typical .swiperBtn > div:after {font-size: 1.5rem; color: var(--pointcolor); font-weight: 700;}

@media(max-width:1024px) {
    #typical .tabs {max-width: 85%;}
    #typical .swiper-slide {flex-direction: column; gap: 2.5rem;}
    #typical .imgbox,
    #typical .textbox {width: 100%; padding-left: 0;}

    #typical .textbox br.hidden-md,
    #typical .textbox br.hidden-lg {display: block !important;}
}

@media(max-width:768px) {
    #typical .tabs {max-width: 100%;}
    #typical .typicalSwiper {width: 100%;}
    #typical .swiperBtn {display: none;}
}

@media(max-width:500px) {
    #typical .textbox br.hidden-md,
    #typical .textbox br.hidden-lg {display: none !important;}
}

/* 과정 */
#process .wrap {max-width: 1720px; width: 100%; margin: auto;}
#process .box {border: 1px solid var(--sub2color); border-radius: .75rem;  position: relative;}
#process .box:nth-child(n+2):after {position: absolute; left: -2rem; top: 80%; transform: translateY(-50%); content: ">"; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--pointcolor); font-family: 'SUIT', sans-serif; color: #fff; font-weight: 700; line-height: 2.5rem;}
#process .imgbox {border: 1px solid var(--sub2color); border-radius: .75rem; overflow: hidden;}
#process .textbox {padding: 3rem 0;}
#process .label {width: fit-content; background: var(--pointcolor); color: #fff; padding: .625rem 1.5rem; line-height: 1; border-radius: 100px; margin: auto;}

@media(max-width:1800px) {
    #process .wrap {width: 90%;}
}

@media(max-width:1550px) {
    #process .box:nth-child(4):after {display: none;}
}

@media(max-width:990PX) {
    #process .box:nth-child(3):after {display: none;}
    #process .box:nth-child(5):after {display: none;}
    #process .box:nth-child(4):after {display: block;}
}

@media(max-width:768px) {
    #process .box:nth-child(n+2):after {top: -2.5rem; left: 50%; transform: translateX(-50%) rotate(90deg); width: 3.5rem; height: 3.5rem; line-height: 3.7rem; display: block !important;}
    #process .box[data-aos="fade-right2"] {transform: translate3d(0, -30px, 0);}
    #process .box[data-aos="fade-right2"].aos-animate {transform: translate3d(0, 0, 0);}
}

/* 절차 */
#process2 {background: #f8f8f8; position: relative;}
#process2 .flexList {--y-gap: 3.5rem;}
#process2 .Num {width: 4.375rem; aspect-ratio: 1 / 1; border-radius: 50%; background: var(--pointcolor); margin: auto; position: relative; line-height: 4.375rem; color: #fff; font-weight: 600; z-index: 1;}
#process2:after {position: absolute; left: 10%; top: 50%; width: 80%; height: 1px; background: var(--pointcolor); content: ""; opacity: 0; transition-duration: 1s; transition-delay: .2s;}
#process2.aos-animate:after {opacity: 1;}

@media(max-width:768px) {
    #process2:after {display: none;}
    #process2 .flexList {max-width: 420px; width: 100%; margin: auto;}
}

/* 장비 */
#equipm .imgbox {border: 1px solid var(--sub2color); border-radius: .75rem; overflow: hidden; width: fit-content; margin: auto;}
#equipm .imgbox img {width: 100%; height: 100%; object-fit: cover;}
#equipm .name {width: max-content; background: var(--pointcolor); color: #fff; padding: 1rem 3rem; line-height: 1; border-radius: 100px; position: absolute; left: 50%; transform: translateX(-50%); bottom: 2.5rem;}

@media(max-width:768px) {
    #equipm .imgbox {aspect-ratio: 1 / .8; width: 100%;}
}

@media(max-width:360px) {
    #equipm .title br {display: none;}
    #equipm .name {width: 100%;}
}

/* 맞춤형 치료 */
#customized .item:nth-child(n+2) {margin-top: 1.5rem;}

#customized .item .textbox {background: #fafafa; border: 1px solid var(--sub2color); border-radius: .75rem; padding: 2rem; position: relative; width: 40%;}
#customized .item .textbox:after {position: absolute; right: -1.5rem; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-style: solid; border-width: .75rem 0px .75rem 1.5rem; border-color: transparent transparent transparent var(--pointcolor); content: "";}

#customized .item .imgbox {border: 1px solid var(--sub2color); border-radius: .75rem; overflow: hidden; position: absolute; right: 0; top: 0; width: 50%; height: 100%; opacity: 0; transition: .3s;}
#customized .item.active .imgbox {opacity: 1;}
#customized .item .imgbox img {height: 100%; width: 100%; object-fit: cover;}

@media(max-width:1240px) {
    #customized .item .textbox {width: 45%;}
}

@media(min-width:991px) {
    #customized .item .textbox {transition: .3s; cursor: pointer;}
    #customized .item .textbox .text {opacity: .6; transition: .3s;}
    #customized .item .textbox:after {opacity: 0; transition: .3s;}

    #customized .item.active .textbox {background: var(--pointcolor); color: #fff;}
    #customized .item.active .textbox:after {opacity: 1;}
    #customized .item.active .textbox .text {opacity: 1;}
}

@media(max-width:990px) {
    #customized .item:nth-child(n+2) {margin-top: 3rem;}
    #customized .item .box {width: 100% !important;}
    #customized .item .textbox {background: var(--pointcolor); color: #fff;}
    #customized .item .textbox:after {right: auto; left: 50%; transform: translateX(-50%) rotate(90deg); top: auto; bottom: -2rem; border-width: 1.5rem 0px 1.5rem 2rem;}

    #customized .item .imgbox {position: initial; opacity: 1; margin-top: 2rem;}
}

/* 질문 */
#faq .item {cursor: pointer;}
#faq .item:nth-child(n+2) {margin-top: 1.5rem;}

#faq .item .box {padding: 1.125rem 6rem; border-radius: .75rem; overflow: hidden; border: 1px solid var(--sub2color); position: relative;}
#faq .item .box:after {position: absolute; left: 2rem; top: 1rem; width: 3.125rem; height: 3.125rem; border-radius: 50%; font-size: 1.875rem; font-weight: 600; text-align: center; line-height: 2.9rem; color: var(--pointcolor); border: 1px solid var(--sub2color);}

#faq .item .question {background: #fafafa;}
#faq .item .question:after {content: "Q"; background: #e8f9f2;}
#faq .item .question:before {position: absolute; right: 2rem; top: 1rem; width: 3.125rem; height: 3.125rem; border-radius: 50%; font-family: 'Material Symbols Outlined'; font-size: 2.25rem; font-weight: 600; text-align: center; line-height: 3.125rem; color: var(--pointcolor); border: 1px solid var(--sub2color); content: "\e145"; background: #e8f9f2;}
#faq .item.active .question {background: var(--pointcolor); color: #fff; border-color: var(--pointcolor)}
#faq .item.active .question:before {content: "\e15b";}

#faq .item .answer {background: #e8f9f2; padding-right: 2rem;}
#faq .item .answer:after {content: "A"; background: #fff;}


@media(max-width:768px) {
    #faq .item .box {padding: 1.125rem 5.5rem;}
    #faq .item .box:after {left: 1.5rem;}
    #faq .item .question:before {right: 1.5rem;}
}

/* 병원소개 */
#intro .cont {display: flex;}
#intro .title {padding-right: 5%;}

@media(max-width:1440px) {
    #intro .title {width: 45%;}
    #intro .textbox {width: 55%;}
}

@media(max-width:1240px) {
    #intro .title {width: 40%;}
    #intro .textbox {width: 60%;}
}

@media(max-width:990px) {
    #intro .cont {flex-direction: column; gap: 3.5rem;}
    #intro .title {width: 100%;}
    #intro .textbox {width: 100%;}
}


/* 의료진 */
#doctor .flexList {--x-gap: 0rem;}
#doctor .textbox {padding-left: 0;}
#doctor .imgbox {padding-right: 7.5%;}

@media(max-width:990px) {
    #doctor .imgbox {padding-right: 0;}
}

/* 진료과목 */
#subject {background-image: url("/img/sub/subject_bg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center;}
#subject .flexList {--x-gap: 0rem; --y-gap: 3.5rem;}
#subject .textbox {padding-right: 7.5%;}
#subject .imgbox {border: 1px solid var(--sub2color); border-radius: .75rem; overflow: hidden;}
#subject li {display: flex; align-items: center; background: #fff; padding: 1rem 2rem; border: 1px solid var(--sub2color); border-radius: .5rem;}
#subject li:nth-child(n+2) {margin-top: .625rem;}

@media(max-width:768px) {
    #subject .textbox {padding-right: 0%;}
}

/* 솔루션 */
#solution .textbox {padding: 0 5%;}
#solution .imgbox {border: 1px solid var(--sub2color); border-radius: .75rem; overflow: hidden;}

@media(max-width:990px) {
    #solution .textbox {padding: 1rem 0 3.5rem;}

    #solution .box:nth-child(1) {order: 2;}
    #solution .box:nth-child(2) {order: 1;}
    #solution .box:nth-child(3) {order: 3;}
    #solution .box:nth-child(4) {order: 4;}
    #solution .box:nth-child(5) {order: 6;}
    #solution .box:nth-child(6) {order: 5;}
}

/* 케어시스템 */
#care .flexList {max-width: 1200px; width: 100%; margin: auto; --y-gap: 3.5rem;}
#care .icon img {width: 13.125rem;}

@media(max-width:990px) {
    #care .flexList {max-width: 420px;}
}

/* 증상 */
#symptom .box {padding: 2rem .5rem; border: 1px solid #e3f0ec; border-radius: .75rem;}

/* 증상2 */
#symptom2 {--point-start: 50%; position: relative; background: linear-gradient(to bottom, #fff 0, #fff var(--point-start), #146f4a var(--point-start), #146f4a 100%);}
#symptom2 .imgbox {border: 1px solid var(--sub2color); border-radius: .75rem; overflow: hidden;}
#symptom2 .line {width: 100%; height: 1px; margin: 1rem 0; background: #fff; opacity: 0.3;}

@media(max-width:990px) {
   #symptom2 .flexList {--y-gap: 3.5rem; justify-content: flex-start !important;}
}

@media(max-width:768px) {
   #symptom2 .flexList {--y-gap: 3.5rem;}
}

/* 증상3 */
#symptom3 {background-image: url("/img/sub/hearingLoss/symptom3_bg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center;}
#symptom3 .flexList {--y-gap: 3.5rem;}
#symptom3 li {background: #fff;  border: 1px solid var(--sub2color); border-radius: .75rem; padding: 1rem 2rem;}
#symptom3 li:nth-child(n+2) {margin-top: 1rem;}
#symptom3 li p {display: flex;}

/* 비용 */
#cost .item {padding-bottom: 3.5rem; border-bottom: 1px solid var(--sub2color);}
#cost .item:nth-child(n+2) {padding-top: 3.5rem;}

#cost .flexList {--y-gap: 2.5rem;}

#cost .costbox {background: #fafafa; border: 1px solid var(--sub2color); border-radius: .75rem; padding: 2rem 3.5rem;}
#cost .costbox li {display: flex; justify-content: space-between; align-items: center; padding-bottom: .5rem; border-bottom: 1px solid rgba(17, 138, 88, .3);}
#cost .costbox li:nth-child(n+2) {padding-top: .75rem;}
#cost .costbox li:last-child {border: none;}
#cost .costbox .cost {color: var(--pointcolor);}

#cost .costbox.box2 li.th {padding-bottom: 0; border-bottom: none;}
#cost .costbox.box2 li p:first-child {width: 30%;}
#cost .costbox.box2 li p:nth-child(n+2) {width: 9.25rem;}
#cost .costbox.box2 li p:nth-child(2) {text-align: center;}

@media(max-width:990px) {
    #cost .costbox.box2 li p:nth-child(n+2) {width: 30%;}
}

@media(max-width:500px) {
    #cost .costbox {padding: 2rem;}
    #cost .costbox li .font-30 {font-size: 2rem;}
    #cost .costbox.box2 li p:first-child {width: 20%;}
    #cost .costbox.box2 li p:nth-child(n+2) {width: 11.25rem;}
}

/* 비용2 */
#cost2 {background: #f6f6f6;}
#cost2 .flexList {--y-gap: 3.5rem;}
#cost2 .costbox {padding: 3.5rem; border-radius: .75rem; border: 1px solid var(--sub2color);}

@media(max-width:768px) {
    #cost2 .costbox {padding: 3.5rem 2em;}
}

/* 대상 */
#target {background: #f8f8f8;}
#target .box {background: #fff;  border: 1px solid var(--sub2color); border-radius: .75rem; padding: 1.5rem 3rem;}
#target h3 {display: flex;}

@media(max-width:768px) {
    #target .box {padding: 1.5rem;}
}

/* 주의사항 */
#caution .container {background: #e8f9f2; border-radius: 2.5rem; padding: 5rem 5%;}
#caution ul {max-width: 990px; width: 100%; margin: auto;}
#caution li {background: #fff;  border: 1px solid var(--sub2color); border-radius: .75rem; padding: 1rem 2rem 1rem 5rem; position: relative;}
#caution li:nth-child(n+2) {margin-top: 1rem;}
#caution li:after {position: absolute; left: 2rem; top: 1.25rem; width: 1.5rem; height: 1.37rem; background-image: url("/img/sub/check.png"); background-repeat: no-repeat; background-size: cover; background-position: center; content: "";}

/* 상담 */
#counseling .container {background-repeat: no-repeat; background-size: cover; background-position: center; padding: 80px 5%; border: 1px solid var(--sub2color); border-radius: .75rem; display: flex; align-items: center; justify-content: space-between;}

#counseling.hearingLoss .container {background-image: url("/img/sub/hearingLoss/counseling_bg.jpg");}
#counseling.allergy .container {background-image: url("/img/sub/allergy/counseling_bg.jpg");}

#counseling .moreBtn {margin: 0;}

@media(max-width:990px) {
    #counseling .container  {flex-direction: column; text-align: center; gap: 3.5rem; padding: 50px 5%;}
}

/* 방법 */
#method {background: linear-gradient(to bottom, #eefaf5 70%, #fff) 100%;}
#method .box {padding: 3.5rem; border-radius: .75rem; border: 1px solid var(--sub2color);}
#method .imgbox {border-radius: .75rem; overflow: hidden;}

@media(max-width:768px) {
    #method .box {padding: 3.5rem 2rem;}
}

/* 상담관리 */
#hearingAid .imgbox {border: 1px solid var(--sub2color); border-radius: .75rem; overflow: hidden;}
#hearingAid .flexList {--x-gap: 0rem; --y-gap: 2.5rem;}
#hearingAid .textbox {padding-left: 7.5%;}
#hearingAid li {background: #e8f9f2;  border: 1px solid var(--sub2color); border-radius: .75rem; padding: 1rem 2rem 1rem 4.5rem; position: relative;}
#hearingAid li:nth-child(n+2) {margin-top: 1rem;}
#hearingAid li:after {position: absolute; left: 2rem; top: 1.375rem; width: 1.25rem; height: 1.14rem; background-image: url("/img/sub/check.png"); background-repeat: no-repeat; background-size: cover; background-position: center; content: "";}

@media(max-width:990px) {
    #hearingAid .textbox {padding-left: 0; order: -1;}
}

/* 원인 */
#identify {background: #fafafa;}
#identify .imgbox {padding-right: 5%;}
#identify .imgbox img {border: 1px solid var(--sub2color); border-radius: .75rem; overflow: hidden; }
#identify .textbox {margin-top: 5rem;}
#identify .line {width: 100%; height: 1px; background: #d0e1dc;}
#identify li {display: flex; align-items: start; gap: 2rem;}
#identify li:nth-child(n+2) {margin-top: .625rem;}
#identify li p:nth-child(1) {width: 5rem;}
#identify li p:nth-child(2) {width: calc(100% - 7rem);}

#identify .swiperBtn {display: flex; align-items: center; gap: 1rem; position: absolute; left: 50.5%; bottom: 0;}
#identify .swiperBtn > div {position: initial; width: 4rem; height: 4rem; border-radius: .5rem; border: 1px solid var(--pointcolor); opacity: 1 !important; margin-top: 0; background: var(--pointcolor);}
#identify .swiperBtn > div:after {font-size: 1.5rem; font-weight: 600; color: #fff;}

#identify .swiperBtn > div.swiper-button-disabled {background: #fafafa;}
#identify .swiperBtn > div.swiper-button-disabled:after {color: var(--pointcolor);}

@media(max-width:1240px) {
    #identify .textbox {margin-top: 3.5rem;}
}
 
@media(max-width:990px) {
    #identify .imgbox {padding-right: 0;}
    #identify .swiperBtn {position: initial; margin-top: 1.5rem;}
    #identify .textbox {margin-top: 1.5rem;}
}

@media(max-width:768px) {
    #identify li p:nth-child(1) {width: 7rem;}
    #identify li p:nth-child(2) {width: calc(100% - 9rem);}
}

/* 진단 */
#diagnosis .flexList {--x-gap: 0rem; --y-gap: 3.5rem;}
#diagnosis .imgbox {border: 1px solid var(--sub2color); border-radius: .75rem; overflow: hidden;}
#diagnosis .textbox {padding-left: 6.5%;}


@media(max-width:990px) {
    #diagnosis .textbox {padding-left: 0; order: -1;}
}

/* 비급여 */
#nonebenefit table {width: 100%; border-collapse: collapse; border: 1px solid var(--sub2color);}
#nonebenefit thead {background: var(--pointcolor);} 
#nonebenefit th,
#nonebenefit td {padding: 1rem .5rem; border: 1px solid var(--sub2color); text-align: center;} 
#nonebenefit th { color: #fff; font-weight: 600; }
#nonebenefit td {background: #fafafa;}

@media(max-width:990px) {
    #nonebenefit .cont_box {overflow-x: scroll; padding-bottom: 3rem;}
    #nonebenefit table {width: 1000px;}
}