/* footer copyright */

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:4% 5% 2% 5%;
  display: flex; justify-content:space-around; align-items: flex-start; flex-wrap:wrap;
}

.cr_logo{width:28%; margin-bottom:2vw; display: flex; justify-content:center; align-items: center;}

.cr_logo svg{
  width:100%;
  background: url(../images/logo_uj.svg) no-repeat center center;
}


.level{display:flex; justify-content: center;}
.level .icon{ width:43px; margin-bottom:.5rem;}
.level .icon svg{width:100%; background: url(../images/icons/level.svg) no-repeat center center;}
.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 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: .8;}
.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); }

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


/* 回頂端按鈕 */
.go_top{
  width:fit-content; height:fit-content;
  opacity:0; cursor: pointer;
  position: fixed; right:0; bottom:3%; z-index: 999;
  transform: translateX(100%);
  z-index: 99;
}
.go_top .btn{width:42px; height:42px; background-color:rgba(230, 230, 230, 1); border-radius:21px; border:5px solid var(--block-title-color-wt-bg); transform-origin: bottom;}

.go_top svg{ width: 100%; height: 100%; mask-image: url(../images/svg/up.svg); mask-repeat: no-repeat; background-color:var(--block-title-color-wt-bg);}

.go_top.active{ right:2%; transform: translateX(0%); opacity:.5;}

.go_top.active.end{position: absolute; bottom:initial; top: 10%;}

.go_top.active:hover{transform: translateY(-10%);}
.go_top.active:hover .btn{height:60px;}


.go_top.active::before{
  content:""; width:4px; height:0; background-color:rgba(34,34,36,1); display: block;
  position: absolute; left:50%; top:30%; z-index: 99;
  transform: translateX(-50%); transform-origin:top; border-radius:2px; transition: .2s;
}

.go_top.active:hover::before{ height:50%; top:28%;}



/* mobile */
@media (max-width:800px){ 

  /* 回頂端按鈕 */
  .go_top{width:42px; height:fit-content; background-color:rgba(0, 0, 0, 1); border-radius:21px 0 0 21px;}
  .go_top .btn{width:36px; height:36px; background-color:rgba(230, 230, 230, 1); border-radius:21px; border:7px solid rgba(0,0,0,1); transform-origin: bottom;}
  .go_top.active{ right:0; transform: translateX(0%);}
  .go_top.active::before{width:3px; left:42%; top:33%;}
  .go_top.active:hover::before{ top:26%;}  
}


@media (max-width:500px){
  .cr_logo{margin:0;}
  .cr_logo ul{flex-wrap: wrap; justify-content:space-between;}
  .cr_logo ul li:nth-of-type(1){width:44%; margin:initial; order: 2;}
  .cr_logo ul li:nth-of-type(2){width:45%; margin:0 20% 3vw 20%; order: 1;}
  .cr_logo ul li:nth-of-type(3){width:52%; order: 3;}


  .level{flex-wrap: wrap;}
  .level ul li{max-width:300px; white-space:normal;}  

}
@media (max-width:400px){
  .util ul li{ width:initial; font-size: .8rem;}
  .level .icon{ width:10vw; min-width:20px;}
}

@media (max-width:240px){
  .level ul li{word-break: initial;}
}