/* CSS Document */


body {
	margin: 0;
	padding: 0;
	text-align: center;
}

/*html, body {
	overflow-x: hidden;
}*/

/*@media (max-width: 800px) {
	html, body {
		overflow-x: hidden;
	}
}*/

/** {
	box-sizing: border-box;
}*/

a 
{
    text-decoration:none;
}
a img {
    border: 0px;
}

li{
	list-style-type:none;
	
	}

ul{
	padding:0 0 0 0;
	margin:0 0 0 0;
	
	}

#wrapper {
	/*margin: 0 auto;
	padding: 0 0 0 0;*/
	width: 100%;
	text-align: left;
	display: grid;
	grid-template-areas:
		"header header"
		"sidebar content"
		"sidebar footer";
	grid-template-rows: auto 1fr auto;
	grid-template-columns: auto 1fr;
	/*min-height: 100vh;*/
	background-color: #f2f2f2;
	position: relative;
	min-width: fit-content;
	min-height: 100vh;
}

/* header start */

.header {
	grid-area: header;
	display: flex;
	position: sticky;
	top: 0;
	left: 0;
	z-index: 100;
}

.header_top {
	width: 100%;
	height: 70px;
	background-color: #2593FC;
}

/*.header_top ul
{
    width:calc(100% - 200px);
	float: right;
	margin:15px 0 0 0px;
	padding: 0 0 0 100px;
}*/

.header_top li a
{
    color:White;
}

.year {
	background-color: #FFF;
	width: 55px;
	height: 20px;
	padding: 9px 7px;
	border-radius: 16px;
	color: #2593FC;
	display: flex;
	align-items: center;
	justify-content: center;
	text-shadow: #2593FC 0px 0px 0px;
}
.header-profile{
	display: flex;
	align-items: center;
	height: 70px;
	justify-content: space-between;
	padding-right: 24px;
	position: relative;
}

.col-menu{
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0px 24px;
	cursor: pointer;
}

.col-menu svg{
	fill:  #fff;
}

.col-menu.bg-white svg{
	fill:  #121212!important;
}

.bg-white {
	background-color: #fff;
}

.hide-side-bar.hide {
	display: none!important;
	transition: .5s;
}

.hide-titlemenu-arrow.active {
	display: none;
}
.hide-arrow::before{
	display: none;
}

.hide-arrow{
	justify-content: center;
	padding-left: 0!important;
}

.login a {
	color: White;
}
.login a:hover
{
    background-color:ActiveCaption;
}

.header_logo {
	float: left;
	width: 280px;
	/*height:100px;*/
	/*margin:10px 0px 2px 0px;*/
	transition: width 0.5s ease;
	
}
	.header_logo.collapse {
		width: 0px;
	}

.header_cyberschoolsupports{
	float: left;
	width: 560px;
	height:20px;
	padding:55px 0px 0px 0px;
	margin:19px 40px 7px 100px;
	}
	
.home {
	float:left;
	width: 82px;
	height:43px;
	background-image:url(../images/main/header/navigator/menu-home-bg.png);
	}
/* Jass Ãß°¡ */
.home img{
     margin:5px 0 0 21px;
     
}

.navigation
{  
    behavior:url(/css/csshover3.htc);
	float:left;
	width: 1022px;
	height:43px;
    

}

.navigation ul
{
    float:left;
	margin: 0 0 0 0;
	padding: 0;

}

.navigation ul li
{
    position:relative;
    float:left;
	width:154px; /* 185px 5 Menus */
	height:43px; 
	list-style-type: none;
    z-index:4000;
	background-image:url(../images/main/header/navigator/menu-bg.png);
}

.navigation li a
{
	float: left;
	width:154px;   /* 185px 5 Menus */
	height:26px;
	padding: 12px 0 6px 0; /* 8px 0 8px 0 when font-size(whiteMenu) is 16 */
	color:#999999;
	text-align:center;
	text-decoration: none;
}

.navigation li a:hover { 
    color:White;
	background:url(../images/main/header/navigator/menu-bg_roll-over.png) no-repeat 0 0;
    margin:0 0 0 0;

}
.navigation li ul
{
    margin: 0px 0 0 0px;
    display:none;
}
.navigation li:hover ul {
    display:block;
    z-index:1000;

}
.navigation li ul li {
	background:url(../images/main/header/navigator/menu-bg.png) no-repeat 0 0;
	

}
.navigation li:hover ul li a:hover {

	background:url(../images/main/header/navigator/menu-bg_roll-over.png) no-repeat 0 0;
}
.navigation  li.selected  {

	background:url(../images/main/header/navigator/menu-bg_roll-over.png) no-repeat 0 0;
}


/* header end */


.content {
	width: 100%;
	background: #fff;
	/*min-height: 570px;*/
	padding-bottom: 0px;
	border-radius: 10px;
}
/* 
.content-faq {
	width: 100%;
	background: #fff;
	padding-bottom: 0px;
	border-radius: 10px;
} */

.content-mycourse-coursefee {
	width: 100%;
	background: #fff;
	/*min-height: 570px;*/
	padding-bottom: 0px;
	border-radius: 12px;
}
.content-test-room {
	width: 100%;
	background: #fff;
	padding-bottom: 0px;
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100vh;
	padding-top: 60px;
}
.content-adminLogin {
	width: 100%;
	background: #fff;
	/*min-height: 570px;*/
	padding-bottom: 0px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: calc(100vh - 150px);
}
.content-minitest {
	width: 100%;
	background: #fff;
	/*min-height: 570px;*/
	padding-bottom: 0px;
}
.content-minitest:after {
	clear: both;
	content: "";
	display: block;
}

.content_OcttcChallenge {
	width: 100%;
	background: #fff;
	/*min-height: 570px;*/
	padding-bottom: 0px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.content-myprofile {
	width: 100%;
	background: #fff;
	/*min-height: 570px;*/
	padding-bottom: 0px;
	display: flex;
	flex-direction: column;
	padding-top: 48px;
	align-items: center;
	/* height: calc(100vh - 192px); */
	/* overflow: auto; */
}

#container {
	width: 100%;
	margin: 0 auto;
	position: relative;
	z-index: 0;
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: flex-start;
	background-color: #fff;
	padding-bottom: 48px;
	border-radius: 10px;
}
#container-welcome {
	width: 100%;
	margin: 0 auto;
	position: relative;
	z-index: 0;
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: flex-start;
	background-color: #fff;
	border-radius: 10px;
}
#container-faq {
	width: 100%;
	margin: 0 auto;
	position: relative;
	z-index: 0;
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: flex-start;
	background-color: #fff;
	border-radius: 10px;
}

#container-new {
	width: 100%;
	margin: 0 auto;
	position: relative;
	z-index: 0;
	display: block;
	/*align-items: center;*/
	/*flex-direction: row;*/
	/*justify-content: flex-start;*/
	background-color: #fff;
	/* padding: 48px 0; */
	/* border-radius: 10px; */
	overflow: auto;
}
.container_last_revision {
	width: 100%;
	margin: 0 auto;
	position: relative;
	z-index: 0;
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: flex-start;
	background-color: #fff;
	border-radius: 10px;
}
	/*#container_last_revision:after {
		clear: both;
		content: "";
		display: block;
	}*/

	#container-banner {
		width: 100%;
		margin: 0 auto;
		position: relative;
		z-index: 0;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: flex-start;
		background-color: #f2f2f2;
		margin-bottom: 16px;
		border-radius: 10px;
	}
#example {
	width:100%;
	aspect-ratio: 910/360;
	/*height:600px;*/
	position:relative;
}
#ribbon {
	position:absolute;
	top:-3px;
	left:-10px;
	z-index:500;
}
.mt-40{
	margin-top: 40px;
}

/*
	Slideshow
*/

#slides {
    width:100%;
	aspect-ratio: 910/360;
	position:absolute;
	top:0px;
	/*left: 25px;*/
	z-index:100;
}

/*
	Slides container
	Important:
	Set the width of your slides container
	Set to display none, prevents content flash
*/

.slides_container {
	width: 100%;
	aspect-ratio: 910/360;
	/*height: calc((100vw - 48px - 280px) * 360 /910) !important;*/
	overflow: hidden;
	position: relative;
	display: none;
	background-color: #FFF;
}

/*
	Each slide
	Important:
	Set the width of your slides
	If height not specified height will be set by the slide content
	Set to display block
*/

.slides_container a {
	width:100%;
	aspect-ratio: 910/360;
	/*height:600px;*/
	display:block;
}

	.slides_container p {
		width: 100%;
		aspect-ratio: 910/360;
		/*height: 600px;*/
		display: block;
	}

	.slides_container a img {
		width: 100%;
		aspect-ratio: 910/360;
		/*height: 600px;*/
	}
.slides_control {
	width: 100% !important;
	height: calc((100vw - 48px - 280px) * 360 /910) !important;
	/*height: 600px !important;*/
}
.slides_control > p > a > img {
	width: 100% !important;
	height: calc((100vw - 48px - 280px) * 360 /910) !important;
}

.slides_control > a > p > img {
	width: 100% !important;
	max-width: 100% !important;
	aspect-ratio: 910/360 !important;
	height: calc((100vw - 48px - 280px) * 360 /910) !important;
}

.collapse.slides_control {
	width: 100% !important;
	height: calc((100vw - 48px - 86px) * 360 /910) !important;
	/*height: 600px !important;*/
}

.collapse.slides_control > p > a > img {
	width: 100% !important;
	height: calc((100vw - 48px - 86px) * 360 /910) !important;
}
.collapse.slides_control > a > p > img {
	width: 100% !important;
	max-width: 100% !important;
	aspect-ratio: 910/360 !important;
	height: calc((100vw - 48px - 86px) * 360 /910) !important;
}
.slides_container p {
	display: block;
	margin: 0;
	margin-left: -3px;
}

.sidebar {
	grid-area: sidebar;
	background-color: #FFF;
	padding-top: 16px;
	padding-left: 6px;
	padding-right: 6px;
	width: 268px;
	/*padding: 20px;*/
	transition: width 0.65s ease;
	white-space: nowrap;
	z-index: 1010;
	overflow: auto;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	position: sticky;
	top: 70px;
	left: 0;
	max-height: calc(100vh - 86px);
}

.sidebar.collapse{
	width: 74px;
}
/*.sidebar.collapse {
	animation: collapseAnimation 0.5s ease;
}

@keyframes collapseAnimation {
	from {
		width: 200px;
	}

	to {
		width: 86px;
	}
}*/
.box {
	min-height: 50px;
	display: flex;
	align-items: center;
	text-decoration-line: none; 
	text-decoration-style: solid; 
	text-decoration-thickness: auto; 
	text-shadow: rgb(0, 0,0) 0px 0px 0px;
	text-decoration-color: rgb(255, 255, 255);
	margin-bottom: 2px;
/*	padding-left: 32px;*/
}

.box1 {
	width: 100%;
	min-height: 50px;
	padding-left: 65px;
	display: flex;
	align-items: center;
	text-decoration-line: none;
	text-decoration-style: solid;
	text-decoration-thickness: auto;
	text-shadow: rgb(0, 0,0) 0px 0px 0px;
	text-decoration-color: rgb(255, 255, 255);
}
ul.submenu {
	display: none;
}

ul.submenu.active{
	display: block;
}
.menu-item{
	margin-bottom: 2px;
}

.sidebar .sidebar-menu .menu-item .submenu li a {
	color: #121212;
}
.sidebar .sidebar-menu .menu-item .submenu li a {
	color: #121212;
}
.titlemenu{
	padding-left: 16px;
	display: flex;
	align-items: center;
}

a.hightlight {
	color: #fff!important;
}
a.hightlight.textIcon{
	color: #fff !important;
}

.box1.hightlight .textIcon{
	color: #fff;
}
.box1.hightlight .hide-side-bar{
	color: #fff;
}

ul.submenu{
	border-bottom: 1px solid #D9D9D9;
}
.border-bottom-item{
	position: absolute;
	right: 0px;
	top: -3px;
	width: 217px;
	height: 1px;
	border-bottom: 1px solid #D9D9D9;
}
.textIcon {
	color: #848A98;
	font-size: 14px;
}
.hide-side-bar {
	color: #848A98;
	font-size: 14px;
}

	.hide-side-bar.log-out-btn{
		color: #fff;
	}
	li.active-menu {
		background-color: #2593FC;
		border-radius: 5px;
		color: #fff;
		text-decoration-line: none;
		text-decoration-style: solid;
		text-decoration-thickness: auto;
		text-shadow: #2593FC 0px -1px 0px;
		text-decoration-color: rgb(255, 255, 255);
	}

li.active-menu > .change-color-arrow > .change-color-text > a {
	color: #fff !important;
}

li.active-menu > ul.submenu{
	background-color: #fff;
}


li.active-menu > ul > .box.pl48 {
	background-color: #fff;
	color: #121212 !important;
}

		li.active-menu > ul > .box.pl48 > span > a {
			color: #f2f2f2;
		}

	li.active-menu > ul > li.box:hover {
		background-color: #2593FC;
		color: #fff !important;
	}

		li.active-menu > ul > li.box:hover > span > a {
			color: #fff;
		}
		li.active-menu .icon_fill svg path{
			fill: #fff;
			transition: .3s;
		}

		li.active-menu > a.hightlight > .sidebar-icon > svg {
			stroke: #fff!important;
		}
		.box:hover .box1 .textIcon{
			color: #fff;
		}
		.box:hover .box1 .hide-side-bar {
			color: #fff;
		}
.sub-content {
	padding-left: 54px;
	display: flex;
	align-items: center;
	cursor: pointer;
}

	.pl48 {
		padding-left: 0px;
	}

.titlemenu:hover,
.sub-content:hover, .box:hover {
	background-color: #2593FC;
	border-radius: 5px;
	text-shadow: #2593FC 0px -1px 0px;
	text-decoration-color: rgb(255, 255, 255);
}

.sub-content:hover > .sidebar-icon >  svg{
	stroke: #fff!important;
}

.titlemenu:hover > .hide-side-bar > a{
	color: #fff;
	transition: .3s;
}

	.titlemenu:hover > .hide-side-bar > span {
		color: #fff;
		transition: .3s;
	}





	.subitem-text:hover, .box:hover{
		color: white;
		transition: .3s;
	}

.icon_fill svg path {
	fill: #121212;
}

.pl48:hover a {
	color: #fff !important;
}

.sidebar-icon{
	/*margin-bottom: 2px;*/
	margin-right: 5px;
}

.sidebar-icon svg {
	stroke: #121212!important;
}

.sidebar-svg-icon svg {
	stroke: #121212 !important;
	fill: #fff;
	stroke-width: 1px;
}

.sidebar-svg-icon-orange svg {
	stroke: #ff8000 !important;
	fill: #fff;
	stroke-width: 0.1rem;
}

li.box:hover > a > .sidebar-icon > svg {
	stroke: #fff !important;
}

.change-color-text{
	color: #fff;
	transition: 0.3s;
}

.change-color-svg svg {
	stroke: #fff !important;
	fill: #2593FC;
	transition: .3s;
}

.titlemenu:hover .sidebar-svg-icon svg {
	stroke: #fff !important;
	fill: #2593FC;
	transition: .3s;
}
.titlemenu:hover .textIcon {
	color: white;
	transition: .3s;
	font-weight: 500;
}

.titlemenu:hover .icon_fill svg path{
	fill: #fff;
	transition: .3s;
}



.titlemenu .textIcon {
	color: #121212;
	font-weight: 500;
}
	.titlemenu .textIcon.change-color-text{
		color: #fff;
	}

	.sidebar-menu-icon {
		margin-bottom: 3px;
		margin-right: 8px;
	}
.sidebar-menu-icon.reset-margin {
	margin-bottom: 0px;
	margin-right: 0px;
}

.sidebar::-webkit-scrollbar {
	display: none;
}

.sidebar {
	-ms-overflow-style: none; /* IE and Edge */
	scrollbar-width: none; /* Firefox */
}

	/*svg{
		fill: black;
	}*/
	/*svg:hover{
		fill: white;
	}*/
.submenutwo{
	display: none;
	position: relative;
}

#log-out-btn{
	color: #121212;
}
.logout_button:hover #log-out-btn {
	color: #fff;
}

.logout_button {
	min-height: 50px;
	display: flex;
	align-items: center;
	padding-left: 16px;
	color: #121212;
	text-decoration-line: none;
	text-decoration-style: solid;
	text-decoration-thickness: auto;
	text-shadow: rgb(0, 0,0) 0px 0px 0px;
	text-decoration-color: rgb(255, 255, 255);
/*	position: absolute;
	bottom: 0px;
	left: 0px;*/
	width: 252px;
	background-color: #fafafa;
	transition: width 0.65s ease;
	margin-bottom: 50px;
	/*margin: 0 6px;*/
	justify-content: flex-start;

}
.logout_button.collapse{
	width: 74px;
	padding: 0px;
	justify-content: center;
}
	.logout_button:hover {
		background-color: #2593FC;
		color: #fff;
		border-radius: 5px;
		text-decoration-line: none;
		text-decoration-style: solid;
		text-decoration-thickness: auto;
		text-shadow: #2593FC 0px -1px 0px;
		text-decoration-color: rgb(255, 255, 255);
	}

.logout_button:hover svg {
	stroke: #fff !important;
	fill: #2593FC;
	transition: .3s;
}

	.logout_button svg {
		stroke: #121212 !important;
		fill: #fafafa;
		stroke-width: 1px;
	}


.main-content {
	grid-area: content;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-direction: column;
	/*background: #e7e7e7 url(../images/main/header_bg.png) center top no-repeat;*/
	/*padding: 20px;*/
	padding: 24px 24px 0;
	/*background-color: #fff;*/
	/*min-height: 100vh;*/
	overflow: auto;

}

.subject__week--section .subject__week--item a {
	text-decoration: underline;
}

.ttc-report__item .report-content a {
	text-decoration: underline;
}

.ottc-report__item .report-content a{
	text-decoration: underline;
}

.titlemenu {
	min-height: 50px;
	display: flex;
	align-items: center;
	cursor: pointer;
	position: relative;
}

	.titlemenu::before {
		height: 8px;
		width: 8px;
		content: "";
		position: absolute;
		right: 15px;
		top: 20px;
		transition: .3s all;
		transform: rotate(-45deg);
		border-right: 2px solid black;
		border-bottom: 2px solid black;
	}
	.titlemenu.not-show-arrow::before{
		display: none;
	}

	.titlemenu:hover::before {
		border-right: 2px solid white;
		border-bottom: 2px solid white;
	}
	.titlemenu.change-color-arrow::before {
		border-right: 2px solid white;
		border-bottom: 2px solid white;
	}

	.sub-menu-color {
		color: #2593FC
	}



.sub-content::before {
	height: 8px;
	width: 8px;
	content: "";
	position: absolute;
	right: 15px;
	top: 20px;
	transition: .3s all;
	transform: rotate(-45deg);
	border-right: 2px solid #2593FC;
	border-bottom: 2px solid #2593FC;
}



.sub-content:hover::before {
	border-right: 2px solid white;
	border-bottom: 2px solid white;
}
.sub-content:hover span{
	color: #fff;
}

.wrapper_logo {
	width: 280px; 
	height: 70px; 
	display: flex; 
	justify-content: center; 
	align-items:center; 
	background-color: #FFF;
}

.titlemenu.active {
	/*background-color: #33a0ff;
color: #fff;*/
	transition: .4s
}

.titlemenu.active::before {
	transform: rotate(45deg);
	top: 17px
}

.sub-content.active::before {
	transform: rotate(45deg);
	top: 17px
}

.image-logo {
	width: 190px;
	/* padding-top:10px; */
}
/*
	Next/prev buttons
*/
#slides .next, #slides .prev {
	position: absolute;
	top: calc((100vw - 280px - 48px)*360/910/2 - 43px/2);
	width: 24px;
	height: 43px;
	display: block;
	z-index: 101;
}
#slides .prev {
	left: 0;
}
#slides .next {
	right:0;
}
/*
	Pagination
*/
.pagination {
	margin-right: 24px;
    float:right;
}

.pagination li {
    display:inline;
	list-style:none;
}

.pagination li a {
	width:20px;
	height:0;
    margin:15px 0 0 5px;
	padding-top:20px;
	background-image:url(../images/main/slider/SlideShow-Btn_grey.png);
	background-position:0 0;
	float:left;
	overflow:hidden;
}
.pagination li a:hover {
    background-image:url(../images/main/slider/SlideShow-Btn_blue.png);
}

.pagination li.current a {
    background-image:url(../images/main/slider/SlideShow-Btn_blue.png);

}






.banner{
	float:left;
	width:100%;
	aspect-ratio:910/360;
	/*height: 600px;*/
	margin:0 0 0 0px;
}

.SlideShow	{
	float:left;
	width:100%;
	height: 30px;

}

.SlideShow ul
{
	margin: 0 0 0 740px;
}

.SlideShow ul li
{
	float:left;
	width:15px;
	height:10px;
	margin:5px 5px 5px 5px;
	list-style-type: none;
}

.SlideShowBtn	{
	float:left;
	width:10px;
	height:10px;
	margin:5px 5px 5px 5px;
}


 
 /* Introduction page*/

.Intro {
	float: left;
	width: 70%;
	margin-top: 50px;
}

.IntroContainer {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 70%;
	margin-top: 50px;
}
.introbox {
	width: 250px;
	height: 150px;
	margin: 0px 0 0 0;
}
	
	
.Introbar{
	height:140px;
	padding:10px 0 0 0;
}
	
	
.line{
	height:120px;
	border-right:1px solid #CCC;
	
}


.IntroQuesiton{
	float:left;
	width:230px;
	height:30px;
	padding:0 0 0 10px;
	
	} 
 
.IntroAnswer{
	 float:left;
	 width:220px;
	 height:100px;
	 padding:10px 10px 0 10px;
 }
 
.Intro2{
	display: flex;
	width:70%;
	margin-top: 50px;
	justify-content: center;
	align-items: center;	
}
.Intro2-Welcome {
	display: flex;
	width: 100%;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 1em;
}
.TextNoteIntro {
	display: flex;
	/*width: 70%;*/
	margin-top: 20px;
	align-self: flex-start;
}

.Intro2Wrapper {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin-top: 50px;
}

.WrapperIntro {
	width: 70%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.smallbar {
	float: left;
	width: 150px;
	height: 2px;
	background-color: #39F;
	margin: 0 0 0 10px;
}



.introbox2{
	float:left;
	width:235px;
	height:300px;
	margin:0 20px 0 0;
	border:1px solid #CCC;
	
	}
	
.Introimage{
	float:left;
	width:220px;
	height:140px;
	margin:5px 5px 5px 5px;
	text-align:center;
	
	}	
	

.IntroQuesiton2{
	float:left;
	width:230px;
	height:30px;
	padding:10px 0 0 10px;
	
	} 
 
.IntroAnswer2{
	float:left;
	width:220px;
	height:100px;
	padding:10px 10px 0 10px;
	letter-spacing: normal;
 }
 
 
.AboutWelcomeBanner	{
	float:left;
	width:960px;
	height:360px;
	background:url(../images/about/welcome/WelcomeToCyberschoolBG2.png);
	}
.AboutWelcomeTo{
	float:left;
	width:302px;
	height:105px;
	margin: 150px 0px 0px 100px;
	}
.AboutWelcomeToText{
	float:left;
	width:115px;
	height:180px;
	margin: 130px 0px 0px 40px;
	}
.AboutLinkBannerBox{
	float:left;
	width:960px;
	height:320px;
}

.AboutLinkBanner{
	float:left;
	width:280px;
	height:220px;
	background: url(../images/about/welcome/WelcomeSBannerBg_blue.png);
	margin:50px 11px 50px 11px;
	}

.AboutLinkBannerText{
	float:left;
	width:200px;
	height:30px;
	padding:30px 40PX 0 40PX;
	}
	
.AboutLinkBannerText2{
	float:left;
	width:200px;
	height:90px;
	padding:10px 40PX 0PX 40PX;
	}	
	
.AboutLinkBannerText3{
	float:left;
	width:200px;
	height:20px;
	padding:0px 40PX 40PX 40PX;
	}		

/* about page end*/

/* Page Title*/

.PageTitle {
	float:left;
	width:70%;
	min-height:50px;
	display: flex;
	flex-direction: column;
}
.PageModuleAnswerTitle {
	width:70%;
	margin-bottom:20px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	/*padding:0px 30px 0 30px;*/
}
.wemt-writing-challenge-container{
	width: 70%;
}

.PageModuleAnswerTitleTestRoom {
	width: 850px;
	margin-bottom: 20px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	/*padding:0px 30px 0 30px;*/
}

.retest-title {
	width: 70%;
	margin-bottom: 60px;
}

.PageVideoLessonTitle {
	width: 70%;
	margin-bottom: 20px;
	display: flex;
	flex-direction: column;
}
.PageTitlePractice {
	float:left;
	width:850px;
	height:60px;
	padding:0px 30px 0 30px;
}
.EssayPageTitle {
	
	width:70%;
	height:100px;
	display: flex;
	flex-direction: column;
}

.PageTitleBar{
	float:left;
	width:170px;
	height:10px;
	margin:5px 0 0 0;
}

.retest-bar{
	width:170px;
	height:10px;
	margin:5px 0 0 0;
}

.PageOrder{
	height:15px;
	align-self: flex-end;
}

.PageTitleText{
	float:left;
	width:100%;
	height:30px;
	margin:5px 0 0 0;
}

.retest-title-text {
	/*width:850px;
	height:30px;
	margin:5px 0 0 0;*/
	border-left: 12px solid #5574A0;
	padding-left: 20px;
	margin: 30px 0 0 0;
	display: flex;
	align-items: center;
}

.PageTitleBg{
	float:left;
	width:100%;
	height:100px;
	margin:20px 0 0 0;
	}

.PageTitleBg2{
	float:left;
	width:850px;
	height:80px;
	margin:20px 0 0 0;
	}


.subnavi{
	float:left;
	width:800px; 
	height:10px;
	
}

.subnavi ul{
	float:left;
	width:800px;
	height:20px;
	list-style-type:none;
    vertical-align:middle;
    margin-bottom:30px;
}

.subnavi ul li{
	float: left;
	width:70px;
	height:20px;
	margin-top:10px;
	margin-right:30px;
	text-align:left;
	vertical-align:middle;
	}

.subnavi  li a 
{
    margin-top:0px;
    height:20px;
    color:#666;
    
}

.subnavi ul li div
{
    width:200px;
    height:20px;
    margin-right: 100px;
}

.subnavi .testNumber li
{
    margin-right:0px;
}

.subnaviGA a
{
    color:#666;
}

.subnaviGA
{
    
    color:#CC0066;
}

.subnaviGAout
{
    
    color:#666666;
}

.subnavi li a:hover  
{
   
    height:10px;
    color:#3072F3;
    
}

.Introimage > img {
	width:220px;
	height:140px;
}






/* Page Title End*/


/*TTC Cancel page*/
.TTCTitle {
	float:left;
	width:850px;
	height:80px;
	padding:0px 30px 0 30px;
}

.TTCCancelBox{
	float:left;
	width:760px;
	height:328px;
	margin:0px 75px 30px 75px;
	background-image:url(../images/ttc_review/cancel_bg.png);

	}
.TTCCancelQ{
	float:left;
	width:680px;
	margin:150px 40px 0 40px;
	text-align:center;
	}


.yesBtn{
	float:left;
	margin:30px 20px 0 200px;
	}

.noBtn{
	float:left;
	margin:30px 0 0 0;
	}


/*TTC Cancel page end*/

/* News board table*/

.BoardTable{
	float:left; 
	width:850px;
	margin:0px 30px 0 30px;
	}

.BoardHeader
{
    float:left;
    width:850px;
    height:22px;
    margin:30px 30px 0 30px;
    background-color:#666;
    }

.BoardTable ul{
	float:left;	
	width:850px;
	padding:0 0 0 0;
	margin:0;
	}
	
.BoardTable ul li{
	float:left; 
	height:30px;
	display: inline;
	text-align:left;
	margin:0;
	}
.TH0{
	float:left; 
	width:100px;
	height:19px;
	text-align:center;
	padding:3px 0 0 0;
	
	}

.TH1{
	float:left; 
	width:350px;
	height:19px;
	text-align:center;
	padding:3px 0 0 0px;
	}
.TH2{
	float:left; 
	width:200px;
	height:19px;
	text-align:center;
	padding:3px 0 0 0;
	}

.TH3{
	float:left; 
	width:200px;
	height:19px;
	text-align:center;
	padding:3px 0 0 0;
	}

.TableHoriMenu0{
	float:left; 
	width:100px;
	height:19px;
	text-align:left;
	padding:3px 0 0 0;
	
	}

.TableHoriMenu2{
	float:left; 
	width:350px;
	height:19px;
	padding:3px 0 0 0px;
	}
.TableHoriMenu3{
	float:left; 
	width:200px;
	height:19px;
	padding:3px 0 0 0;
	}

.TableHoriMenu4{
	float:left; 
	width:200px;
	height:19px;
	padding:3px 0 0 0;
	}
	
	
.TableImageBox{
	float:left; 
	width:100px;
	text-align:center;
	padding:5px 0 0 0;
	}

	
.TableSubjectBox{
	float:left; 
	width:360px;
	text-align:center;
	padding:5px 0 0 0;
	}
	
.TableFileBox{
	float:left; 
	width:180px;
	text-align:center;
	padding:5px 0 0 0;
	}
	
.TableDateBox{
	float:left; 
	width:200px;
	text-align:center;
	padding:5px 0 0 0;
	}
	
	
/* News board table end*/

/* Test information*/
/* Test no*/

.testinfo{
	float:left;
	width:800px;
	min-height:80px;
	padding:0 60px 0 60px;
}
.testinfo-writing{
	/* float:left; */
	width:100%;
	min-height:80px;
	padding:0 60px 0 60px;
}

.testReviewinfo {
	float: left;
	width: 70%;
	display:flex;
	flex-direction:column;
}

.testNo{
	float:left;
	height:80px;
	width:110px;
	}

.testNotext{
	float:left;
	width:110px;
	font-size:small;
	text-align:center;
	margin-top:5px;
	font-weight:bold;
	height:15px;
	letter-spacing:2px;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	}

.testNumber{
	float:left;
	width:110px;
	height:65px;
	margin-top:0px;
	text-align:center;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-weight:bold;
	font-size:35pt;
	}

/*test no end */
/* student detail*/

.studentBar{
	float:left;
	width:10px;
	height:60px;
	margin:10px 0 10px 20px;
	display: none;
}
.studentDetail{
	float:left;
	min-height:30px;
	width: 100%;
	margin-top: 10px;
	margin-right: 0;
	margin-bottom: 20px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	

	}
.Top5WritingContent{
	display: flex;
	align-items: center;
	flex-direction: column;
	width: 70%;
}

.TopWriting-Title-Text{
	border-left:  10px solid #009879;
	padding-left: 20px;
	margin-top: 10px;
}

.studentDetail-Top-Writing{
	padding-left: 32px;
	margin-top: 28px
}

.test-no-top-writing{
	border-radius: 8px;
	background-color: #009879;
	padding: 10px 16px;
	font-size: 14px; 
	margin-right: 14px;
}
.test-no-top-writing:hover {
	opacity: 0.7;
}
.img-pencil-icon{
	display: block; 
	margin: auto
}

.test-no-top-writing-noactive{
	opacity: 0.6;
}

.studentIcon {
	float: left;
	margin: 0 5px 0 5px;
}
.studentIDandName{
	float:left;
	width:300px;
	height:60px;
	margin-left:5px;
	}


.studentID {
	float:left;
	width:240px;
	height:16px;
	padding:3px 0 0 5px;
	border-bottom:solid 1px #CCC;
	}
	
.studentName {
	float:left;
	width:240px;
	height:16px;
	padding:3px 0 0 5px;
	border-bottom:solid 1px #ccc;

	}	
	
.studentScore{
	float:left;
	width:75px;
	height:60px;
	background-image:url(../images/test_result/SPC/scorebg.png);
	border-right: solid 1px #FFF;
	padding:0 0 0 15px;

	}	
.studentScore ul{
	margin:0px;
	padding:0px;
	list-style-type:none;
	
	}

.studentRank {
	float:left;
	width:150px;
	width:70px;
	height:60px;
	background-color:#4D4D4D;
	
	}	

.studentRank ul {
	margin:0px;
	padding:0px;
	list-style-type:none;
	}

/* student detail end*/



/*test info end*/
.sttc-review-subject-header{
	display: flex;
	justify-content: space-between;
}
.subject-wrapper{
	display: flex 
}
.sttc-review-wrapper {
	display: flex;
	align-items: center;
	flex-direction: column;
}
/*result graph box*/
.resultGraphBox {
	float: left;
	/*max-width: 800px;*/
	min-height: 163px;
	/*margin: 0px 60px 10px 60px;*/
	box-shadow: 0px 3px 10px 3px #D4D4D4;
	display:flex;
	flex-direction:column;
}

.resultGraphBox-Sttc-reivew {
	float: left;
	width: 790px;
	min-height: 163px;
	margin: 0px 60px 10px 60px;
	box-shadow: 0px 3px 10px 3px #D4D4D4;
	/*essay writing list*/
}
	.essayRank{
	display: flex;
	flex-direction: column;
	width:100%;
	height:190px;
	align-items: center;
	justify-content: center;
	/*margin:30px 60px 0px 60px;*/
	}
	
.clickStudentName{
	float:left;
	width:790px;
	height:20px;
	}

.essayBtn{
	float:left;
	width:156px;
	height:85px;
	background-image:url(../images/ttc_review/ewlist_bg_before.png);
	border: solid 1px #999;
    cursor:pointer;
	}
	
.essayBtn:hover .green12
{
	color:White;
}

.essayBtnAfter{
	float:left;
	width:156px;
	height:85px;
	background-image:url(../images/ttc_review/ewlist_bg.png);
    border: solid 1px #999;
	cursor:pointer;
	z-index:-1;
	}
	
.essayBtnAfter:hover .green12
{
	color:White;
}
	
	
.essayBtnList{
	float:left;	
	width:800px;
	}

.essayName{
	float:left;
	width:136px;
	height:20px;
	padding:10px 0 0 20px;
	}	
	
.essayNumber{
	float:left;
	width:136px;
	height:50px;
	text-align:right;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size:60px;
	font-weight:normal;
	color:#ccc;
	padding:0 20px 0 0;
	margin:0 0 0 0;
	line-height: 50px;
	}	
	

.ewexample{
	float:left;
	width:790px;
	border: solid 1px #CCC;
	box-shadow:0px 3px 10px 3px #D4D4D4;
	margin: 15px 30px 0 30px;
	background-color:#FFF;
	}



.resultpapertestNO{
	float:left;
	width:120px;
	height:80px;
	left:20px;
	
	}	

.rptestNotext{
	float:left;
	width:120px;
	height:15px;
	padding:5px 0 0 0;
	
	}

.rptestNumber{
	float:left;
	width:120px;
	height:60px;
	
	}
	
.studentnametag{
	float: right;
	width:236px;
	height:75px;
	background-image:url(../images/ttc_review/ew_name_bg.png);
	text-align:center;
	padding: 15px 0 0 0 ;
	
	}

.testPaperImage{
	float:left;
	width:790px;
	height:900px;
	text-align:center;
	vertical-align: middle;
	top:600px;
	position:absolute;
	}
	
	
.testPaperNavi{
	float:left;
	width:790px;
	height:45px;
	background-color:#666;

	}	
.TestNo
{
    background-color:#66CC99;
   /* margin-top:436px;
    margin-left:60px;*/
    position:absolute;
    height:80px;
	width:120px;
	color:White;
	text-align:center;
	vertical-align:middle;
	font-size:large;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}	
	
.naviLeft{
	float:left;
	width: 45px;
	height:45px;
	margin: 0 0 0 280px;

	}	
	
.naviRight{
	float:left;
	width: 45px;
	height:45px;
	}	
	
.naviSave{
	float:left;
	width: 45px;
	height:45px;
	border-right: solid 1px #999;
	border-left: solid 1px #999;
	}		
	

/* My Profile */

td .StudentInfoTitle {
	width:30%;
	height:35px;
	padding-right:10px;
	background-color:#F2F9FF;
	text-align:right;
	}

td .StudentInfo {
	width:70%;
	padding-left:10px;
	min-height: 35px;
	}

td .StudentInfoBorder {
	height:1px;
	background-color:#3399FF;
	}


/* End My Profile */


/*MODULE ANSWER*/

.moduleDownIcon{
	float:left;
	height:80px;
	width:160px;
	margin:0 0 0 5px;
	}

.ModuleAnswerBox{
	width:70%;
	/*margin:  10px 60px 30px 60px;*/

	}

.ModuleAnswerSelected
{
    float:left;
	width:155px;
	height:50px;
	padding:20px 0 0 0px;
	border-bottom: 130px solid 1px #999;
    background-image:url('../../../../images/moduleanswer/subject bg_lime.png'); 
	background-repeat:no-repeat;
    cursor:pointer;
    
}

.ModuleAnswerSelected font
{
    margin:0 0 0 -30px;
}

.ModuleAnswerMouseOn
{
    float:left;
	width:130px;
	height:50px;
	padding: 20px 0 0 0;
	border-bottom: solid 1px #999;
	background-color:#C6E50E;
    cursor:pointer;
    
}

.ModuleAnswerMouseOut
{
    float:left;
	width:130px;
	height:50px;
	padding:20px 0 0 0;
	border-bottom: solid 1px #999;
	background-color:#333;
    cursor:pointer;
    
}
	
.moduleSubject{
	float:left;
	width:130px;
	height:50px;
	padding:20px 0 0 0;
	border-bottom: solid 1px #999;
	}	
	
.moduleTableNo1{
	float:left;
	width: 75px;
	height: 45px;
	border-right:solid 2px #C5C5C5; 
	border-bottom:solid 1px #ccc;
	text-align:center;
	padding:25px 0 0 0;
	}
.moduleTableNo2{
	float:left;
	width: 525px;
	height: 60px;
	border-bottom:solid 1px #ccc;
	text-align:center;
	padding:10px 0 0 0;
	}
	
.moduleTable2No1{
	float:left;
	width: 75px;
	height: 45px;
	border-right:solid 2px #C5C5C5; 
	border-bottom:solid 1px #ccc;
	text-align:center;
	padding:25px 0 0 0;
	}
.moduleTable2No2{
	float:left;
	width: 260px;
	height: 60px;
	border-bottom:solid 1px #ccc;
	border-right:solid 2px #C5C5C5;
	text-align:center;
	padding:10px 0 0 0;
	}

.moduleTable2No3{
	float:left;
	width: 260px;
	height: 60px;
	border-bottom:solid 1px #ccc;
	text-align:center;
	padding:10px 0 0 0;
	}
	


.moduleTable3No1{
	float:left;
	width: 75px;
	height: 45px;
	border-right:solid 2px #C5C5C5; 
	border-bottom:solid 1px #ccc;
	text-align:center;
	padding:25px 0 0 0;
	}
.moduleTable3No2{
	float:left;
	width: 174px;
	height: 60px;
	border-right:solid 2px #C5C5C5; 
	border-bottom:solid 1px #ccc;
	text-align:center;
	padding:10px 0 0 0;
	}

.moduleTable3No3{
	float:left;
	width: 174px;
	height: 60px;
	border-bottom:solid 1px #ccc;
	border-right:solid 2px #C5C5C5; 
	text-align:center;
	padding:10px 0 0 0;
	}
	
.moduleTable3No4{
	float:left;
	width: 174px;
	height: 60px;
	border-bottom:solid 1px #ccc;
	text-align:center;
	padding:10px 0 0 0;
	}	
	
	

.moduleTable4No1{
	float:left;
	width: 75px;
	height: 45px;
	border-right:solid 2px #C5C5C5; 
	border-bottom:solid 1px #ccc;
	text-align:center;
	padding:25px 0 0 0;
	}
.moduleTable4No2{
	float:left;
	width: 130px;
	height: 60px;
	border-right:solid 2px #C5C5C5; 
	border-bottom:solid 1px #ccc;
	text-align:center;
	padding:10px 0 0 0;
	}

.moduleTable4No3{
	float:left;
	width: 130px;
	height: 60px;
	border-bottom:solid 1px #ccc;
	border-right:solid 2px #C5C5C5; 
	text-align:center;
	padding:10px 0 0 0;
	}
	
.moduleTable4No4{
	float:left;
	width: 130px;
	height: 60px;
	border-bottom:solid 1px #ccc;
	border-right:solid 2px #C5C5C5; 
	text-align:center;
	padding:10px 0 0 0;
	}		

	
.moduleTable4No5{
	float:left;
	width: 130px;
	height: 60px;
	border-bottom:solid 1px #ccc;
	text-align:center;
	padding:10px 0 0 0;
	}	
/*module answer end*/


/*acrobat*/

.acrobatBox{
	float:left;
	width:900px;
	margin: 30px 0px 0px 30px;

	}

.text-material{
	width: 70%;
	margin-top: 30px;
}


.acrobattext {
	margin-top: 5px;
	letter-spacing: -1px;
}

.acrobatdownload{
	float:left;

	
	}
.fb-comments-wrapper {
	/* width: calc(100%) !important; */
	/* max-width: 100%!important; */
	margin: 0px 0px 0 0px;
	background-color: #DFE0EF;
}
.backtolist {
    padding: 8px 25px;
    color: #FFF;
    background-color: #2493FC;
    border-radius: 50px;
    margin-top: -4px;
}

.fb-comments, .fb-comments * {
    width:100% !important;
}

.fb-comments {
	background-color: #DFE0EF;
}

/* resultpapertable*/

.resultpaperTable{
	float:left; 
	width:700px;
	height:200px;
	margin:30px 45px 0 45px;
	}

.resultpaperTable ul{
	float:left;	
	width:700px;
	padding:0 0 0 0;
	margin:0;
	}
	
.resultpaperTable ul li{
	float:left; 
	display: inline;
	padding:0 0 0 0;
	margin:0;
	}

.TableHoriMenu0{
	float:left;
	width:103px;
	height:19px;
	text-align:center;
	padding-top: 3px;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
	
	}
.TableHoriMenu1{
	float:left;
	width:280px;
	height:19px;
	text-align:center;
	margin-left:30px;
	padding-top: 3px;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
	
	}
.TableHoriMenu2{
	float:left;
	width:180px;
	height:19px;
	text-align:center;
	padding:3px 0 0 0;
	}
	
.TableNumbereBox{
	float:left; 
	width:60px;
	height:19px;
	text-align:center;
	}

	
.TableMarkBox{
	float:left; 
	width:180px;
	height:19px;
	}

.yourAnswer{
	float:left;
	width:90px;
	height:19px;
	text-align:center;

	}
	
.correct{
	float:left;
	width:90px;
	text-align:center;
	height:16px;
	padding:3px 0 0 0;
	
	}
	
	
.TableDescriptionBox{
	float:left; 
	width:460px;
	height:19px;
	}
	
.D1{
	float:left;
	width:100px;
	text-align:center;
	height:19px;
	
	}



/* resultpapertable*/



/* resultGraph box end*/

/* result paper box*/

/* A3 
	width:890px;
	height:700px;
*/

.resultPaperBox{
	float:left;
	width:100%;
	aspect-ratio: 3/4;
	margin: 0px 30px 30px 30px;
	background-image: url(../images/ttc_review/bg%20bar_essay.png);
	background-repeat: repeat-x;
	
	}

/* A3 
	width:835px;
	height:700px;
*/

.resultPaper {
	float:left;
	width:calc(100% - 60px);
	/* height:1119px;	 */
	aspect-ratio: 3/4;
	background-color:#FFF;
	box-shadow:5px 5px 10px  #F0F0F0;
	margin-top: 15px;
	margin-right: 30px;
	margin-bottom: 0;
	margin-left: 30px;
 
	}
.resultPaperBoxMG{
	float:left;
	width:850px;
	height:750px;
	margin: 30px 30px 30px 30px;
	background-image: url(../images/ttc_review/bg%20bar.png);
	background-repeat:no-repeat;
	
	}

.resultPaperMG {
	float:left;
	width:795px;
	height:750px;
	background-color:#FFF;
	box-shadow:5px 5px 10px  #F0F0F0;
	margin-top: 15px;
	margin-right: 30px;
	margin-bottom: 0;
	margin-left: 30px;
 
	}	

/*page no*/

.PageNoDiv
{
  width:auto;
  margin-left: auto;
margin-right: auto;

}

.PageNo
{
    text-align: center;
    font-family:Lucida Sans Unicode;
}


.PageNo a
{
    display: inline-block;
    width: 30px;
    height: 30px;
    margin-left: 3px;
    vertical-align:middle;
}

.PageNo ul{
	float:left; 
	width:100%;
	height:20px;
	margin:0 auto;
	list-style-type:none;
	}


.PageNo ul li{
	float:left;
	width:30px;
	height:20px;
	text-align:center;
	padding:0 0 0 0;
	margin:0 auto;

	}

.PageNo ul li a{
	color: #666;


}

/*page no end*/


/*search*/

.search {
	/* float:left;
	width: calc(100% - 120px);
	height:65px;
	margin-left:60px;
	display: flex;
	align-items: center;
	justify-content: center; */

    width: 100%;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.form-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	/*gap: 10px;*/
}

/*#NewsViewDetail{
	display:  flex;
	flex-direction: column;
	align-items: center;
}*/


.SearchSelect {
	float: left;
	margin: 0px 0 0 0;
}

.SearchInput{
	float:left;
	/*margin: 0px 5px 0 5px;*/
	height: 50px;
	position: relative;
	border-top-right-radius:  100px;
	border-bottom-right-radius:  100px;
	}

.SearchBtn {
	float: left;
	margin: 0px 0 0 0;
	position: absolute;
	top: 2px;
	right: 2px;
	display: flex;
	align-items: center;
	justify-content: center;
}
#searchField {
	width: 115px;
	border-top-left-radius: 100px;
	border-bottom-left-radius: 100px;
	height: 50px;
	padding-left: 16px;
	border: 1px solid #2593FC;
	font-size: 14px;
	display: block;
    --bs-form-select-bg-img: url(/images/ttc_review/arrowdown.svg);
    background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

}

.searchNewBtn {
	height: 30px;
	width: 30px;
	padding: 8px 25px;
	background-color: #2593FC;
	border-radius: 100px;
}

/*svg.searchNewBtn {
	width: 20px;
	height: 20px;
}*/
#SearchQuery {
	width: 454px;
	height: 46px;
	border-top-right-radius: 100px;
	border-bottom-right-radius: 100px;
	border: 1px solid #2593FC;
	padding-left: 16px;
	font-size: 14px;
}

.PageNo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin: 30px 0 30px 0px;
}

.PageNo ul{
	float:left; 
	width: 620px;
	height:20px;
	padding:0 0 0 230px;
	list-style-type:none;
	}



.SearchPageNo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding-top: 30px;
}
	
.SearchPageNo ul{
/*float:left; 
width: 620px;*/
height:20px;
/*padding:0 0 0 230px;*/
list-style-type:none;
}

.SearchPageNo ul li{
	float:left;
	/*width:30px;
	height:20px;
	text-align:center;
	padding:0 0 0 0;*/

	}


/*searcg end*/

/*.SampleVideo {  
	float:left; 
	margin-top:50px !important;
	width: 960px; 
	height: 140px;
	text-align:center; 
	margin-bottom:-40px !important;
} 

.SampleVideoLessonBtn {
	float:left;
	width:123px !important;*/   /* width:218px; */
	/*height:140px;
	margin:0 3px 0 3px;
}*/



.SampleVideo_title {
	float: left;
	width: 960px;
	height: 33px;
	padding: 0 0 0 20px;
}

.SampleVideo_p{
	float:left;
	width:960px;
	height:30px;
	padding:0 0 0 20px;
	}

.VideoLessonBanner	{
	float:left;
	width:960px;
	height:418px;
	
	}
.VideoLesson {  
	float:left; 
	width: 960px; 
	height: 259px;
	text-align:center; 
} 

.VideoLessonBtn {
	float:left;
	width:175px;
	height:259px;
	margin:0 3px 0 3px;
}

.IconSubject{
	float:left;
	width:75px;
	height:55px;	
	margin:0 82px 0 20px;
	}

.wk{
	float:left;
	margin:30px 0px 0 20px;
	}
	
.IconLevel{
	float:left;
	width:32px;
	height:32px;	
	
	}

.IconVideo{
	float:left;
	width:40px;
	height:40px;
	}



.IconVideo2{
	float:left;
	width:40px;
	height:50px;
	margin:25px 0 0 20px;
	}

/*FAQ table*/
.FAQTableTitle{
	float:left; 
	width:100%;
	margin:0 30px 0 0;
	}
	
.FAQTableTitle ul{
    float:left;	
	width:100%;
	height:25px;
	padding: 0 0 0 0;
	margin:0;
}
.FAQTableTitle ul li{
	float:left; 
	display: inline;
	padding:0 0 0 0;
	margin:0;
	}
	
.FAQTable{
	width:70%;
	margin:30px 0 0;
	}

.FAQTable ul{
	float:left;	
	width:100%;
	padding: 0 0 0 0;
	margin:0;
	}
	
.FAQTable ul li{
	float:left; 
	display: inline;
	padding:0 0 0 0;
	margin:0;
	}
	
.FAQTableHeight
{
    height:30px;
}

.FAQTableHoriMenu0{
	float:left; 
	width:70px;
	height:40px;
	text-align:center;
	padding:5px 0 0 0;
	
	}
.FAQTableHoriMenu1{
	float:left; 
	width:170px;
	height:40px;
	text-align:center;
	padding:5px 0 0 0;
	
	}
.FAQTableHoriMenu2{
	float:left; 
	width:470px;
	height:40px;
	text-align:center;
	padding: 5px 0 0 0;
	}
.FAQTableHoriMenu3{
	float:left; 
	width:190px;
	height:40px;
	text-align:center;
	padding:5px 0 0 0;
	}
	
	
.FAQTableNoBox{
	float:left; 
	width:50px;
	height:15px;
	padding:5px 10px 5px 10px;
	text-align:center;
	}

	
.FAQTableTitleBox{
	float:left; 
	width:150px;
	height:15px;
	text-align:center;
	padding:5px 10px 5px 10px;
	}
	
.FAQTableSubjectBox{
	float:left; 
	width:100%;
	height:15px;
	
	padding: 5px 10px 5px 50px;
	}
	
.FAQTableClickBox{
	float:left; 
	width:170px;
	height:15px;
	padding:5px 10px 5px 10px;
	}
	

.FAQAnswerText{
	/*float:right;*/ 
	/*width:70%;*/
	/*margin:20px 0px 20px 0;*/
	/*padding: 10px 10px 10px 10px;*/
	background-color:#fff;
	}

.FAQAnswerBG{
	float:left;
	width:30%;
	height:70px;
	margin:0px 20px 0 0;
	padding: 10px 0 0 0;
    text-align:right;
	
	}

.FAQnotice{
	float:left; 
	width:850px;
	height:50px;
	margin:30px 30px 0 30px;
}




/*FAQ table end*/


	
/* news detail page*/

.NewsTitle {
	float:left;
	width:850px;
	height:100px;
	padding:0px 30px 0 30px;
}

.NewsTitleBar{
	float:left;
	width:30px;
	height:50px;
	margin:5px 30px 0 0;
}
.NewsTitleText{
	width:850px;
	height:30px;
	margin:5px 0 0 0px;

	}

.NewsDate{
	width:850px;
	height:20px;
	margin:0 0 0 0px;

	}
	
.NewsTable {
	float:left;
	width:850px;
	margin:0px 30px 0px 30px;
	border-bottom: solid 1px #CCC;
	border-top: solid 1px #CCC;
}	
.Newsfile {
	float:left;
	width:820px;
	margin:15px 15px 15px 15px;
}	
.Newsfile ul li {
	list-style-type:disc;
	margin-left:10px;
}		
.Newsfile ul li ul li {
	list-style-type:circle;
	margin-left:20px;
}		
.PageTitleBg2{
	float:left;
	width:850px;
	height:80px;
	margin:30px 0 0 0;
	}
.PageTitleBg3{
	float:left;
	width:850px;
	height:80px;
	margin:30px 0 0 0;
	background-image:url('/images/ttc_review/TTCTitlebg.png');
	}




/*LEVELtable*/

.LEVELabout{
	float:left; 
	width:810px;
	margin:30px 50px 0 50px;
	}

.LEVELSubject{
	float:left; 
	width:810px;
	margin:30px 50px 0 50px;
	
	}

.LEVELTable{
	float:left; 
	width:810px;
	margin:30px 50px 0 50px;
	}

.LEVELTable ul{
	float:left;	
	width:810px;
	padding:0 0 0 0;
	margin:0;
	}
	
.LEVELTable ul li{
	float:left; 
	display: inline;
	padding:0 0 0 0;
	margin:0;
	}

.LEVELTableHoriMenu0{
	float:left; 
	width:105px;
	height:77px;
	text-align:center;
	margin: 0 20px 20px 40px;
	
	}
.LEVELTableHoriMenu0_2{
	float:left; 
	width:105px;
	height:77px;
	text-align:center;
	margin: 20px 20px 20px 40px;
	
	}
.LEVELTableHoriMenu0_3{
	float:left; 
	width:105px;
	height:77px;
	text-align:center;
	margin: 10px 20px 20px 40px;
	
	}		
	
.LEVELTableHoriMenu2{
	float:left;
	width:550px;
	padding:10px 20px 0 20px;
	line-height: 16px;
	}

.LEVELTableHoriMenu2_2{
	float:left;
	width:550px;
	padding:10px 20px 0 20px;
	margin:20px 0 0 0;
	line-height: 16px;
	}



	
.LEVELTableIconBox{
	float:left; 
	width:50px;
	height:15px;
	padding:5px 10px 5px 10px;
	text-align:center;
	}

	
.LEVELTableNameBox{
	float:left; 
	width:100px;
	height:15px;
	text-align:center;
	padding:5px 10px 5px 10px;
	}
	
.LEVELTableDetailBox{
	float:left; 
	width:450px;
	height:15px;
	padding:5px 10px 5px 10px;
	}


/*LEVEL table end*/


/*registrator*/

.RegTitle {
	float:left;
	width:850px;
	height:60px;
	padding:0px 30px 0 30px;
}



.regDOBselect {
 	float: left;
	width: 290px;
	height:28px;
	padding:2px 0 0 10px;
}
.regDOBselectbox {
 	float: left;
	width: 80px;
	height:25px;
	overflow:hidden;
} 
.regDOBselectbox select {
 	float: left;
	background: transparent;
	width:82px; 
	height:25px;
	border:1px solid #66ccff;
	
} 

.errorbox3 {
	float: left;
	width: 10px;
	height:17px;
	padding:6px 0 0 2px;
	}

.registratorTable{
	float:left;
	width:850px;
	height:370px;
	margin:20px 30px 0 30px;
	background:url(/images/login/bluereg_copy.png) no-repeat;
	
	
	}
		
.registratorTable2{
	float:left;
	width:850px;
	height:60px;
	margin:20px 30px 0 30px;
	}	
.CongraturationsTable{
	float:left;
	width:850px;
	height:360px;
	margin:20px 30px 0 30px;
	background: url(../images/login/LetsStudyreg.png) no-repeat 370px 0;
	}	
	
	
.Rgbtn{
	float:left;
	background-color:#FFF;
	width:590px;
	height:30px;
	padding:10px 20px 10px 20px;
	}

	
.RgErrorBox{
	float:left;
	width:450px;
	height:42px;
	margin-top:-8px;
	}


.SubmitBtn{
	float:right;
	width:78px;

	}
	
.LinkBtn{
	float:left;
	width:62px;
	margin:90px 0px 0px 90px;
	box-shadow:0px 1px 10px 1px #036;
	border-radius: 3em ;
	}
	
.tablewrap{
	float:left;
	width: 630px;
	height:360px;
	margin:0 0 0 20px ;
	}	
	
/*registrator end*/

/*Congratulation Box*/
.CongratulationBox{
	float: left;
	width:500px;
	height:300px;
	border: 0px solid #999;
	margin:0px 0px 0 20px;
	border-radius:15px;
	box-shadow:0px 3px 10px 3px #D4D4D4 ;
	
	}
.CongratulationIcon{
	float: left;
	width:91px;
	height:70px;
    margin: 30px 0 0 100px;
	}
	
.Congratulation{
    float: left;
    text-align: left;
    width:450px;
    height:52px;
    padding:18px 0 0 30px;
    margin:-80px 0 0 120px;
}

/*invalid box*/
.invalidBox{
	float: left;
	width:650px;
	height:300px;
	border: 0px solid #999;
	margin:100px 125px 52px 125px;
	border-radius:15px;
	box-shadow:0px 3px 10px 3px #D4D4D4 ;
	
	}

.invalidIcon{
	float: left;
	width:91px;
	height:70px;
	margin:100px 0 0 100px ;

	}
	
	
.invalidIcon2{
	float: left;
	
	margin:10px 0 0 0;

	}	

.invalid{
	float: left;
	width:400px;
	height:52px;
	padding:18px 0 0 0;
	margin:100px 0 0 0 ;
	}
	
	
.invalidSTTC{
	float: left;	
	padding:0 0 0 0;
	margin:10px 10px 10px 36px ;
	}

.NoQuestionBox{
	float:left;
	width:65%;
	height:360px;
	margin:30px 60px 30px 60px;
	box-shadow:0px 3px 10px 3px #D4D4D4 ;
	border-radius:15px;
	padding:30px;
	padding-top:50px;

	}	


/* contents end */


/*video lseeon icon*/


.videoDownIcon{
	float:left;
	height:80px;
	width:160px;
	margin:0 0 0 5px;
	}


.videotDetail{
	float:left;
	height:50px;
	width: 530px;
	margin-top: 10px;
	margin-right: 0;
	margin-bottom: 10px;
	margin-left: 10px;
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;

	}

.videoTable1No1{
	float:left;
	width: 75px;
	height: 125px;
	background-color:#FDF0D7;
	border-right:solid 2px #C5C5C5; 
	border-bottom:solid 1px #ccc;
	padding:25px 0 0 0;
	}
.videoTable1No2{
	float:left;
	width: 523px;
	height: 120px;
	border-bottom:solid 1px #ccc;
	text-align:center;
	padding:30px 0 0 0;
	}



.videoTable2No1{
	float:left;
	width: 75px;
	height: 125px;
	background-color:#FDF0D7;
	border-right:solid 2px #C5C5C5; 
	border-bottom:solid 1px #ccc;
	padding:25px 0 0 0;
	}
.videoTable2No2{
	float:left;
	width: 260px;
	height: 120px;
	border-right:solid 2px #C5C5C5; 
	border-bottom:solid 1px #ccc;
	text-align:center;
	padding:30px 0 0 0;
	}

.videoTable2No3{
	float:left;
	width: 260px;
	height: 120px;
	border-bottom:solid 1px #ccc;
	
	text-align:center;
	padding:30px 0 0 0;
	}







.videoTable3No1{
	float:left;
	width: 75px;
	height: 125px;
	background-color:#FDF0D7;
	border-right:solid 2px #C5C5C5; 
	border-bottom:solid 1px #ccc;
	padding:25px 0 0 0;
	}
.videoTable3No2{
	float:left;
	width: 174px;
	height: 120px;
	border-right:solid 2px #C5C5C5; 
	border-bottom:solid 1px #ccc;
	text-align:center;
	padding:30px 0 0 0;
	}

.videoTable3No3{
	float:left;
	width: 174px;
	height: 120px;
	border-bottom:solid 1px #ccc;
	border-right:solid 2px #C5C5C5;
	text-align:center;
	padding:30px 0 0 0;
	}
	
.videoTable3No4{
	float:left;
	width: 174px;
	height: 120px;
	border-bottom:solid 1px #ccc;
	text-align:center;
	padding:30px 0 0 0;
	}

.VideoLessonSelected
{
    float:left;
	width:155px;
	height:50px;
	padding:20px 0 0 0px;
	border-bottom: 130px solid 1px #999;
    background-image:url('/images/video_lesson/contents/videolesson_menu/New Folder/subject bg_orange.png'); 
	background-repeat:no-repeat;
    cursor:pointer;
    
}

.VideoLessonSelected font
{
    margin:0 0 0 -30px;
}

.VideoLessonMouseOn
{
    float:left;
	width:130px;
	height:50px;
	padding: 20px 0 0 0;
	border-bottom: solid 1px #999;
	background-color:#FBB03C;
    cursor:pointer;
    
}

.VideoLessonMouseOut
{
    float:left;
	width:130px;
	height:50px;
	padding:20px 0 0 0;
	border-bottom: solid 1px #999;
	background-color:#333;
    cursor:pointer;
    
}


		
.tutorial{
	float:left; 
	width:800px;
	margin:30px 50px 0 60px;
}

.tutorialVideoIcon{
	float:left; 
	width:240px;
	height:161px;
	margin:0px 20px 20px 10px;
}

.tutorialVideoText{
	float:left; 
	width:232px;
	height:70px;
	margin:0px 20px 20px 10px;
	padding:0px 4px 0px 4px;
}

/* Selective Practice Book */
	
.SPB{
	float:left; 
	width:728px;
	height:40px;
	margin: 0 35px;
	padding:20px 0 20px 0;
	border-top: solid 2px #CCC;
}
.SPBTable0{
	float:left; 
	width:810px;
	height:635px;
	margin:30px 50px 0 50px;
	border:solid 2px #CCC;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	background-image:url(../images/selective%20practice%20book/SPB-BG.png);
	}
	
	
.SPBTable{
	float:left; 
	width:806px;
	margin:30px 50px 0 50px;
	border:solid 2px #CCC;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	}

.SPBVideoIcon{
	float:left; 
	width:159px;
	height:161px;
	padding:40px 122px 40px 122px ;
}
.SPBVideotextbox{
	float:left; 
	width:810px;
	height:30px;
	padding:20px 0 0 0;
}
.SPBVideotextbox2{
	float:left; 
	width:810px;
	height:50px;
}
.SPBVideotextbox3{
	float:left; 
	width:810px;
	height:380px;
	padding:10px 0 5px 0;

}
.SPBVideotextbox4{
	float:left; 
	width:805px;
	padding:5px 0px 5px 5px;

}

.vc{
	float:left; 
	width:610px;
	height:45px;
	margin:10px 100px 0 100px;
	padding:15px 0 0 0;
	/* background-color:#006; */
}
.vc_id{
	float:left; 
	width:190px;
	height:20px;
	padding:5px 5px 5px 5px;
	margin:0 10px 0 20px;
	background-color:#69C;
}
.vc_code{
	float:left; 
	width:190px;
	height:20px;
	padding:5px 5px 5px 5px;
	background-color: #69C;
}
.vc_submit{
	float:left; 
	width:90px;
	height:25px;
	margin:0 0 0 20px;
	padding:3px 5px 5px 5px;
	text-align:center;
	background-color:#339;
}
.vc_errorMsg
{
    float:right;
    width:580px;
    margin:5px 5px 5px 5px;
    color:Red;
}

/* Selective Practice Book end */



/* news blog start*/
.home-news-wrapper{
	width: 70%;
	display: flex;
	justify-content:  center;
	margin: auto;
}

.news-footer-icon-wrapper{
	display: flex; 
	justify-content: space-between; 
	width: 70%;
	margin-bottom: 30px;
}

.newsview-content-wrapper{
	width: 75%;
	display: flex;
	justify-content:  center;
	margin: auto;
}
.newsview-footer-icon-wrapper{
	display: flex; 
	justify-content: space-between; 
	width: 75%;
	align-items:  center;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
	padding:  0 40px;
}

.News2{
	width: 100%;
	/* margin: auto; */
	padding: 20px 30px;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
}
.News2::after{
	clear: both;
	content: "";
	display: block;
}

.News2-main-content{
	display: flex; 
	flex-direction: column;
}

.New2-image-review{
	background-color: #F8F8F8;
	width: 230px;
	height: 230px;
}
.New2-image-review img{
	width: 230px!important;
	height: 230px!important;
	/* aspect-ratio: 1/1; */
	/* width: auto; */
	object-fit: cover;
	border-radius:8%;
}



.News2 .NewsBTitle > img {
	display: none;
}


.NewsBTitle {
	/* float: left; */
	/* width: calc(100% - 90px); */
	/* padding: 0px 30px 0 60px; */
}

.NewsBTitle a
{
    color:#3399ff;
}

.NewsBTitle a:visited
{
    color:#3399ff;
}

.NewsBTitle a:hover
{
    color:Silver;
}

.NewsBDate {
	padding: 0px;
	/* justify-self:  flex-end; */
	/* margin-top: 30px; */
	margin-top: auto;
}

.NewsBText {
	/* float: left;
	width: calc(100% - 90px);
	min-height: 70px;
	line-height: 150%;
	padding: 20px 30px 0px 60px; */
}

.NewsBText{
	/* padding: 0; */
	margin-top: 8px;
}

.NewsBText a
{
    color:Gray;
}

.NewsBText a:hover
{
    color:Silver;
}


.NewsBImage {
	float: left;
	width: 100%;
	height: 400px;
	margin: 0px 60px 0 60px;
	background-color: #069;
}

.NewsAttachedfile {
    float:right;
	width:100px;
    height:30px;
    }

/*.NewsBSMS {
	float:right;
	width:100%;
	height:20px;
	text-align:center;
	margin:10px 0 10px 0;
}*/

.NewsBSMS {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: flex-end;
	padding-bottom: 10px;
}

.facebook{
	float:right;
/*	width:100px;*/
	height: 20px;
	}
	
.twitter{
	float:right;
	/*width:100px;*/
	height: 20px;
	}

.google{
	float:right;
	/*width:120px;*/
	height: 20px;
	}

.email{
	float:right;
	/*width:100px;*/
	height: 20px;
	}

.NewsBComment {
	float:left;
	width:100%;
	height:100px;
	margin:0px 60px 0 60px;
	background-color:#DFE0EF;
}

.NewsBLine {
	float:left;
	width:calc(100% - 90px);
	height:10px;
	margin:20px 30px 20px 60px;
	border-bottom:dotted #999;
}

.wrapper-user-profile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	background-color: #fff;
	width: 100%;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}

.wrapper-material-answer {
	display: flex;
	margin-top: 24px;
	justify-content: space-between;
	align-items: center;
}

.term-material-combobox{
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
/* news blog end*/
/* contents end */
.footer {
	float: left;
	width: calc(100% - 200px);
	height: 90px;
	padding-top: 40px;
	text-align: right;
	/*background:url(../images/main/footer/footer_bg.png) no-repeat;*/
	background-color: #58ACDA;
	color: Black;
	margin-bottom: 0px;
}

/* contents end */
.footerNew {
	display: flex;
	width: 100%;
	text-align: right;
	background-color: #f2f2f2 !important;
	color: Black;
	margin-bottom: 0px;
	grid-area: footer;
	justify-content: space-between;
	height: 50px;
	align-items: center;
}

.footer_family	{
    margin-right: 24px;
	height:20px;
    vertical-align:middle;
	float: right;
	display: flex;
	align-items: center;
}

.footer_copy	{
    margin:0 60px 20px 0;
	height:20px;

}

.footer_email {
	margin-left: 24px;
	height: 20px;
	display: flex;
	align-items: center;
}


/*New Module Answer Start*/
/*.ModuleAnswerBox{
	float:left;
	width:70%;
	margin: 0px 60px 30px 30px;
	}*/

td .MA2_Wk{
	float:left;
	width:50px;
	height:30px;
	padding:2px 0 0 0;
	border-right:#FFF solid 2px; 
	}
	
.MA2_Subject{
	height:30px;
	min-width:70px;
	background-color: #CCC;
	border-right:#FFF solid 2px; 
	max-width:100px;
	}
	
td .MA2_WkNo{
	float:left;
	width:50px;
	height:45px;
	padding:15px 0 0 0;
	background-color:#CCC;
	border-bottom:#FFF solid 1px;
	border-right:#FFF solid 2px; 
	}

.MA2_ThisWk{
	float:left;
	width:50px;
	height:45px;
	padding:15px 0 0 0;
	background-color: #C6E50E;
	border-right:#FFF solid 2px; 
	}		
	
.MA2_Icon{
	
	height:55px;
    border-bottom:#999 solid 1px;
	
	}	
		
	
.MA2_Icon img{
	
	margin-left:auto;
	margin-right:auto;
	display: block;

	}

.VideoLesson_AvailableDate
{
    height:30px;
    text-align:center;
    border-bottom:#CCC solid 1px;
}
	
.VideoLesson_Icon{
	
	height:55px;
    border-bottom:#D7D8DA solid 1px;
	
	}
.VideoLesson_Icon_Mobile {
	border: #D7D8DA solid 1px;
	aspect-ratio: 1;
	display:  flex;
	align-items: center;
	justify-content: center;
}

.VideoLesson_Icon img {
	margin-top: 5px;
	margin-bottom: 5px;
	margin-left: auto;
	margin-right: auto;
	display: block;
}

.video__wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	padding: 8px 8px 0;	
}
.videolesson__title {
	min-height: 50px;
	padding-left: 16px;
	color: #fff;
	border-top-left-radius: 8px;
	border-top-left-radius: 8px;
}

.MA2_IconRigntBar {
	float: left;
	width: 0px;
	padding: 5px 0px 0px 0px;
	height: 60px;
	border-bottom: #999 solid 1px;
}	

.VideoLesson_IconRigntBar{
	float:left;
	width: 0px;
	padding:15px 0px 0px 0px;
	height:60px;
	border-bottom:#999 solid 1px;
	}


.MA2_Available{
	
	height:60px;
	border-bottom:#999 solid 1px;
	background-color: #EEE;
	
	}

/*New Module Answer End*/



/* Test Result Start*/
td .TestResultName{
	float:left;
	width:150px;
	height:30px;
	padding:2px 0 0 0;
	border-right:#FFF solid 2px; 
	}
	
.TestResultSubject{
	height:55px;
	min-width:50px;
	background-color: #CCC;
	border-right:#FFF solid 2px; 
	max-width:100px;
	}

.TestResultSubjectBar {
	height: 55px;
	border-bottom: #999 solid 1px;
}	
	
/* Test Result Eng */	
.STTCResultSubject{
	/*height:25px;*/
	background-color: #CCC;
	border-right:#FFF solid 2px; 
	max-width:100px;
	padding-top:6px;
	padding-bottom:6px;
	}
	
.STTCResultSubject_PaddingBot0{
	background-color: #CCC;
	border-right:#FFF solid 2px; 
	max-width:100px;
	height:18px;
	
	}	

.STTCResultSubjectBar{
    height:25px;
    border-bottom:#999 solid 1px;
	
	}	
.MA2_STTCIconRigntBar{
	float:left;
	width: 0px;
	padding:5px 0px 0px 0px;
	height:25px;
	border-bottom:#999 solid 1px;
	}
.image-student {
	position: relative;
}
.image-student-mobile{
	position: relative;
	display: none;
}
.image-wrap {
	position: relative;
	border-radius: 10%;
    display: block;
    overflow: hidden;
	width: fit-content;
}
.image-wrap label {
    display: block;
    border-radius: 10%;
    overflow: hidden;
    position: relative;
}
.crop-image-popup, .select-image-popup {
	    display: none;
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		z-index: 9999;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: rgba(0, 0, 0, 0.6);
}
.crop-image-popup.active, .select-image-popup.active {
	display: flex;
}
.close-popup {
    float: right;
    cursor: pointer;
    margin-top: -20px;
}

.close-capture {
	float: right;
	cursor: pointer;
	margin-top: -20px;
	margin-right: -15px;
}
.btn-save {
	float: right;
    color: #000000;
    background: #ffffff;
    border: 1px solid;
    padding: 5px 10px;
    border-radius: 4px;
	cursor: pointer
}
.webcam-image-popup {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 10000;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: rgba(0, 0, 0, 0.6);

}

.webcam-image-popup.active {
	display: flex;
}

.webcam-container {
	width: 100%;
	height: 100%;
	overflow: auto;
}

.btn-open-webcam {
	background-color: #fff;
	border: 1px solid rgba(27, 31, 35, .25);
	border-radius: 6px;
	color: #27aae1;
	padding: 6px 16px;
	cursor: pointer;
	margin-top: 40px;
}

.btn-Capture {
	background-color: #27aae1;
	border: 1px solid rgba(27, 31, 35, .15);
	box-shadow: rgb(27,31,35,10%) 0 1px 0;
	border-radius: 6px;
	color: #fff;
	padding: 6px 16px;
	cursor: pointer
}

.btn-Cancel {
	background-color: #FF4742;
	border: 1px solid rgba(27, 31, 35, .15);
	box-shadow: rgb(27,31,35,10%) 0 1px 0;
	border-radius: 6px;
	color: #fff;
	padding: 6px 16px;
	cursor:pointer
}

.loading-img {
	display:none;
	border: 5px solid #f3f3f3;
	border-radius: 50%;
	float:right;
	margin-right:5px;
	border-top: 3px solid #3498db;
	width: 20px;
	height: 20px;
	-webkit-animation: spin 2s linear infinite; /* Safari */
	animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
	0% {
		-webkit-transform: rotate(0deg);
	}

	100% {
		-webkit-transform: rotate(360deg);
	}
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

.tab-loading-img {
	border: 2px solid #f3f3f3;
	border-radius: 50%;
	margin-right: 7px;
	display: none;
	border-top: 2px solid #3498db;
	width: 16px;
	height: 16px;
	-webkit-animation: spin 2s linear infinite; /* Safari */
	animation: spin 2s linear infinite;
	position: relative;
	top: 2px;
}

span.tab-loading-img.active {
	display: inline-block;
}

.select-image {
	position: absolute;
    bottom: 7px;
    left: 7px;
    width: 148px;
    height: 48px;
    text-align: center;
    background-color: #000000;
    opacity: 0;
	cursor: pointer;
	border-radius: 0 0 13% 13%;
}
.select-image-container {
	padding: 30px;
    background-color: #ffffff;
	text-align: center;
}
.btn-image {
	margin-right: 20px;
}
.icon-select {
	color: #ffffff;
    font-size: 20px;
    padding-top: 10px;
}
.image-wrap:hover .select-image {
	opacity: 0.7;
}
.student-image-popup {
	width: 350px;
    height: 350px;
    border-radius: 50%;
    object-fit: cover;
}
.image-display {
	object-fit: cover;
}

.term-select__wrapper {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.a.WEMTHW_Report {
	text-decoration: none;
}

/* Warning message */
.info-msg,
.info-msg2,
.success-msg,
.warning-msg,
.error-msg {
	margin: 10px 0;
	padding: 5px;
	border-radius: 3px 3px 3px 3px;
}

.info-msg {
  color: #fff;
  background-color: #23bcc6;
}
.info-msg2 {
  color: #fff;
  background-color: #F27072;
}
.success-msg {
  color: #270;
  background-color: #DFF2BF;
}
.warning-msg {
  color: #c92c2c;
  background-color: #FEEFB3;
}
.error-msg {
  color: #D8000C;
  background-color: #FFBABA;
}

/* Warning message */

.current_datetime {
	margin-top: 40px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
}

.datetime-item{
	margin-right: 30px;
}
.current_week {
	margin-left: 40px;
}

.wrapper-content {
	background-color: #f1f1f1;
	flex: 1;
	width: 100%;
	/* border-radius: 10px; */
	/* overflow: hidden; */
}
.image-wrap.mobile-responsive {
	display: none;
}
.familySelect {
	display: inline;
	margin: 0 0 0 10px
}
.tdSeperator.mobile-responsive {
	display: none;
}

.text-policy{
	color: black;
}

.title-tt-review {
	width: 400px;
}
.ttc-report__title {
	min-height: 50px;
	display: flex;
	align-items: center;
	color: #fff;
	border-radius: 8px;
	background-color: #2E3590;
	padding-left: 16px;
	position: relative;
}

	.ttc-report__title::before {
		height: 10px;
		width: 10px;
		content: "";
		position: absolute;
		right: 15px;
		top: 17px;
		transition: .5s all;
		transform: rotate(45deg);
		border-right: 2px solid #fff;
		border-bottom: 2px solid #fff;
	}

	.ttc-report__title.active::before {
		transform: rotate(-45deg);
		top: 18px;
	}
	.ttc-report__title.active{
		border-radius: 8px!important;
	}

	.ttc-report__sub-section.active{
		display: none;
	}

	.ttc-report__section-ga-video.active{
		display: none;
	}

	.subject__title {
		min-height: 45px;
		display: flex;
		color: #fff;
		border-radius: 8px;
		align-items: center;
		background-color: #4B60BA;
		/*padding-left: 16px;*/
		position: relative;
		padding-right: 36px;
	}

	.subject__title::before {
		height: 10px;
		width: 10px;
		content: "";
		position: absolute;
		right: 15px;
		top: 17px;
		transition: .5s all;
		transform: rotate(45deg);
		border-right: 2px solid #fff;
		border-bottom: 2px solid #fff;
	}

	.subject__title.active::before {
		transform: rotate(-45deg);
		top: 20px;
	}

.ttc-report__item {
	background-color: #fff;
	min-height: 44px;
	margin-bottom: 4px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 16px;
	box-shadow: 0 1px 1px 1px #d4d4d4;
	border-radius: 4px;
	font-size: 14px;
}

.ttc-report__section {
	padding: 8px 8px 4px;
	background-color: #f2f2f2;
	border: 1px solid #DDDDDD;
	border-bottom-right-radius: 8px;
	border-bottom-left-radius: 8px;
}

.ttc-report__section.active{
	display: none;
}

.report-content {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.sub-wrapper {
	margin-bottom: 8px;
}

.ttc-report-container {
	background-color: #fff;
	display: none;
}

.ttc-report__wrapper {
	margin-bottom: 4px;
}

.label__wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.mobile-table-section {
	display: none;
}
.myresult-content {
	padding: 0px 8px 8px;
	border: 4px solid #B4CDFD;
	border-top: none;
	padding-top: 12px;
}
.myresult-title {
	min-height: 50px;
	background-color: #063797;
	display: flex;
	align-items: center;
	color: #fff;
	padding-left: 16px;
}
.new-banner-mobile{
	width: 100%;
}
.new-banner-mobile > a > p > img{
	width: 100%!important;
	/* height: fit-content!important; */
	aspect-ratio: 16/9;
	height: auto!important;
	margin-top: -10px;
}
.new-banner-mobile > p > a > img{
	width: 100%!important;
	/* height: fit-content!important; */
	aspect-ratio: 16/9;
	height: auto!important;
}
.videolesson__container.active{
	display: none;
}

.CourseTable{
	width: 720px;
}
.MyCourseTableDetail{
	width: 720px;
}
.MyCourseTitleTextTD{
	height: 20px;
	vertical-align:text-top; 
	margin:0 0 0 0;
}
.MyCourse-tr-width{
	width: 720px;
}
.MyCourseTitleText{
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size: 32px; 
	font-weight: bold; 
	color:#39F;
}
.mycourse-container{
	overflow: hidden;
	display: flex;
	justify-content: center;
}

.mycourse-coursefee-preset{
	margin-left: 30px;
	padding-top: 40px;
}
.course-fee-mobile-container{
	display: flex;
	align-items: center;
	justify-content: center;
}
.course-fee-item{	
	min-height: 26px;
	border-radius: 8px;
	border: 1px solid #DDDDDD;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px;
	margin-top: 8px;
	background-color: #fff;
}

.course-fee-wrapper{
	padding: 8px;
	background-color: #fff;
	/* border: 1px solid #DDD; */
	margin-bottom: 8px;
	border-radius: 8px;
}
.sub-course-fee-wrapper{
	padding: 8px;
	background-color: #EEE;
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
}
.course-fee-item-title {
	margin-top: 0px;
	border-bottom-left-radius: unset;
	border-bottom-right-radius: unset;
	background-color: #1B0154;
}

.course-fee-total{
	margin: 0 8px 8px;
	background-color: red;
}
.course-fee-action{
	flex-wrap: wrap;
    display: flex;
    justify-content: flex-end;
    margin: 16px 8px;
    gap: 0.5em;
    align-items: center;
}

.mobile-horizontal{
	display: none;
}
.first-menu{
	background-color: #d9f2e6;
	display: flex;
	flex-direction: row;
	padding: 0 5px 0;
}
.sub-menu-link{
	padding: 0.3em 0.9em;
	/* background-color: #fff; */
	cursor: pointer;
	font-family: "Segoe UI",Arial,sans-serif;
	font-size: 13.6px;
	margin: 0.2em 0.3em 0 0;
	border-width: 1px 1px 0;
    border-style: solid;
	border-color: #fff;
	border-top-left-radius: 0.3em;
	border-top-right-radius: 0.3em;
}
.sub-menu-active{	 
	background-color: #fff;
}
.sub-menu-link:hover{
	background-color: #fff;
	border-color: yellow;
}
.player-video-wrapper{
	display: flex;
	align-items: center;
	flex-direction: column;
}

.width100{
	width: 100%;
}

.wrapper-text-flex-start {
	align-items: flex-start;
}

@keyframes flashingWarning {
	0% {
		color: #007bff;
	}

	50% {
		color: green;
	}

	100% {
		color: red;
	}
}

.flashing-color-text {
	animation: flashingWarning 3s infinite; /* Adjust duration as needed */
}

#customModalOverlay{
	opacity: 0.9;
    cursor: pointer;
    visibility: visible;
	background: url(images/overlay.png) repeat 0 0;
	position: fixed;
	top: 0;
	left: 0;
    width: 100%;
    height: 100%;
	z-index: 9999;
}

#customModalCyberschool{

}

.news-form-user{
	margin: 30px 0 30px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 10px;
}

.subscribe-news-btn{
	cursor: pointer;
	margin-top: 20px;
}
#form-subcribe-msg{
	color: #c92c2c;
}

#form-subcribe-success{
	color: #55fd27;
}

.news-footer-container{
	margin: 0;
	margin: auto;
	background-color: #2493FC;
	color: #FFF;
	font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.news-footer-container p{
	line-height: 1.8;
	margin:  0;
}
.stay-up-text-news{
	font-size:  20px;
}
.news-footer-container .singn-up-text-news{
	font-size: 28px;
	margin-top: 20px;
}

.subscribe-news-btn{
	width: fit-content;
	padding: 8px 30px;
	font-size: 15px;
	color: #FFF;
	border-radius:  50px;
	margin-bottom:  50px;
	border: 1px solid #FFF;
	text-align: center;
	background-color:  #2493FC;
}
.news-form-user label{
	font-size: 14px;
}

.news-item-form-user{
	display: flex;
	flex-direction:  column;
	/*margin-right: 10px;*/
}
.news-item-form-user label{
	width: fit-content;
	justify-self: flex-start;
}
.news-item-form-user input{
	border-radius: 50px;
	height: 26px;
	width: 180px;
	border: none;
	padding: 0px 16px;
}
.news-item-form-user input:focus{
   outline: none;
}

.news-item-form-user select{
	border-radius: 50px;
	height: 26px;
	width: 212px;
	border: none;
	padding: 0px 8px;

	display: block;
    --bs-form-select-bg-img: url(/images/ttc_review/arrowdown.svg);
    background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.news-footer-icon-user{
	aspect-ratio: 16/9;
	width: 20%;
}
.news-network-icon{
	aspect-ratio:  7/6;
	/* width: 75%; */
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 20px;
}
.book-review-nav-bar{
	background-image: url(/images/about/Introduction/book-review-competition-banner.jpg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	width: 100%;
	height: 55px;
}
.list-news-content{
	margin-top: 100px;
}
.search{
	margin-bottom: 90px;
}

.news-network-fb-button{
	width: 38px;
	height: 38px;
}

.news-network-it-button{
	width: 33px;
	height: 33px;
}
.news-network-yt-button{
	width: 41px;
	height: 27px;
}

.news-network-fb-button > img{
	width: 100%;
	height: 100%;
}

.news-network-it-button > img{
	width: 100%;
	height: 100%;
}

.news-network-yt-button > img{
	width: 100%;
	height: 100%;
}

.news-network-button{
	display: flex;
	justify-content: center;
	align-items: center;
}
.paging-control-wrapper{
	margin-top: 70px;
	margin-bottom: 90px;
}

.StudentInfo-flex-wrapper{
	display: flex;
	align-items: center;
}

/* .show-user-email-password{
	min-width: 310px;
} */

.show-user-email{
	margin-right: 30px;
	min-width: 200px;
}

.show-user-password{
	margin-right: 30px;
	min-width: 200px;
}

.backgroundFAFAFA{
	background-color: #FAFAFA!important;
}

.score-band-container{
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 2px;
}
.review-result-btn{
	margin-right: 6px;
}
.score-band-badge10 {
	background-color: #ff4845;
	color: #000;
	padding: 0 6px;
	font-size: 10px;
	cursor: pointer;
}
.score-band-badge15 {
	background-color: #f9959a;
	color: #000;
	padding: 0 6px;
	font-size: 10px;
	cursor: pointer;
}
.score-band-badge25 {
	background-color: #ffdcde;
	color: #000;
	padding: 0 6px;
	font-size: 10px;
	cursor: pointer;
}
.score-band-badge50 {
	background-color: #e8ddde;
	color: #000;
	padding: 0 6px;
	font-size: 10px;
	cursor: pointer;
}

.tabstrip-course-name {
    display: flex;
    align-items: center;
    gap: 8px;
	margin-bottom: 24px;
}

.check-the-payment-policy{
	display: flex; justify-content: center; align-items: center;
}

@keyframes expandWidth {
	0% {
	  width: 0;
	}
	100% {
	  width: 100%;
	}
  }

/* Responsive section */

@media (max-width: 1440px) and (min-width: 1024px){
	.news-footer-icon-wrapper{
		width: 80%;
	}
	.home-news-wrapper{
		width: 80%;
	}
	.newsview-content-wrapper{
		width: 85%;
	}
	.newsview-footer-icon-wrapper{
		width: 85%;
	}
}

@media (min-width: 1400px) {
	.sticky{
		position: fixed;
		top: 142px;
		/* width: calc(100% - 32px - 280px); */
		/* background-color: yellow; */
		/* padding: 50px; */
		/* font-size: 20px; */
		z-index: 10;
		background-color: #fff;
	}
	
	.sticky-scroll{
		top: 70px;
	}
	
	.StudentProfileWrapper{
		margin-top: 260px;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		
	}
}

@media only screen and (min-width: 1025px) and (max-width: 1445px){
	.Intro2Wrapper{
		width: 80%;
	}
	.PageModuleAnswerTitle {
		width: 80%;
	}
	.wemt-writing-challenge-container{
		width: 80%;
	}

	.ModuleAnswerBox {
		width: 80%
	}
	.PageVideoLessonTitle{
		width: 80%;
	}
	.PageTitle{
		width: 80%;
	}
	.sttc-review-wrapper{
		width: 80%;
	}
	.testReviewinfo {
		width: 100%;
	}	
	.EssayPageTitle {
		width: 80%;
	}
	.Top5WritingContent{
		width: 80%;
	}
}

@media (max-width: 1024px) {
	#wrapper {
		grid-template-columns: 0px 1fr;
		width: 100vw;
		min-width: unset;
	}
	.select-image{
		/* display: none; */
	}
	.slides_container{
		height: auto;
	}
	#container {
		padding: 8px 0;
		margin: 0;
	}
	.header{
		width: inherit;
	}
	.header_logo{
		width: 0px;
	}
	.subnavi{
		width: 85%;
	}
	.subnavi ul {
		width: 85%;
	}
	.image-wrap.mobile-responsive {
		display: none;
	}
	.NoQuestionBox {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 0 30px 0;
	}
	.invalidIcon, .invalid {
		margin: 0;
		padding: 0;
	}
	.slides_control {
		width: 100% !important;
		height: calc((100vw - 32px) * 360 /910) !important;
		/*height: 600px !important;*/
	}

	#container-faq {
		margin: 0;
		padding: 48px 0;
	}

	.slides_control > p > a > img {
		width: 100% !important;
		height: calc((100vw - 32px) * 360 /910) !important;
	}

	.slides_control > a > p > img {
		width: 100% !important;
		max-width: 100% !important;
		aspect-ratio: 910/360 !important;
		height: calc((100vw - 32px) * 360 /910) !important;
	}

	.sidebar {
		box-shadow: 1px 2px 0 0 #D4D4D4;
		width: 268px;
		max-height: calc(100vh - 86px);
		position: sticky;
		top: 70px;
		left: 0px;
		overflow-x: hidden;
	}
		
	#slides .prev, #slides .next {
		top: calc((100vw - 32px)*360/910/2 - 43px/2);
	}

	.FAQTable {
		overflow: auto;
		margin-top: 0;
	}

	.FAQTable ul {
		/* min-width: 850px; */
	}
	.FAQnotice{
		width: 70%;
	}

	.main-content {
		width: calc(100vw - 32px);
		padding: 16px 16px 0px;
	}

	.header-profile{
		padding-right: 16px;
	}


	.footerNew {
		width: inherit;
	}

	.footer_email{
		margin-left: 16px;
	}
	.footer_family{
		margin-right: 16px;
	}

	.sidebar-menu-icon.reset-margin {
		display:none;
	}

		.sidebar.collapse {
			width: 0px;
			padding: 0px;
		}

	.logout_button {
	}

	.logout_button.collapse {
		display:none;
	}

	.col-menu {
		padding: 0 18px;
	}

	.PageVideoLessonTitle {
		width: 85%
	}

	.PageModuleAnswerTitle {
		width: 85%
	}

	.wemt-writing-challenge-container{
		width: 85%;
	}

	.EssayPageTitle {
		width: 85%
	}

	.ModuleAnswerBox {
		width: 85%
	}

	.text-material {
		width: 85%
	}

	.NoQuestionBox {
		width: 75%
	}
	.PageTitleText {
		width: 85%;
	}
	.retest-title {
		width: 85%;
	}
	.PageTitle {
		width: 85%;
	}
	.sttc-review-wrapper {
		width: 85%;
	}
	.testReviewinfo {
		width: 85%;
	}
	.Intro{
		width: 85%;
		margin-top: 0;
	}
	
	.current_week {
		display: block;
		margin-left: 0px;
		margin-top: 8px;
	}
	.wrapper-user-profile {
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
	}
	
	.col-menu {
		background-color: #2593FC
	}
	.col-menu.bg-white svg {
		fill: #fff!important;
	}
	
	
	.header{
		position: sticky;
		top: 0;
		left: 0;
		z-index: 1000;
	}
	#container-banner {
		margin: 0;
		align-items: flex-start;
	}
	#MaterialTabStrip-1{
		overflow: auto;
	}
	#VideoTabStrip-1{
		overflow: auto;
	}
	#ReadingTabStrip-2 {
		overflow: auto;
	}
	#SCTGATabStrip-1{
		overflow: auto;
	}
	#PracticeTestTab-1{
		overflow: auto;
	}
	#M27ESCourseTabStrip-2{
		overflow: auto;
	}
	#OnlineLesssonTab-1{
		overflow: auto;
	}
	#OnlineTestTab1-1{
		overflow: auto;
	}
	#TestResultTab1-1{
		overflow: auto;
	}
	#PaymentTab-1{
		min-width: 600px;
	}
	#PaymentTab{
		overflow: auto;
	}
	#OnlineTestOCRPTTab-1{
		overflow: auto;
	}
	.mobile-horizontal{
		display: block;
	}
	#NewsViewDetail img{
		width: 100%!important;
		object-fit: contain;
	}

	#NewsViewDetail.NewsBText table{
		width: 100%!important;
	}

	#NewsViewDetail > table{
		width: 100%!important;
	}
	.Top5WritingContent{
		width: 85%;
	}

	.news-footer-icon-wrapper{
		width: 85%;
	}
	.home-news-wrapper{
		width: 85%;
	}
	.newsview-content-wrapper{
		width: 90%;
	}
	.newsview-footer-icon-wrapper{
		width: 90%;
	}
	.news-network-fb-button > img{
		width: 80%;
		height: 80%;
	}
	
	.news-network-it-button > img{
		width: 80%;
		height: 80%;
	}
	
	.news-network-yt-button > img{
		width: 80%;
		height: 80%;
	}

	.news-network-icon{
		gap: 16px;
	}
	#TabStripDiv
	{
		margin-left: 0px!important;
	}

	

}
/*@media (min-width: 1280px){
	.slides_container {
		height: calc((100vw - 48px - 280px) * 360 /910) !important;
	}
	.slides_container.collapse {
		height: calc((100vw - 48px - 86px) * 360 /910) !important;
	}
}*/

@media (max-width: 992px){
	.wrapper-content {
		background-color: #f2f2f2;
	}
	.news-form-user{
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.introbox2{
		margin: 0;

	}
	.Intro2{
		display: grid;
		gap: 1em;
		grid-template-columns: 1fr auto;
	}
	.Intro2-Welcome {
		display: grid;
		gap: 1em;
		grid-template-columns: 1fr auto;
	}
	.IntroContainer{
		display: grid;
		gap: 1em;
		grid-template-columns: 1fr auto;
	}
	.News2{
		padding: 20px 25px;
	}
	.newsview-footer-icon-wrapper{
		padding: 0 25px;
	}
	.news-footer-text-content{
		font-size: 14px;
	}
}

@media (max-width: 640px) {
	.MyCourseTableDetail,
	.MyCourse-tr-width,
	.CourseTable{
		width: 100%;
	}
	.ttc-report-container {
		display: block;
	}
	.container-banner{
		align-items: flex-start;
	}

	.content {
		margin-top: 0px;
		border-radius: 12px;
	}

	/* .content-faq {
		margin-top: 0px;
		border-radius: 12px;
	} */

	.search{
		width: calc(100% - 40px);
		margin: 0 20px;
	}
	#slides .prev, #slides .next {
		top: calc((100vw - 32px)*360/910/2 - 43px/2);
	}

	.footerNew {
		text-align: justify;
	}

	.footer_email {
		display: block;
		height: auto;
		margin-right: 32px;
	}

	.footer_family {
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
	}

	.familySelect {
		margin: 0;
	}

	#container-banner {
		margin: 0;
		align-items: flex-start;	
	}
	.slides_control {
		width: 100% !important;
		height: calc((100vw - 32px) * 360 /910) !important;
	}

	.slides_control > p > a > img {
		width: 100% !important;
		height: calc((100vw - 32px) * 360 /910) !important;
	}
	.image-student {
		display: none;
	}
	.image-student-mobile{
		display: block;
	}

	.FAQTable{
		width: 96%;
	}

	.home-news-wrapper{
		width: 96%;
	}
	.news-footer-icon-wrapper{
		width: 96%;
	}
	.FAQnotice{
		width: 96%;
	}

	#SearchQuery {
		width: 200px;
	}


	.slides_control > a > p > img {
		width: 100% !important;
		max-width: 100% !important;
		height: calc((100vw - 32px) * 360 /910) !important;
	}
	.PageVideoLessonTitle {
		width: 96%
	}

	.PageModuleAnswerTitle {
		width: 96%
	}

	.wemt-writing-challenge-container{
		width: 96%;
	}

	.EssayPageTitle {
		width: 96%
	}
	.ModuleAnswerBox {
		width: 96%
	}

	.text-material {
		width: 96%
	}

	.NoQuestionBox {
		width: 86%
	}

	.PageTitleText {
		width: 100%;
	}

	.retest-title {
		width: 96%;
	}
	.acrobattext{
		max-width: 100%;
	}
	.term-material-combobox{
		align-self: flex-end;
	}
	.wrapper-material-answer{
		flex-direction: column;
	}
	.invalid{
		margin: 0 0 16px 0;
		padding: 0;
	}
	.subnavi{
		width: 96%;
	}
	.subnavi ul{
		width: 96%;
	}
	.NoQuestionBox {
		display: flex;
		align-items: center;
		justify-content: center;
		margin:0 0 30px 0;
	}
	.invalidIcon{
		margin: 0;

	}
	.title-tt-review{
		width: 265px;
	}
	.PageTitle{
		width: 100%;
	}
	.Intro{
		width: 100%;
	}
	.IntroContainer{
		display: flex;
		flex-direction: column;
	}
	.Intro2 {
		display: flex;
		flex-direction: column;
	}
	.Intro2-Welcome {
		display: flex;
		flex-direction: column;
	}
	.mobile-table-section {
		display: block;
		
	}
	.desktop-table-section{
		display: none;
	}

	#container-faq {
		margin: 0;
		padding: 0;
	}
	.wrapper__vocab--info{
		padding: 15px 15px 20px 20px!important;
	}
	#container-new{
		/* padding: 24px 0; */
	}
	.News2{
		padding: 12px 12px;
		/* width: calc(100% - 32px) */
	}
	.newsview-footer-icon-wrapper{
		padding: 0 12px;
	}
	.New2-image-review{
		/* display: none; */
		width: 100%;
		height: 200px;
	}
	.New2-image-review img{
		width: 100%!important;
		height: 200px !important;
	}
	.home-news-wrapper{
		flex-direction: column;
	}
	.list-news-content {
		margin-top: 50px;
	}
	.search {
		margin-bottom: 50px;
	}
	.NewsBTitle{
		/* padding: 0 32px;
		width: calc(100% - 48px); */
	}
	/* .NewsBLine{
		width:calc(100% - 60px);
		margin:20px 30px 20px 30px;
	} */
	.NewsBDate {
		/* width: calc(100% - 70px);
		padding: 0px 30px 0px 40px; */
	}
	.NewsBText {
		/* padding: 20px 0 0 32px;
		width: calc(100% - 32px); */
	}
	#NewsViewDetail img{
		width: 100%!important;
		object-fit: contain;
	}
	#NewsViewDetail.NewsBText table{
		width: 100%!important;
	}

	#NewsViewDetail > table{
		width: 100%!important;
	}
	.set-passcode{
		margin-top: 20px;
	}
	.news-footer-icon-user {
		width: 25%;
	}
	.news-network-fb-button > img{
		width: 60%;
		height: 60%;
	}
	
	.news-network-it-button > img{
		width: 60%;
		height: 60%;
	}
	
	.news-network-yt-button > img{
		width: 60%;
		height: 60%;
	}

	.news-network-icon{
		gap: 0px;
	}

	/* .show-user-email-password{
		min-width: auto;
	} */

	.StudentInfo-flex-wrapper{
		flex-wrap: wrap;
		margin: 4px 0;
		gap: 4px;
	}
	.footer-faq-payment{
		display: none;
	}
	.check-the-payment-policy{
		flex-direction: column;
	}
}


@media (max-width: 480px){
	.image-student {
		display: none;
	}
	.news-footer-icon-user {
		width: 30%;
	}
	.PageVideoLessonTitle {
		width: 96%
	}

	.PageModuleAnswerTitle {
		width: 96%;
		/* overflow: auto; */
	}

	.FAQnotice{
		height: auto;
		width: 96%;
	}
	#SearchQuery{
		width: 160px;
	}
	/*.SearchBtn{
		margin-top: 6px;
	}*/

	.FAQTable {
		overflow: auto;
	}

		.FAQTable ul{
			min-width: 850px;
		}

		.EssayPageTitle {
			width: 96%
		}

	.familySelect {
		margin-top: 4px;
		width: 100%;
	}

	.ModuleAnswerBox {
		width: 96%
	}
	
	.text-material {
		width: 96%
	}

	.NoQuestionBox {
		width: 86%
	}

	.PageTitleText {
		width: 100%;
	}

	.retest-title {
		width: 96%;
	}
	.footerNew {
		width: calc(100vw - 32px);
		margin: 0 16px;
		padding-top: 8px;
		height: auto;
		flex-direction: column;
		background-color: #f1f1f1!important;
		padding-bottom: 16px;
	}
	.footer_select{
		width: 100%;
		height: 28px;
	}

	.footer_email {
		margin-left: 16px;
		margin-right: 16px;
		text-align: center;
		/*margin-right: 16px;*/
		display: block;
		/*		width: 42%;*/
		order: 2;
		color: #a5a5a5 !important;
		max-width: unset;
		margin-top: 32px;
	}

	.footer_family {
		margin-right: 0px;
		display: flex;
		margin-left: 16px;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-end;
		order: 1;
		flex: 1;
		align-self: flex-start;
		width: calc(100% - 32px);
	}

	.invalid{
		max-width: 200px;
	}
	/*#slides .prev, #slides .next {
		top: 130px;
	}*/
	.text-policy {
		color: #a5a5a5;
	}
	#ribbon{
		width: 20%;
	}
	.PageTitleText{
		height: auto;
	}
	/* #Table_01 table{
		width: 85%!important;
	} */
	#container-faq{
		margin: 0;
	}
	.IntroContainer{
		flex-direction: column;
		margin-top: 0;
	}
	.Intro2{
		flex-direction: column;
		margin-top: 0;
	}
	.Intro2-Welcome {
		flex-direction: column;
		margin-top: 0;
	}
	.Introbar{
		display: none;
	}
	.introbox2{
		margin:  0 0 0px;
	}
	.news-form-user{
		grid-template-columns: repeat(1, 1fr);
	}
}

@media (max-width: 320px){
	.year{
		width: 62px;
	}
	.col-menu{
		padding: 0 14px;
	}
	.title-tt-review {
		font-size: 25px;
		width: 280px;
	}
	.invalidIcon.rp-320{

	}

	.invalid.rp-320{
		font-size: 12px;
		margin-bottom: 28px;
	}
	.NoQuestionBox.rp-320{
		height: 200px;
	}
	.pagination{
		margin: 0;
	}
}