@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
body,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Noto Sans TC', sans-serif;
}

.center {
    text-align: center;
}

#header a.logo>img {
    height: 66px;
}


/* 第1層選單 */

#topNav div.navbar-collapse {
    /* border-right: 1px solid #f2f2f2; */
    padding-right: 0px;
}

#topMain.nav-pills>li>a {
    font-weight: 200 !important;
    font-size: 16px;
    border-left: 1px solid #f2f2f2;
    border-radius: 0px !important;
}

#topMain.nav-pills>li.active>a {
    color: #000 !important;
}

#topMain.nav-pills>li>a:hover {
    background-color: rgb(242, 242, 242) !important;
}


/* 第1層選單中的紅色按鈕 */

.nav-free-tool {
    border-right: 1px solid gainsboro;
    background-color: #cc0000;
}

.nav-free-tool a {
    border-radius: 0px !important;
    color: #ffff00 !important;
    line-height: 20px !important;
    padding-top: 30px !important;
    width: 95px;
}

#header.fixed #topNav #topMain>li.nav-free-tool>a {
    padding-top: 10px !important;
}

#topMain.nav-pills>li.nav-free-tool>a:hover {
    background-color: rgb(242, 242, 242) !important;
    color: #000000 !important;
}


/* 第1層選單中的 icon */

.nav-icon {
    width: 100px;
    text-align: center;
    line-height: 15px !important;
    /* border-left: 1px solid gainsboro;
    border-radius: 0px !important; */
}

.nav-icon img {
    width: 40px;
    height: 30px;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
}

#header.fixed #topNav #topMain>li>.nav-icon img {
    margin-top: 0px;
    margin-bottom: 0px;
}


/* 子選單寬度 */

#topNav ul.dropdown-menu {
    min-width: 130px !important;
}

#topMain>li.dropdown>ul {
    border-color: #ffffff !important;
}


/* 第2層選單 */

#topMain>li.dropdown>ul>li.dropdown,
#topMain>li.dropdown>ul>li {
    background-color: #e4e4e4;
    border-color: #ffffff;
}

#topMain>li.dropdown>ul>li.dropdown>a,
#topMain>li.dropdown>ul>li>a {
    color: #000 !important;
    font-weight: 100;
    font-size: 16px;
}

#topMain>li.dropdown>ul>li.dropdown>a:hover,
#topMain>li.dropdown>ul>li>a:hover {
    background-color: #cc0000 !important;
    color: #ffffff !important;
    font-weight: 100;
}


/* 第3層選單 */

#topMain>li.dropdown>ul>li.dropdown>ul>li {
    background-color: #e4e4e4;
    text-align: center;
    border-color: #ffffff;
}

#topMain>li.dropdown>ul>li.dropdown>ul>li>a {
    color: #000;
    font-weight: 100;
    font-size: 16px;
}

#topMain>li.dropdown>ul>li.dropdown>ul>li>a:hover {
    background-color: #cc0000;
    color: #ffffff;
    font-weight: 100;
}


/* 內頁子選單 */

.sub-nav {
    height: 41px;
    background-color: #e4e4e4;
    padding: 0px;
}

.fixed-top {
    position: fixed;
    top: 60px;
    z-index: 100;
    width: 100%;
}

.nav-right {
    float: right;
    position: relative;
    left: -50%;
}

.nav-left {
    float: left;
    position: relative;
    left: 50%;
}

.nav li a {
    font-size: 14px;
    color: #333333;
    background-color: #e4e4e4;
}

.nav li a:hover {
    background-color: #ffffff;
}


/* 麵包屑 */

.page-breadcrumb {
    background-color: #ff6666 !important;
    padding: 0px !important;
}

.breadcrumb {
    background-color: #ff6666 !important;
    margin: 0px !important;
    padding: 8px 5px;
    text-align: right;
}

.page-breadcrumb a {
    color: #ffffff !important;
    padding: 5px;
}

.breadcrumb>li+li:before {
    padding: 0px 0px;
}

div.toggle {
    margin: 0px !important;
    background-color: #e4e4e4;
}

div.toggle label {
    margin: 0px !important;
    padding: 8px 20px;
    font-size: 14px;
    background: unset !important;
}

div.toggle-transparent-body {
    display: none;
}


/* 頁腳 */

#footer {
    background-color: #494949;
}

#footer>.container {
    padding-top: 20px;
    margin-bottom: 20px;
    color: #f2f2f2;
}

footer li {
    font-size: 14px;
    font-weight: 100;
    margin: 10px 0px;
}

footer li img {
    vertical-align: top;
    width: 20px;
    height: 20px;
    margin-right: 5px;
}

footer h4 {
    margin-top: 22px;
    color: #f2f2f2 !important;
    font-weight: bold !important;
    font-size: 18px !important;
}

footer p {
    color: #f2f2f2 !important;
    font-weight: 200 !important;
    font-size: 14px;
    margin-bottom: 15px;
}

footer li.company {
    color: #ffffff;
    font-weight: 900;
    font-size: 16px;
}

footer .socail li {
    display: inline;
}

footer a {
    color: #ffffff !important;
}

footer .socail img {
    width: 32px;
    height: 32px;
}

.form_google_search input {
    border-width: 0px;
    background-color: #ffffff !important;
}

.form_google_search img {
    margin-left: 10px;
}

.copyright {
    color: #f2f2f2 !important;
    font-size: 16px !important;
    padding: 10px 0px !important;
}

.copyright li {
    color: #f2f2f2 !important;
    font-size: 16px !important;
    margin: 0px 0px !important;
}


/* 浮動面板 */

.sticky-side {
    z-index: 1000;
    width: 65px;
    background-color: #adadad;
    border-radius: 5px;
    top: 60%;
}

.sticky-side div {
    border-top: #cccccc 1px solid;
    text-align: center;
    padding: 3px;
}

.sticky-side div:first-child {
    border-width: 0px;
    background-color: #cc0000;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.sticky-side img {
    width: 30px;
    height: 30px;
    margin: 3px 0px;
}

.sticky-side a {
    display: block;
    color: #f2f2f2;
    font-size: 12px;
    margin: 5px 0px;
}

.sticky-side div:first-child a {
    color: #ffff00;
}

.sticky-side-bottom {
    display: none;
}

.sticky-side-bottom img {
    width: 32px;
    height: 32px;
    margin: 3px 0px;
}

@media only screen and (max-width: 1215px) {
    .nav-free-tool a {
        width: 85px;
    }
}

@media only screen and (max-width: 768px) {
    /* 導覽列 */
    .nav-free-tool a {
        width: 100%;
        padding-top: 0px !important;
    }
    /* 內頁子選單 */
    .fixed-top {
        top: 0px !important;
        width: 100%;
    }
    .sub-nav li {
        width: 100%;
    }
    div.toggle-transparent-body {
        display: unset;
    }
    div.toggle-transparent-body .toggle,
    div.toggle-transparent-body #submenu_name,
    div.toggle-transparent-body a,
    div.toggle-transparent-body a:hover {
        background: #ff6666;
        color: #ffffff;
    }
    .sub-nav {
        display: none;
    }
    /* footer */
    footer {
        margin-bottom: 65px;
    }
    .sticky-side {
        top: unset;
        left: 0;
        bottom: 0;
        width: 100%;
        border-radius: 0px;
    }
    .sticky-side div {
        width: 25% !important;
        float: left;
        border-top: #cccccc 0px solid;
        border-left: #cccccc 1px solid;
        border-radius: 0px !important;
    }
    /* 麵包屑 */
    .page-breadcrumb {
        padding: 5px 0px !important;
    }
    .page-breadcrumb .container {
        height: 41px;
        padding: 0px;
    }
    .breadcrumb {
        height: 40px;
        position: absolute !important;
        top: 0px !important;
        right: 0px !important;
        margin: 0px !important;
    }
    .breadcrumb li {
        margin: 0px !important;
        padding: 0px !important;
    }
    .breadcrumb a {
        font-size: 14px !important;
    }
}

@media only screen and (max-width: 480px) {
    .breadcrumb {
        position: absolute !important;
        top: 0px !important;
        right: 0px !important;
        margin: 0px !important;
        padding: 0px !important;
    }
    .breadcrumb a {
        font-size: 8px !important;
    }
}