@charset "utf-8";

:root {
    --max-width: 1680px;
}

.width_full {
    width:100%;
}
.max_width {
    width: calc(100% - 50px);
    max-width: var(--max-width);
    margin:0 auto;
}
@media (max-width:480px) {
    .max_width {
        width: calc(100% - 20px);
    }
}
.sub_container {
    padding-top:50px;
    padding-bottom:100px;
}


.h2_container {
    display:flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap:wrap;
}
.h2_container .h2_more.h2_more-red  {
    padding:0 0 7px 3px;
    color: var(--color-red);
    border-bottom:2px solid var(--color-red);
}
@media (max-width:460px) {
    .h2_container .h2_more.h2_more-red  {display:none;}    
}
.h2_container .h2_more-color_a1 {
    padding:0 0 7px 3px;
    color: var(--color-accent);
    border-bottom:2px solid var(--color-accent);
}
.h2_container .h2_more > span {padding-left:10px;}
.h2_container .h2_more > span > img {
    position: relative;
    margin-top:-3px;
    margin-right:-3px;
    width:100%;
    max-width:20px;
}


/*  foot 하단 디자인  */
.foot-container {
    padding:80px 0 100px 0;
    color:#fff;
    background: var(--color-gray-2);
}
.foot-container .foot_top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap:wrap;
    padding-bottom:35px;
}
.foot-container .foot_top .inner_left {
    width:50%;
    max-width:300px;
}
.foot-container .foot_top .inner_left a.tx1 {
    width:100%;
    max-width:250px;
}
.foot-container .foot_top .inner_right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width:100%;
    max-width:500px;
}
.foot-container .foot_top .inner_right > a {padding:5px 15px; color:#fff;}
.foot-container .foot_top .inner_right .tx1 {color: var(--color-accent);}
.foot-container .foot_top .inner_right .tx2 {}

.foot-container .foot_bottom {
    padding-top:50px;
    border-top:1px solid rgba(255,255,255, 0.5);
}
.foot-container .foot_bottom {
    display:flex;
    justify-content:space-between;
    align-items: center;
}
.foot-container .foot_bottom .inner_left {
    order: 1;
    opacity: 0.8;
}
.foot-container .foot_bottom .inner_left .tx1 {}
.foot-container .foot_bottom .inner_left .tx2 {margin:10px 0;}
.foot-container .foot_bottom .inner_left .tx3 {}
.foot-container .foot_bottom .inner_right {
    order: 2;
    min-width:195px;
    cursor: pointer;
    overflow: hidden;


}
.foot-container .foot_bottom .inner_right .tx1 {
    display:flex;
    justify-content:space-between;
    align-items: center;
    width:100%;
}
.foot-container .foot_bottom .inner_right .tx1 > span {
    display:flex;
    justify-content: center;
    align-items: center;
    width:60px;
    height:60px;
    background: #fff;
    border-radius:50%;
}
.foot-container .foot_bottom .inner_right .tx1 > span > img {
    width:60%;
}
.foot-container .foot_bottom .inner_right .tx1 .tx1-1 {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.foot-container .foot_bottom .inner_right .tx1 .tx1-1 > li {
}
.foot-container .foot_bottom .inner_right .tx1 .tx1-1 > li:nth-child(1) {}
.foot-container .foot_bottom .inner_right .tx1 .tx1-1 > li:nth-child(1) > p {}
.foot-container .foot_bottom .inner_right .tx1 .tx1-1 > li:nth-child(1) > p:nth-child(1) {}
.foot-container .foot_bottom .inner_right .tx1 .tx1-1 > li:nth-child(1) > p:nth-child(2) {}
.foot-container .foot_bottom .inner_right .tx1 .tx1-1 > li:nth-child(2) {margin-left:12px;}
.foot-container .foot_bottom .inner_right .tx1 .tx1-1 > li:nth-child(2) > img {width:20px;}

.foot-container .foot_bottom .inner_right:hover {color: var(--color-accent);}
.foot-container .foot_bottom .inner_right:hover .tx1 > span {background: var(--color-accent);}
.foot-container .foot_bottom .inner_right:hover .tx1 .tx1-1 > li:nth-child(2) > img {position:relative;margin-right:-200px;}



.footer__families {
    position: relative;
    width:100%;
    max-width: 180px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height:42px;
    margin-left:15px;
    padding-left:13px; 
    padding-right:13px;
    border: 1px solid var(--color-gray-D);
    border-radius:5px;
    }
.footer__families .sites__label > img {
    width:20px;
    transform: rotate(-90deg);
    }

.footer__families:hover {
    border-top-left-radius:0px;
    border-top-right-radius:0px;
}
.footer__families:hover .sites__label > img {
    transform: rotate(90deg);
    }
.footer__families:hover .sites__ul {
    display: block;
    }
.sites__label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    width:100%;
    color: var(--color-gray-D);
    border:none;
    background-color: transparent;
    }
.sites__ul {
    position: absolute;
    bottom: 100%;
    left: 0;
    z-index: 2;
    display: none;
    border-bottom: 1px solid var(--color-gray-D);
    background-color:  var(--color-gray-D);
    }
.sites__item a {
    font-size:0.9em;
    width: calc(100% + 2px);
    margin-left:-1px;
    margin-bottom:-1px;
    display: inline-block;
    color: var(--color-gray-7);
    padding: 12px 10px;
    border: 1px solid var(--color-gray-D);
    }
.sites__item a:hover {
    color:#fff;
    background: #000;
}
@media (max-width:850px) {
    .foot-container .foot_top .inner_left {
        max-width:100%;
    }
    .foot-container .foot_top .inner_left img {max-width:230px;}
    .foot-container .foot_top .inner_right {
        max-width:100%;
    }
}
@media (max-width:580px) {
    .foot-container .foot_top {
        padding-bottom:20px;
    }
    .foot-container .foot_bottom {
        padding-top:20px;
    }
    .foot-container {
        padding: 50px 0 60px 0;
    }
    .foot-container .foot_bottom {
        flex-wrap:wrap;
    }
    .foot-container .foot_bottom .inner_left {max-width:100%;order: 2;}
    .foot-container .foot_bottom .inner_right {
        width:100%;
        max-width:100%;
        order: 1;
        margin-bottom:15px;
        display: flex;
        justify-content:flex-end;
    }
    .foot-container .foot_bottom .inner_right .tx1 > span {
        width:48px;
        height:48px;
    }
    .foot-container .foot_bottom .inner_left .tx2 {
        margin: 5px 0;
    }
    .foot-container .foot_bottom .inner_right .tx1 {
        max-width:180px;
    }
}
@media (max-width:530px) {
    .foot-container .foot_top .inner_right {flex-wrap:wrap;margin-top:15px;}
    .footer__families {
        width: 100%;
        max-width: 100%;
        margin-top:15px;
        min-height: 36px;
        margin-left: 0px;
        padding-left: 12px;
        padding-right: 12px;
        border: 1px solid var(--color-gray-D);
        border-radius: 3px;
    }
}
@media (max-width:420px) {
    .foot-container .foot_top .inner_left {display:none;}
    .foot-container {
        padding: 25px 0 50px 0;
    }
}
/**  sub_top-guide / 서브 상단 /  **/
.sub_top-guide {
    margin-top: calc(102px + 30px) !important;
}

.site_map_guide {
    display:flex;
    justify-content: flex-start;
    align-items: center;
}
.site_map_guide > a {padding:0 8px;color: var(--color-gray-7);}
.site_map_guide > a:nth-last-child(1) {color: var(--color-gray-2);}
.site_map_guide > span {margin:0 0px;}
.site_map_guide > span > img {width:18px;}
.sub_title {
    padding:25px 0 20px 0;
}
.bss-head {
    border-bottom:1px solid var(--color-gray-D);
}
.bbs-container {
    padding-top:60px;
    padding-bottom:120px;
}
/**  sub_search   /서브 검색 디자인/  **/
.sub_search {
    padding-top:60px;
    padding-bottom:60px;
    background: var(--color-gray-E);
}
.sub_search-container {
}
.sub_search-container .inner01 {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.sub_search-container .inner01 > li {
    width: calc(50% - 25px);
}

.sub_back_link {
    display:flex;
    justify-content: start;
    align-items: center;
    width:100%;
    padding:0 0 20px 0;
    border-bottom:1px solid var(--color-gray-B);;
}
.sub_back_link > a {
    display:flex;
    justify-content: center;
    align-items: center;
    color: var(--color-gray-B);
}
.sub_back_link > a > span {
    display:flex;
    justify-content: center;
    align-items: center;
    width:30px;
    height:30px;
    margin-right:15px;
    border-radius:15px;
    border:1px solid var(--color-gray-B);
}
.sub_back_link > a > span > img {
    width:60%;
}
@media screen and (max-width: 820px) {
    .sub_search {
        padding-top:30px;
        padding-bottom:30px;
    }
    .sub_search-container .inner01 > li {
        width: calc(100% - 0px);
    }
    .sub_search-container .inner01 .inner-Keyword-search {
        margin-top:20px;
    }
}


@media screen and (max-width: 720px) {
    .bbs-container {
        padding-top:30px;
        padding-bottom:80px;
    }
}