@charset "utf-8";
body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto Regular", Helvetica, Arial, "微軟正黑體", "Microsoft JhengHei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px; }

a, a:focus { color: inherit; text-decoration: none; }
img { max-width: 100%; vertical-align: middle; }
html { box-sizing: border-box; }
button:focus { outline: none; }
*, *:before, *:after { box-sizing: inherit; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; /*For IE 6&7 only*/ }
.table-container { width: 100%; overflow-y: auto; _overflow: auto; margin: 0 0 1em; }
.table-container::-webkit-scrollbar { -webkit-appearance: none; width: 14px; height: 14px; }
.table-container::-webkit-scrollbar-thumb { border-radius: 8px; border: 3px solid #fff; background-color: rgba(0, 0, 0, .3); }

.container { margin: 0; padding: 0; }
.wrap { width: 1440px; margin: auto; }
@media (max-width: 1440px) {
  .wrap { width: 100%; padding: 0 30px; }
}
@media (max-width: 768px) {
  .wrap { width: 100%; padding: 0 15px; }
}
@media (max-width: 480px) {
  .wrap { padding: 0 12px; }
}
/** header **/
.header { height: 125px; background-color: #ffffff; box-shadow: 0px 0px 30px #000; position: fixed; z-index: 101; width: 100%; transition: all 0.4s ease; }
.header .logo { padding-top: 12px; float: left; transition: all 0.4s ease; }
.header .logo-img, .header .logo-name { float: left; }
.header .logo-img { margin-right: 20px; transition: all 0.4s ease; }
.header .logo-img img { max-height: 100px; transition: all 0.4s ease; }
.header .logo-name { margin-top: 46px; transition: all 0.4s ease; }
.comName-tw { font-size: 22px; font-weight: bold; color: #1c1981; letter-spacing: 2px; }
.comName-en { font-size: 18px; color: #ff0000; font-family: "Roboto Bold Condensed", "微軟正黑體", "Microsoft JhengHei", sans-serif; }
.main-menu { float: right; overflow: hidden; }
.main-menu ul { padding-left: 0; margin-top: 70px; margin-bottom: 0; list-style: none; text-align: right; transition: all 0.4s ease; }
.main-menu li { display: inline-block; margin: 0 30px; }
.main-menu li a { display: inline-block; padding: 8px; font-size: 18px; font-family: "Roboto Condensed", "微軟正黑體", "Microsoft JhengHei", sans-serif; transition: all 0.4s ease; position: relative; overflow: hidden; }
.main-menu li.active > a { color: #d12326; }
.main-menu li a::after { content: ""; width: 100%; height: 2px; background-color: #d12326; display: block; bottom: 0; left: 0; position: absolute;  transition: all 0.3s ease; transform: translateX(-101%); }
.main-menu li:hover a::after, .main-menu li.active a::after { transform: translateX(0); }
.main-menu ul ul { padding-left: 0; margin: 0; position: absolute; left: 0; width: 100%; background: rgba(255,255,255,.9); opacity: 0; padding: 30px 12.5%; text-align: left; transform: translateY(-10px); transition: all 0.5s ease; visibility: hidden; }
.main-menu ul ul li { display: inline-block; margin: 0 0.5%; max-width: 16%; vertical-align: top; }
.main-menu ul ul li a { font-family: "Roboto Bold Condensed", "微軟正黑體", "Microsoft JhengHei", sans-serif; font-size: 16px; line-height: 1.2; border-bottom: 1px solid; display: block; }
.main-menu ul ul li.active > a { color: #d12326; }
.main-menu ul ul li a:after, .main-menu ul ul li a:hover:after { display: none; }
.main-menu ul li:hover ul { opacity: 1; transform: translateY(0); visibility: visible; }
.main-menu ul ul ul { padding: 0; margin: 0; background-color: transparent; position: static; }
.main-menu ul ul ul li { display: block; float: none; max-width: inherit; width: 100%; }
.main-menu ul ul ul li a { line-height: 1; font-family: "Roboto Condensed", "微軟正黑體", "Microsoft JhengHei", sans-serif; border-bottom: none; }
.header.header2 { height: 70px; box-shadow: 0px 0px 16px #666; }
.header.header2 .logo { padding-top: 10px; }
.header.header2 .logo-img img { max-height: 50px; }
.header.header2 .logo-name { margin-top: 8px; }
.header.header2 .comName-tw { font-size: 18px; }
.header.header2 .comName-en { font-size: 16px; }
.header2 .main-menu ul { margin-top: 18px; }
@media (max-width: 1440px) {
  .header { height: 100px; }
  .header .logo { width: 320px; }
  .header .logo-img { margin-right: 12px; transition: all 0.3s ease; }
  .header .logo-img img { max-height: 75px; }
  .header .logo-name { width: calc(100% - 105px); margin-top: 32px; }
  .comName-tw { font-size: 18px; }
  .comName-en { font-size: 15px; }
  .header.header2 .comName-en { font-size: 15px; }
  .main-menu { width: calc(100% - 320px); }
  .main-menu ul { margin-top: 48px; }
  .main-menu li { margin: 0 20px; }
  .main-menu ul ul { padding: 30px; }
  .main-menu ul ul li { max-width: calc(100% / 6 - 8px); margin: 0 5px; }
}
@media (max-width: 1366px) {
  .main-menu ul ul li { max-width: calc(100% / 6 - 14px); }
}
@media (max-width: 1200px) {
  .header>.wrap { padding-right: 15px; }
  .header { height: 100px; box-shadow: 0px 0px 16px #666; }
  .header .logo { padding-top: 10px; }
  .header .logo-img { float: none; display: inline-block; vertical-align: middle; }
  .header .logo-name { float: none; display: inline-block; vertical-align: middle; }
  .main-menu ul { margin-top: 40px; }
  .main-menu li { margin: 0 6px; }
  .main-menu ul ul li { max-width: calc(100% / 6 - 15px); }
}
@media (max-width: 1023px) {
  .header { text-align: center; }
  .header { height: 100px; box-shadow: 0px 0px 16px #666; }
  .header .logo { float: none; padding-top: 10px; margin: auto; width: auto; }
  .header .logo-img, .header .logo-name { float: none; display: inline-block; vertical-align: middle; width: auto; }
  .header .logo-name { margin-top: 32px; text-align: left; }
  .main-menu { display: none; }
}
@media (max-width: 480px) {
  .header .logo { width: 320px; float: right; }
}
@media (max-width: 414px) {
  /* .header .logo { width: 320px; } */
  .comName-tw { font-size: 16px; text-align: left; }
  .comName-en { font-size: 14px; text-align: left; }
  .header.header2 .comName-tw { font-size: 16px; }
  .header.header2 .comName-en { font-size: 14px; }
}
@media (max-width: 375px) {
  .header>.wrap { padding-right: 0;}
  .header .logo-name { margin-top: 8px; }
  .header .logo-img { margin-right: 6px; }
}
@media (max-width: 320px) {
  .header { height: 70px; }
  .header .logo { width: 260px; }
  .header .logo-img img { max-height: 50px; }
  .header .hiraku-menu { top: 12px; }
}
/** hiraku menu **/
.hiraku-menu { display: none; }
@media (max-width: 1023px) {
  .hiraku-menu { position: absolute; top: 28px; left: 10px; background-color: #2521a9; border-color: #2521a9; padding: 12px 6px; border-radius: 5px;  transition: all 0.4s ease; display: block; }
  .hiraku-open-btn-line { width: 30px; height: 3px; }
  .hiraku-open-btn-line:after, .hiraku-open-btn-line:before { height: 3px; }
  .hiraku-open-btn-line:before { top: -9px; }
  .hiraku-open-btn-line:after { bottom: -9px; }
  [aria-expanded=true] .hiraku-open-btn-line:after, [aria-expanded=true] .hiraku-open-btn-line:before { width: 30px; }
  [aria-expanded=true] .hiraku-open-btn-line:before { -ms-transform: translate(-2px,9px) rotate(45deg); transform: translate(0px,9px) rotate(45deg); }
  [aria-expanded=true] .hiraku-open-btn-line:after { -ms-transform: translate(-2px,-9px) rotate(-45deg); transform: translate(0px,-9px) rotate(-45deg); }
  .header.header2 .hiraku-menu { top: 12px; }
}
.left-menu { padding-bottom: 50px; }
.left-menu ul { list-style: none; padding: 0; margin: 0; }
.left-menu ul li a { display: block; padding: 12px 12px 12px 26px; font-size: 20px; line-height: 1.4; border-left: 6px transparent solid; font-family: "Roboto Condensed", "微軟正黑體", "Microsoft JhengHei", sans-serif; }
.left-menu>ul>li>a { padding: 12px; font-size: 24px; font-family: "Roboto Bold Condensed", "微軟正黑體", "Microsoft JhengHei", sans-serif; }
.left-menu>ul>li>a, .left-menu>ul>li>ul { border-bottom: #ccc 1px solid; }
.left-menu>ul>li.active>a { background-color: #d12326; color: #fff; border-left-color: #d12326; }
.left-menu>ul>li.active>ul { display: block; }
.left-menu>ul>li>ul { background-color: #eee; display: none; }
.left-menu>ul>li>ul>li a { border-bottom: #ccc 1px dashed; }
.left-menu li.active>a { color: #d12326; }
.left-menu>ul>li>ul>li.active>a { border-left-color: #d12326; }
.left-menu>ul>li>ul>li>a { padding-left: 24px; background-color: #dedede; }
.left-menu>ul>li>ul>li>ul>li>a::before {  content: "\f152"; font-size: 18px; font-family: "Font Awesome 5 Free"; font-weight: 400; margin-right: 6px; }
/** banner **/
.banner { position: relative; }
.banner .slogan { position: absolute; z-index: 10; left: 50%; top: 60%; transform: translate(-50%, -50%); font-family: "Roboto Condensed", "微軟正黑體", "Microsoft JhengHei", sans-serif; color: #ffffff; text-align: center; }

.banner .slogan .title { font-size: 92px; font-family: "Roboto Bold Condensed", "微軟正黑體", "Microsoft JhengHei", sans-serif; line-height: 1; text-transform: uppercase; }
.banner .slogan p { padding: 0; margin: 0; font-size: 42px; }
.banner .breadcrumb { position: absolute; bottom: 30px; left: 50%; width: 100%; color: #ffffff; font-size: 20px; text-align: center; transform: translateX(-50%);  }
.banner .breadcrumb i { margin-right: 6px; }
.banner .breadcrumb a { transition: all 0.3s ease; }
.banner .breadcrumb a:hover { color: #ff0000; }
@media (max-width: 1440px) {
  .banner { overflow: hidden; }
  .banner .slogan { width: 100%; top: 55%; }
  .banner>img { max-width: inherit; width: 120%; margin-left: -10%; }
  .banner .slogan .title { font-size: 72px; }
  .banner .slogan p { font-size: 36px; }
}
@media (max-width: 1024px) {
  .banner>img { max-width: inherit; width: 140%; margin-left: -20%; }
}
@media (max-width: 1023px) {
  .banner { padding-top: 60px; }
  .banner .slogan .title { font-size: 60px; }
  .banner .slogan p { font-size: 30px; }
  .banner .breadcrumb { bottom: 10px; }
}
@media (max-width: 640px) {
  .banner { padding-top: 80px; }
  .banner>img { width: 160%; margin-left: -20%; }
  .banner .slogan .title { font-size: 48px; }
  .banner .slogan p { font-size: 24px; }
}
@media (max-width: 480px) {
  .banner { padding-top: 100px; }
  .banner>img { width: 160%; margin-left: -20%; }
  .banner .slogan .title { font-size: 30px; }
  .banner .slogan p { font-size: 20px; }
  .banner .breadcrumb { bottom: 6px; font-size: 16px; }
}
@media (max-width: 375px) {
  .banner>img { width: 200%; margin-left: -50%; }
  .banner .slogan .title { font-size: 24px; }
  .banner .slogan p { font-size: 18px; }
}
@media (max-width: 359px) {
  .banner .slogan p { width: 70%; margin: auto; }
}
@media (max-width: 320px) {
  .banner { padding-top: 70px; }
}
/** content **/
h1.title { font-size: 36px; vertical-align: middle; }
h1.title img { width: 24px; height: 36px; margin-top: -6px; margin-right: 12px; }
@media (max-width: 414px) {
  h1.title { font-size: 24px; }
}

/** about **/
.about { font-size: 18px; line-height: 2; }
.about .com-img { float: left; margin: 0 20px 12px 0; }
.about .title-effect { display: inline-block; font-size: 24px; }
.about:hover .title-effect { color: #d12326; }
.about:hover .title-effect::before { transform: scale3d(1, 1, 1); }
@media (max-width: 640px) {
  .about .com-img { display: block; float: none; text-align: center; margin: 0 auto 20px; }
}
/** pro list **/
.list-area { border-bottom: #d7d8d9 1px solid; margin-bottom: 30px; padding-bottom: 30px; }
.list-area:last-child { border-bottom: none; margin-bottom: 50px; }
.list-item { border-radius: 10px; padding: 12px; transition: all 0.3s ease; }
.list-item:hover { background-image: -moz-linear-gradient( 90deg, rgb(238,238,238) 0%, rgb(255,255,255) 72%, rgb(245,245,245) 100%);
  background-image: -webkit-linear-gradient( 90deg, rgb(238,238,238) 0%, rgb(255,255,255) 72%, rgb(245,245,245) 100%);
  background-image: -ms-linear-gradient( 90deg, rgb(238,238,238) 0%, rgb(255,255,255) 72%, rgb(245,245,245) 100%);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2); }
.list-item:hover .list-title { color: #d12326; }
.list-img { width: 50%; float: left; text-align: center; }
.list-name { width: 50%; float: left; }
.list-title { font-size: 30px; font-family: "Roboto Bold Condensed", "微軟正黑體", "Microsoft JhengHei", sans-serif; margin: 20px 0 12px; }
.list-name ul { padding-left: 0; margin: 0; list-style: none; }
.list-name li { font-size: 18px; color: #575757; line-height: 2; }
.list-name li a { display: block; line-height: 1.4; padding: 6px 0 6px 30px; }
.list-name li a::before { content: "\f152"; font-size: 18px; font-family: "Font Awesome 5 Free"; font-weight: 400; float: left; margin-left: -30px; margin-right: 12px; } 
.title-effect { position: relative; display: inline-block; line-height: 1; }
.title-effect::before { background: #d12326; content: ''; position: absolute; width: 100%; height: 50%; left: 0; bottom: 0; opacity: 0.2; transform: scale3d(0, 1, 1); transform-origin: 0% 50%; transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); transition: transform 0.5s; }
.list-area:hover .title-effect::before { transform: scale3d(1, 1, 1); }
@media (max-width: 768px) {
  .list-img, .list-name { float: none; width: 100%; }
}
/** pro show **/
.b-img { text-align: center; margin-bottom: 50px; }
.b-img .caption { font-size: 36px; font-family: "Roboto Bold Condensed", "微軟正黑體", "Microsoft JhengHei", sans-serif; }
@media (max-width: 480px) {
  .b-img { margin-bottom: 30px; }
  .b-img .caption { font-size: 24px; line-height: 1.2; }
}
.tabs { margin-bottom: 30px; }
.tab-title { border-bottom: #cccccc 1px solid; list-style: none; padding-left: 14px; margin: 0; }
.tab-title li { display: inline-block; font-size: 30px; color: #ffffff; background-color: #999999; font-family: "Roboto Bold Condensed", "微軟正黑體", "Microsoft JhengHei", sans-serif; text-transform: uppercase; padding: 2px 50px; border-top-left-radius: 10px; border-top-right-radius: 10px; margin: 0 6px; cursor: pointer; transition: all 0.4s ease; }
.tab-title li:hover, .tab-title li.active { background-color: #000000; }
.tab-title li a:hover, .tab-title li:hover a, .tab-title li.active a { color: #ffffff; }
.tab-inner { padding: 12px 30px; }
@media (max-width: 480px) {
  .tab-title { padding-left: 0; }
  .tab-title li { display: block; font-size: 24px; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom: 1px solid; padding: 8px 24px; margin: 0; }
  .tab-inner { padding: 12px 0; }
}
/** fea **/
.fea { font-size: 24px; line-height: 2; margin: 0; }
.fea ul { list-style: none; padding-left: 0; }
.fea li { margin-left: 40px; }
.fea li::before { content: "\f101"; font-size: 18px; line-height: 50px; font-family: "Font Awesome 5 Free"; font-weight: 900; display: block; float: left; width: 30px; margin-left: -30px; } 
@media (max-width: 480px) {
  .fea { font-size: 20px; line-height: 1.4; }
  .fea ul { margin: 0; }
  .fea li::before { line-height: 1.8; }
}
/** spec **/
.spec { margin-top: 30px; }
.spec table { width: 100%; margin-bottom: 30px; border-spacing: 0px; }
.spec table td { padding: 8px 24px; font-size: 18px; border-bottom: #aaaaaa 1px solid; }
.spec thead { background: #aaaaaa; color: #ffffff; }
.spec .model { background: #efefef; font-family: "Roboto Bold Condensed", "微軟正黑體", "Microsoft JhengHei", sans-serif;  }
.spec .th { background: #efefef; width: 35%; }
.spec tbody tr:hover td:not(.th) { background: #efefef; }

/** options **/
.options { padding-top: 30px; }
.options ul { padding-left: 0; margin: 0; list-style: none; }
.options li { float: left; width: 30%; margin: 0 1.6% 40px; text-align: center; }
.options li:nth-child(3n+1) { clear: both; }
.options .img { padding: 2px; background: #ffffff; border: #aaaaaa 1px solid; margin-bottom: 12px; }
.options .caption { font-size: 18px; }
.options2 { font-size: 24px; line-height: 2; margin: 0; }
.options2 ul { list-style: none; padding-left: 0; }
.options2 li { margin-left: 20px; }
@media (max-width: 480px) {
  .options li { float: none; width: 100%; max-width: 420px; margin: 0 auto 30px; }
}
/** ebook **/
.e-book { list-style: none; padding: 30px 0; margin: 30px; }
.e-book li { float: left; width: 25%; text-align: center; margin-bottom: 30px; }
.e-book li img { max-width: 266px; width: 100%; margin: auto; border: #ccc 1px solid; box-shadow: 0 0 10px #eee; background-color: #eee; border-radius: 6px; padding: 6px; overflow: hidden; transition: all 0.3s ease; }
.e-book li:hover img { background-color: rgba(209,35,38,.4); border-color: #d12326; }
.e-book li .book-name { margin: 12px auto; min-height: 48px; font-family: "Roboto Bold Condensed", "微軟正黑體", "Microsoft JhengHei", sans-serif; font-size: 18px; }
.e-book li .btn { max-width: 266px; margin: auto; }
.e-book li .btn > div { display: inline-block; width: 120px; border: #999 1px solid; border-radius: 5px; margin: 0 4px; }
.e-book li:hover .btn > div { border-color: #d12326; box-shadow: inset 0 0 6px rgba(209,35,38,.4); }
.e-book li .btn > div a { display: block; padding: 6px 0; transition: all 0.3s ease; }
.e-book li .btn > div a:hover { background-color: #d12326; color: #fff; }
.e-book li .btn > .download a::before { content: "\f019"; font-size: 18px; font-family: "Font Awesome 5 Free"; font-weight: 900; margin-right: 4px; }
.e-book li .btn > .view a::before { content: "\f06e"; font-size: 18px; font-family: "Font Awesome 5 Free"; font-weight: 900; margin-right: 4px; }
@media (max-width: 1280px) {
  .e-book li { width: 45%; margin: 0 2.5% 30px; }
}
@media (max-width: 680px) {
  .e-book { margin: 30px 0; }
  .e-book li { width: 48%; margin: 0 1% 30px; }
  .e-book li .btn > div { margin: 0; width: 106px; }
}
@media (max-width: 480px) {
  .e-book li { width: 100%; margin: 0 auto 30px; }
}
/** video **/
.video-item { float: left; width: 48%; margin: 0 1%; }
.video-item:nth-child(2n+1) { clear: both; }
.video-item .video { margin-top: 0; }
.video { max-width: 640px; margin: 30px auto; }
.video-container { cursor: pointer; position: relative; padding-bottom: 75%; /* 4:3 */ height: 0; overflow: hidden; }
.video-container iframe, .video-container object, .video-container embed, .video-container video { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; }
.video-caption { font-size: 22px; font-family: "Roboto Condensed", "微軟正黑體", "Microsoft JhengHei", sans-serif; margin-top: 6px; }
.video-caption::before { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f144"; margin-right: 6px; }
.video-item .video:hover .video-caption { color: #d12326; }
@media (max-width: 640px) {
  .video-item { float: none; width: 100%; margin: 0 auto 30px; }
}
.play { cursor: pointer; }
.play .button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: transparent; }
.play .button img { width: 70px; filter: grayscale(1); }
.play .hide { display: none; }
.play .vis { display: block; }
.play:hover .button img { filter: grayscale(0); }

/** contact **/
.contact { margin-bottom: 50px; }
.cont-info, .cont-form { width: 50%; float: left; }
.cont-info { font-size: 18px; line-height: 1.8; padding-right: 50px; }
.cont-comname { font-size: 24px; font-family: "Roboto Bold Condensed", "微軟正黑體", "Microsoft JhengHei", sans-serif; }
.cont-map { margin: 30px 0; }
.req { color: #ff0000; }
.cont-form { font-size: 18px; padding: 6px; }
.cont-form ul { padding-left: 0; margin: 0; list-style: none; }
.form-label { width: 130px; float: left; }
.cont-form .form-group { margin-bottom: 8px; }
.cont-form .form-label { text-align: right; padding: 6px 20px 6px 0; }
.cont-form .range input, .cont-form .range textarea { width: calc(100% - 130px); font-size: 18px; padding: 6px; }
.cont-form .range input#verifycode { width: 200px; }
.form-group .codeimg { display: inline-block; margin: 12px 0; padding-left: 20px; min-height: 40px; } 
.cont-form .btn { padding-left: 130px; }
.cont-form .btn input { width: 200px; background: #fff; border: #d12326 1px solid; color: #d12326; box-shadow: none; font-size: 18px; padding: 8px; transition: all 0.3s ease; cursor: pointer; }
.cont-form .btn input+input { margin-left: 2%; }
.cont-form .btn input:hover { background: #d12326; border: #d12326 1px solid; color: #fff; }
.contact:hover .title-effect { color: #d12326; }
.contact:hover .title-effect::before { transform: scale3d(1, 1, 1); }
.google-maps { position: relative; padding-bottom: 50%; height: 0; overflow: hidden; }
.google-maps iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; }
@media (max-width: 1200px) {
  .cont-form .btn input { width: 48%; }
}
@media (max-width: 1023px) {
  .cont-info, .cont-form { width: 100%; float: none; }
  .cont-info { padding-right: 0; }
  .google-maps { padding-bottom: 25%; }
  .cont-form .btn input { width: 200px; }
}
@media (max-width: 640px) {
  .google-maps { padding-bottom: 50%; }
  .cont-form .btn input { width: 48%; }
}
@media (max-width: 480px) {
  .cont-form .form-label { width: 100%; float: none; display: block; text-align: left; }
  .cont-form .range input, .cont-form .range textarea { width: 100%; }
  .form-group .codeimg, .cont-form .btn { padding-left: 0; }
}
/** sitemap **/
.site-main ul { padding: 0; margin: 0; list-style: none; }
.site-main ul li { width: calc(100% / 7); float: left; padding: 0 6px; }
.site-main ul li a { display: block; border: #d12326 1px solid; text-align: center; font-size: 24px; font-family: "Roboto Condensed", "微軟正黑體", "Microsoft JhengHei", sans-serif; padding: 6px; transition: all 0.3s ease; }
.site-main ul li a:hover { background: #d12326; border: #d12326 1px solid; color: #fff; }
.site-pro { font-size: 16px; font-family: "Roboto Condensed", "微軟正黑體", "Microsoft JhengHei", sans-serif; margin: 30px auto; background: #f3f3f3; padding: 30px; }
.site-pro .title { font-size: 24px; padding-left: 12px; font-family: "Roboto Bold Condensed", "微軟正黑體", "Microsoft JhengHei", sans-serif; }
.site-pro:hover .title-effect { color: #d12326; }
.site-pro:hover .title-effect::before { transform: scale3d(1, 1, 1); }
.site-pro>ul { padding: 0; }
.site-pro>ul>li { float: left; width: 33%; padding: 0px 12px 18px; list-style: none; line-height: 1.4; }
.site-pro>ul>li>a { font-size: 20px; border-bottom: 1px solid; }
.site-pro ul ul { padding-left: 20px; margin-top: 18px; }
.site-pro ul ul ul { padding-left: 20px; margin-top: 6px; margin-bottom: 6px; }
.site-pro ul ul li { list-style: disc; padding-left: 0; margin-bottom: 6px; }
.site-pro ul ul ul li { list-style: circle; }
@media (max-width: 1366px) {
  .site-main ul li { width: 33.33%; margin-bottom: 4px; }
  .site-pro { padding: 15px 2px; }
  .site-pro>ul>li { width: 50%; }
}
@media (max-width: 1023px) {
  .site-main ul li { width: 50%; }
}
@media (max-width: 640px) {
  .site-pro>ul>li { float: none; width: 100%; }
}
@media (max-width: 480px) {
  .site-main ul li { width: 100%; float: none; }
  .site-pro { padding: 15px 2px; }
}
/** footer **/
.footer { background-color: #222222; color: #999999; padding-top: 50px; }
.foot-info { width: 50%; float: left; font-family: "Roboto Condensed", "微軟正黑體", "Microsoft JhengHei", sans-serif; }
.foot-com-name { font-size: 30px; font-weight: bold; color: #ffffff; margin-bottom: 30px; font-family: "Roboto Bold Condensed", "微軟正黑體", "Microsoft JhengHei", sans-serif; }
.foot-info-2 { line-height: 2.4; position: relative; }
.foot-info-2 i { color: #ffffff; font-size: 18px; text-align: center; display: inline-block; width: 18px; margin-right: 12px; }
/* .foot-info-2 .foot-com-tel { float: left; margin-right: 30px; } */
.foot-qr { position: absolute; top: 50px; left: 240px; }
.foot-menu { width: 50%; float: right; font-size: 18px; line-height: 1.8; font-family: "Roboto Light", "微軟正黑體", "Microsoft JhengHei", sans-serif; }
.foot-menu a { transition: color 0.3s ease; line-height: 2; }
.foot-menu a:hover, .foot-menu .active a { color: #ffffff; }
.foot-menu-title { color: #ffffff; font-size: 24px; }
.foot-menu-main { width: 40%; float: left; }
.foot-menu-main ul { list-style: none; padding-left: 0; margin-top: 12px; }
.foot-menu-pro { width: 60%; float: right; }
.foot-menu-pro a { display: block; }
.foot-menu-pro ul { padding-left: 20px; margin-top: 12px; }
.foot-menu-pro ul li { border-bottom: 1px solid #434343; }
.foot-menu-pro ul li a { line-height: 1; padding: 6px 0; }
/* .foot-qr { width: 20%; float: left; margin-top: 100px; padding-left: 40px; } */
.copyright { clear: both; padding: 16px 0; font-size: 14px; color: #666666; font-family: "Roboto Light", "微軟正黑體", "Microsoft JhengHei", sans-serif; }
@media (max-width: 1024px) {
  .foot-com-name { font-size: 24px; margin-bottom: 18px; }
  .foot-info-2 { line-height: 1.6; }
  .foot-info-2>div { margin-bottom: 6px; padding-left: 40px; }
  .foot-info-2 i { display: block; float: left; margin-left: -36px; line-height: 1.4; }
  .foot-info-2 .foot-com-tel { float: none; margin-right: 0; }
  .foot-qr { top: 30px; left: 220px; }
  .copyright { text-align: center; }
}
@media (max-width: 1023px) {
  .foot-qr { top: 30px; left: 180px; }
}
@media (max-width: 768px) {
  .foot-info, .foot-menu { width: 100%; float: none; }
  .foot-info-2 { margin-bottom: 30px; }
  .foot-menu-title { font-size: 20px; }
  .foot-menu-main ul, .foot-menu-pro ul  { margin: 0; }
  .foot-menu-pro ul li a { line-height: 1; padding: 6px 0; }
  .foot-qr { top: 0px; left: 450px; }
}
@media (max-width: 640px) {
  .foot-info-2 { margin-bottom: 80px; }
  .foot-qr { top: 40px; left: 220px; }
}
@media (max-width: 480px) {
  .foot-com-name .com-name-en { font-size: 18px; }
  .foot-menu-title { border-top: 1px solid; margin-top: 24px; padding-top: 8px; }
  .foot-info-2 { margin-bottom: 40px; }
  .foot-info-2 .foot-com-tel { float: none; margin-right: 0; }
  .foot-menu-main, .foot-menu-pro { width: 100%; float: none; }
}
@media (max-width: 414px) {
  .foot-info-2 { margin-bottom: 0px; }
  .foot-qr { position: static; margin-top: 20px; }
}