@charset "UTF-8";

/* ==========================================
   003 / internet-sermon.css
   인터넷 설교방송 페이지
   ========================================== */

.is-container {
	margin: 0 auto;
	box-sizing: border-box;
}

/* ============================
   Section 1 — YouTube 연동 Hero
   canvas: 0~890, height 890px
   ============================ */
.is-section1 {
	position: relative;
	width: 100%;
	height: 890px;
	margin: 0 auto;
	box-sizing: border-box;
	overflow: hidden;
}

/* Hero text group: title + subtitle stacked at top:45 */
.is-hero-text-group {
	display: flex;
	flex-direction: column;
	padding-top: 40px;
	gap: 0;
}

/* Title block (text-align center) */
.is-hero-title {
	position: relative;
	top: auto;
	left: auto;
	width: 100%;
	font-size: clamp(28px, 4.5vw, 44px);
	font-weight: 700;
	letter-spacing: -1px;
	line-height: 1.3;
	color: #298C52;
	text-align: center;
	margin: 0;
}

/* "유튜브를 이용해 설교 방송을 무료로 운영 가능" */
.is-hero-subtitle {
	position: relative;
	top: auto;
	left: auto;
	width: 100%;
	font-size: 20px;
	font-weight: 400;
	letter-spacing: -1px;
	line-height: 1.4;
	color: #333333;
	text-align: center;
	margin: 20px 0 0 0;
}

/* Monitor + Video Wrap: Centered wrap based on original image coordinates */
.is-monitor-wrap {
	position: absolute;
	top: 225px;
	left: 50%;
	transform: translateX(-50%);
	width: 698px;
	height: 591px;
}

/* Main screenshot image: Now fits within wrap */
.is-hero-img {
	position: relative;
	width: 100%;
	height: 100%;
	display: block;
}

/* Video Frame: Precisely positioned over the screen area of image_24258.png */
.is-video-frame {
	position: absolute;
	top: 3.5%;
	left: 3.3%;
	width: 93.4%;
	height: 61.5%;
	background-color: #000;
	overflow: hidden;
}

.is-video-frame iframe {
	width: 100% !important;
	height: 100% !important;
	display: block;
	border-radius: 0;
	/* Align with monitor screen edges */
}

/* ============================
   Section 2 — PC/모바일 접속
   canvas: 890~1289, height 399px
   ============================ */
.is-section2 {
	position: relative;
	width: 100%;
	height: auto;
	margin: 0 auto;
	padding: 30px 60px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* Text group: Now a flex item */
.is-access-text-group {
	position: relative;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	overflow: hidden;
}

/* "PC, 모바일 및 다양한 기기에서" */
.is-access-title1 {
	position: relative;
	top: auto;
	left: auto;
	font-size: 22px;
	font-weight: 400;
	letter-spacing: -1px;
	line-height: 1.4;
	color: #333333;
	margin: 0;
	white-space: nowrap;
}

/* "홈페이지를 접속하여" */
.is-access-title2 {
	position: relative;
	top: auto;
	left: auto;
	font-size: clamp(20px, 3vw, 28px);
	font-weight: 400;
	letter-spacing: -1px;
	line-height: 1.4;
	color: #519A35;
	margin: 0;
	white-space: nowrap;
}

/* "유튜브 영상 바로 시청 가능!" */
.is-access-title3 {
	position: relative;
	top: auto;
	left: auto;
	font-size: clamp(20px, 3vw, 28px);
	font-weight: 400;
	letter-spacing: -1px;
	line-height: 1.4;
	color: #F60000;
	margin: 0;
	white-space: nowrap;
}

/* Description */
.is-access-desc {
	position: relative;
	top: auto;
	left: auto;
	width: 430px;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: -0.5px;
	line-height: 1.5;
	color: #333333;
	margin: 16px 0 0 0;
}

/* Bullet item wrappers */
.is-bullet-item {
	position: relative;
	display: flex;
	align-items: flex-start;
	margin-top: 8px;
}

/* Bullet icon: 17×17 */
.is-bullet-icon {
	position: relative;
	width: 17px;
	height: 17px;
	flex-shrink: 0;
	margin-right: 9px;
	margin-top: 4px;
}

/* Bullet texts */
.is-bullet-text {
	position: relative;
	width: 400px;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: -0.5px;
	line-height: 1.5;
	color: #333333;
	margin: 0;
}

.is-bullet-text .is-red {
	color: #F60000;
}

/* Modifier overrides (no-op since siblings are now in the group) */
.is-bullet-item1,
.is-bullet-item2 {
	top: auto;
	left: auto;
}

/* Device images group: Encapsulated relative container */
.is-device-group {
	position: relative;
	width: 450px;
	height: 200px;
	flex-shrink: 0;
}

/* image_24268 (249×239) */
.is-device-img1 {
	position: absolute;
	top: 0;
	right: 50px;
	width: 249px;
	height: 239px;
	z-index: 1;
}

/* image_24269 (224×145) */
.is-device-img2 {
	position: absolute;
	top: 100px;
	left: 0;
	width: 224px;
	height: 145px;
	z-index: 2;
}

/* image_24270 (77×123) */
.is-device-img3 {
	position: absolute;
	top: 110px;
	right: 0;
	width: 77px;
	height: 123px;
	z-index: 3;
}

/* image_24271 (36×77) */
.is-device-img4 {
	position: absolute;
	top: 150px;
	right: 90px;
	width: 36px;
	height: 77px;
	z-index: 4;
}

/* ============================
   Section 3 — 서버 방송
   canvas: 1289~2000, height 711px
   ============================ */
.is-section3 {
	position: relative;
	width: 100%;
	height: auto;
	margin: 0 auto;
	padding: 70px 0;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow: hidden;
	background-color: #F7F7F7;
	background-image: url('../../images/features/internet-sermon/boxBG_24272.png');
	background-repeat: no-repeat;
	background-size: auto;
	background-position: left top;
}

/* (is-server-bg removed, handled by parent) */

/* Server text group: Now a flex item */
.is-server-text-group {
	position: relative;
	width: 100%;
	max-width: 957px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Title block (center-aligned) */
.is-server-title {
	position: relative;
	top: auto;
	left: auto;
	width: 100%;
	font-size: clamp(26px, 4vw, 40px);
	font-weight: 700;
	letter-spacing: -1px;
	line-height: 1.3;
	color: #298C52;
	text-align: center;
	margin: 0;
}

/* Description */
.is-server-desc {
	position: relative;
	top: auto;
	left: auto;
	width: 100%;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: -0.5px;
	line-height: 1.5;
	color: #333333;
	text-align: center;
	margin: 38px 0 0 0;
}

/* Feature columns wrapper: Flex row */
.is-feat-group {
	position: relative;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	padding-top: 50px;
	gap: 20px;
	width: 100%;
}

/* Each feature column: num + img + label */
.is-feat-col {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 270px;
}

/* Feature numbers "01/02/03" */
.is-feat-num {
	position: relative;
	top: auto;
	left: auto;
	font-size: 40px;
	font-weight: 400;
	color: #CDCDCD;
	margin: 0;
	text-align: center;
}

/* Feature images: 195×124 */
.is-feat-img {
	position: relative;
	top: auto;
	left: auto;
	width: 195px;
	height: 124px;
	margin-top: 72px;
}

/* Feature labels: width:191, 16px */
.is-feat-label {
	position: relative;
	top: auto;
	left: auto;
	width: 191px;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: -0.5px;
	line-height: 1.5;
	color: #333333;
	text-align: center;
	margin: 10px 0 0 0;
}

/* Remove per-item absolute overrides */
.is-feat-num1,
.is-feat-num2,
.is-feat-num3 {
	left: auto;
}

.is-feat-img1,
.is-feat-img2,
.is-feat-img3 {
	left: auto;
}

.is-feat-label1,
.is-feat-label2,
.is-feat-label3 {
	left: auto;
}

.is-feat-label b {
	font-weight: 700;
}

/* ==========================================
   Responsive — 800px
   ========================================== */
@media (max-width: 800px) {
	.is-section1 {
		height: auto;
		padding-bottom: 30px;
	}

	.is-hero-text-group {
		position: relative;
		top: auto;
		left: auto;
		width: 100%;
		padding-top: 20px;
	}

	.is-hero-title {
		font-size: 28px;
	}

	.is-hero-subtitle {
		font-size: 16px;
		margin-top: 10px;
	}

	.is-monitor-wrap {
		position: relative;
		top: auto;
		left: auto;
		transform: none;
		width: 100%;
		height: auto;
		margin: 16px 0;
		/* Maintain aspect ratio of the monitor image (591/698 = ~84.6%) */
		aspect-ratio: 698 / 591;
	}

	.is-hero-img {
		position: absolute;
		top: 0;
		left: 0;
	}

	.is-video-frame {
		/* Percentages remain same to follow the scaled image */
	}

	.is-section2 {
		flex-direction: column;
		padding: 30px 20px;
		margin-top: 0;
	}

	.is-access-text-group {
		width: 100%;
		align-items: center;
		text-align: center;
	}

	.is-access-title1,
	.is-access-title2,
	.is-access-title3 {
		width: 100%;
		text-align: center;
	}

	.is-access-desc,
	.is-bullet-text {
		width: 100%;
		word-break: keep-all;
		text-align: center;
	}

	.is-bullet-item {
		justify-content: center;
	}

	.is-device-group {
		display: none;
	}

	.is-section3 {
		height: auto;
		padding-bottom: 30px;
	}

	.is-server-bg {
		position: relative;
		top: auto;
		left: auto;
		width: 100%;
		height: auto;
		padding-bottom: 20px;
	}

	.is-server-text-group {
		position: relative;
		top: auto;
		left: auto;
		width: 100%;
	}

	.is-server-title {
		font-size: 26px;
	}

	.is-server-desc {
		margin-top: 10px;
	}


}