@charset "utf-8";
/*--------------------------------------
	copyright :Lampros co.,Ltd.
	-----------------------------------*/


/* layout
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
body { background-color: #df4c18; }

/* body-wrap ----------*/
#body-wrap { position: relative; width: calc(100vw - 6rem); height: 100vh; overflow: hidden; margin-left: 75px; }
#body-wrap img { max-width: 100%; }
#body-wrap a:link, #body-wrap a:visited {}
@media screen and (max-width:1024px) { /* iPad 横 l */
	#body-wrap { width: 100%; height: auto; overflow: visible; margin-left: 0; margin-top: 6rem; }
}

/* contents-wrap ----------*/
#contents-wrap { position: absolute; top: 0; left: 0; width: inherit; transition: left 0.3s ease-out; }
#contents-wrap .section { position: relative; width: 100%; height: 100vh; overflow: hidden; }
#contents-wrap .inner { position: relative; z-index: 30; }
#contents-wrap h2 { position: relative; line-height: 1; font-size: 4rem; font-family: "微软雅黑", Arial, serif; font-weight: normal;}
#contents-wrap h2:first-letter { font-size: 6rem; }
#contents-wrap h2 span { display: block; width: 50%; opacity: 0.4; padding-top: 1.5rem; font-size: 2rem; font-weight: bold; font-family: "微软雅黑", Arial, sans-serif; }
	.nav_open #contents-wrap { left: 10rem; }
@media screen and (max-width:1024px) { /* iPad 横 l */
	#contents-wrap h2 {font-size: 5.16vw;}
	#contents-wrap h2:first-letter { font-size: 7.19vw; }
	#contents-wrap { top: 0 !important; }
	#contents-wrap .section { width: 100%; height: auto; }
}

@font-face {
	font-family: 'consola';
	src: url('../../fonts/52/consola.eot'); /* IE9 Compat Modes */
	src: url('../../fonts/52/consola.eot') format('embedded-opentype'), /* IE6-IE8 */
    	 url('../../fonts/52/consola.woff') format('woff'), /* Modern Browsers */
    	 url('../../fonts/52/consola.ttf') format('truetype'), /* Safari, Android, iOS */
    	 url('../../fonts/52/consola.svg#lamebrai-webfont') format('svg'); /* Legacy iOS */
}


/* nav ----------*/
#nav .nav-logo {
	opacity: 0;
	transition: all 0.5s;
	pointer-events: none;
	position: absolute;
	top: 28px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	transform: translateX(-50%);
	width: 35px;
	height: 59px;
	background-image: url(../../images/52/logo2.png);
	background-size: 100%;
	background-repeat: no-repeat;
}
#nav .nav-logo.show {
	opacity: 1;
	pointer-events: auto;
}
#nav { position: fixed; z-index: 99999; top: 0; left: -100%; width: 75px; height: 100vh; background-color: #df4c18; }
#nav #fb { position: absolute; bottom: 0; left: 0; overflow: hidden; display: block; width: 6rem; height: 6rem; color: #888; text-align: center; line-height: 6rem; transition: all 0.3s ease-out; }
#nav #fb i { position: relative; z-index: 1; }
#nav #fb:hover { opacity: 1; color: #FFF; }
#nav #fb:before { position: absolute; top: 50%; left: 50%; content: ""; width: 0; height: 0; border-radius: 50%; background-color: #4267B2; transition: all 0.2s ease-out; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
#nav #fb:hover:before { width: 200%; height: 200%; }
#nav-wrap { position: absolute; top: 0; left: 6rem; width: 0; height: 100vh; overflow: hidden; background-color: #FFF; transition: width 0.3s ease-out; }
#nav-wrap .logo { position: absolute; top: 3rem; left: 0; width: calc(100vw - 12rem); }
#nav-wrap .logo img { width: 20rem; float: right; }
#nav-wrap ul { position: relative; top: 50%; padding: 0 8rem 0 4rem; -webkit-transform: translateY(-50%); transform: translateY(-50%); transition: padding 0.3s ease-out; }
#nav-wrap ul li { position: relative; padding: 1rem 0; font-size: 5rem; }
#nav-wrap ul li:before { position: absolute; top: 50%; right: 6rem; content: ""; width: calc(100% - 6rem); height: 1px; background-color: #E5E5E5; transition: all 0.2s ease-out; }
#nav-wrap ul li:nth-child(1):before { width: calc(100% - 10rem - 12.3rem); }
#nav-wrap ul li:nth-child(2):before { width: calc(100% - 10rem - 14.5rem); }
#nav-wrap ul li:nth-child(3):before { width: calc(100% - 10rem - 16.2rem); }
#nav-wrap ul li:nth-child(4):before { width: calc(100% - 10rem - 21.4rem); }
#nav-wrap ul li:nth-child(5):before { width: calc(100% - 10rem - 24.2rem); }
#nav-wrap ul li:nth-child(6):before { width: calc(100% - 10rem - 27.0rem); }
#nav-wrap ul li:nth-child(7):before { width: calc(100% - 10rem - 17.7rem); }
#nav-wrap ul li:not(.active):hover:before { top: 0; width: calc(100% - 6rem); height: 100%; }
#nav-wrap ul li a { font-family: 'consola'; position: relative; z-index: 1; display: block; color: #222; text-decoration: none; line-height: 1; font-weight: bold; transition: all 0.3s ease-out; }
#nav-wrap ul li:not(.active) a:hover { padding-left: 2rem; opacity: 1; }
	.nav_open #nav-wrap { width: 100vw; }
	.nav_open #nav-wrap ul { padding: 0 8rem 0 8rem; }
#nav-wrap ul li.active a { color: #df4c18; }
@media screen and (min-width:1025px) {
	#nav-wrap ul li.active:before { background-color: #182574; }
}
@media screen and (max-width:1024px) { /* iPad 横 l */
	#nav { width: 100%; height: 6rem; left: 0; }
	#nav .nav-logo {display: none !important;}
	#nav #fb { top: 0; bottom: auto; left: auto; right: 0; }
	#nav-wrap { left: 0; top: 6rem; }
	#nav-wrap .logo { position: relative; top: 2rem; width: calc(100vw - 4rem); margin-bottom: 8rem; }
	#nav-wrap ul { position: relative; padding: 0 0 0 0; top: 0; -webkit-transform: translateY(0); transform: translateY(0);  }
	#nav-wrap ul li { font-size: 4rem; }
	#nav-wrap ul li:nth-child(1):before { width: calc(100% - 6rem - 12.3rem); }
	#nav-wrap ul li:nth-child(2):before { width: calc(100% - 6rem - 14.5rem); }
	#nav-wrap ul li:nth-child(3):before { width: calc(100% - 6rem - 16.2rem); }
	#nav-wrap ul li:nth-child(4):before { width: calc(100% - 6rem - 21.4rem); }
	#nav-wrap ul li:nth-child(5):before { width: calc(100% - 6rem - 24.2rem); }
	#nav-wrap ul li:nth-child(6):before { width: calc(100% - 6rem - 27.0rem); }
	#nav-wrap ul li:nth-child(7):before { width: calc(100% - 6rem - 17.7rem); }
	#nav-wrap .logo img { width: 15rem; }
	.nav_open #nav-wrap { width: 100%; }
	.nav_open #nav-wrap ul { padding: 0 0 0 4rem; }
}

/* nav_bar ----------*/
#nav_bar { position: absolute; z-index: 1; top: 0; bottom: 0; left: 50%; display: block; width: 6rem; height: 6rem; margin: auto; -webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);}
#nav_bar:hover { cursor: pointer; }
#nav_bar span { position: relative; display: block; width: inherit; height: inherit; }
#nav_bar:after, #nav_bar span:before, #nav_bar span:after { position: absolute; top: 20%; content: ""; display: block; width: 1px; height: 60%; background-color: #fff; transition: all 0.2s ease-out; }
#nav_bar:after { left: 40%; }
#nav_bar span:before { left: 50%; }
#nav_bar span:after { right: calc(40% - 1px); }
#nav_bar:hover:after { left: 35%; }
#nav_bar:hover span:after { right: calc(35% - 1px); }
	.nav_open { position: fixed; z-index: -1; width: 100%; height: 100%; overflow: hidden; }
	.nav_open #nav_bar:after { left: 50%; -webkit-transform: rotate(135deg); transform: rotate(135deg); }
	.nav_open #nav_bar span:before { opacity: 0; }
	.nav_open #nav_bar span:after { right: 50%; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); }
@media screen and (max-width:1024px) { /* iPad 横 l */
	#nav_bar { left: 0;   -webkit-transform:rotate(90deg); transform:rotate(90deg); }
}

/* side_nav ----------*/
#side_nav { position: fixed; z-index: 30; top: 50%; right: -100%; padding-right: 0.1rem; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
#side_nav:before, #side_nav:after { position: absolute; right: 0.4rem; content: ""; width: 1px; height: 10rem; opacity: 0.4; }
#side_nav:before { animation: borderAnime 1.5s ease 0s infinite; top: -70%; }
#side_nav:after { animation: borderAnime2 1.5s ease 0.5s infinite; }
@keyframes borderAnime {
	0% { height: 0; top: -70%; }
	24% { top: -70%; }
	25% { height: 60%; top: auto; bottom: 110%; }
	50% { height: 0; top: auto; bottom: 110%; }
	100% { height: 0; top: auto; bottom: 110%; }
}
@keyframes borderAnime2 {
	0% { height: 0; top: 110%; }
	24% { top: 110%; }
	25% { height: 60%; top: auto; bottom: -70%; }
	50% { height: 0; top: auto; bottom: -70%; }
	100% { height: 0; top: auto; bottom: -70%; }
}
#side_nav li { padding: 1rem 0; text-align: right; line-height: 1; font-size: 1.4rem; font-weight: bold; }
#side_nav li a { position: relative; text-decoration: none; line-height: 1; }
#side_nav li a .c { display: inline-block; width: 0.8rem; height: 0.8rem; border-radius: 50%; text-decoration: none; text-align: right; transition: all 0.2s ease-out; }
#side_nav li a .n { position: absolute; right: 0; opacity: 0; transition: all 0.2s ease-out; }
#side_nav li a:hover .c, #side_nav li.active a .c { opacity: 0; }
#side_nav li a:hover .n, #side_nav li.active a .n { opacity: 1; }
#side_nav li, #side_nav li a { color: #FFF; }
#side_nav li .c, #side_nav:before, #side_nav:after { background-color: #FFF; }
.nav_black #side_nav li, .nav_black #side_nav li a { color: #df4c18; }
.nav_black #side_nav li .c, .nav_black #side_nav:before, .nav_black #side_nav:after { background-color: #df4c18; }
@media screen and (max-width:1024px) { /* iPad 横 l */
	#side_nav { display: none; }
}

/* pre_nex ----------*/
.pre_nex { position: fixed; z-index: 50; right: 0; padding: 1rem; }
.pre_nex a { position: relative; z-index: 2; display: block; width: 4rem; height: 4rem; border-radius: 50%; color: #FFF; background-color: #df4c18; text-align: center; text-decoration: none; line-height: 4rem; transition: all 0.2s ease-out; }
.pre_nex:hover a { opacity: 1; -webkit-transform: scale(1.3, 1.3); transform: scale(1.3, 1.3); }
.pre_nex.wh a { color: #df4c18; background-color: #FFF; }
.pre_nex a i { line-height: 2; font-size: 1.6rem; }
#pre { top: -100%; }
#nex { bottom: -100%; }
#nex:after { position: absolute; z-index: 1; top: 0; left: 0; content: ""; width: 100%; height: 100%; border-radius: 50%; background-color: rgba(204, 204, 204, 0.3); animation: nextAnime 1.5s ease 0s infinite; pointer-events: none; }
@keyframes nextAnime {
	0% { opacity: 1; -webkit-transform: scale(0.5, 0.5); transform: scale(0.5, 0.5); }
	100% { opacity: 0; -webkit-transform: scale(1.8, 1.8); transform: scale(1.8, 1.8); }
}
@media screen and (max-width:1024px) { /* iPad 横 l */
	.pre_nex { display: none; }
}

#lines { position: fixed; z-index: 9999; top: 0; left: 0; transition: left 0.3s ease-out; height: 100vh; pointer-events: none; }
#lines .line { position: absolute; top: 0; width: 1px; height: 0; background-color: rgba(204, 204, 204, 0.20); }
#lines .line1 { left: calc(((100vw - 6rem) / 6) + 6rem); }
#lines .line2 { left: calc((((100vw - 6rem) / 6) * 2) + 6rem); top: auto; bottom: 0; }
#lines .line3 { left: calc((((100vw - 6rem) / 6) * 3) + 6rem); }
#lines .line4 { left: calc((((100vw - 6rem) / 6) * 4) + 6rem); top: auto; bottom: 0; }
#lines .line5 { left: calc((((100vw - 6rem) / 6) * 5) + 6rem); }
	.nav_open #lines { left: 20rem; }
@media screen and (max-width:1024px) { /* iPad 横 l */
	#lines { width: 100%; }
	#lines .line1 { left: 2rem; }
	#lines .line2 { left: auto; right: 2rem; }
	#lines .line3 { left: 50%; }
	#lines .line4, #lines .line5 { display: none; }
}


@media screen and (max-width:1024px) { /* iPad 横 l */
}
@media screen and (max-width:768px) { /* iPad 縦 m */
}
@media screen and (max-width:736px) { /* iPhone 横 ms */
}
@media screen and (max-width:414px) { /* iPhone 縦 s */
}
@media only screen and (orientation:landscape) { /* 横 */
}
@media only screen and (orientation:portrait) { /* 縦 */
}

/* memo
animate		transition:all 0.3s ease-out;
radius		border-radius:5px;
box-shadow	box-shadow:10px 10px 10px rgba(0,0,0,0.4);
text-shadow	text-shadow: 0 0 10px rgba(0,0,0,0.6);
rotate		-webkit-transform:rotate(45deg); transform:rotate(45deg);
skew			-webkit-transform:skew(45deg); transform:skew(45deg);
scale			-webkit-transform:scale(1,1); transform:scale(1,1);
translate	-webkit-transform:translate(0,0); transform:translate(0,0);
perspective	-webkit-transform:perspective(500px); transform:perspective(500px);
origin		-webkit-transform-origin:left bottom; transform-origin:left bottom;
V center		position:relative; top:50%; -webkit-transform:translateY(-50%); transform:translateY(-50%);
H center		position:relative; left:50%; -webkit-transform:translateX(-50%); transform:translateX(-50%);
triangle		width:0; height:0; border:80px solid transparent; border-top:80px solid #f00;
-webkit-overflow-scrolling:touch;
*/