*, *:before, *:after { margin: 0px; padding: 0px; box-sizing: border-box; }

body, html { font-family: 'Cormorant Garamond'; font-size: 15px; color: #a48b6c; height: 100%; background-color: #FFF; box-sizing: border-box; }
a:focus { outline: none; }
a:hover { text-decoration: none; }
h1, h2, h3, h4, h5, h6, p { margin: 0px; }
ul, li { margin: 0px; list-style-type: none; }
input, textarea, label { display: block; outline: none; border: none; }
button { outline: none; border: none; background: transparent; cursor: pointer; }
button:focus { outline: none; }
iframe { border: none; }

/*---------------------------------------------*/

:root { --margin-inline: 4%; }

main { width: 100%; height: 100%; display: flex; align-items: center; overflow: hidden; position: relative; }
main::after { content: ' '; position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: linear-gradient( to right, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.9) 100% ); z-index: 15; }
.video-bck { width: 100%; height: 100%; position: absolute; top: 0; left: 0; object-fit: cover; z-index: 10; }
.content { position: relative; z-index: 20; left: var(--margin-inline); max-width: 550px; }
.logo { width: 480px; height: auto; margin-bottom: 20px; }
.logo .st0 { fill: #a48b6c; }
.logo .icon { opacity: 0; }
.logo .letters path { opacity: 0; }
.title { font-size: 2.4rem; line-height: 2.6rem; font-weight: 500; font-style: italic; opacity: 0; transform: translateY(-15px); }
.abstract { font-size: 2.4rem; line-height: 2.6rem; font-weight: 500; margin-bottom: 25px; font-style: italic; opacity: 0; transform: translateY(-15px); }
.countdown { position: absolute; top: 50%; transform: translate(0, -50%); right: -10%; z-index: 20; text-align: right; }
.countdown-item-value { display: block; font-size: 4.2rem; margin-bottom: 8px; font-weight: 700; }
.countdown-item-detail { display: block; font-size: 1.6rem; line-height: 1.6rem; }
#waterHolder { width: 200px; height: 200px; position: relative; z-index: 30; }

body.load .logo .icon { opacity: 1; transition: 0.6s linear; }
body.load .logo .letters path:nth-child(1) { opacity: 1; transition: opacity 0.3s linear 0.5s; }
body.load .logo .letters path:nth-child(2) { opacity: 1; transition: opacity 0.3s linear 0.6s; }
body.load .logo .letters path:nth-child(3) { opacity: 1; transition: opacity 0.3s linear 0.7s; }
body.load .logo .letters path:nth-child(4) { opacity: 1; transition: opacity 0.3s linear 0.8s; }
body.load .logo .letters path:nth-child(5) { opacity: 1; transition: opacity 0.3s linear 0.9s; }
body.load .logo .letters path:nth-child(6) { opacity: 1; transition: opacity 0.3s linear 1s; }
body.load .logo .letters path:nth-child(7) { opacity: 1; transition: opacity 0.3s linear 1.1s; }
body.load .logo .letters path:nth-child(8) { opacity: 1; transition: opacity 0.3s linear 1.2s; }
body.load .logo .letters path:nth-child(9) { opacity: 1; transition: opacity 0.3s linear 1.3s; }
body.load .logo .letters path:nth-child(10) { opacity: 1; transition: opacity 0.3s linear 1.4s; }
body.load .logo .letters path:nth-child(11) { opacity: 1; transition: opacity 0.3s linear 1.5s; }
body.load .logo .letters path:nth-child(12) { opacity: 1; transition: opacity 0.3s linear 1.6s; }
body.load .logo .letters path:nth-child(13) { opacity: 1; transition: opacity 0.3s linear 1.7s; }
body.load .abstract { opacity: 1; transform: translateY(0px); transition: opacity 1s linear 2s, transform 1s linear 2s; }
body.load .title { opacity: 1; transform: translateY(0px); transition: opacity 1s linear 3.5s, transform 1s linear 3.5s; }
body.load .countdown { right: var(--margin-inline); transition: right 1s linear 4.5s; }

@media (max-width:1600px) {
    :root { --margin-inline: 3%; }
    .logo { width: 450px; }
    .title, .abstract { font-size: 2.3rem; line-height: 2.5rem; }
}

@media (max-width:1400px) {
    .content { max-width: 500px; }
    .logo { width: 400px; }
    .title, .abstract { font-size: 2.2rem; line-height: 2.4rem; }
    .countdown-item-value { font-size: 4rem; }
    .countdown-item-detail { font-size: 1.6rem; line-height: 1.6rem; }
}

@media (max-width:1200px) {
    :root { --margin-inline: 5%; }
    main::after { background: rgba(0,0,0,0.5); }
    .logo { width: 350px; }
    .title, .abstract { font-size: 2.1rem; line-height: 2.3rem; }
    .countdown-item-value { font-size: 3.8rem; }
    .countdown-item-detail { font-size: 1.5rem; line-height: 1.5rem; }
}

@media (max-width:1023px) {
    .content { max-width: 450px; }
    .logo { width: 320px; }
    .title, .abstract { font-size: 2rem; line-height: 2.2rem; }
    .countdown-item-value { font-size: 3.5rem; }
    .countdown-item-detail { font-size: 1.4rem; line-height: 1.4rem; }
}

@media (max-width:640px), (max-height:480px) {
    :root { --margin-inline: 8%; }
    main { flex-direction: column; justify-content: flex-end; align-items: flex-start; padding-inline: var(--margin-inline); padding-bottom: 5vh; }
    .countdown { position: relative; right: 0; display: flex; gap: 20px; transform: none; top: 0; margin-top: 20px; opacity: 0; transform: translateY(15px); }
    .content { max-width: 80%; left: 0; }
    body.load .countdown { right: 0; transform: translateY(0px); opacity: 1; transition: all 1s linear 5s; }
}

@media (max-width:480px), (max-height:480px) {
    .content { max-width: 100%; }
    .logo { width: 300px; }
    .title, .abstract { font-size: 2rem; line-height: 2.1rem; }
    .countdown-item-value { font-size: 3.5rem; }
    .countdown-item-detail { font-size: 1.4rem; line-height: 1.4rem; }
}

@media (max-height:450px) {
    .abstract { display: none; }
}

@media (max-width:640px) and (orientation:portrait) {
    main::after { background: linear-gradient( to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 50%, rgba(0,0,0,0.6) 100% ); }
}