/*------------------------------------------------------------------
[Table of contents]

1.  Template default CSS
	1.1	Variables
	1.2	Mixins
	1.3	Flexbox
	1.4	Reset
2.  Helper Css
3.  Header Section
4.  Hero Section
5.  Banner Section
6.  Product Section
7.  Intagram Section
8.  Latest Section
9.  Contact
10.  Footer Style
-------------------------------------------------------------------*/

/*----------------------------------------*/
/* Template default CSS
/*----------------------------------------*/

html,
body {
    height: 100%;
    font-family: "Mulish", sans-serif;
    -webkit-font-smoothing: antialiased;
    background: #ffffff;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    color: #333333;
    font-weight: 400;
    font-family: "Mulish", sans-serif;
}

h1 {
    color: #333333;
    font-size: 70px;
}

h2 {
    color: #333333;
    font-size: 36px;
}

h3 {
    color: #333333;
    font-size: 30px;
}

h4 {
    font-size: 24px;
}

h5 {
    color: #333333;
    font-size: 18px;
}

h6 {
    color: #333333;
    font-size: 16px;
}

p {
    font-size: 12px;
    font-family: "Mulish", sans-serif;
    color: #333333;
    font-weight: 400;
    line-height: 25px;
    margin: 0 0 15px 0;
}

img {
    max-width: 100%;
}

input:focus,
select:focus,
button:focus,
textarea:focus {
    outline: none;
}

a:hover,
a:focus {
    text-decoration: none;
    outline: none;
    color: #333333;
}

ul,
ol {
    padding: 0;
    margin: 0;
}

/*---------------------
  Helper CSS
-----------------------*/

.section-title {
    margin-bottom: 30px;
}

.section-title h4,
.section-title h5 {
    color: #333333;
    font-weight: 600;
    line-height: 21px;
    text-transform: uppercase;
    padding-left: 20px;
    position: relative;
    font-family: "Oswald", sans-serif;
}

.section-title h4:after,
.section-title h5:after {
    position: absolute;
    left: 0;
    top: -6px;
    height: 32px;
    width: 4px;
    background: #e53637;
    content: "";
}

.set-bg {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
}

.spad {
    padding-top: 100px;
    padding-bottom: 100px;
}

.text-white h1,
.text-white h2,
.text-white h3,
.text-white h4,
.text-white h5,
.text-white h6,
.text-white p,
.text-white span,
.text-white li,
.text-white a {
    color: #fff;
}

/* buttons */

.primary-btn {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    color: #ffffff;
    letter-spacing: 2px;
    background-color: #e53637;
    padding: 12px 30px;
    border-radius: 2px;
}

.primary-btn span {
    font-size: 18px;
    margin-left: 5px;
    position: relative;
    top: 3px;
}

.site-btn {
    font-size: 13px;
    color: #ffffff;
    background: #e53637;
    font-weight: 700;
    border: none;
    border-radius: 2px;
    letter-spacing: 2px;
    text-transform: uppercase;
    display: inline-block;
    padding: 12px 30px;
}

#addMeetupButton {
    font-size: 13px;
    color: #ffffff;
    background: #e53637;
    font-weight: 700;
    border: none;
    border-radius: 2px;
    letter-spacing: 2px;
    text-transform: uppercase;
    display: inline-block;
    padding: 12px 30px;
    margin-left: 10px;
}

#addMeetupButton:hover {
    background: #c72c2a;
    color: #f2f2f2;
}

/* Preloder */
#preloder {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 999999;
    background: #ffffff;
}

.loader {
    width: 40px;
    height: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -13px;
    margin-left: -13px;
    border-radius: 60px;
    animation: loader 0.8s linear infinite;
    -webkit-animation: loader 0.8s linear infinite;
}

@keyframes loader {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        border: 4px solid #f44336;
        border-left-color: transparent;
    }
    50% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
        border: 4px solid #673ab7;
        border-left-color: transparent;
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
        border: 4px solid #f44336;
        border-left-color: transparent;
    }
}

@-webkit-keyframes loader {
    0% {
        -webkit-transform: rotate(0deg);
        border: 4px solid #f44336;
        border-left-color: transparent;
    }
    50% {
        -webkit-transform: rotate(180deg);
        border: 4px solid #673ab7;
        border-left-color: transparent;
    }
    100% {
        -webkit-transform: rotate(360deg);
        border: 4px solid #f44336;
        border-left-color: transparent;
    }
}

.spacial-controls {
    position: fixed;
    width: 111px;
    height: 91px;
    top: 0;
    right: 0;
    z-index: 999;
}

.spacial-controls .search-switch {
    display: block;
    height: 100%;
    padding-top: 30px;
    background: #f5f5f5;
    text-align: center;
    cursor: pointer;
    color: #333333;
}

.search-model {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(255, 255, 255, 0.9);
    z-index: 99999;
}

.search-model-form {
    padding: 0 15px;
}

.search-model-form input {
    width: 500px;
    font-size: 40px;
    border: none;
    border-bottom: 2px solid #333;
    background: transparent;
    color: #333333;
}

.search-close-switch {
    position: absolute;
    width: 50px;
    height: 50px;
    background: #333;
    color: #fff;
    text-align: center;
    border-radius: 50%;
    font-size: 28px;
    line-height: 28px;
    top: 30px;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

/*---------------------
  Header
-----------------------*/

.header {
    background: #ffffff;
    border-bottom: 1px solid #e0e0e0;
}

/* 👉 추가: container 스타일 */
.header .container {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* 👉 추가: row 스타일 */
.header .row {
    display: flex;
    align-items: center;
}

/* 👉 추가: 컬럼 스타일 */
.col-lg-2 {
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
}

.col-lg-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
}

.header__logo {
    padding: 20px 0 17px;
}

.header__logo a {
    display: inline-block;
}

.header__menu {
    text-align: center;
}

/* 👉 추가: nav 스타일 */
.header__nav {
    display: flex;
    justify-content: center;
}

.header__menu ul li {
    list-style: none;
    display: inline-block;
    position: relative;
    margin-right: 16px;
}

.header__menu ul li.active a {
    background: #e53637;
    color: #ffffff;
}

.header__menu ul li:hover a {
    color: #e53637;
}

.header__menu ul li:hover .dropdown {
    top: 62px;
    opacity: 1;
    visibility: visible;
}

.header__menu ul li:hover .dropdown li a {
    background: transparent;
}

.header__menu ul li:last-child {
    margin-right: 0;
}

.header__menu ul li .dropdown {
    position: absolute;
    left: 0;
    top: 82px;
    width: 150px;
    background: #ffffff;
    text-align: left;
    padding: 5px 0;
    z-index: 9;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all, 0.3s;
    -o-transition: all, 0.3s;
    transition: all, 0.3s;
}

.header__menu ul li .dropdown li {
    display: block;
    margin-right: 0;
}

.header__menu ul li .dropdown li a {
    font-size: 14px;
    color: #333333;
    font-weight: 500;
    padding: 5px 20px;
}

.header__menu ul li a {
    font-size: 15px;
    color: #333333;
    display: block;
    font-weight: 700;
    -webkit-transition: all, 0.5s;
    -o-transition: all, 0.5s;
    transition: all, 0.5s;
    padding: 20px;
}

.header__menu ul li a span {
    position: relative;
    font-size: 17px;
    top: 2px;
}

.header__right {
    text-align: right;
    padding: 20px 0 15px;
}

.header__right a {
    display: inline-block;
    font-size: 18px;
    color: #333333;
    margin-right: 30px;
}

.header__right a:last-child {
    margin-right: 0;
}

.slicknav_menu {
    display: none;
}

/*---------------------
  Member Status Table
-----------------------*/

/* 기본 테이블 스타일 */
#walletTable {
    font-size: 0.9em;
    width: 100%;
    table-layout: fixed; /* 추가: 고정 너비 레이아웃 */
    border-collapse: collapse;
}

#walletTable th,
#walletTable td {
    color: #333333 !important; /* 검정색으로 강제 적용 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 8px;
    border-bottom: 1px solid #e0e0e0;
}

/* 또는 헤더만 따로 스타일링 */
#walletTable thead th {
    color: #333333 !important;
    background-color: #f5f5f5;
    font-weight: bold;
    text-align: left;
}

#walletTable tr:hover {
    background-color: #f8f8f8;
}

/* 열 너비 설정 */
.no-cell { width: 10%; }
.rank-cell { width: 15%; text-align: left; }
.nickname-cell { width: 20%; }
.wallet-cell {
    width: 35%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.balance-cell {
    width: 20%;
    text-align: left;
}

/* Rank Icons */
.rank-icon {
    width: 30px;
    height: 30px;
}

/* 👇 여기서부터 추가 */
.container-fluid.mt-5 {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

/* Responsive Styles */
@media only screen and (max-width: 767px) {
    .header {
        position: relative;
    }

    .header .container {
        padding: 0 15px;
    }

    .header .row {
        flex-wrap: wrap;
    }

    /* 👉 추가: 모바일에서 컬럼 전체 너비로 */
    .col-lg-2, .col-lg-8 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* 👉 수정: 로고 패딩 */
    .header__logo {
        padding: 15px 0;
    }

    /* 👉 수정: 우측 버튼 위치 조정 */
    .header__right {
        position: absolute;
        right: 110px;
        top: -35px;
        transform: translateY(-50%);
    }

    .header__menu {
        display: none;
    }

    .slicknav_menu {
        background: transparent;
        padding: 0;
        display: block;
    }

    .slicknav_nav {
        position: absolute;
        left: 0;
        top: 60px;
        width: 100%;
        background: #ffffff;
        padding: 15px 30px;
        z-index: 9;
    }

    .slicknav_nav ul {
        margin: 0;
    }

    .slicknav_nav .slicknav_row,
    .slicknav_nav a {
        padding: 7px 0;
        margin: 0;
        color: #333333;
        font-weight: 600;
    }

    .slicknav_btn {
        border-radius: 0;
        background-color: #f5f5f5;
        position: absolute;
        right: 0;
        top: 9px;
    }

    .slicknav_nav .slicknav_arrow {
        color: #333333;
    }

    .slicknav_nav .slicknav_row:hover {
        border-radius: 0;
        background: transparent;
        color: #333333;
    }

    .slicknav_nav a:hover {
        border-radius: 0;
        background: transparent;
        color: #e53637;
    }

    #walletTable {
        font-size: 0.8em;
    }

    .wallet-cell {
        max-width: 100px;
    }

    /* 👉 추가: 테이블 셀 스타일 */
    #walletTable th,
    #walletTable td {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 8px;
    }


    /* 상대적 너비 사용 */
    #walletTable th:nth-child(1),
    #walletTable td:nth-child(1) {  /* No 열 */
        width: 10%;
    }

    #walletTable th:nth-child(2),
    #walletTable td:nth-child(2) {  /* RANKS 열 */
        width: 15%;
    }

    #walletTable th:nth-child(3),
    #walletTable td:nth-child(3) {  /* Nickname 열 */
        width: 20%;
    }

    #walletTable th:nth-child(4),
    #walletTable td:nth-child(4) {  /* Wallet 열 */
        width: 35%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #walletTable th:nth-child(5),
    #walletTable td:nth-child(5) {  /* Token Balance 열 */
        width: 20%;
        text-align: right;
    }

    .container-fluid.mt-5 {
        padding-left: 5px;
        padding-right: 5px;
        margin-top: 1rem !important;
    }

    /* 이미지 크기 조정 */
    .rank-icon {
        width: 30px;
        height: 30px;
        vertical-align: middle;
    }
}

@media only screen and (max-width: 479px) {
    #walletTable {
        font-size: 0.8em;
    }

    #walletTable th,
    #walletTable td {
        padding: 6px;
    }

    .rank-icon {
        width: 20px;
        height: 20px;
    }
}

/* Footer */
/* Footer Continued */
.footer {
    background: #f8f8f8;
    padding-top: 60px;
    padding-bottom: 40px;
    position: relative;
    border-top: 1px solid #e0e0e0;
}

.page-up {
    position: absolute;
    left: 50%;
    top: -25px;
    margin-left: -25px;
}

.page-up a {
    display: inline-block;
    font-size: 36px;
    color: #ffffff;
    height: 50px;
    width: 50px;
    background: #e53637;
    line-height: 50px;
    text-align: center;
    border-radius: 50%;
}

.page-up a span {
    position: relative;
    top: 2px;
    left: -1px;
}

.footer__nav {
    text-align: center;
}

.footer__nav ul li {
    list-style: none;
    display: inline-block;
    position: relative;
    margin-right: 40px;
}

.footer__nav ul li:last-child {
    margin-right: 0;
}

.footer__nav ul li a {
    font-size: 15px;
    color: #333333;
    display: block;
    font-weight: 700;
}

.footer__copyright__text {
    color: #333333;
    margin-bottom: 0;
    text-align: right;
}

.footer__copyright__text a {
    color: #e53637;
}

/*---------------------
  Product
-----------------------*/

.product {
    padding-bottom: 60px;
    padding-top: 10px;
    background: #ffffff;
}

.product-page {
    padding-top: 20px;
}

.btn__all {
    text-align: right;
    margin-bottom: 30px;
}

.trending__product {
    margin-bottom: 50px;
}

.popular__product {
    margin-bottom: 50px;
}

.recent__product {
    margin-bottom: 50px;
}

.product__item {
    margin-bottom: 30px;
    background: #ffffff;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.product__item__pic {
    height: 325px;
    position: relative;
    border-radius: 5px 5px 0 0;
}

.product__item__pic .ep {
    font-size: 13px;
    color: #ffffff;
    background: #e53637;
    display: inline-block;
    padding: 2px 12px;
    border-radius: 4px;
    position: absolute;
    left: 10px;
    top: 10px;
}

.product__item__pic .comment {
    font-size: 13px;
    color: #ffffff;
    background: #3d3d3d;
    display: inline-block;
    padding: 2px 10px;
    border-radius: 4px;
    position: absolute;
    left: 10px;
    bottom: 10px;
}

.product__item__pic .view {
    font-size: 13px;
    color: #ffffff;
    background: #3d3d3d;
    display: inline-block;
    padding: 2px 10px;
    border-radius: 4px;
    position: absolute;
    right: 10px;
    bottom: 10px;
}

.product__item__text {
    padding: 20px;
    background: #ffffff;
    border-radius: 0 0 5px 5px;
}

.product__item__text ul {
    margin-bottom: 10px;
}

.product__item__text ul li {
    list-style: none;
    font-size: 10px;
    color: #333333;
    font-weight: 700;
    padding: 1px 10px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 50px;
    display: inline-block;
}

.product__item__text h5 a {
    color: #333333;
    font-weight: 700;
    line-height: 26px;
}

.product__sidebar .section-title h5 {
    color: #333333;
    font-weight: 600;
    font-family: "Oswald", sans-serif;
    line-height: 21px;
    text-transform: uppercase;
    padding-left: 20px;
    position: relative;
}

.product__sidebar .section-title h5:after {
    position: absolute;
    left: 0;
    top: -6px;
    height: 32px;
    width: 4px;
    background: #e53637;
    content: "";
}

.product__sidebar__view {
    position: relative;
    margin-bottom: 80px;
}

.product__sidebar__view .filter__controls {
    position: absolute;
    right: 0;
    top: -5px;
}

.product__sidebar__view .filter__controls li {
    list-style: none;
    font-size: 13px;
    color: #333333;
    display: inline-block;
    margin-right: 7px;
    cursor: pointer;
}

.product__sidebar__view .filter__controls li.active {
    color: #e53637;
}

.product__sidebar__view .filter__controls li:last-child {
    margin-right: 0;
}

.product__sidebar__view__item {
    height: 190px;
    position: relative;
    border-radius: 5px;
    margin-bottom: 20px;
}

.product__sidebar__view__item .ep {
    font-size: 13px;
    color: #ffffff;
    background: #e53637;
    display: inline-block;
    padding: 2px 12px;
    border-radius: 4px;
    position: absolute;
    left: 10px;
    top: 10px;
}

.product__sidebar__view__item .view {
    font-size: 13px;
    color: #ffffff;
    background: #3d3d3d;
    display: inline-block;
    padding: 2px 10px;
    border-radius: 4px;
    position: absolute;
    right: 10px;
    top: 10px;
}

.product__sidebar__view__item h5 {
    position: absolute;
    left: 0;
    bottom: 25px;
    width: 100%;
    padding: 0 30px 0 20px;
}

.product__sidebar__view__item h5 a {
    color: #333333;
    font-weight: 700;
    line-height: 26px;
}

.product__sidebar__comment {
    margin-bottom: 35px;
}

.product__sidebar__comment__item {
    margin-bottom: 20px;
    overflow: hidden;
}

.product__sidebar__comment__item__pic {
    float: left;
    margin-right: 15px;
}

.product__sidebar__comment__item__text {
    overflow: hidden;
    background: #ffffff;
    padding: 18px;
    border-radius: 5px;
}

.product__sidebar__comment__item__text ul {
    margin-bottom: 10px;
}

.product__sidebar__comment__item__text ul li {
    list-style: none;
    font-size: 10px;
    color: #333333;
    font-weight: 700;
    padding: 1px 10px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 50px;
    display: inline-block;
}

.product__sidebar__comment__item__text h5 {
    margin-bottom: 10px;
}

.product__sidebar__comment__item__text h5 a {
    color: #333333;
    font-weight: 700;
    line-height: 26px;
}

.product__sidebar__comment__item__text span {
    display: block;
    font-size: 13px;
    color: #666666;
}

.product__page__title {
    border-bottom: 2px solid rgba(0, 0, 0, 0.1);
    padding-bottom: 10px;
    margin-bottom: 30px;
}

.product__page__title .section-title {
    margin-bottom: 0;
}

.product__page__title .product__page__filter {
    width: 350px;
    text-align: right;
    display: flex;
    align-items: center;
    margin-left: 300px;
}

/* Product Page Filter Continued */
.product__page__title .product__page__filter p {
    color: #333333;
    display: inline-block;
    margin-bottom: 0;
    margin-right: 16px;
}

.product__page__title .product__page__filter .nice-select {
    float: none;
    display: inline-block;
    font-size: 15px;
    color: #333333;
    font-weight: 700;
    border-radius: 0;
    padding-left: 15px;
    padding-right: 40px;
    height: 32px;
    width: 117px;
    line-height: 32px;
    margin-right: 7px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
}

.product__page__title .product__page__filter .nice-select:after {
    border-bottom: 2px solid #333333;
    border-right: 2px solid #333333;
    height: 8px;
    top: 47%;
    width: 8px;
    right: 15px;
}

.product__page__title .product__page__filter .nice-select .list {
    margin-top: 0;
    border-radius: 0;
    background: #ffffff;
    border: 1px solid #e0e0e0;
}

.product__page__title .product__page__filter .nice-select .option {
    color: #333333;
}

.product__pagination {
    padding-top: 15px;
}

.product__pagination a {
    display: inline-block;
    font-size: 15px;
    color: #333333;
    font-weight: 600;
    height: 50px;
    width: 50px;
    border: 1px solid #e0e0e0;
    border-radius: 50%;
    line-height: 48px;
    text-align: center;
    transition: all, 0.3s;
}

.product__pagination a:hover {
    background: #e53637;
    color: #ffffff;
    border-color: #e53637;
}

.product__pagination a.current-page {
    background: #e53637;
    border-color: #e53637;
    color: #ffffff;
}

/*---------------------
  Meetup Item Styles
-----------------------*/

.meetup-item {
    margin-bottom: 30px;
    background: #ffffff;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.meetup-image {
    height: 325px;
    background-size: cover;
    background-position: center;
    position: relative;
    border-radius: 5px 5px 0 0;
}

.meetup-content {
    padding: 20px;
    background: #ffffff;
    border-radius: 0 0 5px 5px;
}

.meetup-content ul {
    margin-bottom: 10px;
}

.meetup-content ul li {
    list-style: none;
    font-size: 10px;
    color: #333333;
    font-weight: 700;
    padding: 1px 10px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 50px;
    display: inline-block;
}

.meetup-content h5 a {
    color: #333333;
    font-weight: 700;
    line-height: 26px;
}

.join-btn, .leave-btn {
    display: inline-block;
    padding: 10px 15px;
    margin: 5px;
    font-size: 14px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.join-btn {
    background-color: #4CAF50;
    color: white;
}

.join-btn:hover {
    background-color: #45a049;
}

.leave-btn {
    background-color: #f44336;
    color: white;
}

.leave-btn:hover {
    background-color: #d32f2f;
}

/*---------------------
  Mobile Responsive
-----------------------*/

@media only screen and (max-width: 767px) {
    .product__page__title .product__page__filter {
        margin-left: 0;
        width: 100%;
    }

    .product__page__title {
        display: flex;
        flex-direction: column;
    }

    .product__page__filter {
        width: 100%;
        text-align: left;
        margin-top: 15px;
    }

    .footer__nav ul li {
        margin-right: 15px;
    }

    .meetup-image {
        height: 250px;
    }

    .meetup-content {
        padding: 15px;
    }

    .join-btn, .leave-btn {
        width: 100%;
        margin: 5px 0;
    }
}

@media only screen and (max-width: 479px) {
    .product__pagination a {
        height: 40px;
        width: 40px;
        line-height: 38px;
        font-size: 13px;
    }

    .meetup-content h5 {
        font-size: 16px;
    }

    .meetup-content ul li {
        font-size: 9px;
        padding: 1px 8px;
    }

    .footer__nav ul li {
        margin-right: 10px;
    }

    .footer__nav ul li a {
        font-size: 13px;
    }
}

/*---------------------
  Animations
-----------------------*/

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fade-in {
    animation: fadeIn 0.3s ease-in;
}

/*---------------------
  Custom Scrollbar
-----------------------*/

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Additional Helper Classes */
.bg-white {
    background: #ffffff;
}

.text-dark {
    color: #333333;
}

.border-light {
    border: 1px solid #e0e0e0;
}

.shadow-sm {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.rounded {
    border-radius: 5px;
}