html,body{width:100%;overflow-x:hidden}
*{padding:0; margin:0; font-family:'Paperlogy','Titillium Web', sans-serif;}
ul,li,ol{list-style:none;}
img{display:block;}
a{text-decoration:none;color:inherit}
body{margin:0;padding: 0;color:#333}
.sound_only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
/* 캡차 외곽선 없애기 */
#captcha { border: none !important;  padding: 0 !important;  margin: 0 !important;}
/* legend 태그도 숨기고 싶다면 */
#captcha legend { display: none;}

#main .inner{border:0px #f50 solid;max-width:1400px;margin:0 auto;padding:40px;text-align:center}
/* ✅ 반응형 중간기기 1200px 이하 */
@media all and (max-width:1400px){
#main .inner{max-width:1000px;padding:30px}
}

/* ✅ 반응형 중간기기 1024px 이하 */
@media all and (max-width:1024px){
#main .inner{max-width:90%;padding:25px}
}

/* ✅ 반응형 중간기기 992px 이하 */
@media all and (max-width:992px){
#main .inner{max-width:92%;padding:20px}
}

/* ✅ 반응형 작은기기 768px 이하 */
@media screen and (max-width:768px){
#main .inner{max-width:94%;padding:18px}
}

/* ✅ 반응형 작은기기 480px 이하 */
@media screen and (max-width:480px){
#main .inner{max-width:100%;padding:15px}
}


/*** 상단메뉴부분 시작***/
/*탑바*/
#topbar{width:100%;height:56px;position:fixed;top:0;left:0;z-index:1100;background:linear-gradient(90deg,#a8343a,#1e3c88,#a8343a);background-size:200% 200%;animation:topbarGradient 5s ease-in-out infinite;transition:transform .35s ease,opacity .25s ease,filter .25s ease}
/* #topbar.hide{transform:translateY(-100%);opacity:0;filter:blur(6px)} */
#topbar.hide{transform:translateY(-52px);opacity:1;filter:blur(0px)}
#topbar .topbar-inner{max-width:1800px;height:56px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 40px}
#topbar .topbar-left{display:flex;align-items:center;font-size:14px;font-weight:500;color:#fff}
#topbar .topbar-right{display:flex;align-items:center;font-size:14px;font-weight:500;color:#fff}
#topbar a{color:#fff;text-decoration:none;transition:.25s}
#topbar a:hover{opacity:.8}
#topbar .bar{margin:0 10px;opacity:.7}
@keyframes topbarGradient {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
/* header 기본 */
#header.top{top:0; box-shadow:0 6px 18px rgba(0,0,0,.08)}
#header{width:100%;position:fixed;left:0;top:0;z-index:1000;background:#fff;transition:none;top:56px;transition:top .35s ease}
#header .header-inner{max-width:1800px;margin:0 auto;height:116px;display:flex;align-items:center;justify-content:space-between;position:relative;padding:0 40px}

/* 로고 */
#header .logo{position:static;transform:none}
#header .logo a{display:flex;/*width:410px;*/height:56px;position:relative;align-items:center;}
#header .logo img{height:56px;/*position:absolute;left:0;top:0*/}

/* 메뉴 */
#header .gnb{ /*margin-left:auto */ width:100%;}
#header .gnb .depth1{display:flex;margin: 0 auto;justify-content:space-evenly;}
#header .gnb .depth1>li>a{line-height:116px;font-size:22px;font-weight:600;color:#000;transition:color .25s ease}
#header .gnb .depth1>li>a:hover{color:#0a84ff}
#header .gnb .depth1>li:hover>a{color:#0a84ff}


/* 하위메뉴 */
#header .gnb .depth2{position:absolute;left:50%;top:116px;width:max-content;min-width:200px;background:#fff;border:1px solid #eee;border-radius:0 0 20px 20px;display:flex;flex-direction:column;text-align:center;padding:10px 0;z-index:999;box-shadow:0 4px 10px rgba(0,0,0,0.08);
white-space:nowrap;opacity:0;visibility:hidden;transform:translate(-50%,-10px);transition:opacity .25s ease,transform .25s ease,visibility .25s ease}
#header .gnb .depth2 li a{display:block;padding:10px 18px;font-size:16px;color:#222;transition:.3s}
#header .gnb .depth2 li a:hover{color:#0a84ff;background:rgba(10,132,255,0.08);margin:0 10px;border-radius:5px}
#header .gnb .depth1>li:hover>.depth2{opacity:1;visibility:visible;transform:translate(-50%,0)}
#header .gnb .depth1>li{position:relative;display:flex;justify-content:center;}



/*반응형을 위한 코드 추가*/
/* ✅ 반응형 중간기기 1200px 이하 */
@media all and (max-width:1200px){
#header .header-inner{max-width:1100px;height:80px;padding:0 30px}
#header .logo a{/*width:160px;*/height:50px}
#header .logo img{height:42px}
#header .gnb .depth1{/*gap:70px*/}
#header .gnb .depth1>li>a{font-size:17px;line-height:80px}
#header .gnb .depth2{top:80px}
}

/* ✅ 반응형 중간기기 1024px 이하 */
@media all and (max-width:1024px){
#header .header-inner{max-width:950px;height:80px;padding:0 25px}
#header .logo a{/*width:150px;*/height:46px}
#header .logo img{height:40px}
#header .gnb .depth1{/*gap:50px*/}
#header .gnb .depth1>li>a{font-size:16px;line-height:80px}
#header .gnb .depth2{top:80px}
}


/* ✅ 반응형 중간기기 992px 이하 */
@media all and (max-width:992px){
#header .header-inner{max-width:90%;height:70px;padding:0 20px}
#header .logo a{/*width:140px;*/height:42px}
#header .logo img{height:30px}
#header .gnb .depth1{/*gap:40px*/}
#header .gnb .depth1>li>a{font-size:15px;line-height:70px}
#header .gnb .depth2{top:70px}
}


/* ✅ 반응형 작은기기 768px 이하 */
@media screen and (max-width:768px){
  #topbar { height: 48px;font-size: 12px; padding: 0 10px;}
  #topbar .topbar-inner {height: 48px;padding: 0 20px;}
  #topbar .topbar-left,
  #topbar .topbar-right {font-size: 12px; /* 텍스트 크기 줄이기 */}
  .mobile-hide {display: none !important;}
  #header {top: 48px; /* 헤더 위치를 조정하여 탑바 높이에 맞춤 */}
  #header .header-inner { height: 60px; padding: 0 15px;}
  #header .logo a { width: 120px; height: 38px;}
  #header .logo img { height: 38px;}
}



/* ✅ 반응형 작은기기 480px 이하 */
@media screen and (max-width:480px){
#header .header-inner{height:56px;padding:0 5px}
#topbar .topbar-left a{font-size: 12px; /* 👈 더 작게 설정 */}
#topbar .topbar-right a{font-size: 12px; /* 👈 더 작게 설정 */}
#topbar .bar { margin: 0 3px; /* 간격도 줄이면 균형 좋아짐 */}
#header .logo { margin-left: 0;}
#header .logo a{width:100px;height:32px}
#header .logo img{height:32px}
}


/* 햄버거 버튼 */
.m-menu-btn{display:none;position:absolute;right:20px;top:50%;transform:translateY(-50%);width:28px;height:22px;flex-direction:column;justify-content:space-between;cursor:pointer;z-index:200;background:none;border:0;right: 10px;}
.m-menu-btn span{display:block;width:100%;height:2px;background:#000;border-radius:2px;transition:all .3s ease}
#header.scrolled .m-menu-btn span{background:#000}
.m-menu-btn.active span{background:#000;position:absolute;left:0;top:50%}
.m-menu-btn.active span:nth-child(1){transform:translateY(-50%) rotate(45deg)}
.m-menu-btn.active span:nth-child(2){opacity:0}
.m-menu-btn.active span:nth-child(3){transform:translateY(-50%) rotate(-45deg)}


/* 모바일 메뉴 전체 */ 
.m-gnb{display:none;position:fixed;top:0;right:-100%;width:80%;max-width:320px;height:100vh;background:#fff;box-shadow:-2px 0 10px rgba(0,0,0,0.1);transition:right .4s ease;z-index:150;overflow-y:auto;padding:100px 30px 60px} 
.m-gnb.active{right:0} 
.m-gnb ul{list-style:none;padding:0;margin:0}

/* 상위 메뉴 */ 
.m-gnb .m-menu-top{display:block;padding:14px 0;font-size:17px;font-weight:600;color:#222;border-bottom:1px solid #eee}

/* 하위 메뉴 */ 
.m-gnb .m-depth2{display:none;padding-left:14px;border-left:2px solid #0a84ff;margin:8px 0} 
.m-gnb .m-depth2 a{display:block;font-size:14px;color:#555;padding:8px 0} 
.m-gnb .m-depth2 a:hover{color:#0a84ff}

/* 모바일 하단 버튼 */
.m-bottom-btns{display:flex;gap:10px;margin-top:40px;padding-top:20px;border-top:1px solid #eee}
.m-bottom-btns .m-btn{flex:1;display:block;text-align:center;padding:12px 0;border:1px solid #0a84ff;border-radius:25px;font-size:15px;color:#0a84ff;font-weight:600;transition:.3s}
.m-bottom-btns .m-btn:hover{background:#0a84ff;color:#fff}


/* 반응형 (햄버거 버튼 보이기) */
@media screen and (max-width:768px){
#header .gnb{display:none}
.m-menu-btn{display:flex}
.m-gnb{display:block}
}



/*** 상단메뉴부분 끝***/


/*** 메인 비쥬얼 ***/
/* main visual */
.main-visual{position:relative;width:100%;height:872px;overflow:hidden}
.main-visual .visual-slide{width:100%;height:100%;position:relative;z-index:1}
.main-visual .visual-fixed{position:absolute;left:0;bottom:0;width:100%;height:299px;z-index:3;pointer-events:none}
.main-visual .visual-fixed img{width:100%;height:100%;object-fit:cover;display:block}

.main-visual .slide-item{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;transition:opacity 1s ease}
.main-visual .slide-item.active{opacity:1;z-index:2}
/*.main-visual .slide-item img{width:100%;height:100%;object-fit:cover;display:block}*/
@keyframes zoomOut{
0%{transform:scale(1.15)}
100%{transform:scale(1)}
}
.main-visual .slide-item img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1)}
.main-visual .slide-item.active img{animation:zoomOut 4.5s ease forwards}

/* 텍스트 오버레이 */
@keyframes fadeUp{
0%{opacity:0;transform:translate(120px,calc(-50% + 40px))}
100%{opacity:1;transform:translate(120px,-50%)}
}
.main-visual .visual-text{position:absolute;left:50%;top:56%;transform:translate(120px,-50%);text-align:left;color:#fff;z-index:2;max-width:700px;opacity:0}
.main-visual .slide-item.active .visual-text{animation:fadeUp 1.2s ease forwards}

.main-visual .visual-title{font-size:45px;font-weight:800;line-height:1.15;letter-spacing:-0.03em;margin:0 0 48px 0}
.main-visual .visual-title span{font-size:45px;font-weight:200;line-height:1.15;letter-spacing:-0.03em;}
.main-visual .visual-line{display:block;width:80px;height:2px;background:#fff;margin:0 0 20px 0}
.main-visual .visual-desc{font-size:20px;font-weight:400;line-height:1.3;opacity:.95}
.main-visual .visual-desc .sm{font-size:18px;font-weight:300;line-height:1.5;opacity:.95; padding-bottom:30px;}
.main-visual .visual-desc .mt{font-size:20px;font-weight:400;line-height:1.5;opacity:.95}

/* 컨트롤 버튼 */
.visual-controls{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;max-width:1920px;display:flex;justify-content:space-between;align-items:center;padding:0 20px;z-index:100;box-sizing: border-box;}
.visual-controls button{background:rgba(0,0,0,0.4);color:#fff;border:none;width:60px;height:60px;border-radius:50%;font-size:22px;cursor:pointer;transition:.3s;z-index:51}
.visual-controls button:hover{background:rgba(0,0,0,0.7)}

/* 페이저 */
.visual-pager{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;z-index:30;font-family:'Titillium Web',sans-serif}
.visual-pager .current,.visual-pager .total{font-size:14px;color:#fff;font-weight:500;min-width:24px;text-align:center}
.visual-pager .progress{position:relative;width:120px;height:2px;background:rgba(255,255,255,0.3);border-radius:2px;overflow:hidden}
.visual-pager .progress span{display:block;width:0;height:100%;background:#0a84ff;}
.visual-pager .pause{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,0.3);border:0;cursor:pointer;transition:.3s}
.visual-pager .pause i{color:#fff;font-size:14px}
.visual-pager .pause:hover{background:rgba(255,255,255,0.6)}

@media(max-width:1024px) {
  .main-visual {    height: 600px;    position: relative; /* 기준이 될 부모 */  }
  .main-visual .visual-text {  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; max-width: 90%; z-index: 10; opacity: 1; animation: none !important; }
  .main-visual .visual-line { margin: 0 auto 20px;}
  .main-visual .visual-title { font-size: 34px; margin: 0 0 24px 0;}
  .main-visual .visual-title span{font-size:34px;font-weight:200;line-height:1.15;letter-spacing:-0.03em;}
  .main-visual .visual-desc { font-size: 18px;}
  .main-visual .visual-desc .sm{font-size:16px;}
  .main-visual .visual-desc .mt{font-size:18px;}
}

@media(max-width:992px) {
  .main-visual .visual-title { font-size: 30px; margin: 0 0 24px 0;}
  .main-visual .visual-title span{font-size:30px;}
  .main-visual .visual-desc { font-size: 17px;}
  .main-visual .visual-desc .sm{font-size:15px;}
  .main-visual .visual-desc .mt{font-size:17px;} 
}


@media(max-width:768px){
.main-visual{height:520px;position:relative}
.main-visual .visual-text{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;max-width:90%;z-index:10;animation:none!important}
.main-visual .visual-line{margin:0 auto 20px}
.main-visual .visual-title{font-size:22px;margin:0 0 24px 0}
.main-visual .visual-title span{font-size:22px;}
.main-visual .visual-desc{font-size:16px}
.main-visual .visual-desc .sm{font-size:14px;}
.main-visual .visual-desc .mt{font-size:16px;}
/*
.visual-controls{top:50%;left:0;transform:translateY(-50%);width:100%;padding:0 10px;max-width:none}
.visual-controls button{width:40px;height:40px;font-size:18px}
*/
    
  .visual-controls { position: absolute; top: 50%; left: 0; transform: translateY(-50%);  width: 100%; padding: 0 10px;  max-width: none; }
  .visual-controls button { width: 40px; height: 40px;  font-size: 18px; }    
    
.visual-pager{bottom:20px}
}

@media(max-width:480px){
.main-visual{height:580px}
.main-visual .visual-title{font-size:20px}
.main-visual .visual-title span{font-size:20px;}
.main-visual .visual-desc{font-size:13px}
.main-visual .visual-desc .sm{font-size:12px;}
.main-visual .visual-desc .mt{font-size:13px;}
}


/*** 메인 비쥬얼 ***/



/*** 메인 콘텐츠 ***/
#main{width:100%;}

/*SECTION 01*/

/*왼쪽 : 핵심추진사업*/
.core-section{width:100%;padding:0}
.core-section .inner_s1 { border: 0px #f50 solid; width: 1400px; margin: 30px auto 80px; display: flex; justify-content: space-between; align-items: flex-start;  gap: 80px; /* 👉 왼쪽-오른쪽 사이 여백 추가 */}
.core-left{border:0px #f50 solid;width:54%;margin-left:0;}

.core-title{text-align:left;color:#111}
.core-title .small{font-size:20px;font-weight:600;color:#111}
.core-title .title-row{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.core-title h2{font-size:38px;font-weight:800;margin:0}
.core-title p{font-size:15px;font-weight:500;color:#494949;line-height:1.2;margin:0}

.core-box{border:0px #f50 solid; margin-top:20px;background:#e9edf2;border-radius:16px;padding:0 40px}
.core-item{height:188px;display:flex;align-items:center;gap:24px;position:relative; text-align: left}
.core-item .icon img{width:80px;display:block;transform:rotateY(0deg);transition:transform .8s cubic-bezier(.2,.9,.2,1);backface-visibility:hidden}
.core-item:hover .icon img{transform:rotateY(360deg)}

.core-item .info h3{font-size:30px;font-weight:700;margin-bottom:6px}
.core-item .info p{font-size:15px;color:#333;line-height:1.4}
.core-item .info p .more{display:inline-block;margin-left:8px;padding:5px 15px;border:1px solid #0a84ff;border-radius:14px;font-size:14px;font-weight:500;color:#0a84ff;line-height:1.2;transition:background .25s,color .25s}
.core-item .info p .more:hover{background:#0a84ff;color:#fff}
.core-box .line{width:90%;height:1px;background:#cfd5dd;margin:0 auto}
/*왼쪽 : 핵심추진사업 끝*/

/*오른쪽 : 지산학 플랫폼*/
.platform-right {border: 0px #f50 solid; width: 46%; margin-left: 0;}
.platform-grid{margin-top:20px;display:grid;grid-template-columns:repeat(2,309px);grid-auto-rows:283px}

.platform-box{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:#98c2ee;color:#111;text-decoration:none;border-radius:16px;overflow:hidden;transition:transform .35s ease,background .35s ease,box-shadow .35s ease}
.platform-box.light{background:#cfe0f2}

.platform-box img{width:140px;margin-bottom:20px;transition:transform .4s ease}
.platform-box span{font-size:20px;font-weight:700;transition:transform .4s ease,color .3s ease}

.platform-box:hover{transform:scale(1.06);box-shadow:0 20px 45px rgba(0,0,0,.18);background:#86b7ec}
.platform-box.light:hover{background:#bdd6ef}
.platform-box:hover img{transform:scale(1.15)}
.platform-box:hover span{transform:translateY(6px);color:#0a84ff}

.platform-grid .platform-box:nth-child(1){margin:0 5px 5px 0}
.platform-grid .platform-box:nth-child(2){margin:0 0 5px 5px}
.platform-grid .platform-box:nth-child(3){margin:5px 5px 0 0}
.platform-grid .platform-box:nth-child(4){margin:5px 0 0 5px}

/* ===== 반응형 ===== */

/* 1200px 이하 */
@media(max-width:1200px){
.core-section .inner_s1{width:100%;padding:0 30px;gap:50px}
.core-left{width:55%}
.platform-right{width:45%}
.platform-grid{grid-template-columns:repeat(2,1fr)}
}

/* 1024px 이하 */
@media(max-width:1024px){
.core-section .inner_s1{gap:40px}
.core-left{width:50%}
.platform-right{width:50%}
.platform-grid{justify-content:center}
.platform-box{height:260px}
}

/* 768px 이하 */
@media(max-width:768px){
.core-section .inner_s1{flex-direction:column;gap:50px}
.core-left{width:100%}
.platform-right{width:100%}
.platform-grid{grid-template-columns:repeat(2,1fr)}
.core-title h2{font-size:32px}
.core-item{height:auto;padding:24px 0}
.core-title .title-row{flex-direction:column;align-items:flex-start;gap:10px}
.core-title p{white-space:normal;line-height:1.4}
}

/* 480px 이하 */
@media(max-width:480px){
.core-section .inner_s1{padding:0 20px}
.core-title .small{font-size:16px}
.core-title h2{font-size:26px}
.core-title p{font-size:14px}
.core-item{flex-direction:column;align-items:flex-start;gap:14px}
.core-item .icon img{width:64px}
.core-item .info h3{font-size:24px;}
.platform-grid{grid-template-columns:1fr}
.platform-box{height:240px}
.platform-box img{width:110px}
.platform-box span{font-size:18px}
}

/*오른쪽 : 지산학 플랫폼 끝*/

/*SECTION 01 끝*/



/*SECTION 02*/
.board-section{position:relative;width:100%;padding:80px 0;background:linear-gradient(120deg,#c7e6f6,#b8a9e4,#eae7f5,#c4c9f9);background-size:400% 400%;animation:boardGradient 15s ease infinite;overflow:hidden}
.board-section:before{opacity:.8;}

.board-section:after{content:"";position:absolute;left:-20%;top:-20%;width:140%;height:140%;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.35),rgba(255,255,255,0) 60%);animation:waveMove 26s linear infinite;pointer-events:none}
.board-section:after{animation-duration:38s;opacity:.35}
@keyframes waveMove{
0%{transform:translateX(0) translateY(0) rotate(0deg)}
50%{transform:translateX(-120px) translateY(80px) rotate(180deg)}
100%{transform:translateX(0) translateY(0) rotate(360deg)}
}

.board-inner{width:1400px;height: 400px; margin:0 auto;display:flex;gap:80px}
.board-inner{width:1400px;margin:0 auto; display:flex;  gap:80px;  height:auto;  min-height:400px; }
.board-col{width:50%}
.board-col h3{font-size:28px;font-weight:700;color:#222;margin-bottom:14px}
.board-col .line{width:100%;height:2px;background:rgba(0,0,0,.35)}

@keyframes boardGradient{
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}

/* ===== 태블릿 ===== */
@media(max-width:1024px){
  .board-section{padding:70px 0}
  .board-inner{
    width:100%;
    padding:0 30px;
    gap:40px;
    min-height:auto;
  }
}

/* ===== 모바일 ===== */
@media(max-width:768px){
  .board-section{padding:60px 0}
  .board-inner{
    flex-direction:column;
    gap:50px;
  }
  .board-col{width:100%}

  /* 배경 웨이브 강도 약화 */
  .board-section:after{
    opacity:.2;
    animation-duration:60s;
  }
}

/* ===== 소형 모바일 ===== */
@media(max-width:480px){
  .board-section{padding:50px 0}

  .board-inner{padding:0 20px;gap:40px}

  .board-col h3{
    font-size:22px;
    margin-bottom:10px;
  }

  .board-col .line{height:1px}
}

/*SECTION 02 끝*/

/*SECTION 02.5 배너 시작*/
.middle-banner{width:100%;padding:60px 0;background:#fff}
.middle-banner-inner{width:1400px;margin:0 auto;display:flex;gap:40px;justify-content:center}
.banner-item{display:block;width:680px;height:160px;overflow:hidden;border-radius:16px;transition:transform .35s ease,box-shadow .35s ease}
.banner-item img{width:100%;height:100%;object-fit:cover;display:block}
.banner-item:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(0,0,0,.15)}
@media(max-width:1024px){
.middle-banner-inner{width:100%;padding:0 30px;gap:30px}
.banner-item{width:100%;height:auto}
.banner-item img{height:auto}
}
@media(max-width:768px){
.middle-banner-inner{flex-direction:column;gap:10px}
.banner-item{width:100%;height:auto}
}
/*SECTION 02.5 배너 끝*/


/*SECTION 03*/
/* 카드뉴스 섹션 */
.cardnews-section{width:100%;padding:0px 0px 60px 0px; background:#fff}
.cardnews-inner{width:1400px;height:420px;margin:0 auto}

/* 타이틀 */
.cardnews-title{margin-bottom:40px}
.cardnews-title .small{display:block;font-size:20px;font-weight:600;color:#111;margin-bottom:6px}
.cardnews-title h2{font-size:38px;font-weight:800;color:#111;display:flex;align-items:flex-end;gap:14px}
.cardnews-title h2 .desc{font-size:15px;font-weight:400;color:#666;position:relative;top:-6px}
.cardnews-title h2 .lie{font-size:15px;}

/* 카드 리스트 */
.cardnews-list{display:flex;gap:32px}


/* 반응형 */
@media(max-width:1024px){
.cardnews-inner{width:100%;height:auto;padding:0 30px}
.cardnews-list{gap:20px}
}

@media(max-width:768px){
.cardnews-list{flex-direction:column}
.cardnews-item{height:auto}
.cardnews-title h2{font-size:28px;flex-wrap:wrap}
}

@media(max-width:480px){
.cardnews-title h2 .lie{display:none;}
}

/*SECTION 03 끝*/


/*** 메인 콘텐츠 ***/






/*하단영역*/
/* footer 기본 */
#footer{width:100%;background:#2f3137;color:#cfcfcf;padding:60px 0}
#footer .footer-inner{width:1400px;margin:0 auto;display:flex;flex-direction:column;align-items:center;text-align:center}

/* 상단 메뉴 */
#footer .footer-top{width:100%;display:flex;justify-content:space-between;align-items:center;margin-bottom:40px}
#footer .footer-menu{display:flex;gap:30px;flex-wrap:wrap}
#footer .footer-menu li{list-style:none}
#footer .footer-menu li a{color:#fff;font-size:14px;text-decoration:none;transition:color .25s ease}
#footer .footer-menu li a:hover{color:#0a84ff}
#footer .footer-menu li:not(:last-child)::after{content:"|";color:#888;margin-left:30px}

/* 관련사이트 */
#footer .footer-site select{background:#3a3d44;color:#fff;border:1px solid #555;padding:8px 14px;border-radius:6px}

/* 로고 */
#footer .footer-logo{margin-bottom:25px}
#footer .footer-logo img{width:410px;height:56px;}

/* 정보 */
#footer .footer-info p{margin:4px 0;font-size:15px;line-height:1.7;color:#bfbfbf}
#footer .footer-contact{font-size:16px;color:#fff}
#footer .footer-contact a{color:#fff;text-decoration:none}

/* 카피라이트 */
#footer .copy{margin-top:25px;font-size:12px;color:#999}


/* 반응형 하단 영역 */
@media(max-width:1024px){
#footer .footer-inner{width:100%;padding:0 20px}
#footer .footer-top{flex-direction:column;gap:20px}
}

@media(max-width:768px){
#footer{text-align:center;padding:40px 0}
#footer .footer-menu{justify-content:center}
#footer .footer-logo img{width:380px;}    
}

@media(max-width:480px){
#footer .footer-menu{display:none}
#footer .footer-logo img{width:320px;}    
}

/* 상단으로 이동버튼 */
@keyframes heartbeat{0%{transform:translateY(0) scale(1)}20%{transform:translateY(-2px) scale(1.12)}100%{transform:translateY(0) scale(1)}} 
.scroll-to-top{position:fixed;right:20px;bottom:40px;width:45px;height:45px;background:#0a84ff;color:#fff;border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;z-index:9999;cursor:pointer;
box-shadow:0 2px 8px rgba(0,0,0,0.2);opacity:0;visibility:hidden;transform:translateY(40px);transition:opacity 0.4s ease,visibility 0.4s ease,transform 0.4s ease} 
.scroll-to-top.show{opacity:1;visibility:visible;transform:translateY(0);animation:heartbeat 1.4s ease-in-out infinite} 
.scroll-to-top:hover{background:#065ecf}


/*하단 3개 레이어메뉴-개인정보취급방침 외*/
.footer-popup-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7);z-index:999998;display:none}
.footer-popup{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:800px;height:400px;background:#fff;z-index:999999;padding:30px;border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,0.4);display:none;overflow:hidden}
.fp-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}
.fp-header h2{font-size:24px;font-weight:800;margin:0;color:#111}
.fp-close{background:none;border:0;font-size:26px;cursor:pointer;color:#333}
.fp-content{font-size:15px;line-height:1.6;color:#444;height:300px;overflow-y:auto;padding-right:10px}

/* 반응형 */
@media(max-width:1024px){.footer-popup{width:80%;height:380px;padding:24px}.fp-header h2{font-size:22px}}
@media(max-width:768px){.footer-popup{width:90%;height:360px;padding:20px}.fp-header h2{font-size:20px}.fp-content{height:260px}}
@media(max-width:480px){.footer-popup{width:92%;height:330px;padding:16px}.fp-header h2{font-size:18px}.fp-close{font-size:22px}.fp-content{height:240px}}

/*policy 레이어스타일*/
.fp-content h3 {  font-size: 20px;  font-weight: 700;  color: #222;  margin: 25px 0 10px;}
.fp-content p,
.fp-content li { font-size: 15px;  line-height: 1.6; color: #555;  margin-bottom: 12px;}
.fp-content ul { padding-left: 20px;  margin: 10px 0 15px;}


/*온라인 문의메일*/
/* 전체 폼 컨테이너 */
#formmail.new_win { max-width: 1200px; margin: 50px auto; padding: 40px; background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); border-radius: 16px; box-sizing: border-box;}

/* 테이블 구조 */
.tbl_frm01 { width: 100%; border-collapse: collapse; margin-bottom: 50px;}
.tbl_frm01 table { width: 100%;}
.tbl_frm01 th, .tbl_frm01 td { padding: 18px 20px;  text-align: left; vertical-align: middle; border-bottom: 1px solid #e5e5e5;}
.tbl_frm01 th { width: 180px;  background: #f9f9f9;  font-weight: 600;  color: #333;}
.tbl_frm01 td { background: #fff;}
.frm_input, textarea { width: 100%;  padding: 12px 14px;  font-size: 16px;  border: 1px solid #ccc;  border-radius: 8px;  transition: border-color 0.2s;  box-sizing: border-box;}
.frm_input{ background: #f2f7fd;}
.frm_input:focus,
textarea:focus {  border-color: #3388fc;  outline: none;}

/* 텍스트에어리어 */
textarea { resize: vertical; min-height: 180px;}

/* 파일 업로드 스타일 */
input[type="file"] {  border: none;  padding: 10px 0;  background: none;  font-size: 15px;}

/* 안내 문구 */
.tbl_frm01 td:has(input[type="file"])::before {  content: ""; display: block; margin-bottom: 5px;}

/* 전송 버튼 */
.win_btn_t { border:0px #f50 solid;  text-align: center;  margin: 0 auto; height: 50px; width: 150px;}
.btn_submit {  padding: 14px 40px;  background-color: #419f06; color: white; font-size: 18px; border: none; border-radius: 10px; cursor: pointer;  transition: background-color 0.3s;}
.btn_submit:hover { background-color: #00a391;}

/*첨부 삭제버튼 추가*/
.file-box{display:flex;align-items:center;gap:12px;padding:10px 14px;background:#f7fafc;border:1px solid #e2e8f0;border-radius:10px;box-shadow:0 2px 6px rgba(0,0,0,0.04)}
.file-label{font-size:15px;color:#333;font-weight:600;white-space:nowrap}
.file-input{flex:1;padding:10px 12px;border:1px solid #cfd9e3;border-radius:8px;background:#fff;font-size:14px}
.file-reset{padding:10px 14px;background:#edf2f7;border:1px solid #c3ccd5;border-radius:8px;font-size:14px;color:#333;cursor:pointer;display:flex;align-items:center;gap:6px;transition:all .25s ease}
.file-reset:hover{background:#d7e0e8;color:#000;border-color:#aab4be;transform:translateY(-1px);box-shadow:0 3px 6px rgba(0,0,0,0.08)}
.file-reset i{font-size:14px}


/* 반응형 대응 */
/* 최대 1200px 이하 */
@media screen and (max-width: 1200px) {
  #formmail.new_win { padding: 30px; margin: 40px 20px; }
  .tbl_frm01 th { width: 150px; }
  .btn_submit { padding: 12px 32px; font-size: 16px; }
}

/* 최대 768px 이하 */
@media screen and (max-width: 768px) {
  /* 기존 코드 생략 없이 유지 */
  #formmail.new_win { padding: 25px 20px; margin: 30px 15px; }
  .tbl_frm01 th, .tbl_frm01 td { display: block; width: 100%; box-sizing: border-box; text-align: left; }
  .tbl_frm01 th { background: none; padding: 10px 0 5px; font-weight: 700; color: #111; }
  .tbl_frm01 td { padding: 0 0 15px; }

  .frm_input, textarea, .file-input { width: 100%; max-width: 100%; }

  .file-box { flex-direction: column; align-items: stretch; gap: 8px; }
  .file-reset { width: 100%; justify-content: center; }
  .btn_submit { width: 100%; padding: 14px 0; }
}

/* 최대 480px 이하 */
@media screen and (max-width: 480px) {
  #formmail.new_win { padding: 20px 15px; margin: 20px 10px; }
  .frm_input, textarea, .file-input { font-size: 15px; padding: 10px 12px; width: 100%; max-width: 100%; }

  .file-label { font-size: 14px; }
  .file-input { font-size: 13px; padding: 8px 10px; }
  .file-reset { font-size: 13px; padding: 8px 10px; width: 100%; justify-content: center; }
  .btn_submit { font-size: 16px; width: 100%; padding: 12px 0; }
}

@media screen and (max-width: 375px) {
  #formmail.new_win { padding: 12px 8px; }
  .tbl_frm01 table { table-layout: fixed; width: 100%; }
  .frm_input, textarea, .file-input { width: 100%; max-width: 100%; box-sizing: border-box; min-width: 0; font-size: 14px; padding: 8px 10px; overflow-wrap: break-word; }
  .tbl_frm01 th, .tbl_frm01 td { display: block; width: 100%; box-sizing: border-box; text-align: left; padding: 6px 0; }
  .tbl_frm01 th { background: none; font-size: 13px; padding-bottom: 4px; }
  .file-box { flex-direction: column; gap: 6px; padding: 6px 0; }
  .file-label { font-size: 13px; }
  .file-reset { width: 100%; font-size: 13px; padding: 8px 10px; justify-content: center; min-width: 0; }
  .btn_submit { width: 100%; font-size: 15px; padding: 10px 0; }
}



/*
@media (max-width: 768px) {
    #formmail.new_win {padding: 20px; }

    .tbl_frm01 th, .tbl_frm01 td { display: block;  width: 100%;  padding: 12px 10px;}
    .tbl_frm01 th {background: none; font-weight: bold; padding-bottom: 0;}
}
*/

/*//온라인 문의메일*/