html { font-size:16px; }
html * { max-height:9999999px; }
body {
    font-family:"微軟正黑體", "Microsoft JhengHei";
    font-size:1rem;
}
.center { text-align:center; }
.hr-1 { border-color:#565656; }
.hr-2 { border-color:#e3e3e3; }


/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance:textfield;
}

.topnav { padding-bottom:0; background-color:#fff; z-index:150; }
.topnav .nav-brand { padding-bottom:8px; display:inline-block; }
.topnav .navbar-toggler { font-size:29px; padding:6px 10px; text-align:center; width:47px; }
.topnav .share { margin-bottom:15px; }
.topnav .share .nav-item { margin:0 8px; }

.body-overlay { display:none; position:fixed; left:0; top:0; right:0; bottom:0; background-color:rgba(14,164,217,0.6); z-index:140; }
.body-ovhide { width:100%; overflow:hidden; }
.body-relative { position:relative; }

.slide-nav {
    position:absolute; 
    left:-70%;
    width:70%; 
    background-color:#474747;
    min-height:100vh;
    display:block;
    z-index:150;
    font-size:1.2rem;
    padding:16px 40px;
    color:#fff; 
    border-radius: 0 0 10px 10px;
}
.slide-nav a { color:#fff; }
.slide-nav a:hover { color:#0ea4d9; text-decoration:none; }

.slide-nav .menu { margin:0; padding:0; list-style:none; }
.slide-nav .menu .nav-item { padding:16px 0; border-bottom:1px solid #666; }
.slide-nav .menu .nav-item .item { display:block; } 
.slide-nav .share { margin:32px 0; }
.slide-nav .share .nav-item { display:inline-block; margin-right:16px; }
.slide-nav .share .link { text-indent:-9999px; display:block; }
.slide-nav .share .fb { width:40px; height:40px; background:url(../images/share_fb_2.jpg) center center/cover no-repeat; display:inline-block; overflow:hidden; }
.slide-nav .share .twitter { width:40px; height:40px; background:url(../images/share_twitter_2.jpg) center center/cover no-repeat; display:inline-block; overflow:hidden; }

#SiteNavMenu .menu { }
#SiteNavMenu .menu .item { 
    font-family:"微軟正黑體", "Microsoft JhengHei";
    display:block; 
    width:auto; 
    text-align:center;
    font-size:2rem;
    margin:10px;
    color:#616161; 
}
#SiteNavMenu .menu .item:hover {
    color:#0EA4D9;
    text-decoration:none;
}

#SiteNavMenu .share { text-align:center; margin-top:1rem; }
#SiteNavMenu .share .nav-link { text-indent:-9999px; }
#SiteNavMenu .share .fb { width:38px; height:38px; background:url(../images/share_fb.jpg) center center no-repeat; display:inline-block; overflow:hidden; }
#SiteNavMenu .share .fb:hover { width:38px; height:38px; background:url(../images/share_fb_1.jpg) center center no-repeat; }
#SiteNavMenu .share .twitter { width:38px; height:38px; background:url(../images/share_twitter.jpg) center center no-repeat; display:inline-block; overflow:hidden; }
#SiteNavMenu .share .twitter:hover { width:38px; height:38px; background:url(../images/share_twitter_1.jpg) center center no-repeat; }

.home-brand { margin-bottom:32px; }
.home-brand h2.tit { margin:48px 0; }
.home-brand .row { margin-bottom:16px; }
.home-brand .column { }
.home-brand .column-hide { display:none; }
.home-brand .bdr { border:1px solid #f1f1f1; margin-left:-1px; margin-top:-1px; min-height:101%; } 
.home-brand .item { width:100%; height:100%; text-align:center; }
.home-brand .item .img { width:100%; height:auto; }
.home-brand .item span.mh { display:inline-block; height:99%; width:0; visibility:hidden; }
.home-brand .item * { vertical-align:middle; }
.home-brand .link { cursor:pointer; }
.home-brand .item .mask { visibility:hidden; position:absolute; left:0px; top:0px; width:100%; height:100%; background:url(../images/mask_bwork.png) center center no-repeat; }
.home-brand .bdr .link .mask { visibility:hidden; position:absolute; left:0px; top:0px; width:100%; height:100%; background:url(../images/mask_brand.png) center center no-repeat; }
.home-brand .item:hover .mask { visibility:visible; }
.home-brand .to-open { text-align:center; display:none; }
.home-brand .to-more { text-align:center; }

.bg_gray { background-color:#eee; padding:5px 0; }
.home-project-fluid { margin:48px 0; border-bottom:1px solid #dadada; } 
.home-project-fluid h2.tit { margin:0; padding-bottom:20px; margin-right:60px; }
.home-project-fluid .category .citem { float:left; margin-right:10px; color:#585858; border-bottom:4px solid transparent; position:relative; top:1px; cursor:pointer; }
.home-project-fluid .category a { display:block; padding:10px 10px 20px; color:#585858; }
.home-project-fluid .category a:hover { text-decoration:none; }
.home-project-fluid .category .now { border-bottom:4px solid #212529; }

.home-project-fluid .m-nav { margin:1rem 10px; position:relative; }
.home-project-fluid .m-nav .m-sel-title { padding:3px 0; text-align:center; position:relative; cursor:pointer; }
.home-project-fluid .m-nav .m-sel-title .name { display:inline-block; margin-right:2rem; margin-left:2rem; }
.home-project-fluid .m-nav .m-sel-title .icon { display:inline-block; position:absolute; top:3px; right:10px; }
.home-project-fluid .m-nav .m-nav-div { position:relative; }  
.home-project-fluid .m-nav .m-nav-menu { border:1px solid #ccc; border-radius:5px; margin-top:0.125rem; width:100%; background-color:#fff; }
.home-project-fluid .m-nav ul.m-nav-menu { margin:0.125rem 0 0; padding:0; list-style-type:none; } 
.home-project-fluid .m-nav ul.m-nav-menu li { cursor:pointer; margin:0 1.5rem; padding:1rem 0; text-align:center; border-top:1px solid #dcdcdc; }
.home-project-fluid .m-nav ul.m-nav-menu li:first-child { border-top:0px none #e8e8e8; }

.home-project { margin-bottom:32px; }
.home-project .carea { display:none; }
.home-project div.show { display:block; }
 
.home-project .column { margin-bottom:30px; }
.home-project .column-hide { display:none; }
.home-project .column .item { background-color:#fff; text-align:center; height:100%; }
.home-project .column .item .title { padding:16px; }
.home-project .column .item .title a { color:#535353; display:block; }
.home-project .column .item .title a:hover { color:#00A1E9; text-decoration:none; }
.home-project .column .mobile .title .txt { text-align:left; padding-right:1rem; }
.home-project .column .item .pic { position:relative; }
.home-project .column .item .pic .img { width:100%; height:auto; }
.home-project .column .item .link { cursor:pointer; }
.home-project .column .item .mask { visibility:hidden; position:absolute; left:0px; top:0px; width:100%; height:100%; background:url(../images/mask_bwork.png) center center no-repeat; }
.home-project .column .item .link .mask { visibility:hidden; position:absolute; left:0px; top:0px; width:100%; height:100%; background:url(../images/mask_brand.png) center center no-repeat; }
.home-project .column .item:hover .mask { visibility:visible; }
.home-project .column .mobile .title { min-height:110px; }
.home-project .column .mobile .title .qr { flex:0 0 30%; }
.home-project .to-open { text-align:center; display:none; }
.home-project .to-more { text-align:center; }

.bnr-jc { position:relative; }

.bnr-jc .jc {
    position:relative;
    overflow:hidden;
    width:100%;
}
.bnr-jc .jc ul {
    width:10000em;
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}

.bnr-jc .jc li {
    float:left; 
    width:100vw;
}
.bnr-jc .jc a { display:block; }

#jc-pagination { position:absolute; right:55px; bottom:20px; }
#jc-pagination a {
	display: inline-block;
    width:12px;
	height:12px;
	overflow:hidden;
	text-indent:-9999px;
    margin-left: 10px;
	background:#132332;
	border-radius:6px;
}
#jc-pagination a.now { background:#02A0EA; }

.homebnr .jc li { height:130px; }
.homebnr .jc .img { width:100%; height:130px; }
.topbnr .jc li { height:130px; }
.topbnr .jc .img { width:100%; height:130px; }

.mod-title { margin:40px 0; }
.mod-title .c1 { padding-right:48px; border-right:2px dotted #e2e2e2; text-align:right; }
.mod-title .c2 { padding-left:0; padding-top:48px; color:#777; }
.mod-title .tit { color:#0ea4d9; font-size:2rem; }
.mod-title .img { margin-top:10px; }
.mod-title .img img { height:auto; max-width:100%; max-height:30px; }
.mod-title .txt { }

.about { margin:20px 0 40px; color:#777; }
.about h2.title { font-size:2rem; text-align:center; }
.about .company .row .tit { color:#0ea4d9; }
.about .company .row .tit { padding-left:15px; }
.about .company .row .txt .addr-tc { margin-top:20px; }

.about-desc { margin-top:40px; overflow:hidden; }

.about-desc .desc-row { margin-left:-30px; margin-right:-30px; }
.about-desc .desc-row .column { padding:0 30px; }
.about-desc .desc-row .column h3 { font-size:2rem; color:#1b1b1b; }
.about-desc .desc-row .column h4 { color:#0ea4d9; }
.about-desc .desc-row .column .desc { margin-top:30px; margin-bottom:50px; color:#5e5e5e; }

.server { margin-bottom:10px; }
.server .hinet { margin-top:10px; margin-bottom:20px; }
.server .hinet .img { width:100%; height:auto; }
.server .desc-row .img { text-align:center; }
.server .desc-row .column .item { border:1px solid #dcdcdc; box-shadow:16px 16px #f2f2f2; padding:30px 0; margin-right:16px; margin-bottom:35px; text-align:center; height:auto; }
.server .desc-row .column .item h4.tit { color:#0ea4d9; margin:15px 0 30px; }
.server .desc-row .column .item .desc { padding:0 25px; height:auto; color:#777; }
.server .desc-row .column .item ul { margin:0; padding:0; list-style:none; }
.server .desc-row .column .item ul li { margin:5px 0 10px; }

.service { margin:50px 0 20px; }
.service .desc-row .column { margin-bottom:50px; }
.service .desc-row .column .icon { width:30%; float:left; text-align:center; padding:25px 10px 10px 0; }
.service .desc-row .column .icon img { height:auto; max-width:100%; }
.service .desc-row .column .item { width:70%; float:left; border-top:1px solid #e2e2e2; }
.service .desc-row .column .item h4.tit { color:#0ea4d9; margin:25px 0 25px; }
.service .desc-row .column .item .desc { color:#777; }

.cashflow .schema { margin:20px 0 30px; }
.cashflow .home-brand { margin-bottom:70px; }
.cashflow .home-brand h2.tit { margin:70px 0 30px; }

.mod-brand { margin-bottom:60px; }

.mod-project .cls-nav { /*background-color:#efefef;*/ }
.mod-project .nav-item {
    -ms-flex: 0 0 15%; 
    flex:0 0 15%; 
}
.mod-project .nav-item .item { padding:15px 0; text-align:center; border-top:2px solid transparent; cursor:pointer; }
.mod-project .nav-item .active { border-top:2px solid #00a1e9; }
.mod-project .nav-item .item:hover { color:#00a1e9;  }

.mod-project .m-nav { margin:1rem 10px; position:relative; }
.mod-project .m-nav .m-sel-title { padding:3px 0; text-align:center; position:relative; }
.mod-project .m-nav .m-sel-title .name { display:inline-block; margin-right:2rem; margin-left:2rem; }
.mod-project .m-nav .m-sel-title .icon { display:inline-block; position:absolute; top:3px; right:10px; }
.mod-project .m-nav .m-nav-div { position:relative; }  
.mod-project .m-nav .m-nav-menu { border:1px solid #ccc; border-radius:5px; margin-top:0.125rem; width:100%; background-color:#fff; }
.mod-project .m-nav ul.m-nav-menu { margin:0.125rem 0 0; padding:0; list-style-type:none; } 
.mod-project .m-nav ul.m-nav-menu li { cursor:pointer; margin:0 1.5rem; padding:1rem 0; text-align:center; border-top:1px solid #dcdcdc; }
.mod-project .m-nav ul.m-nav-menu li:first-child { border-top:0px none #e8e8e8; }

.mod-project .m-page { margin:0.75rem 0; }
.mod-project .m-page .bdr { border-radius:5px; border:1px solid #ccc; text-align:center; }
.mod-project .m-page .m-sel-title { padding:10px 20px; display:inline-block; }
.mod-project .m-page .m-sel-title .name { margin:0 0.5rem; }
.mod-project .m-page .m-sel-title .icon { position:static; top:10px; right:1rem; }
.mod-project .m-page .prev { position:absolute; left:1rem; top:0px; color:#333; padding:11px 5px 10px; display:inline-block; }   
.mod-project .m-page .next { position:absolute; right:1rem; top:0px; color:#333; padding:11px 5px 10px; display:inline-block; }
.mod-project .m-page span.prev { color:#888; }
.mod-project .m-page span.next { color:#888; }

#project-div2 { margin:50px 0; }

.inquiry { margin-bottom:30px; }
.inquiry form .ftit { color:#0ea4d9; }
.inquiry form .ftit span { color:#ec7e7d; }

nav.page li.page-item { display:block; }
nav.page li.page-item a.link { display:block; padding:0.5rem 0.75rem; }
nav.page li.dot { padding:0.5rem 0.25rem; }
nav.page li.prev { padding:0.5rem 1.5rem 0.5rem 0; color:#b2b2b2; } 
nav.page li.next { padding:0.5rem 0 0.5rem 1.5rem; color:#b2b2b2; }
nav.page li a { color:#777; }
nav.page li a:hover { color:#ec7e7d; text-decoration:none; }
nav.page li.active a { color:#00a1e9; } 

.footer { background-color:#474747; color:#ababab; }
.footer a { color:#adadad; }
.footer a:hover { color:#fff; } 

.footer .f-intro { padding-top:25px; }
.footer .f-intro .item { padding:25px 0px 25px; }
.footer .f-intro .item h3 { color:#fff; font-size:2rem; text-align:center; }
.footer .f-intro .item h4 { font-size:1rem; text-align:center; }
.footer .f-intro .item .txt { margin-top:32px; }
.footer .f-intro .item .txt a { color:#adadad; }
.footer .f-intro .item .txt a:hover { color:#fff; }

.footer .f-info { padding:20px 0 25px; font-size:0.9rem; }
.footer .f-info .link ul { margin:0; padding:0; list-style:none; }
.footer .f-info .link ul li { margin-bottom:0.7rem; }
.footer .f-info .badge-dark { color:#ababab; background-color:#000; }
.footer .f-info .fld1 { margin-bottom:48px; }
.footer .f-info .fld2 { margin-bottom:28px; }
.footer .f-info .fld3 { margin-bottom:48px; }

.footer .f-info .fld1 .qrcode { width:40%; padding-top:5px; }
.footer .f-info .fld1 .link { width:30%; }

.footer .f-info .fld2 .addr .badge { margin-right:8px; padding:4px; font-size:1em; background-color:#1a1a1a; }
.footer .f-info .fld3 .email { margin-top:1rem; }

#link-goto-top { position:fixed; right:15px; bottom:20vh; }
/*
#link-goto-top a { color:#606060; font-weight:bold; text-shadow:1px 1px 1px #909090; display:inline-block; padding:6px; }
*/
nav.mobile-btn { display:none; opacity:0; transition:opacity 1s; }
nav.pc-btn { display:none; }

@media (max-width: 1199.98px) {

}

@media (max-width: 991.98px) {
    .about .company .row .tit { margin-bottom:0.5rem; }
    #link-goto-top { display:none; }        
    #link-goto-top img { width:50px; height:auto; }

    nav.mobile-btn {
        display:block; 
        opacity:1; 
        padding:0px; 
        color:#fff; 
        text-align:center; 
        font-size:31px; 
        position:fixed; 
        bottom:0; left:0;
        width:100%; 
        z-index:50; 
        visibility:hidden;  
    }

    nav.mobile-btn .icon a { color:#fff; display:block; padding:20px 0; opacity:1; background-color: rgba(0,0,0,0.6); height:100%; }
    nav.mobile-btn .icon a.line { background-color: rgba(0,198,61,0.6); }
    nav.mobile-btn .icon a.fb { background-color: rgba(0,110,245,0.6); }
    
    nav.mobile-btn #foot_calltel_area { background-color: rgba(0,0,0,0.6); border-bottom:1px solid rgba(30,30,30,0.8); }
    nav.mobile-btn #foot_calltel_area .col { padding-top:20px; padding-bottom:20px; }
    nav.mobile-btn #foot_calltel_area .col img { max-width:50px; margin-right:10px; vertical-align:-14px; }
    nav.mobile-btn #foot_calltel_area .col a { color:#45bdc9; }
    nav.mobile-btn #foot_calltel_area .col a:hover { text-decoration:none; }
}

@media (max-width: 767.98px) {
    #jc-pagination { position:absolute; right:30px; bottom:15px; }
    .footer .f-info .link { font-size:1rem; }
    #link-goto-top img { width:50px; height:auto; }
}

@media (max-width: 575.98px) {
    .nav-brand .logo { max-width:200px; }
    #jc-pagination { position:absolute; right:15px; bottom:8px; }
    #jc-pagination a {
    	display: inline-block;
        width:8px;
    	height:8px;
        margin-left:8px;
    	border-radius:4px;
    }
    .home-project-fluid h2.tit { margin:0; text-align:center; }
    .home-project .column .mobile .title { min-height:60px; }
    .home-project .column .mobile .title .txt { text-align:center; padding-right:0; }
    .mod-title .c1 { padding-right:28px; }

    h2 { font-size:1.8rem; }
    .mod-title .tit { color:#0ea4d9; font-size:1.8rem; }
    .about h2.title { font-size:1.8rem; text-align:center; }  
    .about-desc .desc-row .column h3 { font-size:1.8rem; color:#1b1b1b; }
    .footer .f-intro .item h3 { color:#fff; font-size:1.6rem; text-align:center; }
    .footer .f-info .fld2 .addr .badge { margin-bottom:5px; }
    #link-goto-top img { width:40px; height:auto; }

    nav.mobile-btn {
        display:block; 
        padding:0; 
        color:#fff; 
        text-align:center; 
        font-size:16px; 
        position:fixed; 
        bottom:0; left:0;
        width:100%;
    }
    nav.mobile-btn img { max-width:24px; }
    nav.mobile-btn .icon a { color:#fff; display:block; padding:14px 0; opacity:1; background-color: rgba(0,0,0,0.6); }
    nav.mobile-btn .icon a.line { background-color: rgba(0,198,61,0.6); }
    nav.mobile-btn .icon a.fb { background-color: rgba(0,110,245,0.6); }

    nav.mobile-btn #foot_calltel_area .col img { max-width:30px; margin-right:10px; vertical-align:-9px; }
    nav.mobile-btn #foot_calltel_area .col a { color:#45bdc9; }
}


@media (min-width: 576px) {
    .homebnr .jc li { height:230px; }
    .homebnr .jc .img { height:230px; }
    .topbnr .jc li { height:130px; }
    .topbnr .jc .img { width:100%; height:130px; }

    .mod-title .tit { color:#0ea4d9; font-size:3rem; }
    .mod-title .img img { height:auto; max-width:100%; max-height:48px; } 
}

@media (min-width: 768px) {
    .homebnr .jc li { height:290px; }
    .homebnr .jc .img { height:290px; }
    .topbnr .jc li { height:160px; }
    .topbnr .jc .img { width:100%; height:160px; }
}

@media (min-width: 992px) {
    #SiteNavMenu { background-color:transparent; margin:0; padding:0; }
    #SiteNavMenu .menu .item { 
        margin:0 9px; 
        height:44px; 
        font-size:1.05rem;     
    }
    #SiteNavMenu .menu .item:hover {
        border-bottom:3px solid #00A1EA;
    }
    #SiteNavMenu .share { margin-top:0; }
    
    .homebnr .jc li { height:360px; }
    .homebnr .jc .img { height:360px; }
    .topbnr .jc li { height:200px; }
    .topbnr .jc .img { width:100%; height:200px; }

    .mod-title .c1 { padding-right:48px; border-right:1px dotted #e2e2e2; -ms-flex:0 0 38%; flex:0 0 38%; max-width:38%; }
    .mod-title .c2 { padding-left:48px; padding-top:0; }
    .mod-title .tit { color:#0ea4d9; font-size:2rem; }
    .mod-title .img img { height:auto; max-width:100%; max-height:none; }
    
    .about .company .row .tit { padding-left:22%; }
    .server .desc-row .column .item { height:90%; }
        
    .footer .f-intro .item { padding:25px 30px 40px; }
    .footer .f-intro .item .txt { margin-top:48px; }
    .footer .f-info .fld2 { margin-bottom:48px; -ms-flex:0 0 68%; flex:0 0 68%; max-width:68%; }    

    nav.pc-btn { display:block; width:60px; background-color:rgba(0,0,0,0.6); color:#fff; margin-bottom:20px; border-radius:10px; }
    nav.pc-btn .item { width:60px; line-height:60px; text-align:center; }
    nav.pc-btn .item img { margin:14px 0; max-width:34px; }
    nav.pc-btn .i2 { margin-top:5px; }
    nav.pc-btn a { color:#ffffff; display:block; }  
    nav.pc-btn a:hover { background-color:#45bdc9; border-radius:10px; }
}

@media (min-width: 1200px) {
    #SiteNavMenu .menu .item { margin:0 24px; }
    
    .homebnr .jc li { height:480px; }
    .homebnr .jc .img { height:480px; }
    .topbnr .jc li { height:240px; }
    .topbnr .jc .img { width:100%; height:240px; }
}