@charset "utf-8";

/* CONTENT STYLE */
/* 작성자 : 황희진(grigo0704@naver.com) / 최종수정일 : 2024-07-08 버전 4.4 */



/******************** 0. 메인 ********************/

article.article.main {}
article.article.main .headline { flex: none; width: 100%; flex-direction: column; align-items: flex-start; }
article.article.main .headline .title { font-size: 1.875rem; font-weight: 600; }
article.article.main .headline p { width: 100%; color: var(--color-gray-tint80); font-weight: 500; line-height: 1.6; }

/* 비주얼 */
article.article.main .content.visual { height: 100vh; background: url("../img/img-main-visual-bg.jpg") center 50%/cover no-repeat; padding: 10px 0; }
article.article.main .content.visual .inner { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--inner-padding-min); height: 100%; }

article.article.main .content.visual .finder { width: 100%; max-width: 480px; }
article.article.main .content.visual .finder .set.find .input { height: 64px; line-height: 64px; color: var(--color-primary); font-size: 1rem; border: 0; border-radius: 100px; padding: 0 64px 0 32px; box-shadow: var(--shadow-box-max), var(--shadow-box-min); }
article.article.main .content.visual .finder .set.find .input::-webkit-input-placeholder { font-size: 1rem; color: var(--color-primary-tint70); }
article.article.main .content.visual .finder .set.find .input:-moz-placeholder { font-size: 1rem; color: var(--color-primary-tint70); }
article.article.main .content.visual .finder .set.find .input::-moz-placeholder { font-size: 1rem; color: var(--color-primary-tint70); }
article.article.main .content.visual .finder .set.find .input:-ms-input-placeholder { font-size: 1rem; color: var(--color-primary-tint70); }
article.article.main .content.visual .finder .set.find .bt.ico.find { right: 8px; width: 48px; height: 48px; border-radius: 50%; }
article.article.main .content.visual .finder .set.find .bt.ico.find::before { transform: scale(1.5); }

article.article.main .content.visual .mainlogo>img {width: 370px;}

article.article.main .content.visual .slogan { color: var(--color-wh); font-size: 2.5rem; font-weight: 300; text-shadow: var(--shadow-box-max), var(--shadow-box-min); }
article.article.main .content.visual .slogan b { font-weight: 600; vertical-align: baseline; }
article.article.main .content.visual .slogan strong { font-size: 120%; font-weight: 600; vertical-align: baseline; }

article.article.main .content.visual .service { display: inline-block; font-size: 0; padding: 24px 0; }
article.article.main .content.visual .service a { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; text-align: center; border-radius: var(--radius-box-max); box-shadow: var(--shadow-box-min); }
article.article.main .content.visual .service a.before { gap: 16px; color: var(--color-bk); font-size: 0.875rem; font-weight: 600; background-color: var(--color-wh-tint70); backdrop-filter: blur(2px); }
article.article.main .content.visual .service a.before::before { flex: none; content: ""; display: block; width: 100%; font-size: 0; transition: all 0.3s; }
article.article.main .content.visual .service a.after { position: absolute; top: 0; bottom: 0; left: 0; right: 0; gap: 8px; color: var(--color-wh); font-size: 0.625rem; font-weight: 400; background-color: var(--color-gray); padding: 8px; opacity: 0; transition: all 0.3s; }
article.article.main .content.visual .service a.after strong { display: block; color: var(--color-point); font-size: 0.75rem; font-weight: 500; }
article.article.main .content.visual .service li { position: relative; display: inline-block; width: 160px; height: 160px; font-size: 0; }
/*article.article.main .content.visual .service li:nth-child(1) .before::before { background: url("../img/img-main-visual-ic01.png") center 30% no-repeat; }
article.article.main .content.visual .service li:nth-child(2) .before::before { background: url("../img/img-main-visual-ic02.png") center 30% no-repeat; }
article.article.main .content.visual .service li:nth-child(3) .before::before { background: url("../img/img-main-visual-ic03.png") center 30% no-repeat; }
article.article.main .content.visual .service li:nth-child(4) .before::before { background: url("../img/img-main-visual-ic04.png") center 30% no-repeat; }
article.article.main .content.visual .service li:nth-child(5) .before::before { background: url("../img/img-main-visual-ic05.png") center 30% no-repeat; }
article.article.main .content.visual .service li:nth-child(6) .before::before { background: url("../img/img-main-visual-ic06.png") center 30% no-repeat; }
*/
article.article.main .content.visual .service li:hover .before::before { transform: scale(1.2); }
article.article.main .content.visual .service li:hover .after { opacity: 1; }
article.article.main .content.visual .service li ~ li { margin-left: 24px; }

article.article.main .content.visual .today { display: inline-block; font-size: 0; border: 1px solid var(--color-wh-tint05); border-radius: var(--radius-box-max); background-color: var(--color-primary-tint30); padding: 24px; box-shadow: var(--shadow-box-max), var(--shadow-box-min); backdrop-filter: blur(8px); }
article.article.main .content.visual .today .count { flex-direction: column; width: 240px; color: var(--color-wh); font-size: 1rem; }
article.article.main .content.visual .today .count span ~ span { color: var(--color-wh-tint40); font-size: 0.75rem; font-weight: 300; }
article.article.main .content.visual .today .count span ~ span b { font-size: 1.5rem; font-weight: 600; text-shadow: var(--shadow-box-max), var(--shadow-box-min); }
article.article.main .content.visual .today .count ~ .count { border-left: 1px solid var(--color-wh-tint05); }

article.article.main .content.visual .mouse { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); display: block; width: 24px; height: 40px; font-size: 0; border: 2px solid var(--color-wh); border-radius: 100px; box-shadow: var(--shadow-box-max), var(--shadow-box-min); }
article.article.main .content.visual .mouse::before { content: ""; display: block; width: 2px; height: 8px; border-radius: 100px; background-color: var(--color-wh); margin: 8px auto; }
article.article.main .content.visual .mouse::after { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) rotate(90deg); content: ""; display: block; width: 24px; height: 24px; background: url("../img/ico_arrow_next.svg") center 50% no-repeat; filter: invert(100%); opacity: 0.5; margin-top: 4px; }

article.article.main .spot { position: fixed; right: var(--inner-padding-max); top: 50%; transform: translateY(-50%); z-index: 100; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; gap: 24px; }
article.article.main .spot a { display: flex; justify-content: flex-end; align-items: center; height: 24px; color: #777; font-size: 0; font-weight: 600; line-height: 1; }
article.article.main .spot a::after { flex: none; content: ""; display: block; width: 8px; height: 8px; border-radius: 50%; background-color: #aaa; box-shadow: var(--shadow-box-min); margin: 8px; transition: all 0.3s; }
article.article.main .spot a:hover { font-size: 0.625rem; }
article.article.main .spot a:hover::after { background-color: var(--color-point); transform: scale(2); }



/* 지도조회 */
article.article.main .content.maps { background: url("../img/main_map_bg.jpg") center 50%/cover no-repeat; padding: var(--inner-padding-max) 0; }
article.article.main .content.maps .inner { display: flex; justify-content: space-between; align-items: center; }

article.article.main .content.maps .headline { flex: auto; width: auto; }

article.article.main .content.maps .list.card > ul { justify-content: flex-end; }
article.article.main .content.maps .list.card > ul > li { min-width: 120px; }
article.article.main .content.maps .list.card > ul > li:nth-child(1) { background: url("../img/main_map_img01.jpg") center 50%/cover no-repeat; }
article.article.main .content.maps .list.card > ul > li:nth-child(2) { background: url("../img/main_map_img02.jpg") center 50%/cover no-repeat; }
article.article.main .content.maps .list.card > ul > li:nth-child(3) { background: url("../img/main_map_img03.jpg") center 50%/cover no-repeat; }

article.article.main .content.maps .item .tit { color: var(--color-wh); font-size: 1.125rem; font-weight: 600; text-align: center; text-shadow: var(--shadow-box-min); border-radius: var(--radius-box-max); background-color: var(--color-bk-tint50); padding: 16px 0; margin-top: var(--inner-padding-max); }



/* 공간정보 다운로드 */
article.article.main .content.space { flex-direction: row; min-height: 420px; padding: 0; }
article.article.main .content.space .conWrap { flex: 1; display: inline-flex; width: auto; padding: var(--inner-padding-max) var(--inner-padding-min); }
article.article.main .content.space .conWrap:nth-child(1) { flex: 2; background: url("../img/img-main-space-bg01.png") 0 50%/cover no-repeat; padding-left: var(--inner-padding-max); }
article.article.main .content.space .conWrap:nth-child(2) { background: url("../img/img-main-space-bg02.png") center 0/cover no-repeat; }
article.article.main .content.space .conWrap:nth-child(3) { background: url("../img/img-main-space-bg03.png") center 30%/cover no-repeat; }

article.article.main .content.space .headline .title { color: var(--color-wh); text-shadow: var(--shadow-box-min); }
article.article.main .content.space .headline p { color: var(--color-wh); text-shadow: var(--shadow-box-min); }

article.article.main .content.space .item .tit { color: var(--color-wh); font-size: 1.125rem; font-weight: 600; text-shadow: var(--shadow-box-min); }
article.article.main .content.space .item .con { color: var(--color-wh); font-size: 0.875rem; text-shadow: var(--shadow-box-min); line-height: 1.6; }

article.article.main .content.space .bt.ico { color: var(--color-wh); }
article.article.main .content.space .bt.ico::after { filter: invert(100%); }



/* 서비스 */
article.article.main .content.service { background: url("../img/main_service_bg.jpg") right 50%/contain no-repeat; padding: var(--inner-padding-max) 0; }
article.article.main .content.service .list.card > ul { padding: var(--inner-padding-min) 0; }
article.article.main .content.service .list.card > ul > li { border: 0; border-left: 4px solid var(--color-secondary-tint07); border-radius: 0; background: none; box-shadow: none; }
article.article.main .content.service .item { padding: 0 var(--inner-padding-min); }
article.article.main .content.service .item .tit { font-size: 1.125rem; font-weight: 600; }
article.article.main .content.service .item .con { font-size: 0.875rem; line-height: 1.6; }



/* 기업정보 */
article.article.main .content.company { background-color: var(--color-gray-tint05); padding: var(--inner-padding-max) 0; }
article.article.main .content.company .headline { align-items: center; text-align: center; }
article.article.main .content.company .list.card > ul { flex-wrap: nowrap; justify-content: center; gap: var(--inner-padding-min); padding-top: var(--inner-padding-min); }
article.article.main .content.company .list.card > ul > li:nth-child(1) { background: var(--color-wh) url("../img/main_company_img01.jpg") calc(100% - 16px) bottom/140px no-repeat; }
article.article.main .content.company .list.card > ul > li:nth-child(2) { background: var(--color-wh) url("../img/main_company_img02.jpg") calc(100% - 16px) calc(100% + 32px)/120px no-repeat; }
article.article.main .content.company .list.card > ul > li:nth-child(3) { background: var(--color-wh) url("../img/main_company_img03.jpg") calc(100% - 24px) calc(100% + 32px)/120px no-repeat; }
article.article.main .content.company .item { padding: var(--inner-padding-min); padding-bottom: 80px; }
article.article.main .content.company .item .tit { font-size: 1.125rem; font-weight: 600; }
article.article.main .content.company .item .con { font-size: 0.875rem; line-height: 1.6; }
article.article.main .content.company .item .bt:hover { background: none; }




/* 소통공간 */
article.article.main .content.community { padding: var(--inner-padding-max) 0; }
article.article.main .content.community .inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: stretch; gap: var(--inner-padding-min); }
article.article.main .content.community .conWrap { flex: none; width: calc((100% - var(--inner-padding-min)) / 2); }

article.article.main .content.community .tabs.fix { overflow-x: visible; }

article.article.main .content.community .tabcon { flex: auto; position: relative; height: 100%; }
article.article.main .content.community .tabcon .bt.ico.next { position: absolute; bottom: 100%; right: 0; padding: 0; padding-left: 8px; margin-bottom: 4px; }
article.article.main .content.community .tabcon .list { margin: 0; }

article.article.main .content.community .square { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; width: 100%; height: 100%; }
article.article.main .content.community .square .item { flex: auto; width: calc(50% - 8px); flex-direction: column; border-radius: var(--radius-box-max); padding: 24px; padding-right: 88px; }
article.article.main .content.community .square .item .tit { flex: none; width: 100%; color: var(--color-wh); }
article.article.main .content.community .square .item .con { color: var(--color-wh); }
article.article.main .content.community .square .item:nth-child(1) { background: #1cbbb4 url("../img/main_community_img01.png") calc(100% - 16px) 50%/72px no-repeat; }
article.article.main .content.community .square .item:nth-child(2) { background: #448ccb url("../img/main_community_img02.png") calc(100% - 8px) 50%/72px no-repeat; }
article.article.main .content.community .square .item:nth-child(3) { background: #a864a8 url("../img/main_community_img03.png") calc(100% - 16px) 50%/72px no-repeat; }
article.article.main .content.community .square .item:nth-child(4) { background: #605ca8 url("../img/main_community_img04.png") calc(100% - 16px) 50%/72px no-repeat; }



/* 로고링크 */
article.article.main .content.logolink { border-top: 1px solid var(--color-bk-tint05); padding: var(--inner-padding-min) 0; }
article.article.main .content.logolink .inner { position: relative; }

article.article.main .content.logolink .slick-slider { padding-right: 120px; }
article.article.main .content.logolink .slick-slide { overflow: hidden; font-size: 0; border: 1px solid var(--color-bk-tint05); border-radius: var(--radius-box-min); margin-right: 16px; }
article.article.main .content.logolink .slick-slide img { display: block; width: 100%; }
article.article.main .content.logolink .slick-slide:hover { border-color: var(--color-bk-tint10); }
article.article.main .content.logolink .slick-arrow { left: auto; border: 1px solid var(--color-bk-tint10); }
article.article.main .content.logolink .slick-prev { right: 40px; background-image: url("../img/ico_page_prev.svg"); background-size: 20px; }
article.article.main .content.logolink .slick-next { right: 0; background-image: url("../img/ico_page_next.svg"); background-size: 20px; }

article.article.main .content.logolink .bt.ico.play { position: absolute; right: 114px; top: 50%; transform: translateY(-50%); border: 1px solid var(--color-bk-tint10); }







/* 통합검색 */
article.article.search .headline.bg { border-bottom: 1px solid var(--color-primary-tint20); }
article.article.search .headline.bg .finder .set.find .input { height: 48px; line-height: 48px; border-radius: 100px; padding: 0 88px 0 24px; }
article.article.search .headline.bg .finder .set.find .bt.ico.find { right: 8px; width: 80px; border-radius: 100px; }

article.article.search .content .headline .count.br { flex: auto; width: auto; }
article.article.search .content .headline ~ .headline { margin-top: var(--inner-padding-min); }

article.article.search .content .tabs { margin-top: var(--inner-padding-min); }
article.article.search .content .tabs.fix { margin-bottom: var(--inner-padding-min); }

article.article.search .content .list.box { margin: 0; }
article.article.search .content .list.box > :is(ol,ul) > li.nodata { padding: 24px; }




/* 새창팝업 */
.btns.newpop { position: fixed; bottom: 0; left: 0; right: 0; justify-content: space-between; background-color: var(--color-bk); padding: 4px; }
.btns.newpop .check { margin-left: 8px; }
.btns.newpop .check label { color: var(--color-wh); }
.btns.newpop .check label::before { border-color: var(--color-wh-tint20); background-color: var(--color-wh-tint10); }
.btns.newpop .check input:checked ~ label::before { background-color: var(--color-primary); }
.btns.newpop .check input:checked:disabled ~ label::before { background-color: var(--color-primary); }
.btns.newpop .bt.close { color: var(--color-wh); }
.btns.newpop .bt.close::before { filter: invert(100%); }









/******************** 2. 공간정보 다운로드 ********************/

article.article.space {}
article.article.space .finder .set.find .select ~ .input { padding-left: 100px; }



/* 공간정보 다운로드 서브메인 */
article.article.space.submain > .headline.bg { background: var(--color-secondary-tint07) url("../img/submain-space_bg.png") center 50%/cover no-repeat; }
article.article.space.submain > .headline.bg .title { height: auto; color: var(--color-wh); font-size: 2rem; line-height: 1.4; text-align: center; word-break: keep-all; }
article.article.space.submain > .headline.bg p { color: var(--color-wh); font-size: 0.875rem; text-align: center; word-break: keep-all; }
article.article.space.submain > .headline.bg ul { display: inline-flex; gap: 24px; }
article.article.space.submain > .headline.bg li { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; width: 160px; height: 160px; color: var(--color-bk); font-size: 0.875rem; font-weight: 600; text-align: center; line-height: 1.2; border-radius: 50%; border: 1px solid var(--color-wh); background-color: var(--color-wh-tint80); backdrop-filter: blur(4px); box-shadow: var(--shadow-box-min); }
article.article.space.submain > .headline.bg li::before { flex: none; content: ""; display: block; width: 100%; height: 72px; }
article.article.space.submain > .headline.bg li:nth-child(1)::before { background: url("../img/submain-space_ico01.png") center 0/contain no-repeat; }
article.article.space.submain > .headline.bg li:nth-child(2)::before { background: url("../img/submain-space_ico02.png") center 0/contain no-repeat; }
article.article.space.submain > .headline.bg li:nth-child(3)::before { background: url("../img/submain-space_ico03.png") center 0/contain no-repeat; }

article.article.space.submain .content { padding: var(--inner-padding-min) 0; }
article.article.space.submain .content .list.card > ol > li::before { top: 4px; left: auto; right: 4px; border-radius: var(--radius-box-min); }
article.article.space.submain .content .list.card .item .cate ~ .format { width: 100%; }

article.article.space.submain .content.bg { background-color: var(--color-primary-tint05); }





/* 공간정보 다운로드 */
article.article.space.download { position: relative; }
article.article.space.download .headline.bg { border-bottom: 1px solid var(--color-primary-tint20); transform: translateY(-36px); }

article.article.space.download .tabs { margin: 16px 0 8px 0; }

article.article.space.download .item.bg + .infotxt { display: flex; flex-wrap: wrap; align-items: center;  width: 100%; padding: 0; margin-top: 8px; }

article.article.space.download .filter { padding-top: 0; }
article.article.space.download .filter ~ .content { padding-top: calc(var(--inner-padding-min) - 36px); }
article.article.space.download .filter ~ .inner .tag { margin-bottom: 36px; }

article.article.space.download .reply { margin-top: var(--inner-padding-min); }

article.article.space.download .count.auto { flex: auto; }
article.article.space.download .count.auto > .check { margin: 0; }

article.article.space.download .list.box > ul { border-color: var(--color-gray-tint30); }
article.article.space.download .list.box > ul > li { padding: 0 24px 0 16px; }

article.article.space.download .toggle .slipbox.bg { padding: 0 24px 16px 24px; }

article.article.space.download .headline.ex { position: relative; }
article.article.space.download .headline.ex .toggle ~ .bt.ex { position: absolute; top: 4px; right: 0; }



/* 공간정보 다운로드 소개 */
article.article.space.introduce .item.bd.bg { margin-bottom: var(--inner-padding-min); }

article.article.space.introduce .list .headline { flex-direction: column; justify-content: center; gap: 0; padding-bottom: 40px; }
article.article.space.introduce .list .headline::before { content: ""; display: block; width: 0; height: 0; border: 32px solid transparent; border-bottom: 32px solid var(--color-primary-tint10); }
article.article.space.introduce .list .headline .title { flex-direction: column; justify-content: center; height: auto; }
article.article.space.introduce .list .headline .title::before { content: ""; display: block; width: 16px; height: 24px; background-color:  var(--color-primary-tint10); }
article.article.space.introduce .list .headline ~ ul > li .item .tit { text-align: center; }







/******************** 3. 오픈API ********************/

article.article.openapi .headline img { max-width: 100%; }
article.article.openapi .content img { max-width: 100%; }

article.article.openapi.submain > .headline.bg { background: var(--color-primary-tint05) url("../img/submain-service_bg.png") center 50%/cover no-repeat; }
article.article.openapi.submain > .headline.bg .title { height: auto; color: var(--color-wh); line-height: 1.4; text-align: center; word-break: keep-all; }
article.article.openapi.submain > .headline.bg p { color: var(--color-wh); font-size: 0.875rem; text-align: center; }
article.article.openapi.submain > .headline.bg .count { color: var(--color-wh); font-size: 1rem; font-weight: 400; border-radius: var(--radius-box-max); background-color: var(--color-wh-tint20); padding: var(--inner-padding-min); backdrop-filter: blur(4px); margin: auto; }
article.article.openapi.submain > .headline.bg .count b { color: var(--color-point); font-weight: 700; filter: brightness(200%); }

article.article.openapi.submain .content { min-height: 240px; justify-content: center; padding: var(--inner-padding-min) 0; }
article.article.openapi.submain .content .inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: stretch; gap: 24px; }
article.article.openapi.submain .content .headline { flex: auto; width: auto; margin-top: var(--inner-padding-min); }
article.article.openapi.submain .content .headline .title { height: auto; font-weight: 700; }
article.article.openapi.submain .content .headline p { width: 100%; font-size: 0.875rem; line-height: 1.4; }
article.article.openapi.submain .content .headline.fc p { text-align: center; }
article.article.openapi.submain .content .headline.fe p { text-align: right; }
article.article.openapi.submain .content .headline.br { width: 100%; }

article.article.openapi.submain .content .conWrap { flex: none; width: calc((100% - 24px) / 2); border: 1px solid var(--color-secondary-tint20); border-radius: var(--radius-box-max); background-color: var(--color-wh); }
article.article.openapi.submain .content .conWrap .bt.ico.next { padding: 0; }
article.article.openapi.submain .content .conHead { padding: 16px 16px 0 16px; }
article.article.openapi.submain .content .conHead .title { font-size: 1rem; }
article.article.openapi.submain .content .conBody { overflow-y: auto; height: 100%; padding: 16px; }

article.article.openapi.submain .content .list.card { height: 100%; margin: 0; }
article.article.openapi.submain .content .list.card > :is(ol,ul) { gap: 8px; height: 100%; }
article.article.openapi.submain .content .list.card > :is(ol,ul) > li:not(.nodata) { width: calc((100% - (8px * 2)) / 3); }
article.article.openapi.submain .content .list.card > ol > li::before { top: -1px; left: auto; right: 16px; border-radius: 0; }

article.article.openapi.submain .step { width: 100%; margin: 8px 0; }
article.article.openapi.submain .step span { color: var(--color-gray); font-size: 0.75rem; font-weight: 500; }
article.article.openapi.submain .step span::before { content: "STEP "counter(step); width: auto; border-radius: 100px; padding: 0 16px; }
article.article.openapi.submain .step > ol > li { flex-direction: row; justify-content: flex-start; align-items: center; }
article.article.openapi.submain .step > ol > li:first-child span::before { background-color: var(--color-secondary); }
article.article.openapi.submain .step > ol > li:last-child span::before { background-color: var(--color-point); }
article.article.openapi.submain .step.col { border-radius: var(--radius-box-min); border: 1px solid var(--color-gray-tint10); padding: 16px; }
article.article.openapi.submain .step.col > ol { gap: 16px; }
article.article.openapi.submain .step.col > ol > li { gap: 16px; }

article.article.openapi.submain .btns.ex { width: 100%; margin: var(--inner-padding-min) 0; }
article.article.openapi.submain .btns.ex .bt { flex: 1; flex-wrap: wrap; justify-content: flex-end; height: auto; color: var(--color-gray-tint70); padding: 16px 40px; }
article.article.openapi.submain .btns.ex .bt b { width: 100%; color: var(--color-secondary); font-size: 1rem; font-weight: 500; text-align: left; line-height: 1.2; padding: 0; margin: 16px 0; }
article.article.openapi.submain .btns.ex .bt.bd { border-color: var(--color-secondary-tint05); border-radius: var(--radius-box-max); background-color: var(--color-secondary-tint05); }
article.article.openapi.submain .btns.ex .bt.ico::after { transition: all 0.3s; }
article.article.openapi.submain .btns.ex .bt.bd:hover { border-color: var(--color-secondary-tint07); background-color: var(--color-secondary-tint07); box-shadow: var(--shadow-box-min); }
article.article.openapi.submain .btns.ex .bt.bd:hover::after { transform: translateX(8px); }




/******************** 3. 서비스 ********************/

article.article.service .headline img { max-width: 100%; }



/* 서비스 서브메인 */
article.article.service.submain > .headline.bg { background: var(--color-primary-tint05) url("../img/submain-service_bg.png") center 50%/cover no-repeat; }
article.article.service.submain > .headline.bg .title { height: auto; color: var(--color-wh); line-height: 1.4; text-align: center; word-break: keep-all; }
article.article.service.submain > .headline.bg p { color: var(--color-wh); font-size: 0.875rem; text-align: center; }
article.article.service.submain > .headline.bg .item .tit { font-weight: 800; }
article.article.service.submain > .headline.bg .item .pic { border: 0; }
article.article.service.submain > .headline.bg .list.card > :is(ol,ul) > li:not(.nodata) { border-color: var(--color-primary-tint20); }


article.article.service.submain .content { justify-content: center; padding: var(--inner-padding-min) 0; }
article.article.service.submain .content .inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: stretch; gap: 24px; }
article.article.service.submain .content .headline { flex: auto; width: auto; }
article.article.service.submain .content .headline .title { height: auto; font-weight: 700; }
article.article.service.submain .content .headline p { width: 100%; font-size: 0.875rem; line-height: 1.4; }
article.article.service.submain .content .headline.fc p { text-align: center; }
article.article.service.submain .content .headline.fe p { text-align: right; }
article.article.service.submain .content .headline.br { width: 100%; }
article.article.service.submain .content .conWrap { flex: none; width: calc((100% - 24px) / 2); border: 1px solid var(--color-secondary-tint20); border-radius: var(--radius-box-max); background-color: var(--color-wh); }
article.article.service.submain .content .conWrap .bt.ico.next { padding: 0; }

article.article.service.submain .content .conHead { padding: 16px 16px 0 16px; }
article.article.service.submain .content .conHead .title { font-size: 1rem; }
article.article.service.submain .content .conBody { overflow-y: auto; height: 100%; padding: 16px; }

article.article.service.submain .content .list.card { height: 100%; margin: 0; }
article.article.service.submain .content .list.card > :is(ol,ul) { gap: 8px; height: 100%; }
article.article.service.submain .content .list.card > :is(ol,ul) > li:not(.nodata) { width: calc((100% - (8px * 2)) / 3); }

article.article.service.submain .content .list.card > ol > li::before { top: -1px; left: auto; right: 16px; border-radius: 0; }


article.article.service.submain .content.realty { min-height: 240px; background: url("../img/submain-service_bg01.png") center 50% no-repeat; }

article.article.service.submain .content.desktop { padding: 0; }
article.article.service.submain .content.desktop .inner { background: url("../img/submain-service_bg02.png") right bottom/cover no-repeat; padding: var(--inner-padding-min); }
article.article.service.submain .content.desktop .title { color: var(--color-secondary); }
article.article.service.submain .content.desktop .headline { padding-right: 40%; }
article.article.service.submain .content.desktop .btns.col .bt.bd { border-color: var(--color-bk-tint50); background-color: var(--color-wh-tint50); backdrop-filter: blur(4px); }
article.article.service.submain .content.desktop .btns.col .bt.bd:hover { border-color: var(--color-bk); }

article.article.service.submain .content.storage { padding: 0; }
article.article.service.submain .content.storage .inner { background: url("../img/submain-service_bg03.png") left bottom/cover no-repeat; padding: var(--inner-padding-max) var(--inner-padding-min); }
article.article.service.submain .content.storage .title { color: var(--color-primary); }
article.article.service.submain .content.storage .headline { padding-left: 40%; }

article.article.service.submain .content.bg { padding: var(--inner-padding-min) 0; }

article.article.service.submain .btns.ex { width: 100%; gap: var(--inner-padding-min); }
article.article.service.submain .btns.ex .bt { flex: 1; flex-wrap: wrap; justify-content: flex-end; height: auto; color: var(--color-gray-tint70); padding: 16px 40px; }
article.article.service.submain .btns.ex .bt b { width: 100%; color: var(--color-secondary); font-size: 1rem; font-weight: 500; text-align: left; line-height: 1.2; padding: 0; margin: 16px 0; }
article.article.service.submain .btns.ex .bt.bd { border-color: var(--color-secondary-tint10); border-radius: var(--radius-box-max); background-color: var(--color-wh); box-shadow: var(--shadow-box-min); }
article.article.service.submain .btns.ex .bt.ico::after { transition: all 0.3s; }
article.article.service.submain .btns.ex .bt.bd:hover { border-color: var(--color-secondary-tint20); box-shadow: var(--shadow-box-max); }
article.article.service.submain .btns.ex .bt.bd:hover::after { transform: translateX(8px); }





/* 오픈API */
article.article.service.api {}


/* 오픈API > 오픈API 소개 */
article.article.service.api.intro .headline h6.title { height: auto; color: var(--color-secondary); border-left: 4px solid var(--color-secondary); padding-left: 16px; }

article.article.service.api.intro .note ul.bar { border-color: var(--color-primary-tint10); padding-left: 16px; margin-top: 16px; }

article.article.service.api.intro .step { margin: 8px 0; }
article.article.service.api.intro .step span { color: var(--color-gray); font-size: 0.75rem; font-weight: 500; }
article.article.service.api.intro .step span::before { content: "STEP "counter(step); width: auto; border-radius: 100px; padding: 0 16px; }
article.article.service.api.intro .step > ol > li { flex-direction: row; justify-content: flex-start; align-items: center; }
article.article.service.api.intro .step > ol > li:first-child span::before { background-color: var(--color-secondary); }
article.article.service.api.intro .step > ol > li:last-child span::before { background-color: var(--color-point); }
article.article.service.api.intro .step.col { border-radius: var(--radius-box-min); border: 1px solid var(--color-gray-tint10); padding: 16px; }
article.article.service.api.intro .step.col > ol { gap: 16px; }
article.article.service.api.intro .step.col > ol > li { gap: 16px; }
article.article.service.api.intro img { max-width: 100%; }

article.article.service.api.intro .codeview { min-height: auto; }

article.article.service.api.intro .tabs.min { margin: 16px 0 8px 0; }
article.article.service.api.intro .tabcon .headline { margin-top: var(--inner-padding-min); }


/* 오픈API > API레퍼런스 */
article.article.service.api.reference .content .tabs { margin: var(--inner-padding-min) 0; }
article.article.service.api.reference .content .list > :is(ol,ul) > li.nodata { padding: 24px; }

article.article.service.api.reference .content .list.bd.box .item .txt span em br { display: none; }
article.article.service.api.reference .content .list.bd.box .item .con { border-radius: var(--radius-box-min); background-color: var(--color-gray-tint03); padding: 16px; }
article.article.service.api.reference .content .list.bd.box .item .con .red { color: var(--color-point); vertical-align: baseline; }

article.article.service.api.reference .content .note.bd .toggle { display: flex; flex-wrap: wrap; width: 100%; }
article.article.service.api.reference .content .note.bd .toggle .item { margin: 8px 0; }
article.article.service.api.reference .content .note.bd .toggle .item .con { border-radius: var(--radius-box-min); background-color: var(--color-gray-tint03); padding: 16px; }
article.article.service.api.reference .content .note.bd .toggle .item .con span { font-size: 0.75rem !important; }

article.article.service.api.reference .content .inner > .btns.fe { margin-top: var(--inner-padding-min); }

article.article.service.api.reference .popup.makerid .field { font-size: 0.75rem; }
article.article.service.api.reference .popup.makerid .field > ul { gap: 0; border-bottom: 1px solid var(--color-gray-tint10); }
article.article.service.api.reference .popup.makerid .field > ul > li { width: 25%; padding: 8px 16px; border-top: 1px solid var(--color-gray-tint10); }
article.article.service.api.reference .popup.makerid .field > ul > li:nth-child(4n-2) { border-right: 1px solid var(--color-gray-tint05); }


/* 오픈API > API인큐베이터 */
article.article.service.api.incubator { }





/* 3D데스크톱 */
article.article.service.desktop {}


/* 3D데스크톱 > 3D데스크톱 소개 */
article.article.service.desktop.intro .item.bg { margin-bottom: var(--inner-padding-min); }

article.article.service.desktop.intro .list.card > :is(ol,ul) > li { flex: 1; width: auto; }

article.article.service.desktop.intro .step { margin: 8px 0; }
article.article.service.desktop.intro .step li { flex: auto; }
article.article.service.desktop.intro .step li:first-of-type::before,
article.article.service.desktop.intro .step li:last-of-type::after { display: none; }
article.article.service.desktop.intro .step span { color: var(--color-gray); font-size: 0.75rem; font-weight: 500; }
article.article.service.desktop.intro .step span::before { background-color: var(--color-gray); }


/* 3D데스크톱 > 기본이용안내 */
article.article.service.desktop.basic .headline { margin-bottom: var(--inner-padding-min); }
article.article.service.desktop.basic .item .con img { display: block; }
article.article.service.desktop.basic .step span { color: var(--color-gray); }
article.article.service.desktop.basic .step span::before { content: "STEP "counter(step); width: auto; border-radius: 100px; background-color: var(--color-gray); padding: 0 16px; }


/* 3D데스크톱 > 지도조작 가이드 */
article.article.service.desktop.guide {}


/* 3D데스크톱 > 매뉴얼 */
article.article.service.desktop.manual .manual .linktxt.on { color: var(--color-primary); font-weight: 600; text-decoration-color: var(--color-primary); }
article.article.service.desktop.manual .jump ul { width: calc(100% / 3); }





/* 부동산 서비스 */
article.article.service.realty .field.bg.bd { gap: 8px 24px; }
article.article.service.realty .field.bd.bg .label.dot { min-width: 80px; }
article.article.service.realty .field.bd.bg .btns { width: 100%; }
article.article.service.realty .field.bd.bg .note { margin-top: 0; }
article.article.service.realty .field.bd.bg .note .icon { display: inline-flex; align-items: center; gap: 4px; color: var(--color-gray); font-size: 0.75rem; font-weight: 400; margin-right: 16px; }
article.article.service.realty .field.bd.bg .note .icon img { height: 14px; }

article.article.service.realty .grid .icon { display: inline-flex; align-items: center; gap: 4px; font-size: 0; vertical-align: text-bottom; }
article.article.service.realty .grid .icon img { height: 14px; }

article.article.service.realty .grid :is(th,td) { padding: 8px; }
article.article.service.realty .grid thead th .bt.ico.go { text-decoration: underline; text-underline-position: under; padding: 0 0 0 8px; }

article.article.service.realty .grid tbody td .linktxt { text-decoration: none; }



/* 부동산 서비스 > 부동산 개발업 조회 */
article.article.service.realty.development .field.bd.bg > ul { width: 100%; }
article.article.service.realty.development .field.bd.bg > ul > li { width: calc((100% - (24px * 2)) / 3); }

article.article.service.realty.development .grid thead th .linktxt { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; line-height: 16px; text-decoration: none; }
article.article.service.realty.development .grid thead th .linktxt::after { content: ""; display: inline-block; width: 16px; height: 16px; background: url("../img/ico_help.svg") center 50%/contain no-repeat; opacity: 0.5; }
article.article.service.realty.development .grid thead th .linktxt:hover::after { opacity: 1; }

article.article.service.realty.development .list > ul > li.toggle { border-radius: var(--radius-box-min); border: 1px solid var(--color-gray-tint10); padding: 8px; }
article.article.service.realty.development .list > ul > li.toggle .grid.scroll { border: 0; border-top: 1px solid var(--color-secondary-tint50); margin-top: 0; margin-bottom: 4px; }
article.article.service.realty.development .list > ul > li.toggle .grid.scroll tbody tr:hover td { background: none; }
article.article.service.realty.development .list > ul > li.toggle .slipbox { padding: 16px; padding-top: 0; margin-top: 4px; }
article.article.service.realty.development .list > ul > li.toggle .slipbox .headline { margin-top: 16px; }
article.article.service.realty.development .list > ul > li.toggle .slipbox .headline .title { height: 24px; font-size: 0.875rem; }
article.article.service.realty.development .list > ul > li.toggle .slipbox .grid.scroll { background-color: var(--color-wh); margin-bottom: 0; }
article.article.service.realty.development .list > ul > li.toggle ~ li.toggle { margin-top: var(--inner-padding-min); }



/* 부동산 서비스 > 부동산 중개업 조회 */
article.article.service.realty.brokerage .list .btns { padding: 16px; }

article.article.service.realty.brokerage .list.timeline .item.bg { padding: 16px; }

article.article.service.realty.brokerage .field.data { justify-content: flex-start; align-items: flex-start; }
article.article.service.realty.brokerage .field.data .item { flex: none; display: inline-flex; width: 120px; }
article.article.service.realty.brokerage .field.data .item .pic { height: 162px; }
article.article.service.realty.brokerage .field.data .item .pic img { width: auto; }
article.article.service.realty.brokerage .field.data .item .pic.noimg { display: flex; flex-direction: column; justify-content: space-between; align-items: center; color: var(--color-gray-tint40); font-size: 0.75rem; text-align: center; background-color: var(--color-gray-tint05); padding: 8px 0 40px 0; }
article.article.service.realty.brokerage .field.data .item .pic.noimg i { display: inline-block; color: var(--color-wh); font-size: 0.6875rem; font-weight: 500; border-radius: 100px; background-color: var(--color-gray); padding: 4px 8px; }
article.article.service.realty.brokerage .field.data .item ~ dl { display: inline-flex; width: calc(100% - 120px - 24px); }








/******************** 4. 기업정보 ********************/

article.article.company {}
article.article.company .finder .set.find .select ~ .input { padding-left: 80px; }

article.article.company .list.card .tag.br .badge.min { display: inline-block; overflow: hidden; max-width: 100%; height: 24px; line-height: 23px; text-overflow: ellipsis; }


/* 서브메인 */
article.article.company.submain > .headline.bg { background: var(--color-primary-tint05) url("../img/submain-company_bg.png") center 50%/cover no-repeat; }
/*
article.article.company.submain > .headline.bg { background: url("../img/submain-bg-company01.png") 10% top no-repeat, url("../img/submain-bg-company02.png") 90% bottom no-repeat, linear-gradient(90deg, #c6e2f7, #a4b3f0); }
*/
article.article.company.submain > .headline.bg .title { color: var(--color-wh); font-weight: 600; }
article.article.company.submain > .headline.bg .note.bg { background-color: var(--color-wh-tint20); backdrop-filter: blur(4px); }

article.article.company.submain .list.card > ol .item { align-items: center; }


article.article.company.submain .recommend { border-radius: var(--radius-box-max); background-color: var(--color-primary-tint03); padding: 8px; margin: 8px 0; }
article.article.company.submain .recommend .item { flex-direction: column; flex-wrap: nowrap; min-height: 360px; border-radius: var(--radius-box-max); border: 1px solid var(--color-primary-tint20); background-color: var(--color-wh); padding: 16px; box-shadow: var(--shadow-box-min);  }
article.article.company.submain .recommend .item .less { flex: none; }
article.article.company.submain .recommend .item .tag.br .badge.min { display: inline-block; overflow: hidden; max-width: 100%; height: 24px; line-height: 23px; text-overflow: ellipsis; }

article.article.company.submain .recommend .slick-track { height: 100%; }

article.article.company.submain .recommend .slick-slide { padding: 8px; }

article.article.company.submain .recommend .slick-arrow { width: 48px; height: 48px; background-color: var(--color-bk-tint20); z-index: 100; }
article.article.company.submain .recommend .slick-prev { left: -8px; right: auto; }
article.article.company.submain .recommend .slick-next { left: auto; right: -8px; }





/* 기업검색 */
article.article.company.browse .headline.bg { transform: translateY(-36px); }

article.article.company.browse .filter { padding-top: 0; }
article.article.company.browse .finder .set.find .input { padding-right: 120px; }
article.article.company.browse .finder .set.find .bt.ico.find { right: 88px; }
article.article.company.browse .finder .set.find .bt.ico.arrow { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); justify-content: flex-end; width: 80px; font-size: 0.6875rem; padding: 0; }
article.article.company.browse .filter ~ .content { padding-top: calc(var(--inner-padding-min) - 36px); }

article.article.company.browse .content .inner > .item.row { align-items: flex-start; gap: 16px; }
article.article.company.browse .content .inner > .item.row .note { flex: auto; margin: 0; }
article.article.company.browse .content .inner > .item.row .note .txt { margin: 0; }

article.article.company.browse .content .inner > .tabs { margin: 0; margin-top: var(--inner-padding-min); }
article.article.company.browse .content .inner > .tabcon .list.card .item .btns.br .bt { flex: 1; }

article.article.company.browse .content .inner > .field.br > dl { gap: 0; }
article.article.company.browse .content .inner > .field.br > dl > dt { padding: 24px 16px; }
article.article.company.browse .content .inner > .field.br > dl > dd { padding: 0 16px 24px 16px; }
article.article.company.browse .content .inner > .field.br > dl.bd { border: 0; }
article.article.company.browse .content .inner > .field.br > dl.bd > dt:first-of-type { border: 0; }


article.article.company.browse .maparea { min-height: 480px; }
article.article.company.browse .maparea .panel { width: 280px; }
article.article.company.browse .maparea .panel .tabs.bg,
article.article.company.browse .maparea .panel .tabs.bg .tab { border-radius: var(--radius-box-min); }
article.article.company.browse .maparea .panel .list.bd .item { gap: 4px; padding: 8px; }

article.article.company.browse .maparea .pin .item { gap: 4px; }
article.article.company.browse .maparea .pin .item .txt span { width: 100%; gap: 4px; line-height: 1.4; white-space: normal; }
article.article.company.browse .maparea .pin .item .txt span::after { margin: 0 8px 0 4px; }
article.article.company.browse .maparea .pin .item .btns.fe { margin-top: 16px; }

article.article.company.browse .maparea .pin .item .less.br[href]:hover .tit { color: var(--color-primary); }


article.article.company.browse .list.view .item.temp { flex-wrap: nowrap; align-items: flex-start; gap: 16px; max-width: 100%; }
article.article.company.browse .list.view .item.temp .pic { height: auto; margin: 24px 0; }
article.article.company.browse .list.view .item.temp .con { flex: auto; }
article.article.company.browse .list.view .item.temp.type2 .pic,
article.article.company.browse .list.view .item.temp.type3 .pic { width: 50%; }
article.article.company.browse .list.view .item.temp.type4 .pic { width: 100%; }
article.article.company.browse .list.view .item.temp.type5 .pic { width: calc((100% - 32px) / 3); }




/* 기업등록신청 */
article.article.company.apply .field .headline ~ .bd.bg { margin-top: 0; }
article.article.company.apply .field .headline ~ .headline { margin-top: 24px; }





/* 기업정보관리 */
article.article.company.manage .reply .headline { width: 100%; }
article.article.company.manage .reply .pages { width: 100%; }

article.article.company.manage .reply .item.q .item.bd.bg { width: calc(100% - 80px); margin: 0 40px 16px 40px; }
article.article.company.manage .reply .item.q .item.bd.bg .tit { padding: 0; }

article.article.company.manage .field.br .btns.br { width: 100%; }

article.article.company.manage .btns.fe ~ .headline { margin-top: var(--inner-padding-min); }






/******************** 5. 소통공간 ********************/

article.article.community {}


/* 자주묻는 질문 */
article.article.community.faq {}


/* 질문과 답변 */
article.article.community.qna .list.bd .item { max-width: calc(100% - 64px); }


/* 코디네이터 신청 */
article.article.community.coordi .content .inner > .headline { margin-top: var(--inner-padding-min); }
article.article.community.coordi .content .inner > .headline h5.title { height: auto; color: var(--color-secondary); border-left: 4px solid var(--color-secondary-tint10); padding-left: 16px; }

article.article.community.coordi .item.bd .badge.max { flex-direction: column; gap: 8px; width: 160px; height: 160px; text-align: center; line-height: 1.4; border-radius: 50%; padding: 0; }
article.article.community.coordi .item.bd .badge.max::before { flex: none; content: ""; display: inline-block; width: 32px; height: 32px; font-size: 0; }
article.article.community.coordi .item.bd .badge.max:nth-child(1)::before { background: url("../img/community_coordi_intro01.png") center 50%/100% no-repeat; }
article.article.community.coordi .item.bd .badge.max:nth-child(2)::before { background: url("../img/community_coordi_intro02.png") center 50%/100% no-repeat; }
article.article.community.coordi .item.bd .badge.max:nth-child(3)::before { background: url("../img/community_coordi_intro03.png") center 50%/100% no-repeat; }

article.article.community.coordi .item.bg .step { width: 100%; margin: 0; }
article.article.community.coordi .item.bg .step span { position: relative; display: block; width: 100%; font-size: 0.75rem; font-weight: 500; text-align: left; border-radius: var(--radius-box-min); padding: 16px 56px 16px 16px; }
article.article.community.coordi .item.bg .step span::before { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 0; background: var(--color-gray-tint10) url("../img/ico_next.svg") center 50%/24px no-repeat; }
article.article.community.coordi .item.bg .step span b { display: block; color: var(--color-bk); font-weight: 600; margin-bottom: 8px; }
article.article.community.coordi .item.bg .step > ol { flex-wrap: wrap; gap: 8px; }
article.article.community.coordi .item.bg .step > ol > li { flex: auto; }
article.article.community.coordi .item.bg .step > ol > li::before,
article.article.community.coordi .item.bg .step > ol > li::after { display: none; }
article.article.community.coordi .item.bg .step > ol > li:last-child span { padding: 16px; }
article.article.community.coordi .item.bg .step > ol > li:last-child span::before { display: none; }

article.article.community.coordi .item.bg + .headline { margin-top: calc(var(--inner-padding-min)/2); }


/* 건의사항 */
article.article.community.idea {}


/* 오류신고 */
article.article.community.mistake .popup .step.col { margin-top: 16px; }
article.article.community.mistake .popup .step.col span::before { width: 24px; height: 24px; }
article.article.community.mistake .popup .step.col > ol > li span { font-size: 0.75rem; padding: 4px 16px 4px 4px; }
article.article.community.mistake .popup .step.col > ol > li > div { padding-top: 8px; }



/* 활용사례 */
article.article.community.use {}



/* 참여지도 */
article.article.community.together .content .inner > .headline { margin-top: var(--inner-padding-min); }
article.article.community.together .note { flex-wrap: nowrap; gap: 16px; }
article.article.community.together .note img { flex: none; }
article.article.community.together .note ul { flex: auto; display: inline-flex; width: auto; }

article.article.community.together .step.col { margin: 8px 0; }
article.article.community.together .step.col > ol { gap: 8px; }
article.article.community.together .step.col > ol > li { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 16px; }
article.article.community.together .step.col > ol > li > .note { margin: 0 0 0 22px; }
article.article.community.together .step.col > ol > li > .note ul { align-self: flex-start; }

article.article.community.together .step.col span.xl { justify-content: flex-start; }

article.article.community.together .step.col > ol.noG span { color: var(--color-secondary); }
article.article.community.together .step.col > ol.noG span::before { background-color: var(--color-secondary); }


/* 커뮤니티매핑 */
article.article.community.mapping .content .inner > .headline { margin-top: var(--inner-padding-min); }
article.article.community.mapping .note { flex-wrap: nowrap; gap: 16px; }
article.article.community.mapping .note img { flex: none; }
article.article.community.mapping .note img.ex { max-width: 560px; }
article.article.community.mapping .note ul { flex: auto; align-self: flex-start; display: inline-flex; width: auto; }

article.article.community.mapping .step.col { margin: 8px 0; }
article.article.community.mapping .step.col > ol > li { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; }
article.article.community.mapping .step.col > ol > li > .note { margin: 0 0 0 22px; }
article.article.community.mapping .step.col > ol > li > .note ul { align-self: flex-start; }
article.article.community.mapping .step.col span { color: var(--color-secondary); }
article.article.community.mapping .step.col span::before { background-color: var(--color-secondary); }





/******************** 6. 알림공간 ********************/

article.article.information {}

/* 공지사항 */
article.article.information.notice {}

/* 자료실 */
article.article.information.library {}

/* 미디어소식 */
article.article.information.media {}

/* 북카페 */
article.article.information.ebook {}

/* 운영안내 */
article.article.information.cs .btns img { max-width: 100%; }







/******************** 7.마이포털 ********************/

article.article.my {}




/* 홈 */
article.article.my.home .banner { width: 100%; border-radius: var(--radius-box-max); padding: 0 24px; }
article.article.my.home .banner .bt.ico.next { width: 160px; }
article.article.my.home .banner .slick-slider { width: calc(100% - 160px - 80px - 48px - 32px); }

article.article.my.home .content .inner { display: flex; flex-wrap: wrap; align-items: stretch; gap: 24px; }
article.article.my.home .content .conWrap { flex: none; width: calc((100% - 24px) / 2); height: 240px; border: 1px solid var(--color-secondary-tint20); border-radius: var(--radius-box-max); background-color: var(--color-wh); }
article.article.my.home .content .conWrap .bt.ico.next { padding: 0; }

article.article.my.home .content .conHead { height: 48px; border-bottom: 1px solid var(--color-secondary-tint10); padding: 0 16px; }
article.article.my.home .content .conBody { overflow-y: auto; height: 100%; padding: 16px 8px; }

article.article.my.home .content .tag { padding: 0 8px; }
article.article.my.home .content .tabs { flex: none; padding: 0 16px; margin: 0; margin-top: 8px; }
article.article.my.home .content .tabcon { flex: auto; position: relative; height: 100%; padding: 16px; }
article.article.my.home .content .tabcon .bt.ico.next { position: absolute; bottom: 100%; right: 16px; margin-bottom: 4px; }
article.article.my.home .content .list { height: 100%; margin: 0; }
article.article.my.home .content .list .item.row { height: 100%; padding: 0 8px; }
article.article.my.home .content .list .item.row .txt,
article.article.my.home .content .list .item.row .state { margin-left: 16px; }
article.article.my.home .content .list .item.row .path { flex: none; }
article.article.my.home .content .list > ul { flex-wrap: nowrap; flex-direction: column; height: 100%; }
article.article.my.home .content .list > ul > li { height: 40px; border-radius: var(--radius-box-min); }
article.article.my.home .content .list > ul > li.nodata { flex: auto; height: 100%; padding: 0; }
article.article.my.home .content .list > ul > li:not(.nodata):hover { background-color: var(--color-primary-tint05); }




/* 관심메뉴 */
article.article.my.setting.menu {}




/* 마이포털 설정 */
article.article.my.setting.portal .my { display: flex; flex-wrap: wrap; align-items: stretch; gap: 24px; margin-bottom: var(--inner-padding-min); }
article.article.my.setting.portal .my > li { flex: none; display: inline-flex; justify-content: space-between; align-items: center; border: 1px solid var(--color-secondary-tint30); border-radius: var(--radius-box-max); padding: 16px 24px; box-shadow: var(--shadow-box-min); }
article.article.my.setting.portal .my > li > p { display: flex; align-items: center; height: 32px; color: var(--color-bk); font-size: 0.875rem; font-weight: 500; line-height: 1; }
article.article.my.setting.portal .my > li > .bt.ico:hover { background-color: var(--color-primary-tint10); }
article.article.my.setting.portal .my > li.toggle { color: var(--color-secondary); border: 1px dashed var(--color-secondary); background-color: var(--color-wh); }
article.article.my.setting.portal .my > li.toggle.on { border-color: var(--color-bk-tint10); background-color: var(--color-gray-tint03); box-shadow: none; }
article.article.my.setting.portal .my > li.toggle.on > p { color: var(--color-bk-tint30); }

article.article.my.setting.portal .my.home > li { flex-wrap: wrap; width: calc((100% - 24px) / 2); background-color: var(--color-primary-tint03); }
article.article.my.setting.portal .my.home > li > span { position: relative; display: block; width: 100%; height: 16px; border-radius: var(--radius-box-min); background-color: var(--color-secondary-tint03); margin: 40px 0; }
article.article.my.setting.portal .my.home > li > span::before { position: absolute; bottom: calc(100% + 16px); left: 0; content: ""; display: inline-block; width: 60%; height: 16px; border-radius: var(--radius-box-min); background-color: var(--color-secondary-tint03); }
article.article.my.setting.portal .my.home > li > span::after { position: absolute; top: calc(100% + 16px); left: 0; content: ""; display: inline-block; width: 40%; height: 16px; border-radius: var(--radius-box-min); background-color: var(--color-secondary-tint03); }
article.article.my.setting.portal .my.home > li.toggle { background-color: var(--color-wh); }
article.article.my.setting.portal .my.home > li.toggle > span,
article.article.my.setting.portal .my.home > li.toggle > span::before, 
article.article.my.setting.portal .my.home > li.toggle > span::after { background-color: var(--color-bk-tint03); }


article.article.my.setting.portal .my.menu > li { flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 16px; width: calc((100% - (24px * 2)) / 3); border-color: var(--color-gray-tint10); padding: 24px; box-shadow: none; }
article.article.my.setting.portal .my.menu > li > p { font-size: 0.75rem; height: auto; }
article.article.my.setting.portal .my.menu > li .my { flex-direction: column; gap: 8px; width: 100%; margin: 0; }
article.article.my.setting.portal .my.menu > li .my > li { gap: 0; width: 100%; border-radius: var(--radius-box-min); padding: 4px 4px 4px 16px; }
article.article.my.setting.portal .my.menu > li .my > li > p { font-size: 0.75rem; }







/* 나의 정보 관리 */
article.article.my.modify .conWrap { gap: 8px; max-width: 320px; border-radius: var(--radius-box-max); border: 1px solid var(--color-secondary-tint10); padding: 24px 32px 32px 32px; margin: 0 auto; }
article.article.my.modify .conWrap .conBody .infotxt.msg { margin-bottom: 16px; }
article.article.my.modify .conWrap .conFoot > .btns .bt { flex: 1; }

/* 나의 정보 관리 > 비밀번호변경 */
article.article.my.modify.pw .field.br > ul ~ ul { gap: 4px; margin-top: 24px; }

/* 나의 정보 관리 > 회원탈퇴 */
article.article.my.modify.quit {}

/* 나의 정보 관리 > 기타 */
article.article.my.modify.etc .note.fc { border: 1px solid var(--color-secondary-tint10); border-radius: var(--radius-box-min); padding: 24px; margin: 0 0 var(--inner-padding-min) 0; }
article.article.my.modify.etc .note.fc .infotxt.msg { margin: 0; }
article.article.my.modify.etc .note.fc .infotxt.red.bg { background-color: var(--color-primary-tint05); margin-top: 16px; }




/* 나의 게시글 관리 */
article.article.my.post {}

/* 나의 게시글 관리 > 질문과 답변 */
article.article.my.post.qna {}

/* 나의 게시글 관리 > 건의사항 */
article.article.my.post.idea {}

/* 나의 게시글 관리 > 오류신고 */
article.article.my.post.mistake {}





/* 나의 지도 > 관심 주제도 */
article.article.my.map.bookmark .toggle .overbox { width: 320px; }








/* 나의 공간정보 > 관심 공간정보 */
article.article.my.space.bookmark .list > ul > li.toggle > .item { width: auto; }
article.article.my.space.bookmark .list > ul > li.toggle > .slipbox .list.bd { margin: 0; }
article.article.my.space.bookmark .list > ul > li.toggle > .slipbox .list.bd > ul > li { border-color: var(--color-gray-tint03); }
article.article.my.space.bookmark .list > ul > li.toggle > .slipbox .list.bd > ul > li:last-child { border: 0; }
article.article.my.space.bookmark .list > ul > li.toggle > .slipbox .list.bd .check { margin-right: 0; margin-left: 24px; }

article.article.my.space.bookmark.view .item.bg + .infotxt { display: flex; flex-wrap: wrap; align-items: center;  width: 100%; padding: 0; margin-top: 8px; }

article.article.my.space.bookmark.view .reply { margin-top: var(--inner-padding-min); }

article.article.my.space.bookmark.view .count > .check { margin-left: 21px; }

article.article.my.space.bookmark.view .list.box > ul { border-color: var(--color-gray-tint30); }
article.article.my.space.bookmark.view .list.box > ul > li { padding: 0 24px 0 16px; }

article.article.my.space.bookmark.view .toggle .slipbox.bg { padding: 0 24px 16px 24px; }


/* 나의 공간정보 > 스토리지 서비스 */

article.article.my.space.storage .field.bd.bg { margin-top: 0; }
article.article.my.space.storage .field.bd.bg > ul { gap: 0; }
article.article.my.space.storage .field.bd.bg > ul > li { padding: 16px 32px; }
article.article.my.space.storage .field.bd.bg .item { padding-bottom: 16px; border-bottom: 1px solid var(--color-primary-tint05); margin-bottom: 16px; }
article.article.my.space.storage .field.bd.bg .count { color: var(--color-bk); font-size: 0.75rem; }

article.article.my.space.storage .tabs { margin-top: var(--inner-padding-min); }

article.article.my.space.storage .sld { display: flex; align-items: stretch; gap: 24px; width: 100%; border-radius: var(--radius-box-max); border: 1px solid var(--color-secondary-tint10); background-color: var(--color-secondary-tint03); padding: 24px; margin-bottom: var(--inner-padding-min); }
article.article.my.space.storage .sld .maparea { flex: none; width: 40%; height: auto; margin: 0; }
article.article.my.space.storage .sld .codetxt { height: 200px; background-color: var(--color-wh); margin: 0; }
article.article.my.space.storage .sld .field { flex: auto; width: calc(60% - 24px); margin: 0; }
article.article.my.space.storage .sld .field > ul { width: 100%; margin-bottom: 16px; }
article.article.my.space.storage .sld .field > ul > li { width: 100%; }
article.article.my.space.storage .sld .field > dl:not(.bd) > dt { width: 80px; }
article.article.my.space.storage .sld .field > dl:not(.bd) > dd { width: calc(100% - 80px - 16px); }


article.article.my.space.storage .list.bd .item ~ .btns { flex-wrap: nowrap; padding: 0 16px; }




/* 나의 오픈API > 관심 */
article.article.my.api.bookmark .list > ul > li.toggle > .bt.ico.arrow:not(.only) { width: 100px; padding: 0 4px 0 8px; }
article.article.my.api.bookmark .list > ul > li.toggle > .bt.ico.arrow:not(.only) b { flex: auto; text-align: left; }
article.article.my.api.bookmark .list > ul > li.toggle > .item { width: auto; }
article.article.my.api.bookmark .list > ul > li.toggle > .item .txt span em { min-width: 24px; text-align: right; }
article.article.my.api.bookmark .list > ul > li.toggle > .slipbox .list.bd { margin: 0; }
article.article.my.api.bookmark .list > ul > li.toggle > .slipbox .list.bd > ul { border-color: var(--color-gray-tint03); }
article.article.my.api.bookmark .list > ul > li.toggle > .slipbox .list.bd > ul > li { border-color: var(--color-gray-tint03); }
article.article.my.api.bookmark .list > ul > li.toggle > .slipbox .list.bd > ul > li:last-child { border: 0; }
article.article.my.api.bookmark .list > ul > li.toggle > .slipbox .list.bd .check { margin-right: 0; margin-left: 24px; }


/* 나의 오픈API > 인증키관리 */
article.article.my.api.permit .document.scroll { margin-bottom: 0; }
article.article.my.api.permit .document.scroll ~ .check.ml { margin-right: 0; margin-bottom: 8px; }

article.article.my.api.permit .field.bd.bg { margin-top: 16px; }
article.article.my.api.permit .field.bd.bg > ul { gap: 0; }
article.article.my.api.permit .field.bd.bg > ul > li { padding: 16px 32px; }
article.article.my.api.permit .field.bd.bg .count { color: var(--color-bk); font-size: 0.75rem; }
article.article.my.api.permit .field.bd.bg .btns { width: 100%; padding-top: 16px; border-top: 1px solid var(--color-primary-tint05); margin-top: 16px; }


/* 나의 오픈API > 제한사용 초과요청 */
article.article.my.api.exceed {}






/******************** 8. 회원서비스 ********************/

article.article.user {}
article.article.user .conWrap { gap: 16px; max-width: 400px; }
article.article.user .conWrap .infotxt b { display: block; margin: 8px 0; }


/* 로그인 */
article.article.user.login .conWrap .conFoot > .btns .bt { flex: 1; }

article.article.user.login .conWrap .tabs.fix { margin: 8px 0; }
article.article.user.login .conWrap .tabs.fix ul { gap: 16px; }
article.article.user.login .conWrap .field.br > ul > li { flex-direction: column; align-items: stretch; }




/* 로그인 > 아이디찾기 */
article.article.user.login.findid {}

/* 로그인 > 비밀번호찾기 */
article.article.user.login.findpw {}



/* 회원가입 */
article.article.user.join .title strong { display: inline-block; font-size: 0.75rem; font-weight: 500; border-radius: 100px; background-color: var(--color-point-tint05); padding: 6px 12px; }
article.article.user.join .title b { display: inline-block; font-size: 0.75rem; font-weight: 500; border-radius: 100px; background-color: var(--color-secondary-tint05); padding: 6px 12px; }
article.article.user.join .document.scroll { border-color: var(--color-secondary-tint10); background-color: var(--color-secondary-tint03); }
article.article.user.join .btns.fe { margin-top: 16px; }

article.article.user.join .field.bd.bg { padding: 32px; margin-top: var(--inner-padding-min); }

article.article.user.join .conWrap { width: auto; max-width: 100%; border-radius: var(--radius-box-min); border: 1px solid var(--color-secondary-tint10); background-color: var(--color-secondary-tint03); padding: var(--inner-padding-min); margin: 8px auto; }
article.article.user.join .conWrap .conBody { text-align: center; }
article.article.user.join .conWrap .conBody .infotxt.bg { background-color: var(--color-primary-tint05); }
article.article.user.join .conWrap .conBody .infotxt.msg .title { color: var(--color-secondary); }

article.article.user.join .conWrap .conFoot { justify-content: center; }
article.article.user.join .conWrap .conFoot > .btns:only-child { max-width: 240px; }
article.article.user.join .conWrap .conFoot > .btns:only-child .bt { flex: 1; }



/* 이용약관 */
article.article.user.agree {}

/* 개인정보처리방침 */
article.article.user.policy {}

/* 저작권정책 */
article.article.user.copyright .field > dl.bd.bg > dd.min,
article.article.user.copyright .field > dl.bd.bg > dd.min + dd { font-size: 0.75rem; padding: 8px 16px; }

/* 이메일무단수집거부 */
article.article.user.refuse .conWrap { width: auto; max-width: 100%; align-items: center; }
article.article.user.refuse .conWrap .marker { color: var(--color-bk); font-size: 0.875rem; }
article.article.user.refuse .conWrap .infotxt.msg.no::before { opacity: 1; }








/******************** 9. 기타 ********************/

article.article.etc {  }

/* 에러 */
article.article.etc .error { position: relative; display: inline-block; text-align: center; }
article.article.etc .error p { display: block; color: var(--color-gray-tint70); font-size: 0.75rem; font-weight: 500; line-height: 1.8; text-align: center; padding: 16px 0; }
article.article.etc .error::before { content: ""; display: block; width: 80px; height: 80px; border-radius: 50%; background-color: var(--color-primary-tint10); transform: scale(1.2); margin: 0 auto; animation: error 1s ease infinite; }
@keyframes error { from { transform: scale(1); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
article.article.etc .error::after { position: absolute; top: 0; left: 50%; transform: translateX(-50%); content: ""; display: block; width: 80px; height: 80px; border-radius: 50%; background: var(--color-primary-tint20) url("../img/bg_error.svg") center calc(50% - 2px)/48px no-repeat; }
article.article.etc .error .title { display: block; margin-top: 16px; }
article.article.etc .error .btns { margin-top: 16px; }


/* 비밀번호 재설정 */
article.article.etc.pw .conWrap { gap: 8px; max-width: 360px; }












/******************** 10. 브이월드소개 ********************/

article.article.vworld .headline.bg p { font-size: 0.875rem; text-align: center; }

article.article.vworld .headline h6.title { height: auto; color: var(--color-secondary); border-left: 4px solid var(--color-secondary-tint10); padding-left: 16px; }
article.article.vworld .headline .item:not(.bg,.bd) { flex-direction: column; justify-content: center; padding-top: var(--inner-padding-min); }
article.article.vworld .headline .item:not(.bg,.bd) .cate span { color: var(--color-wh); background-color: var(--color-primary); }
article.article.vworld .headline .item:not(.bg,.bd) .con { text-align: center; }
article.article.vworld .headline ~ .headline { margin-top: var(--inner-padding-min); }

article.article.vworld .list.timeline .item.bg { padding: 8px 24px; }
article.article.vworld .list.timeline .item.bg:hover { background-color: var(--color-gray-tint03); }

article.article.vworld .grid .state.ck { font-size: 0; }
article.article.vworld .grid > b { font-size: 0.75rem; }
article.article.vworld .grid td.noP { background-color: #ebf4f9; }

article.article.vworld .note ul.bar { padding-left: 16px; }
article.article.vworld .note ul.bar ~ ul.bar { margin-top: 8px; }

article.article.vworld .note img { max-width: 100%; }
article.article.vworld .note.bd img { display: block; margin: 8px auto; }

article.article.vworld .headline .item .pic { width: auto; max-width: 360px; height: auto; }
article.article.vworld .headline .item .wrap { flex: auto; align-self: flex-start; gap: 8px; }

article.article.vworld .headline .note strong { margin-top: 16px; }
article.article.vworld .headline .note strong i { color: var(--color-bk-tint40); vertical-align: baseline; padding: 0 8px; }
article.article.vworld .headline .item.bd { align-items: flex-start; }
article.article.vworld .headline .item.bd .tit { white-space: nowrap; }
article.article.vworld .headline .item.bd .tit i { display: block; color: var(--color-bk-tint40); vertical-align: baseline; }
article.article.vworld .headline .item.bd .tit ~ .tit { margin-left: auto; }
article.article.vworld .headline .item.bd .txt { flex: none; flex-direction: column; justify-content: flex-start; align-items: flex-start; width: 100px; border-left: 1px solid var(--color-bk-tint05); padding-left: 24px; }

article.article.vworld .list.bd .item { gap: 16px; }
article.article.vworld .list.bd .item .pic { width: auto; max-width: 180px; height: auto; }
article.article.vworld .list.bd .item .wrap { flex: auto; display: inline-flex; flex-direction: column; gap: 8px; }
article.article.vworld .list.bd li.half { width: 50%; }





/******************** CONTENT RESPONSIVE ********************/

/* desktop */
@media all and (max-width: 1600px) {
	
	/* 메인 */
	article.article.main .content.space .conWrap:nth-child(3) { padding-right: calc(var(--inner-padding-max) + var(--inner-padding-min)); }
	article.article.main .content.space .conWrap:nth-child(3) .item .con br { display: none; }
	
}
@media all and (max-width: 1440px) {
	
	/* 메인 */
	article.article.main .content.space .item .con br { display: none; }
	
}


/* tablet */
@media all and (max-width: 1280px) {
	
	/* 메인 */
	article.article.main .spot { display: none; }
	
	article.article.main .content.visual { padding: 120px 0 40px 0; }
	article.article.main .content.visual .slogan { font-size: 2.25rem; }
	article.article.main .content.visual .service { width: 560px; text-align: center; }
	article.article.main .content.visual .service a.before { gap: 8px; }
	article.article.main .content.visual .service a.after { display: none; }
	article.article.main .content.visual .service li { width: 140px; height: 140px; margin: 8px; }
	article.article.main .content.visual .service li ~ li { margin: 8px; }
	article.article.main .content.visual .mouse { display: none; }
	
	article.article.main .content.space { min-height: 400px; }
	article.article.main .content.space .conWrap:nth-child(3) { padding-right: var(--inner-padding-min); }
	
	
	/* 서비스 서브메인 */
	article.article.service.submain .content.desktop { background-size: auto 100%; }
	article.article.service.submain .content.storage { background-size: auto 100%; background-position: -80% bottom; }
	
	
	/* 3D데스크톱 > 3D데스크톱 소개 */
	article.article.service.desktop.intro .field > dl.bd > dd { padding: 8px; }
	
	
	/* 부동산 서비스 > 부동산 개발업 조회 */
	article.article.service.realty.development .list > ul > li.toggle .grid.scroll table { min-width: 1200px; }
	
	/* 부동산 서비스 > 부동산 중개업 조회 */
	article.article.service.realty.brokerage .grid.scroll table { min-width: 1200px; }
	
	
	
	
	
	/* 참여지도 */
	article.article.community.together .note img { width: 26.88vw; min-width: 240px; }
	
	/* 커뮤니티매핑 */
	article.article.community.mapping .note img.ex { width: 43.75vw; min-width: 320px; }
	
	
	
}
@media all and (max-width: 1080px) {
	
	/* 메인 */
	article.article.main .content.company .list.card > ul { gap: 16px }
	article.article.main .content.company .list.card > ul > li { width: calc((100% - (16px * 2)) / 3); }
	
	article.article.main .content.community .conWrap { width: 100%; }
	
	
	/* 브이월드소개 */
	article.article.vworld .headline .item.bd { overflow-x: auto; padding: 16px; }
	
	
	/* 서비스 서브메인 */
	article.article.service.submain .content .conWrap { width: 100%; }
	
	/* 3D데스크톱 > 3D데스크톱 소개 */
	article.article.service.desktop.intro .step > ol > li { width: 100%; justify-content: flex-start; }
	article.article.service.desktop.intro .step > ol > li::before,
	article.article.service.desktop.intro .step > ol > li::after { display: none; }
	
	
	
}
@media all and (max-width: 960px)  {
	
	/* 메인 */
	article.article.main .content.visual .slogan { font-size: 2rem; }
	article.article.main .content.visual .finder .set.find .input { height: 56px; line-height: 56px; }
	article.article.main .content.visual .finder .set.find .bt.ico.find { right: 4px; }
	
	article.article.main .content.space { min-height: 360px; }
	
	article.article.main .content.service .list.card > ul > li { backdrop-filter: blur(8px); padding: 16px 0; }
	
	article.article.main .content.community .list.bd .item { flex-wrap: nowrap; }
	
	article.article.main .content.logolink .slick-slider { padding-right: 32px; }
	article.article.main .content.logolink .slick-arrow { display: none !important; }
	article.article.main .content.logolink .bt.ico.play { right: var(--inner-padding-min); }
	
	
	/* 브이월드소개 */
	article.article.vworld .headline .item.bg .pic { align-self: flex-start; width: 35.938vw; min-width: 160px; max-width: none; }
	
	article.article.vworld .list.bd .item { flex-wrap: nowrap; }
	article.article.vworld .list.bd .item .pic { align-self: flex-start; width: 18.75vw; min-width: 100px; max-width: none; }
	
	article.article.vworld .list.card .item .pic.min { height: auto; }
	
	
	/* 공간정보 다운로드 */
	article.article.space.download .headline.bg { padding-top: 60px; }
	
	article.article.space.download .filter ~ .inner .tag { margin-bottom: 24px; }
	
	article.article.space.download .count > .check { margin-left: 13px; }
	article.article.space.download .list.box > ul > li { padding: 0 16px 0 8px; }
	
	
	/* 공간정보 다운로드 서브메인 */
	article.article.space.submain > .headline.bg { padding-top: var(--inner-padding-max); }
	article.article.space.submain > .headline.bg li { width: 16.667vw; min-width: 110px; height: 16.667vw; min-height: 110px; }
	article.article.space.submain > .headline.bg li::before { height: 7.5vw; min-height: 48px; }
	
	article.article.space.submain .content { padding-bottom: 0; }
	article.article.space.submain .content .inner { padding: 0; }
	article.article.space.submain .content .headline { padding: 0 var(--inner-padding-min); }
	article.article.space.submain .content .list.card { overflow-x: auto; padding: 0 var(--inner-padding-min) var(--inner-padding-min) var(--inner-padding-min); }
	article.article.space.submain .content .list.card > :is(ol,ul) { width: 960px; flex-wrap: nowrap; }
	article.article.space.submain .content .list.card > :is(ol,ul) > li:not(.nodata) { flex: 1; width: auto; }

	
	
	
	/* 오픈API 서브메인 */
	article.article.openapi.submain .content .conWrap { width: 100%; }
	article.article.openapi.submain .content .conWrap .list.card > :is(ol,ul) { padding: 8px 16px 16px 16px; }
	article.article.openapi.submain .content .conWrap .list.card > :is(ol,ul) { width: 868px; flex-wrap: nowrap; }
	article.article.openapi.submain .content .conWrap .list.card > :is(ol,ul) > li:not(.nodata) { flex: 1; }
	
	article.article.openapi.submain .content .conBody { overflow-y: hidden; overflow-x: auto; padding: 0; }
	
	article.article.openapi.submain .btns.ex .bt b { margin: 8px 0; }
	article.article.openapi.submain .btns.ex .bt.bd { padding: 16px 32px; }
	
	
	
	/* 서비스 서브메인 */
	article.article.service.submain > .headline.bg { padding-top: var(--inner-padding-max); padding-bottom: 0; }
	article.article.service.submain > .headline.bg .item { gap: 4px; }
	
	article.article.service.submain > .headline.bg .inner { padding: 0; }
	article.article.service.submain > .headline.bg .title,
	article.article.service.submain > .headline.bg .title ~ p { padding: 0 var(--inner-padding-max); }
	article.article.service.submain > .headline.bg .list.card { overflow-x: auto; padding: 16px 0; }
	article.article.service.submain > .headline.bg .list.card > :is(ol,ul) { display: block; font-size: 0; white-space: nowrap; text-align: center; }
	article.article.service.submain > .headline.bg .list.card > :is(ol,ul) > li:not(.nodata) { display: inline-flex; width: 240px; margin: 0 16px; }
	article.article.service.submain > .headline.bg .list.card > :is(ol,ul) > li:not(.nodata) ~ li { margin-left: 0; }
	
	
	article.article.service.submain .content.desktop .inner { background-size: auto 240px; }
	
	article.article.service.submain .content.storage .inner { background-size: auto 240px; }
	article.article.service.submain .content.storage .headline p br { display: none; }
	
	
	article.article.service.submain .btns.ex .bt b { margin: 8px 0; }
	article.article.service.submain .btns.ex .bt.bd { padding: 16px 32px; }
	
	
	
	
	
	/* 부동산 서비스 > 부동산 개발업 조회 */
	article.article.service.realty.development .field.bd.bg > ul > li { width: calc((100% - 24px) / 2); }
	
	/* 부동산 서비스 > 부동산 중개업 조회 */
	article.article.service.realty.brokerage .field.data { gap: 8px; }
	article.article.service.realty.brokerage .item .tit.fix { flex: none; }
	
	
	
	/* 3D데스크톱 > 3D데스크톱 소개 */
	article.article.service.desktop.intro .list.card > :is(ol,ul) { gap: 8px; }
	article.article.service.desktop.intro .list.card > :is(ol,ul) > li { flex: none; width: 100%; }
	
	
	
	
	/* 기업검색 */
	article.article.company.browse .headline.bg { padding: 48px 0 24px 0; }
	
	/* 기업정보 서브메인 */
	article.article.company.submain .list.card > ol > li { width: calc((100% - 16px) / 2); }
	article.article.company.submain .recommend .item .txt.fix.br { flex: none; }
	
	
	
	
	
	/* 코디네이터 신청 */
	article.article.community.coordi .item.bd .badge.max { width: 16.67vw; min-width: 100px; height: 16.67vw; min-height: 100px; }
	article.article.community.coordi .item.bd .badge.max::before { width: 24px; height: 24px; }
	
	
	
	
	/* 마이포털 */
	article.article.my.home .content .inner { gap: 16px; }
	article.article.my.home .content .conWrap { width: 100%; }
	article.article.my.home .content .tabcon { padding: 8px; }
	
	article.article.my.setting.portal .my { gap: 16px; }
	article.article.my.setting.portal .my.menu > li { width: calc((100% - (16px * 2)) / 3); padding: 16px; }
	
	
}
@media all and (max-width: 840px) {
	
	/* 메인 */
	article.article.main .content.visual .today { padding: 0; }
	article.article.main .content.visual .today .count { flex-direction: row; justify-content: space-between; width: 100%; padding: 16px; }
	article.article.main .content.visual .today .count ~ .count { border-left: 0; border-top: 1px solid var(--color-wh-tint05); }
	
	article.article.main .content.visual .mainlogo>img {width: 250px;}
	
	article.article.main .content.maps .inner { flex-direction: column; gap: var(--inner-padding-min); }
	article.article.main .content.maps .headline { align-items: center; text-align: center; }
	article.article.main .content.maps .list.card > ul { justify-content: center; }
	
	article.article.main .content.community .list.bd .item { padding: 8px 16px; }
	
	
	/* 서비스 서브메인 */
	article.article.service.submain .content .conBody { padding: 0; }
	article.article.service.submain .content .list.card { overflow-x: auto; padding: 16px; }
	article.article.service.submain .content .list.card > :is(ol,ul) { flex-wrap: nowrap; }
	article.article.service.submain .content .list.card > :is(ol,ul) > li:not(.nodata) { width: 260px; }
	
	
	/* 부동산 서비스 > 부동산 중개업 조회 */
	article.article.service.realty.brokerage .field.data > dl > dt { width: 100px; }
	article.article.service.realty.brokerage .field.data > dl > dd.min,
	article.article.service.realty.brokerage .field.data > dl > dd.max { width: calc(100% - 100px); }
	
	
	/* 마이포털 */
	article.article.my.setting.portal .my { gap: 8px; }
	article.article.my.setting.portal .my.menu > li { width: calc((100% - (8px * 2)) / 3); padding: 8px; }
	
	
	
}
@media all and (max-width: 720px) {
	
	/* 메인 */
	article.article.main .content.space { flex-wrap: wrap; }
	article.article.main .content.space .conWrap { flex: none; width: 50%; }
	article.article.main .content.space .conWrap:nth-child(1) { flex: none; width: 100%; padding-left: var(--inner-padding-min); }
	
	article.article.main .content.visual .mainlogo>img {width: 250px;}
	
	article.article.main .content.service { background-size: cover; }
	article.article.main .content.service .list.card > ul > li { width: 60%; }
	article.article.main .content.service .bt.ico.next { height: 24px; padding: 0 0 0 8px; }
	
	article.article.main .content.company .list.card > ul { gap: 8px }
	article.article.main .content.company .list.card > ul > li { width: calc((100% - (8px * 2)) / 3); }
	
	
	
	
}


/* mobile */
@media all and (max-width: 640px) {	
	
	/* 메인 */
	article.article.main .content.visual { height: 100vh; background: url("../img/img-main-visual-m-bg.jpg") center 50%/cover no-repeat; padding: 80px 0; }
	
	article.article.main .content.visual .slogan { font-size: 1.75rem; }
	article.article.main .content.visual .finder .set.find .input { height: 48px; line-height: 48px; }
	article.article.main .content.visual .finder .set.find .bt.ico.find { width: 40px; height: 40px; }
	article.article.main .content.visual .service { width: 360px; }
	article.article.main .content.visual .service a.before::before { height: 0px; }
	article.article.main .content.visual .service li { width: 120px; height: 120px; }
	
	article.article.main .content.visual .mainlogo>img {width: 170px; margin-top: -20px;}
	
	
	article.article.main .content.maps .list.card > ul { gap: 8px; }
	article.article.main .content.maps .list.card > ul > li { min-width: 100px; }
	article.article.main .content.maps .list.card .item { padding: 8px; }
	
	article.article.main .content.company { padding-bottom: 0; }
	article.article.main .content.company .inner { padding: 0; }
	article.article.main .content.company .headline { padding: 0 var(--inner-padding-min); }
	article.article.main .content.company .list.card { overflow-x: auto; }
	article.article.main .content.company .list.card > ul { min-width: 640px; padding: var(--inner-padding-min); }
	
	article.article.main .content.community .list.bd .item { padding: 8px; }
	
	
	/* 통합검색 */
	article.article.search nav.tabs.bg.max { border-radius: var(--radius-box-min); }
	article.article.search nav.tabs.bg.max ul { flex-wrap: wrap; gap: 0; height: 80px; }
	article.article.search nav.tabs.bg.max li { flex: none; width: calc(100% / 3); }
	
	
	/* 오픈API 서브메인 */
	article.article.openapi.submain .content .inner { gap: 16px; }
	article.article.openapi.submain .step.col { position: relative; }
	article.article.openapi.submain .step.col > ol { gap: 8px; }
	article.article.openapi.submain .step.col > ol > li { gap: 8px; }
	article.article.openapi.submain .step.col > ol > li .bt { position: absolute; bottom: calc(100% + 16px); right: 0; margin: 0 !important; }
	
	article.article.openapi.submain .btns.ex .bt b { font-size: 0.875rem; margin: 4px 0; }
	article.article.openapi.submain .btns.ex .bt.bd { padding: 16px 24px; }
	
	
	/* 오픈API > API레퍼런스 */
	article.article.service.api.reference .content .list.bd.box .item .txt span { overflow: visible; max-width: 100%; align-items: flex-start; line-height: 1.4; }
	article.article.service.api.reference .content .list.bd.box .item .txt span em { overflow: visible; line-height: 1.4; white-space: normal; padding: 0; }
	
	
	/* 서비스 서브메인 */
	article.article.service.submain .content .list.card > :is(ol,ul) > li:not(.nodata) { width: 240px; }
	
	article.article.service.submain .content.realty { min-height: 200px; }
	article.article.service.submain .content.desktop .headline { padding: var(--inner-padding-min) 0; }
	article.article.service.submain .content.desktop .inner { background-size: auto 200px; }
	article.article.service.submain .content.storage .inner { background-size: auto 160px; }
	
	article.article.service.submain .btns.ex .bt b { font-size: 0.875rem; margin: 4px 0; }
	article.article.service.submain .btns.ex .bt.bd { padding: 16px 24px; }
	
	
	/* 부동산 서비스 */
	article.article.service.realty .field.bd.bg .label.dot { min-width: 60px; }
	
	/* 부동산 서비스 > 부동산 개발업 조회 */
	article.article.service.realty.development .field.bd.bg > ul > li { width: 100%; }
	
	/* 부동산 서비스 > 부동산 중개업 조회 */
	article.article.service.realty.brokerage .field > ul > li.br .select { width: 100% !important; }
	article.article.service.realty.brokerage .list.timeline .item.bg .cate { order: 1; }
	article.article.service.realty.brokerage .list.timeline .item.bg .state { order: 2; }
	article.article.service.realty.brokerage .list.timeline .item.bg .tit { order: 3; width: 100%; }
	article.article.service.realty.brokerage .list.timeline .item.bg .txt { order: 4; }
	article.article.service.realty.brokerage .list.timeline .item.bg .txt span { overflow: visible; max-width: 100%; align-items: flex-start; line-height: 1.4; }
	article.article.service.realty.brokerage .list.timeline .item.bg .txt span em { overflow: visible; line-height: 1.4; white-space: normal; padding: 0; }
	
	
	
	/* 3D데스크톱 > 매뉴얼 */
	article.article.service.desktop.manual .jump ul { width: calc(100% / 2); }
	article.article.service.desktop.manual .item.bg img { width: auto !important; max-width: 100%; height: auto !important; }
	
	
	
	
	/* 기업정보 서브메인 */
	article.article.company.submain .recommend .item { min-height: 240px; }
	
	
	
	
	/* 마이포털 */
	article.article.my.setting.portal .my.menu > li { width: calc((100% - 8px) / 2); }
	
	
	
	
	
	/* 참여지도 */
	article.article.community.together .note { flex-direction: column; }
	article.article.community.together .note img { width: auto; max-width: 100%; }
	article.article.community.together .step.col > ol > li { gap: 0; }
	article.article.community.together .step.col p { width: 100%; }
	article.article.community.together .step.col .note { align-items: flex-start; }
	article.article.community.together .step.col span::before { width: 24px; height: 24px; }
	
	
	/* 커뮤니티매핑 */
	article.article.community.mapping .note { flex-direction: column; }
	article.article.community.mapping .note img.ex { width: auto; max-width: 100%; }
	article.article.community.mapping .step.col .note { align-items: flex-start; }
	article.article.community.mapping .step.col span::before { width: 24px; height: 24px; }
	
	
	
	
}
@media all and (max-width: 560px) {
	
	
	
}
@media all and (max-width: 480px) {
	
	/* 메인 */
	article.article.main .content.visual .slogan { text-align: center; }
	article.article.main .content.visual .slogan strong { display: block; }
	
	article.article.main .content.service .list.card > ul > li { width: 100%; }
	
	article.article.main .content.community .list.bd .item { padding: 8px 0; }
	article.article.main .content.community .square .item { background-position: calc(100% - 8px) 50% !important; background-size: 56px !important; padding-right: 64px; }
	article.article.main .content.community .square .item .con br { display: none; }
	
	
	/* 브이월드소개 */
	article.article.vworld .list.timeline .item.bg { padding: 4px 8px; }
	
	article.article.vworld .headline .item.bd { padding-bottom: 0; }
	article.article.vworld .headline .item.bd .pic { width: 100px; }
	
	article.article.vworld .headline .item.bg { flex-direction: column; padding: 16px; }
	article.article.vworld .headline .item.bg .pic { width: 100%; min-width: 100%; }
	
	article.article.vworld .list.bd li.half { width: 100%; }
	
	article.article.vworld .list.card > :is(ol,ul) > li:not(.nodata) { width: calc((100% - 8px) / 2); }
	
	
	/* 오픈API 서브메인 */
	article.article.openapi.submain .step.col { padding: 8px; }
	article.article.openapi.submain .step.col span { padding-right: 16px; }
	
	article.article.openapi.submain .btns.ex .bt b { margin-bottom: 0; margin-top: 8px; }
	article.article.openapi.submain .btns.ex .bt.bd { padding: 8px 16px; }
	
	
	/* 서비스 서브메인 */
	article.article.service.submain .content.desktop .inner { background-size: auto 160px; }
	
	article.article.service.submain .content.storage .inner { background-size: auto 120px; }
	article.article.service.submain .content.storage .headline { justify-content: flex-end; padding: var(--inner-padding-min) 0; }
	article.article.service.submain .content.storage .headline p { text-align: right; }
	
	article.article.service.submain .btns.ex .bt b { margin-bottom: 0; margin-top: 8px; }
	article.article.service.submain .btns.ex .bt.bd { flex: none; width: 100%; padding: 8px 16px; }
	
	
	
	/* 공간정보 다운로드 */
	article.article.space.submain > .headline.bg ul { gap: 0; width: 100%; justify-content: space-around; }
	
	article.article.space.download .filter ~ .inner .tag { margin-bottom: 16px; }
	
	article.article.space.download .count > .check { margin-left: 0; }
	article.article.space.download .list.box > ul > li { flex-wrap: wrap; padding: 8px; }
	article.article.space.download .list.box > ul > li .check { order: 2; }
	article.article.space.download .list.box > ul > li .item { order: 1; width: 100%; max-width: 100%; }
	article.article.space.download .list.box > ul > li .btns { order: 3; margin-left: auto; }
	
	
	/* 기업정보 서브메인 */
	article.article.company.submain .list.card > ol .item { padding: 8px; }
	article.article.company.submain .list.card .item .note:is(.bd,.bg) { padding: 8px; }
	
	/* 기업정보 */
	article.article.company.browse .content .inner > .item.row { flex-wrap: wrap; }
	
	
	/* 마이포털 */
	article.article.my.home .content .inner { gap: 8px; }
	
	article.article.my.setting.portal .my.menu > li { width: 100%; }
	
}


/* ex) Garaxy fold cover */
@media all and (max-width: 360px) {
	
	
	/* 공간정보 다운로드 */
	article.article.space.submain > .headline.bg ul { justify-content: space-between; }
	
}


/* ex) vertical */
@media all and (max-height: 480px) {
	
}