@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap');
@font-face {
    font-family: 'Cafe24Danjunghae';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.1/Cafe24Danjunghae.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


* {font-family:"Roboto", "Noto Sans KR", sans-serif; font-weight:400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; box-sizing:border-box;}

body,html {width:100%; height:100%; margin:0;padding:0; background:#f6f6f6; border:0; color:#525252; font-size:14px; line-height:1.4; font-family:"Roboto", "Noto Sans KR", sans-serif;  letter-spacing:-1px; word-break:break-all; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%;}

div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {font-family:inherit; margin:0;padding:0;border:0;} 


ol,ul,li {list-style:none;}
blockquote, q {quotes:none;}
blockquote:before,blockquote:after,q:before,q:after {content:'';content:none;}
table caption {overflow:hidden; font-size:0; line-height:0; font-size:15px;}
dt{display:block;}
hr{display:none;}
a{cursor:pointer;text-decoration:none;color:#666;}
a:hover, a:active, a:visited, a:link{text-decoration:none!important;}
address{font-style:normal;}
input,select,img{vertical-align:middle;}
.input_search {border:0; background-color:#fff; font-size:14px; padding-left:5px; color:#888;}
.hide {display:none;}
.ls0 { letter-spacing:0 !important; }
img{max-width:100%;}
h1, h2, h3, h4, h5 {font-weight: 400;}

button{background: inherit ; border:none; box-shadow:none; border-radius:0; padding:0; overflow:visible; cursor:pointer}


.clear_fix {
    *zoom: 1;
}
.clear_fix:after {
    display: block;
    clear: both;
    content: '';
}

/*풋터*/
.footer {padding:30px 20px; color:#787878; font-size:12px; text-align:center;}

/*헤더*/
.header {min-height:144px; padding:15px; padding-top:30px; background: url(../images/top_imgs.jpg) no-repeat top center; background-size: cover;  color:#fff;}
.header .gnb {display:flex; align-items:center; justify-content:space-between;  height:50px;}
.header button {display:flex; align-items:center; justify-content:center;  height:40px; width:40px; color:inherit; font-size:20px;}
.header .title {font-weight:700; font-size:20px;}
.header .top_text {text-align:center;}

/*슬라이드메뉴*/
.slide-menu {
  position: fixed;
    -webkit-transform: translateX(-335px);
    -ms-transform: translateX(-335px);
    transform: translateX(-335px);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    will-change: transform;
    -webkit-transition-duration: .2s;
    transition-duration: .2s;
    -webkit-transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    -webkit-transition-property: -webkit-transform;
    transition-property: transform;
  background: #fff;
  top:0;
  bottom: 0;
  color: #333;
  z-index: 9999;
  width: 300px;
    -webkit-box-shadow: 3px 0px 7px 0px rgba(0,0,0,0.25);
    -moz-box-shadow: 3px 0px 7px 0px rgba(0,0,0,0.25);
    box-shadow: 3px 0px 7px 0px rgba(0,0,0,0.25);
}
.slide-header {position: relative; top:0; background:#0557bc; color: #fff;}
.slide-header h1 {padding:20px 30px; font-size:14px;}
.slide-close-button {position: absolute; top:10px; right:10px;  font-size:18px; width:40px; height:40px; text-align: center; color: #fff; cursor: pointer; z-index: 99999;}
.slide-header .btn_mem {display:flex;}
.slide-header .btn_mem a {display:flex; align-items:center; justify-content:center; width:50%; height:40px; border:1px solid rgba(0, 0, 0, 0.2); border-right:none; color:#fff;}
.slide-header .btn_mem a:first-child {border-left:none;}

.slide-menu>.slide-menu-here {height:calc(100vh - 100px); overflow-y:auto;}
.slide-menu>.slide-menu-here > .menu {border-bottom:4px solid #f3f2f2;}
.slide-menu>.slide-menu-here>.menu li {position: relative;}
.slide-menu>.slide-menu-here>.menu li > a,
.slide-menu>.slide-menu-here>.menu li.has_sub span {position:relative; display:flex; align-items:center; padding:0 30px; height:40px; border-bottom: 1px solid #ddd; font-weight:500; color:#191919;}
.slide-menu>.slide-menu-here>.menu li > a > i,
.slide-menu>.slide-menu-here>.menu li.has_sub span > i {font-size:12px; margin-right:10px;}
.slide-menu>.slide-menu-here>.menu li>.sub-menu {
    -webkit-transform: translateY(-100px);
    -ms-transform: translateY(-100px);
    transform: translateY(-100px);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    will-change: transform;
    -webkit-transition-duration: .65s;
    transition-duration: .65s;
    -webkit-transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    -webkit-transition-property: -webkit-transform;
    transition-property: transform;
    display:none
}
.slide-menu>.slide-menu-here>.menu li.has_sub span.active {border-bottom:none;}
.slide-menu>.slide-menu-here>.menu li>.sub-menu.active {
  display: block;
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
}
.slide-menu>.slide-menu-here>.menu li>.sub-menu>li>a {height:30px; padding-left:40px; border-bottom:none; color:#666; font-weight:400;}
.slide-menu>.slide-menu-here>.menu li>.sub-menu>li:last-child > a {padding-bottom:10px; border-bottom:1px solid #ddd;}
.slide-menu>.slide-menu-here>.menu li.has_sub .dropdownmenu.active:after {transform: rotate(180deg);}
.slide-menu>.slide-menu-here>.menu li.has_sub .dropdownmenu:after {
  content: "\f107";
  font: var(--fa-font-solid);
  top: 10px;
  position: Absolute;
  right:20px;
  width: 20px;
  height: 20px;
  text-align: center;
  cursor: pointer;
  line-height: 20px;
  color:#191919;
}
.slide-menu a:hover {
  background-color: #f8f8f8
}
.slide-left {-webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); z-index: 99999;}
.mdl-layout__obfuscator {
    background-color: transparent;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    visibility: hidden;
    -webkit-transition-property: background-color;
    transition-property: background-color;
    -webkit-transition-duration: .2s;
    transition-duration: .2s;
    -webkit-transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-timing-function: cubic-bezier(.4,0,.2,1);
}
.slide-left~.mdl-layout__obfuscator {
    background-color: rgba(0,0,0,.5);
    visibility: visible;
}
.slide-menu .coin_bnr img {margin-right:10px;}
.slide-menu .lang {display:flex;}
.slide-menu .lang li {width:33.33%; border-left:1px solid #ddd;}
.slide-menu .lang li:first-child {border-left:none;}
.slide-menu .lang li a {justify-content: center; padding:5px!important; text-align:center;}
.slide-menu .lang li span {margin-right:5px; color:#7d8285;}

/* container*/
.container {margin-top:-30px; padding:30px 20px; background:#f6f6f6; border-top-left-radius:30px; border-top-right-radius:30px;}
.tit {margin-bottom:20px; font-size:16px; font-weight:700; color:#191919;}
.box {margin:8px 0; padding:20px; background:#fff; border-radius:10px;}
.box:first-of-type {margin-top:0;}
.box .tit {text-align:center;}
.box .list {margin-top:20px;}
.box .list li {display:flex; align-items:center; height:38px; border-bottom:1px solid #ddd; }
.box .list li:first-child {border-top:1px solid #ddd;}
.box .list li span {display:inline-block; padding:5px; color:#191919; font-weight:500;}
.box .list li span:last-child {flex:1; text-align:right; color:#787878}
.box .list li span strong {display:inline-block; margin-right:5px; font-weight:700; font-size:18px; color:#191919;}

.btn_wrap {display:flex; margin:0 -3px;}
.btn {display:flex; align-items:center; justify-content:center; margin:3px; border-radius:5px; font-size:14px;}
.btn_prime {background:#1e4aaf; border:1px solid #1e4aaf; color:#fff; font-weight:500;}

.ellips {overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-break: break-all;}
.guide {margin:5px 0; color:#c64545; font-size:12px;}

label {display:block; margin-bottom:1px; margin-left:2px;  font-size:12px; color:#666; font-weight:700;}
input:not([type="radio"], [type="checkbox"]) {padding:5px; height:40px; border:1px solid #ddd; border-radius:5px; color:#191919; width:100%; font-size:inherit; font-weight:500;}
select {padding:5px; height:40px; border:1px solid #ddd; border-radius:5px; color:#191919; font-size:inherit; font-weight:500;}
.input_box {margin:-5px;}
.input_box .multi_wrap {display:flex;}
input::placeholder {color:#999;}
.input_box .disable {border:none;}

.stop-scroll {
  height: 100%;
  overflow: hidden;
}

/*메인*/
.main .header {min-height:160px;}
.main .header .title {display:none;}
.main .header .top_text {margin-top: -44px; font-family: 'Cafe24Danjunghae'; font-size:24px; letter-spacing:0;}
.main .header .top_text span {display:block;}
.main .header .top_text:after {content:url(../images/main_top_icns.png); display:block; margin-top: -8px; }
.main .box:first-child {margin-top:0;}
.main .btn_wrap button {width:50%; height:50px;}
.main .accum .guide {margin-left:5px;}
.main .available {background:#c88925; color:#fff; text-align:center;}
.main .available .tit {margin-bottom: 5px; color:#fff;}
.main .available > div  {font-weight:900; font-size:30px; letter-spacing:0;}
.main .available > div  span {color:#e5bf7e; font-size:18px; font-weight:900; }
.main .notice .tit {display:flex; text-align:left;}
.main .notice .tit a {margin-left:auto; font-size:12px; color:#191919;}
.main .notice li a {display:block; padding:3px 0;}

/*나의 정보*/
.myinfo .box:first-of-type {background:none;}
.myinfo_conts {display:flex; align-items:center; justify-content:space-between;}
.myinfo_conts .chart {width:120px; margin-right:10px;}
.myinfo_conts .list {margin-top:0;}
.myinfo_conts .list li span strong {margin-right:2px;}
.myinfo .pass_change .multi_wrap input {flex:1; border-top-right-radius:0; border-bottom-right-radius:0; border-right:none; }
.myinfo .pass_change .multi_wrap .btn {margin:0; padding:5px;  background:#333; border-top-left-radius:0; border-bottom-left-radius:0; color:#fff; font-size:12px;}
.myinfo .wallet {position:relative;}
.myinfo .wallet button {position:absolute; top:12px; right:20px; font-size:12px; border-bottom:1px solid #1e4aaf; color:#1e4aaf; font-weight:500;}
.myinfo .branch .multi_wrap select {flex:1; border-top-right-radius:0; border-bottom-right-radius:0; border-right:none;}
.myinfo .branch .multi_wrap input {flex:auto; border-top-left-radius:0; border-bottom-left-radius:0;}
.myinfo .btn_wrap {margin-top:10px;}
.myinfo .btn_wrap button {width:50%; height:50px;}

/* 공지사항*/
.notice .date {margin-bottom:5px; color:#949ec0; letter-spacing:0;}
.notice .subject,
.notice .subject a {color:#191919; font-weight:500;}
.notice.view .date {padding-bottom:10px; margin-top:10px; margin-bottom:10px; border-bottom:1px solid #191919;}


/* 김소영작업 */
.login-wrap{display:flex; align-items:center; justify-content:center; height:100vh; padding:0 20px; background:#FFFFFF url('../images/bg_login_ns.jpg') no-repeat bottom; background-size:contain; }
.login{width:100%; max-width:300px; margin:0 auto; margin-top:-130px;   /*padding: 100px 50px*/}
.login h3{ font-size:30px; font-weight:bold; color:#000000; text-align:center; margin-bottom:26px}
.login ul li{/*padding:5px 0px;*/ font-weight:700; /*font-size:18px*/ font-size:12px;}
.login ul li input {font-size:14px;}
.login ul li input[type="checkbox"] {margin:0; margin-right:5px;}
.login ul li:first-child,
.login ul li:nth-child(3) {padding-left:3px;}
.login .input-login {margin-bottom:12px;}
.login ul li.stext{font-size:12px/*16px*/; color:#a4a4a4}
.input-login {border:1px solid #ccc;color:#000;font-size:16px;vertical-align:middle; padding:15px 10px; color:#666666; border-radius:5px}
.mt20{margin-top:20px}
.jointext{margin-top:25px; text-align:center; font-weight:normal !important}
.jointext a{margin-right:10px; margin-left:10px; font-size:14px;}
.intro {overflow: hidden; height: 100vh; display: flex; justify-content: center; align-items: center; width: 100vw;}
.intro img{height:100%; max-width:none;}
.layout_area{/*padding:10px 20px*/}
.layout_area h2{text-align: center; font-size:20px; padding:0px  0px 18px 0px; font-weight:bold; color:#191919 /*#1e4aaf*/}
.tab-areab{overflow:hidden;margin-bottom:10px;}
.tab-areab ul li{width:calc(50% - 5px);float:left;background:#e9e9e9;text-align:center;vertical-align:middle;font-weight:500; font-size:16px; border-radius:10px; margin-right:5px;}
.tab-areab ul li a{color:#1e4aaf;line-height:50px; display:block;}
.tab-areab ul li.active{background:#1e4aaf;}
.tab-areab ul li.active a{color:#fff}

.tab-areab ul li:last-child {margin-right:none;}
.tab-areab ul li:hover{background:#1e4aaf;}
.tab-areab ul li a:hover{color:#fff}

.rulebox{padding:15px 0px;  overflow-x: scroll;}
.mimg {margin: 0; text-align: center;}
.mimg img{ width:100%}

.rulebox h3{color:#1e4aaf; font-weight:700; font-size:20px;}
.rulebox h4{color:#000000; font-weight:700; font-size:18px; padding:0 0px 20px 0}
.rulebox h4 span{color:#FF3300}
.rulebox h5{color:#000000;  font-size:14px;}

.rule-table{border-top:solid 2px #1e4aaf;margin:20px 0; width:800px}
.rule-table table{width:100%}
.rule-table tr th{background:#f7f8fe;text-align:center;border-bottom:solid 1px #ddd;border-right:solid 1px #ddd;padding:8px;}
.rule-table tr th.pt_1{font-weight:bold; font-size:20px; color:#1e4aaf}
.rule-table tr th.pt_2{font-weight:bold; font-size:20px;color:#e61010}
.rule-table tr td.text-1{text-align:left}

.rule-table tr td{text-align:center;border-bottom:solid 1px #ddd;border-right:solid 1px #ddd;padding:8px; background:#FFFFFF}
.rule-table tr td:last-child {border-right:none}
.rule-table tr th:last-child {border-right:none}
.rule-table tr td.bg-blue{background:#f7f8fe;}

.board-list-page  { width:100%; margin:20px auto 0px; font-size:14px; line-height:30px; text-align:center; color:#6c6969; }
.board-list-page a { display:inline-block; width:35px;height:35px;vertical-align:middle; border:1px solid #ddd;border-left:0;text-align:center; color:#666; line-height:35px; margin:0 -2px; background:#FFFFFF }
.board-list-page a:first-child {border-left:1px solid #ddd;}
.board-list-page  a { display:inline-block; width:35px;height:35px;vertical-align:middle; border:1px solid #ddd;text-align:center; color:#666; line-height:35px; margin:0 1px; }
.board-list-page  a.btn-first { width:35px; height:35px; text-indent:-9999px; overflow:hidden; background:url('../images/btn_first.jpg') center top no-repeat; }
.board-list-page  a.btn-prev { width:35px; height:35px; text-indent:-9999px; overflow:hidden; background:url('../images/btn_prev.jpg') center top no-repeat; }
.board-list-page  a.btn-next { width:35px; height:35px;text-indent:-9999px; overflow:hidden; background:url('../images/btn_next.jpg') center top no-repeat; }
.board-list-page  a.btn-last { width:35px; height:35px; text-indent:-9999px; overflow:hidden; background:url('../images/btn_last.jpg') center top no-repeat; }
.board-list-page  a.on { height:35px; color:#fff; background:#354c78;}
.board-list-page  a strong { display:inline-block; width:35px; height:35px;background:#1e4aaf; font-weight:400;}

.input-text {border:1px solid #ccc;color:#000;font-size:16px;vertical-align:middle; padding:8px; color:#666666; border-radius:5px}

.btn-area {margin-top:30px;text-align:center;}
.btn-list {display:inline-block; padding:10px 30px;border:2px solid #333;}
.btn-modify {display:inline-block;padding:10px 30px;border:1px solid #1e4aaf;background:#fff;color:#1e4aaf !important; border-radius:10px; font-size:16px;}
.btn-login {display:flex; justify-content:center; align-items:center; width:100%; height:50px; margin-top:15px; padding:10px;  border:1px solid #1e4aaf;background:#1e4aaf;color:#fff !important; border-radius:10px; font-size:14px;}
.wd-100p{width:95%}

/* 김소영작업 */