@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap');
  /* font-family: 'Noto Sans TC', sans-serif; */

/* all style */
  .loreal-compaign {
    position: relative;
    z-index: 1;
    margin: 0 auto;
    font-family: Arial, "微軟正黑體";
    max-width: 1000px;
    width: 100%;
    background: #e4ccc5;
  }
  .loreal-compaign img{
    width: 100%;
    display: block;
  }
  .loreal-compaign p{
    line-height: 1.3;
  }
  .loreal-compaign h2,
  .loreal-compaign h3,
  .loreal-compaign h4,
  .loreal-compaign h5{
    font-family: Arial, "微軟正黑體";
  }
  .loreal-compaign .font79px{
    font-size: 79px;
  }
  .loreal-compaign .pc {
    display: block !important;
  }
  .loreal-compaign .mb {
    display: none !important;
  }
  .loreal-compaign.kv .text{
    position: absolute;
    z-index: 8;
    width: 100%;
  }
  .loreal-compaign .text_shadow{
    text-shadow: 0 0 14px rgba(255,255,255,1) !important;
    position: absolute !important;
    z-index: -1 !important;
    left: 0 !important;
    top: 0 !important;
    text-align: center !important;
    width: 100% !important;
  }
  @media screen and (max-width: 1000px) {
    .loreal-compaign .font79px{
      font-size: 8vw;
    }
  }

/* 光點 */
  .shinye_product{
    overflow: hidden;
    position: relative;
  }
  .shinye_product .shinye_img{
    position: absolute;
    z-index: 5;
    width: 100%;
  }
  .shinye_product .shinye_img.shinye_img01 {
      width: 6%;
      left: 19%;
      top: 81%;
      -webkit-animation: boplight 1s infinite linear alternate;
      animation: boplight 1s infinite linear alternate;
  }
  .shinye_product .shinye_img.shinye_img02 {
      width: 12%;
      left: 39%;
      top: 56.5%;
      -webkit-animation: boplight2 1s infinite linear alternate;
      animation: boplight2 1s infinite linear alternate;
  }
  .shinye_product .shinye_img.shinye_img03 {
      width: 6%;
      right: 25.5%;
      bottom: 15.8%;
      -webkit-animation: boplight2 1s infinite linear alternate;
      animation: boplight2 1s infinite linear alternate;
  }
  @-webkit-keyframes boplight {
      0% {
          -webkit-transform: scale(1) rotate(-20deg);
          transform: scale(1) rotate(-20deg);
      }

      100% {
          -webkit-transform: scale(0.5) rotate(0deg);
          transform: scale(0.5) rotate(0deg);
      }
  }
  @keyframes boplight {
      0% {
          -webkit-transform: scale(1) rotate(-20deg);
          transform: scale(1) rotate(-20deg);
      }

      100% {
          -webkit-transform: scale(0.5) rotate(0deg);
          transform: scale(0.5) rotate(0deg);
      }
  }

  @-webkit-keyframes boplight2 {
      0% {
          -webkit-transform: scale(1) rotate(-20deg);
          transform: scale(1) rotate(-20deg);
      }

      100% {
          -webkit-transform: scale(0.5) rotate(-10deg);
          transform: scale(0.5) rotate(-10deg);
      }
  }
  @keyframes boplight2 {
      0% {
          -webkit-transform: scale(1) rotate(-20deg);
          transform: scale(1) rotate(-20deg);
      }

      100% {
          -webkit-transform: scale(0.5) rotate(-10deg);
          transform: scale(0.5) rotate(-10deg);
      }
  }

/* 掃光 */
  @keyframes shinye {
      0% {
          transform: translateX(-150%) skewX(-205deg);
          opacity: 1;
      }

      80% {
          transform: translateX(200%) skewX(-205deg);
          opacity: 1;
      }

      100% {
          transform: translateX(200%) skewX(-205deg);
          opacity: 0;
      }
  }

/* 動態效果調整與新增 */
  .zoom_in {
    -webkit-transition: all .7s ease;
    -o-transition: all .7s ease;
    -moz-transition: all .7s ease;
    transition: all .7s ease;
    -ms-transition: all .7s ease;
  }
  .fadeIn {
      -webkit-transition: all 1s ease;
      -o-transition: all 1s ease;
      -moz-transition: all 1s ease;
      transition: all 1s ease;
      -ms-transition: all 1s ease;
  }
  .fadeIn[data-emergence=hidden] {
    opacity: 0;
  }
  .fadeIn[data-emergence=visible] {
    opacity: 1;
  }

/* 縮小淡入 */
  @keyframes fadeIn-small {
    0% {
      opacity: 0;
      -webkit-transform: scale(1.2);
      transform: scale(1.2);
    }
    100% {
      opacity: 1;
      -webkit-transform: scale(1);
      transform: scale(1);
    }
  }
  @-webkit-keyframes fadeIn-small {
    0% {
      opacity: 0;
      -webkit-transform: scale(1.2);
      transform: scale(1.2);
    }
    100% {
      opacity: 1;
      -webkit-transform: scale(1);
      transform: scale(1);
    }
  }
  .fadeIn-small[data-emergence=hidden] {
      
  }
  .fadeIn-small[data-emergence=visible],
  [data-emergence=visible] .fadeIn-small {
      -webkit-animation: fadeIn-small 0.2s linear .2s forwards;
      animation: fadeIn-small 0.2s linear .2s forwards;
  }

/* 彈跳動畫 */
    @keyframes ld-breath {
        0% {
            -webkit-transform: scale(1);
            transform: scale(1);
        }
        5% {
            -webkit-transform: scale(1.1);
            transform: scale(1.1);
        }
        10% {
            -webkit-transform: scale(1);
            transform: scale(1);
        }
        15% {
            -webkit-transform: scale(1.1);
            transform: scale(1.1);
        }
        20% {
            -webkit-transform: scale(1);
            transform: scale(1);
        }
        100% {
            -webkit-transform: scale(1);
            transform: scale(1);
        }
    }
    @-webkit-keyframes ld-breath {
        0% {
            -webkit-transform: scale(1);
            transform: scale(1);
        }
        5% {
            -webkit-transform: scale(1.1);
            transform: scale(1.1);
        }
        10% {
            -webkit-transform: scale(1);
            transform: scale(1);
        }
        15% {
            -webkit-transform: scale(1.1);
            transform: scale(1.1);
        }
        20% {
            -webkit-transform: scale(1);
            transform: scale(1);
        }
        100% {
            -webkit-transform: scale(1);
            transform: scale(1);
        }
    }
    .ld-breath[data-emergence=hidden] {
        
    }
    .ld-breath[data-emergence=visible],
    [data-emergence=visible] .ld-breath {
        -webkit-animation: ld-breath 3s linear .2s infinite;
        animation: ld-breath 3s linear .2s infinite;
    }

/* KV */
  .loreal-compaign.kv{
    overflow: hidden;
  }
  /* section01 */
    /* .loreal-compaign.kv .section01{
      position: relative;
    } */
    .loreal-compaign.kv .section01 .text{
      position: absolute;
      z-index: 3;
      width: 100%;
      top: 2.5%;
      right: 15%;
      text-align: center;

      opacity: 0;
      -webkit-transform: scale(1.2);
      transform: scale(1.2);
    }
    .loreal-compaign.kv .section01 .text .logo{
      width: 30%;
      margin: 0 auto 2% auto;
    }
    .loreal-compaign.kv .section01 .text h2,
    .loreal-compaign.kv .section01 .text h2.text_shadow{
      font-size: 80.79px;
      font-weight: 500;
      font-family: 'Noto Sans TC', sans-serif;
      line-height: 1.2;
      position: relative;
      z-index: 2;
    }
    .loreal-compaign.kv .section01 .text h2 {
      /* background: #71031f -webkit-gradient(linear, left top, right top, from(#71031f), to(#71031f), color-stop(0.5, #a33c59)) 0 0 no-repeat; */
      background: #7fafd3 -webkit-gradient(linear, left top, right top, from(#7fafd3), to(#407db4), color-stop(0.5, #407db4)) 0 0 no-repeat;
      
      background-image: -webkit-linear-gradient(-45deg, transparent 0%, transparent 40%, #5d97bd 50%, #5d97bd 60%, #5d97bd 80%, transparent 100%);
      -webkit-background-size: 150px;
      color: rgba(255, 255, 255, 0);
      -webkit-background-clip: text;
      -webkit-animation-name: text_shine;
      -webkit-animation-duration: 3s;
      -webkit-animation-iteration-count: infinite;
      text-shadow: 0 0px 0px rgba(247, 187, 132, 0);
      padding-bottom: 5px;
      position: relative;
    }
    @-webkit-keyframes text_shine {
      0%, 10% {
        background-position: -1000px;
      }
      20% {
        background-position: top left;
      }
      90% {
        background-position: top right;
      }
      100% {
        background-position: 1000px;
      }
    }
    
    @media (max-width: 1000px) {
      .loreal-compaign.kv .section01 .text h2,
      .loreal-compaign.kv .section01 .text h2.text_shadow{
        font-size: 8.3vw;
      }
    }

  /* section02 */
    .loreal-compaign.kv .section02 .KV_slogn{
      position: absolute;
      z-index: 2;
      overflow: hidden;
      top: 30%;
      left: 0;
      width: 100%;

      /* 遮色片 */
        /* background: url('/on/demandware.static/-/Sites-lancome-tw-ng-Library/zh_TW/event-o2o-page/2023_VDay/images/KV_slogn.png') no-repeat top center;
        background-size: 100%;
        -webkit-mask: url('/on/demandware.static/-/Sites-lancome-tw-ng-Library/zh_TW/event-o2o-page/2023_VDay/images/KV_slogn.png') no-repeat top center;
        mask: url('/on/demandware.static/-/Sites-lancome-tw-ng-Library/zh_TW/event-o2o-page/2023_VDay/images/KV_slogn.png') no-repeat top center;
        -webkit-mask-size: 100%;
        mask-size: 100%; */
    }
    .loreal-compaign.kv .section02 .KV_slogn:before {
      content: '';
      background: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 25%, white 50%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0) 100%);
      background: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 25%, white 50%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0) 100%);
      background: linear-gradient(-45deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 25%, white 50%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0) 100%);
      position: absolute;
      top: -50%;
      left: 0;
      width: 100%;
      height: 300%;
      -webkit-transition: 1s;
      -o-transition: 1s;
      transition: 1s;
      -webkit-animation: shinye 5s ease infinite;
      animation: shinye 5s ease infinite;
    }

  /* kvBg */
    .loreal-compaign.kv .kvBg{
      position: relative;
      z-index: -1;
    }

  













/* 倒數計時 */
  /* title */
    .loreal-compaign.countdown h2{
      position: absolute;
      z-index: 1;
      left: 5%;
      top: 10%;
      color: #FFF;

      font-size: 86.28px;
      font-weight: bolder;
      font-family: Arial, "微軟正黑體";
      line-height: 1.2;
      text-shadow: 0 0 25px rgb(0 0 0 / 90%);
    }
    @media (max-width: 1000px) {
      .loreal-compaign.countdown h2{
        font-size: 8.7vw;
      }
    }
  /* coundown module */
    .main-example .time {
      border-radius: 0;
    }
    .main-example .count {
      background: url('../images/countdown_time_bg.jpg');
      background-size: 100% 100%;
    }
    .main-example .count.top {
      border-radius: 0;
    }
    .main-example .count.bottom {
      background: url('../images/countdown_time_bg.jpg');
      background-size: 100% 100%;
      border-radius: 0;
    }