@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Noto+Sans+TC:100,300,400,500,700,900&display=swap");
html,
body,
{
  margin: 0;
  padding: 0;
  height: 100%;
  box-sizing: border-box;
  line-height: 1.5;
  font-family: "Noto Sans TC", serif, "Microsoft JhengHei", 微軟正黑體, PMingLiU, 新細明體, sans-serif;
  background-color: #4b1110;
}

a {
  text-decoration: none;
}

.main{
	display: block;
	height: auto;
	width: 100%;
	position: relative;
	overflow: hidden;
	background-color: #4b1110;
}

.header{
	display: block;
	width: 100vw;
	height: 51vw;
	position: relative;
	background-image: url("../img/headerbg.jpg");
	-moz-background-size:100%;
	-webkit-background-size: 100%;
	-o-background-size: 100%;
	background-size:cover;
	background-repeat: no-repeat;
	background-position: center top;
	background-color: #4b1110;
}

.logo {
    width: 35vw;
    height: 28vw;
	left: 15vw;
    top: 3vw;
    background: url("../img/slogan.png")center no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 2;
}

.dot{
	display: block;
	position: absolute;
	height: 17vw;
    width: 17vw;
	left: 24vw;
    top: 8vw;
    background-color: #ffffff;
    border-radius: 50%;
	filter: blur(10px);
	animation-delay: .7s;
	animation: white 2s infinite;
}

@keyframes white{
	0%{opacity: 1; transform: scale(100%);}
	100%{opacity: 0; transform: scale(180%);}
}

.poring_xmashat{
	display: block;
	width: 12vw;
    height: 12vw;
	left: 37vw;
    top: 24vw;
    background:url("../img/poring_xmashat.png")center no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 10;
	transform: translateY(0%);
	animation-delay: 1s;
	animation: poring 6s linear infinite;
}

.poring_partyhat{
	display: block;
	width: 8vw;
    height: 8vw;
	left: 16.5vw;
    top: 1.5vw;
    background:url("../img/poring_partyhat.png")center no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 10;
	transform: translateY(0%);
	animation-delay: 1s;
	animation: poring 2s linear infinite;
}

@keyframes poring{
	0%{transform: translateY(0);}
	50%{transform: translateY(-5%);}
	100%{transform: translateY(0);}
}

.poring_partyhat2{
	display: block;
	width: 6vw;
    height: 6vw;
	left: 78vw;
    top: 2vw;
    background:url("../img/poring_partyhat.png")center no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 10;
	-moz-transform:scaleX(-1);
	-webkit-transform:scaleX(-1);
	-o-transform:scaleX(-1);
	transform:scaleX(-1);
}

.xmas_boy{
	display: block;
	width: 13vw;
    height: 18vw;
	left: 4vw;
    top: 18vw;
    background: url("../img/xmas_boy.png")center no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 3;
	transform: translateY(0%);
	animation-delay: 5s;
	animation: poring 4s linear infinite;
}

.xmas_cat{
	display: block;
	width: 14vw;
    height: 18vw;
	left: 82vw;
    top: 19vw;
    background: url("../img/xmas_cat.png")center no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 3;
	transform: translateY(0%);
	animation-delay: 1s;
	animation: poring 2s linear infinite;
}

.cheerleader{
	display: block;
	width:  22vw;
    height: 38vw;
	left: 68vw;
    top: 6vw;
    background: url("../img/cheerleader.png")center no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 2;
}

.giftbox{
	display: block;
	width: 27vw;
    height: 21vw;
	left: 50vw;
    top: 19vw;
    background: url("../img/giftbox.png")center no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 4;
	animation: gift 0.8s;
}

@keyframes gift{
	0%{opacity: 0; transform: scale(0);}
	100%{opacity: 1; transform: scale(100%);}
}

.main_character{
	display: block;
	width: 80vw;
    height: 51vw;
	left: 20vw;
    top: 0vw;
    background:url("../img/main_character.png")center no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 3;
}

.text{
	display: block;
	width: 4vw;
    height: 17vw;
	left: 69vw;
    top: 3.5vw;
    background:url("../img/text.png")center no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 3;
}

.btn_bg{
	display: block;
	width: 47vw;
    height: 10vw;
	left: 26vw;
    top: 38vw;
    background: url("../img/btn_bar.png")no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 6;
}

.btn_ro1 a{
	display: block;
	width: 10vw;
    height: 11vw;
	left: 32vw;
    top: 35.5vw;
    background: url("../img/btn_ro1.png")no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 8;
}

.btn_ro1 a:hover{
	transform: translateY(-3%);
	transition-duration: 0.5s;
	background-image: url("../img/btn_ro1_hover.png");
	cursor: pointer;
}

.btn_rom a{
	display: block;
	width: 10vw;
    height: 11vw;
	left: 44.25vw;
    top: 35.5vw;
    background: url("../img/btn_rom.png")no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 8;
}

.btn_rom a:hover{
	transform: translateY(-3%);
	transition-duration: 0.5s;
	background-image: url("../img/btn_rom_hover.png");
	cursor: pointer;
}

.btn_cpbl a{
	display: block;
	width: 10vw;
    height: 11vw;
	left: 56.5vw;
    top: 35.5vw;
    background: url("../img/btn_cpbl.png")no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 8;
}

.btn_cpbl a:hover{
	transform: translateY(-3%);
	transition-duration: 0.5s;
	background-image: url("../img/btn_cpbl_hover.png");
	cursor: pointer;
}

.gift_boy{
	display: block;
	width: 35vw;
    height: 24.5vw;
	left: 57vw;
    top: 26.5vw;
    background: url("../img/gift_boy.png")no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 7;
}

.gift_girl{
	display: block;
	width: 35vw;
    height: 24.5vw;
	left: 6vw;
    top: 26.5vw;
    background: url("../img/gift_girl.png")no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 7;
}

.logo_star1{
	display: block;
	width: 2vw;
    height: 2vw;
	left: 24vw;
    top: 4vw;
    background: url("../img/logo_star.png")no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 7;
	animation-delay: .7s;
	animation: magicball 2s linear infinite;
}

@keyframes magicball{
	0%{opacity: 0;}
	50%{opacity: 1;}
	100%{opacity: 0;}
}

.logo_star2{
	display: block;
	width: 1vw;
    height: 1vw;
	left: 39vw;
    top: 5vw;
    background: url("../img/logo_star.png")no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 7;
	animation: magicball 2s linear infinite;
}

.logo_star3{
	display: block;
	width: 2vw;
    height: 2vw;
	left: 40vw;
    top: 7.5vw;
    background: url("../img/logo_star.png")no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 7;
	transform: translateY(0%);
	animation-delay: 3s;
	animation: magicball 3s linear infinite;
}

.logo_star4{
	display: block;
	width: 1vw;
    height: 1vw;
	left: 36vw;
    top: 28vw;
    background: url("../img/logo_star.png")no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 7;
	animation: magicball 2s linear infinite;
}

.logo_star5{
	display: block;
	width: 2vw;
    height: 2vw;
	left: 32vw;
    top: 29vw;
    background: url("../img/logo_star.png")no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 7;
	transform: translateY(0%);
	animation-delay: 1s;
	animation: magicball 3s linear infinite;
}

footer {
  background-color: #4b1110;
}

@media screen and (min-width: 1280px) and (max-width: 1600px) {

.header{
	display: block;
	width: 100vw;
	height: 62vw;
	position: relative;
	background-image: url("../img/headerbg.jpg");
	-moz-background-size:100%;
	-webkit-background-size: 100%;
	-o-background-size: 100%;
	background-size:cover;
	background-repeat: no-repeat;
	background-position: center top;
}

.logo {
    width: 35vw;
    height: 28vw;
	left: 15vw;
    top: 6vw;
    background: url("../img/slogan.png")center no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 2;
}
	
.dot{display: none;}

.poring_xmashat{
	display: block;
	width: 12vw;
    height: 12vw;
	left: 37vw;
    top: 29vw;
    background:url("../img/poring_xmashat.png")center no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 10;
}

.poring_partyhat{
	display: block;
	width: 8vw;
    height: 8vw;
	left: 16.5vw;
    top: 4.5vw;
    background:url("../img/poring_partyhat.png")center no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 10;
}

.poring_partyhat2{
	display: block;
	width: 6vw;
    height: 6vw;
	left: 78vw;
    top: 7vw;
    background:url("../img/poring_partyhat.png")center no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 10;
	-moz-transform:scaleX(-1);
	-webkit-transform:scaleX(-1);
	-o-transform:scaleX(-1);
	transform:scaleX(-1);
}

.xmas_boy{
	display: block;
	width: 13vw;
    height: 18vw;
	left: 4vw;
    top: 23vw;
    background: url("../img/xmas_boy.png")center no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 3;
}

.xmas_cat{
	display: block;
	width: 14vw;
    height: 18vw;
	left: 82vw;
    top: 24vw;
    background: url("../img/xmas_cat.png")center no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 3;
}

.cheerleader{
	display: block;
	width:  22vw;
    height: 38vw;
	left: 68vw;
    top: 11vw;
    background: url("../img/cheerleader.png")center no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 2;
}

.giftbox{
	display: block;
	width: 27vw;
    height: 21vw;
	left: 50vw;
    top: 24vw;
    background: url("../img/giftbox.png")center no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 4;
}

.main_character{
	display: block;
	width: 80vw;
    height: 51vw;
	left: 20vw;
    top: 5vw;
    background:url("../img/main_character.png")center no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 3;
}

.text{
	display: block;
	width: 4vw;
    height: 17vw;
	left: 69vw;
    top: 8.5vw;
    background:url("../img/text.png")center no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 3;
}

.btn_bg{
	display: block;
	width: 62vw;
    height: 14vw;
	left: 19vw;
    top: 45vw;
    background: url("../img/btn_bar.png")no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 6;
}

.btn_ro1 a{
	display: block;
	width: 12vw;
    height: 14vw;
	left: 30vw;
    top: 42.5vw;
    background: url("../img/btn_ro1.png")no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 8;
}

.btn_ro1 a:hover{
	transform: translateY(-3%);
	transition-duration: 0.2s;
	background-image: url("../img/btn_ro1_hover.png");
	cursor: pointer;
}

.btn_rom a{
	display: block;
	display: block;
	width: 12vw;
    height: 14vw;
	left: 44vw;
    top: 42.5vw;
    background: url("../img/btn_rom.png")no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 8;
}

.btn_rom a:hover{
	transform: translateY(-3%);
	transition-duration: 0.2s;
	background-image: url("../img/btn_rom_hover.png");
	cursor: pointer;
}

.btn_cpbl a{
	display: block;
	display: block;
	width: 12vw;
    height: 14vw;
	left: 58vw;
    top: 42.5vw;
    background: url("../img/btn_cpbl.png")no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 8;
}

.btn_cpbl a:hover{
	transform: translateY(-3%);
	transition-duration: 0.2s;
	background-image: url("../img/btn_cpbl_hover.png");
	cursor: pointer;
}

.gift_boy{
	display: block;
	width: 39vw;
    height: 27.5vw;
	left: 57vw;
    top: 34.5vw;
    background: url("../img/gift_boy.png")no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 7;
}

.gift_girl{
	display: block;
	width: 39vw;
    height: 27.5vw;
	left: 2vw;
    top: 34.5vw;
    background: url("../img/gift_girl.png")no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 7;
}

.logo_star1{
	display: block;
	width: 2vw;
    height: 2vw;
	left: 24vw;
    top: 8vw;
    background: url("../img/logo_star.png")no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 7;
	animation-delay: .7s;
	animation: magicball 2s linear infinite;
}

.logo_star2{
	display: block;
	width: 1vw;
    height: 1vw;
	left: 39vw;
    top: 8vw;
    background: url("../img/logo_star.png")no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 7;
	animation-delay: .7s;
	animation: magicball 1s linear infinite;
}

.logo_star3{
	display: block;
	width: 2vw;
    height: 2vw;
	left: 40vw;
    top: 10.5vw;
    background: url("../img/logo_star.png")no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 7;
	transform: translateY(0%);
	animation-delay: 3s;
	animation: magicball 3s linear infinite;
}

.logo_star4{
	display: block;
	width: 1vw;
    height: 1vw;
	left: 36vw;
    top: 32vw;
    background: url("../img/logo_star.png")no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 7;
	animation-delay: .7s;
	animation: magicball 1s linear infinite;
}

.logo_star5{
	display: block;
	width: 2vw;
    height: 2vw;
	left: 32vw;
    top: 32vw;
    background: url("../img/logo_star.png")no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 7;
	transform: translateY(0%);
	animation-delay: 1s;
	animation: magicball 3s linear infinite;
}
	
}

@media screen and (min-width: 1024px) and (max-width: 1279px) {

.header{
	display: block;
	width: 100vw;
	height: 118vw;
	position: relative;
	background-image: url("../img/headerbg.jpg");
	-moz-background-size:100%;
	-webkit-background-size: 100%;
	-o-background-size: 100%;
	background-size:cover;
	background-repeat: no-repeat;
	background-position: center top;
}

.logo {
    width: 50vw;
    height: 44vw;
	left: 25vw;
    top: 0vw;
    background: url("../img/slogan.png")center no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 2;
}
	
.dot{display: none;}

.poring_xmashat{
	display: block;
	width: 15vw;
    height: 15vw;
	left: 63vw;
    top: 32vw;
    background:url("../img/poring_xmashat.png")center no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 10;
}

.poring_partyhat{
	display: block;
	width: 14vw;
    height: 14vw;
	left: 13vw;
    top: 11vw;
    background:url("../img/poring_partyhat.png")center no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 10;
}

.poring_partyhat2{
	display: block;
	width: 8vw;
    height: 8vw;
	left: 74vw;
    top: 5vw;
    background:url("../img/poring_partyhat.png")center no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 10;
	-moz-transform:scaleX(-1);
	-webkit-transform:scaleX(-1);
	-o-transform:scaleX(-1);
	transform:scaleX(-1);
}

.xmas_boy{
	display: block;
	width: 30vw;
    height: 40vw;
	left: 0vw;
    top: 42vw;
    background: url("../img/xmas_boy.png")center no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 3;
}

.xmas_cat{
	display: block;
	width: 14vw;
    height: 18vw;
	left: 82vw;
    top: 24vw;
    background: url("../img/xmas_cat.png")center no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 3;
}

.cheerleader{
	display: block;
	width:  28vw;
    height: 54vw;
	left: 64vw;
    top: 46vw;
    background: url("../img/cheerleader.png")center no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 2;
}

.giftbox{
	display: block;
	width: 36vw;
    height: 40vw;
	left: 35vw;
    top: 60vw;
    background: url("../img/giftbox.png")center no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 4;
}

.main_character{
	display: block;
	width: 90vw;
    height: 78vw;
	left: 5vw;
    top: 34vw;
    background:url("../img/main_character.png")center no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 3;
}

.text{
	display: block;
	width: 6vw;
    height: 20vw;
	left: 63vw;
    top: 45vw;
    background:url("../img/text.png")center no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 3;
}

.btn_bg{
	display: block;
	width: 62vw;
    height: 14vw;
	left: 19vw;
    top: 101vw;
    background: url("../img/btn_bar.png")no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 6;
}

.btn_ro1 a{
	display: block;
	width: 12vw;
    height: 14vw;
	left: 30vw;
    top: 98vw;
    background: url("../img/btn_ro1.png")no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 8;
}

.btn_ro1 a:hover{
	transform: translateY(-3%);
	transition-duration: 0.2s;
	background-image: url("../img/btn_ro1_hover.png");
	cursor: pointer;
}

.btn_rom a{
	display: block;
	display: block;
	width: 12vw;
    height: 14vw;
	left: 44vw;
    top: 98vw;
    background: url("../img/btn_rom.png")no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 8;
}

.btn_rom a:hover{
	transform: translateY(-3%);
	transition-duration: 0.2s;
	background-image: url("../img/btn_rom_hover.png");
	cursor: pointer;
}

.btn_cpbl a{
	display: block;
	display: block;
	width: 12vw;
    height: 14vw;
	left: 58vw;
    top: 98vw;
    background: url("../img/btn_cpbl.png")no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 8;
}

.btn_cpbl a:hover{
	transform: translateY(-3%);
	transition-duration: 0.2s;
	background-image: url("../img/btn_cpbl_hover.png");
	cursor: pointer;
}

.gift_boy{
	display: block;
	width: 39vw;
    height: 27.5vw;
	left: 60vw;
    top: 90vw;
    background: url("../img/gift_boy.png")no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 7;
}

.gift_girl{
	display: block;
	width: 39vw;
    height: 27.5vw;
	left: -1vw;
    top: 90vw;
    background: url("../img/gift_girl.png")no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 7;
}

.logo_star1{
	display: block;
	width: 2vw;
    height: 2vw;
	left: 24vw;
    top: 8vw;
    background: url("../img/logo_star.png")no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 7;
	animation-delay: .7s;
	animation: magicball 2s linear infinite;
}

.logo_star2{
	display: block;
	width: 1vw;
    height: 1vw;
	left: 39vw;
    top: 8vw;
    background: url("../img/logo_star.png")no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 7;
	animation: magicball 1s linear infinite;
}

.logo_star3{
	display: block;
	width: 2vw;
    height: 2vw;
	left: 40vw;
    top: 10.5vw;
    background: url("../img/logo_star.png")no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 7;
	transform: translateY(0%);
	animation-delay: 3s;
	animation: magicball 3s linear infinite;
}

.logo_star4{
	display: block;
	width: 1vw;
    height: 1vw;
	left: 36vw;
    top: 32vw;
    background: url("../img/logo_star.png")no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 7;
	animation-delay: .7s;
	animation: magicball 1s linear infinite;
}

.logo_star5{
	display: block;
	width: 2vw;
    height: 2vw;
	left: 32vw;
    top: 32vw;
    background: url("../img/logo_star.png")no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 7;
	transform: translateY(0%);
	animation-delay: 1s;
	animation: magicball 3s linear infinite;
}
}


@media screen and (min-width: 769px) and (max-width: 1023px) {

.header{
	display: block;
	width: 100vw;
	height: 62vw;
	position: relative;
	background-image: url("../img/headerbg.jpg");
	-moz-background-size:100%;
	-webkit-background-size: 100%;
	-o-background-size: 100%;
	background-size:cover;
	background-repeat: no-repeat;
	background-position: center top;
}

.logo {
    width: 35vw;
    height: 28vw;
	left: 15vw;
    top: 6vw;
    background: url("../img/slogan.png")center no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 2;
}
	
.dot{display: none;}

.poring_xmashat{
	display: block;
	width: 12vw;
    height: 12vw;
	left: 37vw;
    top: 29vw;
    background:url("../img/poring_xmashat.png")center no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 10;
}

.poring_partyhat{
	display: block;
	width: 8vw;
    height: 8vw;
	left: 16.5vw;
    top: 4.5vw;
    background:url("../img/poring_partyhat.png")center no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 10;
}

.poring_partyhat2{
	display: block;
	width: 6vw;
    height: 6vw;
	left: 78vw;
    top: 7vw;
    background:url("../img/poring_partyhat.png")center no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 10;
	-moz-transform:scaleX(-1);
	-webkit-transform:scaleX(-1);
	-o-transform:scaleX(-1);
	transform:scaleX(-1);
}

.xmas_boy{
	display: block;
	width: 13vw;
    height: 18vw;
	left: 4vw;
    top: 23vw;
    background: url("../img/xmas_boy.png")center no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 3;
}

.xmas_cat{
	display: block;
	width: 14vw;
    height: 18vw;
	left: 82vw;
    top: 24vw;
    background: url("../img/xmas_cat.png")center no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 3;
}

.cheerleader{
	display: block;
	width:  22vw;
    height: 38vw;
	left: 68vw;
    top: 11vw;
    background: url("../img/cheerleader.png")center no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 2;
}

.giftbox{
	display: block;
	width: 27vw;
    height: 21vw;
	left: 50vw;
    top: 24vw;
    background: url("../img/giftbox.png")center no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 4;
}

.main_character{
	display: block;
	width: 80vw;
    height: 51vw;
	left: 20vw;
    top: 5vw;
    background:url("../img/main_character.png")center no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 3;
}

.text{
	display: block;
	width: 4vw;
    height: 17vw;
	left: 69vw;
    top: 8.5vw;
    background:url("../img/text.png")center no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 3;
}

.btn_bg{
	display: block;
	width: 62vw;
    height: 14vw;
	left: 19vw;
    top: 45vw;
    background: url("../img/btn_bar.png")no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 6;
}

.btn_ro1 a{
	display: block;
	width: 12vw;
    height: 14vw;
	left: 30vw;
    top: 42.5vw;
    background: url("../img/btn_ro1.png")no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 8;
}

.btn_ro1 a:hover{
	transform: translateY(-3%);
	transition-duration: 0.2s;
	background-image: url("../img/btn_ro1_hover.png");
	cursor: pointer;
}

.btn_rom a{
	display: block;
	display: block;
	width: 12vw;
    height: 14vw;
	left: 44vw;
    top: 42.5vw;
    background: url("../img/btn_rom.png")no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 8;
}

.btn_rom a:hover{
	transform: translateY(-3%);
	transition-duration: 0.2s;
	background-image: url("../img/btn_rom_hover.png");
	cursor: pointer;
}

.btn_cpbl a{
	display: block;
	display: block;
	width: 12vw;
    height: 14vw;
	left: 58vw;
    top: 42.5vw;
    background: url("../img/btn_cpbl.png")no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 8;
}

.btn_cpbl a:hover{
	transform: translateY(-3%);
	transition-duration: 0.2s;
	background-image: url("../img/btn_cpbl_hover.png");
	cursor: pointer;
}

.gift_boy{
	display: block;
	width: 39vw;
    height: 27.5vw;
	left: 57vw;
    top: 34.5vw;
    background: url("../img/gift_boy.png")no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 7;
}

.gift_girl{
	display: block;
	width: 39vw;
    height: 27.5vw;
	left: 2vw;
    top: 34.5vw;
    background: url("../img/gift_girl.png")no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 7;
}

.logo_star1{
	display: block;
	width: 2vw;
    height: 2vw;
	left: 24vw;
    top: 8vw;
    background: url("../img/logo_star.png")no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 7;
	transform: translateY(0%);
	animation-delay: .7s;
	animation: magicball 2s linear infinite;
}

.logo_star2{
	display: block;
	width: 1vw;
    height: 1vw;
	left: 39vw;
    top: 8vw;
    background: url("../img/logo_star.png")no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 7;
	animation-delay: .7s;
	animation: magicball 1s linear infinite;
}

.logo_star3{
	display: block;
	width: 2vw;
    height: 2vw;
	left: 40vw;
    top: 10.5vw;
    background: url("../img/logo_star.png")no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 7;
	transform: translateY(0%);
	animation-delay: 3s;
	animation: magicball 3s linear infinite;
}

.logo_star4{
	display: block;
	width: 1vw;
    height: 1vw;
	left: 36vw;
    top: 32vw;
    background: url("../img/logo_star.png")no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 7;
	animation-delay: .7s;
	animation: magicball 1s linear infinite;
}

.logo_star5{
	display: block;
	width: 2vw;
    height: 2vw;
	left: 32vw;
    top: 32vw;
    background: url("../img/logo_star.png")no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 7;
	transform: translateY(0%);
	animation-delay: 1s;
	animation: magicball 3s linear infinite;
}
}

@media screen and (max-width: 768px) {

body::-webkit-scrollbar {
  display: none;
}	

.header{
	display: block;
	width: 100vw;
	height: 168vw;
	position: relative;
	background-image:url("../img/headerbg_m.jpg");
	-moz-background-size:100%;
	-webkit-background-size: 100%;
	-o-background-size: 100%;
	background-size:cover;
	background-repeat: no-repeat;
	background-position: center top;
}

.logo {
    width: 70vw;
    height: 65vw;
	left: 15vw;
    top: -2vw;
    background: url("../img/slogan.png")center no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 2;
}
	
.dot{display: none;}

.poring_xmashat{
	display: block;
	width: 22vw;
    height: 22vw;
	left: 70vw;
    top: 44vw;
    background:url("../img/poring_xmashat.png")center no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 10;
}

.poring_partyhat{
	display: block;
	width: 18vw;
    height: 18vw;
	left: 2vw;
    top: 28vw;
    background:url("../img/poring_partyhat.png")center no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 10;
}

.poring_partyhat2{
	display: block;
	width: 12vw;
    height: 12vw;
	left: 82vw;
    top: 6vw;
    background:url("../img/poring_partyhat.png")center no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 10;
	-moz-transform:scaleX(-1);
	-webkit-transform:scaleX(-1);
	-o-transform:scaleX(-1);
	transform:scaleX(-1);
}

.xmas_boy{
	display: block;
	width: 38vw;
    height: 47vw;
	left: -6vw;
    top: 47vw;
    background: url("../img/xmas_boy.png")center no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 3;
}

.xmas_cat{
	display: block;
	width: 14vw;
    height: 18vw;
	left: 84vw;
    top: 25vw;
    background: url("../img/xmas_cat.png")center no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 3;
}

.cheerleader{
	display: block;
	width:  40vw;
    height: 77vw;
	left: 67vw;
    top: 64vw;
    background: url("../img/cheerleader.png")center no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 2;
}

.giftbox{
	display: block;
	width: 50vw;
    height: 54vw;
	left: 34vw;
    top: 86vw;
    background: url("../img/giftbox.png")center no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 4;
}

.main_character{
	display: block;
	width: 104vw;
    height: 118vw;
	left: 0vw;
    top: 46vw;
    background:url("../img/main_character.png")center no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 3;
}

.text{
	display: block;
	width: 8vw;
    height: 40vw;
	left: 67vw;
    top: 62vw;
    background:url("../img/text.png")center no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 3;
}

.btn_bg{
	display: block;
	width: 108vw;
    height: 24vw;
	left: -4vw;
    top: 145vw;
    background: url("../img/btn_bar.png")no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 6;
}

.btn_ro1 a{
	display: block;
	width: 25vw;
    height: 28vw;
	left: 8vw;
    top: 136vw;
    background: url("../img/btn_ro1.png")no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 8;
}

.btn_ro1 a:hover{
	transform: translateY(-3%);
	transition-duration: 0.2s;
	background-image: url("../img/btn_ro1_hover.png");
	cursor: pointer;
}

.btn_rom a{
	display: block;
	width: 25vw;
    height: 28vw;
	left: 38vw;
    top: 136vw;
    background: url("../img/btn_rom.png")no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 8;
}

.btn_rom a:hover{
	transform: translateY(-3%);
	transition-duration: 0.2s;
	background-image: url("../img/btn_rom_hover.png");
	cursor: pointer;
}

.btn_cpbl a{
	display: block;
	width: 25vw;
    height: 28vw;
	left: 68vw;
    top: 136vw;
    background: url("../img/btn_cpbl.png")no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 8;
}

.btn_cpbl a:hover{
	transform: translateY(-3%);
	transition-duration: 0.2s;
	background-image: url("../img/btn_cpbl_hover.png");
	cursor: pointer;
}

.gift_boy{
	display: block;
	width: 64vw;
    height: 50vw;
	left: 53vw;
    top: 96vw;
    background: url("../img/gift_boy.png")no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 7;
}

.gift_girl{
	display: block;
	width: 64vw;
    height: 50vw;
	left: -18vw;
    top: 96vw;
    background: url("../img/gift_girl.png")no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 7;
}

.logo_star1{
	display: block;
	width: 6vw;
    height: 6vw;
	left: 26vw;
    top: 8vw;
    background: url("../img/logo_star.png")no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 7;
	transform: translateY(0%);
	animation-delay: .7s;
	animation: magicball 2s linear infinite;
}

.logo_star2{
	display: block;
	width: 3vw;
    height: 3vw;
	left: 68vw;
    top: 7vw;
    background: url("../img/logo_star.png")no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 7;
	animation-delay: .7s;
	animation: magicball 1s linear infinite;
}

.logo_star3{
	display: block;
	width: 4vw;
    height: 4vw;
	left: 65vw;
    top: 11vw;
    background: url("../img/logo_star.png")no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 7;
	transform: translateY(0%);
	animation-delay: 3s;
	animation: magicball 3s linear infinite;
}

.logo_star4{
	display: block;
	width: 3vw;
    height: 3vw;
	left: 66vw;
    top: 54vw;
    background: url("../img/logo_star.png")no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 7;
	animation-delay: .7s;
	animation: magicball 1s linear infinite;
}

.logo_star5{
	display: block;
	width: 5vw;
    height: 5vw;
	left: 36vw;
    top: 54vw;
    background: url("../img/logo_star.png")no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    z-index: 7;
	transform: translateY(0%);
	animation-delay: 1s;
	animation: magicball 3s linear infinite;
}
}

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

}