/* 15 jun 2015 amended */
#pands{}
#pands li{list-style:disc;margin-bottom:10px;}
#pands #main{padding:20px 45px 20px; position:relative}
#pands #main #diagram{margin-top:17px;}
#pands #content-hd{margin-top:17px;width:839px;padding-left:40px;height:70px;padding-top:40px;_padding-top:25px;background:url('/lib/images/pands_content_hd.jpg') no-repeat;}
#pands.eng #content-hd{_padding-top:12px}
#pands.eng #content-hd p{margin:0px;}
#pands #content{width:860px/*950px*/;overflow:hidden;padding-top:20px;padding-bottom:30px;line-height:22px;}
#pands #content-ft{width:879px;height:27px;background:url('/lib/images/pands_content_ft_bg.jpg') no-repeat;}
#pands.eng #content-hd p,#pands.eng #content p{padding-right:85px;}
#pands #content #container-a{width:600px;padding-left:160px;height:245px;padding-top:53px;background:url('/lib/images/whiteboard_pic.png') no-repeat;margin-left:-5px;}

#pands .regNow{
	display:inline-block;
	width:auto;
	font-size:16pt;
	line-height:46px;
	height:46px;
	padding:0 25px;
	margin:20px auto;
	background-color:#e04633;
	font-weight:bold;
	color:#fff;
	text-decoration:none;
	-webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
	box-shadow:0px 2px 5px rgba(0,0,0,.3);
}

/*#pands .subpageMenu li{
	width:286px;/*428.5px;* /
}*/

/*#pands h2 {
    margin: 17px 0 0;
}*/

/* end of vr page removed * /
#pands #content.vrPage{
	width:860px
}
#pands #content.vrPage .spaceHead{
	margin-top:30px;
}
#pands #content.vrPage h3{
	display: block;
	text-align:center;
}
#pands #content.vrPage h3 > span{
	display: inline-block;
	padding:8px 23px;
	-webkit-border-radius: 8px;
	-webkit-border-top-right-radius: 20px;
	-webkit-border-bottom-left-radius: 20px;
	-moz-border-radius: 8px;
	-moz-border-radius-topright: 20px;
	-moz-border-radius-bottomleft: 20px;
	border-radius: 8px;
	border-top-right-radius: 20px;
	border-bottom-left-radius: 20px;
	background-color:#fdb813;
	color:#fff;
	font-size:26px;
    margin: 20px 10px 10px;
	font-weight:bold
}
#pands #content.vrPage h3.google-red > span{
	background-color:#e04633;
	margin-top:0px;
}
#pands #content.vrPage h3 .speciale{
	line-height:.7em
}


#pands #content.vrPage h4.google-red,
#pands #content.vrPage h4.google-green,
#pands #content.vrPage h4.google-blue{
    font-size: 21px;
    color: #fff;
    margin: 15px 0 4px;
	padding:0 22px 0 7px;
	-webkit-border-top-right-radius: 10px;
	-webkit-border-bottom-right-radius: 20px;
	-moz-border-radius-topright: 10px;
	-moz-border-radius-bottomright: 20px;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 20px;
	display:inline-block;
	font-size:19px;
	line-height:30px;
	height:30px;
}
#pands #content.vrPage h4.google-red{
	background-color:#e04633;
}
#pands #content.vrPage h4.google-green{
	background-color:#119c57;
}
#pands #content.vrPage h4.google-blue{
	background-color:#406ab3;
}
#pands #content.vrPage .vr_details img{
	display:block;
	border:0;
	padding:0
}


#pands #content.vrPage .vr_app tr,
#pands #content.vrPage .vr_app td{
	border:#fff 1px solid;
	border-collapse:collapse;
}
#pands #content.vrPage .vr_app td{
	padding:10px;
	text-align: center;
	vertical-align:central;
}
#pands #content.vrPage .vr_app thead td{
	background:#bbe0e3;
	font-weight:bold
}
#pands #content.vrPage .vr_app thead td.col1{
	width:100px
}
#pands #content.vrPage .vr_app thead td.col2{
	width:150px
}
#pands #content.vrPage .vr_app thead td.col3{
	width:120px
}
#pands #content.vrPage .vr_app thead td.col4{
	width:100px
}
#pands #content.vrPage .vr_app tbody td{
	background:#e7f3f4;
}
#pands #content.vrPage .vr_app tbody tr.rowEven td{
	background:#f3f9fa;
}
#pands #content.vrPage tbody td.col5{
	text-align:left
}
#pands #content.vrPage .tab_content ul{
	padding: 15px 0 0 30px
}
/ * end of vr page removed */

#pands.eng #content #container-a{width:600px;padding-left:160px;height:350px;padding-top:53px;background:url('/lib/images/whiteboard_pic_eng.png') no-repeat;margin-left:-5px;}

#pands #content #container-a ul{width:520px;}
#pands #content #container-b{width:650px;height:100px;position:relative;margin-top:45px;}
#pands.eng #content #container-b {padding-right:60px;}
#pands #content #container-b img{position:absolute;right:0;top:0; left:600px;}
#pands #content #pre-class{width:680px;padding-left:90px;padding-top:4px;position:relative;}
#pands.eng #content #pre-class{margin-top:30px;}
#pands #content #pre-class img{position:absolute;left:0;top:0;}
#pands #content #container-c{width:732px;padding-left:40px;height:110px;padding-top:80px;margin-top:15px;background:url('/lib/images/listing_box_1.png') no-repeat;}
#pands.eng #content #container-c{width:743px;padding-left:40px;height:134px;padding-top:65px;background:url('/lib/images/listing_box_1_en.png') no-repeat;}

#pands.eng #content #container-c div{width:450px;}

#pands #content #in-class{width:670px;padding-left:90px;padding-top:4px;position:relative;margin-top:30px;}
#pands #content #in-class img{position:absolute;left:0;top:0;}
#pands #content #container-d{width:472px;padding-left:300px;height:274px;padding-top:60px;margin-top:15px;background:url('/lib/images/listing_box_2.png') no-repeat;}
#pands.eng #content #container-d{width:483px;padding-left:300px;height:340px;padding-top:60px;margin-top:15px;background:url('/lib/images/listing_box_2_en.png') no-repeat;}
#pands #content #container-d div{width:450px;}

#pands #content #post-class{padding-left:90px;width:675px;padding-top:4px;position:relative;}
#pands.eng #content #post-class{margin-top:30px;}
#pands #content #post-class img{position:absolute;left:0;top:0;}
#pands #content #container-e{width:732px;padding-left:40px;height:191px;padding-top:80px;margin-top:15px;background:url('/lib/images/listing_box_3.png') no-repeat;}
#pands.eng #content #container-e{width:741px;padding-left:40px;height:259px;padding-top:80px;margin-top:15px;background:url('/lib/images/listing_box_3_en.png') no-repeat;}
#pands #content #container-e div{width:430px;}

#pands .imgLeft{
	float:right;
	margin:0px 0 10px 10px
}
#pands .imgLeft.topMargin{
	margin-top:15px
}

#tabs_container{
	margin-left:auto;
	margin-right:auto;
	width:100%;/*600px;*/
}
#tabs {
    list-style: none;
	display:block;
	margin:0;
    padding:10px 0 30px;
	width:auto;
	height:auto;
	overflow:hidden;
	font-size: 0;
	text-align: center;
}
#tabs li{
	display:inline-block;
	width:185px;
	height:22px;
	margin:0 5px;
	padding:10px 5px;
	background:#ecedee;
	border:#ecedee 3px solid;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
	text-align:center;
	cursor:pointer
}
#tabs li a{
	font-weight:700;
	font-size:15px;
	text-decoration:none;
	display:block;
	width:100%;
	height:100%;
	color:#b9b9b9;
}
#tabs li:hover,
#tabs li.active{
	background: #5b9ad4;
	background: -moz-linear-gradient(top,  #5b9ad4 0%, #145b9f 100%);
	background: -webkit-linear-gradient(top,  #5b9ad4 0%,#145b9f 100%);
	background: linear-gradient(to bottom,  #5b9ad4 0%,#145b9f 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5b9ad4', endColorstr='#145b9f',GradientType=0 );
	border-color:#ecedee;
	box-shadow: 0px 3px 10px #888;
}
#tabs li:hover a,
#tabs li.active a{
	color:#fff;
}
#buttons {
    list-style: none;
	display:block;
	margin:0;
    padding:10px 0 30px;
	width:auto;
	height:auto;
	overflow:hidden;
	font-size: 0;
	text-align: center;
}
#buttons li{
	display:inline-block;
	width:185px;
	height:22px;
	margin:0 5px;
	padding:10px 5px;
	background:#ecedee;
	border:#ecedee 3px solid;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
	text-align:center;
	cursor:pointer;
	background: #5b9ad4;
	background: -moz-linear-gradient(top,  #5b9ad4 0%, #145b9f 100%);
	background: -webkit-linear-gradient(top,  #5b9ad4 0%,#145b9f 100%);
	background: linear-gradient(to bottom,  #5b9ad4 0%,#145b9f 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5b9ad4', endColorstr='#145b9f',GradientType=0 );
	border-color:#ecedee;
	box-shadow: 0px 3px 10px #888;
	transition: 0.3s;
}
#buttons li a{
	font-weight:700;
	font-size:15px;
	text-decoration:none;
	display:block;
	width:100%;
	height:100%;
	color:#fff;
	transition: 0.3s;
}
#buttons li:hover,
#buttons li.active{
	box-shadow: 0px 0px 0 #888;
}
#buttons li:hover a,
#buttons li.active a{
	color:#b9b9b9;
}

/*
#tabs_eng {
    list-style: none;
    padding-top:30px;
	padding-bottom:30px;
    font: 0.9em;
	color:#ffffff;
	font-weight:bold;
}

#tabs li {
    display: inline;
}

#tabs_eng li {
    display: inline;
}

#tabs li a {
	/*padding-top:13px;
	padding-left:70px;
	padding-bottom:15px;
	padding-right:70px;* /
    text-decoration: none;
    background-image: url('/lib/images/select_class_off.png');
    border-bottom: none;
    outline: none;
	color:#b9b9b9;
	width:189px;
	height:43px;
	line-height:43px;
	display:inline-block;
	text-align:center;
}

#tabs_eng li a {
	/*padding-top:13px;
	padding-left:50px;
	padding-bottom:15px;
	padding-right:50px;* /
    text-decoration: none;
    background-image: url('/lib/images/select_class_off.png');
    border-bottom: none;
    outline: none;
	color:#b9b9b9;
	width:189px;
	height:43px;
	line-height:43px;
	display:inline-block;
	text-align:center;
}

#tabs li a:hover {
    background-image: url('/lib/images/select_class_on.png');
   	/*padding-top:13px;
	padding-left:70px;
	padding-bottom:15px;
	padding-right:70px;* /
	color:#ffffff;
}

#tabs_eng li a:hover {
    background-image: url('/lib/images/select_class_on.png');
   	/*padding-top:13px;
	padding-left:50px;
	padding-bottom:15px;
	padding-right:50px;* /
	color:#ffffff;
}

#tabs li.active a {
    background-image: url('/lib/images/select_class_on.png');
    /*padding-top:13px;
	padding-left:70px;
	padding-bottom:15px;
	padding-right:70px;
	width:192px;* /
    border-bottom: none;
	color:#ffffff;
	display:inline-block;
	text-align:center;
	width:189px;
	height:43px;
	line-height:43px;
}

#tabs_eng li.active a {
    background-image: url('/lib/images/select_class_on.png');
    /*padding-top:13px;
	padding-left:50px;
	padding-bottom:15px;
	padding-right:50px;* /
    border-bottom: none;
	/*width:192px;* /
	color:#ffffff;
	display:inline-block;
	text-align:center;
	width:189px;
	height:43px;
	line-height:43px;
}

#tabs li.active a:hover {
    background-image: url('/lib/images/select_class_on.png');
   /* padding-top:13px;
	padding-left:70px;
	padding-bottom:15px;
	padding-right:70px;* /
    border-bottom: none;
	color:#ffffff;
}

#tabs_eng li.active a:hover {
    background-image: url('/lib/images/select_class_on.png');
    /*padding-top:13px;
	padding-left:50px;
	padding-bottom:15px;
	padding-right:50px;* /
    border-bottom: none;
	color:#ffffff;
}



#tabs_content_container {
    width: 100%;
}
.tab_content {
    display: none;
}*/

.magnifier{float:right;margin-bottom:-10px;padding-top:20px;}
a.zoomin{text-decoration:none; color:#000000;outline:none;}

h3 { font-size: 25px; font-weight: bold; padding: 30px 0 15px 0; }
h4 { font-size: 25px; font-weight: bold; width: 100%; display: block; line-height: 50px; text-align: center; color: #FFF; background-color: #000; border-radius: 10px 10px 0 0; }
h5 { font-size: 18px; font-weight: bold; padding: 10px; }

.section{
	width:860px;
	float:left;
	margin-left:-10px;
	padding-top:5px;
	padding-bottom:5px;
	border-bottom:1px solid #ccc;
}
.sectionLast{
	border-bottom:none !important;
}
.sider{
	float:left;
	width:250px;
	margin:5px;
	background:url(../images/diag/enlarge_ico.png) right bottom no-repeat;
	text-align:center;
	padding:5px;
}

.sider.eng{
	background:url(../images/diag/enlarge_ico_en.png) right bottom no-repeat!important;
}

.sider a{
	display:block;
	width: 250px;
    padding-bottom: 20px;
	height:auto;
	overflow:visible
}
#pands .sider li{
	list-style:none !important;
	margin:0 !important;
	padding: 0 !important;
}
.sider img{
	margin:0;
	 padding: 7.5px;
	width:233px;
	height:auto;
	border:#eee 1px solid;
	box-shadow:2px 2px 5px #ccc;
}
.article{
	float: left;
	margin-left: 10px;
	width: 560px;
	text-align: left;
	margin-top: -4px;
	/*font-family: arial;
	 [disabled]margin-bottom: 60px; */
}
/*.chi .article{
	font-family: 'Noto Sans TC', 'Microsoft JhengHei', 'Microsoft JhengHei UI', sans-serif;
}*/
.head{font-size:22px; color:#004990; margin-bottom:4px;}
.info,.hiddenDiv{line-height:130%; font-size:15px;color:#333;}

.info ul{
	margin-top:10px;
}
.info li{
	margin-left:20px;
}

.clickbtn:link{ text-decoration:none; padding-left:3px;}
.clickbtn:visited{ text-decoration:none; padding-left:3px;}
.hiddenDiv{display:none; cursor:pointer;}
.readmore,.extract{cursor:pointer;font-size:12px;color:#5b93ca; border-bottom:1px solid #d9e6f4;margin-left:20px;}
a.more{cursor:pointer;font-size:12px;color:#5b93ca; border-bottom:1px solid #d9e6f4;margin-left:20px;text-decoration:none;}
a.more_2{cursor:pointer;font-size:12px;color:#5b93ca; border-bottom:1px solid #d9e6f4;margin-left:1px;text-decoration:none;}
.strongtxt{font-weight:bold;}
#new_video{cursor:pointer;}
#clear{clear:both;}
.govlink{font-family:arial;}

.date{margin-top:20px;}
/* .article .head .speciale{font-size:28px;}
.article .speciale{font-size:20px;font-family:arial narrow;} */
#press-release{display:block;}.article .col1 {
	width: 22%;
	margin-right: 1%;
	margin-left: 1%;
	float: left;
}
.article .articleRow {
	clear: both;
	margin-bottom: 8px;
	float: left;
	width: 100%;
}

.article .col2 {
	width: 40%;
	margin-right: 1%;
	margin-left: 1%;
	float: left;
}
.article .col2Long {
	width: 73%;
	margin-right: 1%;
	margin-left: 1%;
	float: left;
}

.article .col3 {
	width: 31%;
	margin-right: 1%;
	margin-left: 1%;
	float: left;
}

.parent #content object,
.flipped-classroom #content object,
.parent #content img,
.flipped-classroom #content img{
	float:left;
	width:260px;
	height:260px;
}
.parent #content .sider{
	padding: 25px 0;
}

.parent #content .sider,
.parent #content .sider a{
	width: 233px;
}
.parent #content .sider a img{
	width: 216px;
}
.parent .article,
.flipped-classroom .article{
	float:right;
	margin:15px 0 0 10px;
	width:590px
}
.parent .dlLinks,
.flipped-classroom .dlLinks{
	display:block;
	height:50px;
	margin:20px 10px 0 0;
	background-repeat:no-repeat;
	background-position:left top;
	float:left;
}
.parent .dlLinks:hover,
.flipped-classroom .dlLinks:hover{
	box-shadow: 0 0 8px 0 #00a8ff;
}


.parent .dlLinks span,
.flipped-classroom .dlLinks span{
	display:none;
}
.parent #appStoreLink,
.flipped-classroom #appStoreLink{
	width:148px;
	background-color:#000;
	border-radius: 6px;
	background-size:148px 50px;
	background-image:url(/lib/images/diag/appStore.png);
	background-image:url(/lib/images/diag/appStore.svg);
}
.parent #gogolePlayLink,
.flipped-classroom #gogolePlayLink{
	width:153px;
	background-color:#050708;
	border-radius: 7px;
	background-size:153px 50px;
	background-image:url(/lib/images/diag/googlePlay.png);
	background-image:url(/lib/images/diag/googlePlay.svg);
}
.parent #dlApkLink,
.flipped-classroom #dlApkLink{
	width:auto;
	padding:0 20px;
	border-radius:5px;
	background-color:#000;
	line-height:50px;
	color:#fff;
	text-decoration:none;
	font-size:12pt;
}
/*#pands.stemcamp strong{
	font-weight:bold;
}*/
/*#pands.stemcamp table.price{
	width:auto;
	padding: 0;
	margin: 0 0 15px 0;
}
#pands.stemcamp table.price td{
	text-align: left;
	vertical-align: top;
	font-size: 16px;
	color:#000;
	font-weight: bold;
	padding: 0 8px 0 0;
}*/
#pands.stemcamp small{
	font-size: 14px;
	color:#999;
  display: inline-block;
	margin-top:30px;
}





#pands.stemcamp .floatBtn{
	display:block;
	padding:15px 10px;

	height:auto;
	background-color:#e04633;
	color:#fff;

	text-decoration:none;
	line-height:1.3em;
	text-align:center;
	font-weight:bold;
	position:fixed;
	right:0px;
	top: 190px;/*110px;*/
	-webkit-border-top-left-radius: 8px;
	-webkit-border-bottom-left-radius: 8px;
	-moz-border-radius-topleft: 8px;
	-moz-border-radius-bottomleft: 8px;
	border-top-left-radius: 8px;
	border-bottom-left-radius: 8px;
	z-index:1000;
}

#pands.stemcamp .floatRegistration{
	display:block;
	padding:15px 10px;

	height:auto;
	background-color:#33e0d0;
	color:#fff;

	text-decoration:none;
	line-height:1.3em;
	text-align:center;
	font-weight:bold;
	position:fixed;
	right:0px;
	top: 290px;/*110px;*/
	-webkit-border-top-left-radius: 8px;
	-webkit-border-bottom-left-radius: 8px;
	-moz-border-radius-topleft: 8px;
	-moz-border-radius-bottomleft: 8px;
	border-top-left-radius: 8px;
	border-bottom-left-radius: 8px;
	z-index:1000;
	cursor: pointer;

	font-size:23px;
	letter-spacing: -1px;
	width:110px;
}
/*#pands.stemcamp .floatBtn:hover{
	background-color:#ba1e0a
}*/
#pands.stemcamp.chi .floatBtn{
	font-size:23px;
	letter-spacing: -1px;
	width:110px;
}
/*#pands.stemcamp.eng .floatBtn{
	font-size:11pt;
	width:70px;
}*/
.stemcamp #content img{
	/*margin: 30px auto 0;*/
    display: block;
}
.stemcamp #content img.regular-course-chart{
		margin: 50px auto 80px;
}


.page { padding-top: 20px; margin-bottom: 20px; }
.page .detail { font-size: 0; padding: 20px; border: 2px #000 solid; border-radius: 0 0 10px 10px; }
.page .detail .col-left,
.page .detail .col-right { display: inline-block; vertical-align: top; }
.page .detail .col-left img,
.page .detail .col-right img { width: 100%; margin: 0 !important; }
.page .detail .col-left p,
.page .detail .col-right p { font-size: 15px; padding: 10px 40px 0px 40px; }
.page .detail .col-left .course,
.page .detail .col-right .course { font-size: 15px; padding: 0px 40px; font-weight: bold; }

#easter {}
#easter h4 { background-color: #FDB813; }
#easter .detail { font-size: 15px; border-color: #FDB813; }
#easter .schedule { width: 100%; }
#easter .info-other { font-size: 0; }
#easter .info-other ul { width: 50%; display: inline-block; vertical-align: top; box-sizing: border-box; padding: 20px; }
#easter .info-other ul li { font-size: 15px; }
#easter .info-other ul li img { width: 40%; margin: 10px auto; }


#printing h4 { background-color: #E04633; }
#printing .detail { border-color: #E04633; }
#printing .col-left { width: 65%; }
#printing .col-right { width: 35%; }

#app {}
#app h4 { background-color: #119C57; }
#app .detail { border-color: #119C57; }
#app .col-left { width: 35%; }
#app .col-right { width: 65%; }

#coding {}
#coding h4 { background-color: #406AB3; }
#coding .detail { border-color: #406AB3; }
#coding .col-left { width: 35%; }
#coding .col-right { width: 65%; }




.table-course { width: 100%; }
.table-course tr,
.table-course td{
	border:#fff 1px solid;
	border-collapse:collapse;
}
.table-course td{
	padding:10px;
	text-align: left;
	vertical-align:middle;
}
.table-course thead td:first-child {
	width: 150px;
}
.table-course tr td:first-child b {
	font-weight: bold; display: block; padding: 5px 0;
}
.table-course tr td:first-child img {
	margin: 0 0 2px 0 !important; width: 100%;
}
.table-course thead td{
	background:#bbe0e3;
	font-weight:bold
}

.table-course tbody td{
	background:#e7f3f4; height: 280px;
}
.table-course tbody tr:nth-child(2n+2) td{
	/*background:#f3f9fa;*/ background:#e7f3f4;
}

.table-course .ps { font-size: 12px; display: block; line-height: 1.25em; padding: 5px 0; }



/* STEM Course v2 */
.clear-fix:after {
	clear: both;
    content: ".";
    display: block;
    font-size: 0;
    height: 0;
    line-height: 0;
    visibility: hidden;
}

.stem-tab, .stem-block {
	font-family: Arial, 'Microsoft JhengHei', 'Microsoft JhengHei UI', sans-serif;
}

.stem-tab {
	margin-top: 10px;
}
.stem-tab .arrowTab{
	display: inline-block;
	color: #000;
	background-color: #e5e5e5;
	font-weight: bold;
	width: 385px;
	line-height: 33px;
	float: left;
	padding: 10px 20px;
	text-align: center;
	font-size: 20px;
	position: relative;
	cursor: pointer;
	-webkit-transition : background-color 200ms ease-out, color 200ms ease-out;
	-moz-transition : background-color 200ms ease-out, color 200ms ease-out;
	-o-transition : background-color 200ms ease-out, color 200ms ease-out;
	transition : background-color 200ms ease-out, color 200ms ease-out;
}
.stem-tab .arrowTab:first-child {
	margin-right: 5px;
}

.stem-tab .arrowTab.yellow.active, .stem-tab .arrowTab.yellow:hover{
	color: #fff;
	background-color: #fcad19;
}
.stem-tab .arrowTab.yellow.active:after{
	content: '';
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 9px 10px 0 10px;
	border-color: #fcac19 transparent transparent transparent;
	position: absolute;
	top: 53px;
	left: 50%;
	margin-left: -5px;
}
.stem-tab .arrowTab.blue.active, .stem-tab .arrowTab.blue:hover{
	color: #fff;
	background-color: #5d96cc;
}
.stem-tab .arrowTab.blue.active:after{
	content: '';
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 9px 10px 0 10px;
	border-color: #5d96cc transparent transparent transparent;
	position: absolute;
	top: 53px;
	left: 50%;
	margin-left: -5px;
}
.stem-tab .arrowTab.disable {
	color: #a9a9a9;
	cursor: default;
}
.stem-content-wrap {
	position: relative;
	-webkit-transition: height .3s; /* Safari */
    transition: height .3s;
}

.stem-content{
  position: relative; /*absolute;*/
	top: 0;
	z-index: 1;
  opacity: 0;
	/*-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);*/
  -webkit-transition: all linear 0.3s;
  -moz-transition: all linear 0.3s;
  -o-transition: all linear 0.3s;
  -ms-transition: all linear 0.3s;
  transition: all linear 0.3s;
	/*-webkit-transform: translateX(-1700px);
	-moz-transform: translateX(-1700px);
	-o-transform: translateX(-1700px);
	-ms-transform: translateX(-1700px);
	transform: translateX(-1700px);*/
	font-size: 16px;
	padding: 40px 0 0 0;
	position: absolute;
}
#tab-easter-stem-content.stem-content{
	-webkit-transform: translateX(-870px);
	-moz-transform: translateX(-870px);
	-o-transform: translateX(-870px);
	-ms-transform: translateX(-870px);
	transform: translateX(-870px);
}
#tab-regular-stem-content.stem-content{
	-webkit-transform: translateX(870px);
	-moz-transform: translateX(870px);
	-o-transform: translateX(870px);
	-ms-transform: translateX(870px);
	transform: translateX(870px);
}
.stem-content.active {
	-webkit-transform: translateX(0px) !important;
	-moz-transform: translateX(0px) !important;
	-o-transform: translateX(0px) !important;
	-ms-transform: translateX(0px) !important;
	transform: translateX(0px) !important;
	z-index: 100;
  /*-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);*/
  opacity: 1;
  -webkit-transition: all ease-out 0.2s 0.1s;
  -moz-transition: all ease-out 0.2s 0.1s;
  -o-transition: all ease-out 0.2s 0.1s;
  -ms-transition: all ease-out 0.2s 0.1s;
  transition: all ease-out 0.2s 0.1s;

	left:0;
	top:0;
}
.stem-block .title{
	font-size: 22px;
	font-weight: bold;
	padding: 11px 40px;
	line-height: 33px;
	color: #fff;
	text-align: center;
	-webkit-border-radius: 10px 10px 0 0;
	-moz-border-radius: 10px 10px 0 0;
	border-radius: 15px 15px 0 0;
	box-sizing: border-box;
}
.stem-block.blue .title{
	background: #39c5ff; /* Old browsers */
	background: -moz-linear-gradient(top, #39c5ff 0%, #5bcfff 50%, #85dbff 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #39c5ff 0%, #5bcfff 50%,#85dbff 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #39c5ff 0%, #5bcfff 50%,#85dbff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#39c5ff', endColorstr='#85dbff',GradientType=0 ); /* IE6-9 */
	border-bottom: 2px solid #28aae0;
	margin: 40px 0 0 0;
}
.stem-block.pink .title{
	background: #b93fa3; /* Old browsers */
	background: -moz-linear-gradient(top, #b93fa3 0%, #cd62ba 50%, #e68cd5 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #b93fa3 0%, #cd62ba 50%,#e68cd5 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #b93fa3 0%, #cd62ba 50%,#e68cd5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b93fa3', endColorstr='#e68cd5',GradientType=0 ); /* IE6-9 */
	border-bottom: 2px solid #965c8b;
}
.stem-block.red .title{
	background: #ff672f; /* Old browsers */
	background: -moz-linear-gradient(top, #ff672f 0%, #ff8355 50%, #ffa482 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #ff672f 0%, #ff8355 50%,#ffa482 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #ff672f 0%, #ff8355 50%,#ffa482 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff672f', endColorstr='#ffa482',GradientType=0 ); /* IE6-9 */
	border-bottom: 2px solid #eb521a;
}
.stem-block.green .title{
	background: #2fff95; /* Old browsers */
	background: -moz-linear-gradient(top, #2fff95 0%, #55ffa1 50%, #82ffc5 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #2fff95 0%, #55ffa1 50%,#82ffc5 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #2fff95 0%, #55ffa1 50%,#82ffc5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2fff95', endColorstr='#82ffc5',GradientType=0 ); /* IE6-9 */
	border-bottom: 2px solid #1aeb77;
}

.stem-block h5{
	padding: 0;
	font-size: 20px;
	margin: 20px 0 15px;
}
.stem-block.blue h5{
	color:#29abe1;
}
.stem-block.pink h5{
	color:#b932a0;
}
.stem-block.red h5{
	color:#ff732a;
}
.stem-block.green h5{
	color:#24e068;
}

.stem-description-text table{
	width:100%;
	margin-bottom: 20px;
}
.stem-description-text table td{
	padding:10px;
	/*border: #fff 3px solid;*/
	width:33.33%;
}
.stem-description-text table td:not(:last-child){
	border-right: #fff 5px solid;
}
.stem-description-text table thead td{
	font-weight: bold;
	color:#fff;
	text-align: center;
	vertical-align: middle;
	/*border-bottom:0px;*/
}
.stem-description-text table tbody td{
	text-align: left;
	vertical-align: top;
	/*border-top:0px;*/
}

.stem-block.blue .stem-description-text table thead td{
	background-color:#29abe1;
}
.stem-block.blue .stem-description-text table tbody td{
	background-color: #eaf9ff;
}
.stem-block.blue .stem-description-text table td:not(:last-child){
	border-right-color: #f9fdff;
}

.stem-block.pink .stem-description-text table thead td{
	background-color:#b932a0;
}
.stem-block.pink .stem-description-text table tbody td{
	background-color: #fde9fd;
}
.stem-block.pink .stem-description-text table td:not(:last-child){
	border-right-color: #fcfafc;
}

.stem-block.red .stem-description-text table thead td{
	background-color:#ff732a;
}
.stem-block.red .stem-description-text table tbody td{
	background-color: #fff1ea;
}
.stem-block.red .stem-description-text table td:not(:last-child){
	border-right-color: #fffcf9;
}

.stem-block.green .stem-description-text table thead td{
	background-color:#24e068;
}
.stem-block.green .stem-description-text table tbody td{
	background-color: #e2fff0;
}
.stem-block.green .stem-description-text table td:not(:last-child){
	border-right-color: #f9fffc;
}

.stem-block .stem-description-text ul{
	margin:0 0 20px 20px;
}

.stem-block .contents{
	padding: 25px 40px 50px 40px;
	margin-bottom: 31px;
}
.stem-block.blue .contents{
	background-color: #f9fdff;
}
.stem-block.pink .contents{
	background-color: #fcfafc;
}
.stem-block.red .contents{
	background-color: #fffcf9;
}
.stem-block.green .contents{
	background-color: #f9fffc;
}
.stem-description {
	width: 100%;
}
.stem-description-text {
	width: 550px; /*600px;*/
	vertical-align: middle; /*top;*/
	padding : 0; /*27px 0 0 0;*/
}


ul.stem-course-tab,
ul.stem-course-table{
	display:block;
	width: 100%;
	height: auto;
	overflow: hidden;
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
}
ul.stem-course-tab li{
	display:block;
	width: 50%;
	margin: 0 !important;
	float:left;
	box-sizing: border-box;
	line-height: 25px;
	text-align: center;
	font-weight: bold;
	cursor:pointer;
	overflow: hidden;
	padding: 12px 10px 8px;
	color:#a9a9a9;
	font-size: 14pt;
	background: #e5e5e5;
}
ul.stem-course-tab li:not(:last-child){
	border-right:#ccc 1px solid;
}
ul.stem-course-tab li:first-child{
	-moz-border-radius: 10px 0 0 0;
	-webkit-border-radius: 10px 0 0 0;
	border-radius: 10px 0 0 0;
}
ul.stem-course-tab li:last-child{
	-moz-border-radius: 0 10px 0 0;
	-webkit-border-radius: 0 10px 0 0;
	border-radius: 0 10px 0 0;
}


ul.stem-course-tab.one_tab li{
	width:100%;
	-moz-border-radius: 10px 10px 0 0;
	-webkit-border-radius: 10px 10px 0 0;
	border-radius: 10px 10px 0 0;
	cursor: default;
}
ul.stem-course-tab.three_tab li{
	width: 33.33%;
}

ul.stem-course-tab li.disabled{
	cursor: not-allowed;
}
ul.stem-course-tab li.active{
	color:#fff;
	text-shadow: 1px 1px 2px rgba(0,0,0,.5);
	border-right:0px;
}
/*ul.stem-course-tab li#tab_easter{
	-moz-border-radius: 10px 0 0 0;
	-webkit-border-radius: 10px 0 0 0;
	border-radius: 10px 0 0 0;
}
ul.stem-course-tab li#tab_dragon-boat{
	-moz-border-radius: 0 10px 0 0;
	-webkit-border-radius: 0 10px 0 0;
	border-radius: 0 10px 0 0;
}*/



ul.stem-course-table{
	display:block;
	width: 100%;
	margin:0 !important;
	padding:0;
	list-style: none;
}
ul.stem-course-table li{
	display:none;
}
ul.stem-course-table li p{
	padding:0;
	margin:10px 0 0;
}
ul.stem-course-table li.active{
	display:block;
	width:100%;
	height:auto;
}


.stem-timetable {
	margin-top:0px; /*32px;*/
	width: 100%;
}
.stem-timetable th, .stem-timetable td{
	font-weight: bold;
	line-height: 21px;
	padding: 17px;
	width: 25%;
	text-align: center;
}
.stem-timetable.five_roll th,
.stem-timetable.five_roll td{
	width: 20%;
}
.stem-timetable tr.extra-border-top td{
	border-top-width: 6px !important;
}


/*.stem-block.blue .stem-timetable {
	margin-bottom: 17px;
}
.stem-block.pink .stem-timetable {
	margin-bottom: 49px;
}*/
.stem-block.blue ul.stem-course-tab li.active{
	background: #55cdff;
	background: -moz-linear-gradient(top, #55cdff 0%, #84daff 100%);
	background: -webkit-linear-gradient(top, #55cdff 0%,#84daff 100%);
	background: linear-gradient(to bottom, #55cdff 0%,#84daff 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55cdff', endColorstr='#84daff',GradientType=0 );

	-webkit-box-shadow: inset 0px 5px 10px 0px #28aae0;
    -moz-box-shadow: inset 0px 5px 10px 0px #28aae0;
    box-shadow: inset 0px 5px 10px 0px #28aae0;
}
.stem-block.blue .stem-timetable th {
	background-color: #eaf9ff;
	border: 4px solid #eaf9ff;
	color: #29abe1;
}
.stem-block.blue .stem-timetable td {
	border: 4px solid #eaf9ff;
}

.stem-block.pink ul.stem-course-tab li.active{
	background: #ce64bb;
	background: -moz-linear-gradient(top, #ce64bb 0%, #e58ad4 100%);
	background: -webkit-linear-gradient(top, #ce64bb 0%,#e58ad4 100%);
	background: linear-gradient(to bottom, #ce64bb 0%,#e58ad4 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ce64bb', endColorstr='#e58ad4',GradientType=0 );

	-webkit-box-shadow: inset 0px 5px 10px 0px #965c8b;
    -moz-box-shadow: inset 0px 5px 10px 0px #965c8b;
    box-shadow: inset 0px 5px 10px 0px #965c8b;
}
.stem-block.pink .stem-timetable th {
	background-color: #fde9fd;
	border: 4px solid #fde9fd;
	color: #b932a0;
}
.stem-block.pink .stem-timetable td {
	border: 4px solid #fde9fd;
}

.stem-block.red ul.stem-course-tab li.active{
	background: #ff8254;
	background: -moz-linear-gradient(top, #ff8254 0%, #ffa481 100%);
	background: -webkit-linear-gradient(top, #ff8254 0%,#ffa481 100%);
	background: linear-gradient(to bottom, #ff8254 0%,#ffa481 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff8254', endColorstr='#ffa481',GradientType=0 );

	-webkit-box-shadow: inset 0px 5px 10px 0px #eb521a;
    -moz-box-shadow: inset 0px 5px 10px 0px #eb521a;
    box-shadow: inset 0px 5px 10px 0px #eb521a;
}
.stem-block.red .stem-timetable th {
	background-color: #fff1ea;
	border: 4px solid #fff1ea;
	color: #ff732a;
}
.stem-block.red .stem-timetable td {
	border: 4px solid #fff1ea;
}
.stem-block.green ul.stem-course-tab li.active{
	background: #54ffb8;
	background: -moz-linear-gradient(top, #54ffb8 0%, #81ffb3 100%);
	background: -webkit-linear-gradient(top, #54ffb8 0%,#81ffb3 100%);
	background: linear-gradient(to bottom, #54ffb8 0%,#81ffb3 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#54ffb8', endColorstr='#81ffb3',GradientType=0 );

	-webkit-box-shadow: inset 0px 5px 10px 0px #1aeb77;
    -moz-box-shadow: inset 0px 5px 10px 0px #1aeb77;
    box-shadow: inset 0px 5px 10px 0px #1aeb77;
}
.stem-block.green .stem-timetable th {
	background-color: #e2fff0;
	border: 4px solid #e2fff0;
	color: #24e068;
}
.stem-block.green .stem-timetable td {
	border: 4px solid #e2fff0;
}


.stem-generic-details td {
	vertical-align: top;
	padding: 6px 10px 0 0;
}
.stem-details-label {
	font-weight: bold;
}


#terms { padding: 30px 0 30px 0; }
#terms h3 { margin-bottom: 10px; }
#terms ol {}
#terms ol li { margin-left: 25px; }



#tab-easter-stem-content .intro {
	width: 100%; height: 485px; margin: 30px 0;
}

.popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 1000; display: none; }
.popup .box { background-color: #FFF; width: 600px; box-sizing: border-box; padding: 50px; box-shadow: 0 0 10px rgba(0,0,0,1); position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); text-align: center; }
.popup .box p { color: #000; font-size: 18px; margin-bottom: 20px; }
.popup .box a { display: inline-block; padding: 15px 30px; color: #FFF; font-size: 15px; text-decoration: none;  background-color: #2276BA; }


#registration { padding: 30px 0 0; text-align: right; }
#registration h3 { text-align: left; }
#registration form { padding: 30px 50px; background-color: rgba(0,0,0,0.02); }
#registration form ul { text-align: left; margin-bottom: 30px; }
#registration form ul li { list-style:none; margin-bottom: 15px; font-size: 0; text-align: right; overflow: hidden; position: relative}
#registration form ul li label { width: 40%; display: inline-block; font-size: 18px; font-weight: bold; text-align: left; }
#registration form ul li p { width: 100%; display: inline-block; font-size: 15px; text-align: right; }

#registration form input[type=text],
#registration form select { width: 60%; box-sizing: border-box; padding: 5px 10px; font-size: 15px; text-align: left; }
#registration form input[disabled],
#registration form select[disabled] { background-color: rgba(0,0,0,0.05); border:rgb(169, 169, 169) 1px solid}
/*#registration form select#referral{ width:calc(20% - 5px); margin-right:10px;}
#registration form input#referral_others{ width:calc(40% - 5px);}*/

/*#registration form div.padding-left{width:40%; height: 22px; display: block; float:left;}
#registration form div.cell-right{width:60%; display: block; float:left}*/
#registration form div.privacy-txt{width:100%;}
#registration form div.privacy-txt h5{text-align: left; font-size: 18px; padding:0; margin:0 0 6px 0;}
#registration form div.privacy-txt p{font-size: 12px; text-align: left; padding:0; margin:0 0 6px 0;}
#registration form div.privacy-txt p:last-child{margin:0;}
#registration form div.privacy-txt ol li{
	font-size: 12px; text-align: left;
	font-size: 12px;
    text-align: left;
    list-style: outside decimal;
    padding: 0;
    overflow: visible !important;
	margin: 0 0 10px 25px;
}

#registration form label[for="accept_privacy"],
#registration form label[for="accept_terms"]{
	width: calc(100% - 22px)/*calc(60% - 22px)*/;
	font-weight: normal;
	font-size: 16px;
	float: left;
	display:block;
	cursor: pointer;
	padding-bottom: 25px;
}

#registration form input[type=checkbox]#accept_privacy,
#registration form input[type=checkbox]#accept_terms{
	margin:5px 7px 0 0;
	display: block;
	float: left;
	cursor: pointer
}
#registration form #accept_privacy-error,
#registration form #accept_terms-error{
	position: absolute;
	bottom: 0px;
	right: 0;
	box-sizing: border-box;
	padding-left: 21px;
	width:100%
}

#registration form input[type=submit] { display: inline-block; border: 0; padding: 10px 30px; background-color: #F15F1D; color: #FFF; font-size: 20px; font-weight: bold; cursor: pointer; }

#registration form ul li label.error { color: #F00; font-size: 15px; width: 60%; padding: 10px 0 0 0; }

#registration.hidden {
	display:none;
}

/*ASM*/
#pands .main-content .divider{
	margin: 30px auto;
}
#pands .main-content .desc{
	width: 57%;
}
#pands .main-content img,
#pands .main-content .desc{
	display: inline-block;
	vertical-align: middle;
}
#pands .main-content .head{
	text-align: center;
}
#pands .main-content .three-in-row{
	width: 100%;
}
#pands .main-content .ASM-block{
	color: #666666;
	width: 31%;
	display: inline-block;
	padding: 0 5px;
	vertical-align: top;
}
#pands .main-content .ASM-block .title{
	margin: 10px auto;
	font-size: 20px;
	font-weight: bold;
}
#pands .main-content .ASM-block .icon,
#pands .main-content .ASM-block .title{
	text-align: center;
}
#pands .main-content .ASM-block ul li{
	margin-left: 25px;
}
#pands .main-content .ASM_bottom{
	text-align: center;
}
/*ASM*/