/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
	display: block;
}

body {
	line-height: 1;
}

ol,
ul {
	list-style: none;
}

blockquote,
q {
	quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

*,
*:after,
*:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

img {
	max-width: 100%;
	height: auto;
}



/* hamburger menu */


#toggler {
	display: none;
}

.hamburger-container {
	display: none;
	width: 50px;
	height: 50px;
	position: relative;
	top: 16px;

}

.nav-items {
	display: none;
}

@media(max-width:767px) {
	.hamburger-container {
		display: block;
	}

	.hamburger-container span {
		display: block;
		z-index: 3;
		top: 50px;
		left: 50px;
		width: 35px;
		height: 9px;
		background: rgb(107, 107, 255);
		position: relative;
		transition: transform .3s ease-in-out, top .3s ease-in-out .3s;
	}

	.hamburger-container span:nth-child(2),
	.hamburger-container span:nth-child(3) {
		margin-top: 7px;
	}

	#toggler:checked+label .hamburger-container span:nth-child(1) {
		transform: rotate(45deg);
		top: 4px;
		transition: top .3s ease-in-out, transform .3s ease-in-out .3s;
	}

	#toggler:checked+label .hamburger-container span:nth-child(2) {
		transform: rotate(-45deg);
		top: -11px;
		transition: top .3s ease-in-out, transform .3s ease-in-out .3s;
	}

	.nav-items {
		z-index: 2;
		display: block;
		background: rgb(0, 0, 0, 0.9);
		width: 100%;
		height: 800px;
		position: absolute;
		left: 0;
		top: 0;
		transform: scaleY(0);
		transition: transform .3s ease-in-out .3s;
		transform-origin: 50% 0;
	}

	#toggler:checked~.nav-items {
		transform: scaleY(1);
		transition: transform .3s ease-in-out .3s, opacity .3s ease-in-out .3s;
	}

	.nav-items ul {
		margin-top: 130px;
	}


	.nav-items li a {
		display: block;
		font-size: 23px;
		font-weight: 600;
		text-decoration: none;
		margin-top: 30px;
		margin-left: 20px;
		width: 20%;
	}

	.xmas2021 {
		font-size: 15px;
		display: block;
	}

	.nav-items .menu .nav-course li {
		width: 100%;
	}

	.nav-items .menu .nav-course li a,
	.nav-cooperate-open li a,
	.nav-activities li a {
		width: 100%;
		margin-bottom: -10px;
	}

	.nav-activities li a {
		margin-left: 145px;

	}

	.xmas {
		margin-top: -140px;
	}




	.nav-items ul li a:hover,
	.nav-items ul li a.active {
		color: rgb(255, 230, 0);
	}

	.nav-items .nav-course li {
		display: absolute;
		margin-left: 80px;
	}

	.nav-course li a {
		font-size: 23px;
		margin-left: 80px;
	}

	.nav-cooperate-open li a {
		margin-left: 160px;
	}

	.classroom {
		margin-top: -160px;
		width: 100%;
	}

	.nav-items .nav-course .esm {
		margin-top: -130px;
	}



	.nav-course,
	.nav-cooperate-open,
	.nav-activities {
		position: absolute;
		display: none;

	}
}

@media(max-width:767px) {
	header {
		height: 50px;
	}

	label {
		height: 0;
	}

	.nav-items .course li a {
		font-size: 25px;
	}

}
}



/* Masonry */

* {
	box-sizing: border-box;
}

body {
	font-family: sans-serif;
}

.swiper-button-prev,
.swiper-button-next {
	display: none;
}

.swiper-pagination {
	display: none;
}


/* about.html grid */


.grid-about-ipad,
.grid-big,
.grid-320 {
	display: none;
}

.grid {
	max-width: 1200px;
}

/* clearfix */
.grid:after {
	content: '';
	display: block;
	clear: both;
}

.grid-sizer,
.grid-item {
	width: 30%;
}

.grid {
	margin: 0 auto;
}

.grid-item {
	height: 460px;
	max-width: 100%;
	float: left;
	border-color: hsla(0, 0%, 0%, 0.5);
	border-radius: 5px;
}

.grid-item--width2 {
	width: 70%;
}

.grid-item--width3 {
	width: 30%;
}

.grid-item--height2 {
	height: 460px;
}

.grid-item--height3 {
	width: 480px;
}

.grid-item--height4 {
	width: 480px;
}

.grid-item--height5 {
	width: 480px;
}

.grid-item--height6 {
	width: 480px;
}

/*grid-about-ipad*/
.grid-about-ipad {
	width: 100%;
}


/* clearfix */
.grid-about-ipad:after {
	content: '';
	display: block;
	clear: both;
}

.grid-about-ipad-sizer,
.grid-about-ipad-item {
	width: 100%;

}

.grid-about-ipad {
	margin: 0 auto;
}

.grid-about-ipad-item {
	height: auto;
	width: 50%;
	float: left;
}

.ferries,
.chairs,
.bricks {
	width: 100%;
}

@media(max-width:1024px) {
	.grid-about-ipad {
		display: block;
		width: 100%;
	}

	.grid {
		display: none;
	}





}

@media(max-width:1229px) {
	.grid {
		display: none;
	}

	.grid-big {
		display: block;
	}

	.gridbig-1,
	.gridbig-2,
	.gridbig-3,
	.gridbig-4,
	.gridbig-5,
	.gridbig-6 {
		display: flex;
	}








}

@media(max-width:600px) {
	.grid-big {
		display: none;
	}

	.grid-320 {
		display: block;
	}

	.grid-320-11,
	.grid-320-22,
	.grid-320-33,
	.grid-320-44 {
		display: flex;
	}

	.grid-320-5,
	.grid-320-6 {
		width: 100%;
	}





}






/* ESM.html grid */

.grid2-sizer,
.grid2-item,
.grid2-height {
	margin-right: 15px;
	margin-bottom: 15px;

}

.grid2 {
	margin-top: 50px;
	margin-left: 120px;
}

.grid2-item {
	height: auto;
	width: 30%;
	border-color: hsla(0, 0%, 0%, 0.5);
	border-radius: 5px;
	float: left;
}

.grid2-height {
	height: auto;
	width: 30%;
	background: rgb(192, 88, 88);
	border-color: hsla(0, 0%, 0%, 0.5);
	border-radius: 5px;
	float: left;
}

.grid2-ipad-item {
	display: none;
}

.nav-course {
	line-height: 40px;
}

/*grid2 ipad*/
@media(max-width:1017px) {
	.grid2 {
		margin-left: 50px;
	}
}

@media(max-width:768px) {
	.grid2 {
		display: block;
	}






}


@media(max-width:614px) {
	.nav-items li a {
		display: block;
		font-size: 20px;
		font-weight: 600;
		text-decoration: none;
		margin-top: 30px;
		margin-left: 20px;
		width: 20%;
	}

	.nav-course li a,
	.nav-activities li a,
	.nav-cooperate-open li a {
		font-size: 20px;
		display: block;
	}

	.nav-course li a {
		margin-left: 60px;
	}

	.nav-cooperate-oppo li a,
	.activity-vcr li a {
		display: block;
		width: 100%;
		margin-left: 140px;
	}

}

@media(max-width:550px) {
	.hamburger-container span {
		display: block;
		z-index: 3;
		top: 35px;
		left: 50px;
		width: 30px;
		height: 8px;
		background: rgb(107, 107, 255);
		position: relative;
		transition: transform .3s ease-in-out, top .3s ease-in-out .3s;
	}

	#toggler:checked+label .hamburger-container span:nth-child(2) {
		transform: rotate(-45deg);
		top: -9px;
		transition: top .3s ease-in-out, transform .3s ease-in-out .3s;
	}
}

@media(max-width:535px) {
	.nav-items li a {
		display: block;
		font-size: 17px;
		font-weight: 600;
		text-decoration: none;
		margin-top: 30px;
		margin-left: 20px;
		width: 20%;
	}

	.nav-course li a,
	.nav-activities li a,
	.nav-cooperate-open li a {
		font-size: 17px;
		display: block;
	}

	.nav-course li a {
		margin-left: 60px;
	}

	.nav-cooperate-oppo li a,
	.activity-vcr li a {
		display: block;
		width: 100%;
		margin-left: 140px;
	}

}

@media(max-width:453px) {
	.nav-items li a {
		display: block;
		font-size: 15px;
		font-weight: 600;
		text-decoration: none;
		margin-top: 30px;
		margin-left: 20px;
		width: 20%;
	}

	.nav-course li a,
	.nav-activities li a,
	.nav-cooperate-open li a {
		font-size: 15px;
		display: block;
	}

	.nav-course li a {
		margin-left: 60px;
	}

	.nav-cooperate-oppo li a,
	.activity-vcr li a {
		display: block;
		width: 100%;
		margin-left: 140px;
	}

}

@media(max-width:414px) {
	.hamburger-container span {
		top: 30px;
		left: 20px;
		width: 30px;
		height: 7px;
	}

	.nav-items li a {
		display: block;
		font-size: 13px;
		font-weight: 600;
		text-decoration: none;
		margin-top: 30px;
		margin-left: 20px;
		width: 20%;
	}

	.nav-course li a,
	.nav-activities li a,
	.nav-cooperate-open li a {
		font-size: 13px;
		display: block;
	}

	.nav-cooperate-oppo li a,
	.nav-activities li a {
		width: 100%;
		margin-left: 100px;
	}
}

@media(max-width:346px) {
	.nav-items li a {
		font-size: 12px;
	}

	.nav-course li a,
	.nav-activities li a,
	.nav-cooperate-open li a {
		font-size: 12px;
	}

}

@media(max-width:320px) {
	.hamburger-container span {
		top: 30px;
		left: 10px;
		width: 25px;
		height: 7px;
	}

	.nav-items li a {
		font-size: 12px;
	}

	.nav-course li a,
	.nav-activities li a,
	.nav-cooperate-open li a {
		font-size: 12px;
	}

}







/* course-SPM grid */

.grid1-sizer,
.grid1-item,
.grid1-height {
	margin-right: 15px;
	margin-bottom: 15px;

}

.grid1 {
	width: 100%;
	margin-left: 20px;
	margin-top: 50px;

}

.grid1-item {
	height: auto;
	width: 31.33333%;
	float: left;
	border-color: hsla(0, 0%, 0%, 0.5);
	border-radius: 5px;
}

.grid1-height {
	height: auto;
	width: 31.33333%;
	float: left;
	border-color: hsla(0, 0%, 0%, 0.5);
	border-radius: 5px;
}

/* SPM-ipad */

@media(max-width:794px) {
	.grid1-item {
		height: auto;
		width: 31%;
		float: left;
		border-color: hsla(0, 0%, 0%, 0.5);
		border-radius: 5px;
	}

	.grid1-height {
		height: auto;
		width: 31%;
		float: left;
		border-color: hsla(0, 0%, 0%, 0.5);
		border-radius: 5px;
	}

}

@media(max-width:768px) {
	.grid1-ipad {
		max-width: 740px;
	}

	.grid1-ipad-item {
		width: 50%;
		border-color: hsla(0, 0%, 0%, 0.5);
		border-radius: 5px;
	}

	.grid1ipad1,
	.grid1ipad2 {
		display: flex;
	}

}



/* course-wedo grid */

.grid3div1,
.grid3div2 {
	display: flex;
	justify-content: center;
}


.grid3-item {
	border-color: hsla(0, 0%, 0%, 0.5);
	border-radius: 5px;
	margin: 10px;
}

.grid3-height {
	border-color: hsla(0, 0%, 0%, 0.5);
	border-radius: 5px;
	margin: 10px;
}

.grid3-ipad {
	display: none;
}

@media(max-width:820px) {
	.grid3 {
		display: block;
		margin-left: -5px;
	}

	@media(max-width:768px) {
		.grid3 {
			display: block;
			margin-left: -10px;
		}

		.grid3-ipad {
			display: none;
		}

		.grid3-ipad-height {
			margin-bottom: 10px;
			margin-left: 50px;
		}

		.grid3-ipad-item {
			width: 60%;
		}

		.grid3ipad1 {
			display: flex;
		}

	}

	@media(max-width:765px) {
		.grid3 {
			display: none;
		}

		.grid3-ipad {
			display: block;
		}



	}


	@media(max-width:750px) {
		.grid3-ipad {
			margin-left: -10px;
		}

		.grid3-ipad-item {
			width: 350px;
			margin-left: 10px;
		}

		.grid3-ipad-height {
			width: 90%;
			margin: 0 auto;
		}
	}


	/* 程式設計 grid */

	.grid44,
	.grid45 {
		display: flex;
		justify-content: center;
		margin-bottom: 10px;
	}

	.grid4-sizer,
	.grid4-item,
	.grid4-height {
		margin-right: 10px;
		margin-bottom: 10px;
	}

	.grid4 {
		width: 100%;
		margin-left: 20px;
	}

	.grid4-item {
		width: 40.5555%;
		height: auto;
		float: left;
		border-color: hsla(0, 0%, 0%, 0.5);
		border-radius: 5px;
		margin-left: 115px;
	}

	.hello {
		margin-left: 0;
	}

	.grid4-height {
		width: 21%;
		height: auto;
		float: left;
		border-color: hsla(0, 0%, 0%, 0.5);
		border-radius: 5px;
	}

	.grid4-ipad {
		display: none;
	}

	@media(max-width:1154px) {
		.grid4-item {
			margin-left: 70px;
		}

		.hello {
			margin-left: 0;
		}



	}

	@media(max-width:886px) {
		.grid4-item {
			margin-left: 50px;
		}

		.hello {
			margin-left: 0;
		}



	}

	@media(max-width:768px) {

		.grid4,
		.grid44,
		.grid45 {
			display: none;
		}

		.grid4-ipad {
			display: block;
		}

		.grid4-ipad-item {
			margin: 0 0 10px 90px;
		}

		.grid4-ipad-item {
			max-width: 550px;
			width: 90%;
		}

	}

	@media(max-width:720px) {
		.grid4-ipad-item {
			margin-left: 60px;
		}
	}

	@media(max-width:693px) {
		.grid4-ipad-item {
			margin-left: 50px;
		}
	}

	@media(max-width:648px) {
		.grid4-ipad-item {
			margin-left: 30px;
		}
	}

	@media(max-width:624px) {
		.grid4-ipad-item {
			margin-left: 20px;
		}

	}
}




/* WRO grid */

.grid5-sizer,
.grid5-item,
.grid5-height {
	margin-right: 10px;
	margin-bottom: 20px;
}

.grid5 {
	margin-left: 120px;

}

.grid5-item {
	width: 28%;
	height: auto;
	float: left;
	border-color: hsla(0, 0%, 0%, 0.5);
	border-radius: 5px;
}

.grid5-height {
	width: 57%;
	height: auto;
	float: left;
	border-color: hsla(0, 0%, 0%, 0.5);
	border-radius: 5px;
}

.grid5-ipad {
	display: none;
}

@media(max-width:1250px) {
	.grid5 {
		margin-left: 80px;
	}
}

@media(max-width:765px) {
	.grid5 {
		display: none;
	}

	.grid5-ipad {
		display: block;
	}

	.grid5ipad1,
	.grid5ipad2 {
		display: flex;
	}

}


@media(max-width:768px) {
	.grid5 {
		display: block;
		margin-left: 55px;
	}

	.grid5-ipad {
		display: none;
	}

	.grid5ipad1,
	.grid5ipad2 {
		display: flex;
	}

}


/* 活動花絮 2020FLL課程活動  grid */


.grid6-sizer {
	margin: 20px;
	margin: 0 auto;
}

.grid6-item {
	float: left;
	border-color: hsla(0, 0%, 0%, 0.5);
	border-radius: 5px;
	margin: 10px;
}

.grid6-ipad {
	display: none;
}

.grid6 {
	display: block;
}





@media(max-width:768px) {
	.grid6 {
		margin-left: -40px;
	}

	.grid6-ipad {
		display: none;
		align-items: center;
	}

	.fllipad1,
	.fllipad2 {
		display: flex;
		width: 95%;
		margin-left: -50px;
	}

}

@media(max-width:765px) {
	.grid6 {
		display: none;
		;
	}

	.grid6-ipad {
		display: block;
		align-items: center;
	}

	.fllipad1,
	.fllipad2 {
		display: flex;
		width: 95%;
		margin-left: -50px;
	}

}

@media(max-width:428px) {

	.fllipad1,
	.fllipad2 {
		display: flex;
		width: 130%;
		margin-left: -100px;
	}

}

@media(max-width:359px) {

	.fllipad1,
	.fllipad2 {
		width: 140%;
	}
}

@media(max-width:330px) {

	.fllipad1,
	.fllipad2 {
		width: 150%;
	}
}


/* 活動花絮 2021冬令營活動  grid */

.grid7-sizer,
.grid7-item,
.grid7-height,
.grid7-height2,
.grid7-height3 {
	margin-right: 10px;
	margin-bottom: 10px;
}

.grid7 {
	max-width: 1120px;
	margin: 0 auto;
	margin-top: 10px;
}

.grid7-phone {
	display: none;
}

.grid7-item {
	width: 49.11111%;
	height: auto;
	float: left;
	border-color: hsla(0, 0%, 0%, 0.5);
	border-radius: 5px;
	text-align: center;
}

.grid7-height {
	height: auto;
	width: 24%;
	float: left;
	border-color: hsla(0, 0%, 0%, 0.5);
	border-radius: 5px;
	text-align: center;
}

.grid7-height2 {
	height: auto;
	width: 49%;
	float: left;
	border-color: hsla(0, 0%, 0%, 0.5);
	border-radius: 5px;
}

.grid7-height3 {
	height: auto;
	width: 49%;
	float: left;
	border-color: hsla(0, 0%, 0%, 0.5);
	border-radius: 5px;
}

@media(max-width:1149px) {
	.grid7 {
		margin-left: 50px;
	}

	.grid7-item {
		width: 48%;
	}

	.grid7-height {
		width: 23.8%;
	}

	.grid7-height2 {
		width: 48%;
	}

	.grid7-height3 {
		width: 48%;
	}
}

@media(max-width:1024px) {

	.grid7 {
		width: 100%;
		margin-left: 20px;
	}

	.grid7-item {
		width: 48%;
	}

	.grid7-height {
		width: 23.8%;
	}

	.grid7-height2 {
		width: 48%;
	}

	.grid7-height3 {
		width: 48%;
	}
}

@media(max-width:768px) {
	.grid7 {
		max-width: 700px;
		margin: 0 auto;
		margin-left: 30px;
		margin-top: 10px;
	}

	.grid7-item {
		width: 47.33333%;
		height: auto;
		float: left;
		border-color: hsla(0, 0%, 0%, 0.5);
		border-radius: 5px;
	}

	.grid7-height {
		height: auto;
		width: 23.55555%;
		float: left;
		border-color: hsla(0, 0%, 0%, 0.5);
		border-radius: 5px;
	}

	.grid7-height2 {
		height: auto;
		width: 47.77777%;
		float: left;
		border-color: hsla(0, 0%, 0%, 0.5);
		border-radius: 5px;
	}

	.grid7-height3 {
		height: auto;
		width: 47.88888%;
		float: left;
		border-color: hsla(0, 0%, 0%, 0.5);
		border-radius: 5px;
	}
}

@media(max-width:749px) {
	.grid7 {
		display: none;
	}

	.grid7-phone {
		display: block;
	}

	.grid7-height2 {
		width: 100%;
		border-radius: 10px;
	}

	.grid7-item,
	.grid7-height3 {
		width: 100%;
		border-radius: 10px;
	}







}





/* 活動花絮 2020兒童節活動  grid */

.grid8-sizer,
.grid8-item,
.grid8-height,
.grid8-height2 {
	margin-right: 10px;
	margin-bottom: 10px;

}

.grid8 {
	margin-left: 155px;
	margin-top: 10px;
}

.grid8-item {
	height: auto;
	width: 21.55555%;
	float: left;
	border-color: hsla(0, 0%, 0%, 0.5);
	border-radius: 5px;
}

.grid8-height {
	height: auto;
	width: 44%;
	float: left;
	border-color: hsla(0, 0%, 0%, 0.5);
	border-radius: 5px;
}

.grid8-height2 {
	height: auto;
	width: 44%;
	float: left;
	border-color: hsla(0, 0%, 0%, 0.5);
	border-radius: 5px;
}

.grid8phone {
	display: none;
}

@media(max-width:1024px) {
	.grid8 {
		margin-left: 100px;
	}
}

@media(max-width:768px) {
	.grid8 {
		margin-left: 90px;
	}
}

@media(max-width:712px) {
	.grid8 {
		display: none;
	}

	.grid8phone {
		display: block;
		margin-left: 100px;
	}

	.grid8-item {
		width: 20%;

	}
}



/* 活動花絮 聖誕節  grid */

.grid9-sizer,
.grid9-item {
	margin-right: 10px;
	margin-bottom: 10px;
}

.grid9 {
	width: 80%;
	margin: 10px auto 10px 160px;
}

.grid9-item {
	height: auto;
	width: 48%;
	float: left;
	border-color: hsla(0, 0%, 0%, 0.5);
	border-radius: 5px;
}

@media(max-width:1234px) {
	.grid9 {
		margin-left: 140px;

	}
}

@media(max-width:1009px) {
	.grid9 {
		margin-left: 110px;

	}
}

@media(max-width:843px) {
	.grid9 {
		margin-left: 90px;

	}
}

@media(max-width:768px) {
	.grid9 {
		max-width: 700px;
		margin-left: 110px;
	}

	.grid9-item {
		height: auto;
		width: 48%;
		border-color: hsla(0, 0%, 0%, 0.5);
		border-radius: 5px;
		float: left;
	}
}

@media(max-width:767px) {
	.grid9 {
		margin-left: 90px;
	}
}

@media(max-width:674px) {
	.grid9 {
		margin-left: 80px;
	}
}

@media(max-width:666px) {
	.grid9-item {
		width: 90%;
		margin-left: 10px;
	}
}

@media(max-width:532px) {
	.grid9-item {
		width: 90%;
		margin-left: -5px;
	}
}

@media(max-width:428px) {
	.grid9-item {
		width: 90%;
		margin-left: -20px;
	}
}
}

@media(max-width:342px) {
	.grid9-item {
		width: 90%;
		margin-left: -30px;
	}
}

@media(max-width:320px) {
	.grid9-item {
		width: 90%;
		margin-left: -35px;
	}
}


/*JS swiper CSS*/

#swiper1 {
	max-width: 1120px;
	margin: 0 auto;
}

.ipadindex {
	display: none;
}

@media(max-width:1149px) {
	#swiper1 {
		max-width: 980px;
		margin: 0 auto;
	}
}

@media(max-width:1009px) {

	#swiper1 {
		max-width: 840px;
		height: auto;
	}
}

@media(max-width:869px) {
	#swiper1 {
		max-width: 770px;
		margin: 0 auto;
	}

}

@media(max-width:799px) {
	#swiper1 {
		max-width: 700px;
		margin: 0 auto;
	}

}

@media(max-width:768px) {
	#swiper1 {
		max-width: 700px;
		margin: 0 auto;
	}

}

@media(max-width:767px) {
	.swiper1 {
		display: block;
	}
}





.swiper-wrapper {
	z-index: 1;
}

.swiper-pagination {
	margin: -20px auto 0 auto;
}

#swiper2 {
	max-width: 1120px;
	height: 741px;
	margin: 0 auto;
}

.swiper-pagination {
	display: none;
}

#swiper3 {
	max-width: 1120px;
	height: 840px;
	margin: 0 auto;
}

.swiper-button-prev-3 {
	width: 100%
}

#swiper5 {
	max-width: 1120px;
	height: 753px;
	margin: 0 auto;
}

.program-only {
	display: none;
}

.content-picture1 {
	display: block;
	margin: 0 auto;
}

@media(max-width:1149px) {

	#swiper2,
	#swiper3,
	#swiper5 {
		max-width: 980px;
		height: 741px;
		margin: 0 auto;
	}

	.wropic,
	.fllpic,
	.content-picture1 {
		max-width: 980px;
		height: auto;
	}

	.allteacher {
		max-width: 980px;
		height: auto;
		margin: 0 auto;
	}
}

@media(max-width:1024px) {
	.introduceSPM-1 {
		margin: -150px auto 30px auto;
	}

	.introduceSPM-2 {
		margin: -150px auto 30px auto;
	}
}

@media(max-width:1009px) {

	#swiper2,
	#swiper3,
	#swiper5 {
		max-width: 840px;
		height: 700px;
	}

	.wropic,
	.fllpic,
	.content-picture1 {
		max-width: 840px;
		height: auto;
	}

	.allteacher {
		max-width: 840px;
		height: auto;
		margin: 0 auto;
	}
}

@media(max-width:869px) {

	#swiper2,
	#swiper3,
	#swiper5 {
		max-width: 770px;
		height: 700px;
	}

	.wropic,
	.fllpic,
	.content-picture1 {
		max-width: 770px;
		height: auto;
	}

	.allteacher {
		max-width: 770px;
		height: auto;
		margin: 0 auto;
	}
}

@media(max-width:799px) {

	#swiper2,
	#swiper3,
	#swiper5 {
		max-width: 700px;
		height: 700px;
	}

	.fllpic,
	.content-picture1 {
		max-width: 700px;
		height: auto;
	}

	.allteacher {
		max-width: 700px;
		height: auto;
		margin: 0 auto;
	}
}

@media(max-width:768px) {
	#swiper5 {
		display: none;
	}

	.program-only {
		display: block;
		width: 95%;
		margin: 0 auto;
		border-radius: 20px;
	}

}
}

@media(max-width:731px) {
	.content-picture1 {
		max-width: 100%;
	}
}








/*littleindex.html*/

html,
body {
	width: 100%;
}

.wrap {
	width: 100%;
	background-image: url(../images/小洛特/背景/15.png);
	border: 15px solid rgb(255, 230, 0);
}

.header {
	display: flex;
	flex-direction: column;
	margin: 0 auto;
	width: 100%;
}

.container {
	margin: 0 auto;
	width: 100%;
}

.indexcourse-intro {
	text-align: left;
	display: flex;
}

.course {
	font-size: 20px;
}

.line1,
.line2 {
	display: flex;
	margin-bottom: 30px;
}

.indexcourse-intro .c {
	margin-left: 50px;
	margin-top: 30px;
}

.introduce-title {
	width: 250px;
	height: 250px;
	border-radius: 50%;
	background: rgb(255, 230, 0);
	color: rgb(24, 24, 24);
	text-align: center;
	font-size: 30px;
	font-weight: 500;
	line-height: 250px;
	margin-top: 50px;
	margin-bottom: 50px;
}

.reward-score-1 {
	display: none;
}

.c:hover .b {
	display: block;
}

@media(max-width:392px) {
	.igg {
		margin-top: -10px;
	}


}

.title-images {
	width: 280px;
	height: 250px;
	margin-top: 50px;
}


.course-title {
	display: flex;
	justify-content: center;
	margin: 0 auto;
}

.footer {
	max-width: 100%;
	height: 230px;
	color: #0486f4;
	font-weight: 400;
	background: rgb(255, 230, 0);
	font-size: 20px;
	display: flex;
	justify-content: center;
}

.WRO-rewards1 {
	display: flex;
}

.footer .box1 {
	max-width: 100%;
	padding-top: 30px;
	margin-left: 200px;
}

.robotcc {
	font-size: 16px;
	margin-top: 200px;
	margin-left: -100px;
	width: 500px;
}


.box1 {
	width: 90%;
}

@media(max-width:500px) {
	.robotcc {
		margin-left: 10px;
	}
}

@media(max-width:1065px) {
	.robotcc {
		font-size: 13px;
		margin-left: -250px;
	}


}

@media(max-width:926px) {
	.footer .box1 {
		max-width: 100%;
		padding-top: 30px;
		margin-left: 50px;
	}

	.unnamed {
		display: none;
	}

	.robotcc {
		font-size: 13px;
		margin-left: -100px;
	}

	.footer {
		height: 230px;
		color: #0486f4;
		font-weight: 400;
		background: rgb(255, 230, 0);
		font-size: 16px;
	}


	.fb-ig {
		max-width: 300px;
		margin-left: 90px;
	}

	.fb-ig img {
		display: block;
		float: left;
		margin-right: 30px;

	}

	.box1 a:link {
		font-size: 16px;
		color: #0486f4;
		text-decoration: none;
	}

	a:visited {
		font-size: 16px;
		color: #0486f4;
		text-decoration: none;
	}

	a:hover {
		font-size: 16px;
		color: #0486f4;
		text-decoration: underline;
	}
}

@media(max-width:926px) {
	.footer .box1 {
		max-width: 100%;
		padding-top: 30px;
		margin-left: 10px;
	}
}

@media(max-width:768px) {
	.footer .box1 {
		max-width: 100%;
		padding-top: 30px;
		margin: 0 auto;
		margin-left: 10px;
	}

	.unnamed {
		display: none;
	}

	.robotcc {
		font-size: 13px;
		margin-right: 50px;
	}

	.footer {
		height: 230px;
		color: #0486f4;
		font-weight: 400;
		background: rgb(255, 230, 0);
		font-size: 16px;
	}


	.fb-ig {
		max-width: 300px;
		margin-left: 90px;
	}

	.fb-ig img {
		display: block;
		float: left;
		margin-right: 30px;
	}

	.box1 a:link {
		font-size: 14px;
		color: #0486f4;
		text-decoration: none;
	}

	a:visited {
		font-size: 14px;
		color: #0486f4;
		text-decoration: none;
	}

	a:hover {
		font-size: 14px;
		color: #0486f4;
		text-decoration: underline;
	}
}

@media(max-width:595px) {
	.footer .box1 {
		max-width: 100%;
		padding-top: 20px;
		margin: 0 auto;
		margin-left: 10px;
	}

	.robotcc {
		font-size: 12px;
		margin-right: 0px;
		margin-bottom: 10px;
	}

}

@media(max-width:473px) {
	.footer .box1 {
		max-width: 100%;
		padding-top: 20px;
		margin: 0 auto;
		margin-left: 10px;
	}

	.robotcc {
		font-size: 12px;
		margin-right: 10px;
		margin-bottom: 10px;
	}

}

@media(max-width:457px) {
	.footer .box1 {
		font-size: 12px;
	}

	.box1 a:link {
		font-size: 12px;
		color: #0486f4;
		text-decoration: none;
	}

	a:visited {
		font-size: 12px;
		color: #0486f4;
		text-decoration: none;
	}

	a:hover {
		font-size: 12px;
		color: #0486f4;
		text-decoration: underline;
	}

	.robotcc {
		font-size: 12px;
		margin-right: 20px;
	}


}

@media(max-width:568px) {
	.grid8phone {
		display: block;
		margin-left: 80px;
	}

	.grid8-item {
		height: auto;
		width: 42%;




	}
}





a:link {
	font-size: 20px;
	color: #0486f4;
	text-decoration: none;
}

a:visited {
	font-size: 20px;
	color: #0486f4;
	text-decoration: none;
}

a:hover {
	font-size: 20px;
	color: #0486f4;
	text-decoration: underline;
}



.fb-ig {
	max-width: 300px;
	display: flex;
}


.unnamed {
	max-width: 200px;
	height: 170px;
	margin-top: 100px;
}

.WRO-title {
	width: 250px;
	height: 250px;
	border-radius: 50%;
	background: rgb(255, 230, 0);
	color: rgb(24, 24, 24);
	text-align: center;
	font-size: 27px;
	font-weight: 500;
	margin-top: 70px;
	line-height: 250px;
	margin-left: 30px;
	margin-bottom: 50px;
}

.WRO-images {
	width: 300px;
	height: 260px;
	margin-top: 50px;
}

.WRO-rewards {
	display: flex;
	max-width: 600px;
	margin: 0 auto;
}

.WRO-rewards1 {
	margin-top: 40px;
	width: 100%;
}

.reward-score,
.reward-score-1 {
	width: 80%;
	line-height: 45px;
	background: #3a97e9;
	color: white;
	font-size: 20px;
	border-radius: 50px;
	font-weight: 350;
	margin: 0 auto;
	padding: 30px;
}

.reward-score {
	display: flex;
	justify-content: space-around;
	margin-top: -150px;
	margin-bottom: 80px;
}

.reward-score-1 {
	display: none;
}

.header h1 a {
	background-image: url(../images/lego/logo-removebg-preview\ \(1\)\ .svg);
	background-repeat: no-repeat;
	max-width: 300px;
	margin: 0 auto;
	height: 135px;
	display: block;
	text-indent: 101%;
	overflow: hidden;
	white-space: nowrap;
}

.topmenu {
	z-index: 99;
	margin: 0 auto;
	margin-bottom: 10px;
}

.topmenu li {
	float: left;
	color: #0486f4;
}

.topmenu li ul {
	background: #ffffff;
}





.topmenu li a {
	display: block;
	width: 180px;
	height: 50px;
	line-height: 50px;
	text-align: center;
	font-size: 18px;
	text-decoration: none;
	font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
	font-weight: 700;
	margin-bottom: 10px;
	transition: all .3s;
}

.topmenu .xmas2021 {
	font-size: 15px;
}


@media(max-width:1149px) {

	.topmenu li a {
		max-width: 140px;
	}

}

@media(max-width:1009px) {

	.topmenu li a {
		max-width: 120px;
	}

}

@media(max-width:767px) {

	.header h1 a {
		background-image: url(../images/lego/logo-removebg-preview\ \(1\)\ .svg);
		background-repeat: no-repeat;
		margin: 0 auto;
		height: 135px;
		display: block;
		text-indent: 101%;
		overflow: hidden;
		white-space: nowrap;
	}

	.topmenu {
		display: none;

	}
}

@media(max-width:550px) {
	.header h1 a {
		background-image: url(../images/lego/767logo.svg);
		margin: 0 auto;
		height: 110px;
		margin-right: 80px;
	}

	.reward-score {	
		margin-top: -150px;
		margin-bottom: 80px;
	}
}

@media(max-width:518px) {
	.header h1 a {
		background-image: url(../images/lego/767logo.svg);
		margin: 0 auto;
		height: 110px;
		margin-right: 60px;
	}
}

@media(max-width:482px) {
	.header h1 a {
		background-image: url(../images/lego/767logo.svg);
		margin: 0 auto;
		height: 110px;
		margin-right: 40px;
	}
}

@media(max-width:448px) {
	.header h1 a {
		background-image: url(../images/lego/767logo.svg);
		margin: 0 auto;
		height: 110px;
		margin-top: 10px;
		margin-right: 20px;
	}
}

@media(max-width:432px) {
	.header h1 a {
		background-image: url(../images/lego/320logo.svg);
		margin: 0 auto;
		height: 110px;
		margin-top: 10px;
		margin-left: 100px;
	}
}

@media(max-width:396px) {
	.header h1 a {
		background-image: url(../images/lego/320logo.svg);
		margin: 0 auto;
		height: 110px;
		margin-left: 80px;
		margin-top: 10px;
	}
}

@media(max-width:352px) {
	.header h1 a {
		background-image: url(../images/lego/320logo.svg);
		margin: 0 auto;
		height: 110px;
		margin-left: 60px;
		margin-top: 10px;
	}
}

@media(max-width:320px) {
	.header h1 a {
		background-image: url(../images/lego/320logo.svg);
		margin: 0 auto;
		height: 110px;
		margin-left: 50px;
	}
}

.topmenu li a:hover {
	color: rgb(255, 230, 0);
	transition: all .3s;
}



.menu .cooperate-open {
	display: none;
}

.menu>li:hover .cooperate-open {
	display: block;
	display: absolute;
}


.menu .course {
	display: none;
}

.menu .course a {
	font-size: 17px;
}

.ipadsignin {
	display: none;
}

@media (max-width:768px) {

	.ipadsignin {
		margin: 0 auto;
		display: block;
		border-radius: 50px;
		width: 90%
	}
}

@media (max-width:1149px) {
	.menu .course li a {
		font-size: 13px;
	}


}

@media(max-width:1117px) {
	.reward-score {
		font-size: 18px;
	}
}

@media (max-width:1009px) {
	.activities li a {
		font-size: 14px;
	}



	.WRO-rewards1 {
		display: block;
		margin-top: 40px;
	}

	.wrovideo {
		display: block;
		margin: 30px auto 10px auto;
	}
}

@media(max-width:869px) {
	.topmenu li a {
		display: block;
		width: 110px;
		height: 50px;
		line-height: 50px;
		text-align: center;
		font-size: 16px;
		text-decoration: none;
		font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
		font-weight: 700;
	}

	.activities li a {
		font-size: 13px;
	}

	.topmenu .course li a {
		font-size: 12px;
	}



	@media(max-width:799px) {
		.reward-score {
			margin: 0 auto;
			line-height: 45px;
			background: #3a97e9;
			color: white;
			font-size: 20px;
		}

		.wrovideo {
			margin: 0 auto;
			margin-bottom: 30px;
			border-radius: 30px;
		}


		.WRO-rewards1 {
			display: flex;
			flex-wrap: wrap;
			margin-top: 40px;
		}

		.topmenu .course li a {
			font-size: 10px;
		}

		.topmenu li a {
			display: block;
			width: 100px;
			height: 45px;
			line-height: 45px;
			text-align: center;
			font-size: 15px;
			text-decoration: none;
			font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
			font-weight: 700;
		}


	}

	@media(max-width:768px) {
		.reward-score {
			margin: 0 auto;
			line-height: 45px;
			background: #3a97e9;
			color: white;
			font-size: 20px;
			margin-top: 0;
		}



		.WRO-rewards1 {
			display: flex;
			flex-wrap: wrap;
		}

		.topmenu .course li a {
			font-size: 10px;
		}

		.topmenu li a {
			display: block;
			width: 100px;
			height: 45px;
			line-height: 45px;
			text-align: center;
			font-size: 15px;
			text-decoration: none;
			font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
			font-weight: 700;
			color: rgb(255, 230, 0);
			background: #0486f4;
		}


	}


}

@media(max-width:500px) {
	.reward-score{
		display: flex;
		flex-direction: column;
	}
}

@media(max-width:427px) {

	html,
	body {
		width: 100%;
	}
}

@media(max-width:469px) {
	.grid8phone {
		display: block;
		margin-left: 60px;
	}

}

@media(max-width:350px) {
	.grid8phone {
		margin-left: 40px;
	}
}


.menu>li:hover .course {
	display: block;
	display: absolute;
}


.indexcourse-intro .c {
	max-width: 419.34px;
	height: 400px;
}

.indexcourse-intro {
	display: flex;
	justify-content: flex-start;
}

.together {
	display: flex;
}

.pic5 {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}


.pic6 .c {
	display: flex;
	justify-content: space-evenly;
}

.wrovideo-1 {
	display: none;
}

.pic6 {
	display: none;
}

.pic5 .arrowicon {
	margin-bottom: 140px;
}




.pic5 .c .b {
	background: rgba(0, 0, 0, 0.7);
	position: absolute;
	text-align: center;
	align-items: center;
	justify-content: center;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	max-width: 100%;
	height: 100%;
	-webkit-transition: opacity 2s linear;
	-moz-transition: opacity 2s linear;
	-o-transition: opacity 2s linear;
	transition: opacity 2s linear;
	opacity: 0;
	filter: alpha(opacity=0);
}

.pic5 .c:hover .b,
.pic6 .c:hover .b {
	opacity: 100;
	filter: alpha(opacity=100);
}

.pic5 .c {
	position: relative
}

.icon {
	margin-top: 150px;
}

.pic5 .b h3 {
	color: white;
	font-size: 25px;
	margin-top: 120px;
	line-height: 50px;
	text-decoration: none;
}


.pic6 h3 {
	width: 250px;
	height: 250px;
	border-radius: 20%;
	background: rgb(249, 188, 75);
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
	font-size: 28px;
	line-height: 50px;
	justify-content: center;
	font-weight: 400;
	margin-top: 70px;
}

.pic5 .c .b h3:hover {
	color: rgb(255, 255, 116);
	font-weight: 400;
}

.pic6 .c .b h3:hover {
	font-weight: 700;
}

.container {
	max-width: 1200px;
}

@media(max-width:1116px) {
	.reward-score {
		font-size: 16px;
		margin-top: -100px;
		margin-bottom: 80px;
	}	
}

@media(max-width:1090px) {
	.pic6 {
		display: block;
	}

	.pic5 {
		display: none;
	}

	.reward-score {
		font-size: 15px;
	}

}

@media(max-width:879px) {
	.WRO-rewards1 {
		display: block;
	}


	.wrovideo {
		display: block;
		margin: 0 auto;
		margin-top: 20px;
	}
}



@media(max-width:768px) {
	

	.ipadsignin {
		width: 90%;
		margin-top: 50px;
	}

	.reward-score {
		margin-top: 0;
		margin-bottom: 50px;
	}	

}

@media(max-width:710px) {
	

	.pic6 h3 {
		width: 200px;
		height: 200px;
		font-size: 21px;
	}
}





/*about.html*/
#introduceVideo{
    display: block;            /* 讓它像圖片一樣獨立一行 */
    margin: 10px auto;         /* 自動置中 */
    width: 90%;                /* 跟 idol 一樣寬度 */
    aspect-ratio: 16 / 9;      /* 保持比例 */
}


.container .idol {
	margin: 10px auto 10px auto;
	display: block;
	border-radius: 50px;
}


.education,
.education-1 {
	margin: 0 auto;
	border-radius: 50px;
	display: flex;
	max-width: 1100px;
	font-size: 18px;
	line-height: 35px;
	font-weight: 400;
	background: rgb(232, 156, 64);
	color: white;
}


.education_topic{
	font-size: 45px;
	font-weight: 300;
	font-style: italic;	
}

.education p{
	padding:50px;
}

.education-1 {
	display: none;
}

.certificate {
	display: flex;
	justify-content: center;
}

.certificate-picture {
	margin: 0 auto;
	border: 5px solid rgb(54, 173, 167);
}

.container .learning-process {
	margin-left: 100px;
	border-radius: 50px;
}

.environment {
	display: block;
	margin: 0 auto;
}

@media(max-width:1149px) {

	.idol,
	.education {
		width: 90%;
	}

	.certificate {
		margin-left: -80px;

	}
}

@media(max-width:1024px) {
	.certificate {
		margin-left: -110px;
	}
}

@media(max-width:994px) {
	.certificate {
		display: block;
		margin: 0 auto;
	}

	.straw {
		margin-left: 150px;
	}

	.straw1 {
		margin: -170px auto 30px 170px;
	}

	.education-IMG {
		display: none;
	}
}

@media(max-width:875px) {
	.certificate {
		display: block;
		margin: 0 auto;
	}

	.straw {
		margin-left: 80px;
	}

	.straw1 {
		margin: -170px auto 30px 100px;
	}

	.education-IMG {
		display: none;
	}
}

@media(max-width:800px) {
	.idol {
		width: 100%;
	}

	.education {
		width: 100%;
		height: auto;
		font-size: 18px;
	}

	.straw {
		margin-left: 50px;
	}

	.straw1 {
		margin-left: 70px;
	}
}

@media(max-width:768px) {
	.container .idol {
		width: 95%;
		margin-left: 20px;
		margin-top: 20px;
		border-radius: 50px;
	}

	.education-IMG {
		display: none;
	}

	.environment {
		margin: 0 auto;
		margin-left: 150px;
	}

	.grid {
		display: none;
	}

	.grid-about-ipad {
		display: block;
	}
}

@media(max-width:732px) {
	.straw {
		margin-left: 10px;
	}

	.straw1 {
		margin-left: 30px;
	}

}

@media(max-width:649px) {
	.straw {
		margin-left: -10px;
	}

	.straw1 {
		margin-left: 20px;
	}

	.environment {
		margin-left: 90px;
	}

	.education_topic{
		font-size: 30px;
		font-weight: 500;
		letter-spacing: 1px;		
	}

	.education p{
		padding:30px;
	}
}

@media(max-width:600px) {
	.straw {
		margin-left: -30px;
	}

	.straw1 {
		margin-left: -15px;
	}

	.environment {
		margin-left: 90px;
	}

	.container .idol {
		display: none;
	}






}

@media(max-width:568px) {
	.education {
		font-size: 14px;
		padding: 20px;
	}

	.straw {
		margin-left: -60px;
		width: 80%;
	}

	.straw1 {
		margin-left: -30px;
		width: 100%;
	}

	.environment {
		margin-left: 50px;
	}


}

@media(max-width:546px) {

	.straw1 {
		width: 90%;
	}

	.environment {
		margin-left: 50px;
	}

	.education_topic{
		font-size: 20px;
	}

	.education p{
		padding:10px;
	}


}

@media(max-width:480px) {
	.straw1 {
		width: 90%;
	}

	.straw {
		width: 100%;
		margin-left: -90px;
	}

	.environment {
		width: 80%;
	}


}

@media(max-width:462px) {
	.straw1 {
		width: 90%;
	}

	.straw {
		width: 85%;
		margin-left: -90px;
	}

	.environment {
		width: 80%;
	}

	

	.education-1 {
		display: block;
		font-size: 14px;
		padding: 20px;
		height: auto;
	}

	


}

@media(max-width:320px) {
	.straw {
		width: 80%;
	}

	.straw1 {
		margin-top: -200px;
	}

}



/* teacher.html */

.bg {
	background-image: url(../images/師資背景圖.png);
	background-repeat: no-repeat;
}

/* cooperate.html */

.cooperate-class {
	display: block;
	margin: 0 auto;
}

@media(max-width:768px) {
	.cooperate-class {
		margin: 0 auto;
		display: block;
	}
}




/* course-ESM.html */

.grid2-ipad,
.grid2ipad1,
.grid2ipad2 {
	display: flex;
}

.introduceESM-1 {
	width: 270px;
	height: 270px;
	background: rgb(165, 204, 168);
	text-align: center;
	color: rgb(255, 255, 255);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 30px;
	font-family: 'Times New Roman', Times, serif;
	font-weight: 400;
	line-height: 40px;
	margin-right: 40px;
}

.introduceESM-2 {
	width: 700px;
	height: 300px;
	border-radius: 30px;
	background: rgb(159, 177, 189);
	text-align: center;
	color: white;
	font-size: 23px;
	display: flex;
	font-weight: 350;
	line-height: 40px;
	justify-content: center;
	align-items: center;
	margin-right: 30px;
}

.introduceESM {
	display: flex;
	justify-content: center;
	margin-top: 150px;
	margin-bottom: 30px;
}

.experience1 {
	margin: 10px auto 30px auto;
	display: block;
	border-radius: 10px;
}

.introduceESM-2-320 {
	display: none;
}

.titleESM-images {
	margin-top: 50px;
}

.introduceESM-title {
	width: 250px;
	height: 250px;
	border-radius: 50%;
	background: rgb(255, 230, 0);
	color: rgb(24, 24, 24);
	text-align: center;
	font-size: 25px;
	font-weight: 500;
	line-height: 250px;
	margin-top: 50px;
	margin-bottom: 50px;
}

.ESM-title {
	display: flex;
	justify-content: center;
}

.ESM-video {
	display: block;
	margin: 0 auto;
}

.ESM-only {
	display: none;
}


@media(max-width:1092px) {
	.unnamed {
		display: none;
	}

	.box1 {
		margin-right: 50px;
		width: 90%;
	}

	.fb-ig p {
		width: 90%;
	}

	.robotcc {
		margin-left: -100px;
		width: 50%;
	}



}

@media(max-width:1009px) {
	.introduceESM {
		display: block;
		margin: 0 auto;
	}

	.introduceESM-1,
	.introduceESM-2 {
		margin: 0 auto;
		margin-bottom: 20px;
	}

	.experience1,
	.experience4 {
		width: 85%;
	}

}

@media(max-width:798px) {

	.introduceESM-1,
	.introduceESM-2 {
		margin: 0 auto;
		margin-bottom: 20px;
	}

	.introduceESM-1 {
		margin: -90px auto 30px auto;
	}

	.experience1 {
		width: 90%;
	}

}

@media(max-width:768px) {
	#swiper2 {
		display: none;
	}

	.ESM-only {
		display: block;
		width: 95%;
		border-radius: 20px;
		margin: 0 auto;

	}

	.introduceESM {
		display: block;
		justify-content: center;
		margin-top: 30px;
		margin-bottom: 30px;
	}

	.introduceESM-1 {
		margin: 0 auto;
		margin-bottom: 20px;
	}


	.introduceESM-2 {
		width: 100%;
		margin: 0 auto;
		padding: 10px;
	}


	.titleESM-images {
		margin-left: 60px;
		margin-top: -0.1px;
	}

	.ESM-video {
		display: none;
	}

	.ESM-title {
		display: flex;
		max-width: 1300px;
	}

	.introduceESM-title {
		margin-top: 10px;
	}

	.grid2 {
		display: block;
	}
}

@media(max-width:765px) {
	.grid2 {
		display: none;
	}

	.grid2-ipad-item,
	.grid2ipad1,
	.grid2ipad2 {
		display: block;
	}



}

@media(max-width:750px) {
	.introduceESM-1 {
		width: 230px;
		height: 230px;
		margin: 0 auto;
		font-size: 25px;
	}

	.introduceESM-2 {
		width: 570px;
		height: 260px;
		font-size: 18px;
		margin: 20px auto 20px auto;
	}

	.introduceESM-title {
		width: 230px;
		height: 230px;
		font-size: 23px;
		margin-top: -10px;
	}

	.titleESM-images {
		width: 270px;
		height: 270px;
		margin-left: 10px;

	}

	.ESM-title {
		display: flex;
		justify-content: center;
	}

	.ESM-only {
		margin: 0 auto;
	}




}

@media(max-width:640px) {
	.introduceESM-1 {
		width: 200px;
		height: 200px;
		margin: 0 auto;
		font-size: 25px;
	}

	.introduceESM-2 {
		width: 520px;
		height: 260px;
		font-size: 17px;
		margin: 20px auto 20px auto;
	}

	.introduceESM-title {
		width: 200px;
		height: 200px;
		font-size: 18px;
		margin-top: -10px;
		line-height: 200px;
	}

	.titleESM-images {
		width: 270px;
		height: 270px;
		margin-left: 10px;

	}

	.ESM-title {
		display: flex;
		justify-content: center;

	}

}

@media(max-width:580px) {

	.introduceESM-1 {
		font-size: 23px;
	}

	.introduceESM-2 {
		width: 500px;
		height: 220px;
		font-size: 17px;
		margin: 20px auto 20px auto;
	}

	.introduceESM-title {
		width: 200px;
		height: 200px;
		font-size: 18px;
		margin-top: -10px;
		line-height: 200px;
	}

	.titleESM-images {
		width: 270px;
		height: 270px;
		margin-left: 10px;

	}

	.ESM-title {
		display: flex;
		justify-content: center;

	}

}

@media(max-width:540px) {

	.introduceESM-1 {
		width: 170px;
		height: 170px;
		margin: 0 auto;
		font-size: 20px;
	}

	.introduceESM-2 {
		width: 470px;
		height: 220px;
		font-size: 16px;
		margin: 20px auto 20px auto;
	}

	.introduceESM-title {
		width: 170px;
		height: 170px;
		font-size: 16px;
		margin-top: 0px;
		line-height: 170px;
	}

	.titleESM-images {
		width: 230px;
		height: 230px;
		margin-left: 10px;

	}

	.ESM-title {
		display: flex;
		justify-content: center;

	}

}

@media(max-width:516px) {
	.introduceESM-2 {
		font-size: 14px;
		width: 430px;
	}

	@media(max-width:470px) {
		.introduceESM-2 {
			font-size: 12px;
			width: 370px;
		}

		.introduceESM-1 {
			width: 150px;
			height: 150px;
			margin: 0 auto;
			font-size: 17px;
		}

		.titleESM-images {
			width: 200px;
			height: 200px;
			margin-left: 10px;
		}

		.introduceESM-title {
			width: 150px;
			height: 150px;
			font-size: 16px;
			margin-top: 0px;
			line-height: 150px;
		}





	}
}

@media(max-width:481px) {
	.introduceESM-2 {
		font-size: 13px;
		width: 430px;
	}

	@media(max-width:470px) {
		.introduceESM-2 {
			font-size: 12px;
			width: 370px;
		}

		.introduceESM-1 {
			width: 150px;
			height: 150px;
			margin: 0 auto;
			font-size: 17px;
		}

		.titleESM-images {
			width: 200px;
			height: 200px;
			margin-left: 10px;
		}

		.introduceESM-title {
			width: 150px;
			height: 150px;
			font-size: 16px;
			margin-top: 0px;
			line-height: 150px;
		}





	}
}

@media(max-width:393px) {
	.fb-ig img {
		width: 50%;
		margin-right: 20px;
	}
}

@media(max-width:369px) {
	.footer .box1 {
		width: 400px;
	}

}

/* course-SPM.html */

.introduceSPM-1 {
	width: 300px;
	height: 300px;
	background: rgb(165, 204, 168);
	text-align: center;
	color: rgb(255, 255, 255);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 30px;
	font-family: 'Times New Roman', Times, serif;
	font-weight: 400;
	line-height: 40px;
}


.introduceSPM-2 {
	width: 700px;
	height: 300px;
	border-radius: 30px;
	background: rgb(159, 177, 189);
	text-align: center;
	color: white;
	font-size: 23px;
	display: flex;
	font-weight: 350;
	line-height: 40px;
	justify-content: center;
	align-items: center;
}

.introduceSPM {
	display: flex;
	justify-content: space-evenly;
	margin-top: 70px;
	margin-bottom: 30px;

}

.experience {
	margin: 50px auto 50px auto;
	display: block;
	border-radius: 10px;
}

.titleSPM-images {
	margin-top: 50px;
}



.introduceSPM-title {
	width: 250px;
	height: 250px;
	border-radius: 50%;
	background: rgb(255, 230, 0);
	color: rgb(24, 24, 24);
	text-align: center;
	font-size: 30px;
	font-weight: 500;
	line-height: 250px;
	margin-top: 50px;
	margin-bottom: 50px;

}

.courseSPM-title {
	display: flex;
	justify-content: center;
	width: 100%;
	margin-top: 30px;

}

.SPM-only {
	display: none;
}

.SPM-dog {
	margin: 0 auto;
	display: block;
}

.introduceSPM-2-iphone {
	width: 100%;
	height: auto;
	border-radius: 30px;
	background: rgb(159, 177, 189);
	text-align: center;
	color: white;
	font-size: 13px;
	display: flex;
	font-weight: 350;
	line-height: 40px;
	justify-content: center;
	align-items: center;
	display: none;

}

.grid1-ipad {
	display: none;
}

@media(max-width:1059px) {
	.introduceSPM {
		display: block;
	}

	.introduceSPM-1,
	.introduceSPM-2 {
		margin: 0 auto;
		margin-bottom: 20px;
	}

	.introduceSPM-1 {
		margin-top: -30px;
	}

	.experience {
		width: 85%;
	}



}

@media(max-width:920px) {
	.introduceSPM-2 {
		margin-bottom: 40px;
	}

	.introduceSPM-1 {
		margin-top: -100px;
	}

	.experience {
		width: 90%;
	}



}

@media(max-width:799px) {
	.introduceSPM-1 {
		margin-top: -200px;
	}

	.experience {
		width: 90%;
	}



}

@media(max-width:768px) {
	.SPM-only {
		display: block;
		width: 95%;
		;
		margin-left: 20px;
		border-radius: 20px;
	}

	#swiper3 {
		display: none;
	}


	.introduceSPM {
		display: block;
		max-width: 740px;
		margin-top: 30px;
	}

	.introduceSPM-1 {
		margin: 20px auto 30px auto;
	}

	.introduceSPM-2 {
		width: 90%;
		margin: 0 auto;

	}

	.courseSPM-title {
		text-align: center;
		margin-top: 30px;
		display: flex;

	}

	.introduceSPM-title {
		font-family: Verdana, Geneva, Tahoma, sans-serif;
		font-weight: 400;
		margin-top: 10px;
	}

	.titleSPM-images {
		margin-left: 60px;
		margin-top: -0.1px;
	}

	.SPM-dog {
		display: none;
	}

	.grid1-ipad {
		display: none;
	}

	.grid1 {
		display: block;
	}


}

@media(max-width:765px) {
	.grid1 {
		display: none;
	}

	.grid1-ipad {
		display: block;
	}

}

@media(max-width:745px) {
	.introduceSPM-1 {
		width: 250px;
		height: 250px;
		font-size: 28px;
	}

	.introduceSPM-2 {
		width: 90%;
		height: 250px;
		font-size: 20px;
	}

	.titleSPM-images {
		width: 300px;
		height: 300px;
	}

	.introduceSPM-title {
		width: 230px;
		height: 230px;
		border-radius: 50%;
		background: rgb(255, 230, 0);
		color: rgb(107, 105, 105);
		text-align: center;
		font-size: 28px;
		font-weight: 400;
		line-height: 230px;

	}






}

@media(max-width:662px) {
	.introduceSPM-1 {
		font-size: 25px;
	}

	.introduceSPM-2 {
		width: 80%;
		height: 250px;
		font-size: 17px;
	}

	.titleSPM-images {
		margin-left: -20px;
	}
}

@media(max-width:646px) {
	.SPM-only {
		margin-left: 15px;
	}

}

@media(max-width:624px) {
	.introduceSPM-1 {
		font-size: 25px;
	}

	.introduceSPM-2 {
		width: 100%;
		height: 250px;
		font-size: 16px;
	}

	.titleSPM-images {
		margin-left: -20px;
	}
}

@media(max-width:568px) {
	.introduceSPM-1 {
		font-size: 25px;
		width: 230px;
		height: 230px;
		font-size: 25px;
	}

	.introduceSPM-2 {
		width: 100%;
		height: 250px;
		font-size: 16px;
	}

	.titleSPM-images {
		margin-left: -20px;
	}
}

@media(max-width:550px) {
	.SPM-only {
		width: 100%;
		margin: 0 auto;
	}

	.introduceSPM-1 {
		font-size: 25px;
		width: 200px;
		height: 200px;
		font-size: 20px;
	}

	.introduceSPM-2 {
		width: 100%;
		height: 250px;
		font-size: 16px;
	}

	.titleSPM-images {
		width: 250px;
		height: 250px;
		margin-top: 10px;
	}

	.introduceSPM-title {
		width: 200px;
		height: 200px;
		border-radius: 50%;
		background: rgb(255, 230, 0);
		color: rgb(107, 105, 105);
		text-align: center;
		font-size: 25px;
		font-weight: 400;
		line-height: 200px;

	}
}

@media(max-width:492px) {
	.introduceSPM-1 {
		font-size: 25px;
		width: 170px;
		height: 170px;
		font-size: 18px;
	}

	.introduceSPM-2 {
		width: 100%;
		height: 250px;
		font-size: 16px;
	}

	.titleSPM-images {
		width: 230px;
		height: 230px;
		margin-top: 10px;
	}

	.introduceSPM-title {
		width: 170px;
		height: 170px;
		border-radius: 50%;
		background: rgb(255, 230, 0);
		color: rgb(107, 105, 105);
		text-align: center;
		font-size: 23px;
		font-weight: 400;
		line-height: 170px;

	}

}

@media(max-width:480px) {
	.introduceSPM-2 {
		width: 100%;
		height: 250px;
		font-size: 14px;
	}


}

@media(max-width:430px) {
	.introduceSPM-2 {
		width: 100%;
		height: 200px;
		font-size: 13px;
	}

	.titleSPM-images {
		width: 200px;
		height: 200px;
		margin-top: 10px;
	}

	.introduceSPM-title {
		font-size: 22px;


	}


}

@media(max-width:400px) {
	.introduceSPM-2 {
		width: 95%;
		font-size: 12px;
	}



}

@media(max-width:384px) {
	.titleSPM-images {
		width: 180px;
		height: 180px;
		margin-top: 10px;
	}

	.introduceSPM-title {
		width: 150px;
		height: 150px;
		border-radius: 50%;
		background: rgb(255, 230, 0);
		color: rgb(107, 105, 105);
		text-align: center;
		font-size: 20px;
		font-weight: 400;
		line-height: 150px;

	}



}

@media(max-width:383px) {
	.titleSPM-images {
		width: 180px;
		height: 180px;
		margin-top: 10px;
	}

	.introduceSPM-title {
		width: 150px;
		height: 150px;
		border-radius: 50%;
		background: rgb(255, 230, 0);
		color: rgb(107, 105, 105);
		text-align: center;
		font-size: 20px;
		font-weight: 400;
		line-height: 150px;
	}

	.introduceSPM-2 {
		width: 100%;
		height: auto;
		font-size: 12px;
	}



}

@media(max-width:365px) {
	.titleSPM-images {
		width: 160px;
		height: 160px;
		margin-top: 10px;
	}

	.introduceSPM-title {
		width: 130px;
		height: 130px;
		border-radius: 50%;
		background: rgb(255, 230, 0);
		color: rgb(107, 105, 105);
		text-align: center;
		font-size: 18px;
		font-weight: 400;
		line-height: 130px;
	}

	.introduceSPM-2 {
		width: 100%;
		height: auto;
		font-size: 12px;
	}

	.introduceSPM-1 {
		width: 150px;
		height: 150px;
		font-size: 14px;
	}

	.introduceSPM-2 {
		display: none;
	}

	.introduceSPM-2-iphone {
		display: block;
		height: auto;
		width: 100%;
		font-size: 12px;
		padding-bottom: 10px;
	}

}




/* wedo.html */

.wedopic {
	margin: 0 auto;
	margin-top: 30px;
	display: flex;
}

.introducewedo-1 {
	width: 300px;
	height: 300px;
	background: rgb(165, 204, 168);
	text-align: center;
	color: rgb(255, 255, 255);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 30px;
	font-family: 'Times New Roman', Times, serif;
	font-weight: 400;
	line-height: 40px;
}


.introducewedo-2 {
	width: 700px;
	border-radius: 30px;
	background: rgb(159, 177, 189);
	text-align: center;
	color: white;
	font-size: 24px;
	display: flex;
	font-weight: 350;
	line-height: 40px;
	justify-content: center;
	align-items: center;
}

.introducewedo-2-phone {
	width: 100%;
	border-radius: 30px;
	background: rgb(159, 177, 189);
	text-align: center;
	color: white;
	font-size: 13px;
	display: flex;
	font-weight: 350;
	line-height: 40px;
	justify-content: center;
	align-items: center;
	display: none;
}

.introducewedo {
	display: flex;
	justify-content: space-evenly;
	margin-top: 70px;
	margin-bottom: 30px;

}

.experiencewedo {
	margin: 0 auto;
	margin-top: 50px;
	display: block;
	border-radius: 10px;
}

.titlewedo-images {
	margin-top: 50px;
}

.introducewedo-title {
	width: 250px;
	height: 250px;
	border-radius: 50%;
	background: rgb(255, 230, 0);
	color: rgb(107, 105, 105);
	text-align: center;
	font-size: 30px;
	font-weight: 400;
	line-height: 250px;
	margin-top: 50px;
	margin-bottom: 50px;

}


.coursewedo-title {
	text-align: center;
	margin-top: 30px;
	width: 100%;
	display: flex;
	justify-content: center;

}

.wedo-video {
	margin-top: 60px;
}

.wedo-video-ipad,
.wedo-video-phone,
.wedo-video-phoneSE {
	display: none;
}

.wedo-top-picture {
	margin-top: 300px;
	margin-right: 50px
}

@media(max-width:1141px) {
	.wedo-video {
		width: 700px;
		height: 400px;
	}
}

@media(max-width:1049px) {
	.experiencewedo {
		width: 90%;
	}

	.introducewedo {
		display: block;
	}

	.introducewedo-1 {
		margin: -50px auto 30px auto;
	}

	.introducewedo-2 {
		margin: 0 auto;
	}




}

@media(max-width:1005px) {
	.wedo-video {
		width: 600px;
		height: 400px;
	}
}

@media(max-width:864px) {
	.wedo-video {
		width: 500px;
		height: 350px;
	}
}

@media(max-width:772px) {
	.wedo-video {
		width: 450px;
		height: 350px;
	}
}

@media(max-width:768px) {

	.wedo-video-ipad {
		display: block;
	}

	.wedo-video {
		display: none;
	}

	.wedo-top-picture {
		margin: 170px 0 0 20px;
		width: 60%
	}

	.introducewedo-1 {
		margin: 0 auto;
		margin: -30px auto 30px auto;
	}

	.introducewedo-2 {
		width: 80%;
		font-size: 22px;
		margin: 0 auto;
	}

	.introducewedo {
		display: block;
		margin-top: 70px;
		margin-bottom: 30px;
	}


	.coursewedo-title {
		text-align: center;
		display: flex;
		justify-content: center;
		max-width: 1300px;
		margin-top: -20px;
	}

}

@media(max-width:746px) {
	.introducewedo-2 {
		width: auto;
		height: auto;
		margin: 0 auto;
	}

	.introducewedo-1 {
		font-size: 23px;
		width: 230px;
		height: 230px;
	}




	@media(max-width:660px) {
		.titlewedo-images {
			width: 250px;
			height: 250px;
		}

		.introducewedo-title {
			width: 200px;
			height: 200px;
			border-radius: 50%;
			background: rgb(255, 230, 0);
			color: rgb(107, 105, 105);
			text-align: center;
			font-size: 25px;
			font-weight: 400;
			line-height: 200px;
			margin-top: 50px;
			margin-bottom: 50px;

		}

	}

	@media(max-width:590px) {
		.wedo-top-picture {
			display: none;
		}

	}

	.titlewedo-images {
		width: 220px;
		height: 220px;
	}

	.introducewedo-title {
		width: 180px;
		height: 180px;
		font-size: 25px;
		line-height: 180px;
	}

	.wedo-video-ipad {
		display: none;
	}

	.wedo-video-phone {
		display: block;
	}

}

.introducewedo-1 {
	font-size: 20px;
	width: 200px;
	height: 200px;
}

.introducewedo-1 {
	font-size: 20px;
	width: 200px;
	height: 200px;
}

.titlewedo-images {
	width: 200px;
	height: 200px;
}

.introducewedo-title {
	width: 160px;
	height: 160px;
	font-size: 23px;
	line-height: 160px;
}

.introducewedo-1 {
	font-size: 18px;
	width: 180px;
	height: 180px;
}

.titlewedo-images {
	width: 180px;
	height: 180px;
}

.introducewedo-title {
	width: 140px;
	height: 140px;
	font-size: 20px;
	line-height: 140px;
}

.wedo-video-phoneSE {
	display: block;
}

.wedo-video-phone {
	display: none;
}


@media(max-width:373px) {
	.introducewedo-2 {
		display: none;
	}

	.introducewedo-2-phone {
		display: block;
		padding-top: 20px;
		margin-top: -10px;
	}

	.introducewedo-1 {
		font-size: 16px;
		width: 160px;
		height: 160px;
	}

	.titlewedo-images {
		width: 150px;
		height: 150px;
	}

	.introducewedo-title {
		width: 120px;
		height: 120px;
		font-size: 16px;
		line-height: 120px;
		margin-left: -10px;
	}
}


/* 機器人程式設計 */

.introduce程式-1 {
	width: 270px;
	height: 270px;
	background: rgb(165, 204, 168);
	text-align: center;
	color: rgb(255, 255, 255);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 30px;
	font-family: 'Times New Roman', Times, serif;
	font-weight: 400;
	line-height: 40px;
	margin-right: 40px;
}

.introduce程式-2 {
	width: 800px;
	height: 300px;
	border-radius: 30px;
	background: rgb(159, 177, 189);
	text-align: center;
	color: white;
	font-size: 23px;
	display: flex;
	font-weight: 350;
	line-height: 45px;
	justify-content: center;
	align-items: center;
	margin-right: 30px;
}

.introduce程式-2-phone,
.introduce程式-2-phone320 {
	width: 90%;
	border-radius: 30px;
	background: rgb(159, 177, 189);
	text-align: center;
	color: white;
	font-size: 13px;
	display: flex;
	font-weight: 350;
	line-height: 45px;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
}

.introduce程式 {
	display: flex;
	justify-content: center;
	margin-top: 70px;
	margin-bottom: 30px;

}

.experience {
	margin: 0 auto;
}

.experience3 {
	margin-top: 50px;
	display: block;
	border-radius: 10px;
	margin: 0 auto;
}

.title程式-images {
	margin-top: 50px;
}

.introduce程式-title {
	width: 250px;
	height: 250px;
	border-radius: 50%;
	background: rgb(255, 230, 0);
	color: rgb(24, 24, 24);
	text-align: center;
	font-size: 25px;
	font-weight: 500;
	line-height: 250px;
	margin-top: 50px;
	margin-bottom: 50px;
}

.introduce程式-2-phone,
.introduce程式-2-phone320 {
	display: none;
}

.course程式-title {
	width: 100%;
	margin-top: 30px;
	display: flex;
	justify-content: center;

}

.program-video {
	display: block;
	margin: 0 auto;
	margin-bottom: 50px;
}

.program-video-ipad {
	display: none;
}


@media(max-width:1166px) {
	.introduce程式 {
		display: block;
	}

	.introduce程式-1 {
		margin: 0 auto;
		margin: -20px auto 30px auto;
	}

	.introduce程式-2 {
		margin: 0 auto;
	}

	.experience {
		width: 90%;
	}

	.introducepython {
		display: flex;
		margin: 30px auto 30px auto;
	}
}

@media(max-width:1149px) {

	.introduce程式-1 {
		margin: 0 auto;
		margin: -100px auto 30px auto;
	}

}

@media(max-width:1024px) {
	.introduce程式-1 {
		margin: -30px auto 30px auto;
	}

	.introduce程式-2 {
		margin: 20px auto 30px auto;
	}

	.introduce程式 {
		display: block;
		margin: 0 auto;
	}

	.introducepython-1 {
		margin: 30px auto -30px 200px;
	}
}

@media(max-width:1009px) {

	.introduce程式-1 {
		margin: -100px auto 30px auto;
	}

}


@media(max-width:400px) {
	.introduceESM-2 {
		font-size: 12px;
		height: auto;
		width: 100%;
	}
}

@media(max-width:384px) {
	.introduceESM-2 {
		display: none;
	}

	.introduceESM-2-320 {
		display: block;
		width: 100%;
		height: 180px;
		border-radius: 30px;
		background: rgb(159, 177, 189);
		text-align: center;
		color: white;
		font-size: 13px;
		line-height: 25px;
		padding: 15px;
		margin-top: 10px;
	}

	.titleESM-images {
		width: 200px;
		height: 200px;
		margin-left: -20px;


	}
}

@media(max-width:375px) {
	.introduceESM-2 {
		font-size: 12px;
		height: auto;
		width: 350px;
	}

}

@media(max-width:320px) {
	.introduceESM-1 {
		width: 130px;
		height: 130px;
		margin-left: 80px;
		font-size: 16px;
	}

	.introduceESM-2 {
		display: none;

	}

	.introduceESM-title {
		width: 230px;
		height: 230px;
		font-size: 23px;
		margin-top: -10px;
	}

	.titleESM-images {
		width: 270px;
		height: 270px;
		margin-left: 10px;

	}

	.ESM-title {
		display: flex;
		justify-content: center;

	}

	.introduceESM-2-320 {
		display: block;
		width: 100%;
		height: 180px;
		border-radius: 30px;
		background: rgb(159, 177, 189);
		text-align: center;
		color: white;
		font-size: 13px;
		line-height: 25px;
		padding: 15px;
		margin-top: 10px;
	}

	.introduceESM-title {
		width: 130px;
		height: 130px;
		font-size: 13px;
		font-weight: 500;
		line-height: 130px;
		font-weight: 350;
	}

	.titleESM-images {
		width: 150px;
		height: 150px;
		margin-left: -20px;
	}

	.ESM-title {
		margin-bottom: -30px;
	}

}

@media(max-width:982px) {
	.introduce程式-1 {
		margin: -100px auto 30px auto;
	}
}

@media(max-width:890px) {
	.introduce程式-1 {
		margin-top: -100px;
	}

	.introduce程式-2 {
		width: 95%;
		padding: 10px;
		font-size: 20px;
		margin: 0 auto;
		margin-bottom: 20px;
	}

}

@media(max-width:799px) {
	.introduce程式-2 {
		width: 80%;
	}

	.introduce程式-1 {
		margin-top: -200px;
	}

	.introduce程式-2 {
		width: 95%;
		font-size: 20px;
	}
}

@media(max-width:768px) {
	.introduce程式 {
		display: block;
		margin-top: 20px;
		max-width: 740px;
	}

	.introduce程式-1 {
		margin: 0 auto;
		margin-bottom: 20px;

	}

	.introduce程式-2 {
		width: 95%;
		padding: 10px;
		font-size: 20px;
		margin: 0 auto;
	}

	.program-video {
		display: none;
	}

	.program-video-ipad {
		margin: 20px auto 20px 90px;
	}

	.introduce程式-ipad {
		margin-bottom: 30px;
	}






}

@media(max-width:749px) {
	.introduce程式 {
		display: block;
		margin-top: 20px;
		max-width: 740px;
	}

	.introduce程式-1 {
		width: 230px;
		height: 230px;
		font-size: 25px;
	}

	.introduce程式-2 {
		width: 90%;
		padding: 10px;
		font-size: 16px;
		margin: 0 auto;
	}

	.program-video {
		display: none;
	}

	.program-video-ipad {
		margin: 20px auto 20px 90px;
	}

	.introduce程式-ipad {
		margin-bottom: 30px;
	}





}

@media(max-width:702px) {
	.introduce程式-title {
		width: 230px;
		height: 230px;
		font-size: 22px;
	}

	.title程式-images {
		width: 280px;
		height: 280px;
	}
}

@media(max-width:646px) {
	.introduce程式-2 {
		width: 90%;
		font-size: 13px;
	}

	.title程式-images {
		width: 300px;
		height: 300px;
	}

}

@media(max-width:584px) {
	.introduce程式-title {
		width: 200px;
		height: 200px;
		line-height: 200px;
		font-size: 18px;
	}

	.title程式-images {
		width: 250px;
		height: 250px;
	}

	.introduce程式-1 {
		width: 200px;
		height: 200px;
		font-size: 18px;
	}

}

@media(max-width:535px) {
	.introduce程式-2 {
		width: 85%;
		font-size: 12px;
		display: none;
	}

	.introduce程式-2-phone {
		display: block;
	}
}

@media(max-width:496px) {
	.introduce程式-title {
		width: 140px;
		height: 140px;
		font-size: 13px;
		line-height: 140px;
	}

	.title程式-images {
		width: 180px;
		height: 180px;
	}

	.introduce程式-1 {
		width: 180px;
		height: 180px;
	}

	.introduce程式-2-phone {
		width: 100%;
	}

}

@media(max-width:374px) {
	.introduce程式-2-phone {
		line-height: 30px;
		font-size: 12px;
	}

}

@media(max-width:330px) {
	.introduce程式-2-phone320 {
		display: block;
		line-height: 30px;
		font-size: 12px;
		width: 100%;
	}

	.introduce程式-2-phone {
		display: none;
	}

	.introduce程式-title {
		width: 120px;
		height: 120px;
		font-size: 12px;
		line-height: 120px;
	}

	.title程式-images {
		width: 160px;
		height: 160px;
	}

	.introduce程式-1 {
		width: 140px;
		height: 140px;
		font-size: 14px;
	}

}




/* 機器人實驗班 WRO */

.wropic {
	margin: 0 auto;
}

.fllpic {
	margin: 0 auto;
}

.introduceWRO {
	display: flex;
	justify-content: center;
	margin-right: 70px;

}

.introduceWRO-1 {
	width: 300px;
	height: 300px;
	background: rgb(165, 204, 168);
	text-align: center;
	color: rgb(255, 255, 255);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 30px;
	font-family: 'Times New Roman', Times, serif;
	font-weight: 400;
	line-height: 40px;
	margin: 20px 20px 20px 80px;
}


.introducefll-1 {
	width: 300px;
	height: 300px;
	background: rgb(165, 204, 168);
	text-align: center;
	color: rgb(255, 255, 255);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 30px;
	font-family: 'Times New Roman', Times, serif;
	font-weight: 400;
	line-height: 40px;
	margin-top: 20px;
	margin-left: 250px;
}

.FLL-pic {
	width: 500px;
	margin: 80px 0 30px 0;
}

.introduceWRO-2,
.introducefll-2 {
	width: 1000px;
	height: 500px;
	border-radius: 30px;
	background: rgb(159, 177, 189);
	color: white;
	font-size: 23px;
	display: flex;
	font-weight: 350;
	line-height: 55px;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
	padding: 20px;
}

.introduceWRO {
	margin-top: 70px;
	margin-bottom: 30px;
	width: 100%;
}

.introducefll {
	display: flex;
	justify-content: center;
}

.experience4 {
	border-radius: 10px;
	display: block;
	margin: 30px auto 50px auto;
}

.introducefll-title {
	width: 250px;
	height: 250px;
	border-radius: 50%;
	background: rgb(255, 230, 0);
	color: rgb(24, 24, 24);
	text-align: center;
	font-size: 30px;
	font-weight: 500;
	line-height: 250px;
	margin-bottom: 50px;
}

.wro-video-ipad320,
.introduceWRO-2-phone428 {
	display: none;
}

.introduceWRO-title {
	width: 250px;
	height: 250px;
	border-radius: 50%;
	background: rgb(255, 230, 0);
	color: rgb(24, 24, 24);
	text-align: center;
	font-size: 30px;
	font-weight: 500;
	line-height: 250px;
}

.courseWRO-title,
.coursefll-title {
	width: 100%;
	display: flex;
	justify-content: center;
}



.wropic2 {
	display: flex;
	flex-direction: column;
	margin-right: 50px;
}


.white {
	max-width: 1120px;
	height: 100px;
}

.wrologo {
	margin-bottom: 20px;
	margin-right: 120px;
}

.wropicture {
	margin-bottom: 20px;
	margin-right: 120px;
}

.wro-video {
	margin: 40px auto 40px auto;
}

.introduceWRO-2-phone,
.introducefll-2-phone {
	border-radius: 30px;
	background: rgb(159, 177, 189);
	color: white;
	font-size: 12px;
	display: flex;
	font-weight: 350;
	line-height: 45px;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
	padding: 10px;
	display: none;
}

.introduceWRO-2-phone428,
.introduceWRO-2-phone384,
.introduceWRO-2-phone320 {
	border-radius: 30px;
	background: rgb(159, 177, 189);
	color: white;
	font-size: 12px;
	display: flex;
	font-weight: 350;
	line-height: 30px;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
	padding: 20px;
	width: 100%;
	display: none;
}

.wro-video-ipad {
	display: none;
}

.wro-video-ipadsmall,
.introducefll-2-phone {
	display: none;
}

.FLL-video {
	display: block;
	margin: 20px auto 20px auto;
}

.FLL-pic {
	margin-bottom: 20px;
	margin-right: 120px;
}



@media(max-width:1233px) {
	.introducefll {
		display: block;
		margin-left: 200px;
	}

	.FLL-pic {
		margin: 0 auto 0 200px;
	}





}

@media(max-width:1176px) {
	.introducefll {
		display: block;
		margin-left: 150px;
	}

	.FLL-pic {
		margin: 0 auto 0 200px;
	}




}

@media(max-width:1088px) {

	.introduceWRO {
		display: block;
	}

	.introduceWRO-1 {
		margin: -30px auto 30px auto;
	}

	.wropic2,
	.wro-logo,
	.wro-picture {
		margin: 0 auto;
		display: block;
	}

	.introducefll-2 {
		width: 80%;
		height: auto;
		padding: 10px;
		font-size: 18px;
	}

}

@media(max-width:1024px) {
	.introducefll-1 {
		margin-left: 200px;
	}

	.FLL-pic {
		margin: 0 auto 0 160px;
	}


}

@media(max-width:998px) {
	.wropic {
		width: 95%;
		border-radius: 20px;
	}

	.introduceWRO {
		flex-wrap: wrap;
	}

	.wro-picture {
		border-radius: 20px;
		margin-top: 20px;
	}

	.introduceWRO-2 {
		width: 80%;
		height: auto;
		font-size: 16px;
		line-height: 50px;
		padding: 20px;
	}

	.wro-video {
		display: none;
	}

	.wro-video-ipad {
		display: block;
		margin: 30px auto 30px auto;

	}

	.courseWRO-title {
		margin: 20px auto 20px auto;
	}

	.introducefll {
		display: block;
	}

	.introducefll-2 {
		width: 90%;
	}

	.introducefll-1 {
		margin-left: 150px;
	}

	.FLL-pic {
		margin: 0 auto 0 100px;
	}


}

@media(max-width:888px) {
	.introduceWRO-2 {
		width: 95%;
		height: auto;
		font-size: 16px;
		line-height: 50px;
		padding: 20px;
	}

	.introducefll-2 {
		margin-top: -30px;
		width: 95%;
		height: auto;
		padding: 10px;
		font-size: 18px;
	}
}

@media(max-width:869px) {
	.introduceWRO-2 {
		width: 95%;
		height: 450px;
		font-size: 18.5px;
	}

	.experience4 {
		width: 95%;
	}

	.introducefll-2 {
		width: 98%;
		height: auto;
		padding: 10px;
		font-size: 18px;
	}
}

@media(max-width:843px) {
	.introducefll {
		display: block;
	}

	.introducefll-1 {
		margin: 30px auto 30px auto;
	}

	.FLL-pic {
		margin: 30px auto 30px 200px;
	}

}

@media(max-width:862px) {
	.introduceWRO-2 {
		width: 90%;
		height: auto;
		font-size: 15px;
		line-height: 50px;
		padding: 20px;
	}
}

@media(max-width:768px) {
	.wropic {
		width: 95%;
		border-radius: 20px;
	}

	.introduceWRO {
		flex-wrap: wrap;
		margin-top: 20px;
	}

	.wropic2 {
		margin: 0 auto;
	}

	.wro-picture {
		border-radius: 20px;
		margin-top: 20px;
	}

	.introduceWRO-2 {
		width: 95%;
		height: auto;
		font-size: 16px;
		line-height: 50px;
		padding: 20px;
	}

	.introduceWRO-1 {
		margin-top: 20px;
	}


	.wro-video {
		display: none;
	}

	.wro-video-ipad {
		display: block;
		margin: 30px auto 30px auto;

	}

	.courseWRO-title {
		margin: 20px auto 20px auto;
	}

}

@media(max-width:920px) {
	.introducefll-2 {
		width: 80%;
		height: auto;
		padding: 10px;
		font-size: 18px;
		margin: 20px auto 50px auto;
	}

}

@media(max-width:843px) {
	.introducefll-2 {
		width: 91%;
		height: auto;
		padding: 10px;
		font-size: 18px;
	}

	.introducefll-1 {
		margin-left: 100px;
	}

	.FLL-pic {
		margin-left: 50px;
	}
}

@media(max-width:856px) {
	.introducefll-2 {
		width: 90%;
		height: auto;
		padding: 10px;
		font-size: 18px;
	}
}

@media(max-width:768px) {
	.fllpic {
		width: 95%;
		margin-left: 20px;
		border-radius: 20px;
	}

	.introducefll {
		flex-wrap: wrap;
		margin-top: 10px;
	}

	.FLL-pic {
		margin: 10px auto 20px auto;
	}

	.FLL-video {
		display: none;
	}

	.introducefll-2 {
		margin-top: -30px;
		width: 100%;
		height: auto;
		padding: 10px;
		font-size: 18px;
	}

}

@media(max-width:762px) {
	.introduceWRO-2 {
		width: 100%;
		font-size: 15px;
	}
}

@media(max-width:687px) {
	.introduceWRO-2 {
		width: 90%;
		font-size: 13px;
	}

	.introduceWRO-1 {
		width: 230px;
		height: 230px;
		font-size: 18px;
	}

	.introduceWRO-title {
		width: 230px;
		height: 230px;
		border-radius: 50%;
		background: rgb(255, 230, 0);
		color: rgb(107, 105, 105);
		text-align: center;
		font-size: 30px;
		font-weight: 400;
		line-height: 230px;

		margin-top: 20px;
	}

	.titleWRO-images {
		width: 280px;
		height: 280px;
		margin-bottom: -100px;
		margin-top: 20px;
	}

}

@media(max-width:568px) {
	.wro-video-ipad {
		display: none;
	}

	.introduceWRO-2-phone {
		display: block;
		font-size: 13px;
	}

	.introduceWRO-2 {
		display: none;
	}

	.introduceWRO-title {
		width: 180px;
		height: 180px;
		border-radius: 50%;
		background: rgb(255, 230, 0);
		color: rgb(107, 105, 105);
		text-align: center;
		font-size: 25px;
		font-weight: 400;
		line-height: 180px;
		margin-top: 20px;
	}

	.titleWRO-images {
		width: 230px;
		height: 230px;
		margin-bottom: -100px;
		margin-top: 20px;
	}

	.wro-video-ipad320 {
		display: block;
		margin: 0 auto;
		margin: 10px auto 30px auto;
	}

	.introduceWRO-2 {
		font-size: 12px;
	}

	.introduceWRO-1 {
		width: 200px;
		height: 200px;

	}

	/* teacher.html */



	@media(max-width:768px) {
		.content-picture1 {
			max-width: 95%;
			border-radius: 20px;
		}

		.allteacher {
			margin: 10px auto 0 auto;
			width: 95%;
			display: block;
		}
	}
}

.allteacher img {
	display: block;
	margin: 0 auto;
}


.allteacher {
	background-repeat: repeat;
}

/* 活動花絮 */




.cart {
	max-width: 500px;
}

.cart>li {
	margin-bottom: 1em;
}

.cart>li>a {
	color: blue;
	border: 1px solid gray;
	display: block;
	padding: 5px;
}

.cart>li>a:hover {
	background: blue;
	color: #fff;
}

.cart>li li {
	margin: 5px 0;
}

.cart ul {
	display: none;
}


.signin {
	max-width: 350px;
	margin-top: 30px;
	margin-bottom: 30px;
	margin-left: 40px;
	border: black 2px solid;
	background: rgb(255, 230, 0);
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	padding-right: 10px;
	display: block;
	color: #0486f4;
	font-weight: 500;
	text-align: center;
}

.signin:hover {
	color: rgb(255, 230, 0);
	background: #0486f4;
	text-decoration: none;
}


.rent3-tite {
	margin-left: 150px;
	margin-top: 30px;
}

.threehopes {
	max-width: 1000px;
	margin: 0 auto;
	margin-top: 30px;
	font-size: 20px;
	line-height: 30px;
}

.campbutton a {
	max-width: 150px;
	height: 70px;
	background: #000;
	color: rgb(255, 230, 0);
	text-align: center;
	line-height: 70px;
	font-size: 22px;
	display: block;
	border-radius: 5px;
	margin-bottom: 20px;
	margin-top: -10px;
	margin-left: 22px;
}

.campbutton a:hover {
	color: white;
}

.camp2 {
	display: none;
}

@media(max-width:467px) {
	.signin {
		max-width: 80%;
		margin: 0 auto;
		margin-bottom: 30px;

	}


}



/* 教室租借 */

.rent1,
.rent1-1,
.rent2,
.rent3,
.rent4-1,
.rent4-2 {
	display: flex;
	justify-content: center;
}

.rent1 .FO {
	width: 250px;
	height: 100px;
	background: rgb(250, 128, 106);
	color: white;
	text-align: center;
	line-height: 100px;
	font-size: 22px;
	border-radius: 30px;
	font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
	margin-top: 70px;
}

.babyone {
	width: 250px;
	height: 100px;
	background: rgb(250, 128, 106);
	color: white;
	text-align: center;
	line-height: 100px;
	font-size: 22px;
	border-radius: 30px;
	font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
	margin-top: 70px;
}

.F2yellow {
	width: 200px;
	height: 90px;
	background: #f3c445;
	color: white;
	text-align: center;
	line-height: 90px;
	font-size: 25px;
	border-radius: 30px;
	font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
	margin-top: 70px;
}

.F2green {
	width: 200px;
	height: 90px;
	background: #00873d;
	color: white;
	text-align: center;
	line-height: 90px;
	font-size: 25px;
	border-radius: 30px;
	font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
	margin-top: 70px;
}

.F2blue {
	width: 200px;
	height: 90px;
	background: #007fe4;
	color: white;
	text-align: center;
	line-height: 90px;
	font-size: 23px;
	border-radius: 30px;
	font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
	margin-top: 70px;
}

.rent4-2-tite {
	margin-left: 100px;
	margin-top: 65px;
	margin-right: 10px;
}

.F2pink {
	width: 200px;
	height: 90px;
	background: #dc6da5;
	color: white;
	text-align: center;
	line-height: 90px;
	font-size: 25px;
	border-radius: 30px;
	font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
	margin-top: 70px;
}

@media(max-width:707px) {
	.rent4-2-room1 {
		margin-top: 20px;
	}
}

.rent4-1-1024 {
	display: none;
}

.rent4-tite {
	margin-left: 200px;
	margin-top: 65px;
	margin-right: 10px;
}

.howtorent {
	width: 280px;
	height: 200px;
	background: rgb(79, 164, 204);
	color: white;
	font-size: 20px;
	border-radius: 20px;
	line-height: 35px;
	padding-top: 10px;
	padding-left: 20px;
	margin-top: 50px;
}

.rentrobot {
	margin-right: 30px;
	margin-left: 30px;
	margin-top: 50px;
}

.robotandrent {
	display: flex;
	justify-content: center;
}

.activities {
	display: none;
}

.menu>li:hover .activities {
	display: block;
}

.top {
	position: fixed;
	right: 27px;
	bottom: 84px;
}

@media(max-width:768px) {
	.top {
		display: none;
	}
}



.rent1-bricks {
	margin-top: 50px;
}

.rent1-pic1,
.rent1-pic2,
.rent1-pic3 {
	width: 33%;
}

.rent1-1-room {
	margin-top: 50px;
}


.rent2-tite {
	margin-left: 150px;
	margin-top: 60px;
}

.rent2-1-room1 {
	margin-left: 20px;
	margin-top: 20px
}

.rent4-1-room1 {
	margin-left: 20px;
	margin-top: 40px;
}

.rent3-1-room1 {
	margin-left: 40px;
	margin-top: 20px;
}

.rent1-1-room-ipad {
	margin-left: 350px;
}

.rent4-2-room1 {
	width: 40%;
	margin-left: 500px;
}

.rent4-2-room2 {
	width: 23%;
	margin: 10px 0 10px 450px;
}

.rent4-2-room3 {
	width: 23%;
	margin-bottom: 10px;
}





@media(max-width:1410px) {

	.rent2-1-room1,
	.rent2-1-room2,
	.rent2-1-room3 {
		width: 32%;
	}

	.rent4-1-room1,
	.rent4-1-room2,
	.rent4-1-room3,
	.rent4-1-room4 {
		width: 33%;
	}

	.rent4-1-room1 {
		width: 40%;
		display: block;
		margin: 20px auto 10px auto;
	}

	.rent4-1,
	.rent3,
	.rent2 {
		margin-left: -140px;
	}

	.rent4-2-room2 {
		width: 23%;
		margin: 10px 0 10px 380px;
	}

	.rent4-2-room1 {
		margin-left: 430px;
	}

	.rent4-2-room3 {
		width: 23%;
		margin-bottom: 10px;
	}



}


@media(max-width:1375px) {

	.rent3-1-room1,
	.rent3-1-room2,
	.rent3-1-room3 {
		width: 20%;
	}

	.rent3-1-room4 {
		width: 32%;

	}

}

@media(max-width:1290px) {
	.rent1-1-room1 {
		margin-left: -70px;
	}

}

@media(max-width:1238px) {
	.rent1-1-room1 {
		margin-left: -100px;
	}

}

@media(max-width:1142px) {
	.rent1-1-room1 {
		margin-left: -100px;
	}

}

@media(max-width:1175px) {
	.rent4-2-room1 {
		margin-left: 400px;
	}

	.rent-4-2 {
		margin-left: -20px;

	}

}

@media(max-width:1105px) {
	.rent4-2-room1 {
		margin-left: 350px;
	}

	.rent-4-2 {
		margin-left: -90px;
	}

	.rent1-1-room-ipad {
		margin-left: 280px;
	}
}

@media(max-width:1091px) {

	.rent1-pic1,
	.rent1-pic2,
	.rent1-pic3 {
		width: 31%;
	}

	.rent1-pic1 {
		margin-left: 30px;
	}

	.rent4-1-room2,
	.rent4-1-room3,
	.rent4-1-room4 {
		width: 29%;
	}

	.rent4-1-room2 {
		margin-left: 50px;
	}
}

@media(max-width:1063px) {
	.rent1-1-room-ipad {
		margin-left: 250px;
	}
}

@media(max-width:1024px) {
	.rent1-1-room-ipad {
		margin-left: 250px;
	}
}

@media(max-width:1015px) {
	.rent1-1-room-ipad {
		margin-left: 220px;
	}
}

@media(max-width:993px) {
	.rent1-bricks {
		display: none;
	}

	.rent1 .FO {
		margin: 30px auto 30px auto;
	}

	.rent4-1-1024 {
		display: none;
	}

	.rent1-1-room-ipad {
		width: 75%;
		margin-left: 160px;
	}

	.rent1-pic1,
	.rent1-pic2,
	.rent1-pic3 {
		width: 60%;
		display: block;
		margin: 0 auto;
		margin-bottom: 10px;
	}

	.rent1-1-room {
		display: none;
	}

	.babyone {
		margin: 30px auto 30px auto;
	}

	.rent1-1-room-ipad {
		display: flex;
	}

	.rent2-tite,
	.rent1-1-room,
	.rent3-tite,
	.rent4-tite,
	.rent4-2-tite {
		display: none;
	}

	.F2yellow,
	.F2green,
	.F2blue {
		margin: 30px auto 0 550px;
	}

	.rent2-1-room1,
	.rent2-1-room2 {
		width: 60%;
		margin-left: 200px;
		margin-bottom: 10px;
	}

	.rent2-1-room3,
	.rent2-1-room3,
	.rent3-1-room3,
	.rent3-1-room4,
	.rent4-1-room4 {
		display: none;
	}

	.rent3-1-room1,
	.rent3-1-room2 {
		width: 40%;
	}

	.rent3-1-room1 {
		margin-left: 90px;
	}

	.rent4-2-room3 {
		margin-bottom: 10px;
	}

	.activities li a {
		font-size: 13px;
	}

	.rent4-1-ipad {
		display: block;
	}

	.rent4-1-room2,
	.rent4-1-room3 {
		width: 38%;
	}

	.rent4-1-room2 {
		margin-left: 100px;
	}

	.rent4-1-room1 {
		display: block;
		width: 60%;
		margin: 0 auto;
		margin: 20px auto 10px auto;
	}

	.rent4-2-room1 {
		margin-left: 140px;
		width: 70%;
	}

	.rent4-2-room2,
	.rent4-2-room3 {
		width: 35%;
	}

	.rent4-2-room2 {
		margin-left: 200px;
	}

	.rent1-1-room1 {
		margin-left: -50px;
		margin-right: 10px;
	}

	.F2pink {
		margin: 20px auto 20px auto;
	}

}

@media(max-width:940px) {

	.F2yellow,
	.F2green,
	.F2blue {
		margin-left: 500px;
	}

	.rent1-1-room1 {
		margin-left: -60px;
	}

}

@media(max-width:905px) {

	.rent1-1-room1 {
		margin-left: -90px;
	}

}

@media(max-width:865px) {

	.F2yellow,
	.F2green,
	.F2blue {
		margin-left: 450px;
	}

	.rent2-1-room1,
	.rent2-1-room2 {
		margin-left: 150px;
	}

	.rent1-1-room1 {
		margin-left: -120px;
	}
}

@media(max-width:799px) {
	.F2pink {
		margin-left: 300px;
	}

	.rent1-1-room-ipad {
		width: 100%;
		margin: 0 auto;
	}

	.rent1-1-room1 {
		margin-left: 0;
		margin-left: 20px;
	}


}

@media(max-width:790px) {
	.rent1-bricks {
		display: none;
	}

	.rent1 .FO {
		margin: 30px auto 30px auto;
	}

	.rent4-1-1024 {
		display: none;
	}

	.rent1-pic1,
	.rent1-pic2,
	.rent1-pic3 {
		width: 60%;
		display: block;
		margin: 0 auto;
		margin-bottom: 10px;
	}

	.rent1-1-room {
		display: none;
	}

	.babyone {
		margin: 30px auto 20px auto;
	}

	.rent1-1-room-ipad {
		display: flex;
	}

	.rent2-tite,
	.rent1-1-room,
	.rent3-tite,
	.rent4-tite,
	.rent4-2-tite {
		display: none;
	}

	.F2yellow,
	.F2green,
	.F2blue {
		margin: 20px auto 0 420px;
	}

	.rent2-1-room1,
	.rent2-1-room2 {
		width: 60%;
		margin-left: 150px;
		margin-bottom: 10px;
	}

	.rent2-1-room3,
	.rent2-1-room3,
	.rent3-1-room3,
	.rent3-1-room4,
	.rent4-1-room4 {
		display: none;
	}

	.rent3-1-room1,
	.rent3-1-room2 {
		width: 40%;
	}

	.rent3-1-room1 {
		margin-left: 70px;
	}

	.F2pink {
		margin: 20px auto 20px auto;
	}

	.rent4-2-room3 {
		margin-bottom: 10px;
	}

	.activities li a {
		font-size: 13px;
	}

	.rent4-1-ipad {
		display: block;
	}

	.rent4-1-room2,
	.rent4-1-room3 {
		width: 35%;
	}

	.rent4-1-room2 {
		margin-left: 100px;
	}

	.rent4-1-room1 {
		display: block;
		width: 60%;
		margin: 0 auto;
		margin: 20px auto 10px auto;
	}

	.rent4-2-room1 {
		margin-left: 100px;
		width: 70%;
	}

	.rent1-1-room1 {
		width: 100%;
		margin-left: 0;
		margin-right: 0;
	}

	.rent4-2-room2,
	.rent4-2-room3 {
		width: 35%;
	}

	.rent4-2-room2 {
		margin-left: 160px;
	}

}

@media(max-width:747px) {
	.rent1-1-room-ipad {
		display: block;
		text-align: center;
	}

	.rent1-1-room1,
	.rent1-1-room2 {
		width: 60%;
	}
}



@media(max-width:707px) {

	.F2yellow,
	.F2green,
	.F2blue {
		width: 30%;
		margin-left: 380px;
	}

	.F2pink {
		width: 40%;
		margin-bottom: -10px;

	}
}

@media(max-width:658px) {

	.rent1-pic1,
	.rent1-pic2,
	.rent1-pic3 {
		width: 100%;
	}

	.rent1-1-room1 {
		margin-top: 20px;
	}

	.rent1-1-room-ipad {
		display: block;
	}

	.rent2-1-room1,
	.rent2-1-room2,
	.rent2-1-room3 {
		width: 100%;
		margin-left: 0;
	}

	.rent3-1-room1,
	.rent3-1-room2 {
		display: block;
		width: 60%;
		margin: 0 auto;
	}

	.rent3-1-room1 {
		margin-top: 20px;
	}

	.rent4-1-room1 {
		width: 100%;
	}

	.rent4-1-room2,
	.rent4-1-room3 {
		width: 60%;
	}

	.rent4-1-room3 {
		margin-left: 100px;
	}

	.rent4-2-room1 {
		width: 100%;
		margin-left: 0;
	}

	.rent4-2-room2,
	.rent4-2-room3 {
		width: 40%;
		margin: 0 auto;
	}

	.rent4-2-room2 {
		margin-top: -10px;
		margin-left: 110px;
	}

	.F2yellow,
	.F2green,
	.F2blue {
		margin-left: 350px;
	}


}

@media(max-width:654px) {

	.rent2-1-room1,
	.rent2-1-room2 {
		width: 100%;
		margin-left: 0;
	}
}

@media(max-width:649px) {

	.F2yellow,
	.F2green,
	.F2blue {
		width: 30%;
		margin-left: 330px;
	}
}

@media(max-width:597px) {
	.howtorent {
		width: 200px;
		height: auto;
		background: rgb(79, 164, 204);
		color: white;
		font-size: 15px;
		border-radius: 20px;
		line-height: 35px;
		padding: 10px;
		margin-top: 50px;
	}

	.rentrobot {
		width: 70%;
	}
}

@media(max-width:568px) {
	.rent4-2-room2 {
		width: 40%;
	}
}

@media(max-width:537px) {

	.F2yellow,
	.F2green,
	.F2blue {
		margin-left: 300px;
	}

}

@media(max-width:510px) {

	.rent4-2-room2,
	.rent4-2-room3 {
		width: 35%;
	}

	.rent4-2-room2 {
		margin-top: -10px;
		margin-left: 125px;
	}

	.F2yellow,
	.F2green,
	.F2blue {
		width: 40%;
		margin-left: 250px;
	}

	.F2pink {
		width: 50%;
	}

	.rent1-1-room1,
	.rent1-1-room2 {
		width: 300px;
		h310
	}

}

@media(max-width:500px) {

	.F2yellow,
	.F2green,
	.F2blue {
		width: 30%;
		margin-left: 300px;
	}

}

@media(max-width:444px) {

	.F2yellow,
	.F2green,
	.F2blue {
		width: 40%;
		margin-left: 250px;
	}

	.F2pink {
		width: 50%;
	}

	.robotandrent {
		display: block;
	}

	.rentrobot {
		width: 30%;
		margin-bottom: -30px;
		margin-left: 150px;
		margin-top: -10px;
	}

	.howtorent {
		margin-left: 110px;

	}
}

@media(max-width:428px) {
	.rentrobot {
		width: 30%;
		margin-bottom: -30px;
		margin-left: 130px;
		margin-top: -10px;
	}

	.howtorent {
		margin-left: 90px;
	}

	.rent4-1-room2,
	.rent4-1-room3 {
		margin-left: 80px;
	}

	.rent4-2-room2 {
		margin-left: 115px;
	}
}

@media(max-width:397px) {

	.F2yellow,
	.F2green,
	.F2blue {
		margin-left: 230px;
	}

	.F2pink {
		width: 60%;
	}

	.rent4-1-room3,
	.rent4-1-room2 {
		width: 70%;
		margin-left: 50px;
	}

	.rent4-2-room3,
	.rent4-2-room2 {
		width: 32%;
	}




}

@media(max-width:384px) {

	.rent1-1-room1,
	.rent1-1-room2 {
		width: 70%;
	}

	.rent4-2-room3 {
		margin-left: 10px;
	}

	.rentrobot {
		margin-left: 120px;
	}

	.howtorent {
		margin-left: 70px;
	}

	.F2yellow,
	.F2green,
	.F2blue {
		margin-left: 220px;
	}

	@media(max-width:340px) {
		.howtorent {
			margin-left: 60px;
		}

		.rentrobot {
			margin-left: 100px;
		}

		.F2yellow,
		.F2green,
		.F2blue {
			margin-left: 210px;
		}

	}

	@media(max-width:320px) {
		.howtorent {
			margin-left: 40px;
		}

		.rentrobot {
			margin-left: 90px;
		}

		.F2yellow,
		.F2green,
		.F2blue {
			margin-left: 200px;
		}

		.rent4-2-room3 {
			margin-left: 0px;
		}

		.rent4-2-room2,
		.rent4-2-room3 {
			width: 31%;
		}
	}
}





.FLLpic {
	max-width: 400px;
	height: 210px;
	margin-top: 100px;
	margin-right: 50px;
	margin-left: 30px;


}


.introducepython-2 {
	width: 660px;
	height: 250px;
	margin: 0 auto;
	padding: 20px;
	border-radius: 30px;
	color: white;
	font-size: 18px;
	line-height: 40px;
	background: rgb(159, 177, 189);
}

.introducepython-1,
.introducepython-ipad {
	width: 230px;
	height: 230px;
	background: rgb(165, 204, 168);
	text-align: center;
	color: rgb(255, 255, 255);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 25px;
	font-family: 'Times New Roman', Times, serif;
	font-weight: 400;
	line-height: 40px;
	margin-right: 40px;
}

.introducepython-2-phone {
	width: 100%;
	height: auto;
	margin: 0 auto;
	padding: 20px;
	border-radius: 30px;
	color: white;
	font-size: 18px;
	line-height: 40px;
	background: rgb(159, 177, 189);
	display: none;
}

.wrovideo-2 {
	display: none;
}

.introducepython-2 {
	display: flex;
}

.python3 {
	margin: 0 auto;
	margin-top: 30px;
}

.introducepython {
	display: flex;
	margin: 30px auto 30px auto;
}

.python-apply {
	width: 70%;
	margin: 0 auto;
}

.python-math {
	width: 60%;
	margin: 30px auto 40px auto;
	border: 5px dotted rgb(235, 255, 119);
}

.introducepython-3-ipad,
.introducepython-ipad {
	display: none;
}

.experiencepython {
	display: block;
	margin: 0 auto;
}




@media(max-width:1100px) {

	.introducepython-1,
	.introducepython-3 {
		display: none;
	}

	.introducepython-ipad {
		display: block;
		margin: 20px auto -20px auto;
		display: flex;
	}

	.introducepython-3-ipad {
		margin: 0 auto;
		display: block;
	}

	.python-apply,
	.python-math {
		width: 90%;
	}
}

@media(max-width:768px) {

	.introducepython-1,
	.introducepython-3 {
		display: none;
	}

	.introducepython-ipad {
		display: block;
		margin: 20px auto -50px auto;
		display: flex;
	}

	.introducepython-3-ipad {
		margin: 0 auto;
		display: block;
	}

	.python-apply,
	.python-math {
		width: 90%;
	}

}

@media(max-width:700px) {
	.introducepython-2 {
		font-size: 16px;
		width: 100%;
		height: auto;
	}
}

@media(max-width:620px) {
	.introducepython-2 {
		display: none;
	}

	.introducepython-2-phone {
		display: block;

	}
}

@media(max-width:568px) {
	.introducepython-2-phone {
		width: 90%;
	}
}

@media(max-width:428px) {
	.introduceWRO-2-phone {
		display: none;
	}

	.introduceWRO-2-phone428 {
		display: block;
	}

	.introduceWRO-title {
		width: 140px;
		height: 140px;
		border-radius: 50%;
		background: rgb(255, 230, 0);
		color: rgb(107, 105, 105);
		text-align: center;
		font-size: 20px;
		font-weight: 400;
		line-height: 140px;
		margin-top: 20px;
	}

	.titleWRO-images {
		width: 180px;
		height: 180px;
		margin-bottom: -100px;
		margin-top: 20px;
	}

	.introducepython-2-phone {
		width: 100%;
	}

	.introducepython-ipad {
		width: 180px;
		height: 180px;
		font-size: 18px;
	}
}

@media(max-width:384px) {

	.introduceWRO-2-phone428,
	.wro-video-ipad320 {
		display: none;
	}

	.introduceWRO-2-phone384 {
		display: block;
	}

	.introducepython-2-phone {
		font-size: 12.5px;
	}

	.introduceWRO-1 {
		width: 160px;
		height: 160px;
		font-size: 14px;
	}

	.wro-video-ipadsmall {
		display: block;
		margin: 0 auto;
		margin-bottom: 20px;
	}


}

@media(max-width:320px) {
	.introduceWRO-2-phone320 {
		display: block;
	}

	.introduceWRO-2-phone384 {
		display: none;
	}

	.introduceWRO-title {
		width: 120px;
		height: 120px;
		font-size: 16px;
		line-height: 120px;
	}

	.titleWRO-images {
		width: 150px;
		height: 150px;
		margin-bottom: -100px;
		margin-top: 20px;
	}

	.introducepython-2-phone {
		font-size: 13.5px;
		line-height: 30px;
	}

}

@media(max-width:790px) {

	.introducefll-1,
	.FLL-pic {
		margin: 20px auto 20px auto;
	}

	.introducefll {
		width: 100%;
		margin-left: 5px;
	}

	.FLL-pic {
		width: 400px;
	}
}

@media(max-width:636px) {
	.introducefll-title {
		width: 180px;
		height: 180px;
		border-radius: 50%;
		background: rgb(255, 230, 0);
		color: rgb(107, 105, 105);
		text-align: center;
		font-size: 25px;
		font-weight: 400;
		line-height: 180px;
		margin-bottom: 30px;
		margin-top: 10px;

	}

	.titlefll-images {
		width: 240px;
		height: 240px;
		margin-bottom: -100px;
		margin-top: 20px;
	}

	.titlefll-images {
		width: 220px;
		height: 220px;
		margin-bottom: -100px;
		margin-top: 20px;
	}

	.introducefll-1 {
		width: 230px;
		height: 230px;
		font-size: 20px;
	}

	.introducefll-2 {
		display: none;
	}

	.introducefll-2-phone {
		display: block;
		margin-bottom: 20px;
	}

	.fllpic {
		margin: 0 auto;
	}




}

@media(max-width:428px) {
	.introducefll-1 {
		width: 180px;
		height: 180px;
		font-size: 15px;
	}

	.FLL-pic {
		width: 250px;
		height: auto;
	}

	.introducefll-title {
		width: 160px;
		height: 160px;
		border-radius: 50%;
		background: rgb(255, 230, 0);
		color: rgb(107, 105, 105);
		text-align: center;
		font-size: 23px;
		font-weight: 400;
		line-height: 160px;
		margin-bottom: 30px;
		margin-top: 10px;

	}

	.titlefll-images {
		width: 180px;
		height: 180px;
		margin-bottom: -100px;
		margin-top: 20px;
	}
}

@media(max-width:380px) {
	.introducefll-title {
		width: 140px;
		height: 140px;
		line-height: 140px;
		font-size: 18px;
	}

	.titlefll-images {
		width: 150px;
		height: 150px;
		margin-bottom: -100px;
		margin-top: 20px;
	}


}

@media(max-width:320px) {
	.introducefll-title {
		width: 120px;
		height: 120px;
		line-height: 120px;
		font-size: 16px;
	}

	.titlefll-images {
		width: 130px;
		height: 130px;
		margin-bottom: -100px;
		margin-top: 20px;
	}

	.introducefll-1 {
		width: 140px;
		height: 140px;
		font-size: 13px;
		line-height: 20px;
	}

}


@media(max-width:640px) {


	.ipadsignin {
		width: 100%;
		margin-top: 50px;
	}



}

@media(max-width:617px) {
	.pic6 .c {
		display: flex;
		flex-direction: column;
		max-width: 50%;
		margin: 0 auto;
	}
	
	.pic6 .b{
		display: flex;
		justify-content: center;
		margin-bottom: 50px;
	}	

	.under6{
		text-align: center;
	}

	.pic6 h3 {
		font-size: 22px;
	}

	.wrovideo-1 {
		display: block;
		margin: 20px auto 20px auto;
	}

	.wrovideo {
		display: none;
	}

	.reward-score {
		width: 450px;
		margin-top: -20px;
	}

	.introduce-title,
	.WRO-title {
		width: 200px;
		height: 200px;
		font-size: 20px;
		font-weight: 500;
		margin-top: 70px;
		line-height: 200px;
	}

	.WRO-images {
		width: 250px;
		height: 260px;
		margin-top: 50px;
	}

	.title-images {
		margin-right: -10px;
	}


}



@media(max-width:506px) {

	.title-images,
	.WRO-images {
		width: 230px;
		height: 230px;
	}

	.introduce-title,
	.WRO-title {
		width: 170px;
		height: 170px;
		font-size: 18px;
		font-weight: 600;
		margin-top: 70px;
		line-height: 170px;
	}

	.WRO-images {
		width: 180px;
		height: 180px;
	}

	.reward-score {
		width: 100%;
		height: auto;
	}

	.pic6 .c{
		max-width: 70%;
	}


}

@media(max-width:428px) {
	

	.ipadsignin {
		width: 100%;
	}

	.wrovideo-2 {
		display: block;
		margin: 20px auto 20px auto;
	}

	.wrovideo-1 {
		display: none;
	}


}

@media(max-width:414px) {
	.reward-score {
		font-size: 13px;
	}

	.introduce-title,
	.WRO-title {
		width: 150px;
		height: 150px;
		font-size: 16px;
		font-weight: 300;
		margin-top: 70px;
		line-height: 150px;
	}

}

@media(max-width:384px) {

	.pic6 h3 {
		font-size: 18px;
	}

	.title-images {
		width: 170px;
		height: 170px;
	}

	.WRO-images {
		width: 160px;
		height: 160px;
	}

	.introduce-title {
		margin-top: 50px;
	}

}

@media(max-width:375px) {

	.pic6 h3 {
		width: 150px;
		height: 150px;
		line-height: 30px;
		font-size: 16px;
	}

	.title-images {
		width: 150px;
		height: 150px;
	}

	.WRO-images {
		width: 130px;
		height: 130px;
	}

	.introduce-title {
		margin-top: 50px;
	}

	.introduce-title,
	.WRO-title {
		width: 125px;
		height: 125px;
		font-size: 14px;
		font-weight: 300;
		line-height: 125px;
	}


}

@media(max-width:320px) {

	.pic6 h3 {
		font-size: 16px;
	}

	.ipadsignin {
		width: 100%;
		border-radius: 20px;
		margin-top: 0px;
	}

	.WRO-title {
		margin-top: 60px;
	}

	.reward-score {
		font-size: 12px;
	}

}

/* wedo.html */

.wedopic {
	margin: 0 auto;
	margin-top: 30px;
	display: flex;
}

.introducewedo-1 {
	width: 300px;
	height: 300px;
	background: rgb(165, 204, 168);
	text-align: center;
	color: rgb(255, 255, 255);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 30px;
	font-family: 'Times New Roman', Times, serif;
	font-weight: 400;
	line-height: 40px;
}


.introducewedo-2 {
	width: 700px;
	border-radius: 30px;
	padding-top: 20px;
	padding-bottom: 20px;
	background: rgb(159, 177, 189);
	text-align: center;
	color: white;
	font-size: 24px;
	display: flex;
	font-weight: 350;
	line-height: 40px;
	justify-content: center;
	align-items: center;
}

.introducewedo-2-phone {
	width: 100%;
	border-radius: 30px;
	background: rgb(159, 177, 189);
	text-align: center;
	color: white;
	font-size: 13px;
	display: flex;
	font-weight: 350;
	line-height: 40px;
	justify-content: center;
	align-items: center;
	display: none;
}

.introducewedo {
	display: flex;
	justify-content: space-evenly;
	margin-top: 70px;
	margin-bottom: 30px;

}

.experiencewedo {
	margin: 0 auto;
	margin-top: 50px;
	display: block;
	border-radius: 10px;
}

.titlewedo-images {
	margin-top: 50px;
}

.introducewedo-title {
	width: 250px;
	height: 250px;
	border-radius: 50%;
	background: rgb(255, 230, 0);
	color: rgb(107, 105, 105);
	text-align: center;
	font-size: 30px;
	font-weight: 400;
	line-height: 250px;
	margin-top: 50px;
	margin-bottom: 50px;

}

.coursewedo-title {
	text-align: center;
	margin-top: 30px;
	width: 100%;
	display: flex;
	justify-content: center;

}

.wedo-video {
	margin-top: 60px;
}

.wedo-video-ipad,
.wedo-video-phone,
.wedo-video-phoneSE {
	display: none;
}

.wedo-top-picture {
	margin-top: 300px;
	margin-right: 50px
}

@media(max-width:1141px) {
	.wedo-video {
		width: 700px;
		height: 400px;
	}
}

@media(max-width:1049px) {
	.experiencewedo {
		width: 90%;
	}

	.introducewedo {
		display: block;
	}

	.introducewedo-1 {
		margin: -50px auto 30px auto;
	}

	.introducewedo-2 {
		margin: 0 auto;
	}




}

@media(max-width:1005px) {
	.wedo-video {
		width: 600px;
		height: 400px;
	}
}

@media(max-width:864px) {
	.wedo-video {
		width: 500px;
		height: 350px;
	}
}

@media(max-width:772px) {
	.wedo-video {
		width: 450px;
		height: 350px;
	}
}

@media(max-width:768px) {

	.wedo-video-ipad {
		display: block;
	}

	.wedo-video {
		display: none;
	}

	.wedo-top-picture {
		margin: 170px 0 0 20px;
		width: 60%
	}

	.introducewedo-1 {
		margin: 0 auto;
		margin: -30px auto 30px auto;
	}

	.introducewedo-2 {
		width: 80%;
		font-size: 22px;
		margin: 0 auto;
	}

	.introducewedo {
		display: block;
		margin-top: 70px;
		margin-bottom: 30px;
	}


	.coursewedo-title {
		text-align: center;
		display: flex;
		justify-content: center;
		max-width: 1300px;
		margin-top: -20px;
	}

}

@media(max-width:746px) {
	.introducewedo-2 {
		width: 80%;
		font-size: 20px;
		line-height: 50px;
		margin: 0 auto;
	}

	.introducewedo-1 {
		font-size: 23px;
		width: 230px;
		height: 230px;
	}

}

@media(max-width:693px) {
	.introducewedo-2 {
		width: 100%;
		font-size: 20px;
		line-height: 50px;
		margin: 0 auto;
	}

}

@media(max-width:660px) {
	.titlewedo-images {
		width: 250px;
		height: 250px;
	}

	.introducewedo-title {
		width: 200px;
		height: 200px;
		border-radius: 50%;
		background: rgb(255, 230, 0);
		color: rgb(107, 105, 105);
		text-align: center;
		font-size: 25px;
		font-weight: 400;
		line-height: 200px;
		margin-top: 50px;
		margin-bottom: 50px;

	}

}

@media(max-width:590px) {
	.wedo-top-picture {
		display: none;
	}

}

@media(max-width:564px) {
	.introducewedo-2 {
		width: 90%;
		border-radius: 30px;
		background: rgb(159, 177, 189);
		text-align: center;
		color: white;
		font-size: 16px;
	}

	.titlewedo-images {
		width: 220px;
		height: 220px;
	}

	.introducewedo-title {
		width: 180px;
		height: 180px;
		font-size: 25px;
		line-height: 180px;
	}

	.wedo-video-ipad {
		display: none;
	}

	.wedo-video-phone {
		display: block;
	}

}

@media(max-width:498px) {
	.introducewedo-2 {
		width: 100%;
	}

	.introducewedo-1 {
		font-size: 20px;
		width: 200px;
		height: 200px;
	}

}

@media(max-width:458px) {
	.introducewedo-2 {
		width: 100%;
		font-size: 13px;
	}

	.introducewedo-1 {
		font-size: 20px;
		width: 200px;
		height: 200px;
	}

	.titlewedo-images {
		width: 200px;
		height: 200px;
	}

	.introducewedo-title {
		width: 160px;
		height: 160px;
		font-size: 23px;
		line-height: 160px;
	}

	.introducewedo-1 {
		font-size: 18px;
		width: 180px;
		height: 180px;
	}

	.titlewedo-images {
		width: 180px;
		height: 180px;
	}

	.introducewedo-title {
		width: 140px;
		height: 140px;
		font-size: 20px;
		line-height: 140px;
	}

	.wedo-video-phoneSE {
		display: block;
	}

	.wedo-video-phone {
		display: none;
	}
}

@media(max-width:373px) {
	.introducewedo-2 {
		display: none;
	}

	.introducewedo-2-phone {
		display: block;
		padding-top: 20px;
		margin-top: -10px;
	}

	.introducewedo-1 {
		font-size: 16px;
		width: 160px;
		height: 160px;
	}

	.titlewedo-images {
		width: 150px;
		height: 150px;
	}

	.introducewedo-title {
		width: 120px;
		height: 120px;
		font-size: 16px;
		line-height: 120px;
		margin-left: -10px;
	}
}

/* yt */
.video-container {
	position: relative;
	width: 75%;
	height: 0;
	padding-bottom: 56.25%;
	/* 16:9 比例的视频 */
	margin: 0 auto;

}

.video-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 80%;
}

.font-strong{
	font-weight: 500;
}

@media(max-width:767px) {

	.video-container {
		width: 100%;
	}

	.video-container iframe {
		height: 100%;
	}
}