/*!* video1 컨테이너 스타일 *!*/
/*.video1 {*/
/*    display: flex;           !* Flexbox 레이아웃 사용 *!*/
/*    justify-content: center; !* 가로 중앙 정렬 *!*/
/*    align-items: center;     !* 세로 중앙 정렬 *!*/
/*    gap: 3rem;               !* 비디오 간의 간격 조정 (1rem으로 설정) *!     !* 비디오를 한 줄에 유지 *!*/
/*    width: 100%;             !* 컨테이너의 너비를 100%로 설정 *!*/
/*    padding: 4rem 0;         !* 컨테이너 상하 패딩 *!*/
/*    background-color: white; !* 배경 색상 설정 *!*/
/*}*/

/*!* 비디오 스타일 *!*/
/*.motionposter {*/
/*    width: 30%;              !* 각 비디오의 너비를 45%로 설정 (총 너비 90%) *!*/
/*    max-width: 30%;          !* 최대 너비를 45%로 제한 *!*/
/*    height: auto;            !* 비디오 높이를 자동으로 조정 *!*/
/*    display: block;          !* 비디오 요소를 블록 요소로 설정 *!*/
/*}*/

.video1 {
    margin-top: 5rem;
    margin-bottom: 5rem;
    background-color: white;
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2열로 나눔 */
    gap: 2rem; /* 이미지 사이의 간격 */
    justify-items: center; /* 이미지를 가운데 정렬 */
    padding: 4rem 10%;
}

/* 추가적인 스타일 (선택 사항) */
.motionposter {
    max-width: 100%;
    height: auto;
}

.videotype{
    margin-bottom: 15rem;
}

.vtitle{
    margin-bottom: 2rem;
    font-size: 2rem;
    font-weight: bold;
}

.vtype{
    line-height: 1.6rem;
}

.vnum{
    font-size: 0.9rem;
    line-height: 2rem;
    margin-bottom: 2rem;
}

.typetitle{
    font-weight: bold;
    font-size: 2rem;
    margin-bottom: 3rem;
    margin-top: 15rem;
}

.typecontent{
    line-height: 1.5em;
    font-size: 1.2rem;
}

.colorcode {
    font-weight: bold;
    font-size: 2rem;
    margin-bottom: 5rem;
}

.color {
    display: flex;
    width:100%;
    margin-bottom: 15rem;
}

.color div {
    display: flex;
    justify-content: center; /* 수평 가운데 정렬 */
    align-items: center; /* 수직 가운데 정렬 */
    flex-grow: 1; /* 남은 공간을 모두 차지하도록 설정 */
    text-align: center; /* 텍스트를 수평 가운데 정렬 */
    font-weight: bold; /* 글자에 두껍게 속성 적용 */
}



.color1, .color2, .color3 {
    flex: 3;
    width: 50vh;
    height: 20vh;
}

.color1 {
    background-color: #0500ff;
}

.color2 {
    background-color: #ff0089;
}

.color3{
    background-color: #00eaff;
}

.num{
    font-weight: bold;
    font-size: 5rem;
    color:#00eaff;
}

.numtype{
    display: flex;
    margin-bottom: 5rem;
}

.num1{
    font-weight: bold;
    font-size: 3rem;
    color:#00eaff;
    display: inline-block;
}

.title1{
    /*font-weight: bold;*/
    font-size: 5rem;
}

.title2{
    /*font-weight: bold;*/
    font-size: 2.5rem;
    display: inline-block;
    margin-left: 1%;
}

.goods2,.goods3,.goods4{
    margin: 15rem 0;
}

.numtype1{
    display: flex;
    margin-bottom: 5rem;
}

.goods1{
    margin-bottom: 15rem;
}
/*.item {*/
/*    display: grid;*/
/*    grid-template-columns: 1fr 3fr; !* 화면을 두 부분으로 나눔 *!*/
/*    gap: 20px; !* 열 간격 설정 *!*/
/*    align-items: start; !* 상단 정렬 *!*/
/*}*/

/*.logoname, .logoimg {*/
/*    display: flex;*/
/*    flex-direction: column; !* 세로로 정렬 *!*/
/*    justify-content: start;*/
/*    gap: 20px; !* 항목 간의 간격 설정 *!*/
/*}*/

/*.item .logoname{*/
/*    display: flex;*/
/*    flex:3;*/
/*    flex-direction: column;*/
/*}*/

/*.logoimg img {*/
/*    align-self: flex-end; !* 이미지 상단 정렬 *!*/
/*}*/

/*.logo1 {*/
/*    width: 40%; !* 가로형 로고 크기 설정 *!*/
/*}*/

/*.logo2 {*/
/*    width: 30%; !* 세로형 로고 크기 설정 *!*/
/*}*/

/*.symbol {*/
/*    width: 20%; !* 심볼마크 로고 크기 설정 *!*/
/*}*/

/* 전체 아이템을 그리드로 나눔 */
/* 전체 아이템을 그리드로 나눔 */
/* 전체 아이템을 2x3 그리드로 나눔 */
/* item을 2x3 그리드로 설정 */
.item {
    display: grid;
    grid-template-columns: 1fr 3fr; /* 왼쪽 열: 1fr, 오른쪽 열: 3fr */
    grid-template-rows: repeat(3, 1fr); /* 세 개의 행을 동일한 크기로 나눔 */
    gap: 20px; /* 셀 간격 설정 */
    height: 70vh; /* 화면 높이를 가득 채우도록 설정 */
    align-items: center; /* 각 셀을 수직 중앙에 정렬 */
    justify-items: center; /* 각 셀을 수평 중앙에 정렬 */
    margin-bottom: 15rem;
}

.item p{
    /*font-size: 1.1rem;*/
    font-weight: bold;
}
/* 각 이미지 크기 조정 */
.logo1 {
    width: 40%; /* 가로형 로고 크기 설정 */
}

.logo2 {
    width: 30%; /* 세로형 로고 크기 설정 */
}

.symbol {
    width: 20%; /* 심볼마크 로고 크기 설정 */
}




.goods1img {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2열로 나눔 */
    gap: 1rem; /* 이미지 사이의 간격 */
    justify-items: center; /* 이미지를 가운데 정렬 */
}

/* 추가적인 스타일 (선택 사항) */
.goods1img img {
    max-width: 100%;
    height: auto;
}

/*.goods2img {*/
/*    display: grid;*/
/*    grid-template-columns: repeat(3, 1fr); !* 3열로 나눔 *!*/
/*    justify-items: center; !* 이미지를 가운데 정렬 *!*/
/*}*/

/*.goods2img img {*/
/*    max-width: 100%;*/
/*    height: auto;*/
/*    border: white 1px solid;*/
/*}*/

.goods2img {
    display: flex;
    justify-content: space-between; /* 이미지 사이에 균등한 간격을 두고 정렬 */
    align-items: center; /* 이미지가 수직으로 가운데 정렬 */
    /*gap: 10px; !* 이미지 사이의 간격 (선택 사항) *!*/
    /*padding: 10px; !* 상하좌우 패딩 *!*/
}

.goods2img img {
    flex: 3; /* 각 이미지가 동일한 너비를 차지 */
    max-width: calc(33.33% - 2rem); /* 한 줄에 3장을 배치하고, 패딩과 간격을 고려 */
    height: auto; /* 이미지 비율 유지 */
    border: 3px solid #ffffff;
}

/* 추가적인 스타일 (선택 사항) */
/*.goods2img img {*/
/*    border: 1px solid #ccc; !* 테두리 스타일 *!*/
/*    padding: 5px; !* 패딩 *!*/
/*    background-color: #f9f9f9; !* 배경색 *!*/
/*    border-radius: 8px; !* 모서리 둥글게 *!*/
/*}*/

/*.goods3img1{*/
/*    display: flex;*/
/*    justify-items: center;*/
/*    align-items: center;*/
/*}*/

/*.goods3img1 img{*/
/*    flex:1;*/
/*    width: 50vh;*/
/*}*/

.goods2type {
    display: flex;
    justify-content: space-between; /* 이미지 사이에 균등한 간격을 두고 정렬 */
    text-align: center; /* 이미지가 수직으로 가운데 정렬 */
}

.goods2type p{
    padding-top:3rem;
    flex:3;
    max-width: calc(33.33% - 2rem); /* 한 줄에 3장을 배치하고, 패딩과 간격을 고려 */
}

.bold{
    font-weight: bold;
}

.goods3img1 {
    text-align: center; /* 부모 요소에서 이미지가 중앙에 오도록 설정 */
    margin: 0 auto; /* 부모 요소에서 중앙 정렬 */
    padding-bottom: 3rem;
}

.goods3img1 p{
    margin-top: 4rem;
    margin-bottom: 3rem;
    font-size: 1.1rem;
    font-weight: bold;
}

.goods3img1 img {
    width: 70%; /* 이미지 크기를 전체 화면의 50%로 설정 */
    height: auto; /* 이미지 비율을 유지 */
    display: block; /* 이미지 요소가 블록 요소로 처리되어 text-align이 적용됨 */
    margin: 0 auto; /* 이미지 자체에 중앙 정렬을 추가 */
}


.goods3img{
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2열로 나눔 */
    gap: 3rem; /* 이미지 사이의 간격 */
    justify-items: center; /* 이미지를 가운데 정렬 */
}

.goods3img img {
    max-width: 100%;
    height: auto;
}

.goods3type{
    margin-bottom: 0rem;
    text-align: center;
    margin-top: 4rem;
    font-size: 1.1rem;
    font-weight: bold;
}

/*.goods4img{*/
/*    display: flex;*/
/*    flex-direction: row;*/
/*    justify-content: space-between; !* 이미지를 가운데 정렬 *!*/
/*    margin-bottom: 15rem;*/
/*}*/

/*.goods4img img {*/
/*    flex:6;*/
/*    height: auto;*/
/*    max-width: 30%;*/
/*}*/

/* 전체 슬라이더 컨테이너 */
.goods4img-slider {
    position: relative;
    width: 100%;
    height: 10%; /* 슬라이더의 높이를 설정 */
    margin: 0 auto; /* 중앙에 배치 */
    overflow: hidden; /* 넘치는 부분을 숨김 */
    box-sizing: border-box; /* 패딩과 테두리를 포함한 너비 계산 */
    padding-bottom: 5rem;
}

/* 슬라이더 내부 요소 */
.goods4img-inner {
    position: relative;
    display: flex;
    height: 100%;
    width: 25%; /* 6개의 이미지를 위해 충분히 큰 너비를 설정 */
    transition: transform 0.5s ease; /* 슬라이드 이동 시 부드러운 애니메이션 */
}

/* 개별 이미지 스타일 */
.goods4img-inner img {
    max-width: 100%;
    height: auto;
    flex: 1 0 15%; /* 이미지 비율 유지 및 유연한 크기 설정 */
    object-fit: contain; /* 이미지를 컨테이너에 맞게 조정 */
    margin: 0 5px; /* 이미지 간의 간격 */
}




/*.goods2img {*/
/*    display: flex;*/
/*    justify-content: space-between; !* 이미지 사이에 균등한 간격을 두고 정렬 *!*/
/*    align-items: center; !* 이미지가 수직으로 가운데 정렬 *!*/
/*    !*gap: 10px; !* 이미지 사이의 간격 (선택 사항) *!*!*/
/*    !*padding: 10px; !* 상하좌우 패딩 *!*!*/
/*}*/

/*.goods2img img {*/
/*    flex: 3; !* 각 이미지가 동일한 너비를 차지 *!*/
/*    max-width: calc(33.33% - 2rem); !* 한 줄에 3장을 배치하고, 패딩과 간격을 고려 *!*/
/*    height: auto; !* 이미지 비율 유지 *!*/
/*    border: 1px solid #ccc;*/
/*}*/

li {
    list-style: none;
}
.loop_cont {
    display: flex;
    margin-top: 100px;
    overflow: hidden; /* 롤링 배너 영역 벗어나는 부분 숨기기 */
}

.banner img{
    height: 5rem;
}

.banner {
    width: 2000px;
    height: 100px;
}

.banner_list {
    display: flex;
    width: 420%; /* 부모 요소에 맞게 배너 리스트 너비 조정 */
    animation: roll 35s linear infinite;
}

/* 첫 번째 배너 리스트가 끝나면 뒤에 바로 두 번째 배너 리스트가 붙도록 설정 */
.n1:last-child {
    animation-delay: 1000s;
}

/* 롤링 애니메이션 정의 */
@keyframes roll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

.video {
    background-color: white;
    display: flex;          /* flexbox를 사용하여 중앙 정렬 */
    justify-content: center;/* 수평 중앙 정렬 */
    align-items: center;    /* 수직 중앙 정렬 (필요한 경우 사용) */
    width: 100%; /* 부모 div의 너비를 100%로 설정 */
    margin-bottom: 10rem;
    margin-top: 2rem;
}

/* video 요소의 너비를 80%로 설정 */
video.ticketmotion {
    width: 60%;             /* 비디오 너비를 80%로 설정 */
    max-width: 100%;        /* 비디오가 부모 요소의 너비를 넘지 않도록 제한 */
    height: auto;           /* 비디오의 종횡비를 유지하면서 높이 자동 조정 */
}