@charset "utf-8";


/*서브레이아웃 변경*/



.font_blue{color: #2850FA;}
.font_blue2{color: #2850FA;}
.font_red2{color: #ff0b40;}
.font_navy{color: #283e80;}
.bg-white{background: #fff;}

/*BASA란?*/



.caution{position: relative; padding: 0 0 0 23px; font-weight: var(--fwr); color: #222;}
.caution:before{content: ""; position: absolute; top: 2px; left: 0; display: block; width: 18px; height: 18px; background: url("/src/img/2024/contents/ico_caution.svg") no-repeat;}
.caution.blue:before{background-image: url('/src/img/2024/contents/ico_caution_blue.svg');}
.caution .fc_red{color: #f24949;}
.caution .fc_blue{color: #3b79ed;}











/* 컴포넌트 */

/* 탭메뉴 (기본형) */
.tab{display: flex; justify-content: space-between; border-radius: 7px; background-color: #f7f7f7; overflow: hidden;}
.tab li{flex: 1;}
.tab li a{position: relative; display: block; box-sizing: border-box; padding: 1rem; font-size: 1.2rem; font-weight: 500; text-align: center; background: #ddd;}
.tab li a:hover,
.tab li a:focus{background-color: #eee;}
.tab li a.on{color: #fff; background-color: #222;}
.tab li a.on:before{content: ""; position: absolute; top: 100%; left: 50%; margin: -1px 0 0; transform: translateX(-50%); display: block; width: 0; height: 0; border-style: solid; border-width: 7px 7px 0px 7px; border-color: #222 transparent transparent transparent;}
.tab_cont{box-sizing: border-box; padding: 1rem 0;}
.tab_cont > div{display: none;}
.tab_cont > div.on{display: block;}
.tab_cont > div.always{display: block;}


/* 아코디언 메뉴 */
.accordion{box-sizing: border-box; border-top: 2px solid #222;}
.accordion dl{border-bottom: 1px solid #dbdbdb;}
.accordion dl dt{position: relative;}
.accordion dl dt.over{background-color: rgba(0,0,0,0.075);}
.accordion dl dt button{display: block; width: 100%; line-height: inherit; padding: 1rem 3rem 1rem 1rem; font-size: inherit; text-align: left;}
.accordion dl dt button:before{content: ""; position: absolute; top: 24px; right: 1.2rem; width: 10px; height: 10px; box-sizing: border-box; border-top: 2px solid #000; border-left: 2px solid #000; transform: rotate(45deg); transition: transform 0.1s;}
.accordion dl.on dt button:before{transform: rotate(225deg);}
.accordion dl dt button:focus{outline: none;}
.accordion dl dd{box-sizing: border-box; padding: 1rem; border-top: 1px dashed #bbb; background-color: #f5f5f5;}
.accordion dl dd p{}


/* 아코디언 메뉴 : n-accordion */
.n-accordion{display: flex; flex-direction: column; gap: 12px 0; box-sizing: border-box; letter-spacing: -0.02em; color: #222;}
.n-accordion > dl{border-radius: 12px; border: 1px solid #256ef4; background-color: #fff; overflow: hidden;}
.n-accordion > dl > dt{position: relative;}
.n-accordion > dl > dt.over{background-color: rgba(0,0,0,0.075);}
.n-accordion > dl > dt button{position: relative; padding: 0 0 0 117px; width: 100%; line-height: inherit; font-size: inherit; text-align: left; cursor: pointer;}
.n-accordion > dl > dt button[disabled]{cursor: initial;}
.n-accordion > dl > dt button:before{content: ""; position: absolute; top: 20px; right: 31px; width: 12px; height: 12px; box-sizing: border-box; border-top: 2px solid #33363d; border-left: 2px solid #33363d; transform: rotate(225deg); transition: transform 0.1s;}
.n-accordion > dl.on > dt button:before{transform: rotate(45deg); margin: 5px 0 0;}
.n-accordion > dl > dt button:focus{outline: none;}
.n-accordion > dl > dt button .bullet{position: absolute;  top: 0; left: 0; bottom: 0; align-content: center; width: 117px; text-align: center; font-size: 18px; font-weight: var(--fwr); background-color: #283e80; color: #fff;}
.n-accordion > dl > dt button .bullet .num{margin: 0 0 0 6px; font-size: 0.889em; font-weight: var(--fwsb); letter-spacing: -0.05em;}
.n-accordion > dl > dt button .title{display: block; width: 100%; padding: 16px 50px 16px 20px; line-height: 1.3; font-size: 19px; font-weight: var(--fwsb); background-color: #ecf2fe;}
.n-accordion dl dd{height: 0; /* overflow: hidden; */ opacity: 0; visibility: hidden; pointer-events: none;}
.n-accordion dl.on dd{height: auto; opacity: 1; visibility: visible; pointer-events: initial;}
.n-accordion > dl > dd .cont{padding: 40px 38px; font-size: 17px;}
.n-accordion > dl > dd .cont > p{}
.n-accordion > dl > dd .cont .btn-line{margin: 25px 0 0;}
/* .n-accordion > dl > dd .cont .frameWrap{background-color: #ddd; min-height: 1000px; max-width: 100%; min-width: 100%;} */
.step-accordion .diag-con .diag-item .frameWrap{min-height: 500px; max-width: 100%; min-width: 100%;}
.step-accordion .diag-con .diag-item .frameWrap iframe{border: none; max-width: 100%; min-width: 380px; overflow-x: auto;}
@media (width <= 1280px){
    .n-accordion > dl > dt button{padding: 0 0 0 100px;}
    .n-accordion > dl > dt button:before{width: 8px; height: 8px; top: 15px; right: 18px;}
    .n-accordion > dl.on > dt button:before{margin: 3px 0 0;}
    .n-accordion > dl > dt button .bullet{font-size: 16px; width: 100px;}
    .n-accordion > dl > dt button .bullet .num{margin: 0;}
    .n-accordion > dl > dt button .title{font-size: 17px; padding: 10px 35px 10px 10px;}
    .n-accordion > dl > dd .cont{padding: 20px; font-size: 16px;}
}
@media (width <= 640px){
    .n-accordion > dl > dt button{padding: 0 0 0 80px;}
    .n-accordion > dl > dt button .bullet{width: 80px;}
    .n-accordion > dl > dt button .title{font-size: 16px;}
}


.acc-form{max-width: 800px; margin: 0 auto;}
.acc-form .acc-form-row{display: flex; flex-wrap: wrap; padding: 15px 0 15px 10px;}
.acc-form .acc-form-row + .acc-form-row{border-top: 1px solid #ebeaea;}
.acc-form .acc-form-row:first-child{padding-top: 0;}
.acc-form .acc-form-row:last-child{padding-bottom: 0;}
.acc-form .acc-form-row.toggle{display: none;}
.acc-form .acc-form-row.toggle.show{display: flex;}
.acc-form .acc-form-row > dt{flex: 0 0 auto; width: 380px;}
.acc-form .acc-form-row > dt label,
.acc-form .acc-form-row > dt span{position: relative; display: inline-block; line-height: 1.3; padding: 0 0 0 11px; margin: 10px 0 0; font-weight: var(--fwsb);}
.acc-form .acc-form-row > dt label:before,
.acc-form .acc-form-row > dt span:before{content: ""; position: absolute; top: 7px; left: 0; width: 3px; height: 3px; border-radius: 50%; background: #000;}
.acc-form .acc-form-row > dd{flex: 1; min-width: 0; max-width: 250px; position: relative; padding: 0 0 0 28px; padding: 0;}
.acc-form .acc-form-row > dd.hasIco{}
.acc-form .acc-form-row > dd.hasIco:before{content: ""; position: absolute; top: 10px; left: 0; width: 18px; height: auto; aspect-ratio: 1 / 1; background: url("/src/img/2024/contents/ico-caution-black.svg"); display: none;}
.acc-form .acc-form-row .ip-wrap{display: flex; flex-wrap: wrap; width: 100%;}
.acc-form .acc-form-row .ip-wrap input{flex: 1; min-width: 0; height: 40px; border: 1px solid #d1d1d1; border-radius: 8px; color: #686868; font-weight: var(--fwr); letter-spacing: normal; padding: 0 10px; font-size: 14px;}
.acc-form .acc-form-row .ip-wrap input[type="number"]{-moz-appearance: textfield;}
.acc-form .acc-form-row .ip-wrap input[type="number"]::-webkit-outer-spin-button,
.acc-form .acc-form-row .ip-wrap input[type="number"]::-webkit-inner-spin-button{-webkit-appearance: none; margin: 0;}
.acc-form .acc-form-row .ip-wrap input#business_number_1{}
.acc-form .acc-form-row .ip-wrap input#business_number_2{}
.acc-form .acc-form-row .ip-wrap input#business_number_3{}
.acc-form .acc-form-row .ip-wrap input[maxlength="1"]{flex: 0 0 auto; width: 30px;}
.acc-form .acc-form-row .ip-wrap input#regist_number_1_2{max-width: 105px;}
.acc-form .acc-form-row .ip-wrap .ip-seperator{flex: 0 0 auto; min-width: 0; padding: 0 6px; align-content: center; color: #74839b;}
.acc-form .acc-form-row .ip-wrap .ip-seperator.text{color: #222; letter-spacing: 0.1em;}
.acc-form .acc-form-row .bt-wrap{display: flex; flex-wrap: wrap; gap: 10px;}
@media (width <= 860px){
    .acc-form{max-width: none; width: 100%; padding: 0;}
    .acc-form .acc-form-row{padding: 15px 0 15px 0;}
    .acc-form .acc-form-row > dt{width: 315px;}
    .acc-form .acc-form-row > dd{margin: 0 0 0 auto;}
    .acc-form .acc-form-row .ip-wrap .ip-seperator{padding: 0 2px;}
}
@media (width <= 640px){
    .acc-form .acc-form-row{display: block; padding: 10px 0;}
    .acc-form .acc-form-row.toggle.show{display: block;}
    .acc-form .acc-form-row > dt{width: 100%; margin: 0 0 7px;}
    .acc-form .acc-form-row > dt label,
    .acc-form .acc-form-row > dt span{font-size: 14px; padding: 0 0 0 10px; margin: 0;}
    .acc-form .acc-form-row > dd{flex: 0 0 auto; width: 100%; max-width: none; margin: 0;}
    .acc-form .acc-form-row > dd.hasIco:before{top: 15px;}
    .acc-form .acc-form-row .ip-wrap .ip-seperator{padding: 0 2px;}
    .acc-form .acc-form-row .ip-wrap input#regist_number_1_2{flex: 0 0 auto; width: calc( (100% - 13px) / 2 ); max-width: none;}
}

.acc-info{display: flex; flex-wrap: wrap; justify-content: center; padding: 0; margin: 30px 0 0; font-size: 16px; font-weight: var(--fwsb); color: #212529;}
.acc-info p{}
.acc-info p.hasIco{position: relative; padding: 0 0 0 26px;}
.acc-info p.hasIco:before{content: ""; position: absolute; top: 2px; left: 0; width: 18px; height: auto; aspect-ratio: 1 / 1; background: url("/src/img/2024/contents/ico-caution-black.svg");}
@media (width <= 640px){
    .acc-info{padding: 20px 0 0; margin: 20px 0 0;}
}


/* ************************ 레이어팝업 ************************ */
.layer{visibility: hidden; opacity: 0; position: fixed; width: 852px; max-width: 94%; max-height: 94vh; z-index: 1001; top: 40%; /* left: 50%; */ /* transform: translate(-50%, -50%); */ border-radius: 0.938rem; overflow: hidden; background: #fff; box-shadow: 0px 5px 30px 0px rgba(0,0,0,0.15); overflow-y: auto;}
.layer.on{visibility: visible; opacity: 1; top: 50%; transition: all 0.25s ease;}
.layer.c_layer.msg_layer{z-index: 2000;}
.layer .l_head{position: relative; padding: 1.34rem 2.25rem; padding-right: 3.5rem; color: #fff; background-color: #222; z-index: 1002;}
.layer.c1 .l_head{background-color: var(--c1);}
.layer.c2 .l_head{background-color: var(--c2);}
.layer.c3 .l_head{background-color: var(--c3);}
.layer.c4 .l_head{background-color: var(--c4);}
.layer.c5 .l_head{background-color: var(--c5);}
.layer.c6 .l_head{background-color: var(--c6);}
.layer.c7 .l_head{background-color: var(--c7);}
.layer.c8 .l_head{background-color: var(--c8);}
.layer.c9 .l_head{background-color: var(--c9);}
.layer.c10 .l_head{background-color: var(--c10);}
.layer.c11 .l_head{background-color: var(--c11);}
.layer.c12 .l_head{background-color: var(--c12);}
.layer.c13 .l_head{background-color: var(--c13);}
.layer.c14 .l_head{background-color: var(--c14);}
.layer.c15 .l_head{background-color: var(--c15);}

.layer .l_head .cate{display: flex; gap: 0.8em; padding: 0 0 0.5rem;}
.layer .l_head .cate span{display: flex; flex-wrap: wrap; align-items: center; gap: 1em;}
.layer .l_head .cate span:not(:first-child):before{content: ""; display: inline-block; width: 8px; height: 8px; border-top: 1px solid #fff; border-right: 1px solid #fff; transform: rotate(45deg);}
.layer .l_head h6{font-size: 1.125rem; font-weight: 700; line-height: 130%;}
.layer .l_head .layer_closer{position: static; top: 1.25rem; right: 1.25rem; display: block; width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff; font-size: 0;}
.layer .l_head .layer_closer:before,
.layer .l_head .layer_closer:after{content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(45deg); display: block; width: 2px; height: 50%; background: #fff;}
.layer .l_head .layer_closer:after{transform: translate(-50%, -50%) rotate(-45deg);}

.layer .l_body{padding: 1.85rem 2.25rem; background: #ffffff; z-index: 1002;}
.layer .l_body .con_wrap{display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, minmax(50px, auto)); gap: 20px;}
.layer .l_body .con_wrap .con{border: 2px solid #f1f1f1; border-radius: 0.938rem; overflow: hidden; padding: 1rem;}
.layer .l_body .con_wrap .con:nth-child(1){grid-column: 1 / 3; grid-row: 1 / -1;}

.layer .l_body .con_wrap.grid2{}
.layer .l_body .con_wrap.grid2 .con:nth-child(2){grid-column: 3 / 5; grid-row: 1 / -1;}

.layer .l_body .con_wrap.grid3{grid-template-columns: repeat(3, 1fr);}
.layer .l_body .con_wrap.grid3 .con:nth-child(1){grid-column: 1 / 2;}
.layer .l_body .con_wrap.grid3 .con:nth-child(2){grid-row: 1 / -1;}
.layer .l_body .con_wrap.grid3 .con:nth-child(3){grid-row: 1 / -1;}

.layer .l_body .con_wrap.grid6{grid-template-columns: repeat(3, 1fr);}
.layer .l_body .con_wrap.grid6 .con:nth-child(1){grid-column: 1 / 2; grid-row: 1 / 2;}

.layer .l_body .con_wrap .con .txt{}
.layer .l_body .con_wrap .con .txt .tit{font-weight: 600;}
.layer .l_body .con_wrap .con .txt .des{line-height: 140%; font-size: 0.95em;}

.layer .l_body .info{padding: 2.1rem 0 0; line-height: 120%; color: #666;}
.layer .l_body .info .c1{color: var(--c1);}
.layer .l_body .info .c2{color: var(--c2);}
.layer .l_body .info .c3{color: var(--c3);}
.layer .l_body .info .c4{color: var(--c4);}
.layer .l_body .info .c5{color: var(--c5);}
.layer .l_body .info .c6{color: var(--c6);}
.layer .l_body .info .c7{color: var(--c6);}
.layer .l_body .info .c8{color: var(--c8);}
.layer .l_body .info .c9{color: var(--c9);}
.layer .l_body .info .c10{color: var(--c10);}
.layer .l_body .info .c11{color: var(--c11);}
.layer .l_body .info .c12{color: var(--c12);}
.layer .l_body .info .c13{color: var(--c13);}
.layer .l_body .info .c14{color: var(--c14);}
.layer .l_body .info .c15{color: var(--c15);}

.layer .l_purchase{color: #222;}
.layer .l_purchase > .item{}
.layer .l_purchase > .item .title{background-color: #eaf1fb; border-radius: 5px; font-weight: var(--fwsb); padding: 6px 12px;}
.layer .l_purchase > .item .con{padding: 20px 15px 40px;}
.layer .l_purchase > .item .con .product{font-weight: var(--fwsb);}
.layer .l_purchase > .item .con .product .name{font-size: 22px; color: #283e80;}
.layer .l_purchase > .item .con .product .des{}
.layer .l_purchase > .item .con .purchase_info{display: flex; flex-direction: column; gap: 5px; font-weight: var(--fwsb); padding: 20px 0 0;}
.layer .l_purchase > .item .con .purchase_info dl{display: flex; gap: 12px;}
.layer .l_purchase > .item .con .purchase_info dt{width: 88px; color: #fff; background-color: #283e80; border-radius: 10px; line-height: 30px; padding: 0 10px; text-align: center; font-weight: var(--fwm);}
.layer .l_purchase > .item .con .purchase_info dd{padding: 4px 0 0;}

.layer .l_purchase > .item .con .pay_info{display: flex; flex-direction: column; gap: 8px;}
.layer .l_purchase > .item .con .pay_info > dl{display: flex; flex-wrap: wrap;}
.layer .l_purchase > .item .con .pay_info > dl dt{flex: 0 0 auto; width: 50px; line-height: 40px; font-size: 14px; font-weight: var(--fwsb); color: #74839b;}
.layer .l_purchase > .item .con .pay_info > dl dt label{}
.layer .l_purchase > .item .con .pay_info > dl dd{flex: 1;}
.layer .l_purchase > .item .con .pay_info > dl dd input{}

.layer .l_purchase > .item .con .pay_method{}
.layer .l_purchase > .item .con .pay_method .selected{display: inline-block; color: #fff; border-radius: 3px; background-color: #2d51bf; font-weight: var(--fwsb); font-size: 18px; line-height: 42px; padding: 0 10px;}
.layer .l_purchase > .item .con .pay_method .agreement{display: flex; flex-direction: column; gap: 9px; padding: 15px 0 0;}
.layer .l_purchase > .item .con .pay_method .agreement dl{}
.layer .l_purchase > .item .con .pay_method .agreement dl .input-radio{}
.layer .l_purchase > .item .con .pay_method .agreement dl .input-radio + label{align-items: flex-start;}
.layer .l_purchase > .item .con .pay_method .agreement dl .input-radio + label:before{margin-top: -2px;}
.layer .l_purchase > .btn_wrap{display: flex; justify-content: center; gap: 5px;}
.layer .l_purchase > .btn_wrap button{color: #fff; background-color: #283e80; border-radius: 7px; text-align: center; padding: 0 20px; line-height: 40px;}
.layer .l_purchase > .btn_wrap button.gray{background-color: #f6f6f6; color: #2b384f; box-shadow: inset 0 0 0 1px #ececec;}

.layer .l_foot{background: #ffffff; z-index: 1002;}

.layer .table-default{font-size: 14px;}
.layer.c_layer.w440{width: 440px;}
.layer.c_layer.w680{width: 680px;}
.layer.c_layer.w780{width: 780px;}
.layer.c_layer.w900{width: 900px;}
.layer.c_layer.w1100{width: 1100px;}

.mask{visibility: hidden; opacity: 0; display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.8);}
.mask.on{z-index: 1001; visibility: visible; opacity: 1; transition: 0.3s ease; filter: blur(1)}
@media (max-width: 1024px){
    .layer .l_head{padding: 1rem 1.5rem; padding-right: 3.5rem;}
    .layer .l_head .cate span{font-size: 0.9rem;}
    .layer .l_head h6{font-size: 1rem;}

    .layer .l_body{padding: 1.5rem 1.5rem;}
    .layer .l_foot{padding: 1rem 1.5rem;}
}
@media (max-width: 860px){
    .layer .l_body .con_wrap{gap: 0.5rem;}
}
@media (max-width: 640px){
    .layer{max-height: 80vh;}

    .layer .l_head{padding: 1rem 1rem; padding-right: 3.5rem;}
    .layer .l_head .cate{gap: 0.2em;}
    .layer .l_head .cate span{gap:0.4em;}
    .layer .l_head .cate span:not(:first-child):before{width: 4px; height: 4px;}
    .layer .l_body{padding: 1.5rem 1rem; font-size: 14px;}
    .layer .l_body .info{padding: 1rem 0 0;}
    .layer .l_foot{padding: 1rem 1rem;}
    .layer .l_foot > p{font-size: 14px;}
    .layer .l_foot > p .lc1{display: block; line-height: 130%;}
    .layer .l_foot > span{font-size: 12px;}

    .layer .l_head .layer_closer{right: 1rem; top: 1rem;}
}

.l_columns{
    --l_columns_gap_row: 40px;
    --l_columns_gap_col: 20px;
    --l_columns_gap: 20px;

    display: flex; flex-wrap: wrap; gap: var(--l_columns_gap); font-size: 14px;

    & select{width: 100%; min-width: 120px; font-size: 14px; color: #686868; line-height: 30px; border: 1px solid #D2D8E0; border-radius: 7px; padding: 0 34px 0 10px; background-image: url("/src/img/2024/common/arr02.png"); background-repeat: no-repeat; background-position: calc(100% - 15px) center; background-size: 11px; font-weight: 400;}

    & input{display: block; width: 100%; font-size: 14px; height: 32px !important; border: 1px solid #D2D8E0 !important; border-radius: 7px !important; padding: 0 10px !important; font-weight: 400;}

    & .list-total{font-size: 12px; line-height: 1; margin: 0 0 10px;}

    & .l_divider{display: flex; flex-wrap: wrap; gap: var(--l_columns_gap);}
    & .l_divider > *{flex: 1; min-width: 0; max-width: calc( (100% - 20px) / 2 );}

    & .button-default{width: 90px; height: 30px; font-size: 14px; border-radius: 7px; border: 1px solid #5981D9; transition: 0.2s;}
    & .button-default:hover{background: #5981D9; color: #fff;}
    & .button-default.button-blue{background: #283E80; color: #fff; border-color: transparent;}
    & .button-default.button-blue:hover{border-color: #283E80; color: #283E80; background: #fff;}
    & .table-default tbody tr td:has(.button-default){position: relative;}
    & .table-default tbody tr td > p:has(.button-default){padding: 0 100px 0 0;}
    & .table-default tbody tr td .button-default{position: absolute; top: 5px; right: 10px;}

    & .grade-box{
        display: flex; flex-direction: column; height: 100%; border: 1px solid #eee;

        & .top{
            flex: 1; min-height: 0; text-align: center; align-content: center; padding: 30px 0;

            & .level{font-size: 42px; font-weight: var(--fwsb);}
            & .level sup{font-size: 0.6em; font-weight: 800; vertical-align: text-top;}
        }
        & .bot{
            margin-top: auto; display: flex; flex-wrap: wrap; padding: 5px; border-top: 1px solid #eee; background: #f6f8fb;

            & > li{flex: 1; min-width: 0; text-align: center;}
            & > li .level{display: inline-block; padding: 5px; line-height: 1.2; border-radius: 5px;}
            & > li .level1.on{color: #fff; background: var(--level01);}
            & > li .level2.on{color: #fff; background: var(--level02);}
            & > li .level3.on{color: #fff; background: var(--level03);}
            & > li .level4.on{color: #fff; background: var(--level04);}
            & > li .level5.on{color: #fff; background: var(--level05);}
        }

        &.level-none{
            position: relative;
            &:before{content: "판단유보"; position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 20px; font-weight: var(--fwb); color: #212529; background: rgba(246,246,246,0.9);}
        }
    }

    & .level1{color: var(--level01);}
    & .level2{color: var(--level02);}
    & .level3{color: var(--level03);}
    & .level4{color: var(--level04);}
    & .level5{color: var(--level05);}

    & .l_col{flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: var(--l_columns_gap_row) var(--l_columns_gap); max-height: fit-content;}

    & .l_col_sec{
        flex: 0 0 auto; width: 100%;
        &.divide2{
            flex: 1; max-width: calc( 100% - var(--l_columns_gap) / 2 ); /* flex: 0 0 auto; width: calc( 100% - var(--l_columns_gap) / 2 ); */ display: flex; flex-direction: column;

            & .l_columns_tit{flex: 0 0 auto;}
            & .l_columns_con{flex: 1; min-height: 0; min-width: 0;}
        }
        &.divide3{
            flex: 1; max-width: calc( 100% - ( var(--l_columns_gap) * 2 ) / 3 ); /* flex: 0 0 auto; width: calc( 100% - var(--l_columns_gap) / 2 ); */ display: flex; flex-direction: column;

            & .l_columns_tit{flex: 0 0 auto;}
            & .l_columns_con{flex: 1; min-height: 0; min-width: 0;}
        }

        & .l_columns_tit{position: relative; padding: 0 0 0 17px; margin: 0 0 17px; line-height: 1; letter-spacing: -0.04em; font-size: 16px; font-weight: var(--fwsb); color: var(--main);}
        & .l_columns_tit:before{content: ""; position: absolute; top: 1px; left: 0; width: 13px; height: 13px; border-radius: 50%; border: 4px solid; border-color: #5981d9 #5981d9 #283e80 #283e80; transform: rotate(-45deg);}
        & .l_columns_tit:has(select){display: flex; flex-wrap: wrap;}
        & .l_columns_tit select{margin: -16px 0 0 auto; width: auto; min-width: auto;}

        & .l_columns_con{

            & .l_col_box{border: 1px solid #eee; border-radius: 5px; padding: 20px; min-height: 150px; /* height: 100%; */}
            & .l_col_box:has(.radio){position: relative;}
            & .l_col_box.align_center{align-content: center;}
            & .l_col_box.scr_y{overflow: hidden; overflow-y: auto; height: 220px;}
            & .l_col_box.h100{height: 100%;}
            & .l_col_box .caution{color: var(--level05); margin: 10px 0 0;}
            & .l_col_box .radio {
                position: absolute; bottom: calc(100% + 7px); left: 0;

                & > ul {
                    display: flex; justify-content: flex-end; align-items: center; gap: 10px;
                    & > li {
                        & input[type="radio"] {display: none;}
                        & label {
                            display: flex; align-items: center; gap: 5px;

                            & span {
                                position: relative; display: block; width: 16px; height: 16px; border-radius: 50%; border: 1px solid #ddd;
                                &::after {content: '';position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 9px;height: 9px;background: var(--level01);border-radius: 50%;opacity: 0;}
                            }
                            & p {font-size: 14px;}
                        }
                        & input[type="radio"]:checked + label {
                            & span {
                                &::after {opacity: 1;}
                            }
                        }
                    }
                }
            }
        }
    }

    @container container-query (max-width: 800px) {
        --l_columns_gap: 10px;

        flex-direction: column;

        & .l_col{width: 100%;}
        & .l_divider{flex-direction: column;}
        & .l_divider > *{max-width: 100%;}

        & .l_col_sec.divide1_onSmall{flex: 0 0 auto; width: 100%;}
        & .l_col_sec{
            & .l_columns_con{
                & .l_col_box:has(.radio){margin: 40px 0 0;}
                & .l_col_box .radio{
                    left: auto; right: 0;
                }
            }
        }

        & .grade-box{
            & .bot{
                font-size: 12px;
                & > li{}
                & > li .level{padding: 3px 4px;}
            }
        }
    }
}

/* btn_wrap */
.sub_content .btn_wrap{display: flex; flex-wrap: wrap;}
.sub_content .btn_wrap.center{justify-content: center;}
.sub_content .btn_wrap .btn{line-height: 50px; background-color: #283e80; color: #fff; font-size: 1rem; font-weight: var(--fwm); padding: 0 20px; border-radius: 5px; min-width: 140px; text-align: center; transition: 0.25s;}
.sub_content .btn_wrap .btn:hover{background-color: #fff; box-shadow: inset 0 0 0 1px #283e80; color: #283e80;}

/* stability */
.stability{
    position: relative; width: 100%; max-width: 250px; padding: 0 0 10px; margin: 0 auto;

    & .stability_meter{width: 100%; height: auto; aspect-ratio: 226 / 113; background: url("/src/img/2024/contents/stability_meter.svg") no-repeat center; background-size: 100% auto;}
    & .stability_indi{position: absolute; bottom: 10px; left: 50%; width: 2px; height: 2px; border-radius: 50%; background: transparent; transform: translateX(-50%) rotate(0deg); /* 회전축 확인할때 배경색 추가 */ }
    & .stability_indi:before{content: ""; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); width: 18px; height: auto; aspect-ratio: 18 / 71; background: url("/src/img/2024/contents/stability_indi.svg") no-repeat center;}
    & .stability_txt{display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, 50%); color: #212529; font-size: 20px; font-weight: var(--fwb); letter-spacing: -0.02em; line-height: 1;}

    &.level-none{
        & .stability_meter{filter: grayscale(1) opacity(0.7);}
        & .stability_indi{opacity: 0;}
        & .stability_txt{display: block;}
    }
    &.level1{
        & .stability_indi{animation: stability_level1 1s forwards; animation-timing-function: cubic-bezier(0.34,1.56,0.64,1)}
    }
    &.level2{
        & .stability_indi{animation: stability_level2 1s forwards; animation-timing-function: cubic-bezier(0.34,1.56,0.64,1)}
    }
    &.level3{
        & .stability_indi{animation: stability_level3 1s forwards; animation-timing-function: cubic-bezier(0.34,1.56,0.64,1)}
    }


}
@keyframes stability_level1 {
    0%{transform: translateX(-50%) rotate(0deg);}
    100%{transform: translateX(-50%) rotate(-60deg);}
}
@keyframes stability_level2 {
    0%{transform: translateX(-50%) rotate(0deg);}
    0%{transform: translateX(-50%) rotate(-20deg);}
    0%{transform: translateX(-50%) rotate(0deg);}
    0%{transform: translateX(-50%) rotate(20deg);}
    100%{transform: translateX(-50%) rotate(0deg);}
}
@keyframes stability_level3 {
    0%{transform: translateX(-50%) rotate(0deg);}
    100%{transform: translateX(-50%) rotate(60deg);}
}

/* basic_table */
.table_wrap{width: 100%; margin: 0 0 25px 0; box-sizing: border-box;}
.table_scr_info{display: none; padding: 0 0 5px; line-height: 130%; font-size: 13px; color: red;}
.basic_table{clear: both; width: 100%; border-collapse: collapse; table-layout: fixed; text-align: center; border-top: 1px solid #bfcbdb; box-sizing: border-box;}
.basic_table tr{transition: background 0.3s ease;}

.basic_table th{vertical-align: middle; padding: 9px 5px; border: 1px solid #e2e8f0; border-left: none; background: #f6f8fb; color: #74839b; font-weight: var(--fwsb);}
.basic_table thead th{border-top: none; background: #f6f8fb;}
.basic_table thead tr:last-child th{border-bottom: none;}

.basic_table td{vertical-align: middle; padding: 0.5rem; border: 1px solid #e2e8f0; word-break: break-all; color: #2b384f; font-weight: var(--fwsb);}
.basic_table td:first-child{border-left: none;}
.basic_table th:last-child,
.basic_table td:last-child{border-right: none;}
.basic_table .con{padding-left: 1rem; text-align: left;}
.basic_table .none{padding: 20px 0;}
@media screen and (max-width: 460px){
    .table_wrap{overflow-x: auto; overflow-y: hidden;}
    .table_scr_info{display: block;}
	.table_wrap .basic_table{width: 459px;}
}


/* 마이페이지 */
.mypageWrap{padding: 0 0 250px; letter-spacing: -0.02em;}
.mypageWrap .subtop_box{border: 1px solid #BFCBDB; border-radius: 15px; padding: 30px 60px; margin: 0 0 50px;}
.mypageWrap .subtop_box .note_list{}
.mypageWrap .subtop_box .note_list > li{position: relative; padding: 0 0 0 14px;}
.mypageWrap .subtop_box .note_list > li:before{content: "※"; position: absolute; top: 0; left: 0;}
.mypageWrap .subtop_box .note_list .mailLink,
.mypageWrap .subtop_box .note_list .telLink{color: #283e80; font-weight: var(--fwm);}
.mypageWrap .subtop_box .note_list .mailLink:before{content: ""; display: inline-block; vertical-align: middle; margin: -2px 3px 0 0; width: 20px; height: 21px; background: url("/src/img/2024/contents/ico_mail.png") no-repeat center;}
.mypageWrap .mp_list{display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(auto-fill, minmax(20px, auto)); grid-row-gap: 60px; grid-column-gap: 25px;}
.mypageWrap .mp_list > li{flex: 1; border-radius: 10px; overflow: hidden; border: 1px solid #bfcbdb; display: flex; flex-direction: column; padding: 20px;}
.mypageWrap .mp_list .top{flex: 0 0 auto; background-color: #eaf1fb; border-radius: 40px; padding: 8px 20px;}
.mypageWrap .mp_list .top h3{display: flex; align-items: center; justify-content: center; gap: 8px; color: #222; line-height: 1.2; font-size: 20px; font-weight: var(--fwsb);}
.mypageWrap .mp_list .top h3 span{display: flex; align-items: center; justify-content: center; gap: 8px;}
.mypageWrap .mp_list .top h3 img{vertical-align: top;}
.mypageWrap .mp_list .mid{flex: 1; padding: 14px 0 0 0; display: flex; flex-direction: column;}
.mypageWrap .mp_list .mid .empty{display: flex; justify-content: center; align-items: center; text-align: center; flex: 1; min-height: 100px;}
.mypageWrap .mp_list .mid .des_list{display: flex; flex-direction: column;}
.mypageWrap .mp_list .mid .des_list > div{display: flex; flex-wrap: wrap; gap: 20px; line-height: 1.3; padding: 5px 0; font-size: 15px;}
.mypageWrap .mp_list .mid .des_list dt{font-weight: var(--fwr); color: #74839b;}
.mypageWrap .mp_list .mid .des_list dd{margin-left: auto;}
.mypageWrap .mp_list .mid .btn_wrap{margin-top: auto; display: flex; justify-content: center; padding: 20px 0 0;}
.mypageWrap .mp_list .mid .btn_wrap a{display: block; width: 100%; color: #fff; background-color: #283e80; border-radius: 7px; padding: 0 20px; line-height: 44px; text-align: center; font-size: 16px; font-weight: var(--fwm); transition: 0.25s;}
.mypageWrap .mp_list .mid .btn_wrap a:hover{background-color: #fff; box-shadow: inset 0 0 0 1px #283e80; color: #283e80;}
.mypageWrap .mp_list .mid .btn_wrap a.disabled{cursor: no-drop; background-color: #74839b !important; color: #fff; box-shadow: none;}
@media (max-width: 1024px){
    .mypageWrap .subtop_box{padding: 30px;}
    .mypageWrap .mp_list{grid-template-columns: repeat(2, 1fr); grid-row-gap: 30px; grid-column-gap: 30px;}
}
@media (max-width: 700px){
    .mypageWrap .subtop_box{margin: 0 0 30px;}
    .mypageWrap .mp_list{grid-template-columns: repeat(1, 1fr);}
}
@media (max-width: 640px){
    .mypageWrap .subtop_box{padding: 20px 20px;}
}


/* 마이페이지 - 결제정보 */
.mypageWrap .info_top{display: flex; flex-wrap: wrap; border: 1px solid #d1d1d1; border-radius: 15px; overflow: hidden;}
.mypageWrap .info_top .tit{flex: 0 0 auto; width: 180px; display: inline-flex; align-items: center; justify-content: center; background-color: #eaf1fb; text-align: center; font-size: 18px; font-weight: var(--fwsb);}
.mypageWrap .info_top .con{flex: 1; padding: 20px;}
.mypageWrap .info_top .con .name{font-size: 18px; display: flex; align-items: center; gap: 10px;}
.mypageWrap .info_top .con .name .img{display: inline-flex;}
.mypageWrap .info_top .con .name .img lord-icon{width: 50px; height: 50px;}
.mypageWrap .info_top .con .list{display: flex; flex-wrap: wrap; padding: 30px 0 0;}
.mypageWrap .info_top .con .list > div{width: 50%; padding: 0 20px 0 0;}
.mypageWrap .info_top .con .list > div:nth-child(even){}
.mypageWrap .info_top .con .list dt{display: inline-flex; color: #2b384f; background-color: #eaf1fb; line-height: 40px; padding: 0 20px; border-radius: 40px;}
.mypageWrap .info_top .con .list dd{padding: 20px 0 0;}
.mypageWrap .info_top .con .list dd .date{}
.mypageWrap .info_top .con .list dd .date span{display: block;}
.mypageWrap .info_top .con .list dd .date span em{color: #2850fa;}
.mypageWrap .info_top .con .list dd .date button{display: inline-block; color: #fff; background-color: #283e80; line-height: 40px; border-radius: 5px; padding: 0 20px; margin-top: 10px; transition: 0.25s;}
.mypageWrap .info_top .con .list dd .date button:hover{background-color: #fff; box-shadow: inset 0 0 0 1px #283e80; color: #283e80;}
.mypageWrap .paging{margin-top: 30px;}
.mypageWrap.payInfo .basic_table{margin-top: 30px; margin-bottom: 30px;}
.mypageWrap.payInfo .btn_wrap{padding: 30px 0 0;}
@media (max-width: 1024px){
    .mypageWrap .info_top{flex-direction: column;}
    .mypageWrap .info_top .tit{width: 100%; padding: 20px 0;}
    .mypageWrap .info_top .tit br{display: none;}
    .mypageWrap .info_top .con .list{flex-direction: column; gap: 40px;}
    .mypageWrap .info_top .con .list > div{padding: 0;}
}
@media (max-width: 768px){
    .mypageWrap .info_top .tit{padding: 15px 0;}
    .mypageWrap .info_top .con .name .img lord-icon{width: 40px; height: 40px;}
    .mypageWrap .info_top .con .name{font-size: 16px;}
}



/* 양식 테이블 */
.form_wrap .form_table{clear: both; width: 100%; margin: 0 auto; /* table-layout: fixed; */ border-collapse: collapse; font-size: 1rem; word-break: keep-all; overflow: hidden; border-top: 1px solid #becbdb; box-sizing: border-box; background-color: transparent;}
.form_wrap .form_table colgroup col:nth-child(1){width: 170px;}
.form_wrap .form_table colgroup col:nth-child(2){width: calc(100% - 170px);}

/* ▼▼▼ ONLY 맥북 사파리 (아이폰X, 아이패드X) ▼▼▼ */
@media not all and (min-resolution:.001dpcm){
    @supports (-webkit-appearance:none) and (stroke-color:transparent){
        .form_wrap .form_table colgroup col:nth-child(1){width: auto !important;}
        .form_wrap .form_table colgroup col:nth-child(2){width: auto !important;}
    }
}
/* ▲▲▲ ONLY 맥북 사파리 (아이폰X, 아이패드X) ▲▲▲ */

.form_wrap .form_table thead{}
.form_wrap .form_table thead th{box-sizing: border-box; vertical-align: top; padding: 10px 10px 10px 20px; font-size: 17px; font-weight: var(--fwm); text-align: left; background-color: #f7f8fc; color: #74839b; text-align: center; border-left: 1px solid #e1e8f0;}
.form_wrap .form_table thead th:nth-child(1){border-left: none;}
.form_wrap .form_table tbody{}
.form_wrap .form_table tbody tr{border-bottom: 1px solid #ddd;}
.form_wrap .form_table tbody tr th{box-sizing: border-box; vertical-align: middle; padding: 10px 10px 10px 20px; font-size: 16px; font-weight: var(--fwr); text-align: left; background-color: #f7f8fc; color: #74839b; height: 60px;}
.form_wrap .form_table tbody tr td{/* border-left: 1px solid #e1e8f0; */}
.form_wrap .form_table tbody tr td:nth-child(1){border-left: none;}
/* ▼▼▼ ONLY 맥북 사파리 (아이폰X, 아이패드X) ▼▼▼ */
@media not all and (min-resolution:.001dpcm){
    @supports (-webkit-appearance:none) and (stroke-color:transparent){
        .form_wrap .form_table tbody tr th:nth-child(1){padding-right: 20px;}
    }
}
/* ▲▲▲ ONLY 맥북 사파리 (아이폰X, 아이패드X) ▲▲▲ */
.form_wrap .form_table tbody tr th label,
.form_wrap .form_table tbody tr th span{position: relative; /* line-height: 52px; */ /* height: 52px; */}
.form_wrap .form_table tbody tr th label.necessary:before,
.form_wrap .form_table tbody tr th span.necessary:before{content: "필수입력항목"; position: absolute; top: 6px; right: -14px; display: block; width: 8px; height: 8px; border-radius: 50%; background-color: var(--theme); font-size: 0;}
.form_wrap .form_table tbody tr td{box-sizing: border-box; padding: 10px 10px; vertical-align: middle;}
.form_wrap .form_table tr td span.added {font-size: 0.9rem; margin-left: 5px; color: #777;}
.form_wrap .form_table .cont.board-view01{border: none !important;}
.form_wrap .form_table .cont.email br,
.form_wrap .form_table .cont.address br{display: none;}
.form_wrap .form_table .cont:has(select){display: flex; gap: 5px; align-items: center;}
.form_wrap .form_table .cont select{height: 40px; font-size: 1rem; width: calc( (100% - 5px) / 2 );}
.form_wrap .form_table .cont input{height: 40px; border-radius: 5px; width: calc( (100% - 5px) / 2 ); border: 1px solid #d2d8e0; padding: 0 15px;}
.form_wrap .form_table .cont input:disabled{background-color: #f5f5f5; color: #888;}
.form_wrap .form_table .cont textarea{display: block; border-radius: 8px; width: 100%; border: 1px solid #d1d1d1; padding: 15px; height: 400px; color: #686868; line-height: 1.5; resize: vertical;}
.form_wrap .form_table .cont .hasUnit{position: relative; font-size: 15px; color: var(--main);}
.form_wrap .form_table .cont .hasUnit:before{content: attr(data-unit); position: absolute; right: 14px; line-height: 42px;}
.form_wrap .form_table .cont .hasUnit input{padding-right: 46px; text-align: right;}

.form_wrap .form_table .captha{position: absolute; left: -9999px; display: block; width: 0; height: 0; border: none; opacity: 0; overflow: hidden;}

.form_wrap .form_table .btn_radio input[type="radio"] + label{line-height: 42px; font-size: 15px;}

.form_wrap .form_table .tableBtn{display: inline-block; padding: 0 10px; background-color: #283e80; color: #fff; line-height: 40px; font-size: 14px; font-weight: var(--fwm); border-radius: 5px; transition: 0.25s;}
.form_wrap .form_table .tableBtn:hover{background-color: #fff; box-shadow: inset 0 0 0 1px #283e80; color: #283e80;}

.form_wrap + .btn_wrap{padding: 30px 0 0;}
@media (max-width: 768px){
    .form_wrap .form_table{border-top: none;}
    .form_wrap .form_table colgroup{}
    .form_wrap .form_table colgroup col:nth-child(1){width: 100%;}
    .form_wrap .form_table tbody tr{display: block; padding: 0; border-bottom: none; box-sizing: border-box; border-top: 1px solid #becbdb;}
    .form_wrap .form_table tbody tr th{display: block; width: 100%; padding: 10px 10px; font-size: 15px; height: auto;}
    .form_wrap .form_table tbody tr td{display: block; width: 100%; border: none; padding: 10px 0;}
    .form_wrap .form_table tbody tr th label,
    .form_wrap .form_table tbody tr th span{line-height: 1.5;}
    .form_wrap .form_table .cont textarea{height: 200px;}
}


/* 폼 선택 (체크, 라디오) */
.form_wrap .form_sel{display: flex; flex-wrap: wrap; gap: 20px;}
.form_wrap .form_sel > div{}
.form_wrap .form_sel > div{}



/* 개인정보처리방침 */
.pipWrap{font-weight: var(--fwm); letter-spacing: -0.02em; padding: 0 0 200px;}

.pipWrap .imgbox{text-align: center; padding: 50px 20px;}
.pipWrap .imgbox.bg{background-color: #f6f8fb; border-radius: 20px;}

.pipWrap .num_list{display: flex; flex-direction: column; gap: 2px;}
.pipWrap .num_list > li{position: relative; padding: 0 0 0 18px;}
.pipWrap .num_list > li .num{position: absolute; top: 0; left: 0;}
.pipWrap .num_list .imgbox{width: calc(100% + 18px); margin: 10px 0 0 -18px;}

.pipWrap .table-default tbody tr td{white-space: initial;}
.pipWrap .table-default tbody tr td.tal{text-align: left !important;}
.pipWrap .table-default tbody tr th{text-align: center !important;}
.pipWrap .table-default tbody tr th.bdt{border-top: 1px solid #e2e8f0;}

.pipWrap .pip_box{border: 1px solid #eff2f5; background-color: #fafbfc; padding: 36px 49px; border-radius: 15px;}
.pipWrap .pip_box .index{display: flex; flex-direction: column; gap: 6px;}
.pipWrap .pip_box .index > li{color: #2b384f; font-weight: var(--fwsb);}
.pipWrap .pip_box .index.numbering{}
.pipWrap .pip_box .index.numbering > li{position: relative; padding: 0 0 0 18px;}
.pipWrap .pip_box .index.numbering > li .num{position: absolute; top: 0; left: 0;}

.pipWrap .top{}
.pipWrap .top .pip_box{margin: 55px auto 50px;}
.pipWrap .top .info{line-height: 1.65;}
.pipWrap .top .box_list{display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(auto-fill, minmax(20px, auto)); grid-row-gap: 20px; grid-column-gap: 18px; padding: 30px 0 0;}
.pipWrap .top .box_list > div{position: relative; display: flex; flex-direction: column; gap: 20px; border: 1px solid #e3eaf9; background-color: #f1f6ff; border-radius: 10px; text-align: center; padding: 21px 0 19px; cursor: pointer;}
.pipWrap .top .box_list > div:hover{border-color: #6993ff;}
.pipWrap .top .box_list dt{letter-spacing: -0.02em; font-weight: var(--fwsb); color: #2b384f;}
.pipWrap .top .box_list dd{}
.pipWrap .top .box_list dd img{}
.pipWrap .top .note{padding: 16px 0 0;}
.pipWrap .top .note.m_hide{}
.pipWrap .top .note > li{color: #3b79ed;}

.pipWrap .top .box_list .tooltip{position: absolute; top: 50%; left: 50%; display: block; width: 450px; background-color: #ddd; border-radius: 0.938rem; overflow: hidden; visibility: hidden; opacity: 0; z-index: -1;}
.pipWrap .top .box_list > div:nth-child(n+4) .tooltip{left: auto; right: 50%;}
.pipWrap .top .box_list > div:hover .tooltip{visibility: visible; opacity: 1; z-index: 1;}
.pipWrap .top .box_list .tooltip .tt_head{background-color: #6993ff; color: #fff; font-size: 20px; padding: 10px 20px; text-align: left;}
.pipWrap .top .box_list .tooltip .tt_body{background-color: #fff; padding: 15px 20px; border: 1px solid #ddd; border-radius: 0 0 0.938rem 0.938rem;}
.pipWrap .top .box_list .tooltip .tt_body > p{padding: 0 0 10px; text-align: left;}
.pipWrap .top .box_list .tooltip .table-default{font-size: 15px;}
.pipWrap .top .box_list .tooltip .table-default tbody tr th{padding-left: 15px; padding-right: 15px;}

.pipWrap .mid{}

.pipWrap .item{}
.pipWrap .item + .item{margin-top: 50px;}
.pipWrap .item .link{color: #3b79ed;}
.pipWrap .item .title{}
.pipWrap .item .title h3{font-size: 23px; font-weight: var(--fwsb);}
.pipWrap .item .title .sub{padding: 13px 0 0;}
.pipWrap .item .con{padding: 25px 0 0;}
.pipWrap .item .con > p{margin: 40px auto 20px;}
.pipWrap .item .con .sub_tit{font-size: 18px; font-weight: var(--fwsb); margin: 15px 0;}
@media (max-width: 1024px){
    .pipWrap .pip_box{padding: 30px;}

    .pipWrap .top .box_list{grid-template-columns: repeat(3, 1fr); grid-row-gap: 15px; grid-column-gap: 15px;}
    .pipWrap .top .box_list .tooltip{left: 50% !important; right: auto !important; width: 370px;}
    .pipWrap .top .box_list > div:nth-child(3n) .tooltip{left: auto !important; right: 50% !important;}
}
@media (max-width: 800px){
    .pipWrap .table-default{width: 799px;}
    .pipWrap .imgbox{overflow-x: auto;}
    .pipWrap .imgbox img{width: 799px; height: auto; max-width: none;}
    .pipWrap .imgbox.bg img{width: 100%; max-width: 100%;}

    .pipWrap .tooltip .table-default{width: auto;}
}
@media (max-width: 768px){
    .pipWrap .pip_box{padding: 20px;}

    .pipWrap .item .title h3{font-size: 18px;}

    .pipWrap .top .box_list{grid-template-columns: repeat(1, 1fr);}
    .pipWrap .top .box_list > div{padding: 20px 15px; cursor: initial;}
    .pipWrap .top .box_list .tooltip{position: static; visibility: visible; opacity: 1; z-index: 1; width: 100%;}
    .pipWrap .top .box_list .tooltip .tt_head{font-size: 16px; padding: 10px 15px;}
    .pipWrap .top .box_list .tooltip .tt_body{padding: 15px;}

    .pipWrap .top .note.m_hide{display: none;}
}
@media (max-width: 640px){
    .pipWrap .table-default{width: 600px;}
    .pipWrap .table-default colgroup{}
    .pipWrap .table-default colgroup col:nth-child(1){width: 120px !important;}
    .pipWrap .table-default tbody tr th{word-break: break-all;}

    .pipWrap .tooltip .table-default{width: auto;}

    .pipWrap .btn-line .btn{width: 100%;}
}


/* 이메일 무단수집거부 */
.noemailWrap{display: flex; gap: 64px; align-items: center; background-color: #f6fbff; border: 1px solid #e2f3ff; border-radius: 15px; padding: 50px 95px; font-weight: var(--fwm); line-height: 1.65;}
.noemailWrap .img{flex: 0 0 auto;}
.noemailWrap .img img{}
.noemailWrap .txt{}
.noemailWrap .txt .accent{color: #e50b0b; display: block;}
.noemailWrap .txt .accent:before{content: ""; display: inline-block; vertical-align: middle; margin: -3px 6px 0 0; width: 24px; height: 24px; background: url("/src/img/2024/contents/noemail_accent.svg") no-repeat;}
@media (max-width: 1024px){
    .noemailWrap{flex-direction: column; padding: 40px 30px; gap: 40px;}
}
@media (max-width: 640px){
    .noemailWrap{gap: 30px;}
}


/* 이용약관 */
.termsWrap{letter-spacing: -0.02em; font-weight: var(--fwm); margin-bottom: 200px;}
.termsWrap .title{font-size: 23px; font-weight: var(--fwsb); color: #222; margin-bottom: 20px;}
.termsWrap .mid_tit{font-size: 18px; font-weight: var(--fwsb); color: #283e80; margin-bottom: 15px;}
.termsWrap .sub_tit{display: inline-block; font-size: 18px; font-weight: var(--fwsb); color: #fff; background-color: #283e80; line-height: 33px; border-radius: 33px; padding: 0 13px; margin-bottom: 20px;}

.termsWrap .num_list{display: flex; flex-direction: column; gap: 10px;}
.termsWrap .num_list > li{position: relative; padding: 0 0 0 24px; color: #2b384f;}
.termsWrap .num_list > li .num{position: absolute; top: 0; left: 0;}

.termsWrap .dot2{display: flex; flex-direction: column; gap: 10px;}
.termsWrap .dot2 > li{position: relative; padding: 0 0 0 10px;}
.termsWrap .dot2 > li:before{content: ""; position: absolute; top: 9px; left: 0; display: inline-block; width: 3px; height: 3px; border-radius: 50%; background-color: #2b384f;}

.termsWrap .circle_num{display: flex; flex-direction: column; gap: 10px;}
.termsWrap .circle_num > li{position: relative; padding: 0 0 0 24px;}
.termsWrap .circle_num > li .circle{position: absolute; top: 2px; left: 0; display: inline-block; width: 19px; height: 19px; line-height: 19px; color: #fff; font-size: 14px; background-color: #222; border-radius: 50%; text-align: center;}

.termsWrap .article{}
.termsWrap .article + .article{margin-top: 50px; padding-top: 50px; border-top: 1px dashed #9ea8b9;}
.termsWrap .article .item{}
.termsWrap .article .item + .item{margin-top: 50px;}

.termsWrap .termbox{border: 1px solid #eff2f5; background-color: #fafbfc; padding: 40px; border-radius: 15px; margin: 15px auto 15px;}
.termsWrap .circle_num .termbox{margin: 10px 0 10px -24px;}
.termsWrap .termbox .termbox_tit{font-size: 20px; font-weight: var(--fwsb); margin-bottom: 5px;}

.terms_top{color: #2b384f; font-weight: var(--fwsb); border: 1px solid #e3eaf9; background-color: #f1f6ff; border-radius: 30px; padding: 30px 60px; margin-bottom: 40px;}
.terms_top > div{display: flex; align-items: center; gap: 27px;}
.terms_top > div:before{content: ""; flex: 0 0 auto; display: inline-block; width: 50px; height: 50px; background: url('/src/img/2024/contents/stat_policy_ico.svg') no-repeat;}
@media (max-width: 1024px){
    .termsWrap .termbox{padding: 30px;}

    .terms_top{padding: 30px 40px;}
}
@media (max-width: 768px){
    .termsWrap .circle_num > li .circle{font-size: 12px; width: 17px; height: 17px; line-height: 17px;}

    .termsWrap .title{font-size: 18px;}

    .termsWrap .sub_tit{font-size: 13px; line-height: 26px; margin-bottom: 10px;}

    .termsWrap .termbox{padding: 20px;}

    .terms_top{padding: 30px 30px;}
    .terms_top > div{flex-direction: column; gap: 20px;}
}



/* 색상변수 */
:root{
    --anal_color1: #2c5bf9;
    --anal_color2: #0089eb;
    --anal_color3: #00b7c5;
    --anal_color4: #00be92;
    --anal_color5: #03cc03;
    --anal_color6: #87cd05;
    --anal_color7: #feba00;
    --anal_color8: #fe7700;
    --anal_color9: #fe2600;
    --anal_color10: #f06;
}

.analWrap{color: #222;}
.analWrap .anal_top{}
.analWrap .anal_top .at_guide{}
.analWrap .anal_top .at_guide .title{}
.analWrap .anal_top .at_guide .title button{position: relative; display: block; width: 100%; padding: 0 0 10px; font-weight: var(--fwsb); font-size: 20px; text-align: left;}
.analWrap .anal_top .at_guide .title button:after{content: ""; position: absolute; top: 4px; right: 10px; width: 12px; height: 12px; border-right: 1px solid #222; border-bottom: 1px solid #222; transform: rotate(45deg);}
.analWrap .anal_top .at_guide .title button.on:after{transform: rotate(225deg); top: 8px;}
.analWrap .anal_top .at_guide .cont{padding: 20px 0; font-size: 14px; display: none;}
.analWrap .anal_top .at_guide .cont .list{display: flex; flex-direction: column; gap: 5px;}
.analWrap .anal_top .at_guide .cont .list > li{position: relative; padding: 0 0 0 12px;}
.analWrap .anal_top .at_guide .cont .list > li:before{content: "-"; position: absolute; top: 0; left: 0;}

.analWrap .anal_top .at_title{display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 25px; font-size: 26px; font-weight: var(--fwsb); letter-spacing: -0.04em; color: #233a80;}
.analWrap .anal_top .at_title img{}
.analWrap .anal_top > p{margin: 0 0 8px;}

.analWrap .anal_top .at_pos{margin-top: 5px; display: flex; flex-wrap: wrap; background-color: #375ab1; color: #fff; padding: 12px 20px;}
.analWrap .anal_top .at_pos > li{flex: 1; font-size: 14px; font-weight: var(--fwsb); padding: 0 10px 0 0;}

.analWrap .anal_top .at_txt{font-size: 14px; display: flex; margin: 20px 0 20px;}
.analWrap .anal_top .at_txt .at_txt_source{flex: 1;}
.analWrap .anal_top .at_txt .at_txt_date{color: #f06; text-align: right; width: 100px; flex: 0 0 auto;}

.analWrap .anal_sec{}
.analWrap .anal_sec + .anal_sec{border-top: 1px dashed #d1d1d1; margin: 50px 0 0; padding: 40px 0 0;}

.analWrap .anal_sec .ac_title{margin: 0 0 10px; padding: 20px 0 0;}
.analWrap .anal_sec .ac_title .name{display: inline-block; font-size: 22px; font-weight: var(--fwsb);}
.analWrap .anal_sec .ac_title .name img{vertical-align: middle; margin: -2px 0 0;}
.analWrap .anal_sec .ac_title .guide{display: inline-block; vertical-align: middle; position: relative;}
.analWrap .anal_sec .ac_title .guide .q{display: inline-block; vertical-align: middle; margin: -5px 0 0 3px; color: #fff; background-color: #2850fa; border-radius: 50%; width: 22px; height: 22px; line-height: 22px; text-align: center; cursor: pointer;}
.analWrap .anal_sec .ac_title .guide .tooltip{visibility: hidden; opacity: 0; position: absolute; left: calc(100% + 13px); top: 50%; transform: translateY(-50%); width: 281px; border: 1px solid #4366FB; font-size: 14px; background-color: #eaf1fb; border-radius: 10px; padding: 10px 15px;}
.analWrap .anal_sec .ac_title .guide:hover .tooltip{visibility: visible; opacity: 1;}
.analWrap .anal_sec .ac_title .guide .tooltip:before{content: ""; position: absolute; top: 50%; transform: translateY(-50%) rotate(-45deg); left: -6px; width: 10px; height: 10px; border-top: 1px solid #4366fb; border-left: 1px solid #4366fb; background-color: #eaf1fb;}
.analWrap .anal_sec .ac_title .guide .tooltip:after{content: ""; position: absolute; top: 0; right: 100%; display: block; width: 16px; height: 100%; background-color: transparent;}

.analWrap .anal_sec .anal_box{border: 1px solid #ececec; border-radius: 10px; background-color: #fafafa; padding: 30px 20px;}
.analWrap .anal_sec .anal_box .ab_tit{font-weight: var(--fwsb); font-size: 18px; color: #375ab1;}

.analWrap .anal_sec .anal_box.hasIndex{}
.analWrap .anal_sec .anal_box.hasIndex .ab_tit{color: #222; margin: 0 0 -23px;}
.analWrap .anal_sec .anal_box .index{position: relative;}
.analWrap .anal_sec .anal_box .index .index_value{display: flex; flex-direction: column; justify-content: center; text-align: center; gap: 0; font-size: 18px;}
.analWrap .anal_sec.color1 .anal_box .index .index_value{color: var(--anal_color1);}
.analWrap .anal_sec.color2 .anal_box .index .index_value{color: var(--anal_color2);}
.analWrap .anal_sec.color3 .anal_box .index .index_value{color: var(--anal_color3);}
.analWrap .anal_sec.color4 .anal_box .index .index_value{color: var(--anal_color4);}
.analWrap .anal_sec.color5 .anal_box .index .index_value{color: var(--anal_color5);}
.analWrap .anal_sec.color6 .anal_box .index .index_value{color: var(--anal_color6);}
.analWrap .anal_sec.color7 .anal_box .index .index_value{color: var(--anal_color7);}
.analWrap .anal_sec.color8 .anal_box .index .index_value{color: var(--anal_color8);}
.analWrap .anal_sec.color9 .anal_box .index .index_value{color: var(--anal_color9);}
.analWrap .anal_sec .anal_box .index .index_value .txt{font-weight: var(--fwsb); line-height: 1; text-transform: uppercase;}
.analWrap .anal_sec .anal_box .index .index_value .num{font-size: 3.5em; font-weight: var(--fwsb); line-height: 1;}
.analWrap .anal_sec .anal_box .index .index_chart{display: flex; flex-wrap: wrap; gap: 2px; margin: 10px 0 0;}
.analWrap .anal_sec .anal_box .index .index_chart > li{flex: 1; border-radius: 1px; background-color: #d9d9d9; height: 5px;}
.analWrap .anal_sec.color1 .anal_box .index .index_chart > li.on{background-color: var(--anal_color1);}
.analWrap .anal_sec.color2 .anal_box .index .index_chart > li.on{background-color: var(--anal_color2);}
.analWrap .anal_sec.color3 .anal_box .index .index_chart > li.on{background-color: var(--anal_color3);}
.analWrap .anal_sec.color4 .anal_box .index .index_chart > li.on{background-color: var(--anal_color4);}
.analWrap .anal_sec.color5 .anal_box .index .index_chart > li.on{background-color: var(--anal_color5);}
.analWrap .anal_sec.color6 .anal_box .index .index_chart > li.on{background-color: var(--anal_color6);}
.analWrap .anal_sec.color7 .anal_box .index .index_chart > li.on{background-color: var(--anal_color7);}
.analWrap .anal_sec.color8 .anal_box .index .index_chart > li.on{background-color: var(--anal_color8);}
.analWrap .anal_sec.color9 .anal_box .index .index_chart > li.on{background-color: var(--anal_color9);}
.analWrap .anal_sec .anal_box .index .index_comp{position: absolute; bottom: 15px; right: 0;}
.analWrap .anal_sec .anal_box .index .index_comp .txt{font-size: 14px;}
.analWrap .anal_sec .anal_box .index .index_comp .comp{margin: 0 0 0 10px; font-size: 18px;}
.analWrap .anal_sec .anal_box .index .index_comp .comp.hold{}
.analWrap .anal_sec .anal_box .index .index_comp .comp.down{color: #2850fa;}
.analWrap .anal_sec .anal_box .index .index_comp .comp.down:before{content: ""; display: inline-block; vertical-align: middle; margin: -2px 3px 0 0; width: 0; height: 0; border-style: solid; border-width: 7px 5px 0px 5px; border-color: #2850fa transparent transparent transparent;}
.analWrap .anal_sec .anal_box .index .index_comp .comp.up{color: #f80808;}
.analWrap .anal_sec .anal_box .index .index_comp .comp.up:before{content: ""; display: inline-block; vertical-align: middle; margin: -2px 3px 0 0; width: 0; height: 0; border-style: solid; border-width: 0px 5px 7px 5px; border-color: transparent transparent #f80808 transparent;}


.analWrap .anal_sec .anal_box.hasLevel{display: flex; align-items: center;}
.analWrap .anal_sec .anal_box .level{margin-left: auto;}
.analWrap .anal_sec .anal_box .level .level_list{display: flex; flex-wrap: wrap; gap: 5px;}
.analWrap .anal_sec .anal_box .level .level_list > li{font-size: 14px; font-weight: var(--fwsb); border: 1px solid #ececec; border-radius: 8px; padding: 7px 9px; background-color: #fff; line-height: 1.6;}
.analWrap .anal_sec .anal_box .level .level_list > li.on{color: #fff;}
.analWrap .anal_sec.color1 .anal_box .level .level_list > li.on{background-color: var(--anal_color1);}
.analWrap .anal_sec.color2 .anal_box .level .level_list > li.on{background-color: var(--anal_color2);}
.analWrap .anal_sec.color3 .anal_box .level .level_list > li.on{background-color: var(--anal_color3);}
.analWrap .anal_sec.color4 .anal_box .level .level_list > li.on{background-color: var(--anal_color4);}
.analWrap .anal_sec.color5 .anal_box .level .level_list > li.on{background-color: var(--anal_color5);}
.analWrap .anal_sec.color6 .anal_box .level .level_list > li.on{background-color: var(--anal_color6);}
.analWrap .anal_sec.color7 .anal_box .level .level_list > li.on{background-color: var(--anal_color7);}
.analWrap .anal_sec.color8 .anal_box .level .level_list > li.on{background-color: var(--anal_color8);}
.analWrap .anal_sec.color9 .anal_box .level .level_list > li.on{background-color: var(--anal_color9);}


.analWrap .anal_sec .anal_box.hasRank{display: flex; align-items: center;}
.analWrap .anal_sec .anal_box .rank{margin-left: auto; display: flex; flex-wrap: wrap;}
.analWrap .anal_sec .anal_box .rank .r_item{text-align: center;}
.analWrap .anal_sec .anal_box .rank .r_item + .r_item{position: relative; padding: 0 0 0 20px; margin: 0 0 0 20px;}
.analWrap .anal_sec .anal_box .rank .r_item + .r_item:before{content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 34px; background-color: #d7d7d7;}
.analWrap .anal_sec .anal_box .rank .r_item .r_tit{display: inline-block; font-size: 13px; font-weight: var(--fwsb); background-color: #222; border-radius: 19px; line-height: 19px; padding: 0 7px; color: #fff;}
.analWrap .anal_sec .anal_box .rank .r_item .r_stat{text-align: center; font-size: 24px; font-weight: var(--fwsb);}
.analWrap .anal_sec .anal_box .rank .r_item .r_stat .total{font-size: 14px; color: #888;}

.analWrap .anal_sec .anal_opinion{border: 1px solid #2850fa; font-weight: var(--fwsb); background-color: #fafafa; border-radius: 10px; padding: 15px 20px;}
.analWrap .anal_sec .anal_opinion .ao_tit{ position: relative; padding: 0 0 0 20px; color: #2850fa; margin: 0 0 4px;}
.analWrap .anal_sec .anal_opinion .ao_tit:before{content: ""; position: absolute; top: 0; left: 0; width: 14px; height: 22px; background: url('/src/img/2024/contents/anal_opinion.svg') no-repeat center;}
.analWrap .anal_sec .anal_opinion .ao_txt{font-size: 14px;}

.analWrap .anal_sec .anal_box + .anal_box,
.analWrap .anal_sec .anal_opinion{margin-top: 15px;}


.analWrap .anal_sec .anal_sec_d2{}
.analWrap .anal_sec .anal_sec_d2 .d2_tit{font-size: 16px; font-weight: var(--fwsb); padding: 50px 0 20px;}
.analWrap .anal_sec .anal_sec_d2 .d2_tit .sub{font-size: 20px; font-weight: var(--fwsb); line-height: 1.2; padding: 10px 0 0;}
.analWrap .anal_sec .anal_sec_d2 .d2_tit .sub .color{color: #f80808;}
.analWrap .anal_sec .anal_sec_d2 .d2_tit .des{font-size: 14px; padding: 5px 0 0;}
.analWrap .anal_sec .anal_sec_d2 .d2_con{}
.analWrap .anal_sec .anal_sec_d2 .d2_con .con_wrap{display: flex; flex-wrap: wrap; gap: 9px;}
.analWrap .anal_sec .anal_sec_d2 .d2_con .con_wrap > li{flex: 1; border: 1px solid #ececec; border-radius: 10px; padding: 6px;}
.analWrap .anal_sec .anal_sec_d2 .d2_con .con_wrap > li.w50{flex: 0 0 auto; max-width: 49%;}
.analWrap .anal_sec .anal_sec_d2 .d2_con .con_wrap > li.w100{flex: 0 0 auto; width: 100%;}
.analWrap .anal_sec .anal_sec_d2 .d2_con .con_wrap .name{font-weight: var(--fwsb); color: #233a80; background-color: #eaf1fb; border-radius: 8px; line-height: 1; padding: 5px 0; text-align: center;}
.analWrap .anal_sec .anal_sec_d2 .d2_con .con_wrap .ico{text-align: center; padding: 20px 0 10px;}
.analWrap .anal_sec .anal_sec_d2 .d2_con .con_wrap .ico img{vertical-align: top;}
.analWrap .anal_sec .anal_sec_d2 .d2_con .con_wrap .ico .des{font-weight: var(--fwsb); margin-top: 10px;}
.analWrap .anal_sec .anal_sec_d2 .d2_con .con_wrap .anal_ratio{padding: 20px 0 10px; display: flex; flex-wrap: wrap;}
.analWrap .anal_sec .anal_sec_d2 .d2_con .con_wrap .anal_ratio > .txt{display: inline-block; width: 50px; line-height: 30px; text-align: center; font-size: 16px; font-weight: var(--fwsb);}
.analWrap .anal_sec .anal_sec_d2 .d2_con .con_wrap .anal_ratio .ratio{display: flex; flex-wrap: wrap; width: calc(100% - 100px); align-items: center; height: 30px;}
.analWrap .anal_sec .anal_sec_d2 .d2_con .con_wrap .anal_ratio .ratio > span{display: flex; background-color: #ddd; height: 100%; color: #fff; text-align: center; align-items: center; justify-content: center;}
.analWrap .anal_sec .anal_sec_d2 .d2_con .con_wrap .anal_ratio .ratio > span.color1{background-color: #9fa6fd;}
.analWrap .anal_sec .anal_sec_d2 .d2_con .con_wrap .anal_ratio .ratio > span.color2{background-color: #fc9999;}
.analWrap .anal_sec .anal_sec_d2 .d2_con .con_wrap .anal_ratio .ratio > span.color3{background-color: #92d050;}
.analWrap .anal_sec .anal_sec_d2 .d2_con .con_wrap .anal_ratio .ratio > span.color4{background-color: #00b050;}

.analWrap .anal_sec_type2{}
.analWrap .anal_sec_type2 + .anal_sec_type2{padding-top: 35px; border-top: 1px dashed #d1d1d1; margin-top: 50px;}
.analWrap .anal_sec_type2 .d2_tit{font-size: 16px; font-weight: var(--fwsb); padding: 50px 0 20px;}

.analWrap .as_type2_d2{}

.analWrap .anal_box_type2{}
.analWrap .anal_box_type2 + .anal_box_type2{margin-top: 50px;}

.analWrap .as_type2_d3{}
.analWrap .as_type2_d3 + .as_type2_d3{margin-top: 40px;}

.analWrap .part_wrap{display: flex; gap: 25px 5px;}
.analWrap .part_wrap.vertical{flex-direction: column;}
.analWrap .part_wrap .anal_table{margin: 0;}

.analWrap .chart_desc{display: flex; flex-direction: column; gap: 13px 0; width: 149px;}
.analWrap .chart_desc > li{display: flex; flex-wrap: wrap; gap: 10px; align-items: center;}
.analWrap .chart_desc .num{display: inline-flex; align-items: center; justify-content: center; width: 27px; height: 26px; border-radius: 5px; font-size: 14px; font-weight: var(--fwsb); color: var(--white); background-color: #6993ff;}
.analWrap .chart_desc dl{font-size: 14px; line-height: 1.2;}
.analWrap .chart_desc dl dt{overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100px;}
.analWrap .chart_desc dl dd{font-size: 16px; color: #375ab1;}

.analWrap .tit_line{margin: 0 0 25px; padding: 0 0 5px; font-size: 20px; font-weight: 700; color: #293e81; letter-spacing: -0.04em; border-bottom: 2px solid #375ab1;}
.analWrap .tit_bullet{position: relative; padding: 0 0 0 17px; margin: 0 0 11px; font-size: 18px; font-weight: var(--fwsb); color: var(--main); letter-spacing: -0.04em;}
.analWrap .tit_bullet:before{content: ""; position: absolute; top: 5px; left: 0; width: 15px; height: 15px; border-radius: 50%; border: 4px solid; border-color: #5981d9 #5981d9 #283e80 #283e80; transform: rotate(-45deg);}
.analWrap .tit_part{display: table; padding: 2px 5px; margin: 0 0 15px; letter-spacing: -0.04em; font-size: 14px; font-weight: var(--fwsb); color: #283c82; background-color: #e4efff;}
.analWrap .tit_part span{display: flex; align-items: center; gap: 4px;}
.analWrap .tit_part span:before{content: ""; width: 13px; height: 8px; margin: -1px 0 0; background: url("/src/img/2024/contents/ico_tit_part.svg") no-repeat center;}

.anal_table_unit{font-size: 14px; color: #74839b; font-weight: var(--fwsb); text-align: right;}
.anal_table{border-top: 1px solid #bfcbdb; width: 100%; font-weight: var(--fwm); color: #2b384f; table-layout: fixed; margin-bottom: 15px;}
.anal_table thead{}
.anal_table thead tr{}
.anal_table thead tr th{background-color: #f6f8fb; font-weight: var(--fwsb); color: #74839b; padding: 8px 0; border-left: 1px solid #e2e8f0;}
.anal_table thead tr th:nth-child(1){border-left: none;}
.anal_table tbody{}
.anal_table tbody tr{}
.anal_table tbody tr td{padding: 8px; border-left: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0; text-align: center; text-overflow: ellipsis; overflow: hidden; white-space: normal;}
.anal_table tbody tr td:nth-child(1){border-left: none;}
.anal_table tbody tr td .data{}
.anal_table tbody tr td .data.up{color: #ff1216;}
.anal_table tbody tr td .data.down{color: #129bff;}

.anal_table tbody tr td .data.up:before,
.anal_table tbody tr td .data.down:before{content: ""; display: inline-block; vertical-align: middle; margin: 0 4px 0 0; width: 0; height: 0; border-style: solid; border-width: 7px 5px 0px 5px; border-color: #ff1216 transparent transparent transparent; transform: rotateX(180deg);}
.anal_table tbody tr td .data.down:before{border-color: #129bff transparent transparent transparent; transform: rotateY(180deg);}

.anal_ratio_2 {padding: 20px 0 10px; display: flex; flex-wrap: wrap; }
.anal_ratio_2 > .txt {display: inline-block; width: 50px; line-height: 30px; text-align: center; font-size: 16px; font-weight: var(--fwsb);}
.anal_ratio_2 .ratio { display: flex; flex-wrap: wrap; width: calc(100% - 100px); align-items: center; height: 30px;}
.anal_ratio_2 .ratio > span { display: flex; background-color: #ddd; height: 100%; color: #fff; text-align: center; align-items: center; justify-content: center;}
.anal_ratio_2 .ratio > span.color1 { background-color: #9fa6fd;}
.anal_ratio_2 .ratio > span.color2 { background-color: #fc9999;}
.anal_ratio_2 .ratio > span.color3 { background-color: #92d050;}
.anal_ratio_2 .ratio > span.color4 { background-color: #00b050;}

.mapDivTable {text-align:center; pointer-events:none; background: rgba(255,255,255,0.95); border-radius: 6px; padding: 5px 10px; font-size: 12px; color: #333; width: 130px; cursor: default; display: flex; flex-direction: column; gap:6px; align-items: center;}
.mapTable-row { display: flex; justify-content: space-between; margin-bottom: 4px; width: 100%; align-items: center; text-align: center;}
.mapTable-row:last-child {margin-bottom: 0;}
.mapTable-label {text-align:center; font-weight: bold; color: #555; flex: 1;}
.mapTable-value {text-align:center; color: #333; flex: 1;}


/* 상권분석 */
@media (max-width: 768px){
	.analWrap .anal_sec .anal_sec_d2 .d2_con .con_wrap.card{display: flex; flex-wrap: nowrap; gap: 10px;}
}

/* 보안센터 */
.security_center{letter-spacing: -0.02em; color: #222; line-height: 1.65; padding: 0 0 200px;}

.security_center .btn-md{display: inline-flex;}

.security_center .font_navy{color: #283e80; font-weight: var(--fwsb);}

.security_center .numbering_list{display: flex; flex-direction: column; gap: 7px;}
.security_center .numbering_list > li{position: relative; padding: 0 0 0 19px; line-height: 1.4;}
.security_center .numbering_list > li .num{position: absolute; top: 0; left: 0;}

.security_center .box_list{display: flex; flex-wrap: wrap; gap: 25px;}
.security_center .box_list > li{flex: 1; border-radius: 15px; border: 1px solid #bfcbdb; padding: 25px 25px;}
.security_center .box_list > li.full{flex: 0 0 auto; width: 100%;}
.security_center .box_list .img{background-color: #fafafa; border-radius: 15px; padding: 20px; border: 1px solid #f3f3f3; width: 100%; height: 200px; display: inline-flex; align-items: center; justify-content: center;}
.security_center .box_list .img.autoHeight{height: auto;}
.security_center .box_list .img img{max-width: 100%; height: auto;}
.security_center .box_list .txt{position: relative; padding: 3px 0 0 37px; font-size: 18px; font-weight: var(--fwsb); line-height: 1.3; margin: 20px 0 0;}
.security_center .box_list .txt .circle_num{position: absolute; top: 0; left: 0; display: inline-block; border-radius: 50%; width: 30px; height: 30px; line-height: 30px; text-align: center; font-size: 18px; font-weight: var(--fwsb); color: #fff; background-color: #002367;}

.security_center .box_list.type2{}
.security_center .box_list.type2 > li{flex: 0 0 auto; width: calc((100% - 25px) / 2);}

.security_center .sc_sec{}
.security_center .sc_sec + .sc_sec{margin-top: 70px;}
.security_center .sc_sec .sc_tit{}
.security_center .sc_sec .sc_tit .title{font-size: 18px; font-weight: var(--fwsb); padding: 0 0 7px;}
.security_center .sc_sec .sc_tit .title.hasBB{border-bottom: 2px solid #b7d5ff;}
.security_center .sc_sec .sc_tit .sub{}
.security_center .sc_sec .sc_con{padding: 15px 0 0;}
.security_center .sc_sec .sc_con{}
.security_center .sc_sec .sc_con .table01 table{min-width: 500px !important;}
@media (max-width: 1024px){
    .security_center{padding: 0 0 100px;}
    .security_center .sc_sec + .sc_sec{margin-top: 50px;}

    .security_center .box_list > li{flex: 0 0 auto; width: 100%; padding: 20px;}
    .security_center .box_list.type2 > li{width: 100%;}
    .security_center .box_list .img{padding: 10px; height: auto;}
}

/* 준비 중인 페이지 */
.preparing{
    display: flex; flex-wrap: wrap; gap: 57px; align-items: center; padding: 47px 95px; border-radius: 15px; border: 1px solid #e2f3ff; background-color: #f6fbff;

    & .img{flex: 0 0 auto;}
    & .img img{}
    & .txt{flex: 1;}
    & .txt .pre_tit{font-size: 32px; font-weight: var(--fwm); color: #283e80; line-height: 1.4;}
    & .txt .pre_tit:before{content: ""; display: inline-block; vertical-align: middle; margin: -5px 6px 0 0; width: 34px; height: 34px; background: url("/src/img/2024/contents/preparing_caution.svg") no-repeat center;}
    & .txt .pre_tit.none:before{display: none;}
    & .txt .pre_tit .sm{font-size: 28px;}
    & .txt .desc{font-size: 18px; font-weight: var(--fwm); display: flex; flex-direction: column; gap: 6px; padding: 20px 0 0;}
    & .txt .desc > div{display: flex; flex-wrap: wrap; gap: 16px; align-items: center;}
    & .txt .desc dt{color: #283e80; display: flex; flex-wrap: wrap; align-items: center; gap: 7px;}
    & .txt .desc dd{color: #222;}
    & .txt .desc dd a{}

    @media (max-width: 1280px){
        padding: 30px 30px; gap: 0;

        & .img{width: 40%;}
        & .txt{width: 60%; padding: 0 0 0 5%;}
        & .txt .pre_tit{}
        & .txt .pre_tit .sm{font-size: inherit;}
        & .txt .desc{font-size: 16px;}
    }
    @media (max-width: 960px){
        & .txt .pre_tit{font-size: 3vw;}
    }
    @media (max-width: 768px){
        flex-direction: column; gap: 20px;

        & .img{width: 80%; max-width: 200px; margin: 0 auto;}
        & .txt{width: 100%; text-align: center;}
        & .txt .pre_tit{font-size: 20px;}
        & .txt .pre_tit:before{background-size: contain; width: 24px; height: 24px; margin: -3px 5px 0 0;}
        & .txt .desc{font-size: 1rem;}
        & .txt .desc > div{gap: 10px;}
        & .txt .desc dt img{width: 26px;}
    }
}


/* 레이어 안에 테이블 콜 N개 이상이면 스크롤 */
.chk-col-length-table{}
.chk-col-length-table.over13:has(colgroup col:first-child ~ :nth-last-child(13)){
    /*********************************************************************************
        스크립트
        .chk-col-length-table 클래스가 있는 table 요소의
        colgroup 안에 col 개수를 체크해서 N개 이상이면 over숫자 클래스를 추가합니다.
    *********************************************************************************/

    /* col 갯수가 14개 이상(13개 초과)인 경우 - ※ 주의: 이상/초과 단어 구분해서 이해하기 */
    min-width: auto; max-width: none; width: auto;

    & colgroup col:nth-child(1){min-width: 120px;}
    & colgroup col:nth-child(n+2){min-width: 90px;}

    @media (max-width: 1200px){
        min-width: 1000px; max-width: none; width: 100%;

        & colgroup col:nth-child(1){min-width: 120px;}
        & colgroup col:nth-child(n+2){min-width: auto;}
    }
}


/* not_found */
.not_found{text-align: center; padding: 70px 0; width: 100%;}
.not_found .tit{font-size: 28px; font-weight: var(--fwm); color: #283e80; padding: 0;}
.not_found .des{font-size: 18px; font-weight: var(--fwm); color: #222;}
.not_found .img{padding: 30px 0 0;}
.not_found .img img{}
.not_found .btns{}
.not_found .btns a{}
@media (max-width: 640px){
    .not_found{padding: 10vw 0;}
    .not_found .tit{font-size: 20px;}
    .not_found .des{font-size: 15px;}
    .not_found .img img{width: 90px;}
}


/* sel-industry */
.sel-industry{
    display: flex; flex-wrap: wrap; align-items: center; font-size: 16px;

    & .sel-industry-name{position: relative; padding: 0 0 0 10px; font-weight: var(--fwm); color: #2b384f;}
    & .sel-industry-name:before{content: "*"; position: absolute; top: 2px; left: 0;}
    & .selected{border-radius: 0; border-color: #e2e8f0; margin-left: 23px; color: #222; font-weight: var(--fwm); width: 406px;}
    & .sel-industry-btn{margin-left: 5px; border: 1px solid #e2e8f0; height: 40px; padding: 0 30px; background: #f6f8fb; color: #283e80; font-weight: var(--fwsb); transition: 0.25s;}
    & .sel-industry-btn:hover{background: #eaf1fb; border-color: transparent;}

    @media (width <= 640px){
        gap: 5px;

        & .sel-industry-name{flex: 0 0 auto; width: 100%;}
        & .selected{margin: 0; flex: 1; width: auto;}
        & .sel-industry-btn{flex: 0 0 auto; width: 100px; margin: 0; text-align: center; padding: 0;}
    }

    &.ver2{justify-content: flex-end;}
    &.ver2 .selected{border-radius: 7px; border-color: #d2d8e0; margin-left: 13px; width: 250px;}
    &.ver2 .selected + .btn{margin-left: 10px;}
}


/* sel-cert */
.sel-cert{
    margin: 76px 0 0; padding: 29px 15px 34px; border-radius: 7px; border: 1px solid #ececec;

    & .sel-cert-tit{font-size: 18px; font-weight: var(--fwm); text-align: center;}

    & .sel-cert-btns{display: flex; flex-wrap: wrap; justify-content: center; gap: 25px; padding: 22px 0 0;}
    & .sel-cert-btns button{border: 1px solid #ececec; border-radius: 15px; font-weight: var(--fwm); background: #f7f7f7; color: #283e80; line-height: 68px; width: 242px; padding: 0 20px; font-size: 20px; font-weight: var(--fwm); transition: 0.25s;}
    & .sel-cert-btns button:hover{background-color: #eaf1fb;}
    & .sel-cert-btns button span{display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px;}
    & .sel-cert-btns button span:before{content: ""; display: inline-block; width: 47px; aspect-ratio: 4.7 / 4; background-position: center; background-size: contain; background-repeat: no-repeat;}
/*     & .sel-cert-btns button.btn-cert-type1 span:before{background-image: url("/src/img/2024/contents/btn-cert-type1.svg");} */
/*     & .sel-cert-btns button.btn-cert-type2 span:before{background-image: url("/src/img/2024/contents/btn-cert-type2.svg");} */
    & .sel-cert-btns button.btn-cert-type1 span:before{background: url('/src/img/2024/common/c_ctf01.svg') no-repeat center;}
    & .sel-cert-btns button.btn-cert-type2 span:before{background: url('/src/img/2024/common/c_ctf02.svg') no-repeat center;}

    @media (max-width: 767px){

        & .sel-cert-tit{font-size: 16px;}

        & .sel-cert-btns{gap: 7px;}
        & .sel-cert-btns button{line-height: 48px; font-size: 15px; width: calc((100% - 10px) / 2);}
        & .sel-cert-btns button span{gap: 6px;}
        & .sel-cert-btns button span:before{width: 28px;}
    }
}


/* btn-hint */
.btn-hint{
    position: absolute; left: calc(50% + 160px); top: 50%; transform: translateY(-50%);

    & span{position: relative; display: inline-block; background: #eaf1fb; border: 1px solid #dfe8f6; border-radius: 5px; font-size: 14px; padding: 10px 15px;}
    & span:before{content: ""; position: absolute; top: 50%; transform: translateY(-50%); left: -8px; width: 8px; aspect-ratio: 36 / 41; background: url("/src/img/2024/contents/btn-hint-tail.jpg") no-repeat center; background-size: contain;}

    @media (width <= 1280px){
        flex: 0 0 auto; display: flex; justify-content: center; flex-wrap: wrap; position: relative; left: auto; top: auto; transform: none; width: 100%; margin: 10px 0 0;

        & span:before{top: -5px; left: 50%; transform: rotate(90deg) translateX(-50%);}
    }
}


/* new-biz */
.new-biz{
    display: flex; flex-wrap: wrap; gap: 20px; width: 1500px; margin: 0 auto;

    & .btn.btn-md{padding: 0 15px; min-width: auto;}

    & .cell{background: #fff; border-radius: 10px; box-shadow: 3px 3px 10px rgba(0,0,0,0.1); border: 1px solid #ececec; padding: 30px;}
    & .cell.fullHeight{/* height: calc(100vh - 90px - 40px); */ /* 높이 = 화면높이 - 헤더높이 - 상하여백 */}

    & .cell .cell-sec{width: 100%;}
    & .cell .cell-sec + .cell-sec{margin-top: 50px;}

    & .title{display: flex; gap: 7px; align-items: center; letter-spacing: -0.04em; font-size: 18px; font-weight: var(--fwsb); margin: 0 0 19px;}
    & .title span{color: #283e80; margin-left: -5px;}

    & .new-biz-left{width: 260px;}
    & .new-biz-left .list{display: flex; flex-direction: column; gap: 12px; font-weight: var(--fwm); color: #2b384f; font-size: 14px;}
    & .new-biz-left .list > li{}
    & .new-biz-left .list > li button{}
    & .new-biz-left .list > li > button{width: calc(100% - 55px);text-align: left;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}
    & .new-biz-left .list > li > .btnBox{width: 45px;}
    & .new-biz-left .list > li button.on{color: #5981d9;}
    & .new-biz-left .list > li button span{position: relative; padding: 0 0 0 12px;}
    & .new-biz-left .list > li button span:before{content: ""; position: absolute; top: 4px; left: 0; width: 0; height: 0; border-style: solid; border-width: 4px 0px 4px 6px; border-color: transparent transparent transparent #2b384f;}
    & .new-biz-left .list > li button.on span:before{border-color: transparent transparent transparent #5981d9;}
    & .new-biz-left .bot{border-top: 1px solid #e2e8f0; margin-top: 20px; padding: 20px 0 0;}

    & .new-biz-cont{flex: 1; display: flex; flex-direction: column; flex-wrap: wrap; width: 100%;}
    & .new-biz-cont.atSelect{max-width: calc(100% - 280px);}
    & .new-biz-cont .btn-line{margin-top: auto;}

    & .btn-add-part{display: flex; flex-wrap: wrap; align-items: center; gap: 7px; font-weight: var(--fwm); color: #5981d9;}
    & .btn-add-part .shape{position: relative; margin-top: -1px; display: inline-flex; align-items: center; justify-content: center; width: 16px; aspect-ratio: 1 / 1; border-radius: 3px; background: #5981d9;}
    & .btn-add-part .shape:before,
    & .btn-add-part .shape:after{content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 8px; height: 2px; background: #fff;}
    & .btn-add-part .shape:after{width: 2px; height: 8px;}

    & .bultit{position: relative; padding: 0 0 0 15px; margin: 0 0 13px; font-size: 16px; font-weight: var(--fwsb); line-height: 1.2; color: #222;}
    & .bultit:before{content: ""; position: absolute; top: 4px; left: 0; width: 10px; height: 10px; border-radius: 50%; border: 3px solid; border-color: #5981d9 #5981d9 #283e80 #283e80; transform: rotate(-45deg);}
    & .bultit .guide{font-weight: var(--fwsb); color: #74839b; margin: 7px 0 0;}
    & .bultit .guide .arr{display: inline-block; vertical-align: middle; margin: -4px 0 0; font-size: 12px; font-weight: var(--fwbl);}
    & .bultit .guide .strong{text-decoration: underline; color: #283e80; font-weight: var(--fwsb);}

    & .chkwrap{display: flex; justify-content: center; flex-wrap: wrap;}

    & .table-wrap{}
    & .table-default{}
    & .table-default td{white-space: nowrap !important;}
    & .table-default td .bold{color: #74839b; font-weight: var(--fwsb);}
    & .table-default thead{}
    & .table-default th:has(.select){}
    & .table-default th{}
    & .table-default th .select{margin: 10px 0 10px 5px;}

    & .scrable-vertical{max-height: 400px; overflow-y: auto; overscroll-behavior: contain;}

    & .scrable-horizon{width: 100%; overflow-x: auto; overscroll-behavior: contain;}
    & .scrable-horizon table{table-layout: auto;}
    & .scrable-horizon table th,
    & .scrable-horizon table td{table-layout: auto; white-space: nowrap !important;}

    & .textbox{display: block; border: 1px solid #d1d1d1; border-radius: 5px; height: 100px; width: 100%; resize: none; padding: 15px 10px;}

    & .text-input{display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;}
    & .text-input .textbox{flex: 1; width: auto;}

    & .new-biz-cont.atSelect .scrable-vertical{max-height: 600px; margin: 28px 0 20px;}
    & .new-biz-cont.atCurrent .scrable-vertical{max-height: 600px; margin: 15px 0 0;}

    & .select-line-menu .btn-biz-gray{background-color: #7488a1; display: inline-flex; height: 36px; border-radius: 5px; color: #fff; align-items: center; justify-content: center; font-size: 14px; padding: 0 15px; transition: 0.25s;}
    & .select-line-menu .btn-biz-gray:hover{background-color: #fff; box-shadow: inset 0 0 0 1px #7488a1; color: #7488a1;}
    & .line-con{display: flex; justify-content: space-between;}
    & .line-con .msg{color: #3b79ed; font-size: 14px;}
    & .line-con .date{color: #2b384f; font-size: 14px;}
    & .supr_biz_mng .bix_grid .BIX5__Image{cursor: pointer;}
}


/* btn-leave */
.btn-leave{
    display: block; background: transparent; line-height: 28px; margin-left: auto; margin-top: 10px; font-weight: var(--fwm); color: #666;

    & span{display: inline-flex; align-items: center; gap: 3px;}
    & span:after{content: ""; display: inline-block; vertical-align: middle; margin: 0 0 0 0; width: 14px; height: 14px; background: url("/src/img/2024/contents/btn-leave-arr.svg") no-repeat center; filter: invert(40%) sepia(0%) saturate(1%) hue-rotate(153deg) brightness(98%) contrast(92%);}
    &:hover span{text-decoration: underline;}
}


/* purchase_complete */
.purchase_complete{

    & .pc_title{color: #283e80; font-weight: var(--fwm); font-size: 28px; line-height: 1.2; text-align: center; margin: 0 0 40px;}

    & .pc_product{padding: 22px 0; text-align: center; background-color: #f6f8fb; border-top: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0;}
    & .pc_product .type{font-size: 30px; font-weight: var(--fwb); line-height: 1.2;}
    & .pc_product .desc{font-size: 15px; padding: 4px 0 0;}

    @media (width <= 640px){
        & .pc_title{font-size: 20px; margin: 0 0 20px;}
        & .pc_product .type{font-size: 20px;}
    }
    @media (width <= 500px){
        & .table-default{}
        & .table-default colgroup{}
        & .table-default colgroup col:nth-child(1){width: 100px;}
        & .table-default colgroup col:nth-child(2){width: 120px;}
        & .table-default colgroup col:nth-child(3){width: 120px;}
        & .table-default colgroup col:nth-child(4){width: 100px;}
    }
}


/* 도움이 되는 사이트 리스트 */
@media (width <= 860px){
    .recommend_website_list{display: none;}
}

.recommend_website_list_mobile{
    display: none; /* display: flex; */ flex-direction: column; gap: 80px; margin-bottom: 100px;

    & .group{}

    & .g-head{padding: 12px 10px; border-top: 1px solid #bfcbdb; color: #74839b; text-align: center; background-color: #f6f8fb;}
    & .g-head:not(:first-child){border-top: none; border-bottom: 1px solid #e2e8f0;}
    & .g-head strong{font-size: 16px; font-weight: var(--fwsb);}
    & .g-head p{font-size: 14px; padding: 2px 0 0;}

    & .g-body{}

    & .g-item{display: flex; flex-wrap: wrap; align-items: center; border-bottom: 1px solid #e2e8f0;}
    & .g-item > div{}
    & .g-item .img{flex: 1; padding: 10px 0;}
    & .g-item .img a{display: block; text-align: center;}
    & .g-item .img a img{width: 100%; height: auto;}
    & .g-item .txt{flex: 1; text-align: center; padding: 10px; font-size: 16px;}

    @media (width <= 860px){
        display: flex;
    }
}


/* 레이어팝업 오프너 아이콘이 있는 경우 */
.hasIco_layer{
    position: relative; display: inline-block; vertical-align: middle; max-width: 100%; padding-right: 22px; padding-top: 3px; padding-bottom: 2px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;
    &:before{content: ""; position: absolute; top: 1px; right: 0; width: 20px; height: auto; aspect-ratio: 1 / 1; background: transparent url("/src/img/2024/contents/ico_hasLayer.svg") no-repeat center; background-size: 14px auto; filter: brightness(0) saturate(100%) invert(50%) sepia(31%) saturate(290%) hue-rotate(179deg) brightness(91%) contrast(91%);}

    &:hover{color: #6b88ff;}
    &:hover:before{filter: brightness(0) saturate(100%) invert(48%) sepia(57%) saturate(1935%) hue-rotate(208deg) brightness(101%) contrast(102%);}

    .level1 &{color: var(--level01);}
    .level1 &:before,
    .level1 &:hover:before{filter: brightness(0) saturate(100%) invert(29%) sepia(76%) saturate(5077%) hue-rotate(220deg) brightness(96%) contrast(100%) !important;}
    .level2 &{color: var(--level02);}
    .level2 &:before,
    .level2 &:hover:before{filter: brightness(0) saturate(100%) invert(52%) sepia(90%) saturate(1336%) hue-rotate(167deg) brightness(95%) contrast(98%) !important;}
    .level3 &{color: var(--level03);}
    .level3 &:before,
    .level3 &:hover:before{filter: brightness(0) saturate(100%) invert(54%) sepia(33%) saturate(4960%) hue-rotate(67deg) brightness(93%) contrast(87%) !important;}
    .level4 &{color: var(--level04);}
    .level4 &:before,
    .level4 &:hover:before{filter: brightness(0) saturate(100%) invert(57%) sepia(86%) saturate(823%) hue-rotate(334deg) brightness(99%) contrast(96%) !important;}
    .level5 &{color: var(--level05);}
    .level5 &:before,
    .level5 &:hover:before{filter: brightness(0) saturate(100%) invert(18%) sepia(96%) saturate(3073%) hue-rotate(349deg) brightness(99%) contrast(88%) !important;}
}

/* tool-tip */
.tool-tip{
    position: absolute; top: 0; right: calc(100% + 10px); width: 567px; background: #f9f9f9; border: 1px solid #dfe2e5; border-radius: 15px; padding: 30px 35px; font-size: 13px; text-align: left; color: var(--main);
    opacity: 0; visibility: hidden; z-index: 9; pointer-events: none;
    &:before{content: ""; position: absolute; top: 0; left: 100%; width: 20px; height: 100%;}

    & .tip-tit{
        position: relative; padding: 0 0 0 20px; font-size: 15px; font-weight: var(--fwb); margin: 0 0 10px; line-height: 1.15;
        &:before{content: ""; position: absolute; top: 0; left: 0; display: inline-block; width: 16px; height: auto; aspect-ratio: 1 / 1; background: url("/src/img/2024/contents/ico_caution2.svg") no-repeat center; background-size: 100% auto;}
    }
    & .tip-list{
        & + .tip-list{margin-top: 10px;}
        & dt{font-size: 15px; font-weight: var(--fwsb); margin: 0 0 4px;}
        & dd{

            & > ul{
                & >li{position: relative; padding: 0 0 0 12px; line-height: 1.2;}
                & >li + li{margin-top: 3px;}
                & >li:before{content: "-"; position: absolute; top: 0; left: 0;}
            }
        }
    }

    /* 터치 디스플레이인 기기에서만 적용 */
    .button-default.hasTooltip.on &{opacity: 1; visibility: visible; pointer-events: initial;}

    @media (hover: hover) and (pointer: fine) {
        /* 터치 디스플레이가 아닌 기기에서만 적용 */
        .hasTooltip:hover &{opacity: 1; visibility: visible; pointer-events: initial;}
    }

    /* 반응형 */
    @container container-query (max-width: 800px) {
        top: calc(100% + 10px); right: 0; padding: 20px; width: 400px;
        &:before{display: none;}
    }
    @container container-query (max-width: 640px) {
        padding: 15px 10px; width: 310px;
    }
}


/* 거래처 모니터링 */
.top-intro{
    position: relative; letter-spacing: -0.02em; border: 1px solid #e3eaf9; border-radius: 5px; padding: 36px 40px 38px 230px; background-color: #f1f6ff;

    & .ti-deco{position: absolute; top: 26px; left: 50px;}
    & .ti-deco img{width: 148px; height: auto;}
    & .ti-tit{font-size: 20px; font-weight: var(--fwsb); line-height: 1.3; color: #2850fa; margin: 0 0 15px;}
    & .ti-con{font-size: 16px; font-weight: var(--fwsb); color: #2b384f;}
    & .ti-con .dot-list{}
    & .ti-con .dot-list > li{position: relative; padding: 0 0 0 14px;}
    & .ti-con .dot-list > li:before{content: ""; position: absolute; top: 9px; left: 0; width: 3px; height: 3px; border-radius: 50%; background-color: #2b384f;}
    & .ti-con .dot-list > li + li{margin-top: 6px;}

    @media (width <= 1024px){
        padding: 30px 30px 30px 170px;

        & .ti-deco{left: 30px; top: 30px;}
        & .ti-deco img{width: 120px;}
        & .ti-tit{font-size: 18px; margin: 0 0 10px;}
        & .ti-con{font-size: 15px;}
    }
    @media (width <= 768px){
        padding: 30px;

        & .ti-deco{display: none;}
    }
    @media (width <= 640px){
        padding: 20px;

        & .ti-tit{font-size: 17px;}
        & .ti-con{word-break: break-all; font-size: 14px;}
    }
}

.use-state{
    margin-top: 28px; border-radius: 5px; box-shadow: inset 0 0 0 4px #f1f6ff; padding: 40px 60px; letter-spacing: -0.02em;
    & + .use-state{margin-top: 10px;}

    & .us-top{
        position: relative; display: flex; flex-wrap: wrap; align-items: center;

        & .us-tit{position: relative; padding: 0 0 0 28px; font-size: 20px; font-weight: var(--fwsb); color: #222;}
        & .us-tit .shape{position: absolute; top: 5px; left: 0; display: inline-block; vertical-align: middle; width: 20px; height: 20px; background: #283e80 url("/src/img/2024/contents/bul-circle-chk.svg") no-repeat center; border-radius: 50%; background-size: 100% auto;}

        & .us-current{position: relative; font-size: 18px; font-weight: var(--fwsb); color: #9ea8b9; padding: 0 0 0 20px; margin: 0 0 0 20px;}
        & .us-current:before{content: ""; position: absolute; top: 3px; left: 0; display: inline-block; width: 1px; height: 20px; background-color: #d9d9d9;}
        & .us-current span{color: #9ea8b9;}
        & .us-current span.off{color: #9ea8b9;}
        & .us-current span.on{color: #2850fa;}

        & .us-btns{margin: 0 0 0 auto; display: flex; flex-wrap: wrap;}
        & .us-btns .us-notice{order: 1; position: relative; margin: 0 15px 0 0; border-radius: 34px; font-size: 15px; letter-spacing: -0.02em; padding: 8px 10px 8px 35px; color: #ff0b40; background-color: #fff2f5;}
        & .us-btns .us-notice:before{content: ""; position: absolute; top: 10px; left: 15px; display: inline-block; vertical-align: middle; margin: 0 0 0 0; width: 16px; height: auto; aspect-ratio: 1 / 1; background: url("/src/img/2024/contents/bul-circle-chk-red.svg") no-repeat center; background-size: 100% auto;}
        & .us-btns .us-notice:after{content: ""; position: absolute; top: 50%; transform: translateY(-50%); left: 100%; margin: 0 0 0 -1px; width: 0; height: 0; border-style: solid; border-width: 4px 0px 4px 6px; border-color: transparent transparent transparent #fff2f5;}
        & .us-btns .btn{order: 2; position: relative; display: inline-flex;}
    }

    & .us-bottom{padding: 20px 0 0 0; margin: 20px 0 0 0; flex: 0 0 auto; width: 100%; display: flex; flex-wrap: wrap; gap: 0 0.4em; border-top: 1px dashed #d1dbe9; font-weight: var(--fwm); font-size: 14px; color: #303b4e;}
    & .us-bottom .fwb{font-weight: var(--fwb);}
    & .us-bottom .fwr{font-weight: var(--fwr);}
    & .us-bottom .accent{color: #ff0b40;}

    @media (width <= 1024px){
        padding: 35px 35px;

        & .us-top{
            padding: 0 150px 55px 0;

            & .us-tit{font-size: 18px;}
            & .us-tit .shape{top: 3px;}

            & .us-current{font-size: 17px; padding: 0 0 0 15px; margin: 0 0 0 15px;}

            & .us-btns{position: absolute; top: -4px; right: 0; display: block; text-align: right; margin: 0 0 0 auto;}
            & .us-btns .us-notice{margin: 10px 0 0 0;}
            & .us-btns .us-notice:after{display: none;}
            /* & .us-btns .btn .notice{transform: none; top: calc(100% + 5px); right: 0;} */
        }
    }
    @media (width <= 640px){
        padding: 25px 20px;

        & .us-top{
            padding: 0;

            & .us-tit{font-size: 17px; padding: 0 0 0 22px;}
            & .us-tit .shape{width: 16px; height: 16px; top: 5px;}

            & .us-current{font-size: 15px; padding: 0 0 0 10px; margin: 0 0 0 10px;}
            & .us-current:before{height: 15px;}

            & .us-btns{position: static; top: auto; right: auto; margin: 30px 0 0; display: block; width: 100%; text-align: center;}
            & .us-btns .us-notice{display: inline-block; margin: 15px 0 0; text-align: left; font-size: 13px; letter-spacing: -0.04em;}
            & .us-btns .us-notice::after{top: 0; left: 50%; transform: translate(-50%, -100%); display: block; margin: 0; border-width: 0px 4px 6px 4px; border-color: transparent transparent #fff2f5 transparent;}
            & .us-btns .btn{display: flex; width: 100%;}
        }
    }
}

.monitor-summary{
    display: flex; flex-wrap: wrap; gap: 15px; margin: 0 0 30px;

    & .mts-bd-box{
        border: 1px solid #d4e0f4; box-shadow: inset 0 0 0 4px #f6f8fb; border-radius: 14px; padding: 28px 22px;
    }

    & .mts-item{
        flex: 1; position: relative; text-align: center;
        & + .mts-item{}
        & + .mts-item:before{content: ""; position: absolute; top: 50%; transform: translateY(-50%); left: 0; width: 1px; height: 40px; background: #d1dbf0;}

        & dt{font-weight: var(--fwm); letter-spacing: -0.03em; color: #303b4e;}
        & dd{padding: 2px 0 0;}
        & dd .leng{font-size: 14px; font-weight: var(--fwr); letter-spacing: -0.04em; color: #697385;}
        & dd .leng .num{display: inline-block; font-size: 35px; color: #2850fa; margin: 0 0.1em 0 0; line-height: 1; transform: translateY(2px);}
    }

    & .mts-total{
        flex: 0 0 auto; width: 264px;
    }

    & .mts-list{
        flex: 1; display: flex; flex-wrap: wrap;
    }

    @media (width <= 1280px){
        & .mts-bd-box{padding: 28px 2%;}

        & .mts-total{width: 220px;}
    }
    @media (width <= 1024px){

        & .mts-total{width: 180px;}
        & .mts-list{}
    }
    @media (width <= 768px){
        & .mts-total{flex: 0 0 auto; width: 100%;}
        & .mts-bd-box{padding: 20px 2%;}
    }
    @media (width <= 640px){
        gap: 10px;

        & .mts-item{
            display: flex; flex-wrap: wrap; align-items: center; padding: 4px 20px;
            & + .mts-item:before{background: none; height: 0; border-top: 1px dashed #d1dbf0; width: auto; transform: none; top: 0; left: 3px; right: 3px;}
            &:first-child{padding-top: 6px;}
            &:last-child{padding-bottom: 6px;}

            & dd{margin-left: auto; padding: 0;}
            & dd .leng .num{font-size: 26px;}
        }
        & .mts-list{
            flex-direction: column; gap: 0;
        }

        & .mts-bd-box{
            padding: 0 0; box-shadow: inset 0 0 0 3px #f6f8fb; border-radius: 8px;
        }
    }
}

.hasBlur{
    position: relative;

    & .hasBlurBox{position: relative;}
    & .hasBlurBox > *{filter: blur(2px); pointer-events: none; user-select: none;}

    & .blur_guide{
        position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 670px; margin: 0 auto; padding: 45px 20px; border-radius: 10px; box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1); background: #fff; border: 2px solid #b3c2ff; text-align: center;

        & .txt{letter-spacing: -0.02em; font-size: 20px; font-weight: var(--fwsb); color: #222; line-height: 1.3; text-wrap: balance;}
        & .btn_blur_guide{margin: 20px 0 0; display: inline-block; padding: 0 20px; font-size: 16px; font-weight: var(--fwm); letter-spacing: -0.03em; line-height: 36px; border-radius: 38px; color: #fff; background-color: #6b88ff; border: 1px solid transparent; transition: 0.1s;}
        & .btn_blur_guide span{}
        & .btn_blur_guide:hover{background-color: #fff; border-color: #6b88ff; color: #6b88ff;}

        @media (max-width: 1280px){
            padding: 30px 20px;

            & .txt{font-size: 18px;}
            & .btn_blur_guide{font-size: 15px;}
        }
        @media (max-width: 768px){

            & .txt{font-size: 16px;}
            & .btn_blur_guide{font-size: 15px; line-height: 34px;}
        }
    }
}

.view-deail-btn{
    display: inline-block; vertical-align: middle; width: 26px; height: auto; aspect-ratio: 1 / 1; border-radius: 8px; background: #eff1f3 url("/src/img/2024/contents/view-detail-btn.svg") no-repeat center; font-size: 0;
    &:hover{background-image: url("/src/img/2024/contents/view-detail-btn-on.svg");}
}

.sub_content.monitor{

    & .tab_rowscr{margin-top: 80px;}

    @media (width <= 640px){

        & .tab_rowscr{margin-top: 50px;}
    }
}

.mt_sub_txt {
	font-size: 16px;
	font-weight: normal;
}

.no_am_txt {
	text-align: center;
	padding:160px 10px 10px 10px;
}

/* new 이용권 */
.sub_content.voucher{
    --spacing: 50px;
    @media (width <= 640px){
        --spacing: 40px;
    }
}

.voucher-vat{display: block; text-align: right; font-size: 1rem; font-weight: var(--fwr); letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 13px;}
.voucher-list{
    display: flex; flex-wrap: wrap; gap: 0 20px; letter-spacing: -0.02em; color: #222;


    & .voucher-item{
        flex: 1; display: flex; flex-direction: column; border-radius: 5px; overflow: hidden;

        &.voucher-1{}
        &.voucher-2{}
        &.voucher-3{}
        &.voucher-4{}
        &.voucher-5{}
        &.voucher-6{}

        & .voucher-tit{flex: 0 0 auto; padding: 12px 0 27.5px; font-size: 18px; font-weight: var(--fwsb); line-height: 1.25; text-align: center; color: #fff;}
        &.voucher-1 .voucher-tit{background: var(--voucher-color1);}
        &.voucher-2 .voucher-tit{background: var(--voucher-color2);}
        &.voucher-3 .voucher-tit{background: var(--voucher-color3);}
        &.voucher-4 .voucher-tit{background: var(--voucher-color4);}
        &.voucher-5 .voucher-tit{background: var(--voucher-color5);}
        &.voucher-6 .voucher-tit{background: #283c82}
        & .voucher-tit span{}

        & .voucher-con{flex: 1; display: flex; flex-direction: column; margin: -14px 0 0; overflow: hidden; border: 1px solid #e1e7ee; border-radius: 10px 10px 5px 5px; background: #fff;}
        & .voucher-con .top{flex: 0 0 auto; height: 225px; display: flex; flex-direction: column; text-align: center; padding: 33px 25px 20px;}
        & .voucher-con .top-head{flex: 0 0 auto;}
        & .voucher-con .top-head .price{font-size: 30px; font-weight: var(--fwb); line-height: 1.1;}
        & .voucher-con .top-head .price .unit{display: inline-block; vertical-align: middle; margin: 0.2em 0 0 0.1em; font-size: 0.534em; font-weight: var(--fwr);}
        & .voucher-con .top-head .price .text{}
        & .voucher-con .top-body{flex: 1; padding: 0 0 26px;}
        & .voucher-con .top-body .txt{height: 100%; align-content: center;}
        & .voucher-con .top-body .txt .info{font-size: 16px;}
        & .voucher-con .top-body .txt .info.perMonth{}
        & .voucher-con .top-body .txt .info.self{padding: 0 0 4px;}
        & .voucher-con .top-body .txt .info .txt{display: inline-block; border-bottom: 1px solid #cfcfcf; font-size: 14px; line-height: 1.643;}
        & .voucher-con .top-body .txt .info.self .txt{border: none;}
        & .voucher-con .top-body .txt .info .txt b{font-weight: var(--fwb);}
        & .voucher-con .top-body .txt .info .per{font-weight: var(--fwb);}
        & .voucher-con .top-body .txt .info .per .count{color: #999;}
        &.voucher-1 .voucher-con .top-body .txt .info .per .count{}
        &.voucher-2 .voucher-con .top-body .txt .info .per .count{color: #2bbef1;}
        &.voucher-3 .voucher-con .top-body .txt .info .per .count{color: #349bee;}
        &.voucher-4 .voucher-con .top-body .txt .info .per .count{color: #417ce8;}
        &.voucher-5 .voucher-con .top-body .txt .info .per .count{color: #5c76e4;}
        & .voucher-con .top-body .txt .info .small{font-size: 12px; line-height: 1.2;}
        & .voucher-con .top-foot{flex: 0 0 auto;}
        & .voucher-con .top-foot .btn{display: block; padding: 0 10px; border-radius: 5px; border: 1px solid #AEB6CF; font-weight: var(--fwsb); letter-spacing: -0.04em; line-height: 34px; text-align: center; color: #283e80; background: #fff;}
        & .voucher-con .top-foot .btn.blue{border-color: #cee2f2; background-color: #eff8ff;}
        & .voucher-con .top-foot .btn span{}
        & .voucher-con .top-foot .btn:hover{border-color: transparent; background: #002367; color: #fff;}
        &.voucher-1 .voucher-con .top-foot .btn:hover{border-color: transparent; background: var(--voucher-color1); color: #fff;}
        &.voucher-2 .voucher-con .top-foot .btn:hover{border-color: transparent; background: var(--voucher-color2); color: #fff;}
        &.voucher-3 .voucher-con .top-foot .btn:hover{border-color: transparent; background: var(--voucher-color3); color: #fff;}
        &.voucher-4 .voucher-con .top-foot .btn:hover{border-color: transparent; background: var(--voucher-color4); color: #fff;}
        &.voucher-5 .voucher-con .top-foot .btn:hover{border-color: transparent; background: var(--voucher-color5); color: #fff;}

        & .voucher-con .bot{flex: 1; padding: 26px 25px 20px; border-top: 1px solid #e1e7ee; background: #f9f9f9;}
        & .voucher-con .bot .specs{display: flex; flex-wrap: wrap; gap: 20px;}
        & .voucher-con .bot .specs > li{flex: 0 0 auto; width: 100%; display: flex; flex-wrap: wrap;}
        & .voucher-con .bot .specs > li .name{line-height: 1.3; font-size: 16px; font-weight: var(--fwr); color: #989898;}
        & .voucher-con .bot .specs > li.on .name{font-weight: var(--fwsb); color: #222;}
        & .voucher-con .bot .specs > li .name span{display: block; font-size: 0.875em; font-weight: var(--fwr);}
        & .voucher-con .bot .specs > li .shape{margin: 0 0 0 auto; line-height: 1;}
        & .voucher-con .bot .specs > li .shape img{}
        & .voucher-con .bot .specs > li.on .shape img{filter: brightness(0) saturate(100%) invert(59%) sepia(36%) saturate(4392%) hue-rotate(201deg) brightness(101%) contrast(103%);}
    }

    @media (width <= 1280px){
        & .voucher-item {
            & .voucher-con .top{padding: 33px 15px 20px;}
            & .voucher-con .top-head .price{font-size: 28px;}
            & .voucher-con .bot{padding: 26px 15px 20px;}
        }

    }
    @media (width <= 980px){
        gap: 15px;

        & .voucher-item{

            & .voucher-con .top-head .price{font-size: 2.6vw;}
            & .voucher-con .bot .specs > li .name{font-size: 1.5vw;}
        }
    }
    @media (width <= 800px){
        /* & .voucher-item{flex: 0 0 auto; width: calc( (100% - 40px) / 3 );} */
        justify-content: center; gap: 40px;

        & .voucher-item{
            flex: 0 0 auto; width: 100%; max-width: 460px; border-radius: 20px; outline: 1px solid #ddd; outline-offset: -1px;
            &.voucher-1{outline: 1px solid #20D3D3;}
            &.voucher-2{outline: 1px solid #2BBEF1 ;}
            &.voucher-3{outline: 1px solid #379CEF ;}
            &.voucher-4{outline: 1px solid #447EE9 ;}
            &.voucher-5{outline: 1px solid #5C76E4 ;}
            &.voucher-6{outline: 1px solid #283c82;}

            & .voucher-con{border-radius: 10px 10px 20px 20px;}
            & .voucher-con .top{height: auto; padding: 20px 15px;}
            & .voucher-con .top-head .price{font-size: 26px;}
            & .voucher-con .top-body{padding: 0 0 20px;}
            & .voucher-con .bot{padding: 26px 15% 20px;}
            & .voucher-con .bot .specs{gap: 13px 30px;}
            & .voucher-con .bot .specs > li{width: calc( (100% - 30px) / 2 );}
            & .voucher-con .bot .specs > li .name{font-size: 15px; flex: 0 0 auto; width: 120px;}
            & .voucher-con .bot .specs > li .shape{margin: 0;}
        }
    }
    @media (width <= 500px){

        & .voucher-item{

            & .voucher-con .bot{padding: 26px 15px 20px;}
        }
    }
}

.voucher-banner{
    position: relative; padding: 35px 44px 35px 324px; display: flex; flex-wrap: wrap; align-items: center; border-radius: 5px; overflow: hidden; background: linear-gradient(271.51deg, #3D56AD 34.84%, #374C98 92.38%); color: #fff; margin: var(--spacing) 0 var(--spacing);

    & .title{position: absolute; top: 10px; left: 66px; display: inline-block; transform: rotate(-15deg);}
    & .title img{display: block; width: 100%; height: auto;}

    & .text{flex: 1; padding: 0 10px 0 0; font-size: 25px; font-weight: var(--fwsb); letter-spacing: -0.02em; line-height: 1.25;}
    & .text .sup{font-size: 0.8em; color: #9dd6ff; text-wrap: balance;}
    & .text .sup br{display: none;}
    & .text .con{padding: 10px 0 0;}

    & .btns{flex: 0 0 auto; position: relative; margin-left: auto; padding: 0 0 0 40px;}
    & .btns:before{content: ""; position: absolute; top: 50%; transform: translateY(-50%); left: 0; width: 1px; height: 48px; background-color: rgba(217,217,217,0.3);}
    & .btns .btn{padding: 0 30px; border-radius: 5px; line-height: 48px; letter-spacing: -0.04em; font-size: 18px; font-weight: var(--fwsb); background-color: #eff8ff; color: #283E80;}
    & .btns .btn:hover{}

    @media (width <= 1280px){
        padding: 35px 40px 35px 296px;

        & .title{left: 45px;}
        & .text{font-size: 24px;}
        & .text .sup{font-size: 0.64em;}
        & .text .con{line-height: 1.2; padding: 7px 0 0;}
        & .btns{padding: 0 0 0 20px;}
        & .btns:before{}
    }
    @media (width <= 768px){
        padding: 65px 30px 40px; flex-direction: column;

        & .title{position: static; top: auto; left: auto;}
        & .text{padding: 0; text-align: center; margin: 50px 0 0;}
        & .btns{margin: 20px 0 0; padding: 0;}
        & .btns:before{display: none;}
    }
    @media (width <= 500px){
        padding: 45px 20px 30px;

        & .title{width: 170px;}
        & .text{margin: 40px 0 0;}
        & .text .sup{font-size: 14px;}
        & .text .con{font-size: 18px;}
        & .btns .btn{line-height: 42px; font-size: 15px;}
    }
}

.event-banner{
    display: flex; flex-wrap: wrap; align-items: center; gap: 15px; padding: 42px 85px; border-radius: 5px; overflow: hidden; letter-spacing: 0; background: #ddd url("/src/img/2024/contents/event-banner-bg.svg") no-repeat center; background-size: cover; margin: var(--spacing) 0 0;

    & .eb-text{
        font-size: 45px; color: #283c82;

        & .sup{font-size: 0.667em; font-weight: var(--fwb);}
        & .title{font-weight: var(--fwbl);}
        & .title .accent{color: #eb077d;}
    }


    & .eb-info{
        margin-left: auto; display: flex; flex-wrap: wrap;

        & .item{flex: 0 0 auto; width: 240px; height: 136px; display: inline-flex; flex-direction: column; justify-content: center; text-align: center; border-radius: 150px; font-size: 40px; font-weight: var(--fwb); letter-spacing: -0.04em; color: #fff; background-color: rgba(40,60,130,0.85);}
        & .item + .item{position: relative; margin-left: -36px;}
        & .item + .item:before{content: ""; position: absolute; top: 50%; transform: translateY(-50%); left: 8px; width: 21px; height: 5px; background-color: #fff;}
        & .item + .item:after{content: ""; position: absolute; top: 50%; transform: translateY(-50%); left: 16px; width: 5px; height: 21px; background-color: #fff;}
        & .item .name{font-size: 0.6em;}
        & .item .period{color: #5cceff;}
        & .item .period.red{color: #ff42a4;}
    }

    @media (width <= 1024px){
        padding: 30px 5%;

        & .eb-text{font-size: clamp(28px,4vw,40px);}

        & .eb-info{
            & .item{width: 25vw; height: 120px; font-size: 4.3vw;}
        }
    }
    @media (width <= 640px){

        & .eb-info{
            & .item{height: 100px;}
            & .item + .item{margin-left: -30px;}
            & .item + .item:before{width: 13px; height: 3px; left: 8px;}
            & .item + .item:after{width: 3px; height: 13px; left: 13px;}
        }
    }
    @media (width <= 560px){
        justify-content: center;
        & .eb-text{
            text-align: center;
        }
        & .eb-info{
            flex: 0 0 auto; width: 100%; justify-content: center;
            & .item{width: calc( (100% + 30px) / 2 ); font-size: 20px;}
            & .item + .item{margin-left: -30px;}
            & .item .name{font-size: 18px;}
        }
    }
}

/* 코딧 뱅크뷰 (contents) - 251111 */
.bank {width: 100%; max-width: 1500px; margin: 0 auto;
    & .bank-top {padding: 80px 0 60px;
        & .pageTop {padding: 0;
            .page_tit h2 {font-weight: var(--fwsb);}
        }
    }
    & .bank-wrap {display: flex; gap: 20px;
        & .cell {background: #fff; border-radius: 10px; box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1); border: 1px solid #ececec; padding: 25px 16px;}
        & .bank-left {width: 490px;
            & .bank-search {display: flex; flex-direction: column; gap: 8px;
                & .search-item {display: flex; align-items: center; gap: 8px;
                    & .search-label {width: 65px;
                        & p {font-size: 14px; font-weight: var(--fwsb);}
                    }
                    & .search-inp {display: flex; justify-content: space-between; align-items: center; flex: 1; gap: 4px;
                        & input {width: 100%; height: 40px; font-size: 14px; padding: 0 2px 0 5px; border-radius: 5px;}
                        & input[type="date"] {width: 115px; border: 1px solid #D1D1D1;}
                        & input[type="text"].acv {width: 115px; background-image: url("/gngnet_basa/src/img/2024/contents/lbs-sch.svg"); background-repeat: no-repeat; background-position: center right 10px; background-size: 16px; padding: 0 16px 0 2px;}
                        & span {display: block; width: 10px; text-align: center;}
                    }
                    & .search-btn {display: flex; gap: 8px;
                        & button {width: 70px; height: 40px; font-size: 14px; color: #fff; border-radius: 5px;
                            &.small {width: 50px;}
                            &.year {background: #5981D9;}
                            &.sbmt {background: #283E80;}
                        }
                    }
                }
            }
            & .bank-con {margin: 50px 0 0;
                & .tit {display: flex; justify-content: space-between; margin: 0 0 10px;
                    & .tit-bullet {position: relative; padding: 0 0 0 17px; font-size: 16px; font-weight: var(--fwsb); color: var(--main); letter-spacing: -0.04em;
                        &::before {content: ""; position: absolute; top: 5px; left: 0; width: 13px; height: 13px; border-radius: 50%; border: 4px solid; border-color: #5981d9 #5981d9 #283e80 #283e80; transform: rotate(-45deg);}
                        & p {}
                    }
                    & .tit-cate {display: flex; gap: 15px;
                        & .tit-cate-con {display: flex; align-items: center; gap: 6px;
                            & input[type="radio"] {width: 20px; height: 20px;}
                            & label {font-size: 14px; line-height: 1;}
                        }
                    }
                }
            }
        }
        & .bank-cont {flex: 1;
            & .bank-tit {display: flex; justify-content: space-between; margin: 0 0 20px;
                & .subject {position: relative; display: flex; align-items: center; gap: 7px;
                    > p {font-size: 24px; line-height: 1; font-weight: var(--fwsb);}
                    > img {width: 26px; cursor: pointer;}
                    & .subject-more {position: absolute; top: calc(100% + 8px); left: 0; border: 1px solid #ececec; background: #fff; border-radius: 10px; padding: 10px 16px; opacity: 0; pointer-events: none; transition: all 0.2s;
                        & p {position: relative; font-size: 14px; white-space: nowrap; padding: 0 0 0 8px;
                            &::before {content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 2px; height: 2px; background: #222; border-radius: 50%;}
                        }
                    }
                    > img:hover + .subject-more {opacity: 1;}
                }
                & .btn {
                    & button {display: flex; align-items: center; gap: 7px; background: #283e80; padding: 10px 15px; border-radius: 7px;
                        & p {font-size: 16px; font-weight: var(--fwb); color: #fff;}
                        & img {}
                    }
                }
            }
            & .bank-total {display: flex; justify-content: space-between; align-items: center; margin: 0 0 10px;
                & p {font-weight: var(--fwb);}
                & span {}
            }
            & .bank-con {height: calc(100% - 94px);}
        }
    }
    @media (width <= 1560px) {padding: 0 20px;}
    @media (width <= 1280px) {
        & .bank-top {padding: 60px 0 40px;}
        & .bank-wrap {flex-wrap: wrap;
            & .bank-left {width: 100%;
                & .bank-con {
                    & .tit {padding: 0;}
                }
                & .bank-search {
                    & .search-item {
                        & .search-inp {justify-content: flex-start; flex: 0 0 auto;}
                    }
                }
            }
            & .bank-cont {width: 100%;}
        }
    }
    @media (width <= 640px) {
        & .bank-top {padding: 30px 0 20px;}
        & .bank-wrap {
            & .bank-left {
                & .bank-con {
                    & .tit {
                        & .tit-bullet {
                            & p {font-size: 15px;}
                        }
                        & .tit-cate {
                            & .tit-cate-con {
                                & input[type="radio"] {width: 16px; height: 16px;}
                            }
                        }
                    }
                }
                & .bank-search {gap: 4px;
                    & .search-item {gap: 4px;
                        & .search-label {width: 60px;}
                        & .search-inp {
                            & input {width: 120px; font-size: 12px; height: 32px;}
                            & input[type="date"] {width: 100px;}
                            & input[type="text"].acv {width: 100px;}
                        }
                        & .search-btn {gap: 4px;
                            & button {font-size: 12px; height: 32px;}
                        }
                    }
                }
            }
            & .bank-cont {width: 100%;
                & .bank-tit {
                    & .subject {
                        & p {font-size: 18px;}
                        & button img {width: 16px;}
                    }
                    & .btn {
                        & button {height: 32px; padding: 0 15px;
                            & p {font-size: 14px;}
                            & img {width: 16px;}
                        }
                    }
                }
                & .bank-total {
                    & p {font-size: 14px;}
                    & span {font-size: 14px;}
                }
            }
        }
    }
    @media (width <= 460px) {
        & .bank-wrap {
            & .bank-left {
                & .bank-search {
                    & .search-item {justify-content: flex-end; flex-wrap: wrap;
                        & .search-inp {width: calc(100% - 64px);
                            & input {width: calc((100% - 10px) / 2);}
                            & input[type="date"] {width: calc((100% - 10px) / 2);}
                            & input[type="text"] {width: calc((100% - 10px) / 2);}
                            & input[type="text"].acv {width: calc((100% - 10px) / 2);}
                        }
                        & .search-btn {width: calc(100% - 64px);
                            & button {width: 100%;
                                &.small {width: 100%;}
                            }
                        }
                    }
                }
            }
        }
    }
}

/* 코딧 뱅크뷰 (search layer) - 251112 */
.l_cont {
    & .l_bank_sch {
        & .radio-group {
            > ul {display: flex; gap: 15px;
                > li {
                    & input[type="radio"] {display: none;}
                    & label {display: flex; align-items: center; gap: 6px;
                        & span {position: relative; display: block; width: 20px; height: 20px; border-radius: 50%; border: 1px solid #d1d1d1;
                            &::after {content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 10px; height: 10px; background: #8F8F8F; border-radius: 50%; opacity: 0;}
                        }
                        & p {font-size: 14px; line-height: 20px; font-weight: var(--fwsb);}
                    }
                    & input[type="radio"]:checked + label span::after {opacity: 1;}
                }
            }
        }
        & .input-group {display: flex; align-items: center; gap: 10px; margin: 15px 0 30px;
            & .left {display: flex; align-items: center; gap: 10px;
                & .con {display: flex; align-items: center; gap: 10px;
                    & p {font-size: 14px; font-weight: var(--fwsb);}
                    & input[type="text"] {width: 100px; height: 40px; border-radius: 7px; border: 1px solid #d2d8e0;
                        &.large {width: 180px;}
                    }
                }
            }
            & .right {display: flex; flex: 1; gap: 10px;
                & button {flex: 1; height: 40px; border-radius: 7px;
                    &.see {color: #fff; background: #283E80;}
                    &.del {background: #F6F6F6; border: 1px solid #ececec;}
                }
            }
        }
    }
    @media (width <= 640px) {
        & .l_bank_sch {
            & .radio-group {
                & > ul {
                    & > li {
                        & label {
                            & span {width: 16px; height: 16px;
                                &::after {width: 6px; height: 6px;}
                            }
                        }
                    }
                }
            }
            & .input-group {gap: 4px; margin: 10px 0 24px;
                & .left {width: calc(100% - 80px); flex-wrap: wrap; gap: 4px;
                    & .con {width: 100%; gap: 4px;
                        & p {width: 60px;}
                        & input[type="text"] {width: calc(100% - 60px); height: 32px;
                            &.large {width: calc(100% - 60px);}
                        }
                    }
                }
                & .right {width: 80px; flex-wrap: wrap; gap: 4px;
                    & button {width: 100%; height: 32px; flex: auto;}
                }
            }
        }
    }
}

/* 코딧 뱅크뷰 (winpop) - 251113 */
.bkview {padding: 36px 20px; border: 1px solid #D2D8E0;
    & .subject {display: flex; align-items: flex-end; gap: 7px; margin: 0 0 20px;
        & h2 {font-size: 24px; font-weight: var(--fwsb); line-height: 1;}
        & span {font-size: 18px; font-weight: var(--fwsb); line-height: 1;}
    }
    & .bk-con {
        & .tit {display: flex; justify-content: space-between; align-items: flex-start; margin: 0 0 10px;
            & .tit-bullet {position: relative; display: flex; align-items: center; gap: 7px; padding: 0 0 0 17px; font-size: 16px; font-weight: var(--fwsb); color: var(--main); letter-spacing: -0.04em;
                &::before {content: ""; position: absolute; top: 5px; left: 0; width: 13px; height: 13px; border-radius: 50%; border: 4px solid; border-color: #5981d9 #5981d9 #283e80 #283e80; transform: rotate(-45deg);}
                & p {}
                & img {width: 18px;}
            }
            & .tit-cate {display: flex; gap: 15px;
                & .tit-cate-con {display: flex; align-items: center; gap: 6px;
                    & input[type="radio"] {width: 20px; height: 20px;}
                    & label {font-size: 14px; line-height: 1;}
                }
            }
            & .tit-btn {
                & button {display: flex; align-items: center; gap: 7px; background: #283e80; padding: 10px 15px; border-radius: 7px;
                    & p {font-size: 14px; font-weight: var(--fwb); color: #fff;}
                    & img {}
                }
            }
        }
        & .info {display: flex; gap: 14px; padding: 0 0 50px;
            & .txt {width: 340px;
                > ul {
                    > li {display: flex; border-bottom: 1px solid #E2E8F0;
                        &:first-child {border-top: 1px solid #E2E8F0;}
                        & p {width: 140px; font-size: 14px; color: #6F7E97; background: #F6F8FB; padding: 5px 10px;}
                        & span {width: calc(100% - 120px); font-size: 14px; padding: 5px 10px;}
                    }
                }
            }
            & .map {flex: 1; height: auto;}
        }
        & .list {padding: 0 0 50px;
            > ul {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 50px;
                > li {
                    & .dummy {height: auto;}
                }
            }
        }
        & .history {
            & .table-default.table-small {font-size: 14px;}
            & .table-default.table-small th {height: 50px;}
        }
    }
    @media (width <= 1280px) {
        & .bk-con {
            & .tit {padding: 0;}
        }
    }
    @media (width <= 640px) {
        & .subject {
            & h2 {font-size: 20px;}
            & span {font-size: 14px;}
        }
        & .bk-con {
            & .tit {align-items: center;
                & .tit-bullet {
                    & p {font-size: 15px;}
                    & img {width: 16px;}
                }
                & .tit-cate {
                    & .tit-cate-con {
                        & input[type="radio"] {width: 16px; height: 16px;}
                    }
                }
                & .tit-btn {
                    & button {height: 32px; padding: 0 15px;
                        & p {font-size: 14px;}
                        & img {width: 16px;}
                    }
                }
            }
            & .table-top {display: flex;
                & .table-top-unit {padding: 0;}
            }
            & .info {flex-wrap: wrap; padding: 0 0 40px;
                & .txt {width: 100%; order: 2;}
                & .map {width: 100%; order: 1;}
            }
            & .list {padding: 0 0 40px;
                > ul {grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 20px;}
            }
        }
    }
    @media (width <= 640px) {
        & .subject {
            & h2 {font-size: 16px;}
            & span {font-size: 12px;}
        }
    }
}


/* 바우처 뱃지 - 헤더에 사용되는 것과 겹치지 않게 클래스명 별도 */
.badge-voucher{

    .type{display: inline-block; width: auto; margin: 0; border-radius: 5px; line-height: 28px; padding: 0 11px; font-size: 18px; font-weight: var(--fwm); letter-spacing: 0; color: #fff; background-color: #ddd;}
    .type.voucher-1{background: var(--voucher-color1);}
    .type.voucher-2{background: var(--voucher-color2);}
    .type.voucher-3{background: var(--voucher-color3);}
    .type.voucher-4{background: var(--voucher-color4);}
    .type.voucher-5{background: var(--voucher-color5);}
    .type.voucher-6{background: var(--voucher-color6);}

    @media (width <= 1280px) {

        & .type{line-height: 22px; font-size: 15px;}
    }
}

/* 관리자 버튼 */
@media screen and (max-width: 1400px) {
    .adminBtnDiv {
        right: calc(100% - 60px);
    }
    #adminDiv {
        right: calc(100% - 370px);
    }
}

.adminBtnDiv {
    position: fixed;
    top: 490px;
    left: inherit;
    cursor: pointer;
    margin-left: -60px;
    background-color: #fff;
    border-radius: 5em;
    width: 50px;
    height: 50px;
    text-align: center;
    border: 1px solid #474444bf;
    z-index: 99;
}

#adminDiv {
    position: fixed;
    top: 490px;
    left: inherit;
    width: 300px;
    display: none;
}

#adminDiv .adm_test_btn{
	height: 30px;
}

#frm_param>table {
    border: 1px solid black;
    background-color: #fff;
}

#frm_param>table tbody>tr>th {
    background-color: #80808054;
    cursor: default;
}

#frm_param>table tbody>tr>td{
	padding: 5px;
}

#frm_param>table tbody>tr>td>input {
    width: 100%;
    height: 100%;
    text-align: center;
    border: 1px solid gray;
}

#searchHst {
    min-height: 60px;
    max-height: 120px;
    overflow-y: auto;
    cursor: default;
}

#searchHst>li {
    cursor: pointer;
    padding: 5px 5px;
}

#searchHst>li.on {
    background:#CCD9FD;
}

#searchHst>li:not(:first-of-type) {
    border-top: 1px solid gray;
}
#searchHst>li:not(.on):hover {
    background:#CCD9FD;
}

.captcha_wrap{
    text-align: center;
    margin-top: 20px;
}

.captcha_img_wrap{
    margin: auto;
    max-width: 300px;
    text-align: center;
    position: relative;
}

.captcha_wrap img{
/*  border: 1px solid #ababab; */
}

.captcha_wrap .captch_init{
    display: inline-block;
    position: absolute;
    width: 15px;
    height: 17px;
    bottom: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(../../img/sub/ico_datalab_init.png);
    vertical-align: bottom;
    background-position: 0% 100%;
    margin-left: 5px;
    transition: 0.3s;
}

.captcha_wrap .captch_init:hover{
    transform: rotate(90deg);
}

.captcha_wrap input[type=text]{
    margin: 20px auto auto;
    max-width: 300px;
    text-align: center;
}

.rcnt_hstr_table, .srch_rslt_table{
    & tbody td{
        cursor: pointer;
        overflow: hidden;
        text-overflow: ellipsis;
        position: relative;
    }
    & tbody td.text-left{
        text-align: left;
    }
    & tbody td .del-btn{
        position: absolute;
        top: calc(50% - 13px);
        right: 5px;
        height: 24px;
        width: 24px;
        border-radius: 50px;
    }
    & tbody td .del-btn:hover{
        background-color: #ebebeb;
    }
    & tbody td .del-btn:hover img{
        filter: invert(47%) sepia(99%) saturate(334%) hue-rotate(184deg) brightness(88%) contrast(92%);
    }
    & tbody tr:hover {
	   background-color: #f5f8fe;
    }
}

.insight_wrng_wrap{
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto 30px 20px 30px;
}

.insight_wrng_wrap .ico_wrng_txt{
    position: relative;
    word-break: break-word;
}

.insight_wrng_wrap .ico_wrng_txt:before{
    content: '';
    display: inline-block;
    width: 35px;
    height: 35px;
    background-image: url(../../img/sub/ico_wrng.png);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    left: -45px;
    top: 1.5px;
}

.insight_wrng_wrap .ico_wrng_txt .red{
    color: #ff0000;
}

.oz_layer {
	& input{background-color: transparent;}
	& input[type=text]{height: auto;}
	input, button, select, img{vertical-align: baseline; appearance: auto;}
}

.mypageWrap {
	& .sel_wrap{position: relative; font-size: 18px;}
	& .sel_wrap button{border: 1px solid #8d8d8d; height: 40px; border-radius: 7px; width: 152px; padding: 0 30px 0 18px; background: url(../../img/sub/ico_datalab_select.png) no-repeat right 14px center; text-align: left;}
	& .sel_wrap button.on{border-bottom-left-radius: 0; border-bottom-right-radius: 0;}
	& .sel_wrap button:before,
	& .sel_wrap li:before{display: inline-block; content:""; width: 14px; height: 14px; border-radius: 100%; margin-right: 8px;}
	& .sel_wrap .sel_list{border: 1px solid #8d8d8d; border-top: 0; position: absolute; width: 100%; display: none;}
	& .sel_wrap .sel_list li{line-height: 40px; padding: 0 30px 0 18px; background: #fff; transition: all 0.3s; cursor: pointer;}
	& .sel_wrap .sel_list li:hover{background-color: #f0f0f0;}
	& .sel_wrap .abled:before{background: #5f9945;}
	& .sel_wrap .disabled:before{background: #d84343;}
}

.bix_grid_wrap{
	position: relative;
}

.bix_grid_wrap .bix_grid{
/*     min-height: 300px; */
    width: 100%;
    height: 100%;

    & input[type=checkbox],
    & input[type=radio]{margin: 3px 3px 3px 4px;}
    & .bix_dtl_btn{cursor: pointer; width: 18px; height: 18px;}
    & .scrp_file_pdf_dt{font-size: 11px;}
    & .scrp_file_pdf{background-image: url(../../img/sub/ico_data_pdf_red.png); background-repeat: no-repeat; background-position: center center; background-color: #fff; border: 1px solid #cc2131; width: 20px; height: 20px;}
    & .scrp_file_pdf.disabled{background-image: url(../../img/sub/ico_data_pdf_dark.png); border: 1px solid #9c9c9c; cursor: default;}
    & .ico_gude_btn{width: 14px; height: 18px; background-image: url(../../img/sub/ico_guide.png); background-repeat: no-repeat; background-size: contain; display: inline-block; position: relative;}
    & .refresh_btn{border: 1px solid #9be5c8; background: #9be5c8; color: #008000; border-radius: 10px; transition: 0.3s; font-size: 14px; line-height: 18px; padding: 0px 10px; letter-spacing: -0.04em;}
    & .refresh_btn:hover{background-color: #fff; font-weight: 400;}
    & .txt_red{color: red; font-weight: 600;}
    & .txt_orange{color: orange; font-weight: 600;}
    & .txt_blue{color: blue; font-weight: 600;}
    & .context_icon{width: 10px; height: 10px; margin: 2px 0;}
    & .BIX5__Root{font-variant-numeric: tabular-nums;}
    & .BIX5__Root .BIX5__ComboBox{appearance: auto;}
    & .grid_deptBizNm{cursor: pointer;}
    & .grid_deptBizNm:hover{color: #5981d9;}
}

.BIX5__Root .context_icon{width: 10px; height: 10px; margin: 2px 0;}