/* 공통 */
body{font-size: 18px; line-height: 30px; font-family: 'Poppins', sans-serif, '맑은고딕', '돋움' ,arial; cursor: none;}
.maxBox{width: calc(100% - 20%); margin: 0 auto;}
@font-face {
    font-family: 'Poppins';
    src: url("./font/Poppins-Light.ttf") format('truetype');
    font-weight: 300;
}

@font-face {
    font-family: 'Poppins';
    src: url("./font/Poppins-Medium.ttf") format('truetype');
    font-weight: 500;
}

@font-face {
    font-family: 'Poppins';
    src: url("./font/Poppins-Bold.ttf") format('truetype');
    font-weight: 700;
}

/* 로딩페이지 */
#loading {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #fff; display: flex; justify-content: center; align-items: center; z-index: 9999; font-weight: 500;}
.logo-mask {width: 0; overflow: hidden; position: relative;}
.logo-mask img {width: 495px; display: block;}
.logo-mask .shine {position: absolute; top: 0; left: -150px; width: 150px; height: 100%; transform: skewX(-20deg); background: linear-gradient(120deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0.7) 50%,rgba(255,255,255,0) 100%);}

/* 커서용 */
.cursor-inner{position: fixed; top: 0; left: 0; width: 8px; height: 8px; background-color: #7C3AED; border-radius: 50%; pointer-events: none; z-index: 9999; transform: translate(-50%, -50%); transition: transform 0.1s linear;}
.cursor-outer{position: fixed; top: 0; left: 0; width: 40px; height: 40px; border: 2px solid #7C3AED; border-radius: 50%; pointer-events: none; z-index: 9998; opacity: 0.6; box-shadow: 0 0 10px rgba(124, 58, 237, 0.3); transform: translate(-50%, -50%);}

/* 헤더 */
header{width:100%; position: fixed; left: 0; top: 0; z-index: 9; padding: 20px 0; box-sizing: border-box; transition: transform 0.4s ease, background 0.3s ease;}
header.hide{transform: translateY(-100%);}
header.scrolled{background: rgba(255,255,255,0.7); backdrop-filter: blur(10px); box-shadow: 0 2px 10px rgba(0,0,0,0.05);}
header> div{display: flex; justify-content: space-between; width: calc(100% - 100px); margin: 0 auto;}
header> div h1{display: flex; justify-content: center; align-items: center; gap: 20px;}
header> div h1 img{width: 130px;}
header> div h1 p{font-size: 17px; font-weight: 500;}
header> div> ul{display: flex; justify-content: center; align-items: center; gap: 50px;}
header> div> ul> li{font-size: 17px; color: #1a1a1a;}
header ul li a{position: relative; display: inline-block; transition: color 0.3s ease;}
header ul li a::after{content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor;  transform: scaleX(0); transform-origin: left; transition: transform 0.35s ease;}
header ul li a:hover{color: #1a1a1a;}
header ul li a:hover::after{transform: scaleX(1);}
header> div> ul> li.contact button{background: #1a1a1a; color: #fff; border-radius: 7px; padding: 10px 20px; display: flex; justify-content: center; align-items: center; font-size: 14px; gap: 10px; font-weight: bold;}

/* INTRO  */
.introWrap{padding: 120px; display: flex; justify-content: center; align-items: center; text-align: center; height: 100vh; background: linear-gradient(135deg, #ffffff 40%, #e0f2fe); position: relative; overflow: hidden; z-index: 2; transition: opacity 0.6s ease, filter 0.6s ease;}
.introWrap .maxBox{position: relative; z-index: 2; opacity: 0; transform: translateY(30px);}
.introWrap span{background: linear-gradient(90deg, #4F46E5, #7C3AED); color: #fff; padding: 10px 30px; border-radius: 50px; z-index: 1; position: relative;}
.introWrap h2{font-size: 84px; margin: 30px 0; color: #1a1a1a; line-height: 90px; letter-spacing: -2px; z-index: 1; position: relative;}
.introWrap h2 b{background: linear-gradient(90deg, #4F46E5, #7C3AED); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.introWrap p{color: #1a1a1a; font-size: 20px; line-height: 34px; z-index: 1; position: relative;}
.globe-wrap{position: absolute; right: -200px; bottom: -200px; width: 760px; opacity: 0.4; z-index: 1; pointer-events: none; will-change: transform;}
.globe{width: 100%; filter: blur(0.2px); opacity: 0.95;}
.triangle-wrap{position: absolute; left: -120px;  top: -200px; width: 520px; opacity: 1; pointer-events: none; z-index: 1;}
.triangle-shape{width: 100%; height: 100%;}
.tri-front{opacity: 0.3;}

/* BUSINESS */
.businessWrap{height: 300vh; overflow: visible;}
.businessWrap .videoBox{position: sticky; top: 0; height: 100vh; object-fit: cover;}
.businessWrap .videoBox video{width: 100%; height: 100%; object-fit: cover;}
.businessWrap .overlay{position: absolute; inset: 0; background: rgba(0,0,0,0.6);}
.businessWrap .galleryText{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 900px; font-size: 36px; font-weight: bold; color: #ccc; line-height: 1.5; text-align: center; word-break: break-all;}
.businessWrap .galleryText span{color: #aaa; transition: color 0.4s ease;}
.businessWrap .galleryText span.active {color: #fff;}

/* SERVICE */
.serviceWrap{display: flex; justify-content: space-between; margin-bottom: 150px; position: relative;}
.serviceWrap .maxBox{display: flex; align-items: flex-start; gap: 90px; position: relative; z-index: 2;}
.serviceWrap .left{width: 35%; position: sticky; top: 150px; margin-top: 150px; height: calc(100vh - 150px); position: sticky;}
.serviceWrap .network{position: absolute; left: 0; bottom: 0; width: 480px; height: 480px; z-index: 10; opacity: 1;}
.serviceWrap .network svg{transform: scaleX(-1) scale(1.3); transform-origin: center;}
.serviceWrap .network line{stroke: #7C3AED; stroke-width: 1.5; opacity: 0.3;}
.serviceWrap .network circle{fill: #7C3AED; r: 4;}
.serviceWrap .left span, .serviceWrap .left h3, .serviceWrap .left p{position: relative; z-index: 2;}
.serviceWrap .left span{font-weight: bold; background: linear-gradient(90deg, #4F46E5, #7C3AED); color: #fff; padding: 10px 30px; border-radius: 50px; font-size: 15px;}
.serviceWrap .left h3{font-size: 70px; margin: 20px auto; line-height: 80px;}
.serviceWrap .left p{color: #555; font-size: 18px; line-height: 30px;}
.serviceWrap .right{width: 65%; margin-top: 150px;}
.serviceWrap .right .grid{position: relative;}
.serviceWrap .right .card{position: absolute; width: calc(50% - 20px);}
.serviceWrap .right .card .media{border-radius: 20px; overflow: hidden;}
.serviceWrap .right .card img, .serviceWrap .right .card video{width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; border-radius: 20px;}
.serviceWrap .right .card h4{font-size: 40px; color: #1a1a1a; margin-top: 20px; line-height: 44px;}
.serviceWrap .right .card p{line-height: 1.6; overflow-wrap: break-word; margin: 20px 0; font-size: 15px; color: #555;}
.serviceWrap .right .card ol{display: flex; flex-wrap: wrap; gap: 8px;}
.serviceWrap .right .card ol li{font-size: 15px; padding: 10px 15px; background: #f1f5f9; color: #64748b; border-radius: 999px; line-height: 1; transition: all 0.3s ease;}

/* CONTACT */
.contactWrap{padding: 100px 0; background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url(../images/contactImg.png) no-repeat center/cover; background-attachment: fixed; width: 100%; text-align: center;}
.contactWrap .text .imgBox{width: 200px; height: 75px; vertical-align: middle; background: #f00; display: inline-block;}
.contactWrap .text .imgBox img{width: 100%; height: 100%; object-fit: cover; display: block;}
.contactWrap .text{font-size: 50px; line-height: 1.5; font-weight: bold; color: #fff; margin-bottom: 30px;}
.contactWrap button{position: relative; overflow: hidden; transition: all 0.3s ease; background: #1a1a1a; padding: 15px 40px; border-radius: 10px; color: #fff; display: flex; gap: 10px; align-items: center; margin: 0 auto; font-size: 15px;}
.contactWrap button::after{content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255,255,255,0.4), transparent); transition: all 0.6s ease;}
.contactWrap button:hover::after{left: 100%;}

/* FOOTER */
footer{background: #1a1a1a; padding: 70px 0; box-sizing: border-box;}
footer h1 img{width: 200px;}
footer .cont{display: flex; justify-content: space-between; margin-top: 30px; font-weight: 300;}
footer .cont .left{display: block;}
footer .cont .left p{font-size: 20px; color: #fff; margin-bottom: 10px; font-weight: bold;}
footer .cont .left dl{display: flex; color: #999; gap: 10px; font-size: 20px; margin-bottom: 5px;}
footer .cont .left dl:last-child{margin-bottom: 0;}
footer .cont .left dl dt{color: #fff;}
footer .cont .right{display: grid; color: #fff; font-size: 20px; gap: 60px;}
footer .cont .right ul{display: flex; gap: 20px; }
footer .cont .right .topBtn{background: #555; width: 70px; height: 70px; display: flex; justify-content: center; align-items: center; justify-self: end; font-size: 15px;}

/* CONTACT모달 */
.modal{position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); opacity: 0; pointer-events: none; transition: 0.3s; z-index: 9999; visibility: hidden;}
.modal.active{opacity: 1; pointer-events: auto; visibility: visible;}
.modalContent {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 900px; max-width: 90%; max-height: 90%; background: #fff; border-radius: 20px; padding: 50px; box-shadow: 0 20px 60px rgba(0,0,0,0.2); min-height: 90%; overflow-y: auto;}
.closeBtn{position: absolute; top: 15px; right: 30px; font-size: 46px; background: none; border: none; cursor: pointer; color: #1a1a1a;}
.contactHeader h2 {font-size: 42px; font-weight: 700; margin-bottom: 30px; line-height: 1.3;}
.contactHeader p{color: #666; margin-bottom: 40px; font-size: 15px;}
.contactForm{display: flex; flex-direction: column; gap: 15px;}
.formRow{display: flex; gap: 20px;}
.formRow .formGroup{flex: 1;}
.formGroup{display: flex; flex-direction: column;}
.formGroup label{font-size: 14px; margin-bottom: 6px; font-weight: 600;}
.formGroup label span{color: #aaa; font-weight: 400;}
.formGroup input, .formGroup textarea{border: 1px solid #ddd; border-radius: 10px; padding: 14px; font-size: 14px; transition: 0.2s;}
.formGroup input:focus, .formGroup textarea:focus{border-color: #000; outline: none;}
.formGroup textarea{resize: none;}
.submitBtn{margin-top: 10px; height: 55px; border-radius: 12px; background: linear-gradient(90deg, #4F46E5, #7C3AED); color: #fff; font-size: 16px; font-weight: 600; cursor: pointer; border: none; transition: 0.3s;}

/* ==========================
   ✅ 태블릿 가로 (1400px 이하)
========================== */
@media (max-width: 1400px) {
  /* 공통 */
  .maxBox{width: calc(100% - 60px);}
  body{cursor:auto}

  /* 커서용 */
  .cursor-inner, .cursor-outer{display: none;}

  /* 헤더 */
  header> div{width: calc(100% - 60px);}
  header> div h1 p{display: none;}
  header> div> ul{gap: 25px;}

  /* INTRO */
  .introWrap{padding: 80px 40px; }
  .introWrap h2{font-size: 52px; line-height: 60px;}
  .globe-wrap{width: 500px; right: -150px; bottom: -150px;}
  .triangle-wrap{width: 350px; left: -100px; top: -150px;}

  /* BUSINESS */
  .businessWrap .galleryText{width: 50%; font-size: 32px;}

  /* SERVICE */
  .serviceWrap .maxBox{flex-direction: column; gap: 60px;}
  .serviceWrap .left, .serviceWrap .right{width: 100%;}
  .serviceWrap .left{position: relative; height: auto; margin-top: 80px;}
  .serviceWrap .left h3{font-size: 42px; line-height: 50px;}
  .serviceWrap .network{display: none;}
  .serviceWrap .right{margin-top: 150px;}
  .serviceWrap .right .card{position: relative; width: 100%; margin-bottom: 60px;}

  /* CONTACT */
  .contactWrap .text{font-size: 40px;}
  .contactWrap .text .imgBox{width: 150px; height: 60px;}

  /* FOOTER */
  footer .cont .left p, footer .cont .left dl, footer .cont .right{font-size: 18px;}
}


/* ==========================
   ✅ 태블릿 세로 (1024px 이하)
========================== */
@media (max-width: 1024px) {
  /* 공통 */
  .maxBox{width: calc(100% - 130px);}

  /* 로딩페이지 */
  .logo-mask img{width: 350px;}

  /* 헤더 */
  header{padding: 25px 0;}
  header> div{width: calc(100% - 40px);}
  header> div h1 img{width: 100px;}
  header> div> ul> li:nth-child(1), header> div> ul> li:nth-child(2), header> div> ul> li:nth-child(3), header> div> ul> li:nth-child(4){display: none;}
  
  /* INTRO */
  .introWrap{padding: 60px 20px;}
  .introWrap h2{font-size: 34px; line-height: 40px; margin: 20px 0;}
  .introWrap p{font-size: 16px; line-height: 28px;}
  .introWrap span{font-size: 15px;}

  /* BUSINESS */
  .businessWrap{height: 200vh;}
  .businessWrap .galleryText{font-size: 32px; width: 60%;}

  /* SERVICE */
  .serviceWrap{margin-bottom: 80px;}
  .serviceWrap .grid{display: block;}
  .serviceWrap .right{margin-top: 100px; margin-top: 100px;}
  .serviceWrap .left h3{font-size: 48px; line-height: 52px;}
  .serviceWrap .left p{font-size: 16px;}
  .serviceWrap .right .card{width: 100% !important; margin-bottom: 40px; left: 0 !important;}
  .serviceWrap .right .card h4{font-size: 32px; line-height: 40px; margin-top: 10px;}
  .serviceWrap .right .card p{font-size: 15px; margin: 10px 0;}

  /* CONTACT */
  .contactWrap{padding: 80px 0; background-attachment: scroll;}
  .contactWrap .text{font-size: 32px;}
  .contactWrap .text .imgBox{width: 120px; height: 50px;}

  /* FOOTER */
  footer h1 img{width: 160px;}
  footer .cont{flex-direction: column; gap: 30px; position: relative;}
  footer .cont .right{gap: 20px;}
  footer .cont .left dl{margin-bottom: 0;}
  footer .cont .right .topBtn{position: absolute; right: 0; bottom: 0; width: 60px; height: 60px;}

}


/* ==========================
   ✅ 모바일 (480px 이하)
========================== */
@media (max-width: 480px) {
  /* 공통 */
  .maxBox{width: calc(100% - 60px);}

  /* 헤더 */
  header{padding: 20px 0;}
  header> div> ul> li.contact button{font-size: 11px; gap: 5px;}
  header> div> ul> li.contact button img{width: 12px;}

  /* 로딩페이지 */
  .logo-mask{transform: scale(0.6);}
  .logo-mask img{width: 320px;}

  /* INTRO */
  .introWrap h2{font-size: 40px; line-height: 44px;}
  .globe-wrap{width: 320px;}
  .triangle-wrap{width: 200px;}
  .introWrap span{font-size: 13px; padding: 10px 20px; font-weight: bold;}
  .introWrap p{font-size: 13px; line-height: 20px;}

  /* BUSINESS */
  .businessWrap .galleryText{font-size: 20px; line-height: 1.4; width: calc(100% - 100px);}

  /* SERVICE */
  .serviceWrap .left{margin-top: 0;}
  .serviceWrap .left span{font-size: 13px; padding: 7px 20px;}
  .serviceWrap .left p{font-size: 13px; line-height: 20px;}
  .serviceWrap .left h3{font-size: 32px; line-height: 38px; margin: 10px auto;}
  .serviceWrap .right{margin-top: 120px;}
  .serviceWrap .right .card{margin-bottom: 50px;}
  .serviceWrap .right .card p{margin: 10px 0 15px 0;}
  .serviceWrap .right .card h4{font-size: 24px; margin-top: 15px;}

  /* CONTACT */
  .contactWrap .text{font-size: 22px;}
  .contactWrap .text .imgBox{width: 90px; height: 36px;}
  .contactWrap button{font-size: 13px; padding: 12px 30px;}

  /* FOOTER */
  footer{padding: 40px 0;}
  footer h1 img{width: 100px;}
  footer .cont .left p, footer .cont .left dl, footer .cont .right{font-size: 13px;}
  footer .cont .left p{margin-bottom: 0;}
  footer .cont .left dl{line-height: 22px;}
  footer .cont .right .topBtn{bottom: initial; top: -70px; width: 54px; height: 54px; font-size: 13px;}

  /* MODAL */
  .modalContent{padding: 30px 20px;}
  .contactHeader h2{font-size: 24px;}
  .formRow{flex-direction: column;}
  .submitBtn{font-size: 15px;}
  .closeBtn{font-size: 36px; right: 20px;}
  .formGroup label{margin-bottom: 0;}

}