.content_part{
	width: 100%;
	height: calc(875 / 1440 * 100vw);
	background-image:linear-gradient(0deg, #96d4df 0%, #7ab8c3 48%, #3b4c67 100%);
	
	/*background-image:*/
}

.content_part.twilight{
	background-image:linear-gradient(0deg, #e2a595 3%, #663c54 68%, #3b4c67 99%);
}

.content_part .island_part{
	width: 100%;
	height: 100%;

	position: absolute;
	top: 0;
	left: 0;
}
.content_part .island_part .island_wrap{
	width: 100%;
	height: 100%;

	position: relative;
}
.content_part .island_part .island_wrap .base{
	width: calc(994 / 1440 * 100vw);
	height: calc(740 / 1440 * 100vw);

	position: absolute;
	top: calc(185 / 1440 * 100vw);
	left: calc(205 / 1440 * 100vw);

	background-image: url("../img/bg/BG_01.png");
	background-size: 100% 100%;
	background-repeat: no-repeat;
}


.content_part .island_part .island_wrap .min_island{
	width: calc(110 / 1440 * 100vw);
	height: calc(105 / 1440 * 100vw);

	position: absolute;
	top: calc(690 / 1440 * 100vw);
	right: calc(168 / 1440 * 100vw);

	background-image: url("../img/bg/BG_02.png");
	background-size: 100% 100%;
	background-repeat: no-repeat;
}


.content_part .island_part .island_wrap .island_btn,
.content_part .island_part .island_wrap .organizer{
	background-size: 100% 100%;
	background-repeat: no-repeat;

	


    display: -webkit-flex; /* Safari */
    -webkit-justify-content: center; /* Safari 7.0+ */
    display: flex;
    justify-content: center;
}

.content_part .island_part .island_wrap .island_btn{
	cursor: pointer;
}

.content_part .island_part .island_wrap .about_btn{
	width: calc(235 / 1440 * 100vw);
	height: calc(175 / 1440 * 100vw);

	position: absolute;
	top:calc(80 / 1440 * 100vw);
	left: calc(620 / 1440 * 100vw);

	background: url("../img/bg/D-sprite.png") top center;
	background-size: 100% 2400%;

	animation: ani_home 4s steps(23) infinite;
}

@keyframes ani_home {
    0% { background-position: 0 2400%;}
    100% { background-position: 0 100%; }
}

.content_part .island_part .island_wrap .event_gallery_btn{
	width: calc(295 / 1440 * 100vw);
	height: calc(210 / 1440 * 100vw);

	position: absolute;
	top: calc(225 / 1440 * 100vw);
	left: calc(250 / 1440 * 100vw);

	background-image: url("../img/bg/E.png");

	/*z-index: 2;*/
}

.content_part .island_part .island_wrap .event_gallery_btn .clickable.a{
	position: absolute;
    bottom: calc(-20 / 1440 * 100vw);
    left: 0;
    width: calc(270 / 1440 * 100vw);
    height: calc(120 / 1440 * 100vw);
}

.content_part .island_part .island_wrap .event_gallery_btn .effect{
	width: calc(295 / 1440 * 100vw);
	height: calc(210 / 1440 * 100vw);

	position: absolute;
	top: 0;
	left: 0;

	background: url("../img/bg/E-sprite.png") top center;
	background-size: 100% 2400%;

	animation: ani_gallery_effect 2.5s steps(24) infinite;
}

.content_part .island_part .island_wrap .event_gallery_btn .slide_show{
	width: calc(123 / 1440 * 100vw);
	height: calc(83 / 1440 * 100vw);

	position: absolute;
	top: 23%;
    left: 27%;
}

.content_part .island_part .island_wrap .event_gallery_btn .slides_wrap{
	position: relative;
	height: 100%;
    width: 100%;

    /*background-color: rgba(0,0,0,0.5);*/
}

.content_part .island_part .island_wrap .event_gallery_btn .slides_wrap .slide_child{
	position: absolute;
	top: 0;
	height: 0;

	height: 100%;
    width: 100%;

    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;

    border-radius: 0 0 0 10px;

    display: none;
}

.content_part .island_part .island_wrap .event_gallery_btn .slides_wrap .slide_child:first-child{
	display: block;
}

.content_part .island_part .island_wrap .event_gallery_btn .event_gallery_btn_cover{
	width: calc(295 / 1440 * 100vw);
	height: calc(210 / 1440 * 100vw);

	position: absolute;
	top: 0;
	left: 0;

	background: url("../img/bg/E-b.png");
	background-size: 100% 100%;
}

@keyframes ani_gallery_effect {
    0% { background-position:    0 2400%; }
    100% { background-position: 0 0%; }
}

.content_part .island_part .island_wrap .student_corner_btn{
	width: calc(430 / 1440 * 100vw);
	height: calc(275 / 1440 * 100vw);

	position: absolute;
	top: calc(360 / 1440 * 100vw);
	left: calc(285 / 1440 * 100vw);

	background-image: url("../img/bg/A.png");

	z-index: 2;
}

.content_part .island_part .island_wrap .clickable_wrap{
	position: relative;
	width: 100%;
	height: 100%;
}

.content_part .island_part .island_wrap .student_corner_btn .clickable.a{
	position: absolute;
	bottom: calc(50 / 1440 * 100vw);
	left: 0;


	width: calc(400 / 1440 * 100vw);
	height: calc(120 / 1440 * 100vw);
}

.content_part .island_part .island_wrap .student_corner_btn .clickable.b{
	position: absolute;
    top: calc(20 / 1440 * 100vw);
    left: calc(220 / 1440 * 100vw);

    width: calc(80 / 1440 * 100vw);
    height: calc(120 / 1440 * 100vw);
}

.content_part .island_part .island_wrap .teacher_corner_btn{
	width: calc(370 / 1440 * 100vw);
	height: calc(275 / 1440 * 100vw);

	position: absolute;
	top: calc(170 / 1440 * 100vw);
	left: calc(870 / 1440 * 100vw);

	background: url("../img/bg/C-sprite.png") top center;
	background-size: 100% 1300%;

	animation: ani_tc 1.5s steps(13) infinite;
}

@keyframes ani_tc {
    0% { background-position: 0% 1300%; }
    100% { background-position: 0% 0%; }
}


.content_part .island_part .island_wrap .reward_btn{
	width: calc(325 / 1440 * 100vw);
	height: calc(185 / 1440 * 100vw);

	position: absolute;
	top: calc(505 / 1440 * 100vw);
	left: calc(570 / 1440 * 100vw);

	background-image: url("../img/bg/B.png");
}

.content_part .island_part .island_wrap .reward_btn .clickable.a{
	position: absolute;
    bottom: calc(40 / 1440 * 100vw);
    left: calc(80 / 1440 * 100vw);
    width: calc(120 / 1440 * 100vw);
    height: calc(80 / 1440 * 100vw);
}


.content_part .island_part .island_wrap .organizer{
	width: calc(170 / 1440 * 100vw);
	height: calc(180 / 1440 * 100vw);
	background-image: url("../img/bg/G.gif");


	position: absolute;
	top: calc(415 / 1440 * 100vw);
	left: calc(830 / 1440 * 100vw);

	/*cursor: pointer;*/

	/*width: calc(230 / 1440 * 100vw);
	height: calc(256 / 1440 * 100vw);
	background-image: url("../img/bg/G-hlaf.gif");*/
	

	/*cursor: auto;*/
}

.ggt_awrad_btn.hidden{
	display: none !important;
}

.content_part .island_part .island_wrap .ggt_awrad_btn{
	width: calc(122 / 1440 * 100vw);
    height: calc(180 / 1440 * 100vw);
    position: absolute;
    top: calc(120 / 1440 * 100vw);
    left: calc(1200 / 1440 * 100vw);
    z-index: 2;

    
}

.content_part .island_part .island_wrap .ggt_awrad_btn[lang="zh"]{
    background-image: url(../img/bg/H_c.png);
}

.content_part .island_part .island_wrap .ggt_awrad_btn[lang="en"]{
    background-image: url(../img/bg/H_e.png);
}


.content_part .island_part .island_wrap .news_btn{
	width: calc(245 / 1440 * 100vw);
	height: calc(165 / 1440 * 100vw);

	position: absolute;
	top: calc(65 / 1440 * 100vw);
	left: calc(140 / 1440 * 100vw);

	background: url("../img/bg/F-sprite.png") top center;
	background-size: 100% 1200%;

	animation: ani_news 1.5s steps(12) infinite;
}

@keyframes ani_news {
    0% { background-position: 0% 1200%; }
    100% { background-position: 0% 0%; }
}


.content_part .island_part .island_wrap .waterfall_animation_1{
	width: calc(159.6 / 1440 * 100vw);
	height: calc(157 / 1440 * 100vw);

	position: absolute;
	top: calc(500 / 1440 * 100vw);
	left: calc(213 / 1440 * 100vw);

	background: url("../img/bg/waterfall-1-sprite.png") top center;
	background-size: 100% 1900%;

	animation: ani_waterfall 2s steps(19) infinite;
}

@keyframes ani_waterfall {
    0% { background-position: 0% 1900%; }
    100% { background-position: 0% 0%; }
}

.content_part .island_part .island_wrap .waterfall_animation_2{
	width: calc(142.6 / 1440 * 100vw);
	height: calc(67.1 / 1440 * 100vw);

	position: absolute;
	top: calc(310 / 1440 * 100vw);
	left: calc(771 / 1440 * 100vw);

	background: url("../img/bg/waterfall-2-sprite.png") top center;
	background-size: 100% 2400%;

	animation: ani_lake 2s steps(24) infinite;
}

@keyframes ani_lake {
    0% { background-position: 0% 2400%; }
    100% { background-position: 0% 0%; }
}


/*
.content_part .island_part .island_wrap .island_btn .btn_text{
	-webkit-text-stroke: 1px #8b420d;
	-webkit-text-fill-color:#EFAF67;;
	font-family:HelveticaNeue-CondensedBlack;
	font-size:22px;
	letter-spacing:0;
	text-align:center;
	text-shadow:0 2px 2px rgba(0,0,0,0.50);

	position: absolute;
	bottom: -10px;
}*/

.content_part .island_part .island_wrap .island_btn .btn_text,
.content_part .island_part .island_wrap .btn_text{
	width: 130px;
    height: 75px;
    bottom: 0;
    position: absolute;
    bottom: -20px;
}

.content_part .island_part .island_wrap .island_btn .btn_text.about[lang="zh"]{
	background-image: url("../img/menu/chi/menu_01.svg");
	width: calc(815 / 1440 /6 * 100vw);
    height: calc(310 / 1440 /6 * 100vw);
}

.content_part .island_part .island_wrap .island_btn .btn_text.about[lang="en"]{
	background-image: url("../img/menu/eng/menu_01.svg");
	width: calc(815 / 1440 /6 * 100vw);
    height: calc(310 / 1440 /6 * 100vw);
}

.content_part .island_part .island_wrap .island_btn .btn_text.event[lang="zh"]{
	background-image: url("../img/menu/chi/menu_02.svg");
	width: calc(815 / 1440 /6 * 100vw);
    height: calc(310 / 1440 /6 * 100vw);
}

.content_part .island_part .island_wrap .island_btn .btn_text.event[lang="en"]{
	background-image: url("../img/menu/eng/menu_02.svg");
	width: calc(1600 / 1440 /6 * 100vw);
    height: calc(310 / 1440 /6 * 100vw);
}

.content_part .island_part .island_wrap .island_btn .btn_text.student[lang="zh"]{
	background-image: url("../img/menu/chi/menu_03.svg");
	width: calc(815 / 1440 /6 * 100vw);
    height: calc(310 / 1440 /6 * 100vw);
   	bottom: 25px;
    right: 70px;
}

.content_part .island_part .island_wrap .island_btn .btn_text.student[lang="en"]{
	background-image: url("../img/menu/eng/menu_03.svg");
	width: calc(1265 / 1440 /6 * 100vw);
    height: calc(310 / 1440 /6 * 100vw);
    bottom: 25px;
    right: 45px;
}

.content_part .island_part .island_wrap .island_btn .btn_text.reward[lang="zh"]{
	background-image: url("../img/menu/chi/menu_04.svg");
	width: calc(450 / 1440 /6 * 100vw);
    height: calc(310 / 1440 /6 * 100vw);
    left: 20px;
    bottom: 0;
}

.content_part .island_part .island_wrap .island_btn .btn_text.reward[lang="en"]{
	background-image: url("../img/menu/eng/menu_04.svg");
	width: calc(810 / 1440 /6 * 100vw);
    height: calc(310 / 1440 /6 * 100vw);
    left: 0;
    bottom: 0;
}

.content_part .island_part .island_wrap .island_btn .btn_text.teacher[lang="zh"]{
	background-image: url("../img/menu/chi/menu_05.svg");
	width: calc(815 / 1440 /6 * 100vw);
    height: calc(310 / 1440 /6 * 100vw);
    right: 60px;
}

.content_part .island_part .island_wrap .island_btn .btn_text.teacher[lang="en"]{
	background-image: url("../img/menu/eng/menu_05.svg");
	width: calc(1280 / 1440 /6 * 100vw);
    height: calc(310 / 1440 /6 * 100vw);
    right: 30px;
}

.content_part .island_part .island_wrap .btn_text.resource[lang="zh"]{
	background-image: url("../img/menu/chi/menu_06.svg");
	width: calc(815 / 1440 /6 * 100vw);
    height: calc(310 / 1440 /6 * 100vw);
    right: 10px;
}

.content_part .island_part .island_wrap .btn_text.resource[lang="en"]{
	background-image: url("../img/menu/eng/menu_06.svg");
	width: calc(1280 / 1440 /6 * 100vw);
    height: calc(310 / 1440 /6 * 100vw);
    left: -10px;
}


.content_part .island_part .island_wrap .btn_text.ggt_awrad[lang="zh"]{
	/* background-image: url(../img/menu/chi/menu_07.svg?v=1.1); */
	background-image: url(../img/menu/chi/menu_07_GGT_STEM_Competition_2020.svg?v=1.1);
    width: calc(1800 / 1440 /6 * 100vw);
    height: calc(370 / 1440 /6 * 100vw);
    bottom: calc(410 / 1440 /6 * 100vw * -1);
    bottom: calc(290 / 1440 /6 * 100vw * -1);
}

.content_part .island_part .island_wrap .btn_text.ggt_awrad[lang="en"]{
	/* background-image: url(../img/menu/eng/menu_07.svg?v=1.1); */
	background-image: url(../img/menu/eng/menu_07_GGT_STEM_Competition_2020.svg?v=1.1);
    width: calc(1800 / 1440 /6 * 100vw);
    height: calc(400 / 1440 /6 * 100vw);
    bottom: calc(450 / 1440 /6 * 100vw * -1 );
    bottom: calc(290 / 1440 /6 * 100vw * -1 );
}


.content_part .cloud_container{

}

.content_part .cloud_container .cloud{
	background-size: 100% 100%;
	background-repeat: no-repeat;

	cursor: pointer;

	position: absolute;
}

.content_part .cloud_container .cloud1{
	width: calc(150 / 1440 * 100vw);
	height: calc(75 / 1440 * 100vw);

	top: calc(330 / 1440 * 100vw);
	left: calc(40 / 1440 * 100vw);

	background-image: url("../img/bg/img_bg_cloud2.png");
}

.content_part .cloud_container .cloud2{
	width: calc(140 / 1440 * 100vw);
	height: calc(70 / 1440 * 100vw);

	top: calc(140 / 1440 * 100vw);
	right: calc(50 / 1440 * 100vw);

	background-image: url("../img/bg/img_bg_cloud1.png");
}

.content_part .cloud_container .cloud3{
	width: calc(205 / 1440 * 100vw);
	height: calc(105 / 1440 * 100vw);

	top: calc(235 / 1440 * 100vw);
	right: calc(120 / 1440 * 100vw);

	background-image: url("../img/bg/img_bg_cloud3.png");
}

.content_part .cloud_container .cloud4{
	width: calc(115 / 1440 * 100vw);
	height: calc(60 / 1440 * 100vw);

	top: calc(165 / 1440 * 100vw);
	left: calc(90 / 1440 * 100vw);

	background-image: url("../img/bg/img_bg_cloud4.png");
}

.content_part .island_part .character{
	background-size: 100% 100%;
	background-repeat: no-repeat;
	position: absolute;
	bottom: calc(70 / 1440 * 100vw); 
}

.content_part .island_part .character.c1{
	width: calc(140 / 1440 * 100vw);
	height: calc(270 / 1440 * 100vw);

	left: calc(0 / 1440 * 100vw);
	left: calc(-25 / 1440 * 100vw);
}

.content_part .island_part .character.c2{
	width: calc(120 / 1440 * 100vw);
	height: calc(270 / 1440 * 100vw);

	left: calc(0 / 1440 * 100vw);
}

.content_part .island_part .character.c3{
	width: calc(125 / 1440 * 100vw);
	height: calc(235 / 1440 * 100vw);

	bottom: calc(20 / 1440 * 100vw); 
	left: calc(-25 / 1440 * 100vw);
}

.logo_banner{
	width: 100%;
	height: 100px;

	position: absolute;
	bottom: -10px;

	background-color: rgba(255, 255, 255, 0.9);

	font-size:10px;
	color:#3eb2e1;
	letter-spacing:0;
	line-height:12px;
	text-align:left;

	display: -webkit-flex; /* Safari */
    -webkit-align-items: center; /* Safari 7.0+ */
    -webkit-justify-content: center; /* Safari 7.0+ */
    display: flex;
    align-items: center;
    justify-content: center;
	flex-wrap: wrap;

}

.logo_wrap{
	flex-wrap: wrap;
	height: 100%;
}

.logo_wrap.left{
	width: 25%;
	float: left;
	margin-right: 10px;

	display: -webkit-flex; /* Safari */
	-webkit-align-items: center; /* Safari 7.0+ */
	-webkit-justify-content: flex-end; /* Safari 7.0+ */
	display: flex;
	align-items: center;
	justify-content: flex-end;
	min-width: 280px;
}

.logo_wrap.left[lang="en"]{
	width: 25%;
	min-width: 350px;
}

.m_wrap{
	height: 100%;
	width: 90%;
	display: -webkit-flex; /* Safari */
	-webkit-align-items: center; /* Safari 7.0+ */
	-webkit-justify-content: flex-end; /* Safari 7.0+ */
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.logo_wrap.right{
	width: 60%;
}

.sponsor_text{
	display: inline-block;
}

.logo{
	width: auto;
	margin: 0 10px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position:  center  ;
	height: 50px;    
	width: 45px;
	display: -webkit-flex; /* Safari */
	-webkit-align-items: center; /* Safari 7.0+ */
	-webkit-justify-content: center; /* Safari 7.0+ */
	display: flex;
	align-items: center;
	justify-content: center;
}

.associate_logo{
	width: auto;
	margin: 0 10px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	height: 60%;
    width: 25%;
	display: -webkit-flex; /* Safari */
	-webkit-align-items: center; /* Safari 7.0+ */
	-webkit-justify-content: center; /* Safari 7.0+ */
	display: flex;
	align-items: center;
	justify-content: center;
}

/* .associate_logo_1{ */
	/* height: 60%; */
    /* width: 25%; */
/* } */
/*
@media only screen and (max-width: 950px) {
	.logo{
		height: 20%;
	}
}
@media only screen and (max-device-width: 950px) {
	.logo{
		height: 20%;
	}
}*/

.long_logo{
	height: 50px;    
	width: 60px;
}

.very_long_logo{
	height: 50px;    
	width: 80px;
}
/*@media only screen and (max-width: 950px) {
	.long_logo{
		height: 10%;
	}
}
@media only screen and (max-device-width: 950px) {
	.long_logo{
		height: 10%;
	}
}*/

.short_logo{
	height: 50px;
    width: 40px;
}

.very_short_logo{
	height: 50px;
    width: 20px;
}
/*@media only screen and (max-width: 950px) {
	.short_logo{
		height: 14%;
	}
}
@media only screen and (max-device-width: 950px) {
	.short_logo{
		height: 14%;
	}
}
*/

.mutiply_logo{
	mix-blend-mode: multiply;
}

.buckets {
    position: absolute;
    top: 10px;
    width: calc(120 / 1440 *s100vw);
    height: calc(120 / 1440 * 100vw);
    border-radius: 50%;
    z-index: 1;
   
    box-sizing: border-box;
}

.buckets div {
    position: absolute;
    animation: bucket_rotate 14s infinite linear;
    top: 50%;
    left: 50%;
    margin-top: calc(-15 / 1440 * 100vw);
    margin-left: calc(-45 / 1440 * 100vw);
    box-sizing: border-box;
}
.buckets span {
    display: inline-block;
    height: 0;
    width: 20px;
    position: relative;

    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: calc(81 / 1440 * 100vw);
    height: calc(27 / 1440 * 100vw);
}
.buckets div:nth-child(1) span {
    background-image: url(../img/ferris_wheel/aitle.png);
    width: calc(80 / 1440 * 100vw);
    cursor: pointer;
}
.buckets div:nth-child(2) span {
    background-image: url(../img/ferris_wheel/google.png);
    width: calc(80 / 1440 * 100vw);
    cursor: pointer;
}
.buckets div:nth-child(3) span {
    background-image: url(../img/ferris_wheel/octopus_s_logo.png);
    cursor: pointer;
}
.buckets div:nth-child(4) span {
    background-image: url(../img/ferris_wheel/HKACE.png);
    background-color: white;
    cursor: pointer;
}
.buckets div:nth-child(5) span {
    background-image: url(../img/ferris_wheel/classroom_s_logo.png);
    cursor: pointer;
}
.buckets div:nth-child(6) span {
    background-image: url(../img/ferris_wheel/bloomberg_s_logo.png);
    cursor: pointer;
}
.buckets div:nth-child(7) span {
    background-image: url(../img/ferris_wheel/microsoft.png);
    cursor: pointer;
}
.buckets div:nth-child(8) span {
		background-image: url(../img/ferris_wheel/hkt.png);
		cursor: pointer;
}

@keyframes bucket_rotate {
    0% {
        /*transform: rotate(360deg) translateX(45px) rotate(-360deg);*/
        transform: rotate(360deg) translateX(calc(65 / 1440 * 100vw)) rotate(-360deg);
    }
    100% {
        /*transform: rotate(0) translateX(45px) rotate(0);*/
        transform: rotate(0) translateX(calc(65 / 1440 * 100vw)) rotate(0);
    }
}

.buckets div:nth-child(2) {
    animation-delay: -1.7s;
}

.buckets div:nth-child(3) {
    animation-delay: -3.4s;
}

.buckets div:nth-child(4) {
    animation-delay: -5.1s;
}

.buckets div:nth-child(5) {
    animation-delay: -6.8s;
}

.buckets div:nth-child(6) {
    animation-delay: -8.5s;
}

.buckets div:nth-child(7) {
    animation-delay: -10.2s;
}
.buckets div:nth-child(8) {
    animation-delay: -12s;
}

.clickable{
	z-index: 5;
}

@media screen and (aspect-ratio: 16/10) {
	.content_part{
		width: 100%;
		height: calc(875 / 1600 * 100vw);
		background-image:linear-gradient(0deg, #96d4df 0%, #7ab8c3 48%, #3b4c67 100%);
		
		/*background-image:*/
	}

	.content_part.twilight{
		background-image:linear-gradient(0deg, #e2a595 3%, #663c54 68%, #3b4c67 99%);
	}

	.content_part .island_part{
		width: 100%;
		height: 100%;

		position: absolute;
		top: 0;
		left: 0;
		
		width: calc(1440 / 1600 * 100vw);
		height: calc(875 / 1600 * 100vw);
		left: calc((100% - (1440 / 1600 * 100vw)) / 2);
	}
	.content_part .island_part .island_wrap{
		width: 100%;
		height: 100%;

		position: relative;
	}
	.content_part .island_part .island_wrap .base{
		width: calc(994 / 1600 * 100vw);
		height: calc(740 / 1600 * 100vw);

		position: absolute;
		top: calc(185 / 1600 * 100vw);
		left: calc(205 / 1600 * 100vw);

		background-image: url("../img/bg/BG_01.png");
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}


	.content_part .island_part .island_wrap .min_island{
		width: calc(110 / 1600 * 100vw);
		height: calc(105 / 1600 * 100vw);

		position: absolute;
		top: calc(690 / 1600 * 100vw);
		right: calc(168 / 1600 * 100vw);

		background-image: url("../img/bg/BG_02.png");
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}


	.content_part .island_part .island_wrap .island_btn,
	.content_part .island_part .island_wrap .organizer{
		background-size: 100% 100%;
		background-repeat: no-repeat;

		


		display: -webkit-flex; /* Safari */
		-webkit-justify-content: center; /* Safari 7.0+ */
		display: flex;
		justify-content: center;
	}

	.content_part .island_part .island_wrap .island_btn{
		cursor: pointer;
	}

	.content_part .island_part .island_wrap .about_btn{
		width: calc(235 / 1600 * 100vw);
		height: calc(175 / 1600 * 100vw);

		position: absolute;
		top:calc(80 / 1600 * 100vw);
		left: calc(620 / 1600 * 100vw);

		background: url("../img/bg/D-sprite.png") top center;
		background-size: 100% 2400%;

		animation: ani_home 4s steps(23) infinite;
	}

	@keyframes ani_home {
		0% { background-position: 0 2400%;}
		100% { background-position: 0 100%; }
	}

	.content_part .island_part .island_wrap .event_gallery_btn{
		width: calc(295 / 1600 * 100vw);
		height: calc(210 / 1600 * 100vw);

		position: absolute;
		top: calc(225 / 1600 * 100vw);
		left: calc(250 / 1600 * 100vw);

		background-image: url("../img/bg/E.png");

		/*z-index: 2;*/
	}

	.content_part .island_part .island_wrap .event_gallery_btn .clickable.a{
		position: absolute;
		bottom: calc(-20 / 1600 * 100vw);
		left: 0;
		width: calc(270 / 1600 * 100vw);
		height: calc(120 / 1600 * 100vw);
	}

	.content_part .island_part .island_wrap .event_gallery_btn .effect{
		width: calc(295 / 1600 * 100vw);
		height: calc(210 / 1600 * 100vw);

		position: absolute;
		top: 0;
		left: 0;

		background: url("../img/bg/E-sprite.png") top center;
		background-size: 100% 2400%;

		animation: ani_gallery_effect 2.5s steps(24) infinite;
	}

	.content_part .island_part .island_wrap .event_gallery_btn .slide_show{
		width: calc(123 / 1600 * 100vw);
		height: calc(83 / 1600 * 100vw);

		position: absolute;
		top: 23%;
		left: 27%;
	}

	.content_part .island_part .island_wrap .event_gallery_btn .slides_wrap{
		position: relative;
		height: 100%;
		width: 100%;

		/*background-color: rgba(0,0,0,0.5);*/
	}

	.content_part .island_part .island_wrap .event_gallery_btn .slides_wrap .slide_child{
		position: absolute;
		top: 0;
		height: 0;

		height: 100%;
		width: 100%;

		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;

		border-radius: 0 0 0 10px;

		display: none;
	}

	.content_part .island_part .island_wrap .event_gallery_btn .slides_wrap .slide_child:first-child{
		display: block;
	}

	.content_part .island_part .island_wrap .event_gallery_btn .event_gallery_btn_cover{
		width: calc(295 / 1600 * 100vw);
		height: calc(210 / 1600 * 100vw);

		position: absolute;
		top: 0;
		left: 0;

		background: url("../img/bg/E-b.png");
		background-size: 100% 100%;
	}

	@keyframes ani_gallery_effect {
		0% { background-position:    0 2400%; }
		100% { background-position: 0 0%; }
	}

	.content_part .island_part .island_wrap .student_corner_btn{
		width: calc(430 / 1600 * 100vw);
		height: calc(275 / 1600 * 100vw);

		position: absolute;
		top: calc(360 / 1600 * 100vw);
		left: calc(285 / 1600 * 100vw);

		background-image: url("../img/bg/A.png");

		z-index: 2;
	}

	.content_part .island_part .island_wrap .clickable_wrap{
		position: relative;
		width: 100%;
		height: 100%;
	}

	.content_part .island_part .island_wrap .student_corner_btn .clickable.a{
		position: absolute;
		bottom: calc(50 / 1600 * 100vw);
		left: 0;


		width: calc(400 / 1600 * 100vw);
		height: calc(120 / 1600 * 100vw);
	}

	.content_part .island_part .island_wrap .student_corner_btn .clickable.b{
		position: absolute;
		top: calc(20 / 1600 * 100vw);
		left: calc(220 / 1600 * 100vw);

		width: calc(80 / 1600 * 100vw);
		height: calc(120 / 1600 * 100vw);
	}

	.content_part .island_part .island_wrap .teacher_corner_btn{
		width: calc(370 / 1600 * 100vw);
		height: calc(275 / 1600 * 100vw);

		position: absolute;
		top: calc(170 / 1600 * 100vw);
		left: calc(870 / 1600 * 100vw);

		background: url("../img/bg/C-sprite.png") top center;
		background-size: 100% 1300%;

		animation: ani_tc 1.5s steps(13) infinite;
	}

	@keyframes ani_tc {
		0% { background-position: 0% 1300%; }
		100% { background-position: 0% 0%; }
	}


	.content_part .island_part .island_wrap .reward_btn{
		width: calc(325 / 1600 * 100vw);
		height: calc(185 / 1600 * 100vw);

		position: absolute;
		top: calc(505 / 1600 * 100vw);
		left: calc(570 / 1600 * 100vw);

		background-image: url("../img/bg/B.png");
	}

	.content_part .island_part .island_wrap .reward_btn .clickable.a{
		position: absolute;
		bottom: calc(40 / 1600 * 100vw);
		left: calc(80 / 1600 * 100vw);
		width: calc(120 / 1600 * 100vw);
		height: calc(80 / 1600 * 100vw);
	}


	.content_part .island_part .island_wrap .organizer{
		width: calc(170 / 1600 * 100vw);
		height: calc(180 / 1600 * 100vw);
		background-image: url("../img/bg/G.gif");


		position: absolute;
		top: calc(415 / 1600 * 100vw);
		left: calc(830 / 1600 * 100vw);

		/*cursor: pointer;*/

		/*width: calc(230 / 1600 * 100vw);
		height: calc(256 / 1600 * 100vw);
		background-image: url("../img/bg/G-hlaf.gif");*/
		

		/*cursor: auto;*/
	}

	.content_part .island_part .island_wrap .ggt_awrad_btn{
		width: calc(122 / 1440 * 100vw);
    	height: calc(180 / 1440 * 100vw);
	    position: absolute;
	    top: calc(120 / 1600 * 100vw);
	    left: calc(1200 / 1600 * 100vw);
	    z-index: 2;
	}


	.content_part .island_part .island_wrap .news_btn{
		width: calc(245 / 1600 * 100vw);
		height: calc(165 / 1600 * 100vw);

		position: absolute;
		top: calc(65 / 1600 * 100vw);
		left: calc(140 / 1600 * 100vw);

		background: url("../img/bg/F-sprite.png") top center;
		background-size: 100% 1200%;

		animation: ani_news 1.5s steps(12) infinite;
	}

	@keyframes ani_news {
		0% { background-position: 0% 1200%; }
		100% { background-position: 0% 0%; }
	}


	.content_part .island_part .island_wrap .waterfall_animation_1{
		width: calc(159.6 / 1600 * 100vw);
		height: calc(157 / 1600 * 100vw);

		position: absolute;
		top: calc(500 / 1600 * 100vw);
		left: calc(213 / 1600 * 100vw);

		background: url("../img/bg/waterfall-1-sprite.png") top center;
		background-size: 100% 1900%;

		animation: ani_waterfall 2s steps(19) infinite;
	}

	@keyframes ani_waterfall {
		0% { background-position: 0% 1900%; }
		100% { background-position: 0% 0%; }
	}

	.content_part .island_part .island_wrap .waterfall_animation_2{
		width: calc(142.6 / 1600 * 100vw);
		height: calc(67.1 / 1600 * 100vw);

		position: absolute;
		top: calc(310 / 1600 * 100vw);
		left: calc(771 / 1600 * 100vw);

		background: url("../img/bg/waterfall-2-sprite.png") top center;
		background-size: 100% 2400%;

		animation: ani_lake 2s steps(24) infinite;
	}

	@keyframes ani_lake {
		0% { background-position: 0% 2400%; }
		100% { background-position: 0% 0%; }
	}


	/*
	.content_part .island_part .island_wrap .island_btn .btn_text{
		-webkit-text-stroke: 1px #8b420d;
		-webkit-text-fill-color:#EFAF67;;
		font-family:HelveticaNeue-CondensedBlack;
		font-size:22px;
		letter-spacing:0;
		text-align:center;
		text-shadow:0 2px 2px rgba(0,0,0,0.50);

		position: absolute;
		bottom: -10px;
	}*/

	.content_part .island_part .island_wrap .island_btn .btn_text,
	.content_part .island_part .island_wrap .btn_text{
		width: 130px;
		height: 75px;
		bottom: 0;
		position: absolute;
		bottom: -20px;
	}

	.content_part .island_part .island_wrap .island_btn .btn_text.about[lang="zh"]{
		background-image: url("../img/menu/chi/menu_01.svg");
		width: calc(815 / 1440 /6 * 100vw);
		height: calc(310 / 1440 /6 * 100vw);
	}

	.content_part .island_part .island_wrap .island_btn .btn_text.about[lang="en"]{
		background-image: url("../img/menu/eng/menu_01.svg");
		width: calc(815 / 1440 /6 * 100vw);
		height: calc(310 / 1440 /6 * 100vw);
	}

	.content_part .island_part .island_wrap .island_btn .btn_text.event[lang="zh"]{
		background-image: url("../img/menu/chi/menu_02.svg");
		width: calc(815 / 1440 /6 * 100vw);
		height: calc(310 / 1440 /6 * 100vw);
	}

	.content_part .island_part .island_wrap .island_btn .btn_text.event[lang="en"]{
		background-image: url("../img/menu/eng/menu_02.svg");
		width: calc(1600 / 1440 /6 * 100vw);
		height: calc(310 / 1440 /6 * 100vw);
	}

	.content_part .island_part .island_wrap .island_btn .btn_text.student[lang="zh"]{
		background-image: url("../img/menu/chi/menu_03.svg");
		width: calc(815 / 1440 /6 * 100vw);
		height: calc(310 / 1440 /6 * 100vw);
		bottom: 25px;
		right: 70px;
	}

	.content_part .island_part .island_wrap .island_btn .btn_text.student[lang="en"]{
		background-image: url("../img/menu/eng/menu_03.svg");
		width: calc(1265 / 1440 /6 * 100vw);
		height: calc(310 / 1440 /6 * 100vw);
		bottom: 25px;
		right: 45px;
	}

	.content_part .island_part .island_wrap .island_btn .btn_text.reward[lang="zh"]{
		background-image: url("../img/menu/chi/menu_04.svg");
		width: calc(450 / 1440 /6 * 100vw);
		height: calc(310 / 1440 /6 * 100vw);
		left: 20px;
		bottom: 0;
	}

	.content_part .island_part .island_wrap .island_btn .btn_text.reward[lang="en"]{
		background-image: url("../img/menu/eng/menu_04.svg");
		width: calc(810 / 1440 /6 * 100vw);
		height: calc(310 / 1440 /6 * 100vw);
		left: 0;
		bottom: 0;
	}

	.content_part .island_part .island_wrap .island_btn .btn_text.teacher[lang="zh"]{
		background-image: url("../img/menu/chi/menu_05.svg");
		width: calc(815 / 1440 /6 * 100vw);
		height: calc(310 / 1440 /6 * 100vw);
		right: 60px;
	}

	.content_part .island_part .island_wrap .island_btn .btn_text.teacher[lang="en"]{
		background-image: url("../img/menu/eng/menu_05.svg");
		width: calc(1280 / 1440 /6 * 100vw);
		height: calc(310 / 1440 /6 * 100vw);
		right: 30px;
	}

	.content_part .island_part .island_wrap .btn_text.resource[lang="zh"]{
		background-image: url("../img/menu/chi/menu_06.svg");
		width: calc(815 / 1440 /6 * 100vw);
		height: calc(310 / 1440 /6 * 100vw);
		right: 10px;
	}

	.content_part .island_part .island_wrap .btn_text.resource[lang="en"]{
		background-image: url("../img/menu/eng/menu_06.svg");
		width: calc(1280 / 1440 /6 * 100vw);
		height: calc(310 / 1440 /6 * 100vw);
		left: -10px;
	}

	.content_part .cloud_container{

	}

	.content_part .cloud_container .cloud{
		background-size: 100% 100%;
		background-repeat: no-repeat;

		cursor: pointer;

		position: absolute;
	}

	.content_part .cloud_container .cloud1{
		width: calc(150 / 1600 * 100vw);
		height: calc(75 / 1600 * 100vw);

		top: calc(330 / 1600 * 100vw);
		left: calc(40 / 1600 * 100vw);

		background-image: url("../img/bg/img_bg_cloud2.png");
	}

	.content_part .cloud_container .cloud2{
		width: calc(140 / 1600 * 100vw);
		height: calc(70 / 1600 * 100vw);

		top: calc(140 / 1600 * 100vw);
		right: calc(50 / 1600 * 100vw);

		background-image: url("../img/bg/img_bg_cloud1.png");
	}

	.content_part .cloud_container .cloud3{
		width: calc(205 / 1600 * 100vw);
		height: calc(105 / 1600 * 100vw);

		top: calc(235 / 1600 * 100vw);
		right: calc(120 / 1600 * 100vw);

		background-image: url("../img/bg/img_bg_cloud3.png");
	}

	.content_part .cloud_container .cloud4{
		width: calc(115 / 1600 * 100vw);
		height: calc(60 / 1600 * 100vw);

		top: calc(165 / 1600 * 100vw);
		left: calc(90 / 1600 * 100vw);

		background-image: url("../img/bg/img_bg_cloud4.png");
	}

	.content_part .island_part .character{
		background-size: 100% 100%;
		background-repeat: no-repeat;
		position: absolute;
		bottom: calc(70 / 1600 * 100vw); 
	}

	.content_part .island_part .character.c1{
		width: calc(140 / 1600 * 100vw);
		height: calc(270 / 1600 * 100vw);

		left: calc(0 / 1600 * 100vw);
		left: calc(-25 / 1600 * 100vw);
	}

	.content_part .island_part .character.c2{
		width: calc(120 / 1600 * 100vw);
		height: calc(270 / 1600 * 100vw);

		left: calc(0 / 1600 * 100vw);
	}

	.content_part .island_part .character.c3{
		width: calc(125 / 1600 * 100vw);
		height: calc(235 / 1600 * 100vw);

		bottom: calc(20 / 1600 * 100vw); 
		left: calc(-25 / 1600 * 100vw);
	}

	.mutiply_logo{
		mix-blend-mode: multiply;
	}

	.buckets {
		position: absolute;
		top: 10px;
		width: calc(120 / 1440 *s100vw);
		height: calc(120 / 1600 * 100vw);
		border-radius: 50%;
		z-index: 1;
	   
		box-sizing: border-box;
	}

	.buckets div {
		position: absolute;
		animation: bucket_rotate 14s infinite linear;
		top: 50%;
		left: 50%;
		margin-top: calc(-15 / 1600 * 100vw);
		margin-left: calc(-45 / 1600 * 100vw);
		box-sizing: border-box;
	}
	.buckets span {
		display: inline-block;
		height: 0;
		width: 20px;
		position: relative;

		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		width: calc(90 / 1600 * 100vw);
		height: calc(30 / 1600 * 100vw);
	}

	.clickable{
		z-index: 5;
	}
}
@media screen and (aspect-ratio: 16/9) {
	.content_part{
		width: 100%;
		height: calc(875 / 1920 * 100vw);
		background-image:linear-gradient(0deg, #96d4df 0%, #7ab8c3 48%, #3b4c67 100%);
		
		/*background-image:*/
	}

	.content_part.twilight{
		background-image:linear-gradient(0deg, #e2a595 3%, #663c54 68%, #3b4c67 99%);
	}

	.content_part .island_part{
		width: 100%;
		height: 100%;

		position: absolute;
		top: 0;
		left: 0;
		
		width: calc(1440 / 1920 * 100vw);
		height: calc(875 / 1920 * 100vw);
		left: calc((100% - (1440 / 1920 * 100vw)) / 2);
	}
	.content_part .island_part .island_wrap{
		width: 100%;
		height: 100%;

		position: relative;
	}
	.content_part .island_part .island_wrap .base{
		width: calc(994 / 1920 * 100vw);
		height: calc(740 / 1920 * 100vw);

		position: absolute;
		top: calc(185 / 1920 * 100vw);
		left: calc(205 / 1920 * 100vw);

		background-image: url("../img/bg/BG_01.png");
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}


	.content_part .island_part .island_wrap .min_island{
		width: calc(110 / 1920 * 100vw);
		height: calc(105 / 1920 * 100vw);

		position: absolute;
		top: calc(690 / 1920 * 100vw);
		right: calc(168 / 1920 * 100vw);

		background-image: url("../img/bg/BG_02.png");
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}


	.content_part .island_part .island_wrap .island_btn,
	.content_part .island_part .island_wrap .organizer{
		background-size: 100% 100%;
		background-repeat: no-repeat;

		


		display: -webkit-flex; /* Safari */
		-webkit-justify-content: center; /* Safari 7.0+ */
		display: flex;
		justify-content: center;
	}

	.content_part .island_part .island_wrap .island_btn{
		cursor: pointer;
	}

	.content_part .island_part .island_wrap .about_btn{
		width: calc(235 / 1920 * 100vw);
		height: calc(175 / 1920 * 100vw);

		position: absolute;
		top:calc(80 / 1920 * 100vw);
		left: calc(620 / 1920 * 100vw);

		background: url("../img/bg/D-sprite.png") top center;
		background-size: 100% 2400%;

		animation: ani_home 4s steps(23) infinite;
	}

	@keyframes ani_home {
		0% { background-position: 0 2400%;}
		100% { background-position: 0 100%; }
	}

	.content_part .island_part .island_wrap .event_gallery_btn{
		width: calc(295 / 1920 * 100vw);
		height: calc(210 / 1920 * 100vw);

		position: absolute;
		top: calc(225 / 1920 * 100vw);
		left: calc(250 / 1920 * 100vw);

		background-image: url("../img/bg/E.png");

		/*z-index: 2;*/
	}

	.content_part .island_part .island_wrap .event_gallery_btn .clickable.a{
		position: absolute;
		bottom: calc(-20 / 1920 * 100vw);
		left: 0;
		width: calc(270 / 1920 * 100vw);
		height: calc(120 / 1920 * 100vw);
	}

	.content_part .island_part .island_wrap .event_gallery_btn .effect{
		width: calc(295 / 1920 * 100vw);
		height: calc(210 / 1920 * 100vw);

		position: absolute;
		top: 0;
		left: 0;

		background: url("../img/bg/E-sprite.png") top center;
		background-size: 100% 2400%;

		animation: ani_gallery_effect 2.5s steps(24) infinite;
	}

	.content_part .island_part .island_wrap .event_gallery_btn .slide_show{
		width: calc(123 / 1920 * 100vw);
		height: calc(83 / 1920 * 100vw);

		position: absolute;
		top: 23%;
		left: 27%;
	}

	.content_part .island_part .island_wrap .event_gallery_btn .slides_wrap{
		position: relative;
		height: 100%;
		width: 100%;

		/*background-color: rgba(0,0,0,0.5);*/
	}

	.content_part .island_part .island_wrap .event_gallery_btn .slides_wrap .slide_child{
		position: absolute;
		top: 0;
		height: 0;

		height: 100%;
		width: 100%;

		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;

		border-radius: 0 0 0 10px;

		display: none;
	}

	.content_part .island_part .island_wrap .event_gallery_btn .slides_wrap .slide_child:first-child{
		display: block;
	}

	.content_part .island_part .island_wrap .event_gallery_btn .event_gallery_btn_cover{
		width: calc(295 / 1920 * 100vw);
		height: calc(210 / 1920 * 100vw);

		position: absolute;
		top: 0;
		left: 0;

		background: url("../img/bg/E-b.png");
		background-size: 100% 100%;
	}

	@keyframes ani_gallery_effect {
		0% { background-position:    0 2400%; }
		100% { background-position: 0 0%; }
	}

	.content_part .island_part .island_wrap .student_corner_btn{
		width: calc(430 / 1920 * 100vw);
		height: calc(275 / 1920 * 100vw);

		position: absolute;
		top: calc(360 / 1920 * 100vw);
		left: calc(285 / 1920 * 100vw);

		background-image: url("../img/bg/A.png");

		z-index: 2;
	}

	.content_part .island_part .island_wrap .clickable_wrap{
		position: relative;
		width: 100%;
		height: 100%;
	}

	.content_part .island_part .island_wrap .student_corner_btn .clickable.a{
		position: absolute;
		bottom: calc(50 / 1920 * 100vw);
		left: 0;


		width: calc(400 / 1920 * 100vw);
		height: calc(120 / 1920 * 100vw);
	}

	.content_part .island_part .island_wrap .student_corner_btn .clickable.b{
		position: absolute;
		top: calc(20 / 1920 * 100vw);
		left: calc(220 / 1920 * 100vw);

		width: calc(80 / 1920 * 100vw);
		height: calc(120 / 1920 * 100vw);
	}

	.content_part .island_part .island_wrap .teacher_corner_btn{
		width: calc(370 / 1920 * 100vw);
		height: calc(275 / 1920 * 100vw);

		position: absolute;
		top: calc(170 / 1920 * 100vw);
		left: calc(870 / 1920 * 100vw);

		background: url("../img/bg/C-sprite.png") top center;
		background-size: 100% 1300%;

		animation: ani_tc 1.5s steps(13) infinite;
	}

	@keyframes ani_tc {
		0% { background-position: 0% 1300%; }
		100% { background-position: 0% 0%; }
	}


	.content_part .island_part .island_wrap .reward_btn{
		width: calc(325 / 1920 * 100vw);
		height: calc(185 / 1920 * 100vw);

		position: absolute;
		top: calc(505 / 1920 * 100vw);
		left: calc(570 / 1920 * 100vw);

		background-image: url("../img/bg/B.png");
	}

	.content_part .island_part .island_wrap .reward_btn .clickable.a{
		position: absolute;
		bottom: calc(40 / 1920 * 100vw);
		left: calc(80 / 1920 * 100vw);
		width: calc(120 / 1920 * 100vw);
		height: calc(80 / 1920 * 100vw);
	}


	.content_part .island_part .island_wrap .organizer{
		width: calc(170 / 1920 * 100vw);
		height: calc(180 / 1920 * 100vw);
		background-image: url("../img/bg/G.gif");


		position: absolute;
		top: calc(415 / 1920 * 100vw);
		left: calc(830 / 1920 * 100vw);

		/*cursor: pointer;*/

		/*width: calc(230 / 1920 * 100vw);
		height: calc(256 / 1920 * 100vw);
		background-image: url("../img/bg/G-hlaf.gif");*/
		

		/*cursor: auto;*/
	}

	.content_part .island_part .island_wrap .ggt_awrad_btn{
		width: calc(122 / 1920 * 100vw);
	    height: calc(180 / 1920 * 100vw);
	    position: absolute;
	    top: calc(120 / 1920 * 100vw);
	    left: calc(1200 / 1920 * 100vw);
	    z-index: 2;
	}

	.content_part .island_part .island_wrap .news_btn{
		width: calc(245 / 1920 * 100vw);
		height: calc(165 / 1920 * 100vw);

		position: absolute;
		top: calc(65 / 1920 * 100vw);
		left: calc(140 / 1920 * 100vw);

		background: url("../img/bg/F-sprite.png") top center;
		background-size: 100% 1200%;

		animation: ani_news 1.5s steps(12) infinite;
	}

	@keyframes ani_news {
		0% { background-position: 0% 1200%; }
		100% { background-position: 0% 0%; }
	}


	.content_part .island_part .island_wrap .waterfall_animation_1{
		width: calc(159.6 / 1920 * 100vw);
		height: calc(157 / 1920 * 100vw);

		position: absolute;
		top: calc(500 / 1920 * 100vw);
		left: calc(213 / 1920 * 100vw);

		background: url("../img/bg/waterfall-1-sprite.png") top center;
		background-size: 100% 1900%;

		animation: ani_waterfall 2s steps(19) infinite;
	}

	@keyframes ani_waterfall {
		0% { background-position: 0% 1900%; }
		100% { background-position: 0% 0%; }
	}

	.content_part .island_part .island_wrap .waterfall_animation_2{
		width: calc(142.6 / 1920 * 100vw);
		height: calc(67.1 / 1920 * 100vw);

		position: absolute;
		top: calc(310 / 1920 * 100vw);
		left: calc(771 / 1920 * 100vw);

		background: url("../img/bg/waterfall-2-sprite.png") top center;
		background-size: 100% 2400%;

		animation: ani_lake 2s steps(24) infinite;
	}

	@keyframes ani_lake {
		0% { background-position: 0% 2400%; }
		100% { background-position: 0% 0%; }
	}


	/*
	.content_part .island_part .island_wrap .island_btn .btn_text{
		-webkit-text-stroke: 1px #8b420d;
		-webkit-text-fill-color:#EFAF67;;
		font-family:HelveticaNeue-CondensedBlack;
		font-size:22px;
		letter-spacing:0;
		text-align:center;
		text-shadow:0 2px 2px rgba(0,0,0,0.50);

		position: absolute;
		bottom: -10px;
	}*/

	.content_part .island_part .island_wrap .island_btn .btn_text,
	.content_part .island_part .island_wrap .btn_text{
		width: 130px;
		height: 75px;
		bottom: 0;
		position: absolute;
		bottom: -20px;
	}

	.content_part .island_part .island_wrap .island_btn .btn_text.about[lang="zh"]{
		background-image: url("../img/menu/chi/menu_01.svg");
		width: calc(815 / 1440 /6 * 100vw);
		height: calc(310 / 1440 /6 * 100vw);
	}

	.content_part .island_part .island_wrap .island_btn .btn_text.about[lang="en"]{
		background-image: url("../img/menu/eng/menu_01.svg");
		width: calc(815 / 1440 /6 * 100vw);
		height: calc(310 / 1440 /6 * 100vw);
	}

	.content_part .island_part .island_wrap .island_btn .btn_text.event[lang="zh"]{
		background-image: url("../img/menu/chi/menu_02.svg");
		width: calc(815 / 1440 /6 * 100vw);
		height: calc(310 / 1440 /6 * 100vw);
	}

	.content_part .island_part .island_wrap .island_btn .btn_text.event[lang="en"]{
		background-image: url("../img/menu/eng/menu_02.svg");
		width: calc(1600 / 1440 /6 * 100vw);
		height: calc(310 / 1440 /6 * 100vw);
	}

	.content_part .island_part .island_wrap .island_btn .btn_text.student[lang="zh"]{
		background-image: url("../img/menu/chi/menu_03.svg");
		width: calc(815 / 1440 /6 * 100vw);
		height: calc(310 / 1440 /6 * 100vw);
		bottom: 25px;
		right: 70px;
	}

	.content_part .island_part .island_wrap .island_btn .btn_text.student[lang="en"]{
		background-image: url("../img/menu/eng/menu_03.svg");
		width: calc(1265 / 1440 /6 * 100vw);
		height: calc(310 / 1440 /6 * 100vw);
		bottom: 25px;
		right: 45px;
	}

	.content_part .island_part .island_wrap .island_btn .btn_text.reward[lang="zh"]{
		background-image: url("../img/menu/chi/menu_04.svg");
		width: calc(450 / 1440 /6 * 100vw);
		height: calc(310 / 1440 /6 * 100vw);
		left: 20px;
		bottom: 0;
	}

	.content_part .island_part .island_wrap .island_btn .btn_text.reward[lang="en"]{
		background-image: url("../img/menu/eng/menu_04.svg");
		width: calc(810 / 1440 /6 * 100vw);
		height: calc(310 / 1440 /6 * 100vw);
		left: 0;
		bottom: 0;
	}

	.content_part .island_part .island_wrap .island_btn .btn_text.teacher[lang="zh"]{
		background-image: url("../img/menu/chi/menu_05.svg");
		width: calc(815 / 1440 /6 * 100vw);
		height: calc(310 / 1440 /6 * 100vw);
		right: 60px;
	}

	.content_part .island_part .island_wrap .island_btn .btn_text.teacher[lang="en"]{
		background-image: url("../img/menu/eng/menu_05.svg");
		width: calc(1280 / 1440 /6 * 100vw);
		height: calc(310 / 1440 /6 * 100vw);
		right: 30px;
	}

	.content_part .island_part .island_wrap .btn_text.resource[lang="zh"]{
		background-image: url("../img/menu/chi/menu_06.svg");
		width: calc(815 / 1440 /6 * 100vw);
		height: calc(310 / 1440 /6 * 100vw);
		right: 10px;
	}

	.content_part .island_part .island_wrap .btn_text.resource[lang="en"]{
		background-image: url("../img/menu/eng/menu_06.svg");
		width: calc(1280 / 1440 /6 * 100vw);
		height: calc(310 / 1440 /6 * 100vw);
		left: -10px;
	}

	.content_part .cloud_container{

	}

	.content_part .cloud_container .cloud{
		background-size: 100% 100%;
		background-repeat: no-repeat;

		cursor: pointer;

		position: absolute;
	}

	.content_part .cloud_container .cloud1{
		width: calc(150 / 1920 * 100vw);
		height: calc(75 / 1920 * 100vw);

		top: calc(330 / 1920 * 100vw);
		left: calc(40 / 1920 * 100vw);

		background-image: url("../img/bg/img_bg_cloud2.png");
	}

	.content_part .cloud_container .cloud2{
		width: calc(140 / 1920 * 100vw);
		height: calc(70 / 1920 * 100vw);

		top: calc(140 / 1920 * 100vw);
		right: calc(50 / 1920 * 100vw);

		background-image: url("../img/bg/img_bg_cloud1.png");
	}

	.content_part .cloud_container .cloud3{
		width: calc(205 / 1920 * 100vw);
		height: calc(105 / 1920 * 100vw);

		top: calc(235 / 1920 * 100vw);
		right: calc(120 / 1920 * 100vw);

		background-image: url("../img/bg/img_bg_cloud3.png");
	}

	.content_part .cloud_container .cloud4{
		width: calc(115 / 1920 * 100vw);
		height: calc(60 / 1920 * 100vw);

		top: calc(165 / 1920 * 100vw);
		left: calc(90 / 1920 * 100vw);

		background-image: url("../img/bg/img_bg_cloud4.png");
	}

	.content_part .island_part .character{
		background-size: 100% 100%;
		background-repeat: no-repeat;
		position: absolute;
		bottom: calc(70 / 1920 * 100vw); 
	}

	.content_part .island_part .character.c1{
		width: calc(140 / 1920 * 100vw);
		height: calc(270 / 1920 * 100vw);

		left: calc(0 / 1920 * 100vw);
		left: calc(-25 / 1920 * 100vw);
	}

	.content_part .island_part .character.c2{
		width: calc(120 / 1920 * 100vw);
		height: calc(270 / 1920 * 100vw);

		left: calc(0 / 1920 * 100vw);
	}

	.content_part .island_part .character.c3{
		width: calc(125 / 1920 * 100vw);
		height: calc(235 / 1920 * 100vw);

		bottom: calc(20 / 1920 * 100vw); 
		left: calc(-25 / 1920 * 100vw);
	}

	.mutiply_logo{
		mix-blend-mode: multiply;
	}

	.buckets {
		position: absolute;
		top: 10px;
		width: calc(120 / 1440 *s100vw);
		height: calc(120 / 1920 * 100vw);
		border-radius: 50%;
		z-index: 1;
	   
		box-sizing: border-box;
	}

	.buckets div {
		position: absolute;
		animation: bucket_rotate 14s infinite linear;
		top: 50%;
		left: 50%;
		margin-top: calc(-15 / 1920 * 100vw);
		margin-left: calc(-45 / 1920 * 100vw);
		box-sizing: border-box;
	}
	.buckets span {
		display: inline-block;
		height: 0;
		width: 20px;
		position: relative;

		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		width: calc(90 / 1920 * 100vw);
		height: calc(30 / 1920 * 100vw);
	}
	.clickable{
		z-index: 5;
	}
}

.marquee{
	overflow: hidden;
	display: flex;
	white-space: nowrap;
	display: block;
}

.m_wrap_1 {
  display: inline-block;
  animation: marquee 30s linear infinite;
}

.m_wrap_2 {
  display: inline-block;
  animation: marquee2 30s linear infinite;
  /*animation-delay: 10s;*/
}

.flex{
	width: 100%;
  	height: 100px;
	display: -webkit-flex;
    -webkit-align-items: center;
    -webkit-justify-content: flex-start;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

@keyframes marquee {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-100.5%);
  }
}

@keyframes marquee2 {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-100.5%);
  }
}

.news_flag{
	width: calc(336 / 1440 * 100vw);
	height: calc(104 / 1440 * 100vw);

	position: absolute;
	top: calc(85 / 1440 * 100vw);
	left: calc(260 / 1440 * 100vw);

	background-size: 100% 100%;
	background-position: center;

	background-image: url("../img/bg/img_billboard.png");

	display: -webkit-flex;
    -webkit-align-items: center;
    -webkit-justify-content: flex-start;
    display: flex;
    align-items: center;
    justify-content: flex-start;
	
	/* display: none; */
}

.notice_board_wrap{
	position: relative;

	width: calc( 100% - 10 * 2 / 1440 * 100vw);
	height: calc( 100% - 10 * 2 / 1440 * 100vw);

	overflow: hidden;
}

.notice_board{
	position: absolute;
	right: 0;

	width: calc(220 / 1440 * 100vw);
/*	height: calc( 100% - 10 * 2 / 1440 * 100vw);
	padding: calc(10 / 1440 * 100vw);*/

	color: white;

	animation: marqueeY 20s linear infinite;
}

@keyframes marqueeY {
  from {
    transform: translateY(7vw);
  }
  to {
    transform: translateY(-100%);
  }
}