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

:root{
    --site-map-title-color: #1d1d1f;
    --site-map-line-color: #d6d6d6;
    --apple-text-color: #06c;
    --apple-footer-text-color: #75757B;
    --pangdafp-logo-color: #72c7ab;
    --footer-text-color: #6e6e73;
    --footer-background: #f5f5f7;
    --footer-border-color: #d2d2d7;
    --footer-text-color: #6e6e73;
    --footer-link-color: #424245;
    --footer-directory-title-color: #1d1d1f;
    --footer-directory-title-color-hover: #000;
}

body{
    display: block;
    font-family: "SF Pro TC","SF Pro Text","SF Pro Icons","PingFang TC","Helvetica Neue","Helvetica","Arial",sans-serif;;
}

.sitemap{
    margin-right: 180px;
    margin-left: 180px;
    margin-top: 60px;
}

.sitemap a{
    text-decoration: none;
    margin-top: 10px;
}

.sitemap h2{
    display: flex;
    text-decoration: none;
    opacity: .88;
    font-size: 20px;
    color: #000;
}



 .line-2022{
    border-top: 1px solid #d2d2d7;
    display: block;
    margin-top: 20px;
    padding: 30px 0px 20px 0;
}


.sitemap .line-202200{
    border-top: 1px solid #d2d2d7;
    display: block;
    padding: 30px 0px 20px 0;
}

.myee{
    /* display: flex; */
    flex-wrap: wrap;
    justify-content: space-between;
}

.myew{
    display: block;
    margin-left: 20rem;
    margin-top: -27.7rem;
}

.mywe{
    margin-left: 40rem;
    margin-top: -33.5rem;
}

.myli{
    margin-left: 20rem;
    margin-top: -35.9rem;
}

.mya{
    margin-left: 40rem;
    margin-top: -25.9rem;
}


/* quick links */

.sitemap .quick h1{
    color: var(--site-map-title-color);
    font-size: 17px;
    margin-top: 63px;
}

.sitemap .quick span{
    display: none;
}

.sitemap .quick li{
    list-style: none;
    margin-top: 10px;
}

.sitemap .quick li a{
    color: var(--apple-text-color);
    font-weight: 500;
}

.sitemap .quick li a:hover{
    text-decoration: underline;
}

/* about user */

.sitemap .mywe .aboutuser h1{
    color: var(--site-map-title-color);
    font-size: 17px;
    margin-top: 63px;
}

.sitemap .mywe .aboutuser li{
    list-style: none;
    margin-top: 10px;
}

.sitemap .mywe .aboutuser li a{
    color: var(--apple-text-color);
    font-weight: 500;
}

.sitemap .mywe .aboutuser li a:hover{
    text-decoration: underline;
}

/* about daily */

.sitemap .myee .aboutdaily h1{
    color: var(--site-map-title-color);
    font-size: 17px;
    margin-top: 63px;
}

.sitemap .myee .aboutdaily li{
    list-style: none;
    margin-top: 10px;
}

.sitemap .myee .aboutdaily li a{
    color: var(--apple-text-color);
    font-weight: 500;

}

.sitemap .myee .aboutdaily li a:hover{
    text-decoration: underline;
}

/* internet */

.sitemap .myew .internet h1{
    color: var(--site-map-title-color);
    font-size: 17px;
    margin-top: 63px;
}

.sitemap .myew .internet li{
    list-style: none;
    margin-top: 10px;
}

.sitemap .myew .internet li a{
    color: var(--apple-text-color);
    font-weight: 500;
}

.sitemap .myew .internet li a:hover{
    text-decoration: underline;
}

/* eassential-oil */

.sitemap .myew .eassential-oil h1{
    color: var(--site-map-title-color);
    font-size: 17px;
    margin-top: 63px;
}

.sitemap .myew .eassential-oil li{
    list-style: none;
    margin-top: 10px;
}

.sitemap .myew .eassential-oil li a{
    color: var(--apple-text-color);
    font-weight: 500;
    text-decoration: none;
}

.sitemap .myew .eassential-oil li a:hover{
    text-decoration: underline;
}

/* the best */

.sitemap .mywe .the-best h1{
    color: var(--site-map-title-color);
    font-size: 17px;
    margin-top: 63px;
}

.sitemap .mywe .the-best li{
    list-style: none;
    margin-top: 10px;
}

.sitemap .mywe .the-best li a{
    color: var(--apple-text-color);
    font-weight: 500;
    text-decoration: none;
}

.sitemap .mywe .the-best li a:hover{
    text-decoration: underline;
}

/* single oil box */

.sitemap .myul h2{
    font-size: 28px;
    line-height: 1.14286;
    font-weight: 600;
    letter-spacing: .007em;
}

.sitemap .myul h1{
    color: var(--site-map-title-color);
    font-size: 17px;
    margin-top: 63px;
} 

.sitemap .myul li{
    list-style: none;
    margin-top: 10px;
}

.sitemap .myul li a{
    color: var(--apple-text-color);
    font-weight: 500;
    text-decoration: none;
}

.sitemap .myul li a:hover{
    text-decoration: underline;
} 

/* leave */

.sitemap .myli h1{
    color: var(--site-map-title-color);
    font-size: 17px;
    margin-top: 63px;
}

.sitemap .myli li{
    list-style: none;
    margin-top: 10px;
}

.sitemap .myli li a{
    text-decoration: none;
    color: var(--apple-text-color);
    font-weight: 500;
}

.sitemap .myli li a:hover{
    text-decoration: underline;
}

/* root */

.sitemap .mya h1{
    color: var(--site-map-title-color);
    font-size: 17px;
    margin-top: 63px;
}

.sitemap .mya li{
    list-style: none;
    margin-top: 10px;
}

.sitemap .mya li a{
    color: var(--apple-text-color);
    text-decoration: none;
    font-weight: 500;
}

.sitemap .mya li a:hover{
    text-decoration: underline;
}

/* search bar */

.sitemap input{
    width: 80%;
    height: 44px;
    border: 0;
    outline: none;
    background: rgba(221, 221, 221, 0.322);
    padding: 10px 10px;
    border-radius: 10px;
    color: var(--footer-directory-title-color);
    margin-top: 10px;
    font-family: "Inter", sans-serif;
    font-size: 17px;
}

.sitemap input::placeholder{
    color:var(--footer-link-color);
}

.sitemap .search-icon img{
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
    position: absolute;
    margin-top: -52.5px;
    
}

.sitemap .search-icon{
    padding: 20px 77%;
}

.sitemap .cancel-text a{
    color: var(--apple-text-color);
    font-weight: 500;
}

.sitemap .cancel-text{
    padding: 20px 88%;
    margin-top: -90px !important;
}

.sitemap .cancel-text a{
    margin-left: -40px;
}

@media (max-width: 1115px){
  .sitemap{
      margin-left: 30px;
      margin-right: 30px;
  }
}

@media (max-width: 846px){
    .mywe{
    margin-left:35rem;
} 
.myew{
    margin-left: 18rem;
}

.mya{
    margin-left: 35rem;
}

.myli{
    margin-left: 18rem;
}
}

@media (max-width: 750px){
    .line-2022, .line-202200{
        width: 100%;
    }

    .sitemap .mya{
        margin-left: 0px;
        margin-top: 1rem;
    }

    .sitemap .myee{
        margin-left: 0px;
    }

    .sitemap .myew{
        margin-left: 0px;
        margin-top: 1rem;
    }

    .sitemap .myli{
        margin-left: 0px;
        margin-top: 1rem;
    }
    .sitemap .myul{
        margin-left: 0px;
    }

    .sitemap .mywe{
        margin-left: 0px;
        margin-top: -10rem;
    }

    .sitemap .line-2022{
        margin-top: -5rem;
    }

}