body,html{margin: 0px;}
.active{color: #09f !important;font-weight: bold}
.header{height: 80px}
.main{width: 1200px;margin: 0 auto;}
.logo{height: 50px;margin: 15px 0;}
.menu{float: right;height: 80px;line-height: 80px}
.menu a{font-size: 18px;margin-right: 27px;color: #333;text-decoration: none}
.menu a:hover{color: #09f}
.menu button{background: #4587FF;color: #fff;border-radius: 30px;padding: 10px 20px;border:none;font-size: 17px;border:solid 1px #4587FF}
.menu button:hover{background: #fff;color: #4587FF;}
.banner{background: url("../img/index_banner.jpg");min-height: 500px;text-align: center;padding-bottom:40px;position:relative;}
.banner .banner_img{margin-top: 100px}
.input{margin-top: 50px}
.input .url{width: 730px;
    height: 60px;
    line-height: 60px;
    background: white;
    padding: 0 20px;
    font-size: 20px;
    color: #333;
    border:none;
    vertical-align: text-top;
    outline:none;
    border-radius: 10px 0px 0px 10px;
}


.input .url2{width: 800px;
    height: 60px;
    line-height: 60px;
    background: white;
    padding: 0 20px;
    font-size: 20px;
    color: #333;
    border:none;
    vertical-align: text-top;
    outline:none;
    border-radius: 10px;
}

.input .url3{width: 318px;
    height: 60px;
    line-height: 60px;
    background: white;
    padding: 0 20px;
    font-size: 20px;
    color: #333;
    border:none;
    vertical-align: text-top;
    outline:none;
    display: inline-block;
}
.input .search-btn{width: 150px;
    height: 100%;
    background: linear-gradient(-90deg,rgba(84,124,255,1) 0%,rgba(92,197,253,1) 100%);
    color: white;
    font-size: 20px;
    cursor: pointer;
    display: inline-block;
    vertical-align: text-top;
    height: 60px;
    line-height: 60px;
    border-radius: 0px 10px 10px 0px;
}
.input label{font-size: 20px}
.title{text-align: center;font-size: 40px;font-weight: bold;padding-top: 150px}
.intro{font-size: 18px;text-align: center;margin-top: 20px}
.bboxs{margin-top: 50px}
.box{width: calc(25% - 24px);display: inline-flex;align-items: center;text-align: left;margin: 12px 12px;padding: 22px 20px;background: #fff;border-radius: 12px;box-shadow: 0 2px 12px rgba(0,0,0,0.06);vertical-align: top;transition: box-shadow .3s;box-sizing: border-box}
.box:hover{box-shadow: 0 4px 20px rgba(0,0,0,0.12)}
.box img{width: 48px;height: 48px;margin-right: 16px;flex-shrink: 0}
.box .btext{flex: 1;min-width: 0}
.box .btitle{font-weight: bold;font-size: 15px;color: #333}
.box .bintro{color:#8c96a0;font-size: 12px;margin-top: 4px;line-height: 1.4;white-space:nowrap}
.bbox{width: 50%;display: inline-block;vertical-align: top;margin-top: 20px;}
.bbox img{max-width: 100%}
.bbox .xtitle{font-size: 40px;font-weight: bold;margin-top: 100px;color: #12263C}
.bbox .xtitle2{font-size: 20px;font-weight: bold;margin-top: 45px;color: #4587FF}
.bbox .xintro{font-size: 18px;margin-top: 25px;color: #00133B;line-height: 25px}
.banner2{height: 284px;background: url("../img/index_banner2.jpg");text-align: center;}
.ntitle{font-weight: bold;color: #fff;font-size: 50px;padding-top: 70px}
.bbutton{background: #fff;border: solid 1px #fff;color: #09f;font-size: 18px;padding: 10px 50px;border-radius: 30px;display: inline-block;margin-top: 30px;cursor: pointer;}
.bbutton:hover{color: #fff;background: rgb(69,154,245);}
.footer{background: #040B22;height: 400px;color: #999;padding-top: 100px}
.l1{width: 20%;display: inline-block;vertical-align: top;}
.l2{width: 50%;display: inline-block;vertical-align: top;}
.l3{width: 30%;display: inline-block;vertical-align: top;}
.logos{margin-top: 20px}
.logos img{width: 120px;margin-right: 25px}
.copyright{font-size: 15px;margin-top: 30px}
.copyright a{color: #999}
.short_box{width:880px;border-radius: 15px;background: #fff;color: #333;display:block!important;visibility:hidden;opacity:0;box-shadow: 0 10px 40px rgba(0,0,0,0.2);padding:20px;text-align:left;position:absolute;left:50%;transform:translateX(-50%);z-index:100;transition:opacity .3s,visibility .3s;margin-top:10px}
.short_box .urlinfo{display:inline-block;vertical-align: top;margin-left: 20px;width: calc(100% - 150px);padding-top: 15px}
.short_box img{width: 90px;}
.short_box .creat_time{float: right;margin-top: 0px;}
.short_box .long_url{color:#999;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.login_btn{background: #fff;border: solid 1px #4587FF;border-radius: 10px;display: inline-block;float: right;color:#4587FF;padding:10px 20px;margin-top:-50px;cursor:pointer}
.login_btn:hover{background:#4587FF;color:#fff;}
.copy-button{font-size: 12px;padding: 0 5px;border-radius: 5px;border:solid 1px #4587FF;background:#4587FF;color:#fff;display: inline-block;cursor:pointer}
.copy-button:hover{background: #fff;color: #4587FF}
table{background: #f7f7f7;margin-bottom: 10px;width: 100%}
th{text-align: left;border-bottom: solid 1px #DDD;padding: 10px}
td{border-bottom: solid 1px #EEE;padding: 10px}
/* Remove blue focus outline on click */
a:focus,button:focus,.btn:focus,.btn:active:focus,.btn.active:focus,input:focus,select:focus,textarea:focus{outline:none!important;outline-offset:0!important}


to{opacity:1;transform:translateX(-50%) translateY(0)} }

to{opacity:1;transform:translateX(-50%) translateY(0)} }

/* Feature detail popup - Mobile */
.feature-popup { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:9999; justify-content:center; align-items:center; }
.feature-popup.show { display:flex; }
.feature-popup-content { background:#fff; border-radius:16px; padding:24px 20px; margin:0 24px; max-width:340px; width:100%; position:relative; animation:popIn 0.25s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes popIn { from{transform:scale(0.85);opacity:0} to{transform:scale(1);opacity:1} }
.feature-popup-title { font-size:18px; font-weight:bold; color:#333; margin-bottom:12px; display:flex; align-items:center; gap:8px; }
.feature-popup-title::before { content:""; display:inline-block; width:4px; height:20px; background:#4587FF; border-radius:2px; }
.feature-popup-detail { font-size:14px; color:#666; line-height:1.8; }
.feature-popup-close { position:absolute; top:12px; right:16px; font-size:22px; color:#999; cursor:pointer; line-height:1; padding:4px; }

/* Feature detail hover popup - PC */
.box[data-detail] { cursor: pointer; position: relative; transition: transform 0.15s, box-shadow 0.15s; }
.box[data-detail]:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.box[data-detail]::after { content: attr(data-detail); display: none; position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); background: #fff; border-radius: 10px; padding: 16px 20px; min-width: 280px; max-width: 360px; box-shadow: 0 8px 24px rgba(0,0,0,0.15); font-size: 14px; color: #555; line-height: 1.8; z-index: 9999; white-space: normal; text-align: left; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; font-weight: normal; }
.box[data-detail]::before { content: ""; display: none; position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #fff; z-index: 10000; }
.box[data-detail]:hover::after, .box[data-detail]:hover::before { display: block; animation: dropIn 0.25s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes dropIn { from{opacity:0;transform:translateX(-50%) translateY(8px)} to{opacity:1;transform:translateX(-50%) translateY(0)} }