@charset "utf-8";

@media(min-width: 1024px) {
    /*#wrap #app{margin:0 0 0 50vw;border-left:1px solid #f0f0f0;border-right:1px solid #f0f0f0;width:500px;max-width:100%;}*/
    /*#wrap #aside{position:fixed;display:block;top:0;bottom:0;left:50%;margin-left: -550px;width:500px;padding:40px 0;}*/
}

/**/
#wrap{max-width: 100%;min-height: calc(var(--vh, 1vh)* 100);}
#aside{display:none;}
#app{position:relative;min-height:calc(var(--vh, 1vh) * 100);background:#fff;display:flex;flex-direction:column;margin:0 auto;width:500px;max-width:100%;}

/**/
#header{position:sticky;z-index:1001;top:0;flex-shrink:0;display:flex;align-items:center;height:56px;padding:0 16px;background:#ffffff;}
#header .logo{margin-right:8px;}
#header .logo a{display:block}
#header .logo img{display:block;width:32px;height:32px;object-fit:contain;}
#header .search{margin:0 auto;width:100%;height:56px;display:flex;align-items:center;}
#header .search .form{width:100%;height:40px;display:flex;align-items:center;border-radius:8px;border:1px solid #1d2a53;background:#ffffff;}
#header .search .input{display:block;width:100%;height:38px;background:transparent;padding:4px 12px;font-size:12px;color:#1d2a53;}
#header .search .submit{display:block;margin:0 12px 0 0;width:20px;height:20px;background:transparent;flex-shrink:0;}
#header .search .submit img{display:block;width:100%;height:100%;object-fit:contain;}
#header .search .close{display:none;margin:0 8px 0 0;width:16px;height:16px;align-items:center;justify-content:center;background:transparent;flex-shrink:0;cursor:pointer;}
#header .search .reset{display:none;margin:0 8px 0 0;width:20px;height:20px;align-items:center;justify-content:center;background:transparent;flex-shrink:0;cursor:pointer;}
#header .search.is-active{position:fixed;top:0;left:50%;width:100%;padding:0 16px;background:#fff;z-index:2;max-width:500px;transform:translateX(-50%);}
#header .search.is-active .close{display:flex;}
#header .search.is-active .reset{display:flex;}
#header .menu{margin-left:8px;display:flex;gap:8px;}
#header .menu a{display:flex;align-items:center;justify-content:center;}
#header .menu a img{width:32px;height:32px;}

/**/
#searchAuto{position:fixed;top:56px;left:0;bottom:0;width:100%;background:#f8f8f8;padding:16px 24px;opacity:0;visibility:hidden;height:calc(100vh - 56px);}
#searchAuto.is-active{opacity:1;visibility:visible;}
#searchAuto .tit{margin-bottom:12px;line-height:16px;font-size:10px;color:#7c7e84;}
#searchAuto .con{}
#searchAuto .con ul{display:flex;flex-direction:column;gap:8px;}
#searchAuto .con li{}
#searchAuto .con li .link{display:flex;align-items:center;height:17px;}
#searchAuto .con li .link:active{position:relative;top:2px;background:#f8f8f8;}
#searchAuto .con li .number{margin:0 2px 0 0;font-size:14px;min-width:64px;letter-spacing:-1px;color:#3a3a3a;}
#searchAuto .con li .number .bold{color:#FFAB5E;}
#searchAuto .con li .name{flex:1;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;font-size:14px;color:#3a3a3a}
#searchAuto .con li .name .bold{color:#FFAB5E;}
#searchAuto .con li .type{margin:0 0 0 16px;font-size:12px;color:#7c7e84;}

/**/
#appbar{position:sticky;bottom:0;z-index:999;flex-shrink:0;background:#fff;box-shadow: 2px -1px 4px rgba(0,0,0,0.06);}
#appbar ul{display:flex;height:54px;}
#appbar li{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;}
#appbar li a{display:flex;flex-direction:column;align-items:center;justify-content:center;}
#appbar li i{display:block;margin:0 auto;width:28px;height:28px;}
#appbar li i.appbar_home{background:url("../images/appbar_home.svg") no-repeat 50% 50% / contain;}
#appbar li i.appbar_stock{background:url("../images/appbar_stock.svg") no-repeat 50% 50% / contain;}
#appbar li i.appbar_stock_portfolio{background:url("../images/appbar_portfolio.svg") no-repeat 50% 50% / contain;}
#appbar li i.appbar_etf_portfolio{background:url("../images/appbar_product.svg") no-repeat 50% 50% / contain;}
#appbar li i.appbar_diagnosis{background:url("../images/appbar_diagnosis.svg") no-repeat 50% 50% / contain;}
#appbar li span{line-height:12px;font-size:12px;font-weight:500;color:#ced3de;}
#appbar li.is-active i.appbar_home{background:url("../images/appbar_home_on.svg") no-repeat 50% 50% / contain;}
#appbar li.is-active i.appbar_stock{background:url("../images/appbar_stock_on.svg") no-repeat 50% 50% / contain;}
#appbar li.is-active i.appbar_stock_portfolio{background:url("../images/appbar_portfolio_on.svg") no-repeat 50% 50% / contain;}
#appbar li.is-active i.appbar_etf_portfolio{background:url("../images/appbar_product_on.svg") no-repeat 50% 50% / contain;}
#appbar li.is-active i.appbar_diagnosis{background:url("../images/appbar_diagnosis_on.svg") no-repeat 50% 50% / contain;}
#appbar li.is-active span{color:#1d2a53;}

/**/
#container{flex:1;display:flex;flex-direction:column;overflow-y:auto;}

/**/
#footer{padding:40px 16px 56px;display:flex;flex-direction:column;gap:6px;    background: #f8f8f8;}
#footer .flex{display:flex;}
#footer .flex span{display:flex;align-items:center;line-height:16px;font-size:12px;color:#7c7e84;gap:4px;}
#footer .flex span:after{content:'';width:1px;height:8px;background:#ededed;margin:0 6px;}
#footer .flex span:last-child:after{display:none;}

/**/
#heading{position:relative;z-index:101;top:0;left:0;width:100%;background:#ffffff;display:flex;height:56px;align-items:center;justify-content:center;padding:0 56px;}
#heading .h2{line-height:28px;font-size:20px;font-weight:600;color:#1d2a53;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;}
#heading .prev{position:absolute;top:0;left:0;padding:13px;}
#heading .prev a{display:flex;align-items:center;justify-content:center;}
#heading .prev img{width:24px;height:24px;display:block;}

/**/
#search_engine{margin:40px 16px;padding:24px;border-radius:16px;background:#eff3ff;display:flex;align-items:center;}
#search_engine:nth-last-of-type(1),
#search_engine:last-of-type{margin-bottom:0 !important;}
#search_engine .con{flex:1;display:flex;flex-direction:column;align-items:flex-start;text-align:left;}
#search_engine .img{flex-shrink:0;width:94px;height:94px;}
#search_engine .img img{display:block;width:100%;height:100%;object-fit:contain}
#search_engine .tit{display:block;line-height:20px;font-size:18px;font-weight:700;color:#1d2a53;}
#search_engine .txt{display:block;line-height:22px;font-size:16px;font-weight:400;color:#3a3a3a;margin:8px 0 0 0;}
#search_engine .txt span{font-weight:700;color:#3582f5;}
#search_engine > .txt{flex:1;}

/**/
#main{position:relative;background:#f8f8f8;}
#main .realtime{display:flex;height:44px;padding: 8px 16px;align-items:center;border-bottom:1px solid #ededed;}
#main .realtime .title{flex-shrink:0;margin-right:8px;line-height:16px;font-size:12px;font-weight:700;color:#1d2a53;}
#main .realtime .content{display:block;width: 100%;white-space: nowrap;overflow:hidden;}
#main .realtime .content .swiper-wrapper{-webkit-transition-timing-function:linear!important;    transition-timing-function:linear!important;position: relative;}
#main .realtime .content .desc{width:auto;display:inline-flex;align-items:center;margin:0 8px 0 0;gap:4px;white-space:nowrap;}
#main .realtime .content .name{line-height:16px;font-size:12px;font-weight:500;color:#3a3a3a;}
#main .realtime .content .price{line-height:16px;font-size:12px;font-weight:600;color:#3a3a3a;}
#main .realtime .content .variation{displaY:flex;align-items:center;line-height:16px;font-size:12px;font-weight:400;color:#3a3a3a;}
#main .realtime .content .variation.up{color:#F15050;}
#main .realtime .content .variation.up:before{content:'';flex-shrink:0;width:8px;height:8px;background:url("../images/icon_caret_up_color.svg") no-repeat 50% 50% / contain}
#main .realtime .content .variation.down{color:#3582f5;}
#main .realtime .content .variation.down:before{content:'';flex-shrink:0;width:8px;height:8px;background:url("../images/icon_caret_down_color.svg") no-repeat 50% 50% / contain}
#main .banner{padding:16px;overflow:hidden;}
#main .banner a{display:block;border-radius:12px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,0.08);}
#main .banner img{width:100%;height:100%;}
#main .main1{padding:16px;}
#main .main1 .head{display:flex;margin-bottom:16px;align-items:center;justify-content:space-between;}
#main .main1 .head .title{display:flex;align-items:center;justify-content:space-between;}
#main .main1 .head .title > img{margin-right:4px;width:16px;height:22px;object-fit:contain;flex-shrink:0;}
#main .main1 .head .title > span{line-height:24px;font-size:18px;font-weight:700;color:#1d2a53;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;letter-spacing:-1px;}
#main .main1 .head .title > span em{color:#FFAB5E;}
#main .main1 .head .title > a{margin-left:8px;display:block;}
#main .main1 .head .title > a img{display:block;width:16px;height:16px;object-fit:contain}
#main .main1 .head .more{}
#main .main1 .head .more a{display:flex;align-items:center;justify-content:center;font-size:12px;color:#7c7e84;white-space:nowrap;}
#main .main1 .head .more a img{margin-top:-1px;}
#main .main1 .content1{padding:16px;border-radius:12px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,0.08);}
#main .main1 .content1 .rate{margin-bottom:16px;}
#main .main1 .content1 .rate ul{display:flex;gap:8px;}
#main .main1 .content1 .rate li{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:8px;background:#f8f8f8;padding:16px;text-align:center;}
#main .main1 .content1 .rate li .tit{line-height:20px;font-size:14px;font-weight:600;color:#3a3a3a;margin-bottom:4px;}
#main .main1 .content1 .rate li .txt{line-height:20px;font-size:14px;font-weight:500;color:#3a3a3a;}
#main .main1 .content1 .rate li .txt span{font-size:18px;font-weight:700;}
#main .main1 .content1 .rate li .txt.up span{color:#f15050;}
#main .main1 .content1 .rate li .txt.down span{color:#3582f5;}
#main .main1 .content1 .graph{margin-bottom:16px;}
#main .main1 .content1 .graph img{display:block;width:100%;height:100%;object-fit:contain}
#main .main1 .content1 .text{margin-top:16px;text-align:center;line-height:18px;font-size:12px;font-weight:500;color:#3a3a3a;}
#main .main1 .content2{margin:24px 0 0 0;padding:16px;border-radius:12px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,0.08);text-align:center;}
#main .main1 .content2 .title{margin-bottom:8px;line-height:16px;font-size:14px;font-weight:600;color:#3a3a3a;}
#main .main1 .content2 .text{margin-bottom:16px;line-height:28px;font-size:20px;font-weight:800;color:#1d2a53;}
#main .main1 .content2 .text span{font-size:28px;line-height:1;color:#ffab5e;}
#main .main1 .content2 .res{margin-bottom:16px;}
#main .main1 .content2 .res ul{display:flex;gap:8px;}
#main .main1 .content2 .res li{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:8px;background:#f8f8f8;padding:16px 0;text-align:center;}
#main .main1 .content2 .res li .img{margin-bottom:12px}
#main .main1 .content2 .res li .img img{width:22px;height:22px;object-fit:contain}
#main .main1 .content2 .res li .tit{line-height:14px;font-size:12px;font-weight:600;color:#1D2A53;margin-bottom:4px;opacity:0.8;}
#main .main1 .content2 .res li .txt{line-height:14px;font-size: 12px;font-weight:500;color:#1D2A53;display: flex;align-items: center;justify-content: center;}
#main .main1 .content2 .res li .txt span{font-size:14px;font-weight:700;}
#main .main1 .content2 .update{text-align:right;margin-top:8px;line-height:16px;font-size:10px;color:#7c7e84;}
#main .main2{padding:16px;}
#main .main2 .head{display:flex;margin-bottom:16px;align-items:center;justify-content:space-between;}
#main .main2 .head .title{display:flex;align-items:center;justify-content:space-between;}
#main .main2 .head .title > img{margin-right:4px;width:16px;height:22px;object-fit:contain;flex-shrink:0;}
#main .main2 .head .title > span{line-height:24px;font-size:18px;font-weight:700;color:#1d2a53;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;letter-spacing:-1px;}
#main .main2 .head .title > span em{color:#FFAB5E;}
#main .main2 .head .title > a{margin-left:8px;display:block;}
#main .main2 .head .title > a img{display:block;width:16px;height:16px;object-fit:contain}
#main .main2 .head .more{}
#main .main2 .head .more a{display:flex;align-items:center;justify-content:center;font-size:12px;color:#7c7e84;white-space:nowrap;}
#main .main2 .head .more a img{margin-top:-1px;}
#main .main2 .profit{margin-bottom:16px;}
#main .main2 .profit .upper{display: flex;align-items: center;justify-content: space-between;padding: 0 0 8px;margin: 0 0 16px;border-bottom: 1px solid #ededed;}
#main .main2 .profit .upper .title{flex: 1;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;line-height: 18px;font-size: 16px;font-weight: 600;color: #1d2a53;}
#main .main2 .profit .upper .title span{color:#FFAB5E;}
#main .main2 .profit .upper .date{font-size: 10px;color: #7c7e74;}
#main .main2 .profit .category{display:flex;align-items:center;justify-content:space-between;}
#main .main2 .profit .category .checkbox{padding: 0 4px;display: flex;align-items: center;gap: 8px;}
#main .main2 .profit .category .checkbox label{display: flex;align-items: center;cursor: pointer;}
#main .main2 .profit .category .checkbox label input{display: none;}
#main .main2 .profit .category .checkbox label input ~ i{position:relative;margin: 0 4px 0 0;width: 16px;height: 16px;border-radius: 16px;border: 1px solid #ededed;background: #fff;}
#main .main2 .profit .category .checkbox label input ~ span{line-height: 20px;font-size: 12px;color: #7C7E84;display: flex;align-items: center;}
#main .main2 .profit .category .checkbox label input ~ span strong{line-height: 20px;font-size: 20px;font-weight: 700;margin: 0 2px 0 0;}
#main .main2 .profit .category .checkbox label input:checked ~ i{background: #1d2a53;border-color: #1d2a53;}
#main .main2 .profit .category .checkbox label input:checked ~ i:before{content:'';position:absolute;top: 3px;left: 3px;width:8px;height:8px;border-radius:8px;background:#e9eaee;}
#main .main2 .profit .category .checkbox label input:checked ~ span{color: #1d2a53;}
#main .main2 .profit .category .button{display:flex;gap:4px;}
#main .main2 .profit .category .button a{display:flex;align-items:center;justify-content:center;min-width:34px;height:26px;border-radius:4px;background:#fff;border:1px solid #f8f8f8;font-size:12px;color:#7c7e84;}
#main .main2 .profit .category .button a.selected{background:#1d2a53;color:#fff;}
#main .main2 .content1{padding:16px;border-radius:12px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,0.08);}
#main .main2 .content1 .rate{margin-bottom:16px;}
#main .main2 .content1 .rate ul{display:flex;gap:8px;}
#main .main2 .content1 .rate li{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:8px;background:#f8f8f8;padding:16px;text-align:center;}
#main .main2 .content1 .rate li .tit{line-height:20px;font-size:14px;font-weight:600;color:#3a3a3a;margin-bottom:4px;}
#main .main2 .content1 .rate li .txt{line-height:20px;font-size:14px;font-weight:500;color:#3a3a3a;}
#main .main2 .content1 .rate li .txt span{font-size:18px;font-weight:700;}
#main .main2 .content1 .rate li .txt.up span{color:#f15050;}
#main .main2 .content1 .rate li .txt.down span{color:#3582f5;}
#main .main2 .content1 .graph{margin-bottom:16px;}
#main .main2 .content1 .graph img{display:block;width:100%;height:100%;object-fit:contain}
#main .main2 .content1 .text{margin-top:16px;text-align:center;line-height: 16px;font-size: 10px;font-weight:500;color:#3a3a3a;}
#main .main2 .content2{margin:24px 0 0 0;padding:16px 16px 24px;border-radius:12px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,0.08);}
#main .main2 .content2 .title{display:flex;align-items:center;line-height: 24px;font-size: 16px;font-weight: 600;color: #1d2a53;margin: 0 0 16px;}
#main .main2 .content2 .title > img{margin-right:4px;width:24px;height:24px;object-fit:contain}
#main .main2 .content2 .cont{display:flex;gap: 32px;}
#main .main2 .content2 .cont .graph{position:relative;width:140px;height:140px;}
#main .main2 .content2 .cont .graph img{display:block;width:100%;height:100%;object-fit:contain}
#main .main2 .content2 .cont .graph span{position:absolute;top:50%;left:0;width:100%;transform:translateY(-50%);line-height:20px;font-size:12px;font-weight:500;text-align:center;}
#main .main2 .content2 .cont .graph span strong{display:block;font-size:16px;color:#FFAB5E;}
#main .main2 .content2 .cont .text{flex:1;}
#main .main2 .content2 .cont .text ul{display:flex;flex-direction:column;gap:12px;}
#main .main2 .content2 .cont .text li{display:flex;align-items:center;}
#main .main2 .content2 .cont .text li i{margin:0 8px 0 0;width:12px;height:12px;border-radius:2px;background:#ececec;flex-shrink:0;}
#main .main2 .content2 .cont .text li i.box01{background-color:#1D2A53;}
#main .main2 .content2 .cont .text li i.box02{background-color:#3D8AFF;}
#main .main2 .content2 .cont .text li i.box03{background-color:#31D89C;}
#main .main2 .content2 .cont .text li i.box04{background-color:#8591A7;}
#main .main2 .content2 .cont .text li i.box05{background-color:#90DF40;}
#main .main2 .content2 .cont .text li i.box06{background-color:#FFC85D;}
#main .main2 .content2 .cont .text li strong{line-height:12px;font-size:12px;font-weight:600;color:#1d2a53;}
#main .main2 .content2 .cont .text li span{margin:0 0 0 4px;line-height:12px;font-size:12px;font-weight:500;color:#7C7E84;}
#main .main3{padding:16px;}
#main .main3 .head{display:flex;margin-bottom:16px;align-items:center;justify-content:space-between;}
#main .main3 .head .title{display:flex;align-items:center;justify-content:space-between;}
#main .main3 .head .title > img{margin-right:4px;width:16px;height:22px;object-fit:contain;flex-shrink:0;}
#main .main3 .head .title > span{line-height:24px;font-size:18px;font-weight:700;color:#1d2a53;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;letter-spacing:-1px;}
#main .main3 .head .title > span em{color:#FFAB5E;}
#main .main3 .head .title > a{margin-left:8px;}
#main .main3 .head .title > a img{width:16px;height:16px;object-fit:contain}
#main .main3 .head .more{}
#main .main3 .head .more a{display:flex;align-items:center;justify-content:center;font-size:12px;color:#7c7e84;white-space:nowrap;}
#main .main3 .head .more a img{margin-top:-1px;}
#main .main3 .content1{padding:24px 20px;border-radius:12px;background:#1d2a53;box-shadow:0 2px 8px rgba(0,0,0,0.08)}
#main .main3 .content1 .info{display:flex;justify-content:space-between;margin-bottom:24px;}
#main .main3 .content1 .info .flex{display:flex;flex-direction:column;line-height:24px;font-size:12px;color:#fff;}
#main .main3 .content1 .info .flex:nth-child(1){align-items:flex-start;text-align:left;}
#main .main3 .content1 .info .flex:nth-child(2){align-items:flex-end;text-align:right;}
#main .main3 .content1 .info .stock{}
#main .main3 .content1 .info .name{font-size:16px;font-weight:700;}
#main .main3 .content1 .info .name span{font-size:12px;font-weight:400;}
#main .main3 .content1 .info .price{}
#main .main3 .content1 .info .price strong{font-size:15px;font-weight:700;margin-right:3px;}
#main .main3 .content1 .info .price em{font-size:12px;font-weight:600;}
#main .main3 .content1 .info .rate{font-size:12px;font-weight:600;}
#main .main3 .content1 .info .rate.up{color:#f15050;}
#main .main3 .content1 .info .rate.down{color:#3582f5;}
#main .main3 .content1 .box{}
#main .main3 .content1 .box ul{display:flex;flex-wrap:wrap;gap:16px;}
#main .main3 .content1 .box li{display:flex;border-radius:8px;background:#ffffff;padding:16px;}
#main .main3 .content1 .box li.big{width:100%;display:flex;flex-direction:row;align-items:center;justify-content:space-between;}
#main .main3 .content1 .box li.small{width:calc(50% - 8px);display:flex;flex-direction:column;align-items:flex-start;}
#main .main3 .content1 .box .icon{margin-bottom:12px;}
#main .main3 .content1 .box .icon img{display:block;width:20px;height:20px;object-fit:contain;}
#main .main3 .content1 .box .name{line-height:1;font-size:14px;font-weight:600;color:#1d2a53;}
#main .main3 .content1 .box .rate{line-height:18px;font-size:14px;font-weight:600;margin-bottom:6px;text-align:right;}
#main .main3 .content1 .box .rate .up{color:#f15050;}
#main .main3 .content1 .box .rate .down{color:#3582f5;}
#main .main3 .content1 .box .price{line-height:24px;font-size:18px;font-weight:700;color:#3a3a3a;letter-spacing:-1px}
#main .main3 .content1 .box .text{padding-top:8px;line-height:24px;font-size:12px;font-weight:700;color:#3a3a3a}
#main .main3 .content1 .box .text span{font-size:16px;}
#main .main3 .content1 .box .grade{min-width:140px;padding:12px;display:flex;flex-direction:column;text-align:center;align-items:center;background:#f8f8f8;border-radius:4px;}
#main .main3 .content1 .box .grade .num{line-height:24px;font-size:18px;font-weight:700;}
#main .main3 .content1 .box .grade .txt{line-height:24px;font-size:12px;font-weight:500;}
#main .main3 .content1 .box .grade .txt em{font-weight:700;}
#main .main3 .content1 .box .grade1 .num{color:#65CD25}
#main .main3 .content1 .box .grade1 .txt em{color:#65CD25}
#main .main3 .content1 .box .grade2 .num{color:#1d2a53}
#main .main3 .content1 .box .grade2 .txt em{color:#1d2a53}
#main .main3 .content1 .box .grade3 .num{color:#f15050;}
#main .main3 .content1 .box .grade3 .txt em{color:#f15050;}
#main .main4{padding:16px;}
#main .main4 .head{display:flex;margin-bottom:16px;align-items:center;justify-content:space-between;}
#main .main4 .head .title{display:flex;align-items:center;justify-content:space-between;}
#main .main4 .head .title > img{margin-right:4px;width:20px;height:22px;object-fit:contain;flex-shrink:0;border-radius:4px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,0.08);}
#main .main4 .head .title > span{line-height:24px;font-size:18px;font-weight:700;color:#1d2a53;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;letter-spacing:-1px;}
#main .main4 .head .title > span em{color:#FFAB5E;}
#main .main4 .head .title > a{margin-left:8px;display:block;}
#main .main4 .head .title > a img{display:block;width:16px;height:16px;object-fit:contain}
#main .main4 .head .date{font-size:10px;color:#7c7e84;letter-spacing:-1px;white-space:nowrap}
#main .main4 .content1{padding:24px 20px;border-radius:12px;background:#ffffff;box-shadow:0 2px 8px rgba(0,0,0,0.08)}
#main .main4 .content1 .chart{/* margin-bottom:16px; */}
#main .main4 .content1 .chart img{width:100%;height:auto;}
#main .main4 .content1 .text{padding:12px 16px;border-radius:10px;background:#f8f8f8;text-align:center;}
#main .main4 .content1 .text span{display:block;margin: 0 0 4px;line-height: 18px;font-size: 14px;font-weight: 600;}
#main .main4 .content1 .text strong{display:block;line-height: 20px;font-size: 16px;font-weight: 700;}
#main .main4 .content1 .text strong em{color:#f15050;}
#main .main5{padding:16px;}
#main .main5 .head{display:flex;margin-bottom:16px;align-items:center;justify-content:space-between;}
#main .main5 .head .title{display:flex;align-items:center;justify-content:space-between;}
#main .main5 .head .title > img{margin-right:4px;width:20px;height:20px;object-fit:contain;flex-shrink:0;border-radius:4px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,0.08);}
#main .main5 .head .title > span{line-height:24px;font-size:18px;font-weight:700;color:#1d2a53;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;letter-spacing:-1px;}
#main .main5 .head .title > span em{color:#FFAB5E;}
#main .main5 .head .title > a{margin-left:8px;display:block;}
#main .main5 .head .title > a img{display:block;width:16px;height:16px;object-fit:contain;}
#main .main5 .content1{padding:24px 20px;border-radius:12px;background:#ffffff;box-shadow:0 2px 8px rgba(0,0,0,0.08)}
#main .main5 .content1 .chart{position:relative;width:224px;max-width:100%;margin:0 auto 16px;}
#main .main5 .content1 .chart img{width:100%;height:auto;}
#main .main5 .content1 .chart em{position:absolute;bottom:0;left:0;width:100%;text-align:center;font-size:20px;font-weight:600;}
#main .main5 .content1 .chart1 em{color:#eb2f00;}
#main .main5 .content1 .chart2 em{color:#ff7700;}
#main .main5 .content1 .chart3 em{color:#fdcc03;}
#main .main5 .content1 .chart4 em{color:#8bc200;}
#main .main5 .content1 .chart5 em{color:#3eb200;}
#main .main5 .content1 .history{padding:8px 0;margin:0 0 8px;}
#main .main5 .content1 .history ul{display:flex;gap:8px;}
#main .main5 .content1 .history li{flex: 0 0 auto;width: calc(25% - 6px);border-radius:8px;background:#f8f8f8;text-align:center;padding:8px 12px;}
#main .main5 .content1 .history li span{display:block;margin-bottom:8px;line-height:1;font-size:12px;font-weight:500;color:#7c7e84;}
#main .main5 .content1 .history li em{display:block;line-height:1;font-size:12px;font-weight:700;margin-bottom:8px;}
#main .main5 .content1 .history li strong{display:block;line-height:1;font-size:16px;font-weight:700;}
#main .main5 .content1 .text{padding:16px;border-radius:8px;background:#f8f8f8;text-align:center;}
#main .main5 .content1 .text dl{display:flex;align-items:center;justify-content:center;}
#main .main5 .content1 .text dt{display:flex;align-items:center;font-weight:600;font-size:14px;white-space:nowrap;margin-right:4px;}
#main .main5 .content1 .text dt img{width:20px;height:20px;flex-shrink:0;margin-right:8px;}
#main .main5 .content1 .text dd{line-height:20px;font-size:12px;font-weight:600;}
#main .main5 .content1 .text dd strong{font-size:16px;font-weight:700;}
#main .main5 .content1 .tip{margin-top:16px;line-height:16px;font-size:12px;font-weight:500;color:#7c7e84;text-align:center;}
#main .main5 .content1 .tip span{font-weight:700;}
#main .main6{padding:16px;}
#main .main6 .head{display:flex;margin-bottom:16px;align-items:center;justify-content:space-between;}
#main .main6 .head .title{display:flex;align-items:center;justify-content:space-between;}
#main .main6 .head .title > img{margin-right:4px;width:20px;height:20px;object-fit:contain;flex-shrink:0;border-radius:4px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,0.08);}
#main .main6 .head .title > span{line-height:24px;font-size:18px;font-weight:700;color:#1d2a53;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;letter-spacing:-1px;}
#main .main6 .head .title > span em{color:#FFAB5E;}
#main .main6 .head .title > a{margin-left:8px;}
#main .main6 .head .title > a img{width:16px;height:16px;object-fit:contain;}
#main .main7{padding:16px;}
#main .main7 .head{display:flex;margin-bottom:16px;align-items:center;justify-content:space-between;}
#main .main7 .head .title{display:flex;align-items:center;justify-content:space-between;}
#main .main7 .head .title > img{margin-right:4px;width:16px;height:22px;object-fit:contain;flex-shrink:0;border-radius:4px;overflow:hidden;}
#main .main7 .head .title > span{line-height:24px;font-size:18px;font-weight:700;color:#1d2a53;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;letter-spacing:-1px;}
#main .main7 .head .title > span em{color:#FFAB5E;}
#main .main7 .head .title > a{margin-left:8px;display:block;}
#main .main7 .head .title > a img{display:block;width:16px;height:16px;object-fit:contain;}
#main .main7 .head .more{}
#main .main7 .head .more a{display:flex;align-items:center;justify-content:center;font-size:12px;color:#7c7e84;white-space:nowrap;}
#main .main7 .head .more a img{margin-top:-1px;}
#main .main7 .upper{}
#main .main7 .upper .tit{padding:0 8px 8px;margin-bottom:16px;line-height:18px;font-size:16px;font-weight:600;color:#1d2a53;border-bottom:1px solid #ededed;}
#main .main7 .upper .tabs{display:flex;gap:8px;margin-bottom:16px;}
#main .main7 .upper .tabs .tab{flex:1;display:flex;align-items:center;justify-content:center;height:26px;border-radius:4px;background:#fff;font-size:12px;color:#7c7e84;}
#main .main7 .upper .tabs .tab.selected{background:#1d2a53;color:#fff;}
#main .main7 .content1{padding:24px 20px;border-radius:12px;background:#ffffff;box-shadow:0 2px 8px rgba(0,0,0,0.08)}
#main .main7 .content1 .chart{position:relative;width:224px;max-width:100%;margin:0 auto 16px;}
#main .main7 .content1 .chart img{width:100%;height:auto;}
#main .main7 .content1 .chart em{position:absolute;bottom:0;left:0;width:100%;text-align:center;font-size:20px;font-weight:600;}
#main .main7 .content1 .chart1 em{color:#eb2f00;}
#main .main7 .content1 .chart2 em{color:#ff7700;}
#main .main7 .content1 .chart3 em{color:#fdcc03;}
#main .main7 .content1 .chart4 em{color:#8bc200;}
#main .main7 .content1 .chart5 em{color:#3eb200;}
#main .main7 .content1 .history{padding:8px 0;margin:0 0 8px;}
#main .main7 .content1 .history ul{display:flex;gap:8px;}
#main .main7 .content1 .history li{flex: 0 0 auto;width: calc(25% - 6px);border-radius:8px;background:#f8f8f8;text-align:center;padding:8px 12px;}
#main .main7 .content1 .history li span{display:block;margin-bottom:8px;line-height:1;font-size:12px;font-weight:500;color:#7c7e84;}
#main .main7 .content1 .history li em{display:block;line-height:1;font-size:12px;font-weight:700;margin-bottom:8px;}
#main .main7 .content1 .history li strong{display:block;line-height:1;font-size:16px;font-weight:700;}
#main .main7 .content1 .text{padding:16px;border-radius:8px;background:#f8f8f8;text-align:center;}
#main .main7 .content1 .text dl{display:flex;align-items:center;justify-content:center;}
#main .main7 .content1 .text dt{display:flex;align-items:center;font-weight:600;font-size:14px;white-space:nowrap;margin-right:4px;}
#main .main7 .content1 .text dt img{width:20px;height:20px;flex-shrink:0;margin-right:8px;}
#main .main7 .content1 .text dd{line-height:20px;font-size:12px;font-weight:600;}
#main .main7 .content1 .text dd strong{font-size:16px;font-weight:700;}
#main .main7 .content1 .tip{margin-top:16px;line-height:16px;font-size:12px;font-weight:500;color:#7c7e84;text-align:center;}
#main .main7 .content1 .tip span{font-weight:700;}
#main .main8{padding:8px 16px 16px;}
#main .main8 .content1{padding:24px 20px;border-radius:12px;background:#ffffff;box-shadow:0 2px 8px rgba(0,0,0,0.08)}
#main .main8 .content1 .title{line-height:24px;display:flex;align-items:center;font-size:16px;font-weight:600;color:#1d2a53;margin:0 0 16px;}
#main .main8 .content1 .title img{flex-shrink:0;margin:0 2px 0 0;padding:2px;width:20px;height:20px;}
#main .main8 .content1 .graph{position:relative;margin-bottom:16px;display:flex;gap:16px;}
#main .main8 .content1 .graph .lt{flex:0 0 auto}
#main .main8 .content1 .graph .rt{flex:1}
#main .main8 .content1 .graph .gauge{display:flex;flex-direction:column;height:100%;}
#main .main8 .content1 .graph .gauge .txt{flex:0 0 auto;display:flex;align-items:center;gap:4px;font-size:10px;font-weight:500;color:#3a3a3a;}
#main .main8 .content1 .graph .gauge .txt img{display:block;width:20px;height:20px;object-fit:contain}
#main .main8 .content1 .graph .gauge .bar{position:relative;margin:8px auto;width:16px;height:70%;max-height:100%;border-radius:16px;background: linear-gradient(0deg, rgba(234,44,44,1) 0%, rgba(255,207,84,1) 100%);}
#main .main8 .content1 .graph .gauge .bar:before{content:'';position:absolute;top:4px;left:4px;width:8px;height:8px;background:url("../images/gauge_up.svg") no-repeat 50% 50% ;}
#main .main8 .content1 .graph .gauge .bar:after{content:'';position:absolute;bottom:4px;left:4px;width:8px;height:8px;background:url("../images/gauge_down.svg") no-repeat 50% 50% ;}
#main .main8 .content1 .graph .label{display:flex;gap:16px;justify-content:center;align-items:center;}
#main .main8 .content1 .graph .label span{display:flex;align-items:center;}
#main .main8 .content1 .graph .label span i{display:block;width:8px;height:1px;background:#000;flex-shrink:0;margin-right:4px;}
#main .main8 .content1 .graph .label span i.label_blue{background:#5278f0;}
#main .main8 .content1 .graph .label span i.label_red{background:#c60000;}
#main .main8 .content1 .graph .label span i.label_yellow{background:#f9ca52;}
#main .main8 .content1 .graph .label span p{font-size:10px;font-weight:500;color:#3a3a3a;}
#main .main8 .content1 .graph .chart{padding:16px 0;width: 100%;display: flex;align-items: center;justify-content: center;}
#main .main8 .content1 .graph .chart img{width:100%;height:auto;}
#main .main8 .content1 .tip{margin-top:16px;line-height:16px;font-size:12px;font-weight:500;color:#7c7e84;text-align:center;}




#main .main9{padding:16px;}
#main .main9 .head{display:flex;margin-bottom:16px;align-items:center;justify-content:space-between;}
#main .main9 .head .title{display:flex;align-items:center;justify-content:space-between;}
#main .main9 .head .title > img{margin-right:4px;width:16px;height:22px;object-fit:contain;flex-shrink:0;border-radius:4px;overflow:hidden;}
#main .main9 .head .title > span{line-height:24px;font-size:18px;font-weight:700;color:#1d2a53;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;letter-spacing:-1px;}
#main .main9 .head .title > span em{color:#FFAB5E;}
#main .main9 .head .title > a{margin-left:8px;display:block;}
#main .main9 .head .title > a img{display:block;width:16px;height:16px;object-fit:contain;}
#main .main9 .tabs{display:flex;gap:8px;margin-bottom:16px;}
#main .main9 .tabs .tab{flex:1;display:flex;align-items:center;justify-content:center;height:26px;border-radius:4px;background:#fff;font-size:12px;color:#7c7e84;}
#main .main9 .tabs .tab.selected{background:#1d2a53;color:#fff;}
#main .main9 .content1{padding:24px 20px;border-radius:12px;background:#ffffff;box-shadow:0 2px 8px rgba(0,0,0,0.08)}
#main .main9 .content1 .tip{margin-bottom:16px;line-height:16px;font-size:12px;font-weight:500;color:#7c7e84;text-align:center;}
#main .main9 .content1 .table{border-radius:8px;overflow:hidden;}
#main .main9 .content1 .table table{width:100%;text-align:center;border-collapse:collapse;}
#main .main9 .content1 .table tr{height:40px;font-size:12px;border-bottom:1px solid #ededed;}
#main .main9 .content1 .table th:first-child{font-weight:600;background:#f8f8f8;column-width:200px;}
#main .main9 .content1 .table th{font-weight:600;background:#f8f8f8;column-width:80px}
#main .main9 .content1 .table td{font-weight:400;background:#ffffff;}
#main .main9 .content1 .table td.name{}
#main .main9 .content1 .table td.current{}
#main .main9 .content1 .table td.price{}
#main .main9 .content1 .table td.price.up{color:#F15050;}
#main .main9 .content1 .table td.price.up:before{content:'';display:inline-flex;margin-right:2px;width:8px;height:8px;background:url("../images/icon_caret_up_color.svg") no-repeat 50% 50% / contain}
#main .main9 .content1 .table td.price.down{color:#3582f5;}
#main .main9 .content1 .table td.price.down:before{content:'';display:inline-flex;margin-right:2px;width:8px;height:8px;background:url("../images/icon_caret_down_color.svg") no-repeat 50% 50% / contain}
#main .main9 .content1 .table td.rate{}
#main .main9 .content1 .more{margin-top:16px;}
#main .main9 .content1 .more a{display:flex;align-items:center;justify-content:center;font-size:14px;color:#1D2A53;height:36px;}
#main .main9 .content1 .more a img{margin-left:4px;margin-top:-1px;}
#main .main10{padding:16px;}
#main .main10 .head{display:flex;margin-bottom:16px;align-items:center;justify-content:space-between;}
#main .main10 .head .title{display:flex;align-items:center;justify-content:space-between;}
#main .main10 .head .title > img{margin-right:4px;width:16px;height:22px;object-fit:contain;flex-shrink:0;border-radius:4px;overflow:hidden;}
#main .main10 .head .title > span{line-height:24px;font-size:18px;font-weight:700;color:#1d2a53;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;letter-spacing:-1px;}
#main .main10 .content {}
#main .main10 .content ul{display:flex;flex-wrap:wrap;gap:16px;}
#main .main10 .content li{display:flex;border-radius:8px;background:#ffffff;padding:12px 16px;}
#main .main10 .content li a{display:block;width:100%;height:100%;}
#main .main10 .content li.big{width:100%;display:flex;flex-direction:row;align-items:center;justify-content:space-between;}
#main .main10 .content li.small{width:calc(50% - 8px);display:flex;flex-direction:column;align-items:flex-start;}
#main .main10 .content .icon{margin-bottom:16px;}
#main .main10 .content .icon img{display:block;width:32px;height:32px;object-fit:contain;}
#main .main10 .content .name{line-height:14px;font-size:12px;font-weight:600;color:#1d2a53;}

/**/
#main2{position:relative;background:#f8f8f8;flex:1;}
#main2 .information{padding:16px;}
#main2 .information .tabs{display:flex;padding:10px 0 0;margin:0 0 16px;}
#main2 .information .tabs .tab{flex:1;height:40px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid #ededed;background:transparent;font-size:12px;color:#7c7e84;}
#main2 .information .tabs .tab.selected{border-bottom:1px solid #1d2a53;font-weight:700;color:#1d2a53;}
#main2 .information .tabbox{display:none;}
#main2 .information .tabbox.selected{display:block;}
#main2 .information .list{}
#main2 .information .list ul{border-radius:12px;background:#ffffff;}
#main2 .information .list li{border-bottom:1px solid #ededed;}
#main2 .information .list li a{display:flex;justify-content:space-between;align-items:center;height:56px;}
#main2 .information .list li .title{flex:1;padding:0 16px;font-size:14px;font-weight:500;color:#3a3a3a;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;}
#main2 .information .list li .date{flex:0 0 auto;padding:0 16px;font-size:12px;font-weight:400;color:#7c7e84;white-space:nowrap;}
#main2 .information .more{margin-top:16px;}
#main2 .information .more a{display:flex;align-items:center;justify-content:center;width:100%;height:48px;border-radius:8px;background:#1d2a53;font-size:14px;font-weight:500;color:#fff;}
#main2 .detail{padding:16px;}
#main2 .detail .upper{display:flex;justify-content:space-between;align-items:center;height:24px;margin:0 0 16px;}
#main2 .detail .upper .title{flex:1;font-size:18px;font-weight:600;color:#1D2A53;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;}
#main2 .detail .upper .date{flex:0 0 auto;font-size:12px;font-weight:400;color:#7c7e84;white-space:nowrap;}
#main2 .detail .lower{display: block;background: #fff;border-radius: 8px;padding: 16px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);}
#main2 .detail .lower img{width: 100%}

/* #main2 .detail .lower ul{}
#main2 .detail .lower li{margin:0 0 16px;}
#main2 .detail .lower li a{display:block;background:#fff;border-radius:8px;padding:16px;box-shadow:0 2px 8px rgba(0,0,0,0.08);}
#main2 .detail .lower li .flex{display:flex;gap:4px;margin:0 0 16px;}
#main2 .detail .lower li .flex:last-child,
#main2 .detail .lower li .flex:nth-last-of-type(1){margin-bottom:0;}
#main2 .detail .lower li .num{line-height:19px;font-size:16px;font-weight:600;color:#1D2A53;opacity:0.5;}
#main2 .detail .lower li .tit{line-height:19px;font-size:16px;font-weight:600;color:#1d2a53;}
#main2 .detail .lower li .txt{line-height:19px;font-size:14px;font-weight:400;color:#3a3a3a;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;}
#main2 .detail .lower li .rel{}
#main2 .detail .lower li .rel p{display:flex;gap:4px;line-height:19px;font-size:14px;color:#1D2A53;}
#main2 .detail .lower li .rel p:before{content:'';margin:1.5px 0;width:16px;height:16px;background:url("../images/icon_caret_right.svg") no-repeat 50% 50% / contain} */

/**/
#product{}
#product .header{display:flex;padding:0 16px;height:56px;background:#fff;align-items:center;}
#product .header .title{display:flex;align-items:center;justify-content:space-between;}
#product .header .title > img{margin-right:4px;width:20px;height:20px;object-fit:contain;flex-shrink:0;border-radius:4px;overflow:hidden;}
#product .header .title > span{line-height:24px;font-size:18px;font-weight:700;color:#1d2a53;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;letter-spacing:-1px;}
#product .header .title > span em{color:#FFAB5E;}
#product .header .title > a{margin-left:8px;display:block;}
#product .header .title > a img{display:block;width:16px;height:16px;object-fit:contain;}
#product .container{padding:16px;background:#f8f8f8;}
#product .container .tabbutton{display:flex;gap:8px;margin:0 0 16px;}
#product .container .tabbutton .tab{display:flex;align-items:center;justify-content:center;padding:0 10px;background:#ffffff;border:1px solid #f1f1f1;height:32px;font-size:11px;color:#808080;border-radius:4px;white-space:nowrap;}
#product .container .tabbutton .tab.selected{color:#fff;background:#1d2a53;border-color:#1d2a53;}
#product .container .item{margin:0 0 24px;}
#product .container .item .upper{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
#product .container .item .upper .title{}
#product .container .item .upper .title img{height:20px;width:auto;}
#product .container .item .upper .date{font-size:10px;color:#7c7e84;white-space:nowrap}
#product .container .item .image{border-radius:12px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,0.08);}
#product .container .item .image img{display:block;width:100%;height:100%;}
#product .container .checkbox{margin:0 0 16px;display:flex;justify-content:center;align-items:center;gap:8px;}
#product .container .checkbox label{display: flex;align-items: center;cursor: pointer;}
#product .container .checkbox label input{display: none;}
#product .container .checkbox label input ~ i{position:relative;margin: 0 4px 0 0;width: 16px;height: 16px;border-radius: 16px;border: 1px solid #ededed;background: #fff;}
#product .container .checkbox label input ~ span{line-height: 20px;font-size: 12px;color: #7C7E84;}
#product .container .checkbox label input:checked ~ i{background: #1d2a53;border-color: #1d2a53;}
#product .container .checkbox label input:checked ~ i:before{content:'';position:absolute;top: 3px;left: 3px;width:8px;height:8px;border-radius:8px;background:#e9eaee;}
#product .container .checkbox label input:checked ~ span{color: #1d2a53;}
#product .container .content1{margin:0 0 24px;padding:16px;border-radius:12px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,0.08);}
#product .container .content1 .tabs{display:flex;gap:8px;margin-bottom:16px;}
#product .container .content1 .tabs .tab{flex:1;display:flex;align-items:center;justify-content:center;height:26px;border-radius:4px;background:#fff;font-size:12px;color:#7c7e84;border:1px solid #f1f1f1;}
#product .container .content1 .tabs .tab.selected{background:#1d2a53;color:#fff;border-color:#1d2a53;}
#product .container .content1 .rate{margin-bottom:16px;}
#product .container .content1 .rate ul{display:flex;gap:8px;}
#product .container .content1 .rate li{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:8px;background:#f8f8f8;padding:16px;text-align:center;}
#product .container .content1 .rate li .tit{line-height:20px;font-size:14px;font-weight:600;color:#3a3a3a;margin-bottom:4px;}
#product .container .content1 .rate li .txt{line-height:20px;font-size:14px;font-weight:500;color:#3a3a3a;}
#product .container .content1 .rate li .txt span{font-size:18px;font-weight:700;}
#product .container .content1 .rate li .txt.up span{color:#f15050;}
#product .container .content1 .rate li .txt.down span{color:#3582f5;}
#product .container .content1 .graph{margin-bottom:16px;}
#product .container .content1 .graph img{display:block;width:100%;height:100%;object-fit:contain}
#product .container .content1 .text{margin-top:16px;text-align:center;line-height:18px;font-size:10px;font-weight:500;color:#3a3a3a;gap:4px;display:flex;flex-direction:column;}
#product .container .content1 .text p{text-align:left;}
#product .container .content1 .text p a{text-decoration:underline;color:#3582f5;}
#product .container .content1 .text p:before{content:'';display:inline-flex;vertical-align:top;width:2px;height:2px;border-radius:2px;background:#3a3a3a;margin:8px;flex-shrink:0;}
#product .container .content2{margin:0 0 56px;padding:16px;border-radius:12px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,0.08);text-align:center;}
#product .container .content2 .title{margin-bottom:8px;line-height:16px;font-size:14px;font-weight:600;color:#3a3a3a;}
#product .container .content2 .text{margin-bottom:16px;line-height:28px;font-size:20px;font-weight:800;color:#1d2a53;}
#product .container .content2 .text span{font-size:28px;line-height:1;color:#ffab5e;}
#product .container .content2 .res{margin-bottom:16px;}
#product .container .content2 .res ul{display:flex;gap:8px;}
#product .container .content2 .res li{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:8px;background:#f8f8f8;padding:16px 0;text-align:center;}
#product .container .content2 .res li .img{margin-bottom:12px}
#product .container .content2 .res li .img img{width:22px;height:22px;object-fit:contain}
#product .container .content2 .res li .tit{line-height:14px;font-size:12px;font-weight:600;color:#1D2A53;margin-bottom:4px;opacity:0.8;}
#product .container .content2 .res li .txt{line-height:14px;font-size: 12px;font-weight:500;color:#1D2A53;display: flex;align-items: center;justify-content: center;}
#product .container .content2 .res li .txt span{font-size:14px;font-weight:700;}
#product .container .content2 .update{text-align:right;margin-top:8px;line-height:16px;font-size:10px;color:#7c7e84;white-space:nowrap;}
#product .container .content3{margin:0 0 56px;}
#product .container .content3 .title{display:flex;align-items:center;line-height: 24px;font-size: 16px;font-weight: 600;color: #1d2a53;margin: 0 0 16px;}
#product .container .content3 .title > img{margin-right:4px;width:24px;height:24px;object-fit:contain}
#product .container .content3 .update{display:flex;justify-content:space-between;margin:0 0 16px;}
#product .container .content3 .update .text{padding:4px;font-size:12px;color:#7c7e84;}
#product .container .content3 .update .dropdown{position:relative;}
#product .container .content3 .update .dropdown-toggle{display:flex;font-size: 12px;padding: 8px 8px 8px 16px;min-width: 128px;border-radius: 4px;height: 32px;font-size:12px;color:#3a3a3a;background:#fff;border:1px solid #ededed;align-items: center;}
#product .container .content3 .update .dropdown-toggle span{display:block;width:100%;text-align:left;}
#product .container .content3 .update .dropdown-toggle i{margin-left: 6px;width:16px;height:16px;background:url("../images/icon_arrow_down.svg") no-repeat 50% 50% / contain}
#product .container .content3 .update .dropdown-menu{position:absolute;top:36px;left:0;width:100%;display:flex;flex-direction:column;z-index:2;height:310px;max-height:30vh;overflow-y:auto;border-radius:4px;background:#ffffff;box-shadow:0 12px 32px rgb(145 158 171 / 24%);display:none;}
#product .container .content3 .update .dropdown-menu{-ms-overflow-style: none;scrollbar-width: none;}
#product .container .content3 .update .dropdown-menu::-webkit-scrollbar {display: none; }
#product .container .content3 .update .dropdown-menu a{line-height: 36px;padding: 0 10px;font-size: 14px;white-space:nowrap;}
#product .container .content3 .update .dropdown-menu a:hover{background:#f4f4f4}
#product .container .content3 .update .dropdown.show .dropdown-toggle i{transform:rotate(180deg)}
#product .container .content3 .update .dropdown.show .dropdown-menu{display:flex;}
#product .container .content3 .cont{display:flex;gap: 32px;padding:16px;border-radius:12px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,0.08);text-align:center;}
#product .container .content3 .cont .graph{position:relative;width:140px;height:140px;}
#product .container .content3 .cont .graph img{display:block;width:100%;height:100%;object-fit:contain}
#product .container .content3 .cont .graph span{position:absolute;top:50%;left:0;width:100%;transform:translateY(-50%);line-height:20px;font-size:12px;font-weight:500;text-align:center;}
#product .container .content3 .cont .graph span strong{display:block;font-size:16px;color:#FFAB5E;}
#product .container .content3 .cont .text{flex:1;}
#product .container .content3 .cont .text ul{display:flex;flex-direction:column;gap:12px;}
#product .container .content3 .cont .text li{display:flex;align-items:center;}
#product .container .content3 .cont .text li i{margin:0 8px 0 0;width:12px;height:12px;border-radius:2px;background:#ececec;flex-shrink:0;}
#product .container .content3 .cont .text li i.box01{background-color:#1D2A53;}
#product .container .content3 .cont .text li i.box02{background-color:#3D8AFF;}
#product .container .content3 .cont .text li i.box03{background-color:#31D89C;}
#product .container .content3 .cont .text li i.box04{background-color:#8591A7;}
#product .container .content3 .cont .text li i.box05{background-color:#90DF40;}
#product .container .content3 .cont .text li i.box06{background-color:#FFC85D;}
#product .container .content3 .cont .text li strong{line-height:12px;font-size:12px;font-weight:600;color:#1d2a53;}
#product .container .content3 .cont .text li span{margin:0 0 0 4px;line-height:12px;font-size:12px;font-weight:500;color:#7C7E84;}
#product .container .content4{margin:0 0 56px;}
#product .container .content4 .title{display:flex;align-items:center;line-height: 24px;font-size: 16px;font-weight: 600;color: #1d2a53;margin: 0 0 16px;}
#product .container .content4 .title > img{margin-right:4px;width:24px;height:24px;object-fit:contain}
#product .container .content4 .table{border-radius:8px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,0.08);}
#product .container .content4 .table table{width:100%;text-align:center;border-collapse:collapse;}
#product .container .content4 .table thead tr{height:48px;}
#product .container .content4 .table tbody tr{height:40px;}
#product .container .content4 .table tr{font-size:12px;border-bottom:1px solid #ededed;}
#product .container .content4 .table th{font-weight:600;background:#1D2A53;color:#ffffff;}
#product .container .content4 .table td{font-weight:400;background:#ffffff;}
#product .container .content4 .table th:first-child,
#product .container .content4 .table td:first-child{padding-left:8px}
#product .container .content4 .table th:last-child,
#product .container .content4 .table td:last-child{padding-right:8px}
#product .container .content4 .table .name{padding-left:8px}
#product .container .content5{margin:0 0 16px;}
#product .container .content5 .title{display:flex;align-items:center;line-height: 24px;font-size: 16px;font-weight: 600;color: #1d2a53;margin: 0 0 16px;}
#product .container .content5 .title > img{margin-right:4px;width:24px;height:24px;object-fit:contain}
#product .container .content5 .title em{margin:0 4px;color:#FFAB5E;}
#product .container .content5 .desc{margin:0 0 24px;padding:24px;border-radius:12px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,0.08);text-align:center;}
#product .container .content5 .desc:nth-last-of-type(1),
#product .container .content5 .desc:last-of-type{margin-bottom:0;}
#product .container .content5 .desc .img{margin:0 auto 16px;;width:200px;height:auto;}
#product .container .content5 .desc .img img{display:block;width:auto;max-width:100%;height:auto;}
#product .container .content5 .desc .tit{margin:0 0 8px;line-height:20px;font-size:16px;font-weight:700;color:#303030}
#product .container .content5 .desc .txt{line-height:20px;font-size:14px;color:#3a3a3a;}
#product .container .content5 .desc1 .tit{color:#3eb200;}
#product .container .content5 .desc2 .tit{color:#8bc200;}
#product .container .content5 .desc3 .tit{color:#fdcc03;}
#product .container .content5 .desc4 .tit{color:#ff7700;}
#product .container .content5 .desc5 .tit{color:#eb2f00;}
#product .container .banner{margin:0 0 56px;}
#product .container .banner img{display:block;width:100%;height:auto;}
#product .container .search_engine{margin-left:0;margin-right:0;margin-top:56px;margin-bottom:56px;}

/**/
#portfolio{}
#portfolio .header{display:flex;padding:0 16px;height:56px;background:#fff;align-items:center;}
#portfolio .header .title{display:flex;align-items:center;justify-content:space-between;}
#portfolio .header .title > img{margin-right:4px;width:20px;height:20px;object-fit:contain;flex-shrink:0;border-radius:4px;overflow:hidden;}
#portfolio .header .title > span{line-height:24px;font-size:18px;font-weight:700;color:#1d2a53;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;letter-spacing:-1px;}
#portfolio .header .title > span em{color:#FFAB5E;}
#portfolio .header .title > a{margin-left:8px;display:block;}
#portfolio .header .title > a img{display:block;width:16px;height:16px;object-fit:contain;}
#portfolio .container{padding:16px;background:#f8f8f8;}
#portfolio .container .tabbutton{display:flex;gap:8px;margin:0 0 16px;}
#portfolio .container .tabbutton .tab{display:flex;align-items:center;justify-content:center;padding:0 10px;background:#ffffff;border:1px solid #f1f1f1;height:32px;font-size:12px;color:#808080;border-radius:4px;white-space:nowrap;}
#portfolio .container .tabbutton .tab.selected{color:#fff;background:#1d2a53;border-color:#1d2a53;}
#portfolio .container .tabbox{display:none}
#portfolio .container .tabbox.selected{display:block;}
#portfolio .container .greet{margin:0 0 32px;line-height:26px;font-size:20px;font-weight:700;color:#1D2A53}
#portfolio .container .greet span{color: #FFAB5E;}
#portfolio .container .mbti{position:relative;margin-bottom:56px;overflow:hidden;}
#portfolio .container .mbti .swiper-slide{padding:16px;border-radius:8px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,0.08);text-align:center;}
#portfolio .container .mbti .name{margin-bottom:8px;line-height:24px;font-size:18px;font-weight:700;}
#portfolio .container .mbti .text{margin-bottom:16px;line-height:20px;font-size:14px;color:#3a3a3a;}
#portfolio .container .mbti .text strong{font-weight:700;}
#portfolio .container .mbti .type{display:flex;gap:8px;}
#portfolio .container .mbti .type .box{flex:1;width:100%;height:auto;aspect-ratio:1/1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border-radius:8px;background:#fafafa;}
#portfolio .container .mbti .type .box.off{opacity:0.6}
#portfolio .container .mbti .type .box strong{font-weight:700;line-height:16px;font-size:14px;color:#fff;}
#portfolio .container .mbti .type .box span{font-weight:500;line-height:14px;font-size:12px;color:#fff;}
#portfolio .container .mbti1 .name{color:#835ADC;}
#portfolio .container .mbti1 .type .box{background:#835ADC;}
#portfolio .container .mbti2 .name{color:#C55A11}
#portfolio .container .mbti2 .type .box{background:#C55A11}
#portfolio .container .mbti3 .name{color:#5FC876}
#portfolio .container .mbti3 .type .box{background:#5FC876}
#portfolio .container .mbti4 .name{color:#5864D7}
#portfolio .container .mbti4 .type .box{background:#5864D7}
#portfolio .container .mbti .swiper-prev{position:absolute;z-index:3;top:16px;left:16px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:transparent;}
#portfolio .container .mbti .swiper-next{position:absolute;z-index:3;top:16px;right:16px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:transparent;}
#portfolio .container .mbti .swiper-button-disabled{opacity:0.2;}
#portfolio .container .investment{margin: 0 -16px 40px;padding: 0 16px 16px;overflow:hidden;}
#portfolio .container .investment .swiper-slide{padding:16px 12px;width:140px;min-height:188px;border-radius:8px;background:#fff;box-shadow: 0 4px 8px rgb(0 0 0 / 6%);display:flex;flex-direction:column;cursor:pointer;}
#portfolio .container .investment .name{line-height:20px;font-size:16px;font-weight:700;color:#1D2A53;margin-bottom:4px;white-space: pre-line;}
#portfolio .container .investment .info{line-height:20px;font-size:14px;font-weight:400;color:#3a3a3a;}
#portfolio .container .investment .text{display:none !important;}
#portfolio .container .investment .icon{margin-top:auto;margin-left:auto;width:80px;height:80px;border-radius:80px;overflow:hidden;}
#portfolio .container .investment .icon img{display:block;width:100%;height:100%;object-fit:cover;}
#portfolio .container .investment .active{background:#1D2A53;}
#portfolio .container .investment .active .name{color:#ffffff;}
#portfolio .container .investment .active .info{color:#ededed;}
#portfolio .container .card{margin: 0 -16px 40px;padding: 0 16px 16px;overflow:hidden;}
#portfolio .container .card .swiper-slide{padding:16px 12px;width:216px;min-height:160px;border-radius:8px;background:#fff;box-shadow: 0 4px 8px rgb(0 0 0 / 6%);display:flex;flex-direction:column;cursor:pointer;}
#portfolio .container .card .name{line-height:20px;font-size:16px;font-weight:700;color:#7c7e84;;margin-bottom:8px;}
#portfolio .container .card .info{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;height:40px;line-height:20px;font-size:14px;font-weight:400;color:#3a3a3a;;margin-bottom:16px;}
#portfolio .container .card .type{display:flex;gap:8px;}
#portfolio .container .card .type .desc{flex:1;padding:16px 0;border-radius:8px;background:#ededed;text-align:center;color:#7C7E84;}
#portfolio .container .card .type .desc .tit{margin-bottom:4px;line-height:16px;font-size:14px;font-weight:500;}
#portfolio .container .card .type .desc .eng{line-height:20px;font-size:16px;font-weight:700;}
#portfolio .container .card .carditem1 .name.on{color:#835ADC;}
#portfolio .container .card .carditem1 .desc.on{color:#ffffff;background-color:#835ADC;}
#portfolio .container .card .carditem2 .name.on{color:#5FC876;}
#portfolio .container .card .carditem2 .desc.on{color:#ffffff;background-color:#5FC876;}
#portfolio .container .card .carditem3 .name.on{color:#5864D7;}
#portfolio .container .card .carditem3 .desc.on{color:#ffffff;background-color:#5864D7;}
#portfolio .container .card .carditem4 .name.on{color:#C55A11;}
#portfolio .container .card .carditem4 .desc.on{color:#ffffff;background-color:#C55A11;}
#portfolio .container .profit{margin-bottom:16px;}
#portfolio .container .profit .upper{display: flex;align-items: center;justify-content: space-between;padding: 0 0 8px;margin: 0 0 16px;border-bottom: 1px solid #ededed;}
#portfolio .container .profit .upper .title{display:flex;align-items:center;overflow: hidden;line-height: 18px;font-size: 18px;font-weight: 700;color: #1d2a53;}
#portfolio .container .profit .upper .title span{color:#FFAB5E; margin-right: 5px;}
#portfolio .container .profit .upper .title > a{margin-left:8px;}
#portfolio .container .profit .upper .title > a img{width:16px;height:16px;object-fit:contain}
#portfolio .container .profit .upper .date{font-size: 10px;color: #7c7e74;white-space:nowrap}
#portfolio .container .profit .category{display:flex;align-items:center;justify-content:space-between;}
#portfolio .container .profit .category .checkbox{padding: 0 4px;display: flex;align-items: center;gap: 8px;}
#portfolio .container .profit .category .checkbox label{display: flex;align-items: center;cursor: pointer;}
#portfolio .container .profit .category .checkbox label input{display: none;}
#portfolio .container .profit .category .checkbox label input ~ i{position:relative;margin: 0 4px 0 0;width: 16px;height: 16px;border-radius: 16px;border: 1px solid #ededed;background: #fff;}
#portfolio .container .profit .category .checkbox label input ~ span{line-height: 20px;font-size: 12px;color: #7C7E84;}
#portfolio .container .profit .category .checkbox label input ~ span strong{line-height: 20px;font-size: 20px;font-weight: 700;margin: 0 2px 0 0;}
#portfolio .container .profit .category .checkbox label input:checked ~ i{background: #1d2a53;border-color: #1d2a53;}
#portfolio .container .profit .category .checkbox label input:checked ~ i:before{content:'';position:absolute;top: 3px;left: 3px;width:8px;height:8px;border-radius:8px;background:#e9eaee;}
#portfolio .container .profit .category .checkbox label input:checked ~ span{color: #1d2a53;}
#portfolio .container .profit .category .button{display:flex;gap:4px;}
#portfolio .container .profit .category .button a{display:flex;align-items:center;justify-content:center;min-width:34px;height:26px;border-radius:4px;background:#fff;border:1px solid #f8f8f8;font-size:12px;color:#7c7e84;}
#portfolio .container .profit .category .button a.selected{background:#1d2a53;color:#fff;}
#portfolio .container .content1{margin:0 0 56px;padding:16px;border-radius:12px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,0.08);}
#portfolio .container .content1 .rate{margin-bottom:16px;}
#portfolio .container .content1 .rate ul{display:flex;gap:8px;}
#portfolio .container .content1 .rate li{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:8px;background:#f8f8f8;padding:16px;text-align:center;}
#portfolio .container .content1 .rate li .tit{line-height:20px;font-size:14px;font-weight:600;color:#3a3a3a;margin-bottom:4px;}
#portfolio .container .content1 .rate li .txt{line-height:20px;font-size:14px;font-weight:500;color:#3a3a3a;}
#portfolio .container .content1 .rate li .txt span{font-size:18px;font-weight:700;}
#portfolio .container .content1 .rate li .txt.up span{color:#f15050;}
#portfolio .container .content1 .rate li .txt.down span{color:#3582f5;}
#portfolio .container .content1 .graph{margin-bottom:16px;}
#portfolio .container .content1 .graph img{display:block;width:100%;height:100%;object-fit:contain}
#portfolio .container .content1 .text{margin-top:16px;text-align:center;line-height: 16px;font-size: 10px;font-weight:500;color:#3a3a3a;}
#portfolio .container .content2{margin:0 0 56px;}
#portfolio .container .content2 .title{display:flex;align-items:center;line-height: 24px;font-size: 16px;font-weight: 600;color: #1d2a53;margin: 0 0 16px;}
#portfolio .container .content2 .title > img{margin-right:4px;width:24px;height:24px;object-fit:contain}
#portfolio .container .content2 .update{display:flex;justify-content:space-between;margin:0 0 16px;}
#portfolio .container .content2 .update .text{padding:4px;font-size:12px;color:#7c7e84;}
#portfolio .container .content2 .update .dropdown{position:relative;}
#portfolio .container .content2 .update .dropdown-toggle{display:flex;font-size: 12px;padding: 8px 8px 8px 16px;min-width: 128px;border-radius: 4px;height: 32px;font-size:12px;color:#3a3a3a;background:#fff;border:1px solid #ededed;align-items: center;}
#portfolio .container .content2 .update .dropdown-toggle span{display:block;width:100%;text-align:left;}
#portfolio .container .content2 .update .dropdown-toggle i{margin-left: 6px;width:16px;height:16px;background:url("../images/icon_arrow_down.svg") no-repeat 50% 50% / contain}
#portfolio .container .content2 .update .dropdown-menu{position:absolute;top:36px;left:0;width:100%;display:flex;flex-direction:column;z-index:2;max-height:310px;overflow-y:auto;border-radius:4px;background:#ffffff;box-shadow:0 12px 32px rgb(145 158 171 / 24%);display:none;}
#portfolio .container .content2 .update .dropdown-menu a{line-height: 36px;padding: 0 10px;font-size: 14px;white-space:nowrap;}
#portfolio .container .content2 .update .dropdown-menu a:hover{background:#f4f4f4}
#portfolio .container .content2 .update .dropdown.show .dropdown-toggle i{transform:rotate(180deg)}
#portfolio .container .content2 .update .dropdown.show .dropdown-menu{display:flex;}
#portfolio .container .content2 .cont{display:flex;gap: 32px;padding:16px;border-radius:12px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,0.08);text-align:center;}
#portfolio .container .content2 .cont .graph{position:relative;width:140px;height:140px;}
#portfolio .container .content2 .cont .graph img{display:block;width:100%;height:100%;object-fit:contain}
#portfolio .container .content2 .cont .graph span{position:absolute;top:50%;left:0;width:100%;transform:translateY(-50%);line-height:20px;font-size:12px;font-weight:500;text-align:center;padding: 0px 33px;word-break: keep-all;}
#portfolio .container .content2 .cont .graph span strong{display:block;font-size:16px;color:#FFAB5E;}
#portfolio .container .content2 .cont .text{flex:1;}
#portfolio .container .content2 .cont .text ul{display:flex;flex-direction:column;gap:12px;}
#portfolio .container .content2 .cont .text li{display:flex;align-items:center;}
#portfolio .container .content2 .cont .text li i{margin:0 8px 0 0;width:12px;height:12px;border-radius:2px;background:#ececec;flex-shrink:0;}
#portfolio .container .content2 .cont .text li i.box01{background-color:#1D2A53;}
#portfolio .container .content2 .cont .text li i.box02{background-color:#3D8AFF;}
#portfolio .container .content2 .cont .text li i.box03{background-color:#31D89C;}
#portfolio .container .content2 .cont .text li i.box04{background-color:#8591A7;}
#portfolio .container .content2 .cont .text li i.box05{background-color:#90DF40;}
#portfolio .container .content2 .cont .text li i.box06{background-color:#FFC85D;}
#portfolio .container .content2 .cont .text li strong{line-height:12px;font-size:12px;font-weight:600;color:#1d2a53;}
#portfolio .container .content2 .cont .text li span{margin:0 0 0 4px;line-height:12px;font-size:12px;font-weight:500;color:#7C7E84;}
#portfolio .container .content3{margin:0 0 56px;}
#portfolio .container .content3 .title{display:flex;align-items:center;line-height: 24px;font-size: 16px;font-weight: 600;color: #1d2a53;margin: 0 0 16px;}
#portfolio .container .content3 .title > img{margin-right:4px;width:24px;height:24px;object-fit:contain}
#portfolio .container .content3 .table{border-radius:8px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,0.08);background:#fff;}
#portfolio .container .content3 .table table{width:100%;text-align:center;border-collapse:collapse;}
#portfolio .container .content3 .table thead tr{height:48px;}
#portfolio .container .content3 .table tbody tr{height:40px;}
#portfolio .container .content3 .table tr{font-size:12px;border-bottom:1px solid #ededed;}
#portfolio .container .content3 .table th{font-weight:600;background:#1D2A53;color:#ffffff;}
#portfolio .container .content3 .table td{font-weight:400;background:#ffffff;}
#portfolio .container .content3 .table th:first-child,
#portfolio .container .content3 .table td:first-child{padding-left:8px}
#portfolio .container .content3 .table th:last-child,
#portfolio .container .content3 .table td:last-child{padding-right:8px}
#portfolio .container .content3 .table .name{padding-left:8px}
#portfolio .container .content3 .table > .txt{display:block;padding:11px 16px 16px;line-height:18px;font-size:10px;color:#7c7e84;text-align:center;}
#portfolio .container .content3 .table > .txt p{display:flex;align-items:flex-start;justify-content:center;}
#portfolio .container .content3 .table > .txt p:before{content:'';width:2px;height:2px;background:#7c7e84;margin:8px;flex-shrink:0;}
#portfolio .container .content4{}
#portfolio .container .content4 .title{margin:0 0 16px;line-height:24px;font-size:20px;font-weight:700;color:#1d2a53;text-align:center;}
#portfolio .container .content4 .inner{padding:16px;border-radius:8px;background:#fff;}
#portfolio .container .content4 .inner dl{display:flex;height:110px;gap:20px;text-align:center;margin-bottom:16px;}
#portfolio .container .content4 .inner dl:last-child{margin-bottom:0;}
#portfolio .container .content4 .inner dt{order:2;flex:0 0 auto;width:72px;display:flex;flex-direction:column;justify-content:center;gap:8px;}
#portfolio .container .content4 .inner dt .box{position:relative;flex:1;display:flex;flex-direction:column;background:#EFF3FF;border-radius:4px;justify-content:center;line-height:14px;font-size:12px;font-weight:700;color:#1d2a53;}
#portfolio .container .content4 .inner dt .box:before{content:'';position:absolute;top:50%;left:-16px;margin-top:-6px;width:16px;height:12px;background:url("../images/portfolio_arrow_left.svg") no-repeat 50% 50%;}
#portfolio .container .content4 .inner dt .box:after{content:'';position:absolute;top:50%;right:-16px;margin-top:-6px;width:16px;height:12px;background:url("../images/portfolio_arrow_right.svg") no-repeat 50% 50%;}
#portfolio .container .content4 .inner dt .box small{line-height:12px;font-size:10px;font-weight:400;color:#1d2a53;}
#portfolio .container .content4 .inner dd{flex:1;display:flex;flex-direction:column;background:#f8f8f8;border-radius:4px;justify-content:center;}
#portfolio .container .content4 .inner dd:nth-child(2){order:1;}
#portfolio .container .content4 .inner dd:nth-child(3){order:3;}
#portfolio .container .content4 .inner dd .tit{line-height:14px;font-size:12px;font-weight:700;color:#1d2a53;margin-bottom:2px;}
#portfolio .container .content4 .inner dd .txt{line-height:14px;font-size:12px;font-weight:700;color:#1d2a53;}
#portfolio .container .content4 .inner dd .eng{line-height:14px;font-size:12px;font-weight:400;color:#1d2a53;}
#portfolio .container .content4 .inner dd .eng strong{color:#F15050;font-weight:700;}
#portfolio .container .content4 .inner dd .apb{margin:8px 0;line-height:28px;font-size:24px;font-weight:700;color:#1d2a53;}
#portfolio .container .content4 .inner dl.small dt .box{flex:0 0 auto;height:28px;}
#portfolio .container .content4 .inner dl.small dt .box:nth-child(1):after{display:none;}
#portfolio .container .content4 .inner dl.small dt .box:nth-child(2):before{display:none;}
#portfolio .container .content4 .inner dl.small dd .apb{}
#portfolio .container .content4 .text{margin-top:16px;text-align:center;line-height:18px;font-size:10px;font-weight:500;color:#3a3a3a;gap:4px;display:flex;flex-direction:column;}
#portfolio .container .content4 .text p{display:flex;text-align:left;}
#portfolio .container .content4 .text p a{text-decoration:underline;color:#3582f5;}
#portfolio .container .content4 .text p:before{content:'';display:inline-flex;vertical-align:top;width:2px;height:2px;border-radius:2px;background:#3a3a3a;margin:8px;flex-shrink:0;}
#portfolio .container .content5{margin-bottom:56px;}
#portfolio .container .content5 .head{display:flex;margin-bottom:16px;align-items:center;justify-content:space-between;}
#portfolio .container .content5 .head .title{display:flex;align-items:center;justify-content:space-between;}
#portfolio .container .content5 .head .title > img{margin-right:4px;width:16px;height:22px;object-fit:contain;flex-shrink:0;}
#portfolio .container .content5 .head .title > span{line-height:24px;font-size:18px;font-weight:700;color:#1d2a53;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;letter-spacing:-1px;}
#portfolio .container .content5 .head .title > span em{color:#FFAB5E;}
#portfolio .container .content5 .head .title > a{margin-left:8px;}
#portfolio .container .content5 .head .title > a img{width:16px;height:16px;object-fit:contain}
#portfolio .container .content5 .cont{padding: 16px;border-radius: 12px;background: #fff;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);}
#portfolio .container .content5 .cont .upper{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
#portfolio .container .content5 .cont .upper .date{flex-shrink:0;margin-left:auto;font-size:10px;color:#7c7e84;white-space:nowrap;}
#portfolio .container .content5 .cont .upper .tabs{display:flex;gap:8px;}
#portfolio .container .content5 .cont .upper .tabs .tab{display:flex;align-items:center;justify-content:center;min-width:48px;height:26px;border-radius:4px;background:#fff;font-size:12px;color:#7c7e84;border:1px solid #f1f1f1;}
#portfolio .container .content5 .cont .upper .tabs .tab.selected{background:#1d2a53;color:#fff;border-color:#1d2a53;}
#portfolio .container .content5 .cont .inner{}
#portfolio .container .content5 .cont .inner .rate{margin-bottom:16px;}
#portfolio .container .content5 .cont .inner .rate ul{display:flex;gap:8px;}
#portfolio .container .content5 .cont .inner .rate li{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:8px;background:#f8f8f8;padding:16px;text-align:center;}
#portfolio .container .content5 .cont .inner .rate li .tit{line-height:20px;font-size:14px;font-weight:600;color:#3a3a3a;margin-bottom:4px;}
#portfolio .container .content5 .cont .inner .rate li .txt{line-height:20px;font-size:14px;font-weight:500;color:#3a3a3a;}
#portfolio .container .content5 .cont .inner .rate li .txt span{font-size:18px;font-weight:700;}
#portfolio .container .content5 .cont .inner .rate li .txt.up span{color:#f15050;}
#portfolio .container .content5 .cont .inner .rate li .txt.down span{color:#3582f5;}
#portfolio .container .content5 .cont .inner .graph{margin-bottom:16px;}
#portfolio .container .content5 .cont .inner .graph img{display:block;width:100%;height:100%;object-fit:contain}
#portfolio .container .content5 .cont .inner .text{margin-top:16px;text-align:center;line-height:18px;font-size:10px;font-weight:500;color:#3a3a3a;gap:4px;display:flex;flex-direction:column;}
#portfolio .container .content5 .cont .inner .text p{text-align:left;}
#portfolio .container .content5 .cont .inner .text p a{text-decoration:underline;color:#3582f5;}
#portfolio .container .content5 .cont .inner .text p:before{content:'';display:inline-flex;vertical-align:top;width:2px;height:2px;border-radius:2px;background:#3a3a3a;margin:8px;flex-shrink:0;}
#portfolio .container .content6{margin:0 0 56px;}
#portfolio .container .content6 .title{display:flex;align-items:center;line-height: 24px;font-size: 16px;font-weight: 600;color: #1d2a53;margin: 0 0 16px;}
#portfolio .container .content6 .title > img{margin-right:4px;width:24px;height:24px;object-fit:contain}
#portfolio .container .content6 .update{display:flex;justify-content:space-between;margin:0 0 16px;}
#portfolio .container .content6 .update .text{padding:4px;font-size:12px;color:#7c7e84;}
#portfolio .container .content6 .update .dropdown{position:relative;}
#portfolio .container .content6 .update .dropdown-toggle{display:flex;font-size: 12px;padding: 8px 8px 8px 16px;min-width: 128px;border-radius: 4px;height: 32px;font-size:12px;color:#3a3a3a;background:#fff;border:1px solid #ededed;align-items: center;}
#portfolio .container .content6 .update .dropdown-toggle span{display:block;width:100%;text-align:left;}
#portfolio .container .content6 .update .dropdown-toggle i{margin-left: 6px;width:16px;height:16px;background:url("../images/icon_arrow_down.svg") no-repeat 50% 50% / contain}
#portfolio .container .content6 .update .dropdown-menu{position:absolute;top:36px;left:0;width:100%;display:flex;flex-direction:column;z-index:2;max-height:310px;overflow-y:auto;border-radius:4px;background:#ffffff;box-shadow:0 12px 32px rgb(145 158 171 / 24%);display:none;}
#portfolio .container .content6 .update .dropdown-menu a{line-height: 36px;padding: 0 10px;font-size: 14px;white-space:nowrap;}
#portfolio .container .content6 .update .dropdown-menu a:hover{background:#f4f4f4}
#portfolio .container .content6 .update .dropdown.show .dropdown-toggle i{transform:rotate(180deg)}
#portfolio .container .content6 .update .dropdown.show .dropdown-menu{display:flex;}
#portfolio .container .content6 .cont{display:flex;gap: 32px;padding:16px;border-radius:12px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,0.08);text-align:center;}
#portfolio .container .content6 .cont .graph{position:relative;width:140px;height:140px;}
#portfolio .container .content6 .cont .graph img{display:block;width:100%;height:100%;object-fit:contain}
#portfolio .container .content6 .cont .graph span{position:absolute;top:50%;left:0;width:100%;transform:translateY(-50%);line-height:20px;font-size:12px;font-weight:500;text-align:center;}
#portfolio .container .content6 .cont .graph span strong{display:block;font-size:16px;color:#FFAB5E;}
#portfolio .container .content6 .cont .text{flex:1;}
#portfolio .container .content6 .cont .text ul{display:flex;flex-direction:column;gap:12px;}
#portfolio .container .content6 .cont .text li{display:flex;align-items:center;}
#portfolio .container .content6 .cont .text li i{margin:0 8px 0 0;width:12px;height:12px;border-radius:2px;background:#ececec;flex-shrink:0;}
#portfolio .container .content6 .cont .text li i.box01{background-color:#1D2A53;}
#portfolio .container .content6 .cont .text li i.box02{background-color:#3D8AFF;}
#portfolio .container .content6 .cont .text li i.box03{background-color:#31D89C;}
#portfolio .container .content6 .cont .text li i.box04{background-color:#8591A7;}
#portfolio .container .content6 .cont .text li i.box05{background-color:#90DF40;}
#portfolio .container .content6 .cont .text li i.box06{background-color:#FFC85D;}
#portfolio .container .content6 .cont .text li strong{line-height:12px;font-size:12px;font-weight:600;color:#1d2a53;}
#portfolio .container .content6 .cont .text li span{margin:0 0 0 4px;line-height:12px;font-size:12px;font-weight:500;color:#7C7E84;}
#portfolio .container .content7{margin:0 0 56px;}
#portfolio .container .content7 .title{display:flex;align-items:center;line-height: 24px;font-size: 16px;font-weight: 600;color: #1d2a53;margin: 0 0 16px;}
#portfolio .container .content7 .title > img{margin-right:4px;width:24px;height:24px;object-fit:contain}
#portfolio .container .content7 .table{border-radius:8px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,0.08);background:#ffffff;}
#portfolio .container .content7 .table table{width:100%;text-align:center;border-collapse:collapse;}
#portfolio .container .content7 .table thead tr{height:48px;}
#portfolio .container .content7 .table tbody tr{height:40px;}
#portfolio .container .content7 .table tr{font-size:12px;border-bottom:1px solid #ededed;}
#portfolio .container .content7 .table th{font-weight:600;background:#1D2A53;color:#ffffff;}
#portfolio .container .content7 .table td{font-weight:400;background:#ffffff;}
#portfolio .container .content7 .table th:first-child,
#portfolio .container .content7 .table td:first-child{padding-left:8px}
#portfolio .container .content7 .table th:last-child,
#portfolio .container .content7 .table td:last-child{padding-right:8px}
#portfolio .container .content7 .table .name{padding-left:8px}
#portfolio .container .content7 .table > .txt{display:block;padding:11px 16px 16px;line-height:18px;font-size:10px;color:#7c7e84;text-align:center;}
#portfolio .container .content7 .table > .txt p{display:flex;align-items:flex-start;justify-content:center;}
#portfolio .container .content7 .table > .txt p:before{content:'';width:2px;height:2px;background:#7c7e84;margin:8px;flex-shrink:0;}
#portfolio .container .content8{margin-bottom:56px;}
#portfolio .container .content8 .head{display:flex;margin-bottom:16px;align-items:center;justify-content:space-between;}
#portfolio .container .content8 .head .title{display:flex;align-items:center;justify-content:space-between;}
#portfolio .container .content8 .head .title > img{margin-right:4px;width:16px;height:22px;object-fit:contain;flex-shrink:0;}
#portfolio .container .content8 .head .title > span{line-height:24px;font-size:18px;font-weight:700;color:#1d2a53;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;letter-spacing:-1px;}
#portfolio .container .content8 .head .title > span em{color:#FFAB5E;}
#portfolio .container .content8 .head .title > a{margin-left:8px;}
#portfolio .container .content8 .head .title > a img{width:16px;height:16px;object-fit:contain}
#portfolio .container .content8 .cont{padding: 16px;border-radius: 12px;background: #fff;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);}
#portfolio .container .content8 .cont .upper{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
#portfolio .container .content8 .cont .upper .date{flex-shrink:0;margin-left:auto;font-size:10px;color:#7c7e84;}
#portfolio .container .content8 .cont .upper .tabs{display:flex;gap:8px;}
#portfolio .container .content8 .cont .upper .tabs .tab{display:flex;align-items:center;justify-content:center;min-width:48px;height:26px;border-radius:4px;background:#fff;font-size:12px;color:#7c7e84;border:1px solid #f1f1f1;}
#portfolio .container .content8 .cont .upper .tabs .tab.selected{background:#1d2a53;color:#fff;border-color:#1d2a53;}
#portfolio .container .content8 .cont .inner{}
#portfolio .container .content8 .cont .inner .rate{margin-bottom:16px;}
#portfolio .container .content8 .cont .inner .rate ul{display:flex;gap:8px;}
#portfolio .container .content8 .cont .inner .rate li{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:8px;background:#f8f8f8;padding:16px;text-align:center;}
#portfolio .container .content8 .cont .inner .rate li .tit{line-height:20px;font-size:14px;font-weight:600;color:#3a3a3a;margin-bottom:4px;}
#portfolio .container .content8 .cont .inner .rate li .txt{line-height:20px;font-size:14px;font-weight:500;color:#3a3a3a;}
#portfolio .container .content8 .cont .inner .rate li .txt span{font-size:18px;font-weight:700;}
#portfolio .container .content8 .cont .inner .rate li .txt.up span{color:#f15050;}
#portfolio .container .content8 .cont .inner .rate li .txt.down span{color:#3582f5;}
#portfolio .container .content8 .cont .inner .graph{margin-bottom:16px;}
#portfolio .container .content8 .cont .inner .graph img{display:block;width:100%;height:100%;object-fit:contain}
#portfolio .container .content8 .cont .inner .text{margin-top:16px;text-align:center;line-height:18px;font-size:10px;font-weight:500;color:#3a3a3a;gap:4px;display:flex;flex-direction:column;}
#portfolio .container .content8 .cont .inner .text p{text-align:left;}
#portfolio .container .content8 .cont .inner .text p a{text-decoration:underline;color:#3582f5;}
#portfolio .container .content8 .cont .inner .text p:before{content:'';display:inline-flex;vertical-align:top;width:2px;height:2px;border-radius:2px;background:#3a3a3a;margin:8px;flex-shrink:0;}
#portfolio .container .content9{margin:0 0 56px;}
#portfolio .container .content9 .title{display:flex;align-items:center;line-height: 24px;font-size: 16px;font-weight: 600;color: #1d2a53;margin: 0 0 16px;}
#portfolio .container .content9 .title > img{margin-right:4px;width:24px;height:24px;object-fit:contain}
#portfolio .container .content9 .update{display:flex;justify-content:space-between;margin:0 0 16px;}
#portfolio .container .content9 .update .text{padding:4px;font-size:12px;color:#7c7e84;}
#portfolio .container .content9 .update .dropdown{position:relative;}
#portfolio .container .content9 .update .dropdown-toggle{display:flex;font-size: 12px;padding: 8px 8px 8px 16px;min-width: 128px;border-radius: 4px;height: 32px;font-size:12px;color:#3a3a3a;background:#fff;border:1px solid #ededed;align-items: center;}
#portfolio .container .content9 .update .dropdown-toggle span{display:block;width:100%;text-align:left;}
#portfolio .container .content9 .update .dropdown-toggle i{margin-left: 6px;width:16px;height:16px;background:url("../images/icon_arrow_down.svg") no-repeat 50% 50% / contain}
#portfolio .container .content9 .update .dropdown-menu{position:absolute;top:36px;left:0;width:100%;display:flex;flex-direction:column;z-index:2;max-height:310px;overflow-y:auto;border-radius:4px;background:#ffffff;box-shadow:0 12px 32px rgb(145 158 171 / 24%);display:none;}
#portfolio .container .content9 .update .dropdown-menu a{line-height: 36px;padding: 0 10px;font-size: 14px;white-space:nowrap;}
#portfolio .container .content9 .update .dropdown-menu a:hover{background:#f4f4f4}
#portfolio .container .content9 .update .dropdown.show .dropdown-toggle i{transform:rotate(180deg)}
#portfolio .container .content9 .update .dropdown.show .dropdown-menu{display:flex;}
#portfolio .container .content9 .cont{display:flex;gap: 32px;padding:16px;border-radius:12px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,0.08);text-align:center;}
#portfolio .container .content9 .cont .graph{position:relative;width:140px;height:140px;}
#portfolio .container .content9 .cont .graph img{display:block;width:100%;height:100%;object-fit:contain}
#portfolio .container .content9 .cont .graph span{position:absolute;top:50%;left:0;width:100%;transform:translateY(-50%);line-height:20px;font-size:12px;font-weight:500;text-align:center;}
#portfolio .container .content9 .cont .graph span strong{display:block;font-size:16px;color:#FFAB5E;}
#portfolio .container .content9 .cont .text{flex:1;}
#portfolio .container .content9 .cont .text ul{display:flex;flex-direction:column;gap:12px;}
#portfolio .container .content9 .cont .text li{display:flex;align-items:center;}
#portfolio .container .content9 .cont .text li i{margin:0 8px 0 0;width:12px;height:12px;border-radius:2px;background:#ececec;flex-shrink:0;}
#portfolio .container .content9 .cont .text li i.box01{background-color:#1D2A53;}
#portfolio .container .content9 .cont .text li i.box02{background-color:#3D8AFF;}
#portfolio .container .content9 .cont .text li i.box03{background-color:#31D89C;}
#portfolio .container .content9 .cont .text li i.box04{background-color:#8591A7;}
#portfolio .container .content9 .cont .text li i.box05{background-color:#90DF40;}
#portfolio .container .content9 .cont .text li i.box06{background-color:#FFC85D;}
#portfolio .container .content9 .cont .text li strong{line-height:12px;font-size:12px;font-weight:600;color:#1d2a53;}
#portfolio .container .content9 .cont .text li span{margin:0 0 0 4px;line-height:12px;font-size:12px;font-weight:500;color:#7C7E84;}
#portfolio .container .content10{margin:0 0 56px;}
#portfolio .container .content10 .title{display:flex;align-items:center;line-height: 24px;font-size: 16px;font-weight: 600;color: #1d2a53;margin: 0 0 16px;}
#portfolio .container .content10 .title > img{margin-right:4px;width:24px;height:24px;object-fit:contain}
#portfolio .container .content10 .table{border-radius:8px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,0.08);background:#ffffff;}
#portfolio .container .content10 .table table{width:100%;text-align:center;border-collapse:collapse;}
#portfolio .container .content10 .table thead tr{height:48px;}
#portfolio .container .content10 .table tbody tr{height:40px;}
#portfolio .container .content10 .table tr{font-size:12px;border-bottom:1px solid #ededed;}
#portfolio .container .content10 .table th{font-weight:600;background:#1D2A53;color:#ffffff;}
#portfolio .container .content10 .table td{font-weight:400;background:#ffffff;}
#portfolio .container .content10 .table th:first-child,
#portfolio .container .content10 .table td:first-child{padding-left:8px}
#portfolio .container .content10 .table th:last-child,
#portfolio .container .content10 .table td:last-child{padding-right:8px}
#portfolio .container .content10 .table .name{padding-left:8px}
#portfolio .container .content10 .table > .txt{display:block;padding:11px 16px 16px;line-height:18px;font-size:10px;color:#7c7e84;text-align:center;}
#portfolio .container .content10 .table > .txt p{display:flex;align-items:flex-start;justify-content:center;}
#portfolio .container .content10 .table > .txt p:before{content:'';width:2px;height:2px;background:#7c7e84;margin:8px;flex-shrink:0;}
#portfolio .container .search_engine{margin-left:0;margin-right:0;margin-top:56px;margin-bottom:56px;}

/**/
#stock{}
#stock .header{display:flex;padding:0 16px;height:56px;background:#fff;align-items:center;}
#stock .header .title{display:flex;align-items:center;justify-content:space-between;}
#stock .header .title > img{margin-right:4px;width:20px;height:20px;object-fit:contain;flex-shrink:0;border-radius:4px;overflow:hidden;}
#stock .header .title > span{line-height:24px;font-size:18px;font-weight:700;color:#1d2a53;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;letter-spacing:-1px;}
#stock .header .title > span em{color:#FFAB5E;}
#stock .header .title > a{margin-left:8px;}
#stock .header .title > a img{width:16px;height:16px;object-fit:contain;}
#stock .search{margin:0 auto;width:100%;height:56px;display:flex;align-items:center;z-index:3;}
#stock .search .form{width:100%;height:40px;display:flex;align-items:center;border-radius:8px;border:1px solid #1d2a53;background:#ffffff;}
#stock .search .input{display:block;width:100%;height:38px;background:transparent;padding:4px 12px;font-size:12px;color:#1d2a53;}
#stock .search .submit{display:block;margin:0 12px 0 0;width:20px;height:20px;background:transparent;flex-shrink:0;}
#stock .search .submit img{display:block;width:100%;height:100%;object-fit:contain;}
#stock .search .close{display:none;margin:0 8px 0 0;width:16px;height:16px;align-items:center;justify-content:center;background:transparent;flex-shrink:0;cursor:pointer;}
#stock .search .reset{display:none;margin:0 8px 0 0;width:20px;height:20px;align-items:center;justify-content:center;background:transparent;flex-shrink:0;cursor:pointer;}
#stock .search.is-active{position:fixed;top:0;left:50%;transform:translateX(-50%);width:100%;max-width:500px;padding:0 16px;background:#fff;z-index:3;}
#stock .search.is-active .close{display:flex;}
#stock .search.is-active .reset{display:flex;}
#stock .container{padding:16px;background:#f8f8f8;}
#stock .container .head{display:flex;margin-bottom:16px;align-items:center;justify-content:space-between;}
#stock .container .head .title{display:flex;align-items:center;justify-content:space-between;}
#stock .container .head .title > img{margin-right:4px;width:20px;height:20px;object-fit:contain;flex-shrink:0;border-radius:4px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,0.08);}
#stock .container .head .title > span{line-height:24px;font-size:18px;font-weight:700;color:#1d2a53;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;letter-spacing:-1px;}
#stock .container .head .title > span em{color:#FFAB5E;}
#stock .container .head .title > a{margin-left:8px;display:block;}
#stock .container .head .title > a img{display:block;width:16px;height:16px;object-fit:contain}
#stock .container .head .date{font-size:10px;color:#7c7e84;letter-spacing:-1px;white-space:nowrap;}
#stock .container .content1{margin:0 0 56px;padding:24px 20px;border-radius:12px;background:#1d2a53;box-shadow:0 2px 8px rgba(0,0,0,0.08)}
#stock .container .content1 .info{display:flex;justify-content:space-between;margin-bottom:24px;}
#stock .container .content1 .info .flex{display:flex;flex-direction:column;line-height:24px;font-size:12px;color:#fff;}
#stock .container .content1 .info .flex:nth-child(1){align-items:flex-start;text-align:left;}
#stock .container .content1 .info .flex:nth-child(2){align-items:flex-end;text-align:right;width:130px;}
#stock .container .content1 .info .stock{}
#stock .container .content1 .info .name{font-size:16px;font-weight:700; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; letter-spacing: -1px;}
#stock .container .content1 .info .name span{font-size:12px;font-weight:400;}
#stock .container .content1 .info .price{}
#stock .container .content1 .info .price strong{font-size:15px;font-weight:700;margin-right:3px;}
#stock .container .content1 .info .price em{font-size:12px;font-weight:600;}
#stock .container .content1 .info .rate{font-size:12px;font-weight:600;}
#stock .container .content1 .info .rate.up{color:#f15050;}
#stock .container .content1 .info .rate.down{color:#3582f5;}
#stock .container .content1 .box{}
#stock .container .content1 .box ul{display:flex;flex-wrap:wrap;gap:16px;}
#stock .container .content1 .box li{display:flex;border-radius:8px;background:#ffffff;padding:16px;}
#stock .container .content1 .box li.big{width:100%;display:flex;flex-direction:row;align-items:center;justify-content:space-between;}
#stock .container .content1 .box li.small{width:calc(50% - 8px);display:flex;flex-direction:column;align-items:flex-start;gap:8px;}
#stock .container .content1 .box li.small .none{margin-top:12px;}
#stock .container .content1 .box .icon{margin-bottom:12px;}
#stock .container .content1 .box .icon img{display:block;width:20px;height:20px;object-fit:contain;}
#stock .container .content1 .box .name{line-height:1;font-size:14px;font-weight:600;color:#1d2a53;}
#stock .container .content1 .box .rate{line-height:18px;font-size:14px;font-weight:600;margin-bottom:6px;text-align:right;}
#stock .container .content1 .box .rate .up{color:#f15050;}
#stock .container .content1 .box .rate .down{color:#3582f5;}
#stock .container .content1 .box .price{line-height:24px;font-size:19px;font-weight:700;color:#3a3a3a;letter-spacing:-1px}
#stock .container .content1 .box .text{padding-top:8px;line-height:24px;font-size:12px;font-weight:700;color:#3a3a3a}
#stock .container .content1 .box .text span{font-size:16px;}
#stock .container .content1 .box .grade{min-width:140px;padding:12px;display:flex;flex-direction:column;text-align:center;align-items:center;background:#f8f8f8;border-radius:4px;}
#stock .container .content1 .box .grade .num{line-height:24px;font-size:18px;font-weight:700;}
#stock .container .content1 .box .grade .txt{line-height:24px;font-size:12px;font-weight:500;}
#stock .container .content1 .box .grade .txt em{font-weight:700;}
#stock .container .content1 .box .grade1 .num{color:#65CD25}
#stock .container .content1 .box .grade1 .txt em{color:#65CD25}
#stock .container .content1 .box .grade2 .num{color:#1d2a53}
#stock .container .content1 .box .grade2 .txt em{color:#1d2a53}
#stock .container .content1 .box .grade3 .num{color:#f15050;}
#stock .container .content1 .box .grade3 .txt em{color:#f15050;}
#stock .container .content2{margin:0 0 56px;}
#stock .container .content2 .cont{padding:16px;border-radius:12px;background:#ffffff;box-shadow:0 2px 8px rgba(0,0,0,0.08)}
#stock .container .content2 .cont .date{margin-bottom:16px;text-align:right;line-height:L16px;font-size:10px;color:#7c7e84;white-space:nowrap;}
#stock .container .content2 .cont .chart{margin-bottom:16px;}
#stock .container .content2 .cont .chart img{width:100%;height:auto;}
#stock .container .content2 .cont .text{padding:12px 16px;border-radius:10px;background:#f8f8f8;text-align:center;}
#stock .container .content2 .cont .text span{display:block;margin: 0 0 4px;line-height: 18px;font-size: 14px;font-weight: 600;}
#stock .container .content2 .cont .text strong{display:block;line-height: 20px;font-size: 16px;font-weight: 700;}
#stock .container .content3{margin:0 0 10px;}
#stock .container .content3 .cont{padding:16px;border-radius:12px;background:#ffffff;box-shadow:0 2px 8px rgba(0,0,0,0.08)}
#stock .container .content3 .cont .chart{position:relative;margin:0 auto 16px;width:224px;max-width:100%;}
#stock .container .content3 .cont .chart img{width:100%;height:auto;}
#stock .container .content3 .cont .chart em{position:absolute;bottom:0;left:0;width:100%;text-align:center;font-size:20px;font-weight:600;}
#stock .container .content3 .cont .chart1 em{color:#eb2f00;}
#stock .container .content3 .cont .chart2 em{color:#ff7700;}
#stock .container .content3 .cont .chart3 em{color:#fdcc03;}
#stock .container .content3 .cont .chart4 em{color:#8bc200;}
#stock .container .content3 .cont .chart5 em{color:#3eb200;}
#stock .container .content3 .cont .chart.disabled{opacity:0.5;}
#stock .container .content3 .cont .history{padding:8px 0;margin:0 0 8px;}
#stock .container .content3 .cont .history ul{display:flex;gap:8px;}
#stock .container .content3 .cont .history li{flex: 0 0 auto;width: calc(25% - 6px);border-radius:8px;background:#f8f8f8;text-align:center;padding:8px 12px;}
#stock .container .content3 .cont .history li span{display:block;margin-bottom:8px;line-height:1;font-size:12px;font-weight:500;color:#7c7e84;}
#stock .container .content3 .cont .history li em{display:block;line-height:1;font-size:12px;font-weight:700;margin-bottom:8px;}
#stock .container .content3 .cont .history li strong{display:block;line-height:1;font-size:16px;font-weight:700;}
#stock .container .content3 .cont .text{padding:16px;border-radius:8px;background:#f8f8f8;text-align:center;}
#stock .container .content3 .cont .text dl{display:flex;align-items:center;justify-content:center;}
#stock .container .content3 .cont .text dt{display:flex;align-items:center;font-weight:600;font-size:14px;white-space:nowrap;margin-right:4px;}
#stock .container .content3 .cont .text dt img{width:20px;height:20px;flex-shrink:0;margin-right:8px;}
#stock .container .content3 .cont .text dd{line-height: 20px;font-size:12px;font-weight:600;}
#stock .container .content3 .cont .text dd strong{font-size:16px;font-weight:700;}
#stock .container .content3 .cont .tip{margin-top:16px;line-height:16px;font-size:12px;font-weight:500;color:#7c7e84;text-align:center;}
#stock .container .content3 .cont .tip span{font-weight:700;}
#stock .container .content3 .saying{margin-bottom:56px;}
#stock .container .content4{margin:0 0 5px;}
#stock .container .content4 .cont{padding:16px;border-radius:12px;background:#ffffff;box-shadow:0 2px 8px rgba(0,0,0,0.08)}
#stock .container .content4 .chart{position:relative;margin-bottom:16px;}
#stock .container .content4 .chart img{width:100%;height:auto;}
#stock .container .content5{margin:0 0 56px;}
#stock .container .content5 .cont{padding:16px;border-radius:12px;background:#ffffff;box-shadow:0 2px 8px rgba(0,0,0,0.08)}
#stock .container .content5 .cont .bars{position:relative;display:flex;gap:18px;margin:0 0 16px;align-items:center;justify-content:center;}
#stock .container .content5 .cont .bars .txt{font-size:14px;font-weight:600;white-space:nowrap;}
#stock .container .content5 .cont .bars .bar{display:flex;align-items:center;justify-content:center;gap:16px;}
#stock .container .content5 .cont .bars .bar .bar_circle{position:relative;display:flex;width: 16px;height: 16px;border-radius:100%;border:1px solid #ededed;flex-shrink:0;}
#stock .container .content5 .cont .bars .bar .bar_circle.bar_blue.half:before{content:'';position:absolute;top:-1px;left:-1px;right:50%;bottom:-1px;background-color:#3582f5;border-radius:16px 0 0 16px;}
#stock .container .content5 .cont .bars .bar .bar_circle.bar_blue.full:before{content:'';position:absolute;top:-1px;left:-1px;right:-1px;bottom:-1px;background-color:#3582f5;border-radius:16px 16px 16px 16px;}
#stock .container .content5 .cont .bars .bar .bar_circle.bar_red.half:before{content:'';position:absolute;top:-1px;left:-1px;right:50%;bottom:-1px;background-color:#F15050;border-radius:16px 0 0 16px;}
#stock .container .content5 .cont .bars .bar .bar_circle.bar_red.full:before{content:'';position:absolute;top:-1px;left:-1px;right:-1px;bottom:-1px;background-color:#F15050;border-radius:16px 16px 16px 16px;}
#stock .container .content5 .cont .bars .bar .bar_div{width:1px;height:16px;background:#ededed;}
#stock .container .content5 .cont .bars_none{pointer-events:none;}
#stock .container .content5 .cont .bars_none .txt{color:#ededed}
#stock .container .content5 .cont .chart{position:relative;margin-bottom:16px;}
#stock .container .content5 .cont .chart img{width:100%;height:auto;}
#stock .container .content5 .cont .chart_none{height:172px;}
#stock .container .content5 .cont .text{margin-top:16px;padding:16px;border-radius:8px;background:#f8f8f8;text-align:center;}
#stock .container .content5 .cont .text dl{display:flex;align-items:center;justify-content:center;}
#stock .container .content5 .cont .text dt{display:flex;align-items:center;font-weight:600;font-size:14px;white-space:nowrap;margin-right:4px;}
#stock .container .content5 .cont .text dt img{width:20px;height:20px;flex-shrink:0;margin-right:8px;}
#stock .container .content5 .cont .text dd{line-height: 20px;font-size:12px;font-weight:600;}
#stock .container .content5 .cont .text dd strong{font-size:16px;font-weight:700;}
#stock .container .content6{margin-bottom:56px;}
#stock .container .content6 .cont{padding:16px;border-radius:12px;background:#ffffff;box-shadow:0 2px 8px rgba(0,0,0,0.08)}
#stock .container .content6 .checkbox{display: flex;align-items: center;gap: 16px;margin:0 0 16px;}
#stock .container .content6 .checkbox label{display: flex;align-items: center;cursor: pointer;}
#stock .container .content6 .checkbox label input{display: none;}
#stock .container .content6 .checkbox label input ~ i{position:relative;margin: 0 4px 0 0;width: 16px;height: 16px;border-radius: 16px;border: 1px solid #ededed;background: #fff;}
#stock .container .content6 .checkbox label input ~ span{line-height: 20px;font-size: 12px;color: #7C7E84;}
#stock .container .content6 .checkbox label input ~ span strong{line-height: 20px;font-size: 20px;font-weight: 700;margin: 0 2px 0 0;}
#stock .container .content6 .checkbox label input:checked ~ i{background: #1d2a53;border-color: #1d2a53;}
#stock .container .content6 .checkbox label input:checked ~ i:before{content:'';position:absolute;top: 3px;left: 3px;width:8px;height:8px;border-radius:8px;background:#e9eaee;}
#stock .container .content6 .checkbox label input:checked ~ span{color: #1d2a53;}
#stock .container .content6 .chart{position:relative;margin-bottom:16px;}
#stock .container .content6 .chart img{width:100%;height:auto;}
#stock .container .content6 .chart_none{height:252px;}
#stock .container .content6 .tip{margin-top:16px;line-height:16px;font-size:12px;font-weight:500;color:#7c7e84;text-align:left;}
#stock .container .content7{margin-bottom:56px;}
#stock .container .content7 .checkbox{display: flex;align-items: center;gap: 16px;margin:0 0 16px;}
#stock .container .content7 .checkbox label{display: flex;align-items: center;cursor: pointer;}
#stock .container .content7 .checkbox label input{display: none;}
#stock .container .content7 .checkbox label input ~ i{position:relative;margin: 0 4px 0 0;width: 16px;height: 16px;border-radius: 16px;border: 1px solid #ededed;background: #fff;}
#stock .container .content7 .checkbox label input ~ span{line-height: 20px;font-size: 12px;color: #7C7E84;}
#stock .container .content7 .checkbox label input ~ span strong{line-height: 20px;font-size: 20px;font-weight: 700;margin: 0 2px 0 0;}
#stock .container .content7 .checkbox label input:checked ~ i{background: #1d2a53;border-color: #1d2a53;}
#stock .container .content7 .checkbox label input:checked ~ i:before{content:'';position:absolute;top: 3px;left: 3px;width:8px;height:8px;border-radius:8px;background:#e9eaee;}
#stock .container .content7 .checkbox label input:checked ~ span{color: #1d2a53;}
#stock .container .content7 .cont .chart{position:relative;margin-bottom:16px;}
#stock .container .content7 .cont .chart img{width:100%;height:auto;}
#stock .container .content7 .cont .chart_none{height:172px;}
#stock .container .content7 .cont{padding:16px;border-radius:12px;background:#ffffff;box-shadow:0 2px 8px rgba(0,0,0,0.08)}
#stock .container .content7 .cont .text{margin-top:16px;padding:16px;border-radius:8px;background:#f8f8f8;text-align:center;}
#stock .container .content7 .cont .text dl{display:flex;align-items:center;justify-content:center;}
#stock .container .content7 .cont .text dt{display:flex;align-items:center;font-weight:600;font-size:14px;white-space:nowrap;margin-right:4px;}
#stock .container .content7 .cont .text dt img{width:20px;height:20px;flex-shrink:0;margin-right:8px;}
#stock .container .content7 .cont .text dd{line-height: 20px;font-size:12px;font-weight:600;}
#stock .container .content7 .cont .text dd strong{font-size:16px;font-weight:700;margin:0 1px}
#stock .container .content8{margin-bottom:56px;}
#stock .container .content8 .cont{padding:16px;border-radius:12px;background:#ffffff;box-shadow:0 2px 8px rgba(0,0,0,0.08)}
#stock .container .content8 .cont .tip{margin-bottom:16px;line-height:16px;font-size:10px;font-weight:500;color:#7c7e84;text-align:center;}
#stock .container .content8 .cont .chart{position:relative;margin-bottom:16px;}
#stock .container .content8 .cont .chart img{width:100%;height:auto;}
#stock .container .content8 .cont .text{margin-top:16px;}
#stock .container .content8 .cont .text dl{margin-bottom:16px;display:flex;align-items:center;gap:16px;padding:16px;border-radius:8px;background:#f8f8f8;}
#stock .container .content8 .cont .text dl:last-child{margin:0;}
#stock .container .content8 .cont .text dt{flex:0 0 auto;min-width:93px;line-height:24px;font-size:16px;font-weight:600;color:#3a3a3a;text-align:center;}
#stock .container .content8 .cont .text dd{flex:1;display:flex;flex-direction:column;gap:8px;}
#stock .container .content8 .cont .text dd .flex{display:flex;justify-content:space-between;line-height:20px;font-size:13px;color:#3a3a3a;}
#stock .container .content9{margin-bottom:56px;}
#stock .container .content9 .cont{margin:0 0 16px;padding:16px;border-radius:12px;background:#ffffff;box-shadow:0 2px 8px rgba(0,0,0,0.08)}
#stock .container .content9 .cont .chart{position:relative;margin-bottom:16px;}
#stock .container .content9 .cont .chart img{width:100%;height:auto;}
#stock .container .content9 .grade{margin:0 0 16px;padding:20px;border-radius:12px;background:#1D2A53;box-shadow:0 2px 8px rgba(0,0,0,0.08);display:flex;gap:25px;justify-content:space-between;align-items:center;}
#stock .container .content9 .grade .lt{}
#stock .container .content9 .grade .rt{}
#stock .container .content9 .grade .icon{margin:0 0 12px;width:20px;height:20px;}
#stock .container .content9 .grade .icon img{display:block;width:100%;height:100%;object-fit:contain}
#stock .container .content9 .grade .title{margin:0 0 12px;line-height:20px;font-size:16px;font-weight:600;color:#fff;white-space:nowrap;}
#stock .container .content9 .grade .bars{display:flex;}
#stock .container .content9 .grade .bars i{width:24px;height:12px;border:1px solid #1d2a53;background:#ffffff;}
#stock .container .content9 .grade .bars1 i.full{background:#f15050;}
#stock .container .content9 .grade .bars2 i.full{background:#ff7700;}
#stock .container .content9 .grade .bars3 i.full{background:#fdcc03;}
#stock .container .content9 .grade .bars4 i.full{background:#8bc200;}
#stock .container .content9 .grade .bars5 i.full{background:#3eb200;}
#stock .container .content9 .grade .box{padding:16px;border-radius:8px;background:#fff;text-align:center;}
#stock .container .content9 .grade .box .number{line-height:24px;font-size:20px;font-weight:700;margin-bottom:12px;}
#stock .container .content9 .grade .box .text{line-height:20px;font-size:12px;font-weight:500;color:#3a3a3a;}
#stock .container .content9 .grade .box .text span{font-size:14px;font-weight:700;}
#stock .container .content9 .grade .box .learn{display:flex;width:75px;height:24px;border-radius:24px;background:#ededed;margin:0 auto 12px;}
#stock .container .content9 .grade .box .none{padding:8px;}
#stock .container .content9 .detail{margin:0 0 56px;display:flex;align-items:stretch;background:#ffffff;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,0.08);overflow:hidden;}
#stock .container .content9 .detail .tabs{display:flex;flex-direction:column;width:74px;flex:0 0 auto;}
#stock .container .content9 .detail .tabs .tab{flex:1;min-height:56px;background:#f8f8f8;display:flex;flex-direction:column;align-items:center;text-align:center;justify-content:center;}
#stock .container .content9 .detail .tabs .tab .tit{line-height:1;font-size:12px;font-weight:500;color:#7c7e74;margin-bottom:8px;}
#stock .container .content9 .detail .tabs .tab .bars{}
#stock .container .content9 .detail .tabs .tab .bars i{}
#stock .container .content9 .detail .tabs .tab .bars{display:flex;}
#stock .container .content9 .detail .tabs .tab .bars i{width:12px;height:8px;border:1px solid #f8f8f8;background:#ededed;}
#stock .container .content9 .detail .tabs .tab_red .bars i.full{background:#f15050;}
#stock .container .content9 .detail .tabs .tab_orange .bars i.full{background:#ff7700;}
#stock .container .content9 .detail .tabs .tab_yellow .bars i.full{background:#fdcc03;}
#stock .container .content9 .detail .tabs .tab_green .bars i.full{background:#8bc200;}
#stock .container .content9 .detail .tabs .tab_darkgreen .bars i.full{background:#3eb200;}
#stock .container .content9 .detail .tabs .tab.selected{background:#ffffff;}
#stock .container .content9 .detail .tabs .tab.selected .tit{font-weight:700;color:#FF6086;font-size: 17px;}
#stock .container .content9 .detail .tabbox{flex:1;display:none;flex-direction:column;padding:16px;gap:16px;}
#stock .container .content9 .detail .tabbox.selected{display:flex;}
#stock .container .content9 .detail .tabbox .box{display:flex;align-items:center;justify-content:space-between;padding:16px;border-radius:8px;background:#f8f8f8;}
#stock .container .content9 .detail .tabbox .box .lt{text-align:left;display:flex;flex-direction:column;align-items:flex-start;}
#stock .container .content9 .detail .tabbox .box .rt{text-align:center;display:flex;flex-direction:column;align-items:center;}
#stock .container .content9 .detail .tabbox .box .tit{margin-bottom:4px;line-height:16px;font-size:12px;font-weight:600;color:#1d2a53;}
#stock .container .content9 .detail .tabbox .box .txt{line-height:16px;font-size:12px;font-weight:600;color:#3a3a3a;}
#stock .container .content9 .detail .tabbox .box .txt strong{line-height:20px;font-size:14px;font-weight:700;}
#stock .container .content9 .detail .tabbox .box .num{margin-bottom:8px;line-height:24px;font-size:18px;font-weight:700;}
#stock .container .content9 .detail .tabbox .box .bar{}
#stock .container .content9 .detail .tabbox .box .bar i{}
#stock .container .content9 .detail .tabbox .box .bar{display:flex;}
#stock .container .content9 .detail .tabbox .box .bar i{width:12px;height:8px;border:1px solid #f8f8f8;background:#ededed;}
#stock .container .content9 .detail .tabbox .box .bar_red i.full{background:#EB2F00;}
#stock .container .content9 .detail .tabbox .box .bar_orange i.full{background:#ff7700;}
#stock .container .content9 .detail .tabbox .box .bar_yellow i.full{background:#fdcc03;}
#stock .container .content9 .detail .tabbox .box .bar_green i.full{background:#65CD25;}
#stock .container .content9 .detail .tabbox .box .bar_darkgreen i.full{background:#3eb200;}
#stock .container .summary{position:relative;padding:16px;border-radius:16px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,0.08);}
#stock .container .summary .title{margin:0 0 16px;line-height:25px;font-size:18px;font-weight:600;color:#1d2a53;width: 85%; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; letter-spacing: -1px;}
#stock .container .summary .text{display:-webkit-box;-webkit-box-orient:vertical;line-height:20px;font-size:14px;color:#3a3a3a;}
#stock .container .summary .info{margin:24px 0 0}
#stock .container .summary .info .tit{padding:0 0 8px 8px;line-height:20px;font-size:16px;font-weight:600;color:#1d2a53;}
#stock .container .summary .info .con{border-top:1px solid #1d2a53;padding:0 8px;}
#stock .container .summary .info .con dl{display:flex;align-items:center;justify-content:space-between;height:40px;border-bottom:1px solid #ededed;font-size:14px;color:#3a3a3a;}
#stock .container .summary .info .con dl:last-child{border-bottom:0;}
#stock .container .summary .info .con dl dt{font-weight:600;min-width: 60px;}
#stock .container .summary .info .con dl dt span{margin-right: 7px;}
#stock .container .summary .info .con dl dt img{margin-bottom: 3px;}
#stock .container .summary .info .con dl dd{display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; letter-spacing: -1px;}
#stock .container .summary .info .con dl.bold dt{font-weight:700;color:#1d2a53;}
#stock .container .summary .info .con dl.bold dd{font-weight:700;color:#1d2a53;}
#stock .container .summary .toggle{position:absolute;top:16px;right:16px;height:25px;display:flex;align-items:center;}
#stock .container .summary .toggle span{line-height:16px;font-size:12px;font-weight:500;color:#7c7e84;}
#stock .container .summary .toggle i{width:16px;height:16px;background:url("../images/icon_arrow_up.svg") no-repeat 50% 50% / contain}
#stock .container .summary.is-active{}
#stock .container .summary.is-active .text{-webkit-line-clamp:2;overflow:hidden;}
#stock .container .summary.is-active .toggle i{transform:rotate(180deg);}
#stock .none{display:inline-flex;flex-direction:column;gap:6px;}
#stock .none .none_cir{margin:0 auto;width:108px;height:18px;border-radius: 18px;max-width:100%;background: #EDEDED;}
#stock .none .none_txt{line-height:24px;font-size:12px;font-weight:700;color:#7c7e84;white-space:nowrap;}
#stock .none .none_txt strong{font-weight:700;font-size:16px;}
#stock .chart_none{margin:0 !important;height:172px;display:flex;flex-direction:column;justify-content:center;align-items:center;background:#f8f8f8;border-radius:8px;}
#stock .chart_none .none_ico{width:32px;height:32px;margin:0 auto 8px;}
#stock .chart_none .none_ico img{display:block;width:100%;height:100%;object-fit:contain;}
#stock .chart_none .none_txt{line-height:20px;font-size:16px;font-weight:700;color:#7c7e84;}

/**/
#diagnosis{}
#diagnosis .header{display:flex;padding:0 16px;height:56px;background:#fff;align-items:center;}
#diagnosis .header .title{display:flex;align-items:center;justify-content:space-between;}
#diagnosis .header .title > img{margin-right:4px;width:20px;height:20px;object-fit:contain;flex-shrink:0;border-radius:4px;overflow:hidden;}
#diagnosis .header .title > span{line-height:24px;font-size:18px;font-weight:700;color:#1d2a53;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;letter-spacing:-1px;}
#diagnosis .header .title > span em{color:#FFAB5E;}
#diagnosis .header .title > a{margin-left:8px;}
#diagnosis .header .title > a img{width:16px;height:16px;object-fit:contain;}
#diagnosis .search{margin:0 auto;width:100%;height:56px;display:flex;align-items:center;}
#diagnosis .search .form{width:100%;height:40px;display:flex;align-items:center;border-radius:8px;border:1px solid #1d2a53;background:#ffffff;}
#diagnosis .search .input{display:block;width:100%;height:38px;background:transparent;padding:4px 12px;font-size:12px;color:#1d2a53;}
#diagnosis .search .submit{display:block;margin:0 12px 0 0;width:20px;height:20px;background:transparent;flex-shrink:0;}
#diagnosis .search .submit img{display:block;width:100%;height:100%;object-fit:contain;}
#diagnosis .search .close{display:none;margin:0 8px 0 0;width:16px;height:16px;align-items:center;justify-content:center;background:transparent;flex-shrink:0;cursor:pointer;}
#diagnosis .search .reset{display:none;margin:0 8px 0 0;width:20px;height:20px;align-items:center;justify-content:center;background:transparent;flex-shrink:0;cursor:pointer;}
#diagnosis .search.is-active{position:fixed;top:0;left:0;width:100%;padding:0 16px;background: #fff;z-index: 2;}
#diagnosis .search.is-active .close{display:flex;}
#diagnosis .search.is-active .reset{display:flex;}
#diagnosis .container{padding:16px;background:#f8f8f8;}
#diagnosis .head{display:flex;margin-bottom:16px;align-items:center;justify-content:space-between;}
#diagnosis .head .title{display:flex;align-items:center;justify-content:space-between;}
#diagnosis .head .title > img{margin-right:4px;width:20px;height:20px;object-fit:contain;flex-shrink:0;border-radius:4px;overflow:hidden;}
#diagnosis .head .title > span{line-height:24px;font-size:18px;font-weight:700;color:#1d2a53;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;letter-spacing:-1px;}
#diagnosis .head .title > span em{color:#FFAB5E;}
#diagnosis .head .title > a{margin-left:8px;display:block;}
#diagnosis .head .title > a img{display:block;width:16px;height:16px;object-fit:contain;}
#diagnosis .head .date{display:flex;align-items:center;justify-content:center;font-size:10px;color:#7c7e84;white-space:nowrap;}
#diagnosis .diagnosis1{margin:0 0 56px;}
#diagnosis .diagnosis1 .content1{margin:0 0 24px;padding:16px;border-radius:12px;background:#ffffff;box-shadow:0 2px 8px rgba(0,0,0,0.08)}
#diagnosis .diagnosis1 .content1 .danger{position:relative;display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-radius:8px;background:#f8f8f8;gap:106px;}
#diagnosis .diagnosis1 .content1 .danger .left{flex:1;}
#diagnosis .diagnosis1 .content1 .danger .right{flex:1;}
#diagnosis .diagnosis1 .content1 .danger .tit{margin:0 0 4px;line-height:20px;font-size:14px;font-weight:600;color:#3a3a3a;}
#diagnosis .diagnosis1 .content1 .danger .txt{font-size:10px;color:#7c7e84;text-align:right;}
#diagnosis .diagnosis1 .content1 .danger .num{line-height:20px;font-size:14px;font-weight:500;color:#3a3a3a;}
#diagnosis .diagnosis1 .content1 .danger .num strong{font-size:20px;font-weight:700;color:#f15050;}
#diagnosis .diagnosis1 .content1 .danger .bars{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100px;height:36px;flex:0 0 auto;margin:0 auto;background:#ffffff;border-radius:6px;}
#diagnosis .diagnosis1 .content1 .danger .bars:before{content:'';position:absolute;top:0;right:0;bottom:0;left:0;background:url("../images/battery.png") no-repeat left center / contain;z-index:5;}
#diagnosis .diagnosis1 .content1 .danger .bars:after{content:'';position:absolute;top:50%;right:-6px;margin-top:-9px;width:6px;height:18px;border-radius:0 4px 4px 0;background:#3a3a3a;}
#diagnosis .diagnosis1 .content1 .danger .bars .bar{position:absolute;top:0;left:0;bottom:0;background:#f15050;border-radius:6px;}
#diagnosis .diagnosis1 .content1 .chart{position:relative;width:224px;max-width:100%;margin:0 auto 16px;}
#diagnosis .diagnosis1 .content1 .chart img{width:100%;height:auto;}
#diagnosis .diagnosis1 .content1 .chart em{position:absolute;bottom:0;left:0;width:100%;text-align:center;font-size:20px;font-weight:600;}
#diagnosis .diagnosis1 .content1 .chart1 em{color:#eb2f00;}
#diagnosis .diagnosis1 .content1 .chart2 em{color:#ff7700;}
#diagnosis .diagnosis1 .content1 .chart3 em{color:#fdcc03;}
#diagnosis .diagnosis1 .content1 .chart4 em{color:#8bc200;}
#diagnosis .diagnosis1 .content1 .chart5 em{color:#3eb200;}
#diagnosis .diagnosis1 .content1 .history{padding:8px 0;margin:0 0 8px;}
#diagnosis .diagnosis1 .content1 .history ul{display:flex;gap:8px;}
#diagnosis .diagnosis1 .content1 .history li{flex: 0 0 auto;width: calc(25% - 6px);border-radius:8px;background:#f8f8f8;text-align:center;padding:8px 12px;}
#diagnosis .diagnosis1 .content1 .history li span{display:block;margin-bottom:8px;line-height:1;font-size:12px;font-weight:500;color:#7c7e84;}
#diagnosis .diagnosis1 .content1 .history li em{display:block;line-height:1;font-size:12px;font-weight:700;margin-bottom:8px;}
#diagnosis .diagnosis1 .content1 .history li strong{display:block;line-height:1;font-size:16px;font-weight:700;}
#diagnosis .diagnosis1 .content1 .text{padding:16px;border-radius:8px;background:#f8f8f8;text-align:center;}
#diagnosis .diagnosis1 .content1 .text dl{display:flex;align-items:center;justify-content:center;}
#diagnosis .diagnosis1 .content1 .text dt{display:flex;align-items:center;font-weight:600;font-size:14px;white-space:nowrap;margin-right:4px;}
#diagnosis .diagnosis1 .content1 .text dt img{width:20px;height:20px;flex-shrink:0;margin-right:8px;}
#diagnosis .diagnosis1 .content1 .text dd{line-height:20px;font-size:12px;font-weight:600;}
#diagnosis .diagnosis1 .content1 .text dd strong{font-size:16px;font-weight:700;}
#diagnosis .diagnosis1 .content1 .tip{margin-top:16px;line-height:16px;font-size:12px;font-weight:500;color:#7c7e84;text-align:center;}
#diagnosis .diagnosis1 .content1 .warning{margin-top:16px;margin-bottom:16px;line-height:16px;font-size:12px;font-weight:500;color:#7c7e84;text-align:center;}
#diagnosis .diagnosis1 .content2{margin:0 0 24px;}
#diagnosis .diagnosis1 .content3{padding:16px;border-radius:12px;background:#ffffff;box-shadow:0 2px 8px rgba(0,0,0,0.08)}
#diagnosis .diagnosis1 .content3 .title{line-height:24px;display:flex;align-items:center;font-size:16px;font-weight:600;color:#1d2a53;margin:0 0 16px;}
#diagnosis .diagnosis1 .content3 .title img{flex-shrink:0;margin:0 2px 0 0;padding:2px;width:20px;height:20px;}
/* #diagnosis .diagnosis1 .content3 .graph{position:relative;margin-bottom:16px;display:flex;}
#diagnosis .diagnosis1 .content3 .graph .lt{flex:0 0 auto}
#diagnosis .diagnosis1 .content3 .graph .rt{flex:1}
#diagnosis .diagnosis1 .content3 .graph .gauge{display:flex;flex-direction:column;height:100%;}
#diagnosis .diagnosis1 .content3 .graph .gauge .txt{flex:0 0 auto;display:flex;align-items:center;gap:4px;font-size:10px;font-weight:500;color:#3a3a3a;}
#diagnosis .diagnosis1 .content3 .graph .gauge .txt img{display:block;width:20px;height:20px;object-fit:contain}
#diagnosis .diagnosis1 .content3 .graph .gauge .bar{position:relative;margin:8px auto;width:16px;height:70%;max-height:100%;border-radius:16px;background: linear-gradient(0deg, rgba(234,44,44,1) 0%, rgba(255,207,84,1) 100%);}
#diagnosis .diagnosis1 .content3 .graph .gauge .bar:before{content:'';position:absolute;top:4px;left:4px;width:8px;height:8px;background:url("../images/gauge_up.svg") no-repeat 50% 50% ;}
#diagnosis .diagnosis1 .content3 .graph .gauge .bar:after{content:'';position:absolute;bottom:4px;left:4px;width:8px;height:8px;background:url("../images/gauge_down.svg") no-repeat 50% 50% ;}
#diagnosis .diagnosis1 .content3 .graph .label{display:flex;gap:16px;justify-content:center;align-items:center;}
#diagnosis .diagnosis1 .content3 .graph .label span{display:flex;align-items:center;}
#diagnosis .diagnosis1 .content3 .graph .label span i{display:block;width:15px;height:2px;background:#000;flex-shrink:0;margin-right:4px;}
#diagnosis .diagnosis1 .content3 .graph .label span i.label_blue{background:#5278f0;}
#diagnosis .diagnosis1 .content3 .graph .label span i.label_red{background:#c60000;}
#diagnosis .diagnosis1 .content3 .graph .label span i.label_yellow{background:#f9ca52;}
#diagnosis .diagnosis1 .content3 .graph .label span p{font-size:10px;font-weight:500;color:#3a3a3a;}
#diagnosis .diagnosis1 .content3 .graph .chart{width: 100%;display: flex;align-items: center;justify-content: center;}
#diagnosis .diagnosis1 .content3 .graph .chart img{width:100%;height:auto;} */
#diagnosis .diagnosis1 .content3 .tip{margin-top:16px;line-height:16px;font-size:12px;font-weight:500;color:#7c7e84;text-align:center;}
#diagnosis .diagnosis2{margin:0 0 56px;}
#diagnosis .diagnosis2 .upper{}
#diagnosis .diagnosis2 .upper .tit{padding:0 8px 8px;margin-bottom:16px;line-height:18px;font-size:16px;font-weight:600;color:#1d2a53;border-bottom:1px solid #ededed;}
#diagnosis .diagnosis2 .upper .tabs{display:flex;gap:8px;margin-bottom:16px;}
#diagnosis .diagnosis2 .upper .tabs .tab{flex:1;display:flex;align-items:center;justify-content:center;height:26px;border-radius:4px;background:#fff;font-size:12px;color:#7c7e84;}
#diagnosis .diagnosis2 .upper .tabs .tab.selected{background:#1d2a53;color:#fff;}
#diagnosis .diagnosis2 .content1{margin:0 0 24px;padding:16px;border-radius:12px;background:#ffffff;box-shadow:0 2px 8px rgba(0,0,0,0.08)}
#diagnosis .diagnosis2 .content1 .chart{position:relative;width:224px;max-width:100%;margin:0 auto 16px;}
#diagnosis .diagnosis2 .content1 .chart img{width:100%;height:auto;}
#diagnosis .diagnosis2 .content1 .chart em{position:absolute;bottom:0;left:0;width:100%;text-align:center;font-size:20px;font-weight:600;}
#diagnosis .diagnosis2 .content1 .chart1 em{color:#eb2f00;}
#diagnosis .diagnosis2 .content1 .chart2 em{color:#ff7700;}
#diagnosis .diagnosis2 .content1 .chart3 em{color:#fdcc03;}
#diagnosis .diagnosis2 .content1 .chart4 em{color:#8bc200;}
#diagnosis .diagnosis2 .content1 .chart5 em{color:#3eb200;}
#diagnosis .diagnosis2 .content1 .history{padding:8px 0;margin:0 0 8px;}
#diagnosis .diagnosis2 .content1 .history ul{display:flex;gap:8px;}
#diagnosis .diagnosis2 .content1 .history li{flex: 0 0 auto;width: calc(25% - 6px);border-radius:8px;background:#f8f8f8;text-align:center;padding:8px 12px;}
#diagnosis .diagnosis2 .content1 .history li span{display:block;margin-bottom:8px;line-height:1;font-size:12px;font-weight:500;color:#7c7e84;}
#diagnosis .diagnosis2 .content1 .history li em{display:block;line-height:1;font-size:12px;font-weight:700;margin-bottom:8px;}
#diagnosis .diagnosis2 .content1 .history li strong{display:block;line-height:1;font-size:16px;font-weight:700;}
#diagnosis .diagnosis2 .content1 .text{padding:16px;border-radius:8px;background:#f8f8f8;text-align:center;}
#diagnosis .diagnosis2 .content1 .text dl{display:flex;align-items:center;justify-content:center;}
#diagnosis .diagnosis2 .content1 .text dt{display:flex;align-items:center;font-weight:600;font-size:14px;white-space:nowrap;margin-right:4px;}
#diagnosis .diagnosis2 .content1 .text dt img{width:20px;height:20px;flex-shrink:0;margin-right:8px;}
#diagnosis .diagnosis2 .content1 .text dd{line-height:20px;font-size:12px;font-weight:600;}
#diagnosis .diagnosis2 .content1 .text dd strong{font-size:16px;font-weight:700;}
#diagnosis .diagnosis2 .content1 .tip{margin-top:16px;line-height:16px;font-size:12px;font-weight:500;color:#7c7e84;text-align:center;}
#diagnosis .diagnosis2 .content2{padding:16px;border-radius:12px;background:#ffffff;box-shadow:0 2px 8px rgba(0,0,0,0.08)}
#diagnosis .diagnosis2 .content2 .title{line-height:24px;display:flex;align-items:center;font-size:16px;font-weight:600;color:#1d2a53;margin:0 0 16px;}
#diagnosis .diagnosis2 .content2 .title img{flex-shrink:0;margin:0 2px 0 0;padding:2px;width:20px;height:20px;}
#diagnosis .diagnosis2 .content2 .chart{position:relative;margin-bottom:16px;}
#diagnosis .diagnosis2 .content2 .chart img{width:100%;height:auto;}
#diagnosis .diagnosis2 .content2 .tip{margin-top:16px;line-height:16px;font-size:12px;font-weight:500;color:#7c7e84;text-align:center;}
/* #diagnosis .diagnosis2 .content2 .graph{position:relative;margin-bottom:16px;display:flex;}
#diagnosis .diagnosis2 .content2 .graph .lt{flex:0 0 auto}
#diagnosis .diagnosis2 .content2 .graph .rt{flex:1}
#diagnosis .diagnosis2 .content2 .graph .gauge{display:flex;flex-direction:column;height:100%;}
#diagnosis .diagnosis2 .content2 .graph .gauge .txt{flex:0 0 auto;display:flex;align-items:center;gap:4px;font-size:10px;font-weight:500;color:#3a3a3a;}
#diagnosis .diagnosis2 .content2 .graph .gauge .txt img{display:block;width:20px;height:20px;object-fit:contain}
#diagnosis .diagnosis2 .content2 .graph .gauge .bar{position:relative;margin:8px auto;width:16px;height:70%;max-height:100%;border-radius:16px;background: linear-gradient(0deg, rgba(234,44,44,1) 0%, rgba(255,207,84,1) 100%);}
#diagnosis .diagnosis2 .content2 .graph .gauge .bar:before{content:'';position:absolute;top:4px;left:4px;width:8px;height:8px;background:url("../images/gauge_up.svg") no-repeat 50% 50% ;}
#diagnosis .diagnosis2 .content2 .graph .gauge .bar:after{content:'';position:absolute;bottom:4px;left:4px;width:8px;height:8px;background:url("../images/gauge_down.svg") no-repeat 50% 50% ;}
#diagnosis .diagnosis2 .content2 .graph .label{display:flex;gap:16px;justify-content:center;align-items:center;}
#diagnosis .diagnosis2 .content2 .graph .label span{display:flex;align-items:center;}
#diagnosis .diagnosis2 .content2 .graph .label span i{display:block;width:15px;height:2px;background:#000;flex-shrink:0;margin-right:4px;}
#diagnosis .diagnosis2 .content2 .graph .label span i.label_blue{background:#5278f0;}
#diagnosis .diagnosis2 .content2 .graph .label span i.label_red{background:#c60000;}
#diagnosis .diagnosis2 .content2 .graph .label span i.label_yellow{background:#f9ca52;}
#diagnosis .diagnosis2 .content2 .graph .label span p{font-size:10px;font-weight:500;color:#3a3a3a;}
#diagnosis .diagnosis2 .content2 .graph .chart{width: 100%;display: flex;align-items: center;justify-content: center;}
#diagnosis .diagnosis2 .content2 .graph .chart img{width:100%;height:auto;} */
#diagnosis .diagnosis3{margin:0 0 56px;}
#diagnosis .diagnosis3 .content1{margin:0 0 24px;padding:16px;border-radius:12px;background:#ffffff;box-shadow:0 2px 8px rgba(0,0,0,0.08)}
#diagnosis .diagnosis3 .content1 .chart{position:relative;width:224px;max-width:100%;margin:0 auto 16px;}
#diagnosis .diagnosis3 .content1 .chart img{width:100%;height:auto;}
#diagnosis .diagnosis3 .content1 .chart em{position:absolute;bottom:0;left:0;width:100%;text-align:center;font-size:20px;font-weight:600;}
#diagnosis .diagnosis3 .content1 .history{padding:8px 0;margin:0 0 8px;}
#diagnosis .diagnosis3 .content1 .history ul{display:flex;gap:8px;}
#diagnosis .diagnosis3 .content1 .history li{flex: 0 0 auto;width: calc(25% - 6px);border-radius:8px;background:#f8f8f8;text-align:center;padding:8px 12px;}
#diagnosis .diagnosis3 .content1 .history li span{display:block;margin-bottom:8px;line-height:1;font-size:12px;font-weight:500;color:#7c7e84;}
#diagnosis .diagnosis3 .content1 .history li em{display:block;line-height:1;font-size:12px;font-weight:700;margin-bottom:8px;}
#diagnosis .diagnosis3 .content1 .history li strong{display:block;line-height:1;font-size:16px;font-weight:700;}
#diagnosis .diagnosis3 .content1 .text{padding:16px;border-radius:8px;background:#f8f8f8;text-align:center;}
#diagnosis .diagnosis3 .content1 .text dl{display:flex;align-items:center;justify-content:center;}
#diagnosis .diagnosis3 .content1 .text dt{display:flex;align-items:center;font-weight:600;font-size:14px;white-space:nowrap;margin-right:4px;}
#diagnosis .diagnosis3 .content1 .text dt img{width:20px;height:20px;flex-shrink:0;margin-right:8px;}
#diagnosis .diagnosis3 .content1 .text dd{line-height:20px;font-size:12px;font-weight:600;}
#diagnosis .diagnosis3 .content1 .text dd strong{font-size:16px;font-weight:700;}
#diagnosis .diagnosis3 .content1 .tip{margin-top:16px;line-height:16px;font-size:12px;font-weight:500;color:#7c7e84;text-align:center;}
#diagnosis .diagnosis3 .content2{padding:16px;border-radius:12px;background:#ffffff;box-shadow:0 2px 8px rgba(0,0,0,0.08)}
#diagnosis .diagnosis3 .content2 .title{line-height:24px;display:flex;align-items:center;font-size:16px;font-weight:600;color:#1d2a53;margin:0 0 16px;}
#diagnosis .diagnosis3 .content2 .title img{flex-shrink:0;margin:0 2px 0 0;padding:2px;width:24px;height:24px;}
#diagnosis .diagnosis3 .content2 .chart{position:relative;margin-bottom:16px;}
#diagnosis .diagnosis3 .content2 .chart img{width:100%;height:auto;}
#diagnosis .diagnosis3 .content2 .tip{margin-top:16px;line-height:16px;font-size:12px;font-weight:500;color:#7c7e84;text-align:center;}
#diagnosis .diagnosis4{margin:0 0 56px;}
#diagnosis .diagnosis4 .content1{margin:0 0 24px;padding:16px;border-radius:12px;background:#ffffff;box-shadow:0 2px 8px rgba(0,0,0,0.08)}
#diagnosis .diagnosis4 .content1 .chart{position:relative;width:224px;max-width:100%;margin:8px auto 16px;}
#diagnosis .diagnosis4 .content1 .chart img{width:100%;height:auto;}
#diagnosis .diagnosis4 .content1 .chart em{position:absolute;bottom:0;left:0;width:100%;text-align:center;font-size:20px;font-weight:600;}
#diagnosis .diagnosis4 .content1 .history{padding:8px 0;margin:0 0 8px;}
#diagnosis .diagnosis4 .content1 .history ul{display:flex;gap:8px;}
#diagnosis .diagnosis4 .content1 .history li{flex: 0 0 auto;width: calc(25% - 6px);border-radius:8px;background:#f8f8f8;text-align:center;padding:8px 12px;}
#diagnosis .diagnosis4 .content1 .history li span{display:block;margin-bottom:8px;line-height:1;font-size:12px;font-weight:500;color:#7c7e84;}
#diagnosis .diagnosis4 .content1 .history li em{display:block;line-height:1;font-size:12px;font-weight:700;margin-bottom:8px;}
#diagnosis .diagnosis4 .content1 .history li strong{display:block;line-height:1;font-size:16px;font-weight:700;}
#diagnosis .diagnosis4 .content1 .text{padding:16px;border-radius:8px;background:#f8f8f8;text-align:center;}
#diagnosis .diagnosis4 .content1 .text dl{display:flex;align-items:center;justify-content:center;}
#diagnosis .diagnosis4 .content1 .text dt{display:flex;align-items:center;font-weight:600;font-size:14px;white-space:nowrap;margin-right:4px;}
#diagnosis .diagnosis4 .content1 .text dt img{width:20px;height:20px;flex-shrink:0;margin-right:8px;}
#diagnosis .diagnosis4 .content1 .text dd{line-height:20px;font-size:12px;font-weight:600;}
#diagnosis .diagnosis4 .content1 .text dd strong{font-size:16px;font-weight:700;}
#diagnosis .diagnosis4 .content1 .text small{margin-top:16px;line-height:16px;font-size:12px;font-weight:500;color:#7c7e84;text-align:center;}
#diagnosis .diagnosis4 .content1 .tip{margin-top:16px;line-height:16px;font-size:12px;font-weight:500;color:#7c7e84;text-align:center;}
#diagnosis .diagnosis4 .content2{margin:0 0 24px;padding:16px;border-radius:12px;background:#ffffff;box-shadow:0 2px 8px rgba(0,0,0,0.08)}
#diagnosis .diagnosis4 .content2 .flex{display:flex;justify-content:space-between;margin:0 0 16px;}
#diagnosis .diagnosis4 .content2 .title{line-height:24px;display:flex;align-items:center;font-size:16px;font-weight:600;color:#1d2a53;margin:0 0 16px;}
#diagnosis .diagnosis4 .content2 .title img{flex-shrink:0;margin:0 2px 0 0;padding:2px;width:24px;height:24px;}
#diagnosis .diagnosis4 .content2 .checkbox{display: flex;align-items: center;gap: 8px;margin:0 0 16px;}
#diagnosis .diagnosis4 .content2 .checkbox label{display: flex;align-items: center;cursor: pointer;}
#diagnosis .diagnosis4 .content2 .checkbox label input{display: none;}
#diagnosis .diagnosis4 .content2 .checkbox label input ~ i{position:relative;margin: 0 4px 0 0;width: 16px;height: 16px;border-radius: 16px;border: 1px solid #ededed;background: #fff;}
#diagnosis .diagnosis4 .content2 .checkbox label input ~ span{line-height: 20px;font-size: 12px;color: #7C7E84;}
#diagnosis .diagnosis4 .content2 .checkbox label input ~ span strong{line-height: 20px;font-size: 20px;font-weight: 700;margin: 0 2px 0 0;}
#diagnosis .diagnosis4 .content2 .checkbox label input:checked ~ i{background: #1d2a53;border-color: #1d2a53;}
#diagnosis .diagnosis4 .content2 .checkbox label input:checked ~ i:before{content:'';position:absolute;top: 3px;left: 3px;width:8px;height:8px;border-radius:8px;background:#e9eaee;}
#diagnosis .diagnosis4 .content2 .checkbox label input:checked ~ span{color: #1d2a53;}
#diagnosis .diagnosis4 .content2 .chart{position:relative;margin:0 auto 16px;}
#diagnosis .diagnosis4 .content2 .chart img{width:100%;height:auto;}
#diagnosis .diagnosis4 .content2 .tip{margin-top:16px;line-height:16px;font-size:12px;font-weight:500;color:#7c7e84;text-align:center;}

/**/
.invest_popup{position:fixed;z-index:1011;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;opacity:0;visibility:hidden;}
.invest_popup.is-active{opacity:1;visibility:visible;}
.invest_popup .popup{position:relative;z-index:2;display:flex;flex-direction:column;width:100%;max-width:320px;max-height:calc(100vh - 56px - 54px - 20px);border-radius:12px;background:#ffffff;overflow:hidden;overflow-y:auto;box-shadow:0 4px 16px rgba(0,0,0,0.16);}
.invest_popup .content{padding:24px 20px;}
.invest_popup .content .title{line-height:26px;font-size:20px;font-weight:700;color:#1d2a53;margin-bottom:16px;}
.invest_popup .content .name{line-height:23px;font-size:16px;font-weight:700;color:#1d2a53;margin-bottom:8px;}
.invest_popup .content .text{line-height:23px;font-size:14px;font-weight:400;color:#3a3a3a;}
.invest_popup .button{position:sticky;bottom:0;z-index:2;display:block;}
.invest_popup .button button{display:flex;width:100%;height:56px;align-items:center;justify-content:center;text-align:center;font-size:16px;font-weight:500;color:#fff;background:#1d2a53;}
.invest_popup .dimmed{position:fixed;z-index:1;top:0;left:0;width:100%;height:100%;background:#000;opacity:0.5}

/**/
.info_popup{position:fixed;z-index:1011;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;opacity:0;visibility:hidden;}
.info_popup.is-active{opacity:1;visibility:visible;}
.info_popup .popup{position:relative;z-index:2;display:flex;flex-direction:column;width:100%;max-width:320px;max-height:calc(100vh - 56px - 54px - 20px);border-radius:12px;background:#ffffff;overflow:hidden;overflow-y:auto;box-shadow:0 4px 16px rgba(0,0,0,0.16);}
.info_popup .content{padding:24px 20px;}
.info_popup .content .title{line-height:26px;font-size:20px;font-weight:700;color:#1d2a53;text-align:center;margin-bottom:16px;}
.info_popup .content .text{line-height:24px;font-size:14px;font-weight: 400;color:#3a3a3a;}
.info_popup .content .list{}
.info_popup .content .list ul{}
.info_popup .content .list li{position:relative;margin-bottom:22px;}
.info_popup .content .list li:last-child{margin:0;}
.info_popup .content .list li strong{display:flex;align-items:flex-start;margin-bottom:8px;color:#1D2A53;line-height:20px;font-size:14px;}
.info_popup .content .list li strong img{margin-right:4px;}
.info_popup .content .list li span{padding-left:20px;display:block;line-height:18px;font-size:14px;color:#3a3a3a;letter-spacing:-1px;}
.info_popup .content .list li span em{font-weight:700;}
.info_popup .button{position:sticky;bottom:0;z-index:2;display:block;}
.info_popup .button button{display:flex;width:100%;height:56px;align-items:center;justify-content:center;text-align:center;font-size:16px;font-weight:500;color:#fff;background:#1d2a53;}
.info_popup .dimmed{position:fixed;z-index:1;top:0;left:0;width:100%;height:100%;background:#000;opacity:0.5}

/**/
.stock_popup{position:fixed;z-index:1011;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;opacity:0;visibility:hidden;}
.stock_popup.is-active{opacity:1;visibility:visible;}
.stock_popup .popup{position:relative;z-index:2;display:flex;flex-direction:column;width:100%;max-width:320px;max-height:calc(100vh - 56px - 54px - 20px);border-radius:12px;background:#ffffff;overflow:hidden;overflow-y:auto;box-shadow:0 4px 16px rgba(0,0,0,0.16);}
.stock_popup .content{padding:24px 20px;}
.stock_popup .content .title{line-height:26px;font-size:20px;font-weight:700;color:#1d2a53;text-align:center;margin-bottom:16px;}
.stock_popup .content .upper{line-height:24px;font-size:14px;font-weight:600;color:#1d2a53;text-align:center;margin-bottom:8px;}
.stock_popup .content .upper img{width:20px;height:20px;vertical-align:top;display:inline-flex;box-shadow:0 2px 4px rgba(0,0,0,.08);}
.stock_popup .content .text{line-height:24px;font-size:14px;font-weight: 400;color:#3a3a3a;}
.stock_popup .button{position:sticky;bottom:0;z-index:2;display:block;}
.stock_popup .button button{display:flex;width:100%;height:56px;align-items:center;justify-content:center;text-align:center;font-size:16px;font-weight:500;color:#fff;background:#1d2a53;}
.stock_popup .dimmed{position:fixed;z-index:1;top:0;left:0;width:100%;height:100%;background:#000;opacity:0.5}

/**/
.diagnosis_popup{position:fixed;z-index:1011;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;opacity:0;visibility:hidden;}
.diagnosis_popup.is-active{opacity:1;visibility:visible;}
.diagnosis_popup .popup{position:relative;z-index:2;display:flex;flex-direction:column;width:100%;max-width:320px;max-height:calc(100vh - 56px - 54px - 20px);border-radius:12px;background:#ffffff;overflow:hidden;overflow-y:auto;box-shadow:0 4px 16px rgba(0,0,0,0.16);}
.diagnosis_popup .content{padding:24px 20px;}
.diagnosis_popup .content .title{line-height:26px;font-size:20px;font-weight:700;color:#1d2a53;text-align:center;margin-bottom:16px;}
.diagnosis_popup .content .text{}
.diagnosis_popup .content .text .ico{flex:0 0 auto;margin:0 4px 0 0;width:16px;height:20px}
.diagnosis_popup .content .text .ico img{display:block;object-fit:contain;width:100%;height:100%;}
.diagnosis_popup .content .text .tit{line-height:20px;font-size:14px;font-weight:600;color:#1d2a53;}
.diagnosis_popup .content .text .txt{padding-left:20px;line-height:22px;font-size:14px;color:#3a3a3a;}
.diagnosis_popup .content .text .txt span{font-weight:700;color:#3a3a3a;}
.diagnosis_popup .content .text .txt strong{font-weight:700;color:#1d2a53;}
.diagnosis_popup .content .flex{display:flex;margin:0 0 8px;align-items:flex-start;}
.diagnosis_popup .content .flex:last-child,
.diagnosis_popup .content .flex:nth-last-of-type(1){margin:0;}
.diagnosis_popup .button{position:sticky;bottom:0;z-index:2;display:block;}
.diagnosis_popup .button button{display:flex;width:100%;height:56px;align-items:center;justify-content:center;text-align:center;font-size:16px;font-weight:500;color:#fff;background:#1d2a53;}
.diagnosis_popup .dimmed{position:fixed;z-index:1;top:0;left:0;width:100%;height:100%;background:#000;opacity:0.5}

/**/
#diagnosis2{}
#diagnosis2 .text{}
#diagnosis2 .text .txt{font-weight:600;}

/**/
#diagnosis3{}
#diagnosis3 .text{}
#diagnosis3 .text .txt{font-weight:600;}

/**/
#main_popup{position:fixed;z-index: 1000;top:0;left:50%;width:500px;max-width:100%;height:100%;display:flex;flex-direction:column;justify-content:flex-end;opacity:0;visibility:hidden;transform:translateX(-50%)}
#main_popup.is-active{opacity:1;visibility:visible;}
#main_popup .popup{position:relative;z-index:2;padding:24px;width:100%;border-radius:16px 16px 0 0;background:#ffffff;}
#main_popup .area{}
#main_popup .area .desc{padding:12px 0;border-bottom:1px solid #ededed;}
#main_popup .area .desc a{display:flex;align-items:center;}
#main_popup .area .desc .img{flex-shrink:0;margin:0 16px 0 0;width:72px;height:72px;}
#main_popup .area .desc .img img{display:block;width:100%;height:100%;object-fit:contain;}
#main_popup .area .desc .con{flex:1;position:relative;}
#main_popup .area .desc .con:after{content:'';position:absolute;top:50%;right:0;transform:translateY(-50%);width:16px;height:16px;background:url("../images/icon_arrow_right.svg") no-repeat 50% 50% / contain;}
#main_popup .area .desc .con .txt{margin-bottom:4px;line-height:16px;font-size:12px;font-weight:500;color:#7c7e84;letter-spacing:-1px;}
#main_popup .area .desc .con .tit{line-height:24px;font-size:16px;font-weight:700;color:#1d2a53;}
#main_popup .tool{padding:16px 0;display:flex;justify-content:space-between;align-items:center;}
#main_popup .tool button{line-height:16px;font-size:12px;color:#7c7e84;background:transparent;}
#main_popup .tool button.today{}
#main_popup .tool button.close{}
#main_popup .dimmed{position:fixed;z-index:1;top:0;left:0;width:100%;height:100%;background: rgba(0,0,0,0.3);backdrop-filter: blur(12px);-webkit-backdrop-filter: blur(12px);}

.fg_graph{position:relative;margin-bottom:16px;display:flex;}
.fg_graph .lt{flex:0 0 auto}
.fg_graph .rt{flex:1}
.fg_graph .gauge{display:flex;flex-direction:column;height:100%;}
.fg_graph .gauge .txt{flex:0 0 auto;display:flex;align-items:center;gap:4px;font-size:10px;font-weight:500;color:#3a3a3a;}
.fg_graph .gauge .txt img{display:block;width:20px;height:20px;object-fit:contain}
.fg_graph .gauge .bar{position:relative;margin:8px auto;width:16px;height:70%;max-height:100%;border-radius:16px;background: linear-gradient(0deg, rgba(234,44,44,1) 0%, rgba(255,207,84,1) 100%);}
.fg_graph .gauge .bar:before{content:'';position:absolute;top:4px;left:4px;width:8px;height:8px;background:url("../images/gauge_up.svg") no-repeat 50% 50% ;}
.fg_graph .gauge .bar:after{content:'';position:absolute;bottom:4px;left:4px;width:8px;height:8px;background:url("../images/gauge_down.svg") no-repeat 50% 50% ;}
.fg_graph .label{display:flex;gap:16px;justify-content:center;align-items:center;}
.fg_graph .label span{display:flex;align-items:center;}
.fg_graph .label span i{display:block;width:15px;height:2px;background:#000;flex-shrink:0;margin-right:4px;}
.fg_graph .label span i.label_blue{background:#5278f0;}
.fg_graph .label span i.label_red{background:#c60000;}
.fg_graph .label span i.label_yellow{background:#f9ca52;}
.fg_graph .label span p{font-size:10px;font-weight:500;color:#3a3a3a;}
.fg_graph .chart{width: 100%;display: flex;align-items: center;justify-content: center;}
.fg_graph .chart img{width:100%;height:auto;}

.saying{display:flex;flex-direction:column;padding:16px;border-radius:12px;background:#ffffff;align-items:center;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,0.08)}
.saying img{width:32px;height:32px;margin:0 auto 8px;}
.saying strong{line-height:20px;font-size:16px;font-weight:700;color:#1d2a53;}
.saying span{margin:12px 0 0 0;line-height:16px;font-size:12px;color:#3a3a3a;font-family:'Noto Serif KR'}

.howto{padding:24px 20px;border-radius:12px;background:#ffffff;box-shadow:0 2px 8px rgba(0,0,0,0.08)}
.howto .checkbox{display: flex;align-items: center;gap: 16px;margin:0 0 16px;}
.howto .checkbox label{display: flex;align-items: center;cursor: pointer;}
.howto .checkbox label input{display: none;}
.howto .checkbox label input ~ i{position:relative;margin: 0 4px 0 0;width: 16px;height: 16px;border-radius: 16px;border: 1px solid #ededed;background: #fff;}
.howto .checkbox label input ~ span{line-height: 20px;font-size: 12px;color: #7C7E84;}
.howto .checkbox label input ~ span strong{line-height: 20px;font-size: 20px;font-weight: 700;margin: 0 2px 0 0;}
.howto .checkbox label input:checked ~ i{background: #1d2a53;border-color: #1d2a53;}
.howto .checkbox label input:checked ~ i:before{content:'';position:absolute;top: 3px;left: 3px;width:8px;height:8px;border-radius:8px;background:#e9eaee;}
.howto .checkbox label input:checked ~ span{color: #1d2a53;}
.howto .chart{position:relative;margin-bottom:16px;}
.howto .chart img{width:100%;height:auto;}
.howto .tip{margin-top:16px;line-height:16px;font-size:12px;font-weight:500;color:#7c7e84;text-align:left;}


/* hot list 20240908 */
.sub_page .content1{padding:16px !important}
.sub_page .tip{font-size:10px !important}
.info_txt_wrap{padding:36px 0}
.info_txt_wrap h3{text-align:center;margin-bottom:56px}
.info_txt_wrap .biz_info{font-size:12px;font-weight:400;color:#7C7E84;line-height:16px;margin-bottom:6px;width:100%;max-width: 360px;}
.info_txt_wrap .biz_info ul{display:flex; align-item:center;gap:12px}
.info_txt_wrap .biz_info ul .indent_li{text-indent:-8px;padding-left:8px}

/* 홈 화면 더보기 */
#main .main9 .head .more a {display: flex;align-items: center;justify-content: center;font-size: 12px;color: #7c7e84;white-space: nowrap;}

/* 종목 검색 버튼 */
.btn_stock_search{background:#1D2A53; font-size:12px;font-weight:600;height:40px;line-height:40px;border-radius:8px;color:#fff;width:57px;text-align:center;flex-shrink:0}

/* 종목 검색 화면 */
.search_title_wrap{display:flex;align-items:center;gap:4px;width:100%;}

.sub_page .search_title_wrap {margin-bottom:8px}
.sub_page .search_title_wrap .dropdown{flex:1}
.sub_page .search_title_wrap .dropdown-toggle{width:100%}

.result_num {padding:5px;border-radius:20px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,0.08); text-align:center;font-size:12px;font-weight:400; margin-bottom:8px}
.result_num span{font-weight:700}

.search_result_list{padding:16px;border-radius:12px;background:#fff;min-height:322px;}
.search_result_list ul{padding:10px 6px; border-bottom:1px solid #EDEDED;display:flex}
.search_result_list ul li{flex:1;font-size:12px;line-height:16px;}
.search_result_list ul li:nth-child(2){text-align:right}
.search_result_list ul li span{display:block;font-size:10px}

/* 종목 검색 화면, 주식, ETF */
.filter_wrap{display:flex; gap:8px;align-items:center;margin-bottom:16px }
.filter_wrap .tabs{flex:1;margin-bottom:0 !important }

.toggle_box input[type="checkbox"]{display:none}
.toggle_box label{display:block;width:56px;height:26px;background:url("../images/toggle_etf.svg") no-repeat center; cursor:pointer;transition:all .3s}
.toggle_box input[type="checkbox"]:checked ~ label{background:url("../images/toggle_stock.svg") no-repeat center}

.dropdown{position:relative;}
.dropdown-toggle{display:flex;font-size: 12px;padding: 8px 8px 8px 16px;min-width: 128px;border-radius: 4px;height: 32px;font-size:12px;color:#3a3a3a;background:#fff;border:1px solid #ededed;align-items: center;}
.dropdown-toggle span{display:block;width:100%;text-align:left;}
.dropdown-toggle i{margin-left: 6px;width:16px;height:16px;background:url("../images/icon_arrow_down.svg") no-repeat 50% 50% / contain}
.dropdown-menu{position:absolute;top:36px;left:0;width:100%;display:flex;flex-direction:column;z-index:2;height:310px;max-height:30vh;overflow-y:auto;border-radius:4px;background:#ffffff;box-shadow:0 12px 32px rgb(145 158 171 / 24%);display:none;}
.dropdown-menu{-ms-overflow-style: none;scrollbar-width: none;}
.dropdown-menu::-webkit-scrollbar {display: none; }
.dropdown-menu option{line-height: 36px;padding: 0 10px;font-size: 14px;white-space:nowrap;}
.dropdown-menu option:hover{background:#f4f4f4}
.dropdown-menu a{line-height:36px;padding:0 10px;font-size:12px;white-space:nowrap;}
.dropdown-menu a:hover{background:#f4f4f4}
.dropdown.show .dropdown-toggle i{transform:rotate(180deg)}
.dropdown.show .dropdown-menu{display:flex;}
.dropdown.show .dropdown-menu{flex-direction:row}
.dropdown.show .dropdown-menu{display:flex;flex-direction:column;flex:1}

.filter_wrap .dropdown-toggle {min-width:89px}
.filter_wrap .dropdown-menu option {font-size:12px}

.sub_page .search_title_wrap {margin-bottom:8px}
.sub_page .search_title_wrap .dropdown{flex:1}
.sub_page .search_title_wrap .dropdown-toggle{width:100%}

.result_num {padding:5px;border-radius:20px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,0.08); text-align:center;font-size:12px;font-weight:400; margin-bottom:8px}
.result_num span{font-weight:700}

.search_result_list ul{padding:10px 6px; border-bottom:1px solid #EDEDED;display:flex}
.search_result_list ul li{flex:1;font-size:12px;line-height:16px;}
.search_result_list ul li:nth-child(2){text-align:right}
.search_result_list ul li span{display:block;font-size:10px}

/* ETF 포트폴리오 */
.greet.comment{font-size:20px;color:#1D2A53}
.greet.comment p{font-size:14px;font-weight:400;}

/* 포트폴리오 */
#portfolio .container .investment .invest2 .swiper-slide{padding:16px 12px;width:150px;min-height:80px;border-radius:8px;background:#fff;box-shadow: 0 4px 8px rgb(0 0 0 / 6%);display:flex;flex-direction:column;cursor:pointer; text-align:center}
#portfolio .container .investment .invest2 .active{background:#1D2A53;}

#portfolio .container .card .swiper-slide.purple_card{width:calc(33% - 10px);height:80px;min-height:initial;font-size:14px;border-radius:12px;box-shadow: 0px 2px 8px 0px rgb(0 0 0 / 8%);}
#portfolio .container .card .swiper-slide.purple_card .tit{color:#835ADC;font-weight:700;font-size:16px;}
#portfolio .container .card .swiper-slide.purple_card.swiper-slide-active{background:#835ADC;color:#fff}
#portfolio .container .card .swiper-slide.purple_card.swiper-slide-active .tit{color:#fff}

/* 분석/진단 */
#diagnosis .chart .gauge{display:flex;flex-direction:column;height:100%;}
#diagnosis .chart .gauge .txt{flex:0 0 auto;display:flex;align-items:center;gap:4px;font-size:10px;font-weight:500;color:#3a3a3a;width:45px;}
#diagnosis .chart .gauge .txt img{display:block;width:20px;height:20px;object-fit:contain}
#diagnosis .chart .gauge .bar{position:relative;margin:8px auto;width:16px;height:70%;max-height:100%;border-radius:16px;background: linear-gradient(0deg, rgba(234,44,44,1) 0%, rgba(255,207,84,1) 100%);}
#diagnosis .chart .gauge .bar.type2{background: linear-gradient(180deg, #FFAB5D 0.67%, #6A8EFF 100%);}
#diagnosis .chart .gauge .bar:before{content:'';position:absolute;top:4px;left:4px;width:8px;height:8px;background:url("../images/gauge_up.svg") no-repeat 50% 50% ;}
#diagnosis .chart .gauge .bar:after{content:'';position:absolute;bottom:4px;left:4px;width:8px;height:8px;background:url("../images/gauge_down.svg") no-repeat 50% 50% ;}

#diagnosis .tabs{display:flex;gap:8px;margin-bottom:16px;}
#diagnosis .tabs .tab{flex:1;display:flex;align-items:center;justify-content:center;height:26px;border-radius:4px;background:#fff;font-size:12px;color:#7c7e84;}
#diagnosis .tabs .tab.selected{background:#1d2a53;color:#fff;}
#diagnosis .tabs.st_2 .tabbutton.tabs {flex-wrap:wrap;}
#diagnosis .tabs.st_2 .tabbutton.tabs .tab{flex:initial;padding:0 10px}

#diagnosis .diagnosis4 .content1.promising_cont{padding: 0 0 16px}
#diagnosis .diagnosis4 .content1.promising_cont .chart{width:100%}
#diagnosis .diagnosis4 .content1.promising_cont .history{padding:8px 16px}
#diagnosis .diagnosis4 .content1.promising_cont .text{margin:0 16px}
#diagnosis .diagnosis4 .content1.promising_cont .tip{padding:0 16px}

/* 사이드 메뉴 */
.side_menu_box{width:80%;height:100vh;background:#fff;position:absolute;top:0;right:0;display:flex;flex-direction:column;padding-top:68px}
.side_menu_box a{width:100%;height:58px;padding:17px 30px; font-size:15px;color:#3B4652;font-weight:600; line-height:24px;background:url(../images/ico_snb_arr.svg) no-repeat right 30px center}
.side_menu_box a img{margin-right:10px; width:24px;height:24px}
.side_menu_box .btn_close{position:absolute;top:14px;right:13px; width:44px;height:44px;padding:0; background:none}
.side_menu_box .btn_close img{padding-right:0;width:44px;height:44px}