/*--------------copyright by vicky start-------------------------------*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}
html{
font-size: 10px;
}
body {
    line-height: 1.8;
    letter-spacing: 1px;
    font-size: 1.6rem;
    font-family: 'Itim', 'Lobster', 'Noto Sans TC', 'Yuji Boku', sans-serif;
    font-weight: 400;
    color: #78654e;
    background: url(../../images/pro_bg01.jpg) top left repeat;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

td {
    vertical-align: top;
}

a {
    display: block;
    color: #303030;
    text-decoration: none;
    transition: .3s ease all;
}

a:hover,
a:focus {
    text-decoration: none;
    color: #303030;
}

img {
    max-width: 100%;
}


.h1,
.h2,
.h3,
h1,
h2,
h3 {
    line-height: 1.2;
}

.clear {
    clear: both;
}

::-webkit-scrollbar {
    width:10px;
}
::-webkit-scrollbar-track {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    margin:0 0 5px 0;
}
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 4px;
    border-radius: 4px;
    background:rgb(0, 28, 88,.8);/*捲軸顏色*/
}

::selection {
    background: rgba(30, 168, 192, .9);
    color: #fff;
}

/************************************************************************************************************************************************
************************************************************************************************************************************************
************************************************************************************************************************************************/
/************************/


/*mibutton*/
.mibutton {
    display: none;
    position: fixed;
    top: 4.4rem;
    right: 4.4rem;
    z-index: 50;
    cursor: pointer;
    text-align: left;
    padding: 1.5rem 1rem 4rem;
    z-index: 110;
    border: 1px #1b1b1b solid;
    border-radius: 10px;

}

.mibutton p {
    font-size: 22px;
    font-family: 'Itim';
    color: #1b1b1b;
    margin-block-start: 0;
    margin-block-end: 0;
    line-height: 0;
}

.mibutton span {
    display: block;
    text-align: center;
    width: 50px;
    height: 3px;
    position: relative;
    top: 1.6em;
    left: 0em;
    background: #1b1b1b;
    border-radius: 10px;
    transition: .3s ease all;
}

.mibutton span:nth-of-type(2) {
    top: 2.4em;
    width: 35px;
    left: 1.5rem;
}


.mibutton_ani span {
    opacity: 1;
    background: #3f3f3f;
}

.mibutton_ani span:nth-of-type(1) {
    top: 1rem;
    left: 0.7rem;
    -webkit-transform: rotate(35deg);
    transform: rotate(35deg);
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
}

.mibutton_ani span:nth-of-type(2) {
    -webkit-transform: rotate(-35deg);
    transform: rotate(-35deg);
    -webkit-transform-origin: center left;
    transform-origin: center left;
    width: 50px;
    top: 3.6rem;
    left: 0.7rem;
}

#inner {
    position: relative;
    background: #fff;
    z-index: 999;
}

nav {
    position:fixed;
    top: 0;
    right: 0;
}

/*navbar*/
.navbar {
    background: url(../../images/nav_bg_01.png) top left repeat;
    text-align: center;
    display: inline-block;
    z-index: 90;
    width: 100vw;
    margin: 0;
    border-radius: 0;
    top: 0;
    position: relative;
    border: none;
    padding-top: 2rem;
	pointer-events: all;

}

.side_tp {
    position: fixed;
}


/*logo*/
.logo {
    display: inline-block;
    width: 20%;
    text-align: left;
}

.logo a {
    display: inline-block;
}

/*ibutton*/
.ibutton {
    width: 50%;
    text-align: right;
    position: relative;
    display: inline-block;
    margin-right: 1.5rem;
}

.ibutton ul {
    display: flex;
}

.ibutton li {
    display: inline-block;
    position: relative;
    text-align: center;

}

.ibutton li a {
    transition: .5s all;
}

.ibutton li .ibimg img:nth-of-type(2) {
    display: none;
}

.ibutton li a:hover .ibimg img:nth-of-type(2) {
    display: inline-block;
}

.ibutton li a:hover .ibimg img:nth-of-type(1) {
    display: none;
}

.nav_bot {
    position: relative;
    width: 100%;
    height: 100%;
}

.cart_bt {
    display: inline-block;
}

.cart_bt li {
    display: inline-block;
    position: relative;
    text-align: center;
    margin-right: 1rem;
}

.cart_bt li a {
    transition: .5s all;
}

.cart_bt li a:hover {
    opacity: .5;
}

.nav_bg {
    position: relative;
    top: -45px;
}

.nav_bg img:nth-of-type(2) {
    display: none;
}

@media (max-width:1830px) {
    .ibutton {
        width: 63%;
    }


}

@media (max-width:1500px) {
    nav {
        position: fixed;
    }

    .mibutton {
        display: block;
    }
	.mibutton span:nth-of-type(2) {
		top: 2.1em;
	}
    .logo {
        position: relative;
        top: 1rem;
        left: 1rem;
        display: block;
        padding-bottom: 1rem;
    }

    .ibutton {
        background: url(../../images/nav_bg_01.png) top left repeat;
        display: none;
        text-align: center;
        padding: 4rem 1rem 0;
        width: 100%;

    }

    .ibutton ul {
        justify-content: center;
    }

    .ibutton li {}

    .cart_bt {
        position: absolute;
        right: 14rem;
        top: 5rem;
    }

    .nav_bg {
        top: -9px;
    }

}

@media screen and (max-width: 1200px) {
    .ibutton {
        padding: 6rem 1rem 3rem;
    }
}

@media (max-width: 991px) {
    .ibutton ul {
        flex-wrap: wrap;
    }

    .ibutton li {
        width: 100%;
        padding: 1rem;
    }

    .nav_bg img:nth-of-type(1) {
        display: none;
    }

    .nav_bg img:nth-of-type(2) {
        display: block;
    }
}

@media (max-width: 991px) {
    .navbar {
        padding-top: 0;
    }

    .mibutton {
        top: 1.4rem;
    }

    .cart_bt {
        top: 2rem;
    }

    .nav_bg {
        top: -9px;
    }
}

@media (max-width: 768px) {
    .navbar {

        padding-top: 0;
        top: 0;
    }

    .logo {
        width: 30%;
    }

    .ibutton {
        padding: 4em 1em 1em;
    }

    .ibutton li {
        width: 100%;
    }

    .mibutton {
        top: 1rem;
    }

    .cart_bt {
        top: 1.5rem;
    }

}

@media (max-width:560px) {}

@media (max-width:450px) {

    .logo {
        width: 35%;
    }

    .logo img {
        width: 210px;
    }

    .mibutton {
        top: 1rem;
    right: 2.5rem;
    }
    .mibutton p {
    font-size: 16px;
}
.mibutton span {
    width: 40px;
    top: 1.9rem;
    left: 0;
}
.mibutton_ani span:nth-of-type(1) {
    top: 1rem;
    left: 0.5rem;
}
.mibutton span:nth-of-type(2) {
    top: 2.5rem;
    width: 40px;
    left: 0;
}
.mibutton_ani span:nth-of-type(2) {
    top: 3rem;
    left: 0.7rem;
}

    .cart_bt {
        right: 9rem;
        width: 35%;
    }

    .cart_bt li {
        width: 29%;
    }

}

@media (max-width:350px) {
    .navbar {
        padding-bottom: 1rem;
    }
}

/***header************************************************************/
header {
    position: relative;
    width: 100%;
    min-height: 1231px;
    z-index: 0;
}

.dex_mask {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
}

.dex_mask01 {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    width: 100%;
}

.dex_mask01 img:nth-of-type(1) {
    top: 0;
    left: 0;
}

.dex_mask01 img:nth-of-type(2) {
    bottom: 0;
    left: 0;
    position: absolute;
}

.dex_boat {
    z-index: 2;
    position: absolute;
    bottom: 3rem;
    left: 16rem;
}

.dex_boat {
    -webkit-animation: rock-boat 3s ease-in-out infinite;
}

.dex_boat::after {
    -webkit-animation: steam 4s 2s infinite;
}

@-webkit-keyframes rock-boat {
    50% {
        -webkit-transform: rotate(-5deg) translateY(-10px);
    }
}

@-webkit-keyframes steam {

    40%,
    60% {
        opacity: .8;
    }

    100% {
        -webkit-transform: translate(-15%, -35%) rotateZ(20deg);
    }
}

.dex_wave {
    z-index: 2;
    position: absolute;
    bottom: -1rem;
    left: 16rem;
}

.dex_wave {
    -webkit-animation: rock-wave 3s ease-in-out infinite;
}

.dex_wave::after {
    -webkit-animation: steam2 4s 2s infinite;
}

@-webkit-keyframes rock-wave {
    50% {
        -webkit-transform: rotate(5deg) translateY(-10px);
    }
}

@-webkit-keyframes steam2 {

    40%,
    60% {
        opacity: .8;
    }

    100% {
        -webkit-transform: translate(-15%, -35%) rotateZ(20deg);
    }
}

.dex_fish {
    z-index: 2;
    position: absolute;
        bottom: 20rem;
    left: 31%;
}

.dex_fish {
    -webkit-animation: rock-fish 3s ease-in-out infinite;
}

.dex_fish::after {
    -webkit-animation: steam3 4s 2s infinite;
}

@-webkit-keyframes rock-fish {
    50% {
        -webkit-transform: rotate(5deg) translateY(-10px);
    }
}

@-webkit-keyframes steam3 {

    40%,
    60% {
        opacity: .8;
    }

    100% {
        -webkit-transform: translate(-15%, -35%) rotateZ(20deg);
    }
}
.scroll a {
  position: absolute;
  bottom: 45%;
  left: 48%;
  z-index: 2;
  display: inline-block;
  -webkit-transform: translate(0, -45%);
  transform: translate(0, -45%);
  color: #fff;
  font : normal 400 25px/1 'Itim', sans-serif;
  letter-spacing: .1em;
  text-decoration: none;
  transition: opacity .3s;
  z-index: 999;
}
.scroll a:hover {
  opacity: .5;
}
#section a {
  padding-top: 80px;
}
#section a span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb07 2s infinite;
  animation: sdb 2s infinite;
  opacity: 0;
  box-sizing: border-box;
}
#section a span:nth-of-type(1) {
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}
#section a span:nth-of-type(2) {
  top: 16px;
  -webkit-animation-delay: .15s;
  animation-delay: .15s;
}
#section a span:nth-of-type(3) {
  top: 32px;
  -webkit-animation-delay: .3s;
  animation-delay: .3s;
}
@-webkit-keyframes sdb {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes sdb {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/***********************/
/*carousel-fade*/
.carousel-fade .carousel-inner .item {
    transition-property: opacity;
}

.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
    opacity: 0;
}

.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
    opacity: 1;
}

.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
    left: 0;
    transform: translate3d(0, 0, 0);
}

.carousel-fade .carousel-control {
    z-index: 2;
}

.carousel-inner>.item>img {
    display: inline-block;
}

.carousel-inner {
    height: 100%;
    position: relative;
        text-align: center;
}

.dex_text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.dex .itembg {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    overflow: hidden;
    height: 100vh;
}

.dex .item:nth-of-type(1) {
    background: url(../../flash/dex1.jpg) top center no-repeat;
    background-size: cover;
}

.dex .item:nth-of-type(2) {
    background: url(../../flash/dex2.jpg) top center no-repeat;
    background-size: cover;
}

.dex .item:nth-of-type(3) {
    background: url(../../flash/dex3.jpg) top center no-repeat;
    background-size: cover;
}

.dex .item:nth-of-type(4) {
    background: url(../../flash/dex4.jpg) top center no-repeat;
    background-size: cover;
}
.dex .item img{

}
@media screen and (max-width: 1400px) {
    header {
        min-height: 921px;
    }
	.scroll a {
    bottom: 39%;
}

    .dex_wave {
        bottom: 0rem;
        left: 0rem;
        width: 50%;
    }


    .dex_fish {
    bottom: 21rem;
    left: 43%;
    width: 8%;
}

}

@media screen and (max-width: 1200px) {
   .scroll a {
    bottom: 34%;
}
    .dex_boat {
        bottom: 7rem;
        left: 4rem;
    }

    .dex_wave {
        bottom: -1rem;
    }

    .dex_fish {
        bottom: 37rem;
    }

}

@media screen and (max-width: 991px) {
   .scroll a {
    bottom: 37%;
    left: 46%;
}
    .dex_boat {
        left: 3rem;
    }

    .dex_fish {
        bottom: 31rem;
    }

}

@media screen and (max-width: 768px) {
    header {
        min-height: 100vh;
    }
	#section a {
    padding-top: 59px;
}
	.scroll a {
    bottom: 30%;
    left: 45%;
    font-size: 20px;
}
#section a span {
    width: 15px;
    height: 15px;
}
    .dex_fish {
        bottom: 23rem;
    }

}

@media screen and (max-width: 576px) {
    .scroll a {
    bottom: 29%;
}
	.dex_boat {
        left: 4rem;
        width: 45%;
        bottom: 5rem;
    }

    .dex_wave {
        left: 4rem;
        width: 45%;
    }

    .dex_fish {
        bottom: 17rem;
    }
}

@media screen and (max-width: 450px) {
    header {
    min-height: 90vh;
}
.scroll a {
    bottom: 19%;
	    left: 42%;
}
    .dex_text {
    top: 40%;
    left: 50%;
    transform: translate(-50%, -40%);
    width: 70%;
}
    .dex_boat {
        left: 3rem;
        bottom: 4rem;
    }

    .dex_wave {
        left: 2rem;
        bottom: 1rem;
    }

    .dex_fish {
        bottom: 12rem;
    }
}

@media screen and (max-width: 414px) {}

@media screen and (max-width: 390px) {
    .dex_boat {
        left: 3rem;
        bottom: 3rem;
    }

    .dex_wave {
        left: 2rem;
        bottom: 0rem;
    }

    .dex_fish {
        bottom: 11rem;
    }
}

@media screen and (max-width: 350px) {
    .dex_boat {
        left: 2.5rem;
        bottom: 2rem;
    }

    .dex_fish {
        bottom: 9rem;
    }
}

/***inews*************************************************************************************************/

.inews {
    background-size: 100%;
    text-align: center;
    padding: 5rem 0;
    position: relative;
    background: url(../../images/pro_bg01.jpg) top left repeat;
}

.inews-wave1 {
    max-width: 102%;
    width: 100%;
    height: 42px;
    z-index: 1;
    background: url(../../images/inews_bg01.png) repeat-x;
    animation: wave 10s cubic-bezier(0.44, 0.66, 0.67, 0.37) infinite;
}

.inews-wave2 {
    max-width: 102%;
    width: 100%;
    height: 47px;
    position: relative;
    left: 0;
    z-index: 1;
    bottom: -4rem;
    background: url(../../images/inews_bg02.png) repeat-x;
    animation: wave 10s cubic-bezier(0.44, 0.66, 0.67, 0.37) infinite;
}

@keyframes wave {
    0% {
        background-position: 0;
    }

    100% {
        background-position: 1468px;
    }
}

.inews_title {
    margin-bottom: 2rem;
}

.inews_inner {
    background: #6cd9ec;
    width: 100%;
    position: relative;
}

.inews_warp {
    width: 1080px;
    max-width: 100%;
    text-align: center;
    margin: 0 auto;
    padding: 20rem 0 5rem;
    z-index: 0;
}
.inews_warp tatle {
    width: 90%;
}
/*-- Bubbles --*/
.bubbles {
    position: absolute;
    overflow: hidden;
    z-index: 0;
    padding: 0 0 5rem;
    height: 740px;
}

.bubbles div {
    position: relative;
    display: inline-block;
    float: left;
    bottom: -100vh;
    margin: 0 3.5vw;
    border: 2px solid rgb(255, 255, 255);
    border-radius: 50%;
    z-index: 0;
    animation: bubbles infinite linear;
}

.bubbles div::before,
.bubbles div::after {
    width: 57%;
    height: 57%;
    background: rgb(255, 255, 255);
    border-radius: 50%;
}

.bubbles div::after {
    top: 30%;
    left: 0%;
}

.bubbles div::after {
    top: 100%;
    left: -100%;
}

/* first layout */
.bubbles div:nth-of-type(3n+1) {
    width: 61px;
    height: 61px;
    background: #fff;
    animation-duration: 10s;
    opacity: 1;
}

/* second layout */
.bubbles div:nth-of-type(3n+2) {
    width: 160px;
    height: 160px;
    background: #fff;
    opacity: 0.7;
    animation-duration: 15s;
}

/* third layout */
.bubbles div:nth-of-type(3n+3) {
    width: 149px;
    height: 149px;
    opacity: 0.2;
    animation-duration: 20s;
}

/* font layout */
.bubbles div:nth-of-type(3n+4) {
    width: 216px;
    height: 216px;
    opacity: 0.25;
    animation-duration: 25s;
}

.bubbles div:nth-of-type(4),
.bubbles div:nth-of-type(5),
.bubbles div:nth-of-type(9) {
    animation-delay: 0s;
}

.bubbles div:nth-of-type(7),
.bubbles div:nth-of-type(8),
.bubbles div:nth-of-type(6) {
    animation-delay: 5s;
}

.bubbles div:nth-of-type(2),
.bubbles div:nth-of-type(3),
.bubbles div:nth-of-type(10) {
    animation-delay: 10s;
}

.bubbles div:nth-of-type(1),
.bubbles div:nth-of-type(11),
.bubbles div:nth-of-type(12) {
    animation-delay: 15s;
}

@keyframes bubbles {
    0% {}

    100% {
        transform: translate(0, -100vh) rotate(360deg);
    }
}

/***newslist_rwd***/
.newslist_rwd {
    text-align: center;
    padding: 1em 0;
    display: inline-block;
    max-width: 45%;
    position: relative;
    background: url(../../images/inews_bg03.jpg) top left repeat;
    border: 1px #001c58 solid;
    border-radius: 50px;
    z-index: 0;
    box-shadow: 0.5vw 0.5vw 0 #001c58;

}

.newslist_rwd:before {
    content: 'You-Yu seafood';
    font-size: 14px;
    color: #2a2a2a;
    position: absolute;
    top: 10rem;
    right: -3rem;
    transform: rotate(90deg);

}

.newslist_rwd:nth-of-type(1) {
    margin: 1rem 18rem 1rem 0;
}

.newslist_rwd .ntitle {
    text-align: left;
    position: relative;
    margin: -5rem 0 0 0;
    padding: 0 0 3rem 0;
    display: inline-block;
    vertical-align: middle;
    max-width: 300px;
    font-family: 'Noto Sans TC';
}

.newslist_rwd .ntitle h3 {
    font-size: 30px;
    color: #001c58;
    padding-top: 2rem;
    font-weight: 600;    
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}


.newslist_rwd .ntitle p {
    font-size: 18px;
    color: #1c1617;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    margin: 0 0 3rem;
    font-weight: 500;
    letter-spacing: 2px;
    padding-top: 1rem;

}

.newslist_rwd a {
    position: relative;
    transition: .3s ease all;
    line-height: 1.5;
    color: #000;
}

.newslist_rwd a:hover .ntitle p {
    color: #348dad;
}

.newslist_rwd a:hover .npic {
    transform: translateY(-5px);
}

/*npic*/
.npic {
    position: relative;
    width: 389px;
    min-height: 240px;
    transition: .3s ease all;
    vertical-align: top;
    max-width: 100%;
    margin: 0 auto;

}

.npicimg {
    position: absolute;
    top: -28%;
    left: -17%;
    width: 100%;
    height: 100%;
    border-radius: 20px;
}

.npicimg img {
    border-radius: 20px;
}

@media screen and (max-width:1630px) {}

@media screen and (max-width:1400px) {
    .inews {
        padding: 0;
    }

}

@media screen and (max-width:1200px) {
    .inews {}

    .newslist_rwd .ntitle {
        padding: 0;
    }
}
@media screen and (max-width:1160px) {
.bubbles{
    height: 700px;
}
}
@media screen and (max-width:1100px) {
    .inews_warp {
        padding: 12rem 0 5rem;
    }

    .newslist_rwd {
        max-width: 35%;
    }

    .newslist_rwd:nth-of-type(1) {
        margin: 1rem 10rem 1rem 0;
    }
}

@media screen and (max-width:991px) {    
.inews {
        max-width: 100%;
        justify-content: center;
        padding-left: 0;
        margin-left: 0;
    }

    .npic {
        position: relative;


    }


}

@media screen and (max-width: 910px) {
    .newslist_rwd {
        max-width: 40%;
    }

    .npic {
        max-width: 85%;
    }
}

@media screen and (max-width:768px) {
    .inews_title {
        width: 90%;
        text-align: center;
        margin: 0 auto 2rem;
    }

    .bubbles {
        padding: 0;
        height: 100%;
    }

    .bubbles div {
        bottom: -40vh;
    }

    @keyframes bubbles {
        0% {}

        100% {
            transform: translate(0, -40vh) rotate(360deg);
        }
    }

    .newslist_rwd {
        max-width: 75%;
        margin: 1rem;
    }

    .newslist_rwd:nth-of-type(1) {
        margin: 0 0 12rem 0;
    }

    .npic {
        max-width: 100%;
    }
}

@media screen and (max-width:450px) {

.inews{
	padding: 5rem 0 4rem;
}

    .newslist_rwd {
        max-width: 90%;
    }

    .npic {
        max-width: 80%;
        min-height: 150px;
    }

    .newslist_rwd .ntitle {
        padding: 2rem 2rem 0;
    }

    .newslist_rwd .ntitle p {
        -webkit-line-clamp: 3;
    }
}

@media screen and (max-width:390px) {
    .newslist_rwd {
    max-width: 80%;
}
    .npic {}
}

@media screen and (max-width: 350px) {
    .newslist_rwd {
        max-width: 90%;
    }

    .newslist_rwd:nth-of-type(1) {
        margin: 0 0 5rem 0;
    }

    .newslist_rwd .ntitle h3 {
        padding-left: 1rem;
    }

    .newslist_rwd .ntitle p {
        -webkit-line-clamp: 2;
        margin: 0 0 2rem 0;
        padding: 1rem 1rem 0;
    }

    .npic {
        max-width: 80%;
    }

    .npicimg {
        top: 2rem;
        left: -1rem;
    }
}


/***news*************************************************************************************************/
.news_title{
    text-align: center;
    margin: 0 auto;
}
.newslist {
    max-width: 1330px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    padding: 12.4rem 0 10rem;
}

/***main***/
.main {
    position: relative;
    z-index: 10;
    background: url(../../images/pro_bg01.jpg) top left repeat;
    padding-top: 1rem;
}
.main2 {
    position: relative;
    z-index: 10;
    background: url(../../images/bot_deco02.png) bottom center no-repeat, url(../../images/pro_bg01.jpg) top left repeat;
    padding-top: 15rem;
}
.main3 {
    position: relative;
    z-index: 10;
    background: url(../../images/bot_deco02.png) bottom center no-repeat, url(../../images/pro_bg01.jpg) top left repeat;
    padding-top: 25rem;
}
@media screen and (max-width:1600px){
	.main {
    padding-top: 2rem;
}
}
@media screen and (max-width:650px){
    .main {
    padding-top: 2rem;
}
}
@media screen and (max-width:414px){
    .main {
    padding-top: 7rem;
}
    .main2 {
    padding-top: 9rem;
}
.main3 {
    padding-top: 9rem;
}
.news_title{
	width:60%;
	margin-top:3rem;
}
}
/***about*************************************************************************************************/
/**abt1**/
.abt1_txt {
    background: url(../../images/abt1_deco01.png) bottom center no-repeat, #001c58;
    background-size: 100%;
    width: 100%;
    min-height: 330px;
    position: relative;
}

.abt1 .nav_bg_02 {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}

.abt1_title {
    max-width: 792px;
    margin: 0 auto;
    padding: 19rem 0 3.2rem;
    text-align: center;
}

.abt1_title h2 {
    font-size: 33px;
    color: #b5d0e4;
    text-align: center;
    font-family: 'Noto Sans TC';
    /*text-shadow: 1px 1px #b5d0e4, -1px -1px #b5d0e4,
        1px -1px #b5d0e4, -1px 1px #b5d0e4;*/
}

.ab1_bg {
    background: url(../../images/abt1_bg.jpg) top center fixed;
    background-size: cover;
    width: 100%;
    min-height: 803px;
    position: relative;
}

.ab1_bg img:nth-of-type(2) {
    position: absolute;
    bottom: 0;
    left: 0;
    -webkit-filter: drop-shadow(0px 0px 7px rgba(124, 158, 171, 0.7));
    filter: drop-shadow(0px 0px 7px rgba(124, 158, 171, 0.7));
}

/**abt2**/
.abt2 {
    background: url(../../images/abt2_bg.jpg) top left repeat;
    position: relative;
    padding: 11.2rem 0 10.6rem;
    z-index: 0;
    overflow: hidden;
}
.abt2_mask{
	position: absolute;
    top: -13px;
    left: 0;
}
.abt2:before {
    content: '';
    background: url(../../images/abt2_img01.jpg) top right no-repeat;
    background-size: 100%;
    width: 564px;
    max-width: 100%;
    min-height: 1036px;
    position: absolute;
    top: 14.6rem;
    right: 0;
    z-index: -1;
}

.abt2_inner {
    max-width: 1750px;
    margin-left: auto;

}

.abt2_top {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

.abt2_top .title {
    margin: 0 1.5rem;
}

.abt2_top .title h3 {
    font-size: 42px;
    color: #b28b59;
    font-family: 'Yuji Boku';
}

.abt2_top .title h4 {
    font-size: 22px;
    color: #b28b59;
    font-family: 'Itim';
}

.abt2_top .txt {
    background: url(../../images/abt2_deco01.png) top left no-repeat;
    background-size: 100%;
    width: 1087px;
    max-width: 100%;
    min-height: 286px;
}

.abt2_top .txt p {
    font-size: 18px;
    color: #1c1617;
    font-family: 'Yuji Boku';
    padding: 5.8rem 0 0 4rem;
	max-width: 410px;
    text-align: justify;
}

.abt2_top .txt {}


.abt2_cen {
    width: 1122px;
    max-width: 100%;
    text-align: right;
    position: relative;
    z-index: 0;
    margin-top: 10rem;
}

.abt2_cen:after {
    content: '3';
    font-size: 349px;
    color: #b28b59;
    font-family: 'Lobster';
    position: absolute;
    top: -23rem;
    left: 12rem;
    z-index: -1;
    font-style: italic;
    opacity: .15;
}

.abt2_cen .txt {
    position: relative;
    left: 37rem;
    text-align: left;
    top: 5rem;
}

.abt2_cen .txt p {
    color: #b28b59;
    font-family: 'Yuji Boku';
    display: inline-block;

}

.abt2_cen .txt p:nth-of-type(1) {
    font-size: 60px;


}

.abt2_cen .txt p:nth-of-type(2) {
    font-size: 36px;
}

.abt2_bot {
    max-width: 1535px;
    background: url(../../images/abt2_deco02.png) bottom left no-repeat;
    background-size: 100%;
    min-height: 303px;
    margin-left: auto;
    margin-top: 6.8rem;
    padding-bottom: 5rem;

}

.abt2_bot {}

.abt2_bot .txt {
    max-width: 400px;
    display: inline-block;
    margin-right: 5.4rem;
    vertical-align: top;
}

.abt2_bot .txt p {
    font-size: 18px;
    color: #1c1617;
    font-family: 'Yuji Boku';
    padding: 5.4rem 0 0 5rem;
}

.abt2_bot img {
    position: relative;
    top: 0;
}

@media screen and (max-width: 1500px) {
    .abt1 {}

    .abt1 .nav_bg_02 {
        display: block;
    }

    .abt2:before {
        background-size: 60%;
    }

    .abt2_top .txt {
        width: 55%;
    }

    .abt2_cen {
        max-width: 60%;
        margin: 10rem 10rem 0;
    }

    .abt2_cen:after {
        left: -10rem;
    }

    .abt2_bot {
        width: 85%;
    }
}

@media screen and (max-width: 1366px) {
    .abt2_top .txt p {
    max-width: 360px;
}
}
@media screen and (max-width:1280px){
    .abt2_top .txt p {
    max-width: 300px;
}
}
@media screen and (max-width: 1240px) {
    .abt2:before {
        background-size: 40%;
    }

    .abt2_top .title {
        width: 12%;
    }

    .abt2_cen {
        max-width: 60%;
        margin-left: 9rem;
    }

    .abt2_cen:after {
        left: -9rem;
    }

    abt2_cen .txt {
        left: 11rem;
    }

    .abt2_bot {
        width: 93%;
    }
}

@media screen and (max-width: 1150px) {

    .abt2:before {
        top: 52.6rem;
    }
    .abt2_top .txt p {
    max-width: 90%;
}

    .abt2_cen {
        max-width: 50%;
        margin-left: 15rem;
    }

    .abt2_cen .txt {
        left: 8rem;
    }

    .abt2_bot {
        margin-top: 14rem;
    }

    .abt2_bot .txt p {
        padding: 12.4rem 0 0 5rem;
    }

    .abt2_bot img {
        top: 7rem;
        width: 35%;
    }
}

@media screen and (max-width: 991px) {
    .ab1_bg {
        background-attachment: inherit;
        min-height: 417px;
    }
.abt2_mask {
    top: -17px;
}
.abt2:before {
    top: 42.6rem;
}
    .abt2_top .title {
    width: 14%;
}
    .abt2_top img {
        width: 34%;
    }

    .abt2_cen {
    margin-left: 5rem;
    max-width: 80%;
    }
    .abt2_cen:after {
    width: 250px;
    left: -6rem;
    text-align: left;
}
}
@media screen and (max-width:890px){
    .abt2:before {
    top: 49.6rem;
}
}
@media screen and (max-width: 767px) {
    .ab1_bg {
        min-height: 460px;
    }

    .abt2 {
        padding: 5rem 0 10.6rem;
    }

    .abt2:before {
        top: 70rem;
        background-size: 25%;
    }

    .abt2_top {
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: flex-start;
    }

    .abt2_top img {
        width: 80%;
        order: 1;
        margin: 0 auto;
    }

    .abt2_top .title {
        width: 100%;
        text-align: center;
        order: -1;
    }

    .abt2_top .txt {
        width: 95%;
        order: 0;
        margin: 2rem 0 2rem auto;
    }

    .abt2_top .txt p {
        padding: 3.8rem 0 0 4rem;
		max-width: 100%;
    }

    .abt2_cen {
        margin: 3rem auto 2rem;
        max-width: 75%;
        text-align: center;
    }

    .abt2_cen .txt {
        left: 5rem;
    }

    .abt2_cen .txt p:nth-of-type(1) {
        font-size: 35px;
    }

    .abt2_cen .txt p:nth-of-type(2) {
        font-size: 25px;
    }

    .abt2_cen:after {
        left: -4rem;
        font-size: 130px;
        top: -6rem;
    }

    .abt2_bot {
        margin-top: 5rem;
        width: 95%;
    }

    .abt2_bot .txt p {
        padding: 0 0 0 2rem;
    }

    .abt2_bot img {
        top: 3rem;
        width: 60%;
        left: 4rem;
    }
}
@media screen and (max-width:660px){
    .abt1_txt{
        min-height: 250px;
        padding: 0 2rem;
    }
    .abt1_title {
    padding: 14rem 0 3.2rem;
}
.abt1_title h2 {
    font-size: 25px;
}
}
@media screen and (max-width: 450px) {

    .abt1 {
        min-height: 300px;
    }
    .ab1_bg {
        min-height: 350px;
    }

    .abt2:before {
        /*top: 60rem;*/
        display: none;
    }

    .abt2_top .txt {
        min-height: 236px;
    }

    .abt2_top .txt p {
        padding: 1.8rem 0 0 2rem;
    }

    .abt2_cen {
        max-width: 80%;
    margin: 3rem 0 2rem 4rem;
    }
    .abt2_cen:after {
    left: -3rem;
    font-size: 110px;
    top: -6rem;
    width: 86px;
}

    .abt2_bot .txt {
        margin-right: 0.4rem;
    }

    .abt2_bot .txt p {
        padding: 1.8rem 0 0 2rem;
    }

    .abt2_bot img {
        width: 70%;
    }
}

@media screen and (max-width: 414px) {
  .abt1_txt {
    min-height: 190px;
}
    .abt1_title {
    padding: 7rem 0 3.2rem;
}
    .abt2_top .txt p {
    font-size: 17px;
}
}

@media screen and (max-width: 390px) {
    
    .abt2_cen .txt {
        left: 4rem;
        top: 1rem;
    }

    .abt2_cen .txt p:nth-of-type(1) {
        font-size: 30px;
    }

    .abt2_cen .txt p:nth-of-type(2) {
        font-size: 20px;
    }
}

@media screen and (max-width: 350px) {
   .ab1_bg {
    min-height: 150px;
}
.ab1_bg img:nth-of-type(1){
    vertical-align: top;
}
    .abt2:before {
        top: 68rem;
    }
}

/***Products*****************************************************************/
.pro {
    background: url(../../images/pro_bg02.jpg) top center no-repeat, url(../../images/pro_bg01.jpg) top left repeat;
    background-size: 100%, auto;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    padding-bottom: 6rem;
}

.pro .pro_deco01 {
    -webkit-filter: drop-shadow(8px 5px 5px rgba(16, 5, 10, 0.15));
    filter: drop-shadow(8px 5px 5px rgba(16, 5, 10, 0.15))
}

.pro .pro_deco02 {
    margin: 3rem 0;
}

.pro .pro_txt {
    text-align: center;
    margin: 0 auto;
}

.pro .pro_txt img {
    width: 15%;
}

.pro .pro_txt h3 {
    font-size: 24px;
    color: #1c1617;
    font-family: 'Yuji Boku';
}

.pro .pro_deco03 {
    margin: 3rem 0;
}

.pro .pro_txt2 {
    color: #2c1e1b;
    font-style: italic;
}

.pro .pro_txt2 h3 {
    font-family: 'Yuji Boku';
    font-size: 36px;
    letter-spacing: 10px;
    padding-bottom: 1.4rem;
}

.pro .pro_txt2 h4 {
    font-family: 'Itim';
    font-size: 18px;
}

.pro_more {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;
    align-items: flex-start;
    padding-bottom: 2rem;
    overflow: hidden;
}

.pro_more .more_lt {
    background: url(../../images/pro_sfbg.png) top left no-repeat;
    background-size: 100%;
    width: 886px;
    max-width: 100%;
    min-height: 890px;
    z-index: 0;
    overflow: hidden;
}
.pro_more .more_lt a{
	transition:.5s all;
}
.pro_more .more_lt a:hover{
	transform:translateY(-10px);
}
.pro_more .more_lt .more {
    background: #000
;    border-radius: 50px;
    max-width: 220px;
    text-align: center;
    margin-left: auto;
    margin-right: 8rem;
    padding: .5rem 0;
    vertical-align: middle;
    border: 1px #42daf6 solid;
    position: relative;
    box-shadow: 0.5vw 0.5vw 0 #42daf6;
}

.pro_more .more_lt .thumbnail {
    position: relative;
    left: 3rem;
}

.pro_more .more_lt .more span {
    font-size: 20px;
    color: #ffffff;
    font-family: 'Noto Sans TC';
    vertical-align: bottom;
    padding-left: 1rem;
}

.pro_more .more_lt a .more,
.pro_more .more_lt a .more img {
    transition: .5s ease;
}

.pro_more .more_lt a:hover .more {
    transform: translate3d(5px, 5px, 0px);
    box-shadow: 0vw 0vw 0 #42daf6;
}

.pro_more .more_lt a:hover .more img {
    transform: translateX(5px);
}

.pro_more .more_cen {}

.pro_more .more_cen p {
    font-size: 188px;
    color: #c1c1c1;
    font-family: 'Lobster';
    opacity: .5;
}

.pro_more .more_rg {
    background: url(../../images/pro_mtbg.png) top right no-repeat;
    background-size: 100%;
    width: 886px;
    max-width: 100%;
    min-height: 890px;
    overflow: hidden;
}
.pro_more .more_rg a{
	transition:.5s all;
}
.pro_more .more_rg a:hover{
	transform:translateY(-10px);
}
.pro_more .more_rg .more {
    background: #000;
    border-radius: 50px;
    max-width: 220px;
    text-align: center;
    padding: .5rem 0;
    vertical-align: middle;
    border: 1px #a6db34 solid;
    position: relative;
    box-shadow: -0.5vw 0.5vw 0 #a6db34;
    margin-left: 1rem;
}

.pro_more .more_rg .thumbnail {
    position: relative;
    right: 3rem;
}

.pro_more .more_rg .more span {
    font-size: 20px;
    color: #ffffff;
    font-family: 'Noto Sans TC';
    vertical-align: bottom;
    padding-right: 1rem;
}

.pro_more .more_rg a .more,
.pro_more .more_rg a .more img {
    transition: .5s ease;
}

.pro_more .more_rg a:hover .more {
    transform: translate3d(-5px, 5px, 0px);
    box-shadow: 0vw 0vw 0 #a6db34;
}

.pro_more .more_rg a:hover .more img {
    transform: translateX(-5px);
}

.thumbnail {
    box-shadow: none;
    background-color: transparent;
    border: none;
    margin-bottom: 0;
    padding: 0;
    display: initial;
    border-radius: 0;
}

@media screen and (max-width: 1500px) {
    .pro .pro_txt img {
        width: 18%;
    }

    .pro_more .more_lt .thumbnail {
        left: 0rem;
        width: 90%;
    }

    .pro_more .more_rg .thumbnail {
        right: 0rem;
        width: 90%;
    }
}

@media screen and (max-width: 1200px) {
    .pro .pro_txt img {
        width: 23%;
    }

    .pro_more .more_lt {
        min-height: 655px;
    }

    .pro_more .more_rg {
        min-height: 655px;
    }
}

@media screen and (max-width: 991px) {
    .pro .pro_txt img {
        width: 36%;
    }

    .pro_more .more_lt {
      min-height: 910px;
    }

    .pro_more .more_cen p {
        font-size: 128px;
    }

    .pro_more .more_rg {
      min-height: 910px;
    }

}

@media screen and (max-width: 768px) {
    .pro .pro_txt img {
        width: 60%;
    }

    .pro .pro_deco03 {
        width: 95%;
    }

    .pro_more {
        flex-wrap: wrap;
        margin-top: 3rem;
    }

    .pro_more .more_cen {
        text-align: center;
        margin: 0 auto;
        width: 100%;
    }

    .pro_more .more_cen p {
        font-size: 188px;
        line-height: 1.2;
    }

    .pro_more .more_rg {
        margin-top: 3rem;
    }

    .pro_more .more_rg .more {
        margin: 0 auto;
    }
}

@media screen and (max-width: 450px) {
    .pro {
        padding-bottom: 0;
    }
.pro .pro_deco02 {
    width: 60%;
}
.pro_more .more_lt {
    min-height: 540px;
}
.pro .pro_txt2 h3 {
    font-size: 30px;
}
.pro .pro_txt2 h4 {
    font-size: 16px;
}
    .pro .pro_txt img {
        width: 70%;
    }

    .pro_more .more_cen {
        margin: 0 auto 5rem;
            width: 100%;
    }

    .pro_more .more_cen p {
        line-height: 1;
    }

    .pro_more .more_rg {
        margin-top: 0;
        min-height: 540px;
    }
}

@media screen and (max-width: 414px) {}

@media screen and (max-width: 350px) {
    .pro .pro_txt img {
        width: 90%;
    }

    .pro .pro_txt2 h3 {
        font-size: 28px;
    }
}

/***location*****************************************************************/
.loc {
    background: url(../../images/pro_bg01.jpg) top left repeat;
    padding: 5rem 0 11rem;
    margin: 0 auto;
    text-align: center;
}

.loc_title {
    margin-bottom: 8rem;
}

.loc_inner {
    max-width: 1330px;
    text-align: center;
    margin: 0 auto;
    vertical-align: top;
}

.loc_lt {
    display: inline-block;
}

.loc_lt {
    display: inline-block;
}

.loc_lt {}

.loc_lt .map {
    position: relative;
    width: 650px;
    max-width: 100%;
    min-height: 500px;
    vertical-align: top;
    border: 1px solid #a0a0a0;
}

.loc_lt .map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 20px;
}

.loc_rg {
    display: inline-block;
    margin-left: 9.5rem;
    vertical-align: top;
}

.loc_rg .loc_info {
    border: 1px #001c58 solid;
    border-radius: 50px;
    padding: 10rem 6rem 7rem;
    text-align: left;
    position: relative;
    margin-top: 3rem;
}

.loc_rg .loc_info li {
    display: flex;
}

.loc_rg .loc_info h3 {
    background: url(../../images/loc_info.png) center center no-repeat;
    width: 294px;
    max-width: 100%;
    min-height: 81px;
    position: absolute;
    top: -7%;
    left: 20%;
    font-size: 43px;
    color: #001c58;
    font-family: 'Lobster';
    font-weight: 500;
    text-align: center;
    padding: 1rem 0;

}

.loc_info .loc_icon {
    display: inline-block;
    vertical-align: top;
    padding-right: 1.5rem;
}

.loc_info .info_inner {
    display: inline-block;
    width: 86%;
}

.info_inner .info_title {
    display: inline-block;
    position: relative;
    width: 100%;
    padding-bottom: 1rem;
}

.info_inner .info_title:before {
    content: '';
    background: url(../../images/loc_line.png) top left no-repeat;
    width: 100%;
    height: 4px;
    position: absolute;
    bottom: 0;
    left: 0;
}

.loc_info .info_title span {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    position: relative;
}

.loc_info .info_title span:nth-of-type(1) {
    font-size: 22px;
    color: #001c58;
    font-family: 'Yuji Boku';

}

.loc_info .info_title span:nth-of-type(2) {
    font-size: 18px;
    color: #001c58;
    font-family: 'Itim';
}

.loc_info .info_txt {
    text-align: left;
}

.loc_rg .loc_info li p {
    font-size: 23px;
    color: #2c1e1b;
    font-family: 'Itim', 'Yuji Boku';
    margin-top: .8rem;

}

@media screen and (max-width: 1400px) {}

@media screen and (max-width: 1210px) {
    .loc_lt {
        width: 40%;
    }

    .loc_rg {
        margin-left: 4.5rem;
    }
}

@media screen and (max-width: 991px) {
   .loc_inner {
    display: flex;
    flex-wrap: wrap;
}
    .loc_lt {
    width: 90%;
    margin: 0 auto;
}
.loc_lt .map {
    margin: 0 auto;
}
    .loc_rg {
    width: 90%;
    margin: 0 auto 4rem;
    order: -1;
}

    .loc_rg .loc_info {
        padding: 10rem 3rem 7rem;
    }
    .loc_rg .loc_info h3 {
    left: 30%;
}

.loc_rg .loc_info li {
    justify-content: center;
}
.loc_info .info_inner {
    width: 50%;
}
}

@media screen and (max-width: 767px) {
    .loc_title {
        width: 90%;
        text-align: center;
        margin: 2rem auto;
    }

    .loc_inner {
        display: flex;
        flex-wrap: wrap;
    }

    .loc_lt {
        width: 95%;
        text-align: center;
        margin: 0 auto;
    }

    .loc_rg {
        width: 95%;
        text-align: center;
        margin: 0 auto 5rem;
        order: -1;
    }

    .loc_rg .loc_info li {
        justify-content: center;
    }

    .loc_rg .loc_info h3 {
        left: 20%;
    }
   
}
@media screen and (max-width: 656px) {
    .loc_info .info_inner {
    width: 70%;
}
}
@media screen and (max-width: 500px) {
    .loc_rg .loc_info h3 {
        left: 15%;
    }

    .loc_info .info_inner {
        width: 85%;
    }
}

@media screen and (max-width: 450px) {
    .loc_rg .loc_info {
        padding: 10rem 1rem 7rem;
    }

    .loc_rg .loc_info h3 {
        left: 22%;
        max-width: 58%;
    }

    .loc_info .info_title span:nth-of-type(1) {
        font-size: 20px;
    }

    .loc_info .info_title span:nth-of-type(2) {
        font-size: 16px;
    }
}

@media screen and (max-width: 380px) {
    .loc_rg .loc_info {
        padding: 8rem 1rem 7rem;
    }

    .loc_rg .loc_info h3 {
        font-size: 33px;
    }

    .loc_info .info_title span:nth-of-type(1) {
        font-size: 20px;
    }

    .loc_info .info_title span:nth-of-type(2) {
        font-size: 12px;
    }

    .loc_rg .loc_info li p {
        font-size: 18px;
    }
}

/***bot*****************************************************************/
.bot {
    background: url(../../images/bot_bg.jpg) top center fixed;
    background-size: cover;
    width: 100%;
    min-height: 750px;
    position: relative;
}

.bot .bot_top {
    background: url(../../images/bot_deco01.png) top center no-repeat;
    background-size: 100%;
    width: 100%;
    min-height: 141px;
    text-align: center;
    margin: 0 auto;
}

.bot .bot_top h3 {
    font-size: 30px;
    color: #3c3c3c;
    font-family: 'Lobster';
    padding-top: 3rem;
}

.bot .bot_cen {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -55%);
    text-align: center;
}

.bot .bot_cen p {
    font-size: 26px;
    color: #f8f8f8;
    font-family: 'Yuji Boku';
}

.bot .bot_bot {
    position: absolute;
    bottom: -1rem;
    left: 0;
}

@media screen and (max-width: 1400px) {}

@media screen and (max-width: 1200px) {}

@media screen and (max-width: 991px) {
    .bot .bot_top h3 {
        font-size: 22px;
        padding-top: 0;
    }

    .bot .bot_cen {
        width: 100%;
    }
}

@media screen and (max-width: 767px) {}

@media screen and (max-width: 450px) {
    .bot .bot_top h3 {
        font-size: 14px;
    }

    .bot {
        background-attachment: initial;
        min-height: 450px;
    }
}

@media screen and (max-width: 390px) {
    .bot .bot_top {
    min-height: 29px;
}
.bot .bot_top h3 {
    font-size: 11px;
}
    .bot .bot_cen p {
        font-size: 19px;
    }
}

@media screen and (max-width: 350px) {
    .bot .bot_top {
        min-height: 40px;
    }

    .bot .bot_top h3 {
        font-size: 12px;
    }
}

/***footer*****************************************************************/
.bot_bot {
    position: relative;
    bottom: 4rem;
    left: 0;
}
footer {
    background: url(../../images/ftbg.jpg) top center repeat;
    text-align: center;
    position: relative;
    z-index: 10;
}

.ftwrap {
    max-width: 1360px;
    text-align: left;
    padding: 4rem 0 3.4rem;
    margin: 0 auto;
}

.ftlogo {
    width: 15%;
    border-right: 1px #fff solid;
    margin-right: 5rem;
    padding-top: 2rem;
    display: inline-block;
    vertical-align: middle;
    min-height: 200px;
}

.ftinfo {
    width: 46%;
    padding-top: 2rem;
    display: inline-block;
    vertical-align: middle;
}

.ftinfo .ftinfo_tel {
    margin-bottom: 1.5rem;
}

.ftinfo .ftinfo_tel p {
    color: #1c1617;
    display: inline-block;
}

.ftinfo .ftinfo_tel p:nth-of-type(1) {
    font-size: 20px;
    font-family: 'Noto Sans TC';
    padding: 0 2.7rem 0 1.6rem;
    font-weight: 500;
}

.ftinfo .ftinfo_tel p:nth-of-type(2) {
    font-size: 26px;
    font-family: 'Itim';
    background: rgba(180, 238, 249, 1.0);
    padding: 0 2rem;
    border-radius: 50px;
    letter-spacing: 3px;
}

.ftinfo li p {
    display: inline-block;
    font-size: 18px;
    color: #1c1617;
    font-family: 'Itim', 'Noto Sans TC';
    line-height: 2;
    padding-left: 1.3rem;
    vertical-align: middle;
}

/*ftlist*/
.ftlist {}

.ftlist ul li {}

.ftlist ul li img {
    display: inline-block;
    vertical-align: middle;
}


.ft_rt {
    width: 30%;
    text-align: right;
    display: inline-block;
    vertical-align: middle;
}

/*ftlink*/
.ftlink {
    text-align: center;
}

.ftbtn li {
    display: inline-block;
    width: 37%;
    padding: 2em 1em;
}

.ftbtn li a {}

.ftbtn li img:nth-of-type(1) {
    transition: .5s cubic-bezier(0.25, 1, 0.5, 1);
}

.ftbtn li img:nth-of-type(2) {
    -webkit-filter: drop-shadow(0px -3px 1px rgb(89, 57, 14, 1));
    filter: drop-shadow(0px -3px 1px rgb(89, 57, 14, 1));
    transition: .3s ease all;
}


.ftbtn li a:hover {}

.ftbtn li a:hover img:nth-of-type(1) {
    transform: translateY(-10px);
    opacity: .5;
}

.ftbtn li a:hover img:nth-of-type(2) {
    -webkit-filter: drop-shadow(0px 0px 0px rgb(89, 57, 14, 1));
    filter: drop-shadow(0px 0px 0px rgb(89, 57, 14, 1));
}


/*ftbtm*/
.ftbtm {
    text-align: right;
}

.ftbtm li {
    display: inline-block;
    font-size: 16px;
    font-family: 'Noto Sans TC';
    padding: 0 1rem;
    text-align: right;
    border-right: 1px #1c1617 solid;
    margin: 1rem 0;

}
.ftbtm li:nth-of-type(1), .ftbtm li:nth-of-type(5){
    border-left: 1px #1c1617 solid;
}

.ftbtm li a {
    color: #1c1617;
    transition: .5s all;
}

.ftbtm li a:hover {
    color: #001c58;
}


.ft_anim{
    position: relative;
        min-height: 350px;
        margin-bottom: -2rem;
}

.footer_bot {
    background: url(../../images/ft_deco01.jpg) top center no-repeat, #fff;
    padding: 2.6rem 0 1.6rem;

}
.bot_inner{
    max-width: 1330px;
    margin: 0 auto;
}
/*share*/
.share {
    color: #1c1617;
    font-size: 16px;
    font-family: 'Itim';
    display: inline-block;
    width: 24%;
    text-align: left;
}

.share a {
    color: #1c1617;
    font-size: 14px;
    display: inline-block;
    padding-right: 1rem;
}

.share a:hover {
    opacity: .7;
}


/*ftrt*/
.ftrt {
    color: #1c1617;
    font-size: 14px;
    font-family: 'Noto Sans TC';
    display: inline-block;
    top: 0;
    right: 0;
    width: 75%;
    text-align: left;
}

.ftrt a {
    color: #1c1617;
    display: inline-block;
}

.ftrt a:hover {
    color: #001c58;
}

@media screen and (max-width:1500px){
   .dex_fish {
    bottom: 20rem;
    left: 37%;
}
    .bot_bot {
    bottom: 3rem;
}
}
@media screen and (max-width:1290px){
    .dex_fish {
    bottom: 20rem;
    left: 45%;
}
}
@media screen and (max-width: 1223px){
    .ftwrap {
    margin: 0 2rem;
    text-align: center;
}
.ftlogo {
    padding-right: 1rem;
    width: 17%;
}
.ftinfo {
    width: 40%;
    text-align: left;
}
.ft_rt {
    width: 35%;
}
}
@media screen and (max-width:1100px){
    .bot_bot {
    bottom: 2rem;
}
}
@media screen and (max-width: 1090px){
    .ftlogo {
    margin-right: 3rem;
}
.ftinfo {
    width: 34%;
}
.ft_rt {
    width: 40%;
}
}
@media screen and (max-width: 991px){
.dex_boat {
    bottom: 7rem;
    left: 2rem;
}
.dex_fish {
    left: 48%;
}
.ftlogo {
   margin-right: 0;
    width: 35%;
    border-right: none;
}
.ftinfo {
    width: 60%;
}
.ft_rt {
    width: 95%;
    text-align: center;
        margin-top: 2rem;
}
.ftbtm {
    text-align: center;
}
.ftbtm li:nth-of-type(5){
    border-left: none;
}
.ftrt {
    width: 60%;
}
.share {
    width: 35%;
}
}
@media screen and (max-width:800px){
    .bot_bot {
    bottom: 1rem;
}
}
@media screen and (max-width: 768px){
    .ftlogo {
    width: 95%;
}
.ftinfo {
    width: 100%;
}
.ftrt {
    width: 95%;
}
.share {
    width: 95%;
    text-align: right;
    padding-top: 1rem;
}
.ft_anim {
    min-height: 270px;
}
.dex_boat {
    bottom: 4rem;
    left: 2rem;
    width: 35%;
}
.dex_wave {
    width: 37%;
}
.dex_fish {
    left: 39%;
    bottom: 15rem;
}
}
@media screen and (max-width:650px){
    .ft_anim {
    min-height: 200px;
}
.dex_fish {
    bottom: 12rem;
}
}
@media screen and (max-width:500px){
    .ft_anim {
    min-height: 160px;
}
.dex_boat {
    bottom: 2rem;
}
.dex_wave {
    left: 1rem;
}
.dex_fish {
    bottom: 8rem;
}
}
@media screen and (max-width: 450px){
   .ftinfo {
    width: 85%;
}
    .ftinfo .ftinfo_tel p:nth-of-type(2) {
    font-size: 20px;
}
.ftbtm li:nth-of-type(5){
    border-left: 1px #1c1617 solid;
}
}
@media screen and (max-width: 414px){
  .ftwrap {
    margin: 0 0 0 1rem;
}
    .ftinfo .ftinfo_tel p:nth-of-type(1) {
    font-size: 18px;
}
.dex_wave {
    bottom: 0rem;
}
}
@media screen and (max-width: 393px){
  .bot_bot {
    bottom: 1.5rem;
}
    .ftbtm li:nth-of-type(4), .ftbtm li:nth-of-type(7){
    border-left: 1px #1c1617 solid;
}
.ftbtm li:nth-of-type(5){
    border-left: none;
}
.ft_anim {
    min-height: 120px;
}
}
@media screen and (max-width: 350px){
.ftwrap {
    margin: 0;
}
.ftinfo li p {
    padding-left: 0.3rem;
}
.ftinfo .ftinfo_tel p:nth-of-type(1) {
    padding: 0 0.7rem 0 0.6rem;
}
.ftinfo .ftinfo_tel p:nth-of-type(2) {
    padding: 0 1rem;
}
.ftbtm {
    text-align: left;
}
}

/***inbanner*****************************************************************/
.header{
    position: relative;
    min-height: auto;
}
.inbg{
    background: url(../../images/inbg.jpg) top center fixed;
    width: 100%;
    min-height: 733px;
}
.inbanner{
    background: url(../../images/inbg2.png)top center no-repeat;
    background-size: cover;
    width: 100%;
    min-height: 858px;
    position: relative;
}
.intitle{
    position: absolute;
    top: 27rem
;    right: 30rem;
}
.indeco{
    background: url(../../images/indeco01.png) bottom left no-repeat;
    background-size: 100%;
    width: 1116px;
    max-width: 100%;
    min-height: 612px;
    position: absolute;
    bottom: 0;
    left: 0;
}
.inboat {
    z-index: 2;
    position: absolute;
    bottom: 14rem;
    left: 16rem;
}

.inboat {
    -webkit-animation: rock-boat 3s ease-in-out infinite;
}

.inboat::after {
    -webkit-animation: steam 4s 2s infinite;
}

@-webkit-keyframes rock-boat {
    50% {
        -webkit-transform: rotate(-5deg) translateY(-10px);
    }
}

@-webkit-keyframes steam {

    40%,
    60% {
        opacity: .8;
    }

    100% {
        -webkit-transform: translate(-15%, -35%) rotateZ(20deg);
    }
}

.inwave01 {
    z-index: 2;
    position: absolute;
    bottom: 0;
    left: 16rem;
}

.inwave01 {
    -webkit-animation: rock-wave 3s ease-in-out infinite;
}

.inwave01::after {
    -webkit-animation: steam2 4s 2s infinite;
}

@-webkit-keyframes rock-wave {
    50% {
        -webkit-transform: rotate(5deg) translateY(-10px);
    }
}

@-webkit-keyframes steam2 {

    40%,
    60% {
        opacity: .8;
    }

    100% {
        -webkit-transform: translate(-15%, -35%) rotateZ(20deg);
    }
}
.inwave02 {
    z-index: 2;
    position: absolute;
    bottom: 0;
    left: 5rem;
}

.inwave02 {
    -webkit-animation: rock-wave2 3s ease-in-out infinite;
}

.inwave02::after {
    -webkit-animation: steam2 4s 2s infinite;
}

@-webkit-keyframes rock-wave2 {
    50% {
        -webkit-transform: rotate(-5deg) translateY(-10px);
    }
}

@-webkit-keyframes steam2 {

    40%,
    60% {
        opacity: .8;
    }

    100% {
        -webkit-transform: translate(-15%, -35%) rotateZ(20deg);
    }
}
@media screen and (max-width: 1500px){
   .inbanner {
    min-height: 676px;
}
    .intitle {
    top: 20rem;
    right: 20rem;
}
    .indeco {
    max-width: 50%;
}
.inboat {
    bottom: 4rem;
    left: 3rem;
}
.inwave01 {
    left: 8rem;
}
.inwave02 {
    left: 0rem;
}
}
@media screen and (max-width: 1200px){
    .intitle {
    top: 23rem;
    right: 13rem;
    width: 37%;
}
}
@media screen and (max-width: 991px){
    .intitle {
    top: 23rem;
    right: 5rem;
    width: 54%;
}
}
@media screen and (max-width: 768px){
.inbanner {
    min-height: 550px;
    z-index: 0;
}
.intitle {
    top: 18rem;
    right: 3rem;
}
.indeco {
    min-height: 200px;

}
}
@media screen and (max-width: 576px){
    .inbanner {
    min-height: 370px;
}
.intitle {
    top: 12rem;
}
.indeco{
    bottom: 1rem;
}
}
@media screen and (max-width: 450px){}
@media screen and (max-width: 414px){
    .inbanner {
    min-height: 320px;
}
.intitle {
    top: 11rem;
}
}
@media screen and (max-width: 350px){
    .inbanner {
    min-height: 270px;
}
.intitle {
    top: 10rem;
}
.indeco {
    bottom: 0rem;
}
.inboat {
    bottom: 1rem;
    left: 1rem;
}
.inwave01 {
    left: 0rem;
}
}


.side_tp2{
   position: fixed;
   pointer-events: none;
}

/***note*****************************************************************/
.note{
    width: 1330px;
    max-width: 100%;
    text-align: center;
    margin: 0 auto;
    padding: 4.6rem 0;
}
.note_title{
    margin: 0 auto;
    text-align: center;
}
.note_title img{
    animation: netitle 2s linear none;

}
@keyframes netitle {
       25%{
        transform: rotate(-10deg);
    }
     75%{
        transform: rotate(10deg);
    }
}
.note1, .note2, .note3, .note4, .note5{
    margin: 0 auto;
    text-align: center;
    padding-top: 6rem;

}

.note_title2{
    background: url(../../images/netitle_bg.png) top center no-repeat;
    background-size: 100%;
    width: 221px;
    max-width: 100%;
    min-height: 61px;
    text-align: center;
    margin: 0 auto 3.5rem;
    line-height: 66px;

}
.note_title2 h3{
    font-size: 22px;
    color: #160f0d;
    font-family: 'Noto Sans TC';
    padding: 0 2rem;
    display: inline-block;
}
.note_inner{
    font-size: 18px;
    color: #160f0d;
    text-align: left;
    padding-bottom: 3rem;

}

@media screen and (max-width: 1200px){
    .note{
        max-width: 90%;
    }
}
@media screen and (max-width: 450px){
    .note_title {
    width: 60%;
}
    }
@media screen and (max-width: 350px){
    .note_title {
    width: 80%;
}
}
/***Products inner*****************************************************************/

.proinner{
    width: 1330px;
    max-width: 100%;
    text-align: center;
    margin: 0 auto;
}



/***gotop*****************************************************************/
#gotop {
    position: fixed;
    bottom: 0rem;
    right: 7.8rem;
    z-index: 50;
    cursor: pointer;
    display: none;
}

#btn {
    position: fixed;
    bottom: 10rem;
    right: 4.8rem;
    z-index: 50;
    cursor: pointer;
    display: none;
}

#btn a:nth-of-type(2) {
    margin-top: 1rem;
}

#gotop img {
    transition: .3s cubic-bezier(0.25, 1, 0.5, 1);
}

#btn a img {
    transition: .3s cubic-bezier(0.25, 1, 0.5, 1);
}

#gotop:hover img {
    transform: translateY(-10px);
}

#btn a:hover img {
    transform: translateY(-10px);
}

@media (max-width:1580px) {}

@media (max-width:1440px) {}

@media (max-width:1200px) {
    

   
}

@media (max-width:991px) {


}

@media (max-width: 768px) {

    #gotop {
    right: 1.8rem;
}
#btn {
    right: 1rem;
}
    #btn a {
        width: 60%;
    text-align: right;
    margin-left: auto;
    }
}

@media (max-width:450px) {

   

    #gotop {
        width: 15%;
        right: 1.3rem;
    }

    #btn {
        right: 0.8rem;
        bottom: 9rem;

    }

    #btn a {
        width: 60%;
        margin-left: auto;
    }
}


@media (max-width: 390px) {}

@media (max-width: 350px) {


    #gotop {
        width: 20%;
        right: 1.6rem;
    }
}

/**/
#about,
#location {
    transform: translateY(-80px);
}

#products
{
    transform: translateY(70vh);
}
@media (max-width:991px) {}

@media (max-width:768px) {}

@media (max-width:450px) {
    #products
{
    transform: translateY(45vh);
}
}



/***stalker*****************************************************************/
#stalker {
pointer-events: none;
position: fixed;
top: -15px;     
left: -15px;    
width: 30px;   
height: 30px;  
background: url(../../images/mouse_fish.png);
transition: transform 0.2s, top, 0.5s, left 0.5s, width .5s, height .5s, background-color .5s;
transition-timing-function: ease-out;
z-index: 9999;
opacity: 0;
animation: 2s fadeIn 1s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

#stalker.hov_{
top: -15px;     
left: -15px;    
width: 30px;   
height: 30px;  
background: url(../../images/mouse_fish.png);
}
#stalker.hov_::before {
  content: '';
  position: absolute;
  top: 0;     
  left: 0; 
  height: 4px;
  width: 4px;
  border-radius: 100%;
  background: #fff;
  animation: bub 3s infinite;
}
@keyframes bub{
    0%{
        transform: translateY(0px);
    }
    50%{
        transform: translateY(-10px);
    }
    100%{
        opacity: 0;
    }
}
#stalker.hov_::after{
    content: '';
  position: absolute;
  top: 6px;     
  left: 0; 
  height: 3px;
  width: 3px;
  border-radius: 100%;
  background: #fff;
animation: bub2 3s infinite;
animation-delay: .2s;
}
@keyframes bub2{
   0%{
        transform: translateY(0px);
    }
    50%{
        transform: translateY(-10px);
    }
    100%{        
        opacity: 0;
    }
}
@media screen and (max-width:1024px){
    
#stalker { display:none; }

}
.wrap3{
    text-align: center;
    padding: 20rem 0 10rem;
}
/***product_guide***/
.product_guide {
    width:1330px;
    margin:0 auto;
    max-width:90%;
    padding:5em 5em;    
}
.pro_bg{
background: url(../../images/carts_bg_02.png) top center repeat;
}
.prdt {
    display:inline-block;
    vertical-align:top;
    width:23%;
    padding:2em;
}
.carts_bg{
    text-align: center;
    margin: 0 auto -1rem;
}
    @media screen and (max-width:1040px) {
        .prdt {
            padding:1em;
        }
    }
    @media screen and (max-width:870px) {
        .product_guide {
            padding: 5em 0 6em 2em;
        }
        .prdt {
            width:31%;
        }
    }
    @media screen and (max-width:650px) {
        .product_guide {
            padding: 3em 0 6em 2em;
        }
        .prdt {
            width:45%;
        }
    }
    @media screen and (max-width:500px) {
        .product_guide {
            padding: 3em 0 6em .5em;
        }
        .prdt {
            width:48%;
        }
    }
    @media screen and (max-width:430px) {
        .prdt .item_img:after {
            width:75%;
            height:75%;
        }
        .prdt {
            padding:0 .5em 1em;
        }
        .product_guide {
            padding: 3em 0 4em .5em;
        }
    }
    @media screen and (max-width:380px) {
        .prdt .item_name img:nth-of-type(1) {
            width:45px;
        }
    }
/***pro_deco***/
.pro_deco {
    position:absolute;
    right:3em;
    width:50%;
    bottom:-2em;
}
.pro_deco p {
    color:#fff;
    font-size:18px;
    position: absolute;
    top: 5em;
    right: 7em;
    width: 55%;
}
.pro_deco img:nth-of-type(1) {
    margin-bottom: -5em;
}
    @media screen and (max-width:1470px) {
        .pro_deco img:nth-of-type(1) {
            margin-bottom: -3em;
            width: 29%;
        }
        .pro_deco p {
            right: 5em;
            padding-left: 1em;
        }
    }
    @media screen and (max-width:1380px) {
        .pro_deco img:nth-of-type(1) {
            margin-bottom: 3em;
            width: 28%;
        }
        .pro_deco p {
            right:1em;
            width:65%;
        }
        .pro_deco {
            width:45%;
        }
    }
    @media screen and (max-width:1230px) {
        .pro_deco {
            right: 0;
            bottom: 0;
            position: relative;
            width: 100%;
            padding: 0 3em 10em;
        }
        .pro_deco img:nth-of-type(1) {
            margin-bottom: 0em;
            width: 15%;
            vertical-align: top;
            margin-top: -.5em;
        }
        .pro_deco img:nth-of-type(2) {
            display: block;
            margin: 0 auto;
            margin-top: -5em;
            width:57%;
        }
        .pro_deco p {
            top:3em;
        }
    }
    @media screen and (max-width:1020px) {
        .pro_deco {
            text-align:right;
            padding: 0 3em 7em;
        }
        .pro_deco img:nth-of-type(1) {
            display:block;
        }
        .pro_deco img:nth-of-type(2) {
            display:inline-block;
            margin-top: -4em;
            width: 60%;
        }
        .pro_deco p {
            text-align:left;
        }
    }
    @media screen and (max-width:900px) {
        .pro_deco img:nth-of-type(1) {
            position: absolute;
            top: -.5em;
            left: 2em;
            margin:0;
        }
        .pro_deco p {
            width:75%;
        }
        .pro_deco img:nth-of-type(2) {
            margin-top: 0em;
            width: 60%;
            padding-top: 6em;
        }
    }
    @media screen and (max-width:780px) {
        .pro_deco p {
            top:2em;
            font-size:16px;
        }
        .pro_deco {
            padding: 0 1em 10em;
        }
        .pro_deco img:nth-of-type(2) {
            padding-top: 5em;
        }
    }
    @media screen and (max-width:690px) {
        .pro_deco img:nth-of-type(2) {
            width:65%;
        }
    }
    @media screen and (max-width:500px) {
        .pro_deco {
            text-align:left;
            padding: 0 1em 8em;
        }
        .pro_deco img:nth-of-type(1) {
            position: relative;
            top: -.5em;
            left: 0;
            margin: 0;
            display: inline-block;
            width:20%;
        }
        .pro_deco p {
            top: 2em;
            font-size: 16px;
            position: relative;
            display: inline-block;
            width: 75%;
            right: 0;
            line-height: 1.5;
        }
        .pro_deco img:nth-of-type(2) {
            width: 90%;
            padding: 0 0 2em 0;
            margin-top: -2em;
            display: block;
        }
    }
    @media screen and (max-width:430px) {
        .pro_deco img:nth-of-type(2) {
            padding: 0 0 1em 0;
            margin-top: -1em;
        }
    }
    @media screen and (max-width:380px) {
        .pro_deco img:nth-of-type(2) {
            padding: 1em 0 1em 0;

        }
        .pro_deco p {
            font-size:15px;
        }
    }
    @media screen and (max-width:350px) {
        .pro_deco p {
            top:1em;
        }
        .pro_deco {
            padding: 0 1em 6em;
        }
    }
/*---item_menu--------------------------------------------------------------------------------------------------------------------*/
/***item_menu***/
.item_menu {
    display:inline-block;
    vertical-align:top;
    width: 23%;
    padding-right: 1em;
}
.item_menu .search_bar {
    position:relative;
    top:0;
    right:0;
}
/***im_title***/
.im_title {
    font-size:25px;
    text-align:center;
    padding:.5em 0 0;
}
.im_title img {
    vertical-align: middle;
}
/***item_list***/
.item_list {
    padding: 1em 1em 0 2.5em;
        text-align: left;
}
.item_list li:not(.menu-top){
    padding-left: 2rem;
}
.item_list p {
    display:none;
    cursor:pointer;
}
.item_list ul {
}
.item_list li  {
    padding:0;
}
.item_list li a {
    font-size:20px;
    display:inline-block;
    padding:0;
    color:#160f0d;
    letter-spacing: 5px;
    font-family: 'Yuji Boku';
}
.item_list .menu-top a {
    font-size:24px;
    color: #160f0d;
    font-family: 'Yuji Boku';
    display:inline-block;
    position:relative;
    margin:0 0 .2em 0;
    width: 100%;
    transition:.3s ease all;
    letter-spacing: 0;
}
.item_list a img{
    padding-right: .5rem;
}
   
    .item_list .menu-top a:after {
        content:'';
        background: url(../../images/dropmenu_bot.png) bottom left no-repeat;
        width:100%;
        height:18px;
        position:absolute;
        bottom:0;
        left:0;
    }
    .item_list a:hover {
        color:#348dad;
    }
@media screen and (max-width:450px){
    .item_list ul {
    text-align: center;
}
    .item_list .menu-top a:after {    
    width: 56%;
    left: 28%;
}
}

    
/***active***/
.item_list li.show ul.dropmenu {
    display:block;
}
.item_list li.show>a {
    color:#348dad;
}
ul.dropmenu li.active a {
    color:#348dad;
}
ul.dropmenu li.active a img,ul.dropmenu li.show a img {
    -webkit-filter:grayscale(0);
    filter:grayscale(0);
}
/***pro_items***/
.pro_items {
    display:inline-block;
    vertical-align:top;
    width:75%;
    text-align:left;
    padding:1em 0 3em 1em;
}
/*box_layer*/
.box_layer {
    display:inline-block;
    vertical-align:top;
    width:31%;
    padding:0 .3em .3em;
    min-height:440px;
}
/***box***/
.box {
    border-radius:20px;
    position:relative;
    text-align:left;
    padding:.7em;
}
.box hr{
    border: 1px #1b1b1b solid;
    width: 100%;
    opacity: .25;
    margin-top: 1.9rem;
    margin-bottom: 1.4rem;
}
/*product_img*/
.product_img {
    position:relative;
    min-height:235px;
    overflow: hidden;
    box-shadow: 8px 9px 13px rgba(16, 5, 10, 0.2);
}
.product_img div {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
/*item_info*/
.item_info {
    padding:.5em .2em;
}
.item_info h6 {
    font-size:24px;
    color: #160f0d;
    line-height:1.5;
    letter-spacing:1px;
}
.item_info ul {
    padding:.5em 0;
}
.item_info li {
    display:inline-block;
    padding-right:3em;
    font-size: 18px;
    color: #160f0d;
}
.item_info li:nth-of-type(2) {
    padding-right:0;
}
.item_info li span {
    color:#160f0d;
    font-size:31px;
    font-weight:500;
    font-family: 'Itim';
}
.item_info li span:nth-of-type(2){
    font-size:22px;
}
.item_info li select {
    border-radius:5px;
    padding:5px;
}
.item_info .sc_button{
    display: flex;
    flex-direction: row;
    align-content: flex-start;
    justify-content: space-between;
    align-items: center;
}

.item_info .sc_button a {
        color: #348dad;
    font-size: 17px;
    border: solid 1px #348dad;
    padding: 0.3rem 0.5rem 0.3rem 1.3rem;
    border-radius: 20px;
    display: inline-block;
    transition: .3s ease all;
    letter-spacing: 3px;
    vertical-align: middle;
    font-family: 'Noto Sans TC';
    line-height: 1.3;
}
.item_info .sc_button a img{
    padding-right: .9rem;
    vertical-align: middle;
}
.item_info .sc_button a:hover {
        background:#348dad;
        color:#fff;
    }
.item_info .sc_button a:hover img {
        -webkit-filter: invert(1);

    }
.item_info .sc_button button {
   border: none;
   display: inline-block;
   vertical-align: middle;
}
.item_info .sc_button button img:nth-of-type(2) {
   display: none;
}
.item_info .sc_button button:hover img:nth-of-type(1) {
       display: none;
    }
.item_info .sc_button button:hover img:nth-of-type(2) {
       display: inline-block;
    }

    @media screen and (max-width:1340px) {
        .item_menu .search_bar {
            width:100%;
        }
    }
     @media screen and (max-width:1200px){
.item_info .sc_button button {
    padding: 0.5em 0em;
    margin: 0;
}
    }
    @media screen and (max-width:1100px) {
        .item_menu .search_bar {
                margin-bottom: 2rem;
        }
        .item_menu {
            width:100%;
        }
        .item_list p {
            display: block;
            text-align: center;
            background: #fff;
            font-size: 18px;
            border-radius: 9px;
            position: relative;
        }
            .item_list p:after {
                content:'';
                width: 0;
                height: 0;
                border-style: solid;
                border-width: 10px 8px 0 8px;
                border-color: #232323 transparent transparent transparent;
                position:absolute;
                top:50%;
                transform:translateY(-50%);
                right:1em;
            }
        .item_list {
            padding:0;
            background: #fff;
            border: solid 1px #8e8e8e;
            border-radius: 9px;
                color: #160f0d;
        }
        .item_list ul {
            display:none;
            padding:1em 0;
        }
        .item_list li {
            /*background: #f5f5f5;*/
            padding: 0 1em .2em;
            margin-bottom: .5em;
        }
        .item_list a {
            display:block;
        }
        .pro_items {
            width: 100%;
            padding: 2em 0 3em 2em;
        }
    }
    @media screen and (max-width: 991px){
        .im_title {
    padding: 0.5em 0 3rem;
}
    }
    @media screen and (max-width:900px) {
        .pro_items {
            padding: 2em 0 3em 1em;
        }
        .product_img {
            min-height:195px;
        }
        .item_info li {
            width:100%;
            padding-right:0;
        }
        .item_info li select {
            width:22%;
        }
        .item_info li span {
            font-size:20px;
        }
        

    }
    @media screen and (max-width:768px) {
        .box_layer {
            width:48%;
            padding: 0 .3em .5em;
            min-height: 400px;
        }
        .item_info li {
            width:40%;
        }
        .item_info li select {
            width:50%;
        }
        .pro_items {
            padding: 2em 0 3em .5em;
        }
        .item_info .sc_button {
    display: block;    
    text-align: center;
}
    }
    @media screen and (max-width:620px) {
        .item_info li {
            width:100%;
        }
        .item_info li select {
            width:70px;
        }
        .item_info ul {
            padding:.1em 0;
        }
        .pro_items {
            padding:2em 0 3em 0em;
        }
    }
    @media screen and (max-width:520px) {
        .wrap3 .product_guide {
            padding: 3em 0 6em 0em;
        }
        .item_menu {
            padding-right:0;
        }
        .pro_items {
            padding: 2em 0 3em .5em;
        }
        .box_layer {
            padding: 0 0 .5em;
        }
    }
    @media screen and (max-width:470px) {
        .product_img {
            min-height: 135px;
            width: 90%;
            margin: 0 auto;
            box-shadow: none;
        }
        .item_info a {
            font-size:15px;
            width:90%;
            display: block;
            margin: .5em 0;
            text-align: center;
        }
        .item_info button {
            font-size:20px;
            padding:0 .2em;
        }       
        .item_info {
            padding: .5em 0 0;
        }
        .box {
            padding:.7em 0 0;
            overflow:hidden;
        }
        .item_info h6 {
            padding:0 .7rem;
        }
        .item_info ul {
            padding: .1rem .7rem;
        }
        .item_info button {
            font-size: 20px;
            padding: .5em .2em;
            display: block;
            width: 100%;
            margin-top: .5em;
            line-height: 1;
            color: #fff;
        }
    }
    @media screen and (max-width:380px) {
        .product_img {
            min-height: 120px;
        }
        .pro_items {
            padding: 2em 0 3em .1em;
        }
        .box_layer {
            width:49%;
        }
    }
    @media screen and (max-width:350px) {
        .box_layer {
            width:100%;
            padding: 0 .3em 1em;
            min-height: auto;
        }
        .product_img {
            min-height: 175px;
        }
    }
/***商品彈跳視窗***/
.modal-header {
    padding: 15px 15px 0 15px;
    border-bottom: none;
}
button.close {
        padding: 1rem;
    cursor: pointer;
    opacity: 1;
    border: solid 1px #000;
    font-weight: 300;
    line-height: 25px;
    font-size: 26px;
    color: #1b1b1b;
    margin: 0;
    border-radius: 50px;
    font-family: 'Noto Sans TC';
}
.fade.in {
    background:rgba(255,255,255,.72);

}
.modal-dialog {
    width:1200px;
    margin:30px auto;
    max-width:90%;
}
.modal-content{
    background: url(../../images/modal_bg.png) top left repeat;
    border: none;
    -webkit-filter: drop-shadow(7px 5px 5px rgba(16, 5, 10, 0.2));
filter: drop-shadow(7px 5px 5px rgba(16, 5, 10, 0.2));
box-shadow: none;
border-radius: 20px;
}
/***item_sliders***/
.item_sliders {
    display:inline-block;
    vertical-align:top;
    width:60%;
    padding-right:1em;
}
ul.simg li {
    float:left;
    width:16.6%;
    padding:.5em .3em;
}
/***item_detail***/
.item_detail {
    display: inline-block;
    vertical-align: top;
    width: 35%;
    padding:0 1em;
}
.item_detail h5 {
    color:#160f0d;
    font-size:28px;
    font-family: 'Noto Sans TC';
    line-height:1.5;
    padding:1em 0;
}
.item_detail h6{
    color:#160f0d;
    font-size:18px;
    font-family: 'Noto Sans TC';
    padding:0 0 6.9rem 0;
    line-height: 1.5;
    letter-spacing: 5px;

}
.item_detail ul {
    font-size:18px;
}
.item_detail li {
    color:#160f0d;
}
.item_detail li:nth-of-type(4){
    color:#348dad;
}
.item_detail p {
    color:#160f0d;
    display:inline-block;
}
.item_detail span {
    /*color:#348dad;*/
    font-size:36px;
}
.item_detail span:nth-of-type(2){
    font-size: 24px;
}
.item_detail select {
    border-radius:5px;
    padding:5px;
}
.modal-footer {
    border-top: none;
}
.modal-footer button {
    
    color: #160f0d;
    border: solid 1px #348dad;
    padding: .5em 1em;
    border-radius: 10px;
    letter-spacing: 2px;
    transition:.3s ease all;
}
.modal-footer button i{
    color: #348dad;
}
    .modal-footer button:hover, .modal-footer button:hover i {
        background:#348dad;
        color: #fff;
    }
    @media screen and (max-width:950px) {
        .item_sliders {
            width:100%;
            padding:0;
        }
        .item_detail {
            width:100%;
        }
        .item_detail h5 {
            padding:1em 0;
        }
    }
    @media screen and (max-width:500px) {
        ul.simg li {
            width: 33%;
            padding: .3em .2em 0;
        }
        .item_detail {
            padding:0;
        }
        .item_detail h5 {
            padding:1em 0 .5em;
        }
    }

/*search_mob*/
.search_mob {
    display:none;
}
.search_mob i {
}
/*search_bar*/
.search_bar {
    position: absolute;
    top: 2em;
    right: 10em;
    border: solid 2px #cacaca;
    border-radius: 50px;
    padding: .1em 1em;
}
.search_bar input[type=text] {
    border: 0;
    background: transparent;
    width: 85%;
    display: block;
        font-size: 18px;
    color: #cacaca;
}
.search_bar a {
    position: absolute;
    top: 0;
    right: 0em;
    padding: .7em 1em .2em .2em;
    width: 20%;
    text-align:right;
}
.search_bar p {
    display:none;
}
.search_bar img {
}

/*menu_btn*/
.menu_btn {
    position: absolute;
    top: 2em;
    right: 2em;
    width: 110px;
}
.menu_btn a {
    display:inline-block;
    width:47%;
    text-align:center;
    transition:.3s ease all;
}
    .menu_btn a:hover {
        opacity:.7;
    }
/***newslist_rwd2***/
.newslist_rwd2 {
    text-align: center;
    padding: 1em 0;
    display: inline-block;
    width: 95%;
    margin: 1rem;
    position: relative;

}

.newslist_rwd2:after {
    content: '';
    border: 1px #99bca6 solid;
    border-radius: 30px;
    width: 100%;
    height: 209px;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
}
.newslist_rwd2 .npic{
    width: 40%;
}
.newslist_rwd2 .ntitle {
    text-align: left;
    position: relative;
    margin: 0;
    width: 50%;
    padding: 3rem 0 0 1.6rem;
    display: inline-block;
    vertical-align: middle;
}

.newslist_rwd2 .ntitle h3 {
    font-size: 26px;
    color: #001c58;
    padding-bottom: 0;
}
.newslist_rwd2 .ntitle h3 a:nth-of-type(1){
        overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}
.newslist_rwd2 .ntitle p {
    font-size: 16px;
    color: #348dad;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    margin: 0 0 3rem;
    font-weight: 400;
    letter-spacing: 2px;
    padding-top: 4rem;
}

.newslist_rwd2 .ntitle span {
    font-size: 20px;
    color: #348dad;
    position: relative;
    z-index: 1;
}

.newslist_rwd2 .ntitle span:nth-of-type(1) {
    font-size: 14px;
    color: #99bca6;
    padding-right: 26rem;
}

.newslist_rwd2 .ntitle span:nth-of-type(2):after {
    content: '';
    position: absolute;
    background: url(../../images/more_deco01.png) top right no-repeat;
    bottom: -10px;
    right: -25px;
    width: 64px;
    height: 63px;
    z-index: -1;
}

.newslist_rwd2 a {
    position: relative;
    transition: .3s ease all;
    line-height: 1.5;
    color: #000;
        display: initial;
}

.newslist_rwd2 a:hover .ntitle span {
    color: #bcb7b3;
}

.tableimg{}
.tableimg h3{
    font-size: 26px;
    color: #001c58;
}
.tableimg p{
    font-size: 16px;
    color: #348dad;
}
.tableimg span{
    font-size: 14px;
    color: #99bca6;
}

/*npic*/
.npic {
    position: relative;
    width: 390px;
    min-height: 261px;
    transition: .3s ease all;
    display: inline-block;
    vertical-align: top;
    max-width: 100%;
}

.npicimg {
    position: absolute;
    top: 3%;
    left: 2%;
    width: 92%;
    height: 100%;
}

.newslist_rwd a:hover .npic {
    transform: translateY(-5px);
}

.newslist_rwd2 a:hover .npic {
    transform: translateY(-5px);
}



/*page_num*/
.page_num {
    padding: 1em 0;
}

.page_num a {
    display: inline-block;
}

.inews .page_num {
    display: none;
}

@media (max-width:1200px) {

    .newslist_rwd2 .ntitle span:nth-of-type(1) {
    padding-right: 19rem;
}
}

@media (max-width:1024px) {


    .npic {
        min-height: 285px;
    }

    .newslist_rwd2 {
        width: 98%;
    }

    .newslist_rwd2 .npic {
        width: 40%;
    }

    .ntitle {
        width: 57%;
    }
}

@media (max-width:991px) {
    .newslist_rwd2 .ntitle {
        width: 56%;
        padding: 2rem 0 0 1.6rem;
    }

    .newslist_rwd2 {
        padding: 2em 0;
        margin: 0.5rem;
    }

    .newslist_rwd2:after {
        height: 203px;
        bottom: 0rem;
    }
    .newslist_rwd2 .ntitle span:nth-of-type(1) {
    padding-right: 4rem;
}

    .ntitle {
        width: 100%;
    }

}

@media (max-width:900px) {
    .npic {
        min-height: 245px;
    }
}

@media (max-width:768px) {
    

   
}

@media (max-width:650px) {
    .npic {
        min-height: 280px;
        width: 100%;
    }

    .newslist {
        margin: 0;
    }


    .ntitle {
        width: 100%;
        padding: 1em 0 0 0em;
    }

    .ntitle p {
        margin: 1em 0 .5em;
    }
    .newslist_rwd2 .ntitle {
    width: 85%;
}
    .newslist_rwd2:after {
        border:none;
}
    .newslist_rwd2 .npic {
    width: 100%;
}
}

@media (max-width:500px) {
    .npic {
        min-height: 210px;
    }
    .newslist {
    padding: 2rem 2rem 0;
    left: 0;
}

    .ntitle b,
    .ntitle span {
        font-size: 15px;
    }
    .newslist_rwd2 {
        padding: 1em 0;
        width: 100%;
    }

    .newslist_rwd2 .ntitle p {
        font-size: 22px;
        padding-top: 4rem;
            margin-bottom: 3rem;
    }
}

@media (max-width:450px) {
  
    .newslist {
    padding: 2rem 1rem 0;
}
    .newslist_rwd2 {
    width: 95%;
    margin-bottom: 3rem;
}
    

    .newslist_rwd2 .ntitle span:nth-of-type(1) {
        padding-right: 9rem;
    }
    .newslist_rwd2 .ntitle {
    width: 100%;
    padding: 2rem 1rem;
}
.npicimg {
        left: 0;
        width: 100%;
        height: 100%;
	    background-position: center;
    }
}
@media (max-width: 390px){
.newslist_rwd2 .ntitle span:nth-of-type(1) {
    padding-right: 5rem;
}

}
@media (max-width:350px) {
   
    .newslist_rwd2 .ntitle {
        width: 100%;
        padding: 2rem 0 0 1.6rem;
    }

    .newslist_rwd2 .ntitle span:nth-of-type(1) {
        padding-right: 1rem;
    }
    .npicimg {
    left: -10%;
    width: 108%;
}

}

button,
html input[type=button],
input[type=reset],
input[type=submit] {
    -webkit-appearance: button;
    cursor: pointer;
    background: transparent;
    border: solid 2px #c2bdb9;
    border-radius: 2px;
    color: #464341;
    padding: .5em 1em;
    margin: .5em;
    transition: .3s ease all;
    letter-spacing: 2px;
    font-weight: 400;
}

button:hover,
html input[type=button]:hover,
input[type=reset]:hover,
input[type=submit]:hover {
    border-radius: 20px;
}


a.shopping{
    width: 20%;
    margin: 0 auto;
    background: #099;
    color: #fff;
    border: 0px;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 0 0 rgb(0 0 0 / 0%);
    transition: all 0.5s;
}
a.shopping:hover{
        background: #033;
}

.carttxt{    
    border-top: 2px solid #999;
    padding-top: 1rem;
}
.carttxt p{
    font-size: 16px;
    width: 30%;
    margin: 0 auto;
}
@media screen and (max-width:768px){
	.carttxt p {
    width: 90%;
}
a.shopping {
    width: 40%;
}
}
@media screen and (max-width:px){}