@charset "utf-8";
@import url('base.css');


body{letter-spacing:-.4px;}
.sr-only {  position: absolute;  overflow: hidden;  width: 1px;  height: 1px;  margin: -1px;   padding: 0;   border: 0;   clip: rect(0, 0, 0, 0);}
.container{ position:relative; margin:0 auto; padding-left:2rem; padding-right:2rem; }
@media all and (min-width:1401px) {
    .container{  max-width:calc(1400px + 4rem); }

}




#skip {width: 100%;left: 0;top: 0;  z-index: 105;}
#skip a {display: block;height: 1px;width: 1px;margin-bottom: -1px;overflow: hidden;font-size: 0.84rem;color: #fff;background: #db2950;white-space: nowrap;text-align: center;transition: all 0.2s ease;}
#skip a:focus,
#skip a:active {height: auto;width: auto;padding: 7px;margin-bottom: 10px;}


.m-open { overflow:hidden; }


#wrap-header{width:100%;position: relative;z-index:1005;background:rgba(255,255,255,1);border-bottom: 1px solid #ddd;}
#wrap-header .top-wrap{height:100px;display: flex;align-items: center;justify-content: space-between;position:initial;}


@media all and (max-width:768px) {
    #wrap-header .top-wrap { }
}

@media all and (max-width:480px) {
    #wrap-header .top-wrap {
        flex-direction: column-reverse;
        padding-bottom: 2rem;
        height: auto;
    }

}



#wrap-header .head-logo{position:relative;}
#wrap-header .head-logo a { width:456px; height:43px; display:block; background:url(../images/common/logo.png) no-repeat; }
#wrap-header .head-logo img{max-width:100%;}


@media all and (max-width:768px) {
    #wrap-header .head-logo img{max-width: 210px;}
}

#wrap-header .menu-icon ul{display:flex;align-items: center;}
#wrap-header .menu-icon li { padding: 0 1rem; }
#wrap-header .menu-icon li a {display:block; text-align:center;}
#wrap-header .menu-icon li i { display:block; font-size:2.7rem; }
#wrap-header .menu-icon li span { display:block; font-size:1.8rem; padding-top:0.5rem;}

#wrap-header .display-option {
    display: flex;
    align-items: center;
    padding: 0.7rem 1rem;
    line-height: 1;
    border-radius: 50px;
    border: 1px solid #000;
    background: #fff;
    margin-left: 1.2rem;
    position: relative;
}
#wrap-header .display-option .do-title {
    display: inline-block;
    padding: 0;
    margin-right: 5px;
    width: auto;
}
#wrap-header .display-option .do-title:before {
    margin-right: 3px;
    content: '';
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
    background-image:url(../images/common/icn_display_option.svg);
    width: 22px;
    height: 16px;
    margin-top: -2px;
}
#wrap-header .display-option .btn-do {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position: center;
    width: 25px;
    height: 25px;
    margin-right: 10px;
    transition: all 0.3s;
}
#wrap-header .display-option .btn-do:before {
    content: '';
    display: inline-block;
    width: 1px;
    height: 10px;
    background-color: #bbb;
    position: absolute;
    right: -7px;
    top: 7px;
}
#wrap-header .display-option .btn-do:last-child:before {
    display:none;
}
#wrap-header .display-option .btn-do:last-child {
    margin-right: 0;
}
#wrap-header .display-option .btn-do i {
    display:inline-block;
    font-size: 2.2rem;
}


@media all and (max-width:1200px) {
    #wrap-header .display-option { display:none;}

}


@media all and (max-width:768px) {

    #wrap-header .menu-icon li:first-child { display:none;}
    #wrap-header .menu-icon li { padding-right:0;}
    #wrap-header .head-logo a  { width:189px; height:54px;background:url(../images/common/logo_m.png) no-repeat; }
}

@media all and (max-width:480px) {
    #wrap-header .menu-icon ul {
        height: 40px;
    }
    #wrap-header .menu-icon  {
        height:40px;
        width:100%;
        margin-bottom:1.2rem;
    }
    #wrap-header .menu-icon::after {
        content:"";
        display:blcok;
        width:100vw;
        height:40px;
        left:0;
        background:#111;
        position:absolute;
        top:0;
        z-index:-1;
    }
    #wrap-header .menu-icon li {
        color:#fff;
        flex:1;
        text-align:center;
        padding:0;
    }
    #wrap-header .menu-icon li i {
        display:inline-block;
        margin-right:0.5rem;
    }
    #wrap-header .menu-icon li span {
        display:inline-block;
    }
    #wrap-header .menu-icon li a{
        color:#fff;
    }

}
@media all and (max-width:360px) {
    #wrap-header .menu-icon li span {
        font-size:1.5rem
    }

}


/*메인메뉴*/
#wrap-header .gnb-wrap { border-top:1px solid #ddd; z-index:1;}
#wrap-header .gnb-wrap .gnb.container { position: inherit;}
#wrap-header .gnb-wrap .ul1 { display:flex;justify-content: space-around;}
#wrap-header .gnb-wrap .li1{padding: 0 .5rem;}
#wrap-header .gnb-wrap .a1{position:relative; display:flex;height:90px;    align-items: center;:3.4rem 0;color:#111;font-weight:700; font-size:3rem;}
#wrap-header .gnb-wrap .al::before {content:"";  position: absolute; top:50%; margin-top:-5px; display:block; width:11px; height:10px; background:url(../images/common/icn_gnb_dot.png) no-repeat center center}
#wrap-header .gnb-wrap .a1:hover,
#wrap-header .gnb-wrap .a1.on{color:#00a9ba}
#wrap-header .gnb-wrap .a1:after{display:block;content:'';width:0;height: 2px;position: absolute;bottom:-2px;left:50%;background: #00a9ba;z-index:1;transition:all 0.25s;}
#wrap-header .gnb-wrap .li1:hover > a:after,
#gnb > li.active > a:after{width: 100%;left:0;}
#wrap-header .gnb-wrap .a1 span{position:relative;}
#wrap-header .gnb-wrap .dept2{  display:none;overflow:hidden; max-height:0; position:absolute; left:0; top:100%; width:100%; z-index:100;height: 0;background: #fff;border-top:1px solid #ddd; box-shadow: 1px 13px 10px 4px rgba(0,0,0,0.10); }
#wrap-header .gnb-wrap .dept2.on { display:block;height:60px; max-height:60px;;}
#wrap-header .gnb-wrap  .ul_2{display: flex; max-width: 1400px; flex-wrap: wrap;}
#wrap-header .gnb-wrap .li1.dept15 .dept2 { right:-180px;}
#wrap-header .gnb-wrap .li1.dept12 .ul2 { padding-left:400px;}
#wrap-header .gnb-wrap .li1.dept13 .ul2 { justify-content: center; padding-left:200px;}
#wrap-header .gnb-wrap .li1.dept15 .ul2 { justify-content: flex-end;}
#wrap-header .gnb-wrap .li1:last-child .dept2 { right: 10px; }
#wrap-header .gnb-wrap .li1:last-child .ul2 {justify-content: flex-end; }
#wrap-header .gnb-wrap .a2{  display: flex; position: relative; min-width: 100%; padding: 0 0 0 2.3rem;  word-break: keep-all; word-wrap: break-word; transition: all 0.3s; align-items: center;color:#111;}
#wrap-header .gnb-wrap .a2:hover,
#wrap-header .gnb-wrap .a2:focus { color:#00a9ba; text-decoration: underline; }
#wrap-header .gnb-wrap .a2[target=_blank] span::after  { content:""; display:inline-block; width:13px; height:13px; margin-left:5px; background:url(../../images/common/new-win.png) no-repeat; }
#wrap-header .gnb-wrap .a3[target=_blank]{position:relative;}
#wrap-header .gnb-wrap .a3[target=_blank]::after {content:""; display:inline-block; width:13px; height:13px; margin-left:5px; background:url(../../images/common/new-win.png) no-repeat; }
#wrap-header .gnb-wrap .ul_1{justify-content:flex-end;display:flex;}

#wrap-header .gnb-wrap .ul2{display: flex;max-width:1400px; margin:0 auto; padding: 15px 0;flex-wrap: wrap;}
#wrap-header .gnb-wrap .li2 {position:relative; }
#wrap-header .gnb-wrap .li2:before { display:none;content: "";position: absolute; top: 0px; bottom: 0px; left: 0; width: 1px; height: 100%; background: #e4e7ea;}

#wrap-header .gnb-wrap .ul3 {padding:1rem 0;}
#wrap-header .gnb-wrap .li3 .a3 {position:relative;display:block;padding: 0.5rem 1rem;}
#wrap-header .gnb-wrap .li3 .a3::before{content:''; position:absolute; left:0px; top:50%; margin-top:-1.5px;; width:3px; height:3px; background:#00b3cd; transition:all 0.8s;}
#wrap-header .gnb-wrap .li3 .a3:hover { color:#00a79d}

@media all and (max-width:1400px) {
    #wrap-header .gnb-wrap .a1 {
        font-size:2.8rem;
    }

}
@media all and (max-width:1200px) {
    #wrap-header .gnb-wrap .a1 {
        font-size:2.4rem;
    }

}

/*
#gnb-bg {display: none; position: absolute; top:190px;  left: 0; width: 100%; height: 80px;background: #fff;border-top:1px solid #ddd; box-shadow: 1px 13px 10px 4px rgba(0,0,0,0.10);  z-index: 0;}
#gnb-bg.on { display:block;}*/


/* 모바일 */
.gnb-m-header { position:relative; height: 72px;background-color: #222; display:none; padding-right:5rem}
#wrap-header #btn-mgnb{display:none;}
#wrap-header .container > div .btn-mgnb-close{display:none;}
#wrap-header .container > div.black-bg{display:none;}

.gnb-m-header .util-menu {display: flex;position: relative;height: 100%;}
.gnb-m-header .util-menu > li {display: block;height: 100%;}
.gnb-m-header .util-menu > li a {display: flex;position: relative;height:100%;align-items: center;color:#fff;text-align: center;padding: 0 1rem;font-size: 1.3rem;word-break: keep-all;}
.gnb-m-header .util-menu > li a > span {display: block; position: relative; margin: 0 auto; font-weight: 600;}
.gnb-m-header .util-menu > li a > span {transition: color 0.3s;}
.gnb-m-header .util-menu > li a:focus > span,
.gnb-m-header .util-menu > li a:hover > span {color: #05B7C5;}
.gnb-m-header .util-menu > li a.on{ background: linear-gradient(180deg, #8cc63e 0%, #00a79d 100%);}
.gnb-m-header .util-menu > li a.on > span {color: #fff;}



@media all and (max-width:1026px) {
    #wrap-header .container > div .btn-mgnb-close.on{display:block;position:absolute;right:12px; top:12px;width:45px;height:45px;background:url(../images/common/close_line.svg) no-repeat center;}

}

@media all and (max-width:768px) {
    #wrap-header .gnb-wrap { }
    #wrap-header .gnb-wrap.on {right:0;}
}


#wrap-header .sitemap-wrap{
    display:none;
}
#wrap-header .sitemap-wrap.on {
    display:block;
}
#wrap-header .sitemap-wrap {
    position:fixed;top: 0;right:-100%;
    z-index:10000;width:100%;
    height: 100%;background: #0f2940;opacity: 0;
    transition: all 0.55s cubic-bezier(0.7, 0, 0.3, 1);    box-shadow: -5px 0px 10px rgba(0, 0, 0, 0.2);
}
#wrap-header .sitemap-wrap.on {right: 0;opacity: 1;transition: all 0.55s cubic-bezier(0.7, 0, 0.3, 1);}


#wrap-header .sitemap-wrap .ul1 {
    display: flex;
    flex-wrap: wrap;
}
#wrap-header .sitemap-wrap .li1 {
    width:25%;
    padding: 8.8rem 2rem;
    border-right: 1px solid rgba(255,255,255,.13);
    transition: all .2s;
}
#wrap-header .sitemap-wrap .li1:hover{background:#095b64}
#wrap-header .sitemap-wrap .li1:first-child {border-left:1px solid rgba(255,255,255,.13)}
#wrap-header .sitemap-wrap a {
    display: inline-block;
    vertical-align: top;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}
#wrap-header .sitemap-wrap .a1 {
    margin-bottom: 5rem;
    font-size: 3rem;
    display: block;
    font-weight: 600;
    color: #fff;
}
#wrap-header .sitemap-wrap .li2 {
    position: relative;
    padding-left: 1.1rem;
    margin-bottom:1.5rem;
}
#wrap-header .sitemap-wrap .li2:before {
    content: "";
    position: absolute;
    left: 0;
    top: 1rem;
    width: 0.6rem;
    border-top: 1px solid #91ACE6;
}

#wrap-header .sitemap-wrap .a2 {
    color: #c1dff7;
}
#btn-sitemap-close {
    color:#fff;
    position: fixed;
    right:1rem;
    top:1rem;
    font-size:5rem;

}


@media all and (max-width:1026px) {
    #wrap-header .sitemap-wrap.on {
        overflow-y:scroll;
    }
    #wrap-header .sitemap-wrap .ul1 {
        padding-top:6rem;
    }
    #wrap-header .gnb-wrap {
        display:none;
    }
    #wrap-header .sitemap-wrap .li1 {
        width:50%;
        padding:2rem 2rem 1rem 2rem;
    }
    #wrap-header .sitemap-wrap .a1 {
        font-size:2.6rem;
        margin-bottom:2rem;
    }

}
@media all and (max-width:640px) {

    #wrap-header .sitemap-wrap .li1 {
        width:100%;
        border-left:0;
        border-top: 1px solid rgba(255,255,255,.13);
    }
    #wrap-header .sitemap-wrap .li1:first-child {
        border-top:0;
    }
}





#wrap-footer{ background-color:#424242; margin-top:4rem; }
#wrap-footer #footer{position: relative; padding:4rem 7rem;}
#wrap-footer .link{margin-bottom: 20px;}
#wrap-footer .link ul{display:flex;flex-wrap: wrap;}
#wrap-footer .link li{position:relative;padding:0.5rem 2rem;}
#wrap-footer .link li:first-child { padding-left:0;}
#wrap-footer .link li a{position: relative;color: #fff; font-size:1.8rem;}
#wrap-footer .link li a span { color:#f8d3ce }
#wrap-footer .address { color:#fff;line-height:1.6; font-size:1.6rem;}
#wrap-footer .relate-site {vertical-align: middle;margin-top:2rem; position: relative}
#wrap-footer .relate-site .btn-title {
    width:100%;
    padding: 1.4rem 9rem 1.4rem 2rem;
    text-align:left;
    position: relative;cursor: pointer;background-color:#2e2e2e;color: #fff;font-size:1.6rem;border-radius:5rem;z-index:1;}
#wrap-footer .relate-site .btn-title i {position: absolute;right: 2rem;top:1.6rem;display:inline-block;width:24px;height:24px;background:url(../images/common/arrow_down_w.png) no-repeat center center;-webkit-transition: all .3s ease;transition: all .3s ease;}
#wrap-footer .relate-site.active i {margin-top:-2px; -webkit-transform: rotate(180deg);-moz-transform: rotate(180deg);	transform: rotate(180deg);}
#wrap-footer .relate-site .list-site{
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    position: absolute;
    bottom:2.2rem;
    z-index:0;
    width: 100%;
    max-height: 0;
    padding: 1rem;
    background-color:#676767;
    padding-bottom:4.5rem;
    color:#666;

    text-align: left;
    border-radius: 3rem 3rem  0 0;
}
#wrap-footer .relate-site.active .list-site {opacity: 1;visibility: visible;max-height: 300px;overflow-y:auto;}
#wrap-footer .relate-site.active .list-site li {padding: 1rem 0;font-size:1.6rem;border-bottom: 1px dashed #8c8c8c;}
#wrap-footer .relate-site.active .list-site a {color:#fff}
#wrap-footer .relate-site.active .list-site li:last-child { border-bottom:0;}

@media all and (max-width:1400px) {
    #wrap-footer #footer{padding:4rem 2rem;}
}

@media all and (max-width:1200px) {


}
@media all and (min-width:769px) {
    #wrap-footer .relate-site {position: absolute; right:2rem;top:2rem;}
    #wrap-footer .relate-site .btn-title {width:380px;}
}

@media all and (min-width:1401px) {
    #wrap-footer .relate-site  { right:7rem;}
}
@media all and (max-width:768px) {
    #wrap-footer .box-bottom { border-bottom:0;}
    #wrap-footer .box-footer .footer-logo { display:none;}
    #wrap-footer .relate-site > div{width:100%;float: none;}
    #wrap-footer .relate-site > div .related-list {bottom: 51px;}
    #wrap-footer .relate-site > div .related-title {height:50px;border-left: 0;border-bottom: 1px solid #ddd;}
    #wrap-footer .relate-site > div:last-child .related-title { border-right:0;}
    #wrap-footer .box-footer .footer-address p.call-info { position:relative; right:inherit; top:inherit;}
}



.black-bg {display: none; position: fixed; z-index: 190; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,.5);}
.black-bg.on {display: block;}

#wrap-content { display:flex;  padding-bottom:150px; margin-top:4rem; }
body.main #wrap-content { display:block;padding-bottom:0; }
#sub-content #content { /* padding-bottom:5rem;*/ }

/*.cont-basic { padding-top:7rem; }
#wrap-sub-visual {display:flex;position:relative;background: rgb(230,246,252);background-color:#f4f0e9;width:100%;height: 22rem;background-size: contain;align-items: center;justify-content: center;}
#wrap-sub-visual.sub-visual01 {background: url('../images/common/bg_s_visual01.jpg') no-repeat center center;  }
#wrap-sub-visual > div {color:#fff; text-align:center; }
#wrap-sub-visual > div p { font-size:2.6rem; }
#wrap-sub-visual > div h2 { font-size:4.6rem;font-weight:700; }



/* 서브 타이틀 */
.sub_title_area {
    padding-top:3rem;
    text-align: center;
    border-bottom: 1px solid #ddd;
    box-shadow: 0 15px 15px 0 rgba(0, 0, 0, 0.02);
}

.sub_title_area .sub_title {
    margin-bottom: 70px;
    font-size: 4.8rem;
    font-weight: 800;
}

.sub_title_area .sub_title > span {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
}

.sub_title_area .sub_title > span:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: calc(100% + 10px);
    width: 15px;
    height: 15px;
    background-color: #e83820;
    border-radius: 100%;
}

.sub_title_area .sub_tab .sub_tab_list {
    display: flex;
    justify-content: center;
}

.sub_title_area .sub_tab .sub_tab_list .list_item {
    position: relative;
    margin-bottom: 30px;
    padding: 0 50px;
}

.sub_title_area .sub_tab .sub_tab_list .list_item:first-child {
    padding-left: 0;
}

.sub_title_area .sub_tab .sub_tab_list .list_item:last-child {
    padding-right: 0;
}

.sub_title_area .sub_tab .sub_tab_list .list_item:after {
    content: '';
    position: absolute;
    top: 1px;
    right: 1px;
    width: 1px;
    height: 18px;
    background-color: #ddd;
}

.sub_title_area .sub_tab .sub_tab_list .list_item:last-child:after {
    display: none;
}

.sub_title_area .sub_tab .sub_tab_list .list_item > a {
    position: relative;
    display: block;
    line-height: 1;
    font-size: 2.6rem;
    font-weight:600;
    transition: color 0.2s;
}

.sub_title_area .sub_tab .sub_tab_list .list_item > a:after {
    content: '';
    position: absolute;
    bottom: -31px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #e83820;
    opacity: 0;
    transition: opacity 0.2s;
}

.sub_title_area .sub_tab .sub_tab_list .list_item:hover > a {
    color: #e83820;
}

.sub_title_area .sub_tab .sub_tab_list .list_item.on > a {
    color: #e83820;
    font-weight: 500;
}

.sub_title_area .sub_tab .sub_tab_list .list_item.on > a:after {
    opacity: 1;
}


@media all and (max-width:1026px) {

    .sub_title_area .inner { padding: 0; }
    .sub_title_area .sub_title {margin-bottom: 3rem;font-size: 2.4rem;}
    .sub_title_area .sub_title > span:after { left: calc(100% + 8px); width: 8px; height: 8px; }
    .sub_title_area .sub_tab .sub_tab_list { display: inline-flex; justify-content: flex-start; overflow: hidden; overflow-x: auto; }
    .sub_title_area .sub_tab .sub_tab_list .list_item { flex-shrink: 0; margin-bottom: 20px; padding: 0 15px; }
    .sub_title_area .sub_tab .sub_tab_list .list_item:first-child { padding-left: 15px; }
    .sub_title_area .sub_tab .sub_tab_list .list_item:last-child { padding-right: 15px; }
    .sub_title_area .sub_tab .sub_tab_list .list_item:after { height: 12px; }
    .sub_title_area .sub_tab .sub_tab_list .list_item > a { font-size: 1.8rem; }
    .sub_title_area .sub_tab .sub_tab_list .list_item > a:after { bottom: -20px; }
    .sub_title_area .sub_tab .sub_tab_list .list_item:hover > a { color: #222; }
    .sub_title_area .sub_tab .sub_tab_list .list_item.on > a { color: #e83820; }


}



.acctoggle {background: #fff;color: #151515;font-size: 0;margin-bottom: 2rem;text-align: right;}
.acctoggle .sns {
    position: relative;
    display:inline-block;
}
.acctoggle >  button {
    display: inline-block;
    border: 1px solid #e5e5e5;
    width: 4rem;
    height: 4rem;
    border-radius: 100%;
    position: relative;
    -webkit-transition: .2s;
    transition: .2s;
}
.acctoggle >  button.acctoggle_url {
    margin:0 1rem;
}
.acctoggle .sns .sns_btn {
    border: 1px solid #e5e5e5;
    width: 4rem;
    height: 4rem;
    border-radius: 100%;
}
.acctoggle button::before {
    content: '';
    display: block;
    width: 0;
    height: 100%;
    -webkit-transition: .2s ease;
    transition: .2s ease;
    background-color: #666;
    position: absolute;
    left: 0;
    top: 0;
}
.acctoggle button i {
    font-size: 2.4rem;
    -webkit-transition: .2s;
    transition: .2s;
}
.acctoggle button span {
    opacity: 0;
    visibility: hidden;
    -webkit-transition: .2s;
    transition: .2s;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.acctoggle .sns_list {
    position: absolute;
    top: 0rem;
    left: 6rem;
    padding: 0.5rem;
    border-radius: 1rem;
    background: #fff;
    opacity: 0;
    visibility: hidden;
    z-index: 1;
}
.acctoggle .sns_list ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.acctoggle .sns_list li i {
    border-radius: 50%;
    width: 3.6rem;
    height: 3.6rem;
    font-size: 2.4rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-transition: .2s;
    transition: .2s;
}
.goto-top {
    display: block;
}
.goto-top {
    width: 5rem;
    height: 6rem;
    position: fixed;
    text-align: center;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(9rem);
    transform: translateY(9rem);
    z-index: 8;
    background: #333;
    color: #fff;
    border-radius: 1rem 0  0 1rem;
}
.goto-top i {
    display: inline-block;
    font-size: 2.2rem;
    -webkit-transition: .2s;
    transition: .2s;
    margin-top: 0.4rem;
}
.goto-top span {
    display: block;
    font-size: 1.3rem;
    line-height: 1;
}
.goto-top:hover i {
    -webkit-transform: translateY(-0.5rem);
    transform: translateY(-0.5rem);
}

@media all and (min-width:1201px) {
    .acctoggle {
        position: fixed;
        right: 0;
        top: 50%;
        z-index: 6;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        border-radius: 1.2rem 0 0 1.2rem;
        border: 1px solid #EBEBEB;
        -webkit-box-shadow: 0.3rem 0.3rem 1rem rgba(0, 0, 0, 0.07);
        box-shadow: 0.3rem 0.3rem 1rem rgba(0, 0, 0, 0.07);
    }
    .acctoggle .sns .sns_btn {
        width: 5rem;
        height: 5rem;
    }
    .acctoggle button {
        border:0;
        display: block;
        width: 5rem;
        height: 5rem;
    }
    .acctoggle > button.acctoggle_url {
        margin:0;
        border-top:1px solid #EBEBEB;
        border-bottom:1px solid #EBEBEB;
        border-radius: 0;
    }
    .acctoggle .sns .sns_btn {
        border:0;

    }
    .acctoggle .sns  {
        display:block;
    }

}

@media all and (max-width:1200px) {
    .sub_title_area {
        padding-top:0;
    }
    .acctoggle {
        padding-right:2rem;
    }
    .acctoggle .sub-print {
        display:none;
    }
    .acctoggle > button.acctoggle_url {
        margin-right:0;
    }
    .goto-top {
        left: inherit;
        top: inherit;
        bottom: 12.5rem;
        right: 1.5rem;
        -webkit-transform: none;
        transform: none;
        display: block;
        width: 5rem;
        height: 5rem;
        padding: 0;
        border-radius: 50%;
        background: #333;
        -webkit-box-shadow: 0.3rem 0.3rem 1rem rgba(0, 0, 0, 0.07);
        box-shadow: 0.3rem 0.3rem 1rem rgba(0, 0, 0, 0.07);
        color: #fff;
    }

}

#snb {width:260px; position:relative;margin-top: -90px;}
#snb #menuUIsub {}
#snb  .snb-title{display:flex;align-items: center;justify-content: center;height:180px; font-size: 3.6rem;color:#fff;    background: linear-gradient(-45deg, #8cc63e 0%, #00a79d 100%);}
#snb .snb-navi > ul > li { margin-top:1rem;}
#snb .snb-navi > ul > li > a {display:block; padding:1.8rem 1.8rem; border:1px solid #ddd; border-radius:1rem;background-color:#fff;z-index:1;    position: relative; font-weight:600;}
#snb .snb-navi > ul > li > ul  { display:none; margin-top:-1rem;  padding:1rem 0; border:1px solid #ddd; border-radius:0 0 1rem 1rem;z-index:0;}
#snb .snb-navi > ul > li > ul > li{}
#snb .snb-navi > ul > li > ul > li a { position:relative;display: block;padding:1rem 1rem 1rem 3.2rem; }
#snb .snb-navi > ul > li > ul > li a::before {display: block;position: absolute; top:50%; left:1.8rem; width:8px; height:1px; background:#000;content:""; }
#snb .snb-navi > ul > li > a::after {content: ""; display: block;width: 13px;height: 13px;position: absolute;top: 50%;right: 1.8rem;margin-top: -6.5px;background: url(../images/common/icn_snb_open.png) no-repeat ; background-size:contain;
}
#snb .snb-navi > ul > li.active > a { border-color:#00a79d; background-color:#f0fcfb; color:#00a79d; }
#snb .snb-navi > ul > li.active > a::after {background: url(../images/common/icn_snb_close.png) no-repeat center center;}
#snb .snb-navi > ul > li.active > ul { display:block; border-color:#00a79d;  }

#snb .snb-info { margin-top:2.5rem; background-color:#f5f5f5; padding:2rem }
#snb .snb-info .tit { display:block; font-size:2.4rem; font-weight:600; margin-bottom:1.6rem;}
#snb .snb-info .time-info { position:relative; padding-left:30px;}
#snb .snb-info .time-info  strong { font-size:2.4rem;  }
#snb .snb-info .time-info::before{content:"";position:absolute; top:2px; left:0; display:block; width:24px; height:24px; background:url(../images/common/icn_snb_time.svg) no-repeat; background-size:conatin}
#snb .snb-info .time-info span {display:block; font-size:1.5rem;}
#snb .snb-info .link-banner {margin-top:2rem;}
#snb .snb-info .link-banner li { margin-top:0.5rem;}
#snb .snb-info .link-banner li a { position:relative; display:block; padding:1.4rem 2rem; border:1px solid #ddd; border-radius:40px; background-color:#fff;font-weight:500;  }
#snb .snb-info .link-banner li a::after {content: ""; display: block;width: 18px;height: 18px;position: absolute;top: 50%;right: 2rem;margin-top: -9px;background: url(../images/common/icn_snb_link_arr.svg) no-repeat ; background-size:contain; vertical-align:middle;}
#snb .snb-info .link-banner li i { display:inline-block; vertical-align:middle; margin-right:0.5rem; margin-top:-0.4rem;}
#snb .snb-info .link-banner li i.icon-calendar { width:20px; height:20px;background: url(../images/common/icn_snb_calendar.svg) no-repeat ;}
#snb .snb-info .link-banner li i.icon-map { width:17px; height:20px;background: url(../images/common/icn_snb_pin.svg) no-repeat ;}

.title-wrap { display:flex;flex-wrap: wrap; padding:3rem 0 1.6rem 0; border-bottom:1px dotted #bbb;}
.title-wrap .page-title {font-size:3rem; font-weight:700; }

.sub-util-wrap {  display:flex; margin-left:auto;align-items: center; }
.location-wrap  { display:flex; }
.location-wrap  li { position: relative;padding-right: 27px;}
.location-wrap  li:not(:last-child):after {display: inline-block; content: "";width:15px; height:15px;background:url(../images/common/icn_location_arr.svg) no-repeat center center; background-size:contain; vertical-align: top;position: absolute;top: 50%;right: 6px;transform: translate(0, -50%);}
.location-wrap li:last-child { padding-right:0; }
.location-wrap  li a { display:block; }
.location-wrap  li.home  { padding-right:5px;}
.location-wrap  li.home a  {width: 20px; height: 19px;background-position: center center;background-repeat: no-repeat;background-image: url(../images/common/icn_location_home.svg);}
.print-wrap { display:flex;}
.print-wrap > li {position: relative;  position:relative; margin-left:1.5rem}
.print-wrap .sub-print {width:30px;height:30px;background: url('../images/common/icn_util_print.svg') no-repeat center center; background-size:contain;}
.print-wrap .sub-share {width:30px;height:30px;background: url('../images/common/icn_util_share.svg') no-repeat left center;background-size:contain;}
.print-wrap .sub-share.on {background: url('../images/common/icn_sns_close.svg') no-repeat left center;background-size:contain;}
.box-sub-share {
    display: none;
    overflow: hidden;
    max-height: 0px;
    position: absolute;
    right: 60px;
    top: 0px;
    background: #fff;
    width: 180px;
    padding: 1rem;
    border: 1px solid #ddd;
    border-radius: 3rem;
    transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1);
    text-align: center;
}
.box-sub-share.on {display:block; max-height:1000px; transition:all 0.5s cubic-bezier(0.7, 0, 0.3, 1);}
.box-sub-share .close {display:none;text-indent: -9999px; position: absolute; right: 0px; top: 0px; width: 40px; height: 50px; background: url(../../images/common/btn-favo-close.png) no-repeat center center;}
.box-sub-share .close:hover {transform: rotate( 180deg ); transition: all 0.75s cubic-bezier(0.7, 0, 0.3, 1);}
.box-sub-share .send ul {display: flex; justify-content: center;}
.box-sub-share .send li { margin-right: 5px;}
.box-sub-share .send li button {width: 25px; height: 25px; background: url('../images/common/ico-sub-share.png') no-repeat; text-indent: -9999px;}
.box-sub-share .send li .fb {background-position: 0 0;}
.box-sub-share .send li .tw {background-position: -25px 0;}
.box-sub-share .send li .ks {background-position: -50px 0;}
.box-sub-share .send li .pn {background-position: -75px 0;}
.box-sub-share .send li .na {background-position: -100px 0;}
.box-sub-share .send li .is {background-position: -125px 0;}


@media all and (max-width:1600px) {

}
@media all and (max-width:1400px) {
    #snb { display:none; }
    #sub-content { width:100%;margin-left:0; }
    .print-wrap .sub-print { display:none; }
    #snb .container {/* max-width:96%; */}
}
@media all and (max-width:1026px) {
    .box-sub-share {
    }
}

@media all and (max-width:768px) {
    #wrap-sub-visual { height:150px; }
    #wrap-sub-visual > div p { font-size:1.8rem; }
    #wrap-sub-visual > div h2 { font-size:2.6rem; }

}
#tab-3dept {
    margin-top:4rem;
    margin-bottom:4rem;
}
#tab-3dept ul {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    border-radius: 50px;
    background-color: #fff;
    border:1px solid #ddd;
}
#tab-3dept ul  li {
    flex-grow: 1;
    text-align:center;
}
#tab-3dept ul li a {
    display: block;
    font-size: 1.9rem;
    font-weight: 700;
    border-radius: 50px;
    padding: 2rem 0;
    color:#777;
    transition: 0.4s;
}

#tab-3dept ul li.active a {
    background-color: #e83820;
    color: #fff;
}
@media all and (max-width:1026px) {
    #tab-3dept ul li a {
        font-size:1.8rem;
    }
}
@media all and (max-width:840px) {
    #tab-3dept ul li a {
        padding:1rem 0;
    }
}
@media all and (max-width:768px) {
    #tab-3dept ul {
        border:0;
    }
    #tab-3dept ul  li  {
        width:50%;
        flex-grow: initial;
        margin-bottom:1rem;
        padding:0 0.5rem;

    }
    #tab-3dept ul  li a{
        border:1px solid #ddd;
        border-radius: 50px;

    }

}

@media all and (max-width:480px) {
    #tab-3dept ul  li {
        width:100%;
    }
}