/* CSS Document */
a {
	color: blue;
	text-decoration: none;
}
a:visited {
 	color: blue;
}
a:hover{
	color:blue;
}

body{
	margin: 0;
}

.big_wrapper{
	margin: 0 3vw;
	padding-top: 1vw;
}
.bgimg{
	overflow: hidden;
	position: fixed;
	z-index: -4;
	width: 100%;
	height: 100%;
}
#grain{
	position: absolute; 
	width: 45%;
  	height: auto;
	z-index: -5;
	bottom: -5vw;
	right: -14vw;
	transform: scaleX(0.9);

}
#grain2{
	position: absolute; 
	width:20%;
  	height: auto;
	z-index: -10;
	top: -1vw;
	left: 8vw;
	transform:  rotate(180deg) ;
}

#g_grunge{
	position: absolute; 
	width: 40%;
  	height: auto;
	z-index: -6;
	bottom: -1vw;
	left: -13vw;
	transform: rotate(30deg);
}



#g_ruler{
	position: absolute; 
	width: 7%;
  	height: auto;
	z-index: -6;
	top: 28vw;
	right: 5vw;
	transform: rotate(-70deg);
}

#g_whites{
	position: absolute; 
	width: 55%;
  	height: auto;
	z-index: -5;
	bottom: 2vw;
	right: -3vw;
	filter: invert(1);
}



#g_hor_line{
	position: absolute; 
	width: 86%;
  	height: auto;
	z-index: -10;
	top: 29vh;
	left: 2vw;
	filter: invert(1);
}

#g_ver_line{
	position: absolute; 
	width: 20%;
  	height: auto;
	z-index: -10;
	bottom: 8vh;
	left: 15vw;
	filter: invert(1);
}

#g_hor_line_s{
	position: absolute; 
	width: 24%;
  	height: auto;
	z-index: -7;
	bottom: 1vw;
	right: 23vw;
	filter: invert(1);
}

#g_redfive{
	position: absolute; 
	width: 17%;
  	height: auto;
	z-index: -2;
	top: 8vh;
	right:1vw;
}


#g_navy{
	position: absolute; 
	width: 10%;
  	height: auto;
	z-index: -10;
	bottom: -1vw;
	left: 1vw;
}
/*backgroundddddddddddd*/


.header{

	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding-bottom: 1vh;
	z-index: -1;
}

.info_r{
	display: flex;
	flex-direction: row;
	padding-bottom: 8vw;
	
}
.school{
	flex-direction: column;
	margin-top: 3vh;
	
}

.kr_school{
	color: black;	
	font-size: 2vw;
	font-family:'Noto Sans KR', sans-serif;
	font-weight: 700;
	text-align: right;	
	line-height: 2.4vw;
}

.eng_school{
	color: #404040;	
	text-align: right;
	font-family: 'Roboto', sans-serif;
	padding-top: 0.6vw;
	font-size: 1.7vw;
	line-height: 1.9vw;
  	overflow: hidden;
  	text-overflow: ellipsis;
  	white-space: nowrap;
}

.symbol{
	margin-top: 3vh;
	margin-left: 1.8vw;
	height:8.8vw;
}

.bar{
	display: flex;
	flex-direction: row;
	//background-color: antiquewhite;
}
.works{
	font-size: 2.6vw;
	font-family: 'Roboto', sans-serif;
	color: black;
	margin-top: 1vh;
	align-self: flex-end;
}
.making{
  	white-space: nowrap;
	display: flex;
	font-size: 2.6vw;
	font-family: 'Roboto', sans-serif;
	color: black;	
	margin-left: 3vw;
	align-self: flex-end;

}
/**************--------------------------------------*********/

.container{
	display: flex;
	padding: 0 7vw 0 7vw;
	min-height: 100vh;
    flex-direction: column;
	align-items: stretch;
	justify-content: center;
	font-family: 'Noto Sans KR', sans-serif;
}
/*///////////////////////////////////////////////*/

.xbox{
	background-color: paleturquoise;
}

/*///////////////////////////////////////////////*/

.profile{
	margin-top: 5vw ;
	/*background-color: aquamarine;*/
	align-items: center;
	display:flex;
	flex-basis: auto;
	flex-direction: column;	
	flex-grow: 0;
}

.pic {
	height:30vw;	
	width: auto;
	margin-bottom: 5vw;
}

.intro{
	text-align: center;
	padding: 0 17vw;
	/*background-color: grey;*/
}

.description{
	font-size: 1.6vw;
	line-height: 2.4vw;
	font-weight: 700;
	font-family:'Noto Sans KR', sans-serif;
	padding: 1.6vw;
	border:dotted;
	border-width: 1px;
	background: white;	
}

.sns {
	position: absolute;
	transform: rotate(-19deg);
	left:13vw;
	top: 49vw;
	font-size: 1vh;
	line-height: 2.3vw;
	text-align: center;
	font-family: 'Source Code Pro', monospace;
	color: dimgrey;
	text-decoration: underline;
	/*background-color: cornsilk;*/
	border-style: inset;
	border-width: 3px;
	padding: 2px 6px;
	background-color: white;
	
}

/*////////////////////////middle///////////////////////*/


.slideshow-container{
	position:relative;
	display: flex;
  	align-items: center;
 	justify-content: center;
	/******/
	margin: 9vh 8vw 4vw 8vw;
}

.prev {
	position: absolute;
	top: 40%;
	left: -1%;
	cursor: pointer;
	width: auto;
	padding: 2vw;
	color: white;
	font-weight: bold;
	font-size: 3vw;
	transition: 0.6s ease;
	user-select: none;
}
.next {
	position: absolute;
	top: 40%;
	right: -1%;
	cursor: pointer;
	width: auto;	
	padding: 2vw;
	color: white;
	font-weight: bold;
	font-size: 3vw;
	transition: 0.6s ease;
	user-select: none;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
	//background-color: pink;
}

/* The dots/bullets/indicators */
.dot {
	cursor: pointer;
	height: 2px;
	width: 25%;
	background-color: #bbb;
	display: inline-block;
	transition: background-color 0.6s ease;
	margin-top: 0.1px;
	margin-bottom: 4vh;
}

.active, .dot:hover {
	background-color: blue;
}


/*///////////////////////////////////////////////*/
.contents{
	margin-left: 8vw;
	margin-right: 8vw;
	
	/*background-color: darkgoldenrod;*/
	display: flex;
	flex-basis: auto;
    flex-direction:row;
}



#tag{
	text-align: left;
	font-size: 1.6vw;
	line-height: 3vw;
	/*background-color: paleturquoise;*/
	padding: 1.6vw;
	border: hidden;
	background: white;
	margin-right: 3vw;
}
#name{
	font-size: 2.8vw;
	line-height: 1.1em;
	text-transform: uppercase;
	font-family: 'Roboto', sans-serif;
	font-weight: 900;
	text-align: right;
	background-color: white;
	padding: 1.6vw;
	white-space: nowrap;
	/*background-color: blue;*/
}

#small{font-size: 2.3vw;
	line-height: 2.5vw;
	
}
#genre{
	margin-top: 3vh;
}

#tiny{
	border: hidden;
	font-family: 'Source Code Pro', monospace;
	background: white;
	color: blue; 
	padding: 3px 4px;
	font-size: 1.4vw;
	font-weight: 700;
	text-align: right;	
}
/*////////////////////////footer///////////////////////*/


/*////////////////////////footer///////////////////////*/

.footer{
	margin: 16vw 0 5vw;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Source Code Pro', monospace; 
	font-size: 1.6vw;
	flex-shrink: 0;	
	color: blue;
	text-decoration: underline;
}

.bottomname{
	background-color: blue;
	font-size: 1.3vh;
	font-family:'Noto Sans KR', sans-serif;
	color: white;	
	font-weight: 700;
	justify-content: center;
	text-align: center;
	padding: 4vw 0 4vw 0;
}

/*////////////////////////footer///////////////////////*/


@media only screen and (max-width: 701px) {
 	
	.sns {
		font-size: 1.4vh;
		line-height: 2.4vh;
	}
	.description{
		font-size: 1.9vw;
	}
	
	.intro{
		padding: 0 24vw;
	}
	#tag{
		font-size: 2vw;
		line-height: 3.4vw;
	}
	
	#name{
	font-size: 4vw;
	line-height: 3.9vw;
	padding-bottom: 3vw;
	}
		
	.pic {
	height:50vw;	
	width: auto;
	}
	
	.container{
	padding: 0;
	}
	
	.bottomname{
	font-size: 1.4vw;
	}
}

@media only screen and (min-width: 702px) {
	
	.pic {
	height:25vw;	
	width: auto;
	}
 	.description {
	font-size: 1vw;
	}
	
	.sns{
	font-size: 1.3vw;
	}
	
	#tag{
	font-size: 1.2vw;
	line-height: 2.4vw;
	}
	
	.kr_school{
	font-size: 1.2vw;
	line-height: 1.4vw;
}

.eng_school{
	padding-top: 0.4vw;
	font-size: 1.4vw;
	line-height: 1.6vw;
}

.symbol{
	margin-left: 1vw;
	height:6.1vw;
}

.works{
	font-size: 2vw;
}
.making{
	font-size: 2vw;
	margin-left: 2vw;
}
}