@charset "utf-8";

#exp * {box-sizing: border-box;}

.exp-top {padding: 8.75rem 0 5rem; background: url('https://img.megastudyth.com/event/2025/explain/title_bg.jpg')no-repeat center bottom / cover;}
.exp-top.active {animation: zoom-bg 20s ease forwards;}
.exp-top__title {display: flex; flex-direction: column; align-items: center;}
.exp-top__title h6 {font-family: "Noto Sans Thai", sans-serif; display: block; color: #fff; text-align: center; font-size: 1.625rem; font-weight: 400; letter-spacing: 1.25rem; padding: 0.75rem 6rem; border-top: solid 1px #333; border-bottom: solid 1px #333;}
.exp-top__title h3 {text-indent: -9999px; width: 100%; max-width: 1054px; font-size: 0px; padding-bottom: 30%; margin-top: 3rem; background: url('https://img.megastudyth.com/event/2025/explain/title_text.png')no-repeat center center / 100% auto;}
.exp-top__title h5 {font-size: 2rem; color: #fff; margin-top: 3.5rem;}
.exp-top__chk {position: relative; margin-top: 3rem; display: flex; flex-direction: column; align-items: center;}
.exp-top__chk:before {content: ''; display: block; background: #ba0124; transform: rotate(45deg); z-index: 1; width: 2.25rem; height: 2.25rem; position: absolute; left: 50%; top: 0; margin-left: -1.125rem; margin-top: -1.125rem; border-radius: 0.25rem;}
.exp-top__chk ul {margin-top: -1px; display: flex; flex-direction: column; align-items: center; position: relative; border: solid 2px rgba(255,255,255,0.2); border-radius: 0.5rem; padding: 2.5rem 4rem;}
.exp-top__chk ul:before,
.exp-top__chk ul:after {content: ''; display: block; background: #fff; position: absolute; left: 50%; top: 0; z-index: 2;}
.exp-top__chk ul:before {width: 16px; height: 2px; margin-left: -8px; margin-top: -2px;}
.exp-top__chk ul:after {width: 2px; height: 16px; margin-left: -1px; margin-top: -9px;}
.exp-top__chk ul li {font-size: 2rem; color: #fff; font-weight: 300; margin-bottom: 1rem; position: relative;}
.exp-top__chk ul li:last-child {margin-bottom: 0;}
.exp-top__chk ul li:before {content: ''; display: block; width: 8px; height: 16px; border-bottom: solid 2px #858585; border-right: solid 2px #858585; transform: rotate(45deg); position: absolute; right: 100%; margin-right: 0.5em; top: 0.25rem;}

.exp-info {background: #020207; padding-top: 3.75rem; padding-bottom: 5rem;}
.exp-info__half {display: flex;}
.exp-info__date {width: 50%; color: #fff;}
.exp-info__date dl {display: flex; margin-bottom: 1rem;}
.exp-info__date dl:last-child {margin-bottom: 0;}
.exp-info__date dl dt {flex-shrink: 0; margin-right: 1rem; width: 7rem; height: 2rem; background: #ba0124; border-radius: 2rem; display: flex; align-items: center; justify-content: center;}
.exp-info__date dl dd {flex-grow: 1; padding-top: 0.5rem;}
.exp-info__date dl dd strong {display: block; font-weight: 400; font-size: 1.25rem;}
.exp-info__date dl dd span {display: block; font-weight: 300; font-size: 1rem; margin-top: 0.5rem;}
.exp-btn {width: 50%; padding-left: 2.5rem; display: flex; gap: 1rem;}
.exp-btn li {flex: 1; height: 100%;}
.exp-btn li a {background: #ba0124; color: #fff; height: 100%; padding: 0 1.25rem; display: flex; align-items: center; justify-content: space-between;}
.exp-btn li a span {font-size: 1.125rem; text-align: center;}
.exp-btn li a:after {content: ''; display: block; width: 10px; height: 10px; border-top: solid 2px #fff; border-right: solid 2px #fff; transform: rotate(45deg);}

.exp-title {font-family: "Sarabun", sans-serif; color: #fff; font-style: italic; text-align: center; font-size: 3.5rem; font-weight: 300;}

.exp-bnf {padding: 8.25rem 0; background: url('https://img.megastudyth.com/event/2025/explain/benefit_bg.jpg')no-repeat center center / cover;}
.exp-bnf__list {display: flex; margin-top: 4rem; background: #1e1e21; padding: 2.5rem; border-radius: 1rem;}
.exp-bnf__list dl {flex: 1;}
.exp-bnf__list dl dt {}
.exp-bnf__list dl dt img {display: block; max-width: 100%;}
.exp-bnf__list dl dd {font-family: "Sarabun", sans-serif; color: #ff5575; font-size: 1.25rem; text-align: center; margin-top: 1rem; line-height: 1.6rem;}
.exp-bnf__cs {margin-top: 1.25rem; height: 5rem; background: #BA0124; background: linear-gradient(to right, #BA0124 0%, #7E0018 100%); color: #fff !important; font-size: 1.75rem; font-style: italic; border-radius: 1rem; display: flex; align-items: center; justify-content: center;}

.exp-agd {padding: 8.25rem 0 10rem; background: url('https://img.megastudyth.com/event/2025/explain/agenda_bg.jpg')no-repeat center center / cover;}
.exp-agd__wrap {padding: 0 2%;}
.exp-agd__list {margin-top: 4.75rem; position: relative;}
.exp-agd__list dl {display: flex; gap: 6%; margin-bottom: 0.5rem; font-size: 1.25rem; color: #fff; font-family: "Sarabun", sans-serif;}
.exp-agd__list dl:last-child {margin-bottom: 0;}
.exp-agd__list dl dt,
.exp-agd__list dl dd {border-radius: 0.75rem; background: #2d2d32; border: solid 1px rgba(255,255,255,0.2); position: relative; z-index: 1;}
.exp-agd__list dl dt {width: 32%; padding: 1rem; text-align: center; display: flex; align-items: center; justify-content: center;}
.exp-agd__list dl dd {width: 68%; padding: 1rem 2rem; }
.exp-agd__list dl.red {color: #ff5575;}
.exp-agd__list:before,
.exp-agd__list:after {content: ''; display: block; top: -10%; bottom: -10%; left: -2%; right: -2%; position: absolute; border: solid 8px #ba0124; border-radius: 1.25rem;}
.exp-agd__list:before {right: auto; width: 33%;}
.exp-agd__list:after {left: auto; width: 67%;}

.exp-ttr {padding: 10rem 0; background: url('https://img.megastudyth.com/event/2025/explain/tutor_bg.jpg')no-repeat center center / cover;}
.exp-ttr__grp.grp1 {margin-top: 2.5rem;}
.exp-ttr__grp.grp2 {margin-top: 6.25rem;}
.exp-ttr__grp h4 {height: 5rem; text-align: center; font-size: 2.75rem; padding-bottom: 1%; margin-bottom: 2rem; letter-spacing: 1.25rem; color: #fff; font-family: "Crimson Pro", serif; font-weight: 200; display: flex; align-items: center; justify-content: center;}
.exp-ttr__grp.grp1 h4 {background: url('https://img.megastudyth.com/event/2025/explain/tutor_title_1.png')no-repeat center center / auto 100%;}
.exp-ttr__grp.grp2 h4 {background: url('https://img.megastudyth.com/event/2025/explain/tutor_title_2.png')no-repeat center center / auto 100%;}
.exp-ttr__grp img {display: block; width: 100%;}
.exp-ttr__grp ul {display: flex; margin-top: -5rem;}
.exp-ttr__grp ul li {width: 25%; text-align: center;}
.exp-ttr__grp.grp1 ul li:nth-child(1) {padding-right: 6%;}
.exp-ttr__grp.grp1 ul li:nth-child(2) {padding-right: 10%;}
.exp-ttr__grp.grp1 ul li:nth-child(3) {padding-right: 10%;}
.exp-ttr__grp.grp1 ul li:nth-child(4) {padding-right: 8%;}
.exp-ttr__grp.grp2 ul {padding: 0 12.5%;}
.exp-ttr__grp.grp2 ul li {width: calc(100% / 3);}
.exp-ttr__grp.grp2 ul li:nth-child(1) {padding-right: 6%;}
.exp-ttr__grp.grp2 ul li:nth-child(2) {padding-right: 8%;}
.exp-ttr__grp.grp2 ul li:nth-child(3) {padding-right: 0;}
.exp-ttr__grp ul li span {display: block; color: #fff; font-size: 1.5rem;}
.exp-ttr__grp ul li strong {display: block; color: #ff5575; font-style: italic; font-weight: 300; font-size: 2rem; margin-top: 1rem; font-family: "Sarabun", sans-serif;}


@media (max-width:1280px) {
	html {font-size: 14px;}
	.exp-top__title h3 {max-width: 80%;}
	.exp-top__chk ul li:before {top: 0;}
}

@media (max-width:992px) {
	html {font-size: 12px;}
	.exp-top__chk ul:before {width: 12px; margin-left: -6px;}
	.exp-top__chk ul:after {height: 12px;  margin-top: -7px;}
	.exp-info__date dl dt {width: 5rem;}
	.exp-title {font-size: 3rem;}
	.exp-agd__list:before,
	.exp-agd__list:after {border-width: 4px; top: -8%; bottom: -8%;}
}

@media (max-width:768px) {
	.exp-top {padding: 5rem 0;}
	.exp-top__title h6 {font-size: 1rem; padding: 0.75rem 2rem; letter-spacing: 0.75rem;}
	.exp-top__title h3 {max-width: 90%; margin-top: 2rem;}
	.exp-top__title h5 {font-size: 1.25rem; margin-top: 2rem; font-weight: 400;}
	.exp-top__chk ul {padding: 2.5rem 3rem; padding-right: 2rem;}
	.exp-top__chk ul li {font-size: 1.25rem;}
	.exp-top__chk ul li:before {width: 4px; height: 10px;}
	.exp-info {padding-top: 3.75rem; padding-bottom: 5rem;}
	.exp-info__half {display: block;}
	.exp-info__date {width: 100%;}
	.exp-info__date dl dt {font-size: 1rem;}
	.exp-info__date dl dd strong {font-size: 1rem;}
	.exp-info__date dl dd span {font-size: 0.875rem;}
	.exp-btn {width: 100%; padding-left: 0; margin-top: 2rem; gap: 0.5rem;}
	.exp-btn li a {height: 5rem;}
	.exp-btn li a span {font-size: 1rem;}
	.exp-btn li a:after {width: 6px; height: 6px;}
	.exp-title {font-size: 2rem;}
	.exp-bnf {padding: 5rem 0;}
	.exp-bnf__list {margin-top: 2rem; padding: 2rem; display: block;}
	.exp-bnf__list dl {margin-bottom: 1rem; display: flex; align-items: center;}
	.exp-bnf__list dl:last-child {margin-bottom: 0;}
	.exp-bnf__list dl dt {width: 10rem; flex-shrink: 0;}
	.exp-bnf__list dl dd {text-align: left; flex-grow: 1; padding-left: 1rem; font-size: 1.25rem;}
	.exp-bnf__cs {height: 4rem; font-size: 1.25rem;}
	.exp-agd {padding: 5rem 0;}
	.exp-agd__wrap {padding: 0;}
	.exp-agd__list {margin-top: 2rem;}
	.exp-agd__list dl {gap: 0.5rem;}
	.exp-agd__list dl dt {font-size: 1rem;}
	.exp-agd__list dl dd {padding: 1rem; font-size: 1.125rem; line-height: 1.4;}
	.exp-agd__list:before,
	.exp-agd__list:after {display: none;}
	.exp-ttr {padding: 5rem 0;}
	.exp-ttr__grp.grp1 {margin-top: 1rem;}
	.exp-ttr__grp.grp2 {margin-top: 4rem;}
	.exp-ttr__grp h4 {height: 3rem; margin-bottom: 0; font-size: 1.5rem; background-size: 100% auto !important;}
	.exp-ttr__grp ul {margin-top: -2rem;}
	.exp-ttr__grp ul li span {font-size: 1rem;}
	.exp-ttr__grp ul li strong {font-size: 1rem; margin-top: 0.25rem;}
}

@media (max-width:320px) {
	html {font-size: 11px;}
	.exp-top__chk ul {padding-right: 2rem;}
	.exp-top__chk ul li {font-size: 1rem;}
	.exp-top__chk ul li:before {margin-right: 0.75rem; top: -0.125rem;}
	.exp-bnf__cs {font-size: 1rem;}
	.exp-agd__list dl dt {padding: 0.5rem;}
	.exp-agd__list dl dd {font-size: 1rem;}
}