@charset "utf-8";

html{
	margin:0; padding:0;
	-webkit-text-size-adjust: 100%;
	/*scroll-behavior: smooth;*/
}

body{
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	overflow-x:hidden;
	overflow-y:scroll;
	
	color:#fff;
	background-color:#0f0f0f;
	
	-ms-overflow-style: none;
	scrollbar-width: none;
}
body::-webkit-scrollbar{
	display:none;
}
::selection
{
	background: rgba(120,120,120,0.5);
	/*color: #fff;*/
}
::-moz-selection
{
	background: rgba(0,0,0,0.2);
	/*color: #fff;*/
}

div, p{
	margin:0;
	padding:0;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
a{
	color:#fff;
	text-decoration:none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
a:hover{
	color:#fff;
	text-decoration:none;
}
a:visited{
	color:#fff;
	text-decoration:none;
}
ul,li{
	margin:0;
	padding:0;
}
img{
	border:none;
	user-select:none;
	-webkit-user-select:none;
	-ms-user-select: none;
	-moz-user-select:none;
}
.ja{
	font-family: "YakuHanJP_Noto", "Noto Sans JP", sans-serif;
	font-weight:300;
	letter-spacing:0.2em;
}
.ja-b{
	font-family: "YakuHanJP_Noto", "Noto Sans JP", sans-serif;
	font-weight:700;
	letter-spacing:0.2em;
}
.en{
	font-family: urw-din, sans-serif;
	font-weight:400;
	letter-spacing:0.08em;
}
.en-b{
	font-family: urw-din, sans-serif;
	font-weight:400;
	letter-spacing:0.03em;
}
.en-b2{
	font-family: urw-din, sans-serif;
	font-weight:400;
	letter-spacing:0.2em;
}
.en-num{
	font-family: 'Alef', sans-serif;
	font-weight:400;
}
.a-cover{
	display:block;
	position:absolute;
	width:100%; height:100%;
	top:0; left:0;
}


.world {
	position: fixed;
	left:0; top:0;
	width:100%; height:100%;
	backface-visibility: hidden;
	/*background-color:#22232d;*/
}
.gl-cov{
	position: fixed;
	left:0; top:0;
	width:100%; height:100%;
	background-image:url(../image/color.jpg);
	background-repeat:no-repeat;
	background-size:cover;
	mix-blend-mode: multiply;
	/*mix-blend-mode: hard-light;*/
	opacity:0.0;
	display:none;
	backface-visibility: hidden;
}
/*@media screen and (max-width:800px){
	.world{
		height:135%;
	}
}*/

.dt-wrapper{
	display:none;
}


.bg-line-set{
	position:fixed;
	width:100%; height:100%;
	top:0; left:0;
}
.bg-line1{
	position:absolute;
	width:1px; height:100%;
	left:50%; top:0;
	background-color:rgba(255, 255, 255, 0.12);
}
.bg-line2{
	position:absolute;
	width:1px; height:100%;
	left:50%; top:0;
	margin-left:-20%;
	background-color:rgba(255, 255, 255, 0.17);
}
.bg-line3{
	position:absolute;
	width:1px; height:100%;
	left:50%; top:0;
	margin-left:20%;
	background-color:rgba(255, 255, 255, 0.17);
}
.bg-line4{
	position:absolute;
	width:1px; height:100%;
	left:50%; top:0;
	margin-left:-40%;
	background-color:rgba(255, 255, 255, 0.17);
}
.bg-line5{
	position:absolute;
	width:1px; height:100%;
	left:50%; top:0;
	margin-left:40%;
	background-color:rgba(255, 255, 255, 0.17);
}
@media screen and (max-width:800px){
	.bg-line1{
		background-color:rgba(255, 255, 255, 0.12);
	}
	.bg-line2{
		margin-left:-30%;
		background-color:rgba(255, 255, 255, 0.12);
	}
	.bg-line3{
		margin-left:30%;
		background-color:rgba(255, 255, 255, 0.12);
	}
	.bg-line4{
		display:none;
	}
	.bg-line5{
		display:none;
	}
}

/* -- SCROLL -- */
.scroll-wrapp{
	position:absolute;
	width:1px; height:3000px;
	top:0; left:0;
}


/* -- HEADER -- */
.header-set{
	position:fixed;
	width:100%;
	top:0; left:0;
}
.head-logo{
	position:absolute;
	width:58px;
	height:52px;
	top:20px;
	left:20px;
	background-image:url(../image/logo.png);
	background-size:contain;
	cursor:pointer;
}
.header-humb{
	position:absolute;
	width:22px; height:18px;
	top:100px;right:28px;
	background-image:url(../image/menu.png);
	background-size:contain;
	cursor:pointer;
	transition:0.2s;
}
.header-humb:hover{
	opacity:0.5;
}
@media screen and (max-width:800px){
	.head-logo{
		width:46px;
		height:41px;
		top:14px;
		left:14px;
	}
}


/* -- PROJECT LIST -- */
.project-list{
	position:fixed;
	width:100%; height:100%;
	top:0; left:0;
	display:none;
}
.project-list-t{
	position:fixed;
	width:100%; height:100%;
	top:0; left:0;
	overflow-x:hidden;
    overflow-y:scroll;
	display:none;
	opacity:0;
	-webkit-overflow-scrolling: touch;
	-ms-overflow-style: none;
	scrollbar-width: none;
}
.project-list-t::-webkit-scrollbar{
	display:none;
}
.project-list-bg{
	position:absolute;
	width:100%; height:100vh;
	top:0; left:0;
	background-color:#000;
	opacity:0.97;
}
.project-list-close{
	position:fixed;
	width:64px;
	height:27px;
	top:40px;
	right:40px;
	background-image:url(../image/movie_close.png);
	background-repeat:no-repeat;
	background-size:contain;
	cursor:pointer;
	opacity:1;
	transition:0.2s;
	display:none;
}
.project-list-close:hover{
	opacity:0.5;
}
.project-list-in{
	position:relative;
	width:680px;
	min-height:100%;
	margin-left:auto; margin-right:auto;
	padding-top:80px; padding-bottom:120px;
}
.project-title{
	display:block;
	width:100%;
	margin-bottom:70px;
	font-size:14px;
}
.project-item{
	display:block;
	position:relative;
	width:100%;
	padding-top:30px; padding-bottom:30px;
	font-size:28px;
	color:#fff;
	line-height:36px;
	/*border-bottom:solid 1px rgba(255,255,255,0.2);*/
	cursor:pointer;
}
.project-item-num{
	position:absolute;
	left:-50px; top:26px;
	font-size:12px;
}
.project-item-border{
	width: 24px;
	height: 1px;
	background-color: #777;
}
.project-list-menu{
	margin-bottom:50px;
	font-size:14px;
	color:#666;
	display:none;
}
.project-list-menu span{
	color:#fff;
}
.menu-h-con{
	margin-right:10px;
}
@media screen and (max-width:900px){
	.project-list-close:hover{
		opacity:1;
	}
}
@media screen and (max-width:700px){
	.project-list-in{
		position:relative;
		width:90%;
		padding-top:80px; padding-bottom:120px;
	}
	.project-title{
		font-size:12px;
		margin-bottom:10px;
		color:#999;
	}
	.project-item{
		padding-top:24px; padding-bottom:24px;
		font-size:18px;
		line-height:26px;
	}
	.project-item-num{
		displa:none;
	}
	.project-list-menu{
		font-size:16px;
		display:block;
	}
}
@media screen and (max-width:500px){
	.project-list-close{
		width:52px;
		height:22px;
		top:24px;
		right:30px;
	}
}

/* -- PROJECT OVER -- */
.project-over-root{
	position:absolute;
}
.project-over{
	position:absolute;
	width:260px; height:260px;
	top:50%; left:50%;
	margin-left:-130px; margin-top:-130px;
	border-radius:130px;
	background-color:#000;
	display:none;
	opacity:0;
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center center;
}

/* -- FOOTER -- */
.footer-set{
	position:fixed;
	left:0; bottom:0;
}
.foot-copy{
	position:absolute;
	left:20px; bottom:160px;
	font-size:14px;
	white-space:nowrap;
	transform:rotate(90deg);
	transform-origin: bottom left;
	opacity:0.8;
}
@media screen and (max-width:800px){
	.foot-copy{
		display:none;
	}
}


/* -- INFO -- */
.info-wrapper{
	position:fixed;
	width:100%; height:100%;
	top:0; left:0;
	overflow:hidden;
}
.info-in{
	position:absolute;
	width:100%;
	top:0; left:0;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
}

.sp-info{
	position:absolute;
	width:100%;
	display:none;
}

.page-midashi{
	position:absolute;
	display:inline-block;
	top:23vh; left:50%;
	transform: translateX(-48%);
}
.page-midashi-in{
	font-size:24px;
	border-bottom:solid 1px #fff;
	padding-bottom:8px;
}

@media screen and (max-width:800px){
	.page-midashi{
		top:120px;
		font-size:20px;
	}
	.page-midashi-in{
		font-size:20px;
	}
}
@media screen and (max-width:500px){
	.page-midashi-in{
		font-size:18px;
	}
}

.top-sab-copy{
	position:absolute;
	right:14%;
	font-size:13px;
	line-height:23px;
	opacity:0;
	display:none;
}
@media screen and (max-width:500px){
	.top-sab-copy{
		visibility:hidden;
	}
}
.top-name-set{
	position:absolute;
	top:0; left:50%;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
}
.top-name-in{
	position:absolute;
	width:100px; height:100px;
	/*background-color:rgba(255, 0, 0, 0.5);*/
	cursor:pointer;
	-webkit-backface-visibility:hidden;
	backface-visibility: hidden;
}
.top-title{
	position:absolute;
	top:0; left:0;
	font-size:12px;
	line-height:18px;
	color:#aaa;
	text-transform:uppercase;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
}
.top-title-num{
	position:absolute;
	top:-36px; right:-12px;
	font-size:38px;
	letter-spacing:0;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
	opacity:0.8;
}
.top-title-num span{
	font-size:24px;
	vertical-align:text-top;
	letter-spacing:0.05em;
}
.top-scroll-line{
	position:absolute;
	width:1px; height:80px;
	right:32px;
	background-color:#ddd;
	overflow:hidden;
}
.top-scroll-line-sp{
	position:absolute;
	width:1px; height:60px;
	left:50%;
	background-color:#ddd;
	overflow:hidden;
	display:none;
	opacity:0;
}
.top-scroll-line-in{
	position:absolute;
	width:1px; height:240px;
	top:0; left:0;
	background-image:url(../image/scroll_line.png);
	background-repeat:no-repeat;
	background-size:100% 100%;
	opacity:0.4;
}
.top-scroll-txt{
	position:absolute;
	height:28px;
	right:3px;
	transform:rotate(90deg);
	transform-origin: bottom left;
	opacity:1;
	white-space: nowrap;
	font-size:13px;
	letter-spacing: 0.2em;
}
.top-page-top{
	position:absolute;
	width:18px; height:18px;
	right:24px;
}
.top-page-top-in{
	position:absolute;
	width:18px; height:18px;
	top:0; left:0;
	display:none;
}
.top-page-top-btn{
	position:absolute;
	width:18px; height:18px;
	top:50%; left:50%;
	transform:translate(-50%, -50%);
	border-radius:10px;
	background-color:rgba(255,255,255,1);
	border:solid 1px #fff;
	box-sizing: border-box;
	cursor:pointer;
	transition:0.2s;
}
.top-page-top-btn:hover{
	width:28px; height:28px;
	border-radius:14px;
	background-color:rgba(255,255,255,0);
}
@media screen and (min-width:1800px){
	.top-title{
		font-size:14px;
		line-height:20px;
	}	
}
@media screen and (max-width:700px){
	.top-title-num{
		top:-32px; right:-12px;
		font-size:34px;
	}
	.top-title-num span{
		font-size:24px;
	}
	.top-scroll-line{
		display:none;
	}
	.top-scroll-txt{
		display:none;
	}
	.top-page-top{
		display:none;
	}
}

/* -- TOP ALL PROJECTS -- */
.top-all-p{
	position:absolute;
	width:156px; height:20px;
	right:10%;
	font-size:15px;
	letter-spacing:0.06em;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
}
.top-all-arrow{
	position:absolute;
	width:56px; height:20px;
	top:0; right:0;
	background-image:url(../image/allArrow.png);
	background-repeaat:no-repeat;
	background-size:contain;
}
.top-all-btn{
	position:absolute;
	width:100%; height:100%;
	top:0; left:0;
	cursor:pointer;
}

/* -- TOP STATEMENT -- */
.top-state-ja{
	position:absolute;
	left:50%;
	color:#fff;
	font-size:18px;
	line-height:48px;
	/*font-size:0.9375vw;
	line-height:2.5vw;*/
}
.top-state-1{
	margin-left:-300px;
}
.top-state-2{
	margin-left:50px;
}
.top-state-3{
	margin-left:-250px;
}
@media screen and (min-width:1920px){
	.top-state-ja{
		font-size:0.9375vw;
		line-height:2.5vw;
	}
}
@media screen and (max-width:1100px){
	.top-state-ja{
		left:40%;
		font-size:16px;
		line-height:38px;
	}
}
@media screen and (max-width:800px){
	.top-state-ja{
		left:20px;
		font-size:12px;
		line-height:30px;
	}
	.top-state-1{
		margin-left:20%;
	}
	.top-state-2{
		margin-left:20%;
	}
	.top-state-3{
		margin-left:20%;
	}
}
@media screen and (max-width:700px){
	.top-state-ja{
		left:20px;
		font-size:12px;
		line-height:30px;
	}
	.top-state-1{
		margin-left:0;
	}
	.top-state-2{
		margin-left:0;
	}
	.top-state-3{
		margin-left:0;
	}
}

/* -- TOP FOOTER -- */
.top-footer{
	position:absolute;
	width:100%;
	height:200px;
	top:0; left:0;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
}
.top-contact{
	position:relative;
	width:70%;
	height:160px;
	margin-left:auto; margin-right:auto;
	background-color:#111;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
	overflow:hidden;
}
.top-contact-t{
	position:absolute;
	width:100%;
	height:100%;
	top:0; left:0;
	text-align:center;
	line-height:160px;
	font-size:24px;
}
.top-contact-bg{
	position:absolute;
	width:100%; height:100%;
	top:0; left:0;
	opacity:0.4;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
	
	background: linear-gradient(80deg, #555, #222, #444);
	background-size: 600% 400%;
	
	-webkit-animation: contact-bg-anim 8s ease infinite;
	-moz-animation: contact-bg-anim 8s ease infinite;
	animation: contact-bg-anim 8s ease infinite;
}
@-webkit-keyframes contact-bg-anim {
	0%{background-position:0% 50%}
	50%{background-position:100% 50%}
	100%{background-position:0% 50%}
}
@-moz-keyframes contact-bg-anim {
	0%{background-position:0% 50%}
	50%{background-position:100% 50%}
	100%{background-position:0% 50%}
}
@keyframes contact-bg-anim {
	0%{background-position:0% 50%}
	50%{background-position:100% 50%}
	100%{background-position:0% 50%}
}
.top-contact-over{
	position:absolute;
	width:100%; height:100%;
	top:0; left:0;
	background-color:#fff;
	opacity:0.9;
}
.top-contact-btn{
	position:absolute;
	width:100%; height:100%;
	top:0; left:0;
	cursor:pointer;
}
.top-address{
	width:100%;
	margin-top:30px;
	font-size:14px;
	line-height:24px;
	text-align:center;
}
.sp-br{
	display:none;
}
@media screen and (max-width:800px){
	.top-contact{
		width:90%;
		height:80px;
	}
	.top-contact-t{
		font-size:18px;
		line-height:80px;
	}
	.top-address{
		margin-top:24px;
		font-size:12px;
		line-height:20px;
	}
	.sp-br{
		display:inline;
	}
}


/* -- TRANSITION COVER -- */
.transition-cover{
	position:fixed;
	width:100%; height:100%;
	top:0; left:0;
	display:none;
}
.t-cov-txt{
	position:absolute;
	width:100%; height:100px;
	top:50%; left:0;
	margin-top:-56px;
	text-align:center;
	text-transform:uppercase;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
}
.t-cov-num{
	font-size:30px;
	opacity:0.3;
}
.t-cov-num span{
	font-size:20px;
	vertical-align:text-top;
	letter-spacing:0.05em;
}
.t-cov-title{
	font-size:18px;
	line-height:24px;
	opacity:0.6;
}
.t-cov-bar{
	display:inline-block;
	position:relative;
	width:100px;
	height:1px;
	margin-top:30px;
	margin-left:auto; margin-right:auto;
	background-color:#555;
	overflow:hidden;
}
.t-cov-barIn{
	position:absolute;
	width:100%; height:100%;
	top:0; left:0;
	background-image:url(../image/loading_line.png);
	background-repeat:no-repeat;
	background-size:100% 100%;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
}
@media screen and (max-width:700px){
	.t-cov-txt{
		margin-top:-30px;
	}
	.t-cov-num{
		font-size:20px;
		opacity:0.3;
	}
	.t-cov-num span{
		font-size:12px;
		vertical-align:text-top;
		letter-spacing:0.05em;
	}
	.t-cov-title{
		font-size:14px;
		line-height:17px;
		opacity:0.6;
	}
}

/* -- DETAIL -- */
.detail-title-set{
	position:absolute;
	top:280px; left:10%;
	width:80%;
	font-size:0;
	-webkit-backface-visibility:hidden;
	backface-visibility: hidden;
}
.detail-title-num{
	position:absolute;
	top:0; left:-18px;
	font-size:36px;
	opacity:0.5;
}
.detail-title-num span{
	font-size:24px;
	vertical-align:text-top;
	letter-spacing:0.05em;
}
.detail-title-en{
	margin-top:54px;
	font-size:74px;
	line-height:95px;
}
.detail-title-en span{
	font-size:86px;
	/*font-family: kepler-std-display, serif;
	font-weight:300;*/
	
	font-family: 'Cormorant', serif;
	
	font-style: italic;
	letter-spacing:0.03em;
}
.detail-title-ja{
	margin-top:24px;
	font-size:14px;
	line-height:26px;
}
.detail-title-line{
	width:24px; height:1px;
	margin-top:26px;
	background-color:#fff;
}
.detail-title-link{
	position:relative;
	width:130px; height:130px;
	margin-top:62px;
	-webkit-backface-visibility:hidden;
	backface-visibility: hidden;
}
.detail-title-linkIn{
	position:absolute;
	width:100%; height:100%;
	top:0; left:0;
	font-size:14px;
	color:#fff;
	text-align:center;
	line-height:130px;
}
.detail-title-linkBg{
	position:absolute;
	width:100%; height:100%;
	top:0; left:0;
	border:solid 1px rgba(255, 255, 255, 1);
	background-color:rgba(255, 255, 255, 0);
	border-radius:50%;
	box-sizing: border-box;
	-webkit-backface-visibility:hidden;
	backface-visibility: hidden;
}
.no-link{
	opacity:0.5;
}
.active-link{
	opacity:1;
	cursor:pointer;
}

.detail-description{
	position:absolute;
	/*width:490px;*/
	top:0; left:50%;
	/*margin-left:-440px;*/
	font-size:14px;
	line-height:32px;
	-webkit-backface-visibility:hidden;
	backface-visibility: hidden;
}
.detail-description p{
	margin-bottom:40px;
}
.detail-credit{
	position:absolute;
	top:0; left:50%;
	font-size:14px;
	line-height:32px;
	-webkit-backface-visibility:hidden;
	backface-visibility: hidden;
}
.detail-credit p{
	margin-bottom:40px;
}

@media screen and (min-width:1800px){
	.detail-title-num{
		top:0; left:-20px;
		font-size:40px;
	}
	.detail-title-num span{
		font-size:27px;
	}
	.detail-title-en{
		margin-top:62px;
		font-size:82px;
		line-height:107px;
	}
	.detail-title-en span{
		font-size:96px;
	}
}
@media screen and (max-width:800px){
	.detail-title-set{
		/*top:180px;*/
		top:200px;
		left:8%;
		width:84%;
	}
	.detail-title-en{
		margin-top:44px;
		font-size:40px;
		line-height:50px;
	}
	.detail-title-en span{
		font-size:50px;
		font-weight:300;
		font-style: italic;
	}
	.detail-title-num{
		position:absolute;
		top:0; left:-18px;
		font-size:28px;
		opacity:0.5;
	}
	.detail-title-num span{
		font-size:18px;
		vertical-align:text-top;
		letter-spacing:0.05em;
	}
	.detail-title-ja{
		margin-top:12px;
		font-size:12px;
		line-height:20px;
	}
	.detail-title-link{
		width:100px; height:100px;
		margin-top:40px;
	}
	.detail-title-linkIn{
		font-size:12px;
		line-height:100px;
	}
}

@media screen and (max-width:1200px){
	.detail-description{
		/*width:470px;
		margin-left:-470px;*/
		font-size:12px;
		line-height:28px;
	}
	.detail-description p{
		margin-bottom:30px;
	}
	.detail-credit{
		/*width:400px;
		margin-left:100px;*/
		font-size:12px;
		line-height:28px;
	}
	.detail-credit p{
		margin-bottom:30px;
	}
}
.detail-img{
	position:absolute;
	/*width:1600px; height:900px;*/
	left:50%; top:0;
	transform-origin: top left;
	overflow:hidden;
	-webkit-backface-visibility:hidden;
	backface-visibility: hidden;
}
.detail-img-in{
	position:absolute;
	width:100%; height:100%;
	top:0; left:0;
	background-repeat:no-repeat;
	background-size:contain;
	transform-origin: top left;
	-webkit-backface-visibility:hidden;
	backface-visibility: hidden;
}
.detail-footer-txt{
	position:absolute;
	width:100%; height:100px;
	top:1000px; left:0;
	-webkit-backface-visibility:hidden;
	backface-visibility: hidden;
}
.detail-next{
	position:absolute;
	width:600px;
	height:80%;
	top:10%; left:50%;
	margin-left:-300px;
	cursor:pointer;
}
.detail-next-t{
	position:absolute;
	width:100px;
	height:20px;
	font-size:18px;
	color:#fff;
	opacity:0.6;
	left:50%; top:50%;
	margin-left:-28%;
	margin-top:-12px;
}
.detail-footer-line-l{
	position:absolute;
	width:10%; height:1px;
	top:50%; left:50%;
	margin-left:-26%;
	background-color:rgba(255, 255, 255, 0.3);
}
.detail-footer-line-r{
	position:absolute;
	width:10%; height:1px;
	top:50%; left:50%;
	margin-left:16%;
	background-color:rgba(255, 255, 255, 0.3);
}
.t-foot-num{
	font-size:30px;
	opacity:0.3;
}
.t-foot-num span{
	font-size:20px;
	vertical-align:text-top;
	letter-spacing:0.05em;
}
.t-foot-title{
	font-size:17px;
	line-height:24px;
	opacity:0.6;
}
@media screen and (max-width:1200px){
	.detail-next-t{
		display:none;
	}
	.detail-footer-line-l{
		display:none;
	}
	.detail-footer-line-r{
		display:none;
	}
}
@media screen and (max-width:700px){
	.detail-next{
		width:300px;
		margin-left:-150px;
	}
	.t-foot-num{
		font-size:20px;
		opacity:0.3;
	}
	.t-foot-num span{
		font-size:14px;
	}
	.t-foot-title{
		font-size:12px;
		line-height:16px;
	}
}

.detail-back{
	position:absolute;
	width:120px; height:120px;
	bottom:16%;
	left:68%;
	cursor:pointer;
}
.detail-back-bg{
	position:absolute;
	width:100%; height:100%;
	TOP:0; left:0;
	border-radius:50%;
	border:solid 1px #999;
	background-color:rgba(255, 255, 255, 0);
}
.detail-back-t{
	position:absolute;
	width:100%; height:100%;
	top:0; left:0;
	line-height:120px;
	font-size:14px;
	color:#fff;
	text-align:center;
}
@media screen and (max-width:800px){
	.detail-back{
		width:80px; height:80px;
		bottom:12%;
		left:70%;
		border-radius:40px;
	}
	.detail-back-t{
		line-height:80px;
		font-size:12px;
	}
}
.detail-movie-wrapp{
	position:absolute;
	width:100%; height:100%;
	top:0; left:0;
	cursor:pointer;
}
.detail-movie-play{
	position:absolute;
	width:160px;
	height:160px;
	top:50%; left:50%;
	transform:translate(-50%, -50%);
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.8);
	
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
	
	font-size:22px;
	line-height:160px;
	text-align:center;
}
@media screen and (max-width:500px){
	.detail-movie-play{
		width:360px;
		height:360px;
		font-size:60px;
		line-height:360px;
	}
}
.detail-movie-btn{
	position:absolute;
	width:100%; height:100%;
	top:0; left:0;
}

/* -- MOVIE PLAYER -- */
.movie-player{
	position:fixed;
	width:100%; height:100%;
	display:none;
}
.movie-player-bg{
	position:absolute;
	width:100%; height:100%;
	top:0; left:0;
	background-color:#111;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
}
.movie-frame{
	position:relative;
	width:90%;
	top:50%; left:50%;
	transform:translate(-50%, -50%);
	background-color:#000;
}
.movie-frame iframe {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
}
.movie-close{
	position:absolute;
	width:64px;
	height:27px;
	top:40px;
	right:50px;
	background-image:url(../image/movie_close.png);
	background-repeat:no-repeat;
	background-size:contain;
	cursor:pointer;
	opacity:1;
	transition:0.2s;
}
.movie-close:hover{
	opacity:0.5;
}
@media screen and (max-width:900px){
	.movie-close:hover{
		opacity:1;
	}
}
@media screen and (max-width:500px){
	.movie-close{
		width:52px;
		height:22px;
		top:24px;
		right:30px;
	}
}

/* -- MENU -- */
.menu{
	position:fixed;
	top:26px; right:22px;
	font-size:12px;
	color:rgba(255,255,255,0.4);
}
.menu-con{
	display:inline-block;
	margin-right:10px;
	padding-bottom:8px;
	border-bottom: solid 1px rgba(255,255,255,0);
	transition:0.2s;
	cursor:pointer;
	color:rgba(255,255,255,1);
}
.menu-con:hover{
	border-bottom: solid 1px rgba(255,255,255,1);
}
.menu-fb{
	display:inline-block;
	margin-left:10px; margin-right:10px;
	padding-bottom:8px;
	border-bottom: solid 1px rgba(255,255,255,0);
	transition:0.2s;
	color:#fff;
}
.menu-fb:hover{
	border-bottom: solid 1px rgba(255,255,255,1);
}
.menu-tw{
	display:inline-block;
	margin-left:10px;
	padding-bottom:8px;
	border-bottom: solid 1px rgba(255,255,255,0);
	transition:0.2s;
	color:#fff;
}
.menu-tw:hover{
	border-bottom: solid 1px rgba(255,255,255,1);
}

@media screen and (max-width:700px){
	.menu{
		right:54px;
		display:none;
	}
	.menu-con{
		margin-right:10px;
	}
	.menu-fb{
		margin-left:10px;
	}
	.menu-con:hover{
		border-bottom: solid 1px rgba(255,255,255,0);
	}
	.menu-fb:hover{
		border-bottom: solid 1px rgba(255,255,255,0);
	}
}


/* CONTACT MODAL */
.contact-base{
	position:fixed;
	width:100%; height:100%;
	top:0; left:0;
	display:none;
}
.contact-bg{
	position:absolute;
	width:100%; height:100%;
	top:0; left:0;
	background-color:#eeeeee;
}
.contact-txt{
	position:absolute;
	top:50%; left:50%;
	transform: translate(-50%, -50%);
	font-size:14px;
	color:#333;
}
.contact-txt span{
	line-height:24px;
}
.c-info{
	white-space: nowrap;
	text-align:center;
	font-size:80px;
	margin-bottom:20px;
	padding-bottom:10px;
	border-bottom: solid 3px #000;
	transition:0.2s;
}
.c-info:hover{
	opacity:0.5;
}
.contact-txt a{
	color:#000;
}
.c-comm{
	user-select: none;
}
.c-close{
	position:absolute;
	width:64px;
	height:27px;
	top:40px;
	right:40px;
	background-image:url(../image/contact_close.png);
	background-repeat:no-repeat;
	background-size:contain;
	cursor:pointer;
	opacity:0.4;
}
@media screen and (max-width:900px){
	.c-info{
		font-size: 8.0vw;
		border-bottom: solid 2px #000;
	}
}
@media screen and (max-width:500px){
	.c-info{
		margin-top:10px;
		border-bottom: solid 1px #000;
	}
	.contact-txt{
		font-size:12px;
		letter-spacing: 0.1em;
	}
	.contact-txt span{
		line-height:22px;
	}
	.c-close{
		width:52px;
		height:22px;
		top:24px;
		right:30px;
	}
}


/* -- LOADING -- */
.loading{
	position:fixed;
	width:100%; height:100%;
	top:0; left:0;
	background-color:#000;
	opacity:1;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
}
.loading-bar{
	position:absolute;
	width:140px; height:1px;
	top:50%; left:50%;
	transform:translate(-50%, -50%);
	overflow:hidden;
	opacity:0.6;
}
.loading-bar-in{
	position:absolute;
	width:300%; height:100%;
	background-image:url(../image/loading_bar.png);
	background-repeat:no-repeat;
	background-size:100% 100%;
	-webkit-animation: loading-bar-anim 0.8s linear infinite;
	-moz-animation: loading-bar-anim 0.8s linear infinite;
	animation: loading-bar-anim 0.8s linear infinite;
}
@media screen and (max-width:900px){
	.loading-bar{
		width:140px;
	}
}
@-webkit-keyframes loading-bar-anim {
	0%{transform:translateX(0)}
	100%{transform:translateX(-280px)}
}
@-moz-keyframes loading-bar-anim {
	0%{transform:translateX(0)}
	100%{transform:translateX(-280px)}
}
@keyframes loading-bar-anim {
	0%{transform:translateX(0)}
	100%{transform:translateX(-280px)}
}