@charset "UTF-8";

* {
    padding: 0;
    margin: 0;
}
body.ovrflow{
    overflow: hidden;
}
.contents {
    margin: 0;
}
.contents_inner {
    padding: 0;
}
.contents_inner img {
    width: 100%;
}
ul, li, ol {
    list-style: none;
}
#ctl00_BodyHeaderMain_upUpdatePanel2, footer, .header {
    display: none;
}

#page_menu{
    opacity: 0;
}

#page_menu.show{
    opacity: 1;
}

.blinking{
    -webkit-animation:blink 2s ease-in-out infinite alternate;
    -moz-animation:blink 2s ease-in-out infinite alternate;
    animation:blink 2s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
    0% {opacity:0.5;}
    100% {opacity:1;}
}

@-moz-keyframes blink{
    0% {opacity:0.5;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity:0.5;}
    100% {opacity:1;}
}

#main.main{
    font-family: 'Muli', dnp-shuei-gothic-gin-std, sans-serif;
    letter-spacing: 0.05em;
    color: #5f5f5f;
    line-height: 1;
}
/* スクロールアニメーション設定 */
.arrowWrap {
    position: relative;
    height: 100vh;
}

.arrowWrap .arrowInner {
    position: absolute;
    left: 20px;
    bottom: 20px;
}
.arrowInner a {
  font-size: 18px;
  text-align: end;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  display: block;
  text-decoration: none;
}

.arrow {
  width: 1px;
  height: 50px;
  margin: 20px auto 0;
  background-color: #eee;
  position: relative;
  overflow: hidden;
}

.arrow::before {
  content: '';
  width: 1px;
  height: 50px;
  margin: 20px auto 0;
  background-color: #000;
  position: absolute;
  top: -120px;
  left: 0;
  -webkit-animation: arrow 2.5s ease 0s infinite normal;
  animation: arrow 2.5s ease 0s infinite normal;
}

@keyframes arrow {
  0% {
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
  }

  60% {
    -webkit-transform: translate3d(-50%, 100px, 0);
    transform: translate3d(-50%, 100px, 0);
  }

  100% {
    -webkit-transform: translate3d(-50%, 100px, 0);
    transform: translate3d(-50%, 100px, 0);
  }
}
/* PCデバイス */
.sp {
    display: none;
}

.break-sp{
    display: none;
}

.first-view{
    position: relative;
    margin-bottom: 200px;
    width: 100%;
    height: 1400px;
    background-image: url(../image/entrance/BG.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.first-view .first-view__item-wrap{
    width: 100%;
    max-width: 500px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-43%, 10%);
}

.first-view .first-view__text-wrap{
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translate(-50%, -10%);
}

.first-view .first-view__ttl{
    margin-bottom: 40.5px;
    font-size: 28px;
    font-weight: 300;
    text-align: center;
}

.first-view .first-view__text{
    font-size: 14px;
    line-height: 2.3;
    text-align: center;
}

.second-view{
    width: 100%;
    /* max-width: 1920px; */
    margin: 0 auto;
    margin-bottom: 200px;
}

.second-view .second-view__list-wrap{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.second-view .second-view__list{
    width: 100%;
    /* max-width: 960px; */
    height: 380px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.second-view .second-view__list-ttl{
    font-size: 24px;
    text-align: center;
}

.second-view .second-view__list-ttl i{
    display: block;
    width: 30px;
    margin: 30px auto;
    border: 1px solid #5f5f5f;
}

.button-wrap{
    width: 200px;
    height: 40px;
    margin: 0 auto;
    border: 1px solid #5f5f5f;
}
.button-wrap a:hover {
    background: #5f5f5f;
    color: #fff;
}
.button{
    display: block;
    font-size: 16px;
    text-decoration: none;
    text-align: center;
    line-height: 40px;
    color: #5f5f5f;
}

.second-view .second-view__list:nth-child(1){
    background-image: url(../image/entrance/about-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.second-view .second-view__list:nth-child(2){
    background-image: url(../image/entrance/details-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.video-view{
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    margin-bottom: 200px;
}

.video-view .video-view__ttl{
    margin-bottom: 100px;
    font-size: 30px;
    font-weight: 300;
    text-align: center;
}

.video-view .video-view__ttl i{
    display: block;
    width: 30px;
    margin: 0 auto;
    margin-top: 20px;
    border: 1px solid #5f5f5f;
}

.video-view .video-view__author{
    margin-bottom: 40px;
    font-size: 14px;
    text-align: center;
}

.video-view .video-view__wrap{
    margin: 0 auto 40px;
    max-width: 800px;}

.video-view .video-view__wrap video{
    display: block;
    width: 100%;
}

.video-view .video-view__text-wrap{
    background-color: #f6f6f6;
    padding: 34px 40px;
}

.video-view .video-view__text{
    font-size: 12px;
    line-height: 2;
    text-align: justify;
}

.video-view .video-view__text-author{
    display: block;
    margin-bottom: 14px;
    font-size: 14px;
}

.skin-care-line{
    width: 100%;
    height: 300px;
    margin-bottom: 80px;
    background-image: url(../image/entrance/item-bg.jpg);
    background-repeat: repeat;
    background-size: cover;
    background-position: center;
}

.skin-care-line .skin-care-line__inner{
    width: 100%;
    max-width: 760px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.skin-care-line .skin-care-line__text-wrap{
    width: 100%;
    max-width: 204px;
}

.skin-care-line .skin-care-line__list-wrap{
    width: 100%;
    max-width: 425px;
    display: flex;
    justify-content: space-between;
}

.skin-care-line .skin-care-line__ttl{
    width: 204px;
    margin-bottom: 35px;
}

.skin-care-line .skin-care-line__subttl{
    margin-bottom: 20px;
    font-size: 22px;
    text-align: center;
}

.skin-care-line .skin-care-line__list:nth-child(1){
    width: 100px;
    margin-top: 50px;
}

.skin-care-line .skin-care-line__list:nth-child(2){
    width: 100px;
    margin-top: -20px;
}

.skin-care-line .skin-care-line__list:nth-child(3){
    width: 97px;
    margin-top: 80px;
}

.last-view{
    margin-bottom: 120px;
}

.last-view .last-view__list-wrap{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.last-view .last-view__list{
    width: 100%;
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.last-view .last-view__list:nth-child(1){
    background-color: #5f5f5f;
}

.last-view .last-view__list:nth-child(1) .last-view__list-text{
    margin-bottom: 15px;
    font-size: 14px;
    color: #ffffff;
}

.last-view .last-view__list:nth-child(1) .last-view__button-wrap{
    width: 200px;
    height: 40px;
    border: 1px solid #ffffff;
}

.last-view .last-view__list:nth-child(1) .last-view__button{
    display: block;
    font-size: 16px;
    color: #ffffff;
    line-height: 40px;
    text-align: center;
    text-decoration: none;
}

.last-view .last-view__list:nth-child(2){
    background-color: #dee1e4;
}

.last-view .last-view__list:nth-child(2) .last-view__list-text{
    margin-bottom: 15px;
    font-size: 22px;
    color: #5f5f5f;
}

.last-view .last-view__list:nth-child(2) .last-view__button-wrap{
    width: 280px;
    height: 40px;
    border: 1px solid #5f5f5f;
}

.last-view .last-view__list:nth-child(2) .last-view__button{
    display: block;
    font-size: 16px;
    line-height: 40px;
    color: #5f5f5f;
    text-align: center;
    text-decoration: none;
}
.last-view .last-view__list:nth-child(1) .last-view__button:hover {
    background: #fff;
    color: #5e5e5e;
}

.last-view .last-view__list:nth-child(2) .last-view__button:hover {
    background: #5f5f5f;
    color: #dee1e4;
}
.footer{
    margin-bottom: 120px;
}

.footer .footer__inner{
    width: 100%;
    max-width: 135px;
    margin: 0 auto;
}

.footer .footer__sns-wrap{
    display: flex;
    justify-content: space-between;
    align-items: center;
	max-width: 80px;
	margin: 0 auto 35px;
}

.footer .footer__sns-list{
    width: 24px;
}

.footer .footer__sns-list:last-child{
    width: 11px;
}

.footer .footer__text{
    font-size: 12px;
    text-align: center;
}

/* nav_menu */
.nav{
    position: absolute;
    height: 100vh;
    width: 300px;
    left: -300px;
    background: #ffffff;
    -webkit-transition: 1.0s;
    transition: 1.0s;
    padding: 100px 0;
    text-align: left;
    font-size: 14px;
}

.nav ul{
    padding-left: 50px;
}

/* header */
.menu {
    /*width: 100%;*/
    position: relative;
	z-index: 5;
}

.menu .inner {
    /*width: 100%;*/
    position: fixed;
	top: 0;
}

.menu .inner .nav a {
    display: block;
    text-decoration: none;
    color: #5f5f5f;
}
/* hamburger_line */
#target {
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
    display: block;
    -webkit-transition: 1.0s;
    transition: 1.0s;
    background: #ffffff;
    padding: 14px 10px;
}
.slidex {
    background: none !important;
    transform: translateX(250px);
}
.target_inner{
    width:  30px;
    height: 26px;
    position: relative;
}

.target_inner_line {
    display: block;
    width: 30px;
    height: 2px;
    background: #5f5f5f;
    -webkit-transition: 1.5s;
    transition: 1.5s;
    border-radius: 50px;
    position: absolute;
}

.target_inner_1 {
    top: 0;
}

.target_inner_2 {
    top: 10px;
}

.target_inner_3 {
    top: 20px;
}

/* 動き */
.fadein{
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
}

.fadeInUp {
    opacity : 0;
    transform: translateY(60px);
    transition: 1s;
}

.linea,.lineb,.linec{
    background: #5f5f5f;
}

.linea {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 13px;
}

.lineb {
    opacity: 0;
}

.linec {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    top: 13px;
}
/*.sec-main, .sec-intro {
  width: 100%;
  height: 100vh;
  scroll-snap-align: start;
}
	
.full-screen {
  width: 100%;
  height: 100vh;
  scroll-snap-type: y mandatory;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.slide-img {
    background-attachment: fixed !important;
	}*/
.nav li:first-child {
    width: 180px;
    margin-bottom: 80px;
}

.nav li {
    margin-bottom: 36px;
}

.nav .skin-care-logo-ttl{
    margin-top: 20px;
    font-size: 18px;
    font-weight: 300;
}

#ovrly{
    content: '';
    display: block;
    width: 100vw;
    height: 100vh ;
    background: rgba(255, 255, 255, 0.63);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 4;
    opacity: 0;
	webkit-transition: opacity 0.4s ease;
    -moz-transition: opacity 0.4s ease;
    -o-transition: opacity 0.4s ease;
    transition: opacity 0.4s ease;
    -webkit-transform: translate(-200vw,0);
    -moz-transform: translate(-200vw,0);
    -o-transform: translate(-200vw,0);
    transform: translate(-200vw,0);
}

#ovrly.active{
    opacity: 1;
    -webkit-transform: translate(0,0);
    -moz-transform: translate(0,0);
    -o-transform: translate(0,0);
    transform: translate(0,0);
}

/* .float_dwbtn .inner {
    width: calc(500 * (100vw / 1920));
} */

.float_dwbtn{
    opacity: 0;
    transition: all 0.4s ease;
}

.float_dwbtn.show{
    opacity: 1;
}

.float_dwbtn .inner {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 240px;
    margin: auto;
    transform: translate(0, -50%);
    z-index: 1;
}

.float_dwbtn .inner .close {
    position: absolute;
    width: 14px;
    top: 5px;
    right: 8px;
    padding: 0;
    background: transparent;
    margin: 0;
}

.banner{
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    margin-bottom: 140px;
    padding: 96px 0 94px;
    background-image: url(../image/ingredients/banner-img.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
}

.banner .banner__inner{
    width: 202px;
    margin-left: auto;
    margin-right: 200px;
}

.banner .banner__img{
    margin-bottom: 10px;
}

.banner .banner__ttl{
    margin-bottom: 25px;
    font-size: 18px;
}

/* タブレット */
@media only screen and (min-width: 769px) and (max-width: 1024px) {
    .sp {
        display: none;
    }
    .break-sp{
        display: block;
    }
    .button-wrap {
        width: calc(200*(100vw/1024));
        height: calc(40*(100vw/1024));
    }
    .button {
        font-size: calc(18*(100vw/1024));
        line-height: calc(40*(100vw/1024));
    }
    .first-view{
        margin-bottom: calc(200*(100vw/1024));
    }
    /* .first-view{
        margin-bottom: calc(200*(100vw/1024));
        height: 100vh;
    }
    .first-view .first-view__item-wrap{
        max-width: calc(500*(100vw/1024));
        top: 50%;
        left: 50%;
        transform: translate(-50%, 40%);
    } */
    .first-view .first-view__ttl{
        margin-bottom: calc(40.5*(100vw/1024));
        font-size: calc(30*(100vw/1024));
    }
    .first-view .first-view__text {
        font-size: calc(16*(100vw/1024));
    }
    .second-view{
        margin-bottom: calc(200*(100vw/1024));
    }
    .second-view .second-view__list{
        height: calc(400*(100vw/1024));
    }
    .second-view .second-view__list-ttl{
        font-size: calc(26*(100vw/1024));
    }
    .second-view .second-view__list-ttl i{
        width: calc(50*(100vw/1024));
        margin: calc(50*(100vw/1024)) auto;
    }
    .video-view .video-view__ttl {
        margin-bottom: calc(100*(100vw/1024));
        font-size: calc(30*(100vw/1024));
    }
    .video-view .video-view__author {
        margin-bottom: calc(40*(100vw/1024));
        font-size: calc(16*(100vw/1024));
    }
    .video-view .video-view__text-wrap{
        margin: 0 calc(20*(100vw/1024));
        padding: calc(36*(100vw/1024)) calc(42*(100vw/1024));
    }
    .skin-care-line{
        height: calc(320*(100vw/1024));
        margin-bottom: calc(82*(100vw/1024));
    }
    .skin-care-line .skin-care-line__inner{
        max-width: calc(800*(100vw/1024));
    }
    .skin-care-line .skin-care-line__text-wrap{
        max-width: calc(206*(100vw/1024));
    }
    .skin-care-line .skin-care-line__ttl {
        width: calc(206*(100vw/1024));
        margin-bottom: calc(37*(100vw/1024));
    }
    .skin-care-line .skin-care-line__subttl {
        margin-bottom: calc(22*(100vw/1024));
        font-size: calc(24*(100vw/1024));
    }
    .skin-care-line .skin-care-line__list-wrap {
        max-width: calc(427*(100vw/1024));
    }
    .skin-care-line .skin-care-line__list:nth-child(1){
        width: calc(102*(100vw/1024));
        margin-top: calc(52*(100vw/1024));
    }
    .skin-care-line .skin-care-line__list:nth-child(2){
        width: calc(102*(100vw/1024));
        margin-top: calc(-22*(100vw/1024));
    }
    .skin-care-line .skin-care-line__list:nth-child(3){
        width: calc(100*(100vw/1024));
        margin-top: calc(82*(100vw/1024));
    }
    .last-view .last-view__list:nth-child(1) .last-view__list-text{
        margin-bottom: calc(20*(100vw/1024));
        font-size: calc(18*(100vw/1024));
        line-height: 1.4;
        text-align: center;
    }
    .last-view .last-view__list:nth-child(1) .last-view__button-wrap{
        width: calc(200*(100vw/1024));
        height: calc(40*(100vw/1024));
    }
    .last-view .last-view__list:nth-child(1) .last-view__button {
        font-size: calc(16*(100vw/1024));
        line-height: calc(40*(100vw/1024));
    }
    .last-view .last-view__list:nth-child(2) .last-view__list-text {
        margin-bottom: calc(20*(100vw/1024));
        font-size: calc(24*(100vw/1024));
        line-height: 1.4;
        text-align: center;
    }
    .last-view .last-view__list:nth-child(2) .last-view__button-wrap {
        width: calc(280*(100vw/1024));
        height: calc(40*(100vw/1024));
    }
    .last-view .last-view__list:nth-child(2) .last-view__button {
        font-size: calc(16*(100vw/1024));
        line-height: calc(40*(100vw/1024));
    }
    .banner .banner__inner{
        width: calc(202*(100vw/1024));
        margin-left: auto;
        margin-right: calc(200*(100vw/1024));
    }
    .banner .banner__img{
        margin-bottom: calc(10*(100vw/1024));
    }
    .banner .banner__ttl{
        margin-bottom: calc(25*(100vw/1024));
        font-size: calc(18*(100vw/1024));
    }
}

/* SPデバイス */
@media only screen and (max-width: 768px) {
    .pc {
        display: none;
    }
    .break-sp{
        display: block;
    }
    .button-wrap {
        width: calc(240*(100vw/750));
        height: calc(60*(100vw/750));
    }
    .button {
        font-size: calc(26*(100vw/750));
        line-height: calc(60*(100vw/750));
    }
    .first-view{
        margin-bottom: calc(140*(100vw/750));
        padding-bottom: calc(140*(100vw/750));
        height: calc(1400*(100vw/750));
        background-image: url(../image/entrance/BG.jpg);
    }
    .first-view .first-view__item-wrap{
        max-width: calc(500*(100vw/750));
        transform: translate(-45%, 40%);
    }

    /* @supports (-webkit-touch-callout: none) {
        CSS specific to iOS devices 
        
        .first-view .first-view__item-wrap{
            max-width: calc(350*(100vw/750));
            transform: translate(-45%, 40%);
        }
    }
    
    @supports not (-webkit-touch-callout: none) {
    CSS for other than iOS devices 
    
        .first-view .first-view__item-wrap{
            max-width: calc(500*(100vw/750));
            transform: translate(-45%, 40%);
        }
    } */
    .first-view .first-view__text-wrap{
        width: calc(660*(100vw/750));
    }
    .first-view .first-view__ttl {
        margin-bottom: calc(50*(100vw/750));
        font-size: calc(36*(100vw/750));
    }
    .first-view .first-view__text {
        font-size:  calc(20*(100vw/750));
    }
    .second-view{
        margin-bottom: calc(135*(100vw/750));
    }
    .second-view .second-view__list-wrap{
        flex-wrap: wrap;
    }
    .second-view .second-view__list{
        height: calc(380*(100vw/750));
    }
    .second-view .second-view__list:nth-child(1){
        background-image: url(../image/entrance/about-bg-sp.jpg);
    }
    .second-view .second-view__list:nth-child(2){
        background-image: url(../image/entrance/details-bg-sp.jpg);
    }
    .second-view .second-view__list-ttl {
        font-size: calc(30*(100vw/750));
    }
    .second-view .second-view__list-ttl i {
        width: calc(50*(100vw/750));
        margin: calc(30*(100vw/750)) auto;
    }
    .video-view {
        margin-bottom: calc(140*(100vw/750));
    }
    .video-view .video-view__ttl {
        margin-bottom: calc(55*(100vw/750));
        font-size: calc(30*(100vw/750));
    }
    .video-view .video-view__ttl i {
        width: calc(50*(100vw/750));
        margin-top: calc(20*(100vw/750));
    }
    .video-view .video-view__author {
        margin-bottom: calc(50*(100vw/750));
        font-size: calc(24*(100vw/750));
    }
    .video-view .video-view__wrap {
        margin-bottom: calc(100*(100vw/750));
    }
    .video-view .video-view__text-wrap {
        margin: 0 calc(20*(100vw/750));
        padding: calc(40*(100vw/750));
    }
    .video-view .video-view__text {
        font-size: calc(20*(100vw/750));
        line-height: calc(40*(100vw/750));
    }
    .video-view .video-view__text-author {
        margin-bottom: calc(25*(100vw/750));
        font-size: calc(24*(100vw/750));
    }
    .skin-care-line {
        height: calc(300*(100vw/750));
        margin-bottom: calc(100*(100vw/750));
    }
    .skin-care-line .skin-care-line__inner{
        max-width: calc(650*(100vw/750));
    }
    .skin-care-line .skin-care-line__text-wrap {
        max-width: calc(240*(100vw/750));
    }
    .skin-care-line .skin-care-line__list-wrap {
        max-width: calc(350*(100vw/750));
    }
    .skin-care-line .skin-care-line__ttl {
        width: calc(225*(100vw/750));
        margin-bottom: calc(30*(100vw/750));
    }
    .skin-care-line .skin-care-line__subttl {
        margin-bottom: calc(18*(100vw/750));
        font-size: calc(24*(100vw/750));
    }
    .skin-care-line .skin-care-line__list:nth-child(1) {
        width: calc(100*(100vw/750));
        margin-top: calc(50*(100vw/750));
    }
    .skin-care-line .skin-care-line__list:nth-child(2) {
        width: calc(100*(100vw/750));
        margin-top: calc(-20*(100vw/750));
    }
    .skin-care-line .skin-care-line__list:nth-child(3) {
        width: calc(97*(100vw/750));
        margin-top: calc(80*(100vw/750));
    }
    .last-view {
        margin-bottom: calc(140*(100vw/750));
    }
    .last-view .last-view__list {
        height: calc(300*(100vw/750));
    }
    .last-view .last-view__list:nth-child(1) .last-view__list-text {
        margin-bottom: calc(40*(100vw/750));
        font-size: calc(22*(100vw/750));
        text-align: center;
        line-height: 1.4;
    }
    .last-view .last-view__list:nth-child(1) .last-view__button-wrap {
        width: calc(240*(100vw/750));
        height: calc(58*(100vw/750));
    }
    .last-view .last-view__list:nth-child(1) .last-view__button {
        font-size: calc(26*(100vw/750));
        line-height: calc(58*(100vw/750));
    }
    .last-view .last-view__list:nth-child(2) .last-view__list-text {
        margin-bottom: calc(30*(100vw/750));
        font-size: calc(26*(100vw/750));
        text-align: center;
        line-height: 1.4;
    }
    .last-view .last-view__list:nth-child(2) .last-view__button-wrap {
        width: calc(280*(100vw/750));
        height: calc(88*(100vw/750));
    }
    .last-view .last-view__list:nth-child(2) .last-view__button {
        padding: calc(15*(100vw/750)) 0;
        font-size: calc(26*(100vw/750));
        line-height: calc(29*(100vw/750));
    }
    .banner {
        width: 100%;
        margin-bottom: calc(140*(100vw/750));
        padding: calc(75*(100vw/750)) 0;
        background-image: url(../image/ingredients/banner-img_sp.jpg);
    }
    .banner .banner__inner {
        width: calc(242*(100vw/750));
        margin-right: calc(60*(100vw/750));
    }
    .banner .banner__img {
        margin-bottom: calc(25*(100vw/750));
    }
    .banner .banner__ttl {
        margin-bottom: calc(20*(100vw/750));
        font-size: calc(24*(100vw/750));
    }
    .float_dwbtn .inner{
        width: 100% !important;
        transform: translate(0, 0) !important;
    }
    .footer {
        margin-bottom: calc(100*(100vw/750));
    }
	.arrowInner a {
    font-size: calc(22*(100vw/750));
}

.arrowWrap .arrowInner {
    left: calc(20*(100vw/750));
    bottom: 8%;
}
}