/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

:root {
    --white: #fff;
    --black: #000;
    --primary: #b91193;
    --light-pink: #de00ac;
    --transition: all 0.3s ease-in-out;
}

*{ padding: 0; margin: 0; box-sizing: border-box; }

body { font-family: 'Poppins', sans-serif; font-size: 20px; color: var(--black); line-height: 2; background-color: var(--white); }
img { display: block; max-width: 100%; height: auto; }
a { outline: none; text-decoration: none; color: var(--black); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--primary); }
p { margin-bottom: 40px; }
p:last-child { margin-bottom: 0; }
ul,ol { padding: 0; margin: 0; list-style: none; }
h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.2; }
h1 { font-size: 80px; }
h2 { margin-bottom: 40px; font-size: 65px; }
h3 { margin-bottom: 40px; font-size: 36px; }
h4 { font-size: 20px; }
h5 { margin-bottom: 30px; font-size: 24px; }

/* global */
.centered { padding-right: calc((100% - 1200px)/ 2); padding-left: calc((100% - 1200px)/ 2); }
 
/* wrapper */
.wrapper { width: 100%; position: relative; }

/* header */
.header { padding: 20px 20px; position: absolute; left: 0; top: 0; z-index: 99; width: 100%; display: flex; justify-content: space-between; align-items: center; } 
.header .logo { width: 200px; height: 45px; display: block; }
.header .logo svg { fill: var(--white); width: 200px; height: 45px; }
.header .back { color: var(--white); position: relative; text-transform: uppercase; font-size: 13px; font-weight: 500; }
.header .back:before { position: absolute; left: -15px; top: 50%; transform: translateY(-50%); content: ''; width: 0; height: 0; border-width: 5px 10px 5px 0; border-color: transparent #b91193 transparent transparent; border-style: solid; }
.header .back:hover { color: var(--primary); }

/* hero */
.hero { width: 100%; overflow: hidden; position: relative; min-height: 100vh; }
.hero:after { position: absolute; left: 0; bottom: 0; z-index: 2; height: 200px; width: 100%; content: ''; background: url(../images/hero-bottom-bg.png) center top repeat-x; }
.hero .block { padding-top: 80px; position: relative; height: 100vh; z-index: 1; }
.hero .title { position: relative; z-index: 1; text-align: center; font-size: 45px; line-height: 1; color:#ff02c5; font-weight: 800; text-transform: uppercase; }
.hero .title strong { display: block; font-size: 100px; font-weight: 800; background-image: url("https://acegif.com/wp-content/gifs/fire-17.gif"); background-size: 400px auto; -webkit-text-fill-color: transparent; text-fill-color: transparent; -webkit-background-clip: text; background-clip: text; animation: fire 3s infinite linear; -webkit-text-stroke: 0.1vw #fff; }
.hero .subtitle { margin-bottom: 30px; position: relative; z-index: 1; text-align: center; font-weight: 500; font-size: 18px; line-height: 25px; color: #fff; text-shadow: 0px 0px 10px rgba(0,0,0,1), 0px 8px 13px rgba(0,0,0,1), 0px 18px 24px rgba(0,0,0,1); }
.hero .women { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 29%; }
.hero .women img { transition-delay: 1s; }
.hero .wire { position: absolute; left: 0; bottom: 10px; width: 100%; height: 120px; z-index: 3; transition-delay: 2.1s;}
.hero .wire img { width: 100%; height: 100%; object-fit: fill; object-position: center center; }
.hero .firebg { position: absolute; left: 0; top: 0; width: 100%; height: 100vh; z-index: 1; mix-blend-mode: lighten; }
.hero .firebg img { width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.hero .bg { position: absolute; left: 0; top: 0; width: 100%; height: 100vh; }
.hero .bg img { width: 100%; height: 100%; object-fit: cover; object-position: center center; }

/* text side */
.textSide { padding-top: 80px; padding-bottom: 80px; width: 100%; }
.textSide .block { margin-bottom: 80px; width: 100%; }
.textSide .block:last-child { margin-bottom: 0; }
.textSide .title { position: relative; z-index: 1; text-align: center; font-size: 52px; line-height: 1; color:#ff02c5; font-weight: 800; text-transform: uppercase; }
.textSide .title strong { display: block; font-size: 130px; font-weight: 800; background-image: url("https://acegif.com/wp-content/gifs/fire-17.gif"); background-size: 400px auto; -webkit-text-fill-color: transparent; text-fill-color: transparent; -webkit-background-clip: text; background-clip: text; animation: fire 3s infinite linear; }
.textSide .subtitle { margin-bottom: 30px; position: relative; z-index: 1; text-align: center; font-weight: 500; font-size: 20px; line-height: 25px; color: #fff; }
.textSide .linkList{display: block; clear: both; overflow: hidden; margin-bottom: 50px;}
.textSide .linkList li a{display:inline-block; vertical-align:top;}.linkList li a span{border-bottom: 1px solid #000;}
.textSide .linkList li:first-child a{color:#ff02c5;}
.textSide .linkList li:first-child a span{border-bottom: 1px solid #ff02c5;}
.textSide .linkList svg {width: 26px; height: 20px; margin-top: 10px; display:inline-block; vertical-align:top; margin-left: 10px;}
.textSide .count { margin-bottom: 40px; width: 100%; text-align: center; overflow: hidden; }
.textSide .number { text-align: center; font-size: 200px; color: var(--primary); font-weight: 800; line-height: 1; }
.textSide .countText { margin: 0 auto; line-height: 1.4; max-width: 530px; width: 100%; font-size: 28px; color: var(--primary); }
.textSide .map { margin-bottom: 50px; width: 100%; overflow: hidden; }
.textSide .mapImg { position: relative; }
.textSide .mapani { position: absolute; }
.textSide .firstmap { left: 39.5%; top: 0; width: 25%; }
.textSide .secondmap { left: 55.5%; top: 31%; width: 30.5%; }
.textSide .thirdmap { left: 12.5%; top: 14%; width: 27%; }
.textSide .forthmap { left: 45%; top: 61%; width: 43%; }
.textSide .fivemap { left: 20%; bottom: 0; width: 27%; }
.textSide .approximate { width: 100%; text-align: right; font-size: 16px; }
.textSide .newsBlock { padding: 30px 20px; margin: 0 auto; max-width: 1000px; width: 100%; position: relative; }
.textSide .news-block { margin-bottom: 10px; position: sticky; top: 0; z-index: 1; width: 100%; }
.textSide .news-block:nth-child(2) { top: 90px; transform: rotate(-3deg); }
.textSide .news-block:nth-child(3) { top: 150px; transform: rotate(3deg); }
.textSide .news-block:nth-child(4) { top: 200px; transform: rotate(2deg); }
.textSide .news-block:nth-child(5) { top: 280px; transform: rotate(-2deg); }
.textSide .news-block:nth-child(6) { top: 350px; transform: rotate(0deg); }
.textSide .newsScroll { position: relative; z-index: 1; width: 100%; height: 100%; overflow-y: auto; }
.textSide .newsScroll ul { width: 100%; }
.textSide .newsScroll li { padding: 80px 70px; margin-bottom: 10px; display: flex; flex-wrap: wrap; align-items: center; min-height: 235px; position: relative; z-index: 1; width: 100%; }
.textSide .newsLogo { margin-right: 20px; max-width: 150px; width: 100%; }
.textSide .newsImg { margin-bottom: 10px; width: 100%; }
.textSide .newsImg img { margin: 0 auto; mix-blend-mode: multiply; }
.textSide .date { width: 100%; text-align: center; font-size: 14px; }
.textSide .newsText { width: calc(100% - 170px); font-size: 25px; line-height: 1.4; }
.textSide .newsScrollbg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; }
.textSide .newsScrollbg img { width: 100%; height: 100%; object-fit: fill; }
.textSide .newsBg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.textSide .newsBg:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ''; background-color: rgba(48,46,48,0.8); }
.textSide .newsBg img { width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.textSide .img { margin-left: 20px; margin-bottom: 20px; float: right; width: 46%; }
.textSide .image { margin-bottom: 50px; width: 100%; display: flex; justify-content: space-around; }
.textSide .image.rotate img { transform: rotate(-2deg); }
.textSide .blockquote { margin-bottom: 50px; width: 100%; }
.textSide blockquote { padding: 100px 0 60px 0; margin: 0 auto; display: block; max-width: 700px; width: 100%; font-size: 28px; font-weight: 600; line-height: 1.6; position: relative; text-align: center; font-style: normal; }
.textSide blockquote span { display: block; text-align: center; font-size: 20px; font-weight: 400; }
.textSide blockquote:before,
.textSide blockquote:after { position: absolute; content: ""; }
.textSide blockquote:before { left: -160px; top: 0; width: 190px; height: 120px; background: url(../images/quote-top.png) no-repeat; background-size: contain; }
.textSide blockquote:after { right: 0; bottom: 0; width: 102px; height: 64px; background: url(../images/quote-bottom.png) no-repeat; background-size: contain; }
.textSide .graphBlock { margin: 0 auto 50px auto; width: 100%; max-width: 960px; }
.textSide .graphBlock:last-child { margin-bottom: 0; }
.textSide .graphBlock h3 { margin-bottom: 30px; color: var(--light-pink); }
.textSide .graph { width: 100%; }
.textSide .graph li { margin-bottom: 10px; width: 100%; display: flex; align-items: center; position: relative; font-size: 14px; font-weight: 300; }
.textSide .graph li label { padding-right: 10px; width: 180px; color: #383732; font-size: 20px; font-weight: 400; line-height: 1.4; }
.textSide .barbg { width: calc(100% - 260px); height: 54px; border: 1px solid var(--black); }
.textSide .bar { height: 100%; background-color: var(--light-pink); }
.textSide .percentage { width: 80px; font-size: 20px; text-align: right; }
.textSide .fullSlider { padding-top: 30px; margin: 0 auto 50px auto; max-width: 900px; width: 100%; }
.textSide .fullSlider .item { position: sticky; top: 0; }
.textSide .fullSlider .item:nth-child(1) img { transform: rotate(-3deg);  }
.textSide .fullSlider .item:nth-child(2) img { transform: rotate(3deg); transition-delay: 2s; }
.textSide .fullSlider .item:nth-child(3) img { transform: rotate(0deg); transition-delay: 1s;  }
.textSide .fullSlider .item:nth-child(4) img { transform: rotate(-2deg); transition-delay: 1s;  }
.textSide .fullSlider .item:nth-child(5) img { transform: rotate(1deg); transition-delay: 1s;  }
.textSide .video { margin-bottom: 50px; width: 100%; min-height: 550px; position: relative; justify-content: center; display: flex; align-items: center; overflow: hidden; }
.textSide .video:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ''; z-index: 1;  background-color: rgba(0,0,0,0.5);}
.textSide .video video { width: 100vw; height: 56.25vw; min-height: 100vh; min-width: 177.77vh; position: absolute; top: 50%;
    left: 50%; transform: translate(-50%, -50%); aspect-ratio: 16/9; overflow: hidden; }
.textSide .video iframe { width: 100vw; height: 56.25vw; min-height: 100vh; min-width: 177.77vh; position: absolute; top: 50%;
    left: 50%; transform: translate(-50%, -50%); aspect-ratio: 16/9; overflow: hidden; }
.textSide .videoText { position: relative; z-index: 1; max-width: 720px; width: 100%; color: var(--white); text-align: center; }
.textSide .audio { padding: 20px; margin-bottom: 30px; width: 100%; display: flex; flex-wrap: wrap; align-items: flex-start; background-color: #fcfcfb; }
.textSide .audio h5 { margin-bottom: 10px; }
.textSide .audio-img { margin-right: 20px; width: 80px; height: 80px; border-radius: 50%; overflow: hidden; }
.textSide .audio-img img { width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.textSide .audio-text { width: calc(100% - 100px); }
.textSide audio { width: 100%; height: 46px; }
.textSide .imageSlider { margin-bottom: 10px; position: relative; height: 675px; width: 100%; overflow: hidden; }
.textSide .imageSlider-caption { margin-bottom: 40px; font-size: 12px; text-align: center; }
.textSide .imageSlider .imageSlider-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; }
.textSide .imageSlider .background-img { background-image: url("../images/before-img.jpg"); }
.textSide .imageSlider .foreground-img { background-image: url("../images/after-img.jpg"); width: 50%; }
.textSide .imageSlider .rangeslider { position: absolute; -webkit-appearance: none; appearance: none; width: 100%; height: 100%; background: rgba(242, 242, 242, 0.3); outline: none; margin: 0; transition: all 0.2s; display: flex; justify-content: center; align-items: center; }
.textSide .imageSlider .rangeslider:hover { background: rgba(242, 242, 242, 0.1); }
.textSide .imageSlider .rangeslider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 6px; height: 675px; background: var(--white); cursor: pointer; }
.textSide .imageSlider .rangeslider::-moz-range-thumb { width: 6px; height: 675px; background: var(--white); cursor: pointer; }
.textSide .imageSlider .slider-button { pointer-events: none; position: absolute; width: 30px; height: 30px; border-radius: 50%; background-color: var(--white); left: calc(50% - 18px); top: calc(50% - 18px); display: flex; justify-content: center; align-items: center; }
.textSide .imageSlider .slider-button:after { content: ""; padding: 3px; display: inline-block; border: solid #5D5D5D; border-width: 0 2px 2px 0; transform: rotate(-45deg); }
.textSide .imageSlider .slider-button:before { content: ""; padding: 3px; display: inline-block; border: solid #5D5D5D; border-width: 0 2px 2px 0; transform: rotate(135deg); }
.textSide .caption { padding-top: 5px; font-size: 15px; width: 100%; }
.textSide .leftImg { width: 48%; }
.textSide .rightImg { width: 48%; }
.textSide .list { margin-bottom: 30px; margin-left: 20px; list-style-type: disc; }

@keyframes fire {
    0% {background-position: 0 0;}
    100% {background-position: 0 0;}
}

/* credit */
.credit { padding-top: 50px; padding-bottom: 50px; color: var(--white); width: 100%; background-color: var(--black); }
.credit h2 { margin-bottom: 20px; color: var(--white); }


@media screen and (max-width: 1240px)  {
    .centered { padding-left: 20px; padding-right: 20px; }
}

@media screen and (max-width: 1199px)  {
    .hero .first-ani { font-size: 40px; max-width: 400px; }
    /* .hero .title { font-size: 40px; max-width: 400px; }
    .hero .title span { font-size: 60px; } */
    .hero .second-ani { width: 280px; }
    .hero .heading { padding-bottom: 70px; width: 280px; height: 204px; font-size: 19px; }
    .hero .third-ani { width: 230px; }
    .hero .heading-1 { width: 230px; height: 250px; font-size: 14px; }
    .hero .forth-ani { width: 260px; }
    .hero .heading-2 { width: 260px; height: 364px; font-size: 32px; }

    .textSide .title { font-size: 70px; }
    .textSide .title strong { font-size: 150px; }
    .textSide .subtitle { font-size: 28px; }
    .textSide blockquote:before { left: -120px; width: 150px; height: 100px; }

    .linkList li{margin-bottom: 10px;}
    .linkList svg{margin-top: 6px;} 
    /* .hero .women{left: 56%;} */
}

@media screen and (max-width: 991px)  {
    body { font-size: 18px; }
    h2 { font-size: 50px; }

    .header .logo,
    .header .logo svg { width: 200px; height: 45px; }
    .header .back { font-size: 14px; }

    .hero .first-ani { top: 15%; font-size: 34px; max-width: 350px; }
    /* .hero .title { font-size: 34px; max-width: 350px; }
    .hero .title span { font-size: 52px; } */
    .hero .title { font-size: 45px; }
    .hero .title strong { font-size: 90px; }
    .hero .subtitle { font-size: 18px; line-height: 22px;}
    .hero .second-ani { width: 230px; height: 168px; }
    .hero .third-ani { top: 13%; right: 11%; width: 214px; height: 232px; }
    .hero .forth-ani { width: 220px; height: 320px; font-size: 25px; }
    .hero .heading { padding-bottom: 60px; width: 230px; height: 168px; font-size: 15px; }
    .hero .heading-1 { width: 214px; height: 232px; font-size: 13px; }
    .hero .heading-2 { width: 220px; height: 320px; font-size: 25px; }
    .hero .wire { height: 80px; }
    .hero .women { width: 32%; }

    .textSide .title { font-size: 60px; }
    .textSide .title strong { font-size: 120px; }
    .textSide .subtitle { font-size: 24px; }
    .textSide .number { font-size: 120px; }
    .textSide .countText { font-size: 22px; }
    .textSide .newsText { font-size: 20px; }
    .textSide blockquote:before { left: -20px; width: 120px; height: 80px; }
    .textSide .imageSlider { height: 550px; }

}

@media screen and (max-width: 767px)  {
    body { font-size: 16px; }
    h2 { font-size: 40px; }
    h3 { margin-bottom: 30px; font-size: 28px; }
    .header { padding-top: 15px; padding-bottom: 15px; }
    .header .logo,
    .header .logo svg { width: 120px; height: 28px; }
    .header .back { font-size: 12px; }
    .header .back:before { border-width: 5px 10px 5px 0; left: -15px; }

    .hero .first-ani { left: 0; font-size: 20px; max-width: 170px; }
    /* .hero .title { font-size: 20px; }
    .hero .title span { font-size: 30px; } */
    .hero .title { font-size: 30px; }
    .hero .title strong { font-size: 52px; }
    .hero .subtitle { font-size: 16px; line-height: 20px;}
    .hero .second-ani { left: -10px; top: 38%; width: 170px; height: 128px; font-size: 11px; }
    .hero .third-ani { right: 0; font-size: 10px; width: 150px; height: 168px; }
    .hero .forth-ani { bottom: 11%; width: 140px; height: 275px; font-size: 16px; }
    .hero .heading { width: 170px; height: 128px; font-size: 11px; }
    .hero .heading-1 { padding-left: 20px; padding-right: 20px; font-size: 10px; width: 150px; height: 168px; }
    .hero .heading-2 { padding: 10px 20px 20px 20px; width: 140px; height: 275px; font-size: 16px; }
    .hero .women { width: 50%; }
    .hero .wire { height: 50px; }    

    .textSide .block { margin-bottom: 50px; }
    .textSide .title { font-size: 40px; }
    .textSide .title strong { font-size: 78px; }
    .textSide .subtitle { font-size: 20px; }
    .textSide .number { font-size: 80px; }
    .textSide .countText { font-size: 18px; }
    .textSide .approximate { font-size: 12px; }
    .textSide .newsScroll li { padding: 60px 40px; min-height: 198px; align-items: flex-start; align-content: flex-start; }
    .textSide .newsLogo { margin-right: 0; margin-bottom: 10px; display: flex; align-items: center; max-width: 100%; }
    .textSide .newsImg { margin-bottom: 0; width: 100px; }
    .textSide .date { padding-left: 15px; font-size: 12px; text-align: left; }
    .textSide .newsText { width: 100%; font-size: 16px; }
    .textSide .sliderContainer { margin-bottom: 30px; }
    .textSide .slider { margin-bottom: 20px; width: 100%; }
    .textSide .sliderContent { padding-bottom: 0; width: 100%; }
    .textSide .arrow { display: none; }
    .textSide blockquote { padding-top: 65px; padding-bottom: 45px; font-size: 20px; }
    .textSide blockquote span { font-size: 16px; }
    .textSide blockquote:before { width: 90px; height: 58px; }
    .textSide blockquote:after { width: 70px; height: 45px; }
    .textSide .graph li label { font-size: 16px; width: 140px; }
    .textSide .percentage { font-size: 16px; width: 55px; }
    .textSide .barbg { width: calc(100% - 195px); height: 40px; }
    .textSide .imageSlider { height: 390px; }
    .textSide .imageSlider .imageSlider-img { background-position: center; }
    .textSide .video { min-height: 400px; }

    .credit { font-size: 14px; }
    
}

@media screen and (max-width: 479px)  {
    h2 { margin-bottom: 20px; font-size: 30px; } 
    p { margin-bottom: 30px; }

    .hero .women { width: 80%; }
    .textSide .count { margin-bottom: 30px; }
    .textSide .title { font-size: 30px; margin-bottom: 12px;}
    .textSide .title strong { font-size: 64px; margin-top: 8px;}
    .textSide .subtitle { font-size: 20px; }
    .textSide .number { font-size: 60px; }
    .textSide .countText { font-size: 16px; }
    .textSide .map { margin-bottom: 30px; }
    .textSide .newsText { font-size: 14px; }
    .textSide .newsImg { width: 80px; }
    .textSide .img { margin-left: 0; width: 100%; }
    .textSide .image { margin-bottom: 30px; }
    .textSide .blockquote { margin-bottom: 30px; }
    .textSide blockquote { padding-top: 45px; padding-bottom: 30px; font-size: 16px; }
    .textSide blockquote:before { left: -15px; width: 60px; height: 40px; }
    .textSide blockquote:after { width: 40px; height: 26px; }
    .textSide .videoText { padding-left: 20px; padding-right: 15px; font-size: 14px; }
    .textSide .barbg { width: calc(100% - 165px); }
    .textSide .graph li label { font-size: 14px; width: 120px; }
    .textSide .percentage { width: 45px; font-size: 14px; }

}