@charset "utf-8";

/* CSS Document */

body {
    margin: 0;
    padding: 0;
    background-color: #888;
    scroll-behavior: smooth;
}

p {
    margin: 0 0 20px 0;
}

p,
ul {
    font-family: "Proxima Nova Light", 'Helvetica Neue', Arial, Helvetica, sans-serif;
    font-weight: 200;
    font-style: normal;
}

img {
    border: 0;
}

h1 {
    font-family: "Museo 900", Verdana, serif;
    font-size-adjust: 0.40;
    font-weight: 700;
    font-style: normal;
}

h2 {
    font-family: "Beau Sans Pro Book", Verdana, sans-serif;
    font-size-adjust: 0.531;
    font-weight: 500;
    font-style: normal;
}

.mobile {
	display: none;
}

.desktops {
	display: block;
}

/* For mobile */
.container-fluid{
	width: 100%;
}
	
dl, ol, ul {
	margin-top: 0;
	margin-bottom: 0; 
}

.navbar {
	position: absolute;
	z-index: 999;
	padding: 0;
}

.navbar-toggle {
	display: block;
}

.navbar-nav {
	margin:0;
	float: none;
}

.side-collapse {
	top: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	position: fixed;
	overflow: hidden;
	transition: width .4s;
}
.side-collapse.in {
	width: 0;
}

.menu-bg {
	background-color: #303030;
	height: 100vh;
	padding: 30px 20px;
	z-index: 9;
}

#x_button {
	margin: 0 0 20px 6px;
	clear: both;
}

#x_button img {
	width: 24px;
}

.mb-00,
.mb-03,
.mb-04,
.mb-05,
.mb-06 {
	width: 100%;
	height: 100vh;
	display: block;
}

.mb01,
.ipad01 {
	display: block;
}

.mb02,
.ipad02 {
	display: none;
}

.mobile-logo {
	position: absolute;
	z-index: 100;
	right: 20px;
	top: 20px;
	height: 28px;
}

.menu {
	width: 28px;
}
.menu-info {
	width: 100%;
}
.menu-link {
	margin-top: 20px;
	text-align: center;
}
.menu-link img {
	height: 28px;
	margin: 0 1rem;
}

.mb-00 {
	background: url(../images/portrait/1080x1920/00.jpg) no-repeat;
}

/* For desktops */
.story {
	position: relative;
	margin: 0 auto;
	overflow: auto;
	width: 100%;
	height: 100vh;
}

/*插入導覽列*/
#nav {
	position: fixed;
	top: 50%;
	right: 20px;
	z-index: 1010;
	list-style: none;
}
#nav li {
	width: 10px;
	height: 10px;
	margin: 10px;
	background-color: #fff;
	cursor: pointer;
	border-radius: 100%;
}
#nav li a {
	width: 10px;
	height: 10px;
	display: block;
}
#nav .active {
	background-color: #43A55F;
}

.link {
	position: absolute;
	z-index: 999;
	top: 50px;
	right: 50px;
}

#movie {
	background: url(../images/landscape/1920x1080/00.jpg) 50% 0 no-repeat fixed;
	background-size: cover;
	height: 100vh;
	overflow: hidden;
	position: relative;
}
#movie_01 {
	position: absolute;
	padding: 40px 0 0 40px;
	
	z-index: 999;
}
#movie_01 img {
	max-width: 1000px;
	width: 100%;
}
#movie_02 {
	display: block;
	text-align: center; 
	margin-top: 20%;
}
#movie_03 {
	display: none;
	text-align: center; 
	margin-top: 20%;
}
#movie_copyright {
	position: absolute; 
	left: 1%; 
	z-index: 999;
	bottom: 5%;
}

#intro {
	background: url(../images/landscape/1920x1080/01.jpg) 50% 0 no-repeat fixed;
	background-size: cover;
	height: 100vh;
	overflow: hidden;
	position: relative;
}
#intro_logo {
	margin: 50px 0 0 40px;
}
#intro_logo img {
	width: 140px;
}
#intro_01 {
	text-align: center;
	margin-top: 0px;
}
#intro_01 img {
	width: 200px;
}
#intro_02 {
	text-align: right;
	margin: 35vh 100px 0 0;
}
#intro_02 img {
	width: 600px;
}

#second {
	background: url(../images/landscape/1920x1080/02.jpg) 50% 0 no-repeat fixed;
	background-size: cover;
	height: 100vh;
	overflow: hidden;
	position: relative;
}
#second_logo {
	margin: 50px 0 0 40px;
}
#second_logo img {
	width: 140px;
}
#second_01 {
	text-align: left;
	margin: 3vh 0 0 40px;
}
#second_01 img {
	width: 240px;
}
#second_02 {
	text-align: left;
	margin: 27vh 0 0 40px;
}
#second_02 img {
	width: 240px;
}

#third {
	background: url(../images/landscape/1920x1080/03.jpg) 50% 0 no-repeat fixed;
	background-size: cover;
	height: 100vh;
	overflow: hidden;
	position: relative;
}
#third_logo {
	margin: 50px 0 0 40px;
}
#third_logo img {
	width: 140px;
}
#third_01 {
	text-align: left;
	margin:300px 0 0 40px;
}
#third_01 img {
	width: 320px;
}
#third_02 {
	text-align: left;
	margin: 5vh 0 0 40px;
}
#third_02 img {
	width: 1020px;
}

#fifth {
	background: url(../images/landscape/1920x1080/04.jpg) 50% 0 no-repeat fixed;
	background-size: cover;
	height: 100vh;
	overflow: hidden;
	position: relative;
}
#fifth_logo {
	margin: 50px 0 0 40px;
}
#fifth_logo img {
	width: 140px;
}
#fifth_01 {
	text-align: center;
	margin:30px 0 0 0;
}
#fifth_01 img {
	width: 200px;
}
#fifth_02 {
	text-align: center;
	margin: 25vh 0 0 0;
}
#fifth_02 img {
	width: 990px;
}

.copy-rights {
	position: absolute;
	width: 100%;
	text-align: center;
	color: rgba(255,255,255,0.7);
	font-size: 1em;
	left: 0;
	bottom: 2vh;
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) and (orientation:portrait) {
	
	.desktops {
		display: none;
	}
	
	.mobile {
		display: block;
	}
	
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) and (orientation:portrait) {
	
	.desktops {
		display: none;
	}
	
	.mobile {
		display: block;
	}
	
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) and (orientation:portrait) {
	
	.desktops {
		display: none;
	}
	
	.mobile {
		display: block;
	}

	.mobile-logo {
		right: 20px;
		top: 20px;
		height: 40px;
	}
	
	.menu {
		width: 40px;
	}
	.menu-info {
		width: 80%;
	}
	.menu-link {
		margin-top: 40px;
		text-align: center;
	}
	.menu-link img {
		height: 40px;
		margin: 0 1rem;
	}
	
	.mb-00 {
		background: url(../images/portrait/1024x1253/00.jpg) no-repeat;
	}
	
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
	
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
	
	.mobile {
		display: none;
	}

	.desktops {
		display: block;
	}

	#intro {
		background-size: auto calc(100% + 100px);
	}
	
	#second {
		background-size: 100% calc(100% + 100px);
	}
	
	#third {
		background-size: 100% calc(100% + 100px);
	}
	
	#fifth {
		background-size: cover;
	}
	
}



@media only screen and (width: 768px) and (orientation:portrait) {
	/* For general iPad layouts */
}

@media only screen and (min-width: 481px) and (max-width: 1024px) and (orientation:portrait) {
	/* For portrait layouts only */
}

@media only screen and (min-width: 481px) and (max-width: 1024px) and (orientation:landscape) {
	/* For landscape layouts only */
	
	.mobile {
		display: none;
	}

	.desktops {
		display: block;
	}
	
	.link {
		top: 20px;
		right: 40px;		
	}

	#movie_01 {
		padding: 20px 0 0 20px;
	}
	#movie_01 img {
		width: 58%;
	}
	#movie_02 {
		margin-top: 35%;
	}
	#movie_02 img {
		width: 59%;
	}
	#movie_03 {
		margin-top: 20%;
	}
	#movie_copyright {
		left: 1%; 
		bottom: 5%;
	}
	
	#intro_logo {
		margin: 20px 0 0 25px;
	}
	#intro_logo img {
		width: 100px;
	}
	
	#second_logo {
		margin: 20px 0 0 25px;
	}
	#second_logo img {
		width: 100px;
	}
	#second_01 {
		text-align: left;
		margin: 60px 0 0 25px;
	}
	#second_01 img {
		width: 190px;
	}
	#second_02 {
		text-align: left;
		margin: 200px 0 0 25px;
	}
	#second_02 img {
		width: 195px;
	}
	
	#third_logo {
		margin: 20px 0 0 25px;
	}
	#third_logo img {
		width: 100px;
	}
	#third_01 {
		text-align: left;
		margin: 360px 0 0 25px;
	}
	#third_01 img {
		width: 240px;
	}
	#third_02 {
		text-align: left;
		margin: 40px 0 0 25px;
	}
	#third_02 img {
		width: 750px;
	}
	
	#fifth_logo {
		margin: 20px 0 0 25px;
	}
	#fifth_logo img {
		width: 100px;
	}

}



@media only screen and (width: 834px) and (orientation:portrait) {
	/* For 11 iPad Rro 834 x 1194 ( -106 [safari] ~ -113 [chrome] ) portrait layouts */
	
	.desktops {
		display: none;
	}
	
	.mobile {
		display: block;
	}
	
	.mobile-logo {
		right: 20px;
		top: 20px;
		height: 40px;
	}

	.menu {
		width: 40px;
	}
	.menu-info {
		width: 80%;
	}
	.menu-link {
		margin-top: 40px;
		text-align: center;
	}
	.menu-link img {
		height: 40px;
		margin: 0 1rem;
	}

	.mb-00 {
		background: url(../images/portrait/834x1081/00.jpg) no-repeat;
		background-size: 100% 100%;
		height: 1081px;
	}
	
}

@media only screen and (width: 1024px) and (orientation:portrait) {
	/* For 12.9 iPad Rro 1024 x 1366 ( -106 [safari] ~ -113 [chrome] ) portrait layouts */

	.desktops {
		display: none;
	}
	
	.mobile {
		display: block;
	}

	.mobile-logo {
		right: 20px;
		top: 20px;
		height: 40px;
	}
	
	.menu {
		width: 40px;
	}
	.menu-info {
		width: 80%;
	}
	.menu-link {
		margin-top: 40px;
		text-align: center;
	}
	.menu-link img {
		height: 40px;
		margin: 0 1rem;
	}
	
	.mb-00 {
		background: url(../images/portrait/1024x1253/00.jpg) no-repeat;
	}

}


@media only screen and (width: 1194px) and (orientation:landscape) {
	/* For 11 iPad Rro 1194 x 834 ( -106 [safari] ~ -113 [chrome] ) landscape layouts */
	
	.mobile {
		display: none;
	}

	.desktops {
		display: block;
	}

	.link {
		top: 20px;
		right: 40px;
	}

	#movie {
		background: url(../images/landscape/1194x744/00.jpg) no-repeat;
		background-size: 1194px 744px;
		height: 744px;
	}
	#movie_01 {
		padding: 20px 0 0 20px;
	}
	#movie_01 img {
		width: 58%;
	}
	#movie_02 {
		margin-top: 25%;
	}
	#movie_02 img {
		width: 59%;
	}
	#movie_03 {
		margin-top: 20%;
	}
	#movie_copyright {
		left: 1%; 
		bottom: 5%;
	}

	#intro {
		background: url(../images/landscape/1194x744/01.jpg) no-repeat;
		background-size: 1194px 744px;
		height: 744px;
	}
	#intro_logo {
		margin: 20px 0 0 50px;
	}
	#intro_logo img {
		width: 100px;
	}
	#intro_01 {
		margin-top: 20px;
		margin-left: -35px;
	}
	#intro_01 img {
		width: 180px;	
	}
	#intro_02 {
		text-align: right;
		margin: 200px 80px 0 0;
	}
	#intro_02 img {
		width: 410px;
	}

	#second {
		background: url(../images/landscape/1194x744/02.jpg) no-repeat;
		background-size: 1194px 744px;
		height: 744px;
	}
	#second_logo {
		margin: 20px 0 0 50px;
	}
	#second_logo img {
		width: 100px;
	}
	#second_01 {
		text-align: left;
		margin: 60px 0 0 50px;
	}
	#second_01 img {
		width: 190px;
	}
	#second_02 {
		text-align: left;
		margin: 200px 0 0 50px;
	}
	#second_02 img {
		width: 195px;
	}

	#third {
		background: url(../images/landscape/1194x744/03.jpg) no-repeat;
		background-size: 1194px 744px;
		height: 744px;
	}
	#third_logo {
		margin: 20px 0 0 50px;
	}
	#third_logo img {
		width: 100px;
	}
	#third_01 {
		text-align: left;
		margin: 360px 0 0 50px;
	}
	#third_01 img {
		width: 240px;
	}
	#third_02 {
		text-align: left;
		margin: 40px 0 0 50px;
	}
	#third_02 img {
		width: 750px;
	}

	#fifth {
		background: url(../images/landscape/1194x744/04.jpg) no-repeat ;
		background-size: 1194px 744px;
		height: 744px;
	}
	#fifth_logo {
		margin: 20px 0 0 50px;
	}
	#fifth_logo img {
		width: 100px;
	}
	#fifth_01 {
		text-align: center;
		margin: 90px 0 0 40px;
	}
	#fifth_01 img {
		width: 160px;
	}
	#fifth_02 {
		text-align: center;
		margin: 240px 0 0 20px;
	}
	#fifth_02 img {
		width: 620px;
	}
	
	.copy-rights {
		bottom: 2em;
	}

}

@media only screen and (width: 1366px) and (orientation:landscape) {
	/* For 12.9 iPad Rro 1366 x 1024 ( -106 [safari] ~ -113 [chrome] )  landscape layouts */
	
	.mobile {
		display: none;
	}

	.desktops {
		display: block;
	}

	.link {
		top: 20px;
		right: 40px;
	}

	#movie {
		background: url(../images/landscape/1366x934/00.jpg) no-repeat;
		background-size: 1366px 1024px;
		height: 1024px;
	}
	#movie_01 {
		padding: 20px 0 0 20px;
	}
	#movie_01 img {
		width: 70%;
	}
	#movie_02 {
		margin-top: 25%;
	}
	#movie_02 img {
		width: 55%;
	}
	#movie_03 {
		margin-top: 20%;
	}
	#movie_copyright {
		left: 1%; 
		bottom: 5%;
	}

	#intro {
		background: url(../images/landscape/1366x934/01.jpg) no-repeat;
		background-size: 1366px 1024px;
		height: 1024px;
	}
	#intro_logo {
		margin: 20px 0 0 55px;
	}
	#intro_logo img {
		width: 100px;
	}
	#intro_01 {
		margin-top: 40px;
		margin-left: -30px;
	}
	#intro_01 img {
		width: 220px;	
	}
	#intro_02 {
		text-align: right;
		margin: 250px 80px 0 0;
	}
	#intro_02 img {
		width: 570px;
	}

	#second {
		background: url(../images/landscape/1366x934/02.jpg) no-repeat;
		background-size: 1366px 1024px;
		height: 1024px;
	}
	#second_logo {
		margin: 20px 0 0 55px;
	}
	#second_logo img {
		width: 100px;
	}
	#second_01 {
		text-align: left;
		margin: 80px 0 0 55px;
	}
	#second_01 img {
		width: 230px;
	}
	#second_02 {
		text-align: left;
		margin: 260px 0 0 55px;
	}
	#second_02 img {
		width: 220px;
	}

	#third {
		background: url(../images/landscape/1366x934/03.jpg) no-repeat;
		background-size: 1366px 1024px;
		height: 1024px;
	}
	#third_logo {
		margin: 20px 0 0 55px;
	}
	#third_logo img {
		width: 100px;
	}
	#third_01 {
		text-align: left;
		margin: 520px 0 0 55px;
	}
	#third_01 img {
		width: 240px;
	}
	#third_02 {
		text-align: left;
		margin: 40px 0 0 55px;
	}
	#third_02 img {
		width: 870px;
	}

	#fifth {
		background: url(../images/landscape/1366x934/04.jpg) no-repeat;
		background-size: 1366px 1024px;
		height: 1024px;
	}
	#fifth_logo {
		margin: 20px 0 0 55px;
	}
	#fifth_logo img {
		width: 100px;
	}
	#fifth_01 {
		text-align: center;
		margin: 155px 0 0 80px;
	}
	#fifth_01 img {
		width: 180px;
	}
	#fifth_02 {
		text-align: center;
		margin: 310px 0 0 50px;
	}
	#fifth_02 img {
		width: 720px;
	}
	
	.copy-rights {
		bottom: 2em;
	}
	
}