@charset "utf-8";
/*----------------------------------* 
	CSS 초기화 
*----------------------------------*/
body{color:#fff;font-size:12px;line-height:18px;margin:0;padding:0;vertical-align:baseline}
img{border:0 none;margin:0}
p{font-size:12px}
h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, ul, form, blockquote, form{margin:0;padding:0}
h1{font-size:200%}
h2{font-size:180%}
h3{font-size:160%}
h4{font-size:140%}
h5{font-size:120%}
h6{font-size:110%}

ul, li{list-style-image:none;list-style-position:outside;list-style-type:none}
table th{text-align:center;vertical-align:baseline}
table td{vertical-align:baseline}
input{vertical-align:middle}
input.input_text{border:1px solid #fe8227;padding-left:3px;font-size:large;font-weight:bold}
textarea{border:1px solid #c9c9c9}
select{height:19px;font-size:12px;line-height:14px}

/* simple css set*/
.vam{vertical-align:middle}
.vab{vertical-align:baseline}
.t_ac{text-align:center}
.t_ar{text-align:right}
.t_al{text-align:left}
.cu_po{cursor:pointer}
.dp_no{display:none}

.fl{float:left}
.fr{float:right}
.curP{cursor:pointer}
.bold{font-weight:bold}

.clear:after{clear:both;content:".";display:block;font-size:0;height:0;visibility:hidden}
.clear{min-height:1px}
* html .clear{height:1px}
.ml5{margin-left:5px}
.ml10{margin-left:10px}
.ml15{margin-left:15px}
.ml20{margin-left:20px}
.mr5{margin-right:5px}
.mr10{margin-right:10px}
.mr15{margin-right:15px}
.mr20{margin-right:20px}
.mt5{margin-top:5px}
.mt10{margin-top:10px}
.mt15{margin-top:15px}
.mt20{margin-top:20px}
.mb5{margin-bottom:5px}
.mb7{margin-bottom:7px}
.mb10{margin-bottom:10px}
.mb15{margin-bottom:15px}
.mb20{margin-bottom:20px}
.pt5{padding-top:5px}
.pt10{padding-top:10px}
.pt15{padding-top:15px}
.pt20{padding-top:20px}
.pb5{padding-bottom:5px}
.pb10{padding-bottom:10px}
.pb15{padding-bottom:15px}
.pb20{padding-bottom:20px}
.pl5{padding-left:5px}
.pl10{padding-left:10px}
.pl15{padding-left:15px}
.pl20{padding-left:20px}
.pr5{padding-right:5px}
.pr10{padding-right:10px}
.pr15{padding-right:15px}
.pr20{padding-right:20px}

.e01{color:#e01e36}
.col_r{color:#d61223}
.col_gr{color:#8f8f8f}
.cr_red{color:#d61223}
.cr_gray{color:#8f8f8f}
.c_red{color:#d61223}
.c_gray{color:#8f8f8f}
.c_blue{color:#639aed}
.c_org{color:#fe8227}

.f11{font-size:11px}
.f12{font-size:12px}
.f13{font-size:13px}
.f14{font-size:14px}
.f15{font-size:15px}
.f16{font-size:16px}
.f17{font-size:17px}
.f18{font-size:18px}
.bold{font-weight:bold}


*{margin:0;padding:0;box-sizing:border-box}
body,html{height:100%}
body{background-color:#000}
.wrap{width:100%;height:100%;overflow:hidden}


.slideShow{width:100%;height:100%;overflow:hidden;position:relative}
.slideShow div.slide{width:100%;height:100%;background-color:#000;position:absolute;top:0;left:0}
.slideShow div.slide span.img{width:100%;height:100%;position:absolute;top:0;left:0}
/* 텍스트박스 공통 */
.slideShow div.slide div.textBox{float:left;width:100%;position:absolute;left:0;padding:2vmin}
.slideShow div.slide div.textBox span.bg{position:absolute;top:0;width:70%;height:100%;z-index:1}
.slideShow div.slide div.textBox p.text{float:left;width:100%;position:relative;z-index:2}
.slideShow div.slide div.textBox p.text.row1{font-size:6vmin;line-height:9vmin}
.slideShow div.slide div.textBox p.text.row2{font-size:4.5vmin;line-height:7vmin}
.slideShow div.slide div.textBox p.text span{float:left;width:100%}

/* 좌측 공통 */
.slideShow div.slide.position1 div.textBox p.text
, .slideShow div.slide.position3 div.textBox p.text{text-align:left}

/* 우측 공통 */
.slideShow div.slide.position2 div.textBox p.text
, .slideShow div.slide div.textBox p.text{text-align:right}

/* 상단 공통 */
.slideShow div.slide.position1 div.textBox
, .slideShow div.slide.position2 div.textBox{top:0;bottom:auto}

/* 하단 공통 */
.slideShow div.slide.position3 div.textBox
, .slideShow div.slide div.textBox{top:auto;bottom:0}

/* position1 : 좌측상단 */
.slideShow div.slide.position1 div.textBox span.bg{left:0}
.slideShow div.slide.position1 div.textBox span.bg{
	background: rgba(0,0,0,0.77);
	background: -moz-linear-gradient(left, rgba(0,0,0,0.77) 0%, rgba(255,255,255,0) 100%);
	background: -webkit-gradient(left top, right top, color-stop(0%, rgba(0,0,0,0.77)), color-stop(100%, rgba(255,255,255,0)));
	background: -webkit-linear-gradient(left, rgba(0,0,0,0.77) 0%, rgba(255,255,255,0) 100%);
	background: -o-linear-gradient(left, rgba(0,0,0,0.77) 0%, rgba(255,255,255,0) 100%);
	background: -ms-linear-gradient(left, rgba(0,0,0,0.77) 0%, rgba(255,255,255,0) 100%);
	background: linear-gradient(to right, rgba(0,0,0,0.77) 0%, rgba(255,255,255,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff', GradientType=1 );
}
/* position2 : 우측상단 */
.slideShow div.slide.position2 div.textBox span.bg{right:0}
.slideShow div.slide.position2 div.textBox span.bg{
	background: rgba(0,0,0,0);
	background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 0%, rgba(255,255,255,0) 0%, rgba(0,0,0,0.77) 100%);
	background: -webkit-gradient(left top, right top, color-stop(0%, rgba(0,0,0,0)), color-stop(0%, rgba(0,0,0,0)), color-stop(0%, rgba(255,255,255,0)), color-stop(100%, rgba(0,0,0,0.77)));
	background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 0%, rgba(255,255,255,0) 0%, rgba(0,0,0,0.77) 100%);
	background: -o-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 0%, rgba(255,255,255,0) 0%, rgba(0,0,0,0.77) 100%);
	background: -ms-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 0%, rgba(255,255,255,0) 0%, rgba(0,0,0,0.77) 100%);
	background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 0%, rgba(255,255,255,0) 0%, rgba(0,0,0,0.77) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=1 );
}
/* position3 : 좌측하단 */
.slideShow div.slide.position3 div.textBox span.bg{left:0}
.slideShow div.slide.position3 div.textBox span.bg{
	background: rgba(0,0,0,0.77);
	background: -moz-linear-gradient(left, rgba(0,0,0,0.77) 0%, rgba(255,255,255,0) 100%);
	background: -webkit-gradient(left top, right top, color-stop(0%, rgba(0,0,0,0.77)), color-stop(100%, rgba(255,255,255,0)));
	background: -webkit-linear-gradient(left, rgba(0,0,0,0.77) 0%, rgba(255,255,255,0) 100%);
	background: -o-linear-gradient(left, rgba(0,0,0,0.77) 0%, rgba(255,255,255,0) 100%);
	background: -ms-linear-gradient(left, rgba(0,0,0,0.77) 0%, rgba(255,255,255,0) 100%);
	background: linear-gradient(to right, rgba(0,0,0,0.77) 0%, rgba(255,255,255,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff', GradientType=1 );
}
/* position4, default : 우측하단 */
.slideShow div.slide div.textBox span.bg{right:0}
.slideShow div.slide div.textBox span.bg{
	background: rgba(0,0,0,0);
	background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 0%, rgba(255,255,255,0) 0%, rgba(0,0,0,0.77) 100%);
	background: -webkit-gradient(left top, right top, color-stop(0%, rgba(0,0,0,0)), color-stop(0%, rgba(0,0,0,0)), color-stop(0%, rgba(255,255,255,0)), color-stop(100%, rgba(0,0,0,0.77)));
	background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 0%, rgba(255,255,255,0) 0%, rgba(0,0,0,0.77) 100%);
	background: -o-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 0%, rgba(255,255,255,0) 0%, rgba(0,0,0,0.77) 100%);
	background: -ms-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 0%, rgba(255,255,255,0) 0%, rgba(0,0,0,0.77) 100%);
	background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 0%, rgba(255,255,255,0) 0%, rgba(0,0,0,0.77) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=1 );
}


.visitors{width:100%;height:100%;overflow:hidden;position:relative}
.visitors .bgBox{width:35%;height:100%;text-align:center}
.visitors .textBox{width:65%;height:100%;text-align:center;position:relative}
.visitors .textBox dl{
	position:absolute;
	top:100%;
	left:0;
	width:100%;
	text-align:center;
	text-transform:uppercase;
	animation:60s credits linear 1;
}
.visitors .textBox dl dt{width:100%;font-size:10vmin;line-height:20vmin;margin-bottom:2.5vmin}
.visitors .textBox dl dd{width:100%;margin-bottom:5vmin}
.visitors .textBox dl dd p{width:100%}
.visitors .textBox dl dd p.company{font-size:4vmin;line-height:4vmin}
.visitors .textBox dl dd p.name{font-size:6vmin;line-height:6.5vmin}

@keyframes credits{
	0% {
		top:100%;
	}
	100% {
		top:-400%;
	}
}