@charset "utf-8";
@import url('common_sub_2025.css?ver=1.1');

/* 공통 */ 
/* #contents {padding: 0 0 100px;} */

@media screen and (max-width: 1339px) {
}
@media screen and (max-width: 768px) {
    #contents {padding: 0 0 50px;}
}
/* 검색 영역 */
#mainSearch { 
    height: 120px;
}
#mainSearch .top {height: 90px;z-index: 1}
.noticeBox {
    position: absolute;
    right: 8px;
    top: 33px;
}
.noticeBox > a[class^='icon'] {
    display: block;
    background: url('../images/main/icon_notice1.png') 30px center / 33px auto no-repeat #ffe5e3;
    border-radius: 15px 40px 15px 15px;
    width: 208px;
    height: 94px;
    padding: 25px 0 0 83px;
    box-shadow: -2.7px 5.4px 12px rgba(0, 0, 0, 0.06);
}
.noticeBox .tit {
    color: #222;
    font-weight: 500;
    padding-bottom: 5px;
}
.noticeBox p {
    color: rgba(34, 34, 34, 0.6);
    font-size: 13px;
}
.noticeBox .btnClose {
    position: absolute;
    right: -8px;
    top: 0;
    display: block;
    width: 29px;
    height: 28px;
    text-indent: -9999px;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.06);
    border-radius: 50%;
    background: url(../../images/main/btn_close.png) center / 10px auto no-repeat #fff;
}
.weather {
    position: absolute;
    top: 33px;
    display: flex;
    gap: 22px;
}
.weather img {width: 65px;}
.weather p {
    color: #000000;
    font-size: 17px;
    font-weight: 600;
}
.weather p span:first-child{
    font-size: 30px;
    font-family: 'nps';
}
.weather p span:first-child span{
    font-size: 20px;
}
.weather dl {
    display: flex;
    margin-top: 10px;
}
.weather dl > * {
    font-size: 14px;
    color: #000000;
}
.weather dl dd + dt{
    margin-left: 20px;
}
.weather dl dd{
    background-size: 16px auto;
    background-repeat: no-repeat;
    background-position: right center;
    padding: 0 20px 0 5px;
    font-weight: 600;
}
.dust_01 {
    background-image: url('../images/weather/dust_1.png');
    color: #23b9e0 !important;
}
.dust_02 {
    background-image: url('../images/weather/dust_2.png');
    color: #8fc43d !important;
}
.searchArea {
    position: absolute;
    left: 50%;
    top: 30px;
    width: 668px;
    transform: translateX(-50%);
}
.searchBox {
    width: 100%;
    position: relative;
    padding-right: 26px;
}
.searchBox input[type='search'] {
    line-height: 54px;
    padding: 0 40px 0 28px;
    width: 100%;
    border-radius: 20px 20px 20px 38px;
    border: 3px solid transparent; /* 보더 투명 처리 */
    background-clip: padding-box, border-box;
    background-origin: border-box;
    background-image: 
    linear-gradient(#fff, #fff), /* 내부 배경 */
    linear-gradient(90deg, #1fb8df, #00cccc); /* 외곽 보더 그라데이션 */
    color: #222222;
    font-size: 18px;
    font-weight: 600;
}
.searchBox input[type='submit'] {
    text-indent: -99999999px;
    overflow: hidden;
    display: block;
    position: absolute;
    right: 0;
    bottom: -15px;
    background: url('../images/main/btn_search.png') center / 58px auto no-repeat;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    cursor: pointer;
}
.searchBox input[type='search']::placeholder {
    color: #222222;
    font-size: 18px;
    font-weight: 600;
}
.bestKeyword {
    margin-top: 15px;
    position: relative;
}
.bestKeyword .tit{
    background-color: #ffe5e3;
    color: #ec6d65;
    font-weight: 600;
    font-size: 14px;
    border-radius: 14px;
    line-height: 28px;
    text-align: center;
    width: 93px;
}
.bestKeyword .slider{
    width: calc(100% - 105px - 130px);
    position: absolute;
    left: 105px;
    top: 0;
}
.bestKeyword .slider a{
    color: #222;
    padding: 0 15px;
}
.bestKeyword .controll{
    position: absolute;
    right: 75px;
    top: 1px;
}
.bestKeyword .controll > a{
    width: 15px;
    height: 14px;
    border-radius: 0;
    background-size: auto 15px;
    background-image: url('../images/main/btn_next.png');
    background-color: transparent;
}
.bestKeyword .controll > a.prev{transform: rotate(180deg);}

@media screen and (max-width:1439px){
    #mainSearch {background: linear-gradient(to bottom, #ffffff, #ffffff);height: auto;padding-bottom: 30px;}
    .searchArea {width: 40%;left: 55%;}
}
@media screen and (max-width:1024px){
    #mainSearch .top {height: auto;}
    .searchArea,
    .noticeBox {position: static;}
    .noticeBox > a[class^='icon'] {
        width: calc(100% + 40px);
        border-radius: 0;
        margin: 0 0 0 -24px;
        padding: 0 0 0 50px;
        height: 40px;
        display: flex;
        gap: 15px;
        background-position: 24px center;
        background-size: 18.5px;
    }
    .noticeBox > a[class^='icon'] *{line-height: 40px;}
    .noticeBox .btnClose {top: 7px;right: 0;width: 25px;height: 25px;background-size: 10px;}
    #mainSearch .top > div:not(.noticeBox) {
        display: flex;
        padding: 30px 0 0 0;
    }
    .searchArea {transform: none;flex-grow: 1;}
    .searchBox {padding-right: 20px;}
    .searchBox input[type='search'] {border-radius: 12px 12px 12px 24px;line-height: 50px;border-width: 2px;font-size: 16px;padding: 0 40px 0 20px;}
    .searchBox input[type='search']::placeholder {font-size: 16px;line-height: 50px;}
    .searchBox input[type='submit'] {width: 42px;height: 42px;background-image: url('../images/main/btn_search_m.png');bottom: -9px;}
    .weather { display:none; }
}
@media screen and (max-width:768px){
    #mainSearch .top > div:not(.noticeBox) {display: block;padding: 20px 0 0 ;position: relative;}
    .searchArea {width: 100%;}
    .weather { display:none; }
}
@media screen and (max-width:319px){
    .noticeBox > a[class^='icon'] {width: calc(100% + 34px);}
}
/* To. 개발 : 이 부분은 search/ark/css/ark.css에 붙여 넣어 주세요. */
/* 자동완성 전체 지정 */
.ark_wrap {
    position:relative; 
    top: 20px;
    background-color:#fff; 
    display:none;
    border-radius: 20px;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.12);
}
.ark_wrap ul {margin:0; padding:0;}
.ark_wrap li {margin:0; padding:0; list-style:none;}
.ark_wrap .rating {display: none;}
.ark_wrap .ark_content {
    border-bottom:1px solid #e6e6e6; 
    background-color:#FFF; 
    overflow-x:hidden; 
    overflow-y:auto; 
    z-index:10000;
    border-radius: 20px 20px 0 0;
}
.ark_wrap .ark_content li {
    color:#222222 !important; 
    width:100%; 
    padding:3px 5px; 
    margin:1px; 
    list-style:none; 
    font-size:17px;
}
.ark_wrap .ark_content li button{
    font-size:17px !important;
    color: #222;
}
.ark_wrap .ark_content li strong {color:#EA8D07; font-weight:bold;}
.ark_wrap .ark_footer {
    position:relative; 
    font-size:14px; 
    font-weight: 500;
    height:54px; 
    padding: 0 28px;
    text-align:center; 
}
.ark_wrap .ark_footer a {color:#666666; text-decoration:none;}
.ark_wrap .ark_footer .left {float:left;padding-top: 12px !important;}
.ark_wrap .ark_footer .right {float:right;padding-top: 12px !important;}

#ark{left:0 !important; z-index:100 !important; width:100% !important;}
#ark #ark_down{top:-43px !important; right:10px; left:auto !important;}
#ark #ark_up{top:-43px !important; right:10px; left:auto !important;}
#ark #ark_wrap{width:100% !important;}
#ark #ark_wrap .ark_content #ark_content_list{width:auto !important;}
#ark #ark_wrap .ark_footer{width:auto !important;}
#ark #tooltip01{right:20px; left:auto !important;}

@media only screen and (max-width:1000px){
    #ark #ark_down{top:-37px !important;}
    #ark #ark_up{top:-37px !important;}
}
/* //자동완성 전체 지정 */
/* 재난상황 알림 레이어 */
.noticeTitle {
    background-color: #feeeeb;
    font-size: 22px;
    color: #000000;
    font-weight: 600;
    line-height: 80px;
    text-align: center;
    margin: -30px -30px 0;
}
.noticeTitle img {width: 48px;padding-right: 10px;}
.noticeTitle span{color: #ec6d65;}
.noticeDate {
    background: #8fc43d;
    color: #fff;
    font-size: 17px;
    font-weight: 600;
    line-height: 48px;
    border-radius: 23px 13px;
    text-align: center;
    max-width: 320px;
    margin: 18px auto 30px;
}
.noticeCont {
    border: #dddddd solid 1px;
    border-radius: 14px;
}
.noticeCont > .tit {
    border-bottom: #ddd solid 1px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
}
.noticeCont > .tit img{width: 46px;padding-right: 5px;display: inline-block;}
.noticeCont > .tit p {
    color: #222222;
    font-size: 17px;
    font-weight: 500;
}
.noticeCont > .tit span{
    color: #666666;
    font-size: 16px;
}
.noticeCont > p {
    font-size: 15px;
    color: #666666;
    padding: 20px;
}
.btnList {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.btnList > li {
    width: calc(50% - 4px);
    border: #bdbdbd solid 1px;
    border-radius: 24px;
    padding-right: 20px;
}
.btnList > li > a{
    display: block;
    line-height: 46px;
    color: #222;
    font-weight: 500;
    padding: 0 20px 0 25px;
    background: url('../images/main/btn_arr.png') right center / 8px auto no-repeat;
}
@media screen and (max-width:767px){
    .noticeTitle {margin: -20px -20px 0;font-size: 18px;line-height: 60px;}
    .noticeTitle img {width: 25px;padding-right: 0px;}
}
@media screen and (max-width:424px){
    .noticeTitle {margin: -15px -15px 0}
    .noticeDate {font-size: 15px;}
    .noticeCont > .tit {padding: 12px 10px;display: block;}
    .noticeCont > .tit p {font-size: 15px;}
    .noticeCont > .tit span{font-size: 14px;padding-top: 10px;display: inline-block;}
    .noticeCont > p {padding: 10px;}
    .noticeCont > .tit img {width: 32px;}
    .btnList > li {padding-right: 10px;}
    .btnList > li > a {padding: 0 10px;line-height: 40px;font-size: 14px;}
}
@media screen and (max-width:319px){
    .noticeTitle {font-size: 16px;}
}
/* 메인비주얼 */
#mainSearch .bottom {
    display: flex;
    justify-content: space-between;
    height: 376px;
}
.mainVisual {
    width: 820px;
    height: 376px;
    position: relative;
}
.mainVisual img {border-radius: 24px;}
.mainVisual .controll {
    position: absolute;
    bottom: 12px;
    right: 20px;
    background: rgba(255, 255, 255, 0.4);
    width: 302px;
    height: 64px;
    border-radius: 18px;
    text-align: center;
    padding: 13px 0;
}
.mainVisual .controll > * + *{margin-left: 10px;}
.mainVisual .controll span {
    color: rgba(0, 0, 0, 0.7);
    font-size: 14px;
    font-weight: 500;
}
#mainReserve .controll span strong, 
.mainVisual .controll span strong{color: #000;}
/* 영등포구청장 */
.infoBox {width: 500px;padding-top: 12px;}
.infoBox img {width: 281.5px;}
.infoBox > div {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.infoBox > div span {
    color: #222222;
    font-size: 17px;
    font-weight: 600;
}
.infoBox > div p {
    color: #222222;
    font-size: 30px;
    margin-bottom: 20px;
}
.infoBox > div p span{
    color: #8fc43d;
    font-weight: 700;
    font-size: 30px;
}
.infoBox > div ul > li{
    border: #d9d2c6 solid 1px;
    border-radius: 23px;
    margin-bottom: 8px;
}
.infoBox > div ul > li a{
    display: block;
    line-height: 44px;
    color: #222222;
    font-size: 14px;
    font-weight: 500;
    background-size: auto 18px;
    background-repeat: no-repeat;
    background-position: 22px center;
    padding: 0 25px 0 50px;
}
.infoBox > div ul > li:nth-child(1) a{background-image: url('../images/main/icon_info_01.png');}
.infoBox > div ul > li:nth-child(2) a{background-image: url('../images/main/icon_info_02.png');}
.infoBox > div ul > li:nth-child(3) a{background-image: url('../images/main/icon_info_03.png');}
.infoBox > ul {
    background-color: #fff;
    border-radius: 14px 45px;
    box-shadow: 6px 6px 9px rgba(238, 228, 210, 0.38);
    display: flex;
}
.infoBox > ul > li{
    width: calc(100% / 4);
}
.infoBox > ul > li a{
    display: block;
    color: #333;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    background-size: auto 26px;
    background-repeat: no-repeat;
    background-position: center 13px;
    padding: 45px 0 13px;
    position: relative;
}
.infoBox > ul > li + li a::after{
    content: "";
    display: block;   
    width: 1px;
    height: 40px;
    background-color: #e5e5e5;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
}
.infoBox > ul > li:nth-child(1) a{background-image: url('../images/main/icon_info2_01.png');}
.infoBox > ul > li:nth-child(2) a{background-image: url('../images/main/icon_info2_02.png');}
.infoBox > ul > li:nth-child(3) a{background-image: url('../images/main/icon_info2_03.png');}
.infoBox > ul > li:nth-child(4) a{background-image: url('../images/main/icon_info2_04.png');}

.infoBox > ul > li:nth-child(1) a:hover{background-image: url('../images/main/icon_info2_01_on.png');}
.infoBox > ul > li:nth-child(2) a:hover{background-image: url('../images/main/icon_info2_02_on.png');}
.infoBox > ul > li:nth-child(3) a:hover{background-image: url('../images/main/icon_info2_03_on.png');}
.infoBox > ul > li:nth-child(4) a:hover{background-image: url('../images/main/icon_info2_04_on.png');}


@media screen and (min-width:1001px){
#side2 {display:inline; float:left; width:270px; margin:0; padding:0;}
#side2 .side_title{height:160px; padding:0 10px; background-color:#4384d4; line-height:152px; text-align:center;}
#side2 .side_title .title{display:inline-block; font-size:28px; color:#fff; line-height: 1; vertical-align:middle;}
#side2 .depth1{border:1px solid #dfdfdf; border-top: none;}
#side2 .depth1 *{transition:all 0.2s linear;}
#side2 .depth1 a{display: block;  position: relative; font-size: 0; line-height: 0;}
#side2 .depth2 li{height: 0;}
#side2 .depth2{overflow: hidden; visibility: hidden; background-color:#f8f8f8;}
#side2 .depth3{overflow: hidden; visibility: hidden; }

#side2 .depth1_item:first-child{border-top:none;}
#side2 .depth2_list {padding-left: 20px; text-align:left;}
#side2 .depth3_list {padding-left: 10px; }
#side2 .depth1_text{padding:17px 40px 19px 25px; border-top:1px solid #ddd;}
#side2 .depth1_item:first-child .depth1_text{border-top:none;}
#side2 .depth1_text span{ color:#141414; font-size:18px; line-height:18px;}
#side2 .depth1_item.active .depth1_text span{ color:#3256a5;}
#side2 .depth1_item.active .depth1_text{color: #3256a5;}
#side2 .depth1_item.active .depth1_text:before{display: block; position: absolute; bottom: 0; left: -1px; width: calc(100% + 2px); height: 2px; background: linear-gradient(to right, #4384d4 0%,#00a6bf 100%);}
#side2 .depth1_item.has .depth1_text:after{display: block; position: absolute; top: 26px; right: 20px; width: 11px; height: 6px; background: url(../images/sub/side_sprite.png) no-repeat -101px -9px;}
#side2 .depth1_item.has.active .depth1_text:after,
#side2 .depth1_item.has .depth1_text.actived:after{top: 16px; right: 14px; width: 22px; height: 22px; background-position: -70px 0;}

/*새창*/
#side2 a[target='_blank']:after {display:inline-block; width:11px; height:11px; margin-left:5px; background:url(/common/images/template.png) no-repeat -19px -7px;}

#side2 .depth2_item.has .depth2_text{padding-right:30px;}
#side2 .depth2_item.has .depth2_text:after{display:block; position:absolute; top:10px; right:19px; width:9px; height:9px; background-repeat:no-repeat; background-position:-120px top; background-image:url(../images/sub/side_sprite.png); content:''; transition-property:background-position; transition-duration:250ms; transition-timing-function:ease-in-out;}
#side2 .depth2_item.has.active .depth2_text:after{background-position:-120px -9px;}

/* 2차메뉴 활성화 */
#side2 .depth1_item.active .depth2 {visibility:visible;}
#side2 .depth1_item.active .depth2_list {padding-top:15px; padding-bottom:15px;}
#side2 .depth1_item.active .depth2_item{height: auto; }
#side2 .depth1_item .depth2_text {overflow: hidden; height: 0; padding-left: 15px; font-size:16px; }
#side2 .depth1_item.active .depth2_text {height: auto; padding-top: 6px; padding-bottom: 6px; color:#444; line-height:18px;}
#side2 .depth1_item.active .depth2_item.active .depth2_text,
#side2 .depth1_item.active .depth2_text:hover,
#side2 .depth1_item.active .depth2_text:focus{color: #0a50a6; font-weight: 600;}

#side2 .depth1_item.active .depth2_text:before{display: block; position: absolute; top: 12px; left: 0; width: 7px; height: 8px; background: url(../images/sub/side_sprite.png) no-repeat -13px -4px;}
#side2 .depth1_item.active .depth2_item.active .depth2_text:before,
#side2 .depth1_item.active .depth2_text:hover:before,
#side2 .depth1_item.active .depth2_text:focus:before{background-position: 0 -4px;}

/* 3차메뉴 활성화 */
#side2  .depth2_item.active .depth3 {visibility:visible;  }
#side2  .depth2_item.active .depth3_list { padding-top:2px; padding-bottom:10px;}
#side2  .depth2_item.active .depth3_item{height: auto; padding: 4px 0 5px;}
#side2  .depth2_item .depth3_text{height: 0; padding-left: 15px; font-size:15px;}
#side2  .depth2_item.active .depth3_text {height: auto; color:#222; line-height:18px;}

#side2 .depth2_item.active .depth3_item.active .depth3_text,
#side2 .depth2_item.active .depth3_text:hover,
#side2 .depth2_item.active .depth3_text:focus{color: #0a50a6; font-weight: 600;}

#side2 .depth2_item.active .depth3_text:before{display: block; position: absolute; top: 7px; left: 0; width: 4px; height: 4px; border-radius:5px; background-color: #b4c3d6;}
#side2 .depth2_item.active .depth3_item.active .depth3_text:before,
#side2 .depth2_item.active .depth3_text:hover:before,
#side2 .depth2_item.active .depth3_text:focus:before{background-color: #4384d4;}
}
@media screen and (max-width:1399px){
    .mainVisual {width: 700px;}
    .mainVisual img {height: 376px;}
}
@media screen and (max-width: 1279px) {
    #mainSearch .bottom {display: block;height: auto;}
    .mainVisual {width: 100%;height: auto;}
    .mainVisual img {width: 100%;height: auto;}
}
@media screen and (min-width: 1025px) and (max-width: 1279px){
    #mainSearch {padding-bottom: 0;}
    .infoBox {display: flex;align-items: flex-start;justify-content: space-between;width: 100%;padding-top: 28px;}
    .infoBox img {width: 185px;}
    .infoBox > div {width: calc(60% - 50px);justify-content: flex-start;}
    .infoBox > div > div{position: relative;width: 100%;margin-left: -30px;}
    .infoBox > div > div > ul {position: absolute;right: 0;top: 0;}
    .infoBox > div ul > li {margin-bottom: 12px;}
    .infoBox > ul {width: 40%;flex-wrap: wrap;padding: 20px;}
    .infoBox > ul > li {width: 50%;}
    .infoBox > ul > li + li a::after{display: none;}
    .infoBox > ul > li:nth-child(1), 
    .infoBox > ul > li:nth-child(3) {
        border-right: #e5e5e5 solid 1px;
    }
    .infoBox > ul > li:nth-child(1), 
    .infoBox > ul > li:nth-child(2) {
        border-bottom: #e5e5e5 solid 1px;
    }
    .infoBox > ul > li a {padding: 30px 0 5px;}
    .infoBox > ul > li:nth-child(1) a, 
    .infoBox > ul > li:nth-child(2) a{background-position: center 0;}
    .infoBox > ul > li:nth-child(3) a, 
    .infoBox > ul > li:nth-child(4) a{padding: 43px 0 0;}
}
@media screen and (max-width: 1024px){
    .mainVisual {margin-top: 25px;}
    .mainVisual .controll {width: 178px;height: 34px;padding: 3px 0 7px;border-radius: 9px;}
    .mainVisual .controll > * + * {margin-left: 3px;}
    .mainVisual .controll > a {width: 22px;height: 22px;}
    .mainVisual .controll span {font-size: 11px;}
    .infoBox {width: 100%;}
    .infoBox > div p {margin-bottom: 10px;}
}
@media screen and (max-width: 520px){
    .infoBox img {width: 200px;}
    .infoBox > div span {font-size: 11px;}
    .infoBox > div > div {flex-grow: 1;}
    .infoBox > div p, .infoBox > div p span {font-size: 20px;}
    .infoBox > div ul > li{margin-bottom: 4px;}
    .infoBox > div ul > li a {line-height: 33px;font-size: 12px;background-size: auto 14px;padding: 0 10px 0 37px;background-position: 16px center;}
    .infoBox > ul {border-radius: 11px 25px;}
    .infoBox > ul > li a {font-size: 11px;background-size: auto 18px !important;padding: 39px 0 8px;}
}
@media screen and (max-width: 424px){
    .infoBox > div {align-items: flex-end;}
}
@media screen and (max-width: 374px){
    .infoBox img {width: 110px;}
}
.weather {    
	margin: 0;
    padding: 0;
    border: 0;
    font-size: 15px;
    line-height: 160%;
    font-family: 'S-CoreDream';
    color: #666;
    box-sizing: border-box;
    letter-spacing: -0.4px;
    vertical-align: middle;
}
.wrap2 {
	position:relative;
	width:1400px;
	margin:0 auto;
}

/* tablet */
@media screen and (max-width:1200px){
	#wrapper{min-width:1000px;}
	.wrap2 {width:1000px;}
}
@media screen and (max-width:1000px){
	#wrapper{min-width:0;}
	.wrap2 {width:94%;}
}
/* mobile */
@media screen and (max-width:640px){
    #side2 {
        display: none;
    }
    .colgroup2 {
        width: 100%;
    }

}
.colgroup2 {display:inline; float:right;width:1080px;min-height:500px;margin:0; padding:0; }
@media all and (max-width:1000px) {
	.colgroup2{ width:100%; }
	
}
@media screen and (max-width: 1200px) {
    .colgroup2 {
        width: 720px;
    }
    #side2 { width:240px; }
}
@media all and (max-width:1000px) {
    #side2 {
        display: none;
    }
    .colgroup2 {
        width: 100%;
    }
}


@media all and (max-width:1000px) {
	.sub_visual{display: none;}
	#side2 {display: none;}
	.colgroup2{width:100%}
	.sub_head{position: relative; left: -20px; width: calc(100% + 40px); min-height: 120px; height: auto; margin-bottom: 70px; padding: 30px 20px; background:#e9eefc url(../images/sub/sub_visual.gif) no-repeat center top; text-align: center;}
	.sub_head .sub_title h2 {font-size: 20px;}
	.path{height: auto;}

	.contents_fixed {position: absolute; right: 20px; bottom: -50px;}	
	.contents_fixed ul li.print{display: none;}
	.contents_fixed ul li.sns button{border: 1px solid #c6c6c6; border-radius:30px}
	.contents_fixed ul li.sns .cont{right: 100%; left: auto;}

}