@charset "utf-8";

/*
******************************************************************
* MJP top.css
******************************************************************
*/

.fl { float: left;}
.fr { float: right;}

.comingsoon { opacity: 0.2;}

#loading {
	background: #000;
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 999;
	display: table;
	text-align: center;
}
#loading .bg {
	display: table-cell;
	vertical-align: middle;
}

body {
	background: #000;
	min-width: 1086px;
	height: 100%;
}

#wrp-all {
	position: relative;
	background-color:#000;
}

#bg-video {
	opacity: 1;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	margin: auto;
	z-index: 0;
	width: 100%;
	min-width: 1086px;
	-webkit-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
}

#contents {
	position: relative;
	width: 1000px;
	margin: 0 auto;
	z-index: 1;
}

.bgImg {
	opacity: 0;
	-webkit-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
}

#bg-slide,
.bgImg img {
	width: 100%;
	min-width: 1400px;
	height: auto;
	opacity: 0;
	position: fixed;
	z-index: 0;
}
.bgImg img {
	-webkit-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
}
.bgImg img.show {
	opacity: 1;
}

#bg-slide-pager {
	opacity: 0;
	position: absolute;
	top: 42px;
	right: 42px;
	z-index: 2;
	-webkit-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
}

.bgDot {
	width: 100%;
	min-width: 1400px;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 0;
}

.fadein-1 {
	display: none;
}

.pvbtn {
	position: absolute;
	left: 0;
	bottom: 13%;
	z-index: 4;
}

h1 {
	width: 1000px;
	position: fixed;
	top: 70px;
	z-index: 1;
	text-align: center;
}

.txt-model {
	position: fixed;
	left: 46px;
	bottom: 50px;
	z-index: 3;
}

nav {
	display: none;
	position: absolute;
	width: 100%;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	z-index: 2;
}
nav ul {
	position: absolute;
	top: 50%;
	left: 0;
	display: table;
	width: 100%;
	margin-top: -60px;
}
nav ul li {
	display: table-cell;
	vertical-align: middle;
}

footer {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 52px;
	margin: auto;
	width: 1000px;
	text-align: center;
	z-index: 2;
	overflow: hidden;
}
small {
	font-size: 12px;
	color: #ffffff;
	line-height: 21px;
}
.sns__btn {
	text-align: right;
	margin-bottom: 5px;
}
.sns__btn ul {
	display: inline-block;
}
.sns__btn ul li {
	display: inline-block;
	vertical-align: top;
	margin-left: 10px;
}

#border-fix {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 3;
}

.border1,
.border2,
.border3,
.border4,
.border5,
.border6 {
	background-color: #1ee6c6;
	display: block;
	position: fixed;
	z-index: 10;
}

.border4,
.border5,
.border6{
	background-color: #9292f7;
}
.border1 {
	width: 28px;
	height: 0;
	left: 0;
	bottom: 50.322%;
}
.border2 {
	width: 0;
	height: 28px;
	left: 0;
	top: 0;
}
.border3 {
	width: 28px;
	height: 0;
	right: 0;
	top: 0%;
}
.border4 {
	width: 28px;
	height: 0%;
	right: 0;
	top: 50.322%;
}
.border5 {
	width: 0;
	height: 28px;
	right: 0;
	bottom: 0;
}
.border6 {
	width: 28px;
	height: 0;
	left: 0;
	bottom: 0%;
}

/*
******************************************************************
* #modal video
******************************************************************/
#mdl-box {
	position: fixed;
	z-index: 1100;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#mdl-box .mdl-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../img/modal_bg.png);
}
#mdl-box #mdl-plr {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -270px;
	margin-left: -480px;
}
#mdl-box .btn {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -326px;
	margin-left: 303px;
}
#mdl-box .btn a {
	display: block;
	width: 179px;
	height: 50px;
	text-indent: -9999px;
	background-image: url(../img/v_close.png);
	background-position: 0 top;
}
#mdl-box .btn a:hover {
	background-position: 0 bottom;
}


/*
******************************************************************
* .video.js
******************************************************************/
#mdl-box .vjs-default-skin .vjs-slider-handle {
	background: #1ee6c6;
}
#mdl-box .vjs-default-skin .vjs-play-progress {
	background: #328578;
}
#mdl-box .vjs-default-skin .vjs-volume-level {
	background: #328578;
}