h1 {
    font-size: 40px;
    color: #DDD9CE;
    font-weight: bold;
}

a {
    color: #fff;
}

h2 {
    font-size: 28px;
    color: #DDD9CE;
    font-weight: bold;
    padding: 2%;
}

header {
    background-color: #3F3528;
    padding: 2% 0;
    word-break: normal;
}

.logo {
    display: none;
}

nav {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    text-align: center;
}

nav img {
    width: 100%;
    height: auto;
}

nav a {
    font-size: 25px;
    font-weight: bold;
    color: #fff;
}

.ban {
    display: flex;
    align-items: center;
    width: 80%;
    margin: auto;
    background-color: #8B6E48;
}

.ban h3 {
    font-size: 22px;
    padding: 10px;
    color: #000000;
    background-color: #DDD9CE;
}

.marqee {
    overflow: hidden;
    position: relative;
    width: 80%;
}

.marqee ul {
    display: flex;
    animation: marqee 15s linear infinite;
}

.marqee ul li {
    white-space: nowrap;
    margin-right: 2em;
    font-weight: bold;
    color: yellow;
}

@keyframes marqee {
    0% {
        left: 100%;
        transform: translateX(0%);
    }

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


.banner1 {
    display: flex;
    justify-content: space-between;
    width: 80%;
    padding: 2% 0;
    margin: auto;
    background-color: #3F3528;
}

.banner1_center {
    width: 20%;
}

.banner1_center ul {
    border: 1px solid #DDD9CE;
    height: 500px;
    overflow-y: overlay;
    overflow-x: hidden;
    float: left;
    width: 99%;
}

.banner1_center h2 {
    background-color: #DDD9CE;
    color: #000000;
    text-align: center;
}

.banner1_center ul::-webkit-scrollbar {
    width: 8px;
    background-color: #929292;
}

.banner1_center ul::-webkit-scrollbar-thumb {
    background-color: #5F5F5F;
}

.banner1_center li {
    border-bottom: 1px solid #DDD9CE;
    font-size: 22px;
    padding: 15px;
}

.banner1-left {
    width: 45%;
    padding-left: 2%;
}

.banner1-left img {
    width: 100%;
}

.banner1-left div {
    display: flex;
}

.banner1-left div h2 {
    font-size: 20px;
}

.banner1-left div img {
    width: 97%;
}

.banner1-right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 30%;
}

.banner1-right img {
    width: 85%;
    margin: 0% auto;
}

.slide {
    text-align: center;
    display: flex;
    flex-direction: column;
    background-color: #3F3528;
    width: 80%;
    margin: auto;
}

.slide span {
    color: #fff;
    background-color: #000;
    font-size: 30px;
    padding: 2% 4%;
}

.slide img,
.slide span {
    width: 85%;
    margin: auto;
}

.Latest {
    background-color: #3F3528;
    width: 80%;
    margin: auto;
    text-align: center;
    padding: 5% 0;
}

.padding_article {
    padding: 0% 5% 0% 14%;
    text-align: left;
}

.padding_article h2 {
    padding: 2% 0;
    font-size: 32px;
}

.padding_article p {
    color: #DDD9CE;
}

hr {
    width: 25%;
    border: 1px solid #DADADA;
    margin: 3% auto;
    opacity: 0.85;
}

.articles {
    display: flex;
    align-items: center;
    width: 85%;
    margin: auto;
    justify-content: space-evenly;
}

.articles img {
    width: 50%;
    padding: 3% 0;
}

.articles-right {
    color: #fff;
    width: 30%;
    text-align: left;
}

.articles-right div {
    text-align: right;
    margin: 15px 0;
}

.articles-right div a {
    color: #DDD9CE;
    background-color: #8B6E48;
    padding: 2%;
}

#switch,
header label {
    display: none;
}

footer {
    background-color: #000;
    padding: 1%;
}

footer p {
    color: #fff;
    text-align: center;
    font-size: 20px;
}

/* page */
#page-articles .page-right .article_rendering {
    display: none;
}

#page-articles .articles {
    flex-direction: column;
}

#page-articles .articles-right {
    width: 100%;
    text-align: center;
}

#page-articles .articles-right div {
    text-align: center;
    margin: 5% 0;
}
#page-articles .padding_article {
    padding: 0% 5% 0% 9%;
}
.page-text {
    background-color: #3F3528;
    width: 80%;
    margin: auto;
    text-align: center;
    padding-top: 2%;
}

.page-text h1 {
    font-size: 25px;
    color: #000;
    background-color: #DDD9CE;
    width: 80%;
    margin: auto;
}

.page-text h3 {
    font-size: 25px;
    color: #DDD9CE;
    font-weight: bold;
    padding-top: 2%;
}

.page-text div {
    font-size: 20px;
    color: #000;
    width: 60%;
    margin: auto;
    border-bottom: 2px solid #DDD9CE;
}

.page {
    display: flex;
    justify-content: space-between;
    width: 80%;
    padding: 2% 0;
    margin: auto;
    text-align: center;
    background-color: #3F3528;

}

.page-left {
    width: 70%;
    margin-left: 2%;
}

.newpage {
    display: flex;
    justify-content: space-between;
    margin: 2% 0;
}

.newpage:nth-child(1) span {
    width: 49%;
}

.newpage:nth-child(2) span {
    width: 30%;
}

.page-left span {
    background-color: #000;
}

.page-left img {
    width: 100%;
}

.page-right {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 30%;
}

.search-box {
    display: flex;
    padding: 5%;
}

.search-box .submit {
    width: 20%;
    background-image: url("../img/ic_search.webp");
    background-repeat: no-repeat;
    background-position: center;
}

.search-box input {
    width: 100%;
    font-size: 25px;
    padding: 3% 0;
}

.page-right ul {
    padding: 0 5%;
    text-align: left;
}

.page-right ul h3 {
    color: #000000;
    background-color: #DDD9CE;
    width: 80%;
    font-size: 22px;
    font-weight: bold;
}

.page-right ul div {
    border-bottom: 2px solid #DDD9CE;
    text-align: center;
}

.page-right ul li {
    color: #F1F1F1;
    margin: 5% 0;
    font-size: 18px;
}

.page-right img {
    width: 85%;
    margin: 2% auto;
}

.handoff {
    background-color: #8B6E48;
    color: #FFFFFF;
    font-size: 25px;
    margin: 0 5%;
    padding: 10px 3%;
    font-weight: bold;

}

.pages_style {
    color: #DDD9CE;
    font-size: 20px;
    margin: 0 15px;
    padding: 10px 1%;
    border: 2px solid #DDD9CE;
}

.pages_style:hover {
    background-color: #DDD9CE;
    color: #3F3528;
}

.page_toggle {
    width: 80%;
    margin: auto;
    background-color: #3F3528;
    padding: 3% 0;
    text-align: center;

}

/* article */
.item {
    width: 80%;
    background-color: #3F3528;
    margin: auto;
    text-align: center;
    padding: 5% 0;
}

.item img {
    width: 70%;
    height: auto;
    padding: 3% 0;
}

.item p {
    white-space: break-spaces;
    word-break: normal;
    color: #F1F1F1;
    padding: 0 10%;
    font-size: 20px;
    text-align: left;
}
.item p a,.articles-right p a{
    color: #ffd882;
}

.item h1 {
    padding: 0 2%;
    font-size: 35px;
}

.item h2 {
    padding: 2%;
    font-size: 30px;
}

/* contact us */
.contact {
    background-color: #3F3528;
    width: 80%;
    margin: auto;
    padding: 5% 0;
    text-align: center;
}

.contact div {
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact input {
    width: 20%;
}

.contact p {
    font-size: 20px;
    color: #FFFFFF;
}

.contact .submit {
    background-color: #8B6E48;
    color: #DADADA;
    margin-top: 3%;
    padding: 10px 1%;
    border: none;
    width: 15%;
}

textarea {
    width: 40%;
    height: 180px;
    margin: 3% 1%;
}

.article_overview {
    width: 80%;
    background-color: #3F3528;
    margin: auto;
    padding: 3% 0;
    text-align: center;
}

.article_overview h1 {
    padding: 1% 0;
}

@media (max-width:1024px) {
    nav {
        display: none;
    }

    #switch:checked~header #nav {
        display: flex;
        position: absolute;
        flex-direction: column;
        background-color: #8B6E48;
        align-items: center;
        width: 100%;
        top: 10%;
        text-align: center;
        justify-content: center;
        z-index: 2;
    }

    .logo {
        display: block;
        width: 70%;
        padding-left: 15px;
    }

    header label {
        display: block;
        font-size: 35px;
        color: #fff;
        padding-right: 15px;
    }

    header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        text-align: left;
    }

    nav a:nth-child(5) {
        display: none;
    }

    nav a {
        border-bottom: 1px solid #3F3528;
        width: 100%;
        padding: 1% 0;
    }

    .banner1_center li {
        font-size: 17px;
    }

    .articles {
        flex-direction: column;
    }

    .articles img {
        width: 100%;
    }

    .articles-right {
        width: 100%;
        text-align: left;
    }

    .articles-right div {
        text-align: center;
        margin: 8% 0;
    }

    .padding_article {
        padding: 0% 5% 0% 8%;
    }

    .slide span {
        font-size: 22px;
    }

    /* page */
    #page-articles .padding_article {
        padding: 0% 5% 0% 0%;
    }
    .page-left h2{
        font-size: 20px;
    }
}

@media (max-width:768px) {
    .ban,.banner1,.slide,.Latest,.page_toggle,.page-text,.page,.page-right,.article_overview,.item,.contact{
        width: 100%;
    }
    .banner1 {
        flex-direction: column;
        align-items: center;
    }

    .banner1-left,
    .banner1-right {
        width: 90%;
    }

    .banner1_center {
        width: 90%;
        margin: 10% 0;
    }

    .ban h3 {
        font-size: 15px;
        padding: 1%;
    }

    .banner1-right img {
        margin: 5% auto;
    }

    .pages_style,
    .handoff {
        padding-top: 5px;
        padding-bottom: 5px;
    }

    /* page */
    #page-articles .page-left .article_rendering,
    .adg {
        display: none;
    }

    #page-articles .page-right .article_rendering {
        display: block;
    }

    .page {
        flex-direction: column;
        align-items: center;
    }

    .page-left {
        width: 100%;
        margin: 0;
    }

    .newpage {
        margin: 2%;
    }

    .page-right {
        width: 85%;
    }

    #page-articles .articles {
        width: 100%;
    }


    .contact div {
        flex-direction: column;
    }

    .contact input {
        width: 35%;
    }

    textarea {
        width: 70%;
    }

    .contact .submit {
        width: 20%;
    }
    .item a img{
        width: 100%;
    }
}

@media (max-width:500px) {
    h2 {
        font-size: 20px;
    }

    .logo {
        width: 60%;
    }

    #switch:checked~header #nav {
        top: 8%;
    }

    nav a {
        font-size: 20px;
    }
    nav a {
        padding: 5% 0;
    }

    .banner1-left div h2 {
        font-size: 15px;
    }

    .contact input,
    textarea {
        width: 80%;
    }

    .contact .submit {
        width: 50%;
    }

    .ban h3 {
        padding: 1% 0;
        text-align: center;
    }

    .slide span {
        font-size: 17px;
    }

    .padding_article h2 {
        font-size: 20px;
    }

    .page_toggle {
        padding: 10% 0;
    }
    .page-left h2 {
        font-size: 15px;
    }
    .page-text h1 {
        font-size: 20px;
    }
    .item h1 {
        font-size: 24px;
    }
    .item p {
        padding: 0 5%;
        font-size: 17px;
    }
    .item img {
        width: 90%;
    }
}

@media (width:375px) {
    #switch:checked~header #nav {
        top: 10%;
    }
}