/* 스핀로딩 */
.loading{}
.loadingBox{position:fixed; left:0; top:0; z-index: 10000; width:100%; height: 100vh; display: flex; align-items: center; justify-content: center; flex-direction: column; background: rgba(0, 0, 0, 0.2);}
.spinnerBox {width: 50px; height: 50px; border: 3px solid #1E167155; border-radius: 50%; border-top-color: #1E1671; animation: spin 1s ease-in-out infinite; -webkit-animation: spin 1s ease-in-out infinite;}
@keyframes spin {
    to { transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    to { -webkit-transform: rotate(360deg); }
}
* {
    -webkit-tap-highlight-color: transparent; /* Chrome, Safari, Edge */
    tap-highlight-color: transparent;        /* 기타 브라우저 */
}

.pc{display: block !important;}
.pc-flex{display: flex !important;}
.mobile{display: none !important;}
.mobile-block{display: none !important;}
.wrap{height: 100%; width: 100%;}
.btn{line-height: 1;position: relative;display: inline-block;font-weight: 400;white-space: nowrap;text-align: center;background-image: none;box-shadow: 0 2px 0 rgba(0, 0, 0, .015);cursor: pointer;transition: all .3s cubic-bezier(.645, .045, .355, 1);-webkit-user-select: none;-ms-user-select: none;user-select: none;touch-action: manipulation;height: 44px;padding: 0 15px;font-size: 14px;border-radius: 4px;color: rgba(0, 0, 0, .65);background-color: #fff;border: 1px solid #d9d9d9;}

input[type="password"] {
    letter-spacing: 10px; /* 점 간격 */
}

input[type="password"]::placeholder {
    letter-spacing: 0; /* placeholder는 기본 유지 */
}


.btn-size-30{height: 30px; border-radius: 4px; font-size: 14px; text-align: center; padding: 0 15px; width: 100%; cursor: pointer;}
.btn-size-40{height: 40px; border-radius: 8px; font-size: 14px; text-align: center; padding: 0 15px;width: 100%; cursor: pointer;}
.btn-size-48{height: 48px; border-radius: 8px; font-size: 14px; text-align: center; padding: 0 15px;width: 100%; cursor: pointer;}


.btn-green{border:#00d985;background-color: #00d985; color: #fff; cursor: pointer;}
.btn-red{border:#fc3c56;background-color: #fc3c56; color: #fff; cursor: pointer;}
.btn-yellow{border:#ffbb00;background-color: #ffbb00; color: #fff; cursor: pointer;}
.btn-dark{border:#45474c; background-color: #45474c;color: #fff; cursor: pointer;}

.btn-round{border-radius:99px;}

.w-100p{width: 100%;}

.dsp-flex{display: flex;}
.flex-col{flex-direction: column;}
.flex-col-rev{flex-direction: column-reverse;}
.al-item-center{align-items: center !important;}
.al-item-end{align-items: flex-end !important;}

.txt-al-center{text-align: center;}
.txt-al-right{text-align: right;}
.txt-al-left{text-align: left;}

.bold{font-weight: bold !important;}
.txt-green{color: #3cbc98 !important;}
.txt-red{color: #e3595d !important;}
.txt-yellow{color: #f2b200 !important;}
.txt-gray{color: #848e9c !important;}
.txt-white-gray{color: #c8c8c8 !important;}

/* slick page dots 설정 */
.slick-dots {bottom: -20px !important;display: flex !important;justify-content: center;gap: 6px;}
.slick-dots li {width: 30px !important;height: 3px !important; margin: 0 !important;}
.slick-dots li button {width: 100% !important;height: 100% !important;padding: 0 !important;border: none !important;background: #dbdce0 !important; border-radius: 2px !important;text-indent: -9999px !important; opacity: 1 !important;}
.slick-dots li.slick-active button {background: #000 !important;}


/* header */
.header-wrap{position: fixed;width: 100vw;top: 0;z-index: 100;}
.header-wrap.layout{height: 64px;display: flex;padding: 0 24px;justify-content: space-between;align-items: center;background: #fff; box-sizing: border-box;}
.header-wrap.layout.transparent{background: transparent;}
.header-wrap .left{}
.header-wrap .col{display: flex;align-items: center;height: 100%;}
.header-wrap .logo{display: flex;align-items: center;margin-right: 12px;cursor: pointer;}
.header-wrap .item{display: flex;height: 100%;align-items: center;line-height: 24px;}
.header-wrap .item .dropdown{display: flex;height: 100%;align-items: center;cursor: pointer; padding: 0 12px;position: relative;}
.header-wrap .item .dropdown .dropdown-label{color: #000;font-size: 14px;font-weight: 500;}
.header-wrap .item .dropdown .arrow{margin-left: 4px;color: #000;font-size: 12px !important;transition: all .3s;}
.header-wrap .item .dropdown .iconDown::before{content: "";display: inline-block;width: 12px;height: 12px;background: url('/img/user/common/icon/down-arrow.svg') no-repeat center center / contain;vertical-align: middle;transition: transform 0.3s ease; /* 부드럽게 회전 */}
.header-wrap .item .dropdown:hover .iconDown::before{transform: rotate(180deg);}
.header-wrap .item .dropdown .dropdown-tag{display: flex;margin-left: 4px;background: #fb0;border-radius: 4px;padding: 2px 4px;}
.header-wrap .item .dropdown .dropdown-tag-label{font-weight: 500;font-size: 12px;line-height: 16px;color: #000;}
.header-wrap .item .dropdown .dropdown-tag-hot{width: 16px;height: 16px;background: url('/img/user/common/icon/hot.png') no-repeat 50% / 16px 16px;}
.header-wrap .item .btn{text-shadow: none;box-shadow: none;border: none;background: #f3f4f6;color: #000;height: 32px;font-size: 14px;font-weight: 500;}
.header-wrap .item .btn.layout-login{font-size: 14px;color: #000;font-weight: 500;background: transparent !important;}
.header-wrap .item .btn.layout-primary{background: #fb0;color: #000;}
.header-wrap .item .layout-register{padding: 0 12px;}

.header-wrap .item .dropdown .pop-box{opacity: 0;visibility: hidden;transform: translate(0,-8px);transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;z-index: 1050;position: absolute;left: 0;top: 64px;background: #fff;border-radius: 6px;border: 1px solid #f3f4f6;box-shadow: 0 2px 30px 0 rgba(0, 0, 0, .15);width: max-content; }
.header-wrap .item .dropdown .pop-box.right{left: auto; right: 0 }
.header-wrap .item .dropdown:hover .pop-box{opacity: 1;visibility: visible;transform: translate(0,0);}
.header-wrap .item .dropdown .pop-box .pop-list{}
.header-wrap .item .dropdown .pop-box .pop-list ul{}
.header-wrap .item .dropdown .pop-box .pop-list ul li{}
.header-wrap .item .dropdown .pop-box .pop-list ul li .pop-info{display: flex;gap: 10px;align-items: center;padding: 14px 16px; min-width: 180px;}
.header-wrap .item .dropdown .pop-box .pop-list ul li .pop-info:hover{background: #f2f2f2;}
.header-wrap .item .dropdown .pop-box .pop-list ul li .pop-info .pop-info-icon{width: 24px; height: 24px;background-size: cover;background-position: center;background-repeat: no-repeat;}
.header-wrap .item .dropdown .pop-box .pop-list ul li .pop-info .pop-info-title{font-weight: 500;color: #000;font-size: 14px;}


/* footer */
.footer-wrap{position: relative;z-index: 100;background: #fff;}
.footer-wrap footer{max-width: 1248px;margin: 0 auto;padding: 28px 24px;}
.footer-wrap footer .link-wrap{display: flex;flex-wrap: wrap;justify-content: space-between;padding: 24px 0;}
.footer-wrap footer .link-wrap .link-box{}
.footer-wrap footer .link-wrap .link-box .link-title{font-size: 18px;line-height: 22px;font-weight: 600;color: #000;margin-bottom: 24px;}
.footer-wrap footer .link-wrap .link-box .link-follow-list{display: grid;grid-template-columns: 1fr 1fr 1fr 1fr;gap: 8px;width: 132px;padding: 4px 0 12px;justify-items: center}
.footer-wrap footer .link-wrap .link-box .link-follow-list .link-follow{background-position: center; background-size: 20px; background-repeat: no-repeat; width: 24px; height: 24px; border-radius: 50%;}
.footer-wrap footer .link-wrap .link-box .link-contact-info:not(:last-child){margin-bottom: 12px;}
.footer-wrap footer .link-wrap .link-box .link-contact-info .contact-title{font-size: 14px;font-weight: 500;line-height: 17px;margin-bottom: 2px;color: #000;}
.footer-wrap footer .link-wrap .link-box .link-contact-info .contact-content{font-size: 12px;line-height: 22px;color: #707582;}
.footer-wrap footer .link-wrap .link-box .link-list{}
.footer-wrap footer .link-wrap .link-box .link-list .link{margin-bottom: 8px;font-size: 14px;line-height: 22px;color: #707582;}
.footer-wrap footer .footer{display: flex;justify-content: space-between;align-items: center;padding: 14px 0;border-top: 1px solid #f3f4f6;}
.footer-wrap footer .footer .copyright{font-size: 14px;line-height: 22px;color: #707582;}
.footer-wrap footer .footer .partner-list{display: flex;}
.footer-wrap footer .footer .partner-list .partner{}
.footer-wrap footer .footer .partner-list .partner img{height: 60px;}
.footer-wrap footer .footer .partner-list .partner:not(:last-child){margin-right: 32px;}


.main{margin-top: 70px;}


/* login */
.login-wrap{display: flex;}
.login-wrap .login-box{display: flex;margin: 64px auto 30px;max-width: 1040px;height: 664px;border: 1px solid #eaecef;border-radius: 16px;overflow: hidden;}
.login-wrap .login-box .login-left{display: block;width: 520px;height: 664px;background-size: cover;background-repeat: no-repeat;background-position: center;}
.login-wrap .login-box .login-left .txt-area{height: 100%;}
.login-wrap .login-box .login-left .txt-area .logo{width: 120px;height: 50px;margin: 40px 0 0 40px; background-size: cover;background-repeat: no-repeat;background-position: center;}
.login-wrap .login-box .login-left .txt-area .txt{color: #ffffff;margin: 32px 0 0 40px;font-size: 36px;font-weight: 700;line-height: 48px;}
.login-wrap .login-box .login-right{flex: 1 1;padding: 40px 64px 0;max-width: 520px;margin-left: auto;justify-self: flex-end;}
.login-wrap .login-box .login-right.auth-box{display: none;}
.login-wrap .login-box .login-right .login-title{display: flex; justify-content: space-between;margin-bottom: 28px;}
.login-wrap .login-box .login-right .login-title .title{font-size: 32px;font-weight: 500;display: flex; align-items: center;}
.login-wrap .login-box .login-right .login-title .scan{background-color: #f3f4f6;width: 40px;height: 40px;border-radius: 50%;display: flex;align-items: center;justify-content: center;cursor: pointer;margin-right: -1px;}
.login-wrap .login-box .login-right .login-info{}
.login-wrap .login-box .login-right .login-info .input-group{}
.login-wrap .login-box .login-right .login-info .input-group label{font-size: 14px;line-height: 20px;letter-spacing: 0;}
.login-wrap .login-box .login-right .login-info .input-group .auth-cd-label{font-size: 14px;line-height: 20px;letter-spacing: 0;margin: 36px 0;}

.login-wrap .login-box .login-right .login-info .input-group .input-wrapper{margin-top: 4px; position: relative;}
.login-wrap .login-box .login-right .login-info .input-group .input-wrapper.password-wrapper{}
.login-wrap .login-box .login-right .login-info .input-group .input-wrapper input{width: 390px; height: 48px;font-size: 16px;background: #f3f4f6 ;font-weight: 500 ;border: 1px solid #f3f4f6 ;border-radius: 6px;box-sizing: border-box;margin: 0;font-variant: tabular-nums;list-style: none;font-feature-settings: "tnum";position: relative;padding: 4px 11px;}
.login-wrap .login-box .login-right .login-info .input-group .input-wrapper input:focus{background: #ffffff ;;border: 1px solid #ffbb00 ;}
.login-wrap .login-box .login-right .login-info .input-group .input-wrapper input#pw{padding-right: 30px;}
.login-wrap .login-box .login-right .login-info .input-group .input-wrapper input::placeholder{font-size: 14px;}
.login-wrap .login-box .login-right .login-info .input-group .input-wrapper .eye-btn{position: absolute;top: 17px; right: 12px; cursor: pointer;}
.login-wrap .login-box .login-right .login-info .input-group .input-wrapper .eye-btn svg{fill: #00000073;  transition: fill 0.25s ease; }
.login-wrap .login-box .login-right .login-info .input-group .input-wrapper .eye-btn:hover svg{fill: #000000; }
.login-wrap .login-box .login-right .login-info .input-group .input-wrapper .eye-btn .eye-open{display: none;}
.login-wrap .login-box .login-right .login-info .input-group .input-wrapper .eye-btn.active .eye-open{display: inline-block;}
.login-wrap .login-box .login-right .login-info .input-group .input-wrapper .eye-btn .eye-close{display: inline-block;}
.login-wrap .login-box .login-right .login-info .input-group .input-wrapper .eye-btn.active .eye-close{display: none;}

.login-wrap .login-box .login-right .login-info .input-group .auth-cd-list{display: flex; align-items: center; gap: 8px;}
.login-wrap .login-box .login-right .login-info .input-group .auth-cd-list input{background: #f3f4f6;border: 1px solid #f3f4f6;text-align: center;color: #000;width: 57.5px;height: 60px;border-radius: 8px;font-weight: 500;font-size: 24px;line-height: 100%;cursor: pointer;caret-color: #000 !important;}
.login-wrap .login-box .login-right .login-info .input-group .auth-cd-list input:focus{background: #ffffff ;;border: 1px solid #ffbb00 ;}
.login-wrap .login-box .login-right .login-info .input-group .auth-cd-remain-time{display: none;font-weight: 400;font-size: 14px;line-height: 16px;letter-spacing: 0;margin-top: 20px;}
.login-wrap .login-box .login-right .login-info .input-group .auth-cd-remain-time.on{display: block;}
.login-wrap .login-box .login-right .login-info .input-group .auth-cd-resend{display: none;justify-content: end;margin-top: 20px;}
.login-wrap .login-box .login-right .login-info .input-group .auth-cd-resend.on{display: flex;}
.login-wrap .login-box .login-right .login-info .input-group .auth-cd-resend .btn-resend{font-weight: 500;font-size: 14px;line-height: 16px;letter-spacing: 0;text-align: right;color: #f2b200;cursor: pointer;}

.login-wrap .login-box .login-right .login-info .input-group .pw-find-link{margin: 4px 0 16px;text-align: right;color: #707a8a; font-size: 12px; cursor: pointer; }
.login-wrap .login-box .login-right .login-btn{width: 100%;}

.login-wrap .login-box .login-right .login-btn button{width: 100%;height: 48px;font-size:16px;font-weight: 500;border-radius: 6px;background: #ffbb00; color: #000;border:1px solid #ffbb00; box-sizing: border-box;cursor: pointer;}
.login-wrap .login-box .login-right .login-btn button.btn-create{font-size: 14px;}
.login-wrap .login-box .login-right .login-btn button[disabled]{opacity: 0.3;pointer-events: none;}
.login-wrap .login-box .login-right .other-login-list{}
.login-wrap .login-box .login-right .other-login-list .or-divider{position: relative;text-align: center;margin: 16px 0 12px;}
.login-wrap .login-box .login-right .other-login-list .or-divider:before {content: "";position: absolute;top: 55%;left: 0;right: 0;height: 1px;background-color: #f3f4f6;z-index: 1;}
.login-wrap .login-box .login-right .other-login-list .or-divider span{position: relative;background-color: #fff;padding: 0 15px;z-index: 2;color: #707582;font-size: 12px;}
.login-wrap .login-box .login-right .other-login-list .other-login-btn{margin-bottom: 12px; cursor: pointer;}
.login-wrap .login-box .login-right .other-login-list .other-login-btn button{height: 48px;font-weight: 500;border-radius: 6px;width: 100%;background-color: #fff;border: 1px solid #edeef0;font-size: 14px !important;display: flex;align-items: center;justify-content: center;gap: 10px;cursor: pointer;}
.login-wrap .login-box .login-right .other-login-list .other-login-btn button img{width: 16px; height: 16px;}
.login-wrap .login-box .login-right .other-login-list .other-login-btn button span{}
.login-wrap .login-box .login-right .no-account{display: flex; align-items: center; gap: 4px; font-size: 14px;}
.login-wrap .login-box .login-right .no-account .join-link{color: #f2b200; cursor: pointer;}
.login-wrap .login-box .login-right .no-received{font-weight: 500;font-size: 14px;line-height: 16px;letter-spacing: 0;text-align: center;cursor: pointer;margin-top: 214px;}

.login-wrap .login-box .login-right .terms-check-wrap{margin: 16px 0 12px;display: flex;gap: 3px;word-break: break-word;white-space: normal;line-height: 20px;color: #222;}
.login-wrap .login-box .login-right .terms-check-wrap .terms-check-label{font-size: 16px;transform: scale(0.8);position: relative;color: #b9c0e0;}
.login-wrap .login-box .login-right .terms-check-wrap .terms-check-label .terms-checkbox{width: 20px;height: 20px;position: relative;display: inline-block;}
.login-wrap .login-box .login-right .terms-check-wrap .terms-check-label .terms-checkbox .checkbox-input{position: absolute;inset: 0;width: 100%;height: 100%;opacity: 0;margin: 0;cursor: pointer;z-index: 2;}
.login-wrap .login-box .login-right .terms-check-wrap .terms-check-label .terms-checkbox .checkbox-inner{width: 100%;height: 100%;border: 2px solid #ccc;border-radius: 4px;box-sizing: border-box;display: flex; align-items: center; justify-content: center; transition: all 0.22s ease;pointer-events: none;}
.login-wrap .login-box .login-right .terms-check-wrap .terms-check-label .terms-checkbox .checkbox-input:checked + .checkbox-inner {background-color: #ffbb00;border-color: #ffbb00;}
.login-wrap .login-box .login-right .terms-check-wrap .terms-check-label .terms-checkbox .checkbox-inner::after {content: "";position: absolute;width: 5px;height: 10px;border-right: 3px solid #fff;border-bottom: 3px solid #fff;left: 6px;top: 2px;transform: rotate(45deg) scale(0);transition: transform 0.22s ease;}
.login-wrap .login-box .login-right .terms-check-wrap .terms-check-label .terms-checkbox .checkbox-input:checked + .checkbox-inner::after {transform: rotate(45deg) scale(1);}
.login-wrap .login-box .login-right .terms-check-wrap .check-txt{font-size: 13px;}
.login-wrap .login-box .login-right .terms-check-wrap .terms-link{color: #f2b200;cursor: pointer;}


/* main */
.main-wrap{background: #fff;min-height: 100vh;}
.main-wrap .main-content{background: linear-gradient(180deg,rgba(255,187,0,.08),rgba(255,187,0,0));}
.main-wrap .main-content .content-wrap{margin: 0 auto;padding: 64px 0;width: 1200px;box-sizing: border-box; display: flex; justify-content: space-between;}
.main-wrap .main-content .content-wrap .content-box{justify-content: center;}
.main-wrap .main-content .content-wrap .content-box .content-title{max-width: 500px;font-size: 56px;font-weight: 700;padding-bottom: 5px;line-height: 68px;margin-bottom: 16px !important;}
.main-wrap .main-content .content-wrap .content-box .content-subtitle{font-size: 20px;margin: 16px 0 40px;line-height: 28px;}
.main-wrap .main-content .content-wrap .content-box .link-box{gap: 12px;}
.main-wrap .main-content .content-wrap .content-box .link-box .btn-wrap{width: 200px;}
.main-wrap .main-content .content-wrap .content-box .link-box .btn-wrap button{color: #000; font-size: 16px;}
.main-wrap .main-content .content-wrap .content-box .link-box .link-icon{width: 48px; height: 48px; background-repeat: no-repeat; background-size: cover; background-position: center;cursor: pointer;}
.main-wrap .main-content .content-wrap .content-info{display: flex; margin-top: 40px; gap: 24px;}
.main-wrap .main-content .content-wrap .content-info .info-box{}
.main-wrap .main-content .content-wrap .content-info .info-box .info-value{font-size: 24px; font-weight: 600;line-height: 34px;}
.main-wrap .main-content .content-wrap .content-info .info-box .info-description{font-size: 14px;line-height: 18px;margin-top: 4px; cursor: pointer;}
.main-wrap .main-content .content-wrap .content-info .info-box .info-description.info-more::after{content: "";display: inline-block;width: 20px;height: 20px;background: url('/img/user/common/icon/right-arrow.svg') no-repeat center center / contain;vertical-align: middle;}
.main-wrap .main-content .content-wrap .img-box{background: linear-gradient(135deg, #fff672, #ffe3b8, #ffd3b6);}

.main-wrap .notice-wrap{height: 56px;width: 100%;margin: 0 auto;background: #fff;}
.main-wrap .notice-wrap .notice-box{width: 1200px; margin: 0 auto; background: url("/img/user/common/icon/sound.png") #fff 0 50% no-repeat; background-size: 24px 24px;}
.main-wrap .notice-wrap .notice-box .notice-carousel{box-sizing: border-box;margin: 0;padding: 0; color: #000000a6; font-size: 14px; font-variant: tabular-nums; line-height: 1;list-style: none;font-feature-settings: "tnum";}
.main-wrap .notice-wrap .notice-box .notice-carousel .notice-list{}
.main-wrap .notice-wrap .notice-box .notice-carousel .notice-list .notice-item{height: 50px;font-size: 16px;margin-left: 35px;display: flex;align-items: center; justify-content: space-between;cursor: pointer;}
.main-wrap .notice-wrap .notice-box .notice-carousel .notice-list .notice-item .notice-content{}
.main-wrap .notice-wrap .notice-box .notice-carousel .notice-list .notice-item .notice-more{}
.main-wrap .notice-wrap .notice-box .notice-carousel .notice-list .notice-item .notice-more:after{content: "";display: inline-block;width: 20px;height: 20px;background: url('/img/user/common/icon/right-arrow.svg') no-repeat center center / contain;vertical-align: middle;}

.main-wrap .banner-wrap{width: 1200px; margin: 16px auto 0; height: 195px;}
.main-wrap .banner-wrap .banner-carousel{box-sizing: border-box;color: rgba(0, 0, 0, 0.65);font-size: 14px;line-height: 1;font-feature-settings: "tnum";margin: 0px;padding: 0px;font-variant: tabular-nums;list-style: none;}
.main-wrap .banner-wrap .banner-carousel .banner-list{}
.main-wrap .banner-wrap .banner-carousel .banner-list .banner-item{}
.main-wrap .banner-wrap .banner-carousel .banner-list .banner-item img{width: 384px;height: 164px;border-radius: 12px;}

.main-wrap .move-btn{margin: 0 auto ;width: 220px;height: 60px;border: 1px solid #000;border-radius: 50px;color: #000;display: flex;justify-content: center;align-items: center;line-height: 17px;font-size: 18px;font-weight: 500;box-sizing: border-box;}
.main-wrap .move-btn:hover{border: 1px solid #fb0;background: #fb0;color: #000;cursor: pointer}
.main-wrap .move-btn span{display: flex;align-items: center;}
.main-wrap .move-btn span::after{content: "";display: inline-block;font-weight: bold;width: 25px;height: 25px;background: url('/img/user/common/icon/right-arrow.svg') no-repeat center center / contain;vertical-align: middle;}

.main-wrap .info-wrap{padding: 80px 0;width: 1200px;margin: 0 auto;}
.main-wrap .info-wrap .info-title{font-size: 48px;font-weight: 500;line-height: 58px;text-align: center;}
.main-wrap .info-wrap .info-subtitle{font-size: 20px;font-weight: 400;margin: 8px 0 40px;text-align: center;}
.main-wrap .info-wrap .info-content{gap: 25px;align-items: flex-start; justify-content: center;}
.main-wrap .info-wrap .info-content .content-box{padding: 24px 16px 5px;border: 1px solid #edeef0;border-radius: 16px;}
.main-wrap .info-wrap .info-content .content-box.content-left{width: 714px;}
.main-wrap .info-wrap .info-content .content-box.content-right{width: 460px;}
.main-wrap .info-wrap .info-content .content-box .tab-list{gap: 24px;display: flex;align-items: center;}
.main-wrap .info-wrap .info-content .content-box .tab-list .tab{margin: 0;font-size: 16px;cursor: pointer;box-sizing: border-box;font-weight: 500;color: #707582;padding: 8px 10px;}
.main-wrap .info-wrap .info-content .content-box .tab-list .tab.active{color: #000;background: #f3f4f6;border-radius: 30px;}
.main-wrap .info-wrap .info-content .content-box .table-wrap{}
.main-wrap .info-wrap .info-content .content-box .table-head{}
.main-wrap .info-wrap .info-content .content-box .table-head ul{display: grid; grid-template-columns: 2fr 2fr 2fr 1fr 1fr;height: 32px;margin: 16px 0 8px;color: #707582;font-size: 12px;font-weight: 400;align-items: center;padding: 14px 0;}
.main-wrap .info-wrap .info-content .content-box .table-head ul.col-3{grid-template-columns: 2fr 1fr 1fr;}
.main-wrap .info-wrap .info-content .content-box .table-head ul li{}
.main-wrap .info-wrap .info-content .content-box .table-head ul li:first-child{padding-left: 16px;}
.main-wrap .info-wrap .info-content .content-box .table-body{}
.main-wrap .info-wrap .info-content .content-box .table-body ul{}
.main-wrap .info-wrap .info-content .content-box .table-body ul li{display: grid; grid-template-columns: 2fr 2fr 2fr 1fr 1fr;align-items: center;height: 60px;color: #000;font-size: 14px;font-weight: 400;padding: 14px 0;box-sizing: border-box;cursor: pointer;border-radius: 50px; border: 1px solid transparent;}
.main-wrap .info-wrap .info-content .content-box .table-body ul.col-3 li{grid-template-columns: 2fr 1fr 1fr;}
.main-wrap .info-wrap .info-content .content-box .table-body ul li:hover {border: 1px solid rgba(255, 187, 0, .4);background: rgba(255, 187, 0, .08);}
.main-wrap .info-wrap .info-content .content-box .table-body ul li .info-value{display: flex;align-items: center;}
.main-wrap .info-wrap .info-content .content-box .table-body ul li .info-value:first-child{padding-left: 16px;}
.main-wrap .info-wrap .info-content .content-box .table-body ul li .info-value .pair-img{margin-right: 8px;width: 28px;height: 28px;}
.main-wrap .info-wrap .info-content .content-box .table-body ul li .info-value .pair-img img{width: 28px;height: 28px;}
.main-wrap .info-wrap .info-content .content-box .table-body ul li .info-value .pair-name{font-weight: bold;}
.main-wrap .info-wrap .info-content .content-box .table-body ul li .info-value .trade{color: #000;background: #f5f7fb;padding: 8px 12px;border-radius: 30px;}
.main-wrap .info-wrap .info-content .content-box .table-body ul li:hover .info-value .trade{background: #ffbb00;}
.main-wrap .info-wrap .move-btn{margin-top: 60px;}

.main-wrap .cs-bg{background: #fafafa;}
.main-wrap .cs-wrap{padding: 80px 0; width: 1200px; margin: 0 auto; gap: 60px;}
.main-wrap .cs-wrap .title-wrap{background: #fafafa; align-items: center;}
.main-wrap .cs-wrap .title-wrap .title{font-size: 48px;font-weight: 500;line-height: 58px;letter-spacing: 1px;}
.main-wrap .cs-wrap .title-wrap .subtitle{font-size: 20px;margin: 8px 0 40px;}
.main-wrap .cs-wrap .link-wrap{}
.main-wrap .cs-wrap .link-wrap .app-info{gap: 24px;padding-right: 64px;}
.main-wrap .cs-wrap .link-wrap .app-info .qr-code{width: 138px;height: 138px;border-radius: 14px;padding: 10px;background: #fff;border: 1px solid #edeef0; box-sizing: border-box;}
.main-wrap .cs-wrap .link-wrap .app-info .link-box{justify-content: space-between;}
.main-wrap .cs-wrap .link-wrap .app-info .link-box .link-title{font-size: 18px;margin-top: 15px;}
.main-wrap .cs-wrap .link-wrap .app-info .link-box .link-list{gap: 20px;}
.main-wrap .cs-wrap .link-wrap .app-info .link-box .link-list .link{background-size: cover; background-repeat: no-repeat; background-position: center;width: 56px;height: 56px;border-radius: 12px;border: 1px solid #edeef0;cursor: pointer;}
.main-wrap .cs-wrap .link-wrap .app-info .link-box .link-list .link:hover{border: 1px solid #ffbb00;}
.main-wrap .cs-wrap .link-wrap .cs-info{padding-left: 64px;border-left: 1px solid #edeef0;height: 138px;gap: 20px;;}
.main-wrap .cs-wrap .link-wrap .cs-info .cs-info-box{display: flex;background-color: #fff;height: 138px;width: 330px;justify-content: space-between;border-radius: 16px;padding: 16px 20px;box-sizing: border-box;border: 1px solid #edeef0;}
.main-wrap .cs-wrap .link-wrap .cs-info .cs-info-box:hover{border: 1px solid #ffbb00;}
.main-wrap .cs-wrap .link-wrap .cs-info .cs-info-box .cs-info-txt{display: flex;flex-direction: column;}
.main-wrap .cs-wrap .link-wrap .cs-info .cs-info-box .cs-info-txt .cs-title{font-size: 24px;font-weight: 500;line-height: 34px;}
.main-wrap .cs-wrap .link-wrap .cs-info .cs-info-box .cs-info-txt .cs-subtitle{color: #707582;font-size: 16px;line-height: 22px;margin-top: 4px;}
.main-wrap .cs-wrap .link-wrap .cs-info .cs-info-box .cs-info-txt .more{color: #f2b200;font-size: 16px;margin-top: auto;cursor: pointer;display: inline-flex;}
.main-wrap .cs-wrap .link-wrap .cs-info .cs-info-box .cs-img{width: 88px;height: 88px;background-repeat: no-repeat;background-position: center;margin: auto 0;background-size: cover;}

/* market */
.market-wrap{background: #fff;min-height: 100vh; padding-top: 28px;}
.market-wrap .market-info{width: 1200px;display: flex;justify-content: space-between;margin: 0 auto 50px;}
.market-wrap .market-info .market-info-left{width: 613px;}
.market-wrap .market-info .market-info-right{width: 544px;}
.market-wrap .market-info .market-info-box{}
.market-wrap .market-info .market-info-box .market-info-box-title{font-size: 24px;font-weight: 500;line-height: 16px;color: #000;margin-bottom: 38px;margin-top: 8px;}
.market-wrap .market-info .market-info-box .market-info-box-content{}
.market-wrap .market-info .market-info-box .market-info-box-content .fng-box{display: flex;align-items: center;justify-content: space-between;border: 1px solid #edeef0;border-radius: 12px;padding: 32px 24px;box-sizing: border-box;}
.market-wrap .market-info .market-info-box .market-info-box-content .fng-box .fng-txt{max-width: 46%;}
.market-wrap .market-info .market-info-box .market-info-box-content .fng-box .fng-txt .fng-txt-title{font-size: 24px;font-weight: 500;line-height: 16px;color: #000;margin-bottom: 16px;}
.market-wrap .market-info .market-info-box .market-info-box-content .fng-box .fng-txt .fng-txt-content{font-size: 14px;font-weight: 400;line-height: 18px;color: #707582;}
.market-wrap .market-info .market-info-box .market-info-box-content .fng-box .fng-gauge{width: 178px;height: 92px;background: url('/img/user/common/chart/charts-gauge.png') no-repeat 0 0;background-size: 100% 100%; box-sizing: border-box;}
.market-wrap .market-info .market-info-box .market-info-box-content .fng-box .fng-gauge .arc-ball{border: 1px solid rgb(255, 61, 85);--rotate-end: 90deg;animation-name: moveAnimation;width: 21px;height: 21px;background: #fff;border-radius: 50%;position: absolute;margin-left: 89px;margin-top: 89px;animation-duration: 1.5s;animation-iteration-count: 1;animation-fill-mode: forwards;display: flex;align-items: center;justify-content: center;box-sizing: border-box;}
.market-wrap .market-info .market-info-box .market-info-box-content .fng-box .fng-gauge .arc-ball .arc-ball-circle{background: #ff3d55;width: 12px;height: 12px;border-radius: 50%;box-sizing: border-box;}
.market-wrap .market-info .market-info-box .market-info-box-content .fng-box .fng-gauge .fng-value{text-align: center;margin-top: 53px;}
.market-wrap .market-info .market-info-box .market-info-box-content .fng-box .fng-gauge .fng-value span{font-size: 40px;font-weight: 600;color: #000;}
.market-wrap .market-info .market-info-box .fear-greed-left-list{display: flex;align-items: center;justify-content: space-between;margin-top: 16px;gap: 16px;}
.market-wrap .market-info .market-info-box .fear-greed-left-list .item{width: 300px;border: 1px solid #edeef0;border-radius: 12px;padding: 14px 16px;}
.market-wrap .market-info .market-info-box .fear-greed-left-list .item .item-title{display: flex;align-items: center;font-size: 14px;font-weight: 400;line-height: 18px;color: #707582;margin-bottom: 0;}
.market-wrap .market-info .market-info-box .fear-greed-left-list .item .item-info{display: flex;align-items: center;justify-content: space-between;}
.market-wrap .market-info .market-info-box .fear-greed-left-list .item .item-info-left{}
.market-wrap .market-info .market-info-box .fear-greed-left-list .item .item-info-left p{font-size: 22px;font-weight: 500;line-height: 28px;margin-top: 16px;margin-bottom: 3px;}
.market-wrap .market-info .market-info-box .fear-greed-left-list .item .item-info-left span{font-size: 14px;font-weight: 500;line-height: 18px;color: #000;}
.market-wrap .market-info .market-info-box .fear-greed-left-list .item .charts-area{width: 102px;height: 42px;margin-top: 20px;}
.market-wrap .market-info .market-info-box .fear-greed-left-note {margin-top: 8px;font-size: 13px;font-weight: 400;line-height: 18px;color: #707582;}
.market-wrap .market-info .market-info-right .market-info-box-title{display: flex;align-items: center;justify-content: space-between;margin-bottom: 28px;}
.market-wrap .market-info .market-info-right .market-info-box-title .day-tabs{display: flex;align-items: center;border-radius: 58px;border: 1px solid #edeef0;background: #f5f6f7;}
.market-wrap .market-info .market-info-right .market-info-box-title .day-tabs .tab{    cursor: pointer;font-size: 14px;font-weight: 400;line-height: 18.2px;letter-spacing: .01em;color: #707582;padding: 9px 22px;}
.market-wrap .market-info .market-info-right .market-info-box-title .day-tabs .tab.active{color: #000;background: #fff;border-radius: 58px;}
.market-wrap .market-info .market-info-right .day-line-graph{width: 544px;height: 282px;}

.market-wrap .market-tab{width: 1200px;margin: 24px auto;display: flex;justify-content: space-between;}
.market-wrap .market-tab .market-nav{height: 40px;display: flex;font-size: 22px;line-height: 40px;color: #707a8a;}
.market-wrap .market-tab .market-nav .nav-item{cursor: pointer;}
.market-wrap .market-tab .market-nav .nav-item:not(:last-child){margin-right: 30px;}
.market-wrap .market-tab .market-nav .nav-item.active{font-weight: 500;color: #000;}
.market-wrap .market-tab .market-search{box-sizing: border-box;margin: 0;padding: 0;color: rgba(0, 0, 0, .65);font-size: 14px;font-variant: tabular-nums;line-height: 1;list-style: none;font-feature-settings: "tnum";position: relative;display: inline-block;text-align: start;}
.market-wrap .market-tab .market-search .search-icon{position: absolute;top: 50%;z-index: 2;display: flex;align-items: center;line-height: 0;transform: translateY(-50%);left: 16px;width: 16px;height: 16px;font-size: 16px;color: #b1b7bf;}
.market-wrap .market-tab .market-search .inp-search{border-radius: 36px;height: 40px;padding: 0 44px;background: #fff;font-size: 14px;}
.market-wrap .market-list-wrap{width: 1200px;margin: 0 auto;}
.market-wrap .market-list-wrap .market-list-tab{height: 40px;margin-bottom: 30px;}
.market-wrap .market-list-wrap .market-list-tab .tab-list{display: flex;height: 100%;}
.market-wrap .market-list-wrap .market-list-tab .tab-list .tab{box-sizing: border-box;text-decoration: none;cursor: pointer;margin: 0 16px 0 0 !important;padding: 0 20px;background: #f7f7f9;color: #707a8a;border-radius: 6px;height: 40px !important;line-height: 40px; display: flex; justify-content: center; align-items: center;transition: color .5s;}
.market-wrap .market-list-wrap .market-list-tab .tab-list .tab:hover{color: #ffcd29}
.market-wrap .market-list-wrap .market-list-tab .tab-list .tab.active{background: rgba(255, 187, 0, .12);color: #f2b200;font-weight: 500;}

#market-list .coin-pair{display: flex;align-items:center;font-size: 14px;color: #000;white-space: nowrap;cursor: pointer;}
#market-list .coin-pair .coin-favorite{background-image: url("/img/user/common/icon/star.svg");width: 12px;height: 12px;margin-right: 13px; background-repeat: no-repeat; background-size: cover; background-position: center;}
#market-list .coin-pair .coin-favorite.active{background-image: url("/img/user/common/icon/star-yellow.svg")}
#market-list .coin-pair .coin-logo{display: flex;align-items: center;}
#market-list .coin-pair .coin-logo img{width: 28px;height: 28px;margin-right: 6px;}
#market-list .coin-pair .coin-name{padding-top: 2px;font-size: 14px;color: #000;overflow: hidden;text-overflow: ellipsis !important;white-space: nowrap !important;}
#market-list .coin-pair .zero-fee{margin-left: 5px;color: #f2b200;display: none;border: 1px solid rgba(242, 178, 0, .3);border-radius: 4px;height: 18px;padding: 0 4px;line-height: 16px; font-size: 0.75rem;}
#market-list .coin-pair .zero-fee.active{display: inline-flex;align-items: center;}
#market-list .last-price-wrap{display: flex;flex-direction: column;justify-content: center; font-size: 14px; line-height: 14px;}
#market-list .last-price-wrap .last-price1{color: #000;}
#market-list .last-price-wrap .last-price2{color: #707582; margin-top: 5px;}
#market-list .coin-change{letter-spacing: 0.05rem;}
#market-list .coin-change.green{color: #3cbc98;}
#market-list .coin-change.red{color: #e3595d;}
#market-list .coin-trade{flex: 1 1 0; font-size: 14px; text-align: right;cursor: pointer;}

/* ag-grid */
.ag-center-cols-viewport{min-height: 50px !important;}
.ag-center-cols-container{min-height: 50px !important;}
.ag-header-cell-label{font-size: 12px !important;color: #707a8a !important;}
.ag-header-cell.txt-right .ag-header-cell-label{justify-content: flex-end !important;}
.ag-cell-value.txt-right{justify-content: flex-end !important;}
.ag-cell:focus,
.ag-cell:focus-within,
.ag-row-selected .ag-cell {border: 1px solid transparent !important;}
.ag-row{cursor: pointer;}


#list-mobile{width: 100%;}
#list-mobile ul{display: flex;flex-direction: column;padding: 10px 0;gap: 12px;width: 100%}
#list-mobile ul li{}
#list-mobile ul li .coin-info-box{}
#list-mobile ul li .coin-info-box .coin-pair{display: flex;align-items:center;font-size: 14px;color: #000;white-space: nowrap;cursor: pointer; width: 100%;position: relative;height: 66px; background-color: #fff; border-radius: 10px; padding: 10px 20px; box-sizing: border-box;}
#list-mobile ul li .coin-info-box .coin-pair.dropdown::after{position:absolute ;content: "";display: inline-block;width: 20px;height: 20px;background: url('/img/user/common/icon/down-arrow.svg') no-repeat center center / contain;vertical-align: middle;transition: transform 0.3s ease; right: 14px;}
#list-mobile ul li .coin-info-box.open .coin-pair.dropdown::after{transform: rotate(180deg);}
#list-mobile ul li .coin-info-box .coin-pair .coin-favorite{background-image: url("/img/user/common/icon/star.svg");width: 12px;height: 12px;margin-right: 13px; background-repeat: no-repeat; background-size: cover; background-position: center;}
#list-mobile ul li .coin-info-box .coin-pair .coin-favorite.active{background-image: url("/img/user/common/icon/star-yellow.svg")}
#list-mobile ul li .coin-info-box .coin-pair .coin-logo{display: flex;align-items: center;}
#list-mobile ul li .coin-info-box .coin-pair .coin-logo img{width: 28px;height: 28px;margin-right: 6px;}
#list-mobile ul li .coin-info-box .coin-pair .coin-name{padding-top: 2px;font-size: 14px;color: #000;overflow: hidden;text-overflow: ellipsis !important;white-space: nowrap !important;}
#list-mobile ul li .coin-info-box .coin-pair .zero-fee{margin-left: 5px;color: #f2b200;display: none;border: 1px solid rgba(242, 178, 0, .3);border-radius: 4px;height: 18px;padding: 0 4px;line-height: 16px; font-size: 0.75rem;}
#list-mobile ul li .coin-info-box .coin-pair .zero-fee.active{display: inline-flex;align-items: center;}
#list-mobile ul li .coin-info-box .coin-info{display: none; flex-direction: column; background-color: #fff;padding: 13px 16px; margin-top: 5px; border-radius: 10px;}
#list-mobile ul li .coin-info-box.open .coin-info{display: flex;}
#list-mobile ul li .coin-info-box .coin-info .info-box{border-bottom: 1px solid #efefef;padding: 0.5em 0; display: grid; grid-template-columns: 1fr 2fr; font-size: 13px; line-height: 16px;}
#list-mobile ul li .coin-info-box .coin-info .info-box:first-child{padding-top: 0;}
#list-mobile ul li .coin-info-box .coin-info .info-box:last-child{border-bottom: none;padding-bottom: 0;}
#list-mobile ul li .coin-info-box .coin-info .info-box .info-title{font-weight: bold;}
#list-mobile ul li .coin-info-box .coin-info .info-box .info-value{}
#list-mobile ul li .coin-info-box .coin-info .info-box .info-value .last-price1{}
#list-mobile ul li .coin-info-box .coin-info .info-box .info-value .last-price2{color: #707582;}
#list-mobile ul li.no-data{display: flex;justify-content: center;align-items: center;font-size: 14px;color: #000;width: 100%;height: 66px;background-color: #fff;border-radius: 10px;padding: 10px 20px;box-sizing: border-box;}


/* chart */
.chart-wrap{}
.chart-wrap .chart-container{display: flex;}
.chart-wrap .chart-container .chart-col{ flex: 1 1 auto;min-width: 0; }
.chart-wrap .chart-info{display: flex;}
.chart-wrap .chart-box{flex: 1 1 auto;min-width: 0;height: 689px; border-top: 1px solid #ffffff1a; width: 100%}
.chart-wrap .chart-box .chart-header{height: 68px; border-bottom: 1px solid #ffffff1a; margin-right: 45px; overflow: hidden;}
.chart-wrap .chart-box .chart-header .coin-info{display: flex; align-items: center; height: 68px; padding-left: 16px;position: relative;}
.chart-wrap .chart-box .chart-header .coin-info .coin-logo{margin-right: 6px}
.chart-wrap .chart-box .chart-header .coin-info .coin-logo img{width: 30px;}
.chart-wrap .chart-box .chart-header .coin-info .coin-name{}
.chart-wrap .chart-box .chart-header .coin-info .coin-name .coin-title{font-size: 16px; font-weight: bold;}
.chart-wrap .chart-box .chart-header .coin-info .coin-name .coin-zero-fee{display: inline-flex;border: 1px solid #f2b2004d;border-radius: 4px;height: 18px;padding: 0 4px;line-height: 16px;font-size: 12px; margin-top: 8px;}
.chart-wrap .chart-box .chart-header .coin-info .dropdown{width: 30px; margin-left: 15px;position: relative;}
.chart-wrap .chart-box .chart-header .coin-info .dropdown::after{position:absolute ;content: "";display: inline-block;width: 23px;height: 23px;background: url('/img/user/common/icon/down-arrow-white.svg') no-repeat center center / contain;vertical-align: middle;transition: transform 0.3s ease; right: 11px; top: -13px;}
.chart-wrap .chart-box .chart-header .coin-info .dropdown.pc:hover::after{transform: rotate(180deg);}
.chart-wrap .chart-box .chart-header .coin-info:after {content: "";position: absolute;top: 5px;right: 0;width: 1px;height: 48px;background: #ffffff1a}
.chart-wrap .chart-box .chart-header .coin-info .dropdown.pc:hover .tickers-dropdown{opacity: 1;visibility: visible;transform: translate(0,0);}
.chart-wrap .chart-box .chart-header .coin-info .dropdown .tickers-dropdown{position: fixed;box-sizing: border-box;left: 10px;top: 140px;transform-origin: 0 -4px;margin: 0;padding: 20px;color: #fff;font-size: 14px;z-index: 10;max-height: 548px;width: 548px;background: #191a1d;border-radius: 12px;padding-bottom: 15px;overflow: hidden;border: 1px solid #303238;opacity: 0;visibility: hidden;transform: translate(0, -8px);transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;}
.chart-wrap .chart-box .chart-header .coin-info .tickers-dropdown .tickers-search{ position: relative;}
.chart-wrap .chart-box .chart-header .coin-info .tickers-dropdown .tickers-search .search-icon{position: absolute;top: 50%;z-index: 12;display: flex;align-items: center;line-height: 0;transform: translateY(-50%);left: 16px;width: 16px;height: 16px;font-size: 16px;color: #b1b7bf;}
.chart-wrap .chart-box .chart-header .coin-info .tickers-dropdown .tickers-search input{background: #191a1d;border-radius: 4px;border: 1px solid #303238;height: 40px;padding-left: 44px;padding-right: 30px;color: #eaecef;position: relative;width: 100%;}
.chart-wrap .chart-box .chart-header .coin-info .tickers-dropdown .tickers-head{margin-top: 10px; color: #848e9c;}
.chart-wrap .chart-box .chart-header .coin-info .tickers-dropdown .tickers-list{color: #fff;}
.chart-wrap .chart-box .chart-header .coin-info .tickers-dropdown ul{}
.chart-wrap .chart-box .chart-header .coin-info .tickers-dropdown ul.col-4{}
.chart-wrap .chart-box .chart-header .coin-info .tickers-dropdown ul li{cursor: pointer;display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.5fr;align-items: center;height: 36px;font-size: 14px;}
.chart-wrap .chart-box .chart-header .coin-info .tickers-dropdown ul li .info-value{}
.chart-wrap .chart-box .chart-header .coin-info .tickers-dropdown ul li .info-value .pair-name{}
.chart-wrap .chart-box .chart-header .coin-value{display:flex;flex-direction: column;justify-content: center; gap: 8px;}
.chart-wrap .chart-box .chart-header .coin-value .info-title{font-size: 12px;}
.chart-wrap .chart-box .chart-header .coin-value .info-title.bold{font-size: 16px;}
.chart-wrap .chart-box .chart-header .coin-value .info-content{font-size: 12px; font-weight: bold;}
.chart-wrap .chart-box .chart-body{}
.chart-wrap .chart-box .chart-body .chart-tool{height: 40px; padding: 0 16px; border: none; justify-content: space-between;}
.chart-wrap .chart-box .chart-body .chart-tool .tool-left{align-items: center;}
.chart-wrap .chart-box .chart-body .chart-tool .tool-left .tool-item{font-size: 12px; color: #ffffff99; margin-right: 24px;}
.chart-wrap .chart-box .chart-body .chart-tool .tool-left .tool-item:not(:first-child){cursor: pointer}
.chart-wrap .chart-box .chart-body .chart-tool .tool-left .tool-item:not(:first-child):hover{color: #ffffff}
.chart-wrap .chart-box .chart-body .chart-tool .tool-left .tool-item.active{color: #ffffff}
.chart-wrap .chart-box .chart-body .chart-tool .tool-left .chart-type{position: relative}
.chart-wrap .chart-box .chart-body .chart-tool .tool-left .chart-type .chart-type-list{position: absolute; box-sizing: border-box;left: -10px;top: 16px;transform-origin: 0 -4px;margin: 0;padding: 0;color: #fff;font-size: 14px;z-index: 10;background: #191a1d;border: 1px solid #303238;opacity: 0;visibility: hidden;transform: translate(0,-8px);transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;}
.chart-wrap .chart-box .chart-body .chart-tool .tool-left .chart-type:hover .chart-type-list{opacity: 1;visibility: visible;transform: translate(0,0);}
.chart-type-list ul{padding: 5px 0;}
.chart-type-list ul li{padding: 5px 12px; font-size: 14px; width: 125px; height: 32px;box-sizing: border-box; display: flex; align-items: center;}
.chart-type-list ul li.active{background-color: #3a3b43; color: #f2b200;}

.chart-wrap .chart-box .chart-body .chart-tool .tool-right{align-items: center;}
.chart-wrap .chart-box .chart-body .chart-tool .tool-right .tool-item{margin-left: 20px; font-size: 12px; color: #ffffff99;}
.chart-wrap .chart-box .chart-body .chart-graph{min-width: 0;}
.chart-wrap .chart-box .chart-body .chart-graph #chart-price{width: 100%; height: 580px;}

.chart-wrap .price-stack-wrap{width: 300px;flex-shrink: 0;border-left: 1px solid #ffffff1a;}
.chart-wrap .price-stack-wrap .price-stack{}
.chart-wrap .price-stack-wrap .price-stack .stack-title{height: 42px;padding: 0 16px;align-items: center;border-top: 1px solid #ffffff1a;border-bottom: 1px solid #ffffff1a;}
.chart-wrap .price-stack-wrap .price-stack .stack-content{}
.chart-wrap .price-stack-wrap .price-stack .stack-content .stack-box{}
.chart-wrap .price-stack-wrap .price-stack .stack-content .stack-box .stack-header{height: 30px;padding: 0 16px; display: grid; grid-template-columns: 1fr 1fr 1fr;align-items: center;}
.chart-wrap .price-stack-wrap .price-stack .stack-content .stack-box .stack-header .header-title{font-size: 12px; width: 100%;}
.chart-wrap .price-stack-wrap .price-stack .stack-content .stack-box .stack-header .header-title.left{justify-content: flex-start;}
.chart-wrap .price-stack-wrap .price-stack .stack-content .stack-box .stack-header .header-title.right{justify-content: flex-end;}
.chart-wrap .price-stack-wrap .price-stack .stack-content .stack-box .stack-body{}
.chart-wrap .price-stack-wrap .price-stack .stack-content .stack-box .stack-body .stack-list{}
.chart-wrap .price-stack-wrap .price-stack .stack-content .stack-box .stack-body .stack-list .stack-item{font-size: 12px;height: 22px;padding: 0 16px; display: grid; grid-template-columns: 1fr 1fr 1fr;align-items: center;}
.chart-wrap .price-stack-wrap .price-stack .stack-content .stack-box .stack-body .stack-list .stack-item .item-left{width: 100%;justify-content: flex-start; cursor: pointer;}
.chart-wrap .price-stack-wrap .price-stack .stack-content .stack-box .stack-body .stack-list .stack-item .item-middle{width: 100%;justify-content: flex-end;}
.chart-wrap .price-stack-wrap .price-stack .stack-content .stack-box .stack-body .stack-list .stack-item .item-right{width: 100%;justify-content: flex-end;}
.chart-wrap .price-stack-wrap .price-stack .stack-content .stack-box .order-book-ticker{height: 42px;padding: 0 16px; display: grid; grid-template-columns: 1fr 1fr;align-items: center;}
.chart-wrap .price-stack-wrap .price-stack .stack-content .stack-box .order-book-ticker .order-book-ticker-price1{font-size: 20px; font-weight: bold;}
.chart-wrap .price-stack-wrap .price-stack .stack-content .stack-box .order-book-ticker .order-book-ticker-price2{font-size: 12px;}
.chart-wrap .price-stack-wrap .price-stack .stack-content .stack-box .order-book-ticker .order-book-ticker-price1 span{ display: flex;}
.chart-wrap .price-stack-wrap .price-stack .stack-content .stack-box .order-book-ticker .order-book-ticker-price1 span.txt-green::after{content: ""; width: 20px; height: 20px; background-image: url("/img/user/common/chart/arrow-up.svg"); background-repeat: no-repeat; background-position: center; background-size: cover;display: block;margin-left: 5px;}
.chart-wrap .price-stack-wrap .price-stack .stack-content .stack-box .order-book-ticker .order-book-ticker-price1 span.txt-red::after{content: ""; width: 20px; height: 20px; background-image: url("/img/user/common/chart/arrow-down.svg"); background-repeat: no-repeat; background-position: center; background-size: cover;display: block;margin-left: 5px;}
.chart-wrap .price-stack-wrap .price-stack .stack-content .ratio-box{height: 40px;padding: 10px 16px; box-sizing: border-box; align-items: center;border-top: 1px solid #ffffff1a;}
.chart-wrap .price-stack-wrap .price-stack .stack-content .ratio-box span{font-size: 12px;}
.chart-wrap .price-stack-wrap .price-stack .stack-content .ratio-box .ratio{flex: 1 1;height: 20px;position: relative;}
.chart-wrap .price-stack-wrap .price-stack .stack-content .ratio-box .ratio .ratio-buy{padding-left:10px;left:0;background: #00bf75; color: #fff;}
.chart-wrap .price-stack-wrap .price-stack .stack-content .ratio-box .ratio .ratio-buy:after {content: "";position: absolute;right: 0;bottom: 0;width: 0;height: 0;border-color: transparent transparent #191919;border-style: solid;border-width: 0 0 16px 4px;}
.chart-wrap .price-stack-wrap .price-stack .stack-content .ratio-box .ratio .ratio-sell{text-align:right;padding-right:10px;right:0;background: #fc3c56; color: #fff;}
.chart-wrap .price-stack-wrap .price-stack .stack-content .ratio-box .ratio .ratio-sell:before {content: "";position: absolute;left: 0;top: 0;width: 0;height: 0;border-color: #191919 transparent transparent;border-style: solid;border-width: 16px 4px 0 0;}
.chart-wrap .price-stack-wrap .price-stack .stack-content .ratio-box .ratio span {display: inline-block;position: absolute;min-width: 20%;max-width: 80%;height: 20px;line-height: 20px;font-weight: 500;font-size: 12px;border-radius: 2px;box-sizing: border-box;}

.chart-wrap .table-wrap{height: 362px; border-top: 1px solid #ffffff1a;}
.chart-wrap .table-wrap .tab-list{height: 40px; gap: 20px;align-items: center; padding: 0 10px;}
.chart-wrap .table-wrap .tab-list .tab{font-size: 14px; font-weight: bold;}
.chart-wrap .table-wrap .tab-list .tab.active{color: #f2b200;}
.chart-wrap .table-wrap .table-box{padding: 10px;}
.chart-wrap .table-wrap .table-box .table-head ul{display: grid; grid-template-columns: 3fr 2fr 1.5fr 1fr 3fr}
.chart-wrap .table-wrap .table-box .table-head ul li{color: #ffffff99; border-bottom: 1px solid #ffffff1a;padding-bottom: 15px;}
.chart-wrap .table-wrap .table-box .mid-title{display: flex;align-items: center;color: #ffffff99;height: 55px;}
.chart-wrap .table-wrap .table-box .table-body ul{}
.chart-wrap .table-wrap .table-box .table-body ul li{border-bottom: 1px solid #ffffff1a;padding: 10px 0; height: 55px;box-sizing: border-box;display: grid; grid-template-columns: 3fr 2fr 1.5fr 1fr 3fr}
.chart-wrap .table-wrap .table-box .table-body ul li .assets{height: 100%;display: flex; align-items: center;}
.chart-wrap .table-wrap .table-box .table-body ul li .assets .asset-img{}
.chart-wrap .table-wrap .table-box .table-body ul li .assets .asset-img img{width: 24px; height: 24px;}
.chart-wrap .table-wrap .table-box .table-body ul li .assets .asset-name{}
.chart-wrap .table-wrap .table-box .table-body ul li .assets .asset-price{height: 100%; display: flex; align-items: center;}

.chart-wrap .transaction-col{width: 300px; flex-shrink: 0;border-left: 1px solid #ffffff1a;}
.chart-wrap .transaction-col .transaction-box{}
.chart-wrap .transaction-col .transaction-box .future-setting{display: flex; gap: 12px;padding: 12px 16px; cursor: pointer;}
.chart-wrap .transaction-col .transaction-box .future-setting .right-arrow{background-image: url("/img/user/common/icon/right-arrow-white.svg"); background-repeat: no-repeat; background-position: center; background-size: cover; height: 12px; width: 17px;}
.chart-wrap .transaction-col .transaction-box .box-title{height: 42px;padding: 0 16px;display: flex;align-items: center;border-top: 1px solid #ffffff1a;border-bottom: 1px solid #ffffff1a;}
.chart-wrap .transaction-col .transaction-box .box-content{padding: 16px;}
.chart-wrap .transaction-col .transaction-box .box-content .tab-box{border-radius: 6px; margin-bottom: 16px;}
.chart-wrap .transaction-col .transaction-box .box-content .tab-box.status-tab{height: 32px; padding: 4px; background-color: #2b2d33;}
.chart-wrap .transaction-col .transaction-box .box-content .tab-box .tab{height: 32px;background-color: #2b2d33;width: 100%; display: flex; align-items: center;justify-content: center;cursor: pointer;}
.chart-wrap .transaction-col .transaction-box .box-content .tab-box .tab.tab-status.active{background-color: #40434a; box-sizing: border-box;border-radius: 4px;}
.chart-wrap .transaction-col .transaction-box .box-content .tab-box .tab-buy{border-radius: 6px 0 0 6px;}
.chart-wrap .transaction-col .transaction-box .box-content.buy .tab-box .tab-buy{background-color: #00bf75;}
.chart-wrap .transaction-col .transaction-box .box-content .tab-box .tab-sell{border-radius: 0 6px 6px 0;}
.chart-wrap .transaction-col .transaction-box .box-content.sell .tab-box .tab-sell{background-color: #fc3c56;}
.chart-wrap .transaction-col .transaction-box .box-content .transaction-info{}
.chart-wrap .transaction-col .transaction-box .box-content .transaction-info .tab-list{gap: 16px;}
.chart-wrap .transaction-col .transaction-box .box-content .transaction-info .tab-list .tab{line-height: 40px; font-size: 14px; font-weight: bold; cursor: pointer;}
.chart-wrap .transaction-col .transaction-box .box-content .transaction-info .tab-list .tab.active{color: #f2b200 !important;;}
.chart-wrap .transaction-col .transaction-box .box-content .transaction-content{}
.chart-wrap .transaction-col .transaction-box .box-content .transaction-content .amount-box{height: 40px; font-size:12px; gap: 10px;align-items: center;}
.chart-wrap .transaction-col .transaction-box .box-content .transaction-content .amount-box{height: 40px; font-size:12px; gap: 10px;align-items: center;}
.chart-wrap .transaction-col .transaction-box .box-content .transaction-content .amount-box .title{color: #848e9c;}
.chart-wrap .transaction-col .transaction-box .box-content .transaction-content .amount-box .amount{}
.chart-wrap .transaction-col .transaction-box .box-content .transaction-content .input-box{position: relative;}
.chart-wrap .transaction-col .transaction-box .box-content .transaction-content .input-box .input-title{position: absolute;top: 50%;z-index: 2;display: flex;align-items: center;color: #848e9c;line-height: 0;transform: translateY(-50%); left: 10px;}
.chart-wrap .transaction-col .transaction-box .box-content .transaction-content .input-box input{padding: 0 60px 0 80px !important;height: 40px;border-color: #2b2d33;border-radius: 8px !important; border: 1px solid #7c88a057;position: relative;box-sizing: border-box;width: 100%;background-color: #303238;}
.chart-wrap .transaction-col .transaction-box .box-content .transaction-content .input-box input::placeholder{color: #848e9c;}
.chart-wrap .transaction-col .transaction-box .box-content .transaction-content .input-box .input-unit{position: absolute;top: 50%;z-index: 2;display: flex;align-items: center;color: #fff;line-height: 0;transform: translateY(-50%);right: 10px;}
.chart-wrap .transaction-col .transaction-box .box-content .btn-wrap{}
.chart-wrap .transaction-col .transaction-box .box-content .btn-wrap.open-btn{gap: 10px; display: none;}
.chart-wrap .transaction-col .transaction-box .box-content .btn-wrap.open-btn.active{display: flex;}
.chart-wrap .transaction-col .transaction-box .box-content .btn-wrap.close-btn{gap: 10px; display: none;}
.chart-wrap .transaction-col .transaction-box .box-content .btn-wrap.close-btn.active{display: flex;}
.chart-wrap .transaction-col .transaction-box .box-content .btn-wrap.open-btn button{border-radius: 4px;}
.chart-wrap .transaction-col .transaction-box .box-content .btn-wrap.close-btn button{border-radius: 4px;}
.chart-wrap .transaction-col .transaction-box .box-content .btn-wrap .btn-buy{display: none;}
.chart-wrap .transaction-col .transaction-box .box-content .btn-wrap .btn-sell{display: none;}
.chart-wrap .transaction-col .transaction-box .box-content.buy .btn-wrap .btn-buy{display: block;}
.chart-wrap .transaction-col .transaction-box .box-content.sell .btn-wrap .btn-sell{display: block;}
.chart-wrap .transaction-col .transaction-box .box-content .buy-unit{display: none;}
.chart-wrap .transaction-col .transaction-box .box-content .sell-unit{display: none;}
.chart-wrap .transaction-col .transaction-box .box-content.buy .buy-unit{display: inline;}
.chart-wrap .transaction-col .transaction-box .box-content.sell .sell-unit{display: inline;}


/* order-history */
.order-history-wrap{background: #fff;min-height: 100vh; padding-top: 28px;}
.history-container{width: 1200px; margin: 0 auto;}
.history-head{height: 87px; display: flex; align-items: center;}
.history-head .history-title{font-size: 24px; line-height: 1.2; color: #000;font-weight: bold;}
.history-body{}
.history-body .history-tab-box{}
.history-tabs{}
.history-tabs ul{display: flex; gap: 25px;}
.history-tabs ul li{color: #707582; font-size: 16px; height: 50px; cursor: pointer;display: flex; align-items: center;}
.history-tabs ul li:hover{color: #000;}
.history-tabs ul li.active{color: #000; border-bottom: 2px solid #000; font-weight: 500;}
.history-body .history-table-box{padding: 25px 0;}
.history-body .btn-cancel{background: #fff;color: #fb0;border: 1px solid #f2b200;border-radius: 4px;font-size: 12px;height: 20px;line-height: 18px;padding: 0 7.5px;box-sizing: border-box;cursor: pointer;}


/* overview */
.overview-wrap{background: #fff;min-height: 100vh; padding-top: 28px;font-size: 14px;}
.overview-container{width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px;}
.total-box{padding: 40px 24px; border: 1px solid #edeef0; border-radius: 8px; box-sizing: border-box;}
.total-box .total-title{font-size: 1.4rem; font-weight: 600; color: #000;}
.total-box .total-value{font-size: 3rem;font-weight: 700;margin: 20px 0 12px; color: #000;}
.total-box .total-value .unit{height: 25px; font-size: 14px; color: #000000a6; margin-left: 8px;}
.total-box .total-value2{font-size: 16px; line-height: 20px; color: #707582;}
.asset-box-wrap{display: flex; gap: 24px;}
.asset-box-wrap .asset-box{padding: 24px; flex: 1 1; height: 100%;border: 1px solid #edeef0;border-radius: 8px; box-sizing: border-box;}
.asset-box-wrap .asset-box img{width: 40px; height: 40px;}
.asset-box-wrap .asset-box .asset-title{margin: 8px 0; color: #000; font-size: 16px;}
.asset-box-wrap .asset-box .asset-value{font-weight: 700; color: #000; font-size: 20px; margin: 8px 0 5px;}
.asset-box-wrap .asset-box .asset-value2{font-size: 14px; color: #707582;}
.asset-table-box{padding: 24px;border: 1px solid #edeef0;border-radius: 8px; box-sizing: border-box;}
.asset-table-box .asset-table-title{line-height: 1.2; color: #000; margin-bottom: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 20px;}
.asset-table-box .asset-table{}
.asset-table-box .asset-search-box{display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 20px;}
.asset-table-box .asset-search-box .asset-search{box-sizing: border-box;margin: 0;padding: 0;color: rgba(0, 0, 0, .65);font-size: 14px;font-variant: tabular-nums;line-height: 1;list-style: none;font-feature-settings: "tnum";position: relative;display: inline-block;text-align: start;}
.asset-table-box .asset-search-box .asset-search .search-icon{position: absolute;top: 50%;z-index: 2;display: flex;align-items: center;line-height: 0;transform: translateY(-50%);left: 16px;width: 16px;height: 16px;font-size: 16px;color: #b1b7bf;}
.asset-table-box .asset-search-box .asset-search .inp-search{border-radius: 36px;height: 40px;padding: 0 44px;background: #fff;font-size: 14px;}

.asset-table-box .asset-search-box .asset-filler{}
.asset-table-box .asset-search-box .asset-filler .asset-filter-check{display: flex; gap: 8px;}
.asset-table-box .asset-search-box .asset-filler .asset-filter-check .asset-filler-checkbox{}
.asset-table-box .asset-search-box .asset-filler .asset-filter-check .asset-filler-checkbox .asset-filler-checkbox-input{display: none;}

.asset-table-box .asset-search-box .asset-filler .asset-filter-check .asset-filler-checkbox .asset-filler-inner{border-radius: 2px;border: 1px solid #707582;background: #fff;width: 12px; height: 12px;position: relative;top: 0;left: 0;display: block;    border-collapse: separate;transition: all .3s;box-sizing: border-box;}
.asset-table-box .asset-search-box .asset-filler .asset-filter-check .asset-filler-checkbox.checkbox-checked .asset-filler-inner{border-color: #fb0 !important;background-color: #fb0 !important;}
.asset-table-box .asset-search-box .asset-filler .asset-filter-check .asset-filler-checkbox.checkbox-checked .asset-filler-inner:after{content: " ";top: 50%;left: 21%;position: absolute;display: table;border-right: 1.5px solid #000;border-bottom: 1.5px solid #000;transform: rotate(45deg) scale(1) translate(-50%, -50%);opacity: 1;transition: all .2s cubic-bezier(.12, .4, .29, 1.46) .1s;width: 5px;height: 7px;box-sizing: border-box;}
.asset-table-box .asset-search-box .asset-filler .checkbox-title{color: #000;font-size: 14px;}


/* theme-dark */
.theme-dark {background: #11141a;color: #fff;}
.theme-dark .header-wrap.layout{background: #11141a; }
.theme-dark .header-wrap .item .dropdown .dropdown-label{color: #fff;}
.theme-dark .header-wrap .item .dropdown .iconDown::before{background: url('/img/user/common/icon/down-arrow-white.svg') no-repeat center center / contain;}
.theme-dark .header-wrap .item .dropdown .dropdown-tag-label{color: #fff;}
.theme-dark .header-wrap .item .btn.layout-login{font-size: 14px;color: #fff;font-weight: 500;background: transparent !important;}

.theme-dark .footer-wrap{background: #11141a; }
.theme-dark .footer-wrap footer .link-wrap .link-box .link-title {color: #fff;}
.theme-dark .footer-wrap footer .link-wrap .link-box .link-list .link {color: #dedede;}
.theme-dark .footer-wrap footer .link-wrap .link-box .link-contact-info .contact-title {color: #fff;}
.theme-dark .footer-wrap footer .footer .copyright {color: #dedede;}


.theme-dark .chart-wrap{background: #11141a;color: #fff;}
.theme-dark .chart-wrap .transaction-col .transaction-box .box-content .transaction-content .input-box input{color: #fff;}


.user-popup-wrap {display: none;position: fixed;left: 0;bottom: -100%; z-index: -1;width: 100%;height: 0;overflow: hidden;transition: 0.5s;overscroll-behavior: none;}
.user-popup-wrap.on{display: block;height: 100%;bottom: 0;z-index: 900;background-color: rgba(0, 0, 0, 0.7);}
.user-popup-wrap .user-popup{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);display: flex;flex-direction: column;width: 420px; transform-origin: 1208px -172.203px;border-radius: 12px;background: #191a1d !important;border: 1px solid #303238;box-shadow: none;box-sizing: content-box;}
.user-popup {padding: 24px;}
.user-popup .close-btn{position: absolute;top: 24px;right: 24px;z-index: 10;padding: 0;color: rgba(0, 0, 0, .45);font-weight: 700;line-height: 1;text-decoration: none;background: transparent;border: 0;outline: 0;cursor: pointer;transition: color .3s;}
.user-popup .close-btn .close-x{display: block;width: 24px;height: 24px;line-height: 24px;font-size: 16px;font-style: normal;text-align: center;text-transform: none;text-rendering: auto;cursor: pointer;
background: url("/img/admin/common/ico_x.svg"); color: #818693;}

.user-popup .user-popup-content{}
.user-popup .user-popup-content .content-title-wrap{}
.user-popup .user-popup-content .content-title-wrap .content-title{}
.user-popup .user-popup-content .content-title-wrap .content-title .title-txt{color: #fff; font-weight: bold; font-size: 1.25rem; line-height: 1.5rem;}
.user-popup .user-popup-content .content-body{padding-bottom: 1.25rem !important;}
.user-popup .user-popup-content .content-body:first-child{border-bottom: 1px solid #202125;}
.user-popup .user-popup-content .content-body .setting-box{}
.user-popup .user-popup-content .content-body .setting-box .setting{}
.user-popup .user-popup-content .content-body .setting-box .setting .title-txt{color: #818693;font-size: 14px;line-height: 20px;}
.user-popup .user-popup-content .content-body .setting-box .setting .mode-btn-box{margin-top: 8px;display: flex;gap: 8px;}
.user-popup .user-popup-content .content-body .setting-box .setting .mode-btn-box .mode-btn{line-height: 1;position: relative;display: inline-block;font-weight: 400;white-space: nowrap;text-align: center;background-image: none;box-shadow: 0 2px 0 rgba(0, 0, 0, .015);cursor: pointer;transition: all .3s cubic-bezier(.645, .045, .355, 1);-webkit-user-select: none;-ms-user-select: none;user-select: none;touch-action: manipulation;height: 44px;padding: 0 15px;font-size: 14px;border-radius: 4px;color: rgba(0, 0, 0, .65);background-color: #fff;border: 1px solid #d9d9d9;}
.user-popup .user-popup-content .content-body .setting-box .setting .mode-btn-box .mode-btn{text-shadow: none;box-shadow: none;height: 34px;font-size: 14px;font-weight: 500;flex-basis: 0;flex-grow: 1;max-width: 100%;max-height: 100%;    border: 1px solid #40434a;background: #202125;color: #818693;    display: flex;justify-content: center;align-items: center;}
.user-popup .user-popup-content .content-body .setting-box .setting .mode-btn-box .mode-btn.active{border: 1px solid #fb0;background: #202125;color: #f2b200;}
.user-popup .user-popup-content .content-body .setting-box .setting .mode-btn-box .mode-btn img{margin-right: 8px;}
.user-popup .user-popup-content .content-body .setting-box .setting .mode-btn-box .mode-btn span{}
.user-popup .user-popup-content .content-body .description-box{display: flex; flex-direction: column; gap: 12px;}
.user-popup .user-popup-content .content-body .description-box .description{word-wrap: break-word; font-size: 12px;}
.user-popup .user-popup-content .content-body .description-box .description .title-txt{color: #fff; font-weight: 400; }
.user-popup .user-popup-content .content-body .description-box .description .content-txt{color: #818693;word-wrap: break-word;line-height: 16px;}
.content-body .anticon-wrap{display: flex; gap: 8px; margin-top: 8px;}
.content-body .anticon{border-radius: 4px; width: 42px; height: 42px; display: flex; align-items: center;justify-content: center; border: 1px solid #303238;}
.content-body .anticon:hover {color: #f2b200; cursor: pointer;}
.content-body .anticon .anticon-btn{display: inline-block;color: inherit;font-style: normal;line-height: 0;text-align: center;text-transform: none;vertical-align: -.125em;text-rendering: optimizeLegibility;-webkit-font-smoothing: antialiased;}
.content-body .leverage-input-box{border:1px solid #303238;flex-basis: 0;flex-grow: 1;max-width: 100%;max-height: 100%;width: 0}
.content-body .leverage-input-box input{font-size: 16px;width: 100%;height: 42px;padding: 0 11px;text-align: center;background-color: transparent;border: 0;border-radius: 4px;outline: 0;transition: all .3s linear;touch-action: manipulation;color: #fff;}


.content-body .set-leverage-slider{}
.content-body .set-leverage-slider .iui-slider{}
.content-body .set-leverage-slider .iui-slider .ant-slider{box-sizing: border-box;color: rgba(0, 0, 0, .65);font-size: 14px;font-variant: tabular-nums;line-height: 1;list-style: none;font-feature-settings: "tnum";position: relative;cursor: pointer;touch-action: none;margin: 0 6px ;padding: 6px 0;height: 14px;}
.content-body .set-leverage-slider .iui-slider .ant-slider.ant-slider-with-marks{height: 32px;}
.content-body .set-leverage-slider .iui-slider .ant-slider .ant-slider-rail{position: absolute;width: 100%;border-radius: 2px;transition: background-color .3s;;background: #303238;height: 2px;}
.content-body .set-leverage-slider .iui-slider .ant-slider .ant-slider-track{position: absolute;border-radius: 4px;transition: background-color .3s; height: 2px;background: #fb0;}
.content-body .set-leverage-slider .iui-slider .ant-slider .ant-slider-step{position: absolute;width: 100%;top: 6px;height: 2px;background: transparent;}
.content-body .set-leverage-slider .iui-slider .ant-slider .ant-slider-step .ant-slider-dot{position: absolute;width: 6px;height: 6px;margin-left: -4px;border: 2px solid #303238;border-radius: 50%;cursor: pointer;background: #11141a;top: -4px;}
.content-body .set-leverage-slider .iui-slider .ant-slider .ant-slider-step .ant-slider-dot:first-child{margin-left: -6px;}
.content-body .set-leverage-slider .iui-slider .ant-slider .ant-slider-step .ant-slider-dot.ant-slider-dot-active{background: #fb0 ;border-color: #fb0;}
.content-body .set-leverage-slider .iui-slider .ant-slider .ant-slider-handle{position: absolute;border: 2px solid #11141a;border-radius: 50%;cursor: pointer;transition: border-color .3s, box-shadow .6s, transform .3s cubic-bezier(.18, .89, .32, 1.28);width: 16px;height: 16px;margin-left: -8px;margin-top: -9px;background: #fb0;box-shadow: none;}
.content-body .set-leverage-slider .iui-slider .ant-slider .ant-slider-mark{position: absolute;top: 18px;left: 0;width: 99%;font-size: 14px;line-height: 14px;}
.content-body .set-leverage-slider .iui-slider .ant-slider .ant-slider-mark .ant-slider-mark-text{position: absolute;display: inline-block;text-align: center;word-break: keep-all;cursor: pointer;font-size: 12px;color: #818693;}
.content-body .set-leverage-slider .iui-slider .ant-slider .ant-slider-mark .ant-slider-mark-text:first-child{transform: translateX(-6px);}
.content-body .set-leverage-slider .iui-slider .ant-slider .ant-slider-mark .ant-slider-mark-text.ant-slider-mark-text-active{}

.content-body .max-position-wrap{margin-top: 12px;display: flex;gap: 8px;align-items: center;}
.content-body .max-position-wrap .max-position{font-size: 14px;color: #818693;max-width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.content-body .max-position-wrap .max-position-value{font-size: 12px;color: #fff;line-height: 14px;}

.user-popup .btn-box-wrap{}
.user-popup .btn-box-wrap .btn-box{display: flex; align-items: center;gap: 8px;}
.user-popup .btn-box-wrap .btn-box .btn{line-height: 1;
    position: relative;
    display: inline-block;
    white-space: nowrap;
    text-align: center;
    background-image: none;
    cursor: pointer;
    transition: all .3s cubic-bezier(.645, .045, .355, 1);
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    touch-action: manipulation;
    padding: 0 15px;
    border-radius: 4px;
    color: rgba(0, 0, 0, .65);
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
    max-height: 100%;
    text-shadow: none;
    box-shadow: none;
    border: none;
    background: #303238;
    color: #fff;
    height: 40px;
    font-size: 14px;
    font-weight: 500;}
.user-popup .btn-box-wrap .btn-box .btn.confirm{background: #fb0;color: #000;}







/* Margin Top */
.mt-5 { margin-top: 5px !important; }
.mt-10 { margin-top: 10px !important; }
.mt-20 { margin-top: 20px !important; }
.mt-30 { margin-top: 30px !important; }
.mt-40 { margin-top: 40px !important; }
.mt-50 { margin-top: 50px !important; }
.mt-60 { margin-top: 60px !important; }
.mt-70 { margin-top: 70px !important; }
.mt-100 { margin-top: 100px !important; }
.mt-150 { margin-top: 150px !important; }
.mt-200 { margin-top: 200px !important; }

/* Margin Right */
.mr-5 { margin-right: 5px !important; }
.mr-10 { margin-right: 10px !important; }
.mr-20 { margin-right: 20px !important; }
.mr-30 { margin-right: 30px !important; }
.mr-40 { margin-right: 40px !important; }
.mr-50 { margin-right: 50px !important; }
.mr-70 { margin-right: 70px !important; }
.mr-100 { margin-right: 100px !important; }
.mr-150 { margin-right: 150px !important; }
.mr-200 { margin-right: 200px !important; }

/* Margin Bottom */
.mb-5 { margin-bottom: 5px !important; }
.mb-10 { margin-bottom: 10px !important; }
.mb-20 { margin-bottom: 20px !important; }
.mb-30 { margin-bottom: 30px !important; }
.mb-40 { margin-bottom: 40px !important; }
.mb-50 { margin-bottom: 50px !important; }
.mb-70 { margin-bottom: 70px !important; }
.mb-100 { margin-bottom: 100px !important; }
.mb-150 { margin-bottom: 150px !important; }
.mb-200 { margin-bottom: 200px !important; }

/* Margin Left */
.ml-5 { margin-left: 5px !important; }
.ml-10 { margin-left: 10px !important; }
.ml-20 { margin-left: 20px !important; }
.ml-30 { margin-left: 30px !important; }
.ml-40 { margin-left: 40px !important; }
.ml-50 { margin-left: 50px !important; }
.ml-70 { margin-left: 70px !important; }
.ml-100 { margin-left: 100px !important; }
.ml-150 { margin-left: 150px !important; }
.ml-200 { margin-left: 200px !important; }

/* Padding Top */
.pt-5 { padding-top: 5px !important; }
.pt-10 { padding-top: 10px !important; }
.pt-20 { padding-top: 20px !important; }
.pt-30 { padding-top: 30px !important; }
.pt-40 { padding-top: 40px !important; }
.pt-50 { padding-top: 50px !important; }
.pt-60 { padding-top: 60px !important; }
.pt-70 { padding-top: 70px !important; }
.pt-100 { padding-top: 100px !important; }
.pt-150 { padding-top: 150px !important; }
.pt-200 { padding-top: 200px !important; }

/* Padding Right */
.pr-5 { padding-right: 5px !important; }
.pr-10 { padding-right: 10px !important; }
.pr-20 { padding-right: 20px !important; }
.pr-30 { padding-right: 30px !important; }
.pr-40 { padding-right: 40px !important; }
.pr-50 { padding-right: 50px !important; }
.pr-70 { padding-right: 70px !important; }
.pr-100 { padding-right: 100px !important; }
.pr-150 { padding-right: 150px !important; }
.pr-200 { padding-right: 200px !important; }

/* Padding Bottom */
.pb-5 { padding-bottom: 5px !important; }
.pb-10 { padding-bottom: 10px !important; }
.pb-20 { padding-bottom: 20px !important; }
.pb-30 { padding-bottom: 30px !important; }
.pb-40 { padding-bottom: 40px !important; }
.pb-50 { padding-bottom: 50px !important; }
.pb-70 { padding-bottom: 70px !important; }
.pb-100 { padding-bottom: 100px !important; }
.pb-150 { padding-bottom: 150px !important; }
.pb-200 { padding-bottom: 200px !important; }

/* Padding Left */
.pl-5 { padding-left: 5px !important; }
.pl-10 { padding-left: 10px !important; }
.pl-20 { padding-left: 20px !important; }
.pl-30 { padding-left: 30px !important; }
.pl-40 { padding-left: 40px !important; }
.pl-50 { padding-left: 50px !important; }
.pl-70 { padding-left: 70px !important; }
.pl-100 { padding-left: 100px !important; }
.pl-150 { padding-left: 150px !important; }
.pl-200 { padding-left: 200px !important; }

.gap-8{gap: 8px;}
.gap-10{gap: 10px;}
.gap-16{gap: 16px;}

@keyframes moveAnimation {
    0% {
        transform: translate(-50%, -50%) rotate(90deg) translateY(84px);
    }
    100% {
        transform: translate(-50%, -50%) rotate(var(--rotate-end)) translateY(84px);
    }
}