/*
 * CSS Document
 * ==========================================================================
 * 版權所有 2017 鉅潞科技網頁設計公司，並保留所有權利。
 * 網站地址: http://www.grnet.com.tw
 * ==========================================================================
 * $Author: 大美女 $
 * $Date: 2019-03-26 (二) $
*/

@charset "UTF-8";
@font-face { font-family: 'Oswald-Regular'; src: url("../fonts/Oswald-Regular.woff2") format("woff2"), url("../fonts/Oswald-Regular.woff") format("woff"); font-weight: normal; font-style: normal; }

/*reset*/
html { font-size: 16px; }

body { width: 100%; color: #222; font-size: 1rem; line-height: 1.7; font-family: 'Oswald-Regular', 'Microsoft JhengHei', sans-serif; overflow-x: hidden; -webkit-text-size-adjust: none; -webkit-font-smoothing: antialiased; -ms-overflow-style: scrollbar; }

html, body { margin: 0; }

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

*:focus, *:active { outline: 0; }

h1, h2, h3, h4, h5, h6 { font-weight: normal; line-height: 1.7; }

label { font-weight: inherit; }

input, button, textarea, select, optgroup, option { font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; outline: 0; }

textarea { resize: vertical; }

ol.reset, ul.reset { margin: 0; padding: 0; list-style: none; }

input, button, textarea, select { *font-size: 100%; }

code, kbd, samp, tt { font-size: 100%; }

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

/*scroll-view*/
.scroll-fade { opacity: 0; -webkit-transition: opacity 1.5s, -webkit-transform 0.8s; -o-transition: opacity 1.5s, -o-transform 0.8s; transition: opacity 1.5s, -webkit-transform 0.8s; -o-transition: opacity 1.5s, transform 0.8s; transition: opacity 1.5s, transform 0.8s; transition: opacity 1.5s, transform 0.8s, -webkit-transform 0.8s; }

.scroll-fade.scroll-view { opacity: 1; }

.scroll-fade-down { -webkit-transform: translateY(-50px); -ms-transform: translateY(-50px); transform: translateY(-50px); opacity: 0; -webkit-transition: opacity 1.5s, -webkit-transform 0.8s; -o-transition: opacity 1.5s, -o-transform 0.8s; transition: opacity 1.5s, -webkit-transform 0.8s; -o-transition: opacity 1.5s, transform 0.8s; transition: opacity 1.5s, transform 0.8s; transition: opacity 1.5s, transform 0.8s, -webkit-transform 0.8s; }

.scroll-fade-down.scroll-view { opacity: 1; }

.scroll-fade-down.scroll-view { -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); }

.scroll-fade-up { -webkit-transform: translateY(50px); -ms-transform: translateY(50px); transform: translateY(50px); opacity: 0; -webkit-transition: opacity 1.5s, -webkit-transform 0.8s; -o-transition: opacity 1.5s, -o-transform 0.8s; transition: opacity 1.5s, -webkit-transform 0.8s; -o-transition: opacity 1.5s, transform 0.8s; transition: opacity 1.5s, transform 0.8s; transition: opacity 1.5s, transform 0.8s, -webkit-transform 0.8s; }

.scroll-fade-up.scroll-view { opacity: 1; }

.scroll-fade-up.scroll-view { -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); }

.scroll-fade-left { -webkit-transform: translateX(-50px); -ms-transform: translateX(-50px); transform: translateX(-50px); opacity: 0; -webkit-transition: opacity 1.5s, -webkit-transform 0.8s; -o-transition: opacity 1.5s, -o-transform 0.8s; transition: opacity 1.5s, -webkit-transform 0.8s; -o-transition: opacity 1.5s, transform 0.8s; transition: opacity 1.5s, transform 0.8s; transition: opacity 1.5s, transform 0.8s, -webkit-transform 0.8s; }

.scroll-fade-left.scroll-view { opacity: 1; }

.scroll-fade-left.scroll-view { -webkit-transform: translateX(0px); -ms-transform: translateX(0px); transform: translateX(0px); }

.scroll-fade-right { -webkit-transform: translateX(50px); -ms-transform: translateX(50px); transform: translateX(50px); opacity: 0; -webkit-transition: opacity 1.5s, -webkit-transform 0.8s; -o-transition: opacity 1.5s, -o-transform 0.8s; transition: opacity 1.5s, -webkit-transform 0.8s; -o-transition: opacity 1.5s, transform 0.8s; transition: opacity 1.5s, transform 0.8s; transition: opacity 1.5s, transform 0.8s, -webkit-transform 0.8s; }

.scroll-fade-right.scroll-view { opacity: 1; }

.scroll-fade-right.scroll-view { -webkit-transform: translateX(0px); -ms-transform: translateX(0px); transform: translateX(0px); }

.scroll-rotateY { -webkit-transform: rotateY(90deg); -ms-transform: rotateY(90deg); transform: rotateY(90deg); opacity: 0; -webkit-transition: opacity 1.5s, -webkit-transform 0.8s; -o-transition: opacity 1.5s, -o-transform 0.8s; transition: opacity 1.5s, -webkit-transform 0.8s; -o-transition: opacity 1.5s, transform 0.8s; transition: opacity 1.5s, transform 0.8s; transition: opacity 1.5s, transform 0.8s, -webkit-transform 0.8s; }

.scroll-rotateY.scroll-view { opacity: 1; }

.scroll-rotateY.scroll-view { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); }

/*pace*/
.pace { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; position: fixed; z-index: 10000; top: 0; left: 0; width: 100%; height: 100%; -webkit-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; transform-origin: 100% 100%; }

.pace #pace-logo { width: 350px; height: 90px; margin: auto; position: absolute; left: 50%; top: 50%; z-index: 2; margin-left: -150px; margin-top: -30px; z-index: 20; }

.pace #pace-logo svg { fill: #fff; position: absolute; left: 0; top: 0; width: 100%; height: 100%; }

.pace .pace-progress { -webkit-box-sizing: border-box; box-sizing: border-box; z-index: 2; display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: #1d2088; overflow: hidden; }

.pace .pace-activity { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background: #fff; display: block; }

.pace .pace-activity:before { content: ""; width: 350px; height: 90px; background: url(../images/logo.svg) no-repeat center center; background-size: 100% auto; position: absolute; top: 50%; left: 50%; z-index: 1; margin-left: -151px; margin-top: -31px; -webkit-transition: opacity 0.5s; -o-transition: opacity 0.5s; transition: opacity 0.5s; }

.pace.pace-inactive { opacity: 0; -webkit-transition: opacity 0.25s 0.35s, -webkit-transform 0s 0.5s; transition: opacity 0.25s 0.35s, -webkit-transform 0s 0.5s; -o-transition: opacity 0.25s 0.35s, transform 0s 0.5s; transition: opacity 0.25s 0.35s, transform 0s 0.5s; transition: opacity 0.25s 0.35s, transform 0s 0.5s, -webkit-transform 0s 0.5s; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-animation: paceClipping 0.4s 0.1s linear forwards; animation: paceClipping 0.4s 0.1s linear forwards; }

@media only screen and (max-width: 767px) { .pace #pace-logo { width: 250px; height: 50px; margin-left: -125px; margin-top: -25px; }
  .pace .pace-activity:before { width: 250px; height: 50px; margin-left: -125px; margin-top: -25px; } }

@-webkit-keyframes paceClipping { 0% { -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); }
  50% { -webkit-clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 40% 100%); clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 40% 100%); }
  100% { -webkit-clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%); clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%); } }

@keyframes paceClipping { 0% { -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); }
  50% { -webkit-clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 40% 100%); clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 40% 100%); }
  100% { -webkit-clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%); clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%); } }

.svg-defs { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: -1; pointer-events: none; }

@media only screen and (max-width: 991px) { .svg-defs { display: none; } }

.page-wrap { opacity: 0; }

.pace-done .page-wrap { opacity: 1; -webkit-transition: opacity 1s; -o-transition: opacity 1s; transition: opacity 1s; }


/* 語系彈出 */
#popup-language {
  margin: 0 auto;
  max-width: 960px;
  position: relative;
  overflow: hidden;
}
#popup-language .wrap{
  display: table;
  width: 100%;
  font-weight: 300;
  position: relative;
  z-index: 2;
}

#popup-language .wrap .left{
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 55%;
  font-size: 1.25rem;
  position: relative;
  padding-top: 30px;
  padding-bottom: 30px;
}
#popup-language .wrap .left:before{
  content: '';
  top: 0;
  left: 0;
  width: 120%;
  bottom: 15px;
  top: 10px;
  position: absolute;
  z-index: 0;
  background: #eee;
  box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
  -webkit-transform: skewX(-20deg) translateX(-20%);
  -ms-transform: skewX(-20deg) translateX(-20%);
  -o-transform: skewX(-20deg) translateX(-20%);
  transform: skewX(-20deg) translateX(-20%);
}
#popup-language .wrap .left strong, #popup-language .wrap .left span, #popup-language .wrap .left a{
  z-index: 2;
  position: relative;
}
#popup-language .wrap .left strong{
  display: block;
  margin: 0 auto 15px auto;
  font-size: 1.625rem;
  font-weight: 400;
}
#popup-language .wrap .left .btn-lang-global{
  display: block;
  border-radius: 5px;
  margin: 15px auto 5px auto;
  padding: 5px 15px;
  text-align: center;
  max-width: 90px;
  background: #4472c4;
  border: 1px solid #3461b2;
  color: #fff;
  font-size: 1.0625rem;
  font-family: 'Arial', snas-serif;
}
#popup-language .wrap .left .btn-lang-global:hover{
  background: #305ba9;
}
#popup-language .wrap .right{
  display: table-cell;
  vertical-align: top;
  text-align: left;
  width: 45%;
  padding-top: 35px;
  padding-left: 35px;
}
#popup-language .wrap .right p{
  margin: 0 0 10px 0;
  font-size: 1.25rem;
  color: #444;
}
#popup-language .wrap .right .lang-area{
  text-align: left;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  align-content: flex-start;
  display: block \9;
  flex-wrap: wrap;
  font-size: 0;
}
#popup-language .wrap .right .lang-area li{
  display: inline-block \9;
  margin-top: -1px;
  margin-right: 20px;
}
#popup-language .wrap .right .lang-area li a{
  display: block;
  font-size: 1.25rem;
  color: #222;
  padding: 5px;
  text-align: center;
  white-space: nowrap;
}
#popup-language .wrap .right .lang-area li a:hover{
  color: #305ba9;
}
#popup-language .content{
  border: 1px solid #ccc;
  box-shadow: 0 0 15px rgba(0,0,0,0.1);
  padding: 30px;
  border-radius: 10px;
  width: 100%;
  background: #fefefe;
  position: relative;
}
#popup-language .content:after{
  content: '';
  z-index: 0;
  width: 60%;
  right: 10px;
  top: 50%;
  position: absolute;
  display: block;
  opacity: 0.8;
  padding-bottom: 30.456%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  background: url(../images/map_world.png) no-repeat center center;
  -webkit-background-size: contain;
  background-size: contain;
}
#popup-language button.mfp-close{
  display: inline-block;
  position: absolute;
  width: 35px;
  height: 35px;
  top: 10px;
  right: 10px;
  background: #111;
  border-radius: 50%;
  font-size: 0;
  border: 2px solid #fff;
  opacity: 1;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1)
}
#popup-language button.mfp-close:hover{
  background: #444;
}
#popup-language button.mfp-close:before, #popup-language button.mfp-close:after{
  content: '';
  display: inline-block;
  position: absolute;
  width: 12px;
  height: 2px;
  background: #fff;
  left: 50%;
  top: 50%;
  margin-top: -1px;
  margin-left: -6px;
}
#popup-language button.mfp-close:before{
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
#popup-language button.mfp-close:after{
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
#popup-language .f-text{
  text-align: right;
  font-size: 1rem;
  margin: 20px 0 0 0 ;
  color: #999;
}
#popup-language .coname{
  color: #1d2088;
  font-size: 1.125rem;
  display: block;
  margin: 0 0 30px 0;
}
#popup-language .coname span{
  width: 175px;
  position: relative;
  font-size: 0;
  display: inline-block;
  vertical-align: text-bottom;
}
#popup-language .coname span:before{
  content: '';
  display: block;
  width: 100%;
  padding-bottom: 21%;
  background: url(../images/mailtemp_logo.png) no-repeat center center;
  -webkit-background-size: cover;
  background-size: cover;
}
@media (max-width:991px){
  #popup-language .wrap .left{
    width: 40%;
  }
  #popup-language .wrap .right{
    width: 60%;
  }
}
@media (max-width:767px){
  #popup-language .wrap{
    display: block;
  }
  #popup-language .content:after{
    width: 80%;
    right: auto;
    left: 50%;
    top: auto;
    bottom: 20px;
    padding-bottom: 40.608%;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    -o-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
  }
  #popup-language .wrap .left{
    display: block;
    width: auto;
  }
  #popup-language .wrap .left:before{
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    bottom: 0;
    border-radius: 2px;
    background: rgba(155,155,155,0.25);
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
    -webkit-transform: skewX(0deg) translateX(0);
    -ms-transform: skewX(0deg) translateX(0);
    -o-transform: skewX(0deg) translateX(0);
    transform: skewX(0deg) translateX(0);
  }
  #popup-language .wrap .right{
    display: block;
    width: auto;
    text-align: center;
    padding-left: 0;
  }
  #popup-language .wrap .right .lang-area{
    text-align: center;
    display: block;
  }
  #popup-language .wrap .right .lang-area li{
    display: inline-block;
    margin-right: 0;
  }
  #popup-language .wrap .right .lang-area li a{
    padding: 5px 20px;
  }
}
@media (max-width:499px){
  #popup-language .content{
    padding: 20px 15px;
  }
  #popup-language .f-text{
    text-align: center;
    font-size: 0.75rem;
  }
  #popup-language .coname{
    text-align: center;
    font-size: 0.9375rem;
    margin: 15px auto 10px auto;
  }
  #popup-language .coname span{
    display: block;
    margin: 0 auto ;
    width: 150px;
  }
  #popup-language .content:after{
    bottom: 35px;
  }
}

/*header*/
#header { position: absolute; top: 0; left: 0; width: 100%; z-index: 999; background: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0 50px; }

#header .logo { margin: 0; float: left; }

#header .logo a { display: block; width: 170px; height: 40px; position: relative; }

#header .logo a svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; fill: #1d2088; }

#header .h-right { float: right; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

#header .h-right .nav-menu { margin-right: 20px; }

#header .h-right .nav-menu > ul > li { display: inline-block; vertical-align: middle; padding: 30px 15px; }

#header .h-right .nav-menu > ul > li > a { color: #000; display: block; }

#header .h-right .nav-menu > ul > li.current > a { color: #6789b2; }

#header .h-right .nav-menu > ul > li.current > a span { -webkit-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); }

#header .h-right .options { margin-right: 10px; font-size: 0; }

#header .h-right .options a { min-width: 30px; height: 30px; margin: 0 5px; border-radius: 50px; background: #14528f; color: #FFF; display: inline-block; vertical-align: middle; position: relative; font-size: 0.75rem; text-align: center; line-height: 1.2; -webkit-box-shadow: inset 2px -3px 6px #2f7dbd; box-shadow: inset 2px -3px 6px #2f7dbd; }
#header .h-right .options a .icon { position: absolute; width: 14px; height: 14px; left: 50%; top: 50%; display: block; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
#header .h-right .options a.btn-lang .icon{ white-space: nowrap; position: relative; width: auto; padding: 0 4px; }
#header .h-right .options a .icon svg { position: absolute; width: 100%; height: 100%; left: 0; top: 0; }
#header .h-right .lang-opts { position: absolute; top: auto; left: 75%; margin: 0 auto; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); display: none; margin-top: 10px;  }
#header .h-right .lang-opts li{ display: block; }
#header .h-right .lang-opts li a{ display: block; background: #45658b; color: #fff; font-size: 0.9375rem; text-align: center; padding: 10px; white-space: nowrap; border-radius: 0; box-shadow: none; border-top: 1px solid rgba(255,255,255,0.2); min-width: 100px; height: auto;}
#header .h-right .lang-opts li a:hover{ background: #30598a; box-shadow: none; }
#header .h-right .lang-opts li:first-child a{ border-top: none; }
#header .h-right .options .member-func{ display: none; position: absolute; width: 150px; top: 40px; left: 20px; background: url(../images/f-bg.jpg); margin-left: -75px; }
#header .h-right .options .member-func:before{content: ""; display: block; position: absolute; top: 0; left: 50%; border-style: solid; margin-top: -6px; margin-left: -5px; border-width: 0 5px 6px 5px; border-color: transparent transparent #2b2b2b transparent; }
#header .h-right .options .member-func > li{  white-space: nowrap; text-align: center; margin-bottom: 1px; }
#header .h-right .options .member-func > li > a{ display: block; width: auto; height: auto; margin:0; padding: 10px 15px; border-radius: 0; background: rgba(0, 0, 0, 0.4); color: #fff; line-height: 1.8; font-size: 1rem; -webkit-box-shadow: none; box-shadow: none;  }
#header .h-right .options .member-func > li > a:hover{background: #45658b; }

#header.scroll-view { position: fixed; }

#header.scroll-view .h-right .nav-menu > ul > li { padding: 20px 15px; }

@media only screen and (min-width: 992px) { #header .h-right .nav-menu { height: auto !important; }
  #header .h-right .nav-menu > ul > li { position: relative; }
  #header .h-right .nav-menu > ul > li > a { font-size: 1.125rem; height: 30px; display: block; overflow: hidden; }
  #header .h-right .nav-menu > ul > li > a span { display: inline-block; text-align: center; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: -webkit-transform 0.35s; transition: -webkit-transform 0.35s; -o-transition: transform 0.35s; transition: transform 0.35s; transition: transform 0.35s, -webkit-transform 0.35s; }
  #header .h-right .nav-menu > ul > li > a span:before { content: attr(data-en); display: block; }
  #header .h-right .nav-menu > ul > li ul { position: absolute; top: 100%; left: 50%; display: block !important; -webkit-transform: scaleX(0) translateX(-50%); -ms-transform: scaleX(0) translateX(-50%); transform: scaleX(0) translateX(-50%); opacity: 0; width: auto; min-width: 150%; background: url(../images/f-bg.jpg); }
  #header .h-right .nav-menu > ul > li ul:before { content: ""; display: block; position: absolute; top: 0; left: 50%; border-style: solid; margin-top: -6px; margin-left: -5px; border-width: 0 5px 6px 5px; border-color: transparent transparent #2b2b2b transparent; }
  #header .h-right .nav-menu > ul > li ul li { white-space: nowrap; text-align: center; margin-bottom: 1px; }

  #header .h-right .nav-menu > ul > li ul li.light a{ background: rgba(90, 93, 101, 0.4); }
  #header .h-right .nav-menu > ul > li ul li:last-child { margin-bottom: 0px; }
  #header .h-right .nav-menu > ul > li ul li a { background: rgba(0, 0, 0, 0.4); color: #fff; display: block; padding: 10px; }
  #header .h-right .nav-menu > ul > li:hover > a { color: #6789b2; }
  #header .h-right .nav-menu > ul > li:hover > a span { -webkit-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); }
  #header .h-right .nav-menu > ul > li:hover ul { -webkit-transform: scaleX(1) translateX(-50%); -ms-transform: scaleX(1) translateX(-50%); transform: scaleX(1) translateX(-50%); opacity: 1; }
  #header .h-right .nav-menu > ul > li ul li:hover a { background: #45658b; }
  #header .h-right .nav-menu .search-wrap { display: none !important; }
  #header .h-right .options a { -webkit-transition: -webkit-box-shadow 0.25s; transition: -webkit-box-shadow 0.25s; -o-transition: box-shadow 0.25s; transition: box-shadow 0.25s; transition: box-shadow 0.25s, -webkit-box-shadow 0.25s; }
  #header .h-right .options a:hover { -webkit-box-shadow: inset -2px 3px 6px #2f7dbd; box-shadow: inset -2px 3px 6px #2f7dbd; }
  #header .h-right .search { position: relative; width: auto; }
  #header .h-right .search input { width: 150px; height: 35px; line-height: 35px; border-radius: 30px; background: #45658b; border: none; color: #fff; padding: 0 20px; -webkit-transition: width 0.25s; -o-transition: width 0.25s; transition: width 0.25s; }
  #header .h-right .search input::-webkit-input-placeholder { color: #fff; font-size: 0.937rem; }
  #header .h-right .search input::-moz-placeholder { color: #fff; font-size: 0.937rem; }
  #header .h-right .search input:-ms-input-placeholder { color: #fff; font-size: 0.937rem; }
  #header .h-right .search input:focus { -webkit-box-shadow: inset 2px 2px 3px #344c69; box-shadow: inset 2px 2px 3px #344c69; width: 180px; }
  #header .h-right .search .s-btn { position: absolute; right: 5px; top: 50%; width: 35px; height: 35px; display: block; margin-top: -18px; border: none; background: none; z-index: 2; }
  #header .h-right .search .s-btn svg { width: 18px; height: 18px; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
  #header .switch { display: none; }
  #header.scroll-view { -webkit-animation: fadeDown 0.35s 0.00001s ease-in forwards; animation: fadeDown 0.35s 0.00001s ease-in forwards; } }

@media only screen and (max-width: 1199px) { #header { padding: 0 20px; }
  #header .logo a { width: 150px; }
  #header .h-right .nav-menu { margin-right: 0px; }
  #header .h-right .nav-menu > ul > li { padding: 30px 10px; }
  #header .h-right .options { margin-right: 5px; }
  #header .h-right .search input { width: 130px; }
  #header .h-right .search input:focus { width: 150px; }
  #header.scroll-view .h-right .nav-menu > ul > li { padding: 20px 10px; } }

@media only screen and (max-width: 991px) { #header { display: block; padding: 0; position: fixed; }
  #header .logo { float: left; margin: 10px 0 0 20px; }
  #header .h-right { display: block; }
  #header .h-right .nav-menu { position: absolute; top: 100%; right: 0; width: 300px; background: #fff; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); -webkit-transition: -webkit-transform 0.5s; transition: -webkit-transform 0.5s; -o-transition: transform 0.5s; transition: transform 0.5s; transition: transform 0.5s, -webkit-transform 0.5s; overflow-y: auto; }
  #header .h-right .nav-menu.open-menu { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); }
  #header .h-right .nav-menu > ul { border-top: 1px solid #eee; max-height: 100vh; }
  #header .h-right .nav-menu > ul > li { display: block; width: 100%; padding: 0; }
  #header .h-right .nav-menu > ul > li > a { position: relative; padding: 15px; color: #222; border-bottom: 1px solid #eee; }
  #header .h-right .nav-menu > ul > li > a i { position: absolute; top: 50%; right: 20px; width: 10px; height: 10px; display: block; margin-top: -5px; -webkit-transition: -webkit-transform 0.25s; transition: -webkit-transform 0.25s; -o-transition: transform 0.25s; transition: transform 0.25s; transition: transform 0.25s, -webkit-transform 0.25s; }
  #header .h-right .nav-menu > ul > li > a i:before, #header .h-right .nav-menu > ul > li > a i:after { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 2px; background: #000; margin-left: -5px; -webkit-transition: -webkit-transform 0.5s; transition: -webkit-transform 0.5s; -o-transition: transform 0.5s; transition: transform 0.5s; transition: transform 0.5s, -webkit-transform 0.5s; }
  #header .h-right .nav-menu > ul > li > a i:after { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); }
  #header .h-right .nav-menu > ul > li > a.on i { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); -webkit-transition: -webkit-transform 0.5s 0.25s; transition: -webkit-transform 0.5s 0.25s; -o-transition: transform 0.5s 0.25s; transition: transform 0.5s 0.25s; transition: transform 0.5s 0.25s, -webkit-transform 0.5s 0.25s; }
  #header .h-right .nav-menu > ul > li > a.on i:before, #header .h-right .nav-menu > ul > li > a.on i:after { background: #6789b2; -webkit-transition: -webkit-transform 0.5s 0.25s; transition: -webkit-transform 0.5s 0.25s; -o-transition: transform 0.5s 0.25s; transition: transform 0.5s 0.25s; transition: transform 0.5s 0.25s, -webkit-transform 0.5s 0.25s; }
  #header .h-right .nav-menu > ul > li > a.on i:before { -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); }
  #header .h-right .nav-menu > ul > li > ul { background: #f9f9f9; display: none; padding: 10px 0; }
  #header .h-right .nav-menu > ul > li > ul > li.mb-only { background: rgba(69, 101, 139, 0.4); margin-top: -10px; }
  #header .h-right .nav-menu > ul > li > ul > li.mb-only a { color: #fff; }
  #header .h-right .nav-menu > ul > li > ul > li > a { padding: 8px 15px; display: block; color: #000; }
  #header .h-right .nav-menu .search-wrap { background: #6789b2; position: relative; width: auto; }
  #header .h-right .nav-menu .search-wrap input { width: 100%; height: 50px; line-height: 50px; background: #45658b; border: none; color: #fff; padding: 0 20px; -webkit-transition: width 0.25s; -o-transition: width 0.25s; transition: width 0.25s; }
  #header .h-right .nav-menu .search-wrap input::-webkit-input-placeholder { color: #fff; font-size: 0.937rem; }
  #header .h-right .nav-menu .search-wrap input::-moz-placeholder { color: #fff; font-size: 0.937rem; }
  #header .h-right .nav-menu .search-wrap input:-ms-input-placeholder { color: #fff; font-size: 0.937rem; }
  #header .h-right .nav-menu .search-wrap .s-btn { position: absolute; right: 5px; top: 50%; width: 35px; height: 35px; display: block; margin-top: -18px; border: none; background: none; z-index: 2; }
  #header .h-right .nav-menu .search-wrap .s-btn svg { width: 18px; height: 18px; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
  #header .h-right .search { display: none; }
  #header .h-right .options { margin: 0; }
  #header .h-right .options a { border-radius: 0; margin: 0; width: 60px; height: 60px; -webkit-box-shadow: none; box-shadow: none; background: #6789b2; border-left: 1px solid rgba(255, 255, 255, 0.1); }
  #header .h-right .options a .icon { width: 20px; height: 20px; font-size: 1.125rem; }
  #header .h-right .options a.btn-lang .icon{ font-size: 0.9375rem; }
  #header .h-right .lang-opts{ margin-top: 0; }
  #header .h-right .lang-opts li a{ height: 40px; line-height: 40px; padding: 0 15px; }
  #header .switch { float: right; background: #14528f; border: none; color: #fff; font-weight: 700; font-size: 0.937rem; width: 60px; height: 60px; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
  #header .switch .icon { position: relative; width: 30px; height: 30px; display: inline-block; }
  #header .switch .icon i { display: block; width: 100%; height: 2px; background: #fff; position: absolute; left: 50%; top: 50%; margin-left: -15px; -webkit-transition: -webkit-transform 0.5s; transition: -webkit-transform 0.5s; -o-transition: transform 0.5s; transition: transform 0.5s; transition: transform 0.5s, -webkit-transform 0.5s; }
  #header .switch .icon .linetop { margin-top: -7px; }
  #header .switch .icon .linebottom { margin-top: 7px; }
  #header .switch.on .icon .linetop { margin-top: 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
  #header .switch.on .icon .linemiddle { width: 0; }
  #header .switch.on .icon .linebottom { margin-top: 0; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); }
  #header.scroll-view .h-right .nav-menu > ul > li { padding: 0; } }

@media only screen and (max-width: 767px) { #header .logo { margin-top: 5px; }
  #header .logo a { width: 120px; }
  #header .h-right .options a { width: 50px; height: 50px; }
  #header .switch { width: 50px; height: 50px; }
  #header .switch .icon { width: 25px; height: 25px; }
  #header .switch .icon i { margin-left: -12px; } }

@-webkit-keyframes fadeDown { 0% { -webkit-transform: translateY(-100%); transform: translateY(-100%); }
  100% { -webkit-transform: translateY(0%); transform: translateY(0%); } }

@keyframes fadeDown { 0% { -webkit-transform: translateY(-100%); transform: translateY(-100%); }
  100% { -webkit-transform: translateY(0%); transform: translateY(0%); } }

/*footer*/
#footer { position: relative; overflow: hidden; z-index: 10; margin-top: -100px; }

#footer .inner { -webkit-clip-path: url(#foot_clip); clip-path: url(#foot_clip); padding: 100px 0 0 0; background: url(../images/f-bg.jpg); }

#footer .inner .f-logo { width: 170px; height: 40px; display: block; margin: 0 auto 40px; position: relative; }

#footer .inner .f-logo svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }

#footer .inner .f-main { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; color: #fff; margin-bottom: 40px; }

#footer .inner .f-main .infomation { width: 26%; float: left; }

#footer .inner .f-main .infomation .tit { font-size: 1.4375rem; }

#footer .inner .f-main .infomation ul li { font-size: 0.937rem; }

#footer .inner .f-main .infomation ul li a { color: #fff; }

#footer .inner .f-main .f-menu { width: 74%; float: right; font-size: 0; padding-left: 50px; }

#footer .inner .f-main .f-menu li { width: 16.66667%; display: inline-block; vertical-align: top; font-size: 0.875rem; padding: 0 25px; }

#footer .inner .f-main .f-menu li .box { margin-bottom: 15px; }

#footer .inner .f-main .f-menu li a { color: #fff; display: block; }

#footer .inner .f-main .f-menu li .tit { position: relative; margin-bottom: 5px; }

#footer .inner .f-main .f-menu li .tit:before, #footer .inner .f-main .f-menu li .tit:after { content: ""; position: absolute; left: -25px; top: 50%; width: 12px; height: 12px; margin-top: -5px; border-radius: 50%; }

#footer .inner .f-main .f-menu li .tit:before { background: #6c87b1; margin-left: -5px; z-index: 2; }

#footer .inner .f-main .f-menu li .tit:after { border: 1px solid #fff; opacity: 0.5; }

#footer .inner .f-main .f-menu li ul li { display: block; width: 100%; padding: 0; }

#footer .inner .copyright { border-top: 1px solid rgba(255, 255, 255, 0.3); text-align: center; font-size: 0.812rem; color: #fff; padding: 15px 0; letter-spacing: 1px; }

#footer .inner .copyright a { color: #fff; }

#footer .inner .copyright span, #footer .inner .copyright a { display: inline-block; }

#footer .inner .copyright .sitemap { margin-left: 20px; padding: 3px 10px; display: inline-block; border: 1px solid rgba(255, 255, 255, 0.3); }

@media only screen and (min-width: 992px) { #footer .inner .f-main .infomation ul { opacity: 0.85; }
  #footer .inner .f-main .infomation ul li a:hover { text-decoration: underline; }
  #footer .inner .f-main .f-menu li a { opacity: 0.85; }
  #footer .inner .f-main .f-menu li a:hover { opacity: 1; text-decoration: underline; }
  #footer .inner .copyright a:hover { text-decoration: underline; } }

@media only screen and (max-width: 991px) { #footer { margin-top: 0; }
  #footer .inner { padding: 50px 0 0 0; }
  #footer .inner .f-main { display: block; text-align: center; }
  #footer .inner .f-main .infomation { width: auto; display: inline-block; float: none; text-align: center; }
  #footer .inner .f-main .infomation ul { font-size: 0; }
  #footer .inner .f-main .infomation ul li { display: inline-block; vertical-align: middle; padding: 3px 10px; }
  #footer .inner .f-main .f-menu { display: none; }
  #footer .inner .f-logo { width: 120px; height: 30px; margin: 0 auto 20px; }
  #footer .inner .copyright { text-align: center; }
  #footer .inner .copyright span { display: block; }
  #footer .inner .copyright .sitemap { display: inline-block; margin: 5px 0; } }

@media only screen and (max-width: 767px) { #footer .inner .f-main .infomation ul { display: inline-block; text-align: left; }
  #footer .inner .f-main .infomation ul li { display: block; padding: 0; } }

/*other gobal*/
.overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; background: #000; display: block; z-index: 998; -webkit-transition: opacity 0.4s; -o-transition: opacity 0.4s; transition: opacity 0.4s; pointer-events: none; }

.overlay.in { pointer-events: fill; opacity: 0.8; }

@media only screen and (min-width: 992px) { .overlay { display: none; } }

.page-wrap { overflow: hidden; background: #fafafd; }

.img-preset { opacity: 0; -webkit-transition: opacity 0.5s; -o-transition: opacity 0.5s; transition: opacity 0.5s; }

.img-is-loaded { opacity: 1; -webkit-transition: opacity 0.5s; -o-transition: opacity 0.5s; transition: opacity 0.5s; }

.go-top { text-align: center; width: 50px; border: 1px solid #fff; color: #fff; position: fixed; bottom: -150px; right: 50px; background: rgba(50, 50, 50, 0.8); font-size: 0.875rem; line-height: 1.3; padding: 5px 10px; z-index: 9981; -webkit-transition: bottom 0.25s, -webkit-transform 0.25s; transition: bottom 0.25s, -webkit-transform 0.25s; -o-transition: transform 0.25s, bottom 0.25s; transition: transform 0.25s, bottom 0.25s; transition: transform 0.25s, bottom 0.25s, -webkit-transform 0.25s; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); }

@media only screen and (max-width: 991px) { .go-top { bottom: 20px; right: 20px; } }

.go-top.scroll-view { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); bottom: 50px; }

.container-1400 { padding: 0 20px; }

@media only screen and (min-width: 1480px) { .container-1400 { width: 1400px; } }

.no-data { position: relative; min-height: 450px; margin-top: 30px; text-align: center; background: #fff; display: -ms-flex; display: -o-flex; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-justify-content: center; -o-justify-content: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-align-items: center; -o-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

.no-data > * { width: 100%; }

.g-title .t1 { margin: 0; color: #222; font-size: 3rem; }

.g-title .t1 .en { display: block; font-size: 1.375rem; }

@media only screen and (max-width: 1199px) { .g-title .t1 { font-size: 2.375rem; }
  .g-title .t1 .en { font-size: 1.125rem; } }

@media only screen and (max-width: 767px) { .g-title .t1 { font-size: 1.875rem; }
  .g-title .t1 .en { font-size: 1rem; } }

.page-banner { height: 415px; position: relative; z-index: 10; }

.page-banner .g-title { position: absolute; top: 50%; left: 0%; width: 100%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); z-index: 2; }

.page-banner .g-title .t1 { color: #fff; }

.page-banner .g-title .product-title { margin: 10px 0 00; color: #fff; font-size: 2.5rem; position: relative; }

.page-banner .g-title .product-title:before { content: ""; width: 1px; height: 30px; opacity: 0.5; background: #fff; display: block; margin: auto; }

.page-banner .bg { display: block; height: 100%; width: 100%; -webkit-clip-path: url(#banner_clip); clip-path: url(#banner_clip); background-position: center center; background-size: cover; }

@media only screen and (max-width: 1199px) { .page-banner .g-title .product-title { font-size: 2.1875rem; } }

@media only screen and (max-width: 991px) { .page-banner { height: 350px; }
  .page-banner .g-title .product-title { font-size: 1.75rem; } }

@media only screen and (max-width: 767px) { .page-banner { height: 300px; }
  .page-banner .g-title .product-title { font-size: 1.4375rem; } }

@media only screen and (max-width: 480px) { .page-banner { height: 250px; } }

.page-main { padding: 80px 0 200px; margin-top: -50px; }

@media only screen and (max-width: 991px) { .page-main { margin: 0; padding: 50px 0 100px; } }

@media only screen and (max-width: 767px) { .page-main { padding: 20px 0; } }

.g-button { border: none; border-radius: 30px; position: relative; overflow: hidden; display: inline-block; vertical-align: middle; padding: 8px; min-width: 150px; text-align: center; }

.g-button span { color: #fff; position: relative; z-index: 2; font-size: 0.875rem; letter-spacing: 1px; }

.g-button:before { content: ""; position: absolute; left: 0%; top: 0; width: 100%; height: 100%; -webkit-transform: skewX(40deg); -ms-transform: skewX(40deg); transform: skewX(40deg); -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; background-image: -owg-linear-gradient(left, rgba(47, 125, 189, 0) 0%, #2f7dbd 70%); background-image: -webkit-linear-gradient(left, rgba(47, 125, 189, 0) 0%, #2f7dbd 70%); background-image: -o-linear-gradient(left, rgba(47, 125, 189, 0) 0%, #2f7dbd 70%); background-image: -webkit-gradient(linear, left top, right top, from(rgba(47, 125, 189, 0)), color-stop(70%, #2f7dbd)); background-image: linear-gradient(left, rgba(47, 125, 189, 0) 0%, #2f7dbd 70%); -webkit-transition: left 0.5s; -o-transition: left 0.5s; transition: left 0.5s; }

.g-button:after { content: ""; position: absolute; top: 50%; left: 0; opacity: 0.5; width: 100%; height: 1px; display: block; background: #fff; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); }

.g-button.style-blue { background: #14528f; }

.g-button.style-ligtblue { background: #88abda; }

.g-button.style-ligtblue:before { background-image: -owg-linear-gradient(left, rgba(202, 217, 238, 0) 0%, #cad9ee 80%); background-image: -webkit-linear-gradient(left, rgba(202, 217, 238, 0) 0%, #cad9ee 80%); background-image: -o-linear-gradient(left, rgba(202, 217, 238, 0) 0%, #cad9ee 80%); background-image: -webkit-gradient(linear, left top, right top, from(rgba(202, 217, 238, 0)), color-stop(80%, #cad9ee)); background-image: linear-gradient(left, rgba(202, 217, 238, 0) 0%, #cad9ee 80%); }

.g-button.style-orange { background: #ffad25; }

.g-button.style-orange:before { background-image: -owg-linear-gradient(left, rgba(255, 208, 130, 0) 0%, #ffd082 80%); background-image: -webkit-linear-gradient(left, rgba(255, 208, 130, 0) 0%, #ffd082 80%); background-image: -o-linear-gradient(left, rgba(255, 208, 130, 0) 0%, #ffd082 80%); background-image: -webkit-gradient(linear, left top, right top, from(rgba(255, 208, 130, 0)), color-stop(80%, #ffd082)); background-image: linear-gradient(left, rgba(255, 208, 130, 0) 0%, #ffd082 80%); }

@media only screen and (min-width: 992px) { .g-button { -webkit-transition: -webkit-box-shadow 0.35s; transition: -webkit-box-shadow 0.35s; -o-transition: box-shadow 0.35s; transition: box-shadow 0.35s; transition: box-shadow 0.35s, -webkit-box-shadow 0.35s; }
  .g-button:hover { -webkit-box-shadow: inset 3px 3px 3px rgba(0, 0, 0, 0.15); box-shadow: inset 3px 3px 3px rgba(0, 0, 0, 0.15); }
  .g-button:hover:before { left: 25%; }
  .g-button:hover:after { -webkit-animation: lineAni 0.35s 0.15s linear forwards; animation: lineAni 0.35s 0.15s linear forwards; }
  .g-button.style-blue:hover { background: #124a82; }
  .g-button.style-ligtblue:hover { background: #7ca3d6; } }

.group-buttons { text-align: center; margin-top: 50px; }

.group-buttons a, .group-buttons button { display: inline-block; vertical-align: middle; height: 50px; line-height: 50px; color: #fff; border-radius: 5px; margin: 2px; border: none; overflow: hidden; position: relative; }

.group-buttons a:before, .group-buttons button:before { content: ""; position: absolute; left: -100%; top: 0; width: 100%; height: 100%; -webkit-transform: skewX(40deg); -ms-transform: skewX(40deg); transform: skewX(40deg); -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; opacity: 0; background-image: -owg-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 80%, rgba(255, 255, 255, 0) 100%); background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 80%, rgba(255, 255, 255, 0) 100%); background-image: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 80%, rgba(255, 255, 255, 0) 100%); background-image: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(80%, rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0))); background-image: linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 80%, rgba(255, 255, 255, 0) 100%); -webkit-transition: left 0.5s, opacity 0.5s; -o-transition: left 0.5s, opacity 0.5s; transition: left 0.5s, opacity 0.5s; }

.group-buttons .btn-back { background: #1c497f; width: 200px; }

.group-buttons .btn-fb { background: #45658b; width: 50px; }

.group-buttons .btn-line { background: #009944; width: 50px; }

.group-buttons .btn-line .img { width: 20px; height: 20px; display: block; position: absolute; left: 50%; top: 50%; margin-top: -10px; margin-left: -10px; }

.group-buttons .btn-clear { background: #2f7dbd; width: 200px; }

.group-buttons .btn-send { background: #1c497f; width: 200px; }

@media only screen and (min-width: 992px) { .group-buttons a:hover:before, .group-buttons button:hover:before { opacity: 1; left: 25%; } }

@media only screen and (max-width: 480px) { .group-buttons .btn-back { width: 150px; } }

@media only screen and (min-width: 992px) { .hover-style { position: relative; }
  .hover-style:before { content: "+"; position: absolute; left: 50%; top: 50%; z-index: 1; width: 60px; height: 60px; display: block; border-radius: 50%; text-align: center; line-height: 60px; font-size: 2.5rem; margin: -30px 0 0 -30px; background: #fff; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition: -webkit-transform 0.35s; transition: -webkit-transform 0.35s; -o-transition: transform 0.35s; transition: transform 0.35s; transition: transform 0.35s, -webkit-transform 0.35s; -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.25); box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.25); pointer-events: none; }
  .hover-style img { -webkit-transition: opacity 0.35s; -o-transition: opacity 0.35s; transition: opacity 0.35s; }
  .hover-style:hover:before { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }
  .hover-style:hover img { opacity: 0.8; } }

.g-cate .toggle { width: 100%; border: none; background: #6789b2; color: #fff; text-align: center; padding: 5px; font-size: 1.125rem; }

.g-cate .toggle span { vertical-align: middle; font-size: 0.75rem; margin-bottom: 6px; }

.g-cate ul { font-size: 0; text-align: center; }

.g-cate ul li { width: 20%; padding: 1px; display: inline-block; vertical-align: top; }

.g-cate ul li a { padding: 10px; display: block; background: #626262; color: #fff; text-align: center; font-size: 1.125rem; position: relative; -webkit-transition: background 0.35s; -o-transition: background 0.35s; transition: background 0.35s; }

.g-cate ul li.active a { background: #45658b; color: #fff; }

@media only screen and (min-width: 992px) { .g-cate ul { display: block !important; }
  .g-cate ul li.active a:before { content: ""; position: absolute; top: 0; left: 50%; width: 0; height: 0; border-style: solid; border-width: 7px 5px 0 5px; border-color: #fff transparent transparent transparent; }
  .g-cate ul li a:hover { color: #fff; background: #45658b; -webkit-box-shadow: inset 0 0 5px #344c69; box-shadow: inset 0 0 5px #344c69; } }

@media only screen and (max-width: 991px) { .g-cate { position: relative; z-index: 20; }
  .g-cate ul { position: absolute; left: 0; top: 100%; width: 100%; display: none; }
  .g-cate ul li { display: block; width: 100%; padding: 0; }
  .g-cate ul li a { background: #fff; font-size: 1rem; color: #222; border-bottom: 1px solid #f1f1f1; } }

.text-edit { line-height: 2; }

.text-edit img { height: auto !important; max-width: 100%; }

.text-edit table, .detail table{ word-break: break-word; }

@-webkit-keyframes lineAni { 0% { -webkit-transform: scaleX(0); transform: scaleX(0);
    -webkit-transform-origin: left top;
            transform-origin: left top; }
  49% { -webkit-transform: scaleX(1); transform: scaleX(1);
    -webkit-transform-origin: left top;
            transform-origin: left top; }
  50% { -webkit-transform: scaleX(1); transform: scaleX(1);
    -webkit-transform-origin: right top;
            transform-origin: right top; }
  100% { -webkit-transform: scaleX(0); transform: scaleX(0);
    -webkit-transform-origin: right top;
            transform-origin: right top; } }

@keyframes lineAni { 0% { -webkit-transform: scaleX(0); transform: scaleX(0);
    -webkit-transform-origin: left top;
            transform-origin: left top; }
  49% { -webkit-transform: scaleX(1); transform: scaleX(1);
    -webkit-transform-origin: left top;
            transform-origin: left top; }
  50% { -webkit-transform: scaleX(1); transform: scaleX(1);
    -webkit-transform-origin: right top;
            transform-origin: right top; }
  100% { -webkit-transform: scaleX(0); transform: scaleX(0);
    -webkit-transform-origin: right top;
            transform-origin: right top; } }

@-webkit-keyframes circleAni { 0% { stroke-dasharray: 894;
    stroke-dashoffset: 0; }
  50% { stroke-dasharray: 894;
    stroke-dashoffset: 894; }
  100% { stroke-dasharray: 894;
    stroke-dashoffset: 1788; } }

@keyframes circleAni { 0% { stroke-dasharray: 894;
    stroke-dashoffset: 0; }
  50% { stroke-dasharray: 894;
    stroke-dashoffset: 894; }
  100% { stroke-dasharray: 894;
    stroke-dashoffset: 1788; } }

/*index*/
#index .banner { position: relative; overflow: hidden; z-index: 2; }

#index .banner .banner-slick { -webkit-clip-path: url(#banner_clip); clip-path: url(#banner_clip); }

#index .banner .banner-slick [data-video] { position: relative; display: block; }

#index .banner .banner-slick [data-video]:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.1; z-index: 1; -webkit-transition: opacity 0.35s; -o-transition: opacity 0.35s; transition: opacity 0.35s; }

#index .banner .banner-slick [data-video] .play { position: absolute; top: 50%; left: 50%; margin-top: -40px; margin-left: -40px; width: 80px; height: 80px; z-index: 2; }

@media only screen and (min-width: 992px) { #index .banner .banner-slick [data-video]:hover:before { opacity: 0.4; }
  #index .banner .banner-slick [data-video]:hover .play svg #circle { -webkit-animation: circleAni 1s 0.0001s ease-in both; animation: circleAni 1s 0.0001s ease-in both; } }

@media only screen and (max-width: 767px) { #index .banner .banner-slick [data-video] .play { margin-top: -25px; margin-left: -25px; width: 50px; height: 50px; } }

#index .i-media { position: relative; overflow: hidden; padding: 150px 0 100px; margin-top: -90px; background: url(../images/i-media-bg.jpg); background-size: cover; }

#index .i-media .block { margin-top: 30px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

#index .i-media .block .pic { width: 50%; position: relative; float: left; }

#index .i-media .block .pic a { display: block; -webkit-clip-path: url(#media_clip); clip-path: url(#media_clip); position: relative; }

#index .i-media .block .pic a:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000; opacity: 0; z-index: 2; -webkit-transition: opacity 0.5s; -o-transition: opacity 0.5s; transition: opacity 0.5s; }

#index .i-media .block .pic a .play { display: block; position: absolute; top: 50%; left: 50%; margin: -40px 0 0 -40px; width: 80px; height: 80px; border-radius: 50%; z-index: 2; -webkit-transition: -webkit-transform 0.35s; transition: -webkit-transform 0.35s; -o-transition: transform 0.35s; transition: transform 0.35s; transition: transform 0.35s, -webkit-transform 0.35s; }

#index .i-media .block .pic a .play svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

#index .i-media .block .content { width: 50%; padding: 0 50px; float: right; }

#index .i-media .block .content .title { margin: 0; color: #222; font-size: 3.125rem; }

#index .i-media .block .content .description { margin: 20px 0; }

@media only screen and (min-width: 992px) { #index .i-media .block .pic a img { -webkit-transition: -webkit-transform 0.5s; transition: -webkit-transform 0.5s; -o-transition: transform 0.5s; transition: transform 0.5s; transition: transform 0.5s, -webkit-transform 0.5s; }
  #index .i-media .block .pic a:hover:before { opacity: 0.3; }
  #index .i-media .block .pic a:hover .play svg #circle { -webkit-animation: circleAni 1s 0.0001s ease-in both; animation: circleAni 1s 0.0001s ease-in both; }
  #index .i-media .block .pic a:hover img { -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } }

@media only screen and (max-width: 1199px) { #index .i-media .block .content { padding: 0 30px; }
  #index .i-media .block .content .title { font-size: 2.1875rem; } }

@media only screen and (max-width: 991px) { #index .i-media { padding: 50px 0; margin-top: 0px; }
  #index .i-media .block { margin-top: 30px; display: block; }
  #index .i-media .block .pic, #index .i-media .block .content { width: 100%; float: none; }
  #index .i-media .block .pic img { margin: auto; }
  #index .i-media .block .content { margin-top: 10px; } }

@media only screen and (max-width: 767px) { #index .i-media .block .pic a .play { margin: -25px 0 0 -25px; width: 50px; height: 50px; }
  #index .i-media .block .content .title { margin-top: 15px; font-size: 1.5625rem; } }

#index .i-sec3 { background: url(../images/i-sec3-bg.jpg) center bottom; background-size: cover; padding: 80px 0; }

#index .i-sec3 .texts { max-width: 900px; margin: auto; color: #fff; position: relative; z-index: 2; text-shadow: 0 0 5px rgba(0, 0, 0, 0.1); }

#index .i-sec3 .texts .g-title .t1 { color: #fff; }

#index .i-sec3 .texts .description { margin: 20px 0 30px; }

#index .i-sec3 .img-animation { max-width: 1388px; margin: -30px auto 0; display: -webkit-box; display: -ms-flexbox; display: flex; }

#index .i-sec3 .img-animation .img { opacity: 0; -webkit-transition: opacity 0.25s, -webkit-transform 0.25s; transition: opacity 0.25s, -webkit-transform 0.25s; -o-transition: transform 0.25s, opacity 0.25s; transition: transform 0.25s, opacity 0.25s; transition: transform 0.25s, opacity 0.25s, -webkit-transform 0.25s; position: relative; }

#index .i-sec3 .img-animation .img span { position: absolute; bottom: 0; left: 50%; display: block; color: #fff; text-align: center; padding: 5px 15px; border: 1px solid #fff; border-radius: 30px; white-space: nowrap; opacity: 0; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); -webkit-transition: opacity 0.25s; -o-transition: opacity 0.25s; transition: opacity 0.25s; }

#index .i-sec3 .img-animation .img1 { width: 33.82%; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); -webkit-transition-delay: 0.25s; -o-transition-delay: 0.25s; transition-delay: 0.25s; }

#index .i-sec3 .img-animation .img1 span { left: 65%; }

#index .i-sec3 .img-animation .img2 { width: 14.63%; -webkit-transform: translate(0, 50%); -ms-transform: translate(0, 50%); transform: translate(0, 50%); }

#index .i-sec3 .img-animation .img3 { width: 53.60%; -webkit-transform: translate(50%, 0); -ms-transform: translate(50%, 0); transform: translate(50%, 0); -webkit-transition-delay: 0.25s; -o-transition-delay: 0.25s; transition-delay: 0.25s; }

#index .i-sec3 .img-animation.scroll-view .img { opacity: 1; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: transform 1s, opacity 1s; transition: transform 1s, opacity 1s; transition: transform 1s, opacity 1s, -webkit-transform 1s; }

@media only screen and (min-width: 992px) { #index .i-sec3 .img-animation .img:hover { -webkit-filter: drop-shadow(0 0 30px #fff); filter: drop-shadow(0 0 30px #fff); -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; -webkit-transition: opacity 0.25s, -webkit-transform 0.25s, -webkit-filter 0.25s; transition: opacity 0.25s, -webkit-transform 0.25s, -webkit-filter 0.25s; -o-transition: transform 0.25s, opacity 0.25s, filter 0.25s; transition: transform 0.25s, opacity 0.25s, filter 0.25s; transition: transform 0.25s, opacity 0.25s, filter 0.25s, -webkit-transform 0.25s, -webkit-filter 0.25s; }
  #index .i-sec3 .img-animation .img:hover span { opacity: 1; } }

@media only screen and (max-width: 1199px) { #index .i-sec3 { padding: 50px 20px; } }

@media only screen and (max-width: 991px) { #index .i-sec3 .texts { max-width: 750px; }
  #index .i-sec3 .img-animation { margin: 20px 0; } }

#index .i-sec4 { background: url(../images/i-sec4-bg.jpg) center bottom; background-size: cover; padding: 80px 0 100px; }

#index .i-sec4 .texts { max-width: 900px; margin: auto; color: #fff; position: relative; z-index: 2; text-shadow: 0 0 5px rgba(0, 0, 0, 0.1); }

#index .i-sec4 .texts .g-title .t1 { color: #fff; }

#index .i-sec4 .texts .description { margin: 20px 0 30px; }

#index .i-sec4 .img-animation { max-width: 1194px; margin: -50px auto 0; margin: -50px auto 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }

#index .i-sec4 .img-animation .img { opacity: 0; top: 0; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: transform 1s, opacity 1s; transition: transform 1s, opacity 1s; transition: transform 1s, opacity 1s, -webkit-transform 1s; }

#index .i-sec4 .img-animation .left { width: 48.91%; height: 0; padding-bottom: 30.987%; float: left; position: relative; }

#index .i-sec4 .img-animation .left .img { position: absolute; }

#index .i-sec4 .img-animation .left .img1 { left: 0; max-width: 70%; }

#index .i-sec4 .img-animation .left .img2 { left: 40%; -webkit-transition-delay: 0.25s; -o-transition-delay: 0.25s; transition-delay: 0.25s; max-width: 60%; }

#index .i-sec4 .img-animation .left .img3 { right: 0; -webkit-transition-delay: 0.5s; -o-transition-delay: 0.5s; transition-delay: 0.5s; max-width: 40%; }

#index .i-sec4 .img-animation .right { width: 36.43%; float: right; }

#index .i-sec4 .img-animation .right .img { -webkit-transform: translate(50%, 0); -ms-transform: translate(50%, 0); transform: translate(50%, 0); -webkit-transition-delay: 0.5s; -o-transition-delay: 0.5s; transition-delay: 0.5s; }

#index .i-sec4 .img-animation.scroll-view .img { opacity: 1; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); }

@media only screen and (min-width: 992px) { #index .i-sec4 .img-animation .img:hover { -webkit-filter: drop-shadow(0 0 30px #fff); filter: drop-shadow(0 0 30px #fff); -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; -webkit-transition: opacity 0.25s, -webkit-transform 0.25s, -webkit-filter 0.25s; transition: opacity 0.25s, -webkit-transform 0.25s, -webkit-filter 0.25s; -o-transition: transform 0.25s, opacity 0.25s, filter 0.25s; transition: transform 0.25s, opacity 0.25s, filter 0.25s; transition: transform 0.25s, opacity 0.25s, filter 0.25s, -webkit-transform 0.25s, -webkit-filter 0.25s; } }

@media only screen and (max-width: 1199px) { #index .i-sec4 { padding: 80px 0 150px; }
  #index .i-sec4 .img-animation { margin: -20px auto 0; }
  #index .i-sec4 .img-animation .left { padding-bottom: 38%; }
  #index .i-sec4 .img-animation .left .img2 { left: 30%; }
  #index .i-sec4 .img-animation .right { width: 40%; } }

@media only screen and (max-width: 991px) { #index .i-sec4 { padding: 50px 0; }
  #index .i-sec4 .img-animation { margin: 20px 0; } }

@media only screen and (max-width: 767px) { #index .i-sec4 .img-animation .left { width: 47%; }
  #index .i-sec4 .img-animation .right { width: 47%; } }

#index .i-sec5 { margin-top: -80px; }

#index .i-sec5 .inner { background: url(../images/i-sec5-bg.jpg); padding: 80px 0; -webkit-clip-path: url(#sec5_clip); clip-path: url(#sec5_clip); }

#index .i-sec5 .inner .list { font-size: 0; margin: 50px -35px; }

#index .i-sec5 .inner .list .item { display: inline-block; vertical-align: top; width: 20%; padding: 0 35px; opacity: 0; -webkit-transition: opacity 0.5s, -webkit-transform 0.5s; transition: opacity 0.5s, -webkit-transform 0.5s; -o-transition: transform 0.5s, opacity 0.5s; transition: transform 0.5s, opacity 0.5s; transition: transform 0.5s, opacity 0.5s, -webkit-transform 0.5s; }

#index .i-sec5 .inner .list .item .pic { width: 100%; position: relative; }

#index .i-sec5 .inner .list .item .pic a { border-radius: 50%; overflow: hidden; display: block; position: relative; }

#index .i-sec5 .inner .list .item .pic a img { border-radius: 50%; -webkit-transition: -webkit-transform 0.5s; transition: -webkit-transform 0.5s; -o-transition: transform 0.5s; transition: transform 0.5s; transition: transform 0.5s, -webkit-transform 0.5s; }

#index .i-sec5 .inner .list .item .pic:after { content: ""; position: absolute; width: 100%; height: 0%; padding-bottom: 100%; display: block; border-radius: 50%; top: 100%; left: 0; background-image: -owg-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 20%); background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 20%); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 20%); background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.1)), color-stop(20%, rgba(0, 0, 0, 0))); background-image: linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 20%); }

#index .i-sec5 .inner .list .item .content { margin-top: 50px; text-align: center; }

#index .i-sec5 .inner .list .item .content p { margin: 0; color: #222; }

#index .i-sec5 .inner .list .item .content .ti { font-size: 1.25rem; }

#index .i-sec5 .inner .list .item .content .en { font-size: 1.25rem; }

#index .i-sec5 .inner .list .item:nth-child(odd) { -webkit-transform: translateY(-25%); -ms-transform: translateY(-25%); transform: translateY(-25%); }

#index .i-sec5 .inner .list .item:nth-child(even) { -webkit-transform: translateY(25%); -ms-transform: translateY(25%); transform: translateY(25%); }

#index .i-sec5 .inner .list .item:nth-child(2) { -webkit-transition-delay: 0.1s; -o-transition-delay: 0.1s; transition-delay: 0.1s; }

#index .i-sec5 .inner .list .item:nth-child(3) { -webkit-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s; }

#index .i-sec5 .inner .list .item:nth-child(4) { -webkit-transition-delay: 0.3s; -o-transition-delay: 0.3s; transition-delay: 0.3s; }

#index .i-sec5 .inner .list .item:nth-child(5) { -webkit-transition-delay: 0.4s; -o-transition-delay: 0.4s; transition-delay: 0.4s; }

#index .i-sec5 .inner .list.scroll-view .item { opacity: 1; -webkit-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); }

@media only screen and (min-width: 992px) { #index .i-sec5 .inner .list .item .pic a:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000; opacity: 0; z-index: 2; -webkit-transition: opacity 0.5s; -o-transition: opacity 0.5s; transition: opacity 0.5s; }
  #index .i-sec5 .inner .list .item .pic:hover a:before { opacity: 0.3; }
  #index .i-sec5 .inner .list .item .pic:hover a img { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } }

@media only screen and (max-width: 1199px) { #index .i-sec5 .inner .list { margin: 50px -20px 0; }
  #index .i-sec5 .inner .list .item { padding: 0 20px; } }

@media only screen and (max-width: 991px) { #index .i-sec5 { margin-top: 0px; }
  #index .i-sec5 .inner { padding: 50px 0; }
  #index .i-sec5 .inner .list { margin: 50px -10px 0; }
  #index .i-sec5 .inner .list .item { padding: 0 10px; }
  #index .i-sec5 .inner .list .item .content { margin-top: 30px; }
  #index .i-sec5 .inner .list .item .content .ti { font-size: 1.06rem; }
  #index .i-sec5 .inner .list .item .content .en { font-size: 1.06rem; } }

@media only screen and (max-width: 767px) { #index .i-sec5 .inner .list { text-align: center; }
  #index .i-sec5 .inner .list .item { width: 220px; max-width: 50%; margin-bottom: 20px; } }

#index .i-sec6 { padding: 90px 0 180px 0; background: #e7ebef url(../images/i-sec6-bg.jpg) no-repeat 100% bottom; background-size: auto 100%; position: relative; }

#index .i-sec6 .g-title { position: absolute; left: calc(50% + 50px); top: 100px; }

#index .i-sec6 .g-title .en { display: inline-block; }

#index .i-sec6 .news-slick .item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }

#index .i-sec6 .news-slick .item .pic, #index .i-sec6 .news-slick .item .content { width: 50%; float: left; }

#index .i-sec6 .news-slick .item .pic { overflow: hidden; background: url(../images/i-news-bg.jpg) repeat; }

#index .i-sec6 .news-slick .item .pic img { display: block; opacity: 0; -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); }

#index .i-sec6 .news-slick .item .content { padding: 50px; padding-top: 130px; color: #222; }

#index .i-sec6 .news-slick .item .content .inner { max-width: 600px; opacity: 0; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); }

#index .i-sec6 .news-slick .item .content .date { font-size: 1.125rem; margin: 0; }

#index .i-sec6 .news-slick .item .content .tit { font-size: 2.1875rem; margin: 5px 0; }

#index .i-sec6 .news-slick .item .content .words { font-size: 1rem; margin: 10px 0; line-height: 2; }

#index .i-sec6 .news-slick .item .content .g-button { margin-top: 30px; }

#index .i-sec6 .news-slick .slick-slide.slick-active .item .pic img { opacity: 1; -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: transform 1s, opacity 1s; transition: transform 1s, opacity 1s; transition: transform 1s, opacity 1s, -webkit-transform 1s; }

#index .i-sec6 .news-slick .slick-slide.slick-active .item .content .inner { opacity: 1; -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: transform 1s, opacity 1s; transition: transform 1s, opacity 1s; transition: transform 1s, opacity 1s, -webkit-transform 1s; }

@media only screen and (max-width: 1199px) { #index .i-sec6 .g-title { position: static; text-align: center; margin-bottom: 30px; }
  #index .i-sec6 .g-title .en { display: block; }
  #index .i-sec6 .news-slick .item .content { padding: 0px 50px; }
  #index .i-sec6 .news-slick .item .content .tit { font-size: 1.875rem; } }

@media only screen and (max-width: 991px) { #index .i-sec6 { padding: 50px 0; }
  #index .i-sec6 .news-slick { max-width: 750px; margin: auto; padding: 0 40px; }
  #index .i-sec6 .news-slick .item .pic, #index .i-sec6 .news-slick .item .content { width: 100%; float: none; }
  #index .i-sec6 .news-slick .item .content { padding: 0; }
  #index .i-sec6 .news-slick .item .content .inner { max-width: inherit; margin-top: 20px; } }

@media only screen and (max-width: 767px) { #index .i-sec6 { background-position: left center; }
  #index .i-sec6 .news-slick .item .content .tit { font-size: 1.375rem; }
  #index .i-sec6 .news-slick .item .content .g-button { display: block; } }

/*breadcrumb*/
.bread-crumb { text-align: left; position: relative; z-index: 2; font-size: 0; margin-bottom: 30px; }

.bread-crumb li { display: inline-block; vertical-align: middle; font-size: 1rem; }

.bread-crumb li:after { content: ""; width: 3px; height: 3px; border-radius: 50%; background-color: #6789b2; display: inline-block; vertical-align: middle; margin: 0 10px 2px; }

.bread-crumb li a { color: #555; }

.bread-crumb li.active a { color: #6789b2; }

.bread-crumb li:last-child:after { display: none; }

/*pager*/
.p-pager { text-align: center; margin: 40px 0 0; font-size: 0; }

.p-pager .numbers { display: inline-block; vertical-align: middle; }

.p-pager .numbers li { display: inline-block; vertical-align: middle; }

.p-pager .numbers li a { width: 35px; height: 35px; line-height: 35px; background: transparent; border: 1px solid #ddd; margin: 0 5px; color: #000; border-radius: 50%; text-align: center; display: block; font-size: 1rem; }

.p-pager .numbers li.current a { background: #6789b2 !important; border-color: #6789b2 !important; color: #fff !important; }

.p-pager a.prev, .p-pager a.next { background: transparent; border: none; color: #000; text-align: center; display: inline-block; vertical-align: middle; font-size: 0; }

.p-pager a.prev i, .p-pager a.next i { font-size: 1.25rem; }

.p-pager a.prev { margin-right: 5px; }

.p-pager a.prev:before { border-width: 5px 10px 5px 0; margin-left: 10px; left: 0%; border-color: transparent #fff transparent transparent; }

.p-pager a.prev:after { content: "PREV"; }

.p-pager a.next { margin-left: 5px; }

.p-pager a.next:before { border-width: 5px 0 5px 10px; border-color: transparent transparent transparent #fff; margin-left: -20px; left: 100%; }

.p-pager a.next:after { content: "NEXT"; }

@media only screen and (min-width: 992px) { .p-pager .numbers li:hover a { background: #fff; } }

@media only screen and (max-width: 991px) { .p-pager a.prev { float: left; }
  .p-pager a.next { float: right; } }

/*product*/
#product .bread-crumb { padding-left: 80px; }

@media only screen and (max-width: 1479px) { #product .bread-crumb { padding-left: 65px; } }

@media only screen and (max-width: 1199px) { #product .bread-crumb { padding-left: 35px; } }

@media only screen and (max-width: 991px) { #product .bread-crumb { padding-left: 20px; } }

#product .product-view-title { font-size: 2.5rem; text-align: center; margin: 0 0 30px; }

@media only screen and (max-width: 991px) { #product .product-view-title { font-size: 1.875rem; } }

#product .product-slick { text-align: center; }
#product .product-slick .item { opacity: 0.8; padding: 20px; display: block; margin: 10px auto; -webkit-transform: scale(0.8, 0.8); -ms-transform: scale(0.8, 0.8); transform: scale(0.8, 0.8); -webkit-transition: ease 0.3s; -o-transition: ease 0.3s; transition: ease 0.3s; position: relative; max-width: 640px; }

#product .product-slick.less-item .item { -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1);}

#product .product-slick .item .pic { margin: auto; }

#product .product-slick .item .content { margin: 15px auto; max-width: 500px; position: relative; text-align: center; color: #222; }

#product .product-slick .item .content .tit { font-size: 2.8125rem; }

#product .product-slick .item .content .description { line-height: 2; max-height: 120px; overflow: hidden; text-align: left; font-size: 1.25rem; }

#product .product-slick:not(.less-item) .slick-slide.slick-current .item, #product .product-slick:not(.less-item) .slick-slide.view .item { opacity: 1; -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); }

#product .product-slick:not(.less-item) .slick-slide.slick-current .item:before, #product .product-slick:not(.less-item) .slick-slide.view .item:before { -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition: -webkit-transform 0s 0.3s; transition: -webkit-transform 0s 0.3s; -o-transition: transform 0s 0.3s; transition: transform 0s 0.3s; transition: transform 0s 0.3s, -webkit-transform 0s 0.3s; }

#product .no-data p{ position: absolute; top: 50%; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); -o-transform: translate(0, -50%); transform: translate(0, -50%); }

@media only screen and (min-width: 992px) { #product .product-slick .item:hover { background: rgba(255, 255, 255, 0.65); -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); }
  #product .product-slick .item:hover .tit { color: #6789b2; } }

@media only screen and (max-width: 1200px) { #product .product-slick .item { -webkit-transform: scale(0.9, 0.9); -ms-transform: scale(0.9, 0.9); transform: scale(0.9, 0.9); }
  #product .product-slick .item .content .tit { font-size: 2.1875rem; }
  #product .product-slick .item .content .description { max-height: 100px; font-size: 1.125rem; } }

@media only screen and (max-width: 991px) { #product .product-slick .item { padding: 15px; opacity: 1; background: rgba(255, 255, 255, 0.65); } }

#product .sec-main { position: relative; z-index: 2; }

#product .sec-main .bread-crumb { padding-left: 0px; }

#product .sec-main .detail { margin-top: 50px; padding: 0 15px; }

#product .sec-main .detail img{ max-width: 100%!important; height: auto!important; }

#product .sec-main .detail table{
  border-collapse: separate;
}

#product .sec-main .detail .title { font-size: 2.5rem; }

#product .sec-main .detail .title:after { content: ""; display: block; margin: 10px auto; width: 100px; height: 1px; background: #45658b; }

#product .sec-main .detail .description { font-size: 1.125rem; margin-top: 30px; }

@media only screen and (max-width: 1199px) { #product .sec-main { padding: 130px 0 100px 0; }
  #product .sec-main .detail .title { font-size: 2.1875rem; } }

@media only screen and (max-width: 991px) { #product .sec-main { padding: 50px 0; }
  #product .sec-main .detail { margin-top: 30px; }
  #product .sec-main .detail .title { font-size: 1.875rem; } }

@media only screen and (max-width: 767px) { #product .sec-main .detail .title { font-size: 1.75rem; } }

#product .sec { font-size: 0; margin-top: 50px; }

#product .sec .sec-item { width: calc(25% - 30px); display: inline-block; vertical-align: top; background-color: #fff; margin: 15px; padding: 15px; }

#product .sec .sec-item .content { text-align: center; padding: 15px; }

#product .sec .sec-item .content .title { font-size: 1.5rem; font-weight: bold; margin: 0; color: #45658b; }

#product .sec .sec-item .content .description { font-size: 1rem; max-height: 30px; overflow: hidden; color: #000; opacity: 0.5; }

#product .sec .sec-item .content .g-button { margin: 20px auto 0; text-align: center; }

@media only screen and (min-width: 992px) { #product .sec .sec-item:hover { background-color: #6789b2; -webkit-transition: background 0.35s; -o-transition: background 0.35s; transition: background 0.35s; }
  #product .sec .sec-item:hover .content .title, #product .sec .sec-item:hover .content .description { color: #fff; } }

@media only screen and (max-width: 1199px) { #product .sec .sec-item { width: calc(25% - 20px); margin: 10px; }
  #product .sec .sec-item .content .title { font-size: 1.25rem; } }

@media only screen and (max-width: 991px) { #product .sec .sec-item { width: calc(50% - 20px); } }

@media only screen and (max-width: 767px) { #product .sec .sec-item { width: 100%; margin: 10px 0; } }

#product .search-list .results { margin-bottom: 30px; color: #666; }

#product .search-list .item { padding: 20px; background: #fff; overflow: hidden; border-bottom: 1px solid #e5e5e5; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

#product .search-list .item .pic { width: 30%; }

#product .search-list .item .content { width: 70%; padding: 50px; }

#product .search-list .item .content a { color: #000; }

#product .search-list .item .content .tit { font-size: 2.5rem; }

#product .search-list .item .content .g-button { margin-top: 20px; }

@media only screen and (max-width: 991px) { #product .search-list .item { padding: 20px; }
  #product .search-list .item .content { padding: 10px 30px; }
  #product .search-list .item .content .tit { font-size: 1.875rem; } }

@media only screen and (max-width: 767px) { #product .search-list .item { padding: 20px; display: block; }
  #product .search-list .item .pic { width: 100%; }
  #product .search-list .item .content { width: 100%; padding: 10px; }
  #product .search-list .item .content .tit { font-size: 1.875rem; } }

/*無限載入 */
.grid-list { margin: 50px 0; }

.grid-list.are-images-unloaded { opacity: 0; }

.grid-list.are-images-unloaded .image-grid__item { opacity: 0; }

.grid-list .grid-item, .grid-list .grid-col-sizer { width: 32%; }

.grid-list .grid-gutter-sizer { width: 2%; }

.grid-list .grid-item { margin-bottom: 20px; float: left; background: #fff; -webkit-transition: background 0.25s; -o-transition: background 0.25s; transition: background 0.25s; }

.grid-list .grid-item .content { padding: 20px; }

.grid-list .grid-item .content .date { color: #6789b2; margin: 0; font-size: 1rem; }

.grid-list .grid-item .content .title { margin: 10px 0; color: #222; font-size: 1.4375rem; }

.grid-list .grid-item .content .description { color: #222; font-size: 1rem; line-height: 2; word-break: break-word; }

@media only screen and (min-width: 992px) { .grid-list .grid-item:hover { background: #516070; }
  .grid-list .grid-item:hover .pic:before { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }
  .grid-list .grid-item:hover .pic img { opacity: 0.8; }
  .grid-list .grid-item:hover .content .date, .grid-list .grid-item:hover .content .title, .grid-list .grid-item:hover .content .description { color: #fff; } }

@media only screen and (max-width: 1199px) { .grid-list .grid-item .content .title { font-size: 1.25rem; }
  .grid-list .grid-item .content .description { font-size: 0.937rem; } }

@media only screen and (max-width: 767px) { .grid-list .grid-item, .grid-list .grid-col-sizer { width: 49%; } }

@media only screen and (max-width: 480px) { .grid-list .grid-item, .grid-list .grid-col-sizer { width: 100%; }
  .grid-list .grid-gutter-sizer { width: 0%; } }

.page-load-status { display: none; position: relative; z-index: 100; padding-top: 20px; text-align: center; color: #777; }

.page-load-status .infinite-scroll-last, .page-load-status .infinite-scroll-error { text-align: center; border-radius: 5px; color: #000; font-size: 0.95rem; opacity: 0.5; }

.loader-ellips { font-size: 20px; position: relative; width: 80px; height: 1em; margin: 10px auto; }

.loader-ellips .loader-ellips__dot { display: block; width: 15px; height: 15px; border-radius: 0.5em; background: #6789b2; position: absolute; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; }

.loader-ellips .loader-ellips__dot:nth-child(1), .loader-ellips .loader-ellips__dot:nth-child(2) { left: 0; }

.loader-ellips .loader-ellips__dot:nth-child(3) { left: 1.5em; }

.loader-ellips .loader-ellips__dot:nth-child(4) { left: 3em; }

.loader-ellips .loader-ellips__dot:nth-child(1) { -webkit-animation-name: reveal; animation-name: reveal; }

.loader-ellips .loader-ellips__dot:nth-child(2), .loader-ellips .loader-ellips__dot:nth-child(3) { -webkit-animation-name: slide; animation-name: slide; }

.loader-ellips .loader-ellips__dot:nth-child(4) { -webkit-animation-name: reveal; animation-name: reveal; animation-direction: reverse; }

@-webkit-keyframes reveal { from { -webkit-transform: scale(0.001);
    -ms-transform: scale(0.001);
    transform: scale(0.001); }
  to { -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1); } }

@keyframes reveal { from { -webkit-transform: scale(0.001);
    -ms-transform: scale(0.001);
    transform: scale(0.001); }
  to { -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1); } }

@-webkit-keyframes slide { to { -webkit-transform: translateX(1.5em);
    -ms-transform: translateX(1.5em);
    transform: translateX(1.5em); } }

@keyframes slide { to { -webkit-transform: translateX(1.5em);
    -ms-transform: translateX(1.5em);
    transform: translateX(1.5em); } }

/*detail page*/
.detail-page { background: #fff; border-radius: 5px; padding: 80px; }

.detail-page .date { margin: 0; color: #6789b2; font-size: 1.25rem; }

.detail-page .tit { font-size: 2.5rem; color: #222; margin: 0; }

.detail-page .text-edit { margin: 30px 0; word-break: break-word;}

.detail-page .block { margin: 30px 0; }

.detail-page .block .title { margin: 0 0 20px 0; font-size: 2.1875rem; color: #222; }

.detail-page .catalogue .table thead { background: #628fc5; color: #fff; }

.detail-page .catalogue .table thead th { border-bottom: none; text-align: center; font-size: 1.25rem; font-weight: normal; padding: 10px 15px; }

.detail-page .catalogue .table thead th:nth-child(1) { text-align: left; }

.detail-page .catalogue .table tbody td { padding: 10px 15px; text-align: center; vertical-align: middle; font-size: 1.06rem; border-top: none; border-bottom: 1px solid #eee; }

.detail-page .catalogue .table tbody td:nth-child(1) { text-align: left; }

.detail-page .catalogue .table tbody td:nth-child(1) a { color: #222; display: block; padding-left: 20px; position: relative; }

.detail-page .catalogue .table tbody td:nth-child(1) a:before { content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: #6789b2; }

.detail-page .catalogue .table tbody td:nth-child(1) a:hover { text-decoration: underline; }

.detail-page .catalogue .table tbody td .btn-link { font-size: 1.5rem; color: #b6c7d4; }

.detail-page .catalogue .table tbody td .btn-link:hover { color: #2f7dbd; }

.detail-page .relateProduct .title { position: relative; z-index: 3; background: #fff; padding: 0 15px 0 0; display: inline-block; }

.detail-page .relateProduct .relateProduct-slick { border-top: 1px solid #f9f9f9; /* border-bottom: 1px solid #eee; */ margin-top: -45px; padding: 30px 0 10px 0; }

.detail-page .relateProduct .relateProduct-slick .item { padding: 5px; margin-bottom: 10px; }
.detail-page .relateProduct .relateProduct-slick .item a{ display: block; padding: 10px; border: 1px solid #eee;}

.detail-page .relateProduct .relateProduct-slick .item .content .tit { margin: 0; padding: 10px; text-align: center; font-size: 1.125rem; }

.detail-page .relateProduct .relateProduct-slick .item .content .description { font-size: 1rem; color: #666; text-align: center; height: 30px; overflow: hidden;}

@media only screen and (min-width: 992px) {
  .detail-page .relateProduct .relateProduct-slick .item:hover a { background-color: #6789b2; -webkit-transition: background 0.35s; -o-transition: background 0.35s; transition: background 0.35s; }
  .detail-page .relateProduct .relateProduct-slick .item:hover .content .tit, .detail-page .relateProduct .relateProduct-slick .item:hover .content .description { color: #fff; }
  .detail-page .catalogue .table tbody tr:hover { background: #f9f9f9; } }

@media only screen and (max-width: 1199px) { .detail-page { padding: 50px; }
  .detail-page .date { font-size: 1.125rem; }
  .detail-page .tit { font-size: 2.1875rem; } }

@media only screen and (max-width: 991px) { .detail-page { padding: 40px; }
  .detail-page .date { font-size: 1.06rem; }
  .detail-page .tit { font-size: 1.875rem; }
  .detail-page .block .title { font-size: 1.75rem; }
  .detail-page .catalogue .table thead th { font-size: 1.06rem; padding: 10px; width: auto; } }

@media only screen and (max-width: 767px) { .detail-page { padding: 20px; }
  .detail-page .date { font-size: 1rem; }
  .detail-page .tit { font-size: 1.5rem; }
  .detail-page .block .title { margin-bottom: 5px; font-size: 1.5rem; }
  .detail-page .catalogue .table { border-top: 2px solid #628fc5; }
  .detail-page .catalogue .table thead { display: none; }
  .detail-page .catalogue .table tbody td { font-size: 0.937rem; padding: 10px 5px; }
  .detail-page .catalogue .table tbody td:nth-child(1) a { padding: 0; }
  .detail-page .catalogue .table tbody td:nth-child(1) a:before { display: none; }
  .detail-page .catalogue .table tbody td:nth-child(2) { display: none; }
  .detail-page .relateProduct .relateProduct-slick { margin-top: 5px; padding: 15px 0; border-top: 2px solid #628fc5; }
  .detail-page .relateProduct .relateProduct-slick .item { padding: 5px; }
  .detail-page .relateProduct .relateProduct-slick .item .content .tit { padding: 5px; font-size: 1rem; }
  .detail-page .relateProduct .relateProduct-slick .item .content .description { font-size: 0.812rem; height: 20px;} }

/*technology*/
#technology .page-main{z-index: 1;}
#technology .title { font-size: 2.5rem; }

#technology .left { width: 280px; float: left; }

#technology .left .title { margin-bottom: 10px; }

#technology .left .level1 > a { display: block; background: #86a1be; padding: 10px 25px 10px 15px; font-size: 1.125rem; color: #fff; border-bottom: 1px solid #dde6ef; position: relative; }

#technology .left .level1.light > a{ background: #6f86a0 }

#technology .left .level1 .aw-switch{ z-index: 5; position: absolute; right: 0; top: 0; width: 48px; height: 48px; cursor: pointer; }

#technology .left .level1 > a .aw { position: absolute; right: 0; top: 50%; width: 48px; height: 48px; margin-top: -24px; }

#technology .left .level1.hasul{
   position: relative;
}

#technology .left .level1:not(.hasul) > a .aw{
  display: none;
}

#technology .left .level1 > a .aw:before { content: ""; display: block; position: absolute; top: 50%; left: 50%; margin-left: -4px; margin-top: -4px; width: 8px; height: 8px; border-top: 2px solid #fff; border-right: 2px solid #fff; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }

#technology .left .level1 ul { display: none; list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=); }

#technology .left .level1.on > a .aw, #technology .left .level1.open > a .aw { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); }

#technology .left .level1.on > ul, #technology .left .level1.open > ul { display: block; }

#technology .left .level2 { font-size: 1rem; }

#technology .left .level2 > a { background: #fff; display: block; border-bottom: 1px solid #dde6ef; padding: 10px 25px 10px 20px; color: #000; position: relative; }

#technology .left .level2 > a .plus { position: absolute; right: 15px; top: 50%; width: 20px; height: 20px; margin-top: -10px; }

#technology .left .level2 > a .plus:before, #technology .left .level2 > a .plus:after { display: block; content: ""; position: absolute; left: 50%; top: 50%; margin-left: -6px; width: 10px; height: 1px; background: #6789b2; }

#technology .left .level2 > a .plus:after { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); }

#technology .left .level2.on > a .plus:after, #technology .left .level2.open > a .plus:after { display: none; }

#technology .left .level2.on > ul, #technology .left .level2.open > ul { display: block; }

#technology .left .level2.open > a { background: #dde6ef; }

#technology .left .level3 > a { background: #f5f5f5; display: block; color: #000; border-bottom: 1px solid #dde6ef; padding: 10px 0 10px 40px; }

#technology .left .level3.open > a { color: #6789b2; }

#technology .right { width: calc(100% - 280px); float: right; padding-left: 40px; }

#technology .right .title { margin-bottom: 10px; }

#technology .right .title .icon { width: 40px; height: 40px; display: inline-block; vertical-align: middle; position: relative; margin: 0 10px 10px 0; }

#technology .right .title .icon svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }

#technology .right .download-list { width: 100%; }

#technology .right .download-list thead { background: #355f91; }

#technology .right .download-list thead th { text-align: center; padding: 10px; color: #fff; font-size: 1.125rem; }

#technology .right .download-list thead th:first-child { text-align: left; padding-left: 25px; width: 50%; }

#technology .right .download-list thead th:first-child a { color: #000; }

#technology .right .download-list tbody tr { background: #fff; border-bottom: 1px solid #dde6ef; }

#technology .right .download-list tbody tr:nth-child(even) { background: #f1f5f8; }

#technology .right .download-list tbody td { padding: 10px; font-size: 1.06rem; text-align: center; vertical-align: middle; }

#technology .right .download-list tbody td:first-child { text-align: left; padding-left: 25px; }

#technology .right .download-list tbody td:first-child a { color: #000; }

#technology .right .download-list tbody td .btn-link { font-size: 1.5rem; color: #b6c7d4; }

#technology .right .download-list thead.filetype{ background: #1c3a5d; }

#technology .right .faq-list .search-question { float: right; margin-top: -65px; }

#technology .right .faq-list .search-question .box { height: 42px; line-height: 42px; border-radius: 5px; border: 1px solid #ddd; padding: 0 10px; display: inline-block; vertical-align: middle; }

#technology .right .faq-list .search-question .btn-send { width: 40px; height: 40px; border-radius: 5px; background: #507b9f; border: none; display: inline-block; vertical-align: middle; border: none; position: relative; }

#technology .right .faq-list .search-question .btn-send .icon { position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin-top: -10px; margin-left: -10px; }

#technology .right .faq-list .search-question .btn-send .icon svg { position: absolute; width: 100%; height: 100%; left: 0; top: 0; }

#technology .right .faq-list .list { border-top: 3px solid #355f91; }

#technology .right .faq-list .list .qa-box { margin: 10px 0; }

#technology .right .faq-list .list .qa-box .q { background: #f1f5f8; border-top: 1px solid #dde6ef; border-bottom: 1px solid #dde6ef; position: relative; padding: 10px; padding-left: 50px; cursor: pointer; }

#technology .right .faq-list .list .qa-box .q:before { content: "Q"; background: #355f91; color: #fff; text-align: center; display: block; position: absolute; left: 10px; top: 13px; width: 30px; height: 30px; border-radius: 50%; }

#technology .right .faq-list .list .qa-box .q .cate { display: inline-block; vertical-align: top; padding: 3px 10px; margin-right: 10px; border: 1px solid #bcc6d9; border-radius: 3px; color: #000; }

#technology .right .faq-list .list .qa-box .q .ti { color: #000; display: inline-block; padding: 5px 0; }

#technology .right .faq-list .list .qa-box .q .date { padding: 5px; float: right; }

#technology .right .faq-list .list .qa-box .a { border-bottom: 1px solid #dde6ef; padding: 15px 25px; background: #fff; display: none; }

@media only screen and (min-width: 992px) { #technology .left .toggle { display: none; }
  #technology .right .download-list tbody td:first-child a:hover { color: #2f7dbd; text-decoration: underline; }
  #technology .right .download-list tbody td .btn-link:hover { color: #2f7dbd; } }

@media only screen and (max-width: 1199px) { #technology .title { font-size: 1.875rem; }
  #technology .left { width: 25%; }
  #technology .right { width: 75%; padding-left: 35px; }
  #technology .right .title .icon { width: 35px; height: 35px; }
  #technology .right .download-list thead th { font-size: 1rem; width: auto; }
  #technology .right .download-list thead th:first-child { width: 40%; }
  #technology .right .download-list tbody td { font-size: 0.937rem; } }

@media only screen and (max-width: 991px) { #technology .title { font-size: 1.625rem; }
  #technology .left { width: auto; float: right; position: relative; z-index: 2; }
  #technology .left .title { display: none; }
  #technology .left .toggle { display: block; float: right; background: none; border-radius: 5px; padding: 5px 15px; color: #355f91; font-size: 0.812rem; border: 1px solid #355f91; }
  #technology .left .toggle i { margin-left: 5px; }
  #technology .left > ul { position: absolute; right: 0; left: auto; top: 100%; min-width: 200px; z-index: 2; display: none; border-radius: 5px; overflow: hidden; -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); }
  #technology .left .level1 > a { font-size: 1rem; }
  #technology .right { width: 100%; padding-left: 0; margin-top: -45px; }
  #technology .right .faq-list .search-question { float: none; margin: 10px 0; font-size: 0; }
  #technology .right .faq-list .search-question .box { width: calc(49% - 20px); font-size: 1rem; margin: 0 0.5%; }
  #technology .right .faq-list .search-question .btn-send { width: 40px; }
  #technology .right .faq-list .list .qa-box .q .cate { font-size: 0.875rem; padding: 3px 5px; }
  #technology .right .faq-list .list .qa-box .q .ti { display: block; margin-top: 5px; }
  #technology .right .faq-list .list .qa-box .q .date { font-size: 0.812rem; padding: 3px; color: #666; } }

@media only screen and (max-width: 767px) { #technology .right .download-list thead.t-subhead { display: none; }
  #technology .right .download-list tbody tr { padding: 10px; display: block; }
  #technology .right .download-list tbody td { display: block; width: 100%; text-align: left; padding: 5px; padding-left: 90px !important; position: relative; min-height: 35px;}
  #technology .right .download-list tbody td .tit { position: absolute; top: 0; left: 0; padding: 5px; }
  #technology .right .download-list tbody td:last-child { padding: 5px !important; }
  #technology .right .download-list tbody td:last-child .tit { display: none; }
  #technology .right .download-list tbody td .btn-link { width: 100%; display: block; background: #6789b2; color: #fff; text-align: center; border-radius: 5px; font-size: 1rem; padding: 5px; }
  #technology .right .download-list tbody td .btn-link i { margin-right: 5px; font-size: 1rem; }
  #technology .right .download-list tbody td .btn-link:after { content: "Download"; font-size: 1rem; } }

/*member*/
#member { background: #e7ebef; }

#member .member-flex-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; }

#member .member-flex-wrap .box { width: 50%; float: left; min-height: 500px; padding: 60px 50px; background: #f5f5f5; }

#member .member-flex-wrap .box.bg { background-size: cover; background-position: 50% 50%; }

#member .member-flex-wrap .box .g-title .t1 { font-size: 2.6875rem; }

#member .member-flex-wrap .box .g-title .t1 .en { color: #6789b2; }

#member .member-flex-wrap .box .form-area { max-width: 440px; margin: 30px auto 0; }

#member .member-flex-wrap .box .form-area .label-box { display: block; position: relative; margin-bottom: 20px; }

#member .member-flex-wrap .box .form-area .label-box .tit { position: absolute; left: 10px; top: 50%; width: 24px; height: 24px; margin-top: -12px; background: url(../images/member-icons.jpg) no-repeat left center; background-size: auto 100%; }

#member .member-flex-wrap .box .form-area .label-box .input-box { border-radius: 2px; background: #fff; height: 47px; line-height: 47px; width: 100%; border: 1px solid #e5e5e5; padding-left: 40px; }

#member .member-flex-wrap .box .form-area .label-box.pwd .tit { background-position: 50% 0; }

#member .member-flex-wrap .box .form-area .label-box.code .tit { background-position: 100% 0; }

#member .member-flex-wrap .box .form-area .code-box .label-box { width: calc(100% - 175px); float: left; }

#member .member-flex-wrap .box .form-area .code-box .code-img { float: right; border: none; background: none; overflow: hidden; padding: 0; height: 47px; display: block; width: 165px; border: 1px solid #e5e5e5; }

#member .member-flex-wrap .box .form-area .code-box .code-img img { float: left; width: 118px; }

#member .member-flex-wrap .box .form-area .code-box .code-img .refresh { color: #fff; background: #bdc9dc; float: right; position: relative; display: block; width: calc(100% - 118px); height: 100%; padding: 0 10px; }

#member .member-flex-wrap .box .form-area .code-box .code-img .refresh i { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

#member .member-flex-wrap .box .form-area .g-button { display: block; margin: 30px auto 0; }

#member .member-flex-wrap .box .form-area .others { display: block; text-align: center; margin-top: 15px; }

#member .member-flex-wrap .box .form-area .others a { color: #666; display: inline-block; font-size: 0.937rem; }

#member .member-flex-wrap .box .form-area .others a:hover { text-decoration: underline; }

@media only screen and (max-width: 1199px) { #member .member-flex-wrap .box { padding: 50px; }
  #member .member-flex-wrap .box .g-title .t1 { font-size: 1.875rem; } }

@media only screen and (max-width: 992px) { #member .member-flex-wrap { display: block; }
  #member .member-flex-wrap .box { width: 100%; min-height: inherit; }
  #member .member-flex-wrap .box.bg { display: none; } }

@media only screen and (max-width: 767px) { #member .member-flex-wrap .box { padding: 30px 20px; }
  #member .member-flex-wrap .box .form-area .label-box { margin-bottom: 10px; }
  #member .member-flex-wrap .box .form-area .code-box .label-box { width: 100%; float: none; }
  #member .member-flex-wrap .box .form-area .code-box .code-img { float: none; margin: auto; } }

#member .profile-box { background: #ffffff; padding: 50px 100px; }

#member .profile-box .g-title .t1 { font-size: 2.6875rem; }

#member .profile-box .g-title .t1 .en { color: #6789b2; }

#member .profile-box .g-cate { margin-top: 30px; }

#member .profile-box .block { margin-top: 50px; }

#member .profile-box .block .title { font-size: 1.5625rem; margin-bottom: 20px; }

#member .profile-box .block .title .num { position: relative; width: 35px; height: 35px; display: inline-block; vertical-align: middle; margin-bottom: 8px; z-index: 2; color: #fff; text-align: center; line-height: 35px; font-size: 1rem; }

#member .profile-box .block .title .num svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; }

@media only screen and (max-width: 1199px) { #member .profile-box { padding: 50px; } }

@media only screen and (max-width: 991px) { #member .profile-box .g-title .t1 { font-size: 2.1875rem; }
  #member .profile-box .block { margin-top: 30px; }
  #member .profile-box .block .title { font-size: 1.375rem; }
  #member .profile-box .group-buttons { margin-top: 20px; font-size: 0; }
  #member .profile-box .group-buttons button, #member .profile-box .group-buttons a { max-width: calc(50% - 4px); display: inline-block; font-size: 0.937rem; } }

@media only screen and (max-width: 767px) { #member .profile-box { padding: 20px; }
  #member .profile-box .g-title .t1 { font-size: 1.625rem; }
  #member .profile-box .block .title { font-size: 1.25rem; } }

#privacy { max-width: 1360px; margin: auto; background: #fff; padding: 70px; max-height: 80%; position: relative; overflow: auto; border-radius: 10px; }

#privacy .g-title .t1 { font-size: 2.5rem; }

#privacy .text-edit { text-align: left; max-height: 50vh; overflow: auto; margin: 30px 0; }

@media only screen and (max-width: 991px) { #privacy { padding: 25px; }
  #privacy .g-title .t1 { font-size: 1.875rem; } }

.form .half { float: left; width: 49%; }

.form .half.right { float: right; }

.form .half.right .f-tit { text-align: right; padding-right: 10px; }

.form .f-row { margin-bottom: 20px; font-size: 0; }

.form .f-row > div { font-size: 1.125rem; display: inline-block; vertical-align: top; }

.form .f-row .f-tit { width: 150px; padding: 8px 0px 8px 10px; }

.form .f-row .f-tit .must { color: #dc4a45; }

.form .f-row .f-content { width: calc(100% - 150px); padding: 8px 0 0; }

.form .f-row .f-content > .input-box, .form .f-row .f-content > .code-box, .form .f-row .f-content > .gender-box { margin: -8px 0; }

.form .f-row.pwd .f-tit { width: 180px; }

.form .f-row.pwd .f-content { width: calc(100% - 180px); }

.form .f-row.other .f-tit { width: 350px; }

.form .f-row.other .f-content { width: calc(100% - 350px); }

.form .sexRadio { display: inline-block; vertical-align: middle; margin: 0; line-height: 1.3; }

.form .sexRadio input { display: none; }

.form .sexRadio input + span { width: 65px; height: 47px; line-height: 47px; cursor: pointer; text-align: center; background-color: #fff; border-left: 1px solid rgba(221, 221, 221, 0.5); color: #000; font-size: 1rem; display: block; }

.form .sexRadio input:checked + span { background: #6789b2; color: #fff; }

.form .radio { display: inline-block; vertical-align: middle; margin: 0 5px 5px 0; line-height: 1.3; }

.form .radio input { display: none; }

.form .radio input + span.icon { width: 25px; height: 25px; border-radius: 50%; background: #f8f8f8; border: 1px solid #e5e5e5; display: block; float: left; position: relative; margin-right: 5px; padding: 5px; }

.form .radio input + span.icon i { width: 100%; height: 100%; display: block; background-color: #6c87b1; border-radius: 50%; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition: -webkit-transform 0.25s; transition: -webkit-transform 0.25s; -o-transition: transform 0.25s; transition: transform 0.25s; transition: transform 0.25s, -webkit-transform 0.25s; }

.form .radio input:checked + span.icon { background: #fff; }

.form .radio input:checked + span.icon i { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }

.form .checkbox { display: inline-block; vertical-align: middle; margin: 0 5px 5px 0; line-height: 1.3; }

.form .checkbox input { display: none; }

.form .checkbox input + span.icon { width: 25px; height: 25px; background: #f8f8f8; border: 1px solid #e5e5e5; display: block; float: left; position: relative; margin-right: 5px; }

.form .checkbox input + span.icon i { font-size: 0.875rem; position: absolute; left: 50%; top: 50%; color: #6c87b1; -webkit-transform: scale(0) translate(-50%, -50%); -ms-transform: scale(0) translate(-50%, -50%); transform: scale(0) translate(-50%, -50%); -webkit-transition: -webkit-transform 0.25s; transition: -webkit-transform 0.25s; -o-transition: transform 0.25s; transition: transform 0.25s; transition: transform 0.25s, -webkit-transform 0.25s; }

.form .checkbox input:checked + span.icon { background: #fff; }

.form .checkbox input:checked + span.icon i { -webkit-transform: scale(1) translate(-50%, -50%); -ms-transform: scale(1) translate(-50%, -50%); transform: scale(1) translate(-50%, -50%); }

.form .input-box { background: #f8f8f8; border: 1px solid #e5e5e5; width: 100%; height: 47px; padding: 0 10px; color: #000; }

.form .textarea { background: #f8f8f8; border: 1px solid #e5e5e5; width: 100%; height: 150px; padding: 10px; color: #000; }

.form .gender-box .input-box { width: calc(100% - 170px); }

.form .gender-box .option { float: right; width: 170px; padding: 8px 0; padding-left: 15px; }

.form .gender-box.type2 .input-box { width: calc(100% - 130px); }

.form .gender-box.type2 .option { width: 130px; padding: 0; }

.form .gender-box.type2 .option > * { float: left; }

.form .code-box .input-box { width: calc(100% - 175px); }

.form .code-box .code-img { float: right; border: none; background: none; overflow: hidden; padding: 0; height: 47px; display: block; width: 165px; border: 1px solid #e5e5e5; }

.form .code-box .code-img img { float: left; width: 118px; }

.form .code-box .code-img .refresh { color: #fff; background: #bdc9dc; float: right; position: relative; display: block; width: calc(100% - 118px); height: 100%; padding: 0 10px; }

.form .code-box .code-img .refresh i { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

.form .link { color: #d59595; border-bottom: 1px solid #d59595; }

@media only screen and (max-width: 1199px) {
  .form .f-row > div { font-size: 1rem; }
  .form .f-row .f-tit { width: 135px; }
  .form .f-row .f-content { width: calc(100% - 135px); }
  /*.form .f-row.other .f-tit { width: 250px; }
  .form .f-row.other .f-content { width: calc(100% - 250px); }*/
}

@media only screen and (max-width: 991px) { .form .half { float: none; width: 100%; }
  .form .half.right { float: none; }
  .form .half.right .f-tit { text-align: left; }
  .form .f-row .f-tit { padding: 8px 0px !important; } }

@media only screen and (max-width: 767px) { .form .f-row { margin-bottom: 10px; }
  .form .f-row .f-tit { width: 100% !important; padding: 2px 0px !important; }
  .form .f-row .f-content { width: 100% !important; }
  .form .f-row.other .f-tit { width: 100%; }
  .form .f-row.other .f-content { width: 100%; } }

/*contact*/
#contact .page-main { padding-bottom: 0; background-color: #fff; }

@media only screen and (max-width: 991px) { #contact .page-main .g-cate ul li { width: 50%; } }

#contact #map { margin: 30px 0; position: relative; height: 0; padding-bottom: 60%; }

#contact #map svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

#contact #map svg g { cursor: pointer; -webkit-transition: fill 0.35s; -o-transition: fill 0.35s; transition: fill 0.35s; }

#contact #map svg g text { fill: #fff; stroke: none; }

#contact #map svg g.on { fill: #4b87c6; }

@media only screen and (min-width: 992px) { #contact #map svg g:hover { fill: #4b87c6; } }

@media only screen and (max-width: 767px) { #contact #map svg { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } }

#contact #locations { background-color: #eee; padding: 50px 0; }

#contact #locations .title { position: relative; z-index: 2; }

#contact #locations .title:before, #contact #locations .title:after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; z-index: -1; }

#contact #locations .title:before { background-color: #bfcfe0; }

#contact #locations .title:after { background-color: #fff; margin-bottom: 1px; }

#contact #locations .title .text { position: relative; padding-left: 40px; font-size: 1.875rem; font-weight: bold; display: inline-block; border-bottom: 3px solid #7492b3; }

#contact #locations .title .text .icon { width: 34px; height: 34px; display: block; position: absolute; top: 50%; left: 0; margin-top: -17px; }

#contact #locations .title .text .icon svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }

#contact #locations .list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 15px 0; }

#contact #locations .list li { -webkit-box-flex: 0; -ms-flex: 0 0 20%; flex: 0 0 20%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 5px 0; }

#contact #locations .list li img { width: 75px; }

#contact #locations .list li span { display: inline-block; padding-left: 15px; width: calc(100% - 75px); word-wrap: break-word; }

@media only screen and (max-width: 991px) { #contact #locations .title .text { padding: 5px 5px 5px 30px; font-size: 1.5rem; }
  #contact #locations .title .text .icon { width: 24px; height: 24px; margin-top: -12px; }
  #contact #locations .list li { -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; } }

@media only screen and (max-width: 767px) { #contact #locations .title .text { font-size: 1.25rem; }
  #contact #locations .list { display: block; }
  #contact #locations .list li { display: inline-block; text-align: center; padding: 5px; }
  #contact #locations .list li img { margin: auto; }
  #contact #locations .list li span { display: block; padding-left: 0px; width: 100%; } }

#contact #form { background: url(../images/contactBG.jpg) no-repeat; background-size: cover; padding: 80px 0 150px; }

#contact #form .g-title { margin-bottom: 50px; }

#contact #form .g-title .t1 { color: #fff; font-size: 2.5rem; }

#contact #form .g-title .t1 .en { display: inline-block; }

#contact #form .form { float: left; width: 68%; }

#contact #form .form .f-row .f-tit { color: #fff; width: 110px; padding: 8px 20px; }

#contact #form .form .f-row .f-tit .must { float: left; margin-left: -10px; }

#contact #form .form .f-row .f-tit .d-text { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }

#contact #form .form .f-row .f-content { width: calc(100% - 110px); color: #fff; }

#contact #form .form .f-row.f-long-tit .f-tit, #contact #form .form .f-row.f-long-tit2 .f-tit{ width: 160px;  }

#contact #form .form .f-row.f-long-tit .f-content, #contact #form .form .f-row.f-long-tit2 .f-content{ width: calc(100% - 160px); }

#contact #form .form .f-row .input-box, #contact #form .form .f-row .textarea { background-color: rgba(255, 255, 255, 0.5); border: none; -webkit-transition: background 0.25s; -o-transition: background 0.25s; transition: background 0.25s; }

#contact #form .form .f-row .input-box:focus, #contact #form .form .f-row .textarea:focus { background-color: white; }

#contact #form .form .group-buttons { margin: 0; font-size: 0; }

#contact #form .form .group-buttons .btn-clear, #contact #form .form .group-buttons .btn-send { width: calc(50% - 10px); border: 1px solid transparent; color: #fff; font-size: 1rem; line-height: 47px; height: 47px; }

#contact #form .form .group-buttons .btn-clear { border-color: rgba(255, 255, 255, 0.4); background-color: transparent; }

#contact #form .form .group-buttons .btn-send { border-color: #3c86de; background-color: #3c86de; }

#contact #form .infos { float: right; width: 32%; padding-left: 40px; }

#contact #form .infos .title { font-size: 1.875rem; color: #fff; line-height: 1.3; border-bottom: 1px solid rgba(255, 255, 255, 0.5); padding-bottom: 20px; margin-bottom: 30px; }

#contact #form .infos ul li { margin-bottom: 20px; color: #fff; font-size: 1.125rem; position: relative; padding-left: 75px; min-height: 60px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; }

#contact #form .infos ul li .icon { width: 60px; height: 60px; display: block; position: absolute; left: 0; top: 50%; margin-top: -30px; border-radius: 10px; background-color: rgba(255, 255, 255, 0.3); }

#contact #form .infos ul li .icon svg { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 30px; height: 30px; }

#contact #form .infos ul li a { color: #fff; margin: 0px 10px 0px 0; }

#contact #form .infos ul li a:hover { text-decoration: underline; }

@media only screen and (max-width: 1199px) { #contact #form .infos .title { font-size: 1.375rem; }
  #contact #form .infos ul li { font-size: 1rem; padding-left: 65px; }
  #contact #form .infos ul li .icon { width: 50px; height: 50px; margin-top: -25px; }
  #contact #form .form .clearfix:last-child .half { width: 100%; float: none; }
  #contact #form .form .group-buttons { margin-top: 40px; padding-left: 105px; } }

@media only screen and (max-width: 991px) { #contact #form { padding: 50px 0; }
  #contact #form .g-title { margin-bottom: 30px; text-align: center; }
  #contact #form .g-title .t1 { font-size: 2rem; }
  #contact #form .form, #contact #form .infos { float: none; width: 100%; }
  #contact #form .infos { padding: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.4); margin-bottom: 40px; }
  #contact #form .infos ul { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }
  #contact #form .infos ul li { width: 50%; }
  #contact #form .form .f-row .f-tit .d-text { display: block; }
  #contact #form .form .group-buttons { margin: 50px 0 0; }
  #contact #form .form .f-row.f-long-tit .f-tit{ width: 130px;  }
  #contact #form .form .f-row.f-long-tit .f-content{ width: calc(100% - 130px); }
  #contact #form .form .f-row.f-long-tit2 .f-tit{ width: 110px;  }
  #contact #form .form .f-row.f-long-tit2 .f-content{ width: calc(100% - 110px); }
}

@media only screen and (max-width: 767px) { #contact #form { padding: 30px 0; }
  #contact #form .g-title { margin-bottom: 20px; }
  #contact #form .g-title .t1 { font-size: 1.5625rem; }
  #contact #form .infos { padding: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.4); margin-bottom: 40px; }
  #contact #form .infos .title { margin-bottom: 10px; text-align: center; font-size: 1.25rem; }
  #contact #form .infos ul { display: block; }
  #contact #form .infos ul li { width: 100%; padding-left: 55px; min-height: 40px; line-height: 20px; margin-bottom: 5px; font-size: 0.937rem; }
  #contact #form .infos ul li .icon { width: 40px; height: 40px; margin-top: -20px; }
  #contact #form .infos ul li .icon svg { width: 20px; height: 20px; }
  #contact #form .form .f-row .f-tit, #contact #form .form .f-row .f-content { width: 100%; }
  #contact #form .form .group-buttons { margin: 30px 0 0; padding-left: 0px; } }

/*message*/
.page-main .message .text { margin: 50px 0; }

/*other*/
#other .list { font-size: 0; margin: 0 -25px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }

#other .list .box { display: inline-block; vertical-align: top; padding: 0 25px; width: 14.28571%; text-align: center; }

#other .list .box .title { font-size: 1.25rem; text-align: center; font-weight: bold; }

#other .list .box .title:after { content: ""; display: block; width: 100%; height: 2px; margin-top: 10px; background-color: #14528f; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FF14528F', endColorstr='#FF2F7DBD'); background-image: -owg-linear-gradient(left, #14528f 0%, #2f7dbd 100%); background-image: -webkit-linear-gradient(left, #14528f 0%, #2f7dbd 100%); background-image: -o-linear-gradient(left, #14528f 0%, #2f7dbd 100%); background-image: -webkit-gradient(linear, left top, right top, from(#14528f), to(#2f7dbd)); background-image: linear-gradient(left, #14528f 0%, #2f7dbd 100%); }

#other .list .box ul li { font-size: 1.125rem; color: #2f7dbd; padding: 5px 0; }

@media only screen and (max-width: 1199px) { #other .list { margin: 0 -10px; }
  #other .list .box { padding: 0 10px; }
  #other .list .box .title { font-size: 1.125rem; }
  #other .list .box ul li { font-size: 1rem; } }

@media only screen and (max-width: 991px) { #other .list .box { width: 25%; -webkit-box-flex: 1; -ms-flex: 1 1 calc(100% / 4); flex: 1 1 calc(100% / 4); } }

@media only screen and (max-width: 767px) { #other .list { display: block; }
  #other .list .box { width: 100%; border: 1px solid #ddd; background: #fff; padding: 10px; margin-bottom: 20px; }
  #other .list .box .title { margin: 0; } }

/*未登入*/
.unsigned{position: relative;}
.unsigned .cover{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(../images/linebg.png); z-index: 10;}
.unsigned .cover .block{position: absolute; top: 50%; left: 50%; max-width: 700px; width: 100%; padding: 40px 50px; background: #fff; border-radius: 10px; -webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);-o-transform: translate(-50%, -50%);transform: translate(-50%, -50%);}
.unsigned .cover .block .g-title{text-align: center; margin: 0 !important;}
.unsigned .cover .block .g-title .t1{ color: #000 !important; display: block;}
.unsigned .cover .block .g-title .en{color: #6789b2; display: block!important;}
.unsigned .cover .block .text{margin: 40px auto;}
.unsigned .cover .block .g-button{margin: auto; display: block; width: 200px;}
@media only screen and (max-width: 767px){.unsigned .cover .block{top: 20%; max-width: 320px;  padding: 30px 20px;}
  .unsigned .cover .block .text{margin: 20px auto 30px;}}

/*產業應用_2019/08/26*/
.second-sub {
  font-size: 0;
  text-align: center;
  margin: 40px 0;
}
.second-sub .toggle-sub {
  width: 100%;
  border: none;
  background: #14528f;
  color: #fff;
  text-align: center;
  padding: 5px;
  font-size: 1.125rem;
}
@media only screen and (min-width: 992px){
  .second-sub ul {
    display: block !important;
  }
}
.second-sub ul li {
  width: 20%;
  max-width: 200px;
  padding: 1px;
  margin: 0 10px 15px;
  display: inline-block;
  vertical-align: top;
}
.second-sub ul li a {
  padding: 8px 10px;
  display: block;
  background: #fff;
  color: #999;
  border-radius: 3px;
  text-align: center;
  font-size: 1.125rem;
  position: relative;
  -webkit-transition: background 0.35s;
  -o-transition: background 0.35s;
  transition: background 0.35s;
}
.second-sub ul li.active a,
.second-sub ul li a:hover {
  color: #fff;
  background: rgb(47,125,189);
  background: -webkit-linear-gradient(left, rgba(47,125,189,1) 82%, rgba(47,125,189,1) 82%, rgba(35,106,169,1) 100%);
  background: -o-linear-gradient(left, rgba(47,125,189,1) 82%, rgba(47,125,189,1) 82%, rgba(35,106,169,1) 100%);
  background: linear-gradient(to right, rgba(47,125,189,1) 82%, rgba(47,125,189,1) 82%, rgba(35,106,169,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2f7dbd', endColorstr='#236aa9',GradientType=1 );
}
#appcations .page-main.bottom {
  padding-bottom: 40px;
}
#appcations .cont {
  text-align: center;
  clear: both;
}
#appcations .cont.bg {
  -webkit-clip-path: polygon(69% 4%, 100% 0, 100% 100%, 29% 91%, 0 100%, 0 1%);
  clip-path: polygon(69% 4%, 100% 0, 100% 100%, 29% 91%, 0 100%, 0 1%);
  padding: 170px 0 100px;
  margin-bottom: 70px;
  background: url(../images/appli-sec2-img.jpg);
  background-size: cover;
}
#appcations .cont.building {
  -webkit-clip-path : polygon(0 0, 100% 0, 100% 100%, 0 88%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 88%);
  padding: 0 0 100px;
  margin-bottom: 70px;
  background: url(../images/appli-sec1-img.png) no-repeat;
  background-position: right bottom;
}
#appcations .cont.air {
  -webkit-clip-path : polygon(0 0, 100% 10%, 100% 100%, 0 90%);
  clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 90%);
  padding: 170px 0 100px;
  margin: -170px 0 70px;
  background: url(../images/appli-sec3-img.jpg);
  background-size: cover;
}
#appcations .cont.smoke {
  -webkit-clip-path : polygon(0 0, 100% 8%, 100% 100%, 0 100%);
  clip-path: polygon(0 0, 100% 8%, 100% 100%, 0 100%);
  position: relative;
  padding: 170px 0 70px;
  margin: -170px 0 0;
  background: url(../images/appli-sec4-img.jpg);
  background-position: center bottom;
  background-size: cover;
}
#appcations .cont.smoke:before {
  position: absolute;
  content: '';
  top: -25px;
  left: 0;
  width: 423px;
  height: 174px;
  background: url(../images/appli-sec5-img.png);
}
#appcations .cont.monitor.pic {
  padding: 260px 0 180px;
  margin: -130px 0 70px;
  background: url(../images/appli-sec6-img.jpg) no-repeat;
  background-position: center bottom;
  background-size: cover;
}
#appcations .cont .img img {
  max-width: 100%;
}
#appcations .cont .img,
#appcations .cont .txt {
  width: calc(100% / 2 - 45px);
  margin-bottom: 70px;
}


#appcations .cont .img,
#appcations .cont.bg .txt,
#appcations .cont .txt.left {
  float: left;
}
#appcations .cont .txt,
#appcations .cont.bg .img,
#appcations .cont .img.right {
  float: right;
}
#appcations .cont.monitor .img,
#appcations .cont.monitor .txt {
  width: 100%;
  margin-bottom: 20px;
  float: none;
}
#appcations .cont .txt {
  font-size: 1.125rem;
  line-height: 2;
  text-align: left;
}
#appcations .cont.green .container {
  position: relative;
  padding-bottom: 60px;
  margin-bottom: 60px;
}
#appcations .cont.green .img {
  width: 67%;
}
#appcations .cont.green .txt {
  position: absolute;
  max-width: 670px;
  right: 0;
  bottom: 0;
  background: #fff;
  padding: 30px 40px 50px 50px;
  -moz-box-shadow: 4px 0 12px rgba(0,0,0,0.1);
  -webkit-box-shadow: 4px 0 12px rgba(0,0,0,0.1);
  box-shadow: 4px 0 12px rgba(0,0,0,0.1);
}
#appcations .cont.green .txt.left {
  right: auto;
  left: 0;
  background: #2f7dbd;
}
#appcations .cont .tit {
  font-size: 2.5rem;
  color: #222;
  margin: 0;
  vertical-align: middle;
}
#appcations .cont .tit .en {
  color: #6789b2;
  font-size: 1.25rem;
  padding: 0 18px;
  vertical-align: middle;
}
#appcations .cont.bg .txt,
#appcations .cont.bg .tit,
#appcations .cont.bg .tit .en,
#appcations .cont.green .txt.left,
#appcations .cont.green .txt.left .tit,
#appcations .cont.green .txt.left .en,
#appcations .cont.monitor.pic .txt,
#appcations .cont.monitor.pic .tit,
#appcations .cont.monitor.pic .en {
  color: #fff;
}
#appcations .cont .tips li {
  position: relative;
  display: inline-block;
  margin: 15px 15px 5px 0;
  padding: 2px 0;
  text-align: center;
  color: #6789b2;
}
#appcations .cont .tips li:after,
#appcations .cont.green .tips li:after {
  position: absolute;
  content: '';
  top: 20px;
  right: -11px;
  width: 3px;
  height: 3px;
  border-radius: 100%;
  background: #6789b2;
}
#appcations .cont .tips li:last-child:after {
  display: none;
}
#appcations .cont.green .tips li {
  margin-left: 0;
  margin-right: 20px;
  color: #6789b2;
}
#appcations .cont.green .txt.left .tips li {
  color: #00f3ff;
}
#appcations .cont.bg .tips li {
  color: #00f3ff;
}
#appcations .cont.bg .tips li:after {
  background: #00f3ff;
}
#appcations .cont.green .tips li:after {
  background: #6789b2;
}
#appcations .cont.monitor .img.half img {
  display: inline-block;
  width: calc(100% / 2 - 10px);
  padding: 0 10px;
}
#appcations .cont.monitor.pic .tips li,
#appcations .cont.factory .txt.left li {
  color: #8cc5e9;
}
#appcations .cont.factory .img {
  width: 57%;
  max-width: 1010px;
  padding-left: 60px;
}
#appcations .cont.factory .img.pr60 {
  padding-right: 60px;
  padding-left: 0;
}
#appcations .cont.factory .img.pb130 {
  margin-bottom: 130px;
}
#appcations .cont.factory .txt {
  width: 50%;
  max-width: 555px;
  text-align: left;
}
#appcations .cont.factory .tips li {
  margin: 15px 9px 5px;
}
#appcations .cont.factory .txt.left .tips li:after {
  background: #b4daf4;
}
#appcations .cont.factory .tips li:first-child {
  margin-left: 0;
}
#appcations .cont.factory .tips li:last-child {
  margin-right: 0;
}
#appcations .cont.factory.one {
  padding: 10px 0;
  background: url(../images/factory-bg1.png) 0 bottom no-repeat;
  background-size: 100%;
}
#appcations .cont.factory.two {
  background: #3e5e94 url(../images/factory-bg2.png) 0 bottom no-repeat;
  padding: 82px 0 10px;
}
#appcations .cont.factory.three {
  position: relative;
  background: url(../images/factory-bg3-1.png) 0 bottom no-repeat;
  padding-top: 82px;
}
#appcations .cont.factory.three:before {
  position: absolute;
  content: '';
  width: 265px;
  height: 256px;
  right: 0;
  top: 0;
  background: url(../images/factory-bg3-2.png) 0 0 no-repeat;
}
#appcations .cont.factory.three .txt {
  margin-top: 45px;
}
#appcations .cont .txt.white,
#appcations .cont.factory.two .tit .en,
#appcations .cont.factory.two .tit {
  color: #fff;
}
@media only screen and (max-width: 1799px){
  #appcations .cont.factory .img {
    width: 55%;
  }
}
@media only screen and (max-width: 1480px){
  #appcations .cont.factory .img {
    width: 54%;
  }
}
@media only screen and (max-width: 1440px){
  #appcations .cont.factory .img {
    width: 48%;
  }
}



@media only screen and (max-width: 1199px){
  #appcations .cont .tit {
    font-size: 2.1875rem;
  }
  #appcations .cont .img,
  #appcations .cont.factory .img {
    width: 45%;
    padding-top: 10px;
  }
  #appcations .cont .txt,
  #appcations .cont.factory .txt {
    width: 53%;
    line-height: 1.8;
  }
  #appcations .cont .txt,
  #appcations .cont .tit .en {
    font-size: 1rem;
  }
  #appcations .page-main {
    padding-bottom: 30px;
  }
  #appcations .cont {
    margin-bottom: 30px;
  }
  #appcations .cont.green,
  #appcations .cont.factory {
    margin-bottom: 0;
  }
  #appcations .cont.monitor.pic {
    padding: 160px 0 100px;
  }
  #appcations .cont.factory.two {
  background: #3e5e94;
  }
  .second-sub ul li {
    margin: 0 1px 15px;
    max-width: 180px;
  }
}
@media only screen and (max-width: 991px){
  .second-sub {
    position: relative;
    margin: 10px 0;
    background: #fff;
  }
  .second-sub ul {
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    display: none;
    padding: 0;
    background: #fff;
    z-index: 9;
  }
  .second-sub ul li {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
  }
  .second-sub ul li a {
    color: #222;
    background: #fff;
    border-radius: 0;
    font-size: 1rem;
  }
  .second-sub ul li.active a, .second-sub ul li a:hover {
    color: #fff;
    background: #2f7dbd;
  }
  #appcations .page-main.bottom {
    padding-bottom: 0;
  }
  #appcations .cont.bg,
  #appcations .cont.building,
  #appcations .cont.air,
  #appcations .cont.smoke {
    padding: 70px 0 50px;
    -webkit-clip-path: none;
    clip-path: none;
  }
  #appcations .cont.building {
    padding: 0 0 130px;
    background: url(../images/appli-sec1-img-s.png) no-repeat;
  }
  #appcations .cont.air {
    padding: 30px 0 130px;
  }
  #appcations .cont.smoke {
    padding: 70px 0 30px;
  }
  #appcations .cont.smoke:before {
    display: none;
  }
  #appcations .cont .img {
    padding-top: 0;
  }
  #appcations .cont .img,
  #appcations .cont .txt,
  #appcations .cont.factory .txt {
    width: 100%;
    margin-bottom: 20px;
  }
  #appcations .cont.factory .img {
    padding-left: 0;
  }
  #appcations .cont.factory .img.pr60 {
    padding-right: 0;
  }
  #appcations .cont .img,
  #appcations .cont.bg .img,
  #appcations .cont .img.right {
    margin: 0 0 10px;
  }
  #appcations .cont .img.right {
    margin-top: 30px;
  }
  #appcations .cont .tit {
    font-size: 1.875rem;
  }
  #appcations .cont .tit .en {
    font-size: 1.06rem;
    margin-bottom: 10px;
  }
  #appcations .cont.green .container {
    padding-bottom: 0;
    margin-bottom: 0;
  }
  #appcations .cont.green .img,
  #appcations .cont.green .txt,
  #appcations .cont.factory .img {
    float: none;
    width: 100%;
    margin: 0 auto;
  }
  #appcations .cont.factory.one {
    background: none;
  }
  #appcations .cont.factory.two {
    padding: 50px 0 20px;
  }
  #appcations .cont.factory.three {
    padding: 40px 0 30px;
    margin-bottom: 0;
  }
  #appcations .cont.factory.three .txt {
    margin-top: 10px;
  }
  #appcations .cont.factory .img.pb130 {
    margin-bottom: 0;
  }
  #appcations .cont.green .img,
  #appcations .cont.factory .img {
    width: 85%;
  }
  #appcations .cont.factory .txt {
    max-width: 100%;
  }
  #appcations .cont.green .txt,
  #appcations .cont.factory .txt {
    text-align: center;
  }
  #appcations .cont.green .txt,
  #appcations .cont.green .txt.left,
  #appcations .cont.factory .txt,
  #appcations .cont.factory .txt.left {
    padding: 10px 0 50px;
    position: static;
    background: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
  #appcations .cont.factory .txt,
  #appcations .cont.factory .txt.left {
    padding: 10px 0 0;
  }
  #appcations .cont.green .txt.left,
  #appcations .cont.green .txt.left .tit {
    color: #222;
  }
  #appcations .cont.green .txt.left .en {
    color: #6789b2;
  }
  #appcations .cont.monitor.pic {
    padding: 110px 0 50px;
    margin-bottom: 50px;
  }
}
@media only screen and (max-width: 767px){
  #appcations .cont .tit {
    font-size: 1.5rem;
  }
  #appcations .cont.green .img,
  #appcations .cont.factory .img {
    width: 90%;
  }
}
@media only screen and (max-width: 639px){
  #appcations .cont .tit span {
    display: block;
    line-height: 1.5;
    margin-bottom: 20px;
  }
  #appcations .cont.monitor .img img {
    width: 100%;
    padding: 10px 0;
  }
  #appcations .cont.green .tips li {
    margin: 15px 10px 5px;
  }
}
/*關於永宏_2019/09/16*/
#about .page-banner.quality {
  background: url(../images/quality_bg.jpg) center bottom no-repeat;
}
#about .page-banner.rd {
  background: url(../images/rd_bg.jpg) center 0 no-repeat;
}
#about .page-banner.future {
  background: url(../images/future_bg.jpg) center 0 no-repeat;
}
#about .page-main {
  padding: 0;
  margin: 0;
}
.page-wrap.about-bg{
  background: url(../images/appli-sec4-img.jpg) no-repeat center bottom #e7eaef;
  background-attachment: fixed;
  -webkit-background-size: 100% auto;
  background-size: 100% auto;
  padding-bottom: 100px;
}
#about .about-title {
  font-size: 3rem;
  text-align: center;
  color: #fff;
  margin: 80px 0 45px;
  line-height: 1.7;
}
#about .about-title .en {
  display: block;
  font-size: 1.375rem;
  color: #92adce;
}
#about .company .txt {
  width: 100%;
  max-width: 100%;
  color: #444;
  text-align: center;
  margin: 0 0 45px;
}
#about .company .txt.text-left{
  text-align: left;
}
#about .company .about-logo{
  width: 100%;
  max-width: 250px;
  line-height: 0;
  margin: 10px auto 50px auto;
  background: url(../images/logo.svg) no-repeat 0 0;
  -webkit-background-size: contain;
  background-size: contain;
}
#about .company .about-logo:before{
  content: '';
  display: block;
  width: 100%;
  padding-bottom: 20%;
}
#about .company .embed-responsive-16by9 {
  margin-bottom: 65px;
}
#about .company .circle-bg {
  position: relative;
  display: inline-block;
  width: 200px;
  height: 200px;
  margin: 50px 20px 0;
  border-radius: 50%;
  text-align: center;
  background: rgba(48, 81, 135, 0.6);
}
#about .company .circle-bg.border {
  background: none;
  border: 10px solid rgba(48, 81, 135, 0.6);
}
#about .company .circle-bg .circle-txt {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 2;
  color: #fff;
  width: 200px;
  font-size:  2.375rem;
  line-height: 45px;
}
#about .company .circle-bg:hover {
  opacity: .9;
}
#about .company .circle-bg .circle-txt.blue {
  color: #7c90b0;
}
#about .company .circle-bg.border .circle-txt {
  left: -10px;
}
@media only screen and (min-width: 1480px){
  .container-1500 {
    width: 1500px;
  }
  .container-1600 {
    width: 1600px;
  }
}
#about .quality {
  position: relative;
  clear: both;
  background: url(../images/quality_bg.jpg) center top repeat-y;
}
#about .quality .txt{
  z-index: 100;
  max-height: 500px;
  overflow-y: auto;
  padding-right: 10px;
}
#about .quality .txt::-webkit-scrollbar{
  width: 4px;
}
#about .quality .txt::-webkit-scrollbar-track{
  -webkit-box-shadow: none ;
  border-radius: 10px;
  margin: 0;
} 
#about .quality .txt::-webkit-scrollbar-thumb{
  -webkit-box-shadow: none;
  border-radius: 8px;
  background: rgba(255,255,255,0.3);
}
#about .quality .bread-crumb li a,
#about .future .bread-crumb li a {
  color: #fff;
}
#about .quality .g-cate ul li a,
#about .future .g-cate ul li a {
  background: #fff;
  color: #45658b;
}
#about .quality .g-cate ul li.active a:before,
#about .future .g-cate ul li.active a:before {
  display: none;
}
#about .quality .g-cate ul li.active a,
#about .future .g-cate ul li.active a {
  color: #fff;
  background: #45658b;
}
#about .rd .container {
  padding-bottom: 120px;
}
#about .img {
  display: inline-block;
  width: 35%;
  margin-bottom: 70px;
  vertical-align: top;
}
#about .txt {
  display: inline-block;
  max-width: 54%;
  margin: 0 65px;
  color: #fff;
  line-height: 2;
  font-size: 1.125rem;
  margin-bottom: 70px;
}
#about .quality .img {
  position: relative;
  top: 20px;
}
#about .img img {
  max-width: 100%;
}
#about .quality .slogan {
  position: absolute;
  pointer-events: none;
  content: '';
  width: 100%;
  height: 100%;
  max-height: 362px;
  bottom: 70px;
  background: url(../images/quality_txt.png) center bottom no-repeat;
}
#about .rd {
  position: relative;
  clear: both;
  background: url(../images/rd_bg.jpg) center -415px no-repeat;
}
#about .company .about-title,
#about .rd .about-title,
#about .rd .txt {
  color: #000;
}
#about .rd .about-title {
  margin: 125px 0 20px;
}
#about .company .about-title .en,
#about .rd .about-title .en {
  color: #5e84b2;
}
#about .rd .img {
  position: absolute;
  top: 150px;
  right: 0;
}
#about .future {
  position: relative;
  clear: both;
  background: url(../images/future_bg.jpg) center -415px no-repeat;
}
#about .future .about-title {
  text-align: left;
  margin: 0 0 20px;
}
#about .future .about-title .en {
  display: inline-block;
  color: #fff;
  padding-left: 10px;
}
#about .future .txt-bg {
  width: 100%;
  max-width: 100%;
  padding: 130px 0 175px 885px;
  background: url(../images/future_img.png) 0 center no-repeat;
}
#about .future .txt {
  width: 100%;
  max-width: 540px;
  margin: 0;
}
.clip-none #footer {
  margin-top: 0;
}
.clip-none #footer .inner {
  -webkit-clip-path: none;
  clip-path: none;
  padding-top: 40px;
}
@media only screen and (max-width: 1479px){
  #about .page-banner .circle-bg {
    width: 180px;
    height: 180px;
    margin: 30px 20px 0;
  }
  #about .page-banner .circle-bg .circle-txt {
    width: 180px;
  }
  #about .quality,
  #about .rd {
    background-size: cover;
  }
  #about .quality .txt{
    margin: 0 25px 70px;
  }
  #about .quality .slogan {
    background-size: 90%;
  }
  #about .rd .img {
    top: 50%;
    margin-top: -13%;
  }
  #about .future .txt-bg {
    padding: 80px 0 80px 500px;
    background-position: left center;
    background-size: 45%;
  }
  #about .img {
    width: 40%;
  }
}
@media only screen and (max-width: 1199px){
  #about .page-banner .g-txt.t1,
  #about .txt {
    font-size: 1rem;
    line-height: 1.8;
  }
  #about .g-title .t1 .en {
    font-size: 1.06rem;
    margin-bottom: 10px;
  }
  #about .company .circle-bg {
    width: 140px;
    height: 140px;
    margin: 20px 20px 0;
  }
  #about .company .circle-bg .circle-txt {
    width: 140px;
  }
  #about .page-banner {
    padding-bottom: 30px;
  }
  #about .about-title {
    font-size: 2.1875rem;
    margin: 30px 0;
  }
  #about .future .txt-bg {
    padding: 380px 0 60px;
    background-position: center top;
    background-size: 50%;
  }
  #about .future .txt {
    display: block;
    width: 100%;
    max-width: 100%;
  }
}
@media only screen and (max-width: 992px){
  #about .company .circle-bg .circle-txt {
    font-size: 2rem;
  }
  #about .img, #about .txt {
    width: 100%;
    max-width: 100%;
    margin: 0;
  }
  #about .quality .txt {
    margin: 0;
    max-height: none;
  }
  #about .quality .img {
    position: static;
    display: block;
    width: 70%;
    margin: 30px auto;
  }
  #about .rd .container {
    padding-bottom: 30px;
  }
  #about .rd .about-title {
    margin-top: 30px;
  }
  #about .rd .img {
    position: static;
    width: 85%;
    margin: 0 auto 30px;
    display: block;
  }
  #about .future .about-title {
    text-align: center;
  }
  #about .future .about-title .en {
    display: block;
  }
  #about .future .txt-bg {
    background-size: 90%;
    padding: 450px 0 60px;
  }
  #about .about-title {
    font-size: 1.5rem;
  }
  #about .about-title .en {
    font-size: 1.06rem;
  }
}
@media only screen and (max-width: 640px){
  #about .circle-bg {
    width: 120px;
    height: 120px;
    margin: 20px 10px 0;
  }
  #about .circle-bg .circle-txt {
    width: 120px;
    font-size: 1.2rem;
    line-height: 1.2;
  }
  #about .future .txt-bg {
    padding: 360px 0 50px;
  }
  #about .company .about-logo{
    width: 180px;
    margin: 10px auto 30px auto;
  }
  .page-wrap.about-bg{
    padding-bottom: 50px;
  }
}
@media only screen and (max-width: 480px){
  #about .circle-bg {
    width: 80px;
    height: 80px;
    margin: 20px 5px 0;
  }
  #about .circle-bg .circle-txt {
    width: 80px;
  }
  #about .future .txt-bg {
    width: 100%;
    padding: 220px 0 50px;
  }
}


#appcations .cont .img.app_1_1 { padding-top: 0px; }
#appcations .cont .img.app_1_2 { padding-top: 150px; }
#appcations .cont .img.app_1_3 { padding-top: 55px; }
#appcations .cont .img.app_1_4 { padding-top: 35px; }

#appcations .cont .img.app_2_1 { padding-top: 0px; }
#appcations .cont .img.app_2_2 { padding-top: 80px; }
#appcations .cont .img.app_2_3 { padding-top: 55px; }
#appcations .cont .img.app_2_4 { padding-top: 0px; }

#appcations .cont .img.app_5_1 { padding-top: 20px; }
#appcations .cont .img.app_5_2 { padding-top: 10px; }
#appcations .cont .img.app_5_3 { padding-top: 90px; }

@media only screen and (max-width: 1440px){
  #appcations .cont .img.app_1_1 { padding-top: 50px; }
  #appcations .cont .img.app_1_2 { padding-top: 170px; }
  #appcations .cont .img.app_1_3 { padding-top: 110px; }
  #appcations .cont .img.app_1_4 { padding-top: 100px; }

  #appcations .cont .img.app_2_1 { padding-top: 50px; }
  #appcations .cont .img.app_2_2 { padding-top: 160px; }
  #appcations .cont .img.app_2_3 { padding-top: 120px; }
  #appcations .cont .img.app_2_4 { padding-top: 90px; }

  #appcations .cont .img.app_5_1 { padding-top: 80px; }
  #appcations .cont .img.app_5_2 { padding-top: 60px; }
  #appcations .cont .img.app_5_3 { padding-top: 145px; }
}
@media only screen and (max-width: 1199px){
  #appcations .cont .img.app_1_1 { padding-top: 30px; }
  #appcations .cont .img.app_1_2 { padding-top: 160px; }
  #appcations .cont .img.app_1_3 { padding-top: 80px; }
  #appcations .cont .img.app_1_4 { padding-top: 70px; }

  #appcations .cont .img.app_2_1 { padding-top: 30px; }
  #appcations .cont .img.app_2_2 { padding-top: 130px; }
  #appcations .cont .img.app_2_3 { padding-top: 100px; }
  #appcations .cont .img.app_2_4 { padding-top: 60px; }

  #appcations .cont .img.app_5_1 { padding-top: 60px; }
  #appcations .cont .img.app_5_2 { padding-top: 80px; }
  #appcations .cont .img.app_5_3 { padding-top: 140px; }
}
@media only screen and (max-width: 1024px){
  #appcations .cont .img.app_1_1 { padding-top: 30px; }
  #appcations .cont .img.app_1_2 { padding-top: 160px; }
  #appcations .cont .img.app_1_3 { padding-top: 80px; }
  #appcations .cont .img.app_1_4 { padding-top: 70px; }

  #appcations .cont .img.app_2_1 { padding-top: 30px; }
  #appcations .cont .img.app_2_2 { padding-top: 130px; }
  #appcations .cont .img.app_2_3 { padding-top: 100px; }
  #appcations .cont .img.app_2_4 { padding-top: 60px; }

  #appcations .cont .img.app_5_1 { padding-top: 80px; }
  #appcations .cont .img.app_5_2 { padding-top: 90px; }
  #appcations .cont .img.app_5_3 { padding-top: 140px; }
}