:root {
    --pretendard: "Pretendard", sans-serif;
    --paperlogy: "Paperlogy", sans-serif;
    --notoSansKR: "Noto Sans KR", sans-serif;
	--mainColor: #00c1ca;
  	--gap: 1.25rem;
	--transition: all 0.4s ease-in;

}
  
  
/* common */
* { margin: 0; padding: 0; outline: none; box-sizing: border-box;}
body {margin: 0; padding: 0; -ms-overflow-style: none; scrollbar-width: none; }
body::-webkit-scrollbar {display: none;}
html { scroll-behavior: smooth; }
html, body {font: 400 16px/1.3 'Pretendard', 'Noto Sans KR', sans-serif;  color: #000000; width: 100%; position: relative;}
ul, li {list-style: none;}
a {text-decoration: none; color: inherit; -webkit-tap-highlight-color: transparent;}
img {max-width: 100%;}
button { font-family: inherit; border: none; background-color: transparent; outline: 0;  cursor: pointer; }
input,textarea,button,select {font-family: inherit;}

body.hidden { overflow: hidden;}
body::before { content: "";  position: fixed;  left: 0;  top: 0;  width: 100%;  height: 100%; background-color: rgba(0,0,0,0.25); z-index: 99;  transition: var(--transition); opacity: 0; pointer-events: none;cursor: pointer;}
body.hidden::before { opacity: 1;  pointer-events: auto;}

.pc {display: block;}
.tablet {display: none !important;}
.mobile { display: none !important;}  
.wrap {width: 100%; position: relative;}
.section {width: 100%; position: relative;}
.container {position: relative; width: 100%;} 
.inner {position: relative; width: 90%; max-width: 1280px;  margin-left: auto; margin-right: auto;}
.swiper {width: 100%;}
.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after,
.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {display: none;}

.Pretendard {font-family: 'Pretendard', sans-serif;}
.Paperlogy {font-family: 'Paperlogy', sans-serif;}
.NotoSansKR {font-family: 'Noto Sans KR', sans-serif;}

  
/*header*/
.header { position: absolute; left: 0; top: 0; width: 100%; height: 6.25rem; z-index: 100;}
.header .h_inner { height: 100%; display: flex; align-items: center; justify-content: space-between;  gap: 2rem;}
.header .h_left { flex:1;}
.header .h_left .logo { width: 14.125rem;}
.header .h_navbox { display: flex; align-items: center; gap: 1.825rem;}
.header .h_navbox > li {position: relative;}
.header .h_navbox > li .link { font-size: 0.938rem;  font-weight: 500;  line-height: 1;  color: #fff;  display: inline-block;}
.header .h_right {flex:1; display: flex; align-items: center; justify-content: flex-end; gap: 1rem;} 
.header .h_right .link { height: 2.75rem; padding: 0 1.375rem 0.125rem;  font-family: var(--paperlogy);  font-size: 1.25rem;  line-height: 1;  font-weight: 600;  color: #fff; background: linear-gradient(to top, rgb(59, 89, 152) 8%, rgb(68, 99, 165) 8%, rgb(90, 120, 182) 100%); box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.1), inset 0 2px 0 0 rgba(255, 255, 255, 0.16); border-radius: 0.375rem;  display: flex;  align-items: center;   justify-content: center;}



/* footer */
.footer { position: relative; width: 100%; margin-top:3.125rem}
.footer::before { content: ""; position: absolute;  left: 0;  bottom: 0;  width: 100%;  height:calc(100% + 33.35rem); background: url(../img/f_bg.png) no-repeat center / cover;  z-index: -1;}
.footer .f_topbox { position: relative; border-top: 1px solid #003e42;  padding-top: 1.375rem;  display: flex;  align-items: flex-start;  justify-content: space-between;}
.footer .f_topbox .leftbox {flex: 1; display: flex; flex-direction: column;  gap: 1.875rem;}
.footer .f_topbox .leftbox .logobox { display: flex;  align-items: center;   justify-content: center; width: 14.125rem;}
.footer .f_topbox .leftbox .infobox { display: flex;  flex-direction: column;  gap: 0.625rem; padding: 0 0.75rem;}
.footer .f_topbox .leftbox .infobox .mail { font-size: 1.875rem; font-weight: 600;  line-height: 1;  color: #000000;}
.footer .f_topbox .leftbox .infobox .contact { font-size: 1rem; line-height: 1.5;  color: #000000;}
.footer .f_topbox .rightbox { display: flex;  align-items: center;  gap: 2.25rem;  padding-top: 0.625rem;}
.footer .f_topbox .rightbox .link { font-size: 1rem; color: #003e42; display: inline-block;}
.footer .f_topbox .rightbox .link.bold {  font-weight: 700;}
.footer .f_topbox .f_snsbox { position: absolute; right: 0;  bottom: 1.5rem;  display: flex;  align-items: center; gap: 1.25rem;}
.footer .f_topbox .f_snsbox .link { width: 1.875rem; display: flex; align-items: center; justify-content: center;}
.footer .f_copyright { font-size: 0.875rem; color: #000000;  border-top: 1px solid rgba(0, 62, 66,0.2);  padding: 1rem 0.75rem 1.25rem;  margin-top: 1.5rem;}
.footer .f_copyright .bold {font-weight: 600;}


/* marquee */
.marquee {position: relative;display: flex; gap: var(--gap); pointer-events: none; }
.marquee_group {flex-shrink: 0;display: flex; align-items: center; min-width: 100%;gap: var(--gap);}


/* main */
.ms3, .ms4, .ms6 {  padding-top: 5rem;  margin-top: -5rem;}

.m_titbox { display: flex; flex-direction: column;  align-items: center;  text-align: center;  gap: 2.5rem;}
.m_txt1 { font-size: 1.5rem; font-weight: 700;  line-height: 1.25; color: #000000;}
.m_txt2 { font-family: var(--paperlogy); font-size: 3.125rem; font-weight: 200;  color: #000;}
.m_txt2 .bold { font-weight: 700;}
.m_txt3 {font-size: 1.375rem; line-height: 1.45; color: #000000; word-break: keep-all;}

.ms1 { padding-top: 9.625rem; min-height: 37.5rem;}
.ms1 .vidbox {  position: absolute;  left: 0;  top: 0;  width: 100%;  height: 37.5rem;   display: flex;  align-items: center;  justify-content: center;}
.ms1 .vidbox .video {width: 100%; height: 100%; object-fit: cover;}
.ms1 .contbox { display: flex; flex-direction: column; align-items: center; }
.ms1 .contbox .top_label { font-family: var(--paperlogy);  font-size: 1.375rem;  color: #fff;  background: #007b82;  padding: 0.375rem 1.875rem; border-radius: 10rem; margin-bottom: 2.75rem;}
.ms1 .contbox .top_label .bold { font-weight: 700;}
.ms1 .contbox .swiper_box {position: relative; width: 100%;}
.ms1 .contbox .swiper_box .ms1_swiper{width: 100%;}
.ms1 .contbox .swiper_box .ms1_swiper .item {  font-family: var(--paperlogy);  font-size: 4.375rem;  font-weight: 200;  color: #ffffff;  line-height: 1.2;  text-align: center;}
.ms1 .contbox .swiper_box .ms1_swiper .item .bold {font-weight: 700;}
.ms1 .contbox .swiper_box .prev_btn, 
.ms1 .contbox .swiper_box .next_btn { background: no-repeat center / contain;  width: 2rem; height: unset; aspect-ratio: 32 / 60; margin: 0; top: 50%; transform: translateY(-50%);}
.ms1 .contbox .swiper_box .prev_btn {background-image:url(../img/ms1_prev.png); left:-2rem}
.ms1 .contbox .swiper_box .next_btn {background-image:url(../img/ms1_next.png); right:-2rem}
.ms1 .contbox .ms1_pag { position: relative; top: unset;  bottom: unset;  left: unset;  display: flex;  align-items: center; justify-content: center; gap:0.375rem; margin-top: 4rem;}
.ms1 .contbox .ms1_pag .swiper-pagination-bullet {background:#fff; opacity:0.5; transition: var(--transition); margin:0;  width: 0.375rem; height: unset; aspect-ratio: 1 / 1;}
.ms1 .contbox .ms1_pag .swiper-pagination-bullet-active {background: var(--mainColor); opacity: 1;}

.ms2 {margin-bottom: 9.375rem;}
.ms2 > .inner{overflow: hidden;}
.ms2::before { content: ""; background: url(../img/ms2_bg.png) no-repeat center / cover;  position: absolute;  left: 0;  top: 9rem;  width: 100%; height: calc(100% - 9rem);}
.ms2::after {  background: url(../img/ms2_clouds.png) no-repeat center / contain;   content: "";  position: absolute; left: 50%; bottom: -0.313rem; transform: translateX(-50%); width: 100%; aspect-ratio: 1920 / 240;}
.ms2 .ctabox {width: 100%; display: flex; align-items: center; justify-content: center; margin-top: -9rem; margin-bottom:9.375rem}
.ms2 .m_titbox { margin-bottom: 2.125rem;}
.ms2 .contbox {display: flex; align-items: flex-start;}
.ms2 .contbox .txtbox {  width: 28%;  max-width: 21.875rem;  padding-top: 9rem;  padding-right: 0.625rem;}
.ms2 .contbox .txtbox .m_txt3 { color: #0d3335;  text-align: right;  word-break: keep-all;}
.ms2 .contbox .txtbox .m_txt3 .bold { font-weight: 700;}
.ms2 .contbox .imgbox {  flex: 1;  max-width: 48.5rem;   margin-left: -14%;  display: flex;  align-items: center;  justify-content: center;  margin-top: -0.5rem;}
.ms2 .contbox .circlrbox { width: 26%; position: relative;  margin-top: 12rem; padding-left: 1rem;}
.ms2 .contbox .circlrbox .line { position: absolute;  right: calc(100% - 1.875rem);   top: 74%;  transform: translateY(-50%);  width: 10.313rem;  z-index: 10;}
.ms2 .contbox .circlrbox .circle {  position: relative;  width: 14.5rem;  aspect-ratio: 1 / 1;  display: flex;  flex-direction: column;  align-items: center;  justify-content: center;  gap: 0.625rem;  background: #fff;  border-radius: 50%;  text-align: center;}
.ms2 .contbox .circlrbox .circle::before { content: "";  position: absolute;  left: 50%;  top: 50%;  transform: translate(-50%, -50%);  width: calc(100% + 1.5rem);  aspect-ratio: 1 / 1;  background: #fff;  opacity: 0.2;  border-radius: 50%;}
.ms2 .contbox .circlrbox .circle .tit { position: relative;  font-size: 1.875rem;  font-weight: 700;  color: #0d3335;}
.ms2 .contbox .circlrbox .circle .m_txt3 { color: #0d3335;}

.ms3 {margin-bottom:16.5rem}
.ms3 .m_titbox {margin-bottom: 5rem;}
.ms3 .contbox { display: flex; align-items: center; gap: 2.5rem;justify-content: center;}
.ms3 .contbox .imgbox { width: 50%;max-width: 58.75rem; display:flex; align-items: center; justify-content: center;}
.ms3 .contbox .imgbox .img {width: 100%; height:100%; object-fit: cover;}
.ms3 .contbox .txtbox { flex: 1;  max-width: 38.75rem;}
.ms3 .contbox .txtbox .m_txt3 {color:#465568}

.ms4 {margin-bottom:15rem}
.ms4 .m_titbox {margin-bottom: 7.1255rem;}
.ms4 .contbox {display: flex; align-items: flex-start; justify-content: center; gap:6rem }
.ms4 .contbox .item { flex: 1; display: flex;  flex-direction: column;  align-items: center;  gap: 1.5rem;  text-align: center;  max-width: 20rem;}
.ms4 .contbox .item .iconbox { width: 10.625rem;  display: flex;  align-items: center;  justify-content: center;}
.ms4 .contbox .item .txtbox { display: flex;  flex-direction: column;  gap: 1.5rem;}
.ms4 .contbox .item .txtbox .tit { font-size: 1.625rem; line-height: 1.25;  color: #465568;}
.ms4 .contbox .item .txtbox .desc {font-size:1rem; line-height: 1.5; color:#919aa5; word-break: keep-all;}

.ms5 {background: url(../img/ms5_bg.png) no-repeat center / cover; margin-bottom: 16.875rem;}
.ms5 .swiper_box { position: relative;}
.ms5 .swiper_box .ms5_swiper {width:100%; }
.ms5 .swiper_box .ms5_swiper .item { display: flex;  align-items: center;}
.ms5 .swiper_box .ms5_swiper .item .txtbox { width: 50%; padding: 0 2.25rem 0 5rem;  display: flex; flex-direction: column; gap: 2rem; z-index: 5;}
.ms5 .swiper_box .ms5_swiper .item .txtbox .m_txt3 {min-height: 5.8em;}
.ms5 .swiper_box .ms5_swiper .item .imgbox { flex: 1;  max-width: 60rem;  display: flex;   align-items: center;  justify-content: center; margin-left: -25%;}
.ms5 .swiper_box .prev_btn, 
.ms5 .swiper_box .next_btn { background: no-repeat center / contain;  width: 2rem; height: unset; aspect-ratio: 32 / 60; margin: 0; top: 50%; transform: translateY(-50%);}
.ms5 .swiper_box .prev_btn {background-image:url(../img/ms5_prev.png); left:-2rem}
.ms5 .swiper_box .next_btn {background-image:url(../img/ms5_next.png); right:-2rem}
.ms5 .ms5_pag { bottom:1.875rem; display: flex;  align-items: center; justify-content: center; gap:0.375rem;  }
.ms5 .ms5_pag .swiper-pagination-bullet {background: #000; opacity:0.2; transition: var(--transition); margin:0;width: 0.375rem; height: unset; aspect-ratio: 1 / 1;}
.ms5 .ms5_pag .swiper-pagination-bullet-active {opacity: 1;}

.ms6 {margin-bottom:11.25rem}
.ms6 .m_titbox {margin-bottom: 3rem;}
.ms6 .m_titbox .m_txt3 {color:#465568}
.ms6 .contbox {display: flex; flex-direction: column; gap: 3.75rem;}
.ms6 .contbox .item { display: flex; align-items: center; gap: 2.5rem;}
.ms6 .contbox .item .txtbox { width: 50%; display: flex; flex-direction: column;  text-align: right;}
.ms6 .contbox .item .txtbox .topbox { display: flex; align-items: center;  justify-content: flex-end;  gap: 0.625rem;  margin-bottom: 1.5rem;}
.ms6 .contbox .item .txtbox .topbox .info {  flex: 1;  display: flex;  flex-direction: column;  gap: 0.375rem;}
.ms6 .contbox .item .txtbox .topbox .info .tit { font-size: 0.938rem;  color: #000;}
.ms6 .contbox .item .txtbox .topbox .info .tit .bold { font-weight: 600;}
.ms6 .contbox .item .txtbox .topbox .info .desc {font-size:0.813rem; color:#465568;}
.ms6 .contbox .item .txtbox .topbox .thumb { width: 3.375rem; display: flex;  align-items: center;  justify-content: center;}
.ms6 .contbox .item .txtbox .topbox .thumb .img {width: 100%; height: 100%; object-fit: cover;}
.ms6 .contbox .item .txtbox .titbox { display: flex; flex-direction: column; align-items: flex-end;  gap: 1.25rem;}
.ms6 .contbox .item .txtbox .titbox .tit { font-size: 1.625rem; font-weight: 600;  color: #000;}
.ms6 .contbox .item .txtbox .titbox .desc { font-size: 1rem;  line-height: 1.5;  color: #465568;  word-break: keep-all; max-width: 28.125rem;}
.ms6 .contbox .item .txtbox .badgebox {  margin-top: 3.75rem;  display: flex;  align-items: center;  justify-content: flex-end;  flex-wrap: wrap;  gap: 0.25rem 0.438rem;}
.ms6 .contbox .item .txtbox .badgebox .badge { font-size: 0.875rem;  font-weight: 600;   color: #465568;  padding: 0.125rem 0.5rem;   border: 1px solid #b7c2cc;  border-radius: 10rem;   display: inline-flex;  align-items: center;  justify-content: center;}
.ms6 .contbox .item .vidbox { width: 50%;  aspect-ratio: 620 / 349;  border-radius: 1.25rem;  overflow: hidden;}
.ms6 .contbox .item .vidbox .video {width: 100%; height: 100%; object-fit: cover;}
.ms6 .contbox .item:nth-child(even) { flex-direction: row-reverse;}
.ms6 .contbox .item:nth-child(even) .txtbox { text-align: left;}
.ms6 .contbox .item:nth-child(even) .topbox { flex-direction: row-reverse;}
.ms6 .contbox .item:nth-child(even) .txtbox .titbox {align-items: flex-start;}
.ms6 .contbox .item:nth-child(even) .txtbox .badgebox {justify-content: flex-start;}

.ms7 .top_imgbox { width: 100%; display: flex; align-items: center; justify-content: center; margin-bottom: -2rem;}
.ms7 .m_titbox { gap: 1.625rem;}
.ms7 .m_titbox .m_txt3 {max-width:61.5rem;}
.ms7 .m_titbox .btn { width: 15rem;  height: 3.625rem;  padding-bottom: 0.125rem;  font-family: var(--paperlogy);  font-size: 1.375rem;  line-height: 1;  font-weight: 700;  color: #fff;  background: linear-gradient(to top, rgb(59, 89, 152) 8%, rgb(68, 99, 165) 8%, rgb(90, 120, 182) 100%);  box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.1), inset 0 2px 0 0 rgba(255, 255, 255, 0.16);  border-radius: 0.375rem;  display: flex;   align-items: center;  justify-content: center; margin-top: 1rem;}