/* header */
header .header-main {transition:all ease 0.5s; padding:14px 42px; position:fixed; left:50%; top:40px; transform:translateX(-50%); width:calc(100% - 30px); max-width:1440px; background:#fff; border-radius:120px; box-shadow:0 4px 10px rgba(0,0,0,0.04); z-index:9999;}
header .header-main .container {display:flex; flex-wrap:wrap; align-items:center;}
header .header-main h1 {flex:1; min-width:0;}
header .header-main h1 a img {width:182px;}
header .header-main .main-button {flex:1; min-width:0; display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:0 5px;}
header .header-main .main-button .btn {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; border-radius:50px; height:25px; padding:0 24px; font-size:14px; font-weight:500; color:#fff; background:var(--color-indigo);}
header .header-main .main-button .menu {display:none;}
header .header-main .main-cate .cate-head {display:none;}
header .header-main .main-cate .cate-body ul {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:0 42px;}
header .header-main .main-cate .cate-body ul li a {font-size:16px; font-weight:600; color:var(--color-indigo);}
header .header-main .main-cate .cate-body ul li a:hover {color:var(--color-active);}
header .header-main .main-cate .cate-body ul li.active a {color:var(--color-active); font-weight:700;}
header.scroll .header-main {max-width:100%; border-radius:0; top:0; width:100%;}
@media (max-width:1300px){
header .header-main {padding:14px 15px;}
}
@media (max-width:991px){
header .header-main {max-width:100%; border-radius:0; top:0; width:100%; left:0; padding:14px 0; transform:none;}
header .header-main .main-button .btn {display:none;}
header .header-main .main-button .menu {display:block; width:30px; height:30px; font-size:0; background:url('../images/icon_menu.svg') no-repeat center / cover;}
header .header-main .main-cate {pointer-events:none; opacity:0; position:fixed; left:0; top:0; width:100%; height:100%; z-index:9999; transition:all ease 0.5s; background:rgba(0,0,0,0.5);}
header .header-main .main-cate .box {pointer-events:none; opacity:0; position:absolute; right:-20px; top:0; width:280px; height:100%; background:#fff; overflow:hidden; display:flex; flex-direction:column; transition:all ease 0.5s;}
header .header-main .main-cate .cate-head {width:100%; padding:15px; border-bottom:1px solid #ddd; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;}
header .header-main .main-cate .cate-head h2 img {width:122px;}
header .header-main .main-cate .cate-head .close {width:24px; height:24px; font-size:0; background:url('../images/icon_close.svg') no-repeat center / cover;}
header .header-main .main-cate .cate-head .btn {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; height:25px; border-radius:50px; padding:0 15px; font-size:13px; color:#fff; font-weight:500; background:var(--color-indigo);}
header .header-main .main-cate .cate-body {width:100%; height:100%; overflow-y:auto;}
header .header-main .main-cate .cate-body ul {height:100%; align-content:center; gap:15px 0;}
header .header-main .main-cate .cate-body ul li {width:100%;}
header .header-main .main-cate .cate-body ul li a {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; font-size:20px; font-weight:600;}
header.fixed .header-main .main-cate {pointer-events:inherit; opacity:1;}
header.fixed .header-main .main-cate .box {pointer-events:inherit; opacity:1; right:0;}
}

/* footer */
footer {background:#000; padding:60px 0;}
footer .container {display:flex; flex-wrap:wrap; align-items:center; flex-direction:row-reverse;}
footer h2 img {width:144px;}
footer ul {flex:1; min-width:0; padding:0 50px 0 0;}
footer ul li {margin:0 0 24px; display:flex; flex-wrap:wrap; gap:12px 24px;}
footer ul li p {color:#DADADA;}
footer ul li p b {color:#DADADA; font-weight:600;}
@media (max-width:991px){
footer {padding:30px 0;}
footer h2 {width:100%;}
footer ul {flex:none; width:100%; padding:0; margin:20px 0 0;}
footer ul li {margin:0 0 15px; gap:3px 0;}
footer ul li p {width:100%; font-size:13px;}
footer ul li p b {font-size:13px;}
footer ul li p a {font-size:13px;}
}

/* section */
section {padding:0 0 100px;}
@media (max-width:991px){
section {padding:60px 0;}
}

/* main-title */
.main-box .main-title {margin:0 0 42px;}
.main-box .main-title h2 {text-align:center; word-break:keep-all; font-size:52px; font-weight:700; background:linear-gradient(90deg, #0066B5, #3CBBAF); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; color:transparent;}
.main-box .main-title p {margin:5px 0 0; font-size:24px; font-weight:600; text-align:center; word-break:keep-all; color:#5B5A5D;}
@media (max-width:991px){
.main-box .main-title {margin:0 0 24px;}
.main-box .main-title h2 {font-size:30px;}
.main-box .main-title p {font-size:18px;}
}

/* main-card */
.main-box .main-card {padding:100px 0;}
.main-box .main-card .inner ul {display:flex; flex-wrap:wrap; margin:0 -15px -30px;}
.main-box .main-card .inner ul li {width:calc(50% - 30px); margin:0 15px 30px; padding:60px 0 28px 60px; border-radius:20px; position:relative;}
.main-box .main-card .inner ul li strong {font-size:34px; font-weight:700; color:#5B5A5D; word-break:keep-all; display:block;}
.main-box .main-card .inner ul li p {margin:25px 0 0; font-size:24px; color:#898989; word-break:keep-all; padding:0 60px 0 0;}
.main-box .main-card .inner ul li p b {font-size:24px; font-weight:600; color:#898989;}
.main-box .main-card .inner ul li .button-box {margin:140px 0;}
.main-box .main-card .inner ul li:before {position:absolute; right:0; bottom:0; width:345px; height:320px; content:""; background-size:cover; background-position:center;}
.main-box .main-card .inner ul li:nth-of-type(1) {background:#F9F9F9;}
.main-box .main-card .inner ul li:nth-of-type(2) {background:#EEF9FF;}
.main-box .main-card .inner ul li:nth-of-type(3) {background:#F4FFEE;}
.main-box .main-card .inner ul li:nth-of-type(4) {background:#FFF7E9;}
.main-box .main-card .inner ul li:nth-of-type(5) {background:#F9F9F9;}
.main-box .main-card .inner ul li:nth-of-type(1):before {background-image:url('../images/icon_main_service_02.png'); background-size:contain; background-repeat:no-repeat; background-position:right bottom;}
.main-box .main-card .inner ul li:nth-of-type(2):before {background-image:url('../images/img_main_card_02.png');}
.main-box .main-card .inner ul li:nth-of-type(3):before {background-image:url('../images/img_main_card_04.png');}
.main-box .main-card .inner ul li:nth-of-type(4):before {background-image:url('../images/img_main_card_03.png');}
.main-box .main-card .inner ul li:nth-of-type(5):before {background-image:url('../images/icon_main_service_01.png'); background-size:contain; background-repeat:no-repeat; background-position:right bottom;}
/* 정기결제 수납관리서비스 : 분할하지 않고 전체 폭으로 처리 */
.main-box .main-card .inner ul li.wide {width:calc(100% - 30px);}
.main-box .main-card .inner ul li.wide p {padding:0 400px 0 0;}
.main-box .main-card .inner ul li.wide .button-box {margin:40px 0 0;}
@media (max-width:991px){
.main-box .main-card {padding:50px 0;}
.main-box .main-card .inner ul {margin:0;}
.main-box .main-card .inner ul li {width:100%; margin:0 0 20px; padding:20px 0 15px 20px; border-radius:10px;}
.main-box .main-card .inner ul li:last-of-type {margin:0;}
.main-box .main-card .inner ul li strong {font-size:20px;}
.main-box .main-card .inner ul li p {font-size:16px; margin:15px 0 0;}
.main-box .main-card .inner ul li p b {font-size:16px;}
.main-box .main-card .inner ul li .button-box {margin:70px 0;}
.main-box .main-card .inner ul li:before {width:245px; height:220px;}
.main-box .main-card .inner ul li.wide {width:100%;}
.main-box .main-card .inner ul li.wide p {padding:0 20px 0 0;}
.main-box .main-card .inner ul li.wide .button-box {margin:70px 0;}
}
@media (max-width:575px){
.main-box .main-card .inner ul li .button-box {margin:35px 0 50px;}
.main-box .main-card .inner ul li:before {width:185px; height:160px;}
.main-box .main-card .inner ul li p br {display:none;}
.main-box .main-card .inner ul li.wide .button-box {margin:35px 0 50px;}
}

/* main-manage */
.main-box .main-manage {padding:120px 0; background:url('../images/bg_main_manage.png') no-repeat center / cover; background-attachment:fixed;}
.main-box .main-manage .main-title h2 {color:#fff; background:none; background-clip:inherit; -webkit-text-fill-color:inherit;}
.main-box .main-manage .main-title p {color:#fff;}
.main-box .main-manage .inner ul {display:flex; flex-wrap:wrap; gap:0 30px;}
.main-box .main-manage .inner ul li {flex:1; min-width:0;}
.main-box .main-manage .inner ul li:before {display:block; content:""; width:92px; height:92px; margin:0 auto 15px; background-size:cover; background-position:center;}
.main-box .main-manage .inner ul li p {text-align:center; font-size:28px; font-weight:700; color:#fff;}
.main-box .main-manage .inner ul li:nth-of-type(1):before {background-image:url('../images/icon_main_manage_01.png');}
.main-box .main-manage .inner ul li:nth-of-type(2):before {background-image:url('../images/icon_main_manage_02.png');}
.main-box .main-manage .inner ul li:nth-of-type(3):before {background-image:url('../images/icon_main_manage_03.png');}
.main-box .main-manage .inner ul li:nth-of-type(4):before {background-image:url('../images/icon_main_manage_04.png');}
@media (max-width:991px){
.main-box .main-manage {padding:60px 0;}
.main-box .main-manage .inner ul {gap:0 15px;}
.main-box .main-manage .inner ul li:before {width:68px; height:68px; margin:0 auto 10px;}
.main-box .main-manage .inner ul li p {font-size:17px;}
}
@media (max-width:635px){
.main-box .main-manage .inner ul {gap:0;}
.main-box .main-manage .inner ul li {width:50%; flex:none; border-bottom:1px dashed rgba(255,255,255,0.3); border-right:1px dashed rgba(255,255,255,0.3); padding:15px 0;}
.main-box .main-manage .inner ul li:nth-of-type(even) {border-right:0;}
.main-box .main-manage .inner ul li:nth-of-type(3),
.main-box .main-manage .inner ul li:nth-of-type(4) {border-bottom:0;}
}

/* main-service */
.main-box .main-service {padding:100px 0 0;}
.main-box .main-service ul {display:flex; flex-wrap:wrap; gap:0 50px;}
.main-box .main-service ul li {flex:1; min-width:0;}
.main-box .main-service ul li .inner strong {font-size:42px; font-weight:700; word-break:keep-all;}
.main-box .main-service ul li .inner p {margin:15px 0 0; font-size:24px; font-weight:600; color:#898989; word-break:keep-all;}
.main-box .main-service ul li:before {display:block; content:""; width:251px; height:214px; background-size:cover; background-position:center; margin:0 0 15px;}
.main-box .main-service ul li:nth-of-type(1):before {background-image:url('../images/icon_main_service_01.png');}
.main-box .main-service ul li:nth-of-type(2):before {background-image:url('../images/icon_main_service_02.png');}
@media (max-width:991px){
.main-box .main-service {padding:50px 0 0;}
.main-box .main-service ul {gap:0;}
.main-box .main-service ul li {flex:none; width:100%; margin:0 0 50px;}
.main-box .main-service ul li:last-of-type {margin:0;}
.main-box .main-service ul li .inner strong {font-size:20px; text-align:center; display:block;}
.main-box .main-service ul li .inner p {font-size:16px; margin:10px 0 0; text-align:center;}
.main-box .main-service ul li:before {width:201px; height:164px; margin:0 auto 10px;}
}

/* main-banner */
.main-banner {position:relative;}
.main-banner .swiper-container {overflow:hidden;}
.main-banner .swiper-slide {position:relative; background-size:cover; background-position:center;}
.main-banner .swiper-slide:before {display:block; content:""; padding-bottom:37%;}
.main-banner .swiper-slide .container {position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:100%;}
.main-banner .swiper-slide b {display:block; text-align:center; font-size:32px; color:#fff; word-break:keep-all;}
.main-banner .swiper-slide p {font-size:24px; text-align:center; font-weight:600; color:#fff; word-break:keep-all;}
.main-banner .swiper-slide h2 {margin:24px 0 12px; text-align:center; font-size:62px; font-weight:600; color:#fff; word-break:keep-all;}
.main-banner .swiper-control {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:15px; bottom:30px; width:100%; position:absolute;}
.main-banner .swiper-control > * {width:auto; position:static; margin:0;}
.main-banner .swiper-control > *:after {display:none;}
.main-banner .swiper-control .swiper-button-prev {width:64px; height:24px; background:url('../images/icon_swiper_prev.png') no-repeat center / cover;}
.main-banner .swiper-control .swiper-button-next {width:64px; height:24px; background:url('../images/icon_swiper_next.png') no-repeat center / cover;}
.main-banner .swiper-control .swiper-pagination {width:100px; height:2px;}
.main-banner .swiper-control .swiper-pagination.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background:#fff;}
@media (max-width:1300px){
.main-banner .swiper-slide:before {padding-bottom:50%;} 
}
@media (max-width:991px){
.main-banner .swiper-slide b {font-size:20px;}
.main-banner .swiper-slide p {font-size:16px;}
.main-banner .swiper-slide h2 {margin:10px 0; font-size:40px;}
}
@media (max-width:767px){
.main-banner .swiper-slide:before {padding-bottom:70%;}
}
@media (max-width:520px){
.main-banner .swiper-slide:before {padding-bottom:120%;}
.main-banner .swiper-slide b {font-size:18px;}
.main-banner .swiper-slide p {font-size:15px;}
.main-banner .swiper-slide h2 {font-size:35px;}
.main-banner .swiper-control {bottom:15px;}
}

/* animation-box */
.scroll_on > * {opacity:0; transition:all ease-in-out 0.5s;}
.scroll_on.type_top > * {transform:translateY(-80px);}
.scroll_on.type_bottom > * {transform:translateY(80px);}
.scroll_on.type_left > * {transform:translateX(-80px);}
.scroll_on.type_right > * {transform:translateX(80px);}
.scroll_on > *.on {opacity:1; transform:translate(0, 0);}
.scroll_on.on > * {opacity:1; transform:translate(0, 0);}

.delay01 {transition-delay:0.1s !important;}
.delay02 {transition-delay:0.2s !important;}
.delay03 {transition-delay:0.3s !important;}
.delay04 {transition-delay:0.4s !important;}
.delay05 {transition-delay:0.5s !important;}
.delay06 {transition-delay:0.6s !important;}
.delay07 {transition-delay:0.7s !important;}
.delay08 {transition-delay:0.8s !important;}
.delay09 {transition-delay:0.9s !important;}
.delay10 {transition-delay:1s !important;}
.delay15 {transition-delay:1.5s !important;}
.delay20 {transition-delay:2s !important;}
.delay25 {transition-delay:2.5s !important;}
.delay30 {transition-delay:3s !important;}
.delay35 {transition-delay:3.5s !important;}
.delay40 {transition-delay:4s !important;}

/* sub-top-box */
.sub-top-box {background:url('../images/bg_sub_top.png') no-repeat center / cover; padding:160px 0 100px; margin:0 0 100px;}
.sub-top-box h2 {font-size:52px; font-weight:600; text-align:center; color:#fff; word-break:keep-all; line-height:1.3; margin:0 0 15px;}
.sub-top-box p {font-size:24px; text-align:center; color:#fff; word-break:keep-all; margin:0 0 24px;}
.sub-top-box p:last-of-type {margin:0; color:#00FFE8;}
@media (max-width:991px){
.sub-top-box {padding:50px 0; margin:0 0 50px;}
.sub-top-box h2 {font-size:30px;}
.sub-top-box p {font-size:18px;}
}
@media (max-width:700px){
.sub-top-box p br {display:none;}
}

/* sub-list-box */
.sub-list-box > ul > li {margin:0 0 42px; padding:60px; background:#F9F9F9; border-radius:20px; display:flex; flex-wrap:wrap;}
.sub-list-box > ul > li:last-of-type {margin:0;}
.sub-list-box > ul > li .list-left {flex:1; min-width:0; padding:0 50px 0 0;}
.sub-list-box > ul > li .list-left h3 {font-size:38px; font-weight:600; color:#5B5A5D; word-break:keep-all; margin:0 0 15px;}
.sub-list-box > ul > li .list-left ul {padding:0 0 0 20px;}
.sub-list-box > ul > li .list-left ul li {list-style:disc; font-size:24px; color:#4A4A4A; word-break:keep-all; margin:0 0 5px;}
.sub-list-box > ul > li .list-left ul li:last-of-type {margin:0;}
.sub-list-box > ul > li .list-left ul li b {font-size:24px; font-weight:600; color:#4C7FB2; word-break:keep-all;}
.sub-list-box > ul > li .list-left ul li dl {margin:12px 0 0;}
.sub-list-box > ul > li .list-left ul li dl dt {font-size:20px; font-weight:600; color:#898989; word-break:keep-all;}
.sub-list-box > ul > li .list-left ul li dl dd {font-size:20px; color:#898989; word-break:keep-all;}
.sub-list-box > ul > li .list-left ul li p {font-size:20px; font-weight:500; color:#898989; word-break:keep-all;}
.sub-list-box > ul > li .list-left .image {max-width:60%; margin:42px 0 0;}
.sub-list-box > ul > li .list-left .image img {width:100%;}
.sub-list-box > ul > li .list-right {width:345px;}
.sub-list-box > ul > li .list-right img {width:100%;}
.sub-list-box > ul > li .list-bottom {width:100%; margin:24px 0 0;}
.sub-list-box > ul > li .list-bottom .image {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; max-width:1015px; margin:0 auto;}
.sub-list-box > ul > li .list-bottom .image > div {display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.sub-list-box > ul > li .list-bottom .image > div:first-of-type {width:calc(40% - 20px); margin:0 20px 0 0;}
.sub-list-box > ul > li .list-bottom .image > div:last-of-type {width:calc(60% - 30px); margin:0 0 0 30px;}
.sub-list-box > ul > li .list-bottom .image > div img {width:100%;}
.sub-list-box > ul > li .list-bottom .image > div strong {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; border-radius:50px; margin:0 0 12px; background:#898989; color:#fff; height:40px; padding:0 40px; font-size:18px; font-weight:600;}
.sub-list-box > ul > li .list-bottom .card > ul {display:flex; flex-wrap:wrap; gap:0 20px;}
.sub-list-box > ul > li .list-bottom .card > ul > li {flex:1; min-width:0; background:#fff; padding:24px; border-radius:15px; border:1px solid #d9d9d9;}
.sub-list-box > ul > li .list-bottom .card > ul > li strong {font-size:20px; font-weight:600; color:#5B5A5D; word-break:keep-all;}
.sub-list-box > ul > li .list-bottom .card > ul > li p {margin:10px 0 0 ;font-size:20px; font-weight:500; color:#4A4A4A; word-break:keep-all;}
.sub-list-box > ul > li .list-bottom .card > ul > li ul {padding:0 0 0 20px;}
.sub-list-box > ul > li .list-bottom .card > ul > li ul li {list-style:disc; font-size:20px; font-weight:500; color:#898989; word-break:keep-all;}
@media (max-width:1200px){
.sub-list-box > ul > li {padding:30px; border-radius:15px;}
.sub-list-box > ul > li .list-left {padding:0 30px 0 0;}
}
@media (max-width:991px){
.sub-list-box > ul > li {margin:0 0 24px; padding:20px 15px; border-radius:10px; position:relative;}
.sub-list-box > ul > li .list-left {padding:0 20px 0 0;}
.sub-list-box > ul > li .list-left h3 {font-size:20px; margin:0 0 10px;}
.sub-list-box > ul > li .list-left ul li {font-size:16px;}
.sub-list-box > ul > li .list-left ul li b {font-size:16px;}
.sub-list-box > ul > li .list-left ul li p {font-size:15px;}
.sub-list-box > ul > li .list-left ul li dl {margin:8px 0 0;}
.sub-list-box > ul > li .list-left ul li dl dt {font-size:15px;}
.sub-list-box > ul > li .list-left ul li dl dd {font-size:15px;}
.sub-list-box > ul > li .list-left .image {margin:24px 0 0;}
.sub-list-box > ul > li .list-right {width:200px;}
.sub-list-box > ul > li .list-bottom .image > div:first-of-type {width:calc(40% - 5px); margin:0 5px 0 0;}
.sub-list-box > ul > li .list-bottom .image > div:last-of-type {width:calc(60% - 10px); margin:0 0 0 10px;}
.sub-list-box > ul > li .list-bottom .image > div strong {height:35px; font-size:15px; padding:0 30px;}
.sub-list-box > ul > li .list-bottom .card > ul {gap:0 10px;}
.sub-list-box > ul > li .list-bottom .card > ul > li {padding:15px; border-radius:10px;}
.sub-list-box > ul > li .list-bottom .card > ul > li strong {font-size:16px;}
.sub-list-box > ul > li .list-bottom .card > ul > li p {font-size:15px;}
.sub-list-box > ul > li .list-bottom .card > ul > li p {font-size:15px;}
.sub-list-box > ul > li .list-bottom .card > ul > li ul li {font-size:15px;}
}
@media (max-width:650px){
.sub-list-box > ul > li .list-left {padding:0; flex:none; width:100%; position:relative;}
.sub-list-box > ul > li .list-right {margin:-15px 0 0; width:100%; display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end;}
.sub-list-box > ul > li .list-right img {width:150px;}
.sub-list-box > ul > li .list-bottom .image > div {width:100% !important; margin:0 0 20px !important;}
.sub-list-box > ul > li .list-bottom .image > div:last-of-type {margin:0 !important;}
.sub-list-box > ul > li .list-bottom .card > ul {gap:0;}
.sub-list-box > ul > li .list-bottom .card > ul > li {flex:none; width:100%; margin:0 0 10px;}
.sub-list-box > ul > li .list-bottom .card > ul > li:last-of-type {margin:0;}
}

/* title-box */
.title-box {margin:0 0 24px;}
.title-box h3 {text-align:center; font-size:42px; font-weight:600; background:linear-gradient(90deg, #0066B5, #3CBBAF); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; color:transparent;}
@media (max-width:991px){
.title-box {margin:0 0 20px;}
.title-box h3 {font-size:25px;}
}

/* spec-box */
.spec-box ul {display:flex; flex-wrap:wrap; gap:0 24px;}
.spec-box ul li {flex:1; min-width:0; border:1px solid #D9D9D9; border-radius:20px; padding:42px 24px;}
.spec-box ul li strong {display:block; text-align:center; font-size:25px; font-weight:600; line-height:1.3; word-break:keep-all;}
.spec-box ul li p {margin:10px 0 0; font-size:18px; color:#4a4a4a; word-break:keep-all; text-align:center;}
.spec-box ul li:before {display:block; content:""; width:120px; height:120px; margin:0 auto 30px; background-size:cover; background-position:center;}
.spec-box ul li:nth-of-type(1):before {background-image:url('../images/icon_spec_01.png');}
.spec-box ul li:nth-of-type(2):before {background-image:url('../images/icon_spec_02.png');}
.spec-box ul li:nth-of-type(3):before {background-image:url('../images/icon_spec_03.png');}
.spec-box ul li:nth-of-type(4):before {background-image:url('../images/icon_spec_04.png');}
@media (max-width:991px){
.spec-box ul {gap:0 10px;}
.spec-box ul li {border-radius:10px; padding:24px 15px;}
.spec-box ul li strong {font-size:18px;}
.spec-box ul li p {font-size:15px;}
.spec-box ul li:before {width:80px; height:80px; margin:0 auto 15px;}
}
@media (max-width:767px){
.spec-box ul {gap:0; margin:0 -5px -10px;}
.spec-box ul li {width:calc(50% - 10px); margin:0 5px 10px; flex:none;}
}
@media (max-width:575px){
.spec-box ul {margin:0;}
.spec-box ul li {width:100%; margin:0 0 10px;}
.spec-box ul li:last-of-type {margin:0;}
}

/* char-box */
.char-box ul {display:flex; flex-wrap:wrap; margin:0 -20px -40px;}
.char-box ul li {width:calc(50% - 40px); margin:0 20px 40px; background:#EEF9FF; border-radius:20px; padding:75px 60px 200px; position:relative;}
.char-box ul li strong {font-size:32px; font-weight:600; color:#5B5A5D; display:block; word-break:keep-all;}
.char-box ul li p {margin:15px 0 0; font-size:20px; color:#4A4A4A; word-break:keep-all; font-weight:500;}
.char-box ul li:after {position:absolute; right:30px; bottom:30px; width:100px; height:100px; background-size:cover; background-position:center; content:"";}
.char-box ul li:nth-of-type(1):after {background-image:url('../images/icon_char_01.png');}
.char-box ul li:nth-of-type(2):after {background-image:url('../images/icon_char_02.png');}
.char-box ul li:nth-of-type(3):after {background-image:url('../images/icon_char_03.png');}
.char-box ul li:nth-of-type(4):after {background-image:url('../images/icon_char_04.png');}
@media (max-width:991px){
.char-box ul {margin:0 -5px -10px;}
.char-box ul li {width:calc(50% - 10px); margin:0 5px 10px; border-radius:10px; padding:20px 15px 80px;}
.char-box ul li strong {font-size:18px;}
.char-box ul li p {margin:10px 0 0; font-size:15px;}
.char-box ul li:after {width:60px; height:60px; right:15px; bottom:15px;}
}
@media (max-width:575px){
.char-box ul {margin:0;}
.char-box ul li {width:100%; margin:0 0 10px; padding:20px 15px 100px;}
.char-box ul li:last-of-type {margin:0;}
}

/* modal-box */
.modal-box {pointer-events:none; opacity:0; position:fixed; left:0; top:0; width:100%; height:100%; transition:all ease 0.5s; z-index:9999; background:rgba(0,0,0,0.7);}
.modal-box[aria-hidden="true"][inert] {user-select:none;}
.modal-box .box {pointer-events:none; opacity:0; padding:0 0 40px; position:absolute; left:50%; top:45%; width:calc(100% - 30px); transition:all ease 0.5s; transform:translate(-50%,-50%); background:var(--color-white); border-radius:15px; overflow:hidden; max-height:90%; display:flex; flex-direction:column;}
.modal-box .box .modal-head {padding:15px 20px; width:100%; display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end;}
.modal-box .box .modal-head h2 {flex:1; min-width:0; padding:0 20px 0 0; font-size:var(--font-xxl); font-weight:600;}
.modal-box .box .modal-head .close {width:20px; height:20px; font-size:0; background:url('../images/icon_close.svg') no-repeat center / cover;}
.modal-box .box .modal-body {padding:20px 20px 15px; width:100%; height:100%; overflow-y:auto;}
.modal-box .box .modal-body .modal-body-text strong {display:block; text-align:center; font-size:var(--font-lg); font-weight:500; margin:0 0 10px; word-break:keep-all;}
.modal-box .box .modal-body .modal-body-text p {text-align:center; font-size:var(--font-md); color:var(--color-gray-800); word-break:keep-all;}
.modal-box .box .modal-body .modal-body-list {margin:-15px 0;}
.modal-box .box .modal-body .modal-body-list ul li {border-bottom:1px solid var(--color-gray-300);}
.modal-box .box .modal-body .modal-body-list ul li:last-of-type {border:0;}
.modal-box .box .modal-body .modal-body-list ul li .link {display:flex; flex-wrap:wrap; align-items:center; padding:10px; font-size:var(--font-md); color:var(--color-gray-800);}
.modal-box .box .modal-body .modal-body-list ul li .link:hover {background:var(--color-gray-200);}
.modal-box .box .modal-body img {display:block; margin:0 auto 42px; width:182px;}
.modal-box .box .modal-body input {display:block; width:100%; height:52px; border-radius:8px; border:1px solid #bdbdbd; padding:0 15px; font-size:15px; margin:0 0 10px;}
.modal-box .box .modal-body input:last-of-type {margin:0;}
.modal-box .box .modal-foot {padding:15px 20px; width:100%;}
.modal-box .box .modal-foot .modal-link {margin:15px 0 0; text-align:center;}
.modal-box .box .modal-foot .modal-link a {font-size:15px; color:#5B5A5D; text-decoration:underline; text-underline-position:under;}
.modal-box .box .modal-foot .modal-link a:hover {color:var(--color-indigo);}
.modal-box.modal-xs .box {max-width:375px;}
.modal-box.modal-sm .box {max-width:500px;}
.modal-box.modal-md .box {max-width:800px;}
.modal-box.modal-lg .box {max-width:1200px;}
.modal-box.modal-left .box {width:calc(100% - 15px); max-width:320px; height:100%; max-height:100%; left:-15px; top:0; transform:none; border-radius:0 15px 15px 0;}
.modal-box.modal-right .box {width:calc(100% - 15px); max-width:320px; height:100%; max-height:100%; left:auto; right:-15px; top:0; transform:none; border-radius:15px 0 0 15px;}
.modal-box.modal-bottom .box {width:100%; max-width:100%; border-radius:15px 15px 0 0; top:auto; left:0; bottom:-15px; transform:none;}
.modal-box.modal-full .box {width:100%; max-width:100%; left:0; top:0; transform:scale(0.9); border-radius:0; height:100%; max-height:100%;}
.modal-box.fixed {pointer-events:inherit; opacity:1;}
.modal-box.fixed .box {pointer-events:inherit; opacity:1; top:50%;}
.modal-box.modal-left.fixed .box {left:0; top:0;}
.modal-box.modal-right.fixed .box {left:auto; right:0; top:0;}
.modal-box.modal-bottom.fixed .box {bottom:0; top:auto;}
.modal-box.modal-full.fixed .box {top:0; transform:scale(1);}
@media (max-width:991px){
.modal-box .box {border-radius:10px;}
.modal-box .box .modal-head {padding:15px;}
.modal-box .box .modal-head h2 {padding:0 15px 0 0;}
.modal-box .box .modal-body {padding:20px 15px 15px;}
.modal-box .box .modal-foot {padding:15px;}
.modal-box.modal-left .box {border-radius:0 10px 10px 0;}
.modal-box.modal-right .box {border-radius:10px 0 0 10px;}
}

/* join-box (온라인 가입 페이지) */
.join-box {max-width:900px; margin:0 auto;}
.join-box .join-section {margin:0 0 60px;}
.join-box .join-section:last-of-type {margin:0;}
.join-box .join-section > h3 {font-size:28px; font-weight:700; color:#5B5A5D; margin:0 0 20px; padding:0 0 0 16px; position:relative;}
.join-box .join-section > h3:before {position:absolute; left:0; top:8px; content:""; width:6px; height:24px; border-radius:3px; background:linear-gradient(180deg, #0066B5, #3CBBAF);}
.join-box .join-section > h4 {font-size:20px; font-weight:600; color:#4C7FB2; margin:24px 0 12px;}
.join-box .join-list {border-top:2px solid #5B5A5D;}
.join-box .join-list .row {display:flex; flex-wrap:wrap; align-items:center; border-bottom:1px solid #e2e2e2; padding:14px 0;}
.join-box .join-list .row .tit {width:220px; padding:0 15px; font-size:18px; font-weight:600; color:#5B5A5D; word-break:keep-all;}
.join-box .join-list .row .tit .req {color:#E5484D; font-size:18px; font-weight:600; margin:0 0 0 3px;}
.join-box .join-list .row .cont {flex:1; min-width:0; padding:0 15px;}
.join-box .join-list .row .cont > .desc {font-size:16px; color:#898989; margin:8px 0 0; word-break:keep-all;}
.join-box .inp-group {display:flex; flex-wrap:wrap; align-items:center; gap:10px;}
.join-box .inp-group > * {flex:1; min-width:0;}
.join-box .inp-group > .flex-none {flex:none;}
.join-box .inp {width:100%; height:52px; border:1px solid #d9d9d9; border-radius:8px; padding:0 15px; font-size:17px; color:#4A4A4A; background:#fff;}
.join-box .inp::placeholder {color:#b5b5b5;}
.join-box .inp:disabled {background:#f4f4f4; color:#898989;}
.join-box select.inp {background:url('../images/icon_arrow_down.svg') no-repeat right 15px center / 16px 16px; padding:0 40px 0 15px;}
.join-box .unit {font-size:17px; color:#5B5A5D; white-space:nowrap;}
.join-box .btn-line {flex:none; height:52px; padding:0 20px; border-radius:8px; border:1px solid #4C7FB2; color:#4C7FB2; font-size:16px; font-weight:600; display:inline-flex; flex-wrap:wrap; align-items:center; justify-content:center; white-space:nowrap;}
.join-box .btn-line:hover {background:#4C7FB2; color:#fff;}
.join-box .opt-group {display:flex; flex-wrap:wrap; align-items:center; gap:10px 24px;}
.join-box .opt {display:inline-flex; align-items:center; cursor:pointer; font-size:17px; color:#4A4A4A;}
.join-box .opt input {position:relative; width:22px; height:22px; margin:0 8px 0 0; border:1px solid #b5b5b5; background:#fff; cursor:pointer; flex:none;}
.join-box .opt input[type="radio"] {border-radius:50%;}
.join-box .opt input[type="checkbox"] {border-radius:5px;}
.join-box .opt input[type="radio"]:checked {border-color:#4C7FB2; background:radial-gradient(#4C7FB2 0 45%, #fff 46% 100%);}
.join-box .opt input[type="checkbox"]:checked {border-color:#4C7FB2; background:#4C7FB2;}
.join-box .opt input[type="checkbox"]:checked:before {position:absolute; left:7px; top:3px; content:""; width:6px; height:11px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);}
.join-box .join-agree {margin:24px 0 0; border:1px solid #e2e2e2; border-radius:15px; padding:24px 30px; background:#F9F9F9;}
.join-box .join-agree .agree-row {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; margin:0 0 12px;}
.join-box .join-agree .agree-row:last-of-type {margin:0;}
.join-box .join-agree .agree-row .link {font-size:16px; color:#898989; text-decoration:underline; text-underline-position:under; white-space:nowrap;}
.join-box .join-notice {margin:24px 0 0; font-size:17px; color:#5B5A5D; word-break:keep-all; text-align:center;}
.join-box .join-notice em {display:block; font-size:16px; color:#898989; margin:5px 0 0;}
.join-box .join-cert {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:15px; margin:30px 0 0;}
.join-box .join-cert .btn {flex:1; max-width:240px; height:60px; border-radius:50px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; font-size:19px; font-weight:600; color:#fff; background:linear-gradient(90deg, #0066B5, #3CBBAF);}
.join-box .join-cert .btn:hover {opacity:0.8;}
@media (max-width:991px){
.join-box .join-section {margin:0 0 40px;}
.join-box .join-section > h3 {font-size:20px; padding:0 0 0 12px;}
.join-box .join-section > h3:before {width:4px; height:18px; top:6px;}
.join-box .join-section > h4 {font-size:17px; margin:20px 0 10px;}
.join-box .join-list .row {padding:12px 0; align-items:flex-start; flex-direction:column;}
.join-box .join-list .row .tit {width:100%; padding:0 0 8px; font-size:16px;}
.join-box .join-list .row .tit .req {font-size:16px;}
.join-box .join-list .row .cont {width:100%; flex:none; padding:0;}
.join-box .join-list .row .cont > .desc {font-size:15px;}
.join-box .inp {height:46px; font-size:16px;}
.join-box .btn-line {height:46px; font-size:15px; padding:0 15px;}
.join-box .unit {font-size:16px;}
.join-box .opt {font-size:16px;}
.join-box .opt input {width:20px; height:20px;}
.join-box .opt input[type="checkbox"]:checked:before {left:6px; top:3px; width:5px; height:10px;}
.join-box .join-agree {padding:20px; border-radius:10px;}
.join-box .join-agree .agree-row .link {font-size:15px;}
.join-box .join-notice {font-size:16px;}
.join-box .join-notice em {font-size:15px;}
.join-box .join-cert {gap:10px; margin:24px 0 0;}
.join-box .join-cert .btn {flex:none; width:100%; max-width:100%; height:52px; font-size:17px;}
}
@media (max-width:575px){
.join-box .inp-group {gap:8px;}
.join-box .inp-group > * {flex:none; width:100%;}
.join-box .inp-group > .flex-none {width:auto;}
.join-box .opt-group {gap:10px 16px;}
}