@charset "utf-8";

/*

  name:basic.css
  author:M.X
  company:Infinity arts Ad agency CO.,Ltd
  date:201701

*/

/* reset */
html,body,div,ul,li,form,fieldset,legend,input,button,textarea,menu,p,a,audio,section{margin:0;padding:0;outline:0;}
header,footer,section{display:block;}
html,body,img{border:0;}
html{-webkit-tap-highlight-color:transparent;}
li{list-style:none;}
img{display:block;width: 100%;border:0 none;height: auto;margin: 0 auto;}
textarea{overflow:auto;resize:none;}
input,label,select{display:inline-block;font-family:arial;vertical-align:top;font-family:\5FAE\8F6F\96C5\9ED1;}
a{cursor:pointer;display:block;text-decoration:none;color:#4c4c4c;}
a:hover{text-decoration:none;}
/*.f-tovh,.title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;}
*/
.f-th{height:0;width:0;overflow: hidden;visibility: hidden;}
.f-posa{position: absolute;z-index: 10;}
.u-blur{ -webkit-backface-visibility: hidden; -webkit-filter: blur(60px); filter: blur(60px);}
/*fonction end*/
/*public*/

body,html{width: 100%;min-width:320px;max-width:640px;margin:0 auto;height: 100%;background: #7CB2AA;overflow: hidden;}
#bgMusic{position: absolute;left: 0;top: 0;z-index: -1;width: 0;height: 0;visibility: hidden;overflow: hidden;}
#music{position: absolute;top:6.5%;left:2%;z-index: 90;width:6%;}
.musicOn{opacity: 1;-webkit-opacity: 1;}
.musicOff{position: absolute; top: 0; left: 0; z-index: 10; opacity: 0;-webkit-opacity: 0;}
.musicOn img,.musicOff img{width: 100%;height: 100%;}
.off .musicOff{opacity: 1;-webkit-opacity: 1;}
.off .musicOn{opacity: 0;-webkit-opacity: 0;}
#animation_container {
	position:absolute;
	margin:auto;
	left:-100%;right:-100%;
	top:-100%;bottom:-100%;
}
.layer-ctn{display: none;position: absolute;left: 0;top: 0;z-index: 100;width: 100%;height:100%;}
.layer-ctn .ctn{position: absolute;left:6%;top:3%;z-index:3;width: 88%;height: 88%;}
.layer-ctn .bg{position: absolute;left: 0;top: 0;z-index: 1;width: 100%;height: 100%;background:rgba(0,0,0,0.3);}
.layer-sent  .ctn .hand{position: absolute;right: 15%;bottom:10%;z-index:10;width:10%;height:auto;}

.bg{width:100%;height: 100%;}
.bg>img{width:100%;height:100%;}

.page{display: none;position: absolute;left: 0;top: 0;z-index: 10;width: 100%;height: 100%;}
.page .bg{position: absolute;left: 0;top: 0;z-index:-1;width: 100%;height: 100%;}
.page1{display: block;}
.logo{width:14.6875%;margin: 0 auto;padding: 21% 0 9%;}
.title{width:58.4375%;margin: 0 auto;}
.postType li{cursor: pointer;width: 25.625%;margin:10% auto -3%;}
.postType li img{width: 100%;height: auto;}
.postImg{width:70%;margin: 0 auto;padding:5% 0 2%;}
.page2_btn{cursor: pointer;position: absolute;bottom:2%;left:0;z-index:50;width:100%;text-align: center;}
.page2_btn img{cursor: pointer;display: inline-block;width: 38.4375%;margin: 0 2%;}
.btn_share{cursor: pointer;position: absolute;right: 2%;top: 0;z-index:0;width: 10%;}
.addressList li{cursor: pointer;width:28.6%;margin:10% auto -4%;}
.goback{cursor: pointer;position: absolute;left:38%;bottom: 14%;z-index: 10;width: 24%;margin: 0;}
.goback1{cursor: pointer;position: absolute;left:38%;bottom: 2%;z-index: 10;width: 24%;margin: 0;}
.addressImg{position: relative;top: 8.3%;left:14.2%;z-index: 10;width:71.6%;margin: 0;}
.cityImg{width: 100%;height: auto;}
.cityText{position: absolute;margin: 0;left: 0;top: 0;z-index: 10;width: 90%;padding:1.5em 5%;color: #333;font: 16px/1.5 normal;height: auto;border-bottom: 2px solid rgba(0,0,0,0.2);background:rgba(255,255,255,0.8);}
/*animate*/
/*.wow{visibility: hidden;}*/
.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-perspective: 1200px;
    perspective: 1200px;
}

.animated.hinge {
    -webkit-animation-duration: 2s;
    animation-duration: 2s
}

@-webkit-keyframes fadeInDown {
    0% {
        -webkit-transform: translate3d(0,-100px, 0);
        transform: translate3d(0,-100px, 0)
    }
    100%{
        
        -webkit-transform: none;
        transform: none
    }
}
@keyframes fadeInDown {
    0% {
        -webkit-transform: translate3d(0,-100px, 0);
        transform: translate3d(0,-100px, 0)
    }
    100%{
        
        -webkit-transform: none;
        transform: none
    }
}
.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown
}

@-webkit-keyframes fadeInUp {
    0% {
        -webkit-transform: translate3d(0,100px, 0);
        transform: translate3d(0,100px, 0)
    }
    100%{
        
        -webkit-transform: none;
        transform: none
    }
}
@keyframes fadeInUp {
    0% {
        -webkit-transform: translate3d(0,100px, 0);
        transform: translate3d(0,100px, 0)
    }
    100%{
        
        -webkit-transform: none;
        transform: none
    }
}
.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp
}

@-webkit-keyframes fadeIn {
    0% {
        -webkit-opacity: 0;
        opacity: 0;
    }
    100% {
      -webkit-opacity: 1;
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
        -webkit-opacity: 0;
        opacity: 0;
    }
    100% {
      -webkit-opacity: 1;
        opacity: 1;
    }
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn
}

@-webkit-keyframes fadeIn2 {
    0% {
       -webkit-opacity: 0.4;
        opacity: 0.4;
    }
    100% {
      -webkit-opacity: 1;
        opacity: 1;
    }
}

@keyframes fadeIn2 {
    0% {
        -webkit-opacity: 0.4;
        opacity: 0.4;
    }
    100% {
      -webkit-opacity: 1;
        opacity: 1;
    }
}


@-webkit-keyframes mtBtn {
    0% {
        -webkit-transform:translateY(0);
        transform:translateY(0);
    }
    100% {
      -webkit-transform:translateY(5px);
        transform:translateY(5px);
    }
}

@keyframes mtBtn {
    0% {
        -webkit-transform:translateY(0);
        transform:translateY(0);
    }
    100% {
      -webkit-transform:translateY(5px);
        transform:translateY(5px);
    }
}


.fadeIn2 {
    -webkit-animation-name: fadeIn2;
    animation-name: fadeIn2
}

.amtOpacity{
    -webkit-animation:fadeIn 0.5s infinite linear alternate;
    animation:fadeIn 0.5s infinite linear alternate
}

.amtOpacity2{
    -webkit-animation:fadeIn2 0.5s infinite linear alternate;
    animation:fadeIn2 0.5s infinite linear alternate
}

.amtBtn{
    -webkit-animation:mtBtn 0.5s infinite alternate;
    animation:mtBtn 0.5s infinite alternate
}

/*animate end*/