@charset "UTF-8";
a, :hover{transition-duration: 0.3s;}
.header{border-bottom: 1px solid #eee;}

.container{ padding-bottom: 30px;}
.container.bg-gray{ background-color: #f2f5f8; position: relative;}
.container.bg-gray::before{content: ''; width: 100%; height: 200px;  background: linear-gradient(to bottom, #f2f5f8 0%,#ffffff 100%); position: absolute; bottom: 0; }
.container .pagesize{position: relative;}
.container .pagesize p, .container .pagesize li{line-height: 140%;}


/*按鈕*/
a.btn{border-radius: 8px; height: 48px; font-size: 16px; background-color: #EEEBF8; color: #5A5ECA; display: flex; justify-content: center; align-items: center;}
a.btn:hover{ background-color: #5A5ECA; color: #EEEBF8;}
a.btn.linear{background: linear-gradient(300deg, #8C79FF 26.85%, #4D75D4 106.42%, #8AFDF3 158.41%); color: #fff;}
a.btn.linear:hover{ background: linear-gradient(-300deg, #8C79FF 26.85%, #4D75D4 106.42%, #8AFDF3 158.41%); color: #fff;}

a.btn.btn-red{background-color: #FE3371; color: #fff;}
a.btn.fix-top{position: absolute; top: 0; right: 10px;}
a.btn.in-order{ height: 40px; padding: 0 20px;}

.ic-btn{width: 24px; height: 24px; display: inline-block; vertical-align: bottom; margin: 0 10px;}
.ic-btn.btn-copy{ background: url(../images/btn_copy.svg) center / contain no-repeat;}

/*樣式*/
.ol-list{
  list-style: decimal;
}

/*文字連結*/
.txt-link{color: #000; border-bottom: 1px solid #000; }
.txt-link.light{color: #5278F6;border-bottom: 1px solid #5278F6;}
.txt-link:hover{border-bottom-color:transparent;}

.link-light{ color: #799FCF; transition-duration: .3;}
.link-light:hover{color: #5A5ECA;}

/*輸入欄位*/
.input_bx{ border-radius: 8px; border: 1px solid #E7E7E7; display: flex; align-items: stretch;}
.input_bx .input_tit{ flex: 1 0 90px; color: #333; font-size: 16px; font-weight: bold; display: flex;  align-items: center; padding: 0 10px;}
.input_bx input{flex: 1 1 100%; font-size: 16px;}
input[type="text"],
input[type="password"]{height: 48px;}
.ic-pw{ width: 48px; height: 48px; background: url(../images/ic_eye.svg) center / 24px no-repeat; display: block; flex: 1 0 40px; }
.ic-pw.close{ background-image: url(../images/ic_eye_off.svg); }
.side-btn{  font-size: 16px; background-color: #EEEBF8; color: #5A5ECA; display: flex; justify-content: center; align-items: center; padding: 0 10px;white-space:nowrap; }
.hr{ width: 100%; height: 1px; background-color: #DDDDDD;}

.input_bx.enter input{ text-align: center; background-color: #FAF9FB; font-size: 18px;}


.input_bx select{
    border: none; background-color: transparent;
}


.warning{font-size: 14px; color: #5278F6; position: relative; display: flex; align-items: center;}
.warning::before{content: ''; width: 20px; height: 20px; background: url(../images/ic-warning.svg) center / contain no-repeat; flex: 0 0 24px;}

/*大圖banner*/
.plan_flex{display: flex; justify-content: space-between; width: 500px;}
.plan_bx{border: 2px solid; border-radius: 8px; background-color: #fff; width: 240px;}
.plan_bx .plan_tit{padding:10px; color: #fff; font-size: 30px;line-height: 30px; font-weight: bold; text-align: center;}
.plan_bx .plan_price{display: flex; align-items: center; justify-content: center; padding: 20px 10px; gap: 5px;}
.plan_bx .unit{font-size: 30px; line-height: 30px;}
.plan_bx .price{font-size: 42px; line-height: 48px; font-weight: bold;}
.plan_bx.month{ border-color: #E659A1; color: #E659A1;}
.plan_bx.month .plan_tit{background-color:#E659A1;}
.plan_bx.year{ border-color: #5A5ECA; color: #5A5ECA;}
.plan_bx.year .plan_tit{background-color:#5A5ECA;}

/*麵包屑*/
.breadcrumb {position: relative;width: 100%; padding:20px 0 0;}
.breadcrumb ul{display: flex; gap: 5px;}
.breadcrumb ul li{font-size: 16px; color: #2D2D2F; position: relative;}
.breadcrumb ul li::before{content: '/'; margin-right: 5px;}
.breadcrumb ul li:first-child:before{display: none;}
.breadcrumb ul li a{color:#5A5ECA;}


/*登入&註冊*/
.container.login_bx{ display: flex; min-height: 700px; margin: 0; padding: 0;}
.login_bx > div{flex: 0 0 50%; align-items: stretch;}
.login_bx .r-bx{background:url(../images/log_bg.png) center / cover no-repeat;}
.login_bx .l-bx{background-color: #fff; display: flex; justify-content: end; align-items: center;  padding: 20px 150px 20px 20px;}
.login_bx h2{text-align: center; color: #000; font-size: 30px; font-weight:500;}
.login_bx .l-bx .form_bx{ width: 400px; display: flex; flex-direction: column; gap: 30px;}

.form_li {display: flex; flex-direction: column; gap: 20px;}
.form_li li{display: flex; flex-direction: column; gap: 10px;}
.form_li li.j-between{flex-direction: row; justify-content: space-between;}

.form_bx .form_bt{ display: flex; flex-direction: column; gap: 10px;}

/*分類頁籤*/
.category_tab{display: flex; align-items: stretch; width: 100%;}
.category_tab > li{flex: 1 1 auto;}
.category_tab a{display: flex; justify-content: center; align-items: center; border-bottom: 3px solid #2D2D2F; color: #2D2D2F; font-size: 22px; font-weight: bold; height: 60px;}
.category_tab .on a, .category_tab > li:hover a{color: #5A5ECA; border-color: #5A5ECA;}

.item_tab{display: flex; align-items: center;  flex-wrap: wrap; gap: 30px;}
.item_tab > li{flex: 1 1 auto;}
.item_tab a{display: flex; justify-content: center; align-items: center;color: #2D2D2F; font-size: 22px; font-weight: bold; height: 60px; border-radius: 16px;  background-color: #fff; width: 100%; padding: 0 10px;}
.item_tab .on a,.item_tab > li:hover a {color: #000; background-color: #F1BD20;}

.tab_bar{display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #DDDDDD; }
.tab_bar .date{color: #222; font-size: 16px; white-space: nowrap;}

.tab_bar .category_tab_sm{margin-bottom: -1px; flex: 1 1 auto;}
.category_tab_sm{display: flex; align-items: stretch; width: 100%;}
.category_tab_sm a{display: flex; justify-content: center; align-items: center; border-bottom: 1px solid #2D2D2F; color: #2D2D2F; font-size:18px; font-weight: bold; height: 40px; padding: 0 10px;}
.category_tab_sm .on a, .category_tab_sm > li:hover a{color: #5A5ECA; border-color: #5A5ECA;}



/*內頁標題*/
.inner_tit{ font-size: 24px; position: relative;  padding: 8px 0 0 14px; min-height: 40px;}
.inner_tit::before{content: ''; width: 6px; height: 40px; background-color: #F1BD20; position: absolute; top: 0; left: 0; border-radius: 10px;}

.title_squar_ylw {
    line-height: 1.5;
    display: flex;
    align-items: center;
    gap: 8px;
}

.title_squar_ylw::before {
    content: "";
    width: 10px;
    height: 10px;
    display: block;
    background: #F1BD20;
}

.title_squar_ylw h3{font-size: 20px; font-weight: bold; color: #222222;}

.tit_flex{display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px;}
.tit_flex_tit{font-size: 30px; font-weight: bold;}
.tit_flex .input_bx{ width: 300px;}


.chart_bx, .chart_bx .chart_item{display: flex; align-items: center; gap: 5px;}
.chart_bx.s-between{ justify-content: space-between; width: 100%;  border-bottom: 1px solid #DFE7F1; padding-bottom: 10px;}
.chart_item .unit{color: #888888; font-size: 16px;}


/*說明*/
.manual_bx{position: relative;}
.bottom_manual{
  font-size: 18px;  color: #3F3F3F; background-color: #F8F8F8; border-radius: 8px; padding: 20px;
}
.bottom_manual_tit{
  font-size: 22px; border-bottom: 1px solid #DDDDDD; font-weight: 500; padding: 0 0 15px; margin-bottom: 20px;
}
.bottom_manual .ol-list{ margin-left: 20px;}
.bottom_manual .ol-list li{font-size: 18px;  color: #3F3F3F;}

/*圓框*/
.round_bx{
border-radius: 20px; padding: 30px;
background: #FFF;
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.25);
}

.round_tit{font-size: 36px; color: #000; margin-bottom: 20px;}

.round_in_bx{ background-color: #F4F4F4; border-radius: 8px; padding: 20px 10px;color: #000; }
.round_in_bx ul{ display: flex; justify-content: space-between;}
.round_in_bx ul > li{ flex: 1 1 50%; padding: 0 20px; border-left: 1px solid #D8D8D8;}
.round_in_bx ul > li:first-child{border-left: none;}
.round_in_bx ul ol{list-style-type: disc; margin-left: 20px; font-size: 16px;}
.round_in_bx li{line-height: 140%;margin-bottom: 5px; position: relative;}
.round_in_bx .in_tit{font-size: 18px; font-weight: 700; margin-bottom: 10px;}


/*card_set*/
.card_set {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 25px; width: 100%;
}

.card_set .card {
    width: calc((100% - 50px)/3);
    position: relative;
    border-radius: 24px; padding: 20px 0;
    background: #fff; display: flex; flex-direction: column; flex-wrap: wrap; gap: 15px;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.10);
}

.card h4 {
    font-size: 1rem;
    font-weight: 500; margin-bottom: 4px;
}

.card_set h3 {
    color: #000; font-size: 20px; font-weight: bold;
    margin-bottom: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden
}

@media all and (max-width: 999px) {
    .card_set {
        flex-wrap: wrap;
        gap: 10px
    }
    .card_set .card {
    width: calc((100% - 10px)/2);
}

}


@media all and (max-width: 767px) {
    .card_set {
        flex-wrap: wrap;
        gap: 10px
    }
}

@media all and (max-width: 560px) {
    .card_set .card {
    width: 100%;
}
}


h3.tag_up,
h3.tag_dw,
h3.tag_even {
    text-align: left; display: flex; align-items: center; gap: 5px;
}

h3.tag_up::before,
h3.tag_dw::before,
h3.tag_even::before {
    color: #fff;
    font-size: 1rem;
    border-radius: 4px; border: 1px solid #EEEBF8; height: 30px; padding: 0 5px; display: flex; justify-content: center; align-items: center;
}

h3.tag_up.tag_up::before,
h3.tag_dw.tag_up::before,
h3.tag_even.tag_up::before {
    content: "多";
    background-color: #df4242
}

h3.tag_up.tag_dw::before,
h3.tag_dw.tag_dw::before,
h3.tag_even.tag_dw::before {
    content: "空";
    background-color: #52b848
}

h3.tag_up.tag_even::before,
h3.tag_dw.tag_even::before,
h3.tag_even.tag_even::before {
    content: "中立";
    background-color: #ddd
}

@media all and (max-width: 767px) {

    h3.tag_up,
    h3.tag_dw,
    h3.tag_even {
        font-size: 1.2rem
    }
}

.card .img_bx {
    width: 100%;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0 5%
}

.card .with_tag_bx {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 0 20px;
}

.card .tag_set {
    display: flex;
    gap: 5px
}
.card .tag_set .tag{ color: #292B61; background-color: #EEEBF8; border-radius: 100px; padding: 8px 14px; font-size: 14px;}

.card .num_set {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px
}

.card .fl_bx {
    gap: 10px
}

.card .fl_bx_but {
    display: flex;
    align-items: center;
    justify-content: space-between; padding:0 20px;
}
.card .fl_bx_but p{font-size: 16px; }
.card .fl_bx_but a {
    flex: 0 0 auto
}

@media all and (max-width: 767px) {
    .card .fl_bx_but {
        justify-content: center
    }
}

.card .fl_ce_bx {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center
}

@media screen and (max-width: 821px){
    .card {
        width: calc(50% - 15px); 
    }
    }


@media all and (max-width: 767px) {
    .card {
        width: 100%; border-radius: 12px;
    }
.card .with_tag_bx, .card .fl_bx_but{padding:0 10px;}
}

.txt_singleRow {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.win,
.lose,
.even {
    width: 2rem;
    height: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 99rem
}

.win::after,
.lose::after,
.even::after {
    color: #fff;
    font-weight: 500
}

.win.win,
.lose.win,
.even.win {
    background-color: #df4242
}

.win.win::after,
.lose.win::after,
.even.win::after {
    content: "勝"
}

.win.even,
.lose.even,
.even.even {
    background-color: #888
}

.win.even::after,
.lose.even::after,
.even.even::after {
    content: "平"
}

.win.lose,
.lose.lose,
.even.lose {
    background-color: #52b848
}

.win.lose::after,
.lose.lose::after,
.even.lose::after {
    content: "負"
}

.Sets_bx {
    display: flex;
    width: 100%;
    margin: 0
}

.Sets_bx h4 {
    text-align: center; color: #292B61; font-size: 14px;
}

.Sets_bx li {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 1 auto;
    border-right: 1px solid #dfe7f1
}

@media all and (max-width: 767px) {
    .Sets_bx li {
        padding: 0 5px
    }
}

.Sets_bx li:last-child {
    border-right: none
}

@media all and (max-width: 767px) {
    .Sets_bx li {
        font-size: .875rem;
        gap: 5px
    }
}

.Sets_bx li li {
    width: inherit;
    border-right: none;
    padding: 0;
    justify-content: space-between
}

.Sets_bx.gray_bg {
    background: #F6F6F6;
    padding: 10px 5px;
    flex-wrap: wrap
}

.Sets_bx.gray_bg li {
    border: none
}

@media all and (max-width: 767px) {
    .Sets_bx.gray_bg {
        padding: 12px 8px; gap: 10px;
    }
}

.Sets_bx.reverse li {
    flex-direction: column-reverse
}

.info-cell {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    gap: 0;
    justify-content: center;
    align-items: center;
    width: 100%;
    color: #888
}

.info-cell li:first-child {
    border-right: none
}

@media all and (max-width: 767px) {
    .info-cell {
        gap: 5px
    }
}

.num {
    line-height: 1.2;
    font-weight: 500
}

.num.big {
    font-size:18px; line-height: 150%;
    font-weight: 600
}

@media all and (max-width: 767px) {
    .num.big {
        font-size: 1.1rem
    }
}

.sharp {
    color: #eca100
}

.up {
    color: #df4242
}

.up_bg {
    background-color: #df4242;
    color: #fff
}

.down {
    color: #52b848
}

.down_bg {
    background-color: #52b848;
    color: #fff
}

.pink {
    color: #da76be
}

/*資訊卡*/
.top-card {
    background: #EEEBF8;
    border-radius: 16px;
    border: 1px solid #DFE7F1;
}
.top-card .top-card-tit{color: #292B61;
    font-size: 16px;
    font-weight: 500;
    padding: 10px 20px 20px;}

.top-card .top_bx {
  background-color: #fff;border-radius: 16px;
    margin-top: -10px; padding: 10px;
    display: flex;
    align-items: center; flex-wrap: wrap; gap: 10px;
    position: relative;
}
.top_bx_tit{ flex: 1 0 100%;    display: flex;
    gap: 5px;
    align-items: center;
    border-bottom: 1px solid #DFE7F1;
    padding-bottom: 10px;}
.top_bx_tit h3{
      color: #292B61;
    font-size: 20px;
    font-weight: 500;
    }

.top_bx_tit .tag_set {display: flex;gap: 5px; }
.top_bx_tit .tag_set .tag{ color: #5A5ECA; background-color: #F8F6FB; padding: 4px 6px; border-radius: 20px; font-size: 14px; line-height: 14px; display: flex; justify-content: center; align-items: center;}

/*上方資訊卡 - 內容*/
.top_bx_flex{
  display: flex; width: 100%; justify-content: space-around; gap: 10px; flex-wrap: wrap;
}
.top_bx_flex .chart_img{ max-width: 150px;}
.top_bx_flex .chart_img img{width: 100%; height: auto;}
.but_bx{width: 100%; flex: 1 1 calc(100% - 160px);}
.but_bx .detail_bx {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; width: 100%; padding: 20px 0 0;
}

.but_bx .detail_bx li {
  display: flex;flex-direction: column; padding: 0 40px; gap: 10px; border-left: 1px solid #dfe7f1; flex: 1 1 25%;
}
.but_bx .detail_bx > li:first-child{border: none; padding-left: 0; flex: 1 1 calc(25% - 40px);}

.but_bx .full_bx{
  display: flex; justify-content: space-between; align-items: center; flex-direction: row; border: none; border-bottom: 1px solid #DFE7F1; padding: 10px 0; width: 100%;
}

.but_bx .detail_in {
    display: flex;
    align-items: center;
    gap: 3px;
}

.but_bx .detail_bx .num {
    font-size: 1.25rem;
    font-weight: 500;
    color: #00367c
}

.but_bx .detail_bx .num.up {
    color: #df4242
}

.but_bx .detail_bx .num.dw {
    color: #52b848
}

.but_bx .detail_bx .num.sharp {
    color: #eca100
}

.but_bx .detail_bx .num.sharp,
.but_bx .detail_bx .num.up,
.but_bx .detail_bx .num.dw {
    font-weight: 600
}

.but_bx .detail_bx .highlight {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between
}

.but_bx .detail_bx .highlight .detail-title {
    font-size: 1.125rem;
    font-weight: 500
}

.but_bx .detail_bx .highlight .num {
    font-size: 1.375rem
}



.but_bx .three_set {
    display: flex;
    gap: 5px
}

.but_bx .three_set .week,
.but_bx .three_set .month,
.but_bx .three_set .quater {
    display: flex;
    align-items: center;
    gap: 5px
}

.but_bx .three_set .week::before,
.but_bx .three_set .month::before,
.but_bx .three_set .quater::before {
    color: #888
}

.but_bx .three_set .week::before {
    content: "週"
}

.but_bx .three_set .month::before {
    content: "月"
}

.but_bx .three_set .quater::before {
    content: "季"
}

.but_bx .three_set .win,
.but_bx .three_set .lose,
.but_bx .three_set .even {
    width: 1.25rem;
    height: 1.25rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 99rem
}

.but_bx .three_set .win::after,
.but_bx .three_set .lose::after,
.but_bx .three_set .even::after {
    color: #fff;
    font-size: .75rem
}

.but_bx .three_set .win.win,
.but_bx .three_set .lose.win,
.but_bx .three_set .even.win {
    background-color: #df4242
}

.but_bx .three_set .win.win::after,
.but_bx .three_set .lose.win::after,
.but_bx .three_set .even.win::after {
    content: "勝"
}

.but_bx .three_set .win.even,
.but_bx .three_set .lose.even,
.but_bx .three_set .even.even {
    background-color: #888
}

.but_bx .three_set .win.even::after,
.but_bx .three_set .lose.even::after,
.but_bx .three_set .even.even::after {
    content: "平"
}

.but_bx .three_set .win.lose,
.but_bx .three_set .lose.lose,
.but_bx .three_set .even.lose {
    background-color: #52b848
}

.but_bx .three_set .win.lose::after,
.but_bx .three_set .lose.lose::after,
.but_bx .three_set .even.lose::after {
    content: "負"
}

.but_bx .detail_bx.mobile {
    display: none;
    flex-direction: column;
    gap: 5px
}

.but_bx .detail_bx.mobile li {
    display: flex;
    flex-direction: column;
    gap: 5px
}

.but_bx .detail_bx.mobile .highlight {
    flex-direction: row
}

.but_bx .detail_bx.mobile .highlight .detail-title {
    font-size: 1rem;
    font-weight: 400
}

.but_bx .detail_bx.mobile .highlight .num {
    font-size: 1.25rem
}

.but_bx .detail_bx.mobile .detail_in {
    width: 100%;
    justify-content: space-between
}

/*分析圖表*/
.analyze_bx {
    background: #fff;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 5px;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.20);

    display: flex;
    flex-direction: column;
    gap: 5px;
}

.analyze_bx .tab {
    margin-bottom: 0
}

.analyze_bx .check_set {
    gap: 10px
}

.analyze_bx .gray_bg {
    border-radius: 2px;
    background-color: #f1f1f1;
    padding: 5px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px
}

.analyze_bx .gray_bg.wrap_bx {
    flex-direction: column;
    gap: 0
}

.analyze_bx .gray_bg.wrap_bx .fl_bx {
    flex-wrap: wrap
}

.analyze_bx .gray_bg ul {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 10px
}

.analyze_bx .gray_bg ul.line li {
    padding-right: 10px;
    border-right: 1px solid #bdbdbd
}

.analyze_bx .gray_bg ul.line li:last-child {
    border: none
}

.analyze_bx h4{font-size: 1.125rem;font-weight: 400;}







@media screen and (max-width: 1220px) {
/*大圖banner*/
.plan_flex{flex-wrap: wrap; width: 100%; gap: 10px;}
.plan_bx{ width: 100%;}
.plan_bx .plan_tit{font-size: 16px;line-height: 20px; }
.plan_bx .plan_price{ padding: 10px;;}
.plan_bx .unit{font-size: 16px; line-height: 16px;}
.plan_bx .price{font-size: 24px; line-height: 24px; }



/*登入&註冊*/
.login_bx .l-bx{ padding:40px 20px; justify-content: center;}
.but_bx .detail_bx li{padding: 0 20px; flex: 1 1 auto;}
.but_bx .detail_bx > li:first-child {flex: 1 1 calc(25% - 40px);}
}




@media screen and (max-width: 1001px) {

/*上方資訊卡 - 內容*/
.top_bx_flex .chart_img{ max-width: 150px;}
.top_bx_flex .chart_img img{width: 100%; height: auto;}
.but_bx{width: 100%; flex: 1 1 100%;}

}

@media screen and (max-width: 821px) {

/*按鈕*/
a.btn.fix-top{position: relative; top: inherit; right: inherit;}

/*登入&註冊*/
.container.login_bx{ background:url(../images/log_bg.png) right / cover no-repeat; padding:40px 20%; min-height: auto; justify-content: center; align-items: center;}
.login_bx > div{flex: 1 1 100%;}
.login_bx .r-bx{display: none;}
.login_bx .l-bx{padding: 20px; border-radius: 10px;}
.login_bx .l-bx .form_bx{ width: 100%;  gap: 20px;}
.login_bx h2{ font-size: 18px; font-weight:bold;}
.form_li { gap: 20px;}

/*內頁標題*/
.tit_flex{flex-wrap: wrap; margin-bottom: 20px; gap: 10px;}
.tit_flex_tit{font-size: 20px;}
.tit_flex .input_bx{ width: 100%;}


/*分類頁籤*/
.category_tab a, .item_tab a{font-size: 18px;height: 44px;}
.item_tab{ gap: 10px; width: 100%; overflow-x: auto; flex-wrap: nowrap;}
.item_tab > li{min-width: 100px;}

.tab_bar{ flex-wrap: wrap; padding-bottom: 10px; }
.tab_bar .date{text-align: right; flex: 1 1 100%; font-size: 14px;}
.tab_bar .category_tab_sm{margin-bottom: 10px; flex: 1 1 auto; width: 100%;}
.category_tab_sm > li{ flex: 1 1 auto;}



/*圓框*/
.round_bx{
border-radius: 10px; padding: 20px;}
.round_tit{font-size: 24px; }
.round_in_bx{  padding: 10px; }
.round_in_bx ul{  flex-wrap: wrap; gap: 10px;}
.round_in_bx ul > li{ flex: 1 1 100%;border-left: none; padding: 0; }
.round_in_bx ul ol{font-size: 16px;}
.round_in_bx .in_tit{font-size: 16px; font-weight: 700; margin-bottom: 10px;}


/*資訊卡*/
.top_bx_flex, .but_bx .detail_bx{
   flex-wrap: wrap; justify-content: center;
}
.but_bx .full_bx{flex-wrap: wrap; gap: 10px;}
.but_bx .detail_bx{ padding-top: 10px; gap: 5px;}
.but_bx .detail_bx > li:first-child, .but_bx .detail_bx li{ padding: 0; flex: 1 1 100%; border: none;}
.but_bx .detail_bx li{gap: 5px;}
.but_bx .detail_in{justify-content: space-between;}


}




@media screen and (max-width: 640px) {
  .container.login_bx{  padding:40px 20px;}
.login_bx > div{flex: 1 1 80%;}

/*說明*/
.bottom_manual{
  font-size: 16px;padding:20px 10px;
}
.bottom_manual_tit{
  font-size: 18px; margin-bottom: 10px;
}
.bottom_manual .ol-list{ margin-left:20px;}
.bottom_manual .ol-list li{font-size: 14px;}

}




/*同凱基畫面*/
/*fl_bx*/
.fl_bx {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;}

.fl_bx.just_ce {
    justify-content: center;}

.fl_bx.just_st {
    justify-content: start;
    gap: 10px;}

.fl_bx .query_bx,
.fl_bx .tab {
    margin-bottom: 0; font-size: 16px;}

.fl_bx.with_blue_bg {
    flex-wrap: wrap;
    margin-bottom: 10px;}

.fl_bx.m_wrap {
    margin-bottom: 10px;}


.tab {
  display: flex;
 gap: 10px;
  margin-bottom: 10px;}

.tab.small {
    border-radius: 5px;
    background: #f1f4f8;
    gap: 5px;
    padding: 5px 8px;}


.tab.small a {
      padding: 2px 5px;
      border-radius: 5px;
      text-align: center;
    }

.tab.small a:hover,
.tab.small a.active {
        color: #0083CA;
        background: #fff;}

/*表格*/
.scrl_bx {overflow: scroll;position: relative;width: 100%}

    .tb_bx {
        width: 100%;
        display: block;
        overflow: auto;
        position: relative
    }

    .tb_bx table {
        width: 100%
    }

    .tb_bx table.line_top {
        border-top: 1px solid #ddd
    }

    .tb_bx table.sticky th:first-child,
    .tb_bx table.sticky td:first-child {
        position: sticky;
        left: 0;
        z-index: 1
    }

    .tb_bx table.sticky td {
        background-color: #fff;
        border-bottom: 1px solid #ddd
    }

    .tb_bx th,
    .tb_bx td {
        word-break: keep-all;
        text-align: left;
        padding: 12px 10px;
        border-bottom: 1px solid #ddd
    }

    .tb_bx th {
        background-color: #f8f8f8
    }

    .tb_bx.noline th,
    .tb_bx.noline td {
        border-bottom: none
    }

    .tb_bx.noPd th,
    .tb_bx.noPd td {
        padding: 3px 0
    }

    .tb_bx.noPd tr:last-child td {
        border: none
    }

    .tb_bx .tR {
        text-align: right
    }

    .tb_bx .tC {
        text-align: center
    }

    .tb_bx.with_blue_bg {
        margin-bottom: 10px
    }

    .tb_bx.with_blue_bg th {
        background: #f8f8f8
    }

    .tb_bx.with_blue_bg td {
        background: #fff
    }

/* --------------------------------------- */
/* 文件頁：滿版兩欄（左導覽 + 右內容）      */
/* --------------------------------------- */
/* 不使用 .pagesize，改由 .doc_layout 撐滿視窗寬度 */
.container.doc_page{ padding-bottom: 0; background-color: #fff;}
.doc_layout{ display: flex; align-items: flex-start; width: 100%;}

/*左欄導覽*/
/* align-self 需為 flex-start（非 stretch）sticky 才有作用；
   分隔線改掛在較高的 .doc_main 上，才能貫穿整個版面高度 */
/* 寬度取自最長的函式名（RawQuote.get_subscriptions，16px 下實測需 252px）
   加左右內距 38px 與捲軸 14px 後取 310px，與手機版抽屜同寬，讓子項不必斷行 */
.doc_side{
  flex: 0 0 310px; width: 310px; align-self: flex-start;
  background-color: #fff;
  position: sticky; top: 84px; max-height: calc(100vh - 84px);
  /* overflow-y 一旦非 visible，overflow-x 的 visible 會被算成 auto，
     長函式名就會逼出橫向捲軸，故明確關掉 */
  overflow-y: auto; overflow-x: hidden; padding: 0px 0;
}
.doc_nav > li{ border-bottom: 1px solid #DDDDDD; position: relative;}
.doc_nav > li > a{
  display: block; font-size: 16px; line-height: 140%; color: #2D2D2F;
  padding: 12px 40px 12px 20px;
  /* Account.BalanceStatement 這類長名稱無空白可斷，需允許任意處換行 */
  overflow-wrap: anywhere; word-break: break-word;
}
.doc_nav > li > a:hover{ color: #5A5ECA; background-color: #F8F6FB;}
.doc_nav > li > a.on{
  color: #5A5ECA; font-weight: bold; background-color: #F8F6FB;
  box-shadow: inset 3px 0 0 0 #5A5ECA;
}
/*可展開項：沿用站上 .hasSub + arrow.svg + scaleY(-1) 慣例*/
.doc_nav .hasSub > button{
  position: absolute; top: 0; right: 0; width: 40px; height: 45px;
  background: url(../images/arrow.svg) center / auto 20px no-repeat;
  cursor: pointer; outline: none; border: none;
  transition-duration: 0.3s;
}
.doc_nav .hasSub.open > button{ transform: scaleY(-1);}
.doc_subnav{ display: none; padding: 4px 0 8px; background-color: #FAFAFB;}
.doc_nav .hasSub.open .doc_subnav{ display: block;}
.doc_subnav a{
  display: block; font-size: 16px; line-height: 140%; color: #666;
  padding: 7px 12px 7px 32px; position: relative;
  /* 保險：日後若出現更長的名稱，寧可斷行也不要撐出橫向捲軸 */
  overflow-wrap: anywhere; word-break: break-word;
}
.doc_subnav a::before{
  content: ''; width: 4px; height: 4px; border-radius: 50%; background-color: #BBB;
  position: absolute; left: 20px; top: 16px;
}
.doc_subnav a:hover{ color: #5A5ECA;}
.doc_subnav a:hover::before{ background-color: #5A5ECA;}
.doc_subnav a.on{ color: #5A5ECA; font-weight: bold;}
.doc_subnav a.on::before{ background-color: #5A5ECA;}
/*子項的中文說明另起一行，函式名才不會被擠斷*/
.doc_subnav_desc{ display: block; font-size: 14px; color: #999; margin-top: 1px;}
.doc_subnav a.on .doc_subnav_desc{ color: #8B8FD8; font-weight: normal;}

/*左欄群組標題（快速上手／API 參考／其他）*/
.doc_nav_group{
  font-size: 14px; font-weight: bold; color: #999; letter-spacing: .05em;
  padding: 16px 20px 6px; border-bottom: 1px solid #DDDDDD;
  background-color: #FAFAFB;
}
.doc_nav > li.doc_nav_group:first-child{ padding-top: 10px;}

/*右欄內容*/
.doc_main{
  flex: 1 1 auto; min-width: 0; align-self: stretch;
  border-left: 1px solid #DDDDDD;
  padding: 0 40px 40px;
  display: flex; flex-direction: column; gap: 24px;
  font-size: 16px; line-height: 175%;
}
/*固定 header 84px，錨點跳轉需留出空間*/
.doc_main [id]{ scroll-margin-top: 100px;}
.doc_main .breadcrumb{ padding: 16px 0 0;}
/* 最後一層是函式名（如 RawQuote.get_subscriptions），窄螢幕需可換行 */
.doc_main .breadcrumb ul{ flex-wrap: wrap;}
.doc_main .breadcrumb ul li{
  font-size: 14px;
  overflow-wrap: anywhere; word-break: break-word;
}
/* 標題含長函式名（如 RawQuote.get_subscriptions），窄螢幕需可換行 */
.doc_main .inner_tit{
  font-size: 22px; min-height: 34px; padding: 4px 0 0 12px;
  overflow-wrap: anywhere; word-break: break-word;
}
.doc_main .inner_tit::before{ height: 34px; width: 5px;}

/* --------------------------------------- */
/* AI Agent 頁（文件密度）                  */
/* --------------------------------------- */
/* 各區塊需 min-width:0，程式碼區塊才能改為橫向捲動而不撐破版面 */
.agent_hero, .step_bx, .agent_callout, .faq_bx, .agent_footer_cta{ width: 100%; min-width: 0;}
.js-tab-pane, .code_bx, .code_bx pre{ min-width: 0; max-width: 100%;}

.agent_hero{
  background: linear-gradient(300deg, #8C79FF 26.85%, #4D75D4 106.42%, #8AFDF3 158.41%);
  border-radius: 10px; padding: 20px 24px; color: #fff;
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
}
.agent_hero_tit{ font-size: 24px; line-height: 140%; font-weight: bold; color: #fff;}
.agent_hero_txt{ font-size: 16px; line-height: 175%;}
a.btn.agent_hero_btn{ background-color: #fff; color: #5A5ECA; height: 38px; font-size: 16px; padding: 0 20px; border-radius: 6px;}
a.btn.agent_hero_btn:hover{ background-color: #2D2D2F; color: #fff;}

/*步驟區：文件頁改為扁平分隔，不用卡片陰影*/
/* 步驟區與注意事項採與其他 68 頁 .doc_sec 相同的扁平處理：
   不用卡片框，改以帶底線的標題分段，整個文件站的閱讀節奏才一致。
   .agent_callout（MCP 導引）是刻意的補充說明區塊，保留底色方塊以形成對比。 */
.step_bx, .faq_bx{
  width: 100%; min-width: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.agent_callout{
  background-color: #F8F6FB; border: 1px solid #EEEBF8; border-radius: 10px;
  padding: 18px 20px;
  display: flex; flex-direction: column; gap: 10px;
}
/*標題列與 .doc_h3 同樣以 1px 底線收邊，編號與標題共用一條線*/
.step_head{
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 6px; border-bottom: 1px solid #DDDDDD;
}
.agent_callout .step_head{ padding-bottom: 0; border-bottom: none;}
.step_head h3{ font-size: 18px; line-height: 140%; font-weight: bold; color: #2D2D2F;}
.step_num{
  flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%;
  background-color: #5A5ECA; color: #fff; font-size: 14px; font-weight: bold;
  display: flex; justify-content: center; align-items: center;
}
.agent_badge{
  flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%;
  background-color: #EEEBF8; font-size: 14px;
  display: flex; justify-content: center; align-items: center;
}
.agent_badge.warn{ background-color: #F1BD20; color: #2D2D2F; font-weight: bold;}
.step_desc{ font-size: 16px; line-height: 175%; color: #3F3F3F;}
.step_desc code, .tool_meta code{
  font-family: monospace; font-size: 14px;
  background-color: #F4F4F4; color: #292B61;
  border-radius: 3px; padding: 1px 5px; word-break: break-all;
}
/* 內文中的指令是給人讀的句子，break-all 會把「績效」這種詞從中間拆開。
   改為只在真的放不下時才斷；路徑類（.tool_meta）維持 break-all。 */
.step_desc code{ word-break: normal; overflow-wrap: anywhere;}

/*程式碼區塊*/
.tool_meta{ display: flex; align-items: center; gap: 8px; font-size: 15px; color: #888888; flex-wrap: wrap;}
.code_bx{ position: relative; background-color: #2D2D2F; border-radius: 6px; padding: 12px 44px 12px 14px;}
.code_bx pre{ overflow-x: auto; margin: 0;}
.code_bx code{
  font-family: monospace; font-size: 14px; line-height: 165%;
  color: #fff; white-space: pre;
  /* 需為 block 且寬度為內容寬，pre 的 overflow-x 才會真正接住長行；
     維持 inline 時超長的單行會畫到容器外，撐出整頁橫向捲動 */
  display: block; width: max-content; min-width: 100%;
}
.code_bx .ic-btn{ position: absolute; top: 9px; right: 10px; width: 20px; height: 20px; margin: 0; opacity: .7;}
.code_bx .ic-btn:hover{ opacity: 1;}
.code_bx .ic-btn.copied::after{
  content: '已複製'; position: absolute; top: 50%; right: 28px; transform: translateY(-50%);
  background-color: #fff; color: #5A5ECA; font-size: 14px; white-space: nowrap;
  border-radius: 3px; padding: 1px 6px;
}

/*頁籤*/
.category_tab_sm.js-tab a{ font-size: 16px; height: 38px;}
.js-tab-pane{ display: none; flex-direction: column; gap: 10px;}
.js-tab-pane.on{ display: flex;}

/* 查詢範例：直式排列，一類一列。
   左欄放 icon + 分類名（固定寬），右欄放指令，指令可用整條剩餘寬度不必斷行。 */
.agent_examples{
  width: 100%; min-width: 0;
  display: flex; flex-direction: column;
  border-top: 1px solid #EEEEEE;
}
.agent_examples > li{
  display: flex; align-items: flex-start; gap: 16px;
  padding: 12px 0; border-bottom: 1px solid #EEEEEE;
}
.agent_ex_head{
  flex: 0 0 168px;
  display: flex; align-items: center; gap: 8px;
  font-size: 16px; font-weight: bold; color: #2D2D2F; line-height: 150%;
}
/*沿用站上既有的 feature-icon 線性圖示，取代原本的 emoji*/
.agent_ex_ic{
  flex: 0 0 24px; width: 24px; height: 24px;
  background: center / contain no-repeat;
}
.agent_ex_ic.ic-strategy{ background-image: url(../images/feature-icon01.svg);}
.agent_ex_ic.ic-backtest{ background-image: url(../images/feature-icon05.svg);}
.agent_ex_ic.ic-screen{   background-image: url(../images/feature-icon12.svg);}
.agent_ex_ic.ic-risk{     background-image: url(../images/feature-icon17.svg);}
.agent_ex_ic.ic-market{   background-image: url(../images/feature-icon03.svg);}
.agent_ex_ic.ic-plan{     background-image: url(../images/feature-icon09.svg);}

.agent_ex_cmds{
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
}
.agent_ex_cmds code{
  font-family: monospace; font-size: 14px; line-height: 165%;
  background-color: #F4F4F4; color: #292B61;
  border-radius: 3px; padding: 2px 8px;
  word-break: normal; overflow-wrap: anywhere;
}

/*MCP 導引*/
.agent_callout{ background-color: #F8F6FB; border-color: #EEEBF8;}
.agent_callout .step_desc b{ font-weight: bold; color: #292B61;}
.agent_callout .txt-link{ margin-left: 5px; white-space: nowrap;}

/*折疊注意事項*/
.faq_item{ border-top: 1px solid #DDDDDD; position: relative;}
.faq_item .control{
  font-size: 16px; line-height: 150%; font-weight: bold; color: #2D2D2F; cursor: pointer;
  padding: 11px 36px 11px 0;
}
.faq_item .control::before{
  content: ''; background: url(../images/order-arrow.svg) center / 18px no-repeat;
  width: 22px; height: 22px; position: absolute; top: 12px; right: 0;
  transition-duration: 0.3s;
}
.faq_item .control.open{ color: #5A5ECA;}
.faq_item .control.open::before{ transform: rotate(-180deg);}
.faq_item .inCon{ height: 0; overflow: hidden; transition: 0.3s all ease-in-out;}
.faq_item .inCon.open{ height: auto; padding-bottom: 12px;}
.faq_item .inCon p{ font-size: 14px; line-height: 175%; color: #3F3F3F;}

/*底部 CTA*/
/*單獨一行的補充連結：加上分隔線收邊，才不會像浮在兩個區塊之間*/
.agent_footer_cta{
  font-size: 14px; color: #3F3F3F;
  padding-top: 14px; border-top: 1px solid #DDDDDD;
}
.agent_footer_cta .txt-link{ margin-left: 5px;}

/* --------------------------------------- */
/* API 文件頁                               */
/* --------------------------------------- */
.doc_lead{ font-size: 16px; line-height: 175%; color: #3F3F3F; margin-top: -8px;}
.doc_sec{
  width: 100%; min-width: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.doc_h3{
  font-size: 18px; font-weight: bold; color: #2D2D2F;
  padding-bottom: 6px; border-bottom: 1px solid #DDDDDD;
}
.doc_sec p{ font-size: 16px; line-height: 175%; color: #3F3F3F;}
.doc_note{ font-size: 14px; color: #888888;}
.doc_sec .ol-list{ margin-left: 20px;}
.doc_sec .ol-list li{ font-size: 16px; line-height: 175%; color: #3F3F3F;}

/*程式碼區塊的 input / output 標籤*/
.code_bx .code_label{
  position: absolute; top: 0; left: 0;
  /* 標籤刻意比正文弱，維持 12px（為此不套用文件頁最小 14px 的下限） */
  font-size: 12px; color: #BBB; background-color: #3A3A3D;
  padding: 2px 10px; border-radius: 6px 0 6px 0;
  font-family: monospace; letter-spacing: .05em;
}
/*帶 input/output 標籤的程式碼區塊需讓出標籤高度*/
.doc_sec .code_bx, .step_bx .code_bx{ padding-top: 32px;}

/*Attribute 表格：沿用既有 .tb_bx，僅調density*/
.doc_sec .tb_bx{ border-top: 1px solid #DDD;}
.doc_sec .tb_bx table{ table-layout: fixed;}
.doc_sec .tb_bx th, .doc_sec .tb_bx td{
  font-size: 14px; line-height: 170%; padding: 8px 10px; vertical-align: top;
  word-break: break-word;
}
.doc_sec .tb_bx th{ font-weight: bold; color: #2D2D2F; white-space: nowrap;}
.doc_sec .tb_bx th:nth-child(1), .doc_sec .tb_bx td:nth-child(1){ width: 22%;}
.doc_sec .tb_bx th:nth-child(2), .doc_sec .tb_bx td:nth-child(2){ width: 20%;}
.doc_sec .tb_bx td code{
  font-family: monospace; font-size: 14px;
  background-color: #F4F4F4; color: #292B61;
  border-radius: 3px; padding: 1px 5px; word-break: break-all;
}

@media all and (max-width: 767px) {
  .doc_lead{ font-size: 16px;}
  .doc_h3{ font-size: 18px;}
  /*窄螢幕表格改為橫向捲動，避免欄位擠壓到不可讀*/
  .doc_sec .tb_bx{ overflow-x: auto;}
  .doc_sec .tb_bx table{ table-layout: auto; min-width: 600px;}
}

/*使用聲明*/
/*圓角對齊本頁其他方塊（hero／callout）的 10px；其他頁沿用原本的 8px*/
.doc_main .bottom_manual{ border-radius: 10px;}
.doc_main .bottom_manual_tit{ font-size: 16px;}
.doc_main .bottom_manual .ol-list li{ font-size: 14px; line-height: 175%;}

@media screen and (max-width: 1220px) {
  /*側欄寬度不再縮，否則子項會被迫斷行；改由內容區讓出空間*/
  .doc_main{ padding: 0 24px 32px;}
}

/*手機版定位列：桌機不顯示*/
.doc_bar{ display: none;}

@media screen and (max-width: 1024px) {
  /* 窄螢幕左欄改為抽屜：內容立刻可見，導覽完全不佔垂直空間。
     漢堡鈕與遮罩沿用 global.css 既有的 .pageMenu-btn / .page_cover 資產 */
  .doc_layout{ flex-direction: column;}
  .doc_main{ padding: 0 20px 32px; width: 100%; border-left: none;}
  /*錨點需讓出 fixed header（84）+ 定位列（46）*/
  .doc_main [id]{ scroll-margin-top: 140px;}
  /*定位列已顯示同一組路徑，麵包屑收起避免重複*/
  .doc_main .breadcrumb{ display: none;}
  .doc_main{ padding-top: 16px;}

  /* 定位列：需卡在站上既有的置頂元素之下。
     822–1024 是 84px 的 fixed header；≤821 header 改為 relative，
     置頂的是 45px 的 .m-sticky 選單（見下一個斷點） */
  .doc_bar{
    display: flex; align-items: center; gap: 10px;
    position: sticky; top: 84px; z-index: 100;
    width: 100%; height: 48px; padding: 0 14px;
    background-color: #fff; border-bottom: 1px solid #DDDDDD;
  }
  /*.pageMenu-btn 原設計是 absolute 定位在 header，這裡改為列內的一般元素*/
  .doc_bar .pageMenu-btn{
    position: relative; top: auto; right: auto;
    flex: 0 0 30px; width: 30px; height: 30px;
    background-color: transparent;
  }
  .doc_bar_loc{
    font-size: 15px; color: #666;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /*抽屜本體*/
  .doc_side{
    position: fixed; top: 0; left: -310px;
    width: 310px; max-width: 86%; height: 100%; max-height: none;
    z-index: 1002; padding: 10px 0;
    border-right: 1px solid #DDDDDD;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
    overflow-y: auto; overflow-x: hidden;
    transition: left 0.2s;
  }
  .page.openmenu .doc_side{ left: 0;}
  /* global.css 的 .openmenu{position:fixed} 是給整頁位移用的，
     這裡是覆蓋式抽屜，需還原 .page 的定位 */
  .page.openmenu{ position: relative;}
  /*既有的 .page_cover 當遮罩（global.css 已把它在 openmenu 時提到 z-index:1001）*/
  .page.openmenu .page_cover{
    position: fixed; background-color: rgba(0, 0, 0, 0.45);
  }

  /*抽屜內維持垂直清單，層級才清楚*/
  .doc_nav{ display: block;}
  .doc_nav > li{ border-bottom: 1px solid #DDDDDD;}
  .doc_nav > li > a{ padding: 12px 40px 12px 20px;}
  .doc_nav > li > a.on{ box-shadow: inset 3px 0 0 0 #5A5ECA;}
  .doc_nav .hasSub > button{ display: block;}
  .doc_subnav{ display: none;}
  .doc_nav .hasSub.open .doc_subnav{ display: block;}
}

@media screen and (max-width: 821px) {
  /* 此斷點起 header 改為 position:relative，但 .m-sticky 選單仍置頂，
     定位列與錨點都需讓出它的高度（45px） */
  .doc_bar{ top: 45px;}
  .doc_main [id]{ scroll-margin-top: 116px;}
  .agent_ex_head{ flex-basis: 150px;}
  .category_tab_sm.js-tab{ flex-wrap: wrap;}
  .category_tab_sm.js-tab > li{ flex: 1 0 auto;}
}

@media all and (max-width: 767px) {
  .doc_main{ padding: 0 14px 24px; gap: 18px;}
  .agent_hero{ padding: 16px; border-radius: 8px;}
  .agent_hero_tit{ font-size: 21px;}
  .step_bx, .agent_callout, .faq_bx{ padding: 14px; border-radius: 8px;}
  .step_head h3{ font-size: 18px;}
  /*窄螢幕改為上下堆疊，指令保有整行寬度*/
  .agent_examples > li{ flex-direction: column; gap: 8px;}
  .agent_ex_head{ flex-basis: auto;}
  .code_bx{ padding: 12px 14px 38px;}
  .code_bx .ic-btn{ top: auto; bottom: 10px; right: 12px;}
}

/* --------------------------------------- */
/* 積木庫 blocks.html                        */
/* 行銷頁：各區塊底色滿版，內容一律用 .pagesize   */
/* 維持 1160 寬度上限（含 Hero 的文字）           */
/* 視覺沿用首頁語彙（index.css）：漸層文字     */
/* .focus、.title/.sub-title、.box-padd     */
/* --------------------------------------- */
.container.blocks_page{ padding-bottom: 0;}
/* Hero／積木牆／使用聲明的內容都用 .pagesize（1160）限制寬度 */
.blocks_hero > .pagesize, .blocks_wall > .pagesize, .blocks_note > .pagesize{ width: 100%;}

/*① Hero：背景滿版、內容內縮（同首頁 .area_banner + .bn_box 的關係）
   漸層不做整塊底色，只用在標題文字與小元件上 */
.blocks_hero{
  position: relative; overflow: hidden;
  background-color: #EDEFF2;
  padding: 40px 0 80px;
}
/*滿版背景：沿用首頁的雪鴞主視覺，右側對齊*/
.blocks_hero_bg{
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background: url(../images/bg_snowy.png) right center / cover no-repeat;
  pointer-events: none;
}
/*左側加一層由白到透明的遮罩，文字才壓得住背景*/
.blocks_hero_bg::after{
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  /* 遮罩要覆蓋到標題最右端，否則漸層剪字的淺色端會壓在貓頭鷹眼睛上看不清 */
  background: linear-gradient(to right,
    rgba(255,255,255,.97) 0%,
    rgba(255,255,255,.95) 42%,
    rgba(255,255,255,.80) 60%,
    rgba(255,255,255,0) 90%);
}
.blocks_hero_in{ position: relative; z-index: 1;}

.blocks_crumb{ padding: 0 0 40px;}

/*標題：漸層剪字，與首頁 .bn_slogan 同一組色停與角度*/
.blocks_hero_tit{
  font-size: 60px; line-height: 130%; font-weight: 900;
  margin-bottom: 24px;
  background: linear-gradient(101deg, #8C79FF 18.99%, #4D75D4 47.68%, #8AFDF3 100.21%);
  background-clip: text; -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block; max-width: 780px;
}
.blocks_hero_txt{
  font-size: 20px; line-height: 180%; color: #3B3746;
  max-width: 720px; margin-bottom: 40px;
}

/*三個賣點：白底小卡，漸層只出現在頂部細條*/
.blocks_feat{ display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 40px;}
.blocks_feat > li{
  flex: 1 1 260px; max-width: 360px;
  background-color: #fff; border-radius: 12px; padding: 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .10);
  display: flex; flex-direction: column; gap: 8px;
  position: relative; overflow: hidden;
}
.blocks_feat > li::before{
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(101deg, #8C79FF 7.76%, #8AFDF3 106.63%);
}
.blocks_feat_ic{
  width: 40px; height: 40px; margin-bottom: 4px;
  background: center / contain no-repeat;
}
.blocks_feat_ic.ic-cover{ background-image: url(../images/feature-icon03.svg);}
.blocks_feat_ic.ic-drag{  background-image: url(../images/feature-icon16.svg);}
.blocks_feat_ic.ic-live{  background-image: url(../images/feature-icon05.svg);}
.blocks_feat strong{ font-size: 20px; font-weight: bold; color: #1E1E1E; line-height: 150%;}
.blocks_feat em{ font-size: 16px; line-height: 170%; color: #777777; font-style: normal;}

/*第二顆按鈕：首頁 .bn_btn .btn 的外框變體*/
.blocks_hero .bn_btn .btn.ty2{ background-color: transparent; color: #1E1E1E;}
.blocks_hero .bn_btn .btn.ty2:hover{ background-color: #1E1E1E; color: #fff;}
/* index.css 在 ≤821 把 .bn_btn 設成 display:block，gap 對 block 無效，
   兩顆按鈕會直接貼在一起 —— 這裡固定回 flex 才有間距 */
.blocks_hero .bn_btn{ display: flex; flex-wrap: wrap; gap: 20px;}
/*≤821 改為直排滿寬（index.css 已設 .bn_btn .btn{width:100%}）*/
@media screen and (max-width: 821px){
  .blocks_hero .bn_btn{ flex-direction: column;}
  .blocks_hero .bn_btn .btn{ width: 100%;}
}

/*② 積木牆：沿用首頁 intelBox 的由灰漸白底*/
.blocks_wall{ background: linear-gradient(to bottom, #F2F5F8 0%, #ffffff 100%);}
.blocks_wall .title{ margin-bottom: 16px;}
.blocks_wall .sub-title{ color: #57595D; margin-bottom: 40px;}

/*分類頁籤：沿用首頁 .options 的膠囊語彙*/
.blocks_tab{
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  margin-bottom: 32px;
}
.blocks_tab > li{ flex: 0 0 auto;}
.blocks_tab a{
  display: block; background-color: #fff; color: #292B61;
  border: 1px solid #E4DEF5; border-radius: 40px;
  padding: 10px 22px; font-size: 16px; font-weight: bold;
  white-space: nowrap;
}
.blocks_tab a:hover{ border-color: #8673FF; color: #5A5ECA;}
.blocks_tab .on a{
  background: linear-gradient(101deg, #8C79FF 7.76%, #4D75D4 106.63%);
  border-color: transparent; color: #fff;
}

/*工具列*/
.blocks_bar{
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap; margin-bottom: 24px;
}
.blocks_count{ font-size: 16px; color: #57595D;}
a.btn.blocks_shuffle{
  flex: 0 0 auto; height: 48px; padding: 0 26px;
  font-size: 16px; font-weight: bold; border-radius: 40px;
  background-color: #EEEBF8; color: #5A5ECA;
}
a.btn.blocks_shuffle::before{
  content: ''; width: 20px; height: 20px; margin-right: 8px;
  background: url(../images/feature-icon17.svg) center / contain no-repeat;
}
a.btn.blocks_shuffle:hover{ background-color: #8673FF; color: #fff;}

/*③ 積木方塊：滿版下用 auto-fill，畫面越寬看到越多塊*/
.blocks_grid{
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px; width: 100%;
}
.block_item{
  background-color: #fff; border-radius: 16px; padding: 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
  display: flex; flex-direction: column; gap: 12px;
  position: relative; overflow: hidden;
  transition-duration: .3s;
}
/*頂部漸層條，hover 時整塊浮起*/
.block_item::before{
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(101deg, #8C79FF 7.76%, #8AFDF3 106.63%);
}
.block_item:hover{ box-shadow: 0 20px 40px rgba(90, 94, 202, .18); transform: translateY(-4px);}

.block_sub{
  align-self: flex-start;
  background-color: #EEEBF8; color: #5A5ECA;
  border-radius: 40px; padding: 4px 14px;
  font-size: 14px; font-weight: bold;
}
.block_name{
  font-size: 18px; line-height: 165%; font-weight: bold; color: #1E1E1E;
  overflow-wrap: anywhere;
}
.block_tags{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto;}
.block_tags span{
  background-color: #F4F4F4; color: #777777;
  border-radius: 4px; padding: 3px 8px; font-size: 14px; line-height: 150%;
}
.block_tags span.more{ background-color: #fff; color: #8673FF; font-weight: bold;}

/*底部導引*/
.blocks_more{ display: flex; justify-content: center; margin-top: 50px;}
.blocks_more_btn{
  display: flex; justify-content: center; align-items: center; gap: 20px;
  color: #8673FF; font-size: 26px; font-weight: bold;
  padding: 20px 50px; border-radius: 60px;
  border: 1px solid rgba(134, 115, 255, 0.14);
  background: rgba(242, 235, 255, 0.50);
  backdrop-filter: blur(2px);
}
.blocks_more_btn::after{
  content: ''; width: 32px; height: 32px;
  background: url(../images/liguid-arw.svg) center / contain no-repeat;
}
.blocks_more_btn:hover{ background-color: rgba(134, 115, 255, .80); color: #fff;}
.blocks_more_btn:hover::after{ filter: grayscale(100%) brightness(1000%);}

/*④ 使用聲明*/
.blocks_note{ background-color: #F2F5F8; padding: 50px 0;}

@media screen and (max-width: 1220px) {
  .blocks_hero_tit{ font-size: 48px;}
}

@media screen and (max-width: 1024px) {
  .blocks_hero{ padding: 30px 0 60px;}
  .blocks_hero_tit{ font-size: 40px;}
  .blocks_hero_txt{ font-size: 18px; margin-bottom: 32px;}
  .blocks_more_btn{ font-size: 20px; padding: 16px 32px;}
}

@media all and (max-width: 767px) {
  .blocks_crumb{ padding: 0 0 24px;}
  .blocks_hero{ padding: 20px 0 40px;}
  /*手機版背景圖右移會看不到主體，改為置中並加強遮罩*/
  .blocks_hero_bg{ background-position: center center;}
  .blocks_hero_bg::after{ background: rgba(255,255,255,.86);}
  .blocks_hero_tit{ font-size: 30px; margin-bottom: 16px;}
  .blocks_hero_txt{ font-size: 16px; line-height: 175%; margin-bottom: 24px;}
  .blocks_feat{ gap: 12px; margin-bottom: 28px;}
  .blocks_feat > li{ flex: 1 1 100%; max-width: none; padding: 18px;}
  .blocks_feat strong{ font-size: 18px;}
  .blocks_feat em{ font-size: 15px;}
  .blocks_hero .bn_btn .btn{ height: 52px;}
  .blocks_tab{ gap: 8px; margin-bottom: 24px;}
  .blocks_tab a{ padding: 8px 16px; font-size: 15px;}
  .blocks_grid{ grid-template-columns: 1fr; gap: 14px;}
  .block_item{ padding: 18px; border-radius: 12px;}
  .block_name{ font-size: 16px;}
  .blocks_more{ margin-top: 32px;}
  .blocks_more_btn{ font-size: 16px; padding: 14px 22px; gap: 12px;}
  .blocks_more_btn::after{ width: 22px; height: 22px;}
  .blocks_note{ padding: 30px 0;}
}

/* 822–1239px：整寬選單列黏在 fixed header（84px）之下，
   文件頁的定位列要再讓開它（84 + 45 = 129） */
@media screen and (max-width: 1239px) and (min-width: 822px){
  .doc_bar{ top: 129px;}
  .doc_main [id]{ scroll-margin-top: 185px;}
}




/*.color_tag*/
.color_tag {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1px;
    margin-bottom: 20px
}

.color_tag span {
    width: 9.0909090909%;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem
}

.color_tag span::after {
    content: "%";
    font-size: .8rem
}

.color_tag span.colorTag-01 {
    background-color: #6ff2c5
}

.color_tag span.colorTag-02 {
    background-color: #a3f7da
}

.color_tag span.colorTag-03 {
    background-color: #baf9e3
}

.color_tag span.colorTag-04 {
    background-color: #d1fbed
}

.color_tag span.colorTag-05 {
    background-color: #e8fdf6
}

.color_tag span.colorTag-06 {
    background-color: #f6f6f6
}

.color_tag span.colorTag-07 {
    background-color: #fbdad4
}

.color_tag span.colorTag-08 {
    background-color: #facec5
}

.color_tag span.colorTag-09 {
    background-color: #f7b6a9
}

.color_tag span.colorTag-10 {
    background-color: #f59d8c
}

.color_tag span.colorTag-11 {
    background-color: #f2856f
}

@media all and (max-width: 1159px) {
    .color_tag {
        flex-wrap: wrap
    }

    .color_tag span {
        flex-direction: column;
        padding: .5rem 0;
        width: calc((100% - 4px)/5)
    }

    .color_tag span.colorTag-06 {
        width: 100%;
        flex-direction: row
    }
}