@charset "utf-8";

#videoVisualArea {position: relative; overflow: hidden; height:100%;min-height:100%;max-height:100% !important;background:rgba(0,0,0,1);display:none;}
#videoVisualArea .visualCover {
	position:absolute;
	left:0;right:0;
	width:100%;
	height:100%;
	background:rgba(0,0,0,.3);
	z-index:85;
	webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;
}

#videoVimeoArea {
	position:absolute; 
	left:0%; top:0%; 
	min-width:100%; min-height:100%;
	z-index:60;
	top: 50%; left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	margin:0px -1px 0;
	*margin:0;
}
#videoVimeoArea iframe {
	width:100%;
	height:100%;
}
#videoVimeoCtrl {
	position:absolute;
    bottom:0px;
    z-index: 110;
	margin:0 auto;
	width:100%;
	padding:40px 60px;
	text-align:right;
}

#videoVimeoCtrl .ctrl {
	position:relative;
	display:block;
	vertical-align:middle;
	font-size:0;
}
#videoVimeoCtrl .playSet {
	position:relative;
	display: inline-block;	
	color:rgba(0,0,0,1);
	text-transform:uppercase;
	-webkit-border-radius: 30px 0 0 30px; -moz-border-radius: 30px 0 0 30px; border-radius: 30px 0 0 30px; 
	overflow:hidden;
}
#videoVimeoCtrl .soundSet {
	-webkit-border-radius: 0 30px 30px 0; -moz-border-radius: 0 30px 30px 0; border-radius: 0 30px 30px 0;
}
#videoVimeoCtrl .btnSet {
	position:relative;
	width:50px;
	height:40px;
}

#videoVimeoCtrl .sound-play{
	display:inline-block;
	cursor:pointer;
}
#videoVimeoCtrl .sound-pause{
	display:none;
	cursor:pointer;
}
#videoVimeoCtrl .video-play {
	display:none;
	cursor:pointer;
}
#videoVimeoCtrl .video-pause{
	display:inline-block;
	cursor:pointer;
}

#videoVimeoCtrl .video-play {
	background:rgba(200,200,200,1) url(/imgs/video/b_play.png) 60% center no-repeat;
}
#videoVimeoCtrl .video-pause {
	background:rgba(255,255,255,1) url(/imgs/video/b_pause.png) 60% center no-repeat;
}
#videoVimeoCtrl .sound-play {
	background:rgba(255,255,255,1) url(/imgs/video/b_sound_on.png) center center no-repeat;
}
#videoVimeoCtrl .sound-pause {
	background:rgba(200,200,200,1) url(/imgs/video/b_sound_off.png) center center no-repeat;
}

.videoTitle {
	position:absolute;
	left:0;right:0;
	width:100%;
	height:100%;
	z-index:90;
}
.videoTitle .videoTitleBox {
	display:table;
	position:static;
	width:100%;
	height:100%;
	padding:20px 0 0;
}
.videoTitle .videoTitleBox .videoTitleCell {
	position:relative;
	display:table-cell;
	text-align:center;
	vertical-align: middle;
	overflow:hidden;
}

.videoTitle .videoTitleBox h1 {
	color:rgba(255,255,255,1);
	font-size:50px;
	font-family: "Justus Roman","Barlow Semi Condensed", "Noto Sans KR", serif;
	font-family: "Petit Formal Script",sans-serif;
	/*text-transform: uppercase;*/
	letter-spacing:-1px;
	font-weight:300;
	line-height:100%;
	/*-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	-moz-opacity: 0;
	-khtml-opacity: 0;
	opacity: 0;*/
	position:relative;
	padding:10px 0 15px;
}
.videoTitle .videoTitleBox h2 {
	color:rgba(255,255,255,1);
	font-size:22px;
	font-family: "Noto Sans KR", serif;
	letter-spacing:0px;
	line-height:100%;
	/*-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	-moz-opacity: 0;
	-khtml-opacity: 0;
	opacity: 0;*/
	position:relative;
	/*text-transform: uppercase;*/
}
.videoTitle .videoTitleBox h3 {
	color:rgba(255,255,255,1);
	font-size:20px;
	letter-spacing:0px;
	/*text-transform: uppercase;*/
	line-height:120%;
	/*-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	-moz-opacity: 0;
	-khtml-opacity: 0;
	opacity: 0;*/
	position:relative;
	display:none;
}

.scroll-down {
	position: absolute;
    bottom: 0;
    left: calc(50% - 39.5px);
    width: 80px;
    z-index: 130;
	opacity:0;
}
.scroll-down .scroll-inner {
	display:block;
	text-align:center;
	font-size:0;
}
.scroll-down .scroll-txt {
	display:block;
	font-size:12px;
	font-family:"Barlow Semi Condensed",sans-serif;
	/*text-transform:uppercase;*/
	letter-spacing:2px;
	color:rgba(255,255,255,1);
	margin-bottom:10px;
}
.scroll-down .scroll-wheel {
	position:relative;
	display:block;
	width:13px;
	height:20px;
	border:2px solid rgba(195,130,90,1);
	border:2px solid rgba(255,255,255,1);
	
	border-radius: 10px 10px 10px 10px;
	margin:0 auto 10px;
}
.scroll-down .scroll-wheel-in {
	position:absolute;
	left:3px;
	top:3px;
	display:inline-block;
	width:3px;
	height:5px;
	background:rgba(195,130,90,1);
	background:rgba(255,255,255,1);
	
	border-radius: 3px 3px 3px 3px;
	-webkit-animation: updown 2s ease both infinite;
			animation: updown 2s ease both infinite;
}
.scroll-down .scroll-bar {
	font-size:0;
	display:inline-block;
	width: 1px;
    height: 40px;
	background:rgba(195,130,90,1);
	background:rgba(255,255,255,1);
	
	-webkit-animation: updown 2s ease both infinite;
			animation: updown 2s ease both infinite;
}

@-webkit-keyframes updown {
	0%, 100% {
		-webkit-transform: translateY(0%);
				transform: translateY(0%);
	}
	50% {
		-webkit-transform: translateY(35%);
				transform: translateY(35%);
	}
}
@-moz-keyframes updown {
  	0%, 100% {
		-webkit-transform: translateY(0%);
				transform: translateY(0%);
	}
	50% {
		-webkit-transform: translateY(35%);
				transform: translateY(35%);
	}
}
@-o-keyframes updown {
  	0%, 100% {
		-webkit-transform: translateY(0%);
				transform: translateY(0%);
	}
	50% {
		-webkit-transform: translateY(35%);
				transform: translateY(35%);
	}
}
@keyframes updown {
 	0%, 100% {
		-webkit-transform: translateY(0%);
				transform: translateY(0%);
	}
	50% {
		-webkit-transform: translateY(35%);
				transform: translateY(35%);
	}
}

#visualVideoStart {
	position:absolute;
    bottom:0px;
    z-index: 110;
	margin:0 auto;
	width:100%;
	padding:40px 60px;
	text-align:right;
}

#visualVideoStart .ctrl {
	position:relative;
	display:block;
	vertical-align:middle;
	font-size:0;
}
#visualVideoStart .playSet {
	position:relative;
	display: inline-block;	
	color:rgba(0,0,0,1);
	text-transform:uppercase;
	-webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px;
	overflow:hidden;
}

#visualVideoStart .btnSet {
	position:relative;
	width:180px;
	height:40px;
}

#visualVideoStart .video-play {
	display:inline-block;
	cursor:pointer;
	font-size:14px;
	color:rgba(0,0,0,1);
	line-height:40px;
	text-align:left;
	padding-left:37px;
}

#visualVideoStart .video-play {
	background:rgba(255,255,255,1) url(/imgs/video/b_play.png) 15px center no-repeat;
}


@media screen and (max-width: 1280px) {
	#videoVimeoCtrl {
		padding:30px 30px;
		text-align:right;
	}
	#visualVideoStart {
		padding:30px 30px;
		text-align:right;
	}
}

@media screen and (max-width: 1024px) {
	#videoVimeoCtrl {
		padding:30px 30px;
		text-align:right;
	}
	.videoTitle .videoTitleBox h1 {
		font-size:40px;
	}
	.videoTitle .videoTitleBox h2 {
		font-size:18px;
	}
	.scroll-down .scroll-bar {
		height: 20px;
	}
	
}

@media screen and (max-width: 980px) {
	#videoVimeoCtrl {
		padding:20px 20px;
		text-align:right;
	}
	#visualVideoStart {
		padding:20px 20px;
		text-align:right;
	}
}


@media screen and (max-width: 768px) {
	#videoVimeoCtrl {
		padding:25px 20px;
		text-align:center;
	}
	#visualVideoStart {
		padding:25px 20px;
		text-align:center;
	}
	.videoTitle .videoTitleBox h1 {
		font-size:32px;
	}
	.videoTitle .videoTitleBox h2 {
		font-size:16px;
	}
	.scroll-down {display:none}
}

@media screen and (max-width: 640px) {
	
	
}
@media screen and (max-width: 480px) {
	
}


@media screen and (max-width: 360px) {
	.videoTitle .videoTitleBox h1 {
		font-size:28px;
	}
}

@media screen and (max-width: 320px) {
	
}