@charset "UTF-8";
/* CSS Document */

section, article, aside, footer, header, nav, h2 { display:block;}

body { padding:0; margin:0 auto; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; display: block; position: relative; background: url(../images/bg.jpg) center top no-repeat; background-size: contain; background-attachment: fixed;}
img { border:0;}

.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;}
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }

div.brk { clear: both;}


@media screen and (min-width: 1280px) {
    
    
    #mo-tel-icon-bt { display: none;}


    /************ header ************/

    .gotop-arrow { width: 40px; height: 40px; color: #ffffff; font-size: 2em; line-height: 1em; text-align: center; border-radius: 8px; background-color: #cccccc; position: fixed; bottom: 20px; right: 10px; cursor: pointer;}



    /************ header ************/

    header { width: 100%; height: 100px; background-color: rgba(255,255,255,0.6); position: absolute; top: 0; left: 0; z-index: 999;}

    header #header-bx { width: 1200px; margin: 0 auto; position: relative;}

    header #header-bx .logo-title-bx { width: 440px; margin: 30px 0 0 0; float: left;}
    header #header-bx .logo-title-bx img { width: 100%; height: auto;}

    header #header-bx .nav-box { width: calc(100% - 440px); float: left;}

    header #header-bx .nav-box .tel-certf-box { width: 100%; height: 20px; padding: 10px 50px 0 0; text-align: right; box-sizing: border-box;}
    header #header-bx .nav-box .tel-certf-box .cerft-bx { width: 200px; float: right;}
    header #header-bx .nav-box .tel-certf-box .tel-bx { width: 200px; float: right;}

    header #header-bx .nav-icon { display: none;}
    header #header-bx nav#mo { display: none;}

    header #header-bx .nav-box nav#pc { clear: both; width: 100%; height: 80px;}
    header #header-bx .nav-box nav#pc ul { padding: 0; margin: 50px 0 0 0; list-style: none; display: block;}
    header #header-bx .nav-box nav#pc ul li { padding: 0; margin: 0 5px; color: #000000; font-size: 1.2em; float: right; position: relative;}
    header #header-bx .nav-box nav#pc ul li a { padding: 4px 10px; color: #000000; text-decoration: none;}
    header #header-bx .nav-box nav#pc ul li a:hover { color: #ffffff; background-color: #00a2e8; border-radius: 6px;}
    header #header-bx .nav-box nav#pc ul li a.sel { color: #ffffff; background-color: #00a2e8; border-radius: 6px;}
    header #header-bx .nav-box nav#pc ul li .popup { width: 140px; position: absolute; top: 30px; left: -20px;}
    header #header-bx .nav-box nav#pc ul li .popup .point-arr { width:0; height:0; margin: 0 auto; border-width: 0 10px 10px; border-style: solid; border-color:transparent transparent #00a2e8;}
    header #header-bx .nav-box nav#pc ul li .popup ul { width: 100%; padding: 20px 0; margin: 0; list-style: none; background-color: #00a2e8; border-radius: 8px; display: block;}
    header #header-bx .nav-box nav#pc ul li .popup ul li { padding: 0; margin: 0; font-size: 0.9em; text-align: center; float: none;}
    header #header-bx .nav-box nav#pc ul li .popup ul li a { width: 100%; padding: 6px 0; color: #ffffff; text-decoration: none; border-radius: 0; display: block;}
    header #header-bx .nav-box nav#pc ul li .popup ul li a:hover { color: #00a2e8; background-color: #ffffff;}

    #cerf-box-mo { display: none;}

    #cerf-box-pc { width: 80px; position: absolute; top: 10px; right: 0;}
    #cerf-box-pc img { width: 90%; height: auto;}



    /************ header ************/

    #banner-bx { width: 100%; height: 600px; overflow:hidden;}
    #banner-bx img { width: 100%; height: auto;}



    /************ section_home ************/

    section#hp-1 { width: 100%; padding: 80px 0 60px 0; background-color: #ffffff;}

    .hp-content-bx { width: 1200px; margin: 0 auto;}

    .hp-content-bx .title-box { clear: both; width: 200px; height: 80px; margin: 0 auto 30px auto; color: #666666; font-size: 1.8em; font-weight: 600; text-align: center;}
    .hp-content-bx .title-box .line-box { clear: both; width: 40px; height: 5px; margin: 5px auto 0 auto; background-color: #00a2e8;}

    .hp-content-bx .text-box { width: 600px; padding: 0 0 0 80px; text-align: center; box-sizing: border-box; float: right;}
    .hp-content-bx .text-box p { padding: 0; margin: 0; color: #666666; line-height: 2em; text-align: left;}
    .hp-content-bx .text-box img { clear: both; width: 300px; height: auto; margin: 80px 0 0 0;}

    .hp-content-bx .pic-more-box { width: 600px; height: 400px; float: left; overflow: hidden; position: relative;}
    .hp-content-bx .pic-more-box .triangle-1 { border-color: transparent #FFFFFF transparent transparent; border-style: solid solid solid solid; border-width: 400px 245px 0px 0px; height: 0px; width: 0px; position: absolute; top: 0; right: 0; z-index: 10;}
    .hp-content-bx .pic-more-box .more-bx { width: 100%; height: 40px; background-color: #00a2e8; position: absolute; bottom: 85px; left: 0; z-index: 99;}
    .hp-content-bx .pic-more-box .more-bx span { margin: 5px 60px 0 0; color: #ffffff; font-weight: 600; float: right;}

    section#hp-2 { width: 100%; padding: 80px 0 60px 0; background-color: #f0f0f0;}

    .hp-content-bx .news-list-box { width: 600px; float: left;}
    .hp-content-bx .news-list-box .list-bx { width: 550px; position: relative;}
    .hp-content-bx .news-list-box .list-bx .news-title { width: 100%; min-height: 105px; padding: 30px 0; color: #666666; border-bottom: 1px #c7c6c6 solid; box-sizing: border-box;}
    .hp-content-bx .news-list-box .list-bx .news-title a { color: #666666; text-decoration: none;}
    .hp-content-bx .news-list-box .list-bx .news-title a:hover { text-decoration: underline;}
    .hp-content-bx .news-list-box .list-bx .news-date { width: 85px; height: 85px; color: #ffffff; text-align: center; border-radius: 100%; background-color: #400080; position: absolute; top: 10px; right: -100px; z-index: 10;}
    .hp-content-bx .news-list-box .list-bx .news-date .mon-day { clear: both; margin: 17px 0 0 0; font-size: 1.2em;}
    .hp-content-bx .news-list-box .list-bx .news-date .year { clear: both; font-size: 0.9em;}
    .hp-content-bx .news-list-box .more-box { width: 70px; height: 24px; margin: 30px 0 0 0; color: #ffffff; font-size: 0.8em; border-radius: 10px; text-align: center; background-color: #400080;}
    .hp-content-bx .news-list-box .more-box a { color: #ffffff; text-decoration: none;}

    .hp-content-bx .news-pic-box { width: 600px; height: 400px; overflow: hidden; float: right;}
    .hp-content-bx .news-pic-box img { float: right;}

    .hp-content-bx .map-box { width: 550px; height: 460px; float: left;}

    .hp-content-bx .contact-form-box { width: 600px; float: right;}
    .hp-content-bx .contact-form-box .form-left { width: 300px; float: left;}
    .hp-content-bx .contact-form-box .form-right { width: 300px; float: right;}
    .hp-content-bx .contact-form-box .form-full { clear: both; width: 600px; text-align: center;}
    .hp-content-bx .contact-form-box .caption { clear: both; width: 60px; padding: 0 0 0 10px; margin: 10px 0 20px 0; text-align: left; box-sizing: border-box; float: left;}
    .hp-content-bx .contact-form-box .column { width: calc(100% - 70px); margin: 0 10px 20px 0; float: left;}
    .hp-content-bx .contact-form-box .column-2 { width: calc(100% - 70px); margin: 10px 10px 30px 0; float: left;}
    .hp-content-bx .contact-form-box input[type=text].style1 { width: 100%; padding: 10px; font:0.9em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 1px #cccccc solid; border-radius: 6px; box-sizing: border-box;}
    .hp-content-bx .contact-form-box textarea { width: 100%; height: 120px; padding: 10px; font:0.9em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 1px #cccccc solid; border-radius: 6px; box-sizing: border-box;}
    .hp-content-bx .contact-form-box input[type=button] { padding: 10px 80px; margin: 25px 0 0 0; color: #ffffff; font:0.9em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; font-weight: 500; border-radius: 8px; border: 0; background-color: #3f48cc; cursor: pointer;}
    .hp-content-bx .contact-form-box input[type=submit] { padding: 10px 80px; margin: 25px 0 0 0; color: #ffffff; font:0.9em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; font-weight: 500; border-radius: 8px; border: 0; background-color: #3f48cc; cursor: pointer;}



    /************ section_news ************/

    section#content { clear: both; width: 1200px; padding: 80px 0; margin: 0 auto;}

    section#content .title-box { clear: both; width: 200px; height: 80px; margin: 0 auto; color: #666666; font-size: 1.8em; font-weight: 600; text-align: center;}
    section#content .title-box .line-box { clear: both; width: 40px; height: 5px; margin: 5px auto 0 auto; background-color: #00a2e8;}

    .column-lf { clear: both; width: 280px; margin: 30px 0 0 0; float: left;}

    .column-lf .leftmenu-box { width: 100%; padding: 20px 20px 80px 20px; color: #666666; font-size: 1.2em; border-radius: 14px; background-color: #eeeeee; box-sizing: border-box;}
    .column-lf .leftmenu-box .menu-list { width: 100%; padding: 15px 0; border-bottom: 1px #cccccc solid;}
    .column-lf .leftmenu-box .menu-list a { color: #666666; text-decoration: none;}
    .column-lf .leftmenu-box .menu-list a:hover { color: #00a2e8;}
    .column-lf .leftmenu-box .menu-list .icon { width: 30px; float: left;}
    .column-lf .leftmenu-box .menu-list .menu-item { width: calc(100% - 60px); float: left;}
    .column-lf .leftmenu-box .menu-list .menu-arrow { width: 30px; text-align: right; float: right;}

    .column-rt { width: 880px; margin: 30px 0 0 0; float: right;}

    .column-rt .news-list-box { clear: both; width: 100%; padding: 10px; margin: 0 0 20px 0; border-bottom: 1px #eeeeee solid;}
    .column-rt .news-list-box .news-date { width: 85px; height: 85px; margin: 0 20px 0 0; color: #ffffff; text-align: center; border-radius: 100%; background-color: #400080; float: left;}
    .column-rt .news-list-box .news-date .mon-day { clear: both; margin: 17px 0 0 0; font-size: 1.2em;}
    .column-rt .news-list-box .news-date .year { clear: both; font-size: 0.9em;}
    .column-rt .news-list-box .news-title { width: calc(100% - 105px); margin: 20px 0 0 0; color: #666666; float: left;}
    .column-rt .news-list-box .news-title a { color: #666666; text-decoration: none;}
    .column-rt .news-list-box .news-title a:hover { text-decoration: underline;}

    .column-rt .news-content-bx { clear: both; width: 100%; padding: 40px; color: #666666; line-height: 1.8em; box-sizing: border-box;}
    .column-rt .news-content-bx a { color: #666666; text-decoration: underline;}

    .goback-bt { width: 120px; margin: 40px auto 0 auto; font-size: 0.8em; text-align: center; border-radius: 8px; background-color: #00a2e8;}
    .goback-bt a { width: 100%; padding: 5px 0; color: #ffffff; text-decoration: none; display: block;}



    /************ section_about ************/

    .column-rt .about-content-bx { width: 100%; color: #666666; line-height: 1.8em;}

    .column-rt .about-content-bx .about-title-box { width: 100%; margin: 0 0 30px 0; color: #00a2e8; text-align: left; font-size: 1.4em; font-weight: 500;}

    .column-rt .about-content-bx img.about-img-1 { width: 300px; height: auto; margin: 0 0 10px 20px; border: 3px #cccccc solid; border-radius: 20px; float: right;}

    .column-rt .about-content-bx ul { padding: 0 0 0 20px; margin: 0; list-style:decimal; display: block;}
    .column-rt .about-content-bx ul li { padding: 0; margin: 0;}

    .column-rt .about-content-bx .people-caption-bx { clear: both; width: 100%; font-weight: 600; border-bottom: 2px #cccccc solid;}
    .column-rt .about-content-bx .people-caption-bx .caption-1, .people-column-bx .column-1 { width: 20%; padding: 10px 5px; box-sizing: border-box; float: left;}
    .column-rt .about-content-bx .people-caption-bx .caption-2, .people-column-bx .column-2 { width: 15%; padding: 10px 5px; box-sizing: border-box; float: left;}
    .column-rt .about-content-bx .people-caption-bx .caption-3, .people-column-bx .column-3 { width: 35%; padding: 10px 5px; box-sizing: border-box; float: left;}
    .column-rt .about-content-bx .people-caption-bx .caption-4, .people-column-bx .column-4 { width: 30%; padding: 10px 5px; box-sizing: border-box; float: left;}
    .column-rt .about-content-bx .people-column-bx { clear: both; width: 100%; border-bottom: 1px #cccccc solid;}

    .column-rt .about-content-bx .pic-box { width: 400px; margin: 10px 0; text-align: center; float: left;}
    .column-rt .about-content-bx .pic-box img { width: 90%; height: auto;}

    .column-rt .about-content-bx .cf-table-2x { width: 50%; float: left;}
    .column-rt .about-content-bx .cf-table-1x { clear: both; width: 100%; margin: 0 0 50px 0;}
    .column-rt .about-content-bx .cf-caption-2x { clear: both; width: 90%; padding: 10px 0; color: #666666; font-weight: 600; border-bottom: 3px #666666 solid;}
    .column-rt .about-content-bx .cf-caption-1x { clear: both; width: 95%; padding: 10px 0; color: #666666; font-weight: 600; border-bottom: 3px #666666 solid;}
    .column-rt .about-content-bx .cf-column-1x { clear: both; width: 100%; padding: 20px 0; margin: 0 0 20px 0;}
    .column-rt .about-content-bx .cf-column-3x-1 { clear: both; width: 35%; padding: 20px 0 0 0; float: left;}
    .column-rt .about-content-bx .cf-column-3x-2 { width: 10%; padding: 20px 0 0 0; float: left;}
    .column-rt .about-content-bx .cf-column-3x-3 { width: 55%; padding: 20px 0 0 0; float: left;}



    /************ section_service ************/

    .column-rt .about-content-bx .serv-caption-bx { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: stretch;}
    .column-rt .about-content-bx .serv-caption-bx .caption-1 { width: 40%; padding: 10px; color: #fff; font-size: 1.2em; font-weight: 600; text-align: center; border-right: 1px #fff solid; background-color: #00a2e8; box-sizing: border-box;}
    .column-rt .about-content-bx .serv-caption-bx .caption-2 { width: 60%; padding: 10px; color: #fff; font-size: 1.2em; font-weight: 600; text-align: center; background-color: #00a2e8; box-sizing: border-box;}
    .column-rt .about-content-bx .serv-caption-bx .caption-3 { width: 15%; padding: 10px; color: #fff; font-size: 1.2em; font-weight: 600; text-align: center; border-right: 1px #fff solid; background-color: #00a2e8; box-sizing: border-box;}
    .column-rt .about-content-bx .serv-caption-bx .caption-4 { width: 35%; padding: 10px; color: #fff; font-size: 1.2em; font-weight: 600; text-align: center; border-right: 1px #fff solid; background-color: #00a2e8; box-sizing: border-box;}
    .column-rt .about-content-bx .serv-caption-bx .caption-5 { width: 50%; padding: 10px; color: #fff; font-size: 1.2em; font-weight: 600; text-align: center; background-color: #00a2e8; box-sizing: border-box;}
    .column-rt .about-content-bx .serv-column-bx { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: stretch; border-bottom: 1px #00a2e8 solid;}
    .column-rt .about-content-bx .serv-column-bx:nth-child(even) { background-color: #e9f6fb;}
    .column-rt .about-content-bx .serv-column-bx .column-1 { width: 40%; padding: 10px; text-align: center; border-right: 1px #00a2e8 solid; box-sizing: border-box;}
    .column-rt .about-content-bx .serv-column-bx .column-2 { width: 60%; padding: 10px; box-sizing: border-box;}
    .column-rt .about-content-bx .serv-column-bx .column-3 { width: 15%; padding: 10px; border-right: 1px #00a2e8 solid; box-sizing: border-box;}
    .column-rt .about-content-bx .serv-column-bx .column-4 { width: 35%; padding: 10px; border-right: 1px #00a2e8 solid; box-sizing: border-box;}
    .column-rt .about-content-bx .serv-column-bx .column-5 { width: 50%; padding: 10px; box-sizing: border-box;}



    /************ section_flow ************/

    .flow-box { clear: both; width: 100%; margin: 100px 0 0 0; position: relative;}
    .flow-box .flow-content-bx { clear: both; width: 70%; padding: 60px 30px; margin: -60px auto 0 auto; color: #fff; font-size: 1.4em; font-weight: 500; text-align: center; letter-spacing: 0.1em; border-radius: 20px; background-color: #00a2e8; box-sizing: border-box;}
    .flow-box .flow-arrow-bx { clear: both; width: 100px; height: 100px; margin: 0 auto; color: #00a2e8; font-size: 4em; text-align: center; border-radius: 100%; background-color: #fff; overflow: hidden; position: relative; top: -30px; left: 0;}
    
    
    
    /************ section_links ************/
    
    ul.links-list { width: 60%; padding: 0; margin: 60px auto 0 auto; list-style: none; display: flex; justify-content: flex-start; flex-wrap: wrap;}
    ul.links-list li { width: calc(50% - 40px); padding: 0; margin: 0 20px 10px 20px; color: #414141;}
    ul.links-list li a { color: #414141; font-size: 1.1em; text-decoration: none;}
    ul.links-list li a:hover { text-decoration: underline;}
    
    
    
    /************ section_download ************/
    
    .column-rt .about-content-bx ul.download-appl-list { clear: both; width: 100%; padding: 0; margin: 60px 0 0 0; list-style-type: none; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
    .column-rt .about-content-bx ul.download-appl-list li { width: calc(50% - 40px); padding: 0; margin: 0 20px 20px 20px;}
    .column-rt .about-content-bx ul.download-appl-list li a { width: 100%; padding: 20px; color: #414141; font-size: 1.1em; text-decoration: none; border: 1px #ccc solid; border-radius: 20px; background-color: #eee; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}
    .column-rt .about-content-bx ul.download-appl-list li a i.fa { font-size: 1.6em; margin: 0 10px 0 0;}
    .column-rt .about-content-bx ul.download-appl-list li a:hover { color: #fff; background-color: #ccc;}



    /************ section_contact ************/

    .contact-column-lf { clear: both; width: 460px; margin: 30px 0 0 0; padding: 40px 20px; color: #666666; line-height: 2em; border-radius: 14px; background-color: #eeeeee; box-sizing: border-box; float: left;}
    .contact-column-lf font.name-title { font-size: 1.4em; font-weight: 600;}
    .contact-column-lf img { width: 100%; height: auto; border-radius: 20px;}

    .contact-column-rt { width: 700px; margin: 30px 0 0 0; color: #666666; line-height: 1.8em; float: right;}
    .contact-column-rt .google-map-box { width: 100%; margin: 0 0 40px 0;}
    .contact-column-rt .contact-form-2x { width: 50%; float: left;}
    .contact-column-rt .contact-form-1x { width: 100%; text-align: center;}
    .contact-column-rt .caption { clear: both; width: 60px; padding: 0 0 0 10px; margin: 10px 0 20px 0; text-align: left; box-sizing: border-box; float: left;}
    .contact-column-rt .column { width: calc(100% - 70px); margin: 0 10px 20px 0; float: left;}
    .contact-column-rt .column-2 { width: calc(100% - 70px); margin: 10px 10px 30px 0; float: left;}
    .contact-column-rt input[type=text].style1 { width: 100%; padding: 10px; font:0.9em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 1px #cccccc solid; border-radius: 6px; box-sizing: border-box;}
    .contact-column-rt textarea { width: 100%; height: 120px; padding: 10px; font:0.9em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 1px #cccccc solid; border-radius: 6px; box-sizing: border-box;}
    .contact-column-rt input[type=button] { padding: 10px 80px; margin: 25px 0 0 0; color: #ffffff; font:0.9em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; font-weight: 500; border-radius: 8px; border: 0; background-color: #3f48cc; cursor: pointer;}



    /************ page ************/

    .page-box { clear: both; width: 100%; margin: 40px 0 0 0; text-align: center;}
    .page-box .page-num-bx { margin: 0 2px; font-size: 0.8em; border: 1px #cccccc solid; border-radius: 6px; display: inline-block;}
    .page-box .page-num-bx a { padding: 8px; color: #666666; text-decoration: none; border-radius: 6px; background-color: #f1f1f1; display: block;}
    .page-box .page-num-bx a:hover { color: #ffffff; background-color: #666666;}
    .page-box .page-num-bx a.sel { color: #ffffff; background-color: #00a2e8;}



    /************ sitemap ************/

    #sitemap { clear: both; width: 1200px; margin: 0 auto 40px auto;}
    #sitemap ul { width: 100%; padding: 0; margin: 0; list-style: none; display: block;}
    #sitemap ul li { width: calc(100% / 7); padding: 0; margin: 0; color: #666666; font-size: 1.2em; float: left;}
    #sitemap ul li a { color: #666666; text-decoration: none;}
    #sitemap ul li ul.class-2 { width: 100%; padding: 0; margin: 0; list-style: none; display: block;}
    #sitemap ul li ul.class-2 li { width: 100%; padding: 0; margin: 10px 0; font-size: 0.8em; float: none;}



    /************ error404 ************/

    .text-404 { width: 100%; padding: 60px 0; color: #666666; font-size: 1.4em; font-weight: 600; text-align: center;}



    /************ footer ************/

    footer { width: 100%; padding: 60px 0; color: #666666; background-color: #f0f0f0;}

    footer .footer-content { width: 1200px; margin: 0 auto;}

    footer .footer-content .logo-infor-bx { width: 300px; float: left;}
    footer .footer-content .logo-infor-bx .logo { width: 100%;}
    footer .footer-content .logo-infor-bx .logo img { width: 90px; height: auto;}
    footer .footer-content .logo-infor-bx .title { clear: both; width: 100%; color: #666666; font-size: 1.1em; font-weight: 600;}
    footer .footer-content .logo-infor-bx .address { clear: both; width: 100%; margin: 10px 0 0 0; color: #666666; font-size: 0.9em;}
    footer .footer-content .logo-infor-bx .address a.footer-tel { display: none;}

    footer .footer-content .nav-box ul#mo { display: none;}

    footer .footer-content .nav-box { width: calc(100% - 440px); float: right;}
    footer .footer-content .nav-box ul#pc { padding: 0; margin: 0; list-style: none; display: block;}
    footer .footer-content .nav-box ul#pc li { padding: 0 10px; margin: 0 0 0 0; color: #666666; font-size: 0.9em; text-align: left; float: right;}
    footer .footer-content .nav-box ul#pc li a { color: #666666; text-decoration: none;}
    footer .footer-content .nav-box ul#pc li a:hover { text-decoration: underline;}
    footer .footer-content .nav-box ul#pc li ul.popup { padding: 0; margin: 0; list-style: none; display: block;}
    footer .footer-content .nav-box ul#pc li ul.popup li { padding: 0; margin: 5px 0; color: #666666; font-size: 1em; text-align: left; float: none;}

    footer .footer-content .qrcode-box { width: 140px; font-size: 0.8em; text-align: center; float: left;}
    footer .footer-content .qrcode-box img { width: 100px; height: auto; margin: 0 auto;}

    footer .footer-content .copyright-box { clear: both; width: 100%; margin: 15px 0 0 0; color: #666666; font-size: 0.8em; text-align: right;}



}

@media screen and (min-width: 768px) and (max-width: 1279px) {
    
    
    #mo-tel-icon-bt { display: none;}


    /************ header ************/

    .gotop-arrow { width: 40px; height: 40px; color: #ffffff; font-size: 2em; line-height: 1em; text-align: center; border-radius: 8px; background-color: #cccccc; position: fixed; bottom: 20px; right: 10px; cursor: pointer;}



    /************ header ************/

    header { width: 100%; padding: 0 0 30px 0; background-color: #ffffff; border-bottom: 1px #cccccc solid;}

    header #header-bx { width: 100%;}

    header #header-bx .logo-title-bx { width: 440px; margin: 30px auto 20px auto;}
    header #header-bx .logo-title-bx img { width: 100%; height: auto;}

    header #header-bx .nav-box { width: 100%;}

    header #header-bx .nav-box .tel-certf-box { width: 100%; height: 40px; padding:0; text-align: center; box-sizing: border-box;}
    header #header-bx .nav-box .tel-certf-box .cerft-bx { width: 200px; text-align: center; display: inline-block;}
    header #header-bx .nav-box .tel-certf-box .tel-bx { width: 200px; text-align: center; display: inline-block;}

    header #header-bx .nav-box nav#pc { display: none;}

    header #header-bx .nav-icon { clear: both; width: 100%; color: #666666; font-size: 3em; line-height: 1em; text-align: center;}

    header #header-bx nav#mo { width: 100%; position: relative;}
    header #header-bx nav#mo ul { width: 100%; padding: 20px; margin: 15px 0 0 0; background-color: #ffffff; list-style: none; display: block; box-sizing: border-box; position: absolute; top: -8px; left: 0; z-index: 999;}
    header #header-bx nav#mo ul li { width: 100%; padding: 0; margin: 0; font-size: 1.2em; text-align: center; border-bottom: 1px #cccccc solid;}
    header #header-bx nav#mo ul li:last-child { border: 0;}
    header #header-bx nav#mo ul li a { width: 100%; padding: 20px; color: #666666; text-decoration: none; box-sizing: border-box; display: block;}
    header #header-bx nav#mo ul li a.sel { color: #00a2e8; border-radius: 6px;}
    header #header-bx nav#mo ul li ul.popup { clear: both; width: 90%; padding: 0; margin: 10px auto; font-size: 0.8em; list-style: none; background-color: #00a2e8; border-radius: 8px; display: block; position: relative;}
    header #header-bx nav#mo ul li ul.popup li { width: 100%; padding: 0; margin: 0; text-align: center; float: none;}
    header #header-bx nav#mo ul li ul.popup li a { width: 100%; padding: 20px 10px; color: #ffffff; text-decoration: none; border-radius: 0; display: block;}

    header #header-bx .auth-box { width: 120px; margin: 15px 0 20px 0; float: right;}
    header #header-bx .auth-box img { width: auto; height: 70px;}

    #cerf-box-pc { display: none;}

    #cerf-box-mo { width: 80px; margin: 10px auto 0 auto; text-align: center;}
    #cerf-box-mo img { width: 90%; height: auto;}



    /************ header ************/

    #banner-bx { width: 100%; height: auto; overflow:hidden;}
    #banner-bx img { width: 100%; height: auto;}



    /************ section_home ************/

    section#hp-1 { width: 100%; padding: 80px 0 60px 0; background-color: #ffffff;}

    .hp-content-bx { width: 90%; margin: 0 auto;}

    .hp-content-bx .title-box { clear: both; width: 200px; height: 80px; margin: 0 auto 30px auto; color: #666666; font-size: 1.8em; font-weight: 600; text-align: center;}
    .hp-content-bx .title-box .line-box { clear: both; width: 40px; height: 5px; margin: 5px auto 0 auto; background-color: #00a2e8;}

    .hp-content-bx .text-box { width: 100%; padding: 0 20px; margin: 0 0 30px 0; text-align: center; box-sizing: border-box;}
    .hp-content-bx .text-box p { padding: 0; margin: 0; color: #666666; line-height: 2em; text-align: left;}
    .hp-content-bx .text-box img { clear: both; width: 300px; height: auto; margin: 40px 0 0 0;}

    .hp-content-bx .pic-more-box { width: 600px; height: 400px; margin: 0 auto; overflow: hidden; position: relative;}
    .hp-content-bx .pic-more-box .triangle-1 { border-color: transparent #FFFFFF transparent transparent; border-style: solid solid solid solid; border-width: 400px 245px 0px 0px; height: 0px; width: 0px; position: absolute; top: 0; right: 0; z-index: 10;}
    .hp-content-bx .pic-more-box .more-bx { width: 100%; height: 40px; background-color: #00a2e8; position: absolute; bottom: 85px; left: 0; z-index: 99;}
    .hp-content-bx .pic-more-box .more-bx span { margin: 5px 60px 0 0; color: #ffffff; font-weight: 600; float: right;}

    section#hp-2 { width: 100%; padding: 80px 0; background-color: #f0f0f0;}

    .hp-content-bx .news-list-box { width: 90%; margin: 0 auto;}
    .hp-content-bx .news-list-box .list-bx { width: 100%; margin: 0 auto;}
    .hp-content-bx .news-list-box .list-bx .news-title { width: calc(100% - 100px); padding: 30px 0; margin: 10px 0; color: #666666; border-bottom: 1px #c7c6c6 solid; box-sizing: border-box; float: left;}
    .hp-content-bx .news-list-box .list-bx .news-title a { color: #666666; text-decoration: none;}
    .hp-content-bx .news-list-box .list-bx .news-date { width: 85px; height: 85px; color: #ffffff; text-align: center; border-radius: 100%; background-color: #400080; float: right;}
    .hp-content-bx .news-list-box .list-bx .news-date .mon-day { clear: both; margin: 17px 0 0 0; font-size: 1.2em;}
    .hp-content-bx .news-list-box .list-bx .news-date .year { clear: both; font-size: 0.9em;}
    .hp-content-bx .news-list-box .more-box { width: 70px; height: 24px; margin: 30px 0 0 0; color: #ffffff; font-size: 0.8em; border-radius: 10px; text-align: center; background-color: #400080;}
    .hp-content-bx .news-list-box .more-box a { color: #ffffff; text-decoration: none;}

    .hp-content-bx .news-pic-box { width: 600px; height: 400px; margin: 30px auto 0 auto; overflow: hidden;}
    .hp-content-bx .news-pic-box img { width: 100%; height: auto;}

    .hp-content-bx .map-box { width: 90%; height: 460px; margin: 0 auto 40px auto;}

    .hp-content-bx .contact-form-box { width: 90%; margin: 0 auto;}
    .hp-content-bx .contact-form-box .form-left { width: 50%; float: left;}
    .hp-content-bx .contact-form-box .form-right { width: 50%; float: right;}
    .hp-content-bx .contact-form-box .form-full { clear: both; width: 100%; text-align: center;}
    .hp-content-bx .contact-form-box .caption { clear: both; width: 60px; padding: 0 0 0 10px; margin: 10px 0 20px 0; text-align: left; box-sizing: border-box; float: left;}
    .hp-content-bx .contact-form-box .column { width: calc(100% - 70px); margin: 0 10px 20px 0; float: left;}
    .hp-content-bx .contact-form-box .column-2 { width: calc(100% - 70px); margin: 10px 10px 30px 0; float: left;}
    .hp-content-bx .contact-form-box input[type=text].style1 { width: 100%; padding: 10px; font:0.9em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 1px #cccccc solid; border-radius: 6px; box-sizing: border-box;}
    .hp-content-bx .contact-form-box textarea { width: 100%; height: 120px; padding: 10px; font:0.9em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 1px #cccccc solid; border-radius: 6px; box-sizing: border-box;}
    .hp-content-bx .contact-form-box input[type=button] { padding: 10px 80px; margin: 25px 0 0 0; color: #ffffff; font-weight: 600; border-radius: 8px; border: 0; background-color: #3f48cc; cursor: pointer;}



    /************ section_news ************/

    section#content { clear: both; width: 90%; padding: 80px 0; margin: 0 auto;}

    section#content .title-box { clear: both; width: 200px; height: 80px; margin: 0 auto; color: #666666; font-size: 1.8em; font-weight: 600; text-align: center;}
    section#content .title-box .line-box { clear: both; width: 40px; height: 5px; margin: 5px auto 0 auto; background-color: #00a2e8;}

    .column-lf { clear: both; width: 100%; margin: 30px 0 40px 0;}

    .column-lf .leftmenu-box { width: 100%; padding: 20px; color: #666666; font-size: 1.2em; border-radius: 14px; background-color: #eeeeee; box-sizing: border-box;}
    .column-lf .leftmenu-box .menu-list { width: 100%; padding: 15px 0; border-bottom: 1px #cccccc solid;}
    .column-lf .leftmenu-box .menu-list a { color: #666666; text-decoration: none;}
    .column-lf .leftmenu-box .menu-list a:hover { color: #00a2e8;}
    .column-lf .leftmenu-box .menu-list .icon { width: 30px; float: left;}
    .column-lf .leftmenu-box .menu-list .menu-item { width: calc(100% - 60px); float: left;}
    .column-lf .leftmenu-box .menu-list .menu-arrow { width: 30px; text-align: right; float: right;}

    .column-rt { width: 100%; margin: 30px 0 0 0;}

    .column-rt .news-list-box { clear: both; width: 100%; padding: 10px; margin: 0 0 20px 0; border-bottom: 1px #eeeeee solid; box-sizing: border-box;}
    .column-rt .news-list-box .news-date { width: 85px; height: 85px; margin: 0; color: #ffffff; text-align: center; border-radius: 100%; background-color: #400080; float: left;}
    .column-rt .news-list-box .news-date .mon-day { clear: both; margin: 17px 0 0 0; font-size: 1.2em;}
    .column-rt .news-list-box .news-date .year { clear: both; font-size: 0.9em;}
    .column-rt .news-list-box .news-title { width: calc(100% - 105px); margin: 20px 0 0 0; color: #666666; float: right;}
    .column-rt .news-list-box .news-title a { color: #666666; text-decoration: none;}
    .column-rt .news-list-box .news-title a:hover { text-decoration: underline;}

    .column-rt .news-content-bx { clear: both; width: 100%; padding: 40px; color: #666666; line-height: 1.8em; box-sizing: border-box;}
    .column-rt .news-content-bx a { color: #666666; text-decoration: underline;}

    .goback-bt { width: 120px; margin: 40px auto 0 auto; font-size: 0.8em; text-align: center; border-radius: 8px; background-color: #00a2e8;}
    .goback-bt a { width: 100%; padding: 5px 0; color: #ffffff; text-decoration: none; display: block;}



    /************ section_about ************/

    .column-rt .about-content-bx { width: 100%; color: #666666; line-height: 1.8em;}

    .column-rt .about-content-bx .about-title-box { width: 100%; margin: 0 0 30px 0; color: #00a2e8; text-align: left; font-size: 1.4em; font-weight: 500;}

    .column-rt .about-content-bx img.about-img-1 { width: 300px; height: auto; margin: 0 0 10px 20px; border: 3px #cccccc solid; border-radius: 20px; float: right;}

    .column-rt .about-content-bx ul { padding: 0 0 0 20px; margin: 0; list-style:decimal; display: block;}
    .column-rt .about-content-bx ul li { padding: 0; margin: 0;}

    .column-rt .about-content-bx .people-caption-bx { clear: both; width: 100%; font-weight: 600; border-bottom: 2px #cccccc solid;}
    .column-rt .about-content-bx .people-caption-bx .caption-1, .people-column-bx .column-1 { width: 20%; padding: 10px 5px; box-sizing: border-box; float: left;}
    .column-rt .about-content-bx .people-caption-bx .caption-2, .people-column-bx .column-2 { width: 15%; padding: 10px 5px; box-sizing: border-box; float: left;}
    .column-rt .about-content-bx .people-caption-bx .caption-3, .people-column-bx .column-3 { width: 35%; padding: 10px 5px; box-sizing: border-box; float: left;}
    .column-rt .about-content-bx .people-caption-bx .caption-4, .people-column-bx .column-4 { width: 30%; padding: 10px 5px; box-sizing: border-box; float: left;}
    .column-rt .about-content-bx .people-column-bx { clear: both; width: 100%; border-bottom: 1px #cccccc solid;}

    .column-rt .about-content-bx .pic-box { width: 400px; margin: 10px 0; text-align: center; float: left;}
    .column-rt .about-content-bx .pic-box img { width: 90%; height: auto;}

    .column-rt .about-content-bx .cf-table-2x { width: 50%; float: left;}
    .column-rt .about-content-bx .cf-table-1x { clear: both; width: 100%; margin: 0 0 50px 0;}
    .column-rt .about-content-bx .cf-caption-2x { clear: both; width: 90%; padding: 10px 0; color: #666666; font-weight: 600; border-bottom: 3px #666666 solid;}
    .column-rt .about-content-bx .cf-caption-1x { clear: both; width: 95%; padding: 10px 0; color: #666666; font-weight: 600; border-bottom: 3px #666666 solid;}
    .column-rt .about-content-bx .cf-column-1x { clear: both; width: 100%; padding: 20px 0; margin: 0 0 20px 0;}
    .column-rt .about-content-bx .cf-column-3x-1 { clear: both; width: 35%; padding: 20px 0 0 0; float: left;}
    .column-rt .about-content-bx .cf-column-3x-2 { width: 10%; padding: 20px 0 0 0; float: left;}
    .column-rt .about-content-bx .cf-column-3x-3 { width: 55%; padding: 20px 0 0 0; float: left;}



    /************ section_service ************/

    .column-rt .about-content-bx .serv-caption-bx { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: stretch;}
    .column-rt .about-content-bx .serv-caption-bx .caption-1 { width: 40%; padding: 10px; color: #fff; font-size: 1.2em; font-weight: 600; text-align: center; border-right: 1px #fff solid; background-color: #00a2e8; box-sizing: border-box;}
    .column-rt .about-content-bx .serv-caption-bx .caption-2 { width: 60%; padding: 10px; color: #fff; font-size: 1.2em; font-weight: 600; text-align: center; background-color: #00a2e8; box-sizing: border-box;}
    .column-rt .about-content-bx .serv-caption-bx .caption-3 { width: 15%; padding: 10px; color: #fff; font-size: 1.2em; font-weight: 600; text-align: center; border-right: 1px #fff solid; background-color: #00a2e8; box-sizing: border-box;}
    .column-rt .about-content-bx .serv-caption-bx .caption-4 { width: 35%; padding: 10px; color: #fff; font-size: 1.2em; font-weight: 600; text-align: center; border-right: 1px #fff solid; background-color: #00a2e8; box-sizing: border-box;}
    .column-rt .about-content-bx .serv-caption-bx .caption-5 { width: 50%; padding: 10px; color: #fff; font-size: 1.2em; font-weight: 600; text-align: center; background-color: #00a2e8; box-sizing: border-box;}
    .column-rt .about-content-bx .serv-column-bx { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: stretch; border-bottom: 1px #00a2e8 solid;}
    .column-rt .about-content-bx .serv-column-bx:nth-child(even) { background-color: #e9f6fb;}
    .column-rt .about-content-bx .serv-column-bx .column-1 { width: 40%; padding: 10px; text-align: center; border-right: 1px #00a2e8 solid; box-sizing: border-box;}
    .column-rt .about-content-bx .serv-column-bx .column-2 { width: 60%; padding: 10px; box-sizing: border-box;}
    .column-rt .about-content-bx .serv-column-bx .column-3 { width: 15%; padding: 10px; border-right: 1px #00a2e8 solid; box-sizing: border-box;}
    .column-rt .about-content-bx .serv-column-bx .column-4 { width: 35%; padding: 10px; border-right: 1px #00a2e8 solid; box-sizing: border-box;}
    .column-rt .about-content-bx .serv-column-bx .column-5 { width: 50%; padding: 10px; box-sizing: border-box;}



    /************ section_flow ************/

    .flow-box { clear: both; width: 100%; margin: 100px 0 0 0; position: relative;}
    .flow-box .flow-content-bx { clear: both; width: 80%; padding: 60px 30px; margin: -60px auto 0 auto; color: #fff; font-size: 1.4em; font-weight: 500; text-align: center; letter-spacing: 0.1em; border-radius: 20px; background-color: #00a2e8; box-sizing: border-box;}
    .flow-box .flow-arrow-bx { clear: both; width: 100px; height: 100px; margin: 0 auto; color: #00a2e8; font-size: 4em; text-align: center; border-radius: 100%; background-color: #fff; overflow: hidden; position: relative; top: -30px; left: 0;}
    
    
    
    /************ section_links ************/
    
    ul.links-list { width: 90%; padding: 0; margin: 60px auto 0 auto; list-style: none; display: flex; justify-content: flex-start; flex-wrap: wrap;}
    ul.links-list li { width: calc(50% - 40px); padding: 0; margin: 0 20px 10px 20px; color: #414141;}
    ul.links-list li a { color: #414141; font-size: 1.1em; text-decoration: none;}
    ul.links-list li a:hover { text-decoration: underline;}
    
    
    
    /************ section_download ************/
    
    .column-rt .about-content-bx ul.download-appl-list { clear: both; width: 100%; padding: 0; margin: 60px 0 0 0; list-style-type: none; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
    .column-rt .about-content-bx ul.download-appl-list li { width: calc(50% - 40px); padding: 0; margin: 0 20px 20px 20px;}
    .column-rt .about-content-bx ul.download-appl-list li a { width: 100%; padding: 20px; color: #414141; font-size: 1.1em; text-decoration: none; border: 1px #ccc solid; border-radius: 20px; background-color: #eee; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}
    .column-rt .about-content-bx ul.download-appl-list li a i.fa { font-size: 1.6em; margin: 0 10px 0 0;}
    .column-rt .about-content-bx ul.download-appl-list li a:hover { color: #fff; background-color: #ccc;}



    /************ section_contact ************/

    .contact-column-lf { clear: both; width: 100%; margin: 30px 0 0 0; padding: 40px 20px; color: #666666; line-height: 2em; border-radius: 14px; background-color: #eeeeee; box-sizing: border-box;}
    .contact-column-lf font.name-title { font-size: 1.4em; font-weight: 600;}
    .contact-column-lf img { width: 100%; height: auto; border-radius: 20px;}

    .contact-column-rt { width: 100%; margin: 30px 0 0 0; color: #666666; line-height: 1.8em;}
    .contact-column-rt .google-map-box { width: 100%; margin: 0 0 40px 0;}
    .contact-column-rt .contact-form-2x { width: 50%; float: left;}
    .contact-column-rt .contact-form-1x { width: 100%; text-align: center;}
    .contact-column-rt .caption { clear: both; width: 60px; padding: 0 0 0 10px; margin: 10px 0 20px 0; text-align: left; box-sizing: border-box; float: left;}
    .contact-column-rt .column { width: calc(100% - 70px); margin: 0 10px 20px 0; float: left;}
    .contact-column-rt .column-2 { width: calc(100% - 70px); margin: 10px 10px 30px 0; float: left;}
    .contact-column-rt input[type=text].style1 { width: 100%; padding: 10px; font:0.9em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 1px #cccccc solid; border-radius: 6px; box-sizing: border-box;}
    .contact-column-rt textarea { width: 100%; height: 120px; padding: 10px; font:0.9em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 1px #cccccc solid; border-radius: 6px; box-sizing: border-box;}
    .contact-column-rt input[type=button] { padding: 10px 80px; margin: 25px 0 0 0; color: #ffffff; font-weight: 600; border-radius: 8px; border: 0; background-color: #3f48cc; cursor: pointer;}



    /************ page ************/

    .page-box { clear: both; width: 100%; margin: 40px 0 0 0; text-align: center;}
    .page-box .page-num-bx { margin: 0 2px; font-size: 0.8em; border: 1px #cccccc solid; border-radius: 6px; display: inline-block;}
    .page-box .page-num-bx a { padding: 8px; color: #666666; text-decoration: none; border-radius: 6px; background-color: #f1f1f1; display: block;}
    .page-box .page-num-bx a:hover { color: #ffffff; background-color: #666666;}
    .page-box .page-num-bx a.sel { color: #ffffff; background-color: #00a2e8;}



    /************ sitemap ************/

    #sitemap { clear: both; width: 100%; margin: 0 auto 40px auto;}
    #sitemap ul { width: 100%; padding: 0; margin: 0; list-style: none; display: block;}
    #sitemap ul li { width: calc(100% / 7); padding: 0; margin: 0; color: #666666; font-size: 1.2em; float: left;}
    #sitemap ul li a { color: #666666; text-decoration: none;}
    #sitemap ul li ul.class-2 { width: 100%; padding: 0; margin: 0; list-style: none; display: block;}
    #sitemap ul li ul.class-2 li { width: 100%; padding: 0; margin: 10px 0; font-size: 0.8em; float: none;}



    /************ error404 ************/

    .text-404 { width: 100%; padding: 60px 0; color: #666666; font-size: 1.4em; font-weight: 600; text-align: center;}



    /************ footer ************/

    footer { width: 100%; padding: 60px 0; color: #666666; background-color: #f0f0f0;}

    footer .footer-content { width: 90%; margin: 0 auto;}

    footer .footer-content .logo-infor-bx { width: 250px; margin: 0 auto;}
    footer .footer-content .logo-infor-bx .logo { width: 100%;}
    footer .footer-content .logo-infor-bx .logo img { width: 90px; height: auto;}
    footer .footer-content .logo-infor-bx .title { clear: both; width: 100%; color: #666666; font-size: 1.1em; font-weight: 600;}
    footer .footer-content .logo-infor-bx .address { clear: both; width: 100%; margin: 10px 0 0 0; color: #666666; font-size: 0.9em;}
    footer .footer-content .logo-infor-bx .address a.footer-tel { display: none;}

    footer .footer-content .nav-box ul#pc { display: none;}

    footer .footer-content .nav-box { clear: both; width: 100%; margin: 0 auto 40px auto;}
    footer .footer-content .nav-box ul#mo { clear: both; padding: 0; margin: 0; list-style: none; text-align: center; display: block;}
    footer .footer-content .nav-box ul#mo li { padding: 0 10px; margin: 0; color: #666666; font-size: 0.9em; text-align: left; vertical-align: top; display: inline-block;}
    footer .footer-content .nav-box ul#mo li a { color: #666666; text-decoration: none;}
    footer .footer-content .nav-box ul#mo li a:hover { text-decoration: underline;}
    footer .footer-content .nav-box ul#mo li ul.popup { padding: 0; margin: 0; list-style: none; display: block;}
    footer .footer-content .nav-box ul#mo li ul.popup li { padding: 0; margin: 5px 0; color: #666666; font-size: 1em; text-align: left; display: block;}

    footer .footer-content .qrcode-box { clear: both; width: 100%; margin: 30px 0; font-size: 0.8em; text-align: center;}
    footer .footer-content .qrcode-box img { width: 100px; height: auto; margin: 0 auto;}

    footer .footer-content .copyright-box { clear: both; width: 100%; margin: 40px 0 0 0; color: #666666; font-size: 0.8em; text-align: center;}


}

@media screen and (max-width: 767px) {
    
    
    /********** phone number button **********/
    
    #mo-tel-icon-bt { width: 60px; position: fixed; top: 100px; right: 0; z-index: 9999;}
    #mo-tel-icon-bt a { width: 100%; padding: 10px; text-align: center; border-radius: 10px; background-color: #3663B2; display: block; box-sizing: border-box;}
    #mo-tel-icon-bt a img { width: 80%; height: auto;}
    


    /************ header ************/

    .gotop-arrow { width: 40px; height: 40px; color: #ffffff; font-size: 2em; line-height: 1em; text-align: center; border-radius: 8px; background-color: #cccccc; position: fixed; bottom: 20px; right: 10px; cursor: pointer;}



    /************ header ************/

    header { width: 100%; padding: 0 0 30px 0; background-color: #ffffff; border-bottom: 1px #cccccc solid;}

    header #header-bx { width: 100%;}

    header #header-bx .logo-title-bx { max-width: 440px; width: 96%; margin: 30px auto 20px auto;}
    header #header-bx .logo-title-bx img { width: 100%; height: auto;}

    header #header-bx .nav-box { width: 100%;}

    header #header-bx .nav-box .tel-certf-box { width: 100%; height: 80px; padding: 10px 0; text-align: center; box-sizing: border-box;}
    header #header-bx .nav-box .tel-certf-box .cerft-bx { width: 100%; text-align: center;}
    header #header-bx .nav-box .tel-certf-box .tel-bx { width: 100%; margin: 10px 0 0 0; text-align: center;}

    header #header-bx .nav-box nav#pc { display: none;}

    header #header-bx .nav-icon { clear: both; width: 100%; color: #666666; font-size: 3em; line-height: 1em; text-align: center;}

    header #header-bx nav#mo { width: 100%; position: relative;}
    header #header-bx nav#mo ul { width: 100%; padding: 20px; margin: 15px 0 0 0; background-color: #ffffff; list-style: none; display: block; box-sizing: border-box; position: absolute; top: -8px; left: 0; z-index: 999;}
    header #header-bx nav#mo ul li { width: 100%; padding: 0; margin: 0; font-size: 1.2em; text-align: center; border-bottom: 1px #cccccc solid;}
    header #header-bx nav#mo ul li:last-child { border: 0;}
    header #header-bx nav#mo ul li a { width: 100%; padding: 20px; color: #666666; text-decoration: none; box-sizing: border-box; display: block;}
    header #header-bx nav#mo ul li a.sel { color: #00a2e8; border-radius: 6px;}
    header #header-bx nav#mo ul li ul.popup { clear: both; width: 90%; padding: 0; margin: 10px auto; font-size: 0.8em; list-style: none; background-color: #00a2e8; border-radius: 8px; display: block; position: relative;}
    header #header-bx nav#mo ul li ul.popup li { width: 100%; padding: 0; margin: 0; text-align: center; float: none;}
    header #header-bx nav#mo ul li ul.popup li a { width: 100%; padding: 20px 10px; color: #ffffff; text-decoration: none; border-radius: 0; display: block;}

    header #header-bx .auth-box { width: 120px; margin: 15px 0 20px 0; float: right;}
    header #header-bx .auth-box img { width: auto; height: 70px;}

    #cerf-box-pc { display: none;}

    #cerf-box-mo { width: 80px; margin: 10px auto 0 auto; text-align: center;}
    #cerf-box-mo img { width: 90%; height: auto;}



    /************ header ************/

    #banner-bx { width: 100%; height: auto; overflow:hidden;}
    #banner-bx img { width: 100%; height: auto;}



    /************ section_home ************/

    section#hp-1 { width: 100%; padding: 80px 0 60px 0; background-color: #ffffff;}

    .hp-content-bx { width: 94%; margin: 0 auto;}

    .hp-content-bx .title-box { clear: both; width: 200px; height: 80px; margin: 0 auto 30px auto; color: #666666; font-size: 1.8em; font-weight: 600; text-align: center;}
    .hp-content-bx .title-box .line-box { clear: both; width: 40px; height: 5px; margin: 5px auto 0 auto; background-color: #00a2e8;}

    .hp-content-bx .text-box { width: 100%; padding: 0 20px; margin: 0 0 30px 0; text-align: center; box-sizing: border-box;}
    .hp-content-bx .text-box p { padding: 0; margin: 0; color: #666666; line-height: 2em; text-align: left;}
    .hp-content-bx .text-box img { clear: both; width: 300px; height: auto; margin: 40px 0 0 0;}

    .hp-content-bx .pic-more-box { width: 100%; height: 300px; margin: 0 auto; overflow: hidden; position: relative;}
    .hp-content-bx .pic-more-box .triangle-1 { border-color: transparent #FFFFFF transparent transparent; border-style: solid solid solid solid; border-width: 300px 120px 0px 0px; height: 0px; width: 0px; position: absolute; top: 0; right: 0; z-index: 10;}
    .hp-content-bx .pic-more-box .more-bx { width: 100%; height: 40px; background-color: #00a2e8; position: absolute; bottom: 45px; left: 0; z-index: 99;}
    .hp-content-bx .pic-more-box .more-bx span { margin: 5px 30px 0 0; color: #ffffff; font-weight: 600; float: right;}

    section#hp-2 { width: 100%; padding: 80px 0; background-color: #f0f0f0;}

    .hp-content-bx .news-list-box { width: 90%; margin: 0 auto;}
    .hp-content-bx .news-list-box .list-bx { width: 100%; margin: 0 auto;}
    .hp-content-bx .news-list-box .list-bx .news-title { width: calc(100% - 80px); padding: 30px 0; margin: 10px 0; color: #666666; border-bottom: 1px #c7c6c6 solid; box-sizing: border-box; float: left;}
    .hp-content-bx .news-list-box .list-bx .news-title a { color: #666666; text-decoration: none;}
    .hp-content-bx .news-list-box .list-bx .news-date { width: 65px; height: 65px; margin: 30px 0 0 0; color: #ffffff; text-align: center; border-radius: 100%; background-color: #400080; float: right;}
    .hp-content-bx .news-list-box .list-bx .news-date .mon-day { clear: both; margin: 6px 0 0 0; font-size: 1.2em;}
    .hp-content-bx .news-list-box .list-bx .news-date .year { clear: both; font-size: 0.9em;}
    .hp-content-bx .news-list-box .more-box { width: 70px; height: 24px; margin: 30px 0 0 0; color: #ffffff; font-size: 0.8em; border-radius: 10px; text-align: center; background-color: #400080;}
    .hp-content-bx .news-list-box .more-box a { color: #ffffff; text-decoration: none;}

    .hp-content-bx .news-pic-box { width: 100%; height: 300px; margin: 30px auto 0 auto; overflow: hidden;}
    .hp-content-bx .news-pic-box img { width: 100%; height: auto;}

    .hp-content-bx .map-box { width: 94%; height: 460px; margin: 0 auto 40px auto;}

    .hp-content-bx .contact-form-box { width: 94%; margin: 0 auto;}
    .hp-content-bx .contact-form-box .form-left { width: 100%;}
    .hp-content-bx .contact-form-box .form-right { width: 100%;}
    .hp-content-bx .contact-form-box .form-full { clear: both; width: 100%; text-align: center;}
    .hp-content-bx .contact-form-box .caption { clear: both; width: 60px; padding: 0 0 0 10px; margin: 10px 0 20px 0; text-align: left; box-sizing: border-box; float: left;}
    .hp-content-bx .contact-form-box .column { width: calc(100% - 70px); margin: 0 10px 20px 0; float: left;}
    .hp-content-bx .contact-form-box .column-2 { width: calc(100% - 70px); margin: 10px 10px 30px 0; float: left;}
    .hp-content-bx .contact-form-box input[type=text].style1 { width: 100%; padding: 10px; font:0.9em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 1px #cccccc solid; border-radius: 6px; box-sizing: border-box;}
    .hp-content-bx .contact-form-box textarea { width: 100%; height: 120px; padding: 10px; font:0.9em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 1px #cccccc solid; border-radius: 6px; box-sizing: border-box;}
    .hp-content-bx .contact-form-box input[type=button] { padding: 10px 80px; margin: 25px 0 0 0; color: #ffffff; font-weight: 600; border-radius: 8px; border: 0; background-color: #3f48cc; cursor: pointer;}



    /************ section_news ************/

    section#content { clear: both; width: 90%; padding: 80px 0; margin: 0 auto;}

    section#content .title-box { clear: both; width: 200px; height: 80px; margin: 0 auto; color: #666666; font-size: 1.8em; font-weight: 600; text-align: center;}
    section#content .title-box .line-box { clear: both; width: 40px; height: 5px; margin: 5px auto 0 auto; background-color: #00a2e8;}

    .column-lf { clear: both; width: 100%; margin: 30px 0 40px 0;}

    .column-lf .leftmenu-box { width: 100%; padding: 20px; color: #666666; font-size: 1.2em; border-radius: 14px; background-color: #eeeeee; box-sizing: border-box;}
    .column-lf .leftmenu-box .menu-list { width: 100%; padding: 15px 0; border-bottom: 1px #cccccc solid;}
    .column-lf .leftmenu-box .menu-list a { color: #666666; text-decoration: none;}
    .column-lf .leftmenu-box .menu-list a:hover { color: #00a2e8;}
    .column-lf .leftmenu-box .menu-list .icon { width: 30px; float: left;}
    .column-lf .leftmenu-box .menu-list .menu-item { width: calc(100% - 60px); float: left;}
    .column-lf .leftmenu-box .menu-list .menu-arrow { width: 30px; text-align: right; float: right;}

    .column-rt { width: 100%; margin: 30px 0 0 0;}

    .column-rt .news-list-box { clear: both; width: 100%; padding: 10px; margin: 0 0 20px 0; border-bottom: 1px #eeeeee solid; box-sizing: border-box;}
    .column-rt .news-list-box .news-date { width: 65px; height: 65px; margin: 20px 0 0 0; color: #ffffff; text-align: center; border-radius: 100%; background-color: #400080; float: left;}
    .column-rt .news-list-box .news-date .mon-day { clear: both; margin: 6px 0 0 0; font-size: 1.2em;}
    .column-rt .news-list-box .news-date .year { clear: both; font-size: 0.9em;}
    .column-rt .news-list-box .news-title { width: calc(100% - 85px); margin: 20px 0 0 0; color: #666666; float: right;}
    .column-rt .news-list-box .news-title a { color: #666666; text-decoration: none;}
    .column-rt .news-list-box .news-title a:hover { text-decoration: underline;}

    .column-rt .news-content-bx { clear: both; width: 100%; padding: 20px; color: #666666; line-height: 1.8em; box-sizing: border-box;}
    .column-rt .news-content-bx a { color: #666666; text-decoration: underline;}

    .goback-bt { width: 120px; margin: 40px auto 0 auto; font-size: 0.8em; text-align: center; border-radius: 8px; background-color: #00a2e8;}
    .goback-bt a { width: 100%; padding: 5px 0; color: #ffffff; text-decoration: none; display: block;}



    /************ section_about ************/

    .column-rt .about-content-bx { width: 100%; color: #666666; line-height: 1.8em;}

    .column-rt .about-content-bx .about-title-box { width: 100%; margin: 0 0 30px 0; color: #00a2e8; text-align: left; font-size: 1.4em; font-weight: 500;}

    .column-rt .about-content-bx img.about-img-1 { width: 100%; height: auto; margin: 0 0 20px 0; border: 3px #cccccc solid; border-radius: 20px; box-sizing: border-box;}

    .column-rt .about-content-bx ul { padding: 0 0 0 20px; margin: 0; list-style:decimal; display: block;}
    .column-rt .about-content-bx ul li { padding: 0; margin: 0;}

    .column-rt .about-content-bx .people-caption-bx { clear: both; width: 100%; font-weight: 600; line-height: 1em; border-bottom: 2px #cccccc solid;}
    .column-rt .about-content-bx .people-caption-bx .caption-1, .people-column-bx .column-1 { width: 18%; padding: 10px 5px; box-sizing: border-box; float: left;}
    .column-rt .about-content-bx .people-caption-bx .caption-2, .people-column-bx .column-2 { width: 13%; padding: 10px 5px; box-sizing: border-box; float: left;}
    .column-rt .about-content-bx .people-caption-bx .caption-3, .people-column-bx .column-3 { width: 44%; padding: 10px 5px; box-sizing: border-box; float: left;}
    .column-rt .about-content-bx .people-caption-bx .caption-4, .people-column-bx .column-4 { width: 25%; padding: 10px 5px; box-sizing: border-box; float: left;}
    .column-rt .about-content-bx .people-column-bx { clear: both; width: 100%; border-bottom: 1px #cccccc solid;}

    .column-rt .about-content-bx .pic-box { width: 90%; margin: 10px 0; text-align: center;}
    .column-rt .about-content-bx .pic-box img { width: 90%; height: auto;}

    .column-rt .about-content-bx .cf-table-2x { width: 100%;}
    .column-rt .about-content-bx .cf-table-1x { clear: both; width: 100%; margin: 0 0 50px 0;}
    .column-rt .about-content-bx .cf-caption-2x { clear: both; width: 100%; padding: 10px 0; color: #666666; font-weight: 600; border-bottom: 3px #666666 solid;}
    .column-rt .about-content-bx .cf-caption-1x { clear: both; width: 100%; padding: 10px 0; color: #666666; font-weight: 600; border-bottom: 3px #666666 solid;}
    .column-rt .about-content-bx .cf-column-1x { clear: both; width: 100%; padding: 20px 0; margin: 0 0 0 0;}
    .column-rt .about-content-bx .cf-column-3x-1 { clear: both; width: 100%;}
    .column-rt .about-content-bx .cf-column-3x-2 { clear: both; width: 30%; float: left;}
    .column-rt .about-content-bx .cf-column-3x-3 { width: 70%; float: left;}



    /************ section_service ************/

    .column-rt .about-content-bx .serv-caption-bx { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: stretch;}
    .column-rt .about-content-bx .serv-caption-bx .caption-1 { width: 40%; padding: 10px; color: #fff; font-size: 1.2em; font-weight: 600; text-align: center; border-right: 1px #fff solid; background-color: #00a2e8; box-sizing: border-box;}
    .column-rt .about-content-bx .serv-caption-bx .caption-2 { width: 60%; padding: 10px; color: #fff; font-size: 1.2em; font-weight: 600; text-align: center; background-color: #00a2e8; box-sizing: border-box;}
    .column-rt .about-content-bx .serv-caption-bx .caption-3 { width: 15%; padding: 10px; color: #fff; font-size: 1.2em; font-weight: 600; text-align: center; border-right: 1px #fff solid; background-color: #00a2e8; box-sizing: border-box;}
    .column-rt .about-content-bx .serv-caption-bx .caption-4 { width: 35%; padding: 10px; color: #fff; font-size: 1.2em; font-weight: 600; text-align: center; border-right: 1px #fff solid; background-color: #00a2e8; box-sizing: border-box;}
    .column-rt .about-content-bx .serv-caption-bx .caption-5 { width: 50%; padding: 10px; color: #fff; font-size: 1.2em; font-weight: 600; text-align: center; background-color: #00a2e8; box-sizing: border-box;}
    .column-rt .about-content-bx .serv-column-bx { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: stretch; border-bottom: 1px #00a2e8 solid;}
    .column-rt .about-content-bx .serv-column-bx:nth-child(even) { background-color: #e9f6fb;}
    .column-rt .about-content-bx .serv-column-bx .column-1 { width: 40%; padding: 10px; text-align: center; border-right: 1px #00a2e8 solid; box-sizing: border-box;}
    .column-rt .about-content-bx .serv-column-bx .column-2 { width: 60%; padding: 10px; box-sizing: border-box;}
    .column-rt .about-content-bx .serv-column-bx .column-3 { width: 15%; padding: 10px; border-right: 1px #00a2e8 solid; box-sizing: border-box;}
    .column-rt .about-content-bx .serv-column-bx .column-4 { width: 35%; padding: 10px; border-right: 1px #00a2e8 solid; box-sizing: border-box;}
    .column-rt .about-content-bx .serv-column-bx .column-5 { width: 50%; padding: 10px; box-sizing: border-box;}



    /************ section_flow ************/

    .flow-box { clear: both; width: 100%; margin: 100px 0 0 0; position: relative;}
    .flow-box .flow-content-bx { clear: both; width: 100%; padding: 60px 30px; margin: -60px auto 0 auto; color: #fff; font-size: 1.4em; font-weight: 500; text-align: center; letter-spacing: 0.1em; border-radius: 20px; background-color: #00a2e8; box-sizing: border-box;}
    .flow-box .flow-arrow-bx { clear: both; width: 100px; height: 100px; margin: 0 auto; color: #00a2e8; font-size: 4em; text-align: center; border-radius: 100%; background-color: #fff; overflow: hidden; position: relative; top: -30px; left: 0;}
    
    
    
    /************ section_links ************/
    
    ul.links-list { width: 90%; padding: 0; margin: 60px auto 0 auto; list-style: none; display: flex; justify-content: flex-start; flex-wrap: wrap;}
    ul.links-list li { width: 100%; padding: 0; margin: 0 0 10px 0; color: #414141;}
    ul.links-list li a { color: #414141; font-size: 1.1em; text-decoration: none;}
    ul.links-list li a:hover { text-decoration: underline;}
    
    
    
    /************ section_download ************/
    
    .column-rt .about-content-bx ul.download-appl-list { clear: both; width: 100%; padding: 0; margin: 60px 0 0 0; list-style-type: none;}
    .column-rt .about-content-bx ul.download-appl-list li { width: 100%; padding: 0; margin: 0 0 20px 0;}
    .column-rt .about-content-bx ul.download-appl-list li a { width: 100%; padding: 20px; color: #414141; font-size: 1.1em; text-decoration: none; border: 1px #ccc solid; border-radius: 20px; background-color: #eee; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}
    .column-rt .about-content-bx ul.download-appl-list li a i.fa { font-size: 1.6em; margin: 0 10px 0 0;}
    .column-rt .about-content-bx ul.download-appl-list li a:hover { color: #fff; background-color: #ccc;}



    /************ section_contact ************/

    .contact-column-lf { clear: both; width: 100%; margin: 30px 0 0 0; padding: 40px; color: #666666; line-height: 2em; border-radius: 14px; background-color: #eeeeee; box-sizing: border-box; float: left;}
    .contact-column-lf font.name-title { font-size: 1.4em; font-weight: 600;}
    .contact-column-lf img { width: 100%; height: auto; border-radius: 20px;}

    .contact-column-rt { width: 100%; margin: 30px 0 0 0; color: #666666; line-height: 1.8em; float: right;}
    .contact-column-rt .google-map-box { width: 100%; margin: 0 0 40px 0;}
    .contact-column-rt .contact-form-2x { width: 100%;}
    .contact-column-rt .contact-form-1x { width: 100%; text-align: center;}
    .contact-column-rt .caption { clear: both; width: 60px; padding: 0 0 0 10px; margin: 10px 0 20px 0; text-align: left; box-sizing: border-box; float: left;}
    .contact-column-rt .column { width: calc(100% - 70px); margin: 0 10px 20px 0; float: left;}
    .contact-column-rt .column-2 { width: calc(100% - 70px); margin: 10px 10px 30px 0; float: left;}
    .contact-column-rt input[type=text].style1 { width: 100%; padding: 10px; font:0.9em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 1px #cccccc solid; border-radius: 6px; box-sizing: border-box;}
    .contact-column-rt textarea { width: 100%; height: 120px; padding: 10px; font:0.9em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 1px #cccccc solid; border-radius: 6px; box-sizing: border-box;}
    .contact-column-rt input[type=button] { padding: 10px 80px; margin: 25px 0 0 0; color: #ffffff; font-weight: 600; border-radius: 8px; border: 0; background-color: #3f48cc; cursor: pointer;}



    /************ page ************/

    .page-box { clear: both; width: 100%; margin: 40px 0 0 0; text-align: center;}
    .page-box .page-num-bx { margin: 0 2px; font-size: 0.8em; border: 1px #cccccc solid; border-radius: 6px; display: inline-block;}
    .page-box .page-num-bx a { padding: 8px; color: #666666; text-decoration: none; border-radius: 6px; background-color: #f1f1f1; display: block;}
    .page-box .page-num-bx a:hover { color: #ffffff; background-color: #666666;}
    .page-box .page-num-bx a.sel { color: #ffffff; background-color: #00a2e8;}



    /************ sitemap ************/

    #sitemap { clear: both; width: 96%; margin: 0 auto 40px auto;}
    #sitemap ul { width: 100%; padding: 0; margin: 0; list-style: none; display: block;}
    #sitemap ul li { width: calc(100% / 3); padding: 0; margin: 0 0 30px 0; color: #666666; font-size: 1.2em; float: left;}
    #sitemap ul li:nth-child(3n+1) { clear: both;}
    #sitemap ul li a { color: #666666; text-decoration: none;}
    #sitemap ul li ul.class-2 { width: 100%; padding: 0; margin: 0; list-style: none; display: block;}
    #sitemap ul li ul.class-2 li { width: 100%; padding: 0; margin: 10px 0; font-size: 0.8em; float: none;}



    /************ error404 ************/

    .text-404 { width: 100%; padding: 60px 0; color: #666666; font-size: 1.4em; font-weight: 600; text-align: center;}



    /************ footer ************/

    footer { width: 100%; padding: 60px 0; color: #666666; background-color: #f0f0f0;}

    footer .footer-content { width: 94%; margin: 0 auto;}

    footer .footer-content .logo-infor-bx { width: 250px; margin: 0 auto;}
    footer .footer-content .logo-infor-bx .logo { width: 100%;}
    footer .footer-content .logo-infor-bx .logo img { width: 90px; height: auto;}
    footer .footer-content .logo-infor-bx .title { clear: both; width: 100%; color: #666666; font-size: 1.1em; font-weight: 600;}
    footer .footer-content .logo-infor-bx .address { clear: both; width: 100%; margin: 10px 0 0 0; color: #666666; font-size: 0.9em;}
    footer .footer-content .logo-infor-bx .address a.footer-tel { color: #00a2e8; text-decoration: underline;}
    footer .footer-content .logo-infor-bx .address a.footer-tel img { width: 20px; height: auto;}

    footer .footer-content .nav-box ul#pc { display: none;}

    footer .footer-content .nav-box { width: 80%; margin: 0 auto 40px auto;}
    footer .footer-content .nav-box ul#mo { padding: 0; margin: 0; list-style: none; text-align: center; display: block;}
    footer .footer-content .nav-box ul#mo li { padding: 0 10px; margin: 0 0 20px 0; color: #666666; font-size: 0.9em; text-align: left; vertical-align: top; display: inline-block;}
    footer .footer-content .nav-box ul#mo li:nth-child(3n+1) { clear: both;}
    footer .footer-content .nav-box ul#mo li a { color: #666666; text-decoration: none;}
    footer .footer-content .nav-box ul#mo li a:hover { text-decoration: underline;}
    footer .footer-content .nav-box ul#mo li ul.popup { padding: 0; margin: 0; list-style: none; display: block;}
    footer .footer-content .nav-box ul#mo li ul.popup li { padding: 0; margin: 5px 0; color: #666666; font-size: 1em; text-align: left; display: block;}

    footer .footer-content .qrcode-box { clear: both; width: 100%; margin: 30px 0; font-size: 0.8em; text-align: center;}
    footer .footer-content .qrcode-box img { width: 100px; height: auto; margin: 0 auto;}

    footer .footer-content .copyright-box { clear: both; width: 100%; margin: 40px 0 0 0; color: #666666; font-size: 0.8em; text-align: center;}


}