/*
Theme Name: theme_dangsangolf_2.0
Theme URI: -
Author: ADI
Author URI: -
Description: theme dangsangolf 2.0
Version:2.0
*/

/* all */
:root {
    --color-brand: #314D3C;
    --color-brand-strong: #182126;
    --color-brand-soft: #C9D1C7;
    --color-accent: #8C6A43;
    --color-bg: #F6F3EC;
    --color-surface: #FFFFFF;
    --color-surface-soft: #EFE8DC;
    --color-border: #D7D1C6;
    --color-text: #182126;
    --color-text-soft: #5E665E;
}
html {scroll-behavior: smooth;}
body {position: relative; background-color: var(--color-bg); color: var(--color-text);}
body.gnb-open::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(24, 33, 38, 0.22);
    z-index: 3;
}
.container {position: relative; max-width: 1200px; display: block; width: 100%; height: 100%; margin: 0 auto; overflow: hidden;  padding: 0;}

.hidden { display:none; }

/* header */
/* #header_Wrap { width: 100%; height: auto; position: relative; left: 0; top: 0; z-index: 100;  background-color: transparent; transition: .5s; background: url(./images/header_bg.jpg) repeat;} */
/* #header_Wrap.on {background-color: rgba(0,0,0,.45);} */
#header_Wrap { width: 100%; height: auto; position: relative; left: 0; top: 0; z-index: 100; background-color: rgba(255,255,255,0.96); box-shadow: 0 8px 24px rgba(24, 33, 38, 0.08); }
.headerwrap {transition: .5s; width: 100%; max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; position: relative;}
/* #header_Wrap.active .headerwrap{filter: contrast(0) brightness(10)}
#header_Wrap.active:hover{background-color: rgba(0 0 0 / 90%);}
#header_Wrap.active-3 .headerwrap{filter: none}
#header_Wrap.active-3:hover{background-color: rgba(255, 255, 255, 0.9);}
#header_Wrap.active-6 .headerwrap{filter: contrast(0) brightness(10)}
#header_Wrap.active-6:hover{background-color: rgba(0 0 0 / 90%);}
#header_Wrap.active-7 .headerwrap{filter: none}
#header_Wrap.active-7:hover{background-color: rgba(255, 255, 255, 0.9);} */
.headerwrap .logo { max-width: 300px; }
.headerwrap .logo a {display: block; width: 100%; height: 100%;}
.headerwrap .logo img { width: 100%;}

.cls-1 {fill: #fff;}
.cls-2 {fill: #fff;}
.cls-3 {fill: #fff;}

.headerwrap .list_wrap { width: 60%; display: block;}
.headerwrap .list_wrap .list { width: 100%; display: flex; text-align: center;}
.headerwrap .list_wrap .list_ho { font-size: 18px; width: 25%; text-align: center; position: relative; display: flex; justify-content: center; align-items: center;}

.headerwrap .list_wrap .list_ho:hover::before {content: ''; position: absolute; left: 0%; top: 50%; transform: translate(-50%,-50%); width: 1px; height: 10px; border-left: 2px dotted rgba(140, 106, 67, 0.45);}
.headerwrap .list_wrap .list_ho:hover::after {content: ''; position: absolute; right: 0%; top: 50%; transform: translate(-50%,-50%); width: 1px; height: 10px; border-right: 2px dotted rgba(140, 106, 67, 0.45);}

/* .headerwrap .list_wrap .list_ho:last-child::after {display: none;} */
.headerwrap .list_wrap .list_ho > a {color: var(--color-text); cursor: pointer; position: relative; font-weight: 600; padding: 40px 15px; transition: .4s ease;  display: inline-block; }
.headerwrap .list_wrap .list_ho > a:hover {color: var(--color-brand);}
.headerwrap .list_wrap .list_ho > a span { position: absolute; left: 50%; bottom: 0px; transform: translateX(-50%); width: 0px; height: 4px; background-color: var(--color-accent); opacity: 0; transition: .4s ease; display: block;}
/* .headerwrap .list_wrap .list_ho:hover > a span {width: 100%; opacity: 1; } */    

.headerwrap .list_wrap .list_ho > .site_box {display: none;}
.headerwrap .list_wrap .list_ho > .site_box.on { display: block; position: absolute; left: 50%; top: 96px; width: 100%; transform: translateX(-50%);}
.headerwrap .list_wrap .list_ho > .site_box li {width: 100%; text-align: center; background-color: rgba(24, 33, 38, 0.92); transition: .4s ease; border-bottom: 1px solid rgba(255,255,255,0.08); }

.headerwrap .list_wrap .list_ho > .site_box li a {color: #fff; width: 100%; padding: 12px 0;  display: block;  font-weight: 500; font-size: 16px; }
.headerwrap .list_wrap .list_ho > .site_box li:hover {background-color: var(--color-surface-soft);}
.headerwrap .list_wrap .list_ho > .site_box li:hover a { color: var(--color-brand-strong) !important;}

.headerwrap .list_wrap .list_ho > a.act {color:var(--color-brand-strong);}

/* .headerwrap .list_bg { position: absolute; left: 0; bottom: 0px; width: 100%; height: 66px; background-color: #fff; box-shadow: 0 3px 4px -3px rgb(0 0 0 / 10%); z-index: -1; transition: .3s ease;}
.headerwrap .list_bg.down { bottom: -66px;} */

.mo_btn_wrap {display: none;}
#gnb {display: none;}

/* footer */
#footer_Wrap { width: 100%; margin: 0 auto; background: var(--color-surface-soft); border-top: 1px solid var(--color-border); padding: 36px 0 24px; margin-top: 70px;}
#footer_Wrap .cls-1 {fill: #AAACB0;}
#footer_Wrap .cls-2 {fill: #AAACB0;}
#footer_Wrap .cls-3 {fill: #AAACB0;}
.footerwrap {max-width: 1200px; width: 100%; padding: 1px 0; margin: 0 auto; display: flex; align-items: center; justify-content: space-between;}
.footerwrap .logo { width: 100px; }
.footerwrap .logo a {display: block; width: 100%;}
.footerwrap .logo svg { width: 100%;}

.footerwrap .ft_info ul {max-width: 1200px; display: flex; flex-wrap: wrap;}
.footerwrap .ft_info ul li { display: flex; padding: 5px 0; font-size: 14px; word-break: keep-all; margin-right: 20px; color: var(--color-text-soft); font-weight: 400; line-height: 1.3;}
.footerwrap .ft_info ul li span {font-weight: bold; display: inline-block; margin-right: 5px; }

.copy {font-size: 13px; text-align: center; margin-top: 14px; color: var(--color-text-soft);}

.image-banner { display:block; width:100%; }
.image-banner > a { display:block; }
.image-banner > a > img { width:100%; display:block; }

/*media query*/
@media all and (max-width: 1440px) {
    
}
@media all and (max-width: 1200px) {
    .headerwrap,.footerwrap {max-width: 95%;}

    .headerwrap .list_wrap {width: 600px;}

    .footerwrap .ft_info ul li {line-height: 1.3;}
}
@media all and (max-width: 1000px) {
    .footerwrap {flex-direction: column;}

    .footerwrap .logo {margin-bottom: 20px;}
    .footerwrap .ft_info ul {width: 100%;}

}
@media all and (max-width: 768px) {
    .headerwrap {
        z-index: 5;
        position: relative;
        max-width: 100%;
        padding: 0px 10px;
        background-color: rgba(255,255,255,0.96);
    }
    .headerwrap .logo {padding: 10px 0;}
    .headerwrap .logo,.footerwrap .logo a {width: 100px !important;}

    .headerwrap .list_wrap {
        width: auto;
    }
    .headerwrap .change_lang {
        width: 50px;
    }
    .mo_btn_wrap {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .mo_btn {
        width: 30px;
        height: 30px;
        box-sizing: border-box;
        padding-top: 5px;
        background: transparent;
    }

    .mo_btn span {
        display: block;
        width: 30px;
        height: 3px;
        background-color: var(--color-brand-strong);
        margin: 0 auto;
        margin-bottom: 5px;
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
    }

    .mo_btn.act span {
        background-color: var(--color-brand-strong);
    }
    .mo_btn.act .line1 {
        -webkit-transform: translateY(6px) translateX(-3px) rotate(45deg);
        transform: translateY(6px) translateX(-3px) rotate(45deg);
    } 
    .mo_btn.act .line2 {opacity: 0;} 
    .mo_btn.act .line3 {
        -webkit-transform: translateY(-10px) translateX(-3px) rotate(-45deg);
        transform: translateY(-10px) translateX(-3px) rotate(-45deg);
    } 
    .headerwrap .list_wrap .list {
        display: none;
    }

    #gnb {
        display: block;
        position: fixed;
        right: -100%; top: 0;
        width: 80%; height: 100vh;
        background: var(--color-surface-soft);
        transition: .4s ease;
        padding-top: 96px;
        box-shadow: -12px 0 30px rgba(24, 33, 38, 0.12);
        z-index: 4;
    }
    #gnb.ani {
        right: 0;
    }
    
    #gnb .list {width: 90%; margin: 0 auto;}

    #gnb .list .list_ho {
        line-height: 1.5;
        border-top: 1px solid var(--color-border);
    }
    #gnb .list .list_ho:last-child {
        border-bottom: 1px solid var(--color-border);
    }
    #gnb .list .list_ho a {
        display: block;
        padding: 10px;
        width: 100%;
        height: 100%;
        font-size: 26px;
        color: var(--color-brand-strong);
        font-weight: 600;
    }
    #gnb .list .list_ho .mo_title_btn {
        position: relative;
    }

    #gnb .list .list_ho .mo_title_btn span {
        position: absolute;
        right: 10px; top: 50%; transform: translateY(-50%) rotate(0deg);
        width: 17px; height: 10px; background: url(./images/ico-arrow.png) center/cover no-repeat;
        transition: .3s;
    }
    #gnb .list .list_ho .site_box {
        /* opacity: 0; */
        height: 0;
        transition: 0.3s;
        padding: 0;
        display: none;
    }
    #gnb .list .list_ho .site_box li {
        display: none;
    }

    #gnb .list .list_ho .site_box a {
        font-size: 16px;
        padding-left: 20px;
    }
    #gnb .list .list_ho.show .site_box {
        /* opacity: 1; */
        height: 100%;
        display: block;
        padding: 10px 0;
    }

    #gnb .list .list_ho.show .mo_title_btn {
        color: var(--color-accent);
    }
    #gnb .list .list_ho.show .mo_title_btn span {
        transform: rotate(180deg);
    }

    #gnb .list .list_ho.show .site_box li {display: block;}
}

@media all and (max-width: 479px) {

    .headerwrap .logo, .footerwrap .logo a {
        width: 90px !important;
    }

    #gnb {
        padding-top: 78px;
    }

    #gnb .list .list_ho a {font-size: 20px;}
    #gnb .list .list_ho .site_box a {font-size: 14px;}


    #footer_Wrap {padding: 26px 0 20px; margin-top: 36px;}
    .footerwrap {align-items: flex-start;}
    .footerwrap .ft_info ul {display: block;}
    .footerwrap .ft_info ul li {display: block; margin-right: 0; padding: 4px 0;}
    .footerwrap .ft_info ul li span {margin-right: 0;}
    /* .footerwrap .ft_info ul li:nth-child(8) {display: block; margin-right: 0;} */
}