@import url('https://fonts.googleapis.com/css2?family=Oranienbaum&display=swap');
.oranienbaum-regular {
    font-family: "Oranienbaum", serif;
    font-weight: 400;
    font-style: normal;
}
body{max-width: unset;background: #5a6545; margin: 0 auto; overflow-x: hidden; position: relative; min-height: 100vh}
body:has(main){background: #fff;}

:hover {transition: all 0.2s ease}
* {
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none
}
.draggable {
-webkit-user-select:all;
-moz-user-select:all;
-ms-user-select:all;
user-select:all
}

/**/
header {max-width: 600px; flex-wrap: wrap; position: fixed;left: 50%; transform: translateX(-50%);top: 0;width: 100%;background: #fff;z-index: 990; padding: 10px 20px ; display: flex}
.top-line + header {top: 32px}
body:has(main) header {max-width: unset;}
header.none {background: #fff0;  transition: all 0.3s ease }
header.active {background: #fff!important; transition: all 0.3s ease  }
header > div {width: 100%}
header > div.icon {text-align: right; padding: 10px 0; display: flex; gap: 10px; justify-content: end; align-items: center}
header .logo{position: absolute; left: 50%; top: 50%; transform: translate(calc(-50% + 0.5px), calc(-50% + 0.5px))}
header.sub .logo{left: 20px; transform: translateY(calc(-50% + 0.5px))}
header .logo img{height: 25px; margin-right: 10px}
header select {border: 0; padding: 0!important;   margin:  0!important;  font-size: 1.2em!important; height: fit-content!important;   text-decoration: underline;color: #1e48bc; background: #fff0; width: fit-content!important; display: inline-block!important;}
div.top-line {max-width: 600px; z-index: 990;position: fixed;left: 50%; transform: translateX(-50%);top: 0;width: 100%; display: flex; gap: 10px; justify-content: center; align-items: center; padding: 5px 0; background: linear-gradient(30deg, #393F2E, #5A6545 ,#393F2E); font-weight: 600}
div.top-line a {color: #fff;}
body:has(main) div.top-line {max-width: unset;}
header + .side-menu {opacity: 0;;position: absolute; top: 0;right: -100%;width: 100%;max-width: 600px;height: 100%;background-color: #444;color: white;padding: 20px;transition: right 0.3s ease;z-index: 1000;}
header + .side-menu.active {opacity:1;box-shadow: -2px 0 25px rgba(0, 0, 0, 0.15);right: 0;}
header + .side-menu #closeMenu {background: #fff0; padding: 0; color: #fff}


@media screen and (max-width: 992px) {
    header .logo {left: 20px; top: 50%; transform: translateY(calc(-50% + 0.5px))}
    header .logo img{height: 20px; margin-right: 10px}
}

.side-menu #gnb ul {color: #fff;font-size: 1.3em;line-height: 2em;display: grid;grid-template-columns: repeat(2, 1fr);}
.side-menu #gnb h6 {color: #fff;font-size: 1em;line-height: 2em;font-weight: 800;opacity: 0.75;}
.side-menu #gnb  hr {display: block !important;border: 0;border-top: 1px solid #ffffff80;}
.side-menu #gnb .box-white { border-radius: 10px; padding: 15px; box-shadow: 0 3px 6px #FFFFFF16;  margin-bottom: 10px; color: #000; margin-top: 25px}
.side-menu #gnb .box-white { font-weight: 800;}
.side-menu #gnb .box-white p span { font-size:0.8em;font-weight: 400; margin-left: 5px }
.side-menu #gnb .box-line { border-radius: 10px; padding: 15px; box-shadow: 0 3px 6px #FFFFFF16;  margin-bottom: 10px; color: #fff; background: #fff0 }
.side-menu #gnb .box-line { font-weight: 800;}
.side-menu #gnb .box-line p span { font-size:0.8em;font-weight: 400; margin-left: 5px }
.side-menu #gnb .profile {width: 25px; height: 25px; border-radius: 50px; object-fit: cover}
.side-menu #gnb ul li a {font-size: 0.9em;  color: #fff;  padding: 10px 0;    display: flex;    align-items: center;    grid-gap: 10px; position: relative}
.side-menu #gnb ul li a:after {    content:'';    display:inline-block;    width:6px;    height:6px;    margin:0px 12px auto auto;    vertical-align:middle;
    border-right:1px solid #fff;    border-top:1px solid #fff;    transform:rotate(45deg);    position: absolute;    right: 5px;    top: 25px;}
.side-menu #gnb ul li a > i{ font-size: 0.8em ; opacity: 0.7;   margin: 0;    width: 20px;    height: 20px;    display: flex;    justify-content: center;    align-items: center;}
.side-menu #copy{text-align: center;opacity: 0.7;position: absolute;width: 100%;right: 0;bottom: 20px;}
.side-menu #copy a {font-size: 0.9em ;color: #fff;}
.side-menu #copy a:not(:last-child):after{content: ""; display: inline-block; vertical-align: middle; width: 4px; height: 4px; border-radius: 50%; background-color: rgba(239, 239, 239, 0.13); margin: 0 6px 1px}

.overlay {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.5);display: none;z-index: 999;}
.overlay.active {display: block;}

footer {max-width: 600px;width: 100%; background: #f7f7f7; text-align: center; padding: 5vh 0; margin: 0 auto}
footer.sub {color: #888; background: #000101; }
footer img {width: 50px; margin-bottom: 25px}
footer.sub img {filter: brightness(0) invert(1)}
body:has(main) footer {max-width: unset;   }
.fnb{ padding: 2rem 0; font-size: 0.8em; opacity: .7}
.fnb a{font-weight: 600;}
footer.sub .fnb a{font-weight: 600; color: #fff}
.copy{padding: 2rem 0; opacity: .7}
.copy h1{font-weight: 600; font-size: 1.1em;}
.copy ul{margin: 6px 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center}
.copy li{display: inline-block;}
.dot-list ul li:not(:last-child):after{content: ""; display: inline-block; vertical-align: middle; width: 4px; height: 4px; border-radius: 50%; background-color: #55555520; margin: 0 6px 1px}
.area-top{border-bottom: 3px solid #555; margin-bottom: 40px; padding-bottom: 20px;}

#wrapper {max-width: 600px;margin: 0 auto; min-height: 100vh; background: #fff}
body:has(header) #wrapper {padding-top: 80.5px;}
body:has(main) #wrapper {max-width: unset; background: #fff0}

/**/

aside {text-align: right;display: block;width: 200px;padding: 24px;position: fixed;right: 50%;bottom: 80px;transform: translate(-340px);background-color: #f5f5f520;border-radius: 0px;box-sizing: border-box;color: #fff;}
aside h5 {text-align: left;font-weight: 700; margin-top: 5px; line-height: 1.5em}
aside h6 {text-align: left;font-weight: 300; font-size: 1em}
aside img {height: 30px}
aside button {aspect-ratio: 1/1;border-radius: 500px!important;}
/**/

main {}
main .background {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-size: cover;background-position: center;z-index: -1;padding-top: 200px}
main .background h1{font-family: "Oranienbaum", serif;max-width: 1640px; padding: 20px; margin: 0 auto; font-size: 15em; letter-spacing: -0.1em}
main .content {position: relative;z-index: 1; padding-top: 30vh}
main .content .main-box {width: 95%;z-index: 2;position: relative;background: url('../img/app/landing01.png') no-repeat center center, #cbd6b7; background-size: auto 100%; max-width: 1600px; margin: 0 auto; min-height: 100vh; }
main .content .main-box .copy-txt {position: absolute;font-size: 2.5em;font-weight: 400;color: #ffffff80;bottom: 30px;left: 40%;transform: translate(-50%);width: 100%;white-space: nowrap;}
main .content .main-box > .flex {width: 100%; padding: 70px; color: #fff; justify-content: space-between}
main .content .main-box > .flex .main-txt{position: relative;z-index: 2}
main .content .main-box > .flex .main-txt h2{font-size: 3.5em; line-height: 1.25em;font-weight: 800; margin-bottom: 25px;}
main .content .main-box > .flex .main-txt p{font-size: 1.2em; line-height: 1.8em}
main .content .main-box > .flex .sub-txt {text-align: right}
main .content .main-box > .flex .sub-txt h6{font-size: 2em; line-height: 1.25em;font-weight: 600; margin-bottom: 50px}
main .content .main-box button {border-radius: 0px; font-size: 1.2em; padding: 15px; box-shadow: 15px 15px 25px #444e3060}
main .content .main-box button img {transform: rotate(-90deg); width: 15px}
main .content .main-box button span {display: flex; align-items: center; gap: 5px}
main .content .main-box > button {display: none}
main .content .white-box {width: 100%; position: relative; z-index: 2; background: linear-gradient(to bottom, #fff, #fff0); height: 20vh}
main .content .white-box + button{position: fixed;bottom: 10vh;left: 50%;transform: translate(-50%);z-index: 1; background: linear-gradient(-190deg, #444e30, #23251c); font-size: 1.5em; padding: 20px 25px; border-radius: 15px; width: 65%; max-width: 300px; display: flex; align-items: center; justify-content: space-between}
main .content .white-box + button img {transform: rotate(-90deg); width: 20px}
main .content .white-box + button span {display: flex; align-items: center; gap: 5px}
main .content .color-box {width: 100%; position: relative; padding: 30vh 0px 0; background: linear-gradient(to bottom, #727e5c, #31362f); }
main .content .color-box > .number-box {text-align: center; margin-bottom: 50px}
main .content .color-box > .certi-box {text-align: center}
main .content .color-box > * > h2{font-size: 3em; line-height: 1.25em;font-weight: 800; margin-bottom: 25px; color: #e6fcbd; letter-spacing: -1.5px}
main .content .color-box > * > h1{font-size: 6em; line-height: 1.25em;font-weight: 800; margin-bottom: 25px; color: #fff; letter-spacing: -1.5px}
main .content .color-box > * > p{opacity: 0.5; color: #fff}
main .content .color-box .number-warp {display: flex; padding: 15vh 0 }
main .content .color-box .number-warp > li {width: 50%}
main .content .color-box .number-warp > li:first-child h5 {border-right: 1px solid #ffffff20 }
main .content .color-box .number-warp h6{font-size: 2.5em; line-height: 1.25em;font-weight: 400; margin-bottom: 25px; color: #e6fcbd; letter-spacing: -1.5px}
main .content .color-box .number-warp h5{font-size: 10em; line-height: 1.25em;font-weight: 800; margin-bottom: 25px; color: #fff; letter-spacing: -1.5px}
main .content .color-box .number-warp p{opacity: 0.5; color: #fff}
main .content .color-box .certi-box img {margin-top: 10vh; width: 100%; max-width: 1296px }
main .content .match-box {background: url('../img/app/landing02.png') no-repeat center bottom, #fff; background-size: 100% auto; text-align: center; padding: 25vh 0 50vh}
main .content .match-box > h2{font-size: 3em; line-height: 1.25em;font-weight: 800; margin-bottom: 25px; color: #727E5C; letter-spacing: -1.5px}
main .content .match-box > h1{font-size: 6em; line-height: 1.25em;font-weight: 800; margin-bottom: 25px; color: #000; letter-spacing: -1.5px}
main .content .match-box button{margin: 50px auto 0;font-size: 1.5em; padding: 20px 25px; border-radius: 15px; width: 65%; max-width: 300px; display: flex; align-items: center; justify-content: space-between}
main .content .match-box button img {transform: rotate(-90deg); width: 20px}
main .content .match-box button span {display: flex; align-items: center; gap: 5px}
main .content .medi-box {position: relative;background: #fff;text-align: center; padding: 25vh 0; height: 180vh;}
main .content .medi-box > h2{font-size: 3em; line-height: 1.25em;font-weight: 800; margin-bottom: 25px; color: #727E5C; letter-spacing: -1.5px}
main .content .medi-box > h1{font-size: 6em; line-height: 1.25em;font-weight: 800; margin-bottom: 25px; color: #000; letter-spacing: -1.5px;}

main .content .medi-box .grid {display: grid;grid-template-columns: repeat(8, minmax(0, 1fr));justify-content: center;gap: 55px;width: 115%;position: absolute;top: 70vh;left: 50%;transform: translate(-50%);}
main .content .medi-box .card {position: relative;width: 100%;padding-top: 100%;  perspective: 1000px;cursor: pointer; border-radius: 5px}
main .content .medi-box .card-inner {position: absolute;top: 0;left: 0;width: 100%;height: 100%;transition: transform 0.6s;transform-style: preserve-3d;}
main .content .medi-box .card:hover .card-inner {transform: rotateY(180deg);}
main .content .medi-box .card-front,
main .content .medi-box .card-back {position: absolute;top: 0;left: 0;width: 100%;height: 100%;backface-visibility: hidden;display: flex;justify-content: center;align-items: center;font-size: 18px;font-weight: bold;color: #fff;border-radius: 8px;}
main .content .medi-box .card-front {background-color: #ffffff;flex-direction: column;justify-content: space-between;padding: 35px;}
main .content .medi-box .card-front h6 {line-height: 1em;width: 100%;height: fit-content;text-align: left; font-size: 2.5em; font-weight: 700; color: #555}
main .content .medi-box .card-front p {line-height: 1em;width: 100%;height: fit-content;text-align: right; font-size: 1.5em; font-weight: 300; color: #999}
main .content .medi-box .card-back {background-color: #f8f8f8;transform: rotateY(180deg);}
main .content .medi-box .card.sub .card-front{background: #f8f8f8}
main .content .medi-box .card:not(.sub) {box-shadow: 0 0 50px #00000015;transition: all 0.6s;}
main .content .medi-box .card:not(.sub):nth-child(3) .card-front,
main .content .medi-box .card:not(.sub):nth-child(10) .card-front,
main .content .medi-box .card:not(.sub):nth-child(18) .card-front
{background: #e8e8e8}
main .content .medi-box .card:not(.sub):nth-child(1) .card-front,
main .content .medi-box .card:not(.sub):nth-child(8) .card-front,
main .content .medi-box .card:not(.sub):nth-child(17) .card-front
{background: #eeeeee}
main .content .medi-box .card:not(.sub):nth-child(2) .card-front,
main .content .medi-box .card:not(.sub):nth-child(5) .card-front,
main .content .medi-box .card:not(.sub):nth-child(9) .card-front,
main .content .medi-box .card:not(.sub):nth-child(13) .card-front,
main .content .medi-box .card:not(.sub):nth-child(16) .card-front
{background: #f8f8f8}
main .content .medi-box .card:not(.sub):hover  {box-shadow: unset}
main .content .medi-box .card.w1400 {display: none}
main .content .medi-box .card.w992 {display: none}

main .content .kakao-box {background: url('../img/app/landing03.png') no-repeat center bottom, #fff; background-size: cover; text-align: center; padding: 25vh 0}
main .content .kakao-box > h5{font-size: 2.5em; line-height: 1.25em;font-weight: 600; margin-bottom: 25px; color: #a7a7a7; letter-spacing: -1.5px}
main .content .kakao-box > h4{font-size: 4em; line-height: 1.25em;font-weight: 800; margin-bottom: 25px; color: #000; letter-spacing: -1.5px}
main .content .kakao-box button{margin: 50px auto 0;font-size: 1.5em; padding: 20px 25px; border-radius: 15px; width: 65%; max-width: 300px; display: flex; align-items: center; justify-content: space-between}
main .content .kakao-box button img {height: 25px}
main .content .kakao-box button span {display: flex; align-items: center; gap: 5px}

@media (max-width: 1400px) {
    main .content .medi-box {height: 200vh;}
    main .content .medi-box .grid  {grid-template-columns: repeat(6, minmax(0, 1fr));gap: 45.5px}
    main .content .medi-box .card.w1920 {display: none}
    main .content .medi-box .card.w1400 {display: block}
    main .content .medi-box .card-front {padding: 25px;}
    main .content .medi-box .card-front h6 {font-size: 2em;}
    main .content .medi-box .card-front p {font-size: 1.25em;}

    main .content .medi-box .card:not(.sub):nth-child(3) .card-front,
    main .content .medi-box .card:not(.sub):nth-child(18) .card-front,
    main .content .medi-box .card:not(.sub):nth-child(29) .card-front
    {background: #e8e8e8}
    main .content .medi-box .card:not(.sub):nth-child(1) .card-front,
    main .content .medi-box .card:not(.sub):nth-child(10) .card-front,
    main .content .medi-box .card:not(.sub):nth-child(15) .card-front
    {background: #eeeeee}
    main .content .medi-box .card:not(.sub):nth-child(20) .card-front,
    main .content .medi-box .card:not(.sub):nth-child(10) .card-front,
    main .content .medi-box .card:not(.sub):nth-child(31) .card-front,
    main .content .medi-box .card:not(.sub):nth-child(22) .card-front,
    main .content .medi-box .card:not(.sub):nth-child(28) .card-front
    {background: #f8f8f8}
}
@media screen and (max-width: 992px) {

    main .background {padding-top: 120px}
    main .background h1{font-size: 5em; letter-spacing: -5px; text-align: center}
    main .content {padding-top: 20vh;}
    main .content .main-box {width: 80%;display: flex; align-items: end; background: url('../img/app/landing01.png') no-repeat center top, #cbd6b7;background-size: auto 80%;; min-height: 60vh;}
    main .content .main-box:before {content: ''; display:block;position: absolute;z-index: 1;width: 100%; height: 25vh; bottom: 0; background: linear-gradient(to bottom, #cbd6b700, #cbd6b7 20%, #cbd6b7)}
    main .content .main-box .copy-txt {display: none}
    main .content .main-box > button {display: block;position: absolute;top: -20px;left: 50%;transform: translate(-50%)}
    main .content .main-box > .flex {padding: 25px}
    main .content .main-box > .flex .sub-txt{display: none}
    main .content .main-box > .flex .main-txt h2{font-size: 2.25em;;}
    main .content .main-box > .flex .main-txt p{font-size: 0.9em;}
    main .content .color-box > * > h2{font-size: 2.5em;}
    main .content .color-box > * > h1{font-size: 3.5em;}

    main .content .color-box .number-warp {flex-wrap: wrap; padding: 5vh 0 }
    main .content .color-box .number-warp h6{font-size: 2em; }
    main .content .color-box .number-warp h5{font-size: 8em;}
    main .content .color-box .number-warp > li:first-child {border-bottom: 1px solid #ffffff20 }
    main .content .color-box .number-warp > li:first-child h5 {border-right: 0px }
    main .content .color-box .number-warp > li {width: 100%; padding: 5vh 0}
    main .content .color-box .certi-box img {margin-top: 5vh;}

    main .content .match-box > h2{font-size: 2.5em;}
    main .content .match-box > h1{font-size: 3.5em;}
    main .content .match-box {background: url('../img/app/landing02mo.png') no-repeat center bottom, #fff; background-size: 100% auto; padding: 15vh 0 30vh}

    main .content .medi-box > h2{font-size: 2.5em;}
    main .content .medi-box > h1{font-size: 3.5em;}

    main .content .medi-box .card-front {padding: 15px;}
    main .content .medi-box .card-front h6 {font-size: 1.5em;}
    main .content .medi-box .card-front p {font-size: 1.05em;}


    main .content .kakao-box {background: url('../img/app/landing03mo.png') no-repeat center bottom, #fff; background-size: cover}
    main .content .kakao-box > h5{font-size: 1.5em;}
    main .content .kakao-box > h4{font-size: 3em; line-height: 1.2em}

}
@media screen and (max-width: 699px) {

    main .content .color-box > * > h2{font-size: 2em;}
    main .content .color-box > * > h1{font-size: 3em;padding: 0 20px}

    main .content .color-box .number-warp h5{font-size: 7em;}

    main .content .match-box > h2{font-size: 2em;}
    main .content .match-box > h1{font-size: 3em;padding: 0 20px}

    main .content .medi-box > h2{font-size: 2em;}
    main .content .medi-box > h1{font-size: 3em;padding: 0 20px}

    main .content .medi-box .card-front h6 {font-size: 1.35em;}
    main .content .medi-box .card-front p {font-size: 1em;}
    main .content .medi-box .card.w1400 {display: none}
    main .content .medi-box .card.w992 {display: block}
    main .content .medi-box {height: 180vh;}
    main .content .medi-box .grid  {grid-template-columns: repeat(4, minmax(0, 1fr));gap: 10px; top: 65vh}
}
/**/


section.loading-page {position: relative;background: url('../img/app/loading.png') no-repeat center bottom; background-size: cover; text-align: center; padding: 5vh 0px; min-height: 100vh; max-height: 100vh; overflow: hidden}
section.loading-page img.logo {height: 20px}
section.loading-page > div {text-align: center;position: absolute; top: 50%; left: 50%; width: 70%; transform: translate(-50%, -50%)}
section.loading-page > div h1{font-family: "Oranienbaum", serif; font-size: 5em; line-height: 1.8em; letter-spacing: -5px; color: #e6fcbd; white-space: nowrap}
section.loading-page > div h6{ font-size: 1.05em; line-height: 1.8em; color: #e6fcbd}
section.loading-page > div p{ font-size: 1.05em; line-height: 1.8em; color: #fff}

section.loading-page .progress-container {width: 100%;height: 5px;background: #ffffff20;border-radius: 15px;overflow: hidden; margin-bottom: 30px}
section.loading-page .progress-bar {height: 100%;width: 0;background: #e6fcbd;transition: width 3s ease;}

/**/

.clinic-page .main-box {width: 100%;position: relative;background: url('../img/app/landing01.png') no-repeat top center, #cbd6b7; background-size: auto 80%; max-width: 1600px; margin: 0 auto; min-height: 70vh; display: flex; align-items: end }
.clinic-page .main-box:before {content: ''; display:block;position: absolute;z-index: 1;width: 100%; height: 25vh; bottom: 0; background: linear-gradient(to bottom, #cbd6b700,  #cbd6b7 40%, #cbd6b7)}
.clinic-page .main-box .main-txt {width: 100%; padding: 50px 20px; color: #fff; position: relative; z-index: 2;}
.clinic-page .main-box .main-txt {text-align: center}
.clinic-page .main-box .main-txt h2{font-size: 3em; line-height: 1.25em;font-weight: 800; margin-bottom: 25px;}
.clinic-page .main-box .main-txt p{font-size: 1.05em; line-height: 1.8em}

.clinic-page .color-box {width: 100%; background: linear-gradient(to bottom, #cbd6b7, #fff 20%,#fff 40%, #f5f5f5); padding: 50px 20px}
.clinic-page .color-box .profile-box {border-radius: 15px;width: 60%; max-width: 300px; background: #fff; padding: 20px 20px 35px; box-shadow: 0 10px 20px #00000010; margin: 0 auto; text-align: center}
.clinic-page .color-box .profile-box .clinic {display: block;height: 30px;margin: 0 auto}
.clinic-page .color-box .profile-box .doctor {display: block;width: 80%; margin: 15px auto; border-radius: 5px; border: 1px solid #eee}
.clinic-page .color-box .profile-box span {display: block; color: #707070; margin-bottom: 10px; font-size: 1.15em; font-weight: 600}
.clinic-page .color-box .profile-box p {display: block; color: #000; font-size: 1.75em; font-weight: 600}
.clinic-page .color-box button{margin: 25px auto 30px;font-size: 1.5em; padding: 20px; border-radius: 15px; width: 60%; max-width: 300px; display: flex; align-items: center; justify-content: space-between}
.clinic-page .color-box button span {display: flex; align-items: center; gap: 5px}
.clinic-page .color-box .txt-box {width: 70%; max-width: 350px; margin: 40px auto 0}
.clinic-page .color-box .txt-box p {white-space: pre-line; font-size: 1.1em;  margin: 25px auto 0; color: #707070}
.clinic-page .color-box .txt-box h6 {text-align: center; font-size: 1.65em; font-weight: 600}
.clinic-page .color-box .txt-box h6 span {position: relative;display: inline-block;color: #000;}
.clinic-page .color-box .txt-box h6 span::before {content: '';position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%) rotate(-3deg);background-color: #def4b6;width: 120%;height: 0.5em;mix-blend-mode: multiply;border-radius: 3px;opacity: 0.8;}

.clinic-page .clinic-box {position: relative; text-align: center; padding-top: 50px}
.clinic-page .clinic-box .logo {height: 50px}
.clinic-page .clinic-box p.address {color: #555}
.clinic-page .clinic-box div.btn-wrap {display: flex; justify-content: center; align-content: center; gap: 15px; margin: 25px 0 30px}
.clinic-page .clinic-box div.btn-wrap button {aspect-ratio: 1/1; border-radius: 100px}
.clinic-page .clinic-box div.btn-wrap button img {height: 32px}
.clinic-page .clinic-box div.btn-wrap button i {font-size: 2em;margin: 5px}
.clinic-page img.map {width: 100%; border: 1px solid #f5f5f5}
.clinic-page .map-box {position: relative;padding: 50px 20px; background: #f5f5f5}
.clinic-page .map-box > .box-line {margin-bottom: 15px; padding: 20px; text-align: left; color: #707070}
.clinic-page .map-box > * {border-radius: 5px}
.clinic-page .map-box h6 {padding-bottom: 15px; border-bottom: 1px solid #eee; margin-bottom: 15px; font-size: 1.25em; font-weight: 700}
.clinic-page .map-box p b {width: 30px; display: inline-block}
.clinic-page .map-box .open-time {display: grid;  grid-template-columns: repeat(2, 1fr);gap: 20px; row-gap: 5px; position: relative}
.clinic-page .map-box .open-time:after {display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 0.5px; height: 80%; background: #eee; content: ''}
.clinic-page .map-box .open-time p {display: flex; justify-content: space-between; align-items: flex-start; letter-spacing: -.5px}
.clinic-page .map-box .open-time p span {font-weight: 600; text-align: right; font-size: 1.1em}

.clinic-page .start-box {width: 100%;text-align:center;background: linear-gradient(to bottom, #727e5c, #3f453b 20%,#3f453b 90%, #3e3e3e); padding: 50px 20px}
.clinic-page .start-box > h5{font-size: 1.5em; line-height: 1.25em;font-weight: 600; margin-bottom: 25px; color: #e6fcbd; letter-spacing: -1.5px}
.clinic-page .start-box > h4{font-size: 2.5em; line-height: 1.25em;font-weight: 800; margin-bottom: 25px; color: #ffffff; letter-spacing: -1.5px}
.clinic-page .start-box button{color:#727e5c;margin: 50px auto 0;font-size: 1.5em; padding: 20px; border-radius: 15px; width: 60%; max-width: 300px; display: flex; align-items: center; justify-content: space-between}
.clinic-page .start-box button img {height: 20px}
.clinic-page .start-box button span {display: flex; align-items: center; gap: 5px}

.clinic-page .kakao-box {width: 100%;text-align:center;position: relative;background: url('../img/app/landing04.png') no-repeat top center, #000101; background-size: cover; max-width: 1600px; margin: 0 auto; padding: 50px 20px; display: flex; flex-direction: column; align-items: center }
.clinic-page .kakao-box > h5{font-size: 1.5em; line-height: 1.25em;font-weight: 600; margin-bottom: 25px; color: #c4c4c4; letter-spacing: -1.5px}
.clinic-page .kakao-box > h4{font-size: 2.5em; line-height: 1.25em;font-weight: 800; margin-bottom: 25px; color: #ffffff; letter-spacing: -1.5px}
.clinic-page .kakao-box button{margin: 50px auto 0;font-size: 1.2em; padding: 20px; border-radius: 15px; width: 60%; max-width: 300px; display: flex; align-items: center; justify-content: space-between}
.clinic-page .kakao-box button img {height: 20px}
.clinic-page .kakao-box button span {display: flex; align-items: center; gap: 5px}

#loginModal .modal-dialog {transform: translateX(-50%) !important;top: unset;bottom: 0;position: fixed;max-width: 600px; width: 100% ;}
#loginModal .modal-body {max-height: fit-content;background: #fff; border-radius: 20px 20px 0 0; padding: 50px }
#loginModal .modal-body img.clinic {margin-bottom: 20px; height: 25px}
#loginModal .modal-body p {opacity: 0.3}
#loginModal .modal-body h6 {margin-bottom: 30px; font-size: 2.2em; line-height: 1.5em}
#loginModal .modal-body h6 span {position: relative;display: inline-block;color: #000; font-weight: 700;}
#loginModal .modal-body h6 span::before {content: '';position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%) rotate(-3deg);background-color: #def4b6;width: 110%;height: 0.4em;mix-blend-mode: multiply;border-radius: 3px;opacity: 0.8;}
#loginModal .modal-body button{margin: 10px auto 0;font-size: 1.2em; padding: 20px; border-radius: 15px; width: 100%; display: flex; align-items: center; justify-content: space-between}
#loginModal .modal-body button img {max-height: 20px; max-width: 20px}
#loginModal .modal-body button span {display: flex; align-items: center; gap: 5px}

/**/

.survey-page .sw-theme-arrows {border: 0}
.survey-page .sw .toolbar {display: none}
.survey-page .sw>.tab-content>.tab-pane {max-height: calc( 100vh - 180px);padding-bottom: 0px;overflow: auto;}
.survey-page .sw>.tab-content>.tab-pane::-webkit-scrollbar-thumb {background-color: #dfdfdf;}
.survey-page .sw>.tab-content>.tab-pane::-webkit-scrollbar-track {background-color: #f3f3f3;}
.survey-page .sw>.nav {flex-direction: unset!important;}
.survey-page .sw-theme-arrows>.nav .nav-link {padding: 2px; margin-left: 0;  margin: 0;}
.survey-page .sw-theme-arrows>.nav .nav-link.done {border-bottom: 1px solid #727e5c20; background-color: #727e5c20;}
.survey-page .sw-theme-arrows>.nav .nav-link.active {border-bottom: 1px solid #727e5c; background-color: #727e5c;}
.survey-page .sw-theme-arrows>.nav .nav-link::after, .survey-page  .sw-theme-arrows>.nav .nav-link::before {display: none;}
.survey-page .tab-content {padding: 50px 30px 0; min-height: 90vh; max-height: calc( 100vh - 2px );overflow: hidden;position: relative;}
.survey-page .tab-content .btn-large {max-width: 520px;position: fixed; bottom: 50px; left: 50%; transform: translateX(-50%); width: 80%; font-size: 1.5em; padding: 20px; border-radius: 15px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 15px 15px #00000030}
.survey-page .tab-content .prevBtn {background-color: #E8E8E8;color: #373844}
#wrapper:has(.survey-page) + #gobtn {display: none}
.survey-page .tab-content img {margin-bottom: 30px; height: 20px}
.survey-page .tab-content .flex > img {margin-bottom: 0px;}
.survey-page .tab-content .flex {margin-bottom: 30px;}
.survey-page .tab-content p {opacity: 0.4}
.survey-page .tab-content span{font-size: 1.2em;color: #000; font-weight: 700;}
.survey-page .tab-content h6 {margin: 10px 0; font-size: 1.4em; line-height: 1.5em; font-weight: 700}
.survey-page .tab-content h5 {color: #727E5C;margin: 10px 0; font-size: 1.4em; line-height: 1.5em; font-weight: 400}
.survey-page .tab-content input[type="text"] {font-size: 1.2em!important;height: fit-content;margin: 10px 0 25px;border: 1px solid #727E5C; background: #fff; border-radius: 10px; padding: 15px 15px}
.survey-page .tab-content textarea {min-height: 150px;font-size: 1.2em!important;height: fit-content;margin: 10px 0 25px;border: 1px solid #727E5C; background: #fff; border-radius: 10px; padding: 15px 15px}
.survey-page .tab-content h1 {margin-bottom: 30px; font-size: 2.2em; line-height: 1.5em}
.survey-page .tab-content h1 span {position: relative;display: inline-block;color: #000; font-weight: 700;}
.survey-page .tab-content h1 span::before {content: '';position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%) rotate(-3deg);background-color: #def4b6;width: 110%;height: 0.4em;mix-blend-mode: multiply;border-radius: 3px;opacity: 0.8;}
.survey-page .input-sub {position: relative;margin: 10px 0 25px}
.survey-page .input-sub input {margin: 0}
.survey-page .input-sub > span {font-size: 1.2em!important; color: #727E5C; position: absolute; top: 50%; transform: translateY(-50%); right: 20px}
.survey-page .circle {margin: 10px 0}
.survey-page .circle.grid {row-gap: 0}
.survey-page .circle label{font-size: 1.3em; margin-right: 0px; margin-bottom: 15px; font-weight: 400; display: flex; align-items: flex-start; gap: 10px}
.survey-page .circle label:has(:checked) {color: #727E5C; font-weight:600 }
.survey-page div.done {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; width: 100%}
.survey-page div.done img {width: 70%; height: auto; display: block; margin: 0 auto}

.survey-done {position: relative; height: 100vh}
.survey-done .box-gray{border-radius: 15px;display: flex; align-items: center; justify-content: space-between;margin-top: 15px;width: 100% }
.survey-done .btn-large {font-size: 1.5em; padding: 20px; border-radius: 15px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 15px 15px #00000030}
.survey-done > .flex {;width: 80%;height: 70vh;position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); ;flex-direction: column; align-items: start; justify-content: space-between}
.survey-done > .flex > div {width: 100%}
.survey-done h1 {margin-bottom: 30px; font-size: 2.2em; line-height: 1.5em}
.survey-done h1 span {position: relative;display: inline-block;color: #000; font-weight: 700;}
.survey-done h1 span::before {content: '';position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%) rotate(-3deg);background-color: #def4b6;width: 110%;height: 0.4em;mix-blend-mode: multiply;border-radius: 3px;opacity: 0.8;}
.survey-done img.logo {margin-bottom: 30px; height: 20px}
.survey-done img.clinic { height: 20px}
.survey-done p {opacity: 0.4}

body.swal2-toast-shown:has(.survey-done) .swal2-container.swal2-center {top: 50px;width: 100%;max-width: unset;}
body:has(.survey-done) .swal2-popup.swal2-toast .swal2-title:before {content: "\f058";font-family: "Font Awesome 6 Pro";margin-right: 10px;}
body:has(.survey-done) .swal2-popup {max-width: 560px;width: calc(100% - 80px) !important;}
body:has(.survey-done) .swal2-popup.swal2-toast {background: #333;color: #fff;}

.near-page {position: relative; height: 100vh; overflow: hidden}
.near-page .map-box{position: relative;background: #f8f8f8;height: 55vh; overflow: hidden;width: 100%;}
.near-page .map-box .now-dot {z-index: 99;position: absolute; width: 25px; height: 25px; aspect-ratio: 1/1; border-radius: 500px; background: #fde124; border: 4px solid #fff; box-shadow: 5px 5px 15px #00000030 }
.near-page .map-box .btn-wrap {z-index: 99;display: flex; justify-content: space-between; align-items: center; padding: 20px; position: absolute; bottom: 0; left: 0; width: 100%}
.near-page .map-box .btn-wrap .btn-white {border-radius: 50px}
.near-page .map-box .hear-dot {z-index: 99;position: absolute;background: #fff;border-radius: 10px;display: flex; justify-content:center;align-items: center;padding: 0px;width: 60px; height:60px;color: #333;;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);}
.near-page .map-box .hear-dot.active {background: #f3ffe5}
.near-page .map-box .hear-dot.active img {border: 1px solid #727E5C}
.near-page .map-box .hear-dot.active::after {border-color: #f3ffe5 transparent transparent transparent;}
.near-page .map-box .hear-dot::after {content: '';position: absolute;bottom: -10px;left:50%;transform: translateX(-50%);width: 0;height: 0;border-style: solid;border-width: 10px 10px 0 10px;border-color: #fff transparent transparent transparent;}
.near-page .map-box .hear-dot img{width: 50px; height:50px;object-fit: cover;border-radius: 5px; border: 1px solid #eee}
.near-page .list-box{height: 45vh; overflow: hidden;width: 100%;}
.near-page .list-box .panel{display: flex; justify-content: space-between; align-items: center; padding: 20px; font-size: 1.3em; margin-bottom: 0}
.near-page .list-box .panel p {font-weight: 700; color: #989898}
.near-page .list-box .panel p b {color: #727E5C;}
.near-page .list-box ul  {max-height: calc( 45vh - 71px );overflow: auto; padding:0 20px 20px; display: grid; grid-template-columns: 1fr; gap: 20px}
.near-page .list-box ul li {display: flex; align-items: center; gap: 10px;padding-bottom: 20px; border-bottom: 1px solid #eee;}
.near-page .list-box ul li input {margin-left: auto!important; width: 50px;height: 50px;border-radius: 50px;}
.near-page .list-box ul li input::after {top: 5px;left: 15px;width: 18px;height: 30px;}
.near-page .list-box ul li .img {width: 90px; aspect-ratio: 1/1; border-radius: 5px; position: relative }
.near-page .list-box ul li .img span {position: absolute; top: 0; left: 0; margin: 0!important;}
.near-page .list-box ul li .img img{width: 90px; aspect-ratio: 1/1; object-fit: cover }
.near-page .list-box ul li .txt-box {}
.near-page .list-box ul li .txt-box p {display: flex; align-items: center; gap: 5px; color: #666666; font-weight: 500}
.near-page .list-box ul li .txt-box h5 {margin: 5px 0 10px; font-size: 1.3em; font-weight: 700}
.near-page .list-box ul li .txt-box h6 {font-size: 1.2em; font-weight: 600; color: #555}
.near-page .list-box ul li .txt-box h6 span:not(:last-child):after{content: ""; display: inline-block; vertical-align: middle; width: 1px; height: 1px; border-radius: 50%; background-color: #555555; margin: 0 6px 1px}


/**/
header.my {background: #fff0}
body:has(header.my) #wrapper{padding: 0}
.my-page {position: relative; width: 100%; height: 100vh; overflow-x: hidden;  padding: 80px 20px 20px; }
.my-page > *:not(.background) {position: relative; z-index: 1;}
.my-page div.background {position: absolute; left:50%; transform: translateX(-50%); top:0; background: radial-gradient(ellipse at top, #fff 5%, #eaf1db, #e5f1d3 40%, #fff, #fff),
radial-gradient(ellipse at bottom, #fff, transparent); width: 200%; height: 40%; z-index: 0}
.my-page .my-doctor {background: #fff; padding:20px; border-radius: 10px; box-shadow: 0 10px 15px #00000010}
.my-page .my-doctor .next-box {display: flex; align-items: center; gap: 15px;background: #f1f4ec; padding: 10px 20px;border-radius: 5px; margin-top: 15px}
.my-page .my-doctor .next-box p {color: #707070; font-size: 1em; font-weight: 600}
.my-page .my-doctor .next-box b {font-size: 1.3em;color: #666766;}
.my-page .my-doctor .next-box i {font-size: 12px}
.my-page .my-doctor .profile-box {display: flex; align-items: center; gap: 15px}
.my-page .my-doctor .profile-box .img {width: 60px; height: 60px; aspect-ratio: 1/1; position: relative; border: 0}
.my-page .my-doctor .profile-box .img:after{content: ''; display: block; position: absolute; top: 0px; left: 0px; width: 15px; height: 15px; background: #727e5c;border-radius: 50% }
.my-page .my-doctor .profile-box .img img {width: 60px; height: 60px; aspect-ratio: 1/1; object-fit: cover; border: 1px solid #eee; border-radius: 50%}
.my-page .my-doctor .profile-box .txt > b {color: #c9c9c9; font-size: 1em; font-weight: 600}
.my-page .my-doctor .profile-box .txt > b span {color: #dfe1da;}
.my-page .my-doctor .profile-box .txt > p {color: #000; font-size: 1.3em; font-weight: 600}
.my-page .my-doctor .profile-box > h6 {color: #727e5c; font-size: 1.8em; margin-left: auto; font-weight: 700}

.my-page .my-change {display: flex; align-items: center; background: #fff; padding:20px; border-radius: 10px; box-shadow: 0 10px 15px #00000010; font-size: 1.5em; margin-top: 20px}
.my-page .my-change i {font-size: 12px}

.my-page .my-weekly .calendar {
    display: flex;
    gap: 15px;
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.my-page .my-weekly .day {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}

.my-page .calendar {
    display: flex;
    gap: 15px;
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.my-page .day {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}


.my-page .circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    position: relative;
    border: 2px solid #009600;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease;
}

/* 차오르는 물결 애니메이션 */
.my-page .circle::before {
    content: "";
    position: absolute;
    bottom: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: #009600;
    border-radius: 50%;
    transition: bottom 0.6s ease-in-out;
}

/* 클릭할 때 차오르는 단계 */
.my-page .circle[data-clicks="1"]::before { bottom: -66%; }
.my-page .circle[data-clicks="2"]::before { bottom: -33%; }
.my-page .circle[data-clicks="3"]::before { bottom: 0%; }

/* 터치 반응 애니메이션 */
.my-page .circle:active {
    transform: scale(1.1);
}

/* 완료된 상태 */
.my-page .circle.completed {
    background: #009600;
    border: 2px solid #007500;
    transform: scale(1.1);
    transition: transform 0.3s ease, background 0.4s ease;
}

/* 체크 아이콘 스타일 */
.my-page .circle .check-mark {
    font-size: 24px;
    color: white;
    font-weight: bold;
    opacity: 0;
    transform: scale(0);
    transition: opacity 0.4s ease-in-out, transform 0.3s ease-in-out;
}

/* 3번째 차오른 후 체크 표시 */
.my-page .circle.completed .check-mark {
    opacity: 1;
    transform: scale(1);
    transition-delay: 0.6s; /* 차오르는 애니메이션이 끝난 후 체크 표시 */
}