/* common */
body,th,td,input,select,textarea,button {font-size:40px;line-height:1.5;font-family:'NanumBarunGothic', 'Malgun Gothic', '맑은 고딕', sans-serif;color:#454545}

div, input, ul, li {box-sizing:border-box;}

html, body {
    position:relative;
    overflow-x:hidden;
    height:100%;
    min-height:100%;
    background-color:#969696;
}
html.open, body.open, .wrap.open {
    overflow:hidden;
}

body,th,td,p,li,span,h1,h2,h3,h4,h5 {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome, Opera and Firefox */
}

body,a,button,input,label,select,div,li {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

.w100 {
    width:100% !important;
}
.w95 {
    width:95% !important;
}
.w90 {
    width:90% !important;
}
.w85 {
    width:85% !important;
}
.w80 {
    width:80% !important;
}
.w75 {
    width:75% !important;
}
.w70 {
    width:70% !important;
}
.w65 {
    width:65% !important;
}
.w60 {
    width:60% !important;
}
.w55 {
    width:55% !important;
}
.w50 {
    width:50% !important;
}
.w45 {
    width:45% !important;
}
.w40 {
    width:40% !important;
}
.w35 {
    width:35% !important;
}
.w30 {
    width:30% !important;
}
.w25 {
    width:25% !important;
}
.w20 {
    width:20% !important;
}
.w15 {
    width:15% !important;
}
.w10 {
    width:10% !important;
}
.w5 {
    width:5% !important;
}

.wrap {
    position:relative;
    display:block;
    margin:0 auto;
    width:100%;
    max-width:24em;
    overflow-x:hidden;
    overflow-y:auto;
    height:100%;
    min-height:100%;
    background-color:#fff;
}

.actionBar {
    position:relative;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 1em;
    height:3.3em;
    border-bottom:0.1em solid #323232;
    background-color:#fff;
}

.actionBar .ab_left,
.actionBar .ab_right {
    width:25%;
}

.actionBar .ab_left {
    display:flex;
    justify-content:flex-start;
    align-items:center;
}

.actionBar .ab_left a.goPrev {
    display:block;
    width:0.55em;
    height:0.8em;
    background: url("data:image/svg+xml,%3csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='44' height='64' x='0px' y='0px' viewBox='0 0 44 64' style='enable-background:new 0 0 44 64%3b' xml:space='preserve'%3e%3cpath fill='%23232323' d='M41.4%2c64c-0.5%2c0-1.1-0.2-1.6-0.5L1.1%2c34.2C0.4%2c33.7%2c0%2c32.9%2c0%2c32s0.4-1.7%2c1.1-2.2L39.8%2c0.5c1.2-0.9%2c2.8-0.6%2c3.7%2c0.6c0.9%2c1.2%2c0.6%2c2.9-0.6%2c3.8L7.1%2c32l35.8%2c27c1.2%2c0.9%2c1.4%2c2.6%2c0.6%2c3.8C43%2c63.6%2c42.2%2c64%2c41.4%2c64z'/%3e%3c/svg%3e") no-repeat;
    background-size:cover;
}

.actionBar .ab_right {
    display:flex;
    justify-content:flex-end;
    align-items:center;
}

.actionBar .subTitle {
    width:auto;
    color:#232323;
    font-size:1em;
    font-weight:400;
    text-align:center;
}

.btn_area {display:block;}

.btn_area .submit,
.btn_area .cancel{
    display:block;
    padding:1em 0;
    width:100%;
    color:#fff;
    font-size:0.7em;
    text-align:center;
    background-color:#4677f6;
    border-radius:0.2em;
}

.btn_area .cancel{
    background-color: #f64646;
}

/* header */
header {
    position: relative;
}

/* navigation */
.gnb {
    display: flex;
    overflow-y:auto;
    width: 100%;
    max-width:24em;
    height: 100vh;
    background-color:rgba(0,0,0,0.6);
    margin: 0;
    position: absolute;
    top: 0;
    left: 100vw;
    z-index: 10;
    transition:0.3s;
}


.gnb.active {
    left: 0;
    transition:0.3s;
}

.gnbOpen {
    display:block;
    width:1.5em;
    line-height:0;
}

.gnb > .gnbBack{
    width: 30%;
    background: none;
    min-height: 100vh;
}

.gnb > nav {
    position:relative;
    display:inline-table;
    width:70%;
    min-height:100vh;
    background-color:#fff;
}

.gnb > nav .gnbTop {
    position:relative;
    display:block;
    padding:1em;
    height:7em;
    background: #4677f6;
}

.gnb > nav .gnbTop .gnbClose {
    position:absolute;
    top:1em;
    right:1em;
    display:block;
    width:1em;
    color: #fff;
    line-height:0;
}

.gnb > nav .gnbTop p.part {
    color:#fff;
    font-size:0.75em;
}
.gnb > nav .gnbTop span.userName {
    color:#fff;
    font-size:1.25em;
}
.gnb > nav .gnbTop .btn_area {
    position:absolute;
    display:flex;
    justify-content:flex-start;
    align-items:center;
    bottom:1em;
}
.gnb > nav .gnbTop .btn_area a {
    display:table;
    margin-right:0.5em;
    padding:0.5em 1em;
    font-size:0.8em;
    line-height:1em;
    border-radius:5em;
    background-color:#fff;
}

.gnb ul.gnbBox,
.gnbBox > li > ul {
    border-top:0.1em solid #b8b8b8;
}

.gnbBox > li,
.gnbBox > li > ul > li {
    border-bottom:0.1em solid #b8b8b8;
}

.gnbBox > li > a {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 1em;
    height:2.25em;
}

.gnbBox > li > a > span {
    width:calc(100% - 4.325em);
    font-size:0.9em;
}
.gnbBox > li > a > p.version {
    font-size:0.6em;
}

.gnbBox > li > ul {
    display:none;
}

.gnbBox > li > ul > li {
    background-color:#fafafa;
}

.gnbBox > li > ul > li:last-child {
    border-bottom:none;
}

.gnbBox > li > ul > li > a {
    position:relative;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 1em;
    height:2.25em;
}
.gnbBox > li > ul > li > a span {
    display:block;
    font-size:0.625em;
    color:#969696;
    z-index:1;
}

.gnbBox > li > a img.navIco {
    margin-right:0.75em;
    width:1.1em;
}

.gnbBox > li:first-child > a img.navIco,
.gnbBox > li:nth-child(2) > a img.navIco{
    margin-top:-0.1em;
}

.gnbBox > li > a img.navArrow {
     margin-left:auto;
     width:0.5em;
     line-height:0;
    /*opacity:.3;*/
     -webkit-transition: all 0.4s ease-in-out;
     -o-transition: all 0.4s ease-in-out;
     transition: all 0.4s ease-in-out;
     -webkit-transform: rotate(90deg);
     -ms-transform: rotate(90deg);
     -o-transform: rotate(90deg);
     transform: rotate(90deg);

 }
.gnbBox > li.active > a img.navArrow {
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.gnbBox > li > ul > li > a img.navArrow {
    opacity:0.5;
}

.gnb > nav .gnbBottom {
    position:relative;
    right:0;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:1em;
    width:100%;
}
.gnb > nav .gnbBottom a img {
    display:block;
    max-width:1.25em;
}

.gnb > nav .gnbBottom a.logOut {
    padding-right:1.5em;
    background:url("../images/common/ic_logout.png") no-repeat right 43%;
}

.gnb > nav .bottomBox{
    position: relative;
    bottom: 0;
    padding: 0 1em 1em 1em;
    font-size: 0.9em;
}

/* popup */
.popup {
    display:none;
    position:fixed;
    left:0;
    top:0;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100vh;
    z-index:8;
}
.popup .modal-bg {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.7);
    z-index:3;
}
.popup .popup-inner {
    position:absolute;
    top:50%;
    left:50%;
    margin:0 auto;
    padding:0.25em;
    width:calc(100% - 4em);
    max-width:22em;
    background-color:#4677f6;
    z-index:4;
    border-radius:0.5em;
    transform:translate(-50%,-50%);
}
.popup .popup-inner h2 {
    display:block;
    font-size:1.1em;
    text-align:center;
    margin:0.25em 0;
    color:#fff;
}

.popup .popup-inner .popup-cont {
    position:relative;
    padding:0.5em;
    background-color:#fff;
    border-radius:0.5em;
}
.popup .popup-inner .popup-cont.nonScroll{
    overflow-y: visible;
}
.popup .popup-inner p.guide {
    font-size:0.7em;
}
.popup .popup-inner p.guide b {
    font-weight:400;
    color:#4677f6;
}
.popup .popup-inner .upload-wrap{
    margin: 0 auto 1em;
}
.popup .popup-inner .btn_area .upload{
    display: none;
}
.popup .popup-inner .tableArea {
    display:none;
    margin:0 auto 0.75em;
    width:100%;
    border:0.1em solid #dcdcdc;
    border-left:none;
    border-right:none;
}
.popup .popup-inner .tableArea.popView {
    display:block;
    max-height:calc(100% - 3em);
    overflow-y:auto;
}
.popup .popup-inner .tableArea.popView table {
    width:100%;
}
.popup .popup-inner .tableArea.popView table th,
.popup .popup-inner .tableArea.popView table td {
    padding:0.5em 0;
    font-size:0.8em;
    text-align:center;
    border-bottom:0.1em solid #f0f0f0;
}
.popup .popup-inner .tableArea.popView table th {
    background-color:#fafafa;
}
.popup .popup-inner .tableArea.popView table tbody tr:last-child td {
    border:none;
}

.popup .popup-inner .tableArea ul li > span {
    display:block;
    padding:0.375em;
    width:7.5em;
    color:#24205c;
    text-align:center;
    background-color:#e5e6eb;
    border-bottom:0.1em solid #fff;
    box-sizing:border-box;
}
.popup .popup-inner .tableArea ul li > span b {
    color:#fd0200;
}
.popup .popup-inner .tableArea ul li .input_area {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0.375em;
    width:19.5em;
    border-bottom:0.1em solid #e5e6eb;
}
.popup .popup-inner .tableArea ul li:last-child > span,
.popup .popup-inner .tableArea ul li:last-child > .input_area {
    border-bottom:none;
}
.popup .popup-inner .tableArea ul li .input_area input[type="text"],
.popup .popup-inner .tableArea ul li .input_area input[type="password"] {
    padding:0.025em 0.25em;
    width:100%;
    border:0.1em solid #e5e6eb;
}

.popup .popup-inner .tableArea dl {
    margin:1em 0;
}
.popup .popup-inner .tableArea dl dd {
    margin:0.25em 0;
    font-size:0.8em;
}

.popup .popup-inner .btn_area {
    margin:0 auto;
    width:100%;
}
.popup .popup-inner .btn_area button {
    display:block;
    padding:1em 0;
    width:100%;
    color:#fff;
    font-size:0.7em;
    text-align:center;
    background-color:#4677f6;
    border-radius:0.2em;
}
.popup .popup-inner .popup-close {
    position:absolute;
    top:-1.25em;
    right:0;
    font-size:1.5em;
    color:#fff;
}
.popup .popup-inner .close img {
    width:1em;
}

footer {
    position:relative;
}
footer .footer_area {
    display:block;
    width:100%;
    background-color:#4677f6;
}
footer .footer_area p {
    display:block;
    width:100%;
    font-size:0.5em;
    text-align:center;
    line-height:3.5em;
    color:rgba(255,255,255,.5);
}


@media screen and (max-width:960px) {
    body, input, select, button {
        font-size:30px;
    }
    .gnb {
        max-width:100%;
    }
    .wrap {
        max-width:100%;
    }
}

@media screen and (max-width:720px) {
    body, input, select, button {
        font-size:20px;
    }
}

@media screen and (max-width:480px) {
    body, input, select, button {
        font-size:15px;
    }
    footer .footer_area p {
        line-height:4em;
    }
}