@charset "utf-8";

/* font */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");
@font-face {
    font-family: "GmarketSans";
    font-weight: 300;
    src: url(../font/GmarketSansLight.woff2) format(woff);
}
@font-face {
    font-family: "GmarketSans";
    font-weight: 500;
    src: url(../font/GmarketSansMedium.woff2) format(woff);
}
@font-face {
    font-family: "GmarketSans";
    font-weight: 700;
    src: url(../font/GmarketSansBold.woff2) format(woff);
}

:root {
    --font-Pretendard: "Pretendard Variable", sans-serif;
    --font-GmarketSans : "GmarketSans";
    --color-main: #3B318F;
}


/* ******************* *
* 공통
* ******************* */
* {margin: 0;padding: 0;}
nav, ul, ol {list-style: none;}
img {display: block;max-width: 100%;}
a, a:link {color: #000;text-decoration: none;}
a:visited, a.visited, a.visited:visited {color: inherit;text-decoration: none;}
a:hover, a.visited:hover, a:active {color: inherit;text-decoration: none;}
a:focus {text-decoration: none;}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {border: 0;font-size: 100%;}
html, body {font-size: 20px;font-family: var(--font-Pretendard);letter-spacing: -0.038rem;line-height: 1.5;word-break: keep-all;word-wrap: break-word;color:#000;touch-action: auto;overscroll-behavior: auto;text-size-adjust:100%;overflow-x: hidden;scroll-behavior: smooth;} 
.line-br {display: block;}
.blind {width: 1px;height: 1px;overflow: hidden;position: absolute;top: 50%;left: 50%;display: block;text-indent: -9999em;font-size: 0px;line-height: 0;z-index: -1;}

.cinner {max-width: 1400px;padding: 0 100px;box-sizing: border-box;margin: 0 auto;}
@media all and (max-width: 1399px){
    .cinner {max-width: 100%;padding: 0;margin: 0 50px;}
}
@media all and (max-width:1199px){
    
}
@media all and (max-width: 1024px) { 
    html, body {font-size: 18px;} 
    .cinner {/* margin: 0 30px; */}
} 
@media all and (max-width:768px){
	html, body {font-size: 16px;}
	.cinner {margin: 0 30px;}
}

/* scroll Bar */
body::-webkit-scrollbar { width: 10px; }
body::-webkit-scrollbar-thumb { background-color: var(--color-main); }
body::-webkit-scrollbar-track { background-color: #f9f9f9; }



/* ******************* *
* HEADER
* ******************* */
#header {width: 100%;height: 100px;background: #fff;position: fixed;top: 0;left: 0;z-index: 999;}
#header.scrolled {box-shadow: 0 4px 6px rgba(0, 0, 0, .05);}
#header .cinner {display: flex;justify-content: space-between;align-items: center;height: 100%;max-width: 1920px;}
#header .header__logo a {display: block;max-width: 402px;}
#header .header__nav .menu-list {display: flex;gap: 0 50px;}
#header .header__nav .menu-list > li {padding-top: 12px;position: relative;cursor: pointer;}
#header .header__nav .menu-list > li::before {content: '';display: block;width: 7px;height: 7px;border-radius: 50%;background: var(--color-main);position: absolute;top: 0;left: 0;right: 0;margin: auto;opacity: 0;transition: .35s;}
#header .header__nav .menu-list > li:hover::before {opacity: 1;}
#header .nav__btn {display: none;position: relative;z-index: 999;}
#header .nav__btn > .menu-btn {display: flex;align-items: center;width: 30px;height: 22px;position: relative;}
#header .nav__btn > .menu-btn::before,
#header .nav__btn > .menu-btn::after {content: '';display: block;width: 100%;height: 4px;background: #000;position: absolute;left: 0;right: 0;margin: auto;}
#header .nav__btn > .menu-btn::before {top: 0;}
#header .nav__btn > .menu-btn::after {bottom: 0;}
#header .nav__btn > .menu-btn > span{display: block;width: 100%;height: 4px;background: #000;}

@media all and (max-width: 1199px){
    #header .header__logo a img {max-width: 90%;}
    #header .header__nav .menu-list {gap: 0 30px;}
}
@media all and (max-width: 1024px) { 
    #header {height: 80px;}
    #header .nav__btn {display: block;}
    #header .header__nav {max-width: 300px;width: 100%;height: 100%;padding-top: 100px;background: var(--color-main);position: fixed;top: 0;right: 0;z-index: 998;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);transform: translateX(100%);opacity: 0;visibility: hidden;transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out, visibility 0.3s;}
    #header .header__nav.active {transform: translateX(0);opacity: 1;visibility: visible;box-shadow: -5px 0px 11px 0px rgba(0,0,0,0.3);-webkit-box-shadow: -5px 0px 11px 0px rgba(0,0,0,0.3);-moz-box-shadow: -5px 0px 11px 0px rgba(0,0,0,0.3);}
    #header .header__nav .menu-list {flex-direction: column;gap: 20px;}
    #header .header__nav .menu-list > li {color: #fff;font-family: var(--font-GmarketSans);font-size: 20px;text-align: center;}
    #header .header__nav .menu-list > li:hover {text-decoration: underline;text-underline-offset: 8px;}
    #header .header__nav .menu-list > li::before {display: none;}
    #header .nav__btn > .menu-btn.active > span {display: none;}
    #header .nav__btn > .menu-btn.active::before,
    #header .nav__btn > .menu-btn.active::after {top: 0;bottom: 0;}
    #header .nav__btn > .menu-btn.active::before {background: #fff;transform: rotate(45deg);}
    #header .nav__btn > .menu-btn.active::after {background: #fff;transform: rotate(-45deg);}
} 

/* ******************* *
* FOOTER
* ******************* */
#footer {padding: 50px 0 70px;background: #333;}
#footer .cinner {display: flex;flex-direction: column;align-items: center;}
#footer .footer__logo {max-width: 402px;margin-bottom: 55px;}
#footer .footer__links {display: flex;justify-content: center;gap: 0 20px;margin-bottom: 26px;}
#footer .footer__links > li {cursor: pointer;}
#footer .footer__links > li:hover > * {text-decoration: underline;text-underline-offset: 6px;}
#footer .footer__links > li > span {color: #fff;}
#footer .footer__links > li > span.privacy {font-weight: 600;}
#footer .footer__info {margin-bottom: 48px;}
#footer .footer__info > ul {display: flex;justify-content: center;gap: 0 40px;}
#footer .footer__info > ul:first-child {margin-bottom: 12px;}
#footer .footer__info > ul > li {color: #fff;text-align: center;}
#footer .footer__info > li > span {font-weight: 600;}
#footer .footer__copy > p {color: rgba(255,255,255,.5);font-size: 16px;text-align: center;}

@media all and (max-width: 1024px){
    #footer .footer__logo {margin-bottom: 35px;}
    #footer .footer__links {margin-bottom: 20px;}
    #footer .footer__info {margin-bottom: 30px;}
    #footer .footer__info > ul:first-child {margin-bottom: 5px;}
}
@media all and (max-width: 768px){
    #footer {padding: 40px 0 50px;}
    #footer .footer__logo > img {max-width: 85%;margin: 0 auto;}
    #footer .footer__info > ul {gap: 0 20px;}
}
@media all and (max-width: 640px){
    #footer .footer__logo > img {max-width: 75%;}
    #footer .footer__info > ul {flex-wrap: wrap;gap: 5px 10px;}
    #footer .footer__links > li > span {font-size: 15px;}
    #footer .footer__info > ul > li {font-size: 15px;}
    #footer .footer__copy > p  {font-size: 15px;}
}
/* Footer 끝 */

/* ******************* *
* fix btns
* ******************* */
.fix-btns {position: fixed;top: 50%;right: -100px;transform: translateY(-50%);z-index: 998;transition: right 0.3s ease-in-out;}
.fix-btns.active {right: 20px;}
.fix-toggle {width: 30px;height: 50px;border: none;border-radius: 10px 0 0 10px;background: var(--color-main);color: #fff;position: absolute;left: -30px;top: 50%;transform: translateY(-50%);transition: background 0.3s;cursor: pointer;}
.fix-toggle:hover {background: #1f1956;}
.fix-toggle::before {content: '';display: block;width: 0;height: 0;border-style: solid;border-width: 8px 13.856px 8px 0px;border-color: transparent #ffffff transparent transparent;position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;}
.fix-btns.active .fix-toggle::before {border-width: 8px 0px 8px 13.856px;border-color: transparent transparent transparent #FFFFFF;}
.fix-btns ul {width: 100px;border-radius: 15px;overflow: hidden;}
.fix-btns ul > li {display: flex;justify-content: center;align-items: center;padding: 16px 0;background: #fff;position: relative;}
.fix-btns ul > li:not(:last-child)::after {content: '';display: block;width: 80%;height: 1px;background: #E8E8E8;position: absolute;bottom: 0;left: 0;right: 0;margin: auto;}
.fix-btns ul > li:last-child {background: var(--color-main);}
.fix-btns ul > li > a {display: block;}
.fix-btns ul > li > a > .ico {width: 40px;margin:0 auto 10px;}
.fix-btns ul > li > a > .txt {font-size: 16px;font-weight: 500;text-align: center;}
.fix-btns ul > li > button {display: flex;flex-direction: column;align-items: center;margin: 0 auto;position: relative;border: 0;background: none;color: #fff;font-size: 16px;font-weight: 700;cursor: pointer;}
.fix-btns ul > li > button::before {content: '';display: block;width: 22px;height: 22px;border-left: 3px solid #fff;border-top: 3px solid #fff;transform: rotate(45deg);position: relative;top: 7px;}

@media all and (max-width: 1499px){
    .fix-btns {/* right: 50px; */}
    
}
@media all and (max-width: 1024px){
    .fix-btns {/* right: 20px; */right: -80px;}
    .fix-btns.active {right: 5px;}
    .fix-btns ul {width: 80px;}
    .fix-btns ul > li > a > .ico {width: 34px;}
    .fix-btns ul > li > a > .txt {font-size: 14px;}
    .fix-btns ul > li > button {font-size: 14px;}
    .fix-btns ul > li > button::before {width: 18px;height: 18px;top: 3px;}
}
@media all and (max-width: 640px){
    /* .fix-btns {width: 90%;top: auto;right: auto;left: 50%;bottom: 20px;transform: translate(-50%, 0);}
    .fix-btns ul {display: flex;width: 100%;}
    .fix-btns ul > li {width: 20%;padding: 10px 0;}
    .fix-btns ul > li > a > .ico {width: 28px;margin: 0 auto 5px;} */
}


/* Footer - 비급여 진료비  */
.ft-popup-bg {display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.6);z-index: 999;}
.ft-popup-wrap {display: none;position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);width: calc(100% - 40px);max-width: 1200px;height: calc(100% - 120px);max-height: 850px;z-index: 999999;background: #fff;}
.ft-popup-wrap .top{height: 70px;width: 100%;background: var(--color-main);;text-align: center;position: relative;top: 0;left: 0;}
.ft-popup-wrap .top p{line-height: 70px;color: #fff;font-size:20px; font-weight: bold;}
.ft-popup-wrap .top span{position: absolute;top: 0;right: 0;height: 100%;width: auto;aspect-ratio: auto 1 / 1;cursor: pointer;}
.ft-popup-wrap .top span::after{width: 2px;height:50%;content:"";display: block;background: #fff;transform: translate(-50%, -50%) rotate(45deg);top: 50%;left: 50%;position: absolute;}
.ft-popup-wrap .top span::before{width: 2px;height:50%;content:"";display: block;background: #fff;transform: translate(-50%, -50%) rotate(-45deg);top: 50%;left: 50%;position: absolute;}
.ft-popup-wrap #popup-cont {width: calc(100%);height: calc(100% - 120px);padding: 40px;box-sizing: border-box;overflow-y: auto;}
.ft-popup-wrap #popup-cont::-webkit-scrollbar { width: 10px; }
.ft-popup-wrap #popup-cont::-webkit-scrollbar-thumb { background-color: var(--color-main);}
.ft-popup-wrap #popup-cont::-webkit-scrollbar-track { background-color: #f9f9f9; }

@media all and (max-width: 1024px){
    .ft-popup-wrap .top {height: 50px;}
    .ft-popup-wrap .top p{line-height: 50px;}
}
@media all and (max-width: 768px){
    .ft-popup-wrap #popup-cont {height: calc(100% - 80px);padding: 20px;}
}