@charset "utf-8";
/* doc.css는 디자인페이지 스타일을 정의합니다. */
.root_daum_roughmap {width:100% !important; height:clamp(250px, calc( 500 / var(--inner) * 100vw ), 500px) !important;}
.root_daum_roughmap .wrap_map {height:clamp(250px, calc( 500 / var(--inner) * 100vw ), 500px) !important;}
.roughmap_lebel_text {line-height:0 !important; font-size:0 !important;}
.roughmap_lebel_text:after {content:"동탄금강펜테리움IX타워"; font-size:12px; line-height:15px;}

.bullet-item .bullet-list {position:relative; padding-left:15px; margin-top:10px; line-height:1.3;}
.bullet-item .bullet-list:first-child {margin-top:0;}
.bullet-item .bullet-list::before {position:absolute; content:''; left:0; top:9px; width:3px; height: 3px; background:var(--color-primary); border-radius: 50%;}
.bullet-item .bullet-list.none {padding-left: 0;}
.bullet-item .bullet-list.none::before {display: none;}

#sub #container {background: #FFF4E6; color: var(--body-color);}
.bg-gray {background:#fafafa;}
.overhidden {overflow: hidden;}
.subsec-pd {padding:clamp(50px, calc( 100  / var(--inner) * 100vw ), 100px) 0;}
.subsec-pd2 {padding:clamp(50px, calc( 125  / var(--inner) * 100vw ), 125px) 0;}
.subsec-pd3 {padding:clamp(40px, calc( 90  / var(--inner) * 100vw ), 90px) 0;}
.textrightbx {margin-bottom: clamp(15px, calc( 30  / var(--inner) * 100vw ), 30px); text-align: right; letter-spacing: -0.5px;}
.textrightbx .tit {font-size:clamp(20px, calc( 46  / var(--inner) * 100vw ), 46px);}
.textrightbx .dec {padding-top: 5px;}
.submaintit {margin-bottom: clamp(15px, calc( 20  / var(--inner) * 100vw ), 20px); font-size:clamp(20px, calc( 46  / var(--inner) * 100vw ), 46px); font-weight: bold; color: var(--color-primary);}

.sub1_1_1 .desc {font-size: clamp(14px, calc( 18  / var(--inner) * 100vw ), 18px); line-height: 1.33;}
.sub1_1_2 {background: url(../images/sub/sec1_1-bg.jpg) no-repeat center center; background-size: cover;}
.sub1_1_2 .titbx {flex: 1 0  clamp(180px, calc( 315  / var(--inner) * 100vw ), 315px); max-width:  clamp(180px, calc( 315  / var(--inner) * 100vw ), 315px);}
.sub1_1_2 .descbx {flex: 1 0 auto; width: 1%;}
.sub1_1_2 .scrollbx {height:  clamp(600px, calc( 800  / var(--inner) * 100vw ), 800px); overflow: hidden; position: relative;}
.sub1_1_2 .historylist {position: relative; transition: transform 0.1s ease-out;}
.sub1_1_2 .historyitem {display: flex; flex-wrap: wrap;font-size:clamp(15px, calc( 19  / var(--inner) * 100vw ), 19px);}
.sub1_1_2 .historyitem + .historyitem {margin-top: 7px;}
.sub1_1_2 .yearbx {display: flex; align-items: center; flex: 1 0  clamp(120px, calc( 130  / var(--inner) * 100vw ), 130px); max-width:  clamp(120px, calc( 130  / var(--inner) * 100vw ), 130px);}
.sub1_1_2 .year {flex: 1 0  clamp(70px, calc( 75  / var(--inner) * 100vw ), 75px); max-width:  clamp(70px, calc( 75  / var(--inner) * 100vw ), 75px);}
.sub1_1_2 .area {flex: 1 0 auto; width: 1%;}
.sub1_1_2 .intextbx {flex: 1 0 auto; width: 1%;}

.processitem:nth-child(even) {background: #E9D9C2;}
.processitem .flxWrap {display: flex; align-items: center; gap: clamp(15px, calc( 30  / var(--inner) * 100vw ), 30px); letter-spacing: -0.05em;}
.processitem .icnbx {flex: 0 0 100px; max-width: 100px;}
.processitem .icnbx .icn {width: clamp(60px, calc( 100  / var(--inner) * 100vw ), 100px); }
.processitem .textbx {flex: 1 0 auto; width: 1%;}
.processitem .step {display: block; font-size: clamp(18px, calc( 28  / var(--inner) * 100vw ), 28px); font-weight: 600; color: var(--color-primary); margin-bottom: 8px;}
.processitem .dec {font-size: clamp(14px, calc( 18  / var(--inner) * 100vw ), 18px); line-height: 1.33; }

.sub1_3_1 {display: flex; align-items: flex-end;background: url(../images/sub/sub1_3-bg.jpg) no-repeat center center; background-size: cover; min-height: clamp(500px, calc( 1000  / var(--inner) * 100vw ), 1000px);}
.sub1_3_1 .sub1_3flxwrap { height: 100%;}
.sub1_3flxwrap {display: flex; flex-wrap: wrap; align-items: center;}
.sub1_3flxwrap .imgbx {flex:1 0 50%; max-width: 50%; margin-right: clamp(20px, calc( 85  / var(--inner) * 100vw ), 85px);}
.sub1_3flxwrap .textbx {flex:1 0 auto; width: 1%; letter-spacing: -0.8px;}
.sub1_3flxwrap .tit {font-size:clamp(18px, calc( 28  / var(--inner) * 100vw ), 28px); font-weight: bold; font-family: var(--font-inter); color: var(--color-primary);}
.sub1_3flxwrap .desc {margin-top: 12px; color: #000; line-height: 1.5;}

.sub1_3_2 .sub1_3flxwrap:nth-child(odd) {flex-direction: row-reverse;}
.sub1_3_2 .sub1_3flxwrap:nth-child(odd) .imgbx {margin-right: 0; margin-left: clamp(20px, calc( 85  / var(--inner) * 100vw ), 85px);}
.sub1_3_2 .sub1_3flxwrap:nth-child(odd) .textbx {text-align: right;}

.gallery-intro {padding: clamp(60px, calc( 180  / var(--inner) * 100vw ), 180px) 0; background: url(../images/sub/sub2_1-bg.jpg) no-repeat center center; background-size: cover;}
.intbtnlist {display: flex; flex-wrap: wrap; justify-content: space-between; margin: -10px;}
.intbtnitem {flex: 1 0 33.33%; max-width: 33.33%; padding: 10px; text-align: center;}
.intbtnitem .btninner {display: flex; align-items: center; justify-content: center; margin: 0 auto; position: relative; font-size:clamp(20px, calc( 46  / var(--inner) * 100vw ), 46px); width: clamp(160px, calc( 240  / var(--inner) * 100vw ), 240px); aspect-ratio: 1 / 1; font-weight: bold; color: #242424; text-align: center; border-radius: 50%; overflow: hidden;z-index: 1;}
.intbtnitem .btninner::before {content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit:cover; background: rgba(255, 255, 255, 0.50); z-index: -1;}

.lg-backdrop {background: rgba(0, 0, 0, 0.7);}
.gallylist {display: flex; flex-wrap: wrap; margin: -8px;}
.gallyitem {flex: 1 0 25%; max-width: 25%; padding: 8px;}
.gallyitem .images {position:relative; padding-bottom:75%; overflow:hidden;}
.gallyitem .images img {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100%; height:auto; max-width:100%; min-height:100%;object-fit : cover;}
.gallyitem .imagesbx {position: relative; display: block; text-decoration: none;}
.gallyitem .hoverbx {display: flex; align-items: center; justify-content: center; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: rgba(0, 0, 0, 0.50); width: 100%; height: 100%; opacity: 0; transition: all 0.3s;}
.gallyitem:hover .hoverbx {opacity: 1;}
.gallyitem .gallery-info {padding: 10px; text-align: center; background: #fff; border-top: 1px solid #e9e9e9;}
.gallyitem .gallery-info .tit {font-weight: 600; margin-bottom: 5px; font-size: 14px; color: #333; line-height: 1.4;}
.gallyitem .gallery-info .tit a {color: #333; text-decoration: none; transition: color 0.3s;}
.gallyitem .gallery-info .tit a:hover {color: var(--color-primary);}
.gallyitem .gallery-info .date {font-size: 12px; color: #666;}
.gallyitem .gallery-info .icons {margin-top: 5px; display: flex; align-items: center; justify-content: center; gap: 4px;}
.gallyitem .gallery-info .icons img {width: 16px; height: 16px;}
.gallyitem .gallery-info .comment {font-size: 12px; color: #0066cc; font-weight: 500;}
.lightGallery .no-data {width: 100%; text-align: center; padding: 50px; color: #666; font-size: 16px;}
.board-search {display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; gap: 15px;}
.board-search .total-page {font-size: 14px; color: #666;}
.board-search .search {display: flex; gap: 8px;}
.board-search .search .input {min-width: 200px;}

/* 반응형 미디어쿼리 */
@media (max-width: 1024px) {
    .gallyitem {flex: 1 0 33.33%; max-width: 33.33%;}
}

@media (max-width: 768px) {
    .gallyitem {flex: 1 0 50%; max-width: 50%;}
    .board-search {flex-direction: column; align-items: stretch; gap: 10px;}
    .board-search .search .input {min-width: auto; width: 100%;}
}

@media (max-width: 480px) {
    .gallyitem {flex: 1 0 100%; max-width: 100%;}
    .gallylist {margin: -4px;}
    .gallyitem {padding: 4px;}
}

.inqulistwrap {max-width: 580px; width: 100%; margin: 0 auto; padding-bottom:clamp(30px, calc( 90  / var(--inner) * 100vw ), 90px);}
.inqulist {display: flex; flex-wrap: wrap; margin: 0 -35px;}
.inquitem {flex: 1 0 25%; max-width: 25%; padding:0 35px; position: relative;}
.inquitem .inner {padding: 20px; background: #215075; text-align: center;}
.inquitem .name {display: block; padding-top: clamp(5px, calc( 10  / var(--inner) * 100vw ), 10px); color: #fff; line-height: 1;}
.inquitem svg {width:clamp(24px, calc( 32  / var(--inner) * 100vw ), 32px);height:clamp(24px, calc( 32  / var(--inner) * 100vw ), 32px);}
.inquitem:not(:last-child):after {position: absolute; content: ''; right: -5px; top: 50%; transform: translateY(-50%); width: 10px; height: 16px; background: url(../images/sub/arrow-right.png) no-repeat center center; background-size: contain;}

.form-txt {padding-bottom: 7px; text-align: right; color: #000;}
#sub #container .input {border-radius: 8px;} 
.board-form .btn-pack {border-radius: 8px;}

.radioflx {display: flex; flex-wrap: wrap;}
.radioflx .item {display: flex;align-items: center; height: clamp(38px, calc( 44  / var(--inner) * 100vw ), 44px);}
.radioflx .item:not(:last-child) {margin-right: clamp(15px, calc( 40  / var(--inner) * 100vw ), 40px); }
.radioflx .item:last-child {height: auto;}
.radioflx .item:last-child .radiobox {margin-right: clamp(15px, calc( 40  / var(--inner) * 100vw ), 40px);}
.buttons .cen .btn-pack.bdrs {border-radius: 8px !important;}

.addrbx {text-align: center; margin-bottom: clamp(25px, calc( 45  / var(--inner) * 100vw ), 45px);}
.addrbx .addr {font-size:  clamp(18px, calc( 24  / var(--inner) * 100vw ), 24px); color: var(--color-body); line-height: 1.33;}
.areabusinfo .tit {padding-top: clamp(15px, calc( 20  / var(--inner) * 100vw ), 20px); color: var(--color-primary); font-size: clamp(20px, calc( 28  / var(--inner) * 100vw ), 28px); font-weight: 600;}
.busflxwrap {display: flex; flex-wrap: wrap; padding: clamp(40px, calc( 80  / var(--inner) * 100vw ), 80px) 0;}
.busflxwrap.bg-blue {padding: clamp(30px, calc( 45  / var(--inner) * 100vw ), 45px) 0; background: #215075; color: #fff;}
.busflxwrap .icnbx {flex: 1 0 clamp(120px, calc( 150  / var(--inner) * 100vw ), 150px); max-width: clamp(120px, calc( 150  / var(--inner) * 100vw ), 150px); text-align: center;}
.busflxwrap .icnbx svg {width:clamp(30px, calc( 48  / var(--inner) * 100vw ), 48px); height:clamp(30px, calc( 48  / var(--inner) * 100vw ), 48px);}
.busflxwrap .textbx {flex: 1 0 auto; width: 1%;}
.busflxwrap .tt {margin-bottom: clamp(10px, calc( 15  / var(--inner) * 100vw ), 15px); font-size:clamp(16px, calc( 20  / var(--inner) * 100vw ), 20px); font-weight: bold; color: var(--color-body);}
.busflxwrap .item + .item {margin-top: 12px;}
.busflxwrap .item:not(.nonflx) {display: flex; align-items: center;}
.busflxwrap .name {display: flex; align-items: center; justify-content: center; flex: 1 0 clamp(40px, calc( 45  / var(--inner) * 100vw ), 45px); max-width: clamp(40px, calc( 45  / var(--inner) * 100vw ), 45px); height: clamp(28px, calc( 32  / var(--inner) * 100vw ), 32px); margin-right: clamp(10px, calc( 15  / var(--inner) * 100vw ), 15px);background: var(--color-primary); color: #fff;border-radius: 8px;text-align: center;}
.busflxwrap .info {flex: 1 0 auto; width: 1%;font-size: clamp(14px, calc( 18  / var(--inner) * 100vw ), 18px); line-height: 1.33;}
.busflxwrap .item.nonflx {display: block;}
.busflxwrap .item.nonflx .tt {margin-bottom: 8px; color: #fff;}
.busflxwrap .item.nonflx .info {width: 100%;}
.busflxwrap .item.nonflx + .item.nonflx {margin-top: clamp(15px, calc( 20  / var(--inner) * 100vw ), 20px);}
.areabusinfo + .addrbx {margin-top: clamp(15px, calc( 24  / var(--inner) * 100vw ), 24px); margin-bottom: 0;}