a {
	color: #FFFFFF;
}
a:visited {
	color: #FFFFFF;
}
a:hover{
	color:yellow;
}


body{
	display: flex;
	min-height: 100vh;
    flex-direction: column;
	align-items: stretch;
	background-color: blue;
	z-index: -1;
	overflow: hidden;
}

.container{
	overflow: hidden;
}

/*===================================================*/
#grain{
	position: absolute; 
	width: 45%;
  	height: auto;
	z-index: -5;
	bottom: -5vw;
	right: -14vw;
	transform: scaleX(0.9);

}
#grain2{
	position: absolute; 
	width: 30%;
  	height: auto;
	z-index: -10;
	top: -1vw;
	left: -28vw;
	transform: scaleX(1.8) rotate(160deg) ;
}
#g_grunge_s{
	position: absolute; 
	width: 30%;
  	height: auto;
	z-index: -9;
	top: 0;
	right: -1vw;
}
#g_grunge{
	position: absolute; 
	width: 47%;
  	height: auto;
	z-index: -6;
	bottom: -7vw;
	left: -9vw;
}

#g_green{
	position: absolute; 
	width: 18%;
  	height: auto;
	z-index: -8;
	top: 2vh;
	left: 2vw;
}

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

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

#g_green_s{
	position: absolute; 
	width: 8%;
  	height: auto;
	z-index: -3;
	bottom: 16vw;
	right: 24vw;
}

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

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

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

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

#g_redone{
}


#g_navy{
	position: absolute; 
	width: 10%;
  	height: auto;
	z-index: -10;
	bottom: -1vw;
	left: 1vw;
}
/*===================================================*/
.container > div {
	flex: 1;
}
header{
	color: white;
	font-family:'Noto Sans KR', sans-serif;
	font-weight: 700;
	text-align: center;
	padding-top: 2.9vh;
	margin-bottom: 2px;
}

.info{
	position: absolute;
	align-self: center;
	flex-direction: column;
	padding-bottom: 8vw;
	top: 12vh;
}

.kr_school{
	color: white;
	font-family:'Noto Sans KR', sans-serif;
	font-weight: 700;
	text-align: center;
	font-size: 1.7vh;
	line-height: 2vh;
	margin: 1vh 0;
}

.eng_school{
	color: white;
	font-family: 'Roboto', sans-serif;
	text-align: center;
	font-size: 1.6vh;
	line-height: 2vh;
	margin-bottom: 2vh;
}

.symbol{
	margin: 0 3000vw 0;
	height:4.5vh;
}

.middle{ 
	display:flex;
	flex-basis: auto;
	flex:1;
	flex-direction: reverse;
	/*background-color: cornsilk;*/
}

nav{
	writing-mode: vertical-rl;
	color: white;
	font-family: 'Source Code Pro', monospace;
	text-decoration-line: underline;
}

aside{
	writing-mode: vertical-rl;
	transform: rotate(-180deg);
	color: white;
	font-family: 'Source Code Pro', monospace;
	text-decoration-line: underline;

}

aside:hover{
	color:yellow;
}

nav:nth-child(1){
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1;
}

main:nth-child(2){
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 3;
}

aside:nth-child(3){
	/*background-color: burlywood;*/
	display: flex;
	align-items: center;
	justify-content: center;	
	flex: 1;
}

footer{
	color: white;
	font-family: 'Roboto', sans-serif;
	flex-shrink: 0;	
	margin-top: 2px;
	text-align: center;
	padding-bottom: 5.5vh;
	}


@media only screen and (min-width: 702px) {
nav,aside{
	font-size: 2vh;
	white-space: nowrap;
}
	
.enter{
	margin-top: 33vh;
	font-size: 2.8vh;
	position: absolute;
	font-family: 'Roboto', sans-serif;
	border: groove;
	border-width: 3px;
	padding: 0.5vw;		
}
	
.enter:hover{
	background-color: black;
}

header,footer {
	font-size: 3vw;
}
	
.card {
	position: fixed;
	top: 35vh;
	width: 42vw;
}


.card__front {
	background-size: contain;
	background-image:url("assets/imgs/book.png");
	background-repeat:no-repeat;
	background-position:center;
	margin-left: auto;
	margin-right: auto;
}
	
.card__content {
	top: -5vw;
	text-align: center;
	align-content: center;
	position: relative;
	padding: 5vw;
	
	transition: transform 3s;
	-webkit-transition: transform 3s;
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	
}

.card:hover .card__content {
	transform: rotateY(.5turn);
	-webkit-transform: rotateY(.5turn);
}

.card__front,
.card__back {
	/*position: fixed;
	top: 1.4vh;
	bottom: 2vh;
	left: 0;
	right: 0;*/
	

	height: 30vh;
	align-content: center;
	
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
}

.card__front::before {
	content: '';
	position: absolute;
	--spacer: 0.3em;
	transform: var(--level-one);
	
	-webkit-transform: var(--level-one);
	
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
}

.card__body {
	
	transform: var(--level-two);
	-webkit-transform: var(--level-two);
	
	color: white;
	font-family:'Noto Sans KR', sans-serif;
	font-weight: 600;
	font-size: 1.7vh;
	line-height: 2.3vh;
	padding-top: 1vw;
	
}

.card__back {
 	transform: rotateY(.5turn);
	-webkit-transform: rotateY(.5turn);
	
 
 	background-image:url("assets/imgs/forfun/IMG_7574.jpg");
	
	
	background-repeat:no-repeat;
	background-size: 68%;
	background-position:center;
 	margin-left: auto;
 	margin-right: auto;
		
	
	 -webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

main{
	padding-right: 15vw;
	padding-left: 15vw;
	display: flex;
	flex-direction: column;
	}
}

/*여기부터 작은사이즈*/
@media only screen and (max-width: 701px) {
	
nav,aside{
	font-size: 1.7vh;
	white-space: nowrap;
}
.enter{
	font-size: 3vw;
	position: absolute;
	bottom: 20vh;
	font-family: 'Roboto', sans-serif;
	border: groove;
	border-width: 3px;
	padding: 0.5vh;	

	}
	
.enter:hover{
	background-color: black;
}
	
header,footer {
	font-size: 7vw;
}

.info{
	top: 15vh;		
	}

.card {
	width: 50vw;
	position:fixed;
}	

.card__front {
	background-size: 60%;
	background-image:url("assets/imgs/book.png");
	background-repeat:no-repeat;
	background-position:center;
	margin-left: auto;
	margin-right: auto;
}
	
.card__content {
	top: -5vw;
	text-align: center;
	align-content: center;
 	position: relative;
 	padding: 5vw;
 	transition: transform 3s;
	-webkit-transition: transform 3s;
 	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
}

.card:hover .card__content {
	transform: rotateY(.5turn);
	-webkit-transform: rotateY(.5turn);
}

.card__front,
.card__back {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 10vw 2vw 10vw;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	display: grid;
	align-content: center;
}

.card__front::before {
	content: '';
	position: absolute;
	--spacer: 0.3em;
	transform: var(--level-one);
	-webkit-transform: var(--level-one);
}

.card__body {
	transform: var(--level-two);
	-webkit-transform: var(--level-two);
	
	color: white;
	font-family:'Noto Sans KR', sans-serif;
	font-weight: 600;
 	font-size: 2vw;
 	line-height: 3vw;
	
}


.card__back {
 	transform: rotateY(.5turn);
	-webkit-transform: rotateY(.5turn);
	
 	color: var(--clr);
 	background-image:url("assets/imgs/cat.jpg");
	background-repeat:no-repeat;
	background-size: 50%;
	background-position:center;
 	margin-left: auto;
 	margin-right: auto;
	
	 -webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

main{
	padding-right: 15vw;
	padding-left: 15vw;
	display: flex;
  	flex-direction: column;
}

}

:root {
	--level-one: translateZ(3rem);
	--level-two: translateZ(6rem);
	--level-three: translateZ(9rem);
	
	--fw-normal: 400;
	--fw-bold: 700;
  
	--clr: #b7c9e5;

}

*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
}

@media only screen and (max-height: 680px) {
.card{
	display: none;
}
	
.enter{
	display: contents;
	font-size: 5vw;
	font-family: 'Roboto', sans-serif;
	border: groove;
	border-width: 1vw;
	padding: 1vw;	
}

.info{
	top: 25vh;
	}

	
	
}