@charset "UTF-8";
/* CSS Document */

body, html {padding-bottom:50px; background-color:#83d9ed; background-image:url(../images/index/index_bg.png); background-position:bottom center; background-repeat:no-repeat; background-size:cover}

section {width:95vw; max-width:400px; margin:auto; display:block; display:flex; flex-wrap:wrap; align-content:flex-start; justify-content:center; position:relative;}

.logo {display:block; width:40%; max-width:160px; margin:5vh auto 5px auto; position:relative; z-index:5;}
.slogan {width:90%; margin:5px auto; position:relative; z-index:3;}
.sub {width:70%; background:#83d9ed; border:2px dashed white; border-radius:50px; padding:3px 0px; box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.1); position:relative; z-index:3;}
.sub img {display:block; width:90%; margin:auto;}

.icefood {width:90%; position:relative; z-index:1; margin-top:-170px;}
.icefood img {width:100%;}
.icefood img.ani1 {position:absolute; top:0; left:0;}
.icefood img.ani2 {position:absolute; top:0; left:0;}
.icefood img.ani3 {position:absolute; top:0; left:0;}
.icefood img.ani4 {position:absolute; top:0; left:0; opacity:0;}
.icefood img.ani5 {position:absolute; top:0; left:0; opacity:0;}
.icefood img.ani6 {position:absolute; top:0; left:0; opacity:0;}

.btn {display:block; width:40vw; max-width:180px; margin:30px auto; background:#3559df; position:relative; padding:10px; border-radius:50px;}
.btn img {width:100%;}

.intro {width:100%; height:auto;}

.qrcode {position:relative;}
.qrcode img {display:block; margin:auto; border-radius: 15px;}
.qrcode p {display:table; margin:10px auto; font-size:24px; color:white; background:#3559df; padding:8px 20px; border-radius:50px;}



@media screen and (max-width: 768px) {
    section {width:95vw; max-width:400px; margin:auto; display:block; display:flex; flex-wrap:wrap; align-content:center; justify-content:center; position:relative;}

    .logo {display:block; width:40%; max-width:160px; position:relative; z-index:5;}
    .slogan {width:85%; margin:5px auto; position:relative; z-index:3;}
    .sub {width:70%; background:#83d9ed; border:2px dashed white; border-radius:50px; padding:3px 0px; box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.1); position:relative; z-index:3;}
    .sub img {display:block; width:90%; margin:auto;}

    .icefood {width:100%; position:relative; z-index:1; margin-top:-175px;}
    .icefood img {width:100%;}
    .icefood img.ani1 {position:absolute; top:0; left:0;}
    .icefood img.ani2 {position:absolute; top:0; left:0;}
    .icefood img.ani3 {position:absolute; top:0; left:0;}
    .icefood img.ani4 {position:absolute; top:0; left:0; opacity:0;}
    .icefood img.ani5 {position:absolute; top:0; left:0; opacity:0;}
    .icefood img.ani6 {position:absolute; top:0; left:0; opacity:0;}

    .btn {display:block; width:40vw; max-width:180px; margin:10px auto; background:#3559df; position:relative; padding:10px; border-radius:50px;}
    .btn img {width:100%;}

    .intro {width:100%; height:auto;}
}