/* 기본 설정 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
	font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
	background-color: #000;
	color: #fff;
	line-height: 1.2;
	overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}





.wrapper {max-width:1670px; margin:0 auto;}
header .wrapper {display:flex; justify-content: space-between; align-items: center;}
header {padding:30px 0; background-color: #000; position:sticky; top: 0; z-index: 999;}
header nav ul {display: flex; list-style: none; gap: 40px;}
header nav ul li {font-size:20px;}
header .language {width:60px; color:#fff; position:relative;}
header .language ul {position:relative; display:flex; gap:0px;}
header .language ul li {list-style:none; padding:0 10px; opacity:0.5;}
header .language ul li.active {opacity:1;}
header .language ul li:first-child {border-right:1px solid #fff;}
header .language ul li a {display:flex; gap:4px; align-items:center; font-size:13px;}

#main {padding:0; position:relative;}
#main .vimeo-wrapper {
	position: relative;
	width: 100%;
	padding-top: 56.25%; /* 16:9 비율 유지 (9/16 = 0.5625) */
	overflow: hidden;
}
#main .vimeo-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
#main h2 {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);}
#main h2 img {width:100%;}
#about .buttons {margin-top:60px;
  display: flex;
  justify-content: center;
  gap: 20px;
}
#about .buttons button {line-height:120px; width:284px; background:linear-gradient(45deg, #e461fc, #3e9dfa); border:none; font-size:20px; border-radius:10px; padding:1px;}
#about .buttons button span {background:#000; display:block; border-radius:10px;}
#about .buttons button span font {background: linear-gradient(90deg, #e461fc, #3e9dfa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight:bold;}


/* Vision */
#vision .vision-icons {display: flex; justify-content: center; gap: 30px; margin-top:65px;}
#vision .vision-icons div {background:url('/assets/images/vision_button_box.png') 50% 50% no-repeat; width:301px; height:285px; text-align: center;}
#vision .vision-icons div span {width:125px; height:125px; display:block; margin:0 auto; line-height:125px; display: flex; justify-content: center; align-items: center; margin-top:50px;}
#vision .vision-icons div span img {max-width:100%; max-height:100%;}
#vision .vision-icons div p {font-size:30px; font-weight:700; margin-top:15px;}


#solution .solution-box {max-width:1670px; position:relative; background:url('/assets/images/solution_background.png') 50% 50% repeat-x; width:100%; border:1px solid rgba(255,255,255,0.1); border-radius:30px; background-size:contain; margin:150px auto 65px; padding:100px 20px 65px;}
#solution .solution-box h3 {font-size:56px; margin-bottom:10px;}
#solution .solution-box span {font-size:28px; opacity:0.6; margin-bottom:20px; display:block;}
#solution .solution-box p {font-size:23px; line-height:40px; display:block;}
#solution .solution-box a {background:url('/assets/images/solution_button_box.png') 50% 50% no-repeat; width:396px; height:96px; line-height:96px; display: block; text-align: center; margin-top: 20px; color: #fff; font-weight: bold; font-size:32px; text-align:center; margin:40px auto 0;}
#solution .solution-box span.icon {position:absolute; opacity:1; top:-53px; left:50%; margin-left:-53px;}

/* Business Area */
#business .business-cards {display: flex; flex-wrap: wrap; gap: 20px; justify-content: center;}
#business .business-cards .card {background: #1c1c1c; padding: 30px; width: 30%; text-align: center; border-radius: 30px; padding:60px 50px; text-align:left;}
#business .business-cards .card span {height:125px; display:block; line-height:125px; display: flex; justify-content: start; align-items: center;}
#business .business-cards .card h3 {font-size:44px; text-align:left; height:92px; display: flex; align-items: center;}
#business .business-cards .card ul {list-style:none; text-align:left; display:flex; gap:30px; margin-top:40px; flex-direction: column; font-size:22px;}
#business .business-cards .card ul li {padding-left:50px; position:relative;}
#business .business-cards .card ul li:after {content:''; width:28px; height:28px; position:absolute; top:50%; margin-top:-14px; left:0; background:url('/assets/images/business_list_icon.png') 50% 50% no-repeat; }
#business .business-cards .card .line {background:linear-gradient(90deg, #6f00ff, #00dbde); width:100%; height:1px;}


#why .vimeo-wrapper {
	position: relative;
	width: 100%;
	padding-top: 56.25%; /* 16:9 비율 유지 (9/16 = 0.5625) */
	overflow: hidden;
}
#why .vimeo-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
/* Why Southpole */
#why .why-content {
  display:none;
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

#ceo .logo {width:225px; margin:0 auto;}
#ceo .logo img {width:100%;}
#ceo .ceo-box {max-width:1670px; background:url('/assets/images/ceo_backgroud.png') 50% 50% repeat-x; border:1px solid rgba(255,255,255,0.1); background-size:100%; width:100%; border-radius:30px; height:740px; margin:65px auto 0; overflow:hidden; display:flex; padding:110px 100px; justify-content: space-between;}
#ceo .ceo-box .ceo-info p {font-size:24px; text-align:left; line-height:40px;}
#ceo .ceo-box .ceo-awards {display:flex; gap:40px; margin-top:60px;}
#ceo .ceo-image h3 {font-size:40px; text-align:left; margin-top:30px; margin-bottom:0;}
#ceo .ceo-image img {width:100%;}
#ceo .ceo-image span {text-align:left; margin-top:30px; font-size:26px; color:#9460ff; display:block;}
/* Section 공통 */
section {text-align:center; padding:100px 0;}
section h2 {font-size:76px; margin-bottom:65px; font-weight:600;}
section h3 {font-size:48px; margin-bottom:65px; font-weight:400;}
section p {font-size:23px; line-height:30px;}






#contact .contact_box {display:flex; gap:100px;}
#contact .contact_box .contact_form {width:50%;}






/* Contact */
#contact form {
  display: flex;
  flex-direction: column;
  gap: 50px;
  max-width: 500px;
  margin: 0 auto;
}
#contact form span {display:block; text-align:left; margin-bottom:15px; font-size:30px;}
#contact input,
#contact textarea {
  padding: 15px;
  border: none;
  border-radius: 4px;
  background: #1a1a1a;
  color: white;
  width:100%;
  font-size:16px;
}

#contact form button {width:150px; line-height:36px; font-weight:700;}

#contact .info {
  margin-top: 40px;
  text-align: left;
}
#contact .info .image {margin-bottom:30px; display:block;}
#contact .info h3 {margin-bottom:30px;}
#contact .info strong {font-size: 23px; line-height: 30px; margin-bottom:30px; display:block;}

/* Footer */
footer {
  background: #000;
  padding: 30px 0;
  text-align: center;
  font-size: 14px;
  color:#bfbfc2;
}
footer .footer-content {display:flex; justify-content: space-between; text-align:left; color:#bfbfc2;}
footer .footer-content h2 {font-size:27px; color:#fff; text-align:left;}
footer .footer-content .logo strong {display:block; width:150px; margin-bottom:10px;}
footer .footer-content .logo strong img {width:100%;}
footer .footer-content ul {list-style:none;}
footer .footer-content .contact ul {display:flex; gap:16px; flex-direction: column; margin-top:30px;}
footer .footer-content .contact ul li {padding-left:30px; position:relative;}
footer .footer-content .contact ul li span {position:absolute; top:50%; left:0; transform:translate(0, -50%);}

footer .footer-content .sns ul {display:flex; gap:5px; justify-content: flex-end; margin-top:30px;}

footer .footer-link {display:flex; justify-content: space-between; text-align:left; color:#bfbfc2; margin-top:90px;}
footer .footer-link a {color:#bfbfc2;}
footer .footer-link .footer-link-wrap {display:flex; gap:20px;}


@media (max-width: 1280px) {
	.wrapper {width:100%;}
	header {padding:20px;}
	header .logo img {width:130px;}
	header nav {display:none;}
	footer {padding:0 20px 50px;}
	footer .footer-content {flex-direction: column; gap:40px;}
	footer .footer-content .sns ul {justify-content: flex-start;}
	
	footer .footer-link {flex-direction: column; gap:30px;}
	
	#main h2 {width:80%;}
	
	section {text-align:center; padding:50px 20px;}
	section h2 {font-size:40px; margin-bottom:35px;}
	section h3 {font-size:20px; margin-bottom:35px; font-weight:500;}
	section p {font-size:16px; line-height:20px;}
	
	#about .buttons {flex-direction: column; align-items: center;}
	
	#about .buttons button {font-size:16px; line-height:90px;}
	
	#vision .vision-icons {flex-direction: column; align-items: center;}
	
	#business .business-cards {flex-direction: column; align-items: center;}
	#business .business-cards .card {width:100%;}
	
	#ceo .ceo-box {flex-direction: column; flex-direction:column-reverse; height:auto; gap:30px; padding:50px 30px;	}
	#ceo .ceo-box .ceo-info p {font-size:16px; line-height:24px;}
	#ceo .ceo-image h3 {text-align:center; font-size:30px; margin-top:15px;	}
	#ceo .ceo-image span {text-align:center; margin-top:15px; font-size:20px;}
	
	#business .business-cards .card h3 {font-size:30px;}
	#business .business-cards .card ul li {font-size:16px;}
	
	
	#solution .solution-box h3 {font-size:30px;}
	#solution .solution-box span {font-size:20px;}
	#solution .solution-box p {font-size:16px; line-height:24px;}
	
	#why .vimeo-wrapper {padding-top: 86.25%;}
	#why .vimeo-wrapper iframe {width:150%; left:-25%;}
	#contact .contact_box .contact_form {width:100%;}
	#contact form {max-width:100%;}
	#contact .contact_box {flex-direction: column;}
	
	#solution .solution-box a {background:url('/assets/images/solution_button_box.png') 50% 50% no-repeat; width:183px; height:48px; line-height:48px; background-size:100%; display: block; text-align: center; margin-top: 20px; color: #fff; font-weight: bold; font-size:16px; text-align:center; margin:40px auto 0;}

}


/* Modal Background */
#tos-modal {
	display: none;
	position: fixed;
	z-index: 1000;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0, 0, 0, 0.5);
	color:#000;
}

/* Modal Content */
.modal-content {
	background-color: #fff;
	margin: 5% auto;
	padding: 30px;
	border-radius: 10px;
	width: 90%;
	max-width: 800px;
	max-height: 80%;
	overflow-y: auto;
	box-shadow: 0 4px 8px rgba(0,0,0,0.2);
	position: relative;
	font-family: Arial, sans-serif;
	line-height: 1.6;
	text-align:left;
}

/* Close Button */
.close-btn {
	position: absolute;
	top: 15px;
	right: 20px;
	font-size: 20px;
	font-weight: bold;
	color: #888;
	cursor: pointer;
}
.close-btn:hover {
	color: #000;
}

/* Headings */
.modal-content h1 {
	font-size: 24px;
	margin-bottom: 20px;
	border-bottom: 2px solid #ddd;
	padding-bottom: 10px;
	color:#000;
}
.modal-content h2 {
	font-size: 18px;
	margin-top: 20px;
	color: #333;
}

/* Paragraphs */
.modal-content p {
	margin: 10px 0;
	color: #555;
}

/* Section Numbers */
.modal-content .section-number {
	font-weight: bold;
	display: inline-block;
	margin-right: 5px;
	color: #111;
}

/* Open Button Example */
#open-modal {
	padding: 10px 20px;
	font-size: 16px;
	cursor: pointer;
	background-color: #007BFF;
	color: #fff;
	border: none;
	border-radius: 5px;
}
#open-modal:hover {
	background-color: #0056b3;
}