.history02{display:none}

.tt{text-align:left;position:fixed;top:40%;left:100px}
.tt h3{font-size:50px;font-family: 'Roboto', sans-serif;font-weight:100;color:#fff;text-transform:uppercase}
.tt h4{font-size:21px;color:#fff;margin:10px 0 70px 2px}
.tt li{float:left}
.tt li:last-child a{font-family: 'Roboto', sans-serif;font-weight:400;margin-left:10px}
.tt a{font-size:18px;color:#fff;line-height:18px;border:2px solid #fff;width:180px;height:60px;display:block;text-align:center;padding-top:11px}
.tt a span{font-size:12px;font-family: 'NotoSans', sans-serif;font-weight:400}
.tt a:hover{color:#faa533;border:2px solid #faa533}
.tt a.on{color:#faa533;border:2px solid #faa533}

.cont{float:right;margin-top:14%;margin-right:120px}
.cont table{width:425px;margin-bottom:100px}
.cont tr{border-top:1px solid rgba(255,255,255,0.2);display:block}
.cont tr:first-child{border-top:none}
.cont td{padding:65px 15px;color:rgba(255,255,255,0.8);font-size:13px;line-height:22px;font-weight:100;text-align:center}
.cont td:first-child{font-size:45px;font-family: 'Roboto', sans-serif;font-weight:100;color:#fff}
.cont td:last-child{text-align:left}

.scroll{position:fixed;top:50%;right:50px;margin-top:15px}

/* 접기 */
	.cb-slideshow,
	.cb-slideshow:after {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0px;
		left: 0px;
		z-index: -5;
		background:#222
	}
	.cb-slideshow:after {
		content: '';
		background: transparent url(../images/pattern.png) repeat top left;
	}
	.cb-slideshow li span {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0px;
		left: 0px;
		color: transparent;
		background-size: cover;
		background-position: 50% 50%;
		background-repeat: none;
		opacity: 0;
		z-index: 0;
		-webkit-backface-visibility: hidden;
		-webkit-animation: imageAnimation 36s linear infinite 0s;
		-moz-animation: imageAnimation 36s linear infinite 0s;
		-o-animation: imageAnimation 36s linear infinite 0s;
		-ms-animation: imageAnimation 36s linear infinite 0s;
		animation: imageAnimation 36s linear infinite 0s;
	}
	.cb-slideshow li span:after{display:block;content:'';clear:both;position:absolute;top:0;left:0;width:100%;height:100%;background:url(../images/sub/121_visual_cover.png)}

	.hh01 li:nth-child(1) span { background-image: url(../images/sub/52_vosual03.jpg) }
	.hh01 li:nth-child(2) span {
		background-image: url(../images/sub/52_vosual01.jpg);
		-webkit-animation-delay: 10s;
		-moz-animation-delay: 10s;
		-o-animation-delay: 10s;
		-ms-animation-delay: 10s;
		animation-delay: 10s;
	}
	.hh01 li:nth-child(3) span {
		background-image: url(../images/sub/52_vosual03.jpg);
		-webkit-animation-delay: 20s;
		-moz-animation-delay: 20s;
		-o-animation-delay: 20s;
		-ms-animation-delay: 20s;
		animation-delay: 20s;
	}
	.hh01 li:nth-child(4) span {
		background-image: url(../images/sub/52_vosual01.jpg);
		-webkit-animation-delay: 30s;
		-moz-animation-delay: 30s;
		-o-animation-delay: 30s;
		-ms-animation-delay: 30s;
		animation-delay: 30s;
	}
	.hh01 li:nth-child(5) span {
		background-image: url(../images/sub/52_vosual03.jpg);
		-webkit-animation-delay: 40s;
		-moz-animation-delay: 40s;
		-o-animation-delay: 40s;
		-ms-animation-delay: 40s;
		animation-delay: 40s;
	}
	.hh01 li:nth-child(6) span {
		background-image: url(../images/sub/52_vosual01.jpg);
		-webkit-animation-delay: 50s;
		-moz-animation-delay: 50s;
		-o-animation-delay: 50s;
		-ms-animation-delay: 50s;
		animation-delay: 50s;
	}

	.hh02 li:nth-child(1) span { background-image: url(../images/sub/52_vosual02.jpg) }
	.hh02 li:nth-child(2) span {
		background-image: url(../images/sub/52_vosual04.jpg);
		-webkit-animation-delay: 10s;
		-moz-animation-delay: 10s;
		-o-animation-delay: 10s;
		-ms-animation-delay: 10s;
		animation-delay: 10s;
	}
	.hh02 li:nth-child(3) span {
		background-image: url(../images/sub/52_vosual02.jpg);
		-webkit-animation-delay: 20s;
		-moz-animation-delay: 20s;
		-o-animation-delay: 20s;
		-ms-animation-delay: 20s;
		animation-delay: 20s;
	}
	.hh02 li:nth-child(4) span {
		background-image: url(../images/sub/52_vosual04.jpg);
		-webkit-animation-delay: 30s;
		-moz-animation-delay: 30s;
		-o-animation-delay: 30s;
		-ms-animation-delay: 30s;
		animation-delay: 30s;
	}
	.hh02 li:nth-child(5) span {
		background-image: url(../images/sub/52_vosual02.jpg);
		-webkit-animation-delay: 40s;
		-moz-animation-delay: 40s;
		-o-animation-delay: 40s;
		-ms-animation-delay: 40s;
		animation-delay: 40s;
	}
	.hh02 li:nth-child(6) span {
		background-image: url(../images/sub/52_vosual04.jpg);
		-webkit-animation-delay: 50s;
		-moz-animation-delay: 50s;
		-o-animation-delay: 50s;
		-ms-animation-delay: 50s;
		animation-delay: 50s;
	}

	@-webkit-keyframes imageAnimation { 
		0% {
			opacity: 0;
			-webkit-animation-timing-function: ease-in;
		}
		10% {
			opacity: 1;
			-webkit-transform: scale(1.05);
			-webkit-animation-timing-function: ease-out;
		}
		20% {
			opacity: 1;
			-webkit-transform: scale(1.1) rotate(3deg);
		}
		80% {
			opacity: 1;
			-webkit-transform: scale(1.1) rotate(3deg);
		}
		100% {
			opacity: 0;
			-webkit-transform: scale(1.1) rotate(3deg);
		}
		100% { opacity: 0 }
	}
	@-moz-keyframes imageAnimation { 
		0% {
			opacity: 0;
			-moz-animation-timing-function: ease-in;
		}
		10% {
			opacity: 1;
			-moz-transform: scale(1.05);
			-moz-animation-timing-function: ease-out;
		}
		20% {
			opacity: 1;
			-moz-transform: scale(1.1) rotate(3deg);
		}
		80% {
			opacity: 1;
			-webkit-transform: scale(1.1) rotate(3deg);
		}
		100% {
			opacity: 0;
			-moz-transform: scale(1.1) rotate(3deg);
		}
		100% { opacity: 0 }
	}
	@-o-keyframes imageAnimation { 
		0% {
			opacity: 0;
			-o-animation-timing-function: ease-in;
		}
		10% {
			opacity: 1;
			-o-transform: scale(1.05);
			-o-animation-timing-function: ease-out;
		}
		20% {
			opacity: 1;
			-o-transform: scale(1.1) rotate(3deg);
		}
		80% {
			opacity: 1;
			-webkit-transform: scale(1.1) rotate(3deg);
		}
		100% {
			opacity: 0;
			-o-transform: scale(1.1) rotate(3deg);
		}
		100% { opacity: 0 }
	}
	@-ms-keyframes imageAnimation { 
		0% {
			opacity: 0;
			-ms-animation-timing-function: ease-in;
		}
		10% {
			opacity: 1;
			-ms-transform: scale(1.05);
			-ms-animation-timing-function: ease-out;
		}
		20% {
			opacity: 1;
			-ms-transform: scale(1.1) rotate(3deg);
		}
		80% {
			opacity: 1;
			-webkit-transform: scale(1.1) rotate(3deg);
		}
		100% {
			opacity: 0;
			-ms-transform: scale(1.1) rotate(3deg);
		}
		100% { opacity: 0 }
	}
	@keyframes imageAnimation { 
		0% {
			opacity: 0;
			animation-timing-function: ease-in;
		}
		10% {
			opacity: 1;
			transform: scale(1.05);
			animation-timing-function: ease-out;
		}
		20% {
			opacity: 1;
			transform: scale(1.1) rotate(3deg);
		}
		80% {
			opacity: 1;
			-webkit-transform: scale(1.1) rotate(3deg);
		}
		100% {
			opacity: 0;
			transform: scale(1.1) rotate(3deg);
		}
		100% { opacity: 0 }
	}
	@-webkit-keyframes titleAnimation { 
		0% {
			opacity: 0;
			-webkit-transform: translateX(200px);
		}
		8% {
			opacity: 1;
			-webkit-transform: translateX(0px);
		}
		17% {
			opacity: 1;
			-webkit-transform: translateX(0px);
		}
		19% {
			opacity: 0;
			-webkit-transform: translateX(-400px);
		}
		25% { opacity: 0 }
		100% { opacity: 0 }
	}
	@-moz-keyframes titleAnimation { 
		0% {
			opacity: 0;
			-moz-transform: translateX(200px);
		}
		8% {
			opacity: 1;
			-moz-transform: translateX(0px);
		}
		17% {
			opacity: 1;
			-moz-transform: translateX(0px);
		}
		19% {
			opacity: 0;
			-moz-transform: translateX(-400px);
		}
		25% { opacity: 0 }
		100% { opacity: 0 }
	}
	@-o-keyframes titleAnimation { 
		0% {
			opacity: 0;
			-o-transform: translateX(200px);
		}
		8% {
			opacity: 1;
			-o-transform: translateX(0px);
		}
		17% {
			opacity: 1;
			-o-transform: translateX(0px);
		}
		19% {
			opacity: 0;
			-o-transform: translateX(-400px);
		}
		25% { opacity: 0 }
		100% { opacity: 0 }
	}
	@-ms-keyframes titleAnimation { 
		0% {
			opacity: 0;
			-ms-transform: translateX(200px);
		}
		8% {
			opacity: 1;
			-ms-transform: translateX(0px);
		}
		17% {
			opacity: 1;
			-ms-transform: translateX(0px);
		}
		19% {
			opacity: 0;
			-ms-transform: translateX(-400px);
		}
		25% { opacity: 0 }
		100% { opacity: 0 }
	}
	@keyframes titleAnimation { 
		0% {
			opacity: 0;
			transform: translateX(200px);
		}
		8% {
			opacity: 1;
			transform: translateX(0px);
		}
		17% {
			opacity: 1;
			transform: translateX(0px);
		}
		19% {
			opacity: 0;
			transform: translateX(-400px);
		}
		25% { opacity: 0 }
		100% { opacity: 0 }
	}
	/* Show at least something when animations not supported */
	.no-cssanimations .cb-slideshow li span{
		opacity: 1;
	}

@media(max-width:1200px){
	.tt{left:30px}
	.cont{margin-right:50px}
	.scroll{right:20px}
}
@media(max-width:1000px){
	.tt h3{font-size:30px}
	.tt h4{font-size:17px}
	.tt a{font-size:15px;width:140px;height:52px;padding-top:7px}
	.cont table{max-width:330px;width:100%}
	.cont td{padding:50px 10px;font-size:12px;line-height:20px}
	.cont td:first-child{font-size:27px}
}
@media(max-width:800px){
	.tt{position:relative;top:150px;left:0;text-align:center}
	.tt h4{margin:10px 0 30px}
	.tt ul{width:290px;margin:0 auto}
	.cont{float:none;margin:0 auto}
	.cont table{margin:200px auto 100px}
	.scroll{display:none}
}
@media(max-width:500px){
	.cont table{max-width:300px}
	.cont tr{border-top:1px solid rgba(255,255,255,0.1)}
	.cont td{padding:40px 5px}
}