:root {
  --main-bg-color: #4b48eac0;
  /* --main-layer-color: #4b48ea80; */
  --main-layer-color: #00000000;
  --main-layer-hover-color: #1d2483;
  --main-layer-hover-bg-color: #fff;

  --sub-main-bg-color: #EBCE49c0;
  /* --sub-main-layer-color: #EBCE49a0; */
  --sub-main-layer-color: #00000000;
  --sub-main-layer-hover-color: #EBCE49;
  --sub-main-layer-hover-bg-color: #fff;  
  /* --main-layer-hover-color: #EBCE49; */

  --filter-menu-text: drop-shadow(1px 1px 2px black);
}
@font-face{
  font-family: square;
  src: url("font/NanumSquareR.woff");
}
html, body {
  height: 100%;
}
body {
  font-family: 'square';
  word-break: keep-all;
}
a:hover, a:active {
  text-decoration: none;
  color: #fff;
}

.landing-body {
  /* background: url('/main/img/background_img2.jpg');
  background-attachment: fixed;
  background-position: 50% 0%; */
  /* background-size: 170%; */
}

.title-box {
  width: 200px;
  height: 50px;
  font-size: 20px;
}

.text-main {
  color: #0537fe;
}

.btn-main {
  color: #fff;
  background-color: var(--main-bg-color);
  border-color: var(--main-bg-color); /*set the color you want here*/
}
.btn-main:hover, .btn-main:focus, .btn-main:active, .btn-main.active, .open>.dropdown-toggle.btn-main {
  color: #fff;
  background-color: var(--main-bg-color);
  border-color: var(--main-bg-color); /*set the color you want here*/
}
.btn-sub-main {
  color: #fff;
  background-color: var(--sub-main-bg-color);
  border-color: var(--sub-main-bg-color); /*set the color you want here*/
}
.btn-sub-main:hover, .btn-sub-main:focus, .btn-sub-main:active, .btn-sub-main.active, .open>.dropdown-toggle.btn-sub-main {
  color: #fff;
  background-color: var(--sub-main-bg-color);
  border-color: var(--sub-main-bg-color); /*set the color you want here*/
}

.border{
  border-width: 2px;
}

.menu-layer {
  width: 100%;
  height: 550px;
  /* transition: color 0.5s ease;
  transition: background-color 0.5s ease; */
  transition: color 0.5 ease;
  background-color: var(--main-layer-color);
  color: white;
  margin-right: 1px;
  margin-left: 1px;
}

.menu-layer:hover {
  /* background-color: var(--main-layer-hover-bg-color); */
  /* color: var(--main-layer-hover-color) !important; */
}

.menu-msg {
  position: relative;
  top: 33%;
  z-index: 10;
  filter: var(--filter-menu-text);
}

.sub-menu-layer {
  width: 100%;
  height: 100px;
  transition: color 0.5s ease;
  transition: background-color 0.5s ease;
  background-color: var(--sub-main-layer-color);
  color: white;
  margin-right: 1px;
  margin-left: 1px;
}
.sub-menu-layer:hover {
  /* color: var(--sub-main-layer-hover-color) !important; */
}
.sub-menu-msg {
  position: relative;
  top: 0%;
  filter: var(--filter-menu-text);
}

.bg-video {
	position : fixed;
	top: 0; 
	left: 0;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	z-index: -1;
}

.content-bg {
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease;
  background-position: center;
}

.content-bg-mask {
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  z-index: 1000;
}

/* size lg */
@media screen and (max-width: 1200px) {
  .menu-layer {
    height: 300px;
  }
  .menu-msg {
    top: 17%;
  }
}

/* size sm */
@media screen and (max-width: 720px) {
  .bg-video {
    top: 0; 
    left: -134%;
    min-width: 100%;
    min-height: 100%;
  }  
}