/* Reset 기본 스타일 */
* { margin: 0; padding: 0; box-sizing: border-box; } /* 모든 요소의 여백, 패딩 초기화 및 박스 모델 설정 */
html, body {
    height: 100%; /* HTML과 body의 높이를 100%로 설정 */
    font-family: 'NEXON Football Gothic', Arial, sans-serif; /* 기본 글꼴을 Arial로 설정 */

}
.indexbg {
    background-image: url('img/bg.jpg'); /* 배경 이미지 설정 */}
.warp {
    width: 100vw; /* 화면 너비 100% 설정 */
    height: 100vh; /* 화면 높이 100% 설정 */
    background-position: center; /* 배경 이미지 가운데 정렬 */
    background-repeat: no-repeat; /* 배경 이미지 반복 금지 */
    background-size: cover; /* 배경 이미지가 화면을 덮도록 설정 */
}

.content {
    display: flex; /* Flexbox로 레이아웃 설정 */
    justify-content: center; /* 수평 중앙 정렬 */
    align-items: center; /* 수직 중앙 정렬 */
    text-align: center; /* 텍스트 중앙 정렬 */
    width: 100%; /* 화면 가득 차도록 설정 */
    height: 100%; /* 화면 높이 100% */
}

.main {
    position: relative; /* 상대적 위치 설정 */
    width: 1280px; /* 고정 너비 설정 */
    text-align: center; /* 텍스트 중앙 정렬 */
    margin: 0 auto; /* 가운데 정렬 */
}
.main ul {
    margin: 0 0 30px 0; /* 아래쪽 마진 30px */
    padding: 0; /* 패딩 제거 */
    display: flex; /* Flexbox로 레이아웃 설정 */
    justify-content: center; /* 수평 중앙 정렬 */
    align-items: center; /* 수직 중앙 정렬 */
}

.main ul li {
    list-style: none; /* 리스트 스타일 제거 */
    padding: 30px 50px; /* 패딩 설정 */
    border-radius: 15px; /* 둥근 모서리 설정 */
    margin: 10px; /* 마진 설정 */
    font-family: 'NEXON Football Gothic'; /* 글꼴 설정 */
    font-size: 22px; /* 글자 크기 설정 */
}

.main ul li:nth-child(1) { background: #efdc14; } /* 첫 번째 항목 배경색 설정 */
.main ul li:nth-child(1) a { color:#000} /* 첫 번째 항목 배경색 설정 */
.main ul li:nth-child(2) { background: #781a4a; } /* 두 번째 항목 배경색 설정 */
.main ul li:nth-child(3) { background: #19bbbd; } /* 세 번째 항목 배경색 설정 */

.main ul li a {
    text-decoration: none; /* 링크의 밑줄 제거 */
    color: #fff; /* 텍스트 색상 흰색 */
    font-weight: bold; /* 글자 두께 설정 */
    letter-spacing: -1px; /* 글자 간격 조정 */
}

.main h1 {
    font-size: 60px; /* 글자 크기 설정 */
    color: #fff; /* 텍스트 색상 흰색 */
    letter-spacing: -1px; /* 글자 간격 조정 */
    line-height: 120%; /* 줄 간격 설정 */
    font-family: 'NEXON Football Gothic'; /* 글꼴 설정 */
	margin-bottom:30px;
}
.main h2 {
    font-size: 40px; /* 글자 크기 설정 */
    color: #fff; /* 텍스트 색상 흰색 */
    letter-spacing: -2px; /* 글자 간격 조정 */
    line-height: 120%; /* 줄 간격 설정 */
    font-family: 'NEXON Football Gothic'; /* 글꼴 설정 */
}

.inner {
    width: 1280px; /* 고정 너비 설정 */
    margin: 0 auto; /* 가운데 정렬 */
    position: relative; /* 상대적 위치 설정 */
}

.sub {
    padding: 150px 0; /* 위, 아래 여백 설정 */
    background-position: center; /* 배경 이미지 가운데 정렬 */
    background-repeat: no-repeat; /* 배경 이미지 반복 금지 */
    background-size: cover; /* 배경 이미지가 화면을 덮도록 설정 */
}

.sub h1 {
    font-size: 46px; /* 제목 크기 설정 */
    margin-bottom: 40px; /* 아래쪽 마진 설정 */
    font-family: 'NEXON Football Gothic'; /* 글꼴 설정 */
}

.sub h2 {
    font-size: 24px; /* 제목 크기 설정 */
    margin-bottom: 10px; /* 아래쪽 마진 설정 */
    font-family: 'NEXON Football Gothic'; /* 글꼴 설정 */
}

.sub p {
    font-size: 20px; /* 본문 텍스트 크기 설정 */
    word-break: keep-all; /* 텍스트가 줄 바꿈 없이 유지되도록 설정 */
}

.ceo {
    margin-bottom: 50px; /* 아래쪽 마진 설정 */
}

.digital h1,
.digital .ceo {
    color: #fff; /* 텍스트 색상 흰색 */
}

.digital .artlist li .artinfo .title span,
.digital .artlist li .artinfo .title {
    color: #fff; /* 제목 색상 흰색 */
}

a {
    text-decoration: none; /* 링크의 밑줄 제거 */
}

h1, h2, h3, h4, h5, p, span, a {
    font-family: 'NEXON Football Gothic'; /* 모든 텍스트에 글꼴 설정 */
}

.Sharing { }

.digital {
    padding: 150px 0; /* 위, 아래 여백 설정 */
    width: 100vw; /* 화면 너비 100% */
    background-image: url('img/digitalbg.jpg'); /* 배경 이미지 설정 */
    background-position: center; /* 배경 이미지 가운데 정렬 */
    background-repeat: no-repeat; /* 배경 이미지 반복 금지 */
    background-size: cover; /* 배경 이미지가 화면을 덮도록 설정 */
}

.bg1 {
    background-image: url('img/viewbg.jpg'); /* 배경 이미지 설정 */
}

.bg2 {
    background-image: url('img/viewbg2.jpg'); /* 배경 이미지 설정 */
}

.digitalview {
    padding: 120px 0; /* 위, 아래 여백 설정 */
    background-position: center; /* 배경 이미지 가운데 정렬 */
    background-repeat: no-repeat; /* 배경 이미지 반복 금지 */
    background-size: cover; /* 배경 이미지가 화면을 덮도록 설정 */
}

.digitalview .inner {
    height: 100%; /* 내부 높이 100% 설정 */
    display: flex; /* Flexbox로 레이아웃 설정 */
    justify-content: center; /* 수평 중앙 정렬 */
    align-items: center; /* 수직 중앙 정렬 */
}

.digitalview .viewimg {
    position: relative; /* 상대적 위치 설정 */
    background-size: cover; /* 배경 이미지 화면 크기에 맞게 설정 */
    background-position: center; /* 배경 이미지 가운데 정렬 */
    width: 45%; /* 너비 45% 설정 */
    height: 100%; /* 높이 100% 설정 */
}

.digitalview .viewimg img {
    /* height: 70%; */ /* 이미지 너비 100% 설정 */
}
.digitalview .tv {
    position: relative; /* 상대적 위치 설정 */
    background-size: cover; /* 배경 이미지 화면 크기에 맞게 설정 */
    background-position: center; /* 배경 이미지 가운데 정렬 */
    width: 45%; /* 너비 45% 설정 */
    height: 100%; /* 높이 100% 설정 */
}

.digitalview .tv img {
    width: 100%; /* 이미지 너비 100% 설정 */
}

.digitalview .viewinfo {
    margin-top: -200px; /* 위쪽 마진 설정 */
    height: 100%; /* 높이 100% 설정 */
    position: relative; /* 상대적 위치 설정 */
    width: 52%; /* 너비 55% 설정 */
    padding-left:50px;
    text-align: left; /* 왼쪽 정렬 */
    display: flex; /* Flexbox로 레이아웃 설정 */
    flex-direction: column; /* 세로 방향으로 정렬 */
    justify-content: flex-start; /* 위쪽 정렬 */
    color: #fff; /* 텍스트 색상 흰색 */
}

.digitalview .viewinfo .viewtitle {
    font-size: 40px; /* 제목 크기 설정 */
    font-family: 'NEXON Football Gothic'; /* 글꼴 설정 */
    font-weight: 700; /* 글자 두께 설정 */
    margin-bottom: 30px; /* 아래쪽 마진 설정 */
    padding-bottom: 30px; /* 아래쪽 패딩 설정 */
    border-bottom: 1px #fff solid; /* 아래쪽 테두리 설정 */
}

.digitalview .viewinfo .artinfo .title h5,
.digitalview .viewinfo .artinfo .title p {
    font-size: 20px; /* 본문 텍스트 크기 설정 */
    color: #666; /* 텍스트 색상 설정 */
}

.digitalview .viewinfo .artinfo .title span {
    font-size: 30px; /* 글자 크기 설정 */
    margin-bottom: 10px; /* 아래쪽 마진 설정 */
    display: block; /* 블록 요소로 설정 */
}

.digitalview .artinfo {}

.digitalview .artinfo ul li {
    list-style: none; /* 리스트 스타일 제거 */
    margin-bottom: 5px; /* 아래쪽 마진 설정 */
    display: flex; /* Flexbox로 레이아웃 설정 */
}

.digitalview .artinfo ul li div {
    color: #fff; /* 텍스트 색상 흰색 */
    font-weight: bold; /* 글자 두께 설정 */
    height: 45px; /* 높이 설정 */
    line-height: 45px; /* 줄 높이 설정 */
    display: block; /* 블록 요소로 설정 */
    width: 100px; /* 너비 100px 설정 */
    text-align: center; /* 텍스트 중앙 정렬 */
}


.digitalview .artinfo ul li div.color1 {background:#781a4a; }
.digitalview .artinfo ul li div.color2 {background:#19bbbd; }

.digitalview .art img { width: 100%; min-height: 100px; border-radius: 10px; }

.digitalview .movie { background-image: url('img/tv.jpg'); }


.header {  position: absolute; padding:5px 20px; height:80px; line-height:70px; background-color:rgba(255,255,255,.4); width:100%;}
.header h1 {   padding-left:90px}
.header h1 a{color: #000; font-size:0}

.shorts {
    display: flex;             /* Flexbox를 사용하여 정렬 */
    justify-content: center;   /* 수평 중앙 정렬 */
    align-items: center;       /* 수직 중앙 정렬 */
}

/* shorts-container 비율 설정 */
.shorts-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 65%; /* 비율 설정 (4:3 비율로 설정) */
    max-width:280px;     /* 영상 최대 크기 제한 (원하는 최대 너비 설정 가능) */
}

/* iframe에 대한 스타일 */
.shorts-container iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}
.back-btn {
    position: absolute;
    top: 50%; /* 헤더의 중앙에 위치 */
    left:0px; /* 왼쪽 끝에 위치 */
    transform: translateY(-50%); /* 정확한 중앙 정렬 */
    padding: 10px 15px;
    background-color: rgba(0,0,0,0.4); /* 버튼 배경색 */height:80px;width:80px;line-height:70px;
    color: white;
    font-size: 36px;
    border: none;
    font-weight:bold;  font-family: 'NEXON Football Gothic';
    cursor: pointer;
    transition: background-color 0.3s ease; /* 호버 시 배경색 변화 효과 */
}

.back-btn:hover {
    background-color: #45a049; /* 호버 시 버튼 색상 */
}

.back-btn:focus {
    outline: none; /* 포커스 아웃라인 제거 */
}
.artlist {display: flex;    flex-wrap: wrap; }
.artlist > li {width: 18%; list-style:none;  padding-top:15px; margin-right:20px; }
.artlist > li:nth-child(5) {margin:0}
.artlist li .artinfo {text-align:center}
.artlist li .artinfo .title {color:#000; margin-bottom:20px}
.Sharing .artlist li .artinfo .title span {color:#000; }
.digital .artlist li .artinfo .title span {color:#000;}
.artlist li .artinfo .title span { font-size: 22px;font-weight: bold;}
.artlist li .artinfo .title div {text-overflow: ellipsis;     overflow: hidden;    white-space: nowrap;    font-size: 22px;   font-weight: bold;}
.artlist li .artinfo .title h5 {}
.artlist li .artinfo .updown ul {   margin:15px 0; border-radius: 10px; display:flex; background:#fff}
.artlist li .artinfo .updown ul li {list-style:none;text-align:center;     justify-content: center;      align-items: center;display:flex;  width:100%; padding:5px 15px; }
.artlist li .artinfo .updown ul li:nth-child(2) {display:none}
.artlist li .artinfo .updown ul li img {width:40px; margin:0 5px}
.artlist li .artinfo .updown .art { width:100%; height:305px;  overflow: hidden;  border: 5px #FFA500 solid;}
.artlist li .artinfo .updown .art img { width:100%; min-height:100%;  border-radius:5px;}


.viewimg .painting { position: absolute;  top:90px;    background: #000;width:265px;  left:65px;  height:375px;  overflow: hidden;}
.viewimg .painting img { width:100%; height:100%;}

.tv .painting {   position: absolute;
    top: 284px;
    background: #000;
    width: 495px;
    left: 42px;
    height: 303px;
    overflow: hidden;
    border-radius: 20px;}
.tv .painting img { width:100%; height:100%;}

.movie {   position: relative;  text-align: center; bottom:0;  overflow: hidden; margin:0 auto}
.movie img { width:60%}


.nav-btn {
    position: absolute;
    top: 50%; /* 중앙에 배치 */
    transform: translateY(-50%); /* 정확한 중앙 정렬 */
    font-size: 30px;
    color: white;
    background: rgba(0, 0, 0, 0.5);
    border: none;height:50px;width:50px;line-height:36px;
    padding: 10px;
    cursor: pointer;font-family: 'NEXON Football Gothic';
}

.nav-btn.left {
    left: 10px; /* 왼쪽 끝에 위치 */
}

.nav-btn.right {
    right: 10px; /* 오른쪽 끝에 위치 */
}




.content {max-width:1200px;margin:0 auto}
.content .greeting {}
.content .greeting h5 {text-align:left; font-size:40px; margin-bottom:50px;}
.content .greeting p {font-size:21px; line-height:1.3; text-align:left; width:100%;  word-break: keep-all;}




.video-background {
    position: fixed; /* 화면에 고정 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* 콘텐츠가 비디오 위에 오도록 설정 */
}

#background-video {
    object-fit: cover; /* 비디오가 화면에 꽉 차도록 설정 */
    width: 100%;
    height: 100%;
}





/* 기본 이미지 스타일 */
.artview-img {
    width: 300px;  /* 기본 이미지 크기 */
    cursor: pointer; /* 클릭할 수 있는 느낌을 주기 위해 커서 변경 */
    border-radius: 5px;
    transition: transform 0.2s; /* 마우스 오버 시 변형 효과 */
}

.artview-img:hover {
    transform: scale(1.05); /* 마우스 오버 시 이미지 확대 */
}

/* 팝업 레이어 스타일 */
.popup {
    display: none; /* 처음에는 숨겨짐 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* 반투명 검은색 배경 */
    justify-content: center;
    align-items: center;
    z-index: 9999; /* 다른 요소들 위에 올리기 */
    overflow: scroll;
}

.popup-img {
    /* max-width: 90%; */  /* 팝업 이미지 최대 너비 */
    /* max-height: 80%; */ /* 팝업 이미지 최대 높이 */
    width: 500px;
    margin: auto;
    display: block;
}

.close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 30px;
    color: white;
    background: none;
    border: none;
    cursor: pointer;
}

.close-btn:hover {
    color: red; /* 닫기 버튼 호버 효과 */
}





/* .painting img 기본 상태: 투명하게 시작 */
.painting img {
    opacity: 0; /* 처음에는 보이지 않도록 설정 */
    transition: opacity 1s ease-in-out; /* 1초 동안 천천히 변하도록 설정 */
}

/* 페이지 로딩 시 opacity를 1로 바꿔서 이미지가 나타나도록 설정 */
.painting img.visible {
    opacity: 1; /* 완전히 보이게 */
}



/* 슬라이드 컨테이너 */
.slider-container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;  /* 슬라이드 가능한 영역의 크기 조정 */
    margin: auto;
}
/* 슬라이드 버튼 */
.slider-btn {
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 24px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

/* 왼쪽 슬라이드 버튼 */
.left {
    left: -100px;
}

/* 오른쪽 슬라이드 버튼 */
.right {
    right: -100px;
}

/* 버튼에 마우스를 올렸을 때 */
.slider-btn:hover {
    background-color: rgba(0, 0, 0, 0.8);
}
.swiper {
    width: 600px;
    height: 300px;
}









.subtitle ul li {
    list-style: none;
    padding:10px 20px;
    margin-bottom: 20px;
    font-family: 'NEXON Football Gothic';
    font-size: 22px;
}

.subtitle ul li.color1 { background: #781a4a; }
.subtitle ul li.color2 { background: #19bbbd; }

.subtitle ul li a {
    text-decoration: none;
    color: #fff;
    letter-spacing: -1px;
}


	






	@media screen and (max-width: 640px) {
  .inner {
    width: 95%;
    margin: 0 auto;
  }

  .sub h1,
  .main h1 {
    font-size: 50px;
  }

  .main ul {
    display: inline-block;
  }

  .content .greeting {
    padding: 0 3%;
    word-break: keep-all;
  }

  .content .greeting h5 {
    text-align: center;
    font-size: 40px;
  }
.digitalview .viewinfo .artinfo .title span,
  .sub h2,
  .sub p,
  .content .greeting p {
    font-size: 18px;
  }

  .artlist {
    display: inline-block;
    text-align: center;
  }

  .artlist > li {
    display: inline-block;
    width: 45%;
    margin: 10px;
  }

  .artlist > li:nth-child(5) {
    margin: 10px;
  }
.digitalview {text-align:center;}
  .digitalview .viewinfo {
    margin-top: 50px;  width: 100%;    padding-left: 0;
  }
  .digitalview .viewinfo .viewtitle {font-size: 30px;}
.digitalview .viewimg { width:100%}
  .viewimg .painting {
    right: 0;
    left: 0;text-align:center;
    margin: 0 auto;
  }
.digitalview .inner {   text-align:center;
  display: inline-block;}
  .digitalview .viewimg img { 
    margin: 0 auto;
    text-align: center;
  }

  .left {
    left: 0;
  }

  .right {
    right: 0;
  }

.digitalview .tv { width:100%}
.tv .painting {position: absolute;
  top: 33%;
  background: #000;
  width: 87%;
  left: 6%;
  height: 37%;
  overflow: hidden;
  border-radius: 20px;}

.digital .artlist > li {    width: 100%;
    margin: 0;}
.popup-img { width:80%;}
}

@media screen and (max-width: 540px) {
  .sub h1,
  .main h1 {
    font-size: 40px;
  }

  .main ul li {
    padding: 20px 40px;
  }

  .content .greeting h5 {
    font-size: 30px;
  }
.digitalview .viewinfo .artinfo .title span,
  .sub h2,
  .sub p,
  .content .greeting p {
    font-size: 17px;
  }

 .Sharing .artlist > li {
    display: inline-block;
    width: 44%;
  }
}

@media screen and (max-width: 440px) {
  .sub h1,
  .main h1 {
    font-size: 30px;
  }

  .main ul li {
    padding: 15px 40px;
  }

  .content .greeting h5 {
    font-size: 26px;
  }
  .digitalview .viewimg > img {
  margin-left: -6%;}
.digitalview .viewinfo .artinfo .title span,
  .sub h2,
  .sub p,
  .content .greeting p {
    font-size: 16px;
  }
 .Sharing .artlist > li {
    display: inline-block;
    width: 100%; margin:0;
  }

  .content .greeting p br {
    display: none;
  }
}