/*-----升學總覽inform_01.html-----*/
main.informZONE{ font-size: 20px;}
.informZONE img.chart{ width: 100%; margin: 1% auto 7%;}
.informZONE img.chart.p1{ max-width: 850px;}
.informZONE img.chart.p2{ max-width: 600px;}
.informZONE img.chart.p3{ max-width: 1300px;}
main.informZONE h2{ color: #926125; font-weight: bold;}
main.informZONE h3, main.informZONE h2.arrow{ margin-top: 5%; color: #035eb3; font-weight: bold;}
main.informZONE h3::before, main.informZONE h2.arrow::before{
    content: ""; display: inline-block; margin-right: 14px; position: relative; top:-3px; left: 3px;
    width: 0; height: 0; border-width: 9px 0 9px 17px; border-style: solid;
    border-color: transparent transparent transparent #2491f6;     
}
main.informZONE h4{ color: #926125; font-weight: bold; font-size: 1.5em; text-align: center;}
main.informZONE h5{ font-weight: bold;}
main.informZONE ol > li > strong{ font-size: 1.1em;}
main.informZONE ol > li{ margin-top: 1.8%;}
main.informZONE dd > ol > li{ margin-top: 0;}
ul.type_point > li{ list-style-type: square; text-indent: initial;}
ul.type_point li::marker{ color: #d69318; font-size: 1.2em;}
ol.type_number { list-style: none; counter-reset: my-counter list-item; }
ol.type_number > li::before { content: "("counter(my-counter)") "; }
main.informZONE ol.type_number > li { counter-increment: my-counter; text-indent: -1.5em; margin-top: 0; }
main.informZONE ol.type_number > li > strong{ font-size: inherit;}
main.informZONE ol.circle-list { list-style-type: none; padding: 0; }
main.informZONE ol.circle-list > li{ counter-increment: circle-counter; position: relative; margin-top: 0; padding-left: 23px; text-indent: initial;}
ol.circle-list li::before {
    content: counter(circle-counter);
    position: absolute; left: 0; top: 6px; 
    width: 19px; height: 19px; line-height: 19px; font-size: .75em; text-align: center;
    background-color: #4b4b4b; color: #fff; border-radius: 50%;     
}
ol.type_number dd{ text-indent: initial;}
main.informZONE dt{ font-size: 1.1em; margin-bottom: 5px;}
main.informZONE dt::before{
    content: ""; display: inline-block; margin-right: 7px; position: relative; top:-1px; left: 3px;
    width: 0; height: 0; border-width: 7px 0 7px 13px; border-style: solid;
    border-color: transparent transparent transparent #05A59A; 
}
main.informZONE a.link{ color: #ac722b; text-decoration: none;}
main.informZONE a.link:hover{ color: #0fb2a7; }
/*表格*/
.grid-container{ display: grid; grid-template-columns: auto auto; gap: 2px; padding: 2px; background: #69a6db;}
.grid-container div{ padding: 10px 15px; background: #fff;} 
.grid-container div.color{ background: #d5ecff;}
.grid-container div.highLight{ color: #016dcb; font-weight: bolder;}

.grid-container.chart1{ grid-template-columns: auto auto auto auto; background: #ffd382;} 
.grid-container.chart1 div.color{ background: #ffdb97; text-align: center; font-weight: bolder;}
.grid-container.chart1 div.subject{ background: #fff4dd; text-align: center;}

.grid-container.red{ background: #ffaaab;} 
.grid-container.red div.color{ background: #ffc0c1; text-align: center; font-weight: bolder;}

.grid-container.chart2{ grid-template-columns: 12% auto auto; text-align: center;}
.grid-container.chart2 div.color{ font-weight: bolder;}
.chart2 .row-span{ grid-row: 2 / span 2;}

.grid-container.chart5{ grid-template-columns: auto auto auto auto auto; max-width: 800px; text-align: center; line-height: 1.2rem;}
.grid-container.chart5 br{ display: none;}

.grid-container.chartScore{ grid-template-columns: repeat(6, 1fr); max-width: 800px; text-align: center; background: #F4B083;}
.grid-container.chartScore div.color{ background: #ED7D31; color: #fff; font-weight: bolder;}

.grid-container.document{ grid-template-columns: 70px auto;}
.grid-container.document div:nth-of-type(n+3){ background: #d5ecff;}
.grid-container.document div:nth-of-type(3n){ text-align: center;}
.grid-container.document div.color,
.grid-container.li_table div.color{ background: #3886cb; font-weight: bolder; color: #fff;}
.grid-container.document div.items{ grid-column: 1 / span 2; background: #fff;}
.grid-container.document div.items ul { list-style-type: none; padding: 0 0.7em;}
.grid-container.document div.items ul li{ position: relative; padding-left: 1.5em; text-align: left;}
ul.itemlist1{ counter-reset: list-counter list-item; }
ul.itemlist2{ counter-reset: list-counter 1 list-item; }
ul.itemlist3{ counter-reset: list-counter 5 list-item; }
ul.itemlist4{ counter-reset: list-counter 14 list-item; }
ul.itemlist5{ counter-reset: list-counter 17 list-item; }
div.items ul li:before { content: counter(list-counter, upper-alpha)"."; counter-increment: list-counter; position: absolute; left: 0;}

.grid-container.li_table ol > li{ margin-top: .2em;}
.grid-container.links { grid-template-columns: auto auto auto; text-align: center;}
.grid-container.links div:first-of-type{ grid-column: 1 / span 3;}
.grid-container.links a{ display: block; text-decoration: none; color: inherit; }
.grid-container.links div:nth-of-type(n+2):hover{ background: #fffadc;}

button.TESTdownload{ 
    max-width: 630px; padding: 1.5% 0; font-size: 1.5em; letter-spacing: 0.5rem; color: #fff; font-weight: bold;  
    background-color: #ff7a05; border-radius: .8rem; border: none; transition: all .3s ease-in-out;
}
button.TESTdownload:hover{ background-color: #ff8d0b; }
button.TESTdownload a{ display: block; color: #fff; text-decoration: none;}
button.TESTdownload a::after{ 
    content: ""; display: inline-block; margin-left: 7px; width: 26px; height: 26px; background-color: #fff; 
    -webkit-mask-image: url(../images/icon_open.svg); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: 26px 26px;
    mask-image: url(../images/icon_open.svg); mask-repeat: no-repeat; mask-position: center; mask-size: 26px 26px;
}

/*-----特殊選才special.html-----*/
.informZONE button.spBN{ 
    width: calc(100% - 8px); padding: 1.6% 0; font-size: 1.5em; letter-spacing: 0.2rem; color: #fff; font-weight: bold; 
    background-color: #ff8d0b; border: 2px solid rgba(255, 255, 255,.6); box-shadow: 0 0 0 4px #ff8d0b;
}
.informZONE button.spBN:hover{ color: #fff; background-color: #ff9e30; box-shadow: 0 0 0 4px #ff9e30;}
.downarrow { margin-left: 15px; display: inline-block; animation: down-arrow 0.6s infinite alternate ease-in-out; }
.downarrow i { 
    display: inline-block; margin-left: 5px;  position: relative; top: -1px;
    width: 0; height: 0; border-width: 10px 0 10px 17px; border-style: solid;
    border-color: transparent transparent transparent #fff;   
}
.downarrow i:nth-child(1){ opacity: 0.9; }.downarrow i:nth-child(2){ opacity: 0.7; }
/*箭頭動畫*/
@keyframes down-arrow {
    0% { -webkit-transform: translateX(0); opacity: 0.4; }
    100% { -webkit-transform: translateX(-0.4em); opacity: .9; }
}
/*表格table*/
section h2 > a { text-decoration: none; color: inherit;}
section h2 > a > span{ font-size: 0.7em; font-weight: normal; color: #3e3e3e;}
section h2 > a > span::after{ 
    content: ""; display: inline-block; margin-left: 4px; position: relative; top: -3px;
    width: 0; height: 0; border-width: 9px 7px 0 7px ; border-style: solid;
    border-color: #ca0644 transparent transparent transparent;
}
section:nth-of-type(2) h2 > a > span::after{ 
    border-color: #1368c9 transparent transparent transparent;
}
table { width: 100%; margin: 0; padding: 0; border-collapse: collapse; table-layout: fixed;}
table tr:nth-child(odd){ background-color: #e8f4fe;}
table tr td:nth-of-type(2),
table tr td:last-of-type{ text-align: center;}
table th, table td { padding: .75em .625em ; line-height: 1.6rem; border: 1px solid #9bd0ff;}
table.grid-red tr:nth-child(odd){ background-color: #ffe7ef;}
table.grid-red th, table.grid-red td{ border: 1px solid #ffd1e1;}
table th { 
    padding-bottom: .75em; font-size: 0.85em; font-weight: bold; letter-spacing: .1em; text-align: center;
    background: #fff; border-bottom: 3px solid #6CB3F0;
}
table.grid-red th{ border-bottom: 3px solid #ff7fa8;}
table tr th:nth-of-type(1) { width: 15%; }
table tr th:nth-of-type(2) { width: 15%; }
table tr th:nth-of-type(3) { width: 21%; }
table tr th:nth-of-type(4) { width: 21%; }
table tr th:nth-of-type(5) { width: 15%; }
table tr th:nth-of-type(6) { width: 13%; }
table td a{ display: block; text-decoration: none; color: inherit;}
table td a::after{
    content: ""; display: inline-block; margin-left: 3px; width: 15px; height: 15px; background-color: #296fd2; 
    -webkit-mask-image: url(../images/icon_open.svg); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: 15px 15px;
    mask-image: url(../images/icon_open.svg); mask-repeat: no-repeat; mask-position: center; mask-size: 15px 15px;
}
table.grid-red td a::after{ background-color: #c1204b;}
table.grid-red tr:last-of-type { background-color: #ff9cae;}
table tr:last-of-type { background-color: #6ab1f0;}
table tr:last-of-type a{ text-align: center; font-weight: bold; color: #fff;}
table tr:last-of-type a::after{ display: none;}
/*--收合效果--*/
.toggle-input { display:none;}
.toggle-label { 
    display: block; width:150px; margin:0 auto ; padding:7px; background-color:#fff; border:#bcbcbc 1px solid; border-radius:8px; 
    font-size: 0.9em; color:#969696; text-align:center; position:absolute; bottom:0; left:0; right:0; z-index: 2; cursor:pointer; 
}
.toggle-label:hover{ border-color: #ff931f; color:#ff931f;}
.toggle-label:before { content:"了解更多";}
.toggle-input:checked ~ .toggle-label:before { content:"收合";}
.toggle-content { 
    max-height:200px; height:200px;/*展開前高度*/ overflow:hidden; 
    -moz-transition:ease 0.8s max-height; -o-transition:ease 0.8s max-height; -webkit-transition:ease 0.8s max-height; transition:ease 0.8s max-height;
} 
.toggle-input:checked ~ .fix > .toggle-content { max-height: 100%;/*展開後高度*/ height:auto; }
.whiteLayer{
    width: 100%; height: 110px; margin: 0 auto; position: absolute; z-index: 1; bottom: 15%; 
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 100%); /*白漸層*/
}
/*----------*/
.informZONE div .black{ 
    width:100%; height: 100px; border-radius: .5rem; display: flex; align-items: center; justify-content: center;
    position: relative; background-size: cover; cursor: pointer;
}
.informZONE div:nth-of-type(2) .black{ background:url(../images/analysis_02.jpg) center no-repeat;}
.informZONE div:nth-of-type(3) .black{ background:url(../images/analysis_03.jpg) center no-repeat;}
.informZONE div .black::before{ 
    content: ""; display: block; width:100%; height:100%; border-radius: .5rem; transition: all .5s ease-in-out;
    background:rgba(73, 73, 73, 0.85); position:absolute; top:0; left:0; right: 0; z-index: 0;
}
.informZONE div .black span{ position: absolute; left: 0; right: 0; z-index: 1; color: #fff; font-size: 1.2em; letter-spacing:0.1em; text-align: center; }
.informZONE div:hover > .black::before{ background:rgba(254, 119, 23,.9);/*色塊淡出*/}

.informZONE .modal-dialog .modal-content{ font-size: 1.2em; text-align: center; }
.informZONE .modal-dialog .modal-body h4{ margin: 3% auto; font-size: 1.5em; font-weight: bold; color: #df0e5e;}
.informZONE .modal-dialog .modal-body p{ margin: 0 auto 3%; }
.informZONE .modal-dialog .modal-body input{ max-width: 500px; padding: 18px 0; font-size: 1em; border: none; background-color: #dbedec;} 
.informZONE .modal-content .btn-close{ font-size: .75em; }
.informZONE .modal-footer{ justify-content: center; border-top: none;}
.informZONE .modal button.enter{ 
    width: 100%; margin: 0 auto; padding: 10px 0; font-size: 1.1em; letter-spacing: 0.1rem; color: #fff; font-weight: bold; text-decoration: none; 
    background-color: #05A59A; border-radius: 0 0 1.5rem 1.5rem; border: none; transition: all .3s ease-in-out;
}
.informZONE .modal button.enter:hover{ background-color: #25c0b8;}


/*-----------------------------------------------------------------------*/
@media (max-width:1400px) {


    
}  

/*-----------------------------------------------------------------------*/

@media (max-width: 1240px) {

    /*表格table*/
    table { font-size: 0.9em;}
    table th, table td { padding: .6em .5em;}
    table tr th:nth-of-type(1) { width: 16%; }
    table tr th:nth-of-type(2) { width: 17%; }
    table tr th:nth-of-type(3) { width: 18%; }
    table tr th:nth-of-type(4) { width: 19%; }
    table tr th:nth-of-type(5) { width: 16%; }
    table tr th:nth-of-type(6) { width: 14%; }
    table tr td:nth-of-type(3),
    table tr td:nth-of-type(4),
    table tr td:nth-of-type(5) { font-size: 0.95em;}

}

 

/*--------grid-breakpoints-LG---------------------------------------------*/
    @media (max-width: 992px) {

        /*表格*/
        .grid-container.chart2{ grid-template-columns: 18% auto auto; }
        .grid-container.li_table{ grid-template-columns: auto;}
        .grid-container.li_table div:nth-of-type(even){ background: #d5ecff;}

        button.TESTdownload{ padding: 3% 0; font-size: 1.2em; letter-spacing: normal; border-radius: .4rem;}
        button.TESTdownload a::after{ margin-left: 4px; width: 18px; height: 18px; -webkit-mask-size: 18px 18px; mask-size: 18px 18px;}

        /*-----特殊選才special.html-----*/
        .informZONE div .black{ height: 80px;}


    }


/*--------ipad------------------------------------------------------------*/

    @media (max-width: 768px) {

        /*-----升學總覽-----*/
        main.informZONE{ font-size: 18px;}
        main.informZONE h3, main.informZONE h2.arrow{ margin-top: 8%; }        
        main.informZONE h5{ font-size: 1em; margin-bottom: 0.3em;}
        main.informZONE ol { padding-left: 1.5em;}
        main.informZONE ul { padding-left: 1.4em;}
        main.informZONE ul.list-unstyled{ padding-left: 0;}
        main.informZONE ol > li{ margin-top: 3.5%;}
        ol.circle-list li::before { top: 3px; padding: 0; width: 17px; height: 17px; line-height: 17px;}
        /*表格*/
        .grid-container{ gap: 1px; padding: 1px; }
        .grid-container.chart1{ grid-template-columns: auto auto;} 
        .grid-container.chart1 div.color:first-of-type,.grid-container.chart1 div.color:nth-of-type(2){ display: none;} 
        .grid-container div{ padding: 6px;}
        .grid-container.links div{ display: flex; align-items: center; justify-content: center; padding: 6px 3px; font-size: .95em; line-height: 1.3rem; }

        /*-----特殊選才special.html-----*/
        .informZONE button.spBN{ padding: 4.5% 0; font-size: 1.3em; letter-spacing: 0.1rem;}
        .downarrow i{ margin-left: 1px; border-width: 7px 0 7px 11px;}
        /*表格table*/
        table { font-size: 1em;}
        table thead { clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; position: absolute; }
        table th,table.grid-red th{ border: none;}
        table tr { display: block; padding: 0 2%; }
        table td { border-bottom: 1px solid #afdaff; border-style: none none solid none; padding: 2.5% 2%; display: block; text-indent: -8.5em; padding-left: 8.5em;}
        table.grid-red td{ border-bottom: 1px solid #ffafc3; border-style: none none solid none;}
        table td:last-child { border-bottom: 0; }
        table td::before { content: attr(data-label); float: left; width: 150px; font-weight: bold; color: #004c93;} 
        table.grid-red td::before { color: #8c0f32;}
        table tr td:first-of-type br{ display: none; }
        table tr td:first-of-type span{ margin-left: 5px;}
        table tr td:nth-of-type(2), table tr td:last-of-type{ text-align: left;}
        table tr td:nth-of-type(3),
        table tr td:nth-of-type(4),
        table tr td:nth-of-type(5) { font-size: 1em;}


    }

/*--------grid-breakpoints-SM---------------------------------------------------*/

    @media (max-width: 576px) {

        /*-----升學總覽----*/
        main.informZONE{ font-size: 16px;}
        .informZONE img.chart{ margin: 0 auto 10%;}
        main.informZONE h2{ font-size: 1.3em;}
        main.informZONE h3, main.informZONE h2.arrow{ font-size: 1.2em;}
        main.informZONE h3::before, main.informZONE h2.arrow::before{ margin-right: 8px; } 
        main.informZONE h3::before, main.informZONE h2.arrow::before,
        main.informZONE dt::before{ border-width: 5px 0 5px 10px;}
        /*表格*/
        .grid-container div.color { text-align: center;}
        .grid-container.chart5 br{ display: block; }
        .grid-container.document{ grid-template-columns: 45px auto;}
        .grid-container.document div.color{ letter-spacing: -0.05rem;}
        .grid-container.document div.items ul { padding: 0 0.4em 0 0.7em;}
        .grid-container.links div{ padding: 6px 2px; letter-spacing: -0.05em; }


        /*-----特殊選才special.html-----*/
        .informZONE button.enter{ padding: 6px 0;}
        .informZONE div .black{ height: 60px;}
        /*表格table*/
        table td { text-indent: -7.5em; padding-left: 7.5em;}
        table td::before { width: 120px; } 


    }


/*--------iPhone XR------------------------------------------------------------*/

    @media (max-width: 414px) {



    }