.box-carousel {
	background-image: url(../../img/v3.1/toeic/top_bg3.png);
	background-position: center top;
	background-repeat: no-repeat;
	background-size: 100% auto;
}

.box-content > .container:nth-child(1) { max-width: 1400px; }

.course {
    --min-padding-top: 40;
    --max-padding-top: 60;
    --padding-top: calc((var(--min-padding-top) * 1px) + (var(--max-padding-top) - var(--min-padding-top)) * ((100cqw - 320px) / (1200 - 320)));
    padding-top: clamp(var(--min-padding-top) * 1px, var(--padding-top), var(--max-padding-top) * 1px);
	
    --min-padding-bottom: 50;
    --max-padding-bottom: 100;
    --padding-bottom: calc((var(--min-padding-bottom) * 1px) + (var(--max-padding-bottom) - var(--min-padding-bottom)) * ((100cqw - 320px) / (1200 - 320)));
    padding-bottom: clamp(var(--min-padding-bottom) * 1px, var(--padding-bottom), var(--max-padding-bottom) * 1px);
}

.course > .title, .toeic-plan > .title, .exam-skill > .title {
	--min-size: 24;
	--max-size: 42;
	--font-size: calc(
		(var(--min-size) * 1px) + 
		(var(--max-size) - var(--min-size)) * 
		((100cqw - 320px) / (1200 - 320))
	);
	font-size: clamp(var(--min-size) * 1px, var(--font-size), var(--max-size) * 1px);
	font-weight: 700;
	
	padding-bottom: 12px;
	
	text-align: center;
}

.course > div.row { justify-content: center !important; }
.course > div.row > div { flex: 0 0 auto; width: 100%; max-width: 600px; }

.row.small-class { margin-left: 0; margin-right: 0; padding-top: 20px; }
.small-class > div:nth-child(1) {
	flex: 0 0 auto;
    
	--min-width: 116;
	--max-width: 126;
	--width: calc(
		(var(--min-width) * 1px) + 
		(var(--max-width) - var(--min-width)) * 
		((100cqw - 320px) / (1200 - 320))
	);
	width: clamp(var(--min-width) * 1px, var(--width), var(--max-width) * 1px);
	
	
	border-radius: 8px;
	border: 2px solid #68B261;
	background: #68B261;
	
	font-weight: 600;
	color: #FFF;
	
	--min-size: 20;
	--max-size: 24;
	--font-size: calc(
		(var(--min-size) * 1px) + 
		(var(--max-size) - var(--min-size)) * 
		((100cqw - 320px) / (1200 - 320))
	);
	font-size: clamp(var(--min-size) * 1px, var(--font-size), var(--max-size) * 1px);
	
	text-align: center;
	
	margin-bottom: 8px;
}

.small-class > div:nth-child(2) > ul li, .video-class > div:nth-child(2) > ul li {
	font-weight: 400;
	font-size: 20px;
	text-align: left;
}

.row.video-class { margin-left: 0; margin-right: 0; padding-top: 20px; }
.video-class > div:nth-child(1) {
	flex: 0 0 auto;
    
	--min-width: 152;
	--max-width: 172;
	--width: calc(
		(var(--min-width) * 1px) + 
		(var(--max-width) - var(--min-width)) * 
		((100cqw - 320px) / (1200 - 320))
	);
	width: clamp(var(--min-width) * 1px, var(--width), var(--max-width) * 1px);
	
	
	border-radius: 8px;
	border: 2px solid #68B261;
	background: #68B261;
	
	font-weight: 600;
	color: #FFF;
	
	--min-size: 20;
	--max-size: 24;
	--font-size: calc(
		(var(--min-size) * 1px) + 
		(var(--max-size) - var(--min-size)) * 
		((100cqw - 320px) / (1200 - 320))
	);
	font-size: clamp(var(--min-size) * 1px, var(--font-size), var(--max-size) * 1px);
	
	text-align: center;
	
	margin-bottom: 8px;
}

.box-content-toeic, .box-content-student { background: rgba(104, 178, 97, 0.1); }
.toeic-plan {
	--min-padding-top: 32;
    --max-padding-top: 50;
    --padding-top: calc((var(--min-padding-top) * 1px) + (var(--max-padding-top) - var(--min-padding-top)) * ((100cqw - 320px) / (1200 - 320)));
    padding-top: clamp(var(--min-padding-top) * 1px, var(--padding-top), var(--max-padding-top) * 1px);
	
    --min-padding-bottom: 32;
    --max-padding-bottom: 50;
    --padding-bottom: calc((var(--min-padding-bottom) * 1px) + (var(--max-padding-bottom) - var(--min-padding-bottom)) * ((100cqw - 320px) / (1200 - 320)));
    padding-bottom: clamp(var(--min-padding-bottom) * 1px, var(--padding-bottom), var(--max-padding-bottom) * 1px);

}

.plan {
    --min-padding-top: 50;
    --max-padding-top: 103;
    --padding-top: calc((var(--min-padding-top) * 1px) + (var(--max-padding-top) - var(--min-padding-top)) * ((100cqw - 320px) / (1200 - 320)));
    padding-top: clamp(var(--min-padding-top) * 1px, var(--padding-top), var(--max-padding-top) * 1px);
	
    --min-padding-bottom: 60;
    --max-padding-bottom: 100;
    --padding-bottom: calc((var(--min-padding-bottom) * 1px) + (var(--max-padding-bottom) - var(--min-padding-bottom)) * ((100cqw - 320px) / (1200 - 320)));
    padding-bottom: clamp(var(--min-padding-bottom) * 1px, var(--padding-bottom), var(--max-padding-bottom) * 1px);

}

.student {
	--min-padding-top: 24;
    --max-padding-top: 50;
    --padding-top: calc((var(--min-padding-top) * 1px) + (var(--max-padding-top) - var(--min-padding-top)) * ((100cqw - 320px) / (1200 - 320)));
    padding-top: clamp(var(--min-padding-top) * 1px, var(--padding-top), var(--max-padding-top) * 1px);
	
    --min-padding-bottom: 24;
    --max-padding-bottom: 50;
    --padding-bottom: calc((var(--min-padding-bottom) * 1px) + (var(--max-padding-bottom) - var(--min-padding-bottom)) * ((100cqw - 320px) / (1200 - 320)));
    padding-bottom: clamp(var(--min-padding-bottom) * 1px, var(--padding-bottom), var(--max-padding-bottom) * 1px);
}
.student > .title {
    --min-size: 20;
    --max-size: 42;
    --font-size: calc((var(--min-size) * 1px) + (var(--max-size) - var(--min-size)) * ((100cqw - 320px) / (1200 - 320)));
    font-size: clamp(var(--min-size) * 1px, var(--font-size), var(--max-size) * 1px);
}
.student > .title > span > img { 
	--min-width: 20;
	--max-width: 27;
	--width: calc(
		(var(--min-width) * 1px) + 
		(var(--max-width) - var(--min-width)) * 
		((100cqw - 320px) / (1200 - 320))
	);
	width: clamp(var(--min-width) * 1px, var(--width), var(--max-width) * 1px);
	
}

.environment {
	--min-padding-top: 60;
    --max-padding-top: 100;
    --padding-top: calc((var(--min-padding-top) * 1px) + (var(--max-padding-top) - var(--min-padding-top)) * ((100cqw - 320px) / (1200 - 320)));
    padding-top: clamp(var(--min-padding-top) * 1px, var(--padding-top), var(--max-padding-top) * 1px);
	
	padding-bottom: 40px;
}

.environment > div:nth-child(1) > div > img { width: 80%; max-width: 556px; }
.environment > div:nth-child(1) > div:nth-child(2) {
	font-weight: 500;
	--min-size: 16;
	--max-size: 24;
	--font-size: calc(
		(var(--min-size) * 1px) + 
		(var(--max-size) - var(--min-size)) * 
		((100cqw - 320px) / (1200 - 320))
	);
	font-size: clamp(var(--min-size) * 1px, var(--font-size), var(--max-size) * 1px);
	
	text-align: center;
}

.exam-skill {
    --min-padding-top: 40;
    --max-padding-top: 100;
    --padding-top: calc((var(--min-padding-top) * 1px) + (var(--max-padding-top) - var(--min-padding-top)) * ((100cqw - 320px) / (1200 - 320)));
    padding-top: clamp(var(--min-padding-top) * 1px, var(--padding-top), var(--max-padding-top) * 1px);
	
    --min-padding-bottom: 60;
    --max-padding-bottom: 100;
    --padding-bottom: calc((var(--min-padding-bottom) * 1px) + (var(--max-padding-bottom) - var(--min-padding-bottom)) * ((100cqw - 320px) / (1200 - 320)));
    padding-bottom: clamp(var(--min-padding-bottom) * 1px, var(--padding-bottom), var(--max-padding-bottom) * 1px);
}

.popX > div:nth-child(2) > div:nth-child(5) { background: none !important; }
.popX > div:nth-child(2) > div:nth-child(6) { display: none !important; }
.popX > div:nth-child(2) > div:nth-child(7) { display: none !important; }

@media screen and (max-width: 374px) {

}

@media screen and (min-width: 414px) {

}

@media screen and (min-width: 576px) {
	.environment > div:nth-child(1) > div > img { width: 60%; }
		
}

@media screen and (min-width: 640px) {

}

@media screen and (min-width: 768px) {
	.environment > div:nth-child(1) > div > img { width: 42%; }
	.student > .box-row { max-width: 922px; }
	.student > .box-row > div { max-width: 437px; }
	.popX > div:nth-child(2) { height: 240px !important; }
}

@media screen and (min-width: 992px) {
	.course > div.row > div { width: 50%; }
	.box-carousel { background-image: url(../../img/v3.1/toeic/top_bg2.png); }
}

@media screen and (min-width: 1200px) {
	.course > .title, .toeic-plan > .title, .exam-skill > .title { font-size: 42px; }
	.small-class > div:nth-child(2), .video-class > div:nth-child(2) { flex: 1 1 0; }
}

@media screen and (min-width: 1360px) {
	.box-carousel { background-image: url(../../img/v3.1/toeic/top_bg1.png); background-size: auto; }
}

@media screen and (min-width: 1500px) {
    .student > .box-row > div { width: 50%; }
}