@charset "utf-8";
/**
 * Main v1.0 : 2024-09-10
*/


/* ------------------------------------------------------------------------------------------------------------- */
/* Common */
#contents {
    position: relative;
    width: 1920px;
    height: 1080px;
    overflow: hidden;
}

/* Bg */
.bg--wrap {
	position: relative;
    width: 1920px;
    height: 1080px;
	background: url("../../img/main/english/intro_bg.jpg") no-repeat center / 100%;
	box-sizing: border-box;
	z-index: 10;
}
.bg--wrap .container {
	padding: 70px 52px;
}

/* Illust */
.airplane {
	width: 237px;
	height: 164px;
	position: absolute;
    left: 540px;
	top: 93px;
	background: url("../../img/main/english/airplane.gif") no-repeat center / 100%;
		opacity: 0;
	transform: scale(0);
	transition: all .5s;
}
.airplane.on {
	transform: scale(1);
	animation: fadeInRight 2s .6s forwards;
}
@keyframes fadeInRight {
	0% {
		opacity: 0;
		transform: scale(1) translate3d(-100%, 0, 0);
	}
	100% {
		opacity: 1;
		transform: scale(1) translateZ(0);
	}
}
.firecracker {
	width: 240px;
	height: 232px;
	position: absolute;
    left: 532px;
	top: 315px;
	background: url("../../img/main/english/firecracker.png") no-repeat center / 100% ;
	opacity: 0;
}
.firecracker.on {
	animation: spark 2s 1s infinite;
}
@keyframes spark {
	0% {
		transform: scale(0);
		opacity: 1;
	}
	60%, 90% {
		transform: scale(1);
	}
	100% {
		transform: scale(0.01);
		opacity: 0;
	}
}
.castle {
	width: 537px;
	height: 542px;
	position: absolute;
    left: 175px;
	top: 317px;
	background: url("../../img/main/english/castle.png") no-repeat center / 100% ;
}
.toy {
	width: 133px;
	height: 98px;
	position: absolute;
    left: 610px;
	top: 831px;
	background: url("../../img/main/english/toy.png") no-repeat center / 100% ;
}
.store {
	width: 263px;
	height: 258px;
	position: absolute;
    left: 742px;
	top: 657px;
	background: url("../../img/main/english/store.gif") no-repeat center / 100% ;
}
.butterfly {
	width: 69px;
	height: 64px;
	position: absolute;
    left: 879px;
	top: 918px;
	background: url("../../img/main/english/butterfly.gif") no-repeat center / 100% ;
	transform: translate(-80px, 80px);
}
.butterfly.on {
	animation: bounce 2s 3.5s cubic-bezier(1, 0, 0.8, 1) both;
}
@keyframes bounce {
	0% {
		transform: translate(-80px, 80px);
	}
	5% {
		transform: translate(-65px, 65px);
	}
	10% {
		transform: translate(-50px, 50px);
	}
	20% {
		transform: translate(-30px, 40px);
	}
	50% {
		transform: translate(-20px, 45px);
	}
	70% {
		transform: translate(-10px, 30px);
	}
	80% {
		transform: translate(-5px, 10px);
	}
	100% {
		transform: translate(0px, 10px);
	}
}
.pinkballoon {
	width: 49px;
	height: 130px;
	position: absolute;
    left: 1039px;
	top: 651px;
	background: url("../../img/main/english/pinkballoon.png") no-repeat center / 100% ;
	transform: translateY(100px);
	opacity: 0;
	transition: all 1.5s 1.5s;
}
.pinkballoon.on {
	transform: translateY(0px);
	opacity: 1;
}
.cloud {
	width: 735px;
	height: 255px;
	position: absolute;
    left: 993px;
	top: 223px;
	background: url("../../img/main/english/cloud.png") no-repeat center / 100%;
	opacity: 0;
}
.cloud.on {
	transform: scale(1);
	animation: fadeInLeft 3s 0.5s both;
}
@keyframes fadeInLeft {
	0% {
		opacity: 0;
		transform: scale(1) translate3d(100%, 0, 0);
	}
	100% {
		opacity: 1;
		transform: scale(1) translateZ(0);
	}
}
.airballoon {
	width: 397px;
	height: 543px;
	position: absolute;
    left: 996px;
	top: 206px;
	background: url("../../img/main/english/airballoon.png") no-repeat center / 100% ;
}
.airballoon.on {
	animation: bounce2 2.5s cubic-bezier(0, 0, 0.18, 0.99) infinite alternate;
}
@keyframes bounce2 {
    0% {
      transform: translateY(0px);
    }
    50% {
      transform: translateY(-30px);
    }
    100% {
      transform: translateY(0px);
	}
}
.horse {
	width: 137px;
	height: 124px;
	position: absolute;
    left: 1466px;
	top: 654px;
	background: url("../../img/main/english/horse.png") no-repeat center / 100% ;
}
.horse.on {
	animation: bounce3 .5s cubic-bezier(0, 0, 0.18, 0.99) infinite alternate;
}
@keyframes bounce3 {
	0% {
		transform: rotate(5deg);
	}
	to {
		transform: rotate(-5deg);
	}
}
.ferriswheel {
	width: 286px;
	height: 415px;
	position: absolute;
    left: 1663px;
	top: 365px;
	background: url("../../img/main/english/ferriswheel.gif") no-repeat center / 100% ;
}

/* Bg-top */
.bg--title.grade5 {
	position: absolute;
    width: 275px;
    height: 157px;
	background: url("../../img/main/english/title_5.png") no-repeat center / 100%;
	box-sizing: border-box;
	z-index: 10;
	transform: scale(0);
    transition: all .5s;
}
.bg--title.grade6 {
	position: absolute;
	width: 275px;
	height: 157px;
	background: url("../../img/main/english/title_6.png") no-repeat center / 100%;
	box-sizing: border-box;
	z-index: 10;
	transform: scale(0);
	transition: all .5s;
}
.bg--title.on {
	transform: scale(1);
}

/* Top menu */
.top--menu {
	position: absolute;
	top: 70px;
	right: 52px;
	display: flex;
	gap: 15px;
}
.top--menu .menu {
	transform: scale(0.6) translateY(30px);
    transition: all .3s 1s ease-in;
    opacity: 0;
}
.top--menu .menu:nth-child(2) {
	transition-delay: 1.1s;
}
.top--menu .menu:nth-child(3) {
	transition-delay: 1.2s;
}
.top--menu .menu:nth-child(4) {
	transition-delay: 1.3s;
}
.top--menu.on .menu {
	transform: scale(1) translateY(0px);
    opacity: 1;
}
.top--menu .menu .txt, .bottom--menu .menu .txt {
	display: none;
    text-indent: -9999em;
}
.top--menu .menu, .bottom--menu .menu {
	cursor: pointer;
}
.top--menu .menu.m1 {
	width: 175px;
	height: 66px;
    background: url("../../img/main/english/top_btn01.png") no-repeat center / 100%;
}
.top--menu .menu.m2 {
	width: 175px;
	height: 66px;
    background: url("../../img/main/english/top_btn02.png") no-repeat center / 100%;
}
.top--menu .menu.m3 {
	width: 175px;
	height: 66px;
    background: url("../../img/main/english/top_btn03.png") no-repeat center / 100%;
}
.top--menu .menu.m4 {
	width: 66px;
	height: 66px;
    background: url("../../img/main/english/top_btn04.png") no-repeat center / 100%;
}

.left--menu {
	position: absolute;
	top: 312px;
	left: 52px;
	width: 290px;
	height: 518px;
    background: url("../../img/main/english/left_menuBg.png") no-repeat center / 100%;
	border-radius: 30px;
	z-index: 10;
	transform: translateY(100px) scale(0);
    transition: all .5s 1.5s;
	/*overflow: hidden;*/
}
.left--menu.on {
	transform: translateY(0px) scale(1);
}

.left--menu li a {
	cursor: pointer;
}

.tab--wrap {
    display: flex;
    align-items: center;
    justify-content: center;
	gap: 5px;
	margin-top: 16px;
}
.tab--wrap .tab {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: 1px;
	width: 80px;
	height: 32px;
    font-family: 'ONEMobilePOP';
	font-size: 20px;
	color: #756279;
	text-align: center;
	border-radius: 15px 15px 0 0;
	background: #bba2c1;
}
.tab--wrap .cont {
	display:none;
	position:absolute;
	top: 48px;
	left: 50%;
	transform: translateX(-50%); 
	width: 260px;
	height: 455px;
	background: #fff;
	border-radius: 17px;
}
.tab--wrap li.on .tab {
	color: #7f14cd;
	background: #fff;
}
.tab--wrap li.on .cont {
	display:block;
}
.lesson--tab {
	display: flex;
	align-items: center;
	justify-content: center;
    flex-direction: column;
    gap: 6px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	text-align: center;
}
.lesson--tab li {
	transform: scale(0.8) translateY(50px);
	transition: all .3s 1.7s ease-in;
	opacity: 0;
}
.lesson--tab li:nth-child(2) {
	transition-delay: 1.8s;
}
.lesson--tab li:nth-child(3) {
	transition-delay: 1.9s;
}
.lesson--tab li:nth-child(4) {
	transition-delay: 2.0s;
}
.lesson--tab li:nth-child(5) {
	transition-delay: 2.1s;
}
.lesson--tab li:nth-child(6) {
	transition-delay: 2.2s;
}
.lesson--tab li:nth-child(7) {
	transition-delay: 2.3s;
}
.lesson--tab li.on {
	transform: scale(1) translateY(0px);
	opacity: 1;
}
.lesson--tab li .tab--in {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 240px;
	height: 57px;
    font-family: 'ONEMobilePOP';
	font-size: 24px;
	color: #fff;
    background: url("../../img/main/english/lesson_off.png") no-repeat center / 100%;
	cursor: pointer;
}
.lesson--tab .tab--in.on, .lesson--tab .tab--in:hover {
    background: url("../../img/main/english/lesson_on.png") no-repeat center / 100%;
}
.tab--content {
	visibility: hidden;
	position: absolute;
    top: -50px;
    left: 290px;
	min-width: 460px;
	min-height: 495px;
	padding: 10px;
	border-radius: 30px;
    background: #fbebff;
	border: 10px solid #fff;
	transform: scale(0) translateY(10px);
	transition: all .3s ease-in;
}
.tab--content.on {
	visibility: visible;
	transform: scale(1) translateY(0px);
}
.tab--content > strong {
	display: block;
	padding: 25px 0;
    font-family: 'ONEMobilePOP';
	font-size: 34px;
	color: #202020;
	text-align: center;
	letter-spacing: 0.01em;
	text-shadow: 0px 3px 2px rgba(0, 0, 0, 0.2);
}
.tab--content .cont--list li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 15px;
	background: #8935c6;
	border: 2px solid #510c82;
	border-radius: 15px;
}
.tab--content .cont--list li:not(:last-child) {
	margin-bottom: 6px;
}
.tab--content .cont--list li span {
    font-family: 'ONEMobilePOP';
	font-size: 22px;
	color: #fff;
}
.tab--content .cont--list li .btn--wrap {
	display: flex;
	align-items: center;
	gap: 8px;
}
.tab--content .cont--list li .btn--wrap > div {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100px;
	height: 42px;
    font-family: 'ONEMobilePOP';
	font-size: 20px;
	text-align: center;
	border-radius: 50px;
	background: #fff;
	border: 2px solid #fff;
	transition: all .3s ease-in;
	cursor: pointer;
}
.tab--content .cont--list li .btn--wrap > div.btn--ebook {
	color: #4a9b16;
}
.tab--content .cont--list li .btn--wrap > div.btn--class {
	color: #f46600;
}
.tab--content .cont--list li .btn--wrap > div.btn--ebook:hover {
	border-color: #4a9b16;
}
.tab--content .cont--list li .btn--wrap > div.btn--class:hover {
	border-color: #f46600;
}

/* Bottom menu */
.bottom--menu {
	position: absolute;
	right: 52px;
	bottom: 70px;
	display: flex;
	gap: 15px;
}
.bottom--menu .menu {
	transform: scale(0.6) translateY(30px);
    transition: all .3s 2.2s ease-in;
    opacity: 0;
}
.bottom--menu .menu:nth-child(2) {
	transition-delay: 2.3s;
}
.bottom--menu .menu:nth-child(3) {
	transition-delay: 2.4s;
}
.bottom--menu .menu:nth-child(4) {
	transition-delay: 2.5s;
}
.bottom--menu.on .menu {
	transform: scale(1) translateY(0px);
    opacity: 1;
}
.bottom--menu .menu.m1 {
	position: relative;
	width: 330px;
	height: 66px;
    background: url("../../img/main/english/bottom_btn01.png") no-repeat center / 100%;
	cursor: default;
}
.bottom--menu .menu.m1 .flex {
	display: flex;
	align-items: center;
	gap: 8px;
	position: absolute;
    top: 50%;
    left: 112px;
    transform: translateY(-50%);
}
.bottom--menu .menu.m1 .flex input {
    width: 60px;
    height: 32px;
    padding: 0 6px;
    font-family: 'ONEMobilePOP';
    font-size: 22px;
	color: #202020;
    text-align: center;
	letter-spacing: 0.05em;
	border-radius: 5px;
    border: none;
}
.bottom--menu .menu.m1 .flex span {
    font-family: 'ONEMobilePOP';
    font-size: 22px;
	color: #fff;
	letter-spacing: 0.05em;
}
.bottom--menu .menu.m1 .btn--go {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
    top: 7px;
    right: 17px;
	width: 48px;
	height: 48px;
	border-radius: 50px;
	background: #fff;
    font-family: 'ONEMobilePOP';
    font-size: 22px;
	color: #7f14cd;
	text-align: center;
	cursor: pointer;
	line-height: normal;
}
.bottom--menu .menu.m2 {
	width: 164px;
	height: 66px;
    background: url("../../img/main/english/bottom_btn02.png") no-repeat center / 100%;
}
.bottom--menu .menu.m3 {
	width: 164px;
	height: 66px;
    background: url("../../img/main/english/bottom_btn03.png") no-repeat center / 100%;
}
/* ------------------------------------------------------------------------------------------------------------- */
/* skin */