@charset "UTF-8";@import url("/resources/css/fnc_css/font/font.css");body { width: 100%; background-color: #383c50; color: #fff; } 
.dashboard { width: 100%; height: 100%; display: flex; flex-direction: column; } 
.dashboard-top { width: 100%; height: 80px; display: flex; align-items: center; justify-content: space-between; padding: 0 35px; flex-shrink: 0; } 
.dashboard-top-right { display: flex; align-items: center; gap: 20px; } 
.dashboard-top-right > a { height: 40px; padding: 0 30px; display: flex; align-items: center; justify-content: center; border-radius: 20px; background-color: #4e536d; font-size: 16px; line-height: 24px; font-weight: 500; transition: all 0.2s; } 
.dashboard-top-right > a:hover { background-color: #ff8000; } 
.dashboard-top-right > p { font-size: 16px; line-height: 24px; } 
.dashboard-top-right > select { -o-appearance: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; background: url("/resources/images/fnc_images/common/dashboard_select.svg") no-repeat, #f6f7f8; background-position: right 20px top 50%; padding-left: 20px; padding-right: 45px; height: 40px; border-radius: 20px; background-color: #4e536d; width: fit-content; } 

/* */
.dashboard-bot { display: flex; width: 100%; height: 100%; } 
.dashboard-menu { width: 90px; height: 100%; flex-shrink: 0; padding: 20px 15px; display: flex; flex-direction: column; gap: 20px; position: sticky; top: 0; } 
.dashboard-menu > a { width: 100%; aspect-ratio: 1/1; border-radius: 10px; display: flex; align-items: center; justify-content: center; transition: all 0.2s; } 
.dashboard-menu > a > img { filter: brightness(0.9); } 
.dashboard-menu > a.active,
.dashboard-menu > a:hover { background-color: #ff8000; box-shadow: inset 0px 3px 6px #00000029; } 
.dashboard-menu > a.active > img,
.dashboard-menu > a:hover > img { filter: brightness(1); } 
/* */
canvas { max-width: 100% !important; max-height: 100% !important; } 
.dashboard-main { height: 100%; overflow: auto; width: 100%; padding: 20px 35px 70px; display: flex; flex-direction: column; gap: 25px; } 
.dashboard-main-top { display: flex; gap: 25px; background: url("/resources/images/fnc_images/common/dashboard_top_bg.png") no-repeat; background-position: top 50% left 30%; } 
.dashboard-main-top-left { width: 100%; min-width: 500px; display: flex; flex-direction: column; justify-content: end; gap: 40px; } 
.dashboard-main-top-left-name > h3 { font-size: 24px; line-height: 32px; font-weight: 600; } 
.dashboard-main-top-left-name > p { color: #bcbcbc; font-size: 16px; line-height: 24px; } 
.dashboard-main-top-left-info { width: 100%; height: 150px; box-shadow: 10px 10px 20px #00000029; background-color: #4e536d; border-radius: 10px; padding: 20px 0; display: flex; align-items: center; justify-content: space-between; } 
.dashboard-main-top-left-info > div { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 20px; border-right: 1px solid #858bab; } 
.dashboard-main-top-left-info > div:last-child { border: none; } 
.dashboard-main-top-left-info > div > p { color: #ffb968; font-size: 16px; line-height: 24px; font-weight: 600; } 
.dashboard-main-top-left-info > div > h3 { font-size: 20px; line-height: 28px; font-weight: 500; } 

.dashboard-main-top-right { width: 1000px; flex-shrink: 0; box-shadow: 10px 10px 20px #00000029; background-color: #4e536d; border-radius: 10px; padding: 20px 35px; } 
.dashboard-main-top-right > h3 { font-size: 24px; line-height: 32px; margin-bottom: 25px; font-weight: bold; } 
.dashboard-main-top-right > div { padding: 0 50px; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 50px; } 
.dashboard-main-top-right-canvas { width: 100%; height: 100%; max-width: 280px; aspect-ratio: 1/1; flex-shrink: 0; position: relative; } 
.dashboard-main-top-right-canvas > p { position: absolute; text-align: center; font-size: 14px; line-height: 22px; left: 50%; top: 50%; transform: translate(-50%, -50%); } 
.dashboard-main-top-right-canvas > p > span { font-size: 30px; line-height: 40px; font-weight: bold; } 
.dashboard-main-top-right-legend { width: 460px; display: grid; grid-template-columns: repeat(2, 1fr); height: fit-content; } 
.dashboard-main-top-right-legend > div { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 15px 30px; height: fit-content; border-bottom: 1px solid #fff; } 
.dashboard-main-top-right-legend > div > p { display: flex; align-items: center; gap: 20px; } 
.dashboard-main-top-right-legend > div > p > span { height: 24px; width: 24px; border-radius: 5px; box-shadow: 0px 3px 6px #00000029; display: block; } 
.dashboard_chart1_color0 { background-color: #ff8000; } 
.dashboard_chart1_color1 { background-color: #3d7eff; } 
.dashboard_chart1_color2 { background-color: #959eff; } 
.dashboard_chart1_color3 { background-color: #ff6076; } 
.dashboard_chart1_color4 { background-color: #d164ff; } 
.dashboard_chart1_color5 { background-color: #fff454; } 
.dashboard_chart1_color6 { background-color: #b28b48; } 
.dashboard_chart1_color7 { background-color: #8bc94c; } 
.dashboard_chart1_color8 { background-color: #30af6c; } 
.dashboard_chart1_color9 { background-color: #5cbfba; } 
.dashboard_chart1_color10 { background-color: #75d1ff; } 
/* */
.dashboard-main-bot { height: 100%; box-shadow: 10px 10px 20px #00000029; border-radius: 10px; background-color: #4e536d; padding: 20px 35px; display: flex; flex-direction: column; } 
.dashboard-main-bot-top { width: 100%; margin-bottom: 20px; position: relative; display: flex; align-items: center; justify-content: space-between; gap: 20px; } 

.dashboard-main-bot-top-left { display: flex; align-items: center; justify-content: space-between; gap: 35px; } 
.dashboard-main-bot-top-left > h3 { font-size: 24px; line-height: 32px; font-weight: bold; } 
.dashboard-main-bot-top-module { width: 100%; display: flex; align-items: center; gap: 15px; } 
.dashboard-main-bot-top-module > div { height: 40px; padding: 0 15px; display: flex; align-items: center; justify-content: center; font-size: 14px; line-height: 20px; font-weight: 500; border: 1px solid #858bab; border-radius: 20px; cursor: pointer; transition: all 0.2s; gap: 5px; } 
.dashboard-main-bot-top-module > div > span { display: block; width: 10px; height: 10px; border-radius: 2px; } 
.dashboard-main-bot-top-module > div.active,
.dashboard-main-bot-top-module > div:hover { background-color: #ff8000; border: 1px solid #ff8000; } 

.dashboard-main-bot-top-select { display: flex; align-items: center; gap: 35px; } 
/* .dashboard-main-bot-top-select > div { display: flex; align-items: center; gap: 15px; } 
.dashboard-main-bot-top-select > div > p { display: flex; align-items: center; gap: 5px; font-size: 14px; line-height: 20px; font-weight: 500; } 
.dashboard-main-bot-top-select > div > p > span { display: block; width: 14px; height: 14px; border-radius: 5px; } */
.dashboard-main-bot-top-select > select { width: fit-content; height: 40px; border-radius: 20px; min-width: 120px; -o-appearance: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; background: url("/resources/images/fnc_images/common/dashboard_select.svg") no-repeat, #383c50; background-position: right 20px top 50%; padding-left: 30px; padding-right: 60px; } 
.dashboard-main-bot-canvas { width: 100%; height: 400px; overflow: auto; } 

/* 인트로 */
.dashboard-etc { width: 100%; height: 100vh; position: relative; display: flex; align-items: center; justify-content: center; } 
.dashboard-etc-bg1 { position: absolute; top: 0; left: 0; } 
.dashboard-etc-bg2 { position: absolute; right: 0; bottom: 0; transform: scaleX(-1); } 
.dashboard-intro { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 100px; } 
.login-btn { width: 100%; max-width: 530px; height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 40px; background-color: #f2832d; color: #fff; font-size: 18px; line-height: 26px; border: 2px solid #f2832d; transition: all 0.2s; } 
.login-btn:hover { background-color: #fff; color: #f2832d; font-weight: bold; } 
/* 로그인 */
.dashboard-login { width: 100%; max-width: 530px; padding: 0 20px; } 
.dashboard-login > form { width: 100%; } 
.dashboard-login > form > label { width: 100%; margin-bottom: 20px; } 
.dashboard-login > form > label > p { padding-left: 30px; color: #fff; font-size: 18px; line-height: 26px; margin-bottom: 10px; font-weight: 500; } 
.dashboard-login > form > label > input { width: 100%; height: 50px; padding: 0 20px; background-color: #4e536d; border-radius: 30px; } 
.dashboard-login > form > label > input::placeholder { color: #aaa; } 
.dashboard-login .login-btn { margin-top: 80px; }

/* 리스트 */
.dashboard-list-top{width:100%;margin-bottom:35px;}
.dashboard-list-top form{width:100%;display:flex;align-items:center;gap:20px;justify-content:end;}
.dashboard-list-top form > div{display:flex;align-items:center;gap:20px;}
.dashboard-list-top form select{width: fit-content; height: 40px; border-radius: 20px; -o-appearance: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; background: url("/resources/images/fnc_images/common/dashboard_select.svg") no-repeat, #383c50; background-position: right 15px top 50%; padding-left: 20px; padding-right: 40px; flex-shrink:0;}
.dashboard-list-top form input{width:100%;max-width:400px;height:40px;border-bottom:1px solid #fff;}
.dashboard-list-top form input::placeholder{color:#aaa;}
.dashboard-list-top form button{flex-shrink:0;width: fit-content; height: 40px;border-radius: 20px; padding:0 30px; background:#383c50;color:#fff;font-size:16px;line-height:24px;font-weight:500;    display: flex;    align-items: center;    justify-content: center;    transition: all 0.2s;}
.dashboard-list-top form button:hover{background-color: #ff8000;}
.dashboard-list-table{width:100%; overflow:auto;}
.dashboard-list-table table{min-width:800px;}
.dashboard-list-table th{padding:10px 5px;border:1px solid #fff;font-size:18px;line-height:26px;font-weight:500;}
.dashboard-list-table td{padding:10px 5px;border:1px solid #fff;text-align:center;font-size:16px;line-height:24px;}

#user_board_paging { border: none; padding: 0; margin: 0; display: flex; justify-content: center; gap: 10px; margin: 35px 0 10px; } 
#user_board_paging span { border-radius: 50%; color: #ff8000; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; font-weight: bold; }
#user_board_paging a span { color: #fff; font-weight: 400; } 
#user_board_paging a span:hover { font-weight: bold; color: #ff8000;} 
#user_board_paging span.prev {color: #fff; } 
#user_board_paging span.next {color: #fff; } 
 
/* 반응형 */
@media (max-width: 1700px){
 .dashboard-main-top-left { width: 500px; } 
 .dashboard-main-top-right { width: 100%; flex-shrink: 1; } 
 .dashboard-main-top-right > div { padding: 0; gap: 30px; } 
 .dashboard-main-top-right-legend > div { padding: 15px; } 
 .dashboard-main-top-right-canvas { max-width: 250px; } 
 }
@media (max-width: 1439px){
 .dashboard-main-top { flex-direction: column; } 
 .dashboard-main-top-left { width: 100%; flex-direction: row; gap: 50px; } 
 .dashboard-main-top-left-name { flex-shrink: 0; } 
 .dashboard-main-top-right > div { justify-content: space-evenly; } 
 .dashboard-menu { display: none; } 
 }
@media (max-width: 1279px){
 .dashboard-main-bot { padding: 20px; } 

 .dashboard-main-bot-top-title { width: 100%; gap: 10px; } 

 .dashboard-main-bot-top-select > select { height: 34px; font-size: 14px; line-height: 20px; width: fit-content; min-width: auto; padding-left: 15px; padding-right: 40px; background-position: right 15px top 50%; }
 .dashboard-main-bot-top-module { flex-wrap: wrap; width: 100%; } 
 .dashboard-main-bot-top-module > div { height: 34px; font-size: 14px; line-height: 20px; } 
 .dashboard-top { height: 60px; padding: 0 20px; } 
 .dashboard-top > div > img { height: 34px; } 
 .dashboard-top-right > a,
 .dashboard-top-right > select { height: 34px; font-size: 14px; } 
 .dashboard-main { padding: 20px; gap: 20px; } 
 .dashboard-main-top { gap: 20px; } 
 .dashboard-main-top-left { min-width: unset; } 
 .dashboard-main-top-left-name > h3 { font-size: 20px; line-height: 28px; } 
 .dashboard-main-top-left-info { height: auto; padding: 20px 0; } 
 .dashboard-main-top-left-info > div { gap: 10px; } 
 .dashboard-main-top-left-info > div > h3 { font-size: 16px; line-height: 24px; } 
 .dashboard-main-top-right { padding: 20px; } 
 .dashboard-main-top-right > h3,
 .dashboard-main-bot-top-left > h3 { font-size: 20px; line-height: 28px; } 
 .dashboard-main-bot-canvas { height: auto; } 
 .dashboard-main-bot-top { align-items: start; } 
 .dashboard-main-bot-top-left { flex-direction: column; gap: 20px; align-items: start; } 
 .dashboard-main-bot-top-select { position: absolute; top: 0; right: 0; }
 
  }
@media (max-width: 1023px){
 .dashboard-etc-bg1,
 .dashboard-etc-bg2 { width: 200px; } 
 .dashboard-etc { height: auto; min-height: 500px; } 
 .dashboard-intro { gap: 50px; padding: 0 20px; } 
 .dashboard-intro > div { width: 100%; max-width: 350px; } 
 .login-btn { height: 50px; font-size: 16px; }
 .dashboard-list-table th{font-size:16px;line-height:24px;}
 .dashboard-list-top form{gap:20px;flex-direction:column;align-items:end;}
 .dashboard-list-top form > div{gap:20px;width:100%;justify-content:end;}
 .dashboard-list-top form select{ height: 34px; font-size: 14px; line-height: 20px; width: fit-content; min-width: auto; padding-left: 15px; padding-right: 40px; background-position: right 15px top 50%; }
 .dashboard-list-top form input{height:34px;max-width:100%;}
 .dashboard-list-top form button{height:34px;padding:0 20px;font-size:14px;}
 #user_board_paging {gap:5px;}
 #user_board_paging span{width:20px;height:20px;} 
 }
@media (max-width: 767px){
 .dashboard-main-top-left { flex-direction: column; gap: 20px; } 
 .dashboard-main-top-right > div { flex-direction: column; } 
 .dashboard-main-top-right-legend { width: 100%; column-gap: 20px; } 
 .dashboard-main-top-right-legend > div { padding: 15px 0; } 
 .dashboard-top-right > a { padding: 0 15px; } 
 .dashboard-top-right > select { width: 100px; padding-left: 10px; padding-right: 30px; background-position: right 10px top 50%; } 
 }
@media (max-width: 479px){
 .dashboard-main-top-right-legend { grid-template-columns: 1fr; } 
 .dashboard-main-top-right-legend > div { padding: 15px 0; } 
 }