/* makeup2017.html */
@import url("web_font.css");
/* 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;
}

/* Basic Config*/
/* Mixin*/
.test {
  border: 1px solid red;
}

.center {
  margin: 0 auto;
}

.clfix:after {
  clear: both;
  content: "";
  display: block;
}

.tac {
  text-align: center;
}

img {
  display: block;
  width: auto;
  max-width: 100%;
  margin: 0 auto;
}

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

.view1800 {
  display: none !important;
}

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

  .view1800 {
    display: block !important;
  }
}
.br1600 {
  display: block !important;
}

.view1600 {
  display: none !important;
}

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

  .view1600 {
    display: block !important;
  }
}
.br1400 {
  display: block !important;
}

.view1400 {
  display: none !important;
}

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

  .view1400 {
    display: block !important;
  }
}
.br1366 {
  display: block !important;
}

.view1366 {
  display: none !important;
}

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

  .view1366 {
    display: block !important;
  }
}
.br1200 {
  display: block !important;
}

.view1200 {
  display: none !important;
}

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

  .view1200 {
    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;
  }
}
.br1023 {
  display: block !important;
}

.view1023 {
  display: none !important;
}

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

  .view1023 {
    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;
  }
}
.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;
  }
}
.br480 {
  display: block !important;
}

.view480 {
  display: none !important;
}

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

  .view480 {
    display: block !important;
  }
}
.br375 {
  display: block !important;
}

.view375 {
  display: none !important;
}

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

  .view375 {
    display: block !important;
  }
}
.br320 {
  display: block !important;
}

.view320 {
  display: none !important;
}

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

  .view320 {
    display: block !important;
  }
}
/* Fin Mixin*/
body {
  max-width: 2200px;
  margin: 0 auto;
}

/* Button */
.btn-clr {
  display: table;
  padding: 10px 20px;
  margin: 5px auto;
  width: auto;
  max-width: 300px;
  min-width: 130px;
  font-family: ClarinsRegular, Clarins, "Microsoft JhengHei", SimHei, Arial, sans-serif !important;
  font-size: 14px;
  color: #fff;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  background: #fa9db0;
}
.btn-clr--black {
  background: #000;
}
@media only screen and (max-width: 480px) {
  .btn-clr {
    min-width: 100px;
  }
}

.btn-clr:hover,
.btn-clr:active,
.btn-clr:focus,
.btn-clr:visited {
  color: #fff !important;
}

/* Contents */
body {
  overflow-x: hidden;
}

.wrap.whitening2019 {
  max-width: 1920px;
  margin: 0 auto;
  overflow: hidden;
}

section {
  position: relative;
  overflow: hidden;
}
section.form-section {
  padding: 50px 0px;
}

.inner-cont {
  position: relative;
  width: 1200px;
  max-width: 100%;
  margin: 0 auto;
}
.inner-cont:after {
  content: "";
  clear: both;
  display: block;
}

.con-half:after {
  content: "";
  clear: both;
  display: block;
}
.con-half > div {
  position: relative;
  float: left;
  width: 50%;
  text-align: center;
}

.mainvisual {
  position: relative;
  height: 498px;
  width: 100%;
  min-width: 990px;
  background: url("../img/mainvisual.jpg") center top no-repeat;
}
.mainvisual .maintit {
  position: absolute;
  transform: translate(0, -50%);
  top: 50%;
  left: 65%;
  text-align: center;
}
.mainvisual .maintit .tit01 {
  font-family: ClarinsRegular, Clarins, "Microsoft JhengHei", SimHei, Arial, sans-serif !important;
  font-size: 55px;
  color: #be0f34;
  line-height: 1;
  margin-bottom: 20px;
}
.mainvisual .maintit .tit02 {
  font-family: "clarinsita", "Microsoft JhengHei", SimHei, Arial, sans-serif !important;
  font-size: 30px;
  color: #000;
  line-height: 1;
  margin-bottom: 30px;
}

/* Section 01 */
.sec01 {
  padding: 30px 0;
}

.whitening-intro {
  margin: 20px auto 0;
}
.whitening-intro .int-title {
  font-family: ClarinsRegular, Clarins, "Microsoft JhengHei", SimHei, Arial, sans-serif !important;
  font-size: 25px;
  line-height: 1.2;
  text-align: center;
  color: #fa9db0;
}
.whitening-intro .int-desc {
  margin: 20px auto 0;
  font-family: ClarinsRegular, Clarins, "Microsoft JhengHei", SimHei, Arial, sans-serif !important;
  font-size: 16px;
  line-height: 1.6;
  color: #000;
  text-align: center;
}
.whitening-intro .int-desc span {
  display: inline-block;
  color: #fa9db0;
}
.whitening-intro .int-desc span.big {
  font-weight: bold;
  font-size: 160%;
}

.view-movie {
  display: inline-block;
  position: relative;
  /*&:before{
  	content:"";
  	display: block;
  	width: 50px;
  	height: 50px;
  	position: absolute;
  	bottom:20px;
  	left:20px;
  	background:url('../img/btn-play.png');
  }*/
}

.whitening-special {
  margin: 20px auto 10px;
}
.whitening-special .sp-item {
  max-width: 85%;
  margin: 0 auto;
  text-align: center;
}
.whitening-special .sp-item:after {
  content: "";
  clear: both;
  display: block;
}
.whitening-special .sp-item.add-plus > div + div {
  position: relative;
}
.whitening-special .sp-item.add-plus > div + div:before {
  content: "+";
  position: absolute;
  top: 30px;
  left: -45px;
  font-family: ClarinsRegular, Clarins, "Microsoft JhengHei", SimHei, Arial, sans-serif !important;
  font-size: 80px;
  color: #fa9db0;
}
.whitening-special .sp-item > div {
  float: left;
  max-width: 300px;
  width: 48%;
  margin: 0% 1%;
}
.whitening-special .sp-item > div:after {
  content: "";
  clear: both;
  display: block;
}
.whitening-special .sp-item .sp-item-img {
  position: relative;
  padding-left: 60px;
  padding-top: 30px;
}
.whitening-special .sp-item .sp-item-img img {
  position: relative;
  z-index: 1;
}
.whitening-special .sp-item .sp-item-img .img-tit {
  position: absolute;
  z-index: 0;
  top: 10px;
  left: 30px;
  width: 150px;
  height: 150px;
  border-radius: 100px;
  background: rgba(250, 157, 176, 0.2);
}
@media only screen and (max-width: 1100px) {
  .whitening-special .sp-item .sp-item-img .img-tit {
    left: 20px;
  }
}
.whitening-special .sp-item .sp-item-img .img-tit > div {
  margin-top: 16px;
  font-family: "clarinsita", "Microsoft JhengHei", SimHei, Arial, sans-serif !important;
  font-size: 18px;
  font-weight: bold;
  color: #be0f34;
  font-weight: bold;
  line-height: 2;
  text-align: center;
}
.whitening-special .sp-item .sp-item-img .img-tit > div:before {
  content: "";
  display: block;
  width: 30px;
  height: 20px;
  margin: 0 auto;
  background: url("../img/quote.png");
}
.whitening-special .sp-item .progress-tit {
  font-family: ClarinsRegular, Clarins, "Microsoft JhengHei", SimHei, Arial, sans-serif !important;
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 20px;
}
.whitening-special .sp-item .progress-tit:after {
  content: "*";
}
.whitening-special .sp-item .load-progress {
  position: relative;
}
.whitening-special .sp-item .load-progress strong {
  position: absolute;
  top: 34%;
  left: 0px;
  width: 100%;
  text-align: center;
  font-family: "clarinsreg", "Microsoft JhengHei", SimHei, Arial, sans-serif !important;
  font-size: 36px;
  font-weight: normal;
  color: #be0f34;
}
.whitening-special .sp-item .sp-item-desc {
  font-family: ClarinsRegular, Clarins, "Microsoft JhengHei", SimHei, Arial, sans-serif !important;
  font-size: 12px;
  line-height: 1.4;
  color: #000;
  margin: 10px auto;
}

/*
.progress-item {
	max-width: 250px;
	&.p-item01 {
		float:right;
		margin-right: 30px;
	}
	&.p-item02 {
		float:left;
		margin-left: 30px;
	}
}
*/
/* Section 02 */
.sec02 {
  /*background:url('../img/bg-sec02.jpg') center center no-repeat;*/
  padding: 30px 0;
  background: #fdf7f8;
  background-size: cover;
  background: #ffdee4;
  background: -moz-linear-gradient(-45deg, #ffdee4 0%, white 43%, white 62%, #ffe8ec 100%);
  background: -webkit-gradient(left top, right bottom, color-stop(0%, #ffdee4), color-stop(43%, white), color-stop(62%, white), color-stop(100%, #ffe8ec));
  background: -webkit-linear-gradient(-45deg, #ffdee4 0%, white 43%, white 62%, #ffe8ec 100%);
  background: -o-linear-gradient(-45deg, #ffdee4 0%, white 43%, white 62%, #ffe8ec 100%);
  background: -ms-linear-gradient(-45deg, #ffdee4 0%, white 43%, white 62%, #ffe8ec 100%);
  background: linear-gradient(135deg, #ffdee4 0%, white 43%, white 62%, #ffe8ec 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#ffdee4", endColorstr="#ffe8ec", GradientType=1 );
}
.sec02__title {
  font-family: "clarinsita", "Microsoft JhengHei", SimHei, Arial, sans-serif !important;
  text-align: center;
  font-size: 35px;
  margin: 20px 0;
}
@media only screen and (max-width: 767px) {
  .sec02__title {
    font-size: 28px;
  }
}

.whole-product {
  position: relative;
  width: 580px;
  max-width: 70%;
  height: 470px;
  margin-left: -40px;
  text-align: center;
  background: rgba(255, 171, 184, 0);
  background: -moz-linear-gradient(left, rgba(255, 171, 184, 0) 0%, #ffd4db 48%, rgba(255, 171, 184, 0) 100%);
  background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255, 171, 184, 0)), color-stop(48%, #ffd4db), color-stop(100%, rgba(255, 171, 184, 0)));
  background: -webkit-linear-gradient(left, rgba(255, 171, 184, 0) 0%, #ffd4db 48%, rgba(255, 171, 184, 0) 100%);
  background: -o-linear-gradient(left, rgba(255, 171, 184, 0) 0%, #ffd4db 48%, rgba(255, 171, 184, 0) 100%);
  background: -ms-linear-gradient(left, rgba(255, 171, 184, 0) 0%, #ffd4db 48%, rgba(255, 171, 184, 0) 100%);
  background: linear-gradient(to right, rgba(255, 171, 184, 0) 0%, #ffd4db 48%, rgba(255, 171, 184, 0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#ffabb8", endColorstr="#ffabb8", GradientType=1 );
}
@media only screen and (max-width: 1100px) {
  .whole-product {
    margin-left: -80px;
  }
}
.whole-product img {
  position: relative;
  z-index: 1;
}
.whole-product .pd-name-circle {
  position: absolute;
  z-index: 0;
  top: 200px;
  left: 50%;
  margin-left: 120px;
}
.whole-product .pd-name-circle:before {
  content: "";
  display: block;
  position: absolute;
  top: -140px;
  left: -80px;
  width: 320px;
  height: 320px;
  background: url("../img/whole-pd-circle.png");
  -webkit-animation-name: bubble;
  -webkit-animation-duration: 3000ms;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-name: bubble;
  -moz-animation-duration: 3000ms;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: bubble;
  -ms-animation-duration: 3000ms;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  animation-name: bubble;
  animation-duration: 3000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.pd-progress {
  position: relative;
  margin: 0px auto;
  padding: 20px 10px 10px;
}
.pd-progress:after {
  content: "";
  clear: both;
  display: block;
}
.pd-progress > div {
  float: left;
  width: 50%;
  display: block;
  text-align: center;
}
.pd-progress .progress-tit {
  font-family: ClarinsRegular, Clarins, "Microsoft JhengHei", SimHei, Arial, sans-serif !important;
  font-weight: bold;
  font-size: 22px;
  position: relative;
  display: table;
  margin: 0 auto 20px auto;
}
.pd-progress .progress-tit sup {
  position: absolute;
  right: -5px;
}
.pd-progress .load-progress {
  position: relative;
}
.pd-progress .load-progress strong {
  width: 100%;
  font-family: "clarinsreg", "Microsoft JhengHei", SimHei, Arial, sans-serif !important;
  font-weight: normal;
  color: #be0f34;
  line-height: 1;
  text-align: center;
}
.pd-progress .load-progress__num {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  font-size: 40px;
  white-space: nowrap;
}
.pd-progress .load-progress__desc {
  position: absolute;
  transform: translate(-50%, 0);
  left: 50%;
  bottom: 15%;
}
.pd-progress .sp-item-desc {
  font-family: ClarinsRegular, Clarins, "Microsoft JhengHei", SimHei, Arial, sans-serif !important;
  font-size: 16px;
  line-height: 1.4;
  color: #000;
  margin: 10px auto;
}

.progress-tnc {
  text-align: center;
  padding: 10px 0px 30px;
}
.progress-tnc div {
  display: block;
  font-family: ClarinsRegular, Clarins, "Microsoft JhengHei", SimHei, Arial, sans-serif !important;
  font-size: 12px;
  text-align: center;
  color: #fa9db0 !important;
}

/* Section 03 form */
.sec03 {
  padding: 70px 0px;
  background: url("../img/sec03_bg.jpg") 70% center no-repeat;
  background-size: cover;
}
@media only screen and (max-width: 767px) {
  .sec03 {
    background: rgba(252, 208, 215, 0);
    background: -moz-linear-gradient(top, rgba(252, 208, 215, 0) 0%, rgba(252, 208, 215, 0) 66%, #fcd0d7 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(252, 208, 215, 0)), color-stop(66%, rgba(252, 208, 215, 0)), color-stop(100%, #fcd0d7));
    background: -webkit-linear-gradient(top, rgba(252, 208, 215, 0) 0%, rgba(252, 208, 215, 0) 66%, #fcd0d7 100%);
    background: -o-linear-gradient(top, rgba(252, 208, 215, 0) 0%, rgba(252, 208, 215, 0) 66%, #fcd0d7 100%);
    background: -ms-linear-gradient(top, rgba(252, 208, 215, 0) 0%, rgba(252, 208, 215, 0) 66%, #fcd0d7 100%);
    background: linear-gradient(to bottom, rgba(252, 208, 215, 0) 0%, rgba(252, 208, 215, 0) 66%, #fcd0d7 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#fcd0d7", endColorstr="#fcd0d7", GradientType=0 );
  }
}

.regi-form {
  max-width: 90%;
  margin: 0 auto;
}
.regi-form .form-tit {
  font-family: ClarinsRegular, Clarins, "Microsoft JhengHei", SimHei, Arial, sans-serif !important;
  font-size: 26px;
  color: #be0f34;
  line-height: 1.4;
  font-weight: bold;
  text-align: left;
  margin-bottom: 10px;
}
.regi-form .form-tit span {
  display: block;
  font-size: 18px;
  color: #000;
  line-height: 1.4;
  font-weight: normal;
}
.regi-form iframe {
  width: 100%;
  height: 500px;
}

.btm {
  visibility: hidden;
  height: 700px;
}
@media only screen and (max-width: 767px) {
  .btm {
    visibility: visible;
    display: block;
    height: auto;
  }
}
.btm__btn {
  position: absolute;
  transform: translate(-50%, -50%);
  bottom: -10px;
  left: calc(100vw - 80vw);
}
@media only screen and (max-width: 767px) {
  .btm__btn {
    bottom: 10px;
    left: 50%;
  }
}
@media only screen and (max-width: 480px) {
  .btm__btn {
    transform: translate(-50%, 0);
  }
}

.floating-bar {
  position: fixed;
  z-index: 3;
  top: 50%;
  right: -1px;
  border: 1px solid #fa9db0;
  background: #fff;
}
.floating-bar > div {
  font-family: "clarinsita", "Microsoft JhengHei", SimHei, Arial, sans-serif !important;
  font-size: 15px;
  color: #be0f34;
  line-height: 1.2;
  text-align: center;
}
.floating-bar a {
  display: inline-block;
  min-width: auto;
}
@media only screen and (max-width: 767px) {
  .floating-bar {
    width: 20%;
  }
}
@media only screen and (max-width: 480px) {
  .floating-bar {
    width: 30%;
  }
}

/* section 04*/
.sec04__product {
  display: flex;
  justify-content: flex-end;
}
.sec04__product .whitening-intro {
  margin: 0 20px 0 0;
}
.sec04__product .whitening-intro .int-desc {
  text-align: right;
  font-size: 30px;
}
@media only screen and (max-width: 767px) {
  .sec04__product .whitening-intro .int-desc {
    font-size: 18px;
  }
}
.sec04__product > img {
  margin: 0;
}

/* Deco item */
.deco-item {
  position: absolute;
  z-index: 1;
  width: 140px;
  height: 190px;
  left: 50%;
  background: url("../img/deco01.png");
  background-size: 100% 100%;
}
.deco-item.deco01 {
  top: 600px;
  margin-left: -960px;
}
.deco-item.deco02 {
  width: 180px;
  height: 150px;
  top: 950px;
  margin-left: 820px;
  background: url("../img/deco02.png");
  background-size: 100% 100%;
}
.deco-item.deco03 {
  top: 1700px;
  margin-left: -900px;
}
.deco-item.deco04 {
  width: 180px;
  height: 150px;
  top: 2100px;
  margin-left: -980px;
  background: url("../img/deco02.png");
  background-size: 100% 100%;
}
.deco-item.deco05 {
  top: 1530px;
  margin-left: 700px;
}
.deco-item.deco06 {
  top: 2050px;
  margin-left: 880px;
  background: url("../img/deco03.png");
  background-size: 100% 100%;
}

/** Start of Common **/
.page-wrapper {
  max-width: 1920px;
  margin: 0 auto;
  overflow: hidden;
}
.page-wrapper__content {
  max-width: 1250px;
  margin: 0 auto;
}

/** End of Common **/
/** Start of Components **/
/** Start of Main Title **/
.main-title {
  position: absolute;
  transform: translate(0, -50%);
  top: 50%;
  right: 15%;
}
.main-title__text {
  font-family: "ClarinsRegular", "Clarins", "Microsoft Jhenghei";
  font-size: 80px;
  line-height: 0.8;
  color: #be0f34;
}
.main-title__text span {
  font-size: 41px;
}
.main-title__buttons {
  margin-top: 40px;
}
.main-title__buttons .btn-clr {
  margin: 10px auto;
}
@media only screen and (max-width: 1200px) {
  .main-title__text {
    font-size: 60px;
  }
  .main-title__text span {
    font-size: 31px;
  }
}
@media only screen and (max-width: 979px) {
  .main-title {
    right: 10%;
  }
  .main-title__text {
    font-size: 50px;
  }
  .main-title__text span {
    font-size: 26px;
  }
}
@media only screen and (max-width: 767px) {
  .main-title__text {
    font-size: 35px;
  }
  .main-title__text span {
    font-size: 18px;
  }
  .main-title__buttons {
    margin-top: 20px;
  }
}
@media only screen and (max-width: 480px) {
  .main-title {
    right: 2%;
  }
  .main-title__text {
    font-size: 30px;
  }
  .main-title__text span {
    font-size: 16px;
  }
}

/** End of Main Title **/
.prod-img {
  margin: 0 auto;
}
@media only screen and (max-width: 767px) {
  .prod-img__01 {
    margin-top: 20px;
    width: 60%;
  }
}
.prod-img__02 {
  width: 15%;
}
@media only screen and (max-width: 767px) {
  .prod-img__02 {
    margin-top: 20px;
    width: 10%;
  }
}

/** End of Components **/
/** Start of Section **/
.section {
  position: relative;
  z-index: 1;
  padding: 30px 0;
}

/** End of Section **/
/** Start of Grid **/
.col-8 {
  width: 66.666667%;
}

.col-7 {
  width: 58.333333%;
}

.col-6 {
  width: 50%;
}

.col-5 {
  width: 41.666667%;
}

.col-4 {
  width: 33.3%;
}

@media only screen and (max-width: 767px) {
  .col-md {
    width: 100%;
  }
}
.flex-container {
  display: flex;
  flex-wrap: wrap;
}
.flex--width-less {
  width: 95%;
  margin: 0 auto;
}
.flex--reverse {
  flex-direction: row-reverse;
}
.flex--align-center {
  align-items: center;
}
@media only screen and (max-width: 1200px) {
  .flex--width-less {
    width: 95%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 767px) {
  .flex--width-less {
    width: 90%;
    margin: 0 auto;
  }
  .flex__md--column {
    flex-direction: column;
  }
  .flex__md--column-reverse {
    flex-direction: column-reverse;
  }
}

/** End of Grid **/
/* Responsive */
/* thank you*/
.thanks-msg {
  font-family: ClarinsRegular, Clarins, "Microsoft JhengHei", SimHei, Arial, sans-serif !important;
  font-size: 38px;
  text-align: center;
  color: #be0f34;
}
.thanks-msg span {
  margin: 20px auto;
  display: block;
  font-size: 18px;
  color: #000;
}

.thankyou .mainvisual {
  background: url("../img/mainvisual-thankyou.jpg") center top no-repeat;
}
.thankyou .mainvisual .maintit {
  top: 130px;
  margin-left: 30px;
}
.thankyou .whole-product {
  position: relative;
  width: 580px;
  max-width: 70%;
  height: 490px;
  padding-top: 40px;
  left: 50%;
  margin-left: -620px;
}
@media only screen and (max-width: 1100px) {
  .thankyou .whole-product {
    margin-left: -600px;
  }
}

/* Animation */
@-webkit-keyframes bubble {
  from {
    -webkit-transform: rotate3d(0, 0, 1, -20deg);
    transform: rotate3d(0, 0, 1, -20deg);
  }
  50% {
    -webkit-transform: rotate3d(0, 0, 1, 20deg);
    transform: rotate3d(0, 0, 1, 20deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 1, -20deg);
    transform: rotate3d(0, 0, 1, -20deg);
  }
}
@keyframes bubble {
  from {
    -webkit-transform: rotate3d(0, 0, 1, -20deg);
    transform: rotate3d(0, 0, 1, -20deg);
  }
  50% {
    -webkit-transform: rotate3d(0, 0, 1, 20deg);
    transform: rotate3d(0, 0, 1, 20deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 1, -20deg);
    transform: rotate3d(0, 0, 1, -20deg);
  }
}
/* Contents */
@media only screen and (max-width: 979px) {
  .link-shop {
    display: block;
    font-family: "clarinsita", "Microsoft JhengHei", SimHei, Arial, sans-serif !important;
    font-size: 18px;
    color: #fff !important;
    padding: 7px 0px;
    line-height: 1;
    text-decoration: none;
  }
}
@media only screen and (max-width: 979px) {
  .wrap.whitening2019 {
    max-width: 100%;
    min-width: 300px;
    margin: 0 auto;
    overflow: hidden;
  }

  .mainvisual {
    position: relative;
    height: 380px;
    min-width: 300px;
    background: url("../img/mainvisual.jpg") center top no-repeat;
    background-size: auto 100%;
  }
  .mainvisual .maintit {
    position: absolute;
    left: 60%;
  }
  .mainvisual .maintit .tit01 {
    font-size: 46px;
    margin-bottom: 10px;
  }
  .mainvisual .maintit .tit02 {
    font-size: 26px;
    margin-bottom: 20px;
  }

  .con-half:after {
    content: "";
    clear: both;
    display: block;
  }
  .con-half.br-tab > div {
    float: none;
    clear: both;
    width: 100%;
  }

  /* thank you*/
}
@media only screen and (max-width: 979px) and (max-width: 767px) {
  .con-half > div {
    float: none;
    clear: both;
    width: 100%;
  }
}
@media only screen and (max-width: 979px) {
  .view-movie img {
    width: 400px;
  }
}
@media only screen and (max-width: 979px) {
  .whitening-special {
    max-width: 600px;
    margin: 0px auto;
  }
}
@media only screen and (max-width: 979px) {
  .whole-product {
    width: 580px;
    height: 380px;
    max-width: 70%;
    margin-left: -100px;
  }
  .whole-product img {
    max-height: 100%;
  }
  .whole-product .pd-name-circle {
    top: 160px;
    left: 50%;
    margin-left: 90px;
  }
  .whole-product .pd-name-circle:before {
    content: "";
    display: block;
    position: absolute;
    top: -110px;
    left: -50px;
    width: 260px;
    height: 260px;
    background: url("../img/whole-pd-circle.png");
    background-size: 100% 100%;
  }
}
@media only screen and (max-width: 979px) {
  .pd-progress {
    padding: 30px 0px;
  }
  .pd-progress .load-progress {
    position: relative;
    -ms-transform: scale(0.8, 0.8);
    -webkit-transform: scale(0.8, 0.8);
    transform: scale(0.8, 0.8);
    margin-bottom: -10px;
  }
  .pd-progress .progress-tit {
    margin-bottom: 0px;
  }
}
@media only screen and (max-width: 979px) {
  .btm {
    top: 50px;
    width: 500px;
  }
}
@media only screen and (max-width: 979px) {
  .thanks-msg {
    margin-left: 40px;
    font-size: 24px;
  }
  .thanks-msg span {
    margin: 10px auto;
    font-size: 14px;
  }
}
@media only screen and (max-width: 979px) {
  .thankyou .mainvisual {
    background: url("../img/mainvisual-thankyou.jpg") 75% top no-repeat;
  }
  .thankyou .mainvisual .maintit {
    top: 130px;
    margin-left: 30px;
  }
  .thankyou .whole-product {
    position: relative;
    width: 580px;
    max-width: 70%;
    height: 350px;
    padding-top: 30px;
    left: 50%;
    margin-left: -500px;
  }
}
@media only screen and (max-width: 767px) {
  #lim_mini {
    bottom: 40px !important;
    left: 10px !important;
  }

  .inTheMiddle {
    display: none !important;
  }

  .mainvisual {
    height: inherit;
    width: 100%;
    background: none;
  }
  .mainvisual .maintit {
    margin-left: 0;
    left: 60%;
    text-align: center;
  }
  .mainvisual .maintit .tit01 {
    font-size: 25px;
  }
  .mainvisual .maintit .tit02 {
    font-size: 18px;
  }
  .mainvisual .maintit a {
    display: block;
    margin: 0 auto;
    max-width: 100px;
    min-width: 50px;
  }
  .mainvisual .maintit a:nth-child(2) {
    display: none;
  }

  .sec01 {
    padding: 20px 0px;
  }

  .whitening-special {
    margin: 20px auto 10px;
  }
  .whitening-special .sp-item {
    max-width: 100%;
  }
  .whitening-special .sp-item.add-plus > div + div:before {
    position: absolute;
    top: 30px;
    left: -30px;
    font-size: 80px;
  }
  .whitening-special .sp-item > div {
    float: left;
    max-width: 300px;
    width: 48%;
    margin: 0% 1%;
  }
  .whitening-special .sp-item .sp-item-img {
    padding-left: 30px;
    padding-top: 30px;
  }
  .whitening-special .sp-item .sp-item-img img {
    height: 140px;
  }
  .whitening-special .sp-item .sp-item-img .img-tit {
    position: absolute;
    z-index: 0;
    top: 0px;
    left: 10px;
    width: 100px;
    height: 100px;
    border-radius: 100px;
  }
  .whitening-special .sp-item .sp-item-img .img-tit > div {
    margin-top: 16px;
    font-size: 16px;
  }
  .whitening-special .sp-item .sp-item-img .img-tit > div:before {
    content: "";
    display: block;
    width: 15px;
    height: 10px;
    margin: 0 auto;
    background: url("../img/quote.png");
    background-size: 100% 100%;
  }
  .whitening-special .sp-item .progress-tit {
    margin-bottom: 0px;
  }

  .progress-item {
    max-width: 230px;
  }
  .progress-item.p-item01 {
    margin: 0 auto;
  }
  .progress-item.p-item02 {
    margin: 0 auto;
  }

  /* Section 02 */
  .sec02 {
    /*background:url('../img/bg-sec02-m.jpg') center center no-repeat;*/
    background-size: cover;
    max-width: 100%;
    margin: 20px auto;
  }
  /* thank you*/
}
@media only screen and (max-width: 767px) and (max-width: 767px) {
  .sec02__mb-top {
    margin-top: 20px;
  }
}
@media only screen and (max-width: 767px) {
  .whole-product {
    position: relative;
    max-width: 100%;
    height: inherit;
    background: none;
    margin-left: 0px;
  }
  .whole-product img {
    padding-top: 75px;
    padding-bottom: 250px;
    width: auto;
  }
  .whole-product .pd-name-circle {
    position: absolute;
    z-index: 0;
    top: -40px;
    width: 200px;
    left: 50%;
    margin-left: -100px;
  }
  .whole-product .pd-name-circle:before {
    display: none;
  }
}
@media only screen and (max-width: 767px) {
  .sec03 {
    padding: 20px 0px;
  }
}
@media only screen and (max-width: 767px) and (max-width: 767px) {
  .sec03 {
    padding: 20px 0px 0;
  }
}
@media only screen and (max-width: 767px) {
  .btm {
    position: relative;
    top: inherit;
    left: 0px;
    width: 100%;
  }
}
@media only screen and (max-width: 767px) {
  .pd-progress {
    background: none;
  }
  .pd-progress .progress-tit {
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 0px;
  }
  .pd-progress .sp-item-desc {
    font-size: 14px;
    line-height: 1.4;
    color: #000;
    margin: 10px auto;
  }
}
@media only screen and (max-width: 767px) {
  .progress-tnc div {
    font-size: 11px;
  }
}
@media only screen and (max-width: 767px) {
  .thanks-msg {
    margin-left: 0px;
    font-size: 24px;
  }
  .thanks-msg span {
    margin: 10px auto;
    font-size: 14px;
  }
}
@media only screen and (max-width: 767px) {
  .thankyou .mainvisual {
    background: #fff2f4;
    background: -moz-linear-gradient(top, #fff2f4 0%, #fff2f4 30%, #ffd4db 95%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, #fff2f4), color-stop(30%, #fff2f4), color-stop(95%, #ffd4db));
    background: -webkit-linear-gradient(top, #fff2f4 0%, #fff2f4 30%, #ffd4db 95%);
    background: -o-linear-gradient(top, #fff2f4 0%, #fff2f4 30%, #ffd4db 95%);
    background: -ms-linear-gradient(top, #fff2f4 0%, #fff2f4 30%, #ffd4db 95%);
    background: linear-gradient(to bottom, #fff2f4 0%, #fff2f4 30%, #ffd4db 95%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#fff2f4", endColorstr="#ffd4db", GradientType=0 );
    background-size: auto 100%;
    height: inherit;
    border-bottom: 1px solid transparent;
  }
  .thankyou .mainvisual .maintit {
    position: relative;
    left: inherit;
    width: 100%;
    text-align: center;
    top: inherit;
    margin: 10px auto 20px;
  }
  .thankyou .whole-product {
    position: relative;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    height: initial;
    padding-top: 0px;
    left: 0%;
  }
  .thankyou .whole-product .pd-name-circle {
    display: none;
    top: -10px;
  }
  .thankyou .whole-product img {
    padding: 0px;
  }
  .thankyou .mainvisual .maintit a:nth-child(2) {
    display: block !important;
  }
}

/*# sourceMappingURL=whitening2019.css.map */