@charset "utf-8";
@import url("/aurakingdom/css/_normalize.min.css");
@import url("/aurakingdom/css/swiper.min.css");
@import url("/aurakingdom/css/jquery.fancybox.min.css");

/* ==========================================================================
Common
========================================================================== */
html,body { width: 100%; height: 100%; margin:0 auto ; }
img,a { display: block; }
a { text-decoration: none; }

h1,h2,h3,h4,p{ margin: 0 auto;}

/* z-index */
.TopBar{ z-index: 99; }
.succeed, .failed{ z-index: 999; }

#section_4 h3,
#section_4 h4,
#section_4 p.section_4-title-s{ z-index: 98; }

span.top{z-index: 98;}



/* ==========================================================================
Wrap
========================================================================== */
.wrap { color: #111111; font-family:'Noto Sans', sans-serif; }
.pageBox {}


/* ==========================================================================
	TopBar
========================================================================== */

/* ---------- menu ---------- */

.TopBar{
	position: fixed;
	top: 0;
	width: 100%;
	background: rgba(33, 33, 33, 0.90);
}
/* 選單 */
.menu{ margin: 0 auto; max-width: 800px; line-height: 60px; }
.menu li{ display: inline-block; font-family: 'Lora', serif; text-align: center; width: 24%; }
.menu .m1{}
.menu .m2{}
.menu .m3{}
.menu .m4{}
.menu .m5{}
.menu .m6{}
.menu li a{ display: block; color: #FFF; }

.menu li:hover a,
.menu li:active a,
.menu li.active a{ background: url('../images/select.png') no-repeat 50% 50%; background-size: 20%; }


/* 社群ICON */
.social-icon{
    margin: 0 auto;
    max-width: 1200px;
    margin-top: -48px;
    line-height: 48px;
}
.share{ margin: 0 auto; text-align: right; }
.share li{ display: inline-block; }
.share .Facebook{}
.share .Twitter{}
.share .googlePlus{}
.share li a{ display: block; }

.share .Facebook a{ background: url('../images/social-share-1.png') no-repeat 50% 100%; }
.share .Twitter a{ background: url('../images/social-share-2.png') no-repeat 50% 100%; }
.share .googlePlus a{ background: url('../images/social-share-3.png') no-repeat 50% 100%; }

.share .Facebook a,
.share .Twitter a,
.share .googlePlus a{ background-size: contain; width: 30px; height: 30px; }

.share a:hover{ border: 1px solid #676767; }


/* ==========================================================================
	pageBox
========================================================================== */

.pageBox{}
.pageBg{}

section {
	position: relative;
	margin: 0 auto;
	width: 100%;
	height: 955px;
	text-align: center;
	overflow: hidden;
}

/* .pageBg, */
#ytapiplayer_1 {
	position: absolute;
	top: 0; left: 50%;
	margin-left: -960px;
	width: 1920px;
	height: 1080px;
}
#section_1  span.cover{
	display: block;
	position: absolute; top: 0;
	background: rgba(45,45,45,.2);
	width: 100%;
	height: 100vh;
}

/* ==========================================================================
	page-1
========================================================================== */
#section_1{ position: relative; height: 992px; overflow: hidden; }

.page-in{}
#section_1 .page-in{ position: relative; padding-top: 90px;}

h1.logo{ display: block; }
h1.logo img { margin: 0 auto; }
#section_1 .title{
	margin: 0 auto;
	max-width: 900px;
	color: #FFF;
    font-family: 'Gentium Book Basic', serif;
    font-size: 60px;
    word-spacing: .08em;
    margin-top: 25px;

    text-shadow: 0px 0px 8px #383838,
				 0px 0px 8px #383838,
				 0px 0px 8px #383838,
				 0px 0px 8px #383838,
				 0px 0px 8px #383838;
}
#section_1 .title p{ font-family: 'Merriweather', serif; font-size: 25.5px; }

#section_1 h2{
	font-size: 17px;
	color: #000;
	text-shadow: 0px 0px 1px #505050,
				 0px 0px 6px #fff,
				 0px 0px 6px #fff,
				 0px 0px 6px #fff,
				 0px 0px 8px #CCC,
				 0px 0px 8px #CCC,
				 0px 0px 8px #d8d6d6,
				 0px 0px 10px #d8d6d6,
				 0px 0px 10px #d8d6d6;
}

#section_1 .play-btn{
	display: block;
    position: absolute;
    top: 415px;
    left: 50%;
    width: 100px;
    height: 100px;
    background: #313131;
    margin-left: -50px;
    border-radius: 50px;
    border: 2px solid #a7a7a7;
    opacity: .7;
}

#section_1 .play-btn span{
	display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -16px 0 0px -8px;
    border-style: solid;
    border-width: 17px 0 17px 28px;
    border-color: transparent transparent transparent #ffffff;
}

#section_1 .play-btn:hover{ opacity: .9; }


/* 改彈窗大小 */
.fancybox-slide--iframe .fancybox-content{ width: 50%; height: 50%; }

/* ---------- app ---------- */

.app{ padding-top: 200px; }
.app ul{}
.app ul li{}

.app li.app-icon a{ display: inline-block; width: 10em; }
.app li.app-icon a img{ width: 100%;}
.app li.app-icon.on a:hover{ -webkit-filter: brightness(200%); -webkit-filter:contrast(.8); }

.app li.txt.on,
.app li.txt.off{
	font-family: 'Merriweather', serif;
	font-size: 25px;
	color: #FFF;
	line-height: 2em;
	text-shadow: 0px 0px 8px #383838,
				 0px 0px 8px #383838,
				 0px 0px 8px #383838,
				 0px 0px 8px #383838,
				 0px 0px 8px #383838;
}

.app li.app-icon.off a{ cursor: auto; }

.app li.app-icon.pre{}
.app li.app-icon.pre a{
	display: block;
    margin: 0 auto;
    background: -webkit-linear-gradient(top, rgb(87, 104, 202) 40%,rgb(32, 37, 101) 100%);
    width: 17%;
    padding: 10px 35px 15px 35px;
    color: #FFF;
    font-size: 25px;
    font-weight: 600;
    letter-spacing: 1.2px;
    border: 1.5px solid #3c98c3;
    border-radius: 13px;
    margin-top: 15px;
}
.app li.app-icon.pre a span{
	display: block;
    font-size: 13px;
}
.app li.app-icon.pre a:hover{ -webkit-filter:hue-rotate(300deg); }


/* 事前登錄 */
.app .Pre-title{
	margin-top: -105px;
	font-size: 30px;
	font-weight: 800;
	line-height: 1.8em;
    color: #942828;
    text-shadow: 0px 0px 1px #942828,
    			 0px 0px 2px #FFF,
				 0px 0px 2px #FFF,
				 0px 0px 2px #FFF,
				 0px 0px 8px #FFF,
				 0px 0px 8px #FFF,
				 0px 0px 8px #FFF,
				 0px 0px 10px #FFF,
				 0px 0px 10px #FFF,
				 0px 0px 10px #FFF;
}
.app li.app-icon.login-btn.sign-on {  }
.app li.app-icon.login-btn.sign-on a { width: 180px; height: 70px; }
.app li.app-icon.login-btn.sign-on a:hover{ -webkit-filter: brightness(130%); }
.app li.app-icon.login-btn.sign-on a img:hover{ margin-top: -5px;}

/* 輸入+送出按鈕 */
.app li.login-mail.sign-on input.mail{
	padding: 10px 30px;
    font-size: 18px;
    font-weight: 600;
    width: 350px;
    text-align: center;
    border: 3px solid #3e3e3e;
}
.app li.login-mail.sign-on input.enter-btn{
	background: url('../images/sign_up.png') no-repeat 50% 100%;
	background-size: contain;
	border: none;
    width: 150px;
    height: 64px;
    text-indent: -999%;
}
.app li.login-mail.sign-on input.enter-btn:hover{ -webkit-filter: brightness(120%); }
/* 已登錄 */
.app li.app-icon.login-btn.sign-off{}
.app li.app-icon.login-btn.sign-off a{ width: 180px; height: 70px; }
.app li.app-icon.login-btn.sign-off img{}

/* 輸入+送出按鈕 */
.app li.login-mail.sign-off{ max-width: 500px; margin: 0 auto; }
.app li.login-mail.sign-off span.mail{
	display: block;
	background: #a9a9a9;
	width: 350px;
	color: #3e3e3e;
	font-size: 18px;
	text-align: center;
	padding: 10px 30px;
	border: 2px solid #313030;
	float: left;
    margin-top: 8px;
}
.app .login-mail.sign-off span.enter-btn{
	display: block;
	background: url('../images/sign_up.png') no-repeat 50% 100%;
	background-size: contain;
    width: 150px;
    height: 64px;
    float: left;
}

/* 灰階 */
.app li.app-icon.login-btn.sign-off,
.app .login-mail.sign-off{ -webkit-filter:grayscale(95%); }


/* 預設不顯示 */
.sign-off{ display: none; }


#section_1 .pre-area{
	position: absolute;
    top: 35vh;
    right: -50px;
    background: rgba(0,0,0,.6);
    color: #FFF;
    width: 235px;
    height: 280px;
    padding: 10px;
    border-radius: 20px;
}
#section_1 .pre-area span:before{
	content: '';
    display: block;
    width: 65px;
    height: 65px;
    background: url(../images/pre-icon.png) no-repeat 50% 50%;
    background-size: 45%;
    border-radius: 50px;
}
#section_1 .pre-area span{
	display: block;
    position: absolute;
    top: -25px;
    left: 50%;
    width: 65px;
    height: 65px;
    margin-left: -56px;
    background: #717171;
    border-radius: 50px;
}
#section_1 .pre-area p{
	margin-top: 35px;
    padding-right: 50px;
    padding-bottom: 15px;
}
#section_1 .pre-area a{ display: block; width: 161px; height: 53px; margin-left: 3px; }
#section_1 .pre-area a.ios-pre-btn{ background: url('../images/ak-btn_ios_pre.png') no-repeat; background-size: contain; }
#section_1 .pre-area a.and-pre-btn{ background: url('../images/ak-btn_and.png') no-repeat; background-size: contain; }


/* ---------- scrollDown ---------- */

.scrollDown {
	bottom: 50px;
	left: 0;
	right: 0;
	margin: auto;
	width: 69px;
	height: 59px;
	background: url(../img/ar-scroll_down.png) no-repeat;
}


/* ==========================================================================
	page_2
========================================================================== */
#section_2 { background: #4a4a4a; }

/* ==========================================================================
	page-3
========================================================================== */
#section_3{
	/* background: #7b7b7b  */
	/* background: url('../images/news-bg.jpg') no-repeat ;
	background-size: cover;
	background-position: 50% 100%; */
}


/* ==========================================================================
	共通設定
========================================================================== */

#section_2 h3,
#section_3 h3,
#section_4 h3,
#section_5 h3,
#section_6 h3{
	padding-top: 60px;
	color: #FFF;
	font-family: 'Lora', serif;
    font-size: 40px;
    padding-bottom: .5em;
}
#section_2 h4,
#section_3 h4,
#section_4 h4,
#section_5 h4,
#section_6 h4{
	margin: 0 auto;
    color: #FFF;
    font-family: 'Lora', serif;
    font-size: 26px;
    font-weight: 100;
    line-height: 1.6em;
    word-spacing: .15em;
}

/* ==========================================================================
	page-4
========================================================================== */
#section_4 {
	margin: 0 auto;
	position: relative;
	background: url('../images/eidolons-bg.jpg') no-repeat ;
	background-size: cover;
	background-position: 50% 100%;
}
#section_4 h3 { position: absolute; top: 0; left: 50%; margin-left: -114px; padding-top: 130px; }
#section_4 h4 { position: absolute; top: 196px; left: 50%; /* margin-left: -400px; */  margin-left: -210px; line-height: 1.3em; word-spacing: .5em; }
#section_4 p.section_4-title-s{
	position: absolute;
	top: 234px;
	left: 50%;
	margin-left: -143px;
	font-family: 'Lora', serif;
	font-size: 19px;
    color: #a8d9ec;
    text-shadow: 0px 0px 0px #a8d9ec;
}
#section_4 .swiper-container{}
#section_4 .swiper-container .swiper-wrapper{}

#section_4 .swiper-container .swiper-wrapper .swiper-slide{ height: 955px; height: 100vh; /* background: #CCC; */ overflow: hidden; }

/* 角色 */
#section_4 .swiper-container .swiper-wrapper .swiper-slide .chara-area{ position: absolute; /* top: 0; */ bottom: 0; left: 50%; }
#section_4 .swiper-container .swiper-wrapper .swiper-slide .chara-1{
	background: url(../images/chara-1.png) no-repeat;
    width: 1056px;
    height: 763px;
    margin-left: -955px;
}
#section_4 .swiper-container .swiper-wrapper .swiper-slide .chara-2{
	background: url(../images/chara-2.png) no-repeat;
    width: 1163px;
    height: 850px;
    margin-left: -984px;
}
#section_4 .swiper-container .swiper-wrapper .swiper-slide .chara-3{
	background: url(../images/chara-3.png) no-repeat;
    width: 1044px;
    height: 880px;
    margin-left: -951px;
}
#section_4 .swiper-container .swiper-wrapper .swiper-slide .chara-4{
	background: url(../images/chara-4.png) no-repeat;
    width: 1102px;
    height: 904px;
    margin-left: -953px;
}
#section_4 .swiper-container .swiper-wrapper .swiper-slide .chara-5{
	background: url(../images/chara-5.png) no-repeat;
    width: 802px;
    height: 856px;
    margin-left: -780px;
    margin-bottom: 18px;
}
#section_4 .swiper-container .swiper-wrapper .swiper-slide .chara-6{
	background: url(../images/chara-6.png) no-repeat;
    width: 1067px;
    height: 934px;
    margin-left: -953px;
}
#section_4 .swiper-container .swiper-wrapper .swiper-slide .chara-7{
	background: url(../images/chara-7.png) no-repeat;
    width: 999px;
    height: 799px;
    margin-left: -953px;
}
#section_4 .swiper-container .swiper-wrapper .swiper-slide .chara-8{
	background: url(../images/chara-8.png) no-repeat;
    width: 1073px;
    height: 955px;
    margin-left: -953px;
}

/* 文字 */
#section_4 .swiper-container .swiper-wrapper .swiper-slide .text-area{
	position: absolute;
    top: 270px;
    left: 50%;
    width: 520px;
    margin-left: 6px;
}
#section_4 .swiper-container .swiper-wrapper .swiper-slide .text-area h5.name{
	font-family: 'Slabo', serif;
	letter-spacing: -.05em;
	font-size: 80px;
	color: #27323f;
}
#section_4 .swiper-container .swiper-wrapper .swiper-slide .text-area p.title{
	font-size: 22px;
    font-weight: 600;
    margin-top: -145px;
    margin-bottom: 110px;
    color: #27323f;
}
#section_4 .swiper-container .swiper-wrapper .swiper-slide .text-area .story{}
#section_4 .swiper-container .swiper-wrapper .swiper-slide .text-area .story p{
	font-size: 20px;
    color: #85bbf5;
    padding: 0px 40px;
    text-align: justify;
    padding-bottom: 30px;
}
#section_4 span.color{
	display: block;
	position: absolute;
	top: 248px;
    left: 50%;
	width: 1526px;
	height: 342px;
	background: url('../images/color-bg.png') no-repeat;
	background-size: contain;
	margin-left: -960px;
}

/* 雅典娜例外 */
#section_4 .swiper-container .swiper-wrapper .swiper-slide .text-area-3{ top: 340px; }
#section_4 .swiper-container .swiper-wrapper .swiper-slide .text-area-3 span{ color: #b1e7f2; font-size: 42px; font-family: 'Slabo', serif; }
#section_4 .swiper-container .swiper-wrapper .swiper-slide .text-area-3 h5.name{ margin-top: -15px; }
#section_4 .swiper-container .swiper-wrapper .swiper-slide .text-area-3 p.title{ margin-bottom: 96px; }
#section_4 .swiper-container .swiper-wrapper .swiper-slide .text-area-3 .story{}

/* ========== 修改輪播 ========== */
.swiper-container {}
.swiper-container-horizontal>.swiper-pagination {
    position: absolute;
    top: 350px;
    left: 50%;
    margin-left: 40%;
}
.swiper-container-horizontal>.swiper-pagination .swiper-pagination-bullet {
    display: block;
    margin: 15px;
    width: 9px;
    height: 9px;
    background: #3caad3;
    opacity: 1;
}
.swiper-container-horizontal>.swiper-pagination .swiper-pagination-bullet:hover{ opacity: 1; }
.swiper-container-horizontal>.swiper-pagination .swiper-pagination-bullet-active:hover{ opacity: 1; }

.swiper-container-horizontal>.swiper-pagination .swiper-pagination-bullet:hover,
.swiper-container-horizontal>.swiper-pagination .swiper-pagination-bullet-active{
	padding: 49px 55px;
    margin-left: -39px;
    background: #CCC;
}
/* 各角色選單ICON */
.swiper-container-horizontal>.swiper-pagination .swiper-pagination-bullet:nth-child(1):hover,
.swiper-container-horizontal>.swiper-pagination .swiper-pagination-bullet-active:nth-child(1){
	background: url('../images/chara-icon-1.png') no-repeat; background-size: 100%;
}
.swiper-container-horizontal>.swiper-pagination .swiper-pagination-bullet:nth-child(2):hover,
.swiper-container-horizontal>.swiper-pagination .swiper-pagination-bullet-active:nth-child(2){
	background: url('../images/chara-icon-2.png') no-repeat; background-size: 100%;
}
.swiper-container-horizontal>.swiper-pagination .swiper-pagination-bullet:nth-child(3):hover,
.swiper-container-horizontal>.swiper-pagination .swiper-pagination-bullet-active:nth-child(3){
	background: url('../images/chara-icon-3.png') no-repeat; background-size: 100%;
}
.swiper-container-horizontal>.swiper-pagination .swiper-pagination-bullet:nth-child(4):hover,
.swiper-container-horizontal>.swiper-pagination .swiper-pagination-bullet-active:nth-child(4){
	background: url('../images/chara-icon-4.png') no-repeat; background-size: 100%;
}
.swiper-container-horizontal>.swiper-pagination .swiper-pagination-bullet:nth-child(5):hover,
.swiper-container-horizontal>.swiper-pagination .swiper-pagination-bullet-active:nth-child(5){
	background: url('../images/chara-icon-5.png') no-repeat; background-size: 100%;
}
.swiper-container-horizontal>.swiper-pagination .swiper-pagination-bullet:nth-child(6):hover,
.swiper-container-horizontal>.swiper-pagination .swiper-pagination-bullet-active:nth-child(6){
	background: url('../images/chara-icon-6.png') no-repeat; background-size: 100%;
}
.swiper-container-horizontal>.swiper-pagination .swiper-pagination-bullet:nth-child(7):hover,
.swiper-container-horizontal>.swiper-pagination .swiper-pagination-bullet-active:nth-child(7){
	background: url('../images/chara-icon-7.png') no-repeat; background-size: 100%;
}
.swiper-container-horizontal>.swiper-pagination .swiper-pagination-bullet:nth-child(8):hover,
.swiper-container-horizontal>.swiper-pagination .swiper-pagination-bullet-active:nth-child(8){
	background: url('../images/chara-icon-8.png') no-repeat; background-size: 100%;
}

/* 箭頭 */
.swiper-button-next,
.swiper-button-prev { top: 43%; height: 110px; width: 80px; }

.swiper-button-prev{ background-image: url('../images/btn_prev.png'); background-size: contain; left: 50%; margin-left: -40px; }
.swiper-button-next{ background-image: url('../images/btn_next.png'); background-size: contain; right: 50%; margin-right: -666px; }

.swiper-button-next:hover,
.swiper-button-prev:hover { background-size: 103%; }

/* ==========================================================================
	page_5
========================================================================== */
#section_5 {
	margin: 0 auto;
	background: url('../images/sky-tower-bg.jpg') no-repeat ;
	background-size: cover;
	background-position: 50% 100%;
}

#section_5 p{
    font-size: 19px;
    color: #a9e7ff;
    font-family: 'Lora', serif;
    line-height: 1.2em;
    max-width: 790px;
    padding: 1em 3em 3em 3em;
    text-shadow: 0px 0px 0px #a8d9ec;
}
#section_5 .sky-movie{}

#section_5 a{
	display: block;
	margin: 0 auto;
	width: 725px;
	height: 410px;
	border: 3px solid #70c1d2;
	box-shadow: 1px 0px 20px 7px rgba(29, 210, 255, 0.5);
}
#section_5 .sky_yt{ width: 100%; height: 100%; background: #191919; }

/* youtube浮水印 */
a.ytp-watermark.yt-uix-sessionlink{ display: none; }


/* ==========================================================================
	page_6
========================================================================== */
#section_6 {
	margin: 0 auto;
	background: url('../images/trailers-bg.jpg') no-repeat ;
	background-size: cover;
	background-position: 50% 100%;
	min-height: 955px;
    height: auto;
}

#section_6 h3{ color: #313131; }
#section_6 h4{ color: #313131; font-weight: 600; }

.movie{
	display: table;
    margin: 0 auto;
    width: 57%;
    height: 300px;
    padding: 30px 0;
}
.movie li{ display: inline-block; margin: 8px 10px; }

.movie li a{ width: 348px; height: 230px; background: #191919; }
.movie li a:hover{ -webkit-filter: brightness(150%); }
.movie_yt{ width: 348px; height: 230px; background: #191919; }

.movie li:nth-child(1) a{ background: url('../images/movie-pic-1.jpg') no-repeat; background-size: cover; }
.movie li:nth-child(2) a{ background: url('../images/movie-pic-2.jpg') no-repeat; background-size: cover; }
.movie li:nth-child(3) a{ background: url('../images/movie-pic-3.jpg') no-repeat; background-size: cover; }
.movie li:nth-child(4) a{ background: url('../images/movie-pic-4.jpg') no-repeat; background-size: cover; }

/* go top */
span.top{
	display: block;
	display: none;
    position: fixed;
    top: 87vh;
    right: 79px;
    width: 50px;
    height: 50px;
    line-height: 3.8em;
    padding: 0 .7em;
    color: #FFF;
    font-size: 15px;
    background: #1fade2;
    border-radius: 50px;
    opacity: .7;
    z-index: 98;
    cursor: pointer;
}
span.top b{
	display: block;
    position: absolute;
    top: 34%;
    left: 50%;
    margin: -8px 0 0px -5px;
    border-style: solid;
    border-width: 0px 6px 9px 6px;
    border-color: transparent transparent #ffffff transparent;
}
span.top:hover{ -webkit-filter: contrast(1.5); }


/* ==========================================================================
	for 筆電
========================================================================== */

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

	.movie{ width: 80%; }

}
@media screen and (max-width: 1920px) and (max-height: 1080px) {

	.swiper-button-next, .swiper-button-prev{ top: 39%; }
	#section_4 .swiper-container .swiper-wrapper .swiper-slide .text-area-3{ top: 385px; }

}
@media screen and (max-width: 1920px) and (max-height: 1024px) {

	.swiper-button-next, .swiper-button-prev{ top: 42%; }
}
@media screen and (max-width: 1440px) and (max-height: 900px) {

	.swiper-button-next, .swiper-button-prev{ top: 46%; }
	.swiper-button-prev{ margin-left: -20px; }
	.swiper-button-next{ margin-right: -555px; }

	.swiper-container-horizontal>.swiper-pagination{ margin-left: 43%; top: 305px; }

}
@media screen and (max-width: 1366px) and (max-height: 768px) {

	section,#section_1{ height: 700px; }

	#section_1 .page-in{ padding-top: 74px; }
	.logo { margin: 0 auto; width: 20%;}
	.logo img{ width: 100%; }

	#section_1 .title{ font-size: 47px; margin-top: 3px; }
	#section_1 .title p{ font-size: 20.5px; }
	#section_1 .play-btn{ top: 285px; width: 80px; height: 80px; margin-left: -40px; }

	.app{ padding-top: 120px; }

	#section_2 h3, #section_3 h3, #section_4 h3, #section_5 h3, #section_6 h3{ padding-top: 40px; font-size: 25px;  }
	#section_4 h4, #section_5 h4, #section_6 h4{ font-size: 17px; }

	/* NEW */
	.news-tabNav li{ padding: 14px; }
	.news-tabNav li a{ font-size: 17px; }

	.news-area{ width: 660px; }
	.news-frame{ padding: 25px 30px; }
	.news-content{ height: 338px; }
	.news-content .news-list ul{ padding-bottom: 5px; }
	.news-content .news-list ul li.news-list-tabColor{ font-size: 13px; }
	.news-content .news-list ul li.news-list-title{ font-size: 15px; }
	.news-content .news-list ul li.news-list-date{ font-size: 14px; }

	/* 源神 */
	#section_4 h3{ margin-left: -73px; padding-top: 110px; }
	#section_4 h4{ margin-left: -129px; margin-top: -37px; }
	#section_4 p.section_4-title-s{ top: 182px; font-size: 15px; margin-left: -113px;  }

	#section_4 .swiper-container .swiper-wrapper .swiper-slide .chara-area { background-size: contain; }
	#section_4 .swiper-container .swiper-wrapper .swiper-slide .chara-1{ height: 566px; margin-left: -769px; }
	#section_4 .swiper-container .swiper-wrapper .swiper-slide .chara-2{ height: 625px; margin-left: -749px; }
	#section_4 .swiper-container .swiper-wrapper .swiper-slide .chara-3{ height: 643px; margin-left: -708px; }
	#section_4 .swiper-container .swiper-wrapper .swiper-slide .chara-4{ height: 673px; margin-left: -731px; }
	#section_4 .swiper-container .swiper-wrapper .swiper-slide .chara-5{ height: 656px; margin-left: -557px; margin-bottom: -4px; }
	#section_4 .swiper-container .swiper-wrapper .swiper-slide .chara-6{ height: 660px; margin-left: -673px; }
	#section_4 .swiper-container .swiper-wrapper .swiper-slide .chara-7{ height: 573px; margin-left: -686px; }
	#section_4 .swiper-container .swiper-wrapper .swiper-slide .chara-8{ height: 672px; margin-left: -688px; }

	#section_4 .swiper-container .swiper-wrapper .swiper-slide .text-area{ top: 205px; width: 400px; }
	#section_4 .swiper-container .swiper-wrapper .swiper-slide .text-area h5.name{ font-size: 60px; }
	#section_4 .swiper-container .swiper-wrapper .swiper-slide .text-area p.title{ margin-top: -115px; margin-bottom: 85px; }
	#section_4 .swiper-container .swiper-wrapper .swiper-slide .text-area .story p{ font-size: 14px; }

	/* 雅典娜 */
	#section_4 .swiper-container .swiper-wrapper .swiper-slide .text-area-3{ top: 290px; }
	#section_4 .swiper-container .swiper-wrapper .swiper-slide .text-area-3 span{ font-size: 31px; }
	#section_4 .swiper-container .swiper-wrapper .swiper-slide .text-area-3 p.title{ margin-bottom: 77px; }

	.swiper-container-horizontal>.swiper-pagination{ top: 187px; margin-left: 43%; }

	#section_4 span.color{ top: 185px; height: 265px; margin-left: -760px; }
	.swiper-button-prev{ top: 40%; width: 60px; margin-left: -33px;  }
	.swiper-button-next{ top: 40%; width: 60px; margin-right: -490px; }

	/* 天空塔 */
	/* #section_5{ background-size: 110%; } */
	#section_5 p{ font-size: 15px; padding: 2.5em 0; line-height: 1.8em; }
	#section_5 a{ width: 550px; height: 320px; }

	.movie{ padding: 10px 0; }
	.movie_yt{ width: 310px; height: 195px; }

	/* 影片頁 */
	#section_6{ min-height: 688px; }

}
@media screen and (max-width: 1356px) and (max-height: 688px) {

	#section_4 .swiper-container .swiper-wrapper .swiper-slide .text-area { top: 202px; }
	#section_4 .swiper-container .swiper-wrapper .swiper-slide .text-area-3 { top: 288px; }

	.swiper-button-prev,
	.swiper-button-next{ top: 44%; }
}
@media screen and (max-width: 940px) and (max-height: 900px) {

	.movie{ width: 100%; }

}
@media screen and (max-height: 688px) {}


/* ==========================================================================
	footer
========================================================================== */


#footer{ background: #1c1c1c; padding: 10px 0; }
#footer ul{ margin: 0 auto; text-align: center; }
#footer li{ display: inline-block; vertical-align: middle; }
#footer li img{ width: 100%; }

#footer .x-logo{ width: 160px; height: 40px; }
#footer .txt{ padding: 0 40px; color: #888; }
#footer .social-link{}
#footer .social-link a{
	position: relative;
	display: inline-block;
	color: #FFF;
	width: 30px;
	height: 30px;
}
#footer .social-link a:hover { padding-top: 2px; }
#footer .social-link a img{ width: 100%; }