body {
  background-image: url("bg2.jpg");
  background-color: #000;
  background-position: top, center;
  background-repeat: no-repeat;
  background-size: cover;
}
body:after{
      content:"";
      position:fixed; /* stretch a fixed position to the whole screen */
      top:0;
      height:100vh; /* fix for mobile browser address bar appearing disappearing */
      left:0;
      right:0;
      z-index:-1; /* needed to keep in the background */
      background: url("bg2.jpg") center center;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
}
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@500&display=swap');
/* ~~~~~~~ INIT. BTN ~~~~~~~ */

.btn {		
	position: relative;	
	padding: 15px;
	font-size: 1.8rem;
	color: var(--inv);
	letter-spacing: 0.5rem;
	text-transform: uppercase;
	transition: all 500ms cubic-bezier(0.77, 0, 0.175, 1);	
	cursor: pointer;
	user-select: none;
	width:100%!important;
	height:100%!important;
	text-align:center!important;
	vertical-align:middle!important;
	display: inline-block;
	padding-top: 14%;
}

.btn:before, .btn:after {
	content: '';
	position: absolute;	
	transition: inherit;
	z-index: -1;	
}

.btn:hover {
	color: var(--def);
	transition-delay: .5s;
}

.btn:hover:before {
	transition-delay: 0s;
}

.btn:hover:after {
	background: var(--inv);
	transition-delay: .35s;
}

/* From Top */

.from-top:before, 
.from-top:after {
	left: 0;
	height: 0;
	width: 100%;
}

.from-top:before {
	bottom: 0;	
	border: 1px solid var(--inv);
	border-top: 0;
	border-bottom: 0;
}

.from-top:after {
	top: 0;
	height: 0;
}

.from-top:hover:before,
.from-top:hover:after {
	height: 100%;
}

/* From Left */

.from-left:before, 
.from-left:after {
	top: 0;
	width: 0;
	height: 100%;
}

.from-left:before {
	right: 0;
	border: 1px solid var(--inv);
	border-left: 0;
	border-right: 0;	
}

.from-left:after {
	left: 0;
}

.from-left:hover:before,
.from-left:hover:after {
	width: 100%;
}

/* From Right */

.from-right:before, 
.from-right:after {
	top: 0;
	width: 0;
	height: 100%;
}

.from-right:before {
	left: 0;
	border: 1px solid var(--inv);
	border-left: 0;
	border-right: 0;	
}

.from-right:after {
	right: 0;
}

.from-right:hover:before,
.from-right:hover:after {
	width: 100%;
}

/* From center */

.from-center:before {
	top: 0;
	left: 50%;
	height: 100%;
	width: 0;
	border: 1px solid var(--inv);
	border-left: 0;
	border-right: 0;
}

.from-center:after {
	bottom: 0;
	left: 0;
	height: 0;
	width: 100%;
	background: var(--inv);
}

.from-center:hover:before {
	left: 0;
	width: 100%;
}

.from-center:hover:after {
	top: 0;
	height: 100%;
}

/* From Bottom */

.from-bottom:before, 
.from-bottom:after {
	left: 0;
	height: 0;
	width: 100%;
}

.from-bottom:before {
	top: 0;	
	border: 1px solid var(--inv);
	border-top: 0;
	border-bottom: 0;
}

.from-bottom:after {
	bottom: 0;
	height: 0;
}

.from-bottom:hover:before,
.from-bottom:hover:after {
	height: 100%;
}


/* ~~~~~~~~~~~~ GLOBAL SETTINGS ~~~~~~~~~~~~ */
.mainImage img{
	min-width:450px;
	max-width:650px!important;
}
.btnOuter
{
  width: 30%;
  max-width: 400px;
  margin: 10px 10px;
  display: inline-block;
  height: 200px;
  vertical-align: middle!important;
  padding: 20px;
  	text-align:center!important;
	vertical-align:middle!important;
/*	width:450px;
	text-align:center;
	max-width:800px;
	width:80%;
	margin:0 auto;*/
-webkit-box-shadow: 0px 0px 37px -14px rgba(0,0,0,1);
-moz-box-shadow: 0px 0px 37px -14px rgba(0,0,0,1);
box-shadow: 0px 0px 37px -14px rgba(0,0,0,1);
}
.mocs{
background: rgb(91,223,0,0.8);
background: linear-gradient(148deg, rgba(91,223,0,0.8) 0%, rgba(230,29,29,0.8) 64%);
}
.rebr{
background: rgb(223,209,0,0.8);
background: linear-gradient(148deg, rgba(223,209,0,0.8) 0%, rgba(72,163,19,0.8) 100%);	
}
.flik{
background: rgb(25,29,245,0.8);
background: linear-gradient(148deg, rgba(25,29,245,0.8) 0%, rgba(163,19,152,0.8) 100%);	
}
.face{
background: rgb(25,103,245,0.8);
background: linear-gradient(148deg, rgba(25,103,245,0.8) 0%, rgba(28,19,163,0.8) 100%);	
}
.yutu{
background: rgb(245,25,25,0.8);
background: linear-gradient(148deg, rgba(245,25,25,0.8) 0%, rgba(163,19,19,0.8) 100%);	
}
.insta{
background: rgb(0,147,223,0.8);
background: linear-gradient(148deg, rgba(0,147,223,0.8) 0%, rgba(230,29,131,0.8) 100%);

}
a{
  display: block;
  color: white;
  text-decoration: none;
  position: relative;
}
*, *:before, *:after {
	box-sizing: border-box;
}

body {
	--def: #96B7C4; 	
	--inv: #fff;
	justify-content: center;
	align-items: center;
	text-align:center;
}
.holder{
	justify-content: center;
	align-items: center;
	text-align:center;
	width: 100%;
}

html {
	font-size: 14px;
	font-weight:bold;
	font-family: 'Noto Sans KR', sans-serif;
}
@media only screen and (max-width: 1200px) {
html {
	font-size: 18px;

}
.btnOuter
{
  width: 50%;
  max-width: 400px;
  margin: 10px 10px;
  display: inline-block;
  height: 200px;
  padding: 10px;

}
}
@media only screen and (max-width: 800px) {
.btnOuter
{
  width: 100%;
  max-width: 500px;
  margin: 10px 10px;
  display: inline-block;
  height: 200px;
  padding: 10px;

}
body{
	
	background-attachment:scroll
}
}
div {margin-bottom: 2rem;}
div:last-child {margin-bottom: 0;}