@charset "big5";
@import url("../../../css/_reset.css");
@import url("../../../css/fancybox/jquery.fancybox.css");
@import url("../../../css/swiper/swiper.min.css");
/*--------------------------------------------------------------------------
common
--------------------------------------------------------------------------*/
#googleCode { position: absolute; z-index: 800;left: 0;top: -50px; }
#XlegendTop {
	position: relative;
	z-index: 900;
}
body {
	background: #000;
	color: #fff;
	font-family:"·L³n¥¿¶ÂÅé",Arial,sans-serif;
	overflow-x: hidden;
}
.textHide {
	white-space: nowrap;
  text-indent: 200%;
  overflow: hidden;
  display: block;
}


section {
	height: 1080px;
	position: relative;
}

.container {
	/*width: 1024px;*/
	/*height: 100%;*/
	margin: 0 auto;
	position: relative;
	z-index: 10;
}

/*--------------------------------------------------------------------------
Menu
--------------------------------------------------------------------------*/


#menu {
	text-align: center;
	position: absolute;
	z-index: 20;
	width: 100%;
	top: 800px;
}
#menu li {
	display: inline-block;
	margin: 0 15px;
	width: 310px;
	height: 92px;
	position: relative;
}
#menu li a {
	background: url("../images/menu.png") no-repeat;
	display: inline-block;
	width: 310px;
	height: 92px;
	white-space: nowrap;
  text-indent: 200%;
  overflow: hidden;
  display: block;
}
#menu .m1 a {
	
}
#menu .m1 a:hover,
#menu .m1 a.focus {
	background-position: 0 -91px;
}

#menu .m2 a {
	background-position: -332px 0px;
}
#menu .m2 a:hover,
#menu .m2 a.focus {
	background-position: -332px -91px;
}


#menu .m3 a {
	background-position: -663px 0px;
}
#menu .m3 a:hover,
#menu .m3 a.focus {
	background-position: -663px -91px;
}

/*
#menu.fixed li {  }
#menu.fixed .m1 { animation: menu_1_Move .5s ease forwards; }
#menu.fixed .m2 { animation: menu_2_Move .5s ease forwards; }
#menu.fixed .m3 { animation: menu_3_Move .5s ease forwards; }

#menu.back .m1 { animation: menu_1_Back .5s ease forwards; }
#menu.back .m2 { animation: menu_2_Back .5s ease forwards; }
#menu.back .m3 { animation: menu_3_Back .5s ease forwards; }


@keyframes menu_1_Move {
  0%   { 
	top: 101px;right: 50%; margin-right: -420px;	
  }
  100%  { 
  	top: 50%; right: 10px; margin: -140px 0 0 ;
  }
}


@keyframes menu_2_Move {
  0%   { 
	top: 55px; right: 50%; margin-right: -500px;	
  }
  100%  {    	
   	top: 50%; right: 10px; margin: -42px 0 0 ;
  }
}

@keyframes menu_3_Move {
  0%   { 
	top: 149px; right: 50%; margin-right: -500px;	
  }
  100%  {    	
   	top: 50%; right: 10px; margin: 52px 0 0 ;
  }
}

@keyframes menu_1_Back {
  0%   { 
	top: 50%; right: 10px; margin: -140px 0 0 ;
  }
  100%  { 
  	
  	top: 101px;right: 50%; margin-right: -420px;	
  }
}


@keyframes menu_2_Back {
  0%   { 
	top: 50%; right: 10px; margin: -42px 0 0 ;
  }
  100%  {    	
   	
   	top: 55px; right: 50%; margin-right: -500px;	
  }
}

@keyframes menu_3_Back {
  0%   { 
	top: 50%; right: 10px; margin: 52px 0 0 ;
  }
  100%  {    	
   	
   	top: 149px; right: 50%; margin-right: -500px;	
  }
}
*/


/*--------------------------------------------------------------------------
Nav
--------------------------------------------------------------------------*/

/* Navegação lateral */
#side_navigation_wrap {
    position: fixed; /* Fixa a navegação lateral na tela */
    top: 0; /* Ajuste a distância do topo */
    right: 0;
    width: 200px; /* Largura da navegação lateral */
    height: 100%; /* Altura total da tela */
    z-index: 20; /* Garante que fique acima de outros elementos */
}

#side_navigation {
    display: flex;
    flex-direction: column; /* Organiza os itens verticalmente */
    margin-top: 63px; /* Ajuste a margem superior conforme necessário */
    padding-right: 10px; /* Adiciona um pequeno espaço interno à direita para evitar corte */
}

.nav_item {
    display: block;
    padding: 20px;
    color: #e0e0e0; /* Cor do texto */
    text-decoration: none;
    border-radius: 8px; /* Bordas mais arredondadas para um visual mais suave */
    transition: background 0.3s, color 0.3s, box-shadow 0.3s, transform 0.3s; /* Transições suaves */
    border: 1px solid rgba(255, 255, 255, 0.5); /* Borda sutil com transparência */
    background: linear-gradient(145deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.9)); /* Gradiente escuro */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Sombra suave */
    margin-bottom: 2px; /* Espaço entre os botões */
}

.nav_item:hover {
    color: #ffcc00; /* Cor do texto ao passar o mouse */
    background: linear-gradient(145deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8)); /* Gradiente mais claro ao passar o mouse */
    border-color: rgba(255, 255, 255, 0.7); /* Borda mais visível ao passar o mouse */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4); /* Sombra mais pronunciada ao passar o mouse */
    transform: scale(1.05); /* Efeito de aumento ao passar o mouse */
}

.nav_item:focus {
    outline: none; /* Remove o contorno padrão */
    border-color: #ffcc00; /* Borda destacada para acessibilidade */
    box-shadow: 0 0 0 3px rgba(255, 204, 0, 0.3); /* Sombra de foco para acessibilidade */
}

.nav_item.active {
    color: #ffcc00; /* Cor do texto para o item ativo */
    background: linear-gradient(145deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 1)); /* Gradiente mais escuro para o item ativo */
    border-color: rgba(255, 255, 255, 0.7); /* Borda mais visível para o item ativo */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); /* Sombra mais pronunciada para o item ativo */
    transform: translateY(-2px); /* Efeito de elevação para o item ativo */
}


/*--------------------------------------------------------------------------
Intro
--------------------------------------------------------------------------*/

#intro {
	background: url("../images/bg_1.jpg") center no-repeat;
}
.slogan_1,.slogan_2 {
	position: absolute;
	opacity: 0;
}

.logo {
	position: absolute;
	width: 373px;
	height: 251px;
	left: 28%;
	margin-left: -512px;
	top: 12px;
}
.logo a {
	display: block;
	width: 100%;
	height: 100%;
	background-image: url("../images/logo.png");
	background-repeat: no-repeat;
}

.movie {
	position: absolute;
	width: 114px;
	height: 127px;
	background: url("../images/movie_click.html") no-repeat;
	left: 50%;
	margin-left: -333px;
	top: 490px;
}
.movie a {
	display: block;
	width: 100%;
	height: 100%;
}
/*--------------------------------------------------------------------------
Page common
--------------------------------------------------------------------------*/

section .content {
	position: relative;
	z-index: 10;
	line-height: 1.5em;
	font-size: 15px;
	
}
section .content p {
	text-shadow: 0 0 10px #000,
	0 0 10px #000,
	0 0 10px #000;
}
section .content em {
	color: #fff77f;
	font-weight: bold;
	font-style: normal;
}
section .content:after {
	content: " ";
	display: block;
	font-size: 0;
	height: 0;
	clear: both;
	visibility: hidden;
}
* html section .content,
*:first-child + html section .content {
  zoom: 1;
}

/*--------------------------------------------------------------------------
Page_1
--------------------------------------------------------------------------*/
#page_1 {
	background: url("../images/bg_2.jpg") center no-repeat;
}

#page_1 h3 {
	background: url("../images/title_page_1.png") no-repeat;
	width: 345px;
	height: 97px;
	margin-left: 32px;
	/*float: right;*/
}
#page_1 .container {
	left: 50%;
	margin-left: -200px;
}
#page_1 .content {
	padding-top: 100px;
	width: 895px;
}
#page_1 p {
	padding: 0 50px;
}

/*--------------------------------------------------------------------------
Page_2
--------------------------------------------------------------------------*/
#page_2 {
	background: url("../images/bg_3.jpg") center no-repeat;
}
#page_2 h3 {
	background: url("../images/title_page_2.png") no-repeat;
	width: 211px;
	height: 97px;
}

#page_2 .container {
	left: 50%;
	margin-left: -700px;
	width: 700px;
}
#page_2 .content {
	padding-top: 100px;
}

/*--------------------------------------------------------------------------
Page_3
--------------------------------------------------------------------------*/
#page_3 {
	background: url("../images/bg_4.jpg") center no-repeat;
}
#page_3 h3 {
	background: url("../images/title_page_3.png") no-repeat;
	width: 364px;
	height: 97px;
	/*margin: 0 auto 10px;*/
}


#page_3 .container {
	left: 50%;
	margin-left: -650px;
}
#page_3 .content {
	padding-top: 100px;
	width: 895px;
}
#page_3 p {
	padding: 0 50px;
}

.scene {
	position: relative;
	width: 895px;
	z-index: 10;
}
.scene:after {
	content: "";
	position: absolute;
	background-image: url("../images/pic_border.png");
	background-repeat: no-repeat;
	width: 895px;
	height: 584px;
	z-index: 12;
	left: 0;
	top: 0;
}

.scene .swiper-container {
	width: 787px;
	margin-left: 50px;
	padding-top: 68px;
}
.scene .swiper-button-prev,
.scene .swiper-button-next {
	position: absolute;
	width: 63px;
	height: 77px;
	background-image: url("../images/arrow.png");
	background-repeat: no-repeat;
	background-position: left 0;
	top: 50%;
	margin-top: -38px;
	z-index: 22;
	background-size: 126px 77px;
}
.scene .swiper-button-prev {
	left: -10px;
}
.scene .swiper-button-next {
	right: -10px;
	background-position: right 0;
}

.scene .swiper-pagination {
	    bottom: 10px;
    left: 0;
    width: 100%;
    z-index: 20;

}

.scene .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    display: inline-block;
    border-radius: 100%;
    background: #fff;
    opacity: .7;
    margin: 0 5px;
}

.scene .swiper-pagination-bullet-active {
    opacity: 1;
    background: #007aff
}
/* ==========================================================================
  footer
========================================================================== */
#footer {
  width: 100%;
  height: 70px;
  background: #252629;
  position: relative;
  z-index: 101;
}

#footer ul {
  width: 930px;
  margin: 0 auto;
  padding: 0;
  height: 70px;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

#footer li {
  display: flex;
  align-items: center;
}

.logo_cr {
  margin-right: 15px; /* Espaco entre a logo_cr e o proximo item */
}

li.txt {
  font-size: 16px;
  color: #ffffff;
  font-family: Arial;
}

.social-media {
  display: flex;
  gap: 10px; /* Espaco entre os icones */
  margin-left: 15px; /* Espaco entre o texto e os icones sociais */
}

.social-media a {
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s ease, background-color 0.3s ease;
  border-radius: 50%; /* Torna os icones circulares */
  overflow: hidden;
  position: relative;
}

.social-media a img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Garante que a imagem preencha o conteiner */
  transition: opacity 0.3s ease;
  position: absolute;
  top: 0;
  left: 0;
}

.social-media a img.hover {
  opacity: 0;
}

.social-media a:hover img.hover {
  opacity: 1; /* Mostra a imagem de hover */
}

.social-media a:hover img.default {
  opacity: 0; /* Esconde a imagem normal */
}