* {margin: 0;padding: 0;font-family: 'Roboto', 'Noto Sans TC', 'Noto Sans', 'sans-serif', '微軟正黑體', '新細明體';}
a {text-decoration: none !important;}
.service-item h1,.blog-item h1,.faq-item h1,.contact-item h1 {font-size: 40px;line-height: 125%; font-weight: 700; letter-spacing: 0.1em; color: #333333;}
h2 {font-size: 32px;line-height: 125%;color: #333333;}
.service-item h2 {font-size: 28px;line-height: 125%;font-weight: 700;letter-spacing: 0.1em;color: #EE7616;}
p {font-size: 16px;line-height: 160%;color: #333333;font-weight: 400;letter-spacing: 0.1em;}
a {font-size: 16px;line-height: 140%;color: #333333; letter-spacing: 0.1em;}
body{position: relative;}
main{padding-top: 75px;}


/*header*/
.header {height: 75px;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;align-items: center;background-color: rgba(255, 255, 255, 1);padding: 0 24px;position: fixed;top: 0;z-index: 999;border-bottom: solid 1px #eaeaea;transition: transform 1s ease;}
.logo {-ms-flex-item-align: center;-ms-grid-row-align: center;align-self: center;}
.logo img{max-height: 65px;width: auto;}

.nav-item-button {margin-left: 12px;position: relative;}
.button-light {border-radius: 50px;border: 1px solid #EE7616;padding: 9px 31px;width: 139px;}
.button-dark {border-radius: 50px;padding: 9px 28px;background-color: #EE7616;width: 139px;}
.button-light a {color: #EE7616;}
.button-dark a {color: #ffffff;}
.button-light:hover {background-color: #F8B500;border: 0px;}
.button-dark:hover {background-color: #F8B500;border: 0px;}

.navbar-navs1 li{width: auto;float: left;position: relative;display: inline-block;height: 20px;line-height: 20px;overflow: hidden;text-align: center;font-size: 16px;margin: 40px -5px 20px 0;}
.navbar-navs1 li:nth-child(1),.navbar-navs1 li:nth-child(2){margin: 40px -20px 20px 0;}
.navbar-navs1{margin-right: -40px;}
.navbar-navs2,.navbar-navs{display: flex;list-style: none;align-items: center;justify-content: center;margin-bottom: 0;}

.nav-items a {padding: 0 21px;font-size: 16px;line-height: 20px;height: 20px;display: block;color: #333333;}
.nav-items a:hover{padding-top: 20px;display: inline-block;transition: all 0.5s;}
.nav-items span {display: block;margin-top: -20px; font-weight: 500;}
.nav-item-button a {position: relative;display: inline-block;text-transform:uppercase;}
.nav-item-button a::before{content: attr(data-chinese);opacity: 0;position: absolute;background-color: #F8B500;border-radius: 25px;width: 139px;height: 44px; color: #ffffff;font-weight: bold;transform:rotate3d(1,0,0,-90deg);transition: 0.5s;text-align: center;padding: 11px 13px 11px 19px;}
.nav-item-button1 a::before{top: -11px;left: -31px;}
.nav-item-button2 a::before{top: -11px;left: -28px;}
.nav-item-button:hover a::before{opacity: 1;transform:rotate3d(1,0,0,0deg);}






/*header-phone*/
.header-phone{display: none; width: 100%;background-color: #ffffff;position: absolute;top: 0;height: 75px;z-index: 998;border-bottom: solid 1px #eaeaea;position: fixed;top: 0;transition: 1s ease;}
.header-phone .logo{ position: absolute;left:50%;top: 50%;-webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);}
#menuToggle{display: block;position:absolute;top: 24px;left: 24px;z-index: 997;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
#menuToggle a{text-decoration: none;color: #333333;-webkit-transition: color 0.3s ease;-o-transition: color 0.3s ease;transition: color 0.3s ease;}
#menuToggle a:hover{color: #EE7616;}
#menuToggle input{display: block;width: 40px;height: 32px;position: absolute;top: -7px;left: -5px;cursor: pointer;opacity: 0;z-index: 2;-webkit-touch-callout: none;}
#menuToggle span{display: block;width: 28px;height: 2px;margin-bottom: 7px;position: relative;background: #666666;border-radius: 3px;z-index: 1;-webkit-transform-origin: 4px 0px;-ms-transform-origin: 4px 0px;transform-origin: 4px 0px;
  -webkit-transition: background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease,
              -webkit-transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
  transition: background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease,
              -webkit-transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
  -o-transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease,
              -webkit-transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);}
#menuToggle span:first-child{-webkit-transform-origin: 0% 0%;-ms-transform-origin: 0% 0%;transform-origin: 0% 0%;}
#menuToggle span:nth-last-child(2){-webkit-transform-origin: 0% 100%;-ms-transform-origin: 0% 100%;transform-origin: 0% 100%;}
#menuToggle input:checked ~ span{opacity: 1;-webkit-transform: rotate(45deg) translate(-1px, 1px);-ms-transform: rotate(45deg) translate(-1px, 1px);transform: rotate(45deg) translate(-1px, 1px);background: #666666;}
#menuToggle input:checked ~ span:nth-last-child(3){opacity: 0;-webkit-transform: rotate(0deg) scale(0.2, 0.2);-ms-transform: rotate(0deg) scale(0.2, 0.2);transform: rotate(0deg) scale(0.2, 0.2);}
#menuToggle input:checked ~ span:nth-last-child(2){-webkit-transform: rotate(-45deg) translate(0, -1px);-ms-transform: rotate(-45deg) translate(0, -1px);transform: rotate(-45deg) translate(0, -1px);}
#menu{position: absolute;width: 300px;height: calc(100vh + 50px) ;margin: -100px 0 0 -50px;padding:125px 50px 0 50px;background: #F2F2F2;-webkit-box-shadow: 5px 0 20px rgba(0,0,0,0.25);box-shadow: 5px 0 20px rgba(0,0,0,0.25);list-style-type: none;-webkit-font-smoothing: antialiased;  -webkit-transform-origin: 0% 0%;  -ms-transform-origin: 0% 0%;  transform-origin: 0% 0%;-webkit-transform: translate(-100%, 0);-ms-transform: translate(-100%, 0);transform: translate(-100%, 0);-webkit-transition: -webkit-transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);transition: -webkit-transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);-o-transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), -webkit-transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);}
#menu li{padding: 16px 0;font-size: 16px;letter-spacing: 0.1em;line-height: 140%;font-weight: 700;}
.menu-social{position: absolute;bottom: 24px;}
.menu-social svg{fill:#666666;margin-right: 8px;-webkit-transition: 0.3s;-o-transition: 0.3s;transition: 0.3s;}
.menu-social svg:hover{fill:#EE7616;}
#menuToggle input:checked ~ ul{-webkit-transform: none;-ms-transform: none;transform: none;}
#bg-phone-dark{  -webkit-transition: opacity 0.3s ease;  -o-transition: opacity 0.3s ease;  transition: opacity 0.3s ease;opacity: 0; top: 0;right: 0; width: 0;height: 100vh; position: absolute;z-index: 997;background-color: rgba(0,0,0,0.7);}
@media screen and (max-width:830px) {
    .header{display: none;}
    .header-phone{display: block;z-index: 997;}
    .logo img{max-height: 50px;}}





/*footer*/
footer{ background-color: #F2F2F2;padding: 36px 64px 24px;margin-top: 64px;}
/* footer a:hover{color:#EE7616; -webkit-transition: .5s; -o-transition: .5s; transition: .5s;} */
footer p,footer a{font-size: 16px;line-height: 160%;letter-spacing: 0.1em;font-weight: 400;list-style: none;color: #333333;}
footer span{display: none;transition: 0.5s;font-weight: 500;}
footer a:hover span{display: block;color: #EE7616;}
footer a:hover li{display: none;}
footer .copyright{font-size: 14px;}
footer span:after {content: '>';position: absolute;opacity: 0;  top: 0px;left: -30px;transition: 0.5s;color: #EE7616;}
footer span:hover:after {opacity: 1;left: -20px;}


.social-media{text-align: right;-ms-flex-item-align: end;align-self: flex-end;}
.social-media svg{fill: #333333;padding-left: 8px;}
.social-media svg:hover{fill:#EE7616; -webkit-transition: .5s; -o-transition: .5s; transition: .5s;}
@media screen and (max-width:850px) {
  footer{padding: 32px 32px 24px;}
}
@media screen and (max-width:768px) {
.social-media{text-align: left;}
.social-media svg{width: 40px;height: 40px;}
footer{margin-top: 32px;}}
/* @media screen and (max-width:400px){
  footer{padding: 36px 24px 24px;}} */