body { margin: 0 auto; background: #fff; font-family:Arial,Helvetica,"微軟正黑體"!important; }
* {box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; }
.wrapper{ width:100%; margin:0 auto; color: #212121;}
p { max-height: 999999px; /*調整Android手機字體大小一致*/}
img {  display:block; /*解決圖片下方縫隙*/}


.top { width: 75px; height: 75px; background:#49aaff; border-radius: 99em; opacity: 0.8; position: fixed; right:20px; bottom: 12%; display: none;}
.top:hover { background:#146ebc; cursor: pointer;}
.top::after {
    content: ""; width: 20px; height: 20px; margin: 0 auto;
	border-right: 3px solid #fff; border-top: 3px solid #fff; transform: rotate(-45deg);
	position: absolute; top: 28px; left: 0; right: 0;     
}

/* 刊頭 */
.head{ width:100%; margin:0 auto; text-align:center; }
.head img{ width: 100%; margin: 0 auto;}
.mobile_pic{ display: none;}
ul.navbar{ 
    width: 100%; margin:0 auto; text-align:center; font-size: 28px; background: rgba(13, 90, 167, 0.9); 
    display: flex; justify-content: center; align-items: center; position: sticky; top: 0px; z-index: 99;
}
ul.navbar br{ display: none;}
ul.navbar a{ flex: 1; padding: 1.5% 1.8%; color: #fff; text-decoration: none; position: relative; }
ul.navbar a.active{ font-size: 1.2em; color: yellow; font-weight: bold;}
ul.navbar a.active::after{ 
    content: ""; display: block; margin: 0 auto; width: 0; height: 0; 
    position: absolute; top: 100%; left: 0; right: 0;
    border: solid rgba(13, 90, 167, 0.9); border-width: 20px 20px 0 20px;
    border-color: rgba(13, 90, 167, 0.9) transparent transparent transparent;
}
ul.navbar a:hover{ color: yellow;}


/*中間內容*/
.mainContent{ width: 100%;}
.cont-wrapper{ max-width: 1200px; padding: 7% 2% 3%; margin:0 auto; text-align:center; }
.cont-wrapper#Zone1{ padding-bottom: 8%;}
.mainContent img{ width: 100%; margin: 0 auto;}
ul.nav_tag{ margin: -4% auto 5%; display: flex; text-align: center; font-size: 30px; }
ul.nav_tag a{ flex: 1; text-decoration: none; }
ul.nav_tag li{ margin: 0 auto 4%; padding: 0; font-weight: bold; }
ul.nav_tag li::before{ content: "";}
ul.nav_tag a::after{ content: ""; display: block; width: 100%; height: 6px; margin: 0 auto ; border-radius: 99em; background: #a8e890;}
ul.nav_tag a:first-of-type{ color: #64C63F;}
ul.nav_tag a:last-of-type{ color: #29ABE2;}
ul.nav_tag a:last-of-type::after{ background: #abe7ff;}
img.title_01{ width: 90%; max-width: 1100px; margin-bottom: 5%; }
.skyBG{  
    background: -moz-linear-gradient(top,  rgba(221,245,255,1) 0%, rgba(247,250,252,0) 15%);
    background: -webkit-linear-gradient(top,  rgba(221,245,255,1) 0%,rgba(247,250,252,0) 15%);
    background: linear-gradient(to bottom,  rgba(221,245,255,1) 0%,rgba(247,250,252,0) 15%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ddf5ff', endColorstr='#00f7fafc',GradientType=0 );
}
img.title_02{ width: 60%; max-width: 500px; margin-bottom: 8%;}
.way3Box{ margin-bottom: 7%; display: flex; justify-content: space-between; align-items: stretch; flex-wrap: wrap;}
.way3Box ul{ flex: 1; margin: 0 2%; font-size: 25px; line-height: 2.4rem; background: #fffbd8; border-radius: 1.8rem;}
.way3Box ul h2{ padding: 6% 3% 5%; border-radius: 1.8rem 1.8rem 0 0; font-size: 1.45em; font-weight: bold; color: #fff; background: #f29600;}
.way3Box ul li{ padding: 6% 10% 7%; text-align: justify; }
.way3Box ul span{ color: #e3007f;}
.way3Box ul.wBox1{ margin-left: 0;}
.way3Box ul.wBox2{ background: #e5f0d6;}
.way3Box ul.wBox2 h2{ background: #8dc21f;}
.way3Box ul.wBox3{ background: #fceae7; margin-right: 0;}
.way3Box ul.wBox3 h2{ background: #eb7485;}
.timeline{ margin: 0 0 19%; font-size: 26px; font-weight: bold; text-align: left;}
.timeline:last-of-type{ margin-bottom: 6%; }
.timeline h3{ margin-bottom: 2%; font-size: 1.6em; color: #0070e0; }
.timeline h3 i{
    display: inline-block; margin: 0 2px 0 4px; width: 0; height: 0; position: relative; top:-3px;
    border: solid #0070e0; border-width: 12px 0  12px 16px;
    border-color: transparent transparent transparent #0070e0 ;
}
.timeline h3 i:last-child{ margin-right: 12px;}
.timeline p{ margin-bottom: 4%; line-height: 2.2rem;}

/*計畫表範例*/
img.title_example{ width: 65%; max-width: 450px; margin-bottom: 5%;}
p.month_note{ margin-bottom: 4%; padding: 0 1%; font-size: 24px; font-weight: bold; line-height: 2rem;}
.eg_mobile_zone{ display: none;}
.tableContent div, .weekContent div{ display:none; }
.tableContent div:first-child, .weekContent div:first-child{ display:block;}
.tableContent{ margin-bottom: 5%;}
.weekContent{ margin: 3% auto 18%;}
.weekContent.mobile img{ width: 87%; max-width: 500px;}
.exampleMenu li{ 
    width: 36%; max-width: 260px; margin: 0 1% 3%; padding: 1% 2%; display: inline-block; 
    font-size: 26px; color: #e3007f; background: #fff; border: 2px solid #fd73b6; border-radius: 999em; cursor: pointer;
}
.exampleMenu li:hover{ background: #fd73b6; border: 2px solid #fd73b6; color: #fff;}
.exampleMenu li.active{ font-weight: bold; color: #fff; background: #e3007f; cursor: default; position: relative;}
.exampleMenu li.active::after{ 
    content: ""; display: block; margin: 0 auto; width: 0; height: 0; 
    position: absolute; top: 100%; left: 0; right: 0;
    border: solid #e3007f; border-width: 15px 15px 0 15px;
    border-color: #e3007f transparent transparent transparent;    
}


/*每月進度*/
.swiper.monthSwiper{ margin: 3% auto; padding: 0 2%; text-align: center; }
.monthList div{ flex: 1; margin: 0 3px; padding: .5%; font-size: 45px; color: #0071bc; background: #e6e6e6; border-radius: 999em; cursor: pointer;} 
.monthList div::after{ content: "月"; font-size: .6em;}
.monthList div:hover{ background: #bae3ff;}
.monthList div.active{ color: #fff; background: #0071bc; cursor: default; }
.monthBox{ max-width: 1200px; display: flex; flex-wrap: wrap; margin: 0 auto; padding: 3% 1%; }
.monthBox .calendar{ width: 100%; /*position: sticky; position: -webkit-sticky; top:80px; align-self: flex-start;*/}
.monthBox .calendar img{ width: 100%;}
.monthBox .calendar ul{ margin: 0 ; padding: 0; font-size: 24px; text-align: left;}
.monthBox .calendar ul li{ list-style-type: square; margin-top: 1.5%; line-height: 2rem; margin-left: 36px; }
.monthBox .calendar ul li::marker{ color: #ffa617; font-size: 1.5em; }
.monthBox .calendar ul.blue li::marker{ color: #48a3fe; }
.monthBox .calendar ul.green li::marker{ color: #009944; }
.monthBox .calendar ul.brown li::marker{ color: #A96640; }
.monthBox .calendar ul.pink li::marker{ color: #E4007F; }
.monthBox .calendarList{ width: 100%; margin: 6% auto 0; text-align: center; }
.calendarList .ListTitle_Box{ font-size: 26px; font-weight: bold; text-align: center;}
.calendarList .ListTitle_Box h1{ padding-left: 35px; font-size: 2em; color: #0071bc; letter-spacing: .7em;}
.calendarList .ListTitle_Box h1.spaceNormal{ padding-left: 0; letter-spacing: normal; }
.calendarList .ListTitle_Box hr{ display: block; width: 100%; height: 5px; margin: 20px auto; background: #2c98df; box-shadow: none; border: none;}
.calendarList .ListTitle_Box h2{ font-size: 1.5em;}
.calendarList .ListTitle_Box p{ margin: 3% auto 1.5%; color: #c1272d; }
.calendarList .ListTitle_Box p.May_note{ margin: 3% auto; color: #E4007F; line-height: 1.6rem;}
.calendarList .ListTitle_Box p img{ width: 45px; padding-right: 5px; display: inline-block; position: relative; top: 5px;}
.calendarList .ListTitle_Box p.note{ margin: 1.5% auto; color: #601986; display: flex; justify-content: center; align-items: center;}
.calendarList .ListTitle_Box p.note i{ display: inline-block; width: 40px; height: 20px; margin-right: 5px; background: #E3D3E7;}
.calendarList .ListTitle_Box p.note.test{ color: #009944; }
.calendarList .ListTitle_Box p.note.test i{ border: 4px solid #009944; background: #fff;}
.calendarList .ListTitle_Box p.note.both{ color: #333; font-size: 0.85em; font-weight: normal; line-height: 1.45rem;}
p.note.both br{ display: none;}
.grid-container { margin-bottom: 6%; /*padding: 0 1.5%;*/ display: grid; grid-template-columns: auto auto auto auto auto; }
.grid-container.exam { grid-template-columns: auto auto auto; }
.grid-container.Gline{ border: 3px solid #009944; border-radius: 1.8rem 1.8rem 0 0;}
.grid { border: 1px solid rgba(247, 181, 44, .7); padding: 6px 8px; font-size: 20px; line-height: 1.7rem;}
.grid-container.blue > .grid { border: 1px solid rgb(0, 100, 180,.6); }
.grid-container.green > .grid { border: 1px solid rgba(0, 153, 69,.6); }
.grid-container.brown > .grid { border: 1px solid rgba(169, 102, 64,.6); }
.grid-container.pink > .grid { border: 1px solid rgba(232, 82, 152,.6); }
.grid.subject { grid-column: 1 / span 5; color: #fff; padding: 11px 20px 8px; font-size: 1.6em; font-weight: bold; background: #F29600; border-radius: 1.5rem 1.5rem 0 0;}
.grid-container.exam > .grid.subject{ grid-column: 1 / span 3;}
.grid-container.blue > .grid.subject { background: #036EB8; }
.grid-container.green > .grid.subject { background: #009944; }
.grid-container.brown > .grid.subject { background: #A96640; }
.grid-container.pink > .grid.subject { background: #E85298; }
.grid.thead{ background: #FCE2B2;}
.grid.testColor{ background: #E3D3E7;}
.grid-container.blue > .grid.thead{ background: #C7E8FA;}
.grid-container.green > .grid.thead{ background: #BEDFC2;}
.grid-container.brown > .grid.thead{ background: #FCDFAF;}
.grid-container.pink > .grid.thead{ background: #FBE2ED;}
.unit{ text-align: left;}
.unit a{ display: block; text-decoration: none; color: #0071BC; font-weight: bold; cursor: pointer;}
.unit a::after{ 
    content: ""; display: inline-block; width: 33px; height: 23px; margin: -4px 0 0 4px; 
    background: url(../images/schedule_icon_play.png) center center no-repeat; background-size: 33px 23px;
    position: relative; top: 4px;
}
.unit a:hover{ color: #E02A2A;}
.unit:has(a:hover) { background: #ffffce;}/*部分瀏覽器不支援*/
.unit br, .grade br{ display: none;}
.unit p{ padding-top: 3px; font-size: 0.9em;}
/*彈出影片*/
.video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }
.video-container iframe{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-height: 90vh; border-radius: .8rem;}
.lightboxBOX{ display:none; width: 100vw; height: 100vh; margin: 0 auto; position:fixed; top:0; bottom:0; left:0; right:0; z-index: 1000;}
.lightboxOverlay{ 
    position:absolute; top:0; left:0; right:0; width: 100%; height: 100%;
    background:rgba(0, 0, 0, 0.8); transition:opacity 500ms; z-index:1000;
}
.pushLightbox{ 
    width: 94%; max-width:1100px; max-height: 90vh; margin:0 auto; border-radius: .8rem; box-shadow: 0 10px 10px rgba(0, 0, 0, 0.7); 
    position:absolute; top:50%; left:0; right:0; z-index: 1001;
    transform: translate3d(0,-50%,0);/*垂直置中*/
}
/*關閉鈕*/
.lightboxClose{ width:45px; height:45px; margin:auto 0; background-color:#3887fd; border-radius:100px; position:absolute; top:-30px; right:-20px; z-index: 1002; cursor:pointer;}
.lightboxClose:hover{ background-color:#0e52b8;}
.lightboxClose:before, .lightboxClose:after{ content:""; width:3px; height:20px; background-color:#ffffff; border-radius:15px; position:absolute; top:0; left:0; bottom:0; right:0; margin:auto;}
.lightboxClose:before{ -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -o-transform:rotate(-45deg); transform:rotate(-45deg);}
.lightboxClose:after{ -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg);}


/*冊次單元列表*/
.listgrid-container { margin-bottom: 6%; padding: 0 1.5%; display: grid; grid-template-columns: auto auto auto auto auto auto; }
.listgrid { border: 1px solid rgba(41, 170, 181,.45); padding: 8px 10px; font-size: 22px; line-height: 1.7rem;}
.listgrid.subject { grid-column: 1 / span 6; color: #fff; padding: 15px 20px 12px; font-size: 1.9em; font-weight: bold; background: #29AAB5; border-radius: 1.5rem 1.5rem 0 0;}
.listgrid.subject.span5 { grid-column: 1 / span 5; }
.listgrid.thead{ background: #ADDBDC;}
.listgrid.book_m{ display: flex; justify-content: center; align-items: center;}
.listgrid.book_m.m1{ grid-row: 3 / span 5; }
.listgrid.book_m.m2{ grid-row: 8 / span 6; }
.listgrid.book_m.m3{ grid-row: 14 / span 5; }
.listgrid.book_m.m4{ grid-row: 19 / span 4; }
.listgrid.book_m.m5{ grid-row: 23 / span 3; }
.listgrid.book_m.m6{ grid-row: 26 / span 3; }
.listgrid.book_m.b2{ grid-row: 8 / span 4; }
.listgrid.book_m.pc1{ grid-row: 3 / span 6; }
.listgrid.book_m.pc2{ grid-row: 9 / span 7; }
.listgrid.book_m.pc3{ grid-row: 16 / span 3; }
.listgrid.book_m.es1{ grid-row: 3 / span 3; }
.listgrid.book_m.es2{ grid-row: 6 / span 2; }
.listgrid.book_m.h2{ grid-row: 6 / span 2; }
.listgrid.book_m.h3{ grid-row: 8 / span 2; }
.listgrid.book_m.h4{ grid-row: 10 / span 2; }
.listgrid.book_m.h5{ grid-row: 12 / span 2; }
.listgrid.book_m.h6{ grid-row: 14 / span 2; }
.listgrid.book_m.g2{ grid-row: 6 / span 4; }
.listgrid.book_m.g3{ grid-row: 10 / span 5; }
.listgrid.book_m.g4{ grid-row: 15 / span 2; }
.listgrid.book_m.g5{ grid-row: 17 / span 3; }
.listgrid.book_m.g6{ grid-row: 20 / span 3; }

/*免費諮詢*/
.contactUS{ width:95%; max-width: 700px; margin: 0 auto 5%; padding: 2%; background-color: #d0135b; border-radius: 999em;}
.contactUS:hover{ background-color: #ec2e76;}
.contactUS a{ display: block; text-decoration: none; text-align: center; font-size: 34px; font-weight: bold; color: #fff; }
.contactUS br{ display: none;}
.downarrow { margin-left: 15px; display: inline-block; animation: down-arrow 0.6s infinite alternate ease-in-out; }
.downarrow i { 
    display: inline-block; width: 1px; padding: 6px; position: relative; top:-5px;
    border: solid #fff; border-width: 0 5px 5px 0; opacity: 0.2;
    transform: rotate(-45deg); -webkit-transform: rotate(-45deg);    
}
.downarrow i:nth-child(1){ opacity: 0.8; }.downarrow i:nth-child(2){ opacity: 0.6; }
/*箭頭動畫*/
@keyframes down-arrow {
    0% { -webkit-transform: translateX(0); opacity: 0.4; }
    100% { -webkit-transform: translateX(-0.4em); opacity: 0.8; }
}



footer{ width: 100%; margin: 0 auto; padding: 10px 5px !important; color: #a3a3a3; font-size: 13px !important; line-height: 1.4em !important; text-align: center; }


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

    /* 刊頭 */
    ul.navbar{ font-size: 22px; }
    ul.navbar a{ padding: 2% 0;}
 
    /*中間內容*/
    .way3Box ul{ font-size: 24px; line-height: 2.2rem; }
    .way3Box ul h2{ font-size: 1.4em;}
    .timeline h3{ font-size: 1.4em; }

    /*每月進度*/
    .swiper.monthSwiper{ margin: 4% auto;}
    .monthBox{ padding: 3%; }
    .monthList div{ flex: none; width: 20%; max-width: 130px;}  
    .monthBox .calendar ul{ font-size: 20px;  }
    .monthBox .calendar ul li{ margin-top: 1%; line-height: 1.7rem; }
    .calendarList .ListTitle_Box{ font-size: 22px; }

    /*冊次單元列表*/
    .listgrid { padding: 6px 8px; font-size: 20px; line-height: 1.7rem;}

    /*免費諮詢*/
    .contactUS { padding: 3% 2%; }    

}

/*====================================================================================================================================*/
@media screen and (max-width:1023px) {

    .top { width: 65px; height: 65px; }
    .top::after { top: 25px; }     

    /*中間內容*/
    ul.nav_tag{ margin: -2% auto 5%; font-size: 26px; }
    .way3Box ul{ font-size: 21px; line-height: 1.9rem; }
    .way3Box ul h2{ font-size: 1.3em;}
    .timeline{ font-size: 24px; }
    .timeline h3 i{
        margin: 0 1px 0 3px; top:-5px;
        border-width: 8px 0  8px 12px; border-color: transparent transparent transparent #0070e0 ;
    }
    .timeline h3 i:last-child{ margin-right: 8px;}

    /*計畫表範例*/
    .exampleMenu li{ padding: 2%; } 
    .eg_pc_zone{ display: none;}
    .eg_mobile_zone{ display: block;}

    /*每月進度*/    
    .monthList { margin: 5% auto; }      
    .monthList div{ padding: 1% 1.5%; font-size: 36px;}      
    .monthBox .calendar,
    .monthBox .calendarList{ width: 100%; margin: 0 auto 4%; position: static;}
    .calendarList .ListTitle_Box{ margin: 7% auto 3%;}




}


/*====================================================================================================================================*/
@media screen and (max-width:768px) {

    .top { width: 40px; height: 40px; right:10px;}
    .top::after { width: 10px; height: 10px; top: 15px; }    

    /* 刊頭 */
    .pc_pic{ display: none;}
    .mobile_pic{ display: block;}
    ul.navbar{ font-size: 20px; flex-wrap: wrap; line-height: 1.6rem;} 
    ul.navbar br{ display: block;}
    ul.navbar a{ width: 50%; padding: 3% 1%; border: 1px solid rgba(255, 245, 174, .9);}
    ul.navbar a.active{ font-size: 1em;}
    ul.navbar a.active::after{ border-width: 13px 13px 0 13px; }    

    /*中間內容*/
    .cont-wrapper{ padding: 10% 2% 7%; }
    ul.nav_tag{ margin: -4% auto 7%; font-size: 21px; }
    ul.nav_tag a::after{ height: 4px; }
    img.title_02{ padding-top: 7%;}
    .way3Box ul{ width: 80%; max-width: 450px; margin: 0 auto 5%; flex: none; }
    .way3Box ul h2{ padding: 4% 3% 3%; font-size: 1.4em;}    
    .way3Box ul li{ padding: 4% 6%; }
    .way3Box ul.wBox1, .way3Box ul.wBox3{ margin-left: auto; margin-right: auto;}
    .timeline{ font-size: 20px; }
    .timeline p{ margin-bottom: 3%; padding: 0 3%; line-height: 1.8rem; font-weight: normal;}
    .timeline h3{ padding: 0 3%; font-size: 1.3em;}
    .timeline h3 i{
        margin: 0 1px 0 3px; top:-4px;
        border-width: 6px 0  6px 9px; border-color: transparent transparent transparent #0070e0 ;
    }
    .timeline h3 i:last-child{ margin-right: 5px;}

    /*計畫表範例*/
    p.month_note{ padding: 0 3%; font-size: 20px; font-weight: normal; line-height: 1.9rem; text-align: justify;}
    .exampleMenu li{ width: 45%; margin-bottom: 5%; padding: 2.5% 2%; font-size: 23px;}     

    /*每月進度*/    
    .monthList div{ padding: 1.5%; font-size: 32px;}   
    .monthBox{ padding: 6% 3%;}
    .monthBox .calendar ul{ font-size: 18px; }
    .monthBox .calendar ul li{ margin-left: 30px; }
    .monthBox .calendarList{ margin-top: 9%;}
    .calendarList .ListTitle_Box{ font-size: 20px; margin-bottom: 7%;}
    .calendarList .ListTitle_Box p{ margin-bottom: 4%;}
    .grid-container { margin-bottom: 13%;}
    .unit br{ display: block;}
    /*關閉鈕*/
    .lightboxClose{ width:35px; height:35px; top:-20px; right:10px;}

    /*冊次單元列表*/
    .listgrid-container { margin-bottom: 13%; grid-template-columns: 40px auto auto auto auto auto; }
    .grid, .listgrid { padding: 5px 6px; font-size: 18px; }
    .listgrid.subject { padding: 11px 10px 8px; font-size: 1.6em;}

    /*免費諮詢*/
    .contactUS { margin-bottom: 9%; padding: 4.5% 2%; }
    .contactUS a{ font-size: 26px; }
    .downarrow i { padding: 5px; border: solid #fff; border-width: 0 3px 3px 0; }    


    footer{ padding: 15px 1.5%; font-size: 12px !important; line-height: 1.3em !important; }
}

/*====================================================================================================================================*/
@media screen and (max-width:470px) {
  
    /* 刊頭 */
    ul.navbar{ font-size: 18px; line-height: 1.45rem;}
    ul.navbar a.active::after{ border-width: 10px 10px 0 10px; }    

    /*中間內容*/    
    ul.nav_tag{ margin: -2% auto 7%; font-size: 18px;}
    .way3Box ul{ font-size: 19px; line-height: 1.65rem; }
    .way3Box ul h2{ padding: 5% 3% 4%; }    
    .way3Box ul li{ padding: 5% 8% 6%; }
    .timeline{ font-size: 19px;}
    .timeline h3{ margin-bottom: 3%;}
    .timeline p{ text-align: justify;}

    /*計畫表範例*/
    p.month_note{ font-size: 18px; line-height: 1.75rem; }
    .exampleMenu li{ margin-top: 3%; font-size: 20px;}   
    .exampleMenu li.active::after{ border-width: 10px 10px 0 10px; border-color: #e3007f transparent transparent transparent; }

    /*每月進度*/  
    .swiper.monthSwiper{ margin: 6% auto 4%;}
    .monthList div{ font-size: 26px;} 
    .calendarList .ListTitle_Box h1{ font-size: 1.6em; padding-left: 26px;}
    .calendarList .ListTitle_Box h2{ font-size: 1.3em;}
    .calendarList .ListTitle_Box hr{ height: 4px; margin: 12px auto;}
    .calendarList .ListTitle_Box p.May_note{ font-size: 0.9em;}
    .calendarList .ListTitle_Box p img{ width: 35px; top: 4px;}
    .calendarList .ListTitle_Box p.note.both{ margin: 5% auto 0;}
    p.note.both br{ display: block;}
    .grid, .listgrid { padding: 4px; font-size: 18px; line-height: 1.6rem;}
    .unit a::after{ width: 28px; height: 20px; margin: -3px 0 0 3px; background-size: 28px 20px; top: 3px;}

    /*冊次單元列表*/
    .listgrid-container { grid-template-columns: 35px auto auto auto auto 55px; }
    .grid.thead, .listgrid.thead{ padding: 3px 0; font-size: 16px; line-height: 1.3rem;}
    .grade br{ display: block; text-align: left;}
    .grade{ text-align: left;}
    .grid:nth-of-type(5n+11), .listgrid.star{ font-size: 0.9em;}
    .exam .grid:nth-of-type(5n+11){ font-size: 1.1em; }


    /*免費諮詢*/
    .contactUS { line-height: 2.2rem; border-radius: 1em;}
    .contactUS br{ display: block;}
    .contactUS span{ display: none;}


}

/*====================================================================================================================================*/
@media screen and (max-width:370px) {

    /* 刊頭 */
    ul.navbar{ font-size: 16px; line-height: 1.3rem;}   
    
    /*中間內容*/    
    ul.nav_tag{ font-size: 16px;}
    

}