@charset "utf-8";
/* CSS Document */

header{ 
    display: flex; justify-content: center; align-items: center; border-bottom:1px solid rgba(0, 0, 0, 0.15); background: #fff;
}

.logo{ font-family: "Cute Font"; display: flex; justify-content: center; align-items: center;}
.logo>span{ font-size: 280%; font-weight:bolder; letter-spacing: -0.05em; margin-left: 15px; }

footer{
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    background:#232323; padding:30px 0px 40px 0px; text-align: center; font-size: 85%;
}
footer>div:first-child{ width: 100%; flex-grow: 0; padding:10px 0px; color:#fff }
footer>div:last-child{ flex-basis: 100%; flex-grow: 0; color:rgba(255, 255, 255, 0.3); padding: 0px 20px; }
footer>div:last-child>span{ display: inline-block;}
footer>div:last-child>p{ margin-top: 15px; color:rgba(255, 255, 255, 0.5)}

@media screen and (min-width: 1025px) {
    header{ position: fixed; width: 100%; z-index: 101; height: 77px;  font-family: "Noto Sans KR"; }

    #topmn{ position: absolute; z-index: auto; top:40px; right: calc(50% - 600px); display: flex; align-items: center; font-size: 80%; color:rgba(0, 0, 0, 0.5);  }
    #fmail{ color:rgba(0, 0, 0, 0.5); letter-spacing: -0.03em; }

    #topsince{ position: absolute; z-index: auto; top:30px; left: calc(50% - 600px); display: flex; font-size: 110%; font-weight: 500; color: #9e9d9d; letter-spacing: -0.025em; align-items: flex-end; }
    #topsince>span{ 
        margin-left: 5px; background: #b5b3a8; color:#fff; font-size: 130%; padding: 5px 10px; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
        border-radius: 34px;  border-bottom-left-radius: 0px;
    }

    #menu{ 
        position: fixed; z-index: 101; top:78px; width: 100%; box-sizing: border-box; font-family: "Noto Sans KR";
        border-bottom: 1px solid #ddd; background:#fff url(/images/dot15.svg) repeat-x 0% 50px;  /*backgounrd Y position = #nav>li>a height */
    } 
    #nav{ 
        display: flex; justify-content: space-between;
        list-style: none; margin:auto; text-align: center; width: 1200px; color:#555; 
    }
    #nav>li{ flex:1 1 200px; }
    #nav>li>a{ font-size: 115%; font-weight: 500; display: block; height:50px; line-height: 50px; position: relative; }
    #nav>li>div{ display: none; margin:30px 0px 50px 0px; }
    #nav>li>div>a{ display: block; padding:5px 0px; width: 100%;}
    #nav>li>div>a:hover{ color:#8a5e3b; font-weight: 500;  }

    #nav>li>a:after{content:''; position:absolute; display:block; bottom:0; left:50%; width:0%; height:2px; background-color:#fff; transition:left 0.3s, width 0.3s}
    #nav>li>a.onmenu:after{background-color:#8a5e3b; left:0%; width:100%; }
    #nav>li>a.onmenu{color:#8a5e3b; }

    footer>div:last-child{ padding: 0px 0px;}
}
@media screen and (max-width: 1024px) {
    header{ padding:5px 0px; display: flex; justify-content: center; align-items: center; position: fixed; width: 100%; z-index: 101; }
    #logo{ height: 30px; display: block; padding:3px 0px; }
    #mbl_nvlst{ background: url(/images/mobile_icoList.svg) no-repeat; width: 20px; height: 20px; display: block; position: absolute; z-index: auto; top: 13px; right: 10px; cursor:pointer }

    #menu{ 
        transition-property: all; transition-duration: 0.3s;
        position: fixed; z-index: 102; top:0px; left:-300px; width: 300px; height: 100%; background: #fff; border-right: 1px solid #ddd; box-sizing:border-box; 
    }
    #menu.onmenu{ left:0px; }
    #mbl_nvlstC{ background: url(/images/mobile_icoListX_b.png) no-repeat; width: 20px; height: 20px; display: block; position: absolute; z-index: auto; top: 10px; right: 10px; cursor:pointer }

    #nav{ margin:20px; list-style: none; font-family: "Noto Sans KR"; display: block; }
    #nav>li>a{ font-size: 110%; display: block; line-height: 250%; padding: 0px 10px; border-bottom: 1px solid #ddd; font-weight: 500; }
    #nav>li>div{ border:1px solid #ddd; border-top: 0px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; margin-bottom: 10px; background: #f7f7f7; padding: 20px; display: none;}
    #nav>li>div>a{ display: block; font-weight: 500; line-height: 220%; padding: 0px 10px;  }
    #nav>li>div>a:not(:last-child){ border-bottom: 1px dotted #ddd;}

    footer>div{ display: block; width: 100%; text-align: center; padding: 0px 20px;  }
    footer>div:first-child>img{ height: 50px; }

    #bmask{ position:fixed; z-index:100; top:0px; left:0px; width:100%; height:100%; background: rgba(0, 0, 0, 0.5); display: none;  } /*팝업 및 모바일 메뉴 클릭시 가리개*/
}