@charset "utf-8";
@import url('common2025.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 {
    background: url('../images/main/mainVisual_bg.png') center 0 no-repeat;
    height: 579px;
}
#mainSearch .top {height: 163px;z-index: 1}
.noticeBox {
    position: absolute;
    right: 8px;
    top: 33px;
}
.noticeBox > a[class^='icon'] {
    display: block;
    background: url('../images/main/icon_notice1.png') 20px center / 40px auto no-repeat #ffe5e3;
    border-radius: 15px 40px 15px 15px;
    width: 208px;
    height: 94px;
    padding: 25px 0 0 77px;
    box-shadow: -2.7px 5.4px 12px rgba(0, 0, 0, 0.06);
}
.noticeBox > a.type {background-image: url('../images/sub/disasterMsg/icon_disasterApi.png');}
.noticeBox > a.DISASTERFIELD01 {background-image: url('../images/sub/disasterMsg/icon_DISASTERFIELD01.png');}
.noticeBox > a.DISASTERFIELD02 {background-image: url('../images/sub/disasterMsg/icon_DISASTERFIELD02.png');}
.noticeBox > a.DISASTERFIELD03 {background-image: url('../images/sub/disasterMsg/icon_DISASTERFIELD03.png');}
.noticeBox > a.DISASTERFIELD04 {background-image: url('../images/sub/disasterMsg/icon_DISASTERFIELD04.png');}
.noticeBox > a.DISASTERFIELD05 {background-image: url('../images/sub/disasterMsg/icon_DISASTERFIELD05.png');}
.noticeBox > a.DISASTERFIELD06 {background-image: url('../images/sub/disasterMsg/icon_DISASTERFIELD06.png');}
.noticeBox > a.DISASTERFIELD07 {background-image: url('../images/sub/disasterMsg/icon_DISASTERFIELD07.png');}
.noticeBox > a.DISASTERFIELD08 {background-image: url('../images/sub/disasterMsg/icon_DISASTERFIELD08.png');}
.noticeBox > a.DISASTERFIELD09 {background-image: url('../images/sub/disasterMsg/icon_DISASTERFIELD09.png');}
.noticeBox > a.DISASTERFIELD10 {background-image: url('../images/sub/disasterMsg/icon_DISASTERFIELD10.png');}
.noticeBox > a.DISASTERFIELD11 {background-image: url('../images/sub/disasterMsg/icon_DISASTERFIELD11.png');}
.noticeBox > a.DISASTERFIELD12 {background-image: url('../images/sub/disasterMsg/icon_DISASTERFIELD12.png');}
.noticeBox > a.DISASTERFIELD13 {background-image: url('../images/sub/disasterMsg/icon_DISASTERFIELD13.png');}
.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;
}
.layerPopup.alertType .layerCont p {
    color: #222;
    font-size: 17px;
    text-align: center;
}
.layerPopup .btnArea {
    display: flex;
    justify-content: center;
    gap: 7px;
}
.layerPopup .btnArea > a{
    text-align: center;
    display: inline-block;
    border-radius: 24px;
    border: #bbbbbb solid 1px;
    width: 140px;
    line-height: 46px;
    font-weight: 500;
    background-color: #ec6d65;
    border-color: #ec6d65;
    color: #fff;
}
.layerPopup .btnArea > a + a{
    border: #bbbbbb solid 1px;
    background-color: #fff;
    color: #222;
}
.weather {
    position: absolute;
    top: 49px;
    display: flex;
    gap: 22px;
}
.weather img {width: 70px;}
.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;
}
.dust_03 {
    background-image: url('../images/weather/dust_3.png');
    color: #ffa019 !important;
}
.dust_04 {
    background-image: url('../images/weather/dust_4.png');
    color: #ec6d65 !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, #fff9ef);height: auto;padding-bottom: 30px;}
    .searchArea {width: 40%;left: 55%;}
}
@media screen and (max-width:1024px){
    #mainSearch .top {height: auto;}
    .weather, 
    .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: 22px center;
        background-size: 20px;
    }
    .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;
    }
    .weather {flex-shrink: 0;width: 360px;padding-top: 15px;}
    .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;}
    .bestKeyword .controll {right: 0;}
    .bestKeyword .slider {width: calc(100% - 160px);}
}
@media screen and (max-width:768px){
    #mainSearch .top > div:not(.noticeBox) {display: block;padding: 20px 0 0 ;position: relative;}
    .searchArea {width: 100%;}
    .weather {position: absolute;top: 67px;width: auto;gap: 5px;padding-right: 15px;}
    .weather::after{content: "";display: block;width: 1px;height: 13.5px;background-color: #d6d3d1;position: absolute;right: 0;top: 22px;}
    .weather img {width: 24px;}
    .weather dl, .weather p span + span {display: none;}
    .weather p span:first-child{font-size: 15px;}
    .weather p span:first-child span{font-size: 11px;}
    .searchBox input[type='search']  {font-size: 14px;line-height: 44px;}
    .searchBox input[type='search']::placeholder {font-size: 14px;line-height: 44px;}
    .bestKeyword {margin-left: 100px;}
    .bestKeyword .tit {font-size: 11px;line-height: 24px;}
    .bestKeyword .slider a {font-size: 12px;padding: 0 5px;}
}
@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 10px;
}
.noticeCont {
    border: #dddddd solid 1px;
    border-radius: 14px;
    margin-top: 15px;
}
.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: 262px;
    height: 54px;
    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 (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;}
}
/* 배너모아보기 팝업 */
.layerPopup.bannerType > div{
    border-radius: 120px 0 20px 20px;
}
.layerPopup.bannerType .layerHead{
    border-radius: 120px 0 0px 0px;
    background: #fff;
    border-bottom: none;
    padding: 30px 0;
}
.layerPopup.bannerType .layerHead h3{
    font-size: 34px;
    font-weight: 700;
    text-align: center;
}
.layerPopup.bannerType .layerClose {
    top: -35px;
    right: -1px;
    width: 71px;
    height: 71px;
    background: url('../images/main/btn_layerClose.png') center / 71px no-repeat;
}
.bannerList {
    height: 425px;
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 30px 40px;
    margin-top: -30px;
}
.bannerList > li {
    width: calc(calc(100% / 3) - 30px);
}
.bannerList > li img{border-radius: 12px;}
@media screen and (max-width: 1024px){
    .layerPopup.bannerType .layerHead h3 {font-size: 30px;}
    .bannerList {gap: 20px;height: 470px;}
    .bannerList > li {width: calc(calc(100% / 2) - 15px);}
}
@media screen and (max-width: 767px){
    .layerPopup.bannerType .layerHead {border-radius: 60px 0 0 0;padding: 30px 0 10px;}
    .layerPopup.bannerType .layerHead h3 {font-size: 20px;line-height: 130%;}
    .bannerList {margin-top: 0px;height: 440px;gap: 0;padding-right: 5px;}
    .bannerList > li {width: 100%;margin-bottom: 10px;}
    .layerPopup.bannerType .layerClose {width: 50px;height: 50px;background-size: 50px;top: -25px}
}
@media screen and (max-width: 319px){
    .layerPopup.bannerType .layerHead {padding: 35px 0 0px;}
    .layerPopup.bannerType .layerHead h3 {font-size: 18px;}
    .layerPopup.bannerType .layerCont {margin-top: -1px;}
}
/* 영등포구민 맞춤서비스 */
#mainService {
    margin-top: 30px;
    background: #feeeeb;
    height: 300px;
    position: relative;
}
#mainService > .container {
    border-radius: 0 60px 140px 0;
}
#mainService::after {
    content: "";
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    width: calc(calc(100vw - 1400px) / 2);
    height: 300px;
    background: url('../images/main/service_bg2.png') no-repeat #fff;
}
#mainService h3{
    position: absolute;
    right: 0px;
    top: -17px;
    background: url('../images/main/service_bg.png') right 0 / 160px auto no-repeat;
    font-size: 34px;
    font-weight: 700;
    color: #222222;
    padding: 65px 150px 0 0;
}
#mainService h3 span {
    color: #ec6d65;
}
.mainTab {display: flex;padding-top: 38px;}
.mainTab a{
    display: block;
    border-radius: 26px;
    line-height: 52px;
    font-size: 17px;
    color: #7c7675;
    font-weight: 500;
    background-color: #fffaf9;
    width: 140px;
    text-align: center;
}
.mainTab li + li {margin-left: 10px;}
.mainTab li.on a {
    box-shadow: 6px 0 8px rgba(0, 0, 0, 0.06);
    background-color: #ec6d65;
    color: #fff;
    font-weight: 600;
    border-radius: 26px 13px;
}
#mainService .controll > a {
    width: 60px;
    height: 60px;
    background-size: auto 20px;
}
#mainService .slider {
    width: 1200px;
    position: absolute;
    top: 126px;
    left: 50%;
    transform: translateX(-50%);
}
#mainService .slider a{
    display: block;
    padding: 117px 0 0 0;
    font-weight: 500;
    color: #222222;
    position: relative;
    width: 101px;
    text-align: center;
}
#mainService .slider a br{display: none;}
#mainService .slider a::after{
    content: "";
    display: block;
    width: 101px;
    height: 101px;
    background-position: center;
    background-size: auto 50.5px;
    background-color: #fff;
    background-repeat: no-repeat;
    border-radius: 34px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}
#mainService .slider a:hover::after{
    box-shadow: 10px 0 15px rgba(0, 0, 0, 0.04);
}
#mainService .prev,
#mainService .next{
    position: absolute;
    top: 157px;
}
#mainService .next{right: 15px;}
#mainService .slider a.icon0101::after{background-image: url('../images/main/service_0101.png');}
#mainService .slider a.icon0102::after{background-image: url('../images/main/service_0102.png');}
#mainService .slider a.icon0103::after{background-image: url('../images/main/service_0103.png');}
#mainService .slider a.icon0104::after{background-image: url('../images/main/service_0104.png');}
#mainService .slider a.icon0105::after{background-image: url('../images/main/service_0105.png');}
#mainService .slider a.icon0106::after{background-image: url('../images/main/service_0106.png');}
#mainService .slider a.icon0107::after{background-image: url('../images/main/service_0107.png');}
#mainService .slider a.icon0108::after{background-image: url('../images/main/service_0108.png');}
#mainService .slider a.icon0109::after{background-image: url('../images/main/service_0109.png');}

#mainService .slider a.icon0201::after{background-image: url('../images/main/service_0201.png');}
#mainService .slider a.icon0202::after{background-image: url('../images/main/service_0202.png');}
#mainService .slider a.icon0203::after{background-image: url('../images/main/service_0203.png');}
#mainService .slider a.icon0204::after{background-image: url('../images/main/service_0204.png');}
#mainService .slider a.icon0205::after{background-image: url('../images/main/service_0205.png');}
#mainService .slider a.icon0206::after{background-image: url('../images/main/service_0206.png');}
#mainService .slider a.icon0207::after{background-image: url('../images/main/service_0207.png');}
#mainService .slider a.icon0208::after{background-image: url('../images/main/service_0208.png');}
#mainService .slider a.icon0209::after{background-image: url('../images/main/service_0209.png');}

#mainService .slider a.icon0301::after{background-image: url('../images/main/service_0301.png');}
#mainService .slider a.icon0302::after{background-image: url('../images/main/service_0302.png');}
#mainService .slider a.icon0303::after{background-image: url('../images/main/service_0303.png');}
#mainService .slider a.icon0304::after{background-image: url('../images/main/service_0304.png');}
#mainService .slider a.icon0305::after{background-image: url('../images/main/service_0305.png');}
#mainService .slider a.icon0306::after{background-image: url('../images/main/service_0306.png');}
#mainService .slider a.icon0307::after{background-image: url('../images/main/service_0307.png');}
#mainService .slider a.icon0308::after{background-image: url('../images/main/service_0308.png');}
#mainService .slider a.icon0309::after{background-image: url('../images/main/service_0309.png');}

#mainService .slider a.icon0401::after{background-image: url('../images/main/service_0401.png');}
#mainService .slider a.icon0402::after{background-image: url('../images/main/service_0402.png');}
#mainService .slider a.icon0403::after{background-image: url('../images/main/service_0403.png');}
#mainService .slider a.icon0404::after{background-image: url('../images/main/service_0404.png');}
#mainService .slider a.icon0405::after{background-image: url('../images/main/service_0405.png');}
#mainService .slider a.icon0406::after{background-image: url('../images/main/service_0406.png');}
#mainService .slider a.icon0407::after{background-image: url('../images/main/service_0407.png');}
#mainService .slider a.icon0408::after{background-image: url('../images/main/service_0408.png');}
#mainService .slider a.icon0409::after{background-image: url('../images/main/service_0409.png');}

#mainService .slider a.icon0501::after{background-image: url('../images/main/service_0501.png');}
#mainService .slider a.icon0502::after{background-image: url('../images/main/service_0502.png');}
#mainService .slider a.icon0503::after{background-image: url('../images/main/service_0503.png');}
#mainService .slider a.icon0504::after{background-image: url('../images/main/service_0504.png');}
#mainService .slider a.icon0505::after{background-image: url('../images/main/service_0505.png');}
#mainService .slider a.icon0506::after{background-image: url('../images/main/service_0506.png');}
#mainService .slider a.icon0507::after{background-image: url('../images/main/service_0507.png');}
#mainService .slider a.icon0508::after{background-image: url('../images/main/service_0508.png');}
#mainService .slider a.icon0509::after{background-image: url('../images/main/service_0509.png');}

@media screen and (max-width: 1399px){
    #mainService {padding-bottom: 25px;height: auto;border-radius: 0 32px 70px 0;}
    #mainService .slider {position: static;transform: translateX(0);width: 100%;margin: 30px 0;}
    #mainService .controll {display: none;}
    #mainService .slick-dots {
        position: absolute;
        left: 50%;
        bottom: -28px;
        transform: translateX(-50%);
        display: flex;
        justify-content: center;
        gap: 10px;
    }
    #mainService .slick-dots button{
        display: block;
        text-indent: -999999999px;
        overflow: hidden;
        width: 10px;
        height: 10px;
        background-color: #fff;
        border-radius: 5px;
        box-shadow: 8px 0 8px rgba(106, 138, 124, 0.15);
    }
    #mainService .slick-dots .slick-active button{background-color: #ec6d65;width: 35px;}
}
@media screen and (max-width: 1279px){
    #mainService h3 {font-size: 24px;background-size: 120px auto;padding: 55px 95px 0 0;}
    .mainTab a {width: 110px;line-height: 35px;font-size: 15px;}
    #mainService .slider a {padding: 96px 0 0 0}
    #mainService .slider a::after {background-size: auto 34px;width: 84px;height: 84px;border-radius: 27px;}
}
@media screen and (max-width: 1023px){
    #mainService h3 {right: auto;left: 0;width: 100%;font-size: 21px;background-position: 180px 0;padding: 45px 95px 10px 0;background-size: 105px auto;}
    .mainTab {padding-top: 70px;}
    .mainTab a {font-size: 14px;width: 104px;}
    #mainService .slider a {padding-top: 85px;font-size: 13px;}
    #mainService .slider a::after {width: 75px;height: 75px;}
}
@media screen and (max-width: 768px){
    .mainTab {flex-wrap: wrap;gap: 10px;}
    .mainTab li + li {margin-left: 0;}
    #mainService .slider .slick-slide > div {display: flex;}
    #mainService .slider .slick-slide > div + div{margin-top: 20px;}
}
@media screen and (max-width: 591px){
    .mainTab li{width: calc(calc(100% / 4) - 10px);}
    .mainTab a{width: 100%;}
}
@media screen and (max-width: 425px){
    .mainTab li{width: calc(calc(100% / 3) - 10px);}
    #mainService .slider a br{display: block;}
}
@media screen and (max-width: 374px){
    .mainTab li{width: calc(calc(100% / 2) - 10px);}
    #mainService h3 {font-size: 20px;letter-spacing: -1px;padding: 40px 50px 10px 0;background-position: 160px 0;}
}
/* 영등포 소식 & 팝업존 */
#mainNotice {
    background: linear-gradient(to bottom, #ffffff, #e9f9ff);height: auto;padding-bottom: 30px;
}
#mainNotice h3,
#mainReserve h3,
#mainPhoto h3{
    color: #222222;
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 20px;
}
#mainNotice > div {
    padding: 80px 0 250px 0;
    display: flex;
    justify-content: space-between;
}
#mainNotice .tab {
    position: absolute;
    left: 200px;
    top: 10px;
    display: flex;
}
#mainNotice .tab a{
    color: rgba(34, 34, 34, 0.5);
    font-size: 18px;
    display: block;
}
#mainNotice .tab li.on a{
    color: #ec6d65;
    font-weight: 700;
}
#mainNotice .tab li + li {
    margin-left: 30px;
}
#mainNotice .tab li{
    position: relative;
}
#mainNotice .tab li + li::after {
    content: "";
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #bbbbbb;
    position: absolute;
    left: -15px;
    top: 50%;
    transform: translateX(-50%);
}
.bbsList {
    width: calc(100% - 530px);
    position: relative;
}
.bbsList > div ul a{
    display: flex;
    align-items: center;
    padding: 30px 0;
}
.bbsList > div ul a > div{
    width: calc(100% - 110px);
}
.bbsList .tit{
    position: relative;
}
.bbsList [class^='cate']{
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 145px;
    height: 32px;
    text-align: center;
    border-radius: 16px;
    line-height: 32px;
    font-weight: 600;
    font-size: 14px;
}
.bbsList .cate01{background-color: #fff; border-color: #8fc43d; color: #8fc43d;text-align:center;border-style:solid;border-width:1px;}
.bbsList .cate02{background-color: #fff; border-color: #27bae1; color: #27bae1;text-align:center;border-style:solid;border-width:1px;}
.bbsList .cate03{background-color: #fff; border-color: #ffa019;color: #ffa019;text-align:center;border-style:solid;border-width:1px;}
.bbsList .cate04{background-color: #fff; border-color: #ec6d65;color: #ec6d65;text-align:center;border-style:solid;border-width:1px;}
.bbsList .tit p{
    /* width: calc(100% - 	160px);  */
    width: 100%;
    color: #222222;
    font-size: 20px;
    font-weight: 600;
    white-space: nowrap; 
    text-overflow: ellipsis;
    overflow: hidden;
    /* margin-left: 145px; */
}
.bbsList .tit + p{
    color: rgba(0,0,0,0.6);
    white-space: nowrap; 
    text-overflow: ellipsis;
    overflow: hidden;
    margin-top: 10px;
}
.bbsList > div ul a > span{
    display: block;
    width: 110px;
    color: #888888;
    font-size: 14px;
    text-align: right;
}
.bbsList > div ul li + li{
    border-top: #dfe3e5 solid 1px;
}
.btnMore{
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
    height: 40px;
    background: url('../images/common/btn_more.png') center / 13px auto no-repeat #fff;
    text-indent: -9999px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.06);
    border-radius: 50%;
}
.popupZone {
    width: 450px;
    margin-left: 80px;
    position: relative;
}
.popupZone img {
    border-radius: 65px 160px 65px 65px;
    display: block;
    width: calc(100% - 12px);
    box-shadow: 6px 0 12px rgba(0, 0, 0, 0.06);
}
.popupZone .controll {
    position: absolute;
    top: 0px;
    right: 0;
}
.popupZone .controll span {
    font-size: 14px;
    color: rgba(0,0,0,0.5);
    font-weight: 500;
}
.popupZone .controll span strong{
    color: rgba(0,0,0,1);
}
.bannerList.popup {height: 500px;}
.bannerList.popup > li {width: calc(calc(100% / 4) - 30px)}
.bannerList.popup > li img {border-radius: 65px 160px 65px 65px;}

@media screen and (max-width: 1199px){
    #mainNotice > div {display: block;padding: 35px 0 24px;}
    #mainNotice > div > *{width: 100%;}
    .popupZone {margin: 0px;border-top: #dfe3e5 solid 1px;padding-top: 35px;}
    .popupZone .controll {top: 35px;}
}
@media screen and (max-width: 1024px){
    .bannerList.popup {height: 380px;}
    .bannerList.popup > li {width: calc(calc(100% / 3) - 20px);}
}
@media screen and (max-width: 768px){
    #mainNotice h3,
    #mainReserve h3,
    #mainPhoto h3 {font-size: 21px;}
    #mainNotice > div {padding: 45px 0 0px;}
    #mainNotice .tab {position: static;margin-top: -15px;}
    #mainNotice .tab li + li::after {width: 3px;height: 3px;left: -9px;}
    #mainNotice .tab li + li {margin-left: 20px;}
    #mainNotice .tab a {font-size: 15px;}
    .btnMore {top: -3px;width: 30px;height: 30px;}
    .bbsList [class^='cate'] {font-size: 12px;line-height: 22.5px;height: 22.5px;width: 120px;top: -30px;}
    .bbsList .tit p {margin: 0 0 0 0;font-size: 15px;width: calc(100% + 39px);}
    .bbsList > div ul a {align-items: self-start;padding: 17px 0;} 
    .bbsList > div ul a > span {font-size: 13px;}
    .bbsList .tit + p {font-size: 13px;margin-top: 5px;width: calc(100% + 110px);}
    
    .popupZone .controll {top: 38px;}
    .popupZone .controll > a {width: 30px;height: 30px;}
    .bannerList.popup > li img,
    .popupZone img {border-radius: 30px 80px 30px 30px;}
    .bannerList.popup > li {width: calc(calc(100% / 2) - 20px);}
}
@media screen and (max-width: 767px){
    .bannerList.popup > li {width: 100%}
    .bannerList.popup > li img {width: 100%;}
}
@media screen and (max-width: 319px){
    #mainNotice .tab a{font-size: 14px;}
    .popupZone .controll {top: 35px;}
    .popupZone .controll span {margin-top: 4px;display: inline-block;}
    .popupZone .controll > a {width: 25px;height: 25px;background-size: auto 9px;margin-top: -5px;}
    .popupZone .controll > * + * {margin-left: 3px;}
}
/* 영등포 통합예약 */
#mainReserve {
    max-width: 1740px;
    margin: -192px auto 0;
    background-color: #fff2df;
    border-radius: 178px 67px 67px 67px;
    padding: 60px 0 40px;
}
#mainReserve .tit{
    display: flex;
    align-items: center;
}
#mainReserve .tit span[class^='stat'] {
    display: block;
    margin: -20px 0 0 10px;
    color: #ffffff;
    border-radius: 15px 8px;
    line-height: 30px;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    padding: 0 14px;
}
#mainReserve .tit .stat01 {background: linear-gradient(to right, #ec6a61, #e9463c);}
#mainReserve .tit .stat02 {background: linear-gradient(to right, #ec6a61, #e9463c);}
#mainReserve .tit .stat03 {background: linear-gradient(to right, #ec6a61, #e9463c);}
#mainReserve .tit .stat04 {background: linear-gradient(to right, #ec6a61, #e9463c);}
#mainReserve .tit .stat05 {background: linear-gradient(to right, #ec6a61, #e9463c);}
#mainReserve .slider {margin: -20px -20px 0;}
#mainReserve .slick-slide {padding: 20px;}
#mainReserve .slider a{
    display: block;
    border-radius: 42px;
    background-color: #fff;
    padding: 30px 35px;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.04);
}
#mainReserve .slider a > div {
    display: flex;
    justify-content: space-between;
}
#mainReserve .slider a > div .cate{
    display: block;
    border-radius: 14px;
    border: #27bae1 solid 1px;
    color: #27bae1;
    font-size: 13px;
    font-weight: 500px;
    width: 85px;
    text-align: center;
    line-height: 26px;
}
#mainReserve .slider a > div .tag{
    color: #8fc43d;
    font-size: 14px;
    font-weight: 500;
}
#mainReserve .slider a > p{
    font-size: 20px;
    font-weight: 600;
    color: #222;
    line-height: 30px;
    height: 60px;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: keep-all;
    margin: 15px 0;
}
#mainReserve .slider a > dl dt, 
#mainReserve .slider a > dl dd{
    float: left;
}
#mainReserve .slider a > dl dt {
    text-indent: -99999px;
    overflow: hidden;
    background-position: center;
    background-size: auto 16px;
    background-repeat: no-repeat;
    width: 15px;
    margin-right: 10px;
    height: 30px;
}
#mainReserve .slider a > dl dt:nth-child(1) {background-image: url('../images/main/icon_map.png');}
#mainReserve .slider a > dl dt:nth-child(3) {background-image: url('../images/main/icon_date.png');}
#mainReserve .slider a > dl dd {
    width: calc(100% - 25px);
    line-height: 30px;
}
#mainReserve .slider a > dl dd:nth-child(4) {
    font-weight: 500;
}
#mainReserve .controll {
    position: absolute;
    right: 0;
    top: 0;
}
#mainReserve .controll span{display: inline-block;margin-top: 5px;}
#mainReserve .controll > a{margin-top: -5px;}
@media screen and (max-width: 1739px) {
    #mainNotice > div {padding-bottom: 30px;}
    #mainReserve {border-radius: 0;margin: 0 auto;}
}
@media screen and (max-width: 1199px) {
    #mainNotice > div {padding-bottom: 0px;}
    #mainReserve {padding: 30px 0 20px;}
    #mainReserve .slider {margin: -10px -10px 0}
    #mainReserve .slick-slide {padding: 10px;}
}
@media screen and (max-width: 768px) {
    #mainReserve {padding-top: 20px;}
    #mainReserve .slider a {padding: 20px;border-radius: 21px;margin-bottom: 15px;}
    #mainReserve .slider a > div .cate {font-size: 12px;width: 67px;}
    #mainReserve .slider a > div .tag {font-size: 13px;}
    #mainReserve .slider a > p {font-size: 15px;line-height: 20px;height: auto;max-height: 40px;margin: 10px 0;}
    #mainReserve .slider a > dl dt {background-size: auto 10px;width: 12px;height: 20px;margin-right: 5px;}
    #mainReserve .slider a > dl dd {font-size: 12px;width: calc(100% - 17px);line-height: 20px;}
    #mainReserve .slick-slide {padding-bottom: 30px;}
    #mainReserve .controll {top: auto;bottom: 0;right: 50%;transform: translateX(50%);white-space: nowrap;}
}
/* 영등포 사진 & TV & 소식지 */
#mainPhoto .container {
    display: flex;
    justify-content: space-between;
    padding: 70px 0 0px;
}
#mainPhoto .container > div{position: relative;}
#mainPhoto .container > div:nth-child(1){
    width: 560px;
}
#mainPhoto .container > div:nth-child(2){
    width: calc(100% - 560px - 320px - 112px);
    margin: 0 56px;
}
#mainPhoto .container > div:nth-child(3){
    width: 320px;
}
#mainPhoto .btnMore {
    border: #e7e7e7 solid 1px;
}
.photo ul{
    display: flex;
    justify-content: space-between;
}
.photo ul li + li {margin-left: 30px;}
.photo ul a{
    display: block;
    max-width: 265px;
}
.photo ul a img{
    display: block;
    border-radius: 30px;
    height: 190px;
}
.photo ul a p {
    font-size: 17px;
    color: #222222;
    font-weight: 500;
    white-space: nowrap; 
    text-overflow: ellipsis;
    overflow: hidden;
    margin: 15px 0;
}
.photo ul a span {
    color: #777777;
    font-size: 14px;
}
.tv {position: relative;}
.tv a {display: block;}
.tv img{
    width: calc(100% - 26px);
    height: 214px;
    border-radius: 28px;
    position: absolute;
    z-index: 1;
}
.tv::after{
    content: "";
    display: block;
    background-color: #feeeeb;
    border-radius: 28px;
    width: calc(100% - 20px);
    height: 238px;
    position: absolute;
    right: 0px;
    bottom: 0px;
}
.tv p{
    position: absolute;
    bottom: 20px;
    z-index: 2;
    left: 40px;
    width: calc(100% - 60px);
    white-space: nowrap; 
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 16px;
    color: #222222;
    font-weight: 600;
}
.letterBox {
    display: flex;
    justify-content: space-between;
}
.letterBox .img {width: 210px;}
.letterBox .img img{
    border-radius: 15px;
    box-shadow: 0px 10px 16px rgba(0, 0, 0, 0.08);
}
.letterBox .img + div {
    width: 82px;
}
.letterBox .tit a{display: block;}
.letterBox .tit a p{
    color: #fff;
    font-weight: 600;
    background: linear-gradient(to bottom, #00cbcc, #1eb8df);
    border-radius: 14px 7px;
    text-align: center;
    line-height: 28px;
    width: 74px;
}
.letterBox .tit a span {
    font-size: 25px;
    color: #222222;
    font-weight: 600;
    display: block;
    margin: 8px 0 30px;
}
.letterBox .btnArea > a {
    border: #cfcfcf solid 1px;
    border-radius: 10px;
    display: block;
    width: 100%;
    height: 86px;
    background-position: center 18px;
    background-repeat: no-repeat;
    background-size: 20px auto;
    font-size: 13px;
    color: #222222;
    font-weight: 500;
    padding: 54px 0 0 0;
    text-align: center;
}
.letterBox .btnArea > a + a{margin-top: 8px;}
.letterBox .btnArea > a:nth-child(1) {background-image: url('../images/main/btn_zoom.png');}
.letterBox .btnArea > a:nth-child(2) {background-image: url('../images/main/btn_down.png');}

@media screen and (max-width: 1439px) {
    #mainPhoto .container > div:nth-child(1) {width: 545px;}
    #mainPhoto .container > div:nth-child(2) {width: calc(100% - 865px - 80px);margin: 0 40px;}
    .photo ul li + li {margin-left: 15px;}
}
@media screen and (max-width: 1279px) {
    #mainPhoto .container {flex-wrap: wrap;}
    #mainPhoto .container > div:nth-child(1) {width: 100%;}
    .photo ul > li {width: calc(50% - 8px);}
    .photo ul li + li {margin-left: 16px;}
    .photo ul a img {width: 100%;height: auto}
    .photo ul a {max-width: 100%;}
}
@media screen and (min-width: 768px) and (max-width: 1279px){
    #mainPhoto .container {display: block;}
    #mainPhoto .container > div:nth-child(2) {float: left;width: calc(100% - 360px);margin: 30px 0 0;}
    #mainPhoto .container > div:nth-child(3) {float: right;margin: 30px 0;}
    .tv img {height: 230px;position: static;}
    .tv::after {z-index: -1;height: 230px;bottom: -50px;width: calc(100% - 26px);}
    .tv p {bottom: -38px;left: 50px;width: calc(100% - 80px);}
}
@media screen and (max-width: 767px) {
    #mainPhoto .container {display: block;padding: 30px 0 0 0;}
    #mainPhoto .container > div {width: 100% !important;}
    .photo ul {display: block;}
    .photo ul li {width: 100%;}
    .photo ul li + li {display: none;}
    .photo ul a{max-width: 100%;}
    .photo ul a img {width: 100%;height: auto;border-radius: 15px;}
    .photo ul a p {font-size: 16px;margin: 15px 0 5px;}
    
    #mainPhoto h3 {margin-bottom: 10px;}
    #mainPhoto .container > div:nth-child(2) {margin: 30px 0 65px;}
    .tv img {height: auto;position: static;border-radius: 14px;}
    .tv::after {z-index: -1;bottom: -40px;height: calc(100% - 40px);border-radius: 14px 14px 27px 14px;font-size: 14px;}
    .tv p {bottom: -33px;left: 35px;width: calc(100% - 70px);}
    .letterBox .tit a p {font-size: 15px}
    .letterBox .img {width: calc(100% - 100px);}
    .letterBox .img img{width: 100%;}
}
/* 영등포구 SNS */
#mainSNS .container {
    background-color: #e1f6ff;
    border-radius: 44px 86px 44px 86px;
    margin-top: 80px;
    position: relative;
    padding: 25px 80px 25px 310px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    min-height: 160px;
}
#mainSNS .container::after {
    content: '';
    width: 208px;
    height: 200px;
    background: url("../images/main/img_bg_sns.png") center / cover no-repeat;
    display: block;
    position: absolute;
    left: 65px;
    bottom: 0;
}
#mainSNS h2 {
    font-size: 30px;
    font-weight: 700;
    color: #222;
}
#mainSNS p.desc {
    font-size: 18px;
    font-weight: 500;
    color: #747b68;
    margin: 10px 0 5px;
}
#mainSNS p.desc strong {
    font-weight: 700;
    color: #27bae1;
}
#mainSNS ul {
    display: flex;
    flex-wrap: wrap;
}
#mainSNS li {width: 66px;}
#mainSNS li:not(:first-child) {
    margin-left: 25px;
}
#mainSNS li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 14px;
    color: #222;
}
#mainSNS li img {
    width: 60px;
    margin-bottom: 12px;
}

@media screen and (max-width: 1280px) {
    #mainSNS .container {
        flex-direction: column;
        margin-top: 40px;
    }
    #mainSNS h2 {text-align: center;}
    #mainSNS ul {margin-top: 10px;}
}
@media screen and (max-width: 1024px) {
    #mainSNS ul {
        width: 354px;
        justify-content: center;
    }
    #mainSNS li:nth-child(5) {margin-left: 0;}
    #mainSNS li:nth-child(n + 5) {margin-top: 15px;}
}
@media screen and (max-width: 768px) {
    #mainSNS .container {
        border-radius: 24px;
        padding: 25px 0;
        overflow: hidden;
    }
    #mainSNS .container::after {
        background-image: url("../images/main/img_bg_sns_m.png");
        width: 95px;
        height: 110px;
        left: calc(50% - 163px);
        bottom: -3px;
    }
    #mainSNS h2 {font-size: 21px;}
    #mainSNS p.desc {
        font-size: 15px;
        margin: 0 0 5px;
    }
    #mainSNS ul {
        width: 279px;
        justify-content: flex-end;
    }
    #mainSNS li:not(:first-child) {
        margin-left: 5px;
    }
    #mainSNS li a {font-size: 13px;}
    #mainSNS li img {
        width: 46px;
        margin-bottom: 6px;
    }
}

.bbsList .notice {
    background-color: #DEE3E5;
    color: #333333;
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 70px; 
    height: 32px;
    text-align: center;
    border-radius: 16px;
    line-height: 32px;
    font-weight: 600;
    font-size: 14px;
    margin-left: 145px;
    margin-right: 60px;
}

.bbsList .tit .title{
    width: calc(100% - 	210px);
    color: #222222;
    font-size: 20px;
    font-weight: 600;
    white-space: nowrap; 
    text-overflow: ellipsis;
    overflow: hidden;
    margin-left: 225px;
}
@media screen and (max-width: 768px) {
    .bbsList .notice {
        font-size: 12px;
        line-height: 22.5px;
        height: 22.5px;
        width: 60px;
        top: -30px;
    	margin-left: 130px;
    }
	.bbsList .tit .title{
		margin: 30px 0 0 0;
        font-size: 15px;
        width: calc(100% + 160px);
	}
}
/* 텍스트를 시각적으로만 숨기고 스크린 리더는 읽을 수 있도록 처리*/
.hidden-text {
	color: transparent;
	text-shadow: 0 0 0 #000; /*시각적으로만 안보이도록 처리*/
	font-size: 0; /* 텍스트 숨김 */
    position: relative;
}