/* =========================================
   RESPONSIVE CSS - 3 BREAKPOINTS SYSTEM
   ========================================= */
/* 공통 progress-bars 스타일 */
.progress-bars { width:clamp(30%, 30vw, 300px); max-width:300px; }
/**************************** 데스크탑 (1401px ~) *************************** */ 
@media (min-width: 1401px) {
  .main-visual-text { width: 100%; max-width: 1400px; padding: 0 50px; margin: 0 auto; }
  .problem-infographic-title2 {opacity:1; width:100%; transform: translateX(0px);}
}
/**************************** 모바일 ( ~ 1400px) ****************************/
@media (max-width: 1400px) {
  html, body { min-width: 1024px; }
  .top-area .nav-menu .nav-item { display: none; }
  .top-area { text-align: center; width: 100%; min-width: 100%; }
  .nav-menu { width: calc(100% - 40px); }
  .main-visual-text { width: calc(100% - 10%); }
  .main-partner-header { width: 100%; } 
  .main-visual-area > .main-visual-content { width: calc(100% - 40px); max-width: 1200px; margin: 0 auto; }
  .main-visual-images { width: 50%; }
  .main-visual-services { width: 50%; }
  .main-visual-services .service { width: calc(75% - 10px); }
  .main-visual-images .pos1 { width: calc(100% - 50px); height: calc(75% - 0px); }
  .main-visual-images .pos2 { width: 200px; height: 200px; top: 50px; left: calc(100% - 100px); }
  .main-visual-images .pos3 { top: 400px; left: 400px; }
  .section-title-grp { width: 100%; margin: 20px 0 20px 0; }
  .main-tech-item { padding: 10px 10px 10px 20px; font-size: 18px; border: solid 1px #eee; }
  .main-tech-item .main-tech-icon { width: 26px; height: 26px; }
  .main-tech-item .main-tech-main { font-size: 18px; }
  .main-tech-item .main-tech-sub { font-size: 14px; }
  .main-tech-item .main-tech-more { font-size: 12px; font-weight: 700; line-height: 1.3rem; margin-bottom: 0px; }
  .main-tech-item .tech-more { font-size: 12px; font-weight: 800; }
  .service { height: 160px; line-height: 1.2rem; }
  .service-title { font-size: 1.1rem; }
  .service-btn {font-size:12px;}
  .service-desc { font-size: 14px; margin: 0; }
  .mlops-section, .tech-section, .performance-section, .partner-section, .contact-section { border: solid 0px #f30; padding: 0 50px; margin: 0 auto; min-height:100vh; height:auto;}
  .main-performance-item { padding: 20px; height: 220px; }
  .main-performance-item .main-performance-label { font-size: 14px; }
  .main-performance-item .main-performance-desc { font-size: 14px; font-weight: 500; line-height: 1.3rem; margin-bottom: 0px; }
  .main-performance-item .main-performance-more { font-size: 12px; font-weight: 800; }
  .main-partner-slogan { font-size: 1.5rem; top: 120px; }
  .main-partner-logo-box { width: 200px; height: 160px; }
  .main-partner-inner { font-size: 14px; top: 10px; }
  .main-partner-logo-name { font-size: 14px; }
  .main-partner-logo-box img { width: 100px; }
  .main-contact-map-btn, .main-download-btn { font-size: 14px; }
  .footer-inner { width: 100%; max-width: 1400px; display: flex; flex-direction: column; padding: 10px 50px; font-size: 13px; }
  .footer-logo { width: 80px; }
  .footer-bottom { width: 100%; max-width: 1400px; padding: 20px 50px; font-size: 11px; color:#999 !important; }
  .footer-nav { width: 100%; max-width: 1400px; padding: 0; gap: 30px; }
  .footer-nav li { font-size: 12px; font-weight: 800; }
  .footer-info { font-size: 12px; }
  .top-btn { bottom: 80px; }

  .headarea-group .headarea-tab-text {font-size:0.8rem;}
  .contents .wrap {max-width:1400px; width:100%; padding:0 20px;}
/* ----- section ----- */
  section {padding:0;}
  .vision-section {padding:20px;}

  .headarea-tab-dropdown {font-size:0.8rem;}
  .avn-phone-widget-section {padding:50px;} 

  /* Contact Guide Responsive - Desktop */
  .recruitment-main-box {display:flex; flex-direction:row; gap:40px; padding:40px; align-items:flex-start;}
  .recruitment-image-center {flex:0 0 250px; text-align:center;}
  .recruitment-man-img {max-width:220px; width:100%; height:auto;}
  .headarea-content-text-block {flex:1; padding:0;}
  .headarea-content-heading {font-size:1.6rem; margin-bottom:25px;}
  .headarea-content-paragraph {font-size:1.1rem; line-height:1.6rem; margin-bottom:30px;}
  .recruitment-contact {background:#f8f9fa; padding:25px; border-radius:10px; margin-bottom:30px;}
  .recruitment-contact h4 {font-size:1.2rem; margin-bottom:15px;}
  .recruitment-contact p {font-size:1.1rem; margin-bottom:10px;}
  .contact-note {font-size:1rem; color:#666;}
  .application-download {text-align:left;}
  .download-link {display:inline-block; background:#007bff; color:white; padding:18px 30px; border-radius:5px; text-decoration:none; font-size:1.1rem; transition:background-color 0.3s;}
  .download-link:hover {background:#0056b3;}

  /* Contact Talent Responsive - Desktop */
  .talent-recruitment-section {padding:40px 0;}
  .talent-main-container {max-width:1200px; margin:0 auto; padding:0 20px;}
  .recruitment-cards-grid {display:grid; grid-template-columns:repeat(3, 1fr); gap:30px; margin-bottom:50px;}
  .recruitment-card {background:#fff; border-radius:15px; padding:30px; box-shadow:0 4px 20px rgba(0,0,0,0.1); transition:transform 0.3s, box-shadow 0.3s;}
  .recruitment-card:hover {transform:translateY(-5px); box-shadow:0 8px 30px rgba(0,0,0,0.15);}
  .card-icon {text-align:center; margin-bottom:20px;}
  .card-icon img {width:60px; height:60px;}
  .card-content h3 {font-size:1.4rem; margin-bottom:15px; color:#333;}
  .card-content p {font-size:1rem; line-height:1.6rem; margin-bottom:20px; color:#666;}
  .position-list {list-style:none; padding:0;}
  .position-list li {padding:8px 0; border-bottom:1px solid #f0f0f0; font-size:0.95rem; color:#555;}
  .position-list li:last-child {border-bottom:none;}
  
  .application-section {display:grid; grid-template-columns:2fr 1fr; gap:40px; margin-top:50px;}
  .application-form-container {background:#fff; border-radius:15px; padding:40px; box-shadow:0 4px 20px rgba(0,0,0,0.1);}
  .application-form-container h3 {font-size:1.6rem; margin-bottom:10px; color:#333;}
  .form-description {font-size:1rem; color:#666; margin-bottom:30px; line-height:1.5rem;}
  .form-row {display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px;}
  .form-group {display:flex; flex-direction:column;}
  .form-group label {font-size:1rem; font-weight:600; margin-bottom:8px; color:#333;}
  .form-group input, .form-group select, .form-group textarea {padding:12px 15px; border:2px solid #e0e0e0; border-radius:8px; font-size:1rem; transition:border-color 0.3s;}
  .form-group input:focus, .form-group select:focus, .form-group textarea:focus {outline:none; border-color:#007bff;}
  .file-note {font-size:0.85rem; color:#666; margin-top:5px;}
  .form-submit {text-align:center; margin-top:30px;}
  .submit-btn {background:#007bff; color:white; padding:15px 40px; border:none; border-radius:8px; font-size:1.1rem; font-weight:600; cursor:pointer; transition:background-color 0.3s;}
  .submit-btn:hover {background:#0056b3;}
  
  .contact-info-box {background:#f8f9fa; border-radius:15px; padding:30px; height:fit-content;}
  .contact-info-box h4 {font-size:1.3rem; margin-bottom:20px; color:#333;}
  .contact-details p {font-size:1rem; margin-bottom:10px; color:#555;}
  .download-section {margin-top:25px; text-align:center;}
  .download-section .download-link {display:inline-block; background:#28a745; color:white; padding:12px 25px; border-radius:8px; text-decoration:none; font-size:1rem; transition:background-color 0.3s;}
  .download-section .download-link:hover {background:#218838;}

}

@media (max-width: 1200px) {
  .kepco-safety-right {padding-left:100px;}
  .mlops-section, .tech-section, .performance-section, .partner-section, .contact-section {padding: 0 30px;}
}


/**************************** 모바일 (~ 1024px) ****************************/
@media (max-width: 1024px) {
  html, body { min-width: 480px; }
  .nav-menu { width: calc(100% - 10px); padding: 0 10px; } 
  .main-image { height: 100vh; }
  .section-title {font-size:2.5rem;}

  .main-visual-text { font-size: 2rem !important; }
  .main-visual-title { font-size: 2rem; }
  .main-visual-title .eng-slogan { font-size: 1.5rem !important; }
  .main-bg[data-mobile-video="true"] { content: url("movie/main-mov-h.mp4"); }
  .main-visual-area { padding: 0px; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; min-height: 100vh; }
  .multimodal-mlops-container { width:100%; padding:0; padding-top:100px; margin-bottom:0; }
  .main-visual-content { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40px; max-width: 100%; width: 100%; text-align: center; }
  .main-visual-area > .main-visual-content { width:450px; height:400px; }
  .main-visual-images .pos1 { width: 300px; height:300px; left:0px; top:50px; }
  .main-visual-images .pos2 { width: 200px; height: 200px; top: 0px; left: calc(50% + 100px); }
  .main-visual-images .pos3 { width:100px; height:100px; left: calc(50% + 180px); top:250px; }
  .main-visual-services { width:100%; padding:0; }
  .main-visual-services .service { width:100%; height:100px; border-radius:20px; padding:10px 15px; gap:0; }
  .main-visual-services .service-num { font-size:1rem; line-height:1.2rem; }
  .main-visual-services .service-title { font-size:1.2rem; line-height:1.2rem; }
  .main-visual-services .service-desc { font-size:12px; line-height:1rem; }
  .service-btn { position: absolute; bottom:10%; right:10px; border-radius:5px; padding:5px; font-size:14px; width:100px; height:80%; }
  .main-tech-info { width:100%; padding-right:20px; }
  .main-tech-item .main-tech-icon { width:30px; height:30px; }
  .main-tech-item .main-tech-main { font-size:14px; } 
  .main-tech-item .main-tech-sub { font-size:12px; line-height:1.2rem; }
  .main-tech-item .main-tech-more { font-size:10px; font-weight:700; line-height:1rem; margin-bottom:0px; padding:2px 18px; }
  .section-title-grp { padding-top:0; } 
  .main-performance-list { gap:10px; justify-content: space-between; } 
  .main-performance-list .main-performance-item { width:calc(50% - 5px); height:auto; padding:10px; }
  .main-performance-item .main-performance-label { font-size:12px; }
  .main-performance-item .main-performance-more { font-size:10px; font-weight:700; line-height:1rem; margin-bottom:0px; padding:2px 18px; }
  .main-performance-item .main-performance-desc { font-size:12px; height:35px; line-height:1rem; }
  .main-partner-logos { justify-content: space-between; gap:10px; margin-top:calc(50% - 150px); }
  .main-partner-logo-box { width:120px; height:100px; padding:10px; }
  .main-partner-inner { font-size:12px; top:0; left:10px; color:#999; }
  .main-partner-logo-box img { width:100px; margin-top:10px; }
  .main-partner-logo-name { font-size:12px; }
  .main-partner-slogan { font-size:1.2rem; top:100px; }
  .main-contact-map-btn, .main-download-btn { font-size:12px; }
  .main-partner-logo-name { font-size:12px; bottom:5px; }
  .main-partner-logos-row , .main-partner-logos-row-reverse { gap:10px; }
  .main-partner-slogan { top:130px; }
  .main-contact-downloads { grid-template-columns:1fr; gap:10px; margin-bottom:30px; }
  .main-contact-map-btn { height:40px; margin-top:0; }
  .main-download-btn { height:40px; margin-top:0; }
  .main-download-btn img { width:12px; }
  .footer-inner { width:100%; max-width:100%; padding:10px 20px; font-size:12px; }
  .footer-logo { width:60px; }
  
  .full-menu-left { max-width:30%; padding:30px 30px 30px 30px; display:flex; flex-direction:column; justify-content:flex-start; align-items:flex-start; }
  .full-menu-inquire-btn {padding:10px 20px; font-size:14px; width:50%; min-width:100px; margin-top:20px;}
  .full-menu-right {max-width:70%; padding:100px 30px 30px 30px; display:flex; flex-direction:column; justify-content:flex-start; align-items:flex-start;  font-size:0.8rem;}
  .full-menu-right .menu-items {margin-bottom:10px;}
  .full-menu-right .menu-items a {padding:0; line-height:1rem;}
  .full-menu-right .menu-title {font-size:1rem; line-height:1.2rem; margin-bottom:10px;}
  .headarea-content-block {align-items:flex-start; padding:0 20px;}
  .headarea-bottom-nav {margin-top:100px;}
  .headarea-nav-button {padding:20px;}
  .headarea-nav-button .nav-image-male {width:150px; height:150px; top:-68px;}
  .headarea-nav-button .nav-image-female {width:150px; height:150px; top:-68px;}
  .system-table-caption {font-size:0.6rem;}
  .category-item-box {width:100%; padding:10px;}
  .center-circle {width:180px; height:180px;}
  .headarea-tab-content {padding:0 10px;}

  .kepco-header-desc {font-size:0.8rem;}
  .mlops-section, .tech-section, .performance-section, .partner-section, .contact-section {padding: 0 20px;}



}

@media (max-width: 900px) {
  .headarea-bottom-nav {font-size:0.8rem;}
  .headarea-nav-button {padding:10px;}
  .headarea-nav-button .nav-image-male {width:125px; height:125px; top:-78px; right:150px;}
  .headarea-nav-button .nav-image-female {width:125px; height:125px; top:-78px; left:110px;}
  .headarea-nav-button img {width:26px; height:26px;}
  .headarea-content-block {font-size:0.8rem; gap:30px;}
  .headarea-content-block .headarea-content-image {width:30%;}
  .headarea-content-heading-center {font-size:1.2rem;}
  .headarea-ceo-section {font-size:1.2rem; padding:20px 0;}
  .business-detail-col {padding:25px; border-radius:30px;}
  .business-detail-icons span {font-size:0.8rem;}
  .business-project {border-radius:10px; padding:10px; font-size:0.8rem;}
  .business-projects {gap:10px;}
  .org-chart-container {overflow-x: auto;}
  .org-chart {min-width:500px; }
  .org-chart li .org-node {width:100px; min-width:120px; font-size:0.8rem;}
  .org-chart li .org-node span {padding:4px 5px;}
  .system-table-container {width:100%; overflow-x:auto;}
  .system-table {font-size:0.8rem; min-width:600px;}
  .system-table th, .system-table td {padding:5px 4px;}
  .history-year {width:100px; height:100px;}
  .partner-grid {grid-template-columns:repeat(3, 1fr); gap:10px;}
  .partner-logo-container {border-radius:0px; padding:10px;}
  .a2flex-grphic .section-title {font-size:1.2rem; margin: 50px 0 10px 0;}
  .a2flex-medical-card {padding:0px; border-radius:0px;}
  .project-content-img {padding:10px; margin-top:20px;}
  .center-circle {width:150px; height:150px;}
  .center-circle-title {margin-bottom:10px;}
  .a3-strategy-grid {gap:10px;}
  .a3-strategy-item {border-radius:5px;}
  .a3-strategy-footer {padding:20px; font-size:0.8rem;}
  .a3-strategy-header {padding:10px;}
  .platform-concept-area {font-size:1.2rem;}
  .ai-service-img-container {margin:20px 0; padding:20px; border-radius:10px;}
  .ai-robot-img-caption-container {font-size:0.8rem; line-height:0.8rem;}
  .dual-image-container {display: block;}
  .dual-image-container .dt-image {border-radius:0px;}
  .dual-image-container .dual-image-item {text-align:left;}
  .dual-image-container .dual-image-item img {width:100%;}
  .line-box {font-size:0.8rem;}
  .dual-image-container .img-round20l, .dual-image-container .img-round20r {border-radius:0;}
  .line-box .dual-image-section {margin:0; padding:0;}


}


@media (max-width: 720px) {

  .logo img {width:80%;}
  
  /* Contact Guide Responsive - Medium screens */
  .recruitment-main-box {display:flex; flex-direction:row; gap:30px; padding:30px; align-items:flex-start;}
  .recruitment-image-center {flex:0 0 200px; text-align:center;}
  .recruitment-man-img {max-width:180px; width:100%; height:auto;}
  .headarea-content-text-block {flex:1; padding:0;}
  .headarea-content-heading {font-size:1.4rem; margin-bottom:20px;}
  .headarea-content-paragraph {font-size:1rem; line-height:1.5rem; margin-bottom:25px;}
  .recruitment-contact {background:#f8f9fa; padding:20px; border-radius:10px; margin-bottom:25px;}
  .recruitment-contact h4 {font-size:1.1rem; margin-bottom:15px;}
  .recruitment-contact p {font-size:1rem; margin-bottom:8px;}
  .contact-note {font-size:0.9rem; color:#666;}
  .application-download {text-align:left;}
  .download-link {display:inline-block; background:#007bff; color:white; padding:15px 25px; border-radius:5px; text-decoration:none; font-size:1rem;}
  
  /* Contact Talent Responsive - Medium screens */
  .talent-recruitment-section {padding:30px 0;}
  .talent-main-container {padding:0 15px;}
  .recruitment-cards-grid {display:grid; grid-template-columns:repeat(2, 1fr); gap:20px; margin-bottom:40px;}
  .recruitment-card {padding:25px; border-radius:12px;}
  .card-icon img {width:50px; height:50px;}
  .card-content h3 {font-size:1.2rem; margin-bottom:12px;}
  .card-content p {font-size:0.9rem; line-height:1.5rem; margin-bottom:15px;}
  .position-list li {padding:6px 0; font-size:0.9rem;}
  
  .application-section {display:grid; grid-template-columns:1fr; gap:30px; margin-top:40px;}
  .application-form-container {padding:30px; border-radius:12px;}
  .application-form-container h3 {font-size:1.4rem; margin-bottom:8px;}
  .form-description {font-size:0.9rem; margin-bottom:25px; line-height:1.4rem;}
  .form-row {display:grid; grid-template-columns:1fr; gap:15px; margin-bottom:15px;}
  .form-group input, .form-group select, .form-group textarea {padding:10px 12px; font-size:0.9rem;}
  .submit-btn {padding:12px 35px; font-size:1rem;}
  
  .contact-info-box {padding:25px; border-radius:12px;}
  .contact-info-box h4 {font-size:1.2rem; margin-bottom:15px;}
  .contact-details p {font-size:0.9rem; margin-bottom:8px;}
  .download-section .download-link {padding:10px 20px; font-size:0.9rem;}
  
  .full-menu-content { display:flex; flex-direction:column; justify-content:flex-start; align-items:center; }
  .full-menu-left {width:100%; max-width:100%; height:20%; min-height:20%; flex:0; border-bottom:solid 1px #ddd;}
  .full-menu-logo {width:100px; margin-bottom:20px;} 
  .full-menu-right {width:100%; max-width:100%;  padding:50px 20px 20px 20px; flex:1;}
  .menu-close {top:20px; right:20px;}
  .full-menu-inquire-btn {margin-top:0;}
  .footer-bottom {font-size:11px; padding:20px; display:block; width:100%;} 
  .footer-bottom .footer-copy {display:block;}
  .footer-bottom .footer-email {display:block;}
  .footer-bottom .footer-email a {color:#999;}
  .headarea-nav-button .nav-image-male {width:100px; height:100px; top:-53px; right:150px;}
  .headarea-nav-button .nav-image-female {width:100px; height:100px; top:-53px; left:110px;}
  .headarea-nav-button img {width:20px; height:20px;}
  .company-download-row {display:block; font-size:0.8rem;}
  .company-download-row .company-download-btn {margin-bottom:5px; padding:10px 20px; height:auto; }
  .company-download-row .company-download-btn img {width:16px; height:16px;}
  .section-title-area {margin:20px auto;}
  .section-title-area .divide-sub-section {font-size:0.8rem;}
  .section-title-area .section-title {font-size:1.2rem; margin-bottom:20px;}
  .section-title-area .section-slogan-descpt {font-size:0.8rem; line-height:1.2rem;}
  .contents .wrap {padding:0 20px;}
  .headarea-group {display:none;}
  .mv-slogan-quote .font-size-special {font-size:1.5rem;}
  .mission-slogan-cards {gap:10px;}
  .mission-slogan-cards .common-card {border-radius:10px;}
  .divide-sub-section {font-size:0.8rem;}
  .vision-desc {margin-bottom:20px;}
  .contents {margin-bottom:30px; padding:0 10px;}
  .contents .wrap {padding:0 0px;}
  .mv-slogan-quote, .font-size-special{font-size:1.5rem;}
  .divide-sub-section {margin:40px 0 20px 0;}
  .vision-cards-container {gap:10px;}
  .card-trans {border-radius:10px;}
  .diver-line {height:70px;}
  .problem-infographic-item {font-size:0.8rem;}
  .problem-infographic-box-title {font-size:2rem;}
  .problem-infographic-quote {font-size:1.0rem;}
  .problem-infographic-title2 {opacity:1; width:100%; transform: translateX(0px)} 
  .process-step-box {padding:10px; min-width:120px; font-size:0.8rem;}
  .problem-solution-table {font-size:0.8rem;}
  .problem-solution-table .problem-solution-table {width:100%;}
  .problem-solution-table .table-td-icon-box {margin-left:10px;}
  .problem-solution-table .arrow-circle {width:20px; height:20px;}
  .problem-solution-table .arrow-circle img {width:10px; height:10px;}
  .problem-solution-summary-box {padding:10px 20px; font-size:0.8rem; width:250px; position:relative;}
  .problem-solution-summary-num {position:absolute; top:7px; left:10px;}
  .ip-patent-list-table {width:100%; min-width:720px; font-size:0.8rem;}
  .ip-patent-field-card {padding:10px 50px; text-align:center;}
  .ip-patent-field-num {font-size:2rem;}
  .ip-patent-field-title {font-size:1rem;}

  .history-group {margin-bottom:100px;}
  .history-year {position:relative; width:100px; height:40px; left:10%; box-shadow:0 0 0 0; border:solid 1px #999; border-radius:0; font-size:1.2rem;}
  .history-list {margin-left:0; padding-left:20px;}
  .history-image {position:relative; top:0; left:0; width:100%; height:auto;}
  .history-container::before {display:none;}
  .partner-stats-item, .partner-stats-item:first-child {min-width:180px; height:100px; padding:5px; font-size:1rem; border:solid 1px #999; border-radius:0px; box-shadow:0 0 0 0;} 
  .partner-grid {grid-template-columns:repeat(2, 1fr); gap:10px;}
  .partner-logo-container {border-radius:0px; padding:10px;}
  .data-category-grid {padding:10px}
  .category-item-box {padding:5px;}
  .overview-content {padding:0 10px; font-size:0.8rem;}

  .platform-concept-area {font-size:1.2rem;}
  .a3-strategy-grid {grid-template-columns:repeat(1, 1fr); gap:10px;}

  .ai-service-grid {grid-template-columns:repeat(2, 1fr); gap:10px;}
  .ai-service-box {padding:10px; font-size:0.8rem;}

  .section-title {font-size:1.5rem;}
  .section-slogan-desc {font-size:0.8rem;}
  .obs-solution-card {padding:10px;}

  .line-box {padding:20px;}


}


@media (max-width: 560px) {
  .footer-nav {display:flex; gap:20px; line-height:1rem; flex-direction: row; flex-wrap: wrap; justify-content: left;}

  .headarea-hero-title {font-size:2rem; top:130px}
  .headarea-hero-subtitle {font-size:0.8rem; top:180px;}
  .headarea-hero {height:300px;}

  .common-card-badge {padding:5px 10px;}
  .common-card {padding:10px;}
  .mission-slogan, .vision-diagram-grp, .vision-bottom-desc, .vision-main, .vision-desc {margin-bottom:10px;}
  .vision-benefit-card {padding:10px; font-size:0.8rem; line-height:1.0rem;}
  .font-size-md {font-size:14px;}
  .vision-cards-container {padding:40px 20px;}
  .card-trans {flex:0 0 calc(33.333% - 10px);}

  .business-projects {display:block;}
  .project-tag {padding:5px 10px; font-size:0.8rem;}
  .problem-solution-keypoint-item {padding:10px; font-size:0.8rem;} 
  .headarea-content-block {display:block;}
  .headarea-content-block .headarea-content-image {width:100%;}
  .headarea-content-block .headarea-content-text-block {padding:20px 0;}
  .grid-container {gap:10px; padding:0px;}

  .ai-service-grid {grid-template-columns:repeat(1, 1fr); gap:10px;}
  .ai-service-img-container {padding:20px 10px; margin-top:20px; margin-bottom:20px; border-radius:10px;}

  .dt-image {padding:10px;}

  .project-content-img-title, .project-content-img-desc {font-size:0.8rem;}
  .project-content-img-title {margin:10px 0 5px 0;}
  .project-content-img-desc {margin-bottom:0px;}
  .company-info-grid {grid-template-columns: 1fr;}
  .history-group {font-size:0.8rem; line-height:160%;}
  .history-item {margin-bottom: 10px;}
  .history-year {font-size:1rem; width:100%; left:50%; border:solid 1px #aaa; height:36px;}
  .history-list {padding-left:0; }

  .content-group {display:block; }
  .content-right, .content-left{width:100%;max-width: 100%;} 

}
/* 모바일 (0px ~ 480px) */
@media (max-width: 480px) {

  html, body { min-width: 320px; }
  /* 모바일에서 main-visual-images 크기 및 위치 조정 */
  .section-nav-list {display:none;}
  .main-image {position:relative; width:100%;}
  .main-image .main-visual-title {font-size:1.2rem; font-weight:800; width: calc(100% - 20px);}
  .main-image .main-visual-text {top:50%; left:50%; transform:translate(-50%, -50%); width:100%; height:auto;}
  .main-visual-area > .main-visual-content { width:100%; height:350px; margin:30px 0; }
  .main-visual-images .pos1 { width: calc(100% / 2); height: calc(100% / 2); left:0px; top:50px; border-radius:10px; }
  .main-visual-images .pos2 { width: calc(100% / 3); height: calc(100% / 3); top: 0px; left:auto; right:0px; border-radius:10px;}
  .main-visual-images .pos3 { width:calc(100% / 4); height:calc(100% / 4); left: 50%; top:250px; border-radius:10px;}
  .service-btn { position:absolute; bottom:10%; right:10px; border-radius:5px; padding:5px; font-size:14px; width:80px; height:80%; }
  .main-partner-logos { margin-top: calc(50% - 50px); }
  .main-partner-slogan {top:100px; right:0; font-size:1.0rem;}
  .performance-section {height: auto; padding-bottom:100px;}
  .main-contact-inner .main-contact-info span {font-size:0.7rem; line-height:1rem; display:block;}

  .headarea-nav-button .nav-image-male {width:100px; height:100px; top:-53px; right:150px;}
  .headarea-nav-button .nav-image-female {width:100px; height:100px; top:-53px; left:110px;}
  .headarea-nav-button img {width:20px; height:20px;}
  .headarea-bottom-nav {display:block;}
  .common-card-icon {width:50px; height:50px;}
  .common-card-icon img {width:30px; height:30px;}

  .section-title-area .section-slogan-desc {padding:20px 10px; font-size:0.8rem;}
  .problem-solution-table .table-td-icon-box {margin-left:0;}
  .table-td-icon-box {width:30px; height:30px;}
  .problem-solution-table .table-td-texts {font-size:12px; line-height:1.2rem;}
  .problem-solution-desc {font-size:0.8rem;}
  .line-box {border-radius:10px;}

  .dual-image-container .image-text-item:first-child, .dual-image-container .image-text-item:last-child {width:100%; margin-bottom:10px;}
  .image-text-item img {border-radius:0px;}
  .image-box {padding:10px; box-shadow:0 0 0 0; border:solid 1px #e0e0e0}

  .kepco-safety-section {padding:10px; margin:10px 0; border-radius:10px; box-shadow:0 0 0 0;}
  
  /* Contact Guide Responsive */
  .recruitment-main-box {display:flex; flex-direction:column; gap:20px; padding:20px;}
  .recruitment-image-center {text-align:center; margin-bottom:20px;}
  .recruitment-man-img {max-width:200px; width:100%; height:auto; position: relative; left:calc(50% + 100px); top:40px;}
  .headarea-content-text-block {padding:0 10px;}
  .headarea-content-heading {font-size:1.2rem; margin-bottom:15px; margin-top:50px;}
  .headarea-content-paragraph {font-size:0.9rem; line-height:1.4rem; margin-bottom:20px;}
  .recruitment-contact {background:#f8f9fa; padding:15px; border-radius:10px; margin-bottom:20px;}
  .recruitment-contact h4 {font-size:1rem; margin-bottom:10px;}
  .recruitment-contact p {font-size:0.9rem; margin-bottom:5px;}
  .contact-note {font-size:0.8rem; color:#666;}
  .application-download {text-align:center;}
  .download-link {display:inline-block; background:#007bff; color:white; padding:12px 20px; border-radius:5px; text-decoration:none; font-size:0.9rem;}
  
  /* Contact Talent Responsive - Mobile */
  .talent-recruitment-section {padding:20px 0;}
  .talent-main-container {padding:0 10px;}
  .recruitment-cards-grid {display:grid; grid-template-columns:1fr; gap:15px; margin-bottom:30px;}
  .recruitment-card {padding:20px; border-radius:10px; box-shadow:0 2px 10px rgba(0,0,0,0.1);}
  .card-icon {margin-bottom:15px;}
  .card-icon img {width:35px; height:35px;}
  .card-content h3 {font-size:1.1rem; margin-bottom:10px;}
  .card-content p {font-size:0.85rem; line-height:1.4rem; margin-bottom:12px;}
  .position-list li {padding:5px 0; font-size:0.85rem;}
  
  .application-section {margin-top:30px;}
  .application-form-container {padding:20px; border-radius:10px;}
  .application-form-container h3 {font-size:1.2rem; margin-bottom:8px;}
  .form-description {font-size:0.85rem; margin-bottom:20px; line-height:1.3rem;}
  .form-row {margin-bottom:12px;}
  .form-group {margin-bottom:15px;}
  .form-group label {font-size:0.9rem; margin-bottom:6px;}
  .form-group input, .form-group select, .form-group textarea {padding:8px 10px; font-size:0.85rem; border-radius:6px;}
  .file-note {font-size:0.8rem;}
  .submit-btn {padding:10px 30px; font-size:0.9rem; width:100%;}
  
  .contact-info-box {padding:20px; border-radius:10px; margin-top:20px;}
  .contact-info-box h4 {font-size:1.1rem; margin-bottom:12px;}
  .contact-details p {font-size:0.85rem; margin-bottom:6px;}
  .download-section {margin-top:20px;}
  .download-section .download-link {padding:8px 15px; font-size:0.85rem; width:100%; text-align:center;}
  .mlops-section, .tech-section, .performance-section, .partner-section, .contact-section {padding: 0 10px;}

}