@media(max-width:1440px) {
    #main .news { transform: translateX(150px);}
    #main .news .title { width: 15%;}
    #main .news .slider { width: calc(100% - 150px);}
}

@media(max-width:1280px) {
    #header { padding:0 1.25rem;}
    #header .gnb { max-width: 430px;}
    .select-box.sm .titles { width: 110px;}
    .select-box.md .titles { width: 140px;}
    .select-list li a { width: 70px;}


    #main .news { transform: translateX(100px);}
}


@media(max-width:1024px) {
    #wrap { padding-top:0; padding-top: env(safe-area-inset-top); padding-top: constant(safe-area-inset-top);}
    #header { display: none;}
    #m-hader { display: block; }
    #main .visual { height: 500px;}
    #main .visual .main-cont { top:50%; position: static; height: 100%; justify-content: center; align-items: center; transform: translate(0);}
    #main .visual .main-cont .left { display: none;}
    #main .visual .main-cont .right { text-align: center; padding-top:0;}
    #main .news { flex-flow: column; transform: translateX(0); justify-content: center; height: auto; padding:60px 0 60px 10px;}
    #main .news .slider { width: 100%;}
    #main .news .title { padding:0 30px 30px 20px; align-items: flex-end; flex-flow: row; max-width: 100%; width: 100%; height: auto;}
    #main .slick-list { width: calc(100% + 150px);}

	#nav .top .logo-area .btn-box { flex-wrap: wrap;}
	#nav .top .logo-area .btn-box .m_appDown {width:100%; margin-top:6px; background:#333;}

    .sub-title { background-color: #fff; height: 70px; border-bottom: 1px solid #c5c5c5; }
    .sub-title > h2 { font-size: 1.75rem;}
    .sub-title > .back-btn { display: flex; justify-content: center; align-items: center; height: 70px; width: 70px; position: absolute; left:0; top:0;}
    .tab-menu { display: none;}

    .tab-cont { border:none; margin:0 auto;}
    .tab-cont .tab { border:none; display: flex; justify-content: center; margin: 3.25rem 0 1.25rem 0;}
    .tab-cont .tab > li {  height: auto; width: auto; line-height: 100%; }
    .tab-cont .tab > li:first-child { border-right: none; }
    .tab-cont .tab > li a { height: auto; display: inline; font-size: 1rem; position: relative;}
    .tab-cont .tab > li:first-child a { padding-right:15px; margin-right: 15px; }
    .tab-cont .tab > li:first-child a::before { content: ''; position: absolute; right:0; top:2px; width: 1px; height: 12px; background-color: #bec2ce; display: block;}
    .tab-cont .tab > li.active a,
    .tab-cont .tab > li:hover a { background-color: transparent; color:#154194; font-weight: 700;}
    .tab-cont .tab + .login-form > h3 { margin-top:1.5rem;}

    .parking-search { padding-top:70px;}
    .parking-search .search-form .m-nav-btn,
    .parking-search .search-form .m-opt-btn { display: flex; background-color: #fff; border-bottom: 1px solid #e5e5e5;}

    .parking-search .search-form { height: 70px; position: fixed; z-index: 5000; left:0; background-color: #fff; top:0; top: env(safe-area-inset-top); top: constant(safe-area-inset-top);}
    .parking-search .search-form .options { display: block; position: fixed; top:-100%; left:0; z-index: -1; background-color: #fff; width: 100%; padding:1.25rem 1.25rem 0 1.25rem; overflow-x: hidden; transition: .5s; opacity: 0.3;}
    .parking-search .search-form .options.active { top:70px; top: calc(env(safe-area-inset-top) + 70px); top: calc(constant(safe-area-inset-top) + 70px); transition: .5s; opacity: 1;}

	/*셀렉트박스*/
    .select-box .opt { display: block; position: static; box-shadow: none; border:none; border-radius: 0; width: 100%; animation: none; padding:0; margin-bottom: 30px; line-height: 0;}
    .select-box .opt > p { font-size: 1.25rem; margin-bottom: 15px; padding-left:15px;}
    .select-box .opt > p > span {display: inline-block; font-size: 14px; color:#b3b7c3; font-weight: 300; margin-left:10px; }
	.select-box .opt > label { display: inline-block; margin:0 15px 0 15px;}


    .parking-search .search-form .options .m-option-title { display: flex; }
    .parking-search .search-form .options .m-select-title { display: block;}
    .parking-search .search-form .options .m-submit-btn { display: block;}
    .parking-search .search-form .options .refresh { text-indent: 0; width: calc(100% - 30px); margin:0 auto 30px auto; height: 40px; }
    .parking-search .search-form .options .refresh i { margin-left: 10px; transform: scale(0.9);}
    .parking-search .search-form .options .select-list { width: 100%; justify-content: space-between; margin-bottom: 30px; padding:0 15px;}
    .parking-search .search-form .options .select-list li { width:32%; margin-right: 0;}
    .parking-search .search-form .options .select-list li a { width: 100%; height: 40px; line-height: 40px;}
    .parking-search .search-form .search { width: calc(100% - 140px); border-right:none; height: 70px; background-color: #fff; border-bottom: 1px solid #e5e5e5;}
    .parking-search .search-form .search > span { border:none; background-color: none; position: relative; z-index: 1; font-size: 1.5rem; display: flex; justify-content: center; align-items: center; line-height: 100%; font-weight: 900;}
    .parking-search .search-form .search > span::before { content: ''; display: block; position: absolute; top:50%; left:50%; transform:translate(-50%, -50%) rotate(45deg); font-weight: 900; font-size: 1rem; width: 2.1875em; height: 2.1875em; border-radius: 5px; background-color: #e6ebf6; z-index: -1;}

	/* 주차장검색-자동완성 (.serch-relative) */
	.parking-search .search-form .search > .search-auto {top: 70px; left: -70px; padding: 20px 0; width: 100vw;}
	.parking-search .search-form .search > .search-auto > .auto_list {}
	.parking-search .search-form .search > .search-auto > .auto_list > li {height: 35px; line-height: 35px;}
	.parking-search .search-form .search > .search-auto > .auto_list > li > a {padding-left: 80px;}
	.parking-search .search-form .search > .search-auto > .auto_list > li > a::before {width: 18px; height: 18px; top: 8px; left: 40px;}


    .maps { height: 70px; height: calc(100vh - calc(env(safe-area-inset-top) + 70px)); height: calc(100vh - calc(constant(safe-area-inset-top) + 70px));}
    .search-list { position: static; height: auto;}
    .search-list .wraper { position: static; display: block; box-shadow: none; }
    .search-list .wraper .dash-btn { display: none;}
    .search-list .wraper .list-box,
    .search-list .wraper .item-box { position: absolute; top:100%; width: 100vw; display: block; border-radius: 30px 30px 0 0;box-shadow: 0 -2px 10px rgba(0,0,0,0.25); padding:0 1.5625rem 10px 1.5625rem; transition: .5s; z-index: 9999;}
    .search-list .wraper .list-box.active { top:calc(100vh - 445px) !important; z-index: 3000; height: 100%;}
    .search-list .wraper .item-box.active { top:calc(100vh - 330px) !important; z-index: 3000; height: 100%;}
    .search-list .wraper .item-box.slider { top:0 !important; border-radius: 0; overflow-y: auto;}
    .search-list .wraper .list-box.slider { top:0 !important; border-radius: 0;}
    .search-list .wraper .list-box { padding:0;}
    .search-list .wraper .list-box .head { height: 35px; line-height: 35px; border-top:1px solid #e5e5e5; display: flex; justify-content: space-between; align-items: center;}
    .search-list .wraper .list-box .head ul { display: flex; align-items: center; font-size: 14px;}
    .search-list .wraper .list-box .head ul li em { padding:0 5px; font-weight: 600; color:#8b90a3; font-size: 12px;}
    .search-list .wraper .list-box .head ul li a { font-size: 14px; font-weight: 400; color:#656a7c;}
    .search-list .wraper .list-box .head ul li.active a { font-weight: bold; color:#212225;}
    .search-list .wraper .list-box .box { overflow-y: auto; height: 315px;}
    .search-list .wraper .list-box .box .list .view { display: none;}
    .search-list .wraper .list-box .box .list .info { width: 100%; padding:15px 20px;}
    .search-list .wraper .list-box .box .list .info ul li { margin:2px 0;}
    .search-list .wraper .list-box .box .list .info ul li:nth-of-type(3) { display: none;}
    .search-list .wraper .list-box .box .list .info dl { justify-content: space-between; align-items: center; margin-bottom: 3px;}
    .search-list .wraper .list-box .box .list .info dl dd ul li.tag { display: none;}
    .search-list .wraper .list-box .box .list .info dl dd ul li.way { display: block;}
    .search-list .wraper .item-box .type { display: inline-block; margin:0;}
    .search-list .wraper .item-box .names { display: inline-block; margin-bottom: 1.25rem; margin-left:10px;}
    .search-list .wraper .item-box > .item-close { display: none;}
    .search-list .wraper .item-box .info > li { margin-bottom: 5px;}
    .search-list .wraper .item-box .current dl dt { height: 30px; line-height: 30px;}
    .search-list .wraper .item-box .current dl dd { height: 45px; line-height: 45px; font-size: 1.5rem;}
    .search-list .wraper .item-box .current dl dd span { width: 30px; height: 30px; line-height: 30px; font-size: 10px;}
    .search-list .wraper .item-box .find-road { height: 45px;}

    .fix-btn { top:80px; top: calc(env(safe-area-inset-top) + 80px); top: calc(constant(safe-area-inset-top) + 80px); right: 10px; position: fixed;}
    .fix-btn > span { margin-top:0; }
    .fix-btn .tooltip-btn { position: fixed !important; left:10px; top:80px;}
    .fix-btn .pr { position: fixed !important; left:10px; top:70px;}
    .fix-btn .tooltip { right:-350px; top:50px;}
    .fix-btn a.gps { margin-bottom: 10px;}
    .fix-btn a.m-list-btn { display: flex;}
/*	.fix-btn .parkinglist {display: block;  text-indent: -9999px; margin-top:20px; background-color:#154194; border:1px solid #154194; transition: 0.2s; position: relative;}
	.fix-btn .parkinglist > span {width:16px; height:2px; background-color:#fff; position: absolute; left:50%; top:50%; transform: translate(-50%, -50%); display: inline-block;}
	.fix-btn .parkinglist > span::before {content: ""; position:absolute; width:16px; height:2px; background-color: #fff; left:0; top:-6px;}
	.fix-btn .parkinglist > span::after {content: ""; position:absolute; width:16px; height:2px; background-color: #fff; left:0; bottom:-6px;}
	.fix-btn .parkinglist:hover {border-bottom-right-radius: 10px;}*/
	.fix-btn .parkinglist {display: block; margin-top:20px; background-color:#154194; border:1px solid #154194; transition:0.2s; position:relative; }
	.fix-btn .parkinglist > span {position:absolute; left:50%; top:50%; transform: translate(-50%, -50%); color:#fff; font-weight: bold; border:2px solid #fff; width:25px; height:25px; border-radius: 50%;}
	.fix-btn .parkinglist > span:before {content: 'P'; position:absolute; left:6px; top:2px; display: inline-block; color:#fff; background-color:transparent; z-index: 9999;}

	/*주차장 아이콘명*/
	.tooltip {width: calc( 100% - 100px ); max-width: 400px; top: 10px; left: 10px; bottom: auto; padding: 10px 15px; box-shadow: none;}

    #footer { min-height: 250px; padding:2.5rem 1.25rem 10rem 1.25rem;;}
    #footer .box { flex-flow: column;}
    #footer .box .info { flex-flow: column;}
    #footer .box .info .fot-logo { margin-right: 0;}
    #footer .box .info .copy { margin:20px 0;}
    #footer .box .info .copy ul { justify-content: center; margin:10px 0}
	#footer .box .site {width:100%; bottom:-80px; top:auto;}
    #footer .box .site span { margin:0 auto; width:100%;}
	#footer .box .site ul {bottom:50px;}
	#footer .box .manager {display: flex; flex-wrap: wrap; text-align: center;}
	#footer .box .manager > span {width:100%; margin-bottom:0;}
	#footer .box .manager > ul {flex-wrap: wrap;}
	#footer .box .manager > ul {width:100%;}
	#footer .box .manager > ul > li {width:100%;}
	#footer .box .manager > ul > li:nth-child(2) {opacity: 0.4; width:auto; display: none;}
	#footer .box .info .copy p {text-align: center;}
	#footer .box .bukgu_logo {margin:0 auto;}

    .m-bar { width: 50px; height: 5px; background-color: #000; border-radius: 4px; display: block; margin:10px auto 10px;  cursor: pointer;}

    .overlay { display: none;}
    .overlay.active { width: 100vw; height: 100vh; display: block; position: fixed; left:0; top:0; z-index: 4999; background-color:rgba(0,0,0,0.6);}
    .overlay.navActive { width: 100vw; height: 100vh; display: block; position: fixed; left:0; top:0; z-index: 5000; background-color:rgba(0,0,0,0.6);}

    .intro-list { }
    .intro-list li { flex-flow: column-reverse; margin-bottom: 100px;}
    .intro-list li:last-child { margin-bottom: 0;}
    .intro-list li:nth-of-type(2) { flex-flow: column;}
    .intro-list li figure { margin-bottom: 30px;}
    .intro-list li span { text-align: center !important;}

    .intro-slide .txt-slide { padding:0 30px;}
    .intro-slide .img-slide { margin:0 50px;}
    .intro-slide .slide-btn { width:360px; }

	/* 즐겨찾기, 주차장이용내역 */
	.parking-list .search-box {height:auto; flex-wrap: wrap; justify-content: space-between}
	.parking-list .search-box select, .parking-list .search-box input[type="text"]  {height:50px;}
	.parking-list .search-box select {max-width:100%; border-right:0; border-bottom:1px solid #ddd;}
	.parking-list .search-box input[type="text"] {width:70%; border-right:0;}
	.parking-list .search-box .btn {width:30%;}
	.parking-list .table-reactive .table {border-top:0; width:100% !important; min-width: auto;}
	.parking-list .table-reactive .table thead {display: none;}
	.parking-list .table-reactive .table tbody tr td {border:none;}
	.parking-list table .num, .parking-list table .call, .parking-list table .charge, .parking-list table .time {display: none;}
	.parking-list .table-reactive .table tbody tr {border-bottom:1px solid #e1e1ec; position:relative; display: flex; flex-wrap: wrap; align-items: center; margin-top:15px; padding-bottom:10px;}
	.parking-list .table-reactive .table .cate {border:1px solid #e1e1e1; background:#f5f5f5; padding:4px 10px;  border-radius: 15px; font-size: 14px; /*min-width:14%; */ width:60px;}
	.parking-list .table-reactive .table .name {font-size:16px; width:80%; text-align: left; padding-left:15px;}
	.parking-list .table-reactive .table .adr {display: block; width:100%; margin-left:57px;}
	.parking-list .table-reactive .table .toggle.style2 {margin-left:148px;}
	.parking-list .table-reactive .table .toggle.style2 .icon:after {content: '실시간 알림'; position: absolute; width:75px; left:-75px; top:1px; text-align: left; font-weight: bold; color:#154194;}
	.parking-list .table-reactive .table .manage {position:absolute;  right:15px; top:50%; transform: translateY(-80%); text-indent: -9999px; background:#999 !important; width:20px; height:20px; border-radius:50%; padding:0; cursor: pointer;}
	.parking-list .table-reactive .table .manage:before {content: ""; position:absolute; width:10px; height:2px; background:#fff; left:50%; top:50%; transform: translate(-50%, -50%) rotate(45deg);}
	.parking-list .table-reactive .table .manage:after {content: ""; position:absolute; width:10px; height:2px; background:#fff; left:50%; top:50%; transform: translate(-50%, -50%) rotate(-45deg);}
	.parking-list .table-reactive .table tr:hover td {background:none;}

	/*거주자 주차장 관리 추가*/
	.parking-list .table.style4 {border-top:2px solid #303f81; }
	.parking-list .table.style4 tr {margin-top: 0 !important; padding-bottom: 0!important; }
	.parking-list .table.style4 th {width: 20%; padding: 20px 0; border-bottom: 0;}
	.parking-list .table.style4 td {padding: 0 0 0 7%;  }

	/*공지사항-상세-목록버튼*/
	.notice-view > .btn-wrap{justify-content: center;}

	/* 환경설정 팝업 */
	.config_popup {position:absolute; width:100%; height:100%; background:#e9ebed; left:50%; top:0; transform:translateX(-50%); padding:3.125rem 1.25rem 0 1.25rem;; text-align: center; transition: 0.2s;}
	.config_popup:before {content: ""; position: absolute; background:url("../img/config_popup.png") no-repeat top center; width:85%; min-height:600px; background-size:contain; left:50%; top:17rem; transform: translateX(-50%); display: block;}
	.config_popup .txt > h3 {color:#1e2e4e; font-size:2.25rem;  font-family: 'nexon'; letter-spacing: -1px; margin:1.5rem;}
	.config_popup .txt > h3 > span {display: block; font-size:2.125rem; font-family: 'NEXON Lv1 Gothic OTF Light'; margin-bottom:10px;}
	.config_popup .txt > p {font-size:1.125rem; color:#727987; font-weight: 500;}
	.close_popup {position: absolute; width:30px; height:30px; text-indent: -9999px; right:1.25rem; top:1.25rem;}
	.close_popup:before {content: ""; position: absolute; width:16px; height:2px; background:#727987; display: block; left:50%; top:50%; transform: translate(-50%, -50%) rotate(45deg);}
	.close_popup:after {content: ""; position: absolute; width:16px; height:2px; background:#727987; display: block; left:50%; top:50%; transform: translate(-50%, -50%) rotate(-45deg);}

}

@media ( max-width:768px) {
    .intro-pcs > ul { flex-flow: column;}
    .intro-pcs > ul > li { min-height: 40px; margin:20px 0;}
    .intro-pcs > ul > li > div { height: auto;}
    .intro-pcs > ul > li > i { transform: rotate(90deg);}

    .intro-slide { flex-flow: row wrap;}
    .intro-slide .img-slide { margin:0;}
    .intro-slide .slide-btn { width: 90%; left:50%; top:400px; transform: translate(-50%,-50%);}
    .intro-slide .txt-slide .track .item b { font-size: 32px; margin-bottom: 20px; margin-top:20px;}
    .intro-slide .txt-slide .track .item p { font-size: 28px; }
    .intro-slide .txt-slide .track .item span { font-size: 16px;}
    .intro-slide .img-slide .track { width: 90%; margin:0 auto;}
    .intro-slide .slick-slide img { width: 100%;}

	/* 주차장검색-자동완성 (.serch-relative) */
	.parking-search .search-form .search > .search-auto > .auto_list > li > a::before {width: 16px; height: 16px; top: 10px;}

	/* 설문조사 */
	.survey_card_list > li {width:100%; margin:20px;}
	.survey_box > li {margin:0 20px;}
}
@media ( max-width:550px) {
    #main .news { padding:40px 0 40px 10px;}
    #main .news .title a { font-size: 1rem;}
    #main .news .title h2 { font-size: 2.5rem;}
    #main .visual { height: 350px;}
    #main .visual .main-cont .right { padding:0 15px;}
    #main .visual .main-cont .right > p  { font-size: 2rem; line-height: 140%; max-width: 277px; margin:0 auto;}
    #main .visual .main-cont .right > p b::before { height: 20px; bottom: -0px; padding:0 5px;}
    #main .visual .main-cont .right .main-search { height: 70px; border-width: 4px; border-radius:0 0 25px 0; padding:0 1.5625rem;  margin-top:30px !important;}
    #main .visual .main-cont .right .main-search i { transform: scale(0.7);}
    #main .visual .main-cont .right .main-search input { font-size: 1.25rem;}
    #main .news .slider .items { height: 240px;}
    #main .news .slider .items > .tag { width: 60px; height: 40px; line-height: 40px; right: 30px;}
    #main .news .slider .items ul > li > a { font-size: 1.125rem;}
    #main .slick-list { width: calc(100% + 250px); }

    .intro-list { padding:3.125rem 1.25rem;}
    .intro-list li span { font-size: 1rem;}
    .intro-list li figure img { width: 80%; margin:0 auto;}

	/* 주차장검색-자동완성 (.serch-relative) */
	.parking-search .search-form .search > .search-auto > .auto_list > li > a {padding-left: 60px;}
	.parking-search .search-form .search > .search-auto > .auto_list > li > a::before {left: 27px;}

}
@media ( max-width:425px) {
    .paging li a { width: 30px; height: 30px; }
    .paging li:not(:first-child) { margin-left: 3px;}
    #main .news .slider .items { padding:2rem; border-radius: 0 0 35px 0;}
    #main .visual .main-cont .right .main-search { height: 60px; padding:0 1.25rem;}
    #main .visual .main-cont .right .main-search > a { right:1.25rem;}
    #main .visual .main-cont .right .main-search input { padding:0 30px 0 10px;}

	/*주차 아이콘명*/
	.tooltip {padding: 10px 20px;}
	.tooltip > dl {flex-direction: column;}
	.tooltip > dl dt {min-width: 30px; margin: 0 0 2px 0;}
	.tooltip > dl dt .tag { padding:0; font-weight: 600;width: 30px; height: 29px; border-width: 1px; border-style: solid; border-radius: 50%;}
	.tooltip > dl dt .tag.green { background: none; color: #279966;}
	.tooltip > dl dt .tag.yellow{ background: none;color: #e5a700; }
	.tooltip > dl dt .tag.red { background: none;  color: #e45f5e;}
	.tooltip > dl dt .pk {background:none; color: #26282b;}
	.tooltip > dl dd { font-size: 10px; }
}
@media ( max-width:350px ) {
    .fix-btn .tooltip { right:-300px; width: 300px;}
}
@media ( max-height:600px ) {
    .search-list .wraper .list-box .box { height: 210px;}
    .search-list .wraper .list-box.active { top:calc(100vh - 340px) !important;}
    .search-list .wraper .list-box.slider { top:0 !important;}
    .search-list .wraper .list-box.slider .box { height: auto;}
}