/* @import './index.css'; */

html,body{
  height:100%;
  padding:0;
  margin:0;
  border:0;

  scroll-behavior: smooth;
  /* overflow-x:hidden; */
  -webkit-overflow-scrolling:touch;
}

*, *:before, *:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
       -o-box-sizing: border-box;
      -ms-box-sizing: border-box;
          box-sizing: border-box;
}

*{
  font-size:18px;
  color:#666;
  /* color:white; */
}


/* header-string */
h1{
  display:inline-block;
  margin:0;
  padding:0;
  border:0;
  height:auto;
  width:auto;
  color:white;
}

h2{
  display:inline-block;
  font-size:28px;
  /* border-bottom:2px solid #ccc; */
  border-bottom:2px solid #08D9D6;
  color:#666;
  margin:40px auto 20px;
  padding:4px 8px;
  font-weight:normal;
}



/* Header */

.content-header{
  /* background-color:#FFFFAF; */
  background-color:#08D9D6;
  width:100%;
  height:60px;
  line-height:60px;
  padding:0;

  display:flex;
  align-content: space-between;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-flex-grow: 1;
  flex-grow: 1;
}
.content-header > *{
  width:50%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}


.content-header .menu-area{
  text-align:right;
}


.content-header a{
  position:relative;
  display:block;
  width:100%;
  height:100%;
  cursor:pointer;
  padding:0 8px;
}
.content-header .menu-area a:hover{
  /* background-color:#EFDFAF; */
}

.content-header .menu-area ul.menu li a{
  font-size:14px;
}

.content-header ul{
  padding:0;
  margin:0;
}
.content-header li{
  list-style:none;
}

.content-header a{
  text-decoration:none;
  /* color:#666; */
  /* color:white; */
}


/* Humbarger-Manu */

.humbarger-menu{
  position:relative;
  display:block;
  width:40px;
  height:40px;
  text-align:center;
  margin:10px 0 10px auto;
  cursor:pointer;
}
.humbarger-menu:hover *{
  /* background-color:#222; */
  background-color:white;
}
.humbarger-menu span{
  position:absolute;
  top : calc(50% - 2px);
  display:block;
  width:80%;
  height:3px;
  /* background-color:#666; */
  background-color:white;
  margin-left:10%;
}
.humbarger-menu .bar1{
  transform-origin:0 2px;
  transform:translateY(-10px);
}
.humbarger-menu .bar2{
  transform:translateY(0px);
}
.humbarger-menu .bar3{
  transform-origin:0 2px;
  transform:translateY(10px);
}

.content-header[data-status="open"] .humbarger-menu .bar1{
  animation: anim-humbarger-menu-open-1 0.1s linear forwards;
}
@keyframes anim-humbarger-menu-open-1{
  0%{
    transform:translateY(-10px) translateX(0px) rotate(0deg);
  }
  100%{
    transform:translateY(-11px) translateX(4px) rotate(45deg);
  }
}

.content-header[data-status="open"] .humbarger-menu .bar3{
  animation: anim-humbarger-menu-open-3 0.1s linear forwards;
}
@keyframes anim-humbarger-menu-open-3{
  0%{
    transform:translateY(10px) translateX(0px) rotate(0deg);
  }
  100%{
    transform:translateY(11px) translateX(4px) rotate(-45deg);
  }
}

.content-header[data-status="open"] .humbarger-menu .bar2{
  animation: anim-humbarger-menu-open-2 0.1s linear forwards;
}
@keyframes anim-humbarger-menu-open-2{
  0%{
    opacity : 1.0;
  }
  100%{
    opacity : 0.0;
  }
}
.content-header[data-status="close"] .humbarger-menu .bar1{
  animation: anim-humbarger-menu-close-1 0.1s linear forwards;
}
@keyframes anim-humbarger-menu-close-1{
  0%{
    transform:translateY(-11px) translateX(4px) rotate(45deg);
  }
  100%{
    transform:translateY(-10px) translateX(0px) rotate(0deg);
  }
}

.content-header[data-status="close"] .humbarger-menu .bar3{
  animation: anim-humbarger-menu-close-3 0.1s linear forwards;
}
@keyframes anim-humbarger-menu-close-3{
  0%{
    transform:translateY(11px) translateX(4px) rotate(-45deg);
  }
  100%{
    transform:translateY(10px) translateX(0px) rotate(0deg);
  }
}

.content-header[data-status="close"] .humbarger-menu .bar2{
  animation: anim-humbarger-menu-close-2 0.1s linear forwards;
}
@keyframes anim-humbarger-menu-close-2{
  0%{
    opacity : 0.0;
  }
  100%{
    opacity : 1.0;
  }
}


@keyframes anim-humbarger-menu-expand{
  0%{
    height : 0;
  }
  100%{
    height : 40px;
  }
}
@keyframes anim-humbarger-menu-reduction{
  0%{
    height : 40px;
  }
  100%{
    height : 0;
  }
}



/* Footer */
.content-footer{
  margin-top:80px;
  background-color:white;
  border-top:1px solid #ccc;
}
.content-footer ul,
.content-footer li{
  margin:0;
  padding:0;
  list-style:none;
}
.content-footer .footer-links{
  display:flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
}
.content-footer .footer-links li{
  /* width:100px; */
}
.content-footer .footer-links li a{
  line-height:40px;
  font-size:14px;
  margin:10px 20px;
}

.content-footer .c-arr{
  text-align:center;
  line-height:40px;
  font-size:14px;
}




@media screen and (max-width: 500px){
  /* .content-header .menu-area{
    display:block;
  } */
  .content-header a{
    
    color:#666;
  }
  .content-header .menu-link{
    display:block;
  }

  .content-header .menu-area{
    width:100%;
    background-color:white;
    z-index:100;
    box-shadow:2px 8px 8px rgba(0,0,0,0.2);
  }
  .content-header .menu-area ul.menu{
    display:block;
    
  }
  .content-header .menu-area ul.menu li{
    text-align:center;
    overflow:hidden;
    height:0;
    line-height:40px;
  }
  .content-header[data-status="open"] .menu-area ul.menu li{
    animation: anim-humbarger-menu-expand 0.1s linear forwards;
  }
  .content-header[data-status="close"] .menu-area ul.menu li{
    animation: anim-humbarger-menu-reduction 0.1s linear forwards;
  }

  
  /* .content-header > *:nth-of-type(1) {
    width:30%;
  }
  .content-header > *:nth-of-type(2) {
    width:70%;
    margin-left: auto;
  }
  
  .content-header > *:nth-of-type(3) {
    width:100%;
    margin-left: auto;
    background-color:#FFFFAF;
  } */

}
@media screen and (min-width: 501px){
  /* .content-header .menu-area{
    display:block;
  } */
  .content-header a{
    color:white;
  }
  .content-header .menu-link{
    display:none;
  }

  .content-header .menu-area ul.menu{
    display:flex;
    justify-content: flex-end;
  }

  .content-header .menu-area a:hover:after{
    position:absolute;
    content:"";
    display:block;
    margin:0;
    padding:0;
    border:0;
    width:calc(100% - 16px);
    height:4px;
    left:8px;
    bottom:8px;
    /* background-color:#CCC; */
    background-color:#F5D769;
    border-radius:2px;
  }
  
  .content-header .menu-area ul.menu li[data-current="1"] a:after{
    position:absolute;
    content:"";
    display:block;
    margin:0;
    padding:0;
    border:0;
    width:calc(100% - 16px);
    height:4px;
    left:8px;
    bottom:8px;
    /* background-color:#88E; */
    background-color:#FFFFFF;
    border-radius:2px;
  }
  

  /* .content-header > *:nth-of-type(1) {
    width:30%;
  }
  .content-header > *:nth-of-type(2) {
    width:70%;
    margin-left: auto;
  }
  
  .content-header > *:nth-of-type(3) {
    width:70%;
    margin-left: auto;
  } */
}

.content-footer{
  padding:20px 0;
}