@charset "euc-kr";
.live-wrap { overflow: hidden; background: #fff; color: #333; letter-spacing: -0.02em }
.live-wrap * { box-sizing: border-box }
.live-wrap img { display: block; max-width: 100% }
.live-wrap .live-inner { position: relative; z-index: 1; width: 800px; margin: 0 auto }
.live-top { position: relative; padding: 80px 0 0; background: #fff }
.live-top:before { content: ""; position: absolute; left: 50%; top: 0; width: 1920px; height: 1016px; transform: translateX(-50%); background: url("https://russeldata.megastudy.net/campus/images/russel/campus_common/2026/ssg_live/bg-pc.svg") no-repeat 50% 0 / 100% 100% }
.title-area { display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center }
.date-badge { display: inline-flex; align-items: center; justify-content: center; margin: 0; padding: 8px 20px; border-radius: 999px; background: linear-gradient(96deg, #623ff1 0%, #e1115f 100%); color: #fff; font-size: 24px; font-weight: 700; line-height: 1.4; white-space: nowrap }
.main-title { display: flex; flex-direction: column; gap: 12px; align-items: center }
.main-title .subject { margin: 0; color: #333; font-size: 42px; font-weight: 600; line-height: 1.3; letter-spacing: -0.02em }
.main-title h1 { margin: 0; color: #333; font-size: 84px; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em }
.main-title h1 span, .main-title h1 em { display: block; font-style: normal }
.main-title h1 em { color: #dd1367 }
.standard-text { position: relative; margin: 0; padding-top: 36px; color: #333; font-size: 28px; font-weight: 400; line-height: 38px; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px }
.standard-text:before { content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: 30px; background: #aaa }
.summary-area { display: flex; flex-direction: column; gap: 12px; align-items: center; margin-top: 60px }
.summary-area h2 { margin: 0; color: #333; font-size: 24px; font-weight: 700; line-height: 32px }
.summary-box { position: relative; width: 800px; min-height:319px; padding: 40px 150px; border: 1px solid #e5e5e5; border-radius: 10px; background: #fff; text-align: center }
.summary-copy { position: relative; display: inline-block; margin: 0; color: #333; font-size: 24px; font-weight: 400; line-height: 1.4; white-space: nowrap }
.summary-copy strong { font-weight: 600 }
.summary-copy:before, .summary-copy:after { content: ""; position: absolute; top: 2px; width: 16px; height: 16px; background-repeat: no-repeat; background-position: 50% 50%; background-size: contain }
.summary-copy:before { left: -28px; background-image: url("https://russeldata.megastudy.net/campus/images/russel/campus_common/2026/ssg_live/quote-left.svg") }
.summary-copy:after { right: -28px; background-image: url("https://russeldata.megastudy.net/campus/images/russel/campus_common/2026/ssg_live/quote-right.svg"); transform: scaleX(-1) }
.summary-content { position: relative; width: 500px; height: 130px; margin: 32px auto 0; text-align: left }
.summary-list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; color: #555; font-size: 18px; font-weight: 400; line-height: 1.4 }
.summary-list li:before { content: "\2022"; display: inline-block; margin-right: 4px; color: #555 }
.teacher-info { position: absolute; left: 341px; top: -21px; width: 160px; text-align: center }
.teacher-photo { position: relative; width: 160px; height: 160px; overflow: hidden }
.teacher-photo img { position: absolute; left: -21.42%; top: -7.41%; width: 135.43%; height: 134.26%; max-width: none; object-fit: cover }
.teacher-name { margin: 11px 0 0; color: #333; font-size: 15px; font-weight: 400; line-height: 1.5; text-align: center; white-space: nowrap }
.teacher-name strong { font-weight: 700 }
.live-con { padding: 60px 0; background: #fff }
.live-heading { display: flex; flex-direction: column; gap: 8px; align-items: center; margin-bottom: 28px; text-align: center }
.live-heading h2 { margin: 0; background: linear-gradient(109deg, #623ff1 0%, #e1115f 100%); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 32px; font-weight: 700; line-height: 1.3; letter-spacing: -0.02em }
.live-heading p { margin: 0; color: #333; font-size: 20px; font-weight: 400; line-height: 1.4; white-space: nowrap }
.player-box { /* position: relative; display: flex; align-items: center; justify-content: center; width: 800px; height: 450px; aspect-ratio: auto; overflow: hidden; background: #333 */ position: relative; display: flex; align-items: center; justify-content: center; width: 800px; aspect-ratio: 16 / 9; overflow: hidden; background: #333; }
.player-bg { position: absolute; left: 50%; top: 50%; width: calc(100% - 26px); height: calc(100% - 26px); max-width: none; transform: translate(-50%, -50%); object-fit: cover }
.player-text { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 32px; align-items: center; justify-content: center; text-align: center }
.player-desc { margin: 0; color: #fff; font-size: 24px; font-weight: 400; line-height: 1.4; white-space: nowrap }
.player-icon { width: 70px; height: 70px }
.player-time { width: 429px; margin: 0; color: #fff; font-size: 28px; font-weight: 600; line-height: 1.4 }
.live-btn { display: flex; align-items: center; justify-content: center; width: 300px; margin: 28px auto 0; padding: 18px 10px; border-radius: 8px; background: #623ff1; color: #fff !important; font-size: 18px; font-weight: 600; line-height: 1.4; text-align: center; text-decoration: none }

@media all and (max-width:1199px) {
	.live-wrap .live-inner { width: calc(100% - 48px); max-width: 720px; margin: 0 auto }
	.live-top { padding-top: 80px }
	.live-top:before { height: 771px; background-image: url("https://russeldata.megastudy.net/campus/images/russel/campus_common/2026/ssg_live/bg-ta.svg") }
	.summary-area { align-items: stretch }
	.summary-area h2 { font-size: 24px; text-align: center }
	.summary-box { width: 100%; min-height: 311px; padding: 36px 124px }
	.summary-content { width: 472px; height: 130px; margin-top: 32px }
	.teacher-info { left: 312px; top: -21px }
	.live-con { padding: 60px 0 }
	.player-box { /* width: 100%; height: 405px; aspect-ratio: auto */ width: 100%; aspect-ratio: 16 / 9; }
	.player-bg { width: calc(100% - 26px); height: calc(100% - 25px) }
	.player-icon { width: 56px; height: 56px }
}

@media all and (max-width:767px) {
	.live-wrap .live-inner { width: auto; max-width: none; margin: 0 16px }
	.live-top { padding: 60px 0 0 }
	.live-top:before { left: -237px; width: 834px; height: 520px; transform: none; background-image: url("https://russeldata.megastudy.net/campus/images/russel/campus_common/2026/ssg_live/bg-mo.svg") }
	.title-area { gap: 18px }
	.date-badge { padding: 8px 20px; font-size: 16px; font-weight: 700 }
	.main-title .subject { font-size: 24px; font-weight: 700; line-height: 32px }
	.main-title h1 { font-size: 46px }
	.standard-text { padding-top: 36px; font-size: 20px; line-height: 28px; text-underline-offset: 4px }
	.summary-area { gap: 12px; margin-top: 40px }
	.summary-area h2 { font-size: 20px; line-height: 28px }
	.summary-box { min-height:240px; padding: 24px 16px; gap: 16px }
	.summary-copy { display: block; width: max-content; max-width: calc(100% - 44px); margin: 0 auto; font-size: 18px; line-height: 26px; white-space: normal }
	.summary-copy span, .summary-copy strong { display: block }
	.summary-copy strong { font-size: 18px; font-weight: 600; line-height: 26px; white-space: nowrap }
	.summary-copy:before { left: -22px; top: 0 }
	.summary-copy:after { right: -22px; top: 0 }
	.summary-content { width: 100%; height: 98px; min-height: 0; margin: 16px auto 0 }
	.summary-list { gap: 6px; width: calc(100% - 128px); font-size: 14px }
	.teacher-info { left: auto; right: 0; top: -11px; width: 116px }
	.teacher-photo { width: 116px; height: 116px }
	.teacher-name { margin-top: 5px; width: 160px; margin-left: -44px; font-size: 12px; text-align: right }
	.teacher-name strong { font-size: 12px }
	.live-con { padding: 40px 0 }
	.live-heading { gap: 8px; margin-bottom: 20px }
	.live-heading h2 { font-size: 24px }
	.live-heading p { font-size: 16px; white-space: normal }
	.player-box { /* width: 100%; margin-left: 0; height: 185px; aspect-ratio: auto */ width: 100%; margin-left: 0; aspect-ratio: 16 / 9; }
	.player-bg { width: calc(100% - 16px); height: calc(100% - 15px) }
	.player-text { gap: 14px }
	.player-desc { width: 248px; font-size: 14px; line-height: 20px; white-space: normal }
	.player-icon { width: 32px; height: 32px }
	.player-time { width: 248px; font-size: 16px; font-weight: 600; line-height: 24px }
	.live-btn { width: 100%; margin-top: 20px; padding: 16px 10px; border-radius: 6px; font-size: 16px }
}
@media all and (max-width:359px) {
	.date-badge { font-size: 16px }
	.main-title h1 { font-size: 42px }
	.teacher-info { left: auto; right: 0 }
}