/*======================================================== 基本設定 =========================================================*/ body { font-family: 'Open Sans', Verdana, Arial, sans-serif, Microsoft YaHei, Microsoft JhengHei; /* font-family: Arial, Verdana, Helvetica, sans-serif;*/ /* font-family: "微軟正黑體", Arial, Verdana, Helvetica, sans-serif;*/ font-weight: 400; line-height: 28px; padding-top: 56px; font-size: 0.9rem; color: #111; } /*======================================================== header設定 =========================================================*/ /* 選單列*/ .rd-navbar-main-outer { margin-top: 40px; } .rd-navbar-main-outer .rd-navbar-inner { padding-top: 20px; padding-bottom: 20px; max-width: 1480px; } .rd-navbar-nav { margin: 0; } /* logo設定 */ .rd-navbar-brand img { } /* header下拉時設定 */ .rd-navbar-static.rd-navbar--is-stuck, .rd-navbar-static.rd-navbar--is-clone, .rd-navbar-fullwidth.rd-navbar--is-stuck, .rd-navbar-fullwidth.rd-navbar--is-clone { background: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, .3); } .rd-navbar-static.rd-navbar--is-stuck .rd-navbar-inner, .rd-navbar-static.rd-navbar--is-clone .rd-navbar-inner { padding-top: 15px; padding-bottom: 15px; } .rd-navbar-static.rd-navbar--is-stuck .rd-navbar-main-outer { margin-top: 0px; } .rd-navbar-static.rd-navbar--is-stuck .rd-navbar-info { display: none; } .rd-navbar-static.rd-navbar--is-stuck .rd-navbar-nav > li > a:before, .rd-navbar-static.rd-navbar--is-clone .rd-navbar-nav > li > a:before, .rd-navbar-fullwidth.rd-navbar--is-stuck .rd-navbar-nav > li > a:before, .rd-navbar-fullwidth.rd-navbar--is-clone .rd-navbar-nav > li > a:before { content: ""; position: absolute; z-index: -1; left: 0; right: 100%; bottom: 0; background: #000; height: 2px; -webkit-transition: right 0.3s ease-out; transition: right 0.3s ease-out; } .rd-navbar-static.rd-navbar--is-stuck .rd-navbar-nav > li > a:hover:before, .rd-navbar-static.rd-navbar--is-clone .rd-navbar-nav > li > a:hover:before, .rd-navbar-fullwidth.rd-navbar--is-stuck .rd-navbar-nav > li > a:hover:before, .rd-navbar-fullwidth.rd-navbar--is-clone .rd-navbar-nav > li > a:hover:before { right: 0; } /* 手機版header背景色調整 */ .rd-navbar-fixed .rd-navbar-panel:before { /* background: #fff;*/ } .rd-navbar-toggle span:after, .rd-navbar-toggle span:before, .rd-navbar-toggle span, .rd-navbar-sidebar-toggle span:after, .rd-navbar-sidebar-toggle span:before, .rd-navbar-sidebar-toggle span { background-color: #000; } .rd-navbar-fixed .rd-navbar-nav > li:first-of-type a { border-top: 1px solid #ededed; } .rd-navbar-fixed .rd-navbar-nav > li:last-of-type a { display: inline-block; padding: 11px 0; margin-left: 10px; } .rd-navbar-fixed .rd-navbar-nav > li:last-of-type a:first-of-type { margin-left: 16px; } .rd-navbar-fixed .rd-navbar-nav > li:last-of-type:hover > a, .rd-navbar-fixed .rd-navbar-nav > li:last-of-type.active > a, .rd-navbar-fixed .rd-navbar-nav > li:last-of-type.opened > a { background-color: transparent; color: #222; } /* 尺寸設定 */ @media (max-width: 991px) { .rd-navbar-fixed .rd-navbar-brand img { max-width: 300px; } } @media (max-width: 1199px) { .other-link { list-style: none; margin: 15px 0 5px; padding: 0; text-align: center; } .other-link { display: none; } } @media (min-width: 992px) { body { padding-top: 130px; } .rd-navbar-brand img { height: 50px; } .rd-navbar-nav > li:first-of-type { display: none; } .rd-navbar-static .rd-navbar-nav > li + li { margin-left: 0; } .rd-navbar-static .rd-navbar-nav > li > a, .rd-navbar-fullwidth .rd-navbar-nav > li > a { font-size: 1.1rem; padding-left: 10px; padding-right: 10px; color: #000; font-weight: bold; transition: all .3s; top: 0; text-transform: capitalize; margin: 0 10px; } .rd-navbar-static .rd-navbar-nav > li > a:hover, .rd-navbar-fullwidth .rd-navbar-nav > li > a:hover { color: #000; } .rd-navbar-static .rd-navbar-nav > li > a:before, .rd-navbar-fullwidth .rd-navbar-nav > li > a:before { content: ""; position: absolute; z-index: -1; left: 0; right: 100%; bottom: 0; background: #000; height: 2px; -webkit-transition: right 0.3s ease-out; transition: right 0.3s ease-out; } .rd-navbar-static .rd-navbar-nav > li > a:hover:before, .rd-navbar-fullwidth .rd-navbar-nav > li > a:hover:before { right: 0; } .rd-navbar-static .rd-navbar-nav > li.focus > a, .rd-navbar-static .rd-navbar-nav > li.opened > a, .rd-navbar-fullwidth .rd-navbar-nav > li.focus > a, .rd-navbar-fullwidth .rd-navbar-nav > li.opened > a { color: #000; } .rd-navbar-static .rd-navbar-nav > li > .rd-navbar-submenu-toggle, .rd-navbar-fullwidth .rd-navbar-nav > li > .rd-navbar-submenu-toggle { display: none; } .rd-navbar-static .rd-navbar-nav > li:nth-of-type(6) > a, .rd-navbar-fullwidth .rd-navbar-nav > li:nth-of-type(6) > a { display: none; } /* 上方選單 */ .rd-navbar-info { position: absolute; right: calc(0% + 36px); top: -30px; z-index: 2; width: 100%; text-align: right; } .other-link { list-style: none; margin: 0; padding: 0; display: flex; justify-content: end; color: #000; } .other-link li { margin-left: 15px; } .other-link li a { display: inline-block; color: #000; font-size: 0.8rem; } } @media (min-width: 1200px) { .rd-navbar-static .rd-navbar-nav > li > a, .rd-navbar-fullwidth .rd-navbar-nav > li > a { font-size: 1.2rem; margin: 0 15px; } } @media (min-width: 1600px) { body { padding-top: 130px; } .rd-navbar-brand img { height: 50px; } .rd-navbar-static .rd-navbar-nav > li > a, .rd-navbar-fullwidth .rd-navbar-nav > li > a { font-size: 1.3rem; margin: 0 20px; } .rd-navbar-info { right: calc(0% + 46px); } }