﻿@media screen and (min-width:1441px){
	.tabs{
		position:relative;
		max-width:1440px;
		height:730px;
		margin: 0px auto;/*div對齊效果*/
		z-index:0;
	}
	.tab{
		float:left;
		font-size: 18px;
	}
	.tab > input[type=radio]{
		display:none;
	}
	.tab > label{
		display:block;
		position:relative; 
		width:250px;
		height:40px;
		margin-right:-1px;
		padding:5px 15px;
		background:#DDD;
		border:1px solid #AAA;
	}
	.tab > .content{
		display:none;
		position:absolute;
		top:40px;
		right:0;
		bottom:0;
		left:0;
		z-index:1;
		padding:10px;
		background:#FFF;
		border:1px solid #AAA;
	}
	.tab > input[type=radio]:checked + label{
		background:#FFF;
		border-bottom:1px solid transparent;
		z-index:2;
	}
	.tab > input[type=radio]:checked ~ .content{
		display:block;
	}
	.CourseTab{
		display:none;
	}
}
@media screen and (min-width:1281px) and (max-width:1440px){
	.tabs{
		position:relative;
		max-width:1020px;
		height:530px;
		margin: 0px auto;/*div對齊效果*/
		z-index:0;
	}
	.tab{
		float:left;
		font-size: 18px;
	}
	.tab > input[type=radio]{
		display:none;
	}
	.tab > label{
		display:block;
		position:relative; 
		width:200px;
		height:30px;
		margin-right:-1px;
		padding:5px 15px;
		background:#DDD;
		border:1px solid #AAA;
	}
	.tab > .content{
		display:none;
		position:absolute;
		top:30px;
		right:0;
		bottom:0;
		left:0;
		z-index:1;
		padding:10px;
		background:#FFF;
		border:1px solid #AAA;
	}
	.tab > input[type=radio]:checked + label{
		background:#FFF;
		border-bottom:1px solid transparent;
		z-index:2;
	}
	.tab > input[type=radio]:checked ~ .content{
		display:block;
	}
	.CourseTab{
		display:none;
	}
}
@media screen and (min-width:1025px) and (max-width:1280px){
	.tabs{
		position:relative;
		max-width:900px;
		height:470px;
		margin: 0px auto;/*div對齊效果*/
		z-index:0;
	}
	.tab{
		float:left;
		font-size: 16px;
	}
	.tab > input[type=radio]{
		display:none;
	}
	.tab > label{
		display:block;
		position:relative; 
		width:180px;
		height:30px;
		margin-right:-1px;
		padding:5px 15px;
		background:#DDD;
		border:1px solid #AAA;
	}
	.tab > .content{
		display:none;
		position:absolute;
		top:30px;
		right:0;
		bottom:0;
		left:0;
		z-index:1;
		padding:10px;
		background:#FFF;
		border:1px solid #AAA;
	}
	.tab > input[type=radio]:checked + label{
		background:#FFF;
		border-bottom:1px solid transparent;
		z-index:2;
	}
	.tab > input[type=radio]:checked ~ .content{
		display:block;
	}
	.CourseTab{
		display:none;
	}
}
@media screen and (min-width:521px) and (max-width:1024px){
	.tabs{
		display:none;
	}
}
@media screen and (max-width:520px){
	.tabs{
		display:none;
	}
}