@charset "utf-8";

/*------------------------------------------------------------------------------------------------------------------------------------------
	File : ui.css
 	CSS 적용순서 : 아이디 > 태그와 클래스 > 클래스 > 태그
	CSS 선택자 선언순서 : Type Selector, Layout Selector, Class Selector, Etc
	CSS 속성 선언순서 : display, position, float/clear, overflow, width/height, margin/padding, border, background, color/font, align, etc
--------------------------------------------------------------------------------------------------------------------------------------------*/

.mt-10 {
    margin-top: 10px;
}

.mb-10 {
    margin-bottom: 10px;
}

.mt-20 {
    margin-top: 20px;
}

.tooltop-tpA {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    color: #dd001e;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox  */
input[type='number'] {
  -moz-appearance: textfield;
}

input[type='text']:focus,
input[type='password']:focus,
input[type='number']:focus,
select:focus {
    border: 1px solid #7478E9 !important;
}


/* #colbox-wrap */
.colbox-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.colbox-wrap .colbox {
    position: relative;
    display: flex;
    gap: 8px;
    align-items: center;
    height: 46px; 
}
.colbox-wrap .colbox.on {
    border: 1px solid #7478E9 !important;
}
.colbox-wrap.col-3 .colbox  {
    width: calc(33.33333% - 8px);
}
.colbox-wrap.tpA .colbox {
    background: #f8f8f8;
    border: 1px solid #f8f8f8;
    border-radius: 12px;
}
.colbox-wrap .colbox input[type=radio],
.colbox-wrap .colbox input[type=checkbox] {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    opacity: 0;
    outline: 0;
    z-index: -1;
    overflow: hidden;
}
.colbox-wrap .colbox input[type=radio]:checked + label,
.colbox-wrap .colbox input[type=checkbox]:checked + label {
    color: #5c60cc;
}
.colbox-wrap .colbox input[type=radio]:checked + label i,
.colbox-wrap .colbox input[type=checkbox]:checked + label i {
    background: url('/img/check.svg') no-repeat 50% 50% #5c60cc;
    border-color: #5c60cc;
    border-radius: 100%;
}
.colbox-wrap .colbox label {
    display: flex;
    column-gap: 8px;
    align-items: center;
    padding: 16px 14px;
    font-weight: 400;
    font-size: 14px;
    color: #222;
    cursor: pointer;
}
.colbox-wrap .colbox label i {
    width: 20px;
    height: 20px;
    background: url('/img/check_grey.svg') no-repeat 50% 50% #fff;
    border: 1px solid #757575;
    border-radius: 100%;
}


.rowbox-wrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px 10px;
}
.rowbox-wrap .rowbox {
    width: 100%;
}
.rowbox-wrap .rowbox .rowbox-inner {
    position: relative;
    display: flex;
    width: 100%;
    align-items: center;
}
.rowbox-wrap .rowbox .rowbox-inner .tbl-wrap {
    margin-top: 8px;
}

.rowbox-wrap .rowbox input[type=checkbox] {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    opacity: 0;
    outline: 0;
    z-index: -1;
    overflow: hidden;
}
.rowbox-wrap .rowbox input[type=checkbox]:checked + label {
    color: #5c60cc;
}
.rowbox-wrap .rowbox input[type=checkbox]:checked + label i {
    background: url('/img/check.svg') no-repeat 50% 50% #5c60cc;
    border-color: #5c60cc;
    border-radius: 100%;
}
.rowbox-wrap .rowbox label {
    display: flex;
    position: relative;
    column-gap: 8px;
    align-items: center;
    padding-left: 26px;
    font-weight: 400;
    font-size: 14px;
    color: #222;
    cursor: pointer;
    line-height: 20px;
}
.rowbox-wrap .rowbox label i {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 20px;
    height: 20px;
    background: url('/img/check_grey.svg') no-repeat 50% 50% #fff;
    border: 1px solid #757575;
    border-radius: 100%;
}
.ns {
    color: #f00 !important;
}
.rowbox-wrap .rowbox .ns {
    margin-top: 6px;
    
}
.rowbox-wrap .rowbox .cont {
    padding-left: 24px;
    font-size: 13px;
    color: #939393;
}
.rowbox-wrap .rowbox.tpA label {
    padding-left: 30px;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
}
.rowbox-wrap .rowbox.tpA label i {
    width: 24px;
    height: 24px;
    
}


.checkbox-wrap {
    display: flex;
    align-items: center;
    justify-content: left;
}

.checkbox-wrap label {
    margin-right: 8px;
}

.input-box {
    padding: 2px;
}
.input-box:first-child {
    padding-top: 0px;
}
.input-box:last-child {
    padding-bottom: 0px;
}

.no-data {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 30px;
    background-color: #fff;
    border: 1px solid #ebebeb;
    font-size: 14px;
    color: #333;
}

/* unit-area */
.unit-area {
    position: relative;
}
.unit-area input {
    padding-right: 30px;
}
.unit-area .unit {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 13px;
    color: #333;
}

.thbumbimg_wrap {
    display: flex;
    align-items: center;
    column-gap: 12px;
}
.thbumbimg_wrap.tpA {
    flex-wrap: wrap;
}
.thbumbimg {
    width: 200px;
    /* height: 200px; */
}
.thbumbimg img {
    width: 100%;
    height: 100%;
}

.img-area.c {
    text-align: center;
}

.img-area.tpA img {
    width: 100%;
}

.line-through {
    text-decoration: line-through;
}

/* ls-form */
.ls-form-group {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.ls-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.ls-form > li {
    display: flex;
    /* align-items: center; */
    /* justify-content: space-between; */
    flex-direction: column;
    gap: 8px;
}
.ls-form > li .tit {
    font-size: 13px;
    font-weight: 600;
    color: #323232;
}
.ls-form > li .cont {
    font-size: 16px;
    font-weight: 400;
    color: #222;
}
.ls-form > li .cont input {
    width: 100%;
    height: 40px;
    padding: 0 14px;
    border: 1px solid #ebebeb;
    border-radius: 6px;
    font-weight: 400;
    font-size: 13px;
    color: #333333;
    line-height: 24px;
    letter-spacing: -0.02em;
}







.ls-item-tpA {

}
.ls-item-tpA li {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.ls-item-tpA li .li-inner {
    display: flex;
    align-items: center;
    gap: 0px 20px;
}
.ls-item-tpA li .img-area {
    
}
.ls-item-tpA li .img-area img {
    width: 160px;
    height: auto;
    object-fit: cover;
}
.ls-item-tpA li .tit-area {

}
.ls-item-tpA li .tit-area .tit {
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: 600;
    color: #222;
}
.ls-item-tpA li .tit-area .tit-sub {
    margin-bottom: 6px;
    color: #757575;
    font-size: 14px;
    line-height: 14px;
}
.ls-item-tpA li .tit-area .tit-sub:last-child {
    margin-bottom: 0px;
}
.ls-item-tpA li .tit-area .tit-sub em {
    font-weight: 600;
    font-size: 14px;
    color: #000;
    line-height: 22px;
}

.ls-item-tpA li .price-area {
    font-weight: 600;
    font-size: 18px;
    color: #000;
    line-height: 22px;
}
.ls-item-tpA li .price-area em {
    margin-left: 2px;
    font-weight: 500;
    font-size: 14px;
    color: #000;
    line-height: 22px;
}

.ls-img > li {
    overflow: hidden;
    border-radius: 12px;
}
.ls-img > li .img-area img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ls-tpA {
    position: relative;
}

.ls-tpA::after {
    content: "";
    display: block;
    clear: both;
}

.ls-tpA.col-4 {

}

.ls-tpA.col-4 > li {
    width: 25%;
}

.ls-tpA.col-4 > li.tpA {
    width: 50%;
}

.ls-tpA.col-4 > li.tpA .li-inner {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ls-tpA > li {
    float: left;
    height: 280px;
    padding: 6px;
    text-align: center;
}

.ls-tpA > li .li-inner {
    height: 100%;
    padding: 40px;
    background-color: #fff;
}

.ls-tpA > li .li-inner > .logo {
    height: 68px;
    margin-bottom: 20px;
    line-height: 68px;
}

.ls-tpA > li .li-inner .tit {
    margin-bottom: 12px;
    font-weight: 600;
    font-size: 17px;
    color: #000;
}

.ls-tpA > li .li-inner .sub-tit {
    margin-top: 6px;
    margin-bottom: 20px;
    font-size: 14px;
    color: #222;
    line-height: 18px;
}

.ls-tpA > li .li-inner .sub-tit.tpA {
    margin: 0;
    color: #014192;
}

.ls-tpA > li .li-inner .sub-tit.tpB {
    margin: 0;
    color: #DB011F;
}

.ls-tpA > li.tpA .li-inner > .logo {
    margin-bottom: 0px;
}

/* #ls-tpB */
.ls-tpB {
    display: flex;
    /* flex-wrap: wrap; */
    column-gap: 24px;
    row-gap: 24px;
    position: relative;
    /* width: calc(100% + 12px);
    margin-left: -12px;
    margin-top: -12px; */
}
.ls-tpB.flex-wrap {
    flex-wrap: wrap;
}

.ls-tpB::after {
    content: "";
    display: block;
    clear: both;
}

.ls-tpB > li {
    /* float: left; */
    /* width: 240px; */
}

.ls-tpB > li .li-inner {
    overflow: hidden;
    position: relative;
    width: 100%;
    border: 1px solid #ebebeb;
    border-radius: 24px;
}
.ls-tpB > li .li-inner > a {
    display: block;
}

.ls-tpB > li .li-inner .img-area {
    /* height: 314px; */
    background-color: #fff;
}

.ls-tpB > li .li-inner .img-area > a {
    display: block;
}
.ls-tpB > li .li-inner .img-area .chk_box {
    position: absolute;
    left: 24px;
    top: 24px;
}

.ls-tpB > li .li-inner .img-area img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ls-tpB > li .li-inner .info-area {
    padding: 18px 18px;
    background-color: #fff;
    border-top: 1px solid #ebebeb;

}
.ls-tpB > li .li-inner .info-area .tit {
    overflow: hidden;
    height: 44px;
    margin-bottom: 12px;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-weight: 600;
    font-size: 17px;
    color: #222;
    line-height: 24px;
}
.ls-tpB > li .li-inner .info-area .tit-sub {
    /* font-weight: 600; */
    display: block;
    font-size: 15px;
    color: #575757;
}
.ls-tpB > li .li-inner .btn-wrap {
    margin-top: 16px;
}

.ls-tpB.col-2 > li {
    width: calc(50% - 24px);
}

.ls-tpB.col-3 > li {
    width: calc(33.33333% - 24px);
}

.ls-tpB.col-4 > li {
    width: calc(25% - 24px);
}

/* #ls-tpC */
.ls-tpC {
    display: flex;
    flex-wrap: wrap;
}

.ls-tpC > li {
    position: relative;
    padding-left: 8px;
    font-size: 14px;
    line-height: 24px;
    color: #333;
}

.ls-tpC > li::after {
    content: "";
    display: block;
    position: absolute;
    left: 0px;
    top: 11px;
    width: 2px;
    height: 2px;
    background-color: #555;
}

.ls-tpC.col-1 > li {
    width: 100%
}

.ls-tpC.col-3 > li {
    width: 33.33333%
}

/* #ls-tpD */
.ls-tpD {
    display: flex;
}

.ls-tpD > li {
    padding: 18px 12px;
    border: 1px solid #e1e1e1;
    border-left: 0px;
    font-size: 500;
    font-size: 15px;
    color: #333;
    text-align: center;
}

.ls-tpD > li:first-child {
    border-left: 1px solid #e1e1e1;
}

.ls-tpD.col-6 > li {
    width: 16.66666%;
}

.ls-tabmenu {
    position: relative;
    width: 100%;
    /* width: calc(100% + 6px);
    margin-left: -6px;
    margin-top: -6px; */
}

.ls-tabmenu::after {
    content: "";
    display: block;
    clear: both;
}

.ls-tabmenu.al-c > li {
    text-align: center;
}

.ls-tabmenu.col-auto > li {
    width: auto;
}


.ls-tabmenu.col-2 > li {
    width: 50%;
}

.ls-tabmenu.col-3 > li {
    width: 33.33333%;
}

.ls-tabmenu.col-4 > li {
    width: 25%;
}

.ls-tabmenu.col-5 > li {
    width: 20%;
}

.ls-tabmenu.col-6 > li {
    width: 16.66666%;
}

.ls-tabmenu.col-7 > li {
    width: 14.28571%;
}

/* .ls-tabmenu > li {
    float: left;
    position: relative;
    padding: 6px;
}

.ls-tabmenu > li.on::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -12px;
    width: 0;
    height: 0px;
    margin-left: -5px;
    border-bottom: 10px solid transparent;
    border-top: 10px solid #003885;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
}

.ls-tabmenu > li .li-inner {
    
}

.ls-tabmenu > li .li-inner > a {
    display: block;
    padding: 16px 15px;
    border: 1px solid #e1e1e1;
    font-size: 16px;
    color: #222;
}

.ls-tabmenu > li.on .li-inner > a {
    background-color: #003885;
    border: 1px solid #003885;
    border-top-left-radius: 12px;
    border-bottom-right-radius: 12px;
    font-weight: 500;
    color: #fff;
} */


.tab-wrap .tab-body {
    overflow: hidden;
    /* margin-top: 40px; */
    border: 1px solid #ebebeb;
    border-radius: 36px;
}
.tab-wrap .tab-body.tpA {
    border: none;
    border-radius: 0px;
}
.tab-wrap .tab-body.tpA .contentwrap {
    margin-top: 30px;
    padding: 40px 40px;
    background-color: #fff;
    border: 1px solid #ebebeb;
    border-radius: 12px;
}
.tab-wrap .tab-body .info-area {
    padding: 60px 40px;
    background-color: #fff;
    line-height: 20px;
}
.ls-tabmenu.tpA {
    display: flex;
    align-items: center;
    background-color: #fff;
    border-radius: 100px;
}
.ls-tabmenu.tpA > li > a {
    display: block;
    padding: 22px 12px;
    font-weight: 600;
    font-size: 16px;
    text-align: center;
}
.ls-tabmenu.tpA > li.on > a {
    background-color: #7478E9;
    color: #fff;
    border-radius: 100px;
}



.ls-tabmenu.tpB {
    display: inline-flex;
    align-items: center;
    width: auto;
    background-color: #fff;
    border-radius: 100px;
}
.ls-tabmenu.tpB > li {
    /* width: 200px; */
}
.ls-tabmenu.tpB > li > a {
    display: block;
    padding: 22px 36px;
    font-weight: 500;
    font-size: 17px;
    text-align: center;
}
.ls-tabmenu.tpB > li.on > a {
    background-color: #7478E9;
    color: #fff;
    border-radius: 100px;
}

/* ls-group */
.ls-group {
    display: flex;
    flex-wrap: wrap;
    column-gap: 20px;
    row-gap: 20px;
}
.ls-group > li {
    width: calc(50% - 20px);
}
.ls-group > li .li-inner {
    overflow: hidden;
    display: flex;
    height: 100%;
    background-color: #fff;
    border: 1px solid #ebebeb;
    border-radius: 36px;
    box-shadow: 0px 0px 12px rgba(0,0,0,0.12);
}
.ls-group > li .li-inner .img-area {
    width: 280px;
    height: auto;
}
.ls-group > li .li-inner .img-area > a {
    display: block;
}
.ls-group > li .li-inner .img-area img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 36px;
}
.ls-group > li .li-inner .info-area {
    width: calc(100% - 280px);
    padding: 22px;
}
.ls-group > li .li-inner .info-area > a:hover {
    color: #7478E9;
}
.ls-group > li .li-inner .info-area .tit {
    display: block;
    font-weight: 600;
    font-size: 22px;
    color: #333;
}
.ls-group > li .li-inner .info-area .cont {
    display: block;
    margin-bottom: 6px;
    margin-top: 6px;
    font-size: 14px;
    line-height: 20px;
}


@media all and (max-width: 780px) {
    .ls-tpA.col-4 > li {
        width: 50%;
    }

    .ls-tpB.col-2 > li {
        width: 100%;
    }

    .ls-tpB.col-3 > li {
        width: 50%;
    }

    .ls-tpB.col-4 > li {
        width: 50%;
    }
}

@media all and (max-width: 480px) {
    .ls-tpA {
        display: flex;
        flex-wrap: wrap;
    }
    .ls-tpA > li {
        float: inherit;
        height: auto;
    }

    .ls-tpA > li .li-inner {
        padding: 14px;
    }

    .ls-tpB {
        width: 100%;
        margin-left: 0px;
    }

    .ls-tpB.col-3 > li {
        width: 100%;
    }

    .ls-tpB.col-4 > li {
        width: 100%;
    }

    .ls-tpA > li .li-inner > .logo {
        margin-bottom: 12px;
    }

    .ls-tpA > li .li-inner .tit {
        margin-bottom: 6px;
    }

    .ls-tpA > li .li-inner .sub-tit {
        margin-bottom: 12px;
    }

    .ls-tpB > li .li-inner {
        padding: 6px 0;
    }
    
}

.ls-tag {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 4px;
    row-gap: 4px;
}
.ls-tag > li {
    padding: 8px 12px;
    border: 1px solid #ebebeb;
    border-radius: 100px;
    font-size: 13px;
    color: #333;
}

/* #dl */
.dl-tpA {
    margin-top: 32px;
}

.dl-tpA:first-child {
    margin-top: 0px;
}

.dl-tpA dt {
    margin-bottom: 8px;
    font-weight: 700;
    font-size: 18px;
    color: #222;
    line-height: 24px;
}

.dl-tpA dt.color-tpA {
    color: #014192;
}

.dl-tpA dd {
    margin-top: 8px;
    font-size: 14px;
    color: #555;
    line-height: 24px;
}

.dl-tpA dd:first-child {
    margin-top: 0px;
}

.dl-tpA dd li {
    font-size: 14px;
    color: #555;
    line-height: 24px;
}
.dl-tpA dd li a {
    font-size: 14px;
    color: #555;
    line-height: 24px;
}

.dl-tpB {
    margin-top: 8px;
}

.dl-tpB:first-child {
    margin-top: 0px;
}

.dl-tpB dt {
    
    font-weight: 500;
    font-size: 14px;
    color: #222;
    line-height: 20px;
}

.dl-tpB dd {
    font-size: 13px;
    color: #555;
    line-height: 20px;
}

.dl-tpC dt {
    margin-bottom: 24px;
    font-weight: 600;
    font-size: 28px;
    color: #222;
    line-height: 24px;
}

.dl-tpC dd {
    
    font-size: 17px;
    color: #222;
    line-height: 24px;
}

.dl-tpC dd ul > li {
    margin-top: 8px;
}

.dl-tpC dd ul > li:first-child {
    margin-top: 0px;
}

.dl-group {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 6px;
}

.dl-tpD {

}
.dl-tpD dt {
    position: relative;
    padding-left: 18px;
    font-weight: 600;
    font-size: 15px;
    color: #454545;
    line-height: 24px;
}
.dl-tpD dt.font_normal {
    font-weight: 500;
}
.dl-tpD dt::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 0;
    width: 12px;
    height: 8px;
    background: url("/img/ico_check_blue.svg") no-repeat center center;
    background-size: 12px 8px;;
}
.dl-tpD dd {
    padding-left: 16px;
    font-size: 13px;
    color: #333;
    line-height: 24px;
}


/* #button */
.btn-wrap {
    position: relative;
}

.btn-wrap.tpA {
    margin-top: 24px;
    text-align: right;
}

.btn-wrap.tpB {
    margin: 24px 0;
    text-align: right;
}

.btn-wrap.tpC {
    margin: 24px 0;
    text-align: center;
}

.btn-wrap.fix-b {
    position: fixed;
    bottom: 0px;
}

.btn-wrap.tpD {
    display: flex;
    justify-content: space-between;
}

.btn-wrap.tpD .btn {
    width: 46%;
}
.btn-wrap.tpD .btn img {
    width: 100%;
}

.btn-wrap.tpE {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
}

.btn-wrap.tpF {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 0;
    width: 100%;
}
.btn-wrap.tpF .btn {
    width: 100%;
}

.btn, .tag {
    display: inline-block;
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
    font-family: 'Pretendard', sans-serif;
    line-height: inherit;
}

/* #tiny */
.btn.tiny, .tag.tiny {
    font-weight: 500 !important;
    padding: 6px 10px;
    font-size: 12px !important;
    border-radius: 5px;
}

.btn.tiny.radius, .tag.tiny.radius {
    border-radius: 24px;
}

/* #sml */
.btn.sml, .tag.sml {
    padding: 8px 14px;
    font-size: 13px;
}

.btn.sml.radius, .tag.sml.radius {
    border-radius: 5px;
}

/* #sml-fix */
.btn.sml-fix, .tag.sml-fix {
    width: 74px;
    padding: 8px 14px;
    font-size: 13px;
}

.btn.sml-fix.radius, .tag.sml-fix.radius {
    border-radius: 24px;
}


/* #mid */
.btn.mid, .tag.mid {
    padding: 12px 20px;
    font-size: 14px;
}

.btn.mid.radius, .tag.mid.radius {
    border-radius: 6px;
}

.btn.mid-full {
    width: 100%;
    padding: 12px 20px;
    font-size: 14px;
    text-align: center;
}
.btn.mid-full.radius {
    border-radius: 36px;
}

/* #big */
.btn.big, .tag.big {
    font-weight: 600;
    padding: 18px 30px;
    border-radius: 6px;
    font-size: 15px;
}
.btn.big-full, .tag.big-full {
    width: 100%;
    font-weight: 600;
    padding: 24px 30px;
    border-radius: 6px;
    font-size: 17px;
}
.btn.big-full.radius, .tag.big-full.radius {
    border-radius: 30px;
}

.btn.big.radius, .tag.big.radius {
    border-radius: 32px;
}

/* #big-fix */
.btn.big-fix, .tag.big-fix {
    width: 140px;
    padding: 14px 20px;
    font-size: 15px;
}

.btn.big-fix.radius, .tag.big-fix.radius {
    border-radius: 32px;
}


/* #color */
.btn.black, .tag.black {
    background-color: #222;
    color: #fff;
}

.btn.blue, .tag.blue {
    border: 1px solid #7478E9;
    background-color: #7478E9;
    color: #fff;
}

.btn.bor-blue, .tag.bor-blue {
    background-color: #fff;
    border: 1px solid #7478E9;
    color: #7478E9;
}

.btn.bor-blue:hover, .tag.bor-blue:hover {
    background-color: #7478E9;
    border: 1px solid #7478E9;
    color: #fff;
}

.btn.green, .tag.green {
    background-color: #349249;
    color: #fff;
}

.btn.yellow, .tag.yellow {
    background-color: #f6bf0a;
    color: #fff;
}

.btn.red, .tag.red {
    background-color: #dd001e;
    color: #fff;
}

.btn.l-gray, .tag.l-gray {
    background-color: #9fa9b7;
    color: #fff;
}

/* #board */
.border-tpA {
    
}

.board .tit {
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 15px;
    color: #222;
}
.tbl-wrap.tpA {
    padding: 12px;
    background-color: #fff;
    border-radius: 8px;
}
.tbl-wrap .ns {
    margin-left: 2px;
    color: #dd001e;
}

/* #tbl-col-tpA */
.tbl-col-tpA {
    width: 100%;
    table-layout: fixed;
}

.tbl-col-tpA tbody tr:nth-child(odd) td {
    background-color: #f7f7f7;
}

.tbl-col-tpA thead th {
    padding: 18px 12px;
    /* background-color: #eff6ff; */
    /* border-top: 1px solid #2f6bbd; */
    /* border-bottom: 1px solid #ebebeb; */
    font-weight: 500;
    font-size: 16px;
    color: #222;
    text-align: left;
}

.tbl-col-tpA tbody th {
    padding: 12px 12px;
    background-color: #eff6ff;
    /* border-bottom: 1px solid #ebebeb; */
    font-size: 15px;
    color: #222;
    line-height: 22px;
}

.tbl-col-tpA tbody td {
    padding: 12px 12px;
    background-color: #fff;
    /* border-bottom: 1px solid #e1e1e1; */
    font-size: 15px;
    color: #222;
    line-height: 22px;
}

.tbl-col-tpA.tbl-line tbody td {
    border-left: 1px solid #ebebeb;
}

.tbl-col-tpA.tbl-line tbody td:first-child {
    border-left: 0px;
}

.tbl-col-tpA tbody td a {
    font-size: 15px;
    color: #222;
}
.tbl-col-tpA.pd-tpA td,
.tbl-col-tpA.pd-tpA th {
    padding: 18px 12px;
}

.tbl-col-tpA.al-c th,
.tbl-col-tpA.al-c td {
    text-align: center;
}

/* #tbl-row-tpA */
.tbl-row-tpA {
    width: 100%;
    table-layout: fixed;
    border-top: 1px solid #ebebeb;
    border-left: 1px solid #ebebeb;
}
.tbl-row-tpA input[type=text],
.tbl-row-tpA input[type=password],
.tbl-row-tpA input[type=number] {
    position: relative;
    width: 100%;
    height: 40px;
    padding: 0 14px;
    border: 1px solid #ebebeb;
    border-radius: 6px;
    font-weight: 400;
    font-size: 13px;
    color: #333333;
    line-height: 24px;
    letter-spacing: -0.02em;
}
.tbl-row-tpA input[type=text]::placeholder,
.tbl-row-tpA input[type=password]::placeholder,
.tbl-row-tpA input[type=number]::placeholder {
    color: #aaaaaa;
}

.tbl-row-tpA input.readonly,
.tbl-row-tpA select.disabled {
    background-color: #f7f7f7;
    color: #565656;
    opacity: 0.8;
}
.tbl-row-tpA textarea {
    position: relative;
    resize: none;
    width: 100%;
    padding: 14px 14px;
    border: 1px solid #ebebeb;
    border-radius: 6px;
    font-family: 'Pretendard-Regular';
    font-size: 13px;
    color: #333333;
    line-height: 24px;
    letter-spacing: -0.02em;
}
.tbl-row-tpA textarea::placeholder {
    color: #787878;
}
.tbl-row-tpA select {
    position: relative;
    width: 100%;
    height: 40px;
    padding: 0 14px;
    appearance: none;
    background: #fff url('/img/ico_select.svg') no-repeat calc(100% - 16px) center;
    background-size: 8px 12px;
    border: 1px solid #ebebeb;
    border-radius: 6px;
    font-weight: 400;
    font-size: 13px;
    color: #333333;
    line-height: 24px;
    letter-spacing: -0.02em;
}

.tbl-row-tpA thead th, .tbl-row-tpA tbody th {
    padding: 6px 20px;
    background-color: #f5f5ff;
    border-bottom: 1px solid #ebebeb;
    border-right: 1px solid #ebebeb;
    font-weight: 600;
    font-size: 14px;
    color: #222;
    text-align: left;
    line-height: 22px;
}

.tbl-row-tpA thead td, .tbl-row-tpA tbody td {
    padding: 8px 12px;
    background-color: #fff;
    border-bottom: 1px solid #ebebeb;
    border-right: 1px solid #ebebeb;
    text-align: left;
    font-size: 15px;
    line-height: 22px;
}

.tbl-row-tpA.pd-tpA tbody th,
.tbl-row-tpA.pd-tpA tbody td  {
    padding: 12px 12px;
}

.tbl-row-tpA.al-c th, .tbl-row-tpA.al-c td {
    text-align: center;
}

.tbl-row-tpA tfoot td {
    padding: 24px 8px;
    background-color: rgba(15, 75, 158, 0.05);
    border-top: 1px solid #0f4b9e;
    font-weight: 700;
    font-size: 17px;
    color: #0f4b9e;
    text-align: center;
}

.tbl-row-tpA .cont {
    margin-top: 4px;
    font-size: 13px;
    color: #565656;
}

/* #.tbl-row-tpB */
.tbl-row-tpB {
    width: 100%;
    table-layout: fixed;
    border-top: 1px solid #ebebeb;
    border-left: 1px solid #ebebeb;
}
.tbl-row-tpB tbody th {
    font-weight: 600;
    background-color: #f5f5ff;
    
}
.tbl-row-tpB tbody th, .tbl-row-tpB tbody td {
    padding: 16px 8px;
    border-bottom: 1px solid #ebebeb;
    border-right: 1px solid #ebebeb;
    font-size: 14px;
    color: #333;
    line-height: 18px;
}



/* modal */
.modal-wrap {
    display: none;
    align-items: center;
    justify-content: center;
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    padding: 40px;
    z-index: 98;
}

.modal-wrap.on {
    display: flex;
}

.dimm {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 97;
}

.modal-wrap .btn-close {
    display: block;
    position: absolute;
    top: 32px;
    right: 22px;
    width: 26px;
    height: 26px;
    background: url('/img/bt_close.png') no-repeat;
}

.modal-wrap .modal-inner {
    overflow-y: auto;
    position: relative;
    width: 1200px;
    height: 100%;
    background-color: #fff;
    z-index: 99;
}

.modal-header {
    padding: 40px 30px 24px 30px;
    border-bottom: 1px solid #e1e1e1;
}

.modal-header h2 {
    font-weight: 700;
    font-size: 24px;
    color: #222;
    text-align: center;
}

.modal-body {
    padding: 30px;
}

/* .gnb_2dul {
    display: none;
}

#gnb .gnb_wrap:hover:after {
    display: none;
} */

.textarea {
    width: 100%;
    border: 1px solid #d0d3db;
    background: #fff;
    font-family: 'Pretendard';
    color: #222;
    border-radius: 3px;
    padding: 5px;
}


.textarea-wrap {
    position: relative;
}

.textarea-wrap .textCont-wrap {
    position: absolute;
    right: 12px;
    bottom: 6px;
    color: #999;
}

.textarea-wrap .textCont-wrap .text-count {
    color: #555;
}

/* graph-tpA */
.graph-tpA {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.graph-tpA > li {
    position: relative;
    width: 14.2857%;
}

.graph-tpA > li::after {
    position: absolute;
    left: -11px;
    top: 50%;
    content: '';
    width: 16px;
    height: 16px;
    margin-top: -22px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    transform: rotate(45deg);
}

.graph-tpA > li:first-child:after {
    display: none;
}

.graph-tpA > li .graph-area {
    padding: 12px 12px;
    font-size: 700;
    font-size: 15px;
    color: #fff;
    text-align: center;
}

.graph-tpA > li.step-1 .graph-area {
    background-color: #ed7d31;
}
.graph-tpA > li.step-2 .graph-area {
    background-color: #de7a47;
}
.graph-tpA > li.step-3 .graph-area {
    background-color: #d17b5c;
}
.graph-tpA > li.step-4 .graph-area {
    background-color: #c48170;
}
.graph-tpA > li.step-5 .graph-area {
    background-color: #b98a82;
}
.graph-tpA > li.step-6 .graph-area {
    background-color: #ae9694;
}
.graph-tpA > li.step-7 .graph-area {
    background-color: #a5a5a5;
}

.graph-tpA > li .txt-area {
    margin-top: 8px;
    font-weight: 600;
    font-size: 14px;
    color: #222;
    text-align: center;
}


/* graph-tpB */
.graph-tpB {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid #e1e1e1;
    background-color: #fff;
    padding: 22px 0;
}

.graph-tpB > li {
    position: relative;
    width: 21%;
    margin: 0 2%;
}

.graph-tpB > li::after {
    position: absolute;
    left: -35px;
    top: 22px;
    content: '';
    width: 16px;
    height: 16px;
    border-top: 3px solid #0f4b9e;
    border-right: 3px solid #0f4b9e;
    transform: rotate(45deg);
}

.graph-tpB > li:first-child:after  {
    display: none;
}

.graph-tpB > li .tit-area {
    padding: 18px 12px;
    background-color: #0f4b9e;
    font-size: 15px;
    color: #fff;
    text-align: center;
}

.graph-tpB > li .cont-area {
    height: 140px;
}

.graph-tpB > li .foot-area {
    padding: 8px;
    background-color: rgba(15, 75, 158, 0.05);
    border-top: 1px solid #0f4b9e;
    font-weight: 700;
    font-size: 15px;
    color: #0f4b9e;
    text-align: center;
}


.quickmenu-wrap {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 99;
}
.quickmenu-wrap .quickmenu-inner {
    overflow: hidden;
    width: 88px;
    border: 3px solid #7478E9;
    border-radius: 100px;
    box-shadow: 0px 0px 12px rgba(0,0,0,0.3);
}
.quickmenu-wrap .quickmenu-header {
    position: relative;
    /* width: 92px; */
    height: 118px;
    padding-top: 64px;
    background-color: #7478E9;
}
.quickmenu-wrap .quickmenu-header::after {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    top: 32px;
    transform: translateX(-50%);
    width: 22px;
    height: 22px;
    background: url('/img/ico_quickmenu.svg') no-repeat;
    background-size: 22px 22px;
}
.quickmenu-wrap .quickmenu-header .tit {
    font-weight: 700;
    font-size: 15px;
    color: #fff;
    line-height: 20px;
    text-align: center;
}
.quickmenu-wrap .quickmenu-body {
    background-color: #fff;
}

/* #list */
.ls-box {
    display: flex;
    align-items: center;
    gap: 24px;
    /* flex-wrap: wrap; */
}
.ls-box > li {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16.66666%;
    padding: 30px 6px;
    background: linear-gradient(to right, #4E73E4 0%, #553D84 100%);
    border-radius: 4px;
    font-size: 15px;
    color: #fff;
    text-align: center;
}
.ls-box > li:after {
    content: '';
    display: block;
    position: absolute;
    left: -17px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 17px;
    background: url('/img/ico_step.svg') no-repeat;
    background-size: 12px 17px;
}
.ls-box > li:first-child:after {
    display: none;
}

.ls-box.row-1 > li {
    width: 100%;
}
.ls-box.row-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.ls-box.row-3 > li {
    width: 33.33333%;
}
.ls-box.row-7 > li {
    width: 14.2857%;
}



/* #ls-box-tpA */
.ls-box-tpA {
    display: grid;
    gap: 12px;
}
.ls-box-tpA > li {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 20px 28px;
    background: linear-gradient(to right, #4E73E4 0%, #553D84 100%);
    border-radius: 4px;
    font-size: 15px;
    color: #fff;
    text-align: center;
}
.ls-box-tpA.row-3 {
    grid-template-columns: repeat(3, 1fr);
}
.ls-box-tpA > li .step {
    display: flex;
    gap: 12px;
}
.ls-box-tpA > li .step .cnt-area {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 32px;
    border: 1px solid #ebebeb;
    border-radius: 4px;
    font-weight: 400;
    font-size: 15px;
    color: #fff;
}
.ls-box-tpA > li .step .info-area {
    
    width: calc(100% - 46px);
    text-align: left;
}
.ls-box-tpA > li .step .info-area .tit {
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 16px;
    color: #fff;
}
.ls-box-tpA > li .step .info-area .tit-sub {
    font-size: 14px;
    color: #fff;
}


.ls-quickmenu {

}
.ls-quickmenu > li {
    border-top: 1px solid #7478E9;
}
.ls-quickmenu > li:first-child {
    border-top: 0px;
}
.ls-quickmenu > li > a {
    padding: 22px 4px;
    font-weight: 700;
    font-size: 15px;
    color: #7478E9;
    line-height: 20px;
    text-align: center;
}
.ls-quickmenu > li:last-child > a {
    padding-bottom: 34px;
}

.list-wrap {
    margin-top: 20px;
}
.list-wrap .list-header {
    text-align: center;
}
.list-wrap .list-header h2 {
    margin-bottom: 36px;
    font-weight: 600;
    font-size: 37px;
    color: #333;
}
.list-wrap .list-body {
    padding: 50px 0;
}

.custom-switch {
    cursor: pointer;
    display: inline-block;
    width: 54px;
}
  
.custom-switch input[type="checkbox"] {
    display: none; /* 기본 체크박스 숨김 */
}
  
.switch-img {
    width: 54px !important;
  transition: 0.3s ease;
  }

/* #swiper */
.swiper-pagination.tpA .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: none;
    /* border: 1px solid rgba(255,255,255,0.8); */
    opacity: 1;
}
.swiper-pagination.tpA .swiper-pagination-bullet-active {
    background-color: #a9acfd;
    border-color: #a9acfd;
}

.swiper-pagination-fraction, 
.swiper-pagination-custom, 
.swiper-horizontal > 
.swiper-pagination-bullets, 
.swiper-pagination-bullets.swiper-pagination-horizontal {
    bottom: 30px;
}


/* #lp-wrap */
.lp-dimm {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
    z-index: 98;
}
.lp-wrap {
    position: fixed;
    left: 0px;
    top: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    z-index: 99;
    visibility: hidden;
}
.lp-wrap .lp-inner {
    position: relative;
    width: 800px;
    height: auto;
    background-color: #fff;
    border-radius: 24px;
    box-shadow: 0px 0px 12px rgba(0,0,0,0.12);
    z-index: 99;
}
.lp-wrap .lp-inner.tpA {
    width: 600px;
}
.lp-wrap .lp-inner .lp-header {
    position: relative;
    width: 100%;
    height: 48px;
}
.lp-wrap .lp-inner .btn-close {
    position: absolute;
    right: 16px;
    top: 16px;
    width: 24px;
    height: 24px;
    background: url('/img/btn_close.svg') center center no-repeat;
    background-size: 18px 18px;
    text-indent: -99999px;
}
#bo_v_top {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    left: 0px;
    bottom: 0px;
    width: 100%;
    /* height: 40px; */
    padding: 16px 24px;
    background-color: #f7f7f7;
    border-top: 1px solid #ebebeb;
    z-index: 99;
}
.bo_v_com {
    display: flex;
    gap: 6px;
    justify-content: center;
}
#bo_v_con {
    text-align: center;
}

#bo_v_atc_title {
    display: none;
}