@charset "utf-8";

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 {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: never;
  font-family: "Montserrat", "Pretendard Variable", sans-serif;
}


/**common*/
html {
  scroll-behavior: smooth; /*부드러운 스크롤 효과*/
  font-size: 10px;
}

.absCenter {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.bt_dark {
  display: flex;
  height: 50px;
  padding: 0px 20px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 4px;
  background: #040404;
  color: var(--White, #FFF);
  font-size: 16px;
  font-weight: 600;
}

.content {
  position: relative;
}

.work_label {
  position: fixed;
  top: 729px;
  left: 100px;
}

.work_label_fixed {
  top: 220px;
}

@media screen and (max-width: 1900px) {
  .work_label {display: none;}
}

/**메인페이지*/
#slider {
  width: 100%;
  /* height: 100vh; */
  overflow: hidden;
}

#slider .inner{
  height: 0;
  position: relative;
  padding-bottom: 56.25%;
  left: 0%;
  top: 0%;
    /* transform: translate(-50%, -50%); */
}

#slider iframe {
  width: 100%;
  height: 100%;
  position: absolute;

}

#slider::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.main-title {
  text-align: center;
  margin-bottom: 5rem;
}

.main-title h2 {
  font-size: 2.9rem;
  font-weight: 600;
  color: #202020;
  letter-spacing: -1px;
  margin-bottom: 0.5rem;
}

.main-title p {
  font-size: 1.7rem;
  font-weight: 400;
  color: #838383;
  letter-spacing: -0.2px;
}

.boxy-warp {
  max-width: 1400px;
  margin: auto;
  padding: 100px 0;
  width: 100%;
}

/** 메인 최신글 영역 **/
.main-least {
  background-color: #0F0C2D;
}

.main-least .container {
  max-width: 1480px;
  margin: auto;
}

.main-least .main_tl {
  color: var(--White, #FFF);
  font-size: 38px;
  font-weight: 300;
  line-height: 49px;
}

.main-least .main_tl_small {
  color: var(--White, #FFF);
  font-size: 18px;
  font-weight: 500;
}

.main-least .main_bt {
  display: flex;
  padding: 8px 18px;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  border-radius: 30px;
  font-size: 16px;
}

.main-least .service .main_bt{
  background: var(--White, #FFF);
  color: #000;
}

.main-least .service .main_bt span::after {
  content: url("../img/bt_add.svg");
  vertical-align: middle;
}

.main-least .main_tl {
  font-weight: 100;
}

.main-least .main_tl b {
  font-weight: 600;
}

.main-least .service {
  background-color: #0F0C2D;;
  padding: 120px 0;
}

.main-least .service .container {
  display: flex;
  align-items: flex-start;
  gap: 5rem;
  flex-direction: column;
}

.main-least .title {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  align-self: stretch;
  width: 100%;
}

.main-least .title .text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.main-least .service .list {
  display: flex;
  align-items: flex-start;
  gap: 50px;
  align-self: stretch;
  flex-wrap: wrap
}

.main-least .service .list .item {
    height: 550px;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    padding: 0px 30px 50px;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    flex: 1 0 0;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
}

.main-least .service .list .item .text {
  position: relative;
  z-index: 9;
}

.main-least .service .list .item::after {
  content: "";
  position: absolute;
  display: block;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 34.24%, #000 91.23%);
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.main-least .service .list .service-1 {background-image: url(../img/service_1.jpg);}
.main-least .service .list .service-2 {background-image: url(../img/service_2.jpg);}
.main-least .service .list .service-3 {background-image: url(../img/service_3.jpg);}
.main-least .service .list .service-4 {background-image: url(../img/service_4.jpg);}

.main-least .service .list .item p {
  color: #fff;
}

.main-least .service .list .item p:nth-child(1) {
    font-size: 20px;
    font-weight: 100;
    margin-bottom: 6px;
    letter-spacing: -1px;
}

.main-least .service .list .item p:nth-child(2) {
  font-size: 27px;
  font-weight: 600;
  margin-bottom: 23px;
}

.main-least .service .list .item p:nth-child(3) {
  color: #818181;
  font-size: 13px;
  font-style: italic;
  font-weight: 300;
}

.main-least .service .list .item .bt_wrap {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  align-self: stretch;
  position: relative;
  z-index: 9;
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.3s ease-out;
  height: 0;
}

.main-least .service .list .item:hover .bt_wrap {
  transition: all 0.3s ease-out;
  opacity: 1;
  transform: scale(1);
  margin-top: 30px;
  height: auto;
}

.main-least .service .list .item .bt_wrap a {
  display: flex;
  height: 40px;
  padding: 0px 14px;
  align-items: center;
  gap: 10px;
  flex: 1 0 0;
  border: 1px solid #585858;

  color: var(--White, #FFF);
  font-size: 15px;
  letter-spacing: -0.48px;
  justify-content: space-between;
}

.main-least .service .list .item .bt_wrap a i {
  width: 15px;
  height: 15px;
  background-image: url(../img/bt_service.svg);
  background-repeat: no-repeat;
  background-size: cover;
}

.main-least .work {
  background-color: #fff;
  padding-top: 150px;
}

.main-least .work .title {
  padding-bottom: 80px;
}

.main-least .work .text p, .main-least .work .text h3 {
  color: #000;
  letter-spacing: -1px;
}

.main-least .work .main_bt {
  background: #0F0C2D;
  color: #fff;
}

.main-least .work .main_bt span::after {
  content: url("../img/bt_add.svg");
  vertical-align: middle;
  filter: contrast(0.001);
}

.main-least .work .main_bt span {
  display: flex;
  align-items: center;
  gap: 8px;
}

.main-least .contact {
  display: flex;
  padding: 120px 100px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 40px;
  align-self: stretch;
  background-image: url(../img/contact_bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

.main-least .contact .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    max-width: 100%;
    width: 100%;
}

.main-least .contact .title {
  justify-content: center;
}

.main-least .contact .text {
  display: flex;
  align-items: center;
}

.main-least .contact .line {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
  align-self: stretch;
}

.main-least .contact .line hr {
    display: block;
    width: 100%;
    border-top: 1px solid rgba(255 255 255 0.8);
    border-bottom: 0;
}

.main-least .contact .bt {
  border: 1px solid rgba(255, 255, 255, 0.5);
  font-size: 18px;
  display: flex;
  width: 160px;
  height: 60px;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-weight: 200;
}

@media screen and (max-width: 1024px) {
  .boxy-warp {
    padding: 100px 30px;
  }
}

@media screen and (max-width: 500px) {
  .boxy-warp {
    padding: 60px 30px;
  }

  #slider .inner{
    padding-bottom: 177.78%;
  }

  #hd_pop {
    width: 90%;
  }
  .hd_pops, .hd_pops_con {
    width: 100% !important;
  }
}


/** 하단 카피라이트 **/
#ft {
  display: flex;
  flex-direction: column;
  background: #151515;
}

.copyright {
  max-width: 1480px;
  display: flex;
  padding: 3rem 0px;
  align-items: flex-start;
  gap: 10rem;
  color: #C7C7C7;
  width: 100%;
  margin: auto;
}

.copyright div {
    display: flex;
    padding-top: 3px;
    flex-direction: column;
    gap: 0.8rem;
}

.copyright div p, .copyright div a {
  color: #C7C7C7;
  font-size: 1.5rem;
  font-weight: 400;
}

.copyright .copy_sns .list, .m_sns{
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.m_sns a {
  display: flex;
  width: 30px;
  height: 30px;
  justify-content: center;
  align-items: center;
  border-radius: 3px;
  background: var(--White, #FFF);
  mix-blend-mode: luminosity;
}

.copyright .copy_sns a {
  display: flex;
  width: 30px;
  height: 30px;
  justify-content: center;
  align-items: center;
  mix-blend-mode: luminosity;
}

.copyright .copy_sns a img {
  /* height: 24px; */
}

.copyright div p.rights {
  color: #A4A4A4;
  font-size: 1.2rem;
}

.copyright span {
  color: #3762c5;
  font-weight: 600;
}

@media screen and (max-width: 1480px) {
  #slider {
    height: auto;
  }

  .main-least .service, .main-least .work .title, .main-least .contact, #ft {
    padding-left: 50px;
    padding-right: 50px;
  }

  .main-least .main_tl {
    white-space: pre-line;
  }
}

@media screen and (max-width: 1024px) {
  #slider video {
    width: auto;
    height: 100%;
  }

  .main-least .service .list .item {
    flex: inherit;
    height: 300px;
    width: calc(100% / 2 - 25px);
    padding-bottom: 0;
  }
}

@media screen and (max-width: 800px) {
  .main-least .work, .main-least .service {
    padding-top: 100px;
  }

  .main-least .contact {
    padding-top: 100px;
    padding-bottom: 100px;
  }

  .main-least .contact img {
    width: 150px;
  }

  .main-least .contact .bt {
    width: 140px;
    height: 50px;
  }

  #slider video {
    width: auto;
    height: 100%;
  }

  .main-least .main_tl {
    font-size: 34px;
    line-height: 42px;
  }

  .main-least .main_bt {
    font-size: 14px;
  }

  #ft {min-width: 100%;}

  .copyright {
    flex-direction: column;
    gap: 1rem;
  }

  .copyright .logo {display: none;}
  
}

@media all and (max-width: 500px) {
  .main-least .service, .main-least .work .title, .main-least .contact, #ft {
    padding-left: 20px;
    padding-right: 20px;
  }

  .main-least .work, .main-least .service {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .main-least .title .text {
    gap: 18px;
  }

  .main-least .main_tl_small {
    font-size: 17px;
  }

  .main-least .main_tl {
    font-size: 28px;
    line-height: 40px;
  }

  .main-least .title {
    flex-direction: column;
    gap: 30px;
    align-items: baseline;
  }

  .main-least .main_bt {
    padding: 7px 16px;
  }

  .main-least .service .list {
    gap: 20px;
  }

  .main-least .service .list .item {
    width: calc(100% / 2 - 10px);
    padding: 0px 15px 30px;
    justify-content: flex-end;
  }

  .main-least .service .list .item p:nth-child(1) {
    font-size: 15px;
    word-break: auto-phrase;
  }

  .main-least .service .list .item p:nth-child(2) {
    font-size: 22px;
    margin-bottom: 12px;
  }

  .main-least .service .list .item p:nth-child(3) {
    font-size: 11px;
  }

  .main-least .service .list .item::after {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 24.24%, #000 64.23%);
  }

  .main-least .service .list .item .bt_wrap {
    align-items: stretch;
    flex-direction: column;
    gap: 5px;
    margin-top: 20px;
    height: 0;
  }

  .main-least .service .list .item:hover .bt_wrap {
    height: auto;
  }

  .main-least .service .list .item .bt_wrap a {
    font-size: 13px;
    height: 30px;
    padding: 5px 10px;
  }

  .main-least .work {
    padding-bottom: 0;
  }

  .main-least .contact {
    text-align: center;
  }

  .main-least .contact .bt {
    width: 120px;
    height: 40px;
    font-size: 16px;
  }

  .main-least .contact .line {
      gap: 20px;
  }

  .main-least .contact img {
    width: 100px;
  }

  .copyright {
    gap: 1rem;
  }

  .copyright div {
    gap: 5px;
  }

  .copyright div p, .copyright div a {
    font-size: 1.3rem;
    word-break: auto-phrase;
  }

  .copy_sns p:first-child {
    display: none;
  }
}

/***********************************
  서브페이지
***********************************/
#sub {
 min-height: 800px;
}

#sub .container {
  width: 100%;
  max-width: 1480px;
  margin: auto;
  z-index: 1;
  position: relative;
}

#sub .sec {
  padding: 150px 0;
  overflow: hidden;
}

#sub .sec h3 {
  color: #000;
  font-size: 40px;
  font-weight: 200;
  line-height: 130%;
  white-space: pre-line;
}

#sub .sec h3 b {
  font-weight: 700;
}

/** 서브 탑 비쥬얼 파트 **/
#subTop {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #111;
}

#sub .visual {
  display: flex;
  height: 500px;
  padding-top: 100px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  align-self: stretch;
  color: #FFF;
  background-position: center;
  background-size: cover;
} 

#sub .visual.about {background-image: url(../img/visual-1.jpg);}
#sub .visual.business {background-image: url(../img/visual-2.jpg);}
#sub .visual.works {background-image: url(../img/visual-3.jpg);}
#sub .visual.contact {background-image: url(../img/visual-4.jpg);}

#sub .visual  h2 {
  color: #fff;
  font-family: "Jost", sans-serif;
  font-size: 48px;
  font-weight: 800;
}

#sub .visual p {
  color: #fff;
  font-size: 18px;
}

#sub .visual p br {
  display: none;
}

/** 서브 탑 탭메뉴 **/
.subMenu {
    width: 100%;
    border-bottom: 1px solid #D2D2D2;
    background: #F8F8F8;
}

.fixed {
  position: fixed;
  top: 110px;
  z-index: 99;
}

.subMenu .container {
  display: flex;
  align-items: center;
  max-width: 1480px;
  margin: auto;
}

.subMenu a, .subMenu li {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex: 1 0 0;
    color: #000;
    text-align: center;
    font-size: 18px;
    font-weight: 500;
    height: 60px;
}

.subMenu li.on {
  background-color: #eee;
}

.subMenu li:not(:last-child),
#bo_cate li:not(:last-child) {
  border-right: 1px solid #E7E7E7;
}

@media screen and (max-width: 1024px) {
  #sub .visual {height: 300px;}
}

@media screen and (max-width: 800px) {
  #sub .visual {
    gap: 14px;
  }

  .subMenu a, .subMenu li {
    font-size: 16px;
    height: 50px;
  }

  .fixed {
    top: 60px;
  }
}

@media screen and (max-width: 500px) {
  .subMenu {
    border-bottom: none;
    overflow-x: scroll;
  }

  .subMenu .container {
  }

  .subMenu li {
    width: calc(100% / 3);
    flex: auto;
    border-bottom: 1px solid #D2D2D2;
    padding: 0 20px;
    font-size: 15px;
    letter-spacing: -1px;
    height: 50px;
  }

  #sub .visual h2 {
    font-size: 32px;
  }

  #sub .visual p {
    font-size: 13px;
    text-align: center;
    padding: 0 30px;
    word-break: auto-phrase;
  }
}



/***********************************
  ABOUT
***********************************/
.about .vrist {
  background-color: #fff;
  position: relative;
}

.about .vrist::after {
  content: url(../img/about_bg.svg);
  position: absolute;
  right: -30px;
  top: -75px;
}

.about .vrist .container {
  display: flex;
  justify-content: space-between;
}

.about .vrist p {
    color: #000;
    font-size: 20px;
    font-weight: 300;
    line-height: 140%;
    padding-top: 30px;
    white-space: pre-line;
}

#sub .history {
  background-color: #F6F6F6;
  background-image: url(../img/history_text.svg);
  background-position: right bottom;
  background-repeat: no-repeat;
}

#sub .history .container {
  display: flex;
  align-self: stretch;
  gap: 150px;
}

#sub .history .title {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  flex: 1;
}

#sub .history .title ol {
  display: flex;
  gap: 10px;
  flex-flow: wrap;
  position: absolute;
  left: -213px;
  bottom: 0;
}

#sub .history .title ol li {
  width: calc(100% / 2 - 5px);
}

#sub .history .title ol li img {
  width: 100%;
}

#sub .history .list {
  display: flex;
  flex-direction: column;
}

#sub .history .list .item {
  display: flex;
  align-self: stretch;
  padding: 45px 0;
}

#sub .history .list .item:not(:last-child) {
  border-bottom: 1px solid #D2D2D2;
}

#sub .history .list .item span {
  color: #000;
  font-size: 28px;
  font-weight: 600;
  width: 140px;
}

#sub .history .list .item li {
  color: #000;
  font-size: 18px;
  list-style: disc;
  padding: 5px 0;
  max-width: 1200px;
}

#sub .container.center h3 {
  text-align: center;
}

#sub .container.center {
  display: flex;
  gap: 60px;
  flex-direction: column;
}

#sub .certificate .list {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
}

#sub .certificate .list .item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2px;
  align-self: stretch;
  overflow: hidden;
  width: calc(100% / 5 - 32px);
  border-radius: 9px;
  overflow: hidden;
}

#sub .certificate .list .item:hover {
  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.20), 0 15px 12px rgba(0, 0, 0, 0.12);
}


#sub .certificate .list .item .img {
  border: 1px solid #E7E7E7;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#sub .certificate .list .item .img img{
  width: 100%;
  height: auto; 
}

#sub .certificate .list .item .tl {
  display: flex;
  height: 60px;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  color: #000;
  text-align: center;
  font-size: 17px;
  line-height: 118%; /* 21.24px */
  background: #E7E7E7;
  border-radius: 0 0 10px 10px; 
  flex: 1;
  padding: 10px 8px;
  min-height: 60px;
  flex-direction: column;
}

#sub .certificate .list .item .tl span {
  font-size: 0.95em;
  padding-top: 3px;
}

#sub .partner {
  background: #F8F8F8;
}

#sub .partner .list {
  display: flex;
  align-items: center;
  gap: 40px;
  align-self: stretch;
  flex-wrap: wrap;
}

#sub .partner .list p {
  display: flex;
  width: calc(100% / 6);
  height: 100px;
  flex-direction: column;
  padding: 0;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex: auto;
  border-radius: 10px;
  border: 1px solid var(--Line-Gray, #E7E7E7);
  background: var(--White, #FFF);
  overflow: hidden;
}


#sub .partner .list p:hover {
box-shadow: 0 19px 38px rgba(0, 0, 0, 0.20),
    0 15px 12px rgba(0, 0, 0, 0.12);
}

#sub .partner .list p img{
  mix-blend-mode: luminosity;
  width: 100%;
}

@media screen and (max-width: 1840px) {
  #sub .history .container {
      flex-direction: column;
      gap: 80px;
    }

    #sub .history h3 {
      white-space: normal;
    }

    #sub .history .title .scroll {
      overflow-y: scroll;
    }

    #sub .history .title ol {
      flex-direction: row;
      margin-top: 30px;
      position: inherit;
      flex-wrap: nowrap;
    }

    #sub .history .title ol li {
      flex: none;
      width: calc(100% / 3 - 5px);
    }

    #sub .history .list .item {
      padding: 20px 0;
    }

    #sub .history .list .item span {
      font-size: 25px;
      width: 120px;
    }

    #sub .history img {
      width: 100%;
    }

    #sub .history {
      background-size: contain;
    }

    #sub .history .list ol {
      flex: 1;
    }
}


@media screen and (max-width: 1480px) {
  #sub .sec {
    padding-left: 50px;
    padding-right: 50px;
  }

}

@media only screen and (max-width: 1024px) {
  #sub .sec {
    padding: 100px 40px;
  }

  #sub .sec h3 {
    font-size: 34px;
  }

  .about .vrist p {
    font-size: 18px;
  }

  .about img {
    width: 320px;
  }

  .about .vrist::after {
    content: "";
    background: url(../img/about_bg.svg);
    background-size: contain;
    background-position: center;
    display: block;
    width: 50%;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    background-repeat: no-repeat;
  }

  #sub .history .list .item li {
    font-size: 14px;
    line-height: 22px;
  }

  #sub .certificate .list {
    gap: 20px;
  }

  #sub .certificate .list .item {
    width: calc(100% / 5 - 16px);
  }

  #sub .certificate .list .item .tl {
    height: 50px;
    padding: 0 10px;
    font-size: 15px;
  }

  #sub .partner .list {
    gap: 20px;
  }

  #sub .partner .list p {
    flex: initial;
    width: calc(100% / 3 - 14px);
  }  
}

@media all and (max-width: 800px) {
  .contact li {
    width: 100%;
  }

  .contact li span {
    width: 130px;
  }

  #sub .certificate .list .item {
    width: calc(100% / 4 - 15px);
  }

  #sub .partner .list a {

  }

  #sub .partner img {
    width: 100%;
  }
}

@media screen and (max-width: 500px) {
  #sub .sec {
    padding: 60px 20px;
  }

  #sub .sec h3 {
    font-size: 26px;
  }

  #sub .container.center {
    gap: 30px;
  }

  .about .vrist .container {
    flex-direction: column;
  }
  
  .about .vrist p {
    white-space: normal;
    padding-bottom: 50px;
    font-size: 16px;
  }

  .about .vrist::after {
    width: 100%;
  }

  #sub .history .container {
    gap: 50px;
  }

  #sub .history .title ol {
    width: 200%;
    gap: 10px;
  }

  #sub .history .list .item {
    flex-direction: column;
  }

  #sub .history .list .item span {
    width: auto;
    padding-bottom: 10px;
  }

  #sub .history .list ol {
    padding-left: 19px;
  }

  #sub .partner .list {
    gap: 10px;
  }

  #sub .partner .list p {
    width: calc(100% / 2 - 5px);
    height: 70px;

  }

  #sub .certificate .list {
    gap: 10px;
  }

  #sub .certificate .list .item .tl {
    height: 40px;
    padding: 0 5px;
    font-size: 13px;
    word-break: auto-phrase;
  }

  #sub .certificate .list .item {
    width: calc(100% / 2 - 5px);
  }
}


/***********************************
  BUSINESS
***********************************/
#myMenu li.on {
  background-color: #eee;
}

html.block, body.block {
  overflow: hidden;
  
}
.business .cont {
  display: flex;
  flex-direction: column;
  position: relative;
  transition: 0.5s;
  padding-bottom: 150px;
  /* height: 100vh; */
  /* z-index: -9999; */
}

.business section {
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-top: 150px;
}

/*.business_fixed {
  position: fixed;
  top: 100px;
}

.business section {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 100px 0;
  transition: opacity 0.5s ease;
  opacity: 0;
  overflow: hidden;
}

.business section.on {
  opacity: 1;
} */

.business section .top {
  display: flex;
  width: calc(100% - 250px);
  padding-bottom: 80px;
  flex-direction: column;
  align-self: flex-end;
  position: relative;
} 

.business section .top h3 {
  color: #000;
  font-size: 46px;
  font-weight: 800;
  padding-bottom: 26px;
}

.business section .top p.subText {
  color: #000;
  font-size: 28px;
  font-weight: 600;
  padding-bottom: 10px;
}

.business section .top p.eng {
  position: absolute;
  color: #F9F9F9;
  font-family: "Jost", sans-serif;
  font-size: 110px;
  font-weight: 800;
  right: -60px;
  top: 110px;
  z-index: -1;
}

.business section .top span {
  color: #818181;
  font-size: 17px;
  font-weight: 300;
}

.business section .area {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.business section .area .inner {
  display: flex;
  width: calc(100% - 200px);
  height: 450px;
  padding: 0 80px;
  align-items: center;
  gap: 100px;
  background-repeat: no-repeat;
  background-size: cover;
}

.business .area .possible {
  display: flex;
  align-items: flex-start;
  gap: 30px;
  color: #fff;
  max-width: 1400px;
  width: 100%;
}

.business .area .possible h4 {
  font-size: 24px;
  font-weight: 600;
}

.business .area .possible .right {
  display: flex;
  flex: 1;
  align-self: stretch;
  flex-direction: column;
}

.business .area .possible .right p.explain {
  display: flex;
  padding: 1px 0px 60px 36px;
  align-items: center;
  gap: 10px;
  white-space: pre-line;
  line-height: 180%;
  font-size: 18px;
}

.business .area .possible .list {
  display: flex;
  width: 640px;
  align-items: center;
  align-content: center;
  gap: 70px 0px;
  flex-wrap: wrap;
}

.business .area .possible .list.narrow {
  gap: 30px 0px;
}

.business .area .possible .list li {
  display: flex;
  width: calc(100% / 3);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 17px;
  flex-shrink: 0;
  border-right: 1.08px solid rgba(255, 255, 255, 0.1);
  text-align: center;
    font-size: 15px;
}

.business .area .possible .list li:last-child,
.business .area .possible .list li:nth-child(3) {
  border-right: 0;
}

.business .area a {
  display: flex;
  padding: 8px 20px;
  align-items: center;
  gap: 10px;
  border-radius: 62.961px;
  border: 1.049px solid #A5A5A5;
  color: #fff;
  font-size: 15px;
  margin-left: auto;
  align-self: flex-end;
}

.business .area a::after {
  content: url(../img/business_bt.svg);
}

@media screen and (max-width: 1300px) {
  .business section .top {
    width: calc(100% - 100px);
  }

  .business section .area .inner {
    width: 100%;
  }
}

@media screen and (max-width: 1135px) {
  .business .area a {
      position: absolute;
    }
}

@media screen and (max-width: 1024px) {
  .business section .top {
    width: 100%;
    padding: 0 50px 50px;
  }

  .business section .top h3 {
    font-size: 40px;
    padding-bottom: 20px;
  }

  .business .area .possible .right {
    flex-direction: column;
  }

  .business .area .possible .right p.explain {
    font-size: 14px;
    padding-bottom: 40px;
  }

  .business section .top p.subText {
    font-size: 26px;
  }

  .business section .area .inner {
    width: 100%;
    height: calc(100vh - 400px);
    padding: 0px 40px;
  }

  .business .area .possible .list {
    width: calc(100% - 20px);
    gap: 50px 0;
  }

  .business .area {
    position: relative;
  }
}

@media screen and (max-width: 500px) {
  .business .cont {
    margin: 0;
  }

  .business section {
    padding-top: 120px;
  }

  .business section .top {
    padding: 0 30px 30px;
  }

  .business section .top h3 {
    font-size: 34px;
  }

  .business section .top p.subText {
    font-size: 22px;
    letter-spacing: -0.5px;
  }

  .business section .top span {
    font-size: 15px;
  }

  .business .area .possible {
    flex-direction: column;
  }

  .business .area .possible .list {
    width: 100%;
    gap: 30px 0;
    justify-content: center;
  }

  .business .area .possible .list li  {
    gap: 12px;
  }

  .business .area .possible .right p.explain {
    padding-left: 0;
  }

  .business .area .possible .list li img {
    width: 30px;
  }

  .business .area .possible .list li p {
    font-size: 13px;
  }

  .business section .area .inner {
    padding: 40px 30px;
    height: auto;
  }

  .business .area .possible h4 {
    margin: 0 auto;
  }

  .business .area .possible h4 br {
    display: none;
  }

  .business .area a {
    position: inherit;
    margin-right: auto;
    margin-top: 20px;
  }

  .business section.business_2 .list li,
  .business section.business_3 .list li,
  .business section.business_4 .list li,
  .business section.business_5 .list li {
    width: calc(100% / 3) !important;
  }

  .business section .top p.eng {
    display: none;
  }
}

/***********************************
  오시는 길
***********************************/
.location {
  display: flex;
  padding: 150px 0px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 100px;
  margin: auto;
  max-width: 1400px;
  align-self: stretch;
}

.location .top {
  display: flex;
  width: 1400px;
  justify-content: space-between;
  align-items: flex-end;
}

.location .top h3 {
  color: #000;
  font-size: 40px;
  font-weight: 200;
  line-height: 130%;
  white-space: pre-line;
}

.location .top h3 b {
  font-weight: 700;
}

.location hr {
  border-top: 1px solid #000;
  display: block;
  width: 100%;
}

.location .cont {
  display: flex;
  width: 1400px;
  align-items: center;
  gap: 100px;
}

.location .cont .info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 40px;
}

.location .cont .info hr {
  border-top: 1px solid #DCDCDC;;
  display: block;
  width: 100%;
}

.location .cont .info .map_link,
.location .cont .info .list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
  color: var(--Basic-Black, #222);
}

.location .cont .info .list{
  gap: 12px;
}

.location .cont .info .map_link h4 {
  font-size: 24px;
  font-weight: 600;
}

.location .cont .info .map_link p {
  font-size: 18px;
  line-height: 27px; /* 145% */
  white-space: pre-line;
}

.location .cont .info .map_link .bt_wrap {
  display: flex;
  padding-top: 10px;
  align-items: center;
  gap: 10px;
}

.location .cont .info .map_link .bt_wrap a {
  display: flex;
  padding: 8px 20px;
  justify-content: center;
  align-items: flex-start;
  border-radius: 20px;
  font-size: 15px;
}

.location .cont .info .map_link .bt_wrap a.naver {
  background: #2DB400;
  color: #fff;
}

.location .cont .info .map_link .bt_wrap a.kakao {
  background: #F9E000;
}

.location .cont .list p {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 16px;
}

.location .cont .list p span {
  font-weight: 500;
  width: 70px;
}

.location .cont .list .sns {
    display: flex;
    padding-top: 10px;
    gap: 20px;
    align-items: center;
}

.location .cont .list .sns a{
  display: flex;
  align-items: stretch;
  flex: 1;
  /* color: #626262;
  border-bottom: 1px solid #ACACAC;
  padding-bottom: 4px;
  font-size: 15px; */
}

.location .cont .map {
  background-image: url(../img/map.jpg);
  background-size: cover;
  display: flex;
  align-self: stretch;
  flex: 1;
}


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

@media only screen and (max-width: 1024px) {
  .location{padding: 100px 50px;}
  .location .top, .location .cont {width: 100%;}
}

@media all and (max-width: 800px) {
  .location {gap: 60px;}
  .location .top {
    flex-direction: column;
    align-items: baseline;
    gap: 40px;
  }
  .location .top h3 {
    font-size: 35px;
  }

  .location .cont .info .map_link p {
    white-space: normal;
    word-break: auto-phrase;
  }

  .bt_dark {
    height: 46px;
    font-size: 15px;
  }

  .location .cont {
    flex-direction: column;
    gap: 60px;
  }

  .location .cont .info {
    width: 100%;
  }

  .location .cont .map {
    flex: auto;
    height: 240px;
    background-size: contain;
    background-repeat: no-repeat;
  }
}

@media screen and (max-width: 480px) {
  .location {
      padding: 60px 30px;
  }

  .location .top h3 {
      font-size: 30px;
      word-break: auto-phrase;
  }

  .location .cont .map {
    height: 140px;
  }
}

/***********************************
  게시판 정리
***********************************/

@media all and (max-width: 480px) {
  #bo_btn_top {margin-top: 0;}
  #bo_list_total {display: none;}
}