@charset "UTF-8";

html{font-size: 18px;} 
body {min-width: 320px; width:100%; min-height:100vh; display: flex; flex-direction: column; justify-content: space-between; font-size: inherit !important; word-break:keep-all;
    /* 텍스트 렌더링 최적화 */
    -webkit-font-smoothing: antialiased; /* Webkit 기반 브라우저 (Chrome, Safari 등) */
    -moz-osx-font-smoothing: grayscale; /* macOS 기반 브라우저 */
    text-rendering: optimizeLegibility; /* 텍스트의 가독성 향상 */
    overflow-x:hidden;
}
body:has(.page-content.application){min-width: 1080px; overflow: auto;}

/* custom scrollbar */
::-webkit-scrollbar{width:6px; height:6px;}  
/* Track */
::-webkit-scrollbar-track {background:#ddd;}  
/* Handle */
::-webkit-scrollbar-thumb {background:#999; border-radius:3px;}  
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {background:#666;}

[data-aos] {
    opacity: 0;
    transition-property: opacity, transform;
    transition-duration: 800ms; /* AOS 기본 설정에 맞춰야 함 */
    transition-timing-function: ease-out;
}
[data-aos].aos-animate {
    opacity: 1;
    transform: translateY(0);
}

.sr-only{position: absolute; width: 1px; height: 1px;padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;}

/* text */
.text-gray {color:#969494;}
.text-red {color: #ef5350;}
.error{color: var(--danger-rgb);}
.spacing-3 {letter-spacing:3px;}
.txt-under{border-bottom:.1rem solid var(--black);}

/* align */
.centered {position:relative; width:100vw; height:100vh; display:flex; align-items:center; justify-content:center;}
.flex-start {display:flex; align-items:center; justify-content:flex-start; flex-wrap:nowrap;}
.flex-between {position:relative; width:100%; display:flex; align-items:center; justify-content:space-between;}
.flex-end {position:relative; width:100%; display:flex; align-items:center; justify-content:flex-end;}
.flex-column {display:flex;}

/* icon */
.success-ring {border-color:rgba(103, 177, 115, .3); position: absolute; z-index: 2; top: -0.25em; left: -0.25em; box-sizing: content-box; width: 100%; height: 100%; border: .25em solid rgba(165, 220, 134, .3); border-radius: 50%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-family: inherit; line-height: 5em; cursor: default; user-select: none;}
.guide-information:before{content: '!'; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-right: 4px; font-size: 12px; font-weight: 500; color: inherit; line-height: 1; vertical-align: middle; border: 1.5px solid var(--body-color); border-radius: 50%;}

/* badge */
.badge.writing {color:#0072ad; background-color:rgba(0,119,200,0.1);}
.badge.completed {color:#357a19; background-color:rgba(103,177,115,0.1);}
.badge.end {color:var(--second-color); background-color:rgba(73,80,87,0.1);}

/* list */
ol, ul {padding:0; margin:0;}
.page-content .dash-list {list-style:none; display:block; padding-left:0; margin:0;}
.page-content .dash-list li{font-size: .9rem;}
.page-content .dash-list li:before {content:"-"; position:absolute; left:0;}
.page-content .doted-list > li {padding-left: 16px; font-size: .9rem;}
.page-content .doted-list > li .text-danger {color:#e71d1d !important;}
.page-content .doted-list > li + li {margin-top:4px;}
.page-content .doted-list > li > .dash-list {margin-top:4px;}
.page-content .doted-list.d-flex {flex-direction:column; gap:5px;}
.page-content .doted-list.d-flex li {height:26px;}
.reference-mark-list {list-style:none; display:block; padding-left:0; margin:0;}
.reference-mark-list li {position:relative; display:block; padding-left:12px; color:var(--body-color); font-size:12px; font-weight:500; line-height:1.4; text-align:left; word-break:keep-all;}
.reference-mark-list li:before {content:"※"; position:absolute; left:0;}
.inner-num-list.type-2 {display:flex; flex-direction:column; list-style-position:outside; padding:0; margin:0 0 0 20px !important; gap:5px !important;}
.inner-num-list.type-2 li {font-size:15px; font-weight:400; word-break:keep-all;}
.guide-list {display:block; list-style:none; margin:0; padding:0; word-break:keep-all;}
.guide-list li {position:relative; margin-top:4px; padding-left:14px; color:#E91916; font-size:13px; line-height:1.4;}
.guide-list li:before {content:"※"; position:absolute; left:0; top:0; font-size:18px; line-height:1;}
.ol-list-wrap {display: flex; flex-direction: column; gap: 6rem;}
.ol-list-wrap > li{list-style-position: inside;}
.ol-list-wrap > li::marker {font-family:"Pretendard", sans-serif; font-size: 1.4rem; font-weight:600; color:#1d1d1f;}
@counter-style korean-alphabet {
    system: alphabetic;
    symbols: '가' '나' '다' '라' '마' '바' '사' '아' '자' '차' '카' '타' '파' '하';
    suffix: '. ';
}
.korean-list {list-style:korean-alphabet; margin-left:0; padding-left:20px;}
.korean-list li {margin-top:4px;}

/* input */
textarea {width:100%; text-indent:0; line-height:1.5; padding:0; resize:none; word-break:keep-all; overflow-wrap:break-word; text-align:left;}
input::-ms-reveal{display: none;}
input[type="date"] {background:#fff;}
input[type="checkbox"] + label,
input[type="radio"] + label{cursor: pointer;}
.input-group{background:#fff;}
.input-group .btn.clear-btn {position:absolute; right:80px; top:50%; transform: translateY(-50%); display:none; width:16px; height:16px; margin-right:10px; padding:0; text-align:center; font-size:12px; line-height:16px; background-color:rgba(150,148,148,0.3); border:none; border-radius:50% !important; color:#1d1d1f; cursor:pointer; z-index:10;}

/* form */
.form-control{font-size: 14px;}
.form-control[readonly], 
.form-control:disabled{background: var(--input-disabled-bg);}
.form-control.border-0 {padding-right: 0; padding-left: 0; background: none;;}
.form-control.was-validated {border:1px solid var(--danger)}
.form-control.post-code {max-width:100px;}
.form-control.road-adress{flex: 1;}
.form-control.detail-adress {max-width:400px;}
.form-check-input {background-color:var(--white);}
.form-check-inline + .form-check-inline {margin-left:24px;}
.form-check .form-check-input{margin-left: 0; margin-right: 6px;}
.form-table {list-style:none; position: relative; width:100%; margin:0; padding:0; border-top:2px solid var(--primary);}
.form-table + div > .form-table {border-top:0;}
.form-table li {list-style:none; width:100%; display:table; border-right:1px solid var(--table-border-color);}
.form-table .th {display:table-cell; width:20%; min-height:45px; padding:12px 10px; font-size: 16px; border-left:1px solid var(--table-border-color); border-bottom:1px solid var(--table-border-color); vertical-align:middle; background-color:var(--table-th-bg); text-align:center;}
.form-table .th.col-md-2 {width:170px; min-width:170px; max-width:170px;} 
.form-table .td {position:relative; display:table-cell; min-height:45px; padding:12px 10px; border-left:1px solid var(--table-border-color); border-bottom:1px solid var(--table-border-color); vertical-align:middle;}
.form-table .td:before {content:""; display:inline-block; position:absolute; left:0; top:0; bottom:0; width:1px; height:45px;}
.form-table .td .btn:focus-visible {outline:3px solid var(--black);}
.form-table .table-divider {width:calc(100% + 20px); margin:12px -10px;}
.form-table .form-label {color:var(--body-color); font-size:.9rem; font-weight:500;}
.form-table .email-form {position:relative; width:100%; display:flex; flex-wrap:nowrap; align-items:flex-start;}
.form-table .email-form .email-info {display:flex; flex: 1;}
.form-table .email-form .input-wrap {display:flex; flex-wrap:nowrap; align-items:center; gap:5px; width: 100%;}
.form-table .email-form .input-wrap > div {width: 33.33%;}
.form-table .email-form .btn-wrap {position:relative; margin-left:10px;}
.form-table .email-form .btn-wrap > div {width:100%; flex-wrap:nowrap; align-items:center; gap:5px; }
.form-table .email-form .btn-wrap > div.step-2 > * {flex:1; text-align:center;}
.form-table .email-form .btn-wrap > div.step-3 > * {flex:1; max-width:120px;}
.form-table .required:after {content:"*"; display:inline; margin-left:5px; color:var(--danger)}
.form-select {cursor:pointer;}
.form-select.disability {max-width:120px;}
.form-guide {font-weight:400; font-size: .85rem;}
.email-form .btn-wrap .step-2,
.email-form .btn-wrap .step-3 {display:none;}

/* table */
.table-area {position:relative; width:100%; height:100%; overflow-x:auto;}
.table-area + .guide-list {margin-top:16px;}
.table {min-width: 640px; width: 100%; border-top:2px solid var(--primary); border-right:1px solid var(--table-border-color);}
.table tr.selected td {background-color:rgba(65,199,244,0.1);}
.table thead th, 
.table tbody th{font-size: .9rem; white-space: initial;}
.table > tbody td {word-break:break-all;}
.table td{font-size: .9rem; vertical-align:middle;}
.table.form-table tr:nth-child(even) td {background-color:var(--white);}
.table.center th,
.table.center td {text-align:center; padding:12px 16px; color:var(--body-color); border-left:1px solid var(--table-border-color); border-bottom:1px solid var(--table-border-color);}
.table.center th {font-weight:500; background-color:var(--table-header-color);}
.td-left td{text-align:left;}

/* file */
.file-upload-wrapper {position:relative; width:100%; height:38px; padding:0; display:flex; flex-wrap:nowrap; align-items:center; justify-content:space-between; border:1px solid var(--input-border-color); border-radius:4px; background-color:var(--white);}
.file-upload-wrapper .file-name {position:absolute; display:inline-block; width:calc(100% - 97px); height:38px; padding:0 15px; font-size:14px; line-height:38px; text-align:left; background-color:transparent; z-index:10; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.file-upload-wrapper .file-input::file-selector-button {display:none;}
.file-upload-wrapper .file-input:disabled {pointer-events: none;}
.file-upload-wrapper .file-input {position:absolute; width:97px; height:38px; top:-1px; right:0; cursor:pointer; opacity:0; z-index:10;}
.file-upload-wrapper .file-input:focus-visible {opacity:1; text-indent:-9999px; outline:3px solid var(--black);}
.file-upload-wrapper:after{content:"첨부하기";position:absolute;top:-1px;right:0;display:inline-block;height:38px;background-color:#495057;color:var(--white);font-weight:700;font-size:14px;line-height:38px;padding:0 24px;text-transform:uppercase;border-radius:0 4px 4px 0; z-index:1;}
.file-upload-wrapper .btn-delete {position:absolute; top:-1px; right:0; width:97px; height:38px; border-radius:0 4px 4px 0; z-index:11;}

/* calendar */
.calendar-wrap {position:relative; max-width:275px;}
.calendar-wrap [class^=ri-] {position:absolute; top:50%; right:0; margin-right:10px; padding:0; transform:translateY(-50%) !important; background:none; border:0;}
.calendar-wrap [class^=ri-]:focus-visible {outline:3px solid var(--black);}

/* bg */
.bg-table {background-color:#f3f6f9;}
.bg-light-gray {background-color:#f6f9fc !important;}
.bg-white {background-color:#fff !important;}
.bg-gray {background-color:#f8f8f8;}
.bg-dark {--bg-opacity:1; background-color:rgba(var(--dark-rgb), var(--bg-opacity)) !important;}
.bg-grad {
    background: #107AC2;
    background: linear-gradient(to right, #107AC2 0%, #1196D0 100%);
    background: -webkit-linear-gradient(to right, #107AC2 0%, #1196D0 100%);
    background: -moz-linear-gradient(to right, #107AC2 0%, #1196D0 100%);
    background: -o-linear-gradient(to right, #107AC2 0%, #1196D0 100%);
    background: -ms-linear-gradient(to right, #107AC2 0%, #1196D0 100%);
}
.bg-grad > * {color:var(--white);}
.bg-primary > * {color:var(--white);} 
[class^="bg-overlay-"] {position:absolute; width:100%; height: 100%; z-index:1;}
.bg-overlay:before{content:" ";background:#333;opacity:0.15;position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:-1;}
.bg-overlay {background-color:rgba(51,51,51,0.15);position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;}

/* button */
.btn-area {display:flex; align-items:center; gap:5px;}
.btn-list {display:inline-block; min-width:120px; padding:12px 24px; color:#fff; font-size:16px; font-weight:700; border:0; border-radius:4px; background-color:#44708d; transition:all 0.3s;}
.btn-list:hover {transform:translateY(-5px); box-shadow:0 4px 10px 4px rgba(68,112,141,.25); outline:0}
.btn-list:disabled {background-color:rgba(68,112,141,.75); cursor:none; transition:none !important;}
.btn-list:focus {outline:3px solid var(--black);}
.btn-list.arrow-ani {position:relative; transition:all .4s cubic-bezier(0.645, 0.045, 0.355, 1); padding:12px 24px;}
.btn-list.arrow-ani:before {content:"\ea6c"; font-family:remixicon !important; font-style: normal; font-size:18px; color:var(--white); font-weight:500; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; position:absolute; top:50%; right:0; transform:translateY(-50%); opacity:0; transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);}
.btn-list.arrow-ani:hover {padding:12px 40px 12px 20px;}
.btn-list.arrow-ani:hover:before,
.btn-list.arrow-ani:hover:after {opacity:1; right:15px;}
.btn-list.arrow-ani:disabled {background-color:rgba(68,112,141,.75); cursor:none; transition:none !important;}
.btn-list.arrow-ani:disabled:hover {padding:12px 24px; box-shadow:none; transform: translateY(0);}
.btn-list.arrow-ani:disabled:hover:before {display:none;}
.btn.arrow-ani {position:relative; transition:all .4s cubic-bezier(0.645, 0.045, 0.355, 1); padding:12px 20px;}
.btn.arrow-ani:before {content:"\ea6c"; font-family:remixicon !important; font-style: normal; font-size:18px; color:var(--white); font-weight:500; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; position:absolute; top:50%; right:0; transform:translateY(-50%); opacity:0; transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);}
.btn.arrow-ani:hover, .btn.arrow-ani:focus {padding:12px 40px 12px 20px;}
.btn.arrow-ani:hover:before,
.btn.arrow-ani:hover:after, .btn.arrow-ani:focus:before, .btn.arrow-ani:focus:after {opacity:1; right:15px;}
.btn.arrow-ani:focus {outline:3px solid var(--black);}
.btn-submit {display:inline-block; min-width:120px; padding:12px 20px; color:#fff; font-size:16px; font-weight:700; border:0; border-radius:4px; background-color:#44708d; transition:all 0.3s; white-space:nowrap;}
.btn-submit:hover {transform:translateY(-5px); box-shadow:0 4px 10px 4px rgba(68,112,141,.25); outline:0}
.btn-submit.arrow-ani {position:relative; transition:all .4s cubic-bezier(0.645, 0.045, 0.355, 1); padding:12px 20px;}
.btn-submit.arrow-ani:before {content:"\ea6c"; font-family:remixicon !important; font-style: normal; font-size:18px; color:var(--white); font-weight:500; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; position:absolute; top:50%; right:0; transform:translateY(-50%); opacity:0; transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);}
.btn-submit.arrow-ani:hover {padding:12px 40px 12px 20px;}
.btn-submit.arrow-ani:hover:before,
.btn-submit.arrow-ani:hover:after {opacity:1; right:15px;}
.btn-submit.arrow-ani:focus-visible {padding:12px 40px 12px 20px; outline:3px solid var(--black);}
.btn-submit.arrow-ani:focus-visible:before,
.btn-submit.arrow-ani:focus-visible:after {opacity:1; right:15px;}
.btn-submit:disabled {background-color:rgba(68,112,141,.75); cursor:none; transition:none !important;}
.btn-submit.arrow-ani:disabled {min-width:120px; background-color:rgba(68,112,141,.75); cursor:none; transition:none !important;}
.btn-submit.arrow-ani:disabled:hover {padding:12px 20px; box-shadow:none; transform: translateY(0);}
.btn-submit.arrow-ani:disabled:hover:before {display:none;}
.bottom-btn-wrap {position:relative; clear:both; width:100%; display:flex; justify-content:center; text-align:center; margin-top:80px; gap:5px;}
.bottom-btn-wrap .btn:hover {transform:translateY(-5px);  box-shadow:0 4px 10px 4px rgba(0, 0, 0, .2);  outline:0;}
.btn.completed {cursor:unset;}
.btn-completed {cursor:none;}
.btn-sm {padding:6px 8px; font-size:12px; font-weight:500;}
.btn-md {padding:8px 16px; font-size:14px !important; font-weight:500;}
.btn-danger.dark {background-color:var(--dark-red);}
.btn-outline-white {border:1px solid #fff; border-radius:40px; background-color:transparent;}
.btn-outline-white:hover {color:var(--white); border:1px solid var(--primary); background-color:var(--primary)}
.close-btn {width:45px; height:45px; background-color:var(--white); box-shadow:0px 0px 4px 0px rgba(0,0,0,0.4); border-radius:100%; cursor:pointer; color:var(--body-color); padding:0; font-size:28px;  line-height:1; font-weight:300; opacity:0.8;}
.close-btn:hover {opacity:1; background-color:var(--white);}

/* 공통 */
.pc-only {display:block !important;}
.mobile-only {display:none !important;}
.noscroll{position: fixed; left:0; top: 0;}
.mg {flex-shrink:0; display:inline-block; width:23px; height:20px; margin-right:5px; background:url(../images/logo/mg-symbol.svg) no-repeat center; vertical-align:middle; background-size:100%;}
hr.solid {height: 2.5px; margin:15px 0; border: 0; background: var(--primary);}
.divider {width:100%; margin:0 auto; overflow:hidden; text-align:center; line-height:0;}
.divider:before,
.divider:after {content:""; display:inline-block; width:50%; height:0; vertical-align:middle; border-bottom:1px solid var(--border-color);}
.divider:before {margin:0 0 0 -100%;}
.divider:after {margin:0 -100% 0 0;}
.alert {display:none; position:fixed; top:50%; left:50%; min-width:200px; max-width:80vw; text-align:center; z-index:100; font-size:16px; white-space:nowrap; transform:translate(-50%, -50%); box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.2);}
.alert.show {display:block; z-index: 10000;} 
.tooltip.show {z-index: 10000;}

.content-title {display:inline-block; font-size:1.4rem; font-weight:600; line-height:var(--body-line-height);}
.content-title.with-required {width:100%;}

.card {position:relative; overflow:hidden; transition:transform .5s ease-in-out;}
.card:hover {transform: translateY(-10px); transition:all 800ms cubic-bezier(0.19,1,0.22,1); box-shadow:0 10px 25px rgba(0, 119, 200, 0.4)}
.card .circle {position:absolute;width:0;height:0;margin:auto;left:50%;top:50%;transform:translate(-50%,-50%);background-color:#0077c8;border-radius:50%;transition:all 0.5s; z-index:1;}
.card:hover .card-body {position:relative; z-index:2;}
.card:hover .circle ~ .card-body .organ {color:var(--white) !important;}
.card:hover .circle ~ .card-body .area,
.card:hover .circle ~ .card-body .d-day {color:var(--white) !important;}
.card:hover .circle ~ .card-body .registration-authority {border-bottom: 3px solid var(--white);}
.card:hover .circle {background-color:#0077c8; width:100%; height:100%; border-radius:12px; transition:all 0.15s}

.info-box {width:100%;}
.info-box .info-tit{display:block; width:100%; font-size:1.4rem; font-weight:600; text-align:center; line-height:var(--body-line-height);}
.info-box .info-cont {margin-top:24px;}
.info-box .info-cont ol {padding-left:20px;}
.info-box .info-cont li {margin:4px 0; font-weight: 500; font-size:.9rem; line-height:1.6; word-break:keep-all;}
.info-box + .text-area {margin-top:80px;}

.tab-area {gap:0 !important; padding-bottom:0 !important; margin-bottom:-80px;}
.tab-area .info-wrap {clear:both; width:100%; padding: 3rem 0; text-align:center; border-bottom:1px solid var(--border-color);}
.tab-area .info-wrap p {margin:0;}

.password-toggle-btn{right: 0;}
.form-control:disabled + .password-toggle-btn {pointer-events: none;}

/* Skip Navi추가*/
.skip-navi {position:relative;}
.skip-navi a {position:absolute; left:0; top:-42px; width:100%; background:#000; color:#FFF; font-size:14px; padding:10px 16px; z-index:9999; text-decoration:none; transition:top .3s ease; text-align:center;}
.skip-navi a:focus {top:0; outline:0; box-shadow:0 0 0 0.25rem rgba(68, 140, 116, 0.25);}

/* header */
.logo {flex-shrink:0; display:inline-block; width:237px; height:40px; margin-bottom:0; margin-right:4%;}
.logo a:focus-visible {outline-offset:-4px;}
.logo a img {vertical-align:top;}
.navbar.navbar-expand-lg{min-width: 320px; width: 100%; left: 0; right: 0; top: 0;}
.navbar.navbar-expand-lg .navbar-brand{display: block; width: 100%; height: 100%; margin: 0; padding: 0;}
.navbar.navbar-expand-lg.bg-white {border-bottom:1px solid var(--border-color);}
/* .navbar.navbar-expand-lg.bg-white .logo{background:url('../images/logo/horizontal-logo-dark.svg') no-repeat center / 100%;} */

.navbar.navbar-expand-lg .navbar-nav .nav-item.dropdown .dropdown-item {font-size:14px; text-align:center;}
.navbar.navbar-expand-lg .navbar-nav .nav-item.dropdown .dropdown-item span {display:block;}
.navbar.navbar-expand-lg .navbar-nav .nav-link {position:relative; color:var(--body-color);}
.navbar.navbar-expand-lg .navbar-nav .nav-link.dropdown-toggle:after {display:none;}
.navbar.navbar-expand-lg .navbar-nav .nav-link.active,
.navbar.navbar-expand-lg .navbar-toggler.btn-sitemap {display:block;}
.navbar.navbar-expand-lg .dropdown-menu .active > .dropdown-item,
.navbar.navbar-expand-lg .dropdown-menu .dropdown-item.active,
.navbar.navbar-expand-lg .nav-link.active:not([data-bs-toggle=dropdown]){cursor:pointer; pointer-events: auto;}
.navbar.navbar-expand-lg.navbar-stuck {
    background-color:var(--white); 
    -webkit-box-shadow:0 4px 12px rgba(0, 0, 0, 0.15);
    -moz-box-shadow:0 4px 12px rgba(0, 0, 0, 0.15);   
    box-shadow:0 4px 12px rgba(0, 0, 0, 0.15);  
}
.navbar.navbar-expand-lg .navbar-nav .nav-link.active,
.navbar.navbar-expand-lg.navbar-stuck .navbar-nav .nav-link.active {color:var(--primary); opacity:1;}
.navbar.navbar-expand-lg.navbar-stuck .logo {background:url('../images/logo/horizontal-logo-dark.svg') no-repeat center; background-size:100%;}
.navbar-toggler-icon::before {right:0;}

.bg-light-gray .navbar .navbar-nav .nav-item .nav-link {color:var(--body-color);}
.bg-light-gray .navbar .navbar-nav .nav-item .nav-link.active {color:var(--primary);}

.nav-tabs.nav-border-top {border-bottom:1px solid var(--border-color); margin:0;}
.nav-tabs.nav-border-top .nav-item {margin-bottom:0;}
.nav-tabs.nav-border-top .nav-link {padding:.8rem .7rem; color:var(--body-color); font-size:1.1rem; font-weight:400; opacity:1; white-space:nowrap;}
.nav-tabs.nav-border-top .nav-link.active {font-weight:600; opacity:1; background-color:#f3f3f9; border-left:1px solid var(--border-color); border-right:1px solid var(--border-color); border-bottom:0; border-top:3px solid var(--main-color); border-radius:4px 4px 0 0;}

/* Site Map */
#sitemap .offcanvas-header {justify-content:flex-end;}
#sitemap .offcanvas-body {position:relative; width:100%; height:100%; display:flex !important; align-items:center; justify-content:center;}

#sitemap .container ul {display:flex; align-items:flex-start; justify-content: space-around; flex-wrap:wrap; gap:2rem; margin:0; padding:0; list-style-type:none;}
#sitemap .container ul li.nav-item {color:var(--white); text-align:center; width:30%; padding:24px; opacity:0; transition:all 0.5s ease-in-out; list-style-type:none;}
#sitemap .container ul li.nav-item a {white-space: nowrap;}
#sitemap .container ul li.nav-item .depth1 {display:block; padding-bottom:20px; margin-bottom:20px; color:var(--white); font-size:1rem; white-space:nowrap; border-bottom:1px solid rgba(255,255,2550.8)}
#sitemap .container ul li.nav-item > .sub-nav {display:flex; flex-direction:column;}
#sitemap .container ul li.nav-item > .sub-nav a {position:relative; display:block; width:100%; height:40px; margin:0 auto; color:var(--white); font-size:16px; font-weight:400; transition: all .4s; opacity:0.7;}
#sitemap .container ul li.nav-item > .sub-nav a:hover {opacity:1;}
@keyframes fadeDown {
    0%{opacity:0;transform:translateY(-20px);}
    100%{opacity:1;transform:translateY(0);}
}
@keyframes fadeUp {
    0%{opacity:0;transform:translateY(20px);}
    100%{opacity:1;transform:translateY(0);}
}
.offcanvas-body {position:relative;}
.offcanvas.fullscreen {overflow-y: auto; width:100vw; min-height:100vh; background-color:rgba(0,50,109,0.9);}
.offcanvas.show .nav-item {opacity:0;animation:fadeDown 0.7s ease-out forwards;}
.offcanvas.show .nav-item:nth-child(1) {animation-delay:0.1s;}
.offcanvas.show .nav-item:nth-child(2) {animation-delay:0.2s;}
.offcanvas.show .nav-item:nth-child(3) {animation-delay:0.3s;}
.offcanvas.show .nav-item:nth-child(4) {animation-delay:0.4s;}
.offcanvas.show .nav-item:nth-child(5) {animation-delay:0.5s;}
.offcanvas.show .nav-item:nth-child(6) {animation-delay:0.6s;}

/* banner */
.banner {position:relative; padding:40px; border-radius:20px; background:var(--primary);}
.banner .btn {margin-top:20px; padding:10px 40px; font-size:16px;}
.banner .banner-img {position:absolute; right:-20px; top:-160px; transform:scale(0.7);}

/* top Banner */
.top-banner {display: none; width:100%; height:100px; position:fixed; z-index:1; top:0; left:0; background-color:var(--primary); overflow:hidden; transition:0.5s;}
.top-banner.show {display:flex; align-items:center; z-index:1000;}
.top-banner .close-banner {width:26px; height:26px; margin-left: 2rem; color:var(--white); text-align:center; line-height:24px; border:1px solid var(--white); border-radius:50%;}
.top-banner .close-banner:hover {opacity:1;}
.top-banner .container{display:flex; align-items:center; justify-content: space-between; height: 100%;}
.top-banner .text-area {display:flex; align-items:flex-end; flex: 1; gap: 2rem;}
.top-banner .text-area:after {content:''; position: absolute; right: 80px; top: 50%; transform: translateY(-50%);display: block; width: 180px; height: 84px; background: url('/resources/images/banner/banner-img-1.png') no-repeat center/ 100%;}
.top-banner .banner-title {color: #fff; font-weight: 400; line-height: 1.5;}
.top-banner .btn {padding:8px 20px; background-color:var(--white); color:var(--primary)}
.top-banner .btn:hover {background-color:var(--primary); color:var(--white); border:1px solid var(--white)}

/* footer */
.footer {position:relative; width:100%; padding: 2rem 0 3rem;}
.footer .footer-menu {display:flex; align-items:center; justify-content: space-between; padding: 0 calc(var(--gutter-x) * 0.5); gap: 8px;}
.footer .row .select-box{display:flex; align-items:center; width:auto; height:36px; padding:0;}
.footer .row .select-box .wa-mark {display:block; width:80px; margin-right:15px;}
.footer .copyright {flex:1; color:var(--gray-800); font-size:14px; font-weight:600; white-space:nowrap;}
.footer .nav{width: auto;}
.footer .nav-link,
.footer .nav-link {display:inline-block; padding:0; color:var(--gray-800); vertical-align:middle;}
.footer .nav-link + .nav-link:before {content:""; display:inline-block; width:1px; height:12px; margin:0 12px; vertical-align:middle; background-color:var(--gray-800);}
.footer .nav-link:focus-visible {outline:3px solid currentcolor;}
.footer .btn-group .btn {padding:8px 15px; color:var(--body-color); font-size:14px; font-weight:400; border-radius:4px; border:1px solid #CED4DA;}
.footer .btn-group .btn:focus-visible {outline:3px solid var(--gray-900);}
.footer .dropup + .dropup {margin-left: .5rem;}
.footer .dropdown + .dropdown {margin-left:20px;}
.footer .dropdown-menu {z-index:10000; padding:8px 0;}
.footer .dropdown-menu .menu-title {position:relative; display:block; padding:10px 15px; font-size:14px;}
.footer .dropdown-menu a span {display:inline-block; min-width:90px; font-weight:600;}
.footer .dropdown .dropdown-toggle::after {transition:0.3s;}
.footer .dropdown .dropdown-toggle.show:after {transform:rotate(180deg)}
.footer .flex-between {margin-top:36px; gap: 1rem;}
.footer .btn-icon {color:var(--white); font-size:16px; background-color:rgba(255,255,255,.1); line-height:36px;}
.footer .btn-icon:hover {color:var(--white);}
.footer .btn-icon:focus-visible {outline:3px solid currentcolor;}
.footer .btn-icon + .btn-icon {margin-left:16px;}
.footer .btn-icon.btn-blog:hover {background-color:#00B900;}
.footer .btn-icon.btn-facebook:hover {background-color:#1677F0;}
.footer .btn-icon.btn-youtube:hover {background-color:#FD0000;}
.footer .btn-icon.btn-instagram:hover {background:url(../images/bg-instagram.svg) no-repeat center; background-size:cover;}
.footer .sns-wamark {display:flex; align-items:center; gap:0 15px;}
.footer .wa-mark {display:block; width:61px;}

.btn-scroll-top{width: 40px; height: 40px;}
.btn-scroll-top:before{width: 100%; height: 100%; top: 0; left: 0;}
.btn-scroll-top:focus-visible {outline:3px solid #fff;}
/* main */
#main{position: relative; transition: all .5s ease;}
#main .navbar-expand-lg .navbar-nav .nav-link.active {font-weight:600; color:var(--body-color); opacity:1; transition:all .5s ease;}
#main .navbar-expand-lg.navbar-stuck .navbar-nav .nav-link.active {color:var(--primary) !important;}
#main .fixed-top {border-bottom:0 !important;}

main.page-wrapper {position:relative;}
main.page-wrapper .btn-sitemap .navbar-toggler-icon, 
main.page-wrapper .btn-sitemap .navbar-toggler-icon::before, 
main.page-wrapper .btn-sitemap .navbar-toggler-icon::after {background-color:var(--navbar-toggler-color);}
main.page-wrapper .navbar.navbar-stuck .btn-sitemap .navbar-toggler-icon, 
main.page-wrapper .navbar.navbar-stuck .btn-sitemap .navbar-toggler-icon::before, 
main.page-wrapper .navbar.navbar-stuck .btn-sitemap .navbar-toggler-icon::after {background-color:var(--body-color);}

main.page-wrapper .scroll-nav {position:fixed; top:50%; left:50px; transform:translateY(-50%); z-index:1000; opacity: 0; transition: all .3s ease; visibility: hidden;}
main.page-wrapper .scroll-nav.scrolled{opacity: 1; visibility: visible;}
main.page-wrapper .scroll-nav ul {display:flex; flex-direction:column; gap:30px; transition:all .5s ease;}
main.page-wrapper .scroll-nav ul:hover li a span {opacity:1; transition:all .5s ease;}
main.page-wrapper .scroll-nav ul, .scroll-nav li {list-style:none;}
main.page-wrapper .scroll-nav li {transition:transform .5s ease-in-out;}
main.page-wrapper .scroll-nav li a {position:relative; display:block; color: #1d1d1f; font-size:20px; font-weight:400; padding-left:32px; text-decoration:none; line-height:1; transition: all 0.3s ease; /* 효과 전환 */}
main.page-wrapper .scroll-nav li a:before {content:""; position:absolute; left:0; top:calc(50% - 5px); width:14px; height:14px; border:1px solid #1d1d1f;  background-color:transparent; border-radius:50%; transition: all 0.3s ease; /* 효과 전환 */}
main.page-wrapper .scroll-nav li a:hover {transform: translateX(5px);}
main.page-wrapper .scroll-nav li a span {display:inline-block; color:inherit; opacity:0; vertical-align:middle; transition:all .5s ease; text-shadow: 0 0 0px white;}
main.page-wrapper .scroll-nav li.active a {font-size:24px; font-weight:600;}
main.page-wrapper .scroll-nav li.active a:before {left:0;background-color:#1d1d1f; transform: scale(1.5);}

main.page-wrapper .swiper {height: 100%; padding:10px 2% 0;}

main.page-wrapper .swiper-slide-active .text-area .gradient-title {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    animation-name: fadeInDown;
    animation-delay: 0.3s;
}
main.page-wrapper .swiper-slide-active .text-area p:nth-child(1) {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    animation-name: fadeInDown;
    animation-delay: 0.3s;
}
main.page-wrapper .swiper-slide-active .text-area p:nth-child(2) {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    animation-name: fadeInUp;
    animation-delay: 0.3s;
}  
main.page-wrapper .swiper-pagination{display:none; position:relative; bottom:17px;}
main.page-wrapper .section {position:relative; width:100%; padding: 5rem 0; scroll-margin-top: 120px;}
main.page-wrapper .section .title-area {display:flex; width:100%; align-items:center; justify-content:space-between;}
main.page-wrapper .section .title-area .section-title{font-size:clamp(20px, 3vw, 36px); font-weight:700;}
main.page-wrapper .section .section-cont{padding:2rem 0;}
main.page-wrapper .section .section-cont:has(.swiper) {min-height:600px; max-height:630px; height:56vh; margin:0 -2.5%; padding-bottom:0;}
main.page-wrapper .section.section3 .section-cont:has(.swiper) {height:58vh;}
main.page-wrapper .section1{padding:0;}
main.page-wrapper .section1 + .section{padding-top:12rem;}
main.page-wrapper .section1 .text-area {opacity:0; animation:show 0.75s ease-in-out 0.3s forwards;}
@keyframes show {
    0% {filter:blur(5px); transform:translateY(calc(-50% + 75px));}
    100% {opacity:1; filter:blur(0);}
}
main.page-wrapper .section1 .text-area p:nth-child(1) {transition-delay: 0.2s;}
main.page-wrapper .section1 .text-area p:nth-child(2) {transition-delay: 0.35s;}

main.page-wrapper #visual {position:relative; width:100%; height:100%; max-height:1080px; padding:0; aspect-ratio:16 / 9;}
main.page-wrapper #visual .swiper-slide .swiper-slide-cover {position:relative; width:100%; height:100%; background:url(../images/visual-model.png) no-repeat 100% 100%;}
main.page-wrapper #visual .swiper-slide .container {position:absolute; top:0; left:50%; bottom:55px; transform:translateX(-50%); z-index: 1000;}
main.page-wrapper #visual .swiper-slide video {width:100%; height:100%; object-fit:cover; object-position:left center;}
main.page-wrapper #visual .swiper-slide {
    background: #107AC2; /* 단색 백업 */
    background: linear-gradient(to right, #107AC2 0%, #54C3F1 100%);
    background: -webkit-linear-gradient(to right, #107AC2 0%, #54C3F1 100%); /* Chrome, Safari */
    background: -moz-linear-gradient(to right, #107AC2 0%, #54C3F1 100%);/* Firefox */
    background: -o-linear-gradient(to right, #107AC2 0%, #54C3F1 100%);/* Opera */
    background: -ms-linear-gradient(to right, #107AC2 0%, #54C3F1 100%);  /* IE10+ */
}
main.page-wrapper #visual .swiper-slide .text-area {position:absolute; left:24px; top:50%; transform:translateY(-50%);}
main.page-wrapper #visual .swiper-slide .text-area p {display:block; margin-top:50px; font-size:32px; font-weight:700; color:var(--white); line-height:1.4;}
main.page-wrapper #visual .swiper-slide .text-area p + p {margin-top:30px; font-weight:500; line-height:1.2;}
main.page-wrapper #visual .swiper-slide .gradient-title {display:inline-flex; gap:12px;}
main.page-wrapper #visual .swiper-slide .gradient-title span {display:inline-block; font-size: 111px; font-weight: 900;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.6));
    background: -webkit-linear-gradient(to right, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.6));
    background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.6));
    background: -o-linear-gradient(to right, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.6));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    text-shadow: 4px 4px 12px rgba(0,0,0,0.1);
}
main.page-wrapper #visual .swiper-slide.slide1 {background-image:url(../images/main-visual-pc01.png); background-size:cover; background-position:center; background-repeat:no-repeat;}
main.page-wrapper #visual .swiper-slide.slide2 {background-image:url(../images/main-visual-pc02.png); background-size:cover; background-position:center; background-repeat:no-repeat;}
main.page-wrapper #visual .swiper-slide .visual-pc {width:100%; height:100%; object-fit:cover;}
main.page-wrapper #visual .swiper-slide .visual-mo {display:none; width:100%; height:100%; object-fit:cover;}

main.page-wrapper .visual-control {position:absolute; bottom:140px; left:50%; transform:translateX(-50%); z-index:1000; display:flex; align-items:center; gap:10px;}
main.page-wrapper .visual-control .btn {display:inline-block; position:static; border:0; color:var(--white); width:64px; height:64px; background-size:20px; background-repeat:no-repeat; background-position:50%;}
main.page-wrapper .visual-control .btn.btn-prev {background-image:url(../images/icon/ico-next-white.svg); transform:rotate(180deg);}
main.page-wrapper .visual-control .btn.btn-next {background-image:url(../images/icon/ico-next-white.svg); transform:translate(0);}
main.page-wrapper .visual-control .btn.btn-stop {background-image:url(../images/icon/ico-pause-large-line.svg); background-size:80%;}
main.page-wrapper .visual-control .btn.btn-play {background-image:url(../images/icon/ico-play-large-fill.svg); background-size:80%;}
main.page-wrapper .visual-control .btn:hover {opacity:0.6;}
main.page-wrapper .visual-control .btn#visualPlay {display:none;}

main.page-wrapper .main-video-wrap {width: 100%;}
main.page-wrapper .main-video-wrap video{width: 100%;}

main.page-wrapper .main-recruit {justify-content: center; position:absolute; bottom: -7rem; left: 50%; transform: translateX(-50%); z-index: 100; padding-left:calc(var(--gutter-x) * 0.5); padding-right:calc(var(--gutter-x) * 0.5); margin: 0 auto; gap: 1rem;}
main.page-wrapper .main-recruit .card {width: calc(100% / 4 - 1rem); height:100%; min-height:217px; padding-left: 0; padding-right: 0;}
main.page-wrapper .main-recruit .card .card-body {position:relative; display: flex; flex-direction: column; }
main.page-wrapper .main-recruit .card .card-title {display:block; position:relative; font-size:1.1rem; padding-bottom:1rem; margin-bottom:1rem;}
main.page-wrapper .main-recruit .card .card-title:after {content:""; position:absolute; left:0; bottom:0; width:50px; height:3px; background-color:var(--primary);}
main.page-wrapper .main-recruit .card .card-cont {display: flex; flex-direction: column; justify-content: space-between; flex: 1;}
main.page-wrapper .main-recruit .card .btn-wrap {text-align:right;}
main.page-wrapper .main-recruit .card .btn-text {padding:0; color:var(--body-color); font-size:.9rem; font-weight:500; line-height:1;}
main.page-wrapper .main-recruit .card .btn-text:hover {color:var(--primary)}

main.page-wrapper .section2 .title-area ~ .row {margin-top:16px; gap:24px; --gutter-x:0;}
main.page-wrapper .section2 .swiper .swiper-slide {width: calc((100% - 30px) / 3);}
main.page-wrapper .section2 .swiper .swiper-slide .card + .card {margin-top:24px;}

main.page-wrapper .section3 .swiper .swiper-slide {width: calc((100% - 30px) / 4); margin-bottom: 30px;}
main.page-wrapper .section3 .swiper .swiper-slide .story-wrap + .story-wrap {margin-top:24px;}

/* 전체 검색 */
.floating-area {position:fixed; right:-100%; bottom:20px; display:flex; flex-direction:column; align-items:flex-start; gap:10px; z-index:1000; min-width: 280px;max-width:400px;width:auto; opacity:0; visibility:hidden; background:white;padding:20px;box-shadow:0 4px 10px rgba(0,0,0,0.2);border-radius:8px;z-index:1000;transition:right 0.8s ease,opacity 0.6s ease,visibility 0.6s ease;}
.floating-area .input-group {display:flex; align-items:center; gap:10px; width:100%; margin-top:10px; padding:0; background-color:transparent; border:0;}
.floating-area .input-group .form-control {flex:1; padding:8px 15px; font-size:14px; border:1px solid #ced4da !important; border-radius:999px !important; background-color:var(--white);}
.floating-area .btn.btn-text {position:absolute; top:4px; right:0; padding:0; color:var(--white); font-size:14px; font-weight:500; transition:none;} 
.floating-area .btn.btn-text:hover {color:var(--white);} 
.floating-area .search-form .form-label {display:block; color:var(--white); font-size:16px; font-weight:600;}
.floating-area .search-form .btn {display:flex; flex-shrink:0; align-items:center; justify-content:center; width:38px; height:38px; font-size:20px; padding:0; border:0; border-radius:50%; background-color:var(--primary);}
.floating-area.scrolled {transition:opacity 0.3s ease;}
.floating-area.scrolled .btn.btn-text,
.floating-area.scrolled .search-form .form-label {color:var(--body-color)}
.floating-area.hidden{right:-100%;opacity:0;visibility:hidden;}
.floating-area.open {right:6.5%;opacity:1;visibility:visible;}
.floating-area.open .btn.btn-text {top:23px; right:20px; color:var(--body-color);}
.floating-area.open .btn.btn-text:hover {text-decoration:underline;}
.floating-area.open .search-form .form-label {color:var(--body-color)}

   

/* 고정된 검색 버튼 */
.search-toggle{position:fixed; bottom:20px; right:5%; width:50px; height:50px; background-color:var(--primary); color:white; border:none; border-radius:50%; box-shadow:0 4px 10px rgba(0, 0, 0, 0.2); cursor:pointer; z-index:1001; transition:all 0.3s ease; opacity: 0;visibility: hidden;}
.search-toggle.scrolled{opacity: 1;visibility: visible;}
.search-toggle:hover {transform:scale(1.1);}
.search-toggle:focus-visible {outline:3px solid currentcolor;}
.search-toggle:before,
.search-toggle:after {content:"";position:absolute;transition:all .2s ease;}
.search-toggle:before{border:2px solid #fff;border-radius:100%;height:14px;left:15px;top:15px;transform:translate3d(0,0,0);width:14px;}
.search-toggle:after{background:#fff;border-radius:100%;bottom:20px;height:2px;right:16px;transform:rotate(45deg) translate3d(0,0,0);width:10px;}
.search-toggle.active:before,
.search-toggle.active:after{background-color:#fff;height:2px;left:15px;top:24px;width:20px;}
.search-toggle.active:before{border:none;transform:rotate(45deg) translate3d(0,0,0);}
.search-toggle.active:after{transform:rotate(-45deg) translate3d(0,0,0);}

/* 서브페이지 공통 */
.sub-visual {
    position:relative; width:100%; min-height: 140px; max-height: 300px; padding: 6vw 0; display:flex; flex-direction:column; align-items:center; justify-content:center;
    background: #107AC2;
    background: linear-gradient(to right, #107AC2 0%, #54C3F1 100%);
    background: -webkit-linear-gradient(to right, #107AC2 0%, #54C3F1 100%);
    background: -moz-linear-gradient(to right, #107AC2 0%, #54C3F1 100%);
    background: -o-linear-gradient(to right, #107AC2 0%, #54C3F1 100%);
    background: -ms-linear-gradient(to right, #107AC2 0%, #54C3F1 100%);
}

.sub-visual h2 {background-color:rgba(0, 250, 250, 0.01); inset:0; color:var(--white); font-size: clamp(20px, 3vw, 36px); opacity:0; animation:fadeUp 0.7s ease-out forwards; animation-delay:0.1s;}
.sub-visual p {display:block; margin-top: 1rem; background-color:rgba(0, 250, 250, 0.01); color:var(--white); font-size: 1.2rem; font-weight:400; white-space:nowrap; line-height:1.4; opacity:0; animation:fadeUp 0.7s ease-out forwards; animation-delay:0.2s;}
.sub-visual.sub1-1 {background:url(../images/visual/sub-visual1.png) no-repeat 80% center; background-size:cover;}
.sub-visual.sub1-1:before {content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:url(../images/visual/cloud.gif) no-repeat center; background-size:cover; z-index:-1;}
.sub-visual.sub2 {background:url(../images/visual/sub-visual2.png) no-repeat 80% center; background-size:cover;}
.sub-visual.sub5-1 {background:url(../images/visual/sub-visual5-1.png) no-repeat center; background-size:cover;}
.sub-visual.sub5-2 {background:url(../images/visual/sub-visual5-2.png) no-repeat center; background-size:cover;}
.sub-visual.sub5-3 {background:url(../images/visual/sub-visual3.png) no-repeat 60% center; background-size:cover;}
.sub-visual.sub-faq {background:url(../images/visual/sub-visual-faq.png) no-repeat 70% center; background-size:cover;}
.sub-visual.sub5 {background:url(../images/visual/sub-visual5.png) no-repeat center; background-size:cover;}
.sub-visual.sub6 {background:url(../images/visual/sub-visual6.png) no-repeat center; background-size:cover;}
.page-content {position:relative; width:100%; margin:0 auto; padding: 4rem 0 8rem;}
.text-gradient {display:inline-block !important; color:var(--primary); font-weight:600;
    background: linear-gradient(to right, #0077C8, #138FD5, #2AABE4, #41C7F4);
    background: -webkit-linear-gradient(to right, #0077C8, #138FD5, #2AABE4, #41C7F4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.page-content.about {display:flex; flex-direction:column; gap: 10rem;}
.page-content.about .container {display:flex; flex-direction:column; gap:4rem;}
.about .container p{display:block; font-size: 1rem; font-weight:500; line-height:1.4; opacity:0.8 !important;}
.about .container p + p{margin-top: 1rem;}
.about strong.text-primary {display: block; font-size: 1.4rem; font-weight:500; line-height: 1.4; text-align:center; margin-bottom:40px;}
.about .sub-visual {justify-content:center;}
.about .about-title {position:relative; display:block; margin:0; padding-left: 1.1rem; font-size: clamp(24px, 3vw, 42px); font-weight:500; line-height:1.2;}
.about .about-title:before {content:""; position:absolute; left:0; top:0; width:5px; height:100%; background-color:#0077C8;}
.about .about-title span {display:block;}
.about .about-text {display:block; margin:0; color:var(--body-color); font-size: 1.1rem; font-weight:500; line-height:1.4; word-break:keep-all; opacity:0.8 !important;}

.about .about-list {list-style:none; position:relative; display:flex; align-items:flex-start; justify-content:space-between; text-align:center; padding:0;}
.about .about-list li {display:flex; flex-direction:column; align-items:center; flex:1;}

.about .about-list .cycle {display:flex; align-items:center; justify-content:center; min-width: auto; width:200px; height:200px; border-radius:50%; background-color:#fff; box-shadow:0px 4px 10px 4px #0077C826;}
.about .about-list .cycle .unit {color:var(--body-color); font-size: 1.1rem; font-weight:500;}

.about .cycle-info{width: 100%; margin-top: 1.7rem;}
.about .cycle-title {display:block; margin-bottom: 1rem; font-size: 1.4rem; font-weight:500;}

.cycle-border {position:relative;}
.cycle-border:before {content:""; position:absolute; top:50%; left:0; right:0; height:1px; background-color:var(--border-color); z-index:-1;}

.empty{padding: 2rem 0; text-align: center; border: 1px solid var(--border-color);}

.about .business .img-area {display:inline-flex; width:100px; height:83px; align-items:center;}
.about .business .img-area .icon {width:100%;}
.about .business .text-area {flex: 1; padding-left:4%;}
.about .business .title {margin:0; font-size: 1.3rem; font-weight:600;}
.about .business .text {margin:12px 0 0; font-size: 1rem; line-height:1.4; word-break:keep-all;}
.about .business .row.flex-between {gap: 3rem; margin: 0 auto;}
.about .business .row.flex-between .col-md-6 {align-items: center; width:calc(100% / 2 - 4%); padding: 0;} 
.about .business .flip-arrow {display:inline-block; width:98px; height:16px; margin:0 60px; background:url(../images/long-arrow-1.svg) no-repeat center; background-size:100%; transform:rotate(-180deg);}
.about .business .table caption {caption-side:top; color:var(--primary); font-size:15px; font-weight:400; padding:0; margin-bottom:5px;}

.benefit-area{display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 2rem;}
.benefit-wrap{display: flex; justify-content: space-between; align-items: center; width: calc(100% / 2 - 1rem);}
.benefit-wrap:before{content: ''; width: 28%; height: 0; padding-bottom: 28%; background-repeat: no-repeat; background-position: center; background-size: 100%; border-radius: 50%;}
.benefit-wrap.benefit-wrap01:before{background-image: url('../images/main-benefit1.png');}
.benefit-wrap.benefit-wrap02:before{background-image: url('../images/main-benefit2.png');}
.benefit-wrap.benefit-wrap03:before{background-image: url('../images/main-benefit3.png');}
.benefit-wrap.benefit-wrap04:before{background-image: url('../images/main-benefit4.png');}
.benefit-wrap.benefit-wrap05:before{background-image: url('../images/main-benefit5.png');}
.benefit-txt{flex: 1; margin-left: 4%;}
.benefit-txt .title{display: block; margin-bottom: 2%; color:#0071bd; font-weight: 600; font-size: 1.2rem;}

.story-wrap {display:flex; flex-direction:column; gap:15px}
.story-wrap:hover {transform: translateY(-10px); transition:all 800ms cubic-bezier(0.19,1,0.22,1);}
.story-wrap .img-area {position:relative; transform: translateZ(0); width:100%; height:0 ; padding-bottom: 50%; border-radius:var(--border-radius-xxl); overflow:hidden; background-size:cover; background-repeat:no-repeat; background-position:center; border: 1px solid rgba(0,0,0,.06);}
.story-wrap .img-area:hover::after {content:"\f2db"; display:flex; align-items:center; justify-content:center; font-family:remixicon !important; font-style: normal; font-size:24px; text-align:center; color:var(--white); font-weight:500; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; color:#fff;  position:absolute; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.4); transition: opacity .3s ease-in-out;}
.story-wrap .img-area img {width:100%;}
.story-wrap .text-area .title {display:block; width:100%; font-size: 1rem; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.story-wrap .text-area .date,
.date {display:block; margin-top:5px; color:var(--gray-600); font-size:16px; font-weight:400; opacity:1 !important;}

.registration-authority {display:flex; align-items:flex-start; justify-content:space-between; gap:10px; width:100%; padding-bottom:10px; border-bottom:3px solid var(--primary);}
.registration-authority .area {display:inline; font-weight:600; color:var(--gray-900); white-space:nowrap;}
.registration-authority .area.nationwide {color:var(--primary);}
.registration-authority .organ {display:inline; color:var(--body-color); font-size:1rem; font-weight:600; word-break:keep-all; text-align: right;}
.recruit-name {width:100%; height:42px; margin-top:10px; line-height:1.2; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; text-overflow:ellipsis; overflow:hidden; word-break:keep-all; font-size: 1rem;}
.recruit-info {display:flex; width:100%; flex-direction:column; margin-top:2rem; gap:10px;}
.recruit-info span {white-space:nowrap;}
.recruit-info .d-flex {position:relative; width:100%; flex-direction: row-reverse; align-items:center; justify-content: space-between; gap:16px;}

/* pagination */
.pagination {align-items:center; justify-content:center; margin-top:50px;}
.pagination .listPage {display:flex; align-items:center; justify-content:center; max-width: 400px; width: 100%; gap: .2rem; text-align: center;}
.pagination a {display:block; width: calc(100% / 14); height:100%; color:#666; font-size: 1rem; text-align:center; border-radius:4px; line-height:29px; vertical-align:middle;}
.pagination a:hover {color:var(--body-color)} 
.pagination a.disabled {opacity:0.4; cursor: auto;}
.pagination a.prev, 
.pagination a.next {color:var(--body-color); font-size:1.1rem;}
.pagination a.active {background-color:var(--primary); color:var(--white);}

/* 검색 */
input[type="search"].form-control {width:100%; height:38px; padding:0 15px; line-height:38px; border-radius:19px; margin-right:5px;} 
input[type="search"].form-control:focus {background-color:var(--white);}
.search-area {width:100%; display:flex; flex-wrap:nowrap; align-items:center; justify-content:space-between; overflow:hidden; flex-shrink:0;}
.search-area .btn {flex-shrink:0; display:inline-block; width:38px; height:38px; padding:0; margin-left:5px; font-size:20px; font-weight:400; line-height:36px; text-align:center;}
.search-area .btn.btn-seach {background-color:var(--primary)}
.search-area .btn.btn-seach:focus-visible, .search-area .btn.btn-refresh:focus-visible {outline:3px solid var(--black);}
#searchFilter {display:flex; flex-direction:column; gap:10px; margin-top:20px;}
#searchFilter .accordion-button {position:relative; color:var(--body-color); font-size:16px; font-weight:500; padding:0;}
#searchFilter .accordion-body {display:flex; width:100%; padding:12px 12px 36px; flex-wrap:wrap; gap:5px;}
#searchFilter .filter-item {position:relative;}
#searchFilter .btn-filter {display:inline-block; position:relative; cursor:pointer; user-select:none; z-index:1;}
#searchFilter .btn-filter input[type="checkbox"] {position:absolute; top:1px; left:1px; width:100%; height:100%; margin:-1px; z-index:10; opacity:0; cursor:pointer;}
#searchFilter .btn-filter span {display:inline-block; height:26px; padding:0 12px; color:var(--body-color); font-size:12px; line-height:24px; white-space:nowrap; border:1px solid #969494; border-radius:4px; transition:all 0.3s;}
#searchFilter input[type="checkbox"]:checked ~ span {color:var(--primary); border:2px solid var(--primary); font-weight:600; line-height:22px;}
#searchFilter input[type="checkbox"]:focus ~ span {outline:3px solid var(--black); outline-offset:2px;}

/* 새마을금고소개-회사소개 */
.page-content.smgIntro-page .about-text {display:block; margin:0; color:var(--body-color); font-weight:500; line-height:1.4; word-break:keep-all; opacity:0.8 !important;}
.page-content.smgIntro-page .flex-between{overflow: hidden;}
.page-content.smgIntro-page .about-1 .about-list li{width: calc(100% / 4 - 10px);}
.page-content.smgIntro-page .about-1 .number-counter {color:var(--primary); font-size: clamp(26px, 3vw, 36px); font-weight:500; line-height:26px;}
.page-content.smgIntro-page .about-3 .about-list li .cycle {position:relative; width:60%; min-width: fit-content; max-width:100%; height:60px; padding: 0 12px; font-size:24px; font-weight:500; text-align:center; border-radius:30px;}
.page-content.smgIntro-page .about-3 .about-list li .cycle:before {position:absolute; content:""; top: auto; left: auto; right: auto; bottom:auto; width: 108%; height: 140%;border:1px solid var(--primary); border-radius:60px;}
.page-content.smgIntro-page .about-3 .about-list li .cycle span {font-size: 1rem; font-weight:500; text-align:center;}
.page-content.smgIntro-page .about-3 .about-list p {margin-top: 2.2rem;}
.page-content.smgIntro-page .about-3 .right-wrap {flex: 1; margin-top: 4%; margin-left: 5%;}
.page-content.smgIntro-page .about-3 .right-wrap p {margin-top: 0;}
.page-content.smgIntro-page .map-area {position:relative; width:100%; height: 0; padding-bottom: 50%; font-size: 0; text-align:center; background:#E6F2FA url(../images/about-map.svg) no-repeat center / 80%; border-radius:8px; box-shadow:0px 4px 10px 4px rgba(0, 119, 200, 0.15);}

/* 새마을금고소개-사업안내 > 여신업무 */
.page-content.entprzGuidLn-page .business-step{display: flex; justify-content: center; flex-wrap: wrap;}
.page-content.entprzGuidLn-page .business-step .circle {position:relative; width:180px; height:180px; border-radius:50%; box-shadow:0px 4px 10px 4px rgba(0,119,200,0.15);}
.page-content.entprzGuidLn-page .business-step .circle p {margin-top:0; color:var(--primary); font-size: 1.2rem; font-weight:600; text-align:center; line-height:1.4; opacity:1 !important;}
.page-content.entprzGuidLn-page .business-step .arrow{width: 70px;}
.page-content.entprzGuidLn-page .business03 .about-list{justify-content:space-around; align-items: center;}
.page-content.entprzGuidLn-page .about-list.gap-5 {justify-content: center;}
.page-content.entprzGuidLn-page .about-list.gap-5 + .table-area .table{min-width: auto;}
.page-content.entprzGuidLn-page .about-list .cycle {position:relative;}
.page-content.entprzGuidLn-page .about-list .cycle.bg-primary strong {font-size: 1.3rem; line-height: 1.4;}
.page-content.entprzGuidLn-page .about-list .cycle:first-child:before {display:none;}
.page-content.entprzGuidLn-page .about-list .cycle:last-child:before {transform:rotate(0);}
.page-content.entprzGuidLn-page .about-list .cycle .number {color:var(--primary); font-size: 1.7rem; font-weight:500; line-height:26px; letter-spacing:-1px;}

/* 새마을금고소개-사업안내 > 전자금융업무 */
.page-content.entprzGuidEb-page .firm-banking{justify-content: center; align-items: center; gap: 2rem;}
.page-content.entprzGuidEb-page .firm-banking .cycle p {opacity:1 !important;}
/* 새마을금고소개-복리후생 */
.page-content.welfWel-page .business .about-list li{padding: 0;}
.page-content.welfWel-page .business .img-area{justify-content: center;}
.page-content.welfWel-page .business .text-area{margin-top: 4%; padding-left: 0;}

/* 인재상 */
.page-content.talmn-page .talented .img-area{padding: 0 4%;}
.page-content.talmn-page .text-area{font-size: 1.1rem; font-weight: 500; line-height: 1.4;}
.page-content.talmn-page .cycle .text-primary{margin-bottom: 0;}
.page-content.talmn-page .doted-list{margin-top: 8px;}

/* 채용절차 공통 */
.page-content.recruit-detail{padding: 0 0 4rem !important;}
.page-content .recruit-detail-body .recruit-step{align-items: center;}
.page-content .recruit-detail-body .recruit-step li + li:before{width: 20%; height: 0; padding-bottom: 20%; background-size: contain;}
.page-content .recruit-detail-body .recruit-step .text {font-size:1.1rem;}

div[class*=EngaPrc].page-content .tab-area .info-wrap{text-align: left;}
div[class*=EngaPrc].page-content .recruit-detail-body > li .table-area {margin-top:15px;}
div[class*=EngaPrc].page-content .recruit-tip b {font-size: .8rem; color:#E91916;}
div[class*=EngaPrc].page-content .recruit-tip ol {list-style-position:inside;}
div[class*=EngaPrc].page-content .recruit-tip ol li {margin-top: .2rem; font-size:.8rem;}
div[class*=EngaPrc].page-content .doted-list .dash-list {margin-left: 4rem;}
div[class*=EngaPrc].page-content .doted-list .dash-list li {text-indent: -3.3rem;}

/* faq */
.faq-page .search-form{display: flex; justify-content: flex-end; width: 100%;}
.faq-page .search-area {width: 50%; position:relative; overflow:visible;}
.faq-page .search-area .btn-primary {background-color:var(--primary); border:0;}
.faq-page .search-area .btn.clear-btn{display:block; position: absolute; padding: 0; right: 65px; width: 14px; height: 14px; border-radius: 50%; background-color: var(--border-color); color: rgba(29, 29, 31, .5); line-height: 1; font-size: 12px; font-weight: 600; visibility: hidden;}
.faq-page .search-area .search-input:focus ~ .btn.clear-btn {visibility:visible;}
.faq-page .search-area .btn.clear-btn:focus {visibility:visible;}
.faq-page .search-area .clear-btn:hover {color: rgba(29, 29, 31, 1);}
.faq-page .search-area .btn:focus-visible {outline:3px solid var(--black);}
.faq-page .accordion {margin-top:20px;}
.faq-page .accordion.faq {position:relative; display:flex; flex-direction:column; width:100%; gap:24px;}
.faq-page .accordion.faq .accordion-item {width:100%; padding: 1.1rem 1.4rem 0; border:0;}
.faq-page .accordion.faq .accordion-header {position:relative; display:flex; align-items:flex-start; gap:12px; padding:0; margin-bottom: 1.1rem; border-bottom:0;}
.faq-page .accordion.faq .accordion-header .badge {display:inline-block; padding:5px 12px; color:#0077C8; font-size:12px; font-weight:500; border-radius:4px; white-space:nowrap; background-color:rgba(0, 119, 200, 0.1);}
.faq-page .accordion.faq .accordion-header .accordion-button {position:relative; padding: 0 .5rem 0 30px; color:#1d1d1f; font-size:1rem; font-weight:600; background-color:#fff; word-break:break-all; line-height:1.4; box-shadow:none;}
.faq-page .accordion.faq .accordion-header .accordion-button:before {content:"Q"; position:absolute; left:0; top:0; width:24px; height:24px; padding:5px 7px; color:#fff; font-size:14px; font-weight:500; line-height:1; background-color:#0077C8; border-radius:50%;}

.faq-page .accordion.faq .accordion-header .acc-ico{position: relative; top: 8px; width: var(--accordion-btn-icon-width); height: var(--accordion-btn-icon-width); border: 0; background: transparent;}
.faq-page .accordion.faq .accordion-header .acc-ico:before{position: absolute; top: 0; right: 0; flex-shrink: 0; width: 100%; height: 100%; margin-left: auto; content: ""; background-image: var(--accordion-btn-icon); background-repeat: no-repeat; background-size: var(--accordion-btn-icon-width); transition: var(--accordion-btn-icon-transition);}
.faq-page .accordion.faq .accordion-header .acc-ico:not(.collapsed):before{background-image: var(--accordion-btn-active-icon); transform: var(--accordion-btn-icon-transform);}
.faq-page .accordion.faq .accordion-collapse {position:relative; border-top: 1px solid #E9EBEC;}
.faq-page .accordion.faq .accordion-body {position:relative; margin: 1.1rem 0; padding:1.1rem 1.1rem 1.1rem 50px; color:#1d1d1f; font-size:15px; font-weight:400; border-radius:8px; background-color:rgba(0, 119, 200, 0.1); white-space:pre-wrap; word-break:break-all;}
.faq-page .accordion.faq .accordion-body:before {content:"A"; position:absolute; left:20px; top:18px; width:24px; height:24px; color:#0077C8; font-size:14px; font-weight:500; text-align:center; line-height:24px; background-color:#fff; border-radius:50%;}

/* 채용공고 */
.ofcaList-page.recruit-list #sidebarFiller {position:sticky; top:80px; visibility:visible; transform:translateX(0); z-index:10;}
.ofcaList-page.recruit-list #sidebarFiller .offcanvas-title{font-size: 1.4rem;}
.ofcaList-page.recruit-list #sidebarFiller .offcanvas-body {overflow-y:visible; padding: 0;}
.ofcaList-page.recruit-list #sidebarFiller .offcanvas-body .search-area {overflow:visible;}
.ofcaList-page.recruit-list #sidebarFiller .btn-dark:hover {background-color:#333;}
.ofcaList-page.recruit-list #sidebarFiller .btn-seach:hover {background-color:#015e9d;}
.ofcaList-page.recruit-list #sidebarFiller .accordion-item {box-shadow:none; overflow:visible;}
.ofcaList-page.recruit-list .container > .row {justify-content:space-between;}
.ofcaList-page.recruit-list .list-header {display:flex; width:100%; padding-bottom:20px; align-items:center; justify-content:space-between;}
.ofcaList-page.recruit-list .total {font-size: 1rem; font-weight:400;}
.ofcaList-page.recruit-list .select-sort .form-select {width:fit-content; max-width:400px; white-space:nowrap; text-overflow: ellipsis;}
.ofcaList-page.recruit-list .recruit-post {gap:20px; width: 100%; margin: 0 auto;}
.ofcaList-page.recruit-list .recruit-post .col {padding-left: 0; padding-right: 0;}
.ofcaList-page.recruit-list .recruit-post .card {transition:all 0.3s ease-in-out;}
.ofcaList-page.recruit-list .recruit-post .card:hover {background-color:var(--primary);}
.ofcaList-page.recruit-list .recruit-post .card:hover * {color:var(--white);}
.ofcaList-page.recruit-list .recruit-post .card:hover .registration-authority {border-color: var(--white);}
.ofcaList-page.recruit-list .recruit-post .recruit-name {height:auto;}
.ofcaList-page.recruit-list .recruit-post .recruit-info-wrap {display: flex;}
.ofcaList-page.recruit-list .recruit-post .recruit-info {gap: .3rem; font-size: .9rem;}
.ofcaList-page.recruit-list .recruit-post .recruit-infoB {align-items: flex-end;}
.ofcaList-page.recruit-list .recruit-post .recruit-infoB .flex-start span + span:before {content:""; display:inline-block; vertical-align:middle; width:1px; height:12px; margin: 0 10px; background-color:var(--border-color);}
.ofcaList-page.recruit-list .recruit-post .recruit-infoB div:last-child {text-align:right; align-items:flex-end; justify-content:flex-end;}
.ofcaList-page.recruit-list .recruit-post .recruit-infoB .d-day {display:inline-block; color:#e91916;}
.ofcaList-page.recruit-list .recruit-post .recruit-infoB span + span:before {display:none;}
.ofcaList-page + .btn-bottom-filter {display:none; position: fixed; right: 0; bottom: 0; left: 0; border-radius: 8px 8px 0 0; z-index: 1000;}

/* 채용공고 본문 */
/* .recruit-detail .recruit-detail-header {position:sticky !important; top:76px !important; width:100%;  margin:0 auto; padding:50px; margin-bottom:80px; border-radius:12px; box-shadow:0 4px 12px rgba(0,0,0,.25); transition:all 0.3s; z-index:100;}
.recruit-detail .recruit-detail-header p {display:block; color:#fff; font-size:18px; font-weight:600; white-space:nowrap;}
.recruit-detail .recruit-detail-header h2 {display:block; margin-top:10px; color:#fff; font-size:40px; font-weight:700; word-break:keep-all;}
.recruit-detail .recruit-detail-header .d-flex {clear:both; position:relative; width:100%; margin-top:115px; align-items:flex-end; justify-content:space-between;}
.recruit-detail .recruit-detail-header .d-flex span {white-space:nowrap;}
.recruit-detail .recruit-detail-header .detail-info .field {display:block; margin-top:10px; color:var(--white); font-size:20px; font-weight:500;}
.recruit-detail .recruit-detail-header .detail-info .field .line {display:inline-block; vertical-align:middle; width:1px; height:16px; margin:0 4px; background-color:rgba(255,255,255,0.4)}
.recruit-detail .recruit-detail-header .detail-info .period {display:block; margin-top:8px; font-size:20px;}
.recruit-detail .recruit-detail-header .badge.d-day {display:inline-block; width:auto; border-radius:4px; background-color:var(--white); color:var(--danger); font-size:15px; font-weight:600;}
.recruit-detail .recruit-detail-header.sticky .badge.d-day {margin-right:8px;}
.recruit-detail .recruit-detail-header .period {display:block; margin-top:10px; color:var(--white); font-size:20px; font-weight:500}
.recruit-detail .recruit-detail-header .btn-area {display:flex; flex-direction:column; gap:10px; align-items:flex-end;}
.recruit-detail .recruit-detail-header .btn-area .btn {color:var(--whitw); padding:13px 36px; font-size:18px; font-weight:700; border:1px solid var(--white)}
.recruit-detail .recruit-detail-header .btn-area .btn i {display:inline-block; font-size:20px; vertical-align:middle; margin-right:16px; font-weight:400;}
.recruit-detail .recruit-detail-header .btn-area .btn:hover {color:var(--primary); background-color:var(--white);}
.recruit-detail .recruit-detail-header.sticky {padding:30px 50px;     border-radius: 0 0 12px 12px;}
.recruit-detail .recruit-detail-header.sticky h2 {font-size:24px;}
.recruit-detail .recruit-detail-header.sticky p {font-size:14px;}
.recruit-detail .recruit-detail-header.sticky .d-flex {margin-top:10px; align-items:center;}
.recruit-detail .recruit-detail-header.sticky .d-flex .recruit-detail-header {align-items:center;}
.recruit-detail .recruit-detail-header.sticky .d-flex .detail-info {display:flex; flex-direction:row; align-items:center;}
.recruit-detail .recruit-detail-header.sticky .d-flex .detail-info .field {font-size:15px; margin:0;}
.recruit-detail .recruit-detail-header.sticky .d-flex .detail-info .period:before {content:""; display:inline-block; margin:0 10px; width:1px; height:12px; vertical-align:middle; background-color:#fff;}
.recruit-detail .recruit-detail-header.sticky .d-flex .detail-info .period {display:inline-block; font-size:15px; margin-top:0;}
.recruit-detail .recruit-detail-header.sticky .btn-area {flex-direction:row; align-items:center;}
.recruit-detail .recruit-detail-header.sticky .btn-area .btn {font-size:15px; padding:10px 22px;}
.recruit .alert {position:fixed; top:50%; left:50%; max-width:300px; white-space:nowrap; transform:translate(-50%, -50%); z-index:100;}
.alert .btn-close {background-size:18px 18px;} */

/* 공고 이미지 파일 */
.recruit-step .icon.step1 img {content:url(/resources/images/edit/icon-recruit-step1.svg);}
.recruit-step .icon.step2 img {content:url(/resources/images/edit/icon-recruit-step2.svg);}
.recruit-step .icon.step3 img {content:url(/resources/images/edit/icon-recruit-step3.svg);}
.recruit-step .icon.step4 img {content:url(/resources/images/edit/icon-recruit-step4.svg);}
.recruit-step .icon.step5 img {content:url(/resources/images/edit/icon-recruit-step5.svg);}
.flex-shrink-0.sulitem2logo img {content:url(/resources/images/edit/logo-geumgo.svg);}
.step-icon.suiltem2julcha01 img {content:url(/resources/images/edit/step2_1.svg);}
.step-icon.suiltem2julcha02 img {content:url(/resources/images/edit/step2_2.svg);}
.step-icon.suiltem2julcha03 img {content:url(/resources/images/edit/step2_3.svg);}
.step-icon.suiltem2julcha04 img {content:url(/resources/images/edit/step2_4.svg);}
.step-icon.suiltem2julcha05 img {content:url(/resources/images/edit/step2_5.svg);}
.img.areasu img {content:url(/resources/images/edit/area-1.svg);}
.img.areabs img {content:url(/resources/images/edit/area-2.svg);}
.img.areadg img {content:url(/resources/images/edit/area-3.svg);}
.img.areaic img {content:url(/resources/images/edit/area-4.svg);}
.img.areakj img {content:url(/resources/images/edit/area-5_1.svg);}
.img.areajn img {content:url(/resources/images/edit/area-5_2.svg);}
.img.areadj img {content:url(/resources/images/edit/area-6_1.svg);}
.img.areasj img {content:url(/resources/images/edit/area-6_2.svg);}
.img.areacn img {content:url(/resources/images/edit/area-6_3.svg);}
.img.areaus img {content:url(/resources/images/edit/area-7_1.svg);}
.img.areakn img {content:url(/resources/images/edit/area-7_2.svg);}
.img.areakk img {content:url(/resources/images/edit/area-8.svg);}
.img.areakw img {content:url(/resources/images/edit/area-9.svg);}
.img.areacb img {content:url(/resources/images/edit/area-10.svg);}
.img.areajb img {content:url(/resources/images/edit/area-11.svg);}
.img.areakb img {content:url(/resources/images/edit/area-12.svg);}
.img.areajj img {content:url(/resources/images/edit/area-13.svg);}
.icon.suilbunya01 img {content:url(/resources/images/edit/ico-recruit1.png);}
.icon.suilbunya02 img {content:url(/resources/images/edit/ico-recruit2.png);}
.icon.suilbunya03 img {content:url(/resources/images/edit/ico-recruit3.png);}
.icon.suiljulcha01 img {content:url(/resources/images/edit/step3_1.svg);}
.icon.suiljulcha02 img {content:url(/resources/images/edit/step3_2.svg);}
.icon.suiljulcha03 img {content:url(/resources/images/edit/step3_3.svg);}
.icon.suiljulcha04 img {content:url(/resources/images/edit/step3_4.svg);}
.icon.suiljulcha05 img {content:url(/resources/images/edit/step3_5.svg);}
.hotspot-inner.areasu img {content:url(/resources/images/edit/area-1.svg);}
.hotspot-inner.areabs img {content:url(/resources/images/edit/area-2.svg);}
.hotspot-inner.areadg img {content:url(/resources/images/edit/area-3.svg);}
.hotspot-inner.areaic img {content:url(/resources/images/edit/area-4.svg);}
.hotspot-inner.areakj img {content:url(/resources/images/edit/area-5_1.svg);}
.hotspot-inner.areajn img {content:url(/resources/images/edit/area-5_2.svg);}
.hotspot-inner.areadj img {content:url(/resources/images/edit/area-6_1.svg);}
.hotspot-inner.areasj img {content:url(/resources/images/edit/area-6_2.svg);}
.hotspot-inner.areacn img {content:url(/resources/images/edit/area-6_3.svg);}
.hotspot-inner.areaus img {content:url(/resources/images/edit/area-7_1.svg);}
.hotspot-inner.areakn img {content:url(/resources/images/edit/area-7_2.svg);}
.hotspot-inner.areakk img {content:url(/resources/images/edit/area-8.svg);}
.hotspot-inner.areakw img {content:url(/resources/images/edit/area-9.svg);}
.hotspot-inner.areacb img {content:url(/resources/images/edit/area-10.svg);}
.hotspot-inner.areajb img {content:url(/resources/images/edit/area-11.svg);}
.hotspot-inner.areakb img {content:url(/resources/images/edit/area-12.svg);}
.hotspot-inner.areajj img {content:url(/resources/images/edit/area-13.svg);}

/* 공고 본문 공통 영역 */
.recruit-detail:has([class*="type"]){padding:0 !important; margin-bottom: 6rem;}
.recruit-detail.container {padding:calc(var(--gutter-x) * 0.2) calc(var(--gutter-x) * 0.5) !important; margin-bottom: 6rem;}    
.recruit-detail:has([class*="type"]) * {box-sizing: border-box;}
.recruit-detail:has([class*="type"]) b {font-weight: 600;}
.recruit-detail:has([class*="type"]) ol{list-style-position: inside;}
.recruit .alert {position:fixed; top:50%; left:50%; max-width:300px; white-space:nowrap; transform:translate(-50%, -50%); z-index:100;}
.alert .btn-close {background-size:18px 18px;}

/* MG 새마을금고 정기 공고본문 탬플릿 Type 1 */
.recruit-detail .type1 .recruit-detail-header {padding:2rem; border-radius:12px; box-shadow:0 4px 12px rgba(0, 0, 0, .25); z-index:100; overflow-wrap:break-word;}
.recruit-detail .type1 .recruit-detail-header p {display:block; margin:0; color:#fff; font-size:1rem; font-weight:600;}
.recruit-detail .type1 .recruit-detail-header .recruit-detail-title {display:block; margin-top:10px; color:#fff; font-size:2.2rem; font-weight:600; word-break:keep-all; line-height: 1.4;}
.recruit-detail .type1 .recruit-detail-header .d-flex {position:relative; width:100%; margin-top:3rem; display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;}
.recruit-detail .type1 .recruit-detail-header .d-flex span + span{margin-top: 8px;}
.recruit-detail .type1 .recruit-detail-header .badge.d-day {display:inline-block; width:auto; padding:4px 12px; margin-right: 5px; border-radius:4px; background-color:#fff; color:#e91916; font-size:15px; font-weight:600; line-height:1.2;}
.recruit-detail .type1 .recruit-detail-header .detail-info .field {display:block; color:#fff; font-size:1.2rem; font-weight:500; vertical-align: middle;}
.recruit-detail .type1 .recruit-detail-header .period {display:block; color:#fff; font-size:1rem; font-weight:500;}
.recruit-detail .type1 .recruit-detail-header .btn-area {display:flex; flex-direction:column; gap:10px; align-items:flex-end;}
.recruit-detail .type1 .recruit-detail-header .btn-area .btn {color:#fff; padding: .8rem 1.2rem; font-size:1rem; font-weight:700; border:1px solid #fff; border-radius:999px; background-color:transparent; transition:0.25s ease; line-height:1;}
.recruit-detail .type1 .recruit-detail-header .btn-area .btn i {display:inline-block; font-size:1.1rem; vertical-align:middle; margin-right:.5rem; font-weight:400;}

.recruit-detail .type1 .recruit-detail-header {position: sticky; top: 5rem;}
.recruit-detail .type1 .recruit-detail-header.sticky {position: sticky; top: 5rem; padding:1.5rem 1.5rem; border-radius:0 0 12px 12px;}
.recruit-detail .type1 .recruit-detail-header.sticky .recruit-detail-title {font-size:1.5rem;}
.recruit-detail .type1 .recruit-detail-header.sticky .d-flex {margin-top:10px; align-items: flex-end; gap: 10px;}
.recruit-detail .type1 .recruit-detail-header.sticky .d-flex .detail-info {display:flex; flex-direction:row; align-items:center; flex-wrap: wrap; gap: 4px;}
.recruit-detail .type1 .recruit-detail-header.sticky .d-flex .detail-info .field {font-size:15px; margin-top:0;}
.recruit-detail .type1 .recruit-detail-header.sticky .d-flex .detail-info .period {display:inline-block; font-size:15px; margin-top:0;}
.recruit-detail .type1 .recruit-detail-header.sticky .btn-area {flex-direction:row; align-items:center; margin-left: 0;}
.recruit-detail .type1 .recruit-detail-header.sticky .btn-area .btn {font-size:15px; padding:.8rem 1rem;}

.recruit-detail .type1 .recruit-detail-body > ol {gap:4rem; margin:4rem 0 0; list-style-position:inside;}
.recruit-detail .type1 .recruit-detail-body > ol > li{list-style-position:inside; font-size: 1rem;}
.recruit-detail .type1 .recruit-detail-body > ol > li::marker {font-size:1.5rem;}
.recruit-detail .type1 .recruit-detail-body > ol > li .list-title {display:inline-block; font-size:1.5rem; font-weight:600;}

.recruit-detail .type1 .recruit-detail-body .table-area {margin:15px 0; overflow-x: auto;}
.recruit-detail .type1 .recruit-detail-body table caption{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
.recruit-detail .type1 .recruit-detail-body table th,
.recruit-detail .type1 .recruit-detail-body table td {white-space: initial; padding: .8rem 1rem; font-size: 1rem; word-break: keep-all;}
.recruit-detail .type1 .recruit-detail-body table .doted-list,
.recruit-detail .type1 .recruit-detail-body table .dashed-list {padding-left:0;}
.recruit-detail .type1 .recruit-detail-body table + .recruit-tip,
.recruit-detail .type1 .recruit-detail-body table + .doted-list {margin-top:1rem;}
.recruit-detail .type1 .recruit-detail-body i {display:inline-block; vertical-align:middle; margin-right:.2rem;}

.recruit-detail .type1 .recruit-tip {display:block; color:#e91916; font-size:15px; font-weight:400; margin-top:5px; text-align: left;}
.recruit-detail .type1 .recruit-tip ol {list-style-position:inside;}

.recruit-detail .type1 .doted-list {padding-left:15px;}
.recruit-detail .type1 .doted-list > li {font-size:1rem;}

.recruit-detail .type1 .dash-list {padding-left:0;}
.recruit-detail .type1 .dash-list li {font-size:1rem;}
.recruit-detail .type1 .dash-list li + li{margin-top: 4px;}

.recruit-detail .type1 .number-employee {gap:1.2rem;}
.recruit-detail .type1 .number-employee .brn-area {width: calc(100% / 4 - 1rem); padding: 0;}
.recruit-detail .type1 .number-employee .brn-area div{height: 100%; display: flex; align-items: flex-end; flex-direction: column; justify-content: center; padding: 1rem 1.5rem; margin-left: 36px;}
.recruit-detail .type1 .number-employee .brn-area b {position:relative; display:block; color:#0077c8; font-size:1.2rem; font-weight:600; line-height:1; z-index:1; transition:all 0.5s;}
.recruit-detail .type1 .number-employee .brn-area p {margin:8px 0 0; color:#fff;}
.recruit-detail .type1 .number-employee .brn-area:hover b, .recruit-detail .type1 .number-employee .brn-area:focus-visible b {color:#fff; transition:0.3s;}
.recruit-detail .type1 .number-employee .brn-area:hover:before, .recruit-detail .type1 .number-employee .brn-area:focus-visible:before {background:#f3f6f9 url(/resources/images/edit/map-pin-blue.svg) no-repeat center;}

.recruit-detail .type1 .info-box .info-title {display:block; margin:0 auto 20px; font-size: 1.2rem;}

@media screen and (max-width: 992px) {
    .recruit-detail .type1 .number-employee .brn-area {width:calc(100% / 3 - 1rem);}
} /* max 992 */

@media screen and (max-width: 768px) {     
    hr.solid {margin:10px 0;}
    .recruit-detail .type1 .number-employee .brn-area {width:calc(100% / 2 - 1rem);}
} /* max 768 */

@media screen and (max-width: 600px) {
    .recruit-detail .type1 .recruit-detail-header.sticky .d-flex {flex-direction:column; align-items:flex-start;}
    .recruit-detail .type1 .recruit-detail-header.sticky .d-flex .detail-info {max-width:100%;}
	.recruit-detail .type1 .recruit-detail-header .btn-area {flex-direction: row; margin-top: 10px;}
} /* max 600 */

@media screen and (max-width: 500px) {
    .recruit-detail .type1 .recruit-detail-header .btn-area {width:100%; margin-top:8px; flex-direction:row; justify-content:flex-start;}
    
    .recruit-detail .type1 .number-employee .brn-area {width: 100%;}
    .recruit-detail .type1 .number-employee .brn-area:before {display:none;}
    .recruit-detail .type1 .number-employee .brn-area div{align-items: center; margin-left: 0;}
} /* max 500 */


/* MG 새마을금고 정기 공고본문 탬플릿 Type 2 */
.recruit.type-1 .type2 .badge {display:inline-block; width: 16%; padding:4px 8px; text-align:center; color: rgba(63,127,202); font-size: .9rem; font-weight:500; line-height:1.2; border-radius:999px; background-color: rgba(0, 119, 200, 0.1);}

.recruit.type-1 .type2 [class^="col-"] > div {padding: 1.3rem 1rem; border-radius:12px;}
.recruit.type-1 .type2 [class^="col-"] > div > ol {margin:0; padding:0; gap: 3rem;}
.recruit.type-1 .type2 [class^="col-"] > div > ol > li {list-style-position: inside;}
.recruit.type-1 .type2 [class^="col-"] > div > ol > li .list-title {display:inline-block; margin-bottom:8px;}

.recruit.type-1 .type2 .list-disc{list-style-type: circle; flex: 1;}

.recruit.type-1 .type2 .info-box {flex-wrap: wrap}
.recruit.type-1 .type2 .info-box ul {padding:0;}
.recruit.type-1 .type2 .info-box ul li {font-size:1rem;}      

.recruit.type-1 .type2 .info-box1 .info-wrap{width: calc(50% / 2 - 24px);}
.recruit.type-1 .type2.type2-1 .info-box1 .info-wrap:last-child{width: 50%;}
.recruit.type-1 .type2 .info-box1 .info-wrap .badge{width: auto;}

.recruit.type-1 .type2 .info-box2{flex-direction: column;}
.recruit.type-1 .type2 .info-box2 .info-title {display:block; font-size: 1.2rem; text-align: center;}

.recruit.type-1 .type2 .area-box > .area {max-width: none;} 
.recruit.type-1 .type2 .area-box > .area .img img {border:1px solid #fff; overflow:hidden;} 

.recruit.type-1 .type2 .step-process {padding-left: 0;}
.recruit.type-1 .type2 .step-process li .step-title {font-size:1rem; font-weight:500;}

.recruit.type-1 .type2 aside{padding-left: 0;}
.recruit.type-1 .type2 aside .posting-box {top:80px;}
.recruit.type-1 .type2 aside .posting-box .posting-header .posting-title {font-size:1.2rem; letter-spacing:-1px; word-break: keep-all;} 
.recruit.type-1 .type2 aside .posting-box .btn-apply {background-color:#0077c8;}
.recruit.type-1 .type2 aside .posting-box .posting-body dl{flex-direction: column; align-items: flex-start; gap: 6px;}
.recruit.type-1 .type2 aside .posting-box .posting-body dt{white-space: normal;}
.recruit.type-1 .type2 aside .posting-box .posting-body dd{white-space: normal; margin-left: 6px; font-size: .9rem; letter-spacing: -1px;}
.recruit.type-1 .type2 aside .posting-box .posting-footer{margin-top: 2rem;}

@media screen and (max-width: 1200px) {
	.recruit.type-1 .type2 .row > [class^="col-"] {width: 100%;}
	
	.recruit.type-1 .type2 aside .posting-box {bottom: 0; top: auto; border-radius: 12px 12px 0 0;}
	.recruit.type-1 .type2 aside .posting-box .posting-header {padding-bottom: 1rem;}
	.recruit.type-1 .type2 aside .posting-box .posting-body dl{flex-direction: row; align-items: center;}
	.recruit.type-1 .type2 aside .posting-box .posting-body dd{font-size: 1rem; margin-left: 0;}
}

@media screen and (max-width: 992px) {
	.recruit.type-1 .type2 .info-box1 .info-wrap{width: calc(100% / 2);}
	.recruit.type-1 .type2.type2-1 .info-box1 .info-wrap:last-child{width: 100%;}
}

@media screen and (max-width: 768px) {
	.recruit.type-1 .type2 .inner-num-list {margin: 0; padding-left: 1rem;}
	.recruit.type-1 .type2 .badge {width: auto;}
	.recruit.type-1 .type2 .info-box ul,
	.recruit.type-1 .type2 .list-disc{margin-left: 0; padding-left: 15px;}
}

@media screen and (max-width: 600px) {
	.recruit.type-1 .type2 .area-box {gap: 6px;}
	
	.recruit.type-1 .type2 .info-box1 .info-wrap{width: 100%;}
	.recruit.type-1 .type2.type2-1 .info-box1 .info-wrap:last-child{width: 100%;}
}

/* MG 새마을금고 정기 공고본문 탬플릿 Type 3 */
.recruit.type-3 .type3 {margin-top: 100px;}
.recruit.type-3 .type3 .row > [class^="col-"] {padding-left:0; padding-right:0;}

.recruit.type-3 .type3 aside .position-lg-sticky {position:sticky; top:100px; padding:0;}
.recruit.type-3 .type3 aside .flex-column {align-items:flex-start; gap:8px;}            
.recruit.type-3 .type3 aside .brand {color:#0077C8; font-size:.9rem; padding:6px 1rem; border:1px solid #0077c8; border-radius:100px; line-height:1;}
.recruit.type-3 .type3 aside .aside-title {display: block; font-size: 1.3rem; margin: 0.4rem 0; line-height:1.2;}
          
.recruit.type-3 .type3 .recruit-info {flex-direction: column;}
.recruit.type-3 .type3 .recruit-info dl {display:flex; flex-direction: column; gap: 8px; width: 100%; margin:4px 0;}
.recruit.type-3 .type3 .recruit-info dt,
.recruit.type-3 .type3 .recruit-info dd {color:#1d1d1f; margin:0; font-size:15px;}
.recruit.type-3 .type3 .recruit-info dt {font-weight:500;}
.recruit.type-3 .type3 .recruit-info dd {font-weight:600; letter-spacing:-1px; text-indent: 6px; flex:1;}
.recruit.type-3 .type3 .recruit-info .text-danger {color:#e71d1d !important;}

.recruit.type-3 .type3 .nav-wrap {padding-top:24px; border-top:1px solid #e9ebec;}
.recruit.type-3 .type3 .nav-wrap .nav-title {font-size: 1rem;}
.recruit.type-3 .type3 .nav-wrap .nav {display:flex; flex-direction:column; padding-left: 0;}
.recruit.type-3 .type3 .nav-wrap .nav-item {list-style: none; font-size: .9rem;}
.recruit.type-3 .type3 .nav-wrap .nav-link {display:flex; align-items:center; gap:4px; padding:4px 0; color:#434a57; font-size:14px;}
.recruit.type-3 .type3 .nav-wrap .nav-link i {display:inline-block; font-size:16px;} 
.recruit.type-3 .type3 .nav-wrap .nav-link:hover {color:#1d1d1f;}
.recruit.type-3 .type3 .nav-wrap .nav-link.active {color:#0077C8; font-weight:600;}

.recruit.type-3 .type3 .row{margin-left: 0; margin-right: 0;}
.recruit.type-3 .type3 .row > [class^="col-"].detail-cont {padding-left:2rem;}
.recruit.type-3 .type3 .detail-cont .detail-title{font-size: 1.5rem; font-weight:700; line-height: 1;}
.recruit.type-3 .type3 .detail-cont .card-body {padding:0;}
.recruit.type-3 .type3 .detail-cont .flex-between {margin-bottom:16px;}
.recruit.type-3 .type3 .detail-cont .btn-apply {font-size:16px; padding:10px 24px; background-color:#0077c8;}
.recruit.type-3 .type3 .detail-cont .btn-apply i {display:inline-block; margin-right:8px; font-size:1rem;}
.recruit.type-3 .type3 .detail-cont .btn-secondary:hover {transform:scale(0.95);}
.recruit.type-3 .type3 .detail-cont .btn-clipboard {width:40px; height:40px; color:#0077C8; font-size:1rem; background-color:rgba(0, 119, 200, 0.1); text-align:center;}
.recruit.type-3 .type3 .detail-cont .btn-clipboard:hover {color:#fff; background-color:#0077C8;}

.recruit.type-3 .type3 .card {border:0; border-radius:0; padding:0; box-shadow:none;}
.recruit.type-3 .type3 .card:hover {transform:none; box-shadow:none;}

.recruit.type-3 .type3 .recruit-list {display:flex; flex-direction:column; gap:6rem; padding-left: 0; color:#434a57;}
.recruit.type-3 .type3 .recruit-list .recruit1 .row .col-auto:nth-child(1),
.recruit.type-3 .type3 .recruit-list .recruit1 .row .col-auto:nth-child(2) {width:25%;}
.recruit.type-3 .type3 .recruit-list .recruit1 .row .col-auto > div {padding:8px 20px;}
.recruit.type-3 .type3 .recruit-list .recruit1 .row .col-auto .icon {width:60px; height:60px; margin:0 0 16px;}

.recruit.type-3 .type3 .recruit-list > li:last-child{margin-bottom: 7rem;}
.recruit.type-3 .type3 .recruit-list > li p {margin-bottom:0; color:#434a57; font-size:14px; font-weight:500;}
.recruit.type-3 .type3 .recruit-list > li p.text-danger {color:#e71d1d !important;}
.recruit.type-3 .type3 .recruit-list > li::marker {font-size:0;}            
.recruit.type-3 .type3 .recruit-list > li > .list-title {display:inline-block; margin-bottom:16px; font-size:1rem;}
.recruit.type-3 .type3 .recruit-list > li > .list-title:before {content:""; display:inline-block; width:20px; height:20px; margin:-4px 8px 0 0; background:url(/resources/images/edit/patch-check-fill.svg) no-repeat 0 0;vertical-align:middle;}
.recruit.type-3 .type3 .recruit-list > li .group-title {font-size:16px;}
.recruit.type-3 .type3 .recruit-list > li .group-title + p {margin-top:8px;}

.recruit.type-3 .type3 .hotspots{position:relative;}
.recruit.type-3 .type3 .hotspots .hotspot{position:absolute;width:64px;height:64px;z-index:2;display:flex;align-items:center;justify-content:center;cursor:pointer;border:2px solid rgba(255,255,255,1);border-radius:50%;transition:border-color .25sease-in-out,background-color .25sease-in-out;transform:scale(0.7);} 
.recruit.type-3 .type3 .hotspots .hotspot {position:absolute; z-index:2; display:flex; align-items:center; justify-content:center; cursor:pointer; border-radius:50%;  transition:border-color 0.25s ease-in-out, background-color 0.25s ease-in-out;}
.recruit.type-3 .type3 .hotspots .hotspot:hover,
.recruit.type-3 .type3 .hotspots .hotspot:focus {border-color:#0077c8;}
.recruit.type-3 .type3 .hotspots .hotspot-inner {display:flex; align-items:center; justify-content:center; border-radius:50%; transition: color 0.25s ease-in-out, background-color 0.25s ease-in-out;}
.recruit.type-3 .type3 .hotspots .hotspot-inner {position:absolute; width:48px; height:48px; overflow:hidden; background-color:#fff; z-index:10; }
.recruit.type-3 .type3 .hotspots .hotspot:hover .hotspot-inner, 
.recruit.type-3 .type3 .hotspots .hotspot:focus .hotspot-inner {color:#fff; background-color: #fff}

.recruit.type-3 .type3 .hotspot, 
.recruit.type-3 .type3 .hotspot:after,
.recruit.type-3 .type3 .hotspot:before {position:absolute;background:white;margin-left:-2px;margin-top:-2px;width:50px;height:50px;content:"";display:block;border-radius:50%;-webkit-backface-visibility:hidden;}
.recruit.type-3 .type3 .hotspot:before {animation:wave-animate 3s infinite ease-out;}
.recruit.type-3 .type3 .hotspot:after {opacity:0;animation:wave-animate 3s 1.5s infinite ease-out;}
@keyframes wave-animate {
    0% {transform:scale(0);opacity:1;transform-origin:center;}
    100% {transform:scale(3);opacity:0;transform-origin:center;}
}

.recruit.type-3 .type3 .map-area {position:relative; width:100%; height:600px; padding:0; background:linear-gradient(45deg, #a2cbf1 0%, #205bc5 100%); border-radius:24px;}
.recruit.type-3 .type3 .map-area:after {content:""; position:absolute; width:100%; height:100%; background:url(/resources/images/edit/map-white-text.png) no-repeat center; background-size:auto 600px;}

.recruit.type-3 .type3 .recruit-steps {display:flex; flex-direction:row; align-items:center; justify-content:center; flex-wrap:nowrap; width:100%; margin-bottom: 8px;}
.recruit.type-3 .type3 .recruit-steps .recruit-step {position:relative; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:8px; padding:0; flex-wrap:wrap; width:160px; height:160px; text-align:center; background: linear-gradient(0deg, rgba(162, 203, 241, 0.9) 0%, rgba(32, 91, 197, 0.9) 100%); border-radius:50%;}
.recruit.type-3 .type3 .recruit-steps .recruit-step p {position:relative; z-index:10; display:block; margin:0 auto; color:#fff; font-size:16px; font-weight:600; line-height:1.2; text-shadow: 2px 2px 5px rgba(32, 91, 197, 0.6);}
.recruit.type-3 .type3 .recruit-steps .recruit-step + .recruit-step {margin-left:-40px;}
.recruit.type-3 .type3 .recruit-steps .recruit-step + .recruit-step:before {content:""; position:absolute; left:8px; top:calc(50% - 10px); width:24px; height:24px; background:url(/resources/images/edit/arrow-right-white.svg) no-repeat 0 50%;}
.recruit.type-3 .type3 .recruit-steps .recruit-step .icon {display:block; width:50px; height:50px; margin:0 auto; opacity:0.9;}

.recruit.type-3 .type3 .list-group .list-group-item {border:0; padding:8px 20px;}
.recruit.type-3 .type3 .list-group .list-group-item > ul{margin:8px 0 0 20px; list-style-position:outside; padding:0;} 

.recruit.type-3 .type3 .list-group.border {overflow: hidden; padding-left: 0;}
.recruit.type-3 .type3 .list-group.border .list-group-item {color:#1d1d1f; font-size:14px; font-weight:500; border-bottom:1px solid #e3e9ef;}
.recruit.type-3 .type3 .list-group.border .list-group-item i {display:inline-block; vertical-align:middle; margin-right:4px;}

.recruit.type-3 .type3 .doted-list {margin-top:8px; list-style-position:outside; padding:0;}     
.recruit.type-3 .type3 .doted-list > li > .dash-list {margin-top:0;}

.recruit.type-3 .type3 .dash-list > li {font-size:14px;} 

.recruit.type-3 .type3 .recruit-table th,
.recruit.type-3 .type3 .recruit-table td {padding:12px; border-bottom:1px solid rgba(0, 119, 200, 0.06);}
.recruit.type-3 .type3 .recruit-table th {color:#434a57;}
.recruit.type-3 .type3 .info-box {display:flex; flex-direction:column; margin-top:24px; padding:2rem 1rem; background-color:#f6f9fc; border-radius:24px; gap:16px;}
.recruit.type-3 .type3 .info-box .group-title {display: inline-block; margin:0 auto; padding:8px 24px; background-color:#fff; border-radius:100px; color:#0077c8; font-size:16px; font-weight:500;}
.recruit.type-3 .type3 .info-box ol {display:flex; flex-direction:column; gap:4px; margin-left:0; list-style-position:inside;}
.recruit.type-3 .type3 .info-box ol li {color:#576071; font-size:13px; font-weight:500;}

@media screen and (max-width:992px) {
	.recruit.type-3 .type3 aside.col-lg-3 {border-bottom: 1px solid var(--border-color); padding-bottom: 1rem; margin-bottom: 1rem;}
    .recruit.type-3 .type3 .nav-wrap {display:none;}
    .recruit.type-3 .type3 .recruit-info {margin:0;}
    .recruit.type-3 .type3 > .container > .row {flex-direction:column;}
    .recruit.type-3 .type3 > .row > [class^="col-"] {width:100%;}
    .recruit.type-3 .type3 > .row > [class^="col-"].col-lg-9 {padding-left:0; padding-right:0;}
    .recruit.type-3 .type3 .row > [class^="col-"].detail-cont{padding-left: 0; padding-bottom: 3rem;}
    .recruit.type-3 .type3 .col-lg-9 .detail-title {display:none;}
    .recruit.type-3 .type3 .col-lg-9 .flex-between .btn-wrap {position:fixed; left:0; right:0; bottom:0; display:flex; padding:16px 24px; border-radius:12px 12px 0 0; background-color:#fff; box-shadow:0 14px 28px rgba(0,0,0,0.2), 0 10px 10px rgba(0,0,0,0.2); z-index:10000;}
    .recruit.type-3 .type3 .col-lg-9 .btn-apply {flex-grow:1; margin-left: 8px;}
    .recruit.type-3 .type3 .map-area {height:400px;}
    .recruit.type-3 .type3 .map-area:after {background-size:auto 380px;}
    .recruit.type-3 .type3 .hotspots .hotspot {transform:scale(0.5);}
} /* 992 */
@media screen and (max-width:768px) { 
    .recruit.type-3 .type3 .recruit-list li.recruit13 > .row {flex-direction:column;}
    .recruit.type-3 .type3 .recruit-list li.recruit13 .col-md-6 {width:100%;}
    .recruit.type-3 .type3 .recruit-list li .col-md-6:nth-child(1) .list-group.border {border-radius:24px 24px 0 0; border-bottom: 0 !important;}
    .recruit.type-3 .type3 .recruit-list li .col-md-6:nth-child(2) .list-group.border {border-radius:0 0 24px 24px; border-top:0 !important; margin-top:-1px;} 
    .recruit.type-3 .type3 .list-group{padding-left: 0;}
    .recruit.type-3 .type3 .list-group .list-group-item {padding:8px;}
} /* 768 */
@media screen and (max-width:680px) {    
	.recruit-detail .recruit.type-3 {padding: 0;}
    .recruit.type-3 .type3 .recruit-list .recruit1 .row .col-auto:nth-child(1), 
    .recruit.type-3 .type3 .recruit-list .recruit1 .row .col-auto:nth-child(2) {width:50%;}
    .recruit.type-3 .type3 .recruit-list .recruit1 .row .col-auto:nth-child(3) {width:100%;}
    .recruit.type-3 .type3 .recruit-list .recruit1 .row .col-auto > div {padding:8px;}
    .recruit.type-3 .type3 .recruit-steps .recruit-step {width:140px; height:140px; flex-shrink:0;}
    .recruit.type-3 .type3 .recruit-steps .recruit-step .icon {transform:scale(0.8);}
    .recruit.type-3 .type3 .recruit-table thead tr th {display:none;}
    .recruit.type-3 .type3 .recruit-table tbody tr td {display:block; border-bottom:0; padding:4px 16px;}
    .recruit.type-3 .type3 .recruit-table tbody tr td:last-child {border-bottom:1px solid rgba(0, 119, 200, 0.06);}
    .recruit.type-3 .type3 .recruit-table tbody tr th {width:30%; border-right:1px solid rgba(0, 119, 200, 0.06);}
    .recruit.type-3 .type3 .list-group.border {margin-left:0;}
    .recruit.type-3 .type3 .recruit-steps .recruit-step p {font-size:14px; margin-top:-4px;}
    .recruit.type-3 .type3 .recruit-steps .recruit-step + .recruit-step:before {left:10px; width:20px; height:20px; background-size:100%;}
} /* 680 */
@media screen and (max-width:600px) {
    .recruit.type-3 .type3 .recruit-steps .recruit-step {width:120px; height:120px;}
    .recruit.type-3 .type3 .recruit-steps .recruit-step + .recruit-step {margin-left:-40px;}
    .recruit.type-3 .type3 .recruit-table tbody tr th {display:block; width:100%; padding:12px 8px 4px; color:#1d1d1f; border-right:0; border-bottom:0;}
    .recruit.type-3 .type3 .recruit-table tbody tr td:last-child {border-bottom:0;}
} /* 600 */
@media screen and (max-width:500px) { 
    .recruit.type-3 .type3 .recruit-steps {flex-wrap:wrap; padding:0; transform:scale(0.9);}
    .recruit.type-3 .type3 .recruit-steps .recruit-step + .recruit-step {margin-left:0;}
    .recruit.type-3 .type3 .recruit-steps .recruit-step + .recruit-step:before {display:none;}
    .recruit.type-3 .type3 .list-group .list-group-item .text-body-secondary.me-2 {margin-right:4px !important;}
} /* 500 */

/* 인재풀 등록 */
.talmnPoolBody-page.recruit-detail .recruit-detail-body .inner-num-list {display:flex; flex-direction:column; gap: 1.1rem;}
.talmnPoolBody-page.recruit-detail .recruit-detail-body .inner-num-list li b{font-size:1rem; font-weight: 600;}
.talmnPoolBody-page.recruit-detail .recruit-detail-body .inner-num-list .dash-list {margin-top: .4rem; margin-left: 1rem;}

/* 개인정보 수집,동의 공통 */
.agree-wrap {display:flex; flex-direction:column; gap:20px;}
.agree-wrap.first {margin-top:80px;}
.agree-wrap.border-top {margin-top:40px;padding-top:40px}
.agree-wrap .table th,
.agree-wrap .table td {font-size:14px; font-weight:500; color:var(--body-color)}
.agree-wrap .table td p {font-size:14px;}
.agree-wrap .table strong {color:#111;}
.agree-wrap .table td:last-child {text-align:left;}
.agree-wrap .table .dash-list li,
.agree-wrap .table .guide-list li {color:var(--body-color); font-size:14px;}
.agree-wrap .table .dash-list li + li {margin-top:8px;}
.agree-wrap .table .guide-list li + li {margin-top:8px;}
.agree-wrap .table p +  .guide-list {margin-top:8px;}
.agree-wrap .radio-area .form-check  {padding-left:0;}
.agree-wrap .radio-area {margin:0 auto;}

/* 개인정보 수집,동의 */
.pesnInfoPrvsAgre-page .pesnInfo-title{font-weight: 500; font-size: 1.2rem;}
.pesnInfoPrvsAgre-page .pesnInfo-title-wrap .pesnInfo-title{font-weight: 600;}
.pesnInfoPrvsAgre-page .info-box .pesnInfo-title{text-align: center;}
.pesnInfoPrvsAgre-page .info-box .table th{background: #fff;}
.pesnInfoPrvsAgre-page .agree-wrap .radio-area{display: flex; flex-wrap: wrap; gap: 1rem;}

/* 서약서 */
.written-oath {max-width:736px; width: 100%; margin:0 auto; display:flex; flex-direction:column; justify-content:center; gap:3rem; padding:4rem 2rem; background-color:var(--table-th-bg); border-radius:8px;}
.written-oath .written-title{margin-right: -1.1rem; font-size: clamp(20px, 3vw, 32px); font-weight: 600; letter-spacing: 1.1rem;}
.written-oath p {font-size: 1rem; font-weight: 500; line-height: 1.4;}
.written-oath b {font-size: 1.2rem; font-weight: 600; letter-spacing: 8px;}
.written-oath strong {font-size: 1.2rem;}
.written-oath .written-txt {font-size: 1rem; font-weight: 600;}
.written-oath .doted-list {margin-top:15px;}
.written-oath .today {font-size:15px; font-weight:500;}
.written-oath .applicant {margin-top:24px;}
.written-oath .applicant span {font-size:1rem;}
.written-oath .applicant .name {margin: 0 16px; letter-spacing:4px;}
.written-oath .applicant .form-check {padding:0; vertical-align: bottom;}
.written-oath .applicant .form-label {font-size:1rem; vertical-align: text-bottom;}

/* 본인인증 공통 */
.desc-required {display:flex; justify-content:flex-end; margin-top:-21px; font-size:.9rem; font-weight:600;}
.desc-required em {margin-right:5px; font-style:normal; color:#e91916;}
.authentication .form-table {margin:15px 0 80px; border-right:1px solid var(--table-border-color);}
.authentication .form-table li {border-right:0;}
.authentication .form-table li .text-danger {color:#e71d1d !important;}

/* 본인인증 */
#authCodeInput::-webkit-inner-spin-button,
#authCodeInput::-webkit-outer-spin-button {-webkit-appearance:none; margin:0;}
#authCodeInput {-moz-appearance:textfield;}
.timer {flex:1; width:inherit; color:var(--body-color); font-size:15px; font-weight:400; text-align:center; padding:9px 15px 7px 15px; border-radius:var(--border-radius); border:1px solid var(--input-border-color); background-color:var(--input-disabled-bg)}
.table-divider {width:100%; margin:0 auto; text-align:center; line-height:0; overflow:hidden;}
.table-divider:before {content:""; display:inline-block; width:100%; height:0; margin:0 -100%; vertical-align:middle; border-bottom:1px solid var(--table-border-color)}
.auth-methods {list-style:none; position:relative; width:100%; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.3rem; justify-content:center; align-items:flex-start;}
.auth-methods-list li {position:relative; min-width:20%; padding-top: 1rem; flex:1; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; border-radius:6px; overflow:hidden; cursor:pointer;}
.auth-methods-list li:after {content:""; position:absolute; width:100%; height:0; left:0; bottom:-1px; background-color:rgba(0,119,200,0.75); transition:all 0.25s; z-index:1;}
.auth-methods-list li > span {position:relative; z-index:2;}
.auth-methods .app-name {position:relative; z-index:2; padding:0; background:none; border:0; font-size:12px; font-weight:500; color:var(--body-color);}
.auth-methods .app-name:focus-visible {outline:3px solid var(--black); top:-1px;}
.auth-methods .app-name:before {content: '';display: block; width:55px; height:55px; margin: 0 auto 4px; border-radius:6px; overflow:hidden; box-shadow:0 0 12px #ccc; background-size:cover; background-repeat:no-repeat; background-position:center;}
.auth-methods .active:after {height:100%;}
.auth-methods .active .app-name {color:var(--white)}
.auth-methods .active .app-name:before {box-shadow:none;}
.auth-methods .toss .app-name:before{background-image:url(../images/icon/app-icon-toss.png);}
.auth-methods .naver .app-name:before{background-image:url(../images/icon/app-icon-naver.png);}
.auth-methods .kakao .app-name:before{background-image:url(../images/icon/app-icon-kakao.png);}
.auth-methods .pass .app-name:before{background-image:url(../images/icon/app-icon-pass.png);}
.auth-methods .shinhan .app-name:before{background-image:url(../images/icon/app-icon-shinhan.png);}
.auth-methods .kb .app-name:before{background-image:url(../images/icon/app-icon-kb.png);}
.auth-methods .samsung .app-name:before{background-image:url(../images/icon/app-icon-samsung.png);}
.view-detail {position:absolute; right:0; padding:6px 18px; color:var(--body-color); font-size:12px; font-weight:600; line-height:1; border-radius:4px; border:1px solid var(--gray-900)}

/* 입사지원서 */
.page-content.application caption, 
.page-content.application label{position: absolute; width: 1px; height: 1px;padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;}
.page-content.application .container {display:flex; flex-direction:column; gap:4rem;}
.page-content.application .steps.steps-horizontal-md {position:sticky; top: 64px; padding: 1rem 0; background-color:var(--white); z-index:1000; display:flex; flex-wrap: nowrap; flex-direction: row;}
.page-content.application .steps.steps-horizontal-md .step {display: block; flex-basis: 0; flex-grow: 1; padding: 0 var(--steps-padding-x); pointer-events: none;}
.page-content.application .steps.steps-horizontal-md .step.complete{pointer-events: auto;}
.page-content.application .steps .step:before{display: none;}
.page-content.application .steps .step:after{top: calc(var(--steps-number-size) * 0.5); right: calc(var(--steps-padding-y) * -1); left: auto; width: 100%; height: auto; border-top: var(--steps-connect-width) var(--steps-connect-style) var(--steps-connect-color); border-left: 0;}
.page-content.application .steps .step.complete:after {border-color:#44834D;}
.page-content.application .steps .step.modify:after {border-color:#495057;}
.page-content.application .steps .step .step-body b {display:block; margin-top:5px; font-weight:500; line-height:1;}
.page-content.application .steps .step .text-process {display:block; margin-top:20px; color:var(--gray-600); font-size:14px;}
.page-content.application .steps .step .badge {margin-top:20px;}
.page-content.application .steps .step.active .badge {color:#0074c2; background-color:#f0f7f1;}
.page-content.application .steps .step.complete .badge {color:#3A7346; background-color:#dfeaf2; }
.page-content.application .steps .step.modify .badge {color:var(--white); background-color:#495057;}
.page-content.application .steps .step.complete .step-number .step-number-inner {color:var(--white); background-color:#44834D;}
.page-content.application .steps .step.modify .step-number .step-number-inner {color:var(--white); background-color:#495057;}
.page-content.application .step-content .step-title-wrap {display: flex; justify-content: space-between; align-items: flex-start;}
.page-content.application .step-content .step-title {display: block; margin-bottom:15px; font-size:1.3rem; font-weight:700; line-height:var(--body-line-height);}
.page-content.application .container .bottom-btn-wrap {margin-top:0;}

/* 입사지원서 > 개인정보 */
.page-content.application.incoPesnInfo-page .form-table .th {width:15%;}
.page-content.application.incoPesnInfo-page .form-table.info-form-table li:nth-child(4) .td,
.page-content.application.incoPesnInfo-page .form-table.info-form-table li:nth-child(6) .td {width:35%;}
.page-content.application.incoPesnInfo-page .form-table .td:has(.file-upload-wrapper){width:28%; max-width:306px;}
.page-content.application.incoPesnInfo-page .form-table .td > div{display: flex; align-items: center; gap: 5px;}
.page-content.application.incoPesnInfo-page .form-table .form-addr .addr-wrap + .addr-wrap{margin-top: 4px;}
.page-content.application.incoPesnInfo-page .form-table .form-addr .addr-3 .invalid-feedback{max-width: 400px;}
.page-content.application.incoPesnInfo-page .form-table.ml-form-table .td:nth-child(6) {width:28%;}


/* 입사지원서 > 학력사항 */
.page-content.application .form-select.final-academic {max-width:212px;}
.page-content.application .final-school {display:none;}
.page-content.application .final-school table {border-top:0;}
.page-content.application .final-school table td.empty {position:relative; width:1px; height:100%; padding:5px 10px; border-left:1px solid var(--white);}
.page-content.application .final-school table td.empty:after {content:""; position:absolute; top:0; right:-1px; width:1px; height:100%; background-color:var(--white);}
.page-content.application .form-table.education td {text-align:left;}
.page-content.application .form-table.education .th {width:16%;}
.page-content.application .form-table.education .form-control {max-width:275px;}
.page-content.application .form-table.education .form-select.graduation,
.page-content.application .form-table.education .form-select.entrance {width:275px;}
.page-content.application .form-table.education .form-check {padding-left:0; display:flex; align-items:center; gap:5px;}
.page-content.application .form-table.education .form-check .form-check-input {display:inline-block; margin:0;}
.page-content.application .form-table.education .grade {width:275px;}
.page-content.application .form-table.education .file-upload-wrapper {max-width:100%;}

/* 입사지원서 > 자격사항 */
.page-content.application .certificate .input-group .form-control {margin-left:-1px !important; border:0;}
.page-content.application .certificate .input-group .btn-return {width:30px; height:30px; margin:2px; padding:0;}
.page-content.application .certificate .input-group .btn-return i {font-size:16px; font-weight:300;}

/* 입사지원서 > 자기소개서 */
.page-content.application.slflntroDcmn-page .alert-container {position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); z-index:1055; white-space:nowrap; display:none;}
.page-content.application.slflntroDcmn-page .form-table th {display: flex; align-items: flex-end; justify-content: space-between;}
.page-content.application.slflntroDcmn-page .form-table .form-label {flex: 1; text-align: left;}
.page-content.application.slflntroDcmn-page .form-table .length {font-size:12px; font-weight:400;}
.page-content.application.slflntroDcmn-page .form-table .length span {display:inline-block; font-weight:500; margin-right:5px; color:#DE1717 !important;}
.page-content.application.slflntroDcmn-page .invalid-feedback {margin-bottom: 4px; text-align: left;}
.page-content.application.slflntroDcmn-page textarea {padding:0; border:0;}

/* 입사지원서 > 최종확인 */
.page-content.application.infolstconf-page .confirmation-area {clear:both; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:20px;}
.page-content.application.infolstconf-page .confirmation-area p {font-size:15px; font-weight:500;}
.page-content.application.infolstconf-page .confirmation-area .point-text {display:inline-block; font-size:20px; font-weight:600; color:var(--primary)}
.page-content.application.infolstconf-page .confirmation-area .form-check {display:flex; align-items:center; gap:5px; padding-left: 0;}
.page-content.application.infolstconf-page .confirmation-area .form-check .form-check-label {position: initial; width: auto; height: auto;}

/* 입사지원서 > 접수완료 */
.page-content.application.incoSupDcmnConf-page .h1 .end-txt {display:block; color:#0c9ecf !important;}
.page-content.application.incoSupDcmnConf-page .table-area{margin-top: 30px;}
.page-content.application.incoSupDcmnConf-page .table{min-width: auto;}
.page-content.application.incoSupDcmnConf-page .table tbody{width: 100%;}

/* 입사지원서 > [인재풀] 희망지역 */
.page-content.application.talmnHopeOcpt-page .form-table select, 
.page-content.application.talmnHopeOcpt-page .form-table input{width: 70%;} 
.page-content.application.talmnHopeOcpt-page .form-table .input-wrap{display: flex; align-items: center; gap: 5px;} 

/* 마이페이지 */
.my-page .flex-column {gap:1.6rem;}
.my-page .my-page-title {position:relative; padding-bottom: 1rem; font-weight: 600; font-size: clamp(26px, 3vw, 42px); line-height: normal; text-align:center; }
.my-page .my-page-title:after {content:""; position:absolute; left:50%; bottom:0; width:30%; height:2px; background-color:var(--primary); transform:translateX(-50%);}
.my-page .login-area {position:relative; max-width:546px; width: 100%; margin: 0 auto;}
.my-page .login-area .btn[type="submit"] {font-size: 13px; font-weight:700;}
.my-page .login-area .btn-wrap a {position:relative; display:inline-block; margin: 0 10px; vertical-align:middle; color:var(--second-color); font-size: 13px; font-weight:400;}
.my-page .login-area .btn-wrap a + a:before {content:""; position: absolute; left: -20px; top: 50%; transform: translateY(-50%); display:inline-block; width:1px; height:12px; margin:0 10px; vertical-align:middle; background-color:var(--border-color);}
.my-page .login-area .doted-list li {font-size: 13px; font-weight:400;}

.my-page .content-box {position:relative; padding:40px; background-color: rgba(0, 119, 200, 0.05);}
.my-page .content-box .inner-box {width:100%; padding:30px; background-color: var(--white);}
.my-page .content-box .inner-box .table ~ .guide-list {margin-top:8px;}
.my-page .content-box .table td .value.success {color:var(--main-color); font-size:20px; font-weight:600;}

.my-page .announcement {position:relative; min-height:132px; margin:0; padding:20px 0; border-bottom:1px solid var(--border-color); display:flex; align-items:center; justify-content:space-between;}
.my-page .announcement > [class*="col-"] {position:relative; display:flex; align-items:center; gap: .8rem;}
.my-page .announcement .announcement-left {padding-left:0;}
.my-page .announcement .announcement-right {padding-right:0; justify-content:space-between;}
.my-page .announcement .announcement-left > .badge {width: 20%; font-size:14px; font-weight:600; line-height:1.4; border-radius: 20px;}
.my-page .announcement .info-wrap {flex: 1;}
.my-page .announcement .info-title {display: flex; align-items: baseline;}
.my-page .announcement .info-title .badge.area {color:var(--second-color); border:1px solid var(--second-color); line-height:1;}
.my-page .announcement .info-title .badge.area.nationwide {color:var(--main-color); border:1px solid var(--main-color);}
.my-page .announcement .info-title .recruit-name {display:inline-block; height: auto; margin-left:5px; font-size:1rem; font-weight:600; white-space:normal; word-break:keep-all; line-height:1.4;}
.my-page .announcement .info-date {margin-top: .4rem;}
.my-page .announcement .info-date .badge {margin-left:10px; font-size:14px; font-weight:400; border-radius:4px; line-height:1;}
.my-page .announcement .info-date .badge.d-day {color:var(--danger); background-color:rgba(239, 83, 80, 0.1);}
.my-page .announcement .info-date .badge.finish {color:var(--second-color); background-color:rgba(73,80,87, 0.1);}
.my-page .announcement .info-date .badge.result {color:#0072ad; background-color:rgba(0,119,200, 0.1);}
.my-page .announcement .info-date .period {font-size:14px; font-weight:400;}
.my-page .announcement .registration-authority {display:flex; flex-direction:column; gap:.8rem; border: none;}
.my-page .announcement .registration-authority .organ {display:flex; align-items:center; padding-bottom: 0; font-size:1rem; font-weight:600; white-space:nowrap; line-height:1.4;}
.my-page .announcement .recruit-info {flex-direction: row; margin-top: 0;}
.my-page .announcement .recruit-info span+span {position:relative; padding-left: 20px;}
.my-page .announcement .recruit-info span + span:before {content: ''; position: absolute; left: 9px; top: 50%; transform: translateY(-50%); display:inline-block; width:2px; height: 80%; background-color:#d9d9d9;}

.my-page .announcement .btn-area {display:flex; flex-direction:column; gap:5px; justify-content:center;}
.my-page .announcement .btn-area .btn {min-width:73px;}
.my-page .announcement .btn-area .btn-danger.del-form {background-color:#dc3838;}
.my-page .announcement .inner-wrap {display:flex; align-items:center; justify-content:space-between; padding:12px 10px; margin-top:24px; margin-left: 0; background-color:#f3f6f9; border-radius:4px;}
.my-page .announcement .inner-wrap + .inner-wrap {margin-top:10px;}
.my-page .announcement .inner-wrap > [class^="col-"] {padding:0;}
.my-page .announcement .inner-wrap .badge.writing,
.my-page .announcement .inner-wrap .badge.completed,
.my-page .announcement .inner-wrap .badge.end {width:80px; height:22px; text-align:center; font-size:12px; font-weight:500; border-radius:11px;}
.my-page .announcement .inner-wrap .period {font-size:12px;}
.my-page .announcement .inner-wrap .organ {font-size:14px; padding-left:10px;}
.my-page .announcement .inner-wrap .organ .mg {width:20px; height:18px; margin:0 5px 0 0;}

.my-page .announcement.announcementB .announcement-cont{display: flex; padding: 1rem 0 1rem;}
.my-page .announcement.announcementB .announcement-left{display: flex;align-items: center;gap: 0.8rem;}
.my-page .announcement.announcementB .announcement-left .info-title{align-items: center}
.my-page .announcement.announcementB .announcement-left .info-title .recruit-name{margin-top: 0;}
.my-page .announcement.announcementB .announcement-right{display: flex; align-items: center;}
.my-page .announcement.announcementB .announcement-right .registration-authority{display: block; padding-bottom: 0;}
.my-page .announcement.announcementB .inner-wrap{margin-top:0;}
.my-page .announcement.announcementB .inner-wrap + .inner-wrap {margin-top:8px;}
.my-page .empty{margin-top: 2rem;}

/* 추가채용 면접일정 확인 팝업 */
.my-page .add-interview-info {display:flex; justify-content:center; flex-direction:column; gap:40px 0; list-style:none; text-align:left;}
.my-page .add-interview-info .list-title {font-weight:600;}
.my-page .add-interview-info .list-title + .table-area, .my-page .add-interview-info .list-title + .solid {margin:10px 0;}
/* 전형 합격자발표 */
.mySupAncm-page.page-content {margin-top:80px; display:flex; flex-direction:column; gap:4rem;}
.mySupAncm-page.page-content caption{position: absolute; width: 1px; height: 1px;padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;}
.mySupAncm-page.page-content .result-area {position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; width:50%; height:254px; margin: 0 auto; background:url(../images/vertical_logo_symbol.svg) no-repeat center; background-size:auto 100%;}
.mySupAncm-page.page-content .result-area .result-comment {display:inline-block; min-height:auto; padding:10px 15px; color:var(--white); font-size:1.4rem; font-weight:600; text-align:center; background-color:var(--main-color); white-space:nowrap; line-height:var(--body-line-height);}
.mySupAncm-page.page-content .result-area .message {display:block; text-align:center; font-size:2rem; font-weight:600; line-height:1.4;}        
.mySupAncm-page.page-content .title {display:block; margin:0 auto 20px; font-size:1.5rem; font-weight:600; text-align:center; line-height:1.4;}
.mySupAncm-page.page-content .fail-message {display:flex; flex-direction:column; align-items:center; padding:4rem; text-align:center; justify-content:center; gap:3rem; background-color:#f3f6f9;}
.mySupAncm-page.page-content .fail-message .fail-comment {max-width:90%; font-size:24px; font-weight:600; line-height:1.6; word-break:keep-all;}
.mySupAncm-page.page-content .fail-message p {font-size:18px; font-weight:400; margin:0; word-break:keep-all;}
.mySupAncm-page.page-content .fail-message p.lh-xl {line-height:2.6;}
.mySupAncm-page.page-content .bg-img-area{position: absolute;top: 0; display: flex; justify-content: space-between; width: 100%;}
.mySupAncm-page.page-content .bg-img-area .img-area{position: relative; overflow: hidden;width: 30%; max-width: 300px; height: 0; padding-bottom: 15rem;}
.mySupAncm-page.page-content .left.img-area .bounce {width: 67%; position: absolute; left: 13%;}
.mySupAncm-page.page-content .right.img-area img:last-child {position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; width: 60%;}
.mySupAncm-page.page-content .list-title {display: inline-block; font-size: 1.2rem; font-weight: 600; line-height:var(--body-line-height);}
.mySupAncm-page.page-content .list-title + .table-area{margin-top: 10px;}
.mySupAncm-page.page-content .doted-list + .guide-list{margin-top: 1rem;}
.mySupAncm-page.page-content .talmnpool-info b{font-weight: 600;}
.mySupAncm-page.page-content .talmnpool-info .doted-list{margin: 8px 0 16px;}
.mySupAncm-page.page-content .recruit-detail-body{position: relative; padding-top: 3rem;}
.mySupAncm-page.page-content .recruit-detail-body:before{content: ''; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 1px; background: var(--border-color);}

/* animation */
.img-area,
.text-area .h1 span {
    opacity:0;
    animation-name: bounceIn;
    animation-duration: 450ms;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    animation-delay: 0.3s;
}
@keyframes bounceIn {
    0% {opacity:0; transform: scale(0.3) translate(0,0,0);}
    50% {opacity:0.9; transform: scale(1.1);}
    80% {opacity:1; transform: scale(0.89);}
    100% {opacity:1; transform: scale(1) translate(0,0,0);}
}
.text-area .h1 span:nth-child(1) {animation-delay: 0.3s;}
.text-area .h1 span:nth-child(2) {animation-delay: 0.5s;}

.bounce {position:relative; top:20px; -webkit-animation: bounce 2s ease infinite; animation: bounce 2s ease infinite;}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-30px);}
    60% {transform: translateY(-15px);}
}
.bounce2 {position:absolute; bottom: 0; left:50px; -webkit-animation: bounce2 2s ease infinite; animation: bounce2 2s ease infinite;}
@keyframes bounce2 {
    0%, 20%, 50%, 80%, 100% {transform:scale(1);}
    40% {transform: scale(0.6);}
    60% {transform: scale(0.8);}
}

@keyframes confetti-slow {
    0% {transform: translate3d(0, 0, 0) rotateX(0) rotateY(0);}
    100% {transform: translate3d(25px, 105vh, 0) rotateX(360deg) rotateY(180deg);}
}
@keyframes confetti-medium {
    0%{transform:translate3d(0,0,0) rotateX(0) rotateY(0);}
    100%{transform:translate3d(100px,105vh,0) rotateX(100deg) rotateY(360deg);}
}
@keyframes confetti-fast {
    0%{transform:translate3d(0,0,0) rotateX(0) rotateY(0);}
    100%{transform:translate3d(-50px,105vh,0) rotateX(10deg) rotateY(250deg);}
}
.confetti {position:absolute;z-index:1;top:-10px;border-radius:0;}
.confetti-container{perspective:400px;position:absolute;overflow:hidden;top:0;right:0;bottom:0;left:0;}
.confetti--animation-slow {animation:confetti-slow 4.25s linear 1 forwards;}
.confetti--animation-medium {animation:confetti-medium 3.75s linear 1 forwards;}
.confetti--animation-fast {animation:confetti-fast 3.25s linear 1 forwards;}

/* 폭죽 Animation */
.congratulations {position:absolute; top:80px; left:50%; width:10px; height:10px;}
.congratulations > .before,
.congratulations > .after {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    box-shadow: 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff;
    -webkit-animation-delay: 0.5s, 0.5s, 0.5s;
    animation-delay: 0.5s, 0.5s, 0.5s;
    -webkit-animation: 1s bang ease-out 1s infinite backwards, 1s gravity ease-in 1s infinite backwards, 5s position linear 1s infinite backwards;
    animation: 1s bang ease-out 1s infinite backwards, 1s gravity ease-in 1s infinite backwards, 5s position linear 1s infinite backwards;
}
.congratulations > .after {
    -webkit-animation-delay: 1s, 1s, 1s;
    animation-delay: 1s, 1s, 1s;
    -webkit-animation-duration: 1s, 1s, 6s;
    animation-duration: 1s, 1s, 6s;
}
@-webkit-keyframes bang {
    to {box-shadow: -27px -201px #ff00ae, -110px 19px #3300ff, -61px -160px #00ff84, -15px -42px #ff00cc, -115px -95px #ff5e00, -119px -61px #00ff9d, 141px -211px #6a00ff, -225px -183px #00ff95, 140px -21px #0dff00, 12px -97px #ff5e00, -121px 45px #00b7ff, -28px -212px #ff0080, -64px 27px #00ff51, -107px -179px #00ff37, 217px 24px #ff4000, -131px 27px #c800ff, -17px 31px #006fff, -55px -120px #0040ff, -137px -238px #ffcc00, -166px 23px #ddff00, -173px -88px #66ff00, 131px -113px #00fff2, 46px -97px #ffee00, -58px -155px #009dff, 204px -145px #00f7ff, 219px -150px #0033ff, -169px 15px #ffee00, 130px 3px #1100ff, 94px 27px #ffea00, 70px -1px #6f00ff, -120px -202px #ff00ea, 74px -242px #b700ff, 197px -178px #bf00ff, -197px -87px #ff6600, 68px -114px #ff003c, 186px -99px #ff8400, 31px -109px #eaff00, 24px -78px #ff0015, -86px -249px #00ff1a, 247px -8px #ff009d, 156px -68px #00fff7, -150px -73px #004dff, -10px -141px #d0ff00, 190px -78px #00ffd0, 26px -242px #0900ff, 162px 34px #3300ff, 99px 50px #6a00ff, -228px 27px #11ff00, 87px -14px #e100ff, 200px -73px #00ff22, -164px -203px #00ffe6;}
}
@keyframes bang {
    to {box-shadow: -27px -201px #ff00ae, -110px 19px #3300ff, -61px -160px #00ff84, -15px -42px #ff00cc, -115px -95px #ff5e00, -119px -61px #00ff9d, 141px -211px #6a00ff, -225px -183px #00ff95, 140px -21px #0dff00, 12px -97px #ff5e00, -121px 45px #00b7ff, -28px -212px #ff0080, -64px 27px #00ff51, -107px -179px #00ff37, 217px 24px #ff4000, -131px 27px #c800ff, -17px 31px #006fff, -55px -120px #0040ff, -137px -238px #ffcc00, -166px 23px #ddff00, -173px -88px #66ff00, 131px -113px #00fff2, 46px -97px #ffee00, -58px -155px #009dff, 204px -145px #00f7ff, 219px -150px #0033ff, -169px 15px #ffee00, 130px 3px #1100ff, 94px 27px #ffea00, 70px -1px #6f00ff, -120px -202px #ff00ea, 74px -242px #b700ff, 197px -178px #bf00ff, -197px -87px #ff6600, 68px -114px #ff003c, 186px -99px #ff8400, 31px -109px #eaff00, 24px -78px #ff0015, -86px -249px #00ff1a, 247px -8px #ff009d, 156px -68px #00fff7, -150px -73px #004dff, -10px -141px #d0ff00, 190px -78px #00ffd0, 26px -242px #0900ff, 162px 34px #3300ff, 99px 50px #6a00ff, -228px 27px #11ff00, 87px -14px #e100ff, 200px -73px #00ff22, -164px -203px #00ffe6;}
}
@-webkit-keyframes gravity {
    to {
        transform: translateY(150px);
        -moz-transform: translateY(150px);
        -webkit-transform: translateY(150px);
        -o-transform: translateY(150px);
        -ms-transform: translateY(150px);
        opacity: 0;
    }
}
@keyframes gravity {
    to {
        transform: translateY(150px);
        -moz-transform: translateY(150px);
        -webkit-transform: translateY(150px);
        -o-transform: translateY(150px);
        -ms-transform: translateY(150px);
        opacity: 0;
    }
}
@-webkit-keyframes position {
    0%,19.9% {margin-top:10%; margin-left:40%;}
    20%,39.9% {margin-top:40%; margin-left:30%;}
    40%,59.9% {margin-top:20%; margin-left:70%;}
    60%,79.9% {margin-top:30%; margin-left:20%;}
    80%,99.9% {margin-top:30%; margin-left:80%;}
}
@keyframes position {
    0%,19.9% {margin-top:10%; margin-left:40%;}
    20%,39.9% {margin-top:40%; margin-left:30%;}
    40%,59.9% {margin-top:20%; margin-left:70%;}
    60%,79.9% {margin-top:30%; margin-left:20%;}
    80%,99.9% {margin-top:30%; margin-left:80%;}
}

/* 개인정보처리방침 */
.policy-page .btn.btn-link {padding: 4px 8px; font-size: 12px; border: 1px solid var(--primary);}
.policy-page .btn.btn-link:hover{color: var(--white); background: var(--primary);}
.policy-page .row{margin: 0;}
.policy-page .row div[class*=col-lg] {padding: 0;}
.policy-page .nav-wrap {position:sticky; top:140px;}
.policy-page .nav-wrap .nav-title {padding:0; color:var(--primary); font-size:.9rem;}
.policy-page .nav-wrap .nav {flex-wrap: wrap; flex-direction: column; padding-top:8px}
.policy-page .nav-wrap .nav .nav-item {width: fit-content; font-size: .85rem;}
.policy-page .nav-wrap .nav .nav-item .nav-link {display: block; padding: .1rem 0; color:var(--body-color); opacity:0.8;}
.policy-page .nav-wrap .nav .nav-item .nav-link.active {opacity:1; font-weight:600; cursor:pointer; pointer-events:visible;}
.policy-page .nav-wrap .nav .nav-item .nav-link:hover {opacity:1;}
.policy-page .nav-wrap .nav .nav-item .nav-link > span {display:inline-block; margin-right: .2rem;}
.policy-page .content {margin:60px 0 80px; color: var(--body-color); font-size: .9rem; font-weight: 400;}
.policy-page .content b{font-weight: 600;}
.policy-cont{margin-left: 1rem;}
.policy-area {position:relative; margin-top:20px}
.policy-area p {font-size: .9rem; word-break: keep-all; line-height: var(--body-line-height); word-wrap: normal;}
.policy-area .info-box {margin:40px 0 40px;}
.policy-area .info-box ul.label {display:flex; flex-wrap:wrap; list-style:none;}
.policy-area .info-box ul.label li {width:calc(33.3333% - 2px); padding:20px; text-align:center; vertical-align:top; margin:1px; background-color:var(--white);}
.policy-area .info-box ul.label li .ico-label {width:70px; margin:16px auto;}
.policy-area .info-box ul.label li .ico-label img {width:100%; height:100%;}
.policy-area .info-box ul.label li p {font-size:14px; opacity:0.9; letter-spacing:-1px;}
.policy-list {display:flex; flex-direction:column; gap: 4rem; margin-top: 2rem;}
.policy-list > li {list-style:none; position:relative;}
.policy-list > li .policy-list-tit {display:flex; align-items:center;}
.policy-list > li .policy-list-tit .label {display:flex; gap:4px; align-items:center; flex-wrap:nowrap;}
.policy-list > li .policy-list-tit .label span {display:inline-block; width:40px; height:40px;}
.policy-list > li .policy-list-tit strong {margin-left:12px; font-size:20px;}
.policy-list > li *:not(.btn, .btn i) {color:var(--body-color);}
.policy-list > li p {margin-top:16px; font-size:.9rem;}
.policy-list > li > ol {padding:8px 0 0 20px; display:flex; flex-direction:column;}
.policy-list > li > ol > li {margin-top:.8rem;}

.policy-list caption {caption-side: top; display: table-caption; margin: 20px 0 8px; padding: 0; color: var(--body-color); font-size: .9rem; font-weight: 600;}
.policy-list .table-area {position:relative;}
.policy-list .table-area:has(:not(caption.sr-only)) {margin-top: 8px;}
.policy-list .table-area + .dash-list {margin-top:8px; font-size: .8rem; opacity:0.8;}
.policy-list .table {border-top-width: 1px;}
.policy-list .table th {font-size:.8rem; font-weight:600;}
.policy-list .table td {font-size: .8rem;}
.policy-list .reference-mark-list li {font-size:.8rem;}

/* Modal */
.body.modal-open {overflow:hidden;}
.modal{--modal-padding: 1rem; --modal-header-padding-x: 1rem; --modal-header-padding-y: 1rem; --modal-header-padding: 1rem; left: 50%; transform: translateX(-50%);}
.modal video{width: 100%;}
.modal caption{position: absolute; width: 1px; height: 1px;padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;}
.modal-dialog {width: 100%; max-height: none;padding: 1rem; margin: 0 auto; overscroll-behavior:contain;top: 50%; transform: translateY(-50%) !important;}
.modal-content {box-shadow: 0 0 12px rgba(0, 0, 0, .4);}
.modal-header .modal-title{font-size: 1.4rem;}
.modal-body .form-select.area-select {max-width:144px; margin-top:15px; cursor:pointer;}
.modal-body .table{min-width: auto;}
.modal-body .btn-area {position:relative; width:100%; display:flex; align-items:center; justify-content:center; margin-top: 1rem;}
.modal-body .btn{font-weight: 500; font-size: .8rem;}
.modal-body .btn-area .btn:focus-visible {outline:3px solid var(--black);}
.modal-footer .btn {font-size:.9rem; font-weight:600; line-height:1.2;}
.modal-footer .btn:focus {outline:3px solid var(--black);}
.modal-backdrop.show {z-index:1050;}
.modal-backdrop.show + .modal-backdrop.show {z-index:1055;}

/* Modal 새마을금고 Story */
.modal video ~ .text-area {margin-top:20px;}
.modal.modalStoryView .modal-content{width: 97%; margin: 0 auto;}
.modal.modalStoryView .img-area {position:relative; width:100%; animation:none; opacity:1; background:#e9ebec url(../images/story-noImage.svg) no-repeat center; background-size:50%; overflow:hidden;}
.modal.modalStoryView .img-area ~ .text-area {margin-top:20px;}

/* Modal 채용정보 */
#modalRecruitGeumgoInfo.show{z-index: 100000;}
#modalRecruitGeumgoInfo .modal-header {position:relative; width:100%; gap:20px; align-items:flex-start; justify-content:flex-start;}
#modalRecruitGeumgoInfo .modal-header .btn-close {position:absolute; top:20px; right:20px;}
#modalRecruitGeumgoInfo .modal-body {padding-top:0;}
#modalRecruitGeumgoInfo .table th:nth-child(4) {max-width: 300px;}
#modalRecruitGeumgoInfo .table tbody tr td:nth-child(4) {text-align:left; max-width: 300px;}
#modalRecruitGeumgoInfo .modal-dialog {max-width:1100px}

/* Modal 마이페이지 내 공통 */
.my-page ~ .modal .table td{text-align: left;}

/* Modal 마이페이지 */
.modal-dialog.confirmation {max-width:480px;}
.modal-dialog.confirmation .modal-title {text-align:center; flex-grow:1;}
.modal-dialog.confirmation .modal-header {position:relative;}
.modal-dialog.confirmation .modal-header .btn-close{position: absolute; right: 1rem; top: 1.4rem;}
.modal-dialog.confirmation .modal-body {display:flex; padding-bottom:30px; flex-direction:column; gap:30px; align-items:center; text-align:center;}
.modal-dialog.confirmation .confirm-wrap {position: relative;}
.modal-dialog.confirmation .confirm-wrap:before {content: '!'; display: block; max-width: 110px; width: 8rem; max-height: 110px; height: 8rem; margin: 0 auto 1rem; color: var(--white); font-size: 40px; line-height: 1.8; background-color: var(--primary); border: 20px solid #f3f6f9; border-radius: 50%;}

/* Modal 간편 본인인증 */
#modalSimpleIdentification .modal-dialog {max-width: 540px;}
#modalSimpleIdentification .modal-body .process-1 {width:100%; display:flex; flex-direction:column; gap:24px;}
#modalSimpleIdentification .modal-body .process-2 {width:100%; display:none; flex-direction:column; gap:24px;}
#modalSimpleIdentification .modal-body .process-2 p {font-size:.9rem; font-weight:400;}
#modalSimpleIdentification .modal-body .process-3 {width:100%; display:none; flex-direction:column;}
#modalSimpleIdentification .modal-body .process-3 h2 {font-weight:600;}
#modalSimpleIdentification .modal-body .process-3 p {font-size:18px; font-weight:400; line-height:26px;}
#modalSimpleIdentification .modal-content .doted-list li {display:flex; align-items:center; justify-content: space-between; letter-spacing:-1px; line-height: normal;}
#modalSimpleIdentification .modal-content .doted-list > li:before{top: 11px;}
#modalSimpleIdentification .modal-content .doted-list li span {display:inline-block;}
#modalSimpleIdentification .modal-content .doted-list li .form-check-inline {display:inline-block; margin:0 0 0 4px;}
#modalSimpleIdentification .modal-content .doted-list li .view-detail{position: relative;}
#modalSimpleIdentification .form-table li {display:flex; flex-direction:row; height:54px; align-items:center;}
#modalSimpleIdentification .form-table li > div{display: flex; justify-content: center; align-items: center; min-height: initial; height:100%; padding: 0;}
#modalSimpleIdentification .form-table .th {width:30%;}
#modalSimpleIdentification .form-table .td {width:70%; padding: 0 0.8rem;}
#modalSimpleIdentification .form-table .td .form-control#name, 
#modalSimpleIdentification .form-table .td .form-control#birthDate {text-align:left;}
#modalSimpleIdentification .form-check-wrap .form-check-title{font-weight: 600; font-size: 1.1rem;}
#modalSimpleIdentification .form-check-wrap .form-check-inline {margin:20px auto 0; display:flex; justify-content:center; padding-left:0;}
#modalSimpleIdentification .proceeding {display: flex; flex-direction: column; align-items: center; padding: 1.2rem 0; text-align:center; gap: 1rem;}
#modalSimpleIdentification .proceeding strong{font-size: 1.2rem;}
#modalSimpleIdentification .proceeding .app-icon {width:80px; height:80px; overflow:hidden; background-repeat:no-repeat; background-position:center; background-size:cover; box-shadow:0 0 12px #ccc;;}

/* Modal 본인인증 필수 동의사항  */
.modal.modal-policy .modal-dialog {padding:20px;}
.modal.modal-policy .modal-content {box-shadow:0px 14px 40px rgba(0, 0, 0, 0.4);}
.modal.modal-policy .policy-box {width:100%; max-height: 66vh; height: 100%; padding:20px;  border-radius:4px; border:1px solid var(--input-border-color); background-color:#ececec; overflow-y:auto;}
.modal.modal-policy .policy-box p {font-size:14px;}
.modal.modal-policy .policy-box {display:flex; flex-direction:column; gap:20px;}
.modal.modal-policy .policy-box p {word-break:break-all;}
.modal.modal-policy .policy-box ol {padding-left:20px;}
.modal.modal-policy .policy-box ol li + li {margin-top:16px}
.modal.modal-policy .policy-box ol li > .dash-list {margin-top:4px;}
.modal.modal-policy .policy-box ol li > .dash-list li {font-size:13px;}
.modal.modal-policy .policy-box ol li > .dash-list li + li {margin-top:4px;}

/* Modal 지역선택 */
.modal .area-list {display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:24px;}
.modal .area-list a {position:relative; display:flex; width:calc(25% - 24px); height:43px; margin:4px 0; color:var(--primary); font-size:16px; font-weight:600; text-align:center; align-items:center; justify-content:center; border-radius:4px; overflow:hidden; border:1px solid var(--primary);}
.modal .area-list a span {z-index:2;}
.modal .area-list a:before {content:""; position:absolute; width:100%; height:0; left:0; bottom:0; background-color:var(--primary); transition:all 0.25s;}
.modal .area-list a.active {color:var(--white);}
.modal .area-list a.active:before {height:100%;}

/* Modal 금고선택 */
#modalwishlinkPopupWishGeumgoGeumgo .guide-wrap{display: flex; align-items: flex-end; justify-content: flex-end; gap: 4px;}
#modalwishlinkPopupWishGeumgoGeumgo .form-select.area-geumgo {width:fit-content;}
#modalwishlinkPopupWishGeumgoGeumgo .geumgo-list {height:272px;}
#modalwishlinkPopupWishGeumgoGeumgo .geumgo-list .table td {text-align:left;}

/* Modal 지역별 채용금고정보 */
.number-employee {display:flex; flex-wrap:wrap; gap:24px; align-items:flex-start;}
.number-employee .brn-area {position:relative; display:flex; flex-direction:column; align-items:flex-end; justify-content:center; text-align:right; width:calc(25% - 18px); height:80px; padding:20px 30px; background-color:var(--white); box-shadow:0 4px 10px rgba(0, 119, 200, 0.15); border-radius:8px; overflow:hidden; transition:all 0.3s;}
.number-employee .brn-area:before {content:""; position:absolute; top:50%; left:30px; transform:translateY(-50%); width:40px; height:40px; background:var(--primary) url(../images/edit/map-pin-white.svg) no-repeat center; border-radius:50%; box-shadow:0 2px 6px rgba(0,0,0,0.15); z-index:1;}
.number-employee .brn-area:after {content:""; position:absolute; left:0; bottom:-1px; width:100%; height:0; background-color:var(--primary); z-index:0; transition:all 0.3s;}
.number-employee .brn-area h6 {position:relative; display:block; margin-bottom:5px; color:var(--primary); font-size:24px; font-weight:600; line-height:1; white-space:nowrap; z-index:1; transition:all 0.5s;}
.number-employee .brn-area p {position:relative; color:#fff; font-size:0; font-weight:500; line-height:1; white-space:nowrap; opacity:0; transform:translateY(20px); transition:transform 700ms cubic-bezier(0.19, 1, 0.22, 1), opacity 700ms cubic-bezier(0.19, 1, 0.22, 1); z-index:1;}
.number-employee .brn-area:hover:after, .number-employee .brn-area:focus-visible:after {height:100%;}
.number-employee .brn-area:hover h6 {color:#fff;}
.number-employee .brn-area:hover p, .number-employee .brn-area:focus-visible p {opacity:1; font-size:16px; transform:translateY(0); transition-delay:calc(700ms/8);}
.number-employee .brn-area:hover:before {background:#f3f6f9 url(../images/edit/map-pin-blue.svg) no-repeat center;}

/* Modal 주소검색 */
.modal .search-wrap {position:relative; width:100%; margin:20px 0 0;}
.modal .search-wrap .input-group {border:0;}
.modal .search-wrap .input-group .form-control {border:1px solid var(--input-border-color);}
.modal .search-wrap .input-group .btn.btn-search {border-top-left-radius:0 !important; border-bottom-left-radius:0 !important;}
.modal .search-wrap .input-group .btn.btn-search:focus-visible {outline:3px solid var(--black);}
.modal .guide-text {position:relative; width:100%; height:412px; padding:24px; border:1px solid var(--table-border-color); border-top:2px solid var(--primary)}
.modal .guide-text > * {font-size:15px; font-weight:400;}
.modal .guide-text .doted-list {position:relative; margin-top:24px; display:flex; flex-direction:column; gap:12px;}
.modal .guide-text .doted-list li {font-weight:400;}
.modal .guide-text .doted-list span {display:block;}
.modal .result-list {display:none; width:100%; min-height:412px; padding:0; border:1px solid var(--table-border-color); overflow:hidden;}
.modal .result-list .table .d-flex {align-items:center; gap:10px;}
.modal .result-list .table .d-flex + .d-flex {margin-top:5px;}
.modal .result-list .table .badge {width:56px; height:22px; text-align:center; flex-shrink:0;}
.modal .result-list .table .value {font-size:15px; font-weight:400; text-align:left;}
.modal .empty{height: 412px;}
.modal .pagination {margin-top:20px;}
.modal .table .list-item {cursor:pointer;}
.modal .table .list-item td a {display:block;}
.modal .table .list-item td .address-area {display:flex; justify-content:flex-start; align-items:center; width:100%;}
.modal .table .list-item td .address-area .basic-address {width:calc(100% - 3%);}
.modal .table .list-item td .address-area .post-num {width:20%; text-align:center;}
.modal .table .list-item.active td {background-color:rgba(65,199,244,0.1);}

/* Modal 학교검색 */
.modal#modalSearchSchool .modal-content {min-height:550px;}
.modal .before-search  {position:relative; width:100%; height:270px; padding:0; border-bottom:1px solid var(--table-border-color); overflow:hidden;}
.modal .search-text {display:flex; align-items:center; justify-content:center; width:100%; height:225px;}
.modal .school-list {display:none; width:100%; min-height:270px; padding:0; border:1px solid var(--table-border-color);}
.modal .school-list .table td {text-align:left;}

/* Modal 전공검색 */
.modal#modalSearchMajor .modal-content {min-height:550px;}
.modal#modalSearchMajor .before-search {height:505px;}
.modal .major-list {display:none; width:100%; height:505px; padding:0; border:1px solid var(--table-border-color); overflow-y:auto;}
.modal .major-list .table td {text-align:left;}

/* Modal intro */
.modal#intro .modal-body{padding: 0;}
.modal#intro .modal-fullscreen .modal-content {position: relative; max-height: none; box-shadow: none; background:#fff url(../images/bg-2.jpg) no-repeat center; background-size:cover;}
.modal#intro .modal-fullscreen .modal-body {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; padding: 2rem 1rem;}
.modal#intro .brand-title {display:flex; align-items: center; justify-content: center; color:#0B386A; font-size: 2.3rem; font-weight:600; line-height: 1;}
.modal#intro .brand-title span{display: inline-block; margin-right: 16px; color: transparent; font-size: 3.3rem; background: url('/resources/images/logo/horizontal-logo-dark.svg') no-repeat center / contain;}
.modal#intro .swiper{width: 100%;}
.modal#intro .swiper-pagination  {display:none;}

.modal#intro .card {position: relative; max-width: 600px; width: fit-content; margin: 0 auto; padding: 2rem 0; background-color: transparent; border:0; border-radius:8px; box-shadow:none; transition:all 250ms ease-in-out; cursor: auto;}
.modal#intro .card:hover {box-shadow:none;} 
.modal#intro .card .card-header {position: absolute; top: 50%; left: 0; width: 12rem; height: 11rem; background-image: linear-gradient(147deg, #54c3f1 0%, #107ac2 74%); box-shadow: 4px 13px 30px 1px rgba(0, 119, 200, 0.2); border-radius: 20px; opacity: 0.95; transform: translateY(-50%); display:flex; align-items: center; justify-content:center; z-index: 10;} 
.modal#intro .card .card-header img.geumgo {width:60%;}
.modal#intro .card .card-header img.jungang {width:80%;}     
.modal#intro .card .card-body {display:flex; flex-direction:column; width: fit-content; margin-left: 2rem; padding: 2rem 1.4rem 2rem 12rem; text-align:left; background-color:#fff; border-radius:25px; transition:all 0.3s;} 
.modal#intro .card .card-body .date {font-size:1.2rem; font-weight:600; line-height:1.4; word-break:keep-all;}
.modal#intro .card .card-body p {margin-top: 1rem; font-size:15px; font-weight:400; opacity:0.7;}
.modal#intro .card .card-body .badge-group {margin-top:16px; display:flex; align-items:flex-start; gap:8px; flex-wrap:wrap;} 
.modal#intro .card .card-body .badge-group .badge {border-radius:4px;} 
.modal#intro .card .card-body .btn {position: relative; width:auto; max-width:160px; margin:30px 0 0; padding:12px 24px; font-size:14px; font-weight:600; border-radius:4px; line-height:1;}

.modal#intro .form-check-wrap{display:flex; align-items:center; justify-content: center;}
.modal#intro .form-check {display:flex; align-items:center; padding:0;}
.modal#intro .form-check .form-check-input {margin:-2px 4px 0 0;}
.modal#intro .form-check-label {font-size:15px;}

/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Responsive
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:1400px) {
	/* main visual */
	/* main.page-wrapper .visual-control {display:none;} 
	main.page-wrapper #visual {max-height:calc(100vh - 440px); height:100%;} */
}	

@media screen and (max-width:1200px) {
	html{font-size: 17px;}
	
	/* header */    
    .logo {width:180px;}
    .logo img {height:40px;}
	/* 메인 */
	main.page-wrapper .swiper-slide-active .text-area .gradient-title {font-size:30px;}
    .search-toggle {display:flex;justify-content:center;align-items:center; width: 36px; height: 36px;}
    .search-toggle:before{left: 9px; top: 9px;}
	.search-toggle:after{right: 9px; bottom: 13px;}
	.search-toggle.active:before,
	.search-toggle.active:after{left: 8px; top: 17px;}

	main.page-wrapper .scroll-nav{display:none;}
	 
    main.page-wrapper .swiper-pagination {display:block;}
    
	main.page-wrapper .section2 .swiper .swiper-slide {width: calc((100% - 20px) / 3);}
	main.page-wrapper .section3 .swiper .swiper-slide {width: calc((100% - 20px) / 3);}
	
    /* 서브페이지 공통 */
}

@media screen and (max-width:1024px) {
	html{font-size: 16px;} 
	/* 메인 */
	main.page-wrapper .section1 + .section {padding-top: 5rem;}
	main.page-wrapper .visual-control {bottom:40px;}
	main.page-wrapper .main-recruit{position: relative; left: 0; bottom: 0; transform: translateX(0); margin: 7% auto 0;}
	main.page-wrapper .main-recruit .card {width: calc(100% / 2 - 1rem);} 
	
	/* 내비게이션 */
	.navbar.navbar-expand-lg .container {max-width:100%; margin:0;}
	.navbar-nav {padding: 0;}
	
	/* 마이페이지 */
	.my-page .announcement {flex-direction: column; align-items: flex-start;}
	.my-page .announcement > [class*="col-"]{width: 100%; align-items: flex-start;}
	.my-page .announcement .announcement-left{flex-wrap: wrap; flex-direction: column;}
	.my-page .announcement .announcement-left > .badge{width: auto;}
	.my-page .announcement .announcement-right{margin-top: 1rem; padding-left: 0;}
    .my-page .announcement .info-date .badge{position: absolute; right: 0; top: 0;}
    .my-page .announcement.announcementB .announcement-left{flex-direction: row; max-width: calc(100% - 73px);}
    .my-page .announcement.announcementB .announcement-right{flex: 1; width: 100%; margin-top:0;}
}

@media screen and (max-width: 992px) {  	
	.offcanvas.showing, 
	.offcanvas.show:not(.hiding) {transform: translateX(100%);}

	/* 공통 */    
    .pc-only {display:none !important;}
    .mobile-only {display:block !important;}
    
    /* header */ 
    #main .fixed-top {background:var(--white);}
    .navbar.navbar-expand-lg .navbar-toggler.btn-sitemap {display:none;}
    
    .navbar.navbar-expand-lg .navbar-collapse {position:relative; margin-top:0; padding-top:20px;}
	.navbar.navbar-expand-lg .navbar-collapse:before {content:""; position:absolute; left:0; top:8px; right:0; height:1px; background-color:var(--border-color);}
	
	.navbar.navbar-expand-lg .navbar-nav .dropdown-menu {display:none; max-height:0; padding:0; overflow:hidden; transition:max-height 0.5s ease-out; border:0; opacity:0;}
	.navbar.navbar-expand-lg .navbar-nav .dropdown-menu.show {display:flex; flex-direction:column; margin:0 !important; gap:8px; max-height:100%; transition:max-height 0.5s ease-out; padding:16px; background-color:#f6f9fc; opacity:1;}
	.navbar.navbar-expand-lg .navbar-nav .dropdown-menu > li > a {font-size: 16px;}
	.navbar.navbar-expand-lg .navbar-nav .nav-item.dropdown .dropdown-item {padding:0; text-align:left; opacity:0.8;}
	.navbar.navbar-expand-lg .navbar-nav .nav-item.dropdown .dropdown-item:hover {opacity:1;}    
	
    .top-banner .text-area:after {display:none;}
	
	/* 메인 */
	main.page-wrapper #visual {margin-top:64px;}
	main.page-wrapper #visual .swiper-slide .swiper-slide-cover {background-size:45%;}
	main.page-wrapper #visual .swiper-slide .gradient-title span {font-size:60px;}
	main.page-wrapper #visual .swiper-slide .text-area p {margin-top:20px; font-size:24px;}
	main.page-wrapper #visual .swiper-slide .text-area p + p {margin-top:20px; font-size:20px; line-height:1.4;}
	main.page-wrapper .section2 .swiper .swiper-slide {width: calc((100% - 16px) / 2);}
	main.page-wrapper .section3 .swiper .swiper-slide {width: calc((100% - 16px) / 3);}
	
    /* 서브페이지 공통 */
    .about .about-list{flex-wrap: wrap;}
    .about .about-list li {width:50%; padding: 1rem 0;}
    
    .about .business .row.flex-between .col-md-6{width: 100%;}
    
	/* 새마을금고소개-회사소개 */
	.page-content.smgIntro-page .about-1 .about-list li{width: calc(100% / 2 - 10px); margin: 0 .2rem;}
    .page-content.smgIntro-page .about-3 .about-list li{min-width: 100%;}
    .page-content.smgIntro-page .about-3 .flex-between {flex-direction:column;}
    .page-content.smgIntro-page .about-3 .right-wrap{margin-left: 0; text-align: center;}
    
    /* 인재상 */
    .page-content.talmn-page .talented .flex-center{flex-wrap: wrap;}
    .page-content.talmn-page .talented .img-area{width: 100%; text-align: center;}
    .page-content.talmn-page .cycle-border{justify-content: center; gap: 1rem;}
    .page-content.talmn-page .cycle-border:before{top: auto; bottom: -2rem;}
    .page-content.talmn-page .cycle-border strong{font-size: 1.2rem;}
    
	/* 개인정보처리방침 */
    .policy-page .nav-wrap {position:relative; top:0; padding: 1rem; margin: 5% 0 0; background-color:var(--table-header-color); border-radius:8px;}
    .policy-page .nav-wrap .nav {display:flex; flex-direction: row; flex-wrap:wrap; margin-top:0; }
    .policy-page .nav-wrap .nav .nav-item {width:50%;}
    .policy-page .content {margin:40px 0;}
    .policy-list {margin-left: 0;}
    
	/* 채용공고 */
    .ofcaList-page.recruit-list #sidebarFiller {visibility:hidden; position:fixed; top:0; bottom:0; transform:translateX(-100%); transition: .3s; z-index:1030;}
    .ofcaList-page.recruit-list #sidebarFiller.show {transform:translateX(0); visibility:visible;}
    .ofcaList-page.recruit-list #sidebarFiller.show:before {content:""; position:fixed; left:100%; top:0; bottom:0; width:100vw; background-color:rgba(0,0,0,0.4);}
    .ofcaList-page.recruit-list #sidebarFiller .btn {transition:none;}
    .ofcaList-page.recruit-list #sidebarFiller .offcanvas-header.mobile-only{display: flex !important; align-items: center; justify-content: space-between;}
    .ofcaList-page.recruit-list #sidebarFiller .offcanvas-body {overflow-y:auto; padding: var(--offcanvas-padding-y) var(--offcanvas-padding-x);}
    #searchFilter .btn-filter {pointer-events:none;}
	#searchFilter .btn-filter input[type="checkbox"] {pointer-events:auto;}
	#searchFilter .btn-filter span {pointer-events:auto;}
    .ofcaList-page.recruit-list + .btn-bottom-filter {display:block;}
    .ofcaList-page + .btn-bottom-filter:focus-visible {outline:3px solid currentcolor;}
    
    .password-toggle-btn .password-toggle-check {top:-1px; width:100%; height:100%; z-index:1;}
	
	/* Modal 채용정보 */
    #modalRecruitGeumgoInfo .modal-header .flex-between{flex-direction: column; align-items: flex-start; gap: 10px;}
}

@media screen and (max-width: 768px) {
	html{font-size: 15px;} 
	
	/* 메인 */
	main.page-wrapper .swiper-slide-active .text-area .gradient-title {font-size:26px;}
	
    /* 복리후생 공통 */
    .benefit-wrap{width: 100%;}
    .benefit-wrap:before{width: 26%; padding-bottom: 26%;}
    .business .about-list li{min-width: calc(50% - 3rem);}
    
    /* faq */
    .faq-page .search-area {width: 100%;}
    
	/* 개인정보처리방침 */
    .policy-page .nav-wrap .nav .nav-item {width: 100%;}
    .policy-page .nav-wrap .nav .nav-item .nav-link{padding: 0;}
    .policy-area .info-box h3 {font-size:20px;}
	.policy-area .info-box ul.label li {width:calc(50% - 2px); padding:16px 4px;}
	.policy-area .info-box ul.label li h5 {font-size:16px;}
	.policy-area .info-box ul.label li .ico-label {width:50px; margin:8px auto;}
    
    /* 개인정보 수집,동의 */
    .pesnInfoPrvsAgre-page .info-box .table{min-width: auto;}
	.pesnInfoPrvsAgre-page .info-box .table th{display: block; width: 100%; background-color: rgba(0, 119, 200, 0.05);}
	.pesnInfoPrvsAgre-page .info-box .table td{display: block; width: 100%;}

	/* 마이페이지 */
	.my-page .announcement.announcementB .announcement-left{max-width: 100%;}
	.my-page .announcement.announcementB .announcement-cont{flex-direction: column;}
	.my-page .announcement.announcementB .announcement-right{margin-top: 8px;}
	.my-page .announcement.announcementB .inner-wrap .col-md-7 .flex-start{flex-wrap: wrap;}
	.my-page .announcement.announcementB .inner-wrap .col-md-5 .flex-between{margin-top: 8px;}
	.my-page .announcement.announcementB .inner-wrap .organ{padding-left: 0;}
	
	/* 전형 합격자발표 */
	.mySupAncm-page.page-content .result-area{width: 100%;}
	.mySupAncm-page.page-content .bg-img-area{justify-content: center;}
	.mySupAncm-page.page-content .bg-img-area img,
	.mySupAncm-page.page-content .bg-img-area .img-area.right {display: none;}
	.mySupAncm-page.page-content .bg-img-area .img-area.left { max-width: none; width: 70%;}
}

@media screen and (max-width: 640px) {
	/* header */
	.top-banner.show{height: auto;}
	.top-banner .container{padding: 1rem 1rem;}
	.top-banner .text-area{flex-direction: column; align-items: flex-start; gap: 0.5rem;}
	
    /* footer */
	.footer .flex-between{flex-wrap: wrap; align-items: flex-start; flex-direction: column-reverse;}
	.footer .sns-wamark {justify-content:space-between; width:100%;}
	
	/* 메인 */
	main.page-wrapper #visual {aspect-ratio:4 / 5;}
	main.page-wrapper #visual .swiper-slide .visual-pc {display:none;}
	main.page-wrapper #visual .swiper-slide .visual-mo {display:block; width:100%; height:100%; object-fit:cover;}
	main.page-wrapper #visual .swiper-slide.slide1 {background-image:url(../images/main-visual-mo01.png);}
	main.page-wrapper #visual .swiper-slide.slide2 {background-image:url(../images/main-visual-mo02.png);}
	main.page-wrapper .btn.arrow-ani{padding: 10px 12px;}
	main.page-wrapper .main-recruit .card {width: 100%; min-height: auto;}
	main.page-wrapper .main-recruit .card .card-cont .badge{margin-right: 4px;}
	main.page-wrapper .main-recruit .card .btn-wrap {margin-top: 1rem;}
	main.page-wrapper .section2 .swiper .swiper-slide {width: calc((100% - 8px) / 1);}
	main.page-wrapper .section3 .swiper .swiper-slide {width: calc((100% - 8px) / 2);}
	
	/* 서브페이지 공통 */
	.sub-visual p{display: none;}
    .about .about-list .cycle {width:120px; height:120px;}	
    
    /* 새마을금고소개-회사소개 */
    .page-content.smgIntro-page .about-3 .about-list li .cycle + p br{display: none;}
    
    /* 새마을금고소개-사업안내 > 여신업무 */
    .page-content.entprzGuidLn-page .arrow{display: none;}
    .page-content.entprzGuidLn-page .business-step .circle{width: 130px; height: 130px;}
    .page-content.entprzGuidLn-page .about-list .cycle{width: 160px; height: 160px;}
    
    /* 새마을금고소개-사업안내 > 전자금융업무 */
    .page-content.entprzGuidEb-page .firm-banking .cycle {width: 160px; height: 160px;}
    
    /* 인재상 */
    .page-content.talmn-page .row.flex-between .col-md-6{flex-wrap: wrap;}
    .page-content.talmn-page .row.flex-between .col-md-6 .img-area{width: 100%; justify-content: center; height: auto; margin-bottom: 1rem;}
    .page-content.talmn-page .row.flex-between .col-md-6 .img-area img{max-width: 120px;}
	.page-content.talmn-page .row.flex-between .col-md-6 .text-area{width: 100%;}
	
	/* faq */
	.faq-page .accordion.faq .accordion-header{flex-wrap: wrap;}
	.faq-page .accordion.faq .accordion-header .badge{flex: 1;}
	
	/* 개인정보처리방침 */
	.policy-page .content .policy-title{flex-direction: column-reverse; align-items: flex-start;}
	.policy-page .content .policy-title .version{width: 100%; margin-bottom: 1rem;}
	
	/* 채용공고 */
	.ofcaList-page.recruit-list .list-header{flex-direction: column; align-items: flex-start; gap: .4rem;}
	.ofcaList-page.recruit-list .select-sort{width: 100%;}
	.ofcaList-page.recruit-list .select-sort .form-select[name="state"]{width: 100%;}
	.ofcaList-page.recruit-list .recruit-post .recruit-info-wrap{flex-wrap: wrap;}
	.ofcaList-page.recruit-list .recruit-post .recruit-info{margin-top: 1rem;}
	.ofcaList-page.recruit-list .recruit-post .recruit-infoB{flex-direction: row; justify-content: space-between; width: 100%;}
	
	/* 채용공고 상세 */
	.recruit-detail .type1 .recruit-detail-header.sticky p, .recruit-detail .type1 .recruit-detail-header.sticky .recruit-detail-title,
	.recruit-detail .type1 .recruit-detail-header.sticky .d-flex .detail-info {display:none;}
	.recruit-detail .type1 .recruit-detail-header.sticky .d-flex, .recruit-detail .type1 .recruit-detail-header.sticky .btn-area {margin-top:0;}
}

@media screen and (max-width: 600px) {
	.container-lg, 
	.container-md, 
	.container-sm, 
	/* .container{max-width: 93%; padding: 0;} */
	
	/* 메인 */
	.floating-area.open {right: 50%; transform: translateX(50%);}
	
	main.page-wrapper .section .section-cont:has(.swiper){min-height: 600px; max-height: none;}
	main.page-wrapper .section.section3 .section-cont:has(.swiper) {min-height: 660px;}
	
	/* form */
	.form-table .email-form {flex-direction: column; align-items: center;}
	.form-table .email-form .input-wrap{flex-wrap: wrap; justify-content: space-between;}
	.form-table .email-form .input-wrap > div {width: calc(100% / 2 - 12px);}
	.form-table .email-form .input-wrap > div.input-email-select{width: 100%;}
	.form-table .email-form .btn-wrap {margin-top: 10px; margin-left: 0;}
	
	.page-content .recruit-detail-body .recruit-step {align-items: flex-start;}
	.page-content .recruit-detail-body .recruit-step li + li:before {width: 30px; height: 30px; padding-bottom: 0;}
	
	/* 개인정보 처리방침 */
	.policy-list > li .policy-list-tit {display:block;}
	.policy-list > li .policy-list-tit strong {display:block; margin:12px 0 0; font-size:16px;}
	
    /* 개인정보 수집,동의 */
    .pesnInfoPrvsAgre-page .agree-wrap .radio-area{display: block;}
    .pesnInfoPrvsAgre-page .agree-wrap .radio-area .form-check + .form-check{margin-top: 4px;}
    
    /* 본인인증 공통 */
    .authentication .form-table .th,
    .authentication .form-table .td {display:block; width:100%; white-space:unset; line-height:1.4; text-align: center;}

	/* 마이페이지 */
	.my-page .announcement:not(.announcementB) .announcement-right{flex-direction: column;}
    .my-page .announcement .btn-area{flex-direction: row;}
    
	/* Modal 간편 본인인증 */
	#modalSimpleIdentification.modal{width: 100%;}
	
	/* Modal 비밀번호 변경 */
	.modal.modal-pw .table.form-table tbody th,
    .modal.modal-pw .table.form-table tbody td {display:block; width:100%; white-space:unset; line-height:1.4;}
    .my-page ~ .modal.modal-pw .table td:has(.btn){text-align: center;}
    
    /* Modal intro */
    .modal#intro .brand-title{flex-direction: column;}
    .modal#intro .brand-title span{margin-right: 0; margin-bottom: 6px;}
    .modal#intro .card {width: 100%; transform: translate(0);}
    .modal#intro .card .card-header {position: relative;top: 2rem;left:0;width: 15rem;height: 7rem;transform:translateY(0);margin-top: -2rem;}
    .modal#intro .card .card-header img.geumgo {width: 40%;}
    .modal#intro .card .card-header img.jungang {width: 60%;} 
    .modal#intro .card .card-body {width: 100%; align-items:center; margin-left:0; padding: 4rem 1rem 2rem;}
    .modal#intro .card .card-body p {font-size:14px;} 
    
    .modal-dialog.confirmation .modal-body {justify-content:flex-start;}
}

@media screen and (max-width: 400px) {
	/* 메인 */
	main.page-wrapper #visual .swiper-slide .gradient-title span {font-size:44px;}
	main.page-wrapper #visual .swiper-slide .text-area p {margin-top:16px; font-size:20px;}
	main.page-wrapper #visual .swiper-slide .text-area p + p {margin-top:16px;}
}

@media screen and (max-width: 360px) {
	html{font-size: 14px;}
}