@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');

.sound_only {
    display: none;
}

body {
    font-family: 'Pretendard', sans-serif;
}

/* ===== FADEIN 애니메이션 - 공통 사용 가능 ===== */

/* FadeIn 애니메이션 - 이동 없음 */
.fadein {
opacity: 0 !important;
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.fadein.show {
opacity: 1 !important;
}

/* FadeIn Up 애니메이션 - 재사용 가능한 클래스 */
.fadein-up {
opacity: 0 !important;
transform: translateY(40px) !important;
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.fadein-up.show {
opacity: 1 !important;
transform: translateY(0) !important;
}

/* FadeIn Right 애니메이션 */
.fadein-right {
opacity: 0 !important;
transform: translateX(-60px) !important;
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.fadein-right.show {
opacity: 1 !important;
transform: translateX(0) !important;
}

/* 슬라이드 업 애니메이션*/



/* 애니메이션 지연 시간 */
.fadein-up[data-delay="0"] { transition-delay: 0s !important; }
.fadein-up[data-delay="100"] { transition-delay: 0.1s !important; }
.fadein-up[data-delay="200"] { transition-delay: 0.2s !important; }
.fadein-up[data-delay="300"] { transition-delay: 0.3s !important; }
.fadein-up[data-delay="400"] { transition-delay: 0.4s !important; }
.fadein-up[data-delay="500"] { transition-delay: 0.5s !important; }
.fadein-up[data-delay="600"] { transition-delay: 0.6s !important; }
.fadein-up[data-delay="700"] { transition-delay: 0.7s !important; }
.fadein-up[data-delay="800"] { transition-delay: 0.8s !important; }
.fadein-up[data-delay="900"] { transition-delay: 0.9s !important; }
.fadein-up[data-delay="1000"] { transition-delay: 1s !important; }

.fadein-right[data-delay="0"] { transition-delay: 0s !important; }
.fadein-right[data-delay="100"] { transition-delay: 0.2s !important; }
.fadein-right[data-delay="200"] { transition-delay: 0.2s !important; }
.fadein-right[data-delay="300"] { transition-delay: 0.4s !important; }
.fadein-right[data-delay="400"] { transition-delay: 0.4s !important; }
.fadein-right[data-delay="500"] { transition-delay: 0.5s !important; }
.fadein-right[data-delay="600"] { transition-delay: 0.6s !important; }
.fadein-right[data-delay="700"] { transition-delay: 0.7s !important; }
.fadein-right[data-delay="800"] { transition-delay: 0.8s !important; }

/* ===== SLIDE UP 애니메이션 - 아래에서 위로 밀어올리듯 드러나는 효과 ===== */

/* SlideUp 애니메이션 - 아래에 완전히 숨겨져 있다가 위로 올라오는 효과 */
.slide-up {
    overflow: hidden !important;
    position: relative !important;
    height: auto !important;
}

.slide-up > div {
    transform: translateY(calc(100% + 10px)) !important;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.slide-up.show > div {
    transform: translateY(0) !important;
}

/* SlideUp 애니메이션 지연 시간 */
.slide-up[data-delay="0"] { transition-delay: 0s !important; }
.slide-up[data-delay="100"] { transition-delay: 0.1s !important; }
.slide-up[data-delay="200"] { transition-delay: 0.2s !important; }
.slide-up[data-delay="300"] { transition-delay: 0.3s !important; }
.slide-up[data-delay="400"] { transition-delay: 0.4s !important; }
.slide-up[data-delay="500"] { transition-delay: 0.5s !important; }
.slide-up[data-delay="600"] { transition-delay: 0.6s !important; }
.slide-up[data-delay="700"] { transition-delay: 0.7s !important; }
.slide-up[data-delay="800"] { transition-delay: 0.8s !important; }
.slide-up[data-delay="900"] { transition-delay: 0.9s !important; }
.slide-up[data-delay="1000"] { transition-delay: 1s !important; }
.slide-up[data-delay="2000"] { transition-delay: 2s !important; }
.slide-up[data-delay="3000"] { transition-delay: 3s !important; }

/* ===== SCALE IN 애니메이션 - 중앙부터 크기 커지는 효과 ===== */

/* ScaleIn 애니메이션 - 중앙부터 크기 커지는 효과 */
.scale-in {
    opacity: 0 !important;
    transform: scale(0.3) !important;
    transition: all 1s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.scale-in.show {
    opacity: 1 !important;
    transform: scale(1) !important;
}

/* ScaleIn 애니메이션 지연 시간 */
.scale-in[data-delay="0"] { transition-delay: 0s !important; }
.scale-in[data-delay="100"] { transition-delay: 0.1s !important; }
.scale-in[data-delay="200"] { transition-delay: 0.2s !important; }
.scale-in[data-delay="300"] { transition-delay: 0.3s !important; }
.scale-in[data-delay="400"] { transition-delay: 0.4s !important; }
.scale-in[data-delay="500"] { transition-delay: 0.5s !important; }
.scale-in[data-delay="600"] { transition-delay: 0.6s !important; }
.scale-in[data-delay="700"] { transition-delay: 0.7s !important; }
.scale-in[data-delay="800"] { transition-delay: 0.8s !important; }
.scale-in[data-delay="900"] { transition-delay: 0.9s !important; }
.scale-in[data-delay="1000"] { transition-delay: 1s !important; }


/* ===== 체크박스 스타일 - 공통 사용 가능 ===== */


/* 체크박스 기본 스타일 */
input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #d1d5db;
    border-radius: 4px;
    background-color: #ffffff;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease-in-out;
}

/* 체크박스 호버 상태 */
input[type="checkbox"]:hover {
    border-color: #042E22;
    box-shadow: 0 0 0 2px rgba(4, 46, 34, 0.1);
}

/* 체크박스 포커스 상태 */
input[type="checkbox"]:focus {
    outline: none;
    border-color: #042E22;
    box-shadow: 0 0 0 3px rgba(4, 46, 34, 0.2);
}

/* 체크박스 선택된 상태 */
input[type="checkbox"]:checked {
    background-color: #042E22;
    border-color: #042E22;
}

/* 체크박스 체크마크 스타일 */
input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* 체크박스 비활성화 상태 */
input[type="checkbox"]:disabled {
    background-color: #f3f4f6;
    border-color: #d1d5db;
    cursor: not-allowed;
    opacity: 0.6;
}

input[type="checkbox"]:disabled:checked {
    background-color: #9ca3af;
    border-color: #9ca3af;
}

/* ===== INPUT, TEXTAREA 기본 스타일 제거 ===== */

/* input과 textarea의 기본 focus outline 제거 */
input:focus,
textarea:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* input과 textarea의 기본 border 스타일 제거 */
input,
textarea {
    outline: none !important;
    box-shadow: none !important;
}

/* input과 textarea의 기본 focus 상태에서 나타나는 border 제거 */
input:focus-visible,
textarea:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* 모든 input 타입에 대해 기본 스타일 제거 */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
textarea:focus {
    outline: none !important;
    box-shadow: none !important;
    border: inherit !important;
}


/* 구글 번역 부분 커스텀 css - 번역기능 있을 경우만 사용 */

/* 구글 번역 부분 커스텀 css - 번역기능 있을 경우만 사용 */

body {
    position: static !important;
    top: 0px !important;
  }
  
  .goog-logo-link {
    display: none !important;
  }
  
  .goog-te-gadget {
    color: transparent !important;
    display: none !important;
  }
  
  body>.skiptranslate,
  .goog-logo-link,
  .gskiptranslate,
  .goog-te-gadget span,
  .goog-te-banner-frame,
  #goog-gt-tt,
  .goog-te-balloon-frame,
  div#goog-gt- {
    display: none !important;
  }
  
  .goog-te-gadget {
    color: transparent !important;
    font-size: 0px;
    width: 100px;
  
  }
  
  .goog-text-highlight {
    background: none !important;
    box-shadow: none !important;
  }
  
  #google_translate_element select {
    background: transparent;
    color: #000;
    border: none;
    font-weight: bold;
    border-radius: 0px;
    padding: 8px 12px
  }
  
  .notranslate {
    translate: no !important;
  }

/* 영어/스페인어 페이지에서 2뎁스 메뉴 폰트 사이즈 조정 */
body.english-page .sub-menu-link,
body.spanish-page .sub-menu-link {
    font-size: 0.875rem !important; /* 14px */
}

/* 한국어가 아닌 페이지에서 전체 폰트 사이즈 조정 */
body.english-page,
body.spanish-page,
body.japanese-page,
body.chinese-page,
body.arabic-page {
    font-size: 0.95rem; /* 기본 폰트 사이즈를 95%로 축소 */
}

/* 한국어가 아닌 페이지에서 제목 폰트 사이즈 조정 */
body.english-page h1,
body.spanish-page h1,
body.japanese-page h1,
body.chinese-page h1,
body.arabic-page h1 {
    font-size: 0.9em;
}

body.english-page h2,
body.spanish-page h2,
body.japanese-page h2,
body.chinese-page h2,
body.arabic-page h2 {
    font-size: 0.9em;
}

body.english-page h3,
body.spanish-page h3,
body.japanese-page h3,
body.chinese-page h3,
body.arabic-page h3 {
    font-size: 0.9em;
}

/* 한국어가 아닌 페이지에서 텍스트 요소들 폰트 사이즈 조정 */
body.english-page p,
body.spanish-page p,
body.japanese-page p,
body.chinese-page p,
body.arabic-page p {
    font-size: 0.95em;
}

body.english-page .text-sm,
body.spanish-page .text-sm,
body.japanese-page .text-sm,
body.chinese-page .text-sm,
body.arabic-page .text-sm {
    font-size: 0.8rem !important; /* text-sm의 95% */
}

body.english-page .text-base,
body.spanish-page .text-base,
body.japanese-page .text-base,
body.chinese-page .text-base,
body.arabic-page .text-base {
    font-size: 0.95rem !important; /* text-base의 95% */
}

body.english-page .text-lg,
body.spanish-page .text-lg,
body.japanese-page .text-lg,
body.chinese-page .text-lg,
body.arabic-page .text-lg {
    font-size: 1.05rem !important; /* text-lg의 95% */
}

body.english-page .text-xl,
body.spanish-page .text-xl,
body.japanese-page .text-xl,
body.chinese-page .text-xl,
body.arabic-page .text-xl {
    font-size: 1.125rem !important; /* text-xl의 95% */
}

body.english-page .text-2xl,
body.spanish-page .text-2xl,
body.japanese-page .text-2xl,
body.chinese-page .text-2xl,
body.arabic-page .text-2xl {
    font-size: 1.35rem !important; /* text-2xl의 95% */
}

body.english-page .text-3xl,
body.spanish-page .text-3xl,
body.japanese-page .text-3xl,
body.chinese-page .text-3xl,
body.arabic-page .text-3xl {
    font-size: 1.5rem !important; /* text-3xl의 95% */
}

body.english-page .text-4xl,
body.spanish-page .text-4xl,
body.japanese-page .text-4xl,
body.chinese-page .text-4xl,
body.arabic-page .text-4xl {
    font-size: 1.8rem !important; /* text-4xl의 95% */
}

body.english-page .text-5xl,
body.spanish-page .text-5xl,
body.japanese-page .text-5xl,
body.chinese-page .text-5xl,
body.arabic-page .text-5xl {
    font-size: 2.25rem !important; /* text-5xl의 95% */
}

/* 차트 카드 내 텍스트 언어별 스타일 조정 */
body.english-page .chart-card .text-sm,
body.spanish-page .chart-card .text-sm,
body.japanese-page .chart-card .text-sm,
body.chinese-page .chart-card .text-sm,
body.arabic-page .chart-card .text-sm {
    font-size: 0.75rem !important; /* 12px */
    line-height: 1.2 !important;
}

/* 차트 그리드 최소 너비 언어별 조정 */
body.english-page .chart-grid,
body.spanish-page .chart-grid,
body.japanese-page .chart-grid,
body.chinese-page .chart-grid,
body.arabic-page .chart-grid {
    min-width: 700px !important; /* 기본보다 넓게 */
}

/* 차트 카드 너비 언어별 조정 */
body.english-page .chart-card,
body.spanish-page .chart-card,
body.japanese-page .chart-card,
body.chinese-page .chart-card,
body.arabic-page .chart-card {
    width: 300px !important; /* 기본보다 넓게 */
}

/* 차트 원형 크기 언어별 조정 */
body.english-page .chart-round,
body.spanish-page .chart-round,
body.japanese-page .chart-round,
body.chinese-page .chart-round,
body.arabic-page .chart-round {
    width: 250px !important; /* 기본보다 작게 */
    height: 250px !important; /* 기본보다 작게 */
}

/* 차트 원형 조각 크기 언어별 조정 */
body.english-page .chart-piece,
body.spanish-page .chart-piece,
body.japanese-page .chart-piece,
body.chinese-page .chart-piece,
body.arabic-page .chart-piece {
    width: 120px !important; /* 기본보다 작게 */
    height: 120px !important; /* 기본보다 작게 */
}

/* 차트 원형 조각 내 텍스트 크기 언어별 조정 */
body.english-page .chart-piece .text-lg,
body.spanish-page .chart-piece .text-lg,
body.japanese-page .chart-piece .text-lg,
body.chinese-page .chart-piece .text-lg,
body.arabic-page .chart-piece .text-lg {
    font-size: 0.75rem !important; /* 12px */
    line-height: 1.1 !important;
}

/* tech-description-text 줄 간격 언어별 조정 */
body.english-page .tech-description-text div,
body.spanish-page .tech-description-text div,
body.japanese-page .tech-description-text div,
body.chinese-page .tech-description-text div,
body.arabic-page .tech-description-text div {
    line-height: 1 !important; /* 기본보다 좁게 */
    margin-bottom: 0.25rem !important; /* 요소 간 간격 줄임 */
}

/* 언어별 미디어 쿼리 - 특정 너비와 높이에서 컨텐츠 사이즈 조절 */
@media screen and (min-width: 1024px) and (max-height: 767px) {
    
    /* 외국어 페이지에서 main banner section */
    body.english-page #main_bn,
    body.spanish-page #main_bn,
    body.japanese-page #main_bn,
    body.chinese-page #main_bn,
    body.arabic-page #main_bn,
    body.english-page .main_banner_owl .item,
    body.spanish-page .main_banner_owl .item,
    body.japanese-page .main_banner_owl .item,
    body.chinese-page .main_banner_owl .item,
    body.arabic-page .main_banner_owl .item,
    body.english-page .video-item,
    body.spanish-page .video-item,
    body.japanese-page .video-item,
    body.chinese-page .video-item,
    body.arabic-page .video-item {
        width: 530px;
        height: 50vh;
    }
    
    body.english-page .video-container,
    body.spanish-page .video-container,
    body.japanese-page .video-container,
    body.chinese-page .video-container,
    body.arabic-page .video-container {
        width: 530px;
        height: 50vh;
    }
    
    body.english-page .video-container iframe,
    body.spanish-page .video-container iframe,
    body.japanese-page .video-container iframe,
    body.chinese-page .video-container iframe,
    body.arabic-page .video-container iframe {
        width: 530px;
        height: 50vh;
    }

    /* 외국어 페이지에서 tech section */
    body.english-page .tech-header,
    body.spanish-page .tech-header,
    body.japanese-page .tech-header,
    body.chinese-page .tech-header,
    body.arabic-page .tech-header {
        height: 20vh !important;
    }

    body.english-page .tech-header > div,
    body.spanish-page .tech-header > div,
    body.japanese-page .tech-header > div,
    body.chinese-page .tech-header > div,
    body.arabic-page .tech-header > div {
        font-size: 2rem !important;
        padding: 0 !important;
    }

    body.english-page .tech-header-text div,
    body.spanish-page .tech-header-text div,
    body.japanese-page .tech-header-text div,
    body.chinese-page .tech-header-text div,
    body.arabic-page .tech-header-text div,
    body.english-page .tech-description-text div,
    body.spanish-page .tech-description-text div,
    body.japanese-page .tech-description-text div,
    body.chinese-page .tech-description-text div,
    body.arabic-page .tech-description-text div {
        font-size: 1rem !important;
        line-height: 1.2 !important;
    }
    
    body.english-page .tech-img-1 > img,
    body.spanish-page .tech-img-1 > img,
    body.japanese-page .tech-img-1 > img,
    body.chinese-page .tech-img-1 > img,
    body.arabic-page .tech-img-1 > img {
        width: auto;
        height: 40vh !important;
    }

    body.english-page .chart-text,
    body.spanish-page .chart-text,
    body.japanese-page .chart-text,
    body.chinese-page .chart-text,
    body.arabic-page .chart-text {
        display: none !important;
    }

    body.english-page .chart-grid,
    body.spanish-page .chart-grid,
    body.japanese-page .chart-grid,
    body.chinese-page .chart-grid,
    body.arabic-page .chart-grid {
        margin-top: 4px !important;
        min-width: auto !important;
    }

    body.english-page .chart-grid div,
    body.spanish-page .chart-grid div,
    body.japanese-page .chart-grid div,
    body.chinese-page .chart-grid div,
    body.arabic-page .chart-grid div {
        font-size: 0.6rem !important;
    }
    
    body.english-page .chart-card,
    body.spanish-page .chart-card,
    body.japanese-page .chart-card,
    body.chinese-page .chart-card,
    body.arabic-page .chart-card {
        width: 260px !important;
        height: 20vh !important;
    }

    body.english-page .chart-round,
    body.spanish-page .chart-round,
    body.japanese-page .chart-round,
    body.chinese-page .chart-round,
    body.arabic-page .chart-round {
        width: 31vh !important;
        height: 31vh !important;
    }
    
    body.english-page .chart-piece,
    body.spanish-page .chart-piece,
    body.japanese-page .chart-piece,
    body.chinese-page .chart-piece,
    body.arabic-page .chart-piece {
        width: 15vh !important;
        height: 15vh !important;
    }

    /* 외국어 페이지에서 news section */
    body.english-page .news-left,
    body.spanish-page .news-left,
    body.japanese-page .news-left,
    body.chinese-page .news-left,
    body.arabic-page .news-left,
    body.english-page .news-right > div,
    body.spanish-page .news-right > div,
    body.japanese-page .news-right > div,
    body.chinese-page .news-right > div,
    body.arabic-page .news-right > div {
        padding-top: 100px !important;
        height: 100vh !important;
    }

    body.english-page .news-right > div,
    body.spanish-page .news-right > div,
    body.japanese-page .news-right > div,
    body.chinese-page .news-right > div,
    body.arabic-page .news-right > div {
        width: 85%;
    }

    /* 외국어 페이지에서 뉴스 게시글 4개만 보이게 설정 */
    body.english-page .news-list-container .news-item:nth-child(n+5),
    body.spanish-page .news-list-container .news-item:nth-child(n+5),
    body.japanese-page .news-list-container .news-item:nth-child(n+5),
    body.chinese-page .news-list-container .news-item:nth-child(n+5),
    body.arabic-page .news-list-container .news-item:nth-child(n+5) {
        display: none !important; /* 5번째부터 숨김 */
    }
}