.box-carousel { background: rgba(86, 160, 240, 0.2); }

#box-course-features, #box-consultants, #box-effect, #box-apply, #box-qna {
	--min-margin-top: 43.2;
	--max-margin-top: 120;
	--margin-top: calc(
		(var(--min-margin-top) * 1px) + 
		(var(--max-margin-top) - var(--min-margin-top)) * 
		((100cqw - 320px) / (1200 - 320))
	);
	margin-top: clamp(var(--min-margin-top) * 1px, var(--margin-top), var(--max-margin-top) * 1px);
}
#box-card { margin-top: 0; }

#box-card > div.row { max-width: 1400px; margin: 0 auto; }
#box-card > div.row > div { margin: 12px auto; padding: 0 24px; position: relative; max-width: 468px; }
#box-card > div.row > div:first-child { margin-top: 24px; }
#box-card > div.row > div > img:nth-child(2) { 
	position: absolute; 
	left: 50%;
	transform: translateX(-50%);
	bottom: 0; 
	
	width: calc(100% - 48px);
}
#box-card > div.row > div > div.description {
	display: flex;
    flex-wrap: wrap;
	
	align-items: center;
	
	width: calc(100% - 96px);
	
	position: absolute; 
	left: 50%;
	transform: translateX(-50%);
	bottom: 24px; 
}
#box-card > div.row > div > div.description > * {
	flex-shrink: 0;
    width: 100%;
    max-width: 100%;  
	flex: 0 0 auto;	
}
#box-card > div.row > div > div.description > div:nth-child(1) { width: 48px; }
#box-card > div.row > div > div.description > div:nth-child(2) { 
	width: calc(100% - 48px); 
	
	color: #FFF;
	
	padding: 8px 8px;
	
	font-weight: 700;
	font-size: 20px;
}

#box-course-features > div.row  { max-width: 840px; margin: 0 auto; }
#box-course-features > div.row > div { flex: 0 0 auto;	width: 50%; max-width: 274px; padding: 0 10px; }

#box-course-features > div.row > div:nth-child(1) { order: 1; }
#box-course-features > div.row > div:nth-child(2) { order: 3; }
#box-course-features > div.row > div:nth-child(3) { order: 4; }
#box-course-features > div.row > div:nth-child(4) { order: 2; }
#box-course-features > div.row > div:nth-child(5) { order: 5; }
#box-course-features > div.row > div:nth-child(6) { order: 6; }

#box-course-features > div.row > div > div { margin-top: 14px; text-align: center; }
#box-course-features > div.row > div > div:nth-child(2) > span { 
	display: inline-block; 
	margin: 0 auto; 
	padding: 8px 12px;
	color: #FFF;
	background: #56A0F0;
	border-radius: 8px;
	
	font-size: 16px;
	font-weight: 700;
	text-align: center;
}
#box-course-features > div.row > div > div:nth-child(3) {
	color: #333;
	font-size: 16px;
	font-weight: 500;
	text-align: center;
}
#box-course-features > div.row > div > div:nth-child(3) > span { display: none; }

#box-consultants > .description {
	width: 100%;
	max-width: 350px;
	margin: 8px auto 16px;
	padding: 0 12px;
	
	text-align: center;
	font-size: 15px;
	font-weight: 500;
}

#box-consultants > .row { max-width: 1100px; margin: 0 auto; }
#box-consultants > .row > div { flex: 0 0 auto;	width: 50%; max-width: 274px; padding: 0 10px; margin-top: 12px; }
#box-consultants > .row > div > img { display: block; margin: 0 auto; width: 100%; max-width: 250px; }

#box-qna > div:nth-child(2) {
	max-width: 700px;
	padding-left: 16px;
	padding-right: 16px;
	
	--min-padding-bottom: 48;
	--max-padding-bottom: 134;
	--padding-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-padding-bottom), var(--max-padding-bottom) * 1px);	
	
	margin: 24px auto 0;
}

/* 每個卡片 */
.custom-accordion .accordion-item {
	border: none;
	border-radius: 8px;
  
	--min-margin-bottom: 24;
	--max-margin-bottom: 32;
	--padding-margin-bottom: calc(
		(var(--min-margin-bottom) * 1px) + 
		(var(--max-margin-bottom) - var(--min-margin-bottom)) * 
		((100cqw - 320px) / (1200 - 320))
	);
	margin-bottom: clamp(var(--min-margin-bottom) * 1px, var(--padding-margin-bottom), var(--max-margin-bottom) * 1px);	
	
  
	overflow: hidden;
	background: #FFF;
	box-shadow: 0 0 0 1px #56A0F0; /* 外框 */
}

/* header */
.custom-accordion .accordion-button {
	background-color: #FFF;
	box-shadow: none;
	border: none;
	
	color: #56A0F0;
	
	--min-size: 18;
	--max-size: 20;
	--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: 600;
	text-align: left;	
	
	padding: 10px 10px 10px 60px;
	position: relative;
}
.custom-accordion .accordion-button::before {
	content: 'Q: ';
	position: absolute;
	left: 20px;
	top: 10px;
}
.custom-accordion .accordion-button::after {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2356A0F0'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");	
}

/* 展開狀態 */
.custom-accordion .accordion-button:not(.collapsed) {
	background-color: #FFF;
}

/* 分隔線（關鍵） */
.custom-accordion .accordion-collapse {
	box-shadow: inset 0 1px 0 #56A0F0;
}

/* body */
.custom-accordion .accordion-body {
	background: #FFF;
	color: #333;
	--min-size: 18;
	--max-size: 20;
	--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: 500;
	text-align: left;

	padding: 10px 20px 10px 60px;
	position: relative;
}

.custom-accordion .accordion-body::before {
	content: 'A: ';
	position: absolute;
	left: 20px;
	top: 10px;
}

.popNav {
	background: #FFF;
	z-index: 99994;	
	margin-top: 24px;
	
	padding-bottom: 12px;
}
.popNav.fixed {
	position: fixed;
	-moz-box-shadow: 2px 2px 2px rgba(20%,20%,40%,0.6),4px 4px 6px rgba(20%,20%,40%,0.4),6px 6px 12px rgba(20%,20%,40%,0.4);
    -webkit-box-shadow: 2px 2px 2px rgba(20%, 20%, 40%, 0.6), 4px 4px 6px rgba(20%, 20%, 40%, 0.4), 6px 6px 12px rgba(20%, 20%, 40%, 0.4);
    box-shadow: 2px 2px 2px rgba(20%, 20%, 40%, 0.6), 4px 4px 6px rgba(20%, 20%, 40%, 0.4), 6px 6px 12px rgba(20%, 20%, 40%, 0.4);
	
	top: 68px;
	left: 0;
	right: 0;
	margin-top: 0;
}
.popNav > div {
	display: flex;
    flex-wrap: wrap;
	
	align-items: center;
	justify-content: center;
}
.popNav > div > * {
	flex-shrink: 0;
    width: 85px;
    max-width: 100%;  
	flex: 0 0 auto;	
	height: 30px;
	
	padding: 0 10px;
	
}
.popNav > div > div:nth-child(3) { width: 105px; }
.popNav > div > div > a {
	display: inline-block;
	width: 100%;
	
	font-weight: 500;
	font-size: 16px;
	text-align: center;
	
	color: #333;
	text-decoration: none;
}
.popNav > div > div > a.active {
	border-bottom: 2px solid #56A0F0;
}

@media screen and (max-width: 374px) {
	.popNav > div > * { width: 75px; padding: 0 2px; }
	.popNav > div > div:nth-child(3) { width: 80px; }
	.popNav > div > div > a { font-size: 14px; }
}

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

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

@media screen and (min-width: 576px) {
	#box-course-features > div.row > div > div:nth-child(2) > span { padding: 8px 24px; font-size: 20px; }
	#box-course-features > div.row > div > div:nth-child(3) { font-size: 20px; }
	
	#box-consultants > .row > div { padding: 0 12px; }
	
	#box-consultants > .description { font-size: 18px; max-width: 410px; }
}

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

@media screen and (min-width: 768px) {
	#box-card {
		--min-margin-top: 43.2;
		--max-margin-top: 120;
		--margin-top: calc(
			(var(--min-margin-top) * 1px) + 
			(var(--max-margin-top) - var(--min-margin-top)) * 
			((100cqw - 320px) / (1200 - 320))
		);
		margin-top: clamp(var(--min-margin-top) * 1px, var(--margin-top), var(--max-margin-top) * 1px);
	}
	
	#box-card > div.row > div { margin: 0 auto; padding: 0 12px; max-width: 444px; }
	#box-card > div.row > div:first-child { margin-top: 0; }
	
	#box-card > div.row > div > img:nth-child(2) { width: calc(100% - 24px); }
	
	
	#box-card > div.row > div > div.description { width: calc(100% - 48px); }
	#box-card > div.row > div > div.description > div:nth-child(1) { 
		width: 32px; 
		
		--min-width: 32;
		--max-width: 48;
		--width: calc(
			(var(--min-width) * 1px) + 
			(var(--max-width) - var(--min-width)) * 
			((100cqw - 768px) / (1400 - 768))
		);
		width: clamp(var(--min-width) * 1px, var(--width), var(--max-width) * 1px);
	}
	#box-card > div.row > div > div.description > div:nth-child(2) { 
		--min-width: 32;
		--max-width: 48;
		--width: calc(
			(var(--min-width) * 1px) + 
			(var(--max-width) - var(--min-width)) * 
			((100cqw - 768px) / (1400 - 768))
		);
		width: calc(100% - clamp(var(--min-width) * 1px, var(--width), var(--max-width) * 1px));
		
		--min-size: 17.5;
		--max-size: 28;
		--font-size: calc(
			(var(--min-size) * 1px) + 
			(var(--max-size) - var(--min-size)) * 
			((100cqw - 768px) / (1400 - 768))
		);
		font-size: clamp(var(--min-size) * 1px, var(--font-size), var(--max-size) * 1px);
		
	}
	
	#box-course-features > div.row > div { width: 33.333333%; max-width: 274px; padding: 0 12px; }

	#box-course-features > div.row > div:nth-child(1) { order: 1; }
	#box-course-features > div.row > div:nth-child(2) { order: 2; }
	#box-course-features > div.row > div:nth-child(3) { order: 3; }
	#box-course-features > div.row > div:nth-child(4) { order: 4; }
	#box-course-features > div.row > div:nth-child(5) { order: 5; }
	#box-course-features > div.row > div:nth-child(6) { order: 6; }

	#box-course-features > div.row > div > div:nth-child(2) > span { padding: 8px 16px; font-size: 18px; }
	#box-course-features > div.row > div > div:nth-child(3) { font-size: 18px; }
	#box-course-features > div.row > div > div:nth-child(3) > span { display: inline; }
	
	#box-consultants > .description { margin: 8px auto 32px; font-size: 20px; max-width: 450px; }
	
	#box-consultants > .row > div { width: 33.333333%; }
	
	#box-qna > div:nth-child(2) { padding-left: 3%; padding-right: 3%; }
	
	.popNav { display: none; }
}

@media screen and (min-width: 992px) {
	#box-course-features > div.row > div > div:nth-child(2) > span { padding: 8px 24px; font-size: 20px; }
	#box-course-features > div.row > div > div:nth-child(3) { font-size: 20px; }
	#box-consultants > .row > div { width: 25%; }
	#box-qna > div:nth-child(2) { padding-left: 3.5%; padding-right: 3.5%; }
}

@media screen and (min-width: 1200px) { 
	#box-card > div.row > div > div.description { width: calc(100% - 96px); }
	#box-qna > div:nth-child(2) { padding-left: 4%; padding-right: 4%; }
}

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

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

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