@charset "utf-8";

#math * {box-sizing: border-box;}
#math img {display: block; max-width: 100%; margin: 0 auto;}
#math .container {z-index: 1;}

.math-top {padding-top: 7.5rem; padding-bottom: 10rem; text-align: center; background: url('https://img.megastudyth.com/event/2025/mathnine/top_bg.jpg')no-repeat center center / cover;}
.math-top__info {color: #979fcc; font-size: 1.75rem; font-weight: 300; letter-spacing: 0.4em;}
.math-top__title {margin-top: 3rem; position: relative; padding: 0 5rem;}
.math-top__title h2 {margin-top: 4rem;}
.math-top__title span {width: 8.5rem; height: 8.5rem; font-size: 1.125rem; position: absolute; left: 0; top: 0; color: #111; font-weight: 600; background: #08fa68 url('https://img.megastudyth.com/event/2025/mathnine/top_line.png')no-repeat center bottom / auto 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center;}
.math-top__title em {width: 9rem; height: 9rem; font-size: 0.875rem; font-style: normal; position: absolute; right: -3rem; bottom: -2rem; color: #08fa68; background: #363e69 url('https://img.megastudyth.com/event/2025/mathnine/top_line.png')no-repeat center bottom / auto 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center;}
.math-top__point {margin-top: 4rem;}
.math-top__point li {margin-bottom: 0.5rem; font-size: 1.5rem; color: #08fa68; font-weight: 200;}
.math-top__point li:last-child {margin-bottom: 0;}
.math-top__date {font-size: 1.75rem; color: #979fcc; font-weight: 200; margin-top: 2rem; line-height: 1.6;}
.math-top__sub {margin-top: 4.5rem;}
.math-top__sub dt {display: flex; justify-content: center; align-items: center;}
.math-top__sub dt:before,
.math-top__sub dt:after {content: ''; display: block; flex-grow: 1; height: 1px; background: #08fa68;}
.math-top__sub dt h5 {flex-shrink: 0; font-size: 2rem; color: #fff; margin: 0 1rem; font-weight: 300;}
.math-top__sub dt h5 span {color: #01ff8f; font-weight: 600;}
.math-top__sub dd {margin-top: 1.5rem;}
.math-top__sub dd span {display: block; color: #979fcc; font-size: 1.75rem; font-weight: 300;}
.math-top__sub dd strong {display: block; color: #fff; font-size: 3.375rem; font-weight: 500; line-height: 1.2; margin-top: 1rem;}

.math-btn {margin-top: 3rem; display: flex; justify-content: center;}
.math-btn a {height: 4rem; background: #963ee9; color: #fff; font-size: 1.5rem; padding: 0 2rem; display: flex; align-items: center; justify-content: center; transition: all 0.3s;}
.math-btn a:after {content: ''; display: block; margin-left: 5rem; width: 0.5rem; height: 0.5rem; border-top: solid 2px #08fa68; border-right: solid 2px #08fa68; transform: rotate(45deg); transition: all 0.3s;}
.math-btn a:hover {background: #08fa68; color: #4a3ee9;}
.math-btn a:hover:after {border-color: #4a3ee9;}
.math-dtl .math-btn a {background: #4a3ee9;}
.math-dtl .math-btn a:hover {background: #111; color: #fff;}
.math-dtl .math-btn a:hover:after {border-color: #08fa68;}

.math-tutor {background: #4a3ee9; padding-top: 6.25rem; padding-bottom: 8.75rem;}
.math-tutor__slg {position: relative;}
.math-tutor__slg:before {content: ''; display: block; height: 3.5rem; position: absolute; right: 0; bottom: -1rem; left: -100%; background: url('https://img.megastudyth.com/event/2025/mathnine/tutor_pattern.png'); background-size: 5px auto;}
.math-tutor__slg p {font-size: 1.75rem; color: #4a3ee9; position: relative; padding: 0.5rem 1rem; font-weight: 400;}
.math-tutor__slg p:before {content: ''; display: block; background: #0e1122; position: absolute; left: 0; top: 0; bottom: 0; right: -100%; z-index: -1;}
.math-tutor__wrap {position: relative; margin-top: 4rem;}
.math-tutor__prf {display: block; position: absolute; right: 0; bottom: 0; max-width: 50% !important; z-index: -1;}
.math-tutor__name {margin-bottom: 4rem; display: flex; align-items: flex-end;}
.math-tutor__name h4 {color: #fff; font-size: 6.25rem; line-height: 1.0;}
.math-tutor__name p {color: #c2bdff; font-size: 2.75rem; font-weight: 300; margin-left: 1rem; position: relative;}
.math-tutor__name p:before {content: ''; display: block; background: #4036c7; position: absolute; left: -0.5rem; bottom: 0rem; height: 1.5rem; right: -0.5rem; z-index: -1;}
.math-tutor__spec {margin-top: 2rem;}
.math-tutor__spec dt {border: solid 2px #fff; color: #fff; font-size: 1.375rem; padding: 0 1.875rem; height: 2.5rem; font-weight: 400; display: inline-flex; align-items: center; justify-content: center;}
.math-tutor__spec dd {font-size: 1.25rem; color: #fff; font-weight: 300; margin-top: 1rem;}
.math-tutor__which {background: #fff; margin-top: 2rem; margin-right: 6rem; padding: 2rem; position: relative; z-index: 0;}
.math-tutor__which dt {font-size: 1.375rem; font-weight: 500; position: relative; margin-bottom: 1rem; display: inline-block;}
.math-tutor__which dt:before {content: ''; display: block; background: #ffff55; position: absolute; left: 0; bottom: 0.5rem; top: 0.5rem; right: 0; z-index: -1;}
.math-tutor__which dd {font-size: 1.25rem; font-weight: 300; margin-bottom: 0.5rem; display: flex;}
.math-tutor__which dd:last-child {margin-bottom: 0;}
.math-tutor__which dd:before {content: ''; display: block; width: 1.875rem; height: 1.25rem; margin-right: 1rem; margin-top: 0.25rem; background: url('https://img.megastudyth.com/event/2025/mathnine/tutor_arrow.png')no-repeat center center / cover;}

.math-dtl {background: #89ff46; padding-top: 8.75rem; padding-bottom: 10rem;}
.math-dtl__title {text-align: center;}
.math-dtl__title:before {content: ''; display: block; width: 3rem; height: 2px; background: #3432ca; margin: 0 auto 2rem;}
.math-dtl__title p {font-size: 1.5rem; font-weight: 300; margin-bottom: 0.75rem;}
.math-dtl__title h3 {font-size: 4.5rem; font-weight: 800; font-style: italic; line-height: 1.0;}
.math-dtl__title h3 strong {display: block; color: #3432ca;}

.math-dtl__dvs {height: 3.75rem; margin-top: 4rem; position: relative; background: rgba(17,17,17,0.8); display: flex; align-items: center; justify-content: center;}
.math-dtl__dvs span {display: block; position: absolute; left: 2.5rem; bottom: 0.25rem; background: rgba(17,17,17,0.5); border-radius: 50%;}
.math-dtl__dvs h4 {color: #fff; font-size: 1.625rem; font-weight: 400;}

.math-dtl__scd {padding: 2.5rem 5rem; border: solid 1px rgba(17,17,17,0.8); border-top: none; margin-bottom: 4rem; display: flex; justify-content: center;}
.math-dtl__scd ul li {margin-bottom: 0.625rem; display: flex;}
.math-dtl__scd ul li:last-child {margin-bottom: 0;}
.math-dtl__scd ul li strong {width: 7.5rem; height: 1.875rem; color: rgba(255,255,255,0.8); font-weight: 300; flex-shrink: 0; margin-right: 1rem; background: rgba(17,17,17,0.7); display: flex; align-items: center; justify-content: center;}
.math-dtl__scd ul li span {font-size: 1.125rem; padding-top: 0.125rem; display: block;}

.math-dtl__gift {display: flex; gap: 2rem; justify-content: center; margin-top: 2.75rem;}
.math-dtl__gift li {width: calc(100% / 3);}
.math-dtl__gift li > div {padding-bottom: 100%; position: relative;}
.math-dtl__gift li dl {background: #fff; padding: 15% 10% 20%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; position: absolute; border-radius: 50%; left: 0; right: 0; top: 0; bottom: 0;}
.math-dtl__gift li dl dt {text-align: center; font-size: 1.25rem; font-weight: 500;}
.math-dtl__gift li dl dd {margin-top: 1.5rem;}
.math-dtl__gift li dl dd img {max-width: 80% !important;}
.math-dtl__gift li dl:before {width: 3.5rem; height: 3.5rem; background: #3432ca; color: #89ff46; font-size: 1.25rem; text-align: center; display: flex; align-items: center; justify-content: center; border-radius: 50%; position: absolute; left: 0.625rem; top: 1.375rem;}
.math-dtl__gift li:nth-child(1) dl:before {content: '1'; }
.math-dtl__gift li:nth-child(2) dl:before {content: '2'; }
.math-dtl__gift li:nth-child(3) dl:before {content: '3'; }
.math-dtl__gift li dl::after {content: ''; display: block; position: absolute; left: 2.25rem; top: 3.875rem;; width: 0px; height: 0px; border-style: solid; border-width: 0 1rem 1rem 1rem; border-color: transparent transparent #3432ca transparent; transform: rotate(0deg);}
	
@media (max-width:1280px) {
	html {font-size: 14px;}
	.math-top__title {padding: 0 9rem;}
	.math-top__title span {width: 8rem; height: 8rem; font-size: 1rem;}
	.math-top__title em {right: 0; width: 8rem; height: 8rem;}
}

@media (max-width:992px) {
	html {font-size: 12px;}
}

@media (max-width:768px) {
	.math-top {padding-top: 5rem; padding-bottom: 5rem;}
	.math-top__info {font-size: 1rem; letter-spacing: 0.2em;}
	.math-top__title {margin-top: 0.5rem; padding: 0 4rem;}
	.math-top__title h5 {font-size: 1.75rem;}
	.math-top__title h2 {margin-top: 1.5rem; padding: 0 1rem;}
	.math-top__title span {width: 5.5rem; height: 5.5rem; font-size: 0.75rem;}
	.math-top__title em {width: 6rem; height: 6rem; font-size: 0.75rem; bottom: -4rem; right: -1rem;}
	.math-top__title em br {display: none;}
	.math-top__point {margin-top: 2rem;}
	.math-top__point li {margin-bottom: 0.25rem; font-size: 1rem;}
	.math-top__date {font-size: 1.25rem; margin-top: 1.5rem;}
	.math-top__sub {margin-top: 2rem;}
	.math-top__sub dt h5 {font-size: 1.5rem;}
	.math-top__sub dd {margin-top: 1.5rem;}
	.math-top__sub dd span {font-size: 1.25rem;}
	.math-top__sub dd strong {font-size: 2.25rem;}
	.math-btn a {font-size: 1.25rem;}
	.math-btn a:after {margin-left: 2rem; width: 0.4rem; height: 0.4rem;}

	.math-tutor {padding-top: 5rem; padding-bottom: 5rem;}
	.math-tutor__slg:before {height: 2rem; bottom: -0.75rem;}
	.math-tutor__slg p {font-size: 1rem; padding-right: 0;}
	.math-tutor__wrap {margin-top: 2rem;}
	.math-tutor__prf {position: static; max-width: 80% !important; transform: translateX(-5%);}
	.math-tutor__name {margin-top: 2rem; margin-bottom: 3rem;}
	.math-tutor__name h4 {font-size: 3rem;}
	.math-tutor__name p {font-size: 1.25rem;}
	.math-tutor__name p:before {height: 0.5rem;}
	.math-tutor__spec dt {font-size: 1rem; padding: 0 1rem; height: 2.25rem; border-width: 1px;}
	.math-tutor__spec dd {font-size: 1rem;}	
	.math-tutor__which {margin-right: 0; padding: 1.5rem;}
	.math-tutor__which dd {font-size: 1rem;}
	.math-tutor__which dd:before {width: 1.5rem; height: 0.875rem;; margin-right: 0.5rem;}

	.math-dtl {padding-top: 5rem; padding-bottom: 5rem;}
	.math-dtl__title:before {margin: 0 auto 1rem;}
	.math-dtl__title p {font-size: 1.25rem; margin-bottom: 0.5rem;}
	.math-dtl__title h3 {font-size: 3rem;}
	.math-dtl__dvs {height: 3rem; margin-top: 2rem;}
	.math-dtl__dvs span {left: 0.5rem; width: 4rem;}
	.math-dtl__dvs h4 {font-size: 1.5rem;}
	.math-dtl__scd {padding: 1.5rem;}
	.math-dtl__scd ul li {margin-bottom: 0.5rem;}
	.math-dtl__scd ul li strong {width: 6rem; height: 1.75rem; font-size: 0.875rem;}
	.math-dtl__scd ul li span {font-size: 1rem;}
	.math-dtl__gift {gap: 1rem; margin-top: 1.5rem;}
	.math-dtl__gift li {width: 50%;}
	.math-dtl__gift li dl {padding: 1rem;}
	.math-dtl__gift li dl:before {left: -0.375rem; top: -0.625rem;}
	.math-dtl__gift li dl:after {left: 1.25rem; top: 1.875rem;}
	.math-dtl__gift li dl dt {font-size: 1rem;}
	.math-dtl__gift li dl dd {margin-top: 0.5rem;}
}

@media (max-width:320px) {
	html {font-size: 11px;}
	.math-top__sub dd {font-size: 1.5rem;}
}