/* ============================================
   CSS Variables (Design Tokens)
   ============================================ */
:root {
    /* Colors */
    --color-primary: #ff0000;
    --color-secondary: #357DCE;
    --color-accent: #ffff00;
    --color-bg-light: #fffacd;
    --color-white: #ffffff;
    --color-black: #000000;
    --color-text: #333333;
    --color-text-light: #524f4f;
    --color-border: #e4e4e4;
    --color-gray: #999999;
    --color-blue-dark: #1e3c72;
    --color-blue-bright: #104AB5;
    --color-solution: #e33b1f;
    
    /* Fonts */
    --font-impact: Impact, "Arial", sans-serif;
    --font-base: "Arial", sans-serif;
    --font-special: "Trebuchet MS", Arial, sans-serif;
    
    /* Spacing */
    --spacing-xs: 5px;
    --spacing-sm: 10px;
    --spacing-md: 15px;
    --spacing-lg: 20px;
    --spacing-xl: 25px;
    --spacing-2xl: 30px;
    --spacing-3xl: 40px;
    
    /* Border Radius */
    --radius-sm: 5px;
    --radius-md: 8px;
    --radius-lg: 10px;
    
    /* Container Widths */
    --container-max-width: 1200px;
    --content-max-width: 998px;
}

/* ============================================
   Reset & Base Styles
   ============================================ */
* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
}

body {
    background-position: center 50%;
    background-attachment: fixed;
    background-repeat: repeat-y;
    background-color: var(--color-white);
    font-family: var(--font-base);
    font-size: 12px;
    color: var(--color-text-light);
    line-height: 1.5;
}

ol {
    padding-left: var(--spacing-lg);
}

ol li {
    margin: 8px 0;
    padding: 0 var(--spacing-xs);
}

a {
    text-decoration: none;
}

a:link, a:visited {
    color: var(--color-gray);
}

a:hover {
    color: var(--color-blue-bright);
}

a img {
    border: none;
}

img {
    border: none;
    max-width: 100%;
    height: auto;
}


/* ============================================
   Main Container
   ============================================ */
.wrapper {
    margin: 0 auto;
    width: 100%;
	max-width: 998px;
    padding: 0 var(--spacing-md);
	/* padding: 0; */
    background: var(--color-white);
}



/* ============================================
   Mobile Styles (≤ 768px) - 公共样式
   ============================================ */

/* Alert Banner (Stop Section) */
.alert-banner {
	text-align: center;
	font-family: var(--font-special);
	font-weight: bold;
	text-decoration: underline;
	margin: var(--spacing-xs) 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.alert-banner img {
	width: 50px;
	height: 50px;
	margin-right: var(--spacing-xs);
	flex-shrink: 0;
}

.alert-text {
	font-size: 15px;
	line-height: 1.2;
	text-align: left;
	flex: 1;
	max-width: calc(100% - 50px);
}

/* Header Banner */
.header-banner {
	background: linear-gradient(180deg, var(--color-blue-dark) 0%, var(--color-secondary) 100%);
	padding: var(--spacing-md) var(--spacing-md);
	display: flex;
	align-items: center;
	min-height: 100px;
	width: 100%;
}

.header-logo {
	flex-shrink: 0;
	margin-right: var(--spacing-xs);
}

.header-logo__image {
	max-width: 160px;
	height: auto;
	display: block;
}

.header-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	max-width: calc(100% - 160px);
}

.header-title {
	color: var(--color-white);
	font-size: 40px;
	font-weight: bold;
	font-family: var(--font-impact);
	margin-bottom: var(--spacing-sm);
	line-height: 1.0;
	white-space: normal;
}

.header-subtitle {
	color: var(--color-white);
	font-size: 24px;
	font-weight: bold;
	font-family: var(--font-base);
	margin-bottom: var(--spacing-sm);
	line-height: 1.2;
	white-space: normal;
}

.header-description {
	color: var(--color-white);
	font-size: 16px;
	font-weight: normal;
	font-family: var(--font-base);
	line-height: 1.2;
	white-space: normal;
}

.header-features {
	display: flex;
	justify-content: center;
	gap: var(--spacing-md);
	margin-top: var(--spacing-md);
	flex-wrap: wrap;
}

.feature-badge {
	background-color: rgba(255, 255, 255, 0.2);
	color: var(--color-white);
	padding: 4px 8px;
	border-radius: var(--spacing-sm);
	font-family: var(--font-base);
	text-align: center;
	white-space: nowrap;
	border: 1px solid rgba(255, 255, 255, 0.3);
	backdrop-filter: blur(10px);
}

/* Pricing Section */
.pricing-section {
	display: flex;
	width: 100%;
	margin: 0 auto;
	background: var(--color-white);
}

.pricing-logo {
	flex: 0 0 290px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-white);
	padding: var(--spacing-xs);
}

.pricing-logo__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	width: 100%;
}

.brand-title {
	font-size: 108px;
	color: var(--color-primary);
	font-weight: bold;
	font-family: var(--font-impact);
	line-height: 1.0;
	margin: 0;
	text-align: center;
}

.brand-subtitle {
	font-size: 52px;
	color: var(--color-primary);
	font-weight: bold;
	font-family: var(--font-impact);
	line-height: 1.0;
	margin: 0;
	text-align: center;
}

.brand-copyright {
	color: var(--color-primary);
	font-weight: normal;
	font-family: var(--font-base);
	line-height: 1.2;
	margin: var(--spacing-xs) 0 0 0;
	text-align: center;
}

.pricing-details {
	flex: 1;
	display: flex;
	flex-direction: column;
	background: var(--color-white);
}

.pricing-headline {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pricing-headline__text {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin-top: var(--spacing-sm);
	text-align: center;
}

.guarantee-text {
	font-size: 30px;
	color: var(--color-primary);
	font-weight: bold;
	font-family: var(--font-impact);
	line-height: 1.5;
	margin: 0;
	text-align: center;
}

.pricing-footer {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: var(--color-white);
	padding: var(--spacing-xs) 0;
}

.pricing-footer marquee {
	font-size: 16px;
	width: 100%;
	background: var(--color-white);
	padding: var(--spacing-xs) 0;
	font-family: var(--font-special);
	color: var(--color-text);
	font-weight: normal;
}

/* Separators */
.separator--primary {
	width: 100%;
	height: 3px;
	background-color: var(--color-primary);
	margin: 0;
}

.separator--secondary {
	width: 100%;
	height: 3px;
	background-color: var(--color-gray);
	margin: 0 auto;
}

.separator--default {
	width: 100%;
	height: 3px;
	background-color: var(--color-gray);
	margin: 0 auto;
}

/* Intro Section */
.intro-section {
	font-size: 24px;
	font-family: var(--font-impact);
	font-weight: bold;
	color: var(--color-black);
	line-height: 1.2;
	text-align: center;
	width: 100%;
	margin: 0 auto;
	padding: var(--spacing-lg) 0;
}

.intro-text {
	width: 80%;
	margin: 0 auto;
	padding: 0 var(--spacing-lg);
	box-sizing: border-box;
}

/* Comparison Section */
.comparison-section {
	width: 100%;
	padding: var(--spacing-lg) var(--spacing-sm);
}

.comparison-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin: 0 auto;
	background: var(--color-white);
	padding: 0;
	min-height: 140px;
	gap: var(--spacing-xs);
}

.comparison-traditional {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.comparison-traditional__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.traditional-title {
	color: var(--color-black);
	font-size: 32px;
	font-family: var(--font-impact);
	line-height: 1.5;
	margin: 0;
	text-align: center;
}

.traditional-subtitle {
	color: var(--color-black);
	font-size: 16px;
	font-weight: bold;
	font-family: var(--font-base);
	line-height: 1.5;
	margin: var(--spacing-xs) 0 0 0;
	text-align: center;
}

.comparison-divider {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
}

.comparison-badge {
	min-width: 60px;
	min-height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	background: none;
	box-shadow: none;
}

.comparison-badge__text {
	color: transparent;
	-webkit-text-stroke: 4px var(--color-black);
	font-size: 48px;
	font-weight: 900;
	font-family: var(--font-base);
	line-height: 1;
	letter-spacing: 2px;
	text-align: center;
}

.comparison-sec {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.comparison-sec__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.sec-brand-title {
	color: var(--color-primary);
	font-size: 64px;
	font-weight: bold;
	font-family: var(--font-impact);
	line-height: 1.0;
	margin: 0;
	text-align: center;
}

.sec-brand-subtitle {
	color: var(--color-primary);
	font-size: 30px;
	font-weight: bold;
	font-family: var(--font-impact);
	line-height: 1.0;
	margin: 0;
	text-align: center;
}

.sec-brand-copyright {
	color: var(--color-primary);
	font-size: 12px;
	font-weight: normal;
	font-family: var(--font-base);
	line-height: 1.0;
	margin: var(--spacing-xs) 0 0 0;
	text-align: center;
}

.sec-solution-text {
	color: var(--color-primary);
	font-size: 16px;
	font-weight: bold;
	font-family: var(--font-base);
	line-height: 1.0;
	margin: var(--spacing-xs) 0 0 0;
	text-align: center;
}

/* Problems Section */
.problems-section {
	width: 100%;
	padding: var(--spacing-sm);
}

.problems-grid {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap:10px;
	justify-content: center;
	align-items: center;
}

.problem-card {
	flex:1 0 140px; 
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: 0 2px 6px rgba(0,0,0,0.06);
	padding: 0;
	margin: 0;
}

.problem-card__title {
	font-size: 20px;
	font-family: var(--font-impact);
	color: var(--color-white);
	background: linear-gradient(180deg, #752013 0%, var(--color-primary) 100%);
	padding: var(--spacing-sm) 12px;
	text-align: center;
	margin: 0;
	width: 100%;
	box-sizing: border-box;
}

.problem-card__description {
	font-size: 14px;
	font-family: var(--font-base);
	color: var(--color-text);
	line-height: 1.2;
	padding: 10px;
	text-align: center;
	margin: 0;
}

.problem-card__divider {
	font-size: 20px;
	font-family: var(--font-base);
	color: var(--color-white);
	text-align: center;
	background: linear-gradient(180deg, #7e7d7d 0%, #b9b8b8 50%, #7e7d7d 100%);
	padding: 8px var(--spacing-sm);
	margin: 0;
	width: 100%;
	box-sizing: border-box;
}

.problem-card__solution {
	margin: 0;
	border-radius: 0;
	padding: 10px;
	font-size: 14px;
	font-family: var(--font-base);
	color: var(--color-solution);
	line-height: 1.2;
	text-align: center;
}

/* Purchase Section */
.purchase-section {
	width: 100%;
	margin: 0 auto;
	padding: var(--spacing-md) 0 var(--spacing-sm) 0;
}

.purchase-section img {
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}

/* Features Section */
.features-section {
	width: 100%;
	margin: 0 auto;
	background: var(--color-white);
	padding: var(--spacing-sm) ;
}

.features-intro {
	font-size: 16px;
	font-family: var(--font-base);
	color: var(--color-text);
	line-height: 1.2;
	text-align: left;
	margin-bottom: var(--spacing-sm);
	padding: var(--spacing-sm) 0 var(--spacing-xs);
}

.features-grid {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap:10px;
	justify-content: center;
	align-items: center;
}

.feature-card {
	flex:1 0 140px; 
	background: var(--color-white);
	border: 1px solid #e0e0e0;
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	display: flex;
	flex-direction: column;
}

.feature-card img {
	width: 100%;
	min-height: 120px;
	object-fit: cover;
	display: block;
}

.feature-card__title {
	font-size: 16px;
	font-family: var(--font-impact);
	color: var(--color-primary);
	text-align: center;
	padding: 2px;
	background: var(--color-white);
	line-height: 1.2;
}

/* Benefits Section */
.benefits-section {
	display: flex;
	flex-direction: column;
	width: 100%;
	margin: 0 auto;
	margin-right: 0;
	background: var(--color-white);
	padding-top: var(--spacing-lg);
}

.benefits-headline {
	width: 85%;
	margin: 0 auto;
	color: var(--color-primary);
	font-size: 48px;
	font-weight: bold;
	font-family: var(--font-impact);
	text-align: center;
	line-height: 1.2;
	margin-bottom: var(--spacing-lg);
	text-transform: uppercase;
}

.benefits-content {
	width: 100%;
	margin: 0 auto;
	display: flex;
	align-items: flex-start;
	gap: 0;
	flex: 1;
	position: relative;
}


.benefits-text {
	width: 50%;
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: var(--spacing-sm);
	background: var(--color-white);
}

.benefits-text__paragraph {
	font-size: 20px;
	font-family: var(--font-special);
	color: var(--color-black);
	line-height: 1.3;
	text-align: center;
	margin: 0;
	padding-right: 8px;
}

.benefits-text__paragraph_ko {
	font-size: 20px;
	font-family: var(--font-special);
	color: var(--color-black);
	line-height: 1.7;
	text-align: center;
	margin: 0;
	padding-right: 8px;
}
.benefits-image {
	position: absolute;
	right: 0;
	top: -15px;
	width: 40%;
	height: auto;
}

.benefits-image img {
	width: 100%;
	height: auto;
	max-width: 425px;
	object-fit: cover;
	display: block;
}

/* Testimonial Section */
.testimonial-section {
	padding: var(--spacing-lg)  var(--spacing-sm) 0 var(--spacing-sm);
	width: 100%;
	margin: 0 auto;
}

.testimonial-content {
	background-color: var(--color-bg-light);
	padding: var(--spacing-md);
	margin: 0 auto;
	width: 100%;
	border-radius: var(--radius-md);
	font-size: 16px;
	font-family: var(--font-base);
	line-height: 1.2;
	color: var(--color-black);
	text-align: left;
	box-sizing: border-box;
}

.testimonial-title {
	font-size: 20px;
	font-family: var(--font-base);
	font-weight: bold;
	color: var(--color-black);
	text-align: center;
	margin-bottom: var(--spacing-md);
	padding: 0 var(--spacing-md);
}

.testimonial-content b {
	font-weight: bold;
}

.testimonial-content i {
	font-style: italic;
}

.testimonial-content video {
	width: 100%;
	max-width: 480px;
	height: auto;
	display: block;
	margin: 0 auto;
}

/* About Section */
.about-section {
	background-color: var(--color-white);
	padding: 0 var(--spacing-sm) var(--spacing-sm) var(--spacing-sm);
	width: 100%;
	margin: 0 auto;
	margin-top: var(--spacing-sm);
	font-size: 16px;
	font-family: var(--font-base);
	line-height: 1.2;
	color: var(--color-text);
	text-align: left;
}

.section-heading {
	padding: var(--spacing-md) 0 0 0;
	font-size: 24px;
	font-family: var(--font-impact);
	font-weight: bold;
	color: var(--color-black);
	line-height: 1.5;
	text-align: center;
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
}

.full-width-content {
	width: 100%;
	margin: 0 auto;
	padding: 0 var(--spacing-lg);
	box-sizing: border-box;
}

.about-section strong {
	font-weight: bold;
	color: #2c5aa0;
}

/* CTA Banner */
.cta-banner {
	background-color: var(--color-blue-bright);
	color: var(--color-accent);
	padding: var(--spacing-sm) 0;
	width: 100%;
	margin: 0 auto;
	font-size: 48px;
	font-family: var(--font-impact);
	font-weight: bold;
	text-align: center;
	line-height: 1.1;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.slogan-text {
	width: 75%;
	margin: 0 auto;
	color: var(--color-primary);
	font-size: 48px;
	font-weight: bold;
	font-family: var(--font-impact);
	text-align: center;
	line-height: 1.2;
	margin: var(--spacing-md) auto;
}

/* Audio Player */
.audio-player {
	display: block;
	background: #CDDFF3;
	border: 1px solid var(--color-white);
	border-radius: var(--radius-md);
	padding: 8px var(--spacing-sm);
	width: 70%;
	margin: 12px auto;
	box-sizing: border-box;
}

.audio-player .controls {
	display: flex;
	align-items: center;
	width: 100%;
	height: auto;
	background: transparent;
	flex-wrap: wrap;
}

.audio-player .play-btn {
	width: 36px;
	height: 36px;
	background: var(--color-secondary);
	border: none;
	border-radius: 50%;
	color: #F2F2F2;
	cursor: pointer;
	margin: 0 8px 0 0;
	flex-shrink: 0;
	transition: background 0.2s;
}

.audio-player .play-btn:hover {
	background: #4499EE;
}

.audio-player .progress-container {
	flex: 1;
	height: 10px;
	background: var(--color-white);
	border-radius: var(--radius-sm);
	margin: 0 8px;
	position: relative;
	cursor: pointer;
	min-width: 60px;
	max-width: 100%;
}

.audio-player .progress-bar {
	height: 100%;
	background: var(--color-secondary);
	border-radius: var(--radius-sm);
	width: 0%;
	transition: width 0.1s;
}

.audio-player .time-display {
	color: #003333;
	margin: 0 8px;
	min-width: 56px;
	text-align: center;
	flex-shrink: 0;
}



/* ============================================
   Mobile Media Queries - 特有样式
   ============================================ */

/* == Mobile: Extra Small (Width ≤ 320px) OR (321px ≤ Width ≤ 480px) == */
@media (max-width: 320px), (min-width: 321px) and (max-width: 480px) {

	/* 只为≤320px的设备限制最大宽度 */
	@media (max-width: 320px) {.wrapper {max-width: 320px; width: 100%; margin: 0 auto;}}

	.alert-banner img {width: 40px; height: 40px;}
	.alert-text {font-size: 10px; max-width: calc(100% - 40px);}
	.header-banner {padding: var(--spacing-sm) var(--spacing-xs);}
	.header-logo__image {max-width: 80px;}
	.header-content {max-width: calc(100% - 80px);}
	.header-title {font-size: 14px;}
	.header-subtitle {font-size: 12px;}
	.header-description {font-size: 10px;}
	.header-features {display: none;}
	.feature-badge {font-size: 12px;}
	.pricing-logo {flex: 0 0 120px;}
	.pricing-headline__text {max-width: 350px;}
	.brand-title {font-size: 48px;}
	.brand-subtitle {font-size: 14px;}
	.brand-copyright {font-size: 10px;}
	.guarantee-text {font-size: 12px;}
	.pricing-footer marquee {max-width: 350px; font-size: 10px;}
	.separator--primary {max-width: 350px;}
	.intro-section {font-size: 16px; padding: var(--spacing-sm);}
	.intro-text {width: 100%;}
	.comparison-section {padding: 0 var(--spacing-xs);}
	.traditional-title {font-size: 20px;}
	.traditional-subtitle {font-size: 12px;}
	.comparison-badge__text {font-size: 42px;}
	.sec-brand-title {font-size: 48px;}
	.sec-brand-subtitle {font-size: 14px;}
	.sec-brand-copyright {font-size: 10px;}
	.sec-solution-text {font-size: 12px;}
	.problem-card__title {font-size: 18px;}
	.problem-card__description {
		padding: 12px var(--spacing-xs);font-size: 12px;}
	.problem-card__divider {font-size: 18px;}
	.problem-card__description {
		padding: 12px var(--spacing-xs);font-size: 12px;}
	.features-intro {font-size: 14px;}
	.feature-card__title {font-size: 14px;}
	.feature-card:nth-child(5) {
		flex: 0 0 200px !important; 
		max-width: 200px !important; 
		margin: 0 auto;
	}
	.benefits-text {width: 56%;}
	.benefits-text__paragraph {font-size: 10px; line-height: 1.1;}
	.benefits-text__paragraph_ko {font-size: 10px; line-height: 1.2;}
	.benefits-image {top: 0px; width: 43%;}
	.benefits-headline {font-size: 24px;}
	.testimonial-content {font-size: 12px;}
	.testimonial-title {font-size: 16px;}
	.testimonial-content video {max-width: 300px;}
	.about-section {font-size: 12px;}
	.section-heading {font-size: 24px;}
	.cta-banner {font-size: 24px;}
	.slogan-text {width: 90%; font-size: 24px;}
	.audio-player {width: 80%;}
	.audio-player .play-btn {font-size: 20px;}
	.audio-player .time-display {font-size: 14px;}
}


/* == Mobile: Medium (481px ≤ Width ≤ 768px) == */
@media (min-width: 481px) and (max-width: 768px) {

	/* 特有样式：中等屏幕字体大小 */
	.alert-banner img {width: 40px; height: 40px;}
	.alert-text {font-size: 12px; max-width: calc(100% - 40px);}
	.header-banner {padding: var(--spacing-sm) var(--spacing-xs);}
	.header-logo__image {max-width: 100px;}
	.header-content {max-width: calc(100% - 100px);}
	.header-title {font-size: 28px;}
	.header-subtitle {font-size: 20px;}
	.header-description {font-size: 14px;}
	.header-features {display: none;}
	.feature-badge {font-size: 12px;}
	.brand-title {font-size: 48px;}
	.brand-subtitle {font-size: 14px;}
	.brand-copyright {font-size: 10px;}
	.guarantee-text {font-size: 16px;}
	.pricing-footer marquee {font-size: 14px;}
	.intro-section {font-size: 16px; padding: var(--spacing-sm);}
	.intro-text {width: 100%;}
	.comparison-section {padding: 0 var(--spacing-xs);}
	.traditional-title {font-size: 20px;}
	.traditional-subtitle {font-size: 12px;}
	.comparison-badge__text {font-size: 42px;}
	.sec-brand-title {font-size: 48px;}
	.sec-brand-subtitle {font-size: 14px;}
	.sec-brand-copyright {font-size: 10px;}
	.sec-solution-text {font-size: 12px;}
	.problem-card__title {font-size: 18px;}
	.problem-card__description {
		padding: 12px var(--spacing-xs);font-size: 14px;}
	.problem-card__divider {font-size: 18px;}
	.problem-card__solution {
		padding: 12px var(--spacing-xs);font-size: 14px;}
	.features-intro {font-size: 14px;}
	.feature-card__title {font-size: 14px;}
	/* 最后两张卡片特殊样式 - 固定200px宽度并居中 */
	.feature-card:nth-child(4) {
		flex: 0 0 176px !important;
		max-width: 200px !important;
		margin: 0 auto;
	}
	.feature-card:nth-child(5) {
		flex: 0 0 176px !important;
		max-width: 200px !important;
		margin: 0 auto;
	}
	.benefits-headline {font-size: 24px;}
	.benefits-text__paragraph {font-size: 16px;}
	.benefits-text__paragraph_ko {font-size: 16px; line-height: 1.2;}
	.testimonial-content {font-size: 14px;}
	.testimonial-title {font-size: 16px;}
	.testimonial-content video {max-width: 360px;}
	.about-section {font-size: 14px;}
	.section-heading {font-size: 24px;}
	.cta-banner {font-size: 24px;}
	.slogan-text {width: 90%; font-size: 24px;}
	.audio-player {width: 70%;}
	.audio-player .play-btn {font-size: 20px;}
	.audio-player .time-display {font-size: 14px;}
}

/* == Mobile: Medium (481px ≤ Width ≤ 997px) == */
@media (min-width: 739px) and (max-width: 997px) {
	.benefits-text__paragraph_ko {font-size: 18px; line-height: 1.8;}
	.problem-card__description {padding: 6px;font-size: 12px;}
	.problem-card__solution {padding: 6px;font-size: 12px;}
}

/* == Mobile: Medium (1024px ≤ Width ≤ 1025px) == */
@media (min-width: 1024px) and (max-width: 1025px) {
	.benefits-text__paragraph {font-size: 20px;line-height: 1.5;}
	.benefits-text__paragraph_ko {font-size: 20px; line-height: 1.8;}
	.problem-card__description {padding: 15px;font-size: 14px;}
	.problem-card__solution {padding: 15px;font-size: 14px;}
}