/* makeup2018.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 !important;
}

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

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

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

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

/* Reset */
ul, li {
  padding: 0px;
  margin: 0px;
}

.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;
  }
}

.br1100 {
  display: block !important;
}

.view1100 {
  display: none !important;
}

@media only screen and (max-width: 1100px) {
  .br1100 {
    display: none !important;
  }
  .view1100 {
    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;
  }
}

.br424 {
  display: block !important;
}

.view424 {
  display: none !important;
}

@media only screen and (max-width: 424px) {
  .br424 {
    display: none !important;
  }
  .view424 {
    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;
  min-width: 300px;
}

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

.wrap.makeup2018 {
  overflow: hidden;
  min-width: 300px;
  background-size: 100% auto;
}

.wrap.makeup2018 img {
  max-width: 100%;
}

.wrap.makeup2018 section {
  position: relative;
  margin: 20px auto 0px;
  max-width: 1200px;
}

.wrap.makeup2018 .mainvisual {
  width: 100%;
  max-width: 960px;
  margin: 0 auto 30px;
}

.wrap.makeup2018 section#video-ds-effect {
  margin: 120px auto 50px;
}

@media only screen and (max-width: 1023px) {
  .wrap.makeup2018 section#video-ds-effect {
    margin: 50px auto 30px;
  }
}

.btn-clr {
  display: inline-block;
  background: #be0f34;
  color: #fff;
  font-family: "Gotham", "Gotham Medium", Arial, "Microsoft Jhenghei", serif, sans-serif !important;
  font-size: 18px;
  line-height: 0.6;
  padding: 0px 30px;
  width: 100px;
  height: 35px;
  line-height: 37px;
  margin: 0 5px;
  text-align: center;
  text-decoration: none;
}

@media only screen and (max-width: 1023px) {
  .btn-clr {
    font-size: 16px;
  }
}

@media only screen and (max-width: 767px) {
  .btn-clr {
    font-size: 14px;
  }
}

.btn-clr:hover {
  color: #fff;
}

.clr-cont {
  position: relative;
  z-index: 2;
  max-width: 98%;
  margin: 0 auto;
}

.sec-tit {
  text-align: left;
}

.sec-tit span {
  position: relative;
  display: inline-block;
  font-family: "clarinsreg", "Microsoft JhengHei", SimHei, Arial, sans-serif !important;
  font-size: 28px;
  line-height: 1.2;
  color: #7ea18d;
  margin-bottom: 15px;
}

.sec-tit span:before, .sec-tit span:after {
  content: "";
  position: absolute;
  top: 3px;
  display: none;
  width: 2000px;
  height: 26px;
}

.sec-tit span i {
  display: inline-block;
  vertical-align: text-bottom;
  margin-top: -40px;
}

@media only screen and (max-width: 1023px) {
  .sec-tit span i img {
    width: 60px;
  }
}

.sec-tit span:before {
  left: -2020px;
  content: "";
  background: url("../img/line.png") right top;
}

.sec-tit span:after {
  right: -2020px;
  content: "";
  background: url("../img/line.png") left top;
}

@media only screen and (max-width: 1023px) {
  .sec-tit span {
    font-size: 24px;
    margin-bottom: 20px;
  }
}

@media only screen and (max-width: 767px) {
  .sec-tit span {
    font-size: 20px;
    margin-bottom: 10px;
  }
}

.sec-desc {
  font-family: "clarinsreg", "Microsoft JhengHei", SimHei, Arial, sans-serif !important;
  font-size: 22px;
  line-height: 1.6;
  color: #000;
  text-align: center;
  margin: 10px auto 20px;
  max-width: 98%;
}

@media only screen and (max-width: 1023px) {
  .sec-desc {
    font-size: 18px;
  }
}

@media only screen and (max-width: 767px) {
  .sec-desc {
    font-size: 16px;
  }
}

.sub-desc {
  max-width: 80%;
  padding-left: 100px;
  margin: 0px;
  margin-bottom: 20px;
}

@media only screen and (max-width: 1023px) {
  .sub-desc {
    padding-left: 60px;
  }
}

@media only screen and (max-width: 767px) {
  .sub-desc {
    margin-bottom: 10px;
  }
}

.sec-cont {
  display: block;
  position: relative;
}

.sec-cont:after {
  content: "";
  clear: both;
  display: block;
}

.inner-cont {
  max-width: 1180px;
  margin: 0 auto;
}

.inner-cont:after {
  content: "";
  clear: both;
  display: block;
}

.tal {
  text-align: left;
}

.tac {
  text-align: center;
}

/* Content */
.mainvisual {
  position: relative;
  background: none;
  background-size: 100% auto;
  height: 420px;
}

.mainvisual .maintext {
  position: relative;
  z-index: 2;
  width: 50%;
  padding: 135px 0px 0px 5%;
}

.mainvisual .maintext > div {
  width: 100%;
  text-align: center;
}

.mainvisual .maintext h2 {
  display: inline-block;
  font-family: "clarinsreg", "Microsoft JhengHei", SimHei, Arial, sans-serif !important;
  font-size: 40px;
  font-weight: bold;
  text-align: center;
  line-height: 1.2;
  padding: 0px;
  margin: 0px;
}

.mainvisual .btn-area {
  margin: 15px auto;
}

.mainvisual .img-pd {
  position: absolute;
  z-index: 1;
  bottom: -0px;
  left: 60%;
}

.mainvisual .deco-oil {
  position: absolute;
  z-index: 0;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}

.mainvisual .deco-oil > div {
  position: relative;
  width: 100%;
  height: 100%;
}

.mainvisual .deco-oil .dc-oil {
  position: absolute;
}

.mainvisual .deco-oil .dc-oil.oil01 {
  top: -60px;
  right: 20px;
  width: 220px;
  height: 220px;
  background: url("../img/deco01.png");
  background-size: 100% 100%;
}

.mainvisual .deco-oil .dc-oil.oil02 {
  top: 250px;
  right: 38%;
  width: 180px;
  height: 180px;
  background: url("../img/deco02.png");
  background-size: 100% 100%;
}

.mainvisual .deco-oil .dc-oil.oil03 {
  top: 3%;
  left: 1%;
  width: 130px;
  height: 130px;
  background: url("../img/deco03.png");
  background-size: 100% 100%;
}

.mainvisual .deco-oil .dc-oil.oil04 {
  top: 40%;
  left: 50%;
  width: 110px;
  height: 200px;
  background: url("../img/oil_blue.png");
  background-size: 100% 100%;
}

.mainvisual .deco-oil .dc-oil.oil05 {
  top: 10%;
  right: 0%;
  width: 110px;
  height: 200px;
  background: url("../img/oil_pink.png");
  background-size: 100% 100%;
}

.mainvisual .deco-oil .dc-oil.oil06 {
  top: 10%;
  left: -2%;
  width: 110px;
  height: 200px;
  background: url("../img/oil_yellow.png");
  background-size: 100% 100%;
}

.mainvisual .deco-oil .dc-oil.oil07 {
  top: 60%;
  right: -15%;
  width: 140px;
  height: 140px;
  background: url("../img/deco07.png");
  background-size: 100% 100%;
}

.mainvisual .deco-oil .dc-oil.oil08 {
  top: -12%;
  right: 53%;
  width: 140px;
  height: 140px;
  background: url("../img/deco08.png");
  background-size: 100% 100%;
}

.mainvisual .deco-oil .dc-oil.oil09 {
  top: 60%;
  left: -4%;
  width: 140px;
  height: 140px;
  background: url("../img/deco09.png");
  background-size: 100% 100%;
}

.mainvisual .deco-oil .dc-oil.oil10 {
  top: 20%;
  left: -23%;
  width: 140px;
  height: 140px;
  background: url("../img/deco10.png");
  background-size: 100% 100%;
}

@media only screen and (max-width: 1023px) {
  .mainvisual {
    position: relative;
    height: 320px;
  }
  .mainvisual .maintext {
    position: relative;
    z-index: 2;
    width: 50%;
    padding: 105px 0px 0px 5%;
  }
  .mainvisual .maintext > div {
    width: 100%;
    text-align: center;
  }
  .mainvisual .maintext h2 {
    font-size: 30px;
  }
  .mainvisual .btn-area {
    margin: 10px auto;
  }
  .mainvisual .img-pd {
    left: 65%;
  }
  .mainvisual .img-pd img {
    width: 160px;
  }
  .mainvisual .deco-oil .dc-oil.oil01 {
    top: -80px;
    right: 0px;
    width: 200px;
    height: 200px;
  }
  .mainvisual .deco-oil .dc-oil.oil02 {
    top: 220px;
    right: 38%;
    width: 120px;
    height: 120px;
  }
  .mainvisual .deco-oil .dc-oil.oil03 {
    top: 3%;
    left: 1%;
    width: 90px;
    height: 90px;
  }
  .mainvisual .deco-oil .dc-oil.oil04 {
    top: 55%;
    left: 55%;
    width: 60px;
    height: 109px;
  }
  .mainvisual .deco-oil .dc-oil.oil05 {
    top: 10%;
    right: 5%;
    width: 60px;
    height: 109px;
  }
  .mainvisual .deco-oil .dc-oil.oil06 {
    top: 15%;
    left: 1%;
    width: 60px;
    height: 109px;
  }
  .mainvisual .deco-oil .dc-oil.oil07 {
    top: 60%;
    right: -2%;
    width: 100px;
    height: 100px;
  }
  .mainvisual .deco-oil .dc-oil.oil08 {
    top: -12%;
    right: 53%;
    width: 100px;
    height: 100px;
  }
  .mainvisual .deco-oil .dc-oil.oil09 {
    top: 60%;
    left: -4%;
    width: 100px;
    height: 100px;
  }
  .mainvisual .deco-oil .dc-oil.oil10 {
    top: 20%;
    left: -23%;
    width: 100px;
    height: 100px;
  }
}

@media only screen and (max-width: 767px) {
  .mainvisual {
    background: none;
    background-size: 767px  auto;
    position: relative;
    height: inherit;
  }
}

@media only screen and (max-width: 767px) and (max-width: 424px) {
  .mainvisual {
    background-size: 720px  auto;
  }
}

@media only screen and (max-width: 767px) and (max-width: 374px) {
  .mainvisual {
    background-size: 700px  auto;
  }
}

@media only screen and (max-width: 767px) {
  .mainvisual .maintext {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 0px 0px 0px 0%;
  }
  .mainvisual .maintext > div {
    width: 100%;
    text-align: center;
  }
  .mainvisual .maintext h2 {
    font-size: 7.5vw;
    font-weight: bold;
    line-height: 1.2;
    margin: 15px auto;
  }
  .mainvisual .btn-area {
    margin: 15px auto;
  }
  .mainvisual .btn-area a {
    margin-bottom: 15px;
  }
  .mainvisual .img-pd {
    position: relative;
    left: inherit;
    top: inherit;
    right: inherit;
    bottom: inherit;
    margin-top: 20px;
  }
  .mainvisual .img-pd img {
    width: 180px;
  }
  .mainvisual .deco-oil .dc-oil.oil01 {
    top: -60px;
    right: -30px;
    width: 200px;
    height: 200px;
  }
  .mainvisual .deco-oil .dc-oil.oil02 {
    top: 150px;
    right: 78%;
    width: 120px;
    height: 120px;
  }
  .mainvisual .deco-oil .dc-oil.oil03 {
    top: 3%;
    left: 1%;
    width: 90px;
    height: 90px;
  }
  .mainvisual .deco-oil .dc-oil.oil04 {
    top: -5%;
    left: 5%;
    width: 60px;
    height: 109px;
  }
  .mainvisual .deco-oil .dc-oil.oil05 {
    top: 10%;
    right: 1%;
    width: 60px;
    height: 109px;
  }
  .mainvisual .deco-oil .dc-oil.oil06 {
    top: 35%;
    left: 2%;
    width: 60px;
    height: 109px;
  }
  .mainvisual .deco-oil .dc-oil.oil07 {
    top: 40%;
    right: -2%;
    width: 100px;
    height: 100px;
  }
  .mainvisual .deco-oil .dc-oil.oil08 {
    top: -12%;
    right: 58%;
    width: 100px;
    height: 100px;
  }
  .mainvisual .deco-oil .dc-oil.oil09 {
    top: 53%;
    left: -15%;
    width: 100px;
    height: 100px;
  }
  .mainvisual .deco-oil .dc-oil.oil10 {
    top: 20%;
    left: -23%;
    width: 100px;
    height: 100px;
  }
}

.clr-cont {
  position: relative;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-line-pack: stretch;
      align-content: stretch;
}

.clr-cont > div {
  position: relative;
}

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

.clr-cont.order-change > div:nth-child(1) {
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
}

.clr-cont.order-change > div:nth-child(2) {
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
}

@media only screen and (max-width: 767px) {
  .clr-cont.order-change > div:nth-child(1) {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
  .clr-cont.order-change > div:nth-child(2) {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
  }
}

.clr-cont.cont-col2 > div {
  width: 50%;
  min-height: 1px;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
  -ms-flex-item-align: start;
      align-self: flex-start;
}

@media only screen and (max-width: 767px) {
  .clr-cont.cont-col2 > div {
    display: block;
    width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
}

.clr-cont > div {
  position: relative;
  width: 100%;
  min-height: 1px;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
  -ms-flex-item-align: start;
      align-self: flex-start;
}

.clr-cont > div.cont-v-mid {
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
}

@media only screen and (max-width: 767px) {
  .clr-cont > div.cont-v-mid {
    border: 1px solid transparent;
  }
}

@media only screen and (max-width: 767px) {
  .clr-cont > div {
    display: block !important;
  }
}

.txt-box {
  text-align: center;
}

.txt-box .sec-tit {
  font-family: "clarinsreg", "Microsoft JhengHei", SimHei, Arial, sans-serif !important;
  font-size: 32px;
  color: #be0f34;
  text-align: center;
  font-weight: bold;
}

.txt-box .sec-desc {
  font-family: "clarinsreg", "Microsoft JhengHei", SimHei, Arial, sans-serif !important;
  font-size: 18px;
  line-height: 1.8;
  color: #000;
}

@media only screen and (max-width: 1023px) {
  .txt-box .sec-tit {
    font-size: 26px;
  }
  .txt-box .sec-desc {
    font-size: 16px;
  }
}

.form-wrap {
  position: relative;
  text-align: center;
  padding: 20px 0;
  background: white;
  background: -webkit-gradient(left top, left bottom, color-stop(0%, white), color-stop(100%, #f8eded));
  background: -webkit-gradient(linear, left top, left bottom, from(white), to(#f8eded));
  background: linear-gradient(to bottom, white 0%, #f8eded 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f8eded', GradientType=0 );
}

.form-wrap iframe {
  position: relative;
  display: block;
  width: 95%;
  border: none;
  height: 510px;
  max-width: 600px;
  margin: 0 auto;
}
/*# sourceMappingURL=makeup2018.css.map */