/**/
@font-face {
    font-family: 'Pretendard';
    src: url('/common/font/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
.ff-preten {font-family: 'Pretendard', sans-serif;}

/**/
html, body {font-family: 'Pretendard', sans-serif;}

/**/
.wrap {width:100%; max-width:1200px; margin:auto;}
.wrap-b {width:100%; max-width:1680px; margin:auto;}

@media(max-width:1700px){
    .wrap-b {max-width:98%;}
}
@media(max-width:1260px){
    .wrap-b .wrap {max-width:100%;}
    .wrap {max-width:98%;}
}

.container-section {min-height:500px;}

/**/
.hamburger {
    display:flex; flex-direction: column; justify-content: space-between;
    width:25px; height:20px; transform: translateY(-2px);
}
.hamburger span {display:block; background:#666; height:3px; width:100%; transition:all 200ms;}
.hamburger span:nth-child(1) {}
.hamburger span:nth-child(2) {}
.hamburger span:nth-child(3) {}
.hamburger.active {position:relative;}
.hamburger.active span:nth-child(1) {transform:rotate(45deg) translateX(5px) translateY(8px);}
.hamburger.active span:nth-child(2) {opacity:0;}
.hamburger.active span:nth-child(3) {transform:rotate(-45deg) translateX(3px) translateY(-7px);}

/**/
#tnb {
    position:fixed; z-index:1000; left:0; top:0; width:100%;
    border-bottom: rgba(255,255,255,0.3);
    background-color: rgba(255,255,255,1);
    transition:all 200ms; height: 86px;
    color: #333;
}

#tnb.in-active {background:rgba(255,255,255,0.9);color: #fff;}
#tnb li.in-active {color: #fff;}
#tnb a.in-active {color: #fff;}
#tnb .rect-logo {}
#tnb .rect-logo img {width:280px; height:47px;}
#tnb .wrap-b {display:flex; justify-content: space-between; padding:20px 0 12px 0;}
#tnb .wrap-b > div {}
#tnb .wrap-b .rect-logo {width:280px; flex-shrink: 0;}
#tnb .wrap-b .rect-menu {}
#tnb .wrap-b .rect-etc {width:240px; flex-shrink: 0; display:flex; align-items: center;}
#tnb .wrap-b .rect-etc a {margin-right:16px;}
#tnb .wrap-b .rect-etc a:last-child {margin-right:0;}
#tnb .wrap-b .rect-etc .xi-log-out {margin-left:20px;}
#tnb ul.m1 {display:flex; margin:auto; justify-content: space-evenly;}
#tnb li.m1 {position:relative; text-align:center;}
#tnb a.m1 {color: #333;}
#tnb a.m1.in-active {color: #fff;}
#tnb ul.m2 {
    position:absolute; width:100%; display:none; background:#fff; padding:20px 10px;
    top:100%; transform:translateY(27px); border:1px solid #ddd; border-radius:5px;
}
#tnb li.m2 {padding:3px 0;}
#tnb li.m2:hover,
#tnb li.m2.active {font-weight:bold;}
#tnb a.m2 {}

@media(max-width:1400px){
    #tnb .wrap-b {}
    #tnb .rect-menu {display:none;}
}
@media(max-width:375px){
    #tnb .rect-logo img {width:180px; height:auto;}
}

/**/
header.in-active #tnb {background:rgba(0,0,0,0.7);}

/**/
#sub-menu {
    position:fixed; z-index:500; width:100%; top:86px; display:none;
    background:url(/images/content/layout/tnb_bg.jpg) no-repeat left top, #fff;
}
#sub-menu .wrap-b {display:flex; padding:0; height:100%;}
#sub-menu .wrap-b > div {height:100%;}
#sub-menu ul.m1 {display:flex; margin:auto; justify-content: space-evenly;}
#sub-menu ul.m1 li.m1 {
    position:relative; text-align:left;
    border:1px solid #ddd; border-left:0; padding:30px 18px;
}
#sub-menu ul.m1 li.m1:first-child {border-left:1px solid #ddd;}
#sub-menu ul.m1 li.m1.active,
#sub-menu ul.m1 li.m1:hover {
    background:#edf4f4; border-top:2px solid #09847f;
}
#sub-menu ul.m1 li.m1 a.m1 {color:#000; opacity:0; font-size:0; display:none;}
#sub-menu ul.m2 {position:relative;}
#sub-menu ul.m2 li.m2 {padding:6px 0;}
#sub-menu ul.m2 li.m2 a.m2 {font-size:18px; font-weight:bold; display:block;}
#sub-menu ul.m2 li.m2:hover a.m2,
#sub-menu ul.m2 li.m2 a.m2.active {color:#09847f;}
#sub-menu ul.m3 {margin-top:15px;}
#sub-menu ul.m3 li.m3 {padding-bottom:8px; padding-left:14px; position:relative;}
#sub-menu ul.m3 li.m3:before {
    width:3px; height:3px; border-radius:100%; background:#09847f;
    content:''; position:absolute; left:4px; top:8px;
}
#sub-menu ul.m3 li.m3:last-child {padding-bottom:0;}
#sub-menu ul.m3 li.m3 a.m3 {font-size:14px; display:block;}
#sub-menu ul.m3 li.m3 a.m3:hover,
#sub-menu ul.m3 li.m3 a.m3.active {color:#09847f; font-weight:bold;}

@media(max-width:1400px){
    #sub-menu {display:none !important; opacity:0;}
}

/**/
#full-menu {
    position:fixed; z-index:10000; width:100%; height:100vh; top:0; display:none;
    background:#fff; padding:0 0 0 0;
}
#full-menu .fm-head {}
#full-menu .fm-head .rect-logo {display:flex; align-items: center;}
#full-menu .fm-head .rect-logo img {width:207px; height:47px;}
#full-menu .fm-head .rect-etc {display:flex; }
#full-menu .fm-head .rect-etc a {margin-right:16px;}
#full-menu .fm-head .rect-etc a:last-child {margin-right:0;}
#full-menu .fm-head .hamburger {margin-left:62px; margin-top:2px;}
#full-menu .fm-head .hamburger span {background:#000;}
#full-menu .fm-head .hamburger span:nth-child(1) {transform:rotate(45deg) translateX(5px) translateY(8px);}
#full-menu .fm-head .hamburger span:nth-child(2) {opacity: 0;}
#full-menu .fm-head .hamburger span:nth-child(3) {transform:rotate(-45deg) translateX(3px) translateY(-7px);}
#full-menu .fm-body {}
#full-menu .wrap-b {display:flex; padding:0; height:100%;}
#full-menu .wrap-b > div {height:100%;}
#full-menu ul.m1 {display:flex; margin:auto; justify-content: space-evenly;}
#full-menu ul.m1 li.m1 {
    position:relative; text-align:left;
    padding:30px 15px;
}
#full-menu ul.m1 li.m1.active,
#full-menu ul.m1 li.m1:hover {}
#full-menu ul.m1 li.m1 a.m1 {
    color:#000; font-size:17px; font-weight:bold; display:block;
    border-bottom:2px solid #09847f; padding:0 0 10px 0; margin-bottom:10px; position:relative;
}
#full-menu ul.m1 li.m1 a.m1 {}
#full-menu ul.m1 li.m1 a.m1 :after {
    content:''; position:absolute; top:7px; right:6px; bottom:0; width:11px; height:11px;
    background:url(/images/content/layout/icon_hwasun.png) no-repeat center center;
}
#full-menu ul.m2 {position:relative;}
#full-menu ul.m2 li.m2 {padding:6px 0;}
#full-menu ul.m2 li.m2 a.m2 {font-size:16px; font-weight:bold; display:block;}
#full-menu ul.m2 li.m2:hover a.m2,
#full-menu ul.m2 li.m2 a.m2.active {color:#09847f;}
#full-menu ul.m3 {margin-top:15px;}
#full-menu ul.m3 li.m3 {padding-bottom:8px; padding-left:14px; position:relative;}
#full-menu ul.m3 li.m3:before {
    width:3px; height:3px; border-radius:100%; background:#09847f;
    content:''; position:absolute; left:4px; top:8px;
}
#full-menu ul.m3 li.m3:last-child {padding-bottom:0;}
#full-menu ul.m3 li.m3 a.m3 {font-size:13px; display:block;}
#full-menu ul.m3 li.m3 a.m3:hover,
#full-menu ul.m3 li.m3 a.m3.active {color:#09847f; font-weight:bold;}

/**
 * #tnb, #full-menu 공통
 */
#full-menu .fm-head,
#tnb {height:86px;}
#full-menu .wrap-b .rect-logo,
#sub-menu .wrap-b .rect-logo,
#tnb .wrap-b .rect-logo {width:280px; flex-shrink: 0;}
#full-menu .wrap-b .rect-menu,
#sub-menu .wrap-b .rect-menu,
#tnb .wrap-b .rect-menu {}
#full-menu .wrap-b .rect-etc,
#sub-menu .wrap-b .rect-etc,
#tnb .wrap-b .rect-etc {width:280px; flex-shrink: 0; display:flex; align-items: center;}
#full-menu ul.m1,
#sub-menu ul.m1,
#tnb ul.m1 {width:96%;}
#full-menu ul.m1 li.m1,
#sub-menu ul.m1 li.m1,
#tnb ul.m1 li.m1 {width:20%;}

@media(max-width:1400px){
    #full-menu {}
    #full-menu ul.m1 {width:100%;}
    #full-menu .fm-body .wrap-b .rect-etc {display:none;}
    #full-menu .wrap-b .rect-logo {width:0; display:none;}
    #full-menu .wrap-b .rect-menu {max-width:100%;}

    #tnb .wrap-b .rect-logo {width:auto;}
    #full-menu .wrap-b .rect-etc,
    #tnb .wrap-b .rect-etc {justify-content: flex-end; width:auto; height:54px;}
    #full-menu .wrap-b .rect-etc {
        position:absolute; z-index:100; top:20px; right:10px; height:54px; width:40px; background:#fff; margin:0 !important;

    }
    #full-menu .wrap-b .rect-etc .hamburger {margin:0;}
}

/* 태블릿 레이아웃? */
@media(max-width:1100px){

    #full-menu .fm-head {height:0;}
    #full-menu .fm-head .hamburger {margin-left:0;}
    #full-menu ul.m1 {height:100vh; display:flex; justify-content: flex-start; flex-wrap:wrap; overflow:auto;}
    #full-menu ul.m1 li.m1 {width:50%; border-bottom:1px dashed #ddd;}
    #full-menu ul.m1 li.m1:nth-child(2n-1) {border-right:1px dashed #ddd;}
}

/* 모바일 레이아웃 */
@media(max-width:425px){
    #full-menu ul.m1 li.m1 {width:100%;}
    #full-menu ul.m1 li.m1:nth-child(2n-1) {border-right:0;}

}

/**/
footer {background:#363636; margin-top:100px;}
footer {color:#fff;}
footer a {color:#fff;}
footer a:hover {color:#fff;}
footer .terms-sns {display:flex; justify-content: space-between; padding:30px 0; border-bottom:1px solid #4a4a4a;}
footer .terms-sns .terms {display:flex; align-items: center;}
footer .terms-sns .terms a {margin:0 15px; font-size:15px; position:relative;}
footer .terms-sns .terms a:after {
    content:''; position:absolute; margin:auto; top:0; right:-16px; bottom:0; left:auto;
    width:3px; height:3px; background:#fff; border-radius:100%;
}
footer .terms-sns .terms a:first-child {margin-left:0;}
footer .terms-sns .terms a:last-child {margin-right:0;}
footer .terms-sns .terms a:last-child:after {display:none;}
footer .terms-sns .sns {display:flex;}
footer .terms-sns .sns a {margin-left:15px;}
footer .terms-sns .sns a:first-child {margin-left:0;}
footer .foot {padding:50px 0; position:relative;}
footer .logo {margin-bottom:25px;}
footer .company {color:rgba(255,255,255,0.5); margin-bottom:10px;}
footer .copyright {color:rgba(255,255,255,0.3);}
footer .site-link {position:absolute; right:0; top:50px;}
footer .site-link select {border:1px solid #4a4a4a; background:transparent; color:#fff; padding:6px 22px; font-size:14px;}

/**/
#svb {
    height:410px;
    background:url(/images/content/layout/svb_1.jpg) no-repeat center center;
}
#svb .menu-title {
    padding-top:86px; height:100%; padding-bottom:70px;
    color:#fff; font-weight:bold;
    display:flex; align-items: center; justify-content: center;
}
#svb .menu-tab {}
#svb .menu-tab .rect {
    position:absolute; left:0; bottom:0; width:100%; height:70px;
}
#svb .menu-tab .rect ul {height:100%;}
#svb .menu-tab .rect ul li {height:100%;}
#svb .menu-tab .rect ul li a {
    height:100%; display:flex; align-items: center; justify-content: center;
    background:#33454d; color:#fff; border-right:1px solid #58676d;
}
#svb .menu-tab .rect ul li:first-child a {border-radius:40px 0 0 0;}
#svb .menu-tab .rect ul li:last-child a {border-right:0;}
#svb .menu-tab .rect ul li a.active {background:#09847f;}

@media(max-width:1024px){
    #svb {height:280px;}
    #svb .menu-title {padding-bottom:0;}
    #svb .menu-tab {display:none;}
}

/**/
.page-title {}
.page-title .wrap {
    margin-top:60px; padding:10px 0; border-bottom:1px solid #d6d6d6;
    display:flex; justify-content: space-between; align-items: flex-end;
}
.page-title .page-name {}
.page-title .location {margin-bottom:6px; display:flex; align-items: center;}
.page-title .location span {display:block; margin-left:10px;}
.page-title .location .home {
    width:14px; height:15px; font-size:0; margin:0;
    background:url(/images/content/layout/icon_location_home.png) no-repeat center center;
}
.page-title .location .arr {
    background:url(/images/content/layout/icon_location_arr.png) no-repeat center center;
    width:4px; height:6px; font-size:0;
}
.page-title .location .name {font-size:15px; color:#555;}

@media(max-width:768px){
    .page-title .wrap {flex-direction: column; align-items: stretch;}
    .page-title .location {margin-top:10px;}
}

/**/
.page-tab {margin:40px 0;}
.page-tab ul {}
.page-tab ul li {
    text-align:center; height:60px; line-height:100%;
    border:1px solid #dddddd; background:#fff; position:relative;
}
.page-tab ul li:first-child {border-radius:5px 0 0 5px;}
.page-tab ul li:last-child {border-radius:0 5px 5px 0;}
.page-tab ul li a {
    width:100%; height:100%; padding:10px 20px; font-size:14px; color:#666;
    display:flex; align-items: center; justify-content: center;
}
.page-tab ul li.active {
    background:url(/images/content/layout/sub_3depth_bg.jpg) no-repeat left center, #09847f;
    background-size:auto 100%; border-color:#09847f;
}
.page-tab ul li.active a {color:#fff;}
.page-tab ul li.active:after {
    content:''; position:absolute; margin:auto; top:auto; right:0; bottom:0; left:0;
    width:10px; height:10px; background:#09847f; transform:translateY(6px) rotate(45deg);
}

@media(max-width:768px){
    .page-tab ul li {display:none;}
}

/**/
.pagination-hwasun .pagination {
    display:flex; justify-content: center;
}
.pagination-hwasun .pagination li {margin:0 6px;}
.pagination-hwasun .pagination li a.page-link {
    border-radius:0; width:30px; height:30px; padding:0; color:#33454d;
    display:flex; align-items: center; justify-content: center; border:0;
    font-size:16px;
}
.pagination-hwasun .pagination li.active a.page-link {
    background:#33454d; color:#fff; border-radius:5px;
}
.pagination-hwasun .pagination li.first a.page-link,
.pagination-hwasun .pagination li.last a.page-link,
.pagination-hwasun .pagination li.previous a.page-link,
.pagination-hwasun .pagination li.next a.page-link {
    border:1px solid #33454d; font-size:0; position:relative; border-radius:5px;
}
.pagination-hwasun .pagination li.previous a.page-link:before,
.pagination-hwasun .pagination li.next a.page-link:before,
.pagination-hwasun .pagination li.first a.page-link:before,
.pagination-hwasun .pagination li.last a.page-link:before {
    position:absolute; margin:auto; top:0; right:0; bottom:0; left:0; font-size:16px; content:'';
    background-position:center center; background-repeat: no-repeat; background-size:cover;
}
.pagination-hwasun .pagination li.first a.page-link:before,
.pagination-hwasun .pagination li.last a.page-link:before {width:14px; height:13px;}
.pagination-hwasun .pagination li.previous a.page-link:before,
.pagination-hwasun .pagination li.next a.page-link:before {width:9px; height:13px;}
.pagination-hwasun .pagination li.previous a.page-link:before {background-image:url(/images/content/layout/icon_bbs_prev.png);}
.pagination-hwasun .pagination li.next a.page-link:before {background-image:url(/images/content/layout/icon_bbs_next.png);}
.pagination-hwasun .pagination li.first a.page-link:before {background-image:url(/images/content/menu/menu7_arr_2.png); transform:rotate(90deg);}
.pagination-hwasun .pagination li.last a.page-link:before {background-image:url(/images/content/menu/menu7_arr_2.png); transform:rotate(-90deg);}