@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
-------------------------------------------------------------- */
.blind {
	width: 1px;
	height: 1px;
	font-size: 0;
	line-height: 0;
	position: absolute;
	top: 0;
	left: -1000%;
	overflow: hidden;
}
.show { display: block; }
.hide { display: none; }
.fL { float: left; }
.fR { float: right; }
.clearFix { zoom: 1; }
.clearFix:after {
	clear: both;
	display: block;
	content: '';
}
.btn {
	background: none;
	border: 0 none;
	outline: none;
}
.fix { position: fixed !important; }
/* Styles
-------------------------------------------------------------- */
body,
html {
	/*width: 100%;
	height: 100%;
	overflow: auto !important;*/
	background: #000;
}
body {
	/*overflow-x: auto !important;
	overflow-y: auto !important;*/
	/*overflow-y: hidden !important; background: url(../images/bg_sec0.jpg) no-repeat center 0 fixed; background-size: cover;*/
}
#wrap .btn { cursor: default; }
/* 공통 */
#wrap {
	/*position: relative;
	width: 100%;
	min-width: 1200px;*/
}
#wrap .innerWrap {
	/*position: relative;
	margin: 0 auto;
	width: 1200px;*/
}
.header {
	position: fixed;
	z-index: 51;
	width: 100%;
}
#bgm,
#play,
#pause {
	position: absolute;
	top: -99999999px;
}
.sound {
	margin-right: 3px;
	float: right;
	width: 30px;
	height: 30px;
	margin-top: 15px;
	font: 0/0 "";
	color: transparent;
	background-image: url(../images/sound.png);
	background-position: 0 0;
	display: inline-block;
	cursor: pointer;
}
.sound:hover { background-position: -30px 0px; }
.sound.off { background-position: 0px -30px; }
.sound.off:hover { background-position: -30px -30px; }
.mouse {
	z-index: 100;
	margin: 0 0 0 -25px;
	position: fixed;
	bottom: 50px;
	left: 50%;
	display: none;
}
#menuGroup {
	z-index: 200;
	position: fixed;
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
}
#menu li { margin-bottom: 3px; }
#menu li a {
	color: #bb735a;
	text-decoration: none;
	padding-right: 41px;
	position: relative;
	width: 151px;
	font-size: 15px;
	height: 39px;
	line-height: 39px;
	display: block;
	text-align: right;
	background: url(../images/spr_quick.png) no-repeat;
}
#menu li a:hover,
#menu li.active a { color: #edbcad; }
/*#menu li.m0 a { background-position: 0 0px; }
#menu li.m1 a { background-position: 0 -42px; }
#menu li.m2 a { background-position: 0 -84px; }
#menu li.m3 a { background-position: 0 -126px; }
#menu li.m4 a { background-position: 0 -168px; }*/
#menu li a span {
	position: absolute;
	right: 0px;
	top: 0px;
	width: 39px;
	height: 39px;
	display: none;
	background: url(../images/ico_light.png) no-repeat;
}
#menu li.active span,
#menu li a:hover span { display: block; }
.fog {
	position: fixed;
	left: -320px;
	bottom: 0;
	width: 99999px;
	height: 470px;
}
.section {
	z-index: 50;
	position: relative;
	/*width: 100%;
	height: 1080px;
	min-height: 900px;
	overflow: hidden;*/
	text-align:center;
}
.section .innerWrap {
	/*position: relative;
	margin: 0 auto;
	min-height: 900px;
	height: 100%;*/
}
.section#section0 .innerWrap {
	/*width: 100%;*/
}

.section .cloud {
	z-index: 10;
	position: absolute;
	top: 50%;
	left: 50%;
	opacity: 0;
	filter: alpha(opacity=0);
}
.section .con {
	z-index: 50;
	/*position: absolute;
	top: 50%;
	left: 50%;
	text-align:center;*/
	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);
}
.bgArea .bg0 {
	/*opacity: 1;
	filter: alpha(opacity=100);
	background: url(../images/bg_sec_01.jpg) no-repeat center 0 fixed;
	background-size: cover;
	display:none;*/
}
.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/bg_sec_02.jpg) no-repeat center 0 fixed;
	background-size: cover;
}
.bgArea .bg2 {
	background: url(../images/bg_sec_03.jpg) no-repeat center 0 fixed;
	background-size: cover;
}
.bgArea .bg3 {
	background: url(../images/bg_sec_04.jpg) no-repeat center 0 fixed;
	background-size: cover;
}
.bgArea .bg4 {
	background: url(../images/bg_sec_05.jpg) no-repeat center 0 fixed;
	background-size: cover;
}
#section0 .titleGroup {
	margin: -180px 0 0 0/*-245px*/;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 490px;
	height: 342px;
	transform: translateX(-50%);
}
#section0 .titleGroup p { text-align: center; }
#section0 .titleGroup .title1 {
	position: absolute;
	top: -90px;
	left: 40px;
	opacity: 0;
	filter: alpha(opacity=0);
}
#section0 .titleGroup .title2 {
	position: absolute;
	left: 0;
	top: 50px;
	height: 204px;
}
#section0 .titleGroup .title2 p {
	position: absolute;
	top: 0;
	opacity: 0;
	filter: alpha(opacity=0);
}
#section0 .titleGroup .title2 p img { width: 100%; }
#section0 .titleGroup .title2 .txt1 {/*left:0px;top: 0;	*/
	left: -350px;
	top: -140px;
	width: 600px;
}
#section0 .titleGroup .title2 .txt2 {/*left:206px;top: 0;*/
	left: -50px;
	top: -140px;
	width: 600px;
}
#section0 .titleGroup .title2 .txt3 {/*left:404px;top: 0;*/
	left: 354px;
	top: -140px;
	width: 600px;
}
#section0 .titleGroup .title2 .txt4 {/*left:404px;top: 0;*/
	left: 704px;
	top: -140px;
	width: 600px;
}
#section0 .titleGroup .title3 {
	position: absolute;
	left: -100px;
	top: 380px; /* top: 186px;*/
	opacity: 0;
	filter: alpha(opacity=0);
}
#section0 .titleGroup .title4 {
	position: absolute;
	left: 38px;
	top: 420px;  /*top: 275px; */
	opacity: 0;
	filter: alpha(opacity=0);
}
#section1 .con1 {
	/*margin: -390px 0 0 -600px;
	width: 1200px;
	height: 760px;*/
}
#section1 .paging {
	z-index: 100;
	position: absolute;
	top: 785px;
	left: 0;
	width: 100%;
	text-align: center;
	opacity: 0;
	filter: alpha(opacity=0);
}
#section1 .paging a {
	margin: 0 8px;
	position: relative;
	display: inline-block;
	width: 16px;
	height: 18px;
	background: url(../images/ico_paging.png) no-repeat;
	text-indent: -9999px;
}
#section1 .paging a.active span {
	position: absolute;
	left: -20px;
	top: -20px;
	width: 55px;
	height: 59px;
	display: block;
	background: url(../images/ico_light.png) no-repeat;
}
#section2 .con {
	/*margin: -475px 0 0 -600px;
	width: 1200px;
	height: 950px;*/
}
#section3 .con {
	/*margin: -475px 0 0 -600px;
	width: 1200px;
	height: 950px;*/
}
#section4 .con {
	/*margin: -475px 0 0 -600px;
	width: 1200px;
	height: 950px;*/
}
#section4 .swiper-container {
	position: absolute;
	top: 122px;
	left: 0;
}
#section4 .paging a.on {
	display: block;
	width: 15px;
	height: 15px;
	background: red;
}
#section4 .paging a {
	display: inline-block;
	width: 16px;
	height: 18px;
	background: url(../images/ico_paging.png) no-repeat;
	text-indent: -9999px;
}
#section4 .slideArea .mask {
	width: 300px;
	height: 300px;
	overflow: hidden;
}
#section4 .slideArea ul {
	position: relative;
	width: 9999px;
}
#section4 .slideArea li { float: left; }
#section5 {
	background-color: rgba(0,0,0,.95);
	opacity: .35;
}
.img_copyright {
	position: relative;
	width: 980px;
	display: block;
	margin: 0 auto;
}
.fp-auto-height.fp-section,
.fp-auto-height .fp-slide,
.fp-auto-height .fp-tableCell {
	height: auto !important;
	min-height: inherit !important;
}
.player {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	/*min-height: 900px;*/
	height:950px;
	overflow:hidden;
	z-index: 0;
}
.cover {
	width: 100%;
	height: 950px;
	background-image: url(../images/img_sec0Con.png);
	background-position: center top;
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
}
.btnArea {
	z-index: 100;
	margin: 0 0 0 -640px;
	position: absolute;
	left: 50%;
	top: 0;
	width: 1280px;
	height: 63px;
}
.btnArea .btn { position: absolute; }
.btn.down {
	position: absolute;
	top: 633px;
	left: 747px;
}
.btn.down a {
	transition: .3s all ease;
	display: block;
	width: 198px;
	height: 50px;
	background: url(../images/btn_down.png) no-repeat;
	text-indent: -9999px;
}
.btn.movie1 {
	position: absolute;
	top: 633px;
	left: 963px;
}
.btn.movie1 button {
	transition: .3s all ease;
	display: block;
	width: 198px;
	height: 50px;
	background: url(../images/btn_movie1.png) no-repeat;
	text-indent: -9999px;
}
.btn.movie2 {
	position: absolute;
	top: 82px;
	left: 300px;
}
.btn.movie2 button {
	transition: .2s all ease;
	display: block;
	width: 129px;
	height: 110px;
	background: url(../images/btn_movie2.png) no-repeat;
	text-indent: -9999px;
}
.btn.down a:hover,
.btn.movie1 button:hover,
.btn.movie2 button:hover { filter: brightness(200%); }
.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: -40px;
	right: -90px;
	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;
}
.moviebox {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -375px;
	margin-top: -197px;
	z-index: 51;
}
.moviebox iframe { position: absolute; }
.tmb {
	width: 520px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -260px;
	margin-top: 245px;
	z-index: 51;
}
.tmb button {
	display: block;
	float: left;
	margin: 0 15px;
	width: 100px;
	height: 100px;
	background-image: url(../images/btn_play.png);
	background-repeat: no-repeat;
	background-position: 0 0;
}
.tmb button:hover { filter: brightness(150%); }
.tmb button:nth-of-type(1) { background-position-x: 0px; }
.tmb button:nth-of-type(2) { background-position-x: -100px; }
.tmb button:nth-of-type(3) { background-position-x: -200px; }
.tmb button:nth-of-type(4) { background-position-x: -300px; }
#s1,
#s2,
#s3,
#s4 {
	position: absolute;
	z-index: 52;
}
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;}

body,
.bgArea .bg0,
.bgArea .bg1,
.bgArea .bg2,
.bgArea .bg3,
.bgArea .bg4 {
	/*background: url(../images/bg_sec_01.jpg) no-repeat center 0 fixed;
	background-size: auto;*/
}
.bgArea .bg0{
	background-color:#000;
}
/*.bgArea .bg0Effect { background-size: auto; }*/

/*#section1 .con1 {
	margin-left: 0;
	transform: translateX(-50%);
}
#section2 .con {
	margin-left: 0px;
	transform: translateX(-50%);
}
#section3 .con {
	margin-left: 0px;
	transform: translateX(-50%);
}
#menuGroup {
	top: 120px;
	transform: translateY(0);
}*/
}