:root {
    --mainColor: #425468;
}


.material-symbols-outlined {
    font-variation-settings:
            'FILL' 1,
            'wght' 200,
            'GRAD' 0,
            'opsz' 20
}

.wrap {
    width: 100%;
    max-width: 1400px;
    padding: 0 20px;
    margin: 0 auto;
    position: relative;
}

.flexSb {
    display: flex;
    justify-content: space-between;
}

.flex {
    display: flex;
}

.secBg {
    overflow: hidden;
    position: relative;
    padding-bottom: 56.25%;
}

.secBg iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
}

.tt span {
    display: block;
    font-size: 19px;
    color: #898989;
    font-weight: bold;
    margin-bottom: 22px;
}

.tt h3 {
    font-size: 66px;
    margin-bottom: 40px;
}

.tt p {
    font-size: 20px;
    line-height: 1.8;
    color: #6f6f6f;
    word-break: keep-all;
    white-space: pre-line;
}
.color {
    color: var(--mainColor);
}
.poppins {
    font-family: "Poppins", serif;
}

/* header */

:root {
    --mainColor: #425468;
}

/* 헤더 */
header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100px;
    padding: 0 100px;
    transition: transform 0.3s ease;
    /* 배경 투명도 필요시 아래 주석 해제 */
    /* background: rgba(51, 51, 51, 0.6); */
}

/*header.bk .gnb a,
header.bk #bar span {
    color: #000;
    background: #000;
}*/







/* 스크롤 아래로 내리면 header 숨기기 */
header.visible-hidden {
  transform: translateY(-120%);
  transition: transform 0.3s ease;
}

/* 스크롤 위로 올리면 header 보이기 */
header.visible {
  transform: translateY(0);
  transition: transform 0.3s ease;
}





/* GNB - 데스크탑 메뉴 */
nav .gnb {
    list-style: none;
    display: flex;
    align-items: center;
  
}
nav .gnb > li {
    position: relative;
    margin-right: 20px;
}
nav .gnb > li > a {
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    padding: 0 40px;
	    text-align: center;

}
nav .gnb li:hover > a {
    color: #ffe471;
}
nav .gnb li.active > a {
    color: #ef28c1;
}

/* 2차 메뉴 */
nav .gnb li .sub-menu,
header .snb {
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    background: #fff;
    backdrop-filter: blur(10px);
    z-index: 10;
    display: none;
    border-radius: 20px;
}
nav .gnb li:hover > .sub-menu,
header .snb.active,
nav .gnb li.active .sub-menu {
    display: block;
}
nav .gnb li .sub-menu li,
header .depth02 > li {
    padding:7px 15px;
}
nav .gnb li .sub-menu li a,
header .depth02 > li > a {
    font-size: 15px;
    color: #333;
    font-weight: 800;
    display: block;
		    text-align: center;
}
nav .gnb li .sub-menu li:hover > a,
header .snb li:hover > a {
    color: #ef28c1;
}

/* 3차 메뉴 */
nav .gnb li .sub-menu li .sub-menu {
    display: none;
    position: absolute;
    top: 0;
    left: 100%;
    background: #f7f7f7;
    padding: 10px 0;
    list-style: none;
    min-width: 150px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
nav .gnb li .sub-menu li:hover > .sub-menu {
    display: block;
}

/* header 우측 영역 */
.header_right {
    display: flex;
    gap: 45px;
    align-items: center;
}
.header_right ul {
    display: flex;
    align-items: center;
    gap: 20px;
    list-style: none;
}
.header_right ul li img {
    display: block;
    max-height: 24px;
}

/* 햄버거 메뉴 (모바일용) */
#bar {
    display: none;
    width: 26px;
    height: 16px;
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
}
#bar span {
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: #fff;
    transition: 0.5s;
}
#bar span:nth-child(1) { top: 0; }
#bar span:nth-child(2) { top: 50%; width: 80%; transform: translateY(-50%); }
#bar span:nth-child(3) { top: 14px; }

@media (min-width: 768px) {
    #bar { display: none; }
}


/* TOP 버튼 */
#top {
    height: 60px;
    width: 60px;
    background: #525252;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transition: 0.3s;
}
#top:hover {
    background: #bad8dd;
    color: #000;
}
#top span {
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20;
}

/* main */

#sec01.section {
    position: relative;
    height: 100vh;
    overflow: hidden;
}
.main_swiper .swiper-slide {
    height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
}
.main_swiper .swiper-slide .img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.main_swiper .swiper-slide .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.1);
    transition: 3s;
}

.main_swiper .swiper-slide .txt {
    width: 100%;
    padding-bottom: 140px;
}
.main_swiper .swiper-slide .txt p {
    margin-top: 30px;
    font-size:26px;
    color: #fff;
}
.main_swiper .swiper-slide.swiper-slide-active img {
    transform: scale(1);
}
.main_swiper .swiper-slide.swiper-slide-active .txt h2 {
    opacity: 1;
    transform: translateY(0px);
}
.swiper-btm {
    position: absolute;
    top: calc(50% + 140px);
    transform: translateY(-50%);
    left: 0;
    width: 100%;
    z-index: 2;
}
.swiper-btm .flex {
    align-items: center;
    gap:20px;
    width: 250px;
}
.swiper-btm .flex > * {
    position: static !important
}
.swiper-button-next:after, .swiper-button-prev:after {
    display: none;
}
.swiper-btm .swiper-button-next, .swiper-btm .swiper-button-prev {
    color: #fff;
    width: auto;
    height: auto;
    margin: 0;
}

.swiper-btm .playBtn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    position: relative !important;
    display: flex;
    align-items: center;
    justify-content: center;
    outline:1px solid rgba(255,255,255,0.2);
}
.autoplay-progress svg {
    --progress: 0;
    position: absolute;
    left: 0;
    top: 0px;
    z-index: 10;
    width: 100%;
    height: 100%;
    stroke-width: 2px;
    stroke: #fff;
    fill: none;
    stroke-dashoffset: calc(125.6px * (1 - var(--progress)));
    stroke-dasharray: 125.6;
    transform: rotate(-90deg);
}
.playBtn span {
    color: #fff;
    display: block;
}
.playBtn.pause .play {
    display: block;
}
.playBtn .play {
    display: none;
}
.playBtn.pause .pause {
    display: none;
}
.swiper-btm .swiper-pagination-fraction {
    width: auto;
    color: #fff;
}
.swiper-btm .swiper-pagination-total {
    opacity: 0.5;
}
.scroll {
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 10px;
    font-size: 20px;
    color: #fff;
}
.scroll span {
    width: 30px;
    height: 50px;
    border:2px solid #fff;
    position: relative;

    border-radius: 50px;
}
.scroll span:after {
    content: '';
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #fff;
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    animation:scrolling 1s infinite alternate;
}

@keyframes scrolling {
    0% {
        top: 12px;
    }
    100% {
        top: 32px;
    }
}


/*#sec02 {
    overflow: hidden;
    background: url("../img/main/sec02_bg.jpg") no-repeat center center / cover;
}
#sec02 .flex {
    justify-content: space-between;
} */
#sec02 h4 {
    margin: 70px 0 40px;
    letter-spacing: -0.07em;
    font-size:46px;
    font-weight: 600;
    white-space: pre-line;
}
#sec02 h4 b {
    font-weight: 800;
}
#sec02 .txt a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 273px;
    height: 72px;
    border-radius: 36px;
    border: 2px solid #000;
    font-size: 20px;
    color: #000;
    font-weight: 800;
    gap:15px;
}



#sec03 {
    overflow: hidden;
    background: url("../img/main/sec03_bg.jpg") no-repeat center center / cover;
}
#sec03 .tt {
    display: flex;
    align-items: center;
    gap:75px;
    color: #fff;
    margin-bottom: 97px;
}
#sec03 .tt h3 {
    margin-bottom: 0;
}
#sec03 .tt p {
    color: #fff;
}
#sec03 .sec03_swiper .swiper-slide {
    width: 324px;
}
#sec03 .swiper-pagination {
    bottom: -40px;
}
#sec03 .swiper-pagination-clickable .swiper-pagination-bullet {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border:1px solid #fff;
    opacity: 1;
    background: transparent;
}
#sec03 .swiper-pagination-clickable .swiper-pagination-bullet.swiper-pagination-bullet-active {
    width: 34px;
    background: #fff;
    border-radius: 20px;
}

.sec_tt {
    display: flex;
    align-items: end;
    justify-content: space-between;
}
.sec_tt h3 {
    margin-bottom: 35px;
}
.sec_tt a img{
    margin-left: 10px;
    transition: 0.5s;
}
.sec_tt a:hover img{
    margin-left: 20px;
}
#sec04 ul {
    margin-top: 70px;
    border-bottom: 1px solid #ddd;
}
#sec04 ul li {
    border-top: 1px solid #ddd;
}
#sec04 ul li a {
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size:20px;
    font-weight: 500;
}
#sec04 ul li a .date {
    color: #8f8f8f;
}
 #sec04 ul li:hover a .ellipsis {
     color: #ef28c1;
 }

#sec05 {
    overflow: hidden;
    background: url("../img/main/sec05_bg.jpg") no-repeat center center / cover;
    position: relative;
}
#sec05 .flex {
    justify-content: space-between;
}
#sec05 .flex > div {
    flex: 1;
}
#sec05 .tt {
    margin-top: 85px;
}
#sec05 .tt span , #sec05 .tt p {
    color: #bababa;
}
#sec05 .tt h3 {
    margin-bottom: 35px;
    color: #fff;
}
#sec05 .con {
    padding: 70px;
    background: rgba(255,255,255,0.6);
}
#sec05 input[type="text"] , #sec05 textarea {
    height: 60px;
    background-color: #eee;
    padding: 15px 25px;
    border:0;
    width: 100%;
    display: block;
    margin-bottom: 10px;
    font-size: 18px;
}
.term_scroll {
    font-size: 16px;
    overflow-y: auto;
    height: 120px;
    padding: 15px 25px;
    background-color: #eee;
    color: #8f8f8f;
    white-space: pre-line;
}
#sec05 textarea {
    height: 120px;
    resize: none;
}
.term_chk {
    text-align: right;
    margin-bottom: 20px;
    margin-top: 10px;
    font-weight: 600;
}
.form_btn {
    display: flex;
    gap:25px
}
.form_btn button {
    flex: 1;
    height: 60px;
    font-size: 18px;
    letter-spacing: -1px;
    color: #fff;
    font-weight: 600;
    border: 1px solid #000;
    background: #000;
    transition: 0.5s;
}
.form_btn button[type="reset"] {
    color: #000;
    background: transparent;
}
.form_btn button:hover {
    background: #ffe471;
    color: #ef28c1;
    border-color: transparent;
}

.fp-tableCell {
    display: flex;
    flex-direction: column;
    justify-content: center;
}



.marquee {
    background: rgba(0,0,0,0.78);
    height: 136px;
    display: flex;
    align-items: center;
    gap:75px;
    position: relative;
    left: 0;
    bottom: 0;
    z-index: 2;
}
.marquee > div {
    display: flex;
    align-items: center;
    gap:75px;
}
.marquee ul {
    display: flex;
    align-items: center;
    gap:75px;
}
.marquee li {
    width: 188px;
}


/*sub top*/

.subTop {
    height: 300px;
    background-image: url(../img/sub_topimg01.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    margin-bottom: 140px;
}
.subTop .wrap h2 {
    font-size: 72px;
    font-weight: 600;
    color: #fff;
    padding-top: 86px;
}

/* 서브메뉴 */

.navSub {
    padding: 0;
}
.navSub ul {
    width: 100%;
    padding: 30px 0 140px 0;
}
.navSub ul li {
    float: left;
}
.navSub ul li a {
    display: block; 
    font-weight: bold;   
    font-size: 22px;
    color: #a6a6a6;
    padding: 10px 26px;

}
.navSub ul li a:hover {
    color: #000;
    background: #ffe471;
}
.navSub ul li span.blackT {
    color: #000;
    background: #ffe471;
}

/*인사말*/

.ceo_wrap {
    width: 100%;
}
.ceo_img {
    width: 100%;
}
.ceo_img .ceo_tit {
    display: flex;
    justify-content: space-between;
    margin: 50px 0;
}
.ceo_img .ceo_tit h4 {
    font-size: 60px;
    font-weight: 700;
    color: #000;
    line-height: 70px;
    padding: 0 0 0 30px;
    background: url(/img/color_line.png) no-repeat 0 7px;
}
.ceo_img .ceo_tit h4 .gray {
    font-size: 38px; 
    color: #959595;
    font-weight: 600;
}
.yellow {
    color: #f4cb1b;
}
.pink { 
    color: #ef28c1;
}
.skyblue {
    color: #99ced7;
}
.ceo_img .ceo_tit em {
    font-style: normal;
    color: #eeeded;
    font-size: 72px;
    line-height: 70px;
    font-weight: 700;
}
.ceo_con {
    width: 100%;
    font-size: 24px;
    padding: 90px 0 0 300px;
    line-height: 36px;
    color: #585858;
    white-space: pre-line;
}
.ceo_con span {
    color: #000;
    font-weight: bold;
    font-size: 18px;
}
.ceo_con strong {
    color: #000;
    font-weight: bold;
    font-size: 24px;
}
.ceo_con strong span.name {
    display: inline-block;
    color: #000;
    font-weight: 600;
    margin: 0 0 0 10px;
    font-size: 34px;
}
.ceo_con > .flex {
    display: flex;
    justify-content: space-between;
}
.ceo_con > .flex > .txt a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 273px;
    height: 72px;
    border-radius: 36px;
    border: 2px solid #000;
    font-size: 20px;
    color: #000;
    font-weight: 800;
    gap:15px;
    margin-bottom: 50px;
}
.mL30 {
    margin-left: 30px;
}
.mT10 {
    margin-top: 10px;
}

/* 비전과 미션 */
.vision_tit {
    text-align: center;
    margin: 0 0 80px 0;
}
.vision_tit h4 {
    font-size: 36px;
    font-weight: 800;
    line-height: 60px;
    text-align: center;
    padding: 20px 0;
}
.vision_con01 {
    text-align: center;
    height: 254px;
    background-image: url(../img/vision_img01.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 40px;
}
em {
    padding: 0 0 20px 0;
    color: #d0d0d0;
    font-style: normal;
    font-size: 18px;
}
em .large {
    font-size: 30px;
}
strong {
    color: #fff;
    font-size: 30px;
}
.vision_con02 {
    text-align: center;
    height: 254px;
    background-image: url(../img/vision_img02.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 40px;
}
.vision_con03 {
    text-align: center;
    height: 254px;
    background-image: url(../img/vision_img03.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 40px;
}
.vision_con04 {
    text-align: center;
    height: 254px;
    background-image: url(../img/vision_img04.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 140px;
}

/* 연혁 */
.histroy {
    width: 100%;
    margin-bottom: 140px;
}

/* 조직도 */
.organ h3 {
    font-size: 40px;
    font-weight: 700;
    color: #000;
    margin-bottom: 56px;
}
.organ_con {
    
}
.phone {
    display: flex;
    margin: 100px 0;
}
.phone h3 {
    font-size: 40px;
    font-weight: 700;
    color: #000;
    margin: 0 0 56px 70px;
}
.phone_img {
    width: 50%;
    height: 372px;
    background-image: url(../img/organ_img01.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.phone_txt {
    box-sizing: border-box;
    padding: 60px 50px;
    width: 50%;
    height: 372px;
    background-image: url(../img/organ_img02.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    line-height: 45px;
    position: relative;
}
.phone_txt img {
    position: absolute;
    display: block;
    top: 56px;
    left: 50px;
}
.phone_txt p {
    font-size: 20px;
}
.phone_txt p .tell {
    font-size: 24px;
    font-weight: 800;
}
.mL80 {
    margin-left: 80px;
}
.mL40 {
    margin-left: 49px;
}


/* 인증 및 수상 */
.certify {
  display: block;
}
.certify_m {
  display: none;
}
.certify h3 {
  font-size: 40px;
  font-weight: 700;
  color: #000;
  margin-bottom: 56px;
}
.license {
  display: flex;
}
.license .license_con {
  margin-right: 23px;
  margin-bottom: 50px;
}
.license .license_con:last-child {
  margin-right: 0;
}
.license .license_con img {
  border: 1px solid #d0d0d0;
}
.license .license_con p {
  font-size: 18px;
  margin: 20px 0 0 0;
  white-space: pre-line;
  text-align: center;
}
.license .license_con p.white {
  font-size: 18px;
  margin: 20px 0 0 0;
  white-space: pre-line;
  text-align: left;
  color: #fff;
}
.award {
  display: block;
  padding: 80px;
  background-image: url(../img/license_bg.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin: 50px 0 0 0;
}
.award_m {
  display: none;
}
.award h3 {
  font-size: 40px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 56px;
}

/* 클라이언트 */
.client {
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.client h4 {
    text-align: center;
    margin: 70px 0 50px;
    letter-spacing: -0.02em;
    font-size:48px;
    font-weight: 600;
    white-space: pre-line;
}
.client > .txt a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 273px;
    height: 72px;
    border-radius: 36px;
    border: 2px solid #000;
    font-size: 20px;
    color: #000;
    font-weight: 800;
    gap:15px;
    margin-bottom: 100px;
}

/* 주요사업 */
.merit {
  width: 100%;
  padding: 100px 0;
}
.merit .merit_con {
  display: flex;
  justify-content: space-between;
  align-content: center;
  width: 100%;
}










.merit .merit_con .sImg01 {
  width: 50%;

  padding: 50px 0;
}
.merit .merit_con .sImg02 {
  width: 50%;

  padding: 50px 0;
}
.merit .merit_con .sImg03 {
  width: 50%;

  padding: 50px 0;
}
.merit .merit_con .sImg04 {
  width: 50%;

  padding: 50px 0;
}
.merit .merit_con .sImg05 {
  width: 50%;

  padding: 50px 0;
}
.merit .merit_con .sImg06 {
  width: 50%;

  padding: 50px 0;
}






.merit .merit_con .sTxt {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.merit .merit_con .sTxt h4 {
  font-size: 40px;
  font-weight: bold;
  margin-bottom: 6px;
}
.merit .merit_con .sTxt em {
  font-size: 18px;
  font-weight: bold;
  color: #7b7b7b;
}
.merit .merit_con .sTxt p {
  font-size: 20px;
 /*  margin-top: 20px;*/
  line-height: 30px;
  color: #585858;
  white-space: pre-line;
}
.mL80 {
  margin-left: 80px;
}
.mR80 {
  margin-right: 80px;
}
.m_merit {
  display: none;
}
.mT140 {
  margin-top: 100px;
}


/* footer*/

footer {
    font-size: 17px;
    color: #a4a4a4;
    background: #000;
}
footer .term {
    display: flex;
    align-items: center;
    gap:20px
}
footer .flexSb {
    align-items: center;
    height: 75px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
}
footer .flexSb a {
    font-size: 17px;
    color: #a4a4a4;
}
.fnb {
    padding: 35px 0 75px;
}
.fnb p {
    margin-top: 20px;
}

.fp-auto-height  , .fp-auto-height .fp-tableCell{height: auto !important;}



.swiper-wrapper {gap:10px  !important;}