@font-face {
  font-family: "Uridaum";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2205@1.0/WooridaumL.woff2") format("woff2");
}
.blind {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

html,
body {
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  overflow-x: hidden;
}

.wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-align: center;
  font-size: 28px;
}

header {
  position: absolute;
  display: flex;
  align-items: center;
  height: 90px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  z-index: 1000;
  width: 100%;
}

/* */
header {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 100;
  overflow: visible;
}

header::before {
  content: "";
  position: absolute;
  top: 0px;
  height: 0px;
  background-color: white;
  width: 100%;
  z-index: -1;
}

.inner {
  position: relative;
  padding: 0 20px;
  box-sizing: border-box;
  max-width: 1632px;
  margin: 0 auto;
  width: 100%;
  height: 100%;
}

header > .inner {
  display: flex;
  justify-content: space-between;
  position: relative;
  width: 100%;
  height: 100%;
  padding: 8px 20px;
}

header .logo {
  width: 124px;
  padding: 5px 0 0;
}

/* */
header {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 100;
}

header::before {
  content: "";
  position: absolute;
  top: 0px;
  height: 0px;
  background-color: white;
  width: 100%;
  z-index: -1;
}

header > .inner {
  display: flex;
  justify-content: space-between;
  position: relative;
  width: 100%;
  padding: 0 20px;
}

header.index > .inner::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: calc(100%-100px);
  left: 50%;
  background-color: rgba(255, 255, 255, 0.2);
}

header .gnb-menu .depth01 {
  display: flex;
  text-align: center;
}

header::before {
  content: "";
  width: 100%;
  background-color: #fcfcfc;
  position: absolute;
  top: 0px;
  z-index: -2;
}

header.on::before {
  height: 100%;
  transition: 0s;
}

header::after {
  content: "";
  width: 100%;
  height: 0px;
  background-color: white;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  transition: 0s;
}

header.on::after {
  height: 100px;
  transition: 0s;
  border-bottom: 1px solid #ddd;
}

header.index.on .logo i {
  content: url("../img/logo.svg");
}

header .depth01 > li {
  width: 130px;
}

header.on .depth01 > li {
  position: relative;
  width: 200px;
  text-align: center;
  transition: width 0.5s;
  background-color: #fff;
}

header.on .logo {
  filter: invert(1);
}

header .depth01 > li > a {
  display: block;
  font-weight: 600;
  width: 100%;
  height: 100px;
  padding: 35px 0;
  position: relative;
  border: border-box;
}

header.on .depth01 > li > a::after {
  position: absolute;
  bottom: -2px;
  left: 0;
  content: "";
  width: 100%;
  height: 3px;
  background: linear-gradient(0.25turn, #5B9684, #275a4b, #172e27, #000000);
  z-index: 50;
  transform: scale(0);
  transition: 0.5s;
}

header.index.on .depth01 li.on {
  background-color: white;
  z-index: 1;
}

header .depth01 > li:hover > a::after {
  transform: scale(1);
}

header .depth01 > li > a {
  color: white;
  font-size: 18px;
  width: 100%;
  height: 100%;
}

header.index.on .depth01 > li > a {
  color: black;
}

header .depth01 > li:hover > a,
header.index .depth01 > li:hover > a {
  color: #5B9684;
}

header .depth02 {
  display: none;
  position: relative;
  text-align: center;
  padding: 20px 0;
  width: 100%;
  padding-top: 20px;
  z-index: 2000;
}

header .depth02 > li > a {
  display: inline-block;
  position: relative;
  padding: 10px 0px 10px 0px;
  font-size: 16px;
}

header .depth02 > li > a.more {
  position: relative;
  padding: 10px 18px 10px 0;
}

header .depth03 {
  display: none;
}

header .depth03 li {
  margin-bottom: 10px;
}

header .depth02 > li > a.more::after {
  content: url("../img/gnb-more-gray-ico.svg");
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

header .depth02 > li.active > a,
header .depth02 > li.on > a,
header .depth02 > li:hover > a {
  color: black;
  font-weight: 500;
}

header.index.on .sitemap-btn > a i,
header.index.active .sitemap-btn > a i,
header.index.on .search-header .search {
  filter: invert(0);
}

header .index > .inner::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: calc(100%-100px);
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(255, 255, 255, 0.2);
}

header.index.on .lang::after {
  content: url("../img/lang-more-ico.svg");
}

header .depth01 > li > a {
  height: 100px;
  font-size: 18px;
  width: 100%;
  box-sizing: border-box;
}

header li.on .sitemap-depth02 {
  position: relative;
  flex-direction: row;
  left: 0;
}

header .util-menu {
  display: flex;
  width: 210px;
  height: 44px;
  margin: 28px 0;
}

header .logo a img {
  position: relative;
  top: 26px;
  width: 122px;
  height: 29px;
}

header .lang-btn {
  width: 80px;
  margin-right: 30px;
}

header .depth01 > li > a {
  display: block;
  position: relative;
  width: 100%;
  height: 100px;
  padding: 35px 0;
  z-index: 3;
}

header .lang {
  font-size: 19px;
}

header .lang::after {
  top: 9px;
}

header.index.on .lang {
  color: black;
}

header.index.on .lang i {
  filter: invert(0);
}

header .search-header .search {
  filter: invert(0);
}

header .sitemap-list::before {
  display: none;
}

header .sitemap-list::after {
  display: none;
}

header .sitemap-list > li.on > a {
  background: none;
  position: relative;
}

/* */
section {
  padding: 136px 0 0 0;
}
@media screen and (max-width: 1440px) {
  section {
    padding: 80px 10px;
  }
}

.container {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  height: 100%;
}

.contents {
  flex: 1;
  position: relative;
  margin-top: 700px;
  width: 100%;
}
@media screen and (max-width: 1440px) {
  .contents {
    margin-top: 39vh;
  }
}

.left {
  text-align: left;
}

.fl {
  float: left;
}

footer {
  background-color: #f5f5f5;
  margin-top: 360px;
}

.sub-banner {
  padding: 0px;
  background-color: #5B9684;
}

.sub-banner .inner {
  padding: 0px;
}

footer .inner {
  padding-top: 67px;
}

footer .footer-inner {
  padding-top: 67px;
}

.footer-inner {
  position: relative;
  padding: 0 20px;
  box-sizing: border-box;
  max-width: 1632px;
  margin: 0 auto;
  width: 100%;
  height: 100%;
}

.sitemap-wrap {
  position: relative;
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 738px;
}
@media screen and (max-width: 1440px) {
  .sitemap-wrap {
    flex-direction: column;
  }
}

.sitemap-wrap h1 a img {
  width: 208px;
  height: 49px;
}

footer .inner h1 img {
  float: left;
  width: 208px;
  height: 49px;
}

.footer-sitemap {
  position: absolute;
  right: 0;
  display: flex;
  justify-content: flex-end;
  text-align: right;
  text-wrap: nowrap;
}
@media screen and (max-width: 1440px) {
  .footer-sitemap {
    position: relative;
    text-align: left;
    gap: 45px;
  }
}

.menu-list {
  display: flex;
  flex-direction: column;
  margin-top: 35px;
  gap: 35px;
}
.footer-sitemap li .menu {
  font-weight: 800;
}

.footer-sitemap li {
  margin-left: 59px;
}
@media screen and (max-width: 1440px) {
  .footer-sitemap li {
    margin-left: 0;
  }
}

#footer {
  position: relative;
  bottom: 0;
  width: 100%;
  background-color: #000;
  color: #fff;
}

.footer-inner-wrap .inner {
  display: flex;
  text-align: left;
  padding-top: 39px;
  padding-bottom: 39px;
}

.footer-inner-wrap .inner span {
  width: calc(100% - 10%);
}

.mT0 {
  margin-top: 0px !important;
}

.mT1 {
  margin-top: 1px !important;
}

.mT2 {
  margin-top: 2px !important;
}

.mT3 {
  margin-top: 3px !important;
}

.mT4 {
  margin-top: 4px !important;
}

.mT5 {
  margin-top: 5px !important;
}

.mT6 {
  margin-top: 6px !important;
}

.mT7 {
  margin-top: 7px !important;
}

.mT8 {
  margin-top: 8px !important;
}

.mT9 {
  margin-top: 9px !important;
}

.mT10 {
  margin-top: 10px !important;
}

.mT11 {
  margin-top: 11px !important;
}

.mT12 {
  margin-top: 12px !important;
}

.mT13 {
  margin-top: 13px !important;
}

.mT14 {
  margin-top: 14px !important;
}

.mT15 {
  margin-top: 15px !important;
}

.mT16 {
  margin-top: 16px !important;
}

.mT17 {
  margin-top: 17px !important;
}

.mT18 {
  margin-top: 18px !important;
}

.mT19 {
  margin-top: 19px !important;
}

.mT20 {
  margin-top: 20px !important;
}

.mT21 {
  margin-top: 21px !important;
}

.mT22 {
  margin-top: 22px !important;
}

.mT23 {
  margin-top: 23px !important;
}

.mT24 {
  margin-top: 24px !important;
}

.mT25 {
  margin-top: 25px !important;
}

.mT26 {
  margin-top: 26px !important;
}

.mT27 {
  margin-top: 27px !important;
}

.mT28 {
  margin-top: 28px !important;
}

.mT29 {
  margin-top: 29px !important;
}

.mT30 {
  margin-top: 30px !important;
}

.mT35 {
  margin-top: 35px !important;
}

.mT40 {
  margin-top: 40px !important;
}

.mT45 {
  margin-top: 45px !important;
}

.mT50 {
  margin-top: 50px !important;
}

.mT70 {
  margin-top: 70px !important;
}

.mR0 {
  margin-right: 0px !important;
}

.mR1 {
  margin-right: 1px !important;
}

.mR2 {
  margin-right: 2px !important;
}

.mR3 {
  margin-right: 3px !important;
}

.mR4 {
  margin-right: 4px !important;
}

.mR5 {
  margin-right: 5px !important;
}

.mR6 {
  margin-right: 6px !important;
}

.mR7 {
  margin-right: 7px !important;
}

.mR8 {
  margin-right: 8px !important;
}

.mR9 {
  margin-right: 9px !important;
}

.mR10 {
  margin-right: 10px !important;
}

.mR11 {
  margin-right: 11px !important;
}

.mR12 {
  margin-right: 12px !important;
}

.mR13 {
  margin-right: 13px !important;
}

.mR14 {
  margin-right: 14px !important;
}

.mR15 {
  margin-right: 15px !important;
}

.mR16 {
  margin-right: 16px !important;
}

.mR17 {
  margin-right: 17px !important;
}

.mR18 {
  margin-right: 18px !important;
}

.mR19 {
  margin-right: 19px !important;
}

.mR20 {
  margin-right: 20px !important;
}

.mR21 {
  margin-right: 21px !important;
}

.mR22 {
  margin-right: 22px !important;
}

.mR23 {
  margin-right: 23px !important;
}

.mR24 {
  margin-right: 24px !important;
}

.mR25 {
  margin-right: 25px !important;
}

.mR26 {
  margin-right: 26px !important;
}

.mR27 {
  margin-right: 27px !important;
}

.mR28 {
  margin-right: 28px !important;
}

.mR29 {
  margin-right: 29px !important;
}

.mR30 {
  margin-right: 30px !important;
}

.mR35 {
  margin-right: 35px !important;
}

.mR40 {
  margin-right: 40px !important;
}

.mR45 {
  margin-right: 45px !important;
}

.mR50 {
  margin-right: 50px !important;
}

.mB0 {
  margin-bottom: 0px !important;
}

.mB1 {
  margin-bottom: 1px !important;
}

.mB2 {
  margin-bottom: 2px !important;
}

.mB3 {
  margin-bottom: 3px !important;
}

.mB4 {
  margin-bottom: 4px !important;
}

.mB5 {
  margin-bottom: 5px !important;
}

.mB6 {
  margin-bottom: 6px !important;
}

.mB7 {
  margin-bottom: 7px !important;
}

.mB8 {
  margin-bottom: 8px !important;
}

.mB9 {
  margin-bottom: 9px !important;
}

.mB10 {
  margin-bottom: 10px !important;
}

.mB11 {
  margin-bottom: 11px !important;
}

.mB12 {
  margin-bottom: 12px !important;
}

.mB13 {
  margin-bottom: 13px !important;
}

.mB14 {
  margin-bottom: 14px !important;
}

.mB15 {
  margin-bottom: 15px !important;
}

.mB16 {
  margin-bottom: 16px !important;
}

.mB17 {
  margin-bottom: 17px !important;
}

.mB18 {
  margin-bottom: 18px !important;
}

.mB19 {
  margin-bottom: 19px !important;
}

.mB20 {
  margin-bottom: 20px !important;
}

.mB21 {
  margin-bottom: 21px !important;
}

.mB22 {
  margin-bottom: 22px !important;
}

.mB23 {
  margin-bottom: 23px !important;
}

.mB24 {
  margin-bottom: 24px !important;
}

.mB25 {
  margin-bottom: 25px !important;
}

.mB26 {
  margin-bottom: 26px !important;
}

.mB27 {
  margin-bottom: 27px !important;
}

.mB28 {
  margin-bottom: 28px !important;
}

.mB29 {
  margin-bottom: 29px !important;
}

.mB30 {
  margin-bottom: 30px !important;
}

.mB35 {
  margin-bottom: 35px !important;
}

.mB40 {
  margin-bottom: 40px !important;
}

.mB45 {
  margin-bottom: 45px !important;
}

.mB50 {
  margin-bottom: 50px !important;
}

.mB70 {
  margin-bottom: 70px !important;
}

.mL0 {
  margin-left: 0px !important;
}

.mL1 {
  margin-left: 1px !important;
}

.mL2 {
  margin-left: 2px !important;
}

.mL3 {
  margin-left: 3px !important;
}

.mL4 {
  margin-left: 4px !important;
}

.mL5 {
  margin-left: 5px !important;
}

.mL6 {
  margin-left: 6px !important;
}

.mL7 {
  margin-left: 7px !important;
}

.mL8 {
  margin-left: 8px !important;
}

.mL9 {
  margin-left: 9px !important;
}

.mL10 {
  margin-left: 10px !important;
}

.mL11 {
  margin-left: 11px !important;
}

.mL12 {
  margin-left: 12px !important;
}

.mL13 {
  margin-left: 13px !important;
}

.mL14 {
  margin-left: 14px !important;
}

.mL15 {
  margin-left: 15px !important;
}

.mL16 {
  margin-left: 16px !important;
}

.mL17 {
  margin-left: 17px !important;
}

.mL18 {
  margin-left: 18px !important;
}

.mL19 {
  margin-left: 19px !important;
}

.mL20 {
  margin-left: 20px !important;
}

.mL21 {
  margin-left: 21px !important;
}

.mL22 {
  margin-left: 22px !important;
}

.mL23 {
  margin-left: 23px !important;
}

.mL24 {
  margin-left: 24px !important;
}

.mL25 {
  margin-left: 25px !important;
}

.mL26 {
  margin-left: 26px !important;
}

.mL27 {
  margin-left: 27px !important;
}

.mL28 {
  margin-left: 28px !important;
}

.mL29 {
  margin-left: 29px !important;
}

.mL30 {
  margin-left: 30px !important;
}

.mL35 {
  margin-left: 35px !important;
}

.mL40 {
  margin-left: 40px !important;
}

.mL45 {
  margin-left: 45px !important;
}

.mL50 {
  margin-left: 50px !important;
}

.pT0 {
  padding-top: 0px !important;
}

.pT1 {
  padding-top: 1px !important;
}

.pT2 {
  padding-top: 2px !important;
}

.pT3 {
  padding-top: 3px !important;
}

.pT4 {
  padding-top: 4px !important;
}

.pT5 {
  padding-top: 5px !important;
}

.pT6 {
  padding-top: 6px !important;
}

.pT7 {
  padding-top: 7px !important;
}

.pT8 {
  padding-top: 8px !important;
}

.pT9 {
  padding-top: 9px !important;
}

.pT10 {
  padding-top: 10px !important;
}

.pT11 {
  padding-top: 11px !important;
}

.pT12 {
  padding-top: 12px !important;
}

.pT13 {
  padding-top: 13px !important;
}

.pT14 {
  padding-top: 14px !important;
}

.pT15 {
  padding-top: 15px !important;
}

.pT16 {
  padding-top: 16px !important;
}

.pT17 {
  padding-top: 17px !important;
}

.pT18 {
  padding-top: 18px !important;
}

.pT19 {
  padding-top: 19px !important;
}

.pT20 {
  padding-top: 20px !important;
}

.pT21 {
  padding-top: 21px !important;
}

.pT22 {
  padding-top: 22px !important;
}

.pT23 {
  padding-top: 23px !important;
}

.pT24 {
  padding-top: 24px !important;
}

.pT25 {
  padding-top: 25px !important;
}

.pT26 {
  padding-top: 26px !important;
}

.pT27 {
  padding-top: 27px !important;
}

.pT28 {
  padding-top: 28px !important;
}

.pT29 {
  padding-top: 29px !important;
}

.pT30 {
  padding-top: 30px !important;
}

.pT35 {
  padding-top: 35px !important;
}

.pT40 {
  padding-top: 40px !important;
}

.pT45 {
  padding-top: 45px !important;
}

.pT50 {
  padding-top: 50px !important;
}

.pR0 {
  padding-right: 0px !important;
}

.pR1 {
  padding-right: 1px !important;
}

.pR2 {
  padding-right: 2px !important;
}

.pR3 {
  padding-right: 3px !important;
}

.pR4 {
  padding-right: 4px !important;
}

.pR5 {
  padding-right: 5px !important;
}

.pR6 {
  padding-right: 6px !important;
}

.pR7 {
  padding-right: 7px !important;
}

.pR8 {
  padding-right: 8px !important;
}

.pR9 {
  padding-right: 9px !important;
}

.pR10 {
  padding-right: 10px !important;
}

.pR11 {
  padding-right: 11px !important;
}

.pR12 {
  padding-right: 12px !important;
}

.pR13 {
  padding-right: 13px !important;
}

.pR14 {
  padding-right: 14px !important;
}

.pR15 {
  padding-right: 15px !important;
}

.pR16 {
  padding-right: 16px !important;
}

.pR17 {
  padding-right: 17px !important;
}

.pR18 {
  padding-right: 18px !important;
}

.pR19 {
  padding-right: 19px !important;
}

.pR20 {
  padding-right: 20px !important;
}

.pR21 {
  padding-right: 21px !important;
}

.pR22 {
  padding-right: 22px !important;
}

.pR23 {
  padding-right: 23px !important;
}

.pR24 {
  padding-right: 24px !important;
}

.pR25 {
  padding-right: 25px !important;
}

.pR26 {
  padding-right: 26px !important;
}

.pR27 {
  padding-right: 27px !important;
}

.pR28 {
  padding-right: 28px !important;
}

.pR29 {
  padding-right: 29px !important;
}

.pR30 {
  padding-right: 30px !important;
}

.pR35 {
  padding-right: 35px !important;
}

.pR40 {
  padding-right: 40px !important;
}

.pR45 {
  padding-right: 45px !important;
}

.pR50 {
  padding-right: 50px !important;
}

.pB0 {
  padding-bottom: 0px !important;
}

.pB1 {
  padding-bottom: 1px !important;
}

.pB2 {
  padding-bottom: 2px !important;
}

.pB3 {
  padding-bottom: 3px !important;
}

.pB4 {
  padding-bottom: 4px !important;
}

.pB5 {
  padding-bottom: 5px !important;
}

.pB6 {
  padding-bottom: 6px !important;
}

.pB7 {
  padding-bottom: 7px !important;
}

.pB8 {
  padding-bottom: 8px !important;
}

.pB9 {
  padding-bottom: 9px !important;
}

.pB10 {
  padding-bottom: 10px !important;
}

.pB11 {
  padding-bottom: 11px !important;
}

.pB12 {
  padding-bottom: 12px !important;
}

.pB13 {
  padding-bottom: 13px !important;
}

.pB14 {
  padding-bottom: 14px !important;
}

.pB15 {
  padding-bottom: 15px !important;
}

.pB16 {
  padding-bottom: 16px !important;
}

.pB17 {
  padding-bottom: 17px !important;
}

.pB18 {
  padding-bottom: 18px !important;
}

.pB19 {
  padding-bottom: 19px !important;
}

.pB20 {
  padding-bottom: 20px !important;
}

.pB21 {
  padding-bottom: 21px !important;
}

.pB22 {
  padding-bottom: 22px !important;
}

.pB23 {
  padding-bottom: 23px !important;
}

.pB24 {
  padding-bottom: 24px !important;
}

.pB25 {
  padding-bottom: 25px !important;
}

.pB26 {
  padding-bottom: 26px !important;
}

.pB27 {
  padding-bottom: 27px !important;
}

.pB28 {
  padding-bottom: 28px !important;
}

.pB29 {
  padding-bottom: 29px !important;
}

.pB30 {
  padding-bottom: 30px !important;
}

.pB35 {
  padding-bottom: 35px !important;
}

.pB40 {
  padding-bottom: 40px !important;
}

.pB45 {
  padding-bottom: 45px !important;
}

.pB50 {
  padding-bottom: 50px !important;
}

.pB136 {
  padding-bottom: 136px !important;
}

.pL0 {
  padding-left: 0px !important;
}

.pL1 {
  padding-left: 1px !important;
}

.pL2 {
  padding-left: 2px !important;
}

.pL3 {
  padding-left: 3px !important;
}

.pL4 {
  padding-left: 4px !important;
}

.pL5 {
  padding-left: 5px !important;
}

.pL6 {
  padding-left: 6px !important;
}

.pL7 {
  padding-left: 7px !important;
}

.pL8 {
  padding-left: 8px !important;
}

.pL9 {
  padding-left: 9px !important;
}

.pL10 {
  padding-left: 10px !important;
}

.pL11 {
  padding-left: 11px !important;
}

.pL12 {
  padding-left: 12px !important;
}

.pL13 {
  padding-left: 13px !important;
}

.pL14 {
  padding-left: 14px !important;
}

.pL15 {
  padding-left: 15px !important;
}

.pL16 {
  padding-left: 16px !important;
}

.pL17 {
  padding-left: 17px !important;
}

.pL18 {
  padding-left: 18px !important;
}

.pL19 {
  padding-left: 19px !important;
}

.pL20 {
  padding-left: 20px !important;
}

.pL21 {
  padding-left: 21px !important;
}

.pL22 {
  padding-left: 22px !important;
}

.pL23 {
  padding-left: 23px !important;
}

.pL24 {
  padding-left: 24px !important;
}

.pL25 {
  padding-left: 25px !important;
}

.pL26 {
  padding-left: 26px !important;
}

.pL27 {
  padding-left: 27px !important;
}

.pL28 {
  padding-left: 28px !important;
}

.pL29 {
  padding-left: 29px !important;
}

.pL30 {
  padding-left: 30px !important;
}

.pL35 {
  padding-left: 35px !important;
}

.pL40 {
  padding-left: 40px !important;
}

.pL45 {
  padding-left: 45px !important;
}

.pL50 {
  padding-left: 50px !important;
}

.txt-style-16 {
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.title-tit {
  font-family: "Uridaum", sans-serif;
  font-weight: 500;
  font-size: 48px;
  line-height: 120%;
  letter-spacing: -4px;
  margin-top: 20px;
  margin-bottom: 20px;
}
@media screen and (max-width: 1440px) {
  .title-tit {
    text-align: center;
  }
}

.title-sub {
  font-family: "Uridaum", sans-serif;
  font-size: 20px;
  line-height: 160%;
}

.container-tit {
  font-size: 56px;
  font-weight: 700;
  line-height: 130%;
  letter-spacing: -2px;
}

.container-txt {
  font-size: 24px;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: -1px;
}

.sec-tit {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -1.08px;
  line-height: 160%;
}

.sec-txt {
  font-size: 20px;
  font-weight: 600;
  line-height: 160%;
}

.sec-desc {
  font-size: 40px;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: -2px;
}

.caption {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 6px;
  text-transform: uppercase;
}

.time {
  color: #777676;
  font-size: 20px;
  font-weight: 400;
  line-height: 138%;
  letter-spacing: -1px;
  margin-top: 16px;
}

.main-blog-tit {
  font-size: 24px;
  font-weight: 500;
  line-height: 160%;
}

footer {
  font-size: 16px;
  font-weight: 500;
}

.footer-txt {
  font-size: 16px;
  font-weight: 300;
  line-height: 200%;
}

.btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 18px;
  font-weight: 600;
  line-height: 20px;
  padding: 15.5px 19.5px;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  max-width: 193px;
  max-height: 51px;
  margin-top: 44px;
  text-wrap: nowrap;
}

.btn.btn-fill {
  color: white;
  background-color: #000;
}

.btn.btn-border {
  display: flex;
  width: 162px;
  height: 51px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border: 1.5px solid #000;
  padding: 0 0;
}

.btn img {
  width: 30px;
}

.btn-group {
  display: flex;
  gap: 44px;
}

.cbp_tmtimeline {
  margin: 100px 200px 0 0;
  padding: 0;
  list-style: none;
  position: relative;
}
@media screen and (max-width: 1440px) {
  .cbp_tmtimeline {
    margin: 100px 0 0 0;
  }
}

@media screen and (max-width: 1440px) {
  .cbp_tmtimeline > li .cbp_tmlabel {
    margin: 200px 0 0 0;
  }
}

@media screen and (max-width: 1440px) {
  .cbp_tmtimeline > li .cbp_tmicon {
    display: none;
  }
}

/* The line */
.cbp_tmtimeline:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 10px;
  background: #5B9684;
  left: 20%;
  margin-left: -10px;
}
@media screen and (max-width: 1440px) {
  .cbp_tmtimeline:before {
    display: none;
  }
}

/* The date/time */
.cbp_tmtimeline > li {
  position: relative;
}

.cbp_tmtimeline > li .cbp_tmtime {
  display: block;
  width: 25%;
  padding-right: 100px;
  position: absolute;
}

.cbp_tmtimeline > li .cbp_tmtime span {
  display: block;
  text-align: right;
}

/* Right content */
.cbp_tmtimeline > li .cbp_tmlabel {
  margin: 0 0 15px 25%;
  background: rgba(142, 189, 163, 0.5);
  color: #000;
  padding: 2em;
  font-size: 1.2em;
  font-weight: 300;
  line-height: 1.4;
  position: relative;
  border-radius: 5px;
}
@media screen and (max-width: 1440px) {
  .cbp_tmtimeline > li .cbp_tmlabel {
    margin: 0 0 15px 0;
  }
}

.cbp_tmlabel {
  text-align: left;
}

.cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel {
  border: #07402F;
}

.cbp_tmtimeline > li .cbp_tmlabel h2 {
  margin-top: 0px;
  padding: 0 0 10px 0;
}

/* The triangle */
.cbp_tmtimeline > li .cbp_tmlabel:after {
  right: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-right-color: rgba(142, 189, 163, 0.5);
  border-width: 10px;
  top: 10px;
}

.cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel:after {
  border-right-color: rgba(142, 189, 163, 0.5);
}

/* The icons */
.cbp_tmtimeline > li .cbp_tmicon {
  width: 40px;
  height: 40px;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  font-size: 1.4em;
  line-height: 40px;
  -webkit-font-smoothing: antialiased;
  position: absolute;
  color: #fff;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 8px #5B9684;
  text-align: center;
  left: 20%;
  top: 0;
  margin: 0 0 0 -25px;
}

/* Example Media Queries */
@media screen and (max-width: 65.375em) {
  .cbp_tmtimeline > li .cbp_tmtime span:last-child {
    font-size: 1.5em;
  }
}
@media screen and (max-width: 47.2em) {
  .cbp_tmtimeline:before {
    display: none;
  }
  .cbp_tmtimeline > li .cbp_tmtime {
    width: 100%;
    position: relative;
    padding: 0 0 20px 0;
  }
  .cbp_tmtimeline > li .cbp_tmtime span {
    text-align: left;
  }
  .cbp_tmtimeline > li .cbp_tmlabel {
    margin: 0 0 30px 0;
    padding: 1em;
    font-weight: 400;
    font-size: 95%;
  }
  .cbp_tmtimeline > li .cbp_tmlabel:after {
    right: auto;
    left: 20px;
    border-right-color: transparent;
    border-bottom-color: #5B9684;
    top: -20px;
  }
  .cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel:after {
    border-right-color: transparent;
    border-bottom-color: #5B9684;
  }
  .cbp_tmtimeline > li .cbp_tmicon {
    position: relative;
    float: right;
    left: auto;
    margin: -55px 5px 0 0px;
  }
}
.tab-content-area div {
  display: none;
}

.tab-content-area div.on {
  display: block;
}

.main-visual {
  position: relative;
  z-index: 1;
  height: 100%;
}

#main-visual {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-height: 1080px;
}
@media screen and (max-width: 1440px) {
  #main-visual {
    max-height: 100vh;
  }
}

.dimmed {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  z-index: 1;
  background: rgba(0, 0, 0, 0.74);
  max-height: 1080px;
}
@media screen and (max-width: 1440px) {
  .dimmed {
    max-height: 100vh;
  }
}

.main-visual-txt {
  position: relative;
  color: #fff;
  z-index: 1000;
  text-align: left;
  top: 400px;
}
@media screen and (max-width: 1440px) {
  .main-visual-txt {
    padding: 0 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    top: 50vh;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

@media screen and (max-width: 1440px) {
  .about-us-txt.section1 {
    margin-top: 100px;
  }
}

.main-visual-txt .logo {
  width: 544px;
  height: 127px;
}

.main-introduce {
  margin-bottom: 100px;
  width: 100%;
}

.main-introduce .about-us-txt .line {
  position: relative;
}

.main-introduce .about-us-txt .line::before {
  position: absolute;
  content: "";
  height: 1px;
  width: 72px;
  top: 20px;
  left: 0;
  background: #000;
  z-index: 999;
}
@media screen and (max-width: 1440px) {
  .main-introduce .about-us-txt .line::before {
    display: none;
  }
}

.main-introduce .about-us-txt .caption {
  margin-left: 96px;
}
@media screen and (max-width: 1440px) {
  .main-introduce .about-us-txt .caption {
    margin-left: 0px;
  }
}

.main-introduce .inner ul {
  display: flex;
  flex-direction: column;
  gap: 61px;
}

.main-introduce .inner ul li {
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 1440px) {
  .main-introduce .inner ul li {
    flex-direction: column;
    gap: 40px;
  }
}

.main-introduce .inner ul li:last-child {
  flex-direction: row-reverse;
}
@media screen and (max-width: 1440px) {
  .main-introduce .inner ul li:last-child {
    flex-direction: column;
  }
}

.main-introduce .inner ul li:last-child .about-us-txt {
  text-align: right;
}
@media screen and (max-width: 1440px) {
  .main-introduce .inner ul li:last-child .about-us-txt {
    text-align: left;
  }
}

.more {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 28.5px;
  margin-bottom: 56px;
  font-weight: 700;
  font-size: 18px;
}
@media screen and (max-width: 1440px) {
  .more {
    justify-content: flex-start;
  }
}

.more img {
  width: 30px;
  height: 30px;
}

.about-us-txt {
  max-width: 546px;
  text-align: left;
}
@media screen and (max-width: 1440px) {
  .about-us-txt {
    max-width: 100%;
  }
}

.main-introduce .inner ul li .introduce-img {
  width: 940px;
  height: 567px;
}
@media screen and (max-width: 1440px) {
  .main-introduce .inner ul li .introduce-img {
    width: 100%;
    height: auto;
  }
}

.partners-list {
  display: flex;
  align-items: center;
  gap: 97.6px;
  margin: auto 40px;
}

.partners-wrap {
  width: auto;
}

.partners-inner {
  position: absolute;
  left: -300%;
  display: flex;
  width: auto;
  height: 100%;
  animation: rolling 50s linear infinite;
}

.main-blog,
.main-news {
  margin-top: 100px;
}

.main-banner .inner {
  overflow-x: hidden;
}

.main-banner .inner img {
  width: 100%;
  object-fit: contain;
  margin-top: 400px;
}

.img-box-wrap {
  display: flex;
  flex-direction: row;
  width: 100%;
  gap: 35px;
}
@media screen and (max-width: 1440px) {
  .img-box-wrap {
    flex-direction: column;
    width: 100%;
  }
}

@media screen and (max-width: 1440px) {
  .img-box-wrap .img-box-list .img-box {
    max-width: 100%;
  }
}

.img-box-wrap .img-box-list .tit-box {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  text-align: left;
}
@media screen and (max-width: 1440px) {
  .img-box-wrap .img-box-list .tit-box {
    max-width: 100%;
  }
}

.img-box-wrap .img-box-list .img-box img {
  width: 100%;
  height: 100%;
}

.img-box-wrap .img-box-list {
  flex: 1;
}

.main-news .inner {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
}
@media screen and (max-width: 1440px) {
  .main-news .inner {
    flex-direction: column;
  }
}

@media screen and (max-width: 1440px) {
  .main-news .inner .left {
    width: 100%;
    display: block;
  }
}

.main-news .inner .list-sect {
  width: calc(100% - 70px);
  max-width: 1140px;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
}
@media screen and (max-width: 1440px) {
  .main-news .inner .list-sect {
    width: 100% !important;
  }
}

.main-news .inner .list-sect li a {
  display: flex;
  padding: 15px 0px;
  gap: 28px;
  align-items: flex-start;
  border-bottom: 1px solid #D8D8D8;
  width: 100%;
}

.main-news .inner .list-sect li:last-child a {
  border-bottom: none;
}

.main-news .inner .list-sect li .wrap .date .num {
  font-size: 40px;
  font-weight: 700;
}

.main-news .inner .list-sect li .wrap .date .num-det {
  font-size: 20px;
  font-weight: 700;
}

.main-news .inner .list-sect li .text-sect {
  font-size: 32px;
  font-weight: 700;
  line-height: 150%;
  text-align: left;
}

.main-news .inner .list-sect li .text-sect .txt {
  font-size: 20px;
  font-weight: 500;
  line-height: 180%;
}

#visual-deargreen {
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
  width: 100%;
  height: 1080px;
}
@media screen and (max-width: 1440px) {
  #visual-deargreen {
    height: 100vh;
  }
}

.deargreen-visual {
  max-height: 1080px;
  overflow: hidden;
}

.deargreen-visual-txt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  margin-top: 380px;
}
@media screen and (max-width: 1440px) {
  .deargreen-visual-txt {
    margin-top: 50%;
    margin-bottom: 50%;
  }
}

.deargreen-visual-txt .logo {
  position: relative;
  width: 544px;
  height: 127px;
}
@media screen and (max-width: 1440px) {
  .deargreen-visual-txt .logo {
    width: 250px;
    height: auto;
  }
}

.contents-sub {
  padding-top: 65vh;
}
@media screen and (max-width: 1440px) {
  .contents-sub {
    position: relative;
    top: 0;
  }
}

.intro {
  background-image: url("../img/sub/section_bg.png");
  background-position: center center;
  background-size: cover;
  width: 100%;
  height: 600px;
}

.history {
  width: 100%;
  padding-top: 260px;
}
@media screen and (max-width: 1440px) {
  .history {
    padding-top: 130px;
    margin-bottom: 100px;
  }
}

.solution .inner ul {
  display: flex;
  flex-direction: column;
  gap: 50px;
}

.direction .inner {
  padding-top: 300px;
}

/* dearGreen-history */
.project img {
  margin-top: 63px;
  width: 100%;
}

#divide {
  height: 535px;
  overflow: hidden;
}

#divide .deargreen-visual-txt {
  margin-top: 200px;
}

#divide #visual-deargreen {
  height: 535px;
}

#divide .contents-sub {
  margin-top: 100px;
}

/* dearGreen-map */
.visit-frame {
  display: flex;
  gap: 86px;
}
@media screen and (max-width: 1440px) {
  .visit-frame {
    flex-direction: column;
    gap: 0;
  }
}

.visit-frame .visit-left {
  flex: 1;
}

.visit-frame .visit-right {
  flex: 1;
}

.visit-frame .item {
  display: flex;
  gap: 32px;
  border-bottom: 1px solid gray;
  padding: 23px 0;
}

.visit-frame .icon img {
  width: 50px;
  height: 50px;
  margin: 7px;
}

.map .inner .left img {
  width: 100%;
  margin-bottom: 84px;
}

/* consulting-business */
.consulting .inner img {
  width: 900px;
}

.tab-content-area img {
  width: 100%;
  height: auto;
}

.feature_grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.feature_grid h3 {
  font-size: 26px;
  margin-bottom: 10px;
  text-align: left;
}

.feature_card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: #eff0f2;
  border-radius: 24px;
  overflow: hidden;
}

.feature_card img {
  height: 300px;
}

.feature_card .img_card {
  flex: 1 1 60%;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

.feature_card .wrap_title {
  padding: 40px;
  text-align: left;
}

.feature_card .wrap_title p {
  font-size: 18px;
  color: #686868;
}

.feature_card.wide {
  grid-column: 1/-1;
  flex-direction: row;
}

.feature_card.wide .wrap_title {
  flex: 1 1 40%;
  display: flex;
  flex-direction: column;
}

.function .area_review_center {
  padding: 100px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #E8F5FF;
}

.function .area_review_center .title_center {
  margin: 0;
  text-align: center;
  max-width: 1200px;
  width: 100%;
}

.function .area_review_center .title_center h3 {
  margin-bottom: 12px;
}

.function .area_review_center .title_center p {
  font-size: 24px;
  color: #666;
  margin-bottom: 40px;
}

.function .area_review_center .title_center img {
  margin: 0 auto;
  max-height: 24px;
}

.tab_content .tablink .box_thumb img {
  text-align: center;
  align-items: center;
  border-radius: 32px;
  border: 1px solid #EEEEEE;
  overflow: hidden;
}

.btn-area {
  display: flex;
  gap: 14px;
}

.btn-area a {
  flex: 1;
  border-radius: 8px;
  background: #FFF;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px;
  gap: 11px;
  height: 100%;
  width: 100%;
}

.btn-area a.on {
  color: #5B9684;
  border: 2px solid #226550;
  background: #F6FBFA;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  text-wrap: nowrap;
}

.btn-area a img {
  width: 30px;
  height: 30px;
}

.area {
  width: 100%;
  height: 100%;
  background: rgba(249, 249, 249, 0.59);
}

.sub-banner .inner img {
  width: 100%;
  height: auto;
}

/*# sourceMappingURL=style.css.map */