@charset "utf-8";

/* 전역: 한글 줄바꿈 + 강제 개행 허용 */
body, body *:not(pre):not(code):not(table) { word-break: keep-all !important; overflow-wrap: break-word !important; }

/* 코드/표: 줄바꿈 보존 + 가로 스크롤 허용 */
pre, code, table { word-break: normal; overflow-wrap: normal; max-width: 100%; overflow-x: auto; }

/* ---------- Typography family (unified) ---------- */
body, .content-wrap, .content_wrap, .services-v2, .core, .prod_info, .our-services, .sub_title2, .service-label, .core__title, .core__sub, .services-title { font-family: 'Noto Sans KR', system-ui, -apple-system, 'Segoe UI', 'Roboto', sans-serif !important; }
:root { --gray-50: #f5f5f5; --text: #111; --white: #fff; }
*, *::before, *::after { box-sizing: border-box; }

/* ---------- Sub titles / typography (consolidated) ---------- */
.sub_title2 { text-align: center; font-weight: 700; color: #333; font-size: 24px; line-height: 1.8; }
.sub_title2 .emph { color: #007ec4; font-size: 32px; font-weight: 700; }

/* ---------- Sub titles / typography (600) ---------- */
.content_wrap .sub_title p.sub_title2 { font-family: "Pretendard Variable","Noto Sans KR",system-ui,-apple-system,"Segoe UI",Roboto,Arial,"Apple SD Gothic Neo","Malgun Gothic",sans-serif; text-align: center; font-size: 36px !important; line-height: 1.5; color: #434343; letter-spacing: -1.0px; font-weight: 600; font-synthesis: none; }
@supports (font-variation-settings: normal) { .content_wrap .sub_title p.sub_title2 { font-variation-settings: "wght" 600; } }
.content_wrap .sub_title p.sub_title2 .emph { font-size: 40px !important; font-weight: 700; color: #007ec4; }

@media (max-width: 900px) {
  .content_wrap .sub_title p.sub_title2 {
    font-weight: 700;
    font-size: 24px !important;
    line-height: 1.6 !important;
    margin-bottom: -30px !important;
  }
  .content_wrap .sub_title p.sub_title2.custom-margin { margin-bottom: -80px !important; }
  .content_wrap .sub_title p.sub_title2 .emph { font-size: 28px !important; }
}


/* ---------- Greeting section ---------- */
.greeting { position: relative; max-width: 1200px; }
.greeting .img { background: url(../img/bg_greeting.jpg) no-repeat 50%; background-size: cover; height: 324px; margin-top: 110px; position: relative; }
.greeting .img:before { background: url(../img/bg_chairman.png) no-repeat; bottom: 0; content: ""; display: block; height: 400px; left: 135px; position: absolute; width: 400px; }
.greeting .tit { background: #4168ad; height: 274px; position: absolute; right: 70px; top: 90px; width: 514px; }
.greeting .tit h3 { box-sizing: border-box; color: #fff; font-size: 22px; font-weight: 100; letter-spacing: -1px; line-height: 1.6; margin: 0; padding: 140px 20px 0 50px; position: relative; text-align: left; word-break: keep-all; }
.greeting .tit h3:before { background: #fff; content: ""; display: block; height: 124px; left: 50px; margin: 0; position: absolute; top: 0; width: 1px; }
.greeting .tit h3 span { display: block; font-weight: 600; }
.greeting .colum { margin: 0 auto; max-width: 1160px; padding: 80px 20px 0 20px; }
.greeting .colum:after { clear: both; content: ""; display: block; }
.greeting .colum .left { float: left; width: 48%; }
.greeting .colum .right { float: right; width: 48%; }
.greeting .sign { background-position: right center; background-repeat: no-repeat; color: #222; font-size: 1.125em; font-weight: bold; line-height: 50px; margin-top: 0; padding-right: 100px; text-align: right; }
.greeting .sign .name { font-size: 24px; margin-left: 5px; }

@media (max-width: 980px) {
  .greeting .tit { height: auto; padding: 0 50px 50px 0; position: relative; right: 0; top: 0; width: 100%; }
  .greeting .tit h3 { font-size: 22px; line-height: 1.6em; }
  .greeting .tit h3 br { display: none; }
  .greeting .img { height: 253px; }
  .greeting .img:before { background-size: cover; height: 310px; left: 50%; margin-left: -150px; width: 300px; }
  .greeting .colum .left { clear: both; width: 100%; }
  .greeting .colum .right { clear: both; padding-top: 20px; width: 100%; }
}

@media (max-width: 560px) {
  .greeting .tit { height: auto; padding: 0 30px 30px 0; position: relative; right: 0; top: 0; width: 100%; }
  .greeting .tit h3 { font-size: 20px; }
  .greeting .colum { padding: 50px 10px 0 10px; }
  .greeting .colum .left, .greeting .colum .right { width: 100%; padding: 10px 0; }
}


/* ---------- About / Generic layout ---------- */
.about-img-wrapper { width: 100%; }
.responsive-img { display: block; height: auto; margin-bottom: 100px; width: 100%; }

@media (max-width: 767px) {
  .responsive-img { margin-bottom: 20px; }
}


/* ---------- Content / contact blocks ---------- */
.contact_t01 { color: #000; font-size: 1.7em; line-height: 1.8em; padding: 30px 0 60px; text-align: center; }
.contact_t01 span { color: #009fdc; font-weight: 600; }
.content01 .box { display: block; padding-bottom: 80px; position: relative; }
.content01 .box .img_right { float: right; }
.content01 .box .txt_wrap { background: #fff; padding: 40px; position: absolute; right: 0; top: 45px; width: 60%; }
.content01 .box .txt_wrap .half-round-tit { display: inline-block; margin-bottom: 20px; }
.content01 .box .txt_wrap .half-round-tit strong { color: #1a1a1a; float: left; font-size: 22px; font-weight: 500; letter-spacing: 0; line-height: 1.6; vertical-align: middle; }
.content01 .box .txt_wrap .half-round-tit span { background: #8abd00; border-radius: 50%; color: #fff; display: inline-block; float: left; font-size: 16px; height: 35px; line-height: 35px; margin-right: 10px; text-align: center; vertical-align: middle; width: 35px; }
.content01 .box .txt_wrap p { text-align: left; }
.content01 .box .txt_wrap02 { background: #fff; left: 0; position: absolute; top: 45px; width: 60%; }

@media screen and (max-width: 960px) {
  .contact_t01 { font-size: 1.4em; padding: 20px 0 20px; }
  .content01 .box .img { clear: both; display: block; float: none; text-align: center; }
  .content01 .box .img img { width: 100%; }
  .content01 .box .txt_wrap { clear: both; display: block; padding: 20px; position: relative; width: 100%; }
}


/* ---------- Lead text ---------- */
.lead2 { color: #555; margin-bottom: 50px; margin-top: 50px; }

@media (max-width: 767px) {
  .lead2 { margin-bottom: 0; margin-top: 0; }
}


/* ---------- Responsive layout for content list ---------- */
.content02 ul li { float: left; width: 50%; }
.content02 ul li .profile { float: left; padding-bottom: 50px; width: 48%; }
.content02 ul li .profile img { width: 100%; }
.content02 ul li dl { float: left; padding: 0 40px; width: 52%; }
.content02 ul li dl dt { color: #1a1a1a; font-size: 22px; font-weight: bold; letter-spacing: 0; padding-bottom: 20px; text-align: left; }
.content02 ul li dl dd { clear: both; color: #555; display: block; font-size: 16px; letter-spacing: -0.02em; line-height: 1.75; text-align: left; }

.counsel_area .left { float: left; width: 15%; }
.counsel_area .left h2 { color: #000; font-size: 18px; font-weight: bold; }
.counsel_area .left p { color: #555; font-size: 16px; }
.counsel_area .right { float: left; margin-bottom: 50px; text-align: left; width: 80%; }
.counsel_area .right .frm_input { width: inherit; }

@media screen and (max-width: 1210px) {
  .content02 ul li { margin-bottom: 6%; margin-left: 2%; width: 49%; }
  .content02 ul li:nth-child(2n+1) { margin-left: 0; }
  .content02 ul li .profile { width: 100%; }
  .content02 ul li dl { padding: 0 20px; width: 100%; }
}

@media screen and (max-width: 640px) {
  .content02 ul li { margin-left: 0; width: 100%; }
  .counsel_area .left, .counsel_area .right { width: 100%; }
}



/* ---------- Product info ---------- */
.prod_info { height: auto; margin-top: -90px; width: 100%; }
.prod_info .img_page { background-position: center; background-repeat: no-repeat; background-size: cover; height: 700px; width: 100%; }
.prod_info .img_page.bg01 { background-image: url(../img/prod01_bg.jpg); }
.prod_info .img_page.bg02 { background-image: url(../img/prod02_bg.jpg); }
.prod_info .img_page.bg03 { background-image: url(../img/prod03_bg.jpg); }
.prod_info .img_page.bg04 { background-image: url(../img/prod04_bg.jpg); }
.prod_info .img_page.bg05 { background-image: url(../img/prod05_bg.jpg); }
.prod_info .img_page.bg06 { background-image: url(../img/prod06_bg.jpg); }
.prod_info .img_page.bg07 { background-image: url(../img/prod07_bg.jpg); }
.prod_info .img_page.bg08 { background-image: url(../img/prod08_bg.jpg); }
.prod_info .img_page.bg09 { background-image: url(../img/prod09_bg.jpg); }
.prod_info .img_page.bg10 { background-image: url(../img/prod10_bg.jpg); }
.prod_info .img_page.bg11 { background-image: url(../img/prod11_bg.jpg); }
.prod_info .img_page.bg12 { background-image: url(../img/prod12_bg.jpg); }
.prod_info .img_page.bg_token { background-image: url(../img/token_bg.jpg); }
.prod_info .img_page.bg_token_purchase { background-image: url(../img/token_bg2.jpg); }

.prod_info .img_page .title { color: #fff; display: block; font-size: 50px; font-weight: 600; line-height: 1; margin-bottom: 44px; padding-top: 100px; text-align: center; }
.prod_info .img_page .sub_title { color: #fff; display: block; font-size: 27px; font-weight: 500; line-height: 1.3; margin-bottom: 10px; }
.prod_info .img_page .text { color: #fff; display: block; font-size: 16px; font-weight: 300; line-height: 1.6; margin-bottom: 44px; padding-top: 10px; }
.prod_info .img_page .text h2 { color: #fff; display: block; font-size: 24px; font-weight: 400; line-height: 1.6; margin-bottom: 20px; padding-top: 0; }

.s-text { font-size: 16px; }
.prod_info .txt_page { margin: 0 auto 20px; max-width: 1300px; padding: 10px; }
.prod_info .txt_page h2 { display: block; font-size: 32px; font-weight: 600; line-height: 1; margin-bottom: 44px; padding-top: 100px; }

@media (max-width: 768px) {
  .prod_info .img_page .title { font-size: 2rem !important; }
  .prod_info .img_page .sub_title {font-size: 20px; }
  .prod_info .text { font-size: 1rem; }
  .prod_info .img_page { height: auto; padding: 10px; }
  .content-flex-fixed .text, .content-flex .text { box-sizing: border-box; width: 100%; }
}


/* ---------- Product info note section ---------- */
.prod_info .note_section { color: #555; font-size: 1.2em; margin-top: 50px; padding: 20px; }
.prod_info .note_content { display: flex; flex-wrap: wrap; gap: 20px; }
.prod_info .note_text { margin-left: 40px; flex: 1 1 auto; max-width: 30%; }
.prod_info .note_text p { font-size: 1em; line-height: 1.6; margin: 0; }
.prod_info .note_image { flex: 1 1 auto; max-width: 40%; }
.prod_info .note_image img { height: auto; width: 100%; }

@media (max-width: 768px) {
  .prod_info .note_section { padding: 15px; }
  .prod_info .note_content { flex-direction: column; }
  .prod_info .note_text, .prod_info .note_image { max-width: 100%; }
}


/* ---------- Product info note section 2 ---------- */
.note_section2 { margin: 0 auto; max-width: 1000px; padding: 20px; }
.note_text2 { margin-bottom: 20px; }
.image_row2 { display: flex; flex-wrap: wrap; justify-content: space-between; }
.image_item2 { margin-bottom: 20px; width: calc(50% - 10px); }
.image_item2 img { display: block; height: auto; width: 100%; }

@media screen and (max-width: 768px) {
  .image_item2 { width: 100%; }
}


/* ---------- Product info text & table ---------- */
.prod_info .txt_page p { font-size: 1.4em; line-height: 1.75; }
@media (max-width: 960px) { .prod_info .txt_page p { font-size: 1em; } }

.prod_info .txt_page .lead { color: #555; font-size: 1.2em; line-height: 1.6; margin-bottom: 20px; text-align: justify; }

.prod_info .tbl-stat { border-collapse: collapse; margin-top: 20px; width: 100%; }
.prod_info .tbl-stat th, .prod_info .tbl-stat td { border: 1px solid #ddd; padding: 10px; text-align: left; }
.prod_info .tbl-stat th { background-color: #f4f4f4; font-weight: bold; }

.prod_info table { border-collapse: collapse; border-left: 1px solid #e0e0e0; border-right: 1px solid #e0e0e0; width: 100%; }
.prod_info th, .prod_info td { border: 1px solid #ddd; padding: 10px; text-align: left; }
.prod_info th { background-color: #f4f4f4; color: #333; }

@media (max-width: 960px) {
  .prod_info .note_content { align-items: flex-start; flex-direction: column; }
  .prod_info .note_image, .prod_info .note_text { margin-bottom: 40px; margin-right: 0; max-width: 90%; }
  .prod_info .txt_page .lead { font-size: 1em; }
  .prod_info .tbl-stat th, .prod_info .tbl-stat td { padding: 8px; font-size: 12px; }
}


/* ---------- Flexible content blocks ---------- */
.content-flex { align-items: flex-start; display: flex; flex-wrap: wrap; gap: 40px; padding: 40px 20px; }
.content-flex .image { flex: 0 0 40%; }
.content-flex .image img { display: block; height: auto; width: 100%; }
.content-flex .text { color: #333; flex: 1; font-size: 1.1em; line-height: 1.75; text-align: left; }

@media (max-width: 960px) {
  .content-flex { flex-direction: column; }
  .content-flex .image, .content-flex .text { flex: 1 0 100%; }
}

.br-pc { display: none; }
.br-mobile { display: none; }
@media (min-width: 769px) { .br-pc { display: inline; } }
@media (max-width: 768px) { .br-mobile { display: inline; } }

.usage-item { text-indent: -10px; padding-left: 12px; display: block; margin-top: 0; }

@media (max-width: 768px) {
  .img_page { padding: 30px 15px; }
  .content-flex-fixed { display: block; }
  .image, .text { width: 100%; }
}
  
/* ---------- Fixed flex block ---------- */
.content-flex-fixed { align-items: flex-start; box-sizing: border-box; display: flex; flex-wrap: nowrap; gap: 40px; margin: 0 auto; max-width: 1200px; padding: 40px 20px; }
.content-flex-fixed .image { flex: 0 0 40%; min-width: 380px; order: 0; }
.content-flex-fixed .image img { display: block; height: auto; width: 100%; }
.content-flex-fixed .text { color: #222; flex: 1; font-size: 1.1em; line-height: 1.8; min-width: 280px; order: 1; padding: 20px; position: relative; z-index: 2; }
.content-flex-fixed.reverse .text { order: 0; }
.content-flex-fixed.reverse .image { order: 1; }

@media (max-width: 768px) {
  .content-flex-fixed, .content-flex-fixed.reverse { flex-direction: column; flex-wrap: wrap; }
  .content-flex-fixed .image, .content-flex-fixed .text, .content-flex-fixed.reverse .image, .content-flex-fixed.reverse .text { min-width: auto; order: unset; width: 100%; }
}
  
/* ---------- Images / visuals ---------- */
.image-container { display: flex; justify-content: space-between; max-width: 1200px; width: 80%; }
.image-container img { height: auto; width: 49%; }

@media (max-width: 960px) {
  .image-container { max-width: 380px; width: 100%; }
  .image-container img { width: 49%; }
}

.image-container_2 { display: flex; justify-content: space-between; max-width: 700px; width: 100%; }
.image-container_2 img { height: auto; width: 340px; }

@media (max-width: 960px) {
  .image-container_2 { max-width: 380px; width: 100%; }
  .image-container_2 img { width: 49%; }
}

.lingo-image { height: auto; max-width: 380px; min-width: 350px; object-fit: contain; width: 100%; }

@media (max-width: 768px) {
  .lingo-image { margin: 0 auto; min-width: 0; width: 80%; display: block; max-width: none; }
}

  
/* ---------- Ruby & Sapphire Section ---------- */
.note-container-ruby { align-items: flex-start; display: flex; flex-wrap: wrap; gap: 40px; justify-content: center; margin: 60px 0; }
.note-image-ruby { flex: 1 1 200px; text-align: center; }
.lingo-image-ruby { min-width: 360px; height: auto; max-width: 400px; object-fit: contain; width: 100%; }
.prod_info .txt_page .note-container-ruby .note-image-ruby .note-caption-ruby { font-size: 18px; font-weight: 700; line-height: 1.35; margin-top: 12px; }

@media (max-width: 768px) {
  .note-container-ruby { align-items: center; flex-direction: column; }
  .lingo-image-ruby { display: block; max-width: 400px; margin: 0 auto; min-width: 300px; width: 80%; }
  .prod_info .txt_page .note-container-ruby .note-image-ruby .note-caption-ruby { font-size: 16px !important; line-height: 1.4; }
}


/* ---------- Ruby & Sapphire (deduped mobile rule) ---------- */
.ruby-sapphire-section .img_page.bg02 { height: auto !important; }

@media (max-width: 768px) {
  .ruby-sapphire-section .img_page.bg02 { padding: 20px 10px; }
}



/* ---------- JOJU TOKEN HERO ---------- */
@media (min-width: 1025px) {
  .joju-token-hero { 
    align-items: center; 
    background: url('../img/joju_main_bg.jpg') center/cover no-repeat; 
    color: var(--white); 
    display: flex; 
    flex-direction: column; 
    height: 852px; 
    justify-content: center; 
    margin-top: -50px; 
    min-height: 852px; 
    padding: 0 20px; 
    text-align: center; 
  }
  .joju-token-hero h3 { 
    font-weight: 300; 
    letter-spacing: .45em; 
    text-transform: uppercase; 
    font-size: clamp(35px, 1.3vw, 52px); 
    margin-bottom: 26px; 
  }
  .joju-token-hero h2 { 
    letter-spacing: -.01em; 
    line-height: 1.66; 
    font-weight: 600; 
    margin-top: 36px; 
    text-shadow: none; 
    font-size: clamp(40px, 5.8vw, 75px); 
  }
}

/* Responsive Media Queries for Mobile (1024px 이하) */
@media (max-width: 1024px) {
  .joju-token-hero { 
    align-items: center; 
    background: url('../img/joju_main_bg.jpg') center/cover no-repeat; 
    color: var(--white); 
    display: flex; 
    flex-direction: column; 
    height: auto; 
    justify-content: center; 
    margin-top: 0; 
    min-height: 560px; 
    padding: 56px 20px; 
    text-align: center; 
  }
  .joju-token-hero h3 { 
    margin-bottom: 14px; 
    font-size: 24px; 
    font-weight: 300; 
    line-height: 1.2; 
  }
  .joju-token-hero h2 { 
    font-size: 26px; 
    font-weight: 700; 
    line-height: 1.5; 
  }
}


  
/* ---------- VALUE section (merged & deduped) ---------- */
@media (min-width: 1025px) {
  .joju-token .value-section { background: linear-gradient(90deg, #e9edf3 0 38%, #fff 38% 100%) !important; padding: 72px 0 !important; font-family: 'Noto Sans KR','Pretendard',system-ui,-apple-system,Segoe UI,Roboto,sans-serif; letter-spacing: -0.008em; }
  .joju-token .value-inner { --sharkBleed: clamp(120px,12vw,240px); --containerW: 1440px; --gap: 24px; --colH: 680px; --leftCol: clamp(340px,32%,500px); --sharkW: clamp(420px,30vw,580px); --sharkTop: -180px; max-width: var(--containerW) !important; display: flex !important; align-items: stretch !important; gap: var(--gap) !important; margin: 0 auto !important; }
  .joju-token .value-left { background: transparent !important; display: flex !important; flex: 0 0 var(--leftCol) !important; flex-direction: column !important; justify-content: center !important; min-height: var(--colH) !important; padding: 0 32px 0 48px !important; }
  .joju-token .value-right { background: none !important; flex: 1 1 auto !important; min-height: var(--colH) !important; overflow: visible !important; padding: 0 12px 0 20px !important; position: relative !important; top: 120px !important; padding-left: 78px !important; }
  .joju-token .value-right .copy { margin-top: 12px; max-width: none !important; position: relative; transform: translateX(16px); z-index: 1; }
  .joju-token .value-right .copy p { font-size: 22px !important; letter-spacing: -0.05em; line-height: 1.6 !important; margin: 30px 0 18px !important; }
  .joju-token .value-left h2 { line-height: 1.15 !important; color: #1f4fb0 !important; font-size: clamp(54px,5.2vw,66px) !important; margin-bottom: 28px !important; }
  .joju-token .value-left p { letter-spacing: -0.01em !important; line-height: 1.4 !important; color: #1a1d26 !important; font-size: 30px !important; }
  .joju-token .value-left p strong { font-weight: 800 !important; color: inherit !important; font-size: 1.12em !important; }
  .joju-token .value-right .char { display: none !important; }
  .joju-token .value-right::before { content: none !important; }
  .joju-token .value-right::after { content: ""; position: absolute; right: calc(-1 * var(--sharkBleed)); top: var(--sharkTop); width: var(--sharkW); aspect-ratio: 1 / 1; background: url('../img/shark_character.png') no-repeat center/contain; pointer-events: none; z-index: 0; }
}

@media (max-width: 1024px) {
  .joju-token .value-section { background: #fff; padding: 48px 0; }
  .joju-token .value-inner { display: block; margin: 0 auto; max-width: 960px; }
  .joju-token .value-left, .joju-token .value-right { padding: 0 20px; }
  .joju-token .value-left { padding-left: 16px !important; }
  .joju-token .value-right { padding-left: 20px !important; }
  .joju-token .value-left h2 { font-size: clamp(22px,6vw,44px); color: #1f4fb0; }
  .joju-token .value-left p, .joju-token .value-right .copy p { font-size: 18px; line-height: 1.6; }
  .value-section .value-left { min-height: 300px; display: flex; justify-content: center; flex-direction: column; width: 100%; text-align: center; align-items: center; box-sizing: border-box; padding: 40px 16px; background-color: #e9edf3; }
  .joju-token .value-right .copy p { font-size: 18px; line-height: 1.6; margin-top: 26px; }
  .joju-token .value-right::after { content: none !important; }
  .joju-token .value-right .char { display: block !important; width: clamp(260px,60vw,380px); height: auto; margin: 16px auto 0; }
}



/* ---------- SLOGAN ---------- */
.slogan { 
  align-items: center; 
  background: url('../img/joju_main_bg2.jpg') right center/cover no-repeat; 
  color: #fff; 
  display: flex; 
  flex-direction: column; 
  height: 940px; 
  justify-content: center; 
  padding: 0 20px; 
  text-align: center; 
}
.slogan h3 { 
  font-size: 80px; 
  font-weight: 700; 
  margin-bottom: 80px; 
}
.slogan p { 
  font-size: 30px; 
  line-height: 1.8; 
  margin: 0 auto; 
  max-width: 1100px; 
}

@media (max-width: 768px) {
  .slogan { 
    background-position: center; 
    height: auto; 
    min-height: 500px; 
    padding: 60px 20px; 
  }
  .slogan h3 { 
    font-size: 40px; 
    margin-bottom: 40px; 
  }
  .slogan p { 
    font-size: 18px; 
    line-height: 1.7; 
  }
}



/* ---------- Core / Services titles (consolidated) ---------- */
.core .core__title, .core__title, .services-title { display: block; color: #003153; font-size: 64px; line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 24px; text-align: center; }
.core__sub, .services-sub { display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: #003153; font-size: 28px; line-height: 1.6; font-weight: 400; margin: 0 0 60px; text-align: center; }
.core__arrow, .arrow-icon { width: 32px; height: 32px; object-fit: contain; vertical-align: middle; margin-left: 8px; }

@media (max-width: 980px) {
  .core .core__title, .core__title, .services-title { font-size: 56px; }
  .core__sub, .services-sub { font-size: 22px; }
}

@media (max-width: 560px) {
  .core .core__title, .core__title, .services-title { font-size: 40px; letter-spacing: -0.01em; }
  .core__sub, .services-sub { font-size: 18px; gap: 4px; }
  .core__arrow, .arrow-icon { width: 20px; height: 20px; margin-left: 0; }
}



/* ---------- Core section ---------- */
.core { background: #fff; color: #000; font-family: 'Noto Sans KR','Pretendard',system-ui,-apple-system,Segoe UI,Roboto,sans-serif; letter-spacing: -0.008em; }
.core .core__inner { margin: 0 auto; max-width: 1600px; padding: 100px 20px 70px; text-align: center; }
.core .core__visual { margin: 0 auto 52px; }
.core .core__visual > img { display: block; height: auto; margin: 0 auto; width: min(100%,1600px); }
.core .core__cards { display: flex; gap: 0; justify-content: center; list-style: none; margin: 80px 0 50px; padding: 0; }
.core .core-card { flex: 1 1 0; max-width: 520px; padding: 6px 28px 0; position: relative; }
.core .core-card + .core-card::before { background: #b6c7e3; content: ""; height: 85%; left: 0; position: absolute; top: 50%; transform: translate(-1px,-50%); width: 2px; }
.core .core-card__title { color: #0047ab; font-size: 40px; font-weight: 700; letter-spacing: -0.05em; line-height: 1.18; margin: 0 0 12px; }
.core .core-card__title small { color: #0047ab; display: block; font-size: 32px; font-weight: 700; letter-spacing: -0.05em; vertical-align: baseline; white-space: nowrap; }
.core .core-card__desc { color: #222; font-size: 28px; font-weight: 500; letter-spacing: -0.07em; line-height: 1.64; margin-top: 20px; }

@media (max-width: 1280px) {
  .core .core__title { font-size: 64px; }
  .core .core-card__title { font-size: 38px; }
  .core .core-card__title small { font-size: 22px; }
  .core .core-card__desc { font-size: 20px; }
}

@media (max-width: 980px) {
  .core .core__title { font-size: 56px; }
  .core .core-card { padding: 10px 8px 0; }
  .core .core-card + .core-card::before { display: none; }
  .core .core__cards { flex-direction: column; gap: 18px; }
  .core .core-card:not(:last-child) { border-bottom: 1px solid #b6c7e3; padding-bottom: 24px; }
}

@media (max-width: 560px) {
  .core .core__title { font-size: 40px; letter-spacing: -0.01em; }
  .core .core-card__title { font-size: 28px; }
  .core .core-card__title small { font-size: 18px; margin-left: 6px; }
  .core .core-card__desc { font-size: 18px; }
}



/* ---------- FUTURE HERO ---------- */
.future-hero { background: #0b4aa8 url('../img/joju_main_bg3.jpg') center/cover no-repeat; color: #fff; overflow: hidden; position: relative; }
.future-hero__inner { margin: 0 auto; max-width: 1500px; min-height: 960px; padding: 56px 20px 0; position: relative; }
.future-hero__logo { display: block; height: auto; pointer-events: none; position: absolute; right: -50px; top: 90px; width: 120px; z-index: 3; }
.future-hero__text { letter-spacing: normal; max-width: 1100px; padding-right: 520px; position: relative; text-align: left; word-break: keep-all; z-index: 2; }
.future-hero__text h2 { color: #fff; font-size: clamp(60px, 4.8vw, 72px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.14; margin: 120px 0 16px; white-space: nowrap; }
.future-hero__text .accent { color: #fae927; }
.future-hero__text .sub { font-size: 30px; font-weight: 300; letter-spacing: 0.01em; margin: 40px 0 24px; opacity: .95; }
.future-hero__text .lead { color: #fff; font-size: 32px; letter-spacing: -0.07em; line-height: 1.6; margin: 120px 0 0; }
.future-hero__people { bottom: 0; margin: 0; position: absolute; right: 42px; text-align: right; z-index: 1; }
.future-hero__people img { pointer-events: none; max-width: none; display: block; filter: none; height: 600px; margin: 0; width: auto; }

@media (max-width: 1199.98px) {
  .future-hero__inner { min-height: auto; padding: 40px 16px 0; }
  .future-hero__logo { right: 16px; top: 50px; width: 64px; }
  .future-hero__text { max-width: none; padding-right: 0; top: -40px; }
  .future-hero__text h2 { font-size: clamp(34px, 6.2vw, 48px); line-height: 1.2; white-space: normal; }
  .future-hero__text .sub { font-size: clamp(16px, 2.2vw, 18px); margin-bottom: 16px; }
  .future-hero__text .lead { font-size: 18px; line-height: 1.8; margin-top: 50px; }
  .future-hero__people { bottom: auto; margin-top: 12px; position: static; right: auto; text-align: center; }
  .future-hero__people img { height: auto; max-width: min(560px, 90vw); }
}

@media (min-width: 1200px) {
  .future-hero__text { max-width: 1280px; padding-right: 480px; margin-left: -60px; }
  .future-hero__people { right: -80px; }
  .future-hero__text .lead { max-width: none; }
  .future-hero__inner { padding-left: 0; }
}



/* ---------- Banner ---------- */
.banner-wrap { background: url('../img/gradient_bg.jpg') center/cover no-repeat; margin: 0; text-align: center; width: 100%; }
.banner-wrap img { display: block; height: 570px; margin: 0 auto; max-width: 80%; object-fit: contain; width: auto; }

@media (max-width: 980px) {
  .banner-wrap img { height: 300px; max-width: 90%; }
}

@media (max-width: 560px) {
  .banner-wrap img { height: 200px; max-width: 95%; }
}



/* ---------- Video hero ---------- */
.hero-video { background: #000; position: relative; width: 100%; }
.hero-video__wrap { height: 90vh; min-height: 400px; overflow: hidden; position: relative; width: 100%; }
.hero-video__bg { background: #000; height: 100%; inset: 0; object-fit: cover; position: absolute; width: 100%; }
.hero-video__content { align-items: center; display: flex; inset: 0; justify-content: center; pointer-events: none; position: absolute; text-align: center; z-index: 1; }
.hero-video__title { aspect-ratio: 6/1; background: url('../img/token_text.png') center/contain no-repeat; color: transparent; font-size: 0 !important; font-weight: 0; letter-spacing: 0; overflow: hidden; text-indent: -9999px; text-shadow: none; width: clamp(260px, 60vw, 900px); }

@media (max-width: 900px) {
  .hero-video__title { aspect-ratio: 6/1; width: clamp(220px, 88vw, 720px); }
  .hero-video__wrap { height: 62vh; min-height: 320px; overflow: hidden; }
  .hero-video { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
  .hero-video__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; }
  .hero-video__content { inset: 0; padding: 0 16px; align-items: center; justify-content: center; text-align: center; }
  .hero-video__title { width: clamp(220px, 88vw, 640px); aspect-ratio: 6/1; }
}

@media (max-width: 900px) and (orientation: landscape) {
  .hero-video__wrap { height: 100vh; min-height: 300px; }
  .hero-video__title { width: clamp(220px, 55vw, 520px); }
}



/* ---------- Utility images ---------- */
.service-card > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.label-icon-img { display: inline-block; width: 48px !important; height: 48px !important; object-fit: contain; background: transparent; border-radius: 0; filter: none; }

/* ---------- Services grid ---------- */
.our-services { margin: 0 auto; max-width: 1200px; padding: 60px 20px; text-align: center; }
.our-services h2 { font-size: 5.5em; margin: 60px 0 30px; }
.our-services .subtitle { color: #444; font-size: 1.6em; line-height: 1.6; margin-bottom: 60px; }
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 auto; max-width: 1200px; column-gap: 36px; row-gap: 20px; }
.service-item { align-items: center; border-radius: 12px; display: flex; flex-direction: column; padding: 10px; transition: transform 0.2s ease; }
.service-item:hover { transform: translateY(-5px); }
.service-item img { border-radius: 8px; height: auto; max-width: 480px; object-fit: cover; width: 100%; }
.service-item p { color: #111; font-size: 1.5em; font-weight: 500; margin-top: 15px; }

@media (max-width: 1024px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .services-grid { 
    grid-template-columns: 1fr; /* 모바일에서 그리드 컬럼을 1로 설정 */
  }

  .service-item img { 
    max-width: 100%; 
  }

  .our-services h2 { 
    font-size: 3.5em !important;
  }
}

/* ---------- Services V2 ---------- */
.services-v2 .service-label { align-items: center; display: flex; flex-direction: column; gap: 10px; }
.services-badge-wrapper { text-align: center; margin: 40px 0 30px; }
.services-badge { max-width: 150px; width: 100%; height: auto; object-fit: contain; margin: 0 auto; }
.service-label { align-items: center; display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }
.label-text { color: #0063a2; font-size: 32px; font-weight: 700; line-height: 1.4; text-align: center; }

@media (max-width: 640px) {
  .services-v2 .label-text { font-size: 22px; }
}

.services-v2 .service-card { filter: drop-shadow(6px 3px 6px rgba(0,0,0,.45)) drop-shadow(0 2px 4px rgba(0,0,0,.12)); transition: transform .15s ease, filter .15s ease; background: transparent; border-radius: 10px; box-shadow: none; clip-path: none; overflow: hidden; }
.services-v2 .service-card:hover { filter: drop-shadow(9px 12px 14px rgba(0,0,0,.58)) drop-shadow(0 3px 6px rgba(0,0,0,.14)); transform: translateY(-1px); }
.services-v2 .service-card img { border-radius: inherit; display: block; height: 100%; object-fit: cover; width: 100%; }

@media (max-width: 480px) {
  .services-badge { max-width: 100px; }
}

/* ---------- Our Services Section ---------- */
.services-section { background: #fff; padding: 80px 0; }
.services-container { box-sizing: border-box; margin: 0 auto; max-width: 1372px; padding: 0 16px; }
.services-card { background: #eee; border-radius: 14px; box-shadow: 0 6px 12px -6px rgba(0,0,0,.22); padding: 30px 0 32px; text-align: center; }

/* ---------- Account Section ---------- */
.account-title { background: #6b95dd; border-radius: 12px; box-shadow: 0 6px 12px -6px rgba(0,0,0,.22); color: #fff; display: block; font-size: 20px; font-weight: 700; line-height: 1; margin: 20px 0 9px; padding: 20px 24px; width: 75%; margin: 0 auto; }
.account-box { background: #fff; border: 1px solid #e0e0e0; border-radius: 12px; box-shadow: 0 6px 12px -6px rgba(0,0,0,.22); color: #1a1d26; display: block; font-size: 22px; padding: 28px 24px; width: 75%; margin: 0 auto; margin: 8px auto 0 auto; }

@media (max-width: 1024px) {
  .account-title { width: 95%; }
  .account-box { width: 95%; margin: 8px auto 0 auto; }
}







/* ---------- Hero Grid Layout ---------- */
.hero-wrap { margin: 0 auto; max-width: 1372px; }
.cluster { margin: 0 auto; max-width: 970px; }

.hero-grid {
  display: grid;
  align-items: start;            /* 상단 정렬 (end → start) */
  justify-content: center;
  grid-template-columns: 630px 300px;
  gap: 6px;
  margin: 0 auto;
}

.hero-text {
  font-size: 24px;
  letter-spacing: -0.5px;
  line-height: 1.7;
  margin: 25px 0 0 50px;         /* 위 여백 확보 */
  color: #fff;
}
.hero-text p { margin: 0 0 10px; white-space: nowrap; }
.hero-text b { font-weight: 800; }

.hero-note   { color: #ff8a2b; font-size: 20px; }
.hero-thanks { font-size: 28px; font-weight: 500; padding-top: 40px; color: #fff; }

.hero-illust { text-align: right; }
.hero-illust img {
  filter: drop-shadow(0 16px 28px rgba(0,0,0,.45));
  height: auto;
  margin-top: 32px;
  max-width: 300px;
  width: 100%;
}

/* ---------- Background Token Purchase Section ---------- */
.bg_token_purchase {
  box-sizing: border-box;
  color: #fff;
  min-height: 760px;
  padding: 24px 20px;
  position: relative;
}

/* ---------- Sub Title Styles (base) ---------- */
.content_wrap .sub_title .sub_title2 span.txt-blue,
.content_wrap .sub_title .sub_title2 span.txt-dark {
  font-weight: 700;
  letter-spacing: -0.6px;
  line-height: 1.2;
}
.content_wrap .sub_title .sub_title2 span.txt-blue { color: #007ec4; font-size: 48px; }
.content_wrap .sub_title .sub_title2 span.txt-dark { color: #383737; font-size: 48px; }

/* ---------- Password & Signup Instructions ---------- */
.password-label     { letter-spacing: 3.5px; }
.signup-instruction { letter-spacing: 1px; margin-top: 8px; }

/* ---------- Button & Image Styles ---------- */
.btn-image { display: flex; justify-content: center; margin: 40px 0 8px; width: 100%; }
.btn-image img { display: block; height: auto; max-width: 720px; width: 100%; }

/* ---------- Desktop Only ---------- */
@media (min-width: 1025px) {
  .hero-grid { transform: translateX(110px); }
  .hero-text p:nth-of-type(1),
  .hero-text p:nth-of-type(2) { white-space: nowrap; }
}

/* ---------- ≤1024px (Tablet & Mobile) ---------- */
@media (max-width: 1024px) {
  .hero-thanks { font-size: 26px; }                  /* 중복 통합 */
  .hero-note   { font-size: 18px; } 
  .joju-token .value-right::after { content: none; } /* 유지 */
  .joju-token .value-right .char { display: block; } /* 유지 */

  .cluster { max-width: 720px; }
  .hero-grid { grid-template-columns: 1fr; gap: 18px; margin-left: 0; justify-items: center; }

  .hero-text { font-size: 20px; margin: 8px 0 0 10px; }
  .hero-text p:nth-of-type(1),
  .hero-text p:nth-of-type(2) { white-space: normal; }

  .hero-illust { text-align: center; }
  .hero-illust img { margin-top: 0; max-width: 240px; }

  .content_wrap .sub_title .sub_title2 span.txt-blue,
  .content_wrap .sub_title .sub_title2 span.txt-dark { font-size: 36px !important; }
}

/* ---------- ≤768px ---------- */
@media (max-width: 768px) {
  .hero-text  { font-size: 17px; margin: 10px 20px; }
  .hero-thanks{ font-size: 24px; }
  .hero-note   { font-size: 18px; } 

  .content_wrap .sub_title .sub_title2 span.txt-blue,
  .content_wrap .sub_title .sub_title2 span.txt-dark { font-size: 32px !important; }
}

/* ---------- ≤600px ---------- */
@media (max-width: 600px) {
  .hero-thanks { font-size: 20px; }
  .hero-note   { font-size: 17px; } 

  .content_wrap .sub_title .sub_title2 span.txt-blue,
  .content_wrap .sub_title .sub_title2 span.txt-dark { font-size: 30px !important; }

  .password-label     { letter-spacing: 2.2px; }
  .signup-instruction { letter-spacing: 0.5px; }

  .btn-image img { max-width: 100%; }
}







 /* 광물 영상 */


.video-wrapper {
  position: relative;
  width: 100%;
  max-width: 1200px; /* 필요 시 */
  margin: 60px auto 90px !important;
  aspect-ratio: 16 / 9; /* 근래 브라우저 */
  /* 만약 구형 지원이 필요하면 padding-top:56.25% 방식으로 대체 */
}

.video-wrapper__player,
.video-wrapper iframe { /* 과거 호환 위해 iframe 규칙 남겨도 됨 */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  border-radius: 12px; /* 선택 */
  background: #000;
}














/* 공통 여백/그리드 */
.company.about .company-hero {
  margin: 40px auto 60px;
  text-align: center;
}
.company.about .company-hero img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}

/* 아이콘 + 텍스트 */
.company-features {
  margin: 10px 0 70px;
}
.company-features .feature-grid {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 30px;
}

.feature-item {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.feature-ico-wrapper {
  width: 180px;  /* 아이콘 크기 */
  height: 180px;
  background-color: #fff;
  border-radius: 50%;  /* 원형으로 만들기 */
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);  /* 그림자 추가 */
  margin-bottom: 10px;
}

.feature-ico {
  width: 180px;  /* 아이콘을 동그라미 안에서 크기 맞추기 */
  height: 180px;  /* 아이콘 크기 조정 */
  object-fit: contain;
}

.feature-title {
  font-weight: 700;
  font-size: 1.4rem; /* 텍스트 크기 키우기 */
  margin: 6px 0 8px;
}

/* + 기호 스타일 */
.plus {
  font-size: 2rem;
  font-weight: bold;
  color: #555;
  margin: 0;
}

/* 비전·미션 섹션 */
.vision-mission {
  position: relative;
  padding: 70px 18px;
  border-radius: 20px;
  background:
    radial-gradient(1200px 600px at 10% 0%, rgba(0,140,255,0.08), transparent 60%),
    radial-gradient(1000px 500px at 90% 0%, rgba(0,200,160,0.08), transparent 60%),
    #0e1726; /* 깊은 네이비 */
  color: #f7fbff;
  overflow: hidden;
}
.vm-inner {
  max-width: 1180px;
  margin: 0 auto;
}
.vm-head {
  text-align: center;
  margin-bottom: 34px;
}
.vm-title {
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  letter-spacing: .02em;
  font-weight: 800;
}
.vm-title span:first-child { color: #51c4ff; }
.vm-title span:last-child { color: #62f0c6; }
.vm-sub {
  margin-top: 10px;
  color: #d5ecff;
  opacity: .9;
}


@media (min-width: 769px){
  .company-features .feature-grid{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 30px !important;
    flex-wrap: nowrap !important;
  }
  .company-features .plus-sign,
  .company-features .plus{ display: block !important; }

  /* 아이콘 사이즈 고정 */
  .feature-ico-wrapper{ width: 180px !important; height: 180px !important; }
  .feature-ico{ width: 180px !important; height: 180px !important; }
}

/* 모바일(≤768px): 2열 + 화면에 맞춰 축소 */
@media (max-width: 768px){
  /* 2열 그리드, + 기호 숨김 */
  .company-features .feature-grid{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    justify-items: center !important;
    align-items: start !important;
    gap: 14px 16px !important; /* 세로/가로 간격 */
  }
  .company-features .plus-sign,
  .company-features .plus{ display: none !important; }

  /* 동그라미와 내부 아이콘 모두 화면폭에 맞춰 축소 */
  .feature-ico-wrapper{
    width: clamp(110px, 34vw, 150px) !important;
    height: clamp(110px, 34vw, 150px) !important;
  }
  /* 내부 아이콘은 래퍼에 맞춰 100%로 채움 */
  .feature-ico{
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
  }

  /* 모바일에서 텍스트 약간만 축소 */
  .feature-title{ font-size: 1.2rem !important; margin: 4px 0 6px !important; }
}





html,body{overflow-x:hidden}
.vm-section.full-bg{
  position:relative; width:100vw;
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  background:#0f1923 url("../img/bg-vision-mission.jpg") center/cover no-repeat;
  color:#e9eef5; overflow:hidden; z-index:0;
}
@supports (width:100dvw){
  .vm-section.full-bg{width:100dvw;margin-left:calc(50% - 50dvw);margin-right:calc(50% - 50dvw)}
}
.vm-section.full-bg::before{
  content:""; position:absolute; inset:-1px; z-index:0;
  background:rgba(0,0,0,.08);
}

.vm-inner{
  position:relative; z-index:1;
  width:90%; max-width:1250px; margin-inline:auto;
  padding:96px 0 0; box-sizing:border-box; 
  margin-bottom:80px;                    
}
.vm-hero{text-align:center; margin-bottom:62px}
.vm-hero-kicker{margin:0 0 6px; font-weight:600; font-size:clamp(30px,3.2vw,36px); color:#22c4ff}
.vm-hero-title{margin:0; font-weight:700; font-size:clamp(32px,3.8vw,42px); color:#fff}
.vm-stack{display:grid; gap:44px}
.vm-box{
  position:relative; display:grid;
  grid-template-columns:360px 1fr; column-gap:44px;
  padding:36px 40px; border:1px solid rgba(255,255,255,.18);
  border-radius:12px; background:rgba(0,32,63,.41);
}
.vm-box::before{
  content:attr(data-title); display:block; grid-column:1/-1;
  margin:6px 6px 22px; font-weight:500; font-size:32px; line-height:1.25; color:#fff;
}
.vm-box-media img{
  display:block; width:100%; height:260px; object-fit:cover; border-radius:8px; margin:0;
}
.vm-box-media::after,.vm-caption{display:none}
.vm-box-body{display:flex; flex-direction:column; justify-content:center; padding-block:10px}
.vm-box-title{margin:0 0 14px; font-size:22px; font-weight:600; color:#fff}
.vm-box-desc{margin:0; padding-left:3.0rem; font-size:20px; line-height:1.95; color:#e3eaf2}

@media (max-width:900px){
  .vm-box{grid-template-columns:1fr; padding:28px 22px; column-gap:24px}
  .vm-box::before{font-size:20px; margin:4px 2px 12px}
  .vm-box-media img{height:220px}
  .vm-box-list,.vm-box-desc{font-size:18px; line-height:1.9}
}

.company02-page .vm-section.full-bg{margin-bottom:0!important; padding-bottom:0!important; overflow:hidden}
.company02-page .vm-section.full-bg::before{inset:-1px!important; background:rgba(0,0,0,.08)!important}
.company02-page .vm-section.full-bg + *{margin-top:0!important; padding-top:0!important}
.company02-page #container,.company02-page .wrap{padding-bottom:0!important; margin-bottom:0!important}



@media (min-width:901px){
  .company02-page .vm-box-media img{width:430px!important; height:303px!important; object-fit:cover!important}
  .company02-page .vm-box{padding:52px 64px!important; column-gap:80px!important}
}
.company02-page .vm-box-body .vm-box-list{
  list-style:none!important; counter-reset:vmnum!important;
  padding-left:3.2rem!important; margin:0!important; font-size:20px; line-height:1.95; color:#e3eaf2;
}
.company02-page .vm-box-body .vm-box-list li{
  position:relative!important; display:block!important; counter-increment:vmnum!important;
  margin:.35em 0 .35em; padding-left:1.7rem; text-indent:-.3rem;  
}
.company02-page .vm-box-body .vm-box-list li::before{
  content:counter(vmnum) "."!important; position:absolute!important; left:0!important; top:0!important;
  font-weight:700!important; color:#bfe3ff!important; line-height:1.95!important;
}

.company02-page .vm-box { align-items: flex-start !important; }
.company02-page .vm-box-body { justify-content: flex-start !important; }

.company02-page .vm-box-body .vm-box-list {
  padding-left: 3.2rem !important;
}
.company02-page .vm-box-body .vm-box-list li {
  padding-left: 1.7rem !important;
  text-indent: -.3rem !important;
}

@media (max-width: 900px){
  .company02-page .vm-box { align-items: flex-start !important; }
  .company02-page .vm-box-body { justify-content: flex-start !important; }

  .company02-page .vm-box-media img { height: 220px !important; }

  .company02-page .vm-box-body .vm-box-list {
    font-size: 15px !important;
    line-height: 1.9 !important;
    padding-left: 1.1rem !important;  
  }
  .company02-page .vm-box-body .vm-box-list li{
    padding-left: 1.0rem !important;  
    text-indent: -.2rem !important;    
    margin: .1em 0 .1em !important;
  }
  .company02-page .vm-box-body .vm-box-list li::before{
    line-height: 1.9 !important;
  }

  .company02-page .vm-box-desc{
    font-size: 15px !important;
    line-height: 1.9 !important;
    padding-left: 0.6rem !important;
  }
}



/* ===== Business Area : CLEAN (short) ===== */

/* Intro */
.headline{ text-align:center; margin-top:-60px; margin-bottom:60px; position:relative; z-index:1; }
.highlight-box{ display:inline-block; padding:24px 20px; border-radius:16px; background:rgba(0,123,255,.08); }
.kicker.big{ display:block; margin:0 0 14px; color:#0068b7; font-weight:700; font-size:32px; }
.sub.big{ margin:0; color:#1d2430; font-size:24px; font-weight:500; }

/* Intro 배경(PC 240px 고정) */
.headline.with-bg{
  height:240px; padding:0 28px; box-sizing:border-box;margin-top:0; margin-bottom: 60px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  border:1px solid #e9edf3; border-radius:16px; box-shadow:0 8px 22px rgba(0,0,0,.06);
  background:url('/theme/lingo/img/business_bg.jpg') center/cover no-repeat; overflow:hidden;
}
.headline.with-bg::before{ content:none; }
.headline.with-bg .highlight-box{ background:transparent; border:0; box-shadow:none; padding:0 32px; }

/* Services (PC 좌우 교차) */
.services-col{ display:flex; flex-direction:column; gap:28px; margin:28px 0 40px; }
.service-item{
  display:flex; align-items:center; gap:40px; padding:28px; text-align:left;
  background:#fff; border:1px solid #e9edf3; border-radius:14px; box-shadow:0 6px 18px rgba(20,35,67,.06);
}
.service-item.odd{ flex-direction:row; }
.service-item.even{ flex-direction:row-reverse; }
.service-item .icon img{ width:340px; height:240px; object-fit:cover; border-radius:12px; display:block; }
.service-item .desc{ flex:1; min-width:0; }
.service-item .desc h3{ margin:0 0 12px; font-size:24px; font-weight:700; color:#0f1728; }
.service-item .desc p{ margin:0; color:#4a5568; font-size:16.5px; line-height:1.9; }

/* Minerals */
.minerals-head h3{ margin:34px 0 12px; color:#0f1728; font-size:26px; font-weight:600; line-height:1.25; }
.table-wrap{ overflow-x:auto; margin:10px 0 24px; }
.mineral-table{ width:100%; border-collapse:collapse; background:#fff; }
.mineral-table thead th{ background:#2f3f53; color:#fff; font-weight:700; font-size:15px; padding:12px; text-align:center; }
.mineral-table th,.mineral-table td{ border:1px solid #d9e1ea; }
.mineral-table td{ padding:12px 14px; text-align:center; font-size:15px; color:#1f2937; background:#fff; }

/* Strength */
.strength{ margin:80px 0; text-align:center; }
.strength h3{ font-size:32px; font-weight:600; color:#0f1728; margin:0 0 68px; }
.strength-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; max-width:1400px; margin:0 auto; }
.strength-item{ display:flex; flex-direction:column; align-items:center; gap:14px; background:transparent; border:none; box-shadow:none; padding:0; }
.strength-item .ico{ width:150px; height:150px; display:flex; align-items:center; justify-content:center; border-radius:999px; background:rgba(0,123,255,.10); box-shadow:0 8px 22px rgba(0,0,0,.18); }
.strength-item .ico img{ width:74px; height:74px; object-fit:contain; }
.strength-item p{ margin:0; line-height:1.4; text-align:center; white-space:pre-line; }
.strength-item p .line1{ display:block; font-size:22px; font-weight:600; color:#0068b7; margin-top:14px; margin-bottom:-8px; }
.strength-item p .line2{ display:block; font-size:16px; font-weight:500; color:#2b3748; max-width:220px; margin-inline:auto; padding-inline:8px; }

/* Hover 비활성 */
.service-item, .strength-item, .strength-item .ico{ transition:none !important; }
.service-item:hover, .service-item .icon img:hover, .strength-item:hover, .strength-item .ico:hover{ transform:none !important; filter:none !important; }

/* ===== Responsive ===== */
@media (max-width:1200px){
  .strength-grid{ grid-template-columns:repeat(3,1fr); gap:22px; }
}
@media (max-width:1024px){
  .service-item .icon img{ width:280px; height:200px; }
  .service-item{ gap:24px; padding:22px; }
  .strength-grid{ grid-template-columns:repeat(2,1fr); gap:20px; }
  .strength-item .ico{ width:120px; height:120px; }
  .strength-item .ico img{ width:64px; height:64px; }
}
/* 모바일: 지그재그 제거 + 인트로/서비스 타이포/자간 + 이미지 확대 */
@media (max-width:768px){
  .service-item{ flex-direction:column !important; }
  .service-item .icon{ order:1 !important; }
  .service-item .desc{ order:2 !important; }
  .service-item .icon img{ width:100%; height:260px !important; } /* 240 → 260 */

  .headline.with-bg{ height:200px; padding:0 16px; }
  .headline .kicker.big, .headline.with-bg .kicker.big{ font-size:22px; font-weight:800; }
  .headline .sub.big,    .headline.with-bg .sub.big{    font-size:16px; line-height:1.45; }
  .headline .highlight-box p{ word-break:keep-all; overflow-wrap:anywhere; }

  .service-item .desc h3{ font-size:20px; line-height:1.35; margin-bottom:8px; letter-spacing:-0.02em; } /* 자간 축소(1~5 공통) */
  .service-item .desc p{  font-size:15px; line-height:1.7; }
}
@media (max-width:600px){
  .strength-grid{ grid-template-columns:repeat(2,1fr); gap:18px; }
}
@media (max-width:480px){
  .strength-item p{ line-height:1.5; }
  .strength-item p .line1{ font-size:18px; margin-top:10px; margin-bottom:-14px; }
  .strength-item p .line2{ font-size:14px; max-width:180px; padding-inline:6px; }
}

/* ===== Radius override: 카드 6px, 썸네일 12px ===== */
.content_wrap .service-item{ border-radius:6px !important; overflow:visible !important; clip-path:none !important; }
.content_wrap .service-item .icon{ border-radius:12px; overflow:hidden; }
.content_wrap .service-item .icon img{ border-radius:12px !important; clip-path:none !important; }





 /* Contact Us */

  :root{
    --brand: #0068b7;   
    --ink:   #0f172a;  
    --line:  #e5e7eb;  
    --card-bg: linear-gradient(180deg, #ffffff, #f8fbff);
  }
  .content_wrap .txtCon .sub_title{ margin-bottom: 60px; } 
  .content_wrap .location_area .contact-map{
    max-width: 1200px;
    margin: 0 auto;
    padding: 8px 16px 24px; 
    color: var(--ink);
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans KR", Apple SD Gothic Neo, "Helvetica Neue", Arial;
  }

  .content_wrap .location_area .contact-card{
    background: var(--card-bg);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(2, 6, 23, 0.08);
    padding: 22px; 
  }

  .content_wrap .location_area .contact-grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px 28px;
    text-align: center;
  }
  @media (min-width: 900px){
    .content_wrap .location_area .contact-grid{ grid-template-columns: 1fr 1fr; }
  }

  .content_wrap .location_area .contact-item h3{
    display:inline-flex; align-items:center; gap:8px;
    margin:0 0 6px; font-size:1rem; font-weight:800; color:var(--brand);
  }
  .content_wrap .location_area .contact-item p{
    margin:0; font-size:0.95rem; line-height:1.7;
  }
  .content_wrap .location_area .contact-item a,
  .content_wrap .location_area .contact-item a:visited{
    color: inherit; text-decoration: none;
  }
  .content_wrap .location_area .contact-item a:hover{
    text-decoration: underline; text-underline-offset: 2px;
  }

  /* 지도 영역 */
  .content_wrap .location_area .map-wrap{ margin-top: 18px; }
  .content_wrap .location_area .map-ratio{
    position: relative; width: 100%;
    padding-top: 38%;                 /* 데스크톱 기본 (가로형) */
    border-radius: 8px; overflow: hidden;
    border: 1px solid var(--line);
    box-shadow: 0 4px 12px rgba(2, 6, 23, 0.10);
  }
  @media (max-width: 1024px){
    .content_wrap .location_area .map-ratio{ padding-top: 55%; }
  }
  @media (max-width: 768px){
    .content_wrap .txtCon .sub_title{ margin-bottom: 60px; }   
    .content_wrap .location_area .contact-map{ padding-top: 6px; }
    .content_wrap .location_area .map-ratio{
      padding-top: 75vh;           
      min-height: 420px;             
      border-radius: 8px;
    }
  }

  .content_wrap .location_area .map-iframe{
    position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
  }