@charset "UTF-8";:root{--primary-color: #eb6329;--primary-hover: #d55a24;--primary-light: #fef0ec;--success-color: #67c23a;--info-color: #909399;--warning-color: #e6a23c;--danger-color: #f56c6c;--text-primary: #303133;--text-regular: #606266;--text-secondary: #909399;--border-color: #dcdfe6;--border-light: #e4e7ed;--background: #f5f7fa;--white: #ffffff;--shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1);--shadow-base: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);--shadow-dark: 0 4px 12px rgba(0, 0, 0, 0.15);}
body{font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;margin: 0;padding: 0;background-color: var(--background);color: var(--text-regular);line-height: 1.6;}
body{min-width: 0;}
.pagebg{position: fixed !important;top: 0;left: 0;width: 100%;height: 100%;z-index: 1 !important;background: url(../image/pagebg.jpg) no-repeat center bottom;background-size: 1920px auto;opacity: 0.8;}
#Home{padding: 0;position: relative;z-index: 10;max-width: 1200px;margin: 20px auto;}
/* 绘图区域样式*/#graphic{background: var(--white);border: 1px solid var(--border-light);display: flex;align-items: center;justify-content: center;padding: 1rem;}
.canvas-container{width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;}
#main{width: 100%;height: 100%;min-height: 400px;display: flex;align-items: center;justify-content: center;}
/* 配置区域样式*/#inputData{background: var(--white);display: flex;flex-direction: column;}
#inputData .card{border: none;border-radius: 0;box-shadow: none;background: var(--white);height: 100%;display: flex;flex-direction: column;}
.card-header{border-radius: 0 !important;border-bottom: 1px solid var(--border-light);background: linear-gradient(340deg, #d7d7d7 0%, #ffffff 100%);color: var(--white);padding: 1rem;flex-shrink: 0;}
.card-header .btn{border-radius: 4px;font-weight: 500;transition: all 0.3s ease;border: 1px solid rgba(255, 255, 255, 0.3);background: rgba(255, 255, 255, 0.1);color: var(--white);padding: 0.5rem 1rem;}
.card-header .btn:hover{background: rgba(255, 255, 255, 0.2);border-color: rgba(255, 255, 255, 0.5);transform: translateY(-1px);box-shadow: var(--shadow-dark);}
.card-header .btn.btn-success{background: var(--success-color);border-color: var(--success-color);}
.card-header .btn.btn-info{background: var(--info-color);border-color: var(--info-color);}
.card-header .btn.btn-primary{background: var(--primary-color);border-color: var(--primary-color);}
.card-body{flex: 1;overflow-y: auto;padding: 0;}
.nav-pills{border-bottom: 1px solid var(--border-light);margin: 0;padding: 0 1rem;}
.nav-pills .nav-link{border-radius: 0;margin: 0;transition: all 0.3s ease;color: var(--text-regular);border: none;padding: 1rem 1.5rem;font-weight: 500;background-color: transparent;border-bottom: 2px solid transparent;}
.nav-pills .nav-link:hover{color: var(--primary-color);background-color: var(--background);}
.nav-pills .nav-link.active{color: var(--primary-color);font-weight: bold;background-color: transparent;border-bottom-color: var(--primary-color);}
.tab-content{padding: 1.5rem;flex: 1;overflow-y: auto;}
.form-floating{margin-bottom: 1rem;}
.form-control,
.form-select{border-radius: 4px;border: 1px solid var(--border-color);transition: all 0.3s ease;padding: 0.75rem;font-size: 0.875rem;}
.form-control:focus,
.form-select:focus{border-color: var(--primary-color);box-shadow: 0 0 0 2px rgba(235, 99, 41, 0.2);outline: none;}
.form-control:hover,
.form-select:hover{border-color: var(--primary-color);}
.form-label{color: var(--text-regular);font-weight: 500;}
.input-group-text{border-radius: 4px 0 0 4px;background-color: var(--background);border-color: var(--border-color);color: var(--text-regular);font-weight: 500;}
.container{padding-left: 0;}
.color-container{overflow-x: auto;padding: 1rem 0;border: 1px solid var(--border-light);border-radius: 4px;background: var(--background);}
.color-container::-webkit-scrollbar{height: 6px;}
.color-container::-webkit-scrollbar-thumb{background-color: var(--border-color);border-radius: 3px;}
.color-container::-webkit-scrollbar-track{background-color: var(--background);border-radius: 3px;}
.color-list{gap: 0.75rem;flex-wrap: nowrap;padding: 0 1rem;}
.color-list .btn{border-radius: 4px;font-size: 0.875rem;padding: 0.5rem 0;transition: all 0.3s ease;border: 1px solid var(--border-color);background: var(--white);color: var(--text-regular);font-weight: 500;width: 55px;}
.color-list .btn:hover{border-color: var(--primary-color);color: var(--primary-color);background: var(--primary-light);transform: translateY(-1px);box-shadow: var(--shadow-light);}
.color-list .btn.btn-outline-primary{border-color: var(--primary-color);color: var(--primary-color);}
.color-list .btn.btn-outline-primary:hover{background: var(--primary-color);color: var(--white);}
.sp-replacer{background-color: var(--white);border-color: var(--border-color);border-radius: 0 4px 4px 0;border-left: none;}
.sp-choose,
.sp-cancel{display: inline-block !important;font-weight: 500 !important;text-align: center !important;background-color: transparent;padding: 0.5rem 0.75rem !important;font-size: 0.875rem !important;line-height: 1 !important;border-radius: 4px;transition: all 0.3s ease;border: 1px solid var(--border-color);color: var(--text-regular);}
.sp-choose{background: var(--primary-color) !important;color: var(--white) !important;border-color: var(--primary-color) !important;}
.sp-cancel{background: var(--white) !important;color: var(--text-regular) !important;}
.sp-choose:hover{background: var(--primary-hover) !important;border-color: var(--primary-hover) !important;}
.sp-cancel:hover{background-color: var(--background) !important;border-color: var(--primary-color) !important;color: var(--primary-color) !important;}
#introduce .card{border: 1px solid var(--border-light);border-radius: 4px;box-shadow: var(--shadow-base);margin-top: 1rem;background: var(--white);}
#introduce .bg-info{border-bottom: 1px solid var(--border-light);font-size: 16px;font-weight: bold;color: var(--primary-color) !important;}
.alert{border-radius: 4px;border: 1px solid var(--border-light);background: var(--white);color: var(--text-regular);padding: 1rem;margin-bottom: 0;}
.alert.alert-info{border: none;}
.form-range{height: 6px;border-radius: 3px;background: var(--border-light);}
.form-range::-webkit-slider-thumb{background: var(--primary-color);border-radius: 50%;box-shadow: var(--shadow-light);border: 2px solid var(--white);width: 18px;height: 18px;}
.form-range::-moz-range-thumb{background: var(--primary-color);border-radius: 50%;box-shadow: var(--shadow-light);border: 2px solid var(--white);width: 18px;height: 18px;}
/* 自定义滚动条*/::-webkit-scrollbar{width: 8px;height: 8px;}
::-webkit-scrollbar-track{background: var(--background);border-radius: 4px;}
::-webkit-scrollbar-thumb{background: var(--border-color);border-radius: 4px;}
::-webkit-scrollbar-thumb:hover{background: var(--text-secondary);}
/* 表单样式优化*/.form-floating{margin-bottom: 1rem;}
.form-control,
.form-select{border-radius: 4px;border: 1px solid var(--border-color);transition: all 0.3s ease;padding: 0.75rem;font-size: 0.875rem;}
.form-control:focus,
.form-select:focus{border-color: var(--primary-color);box-shadow: 0 0 0 2px rgba(235, 99, 41, 0.2);outline: none;}
.form-control:hover,
.form-select:hover{border-color: var(--primary-color);}
.form-label{color: var(--text-regular);font-weight: 500;}
.input-group-text{border-radius: 4px 0 0 4px;background-color: var(--background);border-color: var(--border-color);color: var(--text-regular);font-weight: 500;}
/* 颜色选择器样式优化*/.color-container{overflow-x: auto;padding: 1rem 0;border: 1px solid var(--border-light);border-radius: 4px;background: var(--background);}
.color-container::-webkit-scrollbar{height: 6px;}
.color-container::-webkit-scrollbar-thumb{background-color: var(--border-color);border-radius: 3px;}
.color-container::-webkit-scrollbar-track{background-color: var(--background);border-radius: 3px;}
.color-list{gap: 0.75rem;flex-wrap: nowrap;padding: 0 1rem;}
.color-list .btn{border-radius: 4px;font-size: 0.875rem;padding: 0.5rem 0;transition: all 0.3s ease;border: 1px solid var(--border-color);background: var(--white);color: var(--text-regular);font-weight: 500;width: 55px;}
.color-list .btn:hover{border-color: var(--primary-color);color: var(--primary-color);background: var(--primary-light);transform: translateY(-1px);box-shadow: var(--shadow-light);}
.color-list .btn.btn-outline-primary{border-color: var(--primary-color);color: var(--primary-color);}
.color-list .btn.btn-outline-primary:hover{background: var(--primary-color);color: var(--white);}
/* 动画效果*/.btn,
.nav-link,
.form-control,
.form-select{transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);}
/* 焦点状态优化*/.form-control:focus,
.form-select:focus{transform: translateY(-1px);}
/* 按钮组样式优化*/.input-group .form-control:not(:first-child){border-left: 0;}
.input-group .form-control:not(:last-child){border-right: 0;}
/* 标签页内容动画*/.tab-pane{transition: opacity 0.3s ease-in-out;}
.tab-pane.fade{opacity: 0;}
.tab-pane.fade.show{opacity: 1;}
.BoxCont{border-radius: 10px;background: #fff;clear: both;margin-top: 20px;padding: 20px;}
.Mtitle{line-height: 35px;span{font-size: 20px;font-weight: bold;}}
.plbox{overflow: hidden;}
.s-bg{display: block;width: 100%;margin: 15px auto 0;border-radius: 0;padding: 0 2px;box-sizing: border-box;}
.s-bg img{width: 100%;height: 100%;transition: all 0.4s ease;border-radius: 0;}
.s-bg:hover img{transform: scale(1.05);}
.s-bg:after{content: "";width: 21px;height: 13px;position: absolute;right: 5px;bottom: 5px;display: block;background: url(//pbmp.ali213.net/Pics/galig213icon.png) no-repeat center;}
/* 响应式优化*/@media (max-width: 991px){#Home{padding: 0;}
#graphic{min-height: 50vh;order: 1;}
#inputData{min-height: 50vh;order: 2;}
.canvas-container{min-height: 350px;}
#main{min-height: 350px;}
.card-header .row{flex-direction: column;gap: 0.75rem;}
.card-header .col-12{width: 100%;}
.card-header .btn{width: 100%;margin-bottom: 0.5rem;}
.nav-pills{flex-direction: column;}
.nav-pills .nav-link{margin: 0;text-align: center;border-bottom: 1px solid var(--border-light);}
.nav-pills .nav-link.active{border-bottom-color: var(--primary-color);}
.color-list{justify-content: center;flex-wrap: wrap;}
.form-floating{margin-bottom: 1rem;}}
@media (min-width: 992px){#Home{padding: 0;}
#graphic{order: 1;}
#inputData{order: 2;}
.canvas-container{min-height: 500px;max-width: 600px;}
#main{min-height: 500px;max-width: 600px;}
.card-header .row{flex-direction: row;}
.nav-pills{flex-direction: row;}
.nav-pills .nav-link{margin: 0;text-align: center;}}
@media (min-width: 1200px){.canvas-container{min-height: 600px;max-width: 700px;}
#main{min-height: 600px;max-width: 700px;}}
@media (max-width: 750px){.nyfmt,.ali-index-bg, .GameIndexNav, .index_body_foot, .header{display: none;}

.head_3g2020, .SyFooter{display: block !important;}
.index-container{background: #f5f5f5 url(https://app.ali213.net/2025/images/bg.png) no-repeat top;background-size: 100%;}}
.SyFooter{text-align: center;margin: 3%;font-size: 12px;position: relative;z-index:2 ;}
.SyFooter .FooterTop{display: block;}
.SyFooter .FooterTop img{width: 15%;height: auto;border-radius: 15%;margin: 2% auto;display: block;}
.SyFooter .FooterTop strong{display: block;margin: 0 auto 1.5%;font-size: 1.8em;color: #333;}
.SyFooter p{width: 100%;line-height: 2em;font-size: 1.2em;color: #1e1e1e;}
.head_3g2020{position: relative;width: 100%;margin: auto;z-index: 9;}
.head_3g-top{display: flex;align-items: center;justify-content: space-between;width: 100%;box-sizing: border-box;overflow: hidden;}
.head_3g-logo{width: 60px;height: 60px;margin: 12px;}
.head_3g-logo img{width: 100%;height: 100%;}
.head_3g-logo .head_3g-top{flex: 1;height: 60px;border-radius: 30px;background: #fff;display: flex;}
.searchBox{flex: 1;height: 50px;line-height: 50px;min-width: 0;float: left;color: #333;margin: 0 12px;background: #fff;border-radius: 30px;}
.searchBox .head_3g-form{display: flex;}
.searchBox .head_3g-form .search-input{background: none;padding: 0 10px;flex: 1;min-width: 0;line-height: 50px;height: 50px;}
.searchBox .search-input::placeholder{color: #c0c1c0;}
.head_3g2020 .searchBox .search-submit{background: #f00;font-size: 16px;     line-height: 46px;color: #fff;float: right;height: 46px;width: 60px;min-width: 60px;border-radius: 30px;text-align: center;margin: 2px;}
.head_3g2020 .head_3g-top .head_3g-more{background: url(https://app.ali213.net/2025/images/icon_menu.png) no-repeat center;background-size: 100%;width:46px;height:46px;margin-right: 12px;}
.head_3g2020 .head_3g-top .head_3g-logo,.head_3g2020 .head_3g-top .head_3g-logo img{width: 50px;height: 50px;}
.head_3g2020 .head_3g-con{margin: 0 auto;position: absolute;z-index: 10;border-radius: 10px;width: 100%;height: auto;padding-bottom: 0;box-shadow: 0 4px 6px rgba(0,0,0,.1);box-sizing: border-box;padding: 15px 0;background: #fff;}
.head_3g-icon{display: flex;align-items: center;justify-content: flex-start;flex-wrap: wrap;width: 100%;margin: auto;}
.head_3g-icon a{width: 25%;margin: 0 0 5px;display: block;font-size: 18px;line-height: 28px;color: #595959;flex-grow: 1;text-align: center;}
.head_3g-icon a div{width: 48px;height: 48px;display: flex;align-items: center;justify-content: center;margin: 0 auto 12px;}
.head_3g-icon a img{width: 30px;}

.alert-warning{border: none;}
.modal-dialog{top: 50%;margin-top: -250px;}

.index-container .ali-nav-bg {
    width: 1360px;
    position: absolute;
    top: -127px;
    left: -80px;
    margin: auto;
    z-index: 2;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto;
}

.index-container .ali-index-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
    z-index: 5;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto;
}

.index-container .ali-index-bg a {
    display: block;
    width: 100%;
    height: 100%;
}

.index-container .ali-index-bg span {
    position: absolute;
    top: 155px;
    right: 5px;
    display: block;
    background: url(../image/close.png) no-repeat center right;
    width: 80px;
    height: 21px;
    line-height: 21px;
    cursor: pointer;
}

@media screen and (max-width: 1800px) {
    .index-container .ali-index-bg {
        background-size: 120% auto;
    }
}