@charset "utf-8";

::-webkit-scrollbar {
    background-color: transparent;
    width: 0px;
}
::-webkit-scrollbar-thumb {
    background-color: #4A4A4A;
}
::scrollbar {
    background-color: transparent;
    width: 0px;
}
::scrollbar-thumb {
    background-color: #4A4A4A;
}
/*RESET*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
img {max-width: 100%}
* {position: relative; outline: none;}

.clear_both {
	clear:both;
}

body {
	font-family: Arial, sans-serif, "Microsoft Yahei", "微软雅黑", "PingFang SC"; font-size:1em;
}
a {
    color: inherit;
    text-decoration: none;
}
li {
    display: block;
}
ul:after , .clear_fix:after {
    content: "";
    display: block;
    clear: both;
}
/*RESET*/
strong {
    font-weight: bold;
}
.cover_img {
    background-size: cover;
    width: 100%;
    height: 100%;
    background-position: center center;
	background-repeat: no-repeat;
}
.page {
    width: 100%;
    height: 100%;
}
.flex_w {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    z-index: 10;
}

/**********************************************/
body.gxn_body {
    background: #000;
    height: 100vh;
}
.gxn_main {
    position: fixed;
    z-index: 50;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
.gxn_bg {
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
}
.gxn_page {
    position: absolute;
    left: 4%;
    right: 8%;
    top: 7%;
    bottom: 7%;
	z-index: 20;
}
.gxn_p1 {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}
.gxn_tt {
    width: 100%;
}
.gxn_t1 {
    color: #fff;
    font-size: 3.25em;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 0.3em;
    line-height: 1.2;
    margin-left: -0.05em;
}
.gxn_more {
    color: #fff;
    font-size: 1em;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-top: 5rem;
}
.gxn_more a:after {
	content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: #fff;
}
.gxn_more a {
    display: inline-block;
    padding-bottom: 1em;
}
.gxn_more a span {
    display: block;
}
.gxn_pd_sw {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: 30;
}
.pd_bg_sl {
    background: #001ae1;
}
.gxn_pd01 {
    position: absolute;
    left: 4%;
    top: 0;
    bottom: 0;
    width: 50%;
    z-index: 30;
}
.gxn_ticon {
    margin-bottom: 5rem;
}
.gxn_pd02 {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 2;
    margin: auto;
    max-width: 55%;
}
.gxn_pd_img img {
    display: block;
	z-index: 10;
}
.gxn_t1.pd {
    font-size: 3em;
}
.gxn_pd_shadow {
    position: absolute;
    bottom: -20px;
    left: -13%;
    right: -13%;
    z-index: 1;
}
.pd_bg_tt {
    color: #fff;
    text-transform: uppercase;
    font-size: 6.5vw;
    font-weight: bold;
    opacity: 0.2;
    letter-spacing: 0.1em;
    margin-right: -0.185em;
}
.gxn_pd03 {
    position: absolute;
    right: 8%;
    top: 20%;
}
.pd_bg_tt {
    overflow: hidden;
    line-height: 0.8;
    height: 0.675em;
}
.gxn_pd04 {
    position: absolute;
    bottom: 0;
    right: 8%;
}
.pd_bottom_tt {
    color: #fff;
    line-height: 1.35;
    padding-right: 50px;
    padding-bottom: 50px;
}
.pd_bottom_tt:before {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    height: 1px;
    background: #fff;
    width: 50px;
    opacity: 0.3;
}
.pd_bottom_tt:after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    height: 50px;
    background: #fff;
    width: 1px;
    opacity: 0.3;
}
.gxn_pd_arr {
    position: absolute;
    top: 50%;
    right: 8%;
    margin-top: -25px;
    z-index: 60;
}
.gxn_pd_arr img {
    display: block;
}
.gxn_pd_arr > div {
    display: inline-block;
    margin-left: 10px;
    cursor: pointer;
}
.gxn_top_logo {
    position: fixed;
    z-index: 200;
    left: 4%;
    top: 7%;
    max-width: 160px;
}
.gxn_top_nav {
    position: fixed;
    z-index: 201;
    right: 4%;
    top: 7%;
    cursor: pointer;
    width: 135px;
}
.top_nav_btn {
    width: 50px;
    height: 22px;
    margin-left: auto;
}
.top_nav_btn span {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: #fff;
}
.top_nav_btn span:nth-child(1) {
    top: 0%;
}
.top_nav_btn span:nth-child(2) {
    top: 50%; margin-top: -1px;
}
.top_nav_btn span:nth-child(3) {
    top: 100%; margin-top: -2px;
}
.top_nav_name {
   /* position: absolute;
    left: 0;
    top: 0;*/
    height: 30px;
    line-height: 30px;
    color: #fff;
    /*letter-spacing: 0.2em;*/
  	width:50px;
  	margin-left:auto;
  padding-top:10px;
}
.gxn_pd_page {
    position: absolute;
    left: 0;
    right: 0;
    top: 7%;
    bottom: 7%;
}
.gxn_pd_nav {
    position: absolute;
    z-index: 30;
    bottom: 0;
    left: 4%;
    color: #fff;
    text-transform: uppercase;
    font-size: 0.875em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    right: 8%;
    max-width: 650px;
}
.gxn_pd_nav ul li {
    float: left;
    margin-right: 2em;
	cursor: pointer;
}
.gxn_pd_nav ul li span {
    display: block;
    padding-bottom: 1em;
}
.gxn_pd_nav ul li span:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: #fff;
    transition: 0.3s;
    opacity: 0;
}
.gxn_pd_nav ul li:hover span:after {
    opacity: 1;
}
.gxn_pd_nav ul li.active span:after {
    opacity: 1;
}
.gxn_pd_nav ul li {
    transition: 0.3s;
    opacity: 0.6;
}
.gxn_pd_nav ul li.active , .gxn_pd_nav ul li:hover {
    transition: 0.3s;
    opacity: 1;
}
.gxn_main_dots_w {
    position: absolute;
    right: 4%;
    top: 0%;
	bottom: 0%;
    z-index: 51;
	width: 2px;
}
.gxn_main_dots {
    width: 100%;
}
.gxn_main_dots > span {
    display: block;
    width: 1px;
    height: 30px;
    margin-bottom: 5px;
    opacity: 0.5;
    transition: 0.3s;
	background: #fff;
}
.gxn_main_dots > span.swiper-pagination-bullet-active {
    opacity: 1;
    transition: 0.3s;
}
.gxn_main_dots > span:before {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 2px;
    content: "";
    background: #fff;
    transition: 0.3s;
	opacity: 0;
}
.gxn_main_dots > span.swiper-pagination-bullet-active:before {
    transition: 0.3s;
	opacity: 1;
}
.gxn_p3_2 {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 55%;
}
.gxn_content {
    color: #fff;
    font-size: 1.2em;
    line-height: 1.5;
    width: 100%;
    max-width: 420px;
    margin: auto;
}
.gxn_content p:before {
    content: "";
    position: absolute;





    left: -4em;
    height: 2px;
    width: 15px;
    background: #bbbbbb;
    top: 0.25em;
}
.gxn_page_full {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
}
.gfl_c {
    float: left;
    width: 33.333%;
    height: 100%;
}
.fl_ac {
    font-size: 1.25em;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    padding: 0.5em 1.5em;
    color: #fff;
}
.gfl_c a {
    display: block;
    height: 100%;
    width: 100%;
}
.gfl_c:before {
    content: "";
    background: #000;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.5;
    transition: 1s;
}
.gfl_c:after {
    content: "";
    position: absolute;
    display: block;
    background: #fff;
    right: 0px;
    top: 0;
    bottom: 0;
    width: 1px;
    opacity: 0.3;
}
.gxn_p4_l .gfl_c:nth-child(3):after {
    opacity: 0;
}
.gfl_c.active:before {
    opacity: 0;
}
.gfl_c:hover::before {
    opacity: 0;
}
.fl_ac {
    transition: 0.3s;
}
.gfl_c.active .fl_ac , .gfl_c:hover .fl_ac {
    transition: 1s;
    color: #000;
}
.fl_ac:before {
    content: "";
    display: block;
    position: absolute;
    background: #fff;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: 1s;
    transform: scale(0,1);
    transform-origin: left bottom;
    transition-timing-function: cubic-bezier(0.52, 0, 0.08, 1);
}
.gfl_c.active .fl_ac:before , .gfl_c:hover .fl_ac:before {
    transform: scale(1,1);
}
.gxn_p4_bg_l {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
	transition: 1s;
	opacity: 0;
}
.gxn_p4_bg_l.active {
	transition: 1s;
	opacity: 1;
}
.gxn_p5_2 {
    position: absolute;
    right: -10%;
    top: -9%;
    bottom: -9%;
    left: 60%;
    background: rgba(0, 0, 0, 0.6);
    padding-right: 10%;
    margin-left: auto;
    max-width: 550px;
}
.contact_c {
    color: #fff;
    line-height: 1.5;
    width: 100%;
    max-width: 460px;
    box-sizing: border-box;
    padding: 3em;
}
.contact_c p {
    margin: 0.5em 0;
}
.gxn_top_menu {
    position: fixed;
    z-index: 199;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.gxn_top_m01 {
    position: absolute;
    top: 0;
    left: 20%;
    bottom: 0;
    right: 20%;
}
ul.gxn_tfm {
    width: 100%;
    color: #fff;
    font-size: 1.5em;
    font-weight: bold;
    text-transform: uppercase;
    line-height:2.2;
    letter-spacing: 0.05em;
}
ul.gxn_tfm li a {
    display: inline-block;
    margin: 0.2em 0;
}
ul.gxn_tfm li a:hover {
    color:#a70918;
}
ul.gxn_tfm li a:hover :after {
    color:#a70918;
}
ul.gxn_tfm li a::after {
    content: "";
    background: #a70918;
    width: 0px;
    height: 1px;
    display: block;
    left: 120px;
    position: absolute;
    top: 28px;
    transition: all .45s;
}
ul.gxn_tfm li a:hover:after {
    content: "";
    background: #a70918;
    width: 160px;
    top: 28px;
}

.gxn_top_menu {
    transition: 1s;
    transform: translate3d(0,-100%,0);
	overflow: hidden;
	transition-timing-function: cubic-bezier(0.52, 0, 0.08, 1);
}
.gxn_top_menu > div {
    transition: 1s;
    transform: translate3d(0,100%,0);
	overflow: hidden;
	transition-timing-function: cubic-bezier(0.52, 0, 0.08, 1);
	opacity: 0.2;
}
.m_open .gxn_top_menu {
    transition: 1s;
    transform: translate3d(0%,0,0);
	transition-timing-function: cubic-bezier(0.52, 0, 0.08, 1);
}
.m_open .gxn_top_menu > div {
    transition: 1s;
    transform: translate3d(0%,0,0);
	transition-timing-function: cubic-bezier(0.52, 0, 0.08, 1);
	opacity: 1;
}
.top_nav_btn span {
    transition: 0.3s;
}
.top_nav_btn {
    transition: 0.3s;
    overflow: hidden;
}
.m_open .top_nav_btn span:nth-child(1) {
    transform: translate3d(70%,0,0);
}
.m_open .top_nav_btn span:nth-child(3) {
    transform: translate3d(-70%,0,0);
}
.top_nav_name {
    overflow: hidden;
}
.top_nav_name span {
    display: block;
    transition: 0.3s;
    font-size: 0.925em;
}
.m_open .top_nav_name span {
    transform: translate3d(0,-50%,0);
}
.gxn_t1 {
    display: inline-block;
}
.gxn_t1 h1.smallt {
    font-size: 1.75rem;
    font-weight: normal;
}
.gxn_pd_sw > .swiper-wrapper, .gxn_bg > .swiper-wrapper .swiper-slide, .gxn_pd_img {
    transition-timing-function: cubic-bezier(0.52, 0, 0.08, 1);
    transition-delay: 0s;
    will-change: transform;
}

.gxn_main > .swiper-wrapper {
    transition-timing-function: cubic-bezier(0.52, 0, 0.08, 1);
    transition-delay: 0s;
}

.gxn_pd_img {
    transition-duration: 2.5s;
   transform: perspective(1000px) translate3d(0%,0,0px);
}
.sw_prev .gxn_pd_img {
    transition-duration: 2s;
    transform: perspective(1000px) translate3d(-80%,0,-300px);
}
.sw_next .gxn_pd_img {
    transition-duration: 2s;
	transform: perspective(1000px) translate3d(80%,0,-300px);
}
.gxn_pd_arr > div {
    transition: 0.3s;
    opacity: 1;
}
.gxn_pd_arr > div.swiper-button-disabled {
    transition: 0.3s;
    opacity: 0.5;
}

.trs01 , .char1 {
	transition-delay: 0.1s;
}
.trs02 , .char2 {
	transition-delay: 0.25s;
}
.trs03 , .char3 {
	transition-delay: 0.4s;
}
.trs04 , .char4 {
	transition-delay: 0.55s;
}
.trs05 , .char5 {
	transition-delay: 0.7s;
}
.trs06 , .char6 {
	transition-delay: 0.85s;
}
.trs07 , .char7 {
	transition-delay: 1s;
}
.trs08 , .char8 {
	transition-delay: 1.15s;
}
.trs09 , .char9 {
	transition-delay: 1.3s;
}
.trs10 , .char10 {
	transition-delay: 1.45s;
}

.an_up {
    transform: translate3d(0,100px,0);
    opacity: 0;
}
.main_prev .an_up , .main_next .an_up {
    transition: opacity 0.65s 0s, transform 0s 0.65s;
}
.main_active .an_up {
    transition-duration: 2.5s;
    transform: translate3d(0,0px,0);
    opacity: 1;
	transition-timing-function: cubic-bezier(0.2, 0.19, 0.08, 1);
}

.an_left {
    transform: translate3d(-100px,0,0);
    opacity: 0;
}
.main_prev .an_left , .main_next .an_left {
    transition: opacity 0.65s 0s, transform 0s 0.65s;
}
.main_active .an_left {
    transition-duration: 2.5s;
    transform: translate3d(0,0px,0);
    opacity: 1;
	transition-timing-function: cubic-bezier(0.2, 0.19, 0.08, 1);
}

.gxn_ticon , .gxn_t1.pd h1 , .pd_ccc .gxn_more {
    transform: translate3d(0,150px,0);
    opacity: 0;
	transition: opacity 0.65s 0s, transform 0s 0.65s;
}
.main_active .sw_active .gxn_ticon , .main_active .sw_active .gxn_t1.pd h1:nth-child(1) , .main_active .sw_active .gxn_t1.pd h1:nth-child(2)  , .main_active .sw_active .pd_ccc .gxn_more {
    transform: translate3d(0,0px,0);
    opacity: 1;
	transition-timing-function: cubic-bezier(0.2, 0.19, 0.08, 1);
}
.main_active .sw_active .gxn_ticon {
	transition: opacity 1.2s 0.1s, transform 1.2s 0.1s;
}
.main_active .sw_active .gxn_t1.pd h1:nth-child(1) {
	transition: opacity 1.2s 0.25s, transform 1.2s 0.25s;
}
.main_active .sw_active .gxn_t1.pd h1:nth-child(2) {
	transition: opacity 1.2s 0.4s, transform 1.2s 0.4s;
}
.main_active .sw_active .pd_ccc .gxn_more {
	transition: opacity 1.2s 0.55s, transform 1.2s 0.55s;
}

.pd_bottom_tt p span {
    display: block;
	transform: translate3d(0,-50px,0);
    opacity: 0;
	transition: opacity 0.3s 0s, transform 0s 0.3s;
}
.main_active .sw_active .pd_bottom_tt p span {
	transform: translate3d(0,0px,0);
    opacity: 1;
	transition-timing-function: cubic-bezier(0.2, 0.19, 0.08, 1);
}
.main_active .sw_active .pd_bottom_tt p span:nth-child(4) {
	transition: opacity 1.2s 0.1s, transform 1.2s 0.1s;
}
.main_active .sw_active .pd_bottom_tt p span:nth-child(3) {
	transition: opacity 1.2s 0.25s, transform 1.2s 0.25s;
}
.main_active .sw_active .pd_bottom_tt p span:nth-child(2) {
	transition: opacity 1.2s 0.4s, transform 1.2s 0.4s;
}
.main_active .sw_active .pd_bottom_tt p span:nth-child(1) {
	transition: opacity 1.2s 0.55s, transform 1.2s 0.55s;
}

.pd_bottom_tt:before {
    transition: 0.2s;
    transform-origin: right;
    transform: scale(0,1);
	transition-timing-function:linear;
}
.pd_bottom_tt:after {
    transition: 0.2s 0.2s;
    transform-origin: top;
    transform: scale(1,0);
	transition-timing-function:linear;
}
.main_active .sw_active .pd_bottom_tt:after {
    transition: 0.8s;
    transform: scale(1,1);
	transition-timing-function:linear;
}
.main_active .sw_active .pd_bottom_tt:before {
    transition: 0.8s 0.8s;
    transform: scale(1,1);
	transition-timing-function:linear;
}

/*Trans_X*/
/*.gxn_sl {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition-duration: 0s;
    transform: translate3d(100%,0,0);
	transition-timing-function: cubic-bezier(0.52, 0, 0.08, 1);
	transition-delay: 1.8s;
	z-index: 10;
}
.swiper-slide-active.gxn_sl {
    transition-duration: 1.8s;
    transform: translate3d(0%,0,0);
	transition-delay: 0s;
	z-index: 20;
}
.main_prev.gxn_sl {
    transition-duration: 0s;
    transform: translate3d(-100%,0,0);
	transition-delay: 1.8s;
	z-index: 10;
}
.main_next.gxn_sl {
    transition-duration: 0s;
    transform: translate3d(100%,0,0);
	transition-delay: 1.8s;
	z-index: 10;
}

.gxl_sl_pcc {
	transition-duration: 0s;
    transform: translate3d(-100%,0,0);
	transition-timing-function: cubic-bezier(0.52, 0, 0.08, 1);
	transition-delay: 1.8s;
}
.main_prev .gxl_sl_pcc {
    transition-duration: 0s;
    transform: translate3d(100%,0,0);
	transition-delay: 1.8s;
	z-index: 10;
}
.main_next .gxl_sl_pcc {
    transition-duration: 0s;
    transform: translate3d(-100%,0,0);
	transition-delay: 1.8s;
	z-index: 10;
}
.swiper-slide-active .gxl_sl_pcc {
	transition-duration: 1.8s;
    transform: translate3d(00%,0,0);
	transition-delay: 0s;
}*/
/*Trans_X*/

/*Trans_Y*/
.gxn_sl {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition-duration: 0s;
    transform: translate3d(0,100%,0);
    transition-timing-function: cubic-bezier(0.52, 0, 0.08, 1);
    transition-delay: 1.8s;
    z-index: 10;
    will-change: transform;
}
.swiper-slide-active.gxn_sl {
    transition-duration: 1.8s;
    transform: translate3d(0,0,0);
	transition-delay: 0s;
	z-index: 20;
}
.main_prev.gxn_sl {
    transition-duration: 0s;
    transform: translate3d(0,-100%,0);
	transition-delay: 1.8s;
	z-index: 10;
}
.main_next.gxn_sl {
    transition-duration: 0s;
    transform: translate3d(0,100%,0);
	transition-delay: 1.8s;
	z-index: 10;
}

.gxl_sl_pcc {
	transition-duration: 0s;
    transform: translate3d(0,-100%,0);
	transition-timing-function: cubic-bezier(0.52, 0, 0.08, 1);
	transition-delay: 1.8s;
}
.main_prev .gxl_sl_pcc {
    transition-duration: 0s;
    transform: translate3d(0,100%,0);
	transition-delay: 1.8s;
	z-index: 10;
}
.main_next .gxl_sl_pcc {
    transition-duration: 0s;
    transform: translate3d(0,-100%,0);
	transition-delay: 1.8s;
	z-index: 10;
}
.swiper-slide-active .gxl_sl_pcc {
	transition-duration: 1.8s;
    transform: translate3d(00%,0,0);
	transition-delay: 0s;
}
/*Trans_Y*/

.gxn_t1.p1 {
    font-size: 5vw;
    text-align: center;
    display: block;
    text-shadow: 0px 20px 80px #000;
    padding-left: 0.3em;
}
.gxn_page.p1 {
    right: 4%;
}
.gxn_more.p1 {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
}

.loading {
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000;
}
.load_aim {
    width: 100%;
    text-align: center;
}
.load_anc {
    width: 2px;
    height: 200px;
    margin: auto;
	overflow: hidden;
}
.load_anc span {
    display: block;
    width: 100%;
    height: 100%;
    background: #fff;
	animation-name: anim_load;
	animation-duration: 1.5s;
	animation-timing-function: cubic-bezier(0.52, 0, 0.08, 1);
	animation-iteration-count: infinite;
}
@keyframes anim_load {
	0% { 
		transform: translate3d(0,100%,0);
	}
	50% { 
		transform: translate3d(0,0%,0);
	}
	100% { 
		transform: translate3d(0,-100%,0);
	}
}
.load_text {
    position: absolute;
    color: #fff;
    top: 50%;
    margin-top: -0.5em;
    text-transform: uppercase;
    opacity: 0.2;
    letter-spacing: 0.5em;
    font-weight: bold;
    margin-left: 0.25em;
}

#gxn_p1_bg {
    background: #000000;
}
#gxn_p1_bg > div {
    transition: 0.5s;
    opacity: 0;
	transform: perspective(1000px) translate3d(0,80px,-100px);
	transform-origin: bottom;
}
.loaded #gxn_p1_bg > div {
    transition: 8s 0.5s;
    opacity: 1;
	transform: perspective(1000px) translate3d(0,0,0px);
}
.loaded .main_prev #gxn_p1_bg > div {
    transition: 2s;
    opacity: 0;
	transform: perspective(1000px) translate3d(0,-100px,-50px);
}

.gxn_t1 span {
    display: inline-block;
}
.gxn_t1 h1 {
    overflow: hidden;
}

.gxn_pd02 {
    transition: 2s;
    transform: perspective(1000px) translate3d(0,0,-150px);
	opacity: 1;
}
.swiper-slide-active.gxn_sl .gxn_pd02 {
    transition: 3.8s 0.2s;
    transform: perspective(1000px) translate3d(0,0,00px);
	opacity: 1;
}
.main_next.gxn_sl .gxn_pd02 {
    transition: 2s;
    transform: perspective(1000px) translate3d(0,0,100px);
	opacity: 1;
}

.gxn_pd03 > div > h1 {
	transition: 1.5s;
    transform: perspective(1000px) translate3d(0,100%,0);
	opacity: 0;
}
.swiper-slide-active.gxn_sl .gxn_pd03 > div > h1 {
	transition: 2s 1s;
    transform: perspective(1000px) translate3d(0,0,0);
	opacity: 1;
}

.gxn_pd_arr , .gxn_pd_nav {
    opacity: 0;
	transition: 2s;
}
.main_active .gxn_pd_arr , .main_active .gxn_pd_nav {
    opacity: 1;
	transition: 1s;
}

#gxn_p3_bg {
    background: #101010;
}
#gxn_p3_bg > div {
    transition: 3s;
    opacity: 0;
    transform: perspective(1000px) translate3d(-50px,0,00px);
    transform-origin: right;
	transition-timing-function: cubic-bezier(0.52, 0, 0.08, 1);
}
.swiper-slide-active.gxn_sl #gxn_p3_bg > div {
    transition: 5s 0s;
    opacity: 1;
    transform: perspective(1000px) translate3d(0px,0,0);
}

#gxn_p4_bg {
    background: #000;
}
#gxn_p4_bg {
    transition: 0s 2s;
    opacity: 1;
    transform: perspective(1000px) translate3d(0,0,100px);
	transition-timing-function: cubic-bezier(0.52, 0, 0.08, 1);
}
.swiper-slide-active.gxn_sl #gxn_p4_bg {
    transition: 5s 0s;
    opacity: 1;
    transform: perspective(1000px) translate3d(0,0,0px);
}

#gxn_p5_bg {
    background: #000;
}
#gxn_p5_bg {
    transition: 0s 2s;
    opacity: 1;
    transform: perspective(1000px) translate3d(0,0,100px);
	transition-timing-function: cubic-bezier(0.52, 0, 0.08, 1);
}
.swiper-slide-active.gxn_sl #gxn_p5_bg {
    transition: 5s 0s;
    opacity: 1;
    transform: perspective(1000px) translate3d(0,0,0px);
}

.gxn_p5_2 {
	transition: 0s 2s;
    opacity: 1;
    transform: perspective(1000px) translate3d(100%,0,0);
	transition-timing-function: cubic-bezier(0.52, 0, 0.08, 1);
}
.main_active .gxn_p5_2 {
	transition: 1.5s 0.3s;
    opacity: 1;
    transform: perspective(1000px) translate3d(0%,0,0);
	transition-timing-function: cubic-bezier(0.52, 0, 0.08, 1);
}

.contact_c  {
    transition: 0s 2s;
    opacity: 0;
    transform: perspective(1000px) translate3d(0px,0,0);
	transition-timing-function: cubic-bezier(0.52, 0, 0.08, 1);
}
.main_active .contact_c  {
    transition: 2s 0.8s;
    opacity: 1;
    transform: perspective(1000px) translate3d(0,0px,0);
	transition-timing-function: cubic-bezier(0.52, 0, 0.08, 1);
}

#gxn_pd_bg {
	pointer-events: none;
}

ul.gxn_tfm li {
    transition-duration: 1s;
    transform: translate3d(0,-50px,0);
    opacity: 0;
}
.m_open ul.gxn_tfm li {
    transition-duration: 2s;
    transform: translate3d(0,0px,0);
    opacity: 1;
}

video.vdo_fbg {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 10;
    -o-object-fit: cover;
    object-fit: cover;
    opacity: 0.8;
    pointer-events: none;
    width: 100%;
    height: 100%;
}

.gxn_more a {
    overflow: hidden;
}
.gxn_more a:after {
    transition: 1s;
	transform: translate3d(0,0px,0);
	transition-timing-function: cubic-bezier(0.52, 0, 0.08, 1);
}
.gxn_more a:hover::after {
    transition: 0.7s;
	transform: translate3d(100%,0px,0);
}

.gxn_more a:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: #fff;
}
.gxn_more a:before {
    transition: 0.7s;
	transform: translate3d(-100%,0px,0);
	transition-timing-function: cubic-bezier(0.52, 0, 0.08, 1);
}
.gxn_more a:hover::before {
    transition: 1s;
	transform: translate3d(0%,0px,0);
}
.gxn_lang_sw {
    color: #FFF;
    position: fixed;
    z-index: 200;
    left: calc(4% + 200px);
    top: 7%;
}
.gxn_lang_sw a {
    display: inline-block;
    background: rgba(255, 255, 255, 0);
    color: #fff;
    line-height: 30px;
    width: 30px;
    text-align: center;
    font-size: 0.75em;
    margin-right: 0.5em;
    border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, 0.39);
}


/*For Mobile*/
@media (max-width:800px){
.gxn_top_logo {
    position: fixed;
    z-index: 200;
    left: 5%;
    top: 5%;
    max-width: 120px;
}
.gxn_top_nav {
    position: fixed;
    z-index: 201;
    right: 5%;
    top: 5%;
    cursor: pointer;
    width: 100px;
    font-size: 0.9em;
}
.top_nav_btn {
    width: 30px;
    height: 22px;
    margin-left: auto;
}
.gxn_top_m01 {
    position: absolute;
    top: 0;
    left: 5%;
    bottom: 0;
    right: 5%;
    font-size: 0.8em;
}
.gxn_t1.p1 {
    font-size: 8vw;
    text-align: center;
    display: block;
    text-shadow: 0px 20px 80px #000;
    padding-left: 0.3em;
	padding-bottom: 5em;
}
.gxn_bg#gxn_p1_bg {
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    bottom: 10%;
    top: 33%;
}
.gxn_main_dots > span {
    height: 15px;
}
.gxn_ticon {
    margin-bottom: 1rem;
}
.gxn_t1.pd {
    font-size: 1.5em;
}
.gxn_more {
    color: #fff;
    font-size: 0.75em;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-top: 5rem;
}
.gxn_pd_page {
    position: absolute;
    left: 0;
    right: 0;
    top: 15%;
    bottom: 5%;
}
.gxn_pd01 .gxn_tt {
    position: absolute;
    top: 5%;
    bottom: 0;
    left: 0;
    right: 0;
}
.gxn_pd01 .gxn_more {
    font-size: 0.75em;
    position: absolute;
    bottom: 0;
    left: 0;
}
.gxn_pd01 {
    position: absolute;
    left: 5%;
    top: 0;
    bottom: 0;
    width: 50%;
    z-index: 30;
}
.gxn_pd_nav {
    display: none;
}
.pd_bottom_tt p {
    display: none;
}
.gxn_pd03 {
    display: none;
}
.gxn_pd02 {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 2;
    margin: auto;
    max-width: 90%;
}
.gxn_pd_shadow {
    position: absolute;
    bottom: -10px;
    left: -13%;
    right: -13%;
    z-index: 1;
}
.gxn_pd_arr {
    position: absolute;
    top: auto;
    right: 8%;
    margin-top: 0;
    z-index: 60;
    bottom: 0;
}
.gxn_pd_arr img {
    display: block;
    width: 35px;
}
.gxn_pd_arr > div {
    display: inline-block;
    margin-left: 3px;
    cursor: pointer;
}
.pd_bottom_tt {
    display: none;
}
.gxn_t1 {
    font-size: 1.5em;
}
.p3 .gxn_tt {
    position: absolute;
    top: 6.5%;
    left: 0;
    bottom: 0;
}
.gxn_page {
    position: absolute;
    left: 5%;
    right: 8%;
    top: 15%;
    bottom: 5%;
	z-index: 20;
}
.p3  .gxn_more {
    font-size: 0.75em;
    position: absolute;
    bottom: 0;
    left: 0;
}
.gxn_p3_2 {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 8%;
    left: 0;
}
.gxn_p1.p3 {
    z-index: 30;
}
.gfl_c {
    float: left;
    width: 100%;
    height: 20%;
}
div#gxn_p4_l {
    box-sizing: border-box;
    padding-top: 45%;
}
.ct  .gxn_tt {
    position: absolute;
    top: 5%;
    bottom: 0;
    left: 0;
}
.ct  .gxn_more {
    font-size: 0.75em;
    position: absolute;
    bottom: 0;
    left: 0;
}
.gxn_p5_2 {
    position: absolute;
    right: 8%;
    top: 5%;
    bottom: 5%;
    left: 0;
    background: rgba(0, 0, 0, 0);
    padding-right: 0;
    margin-left: auto;
    max-width: none;
}
.contact_c {
    color: #fff;
    line-height: 1.5;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    padding: 0;
    font-size: 0.9em;
}
.fl_ac {
    font-size: 1em;
}
.gfl_c a {
    pointer-events: none;
}
.gfl_c.active a {
    pointer-events: auto;
}
.gxn_ticon img {
    width: 17px;
}
#gxn_p5_bg {
    transition: 2s;
    opacity: 1;
    transform: perspective(1000px) translate3d(0,0,00px);
    transition-timing-function: cubic-bezier(0.52, 0, 0.08, 1);
}
#gxn_p4_bg {
    transition: 2s;
    opacity: 1;
    transform: perspective(1000px) translate3d(0,0,00px);
    transition-timing-function: cubic-bezier(0.52, 0, 0.08, 1);
}
}
.navlogo{
	position:absolute;
  	top:200px;
  	margin-left:50%;
  	width:auto;
  	z-index:999;
}

.navlx{
  padding-top:10%;
  padding-left:20px;
	font-size:16px;
  	line-height:200%;
}