/* 팝업 */
.pop-parent { transition: all .2s;}
.pop-parent .m-ratioBox-wrap {width:100%; padding-top:100%; position:relative; overflow:hidden;}
.pop-parent .m-ratioBox-wrap .m-ratioBox {position:absolute; top:0; left:0; right:0; bottom:0; background-size:cover; background-position:center;}
.pop-parent .m-ratioBox-wrap img {display:block; width:100%; height: 100%; object-fit: cover; position:absolute; left:50%; top:50%; transform:translateY(-50%) translateX(-50%); z-index:1;}
.pop-parent .m-ratioBox-wrap iframe {width:105%; position:absolute; left:50%; top:50%; transform:translateY(-50%) translateX(-50%); z-index:1;}

.pop-parent .swiper { overflow:hidden;}
.pop-parent .swiper-container { overflow:visible;}
.pop-parent .swiper-pagination { display:flex;}
.pop-parent .pop {width:calc( 100vw - 32px ); max-width: 500px; position:relative;}
.pop-parent .pop .btn-toggle {width:40px; height:40px; position:relative; background-color:black; cursor:pointer; display: none; }
.pop-parent .pop .btn-toggle img { width:auto; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%) rotate(-90deg); transition:all .3s;}
.pop-parent .pop-btns {display:flex; position:absolute; top: 0; left: 0; width: 100%; opacity:1; transform: translateY(-100%); justify-content: space-between; z-index: 1; height: 36px; }
.pop-parent .pop-btns a {color: #fff; padding: 7px 14px;}
.pop-parent .pop-btns #oneday_check {position: absolute; clip: rect(0,0,0,0);}
.pop-parent .pop-btns #oneday_check + label {display:flex; align-items:center; padding:0 10px; font-size:14px; color:#fff; cursor:pointer;}
.pop-parent .pop-btns #oneday_check + label .icon { display:inline-block; width:16px; height:16px; margin-right:10px;  border:1px solid #fff; font-size: 12px; text-align: center; line-height: 14px; color: transparent; }
.pop-parent .pop-btns #oneday_check:checked + label .icon { background: #fff; color: #222; }

.pop-parent .pop .swiper-btn-control {width:8px; height:11px; margin-left:16px; position:relative; top:2px;}
.pop-parent .swiper-control {display:flex; align-items:center; position:absolute; top:21px; right:20px; z-index:2;}
.pop-parent .swiper-control .swiper-pagination {position:static;}
.pop-parent .swiper-pagination-bullet {flex:0 0 auto; width:10px; height:10px; margin:0 5px; border-radius:0; border:1px solid white; opacity:0.5; background-color:transparent;}
.pop-parent .swiper-pagination-bullet-active {background-color:#fff; opacity:1;}
.pop-parent.active {right:-400px;}
.pop-parent.active .btn-toggle {transform:rotate(180deg);}

.pop-parent .pop .btn-close { display: block; width:40px; height:40px; position:absolute; background-color:black; top: 36px; right: 0; font-size: 16px; }

.popup-container { display: flex; position: fixed; top: 50%; right: unset; left: 50%; transform: translate(-50%, -50%);  z-index: 9999999; justify-content: center; gap: 40px; }

@media screen and (max-width: 1680px) {
  .pop-parent .pop { max-width: 400px; }
}
@media screen and (max-width: 860px) {
  .popup-container { display: block; width: calc( 100vw - 32px ); max-width: 400px; transform: translateX(-50%); top: 80px; }
  .popup-container .pop-parent { position: absolute; top: 0; left: 0; right: 0; }
}

/*///////////////////////// 공통 css /////////////////////////*/
/* modal */
.modal-container { position: fixed; top: 0; right: 0; left: 0; bottom: 0; z-index: 99999; background: rgba(0, 0, 0, 0.8); display: none; }
.modal-wrap { width: calc( 100% - 32px ); background-color: #fff; max-width: 720px; border-radius: 16px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 40px 24px; }
.close-btn { position: absolute; font-size: 32px; cursor: pointer; top: 24px; right: 24px; z-index: 9; }
.modal-title-wrap { margin-bottom: 32px }
.modal-title { font-size: 32px; font-weight: bold; line-height: 1.2; }
.modal-scroll-wrap { max-height: 60svh; overflow: auto; }
.modal-txt { font-size: 18px; line-height: 1.5; text-align: center; }

.modal-alert { max-width: 600px; padding: 80px 64px; }
.modal-alert .icon { font-size: 48px; color: #48c50d; display: block; margin-bottom: 32px; }
.modal-alert .modal-title-wrap { text-align: center; }
.modal-alert .modal-btn { width: 100%; line-height: 64px; text-align: center; border-radius: 8px; background: #000; color: #fff; font-size: 18px; font-weight: bold; margin-top: 32px; }

@media screen and (max-width:1280px) {
  .modal-title-wrap { margin-bottom: 24px }
  .modal-title { font-size: 24px; }
  .modal-txt { font-size: 15px; }

  .modal-alert { padding: 40px 32px; }
  .modal-alert .icon { font-size: 32px; margin-bottom: 16px; }
  .modal-alert .modal-btn { line-height: 48px; font-size: 16px; margin-top: 24px; }
}

/* login */
/* 로그인 */
.login-modal-wrap { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc( 100% - 32px ); max-width: 496px; }
.login-modal-wrap .close-btn { display: flex; gap: 4px; align-items: center; font-size: 20px; font-weight: bold; color: #fff; top: -48px; right: 0; }
.login-form-container { display: flex; flex-flow: column; gap: 16px; }
.login-form-wrap { background-color: #fff; padding: 40px 48px; border-radius: 32px; box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.08);display: flex; flex-flow: column; gap: 32px;}
.login-label-wrap { display: flex; height: 64px; align-items: center; border-radius: 16px; background-color: #f5f5f5; padding: 4px; position: relative; z-index: 0; }
.login-label-item { width: 100%; height: 100%; font-size: 20px; font-weight: bold; color: #aeaeae; text-align: center; border-radius: 16px; }
.login-label-item.active { color: #14329f; }
.login-switch-bg { position: absolute; top: 0; left: 0; width: 50%; height: 100%; background: #fff; border-radius: 16px; border: 3px solid #14329f; z-index: -1; }
.login-form-wrap .form-list { border-bottom: 1px solid #d8d8d8; }
.login-form-wrap .form-submit-btn { max-width: unset; font-size: 22px; }
.login-footer-btn-wrap { display: flex; align-items: center; gap: 32px; justify-content: center; }
.login-footer-btn { font-size: 16px; font-weight: 300; position: relative; }
.login-footer-btn:not(:last-child)::after { content: ''; display: block; position: absolute; width: 1px; height: 12px; background-color: #707070; right: -16px; top: 50%; transform: translate(-50%, -50%); }

.login-join-wrap { background-color: #fff; border-radius: 32px; display: flex; height: 80px; box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.08); padding: 0 48px; justify-content: space-between; align-items: center; }
.login-join-wrap .txt { font-size: 20px; font-weight: 300; }
.login-join-wrap .btn { font-size: 22px; font-weight: bold; text-decoration: underline; }

@media screen and (max-width:1280px) {
  .login-modal-wrap .close-btn { font-size: 14px; top: -24px; }
  .login-form-container { gap: 8px; }
  .login-form-wrap { padding: 24px; border-radius: 16px; gap: 16px;}
  .login-label-wrap { height: 40px; border-radius: 8px; }
  .login-label-item { font-size: 14px; border-radius: 8px; }
  .login-switch-bg { border-radius: 8px; border: 2px solid #14329f; }
  .login-form-wrap .form-submit-btn { font-size: 16px; }
  .login-footer-btn-wrap { gap: 24px; }
  .login-footer-btn { font-size: 12px; }
  .login-footer-btn:not(:last-child)::after { right: -12px; }

  .login-join-wrap { border-radius: 16px; height: 48px; padding: 0 24px; }
  .login-join-wrap .txt { font-size: 12px; }
  .login-join-wrap .btn { font-size: 16px; }
}

/* 회원가입 */
.join-intro-wrap { height: 100svh; display: flex; }
.join-intro-item { width: 100%; display: flex; justify-content: center; align-items: center; position: relative; }
.join-intro-item .item-bg { position: absolute; height: 100%; object-fit: cover; object-position: center; filter: grayscale(1); z-index: -1; transition: .3s; }
.join-intro-item:hover .item-bg { filter: grayscale(0); }
.join-intro-item .item-title-wrap { display: flex; align-items: center; gap: 24px; transform: translateY(-50%) translateX(72px);transition: .3s; }
.join-intro-item:hover .item-title-wrap { transform: translateY(-50%) translateX(0); }
.join-intro-item .item-title { text-align: center; font-size: 56px; line-height: 1.4; white-space: nowrap; }
.join-intro-item.personal .item-title { color: #fff; }
.join-intro-item .item-icon { width: 48px; transition: .3s; opacity: 0; }
.join-intro-item:hover .item-icon { opacity: 1; }

@media screen and (max-width:1280px) {
  .join-intro-wrap { flex-flow: column; }
  .join-intro-item { height: 50svh;}
  .join-intro-item .item-bg { filter: grayscale(0); }
  .join-intro-item .item-title-wrap { gap: 12px; transform: translateX(16px); }
  .join-intro-item:hover .item-title-wrap { transform: translateX(16px); }
  .join-intro-item .item-title { font-size: 32px; }
  .join-intro-item .item-icon { width: 24px; opacity: 1; }
}

/* 회원가입 */
.subpage-btn { font-size: 20px; font-weight: bold; display: flex; align-items: center; gap: 8px; }
.form-notice-txt { font-size: 18px; margin-bottom: 16px; }
.form-footer-wrap .checked-item .txt { font-size: 20px; }

@media screen and (max-width:1280px) {
  .subpage-btn { font-size: 14px; }
  .form-notice-txt { font-size: 14px; margin-bottom: 8px; }
  .form-footer-wrap .checked-item .txt { font-size: 14px; }
  .join .form-footer-wrap { flex-flow: column; gap: 24px; }
  .join .form-footer-wrap  .form-footer-group { width: 100%; margin: 0 auto; justify-content: center; }
}

/* 결과 페이지 */
.form-result-txt-wrap { width: 100%; max-width: 880px; padding: 32px 0; border-top: 2px solid #000; border-bottom: 1px solid #e4e4e4; margin-top: 16px; }
.form-result-txt { font-size: 24px; font-weight: 300; line-height: 2; }

@media screen and (max-width:1280px) {
  .form-result-txt-wrap { padding: 16px 0; border-top: 1px solid #000; margin-top: 16px; }
  .form-result-txt { font-size: 16px; }
}

/*//////////////////////////////////////////////////////////////////////////// 
                                index
////////////////////////////////////////////////////////////////////////////*/
#fp-nav { margin-top: 0 !important; top: 50%; transform: translateY(-50%); }
#fp-nav.left { left: clamp( 16px, 3.125vw, 60px ); }
#fp-nav ul { display: flex; flex-flow: column; gap: 40px; }
#fp-nav ul li { margin: 0; width: 8px; height: 8px; border-radius: 50%; }
#fp-nav ul li a span { position: relative; width: 100%; height: 100%; display: block; transform: none; margin: 0; background: #a2a2a2; opacity: 0.5; }
#fp-nav.inverse ul li a span { background: #fff; } 
#fp-nav ul li a span::after { content: ''; display: block; position: absolute; width: 30px; height: 30px; border: 1px solid rgba(162, 162, 162, 0.5); border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 0; transition: .2s; }
#fp-nav.inverse ul li a span::after { border-color: rgba(255, 255, 255, 0.5); }
#fp-nav ul li a.active span { width: 100%; height: 100%; margin: 0; opacity: 1; }
#fp-nav ul li a.active span::after { opacity: 1; }
#fp-nav ul li:last-child { display: none; }
#fp-nav ul li:hover a span, .fp-slidesNav ul li:hover a span { margin: 0; width: inherit; height: inherit; transform: scale(1.5); }
#fp-nav ul li:hover a.active span, .fp-slidesNav ul li:hover a.active span { transform: scale(1); }
#fp-nav ul li a.active span, .fp-slidesNav ul li a.active span, #fp-nav ul li:hover a.active span, .fp-slidesNav ul li:hover a.active span { margin: 0; width: inherit; height: inherit; }

.index .section { overflow: hidden; }

@media screen and (max-width: 1280px) {
  .fp-section, .fp-tableCell { height: auto !important; }
}

/* index - 메인 슬라이드 */
.index-slide-section { position: relative; }
.index-slide .swiper-slide { position: relative; height: 100svh; }
.index-slide .bg-img { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: center; left: 0; top: 0; right: 0; bottom: 0; z-index: -2; }
.index-slide .container { position: absolute; bottom: calc( 38svh + 75px + 40px ); left: 0; right: 0; }
.index-slide .title-wrap { display: flex; flex-flow: column; gap: 24px; }
.index-slide .title-wrap .title { font-size: clamp( 32px, 2.5vw, 48px ); font-weight: bold; line-height: 1.2; color: #fff; overflow: hidden; }
.index-slide .title-wrap .title-content { display: block; transform: translateY(100%); }
.index-slide .swiper-slide-active .title-wrap .title-content { line-height: 1.2; transform: translateY(0); transition: .5s; transition-delay: .2s; }
.index-slide .title-wrap .txt { font-size: clamp( 14px, 0.9375vw, 18px ); ; font-weight: 500; line-height: 1.67; color: #fff; overflow: hidden; }
.index-slide .title-wrap .txt-content { line-height: 1.67; display: block; transform: translateY(100%); }
.index-slide .swiper-slide-active .title-wrap .txt-content { transform: translateY(0); transition: .5s; transition-delay: .4s;}

.index-slide-section .index-search-wrap { position: absolute; bottom: 38svh; left: calc( ( 100vw - 1440px ) / 2 ); z-index: 9; }
.index-search-wrap { position: relative; }
.index-search-input { width: 520px; height: 75px; border-radius: 37.5px; background-color: #fff; padding: 0 40px; padding-right: 80px; font-size: 32px; font-weight: 500; }
.index-search-input::placeholder { color: #e4e4e4; font-weight: 300; }
.index-search-btn { font-size: 32px; color: #a2a2a2; position: absolute; right: 40px; top: 50%; transform: translateY(-50%); }

.index-slide-nav-wrap { position: absolute; bottom: 64px; left: 0; right: 0; display: flex; z-index: 1; }
.index-slide-nav-wrap .container { display: flex; align-items: flex-end; justify-content: space-between; max-width: 1632px; }
.index-slide-btn-wrap { width: 160px; display: flex; align-items: center; gap: 16px;}
.index-slide-btn { font-size: 16px; color: #fff; cursor: pointer; }
.index-slide-pagination { position: static; white-space: nowrap; }
.index-slide-pagination, .index-slide-pagination * { font-size: 16px; font-weight: 300; color: #fff; }
.index-slide-pagination .swiper-pagination-current { font-weight: bold; }
.index-slide-btn-wrap .index-slide-play { display: none; }
.index-slide-btn-wrap.paused .index-slide-pause { display: none; }
.index-slide-btn-wrap.paused .index-slide-play { display: block; }
.index-slide-nav { width: calc( 100% - 160px ); }
.index-slide-nav .swiper-slide { cursor: pointer; }
.index-slide-nav .title-wrap { display: flex; flex-flow: column; gap: 10px; }
.index-slide-nav .title { font-size: 20px; font-weight: 500; color: #fff; }
.index-slide-nav .sub-title { font-size: 13px; color: #fff; opacity: .7; }
.index-slide-nav .progress-bar { width: 100%; height: 2px; background-color: rgba(255, 255, 255, 0.5); position: relative; }
.index-slide-nav .progress-bar::after { content: ''; display: block; position: absolute; width: 0; height: 100%; background-color: #fff; }
.index-slide-nav .swiper-slide-thumb-active .progress-bar::after { animation: pagi_ani 5s ease; animation-play-state: running; }
.index-slide-nav.paused .progress-bar::after { animation-play-state: paused; }
@keyframes pagi_ani {
    0% { width: 0; }
    100% { width: 100%; }
}

@media screen and ( max-width: 1680px ) {
  .index-slide-section .index-search-wrap { left: calc( ( 100vw - 1280px ) / 2 ); }
}
@media screen and (max-width: 1440px) {
  .index-slide .container { bottom: calc( 38svh + 48px + 40px ); }
  .index-slide .title-wrap .txt { font-size: 14px; }

  .index-slide-section .index-search-wrap { left: 16px; }
  .index-search-input { width: 260px; height: 48px; border-radius: 24px; padding: 0 16px; padding-right: 48px; font-size: 16px; }
  .index-search-btn { font-size: 18px; right: 16px; }

  .index-slide-nav-wrap { bottom: 56px; }
  .index-slide-nav-wrap .container { flex-flow: wrap; gap: 24px; }
  .index-slide-pagination, .index-slide-pagination * { width: fit-content; font-size: 14px; }
  .index-slide-nav { width: 100%; }
  .index-slide-nav .title { display: none; }
  .index-slide-nav .sub-title { display: none; }
}

/* index - section2 */
.index-menu-section .container { max-width: unset; padding: 0; display: flex; flex-flow: wrap; height: 100%; }
.index-menu-slide { width: 50%; position: relative; }
.index-menu-slide .title-wrap { position: absolute; left: clamp( 16px, calc( ( 100vw - 1600px ) / 2 ), 160px ); display: flex; flex-flow: column; gap: 24px; bottom: clamp( 40px, 12svh, 120px ); z-index: 1; }
.index-menu-slide .title { font-size: clamp( 24px, 1.67vw, 32px ); font-weight: bold; line-height: 1.4; color: #fff; }
.index-menu-slide .txt { font-size: clamp( 14px, 0.9375vw, 18px ); font-weight: 500; line-height: 1.67; color: #fff; opacity: .8; }
.index-menu-slide .img { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: center; left: 0; top: 0; right: 0; bottom: 0; z-index: -2; }
.index-menu-container { width: 50%; display: flex; flex-flow: wrap; }
.index-menu-wrap { width: 50%; padding: clamp( 16px, 2.916vw, 56px ); padding-bottom: 0; }
.index-menu-wrap:nth-child(1) { background-color: #fff; padding-top: 10svh; }
.index-menu-wrap:nth-child(2) { background-color: #5ca1cf; padding-top: 10svh; }
.index-menu-wrap:nth-child(3) { background-color: #1371b1; padding-top: clamp( 16px, 2.916vw, 100px ); }
.index-menu-wrap:nth-child(4) { background-color: #0a4c78; padding-top: clamp( 16px, 2.916vw, 100px ); }
.index-menu-title { font-size: clamp( 18px, 1.25vw, 24px ); font-weight: bold; margin-bottom: 16px; }
.index-menu-wrap:not(:nth-child(1)) .index-menu-title { color: #fff; }
.index-menu-group { padding: 0 16px;}
.index-menu-item { font-size: clamp( 13px, 0.83vw, 16px ); font-weight: 500; padding: 12px 0; display: flex; align-items: center; justify-content: space-between; position: relative; line-height: 1.5; }
.index-menu-wrap:not(:nth-child(1)) .index-menu-item { color: #fff; }
.index-menu-item .icon { transition: .5s; color: #e4e4e4; }
.index-menu-item:hover .icon { color: #0a4c78; }
.index-menu-wrap:not(:nth-child(1)) .index-menu-item .icon { color: rgba(255, 255, 255, 0.5); }
.index-menu-wrap:not(:nth-child(1)) .index-menu-item:hover .icon { color: #fff; }
.index-menu-item::before { content: ''; display: block; position: absolute; width: 100%; height: 1px; bottom: 0; left: 0; background-color: #e4e4e4; }
.index-menu-wrap:not(:nth-child(1)) .index-menu-item::before { background-color: rgba(255, 255, 255, 0.5); }
.index-menu-item::after { content: ''; display: block; position: absolute; width: 0%; height: 1px; bottom: 0; left: 0; background-color: #0a4c78; transition: .5s; }
.index-menu-wrap:not(:nth-child(1)) .index-menu-item::after { background-color: #fff; }
.index-menu-item:hover::after { width: 100%; }

@media screen and (max-width:1680px) {
  .index-menu-slide .title-wrap { left: calc( ( 100vw - 1440px ) / 2 ); }
}
@media screen and (max-width: 1280px) {
  .index-menu-section .container { height: auto; flex-flow: column; }
  .index-menu-slide { width: 100%; position: relative; }
  .index-menu-slide .swiper-slide { position: relative; padding-top: 375px; }
  .index-menu-slide .title-wrap { left: 50%; transform: translateX(-50%); gap: 16px; bottom: 24px; text-align: center; width: 100%; }
  .index-menu-slide .title { font-size: 24px; }
  .index-menu-slide .txt { font-size: 14px }
  .index-menu-container { width: 100%; flex-flow: column; }
  .index-menu-wrap { width: 100%; padding: 40px 16px; }
  .index-menu-wrap:nth-child(1) { padding-top: 40px; }
  .index-menu-wrap:nth-child(2) { padding-top: 40px; }
  .index-menu-wrap:nth-child(3) { padding-top: 40px }
  .index-menu-wrap:nth-child(4) { padding-top: 40px; }
  .index-menu-title { font-size: 18px; }
  .index-menu-group { padding: 0 12px; }
  .index-menu-item { font-size: 13px; }
}

/* index - section3 */
.index-about-section { background-image: url(../images/index_about_bg.png); background-repeat: no-repeat; background-size: contain; background-position: bottom; }
.index-about-section-wrap { height: 100%; display: flex; flex-flow: column; justify-content: center; gap: clamp( 60px, 12svh, 120px ); }
.index-about-section .section-title-wrap { display: flex; flex-flow: column; gap: 16px; position: relative; }
.index-about-section .section-title-wrap .sub-title { font-size: clamp( 13px, 0.83vw, 16px ); color: #a2a2a2; }
.index-about-section .section-title-wrap .title { font-size: clamp( 24px, 1.67vw, 32px ); font-weight: bold; line-height: 1.4; }
.index-about-section .section-title-wrap .txt { margin-top: 8px; font-size: clamp( 14px, 0.9375vw, 18px ); line-height: 1.67; }
.index-about-section .index-search-container { position: absolute; right: 0; top: 40px; }
.index-search-container { display: flex; flex-flow: column; gap: 12px; align-items: flex-end; }
.index-search-keyword-wrap { display: flex; gap: 8px; }
.index-search-keyword { padding: 0 20px; line-height: 40px; white-space: nowrap; border-radius: 20px; background-color: #fcfcfc; font-size: 14px; font-weight: 500; color: #1371b1; cursor: pointer; }
.index-search-wrap.border .index-search-input { border: 2px solid #1371b1; }
.index-search-wrap.border .index-search-btn { color: #1371b1; }

.index-about-slide { width: 100%; position: relative; z-index: 1; height: clamp( 320px, 43svh, 480px ); }
.index-about-slide .title-wrap { display: flex; flex-flow: column; text-align: center; align-items: center; gap: 24px; padding: clamp( 80px, 18svh, 180px ) 0; }
.index-about-slide .title { font-size: clamp( 18px, 1.25vw, 24px ); font-weight: bold; color: #fff; }
.index-about-slide .txt { font-size: clamp( 13px, 0.83vw, 16px ); font-weight: 600; color: #fff; line-height: 1.75; }
.index-about-item { width: 240px; border-radius: 120px; overflow: hidden; position: absolute; }
.index-about-item:nth-child(2n) { transform: translateY(clamp( -60px, -12svh, -120px )); }
.index-about-slide .bg-img { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: center; left: 0; top: 0; right: 0; bottom: 0; z-index: -2; transition: .3s; }
.index-about-item:hover .bg-img { transform: scale(1.1); }

@media screen and (max-width: 1440px) {
  .index-about-section { background-size: auto 290px; }
  .index-about-section-wrap { gap: 40px; padding: 80px 0 120px; }
  .index-about-section .section-title-wrap { gap: 12px; }
  .index-about-section .section-title-wrap .sub-title { font-size: 12px; }
  .index-about-section .section-title-wrap .title { font-size: 20px; }
  .index-about-section .section-title-wrap .txt { font-size: 13px; }
  .index-about-section .index-search-container { top: 24px; }
  .index-about-section .index-search-input { height: 64px; border-radius: 32px; padding-left: 20px; }
  .index-about-section .index-search-input::placeholder { font-size: 20px; color: #a2a2a2; }
  .index-about-section .index-search-btn { font-size: 24px; }
  .index-search-keyword-wrap { flex-flow: wrap; gap: 8px; }
  .index-search-wrap.border .index-search-input { border-width: 1px; }

  .index-about-slide { height: 280px; }
  .index-about-slide .title-wrap { gap: 16px; padding: 96px 0; }
  .index-about-slide .title { font-size: 18px; }
  .index-about-slide .txt { font-size: 12px; }
  .index-about-item { width: 180px; border-radius: 90px; }
  .index-about-item:nth-child(2n) { transform: translateY(40px); }
  .index-about-slide .bg-img { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: center; left: 0; top: 0; right: 0; bottom: 0; z-index: -2; transition: .3s; }
  .index-about-item:hover .bg-img { transform: scale(1.1); }
}

@media screen and (max-width: 980px) {
  .index-about-section .index-search-container { position: static; margin-top: 28px; }
}

/* index - section4 */
.index-benefit-section { background-image: url(../images/index_benefit_bg.png); background-repeat: no-repeat; background-size: contain; background-position: center 100px; position: relative; }
.index-benefit-section::after { content: ''; display: block; position: absolute; bottom: 0; right: 0; width: 486px; height: 120px; background-image: url(../images/index_bg_txt.png); background-repeat: no-repeat; background-size: contain; background-position: center bottom -24px; }
.index-benefit-section .container { height: 100%; justify-content: center; display: flex; flex-flow: column; gap: clamp( 40px, 8svh, 80px ); }
.index-benefit-section .section-title-wrap { display: flex; flex-flow: column; text-align: center; align-items: center; gap: clamp( 16px, 3.2svh, 32px ); }
.index-benefit-section .section-title-wrap .title { font-size: clamp( 24px, 2.08vw, 40px ); font-weight: bold; }
.index-benefit-section .section-title-wrap .txt { font-size: clamp( 14px, 0.9375vw, 18px ); font-weight: 500; line-height: 1.67; color: #707070; }
.index-benefit-section .section-title-wrap .btn-wrap { display: flex; justify-content: center; gap: clamp( 18px, 1.25vw, 24px ); align-items: center; }
.index-benefit-section .section-title-wrap .btn { height: clamp( 48px, 6svh, 60px ); padding: 0 32px; border-radius: 30px; display: flex; gap: 8px; align-items: center; font-size: clamp( 14px, 0.9375vw, 18px ); font-weight: 600; box-shadow: 2px 3px 10px 0 rgba(0, 0, 0, 0.05); }
.index-benefit-section .section-title-wrap .btn.blue { background-color: #1371b1; color: #fff; }
.index-benefit-section .section-title-wrap .btn.white { background-color: #ffffff; color: #1371b1; }
.index-benefit-section .item-wrap { display: flex; }
.index-benefit-section .item { display: flex; flex-flow: column; gap: 24px; transform: translateY(-80px); opacity: 0; transition-duration: .5s; }
.index-benefit-section .item:nth-child(1) { transition-delay: .3s; }
.index-benefit-section .item:nth-child(2) { transition-delay: .5s; }
.index-benefit-section .item:nth-child(3) { transition-delay: .7s; }
.index-benefit-section .item:nth-child(4) { transition-delay: .9s; }
.index-benefit-section.active .item { transform: translateY(0); opacity: 1; }
.index-benefit-section .item:nth-child(1) .color { color: #79bdeb; }
.index-benefit-section .item:nth-child(2) .color { color: #5ca1cf; }
.index-benefit-section .item:nth-child(3) .color { color: #1371b1; }
.index-benefit-section .item:nth-child(4) .color { color: #0a4c78; }
.index-benefit-section .item-txt-wrap { display: flex; flex-flow: column; align-items: center; text-align: center; gap: clamp( 12px, 2.4svh, 24px ); }
.index-benefit-section .item-title { font-size: clamp( 18px, 1.25vw, 24px ); font-weight: bold; }
.index-benefit-section .item-txt { font-size: clamp( 13px, 0.83vw, 16px ); font-weight: 500; line-height: 1.75; color: #707070; }
.index-benefit-section .item-img-wrap { position: relative; padding-bottom: 40px; }
.index-benefit-section .item-icon { width: 80px; height: 80px; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); }

@media screen and ( max-width: 1680px ) {
  .index-benefit-section .container { max-width: 1200px; }
  .index-benefit-section .item-img-wrap { padding-bottom: 28px; }
  .index-benefit-section .item-icon { width: 56px; height: 56px; }
}
@media screen and ( max-width: 1280px ) {
  .index-benefit-section { background-size: auto 150px; background-position: center top; padding: 80px 0; }
  .index-benefit-section::after { width: 335px; height: 70px; background-position: right bottom -16px; }
  .index-benefit-section .container { height: auto; justify-content: flex-start; gap: 40px; }
  .index-benefit-section .section-title-wrap { gap: 24px; }
  .index-benefit-section .section-title-wrap .title { font-size: 24px; }
  .index-benefit-section .section-title-wrap .txt { font-size: 13px; }
  .index-benefit-section .section-title-wrap .btn-wrap { flex-flow: column; gap: 16px; margin-top: 16px; }
  .index-benefit-section .section-title-wrap .btn { height: 48px; font-size: 13px;}
  .index-benefit-section .item-wrap { flex-flow: wrap; gap: 48px 16px; }
  .index-benefit-section .item { width: calc( 50% - 8px ); gap: 48px; transform: translateY(0); opacity: 1; transition: 0 !important; transition-delay: 0 !important; padding-top: 48px; border-top: 1px solid #e4e4e4; }
  .index-benefit-section .item-txt-wrap { gap: 16px; }
  .index-benefit-section .item-title { font-size: 18px; }
  .index-benefit-section .item-txt { font-size: 13px; }
  .index-benefit-section .item-img-wrap { padding-bottom: 32px; }
  .index-benefit-section .item-icon { width: 64px; height: 64px; }
}
@media screen and ( max-width: 768px ) {
  .index-benefit-section .item { width: 100%; }
}

/* index - section5 */
.index-news-section { background-color: #f4f8fb; }
.index-news-section .container { height: 100%; justify-content: center; display: flex; flex-flow: column; gap: clamp( 24px, 4.8svh, 48px ); }
.index-news-section .section-title-wrap { display: flex; flex-flow: column; gap: clamp( 16px, 3.2svh, 32px );; }
.index-news-section .section-title-wrap .title { font-size: clamp( 24px, 2.08vw, 40px ); font-weight: bold; }
.index-news-section .section-title-wrap .txt { font-size: clamp( 14px, 0.9375vw, 18px ); font-weight: 500; line-height: 1.67; }
.index-news-slide { width: 100%; overflow: unset; height: fit-content; }
.index-news-slide .swiper-wrapper { height: fit-content; }
.index-news-slide .swiper-slide { width: 380px; height: fit-content; }
.index-news-item { width: 100%; display: flex; flex-flow: wrap; background-color: #fff; box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.16); }
.index-news-item .item-img { display: none; }
/* .index-news-item .item-img { width: 50%; position: relative; background-image: url(../images/null_img.png); background-repeat: no-repeat; background-size: cover; background-position: center; }
.index-news-item .item-img img { position: absolute; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; object-fit: cover; object-position: center; } */
.index-news-item .item-txt-wrap { width: 100%; padding: 40px 32px; display: flex; flex-flow: column; gap: 16px; }
.index-news-item .item-title { font-size: clamp( 18px, 1.25vw, 24px ); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.index-news-item .item-txt { font-size: clamp( 13px, 0.83vw, 16px ); font-weight: 500; color: #707070; line-height: 1.75; display: -webkit-box; word-wrap: break-word; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; height: calc( ( clamp( 13px, 0.83vw, 16px ) * 1.75 ) * 7 ); }
.index-news-item .item-sub-txt { padding-top: 16px; font-size: 14px; color: #a2a2a2; border-top: 1px solid #a2a2a2; }
.index-news-slide-btn-wrap { margin-top: 48px; display: flex; align-items: center; gap: 16px; position: relative; z-index: 1; }
.index-news-slide-btn { font-size: 16px; cursor: pointer; }
.index-news-slide-pagination { position: static; white-space: nowrap; width: fit-content; }
.index-news-slide-pagination, .index-news-slide-pagination * { font-size: 16px; font-weight: 300; }
.index-news-slide-pagination .swiper-pagination-current { font-weight: bold; }
.index-news-slide-btn-wrap .index-news-slide-play { display: none; }
.index-news-slide-btn-wrap.paused .index-news-slide-pause { display: none; }
.index-news-slide-btn-wrap.paused .index-news-slide-play { display: block; }

@media screen and ( max-width: 1680px ) {
  .index-news-slide .swiper-slide { width: 560px; }
  .index-news-item .item-txt { -webkit-line-clamp: 5; height: calc( ( clamp( 13px, 0.83vw, 16px ) * 1.75 ) * 5 ); }
}
@media screen and ( max-width: 1280px ) {
  .index-news-section { padding: 80px 0; }
  .index-news-section .container { gap: 40px; }
  .index-news-section .section-title-wrap { gap: 16px; }
  .index-news-section .section-title-wrap .title { font-size: 24px; }
  .index-news-section .section-title-wrap .txt { font-size: 13px; }
  .index-news-slide .swiper-slide { width: 240px; }
  .index-news-item .item-img { width: 100%; padding-top: 100%; }
  .index-news-item .item-txt-wrap { width: 100%; padding: 16px; gap: 8px; }
  .index-news-item .item-title { font-size: 16px; }
  .index-news-item .item-txt { font-size: 13px; -webkit-line-clamp: 4; height: calc( (13px * 1.75) * 3); }
  .index-news-item .item-sub-txt { padding-top: 8px; font-size: 12px; }
  .index-news-slide-btn-wrap { margin-top: 32px; }
  .index-news-slide-pagination, .index-news-slide-pagination * { font-size: 14px; }
}

/* 문의하기 */
.index-inquiry-wrap { height: 100svh; display: flex; flex-flow: wrap; }
.index-inquiry-title-wrap { width: 50%; display: flex; flex-flow: column; justify-content: center; gap: 16px; padding-left: clamp( 16px, calc( ( 100vw - 1440px ) / 2 ), 240px ); background-image: url(../images/index_inquiry_bg.png); background-repeat: no-repeat; background-size: cover; background-position: center; }
.index-inquiry-title-wrap .sub-title { font-size: 17px; font-weight: 300; text-transform: uppercase; letter-spacing: 0.3em; color: #fff; }
.index-inquiry-title-wrap .title { font-size: clamp( 40px, 2.91vw, 56px ); font-weight: bold; color: #fff; }
.index-inquiry-title-wrap .txt { font-size: clamp( 14px, 0.88vw, 17px ); font-weight: 300; line-height: 1.5; margin-top: 16px; color: #fff; }
.index-inquiry-title-wrap .sub-txt-group { margin-top: 24px; display: flex; flex-flow: column; gap: 16px; }
.index-inquiry-title-wrap .sub-txt { display: flex; align-items: center; gap: 16px; font-size: clamp( 14px, 0.88vw, 17px ); font-weight: 500; color: #fff; }
.index-inquiry-title-wrap .icon { display: block; width: 48px; height: 48px; border-radius: 50%; text-align: center; line-height: 48px; background-color: #fff; font-size: clamp( 18px, 1.25vw, 24px ); color: #0a4c78; }
.index-inquiry-form-wrap { width: 50%; max-width: 640px; margin: auto; }

@media screen and ( max-width: 1680px ) {
  .index-inquiry-title-wrap { padding-left: clamp( 16px, calc( ( 100vw - 1280px ) / 2 ), 240px ); }
  .index-inquiry-title-wrap .icon { width: 40px; height: 40px; line-height: 40px; }
  .index-inquiry-form-wrap { width: 50%; max-width: 640px; }
}
@media screen and ( max-width: 1440px ) {
  .index-inquiry-section, .index-inquiry-section .fp-tableCell { height: auto !important; }
  .index-inquiry-wrap { height: auto; }
  .index-inquiry-title-wrap { width: 100%; padding: 40px 0 56px; gap: 16px; padding-left: 16px; }
  .index-inquiry-title-wrap .sub-title { font-size: 13px; }
  .index-inquiry-title-wrap .title { font-size: 28px; }
  .index-inquiry-title-wrap .txt { font-size: 13px; margin-top: 8px; color: #fff; }
  .index-inquiry-title-wrap .sub-txt-group { margin-top: 8px; gap: 8px; }
  .index-inquiry-title-wrap .sub-txt { gap: 8px; font-size: 13px; }
  .index-inquiry-title-wrap .icon { width: 32px; height: 32px; line-height: 32px; font-size: 18px; }
  .index-inquiry-form-wrap { width: 100%; padding: 48px 16px 80px; }
}


/* form */
.form-wrap { width: 100%; gap: 24px; }
.form-list { width: 100%; gap: 24px; }
.form-list.border { padding-bottom: 24px; border-bottom: 1px solid #e4e4e4; }
.form-item { width: 100%; gap: 16px; }
.form-list.per2 .form-item { width: calc( 50% - 12px ); }
.form-item .item-default { font-size: 18px; font-weight: bold; }
.form-item .item-user { gap: 16px; }
.form-input-wrap { gap: 16px; }
.form-input-wrap.col-group { align-items: center; }
.form-input-wrap .form-input { min-width: unset; }
.form-input { width: 100%; height: 52px; font-size: 16px; border: 1px solid #d8d8d8; padding: 0 16px; background-color: #fff; }
.form-date { padding-right: 30px; cursor: pointer; background-image: url(../images/icon-calendar.png); background-repeat: no-repeat; background-size: 18px; background-position: right 8px center; }
.form-textarea { width: 100%; padding: 16px; background: #fff; height: clamp( 120px, 20svh, 200px ); border: 1px solid #d8d8d8; font-size: 16px; line-height: 1.5; }
.form-input::placeholder, .form-textarea::placeholder { color: #aeaeae; }
.form-search-wrap { position: relative; width: 100%;}
.form-search-input { height: 52px; padding: 0 16px; padding-right: 48px; width: 100%; background-color: #fff; border: 1px solid #e4e4e4; border-radius: 8px; font-size: 16px; }
.form-search-input:focus { border-color: #14329f; box-shadow: inset 0 3px 6px 0 rgba(0, 136, 219, 0.16); }
.form-search-input::placeholder { color: #aeaeae; }
.form-search-btn { font-size: 20px; color: #14329f; position: absolute; right: 24px; top: 50%; transform: translateY(-50%);}

.form-label-wrap { width: 100%; display: flex; gap: 24px; flex-flow: wrap; padding: 16px 0; }
.form-label-wrap.border:not(:first-child) { padding-top: 16px; border-top: 1px solid #e4e4e4; margin-top: 16px; }
.form-label-wrap.per8 .form-label { width: calc( ( 100% - 24px * 7 ) / 8 ); }
.form-label-wrap.per4 .form-label { width: calc( ( 100% - 24px * 3 ) / 4 ); }
.form-label-wrap.per2 .form-label { width: calc( ( 100% - 24px ) / 2 ); }
.form-label-wrap.per3 .form-label { width: calc( ( 100% - 24px * 2 ) / 3 ); }
.form-label-item { display: flex; justify-content: center; align-items: center; gap: 8px; height: 60px; border: 2px solid #f5f5f5; background: #f5f5f5; font-size: 18px; font-weight: bold; border-radius: 16px; color: #aeaeae; transition: .2s; text-align: center; }
.form-label-item .icon { color: #fff; font-size: 20px; display: none; }
input:checked + .form-label-item, .form-label-item.active { border-color: #14329f; background: #fff; color: #14329f; }
input:checked + .form-label-item .icon, .form-label-item.active .icon { display: block; }

.form-btn-wrap { gap: 8px; width: 100%; }
.form-btn { width: 100%; height: 64px; font-size: 18px; font-weight: bold; text-align: right; display: flex; justify-content: flex-end; gap: 8px; text-decoration: underline; font-family: "Klmm", sans-serif; align-items: center; }
.form-btn-wrap .form-btn { width: 152px; }
.form-btn-wrap .form-input { width: calc( 100% - 160px ); }

.form-sticker-wrap { position: relative; }
.form-sticker-wrap .form-sticker{ font-size: 18px; position: absolute; right: 0; bottom: 24px; }
.form-sticker-wrap .form-input { padding-right: 48px; }

.form-footer-wrap { margin-top: 40px; }
.form-footer-txt { text-align: center; font-size: 18px; font-weight: 600; line-height: 1.5; margin-bottom: 24px; }
.form-submit-btn { width: 100%; max-width: 860px; display: flex; align-items: center; justify-content: center; gap: 16px; height: 64px; background: #0a4c78; text-align: center; font-size: 18px; font-weight: bold; color: #fff; margin: 0 auto; }
.form-submit-btn.submit { background: #14329f; }
.form-submit-btn.disable { background: #e4e4e4; border-color: #e4e4e4; color: #fff; }
.form-submit-btn.black { background: #081132; color: #fff; }
.form-submit-btn.gray { background: #707070; color: #fff; }
.form-submit-btn .icon { font-size: 24px; }

.guide-txt-wrap { display: flex; flex-flow: column; gap: 4px; }
.guide-txt { font-size: 18px; line-height: 1.5; position: relative; color: #999; }
.guide-txt.dot { padding-left: 16px; }
.guide-txt.dot::after { content: ''; display: block; position: absolute; width: 4px; height: 4px; background: #999; left: 0; top: 8.5px; border-radius: 50%; }

@media screen and ( max-width: 1680px ) {
  .form-wrap { gap: 16px; }
  .form-list { gap: 16px; flex-flow: wrap; }
  .form-item { gap: 8px; }
  .form-list.per2 .form-item { width: calc( 50% - 8px ); }
  .form-item .item-default { font-size: 16px; }
  .form-item .item-user { gap: 8px; }
  .form-input-wrap { gap: 8px; }
  .form-input { height: 44px; font-size: 14px; padding: 0 12px; }
  .form-textarea { padding: 12px; font-size: 14px; }

  .form-footer-wrap { margin-top: 24px; }
  .form-submit-btn { gap: 8px; height: 48px; font-size: 16px; }
}
@media screen and ( max-width: 1280px ) {
  .form-list.per2 .form-item { width: 100%; }
  .form-item .item-default { font-size: 14px; }
}

/* form - 체크박스 */
.checked-item { display: flex; align-items: center; gap: 8px; }
.checked-item .icon { width: 20px; height: 20px; border: 1px solid #d8d8d8; border-radius: 2px; display: flex; align-items: center; justify-content: center; }
.checked-item .icon i { color: #fff; font-weight: bold; font-size: 12px; line-height: 12px; }
.checked-item .txt { width: calc( 100% - 28px ); font-size: 16px; font-weight: 600; color: #202020; opacity: .5; line-height: 1.5; }
.checked-item .link { margin-left: auto; font-size: 14px; text-decoration: underline; }
.checked-item .txt .link { font-size: inherit; font-weight: bold; display: inline-block; }
.form-checkbox:checked + .checked-item .txt { opacity: 1; }
.form-checkbox:checked + .checked-item .icon { border: 1px solid #0a4c78; background: #0a4c78; }
.form-checkbox:checked + .checked-item .icon i { color: #fff; }

@media screen and (max-width: 1280px) {
  .checked-item  { gap: 6px; }
  .checked-item .txt { font-size: 14px; }
}

/* form - 라디오 */
.form-radio + .checked-item .icon { width: 20px; height: 20px; border: 1px solid #e4e4e4; background: #fff; border-radius: 50%; display: block; position: relative; }
.form-radio + .checked-item .icon::after { content: ''; position: absolute; width: 12px; height: 12px; border-radius: 50%; background: #14329f; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none; }
.form-radio:checked + .checked-item .txt { color: #000; opacity: 1; }
/* .form-radio:checked + .checked-item .icon { border: 1px solid #14329f; background: #14329f; } */
.form-radio:checked + .checked-item .icon { border-color: #14329f; }
.form-radio:checked + .checked-item .icon::after { display: block; }
@media screen and (max-width: 1280px) {
  .form-radio + .checked-item .icon { width: 20px; height: 20px; border: 1px solid #bfbfbf; background: #fff; border-radius: 50%; display: block; position: relative; }
  .form-radio + .checked-item .icon::after { content: ''; position: absolute; width: 12px; height: 12px; border-radius: 50%; background: #14329f; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none; }
  .form-radio:checked + .checked-item { color: #14329f; }
  .form-radio:checked + .checked-item .icon { border: 1px solid #14329f; background: #fff; }
  .form-radio:checked + .checked-item .icon::after { display: block; }
}

/* subpage */
.subpage { min-height: calc( 100svh - 390px ); overflow-x: hidden; }

/* subpapge - top */
.subpage-top-wrap { height: 600px; display: flex; flex-flow: column; justify-content: center; align-items: center; text-align: center; background-repeat: no-repeat; background-size: cover; background-position: center; }
.subpage-top-title-wrap { display: flex; flex-flow: column; gap: 40px; }
.subpage-top-title { font-size: 56px; font-weight: bold; color: #fff; }
.subpage-top-txt { font-size: 20px; line-height: 1.6; color: #fff; }

.subpage-nav-wrap { background-color: #fcfcfc; height: 64px; border-bottom: 1px solid #e4e4e4; }
.subpage-nav-wrap .container { display: flex; height: 100%; align-items: center; }
.subpage-nav-btn { width: 100px; line-height: 64px; text-align: center; font-size: 21px; }
.subpage-nav-group { width: 100%; max-width: 360px; position: relative; }
.subpage-nav-default { width: 100%; height: 64px; display: flex; align-items: center; padding: 0 24px; justify-content: space-between; font-size: 18px; font-weight: 500; cursor: pointer; }
.subpage-nav-group.active .subpage-nav-default i { transform: rotate(180deg); }
.subpage-nav-list { background: #f5f5f5; position: absolute; top: 64px; width: 100%; left: 0; display: none; z-index: 9; }
.subpage-nav-group.active .subpage-nav-list { display: block; }
.subpage-nav-item { line-height: 56px; padding: 0 24px; transition: .2s; }
.subpage-nav-item:hover { background-color: #fcfcfc; }
.subpage-nav-item:not(:last-child) { border-bottom: 1px solid #e4e4e4; }

@media screen and (max-width: 1280px) {
  .subpage-top-wrap { height: 320px; padding-top: 64px; }
  .subpage-top-title-wrap { gap: 24px; padding: 0 16px; }
  .subpage-top-title { font-size: 32px; }
  .subpage-top-txt { font-size: 14px; }

  .subpage-nav-wrap { height: 40px; }
  .subpage-nav-btn { width: 40px; line-height: 40px; font-size: 16px; }
  .subpage-nav-group { width: calc( 100% - 40px ); }
  .subpage-nav-default { height: 40px; padding: 0 12px; font-size: 14px;; }
  .subpage-nav-list { top: 40px; }
  .subpage-nav-item { line-height: 40px; padding: 0 12px; font-size: 14px; }
}

/* subpapge - content */
.subpage-content.padding-top { padding-top: 120px; }
.subpage-content.padding-bottom { padding-bottom: 120px; }
.subpage-title-wrap { display: flex; flex-flow: column; gap: 24px; align-items: center; text-align: center; margin-bottom: 80px; }
.subpage-title { font-size: 32px; font-weight: 500; line-height: 1.4; }
.subpage-sub-title { font-size: 18px; font-weight: 500; line-height: 1.67; }
.subpage-section-wrap { display: flex; flex-flow: column; gap: 120px; }

@media screen and (max-width: 1280px) {
  .subpage-content.padding-top { padding-top: 40px; }
  .subpage-content.padding-bottom { padding-bottom: 80px; }
  .subpage-title-wrap { gap: 16px; margin-bottom: 40px; }
  .subpage-title { font-size: 20px; }
  .subpage-sub-title { font-size: 13px; }
  .subpage-section-wrap { gap: 80px; }
}

/* 회사 소개 */
.subpage-top-wrap.about { background-image: url(../images/subpage_top_about.png); }

/* 회사 소개 - CEO 인사말 */
.about-greeting-top-wrap { display: flex; align-items: flex-end; }
.about-greeting-top-wrap .img { width: 560px; }
.about-greeting-top-wrap .txt-wrap { width: calc( 100% - 560px ); padding: 100px 0; padding-left: 48px; display: flex; flex-flow: column; gap: 24px; position: relative; }
.about-greeting-top-wrap .txt-wrap::after { content: ''; display: block; position: absolute; width: 100vw; height: 100%; background-color: #f5f5f5; bottom: 0; right: calc( ( -100vw + 1440px ) / 2 ); z-index: -1; }
.about-greeting-top-wrap .txt-group { display: flex; flex-flow: column; gap: 40px; }
.about-greeting-top-wrap .txt-group .title { font-size: 24px; font-weight: 600; line-height: 1.5; }
.about-greeting-top-wrap .txt-group .txt { font-size: 20px; line-height: 1.6; }
.about-greeting-top-wrap .ceo-txt-wrap { display: flex; justify-content: flex-end; gap: 40px; }
.about-greeting-top-wrap .ceo-txt-wrap .txt { font-size: 40px; font-weight: 500 }
.about-greeting-top-wrap .ceo-txt-wrap .title { font-size: 40px; font-weight: bold }
.about-greeting-wrap { display: flex; flex-flow: column; gap: 40px; }
.about-greeting-wrap .item { padding: 32px; background-color: #fff;  box-shadow: 4px 8px 16px 0 rgba(0, 0, 0, 0.08); border-radius: 100px; display: flex; align-items: center; }
.about-greeting-wrap .item-img { width: 140px; height: 140px; }
.about-greeting-wrap .item-txt-wrap { display: flex; flex-flow: column; gap: 16px; padding-left: 40px; }
.about-greeting-wrap .item-title { font-size: 32px; font-weight: 600; color: #1371b1; }
.about-greeting-wrap .item-txt { font-size: 20px; line-height: 1.6; }

@media screen and (max-width: 1680px) {
  .about-greeting-top-wrap .txt-wrap::after { right: calc( ( -100vw + 1280px ) / 2 ); }
}
@media screen and (max-width: 1280px) {
  .about-greeting-top-wrap { flex-flow: column; gap: 40px; align-items: center; }
  .about-greeting-top-wrap .img { width: 275px; }
  .about-greeting-top-wrap .txt-wrap { width: 100%; padding: 0; padding-bottom: 40px; }
  .about-greeting-top-wrap .txt-wrap::after { height: calc( 100% + 300px ); bottom: 0; right: -16px; }
  .about-greeting-top-wrap .txt-group { gap: 24px; }
  .about-greeting-top-wrap .txt-group .title { font-size: 18px; }
  .about-greeting-top-wrap .txt-group .txt { font-size: 13px; }
  .about-greeting-top-wrap .ceo-txt-wrap { gap: 16px; }
  .about-greeting-top-wrap .ceo-txt-wrap .txt { font-size: 24px; }
  .about-greeting-top-wrap .ceo-txt-wrap .title { font-size: 24px; }
  .about-greeting-wrap { gap: 24px; }
  .about-greeting-wrap .item { padding: 16px; border-radius: 24px; position: relative; }
  .about-greeting-wrap .item-img { width: 56px; height: 56px; position: absolute; left: 16px; top: 16px; }
  .about-greeting-wrap .item-txt-wrap { padding-left: 0; }
  .about-greeting-wrap .item-title { font-size: 20px; padding-left: 72px; line-height: 56px; }
  .about-greeting-wrap .item-txt { font-size: 13px; }
}

/* 회사 소개 - 조직도 */
.org-wrap { overflow: auto; }
.org-wrap .img.mb { min-width: 720px; }

/* 회사 소개 - 연혁 */
.history-list .section { position: relative; width: 100%; height: 100svh; }
.history-list .section .sticky { overflow: hidden; position: sticky; top: 0; left: 0; width: 100%; height: 100svh; }
.history-list .section .background { top: calc( 50% - 200px ); left: 50%; transform: translateX(-50%); width: 860px; height: 400px; border-radius: 16px; position: absolute; }
.history-list .section .background img { position: absolute; top: 0; left: 0; bottom: 0; right: 0; height: 100%; object-fit: cover; }
.history-list .section .background-dark { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); opacity: 0; }
.history-list .heading { top: calc( 50% - 200px - 80px ); position: absolute; left: 0; right: 0; text-align: center; font-size: 32px; }
.history-list .heading .year { font-weight: bold; font-size: 48px; }
.history-list .marquee { position: absolute; right: calc(50% - 60svh); margin-right: -0.8em; line-height: 1; font-size: 280px; font-weight: 600; color: rgba(61, 147, 177, 0.1); letter-spacing: -0.01em; white-space: nowrap; }
.history-list .contents { margin-right: auto; margin-left: auto; max-width: 1440px; padding: 170px 0; width: 100%; height: 100%; color: #fff; }
.history-list .title { font-size: 32px; color: #fff; }
.history-list .title .year { font-weight: bold; font-size: 48px; }
.history-list .list { overflow-y: auto; margin-top: 40px; height: 90%; }
.history-list .list .item { display: flex; align-items: baseline; margin-top: 64px; }
.history-list .list .year { display: block; width: 140px; font-size: 24px; font-weight: bold; transform: translateY(0.1em); color: #fff; }
.history-list .data { font-size: 20px; color: #fff; }
.history-list .data .row { display: flex; align-items: center; margin-top: 24px; }
.history-list .data .row:first-child { margin-top: 0; }
.history-list .data .dd { font-size: 20px; color: #fff; line-height: 1.5; position: relative; padding-left: 16px; }
.history-list .data .dd::after { content: ''; display: block; position: absolute; width: 3px; height: 3px; background-color: #fff; left: 0; top: 13.5px; }

@media screen and (max-width: 1280px) {
  .history-list { padding: 0 16px; display: flex; flex-flow: column; gap: 80px; padding-bottom: 80px; }
  .history-list .section { height: auto; }
  .history-list .section .sticky { position: static; height: auto; }
  .history-list .section .background { transform: none; width: 100%; height: auto; position: static; }
  .history-list .section .background img { position: static; }
  .history-list .section .background-dark { display: none; }
  .history-list .heading { position: static; text-align: left; font-size: 20px; margin-top: 24px; }
  .history-list .heading .year { font-size: 38px; }
  .history-list .marquee { display: none;}
  .history-list .contents { margin-top: 24px; padding: 0; height: auto; color: #202020; }
  .history-list .title { display: none; }
  .history-list .list { margin-top: 0; height: auto; display: flex; flex-flow: column; gap: 40px; }
  .history-list .list .item { margin-top: 0; flex-flow: column; gap: 16px; }
  .history-list .list .year { width: auto; font-size: 18px; transform: none; color: #202020; }
  .history-list .data { font-size: 13px; color: #202020; }
  .history-list .data .row { margin-top: 12px; }
  .history-list .data .dd { font-size: 13px; color: #202020; padding-left: 8px; }
  .history-list .data .dd::after { width: 2px; height: 2px; background-color: #202020; top: 8.75px; }
}

/* 회사 소개 - 오시는길 */
.about-location-map { width: 100%; height: 580px; }
.about-location-map> iframe { width: 100%; height: 100%; }
.about-loaction-wrap { margin-top: 40px; display: flex; }
.about-loaction-wrap .logo { width: 360px; padding: 0 80px; object-fit: contain; }
.about-loaction-wrap .item-wrap { display: flex; flex-flow: wrap; gap: 24px 0; padding-left: 80px; border-left: 1px solid #e4e4e4; }
.about-loaction-wrap .item { display: flex; justify-content: baseline; width: 50%; }
.about-loaction-wrap .item-default { width: 138px; font-size: 18px; font-weight: 500; display: flex; justify-content: baseline; gap: 16px; line-height: 1.67; }
.about-loaction-wrap .item-default i { line-height: 1.67; }
.about-loaction-wrap .item-user { width: calc( 100% - 138px ); font-size: 18px; line-height: 1.67; color: #707070; }

@media screen and (max-width: 1280px) {
  /* .about-location-map { height: 320px; } */
  .about-loaction-wrap { margin-top: 24px; flex-flow: wrap; }
  .about-loaction-wrap .logo { display: none; }
  .about-loaction-wrap .item-wrap { padding-left: 0; border-left: 0; gap: 16px; }
  .about-loaction-wrap .item { width: 100%; }
  .about-loaction-wrap .item-default { width: 84px; font-size: 14px; gap: 8px; }
  .about-loaction-wrap .item-user { width: calc( 100% - 84px ); font-size: 14px; }
}

/* 사업영역 */
.subpage-top-wrap.biz { background-image: url(../images/subpage_top_biz.png); }
.gallery-wrap { display: flex; flex-flow: wrap; gap: 2px; }
.gallery-item { width: calc( ( 100% - 2px * 3 ) / 4 ); position: relative; }
.gallery-item .img-container { padding-top: 66.7%; overflow: hidden; }
.gallery-item .img-container img { transition: .3s; }
.gallery-item .img-container::after { content: ''; display: block; position: absolute; width: 100%; height: 100%; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.3); transition: .3s; }
.gallery-item .item-title-wrap { position: absolute; bottom: 40px; left: 0; right: 0; width: 100%; padding: 0 24px; display: flex; flex-flow: column; gap: 8px; }
.gallery-item .item-title { font-size: 24px; font-weight: bold; color: #fff; transition: .3s; }
.gallery-item .item-txt { font-size: 16px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gallery-item:hover .img-container img { transform: scale(1.15); }
.gallery-item:hover .img-container::after { opacity: 0; }
.gallery-item:hover .item-title { transform: translateY(-0.3em); }

@media screen and (max-width: 1440px) {
  .gallery-item { width: calc( ( 100% - 2px ) / 2 ); }
}
@media screen and (max-width: 1280px) {
  .gallery-item .item-title-wrap { bottom: 24px; padding: 0 16px; }
  .gallery-item .item-title { font-size: 16px; }
  .gallery-item .item-txt { font-size: 13px; }
}
@media screen and (max-width: 840px) {
  .gallery-wrap { gap: 16px; }
  .gallery-item { width: 100%; }
}

/* 사업영역 - 마케팅솔루션 */
.step-item-wrap { display: flex; gap: 40px; }
.step-item { width: 100%; display: flex; flex-flow: column; gap: 16px; text-align: center; align-items: center; position: relative; }
.step-item:not(:last-child)::after { content: ''; display: block; position: absolute; width: calc( 100% - 64px ); height: 0; border-top: 2px dashed #aeaeae; top: 20px; right: calc( -50% + 8px ); }
.step-item .item-num { width: 40px; height: 40px; border-radius: 50%; line-height: 40px; background-color: #1371b1; font-size: 18px; font-weight: bold; color: #fff; }
.step-item .item-title { font-size: 22px; font-weight: bold; margin-bottom: 8px; }
.step-item .item-txt-wrap { width: 100%; padding: 40px 0; border-radius: 16px; background-color: #f5f5f5; }
.step-item .item-img { display: block; width: auto; height: 64px; object-fit: contain; object-position: center; margin: 0 auto 20px; }
.step-item .item-txt { font-size: 14px; line-height: 1.6; }
.subpage-section.bg-color { padding: 120px 0; background-color: #fbfbff; }
.side-item-wrap { display: flex; flex-flow: column; gap: 80px; }
.side-item { display: flex; align-items: center; }
.side-item:nth-child(2n) { flex-flow: row-reverse; }
.side-item .item-img { width: 55%; }
.side-item .item-txt-wrap { width: 45%; padding: 0 64px; display: flex; flex-flow: column; gap: 24px; text-align: center; align-items: center; }
.side-item .item-icon { width: 52px; margin-bottom: 8px; }
.side-item .item-title { font-size: 24px; font-weight: bold; }
.side-item .item-txt { font-size: 16px; line-height: 1.75; }
.marketing-solution-wrap { display: flex; gap: 32px; padding-bottom: 60px; }
.marketing-solution-item { width: 100%; position: relative; padding: 40px 24px 80px; border-radius: 16px; background-color: #1371b1; text-align: center; }
.marketing-solution-item .item-title { font-size: 24px; font-weight: bold; color: #fff; line-height: 1.4; margin: 0 auto 24px; position: relative; width: fit-content; max-width: calc( 100% - 96px ); }
.marketing-solution-item .item-title::after { content: ''; display: block; position: absolute; width: 20px; height: 20px; background-image: url(../images/icon_commas.png); background-repeat: no-repeat; background-size: contain; background-position: left top; left: -36px; top: 0; }
.marketing-solution-item .item-title::before { content: ''; display: block; position: absolute; width: 20px; height: 20px; background-image: url(../images/icon_commas.png); background-repeat: no-repeat; background-size: contain; background-position: left top; right: -36px; top: 0; transform: rotate(180deg); }
.marketing-solution-item .item-txt { font-size: 16px; line-height: 1.75; color: #fff; margin-bottom: 16px; }
.marketing-solution-item .item-sub-txt { font-size: 14px; font-weight: 300; color: #fff; }
.marketing-solution-item .item-img { width: 120px; position: absolute; bottom: -60px; left: 50%; transform: translateX(-50%); }


@media screen and (max-width: 1280px) {
  .step-item-wrap { flex-flow: wrap; gap: 40px 16px; justify-content: center; }
  .step-item { width: calc( 50% - 8px ); gap: 8px; }
  .step-item:nth-child(2n)::after { display: none; }
  .step-item:not(:last-child, :nth-child(2n))::after { width: calc( 100% - 48px ); border-top: 1px dashed #aeaeae; top: 16px; right: calc( -50% + 16px ); }
  .step-item .item-num { width: 32px; height: 32px; line-height: 32px; font-size: 14px; }
  .step-item .item-title { font-size: 16px; }
  .step-item .item-txt-wrap { padding: 24px 12px; border-radius: 8px; }
  .step-item .item-img { height: 48px; margin: 0 auto 16px; }
  .step-item .item-txt { font-size: 13px; }

  .marketing-solution-wrap { padding-bottom: 88px; }
  .marketing-solution-item { padding: 24px 16px 64px; }
  .marketing-solution-item .item-title { font-size: 16px; max-width: calc( 100% - 80px ); }
  .marketing-solution-item .item-txt { font-size: 14px; }
  .marketing-solution-item .item-sub-txt { font-size: 12px; }
  .marketing-solution-item .item-img { width: 88px; bottom: -44px; }
}
@media screen and (max-width: 840px) {
  .subpage-section.bg-color { padding: 40px 0; }
  .side-item-wrap { gap: 40px; }
  .side-item { flex-flow: column; gap: 24px; }
  .side-item:nth-child(2n) { flex-flow: column; }
  .side-item .item-img { width: 100%; }
  .side-item .item-txt-wrap { width: 100%; padding: 0 16px; gap: 16px; }
  .side-item .item-icon { width: 32px; margin-bottom: 0; }
  .side-item .item-title { font-size: 20px; }
  .side-item .item-txt { font-size: 13px; }
}

/* 게시글 상세 */
.board_detail { padding-top: 160px; background: #fff; }
.board_detail .title-wrap { align-items: center; text-align: center; gap: 16px; padding: 32px 0; border-top: 2px solid #202020; }
.board_detail .title-wrap .title { font-size: 24px; font-weight: 600; line-height: 1.4; }
.board_detail .con-wrap { padding: 40px 0 80px; margin: 0 auto; max-width: 1080px; border-top: 1px solid #e4e4e4; border-bottom: 1px solid #202020; }
.board_detail .con-wrap * { font-size: inherit; line-height: inherit; }
.board_detail .con-wrap img { max-width: 100%; width: unset;}
.file-download-group { gap: 8px; margin-bottom: 24px; }
.file-download-wrap { height: 52px; align-items: center; padding: 0 16px; background: #f5f5f5; border-radius: 4px; gap: 8px; }
.file-download-wrap .icon { font-size: 20px; color: #a4a4a4; }
.file-download-wrap .file-title { font-size: 16px; width: calc( 100% - 56px ); min-width: 136px; font-size: 16px; font-weight: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.board_detail .btm-item-wrap { margin-top: 40px; display: flex; justify-content: space-between; align-items: center; position: relative; width: 100%; min-height: 56px; box-sizing: content-box; }
.board_detail .btm-item-wrap .item { font-size: 17px; color: #a4a4a4; font-weight: bold; display: flex; gap: 8px; align-items: baseline; width: calc( (100% - 88px ) / 2 ); cursor: pointer; }
.board_detail .btm-item-wrap .next-item { justify-content: flex-end; }
.board_detail .btm-item-wrap .item-default { width: 80px; }
.board_detail .btm-item-wrap .next-item .item-default { text-align: right; }
.board_detail .btm-item-wrap .item-user { color: #a4a4a4; font-weight: 300; max-width: calc( 100% - 92px ); font-size: 17px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 1.5; }
.board_detail .btm-item-wrap .list-btn { width: 56px; height: 56px; border-radius: 50%; border: 2px solid #aeaeae; text-align: center; cursor: pointer; position: absolute; left: 50%; top: 24px; transform: translateX(-50%); }
.board_detail .btm-item-wrap .list-btn i { font-size: 24px; color: #aeaeae; line-height: 52px; }

.sns-board-detail-list { gap: 24px; }
.sns-board-detail-item .item-title { width: 122px; font-size: 17px; font-weight: bold; position: relative; line-height: 1.5; }
.sns-board-detail-item .item-title::after { content: ''; display: block; position: absolute; width: 2px; height: 18px; background: #d5d5d5; right: 0; top: 4px; }
.sns-board-detail-item .item-txt { width: calc( 100% - 122px ); padding-left: 24px; font-size: 17px; line-height: 1.5; }

@media screen and (max-width:1280px) {
  .board_detail { padding-top: 80px; }
  .board_detail .container { padding-left: 16px; padding-right: 16px; }
  .board_detail .title-wrap { padding: 0; padding-bottom: 24px; border-top: 0; gap: 12px; }
  .board_detail .title-wrap .sub-title { font-size: 14px; }
  .board_detail .title-wrap .title { font-size: 18px;}
  .board_detail .title-wrap .txt-group { gap: 24px; width: 100%; justify-content: center; }
  .board_detail .title-wrap .txt { font-size: 13px; }
  .board_detail .con-wrap { padding: 24px 0; }
  .file-download-group { gap: 8px; }
  .file-download-wrap { height: 40px; padding: 0 16px; }
  .file-download-wrap i { font-size: 16px; }
  .file-download-wrap .file-title { font-size: 14px; width: calc( 100% - 48px ); }
  .board_detail .btm-item-wrap { margin-top: 24px; padding-top: 16px; min-height: 40px; }
  .board_detail .btm-item-wrap .item { flex-flow: column; font-size: 14px; gap: 8px; width: calc( (100% - 56px ) / 2 ); }
  .board_detail .btm-item-wrap .item-default { width: auto; font-size: 14px; }
  .board_detail .btm-item-wrap .next-item { flex-flow: column-reverse; align-items: flex-end; }
  .board_detail .btm-item-wrap .next-item .item-default { text-align: right; }
  .board_detail .btm-item-wrap .item-user { display: none; }
  .board_detail .btm-item-wrap .list-btn { width: 40px; height: 40px; border: 1px solid #aeaeae; top: 16px; }
  .board_detail .btm-item-wrap .list-btn i { font-size: 20px; line-height: 38px; }
  
  .sns-board-detail-list { gap: 16px; }
  .sns-board-detail-item .item-title { width: 96px; font-size: 14px; }
  .sns-board-detail-item .item-title::after { height: 14px; }
  .sns-board-detail-item .item-txt { width: calc( 100% - 96px ); padding-left: 16px; font-size: 14px; }
}

/* SNS - 블로그 */
.subpage-top-wrap.sns { background-image: url(../images/subpage_top_sns.png); }
.subpage-tab-wrap { display: flex; } 
.subpage-tab { min-width: 230px; padding: 0 40px; text-align: center; line-height: 70px; border-radius: 35px; background: #fff; font-size: 18px; }
.subpage-tab.active { background: #0a4c78; color: #fff; font-weight: bold; }

.sns-top-wrap { padding: 64px 0; background-repeat: no-repeat; background-size: cover; background-position: center; margin-bottom: 64px; }
.sns-top-wrap.blog-1 { background-image: url(../images/sns_top_blog_1.png); }
.sns-top-wrap.blog-2 { background-image: url(../images/sns_top_blog_2.png); background-position: center left; }
.sns-top-wrap .title-wrap { display: flex; flex-flow: column; align-items: center; text-align: center; gap: 24px; }
.sns-top-wrap .title { font-size: 24px; font-weight: bold; color: #fff; }
.sns-top-wrap .txt { font-size: 16px; font-weight: 500; line-height: 1.75; color: #fff; }
.sns-top-wrap .btn { display: flex; justify-content: center; align-items: center; padding: 0 24px; height: 48px; border-radius: 24px; gap: 8px; font-size: 18px; font-weight: 600; color: #fff; background-color: #222; }

.sns-board-wrap { display: flex; flex-flow: wrap; gap: 64px 32px; }
.sns-board-item { width: calc( ( 100% - 32px * 3 ) / 4 ); }
.sns-board-item .item-img { overflow: hidden; margin-bottom: 24px; background-color: #fcfcfc; background-image: url(../images/logo.png); background-size: 50%; background-repeat: no-repeat; background-position: center; }
.sns-board-wrap.blog .sns-board-item { padding: 48px 32px; background-color: #fff; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.09); border-radius: 8px; }
.sns-board-wrap.blog .sns-board-item .item-img { padding-top: 100%; }
.sns-board-item .item-img img { transition: .3s; } 
.sns-board-item:hover .item-img img { transform: scale(1.15); }
.sns-board-item .item-txt-wrap { display: flex; flex-flow: column; gap: 16px; }
.sns-board-wrap.blog .sns-board-item .item-txt-wrap { gap: 24px; }
.sns-board-item .item-title { font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sns-board-item .item-txt { font-size: 16px; line-height: 1.4; color: #707070; }
.sns-board-item .item-sub-txt { font-size: 16px; line-height: 1.4; color: #aeaeae; }
.sns-board-wrap.blog .sns-board-item .item-txt { display:-webkit-box; word-wrap:break-word; -webkit-line-clamp:6; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; height:calc( ( 16px * 1.4 ) *  6 ); }

@media screen and (max-width:1280px) {
  .subpage-tab { min-width: 120px; padding: 0 24px; line-height: 40px; border-radius: 20px; font-size: 13px; }

  .sns-top-wrap { padding: 40px 0; margin-bottom: 40px; }
  .sns-top-wrap .title-wrap { gap: 16px; }
  .sns-top-wrap .title { font-size: 20px; }
  .sns-top-wrap .txt { font-size: 13px; }
  .sns-top-wrap .btn { padding: 0 16px; height: 40px; font-size: 14px; }

  .sns-board-wrap { gap: 40px 16px; }
  .sns-board-item { width: calc( ( 100% - 16px ) / 2 ); }
  .sns-board-item .item-img { margin-bottom: 16px; }
  .sns-board-item .item-txt-wrap { gap: 8px; }
  .sns-board-item .item-title { font-size: 16px; }
  .sns-board-item .item-txt { font-size: 13px; }
  .sns-board-item .item-sub-txt { font-size: 13px; }
  .sns-board-wrap.blog .sns-board-item { padding: 24px; }
  .sns-board-wrap.blog .sns-board-item .item-txt {-webkit-line-clamp:4;  height:calc( ( 13px * 1.4 ) *  4 ); }
}
@media screen and (max-width:640px) {
  .sns-board-item { width: 100%; }
  .sns-board-wrap.blog { gap: 16px; }
}

/* SNS - 유튜브 */
.sns-top-wrap.ytb { background-image: url(../images/sns_top_ytb.png); }
.sns-board-wrap.ytb .sns-board-item .item-img { padding-top: 56.25%; }

/* SNS - 인스타그램 */
.sns-top-wrap.insta { background-image: url(../images/sns_top_insta.png); }
.sns-board-wrap.insta .sns-board-item .item-img { padding-top: 133.33%; margin-bottom: 0; }
@media screen and (max-width:1280px) {
  .sns-board-wrap.insta { gap: 16px; }
}

/* SNS - 틱톡 */
.sns-top-wrap.tiktok { background-image: url(../images/sns_top_tiktok.png); }

/* 서비스 */
.subpage-top-wrap.service { background-image: url(../images/subpage_top_service.png); }
.service-top-wrap { display: flex; padding: 32px 0; border-radius: 16px; border: 1px solid #e4e4e4; background-color: #fcfcfc; align-items: center; }
.service-top-wrap .item-img { width: 158px; }
.service-top-wrap .item-img img { display: block; width: 64px; height: auto; margin: auto; }
.service-top-wrap .item-txt-wrap { display: flex; flex-flow: column; gap: 16px; }
.service-top-wrap .item-title { font-size: 18px; font-weight: bold; line-height: 1.5; }
.service-top-wrap .item-txt { font-size: 15px; line-height: 1.7; }

@media screen and (max-width:1280px) {
  .service-top-wrap { flex-flow: column; gap: 16px; padding: 24px 16px; text-align: center; }
  .service-top-wrap .item-img { width: 48px; }
  .service-top-wrap .item-img img { width: 100%; }
  .service-top-wrap .item-title { font-size: 16px; }
  .service-top-wrap .item-txt { font-size: 13px; }
}

/* 서비스 - 원격지원 */
.remote-btn { display: block; margin: 0 auto; width: 100%; max-width: 640px; height: 64px; background-color: #0a4c78; font-size: 17px; font-weight: 600; color: #fff; text-align: center; line-height: 64px; }

@media screen and (max-width:1280px) {
  .remote-btn { max-width: 160px; height: 48px; font-size: 14px; line-height: 48px; }
}

/* 서비스 - 헬프데스크 */
.help-desk-wrap { display: flex; flex-flow: wrap; gap: 48px 40px; }
.help-desk-top { width: 100%; padding: 80px 48px; border-radius: 16px; background-color: #fbfbff; background-image: url(../images/helpdesk_top.png); background-repeat: no-repeat; background-size: contain; background-position: center right 80px; }
.help-desk-top .item-txt { font-size: 24px; line-height: 1.33; }
.help-desk-item { width: calc( 50% - 20px ); border-radius: 8px; border: 1px solid #e4e4e4; background-color: #fff; padding: 40px; display: flex; flex-flow: column; gap: 16px; align-items: center; text-align: center; cursor: pointer; transition: .3s; outline: 2px solid transparent; }
.help-desk-item:hover { outline: 2px solid #1371b1; }
.help-desk-item .item-img { width: auto; height: 50px; }
.help-desk-item .item-title-wrap { display: flex; align-items: center; gap: 32px; }
.help-desk-item .item-title { font-size: 24px; font-weight: 600; line-height: 1.25; }
.help-desk-item .item-txt { font-size: 18px; color: #a2a2a2; line-height: 1.33; }

@media screen and (max-width:1280px) {
  .help-desk-wrap { gap: 24px; }
  .help-desk-top {  padding: 24px 16px 148px; border-radius: 8px; background-size: auto 108px; background-position: bottom 16px right 16px; }
  .help-desk-top .item-txt { font-size: 16px; }
  .help-desk-item { width: 100%; padding: 24px; outline: 1px solid transparent; }
  .help-desk-item:hover { outline: 1px solid #1371b1; }
  .help-desk-item .item-img { height: 36px; }
  .help-desk-item .item-title-wrap { flex-flow: column; gap: 8px; }
  .help-desk-item .item-title { font-size: 18px; }
  .help-desk-item .item-txt { font-size: 14px; }
}

/* 커뮤니티 - 공지사항 */
.subpage-top-wrap.community { background-image: url(../images/subpage_top_community.png); }
.board-top-wrap { padding-bottom: 32px; border-bottom: 2px solid #222; }
.board-top-title { text-align: center; font-size: 44px; font-weight: bold; margin-bottom: 80px; }
.board-top-group { justify-content: space-between; align-items: flex-end; }
.board-top-txt { font-size: 18px; }
.search-wrap { display: flex; justify-content: flex-end; position: relative; }
.search-input { width: 100%; max-width: 360px; height: 56px; border: 2px solid #e4e4e4; background: #fff; padding: 0 32px; padding-right: 56px; font-size: 18px; }
.search-input::placeholder { color: #9d9d9d; }
.search-btn { position: absolute; width: 48px; height: 48px; line-height: 48px; border-radius: 50%; background: #0a4c78; font-size: 24px; color: #e4e4e4; right: 4px; top: 50%; transform: translateY(-50%); }
.board-wrap { border-bottom: 2px solid #202020; }
.board-item { display: flex; align-items: center; padding: 32px; gap: 40px; justify-content: space-between; transition: .2s; }
.board-item:hover { background: #f5faff; }
.board-item:not(:last-child) { border-bottom: 1px solid #e4e4e4; }
.board-item .txt-wrap { gap: 16px; max-width: calc( 100% - 72px ); }
.board-item .title { font-size: 18px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: .2s; }
.board-item .txt { font-size: 16px; color: #aeaeae; line-height: 1.5; display: -webkit-box; word-wrap: break-word; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; height: calc(( 16px * 1.5 ) * 2); }
.board-item .sub-txt { font-size: 16px; color: #9d9d9d; }
.board-item .btn { width: 32px; height: 32px; border-radius: 50%; line-height: 30px; border: 1px solid #9d9d9d; text-align: center; font-size: 17px; color: #9d9d9d; transition: .2s; }
.board-item:hover .btn { border-color: #1371b1; color: #1371b1; }
.board-item .label { width: fit-content; min-width: 60px; padding: 0 16px; border-radius: 30px; line-height: 32px; border: 1px solid #0a4c78; text-align: center; font-size: 16px; font-weight: bold; color: #0a4c78; }

@media screen and (max-width: 1280px) {
  .subpage-top.data { max-height: 450px; }
  .board-top-wrap { padding-bottom: 16px; }
  .board-top-title { font-size: 22px; margin-bottom: 24px; }
  .board-top-txt { font-size: 14px; white-space: nowrap; }
  .search-wrap { width: 100%; }
  .search-input { height: 48px; border: 1px solid #e4e4e4; padding: 0 16px; padding-right: 40px; font-size: 14px; }
  .search-btn { width: 32px; height: 32px; line-height: 32px; font-size: 16px; }
  .board-item { padding: 16px 0; gap: 24px; }
  .board-item .txt-wrap { gap: 8px; max-width: calc( 100% - 56px ); }
  .board-item .title { font-size: 14px; }
  .board-item .txt { font-size: 14px; height: calc(( 14px * 1.5 ) * 2); }
  .board-item .sub-txt { font-size: 12px; }
  .board-item .label { font-size: 14px; line-height: 24px; }
}
@media screen and (max-width: 640px) {
  .board-top-group { flex-flow: column-reverse; align-items: flex-start; gap: 24px; }
}

/* 커뮤니티 - 이벤트 */
.sns-board-wrap.event { padding-top: 24px; padding-bottom: 40px; border-bottom: 2px solid #222; }
.sns-board-wrap.event .sns-board-item .item-img { padding-top: 100%; }
.sns-board-wrap.event .sns-board-item .item-title { white-space: unset; line-height: 1.6; display: -webkit-box; word-wrap: break-word; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; height: calc(( 17px * 1.6 ) * 2); font-weight: 600; }
@media screen and (max-width: 1280px) {
  .sns-board-wrap.event { padding-top: 16px; padding-bottom: 0; border-bottom: 0; }
  .sns-board-wrap.event .sns-board-item .item-img { padding-top: 67%; }
  .sns-board-wrap.event .sns-board-item .item-title { height: calc(( 16px * 1.6 ) * 2); }
}

/* 커뮤니티 - 문의하기 */
.board-top-group .board-top-title { margin-bottom: 0; }
.subpage-content .form-wrap { padding-top: 40px; }
.file-upload-wrap { width: 100%; gap: 16px; }
.file-upload-btn { width: 148px; display: flex; justify-content: center; gap: 8px; height: 52px; background-color: #7d7d7d; text-align: center; align-items: center; font-size: 17px; font-weight: 300; color: #fff; }
.select-preview-wrap { width: 100%; display: flex; flex-flow: column; gap: 8px; }
.select-preview-item { width: 100%; height: 52px; display: flex; align-items: center; padding: 0 16px; background: #f5f5f5; }
.select-preview-item .icon { font-size: 20px; }
.select-preview-wrap .title { width: calc( 100% - 36px ); font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 8px; }
.select-preview-wrap .del-btn { font-size: 16px; color: #aeaeae; }
.policy-agree-txt-wrap { padding: 32px; background: #f9f9f9; }
.policy-agree-txt-wrap .title { font-size: 18px; font-weight: 500; margin-bottom: 24px; }
.policy-agree-txt-group { gap: 12px; }
.policy-agree-txt-item .item-title { width: 136px; font-size: 16px; font-weight: 300; color: #999; line-height: 1.5; }
.policy-agree-txt-item.eng .item-title { width: 200px; }
.policy-agree-txt-item .item-txt { width: calc( 100% - 136px ); font-size: 16px; font-weight: 300; color: #999; line-height: 1.5; }
.policy-agree-txt-item.eng .item-txt { width: calc( 100% - 200px ); }

@media screen and (max-width: 1280px) {
  .board-top-group.sp-bt { flex-flow: row; align-items: baseline; }
  .subpage-content .form-wrap { padding-top: 24px; }
  .file-upload-wrap { gap: 8px; }
  .file-upload-btn { width: 128px; height: 48px; font-size: 14px; }
  .select-preview-item { height: 48px; }
  .select-preview-item .icon { font-size: 16px; }
  .select-preview-wrap .title { font-size: 14px; }
  .select-preview-wrap .del-btn { font-size: 14px; }
  .policy-agree-txt-wrap { padding: 24px 16px; }
  .policy-agree-txt-wrap .title { font-size: 14px; margin-bottom: 16px; }
  .policy-agree-txt-group { gap: 8px; }
  .policy-agree-txt-item { flex-flow: column; }
  .policy-agree-txt-item .item-title { width: auto; font-size: 13px; font-weight: bold; }
  .policy-agree-txt-item .item-txt { width: 100%; font-size: 13px; }
  .policy-agree-txt-item.eng .item-txt { width: 100%; }
}

/* 통합검색 */
.search-result-top { padding-top: 180px; padding-bottom: 80px; background-color: #fcfcfc; text-align: center;  }
.search-result-title { font-size: 56px; margin-bottom: 48px; }
.total-search-wrap { width: calc( 100% - 32px ); max-width: 800px; margin: 0 auto; position: relative; }
.total-search-input { width: 100%; padding-left: 40px; padding-right: 80px; height: 72px; border-radius: 36px; border: 3px solid #1371b1; font-size: 20px; }
.total-search-btn { width: 48px; height: 48px; border-radius: 50%; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); background-color: #1371b1; }
.total-search-btn i { text-align: center; line-height: 48px; font-size: 24px; color: #fff; }
.total-search-title { margin-top: 32px; font-size: 20px; font-weight: bold; line-height: 1.3; }
.search-result-wrap { padding-top: 80px; padding-bottom: 120px; }
.search-tab-container { margin-bottom: 80px; position: relative; }
.search-tab-wrap { display: flex; width: fit-content; margin: 0 auto; border-bottom: 1px solid #e4e4e4; }
.search-tab { width: 200px; height: 60px; border-radius: 4px; border: 2px solid #fff; background-color: #fff; text-align: center; line-height: 56px; font-size: 18px; color: #707070; }
.search-tab.active { border-color: #0a4c78; color: #0a4c78; font-weight: 600; }
.search-tab .num { font-size: 14px; }
.search-filter-toggle-btn { position: absolute; top: 40px; right: 0; }
.search-filter-toggle-btn p { font-size: 14px; color: #a2a2a2; }
.search-filter-toggle-btn .on { display: none; }
.search-tab-container.active .search-filter-toggle-btn .on { display: block; }
.search-tab-container.active .search-filter-toggle-btn .off { display: none; }
.search-filter-wrap { margin-top: 16px; background-color: #fcfcfc; border-radius: 8px; padding: 32px 24px;align-items: center; display: none; }
.search-tab-container.active .search-filter-wrap { display: flex; }
.search-filter-title { width: 100px; font-size: 16px; }
.search-filter-btn-wrap { display: flex; gap: 16px; align-items: center; }
.search-filter-btn { width: 140px; height: 42px; display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 16px; font-weight: 300; }
.search-filter-btn.submit-btn { background-color: #1371b1; border: 1px solid #1371b1; color: #fff; }
.search-filter-btn.reset-btn { background-color: #fff; border: 1px solid #202020; }
.search-filter-list { display: flex; flex-flow: wrap; width: calc( 100% - 100px - 296px ); gap: 8px 16px; }
.search-filter-item { display: flex; gap: 12px; align-items: center; height: 40px; padding: 0 20px; border-radius: 20px; background-color: #f5f5f5; border: 1px solid #e4e4e4; }
.search-filter-item .item-icon { font-size: 16px; }
.search-filter-item .item-icon .xi-plus { display: none; color: #1371b1; }
.search-filter-item .item-icon .xi-check { color: #a4a4a4; }
.search-filter-item .item-txt { font-size: 15px; white-space: nowrap; }
.search-filter-label input:checked + .search-filter-item { background-color: #fff; border-color: #1371b1; }
.search-filter-label input:checked + .search-filter-item .item-icon .xi-plus { display: block; }
.search-filter-label input:checked + .search-filter-item .item-icon .xi-check { display: none; }
.search-filter-label input:checked + .search-filter-item .item-txt { color: #1371b1; }

.search-result-section .title-wrap { display: flex; justify-content: space-between; padding-bottom: 24px; border-bottom: 1px solid #222; }
.search-result-section .title-wrap .title { font-size: 24px; font-weight: bold; padding-left: 16px; position: relative; }
.search-result-section .title-wrap .title::after { content: ''; width: 5px; height: 28px; background-color: #0a4c78; display: block; position: absolute; left: 0; top: 0; }
.search-result-section .title-wrap .title .num { font-size: 16px; font-weight: 600; }
.search-result-section .title-wrap .more-btn { display: flex; gap: 4px; align-items: center; font-size: 14px; color: #a2a2a2; }
.search-board-wrap .board-item { padding: 24px 0; }
.search-board-wrap .board-item:hover { background: none; }
.search-board-wrap .board-item:hover .title { color: #1371b1; }
.search-board-wrap .board-item .img-wrap { width: 270px; height: 180px; }
.search-board-wrap .board-item .img-wrap img { height: 100%; object-fit: cover; object-position: center; }
.search-board-wrap .board-item .img-wrap + .txt-wrap { width: calc( 100% - 72px - 310px ); }
.search-board-wrap .board-item .category { font-size: 14px; color: #1371b1;}
.search-board-wrap .board-item .txt { -webkit-line-clamp: 3; height: calc(( 16px * 1.5 ) * 3); }
.search-board-wrap .board-item .txt * { white-space: nowrap; font-size: 16px; font-weight: normal; line-height: 1.5 !important; }

.search-null-wrap { display: flex; flex-flow: column; justify-content: center; text-align: center; padding: 80px 0; gap: 48px; }
.search-null-wrap .icon { font-size: 64px; color: #1371b1; }
.search-null-wrap .txt { font-size: 28px; }

@media screen and (max-width: 1280px) {
  .search-result-top { padding-top: 104px; padding-bottom: 40px; }
  .search-result-title { font-size: 20px; margin-bottom: 24px; }
  .total-search-input { padding-left: 24px; padding-right: 64px; height: 64px; border-width: 2px; font-size: 16px; }
  .total-search-btn { right: 8px; }
  .total-search-title { margin-top: 24px; font-size: 16px; }
  .search-result-wrap { padding-top: 48px; padding-bottom: 80px; }
  .search-tab-container { margin-bottom: 40px; }
  .search-tab { width: 90px; height: 64px; border-width: 1px; line-height: unset; display: flex; flex-flow: column; align-items: center; gap: 4px; justify-content: center; font-size: 15px; }
  .search-tab .num { font-size: 13px; }
  .search-filter-toggle-btn { top: -32px; }
  .search-filter-toggle-btn p { font-size: 13px; }
  .search-filter-wrap { background-color: none; border-radius: 0; padding: 0; flex-flow: wrap; width: calc( 100% + 32px ); margin-left: -16px; }
  .search-filter-title { width: 88px; padding-left: 16px; }
  .search-filter-btn-wrap { width: 100%; gap: 8px; justify-content: center; margin-top: 16px; padding: 0 16px; }
  .search-filter-btn { width: 100%; max-width: 200px; }
  .search-filter-list { flex-flow: row; width: calc( 100% - 88px ); gap: 8px; overflow: auto; padding-right: 16px; }
  .search-filter-list::-webkit-scrollbar { display: none; }
  .search-filter-item { gap: 8px; padding: 0 16px; }
  .search-filter-item .item-icon { font-size: 14px; }
  .search-filter-item .item-txt { font-size: 13px; }

  .search-result-section .title-wrap { padding-bottom: 16px; }
  .search-result-section .title-wrap .title { font-size: 18px; padding-left: 12px; }
  .search-result-section .title-wrap .title::after { width: 4px; height: 22px; }
  .search-result-section .title-wrap .title .num { font-size: 13px; }
  .search-result-section .title-wrap .more-btn { font-size: 13px; }
  .search-board-wrap { display: flex; flex-flow: wrap; gap: 0 16px; }
  .search-board-wrap .board-item { width: calc( 50% - 8px ); flex-flow: column; gap: 16px; }
  .search-board-wrap .board-item .img-wrap { width: 100%; height: 200px; }
  .search-board-wrap .board-item .img-wrap + .txt-wrap { max-width: unset; width: 100%; }
  .search-board-wrap .board-item .txt-wrap { max-width: unset; width: 100%; }
  .search-board-wrap .board-item .btn { display: none; }
  .search-board-wrap .board-item .txt { height: calc(( 14px * 1.5 ) * 3); }
  .search-board-wrap .board-item .txt * {font-size: 14px; }

  .search-null-wrap { padding: 40px 0; gap: 24px; }
  .search-null-wrap .icon { font-size: 40px; }
  .search-null-wrap .txt { font-size: 18px; }
}
@media screen and (max-width: 640px) {
  .search-board-wrap .board-item { width: 100%; }
}