/* kv */
#kv{
    position: relative;
    width: 100%;
}
.navb-cont {
  position: absolute;
  right: 5%;
  bottom: 10%;
}


.navB{
    position: relative;
    background-color: #fff;
    width: 235px;
    height: 100%;
}
@media screen and (min-width:801px){
  #wrapper{
    margin: 0 auto!important;
  }
  .logo {
      padding: 1em;
  }
  .catche{
    position: absolute;
    color: #333;
    top: 20px;
    left: 235px;
    line-height: initial;
    font-size: 20px;
}

  .floor{
      position: absolute;
      bottom: 0; 
      right: 0;
  }
  .sns-logo img {
    width: 30%!important;
}
  h1 {
    font-weight: 100;
    letter-spacing: 2px;
  }
}
@media screen and (max-width:800px){
  .kv-img img{
    display: none;
  }
  .kvsp{
    margin-top: 15%;
  }
  #wrapper{
    margin: 0 auto!important;
  }
  .floor {
    width: 40%;
    position: absolute;
    bottom: 1%;
    left: 1%;
  }
  .catche {
    text-align: center;
    margin: 10% 0 5%;
    color: #333;
    font-size: 4vw;
    font-weight: 100;
    width: 100%;
    letter-spacing: 1px;
  }
  .news {
    position: relative;
    /* margin: 12% auto 0; */
    padding: 9% 0;
    overflow: hidden;
    text-align: center;
  }
  .news img{
    width: 80%;
  }
  .news_icon {
    position: absolute;
      top: 2%;
      right: 1%;
  }
  .news_icon img{
    width: 80%;
    -webkit-animation:spin 9s linear infinite; 
    -o-animation:spin 9s linear infinite;
    animation:spin 9s linear infinite;
  }
  .new {
    text-shadow: -1px -1px 0 #FFF, 1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px 1px 0 #FFF;
    font-family: dinosaur, sans-serif;
    font-style: italic;
    position: absolute;
    top: 10%;
    right: 7%;
  }
  .des {
    position: absolute;
    bottom: 14.3%;
    left: 10%;
    width: 80%;
    height: 25px;
    background-color: black;
    color: #fff;
    padding: 3px;
    box-sizing: border-box;
    opacity: 0.7;
  }
  .lowei img{
    width:50%;
  }
}
.navB ul{
    position: absolute;
    bottom: 0;
    right: 0;
    margin: 0;
}

.navB ul li{
  list-style: none;
  /* line-height: 0.5em; */
    /* margin-top: 15px; */
    color: #333;
    font-size: 20px;
    text-align: right;
    margin-right: 3em;
}

.navB ul li a{
    text-decoration: none;
    color: #333;
}

/* navb button hover */

a{
  text-decoration:none;
}
.label {
  text-align: right;
  padding: 40px 20px 2px;
  font-size: 25px;
  font-weight:lighter;
  color: #333;
  white-space: nowrap;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  text-decoration: none;
}

.navb-item:hover a p.about-label span, .navb-item:hover a p.products-label span, .navb-item:hover a p.gallery-label span, .navb-item:hover a p.qna-label span, .navb-item:hover a p.contact-label span{
  display: none;
}

.navb-item:hover a p.about-label:after{
  display: inline-block;
  content:'關於我們';
  font-size: 22px;
  transition: all 0.35s;
  border-bottom: #dec497 solid 3px;
}
.navb-item:hover a p.products-label:after{
  display: inline-block;
  content:'產品分類';
  font-size: 22px;
  transition: all 0.35s;
  border-bottom: #dec497 solid 3px;
}
.navb-item:hover a p.gallery-label:after{
  display: inline-block;
  content:'作品集';
  font-size: 22px;
  transition: all 0.35s;
  border-bottom: #dec497 solid 3px;
}
.navb-item:hover a p.qna-label:after{
  display: inline-block;
  content:'常見問題';
  font-size: 22px;
  transition: all 0.35s;
  border-bottom: #dec497 solid 3px;
}
.navb-item:hover a p.contact-label:after{
  display: inline-block;
  content:'聯絡我們';
  font-size: 22px;
  transition: all 0.35s;
  border-bottom: #dec497 solid 3px;
}
/* navb button hover */
.sns-logo {
  text-align: right;
  margin: 4em 1em 0;
}
.kv-img{
    position: absolute;
    top: 70px;
    left: 235px;
    width: calc(100% - 235px);
    height: calc(100% - 70px);
    overflow: hidden;
}

.kv-img img{
    width: 100%;
    display: block;
    height: auto;
    overflow: hidden;
}
#about img {
  width: 100%;
}


@media screen and (min-width:801px){
.news{
    position: absolute;
    top: 0;
    right: 0;
    padding: 20px;
}

.news img:hover{
    transform: translateY(10px);
    transition-timing-function:ease-in-out;
    transition-duration:0.5s;
}

.news a {
  position: relative;
}
.news_icon{
    position: absolute;
    top: 185px;
    right: 265px;
}
.news_icon img{
    width: 80px;
    -webkit-animation:spin 9s linear infinite; 
    -o-animation:spin 9s linear infinite;
    animation:spin 9s linear infinite;
}
.des {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 282px;
  height: 35px;
  background-color: black;
  color: #fff;
  padding: 6px;
  box-sizing: border-box;
  opacity: 0.7;
}

.news span{
    font-size: 20px;
    position: absolute;
    top: 200px;
    right: 274px;
    text-shadow: -1px -1px 0 #FFF, 1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px 1px 0 #FFF;
    font-family: dinosaur, sans-serif;
    font-style: italic;
}
}
@media screen and (max-width: 1280px){
    .kv-img img{
        /*transform: translateX(0px) translateY(0px);*/
        width: auto;
        height: 100%;
        }
}

@media only screen and (min-width: 1281px) and (max-width: 1645px) {
    .kv-img img{
    height: 100%;
    width: auto;
   } 
} 

@media screen and (min-width: 1645px){
    .kv-img img{
        width: 100%;
        }
}
#kv {
  position: relative;
}
#kv img{
  width: 100%;
}
/* kv E */

.cont {
  width: 90%;
  margin: 0 auto;
}
.cont p {
  line-height: 30px;
  color: #666;
  font-weight: 100;
  text-align: justify;
}

/* gallery cont */
.gallery .cont{
  padding: 1em;
}

.gallery .cont .gallery-img{
  position: relative;
  float: left;
  width: 23.6%;
  padding: 0.7%;
  overflow: hidden;
}

.gallery .cont .gallery-img img{
  width: 100%;
}
.gallery .cont .gallery-img p{
  /* display: none; */
  position: absolute;
  background-color: #333;
  opacity: .7;
  width: 100%;
  height: auto;

}
.gallery-wrap{
  position: relative;
  width: 23%;
  float: left;
  overflow: hidden;
  padding: 1%;
}
.gallery-wrap img{
  width: 100%;
}
.gallery-detail{
  position: absolute;
  line-height: 25px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 4%;
  background-color: #333;
  color: #fff!important;
  text-align: center!important;
  opacity: 0;
  transition: opacity .2s, visibility .2s;
  padding: 25% 0;
  display: block;
}
.gallery-wrap:hover p.gallery-detail{
  visibility: visible;
  opacity: .8;
}
#gallery{
  width: 100%;
}
.slider {
  width: 100%;
  height: 0;
  position: relative;
  padding-top: 55%;
}
.slider iframe {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 280px;
  position: absolute;
  top: 0;
  left: 0;
}
@media screen and (max-width:320px){
  .slider iframe {
    width: 320px;
  }
}
@media only screen and (min-width: 321px) and (max-width: 360px) {
  .slider iframe {
    width: 360px;
  }
} 
@media only screen and (min-width: 360px) and (max-width: 375px) {
  .slider iframe {
    width: 375px;
  }
} 
@media only screen and (min-width: 376px) and (max-width: 414px) {
  .slider iframe {
    width: 414px;
  }
} 
/* gallery cont E */

/* about cont S */
.about_us{
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
}
.about_us .cont p{
  font-size: 16px;
  color: #666;
  text-align: left;
  line-height: 30px;
}
@media screen and (min-width:801px){
  .advantage ul{
    float: left;
    width: 27%;
    padding: 3% 3% 0;
  }
  .advantage ul li {
    margin: 15px 0;
    line-height: 25px;
    text-align: left;
    font-size: 14px;
    line-height: 25px;
  }
}
@media screen and (max-width:800px){
  .advantage ul{
    margin: 4% 0;
  }
  .advantage ul li{
    display: inline-block;
  }
  .advantage ul li img{
    width: 100%;
  }
  .advantage ul li p{
    width: 70%;
  }
  .advantage ul li.icon {
    width: 30%;
    position: unset;
    margin-top: 5%;
    transform: translateY(-5%);
  }
  .advantage ul li.detail{
    font-size: 4vw;
    line-height: 7vw;
    margin-left: 3%!important;
  }
}
/* about cont E */

/* bottom */
#bottom{
  width: 320px;
  margin: 50px auto;
  text-align: center;
  line-height: 2em;
}
#bottom p{
  text-align: center;
  width: 320px;
}
#bottom img {
  width: 200px;
}
#footer_pc img {
  width: 250px;
  margin-bottom: 50px;
}
.btn_more-contact a{
    padding: 0.6em 1em 0.8em!important;
}
.btn_more-contact a:hover{
  padding: 0.6em 1em 0.8em;
}
h2 {
  font-size: 20px!important;
  font-weight: 100;
  margin: 0.5em 0!important;
}
/* bottom */