@charset "UTF-8";

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video, button {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  /*font-size: 100%;*/
  vertical-align: baseline;
  /*background:transparent;*/
  box-sizing: border-box; /*mo*/
}

body {
  line-height: 1;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

nav ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

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

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  text-decoration: none;
}

p {
  padding-bottom: 20px;
}

/* change colours to suit your needs */
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}

/* change colours to suit your needs */
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

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

/* change border colour to suit your needs */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

input, select {
  vertical-align: middle;
}

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

ol, ul {
  list-style: none;
}

button {
  background: none;
  border: none;
  cursor: pointer;
  display: block;
  line-height: 1;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/* clear */
.clear,
.clearfix {
  zoom: 100%;
}

.clear:after,
.clearfix:after {
  content: "";
  clear: both;
  height: 0;
  display: block;
  visibility: hidden;
}

html, body {
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: 100%;
  color: #fff;
  color: #333;
  min-width: 980px;
}

#p-manu, .products-page, .csr-page, .customers-page, .aboutus, .home {
    background: url(../img/bg2.png);
}

.p-hist-title {
  margin-top: 120px;
  margin-bottom: 0px;
}

html.home, {
  background: #fff;
}

.f1,
.f1b {
  /*font-family: 'Roboto', sans-serif;*/
  font-family:avenir_tplight,Avenir,Arial,sans-serif;
  font-weight: 500;/*was 400*/
  /*letter-spacing: .2em;mo*/
}

.f1b {
  font-weight: 700;
}

.f2 {
  font-family: 'Oswald', sans-serif;
}

.sp {
  display: none;
}

body > svg {
  display: none;
}

svg + .fallback {
  display: none !important;
  background: none !important;
}

#wrapper {
  position: relative;
  height: auto !important;
  height: 100%;
  min-height: 100%;
}

#wrapper:after {
  /*position: fixed;*/
  top: 0;
  left: 50%;
  margin-left: -480px;
  width: 960px;
  height: 100%;
  background: #fff;
  /*content: '';*/
}

.csr-page #wrapper.csr-wrapper:after, .aboutus #wrapper.csr-wrapper:after {
  background-color: transparent; !important;
}


#wrapper #contents {
  /*padding: 70px 0 75px; mo*/
  padding: 120px 0 75px;
  width: 960px;
  margin: 0 auto;
  z-index: 1;
  position: relative;
  background: #333;
  background: #fff;
}

#wrapper footer {
  position: relative;
  z-index: 1;
  left: 0;
  bottom: 0;
  width: 100%;
  /*height: 75px;*/
  /*background: linear-gradient(0deg, rgba(0, 0, 0, 0.16) 0px, rgba(0, 0, 0, 0) 76%), linear-gradient(0deg, #a4c28c 0%, #a4c28c 0px, #bfd592 200px, #bfd592 100%);*/
  background: linear-gradient(0deg, #96c385 0%, #96c385 0px, #bfd592 200px, #bfd592 100%);

}

#wrapper footer:after {
  background: linear-gradient(-45deg, #bfd592 6px, transparent 0), linear-gradient(45deg, #bfd592 6px, transparent 0);
  background-position: left-bottom;
  background-repeat: repeat-x;
  background-size: 12px 12px;
  content: " ";
  display: block;
  position: absolute;
  top: -12px;
  left: 0px;
  width: 100%;
  height: 12px;
}

#wrapper footer .container-fluid {
  max-width: 960px;
}

#wrapper footer .double-line {
  border-top: double 4px #fff;
  position: absolute;
  width: 100%;
  left: 0px;
  top: 4px;
}

#wrapper footer .double-line:after {
  content: " ";
  border-top: solid 1px #fff;
  position: absolute;
  width: 100%;
  left: 0px;
  top: 2px;
}

#wrapper footer #copyright {
  text-align: center;
  line-height: 75px;
  color: #fff;
  font-size: 12px;
  font-family: Helvetica, sans-serif;
}

#wrapper footer #copyright a {
  color: #fff;
}

#wrapper footer .contact-form {
  padding: 40px 10px 0;
}

#wrapper footer h4 {
  color: white;
  padding-bottom: 10px;
  font-weight: 500;
}

.form-label {
  font-weight: 700;
  margin-bottom: 5px;
}

footer .form-control, footer .btn {
  font-size: 1.6rem;
}

.office-info {
  margin-bottom: 5px;
}

footer .certificate-img {
  max-height: 46px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  float:left;
  margin-left: 2px;
  margin-right: 2px;
  margin-bottom: 2px;
}

#map {
  width: 100%;
  height: 200px;
  margin-right: 10px;
  margin-top: 10px;
}
.our-office-f {
  line-height: 1.2;
}
@media screen and (min-width: 766px) {
  footer .contact-us-f, footer .certificates-f, footer .certificates-badge {
    padding-left: 0;
  }
}
@media screen and (max-width: 766px) {
  footer .contact-us-f, footer .our-office-f, footer .certificates-f, footer .certificates-badge {
    padding: 10px;
  }
}

/* header */
header {
  padding: 15px 0 5px;
  /*background: linear-gradient(#bfd592, #bfcb8c);*/
  /*background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.1) 76%), linear-gradient(0deg, #bfcb8c 0%, #bfcb8c 0px, #bfd592 40px, #bfd592 100%);*/
  background: linear-gradient(0deg, #c9d79d 0%, #c9d79d 0px, #bfd592 40px, #bfd592 100%);
  box-shadow: 0 1px 15px rgba(0,0,0,0.14);
  top: 0;
  left: 0;
  position: fixed;
  width: 100%;
  z-index: 1000;
  color: #fff;
  min-width: 980px;
  box-sizing: border-box;
  height: 120px;
  /*border-bottom: 2px solid white;*/
}

header #lang {
  position: absolute;
  left: 50%;
  margin-left: 400px;
  top: 15px;
}

header #lang a {
  display: block;
  font-size: 12px;
  border: solid 1px #fff;
  width: 38px;
  height: 13px;
  line-height: 13px;
  text-align: center;
  float: left;
  color: #fff;
}

header #lang a.en {
  border-left: none;
}

header #lang a.current, header #lang a:hover {
  background: #666;
  color: #fff;
}

.nav-secondary {
  position: absolute;
  left: 42%;
  top: 0;
}

.button-nav-secondary {
  float: left;
  margin-left: 10px;
  border-radius: 0 0 5px 5px;
  border-width: 0;
  background-color: #f7f7f7;
  border-color: #f7f7f7;
  padding-left: 36px;
  -webkit-box-shadow: none;
  font-size: 14px;
  color: #555;
  line-height: 26px;
  height: 38px;
  text-align: center;
  vertical-align: middle;
  padding: 6px 12px;
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}

header #logo {
  display: block;
  /*width: 197px; mo*/
  width: 96px;
  margin: 0 auto;
}

header #logo .logo2 {
  display: block;
  margin: 15px auto;
}

header #ec {
  position: absolute;
  left: 50%;
  margin-left: -480px;
  bottom: 7px;
  font-size: 14px;
  color: #fff;
}

header #ec span {
  margin-left: 7px;
  position: relative;
  top: -3px;
}

header #ec:hover span {
  text-decoration: underline;
}

header nav {
  /*margin: 15px auto 0; mo*/
  margin: 45px auto 0; /*was 60px*/
  width: 960px;
}

header nav ul {
  font-size: 0;
  /*text-align: center; mo*/
  padding-bottom: 5px;
}

header nav ul.sns {
  position: absolute;
  left: 50%;
  margin-left: 310px;
  width: 170px;
  text-align: right;
  bottom: 1px;
}

header nav ul.sns li {
  border: none;
  vertical-align: middle;
  padding: 0;
  margin: 0 8px;
}

header nav ul.sns li.share {
  font-weight: bold;
  color: #666;
  font-size: 13px;
}

header nav ul.sns li.fb {
  width: 10px;
}

header nav ul.sns li.tw {
  width: 20px;
}

header nav ul.sns li.line {
  width: 20px;
  margin: 0 0 0 5px;
}

header nav ul.sns li a:hover img {
  -ms-transform: scale(1.2, 1.2);
      transform: scale(1.2, 1.2);
}

header nav ul.sns li img {
  width: 100%;
  transition: all .2s linear;
}

header nav ul.hide .info {
  display: none;
}

header nav ul li {
  /*font-size: 14px; mo*/
  font-size: 21px;
  display: inline-block;
  /*padding: 0 10px 0 13px; mo*/
  /*border-left: solid 1px #fff; mo*/
  color: #fff;
  position: relative;
}

header nav ul li.hide {
  display: none;
}

header nav ul li.first {
  padding-left: 0;
  border: none;
}

header nav ul li.last {
  padding-right: 0;
}

header nav ul li a {

  color: #fff;
}

header nav ul li a:hover {
  /*color: #999;*/
  color: #fff;
  text-decoration: none;
}

header nav ul li a.current {
  /*color: #999;
  border-bottom: 4px solid #f6d53e;*/
}

header nav ul li a:hover span, header nav ul li a.current span {
  border-bottom: solid 1px #999;
}

header nav ul li .sub-wrap {
  position: relative;
}

header nav ul li .sub-wrap .sub-in {
  width: 250px;
  position: absolute;
  background: #000;
  top: -10px;
  left: 100%;
  height: 0;
  overflow: hidden;
  width: 220px;
}

header nav ul li .sub-wrap .sub-in li {
  font-size: 12px;
  /*
							&:before{
								content: '';
								width: 30px;
								text-align: center;
								height: 15px;
								line-height: 15px;
								letter-spacing: 0;
								display: inline-block;
								font-size: 10px;
								margin-right: 5px;
							}*/
}

header nav ul li .sub-wrap .sub-in li.new:before {
  content: 'NEW';
  background: #999;
}

header nav ul li .sub-wrap .sub-in li a {
  display: inline-block;
}

header nav ul li .sub-wrap .sub-in li a:before {
  display: none;
}

header nav ul li p {
  cursor: pointer;
}

header nav ul li p.current {
  color: #999;
  text-decoration: underline;
}

header nav ul li.sm .sub {
  width: 200px;
  margin-left: -50px;
}

header nav ul li .sub {
  position: absolute;
  width: 240px;
  left: 50%;
  margin-left: -85px;
  background: #000;
  height: 0;
}

header nav ul li .sub.product {
  width: 260px;
  margin-left: -60px;
}

header nav ul li .sub.product ul li a:before {
  display: none;
}

header nav ul li .sub.hide {
  overflow: hidden;
}

header nav ul li .sub ul {
  padding: 10px 0;
  text-align: left;
}

header nav ul li .sub ul li {
  display: block;
  padding: 0 0 0 20px;
  height: 30px;
  line-height: 30px;
  border: none;
}

header nav ul li .sub ul li.multi {
  height: auto;
  line-height: 1;
  padding-bottom: 10px;
}

header nav ul li .sub ul li .label {
  display: inline-block;
  background: #fff;
  font-size: .6em;
  color: #000;
  letter-spacing: .05em;
  padding: 2px 3px;
  margin-bottom: 5px;
}

header nav ul li .sub ul li small {
  font-size: .7em;
  letter-spacing: .05em;
}

header nav ul li .sub ul li.new a:before {
  content: 'NEW';
  background: #fff;
}

header nav ul li .sub ul li a {
  display: block;
}

header nav ul li .sub ul li a:before {
  display: inline-block;
  width: 30px;
  height: 13px;
  content: '';
  font-size: 10px;
  color: #000;
  line-height: 13px;
  letter-spacing: 0;
  text-align: center;
  margin-right: 5px;
  position: relative;
  top: -1px;
}

#movie {
  position: fixed;
  top: 0;
  left: 100%;
  width: 100%;
  height: 100%;
  z-index: 1001;
}

#movie #screen {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -ms-transform: scale(1, 0);
      transform: scale(1, 0);
  background: url(../img/screen.png);
  transition: transform .3s ease-out;
}

#movie #screen.show {
  -ms-transform: scale(1, 1);
      transform: scale(1, 1);
}

#movie #v {
  position: absolute;
  width: 740px;
  left: 50%;
  top: 50%;
  margin: -208px 0 0 -370px;
  transition: transform .7s ease-out;
  -ms-transform: translate(0, -200%);
      transform: translate(0, -200%);
}

#movie #v.show {
  -ms-transform: translate(0, 0);
      transform: translate(0, 0);
}

#movie #v .close {
  position: absolute;
  right: 0;
  top: -60px;
  width: 50px;
  height: 50px;
  transition: transform .5s ease-out;
}

#movie #v .close img {
  display: block;
  width: 100%;
}

#movie #v .close:hover {
  -ms-transform: rotate(180deg);
      transform: rotate(180deg);
}

#movie.show {
  left: 0;
}

#instagram {
  margin: 60px auto 100px;
  width: 700px;
}

#instagram ul,
#instagram .fvc-feeds {
  width: 708px;
  font-size: 0;
  letter-spacing: 0;
  margin: -8px 0 0 -4px;
}

#instagram .fvc-feeds {
  font-size: 14px;
  line-height: 1.5;
}

#instagram li,
#instagram .fvc-feeds.fvc-fs-lrg .fvc-feed {
  display: inline-block;
  vertical-align: top;
  width: 110px;
  margin: 8px 4px 0 !important;
  height: 110px;
  overflow: hidden;
}

#instagram .fvc-feeds .fvc-feed,
#instagram .fvc-feeds .fvc-feed .fvc-feed-img {
  border-radius: 0;
}

#instagram .fvc-feeds .fvc-feed {
  box-shadow: none;
  padding: 0;
}

#instagram img {
  display: block;
  width: 100%;
}

#instagram .fvc-feeds .fvc-feed .fvc-feed-from img {
  width: 40px;
}

#instagram .fvc-feed-zoom {
  height: 500px;
  margin: 0;
  border-radius: 0;
}

#instagram .fvc-feed-zoom .fvc-feed-zoom-img {
  width: 50%;
  height: 100%;
  box-sizing: border-box;
  border-radius: 0;
  font-size: 0;
  letter-spacing: 0;
  text-align: center;
}

#instagram .fvc-feed-zoom .fvc-feed-zoom-img:before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 100%;
}

#instagram .fvc-feed-zoom .fvc-feed-zoom-img img {
  margin: 0 auto;
  position: relative !important;
  width: auto;
  height: auto;
  max-height: 100%;
  max-width: 100%;
  display: inline-block;
  vertical-align: middle;
}

#instagram .fvc-feed-zoom div.fvc-feed-message {
  height: 380px !important;
}

#instagram .fvc-feeds .fvc-feed .fvc-feed-img:hover img {
  -ms-transform: scale(1);
      transform: scale(1);
}

#instagram .link {
  display: block;
  margin-top: 7px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background: #fff;
  font-size: 0;
  letter-spacing: 0;
  transition: all .2s ease-out;
  border: solid 1px #fff;
  box-sizing: border-box;
}

#instagram .link:hover {
  background: none;
}

#instagram .link:hover path,
#instagram .link:hover circle {
  fill: #fff;
}

#instagram .link:hover p {
  color: #fff;
}

#instagram .link svg {
  height: 60%;
  width: auto;
  display: inline-block;
  vertical-align: middle;
  padding-bottom: 3px;
}

#instagram .link path,
#instagram .link circle {
  transition: all .2s ease-out;
  fill: #000;
}

#instagram .link p {
  font-size: 14px;
  display: inline-block;
  vertical-align: middle;
  color: #000;
  letter-spacing: .1em;
  font-weight: bold;
  margin-left: 7px;
  transition: all .2s ease-out;
}

@media screen and (max-width: 767px) {
  html, body {
    min-width: 100%;
  }
  #wrapper:after {
    margin-left: 0;
    width: 100%;
  }
  #wrapper #contents {
    padding: 58px 0 30px; /* previously 40px*/
    width: 100%;
    box-sizing: border-box;
  }
  #wrapper footer {
    /*height: 40px;*/
  }
  #wrapper footer #copyright {
    line-height: 40px;
  }
  header {
    height: 58px;
    min-width: 100%;
    box-sizing: border-box;
    border: none;
    padding: 0;
  }
  header #lang, header .nav-secondary{
    display: none;
  }
  header #logo {
    width: 180px;
    margin: 0 auto;
    position: relative;
    top: 50%;
    -ms-transform: translate(0, 5%); /*mo*/
        transform: translate(0, 5%); /*mo*/
    z-index: 9999;
        background: ;
    -webkit-filter: drop-shadow(1px 1px 2px rgba(0,0,0,.5));
  }
  header nav ul {
    text-align: center; /*mo*/
  }
  header #logo img {
    display: block;
    /*width: 100%; mo*/
    width: 50px;
    height: 50px;
  }
  header nav {
    margin-top: 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #bfd592; /*from #333*/
    z-index: 1000;
    transition: all .5s ease-out;
    -ms-transform: translate(-100%, 0);
        transform: translate(-100%, 0);
  }
  header nav.show {
    -ms-transform: translate(0, 0);
        transform: translate(0, 0);
  }
  header nav .sp_nav_wrap {
    height: 100%;
    position: relative;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    padding: 30px 0 0;
    box-sizing: border-box;
  }
  header nav #sp_lang {
    display: block;
    font-size: 0;
    letter-spacing: 0;
    text-align: center;
  }
  header nav #sp_lang a {
    display: inline-block;
    width: 20%;
    height: 25px;
    border: solid 1px #fff;
    color: #fff;
    font-size: 15px;
    letter-spacing: .1em;
    line-height: 25px;
    font-weight: bold;
  }
  header nav #sp_lang a:nth-of-type(1) {
    border-right: none;
  }
  header nav #sp_lang a.current {
    background: #fff;
    color: #333;
  }
  header nav ul {
    position: relative;
    padding-top: 30px;
    float: none;
  }
  header nav ul.sns {
    margin: 0;
    bottom: auto;
    position: relative;
    left: auto;
    width: auto;
    text-align: center;
    padding-bottom: 30px;
  }
  header nav ul.sns li {
    display: inline-block;
    margin: 0 15px;
  }
  header nav ul.sns li.share {
    display: block;
  }
  header nav ul.sns li.fb {
    width: 15px;
  }
  header nav ul.sns li.tw, header nav ul.sns li.line {
    width: 30px;
  }
  header nav ul.sns li.line {
    margin: 0 0 0 12px;
  }
  header nav ul li {
    font-size: 17px;
    display: block;
    padding: 0;
    border-left: none;
    line-height: 3em;
  }
  header nav ul li .sub-wrap {
    position: relative;
  }
  header nav ul li .sub-wrap .sub-in {
    width: 100%;
    position: relative;
    top: 0;
    left: 0;
    background: #333;
    height: 0;
    overflow: hidden;
  }
  header nav ul li .sub-wrap .sub-in li {
    font-size: 12px;
    line-height: 2;
  }
  header nav ul li .sub {
    position: relative;
    width: 100%;
    left: 0;
    margin-left: 0;
    height: 0;
  }
  header nav ul li .sub.product {
    width: 100%;
    margin-left: 0;
  }
  header nav ul li .sub ul {
    text-align: center;
  }
  header nav ul li .sub ul li {
    padding: 0;
    height: auto;
  }
  header nav ul li .sub ul li.new a:before {
    display: inline-block;
  }
  header nav ul li .sub ul li a {
    display: inline-block;
  }
  header nav ul li .sub ul li a:before {
    display: none;
  }
  header nav ul li.sm .sub {
    width: 100%;
    margin-left: 0;
  }
  header nav .ctg-point {
    display: none;
  }
  header .global_nav {
    display: block;
    width: 20px;
    height: 16px;
    position: absolute;
    right: 10px;
    top: 50%;
    z-index: 1001;
    -ms-transform: translate(0, -50%);
        transform: translate(0, -50%);
  }
  header .global_nav hr {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border: none;
    padding: 0;
    margin: 0;
    background: #fff;
    transition: all .2s linear;
  }
  header .global_nav hr:nth-of-type(1) {
    top: 0;
  }
  header .global_nav hr:nth-of-type(2) {
    top: 7px;
  }
  header .global_nav hr:nth-of-type(3) {
    bottom: 0;
  }
  header .global_nav.open hr:nth-of-type(1) {
    -ms-transform: translateY(7px) rotate(-45deg);
        transform: translateY(7px) rotate(-45deg);
  }
  header .global_nav.open hr:nth-of-type(2) {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }
  header .global_nav.open hr:nth-of-type(3) {
    -ms-transform: translateY(-7px) rotate(45deg);
        transform: translateY(-7px) rotate(45deg);
  }
  #movie #v {
    width: 100%;
    left: 50%;
    top: 50%;
    margin: 0;
    transition: transform .7s ease-out;
    -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }
  #movie #v.show {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
  }
  #movie #v .close {
    right: 15px;
    top: 50px;
    width: 25px;
    height: 25px;
  }
  #movie #v .close:hover {
    -ms-transform: rotate(0);
        transform: rotate(0);
  }
  #movie #v iframe {
    width: 100%;
  }
  #instagram {
    width: auto;
    margin: 52px 0 0;
    padding: 0 15px;
  }
  #instagram ul,
  #instagram .fvc-feeds {
    width: auto;
    margin: 0;
  }
  #instagram li {
    width: 32%;
    height: auto;
    margin: 7px 0 0;
  }
  #instagram li:nth-of-type(3n + 2) {
    margin-left: 2%;
    margin-right: 2%;
  }
  #instagram .fvc-feeds.fvc-fs-mid .fvc-feed {
    width: 32%;
    height: auto;
    margin: 7px 0 0;
    margin-bottom: 0 !important;
  }
  #instagram .fvc-feeds.fvc-fs-mid .fvc-feed:nth-of-type(3n + 2) {
    margin-left: 2%;
    margin-right: 2%;
  }
  #instagram .fvc-feed-zoom {
    height: 400px;
  }
  #instagram .fvc-feed-zoom .fvc-feed-zoom-img {
    width: 100%;
    height: 50%;
  }
  #instagram .fvc-feed-zoom .fvc-feed-info {
    width: 100%;
    margin: 0;
    height: 50%;
  }
  #instagram .fvc-feed-zoom div.fvc-feed-message {
    width: 100%;
    max-height: 90px;
    height: 90px !important;
    -webkit-overflow-scrolling: touch;
  }
  #instagram .fvc-feeds .fvc-desc-navi {
    font-size: 25px;
  }
}

/* Slider */
.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0;
}

.slick-list:focus {
  outline: none;
}

.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.slick-track:before, .slick-track:after {
  content: "";
  display: table;
}

.slick-track:after {
  clear: both;
}

.slick-loading .slick-track {
  visibility: hidden;
}

/*.slick-slide {
  float: left;
  height: 100%;
  min-height: 1px;
  display: none;
}

[dir="rtl"] .slick-slide {
  float: right;
}

.slick-slide img {
  display: block;
}

.slick-slide.slick-loading img {
  display: none;
}

.slick-slide.dragging img {
  pointer-events: none;
}

.slick-initialized .slick-slide {
  display: block;
} 

.slick-loading .slick-slide {
  visibility: hidden;
}

.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
  display: none;
}mo*/

html, body {
  -ms-content-zooming: none;
  -ms-touch-action: none;
}

.zoomer .zoomer-holder {
  -ms-touch-action: none;
}

.zoomer, .zoomer * {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.zoomer {
  background: #eee url(jquery.fs.zoomer-loading.gif) no-repeat center;
  height: 100%;
  overflow: hidden;
  position: relative;
  width: 100%;
  transition: none;
}

.zoomer .zoomer-positioner {
  margin: 0;
  height: 1px;
  position: absolute;
  width: 1px;
}

.zoomer .zoomer-holder {
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  position: relative;
  transition: none;
}

.zoomer .zoomer-image {
  cursor: move;
  float: left;
  height: 100%;
  width: 100%;
  transition: opacity 0.25 linear;
}

.zoomer .zoomer-tiles {
  height: 100%;
  position: relative;
  width: 100%;
}

.zoomer .zoomer-tile {
  height: auto;
  position: absolute;
  width: auto;
}

/* CONTROLS */
.zoomer .zoomer-controls {
  background: rgba(0, 0, 0, 0.8);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  border-radius: 3px;
  padding: 5px;
  position: absolute;
  transition: opacity 0.25 linear;
}

.zoomer .zoomer-controls span {
  border-radius: 3px;
  color: #fff;
  cursor: pointer;
  display: block;
  font-size: 20px;
  font-weight: bold;
  height: 30px;
  line-height: 30px;
  margin: 0;
  text-align: center;
  width: 30px;
}

.zoomer .zoomer-controls .zoomer-next,
.zoomer .zoomer-controls .zoomer-previous {
  display: none;
}

.zoomer.zoomer-gallery .zoomer-controls .zoomer-next,
.zoomer.zoomer-gallery .zoomer-controls .zoomer-previous {
  display: block;
}

/* CONTROLS - TOP, BOTTOM */
.zoomer .zoomer-controls-top,
.zoomer .zoomer-controls-bottom {
  left: 50%;
  margin: 0 0 0 -35px;
}

.zoomer .zoomer-controls-top {
  bottom: auto;
  top: 10px;
}

.zoomer .zoomer-controls-bottom {
  bottom: 10px;
  top: auto;
}

.zoomer.zoomer-gallery .zoomer-controls-top,
.zoomer.zoomer-gallery .zoomer-controls-bottom {
  margin: 0 0 0 -65px;
}

.zoomer .zoomer-controls-top span,
.zoomer .zoomer-controls-bottom span {
  float: left;
}

.zoomer .zoomer-controls-top span:first-child,
.zoomer .zoomer-controls-bottom span:first-child {
  margin: 0 1px 0 0;
}

/* CONTROLS - LEFT, RIGHT, TOP LEFT, TOP RIGHT, BOTTOM LEFT, BOTTOM RIGHT */
.zoomer .zoomer-controls-left,
.zoomer .zoomer-controls-top-left,
.zoomer .zoomer-controls-bottom-left .zoomer .zoomer-controls-right,
.zoomer .zoomer-controls-top-right,
.zoomer .zoomer-controls-bottom-right {
  height: 71px;
  width: 40px;
}

.zoomer.zoomer-gallery .zoomer-controls-left,
.zoomer.zoomer-gallery .zoomer-controls-top-left,
.zoomer.zoomer-gallery .zoomer-controls-bottom-left .zoomer.zoomer-gallery .zoomer-controls-right,
.zoomer.zoomer-gallery .zoomer-controls-top-right,
.zoomer.zoomer-gallery .zoomer-controls-bottom-right {
  height: 131px;
}

.zoomer .zoomer-controls-left,
.zoomer .zoomer-controls-right {
  margin: -35px 0 0 0;
  top: 50%;
}

.zoomer.zoomer-gallery .zoomer-controls-left,
.zoomer.zoomer-gallery .zoomer-controls-right {
  margin: -65px 0 0 0;
}

.zoomer .zoomer-controls-left {
  left: 10px;
}

.zoomer .zoomer-controls-top-left {
  left: 10px;
  top: 10px;
}

.zoomer .zoomer-controls-bottom-left {
  bottom: 10px;
  left: 10px;
}

.zoomer .zoomer-controls-right {
  right: 10px;
}

.zoomer .zoomer-controls-top-right {
  right: 10px;
  top: 10px;
}

.zoomer .zoomer-controls-bottom-right {
  bottom: 10px;
  right: 10px;
}

@media screen and (min-width: 980px) {
  .zoomer .zoomer-controls span:hover {
    background: #000;
  }
}

#concept h1, #technical h1, .container-com h1, .body-p h1,   .p-simplemasthead-positioning h1 {
  font-size: 3.2rem;
  line-height: 1;
  text-align: center;
  /*margin-bottom: 40px;*/
  letter-spacing: .1em;
  padding-bottom: 0.7em;
}

h1.look {
  font-size: 32px;
  line-height: 1;
  text-align: center;
  /*margin-bottom: 40px;*/
  letter-spacing: .1em;
  padding-bottom: 2em;
  padding-top: 3em;
}

.slick-looknfeel li .desc {
  paddign-top: 5%;
  padding-left: 5%;
}

.slick-looknfeel li .name {
  font-size: 28px;
  line-height: 1.5em;
  font-weight: 600;
}

#concept {
  line-height: 2.1em;
  font-size: 1.6rem;
}

@media screen and (max-width: 767px) {
  #concept {
    line-height: 2;
    font-size: 15px;
  }
}

#technical .block {
  font-size: 1.4rem;
  line-height: 1.7;
}

#technical .block img {
  vertical-align: top;
  max-width: 395px;
}

.series {
  font-size: 3.2rem;
  text-align: center;
  /*font-weight: bold;*/
  padding: 50px 0;
  letter-spacing: 0.1rem;
}

@media screen and (max-width: 767px) {
  .series {
    font-size: 2.8rem;
  }
}


.series.s1 {
  padding-left: 11px;
}

/*.series.s2 {
  padding-left: 9px;
}*/

.series.s3 {
  padding-left: 8px;
}

.sub-menu {
  font-size: 0;
  letter-spacing: 0;
  text-align: center;
  margin: 5px 0 30px -53px;
}

.sub-menu li {
  display: inline-block;
  vertical-align: top;
}

.sub-menu li:nth-of-type(2) {
  border-left: solid 1px #333;
  margin-left: 50px;
  padding-left: 50px;
}

.sub-menu li a,
.sub-menu li p {
  display: inline-block;
  width: auto;
  height: 40px;
  line-height: 30px;
  font-size: 18px;
  line-height: 40px;
}

.sub-menu li p {
  color: #ccc;
  color: #333;
  border-color: #333;
}

.sub-menu li a {
  color: #ccc;
  background: #000;
  background: #fff;
  transition: all .2s linear;
}

.sub-menu li a:hover {
  color: #333;
}

#slide {
  margin: 0 auto;
  position: relative;
  height: 540px;
}

#slide button {
  position: absolute;
  z-index: 1;
  top: 50%;
  width: 38px;
  margin-top: -38px;
  transition: all .2s ease-out;
}

#slide button img {
  width: 100%;
  height: auto;
}

#slide button.prev {
  left: 20px;
}

#slide button.next {
  right: 20px;
}

#slide button:hover {
  -ms-transform: scale(1, 0.7);
      transform: scale(1, 0.7);
}

#slide .images {
  width: 800px;
  margin: 0 auto;
  height: 540px;
  position: relative;
  overflow: hidden;
  z-index: 0;
}

#slide .images.bs2 ul li img {
  margin-top: -28px;
}

#slide .images.fadein ul li {
  width: 100%;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

#slide .images.fadein ul li.first {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

#slide .images ul {
  position: relative;
  height: 100%;
}

#slide .images ul li {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  height: 100%;
  width: 0;
  background: #fff;
}

#slide .images ul li.first {
  width: 100%;
}

#slide .images ul li.mt img {
  margin-top: -35px;
}

#slide .images ul li img {
  width: 800px;
  height: auto;
  display: block;
}

#slide .images ul li img.small {
  width: 720px;
  margin: 0 auto;
  position: absolute;
  left: 40px;
}

#slide .images ul li img.bs3-1 {
  margin-top: -40px;
}

#slide .images ul li img.bs3-2 {
  margin-top: -20px;
}

.dot {
  z-index: 1;
  text-align: center;
  font-size: 0;
  letter-spacing: 0;
  margin-top: 20px;
}

.dot li {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: #E6E6E6;
  border-radius: 16px;
  margin: 0 10px;
  cursor: pointer;
}

.dot li:hover, .dot li.current {
  background: #999;
}

.page-nav {
  font-size: 0;
  letter-spacing: 0;
  text-align: center;
  margin-top: 50px;
}

.page-nav li {
  font-size: 14px;
  display: inline-block;
  padding: 0 10px 0 13px;
  border-left: solid 1px #fff;
  border-left: solid 1px #333;
  color: #fff;
  color: #333;
  position: relative;
  letter-spacing: .2em;
}

.page-nav li.first {
  padding-left: 0;
  border: none;
}

.page-nav li.last {
  padding-right: 0;
}

.page-nav li a {
  color: #fff;
  color: #333;
}

.page-nav li a:hover, .page-nav li a.current {
  color: #999;
  text-decoration: underline;
}

.page-nav li p {
  cursor: pointer;
}

.page-nav li .sub {
  position: absolute;
  width: 240px;
  left: 50%;
  margin-left: -110px;
  background: #000;
  height: 0;
}

.page-nav li .sub.product {
  width: 260px;
  margin-left: -66px;
}

.page-nav li .sub.product ul li a:before {
  display: none;
}

.page-nav li .sub.hide {
  overflow: hidden;
}

.page-nav li .sub ul {
  padding: 10px 0;
  text-align: left;
}

.page-nav li .sub ul li {
  display: block;
  padding: 0 0 0 20px;
  height: 30px;
  line-height: 30px;
  border: none;
}

.page-nav li .sub ul li.new a:before {
  content: 'NEW';
  background: #fff;
}

.page-nav li .sub ul li a {
  display: block;
  color: #fff;
}

.page-nav li .sub ul li a:before {
  display: inline-block;
  width: 30px;
  height: 13px;
  content: '';
  font-size: 10px;
  color: #000;
  line-height: 13px;
  letter-spacing: 0;
  text-align: center;
  margin-right: 5px;
  position: relative;
  top: -1px;
}

.page-nav li .sub ul li a:hover {
  color: #999;
}

#concept {
  margin-top: 60px;
  background: #000;
  background: #fff;
  padding: 40px 130px;
  text-align: justify;
  text-justify: inter-ideograph;
}

#concept h1 small {
  font-size: 15px;
  letter-spacing: 0;
  margin-left: 5px;
}

#technical {
  margin-top: 20px;
  padding: 30px 0 70px;
}

#technical h1 {
  /*margin-bottom: 45px;*/
  padding-top: 10px;
}

/*----------------------
manufacturing
-----------------------*/
#technical h1#quality-control {
  padding-top: 60px;
}

#technical h1 small {
  font-size: 15px;
  letter-spacing: 0;
  margin-left: 5px;
}

#technical .block {
  margin-top: 100px;
  padding: 0 85px;
  overflow: hidden;
}

#technical .block:nth-of-type(1) {
  /*margin-top: 40px;*/
}

#technical .block.border .clear {
  border: solid 1px #ccc;
}

#technical .block.border .clear .left {
  box-sizing: border-box;
  padding: 30px;
}

#technical .block .ef {
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  position: relative;
  top: 30px;
}

#technical .block .ef.ef-no {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  top: 0;
}

#technical .block h2 {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
  margin-bottom: 30px;
  padding-top: 40px;
}

#technical .block h2 span {
  font-size: 1.6rem;
  margin-right: 15px;
}

#technical .block h3 {
  font-size: 1.6rem;
  margin: 30px auto;
  text-align: center;
  font-weight: bold;
}

#technical .block .left,
#technical .block .right {
  width: 49%;
  float: left;
  overflow: hidden;
}

#technical .block .left.wide, #technical .block .left.narrow,
#technical .block .right.wide,
#technical .block .right.narrow {
  margin: 0;
}

#technical .block .left.wide,
#technical .block .right.wide {
  width: 52%;
}

#technical .block .left.narrow.text,
#technical .block .right.narrow.text {
  width: 48%;
}

#technical .block .left.text,
#technical .block .right.text {
  width: 49%;
  margin-top: -5px;
}

#technical .block .left.text.just,
#technical .block .right.text.just {
  text-align: justify;
  text-justify: inter-ideograph;
}

#technical .block .left img,
#technical .block .right img {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
}

#technical .block .left small,
#technical .block .right small {
  display: block;
  font-size: 11px;
  text-align: right;
}

#technical .block .left {
  margin-right: 1%;
}

#technical .block .right {
  margin-left: 1%;
}

#technical .block .right.el1 {
  margin-top: 50px;
}

#technical .block .bs1-detail3 {
  font-size: 0;
  letter-spacing: 0;
  text-align: center;
  margin-bottom: 30px;
}

#technical .block .bs1-detail3 img {
  width: 263px;
  display: inline-block;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  position: relative;
  top: 30px;
}

#technical .block .bs2-detail3 {
  padding-top: 65px;
}

#technical .block .bs2-detail4 {
  padding-top: 65px;
}

#technical .block .bs3-detail2 {
  padding-top: 74px;
}

#technical .block .bs3-detail2.en {
  padding-top: 60px;
}

#product {
  margin: 70px auto 0;
  width: 790px;
  padding: 70px 0;
}

#product .product_nav {
  font-size: 0;
  letter-spacing: 0;
  text-align: center;
  margin-top: 30px;
}

#product .product_nav li {
  font-size: 20px;
  display: inline-block;
  height: 30px;
  line-height: 30px;
  border-left: solid 1px #333;
}

#product .product_nav li:nth-of-type(1) {
  border-left: none;
}

#product .product_nav li a {
  display: inline-block;
  padding: 0 30px;
  color: #999;
  transition: all .2s linear;
}

#product .product_nav li a.current, #product .product_nav li a:hover {
  color: #333;
}

#product.all {
  margin-top: 0;
  padding-top: 45px;
}

#product.all #products {
  font-size: 0;
  letter-spacing: 0;
  margin: -90px 0 0 -20px;
  width: 840px;
}

#product.all #products .product-wrap.sep {
  margin-top: 100px;
}

#product.all #products .glass {
  width: 400px;
  display: inline-block;
  border: none;
  margin: 20px 0 0 20px;
}

#product.all #products .glass.wide .menu img {
  width: 90%;
}

#product.all #products .glass .menu {
  height: auto;
}

#product.all #products .glass .menu img {
  position: relative;
  top: 0;
  width: 80%;
  left: auto;
  margin: 0 auto;
  display: block;
}

#product.all #products .glass .menu h1 {
  position: relative;
  line-height: 1;
  height: auto;
  font-size: 15px;
  margin: 20px 0 0;
  padding-bottom: 20px;
  width: auto;
  transition: all .5s linear;
}

#product.all #products .glass .menu h1 span {
  font-size: 10px;
  height: 15px;
  line-height: 15px;
  top: -2px;
  background: #333;
}

#product.all #products .glass .menu h1 span.date {
  display: block;
  background: none;
  color: #333;
  text-align: left;
  padding-top: 5px;
  margin-left: 29px;
  letter-spacing: .05em;
}

#product.all #products .glass .menu h1 span.colon, #product.all #products .glass .menu h1 span.ls {
  background: none;
  color: #333;
  font-size: inherit;
  top: auto;
  height: auto;
  line-height: 1;
  padding: 0;
  margin: 0;
}

#product.all #products .glass .menu h1 span.colon {
  margin-right: .5em;
}

#product.all #products .glass .menu h1 span.ls {
  letter-spacing: .1em;
}

#product.all #products .glass .menu h1 small {
  font-size: .7em;
  display: block;
  margin: 5px 0 0;
}

#product.all #products .glass .menu.open h1 {
  padding-bottom: 40px;
}

#product.all #products .vals-wrap {
  border: none;
  margin: 0 0 0 20px;
  width: 820px;
}

#product .left h1 {
  text-align: left;
}

#product .left h1 span {
  margin-left: 50px;
}

#product h1 {
  text-align: center;
  font-size: 31px;
  margin-bottom: 40px;
}

#product h1 span {
  display: inline-block;
  padding: 0 5px;
  background: #333;
  color: #fff;
  font-size: 12px;
  height: 19px;
  line-height: 19px;
  letter-spacing: 0;
  margin-right: 10px;
  position: relative;
  top: -5px;
}

.glass {
  width: 788px;
  background: #fff;
  margin: 10px auto 0;
  border: solid 1px #B2B2B2;
}

.glass .menu {
  height: 165px;
  padding-top: 15px;
  position: relative;
  cursor: pointer;
}

.glass .menu img {
  position: absolute;
  width: 370px;
  left: 30px;
  top: 50%;
  margin-top: -67px;
  transition: opacity .2s linear;
}

.glass .menu:hover img {
  opacity: .5;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}

.glass .menu h1 {
  height: 180px;
  line-height: 180px;
  text-align: center;
  top: 0;
  right: 0;
  width: 390px;
  font-size: 20px;
  position: absolute;
  color: #333;
}

.all .glass .menu {
  height: 120px;
}

.all .glass .menu img {
  width: 300px;
  margin-top: -54px;
}

.all .glass .menu h1 {
  height: 120px;
  line-height: 135px;
}

.vals-wrap {
  width: 788px;
  margin: 0 auto;
  overflow: hidden;
  height: 0;
  background: #fff;
  border: solid 1px #B2B2B2;
  border-top-color: #fff;
  position: relative;
  z-index: 1;
  top: -1px;
}

.vals-wrap .vals {
  padding: 40px 0 30px;
  text-align: center;
  color: #333;
}

.vals-wrap .vals .vals-title {
  color: #333;
  text-align: center;
  font-size: 20px;
}

.vals-wrap .vals ul {
  font-size: 0;
  text-align: center;
  color: #333;
  margin-top: 40px;
}

.vals-wrap .vals ul li {
  width: 250px;
  margin: 0 10px;
  display: inline-block;
}

.vals-wrap .vals ul.type-name {
  font-size: 14px;
}

.vals-wrap .vals ul.image {
  margin-top: 0;
}

.vals-wrap .vals ul.image li {
  margin-top: 50px;
  cursor: pointer;
  min-height: 1px;
}

.vals-wrap .vals ul.image li img {
  width: 100%;
  transition: opacity .2s linear;
}

.vals-wrap .vals ul.image li:hover img {
  opacity: .5;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}

.vals-wrap .vals .color,
.vals-wrap .vals .price {
  text-align: center;
  font-size: 12px;
}

.vals-wrap .vals .color span {
  display: inline-block;
  padding: 0 5px;
  background: #000;
  color: #fff;
  font-size: 10px;
  height: 15px;
  line-height: 15px;
  letter-spacing: 0;
  margin-right: 5px;
}

.vals-wrap .vals .price {
  margin-top: 5px;
}

.vals-wrap .vals .close {
  cursor: pointer;
  width: 95px;
  margin: 30px auto 0;
  transition: all .2s linear;
}

.vals-wrap .vals .close:hover {
  -ms-transform: scale(0.7, 1);
      transform: scale(0.7, 1);
}

.all .vals-wrap .vals ul {
  margin-top: 0;
}

#more-view {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  z-index: 1001;
}

#more-view.show {
  left: 0;
}

#more-view.show #screen2 {
  left: 0;
}

#more-view #screen2 {
  position: fixed;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  z-index: 0;
  background: url(../img/screen2.png);
  -ms-transform: scale(1, 0);
      transform: scale(1, 0);
  transition: transform .3s ease-out;
}

#more-view #screen2.show {
  -ms-transform: scale(1, 1);
      transform: scale(1, 1);
}

#more-view #view-content {
  width: 740px;
  margin: 0 auto;
  position: relative;
  padding: 30px;
  z-index: 1;
  color: #333;
  -ms-transform: translate(0, -100%);
      transform: translate(0, -100%);
  transition: transform .5s ease-out, opacity .5s ease-out;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  background: #fff;
}

#more-view #view-content.show {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  -ms-transform: translate(0, 0);
      transform: translate(0, 0);
}

#more-view #view-content .title {
  text-align: center;
  font-size: 20px;
  height: 50px;
  line-height: 50px;
  position: relative;
}

#more-view #view-content .title .label {
  height: 1em;
  margin: -25px .3em 15px 0;
  letter-spacing: .05em;
  display: inline-block;
}

#more-view #view-content .title .label span {
  font-size: .6em;
  color: #fff;
  padding: 4px 5px;
  display: inline-block;
  line-height: 1;
  background: #000;
  margin-right: 10px;
  position: relative;
  top: -2px;
}

#more-view #view-content .title small {
  font-size: .7em;
  display: block;
  color: #333;
  margin-top: -25px;
}

#more-view #view-content #view-image {
  height: 333px;
  overflow: hidden;
  margin-top: 30px;
  position: relative;
}

#more-view #view-content #view-image .wrap {
  position: relative;
  z-index: 0;
}

#more-view #view-content #view-image .wrap div {
  width: 100%;
  height: 333px;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

#more-view #view-content #view-image .wrap div img {
  position: absolute;
  top: 0;
  left: 0;
  width: 740px;
  height: 333px;
}

#more-view #view-content #view-image #board {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
}

#more-view #view-content #view-image #board.hide {
  cursor: none;
}

#more-view #view-content #view-image .zoom {
  position: absolute;
  top: 0;
  z-index: 1;
  width: 20px;
  height: auto;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

#more-view #view-content #view-image .zoom.show {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

#more-view #view-content #view-info {
  background: #fff;
  text-align: center;
  line-height: 1.5;
  padding: 20px 0;
  font-size: 0;
  letter-spacing: 0;
}

#more-view #view-content #view-info .wrap {
  display: inline-block;
  vertical-align: top;
  width: 240px;
  font-size: 12px;
  opacity: .3;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
  transition: all .2s linear;
}

#more-view #view-content #view-info .wrap.hover, #more-view #view-content #view-info .wrap:hover {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

#more-view #view-content #view-info .wrap.active {
  -ms-transform: scale(1.2, 1.2);
      transform: scale(1.2, 1.2);
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  /*&.hover{
						opacity: .5;
					}*/
}

#more-view #view-content #view-info .wrap.active a:hover {
  opacity: .5;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}

#more-view #view-content #view-info .wrap .label {
  display: inline-block;
  padding: 0 5px;
  background: #000;
  color: #fff;
  font-size: 10px;
  height: 15px;
  line-height: 15px;
  letter-spacing: 0;
  margin-right: 5px;
}

#more-view #view-content #view-info small {
  font-size: 10px;
  position: relative;
  top: -1px;
}

#more-view #view-content #view-info .text {
  margin-top: 10px;
}

#more-view #view-content #view-info .cart {
  margin-top: 20px;
  height: 30px;
}

#more-view #view-content #view-info .cart.hide a {
  display: none;
}

#more-view #view-content #view-info .date {
  margin-bottom: 20px;
}

#more-view #view-content #view-info a {
  color: #333;
  transition: opacity .2s linear;
}

#more-view #view-content #view-info a img {
  margin-right: 8px;
  position: relative;
  top: 4px;
}

#more-view #view-content #view-thumbnail {
  background: #fff;
  padding: 0 0 30px;
  font-size: 0;
  letter-spacing: 0;
  text-align: center;
}

#more-view #view-content #view-thumbnail .thumb {
  display: inline-block;
  margin: 0 20px;
  transition: all .2s linear;
}

#more-view #view-content #view-thumbnail .thumb.active {
  -ms-transform: scale(1.2, 1.2);
      transform: scale(1.2, 1.2);
}

#more-view #view-content #view-thumbnail .thumb.active .wrap {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  /*&:hover,
						&.hover{
							opacity: .5;
						}*/
}

#more-view #view-content #view-thumbnail .thumb p {
  text-align: center;
  font-size: 12px;
}

#more-view #view-content #view-thumbnail .wrap {
  position: relative;
  width: 200px;
  height: 90px;
  cursor: pointer;
  transition: opacity .2s linear;
  opacity: .3;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
}

#more-view #view-content #view-thumbnail .wrap:hover, #more-view #view-content #view-thumbnail .wrap.hover {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

#more-view #view-content #view-thumbnail .wrap div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 90px;
  overflow: hidden;
}

#more-view #view-content #view-thumbnail .wrap div img {
  display: block;
  width: 200px;
  height: 90px;
  position: absolute;
  top: 0;
  left: 0;
}

#more-view #view-content .close {
  position: absolute;
  top: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  transition: transform .5s ease-out;
}

#more-view #view-content .close img {
  display: block;
  width: 100%;
}

#more-view #view-content .close:hover {
  -ms-transform: rotate(180deg);
      transform: rotate(180deg);
}

@media screen and (max-width: 767px) {
  .series {
    padding-top: 18px;
    height: auto;
    line-height: 1;
    margin: 48px 0;
    padding-bottom: 0;
    font-weight: normal;
  }
  .sub-menu {
    margin: 0 0 30px;
  }
  .sub-menu li:nth-of-type(2) {
    margin-left: 10px;
    padding-left: 10px;
  }
  .sub-menu li a,
  .sub-menu li p {
    height: 20px;
    font-size: 12px;
    line-height: 20px;
  }
  .sub-menu li p {
    color: #ccc;
    color: #333;
    border-color: #333;
  }
  .sub-menu li a {
    color: #ccc;
    background: #000;
    background: #fff;
    transition: all .2s linear;
  }
  .sub-menu li a:hover {
    color: #333;
  }
  #slide {
    height: auto;
  }
  #slide button {
    width: 20px;
    margin-top: 0;
    -ms-transform: translate(0, -100%);
        transform: translate(0, -100%);
  }
  #slide button:hover {
    -ms-transform: translate(0, -100%) scale(1, 1);
        transform: translate(0, -100%) scale(1, 1);
  }
  #slide .images {
    width: auto;
    height: auto;
  }
  #slide .images:before {
    content: '';
    padding-top: 67.5%;
    display: block;
  }
  #slide .images.bs2 ul li img {
    margin-top: 0;
  }
  #slide .images.fadein ul li {
    width: 100%;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  }
  #slide .images ul {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
  }
  #slide .images ul li {
    position: inherit;
    top: auto;
    left: auto;
    overflow: auto;
    width: auto;
  }
  #slide .images ul li.first {
    width: 100%;
  }
  #slide .images ul li.mt img {
    margin-top: 0;
  }
  #slide .images ul li img {
    width: 100%;
  }
  #slide .images ul li img.small {
    width: 100%;
    position: inherit;
    left: auto;
  }
  #slide .images ul li img.bs3-1 {
    margin-top: 0;
  }
  #slide .images ul li img.bs3-2 {
    margin-top: 0;
  }
  #slide .slick-dots {
    z-index: 1;
    text-align: center;
    font-size: 0;
    letter-spacing: 0;
    margin-top: 20px;
  }
  #slide .slick-dots li {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: #E6E6E6;
    border-radius: 16px;
    margin: 0 10px;
    cursor: pointer;
  }
  #slide .slick-dots li:hover, #slide .slick-dots li.slick-active {
    background: #999;
  }
  .dot {
    display: none;
  }
  .page-nav li {
    font-size: 12px;
    position: relative;
  }
  .page-nav li .sub {
    left: 0;
    margin-left: 0;
  }
  .page-nav li .sub.product {
    margin-left: -19px;
    width: 225px;
  }
  #concept {
    padding: 0 15px;
    padding-top: 47px;
    margin-top: 0px;
  }
  h1.look {
    font-size: 2.4rem;
  }
  #concept h1 {
    font-size: 2.4rem;
    line-height: 1.4;
  }
  #technical {
    margin-top: 40px;
    padding: 0 15px 15px;
  }
  #technical h1 {
    font-size: 21px;
    padding-bottom: 2px;
    padding-top: 0;
  }
  #technical .block {
    margin-top: 30px;
    padding: 0;
  }
  #technical .block.border .clear .left, #csr-explore .block.border .clear .right {
    padding: 15px;
  }
  #technical .block h2 {
    font-size: 17px;
    margin-bottom: 20px;
  }
  #technical .block h2 span {
    font-size: 13px;
    margin-right: 10px;
  }
  #technical .block .left,
  #technical .block .right {
    width: 100%;
    float: none;
  }
  #technical .block .left.wide, #technical .block .left.narrow,
  #technical .block .right.wide,
  #technical .block .right.narrow {
    margin: 0;
  }
  #technical .block .left.wide,
  #technical .block .right.wide {
    width: 100%;
  }
  #technical .block .left.narrow.text,
  #technical .block .right.narrow.text {
    width: 100%;
  }
  #technical .block .left.text,
  #technical .block .right.text {
    width: 100%;
    margin-top: 0;
  }
  #technical .block .left {
    margin-right: 0;
    margin-bottom: 15px;
  }
  #technical .block .right {
    margin-left: 0;
  }
  #technical .block .right.el1 {
    margin-top: 0;
  }
  #technical .block .bs1-detail3 {
    font-size: 0;
    letter-spacing: 0;
    text-align: center;
    margin-bottom: 30px;
  }
  #technical .block .bs1-detail3 img {
    width: 263px;
    display: inline-block;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    position: relative;
    top: 30px;
  }
  #technical .block .bs2-detail3 {
    padding-top: 65px;
  }
  #technical .block .bs2-detail4 {
    padding-top: 65px;
  }
  #technical .block .bs3-detail2 {
    padding-top: 0;
  }
  #technical .block .bs3-detail2.en {
    padding-top: 0;
  }
  #product {
    margin-top: 0;
    width: auto;
    padding: 30px 0;
  }
  #product .product_nav {
    margin-top: 30px;
  }
  #product .product_nav li {
    font-size: 11px;
    height: 15px;
    line-height: 15px;
  }
  #product .product_nav li a {
    padding: 0 7px;
  }
  #product .product_nav li a.current {
    font-weight: bold;
  }
  #product.all {
    padding-top: 18px;
  }
  #product.all #products {
    margin: -50px 0 0 0;
    width: auto;
  }
  #product.all #products .product-wrap.sep {
    margin-top: 50px;
  }
  #product.all #products .glass {
    vertical-align: top;
    width: 50%;
    margin: 20px 0 0 0;
  }
  #product.all #products .glass .menu {
    height: auto;
  }
  #product.all #products .glass .menu img {
    position: relative;
    top: 0;
    width: 80%;
    left: auto;
    margin: 0 auto;
    display: block;
  }
  #product.all #products .glass .menu h1 {
    font-size: 12px;
    margin-top: 10px;
    letter-spacing: 0;
  }
  #product.all #products .glass .menu h1 small {
    display: block;
    margin-top: 5px;
  }
  #product.all #products .glass .menu h1 span {
    font-size: 8px;
    height: 10px;
    line-height: 11px;
    top: -1px;
    padding: 0 2px;
    margin-right: 3px;
  }
  #product.all #products .glass .menu h1 span.date {
    text-align: center;
    margin: 5px 0 0;
  }
  #product.all #products .glass .menu h1 span.colon {
    margin-right: 0;
  }
  #product.all #products .glass .menu h1 span.ls {
    letter-spacing: 0;
  }
  #product.all #products .glass .menu h1 .sp {
    display: block;
  }
  #product.all #products .glass .menu.open h1 {
    padding-bottom: 0;
  }
  #product.all #products .vals-wrap {
    margin: 0;
    width: auto;
  }
  #product .left h1 span {
    margin-left: 50px;
  }
  #product h1 {
    font-size: 21px;
    padding-top: 0;
    margin: 46px 0;
  }
  .glass .menu:hover img {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  }
  .vals-wrap {
    width: auto;
  }
  .vals-wrap .vals {
    padding: 30px 0;
  }
  .vals-wrap .vals .vals-title {
    font-size: 10px;
  }
  .vals-wrap .vals ul {
    margin-top: 0;
    padding: 0 15px;
  }
  .vals-wrap .vals ul li {
    width: 33.33%;
    width: calc(100% / 3);
    margin: 0;
    vertical-align: middle;
  }
  .vals-wrap .vals ul.type-name {
    font-size: 12px;
  }
  .vals-wrap .vals ul.image li {
    margin-top: 30px;
  }
  .vals-wrap .vals .color,
  .vals-wrap .vals .price {
    margin-top: 15px;
    font-size: 10px;
  }
  #more-view #view-content {
    width: auto;
    padding: 15px;
  }
  #more-view #view-content .title {
    font-size: 17px;
    height: 30px;
    line-height: 30px;
    margin-top: 20px;
    margin-bottom: 30px;
  }
  #more-view #view-content #view-image {
    height: auto;
    overflow: hidden;
    margin-top: 15px;
  }
  #more-view #view-content #view-image:before {
    display: block;
    padding-top: 45%;
    content: '';
  }
  #more-view #view-content #view-image .wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  #more-view #view-content #view-image .wrap div {
    height: 100%;
  }
  #more-view #view-content #view-image .wrap div img {
    width: 100%;
    width: calc(100vw - 30px);
    height: 100%;
  }
  #more-view #view-content #board {
    display: none;
  }
  #more-view #view-content #view-info .wrap {
    width: 50%;
  }
  #more-view #view-content #view-info .wrap .label {
    display: inline-block;
    padding: 0 5px;
    background: #000;
    color: #fff;
    font-size: 10px;
    height: 15px;
    line-height: 15px;
    letter-spacing: 0;
    margin-right: 5px;
  }
  #more-view #view-content #view-info small {
    font-size: 10px;
    position: relative;
    top: -1px;
  }
  #more-view #view-content #view-info .text {
    margin-top: 10px;
  }
  #more-view #view-content #view-info .cart {
    margin-top: 20px;
    height: 30px;
  }
  #more-view #view-content #view-info .cart.hide a {
    display: none;
  }
  #more-view #view-content #view-info a {
    color: #333;
    transition: opacity .2s linear;
  }
  #more-view #view-content #view-info a img {
    margin-right: 8px;
    position: relative;
    top: 4px;
  }
  #more-view #view-content #view-thumbnail .thumb {
    margin: 0;
  }
  #more-view #view-content #view-thumbnail .wrap div {
    margin: 15px 0 0 -75px;
    left: 50%;
    width: 150px;
    height: auto;
  }
  #more-view #view-content #view-thumbnail .wrap div:before {
    content: '';
    display: block;
    padding-top: 45%;
  }
  #more-view #view-content #view-thumbnail .wrap div img {
    width: 150px;
    height: 100%;
    height: 68px;
  }
  #more-view #view-content .close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 20px;
    height: 20px;
  }
  #image_zoom {
    position: fixed;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    z-index: 2000;
    display: block;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    transition: opacity .2s linear;
  }
  #image_zoom.show {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  }
  #image_zoom.visible {
    left: 0;
  }
  #image_zoom .close {
    position: absolute;
    z-index: 1000;
    top: 15px;
    right: 15px;
    width: 20px;
  }
  #image_zoom .close img {
    display: block;
    width: 100%;
  }
  #image_zoom .zoomer_wrapper {
    height: 100%;
    background: #fff;
  }
  #image_zoom .zoomer_wrapper .zoomer {
    background: none;
  }
  #image_zoom .zoomer_wrapper .zoomer .zoomer-holder {
    box-shadow: none;
  }
  #image_zoom .zoomer_wrapper .zoomer .zoomer-controls {
    display: none;
  }
}
/*Added on 17May2018*/
.navbar-tp {
 border-bottom:1px solid #ccc;
 height:82px;
 background-color:#fff;
 margin-bottom:0
}
.navbar-tp>.container-tp {
 padding-left:5px;
 padding-right:0
}
.navbar-logo {
 display:block;
 float:left;
 margin-top:11px;
 margin-left:11px
}
.navbar-logo-img {
 width:60px;
 height:60px
}
.navbar-logo{
  position: relative;
  -webkit-filter: drop-shadow(1px 1px 2px rgba(0,0,0,.5));
  background-image: url(../img/film-master-logo-80-mask.png);
  background-position: 0 0;
  background-size: 50px 50px;
  background-repeat: no-repeat;
}
@media (min-width:768px) {
 .navbar-tp {
  height:179px
 }
 .navbar-tp>.container-tp {
  padding-left:15px;
  padding-right:15px;
 }
 .navbar-logo {
  margin:0 0 15px 15px;
  background-size: 80px 80px;

 }
 .navbar-logo-img {
  width:80px;
  height:80px;
 }
}



.navbar-logo img{
  -webkit-mask-image: linear-gradient(-75deg, rgba(0,0,0,.6) 30%, transparent 50%, rgba(0,0,0,.6) 70%);
  -webkit-mask-size: 200%;
  animation: shine 2s infinite;
}
@-webkit-keyframes shine {
  from {
    -webkit-mask-position: 150%;
  }
  
  to {
    -webkit-mask-position: -50%;
  }
}

@media (min-width:992px) {
 .navbar-tp {
  height:120px;
 }
}
@media (min-width:1200px) {
 .navbar-tp {
  height:120px
 }
}
.container-fm {
 max-width:960px;
 padding-right:15px;
 padding-left:15px;
 margin-right:auto;
 margin-left:auto
}
.container-fm:after,.container-fm:before {
 content:" ";
 display:table
}
.container-fm:after {
 clear:both
}

.font-light {
 font-family:avenir_tplight,Avenir,Arial,sans-serif;
 font-weight:400
}
.font-medium {
 font-family:avenir_tpmedium,Avenir,Arial,sans-serif;
 font-weight:400
}
.font-black {
 font-family:avenir_tpblack,Avenir,Arial,sans-serif;
 font-weight:400
}
body, body.aboutus {
 font-family:avenir_tplight,Avenir,Arial,sans-serif;
 font-size:1.6rem; /*used 16px before* 1rem=10px in mac */
 background-color:#fff;
 overflow-x:hidden;
 width:100%;
 color:#555;
 font-weight:400
}

:lang(th) {
    font-family: 'Kanit', sans-serif;
    font-size: 120%;
    font-weight: 500 !important;
}

header nav ul li a {
  padding: 20px;
  padding-top: 12px;
}

/*header nav ul li a:hover:after {
  background: linear-gradient(-45deg, #f6d53e 6px, transparent 0), linear-gradient(45deg, #f6d53e 6px, transparent 0);
  background-position: left-bottom;
  background-repeat: repeat-x;
  background-size: 12px 12px;
  content: " ";
  display: block;
  position: absolute;
  top: -28px;
  left: 0px;
  width: 100%;
  height: 12px;
}

header nav ul li a:hover {
  background-color: #f6d53e;
}*/


/*fix offset anchor*/
#technical .block {
  padding-top: 120px;
  margin-top: -100px;
  border: none ! important;
}

/*p*/

.side-nav-process {
  bottom: 60%;
  -webkit-transform: translateY(60%);
  -ms-transform: translateY(60%);
  transform: translateY(60%);
  position: fixed;
  display: inline-block;
  /*overflow: hidden;*/
  text-align: left;
  z-index: 2000;
  right: 0;
  width: 276px;
  vertical-align: middle;
  margin: auto;
}

.side-nav-qc {
  bottom: 25%;
  -webkit-transform: translateY(25%);
  -ms-transform: translateY(25%);
  transform: translateY(25%);
  position: fixed;
  display: inline-block;
  /*overflow: hidden;*/
  text-align: left;
  z-index: 2000;
  right: 0;
  width: 276px;
  vertical-align: middle;
  margin: auto;
}

.side-nav ul{
    text-decoration: none;
    background-color: #bfd592;
    line-height: 1.2em;
    position: absolute; /* Position them relative to the browser window */
    right: -246px; /* Position them outside of the screen */
    transition: 0.3s; /* Add transition on hover */
    /*padding: 15px; /* 15px padding */
    width: 290px; /* Set a specific width */
    text-decoration: none; /* Remove underline */
    font-size: 20px; /* Increase font size */
    color: white; /* White text color */
    box-shadow: 0 1px 5px 0 rgba(0,0,0,0.15);
    border-radius: 6px 0 0 6px; /* Rounded corners on the top right and bottom right side */
  -webkit-transition: ease-in-out .3s, opacity 1s .5s;
  bottom: 50%;
  -webkit-transform: translateY(50%);
  -ms-transform: translateY(50%);
  transform: translateY(50%);
}

.side-nav .nav:hover {
  right:0;
}

.side-nav .nav .nav-item {
  margin-left: 16px;
  margin-bottom: 0;

    display: block;
    width: 290px;

}

.side-nav .nav .nav-item .nav-link {
  color: #fff;
  font-size: 1.6rem;
  padding: 4px 0;
    float: none;
}

.side-nav .nav-tabs .nav-link.active {
  color: #fff;
  background: none;
  font-size: 1.8rem;
  font-weight: 600;
  text-decoration: none;
}

.side-nav .nav-tabs .nav-link::before {
    content: "•"; /* Insert content that looks like bullets */
    padding-right: 16px;
    color: #fefefe; /* Or a color you prefer */
    vertical-align: middle;
    font-size: 2.4rem;

}

.side-nav .nav-tabs .nav-link.active::before {
    color: #fff; /* Or a color you prefer */
    font-size: 3.2rem;
    padding-right: 12px;
    margin-left: auto;
    margin-right: auto;

}

@media screen and (max-width:766px) {
  .side-nav {
    display: none;
  }
}