@charset "UTF-8";
@import 'https://scms-rs.joins.net/common/css/reset.css';
@import 'https://scms-rs.joins.net/common/css/layout.css';
@import 'https://scms-rs.joins.net/common/css/module.css';
:root {
  /* color - theme */
  --gray_90: #FAFAFA;
  --gray_85: #F5F5F5;
  --gray_80: #EBEBEB;
  --gray_70: #CCCCCC;
  --gray_60: #ADADAD;
  --gray_50: #8F8F8F;
  --gray_40: #707070;
  --gray_30: #5C5C5C;
  --gray_20: #474747;
  --gray_10: #333333;
  --gray_5: #1F1F1F;
  /* color - semantic */
  --basic: var(--gray_5);
  --sub: var(--gray_40);
  --dim: rgba(0, 0, 0, .4);
  /* font */
  --font: "Pretendard";
  --fontEn: "Pretendard";
  /* image */
  --ratio: 16 / 9 ;
  /* layout */
  --basicSize: 4px;
}

/* font */
@font-face {
  font-family: "Pretendard";
  font-weight: 800;
  font-display: optional;
  src: url(https://scms-rs.joins.net/common/fonts/pretendard/woff2/Pretendard-ExtraBold.woff2) format("woff2");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 700;
  font-display: optional;
  src: url(https://scms-rs.joins.net/common/fonts/pretendard/woff2/Pretendard-Bold.woff2) format("woff2");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 600;
  font-display: optional;
  src: url(https://scms-rs.joins.net/common/fonts/pretendard/woff2/Pretendard-SemiBold.woff2) format("woff2");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 500;
  font-display: optional;
  src: url(https://scms-rs.joins.net/common/fonts/pretendard/woff2/Pretendard-Medium.woff2) format("woff2");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 400;
  font-display: optional;
  src: url(https://scms-rs.joins.net/common/fonts/pretendard/woff2/Pretendard-Regular.woff2) format("woff2");
}
/* typo */
.f__H1, .f__H1 > a, .f__H1 > span {
  color: var(--basic);
  font-family: var(--font);
  font-size: 32px;
  font-weight: 800;
  line-height: 44px;
}
.f__H1 :lang(en), .f__H1 :lang(en) > a, .f__H1 > a :lang(en), .f__H1 > a :lang(en) > a, .f__H1 > span :lang(en), .f__H1 > span :lang(en) > a {
  font-family: var(--fontEn);
}
.f__H2, .f__H2 > a, .f__H2 > span {
  color: var(--basic);
  font-family: var(--font);
  font-size: 32px;
  font-weight: 700;
  line-height: 44px;
}
.f__H2 :lang(en), .f__H2 :lang(en) > a, .f__H2 > a :lang(en), .f__H2 > a :lang(en) > a, .f__H2 > span :lang(en), .f__H2 > span :lang(en) > a {
  font-family: var(--fontEn);
}
.f__H3, .f__H3 > a, .f__H3 > span {
  color: var(--basic);
  font-family: var(--font);
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
  letter-spacing: -0.072px;
}
.f__H3 :lang(en), .f__H3 :lang(en) > a, .f__H3 > a :lang(en), .f__H3 > a :lang(en) > a, .f__H3 > span :lang(en), .f__H3 > span :lang(en) > a {
  font-family: var(--fontEn);
}
.f__H4, .f__H4 > a, .f__H4 > span {
  color: var(--basic);
  font-family: var(--font);
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
}
.f__H4 :lang(en), .f__H4 :lang(en) > a, .f__H4 > a :lang(en), .f__H4 > a :lang(en) > a, .f__H4 > span :lang(en), .f__H4 > span :lang(en) > a {
  font-family: var(--fontEn);
}
.f__H5, .f__H5 > a, .f__H5 > span {
  color: var(--basic);
  font-family: var(--font);
  font-size: 20px;
  font-weight: 600;
  line-height: 26px;
  letter-spacing: -0.06px;
}
.f__H5 :lang(en), .f__H5 :lang(en) > a, .f__H5 > a :lang(en), .f__H5 > a :lang(en) > a, .f__H5 > span :lang(en), .f__H5 > span :lang(en) > a {
  font-family: var(--fontEn);
}

.f__sH1, .f__sH1 > a, .f__sH1 > span {
  color: var(--basic);
  font-family: var(--font);
  font-size: 18px;
  font-weight: 700;
  line-height: 26px;
  letter-spacing: -0.054px;
}
.f__sH1 :lang(en), .f__sH1 :lang(en) > a, .f__sH1 > a :lang(en), .f__sH1 > a :lang(en) > a, .f__sH1 > span :lang(en), .f__sH1 > span :lang(en) > a {
  font-family: var(--fontEn);
}
.f__sH2, .f__sH2 > a, .f__sH2 > span {
  color: var(--basic);
  font-family: var(--font);
  font-size: 18px;
  font-weight: 800;
  line-height: 26px;
  letter-spacing: -0.054px;
}
.f__sH2 :lang(en), .f__sH2 :lang(en) > a, .f__sH2 > a :lang(en), .f__sH2 > a :lang(en) > a, .f__sH2 > span :lang(en), .f__sH2 > span :lang(en) > a {
  font-family: var(--fontEn);
}
.f__sH3, .f__sH3 > a, .f__sH3 > span {
  color: var(--basic);
  font-family: var(--font);
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: -0.054px;
}
.f__sH3 :lang(en), .f__sH3 :lang(en) > a, .f__sH3 > a :lang(en), .f__sH3 > a :lang(en) > a, .f__sH3 > span :lang(en), .f__sH3 > span :lang(en) > a {
  font-family: var(--fontEn);
}
.f__sH4, .f__sH4 > a, .f__sH4 > span {
  color: var(--basic);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: -0.048px;
}
.f__sH4 :lang(en), .f__sH4 :lang(en) > a, .f__sH4 > a :lang(en), .f__sH4 > a :lang(en) > a, .f__sH4 > span :lang(en), .f__sH4 > span :lang(en) > a {
  font-family: var(--fontEn);
}
.f__sH5, .f__sH5 > a, .f__sH5 > span {
  color: var(--basic);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: -0.048px;
}
.f__sH5 :lang(en), .f__sH5 :lang(en) > a, .f__sH5 > a :lang(en), .f__sH5 > a :lang(en) > a, .f__sH5 > span :lang(en), .f__sH5 > span :lang(en) > a {
  font-family: var(--fontEn);
}
.f__sH6, .f__sH6 > a, .f__sH6 > span {
  color: var(--basic);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  line-height: 22px;
  letter-spacing: -0.048px;
}
.f__sH6 :lang(en), .f__sH6 :lang(en) > a, .f__sH6 > a :lang(en), .f__sH6 > a :lang(en) > a, .f__sH6 > span :lang(en), .f__sH6 > span :lang(en) > a {
  font-family: var(--fontEn);
}
.f__sH7, .f__sH7 > a, .f__sH7 > span {
  color: var(--basic);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: -0.042px;
}
.f__sH7 :lang(en), .f__sH7 :lang(en) > a, .f__sH7 > a :lang(en), .f__sH7 > a :lang(en) > a, .f__sH7 > span :lang(en), .f__sH7 > span :lang(en) > a {
  font-family: var(--fontEn);
}

.f__body1, .f__body1 > a, .f__body1 > span {
  color: var(--basic);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 500;
  line-height: 26px;
  letter-spacing: -0.048px;
}
.f__body1 :lang(en), .f__body1 :lang(en) > a, .f__body1 > a :lang(en), .f__body1 > a :lang(en) > a, .f__body1 > span :lang(en), .f__body1 > span :lang(en) > a {
  font-family: var(--fontEn);
}
.f__body2, .f__body2 > a, .f__body2 > span {
  color: var(--basic);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
  letter-spacing: -0.042px;
}
.f__body2 :lang(en), .f__body2 :lang(en) > a, .f__body2 > a :lang(en), .f__body2 > a :lang(en) > a, .f__body2 > span :lang(en), .f__body2 > span :lang(en) > a {
  font-family: var(--fontEn);
}
.f__body3, .f__body3 > a, .f__body3 > span {
  color: var(--basic);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  line-height: 21px;
  letter-spacing: -0.039px;
}
.f__body3 :lang(en), .f__body3 :lang(en) > a, .f__body3 > a :lang(en), .f__body3 > a :lang(en) > a, .f__body3 > span :lang(en), .f__body3 > span :lang(en) > a {
  font-family: var(--fontEn);
}

.f__caption1, .f__caption1 > a, .f__caption1 > span {
  color: var(--sub);
  font-family: var(--font);
  min-width: 50px;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: -0.036px;
}
.f__caption1 :lang(en), .f__caption1 :lang(en) > a, .f__caption1 > a :lang(en), .f__caption1 > a :lang(en) > a, .f__caption1 > span :lang(en), .f__caption1 > span :lang(en) > a {
  font-family: var(--fontEn);
}
.f__caption2, .f__caption2 > a, .f__caption2 > span {
  color: var(--sub);
  font-family: var(--font);
  min-width: 50px;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: -0.036px;
}
.f__caption2 :lang(en), .f__caption2 :lang(en) > a, .f__caption2 > a :lang(en), .f__caption2 > a :lang(en) > a, .f__caption2 > span :lang(en), .f__caption2 > span :lang(en) > a {
  font-family: var(--fontEn);
}

[class*=f__H], [class*=f__H] > a,
[class*=f__sH], [class*=f__sH] > a {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/*** component ***/
.imageBox {
  aspect-ratio: var(--ratio);
}
.moduleSection .imageBox, .sideSection .imageBox {
  border: 1px solid var(--gray_80);
}

.imageCircle.line {
  border: 1px solid var(--gray_80);
}

.adBar {
  background: var(--gray_80);
}
.adBar span {
  color: var(--gray_50);
}

.f__tab > ul li {
  border: 1px solid var(--gray_80);
}
.f__tab > ul li span {
  color: var(--gray_10);
}
.f__tab > ul li.active {
  border-color: var(--gray_10);
  background-color: var(--gray_10);
}
.f__tab > ul li.active span {
  color: white;
}

[class*=m__] article .preview {
  color: var(--gray_40);
}
[class*=m__] article h2:not(:has([class*=m__] article h2.preview, [class*=m__] article h3.preview, [class*=m__] article h4.preview, [class*=m__] article h5.preview)):hover, [class*=m__] article h3:not(:has([class*=m__] article h2.preview, [class*=m__] article h3.preview, [class*=m__] article h4.preview, [class*=m__] article h5.preview)):hover, [class*=m__] article h4:not(:has([class*=m__] article h2.preview, [class*=m__] article h3.preview, [class*=m__] article h4.preview, [class*=m__] article h5.preview)):hover, [class*=m__] article h5:not(:has([class*=m__] article h2.preview, [class*=m__] article h3.preview, [class*=m__] article h4.preview, [class*=m__] article h5.preview)):hover {
  color: var(--gray_40);
}

/* module title */
.moduleTit {
  margin-bottom: 16px;
}
.moduleTit .titGroup {
  padding-top: 8px;
  height: 34px;
}
.moduleTit .titGroup h3 {
  font-size: 18px;
  font-weight: 700;
  line-height: 26px;
}

/* unit title*/
.unitTit {
  height: 24px;
  margin-bottom: 8px;
}

/* article Title hover */
article h2 > a:hover, article h3 > a:hover {
  color: var(--gray_40);
}

/* page title*/
.pageTit {
  font-size: 32px;
  font-weight: 800;
  line-height: 44px;
}

/* category title*/
.cateTit {
  font-size: 18px;
  font-weight: 800;
  line-height: 26px;
  letter-spacing: -0.054px;
  color: var(--point);
  margin-bottom: 24px;
}

/*** layout ***/
.f__inner {
  max-width: 1200px;
}

.f__section {
  max-width: 1200px;
}
.f__section.bg {
  background-color: var(--gray_80);
}
.f__section:has(aside) {
  grid-template-columns: 1fr 300px;
}
.f__section:has(aside) > .headlineSection {
  grid-column: 1/2;
}
.f__section + .f__section {
  margin-top: 48px;
}

.f__header {
  background-color: white;
  border-bottom: 1px solid var(--gray_60);
}
.f__header .headerTop span a {
  color: var(--gray_20);
}
.f__header .headerTop span a::after {
  background-color: var(--gray_80);
}
.f__header.logoCenter .headerTop span a + a::before {
  background-color: var(--gray_80);
}
.f__header .gnbWrap .depth01 li a {
  color: var(--gray_5);
}
.f__header .gnbWrap .depth02 {
  background-color: white;
  border-top: 1px solid var(--gray_90);
  box-shadow: 0 3px 15px -15px #000;
}
.f__header .gnbWrap .depth02 .f__inner {
  padding: 20px 0 20px 381px;
}
.f__header .gnbWrap .depth02 li {
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
  color: var(--gray_90);
}
.f__header .gnbWrap .depth02 li a {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--gray_60);
}

.f__siteMapWrap {
  border-top: 1px solid var(--gray_90);
  background-color: #fff;
  box-shadow: 0 3px 15px -15px #000;
}
.f__siteMapWrap .navigation .dep01:last-child {
  border-right: 1px solid var(--gray_80);
}
.f__siteMapWrap .navigation .dep02 > ul li + li {
  margin-top: 16px;
}
.f__siteMapWrap .navigation .dep02 > ul li a {
  color: var(--gray_20);
  font-weight: 500;
  line-height: 20px;
}
.f__siteMapWrap .navigation .dep02 > ul li a:hover {
  color: var(--gray_50);
}
.f__siteMapWrap .bottomArea {
  background-color: var(--gray_90);
  border-top: 1px solid var(--gray_80);
}
.f__siteMapWrap .bottomArea .btnGroup a {
  font-size: 14px;
  font-weight: 700;
  line-height: 22px;
  letter-spacing: -0.042px;
  color: var(--gray_5);
}

.f__main {
  min-height: calc(100vh - 660px);
}

.f__sub {
  min-height: calc(100vh - 610px);
}
.f__sub .snbWrap {
  gap: 24px;
  align-items: center;
  height: 44px;
  margin-bottom: 40px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--point);
}
.f__sub .snbWrap .snb {
  gap: 24px;
  align-items: center;
}
.f__sub .snbWrap .snb li a {
  color: var(--gray_30);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px; /* 150% */
  letter-spacing: -0.048px;
  white-space: nowrap;
}
.f__sub .snbWrap .snb li.active a {
  color: var(--gray_5);
}

.f__footer {
  background-color: var(--gray_90);
  border-top: 1px solid var(--gray_80);
  /* 로고없음 */
}
.f__footer .footerInfo {
  background-color: var(--gray_80);
}
.f__footer .footerInfo > .f__inner .infoArea ul li::before {
  background-color: var(--gray_70);
}
.f__footer .footerInfo > .f__inner .infoArea ul a {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.042px;
  color: var(--gray_10);
}
.f__footer .footerInfo > .f__inner .infoArea ul.snsWrap {
  height: 36px;
}
.f__footer .footerInfo > .f__inner .infoArea p {
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: -0.036px;
  color: var(--gray_20);
}
.f__footer .footerInfo > .f__inner .infoArea .address span::before {
  background-color: var(--gray_70);
}
.f__footer .footerInfo .powered {
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: -0.036px;
  color: var(--gray_20);
}
.f__footer.logoBlank .footerInfo .f__ic_facebook::before {
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="8" height="13" viewBox="0 0 8 13" fill="none"%3E%3Cpath d="M7.36548 7.49482L7.85786 5.04623H4.99197V4.18024C4.99197 2.8864 5.54788 2.38866 6.98644 2.38866C7.43321 2.38866 7.79294 2.3986 8 2.41847V0.199029C7.60763 0.0993541 6.64848 0 6.09256 0C3.16069 0 1.80917 1.26404 1.80917 3.99115V5.04623H0V7.49482H1.80917V13C1.82789 13 3.18645 13 3.91714 13C4.27687 13 4.93529 13 4.99162 13V7.49482H7.36548Z" fill="%23474747"/%3E%3C/svg%3E');
}
.f__footer.logoBlank .footerInfo .f__ic_X::before {
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"%3E%3Cpath d="M12.2169 1.26953H14.4659L9.55249 6.88519L15.3327 14.5268H10.8068L7.26204 9.89222L3.20598 14.5268H0.955637L6.21097 8.52026L0.666016 1.26953H5.30675L8.51095 5.50575L12.2169 1.26953ZM11.4276 13.1807H12.6737L4.62961 2.54495H3.29232L11.4276 13.1807Z" fill="%23474747"/%3E%3C/svg%3E');
}
.f__footer.logoBlank .footerInfo .f__ic_instagram::before {
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"%3E%3Cg clip-path="url(%23clip0_4048_5642)"%3E%3Cpath d="M8 1.44062C10.1375 1.44062 10.3906 1.45 11.2313 1.4875C12.0125 1.52187 12.4344 1.65313 12.7156 1.7625C13.0875 1.90625 13.3563 2.08125 13.6344 2.35938C13.9156 2.64062 14.0875 2.90625 14.2313 3.27813C14.3406 3.55938 14.4719 3.98438 14.5063 4.7625C14.5438 5.60625 14.5531 5.85938 14.5531 7.99375C14.5531 10.1313 14.5438 10.3844 14.5063 11.225C14.4719 12.0063 14.3406 12.4281 14.2313 12.7094C14.0875 13.0813 13.9125 13.35 13.6344 13.6281C13.3531 13.9094 13.0875 14.0813 12.7156 14.225C12.4344 14.3344 12.0094 14.4656 11.2313 14.5C10.3875 14.5375 10.1344 14.5469 8 14.5469C5.8625 14.5469 5.60938 14.5375 4.76875 14.5C3.9875 14.4656 3.56563 14.3344 3.28438 14.225C2.9125 14.0813 2.64375 13.9063 2.36563 13.6281C2.08438 13.3469 1.9125 13.0813 1.76875 12.7094C1.65938 12.4281 1.52813 12.0031 1.49375 11.225C1.45625 10.3813 1.44688 10.1281 1.44688 7.99375C1.44688 5.85625 1.45625 5.60313 1.49375 4.7625C1.52813 3.98125 1.65938 3.55938 1.76875 3.27813C1.9125 2.90625 2.0875 2.6375 2.36563 2.35938C2.64688 2.07812 2.9125 1.90625 3.28438 1.7625C3.56563 1.65313 3.99063 1.52187 4.76875 1.4875C5.60938 1.45 5.8625 1.44062 8 1.44062ZM8 0C5.82813 0 5.55625 0.009375 4.70313 0.046875C3.85313 0.084375 3.26875 0.221875 2.7625 0.41875C2.23438 0.625 1.7875 0.896875 1.34375 1.34375C0.896875 1.7875 0.625 2.23438 0.41875 2.75938C0.221875 3.26875 0.084375 3.85 0.046875 4.7C0.009375 5.55625 0 5.82812 0 8C0 10.1719 0.009375 10.4438 0.046875 11.2969C0.084375 12.1469 0.221875 12.7313 0.41875 13.2375C0.625 13.7656 0.896875 14.2125 1.34375 14.6562C1.7875 15.1 2.23438 15.375 2.75938 15.5781C3.26875 15.775 3.85 15.9125 4.7 15.95C5.55313 15.9875 5.825 15.9969 7.99688 15.9969C10.1688 15.9969 10.4406 15.9875 11.2938 15.95C12.1438 15.9125 12.7281 15.775 13.2344 15.5781C13.7594 15.375 14.2063 15.1 14.65 14.6562C15.0938 14.2125 15.3688 13.7656 15.5719 13.2406C15.7688 12.7313 15.9063 12.15 15.9438 11.3C15.9813 10.4469 15.9906 10.175 15.9906 8.00313C15.9906 5.83125 15.9813 5.55938 15.9438 4.70625C15.9063 3.85625 15.7688 3.27188 15.5719 2.76562C15.375 2.23438 15.1031 1.7875 14.6563 1.34375C14.2125 0.9 13.7656 0.625 13.2406 0.421875C12.7313 0.225 12.15 0.0875 11.3 0.05C10.4438 0.009375 10.1719 0 8 0Z" fill="%23474747"/%3E%3Cpath d="M8 3.89062C5.73125 3.89062 3.89062 5.73125 3.89062 8C3.89062 10.2688 5.73125 12.1094 8 12.1094C10.2688 12.1094 12.1094 10.2688 12.1094 8C12.1094 5.73125 10.2688 3.89062 8 3.89062ZM8 10.6656C6.52813 10.6656 5.33437 9.47188 5.33437 8C5.33437 6.52813 6.52813 5.33437 8 5.33437C9.47188 5.33437 10.6656 6.52813 10.6656 8C10.6656 9.47188 9.47188 10.6656 8 10.6656Z" fill="%23474747"/%3E%3Cpath d="M13.2312 3.72891C13.2312 4.26016 12.8 4.68828 12.2719 4.68828C11.7406 4.68828 11.3125 4.25703 11.3125 3.72891C11.3125 3.19766 11.7438 2.76953 12.2719 2.76953C12.8 2.76953 13.2312 3.20078 13.2312 3.72891Z" fill="%23474747"/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id="clip0_4048_5642"%3E  %3Crect width="16" height="16" fill="%23474747"/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E');
}

.f__navigation .dep01 + .dep01::before {
  background-color: var(--gray_80);
}
.f__navigation .dep01 > a {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: -0.048px;
  color: var(--basic);
}
.f__navigation .dep02 > ul li a {
  color: var(--gray_30);
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: -0.042px;
}

.moduleSection {
  row-gap: 24px;
  column-gap: 24px;
}

.headlineSection {
  display: flex;
  flex-direction: column;
  row-gap: 16px;
}
.headlineSection .dateBox {
  height: 24px;
}
.headlineSection .dateBox p, .headlineSection .dateBox span {
  color: var(--gray_40);
}

.articleSection {
  padding-top: 24px;
}
.articleSection::before {
  content: "";
  display: block;
  position: absolute;
  height: 3px;
  top: 0;
  left: 0;
  width: 100%;
  background-color: var(--point);
}
.articleSection .article {
  row-gap: 30px;
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: -0.054px;
}

.sideSection {
  row-gap: 32px;
}

/* grid */
.gap-0 {
  gap: 0;
}
.gap-1 {
  gap: calc(var(--basicSize) * 1);
}
.gap-2 {
  gap: calc(var(--basicSize) * 2);
}
.gap-3 {
  gap: calc(var(--basicSize) * 3);
}
.gap-4 {
  gap: calc(var(--basicSize) * 4);
}
.gap-5 {
  gap: calc(var(--basicSize) * 5);
}
.gap-6 {
  gap: calc(var(--basicSize) * 6);
}
.gap-7 {
  gap: calc(var(--basicSize) * 7);
}
.gap-8 {
  gap: calc(var(--basicSize) * 8);
}
.gap-9 {
  gap: calc(var(--basicSize) * 9);
}
.gap-10 {
  gap: calc(var(--basicSize) * 10);
}
.gap-20 {
  gap: calc(var(--basicSize) * 20);
}
.gap-30 {
  gap: calc(var(--basicSize) * 30);
}
.gap-40 {
  gap: calc(var(--basicSize) * 40);
}
.gap-50 {
  gap: calc(var(--basicSize) * 50);
}

/*** 레이아웃 유닛 ***/
.f__grid {
  column-gap: 30px;
  row-gap: 24px;
}
.f__grid + .f__grid {
  margin-top: 40px;
}
.f__grid.line [class*=u__] + [class*=u__] {
  position: relative;
}
.f__grid.line [class*=u__] + [class*=u__]::before {
  position: absolute;
  content: "";
  display: block;
  width: 1px;
  height: 100%;
  background-color: var(--gray_80);
  top: 0;
  left: -15.5px;
}

/* 모듈 */
[class*=m__] .f__grid {
  column-gap: 30px;
  row-gap: 24px;
}

/*** laptop ***/
@container (min-width: 1016px) and (max-width: 1200px) {
  .f__section, .f__inner {
    padding: 0 20px;
  }
}
/*** tablet ***/
@container (min-width: 760px) and (max-width: 1015px) {
  /* typo */
  .f__H1, .f__H1 > a, .f__H1 > span {
    font-size: 28px;
    font-weight: 800;
    line-height: 40px;
  }
  .f__H2, .f__H2 > a, .f__H2 > span {
    font-size: 28px;
    font-weight: 700;
    line-height: 40px;
  }
  .f__H3, .f__H3 > a, .f__H3 > span {
    font-size: 20px;
    font-weight: 700;
    line-height: 32px;
  }
  .f__H4, .f__H4 > a, .f__H4 > span {
    font-size: 18px;
    font-weight: 700;
    line-height: 26px;
  }
  .f__H5, .f__H5 > a, .f__H5 > span {
    font-size: 18px;
    font-weight: 600;
    line-height: 26px;
  }
  .f__sH1, .f__sH1 > a, .f__sH1 > span {
    font-size: 18px;
    font-weight: 800;
    line-height: 30px;
    letter-spacing: -0.054px;
  }
  .f__sH2, .f__sH2 > a, .f__sH2 > span {
    font-size: 16px;
    font-weight: 800;
    line-height: 24px;
    letter-spacing: -0.048px;
  }
  .f__sH3, .f__sH3 > a, .f__sH3 > span {
    font-size: 18px;
    font-weight: 500;
    line-height: 28px;
    letter-spacing: -0.054px;
  }
  .f__sH4, .f__sH4 > a, .f__sH4 > span {
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: -0.048px;
  }
  .f__sH5, .f__sH5 > a, .f__sH5 > span {
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: -0.048px;
  }
  .f__sH6, .f__sH6 > a, .f__sH6 > span {
    font-size: 14px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: -0.042px;
  }
  .f__sH7, .f__sH7 > a, .f__sH7 > span {
    font-size: 14px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: -0.042px;
  }
  .f__body1, .f__body1 > a, .f__body1 > span {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.048px;
  }
  .f__body2, .f__body2 > a, .f__body2 > span {
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
    letter-spacing: -0.042px;
  }
  .f__body3, .f__body3 > a, .f__body3 > span {
    font-size: 13px;
    font-weight: 500;
    line-height: 21px;
    letter-spacing: -0.039px;
  }
  .f__caption1, .f__caption1 > a, .f__caption1 > span {
    font-size: 12px;
    font-weight: 500;
    line-height: 19px;
    letter-spacing: -0.036px;
  }
  .f__caption2, .f__caption2 > a, .f__caption2 > span {
    font-size: 13px;
    font-weight: 400;
    line-height: 21px;
    letter-spacing: -0.039px;
  }
  /* module title */
  .moduleTit .titGroup h3 {
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: -0.048px;
  }
  /*** layout ***/
  .f__inner {
    padding: 0 20px;
  }
  .f__section {
    padding: 0 20px;
    row-gap: 48px;
  }
  .f__section.bg {
    background-color: var(--gray_80);
  }
  .f__section + .f__section {
    margin-top: 48px;
  }
  .f__section:has(aside) {
    grid-template-columns: 1fr;
  }
  .f__section:not(:has(aside)) > .articleSection {
    margin-top: -48px;
  }
  .f__header, .f__header.sticky {
    background-color: white;
    border-bottom: 1px solid var(--gray_80);
  }
  .f__header > .f__inner, .f__header.sticky > .f__inner {
    padding: 0 20px;
  }
  .f__siteMapWrap {
    background-color: #fff;
  }
  .f__siteMapWrap .topArea {
    border-bottom: 1px solid var(--gray_80);
    padding: 0 20px;
  }
  .f__siteMapWrap .f__navigation .dep01 + .dep01 {
    border-top: 1px solid var(--gray_80);
  }
  .f__siteMapWrap .f__navigation .dep01:last-child {
    border-right: 0;
  }
  .f__siteMapWrap .f__navigation .dep02 > ul {
    gap: 12px;
  }
  .f__siteMapWrap .f__navigation .dep02 > ul li a {
    line-height: 22px;
  }
  .f__siteMapWrap .f__navigation .dep02 > ul li + li {
    margin-top: 0;
  }
  .f__footer .f__navigation {
    border-top: 1px solid var(--gray_80);
  }
  .f__footer .f__navigation .dep01 {
    border-bottom: 1px solid var(--gray_80);
  }
  .f__footer .f__navigation .dep01 > a {
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: -0.048px;
  }
  .f__footer .f__navigation .dep01:has(.dep02) > a {
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"%3E%3Cpath d="M20 9.25L12 17.25L4 9.25" stroke="%231F1F1F" stroke-width="1.2" stroke-linecap="square"/%3E%3C/svg%3E');
  }
  .f__footer .f__navigation .dep01.open > a {
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"%3E%3Cpath d="M20 14.75L12 6.75L4 14.75" stroke="%231F1F1F" stroke-width="1.2" stroke-linecap="square"/%3E%3C/svg%3E');
  }
  .f__footer .f__navigation .dep02 ul li > a {
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
    letter-spacing: -0.042px;
  }
  .f__footer .footerInfo > .f__inner {
    align-items: flex-start;
    gap: 0;
  }
  .f__footer .footerInfo > .f__inner .logo {
    margin-bottom: 24px;
  }
  .f__footer .footerInfo > .f__inner .infoArea ul {
    justify-content: flex-start;
  }
  .f__footer .footerInfo > .f__inner .infoArea p {
    font-size: 13px;
    font-weight: 400;
    line-height: 21px;
    letter-spacing: -0.039px;
  }
  .moduleSection {
    row-gap: 32px;
    column-gap: 32px;
  }
  .sideSection {
    row-gap: 24px;
    column-gap: 16px;
  }
  .headlineSection {
    padding-bottom: 19px;
  }
  .articleSection {
    margin-top: -48px;
  }
  .articleSection .article {
    row-gap: 30px;
    font-size: 18px;
    font-weight: 500;
    line-height: 28px;
    letter-spacing: -0.054px;
  }
  .f__main {
    min-height: calc(100vh - 642px);
  }
  /* 서브페이지 */
  .f__sub {
    min-height: calc(100vh - 642px);
  }
  .f__sub .snbWrap {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
    padding-bottom: 12px;
    height: 88px;
    max-width: calc(100% - 40px);
    margin: 0 20px 32px 20px;
  }
  .cateTit {
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: -0.048px;
  }
  /*** 레이아웃 유닛 ***/
  .f__grid {
    gap: 16px;
  }
  .f__grid.line [class*=u__] + [class*=u__]::before {
    background-color: var(--gray_80);
    left: -8px;
  }
  .f__grid + .f__grid {
    margin-top: 48px;
  }
  [class*=m__] .f__grid {
    column-gap: 16px;
    row-gap: 32px;
  }
}
/*** mobile ***/
@container (max-width: 759px) {
  /* typo */
  .f__H1, .f__H1 > a, .f__H1 > span {
    font-size: 28px;
    font-weight: 800;
    line-height: 40px;
  }
  .f__H2, .f__H2 > a, .f__H2 > span {
    font-size: 28px;
    font-weight: 700;
    line-height: 40px;
  }
  .f__H3, .f__H3 > a, .f__H3 > span {
    font-size: 20px;
    font-weight: 700;
    line-height: 32px;
  }
  .f__H4, .f__H4 > a, .f__H4 > span {
    font-size: 18px;
    font-weight: 700;
    line-height: 26px;
  }
  .f__H5, .f__H5 > a, .f__H5 > span {
    font-size: 18px;
    font-weight: 600;
    line-height: 26px;
  }
  .f__sH1, .f__sH1 > a, .f__sH1 > span {
    font-size: 18px;
    font-weight: 800;
    line-height: 30px;
    letter-spacing: -0.054px;
  }
  .f__sH2, .f__sH2 > a, .f__sH2 > span {
    font-size: 16px;
    font-weight: 800;
    line-height: 24px;
    letter-spacing: -0.048px;
  }
  .f__sH3, .f__sH3 > a, .f__sH3 > span {
    font-size: 18px;
    font-weight: 500;
    line-height: 28px;
    letter-spacing: -0.054px;
  }
  .f__sH4, .f__sH4 > a, .f__sH4 > span {
    font-size: 16x;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: -0.048px;
  }
  .f__sH5, .f__sH5 > a, .f__sH5 > span {
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: -0.048px;
  }
  .f__sH6, .f__sH6 > a, .f__sH6 > span {
    font-size: 14px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: -0.042px;
  }
  .f__sH7, .f__sH7 > a, .f__sH7 > span {
    font-size: 14px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: -0.042px;
  }
  .f__body1, .f__body1 > a, .f__body1 > span {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.048px;
  }
  .f__body2, .f__body2 > a, .f__body2 > span {
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
    letter-spacing: -0.042px;
  }
  .f__body3, .f__body3 > a, .f__body3 > span {
    font-size: 13px;
    font-weight: 500;
    line-height: 21px;
    letter-spacing: -0.039px;
  }
  .f__caption1, .f__caption1 > a, .f__caption1 > span {
    font-size: 12px;
    font-weight: 500;
    line-height: 19px;
    letter-spacing: -0.036px;
  }
  .f__caption2, .f__caption2 > a, .f__caption2 > span {
    font-size: 13px;
    font-weight: 400;
    line-height: 21px;
    letter-spacing: -0.039px;
  }
  /* module title */
  .moduleTit .titGroup h3 {
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: -0.048px;
  }
  /*** layout ***/
  .f__inner {
    padding: 0 20px;
  }
  .f__section {
    padding: 0 20px;
    row-gap: 48px;
  }
  .f__section + .f__section {
    margin-top: 48px;
  }
  .f__section:has(aside) {
    grid-template-columns: 1fr;
  }
  .f__section:not(:has(aside)) > .articleSection {
    margin-top: -48px;
  }
  .f__header, .f__header.sticky {
    background-color: white;
    border-bottom: 1px solid var(--gray_80);
  }
  .f__header > .f__inner, .f__header.sticky > .f__inner {
    padding: 0 20px;
  }
  .f__siteMapWrap {
    background-color: #fff;
  }
  .f__siteMapWrap .topArea {
    border-bottom: 1px solid var(--gray_80);
    padding: 0 20px;
  }
  .f__siteMapWrap .f__navigation .dep01 + .dep01 {
    border-top: 1px solid var(--gray_80);
  }
  .f__siteMapWrap .f__navigation .dep01:last-child {
    border-right: 0;
  }
  .f__siteMapWrap .f__navigation .dep02 > ul {
    gap: 12px;
  }
  .f__siteMapWrap .f__navigation .dep02 > ul li a {
    line-height: 22px;
  }
  .f__siteMapWrap .f__navigation .dep02 > ul li + li {
    margin-top: 0;
  }
  .f__footer .f__navigation .dep01 {
    border-bottom: 1px solid var(--gray_80);
  }
  .f__footer .f__navigation .dep01 > a {
    margin: 20px 0;
  }
  .f__footer .f__navigation .dep01:has(.dep02) > a {
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"%3E%3Cpath d="M20 9.25L12 17.25L4 9.25" stroke="%231F1F1F" stroke-width="1.2" stroke-linecap="square"/%3E%3C/svg%3E');
  }
  .f__footer .f__navigation .dep01.open > a {
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"%3E%3Cpath d="M20 14.75L12 6.75L4 14.75" stroke="%231F1F1F" stroke-width="1.2" stroke-linecap="square"/%3E%3C/svg%3E');
  }
  .f__footer .footerInfo > .f__inner {
    align-items: flex-start;
    gap: 0;
  }
  .f__footer .footerInfo > .f__inner .logo {
    margin-bottom: 24px;
  }
  .f__footer .footerInfo > .f__inner .infoArea p {
    font-size: 13px;
    font-weight: 400;
    line-height: 21px;
    letter-spacing: -0.039px;
  }
  .f__main {
    min-height: calc(100vh - 806px);
  }
  /* 서브페이지 */
  .f__sub {
    min-height: calc(100vh - 806px);
  }
  .f__sub .snbWrap {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
    padding-bottom: 12px;
    height: auto;
    max-width: calc(100% - 40px);
    margin: 0 20px 32px 20px;
    overflow: visible;
    position: relative;
  }
  .f__sub .snbWrap::after {
    display: block;
    content: "";
    position: absolute;
    width: 26px;
    height: 24px;
    right: 0;
    bottom: 12px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #FFF 100%);
  }
  .f__sub .snbWrap .snb {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  .f__sub .snbWrap .snb li {
    flex: 0 0 auto;
    min-width: fit-content;
  }
  .f__sub .snbWrap .snb::-webkit-scrollbar {
    height: 0;
  }
  .f__sub .snbWrap .snb::-webkit-scrollbar-thumb {
    display: none;
  }
  .cateTit {
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: -0.048px;
  }
  .moduleSection {
    row-gap: 32px;
    column-gap: 32px;
  }
  .sideSection {
    row-gap: 32px;
  }
  .headlineSection {
    padding-bottom: 19px;
  }
  .headlineSection .dateBox {
    height: auto;
  }
  .articleSection {
    margin-top: -48px;
  }
  .articleSection .article {
    row-gap: 30px;
    font-size: 18px;
    font-weight: 500;
    line-height: 28px;
    letter-spacing: -0.054px;
  }
  /*** 레이아웃 유닛 ***/
  .f__grid {
    gap: 24px;
  }
  .f__grid.line {
    gap: 24px;
  }
  .f__grid.line [class*=u__] + [class*=u__]::before {
    display: none;
  }
  [class*=m__] .f__grid {
    column-gap: 16px;
    row-gap: 24px;
  }
}