@charset "utf-8";

:root {
    --font-base: 10px;
    --line-height-none: 1;
    --line-height-base: 1.4;
    --content-main-max: 1840px;
    --content-max:1440px;
    --content-width: 1200px;
    --header-height:60px;
    --header-main-heigh:89px;
    --border-radius:999px;
    --pad: 2.6rem;
    --gap: 2.6rem;
}

* { box-sizing: border-box; margin:0; padding:0; font-family: 'Pretendard GOV Variable', 'Pretendard GOV', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif; line-height: var(--line-height-base); -webkit-tap-highlight-color: transparent;}
html, body { height: 100%; margin: 0;}
html { font-size: var(--font-base); line-height: var(--line-height-base); scroll-behavior: smooth;}
body { margin: 0; color: var(--black-100); background-color: var(--white-00); overflow-y: auto;}
body.scroll-no { overflow: hidden;}
#wrap-ntis { /*display:flex; flex-direction:column;*/ min-height:100vh;}

/* sr-only */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; min-width: 0 !important;}
.sr-only-focusable:active, .sr-only-focusable:focus { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto;}

/* scroll */
::-webkit-scrollbar { width: 1rem; height: 1rem;}
::-webkit-scrollbar-track { background: transparent;}
::-webkit-scrollbar-thumb { background: var(--background-gray05); border-radius: 1rem;}
::-webkit-scrollbar-thumb:hover { background: var(--primary-10);}
* { scrollbar-width: thin; scrollbar-color: var(--primary-10) transparent;}/* Firefox */

/* header */
#header { position:fixed; top:0; left:0; width:100%; background-color: var(--white-00); height:var(--header-height);} 
#header::after { content: ""; display: inline-block; width: 100%; height: 1px; background-color: var(--background-gray30); position: absolute; top: var(--header-height);}
#header.scroll-down { border-bottom: 1px solid var(--background-gray30); box-shadow: 0 1.5rem 3rem rgba(0,0,0,.01);}
#header.header-open { z-index:800;}
#header .gnb-overlay { position:fixed; inset:0; background-color:rgba(0,0,0,.5); opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease; position: relative;}
#header.header-open .gnb-overlay { position:fixed; opacity:1; visibility:visible;} 
#header.header-open .gnb-overlay::before { content: ""; display: block; position: absolute; top:0; left: 0; width: 100%; height: 33rem; background-color: var(--white-00);}
#header .header-inner { display: flex; align-items:flex-start; justify-content: space-between; overflow:hidden; width:100%; height:var(--header-height); position:relative; transition:height .2s;}
#header .header-left, #header .header-util { display: flex; align-items: center; height:var(--header-height); gap:2rem; padding-inline: var(--pad);}
#header .header-left .btn-allmenu { display: none;}
#header h1 > .ntis-logo { mask-image: url(../images/common/ntis-logo3.svg); mask-repeat: no-repeat; mask-position: center; mask-size: contain; background-color: var(--black-100); forced-color-adjust: none; width: 6rem; height: 2.2rem; display: inline-block;}
#header .btn-search, #header .btn-allmenu, #header .btn-arrow, #header .btn-allmenu-close { display:inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0 !important; mask-repeat: no-repeat; mask-position: center; mask-size: contain; background-color: var(--background-gray90); forced-color-adjust: none;}
#header .btn-search { mask-image: url(../images/common/ico-search.svg);}
#header .btn-allmenu { mask-image: url(../images/common/ico-menu.svg);}
#header .btn-login { display:inline-flex; align-items: center; gap:.4rem; width: auto; height: 3.6rem; padding-inline: 1rem; font-size:var(--font-button-sm); font-weight: 400; color: var(--text-gray90); white-space:nowrap; cursor:pointer; border:1px solid transparent; background-color: var(--primarymain-50); color: var(--white-00); border-radius: var(--border-radius); transition:all .2s ease-in-out;}
#header .btn-profile { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border-radius: var(--border-radius); overflow: hidden; background: url(../images/common/profile-bg.png) no-repeat center; border:1px solid var(--background-gray30);}
#header .btn-profile > img { width: 100%; height: 100%;}
#header .gnb-wrap { display: inline-flex; justify-content: center; height: var(--header-height); width: 100%; max-width: 120rem; position: absolute; top: 0; left: calc(50% - 60rem); overflow: hidden;}
#header .gnb-wrap.gnb-on { height: auto; overflow: auto;}
#header .gnb-wrap > h1 { display: none;}
#header .gnb-wrap .gnb-ntis { display: flex; justify-content: center; width: 100%;}
#header .gnb-wrap .gnb-depth1 { display:flex; justify-content:space-between; align-items: flex-start; letter-spacing: -.05rem; width: 100%;}
#header .gnb-wrap.gnb-on .gnb-depth1 { padding-bottom: 5.2rem;}
#header .gnb-wrap .gnb-depth1 > li { position:relative; z-index:1; min-width: 8rem;}
#header .gnb-wrap .gnb-depth1 > li:nth-child(1) { width: 13%;}
#header .gnb-wrap .gnb-depth1 > li:nth-child(2) { width: 14%;}
#header .gnb-wrap .gnb-depth1 > li:nth-child(3) { width: 12%;}
#header .gnb-wrap .gnb-depth1 > li:nth-child(4) { width: 13%;}
#header .gnb-wrap .gnb-depth1 > li:nth-child(5) { width: 15%;}
#header .gnb-wrap .gnb-depth1 > li:nth-child(6) { width: 11%;}
#header .gnb-wrap .gnb-depth1 > li:nth-child(7) { width: 6%;}
#header .gnb-wrap .gnb-depth1 > li > a { display:inline-flex; align-items: center; justify-content: center; height:var(--header-height); font-size:1.8rem; font-weight:600; color:var(--black-100); position: relative; transition:all .3s ease-in-out;}
#header .gnb-wrap .gnb-depth1 > li > a::before { content: ""; display: inline-block; width: 0; height: 3px; background-color: var(--primarymain-50); position: absolute; bottom: 0; left: 50%; opacity: 0; transition:all .3s ease-in-out;} 
#header .gnb-wrap .gnb-depth1 li a { word-wrap:break-word; word-break: keep-all;}
#header .gnb-wrap .gnb-depth1 > li > a:hover::before, #header .gnb-wrap .gnb-depth1 > li > a:focus::before, #header .gnb-wrap .gnb-depth1 > li.curr > a::before { width: 100%; left: 0; opacity: 1;}
#header .gnb-wrap .gnb-depth1 .gnb-depth2 { padding:1.5rem 0 5rem; transform: translateY(-30rem); opacity: 0;  transition: opacity .2s ease-in-out;}
#header .gnb-wrap.gnb-on .gnb-depth1 .gnb-depth2 { opacity: 1; transform: translateY(0);}
#header .gnb-wrap .gnb-depth1 .gnb-depth2 > li > a { display:block; padding:1rem 0; font-size:1.5rem; color:var(--black-100); word-break:keep-all; line-height: 1.2;}
#header .gnb-wrap .gnb-depth1 .gnb-depth2 li> a:hover, #header .gnb-wrap .gnb-depth1 .gnb-depth2 li> a:focus, #header .gnb-wrap .gnb-depth1 .gnb-depth2 li> a:active, #header .gnb-wrap .gnb-depth1 .gnb-depth2 li.curr > a {color:var(--primary-70);}
#header .gnb-wrap .gnb-depth1 .gnb-depth3 { padding-bottom:.8rem; display: none;}
#header .gnb-wrap .gnb-depth1 .gnb-depth3 > li a {display:block; line-height:3rem; font-size:1.5rem; color:var(--text-gray70); line-height: 1.2; padding: .2rem 0; margin: 0 0 .5rem;}
#header .gnb-wrap .btn-allmenu-close { mask-image: url(../images/common/ico-arrow.svg); position: absolute; bottom: 2rem; display: none;}
#header .gnb-wrap.gnb-on .btn-allmenu-close {display: inline-flex;}
#header .header-search-wrap { position: absolute; top: var(--header-height); left: 0; width: 100%; background: var(--white-00); border-bottom: 1px solid var(--background-gray30); opacity: 0; pointer-events: none; transform: translateY(-20px); z-index: 900;}
#header .header-search-wrap.tsearch-open { opacity: 1; transform: translateY(0); pointer-events: auto;}
#header .header-search-wrap .header-search-overlay { position:fixed; inset:0; background-color:rgba(0,0,0,.5); opacity:0; visibility:hidden; height: 100vh; transition:opacity .3s ease, visibility .3s ease;}
#header .header-search-wrap.tsearch-open .header-search-overlay { opacity: 1; visibility: visible;}
#header .header-search-inner { width: 100%; background-color: var(--white-00); border-bottom: 1px solid var(--background-gray30); display: flex; flex-wrap: wrap; justify-content: center; position: fixed;}
#header .header-search-cont { width: 100%; max-width: 75rem; padding: 9rem 0 13rem;}
#header .header-search-cont .btn-tsearch-close { display:inline-flex; align-items: center; justify-content: center; mask-image: url(../images/common/ico-close.svg); mask-repeat: no-repeat; mask-position: center; mask-size: contain; background-color: var(--background-gray90); forced-color-adjust: none; width: 24px; height: 24px; position: absolute; left: 50%; bottom: 2rem; transform: translate(-50%,0);}
#header .search-bar-area { position: relative; display: flex; align-items: center; justify-content: flex-start; width: 100%;}
#header .search-bar-area .search-form-group { flex: 1;}
#header .search-bar-area .search-bar { display: flex; background-color:var(--white-00); border:1px solid var(--background-gray40); border-radius: var(--border-radius); padding:0 7.5rem 0 2.5rem; position: relative; width: 100%; height:5.6rem;}
#header .search-bar-area .search-bar .input-data { display:inline-flex; background-color: transparent; font-size:2rem; font-weight: 500; color: var(--black-100); width: 100%; border-color: transparent; height: auto !important;}
#header .search-bar-area .search-bar .input-data::placeholder { font-size:2rem; color: var(--text-gray50); font-weight: 300;}
#header .search-bar-area .search-bar .btn-area { display: flex; align-items: center; height: 100%; gap: 2rem; padding-right: 2.5rem; position: absolute; right: 0;}
#header .search-bar-area .search-bar .btn-arrow { mask-image: url(../images/common/ico-arrow.svg); width: 16px; height: 16px; transform: rotate(180deg);}
#header .keyword-flow-area { overflow: hidden; white-space: nowrap; width: 100%;}
#header .keyword-flow-list { display: inline-flex; gap:.8rem; padding: 2rem 0; animation: keyword-flow 60s linear infinite;} 
#header .keyword-flow-area:hover .keyword-flow-list { animation-play-state: paused;}
#header .keyword-flow-area .keyword-flow-list .keyword { display: inline-flex; align-items: center; padding: .5rem 1.6rem; border-radius: var(--border-radius); background-color: var(--background-gray10); font-size: var(--font-button-md); font-weight: 300; height: 3.5rem;}
#header .keyword-flow-area .keyword-flow-list .keyword:hover, #header .keyword-flow-area .keyword-flow-list .keyword:focus { background-color: var(--sub-10); border:1px solid var(--submain-50);}
@keyframes keyword-flow {0%{transform:translateX(0);} 100%{transform:translateX(-50%);}}

#header.header-hover .gnb-wrap.gnb-on .btn-allmenu-close { display: none;}
#header.header-hover .gnb-overlay { position:fixed; opacity:1; visibility:visible;} 
#header.header-hover .gnb-overlay::before { content: ""; display: block; position: absolute; top:0; left: 0; width: 100%; height: 33rem; background-color: var(--white-00);}

/* footer */
#footer .footer-inner { width: 100%; max-width: var(--content-width); margin: 0 auto;}
#footer .f-cont { display: flex; justify-content: space-between; padding: 3rem 0 5.2rem;}
#footer .f-copy-area { display: flex; gap: 2rem;} 
#footer .f-copy-area .f-copy { font-size: var(--font-body-md); color: var(--text-gray90); letter-spacing: -.1rem; font-weight: 500;}
#footer .f-menu-list { display: flex;}
#footer .f-menu-list > li { display: inline-flex; align-items: center; gap: .8rem; padding-inline: .5rem;}
#footer .f-menu-list > li::before { content: ""; display: inline-flex; width: 1px; height: 1.2rem; background-color: var(--background-gray70);}
#footer .f-menu-list > li:first-child:before { display: none;}
#footer .f-menu-list .f-menu { font-size: var(--font-body-md); color: var(--text-gray90); letter-spacing: -.1rem;}
#footer .f-link .f-menu { display: inline-flex; font-size: var(--font-body-md); color: var(--text-gray90); letter-spacing: -.1rem;}

/* container */
#container { width: 100%; padding: var(--header-height) 0 3.6rem;}
#container .container-inner { width: 100%; max-width: var(--content-width); margin: 0 auto;}
.contents .contents-inner.row { display: flex; gap: 6.7rem; flex-direction: row;}
.contents .contents-inner.col { display: flex; flex-direction: column;}
.contents .tit-bar { display: flex; align-items: center; justify-content: space-between;}
.contents .tit-bar-line { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--background-gray30); padding-bottom: 1rem; margin-bottom: 3rem;}
.page-tit-area { display: flex; align-items: center;}
.page-tit-area .page-tit-h1 { font-size: var(--font-heading-xlg); color: var(--background-gray90); font-weight: 700;}
.page-tit-area .page-tit-h2 { font-size: var(--font-heading-lg); color: var(--black-100); font-weight: 600;}
.page-tit-area .page-tit-h2 .num { color: var(--primarymain-50);}
.page-tit-area .page-tit-h3 { font-size: var(--font-heading-md); color: var(--black-100); font-weight: 500;}
.page-tit-area .page-tit-h4 { font-size: var(--font-heading-sm); color: var(--black-100); font-weight: 500;}

/* breadcrumb */
.breadcrumb-wrap { display: flex;}
.breadcrumb-wrap .breadcrumb { display: flex; flex:1; justify-content: flex-end; align-items: center; padding: 1.2rem var(--pad); gap:.5rem;}
.breadcrumb-wrap .breadcrumb > li { display: inline-flex; align-items: center; font-size: 1.5rem; gap:.5rem; border-bottom: none; padding: 0;}
.breadcrumb-wrap .breadcrumb > li::after { content: ""; display: inline-flex; align-items: center; mask-image: url(../images/common/ico-arrow-right.svg); width: 1.6rem; height: 1.6rem; mask-repeat: no-repeat; mask-position: center; mask-size: contain; background-color: var(--background-gray70); forced-color-adjust: none;}
.breadcrumb-wrap .breadcrumb > li:last-child:after { display: none;}
.breadcrumb-wrap .breadcrumb .home .txt::before { content: ""; display: inline-flex; align-items: center; mask-image: url(../images/common/ico-home.svg); width: 1.6rem; height: 1.6rem; mask-repeat: no-repeat; mask-position: center; mask-size: contain; background-color: var(--background-gray70); forced-color-adjust: none; margin-top: -.2rem;}
.breadcrumb-wrap .breadcrumb .txt { display: inline-flex; align-items: center; flex-direction: row; gap:.4rem; color: var(--background-gray70);}
.breadcrumb-wrap .breadcrumb .txt.curr { color: var(--black-100);}

/* tab */
.tab-list.tab-depth1 { padding:3rem 0 0;}
.tab-list.tab-depth1 > ul { display: flex; align-items: center; justify-content: flex-start; gap: .2rem;}
.tab-list.tab-depth1 > ul > li { display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--background-gray40); white-space: nowrap;}
.tab-list.tab-depth1.full > ul > li { flex: 1 0 0;}
.tab-list.tab-depth1 > ul > li > .btn-tab { display: flex; align-items: center; justify-content: center; width: 100%; font-size: var(--font-navigation-tit-md); font-weight: 600; color: var(--text-gray50); min-height: 5rem; padding:0 3rem; position: relative;}
.tab-list.tab-depth1 > ul > li > .btn-tab::after { content: ""; display: inline-block; width: 0; height: 3px; background-color: var(--primary-40); position: absolute; bottom: 0; left: 50%; opacity: 0; transition: all .3s ease-in-out;}
.tab-list.tab-depth1 > ul > li > .btn-tab:hover, .tab-list.tab-depth1 > ul > li > .btn-tab:focus, .tab-list.tab-depth1 > ul > li > .btn-tab:active, .tab-list.tab-depth1 > ul > li.active > .btn-tab { color: var(--black-100);}
.tab-list.tab-depth1 > ul > li > .btn-tab:hover::after, .tab-list.tab-depth1 > ul > li > .btn-tab:focus::after, .tab-list.tab-depth1 > ul > li > .btn-tab:active::after, .tab-list.tab-depth1 > ul > li.active > .btn-tab::after { opacity: 1; width: 100%; left: 0;}
.tab-list.tab-depth2 { padding: 5rem 0 0;}
.tab-list.tab-depth2.pd-0 { padding: 0;}
.tab-list.tab-depth2 > ul { display: flex; align-items: center; justify-content: flex-start; gap:.8rem 1.2rem; flex-wrap: wrap; white-space: nowrap;}
.tab-list.tab-depth2 > ul > li { display: flex; gap: 1.2rem;}
.tab-list.tab-depth2 > ul > li > .btn-tab { display: flex; align-items: center; justify-content: center; font-size: var(--font-navigation-tit-sm); font-weight: 400; color: var(--text-gray70); background-color: var(--white-00); border:1px solid var(--background-gray40); min-height: 3.5rem; border-radius: var(--border-radius); padding: .7rem 2rem; transition: all .3s ease-in-out;}
.tab-list.tab-depth2 > ul > li > .btn-tab:hover, .tab-list.tab-depth2 > ul > li > .btn-tab:focus, .tab-list.tab-depth2 > ul > li > .btn-tab:active, .tab-list.tab-depth2 > ul > li.active > .btn-tab { background-color: var(--primarymain-50); border-color: var(--primarymain-50); color: var(--white-00); font-weight: 600;} 
.tab-list-area .tab-conts-wrap .tab-conts { font-size: var(--font-body-md); display: none;}
.tab-list-area .tab-conts-wrap .tab-conts.active { display: block;}


@media (max-width: 1570px) {
    #header .gnb-wrap { max-width: 108rem; left: calc(50% - 55rem);}
}
@media (max-width: 1460px) {
    #header .gnb-wrap { max-width: 105rem;}
}
@media (max-width: 1400px) {
    #header .gnb-wrap { max-width: 100rem; left: calc(50% - 53rem);}
}
@media (max-width: 1340px) {
    #header .gnb-wrap { max-width: 97rem; left: calc(50% - 52rem);}
}
@media (max-width: 1280px) {
    #header .header-left, #header .header-util { padding-inline: 1.6rem;}
    #header .gnb-wrap { max-width: 93rem; left: calc(50% - 50.5rem);}
}
@media (max-width: 1200px) {  
    #header::after { display: none;}
    #header.header-open .gnb-overlay::before { display: none;}
    #header .gnb-wrap { position: fixed; background-color: var(--white-00); height: 100% !important; width: 100%; max-width: 36rem; top: 0; left: auto; right: -36rem; padding: 3rem 2rem; display: flex; justify-content: flex-start; flex-wrap: wrap; border-left: var(--background-gray30); box-shadow: 0 1.5rem 5rem rgba(0,0,0,0.05); opacity: 0; visibility: hidden; transition: right .5s ease-in-out; z-index: 1;}
    #header .gnb-wrap.gnb-on { right: 0; opacity: 1; visibility: visible;}
    #header .gnb-wrap > h1 { display: inline-flex;}
    #header .gnb-wrap .gnb-ntis { display: block; padding: 3rem 1rem; height: 100%;}
    #header .gnb-wrap .gnb-depth1 { flex-direction: column; padding: 0 !important; gap: .5rem;}
    #header .gnb-wrap .gnb-depth1 > li { width: 100% !important;}
    #header .gnb-wrap .gnb-depth1 > li > a { display: flex; padding: 0; justify-content: space-between;}
    #header .gnb-wrap .gnb-depth1 > li > a::before { display: none;}
    #header .gnb-wrap .gnb-depth1 > li > a::after { content: ""; display:inline-flex; align-items: center; justify-content: center; width: 16px !important; height: 16px; padding: 0 !important; mask-image: url(../images/common/ico-plus.svg); mask-repeat: no-repeat; mask-position: center; mask-size: contain; background-color: var(--background-gray50); forced-color-adjust: none; position: absolute; top: 2rem; left: auto !important; right: 0;}
    #header .gnb-wrap .gnb-depth1 > li > a:hover, #header .gnb-wrap .gnb-depth1 > li > a:focus, #header .gnb-wrap .gnb-depth1 > li > a:active, #header .gnb-wrap .gnb-depth1 > li.curr > a { border-color: transparent;}
    #header .gnb-wrap.gnb-on .gnb-depth1 > li.depth-open > a::after { mask-image: url(../images/common/ico-minus.svg);}
    #header .gnb-wrap.gnb-on .gnb-depth1 .gnb-depth2 { height: 0; visibility: hidden; opacity: 0; padding: 0; transition: opacity .1s ease-in-out;}
    #header .gnb-wrap.gnb-on .gnb-depth1 .depth-open .gnb-depth2 { height: auto; visibility: visible; opacity: 1; padding: 1.5rem; background-color: var(--background-gray10); border-radius: .8rem;}
    #header .gnb-wrap.gnb-on .gnb-depth1 .depth-open .gnb-depth2 > li > a { position: relative; padding: .8rem 0 .8rem 1rem; margin: 1rem;}
    #header .gnb-wrap.gnb-on .gnb-depth1 .depth-open .gnb-depth2 > li > a::before { content: ""; display: inline-block; background-color: var(--primary-40); width: .4rem; height: .4rem; border-radius: var(--border-radius); position: absolute; top:1.6rem; left: 0;}
    #header .gnb-wrap .btn-allmenu-close { mask-image: url(../images/common/ico-close.svg); width: 24px; height: 24px; top:2.8rem; right: 2rem;}
    #container { padding: var(--header-height) var(--pad) 3.6rem;}
}
@media (max-width: 1200px) {
    #footer .footer-inner { padding: 0 var(--pad);}
    #footer .f-cont { flex-wrap: wrap;}
    #footer .f-copy-area { flex-wrap: wrap;}
    #footer .f-menu-list > li:first-child { padding-left: 0;}
    #footer .f-link { padding-top: .5rem;}
}
@media (max-width: 1024px) {
    :root {
        --font-base: 9px;
    }
}
@media (max-width: 768px) {
    :root {
        --font-base: 8px;
        --pad: 1.6rem;
        --gap: 1.6rem;
    }
    #header .gnb-wrap { max-width: 100%;}
    #header .gnb-wrap .gnb-depth1 > li > a { font-size: 2.1rem;}
    #header .gnb-wrap.gnb-on .gnb-depth1 .depth-open .gnb-depth2 > li > a { font-size: 1.8rem;}
    #header .header-search-cont { max-width: 100%; padding: 9rem var(--pad) 10rem; height: 35vh;}
    #footer .f-copy-area .f-copy { letter-spacing: -.14rem;}
    #container { padding: calc(var(--header-height) + 4rem) var(--pad) 3.6rem;}
    .breadcrumb-wrap { display: none;}
    .tab-list.tab-depth1 { position: relative;}
    .tab-list.tab-depth1::before { content: ""; display: inline-block; width: 100%; height: 1px; background-color: var(--background-gray40); position: absolute; bottom: 0;}
    .tab-list.tab-depth1 > ul { overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; -webkit-overflow-scrolling: touch;}
    .tab-list.tab-depth1.full > ul > li { flex: 0 0 auto;}
    .tab-list.tab-depth1 > ul > li > .btn-tab { padding: 0 1.5rem;}
    .tab-list.tab-depth2 > ul { flex-wrap: nowrap; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; -webkit-overflow-scrolling: touch;}
}


/* login pop layer */
.login-pop-wrap { position: absolute; top:5.5rem; right: .5rem; z-index: 10; display: none;}
.login-pop-wrap.open { display: block;}
.login-pop { display: block; background-color: var(--white-00); border:1px solid var(--background-gray40); border-radius: .8rem; box-shadow: 0 .4rem 1.2rem rgba(0, 0, 0, .08); width: 100%; min-width: 14rem; max-width: 35rem; padding: 1.5rem;}
.login-pop-head { display: flex; align-items: baseline; border-bottom: 1px solid var(--background-gray60); gap: 0 1rem; padding: 0 4rem 1rem 0; margin-bottom: 1.5rem; flex-wrap: wrap; position: relative; min-height: 3.2rem; display: none;}
.login-pop-head .login-pop-tit { font-size: var(--font-heading-sm);}
.login-pop-head .btn-login-close { display: inline-flex; background: url(../images/common/ico-close.svg) no-repeat center; background-size: contain; width: 22px; height: 22px; position: absolute; right: 0; top:-.3rem;}
.login-pop-list > li { border-bottom: 1px solid var(--background-gray30);}
.login-pop-list > li:last-child { border-bottom: none;}
.login-pop-list > li.login-go { border-bottom: none; margin-bottom: .5rem;}
.login-pop-list > li > a { display: flex; align-items: center; justify-content: flex-start; padding: 1rem .5rem .8rem; font-size: var(--font-body-sm); font-weight: 300;}
.login-pop-list > li.login-go > a { background-color: var(--primarymain-50); color: var(--white-00); border-radius: .8rem; padding-inline: .5rem; justify-content: center; font-size: var(--font-body-md); font-weight: 400; gap: .5rem;}
.login-pop-list > li.alert-num > a { justify-content: space-between;}
.login-pop-list > li.alert-num > a > .num { display: inline-flex; align-items: center; gap: .5rem; font-weight: 500;}
.login-pop-list > li.user_num { border-bottom: none; background-color: var(--sub-10); margin-top: 1rem;}
.login-pop-list > li.user_num > a { flex-wrap: wrap; justify-content: center; color: var(--black-100); font-weight: 500;}
.login-pop-list > li.user_num > a > .num { width: 100%; text-align: center; color: var(--primarymain-50);}
.login-pop-list .ico { display: inline-flex; padding: 0; mask-repeat: no-repeat; mask-position: center; mask-size: contain; forced-color-adjust: none;}
.login-pop-list .ico-login { mask-image: url(../images/common/ico-login.svg); width: 20px; height: 20px; background-color: var(--white-00); margin-top: -1px;}
.login-pop-list .ico-logout { mask-image: url(../images/common/ico-logout.svg); width: 20px; height: 20px; background-color: var(--white-00); margin-top: -1px;}
.login-pop-list .ico-alarm { mask-image: url(../images/common/ico-alarm.svg); width: 20px; height: 20px; background-color: var(--primarymain-50); margin-top: -1px;}


@media (max-width: 768px) {
    .login-pop-wrap { position: fixed; width: 100%; height: 100%; background-color: rgba(0,0,0,.5); top: 0; left: 0; z-index: 100; padding: 3rem 1rem; overflow-x: hidden; overflow-y: auto; display: none;}
    .login-pop { max-width: 100%;}
    .login-pop-head { display: flex;}
}