/* basic */
html,body{
-webkit-overflow-scrolling : touch !important;
margin:0;
}
a, *:hover, *:active{-webkit-transition: background 500ms ease-in-out, height 500ms ease-in-out, color 500ms ease-in-out; -moz-transition: background 500ms ease-in-out, height 500ms ease-in-out, color 500ms ease-in-out; -ms-transition: background 500ms ease-in-out, height 500ms ease-in-out, color 500ms ease-in-out; -o-transition: background 500ms ease-in-out, height 500ms ease-in-out, color 500ms ease-in-out; transition: background 500ms ease-in-out, height 500ms ease-in-out, color 500ms ease-in-out; }
body{margin:0; font-family:'Open Sans', sans-serif,"微軟正黑體"; font-size:16px; color:#737373;}
a{color:#737373; text-decoration:none;}
.clean{clear:both;}
.boxsizing{-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
.flex { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
.vertical-container {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
.edit{width:95%; margin:0 auto 5% auto; line-height:30px; color:#333;}
.edit img{max-width:100%; height:auto;}
.edit iframe{max-width:100%;}
.edit p{line-height:30px;}
.edit ol li{display: list-item;}
.edit ol {
display: block;
list-style-type: decimal;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
}
.edit ul{
display: block;
list-style-type: disc;
margin-top: 1em;
margin-bottom: 1 em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
}
/* layout */
.header{width:100%; height:95px; position:fixed; top:0; z-index:999; background:#fff; transition:all 0.5s ease-in-out;}
.inner-1400{max-width:1400px; width:100%; margin:0 auto;}
.container{margin:95px auto 0 auto;}
.footer{width:100%; background:#262626; color:#fff;}
.tabs{width:100%;}
.banner{width:100%;}
.breadcrumb{margin:0 0 15px 0; text-align:right;}
.subnav{margin-bottom:30px; border:1px #aaa solid;}
.table-default{width:100%;}
/* header-set */
.header .inner-1400{position:relative;}
.header.small_heigh{ box-shadow:0 0 8px rgba(0,0,0,0.2);}
/* logo */
.header__logo{width:245px; padding:33px 5px 24px 5px; position:relative; margin-right:35px;}
.header__logo img{width:100%; height:auto;}
.header__logo:before, .header .inner-1400:before{content:""; width:100%; height:4px; position:absolute; top:0; left:0;}
.header__logo:before{background:#737373;}
/* .header__logo div{position: absolute;}
.header__logo div:nth-child(2){-webkit-animation: round 10s linear infinite; animation: round 10s linear infinite; top: 29px; left: 5px;}
.header__logo div:nth-child(3){-webkit-animation: round2 10s linear infinite; animation: round2 10s linear infinite; top: 10px; left: 50px; opacity: 0; filter: alpha(opacity=0);}
.header__logo div:nth-child(3) img{max-width: 150px; height: auto;}
@-webkit-keyframes round {
0% {
opacity: 1;
filter: alpha(opacity=100);
}
33% {
opacity: 1;
filter: alpha(opacity=100);
}
36% {
opacity: 0;
filter: alpha(opacity=0);
}
77% {
opacity: 0;
filter: alpha(opacity=0);
}
80% {
opacity: 1;
filter: alpha(opacity=1);
}
100% {
opacity: 1;
filter: alpha(opacity=100);
}
}
@keyframes round {
0% {
opacity: 1;
filter: alpha(opacity=100);
}
33% {
opacity: 1;
filter: alpha(opacity=100);
}
36% {
opacity: 0;
filter: alpha(opacity=0);
}
77% {
opacity: 0;
filter: alpha(opacity=0);
}
80% {
opacity: 1;
filter: alpha(opacity=1);
}
100% {
opacity: 1;
filter: alpha(opacity=100);
}
}
@-webkit-keyframes round2 {
0% {
opacity: 0;
filter: alpha(opacity=0);
}
33% {
opacity: 0;
filter: alpha(opacity=0);
}
36% {
opacity: 1;
filter: alpha(opacity=100);
}
77% {
opacity: 1;
filter: alpha(opacity=100);
}
80% {
opacity: 0;
filter: alpha(opacity=0);
}
100% {
opacity: 0;
filter: alpha(opacity=0);
}
}
@keyframes round2 {
0% {
opacity: 0;
filter: alpha(opacity=0);
}
33% {
opacity: 0;
filter: alpha(opacity=0);
}
36% {
opacity: 1;
filter: alpha(opacity=100);
}
77% {
opacity: 1;
filter: alpha(opacity=100);
}
80% {
opacity: 0;
filter: alpha(opacity=0);
}
100% {
opacity: 0;
filter: alpha(opacity=0);
}
} */
.header .inner-1400:before{background:#d4d4d4;}
/* menu */
.header__menu{width: -moz-calc(100% - 717px); width: -webkit-calc(100% - 717px); width: calc(100% - 717px);}
.is-dropdown-submenu .is-dropdown-submenu-parent.opens-right.arrow-hide > a::after{display:none;}
.is-dropdown-submenu-parent.opens-right.arrow-hide > .is-dropdown-submenu.menu--hide{display:none;}
/* header__search */
.header__search{width:230px; margin:0 35px;}
.header__searchform{margin:0 !important; position:relative; width:100%;}
.header__searchform .form__field{padding:0;}
.header__searchform .form__control{background:#f9f9f9; padding:8px 15px; border:none; border-radius:20px 0 0 20px; width: calc(100% - 38px);}
.header__searchform .btn{width:38px; height:38px; border-radius:0 4px 4px 0; background:#aaa; border:none; padding:8px; position:absolute; right:0; top:0; min-width:inherit;}
/* iorder */
.header__iorder{width:137px; padding-right:5px;}
.header__iorder img{width:100%; height:auto;}
/*This will work for firefox*/
@-moz-document url-prefix() {
.header__iorder img{
width:137px;
}
}
/* mobile-btn */
.body-hid { overflow: hidden; }
.nav-btn { width: 32px; height: 32px; background-color: #97b3d6; position: fixed; top: 25px; right: 15px; z-index: 10; display: none; }
.nav-btn span { width: 70%; height: 2px; margin: auto; background-color: #fff; position: absolute; top: 0; right: 0; left: 0; bottom: 0; }
.nav-btn span:after, .nav-btn span:before { content: ""; width: 100%; height: 2px; background-color: #fff; position: absolute; }
.nav-btn span:after { top: -6px; }
.nav-btn span:before { bottom: -6px; }
.nav-btn2 { width: 32px; height: 32px; background-color: transparent; position: absolute; top: 25px; right: 15px; display: none; }
.nav-btn2 span { width: 70%; height: 2px; margin: auto; background-color: #737373; position: absolute; top: 0; right: 0; left: 0; bottom: 0; -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); }
.nav-btn2 span:after { content: ""; width: 100%; height: 2px; background-color: #737373; position: absolute; left:0; -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); }
/* mobile-search+iorder */
.mobile-inner{display:none;}
/* tabs-set */
/* tabs選單 */
.tabs__ul{z-index:1; width:100%; overflow:hidden;}
.tabs__ul li{flex:1; letter-spacing:0.1rem;}
.tabs__ul li:first-child a{border-radius:20px 0 0 0;}
.tabs__ul li:last-child a{border-radius:0 20px 0 0;}
.tabs__ul li a{padding:15px; text-align:center; background:#aaa; color:#fff; display:block;}
.tabs__ul li a.current{background:#62a6f2;}
.tabs__ul--business{}
.tabs__ul--business li:last-child a{border-radius:20px 20px 0 0;}
/* tabs內容 */
.tabs__wrap{z-index:0; box-shadow:0 0 15px rgba(0,0,0,0.1); padding:20px; height:auto !important;}
.tabs__hide { position: absolute; top: -9999px; left: -9999px; }
.tabs__block{}
/* tabs-用於search */
.tabs__ul--search li{font-size:24px; line-height:24px;}
.tabs__ul--search li a.current{ padding:6px 10px;}
.filtericon{margin-right:10px;}
.filtericon:before{font-size:36px; line-height:42px;}
.tabs__ul--search li a .filtericon{display:none;}
.tabs__ul--search li a.current .filtericon{/*display:block; */vertical-align:sub; display:inline-block;}
/* searchform-set */
.searchform{margin:0 auto 20px auto !important; font-size:20px;}
.searchform .form__label{padding:0; height:60px;}
.searchform .form__col{margin:0;}
.searchform .form__col--w25{width:25%;}
.searchform .btnbox--change{text-align:left; margin-left:15px;}
.searchform .btnbox--business{padding-top:20px; clear:both;}
.btnbox--filter{margin:0 0 20px;}
/* banner--bg(用於內頁) */
.banner--bg{height:235px; background-repeat:no-repeat; background-position:center; margin-bottom:20px;}
.banner__item{color:#fff; font-weight:bold; font-size:30px; letter-spacing:0.3rem; padding-left:0.3rem;}
/* breadcrumb */
.breadcrumb li{display: inline-block; margin-left:2px; color:#737373; font-size:14px; position:relative; padding-right:30px;}
.breadcrumb li:last-child{padding-right:0;}
.breadcrumb li:last-child .breadcrumbicon{display:none;}
.breadcrumbicon{ margin-right:10px; font-size:12px; position:absolute; right:0; top:6px;}
.breadcrumb--bodertop{padding-top:15px; border-top:1px #d4d4d4 solid;}
/* subnav */
.subnav li{flex:1; border-right:1px #aaa solid;}
.subnav li:last-child{border-right:0;}
.subnav li a{display:block; padding:15px 0; width:100%; text-align:center;}
.subnav li.subnav__current{background:#aaa;}
.subnav li.subnav__current a{color:#fff;}
/* table */
.table-default caption{margin-bottom:10px; color:#62a6f2; font-weight:bold; text-align:left; position:relative;}
.caption-icon{vertical-align:baseline; margin-right:10px;}
.table-default th, td{padding:10px; text-align:center;}
.table-default th{background:#aaa; color:#fff;}
.table-default td{background:#f9f9f9;}
/* a-cover */
.a-cover{position:absolute; top:0; left:0; width:100%; height:100%; z-index:1;}
/* 內頁標題 */
.apage_tit_line{ display:block; font-size:22px; line-height:22px; color:#737373; margin-bottom:20px; border-left:1px solid #e62310; padding-left:13px; }
/* footer-set */
/* 內容 */
.footer__body{padding:50px 0 30px;}
.footer__info{flex:1.5; position:relative; padding-top:50px;}
.info{padding-left:5px;}
.info__companyname{font-size:20px; margin-bottom:20px;}
.info__companyname img{width: 120px; height: auto; display: inline-block; margin-left: 6px; vertical-align: text-bottom;}
.info__data{margin-bottom:10px;}
.info__data--repair{margin-bottom:15px;}
.footer__copyright{position:absolute; bottom:0; left:5px; font-size:13px;}
.footer__link{flex:4.5; position:relative; justify-content:flex-end;}
.footer__link a{color:#fff;}
.ftmenu{width: calc(100% / 4 - 9rem); margin:0 4.5rem;}
.ftmenu:first-child{margin-left:0;}
.ftmenu:last-nth-child(2){margin-right:0;}
.ftmenu dt{padding-bottom:15px; margin-bottom:15px; border-bottom:#62a6f2 1px solid;}
.ftmenu dd{margin-bottom:5px;}
.footer__otherlink{position:absolute; left:4.5rem; bottom:0;}
.footer__otherlink li{margin-bottom:5px;}
/* 支援瀏覽器 */
.footer__browser{padding:17px 5px; background:#000; font-size:13px;}
/* gdpr */
.gdpr{background: #62a6f2; position: fixed; bottom: 0; z-index: 9999; width: 100%; padding: 10px 16px; color: #fff; text-align:center; box-shadow: 0 0 7px rgba(0, 0, 0, 0.5);}
.gdpr a{color: #fff; text-decoration: underline;}
.btn--gdpr{padding: 7px 12px !important; margin-left: 10px; display: inline-block !important; text-decoration: none !important; min-width: 120px !important;}
/*隱藏線上報修按鈕*/
.support_offheight{ display: none;}
a.support_iconoff{ display:none;}
/*go top*/
.cd-top {display: inline-block;height: 40px;width: 40px; position: fixed;bottom: 53px;right: 10px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);/* image replacement properties */overflow: hidden;text-indent: 100%; white-space: nowrap; background:url(../images/cd-top-arrow.svg) no-repeat center 50% #737373; background-size:25px auto;visibility: hidden;opacity: 0;-webkit-transition: opacity .3s 0s, visibility 0s .3s;-moz-transition: opacity .3s 0s, visibility 0s .3s;transition: opacity .3s 0s, visibility 0s .3s;}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {z-index:99;-webkit-transition: opacity .3s 0s, visibility 0s 0s;-moz-transition: opacity .3s 0s, visibility 0s 0s;transition: opacity .3s 0s, visibility 0s 0s;}
.cd-top.cd-is-visible {visibility: visible;opacity: 1;}
.cd-top.cd-fade-out {opacity: .5;}
.no-touch .cd-top:hover {/*background-color: #62a6f2;*/opacity: 1;}
@media only screen and (min-width: 980px)
{
/* basic */
a:hover{color:#d4d4d4;}
/* header__search */
.header__searchform .btn:hover{background:#62a6f2;}
/* tabs-set */
/* tabs選單 */
.tabs__ul li a:hover{background:#737373;}
.tabs__ul li a.current:hover{background:#62a6f2;}
/* subnav */
.subnav li:hover{background:rgba(0,0,0,0.2);}
.subnav li:hover a{color:#fff;}
/* footer-set */
/* 內容 */
.footer__link a:hover{color:#62a6f2;}
}
@media only screen and (min-width: 1921px)
{
/* banner--bg(用於內頁) */
.banner--bg{background-size:100% auto;}
}
@media only screen and (max-width: 1400px)
{
/* layout */
.container, .inner-1400{width:98%;}
/* footer-set */
/* 內容 */
.ftmenu{width: calc(100% / 4 - 5rem); margin:0 2.5rem;}
.footer__otherlink{left:2.5rem;}
}
@media only screen and (max-width: 1280px)
{
/* layout */
.header{height:80px;}
.container{margin-top:80px;}
/* header-set */
.header__logo{width:200px; padding:24px 5px; margin-right:10px;}
.header__menu{width: -moz-calc(100% - 577px); width: -webkit-calc(100% - 577px); width: calc(100% - 577px);}
.header__search{width:210px; margin:0 20px 0 10px;}
.header__iorder{width:127px;}
}
@media only screen and (max-width: 1024px)
{
/* logo */
.header__logo{width: -moz-calc(100% - 442px); width: -webkit-calc(100% - 442px); width: calc(100% - 442px);}
.header__logo img{width:200px;}
/* menu */
.is-dropdown-submenu-parent.opens-right > .is-dropdown-submenu.menu--hide{display:block;}
/* iorder */
.header__iorder{margin-right:65px;}
/* mobile-btn */
.nav-btn, .nav .nav-btn2 { display: block; }
.nav { width: 100%; height: 100%; padding:80px 15px 10px 15px; margin-left:0; background:rgba(255,255,255,1); position: fixed; top: -110%; left: 0; z-index: 12; display: block; overflow: hidden; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; transition: all 0.5s ease-out; }
.nav.nav-on { top: 0; overflow-y:auto !important;}
/* .nav.nav-on > .is-drilldown{ z-index: 999;} */
/* tabs-set */
/* tabs內容 */
.tabs__wrap{padding:10px;}
/* tabs-用於search */
.tabs__ul--search li{font-size:20px;}
.filtericon:before{font-size:32px;}
/* searchform-set */
.searchform{font-size:18px;}
.searchform .form__label{height:46px;}
/* footer-set */
/* 內容 */
.footer__body{padding:30px 0 0;}
.footer__link, .footer__info{width:100%; flex:inherit;}
.footer__link{order:1; justify-content:flex-start;}
.footer__info{order:2;}
.ftmenu{width: calc(100% / 4); margin:0; padding:0 20px;}
.footer__otherlink{left:20px;}
.footer__copyright{position:relative; padding-left:5px; left:0;}
}
@media only screen and (max-width: 980px)
{
.subnav{display:none;}
.edit table{overflow:auto; overflow-x:auto; overflow-y:hidden; display:block;}
/* searchform-set */
.searchform .form__col--w66{width:100%; margin-right:0; padding:15px 0;}
.searchform .btnbox--change{margin-left:0; text-align:center;}
}
@media only screen and (max-width: 767px)
{
/* layout */
.subnav{border-bottom:none;}
/* subnav */
.subnav li{width: calc(25% - 1px); flex:inherit; border-bottom:1px #aaa solid;}
.subnav li:nth-child(4n){border-right:none;}
}
@media only screen and (max-width: 640px)
{
/*body{font-size:15px;}*/
.edit iframe{max-height: 300px;}
/* layout */
.header{height:68px;}
.container{margin-top:68px;}
.breadcrumb{text-align:left;}
.table-default{overflow-x:auto; overflow-y:hidden; display:block;}
/* header-set */
.header__logo{width:210px; padding:18px 5px;}
.header__search, .header__iorder{display:none;}
.nav-btn{top:18px;}
/* mobile-search+iorder */
.mobile-inner{display:block; position:absolute; bottom:10px; left:0; width:100%;}
.mobile-inner__li{padding:0.4rem 1rem; text-align:center;}
.mobile-iorder{width:125px; height:auto;}
/* header__search */
.header__searchform .form__control{margin-left:-40px;}
/* tabs-set */
/* tabs選單 */
.tabs__ul li{letter-spacing:0;}
.tabs__ul--search li{font-size:18px; line-height:20px;}
.tabs__ul li a{padding:17px;}
/* searchform-set */
.searchform{font-size:16px;}
.searchform .form__label{height:44px;}
.searchform .btn{min-width:inherit; padding:12px 20px;}
/* banner--bg(用於內頁) */
.banner--bg{display:none;}
/* breadcrumb */
.breadcrumb{padding-top:10px; margin-bottom:10px; border-top:1px #d4d4d4 solid;}
/* footer-set */
/* 內容 */
.footer__body{padding-top:17px;}
.footer__info{order:1; padding-top:0;}
.info__companyname{margin-bottom:5px; font-size:18px;}
.info__data{margin-bottom:5px;}
.footer__link{order:2;}
.footer__otherlink{position:inherit; margin-top:10px; left:0; padding-left:5px;}
.footer__otherlink li{display:inline-block; margin-right:8px;}
.footer__otherlink li:last-child{margin-right:0;}
.ftmenu{display:none;}
.footer__browser{padding:10px 5px;}
}
@media only screen and (max-width: 480px)
{
/* tabs-用於search */
.tabs__ul--search li a, .tabs__ul--search li a.current{padding:12px 8px;}
.tabs__ul--search li a.current .filtericon{display:none;}
/* searchform-set */
.searchform .form__label{height:30px;}
.searchform .form__col--w25{width:100%; justify-content:flex-start; -webkit-justify-content:flex-start;}
.searchform .form__col--w75{margin-left:0;}
/*go top*/
.cd-top{right:0; bottom:0;}
}
@media only screen and (max-width: 400px)
{
.subnav li a{padding:10px 0;}
}