/*html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}*/

/* 헤더 컨테이너 */
.ls-header {
    width: 100%;
    height: 60px;
    background: #ffffff;
    border-bottom: 1px solid #f0f0f0;
    position: relative;
    z-index: 1000;
}

.ls-header-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    height: 100%;
}

.ls-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1760px;
    min-width: 1024px;
    padding: 0 20px;
}

/* 로고 */
.ls-logo {
    display: block;
    width: 200px;
    height: 24px;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    text-decoration: none;
}

.ls-logo-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
}

.ls-logo-text {
    position: absolute;
    top: 0;
    left: 22.75%;
    right: 0;
    bottom: -0.02%;
}

    .ls-logo-text svg {
        position: absolute;
        display: block;
        width: 100%;
        height: 100%;
    }

.ls-logo-icon {
    position: absolute;
    top: 8.79%;
    left: 0;
    right: 80.82%;
    bottom: 0.2%;
}

    .ls-logo-icon svg {
        position: absolute;
        display: block;
        width: 100%;
        height: 100%;
    }

/* GNB 네비게이션 */
.ls-gnb {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ls-menu-list {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ls-menu-item {
    position: relative;
    height: 60px;
    display: flex;
    align-items: center;
}

.ls-menu-link {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    font-family: 'Pretendard', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #222;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s ease;
    background: none;
    border: none;
    height: 100%;
}

    .ls-menu-link:hover {
        color: #7c20b0;
    }

/* 드롭다운 */
.ls-dropdown {
    position: relative;
}

.ls-dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
}

.ls-dropdown-icon {
    display: inline-flex;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

    .ls-dropdown-icon svg {
        width: 100%;
        height: 100%;
    }

.ls-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    display: none;
    background: #ffffff;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    min-width: 102px;
    padding: 4px;
    list-style: none;
    z-index: 1001;
    text-align:center;
}

    .ls-dropdown-menu.active {
        display: block;
    }

.ls-dropdown-item {
    display: block;
    padding: 10px;
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #666666;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
    border-radius: 6px;
}

    .ls-dropdown-item:hover {
        background-color: #f5f5f5;
    }

/* 로그인/회원가입 버튼 */
.ls-auth-buttons {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 10px;
}

.ls-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    font-family: 'Pretendard', sans-serif;
    font-weight: 600;
    font-size: 14px;
    border-radius: 100px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.ls-btn-login {
    background: #7c20b0;
    color: #ffffff;
}

    .ls-btn-login:hover {
        background: #6a1b95;
        transform: translateY(-1px);
    }

.ls-btn-signup {
    background: rgba(0, 0, 0, 0.05);
    color: #666;
}

    .ls-btn-signup:hover {
        background: rgba(0, 0, 0, 0.08);
        transform: translateY(-1px);
    }

/* 스크롤 시 그림자 효과 */
.ls-header.scrolled {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

#index_wrap .pocus, #index_wrap .custom_images {
    position: absolute;
    inset: 0;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.8s ease;
}

#index_wrap .focus_active {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

#index_wrap .pocus, #index_wrap .color_dots {
    position: absolute;
    inset: 0;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.5s ease;
}

#index_wrap .focus_active {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

#index_wrap .theme_template ::-webkit-scrollbar {
    width: 4px;
}

#index_wrap .theme_template ::-webkit-scrollbar-thumb {
    border-radius: 20px;
    background: #666;
}

#notice_wrap .article-row:first-of-type {
    border-top: 1px solid #000000;
}

#guide_wrap .swiper-button-next::after, #guide_wrap .swiper-button-prev::after {
    display: none;
}

#index_wrap .info-item {
    opacity: 0;
    transform: translateY(-100px);
    animation: slideDown 0.8s ease-out forwards;
}

#index_wrap .info-item[data-index="0"] {
    animation-delay: 0s;
}

#index_wrap .info-item[data-index="1"] {
    animation-delay: 1.2s;
}

#index_wrap .info-item[data-index="2"] {
    animation-delay: 2.4s;
}

@keyframes slideDown {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes infinite-stagger {
    0%, 100% {
        opacity: 0;
        transform: translateY(20px);
    }

    50% {
        opacity: 1;
        transform: translateY(0);
    }
}
#index_wrap .stagger-image {
    opacity: 0;
    transform: translateY(-50px);
    transition: all 0.6s ease-out;
}

#index_wrap .slideup-image {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.6s ease-out;
}

#index_wrap .visitors_images {
    opacity: 0;
    transform: translateY(200px);
    transition: all 0.6s ease-out;
}

#index_wrap .ad_images {
    opacity: 0;
    transform: translateY(100px);
    transition: all 0.6s ease-out;
}
/* 등장 상태 */
#index_wrap .is-visible {
    opacity: 1;
    transform: translateY(0);
}

#index_wrap .invisible {
    opacity: 0;
    transform: translateY(0);
    transition: all 0.3s ease-out;
}

/* 팝업 */
.popup-layer {display:block; position:fixed; left:0; top:0; width:100%; height:100%; z-index:200; }
.popup-layer .layer-bg {position:absolute; width:100%; height:100%; left:0; top:0; z-index:100; background:rgba(0,0,0,.4); zoom: 1;}
.popup-layer > .pop {position:absolute; left:50%; top:50%; z-index:150; border:solid 2px #3c3c3c; transform:translate(-50%,-50%); background-color: #3c3c3c}
.popup-layer .btn-close {position:absolute; top:10px;right: 10px; cursor: pointer;z-index:99}
.popup-layer .close-box {background:#3c3c3c; padding: 10px 0; text-align:center;}
.popup-layer .close-box input {visibility:hidden; display: none;}
.popup-layer .close-box label {font-size: 16px;color: #fff;}
.popup-layer > .pop .swipe{max-width:476px;overflow:hidden;}
.popup-layer > .pop .swipe .swiper-pagination{left:50%;transform:translateX(-50%);bottom:42px;}
.popup-layer > .pop .swipe .swiper-pagination span{background:#fff;border:1px solid #333;margin:0 4px}
.popup-layer > .pop .swipe .swiper-pagination span.swiper-pagination-bullet-active{background:#a91dfb;}
.popup-layer .label_chk 			{ color:#666; position:relative; display:inline-block; padding-left:26px; cursor:pointer; font-size:1.6rem; }
.popup-layer .label_chk:before 	{ content:''; display:inline-block; position:absolute; left:0; top:50%; transform:translateY(-50%); width:16px; height:16px; border:1px solid #d7d7d7; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.popup-layer .label_chk:after 	{ position: absolute; content: ''; display: block; width: 7px; height: 4px; top: 9px; left: 5px; border-style: solid; border-color: #fff; border-width: 0 0 1px 1px; -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
.popup-layer input[type=checkbox]:checked + label::before, input[type=radio]:checked + label::before { background-color:#7c20b0; border: none; }