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

:root {
    --white: #fff;
    --black: #000;
    --primary: #f900c1;
    --transition: all 0.3s ease-in-out;
}

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

body { font-family: "Poppins", sans-serif; font-size: 16px; color: var(--black); line-height: 2; background-color: #fafafa; }
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: 30px; }
p a { color: var(--primary); }
p a:hover { color: var(--black); }
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.4; }
h2 { margin-bottom: 20px; font-size: 46px; }
h3 { margin-bottom: 10px; font-size: 30px; }
h4 { font-size: 18px; }

/* global */
.centered { padding-right: calc((100% - 820px)/ 2); padding-left: calc((100% - 820px)/ 2); }
.textBlock + .textBlock { margin-top: 50px; }

/* wrapper */
.wrapper { width: 100%; position: relative; }

/* hero */
.hero { padding-top: 20px; padding-bottom: 20px; width: 100%; position: relative; height: 100svh; }
.hero .logoBlock { padding-top: 50px; margin-bottom: 50px; width: 100%; display: flex; justify-content: center; }
.hero .logo { width: 200px; height: 46px; display: block; }
.hero .logo svg { width: 200px; height: 46px; }
.hero h1 { margin: 0 auto 20px auto; text-transform: uppercase; color: var(--primary); text-align: center; font-size: 80px; line-height: 1; max-width: 650px; width: 100%; }
.hero .subtitle { text-transform: uppercase; font-size: 28px; color: var(--black); text-align: center; line-height: 1.6;}
.hero .scroll { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); color: var(--black); font-size: 12px; display: flex; justify-content: center; text-transform: uppercase; font-weight: 700; z-index: 1; }
.hero .icon { animation: bounce 1600ms infinite cubic-bezier(0.445, 0.05, 0.55, 0.95); }
.hero .icon img { width: 10px; }
.hero .story { position: absolute; left: 0; bottom: 40px; font-size: 12px; width: 100%; text-align: center; text-transform: uppercase; line-height: 1.6; }
.hero .story strong { font-size: 14px; }
.hero .leftImg { position: absolute; left: 0; top: 0; z-index: -1; pointer-events: none; width: 26%; }
.hero .leftImg img { width: 100%; height: auto; }
.hero .rightImg { position: absolute; right: 0; top: 0; z-index: -1; pointer-events: none; width: 33%; }
.hero .rightImg img { width: 100%; height: auto; }

@keyframes bounce {
    50% { transform: translateY(-10px); }
}

/* text */
.textSec { margin-top: 30px; margin-bottom: 100px; width: 100%; }
.textSec:last-child { margin-bottom: 0; }
.textSec h2 { color: var(--primary); line-height: 1.2; text-transform: capitalize; }
.textSec .bodyText { padding: 40px; margin: 0 0 50px -100px; width: 100%; position: relative; border-radius: 30px; background-color: #fac2ed; z-index: 1; }
.textSec .bodyText::before { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); content: ''; width: calc(100% - 30px); height: calc(100% - 30px); border-radius: 30px; border: 1px dashed var(--black); z-index: -1; }
.textSec .bodyText h3 { font-size: 20px; position: relative; text-align: center; }
.textSec .bodyText p { text-align: center; font-size: 14px; }
.textSec .bodyText + .bodyText2 { margin-top: -85px; margin-left: 60px; background-color: #fcf4fa; }
.textSec .bodyText.bodyText2::after { position: absolute; left: -140px; bottom: -100px; content: ''; width: 140px; height: 265px; background: url(../images/body-arrow.png) no-repeat; background-size: contain; }
.textSec .bodyText.bodyText2::before { border-color: #fa50d4; }
.textSec .personDetail { margin-bottom: 50px; width: 100%; }
.textSec .personBlock { margin-bottom: 50px; width: 100%; }
.textSec .person { padding: 10px 0; margin-bottom: 50px; width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; z-index: 1; position: sticky; top: 0; background-color: #fafafa; }
.textSec .personImg { width: 210px; height: 210px; }
.textSec .personImg img { width: 100%; height: auto; border-radius: 50%; }
.textSec .personText { width: calc(100% - 240px); align-self: center; line-height: 1.4; }
.textSec .personSub { font-size: 34px; font-weight: 400; }
.textSec .personTitle { font-size: 48px; font-weight: 700; }
.textSec .personContent { width: 100%; height: auto; overflow: visible; }
.textSec .quoteBlock { padding-bottom: 20px; margin: 80px 0 50px 0; width: 100%; position: relative; overflow: hidden; } 
.textSec .quoteBlock::before { position: absolute; left: 0; top: 0; content: ''; z-index: -1; width: 100vw; height: 100%; clip-path: polygon(6% 0, 100% 13%, 100% 23%, 100% 100%, 0 100%, 0 10%); background-color: #e442bf; }
.textSec .quoteBlock .block { width: calc(100% + 200px); left: 50%; transform: translateX(-50%); position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; }
.textSec .quoteBlock .left { padding-top: 100px; padding-bottom: 20px; width: 65%; color: #fff; } 
.textSec .quoteBlock .right { width: 33%; }
.textSec .quoteBlock h2 { color: var(--white);}
.textSec .quoteImg { margin-top: -30px; width: 100%; position: relative; }
.textSec .quoteImg img { width: 94%; height: auto; max-width:510px;max-height:710px;clip-path:polygon(0 40px,20px 15px,calc(100% - 110px) 0,calc(100% - 50px) 15px,100% calc(100% - 100px),calc(100% - 50px) calc(100% - 70px),120px calc(100% - 50px),40px 100%,40px calc(100% - 55px),10px calc(100% - 125px)); animation:quoteMove 2s steps(2) infinite forwards; }
.textSec .quoteImg::before { position: absolute; right: 0; top: -25px; z-index: -1; content: ''; width: 80%; height: 80%; background: url(../images/quote-bg.png) no-repeat; background-size: contain; }
.textSec .table { padding-bottom: 5px; margin-bottom: 30px; width: 100%; overflow-x: auto; }
.textSec .list { width: 100%; }
.textSec .list li { padding: 10px 20px; width: 100%; display:grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); }
.textSec .list li:nth-child(1) { font-weight: 700; }
.textSec .list li:nth-child(odd) { background-color: #f7d6ef; }
.textSec .vaccine { padding-top: 30px; padding-bottom: 30px; overflow: hidden; background-color: #f9edf6; }
.textSec .vaccine h3 { margin-bottom: 40px; text-align: center; }
.textSec .vaccineList { width: calc(100% + 300px); transform: translateX(-150px); display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 40px; }
.textSec .vaccineList li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; }
.textSec .vaccineIcon { padding: 35px; width: 120px; height: 120px; display: flex; justify-content: center; align-items: center; border-radius: 50%; background-color: var(--white); }
.textSec .vaccineText { width: calc(100% - 140px); }
.textSec .vaccineText h5 { margin-bottom: 10px; font-size: 16px; }
.textSec .vaccineText .age { margin-bottom: 10px; font-size: 14px; border-bottom: 1px dotted #121111; }
.textSec .vaccineText p { font-size: 14px; }
.textSec .actressSec { width: calc(100% + 300px); transform: translateX(-150px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.textSec .actressSec .item { width: 100%; }
.textSec .actressBlock { padding: 20px; width: 100%; color: var(--white); background-color: #e442bf; }
.textSec .actressBlock .actressImg { margin-bottom: 20px; width: 100%; }
.textSec .actressBlock .actressImg img { mix-blend-mode: luminosity; }
.textSec .actressBlock h4 { margin-bottom: 10px; }
.textSec .imageBlock { margin-bottom: 50px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; }
.textSec .imageLeft { width: calc(100% - 450px); position: sticky; top: 80px; z-index: 1; }
.textSec .imageLeft::before { position: absolute; left: 70%; top: 25px; content: ''; width: 303px; height: 221px; background: url(../images/images-arrow.png) no-repeat; background-size: contain; }
.textSec .imageLeft img { position: relative; z-index: 1; }
.textSec .imageRight { width: 320px; position: relative; z-index: 1; }
.textSec .imgAni { padding: 8px; width: 100%; position: sticky; top: 20px; box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.2); background-color: var(--white); }
.textSec .imgAni img { width: 100%; height: auto; }
.textSec .imgAni:nth-child(1) { transform: translateX(-20px) rotate(4deg); }
.textSec .imgAni:nth-child(2) { transform: translateX(10px) rotate(-4deg); }
.textSec .imgAni:nth-child(3) { top: 20px; transform: translateX(-10px) rotate(7deg); }
.textSec .imgAni:nth-child(4) { top: 20px; transform: translateX(10px) rotate(-7deg); }
.textSec .imgAni:nth-child(5) { top: 30px; transform: translateX(-6px) rotate(5deg); }
.textSec .imgAni:nth-child(6) { top: 30px; transform: translateX(6px) rotate(-3deg); }
.textSec .imgAni:nth-child(7) { top: 30px; transform: translateX(-6px) rotate(3deg); }
.textSec .imgAni:nth-child(8) { top: 30px; transform: translateX(-8px) rotate(-2deg); }

@keyframes quoteMove{
    0%{clip-path:polygon(0 40px,20px 15px,calc(100% - 110px) 0,calc(100% - 50px) 15px,100% calc(100% - 90px),calc(100% - 50px) calc(100% - 70px),120px calc(100% - 50px),40px 100%,40px calc(100% - 55px),40px calc(100% - 125px))}
    33%{clip-path:polygon(10px 30px,10px 0,calc(100% - 110px) 10px,calc(100% - 40px) 15px,100% calc(100% - 100px),calc(100% - 40px) calc(100% - 70px),130px calc(100% - 50px),50px 100%,30px calc(100% - 40px),30px calc(100% - 115px))}
    66%{clip-path:polygon(5px 50px,30px 5px,calc(100% - 110px) 5px,calc(100% - 60px) 15px,100% calc(100% - 110px),calc(100% - 60px) calc(100% - 70px),110px calc(100% - 35px),30px 100%,50px calc(100% - 40px),35px calc(100% - 135px))}
}

/* bottom images */
.life-wrapper { padding: 0 10px; position:fixed; bottom:0; left:50%; z-index: 2; transform:translateX(-50%); width:100%; max-width:1200px; display:flex; justify-content:space-between; align-items:flex-end; pointer-events: none; }
.life-wrapper img { opacity:0.05; transition:0.4s; }
.life-wrapper img.active { opacity:1; transform:scale(1.05); }
.life-wrapper img:nth-child(1) { width: 30px; }
.life-wrapper img:nth-child(2) { width: 45px; }
.life-wrapper img:nth-child(3) { width: 45px; }
.life-wrapper img:nth-child(4) { width: 40px; }
.life-wrapper img:nth-child(5) { width: 45px; }

/* audio */
.music-player-container { margin-bottom: 30px; display: inline-block; width: 100%; display: flex; flex-wrap: wrap; justify-content: center; }
.music-player-container h3 { margin-bottom: 0; text-align: center; width: 100%; font-size: 20px; }
.music-player-container .audioSub { width: 100%; text-align: center; }
.album { margin-bottom: 20px; box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.65); width: 150px; height: 150px; position: relative; border-radius: 50%; }
.album-art { height: 150px; position: relative; width: 150px; z-index: 10; border-radius: 50%; overflow: hidden; }
.album-art:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ''; background-color: rgba(0, 0, 0, 0.3); }
.album-art img { filter: grayscale(100%); }
.audiobg { animation: spin 2s linear infinite; transition: all 500ms; background-image: url('../images/audio-bg.png'); background-position: center, center; background-size: cover, 40% auto; background-repeat: no-repeat; border-radius: 100%; box-shadow: 0 0 10px rgba(0, 0, 0, 0.8); position: absolute; left: 10px; top: 10px; width: 130px; height: 130px; z-index: 5; will-change: transform, left; display: flex; align-items: center; justify-content: center; }
.audiobg img { width: 25%; border-radius: 50%; }
.is-playing .audiobg { left: -15px; top: -15px; width: 180px; height: 180px; }
.music-player-controls { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; text-align: center; z-index: 11; }
[class^="control-"] { border-radius: 100%; display: inline-block; height: 44px; margin: 0 3px; width: 44px; }
[class^="control-"]:hover { cursor: pointer; }
.control-play { background: transparent url('../images/play-button.png') center / cover no-repeat; }
.is-playing .control-play { background: transparent url('../images/pause-button.png') center / cover no-repeat; }

@keyframes spin {
    0% {
        transform: rotate(0deg);
   }
    100% {
        transform: rotate(360deg);
   }
}

/* credit */
.credit { padding-top: 50px; padding-bottom: 50px; color: var(--white); width: 100%; position: relative; z-index: 9; background-color: var(--black); }
.credit h3 { margin-bottom: 20px; color: var(--white); }

/* copyright */
.copyright { padding-top: 15px; padding-bottom: 15px; position: relative; z-index: 9; font-size: 14px; text-align: center; color: var(--white); width: 100%; background-color: var(--black); }

/* share btn */
.share-btn { position: fixed; right: 20px; bottom: 20px; z-index: 99; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: #404040; cursor: pointer; border: 0; transition: var(--transition); opacity: 0; visibility: hidden; }
.share-btn.show { opacity: 1; visibility: visible; }
.share-btn svg { width: 25px; height: 25px; fill: var(--white); }

@media screen and (max-width: 1120px)  {
    .textSec .actressSec { width: 100%; transform: unset; }
    .textSec .quoteBlock .block { width: 100%; }
    .textSec .vaccineList { width: 100%; transform: unset; }
}

@media screen and (max-width: 920px)  {
    .textSec .bodyText { margin-left: 0; }
    .textSec .bodyText + .bodyText2 { margin-left: auto; margin-top: 0; }
    .textSec .imageRight { margin-right: 20px;}
    .textSec .bodyText.bodyText2::after { display: none; }
}

@media screen and (max-width: 860px)  {
    .centered { padding-left: 20px; padding-right: 20px; width: 100%; }
    
    .hero h1 { font-size: 65px; }
    .hero .subtitle { font-size: 24px; }
    .hero .rightImg { width: 320px; }
    .hero .leftImg { width: 280px; }
    
}

@media screen and (max-width: 767px)  {
    body { font-size: 16px; }
    h2 { font-size: 34px; }
    h3 { font-size: 20px; }
    h4 { font-size: 18px; }

    .header .logo,
    .header .logo svg { width: 140px; height: 32px; }

    .hero { display: flex; flex-wrap: wrap; align-items: center; align-content: center; height: 600px; }
    .hero .logoBlock { padding-top: 0; }
    .hero .logo,
    .hero .logo svg { width: 110px; height: 26px; }
    .hero h1 { font-size: 54px; }
    .hero .subtitle { font-size: 20px; }
    .hero .leftImg { width: 150px; }
    .hero .rightImg { width: 200px; }

    .textSec { margin-bottom: 50px; }
    .textSec .personImg { width: 150px; height: auto; }
    .textSec .personText { width: calc(100% - 170px); }
    .textSec .personSub { font-size: 20px; }
    .textSec .personTitle { font-size: 34px; }
    .textSec .quoteBlock .left { padding-top: 0; width: 100%; order: 1; }
    .textSec .quoteBlock::before { clip-path: polygon(50px 0, 100% 40px, 100% 23%, 100% 100%, 0 100%, 0 10%); }
    .textSec .quoteBlock .right { margin-top: 0; margin-bottom: 30px; width: 100%; }
    .textSec .quoteImg { margin: 0 auto 0 auto; max-width: 260px; }
    .textSec .imageLeft { margin-bottom: 40px; width: 100%; position: relative; top: 0; }
    .textSec .imageLeft::before { display: none; }
    .textSec .imageRight { margin: 0 auto; width: 100%; max-width: 260px; }
    .textSec .imageRight h4 { margin-bottom: 10px; width: 100%; text-align: center; }
    .textSec .vaccineList { grid-template-columns: repeat(1, 1fr); }
    .textSec .vaccineIcon { width: 100px; height: 100px; }
    .textSec .vaccineText { width: calc(100% - 120px); }
    .textSec .list { min-width: 500px; width: 100%; }
    .textSec .list li { display: flex; font-size: 14px; gap: 15px; }
    .textSec .list li span { width: 100%; }
    .textSec .actressSec { grid-template-columns: repeat(1, 1fr); }
    .textSec .actressBlock .actressImg { display: flex; justify-content: center; }

    .music-player-container .audioSub { font-size: 14px; }

    .life-wrapper { padding: 0 15px; }
    .life-wrapper img:nth-child(1) { width: 20px; }
    .life-wrapper img:nth-child(2) { width: 30px; }
    .life-wrapper img:nth-child(3) { width: 30px; }
    .life-wrapper img:nth-child(4) { width: 25px; }
    .life-wrapper img:nth-child(5) { width: 30px; }
}

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

    .hero h1 { font-size: 50px; }
    .hero .subtitle { font-size: 20px; }
    .hero .title { font-size: 20px; }
    .hero .leftImg { width: 120px; }
    .hero .rightImg { width: 170px; }

    .textSec .bodyText { padding: 25px; margin-bottom: 30px; } 
    .textSec .bodyText::before { width: calc(100% - 20px); height: calc(100% - 20px); }
    .textSec .imgAni { max-width: 280px; }
    .textSec .personImg { width: 100px; height: auto; }
    .textSec .personText { width: calc(100% - 120px); }
    .textSec .personSub { font-size: 16px; }
    .textSec .personTitle { font-size: 26px; }
}