@font-face{
  font-family:'Spoqa Han Sans';
  font-weight:700;
  src:local("SpoqaHanSans-Bold"),local("SpoqaHanSans-Bold"),url(fonts/notokr-medium.edot) format("eot"),url(fonts/notokr-medium.svg) format("svg"),url(fonts/notokr-medium.ttf) format("truetype"),url(fonts/notokr-medium.woff) format("woff")
}

@font-face{
  font-family:'Spoqa Han Sans';
  font-weight:400;
  src:local("SpoqaHanSans-Regular"),local("SpoqaHanSans-Regular"),url(fonts/SpoqaHanSans-Regular.eot) format("eot"),url(fonts/SpoqaHanSans-Regular.svg) format("svg"),url(fonts/SpoqaHanSans-Regular.ttf) format("truetype"),url(fonts/SpoqaHanSans-Regular.woff) format("woff")}

@font-face{font-family:'Spoqa Han Sans';font-weight:200;
  src:local("SpoqaHanSans-Thin"),local("SpoqaHanSans-Thin"),url(fonts/SpoqaHanSans-Thin.eot) format("eot"),url(fonts/SpoqaHanSans-Thin.svg) format("svg"),url(fonts/SpoqaHanSans-Thin.ttf) format("truetype"),url(fonts/SpoqaHanSans-Thin.woff) format("woff")
}

@import url(http://fonts.googleapis.com/earlyaccess/kopubbatang.css);

* {
   outline: 0;
   box-sizing: border-box;
   text-decoration: none;
}

html,body{
	width:100%;
	height:100%;
}

body {
	background: #fff;
	width: 100%;
	padding : 0px;
	margin:0px;
	
	line-height: 140%;
	
	font-family: Helvetica, 'Spoqa Han Sans', Arial, sans-serif;
	font-size: 13px;

	//color: rgba(255, 255, 255, 0.95);
	color: rgba(13, 1, 22, 0.8);
	overflow-x: hidden;
}

a.nodeco {
	text-decoration: none;
}


a, a:link, a:visited{
	color: rgba(13, 1, 22, 0.8);
}

a.hint, a.hint:link, a.hint:visited{
	color: rgba(0, 0, 0, 0.3);
}

hr {
	height: 1px;
	border: 0;
	//color: rgba(255, 255, 255, 0.5);
	//color: #0d0116;
	background-color: @border-color;
	margin-top: 0;
	margin-bottom: 0.9rem;

}

.bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
  height: 100%;
  z-index: 1;
  background: #f4d1d4;
  background: url(img/bg1.jpg) repeat-y center center; 
	  -webkit-background-size: cover cover;
	  -moz-background-size: cover cover;
	  -o-background-size: cover cover;
	  background-size: cover cover;

  opacity: 0;
  transition: opacity 3s;

  &.fadein {
  	opacity: 1;
  }
}

@border-color: rgba(0, 0, 0, 0.25);

.bg1 {
	background-image: url('img/bg1.png');
}
.bg2 {
	background-image: url('img/bg2.png');
}
.bg3 {
	background-image: url('img/bg3.png');
}
.bg4 {
	background-image: url('img/bg4.png');
}

.desktop {
	display: block;
}
.mobile {
	display: none;
}

.overlay-wrapper {
	position: fixed;
	z-index: 1000;
	top: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.5);
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;

	&.hidden {
		display: none;
	}

	.video {
		width: 70%;
		height: 0;
		padding-bottom: 56.7%;
	}
}

.hero-wrapper {
	width: 100%;
	height: 100vh;

	.title {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		flex-direction: column;
		margin-top: -1rem;
		padding: 1rem;
		h1, h2, h3 {
			line-height: 100%;

			@media(max-width: 900px) {
				line-height: 120%;
			}
		}

		#announce {
			opacity: 0;
		}
		#lyrics {
			font-size: 3.2rem;
			margin: 0;
			line-height: 120%;
			font-weight: bold;
			font-family: 'KoPub Batang', serif;
			margin-bottom: 1.5rem;
			span {
				opacity: 0;
			}
		}
	}	

	
}

.content-wrapper{
	position: relative;
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	height: 100%;
	z-index: 2;
	box-sizing: border-box;
	padding: 1.5rem 1.5rem;
	background: rgba(255, 0, 0, 0);
}

.info-super {
	width: 100%;
	border-top: 1px solid @border-color;
	border-bottom: 1px solid @border-color;
}
.info {
	width: 100%;
	margin: 0;
	border-left: 1px solid @border-color;
	border-right: 1px solid @border-color;
	padding: 1rem 1rem;
}

.credit {
	width: 100%;
	text-align: right;
	padding-top: 1rem;
	padding-bottom: 1.5rem;
}

.left {
	width: 50%;
	padding-right: 0rem;
}
.right {
	width: 50%;
	padding-left: 0rem;
}



.liveacts-super {
	width: 100%;
	border-top: 1px solid @border-color;
	border-bottom: 1px solid @border-color;
}
.liveacts {
	width: 100%;
	padding: 1rem;
	border-left: 1px solid @border-color;
	border-right: 1px solid @border-color;
	margin: 0;
}

.links-super {
	width: 100%;
	border-bottom: 1px solid @border-color;
}
.links {
	width: 100%;
	padding: 1rem;
	border-left: 1px solid @border-color;
	border-right: 1px solid @border-color;
	margin: 0;
}

.links-xs-super {
	display: none;
	width: 100%;
	border-bottom: 1px solid @border-color;
}
.links-xs {
	width: 100%;
	padding: 1rem;
	border-left: 1px solid @border-color;
	border-right: 1px solid @border-color;
	margin: 0;
}

.discography-super {
	width: 100%;
}

.discography-super.top-border {
	width: 100%;
	border-top: 1px solid @border-color;
}

.discography {
	width: 100%;
	padding: 1rem;
	margin: 0;
	border-left: 1px solid @border-color;
	// border-right: 1px solid rgba(255, 255, 255, 0.5);
	border-bottom: 1px solid @border-color;
}


.disco-row {
	width: 100%;
	padding: 1rem 0;
	border-top: 1px solid @border-color;

}

.video {
	position: relative;;
	width: 100%;
	height: auto;
	padding-bottom: 56.7%;
}
iframe {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}


.main-super, .main-video-super {
	width: 100%;
	border: 1px solid @border-color;
	margin-bottom: 1rem;
	display: flex;
	flex-wrap: wrap;
}

.main-video-super {
	border: 0;
}

.main-left, .main-right {
	width: 50%;
	margin: 0;
	padding: 1rem 1rem;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-content: center;
	border: 0;

	.video {
		width: 100%;
		height: 0;
		padding-bottom: 100%;
	}
}

.main-left {
	justify-content: center;
}

@media(max-width: 900px) {
	.desktop {
		display: none;
	}
	.mobile {
		display: block;
	}

	.overlay-wrapper {
		.video {
			width: 100%;
			height: 0;
			padding-bottom: 56.7%;

		}
	}

	.left {
		width: 100%;
	}
	.right {
		display: none;
	}
	.main-left, .main-right {
		width: 100%;
	}
	.main-right {
		//border-top: 1px solid rgba(255, 255, 255, 0.5);
	}
	.links-xs-super {
		display: block;
	}

	.discography {
		border-right: 1px solid @border-color;
	}
}