@charset "utf-8";
@import url(./reset.css);

/* ======================================================================

   [CSS수정 작업 유의사항]
   반응형작업(320/360/375/414/480/678/1024/1280/pc)으로 작업되어있으니
   해당 brackpoint 영역별로 수정이 필요

   N2 dev 0605
   ====================================================================== */


/* ==================== PC ===================== */

/*  skip  */
#wrap_skip { position:relative; }
#wrap_skip a { z-index:300; position:absolute; top:-1000px; z-index:9999}
#wrap_skip a:focus,
#wrap_skip a:hover,
#wrap_skip a:active { display:block; top:0; left:0; width:100%; height:30px; line-height:30px; text-align:center; color:#fff; background:#3b3b3d }


/* gotop */
.gotop { position:fixed; bottom:117px; right:0; width:80px; height:80px; background:rgba(0, 0, 0, 0.1); }
.gotop button { width:80px; height:80px; background:url("../images/btn_top.png") no-repeat 0 0; border-radius: 100%; }


/* LAYOUT */
.no-content { height: 500px; margin-top: 20px; background: #e2e6e9; font-size: 50px; text-align: center; line-height: 500px; }

/* text-type */
.t-left { text-align: left !important}
.t-right { text-align: right !important}
.t-center { text-align: center !important}
.text-point { color: var(--green-10) !important}


/* form */
.was-validated .form-control:valid, .form-control.is-valid { border-color: #ddd; background-image: url("../images/icon-check.png") !important; background-position: 5px 50% !important; background-size: inherit !important;padding:4px 25px; }
.was-validated .form-control:invalid, .form-control.is-invalid { border-color: var(--black-30); background-position: 5px 50% !important; padding:4px 25px;}
.form-group { margin-bottom: 0 !important}

.full-width{ width: 100%; min-width: 100%;}


/*   이전 button   */
.btn-secondary {
    border: 1px solid var(--grayblue-30) !important;
    color:var(--black-70) !important;
    background: var(--white) !important;
    border-radius: var(--radius-round) !important;
    font-size: var(--font-size-14) !important;
    font-weight: var(--fw-regular) !important;
    height: 1.688rem !important;
}
.btn-secondary:hover{
    border: 1px solid var(--grayblue-80) !important;
    color:var(--black-70) !important;
    background: var(--white) !important;
}

.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active { background-color: #e7f3f8; border:0; color: #047099;}
.btn-outline-input { color:#abafb2 !important; border-color:#cbcfd3 !important; background-color: #ffffff !important;}

.btn-sub-underline{padding:0; text-decoration: underline; color: #000; font-weight: 600;}
.btn-sub-underline:hover{font-weight: 800; color:#047099;text-decoration: underline;}

.btn-arrow {padding-right:30px !important; background-image: url("../images/btn-arrow.png") !important; background-repeat: no-repeat !important; background-position: 90% 50% !important; color:#ffffff !important; }
.btn-delet { margin-left:5px; background: url("../images/icon-delet.gif") no-repeat 50%; background-color: #67738c !important; }
.btn-link {text-align:center; line-height:60px; min-width: 160px; height: 70px; padding: 0 20px; font-size: 20px; margin: 5px; background: #214da5 !important; color:#ffffff !important;border-radius: 0.25rem; border: 1px solid #214da5 !important  }
.btn-plus{ width: 24px; height:24px; margin-left: 0; background: url("../images/ico-plus.svg") no-repeat 50%; border-color: #ddd !important;}
.btn-minus { width: 24px; height:24px;  background: url("../images/ico-minus.svg") no-repeat 50%; border: 1px solid #ddd; background-color: #fff !important; }
.btn-plus:hover, .btn-minus:hover{ border-color: #047099;}
.btn-move {
    width: 24px;
    height: 24px;
    margin-left: 0;
    background: url("../images/ico-expand.svg") no-repeat center center !important;
    background-size: 16px 16px;
    background-color: transparent !important;
    border: none !important;
    cursor: grab;
    opacity: 0.8;
    transition: opacity 0.15s ease;
}
.btn-move:hover {
    opacity: 1;
}
.btn-move:active {
    cursor: grabbing;
    transform: scale(0.95);
}
table[data-parent-seq=""].btn-move {display: none !important;}

.btn-outline-secondary{
    border: 1px solid var(--grayblue-60);
    border-radius: var(--radius-round);
    color:var(--black-70);
    background: var(--white);
    font-size: var(--font-size-12);
    font-weight: var(--fw-regular);
    /*width: 3.563rem;*/
    height: 1.688rem;
}
.btn-outline-secondary:hover{
    border: 1px solid var(--grayblue-80) !important;
    color:var(--black-70) !important;
    background: var(--white) !important;
}

.btn {
    font-weight: 500;
    cursor: pointer;
    margin: 2px;
    border:0;
    transition: all 0.5s;
}
.btn:hover{
    color: rgba(255, 255, 255, 0.85);
}


/* 신청하기 */

/* namuh PLUG
.btn-appli{
    width: 11.875rem; height: 3.75rem;
    background:  url("../images/nh_icon_write.svg") left -7.6rem top 1rem / 21.25rem 1.25rem no-repeat, linear-gradient(150deg, #FF7D80 0%, #C00004 200%);
    border-radius: var(--radius-round);
    color: var(--white);
    font-weight: var(--fw-medium);
    border:3px solid #fff;
    outline: 3px dashed #ef5e62;
    font-size: var(--font-size-20);
    padding-left: 2.5rem;
} */


/* N2추가 */
.btn-appli{
    width: 11.875rem; height: 3.75rem;
    background:  url("../images/nh_icon_write.svg") left -7.6rem top 1rem / 21.25rem 1.25rem no-repeat, linear-gradient(150deg, #f1c647 0%, #e19f00 200%);
    border-radius: var(--radius-round);
    color: var(--white);
    font-weight: var(--fw-medium);
    border:3px solid #fff;
    outline: 3px dashed #f1c647;
    font-size: var(--font-size-20);
    padding-left: 2.5rem;
}
/************/

/* API가이드보기, 글쓰기 */

.btn-reque{
    width: auto; height:60px;
    padding: 0 40px;
    font-weight: var(--fw-medium);
    background: var(--warning-gradient-color-green-02);
    border-radius: var(--radius-round);
    color: var(--white);
    font-size: var(--font-size-20);
}


/* more 버튼 */
.btn-more{
    width: auto; height:24px;
    padding: 0 12px;
    font-weight: var(--fw-regular);
    background: var(--warning-gradient-color-green-03);
    border-radius: var(--radius-round);
    color: var(--white);
    font-size: var(--font-size-12);
}

/* search 버튼 */
.btn-search{
    width: auto; height:46px;
    padding: 0 25px;
    font-weight: var(--fw-medium);
    background: var(--warning-gradient-color-green-03);
    border-radius: var(--radius-round);
    color: var(--white);
    font-size: var(--font-size-16);
}

/* 테스트 전송 버튼 */
.btn-send{
    width: auto; height:60px;
    padding: 0 40px;
    font-weight: var(---fw-medium);
    background: var(--warning-gradient-color-green-03);
    border-radius: var(--radius-round);
    color: var(--white)  ;
    font-size: var(--font-size-20);
}

/*  게시판 리스트 수정삭제 버튼 */
.btn-outline-secondary{
    border: 1px solid var(--grayblue-30);
    border-radius: var(--radius-round);
    font-size: var(--font-size-14);
    font-weight: var(--fw-regular);
    /*width: 3.563rem;*/
    height: 1.688rem;
}

/* 아이콘 */
.icon-cecle::before{
    content:"";
    width: 0.5rem;
    height: 0.5rem;
    background-color: var(--black-90);
    border-radius: 50%;
    display: block;
    margin-right: 0.6rem;
}

.icon-new{
    background: var(--red);
    color: var(--white);
    font-size: var(--font-size-12);
    border-radius: var(--radius-round);
    padding: 0 8px 2px;
    line-height: 1;
    margin-left: 8px;
    font-weight: var(--fw-regular);
}
.icon-new:hover{
    font-weight: var(--fw-regular);
}


/*  QR 버튼 */

/* namuh PLUG
.btn-QRscan{
    width: 8.75rem; height: 3.125rem;
    background:  url("../images/icon-QR.png") left  1.4rem top 0.9rem / 1.4rem auto no-repeat, linear-gradient(150deg, #B1F54D 0%, #009292 90%);
    border-radius: var(--radius-round);
    color: var(--white);
    font-weight: var(--fw-medium);
    font-size: var(--font-size-18);
    padding-left: 2.5rem;
} */

/* N2추가 */
.btn-QRscan{
    width: 8.75rem; height: 3.125rem;
    background: url(../images/icon-QR.png) left 1.4rem top 0.9rem / 1.4rem auto no-repeat, linear-gradient(150deg, #A8C3D9 0%, #6998BD 50%, #064367 130%);
    border-radius: var(--radius-round);
    color: var(--white);
    font-weight: var(--fw-medium);
    font-size: var(--font-size-18);
    padding-left: 2.5rem;
}
/************/


/* 보안인증키 관리 */
.form-security{display: flex;}
.input-security{
    height: 2.875rem;
    width: 100%;
    border:1px solid #bfcada;
    border-right:0;
    border-radius: var(--radius-sm);
    border-top-right-radius :0;
    border-bottom-right-radius :0;
    font-size: var(--font-size-16);
    font-weight: var(--fw-regular);
    padding: 0.563rem;
}
.btn-security{
    width: 5rem;
    height: 3.15rem;
    background: var(--warning-gradient-color-gray);
    color: var(--black-90);
    font-size: var(--font-size-16);
    font-weight: var(--fw-regular);
    border-radius: var(--radius-sm);
    border-top-left-radius :0;
    border-bottom-left-radius :0;
    margin: 0;
    border:1px solid #bfcada;
    border-left:0;
}
.btn-security:hover{
    color: var(--black-60);
}

.form-security p{
    position: relative;
    width: calc(100% - 5rem);
}
.form-security p a{
    position: absolute;
    right: 0.78rem;
    top: 0.85rem;
}


/* ================= API서비스  ================= */

/* 검색결과 */
.apiservice-list{
    width: 100%;
}
.apiservice-list .apiservice-list-title{
    text-align: center; zoom: 1;
}
.apiservice-list .apiservice-list-title>h2{
    margin: 0 0 10px; font-size: 1.125rem;
}
.apiservice-list .apiservice-list-table-wrap{
    margin: 0 0 10px; padding: 10px 0 15px;
}
.apiservice-list .apiservice-list-table-wrap>h2{
    margin:0 0 10px; font-size: 1.125rem;
}
.apiservice-list .apiservice-list-table-wrap .sch_res_list_ul li{
    border-bottom: 1px solid #D5D5D5; padding: 15px 0; position: relative;
}
.apiservice-list .apiservice-list-table-wrap .sch_res_list_ul li span:nth-child(1){
    padding: 15px; color: #101116; font-size: 16px; font-weight:bold;
}
.apiservice-list .apiservice-list-table-wrap .sch_res_list_ul li span:nth-child(2){
    padding: 15px; font-size: 16px; font-weight: bold;
}
.apiservice-list .apiservice-list-table-wrap .sch_res_list_ul li span:nth-child(3){
    padding: 15px; font-size: 16px; font-weight: bold
}

.btn-close {text-shadow:none; width:2rem; height:2rem;text-indent: -9999px; background: url("../images/nh_icon_close.svg") no-repeat center center; transition: all .3s ease; }
.btn-close:hover{ transform: rotate(90deg);}

.markdown {margin-left: 0;}

/* .toggleEndpointList {
    display: block;
    width: 1.875rem;
    height: 1.875rem;
    background: url(../images/nh_icon_listclick_01.svg) no-repeat center;
    text-indent: -9999px;
    font-size: 0;
    background-size: inherit;
}
.toggleEndpointList:hover {
    display: block;
    width: 1.875rem;
    height: 1.875rem;
    background: url(../images/nh_icon_listclick_01_hover.svg) no-repeat center;
    text-indent: -9999px;
    font-size: 0;
    background-size: inherit;
} */

.collapseResource {
    display: block;
    width: 1.875rem;
    height: 1.875rem;
    background: url(../images/nh_icon_listclick_03.svg) no-repeat center;
    text-indent: -9999px;
    font-size: 0;
    background-size: inherit;
}
.collapseResource:hover {
    display: block;
    width: 1.875rem;
    height: 1.875rem;
    background: url(../images/nh_icon_listclick_03_hover.svg) no-repeat center;
    text-indent: -9999px;
    font-size: 0;
    background-size: inherit;
}
.expandResource{
    display: block;
    width: 1.875rem;
    height: 1.875rem;
    background: url(../images/nh_icon_listclick_02.svg) no-repeat center;
    text-indent: -9999px;
    font-size: 0;
    background-size: inherit;
}
.expandResource:hover {
    display: block;
    width: 1.875rem;
    height: 1.875rem;
    background: url(../images/nh_icon_listclick_02_hover.svg) no-repeat center;
    text-indent: -9999px;
    font-size: 0;
    background-size: inherit;
}



/* badge */
.badge { margin-left: 5px; margin-right: 5px;}
.badge-point { color: #fff; background-color: #214da5 }
.badge-api{
    border-radius: var(--radius-round);
    font-weight: var(--fw-regular);
    color: var(--white);
    text-transform: uppercase;
    font-size: 16px;
    background-color: var(--Primary-color-03);
    padding: 0.4rem 1rem;
} /* API가이드 초록뱃지 */

/* pop-over */
.popover {max-width: 480px !important;}

/* modal */
.modal-dialog { max-width: inherit !important; }
.modal-content { border:none !important; border-top-left-radius: 1.25rem !important; border-top-right-radius: 1.25rem !important; border-bottom-left-radius: 1.25rem!important; border-bottom-right-radius: 1.25rem !important; }
.modal-header { background: #ffffff; border-bottom: 0; align-items: center !important; padding: 50px 50px 0 !important; border-radius: 1.25rem !important;}
.modal-header h2 { font-size: var(--font-size-32) ; color: var(--black-90); line-height: inherit !important; margin: 0; font-weight: var(--fw-semibold); }
.modal-header .close { flex-shrink:0; text-shadow:none; width:2rem; height:2rem; padding:0 !important; margin: 0 !important; background: url("../images/nh_icon_close.svg") left 0rem top 0rem / 1.85rem no-repeat ; transition: all .3s ease; }
.modal-header .close:hover{ transform: rotate(90deg);}
.modal-body { padding: 0.5rem 3.125rem; max-height: 35.25rem; overflow-y: scroll;}
.modal-body .form-group { padding-top:10px}
.modal-body .form-group:first-child { padding-top:0}
.modal-body .form-group > label, .modal-body dt  { font-weight: 600 !important}
.modal-body .form-group dl { margin-top: 10px;}
.modal-body .form-group dl:first-child { margin-top: 0;}
.modal-body .form-group dd { margin-top: 2px; }
.modal-body .form-group dd:first-child { margin-top: 0; }
.modal-body .form-group dd label { font-size: 13px; }
.modal-body .form-group .btn-help { width: 18px; height: 18px; margin:0 5px; padding:inherit !important; line-height: 14px !important; border-radius: 100%; font-size: 12px;  }
.modal-body h3 { margin-bottom: 10px !important; font-size: 20px; font-weight: 700 !important }
.modal-body h4 { margin-bottom: 10px !important; font-size: 17px;}
.modal-footer { padding-bottom: 3.125rem !important; border-top:0 !important; justify-content: center !important; }

/* close 버튼 */
.modal-footer .btn, .modal-md .modal-footer .btn {
    width: auto;
    height: 3.375rem !important;
    padding: 0 3.75rem;
    font-weight: var(--fw-medium) !important;
    background: var(--warning-gradient-color-green-03) !important;
    border-radius: var(--radius-round) !important;
    color: var(--white) !important;
    font-size: var(--font-size-20) !important;
}

.modal-sm .modal-footer .btn { min-width: 100px; height: 50px; line-height: 17px; font-size: 17px; margin:0 5px;}
.modal-xxl { width: 1300px; }
.modal-xl { width: 980px; }
.modal-lg { width: 800px; }
.modal-md-l { width: 670px; }
.modal-md { width: 600px; }
.modal-sm { width: 400px; }

#__alert_dialog__ { text-align: center;}

/* tab-menu */
.list_tab { width: 50%; margin: 0 auto;}
.list_tab:after {display:block; clear:both; height:0; content:'';}
.list_tab > li {float:left; width:50%; text-align:center; }
.list_tab > li:first-child + li {margin-left:-1px;}
.list_tab > li > a {display:block; height:68px; border:2px solid #fff; border-bottom-color:#dbdbdb; border-top-left-radius:4px; border-top-right-radius:4px; font-size:20px; line-height:68px; color:#777d81 !important; }
/* [D] 현재페이지일때 .on 추가 (border) */
.list_tab > li > a.active,
.list_tab > li:hover > a,
.list_tab > li > a:focus {position:relative; border-bottom-color:#171e2b; color:#171e2b;}
.list_tab > li > a.active {color: #171e2b !important;}

/* Standby-page */
.standby {
    width: 100%;
    height: 200px;
    margin: 0 auto;
    margin-top: 70px;
    background: #b3b7bd;
    color: #ffffff;
    font-size: 40px;
    text-align: center;
    line-height: 200px;
}

/* JS-Gride */
.jsgrid-grid-header {
    border:none !important;
    border-top: 1px solid var(--black-30) !important;
    border-bottom: 1px solid var(--black-50) !important;
    overflow-y: hidden !important;
    background: none !important;
}
.jsgrid-grid-header .jsgrid-header-row > .jsgrid-header-cell {
    background: var(--white) !important;
    border: none !important;
    padding: 1.5rem 0;
    line-height: 1em;
    font-weight: var(--fw-semibold);
}
.jsgrid-grid-header th {
    text-align: center;
    font-weight: 400;
}
.jsgrid-grid-header th .jsgrid-header-sort:before {
    float: inherit;
}
.jsgrid-grid-body {
    overflow-y: hidden !important;
    border:none !important;
}
.jsgrid-grid-body .jsgrid-cell {
    border-top:none !important;
    border-right:none !important;
    border-left:none !important;
    text-align: center;
    padding: 1rem 0;
}
.jsgrid-grid-body .jsgrid-cell .glyphicon-user { cursor: pointer;}

.jsgrid-grid-body .jsgrid-cell .empty {
    line-height: 200px;
}
.jsgrid-grid-body .jsgrid-cell div[style='cursor: pointer;'] {
    font-weight: var(--fw-regular);
    width: 100%;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left !important;
}
.jsgrid-grid-body .jsgrid-cell div[style='cursor: pointer;']:hover{
    color: var(--black-90);
    font-weight: var(--fw-semibold);
}
.jsgrid-grid-body .jsgrid-align-left {
    text-align: left;
    padding-left: 10px;
}

.jsgrid-grid-body .jsgrid-align-left > div {
    text-align: left;
}

.jsgrid-align-center,
.jsgrid-align-center input,
.jsgrid-align-center textarea,
.jsgrid-align-center select {
    text-align: center;
}
.jsgrid-align-right,
.jsgrid-align-right input,
.jsgrid-align-right textarea,
.jsgrid-align-right select {
    text-align: right;
}
.jsgrid-pager-container .jsgrid-pager {
    text-align: center;
}
.jsgrid-pager-container .jsgrid-pager-current-page {
    font-size: var(--font-size-14);
}
.jsgrid-alt-row>.jsgrid-cell{ background-color: #fff;}
.jsgrid-grid-body .jsgrid-cell [type=button] {  min-width: 48px !important;  padding: 4px 7px !important;  font-size: 12px !important;  line-height: 13px !important;  letter-spacing: -1px; }
.jsgrid-grid-body .jsgrid-cell [type=button]:not(:last-child){ margin-right: 2px;}
.jsgrid-grid-body .jsgrid-cell .form-control{ padding: 2px 4px;}



/* ==================== JS-Gride admin START ==================== */
body.admin .jsgrid-grid-body .jsgrid-cell {
    padding: 0.5rem 0.2rem;
}
body.admin .jsgrid-table {
    font-size: var(--font-size-14);
}
body.admin input{
    border-radius: 0.25rem;
    /* margin: 0 0.5rem; */
}
body.admin .table-wrap .list-info {
    margin-bottom: 0.35rem ;
}
body.admin .table-wrap .table-search {
    gap: 0.2rem;
}
body.admin .jsgrid-grid-header .jsgrid-header-row > .jsgrid-header-cell {
    padding: 1rem 0;
}
body.admin .modal-footer .btn, .modal-md .modal-footer .btn {
    width: auto;
    height: 3.3rem !important;
    padding: 0 2.3rem;
    font-weight: var(--fw-medium) !important;
    background: var(--warning-gradient-color-green-03) !important;
    border-radius: var(--radius-round) !important;
    color: var(--white) !important;
    font-size: var(--font-size-20) !important;
}

body.admin .modal-body .form-group .text-primary{
    font-size: var(--font-size-20);
    text-align: center;
    color:var(--green-10) !important;
    padding-top: 10px;

}
body.admin .modal-body .form-group #message{
    font-size: var(--font-size-20);
    text-align: center;
}

body.admin textarea.form-control {
    height: auto;
    /* margin-left: 0.5rem; */
}
body.admin .note-editor.note-frame, .note-editor.note-airframe {
    /* margin-left: 0.5rem; */
}

body.admin .form-check {
    display: flex;
    align-items: center;
}

/* btn */
body.admin .btn-primary{
    background: var(--warning-gradient-color-green-03);
    height: 2.875rem;
    padding: 0 1rem;
    border-radius: 3.125rem;
    color: var(--white);
    font-weight: var(--fw-medium);
    font-size: var(--font-size-16);
}
body.admin .btn-sm,
body.admin .btn-group-sm > .btn {
    padding: 0.25rem 1rem;
    border-radius: 3.125rem !important;
    height: 1.875rem !important;
    font-size: var(--font-size-14) !important;
    font-weight: var(--fw-medium) !important;
}

body.admin .btn-middle{
    border: 0px solid var(--green-10) !important;
    color: var(--white) !important;
    background: var(--warning-gradient-color-gray) !important;
    border-radius: var(--radius-round) !important;
    font-size: var(--font-size-14) !important;
    font-weight: var(--fw-regular) !important;
    padding: 0.3rem 1rem;
}


/* ===================== JS-Gride admin END ===================== */


/* board */
/*.note-toolbar {z-index: inherit !important;}*/
.modal.note-modal .modal-dialog { width: 400px !important; }
.modal.note-modal.modal-dialog .modal-header h4 { color: #ffffff !important; font-size: 24px !important; line-height: inherit !important; margin: 0; }
.modal.note-modal .modal-dialog .modal-header .close { overflow: hidden; text-indent: -1000em; text-shadow: none; width: 20px; height: 20px; padding: 0 !important; margin: 0 !important; background: url("../images/ico-xlg.svg") no-repeat 100% 0; opacity: inherit; }
.modal.note-modal .modal-dialog .modal-body .note-form-label { font-size: 18px !important; margin-bottom: 10px !important; }
.modal.note-modal .modal-dialog .modal-footer .btn { color:#ffffff !important; min-width: 165px !important; height: 50px !important; padding: 0 20px !important; font-size: 16px !important; margin: 5px !important; opacity: 1 !important; }

.sound_only {
    display: inline-block !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 14px;
    line-height: 0;
    border: 0 !important;
    overflow: hidden !important
}

label{ margin-right: 10px;}
label > input{ margin: 0 2px;}

.sch_res_list_ul {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid #000;
}

.m_res_list_h3 {
    border-bottom: 0.1px solid #000;
}


/***** 20230627 이베스트수정영역 *****/
.mt30{margin-top: 30px !important;}
.mt20{margin-top: 20px !important;}
.mt10{margin-top: 10px !important;}

.content-wrap .contents h4{font-size: 24px; font-weight: 800; margin-bottom: 10px;}
.content-wrap .contents h5{font-size: 18px; font-weight: 800; margin-bottom: 10px;}

.content-wrap .contents .btn{margin-top: 10px; min-width: 120px;}
.content-wrap .contents hr{margin-top: 30px;}
.content-wrap .contents .code-wrap{margin: 10px 0 30px; max-height: 190px; overflow-y: scroll;}

.content-wrap .list {margin-top: 30px;}
.content-wrap .list li {margin-top: 10px; list-style: '· ';}

/* 소개 */
.about-wrap .contents .text-wrap{padding:0; margin:0; margin-top: 30px;}
.about-wrap .contents img{width: 100%; max-width: 940px;}
body.user .about-wrap .contents figure{padding-top: 30px;}

/* 이용안내 */
.howto-wrap .howto_tab{display: flex; flex-wrap: nowrap; margin-top: 30px;}
.howto-wrap .howto_tab li{flex-basis:33.3%; list-style: none; padding: 15px 10px;  font-size: 18px;  text-align:center; cursor: pointer; border: 1px solid #ddd; border-right:0;}
.howto-wrap .howto_tab li:last-child{border-right: 1px solid #ddd;}
.howto-wrap .howto_tab li.active{color: #047099; font-weight: 800; border-bottom: 3px solid #047099;}

.howto-wrap .tab_contents>div{display: none; margin-top: 40px;}
.howto-wrap .tab_contents>div.active{display: block;}
.howto-wrap .tab_contents h2{font-size: 24px; margin-bottom: 30px;}
.howto-wrap .tab_contents img{width: 800px;}

.howto-wrap .contents .step2>div{margin-top: 40px;}
.howto-wrap .contents .step2>div:first-child{margin-top: 30px;}
.howto-wrap .contents .step2 img{margin-top: 10px;}

/*테스트베드*/
.testbed-wrap img{width: 100%; max-width: 940px;}

/* 샘플 */
.apisample-wrap .contents{margin-top: 30px;}
.apisample-wrap h4{position: relative; font-size: 22px; padding: 20px; border-bottom: 1px solid #ddd; cursor: pointer;}
.apisample-wrap h4::after{content:''; position: absolute; top: 50%; right:10px; width:24px; height: 24px; margin-top: -12px; background: url("../images/ico-plus.svg") no-repeat 50%; border: 1px solid #ddd; border-radius: 2px;}
.apisample-wrap h4.active{color: #047099;}
.apisample-wrap h4.active::after{background: url("../images/ico-minus.svg") no-repeat 50%; border: 1px solid #047099;}
.apisample-wrap h4.active+div[class*='exe_']{display: block;}
.apisample-wrap div[class*='exe_'] {margin: 30px 0 30px 0; display:none;}

/* 테스트 css */
.service-list-test{
    width: 100%;
    max-width: 1120px;
    margin: auto;
}
.service-list-test ul{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.service-list-test ul li{
    border: 1px solid #aaa;
    max-width: 260px;
    width: 20%;
    height: 290px;
    margin: 10px;
}
.service-list-test ul li img{
    width: 90%;
}
.service-list-test ul li:nth-child(1){margin-top: 116px;}
.service-list-test ul li:nth-child(2){}
.service-list-test ul li:nth-child(3){margin-top: -58px;}
.service-list-test ul li:nth-child(4){}
.service-list-test ul li:nth-child(6){margin-top: -96px;}
.service-list-test ul li:nth-child(7){margin-top: -164px;}
.service-list-test ul li:nth-child(5), .service-list-test ul li:nth-child(8){
    border: 0;
}

/* 서브화면 공통 타이틀 */
.apiguide-wrap>.page-title{
    margin-left: -8rem;
}
.page-title{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto;
    padding-top: 2.75rem;
    width: 100%;
    max-width: 90rem;
    padding-bottom: 3.75rem;
    font-size: var(--font-size-36);
    color: var(--black-90);
    font-weight: var(--fw-semibold);
    margin-bottom: 0.5rem;
}
.page-title-2{
    /* margin-right: 300px; 0601*/
    padding-top: .75rem;
    padding-bottom: 0.75rem;
}
.page-title-2 h2{
    text-align-last: left;
}
.page-title-2 h2 span{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto;
    width: 100%;
    max-width: 90rem;
    font-size: var(--font-size-30);
    color: var(--black-90);
    font-weight: var(--fw-semibold);
    margin-bottom: 1.5rem;
    display: block;
}
.page-title h2{
    font-size: var(--font-size-36);
    color: var(--black-90);
    font-weight: var(--fw-semibold);
    margin-bottom: 0.5rem;
}

/* N2추가 */
.page-title h2.img_NamuhPLUG_main_about_title{
    font-size: var(--font-size-36);
    color: var(--black-90);
    font-weight: var(--fw-semibold);
    margin-bottom: 0.5rem;
    background:url(../images/N2_plug_logo-s.png) left top 9px / 100% no-repeat;
    display: inline-block;
    width: 11.5rem;
    height: 2.7rem;
    margin-right: 6px;
}
/************/

.page-title p{
    font-size: var(--font-size-16);
    color: var(--black-70);
    font-weight: var(--fw-regular);
    text-align: center;
}


/* Namuh PLUG화면 */
.about-wrap .namuh-plug{
    display: flex;
    align-items: center;
    flex-direction: column;
}
.about-wrap .namuh-plug .namuh-plug-con-title{
    font-size: var(--font-size-24);
    color: var(--black-90);
    font-weight: var(--fw-semibold);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    margin-top: -1rem;
    padding-right: 2rem;
    width: 19rem;
}
.about-wrap .namuh-plug .namuh-plug-con-title img{
    margin-right: 6px;
}

/* N2추가 */
.about-wrap .namuh-plug .namuh-plug-con-title .img_NamuhPLUG_main_con_title{
    margin-bottom: 0.5rem;
    background: url(../images/N2_plug_logo-s.png) left top 9px / 68% no-repeat;
    display: inline-block;
    width: 12.5rem;
    height: 2rem;
    padding-left: 8.8rem;
}
.about-wrap .namuh-plug .namuh-plug-con-title .img_NamuhPLUG_main_con02_title{
    margin-bottom: 0.5rem;
    background: url(../images/N2_plug_logo-s.png) left top 9px / 76% no-repeat;
    display: inline-block;
    width: 11rem;
    height: 2rem;
    padding-top:2.2rem;
}
/************/

.about-wrap .namuh-plug .namuh-plug-con01{
    padding: 0 1.25rem;
    margin-bottom: 5rem;
}
.about-wrap .namuh-plug .namuh-plug-con01 ul{
    display: flex;
    justify-content: space-between;
}
.about-wrap .namuh-plug .namuh-plug-con01 ul li{
    width: 24%;
    border-radius: var(--radius-lg);
}
.about-wrap .namuh-plug .namuh-plug-con01 ul li:nth-child(1){
    background: #a09cf9 url(../images/nh_sub_card01_1.png) center / 130% no-repeat;
}
.about-wrap .namuh-plug .namuh-plug-con01 ul li:nth-child(2){
    background:#9fc9ff url(../images/nh_sub_card02_1.png) center / 130% no-repeat;
}
.about-wrap .namuh-plug .namuh-plug-con01 ul li:nth-child(3){
    background: #00bf9d url(../images/nh_sub_card03_1.png) center / 130% no-repeat;
}
.about-wrap .namuh-plug .namuh-plug-con01 ul li:nth-child(4){
    background: #ffffff url(../images/nh_sub_card04_1.png) center / 130% no-repeat;
}
.about-wrap .namuh-plug .nh_sub_card-con{
    display:flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: flex-start;
    font-size: var(--font-size-16);
    color: var(--black-70);
    font-weight: var(--fw-regular);
    height: 280px;
    padding-top: 280px;
}

.about-wrap .namuh-plug .namuh-plug-con02 .nh_sub_card-con {
    padding-top: 0px;
    height: 140px;
}

.about-wrap .namuh-plug .nh_sub_card-con span{
    display:block;
    line-height: 1.4;
    margin-top: 0.2rem;
}
.about-wrap .namuh-plug .nh_sub_card-con a{
    font-size: var(--font-size-12);
    color: var(--black-40);
    font-weight: var(--fw-regular);
    display: block;
    margin-top: 8px;
}
.about-wrap .namuh-plug .nh_sub_card-con .nh_sub_card-con-title{
    font-size: var(--font-size-20);
    color: var(--black-90);
    font-weight: var(--fw-semibold);
    margin-top: 1em;
}
.about-wrap .namuh-plug .namuh-plug-con01 ul li img{
    width: 100%;
}
.about-wrap .namuh-plug .namuh-plug-con02{
    display: flex;
    align-items: flex-start;
    background: var(--black-20);
    padding: 3.152rem ;
    margin: 5rem auto;
    width: 100%;
    max-width: 74.625rem;
}

/* namuh PLUG
.about-wrap .namuh-plug .namuh-plug-con02 ul{
    display: flex;
    justify-content: space-between;
    width: 83%;
    padding-top: 2.5rem;
    border-top: solid 5px #008E7E;
    width: calc(100% - 14rem);
} */

/* N2추가 */
.about-wrap .namuh-plug .namuh-plug-con02 ul{
    display: flex;
    justify-content: space-between;
    width: 83%;
    padding-top: 2.5rem;
    border-top: solid 5px #6998bd;
    width: calc(100% - 14rem);
}
/************/

.about-wrap .namuh-plug .namuh-plug-con02 ul li{
    width: 24%;
    background: var(--white);
    padding: 0.5rem 1.563rem 5.3rem;
    position: relative;
}
.about-wrap .namuh-plug .namuh-plug-con02 ul li img{
    width: 30%;
    margin-top: 1rem;
    position: absolute;
    right: 0.8rem;
    bottom: 0.8rem;
}



/* 서비스 이용안내
.howto-wrap{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.howto-wrap .contents{
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 68.75rem;
    margin: auto;
    position: relative;
    height: 37.5rem;
}
.howto-wrap .contents .namuh-plug-guide{
    position: absolute;
    left: 0;
}
.howto-wrap .contents .namuh-plug-guide div{
    position: absolute;
    top:0;
    width: 25%;
}

.howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-01 p img{
    border-bottom-right-radius:var(--radius-7);
}
.howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-01 p img,
.howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-02 p img,
.howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-03 p img,
.howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-04 p img{
    width:100%;
}

.howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-01{
    left: 0;
    z-index: 10;
    width: 18.188rem;
}
.howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-02{
    left: 15.5rem;
    z-index: 9;
    width: 20rem;
}

.howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-03{
    left: 33rem;
    z-index: 8;
    width: 20rem;
}
.howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-04{
    left: 50.5em;
    z-index: 7;
    width: 20rem;
}

.howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-01 p.namuh-plug-guide-img{
    background: var(--gray-10) url(../images/nh_sub_step_01.png) center / 100% no-repeat;
}

.howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-02 p.namuh-plug-guide-img{
    background: var(--gray-10) url(../images/nh_sub_step_02.png) center / 100% no-repeat;
}

.howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-03 p.namuh-plug-guide-img{
    background: var(--gray-10) url(../images/nh_sub_step_03.png) center / 100% no-repeat;
}

.howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-04 p.namuh-plug-guide-img{
    background: var(--gray-10) url(../images/nh_sub_step_04.png) right -16px top 5px / 105% no-repeat;
}

.howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-02 .namuh-plug-guide-img>.btn-QRscan{
    margin-top: 14.8rem;
}

.howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-01 .namuh-plug-guide-01-bar{
    background:url(../images/nh_sub_step_bar_01.png) no-repeat right 0 top;
    height: 4.25rem;
    font-size: var(--font-size-30);
    color:var(--white);
    font-weight: var(--fw-semibold);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 1.875rem;
}
.howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-02 .namuh-plug-guide-02-bar{
    background:url(../images/nh_sub_step_bar_02.png) no-repeat right 0 top;
    height: 4.25rem;
    font-size: var(--font-size-30);
    color:var(--white);
    font-weight: var(--fw-semibold);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 4rem;
}
.howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-03 .namuh-plug-guide-03-bar{
    background:url(../images/nh_sub_step_bar_03.png) no-repeat right 0 top;
    height: 4.25rem;
    font-size: var(--font-size-30);
    color:var(--white);
    font-weight: var(--fw-semibold);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 4rem;
}
.howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-04 .namuh-plug-guide-04-bar{
    background:url(../images/nh_sub_step_bar_04.png) no-repeat right 0 top;
    height: 4.25rem;
    font-size: var(--font-size-30);
    color:var(--white);
    font-weight: var(--fw-semibold);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 4rem;
}

.howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-01 .namuh-plug-guide-title{
    margin-top: 0.5rem;
    padding-left: 1.875rem;
}

.howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-box .namuh-plug-guide-title{
    font-size: var(--font-size-20);
    color: var(--black-90);
    font-weight: var(--fw-semibold);
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-box .namuh-plug-guide-title .namuh-plug-guide-text{
    font-size: var(--font-size-16);
    color: var(--black-70);
    font-weight: var(--fw-regular);
    margin-top: 0.6rem;
    width: 13.5rem;
    height: 9rem;
}

.howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-box .namuh-plug-guide-img{
    width: 13.438rem;
    height: 9.375rem;
    background: var(--gray-10);
    border-radius:var(--radius-7);
    margin-left: 1.875rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
.howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-box-01 .namuh-plug-guide-title{
    padding-left: 4rem;
}
.howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-box-01 .namuh-plug-guide-img{
    margin-left: 4rem;
}
/*

/* 서비스 이용안내 */
.howto-wrap{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.howto-wrap .contents .namuh-plug-guide{
    width: 1074px;
    height: 36rem;
    position: relative;
}

.howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-box{
    width: 300px;
    height: 470px;
    position: absolute;
    top:0;
}
.howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-box .namuh-plug-guide-title {
    font-size: var(--font-size-20);
    color: var(--black-90);
    font-weight: var(--fw-semibold);
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-left: 1.875rem;
}
.howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-box .namuh-plug-guide-title .namuh-plug-guide-text {
    font-size: var(--font-size-16);
    color: var(--black-70);
    font-weight: var(--fw-regular);
    margin-top: 0.6rem;
    width: 13.5rem;
    height: 9rem;
}
.howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-title {
}

/* 01번 */
.howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-01{
    width: 18.188rem;
    left: 0;
    z-index: 4;
}
.howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-01 .namuh-plug-guide-01-bar{
    background: url(../images/nh_sub_step_bar_01.png) no-repeat right 0 top;
    height: 4.25rem;
    font-size: var(--font-size-30);
    color: var(--white);
    font-weight: var(--fw-semibold);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 1.875rem;
}
.howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-01 p.namuh-plug-guide-img {
    background: var(--gray-10) url(../images/nh_sub_step_01.png) center / 100% no-repeat;
}
.howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-box .namuh-plug-guide-img {
    width: 13.438rem;
    height: 9.375rem;
    background: var(--gray-10);
    border-radius: var(--radius-7);
    margin-left: 1.875rem;
    display: flex;
    justify-content: center;
    align-items: center;
}



/* 2번 */
.howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-02{
    left: 253px;
    z-index: 3;
}
.howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-02 .namuh-plug-guide-02-bar {
    background: url(../images/nh_sub_step_bar_02.png) no-repeat right 0 top;
    height: 4.25rem;
    font-size: var(--font-size-30);
    color: var(--white);
    font-weight: var(--fw-semibold);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 4rem;
}
.howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-box-01 .namuh-plug-guide-title {
    padding-left: 4rem;
}
.howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-box .namuh-plug-guide-title {
    font-size: var(--font-size-20);
    color: var(--black-90);
    font-weight: var(--fw-semibold);
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-02 p.namuh-plug-guide-img {
    background: var(--gray-10) url(../images/nh_sub_step_02.png) center / 100% no-repeat;
}
.howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-02 .namuh-plug-guide-img>.btn-QRscan {
    margin-top: 14.8rem;
}


/* 3번 */
.howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-03{
    left: 510px;
    z-index: 2;
}
.howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-03 .namuh-plug-guide-03-bar {
    background: url(../images/nh_sub_step_bar_03.png) no-repeat right 0 top;
    height: 4.25rem;
    font-size: var(--font-size-30);
    color: var(--white);
    font-weight: var(--fw-semibold);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 4rem;
}
.howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-box-01 .namuh-plug-guide-title {
    padding-left: 4rem;
}
.howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-box .namuh-plug-guide-title {
    font-size: var(--font-size-20);
    color: var(--black-90);
    font-weight: var(--fw-semibold);
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-03 p.namuh-plug-guide-img {
    background: var(--gray-10) url(../images/nh_sub_step_03.png) center / 100% no-repeat;
}


/* 4번 */
.howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-04{
    left: 768px;
    z-index: 1;
}
.howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-04 .namuh-plug-guide-04-bar {
    background: url(../images/nh_sub_step_bar_04.png) no-repeat right 0 top;
    height: 4.25rem;
    font-size: var(--font-size-30);
    color: var(--white);
    font-weight: var(--fw-semibold);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 4rem;
}
.howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-box-01 .namuh-plug-guide-title {
    padding-left: 4rem;
}
.howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-box .namuh-plug-guide-title {
    font-size: var(--font-size-20);
    color: var(--black-90);
    font-weight: var(--fw-semibold);
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-04 p.namuh-plug-guide-img {
    background: var(--gray-10) url(../images/nh_sub_step_04.png) right -16px top 5px / 105% no-repeat;
}



/* q&a */
.qna-wrap{
    padding-bottom: 5rem;
}
.qna-list-wrap{
    width: 69.188rem;
    border-top: 1px solid var(--black-30);
    overflow: hidden;
}
.question{
    /* border-bottom: 1px solid var(--black-30); */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 10px;
    cursor: pointer;
}
.question>p>img{
    margin-right: 10px;
}
.qna-arrow{

}
.question p{
    display: flex;
    align-items: center;
}
.question span{
    display: flex;
    justify-content: center;
    align-items: center;
    transition: .3s;
}
.answer{
    background-color: var(--black-20);
    font-weight: var(--fw-semibold);
    max-height: 0;
    overflow: hidden;
    transition: .35s each;
    padding:0 18px;
}
.qna-list-wrap.active .answer{
    max-height: 100px;
    padding: 18px;
    margin-bottom: 1rem;
    border-radius: 10px;
}

.qna-list-wrap.active .qna-arrow{
    transform: rotate(180deg);
}


/* =================== QR팝업  ================== */
.popup-page-title{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto;
    padding-top: 1rem;
    width: 100%;
    max-width: 90rem;
    padding-bottom: 0rem;
    font-size: var(--font-size-36);
    color: var(--black-90);
    font-weight: var(--fw-semibold);
}
.popup-page-title p{
    font-size: var(--font-size-16);
    color: var(--black-70);
    font-weight: var(--fw-regular);
    text-align: center;
}

.popup-page-title-m{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto;
    padding-top: 1rem;
    width: 100%;
    max-width: 90rem;
    padding-bottom: 0rem;
    font-size: var(--font-size-30);
    color: var(--black-90);
    font-weight: var(--fw-semibold);
}
.popup-page-title-m p{
    font-size: var(--font-size-16);
    color: var(--black-70);
    font-weight: var(--fw-regular);
    text-align: center;
}

.QRPOPUP{
    height: auto;
    border-radius: var(--radius-lg);
    background: var(--white);
    padding: 2.5rem;
    padding-top: 0;
    /*display: inline-block;*/
    display: flex;
    justify-content: center;
}

.QRPOPUP .timer-wrap{
    display : flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 1rem 0;
}

.QRPOPUP .button-wrap{
    display : flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 1.5rem 0 0;
}

.QRPOPUP .reissue-guid{
    border-radius: var(--radius-md);
    border: 1px solid var(--grayblue-30);
    padding: 1.25rem;
    margin-top: 1rem;
    display: flex;
    gap: 20px;
    flex-direction: column;
    text-align: center;
    align-items: center;
}

.QRPOPUP .reissue-guid-text>span{
    font-size: var(--font-size-16);
    color: var(--black-90);
    font-weight: var(--fw-regular);
}
.QRPOPUP .reissue-guid-text>span>span{
    color: var(--red);
    font-weight: var(--fw-semibold);
}

.QRPOPUP  .QR-api{
    display: flex;
    flex-direction: row;
    width: 44.375rem;
    flex-wrap: wrap;
    justify-content: space-between;
}
.QRPOPUP .QR-api-popup{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.QRPOPUP .QR-api .QR-api-popup-con-01{
    width: 48%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--black-20);
    border-radius: var(--radius-lg);
    margin-top: 2.5rem;
    padding: 2.5rem;
    text-align: center;
}
.QRPOPUP .QR-api-popup-con-02{
    width: 25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 2rem;
    text-align: center;
}

.QRPOPUP .QR-login{
    display: flex;
    width: 30rem;
    flex-wrap: wrap;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
.QRPOPUP .QR-login-popup{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}
.QRPOPUP .QR-login-popup-con-01{
    width: 25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 2rem;
    text-align: center;
}

.QRPOPUP .QR-security{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    flex-direction: column;
}
.QRPOPUP .QR-security-popup{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    text-align: center;
}
.word-guid{
    border-radius: var(--radius-md);
    border: 1px solid var(--grayblue-30);
    padding: 1.25rem;
    margin-top: 1rem;
    display: flex;
    align-items: flex-start;
    gap: 20px;
}
.word-guid p{
    font-size: var(--font-size-16);
    color: var(--red);
    font-weight: var(--fw-medium);
}
.word-guid p img{
    margin-top: 6px;
}

.reissue-guid{
    border-radius: var(--radius-md);
    border: 1px solid var(--grayblue-30);
    padding: 1.25rem;
    margin-top: 1rem;
    display: flex;
    align-items: flex-start;
    gap: 20px;
}
.reissue-guid p{
    font-size: var(--font-size-18);
    color: var(--black-90);
    font-weight: var(--fw-medium);
}
.reissue-guid p img{
    margin-top: 6px;
}

.QR-scan-popup{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.QR-scan-popup .page-title-qna{
    font-size: var(--font-size-36);
    color: var(--black-90);
    font-weight: var(--fw-semibold);
}
.QR-scan-popup-con-01{
    width: 48%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--black-20);
    border-radius: var(--radius-lg);
    margin-top: 2.5rem;
    padding: 2.5rem;
    text-align: center;
}
.QR-scan-popup-con-02{
    width: 25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 2rem;
    text-align: center;
}

.QR-scan-popup-con-03{
    width: 25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 1rem;
    text-align: center;
}

.QR-scan-popup-con .QR-text-01{
    font-size: var(--font-size-24);
    color: var(--black-90);
    font-weight: var(--fw-semibold);
}
.QR-scan-popup-con .QR-text-02{
    color: var(--black-90);
    font-weight: var(--fw-regular);
    display: block;
    padding-top: 0.5rem;
}

.QR-scan-popup-con .QR-text-03{
    font-size: var(--font-size-14);
    color: var(--black-90);
    font-weight: var(--fw-regular);
    text-decoration: underline;
}

.QR-text-04{
    font-size: var(--font-size-14);
    color: var(--black-90);
    font-weight: var(--fw-regular);
    background: var(--grayblue-20);
    border-radius: var(--radius-round);
    padding: 0.25rem 1rem;
    margin-top: 1rem;
}
.form-security-wrap{
    margin-bottom: 1rem;
}

.form-security-wrap .QR-text-05{
    width: 100%;
    text-align-last: left;
    font-size: var(--font-size-16);
    color: var(--black-90);
    font-weight: var(--fw-semibold);
    padding-bottom: 0.35rem;
}

.QR-text-06{
    font-size: var(--font-size-14);
    color: var(--black-90);
    font-weight: var(--fw-bold);
    background: var(--gradient-gray-01);
    border-radius: var(--radius-round);
    padding: 0 1.25em;
    height:1.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.QR-time{
    font-size: var(--font-size-36);
    color: var(--Primary-color-03);
    font-weight: var(--fw-semibold);
}

.QR-qna {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* N2추가 */
.QRcode{
    display: flex;
    background: url(../images/N2_QR_border.png) no-repeat center;
    width: 13.25rem;
    height: 13rem;
    justify-content: center;
    align-items: center;
    margin: 1.35rem;
}
/************/

.HOMEimg{
    margin-top: 6.25rem;
}

.QR .QR-login{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.timer-group a{
    display: block;
    background: url(../images/N2_icon_reset.png) no-repeat center top 11px;
    width: 2rem;
    height: 3rem;
}



/* 오류코드 */
.table-errorcode-wrap{
    width: 100%;
    max-width: 1200px;
    display: flex;
    margin: auto;
    border-top : 1px solid var(--black-30);
    margin-bottom: 6rem;
}
.table-errorcode-wrap>div{
    width: 50%;
}
.table-errorcode-wrap .table-wrap {
    width: 50%;
    max-width: 50%;
    min-width: 50%;
}

.table-errorcode-wrap .table-wrap:first-child {
    margin-top: 0px;
}


/* 공통 */
.padding-top-50{
    padding-top: 3.125rem;
}
.margin-top-40{
    margin-top: 2.5rem;
}
.margin-left-16{
    margin-left: 1rem;
}
.margin-bottom-0{
    margin-bottom: 0 !important
}
.margin-bottom-80{
    margin-bottom: 5rem !important
}


/* BOOTSTRAP RESET */
table{
    color:var(--black-70) !important;
}
table th{
    color:var(--black-90) !important;
    vertical-align: middle !important;
}

table td{
    color:var(--black-70) !important;
    vertical-align: middle !important;
}



/* ==================== MOB ==================== */

@media (max-width: 1280px) {
    .community {
        padding: 0 1.7rem;
    }
}

@media (max-width: 1200px) {
    .modal-xl,  .modal-lg { width: 100%; }
}

.timer-group{
    display: flex;
    align-items: center;
    gap: 1rem;
}

@media (max-width: 1024px) {
    .modal-content {
        width: 90%;
        margin: auto;
    }
    .about-wrap .namuh-plug .nh_sub_card-con a {
        margin-top: 6px;
    }
    .about-wrap .namuh-plug .namuh-plug-con02 ul li {

        height: 230px;
    }
    /* namuh PLUG */
    .about-wrap .namuh-plug .nh_sub_card-con {
        height: 220px;
        padding-top: 220px;
    }

    .about-wrap .namuh-plug {
        padding: 2rem; /* namuh PLUG 페이지 여백 */
    }



    /* 서비스 이용안내 */
    .howto-wrap .contents .namuh-plug-guide {
        width: 980px;
        height: 36.5rem;
    }
    .howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-01 .namuh-plug-guide-title {
        padding-left: 1.2rem;
    }
    .howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-01 .namuh-plug-guide-img {
        margin-left: 1.2rem;
    }
    .howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-box {
        width: 17rem;
    }

    .howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-01 {
        width: 16rem;
    }
    .howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-01 .namuh-plug-guide-01-bar {
        padding-left: 1.2rem;
        border-radius: 13px;
    }

    .howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-02 {
        left: 229px;
    }
    .howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-03 {
        left: 469px;
    }
    .howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-04 {
        left: 708px;
    }

    .qna-list-wrap {
        width: 59.188rem;
    }
    .question {
        padding: 14px 10px;
    }
    /* .console-wrap .text-wrap {
        padding: 0 1.25rem;  테스트베드 검색영역 좌우 여백갓
    }     */

    .howto-wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0 1.7rem;
    }
    .errorcode-wrap{
        padding: 0 1.27rem;
    }

    /* body.user .user-content .content-wrap{
        padding: 0 1.7rem; 전체 컨텐츠 감싸는 영역 (유지)
    }*/


    /*
        .content-wrap{
            padding: 0; /* 전체 컨텐츠 감싸는 영역
        } */


}
/* @media (max-width: 980px) {
    .howto-wrap .tab_contents img{width: 100%;}
} */


@media (max-width: 768px){

    /* N2추가 */
    .btn-appli {
        width: 9.875rem;
        height: 3.3rem;
        background: url(../images/nh_icon_write.svg) left -8.3rem top 1rem / 21.25rem 1.25rem no-repeat, linear-gradient(150deg, #f1c647 0%, #e19f00 200%);
        border-radius: var(--radius-round);
        border: 2px solid #fff;
        outline: 2px dashed #f1c647;
        font-size: var(--font-size-18);
        padding-left: 2rem;
    }
    /************/


    .btn-reque {
        height: 3.2rem;
        padding: 0 2rem;
        font-size: var(--font-size-18);
    }

    .modal-footer .btn, .modal-md .modal-footer .btn {
        height: 3rem;
        padding: 0 2.8rem;
        font-size: var(--font-size-18);
    }

    .transition-title .txt-move2{
        margin-top: 12px;
    }

    /* namuh PLUG */
    .about-wrap .namuh-plug .namuh-plug-con01 ul li:nth-child(1) {
        background-size: 100%;
    }
    .about-wrap .namuh-plug .namuh-plug-con01 ul li:nth-child(2) {
        background-size: 100%;
    }
    .about-wrap .namuh-plug .namuh-plug-con01 ul li:nth-child(3) {
        background-size: 100%;
    }
    .about-wrap .namuh-plug .namuh-plug-con01 ul li:nth-child(4) {
        background-size: 100%;
    }

    /* 서비스 이용안내 */
    .page-title {
        padding-bottom: 2.75rem;
        margin-bottom: 0;
    }
    .howto-wrap .contents{
        width:100%;
        padding: 0 3rem;
        margin-bottom: 5rem;
    }
    .howto-wrap .contents .namuh-plug-guide {
        width: 100%;
        height: auto;
        position: unset;
    }
    .howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-box .namuh-plug-guide-title {
        padding-left: 1.25rem;
        width: 50%;
        margin-top: 0;
    }
    .howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-box {
        position: unset;
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        height: 15rem;
        justify-content: space-between;
    }
    .howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-box .namuh-plug-guide-title .namuh-plug-guide-text {
        height: 6rem;
        width: 90%;
    }

    .howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-01,
    .howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-02,
    .howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-03,
    .howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-04{
        width: 100%;
    }
    .howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-01 .namuh-plug-guide-img {
        margin-left: 0;
        margin-right: 1rem;
    }
    .howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-01 .namuh-plug-guide-01-bar {
        background: url(../images/nh_MOB_step_bar_01.png) no-repeat right 0 top;
        height: 50px;
        color: var(--white);
        font-weight: var(--fw-semibold);
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding-left: 1.25rem;
        width: 100%;
        border-radius: var(--radius-7);
        font-size: var(--font-size-26);
        background-size: cover;
    }
    .howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-02 .namuh-plug-guide-02-bar {
        background: url(../images/nh_MOB_step_bar_02.png) no-repeat right 0 top;
        height: 50px;
        color: var(--white);
        font-weight: var(--fw-semibold);
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding-left: 1.25rem;
        width: 100%;
        border-radius: var(--radius-7);
        font-size: var(--font-size-26);
        background-size: cover;
    }
    .howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-03 .namuh-plug-guide-03-bar {
        background: url(../images/nh_MOB_step_bar_03.png) no-repeat right 0 top;
        height: 50px;
        color: var(--white);
        font-weight: var(--fw-semibold);
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding-left: 1.25rem;
        width: 100%;
        border-radius: var(--radius-7);
        font-size: var(--font-size-26);
        background-size: cover;
    }
    .howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-03 {
        margin-top: 4.6rem;
    }
    .howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-04 .namuh-plug-guide-04-bar {
        background: url(../images/nh_MOB_step_bar_04.png) no-repeat right 0 top;
        height: 50px;
        color: var(--white);
        font-weight: var(--fw-semibold);
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding-left: 1.25rem;
        width: 100%;
        border-radius: var(--radius-7);
        font-size: var(--font-size-26);
        background-size: cover;
    }

    .qna-wrap {
        width: 100%;
        padding: 0;
        margin-bottom: 3rem;
    }
    .qna-list-wrap {
        width: 100%;
    }

    body.user .user-content .content-wrap .table-wrap {
        clear: both;
        overflow: auto;
    }

    .table-errorcode-wrap {
        flex-direction: column;
    }

    /* table */
    .table-wrap {
        /* padding: 0 1.25rem;*/
    }
    .table-wrap .list-info {
        margin-bottom: 0.8rem ;
    }
    .table-wrap .list-info {
        align-items: center;
    }

    .modal-content .table-wrap {
        padding: 0 ;
    }
    .about-wrap .namuh-plug .namuh-plug-con-title .img_NamuhPLUG_main_con02_title {
        height: 5rem;
    }



}
@media (max-width: 768px){
    .howto-wrap .contents {
        padding: 0 0;
    }
    .about-wrap .namuh-plug .namuh-plug-con01 {
        margin-bottom: 0rem;
    }
    .table-errorcode-wrap>div{
        width: 100% ;
    }
    .table-errorcode-wrap .table-wrap {
        width: 100% ;
        max-width: 100% ;
        min-width: 100% ;
    }

    /* 보안인증키 관리 */
    .btn-security {
        height: 2.72rem;
    }
}
@media (max-width: 540px){
    .howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-box .namuh-plug-guide-title .namuh-plug-guide-text {
        font-size: var(--font-size-14);
        margin-top: 0.2rem;
        height: 5rem;
    }
    .howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-box {
        height: 12rem;
    }
    .howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-box .namuh-plug-guide-title {
        font-size: var(--font-size-18);
    }
    .howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-box .namuh-plug-guide-img {
        width: 10.438rem;
        height: 6.375rem;
    }
    .howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-02 .namuh-plug-guide-img>.btn-QRscan {
        margin-top: 10.8rem;
    }
    .howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-03 {
        margin-top: 3rem;
    }
}
@media (max-width: 480px){
    .btn-appli {
        width: 9.875rem;
        height: 3.125rem;
        background: url(../images/nh_icon_write.svg) left -7.9rem top 0.8rem / 21.25rem 1.25rem no-repeat, linear-gradient(150deg, #f1c647 0%, #e19f00 200%);
        border-radius: var(--radius-round);
        border: 2px solid #fff;
        outline: 2px dashed #f1c647;
        font-size: var(--font-size-16);
        padding-left: 2rem;
    }

    .btn-reque {
        height: 3.125rem;
        padding: 0 2rem;
        font-size: var(--font-size-16);
    }
    .modal-header h2 {
        font-size: var(--font-size-28);
    }
    .modal-footer .btn, .modal-md .modal-footer .btn {
        height: 2.4rem !important;
        padding: 0 1.5rem !important;
        font-size: var(--font-size-15) !important;
    }
    .main .content-wrap .main-intro {
        padding: 0 6%;
    }

    .transition-title .txt-move2 {
        margin-top: 0.8rem;
    }

    /* namuh PLUG */
    .about-wrap .namuh-plug .namuh-plug-con01 ul li:nth-child(1) {
        background-size: 130%;
    }
    .about-wrap .namuh-plug .namuh-plug-con01 ul li:nth-child(2) {
        background-size: 130%;
    }
    .about-wrap .namuh-plug .namuh-plug-con01 ul li:nth-child(3) {
        background-size: 130%;
    }
    .about-wrap .namuh-plug .namuh-plug-con01 ul li:nth-child(4) {
        background-size: 130%;
    }

    .about-wrap .namuh-plug {
        padding: 0;
    }


    /* 서비스 이용안내 */
    .howto-wrap .contents {
        /* padding: 0 1.6rem; */
    }
    .howto-wrap {
        padding: 0 1.25rem;
    }
    .howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-01 .namuh-plug-guide-01-bar {
        height: 40px;
        font-size: var(--font-size-22);
    }
    .howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-box .namuh-plug-guide-img {
        width: 9.438rem;
        height: 7.375rem;
    }
    .howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-box .namuh-plug-guide-title .namuh-plug-guide-text {
        height: 5rem;
    }
    .howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-box {
        height: 12rem;
    }
    .howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-box .namuh-plug-guide-title .namuh-plug-guide-text {
        margin-top: 0;
    }

    .about-wrap .namuh-plug .namuh-plug-con-title {
        font-size: var(--font-size-20);
    }
    .about-wrap .namuh-plug .namuh-plug-con-title img {
        width: 70%;
    }
    .about-wrap .namuh-plug .nh_sub_card-con .nh_sub_card-con-title {
        font-size: var(--font-size-18);
    }
    .about-wrap .namuh-plug .nh_sub_card-con {
        font-size: var(--font-size-14);
    }
    /* .howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-box .namuh-plug-guide-title,
    .howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-box .namuh-plug-guide-img{
        margin-top: 0.6rem;
    } */


    .jsgrid-grid-header .jsgrid-header-row > .jsgrid-header-cell:not(:first-child) {
        display: none;
    }
    .jsgrid-grid-body .jsgrid-cell:not(:first-child) {
        display: none;
    }
    .jsgrid-grid-header .jsgrid-header-row > .jsgrid-header-cell{
        padding: 0.8rem 0;
    }
    .jsgrid-grid-body .jsgrid-cell {
        padding: 0.8rem 0;
    }


    /* modal 팝업 */
    .modal-header {
        align-items: center !important;
        padding: 2rem 2rem 0 !important;
    }
    .modal-body {
        padding: 0.5rem 2rem;
    }
    .modal-footer {
        padding-bottom: 2rem !important;
    }

    .modal-sm, .modal-md, .modal-md-l {
        width: 100%;
    }
    .page-title h2 {
        font-size: var(--font-size-30);
    }
    /* body.user .user-content .content-wrap {
        padding: 0 1.25rem;
    } */
    /* .main-content{
         padding: 0 1.25rem;
    } */

    .page-title-2 h2 span {
        font-size: var(--font-size-22);
        margin-bottom: 0.7rem;
    }

    .community  {
        padding: 0 1.25rem;
    }

    /* 초기화 */
    .jsgrid-table{
        font-size: var(--font-size-14);
    }
    .table-wrap .list-info .list-count{
        font-size: var(--font-size-14);
    }

    .QRPOPUP .popup-page-title{
        max-width: 100%;
        padding-top: 0.5rem;
        font-size: var(--font-size-24);
    }
    .QRPOPUP .HOMEimg img {
        width: 30%;
    }
    .QRPOPUP .QR-api .QR-api-popup-con-01 {
        width: 100%;
        padding: 1rem;
        margin-top: 0.5rem;
    }
    .HOMEimg {
        margin-top: 0.5rem;
    }
    .QR-api-popup-con .QR-text-01{
        font-size: 14px;
    }

    .QR-api-popup-con .QR-text-03{
        margin-top: 1rem;
    }
    .QRcode img,
    .QRcode canvas{
        width: 5.5rem !important;
    }

    .QRcode{
        background: url(../images/N2_QR_border.png) center top / 7rem 7rem no-repeat;
        width: 13.25rem;
        height: 7rem;
        margin: 1.35rem;
    }
    .QRPOPUP .QR-api .QR-api-popup-con-01{
        width: 100% !important;
        border-radius: var(--radius-md);
        padding: 1rem !important;
        margin-top: 0.5rem !important;
    }


}
@media (max-width: 420px) {
    .howto-wrap .btn{width: 100%; padding: 10px;}
    .howto-wrap .howto_tab {flex-direction: column; }
    .howto-wrap .howto_tab li{font-size :15px; border-bottom:0;}
    .howto-wrap .howto_tab li:last-child{border-bottom: 1px solid #ddd;}
    .howto-wrap .howto_tab li.active{border: 1px solid #047099;}
}
@media (max-width:414px) {
    .about-wrap .namuh-plug .namuh-plug-con02 ul {
        padding-top: 1.5rem;
    }

    /* 보안인증키관리 */
    .form-security-wrap {
        padding-left: 0.6rem;
        padding-right: 0.6rem;
    }
}
@media (max-width:375px) {


    .btn-appli{
        width:auto; height:2rem;
        background: url(../images/nh_icon_write.svg) left -8rem top 0.4rem / 19rem 1rem no-repeat, linear-gradient(150deg, #f1c647 0%, #e19f00 200%);
        border-radius: var(--radius-round);
        border:1px solid #fff;
        outline:1px dashed #f1c647;
        font-size: var(--font-size-13);
        padding: 0 1.2rem 0 2.3rem;
        margin: 0;
    }
    .btn-reque{
        width: auto;
        padding: 0 1.2rem;
        font-size: var(--font-size-13);
        height: 2rem;
        margin: 0;
    }
    .about-wrap .namuh-plug .namuh-plug-con02 {
        padding: 2rem 1.75rem;
    }
    .about-wrap .namuh-plug .namuh-plug-con-title .img_NamuhPLUG_main_con02_title {
        height: 4.5rem;
    }
    .about-wrap .namuh-plug .nh_sub_card-con .nh_sub_card-con-title {
        font-size: var(--font-size-17);
    }
    .howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-box .namuh-plug-guide-img {
        width: 8.438rem;
    }

    .howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-02 .namuh-plug-guide-img>.btn-QRscan{
        margin-top: 10.625rem !important;
        width: 8.75rem;
        height: 44.8px;
        background: url(../images/icon-QR.png) left 1.3rem top 0.8rem / 1.25rem auto no-repeat, linear-gradient(150deg, #B1F54D 0%, #009292 90%);
        border-radius: var(--radius-round);
        color: var(--white);
        font-weight: var(--fw-medium);
        font-size: var(--font-size-16);
        padding-left: 1.6rem;
        padding-top: 0.4rem;
    }

    /* 보안인증키관리 */
    .btn-security {
        height: 2.5rem;
    }
    .form-security-wrap .QR-text-05 {
        padding-left: 0;
    }
}
@media (max-width: 360px){

    /* screen.css 추가 */
    .swagger-section .swagger-ui-wrap table.fullwidth{
        width: 61.25rem !important;
    }
    .padding-top-50{
        padding-top: 1.875rem;
    }
    .word-guid p img {
        margin-top: 6px;
        width: 20px;
    }

    .modal-xl .modal-footer .btn, .modal-lg .modal-footer  .btn, .modal-md .modal-footer  .btn {
        width: auto;
        height: 2.8rem;
        padding: 0 2rem;
        font-weight: var(--fw-medium);
        background: var(--warning-gradient-color-green-03);
        border-radius: var(--radius-round);
        color: var(--white);
        font-size: var(--font-size-16);
    }
    .modal-footer {
        padding-bottom: 1.875rem !important;
    }
    .modal-body { padding: 0.5rem 2rem;}


    /* .modal-dialog{ margin: initial;} */
    .modal-header h2{ font-size: var(--font-size-24); font-weight:var(--fw-bold);}

    .modal-header .close {width:1.6rem; height:1.6rem;
        background: url("../images/nh_icon_close.svg") left 0rem top 0rem / 1.5rem 1.5rem no-repeat ;  }

    .modal-content {
        border: none !important;
        border-top-left-radius: 0.8rem !important;
        border-top-right-radius:  0.8rem  !important;
        border-bottom-left-radius:  0.8rem  !important;
        border-bottom-right-radius:  0.8rem  !important;
    }
    .modal-header {
        padding: 1.755rem 1.875rem 0 !important;
        border-radius: 0.8rem !important;
    }
    .modal-body {
        padding: 0;
        /* height: 25rem; 모바일 팝업 세로사이즈 제거*/
    }


    .page-title-2{
        margin-right: 0;
        margin-bottom: 1rem;
        padding: 1.5rem 0rem;
        display: flex;
        align-items: flex-start;
        flex-direction: column;
    }
    .page-title-2 h2 span{
        font-size: var(--font-size-24);
        color: var(--black-90);
        font-weight: var(--fw-semibold);
        margin-bottom: 0.5rem;
    }

    .apiguide-wrap>.page-title {
        margin-left: 0;
    }
    .page-title{
        align-items: flex-start;
        margin-bottom: 0;
        padding: 1.5rem 0;
    }

    .howto-wrap>.page-title{
        padding: 1.5rem 0;
    }
    .page-title h2{
        font-size: var(--font-size-24);
        color: var(--black-90);
        font-weight: var(--fw-semibold);
        margin-bottom: 0.5rem;
    }
    .page-title p{
        font-size: var(--font-size-14);
        text-align:  left;
    }

    .jsgrid-grid-body .jsgrid-cell{
        padding: 0.5rem 0;
    }
    .qna-wrap{
        padding: 0;
        margin-bottom: 2rem;
    }
    .question {
        padding: 1rem 0;
    }
    .question>p>img{
        margin-right: 10px;
        width: 2.125rem;
    }
    .question>span>img{
        width: 1.625rem;
    }

    .about-wrap {
        width: 100%;
    }
    .about-wrap .namuh-plug .namuh-plug-con-title{
        font-size: var(--font-size-18);
    }
    .about-wrap .namuh-plug .namuh-plug-con01 ul {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .about-wrap .namuh-plug .nh_sub_card-con{
        display:flex;
        font-size: var(--font-size-12);
    }
    .about-wrap .namuh-plug .nh_sub_card-con .nh_sub_card-con-title{
        font-size: var(--font-size-14);
    }

    .about-wrap .namuh-plug .namuh-plug-con01 ul li {
        width: 48%;
        margin-bottom: 1.5rem;
    }

    .about-wrap .namuh-plug .namuh-plug-con02 {
        padding: 3rem 1.25rem;
        flex-direction: column;
        margin-top: 2rem;
        margin-bottom: 0;
    }

    .about-wrap .namuh-plug .namuh-plug-con02 ul {
        width: 100%;
        padding-top: 1rem;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .about-wrap .namuh-plug .namuh-plug-con02 ul li {
        width: 49%;
        padding: 0.5rem 1.563rem 3rem;
        margin-bottom: 0.5rem;
    }

    .howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-01 p img,
    .howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-02 p img,
    .howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-03 p img,
    .howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-04 p img{
        width: auto;
        height:100%;
    }

    .howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-04 p.namuh-plug-guide-img{
        background: var(--gray-10) url(../images/nh_sub_step_04.png) right -18px top -7px / 105% no-repeat;
    }
    .howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-02{
        margin-bottom: 1.3em;
    }
    .howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-02 .namuh-plug-guide-title{

    }

    .qna-list-wrap{
        width: 100%;
    }
    .howto-wrap {
        width: 100%;
    }
    /* .howto-wrap .contents {
        height: 50rem;
    } */
    .howto-wrap .contents .namuh-plug-guide{
        position:static;
        height: auto;
        padding: 0;
    }
    .howto-wrap .contents .namuh-plug-guide div,
    .howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-01 .namuh-plug-guide-01-bar,
    .howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-02 .namuh-plug-guide-02-bar,
    .howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-03 .namuh-plug-guide-03-bar,
    .howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-04 .namuh-plug-guide-04-bar,
    .howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-05 .namuh-plug-guide-05-bar,
    .howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-06 .namuh-plug-guide-06-bar{
        position:static;
    }
    .howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-01 .namuh-plug-guide-title{
        padding-left: 8px;
    }
    .howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-01 .namuh-plug-guide-01-bar{
        background:url(../images/nh_MOB_step_bar_01.png) no-repeat right 0 top;
        width: 100%;
        height: 2.2rem;
        font-size: var(--font-size-16);
        border-radius: 0.5rem;
        padding-left: 0.7rem;
        background-size: cover;
    }
    .howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-02 .namuh-plug-guide-02-bar{
        background:url(../images/nh_MOB_step_bar_02.png) no-repeat right 0 top;
        width: 100%;
        height: 2.2rem;
        font-size: var(--font-size-16);
        border-radius: 0.5rem;
        padding-left: 0.7rem;
        background-size: cover;
    }
    .howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-03 .namuh-plug-guide-03-bar{
        background:url(../images/nh_MOB_step_bar_03.png) no-repeat right 0 top;
        width: 100%;
        height: 2.2rem;
        font-size: var(--font-size-16);
        border-radius: 0.5rem;
        padding-left: 0.7rem;
        background-size: cover;
    }
    .howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-04 .namuh-plug-guide-04-bar{
        background:url(../images/nh_MOB_step_bar_04.png) no-repeat right 0 top;
        width: 100%;
        height: 2.2rem;
        font-size: var(--font-size-16);
        border-radius: 0.5rem;
        padding-left: 0.7rem;
        background-size: cover;
    }
    .howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-box  {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: center;
    }
    .howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-01 {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: center;
    }
    .howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-box .namuh-plug-guide-title {
        font-size: var(--font-size-18);
        padding-left: 0;
        width: 50%;
        padding-bottom: 1rem;
    }
    .howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-box .namuh-plug-guide-img {
        width: 43%;
        height: 6rem;
        margin-left: 0;
    }
    .howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-01 .namuh-plug-guide-title .namuh-plug-guide-text {
        font-size: var(--font-size-14);
        width: 100%;
        margin-top: 0;
        height: auto;
    }
    .howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-box .namuh-plug-guide-title .namuh-plug-guide-text{
        font-size: var(--font-size-13);
        width: 100%;
        height:auto;
        padding-right: 0.4rem;
        padding-bottom: 1rem;
        margin-top: 0;
    }

    .QRPOPUP{
        height: auto;
        width: 100%;
        padding: 0 1rem 2rem; /* 팝업내부여백 제거 */
    }

    .popup-page-title{
        font-size: var(--font-size-24);
    }

    .QRPOPUP .QR-api{
        width: 100%;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
    }
    .QRPOPUP .QR-api-popup{
        width: 100%;
    }

    .QRPOPUP .QR-api-popup p{
        text-align: center;
    }
    .QRPOPUP .HOMEimg{
        margin-top: 1rem;
    }
    .QRPOPUP .QR-title-icon img{
        width: 3.125rem;
    }

    .QR-time {
        font-size: var(--font-size-30);
    }
    .QRPOPUP .QR-login {
        width: 100%;
    }
    .QRPOPUP .QR-login-popup-con-01 {
        width: 100%;
    }

    .input-security {
        /* width: 12.5rem; 모바일320에서 가로사이즈 제거*/
    }
    .btn-security {
        width: 4rem;
        height: 2.52rem;
    }
    .word-guid p {
        font-size: var(--font-size-12);
    }
    .word-guid {
        padding: 0.6rem 1rem;
        /* margin-top: 0.5rem;  보안인증키관리 팝업에서 여백제거 */
        display: flex;
        gap: 6px;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .QRPOPUP .timer-wrap {
        padding: 0;
    }
    .popup-page-title-m {
        font-size: var(--font-size-24);
    }
    .reissue-guid p {
        font-size: var(--font-size-14);
    }
    .QRPOPUP .reissue-guid-text>span {
        font-size: var(--font-size-14);
    }
    .reissue-guid p img {
        width: 30px;
    }
    .QRPOPUP .reissue-guid {
        padding: 0.6rem 1rem;
        margin-top: 0.5rem;
        display: flex;
        gap: 6px;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .QR-scan-popup .page-title-qna {
        font-size: var(--font-size-24);
    }
    .QRPOPUP .QR-login-popup-con-01 {
        margin-top: 1rem;
    }

    .QR-scan-popup-con .QR-text-01{
        font-size: var(--font-size-18);
    }

    .table-errorcode-wrap{
        width: 100%;
        max-width: 100%;
        flex-direction: column;
        border-top : 0;
    }
    .table-errorcode-wrap .table-wrap{
        width: 100%;
    }
    .table-errorcode-wrap .table-wrap:first-child tr th:first-child,
    .table-errorcode-wrap .table-wrap:first-child tr td:nth-child(2){
        border-top : 1px solid var(--black-30);
    }
    .table-errorcode-wrap {
        margin-bottom: 2rem;
    }

    /* 서비스 이용안내 */

    .howto-wrap .contents {
        padding: 0;
    }

    .howto-wrap .contents {
        margin-bottom: 3rem;
    }
    .howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-box.namuh-plug-guide-02 {
        height: 14rem;
    }
    .howto-wrap .contents .namuh-plug-guide .namuh-plug-guide-box.namuh-plug-guide-04 {
        height: 15.5rem;
    }
    .about-wrap .namuh-plug .namuh-plug-con-title {
        width: auto;
    }
    .errorcode-wrap {
        padding: 1.25rem; /* 에러코드화면 좌우여백 */
    }

    /* 공지사항 글보기 팝업 */
    .modal-content .table-wrap {
        padding-left: 1.25rem;
    } /* modal body 좌우여백  */
}

/*btn-rows2 260728*/
.btn-rows2{display:inline-flex;text-align:center;line-height:11px;width:auto !important;padding:3px 6px 4px !important}

/*table-file 260721*/
.table-fix{table-layout:fixed}
.table-wrap table .table-file-header th span,
.table-wrap table .table-file-body td a{display:block;min-width:80px;line-height:26px}

.table-wrap .table-file-header {
    border-top: 1px solid var(--black-30) !important;
    border-bottom: 1px solid var(--black-50) !important;
}
.table-wrap .table-file-header th{
    background: var(--white) !important;
    border: none !important;
    padding: 1.07rem 0;
    line-height: 1em;
    font-weight: var(--fw-semibold);
}
.table-wrap .table-file-body td{padding: 1.23rem 0;min-height: 40px;}
.table-file-txt1{
    font-weight: var(--fw-regular);
    width: 100%;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left !important;
    line-height:26px !important;
}
.table-file-txt1:hover{color: var(--black-90);font-weight: var(--fw-semibold);}

@media (max-width: 480px){
    .table-wrap .table-file-header th,
    .table-wrap .table-file-body td{padding:0.5rem 0;}
    .table-wrap .table-file-body td > a{font-size: var(--font-size-14);}
}
/*apiKey 260610*/
.table-scroll{position: relative;overflow:auto;}
.table-scroll table{width:100%}
.table-scroll table thead{position:sticky;top:0;left:0;z-index:2}
.table-scroll table thead tr th:after{content:'';position:absolute;left:0;bottom:-1px;width:100%;height:1px;background:var(--black-30)}

.table-wrap .table-type-x {border-top: 0}
.table-wrap .table-type-x th,
.table-wrap .table-type-x td{border-top-color:var(--black-30)}
.table-wrap .table-type-x thead tr th {
    position: relative;
    font-size: var(--font-size-16);
    text-align: center;
    font-weight: 600;
    border-bottom:0;
    background:var(--grayblue-10);
    border-top:0;
    height:56px;
}
.table-wrap .table-type-x > tbody > tr > th {
    position: relative;
    text-align: left;
    padding-left: 1rem;
    padding-right: 1rem;
    font-weight: var(--fw-medium);
    font-size: var(--font-size-16);
    border-bottom: 1px solid var(--black-30);
    color: var(--black-90);
    background:var(--grayblue-10)
}
.table-wrap .table-type-x > tbody > tr > td {
    padding: 0.86rem 1rem;
    border-bottom: 1px solid var(--black-30);
    font-size: var(--font-size-16);
    color: var(--black-70);
}
.table-wrap .table-type-x > tbody > tr > td:first-child {
    border-left: 0;
}
.table-wrap .table-type-x > tbody > tr > td:last-child {
    border-right: 0;
}
.table-wrap .table-type-x > tbody > tr:last-child > th {
    border-bottom: 1px solid  var(--black-30);
}
.table-wrap .table-type-x > tbody > tr:last-child > td {
    border-bottom: 1px solid  var(--black-30);
}

.body-api{background: #e5e9f2;}
.apikeyBox{display:flex;padding: 52px 0;justify-content: center;flex-direction: column;align-items: center;}
.apikeyBox-in{width:100%;max-width: 1000px;background: #fff;padding:3.75rem 4.25rem;}
.apikeyBox-tit { font-size: var(--font-size-32) ; color: var(--black-90);  font-weight: var(--fw-medium); text-align:center;}
.apikeyBox-dl{border:1px solid var(--grayblue-20);border-bottom:0}
.apikeyBox-dl>dt{min-height:50px;padding:9px 19px;display:flex;justify-content: space-between;align-items: center;border-bottom:1px solid var(--grayblue-20)}
.apikeyBox-dl>dd{display:none;font-size:var(--font-size-14);color:var(--black-70);min-height:200px;background:var(--black-20);padding:17px 22px;border-bottom:1px solid var(--grayblue-20)}
.apikeyBox-dl>dt.active + dd{display:block}
.apikeyBox-dl>dt .ico-plus-minus{min-width: 30px;height:30px;background: url("../images/nh_icon_plus.svg") no-repeat 50%;}
.apikeyBox-dl>dt.active .ico-plus-minus{background-image: url("../images/nh_icon_minus.svg")}
.apikeyBox-dl-dd-header{display:flex;justify-content: space-between;padding:5px 19px;min-height:50px;border-bottom:1px solid var(--grayblue-20);background:var(--grayblue-10)}
.apikeyBox-dl-dd-header strong{font-size:var(--font-size-16);color:var(--black-90);display: flex;align-items: center;font-weight: 500;}
.apikeyBox-dl-dd-cont{padding: 17px 22px; max-height: 300px; overflow: auto;}

.plug-btn-box{margin-top: 40px;width: 100%;display: flex;flex-direction: column;align-items: center}
.plug-btn-box .plug-btn:first-child{margin-top:0}
.plug-btn{min-width:340px;margin-top:12px;border-radius: 20px;background: var(--black-20);padding: 30px;display: flex;flex-direction: column;align-items: center;text-align: center}
.plug-btn-logo{width: 180px;height: 30px;background: url("../images/plug_logo_n2_b.svg") 50% 50% no-repeat}
.plug-btn-tx1{margin-top: 16px;font-size: var(--font-size-20);color: #101116;font-weight: 600}
.plug-btn-tx2{margin-top: 12px;color: #454855;font-size: var(--font-size-16)}
.home-btn-logo{width: 180px;height: 30px;background: url("../images/pc_logo_n2_b.svg") 50% 50% no-repeat}
.plug-btn:hover{background: var(--warning-gradient-color-green-02)}
.plug-btn:hover>*{color:var(--white)}
.plug-btn:hover .plug-btn-logo{background-image: url("../images/plug_logo_n2_w.svg")}
.plug-btn:hover .home-btn-logo{background-image: url("../images/pc_logo_n2_w.svg")}

.btn-github{min-width:70px;height:40px;background: url("../images/logo-github.svg") no-repeat 50%;}
.GNB-mobile-top .btn-github{min-width:45px;height:27px;background-size: auto 24px;}
.btn-reque.bg-gray {background: var(--gradient-gray-01);}
.ico-plus{min-width: 30px;height:30px;background: url("../images/nh_icon_plus.svg") no-repeat 50%;}
.ico-minus{min-width: 30px;height:30px;background: url("../images/nh_icon_minus.svg") no-repeat 50%;}

.ck-tit{height: 32px;margin-bottom: 13px;}
.inp-ck{position:relative;display: inline-flex;align-items: center;}
.inp-ck>input {position:absolute;top:0;left:0;z-index:-1;margin: 0;padding: 0;-webkit-appearance: none;width: 0;height: 0 !important;opacity: 0;}
.inp-ck>label{margin: 0;display: flex;align-items: center;font-size:var(--font-size-20);color:var(--black-90);font-weight:var(--fw-semibold)}
.inp-ck>label:before{content:'';margin-right: 10px;min-width: 24px;height: 24px; border-radius:24px;display: inline-flex;background: var(--grayblue-40) url(../images/ico_ckv.svg) 50% 50% no-repeat;background-size: 12px auto;}
.inp-ck>input:checked + label:before{background-color: var(--Primary-color-03)}
.inp-ck-v{position:relative;display: inline-flex;align-items: center;}
.inp-ck-v>input {position:absolute;top:0;left:0;z-index:-1;margin: 0;padding: 0;-webkit-appearance: none;width: 0;height: 0 !important;opacity: 0;}
.inp-ck-v>label{margin: 0;display: flex;align-items: center;font-size:var(--font-size-16);color:var(--black-90);font-weight:var(--fw-medium);letter-spacing:-0.32px}
.inp-ck-v>label:before{content:'';margin-right: 16px;min-width: 18px;height: 18px;display: inline-flex;background: url(../images/ico_ck.svg) 50% 50% no-repeat;background-size: 18px;}
.inp-ck-v>input:checked + label:before{background-image: url(../images/ico_ck_on_n2.svg)}

.inp-rd-btn{position:relative;display: inline-flex;align-items: center;}
.inp-rd-btn>input {position:absolute;top:0;left:0;z-index:-1;margin: 0;padding: 0;-webkit-appearance: none;width: 0;height: 0 !important;opacity: 0;}
.inp-rd-btn>label{font-weight: var(--fw-medium);margin: 0;box-sizing:border-box;display: flex;align-items: center;font-size: var(--font-size-14);color: var(--black-70);background: var(--white);height: 27px;border:1px solid var(--grayblue-30);border-radius: 27px;padding: 0 12px;justify-content: center;}
.inp-rd-btn>input:checked + label{color: var(--white);background: var(--Primary-color-03);border-color:var(--Primary-color-03);}

.mk-list{display: flex;flex-wrap: wrap;align-items: center;border-left: 1px solid var(--grayblue-20);border-top: 1px solid var(--grayblue-20);border-right: 1px solid var(--grayblue-20);}
.mk-list>dt{min-width:202px;font-weight: var(--fw-medium);font-size:var(--font-size-16); color:var(--black-90);padding:12px 19px;box-sizing:border-box}
.mk-list>dd{padding:12px 19px;box-sizing:border-box}

.min-w-auto{min-width:auto !important}
.min-h-auto{min-height:auto !important}

.b0{border:0 !important}
.bg-none{background:none !important}
.bgc-none{background-color:none !important}
.bgm-none{background-image:none !important}

.ac{text-align:center !important}
.p0{padding:0 !important}
.m0{margin:0 !important}

.p10{padding:10px}
.pr10pro{padding-right:10% !important}
.pl2pro{padding-left:2% !important}

.ml3{margin-left:3px}
.ml10{margin-left:10px}
.mr10{margin-right:10px}
.mr24{margin-right:24px}
.mt24{margin-top:24px}
.mt33{margin-top:33px}
.mt50{margin-top:50px}
.mt52{margin-top:52px}

.f16{font-size: var(--font-size-16)}
.fw600{font-weight:var(--fw-semibold)}

.h30{height:30px}
.lhN{line-height: normal !important;}

.flex{display:flex}
.flex-vc{display:flex;align-items: center;}
.flex-ac{display:flex;justify-content: center;}
.flex-wrap{flex-wrap: wrap;}
.flex-vacw{display:flex;align-items: center;justify-content: center;flex-wrap: wrap;}
.flex-between{display: flex;align-items: center;justify-content: space-between;}
.flex-col{display: flex;flex-direction: column;}
.flex-col_c{display: flex;flex-direction: column;align-items: center;}

.flex1{flex:1}
.flex2{flex:2}
.flex3{flex:3}

@media (max-width: 540px){
    .apikeyBox-in{padding:2rem;}
    .mk-list>dt{width:100%}
}