@import url("reset.css");
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;500&family=Noto+Serif+TC:wght@300&display=swap');

html, body{
	width: 100%;
	height: 100%;
	//font-family: Arial, "儷黑 Pro", "LiHei Pro", "微軟正黑體", "Microsoft JhengHei", "標楷體", sans-serif;	
	
	background: #1a333d;
}


body{
	position: relative;
	background-size: cover;
	min-height:100%;
}

.for_m{
	display: block;
}

.for_pc{
	display: none;
}

.clearBoth{
	clear: both;
}


.clearfix:after{
	display: block;
	visibility: hidden;
	clear: both;
	height: 0;
	content: "";
}

h2,p,a{
	font-family: 'Noto Serif TC', serif;
}

h1,h3,span{
	font-family: 'Noto Sans TC', sans-serif;
}


a.styleBtn{
	width:fit-content;
	height: auto;
	padding: 8px 12px;
	border:1px solid #038cbe;
	text-align: center;
	color: #038cbe;
	text-decoration: none;
	transition:all .5s ease-in-out;
	-webkit-transition:all .5s ease-in-out;
	-moz-transition:all .5s ease-in-out;
	margin-right: 15px;
}

a.styleBtn:hover{
	color: #15a6db;
	border:1px solid #15a6db;
}


.chatRobot {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 90%;
  padding-top: 100%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}


.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}


.chatRobotBox{
	position: absolute;
	  overflow: hidden;
	  width: 89%;
	  height:100%;
	  top:0;
	  right:0;
	  //padding-top: 100%; 
}


.rsp-iframe {
  position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
}

#loading{
	width: 100%;
	height: 100%;
	background: #000;
	z-index: 999999;
	position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

#loading img{
	width: 40%;
	height: auto;
	position: absolute;
	top:0;
	left: 0;
	bottom: 0;
	right: 0;
	margin: auto;
}

ul, ol{
	margin-left:0;
}

#modalWrapper{
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.6);
	z-index: 99999;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	transition: all .5s ease-in-out;
	display: flex;
}

#modalWrapper .modalBox{
	width:90%;
	height:auto;
	max-height:80%;
	margin:auto;
	display: flex;
	position: relative;
}

#modalWrapper .modalBox.fitHeight{
	height:fit-content;
}

#modalWrapper .modalBox .modalBody{
	width: 100%;
	height: auto;
	position: relative;
	background: #132232;
	overflow-y: auto;
}

#modalWrapper .modalBox  a.closeModalBtn{
	position: absolute;
	top:-30px;
	right:0px;
	width:30px;
	height: 30px;
	display: flex;
	background:#132232;
}

#modalWrapper .modalBox  a.closeModalBtn img{
	width:60%;
	height:auto;
	margin:auto;
}

#modalWrapper .modalBox .modalBody .modalContent{
	width:100%;
	height:100%;
	overflow: auto;
}


#modalWrapper .modalBox .modalBody .modalContent iframe{
	width:100%;
	height:auto;
	min-height: 250px;
}

#modalWrapper .modalBox .modalBody .modalContent .modalInside{
	width:100%;
	height:100%;
}

#modalWrapper .modalBox .modalBody .modalContent .awardContent{
	padding:30px;
	color:#cecece;
}

#modalWrapper .modalBox .modalBody .modalContent .awardContent h3{
	font-size: 1.5rem;
	line-height: 1.3;
	margin-bottom: 1rem;
	font-weight: 300;
}

#modalWrapper .modalBox .modalBody .modalContent .awardContent h3 span{
	font-size: 1.1rem;
}

#modalWrapper .modalBox .modalBody .modalContent .awardContent h5{
	font-size: 1.2rem;
	line-height: 1.3;
	margin-bottom: 1rem;
	font-weight: 500;
	color: #4682B4;
}

#modalWrapper .modalBox .modalBody .modalContent .awardContent ul {
	list-style: square;
	margin-left: 23px;
}

#modalWrapper .modalBox .modalBody .modalContent .awardContent ul li{
	padding:.3rem 0;
	font-family: 'Noto Serif TC', serif;
	line-height: 1.4;
}

#modalWrapper .modalBox .modalBody .modalContent .awardContent.noUlStyle ul{
	list-style: none;
	margin-left: 0;
}

#modalWrapper .modalBox .modalBody .modalContent .awardContent ul li a{
	color: #4682B4;
	line-height: 1.4;
}

#modalWrapper .modalBox .modalBody .modalContent .awardContent ul li a:hover{
	color: #8382f6;
}

#modalWrapper .modalBox .modalBody .modalContent .awardContent p{
	line-height: 1.4;
	margin-bottom: .5rem;
}

#modalWrapper .modalBox .modalBody .modalContent .awardContent form{}

#modalWrapper .modalBox .modalBody .modalContent .awardContent form .form-group{
	display: flex;
	padding:3px;
	flex-direction: column;
	/* justify-content: center; */
}

#modalWrapper .modalBox .modalBody .modalContent .awardContent form .form-group label{
	width:130px;
	font-family: 'Noto Serif TC', serif;
	line-height: 1.4;
	margin-bottom:.5rem;
}

#modalWrapper .modalBox .modalBody .modalContent .awardContent form .form-group input,
#modalWrapper .modalBox .modalBody .modalContent .awardContent form .form-group textarea{
	padding:8px 5px;
	border: 1px solid #4682B4;
	border-radius: 0;
	background: #132232;
	color: #fff;
	width:100%;
	font-size: 1rem;
	margin-bottom:.5rem;
}

#modalWrapper .modalBox .modalBody .modalContent .awardContent form .form-group a.mailBtn {
	width: fit-content;
	height: auto;
	padding: 5px 8px;
	border: 1px solid #4682B4;
	text-align: center;
	color: #4682B4;
	text-decoration: none;
	transition: all .5s ease-in-out;
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
}

#modalWrapper .modalBox .modalBody .modalContent .awardContent form .form-group a:hover{
	color: #8382f6;
	border: 1px solid #8382f6;
}

#modalWrapper .modalBox .modalBody .modalContent .awardContent .memberRow{
	display: flex;
	margin-bottom: 1.1rem;
}

#modalWrapper .modalBox .modalBody .modalContent .awardContent .memberRow.last{
	margin-bottom: 0;
}

#modalWrapper .modalBox .modalBody .modalContent .awardContent .memberRow .memberPic{
	width:80px;
	height: auto;
	display: block;
}

#modalWrapper .modalBox .modalBody .modalContent .awardContent .memberRow .memberPic img{
	width:100%;
	height:auto;
}

#modalWrapper .modalBox .modalBody .modalContent .awardContent .memberRow .memberDescribe{
	width: 80%;
	margin-left:1rem;
}

/* ============================================================================= */

.mainWrapper, .mainContent{
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	position: relative;
	display: flex;
	//align-items: stretch;
}

.leftColumn{
	width: 40%;
	height: 100%;
	background: #132232;
	position: absolute;
	left:-40%;
	top:0;
	z-index: 99;
	transition:all .5s ease-in-out;
	-webkit-transition:all .5s ease-in-out;
	-moz-transition:all .5s ease-in-out;
	
}

.leftColumn .leftColumnLinkBox{
	width:100%;
	height: 100%;
	overflow: scroll;
}


::-webkit-scrollbar {
	  width: 0px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #132232;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #132232;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #172b41;
}

.leftColumn.showMenu{
	left:0;
}

.leftColumn ul li{
	padding:5px 0;
}

.leftColumn ul li.countLi p{
	padding:0 .25rem;
	width: fit-content;
	margin: 0 auto;
	text-align: center;
	font-size: .8rem;
	color:#656565;
	line-height: 1.3;
	margin-bottom: .35rem;
}

.leftColumn ul li p.count{
	padding:0 .25rem;
	width: fit-content;
	margin: 0 auto;
	text-align: center;
	font-size: .8rem;
	color:#656565;
	line-height: 1.3;
/* 	border: 1px solid #585858; */
}

.leftColumn ul li a{
	width: 100%;
	height: 100%;
	display: block;
	text-decoration: none;
	padding:10px;
	text-align: center;
	color: 	#4682B4;
	transition:all 1s ease-in-out;
}

.leftColumn ul li a:hover{
	color:#8382f6;
}


.leftColumn ul li a.current{
	color: #cce9ef;
}


.leftColumn ul li a p{
	line-height:1.2rem;
	font-size: .9rem;
}

.leftColumn ul li a.homeBtn p{
	font-size: 1rem;
	line-height:1.2rem;
}


.leftColumn #menuToggle_m{
	display: flex;
	width: 44px;
	height: 44px;
	position: absolute;
	top:0;
	right:-44px;
	background: rgba(0,0,0,.6);
}

.leftColumn #menuToggle_m img{
	width:80%;
	height:auto;
	margin:auto;
}

/* .leftColumn ul li a p:first-child{
	
} */

.leftColumn ul li a p:last-child{
	font-size: .7rem;
}

.centColumn{
	width:100%;
	height: 100%;
	flex-grow:2;
	background: url(../images/mainBg.jpg?v=2)  center center fixed;
	margin-left:0px;
	margin-right:0px;
}

.centColumnContent{
	width:100%;
	height: 100vh;
	overflow: auto;
}

.centColumnContent .contentBlock{
	padding:45px;
	background:rgba(0,0,0,.6);
}

.centColumnContent .contentBlock h1{
	font-size: 2.2rem;
	color: #4e85bc;
	font-weight: 400;
	line-height: 1.1;
	margin-bottom: 1.5rem;
}

.centColumnContent .contentBlock h1 span{
	font-size: 1.5rem;
	line-height: 1.1;
	font-weight: 200;
}

.centColumnContent .contentBlock p{
	line-height: 1.4;
	font-size: .9rem;
}

.contentBlock .contentRow{
	width:100%;
	height: auto;
	margin-bottom: 0;
	display: flex;
	flex-direction: column;
}


.contentRow .contentCol{
	display: flex;
	margin-bottom: 0;
	/* width: 100%; */
	flex-wrap: wrap;
	justify-content: space-between;
}

.contentRow .contentCol a.linkBox{
	position: relative;
	display: flex;
	width:250px;
	height: 140px;
	margin-right:15px;
	margin-bottom: 1.5rem;
	/* align-items:center; */
	text-decoration: none;
	transition:all .5s ease-in-out;
	-webkit-transition:all .5s ease-in-out;
	-moz-transition:all .5s ease-in-out;
	
}

.contentRow .contentCol a.linkBox .linkOverlap{
	width:100%;
	height:100%;
	position: absolute;
	top:0;
	left:0;
	z-index: 2;
	background: rgba(0,0,0,.6);
	transition:all .5s ease-in-out;
	-webkit-transition:all .5s ease-in-out;
	-moz-transition:all .5s ease-in-out;
	border: 1px solid #3f638b;
}

.contentRow .contentCol a.linkBox p{
	color: #fff;
	position: relative;
	margin: auto;
	z-index: 3;
	font-weight:300;
	transition:all .5s ease-in-out;
	-webkit-transition:all .5s ease-in-out;
	-moz-transition:all .5s ease-in-out;
	text-align: center;
	line-height: 1.4;
}

.contentRow .contentCol a.linkBox:hover p{
	opacity: 0;
}

.contentRow .contentCol a.linkBox:hover .linkOverlap{
	opacity: 0;
}



.contentRow .contentCol a.linkBox img{
	position: absolute;
	top:0;
	left: 0;
	z-index:1;
	width:100%;
	height: 140px;
}


#i_mainPic,#i_biography,#i_messenger,#i_releases,#i_crossover,#i_nightKeepers,#i_wifiTime,#i_events,#i_videos,#i_news{
	width:100%;
	/* height:auto; */
	height: fit-content;
	min-height: 300px;
	background: rgba(0,0,0,.6);
	color: #cecece;
	position: relative;
	z-index: 1;
	padding-bottom:15px;
}

#i_biography,#i_events,#i_messenger{
	height: 100%;
}

#i_mainPic{
	position: relative;
	height: 30vh;
	background: transparent !important;
	padding:0;
}


#i_mainPic .overMask{
	width:100%;
	height: 100%;
	position: relative;
	z-index: 33;
}

#i_mainPic img.mainKv{
	position: fixed;
	top:3%;
	/* bottom:0; */
	left:0;
	right:0;
	margin:auto;
	width: 80%;
	min-width: 300px;
	z-index: 0;
	opacity: 1;
	transition:all .8s ease-in-out;
	-webkit-transition:all .8s ease-in-out;
	-moz-transition:all .8s ease-in-out;
}

#i_mainPic img.mainKv.divFade{
	opacity: .4;
}

/* #i_mainPic h1{
	font-size: 7rem;
	color:#fff;
	position: relative;
	z-index: 3;
	line-height:1.4;
	margin-bottom: 200px;
} */


#i_biography{
	position: relative;
	background: rgba(0,0,0,.6);
	height: fit-content;
}

#i_biography:before{
	content: "";
	  position: absolute;
	  top: -70px; 
	  left: 0;
	  width: 100%; height: 100%;
	  background-image: url(../images/bandGroupPic_m_v2.png?v=6);
	  background-size:100%;
	  background-position: top center;
	  background-repeat: no-repeat;
	 /* filter: grayscale(50%);
	 -webkit-filter: grayscale(50%);
	 -moz-filter: grayscale(50%); */
	 opacity: 1;
	/* background: url("../images/bandGroupPic.jpg") no-repeat center bottom #000;
	filter: grayscale(100%); */
}

#i_biography .bandTitle{
	color:#fff;
	position: absolute;
	right:160px;
	z-index: 3;
	top:150px;
}

#i_biography .bandTitle p{
	font-size: 7rem;
	font-family: sans-serif;
	line-height:1.4;
}



#i_biography .bandTitle span{
	font-size: 3.5rem;
	font-weight: 100;
	margin-left:130px;
}

#i_biography p{
	color: #fff;
}

#i_biography .spaceGap{
	width:100%;
	height:50vw;
	display: block;
	/* background: pink; */
}



#i_biography .aboutUsInfo{
	/* position: absolute;
	left:20px;
	bottom:105px; */
	position: relative;
	z-index: 5;
	width:100%;
	background: rgba(0,0,0,0);
	padding:15px 0;
	margin-bottom: 20px;
	justify-content: space-between;
}

#i_biography .aboutUsInfo p{
	color: #cecece;
	line-height: 1.5;
	font-weight: 300;
	margin-bottom:1.5rem;
	font-size: .9rem;
}

#i_biography .aboutUsInfo .introBtnBox{
	display: flex;
	flex-wrap: wrap;
}

#i_biography .aboutUsInfo a.introBtn{
	font-size: .9rem;
	line-height:1.3;
	width:fit-content;
	height: auto;
	padding: 8px 12px;
	border:1px solid #038cbe;
	text-align: center;
	color: #038cbe;
	text-decoration: none;
	transition:all .5s ease-in-out;
	-webkit-transition:all .5s ease-in-out;
	-moz-transition:all .5s ease-in-out;
	margin-right: 15px;
	margin-bottom: .9rem;
}

#i_biography .aboutUsInfo a.introBtn:hover{
	color: #15a6db;
	border:1px solid #15a6db;
}

#i_biography .aboutUsInfo .awardText{
	display: none;
}

#i_biography .aboutUsInfo .awardText p{
	color: #cecece;
}

#i_biography .awardText h3,
#i_biography .awardText h5,
#i_biography .awardText ul li{
	font-size: 1rem;
	line-height: 1.3;
	font-weight: 300;
	color:#cecece;
}

#i_biography .introMember{
	width: 100%;
	height: auto;
	position: relative;
	z-index: 5;
	padding: 15px 0;
}

#i_biography .introMember p{
	font-size: .7rem;
	line-height: 1.4;
	color: #c1d1e4;
}


 #i_messenger{
	background: rgba(0, 0, 0, 1);
	position: relative;
	//background: url("https://i.imgur.com/eZYNy16.gif") center center no-repeat rgba(69, 69, 93, 0.6);
}

img.messengerPic{
	position: absolute;
	bottom:10%;
	left:0;
	width:100%;
	height: auto;
	filter:blur(1px);
	-webkit-filter:blur(1px);
	-moz-filter: blur(1px);
	opacity: .3;
}

.messengerText{
	position: relative;
	z-index: 2;
	height:100%;
}

.messengerText h1{
	margin-bottom:2rem;
}

.contentCol .albumBox{
	margin-bottom:1.5rem;
	width: 48%;
	box-sizing: border-box;
}

.contentCol .albumBox .albumPic{
	width: 100%;
	height: auto;
	border: 1px solid #3f638b;
	margin-right:1.5rem;
	margin-bottom:.8rem;
	position: relative;
}

.contentCol .albumBox .albumPic img{
	width:100%;
	height: auto;
	display:block;
}

.contentCol .albumBox .albumPic .linkBox{
	position: absolute;
	display: flex;
	z-index: 2;
	bottom:0;
	right:0;
}

.contentCol .albumBox .albumPic .linkBox a{
	width: 32px;
	height: 32px;
	display: flex;
	justify-content:flex-end;
	background: rgba(0,0,0,.8);
}

.contentCol .albumBox .albumPic .linkBox a img{
	width:70%;
	height:auto;
	margin:auto;
	opacity: .7;
	transition:all .5s ease-in-out;
	-webkit-transition:all .5s ease-in-out;
	-moz-transition:all .5s ease-in-out;
}

.contentCol .albumBox .albumPic .linkBox a:hover img{
	width:70%;
	height:auto;
	margin:auto;
	opacity: 1;
}



.contentCol .albumBox p{
	color: #cecece;
	font-size: .9rem;
}

/*
#i_releases{
	background: #df20d5;
}

#i_crossover{
	background: #cce9ef;
}



#i_nightKeepers{
	background: #b11745;
}

#i_events{
	background: #2fcd46;
}

#i_videos{
	background: #e5a500;
} */

/* i_news */

#i_news{
	background: rgba(0,0,0,.6);
	min-height: 100%;
	height: fit-content;
	padding-bottom: 2rem;
}

#i_crossover h2, #i_releases h2{
	font-size: 1.5rem;
	color: #c9c9c9;
	margin-bottom:1.1rem;
}

#i_news h2{
	font-size: 2rem;
	color: #fff;
	margin-bottom:1.1rem;
}

#i_wifiTime .messengerText h2{
	font-size: 1.5rem;
	color: #c9c9c9;
	line-height: 1.4;
	margin-bottom: 15px;
	font-family: 'Noto Serif TC', serif;
}

#i_wifiTime .messengerText .ytBox{
	overflow: hidden;
	position: relative;
	width:100%;
	margin-bottom:2rem;
}

#i_wifiTime .messengerText .ytBox::after {
	padding-top: 56.25%;
	display: block;
	content: '';
}

#i_wifiTime .messengerText img{
	width:100%;
	height: auto;
}

#i_wifiTime .messengerText iframe.wifitimeyt{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#i_wifiTime .messengerText p{
	line-height: 2;
}

#i_wifiTime img.wifiTimePic{
	/* filter: brightness(.5);
	-webkit-filter: brightness(.5);
	-moz-filter: brightness(.5); */
	position: absolute;
	z-index: -1;
	top: 30%;
	right: 10%;
	width: 50%;
	opacity: .3;
	height: auto;
}


.newsPostBlock{
	padding:10px 0;
	margin-bottom:3rem;
}

.newsPostBlock .newsRow{
	display: flex;
	padding:5px 0;
	flex-direction: column;
}

.newsPostBlock .newsRow p{
	color: #c9c9c9;
	padding-right:10px;
}

.newsPostBlock .newsRow p.newsDate{
	color: #4682B4;
}

.newsPostBlock .newsRow a{
	color:#b9b9b9;
	text-decoration: none;
	line-height: 1.4;
	transition:all .5s ease-in-out;
	-webkit-transition:all .5s ease-in-out;
	-moz-transition:all .5s ease-in-out;
}

.newsPostBlock .newsRow a:hover{
	color: #dedede;
}


.rightColumn{
	width:40px;
	height: 100%;
	background: black;
	position: absolute;
	right:0;
	top:0;
	z-index: 98;
	padding-top: 10px;
	display: none;
	flex-direction: column;
	align-content: space-between;
}

.rightColumn ul li{
	text-align: center;
}

.rightColumn ul li a{
	width:24px;
	height: auto;
	display: block;
	margin: 3px auto;
	transition: all .5s ease-in-out;
	opacity: .6;
}

.rightColumn ul li a:hover{
	opacity: 1;
}

.rightColumn ul li a img{
	width:100%;
	height:auto;
}

#modalWrapper .modalBox .modalBody .modalContent .awardContent .socialIcons{
	width:100%;
	height:auto;
}

#modalWrapper .modalBox .modalBody .modalContent .awardContent .socialIcons ul{
	display: flex;
	flex-direction: row;
}

#modalWrapper .modalBox .modalBody .modalContent .awardContent .socialIcons ul li{
	width:40px;
	height:40px;
	padding: 0 3px;
}

#modalWrapper .modalBox .modalBody .modalContent .awardContent .socialIcons ul li a{
	width:100%;
	height:100%;
	display: block;
}

#modalWrapper .modalBox .modalBody .modalContent .awardContent .socialIcons ul li a img{
	width:100%;
	height:auto;
	display: block;
}