/* default */
@import url("reset.css");
@import url("default.css");

/* header */
header {
    height: 100vh;
    background-image: url("../images/bg/homeShowcase.jpg");
    background-size: cover;
    background-repeat: no-repeat;

    box-sizing: border-box;
    padding: 20vh 19vw 0;
    position: relative;

}


header svg {
    width: 98vw;
    position: absolute;
    z-index: 20;
    left: -160px;
    top: -160px;
    opacity: 0;

    stroke-dasharray: 800;
    stroke-dashoffset: 2000;
    animation: dash 2.8s .8s linear none;
}

@keyframes dash {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        /* stroke-dasharray: 0; */
        stroke-dashoffset: 0;
    }
}

header img {
    width: 34%;
    position: absolute;
    top: 50px;
    left: 10px;
    opacity: 0;
    position: relative;

    animation: himg 1.2s ease 2.4s forwards;

}

@keyframes himg {
    0% {
        position: absolute;
        top: 50px;
        opacity: 0;
    }

    100% {
        position: absolute;
        top: 10px;
        opacity: 1;
    }
}

header h1 {
    font-family: 'Noto Serif TC', serif;
    font-weight: 900;
    font-size: 68px;
    letter-spacing: 0.08em;
    margin-bottom: 100px;
}

header h1>p {
    font-family: 'Noto Serif TC', serif;
    font-weight: 900;
    font-size: 46px;
    letter-spacing: 0.06em;
    padding-bottom: 48px;
    opacity: 0;
    position: relative;
    bottom: -40px;

    animation: hh1 1.2s ease .4s forwards;
}

header h1>span {
    opacity: 0;
    position: relative;
    bottom: -40px;
    animation: hh1 1.2s ease 1.4s forwards;
}

header>p {
    font-weight: 700;
    font-size: 28px;
    letter-spacing: 0.08em;

    opacity: 0;
    position: relative;
    bottom: -40px;

    animation: hp 1.2s ease 2.4s forwards;
}

@keyframes hh1 {
    100% {
        opacity: 1;
        bottom: 0;
    }
}

@keyframes hp {
    100% {
        opacity: 1;
        bottom: 0;
    }
}

/* slider */
main {
    height: calc(100vh - 80px);
    background-color: var(--pri_bg);
    box-sizing: border-box;
    position: relative;
    /* margin-bottom: 160px; */
    z-index: 50;
}

main .slider_container {
    width: 900px;
    height: 375px;

    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    overflow: hidden;
    display: flex;
}

.slider_container img {
    display: block;
    width: 100%;
}

main .slider_container .sliderWbtn {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    background-image: url(../images/bg/flowerWithVase.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
    box-sizing: border-box;
    text-align: center;
    overflow: hidden;
}

main .slider_container .sliderWbtn div {
    float: right;
    margin: 80px 100px;

}

main .slider_container .sliderWbtn h1 {
    margin-bottom: 20px;
    letter-spacing: .3em;
}

main .slider_container .sliderWbtn h2 {
    color: #fff9eeb1;
    font-size: 36px;
    margin-bottom: 40px;
    letter-spacing: .3em;
}

main .slider_container .sliderWbtn a {
    color: var(--sub_brown);
    border-color: var(--sub_brown);
}

main .slider_container .sliderWbtn .btn::before {
    background-color: var(--sub_brown);
}

main svg {
    /* border: 1px solid red; */
    width: 40px;
    height: auto;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    cursor: pointer;
    color: var(--sub_brown);
}

#previous {
    left: calc((100vw - 900px)/2 - 40px - 20px);
}

#next {
    left: calc((100vw - 900px)/2 + 900px + 20px);
}

/* brand */

.brand {
    cursor:none;
    text-align: center;
    margin-bottom: 160px;
    position: relative;
    padding-top: 160px;
    transition: 1s;
}

.brand::after {
    content: "";
    width: 400px;
    height: 800px;

    background-image: url("../images/ele/leaves1.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 120px 0;

    position: absolute;
    right: 0px;
    top: 350px;

}

.brand::before {
    content: "";
    width: 450px;
    height: 800px;

    background-image: url("../images/ele/leaves2.svg");
    background-repeat: no-repeat;
    background-size: contain;

    position: absolute;
    left: -180px;
    bottom: -80px;
    z-index: -1;

}
.brand .content{
    background: #fff;
     mix-blend-mode: screen;
     position: relative;
     z-index: -2;
     cursor:none;
}
.shapes {
    cursor:none;
    position: absolute;
    left: 0;
    top: 412.5px;
    height: 167px;
    margin: 0 auto;
    width: 80%;
    background: #41382f;
    overflow: hidden;
    z-index: -3;
    /* border: 10px solid red; */
}

.shape {
    cursor:none;
    position: absolute;
    left: 0;
    top: 0;
    /* border: 1px solid red; */
    border-radius: 50%;
    background-color: #cc8c6e;
    width: 100px;
    height: 100px;
}

.brand img {
    width: 210px;
    margin-bottom: 60px;
}

.brand p {
    font-weight: 600;
    font-size: 18px;
    letter-spacing: 0.2em;
    margin-bottom: 24px;
    color: #000;
}

.colorbar {
    height: 30px;
    background-image: linear-gradient(60deg, var(--pri_pink) 0% 15%, var(--pri_green)15% 40%, var(--pri_rice)40% 100%);

    margin-bottom: 160px;
}

/* hot product */
.hot {
    position: relative;
    margin-bottom: 160px;
    text-align: center;
    transition: 1s;
}

.hot h1 {
    margin-bottom: 600px;
}

/* hot product - svg */
.hot svg {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
}

.hot .svg_l {
    left: 140px;
    top: 100px;
}
.hot .svg_l path{
    animation: pathL 3s linear infinite alternate;
}
@keyframes pathL {
    50%{
        d:path("M178.453 0.500233C259.187 -1.70654 292.107 48.2218 339.453 79.0831C402.184 119.971 485.934 135.87 495.5 210C505.606 288.311 456.016 358.283 389 400.5C328.752 438.454 246.034 431.339 178.453 409C116.522 388.529 67.5925 359.449 38 301.5C5.72094 238.289 -10.5622 167.665 9.50017 106.499C29.5626 45.3335 107.628 2.43617 178.453 0.500233Z")
    }
    100%{
        d:path("M170.5 0.000245986C266.547 0.00013189 291.899 47.6306 339.246 78.4918C401.976 119.38 495.746 150.249 495.746 224.993C495.746 317.993 435.746 379.493 371.246 409.493C306.682 439.523 223.677 438.963 161.746 418.492C99.8151 398.021 60.8386 347.442 31.2462 289.493C-1.03293 226.282 -11.7538 148.492 18.2463 88.4926C48.2464 28.4929 99.6483 0.000331138 170.5 0.000245986Z")
    }
}

.hot .imgR {
    width: 390px;
    height: 390px;
    background-image: url("../images/product/pinky.jpg");
    background-size: cover;
    clip-path: url(#pathR);

    position: absolute;
    right: 200px;
    top: 150px;
}

#pathR path{
    animation: pathR 3s linear infinite alternate;
}
@keyframes pathR{
    50%{
        d:path("M243.5 0.500064C290.593 0.384563 339.027 9.85499 367.3 44.857C394.791 78.892 388.401 133.059 385 175.5C380.256 234.698 391.055 304.484 342 342.5C282.792 388.385 197.955 401.584 127.5 372.5C55.0303 342.585 2.0737 274.183 0.499988 200.501C-0.868936 136.406 64.721 103.775 117.5 62.5005C153.399 34.4267 196.583 0.615132 243.5 0.500064Z")
    }
    100%{
        d:path("M240.353 0.35113C287.445 0.23563 325.227 18.498 353.5 53.5C387.022 95 398.901 147.559 395.5 190C390.756 249.198 392.408 314.334 343.352 352.351C284.144 398.236 197.455 404.084 127 375C54.5303 345.085 1.94751 290.028 0.373794 216.345C-0.99513 152.251 47.0735 107.625 99.8525 66.3507C135.751 38.2769 193.436 0.466199 240.353 0.35113Z")
    }
}


.hot .imgM {
    width: 180px;
    height: 180px;
    background-image: url("../images/product/pinkyDemo.jpg");
    background-size: cover;
    clip-path: url(#pathM);

    position: absolute;
    left: 500px;
    top: 355px;
}

.hot .pathMout {
    left: 493px;
    top: 347px;
}

/* hot product - svg-text */
.hot .textContainer {
    position: absolute;
    left: 245px;
    top: 180px;
    text-align: left;
}


.textContainer p {
    margin-bottom: 35px;
}

/* textContainer btn */
.textContainer a {
    color: var(--sub_green);
    background-color: #fff;
    padding: 8px 20px;
    border: none;
    margin-left: 80px;
    box-sizing: border-box;
}

.textContainer .btn::before {
    content: "";
    top: -3px;
    /* for vertical center */
    color: var(--sub_green);
    background-color: rgb(255, 255, 255);
    text-align: center;
    /* visibility: hidden; */
    opacity: 0;
    transition: .5s;
}

.textContainer .btn:hover::before {
    /* visibility: visible; */
    opacity: 1;
    content: "GO";
    color: var(--sub_green);
    position: absolute;
    background-color: rgb(255, 255, 255);
}

/* hot product - hots */
.hot ul {
    display: flex;
    justify-content: space-around;
    margin-bottom: 100px;

}

.hot ul div {
    position: relative;
    right: 0;
    top: 0;
    
    width: 183px;
    height: 194px;
    box-sizing: border-box;

    background-size: 110%;
    background-position: center center;
    clip-path: url(#pathHots);

    margin-bottom: 15px;
    transition: all .5s;
}

/* hot product - hots – text */
.hot ul a {
    text-align: center;
    text-decoration: none;
    color: var(--pri_brown);

    font-size: 16px;
    font-weight: 500;
    line-height: 40px;
    letter-spacing: 0.1em;
}

/* hot product - hots – photo */
.hot1 {
    animation: product 2s infinite linear alternate;
    background-image: url("../images/product/bluesea.jpg");
}

.hot2 {
    animation: product 2s infinite .8s linear alternate;
    background-image: url("../images/product/pinky.jpg");
}

.hot3 {
    animation: product 1.6s infinite .2s linear alternate;
    background-image: url("../images/product/eucalyptus.jpg");
}

.hot4 {
    animation: product 2s infinite 1s linear alternate;
    background-image: url("../images/product/beauty.jpg");
}

.hot5 {
    animation: product 2s infinite .6s linear alternate;
    background-image: url("../images/product/elf.jpg");
}

@keyframes product{
    0%{
        top:0px;
    }
    100%{
        top:6px;
    }
}


/* hot product - hots – hover */
.hot li:hover div {
    background-size: 130%;
    position: relative;
}

.hot li:hover div::before {
    content: "";
    width: 200px;
    height: 200px;
    background: radial-gradient(closest-side at 50% 50%, rgb(255, 255, 255, 0) 0% 60%, rgb(65, 56, 47, .15));
    position: absolute;
    left: 0;
    top: 0;

}

.hot li:hover a {
    color: var(--sub_brown);
}

/* comment */
.comment {
    overflow: hidden;
    padding-top: 60px;
    padding-bottom: 80px;
    background-image: url("../images/bg/homeTexture.jpg");
    margin-bottom: 160px;

    transition:1s;
    position: relative;
}

.comment li {
    opacity: .7;
}

.comment li:hover {
    opacity: 1;
}

.comment .comTop {
    transform: translateX(0);
    animation: comTop 30s linear infinite;
}

.comment .comTop:hover,
.comment .comDown:hover {
    animation-play-state: paused;
}

@keyframes comTop {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.comment .comDown {
    transform: translateX(-50%);
    animation: comDown 30s linear infinite;
}

@keyframes comDown {
    0% {
        transform: translateX(-50%);
    }

    100% {
        transform: translateX(0%);
    }
}

.comment h1 {
    margin-bottom: 60px;
}

.comment ul {
    display: flex;
    flex-wrap: nowrap;
}

.comment h1+ul {
    margin-bottom: 30px;
}

.comment li {
    margin-right: 20px;
    background-color: #fff;
    padding: 0 12px;
    border-radius: 12px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* news */
.news {
    display: flex;
    justify-content: space-between;
    margin-bottom: 160px;
    transition:1s;
    position: relative;
}

.news div {
    background-color: #CC8B6E;
    padding: 40px 30px 0 36px;
    height: auto;
    width: 200px;
    box-sizing: border-box;
    outline: .8px solid #fff;
    outline-offset: -10px;
}

.news div h1 {
    font-size: 26px;
    color: #fff;
    animation: typing 3.5s steps(5) infinite forwards;
    overflow: hidden;
    white-space: nowrap;
}
@keyframes typing{
    from{
        width: 0;
    }
    to{
        width: 160px;
    }
}

.news ul {
    width: 80%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.news ul span {
    font-size: 14px;
    padding: 5px 10px;
    background-color: var(--pri_bg);
    border-radius: 12px;
    margin-right: 16px;
}

.news ul p {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.news ul hr {
    height: .6px;
    background-color: var(--sub_brown);
    border: none;
}



@import url('indexRWD.css');