@charset "UTF-8";
/*
 * CSS Document
 * ==========================================================================
 * 版權所有 2016 鉅潞科技網頁設計公司，並保留所有權利。
 * 網站地址: http://www.grnet.com.tw
 * ==========================================================================
 * $Author: 婷雯 $
 * $Date: 2016-11-23 (三) $
*/

/* 為了避免 Bootstrap 設置的全局盒模型所帶來的影響，可以重置單個頁面元素或覆蓋整個區域的盒模型。 */
.reset-box-sizing, .reset-box-sizing *, .reset-box-sizing *:before, .reset-box-sizing *:after { -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }

@font-face { font-family: "Kanit"; font-style: normal; font-weight: 100; src: url(../fonts/Kanit-Medium.eot) format("eot"); src: url(../fonts/Kanit-Medium.eot?#iefix) format("embedded-opentype"), url(../fonts/Kanit-Medium.woff) format("woff"), url(../fonts/Kanit-Medium.ttf) format("truetype"), url(../fonts/Kanit-Medium.svg#vieworks_mregular) format("svg"); }
html { height: 100%; margin: 0; font-size: 16px; }
body { width: 100%; height: 100%; font-size: 1rem; font-family: Arial, "Microsoft JhengHei"; }

a, a:hover, a:active, a:visited, a:link { text-decoration: none; outline: none; }

*, *:after, *::before { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

img { max-width: 100%; }
.textedit { min-height: 300px; }
.wrapper { width: 100%; height: 100%; padding-top: 100px; }
.emptyLine {
  width: 90%;
  height: 20px;
  margin: 0 auto;
  border-bottom: 1px solid #ccc;
}
p.csr_txt {
  text-align: left;
  width: 90%;
  margin: 0 auto 20px;
}
@media screen and (max-width: 990px) { .wrapper { padding-top: 70px; } }

#scrollUp { position: fixed; z-index: 99999; opacity: 0; bottom: 20px; right: 30px; width: 0; height: 0; text-align: center; background: rgba(245, 13, 26, 0.5); color: #fff; font-size: 1.5rem; -moz-transition: opacity 0.3s ease-in-out; -o-transition: opacity 0.3s ease-in-out; -webkit-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out; }
#scrollUp.show { opacity: 1; width: 45px; height: 45px; line-height: 40px; }

.all-width { max-width: 1400px; padding: 0 25px; margin: 0 auto; }
@media screen and (max-width: 1400px) { .all-width { max-width: 1200px; } }
@media screen and (max-width: 1200px) { .all-width { padding: 0 20px; } }
@media screen and (max-width: 990px) { .all-width { max-width: 768px; } }

.btn-hover { position: relative; overflow: hidden; -moz-transition: ease 0.3s; -o-transition: ease 0.3s; -webkit-transition: ease 0.3s; transition: ease 0.3s; }
.btn-hover i { position: absolute; right: -100%; top: 50%; margin-top: -6px; font-size: 0.75rem; -moz-transition: ease 0.2s; -o-transition: ease 0.2s; -webkit-transition: ease 0.2s; transition: ease 0.2s; }
.btn-hover:hover i { right: 10px; }

.push { width: 100%; overflow: hidden; -moz-transition: ease 0.3s; -o-transition: ease 0.3s; -webkit-transition: ease 0.3s; transition: ease 0.3s; }
.push.open { margin-left: -260px; }
@media screen and (min-width: 991px) { .push.open { margin: 0; } }

/*header */
.header { background: #fff; height: 100px; width: 100%; position: fixed; top: 0; z-index: 9999; -moz-transition: ease 0.3s; -o-transition: ease 0.3s; -webkit-transition: ease 0.3s; transition: ease 0.3s; }
.header h1 { margin: 0; }
.header .logo { width: 80px; margin-top: 10px; float: left; -moz-transition: ease 0.3s; -o-transition: ease 0.3s; -webkit-transition: ease 0.3s; transition: ease 0.3s; }
.header .right-nav { float: right; margin-top: 35px; -moz-transition: ease 0.3s; -o-transition: ease 0.3s; -webkit-transition: ease 0.3s; transition: ease 0.3s; }
.header .right-nav .mobile-btn { vertical-align: top; width: 28px; height: 28px; margin-left: 10px; border: 1px solid #f50d1a; border-radius: 3px; padding: 5px; position: relative; z-index: 9999; display: none; }
.header .right-nav .mobile-btn span { width: 100%; height: 2px; background: #f50d1a; display: block; margin: 2px 0; -moz-transition: ease 0.2s; -o-transition: ease 0.2s; -webkit-transition: ease 0.2s; transition: ease 0.2s; }
.header .right-nav .mobile-btn.open span:nth-child(1) { position: relative; top: 4px; -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); }
.header .right-nav .mobile-btn.open span:nth-child(3) { -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
.header .right-nav .mobile-btn.open span:nth-child(2) { display: none; }
@media screen and (max-width: 990px) { .header .right-nav .mobile-btn { display: inline-block; } }
.header .right-nav a.fb { display: inline-block; vertical-align: top; width: 28px; height: 28px; line-height: 28px; text-align: center; border: 1px solid #eee; color: #8aa7ad; -moz-transition: ease 0.3s; -o-transition: ease 0.3s; -webkit-transition: ease 0.3s; transition: ease 0.3s; }
.header .right-nav a.fb:hover { background: #8aa7ad; color: #fff; }
.header .right-nav .lang { display: inline-block; vertical-align: top; font-size: 0.75rem; text-align: center; margin-left: 5px; -moz-transition: ease 0.3s; -o-transition: ease 0.3s; -webkit-transition: ease 0.3s; transition: ease 0.3s; }
.header .right-nav .lang a { width: 28px; height: 28px; background: #fff; color: #999; border: 1px solid #d0d0d0; border-top: 0; line-height: 28px; display: block; }
.header .right-nav .lang a.on { border: 1px solid #f50d1a; border-top: 1px solid #f50d1a; background: #f50d1a; color: #fff; }
.header .right-nav .lang a:hover { background: #c0000b; border-color: #c0000b; }
.header .right-nav .lang .other { display: none; }
.header .right-nav .lang .other a:hover { background: #ffebec; }
.header.sticky { height: 70px; border-bottom: 1px solid #eee; }
.header.sticky .logo { width: 60px; margin-top: 5px; }
.header.sticky .right-nav { margin-top: 15px; }
@media screen and (max-width: 990px) { .header { height: 70px; border-bottom: 1px solid #eee; }
  .header .logo { width: 60px; margin-top: 5px; }
  .header .right-nav { margin-top: 15px; } }

@media screen and (min-width: 991px) { .menu-mask { display: none; } }

.menu { text-align: center; position: absolute; left: 50%; top: 0; z-index: 9000; width: 800px; height: 100%; margin-left: -400px; }
.menu ul { margin: 0; padding: 0; font-size: 0; height: 100%; }
.menu ul li { float: left; width: calc(100% / 6); height: 100%; display: table; font-size: 1rem; position: relative; }
.menu ul li a { color: #000; display: table-cell; vertical-align: middle; }
.menu ul li span { display: none; }

.menu ul li .dropdown { min-width: 250px; background: rgba(0, 0, 0, 0.8); border: 1px solid rgba(255, 255, 255, 0.3); border-bottom: 0; position: absolute; left: 50%; top: 100%; margin-left: -125px; display: none; height: auto; -moz-transition: ease 0.5s; -o-transition: ease 0.5s; -webkit-transition: ease 0.5s; transition: ease 0.5s; }
.menu ul li .dropdown li { display: block; padding: 10px; width: 100%; height: auto; color: #fff; line-height: 100%; border-bottom: 1px solid rgba(255, 255, 255, 0.3); -moz-transition: ease 0.5s; -o-transition: ease 0.5s; -webkit-transition: ease 0.5s; transition: ease 0.5s; }
.menu ul li .dropdown li:hover { background: rgba(0, 0, 0, 0.8); }
.menu ul li .dropdown li:hover a { color: #f50d1a; }
.menu ul li .dropdown li a { color: #fff; display: block; }

@media screen and (min-width: 990px) { .menu ul li:hover .dropdown { display: block; } }
@media screen and (max-width: 1024px) {
  .menu {
    width: 710px;
    margin-left: -330px;
  }
  .menu ul li {
    width: auto;
    margin: 0 3%;
  }
}
@media screen and (max-width: 990px) { .menu { width: 260px; height: calc(100% - 70px); overflow-y: auto; position: fixed; top: 70px; right: -260px; left: auto; margin: 0; background: #333; display: none; -moz-transition: ease 0.3s; -o-transition: ease 0.3s; -webkit-transition: ease 0.3s; transition: ease 0.3s; }
  .menu.open { right: 0; display: block; }
  .menu ul { height: auto; }
  .menu ul li { display: block; float: none; line-height: 100%; width: 100%; line-height: 40px; border-bottom: 1px solid rgba(255, 255, 255, 0.5); }
  .menu ul li a { color: #fff; display: block; }
  .menu ul li span { display: inline-block; margin-left: 5px; }

  .menu ul li .dropdown { position: static; margin-left: 0; width: 100%; display: none; }
  .menu ul li.open .dropdown { display: block; } }

/*footer */
.footer { background: url(../images/foot-bg.jpg) repeat; font-size: 0; }
.footer .links { display: inline-block; vertical-align: top; padding: 20px; margin: 15px 0; width: 20%; }
.footer .links .tit { color: #f50d1a; font-size: 1.2rem; font-weight: bold; margin-bottom: 6px; }
.footer .links a { display: inline-block; vertical-align: top; margin: 3px 0; color: #fff; font-size: 0.85rem; width: 50%; }
.footer .links a:hover { opacity: 0.8; }
.footer .foot-btm { background: #222; color: #fff; text-align: center; overflow: hidden; padding: 20px 15px; font-size: 0.75rem; }
.footer .foot-btm p:nth-child(1) span { margin: 0 10px; display: inline-block; padding-left: 22px; position: relative;}
.footer .foot-btm p:nth-child(1) span:before { content: ""; width: 15px; height: 15px; margin-right: 10px; margin-bottom: 3px; position: absolute; left: 0; top: 0px; overflow: hidden; }
.footer .foot-btm p:nth-child(1) span:nth-child(1):before { background: url(../images/icons.jpg) no-repeat 0 0; }
.footer .foot-btm p:nth-child(1) span:nth-child(2):before { background: url(../images/icons.jpg) no-repeat -15px 0; }
.footer .foot-btm p:nth-child(1) span:nth-child(3):before { background: url(../images/icons.jpg) no-repeat -30px 0; }
.footer .foot-btm p:nth-child(1) span:nth-child(4):before { background: url(../images/icons.jpg) no-repeat -45px 0; }
.footer .foot-btm p:nth-child(2) { opacity: 0.6; }
.footer .foot-btm a { color: #fff; }
@media screen and (max-width: 990px) {
   .footer { padding-top: 20px; }
  .footer .foot-btm { margin-top: 20px; }
  .footer .links { width: 100%; padding: 15px 15px 10px; margin: 0; }
  .footer .links a { width: auto; margin-right: 20px; }
}
@media screen and (max-width: 480px) {
  .footer {padding: 0;}
  .footer .all-width{display: none;}
  .footer .foot-btm { text-align: left; margin: 0; }
  .footer .foot-btm p:nth-child(1) span{margin: 7px 0; display: block;}
}

/*index */
.banner { width: 100%; height: calc(100vh - 100px); position: relative; overflow: hidden; z-index: 1; -webkit-animation: fadeIn 1s 0.5s ease both; -moz-animation: fadeIn 1s 0.5s ease both; -ms-animation: fadeIn 1s 0.5s ease both; -o-animation: fadeIn 1s 0.5s ease both; animation: fadeIn 1s 0.5s ease both; }
.banner div { width: 100%; height: 100%; }
.banner .item { position: relative; }
.banner .item .word { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 10; text-align: center; color: #fff; display: table; }
.banner .item .word .inner { display: table-cell; vertical-align: middle; }
.banner .item .word .inner .tit1 { font-size: 3.3em; margin-bottom: 0; }
.banner .item .word .inner .tit2 { font-size: 2rem; margin-bottom: 0; }
.banner .item .word .inner .en-word { font-size: 1.2rem; font-family: "Kanit", sans-serif; position: relative; margin-top: 50px; }
.banner .item .word .inner .en-word:before { content: ""; background: #f50d1a; width: 50px; height: 3px; position: absolute; top: -27px; left: 50%; margin-left: -25px; }
.banner .item .word .inner .en-word .cross { width: 13px; height: 13px; position: relative; display: inline-block; }
.banner .item .word .inner .en-word .cross:before, .banner .item .word .inner .en-word .cross:after { content: ""; width: 1px; height: 100%; background: #fff; position: absolute; top: 0; left: 6px; }
.banner .item .word .inner .en-word .cross:before { -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); }
.banner .item .word .inner .en-word .cross:after { -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
.banner .item img { min-width: 100%; min-height: 100%; max-width: inherit; position: absolute; left: 50%; -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); }
.banner .scroll { position: absolute; bottom: 5%; left: 50%; font-size: 0.75rem; z-index: 10; margin-left: -30px; border: 1px solid #fff; color: #fff; line-height: 120%; text-align: center; border-radius: 30px; padding: 20px 8px 10px 8px; text-shadow: 0 0 3px rgba(0, 0, 0, 0.5); -webkit-animation: fadeInDown 2.5s 0.5s infinite both; -moz-animation: fadeInDown 2.5s 0.5s infinite both; -ms-animation: fadeInDown 2.5s 0.5s infinite both; -o-animation: fadeInDown 2.5s 0.5s infinite both; animation: fadeInDown 2.5s 0.5s infinite both; }
.banner .scroll i { font-size: 1.5rem; }
.banner .scroll:before { content: ""; position: absolute; top: -10px; left: 50%; width: 1px; height: 20px; background: #fff; }
.banner .slick-dots { position: absolute; top: 50%; right: 20px; z-index: 10; margin: 0; padding: 0; list-style: none; }
.banner .slick-dots li { position: relative; display: block; margin: 5px; padding: 0; cursor: pointer; }
.banner .slick-dots li button { border: 0; background: #fff; display: block; height: 0; width: 0; border-radius: 50%; outline: none; font-size: 0px; padding: 6px; cursor: pointer; box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5) inset; -moz-transition: ease 0.5s; -o-transition: ease 0.5s; -webkit-transition: ease 0.5s; transition: ease 0.5s; }
.banner .slick-dots li.slick-active button { background: #f50d1a; padding: 12px 6px; border-radius: 15px; }
@media screen and (max-width: 900px) {
  /* .banner { height: calc(100vh - 70px); } */
  .banner { height: 500px; }
  .banner .item .word .inner{font-weight: bold; padding: 0 20px;}
  .banner .item .word .inner .tit1 { font-size: 2.5rem; }
  .banner .item .word .inner .tit2 { font-size: 1.5rem; }
  .banner .item .word .inner .en-word { font-size: 1rem; }
  .banner .item img{ height: 100%;}
}
@media screen and (max-width: 640px) {
  .banner { height: 250px; }
  .banner .item .word .inner .tit1 { font-size: 1.6rem; margin-bottom: 5px; }
  .banner .item .word .inner .tit2 { font-size: 1rem; }
  .banner .item .word .inner .en-word { display: none; }
  .banner .slick-dots { right: 10px; top: 40%;}
  .banner .scroll { display: none; }
}
.section1 { background: url(../images/index-bg1.jpg) repeat; padding: 50px 0; }
.section1 .tit { color: #f50d1a; font-size: 2.5em; margin-top: 50px; margin-bottom: 15px; }
.section1 .readmore { display: block; color: #f50d1a; width: 130px; border: 1px solid #f50d1a; border-radius: 20px; padding: 10px; text-align: center; margin-top: 30px; font-size: 1rem; overflow: hidden; }
.section1 .readmore:hover { background: #f9e0e0; }
.section1 .section-wrap { margin-bottom: 100px; }
.section1 .section-wrap .left-img { float: left; position: relative; }
.section1 .section-wrap .left-img:after { content: ""; position: absolute; width: 70%; height: 110%; background: #ff3535; left: -15px; top: 20px; z-index: 0; }
.section1 .section-wrap .left-img img { position: relative; z-index: 2; }
.section1 .section-wrap .words { float: right; width: calc(100% - 660px); padding-left: 50px; }
.section1 .section-wrap .words .sec-tit { color: #444; font-size: 1.5rem; margin-top: 5px; }
.section1 .section-wrap .words .describe { font-size: 1rem; color: #666; margin: 30px 0; line-height: 200%; }
.section1 .section-wrap.news-wrap .right-img { float: right; position: relative; }
.section1 .section-wrap.news-wrap .right-img img { position: relative; z-index: 2; }
.section1 .section-wrap.news-wrap .right-img:after { content: ""; width: 80%; height: 95%; position: absolute; top: 50px; right: -50px; background: #b0c4c8; }
.section1 .section-wrap.news-wrap .words { float: left; width: calc(100% - 520px); padding-right: 50px; }
.section1 .section-wrap.news-wrap .words .list { margin-bottom: 30px; }
.section1 .section-wrap.news-wrap .words .list .news-tit { font-size: 1.2rem; line-height: 150%; color: #000; }
.section1 .section-wrap.news-wrap .words .list .news-describe { color: #666; font-size: 0.95rem; line-height: 160%; }
@media screen and (max-width: 1200px) { .section1 .section-wrap .left-img { width: 55%; }
  .section1 .section-wrap .words { width: 45%; }
  .section1 .section-wrap .words .tit { margin-top: 20px; margin-bottom: 15px; }
  .section1 .section-wrap.news-wrap .right-img { width: 50%; }
  .section1 .section-wrap.news-wrap .words { width: 50%; } }
@media screen and (max-width: 990px) { .section1 .section-wrap { max-width: 768px; margin: auto; }
  .section1 .section-wrap .left-img { width: 100%; margin-bottom: 30px; }
  .section1 .section-wrap .left-img img { width: 100%; }
  .section1 .section-wrap .left-img:after { width: 70%; height: 100%; }
  .section1 .section-wrap .words { width: 100%; padding: 0; }
  .section1 .section-wrap.news-wrap { margin-top: 50px; }
  .section1 .section-wrap.news-wrap .right-img { display: none; }
  .section1 .section-wrap.news-wrap .words { width: 100%; float: none; padding: 0; } }
@media screen and (max-width: 768px) { .section1 .section-wrap { margin: 0 30px 40px; }
  .section1 .section-wrap .words .tit { font-size: 1.8rem; }
  .section1 .section-wrap .words .sec-tit { font-size: 1.3rem; }
  .section1 .section-wrap .words .describe { margin: 0; font-size: 0.9rem; line-height: 20px; } }
@media screen and (max-width: 480px) { .section1 .section-wrap { margin: 0px; }
  .section1 .section-wrap .words .tit { font-size: 1rem; }
  .section1 .section-wrap .words .sec-tit { font-size: 1rem; }
   }

.section2 { height: 620px; overflow: hidden; }
@media screen and (max-width: 990px) { .section2 { height: auto; } }
.section2 .col3 { width: 33.33%; text-align: center; float: left; }
.section2 .col3 .inner { color: #fff; max-width: 300px; margin: 100px auto; font-size: 0.95rem; line-height: 150%; }
.section2 .col3 .inner .img { width: 100%; height: 300px; border-radius: 50%; position: relative; overflow: hidden; }
.section2 .col3 .inner .tit { color: #f50d1a; font-size: 1.3rem; font-weight: bold; }
.section2 .col3 .inner:hover .img:before { content: ""; background: rgba(255, 255, 255, 0.6); position: absolute; left: 0; top: 0; right: 0; bottom: 0; border-radius: 50%; z-index: 2; -webkit-animation: fadeOut 1s 0.1s ease both; -moz-animation: fadeOut 1s 0.1s ease both; -ms-animation: fadeOut 1s 0.1s ease both; -o-animation: fadeOut 1s 0.1s ease both; animation: fadeOut 1s 0.1s ease both; }
@media screen and (max-width: 1200px) { .section2 .col3 .inner .img { width: 250px; height: 250px; margin: auto; } }
@media screen and (max-width: 990px) { .section2 .col3 .inner { padding: 0 20px; }
  .section2 .col3 .inner .img { width: 200px; height: 200px; } }
@media screen and (max-width: 768px) { .section2 .col3 { width: 100%; float: none; text-align: left; }
  .section2 .col3.in-view { -webkit-animation: none 1s 0.2s ease both; -moz-animation: none 1s 0.2s ease both; -ms-animation: none 1s 0.2s ease both; -o-animation: none 1s 0.2s ease both; animation: none 1s 0.2s ease both; }
  .section2 .col3 .inner { max-width: inherit; overflow: hidden; margin: 30px 0; }
  .section2 .col3 .inner .img { float: left; margin-right: 20px; width: 150px; height: 150px; } }
@media screen and (max-width: 480px) { .section2 .col3 { text-align: center; }
  .section2 .col3 .inner .img { float: none; margin: auto; } }

.section3 { background: #fff; padding: 50px 0 80px; }
.section3 .title { position: relative; text-align: center; max-width: 800px; margin: 0 auto 40px; padding-bottom: 50px; }
.section3 .title h2 { font-size: 2rem; color: #000; }
.section3 .title p { color: #777; font-size: 1rem; line-height: 180%; }
.section3 .title:after { content: ""; width: 1px; height: 30px; background: #f50d1a; position: absolute; left: 50%; bottom: 10px; z-index: 3; }
@media screen and (max-width: 768px) { .section3 .title { padding-bottom: 0; }
  .section3 .title:after { display: none; } }
.section3 .app-list .box .inner .words { -moz-transform: skew(8deg); -ms-transform: skew(8deg); -webkit-transform: skew(8deg); transform: skew(8deg); }
.section3 .app-list .box .inner .img { left: -24px; -moz-transform: skew(8deg); -ms-transform: skew(8deg); -webkit-transform: skew(8deg); transform: skew(8deg); }
.section3 .app-list .box .inner:hover .img { -moz-transform: skew(8deg) scale(1.1); -ms-transform: skew(8deg) scale(1.1); -webkit-transform: skew(8deg) scale(1.1); transform: skew(8deg) scale(1.1); }

.app-list { margin: 0 -10px; font-size: 0; position: relative; }
.app-list .slick-list { overflow: visible; }
.app-list .prev, .app-list .next { position: absolute; top: 50%; width: 30px; height: 30px; overflow: hidden; color: #fff; opacity: 0.7; background-color: #f50d1a; font-size: 1.3rem; line-height: 30px; text-align: center; border: 1px solid #f50d1a; border-radius: 50%; z-index: 10; -moz-transition: background 0.3s ease-in-out; -o-transition: background 0.3s ease-in-out; -webkit-transition: background 0.3s ease-in-out; transition: background 0.3s ease-in-out; }
.app-list .prev { left: 0; }
.app-list .next { right: 0; }
.app-list .box { padding: 0 10px; width: calc(100%/6 - 1px); font-size: 1rem; display: inline-block; overflow: hidden; text-align: center; }
.app-list .box .inner { width: 100%; position: relative; display: block; padding-bottom: 155%; overflow: hidden; }
.app-list .box .inner:before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; right: 0; z-index: 1; background: rgba(0, 0, 0, 0.6); -moz-transition: ease 0.35s; -o-transition: ease 0.35s; -webkit-transition: ease 0.35s; transition: ease 0.35s; }
.app-list .box .inner .words { position: absolute; left: 0; top: 0; bottom: 0; right: 0; display: block; z-index: 2; height: 50px; color: #fff; font-size: 1.1rem; text-align: center; margin: auto; }
.app-list .box .inner .words img { display: inline-block; }
.app-list .box .inner .words span { display: block; margin-top: 10px; }
.app-list .box .inner .img { position: absolute; left: 0; top: 0; bottom: 0; right: 0; height: 100%; max-width: inherit; margin: auto; -moz-transition: ease 0.35s; -o-transition: ease 0.35s; -webkit-transition: ease 0.35s; transition: ease 0.35s; }
.app-list .box .inner:hover:before { background: rgba(0, 0, 0, 0.3); }
.app-list .box .inner:hover .img { -moz-transform: scale(1.1); -ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); }

/*page-primary */
.page-banner { height: 480px; width: 100%; display: table; text-align: center; }
.page-banner .inner { display: table-cell; vertical-align: middle; }
.page-banner .inner .tit { font-size: 3rem; color: #fff; font-weight: bold; margin: 0; }
.page-banner .inner .tit:after { content: ""; width: 40px; height: 3px; background: #f50d1a; display: block; margin: 15px auto; }
.page-banner .inner p { font-size: 1.2rem; color: #fff; }
@media screen and (max-width: 990px) { .page-banner { height: 380px; } }
@media screen and (max-width: 768px) { .page-banner { height: 320px; } }
@media screen and (max-width: 640px) { .page-banner { height: 250px; } }
@media screen and (max-width: 480px) { .page-banner { height: 150px; }
  .page-banner .inner .tit { font-size: 1.8rem; } }

.bread-crumb { border-bottom: 1px solid #ebebeb; padding: 0; padding-bottom: 10px; margin: 10px 0; color: #999; font-size: 0.9rem; list-style: none; }
.bread-crumb li { display: inline-block; margin: 5px; }
.bread-crumb li a { color: #999; }
.bread-crumb li a:hover { color: #f50d1a; }

/*頁碼 */
.p-pager { text-align: center; font-size: 0.938rem; }
.p-pager .pagination > li > a { color: #444; }
.p-pager .pagination > li.disabled > a, .p-pager .pagination > li.disabled:hover > a, .p-pager .pagination > li.disabled:focus > a { color: #eee; }
.p-pager .pagination > .active > a { color: #fff; }
.p-pager .pagination > .active > a, .p-pager .pagination > .active > a:focus, .p-pager .pagination > .active > a:hover { background: #333; border: 1px solid #751f69; }

/*No-Data */
.no-data { text-align: center; margin: 150px 0; font-size: 1rem; width: 100%; }

/*back-btn */
.back { text-align: center; font-size: 1rem; color: #f50d1a; border: 1px solid #f50d1a; position: relative; padding: 10px; padding-left: 20px; margin: 30px auto; width: 150px; display: block; -moz-transition: ease 0.3s; -o-transition: ease 0.3s; -webkit-transition: ease 0.3s; transition: ease 0.3s; }
.back i { display: inline-block; margin-left: 10px; }
.back:hover { background: #f50d1a; color: #fff; }

.mobile-tab { width: 100%; background: #f50d1a; color: #fff !important; text-align: center; padding: 10px 15px; display: none; font-size: 1rem; }
.mobile-tab i { display: inline-block; vertical-align: middle; margin-left: 5px; margin-bottom: 5px; font-size: 0.9rem; }

/*news */
.news { display: table; width: 100%; margin: 40px 0; border-top-right-radius: 10px; border-top-left-radius: 10px; border-collapse: collapse; overflow: hidden; }
.news .news-row { display: table-row; border-bottom: 1px dotted #ddd; }
.news .news-row .news-cell { display: table-cell; text-align: center; padding: 10px; font-size: 1rem; padding: 15px 0; }
.news .news-row .news-cell:nth-child(1) { width: 25%; }
.news .news-row .news-cell:nth-child(1):after { content: ""; width: 1px; height: 20px; background: #ddd; float: right; margin-right: 20px; }
.news .news-row .news-cell:nth-child(2) { width: 75%; text-align: left; }
@media screen and (max-width: 768px) { .news .news-row .news-cell:nth-child(2):after { display: none; } }
@media screen and (max-width: 480px) { .news .news-row .news-cell { width: 100% !important; text-align: left; padding: 0px; }
  .news .news-row .news-cell:nth-child(1) { display: block; padding: 10px 0 3px; font-size: 0.9rem; }
  .news .news-row .news-cell:nth-child(1):after { display: none; }
  .news .news-row .news-cell:nth-child(2) { display: block; padding-bottom: 10px; } }
.news .news-row .news-cell .date { color: #f50d1a; }
.news .news-row .news-cell a { color: #666; }
.news .news-row .news-cell a:hover { color: #999; }
.news .news-head { background: linear-gradient(90deg, #e8e8e8 0%, #ffffff 100%); background: -moz-linear-gradient(90deg, #E8E8E8 0%, #FFFFFF 100%); background: -webkit-linear-gradient(90deg, #E8E8E8 0%, #FFFFFF 100%); background: -o-linear-gradient(90deg, #E8E8E8 0%, #FFFFFF 100%); border: 1px solid #E8E8E8; }
.news .news-head .news-cell { font-size: 1.2rem !important; }
.news .news-head .news-cell:nth-child(2) { text-align: center !important; }
@media screen and (max-width: 480px) { .news .news-head .news-cell { line-height: 40px; padding: 0 !important; }
  .news .news-head .news-cell:nth-child(1) { display: none; } }

.news-detail { margin-bottom: 50px; }
.news-detail .title { font-size: 1.5rem; padding: 20px; margin-bottom: 30px; text-align: center; position: relative; }
.news-detail .title .date { color: #f50d1a; padding: 15px 20px; text-align: center; display: block; font-size: 1rem; }
.news-detail .title:after { content: ""; position: absolute; left: 50%; bottom: -65px; width: 1px; height: 70px; background: #f50d1a; }
.news-detail .edit { background: #eee; color: #666; padding: 50px; font-size: 1rem; line-height: 200%; }
@media screen and (max-width: 480px) { .news-detail .title { margin-bottom: 15px; }
  .news-detail .title:after { height: 40px; bottom: -30px; }
  .news-detail .edit { padding: 30px 20px; } }

/*products */
.product-wrap { margin: 50px 0; }
@media screen and (max-width: 990px) { .product-wrap { max-width: 768px; margin: 50px auto; } }
.product-wrap .side-nav { width: 280px; float: left; font-size: 1rem; }
.product-wrap .side-nav ul { padding: 0; margin: 0; }
.product-wrap .side-nav ul li { list-style: none; }
.product-wrap .side-nav ul li a { display: block; }
.product-wrap .side-nav ul li .p-nav, .product-wrap .side-nav ul li .p-nav-nodrop { padding: 10px; color: #000; font-weight: bold; border-bottom: 1px solid #ececec; }
.product-wrap .side-nav ul li .p-nav:hover, .product-wrap .side-nav ul li .p-nav-nodrop:hover { background: #ddd; }
.product-wrap .side-nav ul li.current .p-nav, .product-wrap .side-nav ul li.current .p-nav-nodrop { background: #f50d1a; color: #fff; }
.product-wrap .side-nav ul li.current .dropdown { display: block; }
.product-wrap .side-nav ul li .dropdown { display: none; font-size: 0.9rem; }
.product-wrap .side-nav ul li .dropdown li a { color: #666; padding: 7px 10px; }
.product-wrap .side-nav ul li .dropdown li a:before { content: ""; display: inline-block; vertical-align: middle; width: 8px; height: 1px; background: #666; margin-right: 5px; }
.product-wrap .side-nav ul li .dropdown li a:hover, .product-wrap .side-nav ul li .dropdown li a.current { background: #f4f4f4; }
@media screen and (max-width: 1200px) { .product-wrap .side-nav { width: 30%; padding-right: 20px; } }
@media screen and (min-width: 991px) { .product-wrap .side-nav > ul { display: block !important; } }
@media screen and (max-width: 990px) { .product-wrap .side-nav { width: 100%; padding: 0; margin-bottom: 30px; }
  .product-wrap .side-nav > ul { height: 0; overflow: hidden; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; }
  .product-wrap .side-nav > ul.active { height: auto; }
  .product-wrap .side-nav ul li.current .p-nav, .product-wrap .side-nav ul li.current .p-nav-nodrop { background: #fff; color: #f50d1a; }
  .product-wrap .side-nav .mobile-tab { display: block; } }
.product-wrap .product-view { width: calc(100% - 330px); float: right; /*產品編輯器樣式 */ /*產品諮詢 */ }
@media screen and (max-width: 1200px) { .product-wrap .product-view { width: 70%; } }
@media screen and (max-width: 990px) { .product-wrap .product-view { width: 100%; } }
.product-wrap .product-view .notice { background: url(../images/notice_bg.jpg) repeat; padding: 15px 10px; padding-left: 50px; color: #333; font-size: 1rem; margin-bottom: 40px; position: relative; }
.product-wrap .product-view .notice i { color: #e9494f; font-size: 1.3rem; position: absolute; left: 15px; top: 50%; margin-top: -10px; }
@media screen and (max-width: 768px){.product-wrap .product-view .notice{ font-size: 0.8rem; } }
.product-wrap .product-view .p_app .tit { font-size: 1.3rem; color: #333; font-weight: bold; margin-bottom: 15px; }
.product-wrap .product-view .p_app .tit:before { content: ""; display: block; width: 30px; height: 1px; background: #f50d1a; margin-bottom: 8px; }
.product-wrap .product-view .p_app .box .inner { padding-bottom: 140%; }
@media screen and (max-width: 990px) {.product-wrap .product-view .p_app .app-list .words { font-size: 0.87rem; }}
@media screen and (max-width: 640px) {.product-wrap .product-view .p_app .app-list .box {width: calc(100%/3); }}
.product-wrap .product-view .p-list{width: 100%; position: relative; padding-bottom: 59%; overflow: hidden;}
.product-wrap .product-view .p-list .upper .box .inner{position: absolute; left:0; top: 0; bottom:0; right: 0; padding: 20px; color: #fff;}
@media screen and (min-width: 641px){
.product-wrap .product-view .p-list .img{min-width: 100%; position: absolute; left:0; top: 0; bottom: 0; right: 0; z-index: 1;}
.product-wrap .product-view .p-list .upper{position: absolute; left: 0; top: 0; bottom: 0; right: 0; z-index: 5;}
.product-wrap .product-view .p-list .upper .box{width: 20%; background: rgba(75, 75, 75, 0.7); position: absolute; padding-bottom: 19.65%; background: rgba(75, 75, 75, 0.7);}
.product-wrap .product-view .p-list .upper .box .inner{padding: 30px 20px; color: #fff;}
.product-wrap .product-view .p-list .upper .box:nth-child(1){left: 0; top:0;}
.product-wrap .product-view .p-list .upper .box:nth-child(2){left: 0; bottom:0;}
.product-wrap .product-view .p-list .upper .box:nth-child(3){left: 20.1%; top: 33.33%;}
.product-wrap .product-view .p-list .upper .box:nth-child(4){left: 40.2%; bottom:0;}
.product-wrap .product-view .p-list .upper .box:nth-child(5){left: 60.3%; bottom:0;}
.product-wrap .product-view .p-list .upper .box.current{background: rgba(255, 255, 255, 0.7);}
.product-wrap .product-view .p-list .upper .box.current .inner{color: #000;}
}
@media screen and (max-width: 640px){
.product-wrap .product-view .p-list .upper .box{width: calc(50% - 1px); background: rgba(200, 200, 200, 0.3) !important; margin-right: 1px; margin-bottom: 1px; height: 150px; position: relative; float: left;}
.product-wrap .product-view .p-list .upper .box:nth-child(1){width: 100%;}
.product-wrap .product-view .p-list .upper .box .inner{color: #000; font-size: 1.3rem;}
.product-wrap .product-view .p-list .upper .box.current
{background: rgba(200, 200, 200, 0.7);}
}

.product-wrap .product-view .product_styl { width: 100%; padding-bottom: 61.5%; position: relative; margin-bottom: 40px; overflow: hidden; }
.product-wrap .product-view .product_styl .img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; padding-right: 100px; }
.product-wrap .product-view .product_styl .img:before{content: ""; position: absolute; bottom: 0; left:0; right: 0; height: 300px; z-index: 2; background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 80%);
background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%);
background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 );
}
.product-wrap .product-view .product_styl .word-box { position: absolute; z-index: 2; top: 35%; right: 0; width: 530px; padding: 40px 50px; text-align: justify; background: linear-gradient(45deg, #222222 25%, #555555 75%); background: -moz-linear-gradient(45deg, #222222 25%, #555555 75%); background: -webkit-linear-gradient(45deg, #222222 25%, #555555 75%); background: -o-linear-gradient(45deg, #222222 25%, #555555 75%); }
.product-wrap .product-view .product_styl .word-box .tit { font-size: 1.6rem; color: #fff; }
.product-wrap .product-view .product_styl .word-box .tit:after { content: ""; width: 50px; height: 2px; background: #f50d1a; display: block; margin: 15px 0; }
.product-wrap .product-view .product_styl .word-box .txt { color: #bbb; font-size: 0.95rem; line-height: 180%; height: 150px; padding-right: 20px; margin-right: -20px; }
@media screen and (max-width: 1200px) { .product-wrap .product-view .product_styl { min-height: inherit; padding-bottom: 0; }
  .product-wrap .product-view .product_styl .word-box { padding: 35px; width: 65%; float: right; margin-top: 15%; position: relative; } }
@media screen and (max-width: 768px) { .product-wrap .product-view .product_styl { padding: 0; }
  .product-wrap .product-view .product_styl .img { padding-right: 0; width: 100%; z-index: -1; }
  .product-wrap .product-view .product_styl .word-box { position: static; padding: 50px; width: 90%; margin: 30% auto 0; float: none; }
  .product-wrap .product-view .product_styl .word-box .txt { height: auto; padding-right: 0px; margin-right: 0px; }
}
@media screen and (max-width: 640px) { .product-wrap .product-view .product_styl .word-box { padding: 20px 35px; }
  .product-wrap .product-view .product_styl .word-box .tit { font-size: 1.2rem; } }
.product_stl2 { margin: 0 -5px; margin-bottom: 40px; overflow: hidden; font-size: 0; }
.product_stl2 .title { color: #000; font-size: 1rem; font-weight: bold; text-align: justify; margin-bottom: 20px; }
.product_stl2 .title:before { content: ""; width: 30px; height: 1px; margin-bottom: 10px; background: #f50d1a; display: block; }
.product_stl2 .col3 { width: 33.33%; padding: 0 5px; font-size: 1rem; display: inline-block; vertical-align: top; }
.product_stl2 .col3 img { width: 100%; }
.product_stl2 .col3 .word-box { color: #555; padding-right: 10px; text-align: justify; line-height: 160%; }
.product_stl2 .col3 .word-box .tit { font-weight: bold; margin-bottom: 5px; }
.product_stl2 .col3 .word-box .red { color: #f50d1a; font-weight: bold; margin-bottom: 0; }
@media screen and (max-width: 480px) { .product_stl2 .col3 { width: 90%; margin: 0 auto; margin-bottom: 15px; float: none; display: block; } }
.product_stl3 { margin-bottom: 20px; overflow: hidden; font-size: 0; }
.product_stl3 .word-box { width: 48%; font-size: 0.95rem; color: #555; display: inline-block; vertical-align: top; margin-bottom: 30px; text-align: justify; line-height: 180%; }
.product_stl3 .word-box:before { content: ""; width: 30px; height: 1px; background: #f50d1a; display: block; }
.product_stl3 .word-box .tit { font-size: 1rem; font-weight: bold; }
.product_stl3 .word-box .red { color: #f50d1a; }
.product_stl3 .word-box:nth-child(2n) { float: right; }
@media screen and (max-width: 480px) { .product_stl3 .word-box { width: 90%; float: none !important; margin: auto; margin-bottom: 20px; } }
.product_stl4 { margin-bottom: 40px; }
.product_stl4 .word-box { font-size: 1rem; color: #555; line-height: 180%; }
.product_stl4 .word-box .tit { color: #000; font-size: 1.5rem; font-weight: bold; text-align: justify; margin-bottom: 20px; margin-top: 0; }
.product_stl4 .word-box .tit:before { content: ""; width: 30px; height: 1px; background: #f50d1a; display: block; margin-bottom: 10px; }
.product-wrap .product-view img{height: auto !important;}
.table2{width: 100%; margin-bottom: 40px;}
.table2 td{text-align: center; vertical-align: top; padding: 0 10px;}
.table2 td .word{background: url(../images/word.png) no-repeat center bottom; position: relative; z-index: 2; max-width: 263px; height: 73px; margin: -20px auto 0; color: #fff;}
.table2 td .word em{display: block; font-size: 1.2rem; font-weight: bold; padding: 7px;}
.table2 td .box{margin-bottom: 40px;}
@media screen and (max-width: 640px){
  .table2{width: 100%; margin-bottom: 30px;}
  .table2.col3{margin-bottom: 0;}
  .table2.col3 td{display: block; padding-bottom: 30px;}
  .table2 td{padding: 0 5px;}
  .table2 td .box{margin-bottom: 30px;}
}
.product-wrap .product-view .inquiry { margin-bottom: 40px; }
.product-wrap .product-view .inquiry .form-row { font-size: 0; border: 1px solid #eee; display: table; width: 100%; margin-top: -1px; }
.product-wrap .product-view .inquiry .form-row .must { color: #f50d1a; margin-right: 5px; }
.product-wrap .product-view .inquiry .form-row .tit, .product-wrap .product-view .inquiry .form-row .content { display: table-cell; vertical-align: middle; font-size: 0.95rem; padding: 10px; }
.product-wrap .product-view .inquiry .form-row .tit { width: 170px; text-align: right; background: #eee; }
.product-wrap .product-view .inquiry .form-row .content { width: calc(100% - 170px); color: #777; }
.product-wrap .product-view .inquiry .form-row .box-stl { width: 80%; border: 1px solid #ddd; padding: 10px; outline: none; -moz-transition: ease 0.3s; -o-transition: ease 0.3s; -webkit-transition: ease 0.3s; transition: ease 0.3s; }
.product-wrap .product-view .inquiry .form-row .box-stl.stl2 { height: 150px; }
.product-wrap .product-view .inquiry .form-row .box-stl.stl3 { width: 200px; float: left; margin-right: 5px; }
.product-wrap .product-view .inquiry .form-row .box-stl:focus { border: 1px solid #f50d1a; }
@media screen and (max-width: 1200px) { .product-wrap .product-view .inquiry .form-row .box-stl { width: 100%; } }
@media screen and (max-width: 990px) { .product-wrap .product-view .inquiry .form-row .tit { width: 120px; }
  .product-wrap .product-view .inquiry .form-row .content { width: calc(100% - 120px); } }
@media screen and (max-width: 480px) { .product-wrap .product-view .inquiry .form-row .tit, .product-wrap .product-view .inquiry .form-row .content { width: 100%; padding: 5px; text-align: center; display: block; }
  .product-wrap .product-view .inquiry .form-row .content { padding: 10px; }
  .product-wrap .product-view .inquiry .form-row .box-stl.stl3 { width: 100%; margin-bottom: 10px; } }
@media screen and (max-width: 640px) { .product-wrap .product-view .inquiry .button .btn-stl { width: 100%; } }
.product-wrap.app-wrap .title { position: relative; text-align: center; max-width: 800px; margin: 0 auto 40px; }
.product-wrap.app-wrap .title h2 { font-size: 1.8rem; color: #f50d1a; margin-bottom: 15px; }
.product-wrap.app-wrap .title p { color: #777; line-height: 180%; }
.product-wrap.app-wrap .app-list { text-align: center; }
.product-wrap.app-wrap .app-list .box { margin: 30px 0; position: relative; }
.product-wrap.app-wrap .app-list .box .img img { max-width: inherit; height: 100%; }
.product-wrap.app-wrap .app-list .box .hover-in { display: block; position: absolute; left: 0; top: 0; bottom: 0; right: 0; z-index: 10; background: rgba(0, 0, 0, 0.85); color: #fff; padding: 15px 20px; font-size: 0.9rem; line-height: 180%; text-align: left; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; -moz-transform: translateY(100%); -ms-transform: translateY(100%); -webkit-transform: translateY(100%); transform: translateY(100%); }
.product-wrap.app-wrap .app-list .box .hover-in .in-tit { color: #f50d1a; font-size: 1.1rem; font-weight: bold; margin-top: 20%; text-align: center; }
.product-wrap.app-wrap .app-list .box .hover-in .in-tit:after { content: ""; width: 20px; height: 1px; background: #f50d1a; margin: 8px auto 10px; display: block; }
.product-wrap.app-wrap .app-list .box:hover .words { -moz-transform: scale(0) skew(8deg); -ms-transform: scale(0) skew(8deg); -webkit-transform: scale(0) skew(8deg); transform: scale(0) skew(8deg); }
.product-wrap.app-wrap .app-list .box:hover .hover-in { -moz-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); }
@media screen and (max-width: 1400px) { .product-wrap.app-wrap .app-list .box .hover-in { line-height: 150%;}
  .product-wrap.app-wrap .app-list .box .hover-in .in-tit { margin-top: 0; }
  .product-wrap.app-wrap .app-list .box .hover-in .in-tit:after { margin: 2px auto; } }
@media screen and (min-width: 1201px) { .product-wrap.app-wrap .app-list .box { -moz-transform: skew(-8deg) translate(0, -25px); -ms-transform: skew(-8deg) translate(0, -25px); -webkit-transform: skew(-8deg) translate(0, -25px); transform: skew(-8deg) translate(0, -25px); }
  .product-wrap.app-wrap .app-list .box .inner .words { -moz-transition: -moz-transform 0.5s ease; -o-transition: -o-transform 0.5s ease; -webkit-transition: -webkit-transform 0.5s ease; transition: transform 0.5s ease; -moz-transform: scale(1) skew(8deg); -ms-transform: scale(1) skew(8deg); -webkit-transform: scale(1) skew(8deg); transform: scale(1) skew(8deg); }
  .product-wrap.app-wrap .app-list .box .inner .img { left: -24px; -moz-transform: skew(8deg); -ms-transform: skew(8deg); -webkit-transform: skew(8deg); transform: skew(8deg); }
  .product-wrap.app-wrap .app-list .box .inner:hover .img { -moz-transform: skew(8deg) scale(1.1); -ms-transform: skew(8deg) scale(1.1); -webkit-transform: skew(8deg) scale(1.1); transform: skew(8deg) scale(1.1); }
  .product-wrap.app-wrap .app-list .box:nth-child(even) { -moz-transform: skew(-8deg) translate(0, 25px); -ms-transform: skew(-8deg) translate(0, 25px); -webkit-transform: skew(-8deg) translate(0, 25px); transform: skew(-8deg) translate(0, 25px); } }
@media screen and (max-width: 1200px) {
  .product-wrap.app-wrap .product_styl .word-box { width: 50%; }
  .product-wrap.app-wrap .app-list { margin: 0 -30px; }
  .product-wrap.app-wrap .app-list .box { width: 33.33%; padding: 0 30px; }
  .product-wrap.app-wrap .app-list .box .inner { padding-bottom: 145%; } }
@media screen and (max-width: 990px) {
  .product-wrap.app-wrap .app-list { margin: 0 -20px; }
  .product-wrap.app-wrap .app-list .box { width: 50%; margin: 0; margin-bottom: 40px; padding: 0 20px; vertical-align: top; overflow: visible; }
  .product-wrap.app-wrap .app-list .box .inner { padding: 0; }
  .product-wrap.app-wrap .app-list .box .inner:before { display: none; }
  .product-wrap.app-wrap .app-list .box .inner .words { display: none; }
  .product-wrap.app-wrap .app-list .box .inner .img { position: static; height: auto; }
  .product-wrap.app-wrap .app-list .box .inner .img img { width: 100%; height: auto; }
  .product-wrap.app-wrap .app-list .box .inner:hover .img { -moz-transform: none; -ms-transform: none; -webkit-transform: none; transform: none; }
  .product-wrap.app-wrap .app-list .box .hover-in { position: static; text-align: center; -moz-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } }
@media screen and (max-width: 768px) {
  .product-wrap.app-wrap .product_styl .word-box { float: none; width: 100%; margin-top: 65%; }
}
@media screen and (max-width: 640px) {
  .product-wrap.app-wrap .title{margin: 20px 0; }
  .product-wrap.app-wrap .title h2 { font-size: 1.5rem;}
  .product-wrap.app-wrap .title p { font-size: 0.85rem; }
  .product-wrap.app-wrap .app-list { margin: 0 -10px; }
  .product-wrap.app-wrap .app-list .box{padding: 0 10px;}
}
@media screen and (max-width: 480px) {
  .product-wrap.app-wrap .app-list { margin: 0; }
  .product-wrap.app-wrap .app-list .box { width: 100%; padding: 0; }
  .product-wrap.app-wrap .app-list .box .inner .hover-in .in-tit { margin-top: 10%; }
  .product-wrap.app-wrap .app-list .box .inner .img, .product-wrap.app-wrap .app-list .box .inner .hover-in { display: block; width: 100%; }
  .product-wrap.app-wrap .product_stl2 .col3 { width: 100% !important; }
}
.product-wrap.app-wrap .detail-tit { font-size: 1.5rem; border-bottom: 1px dotted #bbb; padding-bottom: 5px; position: relative; font-weight: bold; }
.product-wrap.app-wrap .detail-tit:after { content: ""; position: absolute; bottom: -1px; left: 0; width: 55px; height: 2px; background: #f50d1a; }
.product-wrap.app-wrap .detail-list { width: 100%; overflow: hidden; }
.product-wrap.app-wrap .detail-list .col2 { width: 50%; font-size: 0.95rem; float: left; height: 380px; position: relative; overflow: hidden; }
.product-wrap.app-wrap .detail-list .col2.img img { position: absolute; height: 100%; max-width: inherit; min-width: 100%; left: 50%; -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); }
.product-wrap.app-wrap .detail-list .col2.word-wrap { background: #f0f0f0; padding: 20px 0; }
.product-wrap.app-wrap .detail-list .col2.word-wrap .inner { height: 100%; padding: 0 30px; overflow: hidden; overflow-y: auto; }
.product-wrap.app-wrap .detail-list .col2.word-wrap .block { margin-bottom: 20px; }
.product-wrap.app-wrap .detail-list .col2.word-wrap .block .tit { font-size: 1rem; font-weight: bold; }
.product-wrap.app-wrap .detail-list .col2.word-wrap .block .tit:before { content: ""; display: block; width: 30px; height: 1px; margin-bottom: 10px; background: #f50d1a; }
.product-wrap.app-wrap .detail-list .col2.word-wrap .block .tit2 { font-weight: bold; font-size: 1rem; }
.product-wrap.app-wrap .detail-list .col2.word-wrap .block .red { color: #f50d1a; }
.product-wrap.app-wrap .detail-list .col2.word-wrap .go-contact { position: absolute; right: 0; bottom: 0; z-index: 5; background: #f50d1a; color: #fff; padding: 10px 40px; margin-right: -15px; -moz-transform: skew(-30deg); -ms-transform: skew(-30deg); -webkit-transform: skew(-30deg); transform: skew(-30deg); }
.product-wrap.app-wrap .detail-list .col2.word-wrap .go-contact p { margin: 0; -moz-transform: skew(30deg); -ms-transform: skew(30deg); -webkit-transform: skew(30deg); transform: skew(30deg); }
.product-wrap.app-wrap .detail-list .col2.word-wrap .go-contact p:before { content: ""; width: 26px; height: 23px; display: inline-block; vertical-align: middle; margin-right: 5px; background: url(../images/icon-pen.png) no-repeat; }
.product-wrap.app-wrap .detail-list.right .col2.img { float: right; }
.product-wrap.app-wrap .detail-list.right .col2.word-wrap .go-contact { left: 0; right: auto; margin-right: 0; margin-left: -15px; -moz-transform: skew(30deg); -ms-transform: skew(30deg); -webkit-transform: skew(30deg); transform: skew(30deg); }
.product-wrap.app-wrap .detail-list.right .col2.word-wrap .go-contact p { -moz-transform: skew(-30deg); -ms-transform: skew(-30deg); -webkit-transform: skew(-30deg); transform: skew(-30deg); }
@media screen and (max-width: 640px) { .product-wrap.app-wrap .detail-list { margin-bottom: 20px; }
  .product-wrap.app-wrap .detail-list .col2 { width: 100%; height: auto; float: none; }
  .product-wrap.app-wrap .detail-list .col2.img img { position: static; width: 100%; height: auto; -moz-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); }
  .product-wrap.app-wrap .detail-list .col2.word-wrap .go-contact { left: auto !important; right: 0 !important; margin-right: -15px !important; margin-left: 0 !important; -moz-transform: skew(-30deg) !important; -ms-transform: skew(-30deg) !important; -webkit-transform: skew(-30deg) !important; transform: skew(-30deg) !important; }
  .product-wrap.app-wrap .detail-list .col2.word-wrap .go-contact p { -moz-transform: skew(30deg) !important; -ms-transform: skew(30deg) !important; -webkit-transform: skew(30deg) !important; transform: skew(30deg) !important; } }

.contact { background: url(../images/contact_bg.jpg) no-repeat fixed; background-size: cover; overflow: hidden; padding-bottom: 50px; }
.contact .all-width{max-width: 1100px;}
.contact .txts { text-align: center; color: #fff; font-size: 1rem; margin: 50px 0; }
.contact .txts p { margin: 15px 0; }
.contact .txts .red { color: #f50d1a; font-size: 2rem; font-weight: bold; }
.contact .txts .en { font-size: 1rem; margin-right: 10px; font-weight: normal; font-family: "Kanit", sans-serif; }
.contact .form-row { margin-bottom: 30px; overflow: hidden; color: #fff;}
.contact .form-row .tit { width: 110px; padding-right: 10px; display: inline-block; vertical-align: middle; text-align: right; }
.contact .form-row .tit .red { color: #f50d1a; margin-right: 5px; }
.contact .form-row .content { width: calc(100% - 110px); display: inline-block; vertical-align: middle; color: #333; }
.contact .form-row .content .txt-stl { width: 100%; background: rgba(255, 255, 255, 0.5); border-radius: 5px; border: 0; padding: 10px; outline: none; -moz-transition: ease 0.3s; -o-transition: ease 0.3s; -webkit-transition: ease 0.3s; transition: ease 0.3s; }
.contact .form-row .content .txt-stl::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.5); }
.contact .form-row .content .txt-stl::-moz-placeholder { color: rgba(0, 0, 0, 0.5); }
.contact .form-row .content .txt-stl:-ms-input-placeholder { color: rgba(0, 0, 0, 0.5); }
.contact .form-row .content .txt-stl:-moz-placeholder { color: rgba(0, 0, 0, 0.5); }
.contact .form-row .content .txt-stl.txarea { height: 150px; }
.contact .form-row .content .txt-stl.shoter { width: calc(50% - 50px); margin-right: 10px; }
.contact .form-row .content .txt-stl:focus { background: white; }
.contact .form-row .half { width: 50%; float: left; }
@media screen and (max-width: 640px) { .contact .form-row .half { width: 100%; margin-bottom: 25px; }
  .contact .form-row .half:last-child { margin-bottom: 0; }
  .contact .form-row .tit { vertical-align: top; }
  .contact .form-row .content .txt-stl.shoter { width: 100%; margin-bottom: 10px; } }
@media screen and (max-width: 480px){
  .contact .txts { margin: 30px 0; }
  .contact .form-row, .contact .form-row .half{margin-bottom: 10px;}
  .contact .form-row .tit{text-align: left; font-size: 0.85rem;}
  .contact .form-row .tit,.contact .form-row .content{width: 100%;}
  .contact .form-row .content .txt-stl {padding: 5px;}
}
.contact .button { float: right; padding: 0; margin-top: -50px; }
.contact .button .btn-stl { background: #f50d1a; color: #fff; width: 200px; height: 50px; }
.contact .button .btn-stl span, .contact .button .btn-stl i { line-height: 50px; }
@media screen and (max-width: 990px) { .contact .button { float: none; padding: 50px 0 0; margin: 0; } }

/*promise */
.promise-wrap { width: 100%; padding: 40px 0 60px; margin-top: -10px; font-size: 1rem; color: #666; line-height: 200%; }
.promise-wrap.promise1 { background: url(../images/promise1.jpg) no-repeat; background-size: cover; }
.promise-wrap.promise2 { background: url(../images/promise2.jpg) repeat; }
.promise-wrap.promise3 { background: url(../images/promise3.jpg) no-repeat center center; }
.promise-wrap.promise4 { background: url(../images/p8-bg1.jpg) no-repeat right #eee; padding: 160px 0; }
@media screen and (max-width: 640px) { .promise-wrap.promise4 { padding: 80px 0; } }
.promise-wrap.promise5 { background: url(../images/p8-bg2.jpg) no-repeat left #d6d6d6; }
.promise-wrap .promise-tab { width: 100%; font-size: 0; margin-bottom: 30px; }
.promise-wrap .promise-tab ul { padding: 0; list-style: none; width: 100%; }
.promise-wrap .promise-tab ul .box {
  /*width: calc(100% / 8);*/ width: 12%;
  display: inline-block; vertical-align: top;
  font-size: 1rem; text-align: center; color: #666;
  background: #fff; border: 1px solid #e4e4e4; border-right: 0;
}
.promise-wrap .promise-tab ul .box:last-child {
  border-right: 1px solid #e4e4e4;
  width: 16%;
}
.promise-wrap .promise-tab ul .box a { color: #999; padding: 12px 10px; display: block; }
.promise-wrap .promise-tab ul .box:before { margin-left: 0; }
.promise-wrap .promise-tab ul .box.current { background: url(../images/tab-bg.jpg) repeat !important; }
.promise-wrap .promise-tab ul .box.current a { color: #fff; }
.promise-wrap .promise-tab ul .box:hover { background: #eee; }
@media screen and (max-width: 1200px) {
  .promise-wrap .promise-tab ul li.box { font-size: 0.9rem; }
  .promise-wrap .promise-tab ul li.box a{ padding: 8px 5px; }
}
@media screen and (max-width: 990px) {
  .promise-wrap .promise-tab .mobile-tab { display: block; color: #fff; }
  .promise-wrap .promise-tab ul { height: 0; overflow: hidden; font-size: 0;border-bottom: 1px solid #ddd; }
  .promise-wrap .promise-tab ul.active { height: auto; }
  .promise-wrap .promise-tab ul li.box,
  .promise-wrap .promise-tab ul li.box:last-child {
    display: inline-block; width: 50%; font-size: 1rem;
    border-right: 1px solid #ddd; border-bottom: 0;
  }
  .promise-wrap .promise-tab ul li.box:nth-child(odd) { border-right: none; }
  .promise-wrap .promise-tab ul li.box a { color: #000; }
  .promise-wrap .promise-tab ul li.box.current { background: #FFF !important; }
  .promise-wrap .promise-tab ul li.box.current a { color: #f50d1a; }
}
.promise-wrap .big-tit { color: #f50d1a; text-align: center; margin: 40px 0; font-size: 1.8rem; }
.promise-wrap .big-tit .en { font-size: 1.3rem; text-transform: uppercase; margin-left: 5px; }
.promise-wrap .content1 { background: #fff url(../images/sing.jpg) no-repeat 95% 95%; width: 95%; margin: 0 auto; text-align: left; padding: 60px; padding-bottom: 100px; color: #555; text-indent: 2em; }
.promise-wrap .content1 p { margin-bottom: 30px; }
.promise-wrap .content1 .underline { text-decoration: underline; color: #000; }
@media screen and (max-width: 990px) { .promise-wrap .content1 { width: 100%; padding: 60px 30px; padding-bottom: 100px; } }
.promise-wrap .content2 { width: 100%; }
.promise-wrap .content2 .box { overflow: hidden; }
.promise-wrap .content2 .box > div { height: 380px; float: left; }
.promise-wrap .content2 .box .img { width: 68%; float: right; position: relative; overflow: hidden; }
.promise-wrap .content2 .box .img img { position: absolute; left: 50%; height: 100%; max-width: inherit; min-width: 100%; -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); }
.promise-wrap .content2 .box .words { width: 32%; display: table; background: #222; color: #fff; }
.promise-wrap .content2 .box .words .inner { display: table-cell; vertical-align: middle; text-align: center; }
.promise-wrap .content2 .box .words .inner p:nth-child(1) { font-size: 1.3rem; line-height: 180%; }
.promise-wrap .content2 .box .words .inner p:nth-child(2) { font-size: 1.1rem; color: #999; line-height: 180%; }
.promise-wrap .content2 .box .words .inner p:nth-child(2):before { content: ""; width: 100px; height: 1px; background: #f50d1a; display: block; margin: 15px auto; }
.promise-wrap .content2 .box:nth-child(even) .img { float: left; }
.promise-wrap .content2 .box:nth-child(even) .words { float: right; }
@media screen and (max-width: 990px) { .promise-wrap .content2 .box > div { height: 330px; }
  .promise-wrap .content2 .box .img { width: 60%; }
  .promise-wrap .content2 .box .words { width: 40%; } }
@media screen and (max-width: 768px) { .promise-wrap .content2 .box > div { height: 300px; }
  .promise-wrap .content2 .box .img { width: 50%; }
  .promise-wrap .content2 .box .words { width: 50%; } }
@media screen and (max-width: 640px) { .promise-wrap .content2 .box > div { height: auto; }
  .promise-wrap .content2 .box .img, .promise-wrap .content2 .box .words { width: 100%; }
  .promise-wrap .content2 .box .img img { position: static; -moz-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); width: 100%; }
  .promise-wrap .content2 .box .words { padding: 20px 15px; }
  .promise-wrap .content2 .box .words .inner p:nth-child(1) { font-size: 1rem; }
  .promise-wrap .content2 .box .words .inner p:nth-child(2) { font-size: 0.9rem; } }
.promise-wrap .content3 { margin: 0 -10px; }
.promise-wrap .content3 .box { width: 33.33%; float: left; padding: 0 10px; }
.promise-wrap .content3 .box .inner { box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); background: #fff; overflow: hidden; height: 630px; }
.promise-wrap .content3 .box .inner img { position: relative; z-index: 1; }
.promise-wrap .content3 .box .inner .upper { background: #fff; position: relative; z-index: 2; padding: 25px 30px; font-size: 1rem; line-height: 180%; width: 100%; color: #666; text-align: justify; }
.promise-wrap .content3 .box .inner .upper:before, .promise-wrap .content3 .box .inner .upper:after { content: ""; position: absolute; left: -30px; top: -5px; height: 50px; z-index: -1; width: 100%; background: #fff; -moz-transform: rotate(5deg); -ms-transform: rotate(5deg); -webkit-transform: rotate(5deg); transform: rotate(5deg); }
.promise-wrap .content3 .box .inner .upper:after { left: auto; right: -30px; -moz-transform: rotate(-5deg); -ms-transform: rotate(-5deg); -webkit-transform: rotate(-5deg); transform: rotate(-5deg); }
.promise-wrap .content3 .box .inner .upper .tit { font-weight: bold; margin: 0; color: #000; text-align: center; }
.promise-wrap .content3 .box .inner .upper .tit:after { content: ""; display: block; margin: 10px auto; height: 1px; width: 30px; background: #f50d1a; }
@media screen and (max-width: 990px) { .promise-wrap .content3 .box { width: 100%; margin-bottom: 20px; }
  .promise-wrap .content3 .box .inner { height: auto; background: none; position: relative; }
  .promise-wrap .content3 .box .inner img { position: absolute; left: 0; height: 100%; }
  .promise-wrap .content3 .box .inner .upper { width: 50%; float: right; }
  .promise-wrap .content3 .box .inner .upper:before, .promise-wrap .content3 .box .inner .upper:after { display: none; } }
@media screen and (max-width: 768px) { .promise-wrap .content3 .box .inner img { position: static; height: auto; width: 100%; }
  .promise-wrap .content3 .box .inner .upper { width: 100%; }
  .promise-wrap .content3 .box .inner .upper:before, .promise-wrap .content3 .box .inner .upper:after { display: block; } }
.promise-wrap .content4 .block { padding: 30px 0; overflow: hidden; }
@media screen and (max-width: 768px) { .promise-wrap .content4 .block { padding: 5px 0; } }
.promise-wrap .content4 .block .circle { width: 70px; height: 70px; line-height: 70px; text-align: center; border-radius: 50%; background: #f50d1a; float: left; }
@media screen and (max-width: 480px) { .promise-wrap .content4 .block .circle { width: 40px; height: 40px; line-height: 40px; }
  .promise-wrap .content4 .block .circle img { width: 60%; } }
.promise-wrap .content4 .block .words { width: calc(100% - 70px); float: left; padding-left: 30px; color: #666; font-size: 1rem; line-height: 180%; text-align: justify; }
@media screen and (max-width: 480px) { .promise-wrap .content4 .block .words { width: calc(100% - 40px); padding-left: 15px; } }
.promise-wrap .content4 .block .words .tit { font-size: 1.5rem; color: #333; margin: 0; margin-bottom: 10px; font-weight: bold; }
.promise-wrap .content4 .block .words .box { margin: 40px 0; }
.promise-wrap .content4 .block .words .box .tit2 { color: #f50d1a; font-weight: bold; }
.promise-wrap .content4 .block .words .box .tit2:after { content: ""; width: 30px; height: 1px; background: #f50d1a; display: block; margin: 10px 0; }
.promise-wrap .content4 .block .words .box .left { float: left; }
.promise-wrap .content4 .block .words .box .right { float: right; }
.promise-wrap .content4 .block .words .box:nth-of-type(1) .right { width: calc(100% - 426px); padding-left: 30px; }
.promise-wrap .content4 .block .words .box:nth-of-type(2) .left { width: calc(100% - 642px); padding-right: 30px; }
.promise-wrap .content4 .block .words .box:nth-of-type(3) .right { width: calc(100% - 789px); padding-left: 30px; }
/* .promise-wrap .content4 .block .words .box:nth-of-type(4) .left { width: calc(100% - 642px); padding-right: 30px; }
.promise-wrap .content4 .block .words .box:nth-of-type(5) .right { width: calc(100% - 789px); padding-left: 30px; } */
@media screen and (max-width: 1400px) { .promise-wrap .content4 .block .words .box .left, .promise-wrap .content4 .block .words .box .right { width: 50% !important; } }
@media screen and (max-width: 990px) { .promise-wrap .content4 .block .words .box .left, .promise-wrap .content4 .block .words .box .right { width: 100% !important; padding: 0 !important; } }
.promise-wrap .content4 hr { border: 0; border-bottom: 1px dotted #ccc; }
.promise-wrap .content5 { text-align: center; max-width: 990px; margin: 0 auto; padding-top: 20px; color: #666; }
.promise-wrap .content5 h2 { width: 90%; font-size: 1.6rem; color: #333; margin: 10px auto 5px; line-height: 1.75; }
.promise-wrap .content5 .tit { font-size: 1.6rem; margin: 30px 0; color: #f50d1a; }
.promise-wrap .content5 ul { text-align: left; }
.promise-wrap .content6 { padding: 30px 0;}
.promise-wrap .content6 .block { margin: 20px 0; font-size: 1rem; color: #333; line-height: 180%; }
.promise-wrap .content6 .block .tit { border-bottom: 1px dotted #ff4953; color: #f50d1a; font-size: 1.6rem; position: relative; padding: 8px 0; margin-bottom: 20px; }
.promise-wrap .content6 .block .tit span { margin-right: 10px; }
.promise-wrap .content6 .block .tit:after { content: ""; position: absolute; right: 0; bottom: -1px; width: 80px; height: 3px; background: #f50d1a; }
.promise-wrap .content6 .block .tit2 { font-size: 1.2rem; font-weight: bold; margin: 10px 0; }
.promise-wrap .content6 .block .upper .left { width: calc(100% - 630px); }



.promise-wrap .csr_pic {
  width: 40%; float: left;
}
.promise-wrap .csr_cont { padding: 0px 0 30px; width: 58%; float: right; }
.promise-wrap .csr_cont .block { margin: 20px 0; font-size: 1rem; color: #333; line-height: 180%; }
.promise-wrap .csr_cont .block .tit {
  border-bottom: 1px dotted #ff4953;
  font-size: 1.4rem; color: #f50d1a; font-weight: bold;
  position: relative; padding: 8px 0; margin-bottom: 20px;
}
.promise-wrap .csr_cont .block .tit a {

}
.promise-wrap .csr_cont .block .tit span { margin-right: 10px; }
.promise-wrap .csr_cont .block .tit:after { content: ""; position: absolute; right: 0; bottom: -1px; width: 80px; height: 3px; background: #f50d1a; }
.promise-wrap .csr_cont .block .tit2 { font-size: 1.2rem; font-weight: bold; margin: 10px 0; }
.promise-wrap .csr_cont .block .upper .left { width: calc(100% - 630px); }
.promise-wrap .csr_cont .block ol.csr {
  list-style: none;
  padding: 0;
}
.promise-wrap .csr_cont .block ol.csr li {
  padding: 5px 0;
}
@media screen and (max-width: 767px) {
  .promise-wrap .csr_pic {
    width: 40%;
  }
  .promise-wrap .csr_cont {
    width: 58%;
  }
  .promise-wrap .content5 h2 br {
    display: none;
  }
}
@media screen and (max-width: 640px) {
  .promise-wrap .csr_pic {
    width: 100%;
  }
  .promise-wrap .csr_cont {
    width: 100%;
  }
}

@media screen and (max-width: 990px) { .promise-wrap .content6 .block .upper .left, .promise-wrap .content6 .block .upper .right { width: 100%; margin-bottom: 10px; } }
.promise-wrap .content6 .block .right { float: right; }
.promise-wrap .content6 .block .left { float: left; }
.promise-wrap .content6 .block .col2 { width: 50%; float: left; display: block; }
.promise-wrap .content6 .block .other { width: calc(100% - 450px); margin-top: 100px; }
@media screen and (max-width: 990px) { .promise-wrap .content6 .block .other { float: none; width: 100%; margin-top: 30px; } }
.promise-wrap .content6 .block .box { margin: 25px 0; }
.promise-wrap .content6 .block .box img { margin-bottom: 10px; }
.promise-wrap .content6 .block .box .pink-line { background: url(../images/notice_bg.jpg) repeat; padding: 10px; display: block; }
.promise-wrap .content6 .block .box .pink-line:before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #f50d1a; display: inline-block; vertical-align: middle; margin: 10px; }
.promise-wrap .content7 .block { margin: 20px 0; }
.promise-wrap .content7 .tit1 { font-size: 1.4rem; color: #333; background: url(../images/icon-noTouch.png) no-repeat; padding: 3px 0 5px 35px; font-weight: bold; }
.promise-wrap .content7 .tit2 { font-size: 1.1rem; color: #f50d1a; font-weight: bold; }
.promise-wrap .content8 .tit { font-size: 1.4rem; font-weight: bold; color: #f50d1a; }
.promise-wrap .content8 .tit span { width: 45px; height: 45px; line-height: 45px; display: inline-block; border-radius: 50%; text-align: center; background: #f50d1a; margin-right: 15px; }
.promise-wrap .content8 .txt { margin-left: 60px; }
.promise-wrap .content8 .img { float: right; width: 40%; text-align: center; }
@media screen and (max-width: 640px) { .promise-wrap .content8 .img { width: 100%; margin-bottom: 30px; } }

/*人力資源 */
.hr-wrap { margin: 40px 0; }
.hr-wrap img { height: auto!important; }

.hr-wrap .hr-tab { width: 280px; float: left; }
.hr-wrap .hr-tab ul { padding: 0; list-style: none; width: 100%; font-size: 0; }
.hr-wrap .hr-tab ul .box { width: 100%; font-size: 1rem; background: #fff; padding: 10px; color: #000; font-weight: bold; border-bottom: 1px solid #ececec; }
.hr-wrap .hr-tab ul .box a { color: #999; display: block; }
.hr-wrap .hr-tab ul .box.current { background: #f50d1a !important; }
.hr-wrap .hr-tab ul .box.current a { color: #fff; }
.hr-wrap .hr-tab ul .box:hover { background: #eee; }
@media screen and (max-width: 1200px) { .hr-wrap .hr-tab { width: 20%; } }
@media screen and (max-width: 990px) { .hr-wrap .hr-tab { width: 100%; margin-bottom: 30px; }
  .hr-wrap .hr-tab ul .box { width: 33.33%; float: left; text-align: center; } }
.hr-wrap .hr { float: right; width: calc(100% - 330px); font-size: 1rem; }

.hr-wrap .hr .note { width: calc(100% - 20px); overflow: hidden; margin: 0 auto 10px; }
.hr-wrap .hr .note .txt { float: left; margin: 10px 0; width: calc(100% - 150px); }
.hr-wrap .hr .note img { float: right; }

@media screen and (max-width: 1200px) { .hr-wrap .side-nav{width: 22%;}.hr-wrap .hr { width: 77%; } }
@media screen and (max-width: 990px) { .hr-wrap .side-nav{width: 100%;} .hr-wrap .hr { width: 100%; } }
.hr-wrap .hr .hr-table { display: table; border-top-right-radius: 10px; border-top-left-radius: 10px; border-collapse: collapse; overflow: hidden; width: 100%; }
.hr-wrap .hr .hr-row { display: table-row; border-bottom: 1px dotted #ddd; }
.hr-wrap .hr .hr-row .hr-cell { display: table-cell; text-align: center; padding: 15px; border-bottom: 1px solid #eee; color: #666; }
.hr-wrap .hr .hr-row .hr-cell:nth-child(1) { width: 20%; }
.hr-wrap .hr .hr-row .hr-cell:nth-child(2) { width: 15%; }
.hr-wrap .hr .hr-row .hr-cell:nth-child(3) { width: 15%; }
.hr-wrap .hr .hr-row .hr-cell:nth-child(4) { width: 35%; text-align: left; }
.hr-wrap .hr .hr-row .hr-cell:nth-child(5) { /*width: 15%;*/ }
.hr-wrap .hr .hr-row .hr-cell a { color: #666; }
.hr-wrap .hr .hr-row .hr-cell .view { background: #f50d1a; color: #fff; border-radius: 3px; font-size: 0.8rem; padding: 5px; display: block; }
.hr-wrap .hr .hr-row:nth-child(2n) { background: #f9f9f9; }
@media screen and (max-width: 990px) { .hr-wrap .hr .hr-row { border-bottom: 2px dotted #aaa; padding: 20px 10px; display: block; }
  .hr-wrap .hr .hr-row .hr-cell { padding: 5px 15px; display: block; width: 100% !important; text-align: left; border: none; }
  .hr-wrap .hr .hr-row .hr-cell:before { display: block; margin-bottom: 5px; color: #000; font-weight: bold; }
  .hr-wrap .hr .hr-row .hr-cell:nth-child(1) { font-size: 1rem; font-weight: bold; }
  .hr-wrap .hr .hr-row .hr-cell:nth-child(2):before { content: "活動"; }
  .hr-wrap .hr .hr-row .hr-cell:nth-child(3):before { content: "城市"; }
  .hr-wrap .hr .hr-row .hr-cell:nth-child(4):before { content: "地點"; }
  .hr-wrap .hr .hr-row .hr-cell .view { padding: 8px; border-radius: 10px; text-align: center; } }
@media screen and (max-width: 990px) and (max-width: 990px) { .hr-wrap .hr .hr-row .hr-cell .view { max-width: 150px; margin: auto; } }

.hr-wrap .hr .hr-head { background: linear-gradient(90deg, #e8e8e8 0%, #ffffff 100%); background: -moz-linear-gradient(90deg, #E8E8E8 0%, #FFFFFF 100%); background: -webkit-linear-gradient(90deg, #E8E8E8 0%, #FFFFFF 100%); background: -o-linear-gradient(90deg, #E8E8E8 0%, #FFFFFF 100%); border: 1px solid #E8E8E8; }
.hr-wrap .hr .hr-head .hr-cell { font-size: 1rem !important; text-align: center !important; border: none; position: relative; }
.hr-wrap .hr .hr-head .hr-cell:after { content: ""; width: 1px; height: 20px; background: #ddd; position: absolute; right: 0; }
@media screen and (max-width: 990px) { .hr-wrap .hr .hr-head { padding: 10px; }
  .hr-wrap .hr .hr-head .hr-cell:nth-child(2), .hr-wrap .hr .hr-head .hr-cell:nth-child(3), .hr-wrap .hr .hr-head .hr-cell:nth-child(4), .hr-wrap .hr .hr-head .hr-cell:nth-child(5), .hr-wrap .hr .hr-head .hr-cell:nth-child(6) { display: none !important; } }
.hr-wrap .hr .job-tit { font-size: 1.2rem; color: #f50d1a; font-weight: bold; margin-bottom: 30px; }
.hr-wrap .hr .job-tit:before { content: ""; width: 60px; height: 60px; line-height: 60px; background: #f50d1a url(../images/icon8.png) no-repeat center center; border-radius: 50%; float: left; text-align: center; margin-right: 15px; }
.hr-wrap .hr .job-tit:before img { width: 60%; }
.hr-wrap .hr .job-tit p { margin: 0; }
.hr-wrap .hr .job-tit .name { padding-top: 5px; }
.hr-wrap .hr .job-tit .ppl { font-size: 1rem; color: #666; }
.hr-wrap .hr .job-row { border-top: 1px solid #d4d4d4; padding: 0 50px 30px; color: #666; }
.hr-wrap .hr .job-row .tit { font-weight: bold; position: relative; font-size: 1rem; padding: 8px 0; color: #333; }
.hr-wrap .hr .job-row .tit:before { content: ""; position: absolute; top: -1px; left: 0; position: absolute; width: 30px; height: 2px; background: #000; }
@media screen and (max-width: 990px) { .hr-wrap .hr .job-row { padding: 0 20px 20px; } }
.hr-wrap .hr .hr-edit { line-height: 200%; }
.hr-wrap .hr .hr-edit img{height: auto !important;}
@media screen and (max-width: 990px){ .hr-wrap .hr .hr-edit table{width: 100% !important;} }
/*about */
.about-tab { width: 100%; margin: 20px 0; }
.about-tab ul { padding: 0; list-style: none; width: 100%; font-size: 0; }
.about-tab ul .box { width: calc(100% / 5); display: inline-block; vertical-align: top; font-size: 1rem; text-align: center; color: #666; background: #fff; border: 1px solid #e4e4e4; border-right: 0; }
.about-tab ul .box:last-child { border-right: 1px solid #e4e4e4; }
.about-tab ul .box a { color: #999; padding: 12px 10px; display: block; }
.about-tab ul .box:before { margin-left: 0; }
.about-tab ul .box.current { background: url(../images/tab-bg.jpg) repeat !important; }
.about-tab ul .box.current a { color: #fff; }
.about-tab ul .box:hover { background: #eee; }
@media screen and (max-width: 640px) {
  .about-tab { display: none; }
  .hr-wrap .hr .note .txt { width: 100%; float: none; }
  .hr-wrap .hr .note img { width: 144px; text-align: center; }
}

/*關於我們 */
.about-content { overflow: hidden; font-size: 0.95rem; line-height: 200%; color: #666; text-align: center; /*about-setting */ /*區塊1-1 */ /*區塊1-2 */ /*區塊2 */ /*區塊3 */ /*區塊4 */ /*區塊5 */ }
.about-content .bread-crumb { margin: 20px 0; text-align: left; }
.about-content.a1 { background: url(../images/about_bg1.jpg) no-repeat center center; background-size: cover; }
.about-content.a2 { background: url(../images/about_bg2.jpg) no-repeat center center; background-size: cover; color: #fff; padding: 50px 0; }
.about-content.a5 { background: #f1f1f1; padding: 40px 0; }
.about-content .red-tit { font-size: 1.8rem; color: #f50d1a; margin: 50px 0 30px; }
.about-content .red-tit .en { font-size: 1rem; }
.about-content .red-tit .en:before { content: "/"; color: #f50d1a; margin: 0 10px; display: inline-block; }
@media screen and (max-width: 990px) { .about-content .red-tit { margin: 30px 0; } }
.about-content .line-up-tit { font-size: 1.5rem; font-weight: bold; color: #444; }
.about-content .line-up-tit.white { color: #fff; }
.about-content .line-up-tit:before { content: ""; width: 30px; height: 1px; background: #f50d1a; display: block; margin: 10px auto; }
.about-content .a1_block { width: 100%; margin: 30px 0; }
.about-content .a1_block > div { height: 420px; float: left; }
.about-content .a1_block .word-box { width: 30%; float: right; background: #f50d1a; color: #fff; padding: 30px; display: table; }
.about-content .a1_block .word-box .inner { display: table-cell; vertical-align: middle; padding: 25px; }
.about-content .a1_block .word-box .inner p { text-align: left; }
.about-content .a1_block .word-box .inner p:nth-child(1) { font-size: 1.5rem; }
.about-content .a1_block .word-box .inner p:nth-child(2) { color: #ccc; }
.about-content .a1_block .img { width: 70%; position: relative; overflow: hidden; }
.about-content .a1_block .img img { height: 100%; max-width: inherit; position: absolute; left: 50%; -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); }
@media screen and (max-width: 990px) { .about-content .a1_block > div { height: 300px; }
  .about-content .a1_block .word-box, .about-content .a1_block .img { width: 50%; } }
@media screen and (max-width: 640px) { .about-content .a1_block > div { height: auto; }
  .about-content .a1_block .word-box, .about-content .a1_block .img { width: 100%; }
  .about-content .a1_block .word-box { padding: 0; }
  .about-content .a1_block .img img { position: static; width: 100%; -moz-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); } }
.about-content .a1_table { display: table; width: 100%; border-collapse: collapse; margin: 30px 0; }
.about-content .a1_table .t-row { display: table-row; text-align: left; }
.about-content .a1_table .t-row .t-cell { display: table-cell; width: 50%; border-top: 1px dotted #ccc; border-bottom: 1px dotted #ccc; padding: 20px 0; }
.about-content .a1_table .t-row .t-cell > p { display: inline-block; vertical-align: top; }
.about-content .a1_table .t-row .t-cell p:nth-child(2) { width: calc(100% - 180px); }
.about-content .a1_table .t-row .t-cell .tit { color: #f50d1a; line-height: 30px; font-size: 1rem; width: 160px; margin-right: 10px; }
.about-content .a1_table .t-row .t-cell .tit:after { content: "/"; float: right; }
.about-content .a1_table .t-row .t-cell .icon1, .about-content .a1_table .t-row .t-cell .icon2, .about-content .a1_table .t-row .t-cell .icon3, .about-content .a1_table .t-row .t-cell .icon4, .about-content .a1_table .t-row .t-cell .icon5, .about-content .a1_table .t-row .t-cell .icon6 { display: inline-block; vertical-align: middle; width: 27px; height: 27px; margin: 0 20px; overflow: hidden; }
.about-content .a1_table .t-row .t-cell .icon1 { background: url(../images/about_icon.png) 0 0; }
.about-content .a1_table .t-row .t-cell .icon2 { background: url(../images/about_icon.png) -27px 0; }
.about-content .a1_table .t-row .t-cell .icon3 { background: url(../images/about_icon.png) 0 -27px; }
.about-content .a1_table .t-row .t-cell .icon4 { background: url(../images/about_icon.png) -27px -27px; }
.about-content .a1_table .t-row .t-cell .icon5 { background: url(../images/about_icon.png) 0 -54px; }
.about-content .a1_table .t-row .t-cell .icon6 { background: url(../images/about_icon.png) -27px -54px; }
@media screen and (max-width: 990px) { .about-content .a1_table .t-row .t-cell { padding: 10px 0; }
  .about-content .a1_table .t-row .t-cell p { display: block; margin: 0; }
  .about-content .a1_table .t-row .t-cell p:nth-child(2) { width: calc(100% - 30px); padding-left: 40px; }
  .about-content .a1_table .t-row .t-cell .tit { width: 130px; margin-bottom: 0; }
  .about-content .a1_table .t-row .t-cell .icon1, .about-content .a1_table .t-row .t-cell .icon2, .about-content .a1_table .t-row .t-cell .icon3, .about-content .a1_table .t-row .t-cell .icon4, .about-content .a1_table .t-row .t-cell .icon5, .about-content .a1_table .t-row .t-cell .icon6 { margin: 0; margin-right: 10px; } }
@media screen and (max-width: 640px) { .about-content .a1_table .t-row .t-cell { display: block; width: 100%; border-bottom: none; padding: 10px 0; }
  .about-content .a1_table .t-row .t-cell p { margin: 0; }
  .about-content .a1_table .t-row .t-cell p:nth-child(2) { width: 100%; } }
.about-content .a2-block { overflow: hidden; }
.about-content .a2-block .box { width: 33.33%; float: left; margin: 30px 0; text-align: center; }
.about-content .a2-block .box .circle { width: 275px; height: 275px; margin: 40px auto; position: relative; }
.about-content .a2-block .box .circle:before, .about-content .a2-block .box .circle:after { content: ""; border-style: solid; border-color: #f50d1a; border-radius: 50%; position: absolute; opacity: 0.8; -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform: rotate(-90deg); }
.about-content .a2-block .box .circle:before { border-width: 2px 0px 0 2px; left: -7px; top: -7px; right: -7px; bottom: -7px; }
.about-content .a2-block .box .circle:after { border-width: 2px 0px 0 0; left: -15px; top: -15px; right: -15px; bottom: -15px; }
.about-content .a2-block .box .circle .inner { border-radius: 50%; overflow: hidden; width: 100%; height: 100%; }
.about-content .a2-block .box .tit { font-size: 1.5rem; }
.about-content .a2-block .box a{color: #fff;}
.about-content .a2-block .box .circle{
  -webkit-transition: ease 0.5s;
  -o-transition: ease 0.5s;
  transition: ease 0.5s;
}
.about-content .a2-block .box:hover .circle{
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
}
.about-content .a2-block .box:hover{text-decoration: underline;}
.about-content .a2-block .box:nth-child(2) .circle:before { -moz-transform: rotate(0); -ms-transform: rotate(0); -webkit-transform: rotate(0); transform: rotate(0); }
.about-content .a2-block .box:nth-child(2) .circle:after { -moz-transform: rotate(-30deg); -ms-transform: rotate(-30deg); -webkit-transform: rotate(-30deg); transform: rotate(-30deg); }
.about-content .a2-block .box:nth-child(3) .circle:before { -moz-transform: rotate(-180deg); -ms-transform: rotate(-180deg); -webkit-transform: rotate(-180deg); transform: rotate(-180deg); }
.about-content .a2-block .box:nth-child(3) .circle:after { -moz-transform: rotate(-215deg); -ms-transform: rotate(-215deg); -webkit-transform: rotate(-215deg); transform: rotate(-215deg); }
@media screen and (max-width: 1200px) { .about-content .a2-block .box .circle { width: 250px; height: 250px; } }
@media screen and (max-width: 990px) { .about-content .a2-block .box .circle { width: 180px; height: 180px; }
  .about-content .a2-block .box .tit { font-size: 1.2rem; } }
@media screen and (max-width: 768px) { .about-content .a2-block .box .circle { width: 150px; height: 150px; margin: 10px auto 20px; } }
@media screen and (max-width: 640px) { .about-content .a2-block .box { max-width: 300px; margin: 20px auto; padding: 20px 0; width: 100%; float: none; overflow: hidden; }
  .about-content .a2-block .box > * { float: left; }
  .about-content .a2-block .box .circle { width: 100px; height: 100px; margin: 0 20px; }
  .about-content .a2-block .box .circle:before { border-width: 1px 0px 0 1px; left: -3px; top: -3px; right: -3px; bottom: -3px; }
  .about-content .a2-block .box .circle:after { border-width: 1px 0px 0 0; left: -6px; top: -6px; right: -6px; bottom: -6px; }
  .about-content .a2-block .box .tit { line-height: 100px; font-size: 1rem; }
  .about-content .a2-block .box .tit:before { content: ""; display: inline-block; margin-right: 10px; margin-bottom: 3px; border-style: solid; border-width: 5px 0 5px 5px; border-color: transparent transparent transparent #f50d1a; } }
.about-content .a3-block { margin: 20px 0; }
.about-content .a3-block .tit-bar { width: 100%; position: relative; height: 40px; margin-bottom: 30px; }
.about-content .a3-block .tit-bar:after { content: ""; width: 100%; height: 1px; background: #ebebeb; position: absolute; left: 0; top: 50%; }
.about-content .a3-block .tit-bar .tit { width: 175px; background: rgba(34, 34, 34, 0.7); border-radius: 30px; color: #fff; line-height: 40px; position: relative; z-index: 2; padding-left: 30px; }
.about-content .a3-block .tit-bar .tit:before { content: ""; width: 40px; height: 40px; background: rgba(34, 34, 34, 0.7); overflow: hidden; border-radius: 50%; position: absolute; left: 0; top: 0; }
.about-content .a3-block .tit-bar .tit:after { content: ""; background: url(../images/about-icons2.png) no-repeat; width: 22px; height: 22px; overflow: hidden; position: absolute; left: 8px; top: 8px; }
.about-content .a3-block .tit-bar .tit.tit2:after { background: url(../images/about-icons2.png) no-repeat 0 -22px; }
.about-content .a3-block .content { margin: 20px -30px; padding-bottom: 30px; }
.about-content .a3-block .content .box { padding: 0 30px; text-align: center; width: 33.33%; float: left; }
.about-content .a3-block .content .box p { margin: 0; }
.about-content .a3-block .content .box p:nth-child(1) { font-size: 1.8rem; color: #f50d1a; }
.about-content .a3-block .content .box p:nth-child(2) { color: #f50d1a; font-size: 1.2rem; }
.about-content .a3-block .content .box .map { margin-top: 20px; border: 0; }
.about-content .a3-block .note { margin-bottom: 40px; }
.about-content .a3-block .note i { color: #f50d1a; margin-right: 10px; font-size: 1.5rem; display: inline-block; vertical-align: middle; }
@media screen and (max-width: 990px) { .about-content .a3-block .content { margin: 0; }
  .about-content .a3-block .content .box { width: 100%; margin-bottom: 20px; border-bottom: 1px solid #eee; padding-bottom: 30px; }
  .about-content .a3-block .content .box .word { width: 100%; }
  .about-content .a3-block .content .box .word p { text-align: left; }
  .about-content .a3-block .content .box .word p:nth-child(1) { float: left; font-size: 1.4rem; margin-right: 10px; }
  .about-content .a3-block .content .box .map { width: 100%; } }
.about-content .video { height: 650px; width: 100%; background: url(../images/video.jpg) no-repeat center center; position: relative; display: table; }
.about-content .video:before { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(176, 34, 34, 0.8); z-index: 1; -moz-transition: ease 0.5s; -o-transition: ease 0.5s; -webkit-transition: ease 0.5s; transition: ease 0.5s; }
.about-content .video .inner { display: table-cell; vertical-align: middle; position: relative; z-index: 2; }
.about-content .video .inner a { color: #fff !important; }
.about-content .video .inner .red-tit { color: #fff !important; margin-bottom: 10px; }
.about-content .video .inner p { font-size: 1.1rem; }
.about-content .video .inner i { font-size: 5rem; margin: 10px 0; -moz-transition: ease 0.5s; -o-transition: ease 0.5s; -webkit-transition: ease 0.5s; transition: ease 0.5s; }
.about-content .video .inner i:hover { -moz-transform: scale(1.2); -ms-transform: scale(1.2); -webkit-transform: scale(1.2); transform: scale(1.2); }
.about-content .video:hover:before { background: rgba(176, 34, 34, 0.95); }
@media screen and (max-width: 1200px) { .about-content .video { height: 450px; } }
@media screen and (max-width: 990px) { .about-content .video { height: 400px; } }
@media screen and (max-width: 640px) { .about-content .video { height: 300px; }
  .about-content .video .inner p { font-size: 1rem; } }
.about-content .a5-block { width: 100%; padding-bottom: 50px; }
.about-content .a5-block .col3 { width: 33.33%; float: left; height: 740px; }
.about-content .a5-block .col3 > div { height: 50%; }
.about-content .a5-block .col3 .img { overflow: hidden; position: relative; }
.about-content .a5-block .col3 .img img { height: 100%; max-width: inherit; position: absolute; left: 50%; -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); }
.about-content .a5-block .col3 .word { background: #f4f4f4; padding: 35px 50px; text-align: left; line-height: 180%; position: relative; }
.about-content .a5-block .col3 .word .tit { color: #f50d1a; font-size: 1.2rem; margin-bottom: 3px; }
.about-content .a5-block .col3 .word:after { content: ""; border-style: solid; border-width: 15px 15px 0 15px; border-color: #f4f4f4 transparent transparent transparent; position: absolute; bottom: -15px; left: 30px; z-index: 2; }
.about-content .a5-block .col3:nth-child(even) .word:after { bottom: auto; top: -15px; left: 50%; margin-left: -15px; border-width: 0 15px 15px 15px; border-color: transparent transparent #f4f4f4 transparent; }
@media screen and (max-width: 1200px) { .about-content .a5-block .col3 .word { padding: 30px; line-height: 180%; } }
@media screen and (max-width: 990px) { .about-content .a5-block .col3 { width: 100%; height: auto; display: table; font-size: 0; }
  .about-content .a5-block .col3 > div { width: 50%; height: auto; display: table-cell; vertical-align: top; font-size: 1rem; }
  .about-content .a5-block .col3 .word:after { -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform: rotate(-90deg); right: -20px; top: 50%; left: auto; bottom: auto; }
  .about-content .a5-block .col3 .word:nth-child(even):after { right: auto; left: -20px; top: 50%; margin: 0; }
  .about-content .a5-block .col3 .img img { min-width: 100%; } }
@media screen and (max-width: 640px) { .about-content .a5-block .col3 { margin-bottom: 20px; position: relative; padding-top: 70%; }
  .about-content .a5-block .col3 > div { width: 100%; display: block; }
  .about-content .a5-block .col3 .img { position: absolute; left: 0; top: 0; }
  .about-content .a5-block .col3 .img img { position: static; -moz-transform: translateX(0%); -ms-transform: translateX(0%); -webkit-transform: translateX(0%); transform: translateX(0%); height: auto; width: 100%; }
  .about-content .a5-block .col3 .word { position: relative; z-index: 2; }
  .about-content .a5-block .col3 .word:after { display: none; } }
.about-content .a6-block .red-tit span { display: block; margin-top: 8px; }
.about-content .a6-block .red-tit span:before { display: none; }
.about-content .a6-block .prize { /*width: 25%; text-align: center; float: left; margin-bottom: 20px;*/ }
.about-content .a6-block .tit { font-size: 1.2rem; color: #333; font-weight: bold; margin-bottom: 15px; }
@media screen and (max-width: 990px) {
  .about-content .a6-block .prize{padding: 0 20px;}
}
@media screen and (max-width: 640px) {
  .about-content .a6-block .prize{padding: 0 10px;}
}
/*Service*/
.service{background: url(../images/promise2.jpg) repeat; overflow: hidden;}
.service .hr-wrap>.title{font-size: 1.3rem; text-align: center; position: relative; color: #666; margin-bottom: 30px;}
.service .hr-wrap>.title span{color: #eb000d; font-size: 2rem; font-weight: bold;}
.service .hr-wrap>.title:after{content: ""; display: block; width: 8px; height: 8px; border-radius: 50%; margin: 10px auto; background: #f7535c;}
.s-table{width: 100%; max-width: 1200px; margin: auto;}
.s-table tr{font-size: 0;}
.s-table td{padding: 20px 20px 20px 50px; width: 33.33%; display: inline-block; vertical-align: top;}
.s-table .word{margin: -70px 0 0 -30px;}
.s-table .name{background: #f7535c; color: #fff; font-size: 1.1rem; font-weight: bold; display: inline-block; padding: 8px 15px; min-width: 150px; -webkit-box-shadow: 5px 5px 0 #fff; box-shadow: 5px 5px 0 #fff;}
.s-table .name .num{ padding-right: 10px; font-size: 1.3rem;}
.s-table .s-content{margin-top: 40px; margin-left: 30px; padding-top: 15px; position: relative; font-size: 0.95rem; line-height: 26px;}
.s-table .s-content:after{content: ""; position: absolute; left: 0; top:0; width: 30px; height: 1px; background: #f7535c;}
.s-table .s-content .cell{display: inline-block; vertical-align: top;}
.s-table .s-content .half{width: 50%;}
.service-edit{text-align: center;}
@media screen and (max-width: 1200px) {
  .s-table .word{margin: -55px 0 0 -20px;}
}
@media screen and (max-width: 990px) {
  .s-table tr{font-size: 0;}
  .s-table td{display: inline-block; width: 50%;}
}
@media screen and (max-width: 640px) {
  .s-table td{padding: 20px 20px 20px 20px}
  .s-table .word{margin: -45px 0 0 -20px;}
  .s-table .name{font-size: 1rem; padding: 5px 10px;}
  .s-table .s-content{margin-top: 30px; margin-left: 20px;}
}
@media screen and (max-width: 480px) {
  .s-table td{display: inline-block; width: 100%;}
}
/*sitemap */
.sitemap { background: url(../images/promise2.jpg); background-size: cover; overflow: hidden; font-size: 0; }
.sitemap .site-wrap { margin: 40px -25px; }
.sitemap .site-box { width: 25%; display: inline-block; vertical-align: top; font-size: 0.95rem; padding: 0 25px; margin-bottom: 50px; }
.sitemap .site-box .tit { color: #f50d1a; font-size: 1.2rem; font-weight: bold; border-bottom: 1px solid #ddd; padding-left: 40px; }
.sitemap .site-box .content { border-left: 1px solid #ddd; margin-left: 30px; margin-top: -30px; padding: 30px 0 10px; }
.sitemap .site-box .content a { color: #666; position: relative; display: block; padding-left: 20px; margin: 13px 0; }
.sitemap .site-box .content a:before { content: ""; position: absolute; left: -1px; top: 7px; height: 8px; width: 3px; background: #f50d1a; }
.sitemap .site-box .content a:hover { color: #f50d1a; }
@media screen and (max-width: 990px) { .sitemap .site-box { width: 50%; } }
@media screen and (max-width: 640px) { .sitemap .site-box { width: 100%; }
  .sitemap .site-box .content a { display: inline-block; margin-right: 15px; padding-left: 15px; }
  .sitemap .site-box .content a:before { display: none; } }

/*input style */
.check-stl { margin-right: 10px; margin-top: 5px; font-weight: normal; }
.check-stl input { display: none; }
.check-stl input:checked + span { background-color: #f50d1a; }
.check-stl input:checked + span i { -moz-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); -moz-transition: ease 0.3s; -o-transition: ease 0.3s; -webkit-transition: ease 0.3s; transition: ease 0.3s; }
.check-stl input + span { display: inline-block; vertical-align: middle; border: 1px solid #f50d1a; border-radius: 2px; width: 18px; height: 18px; padding: 1px; margin-right: 3px; margin-bottom: 2px; -moz-transition: ease 0.3s; -o-transition: ease 0.3s; -webkit-transition: ease 0.3s; transition: ease 0.3s; }
.check-stl input + span i { background: url(../images/click.png) no-repeat; width: 14px; height: 14px; display: block; -moz-transform: scale(0); -ms-transform: scale(0); -webkit-transform: scale(0); transform: scale(0); }

.button { text-align: center; padding: 20px 0; }
.button .btn-stl { display: inline-block; width: 150px; height: 40px; overflow: hidden; border: 1px solid #f50d1a; border-radius: 5px; background: none; color: #f50d1a; font-size: 1rem; position: relative; -moz-transition: ease 0.3s; -o-transition: ease 0.3s; -webkit-transition: ease 0.3s; transition: ease 0.3s; }
.button .btn-stl span, .button .btn-stl i { display: block; position: relative; z-index: 2; height: 100%; line-height: 40px; -moz-transition: ease 0.3s; -o-transition: ease 0.3s; -webkit-transition: ease 0.3s; transition: ease 0.3s; }
.button .btn-stl:after { content: ""; display: block; position: absolute; bottom: -40px; left: 0; background: #f50d1a; width: 100%; height: 100%; z-index: 0; -moz-transition: ease 0.3s; -o-transition: ease 0.3s; -webkit-transition: ease 0.3s; transition: ease 0.3s; }
.button .btn-stl:hover span, .button .btn-stl:hover i { color: #fff; -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -webkit-transform: translateY(-100%); transform: translateY(-100%); }
.button .btn-stl:hover:after { bottom: 0; }

/*table樣板*/
.table-wrap{
  width: 100%;
  overflow: auto;
}
.red-table{
  width: 100%;
  font-size: 0.9rem;
  min-width: 768px;
  text-align: center;
}
.red-table .red-bg{
  background: #f1523f;
  color: #fff ;
}
.red-table .grey-bg{
  background: #f2f2f2;
  color: #000;
}
.red-table td{padding: 5px; border: 1px solid #fff;}
.red-table .align-left{text-align: left;}
.red-table .f-bigger td{font-size: 1rem; padding: 10px 5px;}

.cerBox { clear: both; text-align: center; width: 100%; overflow: hidden; }
.cerBox img {
  padding: 20px;
}


/*animate */
.leftIn { -webkit-animation: leftIn 1.5s 0.3s cubic-bezier(0.46, -0.68, 0.34, 1.46) both; -moz-animation: leftIn 1.5s 0.3s cubic-bezier(0.46, -0.68, 0.34, 1.46) both; -ms-animation: leftIn 1.5s 0.3s cubic-bezier(0.46, -0.68, 0.34, 1.46) both; -o-animation: leftIn 1.5s 0.3s cubic-bezier(0.46, -0.68, 0.34, 1.46) both; animation: leftIn 1.5s 0.3s cubic-bezier(0.46, -0.68, 0.34, 1.46) both; }

@-webkit-keyframes leftIn { from { opacity: 0; -moz-transform: translate(-100px); -ms-transform: translate(-100px); -webkit-transform: translate(-100px); transform: translate(-100px); }
  to { opacity: 1; -moz-transform: translate(0); -ms-transform: translate(0); -webkit-transform: translate(0); transform: translate(0); } }
@keyframes leftIn { from { opacity: 0; -moz-transform: translate(-100px); -ms-transform: translate(-100px); -webkit-transform: translate(-100px); transform: translate(-100px); }
  to { opacity: 1; -moz-transform: translate(0); -ms-transform: translate(0); -webkit-transform: translate(0); transform: translate(0); } }
.rightIn { -webkit-animation: rightIn 1.5s 0.3s cubic-bezier(0.46, -0.68, 0.34, 1.46) both; -moz-animation: rightIn 1.5s 0.3s cubic-bezier(0.46, -0.68, 0.34, 1.46) both; -ms-animation: rightIn 1.5s 0.3s cubic-bezier(0.46, -0.68, 0.34, 1.46) both; -o-animation: rightIn 1.5s 0.3s cubic-bezier(0.46, -0.68, 0.34, 1.46) both; animation: rightIn 1.5s 0.3s cubic-bezier(0.46, -0.68, 0.34, 1.46) both; }

@-webkit-keyframes rightIn { from { opacity: 0; -moz-transform: translate(100px); -ms-transform: translate(100px); -webkit-transform: translate(100px); transform: translate(100px); }
  to { opacity: 1; -moz-transform: translate(0); -ms-transform: translate(0); -webkit-transform: translate(0); transform: translate(0); } }
@keyframes rightIn { from { opacity: 0; -moz-transform: translate(100px); -ms-transform: translate(100px); -webkit-transform: translate(100px); transform: translate(100px); }
  to { opacity: 1; -moz-transform: translate(0); -ms-transform: translate(0); -webkit-transform: translate(0); transform: translate(0); } }
.up { -webkit-animation: up 1.5s 0.5s ease both; -moz-animation: up 1.5s 0.5s ease both; -ms-animation: up 1.5s 0.5s ease both; -o-animation: up 1.5s 0.5s ease both; animation: up 1.5s 0.5s ease both; }

@-webkit-keyframes up { from { opacity: 0; -moz-transform: translate(0, 125px); -ms-transform: translate(0, 125px); -webkit-transform: translate(0, 125px); transform: translate(0, 125px); }
  to { opacity: 1; -moz-transform: translate(0, 0px); -ms-transform: translate(0, 0px); -webkit-transform: translate(0, 0px); transform: translate(0, 0px); } }
@keyframes up { from { opacity: 0; -moz-transform: translate(0, 125px); -ms-transform: translate(0, 125px); -webkit-transform: translate(0, 125px); transform: translate(0, 125px); }
  to { opacity: 1; -moz-transform: translate(0, 0px); -ms-transform: translate(0, 0px); -webkit-transform: translate(0, 0px); transform: translate(0, 0px); } }
.skewDown { -webkit-animation: skewDown 1.5s 0.5s ease both; -moz-animation: skewDown 1.5s 0.5s ease both; -ms-animation: skewDown 1.5s 0.5s ease both; -o-animation: skewDown 1.5s 0.5s ease both; animation: skewDown 1.5s 0.5s ease both; }

@-webkit-keyframes skewDown { from { opacity: 0; -moz-transform: translate(0, -125px) skew(0deg); -ms-transform: translate(0, -125px) skew(0deg); -webkit-transform: translate(0, -125px) skew(0deg); transform: translate(0, -125px) skew(0deg); }
  to { opacity: 1; -moz-transform: translate(0, -25px) skew(-8deg); -ms-transform: translate(0, -25px) skew(-8deg); -webkit-transform: translate(0, -25px) skew(-8deg); transform: translate(0, -25px) skew(-8deg); } }
@keyframes skewDown { from { opacity: 0; -moz-transform: translate(0, -125px) skew(0deg); -ms-transform: translate(0, -125px) skew(0deg); -webkit-transform: translate(0, -125px) skew(0deg); transform: translate(0, -125px) skew(0deg); }
  to { opacity: 1; -moz-transform: translate(0, -25px) skew(-8deg); -ms-transform: translate(0, -25px) skew(-8deg); -webkit-transform: translate(0, -25px) skew(-8deg); transform: translate(0, -25px) skew(-8deg); } }
.skewUp { -webkit-animation: skewUp 1.5s 0.5s ease both; -moz-animation: skewUp 1.5s 0.5s ease both; -ms-animation: skewUp 1.5s 0.5s ease both; -o-animation: skewUp 1.5s 0.5s ease both; animation: skewUp 1.5s 0.5s ease both; }

@-webkit-keyframes skewUp { from { opacity: 0; -moz-transform: translate(0, 125px) skew(0deg); -ms-transform: translate(0, 125px) skew(0deg); -webkit-transform: translate(0, 125px) skew(0deg); transform: translate(0, 125px) skew(0deg); }
  to { opacity: 1; -moz-transform: translate(-7px, 25px) skew(-8deg); -ms-transform: translate(-7px, 25px) skew(-8deg); -webkit-transform: translate(-7px, 25px) skew(-8deg); transform: translate(-7px, 25px) skew(-8deg); } }
@keyframes skewUp { from { opacity: 0; -moz-transform: translate(0, 125px) skew(0deg); -ms-transform: translate(0, 125px) skew(0deg); -webkit-transform: translate(0, 125px) skew(0deg); transform: translate(0, 125px) skew(0deg); }
  to { opacity: 1; -moz-transform: translate(-7px, 25px) skew(-8deg); -ms-transform: translate(-7px, 25px) skew(-8deg); -webkit-transform: translate(-7px, 25px) skew(-8deg); transform: translate(-7px, 25px) skew(-8deg); } }