/* 공통 */
section {letter-spacing: 0;}
.moreBtn {width: 16rem; letter-spacing: -.025em;}

@media(max-width:768px) {
    .moreBtn {width: 18rem;}

    .font-40 {font-size: 2.75rem;}
    .font-30 {font-size: 2.25rem;}
}

/* 해더 */
header#lng {position: sticky; left: 0; top: 0; width: 100%; background: #0f297a; z-index: 10; height: 4rem; display: flex; align-items: center;}
header#lng .bar {display: flex; justify-content: space-between; align-items: center; width: 100%;}
header#lng .logo img {width: 11.25rem;}
header#lng .gnb {display: flex; align-items: center; width: 75%; text-align: center; justify-content: space-between;}
header#lng .gnb a {color: #fff;}

header#lng .hamburger {width: 2.5rem; height: calc(8px + 1rem); position: relative; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg);   -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer;}
header#lng .hamburger span {display: block; position: absolute; height: 2px; width: 100%; background: #fff; opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;}

header#lng .hamburger span:nth-child(1) {top: 0px;}
header#lng .hamburger span:nth-child(2),
header#lng .hamburger span:nth-child(3) {top: .8rem;}
header#lng .hamburger span:nth-child(4) {top: 1.6rem;}

header#lng .hamburger.open span:nth-child(1) {top: .5rem; width: 0%; left: 50%;}
header#lng .hamburger.open span:nth-child(2) {-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);}
header#lng .hamburger.open span:nth-child(3) {-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);}
header#lng .hamburger.open span:nth-child(4) {top: .5rem; width: 0%; left: 50%;}

@media(max-width:1550px) {
    header#lng .bar {width: 90%;}
}

@media(max-width:990px) {
    header#lng {height: 6.25rem;}
    header#lng .logo img {width: 18rem;}
    header#lng .lngBtn img {width: 2rem;}

    header#lng .gnb {position: absolute; left: 0; top: 6.25rem; background: #0f297a; height: calc(100vh - 6.25rem); width: 100%; font-size: 3.125rem; flex-direction: column; padding: 5rem 0; border-top: 1px solid rgba(255, 255, 255, 0.2); gap: 1.5rem; overflow-y: auto; opacity: 0; visibility: hidden; transition: opacity .3s;}
    header#lng .gnb.open {opacity: 1; visibility: visible;}

    header#lng .right {display: flex; gap: 2rem; align-items: center;}
}

/* 메인상단 */
#Main {background-image: url("/img/lng/main_bg.webp"); background-repeat: no-repeat; background-size: cover; background-position: center; color: #fff; height: 54rem; display: flex; align-items: flex-start; justify-content: flex-start;}
#Main .container {width: 100%;}
#Main .cont {width: 100%;}
#Main ul {max-width: 42rem; width: 100%;}
#Main li {display: flex; align-items: flex-start; gap: .625rem; padding: 1.5rem 2.5rem; background: rgba(40, 80, 163, .5); border-radius: .625rem;}
#Main li:nth-child(n+2) {margin-top: .625rem;}
#Main li img {width: 1.45rem; filter: brightness(0) invert(1); margin-top: .5rem;}
#Main .btnWrap {display: flex; gap: 1.25rem;}

@media(max-width: 1550px) {
    #Main .container {width: 90%;}
}

@media(max-width:768px) {
    #Main {height: 90rem; display: block; padding: 50px 0; background-image: url("/img/lng/main_bgm.webp");}
    #Main ul {max-width: 100%;}
    #Main li img {width: 1.75rem; margin-top: .625rem;}
}

#Director {background-image: url("/img/lng/doctor.png"); background-repeat: no-repeat; background-position: 0 100px; background-size: contain; max-width: 1980px; width: 100%; margin: auto;}
#Director .item {margin-top: 2.5rem;}
#Director .cont {display: flex; align-items: flex-end; justify-content: flex-end;}
#Director .textbox {width: 55%;}
#Director ul {margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #95918c;}
#Director ul li {position: relative; padding-left: 1.5rem;}
#Director ul li:nth-child(n+2) {margin-top: .625rem;}
#Director ul li:after {position: absolute; left: 0; top: 0; content: "·"; font-weight: 700;}

@media(max-width:1240px) {
    #Director {background-position: -20% 100px;}
}

@media(max-width:990px) {
    #Director {background-image: none; padding-bottom: 0;}
    #Director .cont {flex-direction: column; gap: 3.5rem;}
    #Director .textbox {width: 100%; order: -1;}
}

#Why {max-width: 1800px; width: 100%; margin: auto; background: #d0a682; border-radius: 2.5rem;}
#Why .label {color: #fff; width: fit-content; margin: auto; padding: 1rem 2rem; background: #b68b66; border-radius: 9px;}
#Why .item {background: #fff; padding: 3.5rem; display: flex; align-items: center; gap: 2rem; border-radius: 1.25rem;}
#Why .item .icon {width: 7.5rem;}
#Why .item .textbox {width: calc(100% - 9.5rem);}

@media(max-width:768px) {
    #Why .item .icon {width: 9rem;}
    #Why .item .textbox {width: calc(100% - 11.5rem);}
}

@media(max-width:500px) {
    #Why .item {flex-direction: column; padding: 3.5rem 2rem;}
    #Why .item .textbox {width: 100%; text-align: center;}
}

#OneStop .flexList {--y-gap: 5rem;}
#OneStop .box {display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem; position: relative;}
#OneStop .box:after {position: absolute; left: -1.5rem; top: .7rem; content: ">"; font-size: 1.25rem; color: var(--pointcolor); font-weight: 700; z-index: 1;}
#OneStop .box:nth-child(1):after {display: none;}
#OneStop .box h4 {height: 5rem; display: flex; align-items: center; justify-content: center;}
#OneStop .box .label {width: fit-content; margin: auto; background: var(--pointcolor); color: #fff; padding: .5rem 1.25rem; border-radius: 100px; position: relative;}
#OneStop .box .label:after {position: absolute; left: 50%; top: 1.5rem; width: 20rem; height: 1px; background: var(--pointcolor); content: ""; z-index: -1;}
#OneStop .box:last-child .label:after {display: none;}
#OneStop .box img {border-radius: 1.25rem;}

@media(max-width:990px) {
    #OneStop .box:after {font-size: 2rem; top: .1rem;}
    #OneStop .box:nth-child(3):after {display: none;}
    #OneStop .box .label:after {width: 35rem;}
    #OneStop .box:nth-child(2) .label:after {display: none;}
}

@media(max-width:768px) {
    #OneStop .box .label:after {width: 29rem;}
}

@media(max-width:500px) {
    #OneStop .box .label:after {transform: translateX(-50%); max-width: 500px; display: block !important;}
    #OneStop .box:after {transform: translateX(-50%) rotate(90deg); left: 50%; top: -4rem;}
    #OneStop .box:nth-child(3):after {display: block;}
}

#Treatment .label {width: fit-content; margin: auto; padding: 1rem 2rem; background: #ede3d6; border-radius: 9px;}
#Treatment .flexList {--y-gap: 3rem;}

#Treatment .contBox {padding: 5rem 0; background: #e9ddce; border-radius: 1.25rem; max-width: 1800px; width: 95%; margin: 2rem auto 0;}
#Treatment .contBox .item {background: #fff; border-radius: 1.25rem; padding: 5rem 5%;}
#Treatment .contBox .item .flexbox {display: flex; gap: 7.5%;}
#Treatment .contBox .item img {border-radius: 1.25rem;}

#Treatment .contBox .item li {padding-left: 1.75rem; position: relative;}
#Treatment .contBox .item li:nth-child(n+2) {margin-top: .375rem;}
#Treatment .contBox .item li:after {position: absolute; left: 0; top: .625rem; width: 1.125rem; height: 100%; content:""; background-image: url("/img/sub/chk-b.png"); background-repeat: no-repeat; background-size: contain;}

#Treatment .contBox .item .dot {padding-left: 1.75rem; position: relative;}
#Treatment .contBox .item .dot:after {position: absolute; left: 0; top: 0; content: "•"; color: var(--pointcolor);}

@media(max-width:1440px) {
    #Treatment .contBox .item .flexbox {gap: 5%;}
    #Treatment .contBox .item .rightbox {width: 60%;}
}

@media(max-width:990px) {
    #Treatment .contBox .item .flexbox {flex-direction: column; gap: 3.5rem;}
    #Treatment .contBox .item .leftbox,
    #Treatment .contBox .item .rightbox {width: 100%;}
}

@media(max-width:768px) {
    #Treatment .contBox .item li {padding-left: 2.25rem;}
    #Treatment .contBox .item li:after {width: 1.375rem; top: .75rem;}
}


#Bfaf .tabs {max-width: 1410px; width: 90%; margin: auto;}
#Bfaf .tabs .box {background: #e9ddce; border-radius: .625rem; overflow: hidden;}
#Bfaf .tabs .box a {width: 100%; padding: 1rem; display: block;}
#Bfaf .tabs .box.current a {background: var(--pointcolor); color: #fff;}

#Bfaf .tab-content {display: none;}
#Bfaf .tab-content.current {display: block;}

#Bfaf .swiper-slide {display: flex; opacity: .5;}
#Bfaf .swiper-slide-active {opacity: 1;}
#Bfaf .swiper-slide .box {width: 50%;}

#Bfaf .swiper-slide .box p {color: #fff; padding: 1rem;}
#Bfaf .swiper-slide .box.bf {background: var(--dark-gray);}
#Bfaf .swiper-slide .box.af {background: var(--pointcolor);}

#Bfaf .swiper-pagination {max-width: 1600px; width: 90%; margin: 5rem auto 0; position: initial; background: #fff;}
#Bfaf .swiper-pagination-progressbar-fill {background: var(--pointcolor);}

@media(max-width:500px) {
    #Bfaf .flexList {--x-gap: .625rem; --y-gap: .625rem;}
    #Bfaf .font-20 {font-size: 1.5rem;}
}

#Promises .item {justify-content: flex-end}
#Promises .item:nth-child(n+2) {margin-top: 1rem;}

#Promises .item .textbox {padding: 2.5rem 5rem; background: #fff; border-radius: 100px; transform: translateY(-10rem);}
#Promises .item .subTitle {display: flex;}
#Promises .item .subTitle span {color: var(--pointcolor); padding-right: 1.5rem; position: relative; display: inline-block;}
#Promises .item .subTitle span:After {position: absolute; right: .75rem; top: .75rem;  content: ""; width: 1px; height: 1rem; background: #bfbfbf;}
#Promises .item p {padding-left: 3.5rem;}

@media(min-width:991px) {
    #Promises .item .textbox {cursor: pointer; transition: .3s;}
    #Promises .item.active .textbox {background: var(--pointcolor); color: #fff;}
    #Promises .item.active .subTitle span {color: #e6c389;}
}

@media(max-width:1240px) {
    #Promises .item .textbox {padding: 2rem 3.5rem;}
}

#Promises .item .imgbox {border-radius: 1.25rem; overflow: hidden; position: absolute; left: 0; top: 0; width: 45%; height: max-content; opacity: 0; transition: .3s;}
#Promises .item.active .imgbox {opacity: 1;}
#Promises .item .imgbox img {height: 100%; width: 100%; object-fit: cover;}

@media(max-width:990px) {
    #Promises .item {--y-gap: 2.5rem;}
    #Promises .item:nth-child(n+2) {margin-top: 3.5rem;}
    #Promises .item .imgbox {position: initial; width: 100%; opacity: 1;}
    #Promises .item .textbox {transform: none; border-radius: 1.25rem;}
}

@media(max-width:768px) {
    #Promises .item .textbox {padding: 2.5rem 3rem;}
    #Promises .item .subTitle span {padding-right: 2rem;}
    #Promises .item .subTitle span:After {height: 1.5rem; right: 1rem;}
    #Promises .item p {padding-left: 4rem;}
}

#Process .textbox {padding: 0 5rem;}
#Process .imgbox {border-radius: 1.25rem; overflow: hidden;}

@media(min-width:991px) {
    #Process {padding-top: 50px;}
}

@media(max-width:990px) {
    #Process .box:nth-child(1) {order: 1;}
    #Process .box:nth-child(2) {order: 2;}
    #Process .box:nth-child(3) {order: 4;}
    #Process .box:nth-child(4) {order: 3;}
    #Process .box:nth-child(5) {order: 5;}
    #Process .box:nth-child(6) {order: 6;}
    #Process .box:nth-child(7) {order: 8;}
    #Process .box:nth-child(8) {order: 7;}
    #Process .box:nth-child(9) {order: 8;}
    #Process .box:nth-child(10) {order: 10;}

    #Process .textbox {padding: 1.5rem 0 3.5rem;}
}

#FAQ {background: #002154;}
#FAQ .item {background: #fff; padding: 2rem 3rem; border-radius: 1.25rem; position: relative; cursor: pointer;}
#FAQ .item:nth-child(n+2) {margin-top: 1.5rem;}
#FAQ .item:after {position: absolute; right: 3rem; top: 2rem; content: ">"; font-weight: 700; transform: rotate(90deg);}
#FAQ .item.item.active:after {transform: rotate(270deg);}
#FAQ .item .Qbox {display: flex; align-items: flex-start; gap: 1.5rem; width: 90%;}
#FAQ .item .Qbox span {width: 3rem; height: 3rem; border-radius: 50%; background: #002154; color: #fff; text-align: center; line-height: 3rem;}
#FAQ .item .Abox {padding-left: 4.5rem;}

@media(max-width:768px) {
    #FAQ .item .Qbox span {width: 4rem; height: 4rem; line-height: 4rem;}
    #FAQ .item .Qbox h3 {width: calc(100% - 5.5rem);}
    #FAQ .item .Abox {padding-left: 5.5rem;}
}

#Location {background: #333333;}
#Location .wrap_map {height: 30rem; position: relative; z-index: 1;}

#Location .item {display: flex; align-items: flex-start; gap: 2rem;}
#Location .subTitle {width: 13rem; text-align: center; border-bottom: 1px solid var(--sub2color); padding-bottom: .625rem;}
#Location .tel span {font-weight: 200;}

#Location .nav {display: flex; justify-content: flex-start; gap: 1rem;}
#Location .nav a {display: flex; align-items: center; justify-content: center; width: 11.25rem; padding: .75rem; border-radius: 100px; gap: .5rem;}
#Location .nav a.naver {background: #fff;}
#Location .nav a.kakao {background: #fbe616;}
#Location .nav a.tmap {background: linear-gradient(to right, #145bf1, #ad36c1); color: #fff;}

#Location .kakaoBtn {background: #fbe616; display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 2rem; width: fit-content; border-radius: 100px;}
#Location .kakaoBtn img {width: 1.5rem;}

#Location .timeTable li {display: flex;}
#Location .timeTable li .day {width: 16rem;}
#Location .timeTable li .time {width: calc(100% - 16rem); font-variant-numeric: tabular-nums; font-weight: 700;}
#Location .timeTable li .time span {font-weight: 300;}

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

@media(max-width:990px) {
    #Location .nav a {width: calc(100% / 3);}
    #Location .nav a img {transform: scale(0.8);}
}

@media(max-width:768px) {
    #Location .subTitle {width: 18rem;}
    #Location .kakaoBtn img {width: 2rem;}

    #Location .timeTable li .day {width: 20rem;}
    #Location .timeTable li .time {width: calc(100% - 20rem);}
}

@media(max-width:680px) {
    #Location .item {flex-direction: column;}
}

@media(max-width: 500px) {
    #Location .nav a {gap: 0;}
    #Location .nav a img {transform: scale(0.6);}
}