/** font **/

:root{
}

/** color **/

:root{
    --color1: #e8d3bf;
    --color2: rgba(232,229,227,0.1);
    --color3: #fff;
    --color4: rgba(232,229,227,0.2);
    
    --color5: #6b4334;
    --color6: #5e5e33;
    
    --black: #fff;
    --base: #7a706c;
    --base2: #706562;
    --base3: #5b504d
}

/** other **/

#fakeloader{
    background-image: linear-gradient(to bottom right, var(--color5), var(--color6));
}

header::before{
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: linear-gradient(to bottom, rgba(122,112,108,1), rgba(122,112,108,0));
    z-index: -1;
    opacity: 0;
    transition: opacity 1s;
}
header.active::before{
    opacity: 1;
}
header #logo {
    max-width: 240px!important;
    width: 240px!important;
    transition: 1s cubic-bezier(.02,.68,.4,1);
    transition-property: max-width, width;
}
header.active #logo{
    max-width: 170px!important;
    width: 170px!important;
}
header #header #header_menu li:last-child a span{
    background-color: var(--color5);
}
header #header #header_menu li:last-child a:hover span{
    background-color: var(--color6);
}
.drawer:not(.drawer-open) .drawer-hamburger-icon, .drawer .drawer-hamburger-icon:after, .drawer .drawer-hamburger-icon:before{
    background-color: #fff!important;
}

.drawer-nav{
    background-image: linear-gradient(to bottom right, var(--color5), var(--color6));
}

#main_img{
    padding-left: 20%;
    height: 900px;
    padding-top: 200px;
    padding-bottom: 100px;
    background-image: linear-gradient(to bottom right, var(--color5), var(--color6));
    background-size: 30% 500px;
    background-position: top left;
    background-repeat: no-repeat;
}
#main_img::before{
    position: absolute;
    content: "";
    width: 400px;
    height: 400px;
    background-image: url(./Dup/img/img1.png);
    background-size: contain;
    top: -100px;
    right: -100px;
    animation: anime1 50s linear infinite;
    z-index: 2;
}
@keyframes anime1 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
#main_img::after{
    position: absolute;
    content: "";
    top: 500px;
    left: 10%;
    right: 0;
    bottom: 0;
    background-image: url(./Dup/img/bg_img.jpg);
    background-size: cover;
    background-position: center;
}
#main_img .catch{
    left: 5%;
    bottom: 150px;
    z-index: 1;
}
#main_img .catch p{
    background-color: var(--base3);
    clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
    transition: clip-path 1s cubic-bezier(.02,.68,.4,1);
}
#main_img .catch p.active{
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

.top_cotents{
    background-image: linear-gradient(to bottom right, var(--color5), var(--color6));
}
.top_cotents figure, .top_cotents .con_img{
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
}

#intro{
    background-color: var(--color2);
}

.more a{
    background-color: var(--color5);
}
.more a:hover{
    background-color: var(--color6);
}

#page_title{
    padding-bottom: 50px;
    background-image: linear-gradient(to bottom right, #fff, #fff);
    background-size: 50px 2px;
    background-repeat: no-repeat;
    background-position: bottom;
    background-color: var(--base2);
}

.cate_list li a{
    background-color: var(--color2);
}
.cate_list li a:hover{
    background-color: var(--color4);
}

.pager li a{
    background-color: var(--color5);
}
.pager li a:hover{
    background-color: var(--color6);
}

.cms_2-g .box_wrap{
    box-shadow: none;
}
.cms_2-g .swiper-pagination-bullet{
    background: var(--color2);
}
.cms_2-g .swiper-pagination-bullet-active{
    background: var(--color4);
}
.cms_2-g .box_txt1{
    color: #fff!important;
}

.cms_5-c .box_title1, #cms_5-c .box_title1{
    border-color: var(--color4);
}
.cms_5-c .box_txt1::before, #cms_5-c .box_txt1::before{
    color: #fff;
}

#cms_6-a .box_wrap, .cms_6-a .box_wrap{
    justify-content: flex-start;
}
.buy_btn a{
    background-color: var(--color6);
}
.buy_btn a:hover{
    background-color: var(--color5);
}

#info .txt_color1{
    color: #fff;
}

.foot_link a{
    background-color: transparent;
    background-image: linear-gradient(to bottom right, rgba(107,67,52,0.4), rgba(94,94,51,0.4));
}

footer > div{
    background-image: linear-gradient(to bottom right, var(--color5), var(--color6));
}


/** tablet 780 **/
@media screen and (max-width: 768px){
#main_img{
    background-size: 40% 500px;
}
}

/** mobile 750 **/
@media screen and (max-width: 667px){
header #logo {
    max-width: 150px!important;
    width: 150px!important;
}
header.active #logo{
    max-width: 120px!important;
    width: 120px!important;
}
header #logo .logo{
    text-align: left;
    padding-left: 10px;
}
#main_img {
    height: 550px;
    padding-top: 100px;
    padding-bottom: 50px;
    background-size: 50% 300px;
}
#main_img::before {
    width: 200px;
    height: 200px;
    top: -50px;
    right: -80px;
}
#main_img::after {
    top: 300px;
    left: 0;
    right: 0;
    bottom: 0;
}
#main_img .catch {
    bottom: 100px;
}
}