html, body {
    background-color: #000000;
    margin: 0;
    padding: 0;
}

.SLB_caption {
    width: 100%;
    height: 40px;
    line-height: 40px;
    color: white;
    font-weight: bold;
    background: linear-gradient(to right, #346091, #192d42);
    /*background: linear-gradient(to right, #1B2430, black );*/
    cursor: move;
    font-size: 20px;
    padding-left: 10px;
}

.SLB_close {
    position: absolute;
    top: 6px;
    right: 10px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    background: url(/assets/images/icon-close.png) no-repeat;
    background-size: 27px;
}

#SLB_iframe {
    background-color: white;
    overflow-y: scroll;
    overflow-x: hidden
}

#SLB_content {
    background-color: #1B2430;
}
/* -- BANNER MAIN -- */

.banner-main{
    width:100%;
    height:auto;
    float:left;
    text-align:center;
}
.banner-main .banner-center{
    width:auto;
    height:100%;
    display:inline-block;
    position:relative;
}
.banner-main .carousel-bg{
    width:100%;
}
/* ===== OVERLAY IMAGES ===== */
.cbg-img-cont {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
}

.cbg-img-cont img {
    position: absolute;
    object-fit: contain;
}

.cbg-img-cont .first-left {
    left: 0%;
    bottom: 0;
    z-index: 1;
    animation: first_left_anim 6s ease infinite;
}

.cbg-img-cont .first-left-back {
    left: 3%;
    bottom: 28%;
    z-index: 0;
    animation: first_left_back_anim 6s ease infinite;
}

.cbg-img-cont .first-right {
    right: 0%;
    bottom: 0;
    z-index: 1;
    animation: first_right_anim 6s ease infinite;
}

.cbg-img-cont .first-right-back {
    right: 2.80%;
    z-index: 0;
    animation: first_right_back_anim 6s ease infinite;
}

.cbg-img-cont .second-left {
    left: 0%;
    bottom: 0;
    z-index: 1;
    animation: second_left_anim 6s ease infinite;
}

.cbg-img-cont .second-center {
    left: 25%;
    bottom: 0;
    z-index: 0;
    animation: second_center_anim 6s ease infinite;
}

.cbg-img-cont .second-right {
    right: 0;
    bottom: -18px;
    z-index: 0;
    animation: second_right_anim 6s ease infinite;
}

/* ===== ANIMATIONS ===== */
@keyframes first_left_anim {
    0% {bottom: -13%; opacity: 0;}
    5% {bottom: -13%; opacity: 0;}
    15% {bottom: 0; opacity: 1;}
    20% {bottom: -6px; opacity: 1;}
    95% {bottom: -6px; opacity: 1;}
    100% {bottom: -6px; opacity: 0;}
}

@keyframes first_left_back_anim {
    0% {bottom: 10%; opacity: 0;}
    20% {bottom: 10%; opacity: 0;}
    40% {bottom: 28%; opacity: 1;}
    95% {bottom: 28%; opacity: 1;}
    100% {bottom: 28%; opacity: 0;}
}

@keyframes first_right_anim {
    0% {bottom: -10%; opacity: 0;}
    10% {bottom: -10%; opacity: 0;}
    20% {bottom: 0; opacity: 1;}
    25% {bottom: -27px; opacity: 1;}
    95% {bottom: -27px; opacity: 1;}
    100% {bottom: -27px; opacity: 0;}
}

@keyframes first_right_back_anim {
    0% {bottom: -10%; opacity: 0;}
    25% {bottom: -10%; opacity: 0;}
    45% {bottom: 0; opacity: 1;}
    95% {bottom: 0; opacity: 1;}
    100% {bottom: 0; opacity: 0;}
}

@keyframes second_left_anim {
    0% {left: -100%; opacity: 0;}
    5% {left: -100%; opacity: 0;}
    20% {left: 0; opacity: 1;}
    95% {left: 0; opacity: 1;}
    100% {left: 0; opacity: 0;}
}

@keyframes second_center_anim {
    0% {left: -100%; opacity: 0;}
    10% {left: -100%; opacity: 0;}
    30% {left: 30%; opacity: 1;}
    95% {left: 30%; opacity: 1;}
    100% {left: 50%; opacity: 0;}
}

@keyframes second_right_anim {
    0% {right: -10%; opacity: 0;}
    25% {right: -10%; opacity: 0;}
    45% {right: 0%; opacity: 1;}
    95% {right: 0%; opacity: 1;}
    100% {right: 0%; opacity: 0;}
}


/* 배너 끝 /////////////////////// */



#header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
    height: 50px !important;
    min-height: 70px !important;
    max-height: 70px !important;
    background: rgba(0, 0, 0, 0.5) !important;
    /*backdrop-filter: blur(10px) !important;*/
}


/* Board layout styles */



.board-main .bm-body {
    width: 100%;
    height: auto;
    float: left;
    text-align: center;
    position: relative;
    z-index: 1;
}

.board-cont {
    display: inline-block;
    margin: 0 22px 33px 22px;
    vertical-align: top;
    height: auto;
    max-width: 367px;
}



/* Bank-tab refresh animation styles */
.bank-tab {
    width: 100%;
    height: auto;
    float: left;
    margin-top: 0px;
    animation: 1;
    animation-name: over_sideward_anim;
    animation-duration: 0.5s;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
    display: none;
}

.bank-tab.active {
    display: block;
}

.bank-tab table {
    width: 100%;
}

.bank-tab table tr {
    height: 35px;
}

.bank-tab table td {
    color: white;
    font-size: 12px;
    font-family: NotoSansKr-Regular;
}

/* 게시판 내 모든 텍스트를 흰색으로 */
.board-cont .body table td,
.board-cont .body table td a,
.board-cont .body table tr,
.board-cont .body table tr a {
    color: white !important;
    font-size: 14px !important;
}

.board-cont.notice .body table td a {
    color: white !important;
    font-size: 14px !important;
}

.board-cont.dep-wit .body table td {
    color: white !important;
    font-size: 14px !important;
}

/* 입출금 내역 테이블 행 높이 조정 */
.board-cont.dep-wit .body table tr {
    height: 40px !important;
}

/* 입출금 내역 한 줄씩 표시 */
.board-cont.dep-wit .body table {
    border-collapse: collapse;
}

.board-cont.dep-wit .body table tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.board-cont.dep-wit .body table tr:last-child {
    border-bottom: none;
}

.bank-tab table td:first-child {
    text-align: left;
    padding-left: 7px;
}

.bank-tab table td:last-child {
    color: #fff;
    text-align: right;
    padding-right: 7px;
}

.carousel-dep-wit {
    width: 100%;
}

.carousel-dep-wit .carousel-inner .item .list {
    width: 100%;
    margin-top: 0px;
    animation: 1;
    animation-name: deposit_list;
    animation-duration: 0.3s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    opacity: 0;
}

.carousel-dep-wit .carousel-inner .item .list:nth-child(1) {
    animation-delay: 0.1s;
}

.carousel-dep-wit .carousel-inner .item .list:nth-child(2) {
    animation-delay: 0.2s;
}

.carousel-dep-wit .carousel-inner .item .list:nth-child(3) {
    animation-delay: 0.3s;
}

.carousel-dep-wit .carousel-inner .item .list:nth-child(4) {
    animation-delay: 0.4s;
}

.carousel-dep-wit .carousel-inner .item .list:nth-child(5) {
    animation-delay: 0.5s;
}

.carousel-dep-wit .carousel-inner .item .list:nth-child(6) {
    animation-delay: 0.6s;
}

@keyframes deposit_list {
    0% { 
        transform: translateY(-15px); 
        opacity: 0;
    }
    100% { 
        transform: translateY(0px); 
        opacity: 1;
    }
}

/* --- 상단 이미지 스타일 강조 --- */
.board-cont .body table td,
.board-cont .body table td a,
.board-cont .body table tr,
.board-cont .body table tr a {
    color: #fff !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em;
}
.board-cont .body table td {
    padding: 10px 8px !important;
}
.board-cont .body table tr {
    height: 48px !important;
    border-bottom: 1.5px solid rgba(255,255,255,0.12);
    background: transparent;
    transition: background 0.2s;
}
.board-cont .body table tr:last-child {
    border-bottom: none;
}
.board-cont .body table tr:hover {
    background: rgba(255,255,255,0.06);
}
/* 헤더 강조 */
.board-cont .head {
    background: #191a1e;
    border-radius: 12px 12px 0 0;
    border: 2px solid #3a3a3a;
    border-bottom: none;
    padding: 12px 20px 12px 20px;
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: 700;
    color: #ffce4b;
    gap: 10px;
}
/*
.board-cont .head img {
    height: 28px;
    margin-right: 8px;
}
*/
/* 버튼 강조 */
.board-cont .head button,
.board-cont .head .btn,
.board-cont .head .btn-primary {
    background: #222;
    color: #ffce4b;
    border: 2px solid #ffce4b;
    border-radius: 20px;
    font-size: 15px;
    font-weight: 700;
    padding: 4px 18px;
    margin-left: auto;
    transition: background 0.2s, color 0.2s;
}
.board-cont .head button:hover,
.board-cont .head .btn:hover,
.board-cont .head .btn-primary:hover {
    background: #ffce4b;
    color: #222;
}
/* 게시판 전체 배경 강조 */
.board-cont {
    background: #18191d;
    border-radius: 12px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.18);
    border: 2px solid #292929;
}
/* 게시판 간격 */
.bm-body {
    gap: 36px !important;
}

/* --- 게시판 고급 스타일 추가 개선 --- */
.board-cont {
    background: #000000 !important;
    border-radius: 18px !important;
    box-shadow: 0 4px 24px 0 rgba(0,0,0,0.28) !important;
    border: 2.5px solid #35363a !important;
    overflow: hidden;
}
.board-cont .head {
    background: #000000 !important;
    border-radius: 18px 18px 0 0 !important;
    border: none !important;
    padding: 16px 28px 16px 24px !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #ffe082 !important;
    box-shadow: 0 2px 8px 0 rgba(0,0,0,0.10);
}
.board-cont .head button,
.board-cont .head .btn,
.board-cont .head .btn-primary {
    background: #ffe082 !important;
    color: #18191d !important;
    border: none !important;
    border-radius: 18px !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    padding: 6px 22px !important;
    margin-left: auto !important;
    box-shadow: 0 2px 8px 0 rgba(0,0,0,0.10);
}
.board-cont .head button:hover,
.board-cont .head .btn:hover,
.board-cont .head .btn-primary:hover {
    background: #ffd54f !important;
    color: #18191d !important;
}
.board-cont .body table td,
.board-cont .body table td a,
.board-cont .body table tr,
.board-cont .body table tr a {
    color: #fff !important;
    font-size: 19px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em;
}
.board-cont .body table td {
    padding: 14px 12px !important;
}
.board-cont .body table tr {
    height: 54px !important;
    border-bottom: 2px solid rgba(255,255,255,0.13) !important;
    background: transparent !important;
    transition: background 0.2s;
}
.board-cont .body table tr:last-child {
    border-bottom: none !important;
    border-radius: 0 0 18px 18px !important;
}
.board-cont .body table tr:hover {
    background: rgba(255,255,255,0.10) !important;
}
/* 공지사항 bold, 행마다 여백 */
.board-cont.notice .body table td a {
    font-weight: 800 !important;
    margin-bottom: 6px !important;
    display: inline-block;
}
.board-cont.notice .body table tr {
    height: 35px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}
.board-cont.notice .body table td {
    padding: 0 !important;
    border: none !important;
    background: none !important;
    font-size: 15px !important;
    font-family: NotoSansKr-Regular, sans-serif !important;
    color: #fff !important;
}
.board-cont.notice .body table td a {
    color: #fff !important;
    font-size: 15px !important;
    font-family: NotoSansKr-Regular, sans-serif !important;
    text-decoration: none !important;
    line-height: 35px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
}
/* 게시판 간 간격 더 넓게 */
.bm-body {
    gap: 48px !important;
}

/* --- 게시판 테두리 제거 및 입금/출금 한 줄 처리 --- */
.board-cont {
    border: none !important;
    box-shadow: 0 4px 24px 0 rgba(0,0,0,0.28) !important;
}
/* 입금/출금 한 줄 처리 */
.board-cont.dep-wit .body table td:first-child {
    white-space: nowrap !important;
}
/* 공지사항도 한 줄 처리(불필요한 줄바꿈 방지) */
.board-cont.notice .body table td {
    white-space: nowrap !important;
}



/* ===== CAROUSEL BASE STYLES ===== */
.carousel, .carousel-inner {
    position: relative;
}

.carousel-inner {
    overflow: hidden;
    width: 100%;
}

.carousel-inner > .item {
    display: none;
    position: relative;
    transition: left .6s ease-in-out;
}

.carousel-inner > .item > a > img, 
.carousel-inner > .item > img {
    line-height: 1;
}

/* 3D Transform Support for Performance */
@media (-webkit-transform-3d),(transform-3d) {
    .carousel-inner > .item {
        transition: transform .6s ease-in-out;
        backface-visibility: hidden;
        perspective: 1000px;
    }

    .carousel-inner > .item.active.right, 
    .carousel-inner > .item.next {
        transform: translate3d(100%, 0, 0);
        left: 0;
    }

    .carousel-inner > .item.active.left, 
    .carousel-inner > .item.prev {
        transform: translate3d(-100%, 0, 0);
        left: 0;
    }

    .carousel-inner > .item.active, 
    .carousel-inner > .item.next.left, 
    .carousel-inner > .item.prev.right {
        transform: translateZ(0);
        left: 0;
    }
}

.carousel-inner > .active, 
.carousel-inner > .next, 
.carousel-inner > .prev {
    display: block;
}

.carousel-inner > .active {
    left: 0;
}

.carousel-inner > .next, 
.carousel-inner > .prev {
    position: absolute;
    top: 0;
    width: 100%;
}

.carousel-inner > .next {
    left: 100%;
}

.carousel-inner > .prev {
    left: -100%;
}

.carousel-inner > .next.left, 
.carousel-inner > .prev.right {
    left: 0;
}

.carousel-inner > .active.left {
    left: -100%;
}

.carousel-inner > .active.right {
    left: 100%;
}

/* ===== BANNER SPECIFIC STYLES ===== */
.banner-main,
.banner-center,
.carousel-bg,
.carousel-inner {
    background: transparent;
    max-width: 1920px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

.carousel-bg {
    background: transparent;
    position: relative;
    overflow: hidden;
}

.cbg-bg {
    width: 100%;
    height: 500px;
    object-fit: cover;
    object-position: top center;
    display: block;
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
}

.carousel-text-cont {
    position: absolute;
    left: 0; 
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.carousel-text-cont .text-cont img {
    max-width: 60%;
    min-width: 320px;
    width: auto;
    height: auto;
    display: block;
    margin: 0 auto;
    filter: drop-shadow(0 2px 16px #000a);
    max-height: 320px;
    max-width: 60vw;
}

.banner-center {
    position: relative;
    width: 100%;
    height: 500px;
}

.ct-center,
.carousel-ct,
.carousel-inner,
.carousel-inner > .item {
    height: 100%;
}

/* PC 기본값 (1025px 이상) */
.banner-main,
.banner-center,
.carousel-text-cont,
.carousel-text-cont .text-cont {
    /*height: 500px !important;*/
}
.carousel-text-cont .text-cont img {
    max-height: 320px !important;
    width: auto !important;
    height: auto !important;
    max-width: 60vw !important;
}







/*
@media (max-width: 480px) {
    .banner-main {
        min-height: 180px !important;
    }
    .carousel-inner {
        min-height: 180px !important;
    }
    .cbg-bg {
        height: 180px !important;
    }
}
@media (max-width: 414px) {
    .banner-main {
        min-height: 140px !important;
    }
    .carousel-inner {
        min-height: 140px !important;
    }
    .cbg-bg {
        height: 140px !important;
    }
}
*/


@media(max-width:1490px){
    .carousel-ct .title{
        font-size:3vw;
    }
    .carousel-ct .sub{
        font-size:2vw;
    }
    .carousel-ct .text-cont button{
        font-size:14px;
        width:110px;
        height:35px;
    }
}
@media(max-width:1200px){
    .ct-center{
        top:65%;
    }
}
@media(max-width:1100px){
    .ct-center{
        top:50%;
    }
}
@media(max-width:560px){
    .carousel-ct .info{
        font-size:12px;
    }
    .carousel-ct .title{
        font-size:18px;
    }
    .carousel-ct .sub{
        font-size:16px;
    }
    .carousel-ct .text-cont button{
        font-size:12px;
        width:100px;
        height:30px;
        margin-top:5px;
    }
    .banner-main .carousel-bg{
        width:130%;
        margin-left:-15%;
    }
}
@media(max-width:414px){
    .carousel-ct .info{
        font-size:10px;
    }
    .carousel-ct .title{
        font-size:16px;
    }
    .carousel-ct .sub{
        font-size:14px;
    }
    .carousel-ct .text-cont button{
        font-size:10px;
    }
}

@media (min-width: 1400px) {
    .pc-menu {
        display: flex !important;
        align-items: center;
    }
}

/* PC  */
@media (min-width: 1025px) { 

    #header-nav-div {
        margin-left: 80px !important;
    }
    
    #user-info {
        position: absolute !important;
        right: 50px !important;
        top: 0 !important;
        z-index: 10;
    }
    
    /* 배너 중앙 정렬 */
    .banner-main {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        position: relative !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
    .banner-center {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 1920px !important;
        margin: 0 auto !important;
        position: relative !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
    .cbg-bg {
        display: block !important;
        margin: 0 auto !important;
        text-align: center !important;
        position: relative !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
    /*
    .banner-main,
    .banner-center,
    .carousel-inner {
        min-height: 500px !important;
    }
    .carousel-text-cont,
    .carousel-text-cont .text-cont {
        height: 500px !important;
    }
    .cbg-bg {
        height: 500px !important;
        object-fit: cover !important;
        object-position: top center !important;
    } */

 }

/* 태블릿 (761~1024px)  */
@media (min-width: 761px) and (max-width: 1024px) {    

    #header-nav-div {
        margin-left: 80px !important;
    }
    .pc-menu { /*display: flex !important;*/ align-items: center; }    
    #user-info {
        position: absolute !important;
        right: 40px !important;
        top: 0 !important;
        z-index: 10;
    }

    .cbg-bg {
        max-width: unset !important;
        height: 250px !important;
        min-height: 250px !important;
    }
    
    .banner-main,
    .banner-center,
    .carousel-text-cont,
    .carousel-text-cont .text-cont {
        height: 250px !important;
    }
    
    .carousel-inner,
    .carousel-inner > .item {
        height: 250px !important;
    }
    
    .cbg-img-cont,
    .cbg-img-cont img {
        height: 100% !important;
        max-height: 100% !important;
    }
}

/* 중간 모바일 (481~760px) */
@media (min-width: 481px) and (max-width: 760px) { 

    #header-nav-div {
        margin-left: 2px !important;
     }
  
    .pc-menu { display: none !important; }
    #login-button {
        right: 2px !important;
    }
    #header-nav-div {
        margin-left: 2px !important;
    }
  
    .cbg-bg {
        max-width: unset !important;
        height: 180px !important;
        min-height: 180px !important;
        object-fit: cover !important;
    }
    
    .banner-main,
    .banner-center,
    .carousel-text-cont,
    .carousel-text-cont .text-cont {
        height: 180px !important;
    }
    
    .carousel-inner,
    .carousel-inner > .item {
        height: 180px !important;
    }
    
    .cbg-img-cont,
    .cbg-img-cont img,
    .cbg-img-cont .first-left,
    .cbg-img-cont .first-left-back,
    .cbg-img-cont .first-right,
    .cbg-img-cont .first-right-back,
    .cbg-img-cont .second-left,
    .cbg-img-cont .second-center,
    .cbg-img-cont .second-right {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }


    .board-main .bm-body {
      flex-direction: column;
      align-items: center;
    }
  
    .board-cont {
      max-width: 367px !important;
      min-width: unset !important;
      width: auto !important;
    }
  
    #user-info {
        position: absolute !important;
        right: 40px !important;
        top: 0 !important;
        z-index: 10;
    }


    #header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 1000 !important;
        height: 55px !important;
        min-height: 55px !important;
        max-height: 55px !important;        
    }

    .banner-main {
        margin-top: 60px;
        padding-top: 0;
        position: relative;
        top: 0;
        display: block;
        clear: both;
        margin-bottom: 5px;
        margin-left: 0;
        margin-right: 0;
    }



    /*
    .banner-main {
        margin-top: 56px !important;
    }
    .banner-main,
    .banner-center,
    .carousel-inner {
        min-height: 180px !important;
    }    
    .carousel-text-cont,
    .carousel-text-cont .text-cont {
        height: 180px !important;
    }
    .cbg-bg {
        height: 180px !important;
        object-fit: cover !important;
    }
    .cbg-img-cont,
    .cbg-img-cont img,
    .cbg-img-cont .first-left,
    .cbg-img-cont .first-left-back,
    .cbg-img-cont .first-right,
    .cbg-img-cont .first-right-back,
    .cbg-img-cont .second-left,
    .cbg-img-cont .second-center,
    .cbg-img-cont .second-right {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
    #boardMain, .board-main {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    .board-cont {
        width: 90% !important;
        margin: 0 auto 16px auto !important;
    }
    */
 }

/* ===== MOBILE STYLES (480px 이하) ===== */
@media (max-width: 480px) {
    /* Header */
    #header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1000;
        height: 55px;
        min-height: 55px;
        max-height: 55px;
    }
    
    #header-nav-div {
        margin-left: 2px;
    }
    
    .pc-menu { 
        display: none; 
    }
    
    #login-button {
        right: 2px;
    }
    
    #user-info {
        position: absolute;
        right: 34px;
        top: 0;
        z-index: 10;
    }
    
    /* Banner */
    .banner-main {
        margin-top: 0 !important;
        height: 80px !important;
        min-height: 80px !important;
        max-height: 80px !important;
        overflow: hidden !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        position: relative !important;
    }
    

    .banner-center,
    .carousel-text-cont,
    .carousel-text-cont .text-cont,
    .cbg-bg {
        height: 80px;
        min-height: 80px !important;
        max-height: 80px !important;
        overflow: hidden !important;
        position: absolute !important;
        top: 0; left: 0; right: 0; bottom: 0;
    }
    
    .carousel-inner,
    .carousel-inner > .item {
        height: 80px !important;
    }
    
    .cbg-img-cont {
        height: 80px;
        min-height: 80px !important;
        max-height: 80px !important;
        width: 100%;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    .cbg-img-cont img,
    .cbg-img-cont .first-left,
    .cbg-img-cont .first-left-back,
    .cbg-img-cont .first-right,
    .cbg-img-cont .first-right-back,
    .cbg-img-cont .second-left,
    .cbg-img-cont .second-center,
    .cbg-img-cont .second-right {
        height: auto;
        min-height: unset;
        max-height: unset;
        width: auto;
        object-fit: contain;
        position: absolute;
        top: 0;
        left: 0;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    /* Overlay Images */
    .cbg-img-cont .first-left {
        left: 10%;
        width: 35%;
        height: auto;
    }
    
    .cbg-img-cont .first-left-back {
        width: 100px;
        height: auto;
    }
    
    .cbg-img-cont .first-right {
        right: 10%;
        width: 25%;
        height: auto;
    }
    
    .cbg-img-cont .first-right-back {
        width: 200px;
        height: auto;
        z-index: 0;
        animation: first_right_back_anim_mobile 6s ease infinite;
    }
    
    .cbg-img-cont .second-left {
        left: 20%;
        bottom: 0;
        width: 35%;
        height: auto;
        z-index: 1;
        animation: second_left_anim_mobile 6s ease infinite;
    }
    
    .cbg-img-cont .second-center {
        left: 25%;
        width: 35%;
        height: auto;
    }
    
    .cbg-img-cont .second-right {
        right: 0;
        width: 35%;
        height: auto;
        animation: second_right_anim_mobile 6s ease infinite;
    }
    
    /* Board */
    /* sample3와 동일한 자연스러운 반응형 게시판 */
    .board-cont {
        margin: 0 10px 20px 10px !important;
        display: inline-block !important;
        vertical-align: top !important;
        width: auto !important;
        min-width: 280px !important;
        max-width: 90% !important;
    }
    
    .board-main .bm-body {
        text-align: center !important;
        width: 100% !important;
        height: auto !important;
        float: none !important;
        position: relative !important;
        z-index: 1 !important;
    }
    
    /* Mobile Animations */
    @keyframes first_right_back_anim_mobile {
        0% {bottom: -10%; opacity: 0;}
        25% {bottom: -10%; opacity: 0;}
        45% {bottom: -30%; opacity: 1;}
        95% {bottom: -30%; opacity: 1;}
        100% {bottom: -30%; opacity: 0;}
    }
    
    @keyframes second_left_anim_mobile {
        0% {left: -70%; opacity: 0;}
        5% {left: -70%; opacity: 0;}
        20% {left: 10%; opacity: 1;}
        95% {left: 10%; opacity: 1;}
        100% {left: 10%; opacity: 0;}
    }
    
    @keyframes second_right_anim_mobile {
        0% {right: -10%; opacity: 0;}
        25% {right: -10%; opacity: 0;}
        45% {right: 5%; opacity: 1;}
        95% {right: 5%; opacity: 1;}
        100% {right: 5%; opacity: 0;}
    }

    .header-spacer {
        height: 60px;
        min-height: 60px;
        max-height: 60px;
        display: block;
    }
}

/*
@media (max-width: 760px) {
    #header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 1000 !important;
    }
    .banner-main {
        margin-top: 56px !important;
    }
    .banner-main,
    .banner-center,
    .carousel-text-cont,
    .carousel-text-cont .text-cont {
        height: 180px !important;
    }
    .cbg-bg {
        height: 180px !important;
        min-height: 180px !important;
    }
    .cbg-img-cont {
        height: 100% !important;
        width: 100% !important;
        top: 0 !important;
        left: 0 !important;
    }
    .cbg-img-cont img,
    .cbg-img-cont .first-left,
    .cbg-img-cont .first-left-back,
    .cbg-img-cont .first-right,
    .cbg-img-cont .first-right-back,
    .cbg-img-cont .second-left,
    .cbg-img-cont .second-center,
    .cbg-img-cont .second-right {
        width: auto !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        top: 0 !important;
        left: 0 !important;
        right: auto !important;
        bottom: auto !important;
        object-fit: contain !important;
    }
    #boardMain, .board-main {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    .board-cont {
        width: 90% !important;
        margin: 0 auto 16px auto !important;
    }
}


@media (min-width: 491px) and (max-width: 1040px) {
    .cbg-img-cont img,
    .cbg-img-cont .first-left,
    .cbg-img-cont .first-left-back,
    .cbg-img-cont .first-right,
    .cbg-img-cont .first-right-back,
    .cbg-img-cont .second-left,
    .cbg-img-cont .second-center,
    .cbg-img-cont .second-right {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
        top: 0 !important;
        left: 0 !important;
        right: auto !important;
        bottom: auto !important;
    }
}

@media (max-width: 1040px) {
    .cbg-img-cont,
    .cbg-img-cont img,
    .cbg-img-cont .first-left,
    .cbg-img-cont .first-left-back,
    .cbg-img-cont .first-right,
    .cbg-img-cont .first-right-back,
    .cbg-img-cont .second-left,
    .cbg-img-cont .second-center,
    .cbg-img-cont .second-right {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: cover !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        box-sizing: border-box !important;
    }
}

@media (min-width: 481px) and (max-width: 1024px) {
    .banner-main,
    .banner-center,
    .carousel-text-cont,
    .carousel-text-cont .text-cont {
        height: 250px !important;
    }
    .cbg-bg {
        height: 250px !important;
        min-height: 250px !important;
        object-fit: cover !important;
    }
    .cbg-img-cont,
    .cbg-img-cont img,
    .cbg-img-cont .first-left,
    .cbg-img-cont .first-left-back,
    .cbg-img-cont .first-right,
    .cbg-img-cont .first-right-back,
    .cbg-img-cont .second-left,
    .cbg-img-cont .second-center,
    .cbg-img-cont .second-right {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        box-sizing: border-box !important;
    }
}


@media (min-width: 1025px) {
    .banner-main,
    .banner-center,
    .carousel-text-cont,
    .carousel-text-cont .text-cont {
        height: 500px !important;
    }
    .cbg-bg {
        height: 500px !important;
        object-fit: cover !important;
        object-position: top center !important;
    }
}


@media (min-width: 761px) and (max-width: 1024px) {
    .banner-main,
    .banner-center,
    .carousel-text-cont,
    .carousel-text-cont .text-cont {
        height: 250px !important;
    }
    .cbg-bg {
        height: 250px !important;
        object-fit: cover !important;
    }
    .cbg-img-cont,
    .cbg-img-cont img,
    .cbg-img-cont .first-left,
    .cbg-img-cont .first-left-back,
    .cbg-img-cont .first-right,
    .cbg-img-cont .first-right-back,
    .cbg-img-cont .second-left,
    .cbg-img-cont .second-center,
    .cbg-img-cont .second-right {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
}
*/

.board-main .bm-body {
    text-align: center !important;
}

@media (max-width: 800px) {
    .board-main .bm-body {
        text-align: center !important;
        float: none !important;
        display: block !important;
    }
}

.board-cont .body table tr {
    height: 35px !important;
    background: none !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: 0.5s;
}

.board-cont .body table td {
    padding: 0 !important;
    border: none !important;
    background: none !important;
    font-size: 12px !important;
    font-family: NotoSansKr-Regular, sans-serif !important;
    color: #fff !important;
}

.board-cont .body table td a {
    color: #fff !important;
    font-size: 12px !important;
    font-family: NotoSansKr-Regular, sans-serif !important;
    text-decoration: none !important;
    line-height: 35px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
}

.board-cont .body table tr:hover a {
    text-decoration: underline !important;
    text-decoration-style: dotted !important;
}

.board-cont .body table td:first-child {
    text-align: left !important;
}

.board-cont .body table td:last-child {
    padding-right: 13px !important;
    font-size: 11px !important;
}

@media (max-width: 600px) {
  .board-cont .head {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 10px !important;
    font-size: 16px !important;
  }
  /*
  .board-cont .head img {
    height: 22px !important;
    margin-right: 6px !important;
  }
*/
}

@media (max-width: 800px) {
  .board-cont {
    max-width: 90% !important;
    margin: 0 6px 20px 6px !important;
  }
}