/* Break Set */
/* Break Set */
/* Break Set */
html {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background-color: #72000c;
}

h1,
h2,
h3,
h4,
h5,
h6,
ul,
li,
p,
blockquote {
  margin: 0;
  padding: 0;
  font-weight: 500;
}

input,
textarea,
button {
  border: 0;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

input:hover, input:active, input:focus,
textarea:hover,
textarea:active,
textarea:focus,
button:hover,
button:active,
button:focus {
  outline: none;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

.page-wrapper {
  max-width: 1920px;
  margin: 0 auto;
  overflow: hidden;
}

.page-wrapper__content {
  margin: 0 auto;
  max-width: 1250px;
}

@media only screen and (max-width: 1250px) {
  .page-wrapper__content {
    max-width: 90%;
  }
}

@media only screen and (max-width: 768px) {
  .mb-hidden {
    display: none !important;
  }
}

/* Break Set */
.br1070 {
  display: block !important;
}

.view1070 {
  display: none !important;
}

@media only screen and (max-width: 1070px) {
  .br1070 {
    display: none !important;
  }
  .view1070 {
    display: block !important;
  }
}

.br1024 {
  display: block !important;
}

.view1024 {
  display: none !important;
}

@media only screen and (max-width: 1024px) {
  .br1024 {
    display: none !important;
  }
  .view1024 {
    display: block !important;
  }
}

.br960 {
  display: block !important;
}

.view960 {
  display: none !important;
}

@media only screen and (max-width: 960px) {
  .br960 {
    display: none !important;
  }
  .view960 {
    display: block !important;
  }
}

.br892 {
  display: block !important;
}

.view892 {
  display: none !important;
}

@media only screen and (max-width: 892px) {
  .br892 {
    display: none !important;
  }
  .view892 {
    display: block !important;
  }
}

.br860 {
  display: block !important;
}

.view860 {
  display: none !important;
}

@media only screen and (max-width: 860px) {
  .br860 {
    display: none !important;
  }
  .view860 {
    display: block !important;
  }
}

.br800 {
  display: block !important;
}

.view800 {
  display: none !important;
}

@media only screen and (max-width: 800px) {
  .br800 {
    display: none !important;
  }
  .view800 {
    display: block !important;
  }
}

.br768 {
  display: block !important;
}

.view768 {
  display: none !important;
}

@media only screen and (max-width: 768px) {
  .br768 {
    display: none !important;
  }
  .view768 {
    display: block !important;
  }
}

.br767 {
  display: block !important;
}

.view767 {
  display: none !important;
}

@media only screen and (max-width: 767px) {
  .br767 {
    display: none !important;
  }
  .view767 {
    display: block !important;
  }
}

.br700 {
  display: block !important;
}

.view700 {
  display: none !important;
}

@media only screen and (max-width: 700px) {
  .br700 {
    display: none !important;
  }
  .view700 {
    display: block !important;
  }
}

.br650 {
  display: block !important;
}

.view650 {
  display: none !important;
}

@media only screen and (max-width: 650px) {
  .br650 {
    display: none !important;
  }
  .view650 {
    display: block !important;
  }
}

.br600 {
  display: block !important;
}

.view600 {
  display: none !important;
}

@media only screen and (max-width: 600px) {
  .br600 {
    display: none !important;
  }
  .view600 {
    display: block !important;
  }
}

.br550 {
  display: block !important;
}

.view550 {
  display: none !important;
}

@media only screen and (max-width: 550px) {
  .br550 {
    display: none !important;
  }
  .view550 {
    display: block !important;
  }
}

.br520 {
  display: block !important;
}

.view520 {
  display: none !important;
}

@media only screen and (max-width: 520px) {
  .br520 {
    display: none !important;
  }
  .view520 {
    display: block !important;
  }
}

.br480 {
  display: block !important;
}

.view480 {
  display: none !important;
}

@media only screen and (max-width: 480px) {
  .br480 {
    display: none !important;
  }
  .view480 {
    display: block !important;
  }
}

.br450 {
  display: block !important;
}

.view450 {
  display: none !important;
}

@media only screen and (max-width: 450px) {
  .br450 {
    display: none !important;
  }
  .view450 {
    display: block !important;
  }
}

html {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  margin: 0;
}

embed,
iframe,
img,
object,
video {
  max-width: 100%;
  display: block;
  margin: 0 auto;
}

/*app css*/
@media only screen and (min-width: 640px) {
  .footer_back_to_top {
    position: fixed;
    right: 0%;
    margin-right: 0px;
    bottom: 0px;
    z-index: 3;
  }
}

@media only screen and (max-width: 979px) and (min-width: 641px) {
  .overlay-sidebar {
    z-index: 3;
  }
}

iframe {
  border: none;
}

div,
p {
  font-size: inherit;
}

/* Break Set */
.clarins--extrafirming {
  font-size: 0.9rem !important;
}

@media screen and (min-width: 20rem) {
  .clarins--extrafirming {
    font-size: calc(
 0.9rem +
 2.1 *
 ((100vw - 20rem) / 80)) !important;
  }
}

@media screen and (min-width: 100rem) {
  .clarins--extrafirming {
    font-size: 3rem !important;
  }
}

#wrapper {
  max-width: 1920px;
}

footer {
  margin-top: 0;
}

.primary-content {
  padding-bottom: 0;
}

#main:not(.main-homepage) {
  margin-top: 0;
}

.breadcrumb {
  display: none;
}

/* page reset for v3 */
#wrapper,
#wrapper.pt_category-wide .site-width-slot {
  max-width: 100%;
}

#main {
  margin-top: 0px;
}

footer {
  margin-top: 0px;
  padding-top: 50px;
}

.footer-container {
  padding-top: 0px;
}

.primary-content {
  padding-bottom: 0px;
}

.go-to-top {
  top: -40px;
}

/* Reset */
.breadcrumb {
  display: none !important;
}

#main {
  width: 100% !important;
  padding-bottom: 0px !important;
}

#content {
  width: 100% !important;
  margin: 0px !important;
  float: none;
  clear: both;
}

#leftcolumn {
  display: none !important;
  float: none;
}

.categorylanding > h1 {
  display: none;
}

#mega-footer-container {
  margin-top: -50px;
}

.outter.menu-type-staticcontent,
.outter.menu-type-promotion,
.outter.menu-type-clarinsmag {
  right: 0px !important;
}

.outter.menu-type-staticcontent .bgholder {
  left: 303px;
}

.outter.menu-type-promotion .bgholder {
  left: 413.078px;
}

.outter.menu-type-clarinsmag .bgholder {
  left: 440.375px;
}

.header .row {
  display: block;
}

/* Button */
.btn-clr {
  display: table;
  padding: 10px 20px;
  margin: 5px auto;
  width: auto;
  max-width: 300px;
  font-family: "Microsoft Jhenghei";
  font-size: 14px;
  color: #fff;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  background: #c2955c;
}

.btn-clr--black {
  background: #000;
}

.btn-clr--pink {
  background: #fa9db0;
}

.btn-clr--noColor {
  background: transparent;
  color: black;
  text-decoration: underline;
}

@media only screen and (max-width: 480px) {
  .btn-clr {
    min-width: 100px;
    padding: 8px 15px;
    font-size: 12px;
  }
}

.btn-clr.inline {
  display: inline-table;
}

.extra-btn {
  position: absolute;
  z-index: 1;
}

.btn-1 {
  left: -5%;
  bottom: 5%;
}

@media only screen and (max-width: 768px) {
  .btn-1 {
    top: 45%;
    left: 0;
  }
}

@media only screen and (max-width: 480px) {
  .btn-1 {
    bottom: 0;
    top: auto;
    left: 0;
  }
}

.btn-2 {
  top: 0;
  right: 0;
}

.btn-3 {
  bottom: -10%;
  right: 0;
}

.video .video_img {
  width: 51.5%;
  max-width: 989px;
  margin: 0 auto;
}

@media only screen and (max-width: 767px) {
  .video .video_img {
    width: 100%;
  }
}

.video .video_shadow {
  max-width: 989px;
  width: 51.5%;
}

@media only screen and (max-width: 767px) {
  .video .video_shadow {
    width: 100%;
  }
}

.floating-btn {
  position: fixed;
  right: 0;
  top: 70%;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
  z-index: 100;
}

@media only screen and (max-width: 768px) {
  .floating-btn {
    max-width: 54px;
    max-height: 54px;
    width: 54px;
    height: 54px;
    top: 75%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
}

.floating-btn__button {
  position: absolute;
  left: 50%;
  bottom: 10px;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  width: 70%;
  font-size: 20px;
  padding: 5px 20px;
  cursor: pointer;
}

.floating-btn .button_mb {
  max-width: 54px;
  max-height: 54px;
  width: 54px;
  height: 54px;
  text-align: center;
  font-size: 14px;
  line-height: 1;
  background-color: #fff;
  padding: 11px 0 11px 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border: 1px solid #d3d3d3;
}

.floating-btn .button_mb a {
  text-decoration: none;
  color: #000;
}

.flex-container {
  position: relative;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.flex-container .col-5pw,
.flex-container .col-10pw,
.flex-container .col-20pw,
.flex-container .col-25pw,
.flex-container .col-30pw,
.flex-container .col-33pw,
.flex-container .col-40pw,
.flex-container .col-45pw,
.flex-container .col-49pw,
.flex-container .col-50pw,
.flex-container .col-51pw,
.flex-container .col-55pw,
.flex-container .col-60pw,
.flex-container .col-66pw,
.flex-container .col-70pw,
.flex-container .col-80pw,
.flex-container .col-90pw,
.flex-container .col-100pw {
  position: relative;
  width: 100%;
  min-height: 1px;
}

.flex-container .col-5pw {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 5%;
  flex: 0 0 5%;
  max-width: 5%;
}

.flex-container .col-10pw {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 10%;
  flex: 0 0 10%;
  max-width: 10%;
}

.flex-container .col-20pw {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 20%;
  flex: 0 0 20%;
  max-width: 20%;
}

.flex-container .col-25pw {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;
}

.flex-container .col-30pw {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 30%;
  flex: 0 0 30%;
  max-width: 30%;
}

.flex-container .col-33pw {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 33.333%;
  flex: 0 0 33.333%;
  max-width: 33.333%;
}

.flex-container .col-40pw {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 40%;
  flex: 0 0 40%;
  max-width: 40%;
}

.flex-container .col-45pw {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 45%;
  flex: 0 0 45%;
  max-width: 45%;
}

.flex-container .col-49pw {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 49%;
  flex: 0 0 49%;
  max-width: 49%;
}

.flex-container .col-50pw {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}

.flex-container .col-51pw {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 51%;
  flex: 0 0 51%;
  max-width: 51%;
}

.flex-container .col-55pw {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 55%;
  flex: 0 0 55%;
  max-width: 55%;
}

.flex-container .col-60pw {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 60%;
  flex: 0 0 60%;
  max-width: 60%;
}

.flex-container .col-66pw {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 66%;
  flex: 0 0 66%;
  max-width: 66%;
}

.flex-container .col-70pw {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 70%;
  flex: 0 0 70%;
  max-width: 70%;
}

.flex-container .col-80pw {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 80%;
  flex: 0 0 80%;
  max-width: 80%;
}

.flex-container .col-90pw {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 90%;
  flex: 0 0 90%;
  max-width: 90%;
}

.flex-container .col-100pw {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
}

.flex-container .col-5pw-non-resp,
.flex-container .col-10pw-non-resp,
.flex-container .col-20pw-non-resp,
.flex-container .col-25pw-non-resp,
.flex-container .col-30pw-non-resp,
.flex-container .col-33pw-non-resp,
.flex-container .col-36pw-non-resp,
.flex-container .col-40pw-non-resp,
.flex-container .col-45pw-non-resp,
.flex-container .col-49pw-non-resp,
.flex-container .col-50pw-non-resp,
.flex-container .col-51pw-non-resp,
.flex-container .col-55pw-non-resp,
.flex-container .col-60pw-non-resp,
.flex-container .col-66pw-non-resp,
.flex-container .col-70pw-non-resp,
.flex-container .col-80pw-non-resp,
.flex-container .col-90pw-non-resp,
.flex-container .col-100pw-non-resp {
  position: relative;
  width: 100%;
  min-height: 1px;
}

.flex-container .col-5pw-non-resp {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 5%;
  flex: 0 0 5%;
  max-width: 5%;
}

.flex-container .col-10pw-non-resp {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 10%;
  flex: 0 0 10%;
  max-width: 10%;
}

.flex-container .col-20pw-non-resp {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 20%;
  flex: 0 0 20%;
  max-width: 20%;
}

.flex-container .col-25pw-non-resp {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;
}

.flex-container .col-30pw-non-resp {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 30%;
  flex: 0 0 30%;
  max-width: 30%;
}

.flex-container .col-33pw-non-resp {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 33.333%;
  flex: 0 0 33.333%;
  max-width: 33.333%;
}

.flex-container .col-36pw-non-resp {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 36%;
  flex: 0 0 36%;
  max-width: 36%;
}

.flex-container .col-40pw-non-resp {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 40%;
  flex: 0 0 40%;
  max-width: 40%;
}

.flex-container .col-45pw-non-resp {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 45%;
  flex: 0 0 45%;
  max-width: 45%;
}

.flex-container .col-49pw-non-resp {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 49%;
  flex: 0 0 49%;
  max-width: 49%;
}

.flex-container .col-50pw-non-resp {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}

.flex-container .col-51pw-non-resp {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 51%;
  flex: 0 0 51%;
  max-width: 51%;
}

.flex-container .col-55pw-non-resp {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 55%;
  flex: 0 0 55%;
  max-width: 55%;
}

.flex-container .col-60pw-non-resp {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 60%;
  flex: 0 0 60%;
  max-width: 60%;
}

.flex-container .col-66pw-non-resp {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 66%;
  flex: 0 0 66%;
  max-width: 66%;
}

.flex-container .col-70pw-non-resp {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 70%;
  flex: 0 0 70%;
  max-width: 70%;
}

.flex-container .col-80pw-non-resp {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 80%;
  flex: 0 0 80%;
  max-width: 80%;
}

.flex-container .col-90pw-non-resp {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 90%;
  flex: 0 0 90%;
  max-width: 90%;
}

.flex-container .col-100pw-non-resp {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
}

@media only screen and (max-width: 767px) {
  .flex-container .col-5pw,
  .flex-container .col-10pw,
  .flex-container .col-20pw,
  .flex-container .col-25pw,
  .flex-container .col-30pw,
  .flex-container .col-33pw,
  .flex-container .col-40pw,
  .flex-container .col-45pw,
  .flex-container .col-49pw,
  .flex-container .col-50pw,
  .flex-container .col-51pw,
  .flex-container .col-55pw,
  .flex-container .col-60pw,
  .flex-container .col-66pw,
  .flex-container .col-70pw,
  .flex-container .col-80pw,
  .flex-container .col-90pw,
  .flex-container .col-100pw {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    max-width: 100%;
  }
}

.slick-next, .slick-prev {
  height: 35px;
}

button {
  outline: none !important;
}

.page_thankyou {
  margin: 0 auto;
  max-width: 1920px;
  min-width: 320px;
  width: 100%;
  font-family: ClarinsRegular, "Microsoft Jhenghei";
}

.page_thankyou .kv_container {
  position: relative;
}

@media only screen and (max-width: 767px) {
  .page_thankyou .kv_container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }
}

.page_thankyou .kv_container .kv {
  margin: 0 auto;
}

.page_thankyou .kv_container .thankyou_message {
  position: absolute;
  height: 100%;
  top: 0;
  right: 50%;
}

@media only screen and (max-width: 767px) {
  .page_thankyou .kv_container .thankyou_message {
    position: relative;
    width: 100%;
    right: 0;
    background: white;
  }
}

.page_thankyou .kv_container .thankyou_message .message_content {
  position: relative;
  text-align: center;
  top: 50%;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
  line-height: 1.8;
}

@media only screen and (max-width: 767px) {
  .page_thankyou .kv_container .thankyou_message .message_content {
    -webkit-transform: translate(0%, 0);
            transform: translate(0%, 0);
    margin: 10% 0;
  }
}

.page_thankyou .kv_container .thankyou_message .message_content h1 {
  color: #000;
  font-family: ClarinsRegular, "Microsoft Jhenghei";
  font-size: 42px;
}

@media only screen and (max-width: 1200px) {
  .page_thankyou .kv_container .thankyou_message .message_content h1 {
    font-size: 3.833vw;
  }
}

@media only screen and (max-width: 767px) {
  .page_thankyou .kv_container .thankyou_message .message_content h1 {
    font-size: 8vw;
  }
}

.page_thankyou .kv_container .thankyou_message .message_content p {
  color: #000;
  font-family: ClarinsRegular, "Microsoft Jhenghei";
  font-size: 22px;
}

@media only screen and (max-width: 1200px) {
  .page_thankyou .kv_container .thankyou_message .message_content p {
    font-size: 1.833vw;
  }
}

@media only screen and (max-width: 767px) {
  .page_thankyou .kv_container .thankyou_message .message_content p {
    font-size: 4vw;
  }
}

.page_thankyou .kv_container .thankyou_message .message_content .social_icon {
  margin: 2.5% 0 0 0;
}

.page_thankyou .kv_container .thankyou_message .message_content .social_icon a {
  display: inline-block;
  margin: 0 5%;
}

.page_index {
  margin: 0 auto;
  max-width: 1920px;
  min-width: 320px;
  width: 100%;
  font-family: ClarinsRegular, "Microsoft Jhenghei";
  background: white;
}

.page_index .en {
  font-family: "Gotham-Light";
}

.page_index .banner {
  width: 100%;
  background: #fff;
  position: relative;
}

.page_index .banner .banner_content {
  position: absolute;
  right: 55%;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

@media only screen and (max-width: 767px) {
  .page_index .banner .banner_content {
    position: absolute;
    top: 5%;
    right: 50%;
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}

.page_index .banner .banner_content .content_box h4 {
  color: #c21727;
  line-height: 1.2;
  font-size: 46px;
}

@media only screen and (max-width: 1200px) {
  .page_index .banner .banner_content .content_box h4 {
    font-size: 3.833vw;
  }
}

@media only screen and (max-width: 767px) {
  .page_index .banner .banner_content .content_box h4 {
    font-size: 5vw;
  }
}

.page_index .banner .banner_content .content_box h1 {
  color: #000;
  font-size: 46px;
  line-height: 1.2;
  margin: 7% 0;
}

@media only screen and (max-width: 1200px) {
  .page_index .banner .banner_content .content_box h1 {
    font-size: 3.833vw;
  }
}

@media only screen and (max-width: 767px) {
  .page_index .banner .banner_content .content_box h1 {
    font-size: 5vw;
  }
}

.page_index .banner .banner_content2 {
  position: absolute;
  left: 65%;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  color: #000;
  font-size: 34px;
  line-height: 1.5;
}

.page_index .banner .banner_content2 span {
  font-size: 28px;
}

@media only screen and (max-width: 1200px) {
  .page_index .banner .banner_content2 {
    font-size: 2.833vw;
  }
  .page_index .banner .banner_content2 span {
    font-size: 2.4vw;
  }
}

@media only screen and (max-width: 767px) {
  .page_index .banner .banner_content2 {
    font-size: 5vw;
    left: 75%;
    top: 50%;
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
  .page_index .banner .banner_content2 span {
    display: none;
  }
}

.page_index .banner .btn_group {
  white-space: nowrap;
  overflow: hidden;
}

.page_index .banner .btn_group a {
  color: transparent;
}

@media only screen and (max-width: 767px) {
  .page_index .banner .btn_group {
    padding: 5% 5%;
  }
}

.page_index .banner .btn-clr {
  width: 30%;
  font-size: 22px;
}

@media only screen and (max-width: 1200px) {
  .page_index .banner .btn-clr {
    font-size: 1.833vw;
  }
}

@media only screen and (max-width: 767px) {
  .page_index .banner .btn-clr {
    font-size: 5vw;
    width: 38%;
    margin-left: 3%;
  }
}

.page_index #main_content {
  position: relative;
  width: 100%;
  background: white;
}

.page_index #main_content2 {
  background: white;
}

.page_index .lower_part {
  background: white;
}

.page_index .lower_part img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.page_index .ContentBox {
  position: absolute;
  top: 18%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  max-width: 620px;
  width: 50%;
  border: 5px solid #efefef;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 10px;
  background: white;
  text-align: center;
}

@media only screen and (max-width: 767px) {
  .page_index .ContentBox {
    width: 90%;
  }
}

.page_index .textbox2 {
  margin-top: 40px;
}

@media only screen and (max-width: 767px) {
  .page_index .textbox2 {
    margin-top: 4vw;
  }
}

.page_index .textbox3 {
  margin-top: 10px;
}

@media only screen and (max-width: 767px) {
  .page_index .textbox3 {
    margin-top: 2vw;
  }
}

.page_index .content_title {
  color: #c21727;
  font-size: 85px;
  line-height: 1;
  margin-bottom: 2%;
}

.page_index .content_title small {
  font-size: 50%;
}

@media only screen and (max-width: 767px) {
  .page_index .content_title small {
    font-size: 45%;
  }
}

@media only screen and (max-width: 1200px) {
  .page_index .content_title {
    font-size: 7.083vw;
  }
}

@media only screen and (max-width: 767px) {
  .page_index .content_title {
    font-size: 12.400vw;
  }
}

@media only screen and (max-width: 475px) {
  .page_index .content_title {
    font-size: 10vw;
  }
}

.page_index .content_txt {
  color: #000;
  font-size: 22px;
  line-height: 2;
}

@media only screen and (max-width: 1200px) {
  .page_index .content_txt {
    font-size: 1.833vw;
  }
}

@media only screen and (max-width: 767px) {
  .page_index .content_txt {
    font-size: 3.75vw;
    width: 85%;
    margin: 0 auto;
  }
}

@media only screen and (max-width: 475px) {
  .page_index .content_txt {
    font-size: 3.25vw;
  }
}

.page_index .element_container {
  position: relative;
  display: inline-block;
  padding: 2% 3%;
  width: 15%;
}

@media only screen and (max-width: 767px) {
  .page_index .element_container {
    width: 10%;
  }
}

@media only screen and (max-width: 475px) {
  .page_index .element_container {
    width: 7%;
  }
}

.page_index .element_name {
  color: #c21727;
  font-size: 18px;
}

@media only screen and (max-width: 1200px) {
  .page_index .element_name {
    font-size: 2.400vw;
  }
}

@media only screen and (max-width: 767px) {
  .page_index .element_name {
    font-size: 3.75vw;
  }
}

@media only screen and (max-width: 475px) {
  .page_index .element_name {
    margin-top: 1vw;
    font-size: 2.75vw;
  }
}

.page_index .tnc {
  font-size: 14px;
  opacity: 0.5;
}

@media only screen and (max-width: 767px) {
  .page_index .tnc {
    font-size: 3.75vw;
  }
}

@media only screen and (max-width: 475px) {
  .page_index .tnc {
    font-size: 2.75vw;
  }
}

.page_index .slick-next:before, .page_index .slick-prev:before, .page_index .slick-next:after, .page_index .slick-prev:after {
  display: none;
}

.page_index .slick-next {
  background: url(../img/right-arrow.png) no-repeat center;
  right: 0;
  z-index: 999;
  min-width: 10px;
}

@media only screen and (max-width: 767px) {
  .page_index .slick-next {
    width: 3vw;
    background-size: 100%;
  }
}

.page_index .slick-prev {
  background: url(../img/left-arrow.png) no-repeat center;
  left: 0;
  z-index: 999;
  min-width: 10px;
}

@media only screen and (max-width: 767px) {
  .page_index .slick-prev {
    width: 3vw;
    background-size: 100%;
  }
}

.page_index .slick-dots li {
  background: transparent;
}

.page_index .slick-dots li.slick-active {
  background: transparent;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.page_index .slick-dots li button:before {
  background: transparent;
  opacity: 1;
  border: 1px solid white;
  border-radius: 50%;
  color: transparent;
  width: 8px;
  height: 8px;
  -webkit-box-shadow: 0px 0px 5px #999999;
          box-shadow: 0px 0px 5px #999999;
}

.page_index .slick-dots li.slick-active button:before {
  background: white;
}

.page_index .slick-dots {
  bottom: -40%;
}

.page_index .slick-dotted.slick-slider {
  margin-bottom: 0;
}

.page_index .form {
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
  padding: 5% 0;
  background: url(../img/form_bg.jpg) no-repeat center;
  background-size: cover;
}

@media only screen and (max-width: 767px) {
  .page_index .form {
    padding: 6% 0;
    background: url(../img/form_bg_mb.jpg) no-repeat center;
    background-size: cover;
  }
}

.page_index .form h1 {
  letter-spacing: 2px;
  line-height: 1;
  color: #c21727;
  font-family: ClarinsRegular, "Microsoft Jhenghei";
  font-size: 42px;
}

@media only screen and (max-width: 1200px) {
  .page_index .form h1 {
    font-size: 3.500vw;
  }
}

@media only screen and (max-width: 767px) {
  .page_index .form h1 {
    font-size: 8vw;
  }
}

.page_index .form h4 {
  line-height: 2;
  color: #000;
  font-family: ClarinsRegular, "Microsoft Jhenghei";
  margin: 0 0 1.5% 0;
  font-size: 26px;
}

@media only screen and (max-width: 1200px) {
  .page_index .form h4 {
    font-size: 2.167vw;
  }
}

@media only screen and (max-width: 767px) {
  .page_index .form h4 {
    font-size: 5vw;
  }
}

.page_index .form .iframe__form {
  width: 50%;
  margin: 0 auto;
}

@media only screen and (max-width: 767px) {
  .page_index .form .iframe__form {
    width: 90%;
  }
}

.page_index .prod {
  background: white;
  padding: 5% 0;
}

.page_index .prod .prod_title {
  font-family: ClarinsRegular, "Microsoft Jhenghei";
  color: #c21727;
  font-size: 42px;
  text-align: center;
}

.page_index .prod .desktop_version {
  max-width: 1280px;
  margin: 2% auto;
}

.page_index .prod .desktop_version div {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0 0.5%;
}

.page_index .prod .gray_box {
  border: 10px solid #efefef;
}

.page_index .prod .prod_name {
  font-family: ClarinsRegular, "Microsoft Jhenghei";
  color: #000;
  font-size: 30px;
  text-align: center;
  margin: 20px 0;
}

.page_index .prod .prod_detail {
  font-family: ClarinsRegular, "Microsoft Jhenghei";
  color: #000;
  font-size: 18px;
  text-align: center;
  margin: 20px 0;
}

@media only screen and (max-width: 1280px) {
  .page_index .prod .prod_title {
    font-size: 3.281vw;
  }
  .page_index .prod .gray_box {
    border: 0.781vw solid #efefef;
  }
  .page_index .prod .prod_name {
    font-size: 2.344vw;
    margin: 1.563vw 0;
  }
  .page_index .prod .prod_detail {
    font-size: 1.406vw;
    margin: 1.563vw 0;
  }
  .page_index .prod .prod_img {
    width: 60%;
  }
}

@media only screen and (max-width: 767px) {
  .page_index .prod .mobile_verion div {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    padding: 0 0.5%;
  }
  .page_index .prod .prod_title {
    font-size: 5vw;
  }
  .page_index .prod .gray_box {
    margin-top: 5%;
    border: 2vw solid #efefef;
  }
  .page_index .prod .prod_name {
    font-size: 6vw;
    margin: 5vw 0;
  }
  .page_index .prod .prod_detail {
    font-size: 4.5vw;
    margin: 5vw 0;
  }
  .page_index .prod .prod_img {
    width: 50%;
  }
  .page_index .prod .slick-prev {
    left: 10%;
  }
  .page_index .prod .slick-next {
    right: 10%;
  }
}
/*# sourceMappingURL=main.css.map */