@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/variable/pretendardvariable.css');

/*공통*/
.orenge{color:#e5ae58 ;}
.flex{display: flex; align-items: center;}
.flex.js{justify-content: space-between}

i.fa-triangle{color:#F20707;}
i.fa-triangle.fa-rotate-180{color:#0FA7F6;}
i.fa-hyphen{color:#e5ae58; font-weight: 600; font-size: 1.2em!important;}
.ref{font-size: 0.8em; vertical-align: middle;}
.ref i{font-size: 1em!important; vertical-align: middle; line-height: 1.2em;}

a{cursor:pointer}

/* 공통: 섹션 헤더 / 아이브로우 */
.sec_header{max-width: 640px; margin-bottom: 44px;}
.sec_header h3{font-size: 2.4em;font-weight: 800;color: #0f172a;margin: 0;}
.sec_header p{color: #475569; font-size: 1.23em; line-height: 1.6em; margin-top: 12px;}
.sec_header.light h3{color: #fff;}
.sec_header.light p{color: #cbd5e1;}
.eyebrow{display: inline-block; background: rgba(11,42,92,0.06); color: #0b2a5c; font-size: 0.92em; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 6px 12px; border-radius: 4px; margin-bottom: 12px;}
.eyebrow.on_dark{background: rgba(255,255,255,0.12); color: #f59e0b;}

/* 히어로 비주얼 (라운드 박스, .inr 90%) */
#idx_visual{position: relative; width: 100%; padding: 40px 0; background: #fff;}
#idx_visual .heroSwiper{width: 100%; margin: 0 auto; border-radius: 24px; overflow: hidden; position: relative; animation: idx_hero_reveal 0.9s ease-out forwards;}
#idx_visual .swiper-slide{position: relative; height: 640px; background-position: center; background-size: cover; display: flex; align-items: center;}
#idx_visual .visual_dim{position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,27,61,0.82) 0%, rgba(6,27,61,0.55) 55%, rgba(6,27,61,0.35) 100%);}
@keyframes idx_hero_reveal{
	from{width: 0%;}
	to{width: 100%;}
}
#idx_visual .visual_txt{position: relative; z-index: 2; max-width: 640px; color: #fff; padding: 0 80px;}
#idx_visual .badge{display: inline-flex; align-items: center; gap: 4px; background: rgba(245,158,11,0.13); border: 1px solid #f59e0b; color: #f59e0b; font-size: 0.9em; font-weight: 700; padding: 6px 12px; border-radius: 4px; margin-bottom: 20px;}
#idx_visual h2{font-size: 3.4em; font-weight: 800; line-height: 1.25em; margin: 0 0 20px; color: #fff;}
#idx_visual .visual_txt > p{font-size: 1.35em; color: #94a3b8; margin-bottom: 32px;}
#idx_visual .visual_btns{display: flex; gap: 16px;}
#idx_visual .control_wrap{position: absolute; left: 80px; bottom: 80px; z-index: 3; display: flex; align-items: center; gap: 12px; /*padding: 10px 14px; border-radius: 999px; background: rgba(6,27,61,0.4); border: 1px solid rgba(255,255,255,0.2); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);*/}
#idx_visual .control_pause{display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.1); border-radius: 14px; color: #fff; font-size: 0.8em; cursor: pointer; padding: 0;}
#idx_visual .swiper-pagination{position: static; display: flex; align-items: center; gap: 8px; width: auto;}
#idx_visual .swiper-pagination-bullet{background: rgba(255,255,255,0.4); opacity: 1; width: 24px; height: 4px; border-radius: 2px; margin: 0 !important; transition: all 0.2s ease;}
#idx_visual .swiper-pagination-bullet-active{background: #fff; width: 56px;}

.btn,
a.btn{display: inline-flex; align-items: center; padding: 16px 28px; border-radius: 40px; font-weight: 700; font-size: 1em; text-decoration: none;}
.btn_primary,
a.btn_primary{background: #f59e0b; color: #061b3d;}
.btn_outline,
a.btn_outline{background: transparent; color: #fff; border: 1px solid #ffffff6a;}

/* 회사소개 */
.idx_intro{background: #fff; padding: 100px 0;}
.intro_grid{display: flex; align-items: center; gap: 80px; margin-bottom: 60px;}
.intro_text{flex: 1; min-width: 0;}
.intro_text h3{font-size: 2.4em;font-weight: 800;color: #0f172a;margin: 10px 0 20px;}
.intro_text .lead{color: #475569; font-size: 1.23em; margin-bottom: 16px;}
.intro_text p{color: #475569; font-size: 1.23em; line-height: 1.8em; margin-bottom: 16px;}
.intro_media{flex: 1; min-width: 0; position: relative; height: 360px; border-radius: 24px; overflow: hidden; background-position: center; background-size: cover;
	display: flex; flex-direction: column; justify-content: space-between; padding: 40px; box-sizing: border-box; color: #fff;}
.intro_media .media_dim{position: absolute; inset: 0; background: rgba(10,41,92,0.7);}
.intro_media .media_top{position: relative; z-index: 2; display: flex; flex-direction: column; gap: 8px;}
.intro_media .media_label{color: #f59e0b;font-size: 0.95em;font-weight: 700;letter-spacing: 1px;text-transform: uppercase;}
.intro_media strong{display: block;font-size: 2.2em;font-weight: 800;line-height: 1.3em;margin: 0;}
.intro_media .media_desc{position: relative; z-index: 2; max-width: 280px; color: #94a3b8; font-size: 1.08em; line-height: 1.6em; margin: 0;}

.stats_row{display: flex; gap: 32px; background: #0b2a5c; border-radius: 24px; padding: 40px;}
.stats_row .stat{flex: 1; min-width: 0;}
.stats_row .stat strong{display: block;color: #f59e0b;font-size: 2.2em;font-weight: 800;margin-bottom: 8px;line-height: 1em;}
.stats_row .stat span{display: block;color: #fff;font-size: 1.4em;font-weight: 700;margin-bottom: 8px;}
.stats_row .stat p{color: #94a3b8; font-size: 0.95em; line-height: 1.5em; margin: 0;}

/* 마퀴 */
.idx_marquee{background: #fff; height: 140px; display: flex; align-items: center; overflow: hidden; white-space: nowrap;}
.marquee_track{display: inline-flex; animation: idx_marquee_scroll 26s linear infinite; font-family: 'Pretendard', sans-serif;}
.marquee_track span{font-size: 5.2em;font-weight: 800;color: #e2e8f0;white-space: nowrap;}
@keyframes idx_marquee_scroll{
	0%{transform: translateX(0);}
	100%{transform: translateX(-50%);}
}

/* 제품 안내 */
.idx_products{background: #f8fafc; padding: 100px 0;}
.product_grid{display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;}
.product_card{display: block; background: #fff; border: 1px solid #e2e8f0; border-radius: 24px; overflow: hidden; text-decoration: none; color: inherit; transition: box-shadow 0.2s ease, transform 0.2s ease;}
.product_card:hover{box-shadow: 0 12px 28px rgba(15,23,42,0.08); transform: translateY(-4px);}
.product_card .card_img{height: 220px; overflow: hidden;}
.product_card .card_img img{width: 100%; height: 100%; object-fit: cover; display: block;}
.product_card .card_body{padding: 24px;}
.product_card .tag{display: block; color: #2563eb; font-size: 0.9em; font-weight: 700; text-transform: uppercase; margin-bottom: 4px;}
.product_card h4{font-size: 1.5em;font-weight: 800;color: #0f172a;margin: 0 0 16px;}
.product_card p{color: #475569;font-size: 1em;line-height: 1.5em;margin: 0 0 16px;}
.product_card .spec{display: inline-block; background: #f8fafc; border: 1px solid #e2e8f0; color: #475569; font-size: 0.82em; font-weight: 600; padding: 6px 10px; border-radius: 24px;}

/* 왜 현대슬링산업인가 */
.idx_strengths{position: relative; background-position: center; background-size: cover; background-attachment: fixed; padding: 100px 0;}
.idx_strengths .strengths_dim{position: absolute; inset: 0; background: rgba(11,26,46,0.78);}
.idx_strengths .inr{position: relative; z-index: 2;}
.strength_grid{display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;}
.strength_card{background: #fff; border-radius: 24px; padding: 32px;}
.strength_card .icon{display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 24px; background: #fef3c7; color: #f59e0b; font-size: 1.3em; margin-bottom: 20px;}
.strength_card h4{font-size: 1.4em; font-weight: 800; color: #0f172a; margin: 0 0 8px;}
.strength_card p{color: #475569; font-size: 0.95em; line-height: 1.5em; margin: 0;}

/* 자주 묻는 질문 */
.idx_faq{background: #0f172a; padding: 100px 0; border-bottom: 1px solid #ffffff4a;}
.faq_layout{display: flex; gap: 80px; align-items: flex-start;}
.faq_head{flex: 0 0 320px;}
.faq_call{display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 24px; background: #0b2a5c; color: #fff; border-radius: 40px; font-weight: 700; font-size: 0.95em; text-decoration: none;}
.faq_call:hover{background: #f59e0b; color: #061b3d;}
.faq_list{flex: 1; min-width: 0;}
.faq_item{background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 16px; margin-bottom: 12px; overflow: hidden; transition: border-color 0.2s ease;}
.faq_item:last-child{margin-bottom: 0;}
.faq_item.active{border-color: #0b2a5c;}
.faq_q button{display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 22px 26px; border: 0; background: transparent; font: inherit; font-size: 1.1em; font-weight: 700; color: #0f172a; text-align: left; cursor: pointer;}
.faq_q i{flex-shrink: 0; color: #0b2a5c; transition: transform 0.3s ease;}
.faq_item.active .faq_q i{transform: rotate(180deg); color: #f59e0b;}
.faq_a{display: none; padding: 0 26px 24px;}
.faq_a p{color: #475569; font-size: 1em; line-height: 1.7em; margin: 0;}
.faq_a a{color: #0b2a5c; text-decoration: underline; font-weight: 600;}

/* 문의하기 */
.idx_contact{background: #0f172a; padding: 80px 0;}
.idx_contact .inr{display: flex; align-items: flex-start; justify-content: space-between; gap: 80px;}
.contact_left{flex: 1; min-width: 0; max-width: 500px;}
.contact_left h3{font-size: 2.2em; font-weight: 800; color: #fff; margin: 0 0 12px;}
.contact_left > p{color: #94a3b8; font-size: 1.1em; line-height: 1.6em; margin: 0 0 32px;}
.tel_block span{display: block; color: #94a3b8; font-size: 0.95em; margin-bottom: 8px;}
.tel_block strong{display: block; color: #f59e0b; font-size: 2.2em; font-weight: 800; margin-bottom: 8px;}
.tel_block em{display: block; color: #fff; font-size: 1.35em; font-weight: 700; font-style: normal;}

.contact_right{flex: 1; min-width: 0; max-width: 560px; display: flex; flex-direction: column; gap: 16px;}
.info_item{display: flex; align-items: center; gap: 16px; background: rgba(255,255,255,0.05); border-radius: 24px; padding: 20px;}
.info_item i{color: #f59e0b; font-size: 1.3em; width: 20px; text-align: center;}
.info_item span{display: block; color: #94a3b8; font-size: 0.9em; margin-bottom: 4px;}
.info_item strong{display: block; color: #fff; font-size: 1.05em; font-weight: 600;}

@media (max-width: 1279px) {
	#idx_visual .swiper-slide{height: 620px;}
	#idx_visual h2{font-size: 2.6em;}
	#idx_visual .visual_txt{padding: 0 40px;}
	#idx_visual .control_wrap{left: 40px;}
	.intro_grid{flex-direction: column;}
	.intro_media{width: 100%;}
	.stats_row{flex-direction: column; gap: 24px;}
	.product_grid{grid-template-columns: repeat(2, 1fr);}
	.strength_grid{grid-template-columns: repeat(2, 1fr);}
	.idx_contact .inr{flex-direction: column; gap: 40px;}
	.contact_left, .contact_right{max-width: 100%;}
	.faq_layout{flex-direction: column; gap: 32px;}
	.faq_head{flex: 0 0 auto; width: 100%;}
}
@media screen and (max-width: 992px) {
	#idx_visual .swiper-slide{height: 560px;}
	#idx_visual h2{font-size: 2.1em;}
	.marquee_track span{font-size: 3em;}
}
@media (max-width: 767px) {
	.idx_intro, .idx_products, .idx_strengths, .idx_faq{padding: 60px 0;}
	.idx_strengths{background-attachment: scroll;}
	.idx_contact{padding: 60px 0;}
	.faq_q button{padding: 18px 20px; font-size: 1em;}
	.faq_a{padding: 0 20px 20px;}
	#idx_visual .swiper-slide{height: 500px;}
	#idx_visual h2{font-size: 1.7em;}
	#idx_visual .visual_txt{padding: 0 24px;}
	#idx_visual .control_wrap{left: 24px;}
	#idx_visual .visual_txt > p{font-size: 1.1em;}
	.product_grid{grid-template-columns: 1fr;}
	.strength_grid{grid-template-columns: 1fr;}
	.marquee_track span{font-size: 2em;}
}
@media (max-width: 480px) {
	#idx_visual .visual_btns{flex-direction: column; align-items: flex-start;}
	.btn{width: 100%; justify-content: center; box-sizing: border-box;}
	#idx_visual .control_wrap{bottom: 24px;}
}