@font-face {
  font-family: 'Ria';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2410-1@1.0/RiaSans-ExtraBold.woff2') format('woff2');
  font-weight: normal;
  font-display: swap;
}

@font-face {
  font-family: 'TtangsBudaeJjigae';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2212@1.0/TTTtangsbudaejjigaeL.woff2') format('woff2');
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: 'TtangsBudaeJjigae';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2212@1.0/TTTtangsbudaejjigaeM.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: 'TtangsBudaeJjigae';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2212@1.0/TTTtangsbudaejjigaeB.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
    font-family: 'GMarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'GMarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'GMarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}


/* ===== 헤더 & 네비게이션 ===== */
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 999;
background: rgba(5, 8, 22, 0.9);
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.nav-inner {
max-width: 1400px;
margin: 0 auto;
padding: 0.3rem 1.5rem;
display: flex;
align-items: center;
justify-content: space-between;
}

.logo {
font-weight: 700;
font-size: 1.2rem;
letter-spacing: 0.06em;
}

nav {
display: flex;
align-items: center;
gap: 1.5rem;
}

.nav-menu {
display: flex;
gap: 6rem;
align-items: center;
}

.nav-item {
position: relative;
}

.nav-link {
font-size: 0.95rem;
padding: 0.4rem 0;
display: inline-block;
}

.nav-link:hover {
color: #48c5ff;
}

/* 2차 메뉴 */
.dropdown {
position: absolute;
top: 120%;
left: 0;
min-width: 180px;
background: #0a1024;
border-radius: 0.5rem;
padding: 0.5rem 0;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all 0.2s ease-out;
}

.dropdown li a {
display: block;
padding: 0.5rem 1rem;
font-size: 0.9rem;
white-space: nowrap;
}

.dropdown li a:hover {
background: rgba(72, 197, 255, 0.08);
color: #48c5ff;
}

.nav-item:hover .dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}

/* 모바일 햄버거 버튼 */
.nav-toggle {
display: none;
border: none;
background: none;
cursor: pointer;
}

.nav-toggle span {
display: block;
width: 22px;
height: 2px;
margin: 4px 0;
background: #f5f7fb;
transition: 0.2s;
}

/* ===== 메인 레이아웃 ===== */
main {
margin-top: 20px; /* 고정 헤더 높이만큼 여백 */
}

section {
scroll-margin-top: 70px; /* 고정 헤더로 가리는 것 방지 */
}

/* 1단락: 비주얼 영역 (Hero) */


.hero {
height: 100vh; /* 화면 높이 100% */
display: flex;
align-items: center;
justify-content: center;
padding: 0 1.5rem;
position: relative;
overflow: hidden;
}


.bg-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1;
    transform: translate(-50%, -50%);
    object-fit: cover;
    filter: brightness(70%);
  }

.hero-inner {
max-width: 1400px;
width: 100%;
position: relative;
align-items: center;
}


.hero-text h2 {font-size: 6.8rem; color:#fff; padding:0 0; margin:0; font-weight: bold; font-family: 'Ria';}
.hero-text h2 span {font-size:3.5rem; font-family: 'Noto Sans KR', 'Manrope', 'Apple SD Gothic Neo', sans-serif;}
.hero-text p {
max-width: 100%;
font-size: 1.2rem;
color: #c3c8e4;
margin-bottom: 1.5rem;
}

.hero-text .sc_txt {font-size:1.8rem; color:#fff; font-weight: bold;}

.hero-text2 {width:100%; text-align: center;}
.hero-text2 h2 {font-size: 6.4rem; color:#fff; padding:0 0 20px; margin:0;}

.hero-text2 p {
max-width: 100%;
font-size: 1.2rem;
color: #c3c8e4;
margin-bottom: 1.5rem;
}

.hero-text2 .sc_txt {font-size:1.8rem; color:#fff; font-weight: bold;}

.hero-cta {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.hero-cta2 {

  gap: 0.75rem;
  text-align: center;
  }
.btn-primary,
.btn-outline {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.6rem 1.4rem;
border-radius: 999px;
font-size: 0.95rem;
cursor: pointer;
border: 1px solid transparent;
transition: 0.2s ease-out;
}

.btn-primary {
background: linear-gradient(to right, #48c5ff, #8c52ff);
color: #050816;
font-weight: 600;
}

.btn-primary:hover {
filter: brightness(1.1);
transform: translateY(-1px);
}

.btn-outline {
border-color: rgba(255, 255, 255, 0.25);
color: #e4e8ff;
background: rgba(5, 8, 22, 0.5);
}

.btn-outline:hover {
border-color: #48c5ff;
color: #48c5ff;
}


/* ===== 2~5단락 공통 스타일 ===== */
.section {
max-width: 100%;
height:100%;
padding:7rem 0;
}

.section h2 {
font-size: 1.7rem;
margin-bottom: 0.75rem;
}

.section p {
max-width: 640px;
font-size: 0.97rem;
color: #c3c8e4;
}


#section2 {background: url('../img/sc01_bg.png') no-repeat; background-size: cover;}
#section2 .sc02_wrap {display: flex; justify-content: space-between;}
#section2 .sc02_wrap .box_wrap {width: calc((100% - 50px) / 3); }
#section2 .sc02_wrap .box_wrap a {display:inline-block; width:100%; height:100%;}
#section2 .sc02_wrap .box_wrap:nth-child(1) {transition: all 1s 0.4s;}
#section2 .sc02_wrap .box_wrap h4 {font-family:'Ria'; position:relative; z-index: 1; font-size: 3.2rem; color: #fff; text-align: center; text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.6);}
#section2 .sc02_wrap .box_wrap h4 span {font-size:2.6rem; color:#fff; font-family: 'Noto Sans KR', 'Manrope', 'Apple SD Gothic Neo', sans-serif;}
#section2 .sc02_wrap .box_wrap:nth-child(1) .box {background: url('../img/sc02_bg01_02.png') no-repeat center; background-size: cover;}
#section2 .sc02_wrap .box_wrap .box {display: table; width: 100%; box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.6); height: 50vh; border-radius: 40px; padding: 0 50px; box-sizing: border-box; transform: translateY(-120px);}
#section2 .sc02_wrap .box_wrap .box .txt {padding-bottom: 50px; display: table-cell; vertical-align: bottom; text-align: center; }
#section2 .sc02_wrap .box_wrap .box .txt p{ font-size:1.1rem; color:#fff;}
#section2 .sc02_wrap .box_wrap:nth-child(2) .box {background: url('../img/sc02_bg02_04.png') no-repeat center; background-size: cover;}
#section2 .sc02_wrap .box_wrap:nth-child(3) .box {background: url('../img/sc02_bg03_03.png') no-repeat center; background-size: cover;}

#section3 {padding:6rem 0; display: block;}
#section3 h2 {font-size:3.8rem; color:#000;  margin:40px 0; text-align: center; font-weight: bold;}
#section3 ul {width:100%; margin:10px 0; display:inline-block;}
#section3 ul li {float:left; width:18.8%; display:inline-block; text-align: center;}
#section3 ul li img {display:inline-block;}


#section4 {background: url('../img/sc03_bg01.png') no-repeat center; background-size: cover;}

#section5 {background: radial-gradient(circle at 20% -10%, rgba(0, 15, 30, 0.4), transparent 55%), radial-gradient(circle at 80% 120%, rgba(0, 125, 168, 0.4), transparent 60%), linear-gradient(180deg, #060b1c 0%, #04060f 100%);}
.sc5_tit {font-size:3.4rem; line-height: 4rem; font-weight: bold; color: #fff; max-width: 100% !important; padding:0 0 20px; display: inline-block;}
#section5 ul {width:100%; display: inline-block; margin:0; padding:0;}
#section5 ul li {float: left; height:250px; color:#fff; padding:2% 3%; width:47.8%; margin:1%; border:1px solid #565c7e; border-radius: 10px;}
#section5 ul li:first-child {margin-left: 0;}
#section5 ul li:nth-child(3) {margin-left:0;}
.sc5_txt01 {font-size:2.2rem; font-weight: bold; width:100%; display: inline-block; padding:0 0 20px; color:#02defb;}
.sc5_txt01 span {color: #fff; font-size:2.5rem;}
.sc5_txt02 {font-size:1rem; color:#c5c5c5; word-break: keep-all;}

#ContactUS {background: radial-gradient(circle at 20% -10%, rgba(0, 15, 30, 0.4), transparent 55%), radial-gradient(circle at 80% 120%, rgba(0, 125, 168, 0.4), transparent 60%), linear-gradient(180deg, #060b1c 0%, #04060f 100%);}
.form_con {display: inline-block; width:100%; margin:2rem 0;}
.form_con .form_line:first-child {padding-bottom: 2rem; margin-bottom: 2rem; border-bottom: 1px solid #3a3a3a;}
.form_con .form_line {display: flex; margin-bottom:1rem;}
.form_con .form_line .form_label {flex: 0 0 19%; padding-top: 1rem; font-size:1.2rem; color:#fff;}
.form_con .form_line .form_label::after {content: "*"; color:#ff7300; margin-left:1rem;}
.form_con .form_line .form_contents {flex: 1; vertical-align: top;}
.form_con .form_line .form_contents .form_select {background: url('../img/ico-dropdown.png') #262626 no-repeat right 10px center / 24px; width:100%; height: 60px; font-size:1rem; border: 1px solid #3d3d3d; padding:10px 20px; color:#fff;}
.form_con .form_line .form_contents .form_input {width:100%; background: #262626; height:60px; font-size:1rem; border: 1px solid #3d3d3d; padding:10px 20px; color:#fff;}

.form_con .form_line .email_form {display: flex; align-items: center; gap:10px;}
.form_con .form_line .form_contents .form_conb {min-height: 150px; resize: vertical; width:100%; font-size: 1rem; border:1px solid #3d3d3d;  padding:10px 20px; background: #262626; color:#fff;}

.chk_line {padding:3rem 0 0; margin-top:3rem; border-top:1px solid #3d3d3d; width:100%;}
.form_con .form_line .form_contents .policy-content {width:100%; height:300px; overflow-y: auto; padding:2rem; background: #262626; color:#afafaf;}

.form_con .policy_txt {font-size:1rem; margin:10px 0;}
.form_con .chk_box input[type="checkbox"] {position: absolute; opacity: 0; width: 0; height: 0;}
.form_con .chk_box {position: relative; padding-left: 2rem; cursor: pointer; font-size: 1rem; user-select: none;}
.form_con .chk_box label:before {

  content: "";
  position: absolute;
  left:0;
  top:3px;
  width:20px;
  height:20px;
  border:1px solid #efefef;
  background: #fff;
  transition: all 0.2s ease;
  border-radius: 4px;

}

.form_con .chk_box input[type="checkbox"]:checked + label:before {
  background: #0035ff;
  border-color: #0035ff;
}

.form_con .chk_box input[type="checkbox"]:checked + label:after {
  content: "";
  position: absolute;
  left: 5px;
  top: 6px;
  width: 6px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.form_con .policy_b {width:100%; margin:30px 0; text-align: center;}
.form_con .policy_b .policy_btn {padding:15px 70px; display: inline-block; background: #0035ff; border:0; cursor: pointer; transition: background-color 0.3s; font-size: 1.4rem; color:#fff; border-radius: 30px;}



.sc_inner {max-width:1300px; margin: 0 auto;}

.reveal {
  opacity: 0;
  transform: translateY(-40px);
  transition: all 0.7s ease-out;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Footer ===== */
footer {
padding: 3rem 1.5rem;
text-align: center;
font-size: 0.85rem;
color: #9096b6;
background: #050816;
}

footer ul.foot_left {display: inline-block; float:left; padding-left:10%;}
footer ul.foot_left li {float:left; padding:0 20px;}
footer ul.foot_left li a {font-size:0.8rem; color:#fff;}

footer ul.foot_right {display: inline-block; float: right; padding-right:10%;}
footer ul.foot_right li {float:left; padding:0 20px;}

footer .f_txt {width:100%; display: inline-block;}
footer .f_txt2 {width:100%; display: inline-block; margin:30px 0 0; font-size:0.8rem; color:#919191;}



/* SUB 페이지 */

main.sub {background: radial-gradient(circle at 20% -10%, rgba(0, 15, 30, 0.4), transparent 55%), radial-gradient(circle at 80% 120%, rgba(0, 125, 168, 0.4), transparent 60%), linear-gradient(180deg, #060b1c 0%, #04060f 100%); height:100%;}

.sub_visual {background: url('../img/sc01_bg.png') no-repeat center -130px; background-size: cover; padding:20px 0 40px; text-align: center;}
.sub_visual h3 {font-size:3.4rem; font-weight: bold; margin:4.5rem 0 1rem;}
.sub_visual ul {display: inline-block;padding:0; margin:0;}
.sub_visual ul li {float: left; font-size:0.8rem; padding:0 10px;}
.sub_visual ul li i {color:#fff;}

.sub_con {width:100%; display: inline-block; }
.sub_con .sub_inner {width:1300px; margin:0 auto; text-align: center; padding-bottom: 150px;}
.sub_con .sub_inner div {width:100%; display: inline-block;}
.sub_con .bg_sub01 {position: relative; background: url('../img/sc02_bg02_04.png') no-repeat center; background-size:cover; padding:15rem 0; text-align: center;}
.sub_con .bg_sub01::before {
  content: "";
  position: absolute;
  inset: 0; /* top:0; right:0; bottom:0; left:0; */
  background: rgba(0, 0, 0, 0.8); /* 0.0 ~ 1.0로 조정 */
  pointer-events: none;
}
.sub_sc02 {background: url('../img/sub_bg02.png') no-repeat center; background-size: cover; position: relative; width:100%;}
.sub_sc02 ul {width:100%; display: inline-block; margin: 0; padding: 0;}
.sub_sc02 ul li {float:left; width:33.2%; height:100vh; padding:4%;}
.sub_sc02 ul li:nth-child(2), .sub_sc02 ul li:last-child {border-left:1px solid #1b2863;}

.sub_sc03 {height:100%; background: radial-gradient(circle at 20% -10%, rgba(0, 15, 30, 0.4), transparent 55%), radial-gradient(circle at 80% 120%, rgba(0, 125, 168, 0.4), transparent 60%), linear-gradient(180deg, #060b1c 0%, #04060f 100%);}
.sub_sc03 ul {display: grid !important;
  grid-template-columns: repeat(3, 1fr);  /* 3칸 */
  grid-template-rows: repeat(2, 1fr);     /* 2칸 */
  gap: 20px;                               /* 간격 */
  width: 100%;
  height: 280px; margin:1rem 0; padding:0;}
.sub_sc03 ul li  {
  justify-content: center;
  align-items: center; padding:2rem 3rem 3rem; border:1px solid #9096b6; float: left; min-height:280px; word-break:keep-all;}
.sub_sc03 ul li .sc03_txt01 {font-size:1.5rem; color:#fff; font-weight: bold;}
.sub_sc03 ul li .sc03_txt01 .point {color: #ff7300;}
.sub_sc03 ul li .sc03_txt02 {font-size: 1rem; color:#9096b6; margin-top: 1rem; overflow-wrap: break-word; word-break:keep-all;}

.sc03_pit {display: grid !important;
  grid-template-columns: repeat(3, 1fr);  /* 3칸 */
  grid-template-rows: repeat(2, 1fr);     /* 2칸 */
  gap: 20px;                               /* 간격 */
  width: 100%;
  height: 450px; margin:20px 0 0;}
.sc03_pit .sc03_bb { display: flex;
  justify-content: center;
  align-items: center; padding:40px 20px; border:1px solid #575757; word-break:keep-all;}
.sc03_pit .sc03_bb .sc03_bb_txt01 {font-size:1.3rem; color:#ff7300; font-weight: bold; padding:10px 0;}
.sc03_pit .sc03_bb .sc03_bb_txt02 {font-size:1rem; color:#9096b6;}
.sc03_pit .sc03_bb .sc03_bb_link {margin-top:15px;}
.sc03_pit .sc03_bb .sc03_bb_link a {color:#ff7300; font-size:0.95rem; text-decoration:none; transition:opacity 0.2s;}
.sc03_pit .sc03_bb .sc03_bb_link a:hover {opacity:0.7;}


.sub_txt01 {font-size:5.8rem; margin:40px 0 20px; font-family: 'GMarketSans'; font-weight: 300; line-height: 6rem;}
.sub_txt01 span{font-size:5.8rem; padding:10px 0; font-family: 'GMarketSans'; font-weight: 500;}
.sub_txt02 {font-size:1.2rem; margin:0px 0; line-height:2.4rem;}
.sub_txt02 span {padding:0.2rem 1.4rem; margin:0.8rem 0.4rem; display: inline-block; background: #fff; color:#000; font-size:1rem; border-radius: 2rem;}
.sub_txt02 strong{font-size:2rem;}
.sub_txt03 {font-size:1.4rem; margin:150px 0 20px; font-weight: 300; line-height: 2.4rem;}
.sub_txt03 span{font-size:4.6rem; padding:40px 0; font-family: 'Ria'; font-weight: 500;}
.sub_txt03 strong {font-size:4.4rem; padding:20px 0 40px; font-weight: bold;}
.sub_txt04 {font-size:1.2rem; position: absolute; bottom:5%; text-align: center; left:24%; transform: translateX(-24%);}
.sub_txt04 strong{font-size:1.5rem; line-height: 3.2rem;}


.usecase {text-align: center; padding:150px 0;}
.usecase .usecase_top_box {width:1400px; text-align: left; margin: 100px auto 0;}
.usecase .usecase_top_box dl {width:100%; display: inline-block;}
.usecase .usecase_top_box dl dt {float: left; width:40%; border-radius: 30px; background: #efefef; min-height: 300px;}
.usecase .usecase_top_box dl dd {float: left; width:58%; margin-left:2%; margin-top:20px;}
.u_txt01 {font-size:1rem;}
.u_txt02 {font-size:2rem; color:#fff; padding:10px 0 20px; font-weight: bold; line-height: 2.6rem;}
.u_txt03 {font-size:1.2rem; }


.sub_sc04 {text-align: center;}


.sub02_01_bg {background: url('../img/sub02_01_bg.png') no-repeat center; background-size: cover; padding:100px 0;}
.sub02_02_bg {background: url('../img/sub02_02_bg.png') no-repeat center; background-size: cover; padding:100px 0;}
.sub02_03_bg {background: url('../img/sub02_03_bg.png') no-repeat center; background-size: cover; padding:100px 0;}
.sub02_04_bg {background: url('../img/sub_bg_b.png') no-repeat center; background-size: cover; padding:100px 0;}
.sub03_01_bg {background: url('../img/sub03_01_bg.png') no-repeat center; background-size: cover; padding:100px 0;}
.sub03_02_bg {background: url('../img/sub03_02_bg.png') no-repeat center; background-size: cover; padding:100px 0;}

.agend-cta {display: inline-block; padding:15px 40px; background:#0035ff; color:#fff; border-radius:30px; font-size:1.2rem; text-decoration:none; margin-top:30px; transition:background-color 0.3s;}
.agend-cta:hover {background:#002ad4;}

.tabs {
  width: 100%;
  max-width: 1400px;
  margin: 40px auto;
}

.tab-buttons {
  display: flex;
  flex-wrap: wrap; /* 모바일에서 줄바꿈 */
}

.tab-btn {
  flex: 1;
  padding: 14px 0;
  text-align: center;
  cursor: pointer;
  border: none;
  font-size: 1.2rem;
  color:#fff;
  transition: background 0.2s; background: none;
}

.tab-btn:hover {
  font-weight: bold;
}

.tab-btn.active {
  color: #ff7300;
}

/* 콘텐츠 */
.tab-content {
  display: none;
  padding: 25px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.tab-content.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}


.tab_list {grid-column-gap: 32px; grid-row-gap:32px; grid-template-rows: auto; grid-template-columns: 1fr 1fr 1fr; grid-auto-columns: 1fr; display: grid;}
.tab_box {flex-flow: column; text-align: left; width:100%; height: 100%; text-decoration: none; display: flex; position: relative; overflow: hidden;}
.tab_box .tab_img {background:#efefef; border-radius: 20px; overflow: hidden; width:100%; min-height:200px; margin-bottom:1.6rem;}

.top-btn {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 50px;
  height: 50px;
  background: #222;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s ease;
  z-index: 999;
}

/* 보일 때 */
.top-btn.show {
  opacity: 1;
  visibility: visible;
}

/* ===== 모바일 최적화 ===== */
@media (max-width: 480px) {
  .tab-btn {
    flex: 1 1 50%; /* 모바일에서는 2줄 2칸으로 자동 배치 */
    font-size: 14px;
    padding: 12px 0;
  }

  .tabs {
    margin: 20px auto;
  }

  .tab-content {
    padding: 18px;
  }

  .tab-content h2 {
    font-size: 20px;
  }

  .tab-content p {
    font-size: 14px;
    line-height: 1.5;
  }
}

/* ===== 태블릿 (중간 화면) ===== */
@media (max-width: 768px) {
  .tab-btn {
    font-size: 15px;
    padding: 12px 0;
  }

  .tab-content {
    padding: 20px;
  }
}





/* 공통 */

.mg_t40 {margin-top:40px !important;}
.mg_t80 {margin-top:80px !important;}
.mg_t100 {margin-top:100px !important;}
.mg_t120 {margin-top:120px !important;}

.txt_center {text-align: center !important;}


  /* ===== 반응형 ===== */
  @media (max-width: 960px) {
    .hero-inner {
      grid-template-columns: minmax(0, 1fr);
      gap: 2.5rem;
    }

    

    .card-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

  }

  @media (max-width: 768px) {
    
    
    
    .nav-toggle {
      display: block;
    }

    nav {
      position: absolute;
      top: 100%;
      right: 0;
      left: 0;
      background: #050816;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.25s ease-out;
    }

    nav.open {
      max-height: 450px; /* 메뉴 열렸을 때 높이 */
    }

    .nav-menu {
      flex-direction: column;
      align-items: flex-start;
      padding: 0.75rem 1.5rem 1rem;
      gap: 0.75rem;
    }

    .nav-item:hover .dropdown {
      /* 모바일에서는 hover 대신 클릭으로 열게 JS 처리할 수도 있음 */
    }

    .dropdown {
      position: static;
      opacity: 1;
      visibility: visible;
      transform: none;
      box-shadow: none;
      padding-top: 0.25rem;
      background: transparent;
    }

    .dropdown li a {
      padding-left: 1.25rem;
      color:#48c5ff;
    }

    .section {height:100%; padding:20px 10px;}

    .hero-text h2 {font-size:5.6rem;}
    .hero-text p {font-size:0.9rem;}
    .hero-text .sc_txt {font-size:1.2rem;}

    #section2 .sc02_wrap {display: inline-block; width:100%; padding:60px 0;}
    #section2 .sc02_wrap .box_wrap {width:100%; height:350px;}
    #section2 .sc02_wrap .box_wrap h4 {margin:0; font-size:3rem;}
    #section2 .sc02_wrap .box_wrap h4 span {font-size:1.4rem;}
    #section2 .sc02_wrap .box_wrap .box {height:40vh; padding:0 25px; transform: translateY(-90px);}
    #section2 .sc02_wrap .box_wrap .box .txt p {font-size:14px;}

    #section3 h2 {font-size:30px;}
    #section3 ul {padding:0 20px;}
    #section3 ul li {width:25%;}
    #section5 {padding:0 2%;}

    #section5 ul li {width:100%; height:100%; margin:1% 0;}
    .sc5_tit {font-size:1.5rem; line-height: 2rem;;}
    .sc5_txt01 {padding: 0 0 10px; font-size:2rem;}
    .sc5_txt02 {font-size:0.9rem; line-height: 1; }

    .hero-text2 h2 {font-size:3.5rem;}
    .hero-text2 p {font-size:1rem;}
    .hero-text2 .sc_txt {font-size:1.2rem;}

    footer {padding:3rem 1rem; text-align: center;}
    footer ul.foot_left {width:100%; }
    footer ul.foot_left li {padding:0 5px;}
    footer ul.foot_left li a {font-size:12px;}

    footer ul.foot_right {margin:10px 0; clear: both; float: none;}
    footer .f_txt2 {font-size: 12px;}
    footer .f_txt {font-size:12px;}


    /* 서브페이지 */ 

    .sub_con .sub_inner {width: 100%; padding:0 1%;}

    .sub_sc02 {width:100%;}
    .sub_sc02 ul li {width:100%; margin:1% 0; height:100%;}
    .sub_txt01 {font-size:3.2rem;}

    /* sub02_04 SEbit AI 페이지 반응형 */
    .sc03_pit[style*="repeat(5"] {grid-template-columns: repeat(2, 1fr) !important;}
    .sc03_pit[style*="repeat(2"] {grid-template-columns: 1fr !important;}
    .sc03_pit {grid-template-columns: 1fr !important; height:auto !important;}
    .sc03_pit .sc03_bb {padding:25px 15px !important;}
    .sub_sc03 ul {grid-template-columns: 1fr !important; height:auto !important;}
    .sub_sc03 ul li {min-height:auto;}
    .sub_txt03 {margin:80px 0 20px;}
    .sub_txt03 span {font-size:3rem;}
    .sub_txt03 strong {font-size:2.8rem;}

  }