/*設定螢幕*/

@media all and (max-width: 1279px) {
	.menuCont { width: 100%;}
	.topCont { width: 100%;}
	.banner { width: 100%; }
	.toTOP { right: 20px; }
	

	
}

@media all and (max-width:1230px) {
	.bn-l{
		width:330px; height: 192px; 
		background-image:url("../../images/bg-l.png");
		background-position: right!important;
		background-size: 409px 192px!important;
		background-repeat: no-repeat;
		top:109px; left: 110px;
		z-index: 5;
	}
}

@media all and (max-width: 1179px) {
	.bn-r { right: -10px;}
	.bn-c { right: 90px;}
	.sliderFrame { flex-grow: 0;}
	.flex-2x2 { width: 50%; height: 285px; flex-grow: 1;}
	.flex-2x2 li { width: 100%; height: 60px; margin: 0 28px 0 0;}
	.flex-2x2 li p { height: inherit;}
}


@media all and (max-width: 1100px){
	.bg-test::before {
		background-size:cover;
		background-position: top center;
		width: 100%; height: 163px;
		top: -50px; left:auto;
	}
	
}


@media all and (max-width: 1079px) {
	.news { width: 95%; margin: auto;}
	.bxflex { width: 100%; margin-left: auto;}
}

@media all and (max-width: 1040px) {
	.mainCont { width: 95%;}
	.feature div { width: 32%;}
	.video-cont { width: 100%;}
	.list li { width: 48%;}
	.bn-l { left: 0;}
	
}

@media all and (max-width: 1020px) {
	.flex-2x2 { width: 35%; height: 285px; flex-grow: 1;}
}

@media all and (max-width: 1000px) {
	.toTOP, .toTOP.btnShow { display: none;}
	.inner .pcNav li.navLine { display: none;}
	.pcNav li.grade::after { display: none; }
	.pcNav li.grade { margin: auto!important;}
	
	header img.logo {  z-index: 0;}
	/*header{ height: 70px;}*/
	header.changeS, header.changeH/*, header.changeS .logo, header.changeH .logo */{ -webkit-animation: none !important; animation: none !important;}
	/*banner上滑後header+背景色*/
	header.inner.shadow { background-color: rgba(30, 30, 30, .8); }
	
	@keyframes MoveLogo {
    from { opacity:1; margin-top: 0;}
    to {  opacity:0;margin-top: -25px;}}
	@keyframes MoveLogo2 {
    from {opacity:0; margin-top: -20px;}
    to {   opacity:1; margin-top: 0;}}
	
	/*首頁*/
	header { padding-top: 0; position: fixed;}
	header.full { height:100% !important; position: fixed; background: #fff;}
	
	.indexH ul.pcNav { margin: 0 auto; }
	.indexH .pcNav li { display: block; }

	/*內頁*/
	
	header.inner.full { background-color: #fff; }
    
    .inner .logo { 
		width: 240px; 
		margin-top: 25px;
		z-index: -2;
	}
	/*手機選單*/
    .pcNav li { margin:0 0 1.5em 0 !important; font-size: 1.125em; display: block; text-align: center;} 
	.indexH .pcNav li { height: auto;}
	.pcNav li.active {border: 0;}
	.pcNav li:last-child { display: block;}
	.pcNav li a {  padding: 0; }
	.inner .pcNav li a {  color:#71934a; }
	/*選單背景*/
	.inner ul.pcNav::after {
		content:'';
		display:none;
	}

	/*.pcNav li:hover .dot{ display: inline-block; margin: 0 8px -10px 0;}*/
	
	header.full.changeS .pcNav, header.full.changeH .pcNav ,header.full.logo, header.full.changeS .logo, header.full.changeH .logo {-webkit-animation: none; animation: none;}
	
	/*手機版展開選單*/
    .inner ul.pcNav, .indexH ul.pcNav, header.full .logo-index, header.full .logo { 
		display:none; background: none; 
	}
	
	ul.grt-menu {
		display:none;
		margin:0;
  		height: 0;
	}  
	/*.logoH{display: none;}*/
	/*.indexH { position: fixed; background: #e7e7e7;}*/
    /*.indexH ul.pcNav { width: 100%; left: 0; top: 0; padding: 0;}*/
	ul.open-grt-menu {
		display: block !important;
		background: #fff;/*#f3efe6*/
		width: 100%;
		left: 0;
		right: 0;
		top: 0;
		height:100%;
		overflow-y: scroll;	
		position: absolute;	
	}
	.inner ul.open-grt-menu.pcNav, .indexH ul.open-grt-menu.pcNav { display: block; right: 0; top: 0; padding-top: 5em;}
	
	/*漢堡選單 btn*/
	.grt-mobile-button {
		display:inline-block;
		position:absolute;
		right:3em;
		top:20px;
		color:#3d3d3d;
		margin:0;
		padding:0;
		cursor:pointer;
		border: 0;
		border-radius: 5px;
		width:45px;
		background: #e5dbbf;
	}
	.grt-mobile-button .line1, .grt-mobile-button .line2, .grt-mobile-button .line3 {
		width: 30px; height: 4px; 
		background-color: #1b3647; 
		margin: 8px auto;
		transition: 0.4s; display:block;
		border-radius: 2px;
	}
	
	/*漢堡選單close btn*/
	.grt-mobile-button-open {position: fixed; z-index:1085; right:2.23em !important;}
	.grt-mobile-button-open .line1 {-webkit-transform: rotate(-45deg) translate(-8px, 9px);transform: rotate(-45deg) translate(-8px, 9px);}
	.grt-mobile-button-open .line2 {opacity: 0;}
	.grt-mobile-button-open .line3 {-webkit-transform: rotate(45deg) translate(-8px, -9px);
		transform: rotate(45deg) translate(-8px, -9px);}
    .testCont { width: 100%; border-radius: 10px; padding: 45px 20px;}
	.testCont div { width: 55%;}
	.testCont ul li { flex-grow: 1; width: auto; margin:0 10px 13px 0;}
	
	/*banner*/
	
}



@media all and (max-width: 900px) {
	.feature {
		width:100%;
		margin: auto!important;
		display:inline-flex;
		flex-direction: column;
	}
	.feature div { 
		width: 330px;
		margin: 0 auto 30px auto!important;
	}
	
}
@media all and (max-width:850px) {
	.bn-l { left:-73px;}
	.bn-r { right: -60px;}
	.bn-c { right: 30px;}
}

@media all and (max-width: 815px) {
	.newsTitle { top: -39px; left: 0;}
	.bxflex { display: block; padding: 15px; height: auto;}
	.flex-2x2 { width: 100%; height: auto; margin: -25px auto 0 auto; justify-content:space-between;}
	.flex-2x2 li { margin: 0 5px 10px 5px; width: 48%; height: 127px;}
	.flex-2x2 li p { height: 50%;}
	.sliderFrame { margin: 36px auto 0 auto;}
	.sliderFrame {
		width: 100%; height: auto; }
	/*修改jqbxsliderCSS********/
	.bx-wrapper { width:105%; border-radius: 0 0 5px 5px; }
	/*修改jqbxsliderCSS********/
}

@media all and (max-width: 800px) {
	.topCont { 
		background-size: 2400px auto;
		background-position: calc(50% - 50px) 0;
	}
	/*test*/
	.testCont { background-image: none; height: auto; padding: 20px 10px;}
	.testCont div { width: 100%; }
	.testCont::before, .testCont::after { display: none;}
	.testCont ul { width: 100%;}
}

@media all and (max-width: 720px) {	
	.junior .list li, .list li { width: 100%;}
}


@media all and (max-width: 700px) {
	
	/*header.indexH { height: 48px; }
	.logo-index { top: 52px; left: 20px; text-align: left; }
	.logo-index img { width: 37%; height: auto; }
	.logo-index::after {
	    bottom: -70%;
	    background-size: 180px auto; background-position: left;
	}
	.inner .logo { width: 260px; }*/
	.bg-test::before { display: none;}
	.bn-tree { left: -228px;}
	.bn-l { display: none!important;}
	.bn-r { right: -142px;}
	.bn-c { right: -56px;}
}

@media all and (max-width: 640px) {
	.topCont { 
		background-size: 2000px auto;
		background-position: calc(50% - 50px) 0;
	}
	.bg-j { background-color: rgba(86,182,209,0.7); margin-top: 70px; }
	.bg-s { background-color: rgba(102,204,204,0.7); margin-top: 70px;}
}

@media all and (max-width: 600px) {
	.flex-2x2 li { margin: 0 0 12px 0; width: 100%; height: 127px;}
	.flex-2x2 li p { height: 50%;}
	.grade h1::before, .grade h1::after {
		display: none; 
	}
	.testCont ul li { width: 40%; margin:0 10px 13px 0;}
	.bn-tree { left: -362px;}
}

@media all and (max-width: 640px) {
	
	.grt-mobile-button{ right: 2.5em; top: 20px;}
	
	
}

@media all and (max-width: 600px) {
	
}	

@media all and (max-width: 500px) {
	.topCont { 
		background-size: 2400px auto;
		background-position: top center;
	}
	.sliderFrame { width: 100%; height: auto;}
	.bx-wrapper { margin-bottom: 15px!important;}
	.flex-2x2 { margin:0;}
	h1 { width: 100%;}
	
}	
@media all and (max-width: 460px) {
	.grade.junior h1::after, .grade.senior h1::after {
		width: 100%; 
		background-size: 98%;
		background-position: center;
		background-repeat: no-repeat;
		bottom: -30px; left: auto;
		z-index: -1;
	}
}
@media all and (max-width: 400px) {
	/*.logo-index::after { display: none; }
	.logo-index img { width: 200px; height: auto; }
	.inner .logo { width: 200px; left: 15px; top:25px; }*/
	.kahoot .title {
		width: 100%; height: 48px; 
		margin: auto auto 20px auto;
		background-size: 100% auto;
	}
	.quizizz .title {
		width: 100%; height: 48px; 
		margin: auto auto 20px auto;
		background-size: 100% auto;
	}
}

		
@media all and (max-width:360px) {
  .inner img.logo { width: 100px;}
  .feature div { width: 100%;}
  .junior .feature div, .senior .feature div {
	  background-size: auto 100%;
	  background-position: center;
	}
}	
@media all and (max-width:340px) {
	.junior .feature div, .senior .feature div {
		background-size: 100% auto;
	}
}