/* layer popup */
#ipop1 { font-size: 13px; }
#ipop1 p { font-size: 0; }
#ipop1 span.float_left { float: left; line-height: 30px; }
#ipop1 span.float_left input { width: 14px; height: 14px; margin: 0 5px; vertical-align: middle; }
#ipop1 span.float_right a {float: right; padding: 0 10px; height: 30px; line-height: 30px; color: #fff; background: #222; vertical-align: top;}

/* title/h2 */
h2 { padding: 65px 0 35px; text-align: center; font-size: 3.7rem; font-weight: 800; letter-spacing: -2px;}
h2 span { display: block; color:#bdbdbd; font-size: 1.6rem; font-weight: 400; letter-spacing: 0;}

@media all and (max-width: 1000px) {
  h2 { padding: 40px 0 20px; font-size: 2.8rem; }
  h2 span { font-size: 1.4rem; }
}

/* main-visual */
.main-visual { position: relative; width: 100%; height: 800px; background:#129540 url(/img/index/main-visual.png) no-repeat 50% 50%;}
.main-visual .text { display: block; position: absolute; top: calc(50% - 80px); left: 50%; transform: translate(-50%, -50%); padding-top: 80px; width: 100%; color: #fff; background: url(/img/index/i-bridge.png) no-repeat 50% 0;}
.main-visual .text p { text-align: center; line-height: 100%;}
.main-visual .text p:first-child  { font-size: 2rem;}
.main-visual .text p:nth-child(2) { margin: 20px 0 10px; font-family: 'GMarketSans'; font-size: 6.7rem; text-transform:uppercase; letter-spacing: -1.5px;}
.main-visual .text p:last-child   { font-size: 2.7rem; font-weight: 600;}
.main-visual img { position: absolute; bottom: 37px; left: 50%; transform: translate(-50%, 0);}

@media all and (max-width: 1200px) {
	.main-visual { background-size: cover;}
}

@media all and (max-width: 1000px) {
	.main-visual { height: 400px;}
	.main-visual .text { top: calc(50% - 30px); left: 50%; padding-top: 45px; background-size: 100px;}
	.main-visual .text p:first-child  { font-size: 1.4rem;}
	.main-visual .text p:nth-child(2) { margin: 15px 0 7px; font-size: 4rem; letter-spacing: -1px;}
	.main-visual .text p:last-child   { font-size: 1.6rem; font-weight: 500;}
	.main-visual img { width: 220px;}
}

/* slide */
.main-slider-wrap { position: relative; width: 100%; height: 800px; }
.main-slider > div { width: 100%; height: 800px; background-size: cover; }
.main-slider-wrap .overlay-content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: center; }
.main-slider-wrap .circle-mark { position: absolute; top: 240px; left: 50%; display: block; width: 32px; height: 32px; margin-left: -16px; border-radius: 100px; background: #fff;}
.main-slider-wrap .circle-mark::before { content: ""; position: absolute; top: -120px; left: 50%; display: block; width: 1px; height: 120px; background: #fff; }
.main-slider-wrap .title-text { margin-top: 324px; }
.main-slider-wrap .title-text img { height: 120px; }
.main-slider-wrap .sub-text { margin-top: 40px; }
.main-slider-wrap .sub-text img { height: 24px; }
.main-slider-wrap .desc-text { margin-top: 30px; line-height: 150%; font-weight: 500; font-size: 1.8rem; color: #fff; letter-spacing: 0;}
.main-slider-wrap .bx-wrapper .bx-pager { position: absolute; left: 0; bottom: 50px; z-index: 1; }
.main-slider-wrap .bx-wrapper .bx-pager.bx-default-pager a { width: 60px; height: 7px; border-radius: 0; background: #d9d9d9; }
.main-slider-wrap .bx-wrapper .bx-pager.bx-default-pager a.active { background: #3450AC; }

.idx_top_wrap {	position: relative;	width: 100%; min-width: 1200px; height: 930px; margin: 0 auto;}
.idx_bg_wrap  { position: relative;	width: 100%; z-index: 0;}
.idx_bg_wrap .bg {position: relative;	height:930px;	background-repeat: no-repeat;	background-position: 50% 50%;	background-size: cover;}
.idx_bg_wrap .bg1 {	background-image: url("/img/index/idx_slide1.jpg");}
.idx_bg_wrap .bg2 {	background-image: url("/img/index/idx_slide2.jpg");}
.idx_bg_wrap .bg3 {	background-image: url("/img/index/idx_slide3.jpg"); background-position: right bottom;}
.idx_top_text {	position: absolute;	top: 330px;	width: 100%; text-align: center; color: #fff; letter-spacing: -1px;}
.idx_top_text strong {display: block;	margin-bottom: 5px;	font-size: 7.5rem; font-weight: 800; letter-spacing: -2.2px;}
.idx_top_text strong.s {font-size: 5.5rem; font-weight: 800; letter-spacing: -2.2px;}
.idx_top_text span { display:block; line-height: 140%; 	}
.idx_top_text span.top { font-size: 3.4rem; font-weight: 700;	}
.idx_top_text span.bottom {	 font-size: 3rem; }

.idx_bg_pager {	position: absolute;	bottom: 350px; width: 100%; font-size: 0; text-align: center; z-index: 9999;}
.idx_bg_pager a {	display: inline-block; width: 60px;	height: 5px; background: #fff; margin-right: 10px; border-radius: 5px;}
.idx_bg_pager a.active {background: #f55e24;}

.idx-section1 {	position: relative;	padding: 80px 0;}
.idx-section1::before,
.idx-section2::after,
.idx-section3::before {	content: ""; position: absolute; transform: translate(-50%, 0); display: block; background-repeat: no-repeat; background-position: 0 0; z-index: -1;}
.idx-section1::before {	top: 260px; left: calc(50% - 330px); width: 735px; height: 525px; background-image: url(/img/index/idx-bg1.png);}
.idx-section2::after  {	bottom: 320px; left: calc(50% + 170px); width: 1550px; height: 495px; background-image: url(/img/index/idx-bg2.png);}
.idx-section3::before {	top:30px; left: calc(50% + 250px); width: 640px; height: 210px; background-image: url(/img/index/idx-bg3.png);}

@media all and (max-width: 1200px) {
	.idx-section1::before {	left: calc(50% - 200px); background-size: 80%; }
	.idx-section2::after  {	left: calc(50% + 400px); background-size: 80%; }
	.idx-section3::before {	background-size: 80%;}
}

@media all and (max-width: 1000px) {
	.idx-section1::before {	left:initial; right: 20px; transform: translate(0, 0); background-size: 100%; background-image: url(/img/index/idx-bg1-m.png);}
	.idx-section2::after  {	bottom: initial; top:70px; left: calc(50% + 240px); height: 300px; background-size: 70%; }
	.idx-section3::before {	left: calc(50% + 450px); background-size: 70%;}
}

/*.idx-section1::before {
	content: "";
	position: absolute;
	top: 260px;
	right: 0;
	display: block;
	width: 800px;
	height: 1032px;
	background: url(/img/index/idx-section1-bg.png) no-repeat 0 0 /800px;
	opacity: 0.3;
}*/

.idx-section1 > div {
	width: 1200px;
	margin: 0 auto;
}

.idx-section1 .title {
	float: left;
}

.idx-section1 .title > span,
.idx-section2 .title > span,
.idx-section3 .title span {
    line-height: 150%;
	font-size: 2.4rem;
	font-weight: 800;
	letter-spacing: 0;
}

.idx-section1 .title strong {
	display: block;
	margin-top: 30px;
}

.idx-section1 .title strong,
.idx-section1 .title strong span,
.idx-section3 .title strong {
	font-family: 'GMarketSans';
	line-height: 130%;
	font-size: 7.5rem;
	font-weight: 700;
	letter-spacing: 0;
}

.idx-section1 .title strong span {
	color: #3450AC;
}
.idx-section1 .links {
	float: right;
	width: 530px;
	font-size: 0;
}

.idx-title-ani {
    opacity: 0;
    transform: translateX(-60px);
    transition: all 0.9s ease;
}

.idx-title-ani.on {
    opacity: 1;
    transform: translateX(0);
}

.idx-section1 .links .item {
	position: relative;
	display: inline-block;
	width: 260px;
	height: 300px;
	background-size: cover;
}

.idx-section1 .links .item:nth-child(1),
.idx-section1 .links .item:nth-child(2) {
	margin-bottom: 10px;
}

.idx-section1 .links .item:first-child,
.idx-section1 .links .item:nth-child(3) {
	margin-right: 10px;
}

.idx-section1 .links .item > span {
	position: absolute;
	top: 18px;
	left: 20px;
	display: block;
	font-size: 1.5rem;
	font-weight: 700;
	color: #000;
	letter-spacing: 0;
}

.idx-section1 .links .item > b {
	position: absolute;
	left: 24px;
	bottom: 30px;
	font-size: 3.2rem;
	color: #fff;
}

.idx-section1 .links .item::before {
	content: "";
	position: absolute;
	bottom: 0;
	right: 30px;
	display: block;
	width: 44px;
	height: 80px;
	background: #3450AC url("/img/index/idx-section1-arrow.png") no-repeat 50% 20%;
}

.idx-section1 .item .over,
.idx-section3 .item .over {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	width: 100%;
	height: 100%;
	background: #3450AC;
	text-align: center;
	transition: opacity .2s ease;
}

.idx-section1 .links > div:hover .over,
.idx-section3 .links > .item:hover .over {
	opacity: 1;
}

.idx-section1 .links .over span,
.idx-section3 .links .over span {
	display: inline-block;
	margin-top: 127px;
	padding: 10px 40px 10px 10px;
	border: 1px solid #fff;
	background: url("/img/index/idx-section1-arrow.png") no-repeat 90% 50% /20px;
	text-align: center;
	font-size: 2rem;
	font-weight: 700;
	color: #fff;
}

.idx-section3 .links .over span {
	margin-top: 149px;
}

.idx-section1 .item:nth-child(2) .over,
.idx-section1 .item:nth-child(3) .over,
.idx-section3 .item:nth-child(2) .over,
.idx-section3 .item:nth-child(4) .over {
	background-color: #3C95A4;
}

.idx-section2 {
	clear: both;
	position: relative;
	padding: 120px 0;
	overflow-x: hidden;
}

.idx-section2::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	display: block;
	width: 100%;
	height: 300px;
	background: #3450AC;
	z-index: -1;
}

.idx-section2 > div {
	width: 1200px;
	margin: 0 auto;	
}

.idx-section2 .title span br {
	display: none;
}

.idx-section2 .title strong {
	display: block;
	margin-top: 30px;
	font-size: 6.5rem;
	font-weight: 700;
}

.idx-section2 .title strong span {
	color: #3450AC;
}

.idx-section2 .video-wrap {
	margin-top: 40px;
}

.idx-section2 .video-wrap iframe {
	width: 896px;
	height: 504px;
	box-shadow: 0 10px 10px rgba(0, 0, 0, 0.5);
}

.idx-section3 {
	position: relative;
	width: 1200px;
	margin: 0 auto;
	padding: 80px 0 90px 0;
	overflow-x: hidden;
}

.idx-section3 .title strong {
	display: block;
	margin-top: 20px;
}

.idx-section3 .links {
	margin-top: 30px;
	font-size: 0;
}

.idx-section3 .links .item {
	position: relative;
	display: inline-block;
	width: 288px;
	height: 344px;
	vertical-align: top;
	margin-left: 16px;
	background-color: #000;
}

.idx-section3 .links .item::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.3);
}

.idx-section3 .links .item:first-child {
	margin-left: 0;
}

.idx-section3 .links .item p {
	position: relative;
	display: table;
	width: 100%;
	height: 100%;
	text-align: center;
	font-size: 3.2rem;
	font-weight: 700;
	text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
	color: #fff;
}

.idx-section3 .links .item p b {
	display: table-cell;
	vertical-align: middle;
	font-weight: 600;
	letter-spacing: 0;
}

.idx-section3 .box {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 80px;
	background: #3450AC;
}

.idx-section3 .item:nth-child(2n) .box {
	top: auto;
	bottom: 0;
	background: #3C95A4;
}

@media all and (max-width: 1200px) {
	.idx-section1 > div,
	.idx-section2 > div {
		width: 100%;
		padding: 0 30px;
		box-sizing: border-box;
	}
	
	.idx-section1 .title > span,
	.idx-section2 .title > span,
	.idx-section3 .title span {
		font-size: 2rem;
	}
	
	.idx-section1 .title strong,
	.idx-section1 .title strong span,
	.idx-section3 .title strong {
		font-size: 8rem;
	}
	
	.idx-section3 {
		width: 100%;
		padding-left: 30px;
		padding-right: 30px;
	}
	
	.idx-section3 .links .item {
		width: 23.5%;
		height: 250px;
		margin-left: 2%;
	}
	
	.idx-section3 .box {
		height: 50px;
	}
}


@media all and (max-width: 1000px) {
	.main-slider-wrap,
	.main-slider > div {
		height: 400px;
	}
	
	.main-slider-wrap .circle-mark::before {
		top: -40px;
		height: 40px;
	}
	
	.main-slider-wrap .circle-mark {
		top: 80px;
		width: 16px;
		height: 16px;
		margin-left: -8px;
	}
	
	.main-slider-wrap .title-text {
		margin-top: 120px;
	}
	
	.main-slider-wrap .title-text img {
		height: 60px;
	}
	
	.main-slider-wrap .sub-text {
		margin-top: 20px;
	}
	
	.main-slider-wrap .sub-text img {
		height: 12px;
	}
	
	.main-slider-wrap .desc-text {
		margin-top: 20px;
		font-size: 1.4rem;
	}
	
	.main-slider-wrap .bx-wrapper .bx-pager {
		bottom: 30px;
	}
	
	.main-slider-wrap .bx-wrapper .bx-pager.bx-default-pager a {
		width: 30px;
		height: 4px;
	}
	
	.idx-section1 {
		padding: 30px;
	}
	
	.idx-section1 > div {
		width: auto;
		padding: 0;
	}
	
	.idx-section1 .title {
		float: none;
	}
	
	.idx-section1 .title > span,
	.idx-section2 .title > span,
	.idx-section3 .title span {
		font-size: 1.4rem;
	}
	
	.idx-section1 .title strong,
	.idx-section1 .title strong span,
	.idx-section3 .title strong {
		font-size: 4rem;
	}
	
	.idx-section1 .title strong {
		margin-top: 10px;
	}
	
	.idx-section1::before {
		top: 20px;
		width: 400px;
		height: 517px;
		background-size: 400px;
	}
	
	.idx-section1 .links {
		float: none;
		width: 100%;
		margin-top: 20px;
	}
	
	.idx-section1 .links .item {
		width: 49%;
		height: 250px;
	}
	
	.idx-section1 .links .item:first-child, 
	.idx-section1 .links .item:nth-child(3) {
		margin-right: 2%;
	}
	
	.idx-section1 .links .item > b {
		font-size: 2rem;
	}
	
	.idx-section1 .links .item::before {
		right: 20px;
		width: 40px;
		height: 60px;
		background-size: 20px;
	}
	
	.idx-section1 .links .over span,
	.idx-section3 .links .over span {
		margin-top: 106px;
		font-size: 1.4rem;
	}
	
	.idx-section2 {
		padding: 30px 0;
	}
	
	.idx-section2 > div {
		width: auto;
	}
	
	.idx-section2::before {
		display: none;
	}
	
	.idx-section2 .title {
		padding-left: 0;
	}
	
	.idx-section2 .title span br {
		display: block;
	} 
	
	.idx-section2 .title strong {
		margin-top: 10px;
		line-height: 140%;
		font-size: 3rem;
	}
	
	.idx-section2 .video-wrap {
		position: relative;
		width: 100%;
		margin-top: 20px;
		padding-bottom: 56.25%;
	}
	
	.idx-section2 .video-wrap iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	
	.idx-section3 {
		width: auto;
		padding: 30px;
	}
	
	.idx-section3 .title strong {
		margin-top: 10px;
	}
	
	.idx-section3 .links {
		margin-top: 20px;
	}
	
	.idx-section3 .links .item p {
		font-size: 2rem;
	}
	
	.idx-section3 .box {
		height: 40px;
	}
}

@media all and (max-width: 600px) {
	.idx-section3 .links .item {
		width: 49%;
		height: 200px;
	}
	
	.idx-section3 .links .item:nth-child(1),
	.idx-section3 .links .item:nth-child(3) {
		margin-left: 0;
	}
	
	.idx-section3 .links .item:nth-child(3),
	.idx-section3 .links .item:nth-child(4) {
		margin-top: 10px;
	}
	
	.idx-section3 .links .over span {
		margin-top: 81px;
	}
}

/* �˾���� 2025.12.29 ������ */
:root {
		--modal-bg: rgba(0, 0, 0, 0.85);
		--card-bg: #ffffff;
		--accent: #e74c3c;
		--info: #3498db;
		--text-muted: #666;
}

/* Modal Overlay - Flexbox for Centering */
#multiModalOverlay {
		position: fixed;
		top: 0; left: 0;
		width: 100%; height: 100%;
		background: var(--modal-bg);
		z-index: 10000;
		display: none;
		overflow-y: auto;
		/* Center elements vertically and horizontally */
		display: none; /* jQuery fadeIn will change this to block, so we use flex in JS */
		align-items: center;
		justify-content: center;
		padding: 40px 20px;
		box-sizing: border-box;
}

/* Inner container for scrollable centered content */
.modal-wrapper {
		width: 100%;
		max-width: 1200px;
		margin: auto; /* Important for vertical centering in flex */
		display: flex;
		flex-direction: column;
		gap: 20px;
}

/* Controls */
.modal-master-controls {
		display: flex;
		justify-content: flex-end;
		gap: 12px;
}

.btn-master {
		padding: 10px 20px;
		border-radius: 8px;
		font-size: 14px;
		font-weight: 600;
		cursor: pointer;
		border: 1px solid rgba(255,255,255,0.3);
		background: rgba(255,255,255,0.1);
		color: white;
		transition: all 0.2s;
}

.btn-master:hover {
		background: white;
		color: black;
}

.btn-master.highlight {
		background: var(--info);
		border-color: var(--info);
		color: white;
}

/* Grid */
.modal-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
		gap: 24px;
		justify-content: center;
}

/* Card */
.modal-card {
		background: var(--card-bg);
		border-radius: 16px;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
		animation: scaleIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes scaleIn {
		from { opacity: 0; transform: scale(0.9); }
		to { opacity: 1; transform: scale(1); }
}

.media-box {
		position: relative;
		width: 100%;
		padding-top: 56.25%; /* 16:9 */
		background: #111;
}

.media-box iframe,
.media-box img {
		position: absolute;
		top: 0; left: 0;
		width: 100%; height: 100%;
		object-fit: cover;
		border: none;
}

.image-link-wrapper {
		display: block;
		width: 100%;
		height: 100%;
		cursor: pointer;
}

.image-link-wrapper::after {
		content: '�󼼺���';
		position: absolute;
		top: 50%; left: 50%;
		transform: translate(-50%, -50%);
		background: rgba(0,0,0,0.8);
		color: white;
		padding: 10px 20px;
		border-radius: 30px;
		font-size: 12px;
		letter-spacing: 1px;
		opacity: 0;
		transition: opacity 0.3s;
}

.image-link-wrapper:hover::after {
		opacity: 1;
}

/* Footer */
.card-footer {
		padding: 16px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #fafafa;
		border-top: 1px solid #eee;
}

.btn-check {
		font-size: 13px;
		color: var(--text-muted);
		cursor: pointer;
		background: none;
		border: none;
		display: flex;
		align-items: center;
		gap: 6px;
}

.btn-check:hover { color: #000; }

.btn-close {
		padding: 8px 16px;
		background: #1f2937;
		color: white;
		border: none;
		border-radius: 8px;
		font-size: 13px;
		font-weight: 500;
		cursor: pointer;
}

.btn-close:hover { background: #374151; }

/* Demo Background UI */
.main-ui {
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		color: #333;
}