body{
  -ms-overflow-style: inherit;
  overflow: overlay;
  font-family: 'SUIT';
}
*{margin: 0;padding: 0;box-sizing: border-box}
*::before, 
*::after{margin: 0; padding: 0;box-sizing: border-box;}
ul, ol, li{list-style: none;}
ul{margin: 0;padding: 0}
a{text-decoration: none;}
p{margin: 0;}
input,select,textarea,button{font-family: 'SUIT';}
button{border: 0;background-color: transparent;cursor: pointer;}
input:focus,
select:focus,
textarea:focus{outline: none;}
html{height: 100%;}
body{height: 100%;}
section{max-width: 768px;width: 100%;height: 100%;margin: 0 auto;position: relative;}

/* 상단 */
nav{position: absolute;top: 0;height: 50px;display: flex;align-items: center;color: #fff;width: 100%;}
.logo{height: inherit;width: 80px;padding: 15px;display: flex;align-items: center;justify-content: center;}
.logo img{width: 100%;height: 100%;object-fit: cover;}
.nav-title{color: #fff;font-size: 34px;margin-left: -46px;margin-top: 0;font-weight: 900;}

/* 메인 */
.main-top{height: 100%;max-height: 80%;background-image: linear-gradient(#4ba000 0%,#d2ff00 100%);border-radius: 0 0 50px 50px;padding-top: 60px;}
.main-top-sub{height: 50%;background-image: linear-gradient(#4ba000 0%, #d2ff00 100%);padding-top: 30px;}
.main{padding: 15px;padding-top: 80px;height: 100%;}
.main-bot{padding: 15px;background-color: #fff;border-radius: 50px 50px 0 0;height: 100%;}

/* 하단 */
.bottom-nav{position: fixed;bottom: 0;width: 100%;height: 60px; max-width: 768px;display: flex;border-top: 1px solid rgba(153, 153, 153, 0.2);background-color: #fff;z-index: 1;}
.bottom-nav>a{display: flex;align-items: center;justify-content: center;width: 33.33%;flex-direction: column;position: relative;transition: 0.3s;border-radius: 20px;}
.bottom-nav>a>span{transition: 0.3s; font-size: 14px;font-weight: 700;color: #999;}
.bottom-nav>a>i{display: flex;align-items: center;height: 25px; font-size: 20px;color: #999;position: relative;}
.bottom-nav>a:hover>span{color: #4ba000 ;transition: 0.3s; }
/* .bottom-nav>a:hover>i{background-image: linear-gradient(#4ba000 , #328BD6);color: transparent;  -webkit-background-clip: text;transition: 0.3s;}
.bottom-nav>a.on>i{background-image: linear-gradient(#4ba000 , #328BD6);color: transparent;  -webkit-background-clip: text;transition: 0.3s;} */
.bottom-nav>a.on>span{color: #4ba000;font-weight: 900;}
.bottom-nav>a>i{transition: 0.3s;}
.bottom-nav>a:hover>i{color: #4ba000 ;transition: 0.3s;}


.bottom-nav a img{height: 20px;display: block; margin-bottom: 5px;transition: 0.3s;}
.bottom-nav a img.icon-02{display: block;}
.bottom-nav a img.icon-02{display: none;}
.bottom-nav a:hover img.icon-01{display: none;transition: 0.3s;}
.bottom-nav a:hover img.icon-02{display: block;transition: 0.3s;}
.bottom-nav a.on img.icon-01{display: none;}
.bottom-nav a.on img.icon-02{display: block;}

/*------ 대쉬보드 ------*/
/* 공지사항 */
.wrap { display: flex; overflow: hidden;  }
.wrap .rolling-list ul {display: flex;padding: 15px}
.wrap .rolling-list ul li {transition: 0.3s;box-sizing: border-box; border-radius: 30px; margin: 0 15px; display: flex; align-items: center; flex-shrink: 0; background-color: #fff;justify-content: center;box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);}
.wrap .rolling-list ul li a{font-size: 18px; padding: 10px 30px;color: #4ba000 ;width: 100%;display: flex;align-items: center;}
.wrap .rolling-list ul li:hover{transform: scale(0.98);transition: 0.3s;}
.wrap .rolling-list ul li a span{width: 100px;}
.wrap .rolling-list ul li a p{width: calc(100% - 100px);overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;}
.wrap .rolling-list ul li.list-wrap {width: 450px;flex-shrink: 0; }
.wrap .rolling-list ul li.list-wrap a i{padding-right: 10px;color: #4ba000 ;}
.rolling-list.original {animation: rollingleft1 60s linear infinite;}
.rolling-list.clone {animation: rollingleft2 60s linear infinite;}
.rolling-list.pause {animation-play-state: paused;}
@keyframes rollingleft1 {
  0% { transform: translateX(0); }
  50% { transform: translateX(-100%); }
  50.01% { transform: translateX(100%); }
  100% { transform: translateX(0); }
}

@keyframes rollingleft2 {
  0% { transition: translateX(0); }
  100% { transform: translateX(-200%); }
} 

.board-txt{padding: 15px;}
.board-txt>p{color: #fff;text-align: right;font-size: 16px;padding-bottom: 5px;}
.board-txt>p>span{font-weight: bold;}
.board-inner{height: 300px; padding: 15px;position: absolute; left: 50%;top: 35%; transform: translateX(-50%);
  background-color: #fff;box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);display: flex;flex-wrap: wrap;text-align: center;width: 480px;justify-content: center;}
.board-inner>div{width: 50%;padding: 15px;padding-top: 30px;}
.board-inner>div span{color: #999;font-size: 16px;}
.board-inner>div p{color: #4ba000 ;padding-top: 15px;font-weight: bold;font-size: 18px;}


/* 그래프 */
.chart-board{display: flex;align-items: center;justify-content: center;padding-left: 30px;padding-top: 15px;}
.bar-chart {display: flex;align-items: flex-end;gap: 30px;height: 230px;width: 300px;width: calc(100% - 120px);border-left: 2px solid #fff;border-bottom: 2px solid #fff;padding: 10px;padding-bottom: 0;position: relative;color: #fff;padding-left: 20px;}
.bar {position: relative;width: 40px;background-color: #fff;  border-radius: 30px 30px 0 0;box-shadow: 4px 0 4px rgba(0, 0, 0, 0.2);}
.bar::before {
  content: attr(data-label);
  position: absolute;
  bottom: -30px;
  left: 50%;width: 50px;text-align: center;
  transform: translateX(-50%);
  font-size: 14px;
  text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);
}
.bar::after {
  content: '';
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.6);
  font-size: 16px;
}
.bar {height: var(--value);}
.bar-chart::before {
  content: '채굴량';
  position: absolute;
  top: 0;
  left: -50px;
  transform-origin: left top 0;
  font-size: 16px;
  font-weight: bold;
  text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);
}
.bar-chart::after {
  content: '날짜';
  position: absolute;
  bottom: -30px;
  right: 0;
  font-size: 16px;
  font-weight: bold;
  text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);
}
.bar-01::after {content: '80%';}
.bar-02::after {content: '60%';}
.bar-03::after {content: '70%';}
.bar-04::after {content: '80%';}
.bar-05::after {content: '60%';}
.bar-06::after {content: '70%';}
.bar-07::after {content: '80%';}
.bar-08::after {content: '80%';}

/*------ 수익화면 ------*/
.income-board{padding: 15px;display: flex;flex-wrap: wrap;text-align: center;}
.income-board>div{width: 50%;padding: 15px;}
.income-board>div:nth-child(1){border-bottom: 1px solid rgba(255, 255, 255, 0.5);border-right: 1px solid rgba(255, 255, 255, 0.5)}
.income-board>div:nth-child(2){border-bottom: 1px solid rgba(255, 255, 255, 0.5);}
.income-board>div:nth-child(3){border-right: 1px solid rgba(255, 255, 255, 0.5);}

.income-board>div>span{color: rgba(255, 255, 255, 0.7);font-size: 16px;}
.income-board>div p{color: #fff;padding-top: 15px;font-size: 18px;}
.income-board>div p>span{font-weight: bold;}

.bottom-tab{display: flex;align-items: center;justify-content: space-around;}
.tablink {font-size: 16px;padding: 0;margin: 0;color: #999;outline: none;cursor: pointer;height: 30px;}
.tabcontent {color: #000;display: none;}
.tablink{position: relative;}
.tablink::before{transition: 0.3s;
  transition: 0.3;
  content: '';
  width: 0%;
  position: absolute;bottom: 0;left: 0;
  height: 2px;background-image: linear-gradient(90deg, #d2ff00, #4ba000 );
}
.tablink:focus{color: #4ba000 ;transition: 0.3s;font-weight: 900;}
.tablink.on{color: #4ba000 ;transition: 0.3s;font-weight: 900;}
.tablink:hover{color: #4ba000 ;transition: 0.3s;}
.tablink:focus::before{width: 100%;transition: 0.3s;}
.tablink:hover::before{width: 100%;transition: 0.3s;}
.tablink.on::before{width: 100%;transition: 0.3s;}

.top-sub-title{display: flex;align-items: center;justify-content: space-between;color: #999;padding: 0 15px;padding-top: 15px;}
.main-bot-list{overflow-y: auto;height: 520px;padding: 15px;}
.main-bot-list li{border: 1px solid #e6e6e6; padding: 15px;cursor: pointer;display: flex;justify-content: space-between;align-items: center;margin-bottom: 15px;box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);border-radius: 10px;transition: 0.3s;}
.main-bot-list li:hover{transform: scale(0.98);transition: 0.3s;border: 1px solid #4ba000 ;}

/*------ 내정보 ------*/
.top-nav{background-color: #4ba000;}
.main>div{padding-bottom: 50px;}
.main>div>span{font-weight: 600;padding-bottom: 10px;display: block;}
.main>div:last-of-type{padding-bottom: 0;}

.user-list{display: flex;align-items: center;padding-top: 15px;justify-content: space-between;}
.user-list>p{overflow: hidden;word-wrap: break-word;}
.user-list>a{color: #999;font-size: 16px;transition: 0.3s;}
.user-list>a:hover{color: #4ba000 ;transition: 0.3s;}
.user-list>a i{padding-left: 5px;}
.list-01{justify-content: space-between;display: block;}

/* 카카오버튼 btn-01*/
.btn-01{box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2); border-radius: 10px;transition: 0.3s;font-size: 16px;background-image: linear-gradient(#ffe839, #ffd000);color: #000;}
.btn-01:hover{transform: scale(0.98);transition: 0.3s;opacity: 0.7;}

/* 기본 btn-02*/
.btn-02{box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2); border-radius: 10px;transition: 0.3s;font-size: 16px;font-weight: bold;
  background-color: #4ba000; color: #fff;width: 80px;height: 50px;margin-left: 5px;border: 1px solid #4ba000;}
.btn-02:hover{transition: 0.3s;opacity: 0.7;}

/* 구글버튼 btn-03*/
.btn-03{box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2); border-radius: 5px;transition: 0.3s;font-size: 16px;border: 1px solid #e6e6e6;width: 80px;height: 50px;}
.btn-03:hover{transform: scale(0.98);transition: 0.3s;opacity: 0.7;}

/* 인증버튼 btn-04*/
.btn-04{box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2); border-radius: 10px;transition: 0.3s;font-size: 16px;font-weight: bold;background-color: transparent; color: #4ba000 ;width: 80px;height: 50px;margin-left: 5px;border: 1px solid #4ba000 ;}
.btn-04:hover{transition: 0.3s;background-color: #4ba000 ; color: #fff;}

.main>div:first-of-type>div>button{margin-left: 15px;width: 80px;border-radius: 10px;height: 50px;}
.main-bot-list-01{height: 550px;}
.main-bot-list-01 li p{width: 50%;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;}

/* 스크롤바 안보임 */
/* ( 크롬, 사파리, 오페라, 엣지 ) 동작 */
.main-bot-list:-webkit-scrollbar {display: none;}
.main-bot-list {-ms-overflow-style: none; /* 인터넷 익스플로러 */scrollbar-width: none; /* 파이어폭스 */}

/* 계정정보-내정보수정 */
.info-board>p{padding-bottom: 30px;}
.info-board .user-info{display: flex;align-items: center; padding-bottom: 15px;}
.user-info p{width: 80px;}
.user-info input{padding: 5px;width: calc(100% - 80px);font-size: 16px;border-radius: 10px;height: 50px;border: 1px solid #e6e6e6;box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);}
.user-info input:focus{border: 1px solid #4ba000 ;}
.info-board-inner{margin-bottom: 30px;}
.main>div:first-of-type>div.f-btn{display: flex;}
.main>div:first-of-type>div.f-btn>button{box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);transition: 0.3s;display: flex;align-items: center;justify-content: center;margin: auto;width: 100%;background-color: #4ba000 ;color: #fff;font-size: 18px;}
.main>div:first-of-type>div.f-btn>button:hover{opacity: 0.7;transition: 0.3s;transform: scale(0.98);transition: 0.3s;}
.main>div:first-of-type>div.f-btn>button.b-btn{color: #999;border: 1px solid #e6e6e6;margin-right: 15px;background-color:transparent;}
.main>div:first-of-type>div.f-btn>button.b-btn i{padding-right: 5px;}

/* 계정정보 */
.setting-board li{border-bottom: 1px solid #e6e6e6;}
.setting-board li a{padding: 0 10px;height: 50px;font-size: 16px;color: #000;display: flex;align-items: center;justify-content: space-between;transition: 0.3s}
.setting-board li a>i{color: #999;}
.set-up-title{color: #999; background-color: #f7f7f7;height: 50px;display: flex;align-items: center;padding-left: 10px;}
.setting-board li a:hover{transform: scale(0.98);transition: 0.3s;}

.user-set{height: calc(100% - 60px);overflow-y: auto;}
.company-info{width: 100%; color: #999;padding: 15px;padding-top: 135px;}
.company-info img{width: 80px;margin-right: 5px;}
.company-info>p{display: flex;align-items: center; font-weight: bold;margin-bottom: 10px;font-size: 18px;}
.main>div.company-info>span{font-weight: normal;line-height: 24px;}

/* 상세내용 */
.news-txt{margin-top: 15px;height: calc(100% - 195px);}
.news-txt>p{color: #999;font-size: 14px;}
.news-txt>div.txt-inner{overflow-y: auto;height: 100%;border: 1px solid #e6e6e6;padding: 10px;border-radius: 5px; font-size: 16px;margin-top: 5px;}
.main>div>div.float-btn{position: fixed;bottom: 70px;left: 50%;transform: translateX(-50%); width: 100%;padding: 0 20px; margin-top: 15px;background-color: #fff;display: flex;align-items: center;justify-content: space-between;max-width: 768px;}
.main>div>div.float-btn>button{margin: 10px 0;width: 50px;height: 50px;display: flex;align-items: center;justify-content: center;color: #999; border: 1px solid #e6e6e6;font-size: 16px;cursor: pointer;transition: 0.3s;margin-right: 10px;}
.main>div>div.float-btn>button:last-of-type{margin-right: 0;}
.main>div>div.float-btn>button:hover{color: #4ba000 ;border-color: #4ba000 ;transform: scale(0.98);}

/* 팝업 */
.popup{ position: fixed;left: 0;top: 0;width: 100vw;height: 100vh;background-color: rgba(0, 0, 0, 0.5);z-index: 9;}
.popup-inner{width: 400px;border-radius: 20px;overflow: hidden;box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);background-color: #fff;border: 2px solid #fff;}
.popup-title{display: flex;align-items: center;justify-content: center;height: 50px;background-color: #4ba000 ; color: #fff;font-size: 24px;}
.popup-board{padding: 15px;}
.popup-board>span{overflow:hidden;word-wrap:break-word;}
.popup-board>p{overflow:hidden;word-wrap:break-word;color: #999;}
.popup-board>div{margin-top: 30px;}
.popup-txt{display: flex;align-items: center;}
.popup-txt>p{width: 100px;}
.popup-txt>input{width: calc(100% - 235px);margin-right: 5px;padding: 5px;font-size: 16px;border-radius: 10px;height: 50px;border: 1px solid #e6e6e6;}
.popup-txt input:focus{border: 1px solid #4ba000 ;}
.popup-txt-sub{font-size: 12px;color: red;}
.popup-btn{display: flex;justify-content: center;align-items: center;}
.popup_txt p{color: #999;}
.popup_txt input{font-size: 16px;width: calc(100% - 85px);height: 50px;padding: 5px;border-radius: 10px;border: 1px solid #e6e6e6;}
.popup_txt input:focus{border: 1px solid #4ba000 ;}
.popup_txt>div{display: flex;align-items: center;justify-content: center;height: 55px;}

.popup-btn-01{display: flex;}
.popup-btn-01>button{transition: 0.3s;display: flex;align-items: center;justify-content: center;margin: auto;width: 100%;background-color: #4ba000 ; color: #fff;font-size: 16px;}
.popup-btn-01>button.p-btn-02:hover{opacity: 0.7;transition: 0.3s;}
.popup-btn-01>button.p-btn-02{color: #999;border: 1px solid #e6e6e6;margin-right: 15px;background-color:transparent;}

.select_cus {position: relative;}
.select_cus .trigger {display: flex;align-items: center;position: relative;height: 50px;padding: 10px;border: 1px solid #e6e6e6;cursor: pointer;border-radius: 10px;}
.select_cus .trigger:hover{border: 1px solid #4ba000 ;transition: 0.3s;}
.select_cus .trigger:after {content:'\f0d8';font-family: fontawesome;position: absolute;top: 15px;right: 10px;background-size: contain;transform:scaleY(-1);color: #000;}
.select_cus.active .trigger:after {transform:scaleY(1);}
.select_cus .trigger_txt {overflow: hidden;font-size: 18px;color: #999;white-space: nowrap; text-overflow: ellipsis;}
.select_cus.select .trigger_txt {color: #000;font-size: 20px;}
.select_cus .option {height: 250px;border-radius: 10px; display: none;width: 100%;background: #fff;border: 1px solid #e6e6e6;border-top: none; z-index: 1;overflow-y: auto;}
.select_cus .option > li {font-size: 16px;padding:15px 10px;color: #999;cursor: pointer;transition: 0.3s;}
.select_cus .option > li:hover {color: #fff;transition: 0.3s;background-color: #4ba000 ;}

/* 로딩화면/로그인 */
.loading-board{position: relative;}
.loading-wrap{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);text-align: center;max-width: 300px;margin: 0 auto;width: 100%;}
.loading-wrap>img{width: 100%;height: 100%;object-fit: cover;padding: 10px 40px;}
.loading-wrap h2{color: #4ba000 ;font-weight: 900;font-size: 36px;letter-spacing: 0;}
.sub-img {position: absolute;top: 140px;right: 0;width: 100px;}
.sub-img img{width: 100%;height: 100%;}
.login-btn{position: absolute;bottom: 0;left: 50%;transform: translateX(-50%); width: 100%;padding: 15px;max-width: 360px;}
.login-btn button{width: 100%;height: 50px;margin-bottom: 15px;border-radius: 10px;background-color: #f7f7f7;border: 1px solid #e6e6e6;display: flex;align-items: center;justify-content: center;width: 100%;height: 50px;font-size: 16px;margin-bottom: 10px;transition: 0.3s;font-weight: bold;position: relative;}
.login-btn button>img {display: block;height: 20px;position: absolute;left: 15px;top: 50%;transform: translateY(-50%);}
.login-btn button:hover{transform: scale(0.98);transition: 0.3s;}


.popup{display: none;}

/* 0812수정 */
.user-dashboard{display: flex;align-items: center;justify-content: center;flex-direction: column; padding: 20px;width: 100%;overflow-y: auto;height: auto;}
.user-dashboard li{width: 100%; margin-bottom: 5px;display: flex;justify-content: space-between;align-items: center;}
.user-dashboard li:first-of-type p{color: #333;font-size: 18px;}
.user-dashboard li p{width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-word;
  
  display: -webkit-box;
  -webkit-line-clamp: 2; 
  -webkit-box-orient: vertical
}
.user-dashboard li span{color: #4ba000 ;font-weight: bold;}

.user-dashboard li button{color: #fff;height: 30px;}

.list-01-sub{width: 100%;display: flex;justify-content: space-between;margin-top: 20px;}
sup{color: red;}
/* 0812추가 */
.login{margin: 0 20px;margin-top: 80px;display: flex;align-items: center;justify-content: center;flex-direction: column;}
.login>div{width: 100%;position: relative; display: flex;align-items: center;margin-bottom: 10px;justify-content: center;}
.login>div label{position: absolute;left: 10px;top: 50%;transform: translateY(-50%);color: #e6e6e6;font-size: 22px;}
.login-id:focus-within label i{color: #51b9cb;transition: 0.5s;}
.login-pw:focus-within label i{color: #51b9cb;transition: 0.5s;}

.login-id:focus-within label i{color: #4ba000 ;transition: 0.5s;}
.login-pw:focus-within label i{color: #4ba000 ;transition: 0.5s;}
.login>div input{width: 100%;height: 40px;border:1px solid #e6e6e6;padding: 10px;border-radius: 100px;padding-left: 40px;}
.login>div input:focus{outline: none;border:1px solid #4ba000 ;transition: 0.3s;}

.login-button{margin: 0 20px;display: flex;justify-content: center;}
.login-button a{background-color: #4ba000 ;color: #fff; display: block;width: 100%;text-align: center;padding: 10px;font-weight: bold;border-radius: 100px;}
.login-button a:hover{opacity: 0.7;;transition: 0.3s;}
.member-btn{margin-top: 20px;}
.member-btn a{transition: 0.3s; font-weight: bold;color: #4ba000 ;margin-top: 40px;}
.member-btn a:hover{opacity: 0.7;}
.info-board h2{display: flex;justify-content: center;margin-bottom: 20px;}

.policy-box {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.check-all {
  display: inline-block;
  position: relative;
  padding-left: 36px;
  font-size: 20px;
  line-height: 32px;
  font-weight: bold;
  margin-bottom: 12px;
}
.check-all input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  left: 0;
  top: 50%;
}
.check-all span.fakeCheck {
  position: absolute;
  width: 28px;
  height: 28px;
  background: url(/static/user/img/chcek_off.png) no-repeat center center;
  background-size: 25px auto;
  left: 0;
  top: 1px;
}
.policyCheck .necessary {
  font-size: 16px;
  font-weight: normal;
  color: #1f4a9e;
}
.check-all input[type="checkbox"]:checked ~ span.fakeCheck {
  background-color: #0e71b8;
  border-color: #0e71b8;
  background: url(/static/user/img/chcek_on.png) no-repeat center center;
  background-size: 24px auto;
}

.policyCheck {
  display: inline-block;
  position: relative;
  padding-left: 32px;
  font-size: 18px;
  color: #888;
  line-height: 34px;
  font-weight: 400;
}

.policyCheck span.fakeCheck {
  position: absolute;
  width: 24px;
  height: 24px;
  background: url(/static/user/img/chcek_off.png) no-repeat center center;
  background-size: 24px auto;
  left: 0;
  top: 5px;
}

.policyCheck input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  left: 0;
  top: 50%;

}
.policyCheck input[type="checkbox"]:checked ~ span.fakeCheck {
  background-color: #0e71b8;
  border-color: #0e71b8;
  background: url(/static/user/img/chcek_on.png) no-repeat center center;
  background-size: 24px auto;
}




.modal-header {
  display: flex;align-items: center;
  position: relative;
  height: 60px;
  text-align: center;
  border-bottom: 1px solid #ccc;
  position: relative;
  margin: 0 20px;font-size: 24px;
}
.modal-header .close {
  position: absolute;
  right: 10px;
  top: 20px;
font-size: 20px;}
.modal-body {
  padding: 0 20px 20px;
}
.modal-foot {
  background-color: #4ba000 ;
  display: flex;align-items: center;justify-content: center;
  text-align: center;
  height: 60px;
  transition: 0.3s
}

.modal-foot>button{
  font-size: 18px;
  height: 100%;width: 100%;color: #fff;
}
.modal-foot:hover {
  opacity: 0.7;
}

.terms {
  max-height: 350px;
  overflow: auto;
  font-size: 16px;
  color: #383838;
  line-height: 1.6;
}
.login-wrap {
  width: 300px;
}

.c-btn{border: 1px solid #4ba000 ;margin-left: 0 !important;
width: 100% !important;color: #4ba000 ;font-weight: bold;
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);transition: 0.3s;}
.c-btn:hover{background-color: #4ba000 ;color: #fff;}
.id-box{width: 100%;border: 1px solid #e6e6e6;
  padding: 20px;text-align: center;
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);
  font-size: 18px;line-height: 30px;
margin: 50px 0;margin-top: 0;}
.id-box>p>span{color: #4ba000 ;font-weight: bold;}


/* 0823 */
.login-wrap .login>div {margin-bottom: 15px;}
.login-wrap .login>div input {height: 50px;}
.login-btn a {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.member-btn a {font-size: 12px;}
.login-wrap .login {margin-top: 100px;}
.err-txt{margin-bottom: 15px;}
.err-txt>p{color: red;font-size: 12px;text-align: left;}
.user-dashboard>li{padding-top: 15px;}


/* 0902 */
.call-btn>p.help{width: auto;color: #000;font-size: 14px;position: absolute;left: 85px;bottom: -10px;}
.call-btn>p.help>span{color: red;}
.call-btn>p.error{width: auto;color: red;font-size: 14px;position: absolute;left: 85px;bottom: -10px;}

.password-info{position: relative;}
.password-info>p{width: 120px;}
.password-info input {width: calc(100% - 120px);}
.password-err>span{position: absolute;bottom: -5px;left: 120px; width: auto;color: red;font-size: 12px;}


/* 0905 */
.rolling-list{width: 100%;}
.wrap .rolling-list ul li.list-wrap{width: calc(100% - 30px);}

/* 0912 */
.withdraw-txt>p{width: 100px;}
.withdraw-txt>span{font-size: 14px;}

@media screen and (max-width: 425px){
  .wrap .rolling-list ul li.image-wrap {width: 390px;}
  .main-top {padding-top: 60px;}
  .board-inner{width: 370px;}
  .main-top-sub {padding-top: 40px;}
  .main>div {padding-bottom: 30px;}
  .list-01{display: block;}
  .list-01-sub{display: flex;align-items: center;justify-content: space-between;margin-top: 10px;}
  .wrap .rolling-list ul li a{font-size: 16px;}
  .bar-chart .bar:nth-child(n+7) {display: none;} 
  .bar-chart{gap: 20px;width: calc(100% - 100px);padding-left: 25px;}
  .bar {width: 20px;}
}

@media screen and (max-width: 390px){
  .withdraw-txt>p{width: 80px;}

  .wrap .rolling-list ul li.image-wrap {width: 350px;}
  .p-txt{display: block;}
  .popup-txt>input{width: calc(100% - 55px);height: 33px;}
  .popup-inner {width: 360px;}
  .income-board>div {padding: 10px;}
  .income-board>div p {padding-top: 10px;}
  .board-txt {padding: 10px;}
  .loading-wrap h2{font-size: 28px;}
  /* .sub-img{top: 160px;right: 20px;} */
  .bar-chart .bar:nth-child(n+6) {display: none;} 
  .wrap .rolling-list ul li a{padding: 5px 20px;}
  .bar-chart{gap: 20px;width: calc(100% - 60px);padding-left: 20px;margin-left: 10px;}
  .bar {width: 30px;}
  .board-inner {width: 320px;}
  .board-inner>div span {font-size: 14px;}
  .board-inner>div p {font-size: 16px;}
  .board-inner>div{padding: 15px 0;}
}

@media screen and (max-width: 375px){
  .bar {width: 28px;}
  .wrap .rolling-list ul li.image-wrap {width: 330px;}
  .bar-chart>div:last-of-type{display: none;}
}

@media screen and (max-width: 360px){
  .withdraw-txt>span {
    font-size: 12px;
}
  .main-bot-list li{font-size: 14px;}
  .board-inner>div{padding: 15px 0;}
  .bar {width: 25px;}
  .main-bot-list li{padding: 10px;}
  .loading-wrap h2{font-size: 26px;}
  /* .sub-img{top: 150px;right: 15px;width: 95px;} */
  .sub-img{top: 135px;right: 15px;width: 95px;}

  .board-inner {width: 310px;}
  .popup-inner {width: 340px;}
  .main-bot{padding: 10px;}
  .main-bot-list{padding: 10px;}
}

@media screen and (max-width: 345px){
  .bar {width: 22px;}
  .board-inner {width: 290px;}
  .loading-wrap h2{font-size: 24px;}
  /* .sub-img{top: 145px;right: 15px;width: 85px;} */
  .sub-img{top: 130px;right: 15px;width: 85px;}
  .wrap .rolling-list ul li.image-wrap {width: 300px;}
  .popup-inner{width: 320px;}
}

@media screen and (max-width: 320px){
  .withdraw-txt>p {
    width: 68px;
}
  /* .sub-img{top: 145px;right: 15px;width: 70px;} */
  .sub-img{top: 130px;right: 30px;width: 70px;}

  .income-board>div>span {font-size: 14px;}
  .income-board>div p {font-size: 16px;}
  .board-txt>p{font-size: 14px;}
  .popup-inner{width: 300px;}
  .bar-chart .bar:nth-child(n+5) {display: none;} 
  .bar {width: 25px;}
  .bar-chart>div:nth-last-child(2){display: none;}
}

@media screen and (max-height: 935px){
  .board-txt{padding-top: 20px;}
  .chart-board {margin-top: 50px;}
  .main-bot-list{height: 510px;}
  .main-bot-list-01{height: 530px;}
}

@media screen and (max-height: 915px){
  .chart-board {margin-top: 25px;}
  .main-bot-list{height: 490px;}
  .main-bot-list-01{height: 510px;}
}

@media screen and (max-height: 900px){
  .chart-board {margin-top: 0;}
  .main-bot-list{height: 475px;}
  .main-bot-list-01{height: 495px;}
}

@media screen and (max-height: 885px){
  .main-bot-list{height: 460px;}
  .main-bot-list-01{height: 480px;}
}

@media screen and (max-height: 860px){
  .main-bot-list{height: 435px;}
  .main-bot-list-01{height: 455px;}  
}

@media screen and (max-height: 845px){
  .main-bot-list{height: 420px;}
  .main-bot-list-01{height: 440px;}
}

@media screen and (max-height: 740px){
  .wrap .rolling-list ul{padding: 10px;}
  .chart-board{padding-top: 0;}
  .board-txt {padding-top: 10px;}
  .main-top {padding-top: 50px;}
  /* .main-top {height: 65%;} */
  /* .board-inner{top: 60%;} */
  .main-bot-list{height: 315px;}
  .main-bot-list-01{height: 335px;}
}

@media screen and (max-height: 670px){
  .board-inner>div {padding: 10px 0;}
  /* .board-inner{padding: 10px;} */
  .bar-chart {height: 185px;}
  .main-bot-list{height: 255px;}
  .main-bot-list-01{height: 265px;}

  /* 0812수정 */
  .board-inner-top ul li{font-size: 14px;}
  .board-inner-top ul li:first-of-type p{font-size: 16px;}
  .board-inner-top ul li button{font-size: 14px;}


}

@media screen and (max-height: 640px){
  .board-inner {padding: 0;}
  .bar-chart {height: 170px;}
  .main-bot-list{height: 210px;}
  .main-bot-list-01{height: 235px;}
  .board-inner>div {padding: 15px 0;}
}