/* body {
      margin: 0;
      font-family: 'EscoreDream', sans-serif;
    } */

    html, body {
        height: 100%;
        font-family: 'EscoreDream', sans-serif;
        font-size: 16px;
        line-height: 1.5;
        color: #222222;
        background-color: #000000;
        margin: 0;
    }

    ul {
        padding: 0px;
        margin: 0px;
    }

    li {
        padding: 0px;
        margin: 0px;
    }

a {
    color: inherit;
    text-decoration: none;
    outline: none;
    border-width: 0px;
}

    a:link {
        color: inherit;
        text-decoration: none;
        outline: none;
        border-width: 0px;
    }

    a:visited {
        color: inherit;
        text-decoration: none;
        outline: none;
        border-width: 0px;
    }

    .layout_index_01 {
        min-width: 1400px;
        max-width: 1400px;
        height: 100%;
        margin: 0 auto;
        display: block;
        clear: both;
    }

    /* 상단 메뉴 영역 */
    .navbar {
        position: fixed;   /* 항상 화면 상단에 고정 */
        top: 0;
        left: 0;
        width: 100%;       /* 전체 너비 */
        background-color: #121212;
        color: white;
        z-index: 1000;
        height: 100px;
        line-height: 100px;
        transition: background-color 0.3s ease;
        display: flex;             /* flexbox 사용 */
        justify-content: center;   /* 가로 가운데 정렬 */
        align-items: center;       /* 세로 가운데 정렬 */
    }

    .navbar.scrolled {
      background-color: rgba(18, 18, 18, 0.8); /* 스크롤 후 반투명 */
    }

    .navbar ul {
      list-style: none;
    }

    .navbar ul li {
      float: left;
    }

    .navbar ul li.navbar_logo {
      font-size: 2.5rem;
      font-weight: bold;
      letter-spacing: 0px;
      padding-right: 250px;
      color: #ffffff;
    }

    .navbar ul li.navbar_menu {
      font-size: 1.0rem;
      padding-right: 100px;
    }    

    .content {
      border-top: 2px solid #aeb5b9;
      margin-top: 100px;
    }

    .content .content_big_banner{
      height: 900px;
      width: 100%;
    }

    .content .content_big_banner ul {
      list-style: none !important;
    }

    .content .content_big_banner ul li {
      height: 900px !important;
      background-repeat: no-repeat;     /* 반복하지 않음 */
      background-position: center center; /* 가운데 정렬 */
      background-size: cover;           /* 요소 크기에 맞게 채움 */            
    }

    .content .content_big_banner ul li.cbb_img_01 {
      background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), /* 반투명 검정 오버레이 */ url('http://www.garime.co.kr/img/img_content_big_banner_01.jpg') !important;
    }

    .content .content_big_banner ul li.cbb_img_02 {
      background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), /* 반투명 검정 오버레이 */ url('http://www.garime.co.kr/img/img_content_big_banner_02.jpg') !important;
    }

    .content .content_big_banner ul li.cbb_img_03 {
      background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), /* 반투명 검정 오버레이 */ url('http://www.garime.co.kr/img/img_content_big_banner_03.jpg') !important;
    }    

    .content .content_big_banner ul li.cbb_img_04 {
      background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), /* 반투명 검정 오버레이 */ url('http://www.garime.co.kr/img/img_content_big_banner_04.jpg') !important;
    }    

    .content .content_big_banner ul li.cbb_img_05 {
      background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), /* 반투명 검정 오버레이 */ url('http://www.garime.co.kr/img/img_content_big_banner_05.jpg') !important;
    }    

    .content_big_banner_text {
      margin-top: 300px;
    }

    .content_big_banner_text .cbbt_text_01 {
      color: #ffe500;
      font-size: 1.5rem;
      font-weight: bold;
    }

    .content_big_banner_text .cbbt_text_02 {
      margin-top: 20px;
      color: #ffffff;
      font-size: 3.25rem;
      font-weight: bold;
    }

    .content_big_banner_text .cbbt_text_03 {
      margin-top: 30px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #00fff0;
      font-weight: bold;
      height: 60px;
      border: 1px solid #ffffff;
      padding: 0 40px;
      box-sizing: border-box;
    }    

    .content_big_banner_text .cbbt_text_04 {
      margin-top: 25px;
      color: #ffffffff;
      font-size: 0.875rem;
    }

    .content_merit {
      margin-top: 140px;
      height: auto;
      overflow: hidden;
    }

    .content_merit .cm_text_01 {
      font-size: 1.125rem;
      color: #ff0000;
      text-align: center;
      font-weight: bold;
    }

    .content_merit .cm_text_02 {
      font-size: 3rem;
      color: #ffffff;
      font-weight: bold;
      text-align: center;
      margin-top: 30px;
    }
    
    .content_merit .cm_text_03 {
      font-size: 1.125rem;
      color: #888888;
      text-align: center;
      margin-top: 20px;
    }

    .content_merit .cm_text_04 {
      font-size: 2.375rem;
      color: #ffffff;
      font-weight: 500;
      text-align: center;
      margin-top: 150px;
    }
    
    .content_merit .cm_text_05 {
      color: #ffffff;
      text-align: center;
      margin-top: 25px;
    }

    .content_merit .cm_div_container {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
      gap: 20px;
      margin-top: 100px;
    }

    .content_merit .cm_div_container .cmdc_div {
      position: relative;
      width: 100%;
      height: 380px; /* div 높이 고정 */
      overflow: hidden;
      border: 1px solid #e2aa23;
      transition: all 0.5s ease; /* 애니메이션 효과 */
      text-align: center;
      box-sizing: border-box;
    }

    .content_merit .cm_div_container .cmdc_div:hover {
      background-color: #111111;
      border: 1px solid #ff0000; /* 마우스 오버 시 테두리 색 변경 */
      transform: translateY(-10px); /* 위로 10px 이동 */
    }

    .content_merit .cm_div_container .cmdc_div_text_01 {
      display: inline-block;
      font-size: 0.875rem;
      color: #ffe500;
      font-weight: 800;
      letter-spacing: 3px;
      margin-top: 60px;
      border: 1px solid rgba(255, 229, 0, 0.3);
      padding: 4px 12px;
      border-radius: 2px;
      text-transform: uppercase;
    }

    .content_merit .cm_div_container .cmdc_div_text_02 {
      font-size: 1.375rem;
      color: #ffffff;
      font-weight: bold;
      margin-top: 25px;
    }

    .content_merit .cm_div_container .cmdc_div_line {
      border-top: 1px solid #434343;
      width: 80%;
      display: inline-block;
      margin-top: 40px;
    }

    .content_merit .cm_div_container .cmdc_div_text_03 {
      font-size: 1.1875rem;
      color: #ffffff;
      margin-top: 30px;
    }

    .content_merit .cm_div_container .cmdc_div_text_04 {
      font-size: 0.875rem;
      color: #ff0000;
    }

.content .content_pf_banner{
  height: 400px;
  width: 100%;
  margin-top: 100px;
}

.content .content_pf_banner ul li {
  position: relative;
  overflow: hidden;
  height: 400px !important;

  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100%; /* 기본 크기 */

  transition: 
    background-size 0.5s ease,
    background-image 0.5s ease;
}

.content_pf_banner_text {
    position: absolute;
    top: 50%;
    padding-left: 100px;
}

.content_pf_banner_text .cpbt_text_01 {
    font-size: 0.875rem;
    color: #ff0000;
}

.content_pf_banner_text .cpbt_text_02 {
    font-size: 1.625rem;
    color: #ffffff;
    font-weight: bold;
}

/* 기본 상태 */
.content .content_pf_banner ul li.cpb_img_01 {
  background-image:
    linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1)),
    url('../img/cpb_img_01.png') !important;
}

.content .content_pf_banner ul li.cpb_img_02 {
  background-image:
    linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1)),
    url('../img/cpb_img_02.png') !important;
}

.content .content_pf_banner ul li.cpb_img_03 {
  background-image:
    linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1)),
    url('../img/cpb_img_03.png') !important;
}

.content .content_pf_banner ul li.cpb_img_04 {
  background-image:
    linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1)),
    url('../img/cpb_img_04.png') !important;
}

/* 마우스 오버 시 */
.content .content_pf_banner ul li:hover {
  background-size: 150%; /* 2배 확대 */
}

/* 오버 시 그라데이션 제거 */
.content .content_pf_banner ul li.cpb_img_01:hover {
  background-image: url('../img/cpb_img_01.png') !important;
}

.content .content_pf_banner ul li.cpb_img_02:hover {
  background-image: url('../img/cpb_img_02.png') !important;
}

.content .content_pf_banner ul li.cpb_img_03:hover {
  background-image: url('../img/cpb_img_03.png') !important;
}

.content .content_pf_banner ul li.cpb_img_04:hover {
  background-image: url('../img/cpb_img_04.png') !important;
}

.content .content_pf_text{
    margin-top: 100px;
    height: auto;
    overflow: hidden;
    text-align: center;
}

.content .content_pf_text .cpt_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 18px 60px;
    border: 1px solid #E50914;
    color: #fff;
    font-weight: 800;
    text-decoration: none;
    transition: 0.3s;
    cursor: pointer;
}

.content .content_pf_text .cpt_btn:hover {
    background: #E50914;
    box-shadow: 0 10px 25px rgba(229, 9, 20, 0.3);
}

.content .content_process_text {
    margin-top: 100px;
    height: auto;
    overflow: hidden;
    text-align: center;
}

.content .content_process_text .cpt_text_01 {
    font-size: 1.125rem;
    color: #ff0000;
    font-weight: bold;
}

.content .content_process_text .cpt_text_02 {
    font-size: 2.25rem;
    color: #ffffff;
    font-weight: bold;
    margin-top: 20px;
}

.content .content_process_text .cpt_text_03 {
    color: #ffffff;
    font-weight: bold;
    margin-top: 25px;
}

.content .content_process .cp_div_container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(335px, 1fr));
    gap: 20px;
    margin-top: 100px;
}

.content .content_process .cp_div_container .cpdc_div {
    position: relative;
    width: 100%;
    height: 380px;
    overflow: hidden;
    border: 1px solid #2a2a2a;
    transition: all 0.3s ease;
    text-align: center;
    box-sizing: border-box;
}

/* 네온 라인 공통 스타일 */
.content .content_process .cp_div_container .cpdc_div::before,
.content .content_process .cp_div_container .cpdc_div::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    background: #ff0000;
    box-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000;
    opacity: 0;
}

/* 위쪽 라인 */
.content .content_process .cp_div_container .cpdc_div::before {
    top: 0;
    left: -100%;
    animation: neon-top 2s linear infinite;
}

/* 아래쪽 라인 */
.content .content_process .cp_div_container .cpdc_div::after {
    bottom: 0;
    left: -100%;
    animation: neon-bottom 2s linear infinite;
}

/* hover 시 활성화 */
.content .content_process .cp_div_container .cpdc_div:hover {
    background-color: #111111;
    border: 1px solid #ff0000;
    transform: translateY(-10px);
}

.content .content_process .cp_div_container .cpdc_div:hover::before,
.content .content_process .cp_div_container .cpdc_div:hover::after {
    opacity: 1;
}

/* 위쪽 네온 이동 */
@keyframes neon-top {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* 아래쪽 네온 이동 */
@keyframes neon-bottom {
    0% { left: 100%; }
    100% { left: -100%; }
}

.content .content_process .cp_div_container .cpdc_div .cpdcd_text_01 {
    display: inline-block;
    font-size: 1.25rem;
    color: #ffe500;
    font-weight: 800;
    letter-spacing: 3px;
    margin-top: 50px;
    border: 1px solid rgba(255, 229, 0, 0.3);
    padding: 4px 12px;
    border-radius: 2px;
    text-transform: uppercase;
}

.content .content_process .cp_div_container .cpdc_div .cpdcd_text_02 {
    font-size: 1.25rem;
    color: #ffffff;
    font-weight: bold;
    margin-top: 20px;
}

.content .content_process .cp_div_container .cpdc_div .cpdcd_line {
      border-top: 1px solid #434343;
      width: 80%;
      display: inline-block;
      margin-top: 50px;    
}

.content .content_process .cp_div_container .cpdc_div .cpdcd_text_03 {
    color: #ffffff;
    margin-top: 20px;
}

.content .content_process .cp_div_container .cpdc_div .cpdcd_text_04 {
    color: #ff0000;
}

.content .content_process .cp_div_container .cpdc_div .cpdcd_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 20px;
    border: 1px solid #E50914;
    color: #fff;
    text-decoration: none;
    transition: 0.3s;
    cursor: pointer;
    margin-top: 20px;
}

.content .content_process .cp_div_container .cpdc_div .cpdcd_btn:hover {
    background: #E50914;
    box-shadow: 0 10px 25px rgba(229, 9, 20, 0.3);
}

.content .content_youtube {
    margin-top: 240px;
}

.content .content_youtube .cy_div_container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(670px, 1fr));
    gap: 60px;
    margin-top: 100px;
}

.content .content_youtube .cy_div_container .cydc_div {
    position: relative;
    width: 560;
    height: 350px;
    overflow: hidden;
    padding: 0 30px;
}

.content .content_youtube .cy_div_container .cydc_div .cydcd_text_01 {
    font-size: 2.125rem;
    color: #ffffff;
    font-weight: bold;
    margin-top: 20px;
}

.content .content_youtube .cy_div_container .cydc_div .cydcd_text_02 {
    color: #999999;
    margin-top: 30px;
}

.content .content_youtube .cy_div_container .cydc_div .cydcd_text_03 {
    font-size: 1.875rem;
    color: #999999;
    margin-top: 30px;
}

.content .content_youtube .cy_div_container .cydc_div .cydcd_text_03 span {
    color: #ff0000;
    font-weight: bold;
}

.content .content_kakao_area {
    background-color: #1a1a1a;
    padding: 60px 0;
    border-top: 1px solid #2a2a2a;
    border-bottom: 1px solid #111111;
    margin-top: 120px;
}

.content .content_kakao_area .cka_area {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box; 
}

.content .content_kakao_area .cka_area .ckaa_text_01 {
    font-size: 1.5rem;
    font-weight: bold;
    color: #ffffff;
}

.content .content_kakao_area .cka_area .ckaa_text_02 {
    color: #aaaaaa;
}

.content .content_kakao_area .cka_area .ckaa_kakao_btn {
    display: inline-block;
    border: 1px solid #fae100;
    color: #fae100;
    padding: 14px 24px;
    text-decoration: none;
    transition: 0.3s;
    border-radius: 2px;
    font-weight: 700;
    cursor: pointer;
}

.content .content_kakao_area .cka_area .ckaa_kakao_btn:hover {
    background: #fae100;
    color: #111111;    
}

.content .content_cr_area {
    padding: 100px 0;
    height: auto;
    overflow: hidden;
}

.content .content_cr_area .cca_area {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 80px;
}

.content .content_cr_area .cca_area .ccaa_text_01 {
    font-weight: bold;
    color: #ffffff;
}

.content .content_cr_area .cca_area .ccaa_text_02 {
    font-size: 0.875rem;
    color: #aaaaaa;
    margin-top: 5px;
}

.content .content_cr_area .cca_area .ccaa_text_02 span {
    color: #ffffff;
    font-weight: bold;
}

.content .content_cr_area .cca_area .ccaa_text_03 {
    font-size: 1.75rem;
    color: #ffffff;
    font-weight: bold;
    margin-top: 5px;
}

    /* 햄버거 버튼 */
    .hamburger {
      display: none; /* 기본은 숨김, 모바일에서만 표시 */
      flex-direction: column;
      cursor: pointer;
      z-index: 1100; /* 메뉴보다 위 */
	    padding-right: 0px;
      margin-top: 15px;
    }

    .hamburger span {
      height: 3px;
      width: 25px;
      background: white;
      margin: 4px 0;
      transition: 0.3s;
    }

    /* 슬라이드 메뉴 */
    nav {
      position: fixed;
      top: 60px; /* 헤더 높이만큼 내려서 버튼 영역 덮지 않음 */
      right: -100%; /* 처음엔 화면 밖 */
      width: 100%;  /* 전체 화면 너비 */
      height: calc(100% - 10px);
      background-color: #232323;
      display: flex;
      flex-direction: column;
      align-items: center;
      transition: right 0.4s ease;
      z-index: 10000;
      color: #ffffff;
    }

    nav.active {
      right: 0; /* 화면 전체로 슬라이드 */
    }

    nav a {
      color: #ffffff;
      text-decoration: none;
      font-size: 1.0rem;
      margin: 10px 0;
    }

    /* 닫기 버튼 */
    .close_btn {
      align-self: flex-start;
      margin: 10px 20px;
      font-size: 1.75rem;
      color: white;
      cursor: pointer;
    }











    /* 모바일 대응 */
  @media screen and (max-width: 768px) {
    .layout_index_01 {
      min-width: 100%;
      max-width: 100%;
  }

    /* 상단 메뉴 영역 */
    .navbar {
        height: 60px;
        line-height: 60px;
    }  

    .navbar ul li.navbar_logo {
      font-size: 1.25rem;
      width: 90%;
      text-align: center;
      padding-right: 0px;
      letter-spacing: -1px;
    }

    .navbar ul li.navbar_menu {
      display: none;
    }

    .content {
      margin-top: 60px;
    }    

    .content .content_big_banner{
      height: 600px;
    }

    .content .content_big_banner ul li {
      height: 600px !important;
    }    

    .content_big_banner .bx-wrapper .bx-prev {
      margin-left: 40px;
    }

    .content_big_banner .bx-wrapper .bx-next {
      margin-right: 40px;
    }

    .content_big_banner_text {
      margin-top: 180px;
      text-align: center;
    }

    .content_big_banner_text .cbbt_text_01 {
      font-size: 0.875rem;
    }

    .content_big_banner_text .cbbt_text_02 {
      font-size: 1.25rem;
      letter-spacing: -1px;
    }

    .content_big_banner_text .cbbt_text_03 {
      font-size: 0.9375rem;
      padding: 0 30px;
      height: 50px;
    }   

    .content_merit .cm_text_01 {
        font-size: 0.875rem;
    }

    .content_merit .cm_text_02 {
        font-size: 1.5rem;
        margin-top: 20px;
    }

    .content_merit .cm_text_03 {
        font-size: 1rem;
    }

    .content_merit .cm_div_container {
      grid-template-columns: repeat(auto-fill, minmax(305px, 1fr));
      padding: 0 10px;
    }

      .content_merit .cm_div_container .cmdc_div {
        width: 100%;
        height: 310px;
      }

      .content_merit .cm_div_container .cmdc_div_text_01 {
        font-size: 0.75rem;
        margin-top: 30px;
      }

      .content_merit .cm_div_container .cmdc_div_text_02 {
        font-size: 1.25rem;
      }

      .content_merit .cm_div_container .cmdc_div_text_03 {
        font-size: 1rem;
      }

      .content_merit .cm_div_container .cmdc_div_text_04 {
        font-size: 0.75rem;
      }

      .content_merit .cm_text_04 {
        font-size: 1.5rem;
        padding: 0 20px;
        letter-spacing: -2.0px;
      }

      .content_merit .cm_text_05 {
        font-size: 1rem;
        padding: 0 20px;
      }

  .content .content_pf_banner {
    height: 300px !important;
  }

    .content .content_pf_banner ul li {
      height: 300px !important;
    }

    .content_pf_banner .bx-wrapper .bx-prev {
      margin-top: -430px;
    }

    .content_pf_banner .bx-wrapper .bx-next {
      margin-top: -430px;
    }

.content .content_pf_text .cpt_btn {
  padding: 18px 95px;
}

.content .content_process_text {
  margin-top: 100px;
}

.content .content_process_text .cpt_text_01 {
  font-size: 0.75rem;
}

.content .content_process_text .cpt_text_02{
  font-size: 1.5rem;
}

.content .content_process_text .cpt_text_03 {
  font-size: 0.875rem;
}

.content .content_process .cp_div_container {
  grid-template-columns: repeat(auto-fill, minmax(305px, 1fr));
  padding: 0 10px;
}

.content .content_youtube {
  margin-top: 0px;
}

.content .content_youtube .cy_div_container {
    grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
    gap: 50px;
    padding: 0 10px;
}

.content .content_youtube .cy_div_container .cydc_div {
  height: 300px;
  padding: 0 0;
}

.content .content_youtube .cy_div_container .cydc_div .cydcd_text_01 {
  font-size: 1.375rem;
}

.content .content_youtube .cy_div_container .cydc_div .cydcd_text_02 {
  font-size: 0.875rem;
}

.content .content_youtube .cy_div_container .cydc_div .cydcd_text_03 {
  font-size: 1.375rem;
}

.hamburger {
  display: flex; /* 모바일에서 버튼 표시 */
}

.bx-wrapper .bx-controls-direction a {
  top: 570px !important;
}

.content .content_kakao_area {
  margin-top: 100px;
}

.content .content_kakao_area .cka_area {
  flex-direction: column;
}

.content .content_kakao_area .cka_area .ckaa_kakao_btn {
  padding: 14px 20px;
  font-size: 0.875rem;
  margin-top: 30px;
}

.content .content_cr_area .cca_area {
  flex-direction: column;
  padding-left: 10px;
}

.content .content_cr_area .cca_area .ccaa_text_02 {
  font-size: 0.75rem;
  margin-top: 5px
}

.content .content_cr_area .cca_area .ccaa_text_03 {
  font-size: 1.5rem;
  margin-top: 5px;
}

}