@font-face {
    font-family: 'GmarketSansMedium';
    src: url('//cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


/* ─── 공통 ─── */
.intro {
  background: #ffffff;
  overflow-x: hidden;        /* 가로 스크롤바 방지용 */
}

/* ─── 데스크탑(.top_img) ─── */
.intro .top_img img {
  display: block;
  margin: 0 auto;
  width: 100%;               /* 뷰포트 폭에 딱 맞춰 축소 */
  max-width: 1560px;         /* 이미지 원본 최대 너비 */
  height: auto;              /* 비율 유지 */
}

/* ─── 모바일(.top_img_mo) 숨김 ─── */
.intro .top_img_mo {
  display: none;
}

/* ─── 모바일(≤768px)용 ─── */
@media (max-width: 768px) {
  /* 데스크탑용 숨김 */
  .intro .top_img {
    display: none;
  }

  /* 모바일용 보이기 + 폭 100% */
  .intro .top_img_mo {
    display: block;
    margin: 0 auto;
  }

  .intro .top_img_mo img {
    display: block;
    width: 100%;
    height: auto;
  }
}


/* =================================== */
/* ▼▼▼ 헤더 영역 ▼▼▼ */
/* =================================== */

.head_neo {}
.head_neo .logo {
    padding: 50px 0; 
    text-align: center; 
    position: relative; 
    max-width: 1560px; 
    margin: 0 auto;
}

.head_neo .logo h1 {
    font-size: 2.6rem; 
    font-weight: 600; 
    line-height: 1.1; 
    font-family: 'GmarketSansMedium';
}
.head_neo .logo h1 a { 
    font-family: 'GmarketSansMedium';
}

/* --- 로고 위치 및 크기 설정 --- */
.head_neo .logo .side_logo {
    position: absolute; 
    left: 10px; 
    top: 50%; /* 수직 중앙 정렬을 위해 top 50% */
    transform: translateY(-50%); /* 수직 중앙 정렬 */
}
.head_neo .logo .side_logo.right {
    left: auto; 
    right: 10px;
}

/* 왼쪽 로고 크기 */
.head_neo .logo .side_logo img {
    height: 60px;
}

/* 오른쪽 로고만 크기 작게 조정 */
.head_neo .logo .side_logo.right img {
    height: 90px; /* 값을 조절하여 보기 좋은 크기로 맞추세요 */
}

.nav {
  background-color: #EA5031;
}

.nav ul {
  display: grid;
  grid-auto-flow: column;
  gap: 0 0;
  max-width: 980px;
  margin: 0 auto;
  align-items: center;
}

.nav ul li {
  vertical-align: top;
  text-align: center;
}

.nav ul li a {
  display: inline-block;
  text-align: center;
  line-height: 1.0;
  padding: 20px 0;
  color: #fff;
  font-size: 2.0rem;
  font-family: 'GmarketSansMedium';
}

.nav ul li a:hover {
  color: #444;
}


/* ─── 모바일(≤768px)용 ─── */
/* ▼▼▼ 이 부분이 수정되었습니다 ▼▼▼ */
@media (max-width: 768px) {
    .head_neo .logo {
        display: flex;
        /* ★ flex-direction을 column으로 변경하여 수직으로 쌓이도록 함 */
        flex-direction: column; 
        align-items: center;
        padding: 20px 15px;
        /* ★ 요소들 사이의 수직 간격 추가 */
        gap: 20px; 
    }

    .head_neo .logo .side_logo {
        position: static;
        transform: none;
        flex-shrink: 0;
        /* ★ 오른쪽 로고 정렬을 위해 추가 */
        display: flex;
        justify-content: center;
    }
    
    .head_neo .logo .side_logo.right {
        /* 로고들이 가운데 정렬되도록 별도 설정 불필요 */
    }

    .head_neo .logo .side_logo img {
        height: 50px;
    }
    .head_neo .logo .side_logo.right img {
        height: 40px;
    }

    .head_neo .logo h1 {
        font-size: 1.6rem;
        /* ★ 수평 마진 제거 */
        margin: 0; 
        line-height: 1.2;
    }

    .nav ul li a {
        font-size: 1.5rem;
    }
}
/* ▲▲▲ 수정 완료 ▲▲▲ */


/* 414px 이하는 이제 768px 스타일을 상속받으므로 특별한 변경 불필요 */
@media (max-width: 414px) {
    /* 필요한 경우 더 작은 화면을 위한 세부 조정 추가 */
}

/* =================================== */
/* ▲▲▲ 헤더 영역 끝 ▲▲▲ */
/* =================================== */


/* 하단 */
.tail_wrap {padding: 30px 0; text-align: center; font-weight: normal; line-height: 1.8; }
.tail_wrap h1 {font-size: 1.8rem; color: #000; font-weight: bold; font-family: 'GmarketSansMedium'; }

.bsns_wrap { padding: 30px 0;} 

ul.bsns {text-align: center;}
ul.bsns li {display: inline-block; margin-right: 10px;}
ul.bsns li a {display: block; width: 54px; height: 54px; border-radius: 27px; background: #6081c4; text-align: center;}
ul.bsns li a.o {background: #f15a4b;}
ul.bsns li a.c {background: #d50060;}
ul.bsns li a.n {background: #24CD6F;}
ul.bsns li a.i {background: #C92591;}
ul.bsns li a.b {background: #000000;}

ul.bsns li a i {font-size: 32px; color: #fff;  line-height: 54px; }


@media (max-width: 768px) {
    .bsns_wrap { padding: 18px 0;} 
	ul.bsns {text-align: center;}
	ul.bsns li {display: inline-block; margin: 5px;}
	ul.bsns li a {display: block; width: 34px; height: 34px; border-radius: 17px; background: #6081c4; text-align: center;}
	ul.bsns li a i {font-size: 20px; color: #fff;  line-height: 34px; }
}



.contents_body {max-width: 1200px; margin: 0 auto; padding: 30px 15px;}

h1.pt {font-size: 3.0rem; color: #000; font-weight: bold; font-family: 'GmarketSansMedium'; margin: 0 0 40px 0;}

@media (max-width: 768px) {
	h1.pt {font-size: 2.2rem; line-height: 1.3; }
}
.about {padding: 30px 0;}
.about h2 {font-weight: 500; font-size: 2.0rem; margin: 0 0 20px 0;}
.about img {max-width: 100%;}


ul.nlist { margin: 0 0 30px 0;}
ul.nlist li {padding-left: 20px; position: relative; margin: 0 0 10px 0;}
ul.nlist li:before {content:"· ";  width: 20px; display: block; position: absolute; left: 0; text-align: center;}
ul.nlist li.ref:before {content:'※ '; }
.info_desc {margin: 0 0 40px 0; padding: 0 0 0 20px; line-height: 1.65; }



.tbl_wrap table {width:100%;border-collapse:collapse;border-spacing: 0 5px; border:1px solid #ccc; border-top:1px solid #363636; border-left: none; border-right: none;}

.tbl_wrap.wide_table {overflow-y: hidden;}
.tbl_wrap.wide_table table {min-width: 600px; }

.tbl_wrap caption {padding:10px 0;font-weight:normal;text-align:left; }

.tbl_style2 {margin:0 0 10px}
.tbl_style2 caption {padding:0;font-size:0;line-height:0;overflow:hidden; display: none;}
.tbl_style2 thead th {padding:5px 0;font-weight:normal;text-align:center;border-bottom:1px solid #ddd; background:#f7f7f7;  color: #000000;}
.tbl_style2 thead th i {color: #e10075;}
.tbl_style2 tbody th {padding:5px 0;border-bottom:1px solid #e8e8e8; font-weight: normal; border-top: 1px solid #e8e8e8; background: #f7f7f7;}
.tbl_style2 td {text-align: center; color:#333333;background:#fff;padding:7px 3px;border-top:1px solid #ecf0f1; border-right: 1px solid #ecf0f1; word-break:break-all; }

.tbl_style2 td:last-child {border-right: 0;}
.tbl_style2 td.tal {text-align: left;}
.tbl_style2 td.date {color: #bbbbbb;}
.tbl_style2 td span.color { color: #ff9b1d; }


.about .ititle {font-weight: bold; margin: 0 0 10px 0;}

.about .dinfo {background: #f9f9f9; padding: 20px 20px; margin: 0 0 40px 0;}
/* 아래 코드를 추가하거나 기존 ul 스타일에 margin-bottom을 추가하세요. */
.about .dinfo ul {
    margin-bottom: 0;
    /* 만약 리스트의 왼쪽 여백도 조정하고 싶다면 padding-left: 20px; 와 같이 값을 조절할 수 있습니다. */
}
.about .dinfo .ititle {margin: 0 0 15px 0; font-size: 1.5rem;}
.about .dinfo .ititle:before {content:"▣ "; }
.about .dinfo h4 {font-weight: 600; margin: 0 0 10px 0; font-size: 1.45rem;}
.about .dinfo .color {color: #bc0000;}

.about .download {padding: 30px 0; text-align: center;}
.about .download a {display: inline-block; padding: 25px 40px; background: #000; color: #fff; font-weight: bold; font-size: 2.0rem; border-radius: 5px;}

@media (max-width: 768px) {
	.about .dinfo {padding: 15px 10px;}
	.about	h2 {font-size: 1.8rem;}

	.about .download a {padding: 15px 30px; font-size: 1.9rem; letter-spacing: -0.5px;}
 
}


.light_view { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; margin: 0 0 40px; }
.light_view img { cursor: pointer; width: 100%; transition: transform 0.2s; }
.light_view img:hover { transform: scale(1.01); }

.bna { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 15px;}
.bna .item {}
.bna .item .t {  background: #fffadd; border-radius: 10px 10px 0 0; color: #313131; padding: 10px 0; font-weight: bold; text-align: center;}
.bna .item .desc {  padding: 10px 0; text-align: center;}
.bna .item .img img { width: 100%;}







.req {padding: 30px 0;}
.req h3 {font-weight: 600; font-size: 1.45rem; margin: 0 0 15px 0; line-height: 1.2;}
.req .tinfo {padding: 15px 15px; background: #f7f7f7; margin-bottom: 30px;}
.req .tinfo textarea {border: 1px solid #dcdcdc; padding: 5px 5px; line-height: 1.5; font-size: 1.3rem; margin: 3px 3px;
	width: calc(100% - 6px); height: 140px; 
}

.req .chk {text-align: right;}
.req .chk.allc {font-size: 1.6rem; margin: 10px 0 0 0; font-weight: bold;}

.req .child_chk {border: 1px dashed #999999; padding: 15px 15px; text-align: center;}

.req .submit {padding: 25px 0; text-align: center; }
.req .submit button {border: 0; background: #000; color: #fff; font-size: 1.6rem; outline:0; padding: 14px 20px; border-radius: 5px;}

.req .download {padding: 15px 0; text-align: center;}
.req .download a {display: inline-block; padding: 15px 20px; background: #000; color: #fff; font-weight: bold; font-size: 1.5rem; border-radius: 5px;
	margin: 0 5px 10px;
}

@media (max-width: 768px) {
	.req .tinfo textarea {height: 100px; font-size: 1.2rem;}
	.req .child_chk {text-align: left;}
	.req .chk {text-align: left;}
	.req .download a {padding: 15px 30px; font-size: 1.9rem; letter-spacing: -0.5px;}
}


.video-container {    position:relative;    padding-bottom:56.25%;    padding-top:0;    height:0;    overflow:hidden;}
.video-container iframe, 
.video-container object, 
.video-container embed{    position:absolute;    top:0;    left:0;    width:100%;    height:100%;}


/* index.php */
.movie_main {
  max-width: 1600px;
  margin: 0 auto;
  padding: 35px 0 0;
}

.movie_main .item_body {
  display: flex;
  flex-wrap: wrap;
}

.movie_main .item {
  flex: 0 0 33.33%;
  padding: 0 10px 20px 20px;
  box-sizing: border-box;
}

.movie_main .item .thumbImg {
  height: 0;
  padding-bottom: 56.25%;
  position: relative;
  overflow: hidden;
}

.movie_main .item .thumbImg img {
  width: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* 모바일 대응 */
@media (max-width: 768px) {
  .movie_main .item {
    flex: 0 0 100%;
    padding: 0 0 20px 0;
  }
}

/* 버튼 스타일 */
.shortcut {
  padding: 0 0 30px 0;
  text-align: center;
}

.shortcut a {
  display: inline-block;
  background: #4e6a76;
  font-size: 1.6rem;
  color: #ffffff;
  letter-spacing: -0.5px;
  padding: 14px 18px;
  border-radius: 5px;
  margin: 0 5px;
}

@media (max-width: 768px) {
  .shortcut a {
    font-size: 1.2rem;
    padding: 10px 10px;
  }
}

/* 영상 섹션 */
.movie_main2 {
  max-width: 1560px;
  margin: 50px auto 0;
  padding: 40px 15px;
  background: #E2E2E2;
}

.movie_main2 .mt {
  font-size: 2.0rem;
  font-weight: 600;
  padding: 0 10px;
  text-align: center;
  font-family: 'GmarketSansMedium';
  margin-bottom: 30px; /* 👈 이 줄 추가! */
}


.movie_main2 .item_body {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.movie_main2 .item {
  flex: 0 0 calc(33.333% - 20px);
  box-sizing: border-box;
  padding: 0;
}

.movie_main2 .desc {
  padding: 18px 18px;
  margin: 0 10px;
  font-size: 1.5rem;
  line-height: 1.56;
  color: #0749d1;
  background: #fff;
  border-radius: 10px;
}

.movie_main2 .desc a {
  color: #0749d1;
}

/* 반응형: 태블릿 이하 */
@media (max-width: 1024px) {
  .movie_main2 .item {
    flex: 0 0 calc(50% - 20px);
  }
}

/* 모바일 대응 */
@media (max-width: 768px) {
.movie_main2 .mt {
  font-size: 2.0rem;
  font-weight: 600;
  padding: 0 10px;
  text-align: center;
  font-family: 'GmarketSansMedium';
  margin-top: 0;         /* 👈 이 줄 추가 또는 기존 값 수정 */
  margin-bottom: 40px;   /* 👈 영상과의 간격은 유지 */
}


  .movie_main2 .item_body {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .movie_main2 .item {
    width: 100%;
    max-width: 100%;
    margin-bottom: 10px;
  }

  .movie_main2 .video-container iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }
}