@charset "utf-8";
 
 
        :root {
            --primary: #0a192f;
            --secondary: #172a45;
            --accent: #64ffda;
            --text: #ccd6f6;
            --highlight: #1e90ff;
        }

html {overflow-y:scroll}
body {color: #ccd6f6;margin: 0 auto;padding:0;font-size:0.75em;font-family:'Malgun Gothic', dotum, sans-serif;background-color: #000;}

/* 화면낭독기 사용자용 */
#hd_login_msg {position:absolute;top:0;left:0;font-size:0;line-height:0;overflow:hidden}
.msg_sound_only, .sound_only {display:inline-block !important;position:absolute;top:0;left:0;width:0;height:0;margin:0 !important;padding:0 !important;font-size:0;line-height:0;border:0 !important;overflow:hidden !important}

/* 본문 바로가기 */
#skip_to_container a {z-index:100000;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden}
#skip_to_container a:focus, #skip_to_container a:active {width:100%;height:75px;background:#21272e;color:#fff;font-size:2em;font-weight:bold;text-align:center;text-decoration:none;line-height:3.3em}

/* 팝업레이어 */
#hd_pop {z-index:1000;position:relative;margin:0 auto;height:0}
#hd_pop h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
.hd_pops {
    position: absolute;
    text-align: center;
    margin: 0 auto;
    border: 1px solid #2e68b7;
    box-shadow: 0 0 30px rgb(0 180 219 / 60%);
    top: 102px;
}
.hd_pops img {
    width: 100%;
    height: 100%;
}
.hd_pops_con {background: #5c5c5c;}
.hd_pops_footer {padding:0;background:#000;color:#fff;text-align:left;position:relative}
.hd_pops_footer:after {display:block;visibility:hidden;clear:both;content:""}
.hd_pops_footer button {padding:10px;border:0;color:#fff}
.hd_pops_footer .hd_pops_reject {
    text-align: center;
    background: #1d74cb;
    width: 100%;
}
.hd_pops_footer .hd_pops_close {
    background: #288ff5;
    position: absolute;
    top: 0;
    right: 0;
}






.header {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    padding: 10px 20px;
    text-align: center;
    overflow: hidden;
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
}
        .glass-effect {
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                90deg,
                rgba(255, 255, 255, 0) 0%,
                rgba(255, 255, 255, 0.1) 50%,
                rgba(255, 255, 255, 0) 100%
            );
            transform: skewX(-25deg);
            animation: shine 5s infinite;
        }
        @keyframes shine {
            0% { left: -100%; }
            20% { left: 100%; }
            100% { left: 100%; }
        }
        
#hd_h1 {position:absolute;font-size:0;line-height:0;overflow:hidden}



hr {display:none}

#ft {min-width:1200px}

.header-container,.content-section,
#ft_wr,#ft_copy {width:1200px;margin: 0 auto;}

/* 하단 레이아웃 */
#ft {background:#212020;margin:0 auto;text-align:center}
#ft h1 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#ft_wr {padding:40px 0;position:relative;display:inline-block;text-align:left}
#ft_wr:after {display:block;visibility:hidden;clear:both;content:""}
#ft_wr .ft_cnt {width:25%;float:left;padding:0 20px}

#ft_link {text-align:left}
#ft_link a {display:block;color:#fff;line-height:2em;font-weight:bold}
#ft_company h2 {font-size:1.2em;margin-bottom:20px}
#ft_company {font-weight:normal;color:#e3e3e3;line-height:2em}
#ft_catch {margin:20px 0 10px}
#ft_copy {text-align:center;padding:20px 0;color:#5b5b5b;font-size:0.92em;border-top:1px solid #383838}
#top_btn {position:fixed;bottom:20px;right:20px;width:50px;height:50px;line-height:46px;border:2px solid #333;color:#333;text-align:center;font-size:15px;z-index:90;background:rgba(255,255,255,0.5)}
#top_btn:hover {border-color:#3059c7;background:#3059c7;color:#fff}



.header-container{
display: flex;
justify-content: space-between;
align-items: center;
}
        
.logo-container {
    display: flex;
    flex-direction: row;
}
.logo-right{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-left: 12px;
}

.auth-buttons {
    display: flex;
    gap: 10px;
    align-items: center;
    padding-right: 5px;
}
.btn {
    padding: 8px 15px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none;
}
.btn-login {
    background-color: transparent;
    border: 1px solid #1e90ff;
    color: #1e90ff;
}
.btn-register {
    background-color: #1e90ff;
    border: 1px solid #1e90ff;
    color: white;
}
.user-info {
    display: none;
    align-items: center;
    gap: 10px;
}
.username {
    font-size: 14px;
    color: #ccd6f6;
    line-height: 30px;
    height: 34px;
}
.btn-logout {
    background-color: transparent;
    border: 1px solid #ff4757;
    color: #ff4757;
    font-size: 12px;
    padding: 5px 10px;
}
        
.logo {
    width: 51px;
    height: 51px;
    border: 5px solid #cdcdcd;
    border-radius: 50%;
    font-size: 30px;
    line-height: 34px;
    font-weight: bold;
    color: #cdcdcd;
    padding-bottom: 5px;
}
.company-name {
    font-size: 22px;
    font-weight: 600;
    color: #cdcdcd;
}
.address {
    font-size: 16px;
    opacity: 0.8;
    color: #cdcdcd;
}
        .menu-section {
        }
        .menu-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 10px;
            padding: 0 15px;
        }
        .menu-item {
            background-color: rgba(10, 25, 47, 0.7);
            border-radius: 8px;
            padding: 12px 18px;
            text-align: center;
            transition: all 0.3s ease;
            cursor: pointer;
            text-decoration: none;
        }
        .menu-item:hover {
            background-color: var(--highlight);
        }
        .menu-icon {
            font-size: 20px;
            margin-bottom: 5px;
            color: #1e90ff;
        }
        .menu-item:hover .menu-icon {
            color: white;
        }
        .menu-name {
            font-size: 12px;
            color: #ccd6f6;
        }
        .content-section {
            padding: 15px 0px 52px;
            background: #121212;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
        }
        .section-title {
            font-size: 16px;
            margin-bottom: 15px;
            margin-left: 10px;
            color: #83a5c7;
            display: flex;
            align-items: center;
        }
        .section-title i {
            margin-right: 8px;
        }
        .announcement-list, .faq-list {
            width: 49%;
            margin-bottom: 25px;
        }
        .announcement-item, .faq-item {
            background: #242424;
            padding: 15px 30px;
            margin-bottom: 10px;
            border-left: 5px solid #172a45;
            border-right: 5px solid #172a45;
            display: block;
            text-decoration: none;
        }
        .announcement-header i {
            color: #ccd6f6;
        }
        .faq-item:hover {
            background-color: #0c4b89;
        }
        .announcement-item:hover {
            background-color: #0c4b89;
        }
        .announcement-header, .faq-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
        }
        .announcement-icon {
            color: #ffa500;
            margin-right: 10px;
        }
        .faq-icon {
            color: #1e90ff;
            margin-right: 10px;
        }
        .announcement-title, .faq-title {
            flex: 1;
            font-size: 14px;
            font-weight: 500;
            color: #cfcfcf;
        }
        .announcement-date, .faq-date {
            font-size: 11px;
            opacity: 0.7;
            margin-top: 5px;
        }
        .faq-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
            font-size: 13px;
            line-height: 1.5;
            margin-top: 0;
        }
        .faq-item.active .faq-content {
            max-height: 200px;
            margin-top: 10px;
        }
        .view-more {
            cursor: pointer;
            margin-top: 12px;
            text-align: center;
            font-size: 13px;
            background: #172a45;
            padding: 10px;
            color: #ccd6f6;
        }
/*-----------------------------------------------------*/

button {
    border: 0px solid #2e2e2e;
}




/*------------------------메인베너-----------------------------*/


        .banner-container {
            background-color: #172a45;
        }
        .banner-container2 {
            width: 1200px;
            height: 340px;
            background-color: #1c3250;
            display: flex;
            overflow: hidden;
            margin: 0 auto;
        }
        .left-section {
            width: 50%;
            padding: 40px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .promo-text {
            color: #fff;
        }
.promo-text h1 {
    font-size: 32px;
    margin-bottom: 15px;
    margin-top: 0px;
    color: #1e90ff;
    text-align: left;
}
.promo-text p {
    font-size: 14px;
    line-height: 32px;
}
.cta-buttonn {
    width: 174px;
    text-align: center;
    padding: 12px 30px;
    background-color: #1668b9;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
    transition: background-color 0.3s;
}
        .cta-buttonn:hover {
            background-color: #10569b;
        }
        .right-section {
            width: 50%;
        }
        
        
/*------------------------메인 서버 전시----------------------------*/



.dashboard-center{
    background-color: #111111;
}
.dashboard {
    width: 1200px;
    height: 300px;
    background-color: #111;
    border: 1px solid #1c3250;
    display: flex;
    overflow: hidden;
    margin: 0 auto;
}
        .panel {
            padding: 15px;
            box-sizing: border-box;
        }
.left-panel {
    width: 25%;
    border-right: 1px solid #1c3250;
}
.middle-panel {
    width: 50%;
    border-right: 1px solid #1c3250;
    overflow: hidden;
}
        .right-panel {
            width: 25%;
        }
h2 {
    color: #0078D7;
    margin-top: 0;
    font-size: 16px;
    border-bottom: 1px solid #1c3250;
    padding-bottom: 5px;
}
.region-stat {
    margin-bottom: 10px;
    padding: 8px;
    background-color: #222;
}
        .region-name {
            font-weight: bold;
            color: #0078D7;
        }
        .region-count {
            float: right;
            font-family: 'Courier New', monospace;
        }
        .node-header {
            display: grid;
            grid-template-columns: 15% 15% 15% 15% 20% 20%;
            font-weight: bold;
            margin-bottom: 5px;
            color: #0078D7;
        }
        .node-list {
            height: 220px;
            overflow: hidden;
            position: relative;
        }
        .node-row {
            display: grid;
            grid-template-columns: 15% 15% 15% 15% 20% 20%;
            padding: 5px 0;
            border-bottom: 1px solid #333;
        }
        .online {
            color: #0F0;
        }
        .offline {
            color: #F00;
        }
.traffic-stat {
    margin-bottom: 10px;
    background-color: #222;
    padding: 8px;
}
.traffic-value {
    float: right;
    color: #ccd6f6;
    font-size: 12px;
}
.traffic-label {
    font-size: 12px;
    color: #0078D7;
}

/*------------------------체굴기 메뉴----------------------------*/

.cg-cen{
    background-color: #1c3250;
}
.cg-center2 {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    padding: 25px 0px 0px 0px;
    background-color: #1c3250;
    border-bottom: 5px solid #0083b0;
    flex-direction: column;
}
.cg-left2{
    margin-bottom: 14px;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 8px;
    width: 100%;
}
.wallet2 {
    display: flex;
    align-items: center;
    color: white;
    flex-direction: row;
    justify-content: space-between;
}

.wallet-info2 {
   padding-right: 30px;
       display: flex;
}
.wallet-title2 {
    color: #00b4db;
    padding-right: 10px;
    font-size: 18px;
    font-weight: bold;
    padding-left: 7px;
}
.wallet-amount {
    font-size: 18px;
    font-weight: bold;
}
.wallet-right2 {
    display: flex;
    gap: 10px;
}
.wallet-btn2 {
    padding: 12px 16px;
    border: none;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 100;
    text-decoration: none;
}
.withdraw-btn2 {
    background: #3a4c68;
    color: white;
     text-align: center;
}
.withdraw-btn2:hover{
background-color: #0083b0;
padding: 12px 16px 12px 16px;

}





/*------------------------쿠폰상점 메뉴----------------------------*/


.cg-cen{
    background-color: #1c3250;
}
.cg-center {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 0px 0px 0px;
    background-color: #1c3250;
    border-bottom: 5px solid #0083b0;
}
.cg-left{
    
}
.wallet {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: white;
}

.wallet-info {
   padding-right: 30px;
       display: flex;
}
.wallet-title {
    color: #00b4db;
    padding-right: 10px;
    font-size: 18px;
    font-weight: bold;
    padding-left: 33px;
}
.wallet-amount {
    font-size: 18px;
    font-weight: bold;
}
.wallet-right {
    display: flex;
    gap: 10px;
}
.wallet-btn {
    padding: 12px 16px;
    border: none;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 100;
    text-decoration: none;
}
.withdraw-btn {
    background: #3a4c68;
    color: white;
}
.withdraw-btn:hover{
background-color: #0083b0;
padding: 12px 16px 12px 16px;

}




/*------------------------체굴기 내용----------------------------*/



.contai{

}
.containe{
    width: 1200px;
    margin: 0 auto;
    background: #161616;
    padding: 0px 0px 25px;
}
.concg-top{
    background: #1c3250;
    border-radius: 0% 0% 80% 80% / 50% 50% 60% 60%;
    height: 350px;
}
.concg-top1{
    padding: 20px;
    font-size: 20px;
    font-weight: bold;
    color: #92b3e3;
        display: flex;
    justify-content: space-between;
    align-items: center;
}
.panel-title {
   font-size: 18px;
   font-weight: bold;
   color: #4fc3f7;
}
.status-indicator {
  display: flex;
  align-items: center;
 }
        
.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #4fc3f7;
    margin-right: 8px;
    animation: pulse 1.5s infinite;
 }
        @keyframes pulse {
            0% { opacity: 0.6; }
            50% { opacity: 1; }
            100% { opacity: 0.6; }
        }
.status-indicator span{
    font-size: 18px;
    height: 29px;
}       
.concg-top2{
    padding: 0px 0px 20px;
    font-size: 34px;
    font-weight: bold;
    color: #00b4db;
    text-align: center;
    text-shadow: 0px 0px 20px #00b4db;
}
.concg-yuan{
    margin-top: -213px;
}
.concg-bt{
    text-align: center;
    margin: 42px 0px 32px 0px;
}
.concg-btn {
    font-size: 18px;
    font-weight: bold;
    color: #dff7ff;
    border-radius: 8px;
    background: #0083b0;
    padding: 12px 121px;
    box-shadow: 0 0 30px rgb(0 180 219 / 60%);
}
.concg-btn:hover{
    background: #00b4db;
}
.concg-instru {
    background: #1e1e1e;
    padding: 10px 25px;
    border: 1px solid #2e2e2e;
    margin: 6px 0px 9px;
    font-size: 14px;
    line-height: 38px;
    color: #c9c9c9;
}
      .gear-container {
            position: relative;
            width: 350px;
            height: 350px;
            margin: 0 auto;
        }

        .outer-gear {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: conic-gradient(
                from 0deg,
                #00b4db 0% 20%,
                #0083b0 20% 40%,
                #0077b6 40% 60%,
                #023e8a 60% 80%,
                #03045e 80% 100%
            );
            
            box-shadow: 0 0 30px rgba(0, 180, 219, 0.6);
        }

        .outer-gear::before {
            content: '';
            position: absolute;
            width: 94%;
            height: 94%;
            top: 3%;
            left: 3%;
            border-radius: 50%;
            background: #16213e;
            z-index: 1;
        }
       
        .gear-teeth {
            position: absolute;
            width: 100%;
            height: 100%;
            background-image: 
                radial-gradient(circle at 50% 50%, transparent 60%, #16213e 60.5%),
                repeating-conic-gradient(#00b4db 0 10deg, #0083b0 10deg 20deg);
            border-radius: 50%;
            
            z-index: 2;
        }
        

        
        .inner-circle {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 250px;
            height: 250px;
            border-radius: 50%;
            background: #0f3460;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
            z-index: 3;
        }

        .info-item {
            margin: 15px 0;
            text-align: center;
            color: white;
        }

        .name {
            font-size: 28px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: #00b4db;
            text-shadow: 0 0 10px rgba(0, 180, 219, 0.7);
            margin-top: 0px;
        }

        .amount {
            font-size: 42px;
            font-weight: 800;
            color: #ffffff;
            margin: 0px 0 1px 0;
            text-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
        }

        .speed {
            font-size: 20px;
            font-weight: 500;
            color: #8eccff;
            margin-top: 0px;
        }

        @keyframes rotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        @keyframes rotate-reverse {
            from { transform: rotate(0deg); }
            to { transform: rotate(-360deg); }
        }

        /* Responsive design */
        @media (max-width: 480px) {
            .gear-container {
                width: 280px;
                height: 280px;
            }
            .inner-circle {
                width: 200px;
                height: 200px;
            }
            .name {
                font-size: 22px;
            }
            .amount {
                font-size: 36px;
            }
        }


.pro-con{
width: 314px;
margin: 20px auto;
}
.progress-con {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #a3bfc9;
    flex-direction: column;
    background: #2e2e2e;
    padding: 5px 10px;
    border-radius: 4px;
    margin-bottom: 5px;
    margin-top: 5px;
}
.progress-container {
    width: 100%;
    height: 6px;
    background-color: #2e2e2e;
    border-radius: 10px;
    margin: 0px 0 0px 0;
    overflow: hidden;
}
.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #0083b0 0%, #00b4db 100%);
    width: 0%;
    transition: width 0.3s ease;
    border-radius: 10px;
}
#jine {
    transition: all 0.3s ease;
}


/*------------------------팝업 ---------------------------*/


.dialogkx {
    margin: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0,0,0,0.5);
    position: fixed;
    left: 50%;
    bottom: 0;
    top: 0;
    transform: translate(-50%, 0%);
    opacity: 1;
    z-index: 99999;
}
.dialogkx2 {
    width: 452px;
    background: white;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 4px 12px rgb(0 0 0 / 10%);
}
.iconkx {
     color: #3498db;
     font-size: 48px;
     margin-bottom: 16px;
}
.titlekx {
    font-size: 20px;
    color: #333;
    margin-bottom: 12px;
    font-weight: bold;
    border-bottom: 0px solid #1c3250;
    padding-bottom: 0px;
}
.messagekx {
    color: #666;
    font-size: 14px;
    margin-bottom: 24px;
    line-height: 1.5;
 }
.buttonkx {
    background: #3498db;
   color: white;
    border: none;
    padding: 10px 24px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: background 0.2s;
    text-decoration: none;
 }
.buttonkx:hover {
    background: #2980b9;
}

.bantou {
    background: #ffffffbf;
}
.mejagex {
    color: #286791;
    font-weight: bold;
    font-size: 18px;
}




/*------------------------채굴 팝업 ---------------------------*/



        /* 弹框样式 */
        .dialom {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            justify-content: center;
            align-items: center;
        }
        .dialom-content {
            background: white;
            padding: 20px;
            border-radius: 5px;
            width: 412px;
        }
 .btnemmbuy {
    padding: 10px 27px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.3s;
    margin-top: 10px;
}
.inptbs {
    padding: 14px;
    background: #f5f5f5;
    border: 1px solid #cfcfcf;
    border-radius: 8px;
    color: #3e3e3e;
    font-size: 16px;
}

.form-updm{
    display: flex;
    flex-direction: column;
}
.mnrdz {
    background: #1e1e1e;
    padding: 10px 25px;
    border: 1px solid #2e2e2e;
    margin: 6px 0px 9px;
    font-size: 14px;
    line-height: 38px;
    color: #c9c9c9;
}


 /* 底部关闭按钮 */
.close-btn {
    position: absolute;
    right: -14px;
    top: -14px;
    width: 30px;
    height: 30px;
    background: #1976d2;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 38px;
    padding: 2px 6px 11px 7px;
    color: #fff;
}

.close-btn:hover {
    background: #999;
}

.dialom-content {
    position: relative; /* 确保关闭按钮相对于这个容器定位 */
}



/*------------------------체굴상점 ---------------------------*/



.contaicv {
    background: #0e0e0e;
}
.containecv {
   background: #00000000;
}
.containecv {
    width: 1200px;
    margin: 0 auto;
    padding: 0px 0px 25px;
}

.kpncg-top {
    background: #1c3250;
}
.concg-top1 {
    padding: 20px;
    font-size: 20px;
    font-weight: bold;
    color: #92b3e3;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.panel-title {
    font-size: 18px;
    font-weight: bold;
    color: #4fc3f7;
}
.panel-title2 {
    font-size: 16px;
    font-weight: 100;
    color: #4fc3f7;
}


.concg-top1m {
    padding: 20px;
    font-size: 20px;
    font-weight: bold;
    color: #b9b9b9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #21566e;
}
.panel-titlem {
    font-size: 18px;
    font-weight: bold;
}
.panel-title2m{
    font-size: 16px;
    font-weight: 100;
}






.concg-instru {
    background: #1e1e1e;
    padding: 10px 25px;
    border: 1px solid #2e2e2e;
    margin: 6px 0px 9px;
    font-size: 14px;
    line-height: 38px;
    color: #c9c9c9;
}


/*-------------------*/

.productss {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin: 16px 0px;
    padding-bottom: 20px;
    border-bottom: 1px solid #525252;
}
.product-sd {
    background: #1e1e1e;
    padding: 20px;
    border-radius: 8px;
    transition: transform 0.3s;
}
.product-sd:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 100, 255, 0.3);
}
        .product-name {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 10px;
            color: #fff;
        }
.product-desc {
    font-size: 14px;
    color: #aaa;
    margin-bottom: 15px;
}
.product-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 15px;
    border-top: 1px solid #333;
}
.pricem {
    color: #4fc3f7;
    font-weight: bold;
    font-size: 18px;
    padding-bottom: 3px;
}
        .actions {
            display: flex;
            gap: 10px;
        }
.btne {
    padding: 5px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.3s;
}

.cancel {
    background: #333;
    color: #838383;
}

.cancel:hover {
    background: #333;
}

.buy {
    background: #1976d2;
    color: #fff;
}
.buy:hover {
    background: #1565c0;
}
/*-------------------*/
.containertab {
    margin: 0 auto;
    padding-bottom: 50px;
    font-size: 14px;
    font-weight: 100;
}
.containertab h1 {
    color: #4a90e2;
    margin: 10px 0px;
    font-size: 18px;
    text-align: left;
}
        .header-row, .record {
            display: grid;
            grid-template-columns: 100px 1fr 150px 150px 100px 120px;
            gap: 15px;
            padding: 15px 20px;
            align-items: center;
        }
        .header-row {
            background: #2a2a2a;
            border-bottom: 2px solid #21566e;
        }
        .records-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .record {
            background: #1e1e1e;
            border-radius: 5px;
            transition: all 0.2s;
        }
        .record:hover {
            background: #2a2a2a;
        }
        .price {
            color: #4a90e2;
            font-weight: bold;
        }
        .btn-refund {
            background: #1976d2;
            color: #fff;
            padding: 5px 15px;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.2s;
        }
        .btn-refund:hover {
            background: #1565c0;
        }
        
.btn-reffhb {
    background: #333;
    color: #838383;
    padding: 5px 15px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-reffhb:hover  {
    background: #333;
    color: #838383;
}
/*-------------------*/


/*----------출금시작---------*/


.cgjl1 {
    background: #161616;
    min-height: 700px;
}


.header-row5, .record5 {
    display: grid;
    grid-template-columns: 150px 1fr 100px 100px 100px 100px;
    gap: 15px;
    padding: 15px 20px;
    align-items: center;
}
.header-row5 {
    background: #262f3c;
    margin-top: 20px;
}
.records-list5 {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.record5 {
    background: #1e1e1e;
    border-radius: 5px;
    transition: all 0.2s;
}
.record5:hover {
    background: #2a2a2a;
}
.pricem5 {
    color: #4a90e2;
    font-weight: bold;
}





.contoj {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}
.cardtoj {
    background: #262f3c;
    border: 1px solid #536176;
    border-radius: 8px;
    padding: 12px;
    text-align: center;
}
.titletoj {
    color: #4fc3f7;
    font-size: 14px;
    margin-bottom: 1px;
}
.amounttoj {
    color: #c3dae7;
    font-size: 18px;
    font-weight: bold;
}
.operatortoj {
    color: #1caadb;
    font-size: 32px;
    font-weight: bold;
}







        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Malgun Gothic', '맑은 고딕', sans-serif;
        }
        
.contcgs {
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 20px;
    background: #1c3250;
    border-radius: 0% 0% 80% 80% / 50% 50% 60% 60%;
    height: 320px;
}
        
.containercgs {
    width: 35%;
    border-radius: 8px;
    padding: 20px;
    margin-top: -108px;
    background: #262f3c;
    border: 1px solid #424d5e;
}




        
.h1cgs {
    text-align: center;
    margin-bottom: 30px;
    color: #9aa3c3;
    font-size: 18px;
}
        
        .form-groupcgs {
            margin-bottom: 20px;
        }
        
.labelcgs {
    display: block;
    margin-bottom: 8px;
    color: #9ba4c1;
    font-size: 14px;
}
        
.inputcgs {
    width: 100%;
    padding: 12px 15px;
    background-color: #1a1e24;
    border: 1px solid #262f3c;
    border-radius: 6px;
    color: #fff;
    font-size: 16px;
}
        
        .inputcgs:focus {
            outline: none;
            border-color: #4dabf7;
            box-shadow: 0 0 5px rgba(77, 171, 247, 0.5);
        }
        
.amount-displaycgs {
    background-color: #1a1e24;
    padding: 12px 15px;
    border-radius: 6px;
    margin-top: 5px;
    font-size: 16px;
    border: 1px solid #1a1e24;
}
        
        .fee-infocgs {
            color: #ff6b6b;
            font-weight: bold;
        }
        
        .net-amountcgs {
            color: #51cf66;
            font-weight: bold;
        }
        
        .button-groupcgs {
            display: flex;
            gap: 10px;
            margin: 20px 0;
            flex-wrap: wrap;
        }
        
        .amount-btncgs {
            padding: 10px 15px;
            background-color: #1a1a1a;
            border: 1px solid #333;
            border-radius: 6px;
            color: #ccc;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .amount-btncgs:hover {
            background-color: #2a2a2a;
            border-color: #4dabf7;
            color: #4dabf7;
        }
        
        .reset-btncgs {
            padding: 10px 15px;
            background-color: #2d1a1a;
            border: 1px solid #5c2a2a;
            border-radius: 6px;
            color: #ff8787;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .reset-btncgs:hover {
            background-color: #3d2a2a;
            border-color: #ff6b6b;
            color: #ff6b6b;
        }
        
.submit-btncgs {
    width: 100%;
    padding: 15px;
    background-color: #475c7c;
    border-radius: 6px;
    color: #acb9cd;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
    margin-top: 10px;
}
        
        .submit-btncgs:hover {
            background-color: #647da3;
            color: #fff;
        }
        
        .info-textcgs {
            color: #868e96;
            font-size: 14px;
            margin-top: 5px;
        }
        
        




/*--------출금 끝-----------*/

/*--------수익기록 시작-----------*/


.header-row2, .record2 {
    display: grid;
    grid-template-columns: 1fr 100px 150px 100px;
    gap: 15px;
    padding: 15px 20px;
    align-items: center;
}
.header-row2 {
    background: #262f3c;
    margin-top: 20px;
}
.records-list2 {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.record2 {
    background: #1e1e1e;
    border-radius: 5px;
    transition: all 0.2s;
}
.record2:hover {
    background: #2a2a2a;
}
.pricem2 {
    color: #4a90e2;
    font-weight: bold;
}

.pncdf{
border-radius: 0px;
}


/*--------수익기록 끝-----------*/




/* 이벤트 상품시작  */
.containesz {
    width: 1200px;
    margin: 0 auto;
    padding: 0px 0px 25px;
    background: #16161600;
}


        .product-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            margin: 16px 0px;
        }
        .product-card {
            background: #1e1e1e;
            border-radius: 8px;
            padding: 15px;
            transition: transform 0.3s;
        }
        .product-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0, 100, 255, 0.3);
        }
        .product-image {
            width: 100%;
            height: 180px;
            object-fit: cover;
            border-radius: 6px;
            margin-bottom: 10px;
        }
        .couponm {
            color: #4fc3f7;
            font-size: 14px;
            margin-bottom: 8px;
        }
        .original-price {
            text-decoration: line-through;
            color: #9e9e9e;
            font-size: 14px;
        }
        .price-section {
            display: flex;
            justify-content: space-between;
            margin: 8px 0;
            align-items: center;
        }
        .discount {
            color: #4caf50;
            font-size: 14px;
        }
        .current-price {
            color: #4fc3f7;
            font-weight: bold;
            font-size: 18px;
        }
        .rating-section {
            display: flex;
            justify-content: space-between;
            margin: 8px 0;
            font-size: 14px;
        }
        .stars {
            color: #ffc107;
            font-size: 16px;
           line-height: 16px;
        }
        .buy-btn {
            width: 100%;
            padding: 8px;
            background: #1976d2;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background 0.3s;
        }
        .buy-btn:hover {
            background: #1565c0;
        }
        
        
.myardiz {
    padding: 6px 8px;
    background: #f5f5f5;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    color: #333;
    width: 100%;
}
.sdhzzs{
    margin-top: 33px;
    width: 100%;
}
        
        

/* ----------------이벤트 상품 끝 -------------------- */

/* -----------------초대하기 시작 ------------------- */

.containercopy {
    margin: 0 auto;
    padding: 20px;
    background: #1c3250;
    border-radius: 0% 0% 50% 50% / 20% 20% 80% 80%;
    height: 166px;
}
.contaidsad{
    width: 35%;
    border-radius: 8px;
    padding: 20px 20px 0px;
    background: #262f3c;
    border: 1px solid #424d5e;
    margin: -108px auto 0px auto;
}
        
.copy-sectioncopy {
    background-color: #161616;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}
        
.section-titlecopy {
    color: #fff;
    font-size: 14px;
    margin-bottom: 15px;
}
        
.copy-rowcopy {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #202020;
    padding: 15px;
    border-radius: 6px;
}
        
.urlcopy, .codecopy {
    color: #e5e7eb;
    font-size: 14px;
    word-break: break-all;
    flex: 1;
}
        
.copy-btncopy {
    background-color: #2563eb;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    margin-left: 15px;
    transition: background-color 0.3s ease;
}
        
        .copy-btncopy:hover {
            background-color: #1d4ed8;
        }
        
.messagecopy {
    color: #10b981;
    text-align: center;
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.3s ease;
    height: 0px;
}
        
        .message.showcopy {
            opacity: 1;
        }

/* ------------------초대하기 끝 -------------------- */



/* ------------------나의 쿠폰 시작 -------------------- */

.containerkkp {
    width: 100%;
    margin: 0 auto;
    padding: 0px 20px 20px;
}
        
.section-titlekkp {
    color: #88a4e1;
    font-size: 16px;
    margin: 30px 0 20px 0;
    padding-left: 10px;
    border-left: 3px solid #2563eb;
}
        
        .coupon-gridkkp {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 15px;
            margin-bottom: 40px;
        }
        
        .couponkkp {
            background: #1e293b;
            border: 1px solid #2563eb;
            border-radius: 8px;
            padding: 20px 15px;
            text-align: center;
            transition: all 0.3s ease;
        }
        
        .couponkkp.activekkp {
            background: linear-gradient(145deg, #1e293b, #0f172a);
            box-shadow: 0 0 10px rgba(37, 99, 235, 0.4);
        }
        
        .couponkkp.activekkp:hover {
            transform: translateY(-2px);
            box-shadow: 0 0 20px rgba(37, 99, 235, 0.6);
        }
        
        .couponkkp.usedkkp {
            background: #374151;
            border-color: #6b7280;
            opacity: 0.6;
        }
        
        .coupon-codekkp {
            font-size: 1rem;
            font-weight: bold;
            margin-bottom: 8px;
        }
        
        .couponkkp.activekkp .coupon-codekkp {
            color: #60a5fa;
        }
        
        .couponkkp.usedkkp .coupon-codekkp {
            color: #9ca3af;
        }
        
        .coupon-desckkp {
            font-size: 0.8rem;
            opacity: 0.8;
        }

/* ------------------나의 쿠폰 끝  -------------------- */





        /* 弹框样式 */
        .dialog {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            justify-content: center;
            align-items: center;
        }
        .dialog-content {
            background: white;
            padding: 20px;
            border-radius: 5px;
            width: 412px;
        }
 .btnewwbuy {
    padding: 10px 27px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.3s;
}

        .producttk {
            display: flex;
            justify-content: space-between;
            padding: 15px 0;
            border-bottom: 1px solid #eee;
            margin-bottom: 20px;
        }
.form-upd {
    text-align: center;
    padding: 23px;
}
.producttk-name {
    color: #1c1c1c;
    font-weight: bold;
    font-size: 18px;
}
.producttk-price {
    color: #1976d2;
    font-weight: bold;
    font-size: 18px;
}
        .url-section {
            margin-top: 20px;
        }
.url-label {
    color: #666;
    margin-bottom: 5px;
    font-size: 14px;
}
        .url-container {
            display: flex;
        }
        .url {
            flex: 1;
            padding: 8px;
            background: #f5f5f5;
            border-radius: 4px;
            color: #333;
        }
        .copy-btn {
            background: #1e90ff;
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 4px;
            margin-left: 10px;
            cursor: pointer;
        }
.tex-container {
    color: #2a2a2a;
    font-size: 12px;
    background: #fbe4b1;
    border: 1px solid #f5d180;
    border-radius: 4px;
    padding: 10px;
    line-height: 24px;
}


.closm-btn {
    position: absolute;
    right: -14px;
    top: -14px;
    width: 30px;
    height: 30px;
    background: #1976d2;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 38px;
    padding: 2px 6px 11px 7px;
    color: #fff;
}

.closm-btn:hover {
    background: #999;
}
.dialog-content {
    position: relative; /* 确保关闭按钮相对于这个容器定位 */
}