@font-face { font-family: 'GyeonggiBatang'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/GyeonggiBatang.woff') format('woff'); font-weight: normal;
    font-style: normal; }
*{ font-family: "GyeonggiBatang";}
a, p, h3, li{ color: white;
   font-family: "GyeonggiBatang";
}
section {
   width: 100%;
   height: 100vh;
   overflow: hidden;
}
section div { 
   display: flex;
   flex-grow: 1; 
   width: 600%;
   height: 100%;
}
.bac_img .slide p {
   width: calc(100% / 6);
   overflow: hidden;
   height: 100%;
   position: relative;
}
.bac_img .slide p img{
   position: absolute;
   display: block;
   min-width: 100%;
   min-height: 100%;
   top:50%; left: 50%; transform: translate(-50%,-50%);
}

@media (max-width: 600px){
   section {
      height: 600px;
   }

   .bac_img .slide p img{
      width: 200%;
   }

}






header {
   position: fixed;
   top: 0;
   background-color: rgba(0,0,0,0.7);
   height: 100%;
   width: 140px;
   min-width: 110px;
}


header h1 {
   height: 80px;
   width: 80%;
   margin: 50% auto;
   background-image: url(./img/logo.png);
   background-repeat: no-repeat;
   background-size: contain;
   text-indent: -999px;
   
}
header .menu {
   margin-top: 120%;
   text-align: center;
   line-height: 60px;
   font-size: 1.1em;
   
}
header .menu>li {
   position: relative;
}
header .menu>li:hover::before  {
   position: absolute;
   content: "";
   left: 0; top: 50%;
   transform: translateY(-50%); 
   border-top: 7px solid transparent;
   border-left: 11px solid #c0fd56;
   border-bottom: 7px solid transparent;
}
.menu li .sub {
   background-color: rgba(255,255,255,0.6);
   position: fixed;
   top: 0; left: 140px; 
   height: 100%;
   width: 120px;
   display: none;
   transition: 1;
}

.menu>li .sub ul {
   position: absolute;
   width: 100%;
}
.menu>li .sub .sub_menu1 {
   top: 320px;
}
.menu>li .sub .sub_menu2 {
   top: 380px;
}
.menu>li .sub .sub_menu3 {
   top: 320px;
}
.menu>li .sub .sub_menu4 {
   top: 380px;
}
.menu>li .sub .sub_menu5 {
   top: 440px;
}


.menu>li:hover .sub {
   display: block;
   opacity: 1;
   font-size: 0.85em;
}

.sub ul li { position: relative; }
.sub ul li:hover::before {
   position: absolute;
   content: "";
   left: 0; top: 50%;
   transform: translateY(-50%); 
   border-top: 4px solid transparent;
   border-left: 6px solid black;
   border-bottom: 4px solid transparent;
}
.sub ul li a { transition: 0.5s; color: black;}
.sub ul li:hover a { color: black; font-weight: bold;}


header .sns_icon{
   text-align: center;
   margin: 130% auto 0;
   display: flex;
   flex-grow: 1;
   width: 50%;
}

header .sns_icon a img{
   display: block;;
   width: 20px;
   height: 20px;
}
header .sns_icon a{ opacity: 0.5;}
header .sns_icon a img:nth-child(2){ display: none;}
header .sns_icon a:nth-child(2) { padding: 0 5px;}
header .sns_icon a:hover{ opacity: 1;}
header .sns_icon a:hover img:nth-child(1){ display: none;}
header .sns_icon a:hover img:nth-child(2){ display: block;}



@media (max-width: 600px){
   header {
      background-color: rgba(0,0,0,0.8);
      height: 55px;
      width: 100%;
   }
   header h1 {
      top: 0;
      height: 40px;
      width: 20%;
      margin: 8px auto;      
   }

   .menu { display: none;}
   .sns_icon { display: none !important;}
}



.text { 
   position: fixed;
   top: 10%; left: 24%;
   margin-left: 50px;
   color: white;
}
.text h2 {
   width: 85%;
   min-width: 300px;
}
.text h2 img { width: 100%;}
.text p {
   margin-top: 20px; 
   font-size: 1.1em ;
}


@media (max-width: 600px){
   .text {
      width: 90%;
      text-align: center; 
      position: fixed;
      top: 90px; left: 50%;
      transform: translateX(-50%);
      margin-left: 0px;
   }
   .text h2 { display: none;}
   .text p {
      margin-top: 10px; 
      font-size: 3.5vw ;
   }
}


.con_box {
   position: fixed;
   bottom: 5%; left: 23%;
   margin-left: 60px;
   display: flex;
   
   justify-content: space-between;
   width: 55%;
   min-width: 600px;
   height: 130px;
}
.con_box  div { 
   width: 100%;
   font-size: 0.85em;
   padding: 15px 30px;
   background-color: rgba(0,0,0,0.8);
   overflow: hidden;
   
}
.con_box  div h3 { 
   padding-bottom: 10px;
   font-size: 1.25em;
   text-shadow: 0.5px 0px 0 white;
}

.con_box .box2 { margin: 0 20px;}


.con_box div {
position: relative;
}
.con_box div p{ 
   position: absolute;
   right: -100px;
   bottom: 20px;
   height: 70px;
   opacity: 0;   
   transition: all 0.7s;
}
.con_box div p img { height: 100%;}
.con_box div:hover p { right: 10%; opacity: 0.8;}


@media (max-width: 600px){
   .con_box {
      position: absolute;
      margin-top: 100px;
      top: 450px;
      left: 0%;
      margin-left: 0;
      display: block;
      width: 100%;
      min-width: 0px;
   }
   .con_box .box1 { background-color: black;}
   .con_box .box2 {margin: 0; background-color: #333;}
   .con_box .box3{ display: none;}
   .con_box div p{
      position: absolute;
      right: 10%;
      bottom: 20px;
      height: 70px;
      opacity: 0.4;   
      transition: all 0.7s;
   }
   .con_box  div { 
      font-size: 0.9em;
      padding: 10px 50px;
      overflow: hidden;
   }
      
}






.leaf_g {
   position: fixed;
   right: -4px;
   top: 8%;
}



.leaf_g div { 
   position: relative;
}
.leaf_g div p {
   display: block;
   height: 80px;
   width: 190px;
}
.leaf_g div p a {
   position: absolute;
   margin-top: 35px;
   font-size: 18px;
}

.leaf_g div .leaf_1 a { left: 60px;}
.leaf_g div .leaf_2 a { margin-top: 40px; left: 70px; }
.leaf_g div .leaf_3 a { left: 50px;}

.leaf_g div .leaf_1::after {
   position: absolute;
   content: "";
   right: 0;
   width: 100%;
   height: 90px;
   background-size: contain;
   background-repeat: no-repeat;
   background-image: url(./img/leaf1.png);
   opacity: 0.7;
   z-index: -1;
   transition: 0.5s;
   transform-origin: 100% 50%;
   animation-name: move1;
   animation-duration: 20s;
   animation-iteration-count: infinite;
   animation-timing-function: ease;

}




.leaf_g div .leaf_2::after {
   position: absolute;
   content: "";
   right: 0;
   width: 90%;
   height: 110px;
   background-size: contain;
   background-repeat: no-repeat;
   background-image: url(./img/leaf2.png);
   opacity: 0.7;
   z-index: -1;
   transition: 0.5s;
   transform-origin: 100% 50%;
   animation-delay: -3s;
   animation-name: move1;
   animation-duration: 13s;
   animation-delay: 2s;
   animation-iteration-count: infinite;
   animation-timing-function: ease;
}
.leaf_g div .leaf_3::after {
   position: absolute;
   content: "";
   right: 0;
   width: 100%;
   height: 110px;
   background-size: contain;
   background-repeat: no-repeat;
   background-image: url(./img/leaf3.png);
   opacity: 0.7;
   z-index: -1;
   transition: 0.5s;
   transform-origin: 100% 80%;
   animation-delay: 3s;
   animation-name: move1;
   animation-duration: 18s;
   animation-iteration-count: infinite;
   animation-timing-function: ease;
   overflow: hidden;
}


@keyframes move1 {
   0% { transform: rotate(0deg);}
   25% { transform:rotate(-4deg);}
   50% { transform: rotate(4deg);}
   75% { transform: rotate(-4deg);}
   100%  {transform: rotate(0deg);}
}


.leaf_g div .leaf_3 {
   margin-top: 10px;
}
.leaf_g div p:hover a { text-shadow: 1px 1px 3px #4e7707;}
.leaf_g div p:hover::after{ opacity: 1;}

@media (max-width: 600px){
   .leaf_g {
      position: absolute;
      right: 50%;
      transform: translateX(50%);
      top: 200px;   
      width: 60%;
   }
   .leaf_g div p {
      border-radius: 20px;
      background-color: rgba(43, 43, 43, 0.6);
      width: 100%;
      height: 50px;
   }
   .leaf_g div p:hover {
      background-color: rgba(192, 253, 86, 0.7);
   }
  
   .leaf_g div p a {
      margin-top: 10px;
      font-size: 1.1em;
   }
  
   .leaf_g div .leaf_1 a { left: 50%; transform: translateX(-50%);}
   .leaf_g div .leaf_2 a { margin-top: 10px; left: 50%; transform: translateX(-50%);}
   .leaf_g div .leaf_3 a { left: 50%; transform: translateX(-50%);}

   .leaf_g div .leaf_1::after { background-image: none;}
   .leaf_g div .leaf_2::after {background-image: none;}
   .leaf_g div .leaf_3::after { background-image: none;}
   .leaf_g div .leaf_3 { margin-top: 0px;}
   .leaf_g div .leaf_2 { margin: 30px 0;}
}