@charset "UTF-8";

/* CSS Document */



html, body, div, p, ul, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, form, input, select, button, textarea, iframe, table, th, td, ol {

    margin: 0;

    padding: 0;

    outline: none;

}

	.mobile-inner-header {

    background-color: rgba(255,255,255,255.7);

    width: 100%;

    height: 50px;

    position: fixed;

    top: 0px;

    left: 0px;

    z-index: 999;

}



		.clearfix {

    zoom: 1;

}

.clearfix:after {

    visibility: hidden;

    display: block;

    content: " ";

    clear: both;

    height: 0;

    line-height: 0;

}

#wrap {

    text-align: left;

}

.fl {

    float: left;

    display: inline;

}

.mobile-inner-header-icon:hover {

    background-color: rgba(255,255,255,0.2);

    cursor: pointer;

}

.mobile-inner-header-icon {

    color: #666666;

    height: 50px;

    font-size: 25px;

    text-align: center;

    float: right;

    width: 50px;

    position: relative;

    -webkit-transition: background 0.5s;

    -moz-transition: background 0.5s;

    -o-transition: background 0.5s;

    transition: background 0.5s;

}

.mobile-inner-header-icon-out span:nth-child(1) {

    animation-duration: 0.5s;

    animation-fill-mode: both;

    animation-name: outfirst;

}



.mobile-inner-header-icon span:nth-child(1) {

    transform: translateY(4px) rotate(0deg);

}

.mobile-inner-header-icon span {

    position: absolute;

    left: calc((100% - 25px) / 2);

    top: calc((100% - 1px) / 2);

    width: 25px;

    height: 1px;

    background-color: rgba(0,0,0,0.7);

}

.mobile-inner-header-icon:hover {

    cursor: pointer;

}

.mobile-inner-header-icon {

    color: #666666;

    font-size: 25px;

    text-align: center;

}

.mobile-inner-header-icon-out span:nth-child(2) {

    animation-duration: 0.5s;

    animation-fill-mode: both;

    animation-name: outsecond;

}



.mobile-inner-header-icon span:nth-child(2) {

    transform: translateY(-4px) rotate(0deg);

}

.mobile-inner-nav {

    background-color: rgb(0, 0, 0,.85);

    width: 100%;

    position: fixed;

    top: 70px;

    left: 0px;

    display: none;

    z-index: 9999;

    height: calc(100% - 70px);

    padding-top: 0%;

    overflow-y: auto;

}

.mobile-inner-nav a {

    display: inline-block;

    line-height: 50px;

    text-decoration: none;

    width: 90%;

    margin-left: 5%;

    color: rgb(255, 255, 255);


    -webkit-transition: all 0.5s;

    -moz-transition: all 0.5s;

    -o-transition: all 0.5s;

    transition: all 0.5s;

    font-weight: 300;

}

.mobile-inner-nav a {

    position: relative;

    overflow: hidden;

}

#wrap {

    text-align: left;

}

@keyframes returnToNormal {

  0% {

	opacity: 0;

	-webkit-transform: translate3d(0, -100%, 0);

			transform: translate3d(0, -100%, 0);

  }



  100% {

	opacity: 1;

	-webkit-transform: none;

			transform: none;

  }

}

.mobile-inner-header-icon-click span:nth-child(1) {

    animation-duration: 0.5s;

    animation-fill-mode: both;

    animation-name: clickfirst;

}



.mobile-inner-header-icon span {

    position: absolute;

    left: calc((100% - 25px) / 2);

    top: calc((100% - 1px) / 2);

    width: 25px;

    height: 1px;

    background-color: rgba(0,0,0,0.7);

}

.mobile-inner-header-icon-click span:nth-child(2) {

    animation-duration: 0.5s;

    animation-fill-mode: both;

    animation-name: clicksecond;

}

@keyframes clicksecond {

  0% {

	  transform: translateY(-4px) rotate(0deg);

  }



  100% {

    transform: translateY(0) rotate(-45deg);

  }

}



@keyframes clickfirst {

  0% {

	  transform: translateY(4px) rotate(0deg);

	  

  }



  100% {

    transform: translateY(0) rotate(45deg);

  }

}



.mobile-inner-nav a {

    -webkit-animation-duration: 0.5s;

    animation-duration: 0.5s;

    -webkit-animation-fill-mode: both;

    animation-fill-mode: both;

    -webkit-animation-name: returnToNormal;

    animation-name: returnToNormal;

}



@keyframes outfirst {

  0% {

    transform: translateY(0) rotate(-45deg);

  }



  100% {

    transform: translateY(-4px) rotate(0deg);

  }

}	







@keyframes outsecond {

  0% {

    transform: translateY(0) rotate(45deg);

  }



  100% {

    transform: translateY(4px) rotate(0deg);

  }

}

.mobile-inner-header-icon{

  display: none;

}

@media (min-width:320px) and (max-width:1100px) {

  .mobile-inner-header-icon{

    display: block;

  }

}