* { margin: 0px; padding: 0px; -webkit-overflow-scrolling : touch; outline: 0 none !important; font-family: sans-serif; }
html { /* opacity: 0; */ }
html, body {
	display: inline-block; width: 100%; height: auto;
	margin: 0px; padding: 0px;
	font-size: 14px;
	
	font-family: sans-serif;
}

body { 
	position: relative;
	-webkit-overflow-scrolling: touch; float: left;
	overflow-x: hidden; 
}

.slow {
	transition: all 100ms ease-in-out;
	-webkit-transition: all 100ms ease-in-out;
	-moz-transition: all 100ms ease-in-out;
}



::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment {display: block; height: 10px; background: #efefef; }
::-webkit-scrollbar {width: 8px; height: 8px; border: 3px solid #fff; }
::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment {display: block; height: 10px; background: #efefef; }
::-webkit-scrollbar-track {background: #efefef; -webkit-border-radius: 10px; border-radius:10px; -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,.2); }
::-webkit-scrollbar-thumb {height: 50px; width: 50px; background: rgba(0,0,0,.2); -webkit-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,.1); }


.base { position: relative; display: inline-block; float: left; box-sizing: border-box; }

main{
	left: 50%;
	width: 100%; max-width: 720px; height: auto;


    -webkit-transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);

	overflow: hidden; 

}
section, article { width: 100%; height: auto; }
img.sectionBg{ width: 100%; height: auto;}

.tester { background-color: #000; opacity: 0.5; }


.section02 > article > div, 
.section03 > article > div { width: 100%; height: auto; }


#tab01 .snsBtn {
	position: absolute;
	top: calc((5531 / 720) * 100vw); 
	width: calc((64 / 720) * 100vw); height: calc((64 / 720) * 100vw); 
	z-index: 10;
}

#tab01 .snsBtn01 { left: calc((146 / 720) * 100vw); }
#tab01 .snsBtn02 { left: calc((236 / 720) * 100vw); }
#tab01 .snsBtn03 { left: calc((326 / 720) * 100vw); }
#tab01 .snsBtn04 { left: calc((416 / 720) * 100vw); }
#tab01 .snsBtn05 { left: calc((506 / 720) * 100vw); }


@media (min-width: 720px) { 
	#tab01 .snsBtn { top: 5531px; width: 64px; height: 64px; }
	#tab01 .snsBtn01 { left: 146px; }
	#tab01 .snsBtn02 { left: 236px; }
	#tab01 .snsBtn03 { left: 326px; }
	#tab01 .snsBtn04 { left: 416px; }
	#tab01 .snsBtn05 { left: 506px; }
}




#tab02 .snsBtn {
	position: absolute;
	top: calc((4348 / 720) * 100vw); 
	width: calc((64 / 720) * 100vw); height: calc((64 / 720) * 100vw); 
	z-index: 10;
}

#tab02 .snsBtn01 { left: calc((149 / 720) * 100vw); }
#tab02 .snsBtn02 { left: calc((239 / 720) * 100vw); }
#tab02 .snsBtn03 { left: calc((329 / 720) * 100vw); }
#tab02 .snsBtn04 { left: calc((419 / 720) * 100vw); }
#tab02 .snsBtn05 { left: calc((509 / 720) * 100vw); }


@media (min-width: 720px) { 
	#tab02 .snsBtn { top: 4348px; width: 64px; height: 64px; }
	#tab02 .snsBtn01 { left: 149px; }
	#tab02 .snsBtn02 { left: 239px; }
	#tab02 .snsBtn03 { left: 329px; }
	#tab02 .snsBtn04 { left: 419px; }
	#tab02 .snsBtn05 { left: 509px; }
}



.instaBtn { 
	position: absolute;
	top: calc((303 / 720) * 100vw);  left: calc((60 / 720) * 100vw);
	width: calc((636 / 720) * 100vw); height: calc((813 / 720) * 100vw); 
}


@media (min-width: 720px) { 

	.instaBtn { 
		top: 303px;  left: 60px;
		width: 636px; height: 813px; 
	}

}



.fixedBtn {
	position: fixed; 
	left: 50%; bottom: calc((86 / 720) * 100vw);
	width: calc((389 / 720) * 100vw); height: calc((163 / 720) * 100vw);

    -webkit-transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);

	margin-left: calc((166 / 720) * 100vw);

	max-width: 720px; max-height: 360px;
	cursor: pointer;

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


@media (min-width: 720px) { 
	.fixedBtn {
		bottom: 86px;
		margin-left: 166px;
		width: 389px; height: 163px;
	}
}



#fixedBtn_position {
	position: absolute; left: 50%; 
	width: calc((389 / 720) * 100vw); height: calc((163 / 720) * 100vw);
	max-width: 229px; max-height: 83px;


    -webkit-transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
	z-index: -1;
}


@media (min-width: 720px) { 
	#fixedBtn_position {
		width: 389px; height: 163px;
	}
}




.link01 {
	position: absolute; 
	left: calc((35 / 720) * 100vw);
	top: calc((1455 / 720) * 100vw);
	width: calc((211 / 720) * 100vw); 
	height: calc((80 / 720) * 100vw);
	cursor: pointer;
	background-color: rgba(0,0,0,0);

	z-index: 1;
	border: 0px;
}

@media (min-width: 720px) { 
	.link01 { 
        left: 35px; top: 1455px;
        width: 211px; height: 80px;

	} 
}





.link02 {
	position: absolute; 
	left: calc((255 / 720) * 100vw);
	top: calc((1455 / 720) * 100vw);
	width: calc((211 / 720) * 100vw); 
	height: calc((80 / 720) * 100vw);
	cursor: pointer;
	background-color: rgba(0,0,0,0);

	z-index: 1;
	border: 0px;
}

@media (min-width: 720px) { 
	.link02 { 
		left: 255px; top: 1455px;
        width: 211px; height: 80px;

	} 
}




.link03 {
	position: absolute; 
	left: calc((474 / 720) * 100vw);
	top: calc((1455 / 720) * 100vw);
	width: calc((211 / 720) * 100vw); 
	height: calc((80 / 720) * 100vw);
	cursor: pointer;
	background-color: rgba(0,0,0,0);

	z-index: 1;
	border: 0px;
}

@media (min-width: 720px) { 
	.link03 { 
		left: 474px; top: 1455px;
        width: 211px; height: 80px;


	} 
}





#tab01, #tab02, #tab03 { display: none; width: 100%; height: auto; }
#tab01.on, #tab02.on, #tab03.on { display: inline-block; }
#tab01.off, #tab02.off, #tab03.off { opacity: 0; }




#tab01 .swiper_arrow {
	position: absolute; top: 50%;
	width: calc((45 / 720) * 100vw); height: calc((65 / 720) * 100vw);
		margin-top: calc((-33 / 720) * 100vw);

	cursor: pointer;
	z-index: 1;
}
#tab01 .swiper_arrow.prev { left: calc((40 / 720) * 100vw); }
#tab01 .swiper_arrow.next { right: calc((40 / 720) * 100vw); }
#tab01 .swiper_arrow > img { width: 100%; }
@media (min-width: 720px) { 
	#tab01 .swiper_arrow {
		top: 50%; 
		width: 45px; height: 65px;
		margin-top: -33px;
	} 


	#tab01 .swiper_arrow.prev { left: 40px; }
	#tab01 .swiper_arrow.next { right: 40px; }
}




#tab01 .swiper-scrollbar-drag {
	top: calc((-2 / 720) * 100vw); left: calc((-2 / 720) * 100vw);
	width: calc(100% + calc((4 / 720) * 100vw));
	height: calc(100% + calc((4 / 720) * 100vw));
	background: #fff;
	border: calc((2 / 720) * 100vw) solid #fff;
	box-sizing: border-box;
}



@media (min-width: 720px) { 
	#tab01 .swiper-scrollbar-drag {
		top: -2px; left: -2px;
		width: calc(100% + 4px);
		height: calc(100% + 4px);
		border: 2px solid #fff;

	}
}



#if_01 { 
	position: absolute; 
	top: calc((1582 / 720) * 100vw); left: 50%;

	width: calc((550 / 720) * 100vw); height: calc((978 / 720) * 100vw); 
		border-radius: calc((16 / 720) * 100vw);


    -webkit-transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
	
	z-index: 2;
}


@media (min-width: 720px) { 
	#if_01 {
		top: 1582px;
		width: 550px; height: 978px;
		border-radius: 16px;
	}

}



#if_02 { 
	position: absolute; 
	top: calc((1582 / 720) * 100vw); left: 50%;

	width: calc((550 / 720) * 100vw); height: calc((978 / 720) * 100vw); 
		border-radius: calc((16 / 720) * 100vw);


    -webkit-transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
	
	z-index: 2;
}


@media (min-width: 720px) { 
	#if_02 {
		top: 1582px;
		width: 550px; height: 978px;
		border-radius: 16px;
	}

}


.tab01_section_02 {
	z-index: 1;

}

@media (min-width: 720px) { 

	.tab01_section_02 {
	}

}



#tab02 .tab02_section_03 {
    margin-top: calc((-60 / 720) * 100vw);

}

@media (min-width: 720px) { 

	#tab02 .tab02_section_03 {
    margin-top: -60px;
	}

}



.tab01_section_03 {
	margin-top: calc((-84 / 720) * 100vw);
	z-index: 3;
}

@media (min-width: 720px) { 

	.tab01_section_03 {
		margin-top: -84px;
	}

}





.tab01_link01 {
	position: absolute; 
	left: calc((90 / 720) * 100vw);
	top: calc((4001 / 720) * 100vw);
	width: calc((542 / 720) * 100vw); 
	height: calc((86 / 720) * 100vw);
	cursor: pointer;
	background-color: rgba(0,0,0,.0);

	z-index: 10;
	border: 0px;
}

@media (min-width: 720px) { 
	.tab01_link01  { 
        left: 90px;
        top: 4001px;
        width: 542px;
        height: 86px;
	} 
}










.slderBox01 {
	position: absolute; 
	top: calc((3138 / 720) * 100vw); left: calc((0 / 720) * 100vw);
	width: 100%; height: calc((1004 / 720) * 100vw); 
	padding: 0px 0px;
	z-index: 4;
}



@media (min-width: 720px) { 
	.slderBox01 { 
		top: 3138px; left: 0px;
		height: 1004px; 
		padding: 0px 0px;
	} 
}



.slderBox01 > div { width: 100%; height: auto; }
.slderBox01 .slider_box > div { width: 100%; height: 100%; }
.slderBox01 > div { width: 100%; height: 100%; }
#slder01 { width: 100%; height: 100%; }
.slder01Item { width: 100%; height: 100%; margin-left: calc((0 / 720) * 100vw); }
.slder01Item > img {
	left: 50%; width: calc((650 / 720) * 100vw); height: 100%; 

    -webkit-transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
}



.slderBox01 .swiper-slide { 
	width: calc((720 / 720) * 100vw); height: 100%; 
}
@media (min-width: 720px) { 
	.slder01Item { margin-left: 0px; }

	.slderBox01 .swiper-slide { width: 720px; } 
	.slder01Item > img { width: 650px; }

}


.slderBox01 .swiper-pagination {
	position: absolute; top: calc((1024 / 720) * 100vw); left: 50%;
	width: calc(100% - ((70 / 720) * 100vw)); height: calc((14 / 720) * 100vw);

	border: calc((2 / 720) * 100vw) solid #eb6695;
	border-radius: calc((14 / 720) * 100vw);

	background-color: #eb6695;
	z-index: 1;
	overflow: hidden;

	box-sizing: border-box;

    -webkit-transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);

    box-shadow: 0px calc((4 / 720) * 100vw) calc((4 / 720) * 100vw) 0px rgba(0, 0, 0, 0.25);
}

@media (min-width: 720px) { 
	.slderBox01 .swiper-pagination {
		top: 1024px; 
		width: calc(100% - 70px); height: 14px;
		border: 2px solid #eb6695;
		border-radius: 14px;

		box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);

	}
}








.slderBox02 {
	position: absolute; 
	top: calc((4428 / 720) * 100vw); left: calc((0 / 720) * 100vw);
	width: 100%; height: calc((926 / 720) * 100vw); 
	padding: 0px 0px;
	z-index: 4;
}



@media (min-width: 720px) { 
	.slderBox02 { 
		top: 4428px; left: 0px;
		height: 926px; 
		padding: 0px 0px;
	} 
}



.slderBox02 > div { width: 100%; height: auto; }
.slderBox02 .slider_box > div { width: 100%; height: 100%; }
.slderBox02 > div { width: 100%; height: 100%; }
#slder02 { width: 100%; height: 100%; }
.slder02Item { width: 100%; height: 100%; margin-left: calc((0 / 720) * 100vw); }
.slder02Item > img {
	left: 50%; width: calc((650 / 720) * 100vw); height: 100%; 

    -webkit-transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
}

.slderBox02 .swiper-slide { 
	width: calc((720 / 720) * 100vw); height: 100%; 
}
@media (min-width: 720px) { 
	.slder02Item { margin-left: 0px; }
	.slderBox02 .swiper-slide { width: 720px; } 

	.slder02Item > img { width: 650px; }

}


.slderBox02 .swiper-pagination {
	position: absolute; top: calc((946 / 720) * 100vw); left: 50%;
	width: calc(100% - ((70 / 720) * 100vw)); height: calc((14 / 720) * 100vw);

	border: calc((2 / 720) * 100vw) solid #eb6695;
	border-radius: calc((14 / 720) * 100vw);

	background-color: #eb6695;
	z-index: 1;
	overflow: hidden;

	box-sizing: border-box;

    -webkit-transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
    box-shadow: 0px calc((4 / 720) * 100vw) calc((4 / 720) * 100vw) 0px rgba(0, 0, 0, 0.25);

}

@media (min-width: 720px) { 
	.slderBox02 .swiper-pagination {
		top: 946px; 
		width: calc(100% - 70px); height: 14px;
		border: 2px solid #eb6695;
		border-radius: 14px;
	  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
	}
}








.slderBox03 {
	position: absolute; 
	top: calc((3175 / 720) * 100vw); left: calc((0 / 720) * 100vw);
	width: 100%; height: calc((1004 / 720) * 100vw); 
	padding: 0px 0px;
	z-index: 4;
}



@media (min-width: 720px) { 
	.slderBox03 { 
		top: 3175px; left: 0px;
		height: 1004px; 
		padding: 0px 0px;
	} 
}



.slderBox03 > div { width: 100%; height: auto; }
.slderBox03 .slider_box > div { width: 100%; height: 100%; }
.slderBox03 > div { width: 100%; height: 100%; }
#slder03 { width: 100%; height: 100%; }
.slder03Item { width: 100%; height: 100%; margin-left: calc((0 / 720) * 100vw); }
.slder03Item > img {
	left: 50%; width: calc((650 / 720) * 100vw); height: 100%; 

	border-radius: calc((14 / 720) * 100vw);

    -webkit-transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
}

.slderBox03 .swiper-slide { 
	width: calc((720 / 720) * 100vw); height: 100%; 
}
@media (min-width: 720px) { 
	.slder03Item { margin-left: 0px; }
	.slderBox03 .swiper-slide { width: 720px; } 

	.slder03Item > img { width: 650px; border-radius: 14px; }

}


.slderBox03 .swiper-pagination {
	position: absolute; top: calc((1019 / 720) * 100vw); left: 50%;
	width: calc(100% - ((70 / 720) * 100vw)); height: calc((14 / 720) * 100vw);

	border: calc((2 / 720) * 100vw) solid #f2794a;
	border-radius: calc((14 / 720) * 100vw);

	background-color: #f2794a;
	z-index: 1;
	overflow: hidden;

	box-sizing: border-box;

    -webkit-transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
    box-shadow: 0px calc((4 / 720) * 100vw) calc((4 / 720) * 100vw) 0px rgba(0, 0, 0, 0.25);

}

@media (min-width: 720px) { 
	.slderBox03 .swiper-pagination {
		top: 1019px; 
		width: calc(100% - 70px); height: 14px;
		border: 2px solid #f2794a;
		border-radius: 14px;
	  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
	}
}





.tab02_link01 {
	position: absolute; 
	left: calc((90 / 720) * 100vw);
	top: calc((3047 / 720) * 100vw);
	width: calc((542 / 720) * 100vw); 
	height: calc((86 / 720) * 100vw);
	cursor: pointer;
	background-color: rgba(0,0,0,.0);

	z-index: 10;
	border: 0px;
}

@media (min-width: 720px) { 
	.tab02_link01  { 
        left: 90px;
        top: 3047px;
        width: 542px;
        height: 86px;
	} 
}






.section03 .tab03_section_02 {
	margin-top: calc((-50 / 720) * 100vw);

}

@media (min-width: 720px) { 
	.section03 .tab03_section_02 {
		margin-top: -50px;
	}
}



.section03 .game_area {
		width: 100%; height: calc((1280 / 720) * 100vw);
}

.section03 .game_area iframe {
	width: 100%; height: 100%;
	border: 0px;
	outline: none;
	border: none; 
}

@media (min-width: 720px) { 

	.section03 .game_area {
		width: 100%; height: 1280px;
	}

}









.tab03_sticker {
	position: absolute; 
	top: calc((4758 / 720) * 100vw); left: calc((256 / 720) * 100vw);
	width: calc((65 / 720) * 100vw); height: auto; 
	padding: 0px 0px;
	z-index: 5;
}



@media (min-width: 720px) { 
	.tab03_sticker { 
		top: 4758px; left: 256px;
		width: 65px;
		height: auto; 
		padding: 0px 0px;
	} 
}



.slderBox04 {
	position: absolute; 
	top: calc((4853 / 720) * 100vw); left: calc((0 / 720) * 100vw);
	width: 100%; height: calc((1004 / 720) * 100vw); 
	padding: 0px 0px;
	z-index: 4;
}



@media (min-width: 720px) { 
	.slderBox04 { 
		top: 4853px; left: 0px;
		height: 1004px; 
		padding: 0px 0px;
	} 
}



.slderBox04 > div { width: 100%; height: auto; }
.slderBox04 .slider_box > div { width: 100%; height: 100%; }
.slderBox04 > div { width: 100%; height: 100%; }
#slder04 { width: 100%; height: 100%; }
.slder04Item { width: 100%; height: 100%; margin-left: calc((0 / 720) * 100vw); }
.slder04Item > img {
	left: 50%; width: calc((650 / 720) * 100vw); height: 100%; 

	border-radius: calc((14 / 720) * 100vw);

    -webkit-transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
}

.slderBox04 .swiper-slide { 
	width: calc((720 / 720) * 100vw); height: 100%; 
}
@media (min-width: 720px) { 
	.slder04Item { margin-left: 0px; }
	.slderBox04 .swiper-slide { width: 720px; } 

	.slder04Item > img { width: 650px; border-radius: 14px; }

}


.slderBox04 .swiper-pagination {
	position: absolute; top: calc((1019 / 720) * 100vw); left: 50%;
	width: calc(100% - ((70 / 720) * 100vw)); height: calc((14 / 720) * 100vw);

	border: calc((2 / 720) * 100vw) solid #57416f;
	border-radius: calc((14 / 720) * 100vw);

	background-color: #57416f;
	z-index: 1;
	overflow: hidden;

	box-sizing: border-box;

    -webkit-transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
    box-shadow: 0px calc((4 / 720) * 100vw) calc((4 / 720) * 100vw) 0px rgba(0, 0, 0, 0.25);

}

@media (min-width: 720px) { 
	.slderBox04 .swiper-pagination {
		top: 1019px; 
		width: calc(100% - 70px); height: 14px;
		border: 2px solid #57416f;
		border-radius: 14px;
	  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
	}
}


.slderBox04 .swiper-scrollbar-drag {
	top: calc((-2 / 720) * 100vw); left: calc((-2 / 720) * 100vw);
	width: calc(100% + calc((4 / 720) * 100vw));
	height: calc(100% + calc((4 / 720) * 100vw));
	background: #a68ed6;
	border: calc((2 / 720) * 100vw) solid #a68ed6;
	box-sizing: border-box;
}



@media (min-width: 720px) { 
	.slderBox04 .swiper-scrollbar-drag {
		top: -2px; left: -2px;
		width: calc(100% + 4px);
		height: calc(100% + 4px);
		border: 2px solid #a68ed6;

	}
}




#tab03 .snsBtn {
	position: absolute;
	top: calc((6032 / 720) * 100vw); 
	width: calc((64 / 720) * 100vw); height: calc((64 / 720) * 100vw); 
	z-index: 10;
}

#tab03 .snsBtn01 { left: calc((149 / 720) * 100vw); }
#tab03 .snsBtn02 { left: calc((239 / 720) * 100vw); }
#tab03 .snsBtn03 { left: calc((329 / 720) * 100vw); }
#tab03 .snsBtn04 { left: calc((419 / 720) * 100vw); }
#tab03 .snsBtn05 { left: calc((509 / 720) * 100vw); }


@media (min-width: 720px) { 
	#tab03 .snsBtn { top: 6032px; width: 64px; height: 64px; }
	#tab03 .snsBtn01 { left: 149px; }
	#tab03 .snsBtn02 { left: 239px; }
	#tab03 .snsBtn03 { left: 329px; }
	#tab03 .snsBtn04 { left: 419px; }
	#tab03 .snsBtn05 { left: 509px; }
}