html, body{
	background-color:#000;
	width: 100%;
	height: 100%;
	margin: 0; 
	padding: 0;
}
img { width: 100%;vertical-align: bottom;}
/* 背景旋轉光 */
.bg_spin{
  pointer-events: none;
  position: fixed;
  top: -30%;
  width: 100%;
  height: 100vh;
  z-index: 1;
}

.bg_spin span{
  position: absolute;
  width: 2000px;
  height: 2000px;
  top: -100%;
  background-image: url('../images/bg_spin.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  z-index: -1;
  opacity: .5;
}
.bg_spin span:nth-of-type(1){
  right: 40%;
  animation: spin 10s linear 0s infinite normal;
}

.bg_spin span:nth-of-type(2){
  left: 40%;
  animation: spin 10s linear 0s infinite reverse;
}
@keyframes spin{
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}

header{
  background-color: #000;
  width: 100%;
  min-width: 1200px;
  position: relative;
  z-index: 99;
}
header a{
  color:#FFF;	
  font-size: 16px;
  font-weight: 900;
  text-decoration: none;
}
header a:hover{
	color:#a0d9f7;
	text-decoration: none;
}
.header_content{
	width: 1200px;
	height: 48px;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.header_content a + a{
  padding-left: 10px;
}

/*wrapper*/
.wrapper{
  position: relative;
  margin: auto;
  overflow: hidden;
  z-index: 80;
	background: url('../images/bg.png')no-repeat;
  background-size: 100% 100%;
}
.wrapper::before{
  content:"";
  width: 100%;
  height: 23%;
  position: absolute;
  left: 0px;
  bottom: -40px;
  z-index: 1;
  background: url('../images/triangle.png')no-repeat bottom;
  background-size: 100% 100%;
}
.non_pointer{
  pointer-events: none;
}
.shiny_ball{
  width: 390px;
  height: 125px;
  position: absolute;
  top: 35px;
  left: 0;
  right: 0;
  margin: auto;
  background: url("../images/top_bn_ball_0.png")no-repeat;
  background-size: 80%;
  background-position: top center;
  animation: top-ball .7s infinite alternate ease-in-out;
}
@keyframes top-ball {
  0%  {background-image: url("../images/top_bn_ball_0.png");}
  25% {background-image: url("../images/top_bn_ball_1.png");}
  50% {background-image: url("../images/top_bn_ball_2.png");}
  75% {background-image: url("../images/top_bn_ball_3.png");}
  100% {background-image: url("../images/top_bn_ball_4.png");}
} 
.shiny_arrow{
  width: 75px;
  height: 175px;
  position: absolute;
  top: 7%;
  background: url('../images/topbn_arrow_0.png') center no-repeat;
  background-size: 90%;
  animation: top-arrow .7s infinite alternate ease-in-out;
}
.shiny_arrow:nth-child(1){
  left: 12%;
}
.shiny_arrow:nth-child(2){
  right: 9%;
}

@keyframes top-arrow {
  0%  {background-image: url('../images/topbn_arrow_0.png');}
  34% {background-image: url('../images/topbn_arrow_1.png');}
  67% {background-image: url('../images/topbn_arrow_2.png');}
  100% {background-image: url('../images/topbn_arrow_3.png');}
}  


/* 閃光線 */
.s1_light{
  width: 100%;
  height: 100vh;  
  position: absolute;
  left: 0px;
  top: 0px;
  background: url(../images/light.png);
  background-position: 50% 50%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  animation: flash1 0.05s linear 1s infinite;
  filter: brightness(140%);
  opacity: 1;
}
/* 快閃 */
@keyframes flash1{
  0%{
    opacity: .7;
  }
  
  100%{
    opacity: 1;
  }
}
.top_bn{
  display: flex;
  flex-direction: column;
	position: relative;
  margin: auto;
  overflow: hidden;
  padding-bottom: 5%;
}
.au_logo{
  padding-top: 90px;
  max-width: 215px;
  margin: auto;
}
.logo{
  background: url("../images/au_logo_0.png")center no-repeat;
  background-size: 100%;
  margin: auto;
  width: 215px;
  height: 118px;
  padding-top: 35px;
  animation: top-logo .7s infinite alternate ease-in-out;
}
@keyframes top-logo {
  0%  {background-image: url("../images/au_logo_0.png");}
  100% {background-image: url("../images/au_logo_1.png");}
} 
.topbtn_group{
    width: 100%;
    max-width: 1920px;
    display: flex;
    justify-content: center;
    padding: 1% 0;
    position: relative;
    z-index: 79;
}
.topbtn_group a{
  width: 8%;
  max-width: 100px;
}
.topbtn_group a:nth-child(2){
  width: 20%;
  max-width: 270px;
}
.topbtn_group a:hover{
    /* transition:  1s linear; */
}
.topbtn_group a:nth-child(4){
  position: relative;
  background: url('../images/topbn_music.png')center no-repeat;
  background-size: contain;
}
.topbtn_group a:nth-child(4).off{
  background: url('../images/topbn_music_off.png')center no-repeat;
  background-size: contain;
}
.topbn_apply{
  animation: apply 0.7s infinite alternate ease-in-out;
}
@keyframes  apply {
  0%{filter: brightness(0.9);}
  50%{filter: brightness(1.4);}
  100%{filter: brightness(1.6);}
}
.topbn_apply:hover{
  animation:none;
}
.slogan{
  width: 80%;
  max-width: 800px;
  display: flex;
  justify-content: center;
  margin: auto;
  position: relative;
  z-index: 79;
}
/* Radio */
.radio-group{
  display: flex;
  justify-content: center;
  margin: auto;
  position: relative;
  /* padding-bottom: 3%; */
  margin-top: -40px;
}
.radio_pic{
  width: 85%;
}
.radio_line{
  position: absolute;
  top: 47%;

  /* add */
  display: flex;
  justify-content: center;
  align-items: center;
}
.radio_line:nth-child(2){
  width: 17.5%;
  height: 42%;
  left: 15%;
}
.radio_line:nth-child(3){
  width: 27%;
  height: 55%;
  top: 38.2%;
  right: 38.6%;
}
.radio_line:nth-child(4){
  right: 18.2%;
  width: 18.3%;
  height: 42.5%;
}
.center-circle {
  width: 50%;
  height: 50%;
  border-radius: 50%;
  /* position: absolute;
  top: 50%;
  left: 50%; */
  /* transform: translate(-50%, -50%); */

  position: relative;
}
.center-circle .circle-line {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  /* position: absolute; */
  /* top: 50%; */
  /* left: 50%; */
  /* transform: translate(-50%, -50%); */

  position: absolute;
  top: 0;
  left: 0;
  transform: scale(1.7);

  border: 2px solid #fff;
  -webkit-animation: zoomOut 0.7s infinite linear;
          animation: zoomOut 0.7s infinite linear;
}
.center-circle .circle-line.line1 {
  /* transform: translate(-50%, -50%) scale(1.2); */
  transform: scale(1.2);
}
.center-circle .circle-line.line2 {
  /* transform: translate(-50%, -50%) scale(1.3); */
  transform: scale(1.3);
}

@-webkit-keyframes zoomOut {
    100% {
      /* transform: translate(-50%, -50%) scale(1.5); */
      transform: scale(1.5);
      opacity: 0;
    }
    }
@keyframes zoomOut {
    100% {
      /* transform: translate(-50%, -50%) scale(1.5); */
      transform: scale(1.5);
      opacity: 0;
    }
}
/* Top_Char */
.role_group{
  width: 100%;
  max-width: 1920px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.role_char:nth-child(1){
  transform: translateX(-95%);
}
.role_char:nth-child(2){
  transform: translateX(76%);
}



.gotop {
  width: 100%;
  max-width: 70px;
  position: fixed;
  right: 10px;
  bottom: 30px;
  z-index: 10;
}
.goTopBtn {
  background-color: transparent;
  border: none;
  outline: none;
  cursor: pointer;
}
.fa-arrow-alt-circle-up {
  color: $primary;
}

/* .gotop {
  display: block;
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 999
} */

.gotop:hover {
  bottom: 50px;
  -webkit-filter: brightness(130%);
          filter: brightness(130%);
  -moz-transition: all .25s ease-in-out;
  -webkit-transition: all .25s ease-in-out;
          transition: all .25s ease-in-out;
  -moz-transition: all .25s ease-in-out;
  -webkit-transition: all .25s ease-in-out;
          transition: all .25s ease-in-out
}

.information{
  position: relative;
  z-index: 1;
}
.information::before{
  content: "";
  width: 100%;
  height: 100%;
  padding-top: 100px;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  background: url('../images/content-bg.png') center top repeat;
  background-size: 100%;
}
/* 標籤按鈕 */
.tab-btn{
  display: flex;
  justify-content: center;
}
.tab-btn .nav{
  display: flex;
  justify-content: center;
}
.nav-link{
  padding: 0 20px;
}
/*content*/
.content{
	position:relative;
	margin:auto;
	overflow: hidden;
	/* text-align: center; */
  padding-top: 20px;
  /* background: url("../images/pagebg.jpg") center top repeat; */
}
.btn { 
	background-image: url('../images/btn.png'); 
  background-repeat: no-repeat; 
  width: 271px;
  height: 53px;
	z-index: 10;
	display: inline-block;
}

.btn1 { background-position-y: 0;}
.btn2 { background-position-y: -75px;}
.btn3 { background-position-y: -150px;}
.btn4 { background-position-y: -224px;}
.btn5 { background-position-y: -300px;}

.btn:hover,
#tab-1:target ~ #tab > ul li:nth-child(1) a,
#tab-2:target ~ #tab > ul li:nth-child(2) a,
#tab-3:target ~ #tab > ul li:nth-child(3) a,
#tab-4:target ~ #tab > ul li:nth-child(4) a,
#tab-5:target ~ #tab > ul li:nth-child(5) a { background-position-x: -274px;}

.btn2{
  margin-left: 30px;
  width: 254px;
}
.btn3,.btn4,.btn5{margin-left: -30px;}
.btn3{width: 215px;}
.btn4{width: 235px;}
.btn5{width: 155px;}

#tab-1,#tab-2,#tab-3,#tab-4,#tab-5,#tab-6{
	font-size: 0;
	position: absolute;
}
#tab{
  width: 100%;
}

.breathe {
  width: 100%;
	max-width:1000px;
	overflow:hidden;
	position:relative;
	z-index:1;
	margin:30px auto;
  box-sizing: border-box;
	border:5px solid #ffcbcb;
	border-radius:55px;
	box-shadow: 0px 0px 20px #bb0000,0px 0px 10px #bb0000;
}

.breathe{
    animation: breathe 3500ms ease-in-out infinite alternate;
}

@keyframes breathe {
  0% { 
		border-color:#ffcbcb;
		box-shadow: 0px 0px 20px #bb0000,0px 0px 10px #bb0000;
  }
  14% { 
		border-color:#ffe8cb;
		box-shadow: 0px 0px 20px #bb5c00,0px 0px 10px #bb5c00;
  }
  28% { 
		border-color:#fffecb;
		box-shadow: 0px 0px 20px #bbb000,0px 0px 10px #bbb000;
  }
  42% { 
		border-color:#cbffd0;
		box-shadow: 0px 0px 20px #00bb09,0px 0px 10px #00bb09;
  }
  56% { 
		border-color:#cbf0ff;
		box-shadow: 0px 0px 20px #0061bb,0px 0px 10px #0061bb;
  }
  70% { 
		border-color:#cdcbff;
		box-shadow: 0px 0px 20px #4b00bb,0px 0px 10px #4b00bb;
  }
  84% { 
		border-color:#fdcbff;
		box-shadow: 0px 0px 20px #bb00b4,0px 0px 10px #bb00b4;
  }
  100% {
		border-color:#ffcbcb;
		box-shadow: 0px 0px 20px #bb0000,0px 0px 10px #bb0000;
  }
}

/* 頁籤ul */
#tab>ul{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
#tab>ul>li{
  list-style-type: none;
  display: inline-block;
	/* margin-right:-28px; */
}
#tab>ul>li>a{
  font-size: 0px;
}
/*頁籤div內容*/
#tab>div {
  clear:both;
  height: 0;
  overflow:hidden;
  visibility:hidden;
	opacity:0;
	transition:1s all ease;
}
/* span:target */
#tab-1:target,#tab-2:target,#tab-3:target,#tab-4:target,#tab-5:target,#tab-6:target{}
/*第一筆的底色*/
span:target ~ #tab > ul li:first-child a {}
span:target ~ #tab > div:first-of-type {
  visibility:hidden;
  height:0;
	opacity:0;
}

span ~ #tab > div:first-of-type,
#tab-1:target ~ #tab > div.tab-content-1,
#tab-2:target ~ #tab > div.tab-content-2,
#tab-3:target ~ #tab > div.tab-content-3,
#tab-4:target ~ #tab > div.tab-content-4,
#tab-5:target ~ #tab > div.tab-content-5,
#tab-6:target ~ #tab > div.tab-content-6{
  visibility:visible;
  height:auto;
	opacity:1;
}
.content-1-4{
  background: url('../images/page1_4.png') bottom no-repeat;
}
.content-5{
  background: url('../images/page5_bg.png')bottom no-repeat;
}
.content-1-4, .content-5{
  background-size: cover;
  background-position: top;
  width: 100%;
  margin: 30px auto 0 auto;
  padding: 150px 0 15px 0;
}
.content-5{
  margin-bottom: 50px;
}
/* location_info */
.location_info {
    width: 100%;
    max-width: 920px;
    margin: auto;
}
/* 中間選單 */
.navbtn {
    width: 100%;
    text-align: center;
}

.navbtn ul {
    display: flex;
    justify-content: center;
    vertical-align: middle;
    padding-bottom: 30px;
}

.location_info .location-btn { 
    background: url('../images/page1_4_btn.png'); 
    background-repeat: no-repeat; 
    width: 128px;
    height: 110px;
    z-index: 10;
    display: inline-block;
}
.location_info .btn7 { background-position-x: 0;}
.location_info .btn8 { background-position-x: -128px;}
.location_info .btn9 { background-position-x: -255px;}

.location-btn:hover,
#tab-7:target ~ #tab > ul li:nth-child(1) a,
#tab-8:target ~ #tab > ul li:nth-child(2) a,
#tab-9:target ~ #tab > ul li:nth-child(3) a { background-position-y: -111px;}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active{ background-position-y: -111px;}

.tab-pane {
    display: none;
}
.tab-pane.active{
    display: block;
}
.loc_container{
    width: 100%;
    max-width: 440px;
    margin: auto;
    position: relative;
}
.map{
    width: 36px;
    height: 54px;
    position: absolute;
    top: 200px;
    right: 40px;
}
.map div{
    width: 100%;
    height: 100%;
}
/* location_info End*/

/* .content-5{
  background: url('../images/page5_bg.png')no-repeat;
  background-size: cover;
  background-position: top;
  width: 100%;
  max-width: 930px;
  margin: 30px auto 0 auto;
  padding-top: 110px;
} */
.photo_wall{
  width: 100%;
  max-width: 900px;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.photo_wall .breathe{
  display: inline-block;
  width: 230px;
  overflow:hidden;
  position:relative;
  z-index:1;
  margin:15px;
  border:2px solid #ffcbcb;
  border-radius:24px;
  box-shadow: 0px 0px 20px #bb0000,0px 0px 10px #bb0000;
}
.photo_wall .breathe:nth-child(n+2){
  box-shadow: 0px 0px 20px #bb00b2,0px 0px 10px #bb00b2;
}
.photo_wall .breathe:nth-child(n+3){
  box-shadow: 0px 0px 20px #00eaff,0px 0px 10px #00eaff;
}
/* .photo_wall .breathe {
  animation: breathe 3500ms ease-in-out infinite alternate;
} */
.photo_wall .breathe a{
  display: inline-block;
}
.photo_wall .breathe img{
  width: 100%;
  vertical-align: bottom;
}
.lg{
  width: 50%;
}

.lg-on{
  overflow: hidden;
}
.lg-outer .lg {
  position: relative;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
  max-width: 50%;
  max-height: 100%;
}
/* #footer .container{
  max-width: 1920px;
}
#footer .copyright  li:nth-child(3){
  display: flex;
  align-items: center;
}
#footer .copyright li:nth-child(3) img {
  max-width: 60px;
  max-height: 100%;
} */
.footer{
  width: 100%;
  background-color: #fff;
}
.sponsor .container{
  max-width: 1000px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding:8px 5.5%;
  margin: auto;
}
.footer .container{
  max-width: 1000px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding:6px 0;
  margin: auto;
}
.items{
  padding-left: 10px;
}
.items:nth-child(3){
  display: flex;
}
.items .pic{
  width: 56px;
}
.items .pic img{
  width: 100%;
  vertical-align: top;
}
.items .txt{
  max-width: 256px;
  font-size: 0.7rem;
  text-align: justify;
  padding-left: 3px;
}
.sponsor{
  width: 100%;
  background-color: #999;
}

@media screen and (max-width:900px) {
  .shiny_ball {
    top: 3%;
  }
  .au_logo {
    padding-top: 70px;
  }
  .topbtn_group a {
    width: 10%;
  }
  .topbtn_group a:nth-child(2) {
    width: 26%;
  }
  /* .slogan {
    width: 80%;
  } */
  .radio-group {
    width: 75%;
    margin-top: -40px;
  }
  .radio_line{
    top: 48.5%;
  }
  .radio_line:nth-child(3) {
    top: 39%;
  }
  .role_char:nth-child(1){
    transform: translate(-110%,-17%) scale(1.1);
    width: 29%;
    max-width: 300px;
  }
  .role_char:nth-child(2){
    transform: translate(100%,-11%) scale(1.1);
    width: 28%;
  }
  .role_group{
    display: none;
  }
}
@media screen and (min-width:576px) {
  .container, .container-md, .container-sm{max-width: 0;}
}
/* @media screen and (min-width:650px) {
  .role_char:nth-child(1){
    transform: translate(-84%,-5%);
    width: 100%;
    max-width: 420px;
  }
  .role_char:nth-child(2){
    transform: translate(85%,-2%);
    width: 100%;
    max-width: 420px;
  }
} */