@charset "UTF-8";

/*===============================================*/
@import url(openAPI_reset.css);
@import url(font.css);
@import url(layout.css?20251013);
@import url(animation.css);
@import url(component.css);
@import url(openAPI_mobile.css);
/*===============================================*/


html,
body {
    position: relative;
    -webkit-overflow-scrolling: touch;
    /*scroll-behavior: smooth;*/
}

:root {
    --trans: transparent;
    --black: #000;
    --black-color1: #111;
    --black-color2: #222;
    --black-color3: #333;
    --black-color4: #444;
    --white: #fff;
    --main-color: #02afc9;
    --middle-color: #a275ca;
    --point-color: #ee41aa;
    --point-red-color: #e30171;
    --point-red-color2: #dc0400;
    --purple-color: #4c62d1;
    --skyblue-color: #0094cb;
    --skyblue-color2: #5e86a7;
    --skyblue-color3: #e3e9ff;
    --blue-color1: #1e75d6;
    --sky-color: #5a90bc;
    --skyblue-bg-color: #5e86a7;
    --navy-color: #001f60;
    --sky-bg-color: #e9eff8;
    --gry-bg-color1: #fafafa;
    --gry-bg-color2: #f7f7f7;
    --gry-bg-color3: #f9f9f9;
    --gry-bg-color7: #818181;
    --gry-bg-color8: #999;
    --gry-bg-color9: #acacac;
    --gry-bg-color10: #a1a1a1;
    --blue-bg-color1: #eff2fe;
    --deep-gry-bg-color: #20202d;

    --gry-color1: #eef1f8;
    --gry-color2: #e5e5e5;
    --gry-color3: #ddd;
    --gry-color4: #ccc;
    --gry-color5: #c2c2c2;
    --gry-color7: #bbbbbb;
    --gry-color6: #c2c5d0;
    --gry-color8: #777;
    --gry-color9: #aaa;
    --gry-color10: #d6d6d6;
    --gry-color11: #878787;
    --gry-color12: #a6a6a6;
    --gry-color13: #fbfbfb;

    --gry-desc: #888;
    --gry-txt1: #797979;
    --gry-txt2: #7e7e7e;
    --gry-txt3: #666;
    --gry-txt4: #333;
    --gry-txt5: #20202d;
    --gry-txt6: #222;

    --label-txt-color: #00a4c7;
    --label-txt-color2: #c2ddee;
    --sub-txt-color1: #e6f1f8;
    --deep-navy-color: #27273f;
    --selected-color: #2842c1;
}

.color-red {
    color: var(--point-red-color2);
}

.color-pink {
    color: var(--point-color);
}

.al-c {
    text-align: center !important;
}

.al-c button + button {
    margin-left: 1rem;
}

.al-l {
    text-align: left !important;
}

.al-r {
    text-align: right !important;
}

.d-flex {
    display: flex;
}

.d-flex-bet {
    justify-content: space-between;
}

.d-flex-align-r {
    justify-content: flex-end;
}

.d-flex-align-c,
.align-c {
    align-items: center;
}

.btns {
    display: inline-block;
    min-width: 7.5rem;
    height: 3rem;
    margin: 0 0 0 .5rem;
    background: #eaeaea;
    border: 0;
    color: #666;
    font-size: 1.4rem;
    font-weight: normal;
    line-height: 3rem;
    padding: 0 1rem;
    text-align: center;
    box-sizing: border-box;
    cursor: pointer;
    vertical-align: middle;
    -webkit-appearance: none;
    overflow: visible;
    white-space: nowrap;
    overflow: hidden;
}

a.btns:after {
    content: '';
    display: inline-block;
    width: 0;
    height: 100%;
    vertical-align: middle;
}

.btns:hover {
    box-shadow: inset 0 10rem 0 rgba(0, 0, 0, .1);
}

.input-area {
    width: auto;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    background: #fff;
    -webkit-justify-content: left;
    -ms-flex-pack: left;
    justify-content: left;
    border: 1px solid #c2c2c2;
}

.input-area .btn-delete {
    display: none;
    width: 2.4rem;
    height: 3.6rem;
    background: url(../images/icon/icon-input-delete.png) no-repeat 50% 50%;
}


.input-area input[type=text],
.input-area input[type=password] {
    width: 100%;
    height: 4.2rem;
    flex: 0 1 auto;
    padding: 0 12px 0 12px;
    border: none;
    background: none;
    font-size: 1.6rem;
    line-height: 4rem;
}

.input-area input[type=text]:disabled,
.input-area input[type=password]:disabled {
    background: var(--gry-bg-color1);
    color: var(--gry-color3);
}

.input-area input[type=password]:disabled::placeholder {
    color: var(--gry-color3);
}

.input-area button span {
    overflow: hidden;
    position: absolute;
    clip: rect(0 0 0 0);
    clip: rect(0, 0, 0, 0);
    width: 0;
    height: 0;
    margin: -1px;
    padding: 0;
    border: 0;
}

.input-area .btn-security {
    width: 2.4rem;
    height: 3.6rem;
    position: relative;
}

.input-area.disabled {
    border: 1px solid #eee;
    background: #f5f5f5;
}

.btn.btn-round {
    border-radius: 5rem !important;
}

.btn-primary {
    font-size: 1.8rem;
    font-weight: 400;
    border-radius: 1rem;
    background: var(--navy-color);
    color: var(--white);
    transition: .5s;
}

.btn-primary-round,
.btn-linear-round {
    min-width: 14rem;
    padding: 1.5rem 3rem;

}

.btn-primary-round {
    font-size: 1.8rem;
    font-weight: 400;
    border-radius: 5rem;
    background: var(--navy-color);
    color: var(--white);
}

.btn-primary-round span {
    font-size: 1.8rem;
    font-weight: 400;
    color: var(--white);
}

.btn-primary:hover,
.btn-primary-round:hover {
    background-color: #556476;
    transition: .5s;
}

.btn-linear-round {
    font-size: 1.8rem;
    border-radius: 5rem;
    border: .1rem solid #3750cd;
    color: #3750cd;
}

.btn-linear-round:hover {
    background-color: #3750cd;
    color: var(--white);
    transition: .5s;
}

.btn-linear-round {
    font-size: 1.8rem;
    border-radius: 5rem;
    border: .1rem solid #3750cd;
    color: #3750cd;

}

.btn-linear-round:hover {
    background-color: #3750cd;
    color: var(--white);
    transition: .5s;
}


.line24 {
    line-height: 2.4rem;
}


.btn {
    display: inline-block;
    vertical-align: middle;
    border: .1rem solid var(--gry-color10);
    border-radius: 0.6rem;
    box-sizing: border-box;
    cursor: pointer;
    text-decoration: none;
}

.btn.icon {
    display: flex;
    align-items: center;
}

.btn.icon::after {
    content: '';
    display: flex;
    flex: 1;
    margin-left: .5rem;
}

.btn.icon-front {
    display: flex;
    align-items: center;
}

.btn.icon-front::before {
    content: '';
    display: flex;
    flex: 1;
    margin-right: .5rem;
}

.btn.icon-front::before {
    width: 1.7rem;
    height: 1.7rem;
    background: url(../images/icon/icon_copy.png) no-repeat 0 0;
}

.btn.icon-back {
    display: flex;
    align-items: center;
}

.btn.icon-back::after {
    content: '';
    display: flex;
    flex: 1;
    margin-left: 1.2rem;
}

.btn.icon-back::after {
    width: 1.7rem;
    height: 1.7rem;
    background: url(../images/icon/icon_copy.png) no-repeat 0 0;
}

.btn.btn-small {
    padding: .6rem 1.8rem;
    color: var(--black-color3);
    font-size: 1.4rem;
    line-height: 1.4rem;
    transition: color .7s, border .5s;
    background: var(--white);
}

.btn.btn-linear {
    padding: 1.2rem 1.8rem;
    color: var(--black-color3);
    font-size: 1.4rem;
    line-height: 1.4rem;
    transition: color .7s, border .5s;
    background: var(--white);
}

.btn.btn-linear:disabled {
    border: 0.1rem solid var(--gry-color4) !important;

    cursor: not-allowed;
}

.btn.btn-linear:disabled span {
    color: var(--gry-color4) !important;
}

.btn.btn-linear:disabled:hover {
    border: 0.1rem solid var(--gry-color4);
    color: var(--gry-color4);
}

.btn.btn-linear:disabled:hover span {
    color: var(--gry-color4) !important;
}

.btn.icon-02::before {
    width: 1.6rem;
    height: 1.6rem;
    background: url(../images/icon/icon_fileUpload.png) no-repeat 0 0;
}

.btn.icon-03::after {
    width: 1.4rem;
    height: 1.2rem;
    background: url(../images/icon/icon_detailView.png) no-repeat 0 0;
}


.btn.btn-blue {
    padding: 1.2rem 1.8rem;
    border: .1rem solid var(--purple-color);
    font-size: 1.4rem;
    line-height: 1.4rem;
    background: var(--white);
}

.btn.btn-blue span {
    color: var(--purple-color);
}

.btn.btn-blue span,
.btn.btn-small span,
.btn.btn-linear span {
    font-size: 1.4rem;
    line-height: 1.4rem;
}

.btn.btn-blue:hover {
    border: .1rem solid var(--gry-color3);
    transition: border .5s;
}

.btn.btn-small:hover,
.btn.btn-linear:hover {
    color: var(--purple-color);
    border: .1rem solid var(--purple-color);
    transition: color .7s, border .5s;
}

.btn.btn-small:hover span,
.btn.btn-linear:hover span {
    color: var(--purple-color);
}


.btn.btn-linear-big {
    padding: 1.8rem 5.6rem;
    color: var(--black-color3);
    font-size: 1.8rem;
    line-height: 1.8rem;
    border-radius: 5rem;
    border: .1rem solid var(--gry-color10);
    transition: color .7s, border .5s;
}

.btn.btn-linear-big:hover {
    color: var(--purple-color);
    border-color: var(--purple-color);
    transition: color .7s, border .5s;
}

.btn.primary:disabled {
    border-color: var(--gry-color7);
    cursor: default;
    color: var(--gry-color7);
}


.btn.gray-arrow::after {
    width: 0;
    height: 0;
    border-left: .5rem solid var(--gry-bg-color9);
    border-top: .5rem solid transparent;
    border-bottom: .5rem solid transparent;
}

.btn.gray-arrow:hover::after {
    border-left: .5rem solid var(--purple-color);
    /* animation: rightFadeOut 0.6s linear infinite; */
    /* transition: .7s; */
}

.btn.gray-arrow:hover {
    color: var(--purple-color);
    border-color: var(--purple-color);
    transition: all .4s;
}

.btn.secondary {
    min-width: 90px;
    height: 38px;
    padding: 5px 15px;
    border: 1px solid #c2c2c2;
    border-radius: 0.14286rem;
    box-sizing: border-box;
    background-color: #fff;
    font-size: 14px;
    color: #111;
    line-height: 26px;
}

.btn.secondary:hover,
.btn.secondary:active,
.btn.secondary:focus {
    background-color: #e7e7e7;
    transition: all .5s;
}

.btn.secondary:disabled {
    border: 1px solid #ededed;
    background-color: #fff !important;
    cursor: default;
    color: #aaa;
}

.btn.secondary.btn-navy {
    border: none;
    background: #181949;
    color: #fff;
}

.btn.secondary.btn-navy:hover {
    background-color: #435367;
}


.toast {
    display: none;
    position: fixed;
    padding: 2rem 4rem;
    left: 50%;
    bottom: 18rem;

    z-index: 10;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.65);
    text-align: center;
    opacity: 1;
}

.toast.on {
    animation: shake .8s ease-in-out forwards;
}

.toast p {
    color: var(--white);
}

.toast-carry p:before,
.toast-compare p:before {
    content: '';
    display: block;
    width: 112px;
    height: 92px;
    margin: 0 auto 20px;
}

.toast-carry p:before {

}

.toast-compare p:before {

}


.mt0 {
    margin-top: 0rem !important;
}

.mt5 {
    margin-top: .5rem;
}

.mt10 {
    margin-top: 1rem;
}

.mt15 {
    margin-top: 1.5rem;
}

.mt20 {
    margin-top: 2rem;
}

.mt25 {
    margin-top: 2.5rem;
}

.mt30 {
    margin-top: 3rem;
}

.mt35 {
    margin-top: 3.5rem;
}

.mt40 {
    margin-top: 4rem;
}

.mt45 {
    margin-top: 4.5rem;
}

.mt50 {
    margin-top: 5rem;
}

.mt200 {
    margin-top: 20rem;
}

.mr5 {
    margin-right: .5rem;
}

.mr10 {
    margin-right: 1rem;
}

.mr15 {
    margin-right: 1.5rem;
}

.mr20 {
    margin-right: 2rem;
}

.mr25 {
    margin-right: 2.5rem;
}

.mr30 {
    margin-right: 3rem;
}

.mr35 {
    margin-right: 3.5rem;
}

.mr40 {
    margin-right: 4rem;
}

.mr45 {
    margin-right: 4.5rem;
}

.mr50 {
    margin-right: 5rem;
}

.mb0 {
    margin-bottom: 0rem;
}

.mb5 {
    margin-bottom: .5rem;
}

.mb10 {
    margin-bottom: 1rem;
}

.mb15 {
    margin-bottom: 1.5rem;
}

.mb20 {
    margin-bottom: 2rem;
}

.mb25 {
    margin-bottom: 2.5rem;
}

.mb30 {
    margin-bottom: 3rem;
}

.mb35 {
    margin-bottom: 3.5rem;
}

.mb40 {
    margin-bottom: 4rem;
}

.mb45 {
    margin-bottom: 4.5rem;
}

.mb50 {
    margin-bottom: 5rem;
}

.ml5 {
    margin-left: 5rem;
}

.ml10 {
    margin-left: 1rem;
}

.ml15 {
    margin-left: 1.5rem;
}

.ml20 {
    margin-left: 2rem;
}

.ml25 {
    margin-left: 2.5rem;
}

.ml30 {
    margin-left: 3rem;
}

.ml35 {
    margin-left: 3.5rem;
}

.ml40 {
    margin-left: 4rem;
}

.ml45 {
    margin-left: 4.5rem;
}

.ml50 {
    margin-left: 5rem;
}

.p0 {
    padding: 0 !important;
}

.left0 {
    left: 0 !important;
}

.black-03 {
    color: var(--black-color3);
}

.input-check {
    display: inline-block;
    min-height: 24px;
    vertical-align: top;
    position: relative;
}

.input-check input[type='radio'],
.input-check input[type='checkbox'] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: -1;
    opacity: 0;
}

.input-check input[type='radio'] + label,
.input-check input[type='checkbox'] + label {
    display: inline-block;
    padding: 1px 0 1px 30px;
    line-height: 20px;
    vertical-align: top;
}

.input-check input[type='radio'] + label:before,
.input-check input[type='checkbox'] + label:before {
    position: absolute;
    top: 0;
    left: 0;
    content: '';
}

.input-check input[type='radio']:focus,
.input-check input[type='checkbox']:focus {
    border: 1px solid #777;
    outline: 1px dotted #000;
}

.input-check input[type='radio'] + label:before {
    width: 20px;
    height: 20px;
    background: #fff;
    border: 1px solid #d5d5d5;
    border-radius: 20px;
}

.input-check input[type='radio']:checked + label:before {
    background: url(../images/icon/icon-radio-check.png) no-repeat 50% 5px;
}

.input-check input[type='radio']:disabled + label {
    color: rgba(17, 17, 17, 0.3);
}

.input-check input[type='radio']:disabled + label:before {
    background: #f7f7f7;
    border: 1px solid #ededed;
}

.input-check input[type='radio']:checked:disabled + label:before {
    background: #f7f7f7 url(../images/icon/icon-radio-check.png) no-repeat 50% -15px;
}

.input-check input[type='radio']:focus + label:before {
    border-radius: 0;
    border: 2px solid #000;
}

.input-check input[type='checkbox'] + label {
    padding: 2px 0 1px 32px;
    line-height: 22px;
}

.input-check input[type='checkbox'] + label:before {
    top: 1px;
    width: 22px;
    height: 22px;
    background: #fff;
    border: 1px solid #d5d5d5;
}

.input-check input[type='checkbox']:checked + label:before {
    background: #fff url(../images/icon/icon-checkbox-check.png) no-repeat 50% 50%;
}

.input-check input[type='checkbox']:disabled + label {
    color: rgba(17, 17, 17, 0.3);
}

.input-check input[type='checkbox']:disabled + label:before {
    background: #f7f7f7;
    border: 1px solid #ededed;
}

.input-check input[type='checkbox']:focus + label:before {
    border: 2px solid #000;
}

.input-check input[type='checkbox']:checked:disabled + label:before {
    background: #f7f7f7 url(../images/icon/icon-checkbox-check.png) no-repeat 50% 50%;
    border: 1px solid #ededed;
}

.input-check.read-only:before {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    background: #fff;
    opacity: 0;
    content: '';
}


.selsect-custom-area {
    width: 26rem;
    height: 4.4rem;
    border: 0.1rem solid var(--gry-color4);
    font-weight: 400;
    padding: .85rem 1.8rem .75rem;
    line-height: 1.6;
    position: relative;
}

.selsect-custom-area:focus {
    outline: 0.1rem solid var(--selected-color);
}

.selsect-custom-area::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 1.2rem;
    transform: translateY(-50%);
    width: 1.2rem;
    height: 1.2rem;
    background: url(../images/icon/icon_arr_sel_down.svg) no-repeat;
    transform-origin: top;
}

.selsect-custom-area > button {
    outline: none;
}

.selsect-custom-area:has(>button.on)::after {
    transform: rotate(180deg) translateY(-50%);
}

.selsect-option-list {
    position: absolute;
    top: 4.2rem;
    left: -0.1rem;
    width: calc(100% + 0.2rem);
    height: auto;
    background: var(--white);
    z-index: 10;
    overflow: hidden;
    border: none;
    display: none;
}

.selsect-custom-area .custom-placehoder.on + .selsect-option-list {
    border: 0.1rem solid var(--gry-color4);
}

.selsect-option-list .option-item {
    line-height: 4rem;
    padding-left: 1.8rem;
    cursor: pointer;
    position: relative;
}

.selsect-option-list .option-item::after {
    content: '';
    width: 0;
    height: 100%;
    display: block;
    background: var(--white);
    position: absolute;
    left: 0;
    top: 0;
    background-color: var(--gry-color8);
    z-index: 10;
}

.selsect-option-list .option-item + .option-item {
    border-top: 0.1rem solid var(--gry-color4);
}

.selsect-option-list .option-item:hover {
    background-color: var(--gry-color2);
    color: #3750cd;
    transition: all 1s;
}

.selsect-option-list .option-item:hover::after {
    content: '';
    width: 100%;
    height: 100%;
    background-color: var(--gry-color3);
    transition: width .8s, opacity 2s;
    opacity: 0;
}

.select-01 {
    width: 100%;
    height: 4.4rem;
    min-width: 20rem;
    border: 0.1rem solid var(--gry-color4);
    cursor: pointer;
    position: relative;
    display: flex;
    gap: 1rem;
    align-items: center;
}

.select-01::after {
    content: '';
    width: 2.5rem;
    height: 4.4rem;
    position: absolute;
    right: 0;
    top: 0;
    background: url(../images/icon/icon_arr_sel_down.svg) no-repeat 0 center;
}

.select-01 option {
    font-size: 1.8rem;
}

.select-02 {
    width: 100%;
    height: 5.2rem;
    min-width: 24rem;
    border: 0.1rem solid var(--gry-color4);
    border-radius: 2.5rem;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    display: flex;
    gap: 1rem;
    align-items: center;
}

.select-02::after {
    content: '';
    width: 3.5rem;
    height: 5.2rem;
    position: absolute;
    right: 0;
    top: 0;
    background: url(../images/icon/icon_arr_sel_down_02.png) no-repeat 0 center;
}

.select-02 option {
    font-size: 1.8rem;
}

.select-02 select {
    width: calc(100% - 3.5rem);
    padding: 0 3.5rem 0 2rem !important;
    border: none;
}

select option {
    color: var(--black-color2);
}


.select-form select {
    height: 100%;
    border: 0;
    padding: 0 3.5rem 0 1.5rem;
    box-shadow: none;
    outline: .1rem var(--gry-color4);
    flex: 1;
    background-color: var(--white);
}

.select-form select:disabled {
    opacity: .4;
    cursor: not-allowed;
}

.select-form select::-ms-expand {
    display: none;
}

.search-box {
    display: flex;
    justify-content: center;
    gap: 1rem;

}


.search-input {
    width: 48.5rem;
    height: 5.2rem;
    border: .1rem solid var(--gry-color7);
    border-radius: 2.5rem;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--gry-bg-color3);
}

.search-input input {
    width: 100%;
    height: 100%;
    background-color: transparent;
    padding: 0 0 0 2rem;
    border: 0;
    color: var(--gry-desc);
}

.search-input input:focus {
    outline: none !important;
}

.search-input input:hover,
.search-input input:focus-within {

}

.search-input button {
    width: 4rem;
    height: 5.2rem;
    background: url(../images/icon/icon_search_01.png) no-repeat 0 center;
}

.search-total-box {
    display: flex;
    justify-content: space-between;
    margin: 5.5rem 0 2.5rem;
}

.search-total-box .text {
    font-size: 1.5rem;
    color: var(--black-color2);
}

.paging-wrap {
    position: relative;
    text-align: center;
}

.paging-wrap .paging-area > * {
    display: inline-block;
    vertical-align: middle;
}

.paging-wrap .paging-area .paging a {
    padding: 0 1rem;
    font-size: 1.5rem;
    line-height: 3.8rem;
    color: #444;
    text-decoration: none;
}

.paging-wrap .paging-area .paging a.on {
    color: #6f81da;
    text-decoration: underline;
    text-underline-offset: .4rem;
    font-weight: 900;
}

.paging-wrap .paging-area > a {
    width: 3.8rem;
    height: 3.8rem;
    display: inline-block;
    vertical-align: middle;
}

.paging-wrap .paging-area > a span {
    overflow: hidden;
    position: absolute;
    clip: rect(0, 0, 0, 0);
    width: 0;
    height: 0;
    margin: -1px;
    border: 0;
    padding: 0;
}

.paging-wrap .paging-area > a.btn-prev {
    background: url(../images/common/btn-paging-prev.png) no-repeat 0 0;
}

.paging-wrap .paging-area > a.btn-next {
    background: url(../images/common/btn-paging-next.png) no-repeat 0 0;
}

.paging-wrap .paging-reg {
    position: absolute;
    right: 0;
    top: -0.8rem;
    display: inline-block;
}

/* swiper */
.ui-slide-container {
    width: 100%;
    position: relative;
}

.swiper-container.ui-slide {
    width: 100%;
}

.swiper-wrapper {
    width: 100%;
}

.swiper-wrapper .swiper-slide {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.swiper-slide .slider-content {
    width: 1460px;
    margin: 0 auto !important;
}

.ui-slide-container .slide-control-button-group {
    position: absolute;
    bottom: 10px;
    /*bottom: 42px;*/
    left: 50%;
    z-index: 10;
    display: flex;
    align-items: center;
    transform: translateX(-50%);
}

.slide-control-button-group .swiper-pagination {
    position: relative;
}

.slide-control-button-group > * {
    display: inline-block;
}

.swiper-pagination-bullets .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    display: inline-block;
    border-radius: 100%;
    background: var(--gry-color4);
    opacity: 1;
    margin: 0 5px;
}

#intro .swiper-pagination-bullets .swiper-pagination-bullet-active {
    background-color: var(--point-color);
}

#intro .swiper-pagination-clickable.swiper-pagination-bullets {
    cursor: pointer;
}

.slide-control-button-group > button {
    width: 1rem;
    height: 1.2rem;
    margin: 0 5px;
}

.slide-control-button-group > button > span {
    width: 0;
    height: 0;
    position: absolute;
    top: -99999px;
    overflow: hidden;
}

.slide-control-button-group .slide-button-pause {
    background: url(../images/icon/icon_play.png) no-repeat 50% 0px;
}

.slide-control-button-group .slide-button-start {
    background: url(../images/icon/icon_stop.png) no-repeat 50% 0px;
}

/* visual */
#contents > section#intro {
    width: 100%;
    padding: 0 0;
}

#contents > section#intro > .section-inner {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    position: relative;
}

#contents > section#intro > .section-inner .swiper-container {
    width: 100%;
}

#intro .swiper-container .swiper-slide {
    background-repeat: repeat-x;
    background-position: 0 0;
}

#intro .swiper-container .item {
    /*width: 144rem;*/
    margin: 0 auto;
    text-align: center;
}

.slider-content .title-area {
    line-height: 1.2;
}

.slider-content .btn-area .btn-block {
    width: 316px;
    height: 72px;
    font-size: 23px;
}

/* 타이틀 공통 */
.title-area .label-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--label-txt-color2);
}

.title-area .main-title {
    font-size: 30px;
    font-weight: 900;
    color: var(--label-txt-color2);
}

.title-area .sub-title {
    font-size: 20px;
    font-weight: 400;
    color: var(--gry-txt1);
    margin-top: 26px;
    line-height: 1.6;
}

/* openApi-start */
.openApi-start {
    text-align: center;
    height: 646px;
    position: relative;
}

.openApi-start::before {
    content: "";
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 600px;
    height: 404px;
    background-image: url(../images/common/visual_paper_01.png),
    url(../images/common/visual_paper_02.png);
    background-repeat: no-repeat;
    background-position: left bottom, 348px bottom;
}

.openApi-start::after {
    content: "";
    position: absolute;
    bottom: 0px;
    right: 0;
    width: 600px;
    height: 404px;
    background-image: url(../images/common/visual_paper_03.png),
    url(../images/common/visual_paper_04.png);
    background-repeat: no-repeat;
    background-position: 140px bottom, right bottom;
}


.openApi-start .title-area {
}

.openApi-start .title-area .main-title {
    width: 430px;
    margin: 114px auto 0;
}

.openApi-start .title-area .main-title > img + img {
    margin-top: 20px;
}

.openApi-start .title-area .sub-title {
    font-size: 24px;
    color: var(--gry-txt3);
    margin-top: 26px;
    font-weight: 300;
}

.openApi-start .btn-area .btn-line {
    width: 31.8rem;
    height: 7.2rem;
    margin: 7rem auto 0;
    font-size: 2.3rem;
    font-weight: 700;
    position: relative;
    border-radius: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.openApi-features {
    background-color: var(--sky-bg-color);
    padding-top: 100px;
    position: relative;
    height: 760px;
}

.openApi-features::before {
    content: "";
    position: absolute;
    top: 90px;
    right: 120px;
    width: 590px;
    height: 590px;
    background: url(../images/common/visual_illust_ai.png) no-repeat center;
}

.openApi-features .title-area {
    margin-left: 130px;
    margin-top: 30px;
}

.openApi-features .title-area .label-title {
    width: 250px;
}

.openApi-features .title-area .main-title {
    margin-top: 1.6rem;
    font-size: 7.8rem;
    font-weight: 700;
    letter-spacing: -.2rem;
    color: var(--navy-color);
}

.openApi-features .title-area .sub-title {
    color: var(--gry-txt3);
    margin-top: 40px;
    font-weight: 300;
    line-height: 1.6;
    font-size: 2.6rem;
}

.openApi-features .title-area .sub-title strong {
    font-size: 2.6rem;
    font-weight: 500;
}

.openApi-features .btn-area .btn-block {
    width: 33.6rem;
    height: 7.2rem;
    margin-top: 8rem;
    font-size: 2.3rem;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 72px;
    letter-spacing: -1px;
    position: relative;
}

.btn-area {
    display: flex;
    align-items: center;
    margin-top: 5.2rem;
}

.btn-area.al-c {
    justify-content: center;
    gap: 1rem;
}

.btn-area > a {
    display: block;
}

.btn-area .btn-line {
    border: 2px solid var(--point-color);
    color: var(--point-color);
    background-color: var(--white);
    position: relative;
}

.btn-area .btn-block {
    color: var(--white);
    background-color: var(--point-color);
    position: relative;
}

.icon-arrow-right::after {
    content: "";
    position: absolute;
    top: 27px;
    right: 40px;
    width: 12px;
    height: 18px;
    background: url(../images/icon/arr_right_white.svg) no-repeat center;
}

.icon-arrow-right-pink::after {
    content: "";
    position: absolute;
    top: 24px;
    right: 40px;
    width: 12px;
    height: 18px;
    background: url(../images/icon/arr_right.svg) no-repeat center;
}

.main-title-area {
    display: flex;
    flex-wrap: wrap;
}

.main-title-area .label-title {
    font-size: 24px;
    color: var(--label-txt-color);
    width: 100%;
    margin-bottom: 5px;
}

.main-title-area .main-title {
    font-size: 5.4rem;
    font-weight: 700;
    color: var(--navy-color);
}

.main-title-area .sub-title {
    font-size: 20px;
    font-weight: 400;
    color: var(--gry-txt1);
    margin-left: 30px;
    line-height: 1.6;
}

#feature {
    height: 860px;
}

#feature .feature-card-list {
    display: flex;
    flex-wrap: wrap;
    margin-top: 11.4rem;
    justify-content: space-between;
}

#feature .feature-card-list li {
    width: 38rem;
    height: 37.8rem;
    overflow: hidden;
    padding: 4.4rem 4.6rem;
    border-radius: 2rem;
    position: relative;
    background-color: var(--skyblue-color);
}

#feature .feature-card-list li:nth-child(2) {
    background-color: var(--navy-color);
}

#feature .feature-card-list li:nth-child(3) {
    background-color: var(--skyblue-color2);
}

#feature .feature-card-list .label-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--label-txt-color2);
}

#feature .feature-card-list .main-title {
    font-size: 30px;
    font-weight: 900;
    color: var(--white);
    margin-top: 16px;
}

#feature .feature-card-list .sub-title {
    font-size: 15px;
    font-weight: 400;
    color: var(--sub-txt-color1);
    line-height: 1.8;
    margin-top: 38px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
}

#feature .feature-card-list .btn-more {
    font-size: 14px;
    font-weight: 300;
    color: var(--sub-txt-color1);
    position: absolute;
    left: 4.4rem;
    bottom: 4rem;
    transition: .2s;
}

#feature .feature-card-list .btn-more:hover {
    color: var(--white);
}

#feature .feature-card-list .btn-more::after {
    content: "";
    width: 1.4rem;
    height: 1.4rem;
    position: absolute;
    top: 2.8px;
    right: -15px;
    background: url(../images/icon/arr_line_right.svg) no-repeat center;
    opacity: 0.8;
}

#feature .feature-card-list .btn-more:hover::after {
    opacity: 1;
}

#feature .feature-card-list .ico-productivity::after {
    width: 7.2rem;
    height: 6rem;
    top: 1rem;
    right: 0;
}

#feature .feature-card-list .ico-safety::after {
    width: 7.2rem;
    height: 6.6rem;
    top: 1rem;
    right: 0;
}

#feature .feature-card-list .ico-reliability::after {
    width: 7.2rem;
    height: 6rem;
    top: 1rem;
    right: 0;
}

#service {
    height: 105rem;
    background: var(--navy-color);
}

#service .main-title-area .main-title {
    color: var(--white);
}

#service .main-title-area .sub-title {
    color: var(--gry-color6);
}

#service .service-card-list {
    height: 58rem;
    display: flex;
    flex-wrap: wrap;
    margin-top: 11rem;
    justify-content: space-between;
    align-content: space-between;
}

#service .service-card-list li {
    width: 27.5rem;
    height: 27.5rem;
    overflow: hidden;
    padding: 4.8rem 4.6rem 4rem 4.6rem;
    border-radius: 2rem;
    position: relative;
    background: var(--white);
    text-align: center;
}

#service .service-card-list li:last-child {
    background: var(--main-color);
}

#service .service-card-list li .list-area {
    height: 100%;
    position: relative;
}

#service .service-card-list .main-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--gry-txt3);
    margin-top: 100px;
}

#service .service-card-list .sub-title {
    font-size: 15px;
    font-weight: 400;
    color: var(--gry-txt2);
    line-height: 1.8;
    margin-top: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    width: 160px;
    margin: 18px auto 0;
}

#service .service-card-list .icon-big-plus {
    display: block;
    font-size: 14px;
    font-weight: 300;
    color: var(--white);
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: 180px;
    font-size: 24px;
    text-align: center;
}

#service .service-card-list .icon-big-plus::after {
    width: 100px;
    height: 80px;
    left: 50%;
    top: 10px;
    margin-left: -50px;
}

#service .service-card-list .icon-big-plus label {
    display: block;
    margin-top: 100px;
    color: var(--white);
    font-weight: 400;
    font-size: 2.4rem;
}

#service .service-card-list .ico-bg::after {
    width: 100px;
    height: 80px;
    top: -110px;
    left: 50%;
    margin-left: -50px;
}


.header-main-title {
    text-align: center;
    font-size: 4.2rem;
    font-weight: 700;
    letter-spacing: -.1rem;
    margin-top: 8rem;
}

.header-area {
    padding: 0px 0 6rem;
}

#login .login-header-area .main-title {
    text-align: center;
    font-size: 42px;
    font-weight: 700;
    letter-spacing: -1px;
}

#login .login-title-area .main-title {
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -1px;
}


.tab-title-container {
    width: 100%;
    height: 62px;
    font-size: 18px;
    font-weight: 500;
}

.tab-title-list {
    height: 100%;
    position: relative;
}


.tab-title-list li [role="tab"] {
    height: 100%;
    z-index: 0;
    border-top: 1px solid var(--gry-color3);
    border-bottom: 1px solid var(--selected-color);
    border-left: 1px solid var(--gry-color3);
    border-right: 1px solid var(--gry-color3);
    display: flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

.tab-panel-container {
    min-height: 346px;
}


#panel-1 {
    margin: 12px auto 60px;
}

#panel-2 {
    margin: 12px auto 60px;
}

#panel-3 {
    margin: 12px auto 60px;
}


.tab-content-area .main-title {
    text-align: center;
    font-size: 24px;
    font-weight: 500;
}

.login-input-wrap {
    display: flex;
    justify-content: space-between;
}

.login-input-wrap {
    display: flex;
    justify-content: space-between;
}

.login-input-list li {
    margin-top: 1rem;
}

.login-input-list li:first-child {
    margin-top: 0;
}

input::placeholder {
    color: var(--gry-desc);
    font-size: 1.6rem;
    font-weight: 400;
    text-align: left;
    line-height: 2;
}

/* openApi_login */
.login-header-area {
    padding: 0 0 60px;
}

.login-header-area .main-title {
    text-align: center;
    font-size: 42px;
    font-weight: 700;
    letter-spacing: -1px;
}

/* [role="tab"] {
  padding: 10px;
  cursor: pointer;
  background: var(--white);
  margin-right: -1px;
  border-color: var(--gry-color4);
} */

[role="tab"]:focus,
[role="tab"]:hover {
    color: var(--selected-color);
    transition: .5s;
}

[role="tab"][aria-selected="true"] {
    border-bottom: none;
    border-color: var(--selected-color);
}


[role="tabpanel"] {
    display: none;
}

[role="tabpanel"][class="on"] {
    display: block;
}


.tab-container {
    width: 100%;
}

.tab-title-container {
    width: 100%;
    height: 62px;
    font-size: 18px;
    font-weight: 500;
}

.tab-menu-design,
.tab-title-list {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
}

.tab-menu-design li,
.tab-title-list li {
    width: 100%;
    height: 100%;
    display: flex;
    flex: 1;
}

.tab-menu-design li button,
.tab-title-list li [role="tab"] {
    width: 100%;
    height: 100%;

    text-align: center;
    border-top: 1px solid var(--gry-color3);
    border-bottom: 1px solid var(--selected-color);
    border-left: 1px solid var(--gry-color3);
    border-right: 1px solid var(--gry-color3);
}

.tab-menu-design li button.on,
.tab-title-list li [role="tab"].on {
    border-color: var(--selected-color);
    color: var(--selected-color);
    border-bottom: none;
    transition: border 1s ease-in;
    z-index: 1;
}

.tab-panel-container {
    min-height: 20rem;
}


.login-title-area .main-title {
    text-align: center;
    font-size: 24px;
    font-weight: 500;
    margin: 70px 0 60px;
    line-height: 1.8;
}

.login-input-wrap {
    display: grid;
    grid-template-columns: 28.4rem 13.2rem;

    width: 43rem;
    margin: 0 auto;
}

.login-input-list .input-area input {
    height: 5.4rem;
}

.login-input-area {
    width: 286px;
    height: 54px;
    border: 1px solid var(--gry-color5);
    position: relative;
}

.login-input-area input {
    border: none;
    width: 250px;
    height: 48px;
    padding: 1px 12px 0 12px;
    font-size: 1.6rem;
    color: var(--gry-txt2);
}

.login-input-area input:focus {
    border: none;
    outline: none;
    color: var(--gry-txt6);
}

.login-input-btn .btn-primary {
    font-size: 18px;
    font-weight: 400;
    width: 13.2rem;
    height: 12.4rem;
    border-radius: 10px;
    background: var(--navy-color);
    color: var(--white);
}

.login-input-btn .btn-primary span,
.login-input-area button span {
    width: 0;
    height: 0;
    position: absolute;
    left: -99999px;
    margin: -1px;
    border: 0;
    padding: 0;
    overflow: hidden;
}

.input-area .btn-security::after {
    content: "";
    width: 15px;
    height: 22px;
    position: absolute;
    top: 50%;
    right: 11px;
    background: url(../images/icon/icon-input-security.png) no-repeat;
    transform: translateY(-50%);
}

input::placeholder {
    color: var(--gry-desc);
    font-size: 1.6rem;
    font-weight: 400;
    text-align: left;
    line-height: 2;
}

.login-bottom-area {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid var(--gry-color2);
    padding: 24px 0;
}

.login-bottom-area button span {
    font-size: 1.4rem;
    color: var(--black-color1);
    line-height: 2.4rem;
}

.login-form-list {
    display: flex;
    justify-content: flex-start;
}

.login-form-list li + li {
    margin-left: 1rem;
}

.login-menu-list {
    display: flex;
    justify-content: flex-end;
}

.login-menu-list li {
    text-align: center;
}

.login-menu-list li button {
    border-left: 0.1rem solid var(--gry-color2);
    padding: 0 1.8rem;
}

.login-menu-list li button span {
    line-height: 1;
}

.login-menu-list li:first-child button {
    border-left: 0;
}

.login-menu-list li:last-child button {
    padding-right: 0.2rem;
}

.login-information-area {
    margin-top: 5rem;
}

.login-information-title {
    font-size: 1.6rem;
    color: var(--gry-txt6);
    line-height: 2;
    text-indent: 2.6rem;
    padding: 0 0 2rem 0rem;
}

.login-information-title.icon-chech-pink,
.login-information-title.icon-chech-blue {
    position: relative;
    top: 0rem;
    left: 3rem;
}

.login-information-title.icon-chech-pink::before,
.login-information-title.icon-chech-blue::before {
    top: .7rem;
    left: 0;
}

.information-list-area {
    background: var(--gry-bg-color3);
    padding: 3rem 3rem 3rem 3.5rem;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 2.2;
    color: var(--gry-txt4);
}

.information-list-area .dot-list li::before {
    top: 1.6rem;
}

.point-list > li {
    color: var(--gry-color8);
    font-size: 1.2rem;
    display: flex;
}

.point-list > li::before {
    content: '※';
    margin-right: .5rem;
}

.point-list-type-02 {
    margin-bottom: 1.5rem;
}

.point-list-type-02 > li {
    color: var(--black-color2);
    font-size: 1.6rem;
    display: flex;
    line-height: 2.4rem;
}

.point-list-type-02 > li::before {
    content: '※';
    margin-right: .5rem;
}


.dash-list > li {
    position: relative;
    margin-bottom: .3rem;
    display: flex;
    line-height: 2.6rem;
}

.dash-list > li::before {
    content: "-";
    width: 0.5rem;
    height: 0.1rem;
    margin-right: .5rem;
    color: var(--gry-bg-color7);
}

.dot-list > li {
    padding-left: 1.4rem;
    position: relative;
}

.dot-list.f14 > li {
    font-size: 1.4rem;
}

.dot-list.f14 > li span {
    font-size: 1.4rem;
}

.dot-list-red > li::before,
.dot-list > li::before {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    display: inline-block;
    position: absolute;
    left: 0;
    top: .8rem;
    border-radius: 100%;
    background: var(--gry-bg-color9);
}

.dot-list-red > li {
    padding-left: 1.4rem;
    position: relative
}

.dot-list-red > li::before {
    background: var(--point-color) !important;
}

.dot-list-red-type2 li {
    display: flex;
    align-items: center;
}

.dot-list-red-type2 li::before {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    display: inline-block;
    border-radius: 100%;
    margin-right: .5rem;
    background: var(--point-color);
}

.dot-list .dash-list {
    padding-left: 1.5rem;
}

.dot-list .dash-list li {
    text-indent: 1.2rem;
}

.btn-switch {
    display: inline-block;
    position: relative;
    min-height: 2.3rem;
}

.btn-switch .icon-checked {
    margin-left: 1rem;
    display: inline-block;
    overflow: hidden;
    position: relative;
    width: 4.4rem;
    height: 2.3rem;
    border-radius: 1.2rem;
    vertical-align: top;
    background: var(--gry-color5);
    transition: background-color .2s ease;
    box-sizing: border-box;
}

.btn-switch .icon-checked::after {
    content: "";
    width: 1.7rem;
    height: 1.7rem;
    display: block;
    position: absolute;
    left: 0.3rem;
    top: 0.3rem;
    border-radius: 100%;
    background: var(--white);
    transition: .2s ease-in;
}

.btn-switch.checked .icon-checked {
    background: var(--purple-color);
}

.btn-switch.checked .icon-checked::after {
    content: "";
    left: 24px;
    box-shadow: -2px -2px 4px rgba(0, 0, 0, 0.15);
}

section .text-point-red {
    font-style: normal;
    color: var(--point-red-color);
}

.icon-chech-blue::before {
    content: "";
    position: absolute;
    width: 1.5rem;
    height: 1.4rem;
    background: url(../images/icon/check_blue.svg) no-repeat center;
}

.icon-chech-pink::before {
    content: "";
    position: absolute;
    width: 1.5rem;
    height: 1.4rem;
    background: url(../images/icon/check_pink.png) no-repeat center;
}

.login-form-area,
.login-content-wrap {
    padding-bottom: 7.2rem;
}

.login-confirm-btn .btn-primary {
    font-size: 1.8rem;
    font-weight: 400;
    width: 43rem;
    height: 8.4rem;
    border-radius: 1rem;
    background: var(--navy-color);
    color: var(--white);
}


.heros-content-wrap {
    width: 43rem;
    margin: 0 auto;
}

.heros-qrcode-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.heros-qrcode-print {
    width: 15.6rem;
    height: 15.6rem;
    border: 0.1rem solid var(--gry-color4);
    display: flex;
    justify-content: center;
    align-items: center;
}

.heros-qrcode-time {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
}

.heros-qrcode-time .or {
    font-size: 1.6rem;
    color: var(--gry-desc1);
    height: 9rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.heros-qrcode-time .remain-time {
    font-size: 1.4rem;
    line-height: 1.6;
    font-weight: 500;
}

.heros-qrcode-time .remain-time span {
    display: block;
}

.heros-qrcode-number {
    width: 15.6rem;
    height: 15.6rem;
    border: 0.1rem solid var(--gry-color4);
    font-size: 2.4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.heros-app-area {
    background: var(--gry-bg-color2);
    border-radius: 1rem;
    padding: 2.4rem 2.5rem;
    display: flex;
    justify-content: space-between;
    margin-top: 2.4rem;
}

.heros-desc-area .guide-text {
    font-size: 1.5rem;
    color: var(--gry-txt6);
    font-weight: 400;
    line-height: 1.5;
}

.heros-desc-area .path-text {
    font-size: 1.4rem;
    color: var(--gry-txt2);
    margin-top: 1rem;
}


.center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.text-align-center {
    text-align: center;
}

/* icons */
.ico-bg {
    position: relative;
}

.ico-productivity::after {
    content: "";
    position: absolute;
    background: url(../images/icon/icon_search_graph.png) no-repeat center;
}

.ico-safety::after {
    content: "";
    position: absolute;
    background: url(../images/icon/icon_lock.png) no-repeat center;
}

.ico-reliability::after {
    content: "";
    position: absolute;
    background: url(../images/icon/icon_building.png) no-repeat center;
}

.ico-monitor::after {
    content: "";
    position: absolute;
    background: url(../images/icon/icon_monitor.png) no-repeat center;
}

.ico-market-price::after {
    content: "";
    position: absolute;
    background: url(../images/icon/icon_market_price.png) no-repeat center;
}

.ico-account::after {
    content: "";
    position: absolute;
    background: url(../images/icon/icon_account.png) no-repeat center;
}

.ico-derive::after {
    content: "";
    position: absolute;
    background: url(../images/icon/icon_derive.png) no-repeat center;
}

.ico-business-price::after {
    content: "";
    position: absolute;
    background: url(../images/icon/icon_business_price.png) no-repeat center;
}

.ico-overseas-stock::after {
    content: "";
    position: absolute;
    background: url(../images/icon/icon_overseas_stock.png) no-repeat center;
}

.ico-real-time::after {
    content: "";
    position: absolute;
    background: url(../images/icon/icon_real_time.png) no-repeat center;
}

.icon-big-plus::after {
    content: "";
    position: absolute;
    background: url(../images/icon/icon_big_plus.png) no-repeat center;
}

.icon-live-price::after {
    content: "";
    position: absolute;
    background: url(../images/icon/icon-live-price.png) no-repeat center;
}

.icon-exchange::after {
    content: "";
    position: absolute;
    background: url(../images/icon/icon-exchange.png) no-repeat center;
}

.more::after {
    content: "";
    position: absolute;
    background: url(../images/icon/arr_line_right_gry.svg) no-repeat center / 12px;
}

.ico-board {
    height: 26px;
    background: var(--point-color);
    color: var(--white);
    display: inline-block;
    border-radius: 13px;
    font-size: 12px;
    font-weight: 400;
}

/* openApi_common */
.text-blind {
    width: 0;
    height: 0;
    position: absolute;
    top: -99999px;
    overflow: hidden;
}

.clear-both:after {
    content: '';
    display: block;
    clear: both;
}

/* openApi_color */
.main-bg-color {
    background-color: var(--main-color);
}

.middle-bg-color {
    background-color: var(---middle-color);
}

.point-bg-color {
    background-color: var(--point-color);
}

.skyblue-bg-color {
    background-color: var(--skyblue-color);
}


.btn-white {
    background: #fff;
    color: #777;
    border: 1px solid #ccc;
}

.btn-normal {
    background: #eee;
    color: #222;
}

.btn-grey {
    background: #767676;
    color: #fff;
}

.btn-red {
    background: #bc2222;
    color: #fff;
}

.btn-green {
    background: #09ba09;
    color: #fff;
}

.btns.btn-lg {
    height: 60px;
    font-size: 18px;
}

.btns.btn-sm {
    height: 30px;
    font-size: 18px;
}

.button_wrap {
    padding: 15px 0;
    position: relative;
    text-align: right;
}

.button_wrap:after {
    content: '';
    clear: both;
    display: block;
}

.button_wrap .button_left {
    float: left;
}

.button_wrap .button_right {
    float: right;
}

.col-10 {
    width: 100%;
}

.col-20 {
    width: 20%;
}

.col-25 {
    width: 25%;
}

.col-33 {
    width: 33.33%;
}

.col-50 {
    width: 50%;
}

/* table style */
.table-style {
    border-top: 2px solid #222;
    border-bottom: 2px solid #222;
    margin-bottom: 40px;
}

.table-style table {
    width: 100%;
    border-collapse: collapse;
}

.table-style th {
    height: 60px;
    background: #fafafa;
    border-bottom: 1px solid #222;
    font-size: 18px;
    font-weight: normal;
    color: #222;
    text-align: center;
}

.table-style td {
    padding: 15px 0;
    border-bottom: 1px solid #dadada;
    border-right: 1px solid #dadada;
    font-size: 16px;
    color: #666;
    text-align: center;
    line-height: 1.8;
}

.table-style tr:last-child td {
    border-bottom: 0;
}

.table-style tr td:last-child {
    border-right: 0;
}

/* tab style */
.tab-style:after {
    content: '';
    display: block;
    clear: both;
}

.tab-style li {
    float: left;
}

.tab-style li a {
    display: block;
    margin-right: 1px;
    height: 78px;
    text-align: center;
    font-size: 20px;
    color: #222;
    background: #e7e7e7;
    white-space: nowrap;
}

.tab-style li a:after {
    content: '';
    display: inline-block;
    width: 0;
    height: 100%;
    vertical-align: middle;
}

.tab-style li:last-child a {
    margin-right: 0;
}

.tab-style li.active a {
    background: #2c2c2c;
    color: #fff;
    font-family: ngb;
}

/* quick */
.blind,
caption {
    position: absolute;
    top: -99999px;
    width: 0;
    height: 0;
    overflow: hidden;
}

.font-black {
    color: #333 !important;
}

.font-red {
    color: #d92b2b !important;
}

.font-blue {
    color: #2667c7 !important;
}

.font-green {
    color: #0aa302 !important;
}

.font-bold {
    font-weight: bold !important;
}

.font-11 {
    font-size: 11px !important;
}

.text-underline {
    text-decoration: underline;
}

.hidden {
    display: none;
}

.align-left {
    text-align: left !important;
}

.align-center {
    text-align: center !important;
}

.div-none {
    display: none;
}

.tag-block {
    display: block !important;
}

.space-nowrap {
    white-space: nowrap;
}

.clear-after:after {
    content: '';
    display: block;
    clear: both;
}

.v-aligner:after {
    content: '';
    display: inline-block;
    width: 0;
    height: 100%;
    vertical-align: middle;
}

.link-style {
    color: #0aa302;
    text-decoration: underline;
}


.info-box-01 {
    width: 100%;
    min-height: 23.3rem;
    border-radius: 2rem;
    background-color: var(--blue-bg-color1);
    padding: 0 6rem;
    margin-bottom: 5.4rem;
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
}

.info-box-01::before {
    background-position: 50% 50%;
    background-repeat: no-repeat;

}

.info-box-01.icon-bg-01::before {
    content: '';
    display: block;
    width: 13.4rem;
    height: 16.4rem;
    background-image: url(../images/icon/icon_install_security.png);
}

.info-box-01.icon-bg-02::before {
    content: '';
    display: block;
    width: 15.4rem;
    height: 16.1rem;
    background-image: url(../images/icon/icon_assist_report.png);
}

.info-box-01.icon-bg-03::before {
    content: '';
    display: block;
    width: 16.2rem;
    height: 16.1rem;
    background-image: url(../images/icon/icon_assist_policy.png);
}


.info-box-01 .svg-path-01 {
    fill: none;
    stroke: none;
}


.info-box-01 .icon-box-01 {
    width: 13.2rem;
    height: 16.1rem;
    position: absolute;
    left: 6rem;
    top: 3.8rem;
}

.info-box-01 .info-box-contents {
    max-width: 87rem;
    margin-left: 4.8rem;
}

.info-box-01 .info-box-contents h3 {
    font-size: 2.8rem;
    font-weight: 500;
}

.info-box-01 .info-box-contents .sub-title {
    margin-top: 3rem;
    color: var(--gry-color8);
    line-height: 2.6rem;
}

.info-box-01 .info-box-right {
    flex: 1;
    display: flex;
    justify-content: end;
}

.info-box-01 .info-box-right .btn-primary-round {
    min-width: 20.8rem;
}

.path-point-01 {
    position: absolute;
    left: 0;
    top: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 100%;;
    background: radial-gradient(at center, rgba(218, 192, 237, 1) 0%, rgba(193, 197, 238, 1) 100%);
    offset-distance: 0;
    animation: icon-animate-01 3s linear infinite;
}

.bottom-notice-area {
    width: 100%;
    padding: 1.5rem 2rem;
    background: var(--gry-bg-color3);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.guide-title h1 {
    font-size: 3.2rem;
    line-height: 3.2rem;;
    font-weight: 700;
    color: var(--black-color2);
    margin-bottom: 3rem;
}

.giude-title-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.giude-title-bottom p {
    font-size: 2.4rem;
    color: var(--black-color2);
}

.giude-title-bottom span {
    width: 100%;
    margin-top: 2rem;
    display: block;
    font-weight: 400;
    font-size: 1.5rem;
}

.icon-info-type-01 {
    display: flex;
    align-items: center;
}

.icon-info-type-01 .icon {
    height: 3.8rem;
    display: inline-flex;
    align-items: center;
    margin-right: 1.8rem;
    border-radius: .7rem;;
    padding: 0 1.7rem;
}

.icon-info-type-01 .icon-01 {
    border: .1rem solid var(--blue-color1);
    color: var(--blue-color1);
}

.guide-title-01 {
    margin-top: 4rem;
}

.guide-title-01 h3 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--black-color2);
    display: flex;
    flex: 1;
    justify-content: space-between;
}

.guide-title-01 h5 {
    font-size: 1.8rem;
    line-height: 1.8rem;
    font-weight: 500;
    color: var(--black-color2);
    margin-top: 3rem;
    display: flex;
    align-items: center;
}

.guide-title-01 h5::before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-left: .7rem solid var(--black-color2);
    border-top: .5rem solid transparent;
    border-bottom: .5rem solid transparent;
    margin-right: .5rem;
}

.guide-title-01 .sub-title-bar {
    margin-top: 2.5rem;
    width: 100%;
    height: 6.2rem;
    padding: 0 3rem 0 0;
    position: relative;
    display: inline-flex;
    font-size: 1.5rem;
    align-items: center;
    background: var(--skyblue-color3);
}

.guide-title-01 .sub-title-bar::before {
    width: 0.5rem;
    height: 100%;
    background: #6f81da;
    content: '';
    display: block;
    margin-right: 2.5rem;
}

.guide-title-sub-txt-01 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 3rem 0 2.2rem;
}

.guide-sub-txt-check {
    position: relative;
    top: 0;
    left: 0;
    font-size: 1.6rem;
    color: var(--gry-txt6);
    text-indent: 2.6rem;
}

.guide-sub-txt-check::before {
    content: "";
    position: absolute;
    left: 0;
    top: .1rem;
    width: 1.5rem;
    height: 1.4rem;
    background: url(../images/icon/check_blue.svg) no-repeat center;
}

.table-type-01 {
    border-top: 2px solid var(--black-color2);
    margin-bottom: 3rem;
}

.table-type-01 thead th {
    padding: 2rem 0;
    text-align: center;
    border-left: .1rem solid var(--gry-color3);
    border-bottom: .1rem solid var(--gry-color9);
    font-weight: 500;
}

.table-type-01 tbody td {
    font-weight: 400;
    border-left: .1rem solid var(--gry-color3);
    border-bottom: .1rem solid var(--gry-color3);
    padding: 3rem 2rem;
    text-align: center;
}

.table-type-01 .list-text {
    display: inline-block;
    vertical-align: middle;
    line-height: 18px;
    max-width: calc(100% - 5rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.table-type-01 span.new {
    display: inline-block;
    vertical-align: middle;
    width: 1.8rem;
    height: 1.8rem;
    background: url(../images/icon/icon_new.png) no-repeat right 50%;
}

.table-type-01 span.notice-reply {
    display: inline-block;
    vertical-align: middle;
    width: 3.5rem;
    height: 1.8rem;
    margin-right: .5rem;
    background: url(../images/icon/icon-reply-gray.png) no-repeat right 0%;
}


.table-type-01 tbody tr td:first-child {
    border-left: 0;
}

.table-type-01 thead tr > th:first-child {
    border-left: 0;
}

.table-type-02 {
    border-top: .1rem solid var(--gry-color3);
}

.table-type-02 tbody td {
    padding: 2rem 0 2rem 2rem;
    color: var(--black-color2);
    font-weight: 400;
    border-bottom: .1rem solid var(--gry-color3);
}

.table-type-02 tbody th {
    padding: 2rem 0;
    background: var(--gry-bg-color2);
    border-right: .1rem solid var(--gry-color3);
    border-bottom: .1rem solid var(--gry-color3);
    text-align: center;
    color: var(--black-color2);
    font-weight: 500;
}

.table-type-03 {
    border-top: .1rem solid var(--gry-color3);
}

.table-type-03 thead tr > th:first-child,
.table-type-03 tr > td:first-child {
    border-left: 0;
}

.table-type-03 tbody td {
    padding: 2rem;
    color: var(--black-color2);
    font-weight: 400;
    word-break: break-all;
    text-align: center;
    border-left: .1rem solid var(--gry-color3);
    border-bottom: .1rem solid var(--gry-color3);
}

.table-type-03 tbody .tit {
    background-color: var(--gry-color13);
    font-weight: 500;
}

.table-type-03 tbody td.al-l {
    padding: 2rem 0 2rem 2rem;
}

.table-type-03 thead th {
    padding: 2rem 0;
    background: var(--gry-bg-color2);
    border-left: .1rem solid var(--gry-color3);
    border-bottom: .1rem solid var(--gry-color3);
    text-align: center;
    color: var(--black-color2);
    font-weight: 500;
}

.table-type-04 {
    border-top: .2rem solid var(--gry-txt6)
}

.table-type-04 tbody td {
    padding: 2rem;
    color: var(--black-color2);
    font-weight: 400;
    border-bottom: .1rem solid var(--gry-color3);
}

.table-type-04 tbody th {
    padding: 2rem 0;
    background: var(--gry-bg-color2);
    border-right: .1rem solid var(--gry-color3);
    border-bottom: .1rem solid var(--gry-color3);
    text-align: center;
    color: var(--black-color2);
    font-weight: 500;
}

.table-type-04 tbody th em {
    font-size: 1.4rem;
    color: var(--black-color2);
    margin-left: .3rem;
}

.table-type-05 {
    border-top: .3rem solid var(--black-color2);
    margin-bottom: 3rem;
}

.table-type-05 thead th {
    padding: 2rem 0;
    background-color: var(--gry-bg-color2);
    text-align: center;
    border-right: .1rem solid var(--gry-color3);
    border-bottom: .1rem solid var(--gry-color9);
    font-weight: 500;
}

.table-type-05 tbody td {
    font-weight: 400;
    border-right: .1rem solid var(--gry-color3);
    border-bottom: .1rem solid var(--gry-color3);
    padding: 3rem 2rem;
    text-align: center;
}

.table-type-05 td.tit {
    background-color: var(--gry-color13);
}

.table-type-05 thead tr > th:last-child,
.table-type-05 tbody tr > td:last-child {
    border-right: 0;
}


.table-type-06 th {
    color: var(--white);
    text-align: center;
    background-color: var(--navy-color);
    padding: 2rem 0;
    border-bottom: .1rem solid var(--white);
}

.table-type-06 td {
    color: var(--black-color4);
    padding: 2rem;
    text-align: left;
    border-bottom: .1rem solid var(--gry-color3);
    background-color: var(--gry-bg-color2);
    line-height: 2.6rem;
}

.table-type-07 {
    border-top: .1rem solid var(--gry-color3);
}

.table-type-07 thead tr > th:first-child,
.table-type-07 tr > td:first-child {
    border-top: 0
}

.table-type-07 tbody td {
    padding: 1.2rem;
    color: var(--black-color2);
    font-weight: 400;
    word-break: break-all;
    text-align: center;
    border-left: .1rem solid var(--gry-color3);
    border-bottom: .1rem solid var(--gry-color3);
    border-right: .1rem solid var(--gry-color3);
}

.table-type-07 tbody .tit {
    background-color: var(--gry-color13);
    font-weight: 500;
}

.table-type-07 tbody td.al-l {
    padding: 2rem 0 2rem 2rem;
}

.table-type-07 thead th {
    padding: 1.7rem 0;
    background: var(--gry-bg-color2);
    border-left: .1rem solid var(--gry-color3);
    border-right: .1rem solid var(--gry-color3);
    border-bottom: .1rem solid var(--gry-color3);
    text-align: center;
    color: var(--black-color2);
    font-weight: 500;
}


.info-box-02 {
    background: var(--blue-bg-color1);
    padding: 2.4rem 2.8rem;
    margin: 3rem 0;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: -0.1rem;
    word-break: keep-all;
}


.list-form-01 {
    display: flex;
    padding: 1.6rem 0;
    align-items: center;
    gap: 1rem;

}

.list-form-01 .input-check {
    width: 16.2rem;
}

/* layer 팝업 */
.modal-container {
    display: none;
}

.modal-container.on {
    display: block;

}

.modal-container .dim {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: fixed;
    background: #000;
    opacity: .5;
    z-index: 200;
}

.modal-container .modal {
    min-width: 32rem;
    width: 100%;
    background: var(--white);
    position: fixed;
    z-index: 200;
    border: 1px solid #777;
}

.modal-container .modal .btn-close {
    width: 2.4rem;
    height: 2.4rem;
    position: absolute;
    right: 4.2rem;
    top: 4.5rem;
    display: block;
    background: url(../images/icon/btn-modal-close.png) no-repeat center center;
}

.modal-container .modal .btn-close span {
    overflow: hidden;
    position: absolute;
    clip: rect(0 0 0 0);
    clip: rect(0, 0, 0, 0);
    width: 0;
    height: 0;
    margin: -1px;
    border: 0;
    padding: 0;
}

.modal-container .modal .btn-close span th,
.modal-container .modal .btn-close span td {
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    line-height: 0 !important;
    font-size: 0 !important;
    padding: 0 !important;
}

.modal-container .modal .modal-head {
    padding: 0 4.5rem;
    height: 7rem;
    line-height: 7rem;
    background: #fff;
    text-align: center;

}

.modal-container .modal .modal-head .head-title {
    color: #000;
    font-weight: 400;
    font-size: 24px;
    line-height: 30px;
    letter-spacing: -0.2px;
}

.modal-container .modal .modal-body {
    min-height: 100px;
    overflow-y: auto;
}

.modal-container .modal .modal-body .modal-body-container {
    width: 100%;
    height: 100%;
    padding: 3rem 4.5rem 3rem;
}

.modal-container .modal .modal-body .modal-body-container .head-title-area {
    margin: 30px 0 11px;
}

.modal-container .modal .modal-body .modal-body-container .btn.icon-download {
    height: 30px;
}

.modal-container .modal .modal-body .modal-body-container .btn.icon-pdf {
    height: 30px;
}

.modal-container .modal .modal-body .modal-body-container .btn.checked {
    height: 30px;
}

.modal-container .modal .modal-body .modal-body-container .btn-bottom-wrap {
    margin: 40px 0 0;
}

.modal-container .modal .modal-body .modal-body-container .btn-bottom-wrap + .content-wrap {
    margin-top: 40px;
}

.modal-container .modal .modal-body .modal-body-container .processing-result-box {
    margin: 40px 0 0;
}

.modal-container .modal .modal-body .modal-body-container > .content-wrap:first-child .head-sub-title-area {
    margin-top: 0;
}

.modal-container .modal .modal-body .modal-body-container .information-container {
    margin-top: 40px;
}

.modal-container .modal .modal-body .modal-text-contents {
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    letter-spacing: -0.2px;
    font-size: 14px;
}

.modal-container .modal .modal-body .modal-text-contents p {
    margin-top: 10px;
}

.modal-container .modal .modal-body .modal-text-contents .dot-list {
    margin-top: 10px;
}

.modal-container .modal .modal-body .modal-text-contents .dash-list > li .dot-list {
    margin-top: 2px;
}

.modal-container .modal .modal-footer {
    padding: 16px 30px 40px;
    margin: 0 30px;
    text-align: center;
}

.modal-container .modal .modal-footer.line {
    border-top: 1px solid #e7e7e7;
}

.modal-container .modal .modal-etc-container .form-group {
    height: 54px;
    padding: 16px;
    background: #f9f9f9;
}

.modal-container .modal.modal-smaller {
    width: 400px;
}

.modal-container .modal.modal-small {
    width: 552px;
}

.modal-container .modal.modal-medium {
    width: 74.4rem !important;
}

.modal-container.modal-alert .modal.modal-large {
    width: 93.6rem;
}

.modal-container .modal.res-height {
    top: 50% !important;
    transform: translateY(-50%) !important;
}

.modal-container .modal.modal-largest {
    width: 1128px;
}

.modal-container .modal.modal-window {
    position: static;
    width: 100%;
}

.modal-container.modal-alert .modal {
    width: max-content;
    min-width: 40.6rem;
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 2.5rem;
    border: 1px solid #777;
    background: #fff;
    text-align: center;
    line-height: 2.4rem;
    font-size: 1.6rem;
}
.modal-container.modal-alert.alert-xl .modal {
    width: 59.2rem;
}
.modal-container .modal.headline .modal-head .head-title {
    border-bottom: .2rem solid var(--black-color2);
}

.modal-container .modal.headline .modal-head {
    height: 10.6rem !important;
}

.modal-container .modal.headline.type-01 .modal-head {
    height: 7.7rem !important;
}

.modal-container.modal-alert .modal.type-01 .modal-head .head-title {
    padding-top: 0;
}

.modal-container .modal.type-01 .btn-close {
    top: 2.8rem;
}

.modal-container.modal-alert .modal .modal-head {
    height: 7.5rem;
    border-top-left-radius: 2.5rem;
    border-top-right-radius: 2.5rem;
}

.modal-container.modal-alert .modal .modal-head .head-title {
    line-height: 2.6rem;
    font-size: 2.6rem;
    height: 100%;
    padding-top: 3rem;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
}

.modal-container.modal-alert .modal .modal-body {
    min-height: auto;
}

.modal-container.modal-alert .modal .modal-body-container {
    padding-top: 22px;
    text-align: left;
}

.modal-container.modal-alert .modal .modal-body-container p {
    font-size: 14px;
    line-height: 22px;
    color: #111;
}

.modal-container.modal-alert .modal .modal-body-container p.large-txt {
    font-size: 22px;
    line-height: 38px;
    color: #111;
}

.modal-container.modal-alert .modal .modal-body-container p + p {
    margin-top: 10px;
}

.modal-container.modal-alert .modal .modal-body-container p:nth-last-child(1) {
    margin-bottom: -3px;
}

.modal-container .modal .modal-footer {
    padding: 16px 30px 40px;
    margin: 0 30px;
    text-align: center;
}

.modal-container .modal .modal-footer.type-01 {
    height: 6rem;
    display: flex;
    align-items: center;
    border-top: .1rem solid var(--gry-color3);
    padding: 0 !important;
}

.modal-container.modal-alert .modal .modal-footer {
    padding: 0 0 30px;
}

.modal-container.modal-alert .modal .modal-footer .btn-group li + li {
    margin-left: 17px;
}

.modal-container .modal-footer .btn-group li {
    display: inline-block;
    vertical-align: middle;
}

.modal-container .modal-footer .btn-group li + li {
    margin-left: 5px;
}

.modal-container.modal-alert.type-notitle .modal {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.modal-container.modal-alert.type-notitle .modal .modal-head {
    overflow: hidden;
    position: absolute;
    clip: rect(0 0 0 0);
    clip: rect(0, 0, 0, 0);
    width: 0;
    height: 0;
    margin: -1px;
    border: 0;
    padding: 0;
}

.modal-container.modal-alert.type-notitle .modal .modal-body-container p {
    text-align: center;
}

.modal-body .pop-notice .top {
    margin-bottom: 2.5rem;
    display: flex;
    align-items: center;
    gap: 1.8rem;
    justify-content: center;
}

.modal-body .pop-notice .top h1 {
    font-size: 2.6rem;
    font-weight: 700;
}

.modal-body .pop-notice .top::before {
    content: '';
    display: block;
    width: 7.8rem;
    height: 7.8rem;
}

.modal-body .pop-notice .top.type-01::before {
    background: url(../images/icon/icon_notice_tit_01.png) no-repeat 0 0;
}

.modal-body .pop-notice .top.type-02::before {
    background: url(../images/icon/icon_notice_tit_02.png) no-repeat 0 0;
}

.modal-body .pop-notice .bottom {
    font-size: 2rem;
    line-height: 3.4rem;
    text-align: center;
    margin-bottom: 2rem;
}

.modal-body .pop-notice .bottom p.txt-01 {
    font-size: 2.6rem;
    line-height: 3.8rem;
    text-align: center;
    margin-bottom: 2rem;
}

/* E: layer 팝업 */
.add-account-list {
    border-top: 0.1rem solid var(--gry-color3);
}

.add-account-list > li {
    padding: 1.6rem 2rem;
    position: relative;
}

.add-account-list > li + li {
    border-top: 0.1rem solid var(--gry-color3);
}


.add-account-list .dot-list {
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--gry-txt4);
    line-height: 2;
}

.add-account-list .input-area input {
    height: 4.2rem !important;
}

.text-area {
    width: 100%;
    height: 20rem;
    padding: 1.5rem;
    border: .1rem solid var(--gry-color7);
    line-height: 2.4rem;
}


.input-file {
    display: inline-block;
    position: relative;
    width: 175px;
    height: 106px;
    margin: 0 8px 0 0;
    background: #f7f7f7 url('../images/icon/icon-file-plus.png') no-repeat center;
}

.input-file .btn-upload {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    background-color: transparent;
}

.input-file input[type='file'] {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    opacity: 0;
    cursor: pointer;
}

.input-file input[type='file']:focus + .file-info-view {
    border-radius: 0;
    border: 2px solid #000;
}

.input-file .file-info-view {
    width: 100%;
    height: 100%;
    padding: 2.5rem 0 0;
}

.input-file .file-info-view .file-info-inner {
    display: none;
    background-color: #f7f7f7;
}

.input-file .file-info-view .file-info {
    font-weight: 300;
    font-size: 1.2rem;
    line-height: 2.2rem;
    letter-spacing: -0.05rem;
    padding: 0 1rem;
    line-height: 1.6rem;
}

.input-file .file-info-view .file-info:before {
    display: block;
    content: '';
    width: 2rem;
    height: 2.4rem;
    margin: 0 auto 1rem;
    background-image: url('../images/icon/icon-attach.png');
    background-repeat: no-repeat;
}

.input-file .file-info-view .file-info.gif:before {
    background-position: -248px top;
}

.input-file .file-info-view .file-info.jpg:before {
    background-position: -220px top;
}

.input-file .file-info-view .file-info.png:before {
    background-position: -192px top;
}

.input-file .file-info-view .file-info.bmp:before {
    background-position: -276px top;
}

.input-file .file-info-view .file-info.draw:before {
    background-position: -192px -28px;
}

.input-file .file-info-view .file-info.pdf:before {
    background-position: -66px top;
}

.input-file .file-info-view .file-info.doc:before {
    background-position: -94px top;
}

.input-file .file-info-view .file-info.han:before,
.input-file .file-info-view .file-info.hwp:before {
    background-position: -122px top;
}

.input-file .file-info-view .file-info.txt:before {
    background-position: -150px top;
}

.input-file .file-info-view .file-info.xls:before {
    background-position: -94px -28px;
}

.input-file .file-info-view .file-info.mp4:before {
    background-position: -347px top;
}

.input-file .file-info-view .file-info.avi:before {
    background-position: -375px top;
}

.input-file .file-info-view .file-info.mov:before {
    background-position: -403px top;
}

.input-file .file-info-view .file-info.video:before {
    background-position: -347px -28px;
}

.input-file .file-info-view .btn-delete {
    width: 2rem;
    height: 2rem;
    position: absolute;
    right: 0;
    top: 0;
    background: url('../images/common/btn-close-8.png') no-repeat center;
}

.input-file.active input[type='file'],
.input-file.active .btn-upload {
    display: none;
}

.file-upload input[type='file'] {
    display: inline-block;
    width: auto;
    vertical-align: middle;
}

.input-file.active .file-info-view {
    position: absolute;
    left: 0;
    top: 0;
}

.input-file.active .file-info-view .file-info-inner {
    display: block;
}

.file-upload .input-check {
    vertical-align: middle;
}

.notice-infomation {
    font-size: 1.2rem;
    margin-top: 1rem;
    color: var(--gry-color8);
}

.notice-infomation em {
    color: #dc0400;
    font-size: 1.2rem;
}

.input-wrap {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    vertical-align: middle;
}

/* icon */
.icon-file {
    display: inline-block;
    line-height: 2.4rem;
    color: var(--black-color3);
    font-weight: 400;
}

.icon-file:hover {
    color: var(--blue-color1);
}

.icon-file:before {
    display: inline-block;
    vertical-align: middle;
    width: 2rem;
    height: 2.4rem;
    line-height: 2.4rem;
    margin-right: 1.7rem;
    background: url(../images/icon/icon-attach.png) no-repeat;
    content: '';
}

.icon-file.icon-pdf:before {
    background-position: -66px 0;
}

.icon-file.icon-doc:before {
    background-position: -94px 0;
}

.icon-file.icon-hwp:before {
    background-position: -122px 0;
}

.icon-file.icon-txt:before {
    background-position: -150px 0;
}

.icon-file.icon-xls:before {
    background-position: -94px -28px;
}

.icon-file.icon-png:before {
    background-position: -192px 0;
}

.icon-file.icon-jpg:before {
    background-position: -220px 0;
}

.icon-file.icon-gif:before {
    background-position: -248px 0;
}

.icon-file.icon-bmp:before {
    background-position: -276px 0;
}

.icon-file.icon-img:before {
    background-position: -276px -28px;
}

.icon-file.icon-mp4:before {
    background-position: -347px 0;
}

.icon-file.icon-avi:before {
    background-position: -375px 0;
}

.icon-file.icon-mov:before {
    background-position: -403px 0;
}

.icon-file.icon-video:before {
    background-position: -347px -28px;
}


.board-view-type {
    border-top: .2rem solid var(--black-color4);
}

.board-view-type .title-area {
    position: relative;
    padding: 4rem 2rem;
    border-bottom: .1rem solid var(--gry-color3);
}

.board-view-type .title-area .head-title {
    text-align: center;
    font-size: 3rem;
    line-height: 3rem;
    color: var(--black-color2);
}

.board-view-type .title-area .board-date {
    text-align: center;
    color: var(--gry-color8);
    font-weight: 400;
    margin-top: 2.7rem;
}

.board-view-type .attach-board-area {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: row;
    border-bottom: .1rem solid var(--gry-color3);
    padding: 1.1rem 0;
}

.board-view-type .attach-board-area strong {
    max-width: 12rem;
    padding: 0 3.5rem;
}

.board-view-type .attach-board-area .attach-board-content,
.board-view-type .attach-board-area .attach-file-list {
    width: 100%;
    max-width: calc(100% - 11.7rem - 23.3rem);
    padding-left: 3.5rem;
}

.board-info {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.board-info li {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.board-info li span,
.board-info li em {
    font-weight: 400;
    color: var(--black-color3);
}

.board-info li + li {
    margin-left: 2rem;
}

.board-info li + li::before {
    content: '';
    margin-right: 2rem;
    display: block;
    width: .1rem;
    height: 1.6rem;
    background-color: var(--gry-color3);
}

.board-view-type .board-view {
    padding: 6rem 3.5rem;
    font-weight: 400;
    line-height: 2.4rem;
    color: var(--black-color3);
    border-bottom: .1rem solid var(--gry-color3);
}

.board-list-view {

}

.board-list-view .prev-list,
.board-list-view .next-list {
    position: relative;
    border-bottom: .1rem solid var(--gry-color3);
}

.board-list-view .prev-list > div, .board-list-view .prev-list a,
.board-list-view .next-list > div, .board-list-view .next-list a {
    display: block;
    padding: 2rem 2rem;
}

.board-list-view .prev-list span,
.board-list-view .next-list span {
    display: inline-block;
    width: 10.5rem;
    height: 2rem;
    padding-left: 2rem;
    color: #3750cd;
    position: relative;
}

.board-list-view .prev-list .title,
.board-list-view .next-list .title {
    display: inline-block;
    vertical-align: middle;

}

.board-list-view .prev-list span::before,
.board-list-view .next-list span:before {
    display: block;
    content: '';
    width: .8rem;
    height: .8rem;
    border: .1rem solid #3750cd;
    border-top: .1rem solid #3750cd;
    border-left: .1rem solid transparent;
    border-bottom: .1rem solid transparent;
    border-right: .1rem solid #3750cd;
    transform: rotate(312deg);
    position: absolute;
    left: 0;
    top: .7rem;
}

.board-list-view .next-list span:before {
    transform: rotate(133deg);
    transform-origin: .4rem .4rem;
    top: .3rem;
}

.sub-text-01 {
    font-size: 1.2rem;
    color: var(--gry-color8);
}

.bg-box-01 {
    background: var(--gry-bg-color2);
    padding: 1.5rem;
}

.content-text-type-01 {
    margin: 0 0 3rem;
}

.content-text-type-01 h5 {
    font-size: 1.8rem;
    color: var(--black-color2);
    margin-bottom: 3rem;
    font-weight: 600;
}

.content-text-type-01 p {
    color: var(--black-color2);
    line-height: 2.6rem;
    margin-bottom: 2.6rem;
}

.content-text-type-01 p:last-child {
    margin-bottom: 0;
}

.content-text-type-02 {
    background-color: var(--gry-bg-color2);
    padding: 2.8rem;
    margin-bottom: 5rem;
}

.content-text-type-02 h6 {
    font-weight: 600;
    color: var(--black-color2);
    margin-bottom: 1rem;
}

.content-text-type-02 .dot-list li {
    color: var(--black-color3);
    margin-bottom: 1rem;
}

.drop-down-content h2 {
    font-size: 2.4rem;
    color: var(--black-color2);
    font-weight: 600;
    margin-bottom: 2rem;
}

.drop-down-content dl {
    border-top: .2rem solid var(--black-color2);
}

.drop-down-content dl dt {
    height: 6.5rem;
    border-top: .1rem solid var(--gry-color3);
    border-bottom: .1rem solid var(--gry-color3);
}

.drop-down-content dl > dt:first-child {
    border-top: 0;
}

.drop-down-content dl dt button {
    width: calc(100% - 2rem);
    height: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.drop-down-content dl dt button::after {
    content: '';
    width: 0;
    height: 0;
    border-left: .9rem solid var(--gry-bg-color9);
    border-top: .9rem solid transparent;
    border-bottom: .9rem solid transparent;
    display: block;
    transform: rotate(90deg);
    transition: transform .2s linear;
}

.drop-down-content dl dt button.on,
.drop-down-content dl dt button:hover {
    color: #3750cd;
}

.drop-down-content dl dt button.on::after {
    transform: rotate(272deg);
    transition: transform .5s linear;
}

.drop-down-content dl dd {
    height: 0;
    background-color: var(--gry-bg-color3);
    overflow: hidden;
    color: var(--black-color3);
    transition: padding .2s;
}

.drop-down-content dl dd.on {
    height: auto;
    padding: 2.7rem 3rem;
    transition: padding .2s;
}

.drop-down-content dl dd .wrap {
    display: grid;
    grid-template-columns: 2rem 1fr;
    gap: .3rem;
}

.drop-down-content dl dd .wrap::before {
    content: 'A.';
    display: block;
    color: var(--black-color2);
    padding-top: .3rem;
}

.drop-down-content dl dd div p {
    line-height: 2.6rem;
    color: var(--black-color3);
}

.drop-down-content dl dd div p + p {
    margin-top: 1rem;
}

.board-reply-view {
    padding: 1.5rem 2rem;
    border-bottom: 1px solid #e7e7e7;
}

.board-reply-view > strong {
    display: inline-block;
    vertical-align: top;
    width: 10.5rem;
    color: #1e75d6;
}

.board-reply-view .reply-content {
    display: inline-block;
    vertical-align: top;
    width: calc(100% - 11rem);
}

.board-reply-view .reply-content a:hover {
    text-decoration: underline;
    cursor: pointer;
}

.board-reply-view .reply-content .reply-list-group em {
    overflow: hidden;
    position: absolute;
    clip: rect(0 0 0 0);
    clip: rect(0, 0, 0, 0);
    width: 0;
    height: 0;
    margin: -1px;
    padding: 0;
    border: 0;

}

.board-reply-view .reply-content .reply-list-group em th, .board-reply-view .reply-content .reply-list-group em td {
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    line-height: 0 !important;
    font-size: 0 !important;
    padding: 0 !important;
}

.board-reply-view .reply-content .reply-list-group > li {
    position: relative;
    margin-top: .8rem;
    padding-left: 4rem;
}

.board-reply-view .reply-content .reply-list-group > li:before {
    width: 3.5rem;
    height: 1.8rem;
    position: absolute;
    left: 0;
    top: .4rem;
    background: url(../images/icon/icon-reply-gray.png) no-repeat 0 0;
    content: "";
}

.board-reply-view .reply-content .reply-list-group > li .reply-text {
    display: block;
    margin: 1rem 0 0 1rem;
    padding-left: 4rem;
    position: relative;
}

.board-reply-view .reply-content .reply-list-group > li .reply-text:before {
    display: inline-block;
    vertical-align: top;
    width: 3.5rem;
    height: 1.8rem;
    position: absolute;
    left: 0;
    top: .4rem;
    background: url(../images/icon/icon-reply-gray.png) no-repeat 0 0;
    content: "";
}