@font-face {font-family:'Isamanru';src:url('./GongGothicLight.woff') format('woff');font-weight:normal;font-display:swap;}
* {margin:0;padding:0;box-sizing:border-box;font-family:"Isamanru",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;outline: none;font-style: none;}
a {text-decoration:none;color:#333;display:inline-block;transition:all 0.3s ease;}
body {background-color:#f9f9f9;color:#333;font-size:16px;line-height:1.4;overflow-x:hidden;}
img {max-width:100%;height:100%;object-fit:contain;}
ul,ol,li,dl,dt,dd {list-style:none;padding:0;}
i{font-style: none;}
.clearfix::after {content:"";display:block;height:0;clear:both;visibility:hidden;}
table {border-collapse:separate;border-collapse:collapse;width:100%;position:relative;}
table caption {width:0;height:0;font-size:12px;overflow:hidden;text-indent:-999em;}
.container {max-width:1280px;margin:0 auto;padding:0 16px 50px;display:grid;grid-template-columns:200px 1fr 0;gap:20px;padding-top:10px;}
.container.main {grid-template-columns:200px 1fr 300px;}
#header {border-bottom:1px solid #eee;margin-bottom:10px;}
.header {grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;padding:10px 0;margin:0 auto;max-width:1220px;position: relative;}
.header .logo {font-size:24px;font-weight:bold;color:#2d882d;}
.header .logo a {color:#2d882d;padding-top: 8px;}
.header-right {display:flex;align-items:center;gap:15px;}
.point-badge {background-color:#e8f5e8;color:#2d882d;padding:4px 8px;border-radius:5px;display:flex;align-items:center;gap:4px;}
.btn-primary {background-color:#4CAF50;color:white;border:none;padding:6px 12px;border-radius:3px;cursor:pointer;font-weight:500;}
.avatar {width:32px;height:32px;border-radius:50%;background-color:#ddd;overflow:hidden;}
.avatar img {max-width:100%;height:100%;}
.sidebar-left {display:flex;flex-direction:column;gap:16px;}
.nav-item {display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:3px;cursor:pointer;transition:background-color 0.2s;}
.nav-item.active {background-color:#e8f5e8;font-weight:500;}
.nav-item.active svg,.nav-item.active path {fill:#53a042;}
.nav-item.active span {color:#53a042;}
.nav-item:hover {background-color:#f0f0f0;}
.container.main .main-content {display:flex;flex-direction:column;gap:20px;max-width:708px;}
.main-content {display:flex;flex-direction:column;gap:20px;max-width:100%;}
.banner {width:100%;height:260px;background:linear-gradient(to right,#e8f5e8,#f5fff5);border-radius:16px;display:flex;align-items:center;justify-content:space-between;overflow:hidden;}
.banner .swiper-slide {display:block;}
.banner .swiper-slide img {max-height:100%;}
.banner-text {max-width:60%;display: none;}
.banner-title {font-size:22px;font-weight:bold;color:#2d882d;margin-bottom:8px;}
.banner-desc {color:#555;margin-bottom:12px;}
.banner-btn {background-color:#4CAF50;color:white;border:none;padding:8px 16px;border-radius:3px;cursor:pointer;}
.banner-img {left:auto;right:10px;}
.section {display:flex;flex-direction:column;gap:12px;}
.banner .swiper-slide {justify-content:center;}
.section-header {display:flex;justify-content:space-between;align-items:center;}
.section-title {font-size:16px;font-weight:bold;color:#333;}
.more-btn {color:#333;font-size:12px;cursor:pointer;}
.live-grid {display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;}
.live-card {border-radius:5px;overflow:hidden;background-color:white;box-shadow:0 1px 3px rgba(0,0,0,0.1);cursor:pointer;transition:transform 0.2s;position:relative;}
.live-card:hover {transform:translateY(-2px);}
.live-card .ring {position:absolute;bottom:0;left:0;width:100%;height:35px;background:#fff;text-align:center;}
.live-card .ring a {border:1px solid #53a042;display:inline-block;width:35px;height:35px;border-radius:100%;margin-top:-5px;background:#fff;}
.live-img {width:100%;height:130px;object-fit:cover;position:relative;}
.live-bn {position:absolute;top:8px;left:8px;display:flex;}
.live-bn > div {margin-right:5px;}
.live-badge {background-color:red;color:white;padding:2px 6px;border-radius:4px;font-size:12px;font-weight:bold;}
.live-num {background:#222;color:white;padding:2px 6px;border-radius:4px;font-size:12px;font-weight:bold;}
.live-info {padding:8px;}
.live-user {display:flex;align-items:center;gap:6px;margin-bottom:4px;}
.live-avatar {width:24px;height:24px;border-radius:50%;background-color:#ddd;justify-content:center;display:flex;}
.live-avatar img {max-width:100%;max-height:100%;}
.live-username {font-size:12px;font-weight:500;}
.live-username strong,.live-username span {font-weight:bold;}
.live-username span {color:#a7516a;}
.live-tag {font-size:11px;color:#333;}
.live-tag span {display:inline-block;background:#f9f9f9;padding:2px 5px;margin-right:1px;border-radius:4px;margin-bottom:1px;}
.theme-grid {display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:12px;}
.theme-card {border-radius:5px;display:flex;flex-direction:column;align-items:center;gap:8px;box-shadow:0 1px 3px rgba(0,0,0,0.1);cursor:pointer;position:relative;overflow:hidden;}
.theme-card.theme-bg1{background: #f8f9fa ;}
.theme-card.theme-bg2{background: #f1f3f5 ;}
.theme-card.theme-bg3{background: #e9ecef ;}
.theme-card.theme-bg4{background: #f0f9ff ;}
.theme-card.theme-bg5{background: #f0fff4 ;}
.theme-card.theme-bg6{background: #fff0f6 ;}
.theme-card.theme-bg7{background: #fff9e6 ;}
.theme-card.theme-bg8{background: #f8f0fc ;}
.theme-link {width:100%;height:170px;padding:12px;display: flex;align-items: end;justify-content: center;}
.theme-img {width:60px;height:fit-content;border-radius:3px;position:absolute;left: calc(50% - 32px);
    bottom: calc(50% - 15px);z-index:0;}
.theme-title {font-size:13px;font-weight:500;margin-bottom: 29px;}
.theme-txt {font-size:12px;margin:5px 0;display:none;}
.theme-tag {font-size:11px;color:#333;display:none;}
.theme-tag span {display:inline-block;background:rgba(255,255,255,.5);border:1px solid #e5e8df;border-radius:4px;padding:2px 5px;margin-top:3px;}
.vip-badge {position:absolute;top:8px;left:8px;background-color:#9c27b0;color:white;padding:2px 6px;border-radius:4px;font-size:12px;font-weight:bold;}
.sidebar-right {display:flex;flex-direction:column;gap:20px;}
.ranking-list {background-color:white;border-radius:5px;padding:16px;box-shadow:0 1px 3px rgba(0,0,0,0.1);}
.ranking-item {display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid #eee;}
.ranking-item:last-child {border-bottom:none;}
.ranking-left {display:flex;align-items:center;gap:8px;}
.ranking-list .ranking-item:nth-child(2) .ranking-num {color:#53a042;}
.ranking-list .ranking-item:nth-child(3) .ranking-num {color:#53a042;}
.ranking-list .ranking-item:nth-child(4) .ranking-num {color:#53a042;}
.ranking-num {font-size:14px;font-weight:bold;color:#333;width:20px;text-align:center;}
.ranking-user {display:flex;align-items:center;gap:6px;}
.ranking-user span {color:#888;}
.ranking-user span strong {color:#333;}
.ranking-score {color:#333;font-weight:500;}
.my-clover {background-color:white;border-radius:5px;padding:16px;box-shadow:0 1px 3px rgba(0,0,0,0.1);}
.clover-point {display:flex;align-items:center;gap:8px;font-size:18px;font-weight:bold;color:#2d882d;margin:12px 0;}
.clover-btn-group {display:flex;gap:8px;}
.clover-btn {flex:1;padding:8px;border-radius:3px;border:none;cursor:pointer;font-size:12px;white-space: nowrap;}
.btn-green {background-color:#4CAF50;color:white;}
.btn-gray {background-color:#f0f0f0;color:#333;}
.point-benefit {background-color:white;border-radius:5px;padding:16px;box-shadow:0 1px 3px rgba(0,0,0,0.1);}
.benefit-item {display:flex;justify-content:flex-start;align-items:center;padding:8px 0;border-bottom:1px solid #eee;position:relative;}
.benefit-item > div {}
.benefit-item > div.benefit-img {margin-right:5px;display:flex;align-items:center;}
.benefit-item:last-child {border-bottom:none;}
.benefit-text {font-size:13px;width:calc(100% - 50px);}
.benefit-text a {display:block;}
.benefit-text a strong {display:block;}
.benefit-arrow {color:#333;font-size:12px;position:absolute;right:0;}
.live-player {background-color:black;border-radius:16px;overflow:hidden;position:relative;height:400px;}
.player-img {width:100%;height:100%;object-fit:cover;opacity:0.9;}
.player-controls {position:absolute;bottom:20px;left:0;right:0;display:flex;justify-content:center;gap:16px;}
.control-btn {width:40px;height:40px;border-radius:50%;border:none;background-color:rgba(0,0,0,0.5);color:white;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.control-btn.call {background-color:red;}
.mobile-nav {display:none;position:fixed;bottom:0;left:0;width:100%;z-index: 99;background-color:white;border-top:1px solid #eee;padding:10px 0;justify-content:space-around;}
.mobile-nav-item {display:flex;flex-direction:column;align-items:center;gap:4px;color:#53a042;font-size:12px;width:60px;}
.mobile-nav-item svg,.mobile-nav-item path {fill:#53a042}
.mobile-nav-item.active {color:#53a042;font-weight:500;}
.banner .swiper-pagination-bullet-active {background:#53a042;}
.banner .swiper-container {width:100%;height:100%;}
.trending .live-grid {grid-template-columns:repeat(auto-fill,minmax(132px,1fr));}
.trending-big .live-grid {grid-template-columns:repeat(auto-fill,minmax(150px,1fr));}
.trending-big .live-img {height:200px;}
.benefit-img svg {width:35px;height:35px;background:#f9f9f9;padding:5px;border-radius:100%;}
.search {position:relative;}
.search-box {position:absolute;width:230px;left:calc(50% - 115px);background:#f3f3f3;top:10px;padding:5px 10px 5px 20px;padding-left:39px;border-radius:5px;}
.search-box a {position:absolute;left:5px;top:5px;}
.search-box input[type="text"] {border:1px solid #f9f9f9;height:24px;width:100%;background:#f3f3f3;border: 0;}
.sp-nav {display:none;}
.invite-banner {background-color:#f8f5ff;border-radius:16px;display:flex;align-items:center;justify-content:space-between;padding:10px 15px;width:100%;max-width:1000px;box-shadow:0 4px 12px rgba(0,0,0,0.05);}
.text-section {display:flex;flex-direction:column;gap:12px;}
.main-text {font-size:14px;font-weight:700;color:#333333;line-height:1.3;}
.sub-text {font-size:12px;font-weight:500;color:#666666;}
.image-section {position:relative;display:flex;align-items:center;justify-content:center;}
.image-section img {width:80px;}
.gift-box {width:180px;height:auto;}
.clover {position:absolute;width:60px;height:auto;}
.clover-1 {top:10px;left:-20px;}
.clover-2 {top:30px;right:-30px;}
.clover-3 {bottom:20px;right:0;}
.action-section {display:none;flex-direction:column;align-items:center;gap:20px;}
.invite-button {background-color:#7e57c2;color:white;border:none;border-radius:5px;padding:15px 25px;font-size:14px;font-weight:600;cursor:pointer;transition:background-color 0.2s ease;}
.invite-button:hover {background-color:#673ab7;}
.code-section {display:flex;align-items:center;gap:12px;font-size:14px;color:#333333;}
.code-label {font-weight:500;}
.code-value {font-weight:700;color:#212121;}
.copy-icon {width:17px;height:17px;opacity:0.7;cursor:pointer;transition:opacity 0.2s ease;}
.copy-icon:hover {opacity:1;}
#login {width:350px;margin:0 auto;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;height:100vh;}
#login-box {display:flex;align-items:center;justify-content:center;flex-wrap:wrap;}
#login .logo {  /* 가로 가운데 정렬 + 세로 아이템 가운데 정렬 */
  display: flex;
  justify-content: center; /* 화면 가로 중앙 */
  align-items: center;     /* 이미지 <-> 글자 세로 중앙 */
  
  margin-bottom: 35px;
  width: 100%;
  font-size: 30px;
  
  /* 이미지와 글자 사이 간격 (원하는 숫자로 조절) */
  gap: 10px;}
#login .logo img {width:40px;}
.field {margin-bottom:16px;width:100%;}
.field {clear:both;margin:0 0 1em;}
.ui.input {position:relative;font-weight:400;font-style:normal;display:inline-flex;color:rgba(0,0,0,.87);}
.ui .field .ui.input input,.ui .fields .field .ui.input input,.ui input:not([type]),.ui input[type=date],.ui input[type=datetime-local],.ui input[type=email],.ui input[type=file],.ui input[type=number],.ui input[type=password],.ui input[type=search],.ui input[type=tel],.ui input[type=text],.ui input[type=time],.ui input[type=url] {width:100%;height:40px;border:1px solid #c4c4c4;border-radius:6px;background-color:#fff;font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.2;letter-spacing:normal;text-align:left;color:#000;}
.ui.input {font-size:1em;}
.ui.fluid.input {display:flex;}
.ui .field .ui.input,.ui .fields .field .ui.input,.ui .wide.field .ui.input {width:100%;}
.mt16 {margin-top:16px !important;}
.mb16 {margin-bottom:16px !important;}
.mb32 {margin-bottom:32px !important;}
.ui.checkbox {position:relative;display:inline-block;backface-visibility:hidden;outline:0;vertical-align:baseline;font-style:normal;min-height:17px;font-size:1rem;line-height:17px;min-width:17px;margin-right:15px;}
.ui.checkbox {font-size:12px;}
.ui.checkbox input[type=checkbox],.ui.checkbox input[type=radio] {cursor:pointer;position:absolute;top:0;left:0;opacity:0 !important;outline:0;z-index:3;width:17px;height:17px;}
.ui.checkbox input.hidden {z-index:-1;}
.ui.checkbox input.hidden+label {cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;}
.ui.checkbox.big input.hidden+label {line-height:15px;padding-left:20px;}
.ui.checkbox.big .box:before,.ui.checkbox.big input:checked:focus~.box:before,.ui.checkbox.big input:checked:focus~label:before,.ui.checkbox.big input:checked~.box:before,.ui.checkbox.big input:checked~label:before,.ui.checkbox.big input:not([type=radio]):indeterminate:focus~.box:before,.ui.checkbox.big input:not([type=radio]):indeterminate:focus~label:before,.ui.checkbox.big label:before {width:15px;height:15px;box-sizing:border-box;}
.ui.checkbox .box:before,.ui.checkbox label:after,.ui.checkbox label:before {border-radius:4px;width:16px;height:16px;}
.ui.button.dark {color:#fff;background-color:#02c215;border:none;}
.ui.checkbox label:before {border-color:#707070;}
.ui.button.primary {color:#fff;background-color:#4CAF50;border:none;}
.text-right {text-align:right;width:100%;font-size:13px;}
.sns-title {padding:30px 0;display:flex;align-items:center;justify-content:center;color:#222;}
.SignIn_divider-bar__5ykQQ {display:inline-block;width:64px;height:1px;background-color:#ddd;margin:0 10px;}
.SignIn_social-link__h8Bf9 {display:flex;align-items:center;justify-content:center;}
.ui input:not([type]),.ui input[type=date],.ui input[type=datetime-local],.ui input[type=email],.ui input[type=file],.ui input[type=number],.ui input[type=password],.ui input[type=search],.ui input[type=tel],.ui input[type=text],.ui input[type=time],.ui input[type=url] {font-family:Lato,Helvetica Neue,Arial,Helvetica,sans-serif;margin:0;outline:0;-webkit-appearance:none;tap-highlight-color:hsla(0,0%,100%,0);line-height:1.21428571em;padding:.67857143em 1em;font-size:14px;background:#fff;border:1px solid rgba(34,36,38,.15);color:#999;border-radius:.28571429rem;box-shadow:inset 0 0 0 0 transparent;transition:color .1s ease,border-color .1s ease;}
.ui.fluid.input input::placeholder {color:#999;}
#login-box section {width:100%;}
.ui.checkbox .box:after,.ui.checkbox .box:before,.ui.checkbox label:after,.ui.checkbox label:before {position:absolute;top:0;left:0;width:17px;height:17px;transition:border .1s ease,opacity .1s ease,transform .1s ease,box-shadow .1s ease;}
.ui.checkbox .box:before,.ui.checkbox label:before {content:"";background:#fff;border-radius:.21428571rem;border:1px solid #222;}
.ui.checkbox .box,.ui.checkbox label {cursor:auto;position:relative;display:block;padding-left:1.85714em;outline:0;font-size:13px;}
.ui.checkbox input:checked:focus~.box:after,.ui.checkbox input:checked:focus~label:after,.ui.checkbox input:checked~.box:after,.ui.checkbox input:checked~label:after,.ui.checkbox input:not([type=radio]):indeterminate:focus~.box:after,.ui.checkbox input:not([type=radio]):indeterminate:focus~label:after {color:#fff;font-size:12px;background-color:#ff024a !important;}
.ui.checkbox input:checked:focus~.box:before,.ui.checkbox input:checked:focus~label:before,.ui.checkbox input:checked~.box:before,.ui.checkbox input:checked~label:before,.ui.checkbox input:not([type=radio]):indeterminate:focus~.box:before,.ui.checkbox input:not([type=radio]):indeterminate:focus~label:before {background-color:#ff024a;border:7px solid #ff024a;}
.ui.checkbox input:checked~.box:after,.ui.checkbox input:checked~label:after {content:"\002713";text-align:center;}
button.login-btn {color:#fff;background-color:#4CAF50;border:none;border-radius:6px;font-size:14px;padding:12px 44px;height:auto;width:100%;}
button.join-btn {color:#fff;background-color:#bfbfbf;border:none;border-radius:6px;font-size:14px;padding:12px 44px;height:auto;width:100%;margin-bottom:4px;}
#login-box > form {display:flex;align-items:center;justify-content:center;flex-wrap:wrap;}
.sns-btn button {border:0;border-radius:50%;width:52px;height:52px;margin:0 10px;padding:0;}
.policy_text__iIx_B {font-size:14px;font-weight:500;}
.join-input-arge .ui.checkbox {margin-right:1px;}
.join-about {font-size:14px;margin-top:16px;padding:8px 4px;background-color:rgb(248,248,248);border:1px solid rgb(238,238,238);color:rgb(100,100,100);text-align:center;width:100%;}
.join-button {font-size:14px !important;margin-top:1rem !important;height:38px !important;}
#login-box.join {max-width:350px;}
.join-tab-con {width:100%;display:none;text-align:center;}
.join-tab a.on {color:red;border:1px solid red;}
.li-years > select {min-width:110px !important;width:100px;border-color:rgb(112,112,112);border:1px solid #999 !important;margin-right:5px;height:38px;color:#999;font-size:14px;border-radius:5px;}
.li-years > select:last-child {margin-right:0;}
.li-years > div * {color:#000 !important;font-size:13px;}
.join-input li.sex {border:1px solid #999;}
.join-input li.sex span {display:block;float:left;width:50%;position:relative;}
.join-input li.sex::after {content:"";display:block;height:0;clear:both;visibility:hidden;}
.join-input li.sex label {height:40px;display:flex;text-align:center;font-size:14px;align-items:center;justify-content:center;width:100%;}
.join-input li.sex label.on {background:#666;color:#fff;}
.join-input li.sex input {position:absolute;left:0;top:0;opacity:0;}
.Mobile-Phone select {width:100%;height:38px;font-size:14px;color:#999;}
.Mobile-Phone p {position:relative;margin-top:10px;padding-right:105px;}
.Mobile-Phone p button {width:100px;height:38px;font-size:14px;position:absolute;right:0;top:0;}
.join-tab-con .ui.button.w-full {font-size:14px;margin-top:40px;height:38px;width:100%;}
button.login-btn {color:#fff;background-color:#4CAF50;border:none;border-radius:6px;font-size:14px;padding:12px 44px;height:auto;width:100%;}
.sns-btn button {border:0;border-radius:50%;width:52px;height:52px;margin:0 10px;padding:0;}
.join-tab {display:flex;width:100%;justify-content:space-between;align-items:center;}
.join-tab li {margin:0 4px;width:50%;}
.join-tab a {border:1px solid rgb(138,138,138);color:rgb(138,138,138);flex:1 1 0%;border-radius:20px;font-size:14px;display:block;padding:.5rem;text-align:center;}
.join-input {width:100%;}
.join-input li {margin-top:0.3em;}
.join-input li strong {font-size:14px;display:block;margin-bottom:3px;font-weight:normal;text-align:left;}
.join-input li input {font-size:14px;display:block;width:100%;height:40px;padding:.67857143em 1em;border:1px solid #999;border-radius:5px;}
.join-input li input::placeholder {color:#e0e0e0;}
.join-input li.submit {position:relative;padding-right:60px;}
.recommend-check {cursor:pointer;display:flex;align-items:center;justify-content:center;width:50px;height:40px;margin-left:10px;border-radius:4px;color:#fff;background:#333;position:absolute;right:0;bottom:0;border:0;font-size:14px;}
.join-input-arge {margin-top:30px;width:100%;}
.join-input-arge h3 {text-align:left;}
.join-input-arge > div {width:100%;border:1px solid #ddd;margin-top:20px;}
.join-input-arge > div .all {padding:16px;border-bottom:1px solid #ddd;}
.ui.checkbox input.hidden+label {cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;}
.my-title {font-size:24px;position:relative;}
.my-title a {position:absolute;right:0;bottom:0;font-size:16px;font-weight:400;background:url(../images/btn_more_s.png) no-repeat right 4px;background-size:20px;padding-right:25px;}
.my-tab {border-bottom:1px solid #e0e0e0;}
.my-tab.flex {border-bottom:0;margin-top:20px;}
.my-tab li {float:left;padding-right:20px;position:relative;}
.my-tab.flex li {padding-left:15px;}
.my-tab.flex li::before {content:"";background:#222;width:1px;height:15px;position:absolute;left:0;top:5px;}
.my-tab.flex li:first-child {padding-left:0;}
.my-tab.flex li:first-child::before {display:none;}
.my-tab a {font-size:16px;padding-bottom:15px;}
.my-tab.flex a {font-size:14px;}
.my-tab a.on {color:red;border-bottom:2px solid red;}
.my-tab.flex a.on {color:red;border-bottom:0;}
.my-tab-con th {font-size:14px;border-bottom:1px solid #f0f0f0;}
.my-tab-con td {font-size:14px;border-bottom:1px solid #f0f0f0;padding:1.5rem;}
.my-tab-con td .file {cursor:pointer;position:relative;width:240px;height:135px;overflow:hidden;display:flex;border:2px dashed #e0e0e0;border-radius:10px;justify-content:center;align-items:center;}
.my-tab-con td .file-bg {background:rgb(249,249,252);border-radius:5px;margin-bottom:20px;padding:10px;}
/*.my-tab-con td .file input[type="file"] {position:absolute;left:0;top:0;width:240px;height:135px;opacity:0;z-index:1;}
*/.my-tab-con td .file img {max-width:100%;}
.my-tab-con td .file .img1 {border-radius:50%;width:100px;height:100px;}
.my-tab-con td .file span {width:100px;height:100px;display:inline-block;position:relative;}
.my-tab-con td .file .img2 {border-radius:50%;width:34px;height:34px;position:absolute;bottom:-4px;right:-4px;}

.file .del-btn {    position: absolute;    top: 8px;    right: 8px;    width: 24px;    height: 24px;    background: #e7e7e7;    color: #000000;    border-radius: 3px;    display: flex;    align-items: center;    justify-content: center;    font-size: 12px;    cursor: pointer;    border: none;    z-index: 10;    opacity: 0.85;}
.file .del-btn:hover {    opacity: 1;}

/* 이미지가 박스에 꽉 차게 */
.file .img1 {    max-width: 100%;    max-height: 100%;    object-fit: cover;}

.file-popup {display:none;position:fixed;width:100%;height:100%;left:0;top:0;z-index:20;background:rgba(0,0,0,0.3);justify-content:center;align-items:center;}
.file-popup-box {width:310px;background:#fff;border-radius:10px;padding:16px;position:relative;}
.h-select2 button {margin-left:10px;background:#fff;border-radius:3px;border:0;width:72px;height:30px;line-height:24px;text-align:center;cursor:pointer;}
.h-select2 button:last-child {background:#f2507e;color:#fff;}
.sns-btn {text-align:center;}
#login-box > form {display:flex;align-items:center;justify-content:center;flex-wrap:wrap;}
.file-title {padding:0 15px;font-weight:bold;font-size:16px;border-bottom:1px solid #e0e0e0;padding-bottom:5px;}
.file-con {display:flex;align-items:center;justify-content:center;flex-wrap:wrap;border:1px solid #333;margin-top:15px;text-align:center;height:222px;flex-direction:column;}
.file-pop {position:relative;width:100%;}
.file-popup .file-close {width:15px;height:15px;position:absolute;right:31px;top:18px;}
.file-popup .file-close img {max-width:100%;}
.file-pop input {position:absolute;width:100%;height:100%;opacity:0;}
.file-pop i {display:inline-block;width:134px;height:40px;background:#333;margin-top:5px;color:#fff;line-height:40px;border-radius:5px;font-size:12px;position:relative;}
.file-con p {text-align:left;margin-top:15px;}
.file-popup-box div > a {width:135px;height:45px;display:flex;align-items:center;justify-content:center;border:1px solid #333;border-radius:5px;font-size:14px;margin-top:15px;}
.file-btn {flex-wrap:nowrap;display:flex;justify-content:space-between;}
.file-btn a {margin-left:5px;}
.file-btn a:first-child {margin-left:0;}
.file-btn a.btn-y {background:#333;color:#fff;}
.my-tab-con td .inputText:first-child {margin-top:0;}
.my-tab-con td a {font-size:14px;}
.inputText {position:relative;padding-right:123px;margin-top:10px;}
.inputText input[type="text"],.inputText input[type="password"] {width:100%;height:45px;border:1px solid #f0f0f0;padding:0 15px;border-radius:5px;}
.inputText input[type="text"]::placeholder,.inputText input[type="password"]::placeholder {color:#333;font-size:14px;}
.inputText a.a-btn {color:#4caf50;width:113px;height:45px;font-size:15px;display:flex;align-items:center;justify-content:center;border-radius:5px;border:1px solid #4caf50;position:absolute;right:0;top:0;}
.color-gray {color:#999;}
.my-tab-con td .td-ul li {position:relative;color:#969696;padding-left:15px;font-size:16px;padding-bottom:6px}
.my-tab-con td .td-ul li::before {content:"";width:3px;height:3px;background:#969696;position:absolute;left:0;top:11px;}
.my-btn {text-align:right;margin-top:15px;}
.my-btn a {height:40px;color:red;padding:0 16px;margin:0 0 0 8px;display:inline-flex;align-items:center;justify-content:center;font-size:15px;border:1px solid red;border-radius:5px;}
.my2-tab {margin-top:15px;padding-bottom:50px;}
.my2-tab li {padding:0 20px;float:left;position:relative;}
.my2-tab li::before {content:"";width:1px;height:10px;position:absolute;left:0;top:5px;background:#999;}
.my2-tab li:first-child::before {display:none;}
.my2-tab li a {font-size:.875rem;line-height:1.25rem;color:#999;}
.my2-tab li a.on {color:red;}
.my2-title {text-align:center;font-size:1.25rem;line-height:1.75rem;margin-bottom:1.75rem;}
.my2-title strong {color:red;}
.my2-con {display:flex;align-items:center;height:120px;justify-content:center;width:100%;border-left:1px solid rgb(221,221,221)}
.my2-con li {display:flex;align-items:center;height:120px;justify-content:center;width:calc(100% / 4);flex-direction:column;font-size:16px;font-weight:bold;border-top:1px solid rgb(221,221,221);border-bottom:1px solid rgb(221,221,221);border-right:1px solid rgb(221,221,221)}
.my2-con li p {font-size:16px;font-weight:bold;margin-top:15px;}
.my2-con li strong {position:relative;}
.my2-con li strong img {vertical-align:-1px;margin-left:5px;}
.my2-con li strong span {display:none;position:absolute;left:90%;bottom:100%;border:1px solid #f0f0f0;padding:5px;border-radius:5px;box-shadow:0 0 5px #000;background:#fff;width:484px;font-size:13px;}
.my2-con li p i {color:rgb(242,80,126)}
.m2Button {margin-top:20px;text-align:center;}
.m2Button button {font-size:14px;padding:12px 44px;height:auto;color:#333;background-color:#fff;border-radius:6px;border:1px solid #ddd;font-weight:400;}
.m2Button button:disabled {cursor:default;opacity:.45 !important;background-image:none !important;box-shadow:none !important;pointer-events:none !important;}
.my2-title2 {margin-top:3.5rem;margin-bottom:.625rem;font-size:1rem;line-height:1.5rem;}
.my2-title2.mt0 {margin-top:0;}
.table-style2 {border-top:1px solid #222;.table-style}
.table-style2 th {padding-top:18px;padding-bottom:18px;font-size:15px;background:rgb(249,250,251);border-bottom:1px solid #c0c0c0;}
.table-style2 td {border-bottom:1px solid #c0c0c0;font-size:15px;}
.table-style2 td.no-txt {text-align:center;}
#contents.mypage2{width: 100%;}
#talk-area{
            display: flex;
            justify-content: center;
            align-items: flex-start;
            gap: 12px;}
        .chat-list-container {
            width: 320px;
            height: calc(100vh - 130px);
            max-height: 750px;
            background-color: #fff;
            border: 1px solid #eee;
            border-radius: 12px;
            display: flex;
            flex-direction: column;
            flex-shrink: 0;
        }
		   .list-container {
            width: 100%;

            background-color: #fff;
            border: 1px solid #eee;
            border-radius: 12px;
            display: flex;
            flex-direction: column;
            flex-shrink: 0;
        }
        .chat-room-container {
            width: calc(100% - 330px);
            height: calc(100vh - 130px);
            max-height: 750px;
            background-color: #fff;
            border: 1px solid #eee;
            border-radius: 12px;
            display: flex;
            flex-direction: column;
            flex-shrink: 0;
        }

        /* ====================== 태블릿 / 모바일 반응형 ====================== */


        /* ====================== 채팅 목록 스타일 ====================== */
        .chat-tabs {
            display: flex;
            padding: 15px 15px 10px;
            border-bottom: 1px solid #eee;
        }
        .tab-item {
            flex: 1;
            text-align: center;
            font-size: 16px;
            color: #999;
            padding: 5px 0;
            cursor: pointer;
            white-space: nowrap;
        }
        .tab-item.active {
            color: #000;
            font-weight: 500;
            position: relative;
        }
        .tab-item.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: #2ecc71;
        }
        .chat-list {
            flex: 1;
            overflow-y: auto;
			display:none;
        }
        .chat-item {
            display: flex;
            align-items: center;
            padding: 12px 15px;
            gap: 10px;
            cursor: pointer;
            transition: background-color 0.2s;position: relative;
        }
        .chat-item:hover {
            background-color: #f8f8f8;
        }
        .chat-avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background-color: #ddd;
            overflow: hidden;
            flex-shrink: 0;
        }
        .chat-avatar img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
        .chat-info {
            flex: 1;
            min-width: 0;
        }
        .chat-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 4px;
        }
        .chat-name {
            font-size: 14px;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 5px;
        }
		.chat-name i{color: #aaa;font-style: normal;}
        .online-badge {
            font-size: 11px;
            color: #2ecc71;
            background-color: #e8f8ef;
            padding: 1px 4px;
            border-radius: 4px;
            font-weight: 400;
        }
        .chat-time {
            font-size: 11px;
            color: #999;
        }
        .chat-preview {
            font-size: 13px;
            color: #666;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;    max-width: 76%;
        }
        .chat-badge {
            background-color: #ff3b30;
            color: white;
            font-size: 11px;
            padding: 2px 2px;
            border-radius: 10px;
            width: 20px;
            height: 20px;
            text-align: center;
            flex-shrink: 0;
			display: none;
			margin-bottom: 3px;align-self: end;position: absolute;
    right: 15px;
    bottom: calc(50% - 24px);
        }
        .chat-badge.green {
            background-color: #2ecc71;
        }
        .more-btn {
            padding: 12px;
            text-align: center;
        }
        .more-btn button {
            border: 1px solid #eee;
            background: white;
            padding: 7px 18px;
            border-radius: 20px;
            font-size: 13px;
            color: #666;
            cursor: pointer;
        }

        /* ====================== 채팅방 스타일 ====================== */
		.chat-room-talk{height: 100%;}
        .chat-room-header {
            display: flex;
            align-items: center;
            padding: 15px;
            border-bottom: 1px solid #eee;
            gap: 10px;
        }
        .room-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background-color: #ddd;
            overflow: hidden;
        }
        .room-avatar img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
        .room-info {
            flex: 1;
        }
        .room-name {
            font-size: 14px;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        .room-status {
            font-size: 12px;
            color: #999;
        }
        .room-actions {
            display: flex;
            gap: 15px;
        }
        .room-actions i {
            font-size: 18px;
            color: #666;
            cursor: pointer;
        }
        .chat-messages {
            flex: 1;
            padding: 15px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 15px;
        }
        .message-item {
            display: flex;
            gap: 8px;
        }
        .message-item.my {
            flex-direction: row-reverse;
        }
        .message-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #ddd;
            overflow: hidden;
            flex-shrink: 0;align-self: anchor-center;
        }
        .message-avatar img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
        .message-bubble {
            max-width: 75%;
        }
        .message-header {
            font-size: 12px;
            color: #999;
            margin-bottom: 4px;
        }
        .message-content {
            background-color: #f1f1f1;
            padding: 9px 12px;
            border-radius: 10px 10px 10px 0;
            font-size: 14px;
            line-height: 1.4;
        }
		.message-item.my .message-content {border-radius: 10px 10px 0 10px;background-color: #c9ffe7;}
        .message-footer {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            gap: 5px;
            margin-top: 4px;
        }
        .message-time {
            font-size: 11px;
            color: #999;
        }
        .read-check {
            color: #2ecc71;
            font-size: 11px;
        }
        .chat-input-area {
            border-top: 1px solid #eee;
            padding: 10px 15px;
        }
        .input-tools {
            display: flex;
            justify-content: flex-end;
            gap: 15px;
        }
        .input-wrapper {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .input-wrapper input {
            flex: 1;
            border: none;
            outline: none;
            font-size: 14px;
            padding: 8px 0;
        }
        .send-btn {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background-color: #2ecc71;
            border: none;
            color: white;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
			flex: 0 0 auto;
        }
        .new-friend-section {
            padding: 12px 15px;
            border-top: 1px solid #eee;
        }
        .section-title {
            font-size: 13px;
            color: #666;
            margin-bottom: 12px;
        }
        .friend-list {
            display: flex;
            gap: 10px;
            overflow-x: auto;
            padding-bottom: 4px;
        }
        .friend-item {
            flex-shrink: 0;
            width: 70px;
            text-align: center;border-radius: 5px 5px 0 0;
			background-color: #f9f9f9;
        }
        .friend-avatar {
            width: 56px;
            height: 56px;
            border-radius: 5px;
            background-color: #f8f8f8;
            overflow: hidden;
            margin: 0 auto 4px;
        }
        .friend-avatar img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
        .friend-name {
            font-size: 12px;
            font-weight: 400;
        }
        .friend-name strong{
            color:#222;
        }
        .friend-status {
            font-size: 10px;
            color: #53a042;
        }
        .friend-btn {
            margin-top: 4px;
            border: none;
            padding: 2px 5px;
            border-radius: 10px;
            font-size: 11px;
            color: #53a042;
            cursor: pointer;
			border:1px solid #53a042;
        }
        .more-link {
            text-align: right;
            font-size: 11px;
            color: #999;
            margin-top: 4px;
        }


.icon {width:20px;height:20px;border-radius:4px;display:inline-block;}
.icon svg {fill:#696969;}
.icon.clover {background-color:#2d882d;}
.icon.home {}

/*wadaxi*/
.icon-link {  display: inline-flex;  align-items: center;  gap: 6px;  text-decoration: none;}
.icon-link img {  vertical-align: middle;  display: block;}


.flex-pay {
    border: 1px solid rgb(217, 217, 217);
    background: rgb(245, 245, 245);
    padding: .75rem 1rem;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.flex-pay p {
    position: relative;
}

.flex-pay p span {
    float: right;
    display: inline-block;
    width: calc(50% - 2px);
    font-size: 15px;
    height: 2.25rem;
    line-height: 36px;
    position: relative;
}

.flex-pay p span:first-child {
    float: left;
}

.flex-pay p input[type="number"] {
    width: calc(100% - 20px);
    padding: 0 5px 0 10px;
    font-size: 15px;
    border: 1px solid rgb(221, 221, 221);
    height: 2.25rem;
    border-radius: 5px;
    line-height: 2.25rem;
}

.flex-pay p button {
    color: #fff;
    margin-top: 0;
    margin-left: 30px;
    background: #4CAF50;
    text-align: center;
    display: block;
    border-radius: 5px;
    border: 0;
    padding: .5rem 2.75rem;
    font-size: 15px;
    width: 100%;
    max-width: 144px;
}

.flex-pay p:first-child::before {
    content: "클로버개수 입력";
    position: absolute;
    left: -100px;
    font-size: 14px;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.flex-pay p:first-child span:last-child {
    padding-right: 40px
}

.flex-pay p:first-child span:last-child::after {
    top: 0;
    position: absolute;
    right: -2px;
    font-size: 11px;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.flex-con {
    margin-top: 10px;
}

.flex-con ul {
    margin-left: -20px;
}

.flex-con li {
float: left;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    height: 305px;
    width: calc(100% / 3 - 20px);
    margin-left: 20px;
    margin-bottom: 20px;
    /* box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 2px 0px, rgba(0, 0, 0, 0.15) 0px 2px 6px 2px; */
    flex-direction: column;
    border-radius: 5px;
    position: relative;
    background-color: rgb(245, 245, 245);
    border: 1px solid rgb(217, 217, 217);
}

.flex-con li img {
    width: 96px;
    height: 96px;
    border-radius: 50%;
}

.flex-con li p {
    margin-bottom: 5px;
    font-size: 1.125rem;
    text-align: center;
    font-weight: 400;
    line-height: 1.75rem !important
}

.flex-con li p span {
    color: red;
}

.flex-con li p i {
    color: rgb(170, 170, 170);
}

.flex-con li a {
    padding: .25rem;
    display: flex;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 40px;
    line-height: 40px;
    color: #fff;
    text-align: center;
    width: calc(100% - 40px);
    background: #4caf50;
    font-size: 15px;
    margin: 20px;
    border-radius: 3px;
    justify-content: center;
    align-items: center;
}

.flex-con li a:hover {
    background: #e8f5e8;
}

#tab-alls {
    max-width: 1080px;
    margin: 0 auto;
    padding-bottom: 60px;
}

.gray-box {

    background: rgb(247, 247, 247);
    padding: 15px 10px;
}

.gray-box .td-ul li {
    position: relative;
    color: #969696;
    padding-left: 15px;
    font-size: 13px;
    padding-bottom: 6px;
}

.gray-box .td-ul li::before {
    content: "";
    width: 2px;
    height: 2px;
    background: #969696;
    position: absolute;
    left: 4px;
    top: 8px;
}

.gray-box.change {

    background: #fff;
    border: 1px solid rgb(230, 230, 230);
    padding: 15px 0;
}

.gray-box.change .td-ul {
    margin: 0 20px;
}

.gray-box.change .td-ul li {
    position: relative;
    color: #969696;
    padding-left: 15px;
    font-size: 14px;
    padding-bottom: 15px;
}

.gray-box.change .td-ul li::before {
    content: "";
    width: 2px;
    height: 2px;
    background: #969696;
    position: absolute;
    left: 4px;
    top: 8px;
}

.i-title {
    background: url(../images/ico_alert.png) no-repeat left center;
    padding-left: 24px;
    background-size: 16px;
    color: #969696;
    line-height: 17px;
    margin-bottom: 1rem;
}

.gray-box.change .i-title {
    background: url(../images/ico_alert.png) no-repeat 10px 1px;
    padding-left: 34px;
    background-size: 16px;
    color: #969696;
    line-height: 17px;
    margin-bottom: 1rem;
    border-bottom: 1px solid rgb(230, 230, 230);
    padding-bottom: 15px;
}

.flex-popup {
    display: none;
    z-index: 9990;
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .7);
    align-items: center;
    justify-content: center;
    top: 0;
    left: 0;
}

.flex-popup-con {
    max-height: calc(100% - 46px);
    background: #fff;
    border-radius: 10px;
    padding: .75rem 24px;
    width: 100%;
    max-width: 500px;
    overflow-y: auto;
    margin-top: 46px;
margin-left: 5px;
    margin-right: 5px;
}

.flex-popup-con::-webkit-scrollbar {
    width: 0px;
}

.export-popup {
    display: none;
    z-index: 9990;
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .7);
    align-items: center;
    justify-content: center;
    top: 0;
    left: 0;
}

.export-popup-con {
    max-height: calc(100% - 46px);
    background: #fff;
    border-radius: 10px;
    padding: .75rem 24px;
    width: 100%;
    max-width: 500px;
    overflow-y: auto;
    margin-top: 46px;
}

.export-popup-con::-webkit-scrollbar {
    width: 0px;
}

.f-header {
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: #000;
    display: flex;
    padding: 0;
    align-items: center;
    height: 64px;
    justify-content: space-between;
}


.bg-f8 {
    --tw-bg-opacity: 1;
    background-color: rgb(248 248 248 / var(--tw-bg-opacity));
}

.w-full {
    width: 100%;
}

.text-9e {
    --tw-text-opacity: 1;
    color: rgb(158 158 158 / var(--tw-text-opacity));
}

.pt-3 {
    padding-top: .75rem;
}

.pb-6 {
    padding-bottom: 1.5rem;
}

.py-3-5 {
    padding-top: .875rem;
    padding-bottom: .875rem;
}

.flex {
    display: flex;
}

.cursor-pointer {
    cursor: pointer;
}

.items-center {
    align-items: center;
}

.mr-1 {
    margin-right: .25rem;
}

.h-4 {
    height: 1rem;
}

.w-4 {
    width: 1rem;
}

.accent-red-600 {
    accent-color: #dc2626;
}

.font-medium {
    font-weight: 500;
}

.text-17 {
    font-size: 17px;
}

.justify-center {
    justify-content: center;
}

.rounded {
    border-radius: .25rem;
}

.flex-col {
    flex-direction: column;
}

.flex-auto {
    flex: 1 1 auto;
}

.gap-3 {
    gap: .75rem;
}

.w-1\/4 {
    width: 25%;
}

.h-16 {
    height: 4rem;
}

.pt-3-5 {
    padding-top: .875rem;
}

.flex-popup-con section button.flex {
    background: #fff;
    cursor: pointer;
}

.flex-popup-con section button.flex.on {
    border: 1px solid red !important;
}

.flex-popup-con section {
    display: none;
    padding: .5rem;
}

.export-popup-con section button.flex {
    background: #fff;
    cursor: pointer;
}

.export-popup-con section button.flex.on {
    border: 1px solid red !important;
}

.export-popup-con section {
    display: none;
    padding: .5rem;
}

.bg-f78 {
    --tw-bg-opacity: 1;
    background-color: rgb(247, 247, 248);
}

.text-5b {
    color: rgb(91, 98, 107);
}

.p-2 {
    padding: .5rem;
}

.py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.justify-between {
    justify-content: space-between;
}

.border-b2 {
    border-bottom: 2px solid #000;
}

.my-3 {
    margin-top: .75rem;
    margin-bottom: .75rem;
}

.block {
    display: block;
}

.text-15 {
    font-size: 15px;
}

.font-medium {
    font-weight: 500;
}

.text-ff {
    --tw-text-opacity: 1;
    color: rgb(255, 2, 74);
}

.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.my-5 {
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
}

.modal-guide {
    padding: 10px 20px;
    background-color: #f8f8f8;
    font-size: 12px;
    color: #8d8d8d;
}

.modal-guide ul>li {
    position: relative;
    padding-left: 20px;
    line-height: 140%;
    margin: 5px 0;
}

.modal-guide ul>li:before {
    content: "-";
    position: absolute;
    top: 0;
    left: 0;
}

.bg-black-900-btn {
    background: #4CAF50;
    padding-top: .5rem;
    padding-bottom: .5rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
    width: 100%;
    color: #fff;
    border: 0;
    font-weight: bold;
}

.my2-tab {
    margin-top: 15px;
    padding-bottom: 50px;
}

.my2-tab li {
    padding: 0 20px;
    float: left;
    position: relative;
}

.my2-tab li::before {
    content: "";
    width: 1px;
    height: 10px;
    position: absolute;
    left: 0;
    top: 5px;
    background: #999;
}

.my2-tab li:first-child::before {
    display: none;
}

.my2-tab li a {
    font-size: .875rem;
    line-height: 1.25rem;
    color: #999;
}

.my2-tab li a.on {
    color: red;
}

.my2-title {
    text-align: center;
    font-size: 1.25rem;
    line-height: 1.75rem;
    margin-bottom: 1.75rem;
}

.my2-title strong {
    color: red;
}

.my2-con {
    display: flex;
    align-items: center;
    height: 120px;
    justify-content: center;
    width: 100%;
    border-left: 1px solid rgb(221, 221, 221)
}

.my2-con li {
    display: flex;
    align-items: center;
    height: 120px;
    justify-content: center;
    width: calc(100% / 4);
    flex-direction: column;
    font-size: 16px;
    font-weight: bold;
    border-top: 1px solid rgb(221, 221, 221);
    border-bottom: 1px solid rgb(221, 221, 221);
    border-right: 1px solid rgb(221, 221, 221)
}

.my2-con li p {
    font-size: 16px;
    font-weight: bold;
    margin-top: 15px;
}

.my2-con li strong {
    position: relative;
}

.my2-con li strong img {
    vertical-align: -1px;
    margin-left: 5px;
}

.my2-con li strong span {
    display: none;
    position: absolute;
    left: 90%;
    bottom: 100%;
    border: 1px solid #f0f0f0;
    padding: 5px;
    border-radius: 5px;
    box-shadow: 0 0 5px #000;
    background: #fff;
    width: 484px;
    font-size: 13px;
}

.my2-con li p i {
    color: rgb(242, 80, 126)
}

.m2Button {
    margin-top: 20px;
    text-align: center;
}

.m2Button button {
    font-size: 14px;
    padding: 12px 44px;
    height: auto;
    color: #333;
    background-color: #fff;
    border-radius: 6px;
    border: 1px solid #ddd;
    font-weight: 400;
}

.m2Button button:disabled {
    cursor: default;
    opacity: .45 !important;
    background-image: none !important;
    box-shadow: none !important;
    pointer-events: none !important;
}

.my2-title2 {
    margin-top: 3.5rem;
    margin-bottom: .625rem;
    font-size: 1rem;
    line-height: 1.5rem;
}

.my2-title2.mt0 {
    margin-top: 0;
}

.no-txt {
    text-align: center;
}

.table-style2 {
    border-top: 1px solid #222;
}

.table-style2 th {
    padding-top: 18px;
    padding-bottom: 18px;
    font-size: 15px;
    background: rgb(249, 250, 251);
    border-bottom: 1px solid #c0c0c0;
}

.table-style2 td {
    border-bottom: 1px solid #c0c0c0;
    font-size: 15px;
}

.table-style2 td.no-txt {
    text-align: center;
}

.my2-tab-con {
    display: none;
}

.table-style2.ts3 {
    border-top: 1px solid #e0e0e0;
}

.table-style2.ts3 th {
    padding-top: 18px;
    padding-bottom: 18px;
    font-size: 14px;
    border-bottom: 1px solid #e0e0e0;
    background: #fff;
}

.table-style2.ts3 td {
    border-bottom: 1px solid #e0e0e0;
    font-size: 14px;
}

.table-style2.ts3 td.no-txt {
    background: rgb(249, 250, 251);
    color: #999;
}

.paging {
    display: flex;
    width: 100%;
    min-height: unset;
    border: 0;
    box-shadow: none;
    border-radius: unset;
    justify-content: center;

}
/*
.paging a {
    display: inline-flex;
    flex: 0 0 40px;
    max-width: 40px;
    min-width: unset;
    width: 40px;
    height: 40px;
    padding: 0;
    font-size: 15px;
    color: #5b626b;
    text-align: center;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid #acb2b9;
    margin-right: 4px;
    font-weight: 500;
    opacity: .5;
    cursor: pointer;
    background-color: #fafafa;
}*/

.paging a.img.trsX img {
    transform: scaleX(-1);
}

.paging a.active {
    color: #222
}

@media screen and (max-width: 1280px) {
    .flex-pay {
        border:0;
        background: rgb(245, 245, 245);
        padding: .75rem 1rem;

        border-radius: 5px;
        display: block;
    }

    .flex-pay p span {
        float: right;
        display: inline-block;
        width: calc(50% - 15px);
        font-size: 15px;
        height: 2.25rem;
        line-height: 36px;
    }

    .flex-pay p span:first-child {
        float: left;
    }

    .flex-pay p input[type="number"] {
        width: calc(100% - 20px);
        padding: 0 5px 0 10px;
        font-size: 15px;
        border: 1px solid rgb(221, 221, 221);
        height: 2.25rem;
        border-radius: 5px;
        line-height: 2.25rem;
    }

    .flex-pay p button {
        color: #fff;
        margin-top: .5rem;
        background: rgb(76 175 80);
        text-align: center;
        display: block;
        border-radius: 5px;
        border: 0;
        padding: .5rem 2.75rem;
        font-size: 15px;
        width: 100%;
        max-width: 100%;
        margin-left: 0
    }

    .flex-pay p:first-child::before {
        display: none;
    }

    .flex-pay p:first-child span:last-child {
        padding-right: 0
    }

    .flex-pay p:first-child span:last-child::after {
        display: none;
    }

    .flex-con ul {
        margin-left: -9px;
    }

    .flex-con li a {
        width: calc(100% - 20px);
        margin: 10px;
        margin-bottom: 10px;
        height: 28px;
        line-height: 28px
    }

    .flex-con li {
        height: 228px;
        width: calc(100% / 3 - 20px);
        margin-left: 10px;
        margin-bottom: 10px;
    }

    .flex-con li img {
        width: 56px;
        height: 56px;
    }

    .flex-con li p {
        font-size: 14px;
        font-weight: 400;
        line-height: 1rem !important;
    }

    .gray-box.change {
        margin-top: 2rem;
        background: rgb(247, 247, 247);
        padding: 15px 10px;
    }

    .gray-box.change .td-ul li {
        position: relative;
        color: #969696;
        padding-left: 15px;
        font-size: 13px;
        padding-bottom: 6px;
    }

    .gray-box.change .td-ul li::before {
        content: "";
        width: 2px;
        height: 2px;
        background: #969696;
        position: absolute;
        left: 4px;
        top: 8px;
    }

    .gray-box.change .td-ul {
        margin: 0;
    }

    .gray-box.change .i-title {
        border: 0;
        padding-bottom: 0;
        padding-left: 24px;
        background: url(../images/ico_alert.png) no-repeat left center;
        background-size: 16px;
    }
}

@media screen and (max-width: 1367px) {
    #login-box {
        width: 300px;
    }

    .li-years > select {
        width: 95px;
        min-width: 94.9px !important;
    }
}

@media screen and (max-width: 1024px) {
    .flex-con li {
        width: calc(100% / 2 - 10px);
    }
}

@media screen and (min-width: 1281px) {
    .flex-con li {
        width: calc(100% / 3 - 20px);
    }

    padding-bottom: 50px; }



        /* 게시판 전체 컨테이너 */
        .notice-board {
width:100%
            margin: 0 auto;
background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #eee;
        }

        /* 게시판 제목 영역 */
        .board-header {
            background-color: #4CAF50; /* 주 색상 */
            color: white;
            padding: 18px 25px;
            font-weight: bold;
        }

        /* 공지 리스트 헤더 (제목, 작성일 등) */
        .list-header {
            display: flex;
            padding: 15px 25px;
            font-weight: 600;
            color: #333;
        }

        /* 리스트 아이템 (공지 내용) */
        .list-item {
            display: flex;
            padding: 15px 25px;
            border-bottom: 1px solid #eee;
            align-items: center;
            transition: background-color 0.2s;
        }

        /* 마우스 오버 효과 */
        .list-item:hover {
            background-color: #f8f8f8;
        }

        /* 리스트 열 너비 설정 */
        .num { width: 10%; text-align: center; }
        .title { width: 60%; }
        .date { width: 30%; text-align: center; }

        /* 반응형 스타일 (모바일 화면) */
        @media (max-width: 768px) {
            .list-header, .list-item {
                flex-wrap: wrap;
                padding: 12px 15px;
            }

            .num { width: 15%; }
            .title { width: 85%; text-align: left; margin-bottom: 5px; }
            .date { width: 100%; text-align: right; font-size: 12px; color: #666; }

            .board-header {
                font-size: 18px;
                padding: 15px;
            }
        }

        /* 마지막 아이템 하단 테두리 제거 */
        .list-item:last-child {
            border-bottom: none;
        }

 /* ========== 페이징 스타일 ========== */
        .paging {
            padding: 20px;
            text-align: center;
        }

        .paging a,
        .paging span {
            display: inline-block;
            min-width: 36px;
            height: 36px;
            line-height: 36px;
            padding: 0 10px;
            margin: 0 3px;
            border-radius: 4px;
            text-decoration: none;
            color: #333;
            border: 1px solid #ddd;
        }

        /* 현재 페이지 */
        .paging .current {
            background-color: #4CAF50;
            color: #fff;
            border-color: #4CAF50;
        }

        .paging a:hover {
            background-color: #f0f0f0;
        }

        /* 비활성화 버튼 */
        .paging .disabled {
            color: #aaa;
            cursor: default;
            background: #f9f9f9;
        }
@media (max-width:1024px) {
.search-box{display:none;}
.header .logo {padding-left:40px;}
.sp-nav {display:block;}
.sp-nav {width:30px;float:right;position:relative;cursor:pointer;height:30px;position:fixed;top:16px;left:16px;z-index:100;}
.sp-nav span {display:block;background:#53a042;width:30px;height:2px;position:absolute;left:0;transition:all ease 0.5s;}
.sp-nav span:nth-of-type(1) {top:0px}
.sp-nav span:nth-of-type(2) {top:10px}
.sp-nav span:nth-of-type(3) {top:20px}
.sp_nav_se span:nth-of-type(1) {top:10px;transform:rotate(45deg)}
.sp_nav_se span:nth-of-type(2) {width:0}
.sp_nav_se span:nth-of-type(3) {top:10px;transform:rotate(-45deg)}
.sidebar-left {display:block;position:fixed;background:#fff;height:calc(100% - 55px);overflow-y:auto;top:55px;left:-170px;padding:10px;z-index:100;border-right:2px solid #e8f5e8;width:170px;box-sizing:border-box;}
#header {position:fixed;width:100%;background:#fff;z-index:99;}
.header {padding:10px 16px;height:54px;}
.container {grid-template-columns:1fr 300px;display:flex;flex-wrap:wrap;padding:58px 5px;}
.container.main {grid-template-columns:200px 1fr 300px;}
.container.main .main-content{max-width: 100%;}
.container .main-content{max-width: 100%;width: 100%;}
.chat-list-container{width: 280px;}
.chat-room-container{width:calc(100% - 290px);}
.banner {height:auto;}
.banner .swiper-slide {width:100%;}
.sidebar-right {width:100%;}
.mobile-nav {display:flex;}
.action-section {display:flex;}
.image-section img {width:120px;}
.new-friend-section{display:none;}
.chat-room-wrapper{height: calc(100% - 50px);}
#chat-room{height: 100%;}
}

@media (max-width:800px) {
.trending .live-grid .live-card:nth-child(5) {display:none;}
}
        /* ========== 반응형 ========== */
        @media (max-width: 768px) {
            .list-header, .list-item {
                flex-wrap: wrap;
                padding: 12px 15px;
            }
            .num { width: 15%; }
            .title { width: 85%; margin-bottom: 5px; }
            .date { width: 100%; text-align: right; font-size: 12px; color: #666; }
            .board-header {
                font-size: 18px;
                padding: 15px;
            }
            .paging {
                padding: 15px 10px;
            }
            .paging a,
            .paging span {
                min-width: 32px;
                height: 32px;
                line-height: 32px;
                font-size: 14px;
            }
			.chat-room-container{height: calc(100% - 115px);border-radius: 0;}
			.container{padding: 54px 0 0px;}
			.main.container{padding: 54px 5px;}
			.chat-list-container{height: calc(100vh - 115px);border-radius: 0;}
        }

		
        /* 팝업 오버레이 (어두운 배경) */
        .popup-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }
        
        /* 팝업 레이어 */
        .popup-layer {
            width: 322px;
            background-color: white;
            border-radius: 16px;
            padding: 30px 25px;
            text-align: center;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            animation: popupFadeIn 0.3s ease-out;
        }
        
        @keyframes popupFadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        /* 팝업 아이콘 */
        .popup-icon {
            width: 60px;
            height: 60px;
            background-color: #ddffeb;
            border-radius: 50%;
            margin: 0 auto 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
        }
        
        .clover-leaf {
            color: white;
           /* font-size: 28px;*/
            font-weight: bold;
        }
        
        .exclamation {
position: absolute;
    top: 89%;
    left: 93%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-size: 15px;
    font-weight: bold;
    /* border: 1px solid red; */
    width: 19px;
    height: 19px;
    background-color: red;
    border-radius: 50%;
        }
        
        /* 팝업 메시지 */
        .popup-message {
            font-size: 18px;

            margin-bottom: 5px;
            color: #333;
            line-height: 1.4;
        }
        
        /* 팝업 버튼 컨테이너 */
        .popup-buttons {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        
        /* 충전하기 버튼 */
        .popup-charge {
background-color: #02c215;
    color: white;
    border: none;
    border-radius: 10px;
    padding: 15px;
    font-size: 16px;
    /* font-weight: bold; */
    cursor: pointer;
    transition: background-color 0.2s;
        }
        
        .popup-charge:hover {
            background-color: #27ae60;
        }
        
        /* 취소 버튼 */
        .popup-cancel {
            background-color: #f1f2f6;
            color: #666;
            border: none;
            border-radius: 10px;
            padding: 15px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.2s;
        }
        
        .popup-cancel:hover {
            background-color: #e4e6eb;
        }
        
        /* 반응형 디자인 */
        @media (max-width: 480px) {
            .content {
                padding: 15px;
            }
            
            .popup-layer {
                width: 280px;
                padding: 25px 20px;
            }
			.header-right{gap: 4px;}
			.point-badge{font-size: 12px;padding: 4px 5px;}
			.point-badge .icon{font-size: 12px;width: 15px;height: 15px;}
			.bell img{vertical-align: middle;}
			.chat-name{flex-wrap: wrap;}
			.chat-name .online-badge{margin-left: 0;}
			.clover-btn{padding: 4px 5px;}
        }

		.popup-messagelit{
			font-size: 13px;
    margin-bottom: 17px;
		}

        @media (max-height: 740px) {
            /*.chat-list.chatting{overflow-y: inherit;}*/
        }