@font-face {
    font-family: 'NanumSquareNeoLight';
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-aLt.eot);
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-aLt.eot?#iefix) format("embedded-opentype"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-aLt.woff) format("woff"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-aLt.ttf) format("truetype");
}

@font-face {
    font-family: 'NanumSquareNeo';
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-bRg.eot);
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-bRg.eot?#iefix) format("embedded-opentype"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-bRg.woff) format("woff"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-bRg.ttf) format("truetype");
}

@font-face {
    font-family: 'NanumSquareNeoBold';
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-cBd.eot);
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-cBd.eot?#iefix) format("embedded-opentype"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-cBd.woff) format("woff"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-cBd.ttf) format("truetype");
}

@font-face {
    font-family: 'NanumSquareNeoExtraBold';
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-dEb.eot);
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-dEb.eot?#iefix) format("embedded-opentype"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-dEb.woff) format("woff"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-dEb.ttf) format("truetype");
}

@font-face {
    font-family: 'NanumSquareNeoHeavy';
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-eHv.eot);
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-eHv.eot?#iefix) format("embedded-opentype"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-eHv.woff) format("woff"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-eHv.ttf) format("truetype");
}

@font-face {
    font-family: 'NanumSquareNeoVariable';
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeo-Variable.eot);
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeo-Variable.eot?#iefix) format("embedded-opentype"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeo-Variable.woff) format("woff"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeo-Variable.ttf) format("truetype");
}


/* 대시보드 레이아웃 */
.mof_contents { background:#f8f7fa; padding: 30px 20px 20px 20px; }

#my_office_layout .my_office_layout_contents {   }
.contents_body { background:#f8f7fa; padding:0px;}
.subpage_con { background:#f8f7fa; padding:0px; box-shadow:none;  border-radius:0px; margin-top:20px; }
.mof_right .top_area_1 {  display:none; }


@media(max-width:1000px){
.mof_contents { padding: 70px 0 10px 0; }
}



.dnew * { font-family: 'NanumSquareNeo'; font-size:15px; }
.dnew { display:flex; flex-wrap:wrap; justify-content:space-between; }
.dnew > div { border-radius:10px; margin-bottom:25px;  padding:15px 20px; width:100%; }
.dnew .per50 { width:calc(50% - 15px); }
.dnew > div h3 { margin-bottom:5px; font-size:18px; }

@media(max-width:1000px){
.dnew { padding:0 0px; }
.dnew > div { margin-bottom:15px; }
.dnew .per50 { width:100%; }
}


.dnw_notice { background:#00cdd0; width:100%; display:flex; align-items:center; padding:10px 20px; }
.dnew > div.dnw_notice { border-radius:30px; }
.dnw_notice h4 { color:#fff; font-size:16px; margin-right:40px; position:relative; }
.dnw_notice h4:after { position:absolute; width:1px; height:15px; background:#fff; content:""; right:-20px; top:2px; }
.dnw_notice a.btn_admin_mode { color:#fff; background:rgba(0,0,0,0.3); display:inline-block; padding:7px 12px; border-radius:15px }
.dnw_notice span.user_admin { flex-grow:1; text-align:right; } 
.dnw_notice .newsticker {position:relative;overflow:hidden; flex-grow:1;height:30px;text-align:left; margin:0px 0 0px 0px; }
.dnw_notice .newsticker ul {padding:0px;margin:0px; }
.dnw_notice .newsticker ul li {width:100%;padding:0;font-size:16px;height:30px;line-height:30px;overflow:hidden; text-overflow: ellipsis;white-space: nowrap;}
.dnw_notice .newsticker ul li a {color:#fff; }

@media(max-width:1000px){
.dnw_notice { padding:10px 20px;  display:flex; position:relative; flex-wrap:wrap; }
.dnew > div.dnw_notice { border-radius:30px; }
.dnw_notice h4 { color:#fff; font-size:14px; margin-right:40px; position:relative; margin-bottom:10px; }
.dnw_notice h4:after { display:none; }
.dnw_notice a.btn_admin_mode { color:#fff; background:rgba(0,0,0,0.3); display:inline-block; padding:7px 12px; border-radius:15px ; position:absolute; top:10px; right:10px; font-size:12px; }
.dnw_notice span.user_admin { flex-grow:1; text-align:right; } 
.dnw_notice .newsticker {position:relative;overflow:hidden; flex-grow:1;height:30px;text-align:left; margin:0px 0 0px 0px; width:100% }
.dnw_notice .newsticker ul {padding:0px;margin:0px; }
.dnw_notice .newsticker ul li {width:100%;padding:0;font-size:14px;height:20px;line-height:20px;overflow:hidden; text-overflow: ellipsis;white-space: nowrap;}
.dnw_notice .newsticker ul li a {color:#fff; }
}


.dnw_myinfo { background:#feb220; width:100%; }
.dnw_myinfo ul {  display:flex; align-items:center; flex-wrap:wrap; }
.dnw_myinfo ul li { color:#fff; margin-left:15px; display:flex; align-items:center; }
.dnw_myinfo ul li:first-child { margin-left:0px; }
.dnw_myinfo ul li strong { font-weight:normal; }
.dnw_myinfo ul li span { margin-right:20px; }

.dnw_mypoint { background:#25b1f9;  color:#fff;  min-height:120px; }
.dnw_mypoint ul.my_point_list { padding:10px  }
.dnw_mypoint ul.my_point_list li { padding:11px 0; font-size:16px; display:flex; align-items:center; justify-content:space-between; border-top:1px solid rgba(255,255,255,0.4); }
.dnw_mypoint ul.my_point_list li:first-child { border-top:0; }
.dnw_mypoint ul.my_point_list li span { font-weight:normal; font-size:16px; }
.dnw_mypoint ul.my_point_list li strong { color:#ffdb60; font-size:22px; font-weight:bold; }

@media(max-width:1000px){
.dnw_mypoint ul.my_point_list { padding:5px  0 }
.dnw_mypoint ul.my_point_list li { padding:6px 0; }
.dnw_mypoint ul.my_point_list li span { font-size:14px; }
.dnw_mypoint ul.my_point_list li strong { font-size:18px; }
}


.dnw_myincome { background:#f55a5b url('../image/img_up.png') no-repeat; background-position:98% bottom; background-size:auto 90%;  color:#fff; min-height:120px; }
.dnw_myincome p { margin-top:15px; font-size:20px; }

.dnw_chart { background:#fff; border:2px solid #feb220 }
.dnw_chart > div { margin:0 auto; text-align:center; }
.dnw_chart > div h4 { margin-bottom:10px; }

.dnw_graph { background:#fff; border:2px solid #feb220  }

.bar_graph { }
.bar_graph ul { margin-top:20px; display:flex; align-items:center; justify-content:space-between; }
.bar_graph .graph_record { background:#ddd; width:100%; height:30px; border-radius:15px; overflow:hidden; margin:10px 0;  line-height:29px;  }
.bar_graph .graph_fill { padding:0 15px 0 10px; height:100%; background:#17b3c1; color:#fff; text-align:right; min-width:10px;  background: #5c38d5; }
/*
@media(max-width:1000px){
.record_my_level { display:flex; }
.record_my_level > div { width:50%; }
.graph_record { background:#ddd; width:100%; height:25px; border-radius:15px; overflow:hidden; margin:0px 0 15px 0;  line-height:24px; font-size:12px; }
.graph_record:last-child { margin-bottom:5px; }
.graph_fill { padding:0 15px 0 10px; height:100%; background:#17b3c1; color:#fff; text-align:right; min-width:10px; 
background: rgb(24,113,240); background: linear-gradient(90deg, #fdda3b 0%, #17b3c1 50%); }
}
*/


.dnw_table { border:2px solid #f55a5b; background:#fff; }

.dnw_table .db_table { width:100%; margin:10px 0; border-collapse:collapse; }
.dnw_table .db_table thead { background:#f89091; border:0;  }
.dnw_table .db_table thead th { font-size:15px; font-weight:normal; padding:10px 0 11px 0; color:#fff; }
.dnw_table .db_table td { text-align:center; padding:12px 0; border-bottom:1px solid #ddd; white-space:nowrap;  font-size:15px; }
.dnw_table .db_table .nodata { padding:30px 0; }
@media(max-width:1000px){
.dnw_table .db_table thead th { font-size:13px;}
.dnw_table .db_table td {font-size:13px; }
}


.dnw_link  { border:2px solid #25b1f9;  background:#fff;  color:#fff;  padding-bottom:10px; }
.dnw_link  h3 { text-align:center; background:rgba(37,177,249,0.2); border-radius:10px; padding:10px 0; color:#222; }
.dnw_link > div { display:flex; align-items:center; justify-content:center; margin:20px auto; }
.dnw_link > li span { display:flex; align-items:center; }
.dnw_link  > div .copy_btn { background:#f55a5b; margin-left:10px; border-radius:15px; color:#fff; font-size:14px; height:30px; border:0; padding:0 20px; cursor:pointer; }

.dnw_link span.link_url { display:flex;align-items:center;  flex-wrap:wrap}
.dnw_link span.link_url img { width:25px; margin-right:5px; }
.dnw_link span.link_url #text_link {  font-size:20px; color:#000; cursor:pointer; }

.dnw_link ul.snslink { display:flex; justify-content:center; }
.dnw_link ul.snslink li { width:35px; margin-left:7px; }
.dnw_link ul.snslink li img { width:35px; border-radius:20px; }

@media(max-width:1000px){
.dnw_link span.link_url #text_link {  font-size:14px; }
.dnw_link  > div .copy_btn {  font-size:12px; padding:0 10px;  }
}


.pie-chart {
  position: relative;
  display:inline-block;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  transition: 0.3s;
  background:#eee;
}
.pie-chart .center{
  background: #fff;
  position: absolute;
  top:50%; left:50%;
  width:150px; height:150px;
  border-radius: 50%;
  text-align:center; 
   transform: translate(-50%, -50%);
   display:flex;
   flex-direction:column;
   align-items:center;
   justify-content:center;
}
.pie-chart1{
  animation: pie1 0.5s forwards;
}
@keyframes pie1{
  0%{background : conic-gradient(#4cc96c 0% 0%, #eeeeee 0% 100%)}
  6%{background : conic-gradient(#4cc96c 0% 5%, #eeeeee 0% 100%)}
  12%{background : conic-gradient(#4cc96c 0% 10%, #eeeeee 0% 100%)}
  18%{background : conic-gradient(#4cc96c 0% 15%, #eeeeee 0% 100%)}
  25%{background : conic-gradient(#4cc96c 0% 20%, #eeeeee 0% 100%)}
  33%{background : conic-gradient(#4cc96c 0% 25%, #eeeeee 0% 100%)}
  38%{background : conic-gradient(#4cc96c 0% 30%, #eeeeee 0% 100%)}
  44%{background : conic-gradient(#4cc96c 0% 35%, #eeeeee 0% 100%)}
  50%{background : conic-gradient(#4cc96c 0% 40%, #eeeeee 0% 100%)}
  56%{background : conic-gradient(#4cc96c 0% 45%, #eeeeee 0% 100%)}
  62%{background : conic-gradient(#4cc96c 0% 50%, #eeeeee 0% 100%)}
  68%{background : conic-gradient(#4cc96c 0% 55%, #eeeeee 0% 100%)}
  75%{background : conic-gradient(#4cc96c 0% 60%, #eeeeee 0% 100%)}
  82%{background : conic-gradient(#4cc96c 0% 65%, #eeeeee 0% 100%)}
  88%{background : conic-gradient(#4cc96c 0% 70%, #eeeeee 0% 100%)}
  94%{background : conic-gradient(#4cc96c 0% 75%, #eeeeee 0% 100%)}
  100%{background : conic-gradient(#4cc96c 0% 80%, #eeeeee 80% 100%)}
}

.pie-chart .center span { display:block; text-align:center; }
.pie-chart .center span:first-child { font-size:25px; font-weight:bold;  }
.pie-chart .center span:nth-child(2) { }



@media(max-width:1000px){

.pie-chart {
  position: relative;
  display:inline-block;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  transition: 0.3s;
  background:#eee;
}
.pie-chart .center{
  background: #fff;
  position: absolute;
  top:50%; left:50%;
  width:110px; height:110px;
  border-radius: 50%;
  text-align:center; 
   transform: translate(-50%, -50%);
   display:flex;
   flex-direction:column;
   align-items:center;
   justify-content:center;
}

.pie-chart .center span { display:block; text-align:center; font-size:12px; }
.pie-chart .center span:first-child { font-size:18px; font-weight:bold;  }
.pie-chart .center span:nth-child(2) { }
}