.my_office_main { padding:20px 0px;  max-width:100%; width:100%; display:flex; flex-wrap:wrap; }
.mbs_01 { border-radius:10px;  width:100%;  margin:20px 0px;  background:#fff; font-size:14px; 
box-shadow: 2px 2px 7px 7px #eee; padding:30px 35px; }

.my_office_flex2 { display:flex; justify-content:space-between; width:100%; }
.my_office_flex2 > div:first-child { flex-grow:1; margin-right:40px; }
.my_office_flex2 > div:last-child { width:720px; flex-shrink:0; }

.link_copy { display:flex; justify-content:space-between; }
.link_copy #text3 { font-size:15px; text-decoration:underline; }
.link_copy .copy_btn { font-size:13px; border:0; background:#999; color:#fff; border-radius:5px; margin-left:10px; 
padding:2px 4px}
.link_copy > ul { display:flex; justify-content:space-between; }

.link_copy .sns_link { text-align:right; }
.link_copy .sns_link h2 { display:flex; align-items:center; justify-content:right; font-size:15px; font-weight:normal; } 
.link_copy .sns_link h2 img { width:18px; margin-right:5px; opacity:.8; }
.link_copy .sns_link ul { margin-top:10px; display:flex; align-items:center; }
.link_copy .sns_link ul li { margin-left:10px; background:#eee; border-radius:23px; height:46px; width:46px;
display:flex; justify-content:center; align-items:center; }
.link_copy .sns_link ul li img { border-radius:50%; }

.link_copy .sns_link ul li:nth-child(1) { background:#eeedfd; }
.link_copy .sns_link ul li:nth-child(2) { background:#e0f9fc; }
.link_copy .sns_link ul li:nth-child(3) { background:#fceaea; }
.link_copy .sns_link ul li:nth-child(4) { background:#e5f8ed; }
.link_copy .sns_link ul li:nth-child(5) { background:#f8f0e5; }


.mbs_01 h1 { font-size:18px; color:#333; font-weight:500; margin-bottom:20px; }
.mbs_notice {  display:flex; align-items:center; max-width:100%;  }
.notice_title { background:#FFC107; color:#fff; height:40px; width:40px; text-align:center; line-height:38px; 
border-radius:10px; font-size:18px; margin:0 20px; flex-shrink:0; }
.notice_article { padding:5px 0; flex-shrink:1; }
.notice_article li {  text-overflow: ellipsis; overflow:hidden; line-height:22px;  height:23px}
.notice_article a { font-size:16px; padding:0; margin:0; color:#777; ; }





.mbs_main_info { background:#fff; box-shadow: 2px 2px 7px 7px #eee; display:flex; align-items:center; }
.info_01 { border-right:1px solid #ddd; width:200px; text-align:center; color:#555; }
.info_01 strong { font-size:20px; display:block;  }
.info_01 span { }
.info_02 { padding:0 10px; }
.info_02 ul { display:flex;  }
.info_02 li { padding:0 0 0 20px; }
.info_02 li span { font-size:16px; color:#aaa; display:inline-block; }
.info_02 li span:first-child { margin-right:15px;  }
.info_02 li strong { font-size:18px; font-weight:400; color:#555; }

.record_my_level { display:flex; }
.record_my_level > div { width:50%; }
.record_01 { display:flex; }
.record_01 img { background:#aaa; width:50px; padding:10px; border-radius:25px; margin:0 20px; }
.record_01_01 span {  }
.record_01_01 strong { display:block; font-size:18px; }
.record_graph { background:#ddd; width:100%; height:30px; border-radius:15px; overflow:hidden; margin-top:30px; }
.graph_fill { width:60%; height:100%; background:#fdab5d; color:#fff; text-align:center; line-height:29px; }


.record_table { overflow-x:auto; }
.table_s01 { width:100%;border-bottom:1px solid #ddd; }
.table_s01 th, .table_s01 td { padding:10px 15px; font-size:16px; text-align:right; background:#fff;
border-top:1px solid #ddd; border-left:1px solid #ddd; }
.table_s01 th:first-child, .table_s01 td:first-child { border-left:0; }
.table_s01 th { background:#eeedfd; color:#555;  font-weight:400; text-align:center; }
.table_s01 .point_td { background:#f5f5f5; margin:5px;text-align:center; }
.table_s01 .total_td { background:#dfddff; }
.mbs_table_h1 { display:flex; justify-content:space-between; }
.mbs_table_h1 span { font-size:12px; font-weight:normal; }




.m_top { display:none; border-bottom:1px solid #ddd; }









@media(max-width:1700px){
.mbs_main_info { background:#fff; box-shadow: 2px 2px 7px 7px #eee; display:flex; align-items:center;  }
.info_01 { border-right:1px solid #ddd; width:170px; text-align:center; color:#555; }
.info_02 { padding:0 0px; }
.info_02 ul { display:block;  }
.info_02 li span { margin:0; display:block; }
.info_02 li span:first-child { margin:0; }
}


@media(max-width:1600px){
.link_copy { flex-wrap:wrap; }
.link_copy > div { width:100%; }
.link_copy .sns_link h2 {  justify-content:left; margin:10px 0 5px; } 
.link_copy .sns_link ul { padding:0; margin:0; }
.link_copy .sns_link ul li:first-child { margin-left:0; }
.my_office_flex2 > div:first-child { width:100%; }
.my_office_flex2 > div:last-child { width:400px; flex-shrink:1; max-width:100%;  }
.mbs_main_info { display:block; }
.info_01 { border-right:0; width:100%; background:#f5f5f5; border-radius:5px; padding:20px 0;  }
.info_02 { padding-top:20px; }
.info_02 li { display:flex; align-items:center; justify-content:space-between; }
.info_02 li span { width:49%; }
.info_02 li span:first-child { text-align:right; }

}





@media(max-width:1000px){

.my_office_flex2 { display:flex; flex-wrap:wrap; }
.my_office_flex2 > div:first-child { width:100%; margin:10px;}
.my_office_flex2 > div:last-child { width:100%; max-width:100%;  }


.my_office_flex2 > div:first-child { margin:10px; }

.m_top { display:block; padding-left:50px; background:#fff; height:55px; }
.m_top h1 img { height:50px; }
#pcver .pcver_menu { display:none; }
.top_main_menu { display:none; }
.my_office_top { display:none; }
.top_area_2 { padding:6px 55px; height:70px; border-bottom:1px solid #eee; }

.contents_body { background:#fff; padding:0px;}
.subpage_con { background:#fff; padding:0px; box-shadow:none;  border-radius:0px; margin-top:0px; }




.my_office_main { padding:10px; }
.mbs_01 {  margin:10px 10px; padding:20px; }
.notice_title {  margin:0 10px 0 0px; }
.record_01 img { margin:0 10px 0 0; width:45px;  }
.record_graph { margin-top:20px }

.table_s01 th, .table_s01 td { padding:8px 5px; font-size:12px; text-align:right; background:#f5f5f5; white-space:nowrap; }
.table_s01 th { background:#527f97; color:#fff;  font-weight:400; text-align:center; }
.table_s01 .point_td { background:#e3f3fb; margin:5px;text-align:center; }
.table_s01 .total_td { background:#193b56; }
.mbs_table_h1 { display:flex; justify-content:space-between; }
.mbs_table_h1 span { font-size:12px; font-weight:normal; }



.my_office_footer { padding:10px 10px 15px 10px;}
.my_office_footer li { border-left:0; line-height:11px; height:11px; font-size:10px; padding:0; }

.sub_layout_left { display:none; }


#my_office_layout .opacity_black { display:flex; }

#contents { width:100%;  }

#my_office_layout .my_office_layout_contents {  margin:0px; }


.btn_close_wing { display:block; position:absolute; top:20px; right:20px; }
.btn_close_wing span { color:#fff; font-size:30px; font-weight:500; display:block; cursor:pointer; }
.folding_menu_btn { z-index:2; display:flex; align-items:center; position:absolute; top:5px; left:5px;
width:45px; height:45px; /*background:rgba(0,0,0,.6); */ background:#fff; }
.folding_menu_btn ul { width:25px; margin:0 auto; }
.folding_menu_btn ul li { height:2px; width:25px; background:#aaa; margin-top:6px; }
.folding_menu_btn ul li:first-child { margin:0; }


.my_office_main .today_new ul { padding:10px 10px; display:flex; flex-wrap:wrap;  justify-content:space-between; }
.my_office_main .today_new li {  width:49%;  font-size:15px; display:inline-block; display:flex; justify-content:space-between; padding:10px 10px 10px 10px; border-bottom:1px solid #eee; }





.menu_list .btn_go_home { padding:20px; margin-top:20px;  background:#fff; }
.menu_list .btn_go_home a { padding:10px; background:#eee; display:block; text-align:center; 
border-radius:5px; font-size:15px; 
display:flex; align-items:center; justify-content:center; color:#555; width:100%; }
.menu_list .btn_go_home a:hover { background:#eeedfd;  }
.menu_list .btn_go_home a img { width:15px; margin-right:10px; }


}




@media(max-width:800px){
.lay_pop { left:5% !important; top:10px !important; max-width:90% !important; }
}




























/* .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:0px 0px 5px rgba(0,0,0,0.2); border-radius:5px; 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 ul { display:flex; flex-wrap:wrap; margin-top:10px; }
.db_style_01 .db_in ul li { position:relative; width:calc(100% / 2); padding:10px 0 10px 55px; line-height:20px; }
.db_style_01 .db_in ul li i { position:absolute; background:#4cc96c; width:40px; height:40px; display:block; left:0; top:15px; border-radius:5px; }
.db_style_01 .db_in ul li:nth-child(2) i { background-color:#ff9255; }
.db_style_01 .db_in ul li:nth-child(3) i { background-color:#fed442; }
.db_style_01 .db_in ul li:nth-child(4) i { background-color:#23cce1; }
.db_style_01 .db_in ul li:nth-child(5) i { background-color:#ff797b; }
.db_style_01 .db_in strong { font-size:14px; color:#333; display:block;  font-weight:normal ;}
.db_style_01 .db_in span { font-size:20px; color:#333;  display:block;  padding:5px 0; font-weight:700; }

.db_style_01 .db_in ul.bonus { display:flex; flex-wrap:wrap; margin-top:10px; }
.db_style_01 .db_in ul.bonus li { position:relative; width:calc(100% / 2); padding:10px 0 10px 0px; line-height:20px; }
*/


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

@media(max-width:1000px){
.db_style_01 .db_in .p1 { font-size:14px; }
.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; }
.mbs_inner_2 p { margin-top: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){

.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; }