/* footer copyright */
footer{color:#aaa; font-size:.75rem; font-family: 'Noto Sans TC', sans-serif;}
footer.block_content{
  width:100%; min-height: initial; padding: 0; background:#2c2c2e; 
  border-bottom:0;  
  display: flex; flex-direction: column; justify-content: center; align-items: center; 
  position: relative;
}


.copyright{width:100%; position: relative;}

.copyright .content{
  width:100%; max-width:1200px; margin: 0 auto; padding:3% 5% 1.5%;
  display: flex; justify-content:space-around; align-items: flex-start; flex-wrap:wrap;
}

.cr_logo{width:100%; margin-bottom:2vw; display: flex; justify-content:center; align-items: center; order:1;}
.cr_logo ul{width:95%; padding:0; display: flex; justify-content:space-around; align-items: stretch;}
.cr_logo ul li{
  --scale: .8;
  margin: 0 2%; background-repeat: no-repeat; background-size: contain;
}
.cr_logo ul li.uj {width: calc(100% * 383/1073 * var(--scale)); aspect-ratio: 383 / 128;}
.cr_logo ul li.nada{width: calc(100% * 598/1073 * var(--scale));aspect-ratio: 598 / 128; transform: translateY(-0.2rem);}
.cr_logo ul li{width: calc(100% * 473/1073 * var(--scale)); aspect-ratio: 473 / 128;}
.cr_logo ul li.uj{background-image: url(../../images/svg/copyright/logo_uj.svg);}
.cr_logo ul li.nada{background-image: url(../../images/svg/copyright/logo_nada.svg);}
.cr_logo ul li.se{background-image: url(../../images/svg/copyright/logo_se.svg);}

@media (max-width:1200px){
.cr_logo ul li.nada{transform: translateY(-.2vw);}
}
@media (max-width:500px){
  .copyright .content{ padding:5vw 1vw 3vw;}
  .cr_logo{width:100%;}
  .cr_logo ul{flex-wrap: wrap; justify-content: space-evenly;}
  .cr_logo ul li{--scale: .9;}
  .cr_logo ul li.uj{ margin-left: 20%; margin-right: 20%; margin-bottom:1vw;}
  .cr_logo ul li.nada{ margin-right:0;}

}



.level{max-width: 100%; display:flex; justify-content: center;  order:3;}

.level .icon{
  height: clamp(20px, 12vw, 43px); margin-bottom:.5rem;
  background-repeat: no-repeat;
  background-position:  left top;
  background-size: auto 100%;
 }
 .ico_level{
   aspect-ratio: 1/1;
   background-image: url(../../images/svg/copyright/level.svg);
 }
 .ico_pc{
   aspect-ratio: 84/78; margin-right: clamp(5px, 1vw, 15px);
   background-image: url(../../images/svg/copyright/pc.png);
 }

.level ul{width:fit-content; max-width: 100%; transform: translate(.75rem, -.2rem); display:flex; flex-direction:column; flex-shrink:1; opacity: .4;}
.level ul li{width:fit-content; max-width: 100%; white-space: nowrap; position: relative;}
.level ul li::before{content: "•"; margin:0 .2rem 0 0; position:absolute; left:0; transform: translateX(-100%);}


.util{order:2;}
.util ul{width:100%; max-width:400px; margin:0 auto; display: flex; justify-content:space-around; align-items: center;}
.util ul li{ width:fit-content; font-size: 1rem; position: relative;}
.util ul li:nth-last-of-type(1){margin-right:0;}
.util ul li a{padding:.25rem 0; color:#fff; opacity: .5; position: relative;}
.util ul li a:hover{opacity: 1;}
.util ul li::after{
  width:100%; height:1px;  content: ""; display: block; 
  background:rgba(170, 170, 170, 1);
  /* transform-origin: left; */ transform: scaleX(0);
  transition: transform .2s ease-in-out; 
  clip-path: polygon(0 0, 100% 0, calc(100% - 2px) 100%, 2px 100%);

}
.util ul li:hover::after{ transform: scaleX(1); }

footer .info{width:100%; padding-bottom:1rem; font-size:.7rem; text-align:center;opacity: .4;}
footer .info p{padding-top:.25rem}


@media (max-width:500px){
  .util{margin-bottom: 2vw;}
  .level{width: 100%; flex-wrap: wrap; overflow: hidden;}
  .level ul{width: 100%;}
  .level ul li{ width: 93%; white-space: initial; word-break: break-all;}

  .level .icon{margin-bottom: 0;}
  .ico_level{ margin-right: 1vw;}

}
@media (max-width:400px){

  .util ul li{ width:initial; font-size: .8rem;}
  
  .level .icon{ margin-bottom: 2vw;}
  .ico_level{ margin-right: 0;}


}


@media (max-width:300px){
    .util ul {
      text-align: center;
      justify-content: space-around;
      align-items: center;
      flex-wrap: wrap;
    }
  .util ul li{ width:50%; font-size: .8rem;}

  footer .info{ width: 96%; margin: 0 auto;}

}