.flex-container {  position: relative;  height: 100vh;  width: 100%;  display: -webkit-flex;    display: flex;  overflow: hidden;}

.flex-title { opacity:0;  border:0px solid #ccc; width:40%; /*background:rgba(0,0,0,0.8);*/ border-radius:5px;     text-transform: uppercase;
  position: relative;    margin: auto;  text-align: center;  top: 65%; transform:translate(0,-50%);
  backdrop-filter: blur(6px);background-color: rgba(0,0,0,0.2);  font-family: 'NanumSquareNeo-Variable';
  -webkit-transition: all 800ms ease;  -moz-transition: all 800ms ease;
  -ms-transition: all 800ms ease;  -o-transition: all 800ms ease;  transition: all 800ms ease;}
.flex-title a {display:block; padding:30px 0;  border:0px solid rgba(255,255,255,0.8); position:relative; font-size: 2.2vw; line-height:3vw; font-weight:500;  color: #fff; transition: all 0.3s;}
.flex-title a:before{content:""; position:absolute; width:70px; height:60px; right:10px; top:50%; transform:translate(0,-50%);
 background:url(../img/arrow_w.svg)no-repeat center; transition: all 0.3s; opacity: 0; }
.flex-title a:hover {color:#fff; position:relative; border-radius:0px; padding-right:50px;
 transition: all 0.3s; border:0px solid #fff; }
.flex-title a:hover:before{right:30px; transition: all 0.3s; opacity:1; }
 
.flex-about {  opacity: 1;  position: absolute;  padding: 0%;  top: 50%; transform:translate(0,-50%);
  margin: auto;  text-align: center; width:100%;
  -webkit-transition: all 800ms ease;  -moz-transition: all 800ms ease;
  -ms-transition: all 800ms ease;  -o-transition: all 800ms ease;  transition: all 800ms ease;}
  
.flex-slide {  -webkit-flex: 1;  -ms-flex: 1;  flex: 1; 
  -webkit-transition: all 800ms ease;  -moz-transition: all 800ms ease;  -ms-transition: all 800ms ease;
  -o-transition: all 800ms ease;  transition: all 800ms ease;}
.flex-slide:hover {  -webkit-flex-grow: 3;  flex-grow: 3;}

.flex-slide { background-size: cover;  background-position: center center;  background-attachment: fixed;}
.home {   background-image: url(../img/slide1.jpg); }
.about {  background-image: url(../img/slide2.jpg);}
.work {   background-image: url(../img/slide3.jpg); }
.contact {  background-image: url(../img/slide4.jpg); }

.flex-slide {position:relative}
.flex-slide::before {content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.7); transition:0.3s all}
.flex-slide:hover::before { background:rgba(0,0,0,0); transition:0.3s all}

@media screen and (max-width: 768px) {
.flex-title {width:80%; }
.flex-about img {max-width:50px;}	
  .flex-container {    /*flex-direction: column; padding:70px 0;*/ }
  .flex-about {    padding: 0%;    border: 0px solid #f1f1f1;  }
  .flex-slide {   /* overflow: auto;    overflow-x: hidden;*/ width:100%;  }
  .flex-slide ul li {    font-size: 2em;  }
  
.flex-title a {  }
.flex-title a {color:#fff; position:relative; border-radius:0px; }
.flex-slide  .active a{font-size: 4.2vw; line-height:3vw;}
.flex-slide  .active2 a{ font-size: 2.2vw; line-height:3vw; }
.flex-title a:hover {padding-right:0px;}
.flex-title a:before{display:none;  }

/*@media screen and (min-width: 768px) {
  .home {    animation: aboutFlexSlide 3s 1;    animation-delay: 0s;  }
  .flex-title-home {    
    animation: aboutFlexSlide 3s 1;    animation-delay: 0s;  }
  .flex-about-home {    animation: aboutFlexSlide 3s 1;    animation-delay: 0s;  }
}*/

@keyframes aboutFlexSlide {
  0% {    -webkit-flex-grow: 1;    flex-grow: 1;  }
  50% {    -webkit-flex-grow: 3;    flex-grow: 3;  }
  100% {    -webkit-flex-grow: 1;    flex-grow: 1;  }
}
@keyframes homeFlextitle {
  0% {    transform: rotate(90deg);    top: 15%;  }
  50% {    transform: rotate(0deg);    top: 15%;  }
  100% {    transform: rotate(90deg);    top: 15%;  }
}
@keyframes flexAboutHome {
  0% {    opacity: 0;  }
  50% {    opacity: 1;  }
  100% {    opacity: 0;  }
}