@charset "utf-8";

.online-portfolio{color: var(--edm-color-text-1);}
#programs-detail .online-portfolio .contents {padding-bottom: 0;}

.online-portfolio .program-intro.ad h2 { font: var(--edm-f-h4); letter-spacing: var(--edm-f-h4-ls); font-weight: 400; display: flex; flex-direction: column; gap: 0;}
.online-portfolio .program-intro.ad h2 .pc-txt { display: inline-block; }
.online-portfolio .program-intro.ad h2 strong { font: var(--edm-f-h2); letter-spacing: var(--edm-f-h2-ls); display: block; color: var(--edm-brand-red); margin-bottom: 16rem;}
.online-portfolio .program-intro.ad h2 b { font: var(--edm-f-h3); letter-spacing: var(--edm-f-h3-ls); display: block; color: var(--edm-color-text-2); font-weight: 600; margin-top: 8rem; }

.online-portfolio .why-choose .textWrap p em { color: var(--edm-brand-blue); }
.online-portfolio .why-choose ul.white-box-list li .textWrap{padding-left: 24rem;}
.online-portfolio .why-choose ul li .textWrap b{margin: 0;}

.online-portfolio .why-advantage .recommend-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24rem; }
.online-portfolio .why-advantage .recommend-cards .card { display: flex; flex-direction: column; align-items: center; gap: 16rem; padding: 32rem 24rem; text-align: center; background-color: #fff; border: 1rem solid var(--edm-color-border-blue); box-shadow: var(--edm-sd-blue-1); border-radius: var(--edm-radius3); isolation: isolate; }
.online-portfolio .why-advantage .recommend-cards .ico { width: 60rem; height: 60rem; }
.online-portfolio .why-advantage .recommend-cards .ico img { width: 100%; height: 100%; object-fit: contain; }
.online-portfolio .why-advantage .recommend-cards .txt { width: 100%; }
.online-portfolio .why-advantage .recommend-cards .tit { font: var(--edm-f-h5); letter-spacing: var(--edm-f-h5-ls); font-weight: 600; }
.online-portfolio .why-advantage .recommend-cards .desc { margin-top: 8rem; font: var(--edm-f-body2); letter-spacing: var(--edm-f-body2-ls); font-weight: 400; color: var(--edm-color-text-2); }

.online-portfolio .program-panels.roadmap .listType > li > em{padding: 12rem;}
.online-portfolio .program-panels.roadmap .listType > li{display: flex; flex-direction: column;}
.online-portfolio .program-panels.roadmap .listType .textBox{flex: 1 1 auto;}
.online-portfolio .program-panels.roadmap .listType .textBox strong{display: flex; align-items: center; gap: 12rem; margin-bottom: 12rem; font-weight: 700;}
.online-portfolio .program-panels.roadmap .listType .textBox strong span{color: var(--edm-color-text-3); font: 400 15rem/150% Pretendard; letter-spacing: -0.015em;}
.online-portfolio .program-panels.roadmap .listType .textBox p{word-break: normal;}

.online-portfolio .online-curriculum .curriculum-list { display: flex; flex-direction: column; gap: 60rem; }
.online-portfolio .online-curriculum .curriculum-list .card { display: flex; align-items: stretch; background-color: #fff; border: 1rem solid var(--edm-color-border-blue); border-radius: var(--edm-radius3); box-shadow: var(--edm-sd-blue-1); isolation: isolate; overflow: hidden; }
.online-portfolio .online-curriculum .curriculum-list .thumb { flex: 0 0 318rem; }
.online-portfolio .online-curriculum .curriculum-list .thumb * { width: 100%; height: 100%; object-fit: cover; }
.online-portfolio .online-curriculum .curriculum-list .cont { flex: 1 1 auto; min-width: 0; padding: 40rem; }
.online-portfolio .online-curriculum .curriculum-list .cont .tit { font: var(--edm-f-h3); letter-spacing: var(--edm-f-h3-ls); }
.online-portfolio .online-curriculum .curriculum-list .cont dl { margin-top: 40rem; display: flex; flex-direction: column; gap: 40rem; }
.online-portfolio .online-curriculum .curriculum-list .cont .row { display: flex; gap: 24rem; }
.online-portfolio .online-curriculum .curriculum-list .cont dt { flex: 0 0 148rem; font: var(--edm-f-h5); letter-spacing: var(--edm-f-h5-ls); font-weight: 600; }
.online-portfolio .online-curriculum .curriculum-list .cont dd { flex: 1 1 auto; min-width: 0; }
.online-portfolio .online-curriculum .curriculum-list .cont dd p { position: relative; padding-left: 12rem; font: var(--edm-f-body1); letter-spacing: var(--edm-f-body1-ls); font-weight: 400; color: var(--edm-color-text-2); }
.online-portfolio .online-curriculum .curriculum-list .cont dd p::before { content: "·"; position: absolute; left: 0; }

.online-portfolio .edm-coaching-profile .max-width .max-width{padding: 0;}




@media (max-width: 991px) {
	.online-portfolio .program-intro.ad h2 { font: var(--edm-f-body1); letter-spacing: var(--edm-f-body1-ls); font-weight: 400; }
	.online-portfolio .program-intro.ad h2 strong { font: var(--edm-f-h4); letter-spacing: var(--edm-f-h4-ls); margin-bottom: 12rem; }
	.online-portfolio .program-intro.ad h2 b { font: var(--edm-f-body1); letter-spacing: var(--edm-f-body1-ls); font-weight: 700; margin-top: 4rem; }

	.online-portfolio .why-choose ul li .icon{width: 32rem; height: 32rem;}
	.online-portfolio .why-choose ul.white-box-list li .textWrap{padding-left: 12rem;}
	.online-portfolio .why-choose ul li .textWrap b{font: var(--edm-f-body1); letter-spacing: var(--edm-f-body1-ls); font-weight: 700 !important; margin-bottom: 8rem;}

	.online-portfolio .why-advantage .recommend-cards { grid-template-columns: 1fr; gap: 16rem; }
	.online-portfolio .why-advantage .recommend-cards .card { flex-direction: row; align-items: flex-start; gap: 12rem; padding: 16rem; text-align: left; }
	.online-portfolio .why-advantage .recommend-cards .ico { width: 32rem; height: 32rem; flex-shrink: 0; }
	.online-portfolio .why-advantage .recommend-cards .txt { flex: 1; min-width: 0; word-break: normal;}
	.online-portfolio .why-advantage .recommend-cards .tit { font: var(--edm-f-body1); letter-spacing: var(--edm-f-body1-ls); }

	.online-portfolio .online-curriculum .curriculum-list { gap: 24rem; }
	.online-portfolio .online-curriculum .curriculum-list .card { flex-direction: column; }
	.online-portfolio .online-curriculum .curriculum-list .thumb { flex: none; width: 100%; height: 140rem; }
	.online-portfolio .online-curriculum .curriculum-list .cont { padding: 24rem 16rem; }
	.online-portfolio .online-curriculum .curriculum-list .cont .tit { font: var(--edm-f-h4); letter-spacing: var(--edm-f-h4-ls); }
	.online-portfolio .online-curriculum .curriculum-list .cont dl { margin-top: 24rem; }
	.online-portfolio .online-curriculum .curriculum-list .cont .row { flex-direction: column; gap: 12rem; }
	.online-portfolio .online-curriculum .curriculum-list .cont dt { flex: none; font: var(--edm-f-body2); letter-spacing: var(--edm-f-body2-ls); font-weight: 600;}

	.online-portfolio .program-panels.roadmap .listType{gap: 12rem;}
	.online-portfolio .program-panels.roadmap .listType > li{padding: 16rem;}
	.online-portfolio .program-panels.roadmap .listType > li > em{padding: 8rem;}
	.online-portfolio .program-panels.roadmap .listType .textBox strong{gap: 8rem; margin-bottom: 8rem;}
	.online-portfolio .program-panels.roadmap .listType .textBox strong span{font: var(--edm-f-body2); letter-spacing: var(--edm-f-body2-ls); font-weight: 400;}

	.online-portfolio .success-case{margin-top: 60rem;}

	.online-portfolio .online-curriculum{margin-top: 60rem;}

	.online-portfolio .program-panels.intl-school{margin-top: 60rem;}

	.online-portfolio .edm-coaching-profile{margin-top: 60rem;}
}