* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box
}

html,
body { 
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    height: 100%; line-height: 1.5;
}
* {
  -webkit-touch-callout: none;
  -webkit-text-size-adjust: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-user-select: none;
}
a { text-decoration: none }
a, button, img{-webkit-tap-highlight-color:rgba(0, 0, 0, 0.2)!important}
canvas { width: 100%;}
.img-responsive { max-width: 100%; width: auto; display: block; }
.img-full { width: 100%; }
.wrapper-banner { position: relative; margin-left: auto; margin-right: auto; max-width: 100%; background-repeat: no-repeat; background-position: center top; overflow: hidden; 
	background-color: #ee4e2e;
	width: 970px; height: 250px;
	font-size: 7px; 
}
.container { width: 100%; max-width: 970px; margin: 0 auto; height: 100%}

.sc { width: 970px; height: 250px; position: relative; display: none;}

.mx-auto { margin-left: auto; margin-right: auto }
.relative { position: relative;}
.absolute { position: absolute;}
.center-x { position: absolute; left: 50%; transform: translateX(-50%);}
.center-y { position: absolute; top: 50%; transform: translateY(-50%);}
.center-xy { position: absolute; left: 50%; top: 50%; transform: translateY(-50%) translateX(-50%) !important;}
.d-flex { display: flex;}
.justify-between { justify-content: space-between; }
.pos { position: absolute;}
/* .btn {  cursor: pointer } */


.sc0 { background: url(assets/00_bg.jpg) no-repeat center top; z-index: 40; opacity: 1; visibility: visible; display: block; }
.sc0 .title_kv { top: 3.5em; left: 6.5em; width: 30em; }
.sc0 .bl-btn { display: flex; top: 10em; left: 40em; width: 80em;}
.sc0 .title_ch { top: 5em; left: 64em; width: 32em; }
.sc0 .balloon1 { top: 5em; left: -5em; }
.sc0 .balloon2 { top: -5em; right: 15em; }
.sc0 .gift2 { top: 49em; right: 22em; width: 10em; z-index: 5; }
.sc0 .gift3 { top: 45em; right: 12em; width: 13em; z-index: 4; }
.sc0 .btn img { cursor: pointer; transition: all .25s ease;}
.sc0 .btn:hover img { transform: scale(1.05);}

.sc1 { background: url(assets/01_bg.jpg) no-repeat center top; z-index: 10; position: absolute; top: 0; left: 0;  }
.sc1 .title_kv { top: 12em; left: 2em; width: 18em; }
.sc1 .buc1 { top: 0em; left: 49em; width: 75em; }
.sc1 .buc2 { top: 22.5em; left: 68em; width: 33em; }
.sc1 .buc3 { top: 28em; left: 76em; width: 18em; }

.sc2 { background: url(assets/02_bg.jpg) no-repeat center top; z-index: 20; position: absolute; top: 0; left: 0; }
.sc2 .title_kv { top: 12em; left: 2em; width: 18em; }
.sc2 .balloon1 { top: 1em; left: 15em; width: 8em; }
.sc2 .balloon2 { top: -7em; right: 60em; width: 13em; }
.sc2 .gift2 { top: 24em; right: 16em; width: 6em; z-index: 5; }
.sc2 .gift3 { top: 23em; left: 34em; width: 10em; z-index: 4; }
.sc2 .bl-btn { display: flex; top: 5em; left: 22em; width: 100em; }
.sc2 .title_ch { bottom: 1.5em; left: 60em; width: 20em; }

.sc3 { background: url(assets/00_bg.jpg) no-repeat center top; z-index: 30; position: absolute; top: 0; left: 0; }
.sc3 .title_kv { top: 12em; left: 2em; width: 18em; }
.sc3 .gift3 { top: 18em; right: 2em; width: 9em; z-index: 4; }
.sc3 .bl-btn { display: flex; top: 1em; left: 22em; width: 102em; }
.sc3 .ruybang { bottom: 2em; right: 4em; width: 16em; }

.back { position: absolute; z-index: 100; top: 2em; left: 2em; display: none; cursor: pointer; width: 12.5em; }
.linkCTA { background-color: rgba(0,0,0,0); position: absolute; top: 0; left: 0; bottom: 0; z-index: 99; width: 100%; height: 100%; cursor: pointer;
	/* display: none;  */
}
.sc.active { z-index: 50; }