@charset "utf-8";

@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);

body,

html { font-family: 'Noto Sans TC'; /*font-weight:bold;*/ }

button {

	background-color: transparent;

	border: none;

	outline: none;

	cursor: pointer;

}

/* Reserved Class

-------------------------------------------------------------- */

.btn {

	background: none;

	border: 0 none;

	outline: none;

}

/* Styles

-------------------------------------------------------------- */

body,

html {


	background: #000;

}


#menuGroup {

	z-index: 200;

	position: fixed;

	right: 15px;

	top: 50%;

	transform: translateY(-50%);

}

#menu li { 
	margin-bottom: 3px; 
	width: 180px;
}

#menu li a {

	color: #fff;

	text-decoration: none;

	

	padding-left: 40px;

	position: relative;

	

	font-size: 16px;

	height: 30px;

	line-height: 30px;

	display: block;

	text-align: left;

	

}

#menu li:nth-of-type(odd) {
	transform: translateX(17px);
}

#menu li:nth-of-type(1){
	background: url(../images/s_01.png) no-repeat;
}

#menu li:nth-of-type(2){
	background: url(../images/s_02.png) no-repeat;
}
#menu li:nth-of-type(3){
	background: url(../images/s_03.png) no-repeat;
}
#menu li:nth-of-type(4){
	background: url(../images/s_04.png) no-repeat;
}
#menu li:nth-of-type(5){
	background: url(../images/s_05.png) no-repeat;
}
#menu li:nth-of-type(6){
	background: url(../images/s_06.png) no-repeat;
}

#menu li a:hover { color: #edbcad; }


#menu li a span {

	position: absolute;

	left: 0px;

	top: 0px;

	width: 30px;

	height: 30px;

	display: none;

	
}

#menu li:nth-of-type(1) span{
	background: url(../images/s_01_L.png) no-repeat;
}
#menu li:nth-of-type(2) span{
	background: url(../images/s_02_L.png) no-repeat;
}
#menu li:nth-of-type(3) span{
	background: url(../images/s_03_L.png) no-repeat;
}
#menu li:nth-of-type(4) span{
	background: url(../images/s_04_L.png) no-repeat;
}
#menu li:nth-of-type(5) span{
	background: url(../images/s_05_L.png) no-repeat;
}
#menu li:nth-of-type(6) span{
	background: url(../images/s_06_L.png) no-repeat;
}

#menu li a:hover span { display: block; }

.section {

	z-index: 50;

	position: relative;


	text-align:center;

}



.section .con {

	z-index: 50;


	opacity: 0;

	filter: alpha(opacity=0);

}

.section .con img {

	max-width:100%;

}

.bgArea div {

	/*z-index: 20;*/

	position: absolute;

	left: 0;

	top: 0;

	width: 100%;

	height: 100%;

	opacity: 0;

	filter: alpha(opacity=0);

}


.bg0Effect {

	position: absolute;

	left: 0;

	top: 0;

	width: 100%;

	height: 100%;

	opacity: 0;

	filter: alpha(opacity=0);

	background: url(../images/bg_sec_01.jpg) no-repeat center 0 fixed;

	background-size: cover;

}

.bgArea .bg1 {

	background: url(../images/s1_bg.png) no-repeat center 0 fixed;

	background-size: cover;

}

.bgArea .bg2 {

	background: url(../images/s2_bg.jpg) no-repeat center 0 fixed;

	background-size: cover;

}

.bgArea .bg3 {

	background: url(../images/s3_bg.png) no-repeat center 0 fixed;

	background-size: cover;

}

.bgArea .bg4 {

	background: url(../images/s4_bg.jpg) no-repeat center 0 fixed;

	background-size: cover;

}
.bgArea .bg5 {

	background: url(../images/s5_bg.jpg) no-repeat center 0 fixed;

	background-size: cover;

}

#section0 .titleGroup {


	position: absolute;

	top: 37%;

	left: 30%;
	opacity: 0;

	width: 1040px;

	height: 148px;

	transform: translateX(-50%);

	background-image: url(../images/s0_title.png);

	background-size: contain;
	background-position: 50% 0%;
}


#section2 .s3_box1{
	position: absolute;
	width: 147px;
	height: 123px;
	left: 55%;
	top: 38%;
	display: block;
	background-image: url('../images/s2_con2.png');
	background-size: contain;
	animation: flash 5s linear 1s infinite;
	opacity: 0;
}
#section2 .s3_box2{
	position: absolute;
	width: 197px;
	height: 209px;
	left: 60%;
	top: 52%;
	display: block;
	background-image: url('../images/s2_con3.png');
	background-size: contain;
	animation: flash 5s linear 1.3s infinite;
	opacity: 0;
}

@keyframes flash{
	0%{
		opacity: 0;
	}
	2%{
		opacity: 1;
	}
	3%{
		opacity: 1;
	}
	4%{
		opacity: 0;
	}
	8%{
		opacity: 0;
	}
	9%{
		opacity: 1;
	}
	10%{
		opacity: 0;
	}
	11%{
		opacity: 1;
	}
	60%{
		opacity: 1;
	}
	61%{
		opacity: 0;
	}
	64%{
		opacity: 0;
	}
	65%{
		opacity: 1;
	}
	66%{
		opacity: 0;
	}
	67%{
		opacity: 1;
	}
	100%{
		opacity: 1;
	}
}





#section3 .innerWrap{
	max-height: 100vh;
	overflow: hidden;
}

#section3 .titleGroup{
	
	position: absolute;

	top: 70px;

	left: 50%;
	opacity: 1;

	width: 1040px;

	height: 75px;

	transform: translateX(-50%);

	background-image: url(../images/s3_title.png);

	background-size: contain;
	background-position: 50% 0%;
}
#section3 .char{
	position: relative;
	width: 1680px;
	height: 1369px;
	top: 70px;
	left: 10%;
	background-image: url(../images/member/a.png);
	transition: 0.5s all;
}
#section3 .avatae{
	position: absolute;
	left: 10%;
	top: 60%;
	width: 440px;
	height: 75px;
	background-image: url('../images/member/line.png');
}

#section3 .avatae li{
	position: absolute;
	width: 69px;
	height: 60px;
}
#section3 .avatae li img{
	position: relative;
	left: 0px;
	top: -16px;
}

#section3 .avatae li::after{
	content: '';
	position: absolute;
	width: 69px;
	height: 60px;
	left: 0px;
	top: 0px;
}

#section3 .avatae li:nth-of-type(1){
	left: 65px;
	top: -28px;
}
#section3 .avatae li:nth-of-type(2){
	left: 182px;
	top: -28px;
}
#section3 .avatae li:nth-of-type(3){
	left: 302px;
	top: -28px;
}

#section3 .avatae li:nth-of-type(4){
	left: 5px;
	top: 10px;
}
#section3 .avatae li:nth-of-type(5){
	left: 122px;
	top: 4px;
}
#section3 .avatae li:nth-of-type(6){
	left: 242px;
	top: 4px;
}
#section3 .avatae li:nth-of-type(7){
	left: 362px;
	top: 10px;
}

#section3 .avatae li:nth-of-type(8){
	left: 62px;
	top: 45px;
}

#section3 .avatae li:nth-of-type(9){
	left: 182px;
	top: 45px;
}
#section3 .avatae li:nth-of-type(10){
	left: 122px;
	top: 77px;
}
#section3 .avatae li:nth-of-type(11){
	left: 242px;
	top: 75px;
}







#section3 .avatae li:nth-of-type(1):hover::after,
#section3 .avatae li:nth-of-type(1).active::after{
	background-image: url(../images/member/a_l.png);
}
#section3 .avatae li:nth-of-type(2):hover::after{
	background-image: url(../images/member/b_l.png);
}

#section3 .avatae li:nth-of-type(3):hover::after{
	background-image: url(../images/member/c_l.png);
}

#section3 .avatae li:nth-of-type(4):hover::after{
	background-image: url(../images/member/d_l.png);
}


#section3 .avatae li:nth-of-type(5):hover::after{
	background-image: url(../images/member/e_l.png);
}

#section3 .avatae li:nth-of-type(6):hover::after{
	background-image: url(../images/member/f_l.png);
}

#section3 .avatae li:nth-of-type(7):hover::after{
	background-image: url(../images/member/g_l.png);
}


#section3 .avatae li:nth-of-type(8):hover::after{
	background-image: url(../images/member/h_l.png);
}

#section3 .avatae li:nth-of-type(9):hover::after{
	background-image: url(../images/member/i_l.png);
}
#section3 .avatae li:nth-of-type(10):hover::after{
	background-image: url(../images/member/j_l.png);
}

#section3 .avatae li:nth-of-type(11):hover::after{
	background-image: url(../images/member/k_l.png);
}











#section4 .con {

	/*margin: -475px 0 0 -600px;

	width: 1200px;

	height: 950px;*/

}
#section4 .titleGroup{
	
	position: absolute;

	top: 70px;

	left: 50%;
	opacity: 1;

	width: 1040px;

	height: 75px;

	transform: translateX(-50%);

	background-image: url(../images/s4_title.png);

	background-size: contain;
	background-position: 50% 0%;
}


#section5 .titleGroup{
	
	position: absolute;

	top: 70px;

	left: 50%;
	opacity: 1;

	width: 1040px;

	height: 75px;

	transform: translateX(-50%);

	background-image: url(../images/s5_title.png);

	background-size: contain;
	background-position: 50% 0%;
}

.img_copyright {

	position: relative;

	width: 980px;

	display: block;

	margin: 0 auto;

}

.cover {
	width: 100%;
	height: 100vh;
	background-image: url(../images/s0_bg.png);
	background-size: cover;
	background-position: center top;
	position: absolute;
	z-index: 0;
	top: 0;
	left: 0;
	animation: s0bg 5s ease-in-out 0s infinite;
}
@keyframes s0bg{
	0%{
		background-image: url(../images/s0_bg.png);
	}
	40%{
		background-image: url(../images/s0_bg_L.png);
	}
	60%{
		background-image: url(../images/s0_bg_L.png);
	}
}

.layerPop {

	display: none;

	z-index: 300;

	position: fixed;

	left: 50%;

	top: 50%;

	margin: -312px 0 0 -550px;

	width: 1090px;

	height: 614px;

	border: 0px solid #ccc;

	background: #000;

}

.layerPop .close {

	position: absolute;

	right: -1px;

	top: -50px;

}

.layerPop .close button {

	border: none;

	display: block;

	text-indent: -9999px;

	width: 49px;

	height: 49px;

	background: url(../images/btn_close_movie.jpg) no-repeat;

	cursor: pointer;

	filter: grayscale(50%);

}

.layerPop .close button:hover { filter: grayscale(0%); }

.overlay {

	z-index: 200;

	position: fixed;

	left: 0;

	top: 0;

	width: 100%;

	height: 100%;

	background-color: rgba(0,0,0,.75);

	display: none;

}

#audio {

	position: absolute;

	bottom: -30px;

	right: 25px;

	z-index: 125;

	width: auto;

}

.jp-audio { width: 120px; }

.jp-audio .jp-interface { height: 52px; }

.jp-stop { background-image: none; }

.jp-play {

	position: absolute;

	left: -5px;

	top: 21px;

	width: 30px;

	height: 30px;

	background: url(../images/sound.png) no-repeat;

	background-position: 0px -30px;

	cursor: pointer;

}

.jp-play:hover { background-position-x: -30px; }

.jp-play:focus { background: url(../images/play_off.png) no-repeat; }

.jp-pause {

	display: none;

	position: absolute;

	left: -5px;

	top: 21px;

	width: 30px;

	height: 30px;

	background: url(../images/sound.png) no-repeat;

	cursor: pointer;

}

.jp-pause:hover { background-position-x: -30px; }

.jp-volume-controls {

	background: url(../images/bar.png) no-repeat;

	height: 5px;

	position: absolute;

	top: 26px;

	left: 20px;

	display: none;

}

.jp-volume-bar {

	width: 123px;

	background: none;

	height: 6px;

	left: 0px;

	top: 0px;

}

.jp-volume-bar-value {

	background: url(../images/volume.png) no-repeat;

	height: 6px;

	position: absolute;

	top: 0px;

	left: 0px;

}

.jp-audio .jp-controls {

	width: 140px;

	padding: 20px 20px 0 20px;

}

#popDrawing.layerPop .close {

	right: 0px;

	top: 0px;

}

#popDrawing {

	position: absolute;

	margin: 0 0 0 -358px;

	top: 20px;

	width: 717px;

	height: 922px;

	background: url(../images/bg_picture.png) no-repeat;

}

#popDrawing .link {

	position: absolute;

	bottom: 19px;

	left: 244px;

}

#popDrawing .link a {

	display: block;

	width: 229px;

	height: 67px;

	text-indent: -9999px;

}

ul.qlink {

	position: fixed;

	top: 300px;

	left: 0;

	z-index: 100;

}

ul.qlink li {

	margin-bottom: 10px;

	margin-left: -180px;

}

ul.qlink li a {

	transition: all .3s ease-out;

	width: 190px;

	height: 51px;

	text-indent: -9999px;

	background-image: url(../images/qlink.png);

	display: block;

	background-repeat: no-repeat;

}

ul.qlink li a { background-position: 0 0; }

ul.qlink li+li a { background-position: 0 -51px; }

ul.qlink li a:hover { margin-left: 180px; }

 @media screen and (max-device-width: 1024px) {

#nav { display:none;}





.bgArea .bg0{

	background-color:#000;

}