@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);

/* vietnamese */

@font-face {

  font-family: 'Muli';

  font-style: normal;

  font-weight: 400;

  src: url(../webfonts/muli.woff2) format('woff2');

  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;

}

/* latin-ext */

@font-face {

  font-family: 'Muli';

  font-style: normal;

  font-weight: 400;

  src: url(../webfonts/muli.woff2) format('woff2');

  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;

}

/* latin */

@font-face {

  font-family: 'Muli';

  font-style: normal;

  font-weight: 400;

  src: url(../webfonts/muli.woff2) format('woff2');

  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;

}



@font-face {

  font-family: 'Century Gothic';

  font-style: normal;

  font-weight: 400;

  src: url(../webfonts/CenturyGothic.ttf) format('ttf');

}



html, button, input, select, textarea,.pure-g [class *= "pure-u"] {

font-family: 'Century Gothic','Muli','Noto Sans TC',arial;

}



body{

  text-align: center;

  position: relative;

}



p{

    font-size: 14pt;

    line-height: 32pt;

    color:#727171;

}



h2{

    color: #009CA4;

    font-size: 22pt;

    letter-spacing: 2px;

    padding-top: 60px;

    font-weight: 500;

    position: relative;

    z-index: 20;

}



h3{

    color:#9FA0A0;

    font-weight: 500;

    font-size: 18pt;

    letter-spacing: 2px;

    padding: 10px 0;

    position: relative;

    z-index: 20;

}





h4{

    color: #A81E2E;

    font-weight: 600;

    font-size: 25pt;

    letter-spacing: 4pt;

    padding: 70px 0 40px 0;

    font-family: 'Noto Sans TC';

}



h5{

    color: #A81E2E;

    font-weight: 500;

    font-size: 25pt;

    letter-spacing: 4pt;

    padding: 25px 0 23px 0;

    border-top: 4px solid #A81E2E;

    border-bottom: 4px solid #A81E2E;

    font-family: 'Noto Sans TC';

}







a{

    text-decoration: none;

    outline: 0;

}



.inline-block-reduce{

    margin-right: -4px;

    margin-left: -2px;

}



@media(max-width: 568px){

  h5 {

    line-height: 32pt;

}



  h4 {

    line-height: 36pt;

}

}

.index-slide-box{

  position: relative;

  overflow: hidden;

}



.slider-bottom{

    position: absolute;

    width: 100%;

    bottom: -2px;

}



.sider-bottom-pic{

    width: 100%;

    z-index: 1;

    position: relative;

}



@media(max-width: 767px){

    .index-slide-box{

      top:55px;

      margin-bottom: 55px;

}

}



.no-js #loader { display: none;  }

.js #loader { display: block; position: absolute; left: 100px; top: 0; }

.loading-box {

    overflow: hidden;

    position: fixed;

    left: 0px;

    top: 0px;

    width: 100%;

    height: 100%;

    z-index: 9999;

    background: linear-gradient(100deg, #002fa4, #31c4e7);

    background-size: auto;

    background-position: 50% 50%;

}



.loading-box section{

    display: flex;

    justify-content: center;

    align-items: center;

    height: 100%;

}



.loader-2 {

  width: 90px;

  height: 90px;

  border: 3px solid #FFF;

  border-radius: 50%;

  display: inline-block;

  position: relative;

  -webkit-animation: rotation 1s linear infinite;

  animation: rotation 1s linear infinite;

}

.loader-2:after {

  content: "";

  position: absolute;

  left: 50%;

  top: 50%;

  transform: translate(-50%, -58%);

  width: 60px;

  height: 65px;

  border-radius: 50%;

  border: 5px solid transparent;

  border-bottom-color: #8dd2ff;

}



/* keyFrames */

@-webkit-keyframes rotation {

  0% {

    transform: rotate(0deg);

  }

  100% {

    transform: rotate(360deg);

  }

}

@keyframes rotation {

  0% {

    transform: rotate(0deg);

  }

  100% {

    transform: rotate(360deg);

  }

}



.gototop {

    display: none;

    -webkit-animation: hide 350ms ease-out forwards 1;

    animation: hide 350ms ease-out forwards 1;

    border: 0;

    text-align: center;

    background-color: #ffffff;

    border: 1px solid #0b308e;

    width: 50px;

    height: 50px;

    border-radius: 33px;

    position: fixed;

    bottom: 60px;

    right: 55px;

    -webkit-transition: background-color 100ms ease-in-out;

    transition: background-color 100ms ease-in-out;

    z-index: 100;

    transition: 1s;

}



.gototop:hover {

    background: #fff;

    border: 1px solid #1f8dd6;

}



.gototop-pic{

  width:20px;

}



.gototop-pic polygon{

  fill: #0b308e;

  width:25px;

  transition: 1s;

  -webkit-transition: 1s;

  -o-transition: 1s;

}



.gototop:hover .gototop-pic polygon{

  fill:#1f8dd6;

}



@media(max-width: 1280px){

    .gototop {

    width: 70px;

    height: 50px;

    border-radius: 33px;

    position: fixed;

    bottom: 20px;

    right: -28px;

    padding-right: 20px;

}



.gototop .gototop-pic{

    width:60%;

}

}



.gototop:focus {

    outline: none;

}





.isvisible {

    -webkit-animation: show 1s ease-out forwards 1;

    animation: show 1s ease-out forwards 1;

}



@-webkit-keyframes hide{

  0% {

    opacity: 1;

    -webkit-transform:translateY(0);

  }

  25%{

    opacity: .5;

    -webkit-transform: rotate(0deg) translateY(0px);

  }

  75%{

    -webkit-transform: rotate(0deg);

  }

  100%{

    opacity: 0;

    -webkit-transform:translateY(100px);

  }

}

@keyframes hide{

  0% {

    opacity: 1;

    transform:translateY(0);

  }

  25%{

    opacity: .5;

    transform: rotate(0deg) translateY(0px);

  }

  75%{

    transform: rotate(0deg);

  }

  100%{

    opacity: 0;

    transform:translateY(100px);

  }

}



@-webkit-keyframes show{

  0% {

    -webkit-transform: rotate(0deg);

  }

  25%{

    opacity: .5;

    -webkit-transform: rotate(0deg) translateY(0px);

  }

  75%{

    -webkit-transform: rotate(0deg);

  }

  100%{

    opacity: 1;

    -webkit-transform: rotate(0deg);

  }

}



@keyframes show{

  0% {

    transform: rotate(0deg);

  }

  25%{

    opacity: .5;

    transform: rotate(0deg) translateY(0px);

  }

  75%{

    transform: rotate(0deg);

  }

  100%{

    opacity: 1;

    transform: rotate(0deg);

  }

}



.footer{

  background: #fff;

  width:100%;

  color:#4d4d4d;

  font-weight: 300;

  text-align: center;

  z-index: 99;

  position: relative;

  padding: 55px 24% 55px 24%;

  border-top: 1px solid #6663;

}



.footer-logo{

    display: inline-block;

    vertical-align: middle;

    margin-left: -4px;

}



.footer-logo img{

    width: 100%;

    /* max-width: 240px; */

    margin-top: 5px;

}



.footer-info{

    text-align: left;

    display: inline-block;

    vertical-align: middle;

    margin-left: -4px;

    padding-left: 4%;

}



.footer-add{

    font-size: 13pt;

    letter-spacing: 1pt;

    margin-bottom: 5px;

    font-weight: 500;

}



.footer-tel{

    font-size: 13pt;

    font-weight: 500;

    letter-spacing: 1pt;

}



.footer-tel span {

    float: left;

    margin-right: 10px;

}



.copyright, .page-bottom .jc-info{

  display: inline-block;

}



.footer-copyright{

    padding: 10px 0 0 0;

    margin-top: 10px;

    letter-spacing: 1px;

    font-size: 12pt;

    font-weight: 500;

    border-top: 1px solid #4d4d4d;

    text-align: center;

    color:#4d4d4d;

}



.jc-info{

  display: inline-block;

}



.jc-info a{

  color: #4d4d4d;

  transition: .5s;

    -webkit-transition: .5s;

    -o-transition: .5s;

}



.jc-info a:hover{

  color: #3165e7;

}



.jc-icon{

  height: 20px;

  width: 20px;

  display: initial;

  vertical-align: sub;

  margin-left: 20px;

}



@media(max-width: 1440px){

.footer{

  padding: 40px 18% 60px 18%;

}



}



@media(max-width: 1280px){



.footer-logo img {

        width: 100%;

        /* max-width: 240px; */

        padding: 15px;

}



}



@media(max-width: 1024px){



.footer {

    padding: 40px 13% 60px 13%;

}



.footer-tel span{

    width: 100%;

    text-align: center;

}



.footer-logo {

    display: inline-block;

    vertical-align: middle;

    width: 100%;

    margin-left: -4px;

}



.footer-info {

    text-align: center;

    display: inline-block;

    vertical-align: top;

    width: 100%;

    margin-left: 0;

    padding-right: 0;

    padding-left: 0;

    margin: 10px 0 0 0;

}



.foot-add {

    padding-right: 0;

}

}







@media(max-width: 768px){

  .jc-icon{

  margin-left: 0;

}



}



@media(max-width: 568px){



.footer {

    padding: 40px 7% 60px 7%;

}



}

.index-news-box{

    width: 100%;

    background: url(../img/index-intro-bg.jpg) no-repeat;

    background-size: cover;

}



.index-news-box img{

    width: 100%;

    padding: 5px 2.5px 5px 2.5px;

}



.index-news-box .news-img:first-child img{

    padding-right: 2.5px;

}



.index-news-box .news-img:last-child img{

    padding-left: 2.5px;

}



.index-news-box .news-img{

    background: #fff;

    transition: .3s ease;

}



.index-news-box .news-img:hover{

    opacity: .8;

    transition: .3s ease;

}



.index-news-box .news-img a{

    display: block;

}





.index-product-box{

    background: url(../img/index-intro-bg.jpg) no-repeat;

    background-size: cover;

    background-position: bottom;

    padding: 100px 0;

    overflow: hidden;

}



.index-product-title{

    color: #fff;

    font-size: 28pt;

    letter-spacing: 1pt;

    margin: 5px 0 100px 0;

}



.title-icon{

    margin-right: 5px;

    position: relative;

    top: 3px;

}



.index-product-slider{

    margin: 10px 5%;

}



.product-slider-item{

    margin-bottom: 50px;

    padding: 0 8%;

}



.product-list-pic{

    background-size: cover;

    background-position: 50%;

    background-repeat: no-repeat;

    opacity: 1;

    transition: .5s;

}



.product-list-pic img{

    width: 100%;

}



.product-list-pic:hover{

    opacity: 0.8;

}



.flex-title{

    display: flex;

    justify-content: space-between;

}



.product-list-name{

    color: #fff;

    font-size: 18px;

    letter-spacing: 1pt;

    margin: 15px 0;

    transition: .5s;

}



.product-list-name.text-dark{

    color: #000;

}



.product-list-name:hover{

    color: #bc9861;

}



.product-list-content{

    color: #727171;

    font-size: 14pt;

    letter-spacing: 1px;

}



.product-list-price{

    color: #c19d5c;

    font-size: 25px;

    font-weight: 600;

    letter-spacing: 1pt;

    margin: 15px 0 25px 0;
}



.clearfix{

    clear: both;

}



.content-wrapper{

    overflow: hidden;

}



.product-list-btn-box{



    display: flex;

    justify-content: space-between;

    width: 100%;

}



.btn-green{

    background: #3165e7;

    border-radius: 5px;

    color: #fff;

    width: 100%;

    font-size: 12pt;

    letter-spacing: 1pt;

    font-weight: 300;

    padding: 4px 15px;

    line-height: 1.5;

    border:1pt solid transparent;

    box-sizing: border-box;

    transition: .5s;

    text-align: center;

    outline: 0!important;

}



.shop-btn-step .btn-green,

.shop-btn-step .btn-brown{

  width: auto;

}



.btn-green:hover{

    background: #fff;

    color: #1f8dd6;

    border: 1pt solid #1f8dd6;

}



.btn-brown{

    background: #c31919;

    border-radius: 5px;

    color: #fff;

    width: 100%;

    font-size: 12pt;

    letter-spacing: 1pt;

    font-weight: 300;

    padding: 4px 20px;

    line-height: 1.5;

    border:1pt solid transparent;

    box-sizing: border-box;

    transition: .5s;

    text-align: center;

    outline: 0!important;

}



.btn-brown:hover{

    background: #fff;

    color: #c31919;

    border: 1pt solid #c31919;

}



.btn-black{

    display: inline-block;

    background: #202020;

    border-radius: 5px;

    color: #fff;

    width: 100%;

    font-size: 12pt;

    letter-spacing: 1pt;

    font-weight: 300;

    padding: 4px 0;

    border:1pt solid transparent;

    box-sizing: border-box;

    transition: .5s;

    max-width: 170px;

    text-align: center;

}



.btn-black:hover{

    background: #fff;

    color: #202020;

    border: 1pt solid #202020;

}



.product-list .btn-green,

.product-list .btn-brown{

    max-width: 100%;

    padding: 4px 0;

}





@media(max-width: 1024px){

    .index-news-box {

        margin-bottom: 20px;

    }



    .btn-green,.btn-brown{

        max-width: 130px;

        margin-bottom: 10px;

        padding: 4px 0;

    }



    .shop-btn-step .btn-green,.shop-btn-step .btn-brown{

        padding: 5px 15px;

    }



    .products-setting .btn-green{

        padding: 4px 15px;

    }

}



@media(max-width: 768px){

    .index-product-title {

        font-size: 18pt;

        letter-spacing: 1pt;

        margin: 30px 0 30px 0;

    }



    .index-product-box{

        padding: 20px 0;

    }



    .btn-green,.btn-brown{

        margin: 10px 0;        

        display: block;

    }



}



@media(max-width: 568px){

    .product-slider-item {

        padding: 0 10%;

    }

    .index-news-box img {

        padding: 2px 0px;

    }



    .index-news-box .news-img:first-child img{

        padding-right: 0;

        padding-bottom: 0;

    }



    .index-news-box .news-img:last-child img{

        padding-left: 0;

        padding-top: 0;

    }





}



.index-info{

    margin-top: 20px;

}



.index-intro-box{

    height: 700px;

    display: flex;

    align-items: center;

}



.index-intro{

    text-align: left;

    display: block;

    width: 45%;

    padding: 0 0 0 15%;

    /* margin-right: auto; */

}



.index-intro-title{

    font-size: 28px;

    color: #fff;

    /* font-weight: 600; */

    margin-bottom: 10px;

    line-height: 32pt;

}



.index-intro-content{

    font-size: 16px;

    color: #fff;

    line-height: 23pt;

    letter-spacing: 1px;

    margin-bottom: 30px;

}



.index-connect-box{



}



.index-connect-pic{

    height: 300px;

    background-size: cover;

    background-position: 50%;

}



.index-connect-pic img{

    width: 100%;

}



.index-connect-box-brown{

    height:300px;

    background: url(../img/index-connect-bg.png) #7ab52b repeat 50%;

    transition: .5s;

}



.index-connect-box-green{

    height:300px;

    background: url(../img/index-connect-bg.png) #006837 repeat 50%;

    transition: .5s;

}



.index-connect-box-brown:hover{

    background-color: #659425;

}



.index-connect-box-green:hover{

    background-color: #024a28;

}



.index-connect-icon img{

    width: 80%;

    max-width: 90px;

    margin-top: 65px;

}



.index-connect-twname{

    color: #ffffff;

    font-size: 22pt;

    letter-spacing: 1pt;

    font-weight: 500;

    margin: 15px 0 5px 0;

}



.index-connect-enname{

    color: #fff;

    font-size: 13pt;

    letter-spacing: 1pt;

}



@media(max-width: 1023px){

    .index-intro-box{

    height: auto;

}

}



@media(max-width: 768px){

    .index-connect-icon img{

    width: 60%;

}

}



@media(max-width: 568px){



.index-connect-pic{

    height: 240px;

}



.index-connect-box-green {

    height: 240px;

}



.index-connect-box-brown {

    height: 240px;

}



.index-connect-icon img {

    max-width: 85px;

    margin-top: 40px;

}



.index-connect-twname {

    font-size: 20pt;

    margin: 10px 0 5px 0;

}

}



.index-bottom-box{

    position: relative;

    height: 40vh;

}



.index-bottom{

    background-image: url(../img/index-bottom-bg.jpg);

    background-size: cover;

    background-position: center center;

    position: absolute;

    top: 0;

    bottom: 0;

    left: 0;

    right: 0;

    margin: auto;

}



.index-bottom img{

    width: 63%;

    max-width: 700px;

    vertical-align: middle;

}



.index-bottom-word{

    color: #fff;

    display: inline-block;

    vertical-align: middle;

}



.index-bottom-title{

    font-size: 26pt;

    font-weight: 300;

    letter-spacing: 1.8pt;

    margin-bottom: 10px;

}



.index-bottom-content{

    font-size: 13pt;

    letter-spacing: 1px;

    font-weight: 200;

}



@media(max-width: 1024px){

    .index-bottom-word{

    display: block;

    margin-top:30px;

}

}



@media(max-width: 568px){

.index-bottom img {

    width: 75%;

}



.index-bottom-title {

    font-size: 18pt;

}



.index-bottom-content {

    padding: 0 8%;

}



}



.page-banner{

    background-position: 50%;

    position: relative;

    height: 55vh;

    margin-top: 80px;

}



.page-banner .banner-img-bg{

  position: absolute;

  bottom: 0;

  left: 50%;

  width: 100%;

  transform: translate(-50%, 40%);

  display: block;

  z-index: 15;

}



.page-banner-title-box{

    height: 100px;

    position: absolute;

    top: 0;

    bottom: 0;

    right: 0;

    left: 0;

    margin: auto;

}



.page-banner-title-en{

    color: #fff;

    font-size: 26pt;

    font-weight: 600;

    letter-spacing: 1pt;

    text-align: center;

    line-height: 1.8;

}



.page-banner-title-tw{

    color: #fff;

    font-size: 16pt;

    letter-spacing: 1pt;

    font-weight: 500;

    text-align: center;

    line-height: 1.5;

}



@media(max-width: 1024px){



.page-banner {

    margin-top: 50px;

    height: 45vh;

}



}





@media(max-width: 768px){



.page-banner-pic img{

    width: 80%;



}



.page-banner {

    margin-top: 50px;

}



.page-banner{

    height: 35vh;

}



}



.breadcrumbs{

    text-align: left;

    padding: 35px 10px 100px 10px;

    width: 100%;

}



.breadcrumbs-name{

    display: inline-block;

    font-size: 12pt;

    color: #000;

    letter-spacing: 2pt;

    transition: .5s;

    -webkit-transition: .5s;

    -o-transition: .5s;

}



.breadcrumbs-name-active{

    display: inline-block;

    font-size: 12pt;

    color: #3165e7;

    letter-spacing: 2pt;

    transition: .5s;

    -webkit-transition: .5s;

    -o-transition: .5s;

}



.breadcrumbs-name:hover{

    color: #949494;

}



.breadcrumbs-name-active:hover{

    color: #85a0e4;

}



.breadcrumbs-arrow{

    display: inline-block;

    color: #000;

    font-size: 12pt;

    line-height: 20pt;

    position: relative;

    top: 0px;

    margin: 0px 5px;

    font-weight: 500;

    font-family: 'Noto Sans TC';

}



@media (max-width: 768px){

    .breadcrumbs {

        padding: 15px 10px 30px 10px;

    }

}





.about-content{

    max-width: 1200px;

    margin: 0 auto;

    margin-bottom: 100px;

}



.content-btm{

    margin-top: 60px;

}



.about-content img{

    width:100%;

}



.about-content .about-float-left{

    color: #898989;

    font-size: 15pt;

    line-height: 32pt;

    letter-spacing: 1pt;

}



.about-content .about-float-right{

    color: #464646;

    font-size: 17px;

    line-height: 1.8;

    letter-spacing: 1px;

    text-align: left;

}



.about-content img.about-logo{

    width: 80%;

    max-width: 200px;

    display: block;

    margin: 4% auto;

}



.about-content-title01{

    display: block;

    font-size: 15pt;

    color: #000;

    font-weight: 700;

    margin-top: 10%;

}



.about-content-title02{

    display: block;

    color: #006934;

    font-size: 22pt;

    letter-spacing: 1pt;

    font-weight: 600;

    margin: 10px 0 20px 0;

}



@media(max-width: 1280px){

.about-content img.about-logo{

    width: 80%;

    max-width: 200px;

    display: block;

    margin: 0 auto;

}

.about-content-title01{

    display: block;

    font-size: 15pt;

    color: #000;

    font-weight: 700;

    margin-top: 3%;

    

}

}



@media(max-width: 1023px){

.about-content .about-float-left{

    float: none;

    padding-left: 0;

}



.about-content .about-float-right{

    float: none;

    padding-left: 0;

}

}



@media (max-width: 768px){

    .about-content .about-float-right{

        padding-top: 30px;

    }



    .about-content{

        margin: 60px 0;

    }



}

.product-list{

    text-align: left;

}



@media(min-width: 1024px){

    .product-list div.product-list-item {

    text-align: center;

    padding: 0 10px;

    margin-bottom: 70px;

}



.product-list div.product-list-item:nth-of-type(3n+1) {

    text-align: center;

    padding: 0 20px 0 0;

}



.product-list div.product-list-item:nth-of-type(3n) {

    text-align: center;

    padding: 0 0 0 20px;

}

}



@media (max-width: 768px){

    .content-btm{

        margin-top: 30px;

    }

}



.page-select{

    text-align: center;

    position: relative;

    z-index: 21;

    padding: 40px 30px;

    display: inline-block;

}



.page-select-arrow-prev{

    display: inline-block;

    vertical-align: middle;

    text-align: right;

    width: 10px;

    position: absolute;

    left: 0;

    top: 40%;

    -webkit-transition: .5s;

    -o-transition: .5s;

}



.page-select-arrow-next{

    display: inline-block;

    vertical-align: middle;

    text-align: left;

    width: 10px;

    position: absolute;

    right: 0;

    top: 40%;

    -webkit-transition: .5s;

    -o-transition: .5s;

}



.page-select-arrow-prev:hover{

    left: -5px;

}



.page-select-arrow-next:hover{

    right: -5px;

}



.page-select-arrow-icon{

    width: 10px;

    height: 18px;

    transition: .5s;

    -webkit-transition: .5s;

    -o-transition: .5s;

}



.page-select-arrow-icon polygon{

    fill: #3165e7;

    transition: .8s;

    -webkit-transition: .8s;

    -o-transition: .8s;

}



.page-select-arrow-icon:hover polygon{

    fill:#2852bc;

}



.page-select-icon{

    width: 30px;

    height: 30px;

    display: inline-block;

    margin: 0 8px;

    vertical-align: middle;

    border: 1px solid #3165e7;

    border-radius: 5px;

    background: transparent;

    transition: .8s;

    -webkit-transition: .8s;

    -o-transition: .8s;

}



.page-select-icon:hover{

    background: #3165e7;

}



.page-select-icon-act{

    width: 30px;

    height: 30px;

    display: inline-block;

    margin: 0 8px;

    vertical-align: middle;

    border: 1px solid #3165e7;

    border-radius: 5px;

    background: #3165e7;

}



.page-select-icon span{

  color: #3165e7;

  font-size: 16px;

  line-height: 26px;

  font-weight: 600;

  transition: .8s;

  -webkit-transition: .8s;

  -o-transition: .8s;

}



.page-select-icon:hover span{

  color: #fff;

}



.page-select-icon-act span{

    color: #fff;

    font-size: 16px;

    line-height: 26px;

    font-weight: 600;

}



.ctr-width{

    max-width: 1200px;

    margin: auto;

    padding: 0 30px;

}

.side_menu {

  margin-bottom: 50px;

}



.side_menu li {

  position: relative;

  border-bottom: 1px solid #aaa;

}



.side_menu li:last-child {

    border-bottom: 1px solid #aaa;

}



.side_menu li>a {

  display: block;

  padding: 15px;

  font-size: 17px;

  color: #434343;

  letter-spacing: .05em;

}



.side_menu li>a.current,

.side_menu li>a:hover {

  color: #fff;

}



.side_menu dl {

  display: none;

  padding-left: 8px;

}



.side_menu dl.active{

    display: block;

}



.side_menu li dl a {

  display: block;

  padding: 5px 15px;

  font-size: 16px;

}



.side_menu li dl a.current {

  color: #87a9ff;

}



.side_menu li dl a:hover {

  color: #87a9ff;

}



.m_classLink{

  display:none;

  text-align: center;

  margin-bottom: 30px;

}



.sideLink{

  display: block;

}  



.left-menu-box .menu-title{

  color: #000;

  font-size: 18px;

  text-align: left;

  padding: 10px;

  padding-left: 20px;

  padding-top: 0;

  margin-bottom: 20px;

  letter-spacing: 1px;

  border-bottom:1px solid #aaa;

  position: relative;

}



.left-menu-box .menu-title:after{

  content: '';

  display: block;

  width: 6px;

  height: 6px;

  border-radius: 50%;

  background: #000;

  position: absolute;

  left: 5px;

  top: 12px;

}



.left-menu-box li a{

  outline: 0;

  position: relative;

  display: block;

  text-align: left;

  line-height: 1.5;

  color: #6d6d6d;

  letter-spacing: 1px;

  padding: 10px 0;

  padding-right: 30px;

  transition: .3s ease;

}



.left-menu-box li a.current{

  color: #3165e7;

}



.left-menu-box li a.click-menu:after{

  content: '\f107';

  display: inline-block;

  position: absolute;

  top: 10px;

  right: 10px;

  font-family: Font Awesome\ 5 Free;

  font-weight: 900;

}



.left-menu-box li a:hover{

  color: #3165e7;

  transition: .3s ease;

}



.product-list{

    padding-left: 30px;

}





ul.sideLink dl {

display: none;

}



ul.sideLink dl.current {

display: block;

}





/*640*/

@media (max-width: 640px){



  ul.sideLink{

    display:none;

  }



  .m_classLink{

    display:block;

    position:relative;

  }



  .m_classLink a.main{

    display: block;

    font-size: 18px;

    text-align: center;

    color: #ffffff;

    border: 1px solid #006837;

    position: relative;

    padding: 10px;

    background: #006837;

  }



  .m_classLink a.main b{

    font-weight: 300;

  }



  .m_classLink a.main i{

    display:block;

    font-size:15px;  

    position:absolute;

    right:10px;

    top:50%;

    margin-top:-6px;

  }



  .m_classLink ul{

    padding:0;

    list-style:none;  

    display:none;

    width:100%;

    background:#FFF;

    border:1px solid #d1d1d1;

    position:absolute;

    left:0;

    top:100%;

    z-index:99;  

    box-sizing:border-box;

  }



  .m_classLink ul li{

    padding:0;

  }



  .m_classLink ul li a{

    display:block;

    color:#000;

    padding: 15px;

    opacity: 1;

  }



  .m_classLink ul li:first-child a{

    border:none;

  }



  .left-menu-box .menu-title{

    display: none;

  }



  .product-list {

    padding-left:0;

  }





  ul.sideLink {

    max-height: 400px;

    overflow-y: auto;

  }



  ul.sideLink li > a::after {

    content: '\f107';

    position: absolute;

    right: 7px;

    top: 11px;

    font-family: Font Awesome\ 5 Free;

    font-weight: 900;

    font-size: 17px;

    transition: all .5s;

  }



  ul.sideLink li > a.current::after {

    transform: scaleY(-1);

  }





}







@media(max-width: 1023px) and (min-width: 768px){

.product-list div.product-list-item {

    text-align: center;

    padding: 0 10px 0 0;

    margin-bottom: 50px;

}



.product-list div.product-list-item:nth-of-type(2n) {

    text-align: center;

    padding: 0 0 0 10px;

}



}







@media(min-width: 769px){

    div.product-type-m{

    display: none;

}

}



@media(max-width: 768px){

    div.product-type{

    display: none;

}

}



@media(max-width: 767px){

.product-list div.product-list-item {

    text-align: center;

    margin-top: 50px;

    padding: 0;

}



}



@media(max-width: 568px){



.content-product{

  padding: 40px 0 0 0;

}



.page-select-icon{

    width: 30px;

    height: 30px;

    margin: 4px 2px;

}



.page-select-icon-act{

    width: 30px;

    height: 30px;

    margin: 0 2px;

}



.page-select-icon span {

    line-height: 26px;

}



.page-select-icon-act span {

    line-height: 26px;

}



}

.explore-detail{

    text-align: left;

    margin-bottom: 120px;

}



.explore-pic{

    background-size: cover;

    background-position: 50%;

    background-color: #000;

}



.explore-detail .explore-pic{

    margin-top:20px;

    margin-bottom: 30px;

}



.explore-pic img{

    width:100%;

}



.explore-time{

    display: block;

    color:#666;

    font-size: 14px;

    margin: 10px 0;

    text-align: left;

    letter-spacing: 1px;

}



.explore-title{

    color:#000;

    font-size: 25px;

    margin-bottom: 20px;

    font-weight: 500;

    letter-spacing: 1px;

}



.explore-content-intro{

    color:#000;

    margin-top:10px;

    line-height: 20pt;

    text-align: left;

}



.explore-content-intro img{

    width: 100%;

    height: auto;

}



.explore-content-intro p{

    color:#000;

    margin:30px 0;

    line-height: 1.8;

    text-align: left;

    font-size: 16px;

    letter-spacing: 1px;

    clear:both;

}



.product-detail-slide-box{

    

}



.product-detail-slide-box .flex-viewport, .product-detail-slide-box .flex-viewport li img{

  border-radius: 0;

  width: 100%;

}



.product-detail-slide-box #product-detail-slider .flex-viewport li img{

  border: 0;

}



.product-detail-slide-box #product-detail-carousel .flex-viewport li img{

    border: 0;

}



#product-detail-carousel .flex-viewport li {



}



#product-detail-carousel .flex-viewport li img{

  cursor: pointer;

  opacity: 0.6;

  width: 100%;

  float: left;

}





#product-detail-carousel .flex-viewport li img:hover{

  opacity: 1;

}



#product-detail-slider{



}



#product-detail-carousel{

  background: none;

  margin-top: 20px;

}



@media(max-width:768px){

  .product-detail-slide-box {

    margin-right: 0;

}



.explore-detail{

    margin-bottom: 60px;

}



}



.product-detail-info-box{

    padding-left: 40px;

}



.products-fav-icon {

    width: 60px;

    height: 35px;

    z-index: 10;

    position: absolute;

    right: 0;

    top: -4px;

}



.products-fav-btn-icon {

    width: 60px;

    height: 35px;

}



.products-fav-icon .products-fav-btn-icon path{

  transition: 1s;

  -webkit-transition: 1s;

  -o-transition: 1s;

  fill: #9e9e9f;

}



.products-fav-icon:hover .products-fav-btn-icon path{

    fill: #c30d23;

}



.product-detail-title{

    font-size: 18pt;

    color: #000;

    text-align: left;

    margin: 0 40px 3px 0;

    letter-spacing: 2px;

    line-height: 20pt;

    font-weight: 600;

}



.product-detail-intro{

    color: #717071;

    text-align: left;

    font-size: 16px;

    letter-spacing: 1px;

    line-height: 1.8;

    padding-bottom: 25px;

    padding-top: 20px;

}



.product-detail-reserve{

    color: #595757;

    text-align: left;

}



.product-detail-reserve-enough{

  color: #648c0f;

  font-size: 13pt;

  margin-left: 20px;

  display: inline-block;

}



.product-detail-reserve-maybe{

  color: #ef8c00;

  font-size: 13pt;

  margin-left: 20px;

  display: inline-block;

}



.product-detail-reserve-none{

  color: #EE7E8F;

  font-size: 13pt;

  margin-left: 20px;

  display: inline-block;

}



.product-detail-price{

    text-align: left;

    margin: 50px 0 50px 0;

    color: #c31919;

    font-size: 24pt;

    font-weight: 800;

}



.product-detail-number{

    text-align: left;

}



.product-detail-number-name{

    display: inline-block;

    color: #000;

    font-size: 14pt;

    margin-right: 10px;

    vertical-align: middle;

}



.product-detail-number .wan-spinner{

   display: inline-block;

}



.product-detail-number .wan-spinner input{

  width: 24%;

    border-radius: 5px;

    border: 1px solid #595757;

    vertical-align: middle;

    text-align: center;

    height: 40px;

    font-size: 14pt;

    font-weight: 800;

}



.wan-spinner .minus, .wan-spinner .plus{

  background: #3165e7;

  color: #fff;

  font-weight: 500;

  width: 30px;

  display: inline-block;

  border-radius: 35px;

  font-size: 18pt;

  height: 30px;

  transition: .5s;

  -webkit-transition: .5s;

  -o-transition: .5s;

  text-align: center;

  vertical-align: middle;

  line-height: 30px;

}



.wan-spinner .minus:hover, .wan-spinner .plus:hover{

  background: #6c89d3;

}



.product-detail-btn{

  text-align: left;

  margin: 50px 0 0 0;

}



.products-addcart-btn{

    display: inline-block;

    background: #f58411;

    border-radius: 5px;

    color: #fff;

    width: calc(48% - 4px);

    font-size: 14pt;

    letter-spacing: 1pt;

    font-weight: 300;

    padding: 10px 0;

    border: 1pt solid transparent;

    box-sizing: border-box;

    transition: .5s;

    text-align: center;

    margin-right: 2%;

}



.products-addcart-btn:hover{

  background: #fff;

    color: #f58411;

    border:1pt solid #f58411;

}



.products-buy-btn{

    display: inline-block;

    background: #c31919;

    border-radius: 5px;

    color: #fff;

    width: calc(48% - 4px);

    font-size: 14pt;

    letter-spacing: 1pt;

    font-weight: 300;

    padding: 10px 0;

    border:1pt solid transparent;

    box-sizing: border-box;

    transition: .5s;

    text-align: center;

    margin-left: 2%;

}



.products-buy-btn:hover{

  background: #fff;

    color: #c31919;

    border:1pt solid #c31919;

}



.product-cant-buy{

    display: inline-block;

    background: #9a9a9a;

    border-radius: 10px;

    color: #fff;

    width: 100%;

    font-size: 14pt;

    letter-spacing: 1pt;

    font-weight: 300;

    padding: 10px 0;

    border:1pt solid transparent;

    box-sizing: border-box;

    transition: .5s;

    text-align: center;

}



.product-detail-content{

    border: 1px solid #cacaca;

    padding: 5px 2%;

    margin: 80px 0 50px 0;

    background: #fff;

}



.product-detail-content img{

    visibility: visible!important;

    width: 100%;

    height: auto;

}



.product-detail-content p{

    margin: 30px 0;

}



.product-detail-content-title{

    width: 100%;

    margin: 10px auto;

    color: #000000;

    font-size: 14pt;

    text-align: left;

    border-bottom: 1px solid #231815;

    padding-bottom: 12px;

    letter-spacing: 2px;

    font-weight: 500;

}



.product-foryou{

    background-color: #b28247;

    padding: 30px;

    margin: 50px 0;

    border-radius: 30px

}



.product-foryou-title{

    color: #fff;

    font-size: 21pt;

    letter-spacing: 2pt;

    padding-bottom: 15px;

    border-bottom: 1px solid #fff;

    margin-bottom: 20px;

}



.product-foryou-item{

    text-align: left;

    padding: 13px 0 13px 5%;

}



.product-detail-content img.product-foryou-icon{

    margin: 0 10px 0 0;

    vertical-align: middle;

    width: 35px;

    min-width: auto;

}



.product-foryou-text{

    display: inline-block;

    color: #fff;

    font-size: 16pt;

    letter-spacing: 1pt;

    font-weight: 300;

    vertical-align: middle;

    width: calc(100% - 50px);

}



.product-detail-content span{

    font-size: 42pt;

    text-align: left;

    font-weight: 600;

    letter-spacing: 2px;

    padding: 0 20px;

}



.product-detail-content p{

    text-align: left;

    margin: 15px 0;

    line-height: 1.8;

    font-size: 17px;

    color: #000;

    letter-spacing: 1px;

}



#product-detail-table{

  border: 1px solid #3165e7;

    width: 100%;

    margin: 50px auto 30px auto;

}



#product-detail-table.two-axis tr td:first-of-type {

    background: #3165e7;

    width: 20%;

    border-top: 1px solid #FFFFFF;

    border-bottom: 1px solid #FFFFFF;

    color: #fff;

    font-size: 14pt;

    letter-spacing: 2pt;

}



#product-detail-table.two-axis tr td {

    background-color: transparent;

    padding: 20px 15px;

    border-top: 1px solid #3165e7;

    border-bottom: 1px solid #3165e7;

    text-align: left;

    color: #3e3a39;

    font-size: 14pt;

    letter-spacing: 1pt;

}



#product-detail-table.two-axis tr td:first-of-type .bt-content{

    color: #fff;

}



#product-detail-table.two-axis tr td .bt-content{

    color: #3E3A39;

    font-weight: 500;

    font-family: 'Noto Sans TC',Arial;

    font-size: 12pt;

}



#product-detail-table th, #product-detail-table table td {

    padding: 10px 12px;

    text-align: left;

}



#product-detail-table tr, #product-detail-table th, #product-detail-table table td {

    border: none;

    border-bottom: 1px solid #e4ebeb;

    font-size: .875rem;

}



.product-detail-recommend-box{

    border: 1px solid #cacaca;

    padding: 5px 2%;

    margin: 80px 0 50px 0;

    background: #fff;

}



.product-recommend-title{

    width: 100%;

    margin: 10px auto 30px auto;

    color: #000000;

    font-size: 14pt;

    text-align: left;

    border-bottom: 1px solid #231815;

    padding-bottom: 12px;

    letter-spacing: 2px;

    font-weight: 500;

}



.product-recommend-products{

    width: 90%;

    margin: 0 auto;

}



.product-recommend-products .product-slider-item{

    padding: 0 4%;

    text-align: left;

}



.product-recommend-products .product-list-name{

    font-size: 14pt;

    margin: 6px 0;

    text-align: left;

}



.product-recommend-products .product-list-content{

    font-size: 12pt;

    letter-spacing: 0;

}



.product-recommend-products .product-list-price{

    font-size: 16pt;

    letter-spacing: 0;

    margin: 5px 0 10px 0;

}







@media(max-width: 1280px){



  .product-detail-cap{

  padding: 10px 0;

  display: block;

}  

.product-detail-reserve {

    margin-right: 0;

}



}



@media(max-width: 1023px){

  .product-detail-info-box{

     padding-left: 0;

  }



  .tab-group section.active {

    padding: 30px 5%;

}



.products-fav-icon {

    right: 6px;

    top: 25px;

}



  .product-detail-title{

  margin-top: 30px;

}



}



@media(max-width: 768px){

.product-detail-title{

  margin-top: 20px;

}

.products-fav-icon {

    top: 15px;

}



.product-detail-title-name {

    margin: 40px 60px 25px 0;

}



#product-detail-table.two-axis tr td:first-of-type {

    font-size: 16px;

    word-break: keep-all;

    letter-spacing: 0;

    padding: 0 10px;

}



#product-detail-table.two-axis tr td {

    font-size: 16px;

    letter-spacing: 0;

    padding: 10px;

    line-height: 1.5;

}



}





@media(max-width: 568px){

#product-detail-table {

    margin: 50px auto 10px auto;

}



.product-detail-recommend-box {

    margin: 50px 0;

}

}



@media(max-width: 425px){

    .product-detail-content {

    border: 0;

    padding: 15px;

    margin: 40px 0 40px 0;

}



.product-foryou {

    padding: 30px 10px;

    margin: 30px 0;

}



.product-detail-recommend-box {

    border: 0;

    padding: 15px;

}



.product-recommend-products {

    width: 85%;

    margin: 0 auto;

}

}





.faq-list{

    margin-bottom: 50px;

}



.accordion .card:first-of-type {

    border-bottom: 0;

    border-bottom-right-radius: 0;

    border-bottom-left-radius: 0;

}



.faq-box {

    position: relative;

    display: block;

    min-width: 0;

    border-bottom: 1px solid #d8d8d8;

    margin-bottom: 25px;

}



.faq-date{

    width: 160px;

    display: inline-block;

    padding-right: 10px;

    position: relative;

    color: #000;

    font-size: 14pt;

    letter-spacing: 1pt;

    top:10px;

}



.faq-content{

    width:calc(100% - 165px);

    display:inline-block;

    padding-left: 10px;

    border-left:4pt solid #006837;

    vertical-align: top;

    margin-bottom: 25px;

}



.q-content{

    color: #000000;

    font-size: 20pt;

    letter-spacing: 1pt;

    margin-left: 10px;

    width: 100%;

    text-align: left;

    padding-bottom: 10px;

    margin-bottom: 0;

    margin-top: 10px;

    cursor: pointer;

}



.a-content{

    -ms-flex: 1 1 auto;

    flex: 1 1 auto;

    color: #595757;

    font-size: 13pt;

    letter-spacing: 1pt;

    width: 100%;

    text-align: left;

    padding-left: 10px;

    margin-top: 10px;

}



.collapse {

  display: none;

}



.collapse.show{

    display: block;

}



.fade {

  opacity: 0;

  transition: .5s;

}



.fade.show{

    opacity: 1;

}



.collapsing {

  position: relative;

  height: 0;

  overflow: hidden;

  transition: .5s;

}



@media(max-width: 767px){

    .faq-date{

    width: 100%;

    padding-right:0;

    margin-bottom: 15px;

}



.faq-content{

    width:100%;

    display:inline-block;

    padding-left: 0;

    border-top:4pt solid #006837;

    border-left:0;

    margin-bottom: 30px;

}



.q-content{

    color: #000000;

    font-size: 20pt;

    letter-spacing: 1pt;

    margin-left: 0;

    text-align: center;

    line-height: 28pt;

}



.a-content{

    text-align: center;

    padding-left: 0;

}





}



.news-title{

    color: #000000;

    font-size: 18pt;

    letter-spacing: 1pt;

    border-bottom: 1pt solid #006837;

    padding-bottom: 15px;

    margin-bottom: 30px;

    margin-top: 30px;

}



.news-slider{



}



.news-item{

    margin-bottom: 40px;

    padding: 0 10px;

}



.news-list-pic{

    background-size: cover;

    background-position: 50%;

        opacity: 1;

    transition: .5s;

}



.news-list-pic img{

    width: 100%;

}



.news-list-pic:hover{

    opacity: 0.8;

}



.new-list-name{    

    margin: 15px 0;

    display: block;    

    text-align: left;

    transition: .5s;

}



.new-list-name span{

    color: #666;

    font-size: 16px;

    letter-spacing: 1pt;

}



.new-list-name h3{

    color: #595757;

    font-size: 18px;

    letter-spacing: 1pt;

    padding-top: 0;

}



.new-list-name:hover span,

.new-list-name:hover h3{

    color: #3165e7;

    transition: .5s;

}



.news-list-pic{

    width: 100%;

}



.light-box-bg{

    text-align: left;

    background-color: #FFF;

    padding: 5%;

}



.news-list-light-box .news-list-content{

    border: 0;

}



.news-list-date{

    color: #000000;

    font-size: 13pt;

    letter-spacing: 1px;

    margin-top: 5px;

}



.news-list-content{

    color: #4D4D4D;

    font-size: 13pt;

    line-height: 28pt;

    border-top: 1px solid #333333;

    padding-top: 10px;

}



@media (max-width: 767px){

    .news-item{

        padding: 0;

    }

}



.notice-content{

    text-align: left;

    margin-bottom: 100px;

}



.notice-title{

    color: #000000;

    font-size: 18pt;

    letter-spacing: 1pt;

    padding-bottom: 15px;

    margin-bottom: 30px;

    margin-top: 30px;

    text-align: center;

}



.notice-content-step{

    text-align: left;

    font-size: 13pt;

    padding: 15px;

    margin-bottom: 20px;

    border-radius: 5px;

    border: 1px solid #cccccc;

}



.notice-step-icon{

  display: inline-block;

  vertical-align: middle;

  padding: 20px 10px 20px 0;

}



.notice-step{

  display: inline-block;

  margin-bottom: 20px;

}



.notice-step-icon img{

  width: 55px;

}



.notice-step-content{

  display: inline-block;

  vertical-align: middle;

  padding-right: 10px;

}



.notice-step-title{

    font-size: 14px;

    display: block;

    font-weight: 400;

    color: #595757;

    letter-spacing: 1pt;

    font-family: 'arial';

    line-height: 1;

}



.notice-step-name{

    font-size: 16px;

    color: #595757;

    font-weight: 500;

    letter-spacing: 1pt;

}



.notice-step-arrow{

  display: inline-block;

  vertical-align: middle;

  padding: 0 8px;

}



.notice-step-arrow img{

  width: 30px;

}



.notice-content-word{

    text-align: left;

    font-size: 17px;

    color: #595757;

    letter-spacing: 1px;

    line-height: 1.5;

    margin-bottom: 30px;

}



.notice-content-word ul{

    text-align: left;

    font-size: 17px;

    color: #595757;

    letter-spacing: 1px;

    line-height: 1.5;

}



.notice-content-word li{

    list-style: decimal;

    margin-left: 30px;

    margin-bottom: 20px;

}



.notice-content-title{

    margin: 0px 0 25px 0;

    color: #fff;

    font-size: 14pt;

    font-weight: 400;

    letter-spacing: 2pt;

    background: #3165e7;

    display: inline-block;

    padding: 5px 15px;

    border-radius: 5px;

}





@media(max-width: 768px){

.notice-step{

  width: calc(50% - 4px);

  border-bottom: 1px solid #c5c5c5;

}

.notice-step-arrow{

  display: none;

}



.notice-step-icon {

    margin: 0 auto;

    text-align: center;

    padding: 15px 0 15px 0;

}



.notice-step-content {

    vertical-align: middle;

    padding-right: 0;

    text-align: left;

}



.notice-content{

    margin-bottom: 0;

}

}



@media(max-width: 630px){

.notice-step{

  width: 100%;

}



.notice-step-icon {

    margin: 0 auto;

    text-align: center;

    padding: 8px 0 8px 0;

}

}



@media(max-width: 400px){

  .notice-content-step {

    text-align: left;

    padding: 0;

    border: 0;

}



.notice-step-icon {

    padding: 5px 0;

}



}



.contact-info{

    margin: 50px 0 70px 0;

    padding: 30px 4% 50px 4%;

    box-shadow: 0px 0px 5px 1px #d6d6d6;

    background: #fff;

}



.contact-info-logo{

    display: block;

    text-align: right;

    margin-left: auto;

    margin-right: 15px;

        margin-bottom: 20px;

    max-width: 200px;

}



.contact-info-logo img{

    width: 100%;

    max-width: 260px;

}



.contact-info-tel{

    color: #717071;

    font-size: 14pt;

    letter-spacing: 1px;

    display: inline-block;

    margin: 10px 20px;

    font-weight: 500;

}



.contact-info-tax{

    color: #717071;

    font-size: 14pt;

    letter-spacing: 1px;

    display: block;

    margin: 10px 20px;

    font-weight: 500;

}



.contact-info-address{

    color: #717071;

    font-size: 14pt;

    letter-spacing: 1px;

    line-height: 1.8;

    margin: 0 0 40px 0;

    font-weight: 500;

    text-align: left;

}



.contact-info-map{

    padding: 1px;

}





.contact-form{

  position: relative;

}



.contact-form-title{

    color: #000000;

    font-size: 25px;

    letter-spacing: 1pt;

    padding-bottom: 15px;

    margin-bottom: 0px;

    margin-top: 30px;

    text-align: center;

}



.contact-form-caption{

  color: #717071;

  font-size: 16px;

  letter-spacing: 1px;

}



.contact-dot{

    font-size: 25pt;

    vertical-align: top;

    margin-right: 6px;

    display: inline-block;

    margin-top: 6px;

    width: 13px;

    color:#c30d23;

}



.contact-form-box{

  text-align: left;

}



.contact-form-item{

    color: #717071;

    font-weight: 400;

    font-size: 16px;

    margin: 3px 0;

    letter-spacing: 1px;

    display: block;

}



.contact-form-radio{

    width:40px;

  margin-left: 20px;

}



.contact-form-text{

    padding: 10px 15px;

    border-radius: 5px;

    font-size: 12pt;

    font-family: 'Noto Sans TC';

    margin-bottom: 20px;

    border:1pt solid #d6d6d6;

    width:100%;

}



.contact-form-text-r{

    display: inline-block;

    padding: 10px 15px;

    border-radius: 5px;

    font-size: 12pt;

    font-family: 'Noto Sans TC';

    margin-bottom: 20px;

    border:1pt solid #d6d6d6;

    width:calc(100% - 150px);

}



.contact-form-text-vc{

    padding: 10px 15px;

    border-radius: 5px;

    border: 0;

    font-size: 12pt;

    font-family: 'Noto Sans TC';

    border:1pt solid #d6d6d6;

    margin-bottom: 45px;

    width: 30%;

}



.contact-form-vc{

  display: inline-block;

  vertical-align: middle;

  margin-left: 20px;

  margin-bottom: 50px;

  font-size: 25px;

  color: #000;

}



.contact-form-vc:hover{

  color: #3165e7;

}



.btn-cancal{

    display: inline-block;

    background: #3165e7;

    border-radius: 5px;

    color: #fff;

    width: 100%;

    font-size: 14pt;

    letter-spacing: 1pt;

    font-weight: 300;

    padding: 5px 0 8px 0;

    border:1pt solid transparent;

    box-sizing: border-box;

    transition: .5s;

    max-width: 170px;

    text-align: center;

    margin:0 10px;

}



.btn-cancal:hover{

    background: #fff;

    color: #3165e7;

    border: 1pt solid #3165e7;

}



.btn-send{

    display: inline-block;

    background: #c31919;

    border-radius: 5px;

    color: #fff;

    width: 100%;

    font-size: 14pt;

    letter-spacing: 1pt;

    font-weight: 300;

    padding: 5px 0 8px 0;

    border:1pt solid transparent;

    box-sizing: border-box;

    transition: .5s;

    max-width: 170px;

    text-align: center;

    margin:0 10px;

}



.btn-send:hover{

    background: #fff;

    color: #c31919;

    border: 1pt solid #c31919;

}





.contact-form-btn{

  text-align: center;

  margin: 60px auto;

}





@media(max-width: 1024px){

    .content-contact {

    padding: 40px 0 140px 0;

}

}



@media(max-width: 768px){



.contact-info-address{

  text-align: none;

  padding-left: 0;

  text-align: center;

}



.contact-info-logo {

    margin-left: auto;

    margin-right: auto;

}

}





@media(max-width: 568px){





.contact-form-title {

    margin-bottom: 10px;

}



.contact-form-caption {

    font-size: 16px;

    position: relative;

    right: 0;

    top: 0;

    margin-bottom: 30px;

}



.contact-form-text {

    width: 100%;

    margin-bottom: 25px;

}



.contact-form-item {

    margin: 0;

}



.contact-form-text-vc {

    margin-bottom: 15px;

    width: 100%;

}



.contact-form-vc {

    margin-left: 0px;

    margin-bottom: 0px;

}



.content-contact {

    padding: 40px 0 0px 0;

}



.contact-info-mail a {

    display: initial;

}



}



@media(max-width: 480px){

.contact-info-address {

    margin-top: 15px;

    font-size: 17px;

}



    .contact-form-text-r {

    width: 100%;

}



.pure-form label.contact-form-radio{

    width: 80px;

    margin-left: 0;

    display: inline-block;

    margin-bottom: 20px;

}



.btn-cancal{

    display: block;

    margin: 0 auto 25px auto;

}



.btn-send{

    display: block;

    margin: 0 auto 25px auto;

}



}



.content-wrapper-shop {

    background-image: url(../img/page-contact-bg.png);

    background-color: #F2F2F2;

    background-size: 100% 100%;

    background-repeat: no-repeat;

}



.content-shop {

    padding: 40px 1% 140px 1%;

}



.shop-process{

  margin-bottom: 70px;

    padding: 0 7%;

}



.shop-process-item{

  position: relative;

  vertical-align: middle!important;

}



.shop-process-icon{

      width: 100%;

    max-width: 130px;

    margin: 0 auto;

}



.shop-process-name{

  text-align: center;

    color: #595757;

    letter-spacing: 1px;

    padding: 10px 20px;

    margin: 10px 2% 0 2%;

    font-size: 13pt;

}



.shop-process-name-act{

    text-align: center;

    color: #595757;

    letter-spacing: 1px;

    padding: 10px 20px;

    margin: 10px 2% 0 2%;

    font-size: 13pt;

}



.shop-process-name .shop-process-step{

    font-size: 14pt;

    display: block;

    background: transparent;

    width: 50px;

    color: #3165e7;

    margin: 0 auto;

    line-height: 50px;

    border-radius: 15px;

    margin-bottom: 10px;

    border: 1.5pt solid #3165e7;

    box-sizing: content-box;

}



.shop-process-name-act .shop-process-step{

    font-size: 14pt;

    display: block;

    background: #3165e7;

    width: 50px;

    color: #fff;

    margin: 0 auto;

    line-height: 50px;

    border-radius: 15px;

    margin-bottom: 10px;

    border: 1.5pt solid #3165e7;

    box-sizing: content-box;

}



.shop-list-title{

    color: #3165e7;

    font-size: 20px;

    letter-spacing: 1pt;

    padding-bottom: 15px;

    margin-bottom: 0px;

    margin-top: 30px;

    text-align: left;

}



#shop-list-table{

  width:100%;

}



#shop-list-table .wan-spinner input {

    width: 15%;

    border-radius: 5px;

    border: 1px solid #595757;

    vertical-align: middle;

    text-align: center;

    height: 40px;

    font-size: 14pt;

    font-weight: 800;

}



#shop-list-table .wan-spinner .minus, #shop-list-table .wan-spinner .plus{

  background: #3165e7;

  color: #fff;

  font-weight: 500;

  width: 22px;

  display: inline-block;

  border-radius: 35px;

  font-size: 18pt;

  height: 22px;

  transition: .5s;

  -webkit-transition: .5s;

  -o-transition: .5s;

  text-align: center;

  vertical-align: middle;

  line-height: 22px;

}



#shop-list-table thead tr th {

      background: #dbdcdc;

}



#shop-list-table thead tr th .shop-list-table-title{

  color: #595757;

  margin: 16px 5px 10px 5px;

  display: block;

  font-size: 13pt;

  font-weight: 500;

  letter-spacing: 2pt;

}



#shop-list-table tbody tr {

      border-bottom: 1px dashed #3165e7;

}



#shop-list-table tbody tr:last-child {

      border-bottom: 0;

}



#shop-list-table tbody tr td.shop-list-table-right{

    text-align: right;

    padding-right: 2.8%;

}





#shop-list-table thead tr th.shop-list-table-right{

    text-align: right;

    padding-right: 2.8%;

}



#shop-list-table thead tr th.shop-list-table-right .shop-list-table-title{

    margin-right:0;

}



#shop-list-table tbody tr td {

    text-align: center;

    color: #595757;

    font-size: 14pt;

    padding: 30px 3px;

    font-weight: 500;

}



#shop-list-table tbody tr td.member-order-price{

  color:#C30D23;

}



.shop-order-del{

  width:20px;

  height:20px;

  background-image: url(../img/shop-order-del.png);

  display: block;

  margin: 0 auto;

}



.shop-order-cant-del{

  width:20px;

  height:20px;

  background-image: url(../img/shop-order-del-cant.png);

  display: block;

  margin: 0 auto;

}



.shop-order-del:hover{

  background-image: url(../img/shop-order-del-hover.png);

}



.shop-list-product-mask{

    background-size: cover;

    background-position: 50%;

    display: inline-block;

}



.shop-list-product-img{

    width: 100%;

    max-width: 100px;

}



.shop-list-product-name{

  display: inline-block;

  vertical-align: middle;

  margin-left: 10px;

  width: 50%;

  font-size: 15pt;

    letter-spacing: 1pt;

}



.shop-list-select{

  width:80%;

}



.shop-btn-red {

    max-width: 143px;

    width: 100%;

    border: 0;

    font-size: 13pt;

    color: #fff;

    margin: 10px 0 10px 0;

    display: inline-block;

    line-height: 36px;

    letter-spacing: 2pt;

    text-align: center;

    background: #851B26;

    border-radius: 10px;

    float: right;

    padding-top: 4px;

    transition: .5s;

    -webkit-transition: .5s;

    -o-transition: .5s;

}



.shop-btn-red:hover {

    background: #3e080d;

}



.shop-btn-gray {

    max-width: 143px;

    width: 100%;

    border: 0;

    font-size: 13pt;

    color: #fff;

    margin: 10px 0 10px 0;

    display: inline-block;

    line-height: 36px;

    letter-spacing: 2pt;

    text-align: center;

    background: #A2A1A1;

    border-radius: 10px;

    float: left;

    padding-top: 4px;

    transition: .5s;

    -webkit-transition: .5s;

    -o-transition: .5s;

}



.shop-btn-gray:hover{

    background: #484848;

}



.shop-btn-blown {

    max-width: 143px;

    width: 100%;

    border: 0;

    font-size: 13pt;

    color: #fff;

    margin: 10px 2% 10px 2%;

    display: inline-block;

    line-height: 36px;

    letter-spacing: 2pt;

    text-align: center;

    background: #603813;

    border-radius: 10px;

    float: right;

    padding-top: 4px;

    transition: .5s;

    -webkit-transition: .5s;

    -o-transition: .5s;

}



.shop-btn-blown:hover{

    background: #381c03;

}



.shop-list-sum{

    color: #595758;

    text-align: right;

    padding: 20px 2.8% 20px 0;

    box-sizing: border-box;

    font-weight: 500;

    font-size: 15pt;

    border-bottom: 1pt solid #3165e7;

    border-top: 1pt solid #3165e7;

}



.shop-list-offer{

    padding-right: 2.8%;

    display: inline-block;

    font-size: 15pt;

    color: #C1272D;

    text-align: left;

    letter-spacing: 1pt;

    margin-top: 10px;

    float: right;

    width: 30.3%;

    line-height: 38pt;

    font-weight: 800;

}



.shop-list-offer-title{

    letter-spacing: 0;

    color: #595757;

    font-weight: 800;

}



.shop-list-offer-price{

    text-align: right;

    float: right;

    letter-spacing: 0;

    color: #595757;

    font-weight: 400;

  }



.shop-list-left-name{

      float: left;

    display: inline-block;

    font-size: 14pt;

    font-weight: 500;

    color: #595757;

}



.shop-list-right-label{

  float: right;

    width: 30%;

    text-align: left;

    font-size: 15pt;

    color: #595757;

    font-weight: 500;

}





.shop-list-right-number{

  text-align: right;

  float:right;

  font-weight: 400;

}



.shop-list-shipping-choice{

      text-align: right;

    padding: 10px 2.8% 10px 0;

    box-sizing: border-box;

    font-weight: 500;

}



.shop-list-all-sum {

    text-align: right;

    padding: 17px 2.9% 17px 1.5%;

    box-sizing: border-box;

    margin-bottom: 20px;

    display: inline-block;

    width: 31.8%;

    float: right;

    color: #fff;

    font-size: 15pt;

    background: #727171;

    margin-top: 20px;

}



.shop-list-all-sum-name{

  float:left;

  font-weight: 500;

}



.shop-list-all-sum-02{

    text-align: right;

    box-sizing: border-box;

    display: inline-block;

    color: #fff;

    font-size: 14pt;

}



.shop-btn-step1{

    text-align: right;

    padding: 30px 0 35px 0;

    box-sizing: border-box;

    border-top: 1pt solid #3165e7;

    margin-bottom: 30px;

}



.shop-btn-float-left{

    float: left;

}



.shop-btn-float-right{

    float: right;

}



.shop-content-title{

  text-align: left;

  border-bottom: 1pt solid #3165e7;

  margin-bottom: 20px;

  padding: 0 0 10px 0;

}



.shop-content-title-icon{

  display: inline-block;

    vertical-align: middle;

    margin-bottom: -2px;

    margin-top: -10px;

}



.shop-content-title-name{

  color: #3165e7;

  font-size: 20px;

  letter-spacing: 1pt;

}



.shop-content-info{

  text-align: left;

    margin-bottom: 20px;

    font-size: 13pt;

    line-height: 30pt;

    letter-spacing: 2px;

    font-weight: 500;

    color: #595757;

    margin-left: 3%;

    width: 97%;

}



.shop-form-text{

    padding: 10px 20px;

    border-radius: 3px;

    border: 1pt solid #d4d4d4;

    font-family: 'Noto Sans TC';

    font-weight: 300;

    margin-bottom: 30px;

}



.shop-sp-text-01{

  text-align: center; 

  font-size: 16pt; 

  line-height: 30px;

}



.shop-sp-text-03{

    text-align: left;

    color: #c30d23;

    font-size: 12pt;

    line-height: 40px;

    box-sizing: border-box;

    padding-left: 10px;

    letter-spacing: 1px!important;

    font-weight: 500;

}



.twcode-right{

margin-right: 8%; 

}



.shop-content-time-tip{

  width: calc(100% - 465px);

  display: inline-block;

}



.shop-content-info .pure-form label{

      color: #727171;

    font-weight: 400;

    font-size: 14pt;

    letter-spacing: 1px;

    line-height: 34px;

}



.shop-content-info .pure-form .shop-content-time label{

      color: #727171;

    font-weight: 400;

    font-size: 12pt;

    letter-spacing: 1px;

    line-height: 28pt;

}



.radio-pay-bank-tip{

  color: #62B0DB;

  font-size: 11pt;

  margin-left: 10px;

}



.radio-receipt-left{

  margin-right: 4%;

}



.radio-time-left{

  margin-left: 10px;

}



.ps-text-area textarea{

    margin-top: 6px;

    color: #EB7996;

    line-height: 30px;

}



.shop-btn-step2{

    text-align: center;

    padding: 20px 0 50px 0;

    box-sizing: border-box;

    border-top: 1px solid #3165e7;

    margin-top: 30px;

}





.shop-content-word{

  line-height: 40pt;

}



.shop-list-price-info{

      text-align: right;

    padding: 10px 2.9% 0px 0;

    box-sizing: border-box;

    color: #595758;

    font-size: 13pt;

    font-weight: 500;

    line-height: 40pt;

}



.shop-list-all-sum-pink{

    background: #C69C6D;

    display: inline-block;

    text-align: center;

    padding: 15px 20px 10px 20px;

    color: #fff;

    border-radius: 10px;

    letter-spacing: 1px;

    font-weight: 500;

    margin-right: 2.8%;

}



.btn-gray{

    display: inline-block;

    background: #595757;

    border-radius: 5px;

    color: #fff;

    width: 100%;

    font-size: 12pt;

    letter-spacing: 1pt;

    font-weight: 300;

    padding: 4px 15px;

    border:1pt solid transparent;

    box-sizing: border-box;

    transition: .5s;

    max-width: 130px;

    text-align: center;

    margin-right:20px;

}



.btn-gray:hover{

    background: #fff;

    color: #595757;

    border:1pt solid #595757;

}



@media (max-width: 768px){

    .btn-gray{

        margin-top: 50px;

    }

}



.pure-form div.shop-item-name {

    color: #7D7D7D;

    font-size: 12pt;

    line-height: 40px;

    letter-spacing: 2px;

    font-weight: 500;

    width: 93px;

    display: inline-block;

    vertical-align: top;

    line-height: 32px;

}



.pure-form div.shop-item-text-box {

    color: #7D7D7D;

    font-size: 12pt;

    line-height: 40px;

    letter-spacing: 2px;

    font-weight: 500;

    width: calc(100% - 100px);

    display: inline-block;

}



.shop-item-name-02 {

    text-align: left;

    font-size: 13pt;

    line-height: 40pt;

    letter-spacing: 2px;

    font-weight: 500;

    color: #595757;

}



.shop-content-title .pure-form label{

  color: #7D7D7D;

    font-size: 13pt;

    line-height: 40px;

    letter-spacing: 2px;

    font-weight: 500;

}





.shop-thanks-box{

    border: 1.5pt solid #727171;

    border-radius: 10px;

    width: 85%;

    display: inline-block;

    padding: 80px 10%;

    background-image: url(../img/shop-step4-bg.png);

    background-size: contain;

    background-repeat: no-repeat;

    background-position: bottom;

}



.shop-logo{

    width:100%;

    border-bottom: 1pt solid #3165e7;

    padding-bottom: 50px;

}



.shop-logo img{

    max-width: 250px;

    width:100%;

}



.shop-pay-type{

    color: #3165e7;

    text-align: left;

    width:90%;

    margin-top: 20px;

    font-size: 14pt;

    display: inline-block;

}



.shop-thanks-content{

    text-align: left;

    width:90%;

    font-size: 14pt;

    line-height: 30pt;

    margin-top: 20px;

    display: inline-block;

}



.shop-thanks-info{

    text-align: left;

    width:90%;

    font-size: 14pt;

    line-height: 30pt;

    margin-top: 40px;

    display: inline-block;

}



.shop-thanks-content a{

    background: #3165e7;

    color: #fff;

    display: inline-block;

    padding: 4px 10px;

    line-height: 17pt;

    border-radius: 5px;

    transition: .5s;

    -webkit-transition: .5s;

    -o-transition: .5s;

    margin: 0 5px;

}



.shop-thanks-content a:hover{

    background:#003a1f;

}



.shop-red {

    color:#ea3d3d;

}



.shop-btn-step4{

    text-align: center;

    padding: 20px 0 0 0;

    box-sizing: border-box;

    margin-top: 30px;

    margin-bottom: 80px;

}



@media(max-width: 1580px){

  .shop-content-time-tip{

  width: 100%;

  display: inline-block;

  padding-left: 0;

}

}



@media(max-width: 1440px){

.shop-process {

    padding: 0;

}

}



@media(max-width: 1280px){



.radio-receipt-left-01{

  margin-left: 0;

}

.radio-receipt-left-02{

  margin-left: 8.3%;

}

.shop-thanks-word {

    font-size: 15.5pt;



}

.shop-thanks-box{

    width: 90%;

    padding: 80px 6%;

}

}



@media(max-width: 1024px){



.shop-list-product-img{

    width: 100%;

    max-width: 80px;

}



.shop-process{

  margin-bottom: 50px;

    padding: 0;

}



.product-order-detail-shipping {

    text-align: left;

    margin: 15px 10px;

}

.product-order-detail-price {

    text-align: center;

    margin: 15px 10px;

}





#shop-list-table, #shop-list-table tbody{

  border:0;

}



#shop-list-table tbody tr td {

    text-align: left;

    border: 0;

}

#shop-list-table tbody tr {

    border-bottom: 1px solid  #c7c7c7;

}



#shop-list-table tbody tr:last-child {

    border-top: 1px solid #c7c7c7;

    border-bottom: 0;

}



.shop-list-select{

  width:100%;

}

.shop-list-product-name{

  width: 100%;

  margin-left:0;

}



.shop-thanks-bottom-pic img {

    bottom: -8px;

}

}



@media(max-width: 768px){



#shop-list-table tbody tr td {

    padding: 10px 3px;

}



.shop-list-all-sum-name {

    margin-left: 10px;

}



.shop-process{

  margin-bottom: 30px;

    padding: 0;

}



.shop-process-name-act {

     display: inline-block;

   vertical-align: middle!important;

    margin-top: 15px;

    padding: 10px 15px;

}



.shop-process-name {

    display: inline-block;

   vertical-align: middle!important;

    margin-top: 15px;

    padding: 10px 15px;

}



#shop-list-table tbody tr td {

    text-align: left;

    border: 0;

}



#shop-list-table tbody tr td.shop-list-table-right {

    text-align: left;

    padding-right: 0;

}



.shop-list-offer {

    float: none;

    width: 100%;

}



.shop-process-arrow {

    display: none;

}



.shop-list-sum {

    color: #595758;

    padding: 32px 2.8% 0px 0;

    box-sizing: border-box;

    font-weight: 500;

}





.shop-list-left-name {

    float: none;

    display: inline-block;

    margin-left: 0;

    margin-bottom: 23px;

    margin-right: 10px;

}



.shop-list-shipping-choice {

    text-align: left;

}



form.shop-list-right-label {

  width: 100%;

    float: none;

    display: block;

}



.shop-list-all-sum {

    text-align: right;

    padding: 5px 2.8% 5px 0;

    width: 100%;

    margin: 0;

}



.shop-item-name-02 {

    text-align: left;

    margin-top: 0px;

    font-size: 15pt;

    line-height: 20pt;

    letter-spacing: 2px;

    font-weight: 500;

    color: #595757;

}



.shop-content-word{

  line-height: 20pt;

  font-size: 12pt;

  font-weight: 400;

  padding-bottom: 15px;

}



.shop-btn-step4 {

    margin-bottom: 50px;

}



.shop-btn-blown {

    margin: 10px 1% 10px 1%;

    float:none;

}



.shop-thanks-pic-02{

    display: none;

}



.shop-thanks-pic-03{

    display: none;

}



.shop-thanks-box{

    width: 100%;

    padding: 40px 5%;

}

}



@media(max-width: 767px){

  .shop-process-name-act {

    display: block;

}

  .shop-process-name {

    display: block;

}



.shop-sp-text-03 {

    margin-top: -24px;

}



.shop-content-time-tip {

    margin-top: 0;

}





.shop-btn-float-left, .shop-btn-float-right {

    float: none;

}



.btn-gray{

    margin-right:0;

}





}



@media(max-width: 568px){

.shop-btn-step1{

    text-align: center;

    padding: 20px 0;

}

.shop-content-word{

  padding-top: 0;

}





.member-required {

    position: initial;

    margin-bottom: 20px;

}



.shop-thanks-pic-01{

  display: none;

}



.shop-thanks-pic-01-mobile{

  display: block;

  width:100%;

  max-width: 768px;

}



.pure-form div.shop-item-name {

    width: 100%;

}



.pure-form div.shop-item-text-box {

    width: 100%;

}



.shop-thanks-box{

    width: 100%;

    padding: 0;

    border: 0;

    background: transparent;

}



}



@media(max-width: 480px){

.radio-receipt-left-02{

  margin-left: 0;

}

.radio-time-left{

  margin-left: 0;

}



.shop-list-product-img {

    max-width: 110px;

}



.wan-spinner .minus, .wan-spinner .plus {

    width: 25px;

    height: 25px;

    line-height: 1;

    vertical-align: middle;

}



.shop-btn-gray, .shop-btn-red, .shop-btn-blown{

  float:none;

  margin:10px 0;

}



.member-sp-text-01{

  display: none;

}



.shop-sp-text-01{

  display: none;

}

.shop-list-all-sum-pink {

    padding: 15px 10px 10px 10px;

    width: 100%;

}







}



.member-bg{

    background-size: contain;

    background-repeat: no-repeat;

    background-position: bottom;

    margin-bottom: 120px;

    padding: 15px;

    background: #fff;

}



@media (max-width: 768px){

    .member-bg{

        margin-bottom: 60px;

    }

}



.member-content{

    /* margin-top:20px; */

}



.member-title{

  display: inline-block;

  margin: 20px auto;

}



.member-title-img{

  display: inline-block;

  vertical-align: middle;

}



.member-title-img img{

  width: 100%;

  max-width: 100px;

    

}



.member-title-name{

    vertical-align: middle;

    color: #000;

    font-size: 18pt;

    letter-spacing: 1pt;

    display: inline-block;

}



.img-mirror{

  -moz-transform:scaleX(-1);

    -webkit-transform:scaleX(-1);

    -o-transform:scaleX(-1);

    transform:scaleX(-1);

    filter:FlipH;

}



.member-box-01{

  box-sizing: border-box;

    padding: 5% 2%;

    border-radius: 20px;

    position: relative;

}



.member-required{

  color:#F4A12B;

  position: absolute;

  top: 20px;

  right: 7%;

}



.member-box-02{

  box-sizing: border-box;

    padding: 0;

    border-radius: 20px;

    margin-bottom: 80px;

    position: relative;

}



.member-box-03{

  box-sizing: border-box;

  border: 5px solid #053A64;

  padding: 10% 2%;

  border-radius: 20px;

  margin: 80px 0;

}



.order-url.edbox .edbox-body{

    width:80%;

}





.member-content-text{

  text-align: left;

    color: #3E3A39;

    font-size: 11pt;

    padding: 0 15px;

    box-sizing: border-box;

}



.member-content-title{

  color: #040000;

    font-size: 16pt;

    display: block;

    margin-bottom: 10px;

}



.member-content-btn-join{

  background: #0fbfd0;

  border-radius: 3px;

  color: #fff;

  text-align: center;

  font-size: 14pt;

  font-weight: 300;

  padding: 7px 0;

  margin: 15px 0 40px 0;

  display: block;

  box-shadow: 0px 0px 3px 0px #0003;

  transition: .5s;

  -webkit-transition: 0.5S;

}



.member-content-btn-join img{

  display: inline-block;

  vertical-align: middle;

  margin: 0 10px 3px 0;

}



.member-content-btn-join:hover{

  background: #0fa4b3;

}



.member-content-btn-checkout{

  background: #6fb62d;

  border-radius: 3px;

  color: #fff;

  text-align: center;

  font-size: 14pt;

  font-weight: 300;

  padding: 7px 0;

  margin: 20px 0 40px 0;

  display: block;

  box-shadow: 0px 0px 3px 0px #0003;

  transition: .5s;

  -webkit-transition: 0.5S;

}



.member-content-btn-checkout img{

  display: inline-block;

  vertical-align: middle;

  margin: 0 10px 3px 0;

}



.member-content-btn-checkout:hover{

  background: #599e18;

}





.member-form-text{

  margin-bottom: 20px;

  padding: 10px;

  border-radius: 1px;

  border: 1pt solid #aaa;

  border: 0;

}



.member-forget-password{

  margin-left:16px;

}





.member-forget-password{

  color: #3165e7;

}

.member-forget-password:hover{

  color: #1f8dd6;

}













.member-content-btn-login{

  background:#ffaf1e;

  border-radius: 3px;

  color: #fff;

  text-align: center;

  font-size: 14pt;

  font-weight: 300;

  display: block;

  transition: .5s;

  padding: 6px;

  box-shadow: 0px 0px 3px 0px #0003;

  margin-top: 15px;

  -webkit-transition: 0.5S;

}



.member-content-btn-login img{

  display: inline-block;

  vertical-align: middle;

  margin: 0 10px 3px 0;

}



.member-content-btn-login:hover{

  background: #B75F25;

}



.login-choose{

  display: flex;

  justify-content: space-between;

}



.member-content-btn-fblogin,.member-content-btn-google,

.member-content-btn-apple{

  display: flex;

  justify-content: center;

  align-items: center;

  width: 32%;

  border-radius: 3px;

  background: #38528C;

  color: #fff;

  text-align: center;

  font-size: 15px;

  font-weight: 300;

  line-height: 1.5;

  padding: 10px 5px;

  letter-spacing: 0px;

  box-shadow: 0px 0px 3px 0px #0003;

  transition: .5s;

  -webkit-transition: 0.5s;

}



.member-content-btn-fblogin:hover{

  background: #133260;

}



.member-content-btn-google{

  background: #ffffff;

  color: #000;

}



.member-content-btn-google img,

.member-content-btn-apple img,

.member-content-btn-fblogin img{

    width: 20px;

    height: 20px;

    margin-right: 5px;

}



.member-content-btn-google:hover{

  background: #dddddd;

}



.member-content-btn-apple{

  background: #000000;

  margin-right: 0;

}



.member-content-btn-apple:hover{

  background: #565656;

}



@media (max-width: 1024px) {

  .login-choose{

    display: flex;

    flex-direction: column;

    justify-content: space-between;

  }



  .member-content-btn-fblogin,.member-content-btn-google,

  .member-content-btn-apple{

    width: 100%;

    margin-bottom: 15px;

  }

  

}





.member-item-name{

  color:#4D4D4D;

  font-size: 12pt;

  line-height: 40px;

}



.member-sp-text-01{

  text-align: center; 

  font-size: 16pt; 

  line-height: 30px;

}



.member-sp-text-02{

  text-align: left;

    color: #4d4d4d;

    font-size: 10pt;

    box-sizing: border-box;

    padding-left: 10px;

    line-height: 15pt;

}



.member-item-name-pot{

  color: #F4A12B;

}



.twcode-right{

margin-right: 8%; 

}



.twcode-color{

  color:#717171;

  background: #fff;

}



.memeber-form-vc{

  display: inline-block;

  vertical-align: middle;

  margin: -20px 0 0 5px;

  color: #000;

  font-size: 21px;

}



.memeber-form-vc:hover{

  color:#3165e7;

}



.member-content-btn-submit{

  background: #3165e7;

  border-radius: 5px;

  color: #fff;

  text-align: center;

  font-size: 12pt;

  font-weight: 300;

  padding: 7px 0;

  margin: 20px auto 40px auto;

  display: block;

  transition: .5s;

  -webkit-transition: 0.5S;

  width: 50%;

  letter-spacing: 2px;

}



.member-content-btn-submit:hover{

  background: #214dbc;

}



.member-content-btn-forget{

  background: #3165e7;

  border-radius: 5px;

  color: #fff;

  text-align: center;

  font-size: 12pt;

  font-weight: 300;

  padding: 7px 0;

  margin: 20px auto 40px auto;

  display: block;

  transition: .5s;

  -webkit-transition: 0.5S;

  letter-spacing: 2px;

}



.member-content-btn-forget:hover{

  background: #1f8dd6;

}



#member-order-table{

  width: 100%;

  margin-top: 15px;

}



#member-order-table thead tr{

}



#member-order-table thead tr th{

  font-size: 11pt;

  font-weight: 500;

  color: #231815;

  padding: 0 5px;

  border-left: 3px solid #3165e7;

  line-height: 11pt;

  /* padding-top: 15px; */

}



#member-order-table thead tr th:first-child{

  border-left: 0;

}



#member-order-table tbody tr td{

  text-align: center;

  color: #727171;

  font-size: 11pt;

  padding: 10px 3px;

}



.member-order-table-line{

  border-bottom: 1px solid #898989;

}



.member-order-detail{

  width:20px;

  height:20px;

  display: inline-block;

  margin-left: 5px;

}



.member-order-detail path{

  fill: #3165e7;

  transition: .5s;

}



.member-order-detail:hover path {

    fill: #1f8dd6;

}



.member-order-del{

  width:20px;

  height:20px;

  display: block;

  margin: 0 auto;

}



.member-order-del path{

  fill: #c30d23;

  transition: .5s;

}



.member-order-del:hover path{

  fill:#c30d23;

}



.member-order-cant-del{

  width:20px;

  height:20px;

  display: block;

  margin: 0 auto;

}



.member-order-cant-del path{

  fill: #b5b5b6;

}





#member-order-table tbody tr td.member-order-number{

  color: #3165e7;

}



.member-order-price{

  color:#C30D23;

}



#member-order-table tbody tr td.member-order-price{

  color:#C30D23;

}



.member-order-reply{

  color: #EC6B6B;

  border: 1px solid #EC6B6A;

  padding: 2px 5px;

}



.member-order-reply:hover{

  color: #fff;

  background-color: #EC6B6A;

}



.member-order-return{

  color: #F29556;

  border: 1px solid #F29556;

  padding: 2px 5px;

  transition: .5s;

}



.member-order-return:hover{

  color: #fff;

  background-color: #F29556;

}



.product-order-detail-name{

  background: #3165e7;

  color: #fff;

  padding: 20px;

  text-align: left;

  letter-spacing: 1px;

}



.product-order-detail-number{

  margin: 0 30px 0 10px;

}



.product-order-detail-date{

  margin-left: 10px;

}



.member-order-left-blue{

  margin:20px 0;

  border-left: 3px solid #3165e7;

  display: block;

  padding: 0 5px;

  text-align: center;

}



#member-order-detail-table thead tr th:first-child .member-order-left-blue{

  border-left: 0;

}



#member-order-detail-table{

  width: 100%;

  border: 2px solid #3165e7;

  padding: 5px;

}



table#member-order-detail-table{

  border-collapse: separate;

}



#member-order-detail-table thead tr th{

  font-size: 11pt;

  font-weight: 500;

  color: #231815;

  line-height: 11pt;

}



#member-order-detail-table tbody tr td{

  border-bottom: 1px solid #dcdcdc;

  text-align: center;

  color: #727171;

  font-size: 11pt;

  padding: 10px;

}



#member-order-detail-table tbody tr:first-child td{

  border-top: 1px solid #737373;

}



#member-order-detail-table tbody tr:last-child td{

  border-bottom: 0;

}





.product-order-detail-tip-box{

  text-align: right;

  padding: 20px 0;

  background: #C7E7FF;

  border-left: 2px solid #006837;

  border-right: 2px solid #006837;

}



.product-order-detail-tip{

  color: #036EB8;

  text-align: left;

}





.product-order-detail-account{

  border-left: 2px solid #3165e7;

  border-right: 2px solid #3165e7;

  border-bottom: 2px solid #3165e7;

  text-align: right;

}



.product-order-detail-shipping{

  text-align: left;

  margin: 15px 0 15px 59%;

}



.product-order-detail-price{

  text-align: left;

  margin: 15px 0 15px 59%;

}



.member-order-detail-data{

  margin-top: 50px;

}



.member-order-detail-data-title{

  color: #3165e7;

  font-size: 13pt;

  text-align: left;

  padding-bottom: 10px;

  border-bottom: 2px solid #3165e7;

}



.member-order-detail-data-content{

  margin-top: 10px;

  text-align: left;

}



.member-order-detail-data-name{

  color: #231815;

  font-weight: 500;

  padding: 0 0 0 20px;

  box-sizing: border-box;

}



.member-order-detail-data-word{

 color:#595757;

 padding: 0 0 20px 0;

}



.member-order-detail-logistics{

  background-image: url(../img/member-order-detail-icon.png);

  width:20px;

  height:20px;

  display: inline-block;

  margin-left: 10px;

}



.member-order-detail-logistics:hover{

  background-image: url(../img/member-order-detail-icon-hover.png);

}



.member-order-reply-tip{

  color: #053A64;

  margin-bottom: 30px;

}



.member-order-reply-name{

  color: #053A64;

  text-align: left;

  margin-bottom: 20px;

}



.member-order-reply-word{

  color: #727171;

  text-align: left;

  margin-bottom: 20px;

}



.member-fav-list{

    margin-top: 30px;

}



.member-fav-item{

    padding: 0 2% 50px 2%;

}



.member-collection-pic{

      box-sizing: border-box;

    background-position: 50%;

    background-size: cover;

    background-repeat: no-repeat;

    width: calc(50% - 15px);

    margin-right: 10px;

    display: inline-block;

    opacity: 1;

    transition: .5s;

}



.member-collection-pic:hover{

    opacity: 0.7;

}



.member-collection-pic img{

  width: 100%;

  max-width: 250px;

  margin: 0 auto;

}



.member-collection-info{

  text-align: left;

  padding:0 10px;

  box-sizing: border-box;

}



.member-fav-item .member-collection-info, .member-fav-item  .member-collection-pic{

    vertical-align: bottom;

}



.member-collection-title{

  font-size: 14pt;

  color: #595758;

  font-weight: 500;

  margin-bottom: 10px;

  letter-spacing: 1px;

}



.member-collection-price{

    color: #c30d23;

    font-size: 22px;

    font-weight: bold;

    letter-spacing: 1px;

    margin-bottom: 20px;

}



.member-collection-btn-add{

  background: #F58411;

  border-radius: 3px;

  color: #fff;

  text-align: center;

  font-size: 14pt;

  font-weight: 300;

  padding: 12px 0;

  margin: 20px 0 40px 0;

  display: block;

  transition: .5s;

  -webkit-transition: 0.5S;

}



.member-collection-btn-add:hover {

    background: #d56c00;

}



.member-collection-btn-add img{

  display: inline-block;

  vertical-align: middle;

  margin: 0 10px 3px 0;

}



.member-collection-btn-del{

  background: #C31919;

  border-radius: 3px;

  color: #fff;

  text-align: center;

  font-size: 14pt;

  font-weight: 300;

  padding: 12px 0;

  margin: 20px 0 0 0;

  display: block;

  transition: .5s;

  -webkit-transition: 0.5S;

}



.member-collection-btn-del:hover {

    background: #a90808;

}



.member-collection-btn-del img{

  display: inline-block;

  vertical-align: middle;

  margin: 0 10px 3px 0;

}



.member-refund-tip{

    font-size: 18px;

    letter-spacing: 1px;

    text-align: left;

    line-height: 1.8;

    font-weight: 500;

    color: #717071;

    margin-top: 30px;

}



.member-refund-tip a{

  color: #3165e7;

}



.member-refund-tip a:hover{

  color: #1f8dd6;

}



.member-refund-table-title{

  font-weight: 500;

  color: #3165e7;

  text-align: left;

  margin: 30px 0 10px 0;

}



#member-refund-application-table{

  width: 100%;

  background: #fff;

}



#member-refund-application-table thead tr th {

    font-size: 11pt;

    font-weight: 500;

    color: #231815;

    line-height: 11pt;

    border-top: 1px solid #898989;

    border-bottom: 1px solid #898989;

}



.member-refund-detail-title{

  text-align: left;

  font-size: 14pt;

  color:#036EB8;

}



.member-order-left-orange{

  margin: 20px 0;

  border-left: 3px solid #3165e7;

  display: block;

  padding: 0 5px;

}



#member-refund-application-table thead tr th:first-child .member-order-left-orange{

  border-left: 0;

}



#member-refund-application-table tbody tr td {

    text-align: center;

    color: #727171;

    font-size: 11pt;

    padding: 10px 3px;

}



#member-refund-application-table tbody tr td.member-order-number {

    color: #3165e7;

}



#member-refund-application-table tbody tr td.member-order-price {

    color: #C30D23;

}



.member-refund-return-btn{

  color: #DD5519;

  border: 1px solid #DD5519;

  padding: 2px 5px;

}



.member-refund-return-btn:hover{

  color: #fff;

  background: #DD5519;

}



.member-refund-exchange-btn{

  color: #684B9B;

  border: 1px solid #684B9B;

  padding: 2px 5px;

  margin-left: 5px;

}



.member-refund-exchange-btn:hover{

  color: #fff;

  background: #684B9B;

}



#member-refund-record-table{

  width: 100%;

  background: #fff;

}



#member-refund-record-table thead tr th {

    font-size: 11pt;

    font-weight: 500;

    color: #231815;

    line-height: 11pt;

    border-top: 1px solid #898989;

    border-bottom: 1px solid #898989;

}



#member-refund-record-table thead tr th:first-child .member-order-left-orange{

  border-left: 0;

}



#member-refund-record-table tbody tr td {

    text-align: center;

    color: #727171;

    font-size: 11pt;

    padding: 10px 3px;

}



#member-refund-record-table tbody tr td.member-order-number {

  color: #3165e7;

}



#member-refund-record-table tbody tr td.member-order-price {

    color: #C30D23;

}



#member-refund-record-table tbody tr td.member-order-status{

  color: #EA5514;

}



.member-refund-popu-title{

  color: #c30d23;

  font-size: 14pt;

  font-weight: 500;

  padding-bottom: 20px;

  border-bottom: 1px solid #898989;

  margin-bottom: 20px;

}



.member-refund-popu-word{

  width: 80%;

  color: #727171;

  margin-bottom: 20px;

}



.member-refund-popu-name{

  font-size: 14pt;

  color: #231815;

  text-align: left;

  margin-bottom: 10px;

}



.member-refund-popu-btn-cancal{

  background: #9B9B9B;

  border-radius: 3px;

  color: #fff;

  text-align: center;

  font-size: 12pt;

  font-weight: 300;

  padding: 7px 0;

  margin: 20px auto 40px auto;

  display: block;

  transition: .5s;

  -webkit-transition: 0.5S;

  width: 90%;

  letter-spacing: 2px;

}



.member-refund-popu-btn-cancal:hover{

  background: #5B5B5B;

}



.member-refund-popu-btn-submit{

  background: #c30d23;

  border-radius: 3px;

  color: #fff;

  text-align: center;

  font-size: 12pt;

  font-weight: 300;

  padding: 7px 0;

  margin: 20px auto 40px auto;

  display: block;

  transition: .5s;

  -webkit-transition: 0.5S;

  width: 90%;

  letter-spacing: 2px;

}



.member-refund-popu-btn-submit:hover{

  background: #a81e2e;

}



.member-form-text{

    border: 1pt solid #aaa;

}





@media(max-width: 1280px){

.member-box-01{

  padding: 5% 0;

}

.member-item-name {

    font-size: 10pt;

}

.radio-receipt-left-01{

  margin-left: 0;

}

.radio-receipt-left-02{

  margin-left: 8.3%;

}

}



@media(max-width: 1024px){

table.bt tbody td.member-order-table-line{

  display: none;

}



#member-order-table tbody tr td.member-order-number{

  background: #c1e5ff;

}



#member-order-table tbody tr td{

  text-align: left;

}

#member-order-detail-table tbody tr:first-child td {

    border-top: 0;

}

#member-order-detail-table tbody tr td {

    border-bottom: 0;

    text-align: left;

}

.member-order-detail-name{

  background: #e4ebff;

}

.product-order-detail-shipping {

    text-align: left;

    margin: 15px 10px;

}

.product-order-detail-price {

    text-align: left;

    margin: 15px 10px;

}

.member-order-detail-data-name{

  padding: 0;

}



#member-refund-application-table tbody tr td {

    text-align: left;

}



#member-refund-record-table tbody tr td {

    text-align: left;

}



#member-refund-application-table tbody tr td:first-child,

#member-refund-record-table tbody tr td:first-child  {

    background: #c1e5ff;

}



}



@media(max-width: 768px){

.member-box-01{

  padding: 10% 0;

}

.member-collection-info{

  text-align: center;

}

.member-bg{

    background-image: none;

}



}



@media(max-width: 568px){

.member-box-01{

  padding: 10% 2%;

  margin-bottom: 40px;

  border: 0;

}

.member-content-text {

    font-size: 11pt;

    padding: 0 5px;

    box-sizing: border-box;

}

.member-refund-popu-word{

  width: 100%;

}



.member-required {

    position: initial;

    margin-bottom: 20px;

}



}



@media(max-width: 567px){

.member-sp-text-02 {

    padding-left: 0;

    color: #c30d23;

}



.member-collection-pic{

    width: 100%;

    margin-right: 0;

}

}



@media(max-width: 480px){

.member-sp-text-01{

  display: none;

}

.member-form-text{

  width: 100%;

}

.radio-receipt-left-02{

  margin-left: 0;

}

.radio-time-left{

  margin-left: 0;

}



.member-title-img {

    display: none;

}

.memeber-form-vc {

    margin: -20px 0 0 0;

}

}





.index-about-box{

    position: relative;

    overflow: hidden;

    background: url(../img/africa-bg.jpg) no-repeat;

    background-position: center;

    overflow: hidden;

}



.index-about-fish{

    position: relative;

}



.index-about-fish img{

    position: absolute;

    right: 0;

    bottom: -20px;

} 



.index-about-box img{

    max-width: 100%;

    height: auto;

}







@media (min-width: 768px) and (max-width: 1700px) {

    .index-intro-box {

        height: 500px;

    }

    .index-about-fish img{

        width: 55%;

    }    

}

@media (max-width: 767px){

    .index-about-fish img{

        width: 80%;

    }

}



@media (max-width: 767px){

    .index-about-box {

        background-position: left;

    }

}



.project-list ul{

  display: flex;

  justify-content: center;

  flex-wrap: wrap;

  border-top: 1px solid #6665;

  border-bottom: 1px solid #6665;

  margin-bottom: 80px;

}



.project-list ul li{

  color: #006837;

  opacity: .5;  

  letter-spacing: 2px;

  position: relative;

  padding-left: 20px;

  margin: 10px;

}



.project-list ul li:before{

  content: '';

  display: inline-block;

  opacity: .5;

  width: 8px;

  height: 8px;

  background: #3165e7;

  position: absolute;

  left: 7px;

  top: 10px;

}



.project-list ul li a {

    font-size: 18px;

    letter-spacing: 2px;

    color: #000;

}



.project-list ul li.active,

.project-list ul li.active:before{

  opacity: 1;

}



.project-list ul li:hover{

  opacity: 1;

  transition: .3s ease;

}



.project-list ul li:hover:before{

  opacity: 1;

  transition: .3s ease;

}





.m_classLink{

  display:none;

  text-align: center;

  margin-bottom: 30px;

}



.classLink{

  display: block;

}  





/*640*/

@media (max-width: 640px){



  ul.classLink{

    display:none;

  }



  .m_classLink{

    display:block;

    position:relative;

    z-index: 100;

  }



  .m_classLink a.main{

    display: block;

    font-size: 18px;

    text-align: center;

    color: #ffffff;

    border: 1px solid #3165e7;

    background: #3165e7;

    position: relative;

    padding: 10px;

  }



  .m_classLink a.main i{

    display:block;

    font-size:15px;  

    position:absolute;

    right:10px;

    top:50%;

    margin-top:-6px;

  }



  .m_classLink ul{

    padding:0;

    list-style:none;  

    display:none;

    width:100%;

    background:#FFF;

    border:1px solid #d1d1d1;

    position:absolute;

    left:0;

    top:100%;

    z-index:99;  

    box-sizing:border-box;

  }



  .m_classLink ul li{

    padding:0;

  }



  .m_classLink ul li a{

    position: relative;

    display:block;

    color:#000;

    padding: 15px;

    border-top:1px solid #d1d1d1;

    opacity: 1;

  }



  .m_classLink ul li dt a:after{

    content: '';

    width: 5px;

    height: 5px;

    background: #000;

    position: absolute;

    left: 2px;

    top: 24px;

  }



  .m_classLink ul li:first-child a{

    border:none;

  }



  .project-list ul{

    margin-bottom: 60px;

  }



  .project-list ul li a {

    font-size: 16px;

  }



  .project-list ul li{

    margin: 0;

  }



  .project-list ul li:before{

    display: block;

  }



  .project-list ul li:before{

    display: none;

  }



}



.index-bg-fish a{

    display: block;

}



.content-wrapper{

  background: url(../img/inner-bg.jpg) repeat;

}



.about-content .content-direction{

  display: flex;

  justify-content: space-between;

  align-items: center;



}



.about-content .content-direction:nth-child(2){

  flex-direction: row-reverse;

}



@media (max-width: 1024px) {

  .about-content{

    padding: 0 20px;

  }

 

}



@media (max-width: 768px) {

  .about-content .content-direction,

  .about-content .content-direction:nth-child(2){

    flex-direction: column;

  }  

}



.red-line{

  color: #d10000;

}



.m-auto{

  margin: 0 auto;

}

/*

.link-url{

  display: block;

}*/