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



section#Video {  }

section#Video div.TOPIC { 
	width: 98%; margin: 5px 1%; height: 170px;
	background-image: url('/public/images/Visual_IMG/video.png');
	background-repeat: no-repeat;
	background-color: #f7f2f2; 
	background-size: 600px;
	background-position: 60% -140px;
	color: #FFF;
	border-radius: 5px; 
	padding: 30px; 
	position: relative; 
	overflow: hidden; 
}

section#Video div.TOPIC div.Content { width: 40%; position: absolute; top: 50px; left: 50px; }
section#Video div.TOPIC div.BTN { 
	width: 150px; height: 45px; line-height: 45px; 
	right: 40px; bottom: 30px;
	position: absolute; 
	font-size: 18px; 
	background-color: #824040;
	border-radius: 5px; text-align: center;
}
section#Video div.TOPIC div.BTN a { color: #FFF; display: block; }
section#Video div.TOPIC div.BTN:hover { cursor: pointer; background-color: #CE4949 }

section#Video div.TOPIC h1 { 
	color: #824040; text-align: left; font-size: 3.5em; margin: 0; padding: 0; line-height: 1;
	text-shadow: rgba(0,0,0,0) 0 1px 2px;
}
section#Video div.TOPIC h2 { color: #824040; font-size: 20px; font-weight: 600; margin: 0; padding: 8px 0 6px 7px; line-height: 1; letter-spacing: 17px; }



section#Video > div.BOX { 
	width: 14.66666%; height: auto; 
	border: solid 0px #EFEFED; 
	border-radius: 0px; 
	padding: 0px !important; 
	overflow: hidden; 
	position: relative; 
}

section#Video > div.BOX > a { padding: 0; margin: 0; display: block;  }


section#Video > div.BOX div.Image { width: 100%; height: 130px; overflow: hidden; padding: 0; border-radius: 4px; border: solid #EFEFED 3px; }

section#Video > div.BOX p { 
	font-size: 15px; 
	font-weight: 600; 
	color: #222; 
	text-align: center;
	margin: 0; 
	padding: 10px 0px;
	text-shadow: rgba(0,0,0,0) 0 0px 2px;
	background: rgba(124,124,124,0);
	overflow:hidden; 
	text-overflow:ellipsis; 
	white-space: nowrap;
	color:#824040;
	/*position: absolute;
	width: 100%;
	/*bottom: 0;
	transition: 0.5s;*/

}

section#Video > div.BOX div.BTN.Play { 
	/*position: absolute; 
	top:30px; left: 38%;  */
	margin: 35px auto 0 auto;
	width: 60px; height: 60px; line-height: 60px;
	text-shadow: rgba(0,0,0,0.5) 0 0px 2px;
	border-radius: 99em; 
	font-size: 1.8em; 
	text-align: center; 
	padding: 1px 0 0 6px;  
	background: rgba(89,83,83,0.7);
	

}
section#Video > div.BOX div.BTN:hover { background: rgba(193,54,54,0.95); }
section#Video > div.BOX div.BTN a { color: #FFF; display: block; }
section#Video > div.BOX div.BTN a:hover {   }



	@media (max-width: 1280px) {
		section#Video > div.BOX { width: 31.33333%; }
		section#Video div.TOPIC { background-size: 450px; background-position: 60% -90px; }
	}
	@media (max-width: 1200px) {
		section#Video div.TOPIC { background-size: 350px; background-position: 70% -90px; }
	}
	@media (max-width: 1160px) {
		section#Video div.TOPIC { background-size: 350px; background-position: right -90px; }
		section#Video > div.BOX { float: left !important; clear: initial !important; margin: 10px 1%; }
		section#Video div.TOPIC h1 { font-size: 3em; }
		section#Video div.TOPIC h2 { letter-spacing: 11px; }
		section#Video > div.BOX:nth-child(5), section#Video > div.BOX:nth-child(6), section#Video > div.BOX:nth-child(7) { display: none !important; }
	}
	@media (max-width: 800px) {
		section#Video div.TOPIC div.Content { width: 40%; top: 60px; left: 30px; }
		section#Video div.TOPIC h1 { font-size: 2.3em; }
		section#Video div.TOPIC h2 { font-size: 13px; letter-spacing: 11px; }
		section#Video div.TOPIC div.BTN { height: 30px; line-height: 30px; font-size: 13px; }
	}

	/*Mobile Device Start*/
	@media (max-width: 599px) {
		section#Video div.TOPIC { width: 100%; margin: 5px 0; }
		section#Video > div.BOX { width: 48%; }
		section#Video > div.BOX:nth-child(4) { display: none !important; }

		section#Video div.TOPIC div.Content { width: 100%; top: 20px; left: 0px; padding: 20px 2%; }
		section#Video div.TOPIC h1, section#Video div.TOPIC h2 { text-align: center; }
		section#Video div.TOPIC div.BTN { width: 90%; height: 30px; line-height: 30px; font-size: 13px; right: 5%; }

	}