@charset "UTF-8";
*{ margin: 0; padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;}
ul, li { margin: 0; padding: 0; list-style: none;}
img, div, iframe{ border: 0; vertical-align: bottom;}
body, html { width: 100%; height: 100%;}
h1{ display: none;}
li li, li p, li span, li p span, p span{ font-size: 1em;}
a:link, a:visited ,a:hover ,a:active {text-decoration: none;}
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
body, html {
-webkit-text-size-adjust: 100%;
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;
font-family: 'Noto Sans TC', 'Microsoft JhengHei', Arial, Helvetica, sans-serif;
}
body{ overflow-x: hidden;}

.kv_wrap{ width: 100%; display: inline-block;
background: url(../img/kv_bg.jpg) center top no-repeat; background-size: 2560px;}
.kv_td{ width: 100%; height: 550px; float: left;}
.kv_td ul{ width: 1300px; height: 100%; position: relative; left: 50%; margin-left: -650px;}
.kv_td ul li{ position: absolute;}
.kv_td ul li img{ width: 100%;}

.content_bg{ width: 1282px; left: -85px;}
.alt3{ width: 189px; left: -189px;}
.alt4{ width: 296.5px; right: -296px; bottom: -67px; z-index: 99;}
.alt5{ width: 140.5px; right: 469px;}
.peo1{ width: 529px; right: -170px; top: 127px;}
.peo2{ width: 170.5px; right: -170px; top: 207px;}
.tit1{ width: 1197.5px;}
.tit2{ width: 256px; right: 102px; bottom: 0;}
.alt1{ width: 163px; left: 317px; bottom: -27px; z-index: 99;}
.alt2{ width: 149px; left: -85px; bottom: 54px;}
.alt6{ width: 170px; right: -170px; bottom: 54px;}
.logo{ width: 256px; right: 102px;}

.m_kv, .mid_kv{ display: none;}

.nav_wrap { width: 100%; background: #5a75dd; float: left;}
.menu{ text-align: center; display: flex; justify-content: center; align-items: center;}
.menu li{ font-size: 1.25rem; font-weight: 700; display: inline; cursor: pointer; margin: 12px 0;
border-right: 1px solid #eee;}
.menu li:last-child { border-right: none;}
.menu li a{ display: inline-block; color: #fff; padding: 15px 60px; transition: 0.5s;}
.menu li a:hover{ color: #f9a52b; transition: 0.5s;}
.mobile{ display: none;}
.m_tit{ display: none;}

.cd-auto-hide-header {
-webkit-transform: translateZ(0);
transform: translateZ(0); will-change: transform;
-webkit-transition: -webkit-transform .5s;
transition: -webkit-transform .5s;
transition: transform .5s;
transition: transform .5s, -webkit-transform .5s;}
.cd-secondary-nav { position: relative; z-index: 9;
-webkit-transform: translateZ(0);
transform: translateZ(0);
will-change: transform;
-webkit-transition: -webkit-transform .5s;
transition: -webkit-transform .5s;
transition: transform .5s;
transition: transform .5s, -webkit-transform .5s;}
.cd-secondary-nav.fixed { position: fixed; top: 0;}
.cd-secondary-nav.slide-up {
-webkit-transform: translateY(-85px);
-ms-transform: translateY(-85px);
transform: translateY(-85px);}

section{ width: 100%; float: left; padding-top: 80px; overflow: hidden; background: #f6f6f6;}
.product_td1{ width: 1000px; position: relative; left: 50%; margin-left: -500px; text-align: center;}
.tit_wrap{ width: 450px; margin: 0 auto 30px;}
.tit_wrap img{ width: 100%;}
.se1_tit_bg{ background: url(../img/pg_tit1_bg.png) center bottom no-repeat; background-size: 900px;}
.se2_tit_bg{ background: #f6f6f6 url(../img/pg_tit2_bg.png) center 80px no-repeat; background-size: 686.5px;}
.se4_tit_bg{ background: #f6f6f6 url(../img/pg_tit4_bg.png) center 80px no-repeat; background-size: 687px;}
.se5_tit_bg{ background: #f6f6f6 url(../img/pg_tit5_bg.png) center 80px no-repeat; background-size: 836px;}

.se1_bg{ width: 100%; background: url(../img/se1_bg.png) center center no-repeat; background-size: 2000px;}
.se2_bg{ width: 100%; background: url(../img/se2_bg.png) center center no-repeat; background-size: 2000px;}
.se3_bg{ width: 100%; background: url(../img/se3_bg.png) center center no-repeat; background-size: 2000px;}
.se4_bg{ position: absolute; width: 106px; right: -30px;}
.se5_bg{ position: absolute; width: 152px; left: -222px;}

.w1{ font-size: 1.25rem; color: #333; line-height: 1.75; font-weight: 700;}
.highlight{ background: url('../img/line.gif') left bottom repeat-x;}
.ps{ font-size: 1rem; color: #a8a8a9; margin: 20px 0 60px;}

.tabs{ font-size: 0; list-style: none; padding-left: 0; display: block; margin-top: 10px;}
.tabs li{ display: inline-block; width: 25%; margin-bottom: -3px ; text-align: center;}
.tabs li:last-child{ float: right;}
.tabs li a{ text-decoration: none; display: block; padding: 6px 20px; position: relative; color: #fff;}
.tabs li a h2, .tabs li a p{ position: relative; z-index: 1;}
.tabs li a::before,.tabs li a::after{
content: ''; position: absolute;
backface-visibility: hidden;
z-index: 0; bottom: 0; width: 50%; height: 100%;}
.tabs li a::before{
left: 0; border-radius: 10px 0 0 0; transform-origin: left bottom; transform: skewX(-10deg);
border: 2px solid #202020; border-bottom: none;}
.tabs li a::after{ border-radius: 0px 10px 0 0; transform: skewX(10deg); right: 0; transform-origin: right bottom;
border: 2px solid #202020; border-left: none; border-bottom: none;}
.tabs li a::before, .tabs li a::after{ background: #00cbcf;}
.tabs li.active a, .tabs li a:hover{ color: #333;}
.tabs li.active a::before, .tabs li.active a::after,
.tabs li a:hover::before, .tabs li a:hover::after{ background: #fff;}
.tabs li h2{ font-size: 1.75rem; display: inline;}
.tabs li p{ font-size: 1.38rem; display: inline; font-weight: 500; padding-left: 5px;}
#Penghu,#Kinmen,#Matsu,#East
{ display: block; border: 2px solid #202020;}
.entry-content{ border: 2px solid #202020;}

.product_list{ width: 100%; padding: 40px 10px 30px; background: #fff;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
display: inline-flex; text-align: left;}
.product_list li{ border-right: 3px #bcbdbd dotted;}
.product_list li:last-child{ border-right: none;}
.product_list li ul li{ width: 100%; border: none; margin-bottom: 10px;}
.product_list li ul li img{ width: 100%;}
.product_list li ul li h2{ font-size: 1.5rem; color: #00bec2;}
.product_list li ul li p{ font-size: 1rem; margin: 5px 0; line-height: 1.5;}
.O_price{ font-size: 1rem; color: #555; font-weight: normal; text-align: right;}
.big{ color: #ff4e35; font-size: 1.5rem; text-decoration: none; font-weight: 700; padding: 0 2px 0 5px;}
.addup{ border: 1px solid #333; border-radius: 15px; padding: 1px 10px 2px; font-size: 0.813rem;
margin-right: 6px; letter-spacing: 2px;}
.m_pd{ padding: 0 15px;}

.btn_wrap{ width: 100%; display: inline-block; text-align: center; padding-bottom: 90px; margin-top: 40px;}
.btn_wrap li{ display: inline-block;}
.btn_wrap li img.one{ width: 200px;}

.line{ border-bottom: 3px #fad698 dotted;}
.noo{ display: none;}
.m_noo{ display: none;}
.m_noo2, .m_noo3{ display: block;}

.item{ width: 48%; display: inline-block; margin: 20px 0.5% 0;}
.item img{ width: 100%;}
/*.item{ display: block;}
.item img{ width: 100%;}*/

.item2{ display: block; padding: 20px; border: 2px solid #202020;}
.item2 img{ width: 155px; margin-bottom: 10px;}
.item2 h2{ font-size: 1.75rem; color: #fff;}
.item2 h2 a{ color: #fff;}
.color_g{ background: #73d21d;}
.color_o{ background: #ff8800;}
.color_b{ background: #22b2d4;}
.color_p{ background: #758ce9; padding-top: 60px;}

.method{ width: 1000px; position: relative; left: 50%; margin-left: -500px; color: #fff;}
.method h4{ font-size: 1.5rem; letter-spacing: 5px; margin-bottom: 20px;}
.note{ width: 100%; display: inline-block; padding: 0 0 60px 20px;
font-size: 1rem; line-height: 1.5;}
.note li{ list-style-type: decimal; margin-bottom: 10px; font-weight: 500;}
.se6_bg{ position: absolute; width: 169px; right: 70px; top: -50px;}

/* back to top */
#back-top { position: fixed; bottom: 200px; right: 0; z-index: 999;
text-align: center; width: 50px; height: 50px; display: block; border-radius: 3px;
background: rgba(85,85,85,0.5); line-height: 55px; font-size: 24px; color: #fff; font-weight: normal;
-webkit-transition: 1s; -moz-transition: 1s; transition: 1s;}
#back-top a { display: block; width: 100%; height: 100%; -webkit-transition: 1s; -moz-transition: 1s; transition: 1s; color: #fff;}
#back-top:hover { background-color: rgba(85,85,85,0.3);}

@media screen and (max-width: 1300px) {
.kv_wrap{ display: none;}
.mid_kv{ display: block; width: 100%; float: left;}
.mid_kv img{ width: 100%;}
}

@media screen and (max-width: 1100px) {
.product_td1, .method{ width: 90%; left: 0; margin-left: 5%;}
}

@media screen and (max-width: 1023px) {
section{ padding-top: 60px;}
.se2_tit_bg{ background-position: center 60px;}
.se4_tit_bg{ background-position: center 60px;}
.se5_tit_bg{ background-position: center 60px;}
#back-top { bottom: 50px; width: 40px; height: 40px; font-size: 22px; line-height: 45px;}
.mid_kv{ display: none;}
.m_kv{ display: block; width: 100%; float: left;}
.m_kv img{ width: 100%;}
.menu li a{ padding: 15px 40px;}
.btn_wrap{ padding-bottom: 60px;}
.se6_bg{ width: 120px;}
}

@media screen and (max-width: 800px) {
.tabs li h2{ font-size: 1.25rem; padding-right: 0;}
.se6_bg{ right: 30px;}
}

@media screen and (max-width: 786px) {
.tabs li p, .product_list li ul li{ font-size: 1.125rem;}
.item{ width: 100%;}
.product_list{ padding: 0 20px; flex-direction:column;}
.product_list li:last-child{ border-bottom: none;}
.product_list li{ border-right: none; border-bottom: 3px #bdbdbd dotted;}
.big{ font-size: 1.25rem;}
/*.item img{ width: 90%;}*/
.item2{ margin: 0 20px;}
.m_pd{ padding: 30px 0 20px;}

.menu li{ font-size: 1.125rem;}
.menu li a{ padding: 15px 25px;}
.m_noo3{ display: none;}
}

@media screen and (max-width: 640px) {
.nav_wrap{ position: relative; z-index: 999;}

.mobile { display: block;}
.nav_wrap ul{ padding: 0; opacity: 0;}
.menu { margin-top: 60px; width: 100%; height: 0; padding: 0; pointer-events: none; line-height: 40px; flex-wrap: wrap;}
.menu.open{ height: auto; background: #516acc; opacity: 1; pointer-events: auto;
-webkit-transition: height 0.5s, opacity 0.5s;
-moz-transition: height 0.5s, opacity 0.5s;
-o-transition: height 0.5s, opacity 0.5s;
transition: height 0.5s, opacity 0.5s;
}
.menu li { display: block; font-size: 1rem; font-weight: normal; width: 100%;
margin:0; border-bottom: 1px dotted #7b8dd0;}
.menu li:last-child { border-bottom: none;}
.menu li a{ color: #fff; display: block; width: 100%; padding: 5px;}
.menu li:after { content: none;}
.menu li.menuLink a { display: block; padding: 0; height: auto;}

.nav { width: 65px; height: 0; color: #fff;}
.hamburger { font-size: 50px; display: inline-block; width: 38px; height: 38px; margin: 0 auto; padding: 0;
cursor: pointer; transition: transform .2s ease-in-out; -moz-transition: transform .2s ease-in-out;
-webkit-transition: transform .2s ease-in-out; margin: 15px 12px 0 12px;
vertical-align: middle; border: 0 none; background: transparent;}
.hamburger::-moz-focus-inner {padding:0;border:0 none;}
/*** Focus fix for Chrome*/
.hamburger:focus {   outline: 0;}
/*** Styling the icon*/
.hamburger:before, .hamburger:after { content: ""; box-sizing: border-box;}
.hamburger:before, .hamburger .icon, .hamburger:after { display: block; width: 40px; height: 2px; margin: 0 0 6px; transition: transform .5s ease-in-out;
-moz-transition: transform .5s ease-in-out; -webkit-transition: transform .5s ease-in-out; background: #fff;}
/*** Styles for the active `.hamburger` icon*/
.hamburger.active:before, .hamburger.active .icon, .hamburger.active:after { background: #fff;}
/*** VERTICAL HAMBURGER*/
.hamburger.hamburger-vertical.active {transform: rotate(270deg); -moz-transform: rotate(270deg); -webkit-transform: rotate(270deg);}
/*** CLOSE/CANCEL/CROSS*/
.hamburger.hamburger-cancel.active .icon {transform: scale(0);-moz-transform: scale(0); -webkit-transform: scale(0);}
.hamburger.hamburger-cancel.active:before { transform: translateY(7px) rotate(135deg); -moz-transform: translateY(7px) rotate(135deg);  -webkit-transform: translateY(7px) rotate(135deg);}
.hamburger.hamburger-cancel.active:after { transform: translateY(-9px) rotate(-135deg); -moz-transform: translateY(-9px) rotate(-135deg); -webkit-transform: translateY(-9px) rotate(-135deg);}

.m_tit{ display: block; position: absolute; line-height: 62px; left: 70px;}
.m_tit a{ color: #fff; font-size: 1.125rem; font-weight: 700;}
}

@media screen and (max-width: 550px) {
.w1{ font-size: 1.125rem; line-height: 1.75;}
.tit_wrap{ width: 100%;}
.se4_tit_bg, .se5_tit_bg{ background: #f6f6f6 url();}
.se4_bg{ width: 100px; right: -50px; top: -30px;}
.se6_bg{ right: -70px; top: -60px;}
}

@media screen and (max-width: 500px) {
.item2 h2{ font-size: 1.25rem;}
.tabs{ margin-bottom: 10px;}
.tabs li{ width: 48%; margin: 2% 1%; border-radius: 20px;
background: #00cbcf; color: #fff;}
.tabs li a{ padding: 6px 10px; border: 2px solid #202020; border-radius: 20px;}
.tabs li.active a, .tabs li a:hover{ background: #fff; color: #333; border-radius: 20px;}
.tabs li a::before, .tabs li a::after{ display: none;}
.tabs li p{ display: inline;}
.m_noo{ display: inline;}
.m_noo2{ display: none;}
.w1{ text-align: left;}
}

@media screen and (max-width: 350px) {
.big{ font-size: 1rem;}
}

/* animation */
.pulse{ animation: pulse 2.5s infinite;}
@keyframes pulse {
0% { transform: scale(1) translateX(0);}
50% { transform: scale(1) translateX(0);}
60% { transform: scale(0.9) translateX(6%);}
65% { transform: scale(1) translateX(0);}
70% { transform: scale(0.9) translateX(6%);}
75% { transform: scale(1) translateX(0);}
}

.slideRight{
animation: slideRight .9s ease-in-out;
visibility: visible !important;
}
@keyframes slideRight {
0% { transform: translateX(-50%); opacity: 0;}
40% { transform: translateX(-50%); opacity: 0;}
70%{ transform: translateX(8%); opacity: 1;}
85%{ transform: translateX(-4%);}
100% { transform: translateX(0%);}
}

.slideLeft{
animation: slideLeft .3s ease-in-out;
visibility: visible !important;
}
@keyframes slideLeft {
0% { transform: translateX(50%); opacity: 0;}
100% { transform: translateX(0%); opacity: 1;}
}

.expandOpen{
animation: expandOpen 1.6s ease-out;
visibility: visible !important;
}
@keyframes expandOpen {
0% { transform: scale(1.8); opacity: 0;}
60% { transform: scale(1.8); opacity: 0;}
70% { transform: scale(0.95);}
80% { transform: scale(1.05);}
90% { transform: scale(0.98);opacity: 1;}
100% { transform: scale(1);}
}

.fadeIn{
animation: fadeIn .5s ease-in-out;
visibility: visible !important;
}
@keyframes fadeIn {
0% { transform: scale(0) rotate(0deg); opacity: 0;}
100% { transform: scale(1) rotate(360deg); opacity: 1;}
}

@keyframes hvr-wobble-vertical {
16.65% { -webkit-transform: translateY(8px); transform: translateY(8px);}
33.3% { -webkit-transform: translateY(-6px); transform: translateY(-6px);}
49.95% { -webkit-transform: translateY(4px); transform: translateY(4px);}
66.6% { -webkit-transform: translateY(-2px); transform: translateY(-2px);}
83.25% { -webkit-transform: translateY(1px); transform: translateY(1px);}
100% { -webkit-transform: translateY(0); transform: translateY(0);}
}
.hvr-wobble-vertical {
display: inline-block;
vertical-align: middle;
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);}
.hvr-wobble-vertical:hover, .hvr-wobble-vertical:focus, .hvr-wobble-vertical:active {
animation-name: hvr-wobble-vertical;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
}

@keyframes hvr-buzz {
50% { transform: translateX(3px) rotate(2deg);}
100% { transform: translateX(-3px) rotate(-2deg);}
}
.hvr-buzz {
display: inline-block; vertical-align: middle;
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);}
.hvr-buzz:hover, .hvr-buzz:focus, .hvr-buzz:active {
animation-name: hvr-buzz; animation-duration: 0.15s;
animation-timing-function: linear; animation-iteration-count: infinite;}