/* CSS Document */

#pagetitle #head {
	background: url(img/extend_topimg.jpg) center center / cover no-repeat;
}

#pagetitle #head #label {
	background: #f30;
	position: relative;
}

#pagetitle #head #label h2,
#pagetitle #head #label h3,
#extend_info h3 {
	margin: 0 auto;
}

#pagetitle #head #label h2,
#pagetitle #head #label h3,
#extend_time .left h4,
#extend_info h3,
#extend_lesson .left h4 {
	overflow: hidden;
	text-indent: -9999px;
	display: block;
}

#pagetitle #head #label h2 {
	height: 16px;
	width: 92px;
	background: url(img/extend_h2.png) no-repeat;
	background-size: 92px 16px;
}

#pagetitle #head #label h3 {
	position: absolute;
	bottom: -25px;
	left: 0;
	right: 0;
	margin:0 auto;
	height: 40px;
	width: 309px;
	background: url(img/extend_h3_01.png) no-repeat;
	background-size: 309px 40px;
}

#extend_time {
	padding: 40px 0 48px;
}

#extend_time .left, 
#extend_time .right {
	float: left;
	width: 460px;
	height: 285px;
}

#extend_time .left {
	padding: 0 40px 0 0;
}

@media screen and (max-width: 580px) {
	#extend_time .left, 
	#extend_time .right {
	float: none;
	padding: 0;
	width: 100%;
	height: auto;
	}
	
	#extend_time .left {
	padding: 0;
	}
	
	#extend_time .right {
	padding: 30px 0 0;
	}
}

#extend_time .left h4 {
	padding: 0 0 20px;
	height: 79px;
	width: 367px;
	background: url(img/extend_h4.png) no-repeat;
	background-size: 367px 79px;
}
@media screen and (max-width: 580px) {
	#extend_time .left h4 {
	height: 70px;
	width: 100%;
	max-width: 367px;
	background-size: contain;
	margin: 0 0 1%;
	}
}
	
#extend_time .right img {
	width: 100%;
	height: auto;
	display: block;
}

#extend_info {
	padding: 0 0 60px;
}

#extend_info h3 {
	padding: 0 0 20px;
	height: 24px;
	width: 189px;
	background: url(img/extend_h3_02.png) no-repeat;
	background-size: 189px 24px;
}

#extend_info p {
	padding: 20px 0 0;
}

#extend_lesson {
	padding: 55px 40px 40px;
	margin: 0 0 60px;
	background: url(img/extend_lesson_bg.png) repeat-x;
	background-size: 40px 1990px;
}
@media screen and (max-width: 580px) {
	#extend_lesson {
	padding: 55px 20px 40px;
	}
}

#extend_lesson .left, 
#extend_lesson .right {
	float: left;
	height: auto;

}

#extend_lesson .left {
	padding: 0 40px 0 0;
	width: 440px;
}

#extend_lesson .right {
	width: 400px;
}

@media screen and (max-width: 580px) {
	#extend_lesson .left, 
	#extend_lesson .right {
	float: none;
	padding: 0;
	width: 100%;
	height: auto;
	}
	#extend_lesson .left {
	padding: 0;
	}
}

#extend_lesson .left h4 {
	padding: 0 0 20px;
	height: 78px;
	width: 318px;
	background: url(img/extend_lesson_h4.png) no-repeat;
	background-size: 318px 78px;
}
@media screen and (max-width: 580px) {
	#extend_lesson .left h4 {
	height: 63px;
	width: 100%;
	background-size: contain;
	background-position: left center;
	margin: 0 0 4%;
	}
}

#extend_lesson .left p {
	padding: 0 0 30px;
}

#extend_lesson .left p span {
	font-size: 13px;
	display: block;
	margin: 20px 0 0;
}

#extend_lesson .left img,
#extend_lesson .right h5 img {
	width: 100%;
	height: auto;
	display: block;
}

#extend_lesson .right h5 img {
	padding: 0 0 15px;
}

#extend_lesson .right div {
	padding: 0 0 40px;
	background: url(img/extend_lesson_border.png) no-repeat;
	background-size: 400px 4px;
	background-position: left 0 bottom 15px;
}

#extend_lesson .right div:last-child {
	padding: 0;
	background-image: none;
}

#extend_lesson .right p span {
	font-weight: bold;
	display: block;
	margin: 0 0 15px;
}

#extend_lesson .right p.cap {
	margin: 0 0 5px;
}