@font-face {
  font-family: 'Avenir-Black';
  src: url('../../../fonts/Avenir/Avenir-Black.ttf') format('truetype');
}
@font-face {
  font-family: 'Avenir-BlackOblique';
  src: url('../../../fonts/Avenir/Avenir-BlackOblique.ttf') format('truetype');
}
@font-face {
  font-family: 'Avenir-Book';
  src: url('../../../fonts/Avenir/Avenir-Book.ttf') format('truetype');
}
@font-face {
  font-family: 'Avenir-BookOblique';
  src: url('../../../fonts/Avenir/Avenir-BookOblique.ttf') format('truetype');
}
@font-face {
  font-family: 'Avenir-Heavy';
  src: url('../../../fonts/Avenir/Avenir-Heavy.ttf') format('truetype');
}
@font-face {
  font-family: 'Avenir-HeavyOblique';
  src: url('../../../fonts/Avenir/Avenir-HeavyOblique.ttf') format('truetype');
}
@font-face {
  font-family: 'Avenir-Light';
  src: url('../../../fonts/Avenir/Avenir-Light.ttf') format('truetype');
}
@font-face {
  font-family: 'Avenir-LightOblique';
  src: url('../../../fonts/Avenir/Avenir-LightOblique.ttf') format('truetype');
}
@font-face {
  font-family: 'Avenir-Medium';
  src: url('../../../fonts/Avenir/Avenir-Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'Avenir-MediumOblique';
  src: url('../../../fonts/Avenir/Avenir-MediumOblique.ttf') format('truetype');
}
@font-face {
  font-family: 'Avenir-Oblique';
  src: url('../../../fonts/Avenir/Avenir-Oblique.ttf') format('truetype');
}
@font-face {
  font-family: 'Avenir-Roman';
  src: url('../../../fonts/Avenir/Avenir-Roman.ttf') format('truetype');
}


img {
  max-width: 100%;
}
.mobile{
  display: none;
}
body, html {
  height: 100%;
}
div {
  position: relative;
  display: block;
}
.biore-bs {
  position: relative;
}
.masthead img {
  width: 100%;
}
.masthead-text {
  position: absolute;
  left: 50%;
  top: 70%;
  transform: translate(-50%, -50%);
  z-index: 5;
  line-height: 1.5;
  text-align: center;
  width: 100%;
}
.masthead-title {
  font-family: Avenir-Black;
  font-size: 2.1vw;
  color: #3c4172;
}
.masthead-caption {
  font-family: Avenir-Roman;
  font-size: 2.2vw;
  color: #3c4172;
}
.fixed-masthead {
  position: fixed;
  top: 45px;
  width: 100%;
}
.biore-bs-body {
  padding: 0 18.75vw;
  background-color: transparent;
/*  background-image: 
    url(https://cimg.zettecdn.com/img/campaign/biore-bright-series/bg_top.png),
    url(https://cimg.zettecdn.com/img/campaign/biore-bright-series/bg_bottom.png);
  background-repeat: no-repeat;
  background-position: top left, right bottom 500px;*/
}
.fixed-masthead-body {
  margin-top: 992px !important;
}

#inner {
  transform: rotate(45deg);
  background-color: #3c4172;
  width: 60px;
  height: 60px;
  top: -40px;
  left: 10px;
  position: relative;
  border-radius: 11px;
}

#inner:after, #inner:before {
  content: " ";
  position: absolute;
  background-color: #a7cbf3;
  border-radius: 100%;
  z-index: 100;
}

#inner:before {
  height: 45px;
  width: 60px;
  bottom: -41px;
  left: 0;
}

#inner:after {
  height: 60px;
  width: 45px;
  bottom: 0;
  left: 56px;
}

#outer {
  position: absolute;
  top: 134.5%;
  left: 25%;
  width: 100px;
  height: 40px;
  overflow: hidden;
  z-index: 10;
  transform: translate(-50%, -50%);
}

.biore-bs-tab-list {
  display: flex;
  margin: 0 18.75vw;
  margin-top: -11vw;
  background: transparent;
}
.biore-bs-tab {
  text-align: center;
  width: 50%;
  padding: 20px 0;
  color: #ffffff;
  font-family: Avenir-Heavy;
  font-size: 18px;
  margin: 0 2px;
  cursor: pointer;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  position: relative;
  z-index: 3;
}
.tab2 {
  display: none;
}
#tab1 {
  background-color: #3c4172;
  margin-left: 6px;
}
#tab2 {
  background-color: #eca0be;
  margin-right: 6px;
}
#tab1:hover:after, #tab1:hover:before , #tab2:hover:after, #tab2:hover:before {
  content: " ";
  height: 10px;
  width: 100%;
  position: absolute;
  left: 0;
}
#tab1:hover:after, #tab2:hover:after {
  top: -5px;
  height: 20px;
  z-index: 1;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
#tab1:hover:before {
  background-color: #3c4172;
  bottom: -5px;
}
#tab1:hover:after {
  background-color: #3c4172;
}
#tab1:hover {
  bottom: 5px;
}
#tab2:hover:before {
  background-color: #eca0be;
  bottom: -5px;
}
#tab2:hover:after {
  background-color: #eca0be;
}
#tab2:hover {
  bottom: 5px;
}
.biore-bs-tab-active {
  
}

.biore-bs-video {
  background-color: #a7cbf3;
  padding-top: 60px;
}
.biore-bs-product {
  display: flex;
  padding: 0 4vw;
  padding-top: 4.25vw;
  padding-bottom: 1.5vw;
  background-color: #c6dff8;
}
.biore-bs-product-image, .biore-bs-product-desc {
  width: 50%;
  text-align: center;
}
.biore-bs-product-image {
  
}
.biore-bs-product-image img {
  padding-top: 25px;
  width: 70%;
}
.biore-bs-product-desc {
  
}
.biore-bs-product-desc p {
  text-align: left;
  font-family: Avenir-Roman;
  font-size: 1.05vw;
  color: #3c4172;
  line-height: 2;
}
.biore-bs-logo {
  padding-bottom: 40px;
  width: 66%;
}
.biore-bs-form {
  background-color: #a7cbf3;
}
.biore-bs-form-text {
  color: #3c4172;
  font-family: Avenir-Roman;
  line-height: 1.5;
  display: flex;
}
.biore-bs-form-text p {
  margin: 4vw 1.5vw;
}
.biore-bs-form-title {
  font-size: 2vw;
  width: 50%;
  text-align: right;
}
.biore-bs-form-desc {
  font-size: 1.05vw;
  width: 50%;
}
.biore-bs-form-data {
  padding: 0 4vw;
}
.biore-bs-form-row {
  display: flex;
  margin-bottom: 20px;
}
.biore-bs-form-col {
  width: 50%;
  margin: 0 4px;
}
.biore-bs-form-col input {
  font-family: Avenir-Roman;
  font-size: 1.05vw;
  color: #3c4172;
  padding: 10px 40px;
  width: calc(100% - 80px);
  border: none;
  background-color: #c6dff8;
  border-radius: 50px;
}
.biore-bs-form-col input::placeholder {
  color: #3c4172;
}
*:focus {
  outline: none;
  border: none;
}
.biore-bs-form-submit, .biore-bs-form-loadmore {
  text-align: center;
  padding: 20px 0;
}
.biore-bs-form-loadmore {
  padding-bottom: 0;
}
.biore-bs-form-submit button, #biore-bs-loadmore {
  border: none;
  border-radius: 50px;
  font-family: Avenir-Medium;
  font-size: 1.05vw;
  color: #ffffff;
  width: 277px;
  height: 53px;
  background-color: #2d3062;
  cursor: pointer;
}
.biore-bs-form-submit button:hover, #biore-bs-loadmore:hover {
  background-color: #41458f;
}
.biore-bs-product-info {
  
}
.biore-bs-next, .biore-bs-prev {
  position: absolute;
  z-index: 5;
  top: 50%;
  transform: translate(0, -50%);
  cursor: pointer;
  width: 3.1%;
}
.biore-bs-next {
  right: 5.65vw;
} 
.biore-bs-prev {
  left: 5.458vw;
}
.biore-bs-next:hover {
  content: url(https://cimg.zettecdn.com/img/campaign/biore-bright-series/next_h.png);
}
.biore-bs-prev:hover {
  content: url(https://cimg.zettecdn.com/img/campaign/biore-bright-series/prev_h.png);
}
.biore-bs-product-list {
  background-color: #a7cbf3;
  padding: 0 3.9vw;
  padding-left: 7.3vw;
  padding-top: 2vw;
}
.biore-bs-product-item {
  text-align: center;
  position: relative;
}
.biore-bs-product-item img {
  position: relative;
  width: 100%;
}
.biore-bs-product-item-desc {
  position: absolute;
  top: 50%;
  left: 68.5%;
  width: 40%;
  transform: translate(-50%, -50%);
  font-family: Avenir-Roman;
  font-size: 1vw;
  color: #ffffff;
  line-height: 1.5;
}
.biore-bs-product-name {
  font-size: 2vw;
  line-height: 1.2;
}
.biore-bs-product-subname {
  font-family: Avenir-Medium;
}
.slick-prev, .slick-next {
  opacity: 0;
}
.biore-bs-article {
  background-color: #c6dff8;
  display: flex;
}
.biore-bs-article-image {
  width: 45%;
}
.biore-bs-article-image img {
  height: 100%;
}
.biore-bs-article-text {
  width: 55%;
  color: #2d3062;
  line-height: 1.5;
  padding: 2.5vw;
}
.biore-bs-article-title {
  font-family: Avenir-Roman;
  font-size: 2vw;
  padding-bottom: 1vw;
  line-height: 1.2;
}
.biore-bs-article-desc {
  font-family: Avenir-Roman;
  font-size: 1vw;
  padding-bottom: 1.5vw;
}
.biore-bs-readmore {
  font-family: Avenir-Medium;
  font-size: 1vw;
  color: #ffffff;
  background-color: #2d3062;
  padding: 0.5vw 3vw;
  border-radius: 3vw;
}
.biore-bs-readmore:hover {
  background-color: #41458f;
}
.ig-feed-container {
  background-color: #a7cbf3;
  text-align: center;
}
.ig-feed-title {
  font-family: Avenir-Roman;
  font-size: 2vw;
  color: #3c4172;
  line-height: 1.2;
  padding-top: 100px;
}
.ig-feed {
  padding: 20px;
}
.ig-feed-item {
  display: inline-block;
  width: 25.5%;
  margin: 10px 2px;
  background-color: #ffffff;
  color: #3c4172 !important;
  padding: 2vw;
  margin-top: 6vw;
  position: relative;
}
.ig-feed-image {
  position: absolute;
  left: 50%;
  top: 12.5%;
  transform: translate(-50%, -50%);
  /*width: 80%;*/
  width: 15vw;
  height: 15vw;
  z-index: 5;
}
.ig-feed-text {
  padding-top: 10vw;
  padding-bottom: 1.2vw;
}
.ig-feed-text:hover, .ig-feed-username:hover, .ig-feed-caption:hover {
  transition: none !important;
  color: #3c4172 !important;
}
.ig-feed-username {
  font-size: 1.2vw;
  font-family: Avenir-Medium;
  padding: 1vw 0;
  color: #3c4172 !important;
}
.ig-feed-caption {
  font-size: 1.05vw;
  font-family: Avenir-Roman;
  text-align: left;
  line-height: 1.2;
  color: #3c4172 !important;
}

/* TNC =================================================================================== */
#agree {
  cursor: pointer;
}
.check-box{
  padding: 20px 0;
  text-align: center;
}
.tnc {
  vertical-align: top;
  -webkit-appearance: none;
  border: 1px solid #3c4172;
  background-color: white;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
  padding: 6px;
  border-radius: 3px;
  display: inline-block;
  position: relative;
}
.tnc:checked {
  background-color: #ffffff;
  border: 1px solid #021c66;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
}
.tnc:checked:after{
  content: '\2714';
  font-size: 10px;
  position: absolute;
  top: 0px;
  left: 2px;
  color: #3c4172;
}
.text-tnc:hover{
  color: #3c4172;
  text-decoration: underline;
}
.text-tnc,.text-tnc:hover{
  outline: none;
  vertical-align: middle;
}
.text-tnc{
  position: relative;
  top: 0.2vw;
  font-size: 1vw;
  font-family: 'Avenir-Book';
  color: #3c4172;
}
.tncTitle, .tandc-text{
  font-family: 'Avenir-Book';
}
.tncTitle{font-size: 18px;text-align: center;padding-bottom: 3%;}
.tandc-text{
  overflow-y: scroll;
  height: 310px;
  font-size: 14px;
  text-align: left;
}
#tnc, #success_popup, #failed_popup, #end_popup, #alert_popup, #next_popup{
  line-height: 22px;
  background: #fff;
  max-width: 630px;
  margin: 40px auto;
  padding: 25px;
  border-radius: 10px;
}
.tandc-text ul li{
  list-style-type: decimal;
  margin-left: 24px;
  margin-right: 3%;
  padding-left: 2%;
  text-align: justify;
}
.hastag_tnc, .link_tnc{
  font-family: 'Verlag-Bold';
}
.link_tnc:hover{
  color: blue;
  text-decoration: underline;
}
/* END TNC ================================================================================ */

/* SOSMED ================================================================================== */
.sosmed_title{
  padding-top: 100px;
  padding-bottom: 40px;
  color: #021c66;
  font-family: 'Avenir-Black';
  font-size: 45px;
  text-align: center;
}
.sosmed{
  padding: 4vw 0;
  text-align: center;
  background-color: #a7cbf3;
}
.sosmed-fb, .sosmed-twitter, .sosmed-ig, .sosmed-brand {
    width: auto;
    padding-right: 20px;
    padding-left: 20px;
    margin: 0;
    height: auto;
    display: inline-block;
    font-family: 'Avenir-Medium';
    font-size: 1.05vw;
    line-height: 1.5;
    color: #2d3062;
    border: none;
}
.sosmed-fb {
  border-right: 2px solid #2d3062;
}
.sosmed-fb:hover, .sosmed-twitter:hover, .sosmed-ig:hover, .sosmed-brand:hover {
	color: #ffffff;
    background-color: transparent;
    transition: none !important;
}
.sosmed-fb:hover .blue-circle, .sosmed-ig:hover .blue-circle {
    background-color: #ffffff;
}
.sosmed-fb:hover .fa, .sosmed-ig:hover .fa {
  background-color: #ffffff;
  color: #a7cbf3;
  border: 1px solid #a7cbf3;
}
.sosmed-brand {
  font-size: 1.5vw;
}
.fa{
  position: relative;
  background-color: #2d3062;
  color: #ffffff;
  padding: 3px;
  border-radius: 100%;
  width: 15px;
  height: 15px;
  border: 1px solid #ffffff;
  top: 1px;
}
.fa:before {
  position: relative;
}
.blue-circle {
  background-color: #2d3062;
  border-radius: 100%;
  padding: 3px 2px;
  margin-right: 5px;
}
.outer-circle, .inner-circle {
position:absolute;
border-radius: 100%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
cursor: pointer;
}

.outer-circle {
height: 60px;
width: 60px;
background-color: #2d3062;
}
.inner-circle {
height: 50px;
width: 50px;
background-color: #2d3062;
border: 2px solid #ffffff;
}

/* END SOSMED ================================================================================== */

*:focus {
  outline: 0;
  outline: none;
}

.ok-button-end,.ok-button-success,.ok-button-fail,.ok-button-tnc,.ok-button-alert,.ok-button-next{
  font-size: 16pt;
  width: 90px;
  height: 35px;
  font-family: JosefinSans-Regular;
  border-color: #040b29;
  border-width: 1px;
  border-style: solid;
  background-color: #040b29;
  color: #ffffff;
  border-radius: 20px;
  opacity: 0.9;
  cursor: pointer;
}
.ok-button-end:hover,.ok-button-success:hover,.ok-button-fail:hover,.ok-button-tnc:hover,.ok-button-alert:hover,.ok-button-next:hover{
  opacity: 1;
}


/* responsive */
@media(max-width: 768px){
  .wrapper_menu{
    display: none;
  }
  .desktop{
    display: none;
  }
  .mobile{
    display: block;
  }
  .main-wrapper {
    width: 100%;
  }
  #wrapper-navigation-bar, #wrapper-navigation-bar-revamp-hidden{
    display:none;
  }
  .formError{
    left: unset !important;
    right: 10px !important;
  }
  
  
  
}

@media(max-width: 414px){
  .biore-bs {
    padding-top: 40px;
  }
  .masthead-text {
    position: relative;
    transform: none;
    top: unset;
    left: unset;
    padding-bottom: 5vw;
  }
  .masthead-title, .masthead-caption {
    font-size: 7vw;
  }
  .biore-bs-body {
    padding: 0;
  }
  .biore-bs-tab-list {
    margin: 0;
    display: block;
  }
  .biore-bs-tab {
    margin: 0 2.5vw !important;
    text-align: center;
    width: calc(100% - 5vw);
    font-size: 4.5vw;
  }
  #tab1 {
    padding-bottom: 30px;
    top: 10px;
  }
  #tab2 {
    z-index: 10;
  }
  #outer {
    position: absolute;
    top: 115%;
    left: 50%;
  }
  #inner {
    background-color: #eca0be;
  }
  .biore-bs-product-image, .biore-bs-product-desc {
    width: 100%;
  }
  .biore-bs-product {
    display: block;
  }
  .biore-bs-product-image img {
    width: unset;
    padding-left: 2vw;
  }
  .biore-bs-product-desc p {
    text-align: center;
    font-size: 3.3vw;
    padding-bottom: 10vw;
  }
  .biore-bs-form-text {
    padding: 6vw 3vw;
    display: block;
  }
  .biore-bs-form-text p {
    margin: 0;
  }
  .biore-bs-form-desc {
    font-size: 3.3vw;
    width: 100%;
    text-align: center;
  }
  .biore-bs-form-title {
    font-size: 7vw;
    width: 100%;
    text-align: center;
    padding-bottom: 4vw;
    z-index: 15;
    position: relative;
  }
  .biore-bs-form-submit button, #biore-bs-loadmore {
    font-size: 4.5vw;
    width: 60vw;
    height: 12vw;
  }
  .biore-bs-form-col {
    width: 100%;
  }
  .biore-bs-form-col input {
    font-size: 3.3vw;
    padding: 15px 35px;
    width: calc(100% - 70px);
  }
  .text-tnc {
    top: 1vw;
    font-size: 3vw;
  }
  .check-box {
    padding: 10px 0;
  }
  .biore-bs-prev, .biore-bs-next {
    display: none;
  }
  .biore-bs-product-list {
    padding-left: 3.9vw;
    padding-bottom: 15vw;
  }
  .slick-dots li button:before {
    font-size: 3.3vw;
  }
  .slick-dots {
    bottom: 10vw;
  }
  .biore-bs-product-name {
    font-size: 5.5vw;
  }
  .biore-bs-product-item-desc {
    top: 67.5%;
    left: 53%;
    width: 70%;
    font-size: 3.3vw;
  }
  .biore-bs-article {
    display: block;
  }
  .biore-bs-article-image, .biore-bs-article-image img {
    width: 100%;
  }
  .biore-bs-article-text {
    width: calc(100% - 6vw);
    line-height: 1.5;
    padding: 10vw 3vw;
    text-align: center;
  }
  .biore-bs-article-title {
    font-size: 6vw;
    padding-bottom: 5vw;
  }
  .biore-bs-article-desc {
    font-size: 3.3vw;
    padding-bottom: 7.5vw;
    line-height: 1.5;
  }
  .biore-bs-readmore {
    font-size: 3.3vw;
    padding: 2vw 10vw;
    border-radius: 10vw;
  }
  .sosmed {
    padding: 10vw 0;
  }
  .sosmed-fb, .sosmed-twitter, .sosmed-ig, .sosmed-brand {
    display: block;
    font-size: 3.7vw;
    padding: 3vw 0;
  }
  .sosmed-brand {
    font-size: 5vw;
  }
  .ig-feed {
    padding: 5vw;
  }
  .ig-feed-item {
    display: block;
    width: calc(100% - 10vw);
    padding: 5vw;
    margin: 0;
    margin-bottom: 21vw;
  }
  .ig-feed-item:last-child {
    margin-bottom: 0;
  }
  .ig-feed-text {
    padding-top: 53vw;
    padding-bottom: 5vw;
  }
  .ig-feed-username {
    font-size: 4.5vw;
    padding: 3vw 0;
  }
  .ig-feed-caption {
    font-size: 3.3vw;
    text-align: center;
    line-height: 1.5;
  }
.ig-feed-image {
    top: 20%;
  }
}

@media(max-width: 375px){
  .biore-bs {
    padding-top: 50px;
  }
}

@media(max-width: 360px){
  .biore-bs {
    padding-top: 50px;
  }
}

@media(max-width: 320px){
  .biore-bs {
    padding-top: 65px;
  }
}