@charset "UTF-8";.swap-page{margin:16px 40px;text-align:left}.swap-page .swap-banner{position:fixed;top:0;left:0;right:0;height:50px;line-height:50px;font-size:16px;gap:12px;background:linear-gradient(90deg,#07070700 0,#fb5a1f0d,#fb5a1f59,#fb5a1f0d,#07070700)}.swap-page .swap-banner:after{content:"";position:absolute;bottom:1px;left:0;right:0;height:1px;background:linear-gradient(90deg,#07070700 0,#fb5a1f1a,#fb5a1fb3,#fb5a1f1a,#07070700)}.swap-page .swap-banner .line{width:1px;height:8px;background:var(--white-10)}.swap-page .swap-banner .try{font-size:14px;color:var(--theme-color)}.swap-page .left{width:885px}.swap-page .left .operation-wrap{margin-block:16px}.swap-page .left .operation-wrap .title{font-size:20px;font-weight:500;text-align:left}.swap-page .left .operation-wrap .operation-mode{height:28px;padding:4px 8px;margin-right:4px;font-size:14px;font-weight:600;border-radius:8px;background:#ffffff0f;border:1px solid rgba(255,255,255,.0588235294);color:#ffffff80}.swap-page .left .operation-wrap .operation-mode:hover{transition:all .25s ease-in-out;color:var(--white-80)}.swap-page .left .operation-wrap .operation-mode:hover{background-color:var(--white-10);border-color:var(--white-20);transition:all .25s ease-in-out}.swap-page .left .operation-wrap .operation-mode span[role=img]{margin-left:8px;margin-right:4px;font-size:10px}.swap-page .left .operation-wrap .operation-mode span[role=img]:hover{transition:all .25s ease-in-out;color:var(--white-80)}.swap-page .left .input-output-wrap{position:relative}.swap-page .left .input-output-wrap .right-arrow{display:flex;justify-content:center;align-items:center;position:absolute;left:50%;top:50%;font-size:24px;backdrop-filter:blur(4px);background:#ffffff0f;border:8px solid #070707;border-radius:50%;height:50px;width:50px;z-index:1;transform:translate(-50%,-50%);padding:4px}.swap-page .left .input-output-wrap .right-arrow:hover{filter:brightness(3);transition:all .25s ease-in-out}.swap-page .left .input-output-wrap .selected-coin{flex:1;padding:20px;border-radius:16px;border:1px solid rgba(255,255,255,.0392156863);background-color:#ffffff0f;backdrop-filter:blur(10px)}.swap-page .left .input-output-wrap .selected-coin:first-child{margin-right:8px}.swap-page .left .input-output-wrap .selected-coin .coin-symbol{padding:4px;border-radius:8px;font-size:20px;font-weight:600}.swap-page .left .input-output-wrap .selected-coin .coin-symbol:hover{background-color:var(--white-10);border-color:var(--white-20);transition:all .25s ease-in-out}.swap-page .left .input-output-wrap .selected-coin .coin-symbol>span{margin-left:4px;margin-right:8px}.swap-page .left .input-output-wrap .selected-coin .coin-symbol>span[role=img]{font-size:12px;margin-left:0;margin-right:12px}.swap-page .left .input-output-wrap .selected-coin .balance{color:var(--white-50)}.swap-page .left .input-output-wrap .selected-coin .quick-input{border:1px solid var(--white-10);padding:4px 8px;color:var(--white-50);border-radius:6px;font-size:12px}.swap-page .left .input-output-wrap .selected-coin .quick-input:hover{transition:all .25s ease-in-out;color:var(--theme-color)}.swap-page .left .input-output-wrap .selected-coin .quick-input:hover{border-color:var(--theme-color);transition:all .25s ease-in-out}.swap-page .left .input-output-wrap .selected-coin .max{margin-left:6px;font-size:12px;padding:1px 6px;color:var(--theme-color);border-radius:4px;border:1px solid var(--theme-color);background:#ffffff0f}.swap-page .left .input-output-wrap .selected-coin .input-wrap{margin-bottom:60px}.swap-page .left .input-output-wrap .selected-coin .input-wrap .coin-total-value{color:var(--white-50);margin-top:20px}.swap-page .left .input-output-wrap .selected-coin .loading-box{height:62px;padding-inline:11px}.swap-page .left .input-output-wrap .selected-coin .loading-box .dot{width:3px;height:3px;background-color:#fff;border-radius:50%;margin:0 5px;animation:bounce 1s ease-in-out infinite}.swap-page .left .input-output-wrap .selected-coin .loading-box .dot:nth-child(2){width:6px;height:6px;animation-delay:.3s}.swap-page .left .input-output-wrap .selected-coin .loading-box .dot:nth-child(3){width:9px;height:9px;animation-delay:.7s}@keyframes bounce{0%,to{transform:scale(0);opacity:0}50%{transform:scale(1);opacity:1}}.swap-page .left .operation-btn{margin-top:16px}.swap-page .left .operation-btn>button{color:#fff;height:60px;width:420px}.swap-page .left .coin-price-reference .price-diff{width:fit-content;padding:4px 6px;border-radius:8px;background-color:#ffffff0f;font-size:14px;font-weight:500;margin-bottom:18px}.swap-page .left .coin-price-reference .price-diff .diff{font-size:12px}.swap-page .left .coin-price-reference .price-diff .diff.up{color:var(--green-color)}.swap-page .left .coin-price-reference .price-diff .diff.down{color:#ec5a7d}.swap-page .left .coin-price-reference .charts{width:100%}.swap-page .right{flex:1;margin-top:16px;margin-left:20px;padding:8px 20px 20px;border-radius:16px;border:1px solid rgba(255,255,255,.0392156863);background-color:#ffffff0f;backdrop-filter:blur(10px)}.swap-page .right>:nth-child(5):hover{transition:all .25s ease-in-out;color:var(--white-50)}.swap-page .right .info-col{border-bottom:1px solid rgba(255,255,255,.1);margin-top:20px}.swap-page .right .info-col .coin-list{flex:1}.swap-page .right .info-col .coin-list .routing-line{position:absolute;left:56px;right:56px;top:50%;height:1px;border-top:1px dashed #2D2D2D}.swap-page .right .info-col:last-child{border-bottom:none}.swap-page .right .info-col .title{font-size:16px;color:#ffffff80;line-height:24px}.swap-page .right .info-col .title img{margin-right:8px}.swap-page .right .info-col .value{margin-top:10px;margin-bottom:20px;line-height:24px;font-size:20px;font-weight:500}.swap-page .right .info-col .secondary-btn{padding-inline:8px;background:#e6dbd70f;border:1px solid rgba(255,255,255,.1019607843);border-radius:8px;font-size:14px;line-height:25px;font-weight:500;color:#fb5a1f}.swap-page .right .info-col .diff.up{color:var(--green-color)}.swap-page .right .info-col .diff.down{color:#ec5a7d}.swap-page .right-welcome{flex:1}.swap-page .right-welcome .guide{padding:28px 16px;margin-top:16px;margin-left:20px;border-radius:16px;border:1px solid rgba(255,255,255,.0392156863);background-color:#ffffff0f;backdrop-filter:blur(10px)}.swap-page .right-welcome .guide-1 .title{font-weight:400;font-size:16px;color:var(--white-50)}.swap-page .right-welcome .guide-1 .text{margin-top:20px;color:var(--white);font-size:32px}.swap-page .right-welcome .guide-2 .title{color:var(--white);font-size:20px}.swap-page .right-welcome .guide-2 .step-list{margin-top:20px;gap:32px;position:relative}.swap-page .right-welcome .guide-2 .step-list .step-item{gap:8px;position:relative;z-index:1}.swap-page .right-welcome .guide-2 .step-list .step-item:not(:last-child):before{border-left:1px dashed var(--white-30);content:"";width:1px;position:absolute;left:10px;top:20px;height:calc(100% + 12px)}.swap-page .right-welcome .guide-2 .step-list .step-item .step-icon{width:20px;height:20px;text-align:center;border-radius:50%;background:var(--white-30);font-size:12px;line-height:20px;font-weight:600;color:#101010}.swap-page .right-welcome .guide-2 .step-list .step-item .step-text{flex:1;font-size:16px;color:var(--white-30);font-weight:400}.swap-page .right-welcome .guide-2 .step-list .step-item .step-text b{font-weight:600}@media (max-width: 1440px){.swap-page{flex-direction:column}.swap-page .left{width:100%}.swap-page .right,.swap-page .right-welcome .guide{margin-left:0}}@media (max-width: 720px){.swap-page{margin:16px 20px}.swap-page .swap-banner{align-items:center;font-size:12px}.swap-page .left .input-output-wrap{flex-direction:column}.swap-page .left .input-output-wrap .selected-coin:first-child{margin-right:0;margin-bottom:8px}.swap-page .left .input-output-wrap .selected-coin .input-wrap{margin-bottom:28px}.swap-page .left .input-output-wrap .right-arrow{transform-origin:center center;transform:rotate(90deg) translate(-50%,50%)}}