/*---common css---*/

@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

:root {
  /*color*/
  --color-base: #000;
  --color-kakao: #ffc401;
  --color-kakao-text: #442f01;
  --color-naver: #00c13a;
  --color-primary: #36a44d;
  --color-second: #0064b8;

  /*font-size*/
  --font-size-13: 0.813rem;
  --font-size-14: 0.875rem;
  --font-size-16: 1rem;
  --font-size-17: 1.0625rem;
  --font-size-18: 1.125rem;
  --font-size-19: 1.188rem;
  --font-size-20: 1.25rem;
  --font-size-22: 1.375rem;
  --font-size-23: 1.438rem;
  --font-size-24: 1.5rem;
  --font-size-25: 1.563rem;
  --font-size-26: 1.625rem;
  --font-size-27: 1.688rem;
  --font-size-28: 1.75rem;
  --font-size-31: 1.938rem;
  --font-size-32: 2rem;
  --font-size-34: 2.125rem;
  --font-size-35: 2.188rem;

  --font-size-45: 2.813rem;
  --font-size-48: 3rem;
  --font-size-70: 4.375rem;
  --font-size-72: 4.5rem;
  --font-size-80: 5rem;
  --font-size-90: 5.625rem;

  /*font-weight*/
  --font-r: 400;
  --font-m: 500;
  --font-sb: 600;
  --font-b: bold;
  --font-bl: 900;
}

/*font size*/
.fs_13 {
  font-size: var(--font-size-13);
}
.fs_14 {
  font-size: var(--font-size-14);
}
.fs_16 {
  font-size: var(--font-size-16);
}
.fs_17 {
  font-size: var(--font-size-17);
}
.fs_18 {
  font-size: var(--font-size-18);
}
.fs_19 {
  font-size: var(--font-size-19);
}
.fs_20 {
  font-size: var(--font-size-20);
}
.fs_22 {
  font-size: var(--font-size-22);
}
.fs_23 {
  font-size: var(--font-size-23);
}
.fs_24 {
  font-size: var(--font-size-24);
}
.fs_25 {
  font-size: var(--font-size-25);
}
.fs_26 {
  font-size: var(--font-size-26);
}
.fs_27 {
  font-size: var(--font-size-27);
}
.fs_28 {
  font-size: var(--font-size-28);
}
.fs_31 {
  font-size: var(--font-size-31);
}
.fs_32 {
  font-size: var(--font-size-32);
}
.fs_34 {
  font-size: var(--font-size-34);
}
.fs_35 {
  font-size: var(--font-size-35);
}
.fs_45 {
  font-size: var(--font-size-45);
}
.fs_48 {
  font-size: var(--font-size-48);
}
.fs_70 {
  font-size: var(--font-size-70);
}
.fs_72 {
  font-size: var(--font-size-72);
}
.fs_80 {
  font-size: var(--font-size-80);
}
.fs_90 {
  font-size: var(--font-size-90);
}

@media screen and (max-width: 767px) {
  .fs_90 {
    font-size: 30px;
  }
  .fs_80 {
    font-size: 30px;
  }
  .fs_45 {
    font-size: 28px;
  }
  .fs_34 {
    font-size: 20px;
  }
  .fs_24 {
    font-size: 14px;
  }
  .fs_22 {
    font-size: 14px;
  }
  .fs_26 {
    font-size: 16px;
  }
  .fs_18 {
    font-size: 14px;
  }
}

/*font color*/

.fc_f {
  color: #fff;
}
.fc_f02 {
  color: rgba(255, 255, 255, 0.3);
}
.fc_o {
  color: var(--color-primary);
}

/*font weight*/

.font_r {
  font-weight: var(--font-r);
}
.font_m {
  font-weight: var(--font-m);
}
.font_sb {
  font-weight: var(--font-sb);
}
.font_b {
  font-weight: var(--font-b);
}
.font_bl {
  font-weight: var(--font-bl);
}

/*text-motion*/

.j_motion.common_motion {
  transform: translateY(25px);
  opacity: 0;
  transition: transform 0.8s ease, opacity 0.4s;
}
.j_motion.common_motion.on {
  transform: translateY(0);
  opacity: 1;
}

.j_delay_01 {
  transition-delay: 0.2s !important;
}
.j_delay_02 {
  transition-delay: 0.4s !important;
}
.j_delay_03 {
  transition-delay: 0.6s !important;
}
.j_delay_04 {
  transition-delay: 0.8s !important;
}
.j_delay_05 {
  transition-delay: 1s !important;
}
.j_delay_06 {
  transition-delay: 1.2s !important;
}
.j_delay_07 {
  transition-delay: 1.4s !important;
}
.j_delay_08 {
  transition-delay: 1.6s !important;
}
.j_delay_09 {
  transition-delay: 1.8s !important;
}
.j_delay_10 {
  transition-delay: 2s !important;
}
.j_delay_11 {
  transition-delay: 2.2s !important;
}

/*--- common ---*/
.mainPd {
  padding: 190px 0;
}
.mt15 {
  margin-top: 15px;
}
.mt20 {
  margin-top: 20px;
}
.mt30 {
  margin-top: 30px;
}
.mt45 {
  margin-top: 45px;
}
.mt50 {
  margin-top: 50px;
}
.mainInner {
  max-width: 1730px;
  width: 92%;
  margin: 0 auto;
}
.mainInner02 {
  max-width: 1480px;
  width: 92%;
  margin: 0 auto;
}
.mainTit {
  text-align: center;
}

@media screen and (max-width: 1680px) {
  .mainPd {
    padding: 120px 0;
  }
}

@media screen and (max-width: 1080px) {
  .mainPd {
    padding: 100px 0;
  }

  .mainTit h2,
  #ms_sec03 h2 {
    font-size: 3.125rem;
  }

  .mainTit p {
    margin-top: 30px;
  }
}

@media screen and (max-width: 767px) {
  .mainPd {
    padding: 60px 0;
  }

  .section_nav {
    overflow: hidden;
  }
}

/*--- header ---*/

#j_header {
  height: 80px;
  position: sticky;
  left: 0;
  top: 0;
  z-index: 90;
  width: 100%;
  border-bottom: 1px solid #eaeaea;
  background: #fff;
}
#j_header .hdWrap {
  max-width: 1730px;
  margin: 0 auto;
  width: 92%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 36px;
  height: 100%;
  align-items: center;
}
#j_header .gnbBtn {
  width: 30px;
  height: 27px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
}
#j_header .gnbBtn span {
  display: block;
  width: 100%;
  height: 3px;
  background-color: #121212;
  transition: width 0.3s;
  position: relative;
  z-index: 999;
}
#j_header .gnbBtn span:nth-child(2) {
  width: 20px;
  margin: 7px 0;
}
#j_header .gnbBtn:hover span:nth-child(1) {
  width: 14px;
  transition: width 0.3s;
}
#j_header .gnbBtn:hover span:nth-child(2) {
  width: 100%;
  transition: width 0.3s;
}
#j_header .gnbBtn:hover span:nth-child(3) {
  width: 14px;
  transition: width 0.3s;
}

.d_Nav {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 100%;
  z-index: 90;
}
.hdWrap > .d_Nav > .j_gnb {
  display: flex;
  align-items: center;
  height: 100%;
}
.hdWrap > .d_Nav > .j_gnb > li {
  padding: 0 35px;
  height: 100%;
  position: relative;
}
.hdWrap > .d_Nav > .j_gnb > li:first-child {
  padding-left: 0;
}
.hdWrap > .d_Nav > .j_gnb > li:last-child {
  padding-right: 0;
}
.hdWrap > .d_Nav > .j_gnb > li > a {
  display: block;
  height: 100%;
  line-height: 80px;
  font-size: 1.125rem;
  font-weight: 700;
  color: #121212;
}
.hdWrap > .d_Nav > .j_gnb > li > ul {
  background-color: #fff;
  text-align: center;
  position: absolute;
  top: 100%;
  left: -20%;
  padding: 20px 0;
  width: 170px;
  z-index: 1;

  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.3s ease-in-out;
}

.hdWrap > .d_Nav > .j_gnb > li:hover > ul {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.hdWrap > .d_Nav > .j_gnb > li > ul > li > a {
  display: block;
  width: 100%;
  height: 100%;
  font-size: 1.13rem;
  font-weight: 400;
  padding: 10px 0;
  color: #666;
  transition: all 0.3 ease;
}

@media screen and (max-width: 1400px) {
  .hdWrap > .d_Nav > .j_gnb > li {
    padding: 0 20px;
  }
}

.hd_util {
  display: flex;
  align-items: center;
  gap: 42px;
}
.lang_box {
  position: relative;
}
.langList {
  position: absolute;
  top: 100%;
  left: 0;
  padding-top: 10px;
}
.lang_box a {
  display: flex;
  align-items: center;
  gap: 11px;
}
.langList {
  display: none;
}

@media screen and (max-width: 1220px) {
  .hdWrap > .d_Nav {
    display: none;
  }
  #j_header .hdWrap {
    padding-left: 0;
  }
}

@media screen and (max-width: 760px) {
  #j_header {
    height: 60px;
  }
}

/*--- Visual ---*/
.mainBg {
  width: 100%;
  height: calc(100vh - 80px);
  position: relative;
  background: #f3fbf3;
}
.mainDesc {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 1730px;
  color: #121212;
}
.mainBg.bg01 .mainDesc strong {
  color: var(--color-second);
}

.mainBg.bg02 .mainDesc strong {
  color: #00bf93;
}

.mainBg.bg03 .mainDesc strong {
  color: #00acbf;
}

.mainDesc .green {
  background: var(--color-primary);
  color: #fff;
  padding: 5px;
}
.mainDesc .red {
  background: #f62b2b;
  color: #fff;
  padding: 5px;
}

.mainBg.bg01 {
  background: url("/img/main/d_bg01.jpg") no-repeat center/cover;
}

.mainBg.bg02 {
  background: url("/img/main/d_bg02.jpg") no-repeat center/cover;
}

.mainBg.bg03 {
  background: url("/img/main/d_bg03.jpg") no-repeat center/cover;
}

@media screen and (max-width: 1600px) {
  .mainDesc {
    padding-left: 20px;
  }
}

@media screen and (max-width: 760px) {
  .mainVisual {
    position: relative;
  }

  .mainBg {
    height: 750px;
  }
}

@media screen and (max-width: 600px) {
  .mainBg {
    height: 700px;
  }
}

@media screen and (max-width: 425px) {
  .mainBg {
    height: 600px;
  }
}

/*--- SD ---*/
.scrollBox {
  left: 50%;
  bottom: 55px;
  transform: translateX(-50%);
  position: absolute;
  z-index: 10;
}
.scroll-downs {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 34px;
  height: 55px;
}
.mousey {
  width: 3px;
  padding: 5px 9px;
  height: 26px;
  border: 2px solid #121212;
  border-radius: 25px;
  opacity: 0.75;
  box-sizing: content-box;
}
.scroller {
  width: 3px;
  height: 13px;
  border-radius: 25%;
  background-color: #fff;
  animation-name: scroll;
  animation-duration: 2.2s;
  animation-timing-function: cubic-bezier(0.15, 0.41, 0.69, 0.94);
  animation-iteration-count: infinite;
}
.mvPageBox {
  position: absolute;
  width: 100%;
  z-index: 11;
  left: 50%;
  top: 65%;
  transform: translateX(-50%);
}
.mvPageBox .swiper-pagination {
  text-align: left;
  max-width: 1730px;
  position: static;
  margin: 0 auto;
}
.mvPage .swiper-pagination-bullet {
  background: rgba(0, 0, 0, 0.3);
  width: 11px;
  height: 11px;
  border-radius: 50%;
  margin: 0 7px !important;
}
.mvPage .swiper-pagination-bullet.swiper-pagination-bullet-active {
  width: 11px;
  height: 11px;
  border: 3px solid #fff;
  background: transparent;
}
.mvProgressBox {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
}
.mvProgressBox .pagination_progress {
  height: 3px;
  background: rgba(255, 255, 255, 0.3);
}
.mvProgressBox .pagination_progress span {
  background: #fff;
}

@keyframes scroll {
  0% {
    opacity: 0;
  }
  10% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(15px);
    opacity: 0;
  }
}

@media screen and (max-width: 1600px) {
  .mvPageBox {
    padding-left: 20px;
  }
}

/*pageNav*/

.pageNav {
  width: 5%;
  position: fixed;
  right: 45px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
}
.page_inner {
  max-width: 1520px;
  width: 92%;
  margin: 0 auto;
  height: 100%;
  position: relative;
  z-index: 20;
}
.pageNav ul {
  width: 100px;
  padding-right: 16px;
  position: relative;
}
.pageNav ul:before {
  position: absolute;
  content: "";
  right: -1.9px;
  top: 50%;
  height: 97%;
  width: 2px;
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-50%);
}
.pageNav ul li {
  position: relative;
  text-align: right;
}
.pageNav ul li:after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  right: -21px;
  top: 50%;
  transform: translateY(-50%);
}
.pageNav ul li:before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid transparent;
  border-radius: 50%;
  background: transparent;
  right: -26px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  transition: 0.28s;
}
.pageNav ul li.on:before {
  opacity: 1;
  border: 2px solid #00ca2a;
}
.pageNav ul li + li {
  margin-top: 22px;
}
.pageNav ul li a {
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
  transition: 0.28s;
  opacity: 0;
}
.pageNav ul li:hover > a {
  opacity: 1;
  color: #fff;
}
.pageNav ul li.on:after {
  background: #00ca2a;
}
.pageNav ul li.on a {
  opacity: 1;
  color: #00ca2a;
}

@media screen and (max-width: 1680px) {
  .pageNav {
    right: 100px;
  }
}

@media screen and (max-width: 767px) {
  .pageNav {
    display: none;
    /* right: 30px; */
  }

  .pageNav .page_inner {
    max-width: unset;
  }
}

/*--- section01 ---*/

.ms_sec01Box {
  display: flex;
}
.ms_sec01Box .ms_sec01_lt {
  width: 36%;
  background: #fff;
  padding: 190px 95px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ms_sec01Box .ms_sec01_lt .sec01_tit h2 {
  color: #121212;
  font-size: 4.375rem;
  font-weight: 700;
}
.ms_sec01Box .ms_sec01_lt .sec01_tit p {
  color: #121212;
  line-height: 1.65em;
  font-size: 1.438rem;
  margin-top: 50px;
}
.ms_sec01Box .ms_sec01_rt {
  width: 64%;
  height: 100vh;
  z-index: 0;
}

.ms_sec01Box .ms_sec01_lt .green{
  color: var(--color-primary);
}

.sec01Swip {
  height: 100%;
}
.sec01DescList {
  margin-top: 100px;
}
.sec01DescList > li {
  background: #f7f7f7;
  border-radius: 10px;
  padding: 28px;
  overflow: hidden;
  cursor: pointer;
}
.sec01DescList > li + li {
  margin-top: 14px;
}
.sec01DescList > li.on {
  background: var(--color-primary);
}
.sec01DescList > li .sec01Desc {
  display: flex;
  align-items: center;
  gap: 18px;
}
.sec01DescList > li .sec01Desc span {
  color: var(--color-primary);
  font-size: 0.938rem;
  font-weight: 700;
}
.sec01DescList > li.on .sec01Desc span {
  color: #fff;
}
.sec01DescList > li .sec01Desc h4 {
  color: #121212;
  font-size: 1.25rem;
  font-weight: 700;
}
.sec01DescList > li.on .sec01Desc h4 {
  color: #fff;
}

.sec01_bg.bg01 {
  background: url(/img/main/sec01_bg01.jpg) no-repeat center / cover;
}
.sec01_bg.bg02 {
  background: url(/img/main/sec01_bg03.jpg) no-repeat center / cover;
}
.sec01_bg.bg03 {
  background: url(/img/main/sec01_bg02.jpg) no-repeat center / cover;
}
.sec01_bg.bg04 {
  background: url(/img/main/sec01_bg04.jpg) no-repeat center / cover;
}

.sec01SwipDesc {
  position: absolute;
  bottom: 190px;
  left: 95px;
  z-index: 20;
}
.sec01SwipDesc a {
  position: relative;
  display: flex;
  gap: 130px;
  align-items: center;
  padding-bottom: 30px;
  border-bottom: 1px solid #fff;
}
.sec01SwipDesc a span {
  position: absolute;
  font-size: 100px;
  content: "";
  top: 0;
  color: rgba(255, 255, 255, 0.25);
  right: 20%;
  top: -67px;
}

@media screen and (max-width: 1680px) {
  .ms_sec01Box .ms_sec01_lt {
    padding: 190px 40px;
  }
}

@media screen and (max-width: 1220px) {
  .ms_sec01Box {
    flex-wrap: wrap;
    flex-direction: column-reverse;
  }
  .sec01DescList {
    margin-top: 40px;
  }
  .ms_sec01Box .ms_sec01_lt {
    width: 100%;
    padding: 40px;
    height: unset;
  }
  .ms_sec01Box .ms_sec01_rt {
    width: 100%;
    height: 400px;
  }
}

@media screen and (max-width: 1080px) {
  .ms_sec01Box .ms_sec01_lt .sec01_tit h2 {
    font-size: 3.125rem;
  }

  .ms_sec01Box .ms_sec01_lt .sec01_tit p {
    margin-top: 30px;
  }
}

@media screen and (max-width: 760px) {
  .ms_sec01Box .ms_sec01_lt .sec01_tit p {
    margin-top: 20px;
  }
  .sec01SwipDesc {
    left: 50%;
    transform: translate(-50%, 50%);
    width: 100%;
    margin: 0 30px;
    bottom: 50%;
  }

  .sec01SwipDesc a {
    width: calc(100% - 60px);
    gap: 0;
    justify-content: space-between;
    font-size: 2.5em;
  }

  .sec01SwipDesc a span {
    right: 14%;
  }

  .sec01SwipDesc a span {
    font-size: 65px;
    top: -15px;
  }
}

/*--- section02 ---*/
#ms_sec02 {
  background: url(/img/main/ms_sec02_bg.jpg) no-repeat center / cover;
}
.ms_sec02List {
  margin-top: 130px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 40px;
}
.ms_sec02List:last-child {
  margin-top: 30px;
}
.ms_sec02List li {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  background: #fff;
  border-radius: 60px;
  padding: 40px 50px;
  text-align: center;
}
.ms_sec02List li p {
  line-height: 1.5em;
}

.ms_sec02List li.title_two h4 {
  font-size: 42px;
}

.ms_sec02List li.title_two h4.sub_title {
  margin-top: 0;
}

.ms_sec02List li:nth-of-type(4n) {
  margin-right: 0;
}
.ms_sec02List li h4 {
  margin-top: 20px;
  font-size: 50px;
}

@media screen and (max-width: 1680px) {
  .ms_sec02List {
    gap: 20px;
  }
}

@media screen and (max-width: 1280px) {
  .ms_sec02List {
    margin-top: 80px;
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (max-width: 760px) {
  .ms_sec02List {
    margin-top: 50px;
  }

  .ms_sec02List li {
    padding: 20px 30px;
    border-radius: 40px;
  }

  .ms_sec02List li h4 {
    font-size: 30px;
  }

  #ms_sec02 .mainTit p {
    margin-top: 20px;
    word-break: keep-all;
  }
}

@media screen and (max-width: 600px) {
  .ms_sec02List li {
    padding: 20px;
    border-radius: 20px;
  }

  .ms_sec02List li h3,
  .ms_sec02List li h4 {
    margin-top: 10px;
  }

  .ms_sec02List img {
    width: 42%;
  }
}

/*--- section03 ---*/

#ms_sec03 {
  background: url(/img/main/sec03_bg.jpg) no-repeat center / cover;
}
#ms_sec03 .mainInner02 > ul {
  display: flex;
}
#ms_sec03 .mainInner02 > ul > li {
  width: 50%;
}
#ms_sec03 .mainInner02 > ul > li p {
  line-height: 1.5em;
}
#ms_sec03 .mainInner02 > ul > li a.view_btn {
  justify-content: flex-start;
  margin-top: 30px;
}

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

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

/*--- section04 ---*/
#ms_sec04 {
  background: url(/img/main/sec04_bg.jpg) no-repeat center / cover;
}
.flow_slide {
  position: relative;
  overflow: hidden;
  height: 60px;
  margin-top: 120px;
}
.flow_slide .flow_wrap {
  height: 100%;
  display: flex;
  align-items: center;
  position: absolute;
  left: 0;
  top: 0;
  animation-name: logo_motion;
  animation-duration: 25s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.flow_slide img {
  display: block;
  margin-right: 87px;
}

.flow_slide02 {
  position: relative;
  overflow: hidden;
  height: 60px;
  margin-top: 50px;
}
.flow_slide02 .flow_wrap {
  height: 100%;
  display: flex;
  align-items: center;
  position: absolute;
  left: 0;
  top: 0;
  animation-name: logo_right;
  animation-duration: 25s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.flow_slide02 img {
  display: block;
  margin-left: 87px;
}

@keyframes logo_right {
  0% {
    left: -100%;
  }
  100% {
    left: 0;
  }
}

@keyframes logo_motion {
  0% {
    left: 0;
  }
  100% {
    left: -100%;
  }
}

@media screen and (max-width: 1200px) {
  #ms_sec03 .mainInner02 > ul {
    flex-wrap: wrap;
  }
  #ms_sec03 .mainInner02 > ul > li {
    width: 100%;
  }
  #ms_sec03 .mainInner02 > ul > li + li {
    margin-top: 50px;
  }
}

@media screen and (max-width: 760px) {
  #ms_sec03 .mainInner02 > ul > li + li {
    margin-top: 30px;
  }
}

/*--- section05 ---*/
#ms_sec05 {
  background: url(/img/main/sec05_bg.jpg) no-repeat center / cover;
}
.sec05Swip {
  margin-top: 125px;
}
.sec05Swip .swiper-slide p {
  color: #777;
}
.sec05Swip h2 {
  transition: 0.28s;
  width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.sec05Swip .swiper-slide.swiper-slide-active h2 {
  color: var(--color-primary);
}
.ani_page {
  width: 100%;
  background: #dddddd;
  height: 6px;
  margin-top: 66px;
  position: relative;
}
.sec05Swip .swiper-slide.swiper-slide-active .ani_page::after {
  animation-name: ani_page;
  animation-duration: 3s;
  animation-timing-function: linear;
}
.ani_page::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0%;
  height: 100%;
  background: var(--color-primary);
}

.view_btn {
  display: flex;
  align-items: center;
  gap: 30px;
  justify-content: center;
  margin-top: 95px;
}

@keyframes ani_page {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@media screen and (max-width: 767px) {
  .sec05Swip {
    margin-top: 40px;
    width: 100%;
  }
  .view_btn {
    margin-top: 40px;
  }
}

/*--- section06 ---*/

#ms_sec06 {
  background: url(/img/main/sec06_bg.jpg) no-repeat center / cover;
  padding: 180px 0;
}

.d_footer {
  background: #000;
}
.ft_inner {
  max-width: 1730px;
  width: 92%;
  margin: 0 auto;
}
.ft_top {
  display: flex;
  justify-content: space-between;
  padding: 60px 0 35px;
  align-items: end;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.familySite {
  position: relative;
}
.familySite a {
  display: flex;
  color: #fff;
  gap: 70px;
  align-items: center;
  width: 200px;
  height: 50px;
  background: #292929;
  justify-content: center;
}
.familySite > li > ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
}
.ft_lt p {
  margin-top: 45px;
  line-height: 2em;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 32px;
}

.ft_lt p span:first-child {
  width: 100%;
}

.ft_bot {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ft_link {
  display: flex;
  gap: 24px;
}
.ft_link a {
  display: block;
  color: rgba(255, 255, 255, 0.25);
  transition: 0.25s;
}
.ft_link a:hover {
  color: rgba(255, 255, 255, 1);
}
.copy_p {
  padding: 35px 0;
}
.ml32 {
  margin-left: 32px;
}

@media screen and (max-width: 767px) {
  #ms_sec06 {
    padding: 180px 0;
  }
  .ft_top {
    flex-wrap: wrap;
    padding: 30px 0 20px;
    margin-bottom: 20px;
  }
  .ft_lt {
    width: 100%;
  }
  .ft_rt {
    width: 100%;
    margin-top: 20px;
  }
  .ft_bot {
    flex-wrap: wrap;
  }
  .ft_bot_lt {
    width: 100%;
  }
  .ft_bot_rt {
    width: 100%;
  }
  .copy_p {
    padding: 10px 0;
  }

  .ft_lt p {
    margin-top: 20px;
  }

  .d_footer {
    padding-bottom: 20px;
  }
}

/*popup privacy_policy */
.k_pop_wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 2000;
  display: none;
}
.k_pop_inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  max-width: 600px;
  background: #fff;
  box-shadow: 5px 5px 13px rgba(0, 0, 0, 0.3);
  padding: 40px;
  border-radius: 20px;
}
.pop_content {
  position: relative;
}
.pop_content h4 {
  font-size: 1.3rem;
  font-weight: bold;
  letter-spacing: -0.045em;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #ddd;
}
.pop_content p {
  max-height: 350px;
  overflow-y: scroll;
  font-size: 14px;
}
.pop_content p i {
  display: block;
}
.pop_content p i b {
  font-weight: 500;
}
.pop_close {
  position: absolute;
  top: 0;
  right: 0;
  width: 30px;
  height: 30px;
  z-index: 3;
}
.pop_close span {
  position: absolute;
  top: 14px;
  left: 0;
  width: 100%;
  height: 2px;
  background: #222;
  transition: transform 0.3s;
}
.pop_close span:nth-child(1) {
  transform: rotate(45deg);
}
.pop_close span:nth-child(2) {
  transform: rotate(-45deg);
}
.pop_close:hover span {
  transform: rotate(0);
}

/*-------------------------------------------------mobile_wrap----------------------------------------*/

.mobile_wrap {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.9);
  display: none;
  z-index: 98;
}
.mo_inner {
  height: 100%;
}
.mo_gnb {
  height: 100%;
}
.mo_gnb > .j_gnb {
  display: flex;
  align-items: center;
  height: 100%;
  flex-direction: column;
  justify-content: center;
}
.mo_gnb > .j_gnb > li > a {
  font-size: 2.5rem;
  padding: 10px;
  display: flex;
  align-items: center;
  transition: 0.3s;
  color: #fff;
}
.mo_gnb > .j_gnb > li > a:hover,
.mo_gnb > .j_gnb > li > ul > li > a:hover {
  color: #adcce6;
}

.mo_gnb > .j_gnb > li > ul > li {
  text-align: center;
}

.mo_gnb > .j_gnb > li > ul > li > a {
  display: block;
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
  font-size: 2em;
  padding: 5px 0;
  transition: 0.3s all;
}

.mo_gnb > .j_gnb .j_menu_5 ul {
  display: block;
}

/*mo_gnb*/
.gnbBtn.show {
  z-index: 99;
}

.gnbBtn.show span {
  background: #fff !important;
}

.br_m {
  display: none;
}

.br_t {
  display: none;
}

@media screen and (max-width: 1299px) {
  br.br_t {
    display: inline;
  }
}

@media screen and (max-width: 600px) {
  br.br_m {
    display: inline;
  }
}

.mo_arrow {
  display: none;
}

.mobile_wrap .mo_arrow {
  display: inline-block;
  font-size: 14px;
  margin-left: 10px;
  padding: 10px;
}

.mobile_wrap .mo_gnb > .j_gnb .j_menu_5 ul {
  display: none;
}

.mobile_wrap .mo_gnb li.active > ul {
  display: block;
}

li.active .mo_arrow i {
  transform: rotate(180deg);
  transition: transform 0.3s ease;
}

.no-post-box {
  padding-top: 50px;
  text-align: center;
}

.adm_btn {
  display: inline-flex;
  padding: 10px 20px;
  border-radius: 30px;
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
}

/*---관리자버튼---*/
.hd_admin {
  position: fixed;
  bottom: 10px;
  left: 10px;
  z-index: 999;
}
.hd_admin a {
  padding: 0 20px;
  display: inline-block;
  line-height: 40px;
  background: #d12323;
  color: #fff;
}
.hd_admin a:hover {
  background: #ff0000;
}