.red {border:1px solid red;}
.blue {border:1px solid blue;}
/**/
:root {
    --layout-wrap-size : 1000px;
}

/**/
body {
    min-width:var(--layout-wrap-size);
}
.wrap {
    width:var(--layout-wrap-size);
    margin:auto;
}

/* header */
header {
    padding-top:20px;
}
header .wrap {min-height:50px;}
header .wrap .logo {
    flex-basis:190px;
    flex-shrink: 0;
    justify-content: center;
    align-content: center;
}
header .wrap .logo a {
    display:flex;
    justify-content: flex-start;
    align-content: center;
}
header .wrap .tnb {
    border:3px solid #badb22;
    border-radius:10px;
    background:#f9f9f9;
    flex-grow:1;
    /*display:flex;*/
    position:relative;
}
header .wrap .tnb:before {
    content:'';
    position:absolute;
    top:-12px;
    left:-11px;
    width:62px;
    height:59px;
    background:url(/images/content/layout/menu_image.png) no-repeat;
}
header .wrap .tnb .main-menu {
    flex-grow:1;
    display:flex;
    height:100%;
    justify-content: space-evenly;
}
header .wrap .tnb .main-menu .menu {}
header .wrap .tnb .main-menu .menu.active {
}
header .wrap .tnb .main-menu .menu.active a {
    color:#8daa18;
    font-weight:bold;
}
header .wrap .tnb .sub-menu {
    position:absolute;
    top:45px;
    width:96%;
    margin:auto;
    left:0; right:0;
    z-index:100;
}
header .wrap .tnb .sub-menu > div {
    position:absolute;
    display:none;
    font-size:14px;
    padding:4px 20px 4px 20px;
    background:#badb22;
    border-radius:0 0 15px 15px;
}
header .wrap .tnb .sub-menu > div a {
    padding:0 4px;
}
header .wrap .tnb .sub-menu > div a:before {
    content:'·';
}
header .wrap .tnb .sub-menu .sub-menu-1 {} /* 법인 이야기 */
header .wrap .tnb .sub-menu .sub-menu-2 {} /* 행복의집 이야기 */
header .wrap .tnb .sub-menu .sub-menu-3 {left:25%;} /* 사업안내 */
header .wrap .tnb .sub-menu .sub-menu-4 {left:47.5%;} /* 행복 나누기 */
header .wrap .tnb .sub-menu .sub-menu-5 {right:0;} /* 사랑방 이야기 */
header .wrap .tnb .sub-menu .sub-menu-6 {right:0;} /* 묻고 답하기 */

/**/
#sub-visual {
    height:265px;
    margin-bottom:20px;
}
#sub-visual .wrap {
    height:100%;
    background:url(/images/content/layout/sub_happy.jpg) no-repeat center top;
}

/**/
.container-section {
    align-items:flex-start;
}
.content-section {
    flex-grow: 1;
}

/**/
.side-menu {
    flex-shrink: 1;
    border:1px solid #d0d0d0;
    padding:20px 10px 100px 10px;
    border-radius:18px;
    width:176px;
    min-width:176px;
    max-width:176px;
    box-shadow:0 10px 20px 2px rgba(0,0,0,0.1);
    background-repeat: no-repeat;
    background-position:left -2px bottom -10px;
    margin:11px 40px 0 0;
}
.side-menu.cate-1 {background-image:url(/images/content/layout/category_bottom01.png);}
.side-menu.cate-2 {background-image:url(/images/content/layout/category_bottom02.png);}
.side-menu.cate-3 {background-image:url(/images/content/layout/category_bottom03.png);}
.side-menu.cate-4 {background-image:url(/images/content/layout/category_bottom04.png);}
.side-menu.cate-5 {background-image:url(/images/content/layout/category_bottom05.png);}
.side-menu.cate-6 {background-image:url(/images/content/layout/category_bottom06.png);}
.side-menu .side-title {
    color:#8daa18;
    font-weight:bold;
    margin-bottom:12px;
    padding:0 12px;
}
.side-menu a {
    font-size:13px;
    color:#777;
    display:block;
}
.side-menu li.m1 {
    margin-bottom:4px;
}
.side-menu li.m1:last-child {
    margin-bottom:0;
}
.side-menu li.m1.active {

}
.side-menu li.m1.active a.m1 {
    background:linear-gradient(0deg, #9fbc31, #b1d230 , #9fbc31);
    border-radius:10px;
    position:relative;
}
/*
.side-menu li.m1.active a.m1:before,
.side-menu li.m1.active a.m1:after {
    content:'';
    position:absolute;
    width:1px;
    height:10px;
    background:#bcbcbc;
}
.side-menu li.m1.active a.m1:before {left:0; bottom:0;}
.side-menu li.m1.active a.m1:after {right:0; bottom:0;}
 */
.side-menu a.m1 {
    padding:3px 16px 5px 16px;
}
.side-menu li.m1.active a.m1 {
    color:#fff;
}
.side-menu ul.m2 {
    display:none;
    position:relative;
    border:1px solid #bcbcbc;
    border-top:0;
    padding:5px 0;
    border-radius:0 0 15px 15px;
}
.side-menu ul.m2:before,
.side-menu ul.m2:after {
    content:'';
    position:absolute;
    width:1px;
    height:10px;
    background:#bcbcbc;
}
.side-menu ul.m2:before {left:-1px; top:-10px;}
.side-menu ul.m2:after {right:-1px; top:-10px;}
.side-menu li.m1.active ul.m2 {
    display:block;
}
.side-menu li.m2 {}
.side-menu a.m2 {
    /*padding:1px 10px 2px 10px;*/
    margin:1px 10px 2px 20px;
    font-size:13px;
    color:#333;
    position:relative;
}
.side-menu a.m2:before {
    content:'·';
    position:absolute;
    left:-8px;
}
.side-menu li.m2.active a.m2 {
    font-weight:bold;
}

/**/
footer {
    margin-top:40px;
}


/* 행복의집 이야기 - 원장 인사말 */
#happystory02 {color:#000;user-select:none;-ms-user-select:none;-webkit-user-select:none;word-break: keep-all;padding:60px 0 80px 40px;}
#happystory02 div {font-family: 'Noto Sans KR', sans-serif;font-size:18px;color:#333;}
#happystory02 p {padding:5px 0;}
#happystory02 .bible {width:430px;margin:0 0 80px 0;}
#happystory02 .bible div {text-align:left;font-size:20px;font-weight:bold;letter-spacing:0;}
#happystory02 .bible .fc-gray {font-size:17px;color:#aaa;font-weight:normal;text-align:right;margin-right:20px;}
#happystory02 .love {font-size:20px;color:#0167ED;}

/**/
#quick-wrap {
    position:relative;
    z-index:100;
}
#quick-menu {
    position:absolute;
    width:auto;
    top:100px;
    right:-60px;
    z-index:100;
}
#quick-menu ul {
    border:1px solid #ccc;
    border-radius:10px;
}
#quick-menu ul li {
    padding:5px;
    line-height:1;
    text-align:center;
    position:relative;
}
#quick-menu ul li:after {
    content:'';
    position:absolute;
    width:70%;
    height:1px;
    margin:auto;
    background:#ccc;
    top:auto; right:0; bottom:0; left:0;
}
#quick-menu ul li:first-child {
    padding-top:8px;
}
#quick-menu ul li:last-child {
    padding-bottom:8px;
}
#quick-menu ul li:last-child:after {
    display:none;
}
#quick-menu .top {
    display:block;
    text-align:center;
    margin-top:8px;
}
