@charset "utf-8";

/**
* --------------------------------
* Fonts CSS
* --------------------------------
*/

@font-face {
  font-family: "Pretendard";
  font-weight: 400;
  src: local("Pretendard Regular"),
  url("../fonts/Pretendard-Regular.woff") format("woff");
  font-display: swap;
}

@font-face {
  font-family: "Pretendard";
  font-weight: 500;
  src: local("Pretendard Medium"),
  url("../fonts/Pretendard-Medium.woff") format("woff");
  font-display: swap;
}

@font-face {
  font-family: "Pretendard";
  font-weight: 600;
  src: local("Pretendard SemiBold"),
  url("../fonts/Pretendard-SemiBold.woff") format("woff");
  font-display: swap;
}

@font-face {
  font-family: "Pretendard";
  font-weight: 700;
  src: local("Pretendard Bold"),
  url("../fonts/Pretendard-Bold.woff") format("woff");
  font-display: swap;
}

@font-face {
  font-family: "Vanitas-Extrabold";
  /* font-weight: 800; */
  src: local("Vanitas Extrabold"),
  url("../fonts/Vanitas-Extrabold.woff") format("woff");
  font-display: swap;
}

/**
 * --------------------------------
 * common CSS
 * --------------------------------
*/

/* base */
html {width: 100%;margin: 0;padding: 0;}
/* body {width: 100%;margin: 0;padding: 0;font-family: "Pretendard", "Malgun Gothic", "맑은 고딕", Dotum, "돋움", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-weight: 400;font-size: 16px;line-height: 1;color: #000;font-weight:  400;letter-spacing: 0;word-wrap: break-word;image-rendering: -webkit-optimize-contrast;} */
body {width: 100%;margin: 0;padding: 0;font-family: "Malgun Gothic", "맑은 고딕", Dotum, "돋움", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-weight: 400;font-size: 16px;line-height: 1;color: #000;font-weight:  400;letter-spacing: 0;word-wrap: break-word;image-rendering: -webkit-optimize-contrast;}
h1, h2 ,h3, h4, h5, h6 {margin: 0;font-weight: 400;}
ul, ol {list-style: none;margin: 0;padding: 0;}
/* button {font-family: "Pretendard", "Malgun Gothic", "맑은 고딕", Dotum, "돋움", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";cursor: pointer;padding: 0;border: none;letter-spacing: -0.025em;background-color: transparent;outline: none;} */
button {font-family: "Malgun Gothic", "맑은 고딕", Dotum, "돋움", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";cursor: pointer;padding: 0;border: none;letter-spacing: -0.025em;background-color: transparent;outline: none; -webkit-tap-highlight-color: transparent;}
a {color: #767676;text-decoration: none;outline: none;}
i, p, div, span, li {margin: 0;}
em {display: inline-block;font-style: normal;}
table {table-layout: fixed;width: 100%;border-collapse: collapse;border-spacing: 0;}
table caption {display: none;}
th, td {padding: 0;}
dl, dd {margin: 0;}
figure {margin: 0;}
img {vertical-align: top;}
address {font-style: normal;}
.hide {position: absolute !important;left: -9999px;}
*, *:before, *:after {box-sizing: border-box;}

/* header.on+.floating-menu {opacity: 1;}
.floating-menu {position: fixed; z-index: 9999;right: 140px;bottom: 60px; opacity: 0;transition: opacity ease-in .4s;}
.floating-menu .list {position: absolute; bottom: 130px;left: 50%;transform: translateX(calc(-50% - 20px)); background-color: #26BEA4;padding: 40px 42px 73px;width: 334px;border-radius: 16px 16px 0px 0px;z-index: -2; display: none;box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.25);}
.floating-menu .list li {width: 100%; color: #FFF;text-align: center;font-family: Pretendard;font-size: 18px;font-weight: 500;line-height: 30px;border-radius: 8px;background: rgba(255, 255, 255, 0.20);padding: 8px;}
.floating-menu .list li+li {margin-top: 8px;}
.floating-menu .list li:hover {background: #198B7F;}
.floating-btn {position: relative; transition: width ease-in-out .4s;}
.floating-btn .open-btn {height: 88px;width: 0;transition: width ease-in-out .5s;transform-origin: right;margin-right: 36px;right: 0;}
.floating-btn .open-btn::after {content: '';display: block;opacity: 0; position: absolute;top: 8px;right: 0; background-color: #28CBAE;width:72px;height: 72px;border-radius: 16px;transform: rotate(45deg);overflow: hidden;z-index: -1;transition: width ease-in-out .4s;}
.floating-btn.active .open-btn {background: linear-gradient(90deg, #188B7E 22.06%, #28CBAE 96.95%);transition: width ease-in-out .4s;}
.floating-btn.active .open-btn::after {
  opacity: 1;
}
.floating-btn .img-wrap {position: absolute;top: 8px;left: 0;background-color: #188B7E;width:72px;height: 72px;border-radius: 16px;transform: rotate(45deg);overflow: hidden;z-index: 2;box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.25);transition: left ease-in-out .2s;}
.floating-btn.active .img-wrap {left: -36px; box-shadow: none;}
.floating-btn.active  p {position: absolute;top: 28px;right: 26px;}
.floating-btn .img-wrap img {transform: rotate(-45deg);margin-left: -7px;margin-top: 3px;}
.floating-btn p {color: #FFF;font-family: "Pretendard";font-size: 16px;font-weight: 500;line-height: 30px;z-index: 1; display: none;width: 205px;}
.floating-btn.gray .open-btn {background: #828282;}
.floating-btn.gray .img-wrap {background: #828282;}
.floating-btn.gray .open-btn::after {background: #828282;}
.floating-btn .close-btn {width: 100%;height: 100%;position: absolute;right: 0; display: none;z-index: 2;} */
.top-btn {background-color: #19403F;width: 72px;height: 72px;border-radius: 16px;transform: rotate(45deg);overflow: hidden;z-index: 2;box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.25);margin-top: 15px;position: relative;float: right;z-index: 2;}
.top-btn img {position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%) rotate(-45deg);}


.floating-menu {position: fixed; z-index: 9999;right: 140px;bottom: 60px; opacity: 1;transition: opacity ease-in .4s;}
.floating-menu .floating-area {position: relative;height: 88px; display: flex;overflow: visible !important;}
.floating-menu .floating-btn {width: 88px; position: absolute;right: 37px;width: 100%;max-width: 243px;float: left;
  background: linear-gradient(90deg, #188B7E 22.06%, #28CBAE 96.95%);
}
.floating-menu .floating-area p {color: #FFF;font-family: "Pretendard";font-size: 16px;font-weight: 500;z-index: 1; display: none;line-height: 88px;padding-left: 57px;width: 260px;}
.floating-menu .img-wrap {position: absolute;top: 8px;left: 0; background-color: #188B7E;width:72px;height: 72px;border-radius: 16px;transform: rotate(45deg);overflow: hidden;box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.25);z-index: 2;}
.floating-menu .img-wrap img {transform: rotate(-45deg);margin-left: -7px;margin-top: 3px;}


.floating-menu .floating-btn::after {content: '';position: absolute;top: 8px;right: -37px; background-color: #28CBAE;width:72px;height: 72px;border-radius: 16px;transform: rotate(45deg);overflow: hidden;z-index: -1;transition:  opacity ease-in .4s;}
.floating-menu.active .floating-btn::after {opacity: 1;}
.floating-menu.active .img-wrap {box-shadow: none;}
.floating-menu .open-btn {width: 100%;height: 100%;position: absolute;right: 0; display: none;z-index: 2;}
.floating-menu .close-btn {width: 100%;height: 100%;position: absolute;right: 0; display: none;z-index: 5;}
.floating-menu.gray .floating-btn {background: #828282;}
.floating-menu.gray .img-wrap {background: #828282;}
.floating-menu.gray .floating-btn::after {background: #828282;}


.floating-menu .list {position: absolute;display: none; bottom: 40px;left: 50%;transform: translateX(-50%); background-color: #26BEA4;padding: 40px 42px 73px;width: 334px;border-radius: 16px 16px 0px 0px;z-index: -2; box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.25);}
.floating-menu .list li {width: 100%; color: #FFF;text-align: center;font-family: Pretendard;font-size: 18px;font-weight: 500;line-height: 30px;border-radius: 8px;background: rgba(255, 255, 255, 0.20);padding: 8px;}
.floating-menu .list li+li {margin-top: 8px;}
.floating-menu .list li:hover {background: #252525;}