@charset "UTF-8";
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
@import url("https://fonts.googleapis.com/earlyaccess/notosanstc.css");
@import url("https://fonts.googleapis.com/css?family=Amiri&display=swap");
@import url("https://fonts.googleapis.com/css?family=Jomolhari&display=swap");
@import url(bootstrap.min.css);
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@200;300;400;500;600;700;900&display=swap");
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, main {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

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

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

/* =Global
----------------------------------------------- */
html {
  margin: 0;
  padding: 0;
  font-size: 62.5%;
  height: 100%; }

body {
  margin: 0;
  padding: 0;
  font-family: \5FAE\8EDF\6B63\9ED1\9AD4, \5FAE\8F6F\96C5\9ED1, Meiryo, MS PGothic, Lato, Helvetica, Arial, sans-serif;
  position: relative;
  height: 100%;
  color: #333; }

b, strong {
  font-weight: bold; }

h1, h2, h3, h4 {
  font-family: 'Noto Sans TC', sans-serif;
  font-weight: 400 !important; }

a, a:visited, a:active {
  text-decoration: none !important;
  cursor: pointer;
  -webkit-transition: All 0.5s ease-out;
  -moz-transition: All 0.5s ease-out;
  -o-transition: All 0.5s ease-out;
  transition: All 0.5s ease-out;
  position: relative; }

a:hover, a:visited:hover, a:active:hover {
  text-decoration: none !important; }

a:hover img {
  /*opacity: 0.8;
  -webkit-transition: opacity 0.5s ease;
  -moz-transition: opacity 0.5s ease;
  -o-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease;*/ }

a:focus, :focus, a, a:link, a:visited, a:active, select, select:focus {
  -moz-outline-style: none !important;
  outline: none !important;
  outline: 0 !important; }

img {
  vertical-align: bottom; }

input, textarea, select {
  background-color: #fff;
  border: 1px solid #d8d8d8; }

/*input:focus, textarea:focus, select:focus {
  color: #444;
  -webkit-transition: All 0.5s ease-out;
  -moz-transition: All 0.5s ease-out;
  -o-transition: All 0.5s ease-out;
  transition: All 0.5s ease-out;
}*/
::-moz-selection {
  background: #80e0e0; }

::selection {
  background: #80e0e0; }

/* =Common
----------------------------------------------- */
.clear {
  clear: both; }

.floatR {
  float: right; }

.floatL {
  float: left; }

.alC {
  text-align: center; }

.alR {
  text-align: right; }

.alL {
  text-align: left; }

.mgt5 {
  margin-top: 5px !important; }

.mgt10 {
  margin-top: 10px !important; }

.mgt15 {
  margin-top: 15px !important; }

.mgt30 {
  margin-top: 30px !important; }

.tefal_btn a {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  background: #c01937;
  padding: 5px;
  color: #fff;
  display: inline-block; }

.tefal_btn a:hover {
  background: #ee1b2e; }

h2.page_title {
  font-size: 3.0rem;
  color: #858585;
  padding-bottom: 20px;
  border-bottom: 3px solid #c01937;
  margin: 10px 0 20px; }

div.page_title img {
  border: 1px solid #dadada;
  -moz-border-radius: 16px;
  -webkit-border-radius: 16px;
  border-radius: 16px; }

/* =Layout
----------------------------------------------- */
.containwrap {
  max-width: 940px;
  margin: 0px auto;
  padding: 20px 2%; }

@media screen and (max-width: 940px) {
  .containwrap {
    max-width: 940px;
    margin: 0px auto;
    padding: 20px 2%; } }

/* =Header
----------------------------------------------- */
#headwrap {
  width: 100%;
  padding-top: 75px; }

#headwrap .sticky-header {
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  right: 0;
  z-index: 101; }

#headwrap .header-content {
  width: 100%;
  background: #eeedf2;
  -webkit-box-shadow: 0 0 6px #bbb;
  box-shadow: 0 0 6px #bbb;
  height: 74px;
  position: relative;
  z-index: 101;
  -webkit-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
  transition: all .5s ease 0s; }

#headwrap .header-content .containwrap {
  padding: 20px 2% 15px;
  position: relative; }

#headwrap .header-content .containwrap .site-title {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -15px 0 0 -80px; }

#headwrap .header-content .containwrap .site-title a {
  display: block; }

#headwrap .header-content .containwrap .site-title a img {
  width: 160px;
  height: 41px; }

#headwrap .header-content .containwrap .toggle-nav {
  color: #ed1c24;
  cursor: pointer;
  display: inline-block;
  float: left;
  font-size: 1.8rem;
  outline: 0;
  position: relative;
  -webkit-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
  transition: all .5s ease 0s;
  height: 25px; }

#headwrap .header-content .containwrap .toggle-nav:hover .burger-icon:before {
  top: 9px; }

#headwrap .header-content .containwrap .toggle-nav:hover .burger-icon:after {
  top: -9px; }

#headwrap .header-content .containwrap .toggle-nav .burger-icon, #headwrap .header-content .containwrap .toggle-nav .burger-icon:after, #headwrap .header-content .containwrap .toggle-nav .burger-icon:before {
  background: #878787;
  height: 3px;
  width: 23px;
  border-radius: 2px; }

#headwrap .header-content .containwrap .toggle-nav .burger-icon:after, #headwrap .header-content .containwrap .toggle-nav .burger-icon:before {
  -webkit-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
  transition: all .5s ease 0s;
  content: "";
  display: block;
  position: absolute;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  z-index: -1; }

#headwrap .header-content .containwrap .toggle-nav .burger-icon {
  float: left;
  margin: 10px 0 0 -12px;
  position: relative;
  -webkit-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
  transition: all .5s ease 0s;
  z-index: 1;
  left: 50%; }

#headwrap .header-content .containwrap .toggle-nav .burger-icon:before {
  top: 7px; }

#headwrap .header-content .containwrap .toggle-nav .burger-icon:after {
  top: -7px; }

#headwrap .header-content .containwrap .toggle-nav .label-menu {
  display: block;
  color: #868686;
  font-size: 12px;
  opacity: 1;
  position: relative;
  -webkit-transition: all .3s ease 0s;
  -o-transition: all .3s ease 0s;
  transition: all .3s ease 0s;
  text-transform: none;
  margin: 25px 0 0 -2px; }

#headwrap .header-content .containwrap .toggle-nav.active:hover .burger-icon {
  -webkit-transform: scale(0.8, 0.8);
  -ms-transform: scale(0.8, 0.8);
  transform: scale(0.8, 0.8); }

#headwrap .header-content .containwrap .toggle-nav.active .burger-icon:after, #headwrap .header-content .containwrap .toggle-nav.active .burger-icon:before {
  top: 0; }

#headwrap .header-content .containwrap .toggle-nav.active .burger-icon {
  background: 0 0;
  -webkit-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  transform: scale(1, 1);
  -webkit-transition: all .3s ease 0s;
  -o-transition: all .3s ease 0s;
  transition: all .3s ease 0s; }

#headwrap .header-content .containwrap .toggle-nav.active .burger-icon:before {
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg); }

#headwrap .header-content .containwrap .toggle-nav.active .burger-icon:after {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg); }

#headwrap .header-content .containwrap .head-entry {
  float: right;
  font-size: 12px;
  margin-top: 5px;
  -webkit-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
  transition: all .5s ease 0s; }

#headwrap .header-content .containwrap .head-entry a {
  color: #868686; }

#headwrap .header-content .containwrap .head-entry a:hover {
  color: #e1172b; }

#headwrap .header-content .containwrap .head-entry ul li {
  float: left;
  line-height: 20px;
  border-left: 1px solid #c4c4c4;
  padding: 0 10px; }

#headwrap .header-content .containwrap .head-entry ul li:first-child {
  border-left: none; }

#headwrap .header-content .containwrap .head-entry ul li.social-wrap a {
  margin-left: 5px; }

#headwrap .header-content .containwrap .head-entry ul li.social-wrap a:first-child {
  margin-left: 0; }

#headwrap .header-content .containwrap .head-entry ul li.navtop-bar .spanauto {
  position: relative;
  margin-left: 0; }

#headwrap .header-content .containwrap .head-entry ul li.navtop-bar .spanauto .picto-search {
  background: url(../images/sprite-icons.png) no-repeat;
  width: 22px;
  height: 22px;
  vertical-align: middle;
  display: block; }

#headwrap .header-content .containwrap .head-entry ul li.navtop-bar .spanauto .picto-search:hover {
  background-position: 0 -25px; }

#headwrap .header-content .containwrap .head-entry ul li.navtop-bar .spanauto .search {
  position: absolute;
  top: 35px;
  background: #FFF;
  z-index: 1000;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2);
  width: 220px;
  height: 30px;
  right: -76px;
  opacity: 0;
  padding: 20px;
  margin-top: 10px;
  -webkit-transition: margin-top .2s ease 0s,opacity .2s ease 0s,visibility .2s ease 0s;
  -o-transition: margin-top .2s ease 0s,opacity .2s ease 0s,visibility .2s ease 0s;
  transition: margin-top .2s ease 0s,opacity .2s ease 0s,visibility .2s ease 0s;
  visibility: hidden; }

#headwrap .header-content .containwrap .head-entry ul li.navtop-bar .spanauto .search:before {
  border-color: rgba(218, 218, 218, 0) !important;
  border-bottom-color: #dadada !important;
  border-width: 11px !important;
  margin-left: -11px;
  right: 75px;
  bottom: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none; }

#headwrap .header-content .containwrap .head-entry ul li.navtop-bar .spanauto .search:after {
  border-color: rgba(255, 255, 255, 0) !important;
  border-bottom-color: #FFF !important;
  border-width: 10px !important;
  margin-left: -10px !important;
  right: 75px;
  bottom: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none; }

#headwrap .header-content .containwrap .head-entry ul li.navtop-bar .spanauto .search form {
  position: relative;
  margin: 0; }

#headwrap .header-content .containwrap .head-entry ul li.navtop-bar .spanauto .search form #search {
  width: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: 30px;
  padding-right: 30px;
  margin: 0;
  background-color: #fff;
  border: 1px solid #ccc;
  -webkit-transition: border linear .2s,-webkit-box-shadow linear .2s;
  transition: border linear .2s,-webkit-box-shadow linear .2s;
  -o-transition: border linear .2s,box-shadow linear .2s;
  transition: border linear .2s,box-shadow linear .2s;
  transition: border linear .2s,box-shadow linear .2s,-webkit-box-shadow linear .2s; }

#headwrap .header-content .containwrap .head-entry ul li.navtop-bar .spanauto .search form .btn {
  background: transparent;
  border: none;
  position: absolute;
  right: 0px;
  top: 0;
  padding: 0;
  line-height: 16px;
  -moz-border-radius: 15px 0 0 15px !important;
  -webkit-border-radius: 15px 0 0 15px !important;
  border-radius: 15px 0 0 15px !important;
  padding-right: 2px;
  -webkit-box-shadow: 0 0 0 transparent inset !important;
  box-shadow: 0 0 0 transparent inset !important; }

#headwrap .header-content .containwrap .head-entry ul li.navtop-bar .spanauto .search form .btn .picto-search {
  background: url(../images/picto-search-small.png) 0 6px no-repeat !important;
  height: 30px;
  position: relative;
  right: auto;
  top: auto;
  width: 24px; }

#headwrap .sub-nav {
  /*margin-top: 75px;*/
  position: relative;
  bottom: 1px; }

#headwrap .sub-nav .containwrap {
  padding-top: 0;
  padding-bottom: 0;
  position: relative; }

#headwrap .sub-nav .containwrap ul {
  display: table;
  margin: 0px auto;
  text-align: center; }

#headwrap .sub-nav .containwrap ul li {
  float: left;
  font-size: 14px;
  text-align: center;
  font-family: 'Noto Sans TC', sans-serif;
  font-weight: 400 !important; }

#headwrap .sub-nav .containwrap ul li a {
  display: block;
  padding: 25px 20px !important;
  color: #6c6c6c; }

#headwrap .sub-nav .containwrap ul li a:hover {
  color: #be1936; }

#headwrap .sub-nav .containwrap ul li a.active {
  background: #c01937;
  color: #fff; }

#headwrap .sub-nav .containwrap ul li.dropdown {
  position: static; }

#headwrap .sub-nav .containwrap ul li.dropdown .sub-menu {
  display: none;
  position: absolute;
  left: 0;
  background: #fff;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  z-index: 100;
  float: left;
  width: 100%;
  /*li.active{
    a{
      background: rgba(185, 185, 185, 0.2);
    }
  }*/ }

#headwrap .sub-nav .containwrap ul li.dropdown .sub-menu ul {
  display: table;
  margin: 0 auto; }

#headwrap .sub-nav .containwrap ul li.dropdown .sub-menu ul li {
  float: left;
  margin: 0 5px; }

#headwrap .sub-nav .containwrap ul li.dropdown .sub-menu ul li a {
  padding: 10px !important; }

#headwrap .sub-nav .containwrap ul li.dropdown .sub-menu ul li .sub-item {
  background: url(../images/subnav-bg.png) 50% 0 no-repeat #fff;
  position: absolute;
  border-bottom: 1px solid #ccc;
  min-width: 100%;
  left: 0;
  display: none; }

#headwrap .sub-nav .containwrap ul li.dropdown .sub-menu ul li .sub-item ul {
  display: table;
  margin: 0 auto; }

#headwrap .sub-nav .containwrap ul li.dropdown .sub-menu ul li .sub-item ul li {
  display: inline-block;
  line-height: normal;
  margin: 0 5px !important;
  font-size: 1.2rem;
  text-align: center; }

#headwrap .sub-nav .containwrap ul li.dropdown .sub-menu ul li .sub-item ul li a {
  display: block;
  width: 90px;
  height: 90px;
  padding: 8px 0 3px !important;
  overflow: hidden;
  background: transparent; }

#headwrap .sub-nav .containwrap ul li.dropdown .sub-menu ul li .sub-item ul li a:hover {
  background: rgba(185, 185, 185, 0.2); }

#headwrap .sub-nav .containwrap ul li.dropdown .sub-menu ul li .sub-item ul li a img {
  margin-bottom: 3px;
  width: 60px;
  height: 49px; }

#headwrap .sub-nav .containwrap ul li.dropdown .sub-menu ul li .sub-item ul li a span {
  display: block; }

#headwrap .sub-nav .containwrap ul li.dropdown .sub-menu ul li .sub-item li.active a {
  background: rgba(185, 185, 185, 0.2);
  color: #be1936; }

#headwrap .sub-nav-item {
  /*display: none;
  position: absolute;*/
  width: 100%;
  background: #fff;
  /*background: url(../images/subnav-bg.png) 50% 0 no-repeat;*/
  /*box-shadow: 0 -5px 5px -5px #bbb;*/
  border-top: 1px solid #eee;
  z-index: 100; }

#headwrap .sub-nav-item .containwrap {
  padding-top: 15px;
  padding-bottom: 15px; }

#headwrap .sub-nav-item ul {
  display: table;
  margin: 0px auto; }

#headwrap .sub-nav-item ul li {
  float: left;
  font-size: 1.4rem; }

#headwrap .sub-nav-item ul li a {
  color: #6c6c6c;
  margin: 0 20px; }

#headwrap .sub-nav-item ul li a:hover {
  color: #be1936; }

#headwrap .sub-nav-item.hidden {
  display: none; }

#headwrap .sub-nav-category {
  /*display: none;*/
  /*height: 100px;*/
  margin-bottom: 40px;
  border-bottom: 1px solid #fff; }

#headwrap .sub-nav-category .containwrap {
  padding-top: 0;
  padding-bottom: 0; }

#headwrap .sub-nav-category ul {
  display: table;
  margin: 0px auto;
  text-align: center;
  position: relative; }

#headwrap .sub-nav-category ul li {
  display: inline-block;
  line-height: normal;
  margin: 0 0px;
  font-size: 1.2rem;
  text-align: center; }

#headwrap .sub-nav-category ul li a {
  display: block;
  color: #6c6c6c;
  width: 90px;
  height: 72px;
  padding: 8px 0 3px;
  overflow: hidden; }

#headwrap .sub-nav-category ul li a:hover {
  background: rgba(185, 185, 185, 0.2); }

#headwrap .sub-nav-category ul li a img {
  margin-bottom: 3px;
  width: 60px;
  height: 49px; }

#headwrap .sub-nav-category ul li a span {
  display: block; }

#headwrap .sub-nav-category ul li.active a {
  background: rgba(185, 185, 185, 0.2);
  color: #be1936; }

#headwrap .sub-nav-category .sub-nav-item {
  display: none; }

#headwrap .sub-nav-category .sub-nav-item ul {
  position: static;
  text-align: left;
  margin: 0; }

#headwrap .sub-nav-category .sub-nav-item ul li {
  margin: 0 5px; }

#headwrap .sub-nav-category .sub-nav-item ul li a {
  height: auto !important;
  width: auto !important;
  margin: 0;
  padding: 10px 3px;
  background: transparent;
  color: #858585; }

#headwrap .sub-nav-category .sub-nav-item ul li a:hover {
  color: #be1936; }

#headwrap .sub-nav-category ul li.active .sub-nav-item {
  display: block;
  position: absolute;
  z-index: 1;
  left: 0; }

#headwrap.mini-header {
  position: relative; }

#headwrap.mini-header .header-content {
  height: 50px; }

#headwrap.mini-header .header-content .containwrap .site-title {
  margin: -17px 0 0 -48px;
  text-align: center; }

#headwrap.mini-header .header-content .containwrap .site-title a img {
  width: 96px;
  height: 25px; }

#headwrap.mini-header .header-content .containwrap .toggle-nav .burger-icon {
  margin-top: 5px; }

#headwrap.mini-header .header-content .containwrap .toggle-nav .label-menu {
  visibility: hidden; }

#headwrap.mini-header .header-content .containwrap .head-entry {
  margin-top: -5px; }

.main-nav {
  height: 100%;
  width: 348px;
  position: fixed;
  z-index: 100;
  top: 0;
  left: -348px;
  background: #efeef3; }

.main-nav .collapse {
  position: static; }

.main-nav .in.collapse {
  overflow: visible; }

.main-nav > div {
  padding: 74px 0 0;
  -webkit-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
  transition: all .5s ease 0s;
  height: 100%;
  overflow-y: auto;
  position: static; }

.main-nav > div > ul {
  margin-top: 16px; }

.main-nav > div > ul li.accordion-group {
  font-size: 14px;
  font-family: 'Noto Sans TC', sans-serif;
  border: none;
  margin-bottom: 0; }

.main-nav > div > ul li.accordion-group a {
  color: #868686;
  display: block;
  line-height: 45px;
  padding-left: 50px; }

.main-nav > div > ul li.accordion-group a:hover {
  color: #c01937; }

.main-nav > div > ul li.accordion-group a.toggled:before {
  content: "+";
  font-family: arial;
  display: block;
  font-size: 24px;
  font-style: normal;
  font-variant: normal;
  font-weight: 400;
  height: 11px;
  right: 52px;
  line-height: 1;
  margin: -7px 0 0;
  position: absolute;
  text-transform: none;
  top: 40%;
  width: 11px;
  color: #868686; }

.main-nav > div > ul li.accordion-group a.toggled:hover:before {
  color: #c01937; }

.main-nav > div > ul li.accordion-group a.active {
  color: #c01937; }

.main-nav > div > ul li.accordion-group a.active:before {
  content: "_";
  font-size: 19px;
  margin-right: -2px;
  line-height: 5px;
  color: #c01937; }

.main-nav > div > ul li.accordion-group a.collapsed:before {
  content: "+";
  font-size: 24px;
  margin: -7px 0 0;
  line-height: 1; }

.main-nav > div > ul li.accordion-group .accordion-body .accordion-inner {
  padding: 0;
  border: none; }

.main-nav > div > ul li.accordion-group .accordion-body .accordion-inner a {
  display: block;
  background: #fff; }

.main-nav > div > ul li.accordion-group .accordion-body .accordion-inner a:hover {
  background: #c01937;
  color: #fff; }

.main-nav > div > ul li.accordion-group .accordion-body .accordion-inner .actif {
  background: #c01937;
  color: #fff; }

.main-nav > div > ul li.accordion-group .accordion-body .accordion-inner .niv2 {
  color: #6d6e70;
  height: 100%;
  left: 348px;
  min-width: 350px;
  opacity: 0;
  position: absolute;
  -webkit-transform: translateX(-304px);
  -ms-transform: translateX(-304px);
  transform: translateX(-304px);
  -webkit-transition: all .4s ease 0s;
  -o-transition: all .4s ease 0s;
  transition: all .4s ease 0s;
  visibility: hidden;
  z-index: -1;
  top: 68px;
  overflow-y: auto; }

.main-nav > div > ul li.accordion-group .accordion-body .accordion-inner .niv2 .col {
  float: left;
  padding: 20px 0 37px 37px;
  width: 274px;
  margin-bottom: 100px; }

.main-nav > div > ul li.accordion-group .accordion-body .accordion-inner .niv2 .col .btn-close {
  display: none; }

.main-nav > div > ul li.accordion-group .accordion-body .accordion-inner .niv2 .col ul li {
  display: table;
  height: 49px;
  width: 100%; }

.main-nav > div > ul li.accordion-group .accordion-body .accordion-inner .niv2 .col ul li a {
  display: table-cell;
  height: 100%;
  line-height: 1.2em;
  padding: 3px 16px 0 9px;
  vertical-align: middle; }

.main-nav > div > ul li.accordion-group .accordion-body .accordion-inner .niv2 .col ul li a:hover {
  background: #edeef0;
  color: #830022; }

.main-nav > div > ul li.accordion-group .accordion-body .accordion-inner .niv2 .col ul li a img {
  float: left;
  margin-top: -3px;
  max-width: 36px;
  top: 1px; }

.main-nav > div > ul li.accordion-group .accordion-body .accordion-inner .niv2 .col ul li a.with-pic {
  padding-left: 62px; }

.main-nav > div > ul li.accordion-group .accordion-body .accordion-inner .niv2 .col ul li a.with-pic img {
  left: 10px;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  margin-top: 10% !important;
  position: absolute;
  top: 0 !important;
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%); }

.main-nav > div > ul li.accordion-group .accordion-body .accordion-inner .niv2.open {
  opacity: 1;
  right: 348px;
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  visibility: visible;
  top: 68px;
  background: #fff;
  z-index: 101; }

#headwrap.mini-header + .main-nav > div {
  padding: 50px 0 0; }

#headwrap.mini-header + .main-nav > div > ul li.accordion-group .accordion-body .accordion-inner .niv2, #headwrap.mini-header + .main-nav > div > ul li.accordion-group .accordion-body .accordion-inner .niv2.open {
  top: 50px; }

.overlay {
  background: rgba(107, 107, 107, 0.6);
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99;
  display: none; }

.overlay:hover {
  cursor: pointer; }

/* =Footer
----------------------------------------------- */
#footwrap {
  background: #eeedf2;
  border-top: 1px solid #c2c1bf;
  color: #909090; }

#footwrap p {
  font-size: 14px; }

#footwrap a {
  color: #909090; }

#footwrap .foot-map ul li {
  float: left;
  margin-left: 5%; }

#footwrap .foot-map ul li:first-child {
  margin-left: 0px; }

#footwrap .foot-map ul li h4 {
  font-size: 14px;
  margin-bottom: 5px; }

#footwrap .foot-map ul li p {
  font-size: 12px;
  line-height: 16px; }

#footwrap .foot-nav {
  margin-top: 50px;
  padding-top: 20px;
  border-top: 1px solid #dadada;
  font-weight: 300; }

#footwrap .foot-nav ul {
  font-weight: 300; }

#footwrap .foot-nav + p {
  line-height: 25px;
  letter-spacing: 0.5px;
  font-weight: 300; }

#footwrap .foot-nav ul li {
  font-size: 14px;
  float: left; }

#footwrap .foot-nav ul li:before {
  content: "│"; }

#footwrap .foot-nav ul li:first-child:before {
  content: ""; }



/* =Media Queries
----------------------------------------------- */
@media screen and (max-width: 1185px) {
  #headwrap .header-content .containwrap .head-entry ul li.navtop-bar .spanauto .search {
    right: -10px; }
  #headwrap .header-content .containwrap .head-entry ul li.navtop-bar .spanauto .search:before, #headwrap .header-content .containwrap .head-entry ul li.navtop-bar .spanauto .search:after {
    right: 10px; }
  .block-form.thin form input[type='text'], .block-form.thin form input[type='email'], .block-form.thin form input[type='password'], .block-form.thin form input[type='tel'], .block-form.thin form input[type='submit'], .block-form.thin form select {
    width: 55%; }
  .block-form.thin form div.member-name input {
    width: 20%; }
  .block-form.thin form div.second input, .block-form.thin form div.second select {
    width: 25%; }
  .block-form.thin form div.third input, .block-form.thin form div.third select {
    width: 15.5%; } }

@media screen and (max-width: 980px) {
  /*main*/
  #MainBodyContent .nav_lame.fixed {
    max-width: 96%; }
  /*about*/
  .about_page .about-tefal-page h4 {
    font-size: 3.0rem; }
  .about_page .about-tefal-page .feature-area .block {
    background-size: contain;
    padding-top: 30px;
    padding-bottom: 30px; }
  .about_page .about-tefal-page .feature-area .commitments02, .about_page .about-tefal-page .feature-area .innovations02, .about_page .about-tefal-page .feature-area .innovations04 {
    padding-left: 50%; }
  /*tech*/
  #techwarp #thermo_spot .info .txt hgroup {
    float: none;
    margin-bottom: 10px; } }

@media screen and (max-width: 900px) {
  #MainBodyContent {
    /*news & search*/ }
  #MainBodyContent .page-list .tab-content .list-box .photo {
    width: auto; }
  #MainBodyContent .page-list .tab-content .list-box .txt {
    width: 84%; }
  #MainBodyContent #block-prod-desc .text-box {
    width: auto; }
  #MainBodyContent #block-prod-desc .text-box p, #MainBodyContent #block-prod-desc .text-box ul {
    width: auto; }
  #MainBodyContent #block-prod-desc .carousel-outline {
    position: relative;
    margin-bottom: 15px; }
  #MainBodyContent #block-prod-desc .carousel-indicators {
    bottom: 10px;
    right: 20px; }
  #MainBodyContent #block-prod-desc .carousel-inner {
    position: relative;
    width: auto;
    height: auto;
    top: auto;
    right: auto; }
  #MainBodyContent #block-prod-desc .carousel-inner .item {
    height: auto; }
  #MainBodyContent #block-prod-desc .carousel-inner .item img {
    margin: 0 auto; }
  .about_page .feature_box {
    height: auto;
    padding-top: 20px;
    padding-bottom: 20px;
    background-size: contain; }
  .about_page .feature01, .about_page .feature03 {
    padding-left: 55%; }
  /*form*/
  .block-form form div.check input {
    vertical-align: top; }
  .block-form form div.check span {
    max-width: 50%; } }

@media screen and (max-width: 800px) {
  /*haeder*/
  #headwrap {
    padding: 0 0 80px 0; }
  #headwrap .header-content .containwrap {
    padding: 15px; }
  #headwrap .header-content .containwrap .site-title {
    /*margin: -20px 0 0 -48px;*/
    position: relative;
    top: auto;
    left: auto;
    margin: -12px 0 0;
    text-align: center; }
  #headwrap .header-content .containwrap .site-title a img {
    width: 96px;
    height: 25px; }
  #headwrap .header-content .containwrap .toggle-nav {
    position: fixed;
    top: 15px;
    left: 15px; }
  #headwrap .header-content .containwrap .head-entry {
    float: none;
    text-align: center;
    display: table;
    margin: 8px auto 0; }
  #headwrap .header-content .containwrap .head-entry ul li.navtop-bar .spanauto .search {
    right: -50px; }
  #headwrap .header-content .containwrap .head-entry ul li.navtop-bar .spanauto .search:before, #headwrap .header-content .containwrap .head-entry ul li.navtop-bar .spanauto .search:after {
    right: 50px; }
  #headwrap .sub-nav, #headwrap .sub-nav-category, #headwrap .sub-nav-item {
    display: none; }
  /*menu*/
  .main-nav > div > ul li.accordion-group .accordion-body .accordion-inner .niv2 .col .btn-close {
    display: block;
    position: absolute;
    right: 0;
    top: 7px;
    z-index: 102; }
  .main-nav > div > ul li.accordion-group .accordion-body .accordion-inner .niv2 .col .btn-close a {
    display: block;
    text-align: center;
    width: 30px;
    height: 30px;
    padding: 0;
    margin: 0;
    line-height: 30px; }
  .main-nav > div > ul li.accordion-group .accordion-body .accordion-inner .niv2.open {
    right: auto;
    left: 0; }
  #MainBodyContent {
    padding-top: 20px;
    /*news & search*/
    /*product*/
    /*.accordion-faq{
      .card{
        .card-header{
          h5{
            a, a.collapsed{
              &:before{
                top: 40%;
              }
            }
          }
        }
      }
    }*/ }
  #MainBodyContent .leftwrap, #MainBodyContent .rightwrap {
    width: 100%;
    float: none; }
  #MainBodyContent .leftwrap {
    margin-bottom: 15px; }
  #MainBodyContent .leftwrap .side-nav ul li {
    float: left;
    width: 33.3%; }
  #MainBodyContent .leftwrap .side-nav ul li a {
    border: 1px solid #ccc;
    border-bottom: 8px solid #b1b1b1;
    border-left: none;
    padding: 10px 0;
    font-size: 1.4rem; }
  #MainBodyContent .leftwrap .side-nav ul li a.active {
    border: 1px solid #ccc;
    border-bottom: 8px solid #c01937; }
  #MainBodyContent .leftwrap .side-nav ul li:first-child a {
    border-left: 1px solid #ccc; }
  #MainBodyContent .page-list .tab-content .list-box .photo {
    width: auto; }
  #MainBodyContent .page-list .tab-content .list-box .txt {
    width: 82%; }
  #MainBodyContent ul.product-list li {
    width: 32%; }
  #MainBodyContent ul.product-list li:nth-child(4n+0) {
    margin-right: 2%; }
  #MainBodyContent ul.product-list li:nth-child(3n+0) {
    margin-right: 0; }
  #MainBodyContent .modal-media {
    width: 94%;
    margin-left: 0;
    left: 3%;
    right: 3%; }
  #MainBodyContent .lame > div {
    padding: 40px 15px; }
  #MainBodyContent .scrollable-lame ul > li.item .border {
    max-width: 100%;
    height: 0;
    padding-bottom: 100%;
    overflow: hidden; }
  #MainBodyContent .scrollable-lame ul > li.item .border img {
    height: auto !important;
    width: 100%; }
  #MainBodyContent .scrollable-lame .lame-control.left {
    left: -30px; }
  #MainBodyContent .scrollable-lame .lame-control.right {
    right: -30px; }
  #MainBodyContent .scrollableTable table {
    font-size: 1.2rem; }
  #MainBodyContent .scrollableTable table th, #MainBodyContent .scrollableTable table td {
    line-height: 18px; }
  #MainBodyContent .scrollableTable table th.reference .picture, #MainBodyContent .scrollableTable table th.comparator .picture {
    min-height: auto; }
  #MainBodyContent .scrollableTable .tefal_btn {
    font-size: 1.2rem; }
  /*form*/
  .block-form form, .block-form.thin form {
    background: #fff;
    padding: 0; }
  .block-form form > div .pc-only, .block-form.thin form > div .pc-only {
    display: none; }
  .block-form form > div label, .block-form.thin form > div label {
    background: #f6f6f6;
    display: block;
    width: 100%;
    text-align: center;
    margin: 0 0 10px 0;
    padding: 10px 0; }
  .block-form form > div input, .block-form form > div select, .block-form.thin form > div input, .block-form.thin form > div select {
    margin: 0 5%; }
  .block-form form > div input[type='text'], .block-form form > div input[type='email'], .block-form form > div input[type='password'], .block-form form > div input[type='tel'], .block-form form > div input[type='submit'], .block-form form > div select, .block-form.thin form > div input[type='text'], .block-form.thin form > div input[type='email'], .block-form.thin form > div input[type='password'], .block-form.thin form > div input[type='tel'], .block-form.thin form > div input[type='submit'], .block-form.thin form > div select {
    width: 90%; }
  .block-form form div.submit_btn label, .block-form.thin form div.submit_btn label {
    display: none; }
  .block-form form div.check, .block-form.thin form div.check {
    padding: 0 5%; }
  .block-form form div.check input, .block-form.thin form div.check input {
    margin: 0 5px 0 0; }
  .block-form form div.check label, .block-form.thin form div.check label {
    display: none; }
  .block-form form div.check span, .block-form.thin form div.check span {
    display: inline;
    max-width: none; }
  .block-form form div.member-name span, .block-form.thin form div.member-name span {
    margin: 0 10px 0 5%; }
  .block-form form div.member-name input, .block-form.thin form div.member-name input {
    margin-left: 5px;
    width: 29%; }
  .block-form form div.member-gender input, .block-form.thin form div.member-gender input {
    margin: 0 10px 0 5%; }
  .block-form form div.second input, .block-form form div.second select, .block-form.thin form div.second input, .block-form.thin form div.second select {
    width: 43%;
    margin: 0 -10px 0 5%; }
  .block-form form div.third input, .block-form form div.third select, .block-form.thin form div.third input, .block-form.thin form div.third select {
    width: 27.5%;
    margin: 0 -10px 0 5%; }
  .block-form form span.unmask, .block-form.thin form span.unmask {
    position: absolute;
    top: 60px;
    right: 40px;
    left: auto; }
  .registered-list {
    border-collapse: separate; }
  .registered-list tr:nth-child(even) {
    background: #f6f6f6; }
  .registered-list th {
    display: none; }
  .registered-list td {
    display: block;
    border: none;
    padding: 5px 10px; }
  .registered-list td:first-child {
    padding-top: 15px; }
  .registered-list td:last-child {
    padding-bottom: 15px; }
  .registered-list td:before {
    content: attr(data-th) "：";
    display: inline-block;
    font-weight: bold; }
  .login-box {
    width: 100%;
    float: none !important; }
  .login-box .block-form form {
    padding: 10px; }
  .login-box .block-form form > div {
    margin: 0; }
  .login-box .block-form form span.unmask {
    top: 55px; }
  .sales_box ul li {
    float: none;
    width: 100%;
    margin: 0 0 15px; }
  form .services-box.privacy {
    width: 87%;
    margin: 0 5%; }
  /*about*/
  .about_page hgroup {
    background-position: 30% top; }
  .about_page .feature_box {
    height: auto;
    padding: 0px 0;
    background-size: contain;
    background-position: right 50%; }
  .about_page .feature_box > div {
    width: 50%;
    padding: 15px;
    background: #fff; }
  .about_page .feature_box h4, .about_page .feature_box p {
    display: block; }
  .about_page .about-tefal-page h4 {
    font-size: 3.0rem; }
  .about_page .about-tefal-page .feature-area .block {
    background-size: contain;
    padding-top: 20px;
    padding-bottom: 20px; }
  .about_page .about-tefal-page .feature-area .block .txt {
    width: 280px; }
  .about_page .about-tefal-page .feature-area .commitments02 {
    padding-left: 50%; }
  /*warranty*/
  .warranty-box .btn-tefal img {
    max-width: 20%; }
  .warranty-box h1 {
    margin-top: 0; }
  /*footer*/
  #footwrap .foot-nav ul li {
    float: none; }
  #footwrap .foot-nav ul li:before {
    content: ""; } }

@media screen and (max-width: 700px) {
  #MainBodyContent {
    /*news & search*/ }
  #MainBodyContent .page-list .tab-content .list-box .txt {
    width: 78%; }
  /*about*/
  .about_page .page-title {
    margin-bottom: 30px; }
  .about_page .about-tefal-page h3 {
    font-size: 2.5rem; }
  .about_page .about-tefal-page h4 {
    font-size: 2.0rem; }
  .about_page .about-tefal-page iframe {
    min-height: 300px; }
  .about_page .about-tefal-page .feature-area .block {
    background-position: right 50%;
    background-size: 40%;
    padding: 20px 0; }
  .about_page .about-tefal-page .feature-area .block .txt {
    width: 50%; }
  /*tech*/
  #techwarp iframe {
    min-height: 350px; }
  #techwarp header {
    background-size: 100%;
    padding: 20px; }
  #techwarp header h1 {
    font-size: 3.0rem;
    padding-bottom: 5px;
    margin-bottom: 50%; }
  #techwarp header .icon_set .icon1, #techwarp header .icon_set .icon2 {
    height: 50px; }
  #techwarp header .icon_set .icon3 {
    height: 70px; }
  #techwarp nav {
    padding: 10px 20px; }
  #techwarp #thermo_spot .info, #techwarp #titanium_excellence .info {
    padding: 15px; }
  #techwarp #thermo_spot .info .txt hgroup h2, #techwarp #titanium_excellence .info .txt hgroup h2 {
    font-size: 3.0rem;
    line-height: 1.2; }
  #techwarp #thermo_spot .info .txt hgroup h2 span, #techwarp #titanium_excellence .info .txt hgroup h2 span {
    font-size: 2.4rem; }
  #techwarp #thermo_spot .info .txt hgroup h3, #techwarp #titanium_excellence .info .txt hgroup h3 {
    font-size: 2.0rem; }
  #techwarp #thermo_spot {
    background-size: 150%;
    background-position: 50% -50px; }
  #techwarp #thermo_spot .info .icon {
    /*position: absolute;
    right: 15px;
    top: 200px;*/
    width: 60px;
    float: right; }
  #techwarp #thermo_spot .info .txt {
    margin-top: 60%; }
  #techwarp #titanium_excellence .info .icon {
    display: block;
    margin-top: 15px; }
  #techwarp #titanium_excellence .info .icon img {
    height: 70px; }
  #techwarp #titanium_excellence .info .txt hgroup {
    float: none;
    margin-right: 0; }
  #techwarp #titanium_excellence .info .icon_safe {
    height: 60px; }
  #techwarp #titanium_excellence .info .titaniumbox {
    padding: 120px 0 80px 10%; }
  #techwarp #world_no1 {
    background: url(../images/tech/bg_word_no1.jpg) 50% bottom no-repeat #fff;
    background-size: 150%;
    padding-bottom: 70%; }
  #techwarp #world_no1 .txt {
    padding: 50px 10px; }
  #techwarp #world_no1 h3 {
    font-size: 2.0rem; }
  #techwarp #world_no1 img.pic {
    display: none; } }

@media screen and (max-width: 600px) {
  /*layout*/
  .containwrap {
    padding: 20px 5%; }
  #MainBodyContent {
    /*news & search*/
    /*product*/ }
  #MainBodyContent p, #MainBodyContent ul li {
    font-size: 1.4rem !important;
    line-height: 1.8rem; }
  #MainBodyContent .top-pickup ul li {
    width: 48%;
    margin-left: 4%;
    margin-bottom: 10px; }
  #MainBodyContent .top-pickup ul li:nth-child(odd) {
    margin-left: 0; }
  #MainBodyContent .top-pickup ul li p {
    min-height: 32px; }
  #MainBodyContent .top-news {
    padding: 0;
    border: none;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px; }
  #MainBodyContent .top-news div.title div.tab {
    position: relative;
    top: auto;
    right: auto;
    padding-left: 0;
    height: auto;
    -moz-transform: skew(0deg);
    -ms-transform: skew(0deg);
    -webkit-transform: skew(0deg);
    transform: skew(0deg); }
  #MainBodyContent .top-news div.title div.tab ul {
    background: #e1172b;
    padding: 0 10px 10px;
    margin: 0; }
  #MainBodyContent .top-news div.title div.tab ul li {
    -moz-transform: skew(0deg);
    -ms-transform: skew(0deg);
    -webkit-transform: skew(0deg);
    transform: skew(0deg);
    width: 30%;
    margin: 0 1.5%; }
  #MainBodyContent .top-news div.title div.tab ul li a {
    background: #a41e36;
    text-align: center; }
  #MainBodyContent .top-news .tab-content .tab-pane .news_block {
    padding: 15px; }
  #MainBodyContent .top-news .tab-content .tab-pane .news_block .photo, #MainBodyContent .top-news .tab-content .tab-pane .news_block .txt {
    float: none;
    width: auto; }
  #MainBodyContent .top-news .tab-content .tab-pane .news_block .photo {
    margin-bottom: 10px; }
  #MainBodyContent .top-service {
    margin: 20px 0; }
  #MainBodyContent .top-service ul li {
    margin-left: 30px; }
  #MainBodyContent .page-list .tab-head ul.nav {
    float: none; }
  #MainBodyContent .page-list .tab-head ul.nav li {
    width: 30%;
    margin: 0 1.5%; }
  #MainBodyContent .page-list .tab-head ul.nav li a {
    background: #a41e36;
    text-align: center; }
  #MainBodyContent .page-list .tab-content .list-box .photo, #MainBodyContent .page-list .tab-content .list-box .txt {
    float: none;
    width: auto; }
  #MainBodyContent .page-list .tab-content .list-box .photo {
    margin-bottom: 10px; }
  #MainBodyContent .page-list .tab-content .list-box .photo img {
    width: 204px;
    height: 166px;
    display: block;
    margin: 0 auto; }
  #MainBodyContent .page-list .tab-content .list-box .txt p.tefal_btn, #MainBodyContent .page-list .tab-content .list-box .txt nav {
    margin-top: 10px; }
  #MainBodyContent .news-box h1 {
    font-size: 2.0rem;
    line-height: 1.4; }
  #MainBodyContent ul.product-list li {
    width: 49%; }
  #MainBodyContent ul.product-list li:nth-child(3n+0) {
    margin-right: 2%; }
  #MainBodyContent ul.product-list li:nth-child(2n+0) {
    margin-right: 0; }
  #MainBodyContent .product-content .product-detail, #MainBodyContent .product-content .product-viewer {
    float: none;
    width: 100%; }
  #MainBodyContent .product-content .product-detail h1 {
    font-size: 2.0rem;
    line-height: 1.4; }
  #MainBodyContent .product-content .product-detail h2 {
    font-size: 1.6rem;
    line-height: 1.4; }
  #MainBodyContent .product-content .product-detail ul li {
    font-size: 1.4rem; }
  #MainBodyContent .lame > div h2 {
    font-size: 1.8rem; }
  /*footer*/
  #footwrap .foot-map ul li {
    margin-left: 0;
    width: 25%; }
  /*about*/
  .about_page {
    /*.feature_box{
      padding: 100px 20px 20px;
    }
    .feature01{
      padding: 90px 20px 30px;
    }*/ }
  .about_page hgroup {
    background-image: none;
    padding: 10px;
    height: auto;
    text-align: center; }
  .about_page .about-tefal-page .feature-area .block {
    background-position: 50% 0px;
    border-top: none;
    background-size: 200px; }
  .about_page .about-tefal-page .feature-area .block .txt {
    width: 100%; }
  .about_page .about-tefal-page .feature-area .commitments01 {
    padding: 250px 0 20px; }
  .about_page .about-tefal-page .feature-area .commitments02 {
    padding: 320px 0 20px; }
  .about_page .about-tefal-page .feature-area .commitments03 {
    padding: 400px 0 20px; }
  .about_page .about-tefal-page .feature-area .innovations01 {
    padding: 250px 0 20px; }
  .about_page .about-tefal-page .feature-area .innovations02 {
    padding: 300px 0 20px; }
  .about_page .about-tefal-page .feature-area .innovations03 {
    padding: 300px 0 20px; }
  .about_page .about-tefal-page .feature-area .innovations04 {
    padding: 400px 0 20px; }
  /*tech*/
  #techwarp #titanium_excellence {
    background-size: 150%; }
  #techwarp #titanium_excellence .info .titaniumbox {
    padding: 10% 0 80px 10%; }
  #techwarp #titanium_excellence .info .titaniumbox .titanium01 {
    width: 20%; }
  #techwarp #titanium_excellence .info .titaniumbox .titanium02 {
    width: 70%; }
  /*warranty*/
  .warranty-box .btn-emsa {
    padding: 10px; }
  .warranty-box .btn-emsa img {
    width: 30px; }
  .warranty-box h1 {
    font-size: 2.0rem;
    line-height: 1.4; }
  .warranty-box h2 {
    font-size: 1.6rem; } }

@media screen and (max-width: 550px) {
  /*tech*/
  #techwarp #titanium_excellence {
    background-size: 220%; }
  #techwarp #titanium_excellence .info .titaniumbox {
    padding: 48% 0 80px 10px; }
  #techwarp #titanium_excellence .info .titaniumbox img:first-child {
    margin-right: 10px; } }

@media screen and (max-width: 500px) {
  /*tech*/
  #techwarp #titanium_excellence .info .titaniumbox {
    padding: 42% 0 80px 10px; } }

@media screen and (max-width: 450px) {
  /*header*/
  #headwrap .header-content .containwrap .head-entry ul li.navtop-bar .spanauto .search {
    width: 150px;
    padding: 10px;
    right: 0; }
  #headwrap .header-content .containwrap .head-entry ul li.navtop-bar .spanauto .search:before, #headwrap .header-content .containwrap .head-entry ul li.navtop-bar .spanauto .search:after {
    right: 10px; }
  /*main*/
  #MainBodyContent .top-service ul {
    display: block; }
  #MainBodyContent .top-service ul li {
    float: 0;
    width: 100%;
    text-align: left;
    margin: 0 0 15px 0; }
  #MainBodyContent .top-service ul li a img {
    float: left;
    margin-right: 10px; }
  /*footer*/
  #footwrap p.floatR {
    float: none;
    margin-top: 15px; }
  #footwrap .foot-map ul li {
    margin-bottom: 20px;
    width: 50%; }
  .block-form form div.third input, .block-form form div.third select, .block-form.thin form div.third input, .block-form.thin form div.third select {
    width: 29%; }
  .block-form form span.unmask, .block-form.thin form span.unmask {
    right: 25px; }
  .block-form form span.remark, .block-form.thin form span.remark {
    left: -20px; }
  /*about*/
  .about_page .about-tefal-page iframe {
    min-height: 200px; }
  /*tech*/
  #techwarp #titanium_excellence .info .titaniumbox {
    padding: 30% 0 50px 0px; } }

@media screen and (max-width: 400px) {
  /*haeder*/
  #headwrap .header-content .containwrap .toggle-nav {
    top: 20px; }
  #MainBodyContent {
    /*product*/ }
  #MainBodyContent .top-foot-info {
    background-position: 10px 15px;
    padding: 15px 15px 15px 60px; }
  #MainBodyContent ul.product-list li {
    width: 100%; }
  #MainBodyContent ul.product-list li:nth-child(2n+0) {
    margin-right: 0; }
  #MainBodyContent ul.product-list li .thumbnail {
    min-height: 0; }
  /*about*/
  .about_page .feature_box {
    padding: 0;
    background-position: 50% top;
    border-bottom: none;
    background-size: auto 200px; }
  .about_page .feature_box > div {
    width: 100%;
    padding: 210px 0 15px;
    background: transparent; }
  .about_page .feature01 {
    border-top: none; }
  /*tech*/
  #techwarp iframe {
    min-height: 250px; }
  #techwarp #titanium_excellence .info .titaniumbox {
    padding: 20% 0 50px 0px; }
  /*warranty*/
  .warranty-box {
    text-align: center; }
  .warranty-box .btn-tefal img {
    float: none;
    display: block;
    margin: 0 auto 10px;
    max-width: 20%; }
  .warranty-box h2 span {
    display: block; }
  .warranty-box > div .logo {
    width: 60%;
    display: block;
    margin: 0 auto;
    float: none !important; }
  .warranty-box > div .pic {
    width: 100%; } }

@media screen and (max-width: 360px) {
  /*tech*/
  #techwarp #titanium_excellence .info .titaniumbox {
    padding: 12% 0 30px 0px; } }

@media screen and (max-width: 350px) {
  /*menu*/
  .main-nav > div > ul li.accordion-group .accordion-body .accordion-inner .niv2 {
    min-width: 320px; }
  /*tech*/
  #techwarp #titanium_excellence .info .titaniumbox {
    padding: 8% 0 30px 0px; } }

/*****************************************
*                 import                 *
*****************************************/
/* @import url('https://fonts.googleapis.com/css?family=Noto+Serif+TC&display=swap'); */
/*****************************************
*                  body                  *
*****************************************/
* {
  outline: 0; }

body {
  font-size: 14px;
  font-family: sourcehansans-tc, 'Noto Sans S Chinese', 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', Tahoma, Verdana, Arial, Helvetica, sans-serif;
  /* 'Noto Serif TC',  */
  /* overflow: hidden; */ }

a, a:hover {
  text-decoration: none;
  cursor: pointer; }

#wrap {
  position: relative;
  width: 100%; }

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

.inner {
  position: relative;
  width: 940px;
  margin: 0 auto;
  z-index: 1; }

/*****************************************
*                 header                 *
*****************************************/
#headwrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2; }

#headwrap .sub-nav {
  background: #ffffff; }

/*****************************************
*                  main                  *
*****************************************/
#main-pc {
  position: relative;
  /* max-width: 1920px; */
  margin: 0 auto;
  overflow: hidden; }

#main-mobile {
  position: relative; }

#main-mobile .section {
  position: relative; }

#main-mobile .inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

#main-mobile .bg {
  display: block;
  width: 100%;
  margin: 0 auto; }

.isPC #main-mobile {
  display: none; }

.isMobile #main-pc {
  display: none; }

#main-pc .section .inner {
  height: 100%;
  -webkit-transform-origin: center 20%;
  -moz-transform-origin: center 20%;
  -ms-transform-origin: center 20%;
  -o-transform-origin: center 20%;
  transform-origin: center 20%; }

.temp-caption {
  font-size: 36px;
  font-weight: 500;
  text-align: center; }

#fp-nav {
  opacity: 1;
  -webkit-transition: .35s ease-out .15s;
  -o-transition: .35s ease-out .15s;
  transition: .35s ease-out .15s; }

.fp-viewing-index #fp-nav.right,
.fp-viewing-various #fp-nav.right,
.fp-viewing-series #fp-nav.right {
  opacity: 0; }

body #fp-nav.right {
  right: 0; }

body #fp-nav.right ul {
  overflow: hidden; }

body #fp-nav.right li {
  width: auto;
  height: auto;
  margin: 100px 0;
  padding-right: 80px;
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0); }

body.fp-viewing-index #fp-nav.right li,
body.fp-viewing-various #fp-nav.right li,
body.fp-viewing-series #fp-nav.right li {
  -webkit-transform: translateX(190px);
  -ms-transform: translateX(190px);
  transform: translateX(190px); }

body #fp-nav.right li:nth-child(1) {
  display: none; }

body #fp-nav.right li:nth-child(2) {
  -webkit-transition: .35s ease-out .1s;
  -o-transition: .35s ease-out .1s;
  transition: .35s ease-out .1s; }

body #fp-nav.right li:nth-child(3) {
  -webkit-transition: .35s ease-out .2s;
  -o-transition: .35s ease-out .2s;
  transition: .35s ease-out .2s; }

body #fp-nav.right li:nth-child(4) {
  -webkit-transition: .35s ease-out .3s;
  -o-transition: .35s ease-out .3s;
  transition: .35s ease-out .3s; }

body #fp-nav.right li::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  width: 80px;
  height: 1px;
  background: #e1c390; }

body #fp-nav.right li a {
  width: 110px;
  text-align: center;
  /* padding-right: 20px; */
  -webkit-transition: .15s ease-out;
  -o-transition: .15s ease-out;
  transition: .15s ease-out;
  -webkit-transform: scale(0.8);
  -ms-transform: scale(0.8);
  transform: scale(0.8); }

body #fp-nav.right li a.active {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1); }

body #fp-nav.right li a span {
  display: none; }

body #fp-nav.right li a::before {
  color: #eed3a6;
  font-size: 50px;
  font-family: 'Jomolhari', 'Times New Roman', Times, serif; }

body #fp-nav.right li a.active::before {
  color: #e1c390; }

body #fp-nav ul li:nth-child(2) a::before {
  content: '01'; }

body #fp-nav ul li:nth-child(3) a::before {
  content: '02'; }

body #fp-nav ul li:nth-child(4) a::before {
  content: '03'; }

body #fp-nav.right li a::after {
  display: none;
  position: absolute;
  width: 100%;
  height: 25px;
  color: #e1c390;
  font-size: 15px;
  font-weight: 300;
  line-height: 25px;
  /* padding: 5px 0; */ }

body #fp-nav.right li a.active::after {
  display: block; }

body #fp-nav ul li:nth-child(2) a::after {
  content: '佳溫紅心科技'; }

body #fp-nav ul li:nth-child(3) a::after {
  content: '鈦極不沾塗層'; }

body #fp-nav ul li:nth-child(4) a::after {
  content: '底部導熱更均勻'; }

body #fp-nav ul li a span {
  /* display: inline-block;
	width: 110px;
	height: 70px; */
  background: none;
  border-radius: 0; }

body #fp-nav ul li a.active span {
  /* display: inline-block;
	width: 110px;
	height: 70px; */ }

/*--- page-index ---*/
#page-index .outer .background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: 0;
  white-space: nowrap;
  -webkit-transform: rotate(53deg) translateX(-22.5%);
  -ms-transform: rotate(53deg) translateX(-22.5%);
  transform: rotate(53deg) translateX(-22.5%); }

#page-index .outer .background > div {
  position: relative;
  display: inline-block;
  /* height: 100%; */
  height: 1000vh;
  overflow: hidden;
  opacity: 0;
  -webkit-transition: .75s ease-in-out;
  -o-transition: .75s ease-in-out;
  transition: .75s ease-in-out; }

#page-index .outer .background > div.no-transition {
  -webkit-transition: none;
  -o-transition: none;
  transition: none; }

#page-index .outer .background .left {
  width: 70%;
  background: #132867;
  -webkit-transform: translateX(-50%) translateY(-500vh);
  -ms-transform: translateX(-50%) translateY(-500vh);
  transform: translateX(-50%) translateY(-500vh); }

#page-index .outer .background .left::before {
  content: '';
  position: absolute;
  top: -13%;
  left: -270%;
  width: 1000%;
  height: 100%;
  background: url(../images/loading/pattern.gif) 0 0 repeat;
  -webkit-transform: rotate(307deg);
  -ms-transform: rotate(307deg);
  transform: rotate(307deg); }

#page-index .outer .background .middle {
  width: 24%;
  background: #ffffff;
  -webkit-transform: translateY(-500vh);
  -ms-transform: translateY(-500vh);
  transform: translateY(-500vh); }

#page-index .outer .background .right {
  width: 70%;
  background: #a00000;
  -webkit-transform: translateX(50%) translateY(-500vh);
  -ms-transform: translateX(50%) translateY(-500vh);
  transform: translateX(50%) translateY(-500vh); }

#page-index.play-intro .outer .background .left,
#page-index.play-intro .outer .background .right {
  -webkit-transform: translateX(0) translateY(-500vh);
  -ms-transform: translateX(0) translateY(-500vh);
  transform: translateX(0) translateY(-500vh);
  opacity: 1; }

#page-index .caption {
  top: 324px;
  left: -254px;
  width: 513px;
  height: 311px;
  background: url(../images/index/caption.png) 0 0 no-repeat;
  opacity: 0;
  -webkit-transform: translateY(50px);
  -ms-transform: translateY(50px);
  transform: translateY(50px);
  -webkit-transition: .5s ease-out .45s;
  -o-transition: .5s ease-out .45s;
  transition: .5s ease-out .45s; }

#page-index.play-intro .caption {
  opacity: 1;
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0); }

#page-index .logo {
  top: 215px;
  left: -264px;
  width: 113px;
  height: 105px;
  background: url(../images/index/logo.png) 0 0 no-repeat;
  opacity: 0;
  -webkit-transition: .5s ease-out .45s;
  -o-transition: .5s ease-out .45s;
  transition: .5s ease-out .45s; }

#page-index.play-intro .logo {
  opacity: 1; }

#page-index .product {
  position: relative;
  top: 196px;
  left: 21px;
  width: 1053px;
  height: 960px;
  background: url(../images/index/product.png) 0 0 no-repeat;
  -webkit-transform: rotate(10deg) translate(-50px, 50px);
  -ms-transform: rotate(10deg) translate(-50px, 50px);
  transform: rotate(10deg) translate(-50px, 50px);
  -webkit-transform-origin: 930px 140px;
  /*660px 350px*/
  -ms-transform-origin: 930px 140px;
  transform-origin: 930px 140px;
  -webkit-transition: .65s ease-out .4s;
  -o-transition: .65s ease-out .4s;
  transition: .65s ease-out .4s;
  opacity: 0; }

#page-index.play-intro .product {
  -webkit-transform: rotate(0deg) translate(0, 0);
  -ms-transform: rotate(0deg) translate(0, 0);
  transform: rotate(0deg) translate(0, 0);
  opacity: 1; }

#page-index .product:before {
  position: absolute;
  content: '';
  top: 78px;
  left: 414px;
  width: 484px;
  height: 576px;
  background: url(../images/index/frame.png) 0 0 no-repeat;
  -webkit-transform: rotate(0deg) translateY(50px);
  -ms-transform: rotate(0deg) translateY(50px);
  transform: rotate(0deg) translateY(50px);
  -webkit-transition: .65s ease-in-out .5s;
  -o-transition: .65s ease-in-out .5s;
  transition: .65s ease-in-out .5s;
  opacity: 0; }

#page-index.play-intro .product:before {
  -webkit-transform: rotate(0deg) translateY(0);
  -ms-transform: rotate(0deg) translateY(0);
  transform: rotate(0deg) translateY(0);
  opacity: 1; }

#page-index .product:after {
  position: absolute;
  content: '';
  top: 88px;
  left: 381px;
  width: 426px;
  height: 437px;
  background: url(../images/index/product-extra.png) 0 0 no-repeat; }

#main-pc .section .extra {
  background-position: 0 0;
  background-repeat: no-repeat; }

#page-index .extra-1 {
  top: 184px;
  left: 324px;
  width: 164px;
  height: 186px;
  background-image: url(../images/index/extra-1.png);
  -webkit-transform-origin: 150% 150%;
  -moz-transform-origin: 150% 150%;
  -ms-transform-origin: 150% 150%;
  -o-transform-origin: 150% 150%;
  transform-origin: 150% 150%;
  -webkit-transform: rotate(-10deg);
  -ms-transform: rotate(-10deg);
  transform: rotate(-10deg);
  -webkit-transition: .5s ease-out .25s;
  -o-transition: .5s ease-out .25s;
  transition: .5s ease-out .25s;
  opacity: 0; }

#page-index.play-intro .extra-1 {
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
  opacity: 1; }

#page-index .extra-2 {
  top: 173px;
  left: 865px;
  width: 217px;
  height: 138px;
  background-image: url(../images/index/extra-2.png);
  -webkit-transition: .5s ease-out .35s;
  -o-transition: .5s ease-out .35s;
  transition: .5s ease-out .35s;
  opacity: 0; }

#page-index .extra-3 {
  top: 709px;
  left: -86px;
  width: 252px;
  height: 169px;
  background-image: url(../images/index/extra-3.png);
  -webkit-transition: .5s ease-out .55s;
  -o-transition: .5s ease-out .55s;
  transition: .5s ease-out .55s;
  opacity: 0; }

#page-index.play-intro .extra-2,
#page-index.play-intro .extra-3 {
  opacity: 1; }

#page-index .extra-4 {
  top: 665px;
  left: 875px;
  width: 244px;
  height: 275px;
  background-image: url(../images/index/extra-4.png);
  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  -o-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: rotate(-10deg);
  -ms-transform: rotate(-10deg);
  transform: rotate(-10deg);
  -webkit-transition: .5s ease-out .45s;
  -o-transition: .5s ease-out .45s;
  transition: .5s ease-out .45s;
  opacity: 0; }

#page-index.play-intro .extra-4 {
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
  opacity: 1; }

#page-index .tips {
  bottom: 0;
  left: 50%;
  margin-left: -61.5px;
  z-index: 1;
  -webkit-transition: opacity .75s ease-out .75s;
  -o-transition: opacity .75s ease-out .75s;
  transition: opacity .75s ease-out .75s;
  -webkit-transform-origin: center bottom;
  -moz-transform-origin: center bottom;
  -ms-transform-origin: center bottom;
  -o-transform-origin: center bottom;
  transform-origin: center bottom;
  opacity: 0; }

#page-index.play-intro .tips {
  opacity: 1; }

#page-index .tips span {
  display: block;
  width: 123px;
  height: 22px;
  background: url(../images/index/tips.png) 0 0 no-repeat; }

#page-index .line {
  height: 75px;
  margin-top: 20px;
  text-align: center; }

#mobile-index .line {
  width: 2px;
  height: 10.65%;
  left: 50%;
  bottom: 0;
  -webkit-transform: translateX(-50%) translateY(50%);
  -moz-transform: translateX(-50%) translateY(50%);
  -ms-transform: translateX(-50%) translateY(50%);
  -o-transform: translateX(-50%) translateY(50%);
  transform: translateX(-50%) translateY(50%);
  text-align: center; }

#mobile-index .line svg {
  width: 100%;
  height: 100%; }

#page-index line {
  stroke: #d2a87d;
  stroke-width: 4px;
  stroke-dasharray: 75 75;
  stroke-dashoffset: 0;
  -webkit-animation: tipsAnimation 1.5s ease-in-out infinite;
  animation: tipsAnimation 1.5s ease-in-out infinite; }

#mobile-index line {
  stroke: #d2a87d;
  stroke-width: 4px;
  stroke-dasharray: 150% 150%;
  stroke-dashoffset: 0;
  -webkit-animation: tipsAnimation 1.5s ease-in-out infinite;
  animation: tipsAnimation 1.5s ease-in-out infinite; }

@-webkit-keyframes tipsAnimation {
  0% {
    stroke-dashoffset: 150%; }
  50% {
    stroke-dashoffset: 0; }
  100% {
    stroke-dashoffset: -150%; } }

@keyframes tipsAnimation {
  0% {
    stroke-dashoffset: 150%; }
  50% {
    stroke-dashoffset: 0; }
  100% {
    stroke-dashoffset: -150%; } }

/*--- mobile-index ---*/
#mobile-index {
  background-color: #132867; }

/*--- page-thermo_spot ---*/
#page-thermo_spot .outer,
#page-thermo_spot .outer .background,
#page-thermo_spot .outer .background > div,
#page-titanium_excellence .outer,
#page-titanium_excellence .outer .background,
#page-titanium_excellence .outer .background > div,
#page-conducting .outer,
#page-conducting .outer .background,
#page-conducting .outer .background > div {
  position: absolute;
  width: 100%;
  height: 100%; }

#page-thermo_spot .outer .background .left {
  top: 0;
  right: 50%;
  width: 895px;
  height: 100%;
  margin-right: -208px;
  background: #8c0000;
  -webkit-transform-origin: center right;
  -moz-transform-origin: center right;
  -ms-transform-origin: center right;
  -o-transform-origin: center right;
  transform-origin: center right;
  -webkit-transition: -webkit-transform .65s ease-in-out;
  transition: -webkit-transform .65s ease-in-out;
  -o-transition: transform .65s ease-in-out;
  transition: transform .65s ease-in-out;
  transition: transform .65s ease-in-out, -webkit-transform .65s ease-in-out;
  -webkit-transform: scale(0, 1);
  -ms-transform: scale(0, 1);
  transform: scale(0, 1); }

#page-thermo_spot .outer .background .right {
  /* top: 11.48%; */
  top: 21.48%;
  left: 50%;
  width: 710px;
  /* height: 70%; */
  height: 64.06%;
  margin-left: -67px;
  background: url(../images/loading/pattern.gif) #0a236f 40px 40px repeat;
  -webkit-transform-origin: center left;
  -moz-transform-origin: center left;
  -ms-transform-origin: center left;
  -o-transform-origin: center left;
  transform-origin: center left;
  -webkit-transition: -webkit-transform .65s ease-in-out .1s;
  transition: -webkit-transform .65s ease-in-out .1s;
  -o-transition: transform .65s ease-in-out .1s;
  transition: transform .65s ease-in-out .1s;
  transition: transform .65s ease-in-out .1s, -webkit-transform .65s ease-in-out .1s;
  -webkit-transform: scale(0, 1);
  -ms-transform: scale(0, 1);
  transform: scale(0, 1); }

#page-thermo_spot.play-intro .outer .background .left,
#page-thermo_spot.play-intro .outer .background .right {
  -webkit-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  transform: scale(1, 1); }

#page-thermo_spot .inner {
  /* height: 100%!important;
	transform: scale(1)!important; */
  pointer-events: none; }

#page-thermo_spot .caption {
  top: 294px;
  left: -134px;
  width: 441px;
  height: 150px;
  background: url(../images/thermo_spot/caption.png?v=191105) 0 0 no-repeat;
  -webkit-transition: .65s ease-in-out .3s;
  -o-transition: .65s ease-in-out .3s;
  transition: .65s ease-in-out .3s;
  -webkit-transform: translateX(-100px);
  -ms-transform: translateX(-100px);
  transform: translateX(-100px);
  opacity: 0; }

#page-thermo_spot .desc {
  top: 482px;
  left: -134px;
  width: 420px;
  color: #ffffff;
  font-size: 22px;
  font-weight: 200;
  text-align: justify;
  line-height: 38px;
  letter-spacing: 2px;
  -webkit-transition: .65s ease-in-out .4s;
  -o-transition: .65s ease-in-out .4s;
  transition: .65s ease-in-out .4s;
  -webkit-transform: translateX(-100px);
  -ms-transform: translateX(-100px);
  transform: translateX(-100px);
  opacity: 0; }

#page-thermo_spot .sample {
  top: 690px;
  left: -135px;
  -webkit-transition: .65s ease-in-out .5s;
  -o-transition: .65s ease-in-out .5s;
  transition: .65s ease-in-out .5s;
  -webkit-transform: translateX(-100px);
  -ms-transform: translateX(-100px);
  transform: translateX(-100px);
  opacity: 0; }

#page-thermo_spot.play-intro .caption,
#page-thermo_spot.play-intro .desc,
#page-thermo_spot.play-intro .sample {
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  opacity: 1; }

#page-thermo_spot .label {
  position: absolute;
  top: 0;
  left: 166px;
  width: 91px;
  height: 68px;
  background: url(../images/thermo_spot/label.png) 0 0 no-repeat;
  z-index: 2; }

#page-thermo_spot .result {
  position: absolute;
  top: 36px;
  left: 0;
  width: 422px;
  height: 173px;
  background: url(../images/thermo_spot/result.png) 0 0 no-repeat;
  z-index: 1; }

#page-thermo_spot .result:before,
#page-thermo_spot .result:after {
  content: '';
  position: absolute;
  top: -3px;
  left: -2px;
  width: 35px;
  height: 15px;
  border-radius: 5px 0 0 0;
  border: #e60012 3px solid;
  border-top-width: 4px;
  border-right: 0;
  border-bottom: 0; }

#page-thermo_spot .result:after {
  top: auto;
  right: -2px;
  bottom: -3px;
  left: auto;
  border-radius: 0 0 5px 0;
  border: #e60012 3px solid;
  border-top: 0;
  border-left: 0;
  border-bottom-width: 4px; }

#page-thermo_spot .extra-1 {
  top: 190px;
  left: -250px;
  width: 162px;
  height: 115px;
  background-image: url(../images/thermo_spot/extra-1.png);
  -webkit-transform: translateY(-50px);
  -ms-transform: translateY(-50px);
  transform: translateY(-50px);
  -webkit-transition: .5s ease-out .25s;
  -o-transition: .5s ease-out .25s;
  transition: .5s ease-out .25s;
  opacity: 0; }

#page-thermo_spot .extra-2 {
  top: 260px;
  left: 1054px;
  width: 158px;
  height: 126px;
  background-image: url(../images/thermo_spot/extra-2.png);
  -webkit-transform: translateY(-50px);
  -ms-transform: translateY(-50px);
  transform: translateY(-50px);
  -webkit-transition: .5s ease-out .45s;
  -o-transition: .5s ease-out .45s;
  transition: .5s ease-out .45s;
  opacity: 0; }

#page-thermo_spot .extra-3 {
  /* top: 824px; */
  top: 884px;
  left: 272px;
  width: 209px;
  height: 159px;
  background-image: url(../images/thermo_spot/extra-3.png);
  -webkit-transform: translateY(50px);
  -ms-transform: translateY(50px);
  transform: translateY(50px);
  -webkit-transition: .5s ease-out .35s;
  -o-transition: .5s ease-out .35s;
  transition: .5s ease-out .35s;
  opacity: 0; }

#page-thermo_spot .extra-4 {
  /* top: 680px; */
  top: 800px;
  left: 1071px;
  width: 101px;
  height: 493px;
  background-image: url(../images/thermo_spot/extra-4.png);
  -webkit-transform: translateY(50px);
  -ms-transform: translateY(50px);
  transform: translateY(50px);
  -webkit-transition: .5s ease-out .55s;
  -o-transition: .5s ease-out .55s;
  transition: .5s ease-out .55s;
  opacity: 0; }

#page-thermo_spot .extra-5 {
  /* top: 660px; */
  top: 780px;
  left: 1189px;
  width: 93px;
  height: 568px;
  background-image: url(../images/thermo_spot/extra-5.png);
  -webkit-transform: translateY(50px);
  -ms-transform: translateY(50px);
  transform: translateY(50px);
  -webkit-transition: .5s ease-out .7s;
  -o-transition: .5s ease-out .7s;
  transition: .5s ease-out .7s;
  opacity: 0; }

#page-thermo_spot.play-intro .extra {
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
  opacity: 1; }

#page-thermo_spot .product-wrap {
  /* top: 11.48%; */
  top: 21.48%;
  left: 50%;
  width: 843px;
  /* height: 81%; */
  height: 74.067%;
  margin-left: -142px;
  overflow: hidden; }

#page-thermo_spot .product {
  width: 100%;
  height: 100%;
  background: url(../images/thermo_spot/product.png) 0 0 no-repeat;
  background-size: contain;
  -webkit-transition: .65s ease-in-out .25s;
  -o-transition: .65s ease-in-out .25s;
  transition: .65s ease-in-out .25s;
  -webkit-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  transform: translateY(-100%); }

#page-thermo_spot.play-intro .product {
  -webkit-transform: translateY(0%);
  -ms-transform: translateY(0%);
  transform: translateY(0%); }

#page-thermo_spot .product::before,
#page-thermo_spot .product::after {
  content: '';
  position: absolute;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: contain;
  -webkit-transition: .75s ease-in-out;
  -o-transition: .75s ease-in-out;
  transition: .75s ease-in-out;
  opacity: 0; }

#page-thermo_spot .product.elem-in::before,
#page-thermo_spot .product.elem-in::after {
  opacity: 1; }

#page-thermo_spot .product::before {
  top: 16.5%;
  left: 11%;
  width: 80.78%;
  height: 88.67%;
  background-image: url(../images/thermo_spot/product-extra-1.png);
  z-index: 1; }

#page-thermo_spot .product::after {
  top: 16.5%;
  left: 7%;
  width: 68.32%;
  height: 61.78%;
  background-image: url(../images/thermo_spot/product-extra-2.png);
  z-index: 3; }

#page-thermo_spot .temperature {
  top: 50%;
  left: 50%;
  width: 85px;
  height: 35px;
  color: #ffffff;
  font-size: 20px;
  line-height: 35px;
  text-align: center;
  margin: -18% 0 0 -3%;
  background: #f30708;
  border-radius: 17.5px;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 4; }

#page-thermo_spot .circle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18.3867%;
  height: 17.73455%;
  margin: -3% 0 0 -3%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background: url(../images/thermo_spot/circle.png) 0 0 no-repeat;
  background-size: contain;
  z-index: 4; }

#page-thermo_spot .circle::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../images/thermo_spot/circle-complete.png) 0 0 no-repeat;
  background-size: contain;
  opacity: 0;
  -webkit-transition: 2s ease-out;
  -o-transition: 2s ease-out;
  transition: 2s ease-out; }

#page-thermo_spot .circle.complete::after {
  opacity: 1; }

#page-thermo_spot .circle.complete.fade-out::after {
  opacity: 0.25; }

#page-thermo_spot .circle .light {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #e60012;
  border-radius: 50%;
  -webkit-filter: blur(10px);
  filter: blur(10px);
  z-index: 1;
  opacity: 0; }

#page-thermo_spot .circle .light.elem-in {
  -webkit-animation: circleLightAnimation 2s ease-in-out infinite;
  animation: circleLightAnimation 2s ease-in-out infinite; }

@-webkit-keyframes circleLightAnimation {
  0% {
    opacity: 0; }
  50% {
    opacity: 0.5; }
  100% {
    opacity: 0; } }

@keyframes circleLightAnimation {
  0% {
    opacity: 0; }
  50% {
    opacity: 0.5; }
  100% {
    opacity: 0; } }

#page-thermo_spot .circle .dot {
  width: 100%;
  height: 100%;
  z-index: 2;
  -webkit-transform-origin: center top;
  -moz-transform-origin: center top;
  -ms-transform-origin: center top;
  -o-transform-origin: center top;
  transform-origin: center top; }

#page-thermo_spot .circle .dot:before,
#page-thermo_spot .circle .dot:after {
  position: absolute;
  top: -6px;
  left: 50%;
  content: '';
  width: 8px;
  height: 8px;
  margin-left: -6px;
  border: #e4c085 2px solid;
  border-radius: 50%; }

#page-thermo_spot .circle .dot:after {
  background-color: #e4c085;
  -webkit-transform-origin: center 83px;
  -moz-transform-origin: center 83px;
  -ms-transform-origin: center 83px;
  -o-transform-origin: center 83px;
  transform-origin: center 83px;
  -webkit-transform: rotate(12.5deg);
  -moz-transform: rotate(12.5deg);
  -ms-transform: rotate(12.5deg);
  -o-transform: rotate(12.5deg);
  transform: rotate(12.5deg);
  -webkit-transition: 2s ease-in-out;
  -o-transition: 2s ease-in-out;
  transition: 2s ease-in-out; }

#page-thermo_spot .circle.complete .dot:after {
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  transform: rotate(360deg); }

#page-thermo_spot .progress {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 190px;
  margin: -94.25px 0 0 -95.25px;
  z-index: 1; }

#page-thermo_spot .progress:before {
  content: '';
  display: block;
  padding-top: 100%; }

.circular {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: auto;
  -webkit-transform: rotate(-85deg);
  -ms-transform: rotate(-85deg);
  transform: rotate(-85deg); }

.path {
  stroke: #ff0004;
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  stroke-linecap: round; }

.circle.complete .path {
  -webkit-animation: dash 2s ease-in-out 0s 1 forwards;
  animation: dash 2s ease-in-out 0s 1 forwards; }

@-webkit-keyframes dash {
  0% {
    stroke-dasharray: 1, 200; }
  100% {
    stroke-dasharray: 125, 200; } }

@keyframes dash {
  0% {
    stroke-dasharray: 1, 200; }
  100% {
    stroke-dasharray: 125, 200; } }

#page-thermo_spot .frame {
  top: 21%;
  left: 19.5%;
  width: 57%;
  height: 65%;
  background: url(../images/thermo_spot/frame.png?v=191105) center center no-repeat;
  background-size: contain;
  z-index: 2;
  -webkit-transform: translateY(50px);
  -ms-transform: translateY(50px);
  transform: translateY(50px);
  -webkit-transition: .85s ease-in-out .15s;
  -o-transition: .85s ease-in-out .15s;
  transition: .85s ease-in-out .15s;
  opacity: 0; }

#page-thermo_spot .frame.elem-in {
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
  opacity: 1; }

/*--- mobile-thermo_spot ---*/
#mobile-thermo_spot {
  background-color: #8c0000; }

/*--- page-titanium_excellence ---*/
#page-titanium_excellence .outer,
#page-titanium_excellence .inner {
  /* z-index: auto; */ }

#page-titanium_excellence .caption {
  top: 334px;
  left: 621px;
  width: 430px;
  height: 192px;
  background: url(../images/titanium_excellence/caption.png) 0 0 no-repeat;
  -webkit-transition: .65s ease-in-out .3s;
  -o-transition: .65s ease-in-out .3s;
  transition: .65s ease-in-out .3s;
  -webkit-transform: translateX(-100px);
  -ms-transform: translateX(-100px);
  transform: translateX(-100px);
  opacity: 0; }

#page-titanium_excellence .desc {
  top: 572px;
  left: 625px;
  width: 492px;
  color: #ffffff;
  font-size: 22px;
  font-weight: 200;
  text-align: justify;
  line-height: 38px;
  letter-spacing: 2px;
  -webkit-transition: .65s ease-in-out .4s;
  -o-transition: .65s ease-in-out .4s;
  transition: .65s ease-in-out .4s;
  -webkit-transform: translateX(-100px);
  -ms-transform: translateX(-100px);
  transform: translateX(-100px);
  opacity: 0; }

#page-titanium_excellence .sample {
  top: 730px;
  left: 626px;
  -webkit-transition: .65s ease-in-out .5s;
  -o-transition: .65s ease-in-out .5s;
  transition: .65s ease-in-out .5s;
  -webkit-transform: translateX(-100px);
  -ms-transform: translateX(-100px);
  transform: translateX(-100px);
  opacity: 0; }

#page-titanium_excellence.play-intro .caption,
#page-titanium_excellence.play-intro .desc,
#page-titanium_excellence.play-intro .sample {
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  opacity: 1; }

#page-titanium_excellence .detail {
  /* display: none; */
  top: 554px;
  left: 590px;
  padding: 30px 14px 60px 32px;
  background: #8c0000;
  -webkit-transition: .35s ease-in-out;
  -o-transition: .35s ease-in-out;
  transition: .35s ease-in-out;
  -webkit-transform: translateX(-15px);
  -ms-transform: translateX(-15px);
  transform: translateX(-15px);
  opacity: 0;
  pointer-events: none; }

#page-titanium_excellence .detail.elem-in {
  /* display: block; */
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  opacity: 1; }

#mobile-titanium_excellence .detail {
  display: none;
  top: 67.1%;
  left: 0;
  width: 100%;
  text-align: center; }

#mobile-titanium_excellence .detail img {
  width: 97.333%; }

#page-titanium_excellence .sample:before,
#page-titanium_excellence .sample:after,
#page-titanium_excellence .detail:before,
#page-titanium_excellence .detail:after {
  content: '';
  position: absolute;
  top: -4px;
  left: -3px;
  width: 35px;
  height: 15px;
  border-radius: 5px 0 0 0;
  border: #e60012 3px solid;
  border-top-width: 4px;
  border-right: 0;
  border-bottom: 0; }

#page-titanium_excellence .detail:before {
  top: 26px;
  left: 29px; }

#page-titanium_excellence .sample:after,
#page-titanium_excellence .detail:after {
  top: auto;
  right: -2px;
  bottom: -4px;
  left: auto;
  border-radius: 0 0 5px 0;
  border: #e60012 3px solid;
  border-top: 0;
  border-left: 0;
  border-bottom-width: 4px; }

#page-titanium_excellence .detail:after {
  right: 12px;
  bottom: 56px; }

#page-titanium_excellence .sample .image {
  width: 491px;
  height: 170px;
  background: url(../images/titanium_excellence/image.png?v=191105) 0 0 no-repeat; }

#page-titanium_excellence .detail .image {
  width: 524px;
  height: 267px;
  background: url(../images/titanium_excellence/detail.png) 0 0 no-repeat; }

#page-titanium_excellence .outer .background .left {
  /* top: 23.425%; */
  right: 50%;
  /* bottom: 6.66%; */
  bottom: 6.1%;
  width: 710px;
  /* height: 70%; */
  height: 63.98%;
  margin-right: -31px;
  background: url(../images/loading/pattern.gif) #0a236f 40px 40px repeat;
  z-index: 2;
  /* 2 */
  -webkit-transform-origin: center right;
  -moz-transform-origin: center right;
  -ms-transform-origin: center right;
  -o-transform-origin: center right;
  transform-origin: center right;
  -webkit-transition: -webkit-transform .65s ease-in-out .1s;
  transition: -webkit-transform .65s ease-in-out .1s;
  -o-transition: transform .65s ease-in-out .1s;
  transition: transform .65s ease-in-out .1s;
  transition: transform .65s ease-in-out .1s, -webkit-transform .65s ease-in-out .1s;
  -webkit-transform: scale(0, 1);
  -ms-transform: scale(0, 1);
  transform: scale(0, 1); }

#page-titanium_excellence .outer .background .right {
  top: 0;
  left: 50%;
  width: 880px;
  height: 100%;
  margin-left: -156px;
  background: #8c0000;
  z-index: 1;
  /* 1 */
  -webkit-transform-origin: center left;
  -moz-transform-origin: center left;
  -ms-transform-origin: center left;
  -o-transform-origin: center left;
  transform-origin: center left;
  -webkit-transition: -webkit-transform .65s ease-in-out;
  transition: -webkit-transform .65s ease-in-out;
  -o-transition: transform .65s ease-in-out;
  transition: transform .65s ease-in-out;
  transition: transform .65s ease-in-out, -webkit-transform .65s ease-in-out;
  -webkit-transform: scale(0, 1);
  -ms-transform: scale(0, 1);
  transform: scale(0, 1); }

#page-titanium_excellence.play-intro .outer .background .left,
#page-titanium_excellence.play-intro .outer .background .right {
  -webkit-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  transform: scale(1, 1); }

#page-titanium_excellence .product-wrap {
  /* top: 15.0925%; */
  right: 50%;
  /* bottom: 6.66%; */
  bottom: 6.1%;
  width: 857px;
  /* height: 78.2407%; */
  height: 71.61%;
  margin-right: -135px;
  overflow: hidden;
  z-index: 2;
  /* 2 */ }

#page-titanium_excellence .product {
  width: 100%;
  height: 100%;
  background: url(../images/titanium_excellence/product.png) 0 0 no-repeat;
  background-size: contain;
  -webkit-transition: .65s ease-in-out .25s;
  -o-transition: .65s ease-in-out .25s;
  transition: .65s ease-in-out .25s;
  -webkit-transform: translateY(100%);
  -ms-transform: translateY(100%);
  transform: translateY(100%); }

#page-titanium_excellence.play-intro .product {
  -webkit-transform: translateY(0%);
  -ms-transform: translateY(0%);
  transform: translateY(0%); }

#page-titanium_excellence .product::before,
#page-titanium_excellence .product::after {
  content: '';
  position: absolute;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: contain; }

#page-titanium_excellence .product::before {
  -webkit-transition: .75s ease-in-out .65s;
  -o-transition: .75s ease-in-out .65s;
  transition: .75s ease-in-out .65s;
  -webkit-transform: translateY(50px);
  -ms-transform: translateY(50px);
  transform: translateY(50px);
  opacity: 0; }

#page-titanium_excellence .product.elem-in::before,
#page-titanium_excellence .product.elem-in::after {
  /* opacity: 1; */ }

#page-titanium_excellence.play-intro .product::before {
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
  opacity: 1; }

#page-titanium_excellence .product::before {
  top: 14.9112%;
  left: 18.436%;
  width: 55.1925%;
  height: 66.6272%;
  background-image: url(../images/titanium_excellence/frame.png);
  z-index: 1; }

#page-titanium_excellence .product::after {
  top: 12.544%;
  left: 20.5367%;
  width: 23.1038%;
  height: 18.343%;
  background-image: url(../images/titanium_excellence/product-extra.png);
  z-index: 2; }

#page-titanium_excellence .ripple {
  display: none;
  top: 675px;
  left: 359px;
  width: 80px;
  height: 80px;
  /* filter: blur(1px); */ }

#mobile-titanium_excellence .ripple {
  display: block;
  top: 65.34%;
  left: 46.133%;
  width: 9.9%;
  height: calc(100vw * 0.099); }

#page-titanium_excellence .ripple div,
#mobile-titanium_excellence .ripple div {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 4px solid #a7854c;
  opacity: 1;
  border-radius: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-animation: rippleAnimation 1.5s linear infinite;
  animation: rippleAnimation 1.5s linear infinite; }

#mobile-titanium_excellence .ripple div {
  border: 3px solid #a7854c; }

#page-titanium_excellence .ripple div:nth-child(2),
#mobile-titanium_excellence .ripple div:nth-child(2) {
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s; }

@-webkit-keyframes rippleAnimation {
  0% {
    width: 20px;
    height: 20px;
    opacity: 1; }
  30% { }
  100% {
    width: 80px;
    height: 80px;
    opacity: 0;
    border-color: transparent; } }

@keyframes rippleAnimation {
  0% {
    width: 20px;
    height: 20px;
    opacity: 1; }
  30% { }
  100% {
    width: 80px;
    height: 80px;
    opacity: 0;
    border-color: transparent; } }

#page-titanium_excellence .btn {
  display: none;
  top: 692px;
  left: 376px;
  width: 46px;
  height: 46px;
  background: url(../images/titanium_excellence/btn.png) center center no-repeat;
  background-size: contain;
  z-index: 1;
  -webkit-animation: btnAnimation 1.5s ease-in-out infinite;
  animation: btnAnimation 1.5s ease-in-out infinite; }

#mobile-titanium_excellence .btn {
  top: 65.34%;
  left: 46.133%;
  display: inline-block;
  width: 9.9%;
  z-index: 1;
  background-color: transparent;
  -webkit-animation: btnAnimation 1.5s ease-in-out infinite;
  animation: btnAnimation 1.5s ease-in-out infinite; }

#mobile-titanium_excellence .btn img {
  width: 100%; }

@-webkit-keyframes btnAnimation {
  0% {
    -webkit-transform: scale(1.15);
    transform: scale(1.15); }
  50% {
    -webkit-transform: scale(0.85);
    transform: scale(0.85); }
  100% {
    -webkit-transform: scale(1.15);
    transform: scale(1.15); } }

@keyframes btnAnimation {
  0% {
    -webkit-transform: scale(1.15);
    transform: scale(1.15); }
  50% {
    -webkit-transform: scale(0.85);
    transform: scale(0.85); }
  100% {
    -webkit-transform: scale(1.15);
    transform: scale(1.15); } }

#page-titanium_excellence svg {
  position: absolute;
  top: 714px;
  left: 418px; }

#page-titanium_excellence line {
  stroke: #d2a87d;
  stroke-width: 4px;
  stroke-dasharray: 240 240;
  stroke-dashoffset: 240;
  -webkit-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out; }

#page-titanium_excellence .elem-in line {
  stroke-dashoffset: 0; }

#page-titanium_excellence .extra-1 {
  top: 200px;
  left: -310px;
  width: 156px;
  height: 204px;
  background-image: url(../images/titanium_excellence/extra-1.png);
  -webkit-transform: rotate(-15deg) translateY(-20px);
  -ms-transform: rotate(-15deg) translateY(-20px);
  transform: rotate(-15deg) translateY(-20px);
  -webkit-transform-origin: -20px -20px;
  -ms-transform-origin: -20px -20px;
  transform-origin: -20px -20px;
  -webkit-transition: .75s ease-out .25s;
  -o-transition: .75s ease-out .25s;
  transition: .75s ease-out .25s;
  opacity: 0; }

#page-titanium_excellence.play-intro .extra-1 {
  -webkit-transform: rotate(0deg) translateY(0px);
  -ms-transform: rotate(0deg) translateY(0px);
  transform: rotate(0deg) translateY(0px);
  opacity: 1; }

#page-titanium_excellence .extra-2 {
  top: 900px;
  left: 384px;
  width: 196px;
  height: 181px;
  background-image: url(../images/titanium_excellence/extra-2.png);
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
  -webkit-transform-origin: 92px 68px;
  -ms-transform-origin: 92px 68px;
  transform-origin: 92px 68px;
  -webkit-transition: .75s ease-out .45s;
  -o-transition: .75s ease-out .45s;
  transition: .75s ease-out .45s;
  opacity: 0; }

#page-titanium_excellence.play-intro .extra-2 {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  opacity: 1; }

/*--- mobile-titanium_excellence ---*/
#mobile-titanium_excellence {
  background-color: #8c0000; }

/*--- page-conducting ---*/
#page-conducting .outer .background .left {
  top: 0;
  right: 50%;
  width: 783px;
  height: 100%;
  margin-right: -283px;
  background: url(../images/loading/pattern.gif) #0a236f 50px 50px repeat;
  -webkit-transform-origin: center left;
  -moz-transform-origin: center left;
  -ms-transform-origin: center left;
  -o-transform-origin: center left;
  transform-origin: center left;
  -webkit-transition: -webkit-transform .65s ease-in-out;
  transition: -webkit-transform .65s ease-in-out;
  -o-transition: transform .65s ease-in-out;
  transition: transform .65s ease-in-out;
  transition: transform .65s ease-in-out, -webkit-transform .65s ease-in-out;
  -webkit-transform: scale(0, 1);
  -ms-transform: scale(0, 1);
  transform: scale(0, 1); }

#page-conducting .outer .background .right {
  /* top: 21.20%; */
  /* top: 19.40%; */
  top: 24.40%;
  left: 50%;
  width: 710px;
  /* height: 66.76%; */
  height: 61.10%;
  margin-left: -67px;
  background: #8c0000;
  -webkit-transform-origin: center right;
  -moz-transform-origin: center right;
  -ms-transform-origin: center right;
  -o-transform-origin: center right;
  transform-origin: center right;
  -webkit-transition: -webkit-transform .65s ease-in-out .1s;
  transition: -webkit-transform .65s ease-in-out .1s;
  -o-transition: transform .65s ease-in-out .1s;
  transition: transform .65s ease-in-out .1s;
  transition: transform .65s ease-in-out .1s, -webkit-transform .65s ease-in-out .1s;
  -webkit-transform: scale(0, 1);
  -ms-transform: scale(0, 1);
  transform: scale(0, 1); }

#page-conducting.play-intro .outer .background .left,
#page-conducting.play-intro .outer .background .right {
  -webkit-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  transform: scale(1, 1); }

#page-conducting .caption {
  top: 602px;
  left: -60px;
  width: 372px;
  height: 100px;
  background: url(../images/conducting/caption.png) 0 0 no-repeat;
  -webkit-transition: .65s ease-in-out .3s;
  -o-transition: .65s ease-in-out .3s;
  transition: .65s ease-in-out .3s;
  -webkit-transform: translateX(-100px);
  -ms-transform: translateX(-100px);
  transform: translateX(-100px);
  opacity: 0; }

#page-conducting .desc {
  top: 726px;
  left: -58px;
  width: 370px;
  color: #ffffff;
  font-size: 22px;
  font-weight: 200;
  text-align: justify;
  line-height: 38px;
  letter-spacing: 2px;
  -webkit-transition: .65s ease-in-out .4s;
  -o-transition: .65s ease-in-out .4s;
  transition: .65s ease-in-out .4s;
  -webkit-transform: translateX(-100px);
  -ms-transform: translateX(-100px);
  transform: translateX(-100px);
  opacity: 0; }

#page-conducting.play-intro .caption,
#page-conducting.play-intro .desc {
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  opacity: 1; }

#page-conducting .product {
  position: relative;
  top: 147px;
  left: 370px;
  width: 1269px;
  height: 856px;
  background: url(../images/conducting/product.png) 0 0 no-repeat;
  -webkit-transform: translateX(150px);
  -ms-transform: translateX(150px);
  transform: translateX(150px);
  -webkit-transition: .65s ease-out .45s;
  -o-transition: .65s ease-out .45s;
  transition: .65s ease-out .45s;
  opacity: 0; }

#page-conducting.play-intro .product {
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  opacity: 1; }

#page-conducting .product:before {
  position: absolute;
  content: '';
  top: 153px;
  left: 221px;
  width: 425px;
  height: 515px;
  background: url(../images/conducting/frame.png) 0 0 no-repeat;
  -webkit-transform: translateY(50px);
  -ms-transform: translateY(50px);
  transform: translateY(50px);
  -webkit-transition: .65s ease-in-out .5s;
  -o-transition: .65s ease-in-out .5s;
  transition: .65s ease-in-out .5s;
  opacity: 0; }

#page-conducting.play-intro .product:before {
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
  opacity: 1; }

#page-conducting .product:after {
  position: absolute;
  content: '';
  top: 127px;
  left: 186px;
  width: 426px;
  height: 437px;
  background: url(../images/conducting/product-extra.png) 0 0 no-repeat; }

#page-conducting .extra-1 {
  /* top: 0; */
  /* top: 0; */
  /* top: 135px; */
  top: 105px;
  /* left: -223px; */
  left: -160px;
  /* width: 687px; */
  width: 626px;
  /* height: 637px; */
  height: 580px;
  background-image: url(../images/conducting/extra-1.png);
  background-size: contain;
  -webkit-transform: translateY(-50px);
  -ms-transform: translateY(-50px);
  transform: translateY(-50px);
  -webkit-transition: .5s ease-out .25s;
  -o-transition: .5s ease-out .25s;
  transition: .5s ease-out .25s;
  opacity: 0; }

#page-conducting .extra-2 {
  top: 875px;
  left: -304px;
  width: 186px;
  height: 190px;
  background-image: url(../images/conducting/extra-2.png);
  -webkit-transform: translateY(50px);
  -ms-transform: translateY(50px);
  transform: translateY(50px);
  -webkit-transition: .5s ease-out .35s;
  -o-transition: .5s ease-out .35s;
  transition: .5s ease-out .35s;
  opacity: 0; }

#page-conducting .extra-3 {
  top: 144px;
  left: 1025px;
  width: 201px;
  height: 186px;
  background-image: url(../images/conducting/extra-3.png);
  -webkit-transform: translateY(-50px);
  -ms-transform: translateY(-50px);
  transform: translateY(-50px);
  -webkit-transition: .5s ease-out .45s;
  -o-transition: .5s ease-out .45s;
  transition: .5s ease-out .45s;
  opacity: 0; }

#page-conducting.play-intro .extra {
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
  opacity: 1; }

/*--- mobile-conducting ---*/
#mobile-conducting {
  background-color: #0a2470; }

/*--- page-conducting ---*/
/*--- page-various ---*/
#page-various .outer .background div {
  position: absolute;
  top: 0; }

#page-various .outer .background {
  height: 100%;
  background: url(../images/various/bg.jpg) #000000 center center no-repeat;
  background-size: cover; }

#page-various .outer .background .left {
  left: 0;
  width: 62.5%;
  height: 100%;
  background: url(../images/various/bg.jpg) #000000 center center no-repeat;
  background-size: cover; }

#page-various .outer .background .right-top {
  left: 62.5%;
  width: 37.5%;
  height: 50%;
  background: url(../images/loading/pattern.gif) #132867 0 0 repeat; }

#page-various .outer .background .right-bottom {
  top: 50%;
  left: 62.5%;
  width: 37.5%;
  height: 50%;
  background: #8c0000; }

#page-various .logo {
  top: 285px;
  left: -285px;
  width: 156px;
  height: 145px;
  background: url(../images/various/logo.png) 0 0 no-repeat;
  -webkit-transition: .65s ease-in-out .2s;
  -o-transition: .65s ease-in-out .2s;
  transition: .65s ease-in-out .2s;
  opacity: 0; }

#page-various.play-intro .logo {
  opacity: 1; }

#page-various .caption {
  top: 518px;
  left: -234px;
  width: 319px;
  height: 118px;
  background: url(../images/various/caption.png) 0 0 no-repeat;
  -webkit-transition: .65s ease-in-out .1s;
  -o-transition: .65s ease-in-out .1s;
  transition: .65s ease-in-out .1s;
  -webkit-transform: translateX(-100px);
  -ms-transform: translateX(-100px);
  transform: translateX(-100px);
  opacity: 0; }

#page-various.play-intro .caption {
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  opacity: 1; }

#page-various .caption:before,
#page-various .caption:after {
  content: '';
  position: absolute;
  width: 2px;
  background: #e7c385;
  -webkit-transition: .65s ease-in-out .65s;
  -o-transition: .65s ease-in-out .65s;
  transition: .65s ease-in-out .65s; }

#page-various .caption:before {
  /* top: -456px; */
  bottom: 182px;
  left: 200px;
  height: 0; }

#page-various.play-intro .caption:before {
  height: 404px; }

#page-various .caption:after {
  top: 302px;
  left: 200px;
  height: 0; }

#page-various.play-intro .caption:after {
  height: 312px; }

#page-various .desc {
  top: 666px;
  left: -228px;
  color: #ffffff;
  font-size: 28px;
  font-weight: 300;
  line-height: 42px;
  letter-spacing: 3px;
  -webkit-transition: .65s ease-in-out .25s;
  -o-transition: .65s ease-in-out .25s;
  transition: .65s ease-in-out .25s;
  -webkit-transform: translateX(-100px);
  -ms-transform: translateX(-100px);
  transform: translateX(-100px);
  opacity: 0; }

#page-various.play-intro .desc {
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  opacity: 1; }

#page-various .products {
  height: 100%;
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -ms-perspective: 1000;
  -o-perspective: 1000;
  perspective: 1000; }

#page-various .item {
  position: absolute;
  width: 620px;
  font-size: 0;
  will-change: transform, opacity;
  /* -webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	backface-visibility: hidden; */
  -webkit-transform: rotateY(180deg) translate3d(0px, 50px, -200px) scale(0.75);
  -moz-transform: rotateY(180deg) translate3d(0px, 50px, -200px) scale(0.75);
  -ms-transform: rotateY(180deg) translate3d(0px, 50px, -200px) scale(0.75);
  -o-transform: rotateY(180deg) translate3d(0px, 50px, -200px) scale(0.75);
  transform: rotateY(180deg) translate3d(0px, 50px, -200px) scale(0.75);
  -webkit-transition: 0.85s;
  -webkit-transform-style: preserve-3d;
  -moz-transition: 0.85s;
  -moz-transform-style: preserve-3d;
  -ms-transition: 0.85s;
  -ms-transform-style: preserve-3d;
  -o-transition: 0.85s;
  -o-transform-style: preserve-3d;
  transition: 0.85s;
  transform-style: preserve-3d;
  -webkit-transition-timing-function: ease-out;
  -moz-transition-timing-function: ease-out;
  -ms-transition-timing-function: ease-out;
  -o-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -ms-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
  opacity: 0; }

#page-various.play-intro .item {
  /* > div */
  -webkit-transform: rotateY(0deg) translate3d(0, 0, 0) scale(1);
  -moz-transform: rotateY(0deg) translate3d(0, 0, 0) scale(1);
  -ms-transform: rotateY(0deg) translate3d(0, 0, 0) scale(1);
  -o-transform: rotateY(0deg) translate3d(0, 0, 0) scale(1);
  transform: rotateY(0deg) translate3d(0, 0, 0) scale(1);
  opacity: 1; }

#page-various .item:nth-child(1) {
  top: 290px;
  left: 110px;
  z-index: 2; }

#page-various .item:nth-child(2) {
  top: 489px;
  left: 110px;
  z-index: 2; }

#page-various .item:nth-child(3) {
  top: 689px;
  left: 110px;
  z-index: 2; }

#page-various .item:nth-child(4) {
  top: 290px;
  left: 645px;
  z-index: 1; }

#page-various .item:nth-child(5) {
  top: 489px;
  left: 645px;
  z-index: 1; }

#page-various .item:nth-child(6) {
  top: 689px;
  left: 645px;
  z-index: 1; }

#page-various .item > div {
  position: relative;
  display: inline-block;
  width: 195px;
  height: 195px;
  font-size: 16px;
  vertical-align: top;
  overflow: hidden;
  background-color: #ffffff; }

#page-various .item > .category {
  width: 130px;
  text-align: center;
  background-position: center 34px;
  background-repeat: no-repeat; }

#page-various .item:nth-child(1) .category {
  background-image: url(../images/various/products-1-name.png); }

#page-various .item:nth-child(2) .category {
  background-image: url(../images/various/products-2-name.png); }

#page-various .item:nth-child(3) .category {
  background-image: url(../images/various/products-3-name.png); }

#page-various .item:nth-child(4) .category {
  background-image: url(../images/various/products-4-name.png); }

#page-various .item:nth-child(5) .category {
  background-image: url(../images/various/products-5-name.png); }

#page-various .item:nth-child(6) .category {
  background-image: url(../images/various/products-6-name.png); }

#page-various .category span {
  display: inline-block;
  color: #ffffff;
  padding: 8px 15px;
  margin-top: 128px;
  /* background: #000000; */
  background: #ae8237;
  background: -moz-linear-gradient(0deg, #ae8237 0%, #d9b87f 100%);
  background: -webkit-linear-gradient(0deg, #ae8237 0%, #d9b87f 100%);
  background: -webkit-gradient(linear, left bottom, left top, from(#ae8237), to(#d9b87f));
  background: -webkit-linear-gradient(bottom, #ae8237 0%, #d9b87f 100%);
  background: -o-linear-gradient(bottom, #ae8237 0%, #d9b87f 100%);
  background: linear-gradient(0deg, #ae8237 0%, #d9b87f 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ae8237",endColorstr="#d9b87f",GradientType=1); }

/* #page-various .item > .spec {} */
#page-various .item > .spec {
  width: 200px; }

#page-various .spec span {
  position: absolute;
  bottom: 14px;
  left: 0;
  width: 100%;
  color: #bc843d;
  font-size: 13px;
  text-align: center; }

#page-various .item > div.bg-blue {
  background-color: #132867; }

#page-various .item > div.bg-red {
  background-color: #a00001; }

/*--- page-series ---*/
#main-pc #page-series {
  overflow: auto; }

#page-series .outer {
  background: url(../images/series/bg-top.png) center top no-repeat;
  background-position: center -765px;
  /* will-change: background-position; */
  -webkit-transition: .65s ease-out .05s;
  -o-transition: .65s ease-out .05s;
  transition: .65s ease-out .05s; }

#page-series.play-intro .outer {
  background-position: center -260px; }

#page-series .outer:after {
  content: '';
  position: absolute;
  bottom: -588px;
  left: 0;
  width: 100%;
  height: 588px;
  background: url(../images/series/bg-bottom.png) center bottom no-repeat;
  -webkit-transition: .65s ease-out .05s;
  -o-transition: .65s ease-out .05s;
  transition: .65s ease-out .05s; }

#page-series.play-intro .outer:after {
  /* bottom: -248px; */
  bottom: -8px; }

#main-pc #page-series .inner {
  height: 1830px;
  -webkit-transform: translateY(-75px);
  -ms-transform: translateY(-75px);
  transform: translateY(-75px);
  -webkit-transition: .5s ease-out .2s;
  -o-transition: .5s ease-out .2s;
  transition: .5s ease-out .2s;
  opacity: 0; }

#main-pc #page-series.play-intro .inner {
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
  opacity: 1; }

#page-series .caption {
  width: 278px;
  /* height: 368px; */
  height: 313px;
  /* margin: 0 auto; */
  margin: 10px auto 0;
  background: url(../images/series/caption.png?v=19110402) 0 0 no-repeat; }

#page-series .part {
  position: relative;
  padding-top: 15px;
  padding-bottom: 55px; }

#page-series .part-2 {
  padding-top: 5px; }

#page-series .part-3 {
  padding-top: 5px; }

#page-series .part::before,
#page-series .part::after {
  content: '';
  position: absolute;
  background-position: 0 0;
  background-repeat: no-repeat; }

#page-series .part-1::before {
  top: 350px;
  left: -125px;
  width: 199px;
  height: 160px;
  background-image: url(../images/series/part-1-extra-1.png); }

#page-series .part-1::after {
  top: 110px;
  left: 900px;
  width: 162px;
  height: 108px;
  background-image: url(../images/series/part-1-extra-2.png);
  z-index: 1; }

#page-series .part-2::before {
  top: 310px;
  left: 850px;
  width: 147px;
  height: 140px;
  background-image: url(../images/series/part-2-extra-1.png); }

#page-series .part-3::before {
  top: 236px;
  left: 172px;
  width: 166px;
  height: 153px;
  background-image: url(../images/series/part-3-extra-1.png);
  z-index: 1; }

#page-series .part .title {
  position: relative;
  margin: 0 auto;
  background-position: 0 0;
  background-repeat: no-repeat; }

#page-series .part-1 .title {
  width: 194px;
  height: 52px;
  background-image: url(../images/series/part-1-title.png?v=191104); }

#page-series .part-2 .title {
  width: 170px;
  height: 54px;
  background-image: url(../images/series/part-2-title.png?v=191104); }

#page-series .part-3 .title {
  width: 144px;
  height: 53px;
  background-image: url(../images/series/part-3-title.png?v=191104); }

#page-series .part .content {
  position: relative;
  padding-top: 35px; }

#page-series .part-3 .content {
  padding-top: 30px; }

#page-series .part .content::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 415px;
  margin-left: -1px;
  background: #a27a36; }

#page-series .part-1 .content::after {
  margin-top: 20px; }

#page-series .part-2 .content::after {
  height: 415px;
  margin-top: 20px; }

#page-series .part-3 .content::after {
  height: 15px;
  margin-top: 15px; }

#page-series .part .content > ul {
  font-size: 0;
  text-align: center; }

#page-series .part .item {
  position: relative;
  display: inline-block;
  width: 315px;
  height: 322px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 100;
  vertical-align: top;
  margin: 0 27.5px;
  background: #ffffff;
  -webkit-box-shadow: rgba(50, 50, 50, 0.35) 20px 20px 25px;
  box-shadow: rgba(50, 50, 50, 0.35) 20px 20px 25px; }

#page-series .part-1 .item {
  background-color: #8c0000; }

#page-series .part-2 .item {
  background-color: #132867; }

#page-series .part-3 .item {
  width: 326px;
  height: 294px;
  color: #787878;
  font-weight: 300;
  border: #e7c385 1px solid; }

#page-series .part-1 .item:nth-child(1) {
  margin-top: 35px; }

#page-series .part-2 .item:nth-child(1) {
  margin-top: 30px; }

#page-series .part .item .name {
  margin-top: 35px; }

#page-series .part-3 .item .name {
  margin-top: 25px; }

#page-series .part .item .image {
  display: table-cell;
  height: 140px;
  vertical-align: middle;
  padding-top: 15px; }

#page-series .part .item .image img {
  width: 100%; }

#page-series .part-3 .item .image {
  height: 130px; }

#page-series .part .item ul {
  text-align: left;
  padding-left: 12.5px; }

#page-series .part .item li {
  position: relative;
  display: inline-block;
  vertical-align: top;
  padding: 7.5px 0 7.5px 18px; }

#page-series .part .item li:before {
  position: relative;
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  vertical-align: top;
  margin-top: 7px;
  margin-right: 9px;
  background: #e5c080; }

#page-series .btn {
  position: absolute;
  display: none;
  /* block */
  bottom: -25px;
  left: 50%;
  width: 166px;
  height: 50px;
  color: #ffffff;
  font-size: 18px;
  font-weight: 300;
  line-height: 48px;
  letter-spacing: 5px;
  text-align: center;
  /* margin: 27px auto 0; */
  margin: 27px 0 0 -83px;
  border: #ffffff 1px solid;
  background: #c59e5b;
  background: -moz-linear-gradient(0deg, #c59e5b 0%, #ecc582 100%);
  background: -webkit-linear-gradient(0deg, #c59e5b 0%, #ecc582 100%);
  background: -webkit-gradient(linear, left bottom, left top, from(#c59e5b), to(#ecc582));
  background: -webkit-linear-gradient(bottom, #c59e5b 0%, #ecc582 100%);
  background: -o-linear-gradient(bottom, #c59e5b 0%, #ecc582 100%);
  background: linear-gradient(0deg, #c59e5b 0%, #ecc582 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#c59e5b",endColorstr="#ecc582",GradientType=1);
  -webkit-transition: -webkit-filter .5s ease-out;
  transition: -webkit-filter .5s ease-out;
  -o-transition: filter .5s ease-out;
  transition: filter .5s ease-out;
  transition: filter .5s ease-out, -webkit-filter .5s ease-out; }

#page-series .btn:hover {
  -webkit-filter: brightness(110%);
  filter: brightness(110%); }

#page-series .btn:after {
  content: '';
  display: inline-block;
  width: 9px;
  height: 14px;
  margin-left: 10px;
  background: url(../images/series/btn-arrow.png) 0 0 no-repeat;
  -webkit-animation: arrowAnimationIn 1.5s ease-in-out infinite;
  animation: arrowAnimationIn 1.5s ease-in-out infinite; }

@-webkit-keyframes arrowAnimationIn {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0); }
  50% {
    -webkit-transform: translateX(5px);
    transform: translateX(5px); }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0); } }

@keyframes arrowAnimationIn {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0); }
  50% {
    -webkit-transform: translateX(5px);
    transform: translateX(5px); }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0); } }

#mobile-series .part {
  width: 100%;
  pointer-events: none; }

#mobile-series .part-1 {
  /* top: 17.7%; */
  top: 10%; }

#mobile-series .part-2 {
  top: 43%; }

#mobile-series .part-3 {
  top: 71.7%; }

#mobile-series .btn {
  display: none;
  width: 35.6%; }

#mobile-series .btn img {
  width: 100%; }

#mobile-series .btn-1-1 {
  top: 37%;
  left: 7.4%; }

#mobile-series .btn-1-2 {
  top: 38.6%;
  left: 56.8%; }

#mobile-series .btn-2-1 {
  top: 64.5%;
  left: 6.93%; }

#mobile-series .btn-2-2 {
  top: 67.49%;
  left: 56.8%; }

#mobile-series .btn-3-1 {
  top: 92.17%;
  left: 31.2%; }

/*

*/
/*

#page-series .outer {
	position: relative;
	height: 2640px;
	background: url(../images/series/bg.jpg) center top no-repeat;
}

#page-series .inner {display: none;}

#page-series .inner > div {
}

*/
/*****************************************
*                 footer                 *
*****************************************/
#footwrap {
  position: relative;
  z-index: 2; }

/*****************************************
*                   pop                  *
*****************************************/
/*****************************************
*                 loading                *
*****************************************/
#loading {
  display: none;
  /* position: absolute; */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 102; }

#loading .top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: url(../images/loading/pattern.gif) #132867 center bottom repeat;
  -webkit-transition: .75s ease-in-out 1s;
  -o-transition: .75s ease-in-out 1s;
  transition: .75s ease-in-out 1s; }

#loading .bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: url(../images/loading/pattern.gif) #132867 center top repeat;
  -webkit-transition: .75s ease-in-out 1s;
  -o-transition: .75s ease-in-out 1s;
  transition: .75s ease-in-out 1s; }

#loading.play-outro .top {
  top: -50%; }

#loading.play-outro .bottom {
  bottom: -50%; }

#loading .progress {
  position: absolute;
  top: 50%;
  width: 100%;
  height: 1px;
  margin-top: -0.5px; }

#loading .bar {
  display: block;
  width: 0;
  height: 100%;
  background: #826024;
  -webkit-transition: 1s ease-out;
  -o-transition: 1s ease-out;
  transition: 1s ease-out; }

#loading.play-outro .bar,
#loading.play-outro .percentage {
  opacity: 0; }

#loading .percentage {
  display: none;
  color: #e6c898;
  font-size: 40px;
  font-size: 10vw;
  font-family: 'Amiri', 'Times New Roman', Times, serif;
  text-align: center;
  -webkit-transition: 1s ease-out;
  -o-transition: 1s ease-out;
  transition: 1s ease-out; }

#loading .text {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 39px;
  font-size: 0;
  text-align: center;
  margin-top: -20px;
  overflow: hidden;
  -webkit-transition: .25s ease-out;
  -o-transition: .25s ease-out;
  transition: .25s ease-out; }

#loading.play-outro .text {
  -webkit-transform: scale(1, 0);
  -ms-transform: scale(1, 0);
  transform: scale(1, 0); }

#loading .text span {
  position: relative;
  top: 39px;
  display: inline-block;
  width: 39px;
  height: 39px;
  margin: 0 11px;
  background-image: url(../images/loading/text.png);
  background-repeat: no-repeat;
  -webkit-transition: .25s ease-out;
  -o-transition: .25s ease-out;
  transition: .25s ease-out; }

#loading.play-intro .text span {
  top: 0; }

/* #loading.play-outro .text span {top: 39px;} */
#loading .text span:nth-child(1) {
  background-position: 0 0;
  -webkit-transition-delay: 0s;
  -o-transition-delay: 0s;
  transition-delay: 0s; }

#loading .text span:nth-child(2) {
  background-position: -59px 0;
  -webkit-transition-delay: 0.05s;
  -o-transition-delay: 0.05s;
  transition-delay: 0.05s; }

#loading .text span:nth-child(3) {
  background-position: -120px 0;
  -webkit-transition-delay: 0.1s;
  -o-transition-delay: 0.1s;
  transition-delay: 0.1s; }

#loading .text span:nth-child(4) {
  background-position: -179px 0;
  -webkit-transition-delay: 0.15s;
  -o-transition-delay: 0.15s;
  transition-delay: 0.15s; }

#loading .text span:nth-child(5) {
  background-position: -240px 0;
  -webkit-transition-delay: 0.2s;
  -o-transition-delay: 0.2s;
  transition-delay: 0.2s;
  margin-right: 26px; }

#loading .text span:nth-child(6) {
  background-position: -330px 0;
  -webkit-transition-delay: 0.25s;
  -o-transition-delay: 0.25s;
  transition-delay: 0.25s;
  margin-left: 26px; }

#loading .text span:nth-child(7) {
  background-position: -390px 0;
  -webkit-transition-delay: 0.3s;
  -o-transition-delay: 0.3s;
  transition-delay: 0.3s; }

#loading .text span:nth-child(8) {
  background-position: -451px 0;
  -webkit-transition-delay: 0.35s;
  -o-transition-delay: 0.35s;
  transition-delay: 0.35s; }

#loading .text span:nth-child(9) {
  background-position: -511px 0;
  -webkit-transition-delay: 0.4s;
  -o-transition-delay: 0.4s;
  transition-delay: 0.4s; }

#loading .text span:nth-child(10) {
  background-position: -571px 0;
  -webkit-transition-delay: 0.45s;
  -o-transition-delay: 0.45s;
  transition-delay: 0.45s; }

#loading .text span:nth-child(11) {
  background-position: -630px 0;
  -webkit-transition-delay: 0.5s;
  -o-transition-delay: 0.5s;
  transition-delay: 0.5s; }

#loading .text span:nth-child(12) {
  background-position: -691px 0;
  -webkit-transition-delay: 0.55s;
  -o-transition-delay: 0.55s;
  transition-delay: 0.55s; }

#loading .text span:nth-child(13) {
  background-position: -751px 0;
  -webkit-transition-delay: 0.6s;
  -o-transition-delay: 0.6s;
  transition-delay: 0.6s; }

#loading .text span:nth-child(14) {
  background-position: -811px 0;
  -webkit-transition-delay: 0.65s;
  -o-transition-delay: 0.65s;
  transition-delay: 0.65s; }

#loading .text span:nth-child(15) {
  background-position: -870px 0;
  -webkit-transition-delay: 0.7s;
  -o-transition-delay: 0.7s;
  transition-delay: 0.7s; }

/*****************************************
*             common settings            *
*****************************************/
.btn {
  padding: 0;
  text-shadow: none;
  background: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: none;
  border-radius: 0; }

.progress {
  height: auto;
  overflow: hidden;
  border-radius: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
  background: none; }

.progress .bar {
  float: none;
  text-shadow: none; }

.clearFix:after {
  clear: both;
  content: '.';
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden; }

.clearfix {
  display: block; }

.clearfix:after, .clearfix:before {
  content: "";
  display: table;
  line-height: 0; }

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

.pos-a {
  position: absolute; }

.fltR {
  float: right; }

.fltL {
  float: left; }

.textHide {
  font-size: 0;
  text-indent: -5000px; }

@media screen and (max-width: 800px) {
  #headwrap {
    position: relative;
    padding-top: 0 !important;
    z-index: unset; } }

@media (max-width: 800px) {
  #loading .text {
    display: none; }
  #loading .percentage {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    display: block;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%); } }

/**
 * Swiper 4.4.2
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * http://www.idangero.us/swiper/
 *
 * Copyright 2014-2018 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: November 1, 2018
 */
.swiper-container {
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1; }

.swiper-container-no-flexbox .swiper-slide {
  float: left; }

.swiper-container-vertical > .swiper-wrapper {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column; }

.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  -o-transition-property: transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  transition-property: transform,-webkit-transform;
  -webkit-box-sizing: content-box;
  box-sizing: content-box; }

.swiper-container-android .swiper-slide, .swiper-wrapper {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0); }

.swiper-container-multirow > .swiper-wrapper {
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }

.swiper-container-free-mode > .swiper-wrapper {
  -webkit-transition-timing-function: ease-out;
  -o-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  margin: 0 auto; }

.swiper-slide {
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  -o-transition-property: transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  transition-property: transform,-webkit-transform; }

.swiper-slide-invisible-blank {
  visibility: hidden; }

.swiper-container-autoheight, .swiper-container-autoheight .swiper-slide {
  height: auto; }

.swiper-container-autoheight .swiper-wrapper {
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-transition-property: height,-webkit-transform;
  transition-property: height,-webkit-transform;
  -o-transition-property: transform,height;
  transition-property: transform,height;
  transition-property: transform,height,-webkit-transform; }

.swiper-container-3d {
  -webkit-perspective: 1200px;
  perspective: 1200px; }

.swiper-container-3d .swiper-cube-shadow, .swiper-container-3d .swiper-slide, .swiper-container-3d .swiper-slide-shadow-bottom, .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-wrapper {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d; }

.swiper-container-3d .swiper-slide-shadow-bottom, .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10; }

.swiper-container-3d .swiper-slide-shadow-left {
  background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
  background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  background-image: -o-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); }

.swiper-container-3d .swiper-slide-shadow-right {
  background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
  background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); }

.swiper-container-3d .swiper-slide-shadow-top {
  background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
  background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); }

.swiper-container-3d .swiper-slide-shadow-bottom {
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); }

.swiper-container-wp8-horizontal, .swiper-container-wp8-horizontal > .swiper-wrapper {
  -ms-touch-action: pan-y;
  touch-action: pan-y; }

.swiper-container-wp8-vertical, .swiper-container-wp8-vertical > .swiper-wrapper {
  -ms-touch-action: pan-x;
  touch-action: pan-x; }

.swiper-button-next, .swiper-button-prev {
  position: absolute;
  top: 50%;
  width: 27px;
  height: 44px;
  margin-top: -22px;
  z-index: 10;
  cursor: pointer;
  background-size: 27px 44px;
  background-position: center;
  background-repeat: no-repeat; }

.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {
  opacity: .35;
  cursor: auto;
  pointer-events: none; }

.swiper-button-prev, .swiper-container-rtl .swiper-button-next {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
  left: 10px;
  right: auto; }

.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
  right: 10px;
  left: auto; }

.swiper-button-prev.swiper-button-white, .swiper-container-rtl .swiper-button-next.swiper-button-white {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E"); }

.swiper-button-next.swiper-button-white, .swiper-container-rtl .swiper-button-prev.swiper-button-white {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E"); }

.swiper-button-prev.swiper-button-black, .swiper-container-rtl .swiper-button-next.swiper-button-black {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E"); }

.swiper-button-next.swiper-button-black, .swiper-container-rtl .swiper-button-prev.swiper-button-black {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E"); }

.swiper-button-lock {
  display: none; }

.swiper-pagination {
  position: absolute;
  text-align: center;
  -webkit-transition: .3s opacity;
  -o-transition: .3s opacity;
  transition: .3s opacity;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  z-index: 10; }

.swiper-pagination.swiper-pagination-hidden {
  opacity: 0; }

.swiper-container-horizontal > .swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
  bottom: 10px;
  left: 0;
  width: 100%; }

.swiper-pagination-bullets-dynamic {
  overflow: hidden;
  font-size: 0; }

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  -webkit-transform: scale(0.33);
  -ms-transform: scale(0.33);
  transform: scale(0.33);
  position: relative; }

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1); }

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1); }

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
  -webkit-transform: scale(0.66);
  -ms-transform: scale(0.66);
  transform: scale(0.66); }

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
  -webkit-transform: scale(0.33);
  -ms-transform: scale(0.33);
  transform: scale(0.33); }

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
  -webkit-transform: scale(0.66);
  -ms-transform: scale(0.66);
  transform: scale(0.66); }

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
  -webkit-transform: scale(0.33);
  -ms-transform: scale(0.33);
  transform: scale(0.33); }

.swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  display: inline-block;
  border-radius: 100%;
  background: #000;
  opacity: .2; }

button.swiper-pagination-bullet {
  border: none;
  margin: 0;
  padding: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none; }

.swiper-pagination-clickable .swiper-pagination-bullet {
  cursor: pointer; }

.swiper-pagination-bullet-active {
  opacity: 1;
  background: #007aff; }

.swiper-container-vertical > .swiper-pagination-bullets {
  right: 10px;
  top: 50%;
  -webkit-transform: translate3d(0, -50%, 0);
  transform: translate3d(0, -50%, 0); }

.swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 6px 0;
  display: block; }

.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 8px; }

.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  display: inline-block;
  -webkit-transition: .2s top,.2s -webkit-transform;
  -o-transition: .2s top,.2s -webkit-transform;
  transition: .2s top,.2s -webkit-transform;
  -o-transition: .2s transform,.2s top;
  -webkit-transition: .2s transform,.2s top;
  transition: .2s transform,.2s top;
  -webkit-transition: .2s transform,.2s top,.2s -webkit-transform;
  -o-transition: .2s transform,.2s top,.2s -webkit-transform;
  transition: .2s transform,.2s top,.2s -webkit-transform; }

.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 4px; }

.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  white-space: nowrap; }

.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  -webkit-transition: .2s left,.2s -webkit-transform;
  -o-transition: .2s left,.2s -webkit-transform;
  transition: .2s left,.2s -webkit-transform;
  -o-transition: .2s transform,.2s left;
  -webkit-transition: .2s transform,.2s left;
  transition: .2s transform,.2s left;
  -webkit-transition: .2s transform,.2s left,.2s -webkit-transform;
  -o-transition: .2s transform,.2s left,.2s -webkit-transform;
  transition: .2s transform,.2s left,.2s -webkit-transform; }

.swiper-container-horizontal.swiper-container-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  -webkit-transition: .2s right,.2s -webkit-transform;
  -o-transition: .2s right,.2s -webkit-transform;
  transition: .2s right,.2s -webkit-transform;
  -o-transition: .2s transform,.2s right;
  -webkit-transition: .2s transform,.2s right;
  transition: .2s transform,.2s right;
  -webkit-transition: .2s transform,.2s right,.2s -webkit-transform;
  -o-transition: .2s transform,.2s right,.2s -webkit-transform;
  transition: .2s transform,.2s right,.2s -webkit-transform; }

.swiper-pagination-progressbar {
  background: rgba(0, 0, 0, 0.25);
  position: absolute; }

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: #007aff;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-transform-origin: left top;
  -ms-transform-origin: left top;
  transform-origin: left top; }

.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  -webkit-transform-origin: right top;
  -ms-transform-origin: right top;
  transform-origin: right top; }

.swiper-container-horizontal > .swiper-pagination-progressbar, .swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
  width: 100%;
  height: 4px;
  left: 0;
  top: 0; }

.swiper-container-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-container-vertical > .swiper-pagination-progressbar {
  width: 4px;
  height: 100%;
  left: 0;
  top: 0; }

.swiper-pagination-white .swiper-pagination-bullet-active {
  background: #fff; }

.swiper-pagination-progressbar.swiper-pagination-white {
  background: rgba(255, 255, 255, 0.25); }

.swiper-pagination-progressbar.swiper-pagination-white .swiper-pagination-progressbar-fill {
  background: #fff; }

.swiper-pagination-black .swiper-pagination-bullet-active {
  background: #000; }

.swiper-pagination-progressbar.swiper-pagination-black {
  background: rgba(0, 0, 0, 0.25); }

.swiper-pagination-progressbar.swiper-pagination-black .swiper-pagination-progressbar-fill {
  background: #000; }

.swiper-pagination-lock {
  display: none; }

.swiper-scrollbar {
  border-radius: 10px;
  position: relative;
  -ms-touch-action: none;
  background: rgba(0, 0, 0, 0.1); }

.swiper-container-horizontal > .swiper-scrollbar {
  position: absolute;
  left: 1%;
  bottom: 3px;
  z-index: 50;
  height: 5px;
  width: 98%; }

.swiper-container-vertical > .swiper-scrollbar {
  position: absolute;
  right: 3px;
  top: 1%;
  z-index: 50;
  width: 5px;
  height: 98%; }

.swiper-scrollbar-drag {
  height: 100%;
  width: 100%;
  position: relative;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  left: 0;
  top: 0; }

.swiper-scrollbar-cursor-drag {
  cursor: move; }

.swiper-scrollbar-lock {
  display: none; }

.swiper-zoom-container {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: center; }

.swiper-zoom-container > canvas, .swiper-zoom-container > img, .swiper-zoom-container > svg {
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
  object-fit: contain; }

.swiper-slide-zoomed {
  cursor: move; }

.swiper-lazy-preloader {
  width: 42px;
  height: 42px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -21px;
  margin-top: -21px;
  z-index: 10;
  -webkit-transform-origin: 50%;
  -ms-transform-origin: 50%;
  transform-origin: 50%;
  -webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite;
  animation: swiper-preloader-spin 1s steps(12, end) infinite; }

.swiper-lazy-preloader:after {
  display: block;
  content: '';
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-position: 50%;
  background-size: 100%;
  background-repeat: no-repeat; }

.swiper-lazy-preloader-white:after {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }

@-webkit-keyframes swiper-preloader-spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }

@keyframes swiper-preloader-spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }

.swiper-container .swiper-notification {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  opacity: 0;
  z-index: -1000; }

.swiper-container-fade.swiper-container-free-mode .swiper-slide {
  -webkit-transition-timing-function: ease-out;
  -o-transition-timing-function: ease-out;
  transition-timing-function: ease-out; }

.swiper-container-fade .swiper-slide {
  pointer-events: none;
  -webkit-transition-property: opacity;
  -o-transition-property: opacity;
  transition-property: opacity; }

.swiper-container-fade .swiper-slide .swiper-slide {
  pointer-events: none; }

.swiper-container-fade .swiper-slide-active, .swiper-container-fade .swiper-slide-active .swiper-slide-active {
  pointer-events: auto; }

.swiper-container-cube {
  overflow: visible; }

.swiper-container-cube .swiper-slide {
  pointer-events: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 1;
  visibility: hidden;
  -webkit-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  transform-origin: 0 0;
  width: 100%;
  height: 100%; }

.swiper-container-cube .swiper-slide .swiper-slide {
  pointer-events: none; }

.swiper-container-cube.swiper-container-rtl .swiper-slide {
  -webkit-transform-origin: 100% 0;
  -ms-transform-origin: 100% 0;
  transform-origin: 100% 0; }

.swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-active .swiper-slide-active {
  pointer-events: auto; }

.swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-next, .swiper-container-cube .swiper-slide-next + .swiper-slide, .swiper-container-cube .swiper-slide-prev {
  pointer-events: auto;
  visibility: visible; }

.swiper-container-cube .swiper-slide-shadow-bottom, .swiper-container-cube .swiper-slide-shadow-left, .swiper-container-cube .swiper-slide-shadow-right, .swiper-container-cube .swiper-slide-shadow-top {
  z-index: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; }

.swiper-container-cube .swiper-cube-shadow {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: .6;
  -webkit-filter: blur(50px);
  filter: blur(50px);
  z-index: 0; }

.swiper-container-flip {
  overflow: visible; }

.swiper-container-flip .swiper-slide {
  pointer-events: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 1; }

.swiper-container-flip .swiper-slide .swiper-slide {
  pointer-events: none; }

.swiper-container-flip .swiper-slide-active, .swiper-container-flip .swiper-slide-active .swiper-slide-active {
  pointer-events: auto; }

.swiper-container-flip .swiper-slide-shadow-bottom, .swiper-container-flip .swiper-slide-shadow-left, .swiper-container-flip .swiper-slide-shadow-right, .swiper-container-flip .swiper-slide-shadow-top {
  z-index: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; }

.swiper-container-coverflow .swiper-wrapper {
  -ms-perspective: 1200px; }

* {
  font-family: "Noto Sans TC", sans-serif !important; }

body {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
  scrollbar-color: transparent transparent;
  overflow: -moz-scrollbars-none; }
  body::-webkit-scrollbar {
    display: none; }

@-webkit-keyframes floating {
  0% {
    -webkit-transform: translateX(-50%) translateY(0);
    transform: translateX(-50%) translateY(0); }
  100% {
    -webkit-transform: translateX(-50%) translateY(-30px);
    transform: translateX(-50%) translateY(-30px); } }

@keyframes floating {
  0% {
    -webkit-transform: translateX(-50%) translateY(0);
    transform: translateX(-50%) translateY(0); }
  100% {
    -webkit-transform: translateX(-50%) translateY(-30px);
    transform: translateX(-50%) translateY(-30px); } }

@-webkit-keyframes floating-heart {
  0% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px); }
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px); } }

@keyframes floating-heart {
  0% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px); }
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px); } }

@-webkit-keyframes floating-heart-m {
  0% {
    -webkit-transform: translateY(1.1vmin);
    transform: translateY(1.1vmin); }
  100% {
    -webkit-transform: translateY(-1.1vmin);
    transform: translateY(-1.1vmin); } }

@keyframes floating-heart-m {
  0% {
    -webkit-transform: translateY(1.1vmin);
    transform: translateY(1.1vmin); }
  100% {
    -webkit-transform: translateY(-1.1vmin);
    transform: translateY(-1.1vmin); } }

@-webkit-keyframes floating-heart-m2 {
  0% {
    -webkit-transform: translateY(3vmin);
    transform: translateY(3vmin); }
  100% {
    -webkit-transform: translateY(-1.1vmin);
    transform: translateY(-1.1vmin); } }

@keyframes floating-heart-m2 {
  0% {
    -webkit-transform: translateY(3vmin);
    transform: translateY(3vmin); }
  100% {
    -webkit-transform: translateY(-1.1vmin);
    transform: translateY(-1.1vmin); } }

@-webkit-keyframes floating-heart2 {
  0% {
    -webkit-transform: translateY(15px);
    transform: translateY(15px); }
  100% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px); } }

@keyframes floating-heart2 {
  0% {
    -webkit-transform: translateY(15px);
    transform: translateY(15px); }
  100% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px); } }

@media screen and (max-width: 1920px) {
  @-webkit-keyframes floating-heart {
    0% {
      -webkit-transform: translateY(0.41667vw);
      transform: translateY(0.41667vw); }
    100% {
      -webkit-transform: translateY(-0.41667vw);
      transform: translateY(-0.41667vw); } }
  @keyframes floating-heart {
    0% {
      -webkit-transform: translateY(0.41667vw);
      transform: translateY(0.41667vw); }
    100% {
      -webkit-transform: translateY(-0.41667vw);
      transform: translateY(-0.41667vw); } }
  @-webkit-keyframes floating-heart2 {
    0% {
      -webkit-transform: translateY(0.78125vw);
      transform: translateY(0.78125vw); }
    100% {
      -webkit-transform: translateY(-0.78125vw);
      transform: translateY(-0.78125vw); } }
  @keyframes floating-heart2 {
    0% {
      -webkit-transform: translateY(0.78125vw);
      transform: translateY(0.78125vw); }
    100% {
      -webkit-transform: translateY(-0.78125vw);
      transform: translateY(-0.78125vw); } } }

@-webkit-keyframes floating-mb {
  0% {
    -webkit-transform: translateX(-50%) translateY(0);
    transform: translateX(-50%) translateY(0); }
  100% {
    -webkit-transform: translateX(-50%) translateY(-2vh);
    transform: translateX(-50%) translateY(-2vh); } }

@keyframes floating-mb {
  0% {
    -webkit-transform: translateX(-50%) translateY(0);
    transform: translateX(-50%) translateY(0); }
  100% {
    -webkit-transform: translateX(-50%) translateY(-2vh);
    transform: translateX(-50%) translateY(-2vh); } }

#arrow-down {
  position: fixed;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  z-index: 1;
  width: 80px;
  bottom: 20px;
  -webkit-transition: opacity 0.3s linear;
  -o-transition: opacity 0.3s linear;
  transition: opacity 0.3s linear;
  -webkit-animation: floating 3s ease-in-out infinite alternate both;
  animation: floating 3s ease-in-out infinite alternate both;
  pointer-events: none; }
  #arrow-down img {
    image-rendering: auto;
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-pixelated;
    image-rendering: pixelated;
    /* Safari seems to support, but seems deprecated and does the same thing as the others. */
    image-rendering: -webkit-optimize-contrast; }
  #arrow-down.pos_fix {
    position: absolute;
    bottom: -10px; }
  #arrow-down.hidden {
    opacity: 0; }
  @media screen and (max-width: 1400px) {
    #arrow-down {
      width: 60px; } }
  @media screen and (max-width: 1152px) {
    #arrow-down {
      width: 5.20833vw; } }

#arrow-down-m {
  position: fixed;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  z-index: 1;
  width: 12.76042vmin;
  bottom: 20px;
  -webkit-transition: opacity 0.3s linear;
  -o-transition: opacity 0.3s linear;
  transition: opacity 0.3s linear;
  -webkit-animation: floating-mb 3s ease-in-out infinite alternate both;
  animation: floating-mb 3s ease-in-out infinite alternate both;
  pointer-events: none; }
  #arrow-down-m img {
    image-rendering: auto;
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-pixelated;
    image-rendering: pixelated;
    /* Safari seems to support, but seems deprecated and does the same thing as the others. */
    image-rendering: -webkit-optimize-contrast; }
  #arrow-down-m.pos_fix {
    position: absolute;
    bottom: 12vmax; }
  #arrow-down-m.hidden {
    opacity: 0; }

#anchor-container {
  position: fixed !important;
  width: 45px;
  height: 608px;
  background-color: #0e2d91;
  right: 10px;
  top: 170px;
  border-radius: 10px;
  z-index: 10; }

#anchor-bar {
  width: 100%;
  height: 574px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  row-gap: 45px;
  z-index: 10;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: opacity 0.3s ease-in-out;
  -o-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out; }
  @media screen and (max-width: 1000px) {
    #anchor-bar {
      display: none; } }
  #anchor-bar #active-anchor {
    pointer-events: none;
    left: -10px;
    top: 5px;
    position: absolute;
    -webkit-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;z-index: 2 }
    #anchor-bar #active-anchor > img {
      width: 50px; }
  #anchor-bar > div {
    cursor: pointer; position: relative;}

    #anchor-bar > div p{
      position: absolute;
      color: #000;
      width: 4em;
      left: 0;
      top: 50%;
      opacity: 0;
      transform: translate(0,-50%);
    }
    #anchor-bar > div:hover p{
      opacity: 1;
      transform: translate(-150%,-50%);
    }
    #anchor-bar > div img {
      width: 25px; }
  #anchor-bar img {
    pointer-events: none;
    image-rendering: auto;
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-pixelated;
    image-rendering: pixelated;
    /* Safari seems to support, but seems deprecated and does the same thing as the others. */
    image-rendering: -webkit-optimize-contrast; }

#recipe_bg_container {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-size: contain;
  background-image: url("../images/pc/pop-bg.png");
  z-index: 1000;
  display: none; }
  #recipe_bg_container .recipe_container {
    position: fixed;
    left: 50%;
    top: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    width: 1300px; }
    #recipe_bg_container .recipe_container .recipe_img {
      position: relative;
      display: block;
      width: 100%;
      max-height: 90vh;
      margin-left: auto;
      margin-right: auto;
      overflow-x: hidden;
      overflow-y: auto;
      -ms-overflow-style: none;
      scrollbar-color: transparent transparent;
      overflow: -moz-scrollbars-none; }
      @media screen and (max-width: 1152px) {
        #recipe_bg_container .recipe_container .recipe_img {
          width: 72.04861vw;
          display: block;
          margin-left: auto;
          margin-right: auto; }
          #recipe_bg_container .recipe_container .recipe_img > img {
            display: block;
            margin-left: auto;
            margin-right: auto;
            width: 67.27431vw !important; } }
      @media screen and (max-width: 1152px) {
        #recipe_bg_container .recipe_container .recipe_img {
          width: 100%; }
          #recipe_bg_container .recipe_container .recipe_img > img {
            display: block;
            margin-left: auto;
            margin-right: auto;
            width: 100% !important; } }
      #recipe_bg_container .recipe_container .recipe_img::-webkit-scrollbar {
        display: none; }
      #recipe_bg_container .recipe_container .recipe_img > img {
        width: 100%;
        image-rendering: -moz-crisp-edges;
        /* Firefox */
        image-rendering: -o-crisp-edges;
        /* Opera */
        image-rendering: -webkit-optimize-contrast;
        /* Webkit (non-standard naming) */
        image-rendering: crisp-edges;
        -ms-interpolation-mode: nearest-neighbor;
        /* IE (non-standard property) */ }
    #recipe_bg_container .recipe_container .close_btn {
      position: absolute;
      width: 50px;
      height: 50px;
      right: 50px;
      top: 80px;
      cursor: pointer; }
      #recipe_bg_container .recipe_container .close_btn img {
        width: 100%; }
      @media screen and (max-width: 1152px) {
        #recipe_bg_container .recipe_container .close_btn {
          width: 7.8125vw !important;
          height: 7.8125vw !important;
          right: auto !important;
          left: 1.30208vw;
          top: 0 !important; } }
      @media screen and (max-width: 700px) {
        #recipe_bg_container .recipe_container .close_btn {
          left: 2.85714vw; } }
    @media screen and (max-width: 1400px) {
      #recipe_bg_container .recipe_container {
        width: 92.85714vw; }
        #recipe_bg_container .recipe_container .close_btn {
          width: 3.57143vw;
          height: 3.57143vw;
          right: 3.57143vw;
          top: 6.42857vw; } }

#headwrap {
  position: unset; }

.sub-title {
  font-weight: bold;
  text-align: center;
  line-height: 1.292;
  color: #383636;
  font-family: "Noto Sans TC";
  font-size: 25px; }
  @media screen and (max-width: 1920px) {
    .sub-title {
      font-size: 1.30208vw; } }

.intro {
  font-size: 25px;
  text-align: left;
  line-height: 2.25;
  color: #373737;
  font-family: "Noto Sans TC";
  font-weight: 500; }
  @media screen and (max-width: 1920px) {
    .intro {
      font-size: 1.30208vw; } }

@media screen and (max-width: 1152px) {
  #main-pc {
    display: none; } }

#main-pc .easyfry-pc {
  max-width: 1920px;
  background-size: contain;
  background-repeat: repeat-y;
  background-image: url("../images/pc/bg.jpg");
  margin-left: auto;
  margin-right: auto; }

#main-pc .easyfry-pc > * {
  margin-left: auto;
  margin-right: auto;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top;
  position: relative; }

#main-pc #s1 {
  position: relative;
  height: 1079px; }
  @media screen and (max-width: 1920px) {
    #main-pc #s1 {
      height: 56.19792vw; } }
  #main-pc #s1 img {
    display: block;
    margin-left: auto;
    margin-right: auto; }
  #main-pc #s1 .actfry-link {
    position: absolute;
    bottom: 0;
    right: 0;
    opacity: 0;
    z-index: 1;
    width: 12%;
    height: 27%;
    cursor: pointer; }
    #main-pc #s1 .actfry-link a {
      display: block;
      width: 100%;
      height: 100%; }

#main-pc #s2 {
  border-top: 20px solid #e8daca;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 0 20px 0 20px; }
  #main-pc #s2 .sub-title {
    display: none; }
  #main-pc #s2 .p1 {
    margin-top: 30px; }
  #main-pc #s2 .p2 {
    position: relative;
    left: 10px;
    top: 10px; }
  #main-pc #s2 .left {
    position: relative;
    left: -20px;
    top: 640px; }
    #main-pc #s2 .left .func-intro-group {
      position: relative; }
      #main-pc #s2 .left .func-intro-group .intro-heart {
        position: absolute;
        top: -320px;
        left: 150px;
        -webkit-animation: floating-heart 3s ease-in-out infinite alternate both;
        animation: floating-heart 3s ease-in-out infinite alternate both; }
  #main-pc #s2 .right {
    margin-left: 100px;
    margin-right: auto;
    margin-top: 95px; }
  #main-pc #s2 .title-group {
    width: 950px; }
  #main-pc #s2 .intro-group {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    position: relative;
    top: 15px; }
    #main-pc #s2 .intro-group .video {
      background-repeat: no-repeat;
      background-image: url("../images/pc/video-outline.png");
      width: 950px;
      height: 540px;
      background-size: contain;
      overflow: hidden;
      margin-top: 35px; }
      #main-pc #s2 .intro-group .video .video-container {
        border-top-right-radius: 50px;
        border-bottom-left-radius: 47px;
        overflow: hidden;
        width: 928px;
        margin-left: auto;
        margin-right: auto;
        position: relative;
        top: 9px;
        left: -2px; }
      #main-pc #s2 .intro-group .video video {
        width: 100%; }
      #main-pc #s2 .intro-group .video .video-txt {
        position: absolute;
        left: 113px;
        top: 9px; }
    #main-pc #s2 .intro-group .func {
      display: block;
      width: 258px;
      height: 79px;
      margin-left: 35px; }
      #main-pc #s2 .fun-group{
        position: relative;
        display: block;
        width: 992px;
        margin-top: 60px;
      }

  @media screen and (max-width: 1920px) {
    #main-pc #s2 {
      border-top-width: 1.04167vw;
      padding: 0 1.04167vw 0 1.04167vw; }
      #main-pc #s2 .p1 {
        margin-top: 1.5625vw; }
      #main-pc #s2 .p2 {
        left: 0.52083vw;
        top: 0.52083vw; }
      #main-pc #s2 .left {
        left: -1.04167vw;
        top: 33.33333vw; }
        #main-pc #s2 .left .func-intro-group .intro-heart {
          width: 14.32292vw;
          top: -16.66667vw;
          left: 7.8125vw; }
        #main-pc #s2 .left .func-intro-group .func-intro {
          width: 19.94792vw; }
      #main-pc #s2 .right {
        margin-left: 5.20833vw;
        margin-top: 4.94792vw; }
      #main-pc #s2 .title-group {
        width: 49.47917vw; }
        #main-pc #s2 .title-group .title > img {
          width: 39.89583vw; }
      #main-pc #s2 .intro-group {
        top: 0.78125vw; }
        #main-pc #s2 .intro-group .video {
          width: 49.47917vw;
          height: 28.125vw;
          margin-top: 1.82292vw; }
          #main-pc #s2 .intro-group .video .video-container {
            border-top-right-radius: 2.60417vw;
            border-bottom-left-radius: 2.44792vw;
            width: 48.33333vw;
            top: 0.46875vw;
            left: -0.10417vw; }
          #main-pc #s2 .intro-group .video .video-txt {
            left: 5.88542vw;
            top: 0.46875vw;
            width: 12.39583vw; }
        #main-pc #s2 .intro-group .func {
          width: 13.4375vw;
          height: 4.11458vw;
          margin-left: 1.82292vw; }
          #main-pc #s2 .fun-group{
          width: 51.67vw;
          margin-top: 3.125vw;
        }
         }

#main-pc #s3 {
  background-image: url("../images/pc/s3-bg.png");
  height: 1081px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 250px; }
  #main-pc #s3 .left {
    width: 62%;
    position: relative; }
  #main-pc #s3 .right {
    position: relative;
    width: 38%;
    padding-top: 175px; }
    #main-pc #s3 .right .title {
      margin-bottom: 50px; }
    #main-pc #s3 .right .pot_3in1 {
      width: 584px;
      position: relative;
      left: -90px;
      bottom: 42px; }
    #main-pc #s3 .right .shadow {
      position: absolute;
      bottom: 7px;
      left: -85px;
      width: 584px;
      height: 781px;
      opacity: 0.5;
      background-size: contain;
      background-position: center bottom;
      background-image: url(../images/pc/shadow.png);
      -webkit-transform: scale(0.8);
      -ms-transform: scale(0.8);
      transform: scale(0.8); }
    #main-pc #s3 .right  .s3-pro{
      position: absolute;
      width: 474px;
      left: -120px;
      bottom: -260px;
      line-height: 2.083;
    font-size: 0;
      }
  #main-pc #s3 .s3-intro {
    position: absolute;
    bottom: -185px;
    left: 470px;
    line-height: 2.083;
    font-size: 0; }
  #main-pc #s3 .title,
  #main-pc #s3 .sub-title {
    position: relative;
    width: 100%;
    right: 185px; }
  #main-pc #s3 .sub-title {
    font-size: 24px;
    font-weight: bold;
    line-height: 1.292;
    color: #272727;
    margin-bottom: 50px;
    right: 175px;
    display: none; }
  #main-pc #s3 .p1 {
    margin-top: 23px; }
  #main-pc #s3 .heart {
    position: absolute;
    right: 370px;
    top: -80px;
    -webkit-animation: floating-heart 2s ease infinite alternate both -1.5s;
    animation: floating-heart 2s ease infinite alternate both -1.5s; }
  @media screen and (max-width: 1920px) {
    #main-pc #s3 {
      height: 56.30208vw;
      margin-top: 13.02083vw; }
      #main-pc #s3 .right {
        padding-top: 9.11458vw; }
        #main-pc #s3 .right .title {
          margin-bottom: 2.60417vw; }
        #main-pc #s3 .right .pot_3in1 {
          width: 30.41667vw;
          left: -4.6875vw;
          bottom: 2.1875vw; }
        #main-pc #s3 .right .shadow {
          position: absolute;
          bottom: 0.36458vw;
          left: -4.42708vw;
          width: 30.41667vw;
          height: 40.67708vw; }
        #main-pc #s3 .right  .s3-pro{
      position: absolute;
      width: 24.6875vw;
      left: -6.25vw;
      bottom: -13.54167vw;
      }
      #main-pc #s3 .s3-intro {
        bottom: -9.63542vw;
        left: 24.47917vw; }
        #main-pc #s3 .s3-intro > img {
          width: 20.98958vw; }
      #main-pc #s3 .title {
        right: 9.63542vw; }
        #main-pc #s3 .title > img {
          width: 20.52083vw; }
      #main-pc #s3 .sub-title {
        font-size: 1.25vw;
        margin-bottom: 2.60417vw;
        right: 9.11458vw; }
      #main-pc #s3 .p1 {
        margin-top: 1.19792vw; }
      #main-pc #s3 .heart {
        right: 19.27083vw;
        top: -4.16667vw; } }

#main-pc #s4 {
  background-size: contain;
  background-position: center;
  background-image: url("../images/pc/s4-bg.png");
  height: 2884px;
  margin-top: 150px;
  position: relative; }
  #main-pc #s4 .title,
  #main-pc #s4 .sub-title {
    margin-left: initial;
    width: auto; }
  #main-pc #s4 .top {
    width: 637px;
    position: relative;
    padding-left: 237px;
    padding-top: 480px; }
  #main-pc #s4 .title img {
    image-rendering: auto;
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-pixelated;
    image-rendering: pixelated;
    /* Safari seems to support, but seems deprecated and does the same thing as the others. */
    image-rendering: -webkit-optimize-contrast; }
  #main-pc #s4 .sub-title {
    margin-right: auto;
    line-height: 1.389;
    color: #272727;
    display: none; }
    #main-pc #s4 .sub-title.p1 {
      margin-top: 18px; }
  #main-pc #s4 .middle {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    top: 773px; }
    #main-pc #s4 .middle .left {
      width: 55.3%;top: -80px;position: relative; }
      #main-pc #s4 .middle .left p {
        font-size: 0;
        opacity: 0; }
      #main-pc #s4 .middle .left > img {
        display: block;
        position: relative;
        left: 553px; }
    #main-pc #s4 .middle .right {
      width: 44.7%;
      position: relative;
      top: -52px; }
      #main-pc #s4 .middle .right p {
        color: #3a3a3a;
        line-height: 2.25;
        text-align: left !important;
        position: relative;
        font-size: 0;
        font-weight: 500; }
        #main-pc #s4 .middle .right p > .pot {
          position: absolute;
          right: 386px;
          top: -132px; }
        #main-pc #s4 .middle .right p > .desc {
          position: relative;
          right: 35px; }
  #main-pc #s4 .bottom {
    position: absolute;
    left: 368px;
    bottom: 335px; }
    #main-pc #s4 .bottom h4 {
      font-size: 51px;
      line-height: 1.373;
      color: #e03f00;
      font-weight: bold !important;
      font-size: 0;
      display: none; }
      #main-pc #s4 .bottom h4 p {
        font-size: 25px;
        color: #e00e00;
        line-height: 0.632;
        margin-top: 12px; }
    #main-pc #s4 .bottom .s4-sub-title {
      color: #3f3f3f;
      font-size: 0;
      display: none;
      position: relative;
      top: 25px;
      line-height: 2.25;
      font-weight: 500; }
  #main-pc #s4 .s4-bottom-bg {
    position: absolute;
    right: 277px;
    bottom: 615px; }
    #main-pc #s4 .s4-bottom-bg .starts {
      position: absolute;
      left: -305px;
      top: 10px;
      -webkit-animation: floating-heart 3s ease infinite alternate both;
      animation: floating-heart 3s ease infinite alternate both; }
  @media screen and (max-width: 1920px) {
    #main-pc #s4 {
      height: 150.20833vw; margin-top: 7.8125vw;}
      #main-pc #s4 .title > img {
        width: 20.52083vw; }
      #main-pc #s4 .top {
        width: 33.17708vw;
        padding-left: 12.34375vw;
        padding-top: 25vw; }
      #main-pc #s4 .sub-title.p1 {
        margin-top: 0.9375vw; }
      #main-pc #s4 .middle {
        top: 40.23958vw; }
        
        #main-pc #s4 .middle .left{top: -4.16vw;}
        #main-pc #s4 .middle .left > img {
          width: 15.104vw;
          left: 28.80208vw;}
        #main-pc #s4 .middle .right {
          top: -2.70833vw; }
          #main-pc #s4 .middle .right p > .pot {
            right: 20.10417vw;
            top: -6.875vw;
            width: 13.17708vw; }
          #main-pc #s4 .middle .right p > .desc {
            width: 30vw;
            right: 1.82292vw; }
      #main-pc #s4 .bottom {
        left: 19.16667vw;
        bottom: 17.44792vw;
        width: 39.11458vw; }
        #main-pc #s4 .bottom h4 {
          font-size: 2.65625vw; }
          #main-pc #s4 .bottom h4 p {
            font-size: 1.30208vw;
            margin-top: 0.625vw; }
      #main-pc #s4 .s4-bottom-bg {
        right: 14.42708vw;
        bottom: 32.03125vw; }
        #main-pc #s4 .s4-bottom-bg > img {
          width: 37.13542vw; }
        #main-pc #s4 .s4-bottom-bg .starts {
          left: -15.88542vw;
          top: 0.52083vw;
          width: 15.20833vw; } }

#main-pc #s5 {
  height: 1616px;
  background-size: contain;
  background-image: url("../images/pc/s5-bg.png");
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  margin-top: -160px; }
  #main-pc #s5 .left,
  #main-pc #s5 .right {
    position: relative; }
  #main-pc #s5 .left {
    width: 62.5%; }
  #main-pc #s5 .right {
    width: 37.5%;
    padding-top: 205px; }
  #main-pc #s5 .title {
    width: 394px;
    margin-right: auto;
    margin-left: 0; }
  #main-pc #s5 .sub-title {
    margin-right: auto;
    margin-left: 0;
    width: 53.5%; }
    #main-pc #s5 .sub-title.p1 {
      margin-top: 15px; }
  #main-pc #s5 .s5-intro {
    position: absolute;
    left: 427px;
    bottom: 180px;
    font-size: 0; }
  #main-pc #s5 .s5-decor {
    position: absolute;
    right: 246px;
    top: 570px;
    -webkit-animation: floating-heart2 2s ease-in-out infinite alternate both -1s;
    animation: floating-heart2 2s ease-in-out infinite alternate both -1s; }
  @media screen and (max-width: 1920px) {
    #main-pc #s5 {
      height: 84.16667vw;
      margin-top: -8.33333vw; }
      #main-pc #s5 .title {
        width: 20.52083vw; }
      #main-pc #s5 .sub-title.p1 {
        margin-top: 0.78125vw; }
      #main-pc #s5 .right {
        padding-top: 10.67708vw; }
      #main-pc #s5 .s5-intro {
        left: 22.23958vw;
        bottom: 9.375vw; }
        #main-pc #s5 .s5-intro > img {
          width: 24.94792vw; }
      #main-pc #s5 .s5-decor {
        width: 13.33333vw;
        right: 12.8125vw;
        top: 29.6875vw; } }

#main-pc #s6 {
  padding-top: 100px;
  padding-bottom: 235px;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../images/pc/s6-bg.jpg");
  background-position: center 510px; }
  #main-pc #s6 .s6-title {
    position: relative;
    width: 705px;
    margin-left: auto;
    margin-right: auto; }
    #main-pc #s6 .s6-title p {
      font-size: 0;
      opacity: 0; }
    #main-pc #s6 .s6-title .heart {
      position: absolute;
      top: 110px;
      left: 80px;
      -webkit-animation: floating-heart 3s ease-in-out infinite alternate both -1s;
      animation: floating-heart 3s ease-in-out infinite alternate both -1s; }
  #main-pc #s6 .fry-group,
  #main-pc #s6 .roast-group,
  #main-pc #s6 .steam-group,
  #main-pc #s6 .mix-group,
  #main-pc #s6 .pan-fry-group {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative; }
    #main-pc #s6 .fry-group > div,
    #main-pc #s6 .roast-group > div,
    #main-pc #s6 .steam-group > div,
    #main-pc #s6 .mix-group > div,
    #main-pc #s6 .pan-fry-group > div {
      cursor: pointer;
      -webkit-transition: -webkit-transform 0.5s ease-in-out;
      transition: -webkit-transform 0.5s ease-in-out;
      -o-transition: transform 0.5s ease-in-out;
      transition: transform 0.5s ease-in-out;
      transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out; }
      #main-pc #s6 .fry-group > div:hover,
      #main-pc #s6 .roast-group > div:hover,
      #main-pc #s6 .steam-group > div:hover,
      #main-pc #s6 .mix-group > div:hover,
      #main-pc #s6 .pan-fry-group > div:hover {
        -webkit-transform: scale(1.05);
        -ms-transform: scale(1.05);
        transform: scale(1.05); }
    #main-pc #s6 .fry-group img,
    #main-pc #s6 .roast-group img,
    #main-pc #s6 .steam-group img,
    #main-pc #s6 .mix-group img,
    #main-pc #s6 .pan-fry-group img {
      pointer-events: none; }
    #main-pc #s6 .fry-group .pop-title,
    #main-pc #s6 .roast-group .pop-title,
    #main-pc #s6 .steam-group .pop-title,
    #main-pc #s6 .mix-group .pop-title,
    #main-pc #s6 .pan-fry-group .pop-title {
      position: absolute; }
  #main-pc #s6 .pop-group {
    width: 1120px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 60px; }
  #main-pc #s6 .fry-group,#main-pc #s6 .mix-group {
    width: 1067px;
    -webkit-column-gap: 105px;
    column-gap: 105px;
    margin-left: auto; }
    #main-pc #s6 .fry-group .pop-title{
      left: -160px;
      top: -73px; }
    #main-pc #s6 .mix-group .pop-title{
      left: -180px;
      top: -73px; }
    #main-pc #s6 .fry-group .middle-pop,#main-pc #s6 .mix-group .middle-pop{
      position: relative;
      top: 55px; }
  #main-pc #s6 .roast-group,#main-pc #s6 .mix-group {
    width: 1050px;
    -webkit-column-gap: 110px;
    column-gap: 110px;
    margin-top: 70px;
    margin-left: auto;
    position: relative;
    left: 63px; }
    #main-pc #s6 .roast-group .pop-title {
      left: -178px;
      top: -40px; }
    #main-pc #s6 .roast-group .middle-pop {
      position: relative;
      top: 50px; }
  #main-pc #s6 .last-pop {
    position: relative;
    top: 20px; }
  #main-pc #s6 .pan-fry-group,#main-pc #s6 .steam-group {
    width: 1030px;
    -webkit-column-gap: 110px;
    column-gap: 110px;
    margin-top: 77px;
    margin-left: auto; }
    #main-pc #s6 .pan-fry-group .pop-title,#main-pc #s6 .steam-group .pop-title{
      left: -162px;
      top: -60px; }
    #main-pc #s6 .pan-fry-group .middle-pop,#main-pc #s6 .steam-group .middle-pop{
      position: relative;
      top: 51px; }
  @media screen and (max-width: 1920px) {
    #main-pc #s6 {
      padding-top: 5.20833vw;
      padding-bottom: 12.23958vw;
      background-position: center 26.57292vw; }
      #main-pc #s6 .s6-title {
        width: 36.71875vw; }
        #main-pc #s6 .s6-title .heart {
          top: 5.72917vw;
          left: 4.16667vw;
          width: 2.91667vw; }
      #main-pc #s6 .pop-group {
        width: 58.33333vw;
        margin-top: 3.125vw; }
      #main-pc #s6 .fry-group {
        width: 55.57292vw;
        -webkit-column-gap: 5.46875vw;
        column-gap: 5.46875vw; }
        #main-pc #s6 .fry-group .pop-title {
          width: 8.48958vw;
          left: -8.33333vw;
          top: -3.80208vw; }
          #main-pc #s6 .mix-group .pop-title{
            width: 9.479vw;
      left: -9.375vw;
      top: -3.802vw; }
        #main-pc #s6 .fry-group .middle-pop {
          top: 2.86458vw; }
      #main-pc #s6 .roast-group ,#main-pc #s6 .mix-group{
        width: 54.6875vw;
        -webkit-column-gap: 5.72917vw;
        column-gap: 5.72917vw;
        margin-top: 3.64583vw;
        left: 3.28125vw; }
        #main-pc #s6 .roast-group .pop-title,#main-pc #s6 .mix-group .pop-title {
          width: 8.54167vw;
          left: -9.27083vw;
          top: -2.08333vw; }
        #main-pc #s6 .roast-group .middle-pop ,#main-pc #s6 .mix-group .middle-pop{
          top: 2.60417vw; }
      #main-pc #s6 .last-pop {
        top: 1.04167vw; }
      #main-pc #s6 .pan-fry-group,#main-pc #s6 .steam-group {
        width: 53.64583vw;
        -webkit-column-gap: 5.72917vw;
        column-gap: 5.72917vw;
        margin-top: 4.01042vw; }
        #main-pc #s6 .pan-fry-group .pop-title ,#main-pc #s6 .steam-group .pop-title{
          width: 8.48958vw;
          left: -8.4375vw;
          top: -3.125vw; }
        #main-pc #s6 .pan-fry-group .middle-pop,#main-pc #s6 .steam-group .middle-pop{
          top: 2.65625vw; } }

#main-pc #s7 .spec {
  display: block;
  margin-left: auto;
  margin-right: auto; }

@media screen and (max-width: 1500px) {
  #main-pc #s7 .spec {
    width: 90.467vw; } }

#main-pc #s8 {
  position: relative;
  padding-top: 120px;
  padding-bottom: 520px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-image: url("../images/pc/heart.png");
  image-rendering: auto;
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
  image-rendering: -moz-crisp-edges;
  image-rendering: -o-pixelated;
  image-rendering: pixelated;
  /* Safari seems to support, but seems deprecated and does the same thing as the others. */
  image-rendering: -webkit-optimize-contrast; }
  #main-pc #s8 .purchase-path {
    width: 1572px;
    margin-left: auto;
    margin-right: auto;
    position: relative; }
    #main-pc #s8 .purchase-path .btn-container {
      position: absolute;
      left: 50%;
      top: 0;
      -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      transform: translateX(-50%);
      width: 95%;
      height: 100%; }
    #main-pc #s8 .purchase-path .btn-top {
      height: 27.3%; }
    #main-pc #s8 .purchase-path .btn-group {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; }
      #main-pc #s8 .purchase-path .btn-group img {
        image-rendering: auto;
        image-rendering: crisp-edges;
        -ms-interpolation-mode: nearest-neighbor;
        image-rendering: -moz-crisp-edges;
        image-rendering: -o-pixelated;
        image-rendering: pixelated;
        /* Safari seems to support, but seems deprecated and does the same thing as the others. */
        image-rendering: -webkit-optimize-contrast; }
      #main-pc #s8 .purchase-path .btn-group a {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 247px;
        margin-top: 30px; }
        #main-pc #s8 .purchase-path .btn-group a:hover {
          -webkit-transform: scale(1.05);
          -ms-transform: scale(1.05);
          transform: scale(1.05); }
        #main-pc #s8 .purchase-path .btn-group a > img {
          width: 100%; }
      #main-pc #s8 .purchase-path .btn-group .part1 {
        width: 9.4%; }
      #main-pc #s8 .purchase-path .btn-group .part2 {
        width: 17.9%;
        margin-right: 0.4%; }
      #main-pc #s8 .purchase-path .btn-group .part3 {
        width: 17.7%;
        margin-right: 0.4%; }
      #main-pc #s8 .purchase-path .btn-group .part4 {
        width: 17.7%;
        margin-right: 0.4%; }
      #main-pc #s8 .purchase-path .btn-group .part5 {
        width: 17.7%; }
       #main-pc #s8 .purchase-path .btn-group .part6 {
        width: 17.7%; }
  @media screen and (max-width: 1920px) {
    #main-pc #s8 {
      padding-top: 6.25vw;
      padding-bottom: 27.08333vw; }
      #main-pc #s8 .title {
        width: 23.38542vw; }
      #main-pc #s8 .purchase-path {
        width: 81.875vw; }
        #main-pc #s8 .purchase-path .btn-group a {
          width: 12.86458vw;
          margin-top: 1.5625vw; } }

#main-mobile {
  display: none; }
  @media screen and (max-width: 1152px) {
    #main-mobile {
      display: block; } }
  #main-mobile .easyfry-mb {
    max-width: 1152px;
    background-size: contain;
    background-repeat: repeat-y;
    background-image: url("../images/mb/bg-m.jpg");
    margin-left: auto;
    margin-right: auto; }
  #main-mobile .easyfry-mb > * {
    margin-left: auto;
    margin-right: auto;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center top;
    position: relative; }
  #main-mobile #anchor-bar-m {
    position: fixed !important;
    width: 3.03819vw;
    height: 41.25vw;
    background-color: #0e2d91;
    right: 0.86806vw;
    top: 30%;
    -webkit-transform: translateY(-30%);
    -ms-transform: translateY(-30%);
    transform: translateY(-30%);
    border-radius: 0.95486vw;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    z-index: 10;
    -webkit-transition: opacity 0.3s ease-in-out;
    -o-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out;display: none; }
    #main-mobile #anchor-bar-m #active-anchor-m {
      pointer-events: none;
      left: -0.86806vw;
      top: 1.5%;
      position: absolute;
      -webkit-transition: all 0.5s ease-in-out;
      -o-transition: all 0.5s ease-in-out;
      transition: all 0.5s ease-in-out; }
      #main-mobile #anchor-bar-m #active-anchor-m > img {
        width: 4.77431vw; }
      @media screen and (max-width: 500px) {
        #main-mobile #anchor-bar-m #active-anchor-m {
          top: 3%; } }
    #main-mobile #anchor-bar-m .anchor {
      height: 36.16667vw;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between; }
      @media screen and (max-width: 340px) {
        #main-mobile #anchor-bar-m .anchor {
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          justify-content: center;
          padding-bottom: 5px; } }
    #main-mobile #anchor-bar-m > div {
      cursor: pointer; }
      #main-mobile #anchor-bar-m > div img {
        width: 1.73611vw; }
    #main-mobile #anchor-bar-m img {
      pointer-events: none;
      image-rendering: auto;
      image-rendering: crisp-edges;
      -ms-interpolation-mode: nearest-neighbor;
      image-rendering: -moz-crisp-edges;
      image-rendering: -o-pixelated;
      image-rendering: pixelated;
      image-rendering: -webkit-optimize-contrast; }
  #main-mobile #s1-m {
    position: relative; }
    #main-mobile #s1-m .actfry-link-m {
      position: absolute;
      bottom: 0;
      right: 0;
      opacity: 0;
      z-index: 1;
      width: 33%;
      height: 16%;
      cursor: pointer; }
      #main-mobile #s1-m .actfry-link-m a {
        display: block;
        width: 100%;
        height: 100%; }
  #main-mobile #s2-m {
    position: relative;
    padding-top: 11.28472vw; }
    #main-mobile #s2-m .title {
      display: block;
      width: 76.64931vw;
      margin-left: auto;
      margin-right: auto; }
    #main-mobile #s2-m .video {
      background-repeat: no-repeat;
      background-image: url("../images/mb/video-outline.png");
      background-size: contain;
      overflow: hidden;
      width: 81.33681vw;
      height: 46.35417vw;
      margin-left: auto;
      margin-right: auto;
      margin-top: 3.03819vw; }
      #main-mobile #s2-m .video .video-container {
        margin-left: auto;
        margin-right: auto;
        position: relative;
        overflow: hidden;
        width: 79.25347vw;
        top: 0.78125vw;
        border-top-right-radius: 4.16667vw;
        border-bottom-left-radius: 4.07986vw; }
      #main-mobile #s2-m .video .video-txt {
        position: absolute;
        left: 9.80903vw;
        top: 0.78125vw;
        width: 20.65972vw; }
      #main-mobile #s2-m .video video {
        width: 100%; }
    #main-mobile #s2-m .s2-btm {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      margin-top: 5.20833vw;flex-direction: column-reverse; }
      #main-mobile #s2-m .s2-btm .left {
        position: relative;
        width: 65.71181vw;
        top: 25.35764vw; }
        #main-mobile #s2-m .s2-btm .left .heart {
          display: block;
          margin-left: auto;
          position: absolute;
          width: 39.14931vw;
          top: -19.96528vw;
          right: 0.43403vw;
          -webkit-animation: floating-heart-m 2.5s ease-in-out infinite alternate both -1s;
          animation: floating-heart-m 2.5s ease-in-out infinite alternate both -1s; }
        #main-mobile #s2-m .s2-btm .left .hand {
          position: relative;
          width: 51.64931vw; }
      #main-mobile #s2-m .s2-btm .right > img {
        width: 100%;
        position: relative;
        left: 0; }
  #main-mobile #s3-m {
    margin-top: 26.52778vw;
    padding-top: 5.20833vw;
    background-image: url("../images/mb/s3-bg.png");
    background-size: contain;
    position: relative;
    height: 151.0416vw;
    max-width: 1152px; }
    #main-mobile #s3-m .title {
      display: block;
      position: relative;
      margin-left: auto;
      margin-right: 5.64236vw;
      top: -13.02083vw;
      width: 39.40972vw; }
    #main-mobile #s3-m .heart {
      position: absolute;
      top: 25.3%;
      right: 17.6%;
      width: 4.94792vw;
      -webkit-animation: floating-heart-m 2.5s ease-in-out infinite alternate both -1s;
      animation: floating-heart-m 2.5s ease-in-out infinite alternate both -1s; }
    #main-mobile #s3-m .s3-btm {
      bottom: 0;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; }
      #main-mobile #s3-m .s3-btm .left {
        width: 45%;
        position: relative; }
        #main-mobile #s3-m .s3-btm .left > img {
          position: absolute;
          top: 70.3125vw;
          left: 7.37847vw;
          width: 47.04861vw; }
      #main-mobile #s3-m .s3-btm .right {
        width: 55%;
        height: 54.6875vw;
        position: relative;
        top: 28.03819vw;
        overflow: hidden; }
        #main-mobile #s3-m .s3-btm .right > .pot_3in1 {
          position: absolute;
          width: 54.6875vw;
          left: 2.43056vw;
          top: -2.95139vw;
          z-index: 1; }
        #main-mobile #s3-m .s3-btm .right .shadow {
          position: absolute;
          top: -2.95139vw;
          left: 9.11458vw;
          width: 76%; }
          #main-mobile #s3-m .s3-btm .right .shadow > img {
            width: 100%; }
  #main-mobile #s4-m {
    margin-top: 10vw;
    height: 249.65278vw;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("../images/mb/s4-bg.png");
    margin-bottom: 12.32639vw; }
    #main-mobile #s4-m .title {
      display: block;
      position: relative;
      margin-left: 6.25vw;
      top: -3.47222vw;
      width: 44.27083vw; }
    #main-mobile #s4-m .middle {
      position: relative;
      margin-top: 64.23611vw;
      width: 97.48264vw; }
      #main-mobile #s4-m .middle .heart {
        position: absolute;
        width: 28.03819vw;
        bottom: 22.56944vw;
        left: 3.47222vw;
        -webkit-animation: floating-heart-m2 2.5s ease-in-out infinite alternate both;
        animation: floating-heart-m2 2.5s ease-in-out infinite alternate both; }
    #main-mobile #s4-m .bottom {
      position: relative;
      width: 74.82639vw;
      left: 15.88542vw;
      top: 2.60417vw; }

      #main-mobile #s45-m {
    margin-top: 10vw;
    height: 196.615vw;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("../images/mb/s45-bg.png");
    margin-bottom: 15.32639vw; }
    #main-mobile #s45-m .title {
      display: block;
      position: relative;
      margin-left: 5.25vw;
      top: 10.47222vw;
      width: 41.059vw; }
     #main-mobile #s45-m .pro{
      position: absolute;
      top: 78.3%;
      right: 20.6%;
      width: 40vw;
     }
    #main-mobile #s45-m .heart {
      position: absolute;
      top: 75.3%;
      right: 25.6%;
      width: 4.94792vw;
      -webkit-animation: floating-heart-m 2.5s ease-in-out infinite alternate both -1s;
      animation: floating-heart-m 2.5s ease-in-out infinite alternate both -1s;
  }
  #main-mobile #s5-m {
    height: 130.20833vw;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("../images/mb/s5-bg.png");
    margin-bottom: 7.8125vw; }
    #main-mobile #s5-m .title {
      width: 44.79167vw;
      display: block;
      margin-left: auto;
      position: relative;
      top: -6.07639vw;
      margin-right: 6.07639vw; }
    #main-mobile #s5-m .heart {
      position: relative;
      display: block;
      margin-left: auto;
      width: 24.82639vw;
      bottom: 6.94444vw;
      right: 0.60764vw;
      -webkit-animation: floating-heart-m2 2s ease-in-out infinite alternate both -1s;
      animation: floating-heart-m2 2s ease-in-out infinite alternate both -1s; }
    #main-mobile #s5-m .desc {
      position: absolute;
      width: 46.00694vw;
      bottom: 23.00347vw;
      left: 6.94444vw; }
      #main-mobile #sp2-m{
        margin-top: -15vw;
      }
  #main-mobile #s6-m {
    position: relative;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url("../images/mb/s6-bg.jpg");
    background-position: center 115.88542vw;
    margin-bottom: 4.77431vw; }
    #main-mobile #s6-m .heart {
      position: absolute;
      width: 6.33681vw;
      left: 9.11458vw;
      top: 13.02083vw;
      -webkit-animation: floating-heart-m 2.2s ease-in-out infinite alternate both;
      animation: floating-heart-m 2.2s ease-in-out infinite alternate both; }
    #main-mobile #s6-m .title {
      position: relative;
      width: 79.94792vw;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 4.51389vw; }
    #main-mobile #s6-m .swiper {
      max-width: 100%; }
    #main-mobile #s6-m .swiper-wrapper {
      margin-bottom: 11.28472vw; }
    #main-mobile #s6-m .swiper-title {
      width: 41.66667vw;
      display: block;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 4.60069vw; }
      #main-mobile #s6-m .swiper-title3 {
      width: 44.53125vw;
      margin-bottom: 6.60069vw; }
      #main-mobile #s6-m .swiper-title4 {
      width: 45.3993vw;
      margin-bottom: 6.60069vw; }
    #main-mobile #s6-m .swiper-slide {
      width: 50%; }
    #main-mobile #s6-m .swiper-pagination-bullet {
      width: 2.86458vw;
      height: 2.86458vw;
      background-color: #898989; }
      #main-mobile #s6-m .swiper-pagination-bullet-active {
        background-color: #ff201e; }
    #main-mobile #s6-m .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
      margin: 0 0.78125vw; }
    #main-mobile #s6-m .pop-content img {
      display: block;
      cursor: pointer;
      margin-left: auto;
      margin-right: auto;
      width: 36.45833vw;
      margin-bottom: 0.43403vw; }
  #main-mobile #s7-m {
    height: 270.22569vw; }
    #main-mobile #s7-m .spec-container {
      width: 92.1875vw;
      height: 100%;
      margin-left: auto;
      margin-right: auto;
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
      background-image: url("../images/mb/spec-container.png"); }
    #main-mobile #s7-m .swiper-container-path {
      position: relative;
      top: 26.90972vw;
      width: 67.70833vw;
      margin-left: auto;
      overflow: hidden; }
      #main-mobile #s7-m .swiper-container-path .swiper-slide{text-align: center;}
      #main-mobile #s7-m .swiper-container-path img {
        position: relative;
        width: 48.9583vw; }
        #main-mobile #s7-m .swiper-container-path .s1 img {
        top: 2.5625vw; }
        #main-mobile #s7-m .swiper-container-path .s2 img {
        top: 1.5625vw; }
        #main-mobile #s7-m .swiper-container-path .s3 img {
        top: 2.5625vw; }
        #main-mobile #s7-m .swiper-container-path .s4 img {
        top: 0vw; }
     /* #main-mobile #s7-m .swiper-container-path .s2 img {
        position: relative;
        left: 12.67361vw;
        top: 1.5625vw;
        width: 39.23611vw; }
      #main-mobile #s7-m .swiper-container-path .s3 img {
        position: relative;
        left: 13.28125vw;
        top: 2.43056vw;
        width: 39.23611vw; }*/
  #main-mobile #s8-m {
    padding-top: 14.75694vw;
    padding-bottom: 49.47917vw;
    background-size: contain;
    background-position: center 106%;
    background-image: url("../images/mb/s7-bg.png"); }
    #main-mobile #s8-m .title {
      width: 50.69444vw; }
    #main-mobile #s8-m .path-group {
      position: relative;
      margin-top: 6.68403vw; }
    #main-mobile #s8-m .top-decor {
      position: absolute;
      z-index: 0;
      top: -4.94792vw;
      left: 10.67708vw;
      width: 48.26389vw; }
      #main-mobile #s8-m .top-decor > img {
        width: 100%; }
    #main-mobile #s8-m .path-container {
      width: 92%;
      margin-left: auto;
      margin-right: auto;
      z-index: 1;
      position: relative; }
      #main-mobile #s8-m .path-container .head {
        position: relative;
        z-index: 1; }
        #main-mobile #s8-m .path-container .head img {
          pointer-events: none; }
        #main-mobile #s8-m .path-container .head .bg {
          width: 92.01389vw; }
        #main-mobile #s8-m .path-container .head .line {
          position: absolute;
          left: 3.90625vw;
          top: 50%;
          -webkit-transform: translateY(-50%);
          -ms-transform: translateY(-50%);
          transform: translateY(-50%);
          width: 37.41319vw; }
      #main-mobile #s8-m .path-container .body {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        overflow-y: hidden;
        overflow-x: auto;
        position: absolute;
        z-index: 1;
        top: 0;
        margin-left: 45%; }
        #main-mobile #s8-m .path-container .body .purchase-item {
          position: relative; }
          #main-mobile #s8-m .path-container .body .purchase-item .p1 {
            width: 43.05556vw;
            pointer-events: none; }
          #main-mobile #s8-m .path-container .body .purchase-item .p2 {
            width: 44.96528vw;
            pointer-events: none; }
          #main-mobile #s8-m .path-container .body .purchase-item .p3 {
            width: 44.27083vw;
            pointer-events: none; }
          #main-mobile #s8-m .path-container .body .purchase-item .p4 {
            width: 47.22222vw;
            pointer-events: none; }
          #main-mobile #s8-m .path-container .body .purchase-item .p1 + .purchase_link {
            left: 1.73611vw; }
          #main-mobile #s8-m .path-container .body .purchase-item .p2 + .purchase_link {
            left: 2.60417vw; }
          #main-mobile #s8-m .path-container .body .purchase-item .p3 + .purchase_link {
            left: 2.60417vw; }
          #main-mobile #s8-m .path-container .body .purchase-item .p4 + .purchase_link {
            left: 1.73611vw; }
          #main-mobile #s8-m .path-container .body .purchase-item .purchase_link {
            position: absolute;
            top: 30%;
            width: 38.97569vw;
            margin-left: auto;
            margin-right: auto; }
            #main-mobile #s8-m .path-container .body .purchase-item .purchase_link a {
              display: block;
              margin-bottom: 4.77431vw;
              margin-left: auto;
              margin-right: auto; }
            #main-mobile #s8-m .path-container .body .purchase-item .purchase_link img {
              image-rendering: auto;
              image-rendering: crisp-edges;
              -ms-interpolation-mode: nearest-neighbor;
              image-rendering: -moz-crisp-edges;
              image-rendering: -o-pixelated;
              image-rendering: pixelated;
              /* Safari seems to support, but seems deprecated and does the same thing as the others. */
              image-rendering: -webkit-optimize-contrast; }
        #main-mobile #s8-m .path-container .body > div {
          -ms-flex-negative: 0;
          flex-shrink: 0; }
    #main-mobile #s8-m .bottom-decor {
      position: absolute;
      z-index: 0;
      bottom: -7.8125vw;
      left: 2.60417vw;
      width: 38.62847vw; }



/*0728*/

#main-pc #s45 {
  height: 1866px;
  background-size: contain;
  background-image: url("../images/pc/s45-bg.png?t=1");
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;margin-top: -260px;margin-bottom: 120px; }
#main-pc #s45 .title {
  font-size: 0px;line-height: 0;
    width: 394px;position: absolute;left: 50%;margin-left: 256px;
    top: 340px;
}

#main-pc #s45 .txt {
  font-size: 0px;line-height: 0;
    width: 535px;position: absolute;bottom: 60px;left: 590px;}

#s45 .s45-pro{
  position: absolute;
  right: 320px;
  bottom: 50px;
  font-size: 0px;
  line-height: 0;
  width: 156px;
}
#s45 .pro{
  position: absolute;
  width: 450px;
  height: 450px;
  bottom: 0;
  left: 50%;
  margin-left: -50px;
  margin-bottom: -50px;
}

#main-pc #s5{margin-top: 0;}
#main-pc #sp1 {
    height: 1604px;
    background-size: contain;
    background-image: url(../images/pc/sp1-bg.png);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    /*margin-top: -160px;*/
}

.sp1-pro{
  width: 600px;
  height: 600px;
  right: 120px;
  top: 60px;
  position: absolute;
  mix-blend-mode: darken;
}

.sp1-title{
  width: 913px;
  position: absolute;
  left: 383px;
  top: 0;
}


#main-pc #sp2 {
    height: 1374px;
    background-size: contain;
    background-image: url(../images/pc/sp2-bg.png);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    margin-top: 100px;
    /*margin-top: -160px;*/
}

#main-pc #sp2 .sp2-title{
  width: 435px;
  position: absolute;
  top: 100px;
  left: 610px;
}
#main-pc #sp3 {
    height: 1467px;
    background-size: contain;
    background-image: url(../images/pc/sp3-bg.png);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    margin-top: 120px;
    /*margin-top: -160px;*/
}

#main-pc #sp3 .sp3-txt{
  width: 426px;
  font-size: 0;line-height: 0em;
  position: absolute;
  bottom: 70px;
  right: 260px;
}


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

  #main-pc #s45 {
    height: 97.1875vw;margin-top: -13.5417vw;margin-bottom: 6.25vw; }
  #main-pc #s45 .title {
      width: 20.521vw;margin-left: 13.33vw;
      top: 17.71vw;
  }

  #main-pc #s45 .txt {
      width: 27.865vw;bottom: 3.125vw;left: 30.73vw;}

  #s45 .s45-pro{
    right: 16.667vw;
    bottom: 2.604vw;
    width: 8.125vw;
  }
  #s45 .pro{
    width: 23.4375vw;
    height: 23.4375vw;
    margin-left: -2.604vw;
    margin-bottom: -2.604vw;
  }


  #main-pc #sp1 {
      height: 83.54167vw;
  }

  .sp1-pro{
    width: 31.25vw;
    height: 31.25vw;
    right: 6.25vw;
    top: 3.125vw;

  }
  .sp1-title{
    width: 47.55vw;
    left: 19.95vw;
  }



  #main-pc #sp2 {
      height: 71.5625vw;
      margin-top: 5.21vw;
  }
  #main-pc #sp2 .sp2-title{
    width: 22.65625vw;
    position: absolute;
    top: 5.21vw;
    left: 31.77vw;
  }
  #main-pc #sp3 {
      height: 76.40625vw;
      margin-top: 6.25vw;
  }

  #main-pc #sp3 .sp3-txt{
    width: 22.1875vw;
    bottom: 3.6458vw;
    right: 13.54167vw;
  }
}