@import url("swiper.min.css");

/*小網樣式*/
@media screen and (max-width:750px){

	.web{ display:none;}
    .mobile{ display:block; }
    .pagesize{ width: 100%;}
    
    /*-----------------header-----------------*/
    .header{position: fixed; background-color: #fff; z-index: 99;box-shadow: 5px 5px 5px rgba(0,0,0,0.05)}
    .headerLogo{ width: 192px; height: 30px; background-size: auto 30px;}
    .headlogopic {width:70px;}
    .header .pagesize:first-child{padding:12px 10px;}
    .btn_pic02{display: none;}
    .btn_menu{width:35px; cursor: pointer;}
    .btn_menu img{width:100%;}
    .subcont li{white-space:nowrap;}
    .subheader{ overflow-x: scroll; text-align: left;padding-left: 20px;display: none;}
    .open_nav{background-color: #f3f3f3;position: absolute;width:80%;right:-120%;top: 0px;z-index: 50; padding: 20px 10px;transition: 0.2s ease-in-out;overflow-y: scroll;height: 100vh;padding-bottom: 80px;}
    .open_navbg{height: 100vh;position: fixed;width:100%;background-color: rgba(0, 0, 0, 0.7);right: 0%;top: 48px;z-index: 99;transition: 0.2s ease-in-out;opacity: 0;display: none;}
    .open_nav ul {display: block;}
    .open_nav ul li{ padding: 0; font-size: 1rem;border-bottom: 1px dotted #ccc;position: relative;}
    .open_nav ul li ul {padding-left: 20px;}
    .open_nav ul li ul li{border-bottom: none;opacity: 0.7; margin-bottom: 5px;}
    .header .subheader .pagesize{padding:0px 10px}
    .subheader .pagesize ul a{padding: 12px 10px;font-size: 1.125rem;}
    .subheader .hotlink{left: -25px;top: 0px;}
    .contain{padding-top: 54px;}
    .crumb{margin-bottom: 10px;}
    .open_nav ul{position: relative;}
    .searchtext{position: relative;}
    .searchicon{position: absolute;right: 10px;top: 9px;}
    .m_nav a { display: block; padding: 10px 23px;}
    .m_nav:nth-last-of-type(1){border-bottom: none;margin-bottom: 30px;}
    ::-webkit-input-placeholder {font-size: 1rem;color:#b3b7b9;font-weight: 300;}
   .drop_menu{display: none; }
   .drop_menu_op .drop_menu {display: block;}
   .arrow{position: absolute;width:8px;height: 6px;background:url(assets/arrow-bottom.png)no-repeat center center;right: 10px;top: 18px;transform: rotate(0deg);}
   .drop_menu_op .arrow{transform: rotate(-180deg);}
    .drop_menu:active, .drop_menu:focus { position: static; }


    /*----------------麵包屑---------------*/
    .crumb li + li::before{ margin:0px 5px;}
    
    /*----------------topBn---------------*/
    .topBn_Area .top .topBn{ width: 100%; height: auto; background: none; }
    .topBn_Area .top .topBn img{ width: 100%; height: auto;}
    .topBn_Area .bot{ width: calc( 100% - 30px); padding: 0; position: relative; z-index: 10;}
    .topBn_Area .bot .btn_open{ display: none;}
    ul.topBn_nav{ display: none;}
    
    .topBn_nav_m{ display: block; padding:10px; }
    .topBn_nav_m .swiper-wrapper{ align-items:stretch;}
    .topBn_nav_m .swiper-slide{ height: auto;}
    .topBn_nav_m .swiper-slide a{ font-size: 0; line-height: 0; position: absolute; top: 0; bottom: 0; left: 0; right: 0;}
    .nav_m_item{ text-align: center; font-size: 0.9rem; line-height: 1.1; letter-spacing: 0; padding-top: 70px; height: 100%; display: flex; justify-content: center; align-items: center;}
    .nav_m_item.item1{background: url(../assets/topBn_nav_1.png) top center no-repeat; background-size: 60px auto;}
    .nav_m_item.item1:active{background: url(../assets/topBn_nav_1_on.png) top center no-repeat; background-size: 60px auto;}
    .nav_m_item.item2{background: url(../assets/topBn_nav_2.png) top center no-repeat; background-size: 60px auto;}
    .nav_m_item.item2:active{background: url(../assets/topBn_nav_2_on.png) top center no-repeat; background-size: 60px auto;}
    .nav_m_item.item3{background: url(../assets/topBn_nav_3.png) top center no-repeat; background-size: 60px auto;}
    .nav_m_item.item3:active{background: url(../assets/topBn_nav_3_on.png) top center no-repeat; background-size: 60px auto;}
    .nav_m_item.item4{background: url(../assets/topBn_nav_4.png) top center no-repeat; background-size: 60px auto;}
    .nav_m_item.item4:active{background: url(../assets/topBn_nav_4_on.png) top center no-repeat; background-size: 60px auto;}
    .nav_m_item.item5{background: url(../assets/topBn_nav_5.png) top center no-repeat; background-size: 60px auto;}
    .nav_m_item.item5:active{background: url(../assets/topBn_nav_5_on.png) top center no-repeat; background-size: 60px auto;}
    .nav_m_item.item6{background: url(../assets/topBn_nav_6.png) top center no-repeat; background-size: 60px auto;}
    .nav_m_item.item6:active{background: url(../assets/topBn_nav_6_on.png) top center no-repeat; background-size: 60px auto;}
    .nav_m_item.item7{background: url(../assets/topBn_nav_7.png) top center no-repeat; background-size: 60px auto;}
    .nav_m_item.item7:active{background: url(../assets/topBn_nav_7_on.png) top center no-repeat; background-size: 60px auto;}
    .nav_m_item.item8{background: url(../assets/topBn_nav_8.png) top center no-repeat; background-size: 60px auto;}
    .nav_m_item.item8:active{background: url(../assets/topBn_nav_8_on.png) top center no-repeat; background-size: 60px auto;}
    .nav_m_item.item9{background: url(../assets/topBn_nav_9.png) top center no-repeat; background-size: 60px auto;}
    .nav_m_item.item9:active{background: url(../assets/topBn_nav_9_on.png) top center no-repeat; background-size: 60px auto;}
    .nav_m_item.item10{background: url(../assets/topBn_nav_10.png) top center no-repeat; background-size: 60px auto;}
    .nav_m_item.item10:active{background: url(../assets/topBn_nav_10_on.png) top center no-repeat; background-size: 60px auto;}
    .swiper-button-next, .swiper-button-prev{ width: 20px; height: 20px; margin-top: -10px; outline: none;}
    .swiper-button-next{ right: -10px; background: url(../assets/topBn_nav_toR.png) no-repeat; background-size: 20px auto;}
    .swiper-button-prev{ left: -10px; background: url(../assets/topBn_nav_toL.png) no-repeat; background-size: 20px auto;}
    
    /*----------------newsBox-----------------*/
    .newsBox{ width: 100%;}
    .newsBox .tit{ margin-bottom: 5px;}
    .newsBox .tit::before{ margin-bottom: 5px;}
    .newsBox ul.news li{ flex-direction: column; align-items: flex-start;}
    .newsBox ul.news li > div:nth-child(2){ padding-left: 25px; color: #9a9a9a;}
    
    /*----------------新手上路區塊-----------------*/
    .phase{ width: 100%; padding: 25px 20px; flex-direction: column;}
    .phase .l_set{ margin-right: 0;}
    .phase .r_set{ width: 100%; flex: 1 1 auto;}
    ul.newHand{ margin-bottom: 20px;}
    ul.newHand li{ width: 100%; margin-right:0; margin-bottom: 20px;}
    ul.newHand li:nth-child(3){ margin-bottom: 20px;}
    .phase .r_set .con{ text-align: center;}
    .phase .r_set .tag{ margin: 0 auto;}
    .phase .r_set .badge{ width: 250px; margin: 0 auto;}
    
    /*----------------內容開始-----------------*/
    .content_apply {padding: 0;}
    
    /*----------------apply01-----------------*/
    .applyblock .tit{margin-bottom: 10px;}
    .applyblock .inerbox{margin-bottom: 25px;}
    .applyblock .inerbox h2{margin-bottom: 10px;padding: 10px 15px;}
    .subheader .seach{display: none;}
    .cardpicbox{ margin-bottom:0;}
    .cardpicbox:last-child{ margin-bottom:20px;}
    .cardpicbox .card{width:100%;margin-right: 0px;padding: 20px;}
    .cardpicbox .card .arrow{ right: 0; top: 0;}
    
    .listblock{ /*padding: 10px;*/}
    .listblock::before{display: none;}
    .listblock .inputbox{ flex-direction: column; margin-bottom: 10px;}
    .listblock .inputbox .cont .inputbox{ width: 100%; margin-left: 0; align-items: center;}
    .listblock .inputbox label{width:100%; margin-bottom: 5px; padding: 5px 10px; border-radius: 5px; background-color: #f0f5fb; box-sizing: border-box;}
    .listblock .inputbox .label-title{width:100%; margin-bottom: 5px; padding: 5px 10px; border-radius: 5px; background-color: #f0f5fb; box-sizing: border-box;}
    .listblock .inputbox label span{ left: 2px;}
    .listblock .inputbox .label-title span{ left: 2px;}
    .listblock .inputbox .cont{width:100%;flex-direction: column;}
    .listblock .inputbox .cont.verSet{ flex-direction: row; flex-wrap: wrap; justify-content: center;}
    .listblock .inputbox .cont .inputbox label, .listblock .inputbox .cont_area label { display: none;}
    .listblock .inputbox .verNum_pic{ margin-bottom: 10px;}
    .listblock .inputbox .cont a.btn_re{ margin-right: 0;}
    .listblock input[type="text"].less { width: 100%;}
    
    .botInfo_box { padding-top: 20px;}
    .botInfo_box .centerblock{ margin-bottom: 20px;}
    .ICPS3 .centerblock .inline, .ICPS3 .btnmoreinline .inline{ flex-direction: column;}
    .btn a{ max-width: none;}
    .ICPS3 .centerblock .btn, .ICPS3 .btnmoreinline .inline .btn{ width: 100%; max-width: none; margin: 0 0 10px 0;}
    .botInfo_box .detail{ padding: 20px 15px;}
    .botInfo_box .detail ul.num li{ padding-left: 10px; word-break: break-all;}
    
    .result_block{ margin-bottom: 20px;}

    /*----------------tab-----------------*/
    .tab{margin-bottom: 20px;}
    .tab li{padding:8px}
    .ti_libx .tab::after{bottom:18px;min-width: 727px;}
    
     /*--------------- qabox -----------------*/
    .qabox_vis{box-shadow: 5px 5px 0px rgba(205,212,220,0.8);padding: 20px 15px;}
    .qabox_vis .tit{left: -21px;}
    .row2 li{width: 100%;margin-right: 1%;}
    
     /*----------------+ ti_libx-----------------*/
    .ti_libx .tab a{min-width: 70px;flex:0 0 auto;margin-right: 10px;}
    .ti_libx .tab {overflow-x: scroll;padding-bottom: 35px;margin-bottom: 0px;}
    
    .ti_libx .cont { padding: 0px 10px;}
    .ti_libx .evenbx{ padding-left: 10px;}
    .ti_libx .evenbx li{ padding-left: 10px;}
    .ti_libx .evenbx li .tm{ margin-right: 10px;}
    
    .form_bx .lit_fm{width: 100%;margin-right: 0%;padding: 15px;}
    .form_bx .lit_fm .tit{font-size: 1rem;}
    .form_bx .lit_fm_typ2{width: 100%; margin: 0 0 20px 0;}

    .form_bx .lit_fm a.download{ height: 30px; line-height: 30px;border-radius: 5px; font-size: 1rem;}
    
    /*---------------count_infm----------------*/
    .count_infm .tp_area, .count_infm .bt_area{padding:10px;}
    .count_infm .tp_area{ position: inherit; display: flex; flex-wrap: wrap; align-items: center;}
    .count_infm .dialogbx{ width: 100%; position: relative; left: 0px;top: 0; padding: 10px;transform:none; margin-top: 20px; font-size: 0.9em;}
    .count_infm .dialogbx span{position:inherit;right: 0; }
    .count_infm .cir_t{ margin-right: 5px;}
    .count_infm .nm_t { width: calc( 100% - 100px); top: 0;}
    .count_infm .dialogbx::before{left: 35px;top: -10px;}
    .count_infm .row .box{width:100%;margin-right: 0%;margin-bottom: 10px;}
    .count_infm .row{flex-direction: column;}
    .count_infm .nm_t span{font-size: 0.875rem;}
    
    /*----------------table-----------------*/
    .tab_info th{ padding: 15px 10px;}
    table.tab_info td{ word-break:break-all; padding: 15px 10px;}
    
    table.tab_info.ty2{ border: none;} 
    table.tab_info.ty2 tr{ display: block; margin-bottom: 10px; border-bottom: 1px solid #89abd5; }
    table.tab_info.ty2 tr:first-child{ display: none;}
    table.tab_info.ty2 th{ display: none;}
    table.tab_info.ty2 td{ display: block; padding-left: 115px; position: relative; min-height: 2em; border-left: 1px solid #89abd5;}
    table.tab_info.ty2 td::before{content: attr(data-th); display:inline-block; text-align: center; width: 80px; position: absolute; top: 0; left: 0; bottom: 0; background-color: #fff; padding: 10px; font-weight: 500; border-right: 5px solid #89abd5;}
    table.tab_info.ty2 tr:nth-child(2n+1) td{ background-color: #fff;}
    
    /*----------------Q&A-----------------*/
    ul.qaList{ flex-direction: column;}
    ul.qaList li{ width: 100%; margin-right: 0; margin-bottom: 20px;}
    
    .question ul > li{ margin-bottom: 6px;}
    .question ul li .quest p{ padding: 10px;}
    
    .tab_BW{ border: none;} 
    .tab_BW th{ display: none;}
    .tab_BW tr{ display: block; border: 1px solid #ddd; margin-bottom: 10px;}
    .tab_BW tr:first-child{ display: none;}
    .tab_BW td{ display: block; border:none; padding: 10px; padding-left: 145px; position: relative; min-height: 5.5em; border-bottom: 1px solid #ddd !important;}
    .tab_BW td::before{content: attr(data-th); display: block; width: 115px; position: absolute; top: 0; left: 0; bottom: 0; background-color: #f1f1f1; padding: 10px; font-weight: 500; border-right: 1px solid #dadada;}

    /*----------------application-----------------*/
    ul.link_list{ padding-bottom: 20px;}
    ul.link_list li{ padding: 0 0 10px 20px; margin-bottom: 10px; }
    ul.link_list li::before{ left: 8px;}
    
    /*----------------footer-----------------*/
    .footerlogobox{text-align: center;}
    footer .footernav{margin-bottom: 25px; float: none;}
    .footerlogobox .headerLogo{ display: inline-block;}
    .footerlogobox ul{width:100%;font-size: 0.8rem;justify-content: center;margin-bottom: 15px;}
    footer .footernav li{font-size: 0.875rem;margin-bottom: 5px;}
    footer .hotlink{top: -25px;left: 10px;}
    .footerlogobox .headerLogo{margin-bottom: 10px;}
    .footer_tag{ margin: 0 auto;}
    
    /*----------------go Top----------------*/
    .go_top{  width:50px; height:50px; bottom: -50px; line-height:50px;}
}