@charset "utf-8";
/*mixin - cont_box */


.main-inbox {padding: 1.25rem; margin-bottom: 3rem;}  

.notice dl{display: flex;}
.notice dl dt{ width: 100px;}
.notice dl dt > i {color:var(--primary-color); font-weight: bold; margin-right:5px; }
.notice dl dd{flex: 1; position:relative; padding-right: 100px;}
.notice dl dd em {font-size: 0.8125rem; color:var(--gray-60); margin-right: 15px;}
.notice dl dd .more {position:absolute; right:0; font-size: 0.8125rem;}
.notice dl dd > a{color:var(--black)}
.notice dl dd > a:hover{text-decoration: underline;}

section.main_section1 {position:relative;margin-bottom: 30px;}
section.main_section2 {position:relative; margin-bottom: 30px;}
.mainbox01 > ul{display: flex; gap: 0.625rem;}
.mainbox01 > ul > li{flex: 1;width: calc((100% - 3rem) / 3); border-radius: var(--radi-15); background: var(--primary-gradi); padding:1.5625rem 1.25rem; min-height: 150px; color:var(--white); box-shadow: var(--box-shadow-base);}
.mainbox01 > ul > li:nth-child(2){background: linear-gradient(70deg, #75CDFF, #0495E7);}
.mainbox01 > ul > li:nth-child(3){background: linear-gradient(70deg, #C293FF, #0495E7);}
.mainbox01 > ul > li > p { display: flex;justify-content: space-between;  align-items: center; gap: 0.625rem;}
.mainbox01 > ul > p span {white-space: nowrap; }
.mainbox01 > ul > li > h3{color:var(--black); font-weight: 600;margin-bottom: 15px;}
.mainbox01 > ul > li > p.link-icon {flex:1; justify-content: center;}
.mainbox01 > ul > li > p.link-icon img{width:30px; height: 30px;}
.mainbox01 > ul > li > p.link-copy {background: var(--white); color:var(--black); font-size: 0.875rem; border-radius: 3px; padding:0rem .5rem; margin-top: 8px;
position:relative; padding-right: 60px;}
.mainbox01 > ul > li > p.link-copy > input[type=text] {border:0;width: 100%;text-overflow: ellipsis;}
.mainbox01 > ul > li > p.link-copy > a.capy_btn {position:absolute; right:8px; color: var(--primary-color); font-weight: bold;}

.pointbox > ul > li{display: flex;    justify-content: space-between; font-size: 0.875rem;}

.mainbox02 ul {display: flex; gap: 0.625rem;}
.mainbox02 ul li {width: calc((100% - 1.25rem) / 2);border-radius: var(--radi-15); background: var(--white); height: auto; min-height: 340px;  padding:1.5625rem 1.25rem;box-shadow: var(--box-shadow-base);  }
.mainbox02 ul li > h3 {color:var(--black); font-weight: bold; font-size: 1.25rem;margin-bottom: 30px;}

.mbs_inner_2 { display:flex; padding:20px; justify-content:space-around;  position:relative  }
.mbs_inner_2 .pie-chart h4 {position:absolute;right: 70px;border:1px solid var(--primary-color);background: #DCF0FC;color:var(--primary-color);
    border-radius: 3px;padding: 0 .5rem;top: 10%; right:-50%; line-height: 30px; font-size: 0.8125rem; width: 80px; text-align: center; }
.mbs_inner_2 .pie-chart h4:after{
    position: absolute;
    left: 0;
    top: 10%;
    width: 0.625rem;
    height: 0.625rem;
    background-color: #DCF0FC;
    border-top: 1px solid var(--primary-color);
    border-left: 1px solid var(--primary-color);
    content: '';
    transform: rotate(-45deg) translateX(-80%);
    }
.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) { }

  .M-tbl th { color: var(--black); font-weight: bold; text-align: center;border-bottom:1px solid var(--gray-base); padding: 10px 0px; font-size: 0.9375rem; }
  .M-tbl{ width:100%;border-top:1px solid #000; margin:10px 0; }
  .M-tbl td{ padding:8px 8px;border-bottom:1px solid var(--gray-base); font-size: 0.875rem;text-align: center;}
  .M-tbl td a {color:#000; font-size: 0.875rem; }
  .M-tbl td a:hover{text-decoration:underline}
  .M-tbl tr:hover td{ background:#fafafa;}







@media all and (max-width:1280px){



}

@media all and (max-width:768px){

    .mainbox01 ul, .mainbox02 ul {display: block;}
    .mainbox01 ul li, .mainbox02 ul li {    width: calc((100% - 0rem) / 1); margin-bottom: 0.625rem;}    
    .mainbox02 ul li {height: auto; min-height: auto;}
}


@media all and (max-width:640px){
    
.notice dl{display: block;}
.notice dl dt {margin-bottom: 5px;}
.notice dl dd em {display: block;}

}









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