/* .mof_contents { background:#fdda3b; }
.mof_dashboard_title { font-size:25px; color: rgba(0,0,0,0.9); border-bottom:1px solid rgba(0,0,0,0.2); padding-bottom:20px; margin-bottom:20px; }
*/
.mof_contents { background:#f4f5fa; padding:20px; border-radius:0; margin:0; }
.mof_dashboard_title { font-size:25px; color: rgba(0,0,0,0.9);   border-bottom:1px solid rgba(0,0,0,0.2);padding-bottom:20px; margin-bottom:20px; }


#mof_wrap.mode2 .mof_contents{ background:#333; }
#mof_wrap.mode2 .mof_dashboard_title { color: #fff; border-bottom:1px solid #555;  }

@media(max-width:1000px){
.mof_contents { background:#f4f5fa; }
.mof_dashboard_title { font-size:20px; color:#444; padding-bottom:15px; }
.mode_select { top:80px;  display:block; right:20px; }
}


.db_in { background:#fff;  box-shadow: 2px 2px 7px 7px #eee;
border-radius:10px;; padding:20px; box-sizing:border-box; margin:15px 0; }
.db_in_grow { flex-grow:1; margin-right:20px;  }
.db_in h3 { font-size:20px; color:#222; }


.db_style_01 { display:flex; justify-content:space-between;}
.db_style_01 .db_in { width:calc(100% / 2 - 15px); flex-shrink:0; flex-grow:0;  }
.db_style_01 .db_in h3 { margin-bottom:15px; }

.db_style_01 .db_in ul.my_point_list { }
.db_style_01 .db_in ul.my_point_list li { padding:8px 0; font-size:16px; display:flex; align-items:center; justify-content:space-between; border-top:1px solid #ddd; }
.db_style_01 .db_in ul.my_point_list li:first-child { border-top:0; }
.db_style_01 .db_in ul.my_point_list li span { font-weight:normal; font-size:16px; }
.db_style_01 .db_in ul.my_point_list li strong { color:#f76b6a; font-size:22px; font-weight:bold; }


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

}

.db_style_01 .db_in .p1 { font-size:18px; margin-top:30px; }
.db_style_01 .db_in .p2 { font-size:22px; color:#f76b6a; font-weight:bold; margin-top:10px;  }

@media(max-width:1000px){
.db_style_01 .db_in .p1 { font-size:14px; margin-top:10px; }
.db_style_01 .db_in .p2 { font-size:18px; margin-top:5px; padding-bottom:8px; }
}

#mof_wrap.mode2 .db_in { background:#1a1a1a;  }
#mof_wrap.mode2 .db_style_01 .db_in strong {color:#fff; }
#mof_wrap.mode2 .db_style_01 .db_in span {  color:#fff;   }
#mof_wrap.mode2 .db_style_01 .db_in p { color:#7285bc;  }
#mof_wrap.mode2 .db_in h3 { font-size:18px; color:#fff; }




.mbs_inner_2 { display:flex; padding:20px; justify-content:space-around;    }
.mbs_inner_2 > div {   }
.mbs_inner_2 > div:first-child { margin-left:0; }
.mbs_inner_2 h4 { display:block; text-align:center; margin-bottom:10px; font-size:16px }

.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){

.mbs_inner_2 > div { margin-left:10px;  }
.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) { }
}



/*
.db_in { background:#fff; box-shadow:0px 0px 5px rgba(0,0,0,0.1); border-radius:10px; padding:20px; box-sizing:border-box; margin:15px 0; }
.db_in_grow { flex-grow:1; margin-right:20px;  }
.db_in h3 { font-size:18px; }

.db_style_01 { display:flex; justify-content:space-between;}
.db_style_01 .db_in { width:calc(100% / 4 - 20px); flex-shrink:0; flex-grow:0;  }
.db_style_01 .db_in strong { font-weight:300; font-size:14px; color:#000; display:block; }
.db_style_01 .db_in span { font-size:33px; color:#222;  display:block;  padding:5px 0; font-weight:700; }
.db_style_01 .db_in p { font-size:12px; color:#7285bc;  display:block; }

*/


.db_style_02 { display:flex; justify-content:space-between;}
/*
.db_style_02 > div:first-child { flex-grow:1; margin-right:25px;  }
*/
.db_style_02 .db_in { width:calc(100% / 2 - 15px); flex-shrink:0; }

.db_style_03 { display:flex; justify-content:space-between;}
.db_style_03 .db_in { width:calc(100% / 2 - 15px);  }


@media(max-width:1200px){
.db_in { background:#fff; box-shadow:0px 0px 5px rgba(0,0,0,0.1); border-radius:10px; padding:20px; box-sizing:border-box; margin:10px 0; }
.db_in_grow { flex-grow:1; margin-right:20px;  }
.db_in h3 { font-size:14px; }

.db_style_01 { display:flex; justify-content:space-between; flex-wrap:wrap; }
.db_style_01 .db_in { width:100%; flex-shrink:0; flex-grow:0;  padding:10px 15px; }
.db_style_01 .db_in strong { font-weight:300; font-size:14px; color:#000; display:block; }
.db_style_01 .db_in span { font-size:22px; color:#222;  display:block;  padding:1px 0; font-weight:700; }
.db_style_01 .db_in p { font-size:11px; color:#7285bc;  display:block; line-height:15px; }

.db_style_02 { display:flex; justify-content:space-between; flex-wrap:wrap;  }
.db_style_02 > div:first-child { flex-grow:1; margin-right:0px;   width:100%;}
.db_style_02 .db_in { width:100%; flex-shrink:0; }

.db_style_03 { display:flex; justify-content:space-between;  flex-wrap:wrap;  }
.db_style_03 .db_in {  width:100%;  }
}


.db_table { width:100%; margin:10px 0; border-collapse:collapse; }
.db_table thead { background:#f7f7f7; border:1px solid #ddd;  }
.db_table thead th { font-size:15px; font-weight:normal; padding:5px 0 6px 0; }
.db_table td { text-align:center; padding:9px 0; border-bottom:1px solid #ddd; white-space:nowrap;  font-size:15px; }

#mof_wrap.mode2 .db_table thead { background:#29365b; border:1px solid #29365b; color:#fff; }
#mof_wrap.mode2 .db_table td { color:#fff; border-bottom:1px solid #555;  }

@media(max-width:1000px){
.db_table { width:100%; margin:10px 0; border-collapse:collapse; }
.db_table thead { background:#f7f7f7; border:1px solid #ddd;  }
.db_table thead th { font-size:13px; font-weight:normal; padding:5px 0 6px 0; }
.db_table td { text-align:center; padding:9px 0; border-bottom:1px solid #ddd; white-space:nowrap;  font-size:13px; }

}


.notice_box { padding:30px 40px; }
.notice_box h3 { display:flex; justify-content:space-between; padding-bottom:15px; }
.notice_box h3 .btn_myinfo img { opacity:.5; width:30px; }
.notice_box ul li { border-top:1px solid #ddd; padding:10px 0;display:flex; justify-content:space-between;  align-items:center; }
.notice_box ul li a { font-size:16px; }
.notice_box ul li span.date1 { color:#999; font-size:14px; font-weight:300; }

#mof_wrap.mode2 .notice_box ul li { border-top:1px solid #555; }
#mof_wrap.mode2 .notice_box ul li a { font-size:16px; color:#fff; }
#mof_wrap.mode2 .notice_box h3 .btn_myinfo img {  -webkit-filter: grayscale(0) brightness(100%); filter: grayscale(0) brightness(100%);  opacity:1; }

@media(max-width:1000px){
.notice_box { padding:20px; }
.notice_box h3 {  display:flex; justify-content:space-between; padding-bottom:10px; }
.notice_box h3 .btn_myinfo img { opacity:.5; width:30px; }
.notice_box ul li { border-top:1px solid #ddd; padding:10px 0;display:flex; justify-content:space-between;  align-items:center; flex-wrap:wrap; }
.notice_box ul li a { font-size:14px; }
.notice_box ul li span { width:100%; }
.notice_box ul li span.date1 { color:#999; font-size:12px; font-weight:300; }
}

.mbs_inner ul { display:flex; justify-content:space-between; align-items:center; padding:5px 0;  margin-top:25px; }
.mbs_inner ul li { font-size:16px; color:#222; padding:5px 0; }
#mof_wrap.mode2 .mbs_inner ul li {  color:#fff;  }
.record_my_level { display:flex; }
.record_my_level > div { width:50%; }
.record_graph { background:#ddd; width:100%; height:30px; border-radius:15px; overflow:hidden; margin:0px 0 10px 0;  line-height:29px;  }
#mof_wrap.mode2 .record_graph { background:#444; }
.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%); }

@media(max-width:1000px){
.mbs_inner ul { display:flex; justify-content:space-between; align-items:center; padding:5px 0;  margin-top:25px; }
.mbs_inner ul:first-child { margin-top:10px;}
.mbs_inner ul li { font-size:14px; color:#222; padding:5px 0; }
.record_my_level { display:flex; }
.record_my_level > div { width:50%; }
.record_graph { background:#ddd; width:100%; height:25px; border-radius:15px; overflow:hidden; margin:0px 0 15px 0;  line-height:24px; font-size:12px; }
.record_graph: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%); }
}


.link_share > li span { display:flex; align-items:center; }
.link_share > li span #text_link { cursor:pointer;  }
.link_share > li span .copy_btn { background:#999; margin-left:10px; border-radius:10px; color:#222; font-size:14px; height:30px; border:0; padding:0 10px; cursor:pointer; }

.link_share span.link_url { display:flex;align-items:center;  flex-wrap:wrap;margin-top:15px;}
.link_share span.link_url img { width:18px; margin-right:5px; }
.link_share span.link_url #text_link {  font-weight:300; font-size:14px; color:#000;  }
#mof_wrap.mode2 .link_share span.link_url #text_link { color:#fff; }
#mof_wrap.mode2 .link_share span.link_url img {  -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); }
.link_share span.link_url .copy_btn { width:100%; background:#1871f0; color:#fff; border:0; margin-top:10px; border-radius:5px; padding:5px 0 6px; font-size:15px; }

.link_share ul.snslink { display:flex; margin-top:20px; }
.link_share ul.snslink li { width:30px; margin-left:7px; }
.link_share ul.snslink li img { width:30px; border-radius:15px; }