@charset "utf-8";
/* CSS Document */

	
		#theme-course{
			width:100%;
			overflow: hidden;
		}
		.theme_box_1{
			width:40%;
			overflow: hidden;
			margin: 0 auto;
			float: left; 
			position: relative;
		}
		.theme_box_1 li img{
			max-width:725px;
			padding: 0 0 2em 0;
		}
		.theme_box_2{
			width:60%;
			float: left; 
			display:inline-block;
		}
		.button_box{
			list-style: none;
			position: relative;
			margin: 0;
			text-align: center;
		}
		.button_box li{
			display: inline-block;
		}
		.one_bt{
			width: 80px;
			padding: 5px 10px 5px;
			background-color: #2daae1;
			color:#ffffff;
			border: none;
			border-radius: 5px;
			margin-right: 0.3em;
		}
		.one_bt:hover{
			background-color: #43b8ec;
		}
		.two_bt{
			width: 80px;
			padding: 5px 10px 5px;
			background-color: #951b81;
			color:#ffffff;
			border: none;
			border-radius: 5px;
			margin-right: 0.3em;
		}
		.two_bt:hover{
			background-color: #a94498;
		}
		.three_bt{
			width: 80px;
			padding: 5px 10px 5px;
			background-color: #0b8e36;
			color:#ffffff;
			border: none;
			border-radius: 5px;
		}
		.three_bt:hover{
			background-color: #24a04d;
		}
		#imgs{
			overflow: hidden;
			position:relative;
			padding: 0 0 0 0.5em;
			list-style: none;
		}
		#imgs img{
			float: left;
			width: 100%;
		}
	.two_img, .three_img{
		display: none;
	}
	


@media (max-width:960px){
		#theme-course{
			width:100%;

			overflow: hidden;
		}
		.theme_box_1{
			width: 100%;
			height: 100%;
			float: left; 
		}
		.theme_box_1 li{
			width: 100%;
			float: left; 
			list-style: none;
		}

		.theme_box_2{
			width: 100%;
			float: left; 
			position: relative;
		}
		.theme_box_1 .button_box{
			list-style: none;
			position: relative;
			margin: 0 auto;
			text-align: center;
			width: 100%;
		}
		.button_box ul{
			display: inline-block;
			padding: 2px;
			margin: 0 auto;
		}
		.button_box li{
			width: 100px;
			float: left;
			padding: 2px;
			margin: 0 auto;
		}
		.one_bt{
			width: 80px;
			padding: 5px 10px 5px;
			background-color: #2daae1;
			color:#ffffff;
			border: none;
			border-radius: 5px;
			margin-right: 0.3em;
		}
		.one_bt:hover{
			background-color: #43b8ec;
		}
		.two_bt{
			width: 80px;
			padding: 5px 10px 5px;
			background-color: #951b81;
			color:#ffffff;
			border: none;
			border-radius: 5px;
			margin-right: 0.3em;
		}
		.two_bt:hover{
			background-color: #a94498;
		}
		.three_bt{
			width: 80px;
			padding: 5px 10px 5px;
			background-color: #0b8e36;
			color:#ffffff;
			border: none;
			border-radius: 5px;
		}
		.three_bt:hover{
			background-color: #24a04d;
		}
		#imgs{
			overflow: hidden;
			height:500px;
			position:relative;
			padding: 0 0 0 0.5em;
			list-style: none;
			text-align:center; 
		}
	#imgs li{
			text-align:center; 
			list-style: none;
	}
		#imgs li img{
			width:100%;
			height: 537px;
			margin:0 auto;
			text-align:center; 
		}
	
	
	.two_img, .three_img{
		display: none;
	}
	
	
	.client_center{
		width:100%;
		float: left;
		margin-top: 1rem;
	}
	.client_center img{
		width:100%;
		border-radius: 10px;
		
	}

	#view_list{
		width:100%;float:left;
		margin-top: 5rem;
	}
	
}


@media (max-width:720px){
		#theme-course{
			width:100%;

			overflow: hidden;
		}
		.theme_box_1{
			width: 100%;
			height: 100%;
			float: left; 
		}
		.theme_box_1 li{
			width: 100%;
			float: left; 
			list-style: none;
		}

		.theme_box_2{
			width: 100%;
			float: left; 
			position: relative;
		}
		.theme_box_1 .button_box{
			list-style: none;
			position: relative;
			margin: 0 auto;
			text-align: center;
			width: 100%;
		}
		.button_box ul{
			display: inline-block;
			padding: 2px;
			margin: 0 auto;
		}
		.button_box li{
			width: 100px;
			float: left;
			padding: 2px;
			margin: 0 auto;
		}
		.one_bt{
			width: 80px;
			padding: 5px 10px 5px;
			background-color: #2daae1;
			color:#ffffff;
			border: none;
			border-radius: 5px;
			margin-right: 0.3em;
		}
		.one_bt:hover{
			background-color: #43b8ec;
		}
		.two_bt{
			width: 80px;
			padding: 5px 10px 5px;
			background-color: #951b81;
			color:#ffffff;
			border: none;
			border-radius: 5px;
			margin-right: 0.3em;
		}
		.two_bt:hover{
			background-color: #a94498;
		}
		.three_bt{
			width: 80px;
			padding: 5px 10px 5px;
			background-color: #0b8e36;
			color:#ffffff;
			border: none;
			border-radius: 5px;
		}
		.three_bt:hover{
			background-color: #24a04d;
		}
		#imgs{
			overflow: hidden;
			padding: 0 0 0 0.5em;
			list-style: none;

		}
	#imgs li{
			text-align:center; 
			list-style: none;
	}
		#imgs li img{
			width:100%;
			height: 537px;
			margin:0 auto;
			text-align:center; 
		}
	
	.two_img, .three_img{
		display: none;
	}
	
	
	.client_center{
		width:100%;
		float: left;
		margin-top: 1rem;
	}
	.client_center img{
		width:100%;
		border-radius: 10px;
		
	}

	#view_list{
		width:100%;float:left;
		margin-top: 5rem;
	}
	
}