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


.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 / 115;}
.cr_logo ul li.nada{width: calc(100% * 600/1073 * var(--scale));aspect-ratio: 600 / 115;}
.cr_logo ul li{width: calc(100% * 473/1073 * var(--scale)); aspect-ratio: 473 / 115;}
.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:500px){
  .copyright .content{ padding:5vw 1vw 3vw;}
  .cr_logo{width:100%;}
  .cr_logo ul{flex-wrap: wrap;}
  .cr_logo ul li{--scale: .9;}
  .cr_logo ul li.uj{width:50%;  margin:0;  margin-bottom:1vw;}
  .cr_logo ul li.nada{ margin-right:0;}

}



.level{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; transform: translate(.75rem, -.2rem); display:flex; flex-direction:column; flex-shrink:1; opacity: .4;}
.level ul li{width:fit-content; 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:280px; 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{flex-wrap: wrap;}
  .level ul li{max-width:300px;  white-space:normal;}

  .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:240px){
  .level ul li{word-break: initial;}
}