/****** 공통 ******/
legend {position:absolute; left:-9999px;}


/****** 견적 문의 ******/
.contents .quote_form.horizon {height:auto; padding:130px 0 100px;}
.contents .quote_form.horizon .inner {display:flex; gap:100px; padding-top:120px;} 
.contents .quote_form.horizon .left {width:calc(50% - 100px);}
.contents .quote_form.horizon .left .sub-toptext {position:sticky; top:120px; height:auto;}
.contents .quote_form.horizon .right {width:50%; text-align:left;}
.contents .quote_form.horizon .sub-toptext {display:block;}
.quote_form.horizon .sub-toptext h1 {text-align:left; padding-top:100px; position:relative; font-size:96px;}
.quote_form.horizon .sub-toptext > p.sub-tit+p {margin-top:70px;}
.quote_form.horizon .sub-toptext > p.sub-tit .empha {font-size:96px;}
.quote_form.horizon .sub-toptext h1:before {content:""; display:block; width:50px; height:2px; background:#fff; position:absolute; top:0; left:0;}
.quote_form.horizon .sub-toptext > p {text-align:left;}
.quote_form.horizon .right form {background:#fff; border-radius:20px;}
.quote_form.horizon .writeWrap {padding:50px; display:flex; gap:40px; flex-direction:column; flex-wrap:wrap;}
.quote_form.horizon .writeWrap .form_bx {}
.quote_form.horizon .writeWrap .form_bx+.form_bx {margin:0;}
.quote_form.horizon .writeWrap .form_bx.full {width:100%;}

form.typeA .label {display:block; font-weight:400; padding-left:15px; position:relative; color:var(--base2); line-height:1.6; margin-bottom:5px;}
form.typeA .label:before {content:""; display:block; width:5px; height:5px; background:var(--base1); position:absolute; top:10px; left:0; border-radius:50%;}
form.typeA input::placeholder {color:#999;}
form.typeA input, form.typeA select, form.typeA textarea {width:100%; height:50px; padding:5px 10px; box-sizing:border-box; border:1px solid var(--border); border-radius:7px; box-sizing:border-box; font-weight:300;}

form.typeA textarea {min-height:200px;}
form.typeA select {padding:8px 40px 8px 10px; background-image: url(/assets/user/images/common/select_arrow.png);background-repeat:no-repeat; background-position:calc(100% - 10px) 50%; -moz-appearance:none; -webkit-appearance:none; appearance:none; clear:left !important; border-radius:7px;}
form.typeA .budget_inputwrap {position: relative; display: inline-block;}
form.typeA .budget_inputwrap input {padding-right:40px;}
form.typeA .budget_inputwrap .unit {position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#999; pointer-events:none; color:var(--gray1);}
form.typeA .triple_input {display:flex; gap:10px;}
form.typeA .triple_input>* {width:100px;}
form.typeA .double_input {display:grid; grid-template-columns:repeat(auto-fit, minmax(80px, 1fr)); gap:30px;}
.budget_st .budget_inputwrap+.budget_inputwrap {position:relative;}
.budget_st .budget_inputwrap+.budget_inputwrap:before {content:""; display:block; width:10px; height:2px; background:#000; position:absolute; top:50%; left:-20px; trnasform:translateY(-50%); }
form.typeA .form_bx+.form_bx {margin-top:20px;}
form.typeA .flex_tit {display:flex; align-items:center; flex-wrap:wrap; gap:0 10px; margin-bottom:5px;}
form.typeA .flex_tit span.small {font-size:14px; color:#000;}
form.typeA .flex_tit label {margin-bottom:0;}
form.typeA .flex_tit .small b {color:var(--base1); font-weight:500;}
form.typeA .autoCodeWrap {display:flex;}
form.typeA .autoCodeWrap .autoCode {height:50px; line-height:48px; padding:0 20px; background:var(--bg1); border-radius: 7px 0 0 7px; border:1px solid var(--border); border-right:0; box-sizing:border-box;}
form.typeA .autoCodeWrap .autoCode .f_red {font-weight:700; color:var(--base1);}
form.typeA .autoCodeWrap .autoCode+input {border-radius: 0 7px 7px 0; color:rgba(0,0,0,0.4);}
form.typeA .autoCodeWrap .autoCode+input::placeholder {color:#666;}
form.typeA .final_check {background:var(--bg1);}
form.typeA .ckwrap {display:flex; align-items:start;}
form.typeA .ckwrap .block {display:inline-block; cursor:pointer; margin:5px 12px 0 0; padding-left:25px; background:url(/assets/user/images/common/check.svg) no-repeat left 5px; background-size:17px;}
form.typeA .ckwrap p {font-size:18px; font-weight:300; cursor:pointer;}
form.typeA .ckwrap input[id="checkboxA"] {position:absolute; left:-9999999px;}
form.typeA .ckwrap input[type='checkbox']+label {cursor:pointer;}
form.typeA .ckwrap input[type='checkbox']:checked+label {background:url(/assets/user/images/common/check-on.svg) no-repeat left 5px; background-size:16px;}
form.typeA .ckwrap .block.on {display:inline-block; width:17px; height:17px; border:2px solid #314ba0; cursor:pointer; margin:6px 12px 0 0; background:url(/assets/user/images/contact/check-on.svg) no-repeat center / contain;}
form.typeA .final_check {padding:20px 50px; border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
form.typeA .final_check label:before {display:none;}
form.typeA .final_check .flex_bx {display:flex; gap:20px; justify-content:space-between; align-items:center;}
form.typeA .final_check button {background:#fff; padding:5px 15px; border-radius:2rem; border:1px solid var(--border); color:#000; font-size:14px;}
form.typeA .final_check .agreeWrap { margin-top:20px; padding:20px; box-sizing:border-box; padding:20px; background:#fff; border-radius:7px; display:none;}
form.typeA .final_check .agree_bx {background:#e5e5e5; border-radius:15px; box-sizing:border-box; height:100px; overflow-y:auto;}
form.typeA .final_check .agree_bx pre {background:#fff; padding:0px 20px;  box-sizing:border-box; font-family:'Pretendard' }

form.typeA [name ='tel2'], form.typeA [name ='tel3'] {text-align:center;}

form.typeA .w100px {width:100px;}
form.typeA .wAuto {width:auto !important;}

form.typeA .btnWrap {padding:50px; text-align:center;}
form.typeA .btnWrap .submit_btn {font-size:24px; background:var(--blue); border-radius:10px; color:#fff; font-weight:600; padding:15px 50px;}
form.typeA .btnWrap .submit_btn:hover {color:#fee400;}


/****** 견적 문의 현황 ******/
.customer .board_part {background:#fff; padding:110px 0 100px;}
.listWrap ul {display:flex; align-items:center; flex-wrap:wrap;}
.listWrap ul li {text-align:center; box-sizing: border-box;}
.listWrap ul.t-head {background:var(--bg1); border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
.listWrap .t-head li {color:#fff; font-weight:500; padding:30px 0; font-size:18px;} 
.listWrap .t-head li span {transform:var(--textRotate); display:inline-block; color:#000;}
.listWrap ul.t-body {border-bottom:1px solid #dfe3f4; background:#fff;}
.listWrap ul.t-body li {color:#000; line-height:1.2; padding:30px 10px; font-size:18px; }

.listWrap ul.t-body li.rowB a {}

.listWrap ul.t-body li a:hover {color:var(--base3);}
.listWrap ul.t-body li.rowD {overflow:hidden; white-space:normal; text-overflow:ellipsis; display:-webkit-box; /*-webkit-line-clamp:1;*/ -webkit-box-orient:vertical; word-break:keep-all; word-break:break-all; }


.listWrap ul.t-body li span.ing {color:var(--base3); font-weight:600;}
.listWrap ul.t-body li span.comp {color:var(--blue); font-weight:600;}

.customer .listWrap ul li.rowA {width:5%; min-width:150px;}
.customer .listWrap ul li.rowB {width:5%; min-width:150px;}
.customer .listWrap ul li.rowC {width:calc(100% - 750px);}
.customer .listWrap ul.t-body li.rowC {text-align:left; padding:30px 0;}
.customer .listWrap ul li.rowD {width:5%; min-width:150px;}
.customer .listWrap ul li.rowE {width:5%; min-width:150px;}
.customer .listWrap ul li.rowF {width:5%; min-width:150px;}

.customer .page_box {margin-top:50px;}

/****** 공지사항 ******/
.galleryWrap ul {display:grid; /*grid-template-columns:repeat(auto-fit, minmax(400px, 1fr));*/ grid-template-columns:repeat(4,1fr); gap:40px;}
.galleryWrap .img {overflow:hidden; border-radius:20px;}
.galleryWrap .img img {width:100%; aspect-ratio:1/1; object-fit:cover; transition:all 0.3s;}
.galleryWrap .txt {margin-top:20px;}
.galleryWrap .txt dt {font-size:24px; color:#000; overflow:hidden; white-space:normal; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical; line-height:1.2; letter-spacing:-0.3px; height:60px; transition:all 0.3s;}
.galleryWrap .txt dd {color:var(--gray1); margin-top:20px;}
.galleryWrap  li:hover .txt dt {color:var(--blue);}
.galleryWrap  li:hover img {transform:scale(1.05);}
/****** 공지사항 - 뷰페이지 ******/ 
.view-typeA { }
.view-typeA .titWrap {border-bottom:1px solid var(--border); padding-bottom:15px;}
.view-typeA .titWrap .tit {display:flex; justify-content:space-between; align-items:center;}
.view-typeA .titWrap .title {font-size:24px; font-weight:500; color:#000; transform:var(--textRotate); line-height:1.3; width:100%; /*width:calc(100% - 120px);*/}
.view-typeA .titWrap .tit span {display: inline-block; text-align:center; font-weight:800; transform:var(--textRotate); width:110px; line-height:50px; border-radius:2rem;box-sizing:border-box;}
.view-typeA .titWrap .tit span.taskNum {display:block;}
.view-typeA .titWrap .tit span.d-day {background: var(--green4) url(/assets/user/images/common/i-bell.png) no-repeat 20% 46% / 14px; color:#fff;padding-left:15px; font-size: 20px;}
.view-typeA .titWrap .tit span.preparing {background:var(--blue) url(/assets/user/images/common/i-clock.png) no-repeat 20% center / 16px; color:#fff; padding-left:15px;}
.view-typeA .titWrap .tit span.finish {border:1px solid #c6cde4; color:#8a95d2;}
.view-typeA .titWrap .info {display:flex; flex-wrap:wrap; gap:10px 50px; margin-top:10px;}
.view-typeA .titWrap .info li {position:relative; padding-left:15px; color:#666;}
.view-typeA .titWrap .info li:before {content:""; display:block; width:4px; height:4px; border-radius:50%; position:absolute; top:10px; left:4px; background:var(--base1);}
.view-typeA .file {display:flex; flex-wrap:wrap; gap:10px 40px; padding:15px;}
.view-typeA .file a {display:flex; gap:5px; align-items:center; color:#000; }
.view-typeA .file a:hover {color:var(--green4);}
.file span.filedown {display:inline-block; width:25px; height:25px;background: url(/assets/user/images/common/i-downloadB.png) no-repeat center center / 18px;  }
.file span.filename {overflow:hidden; white-space:normal; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; word-break:keep-all; word-break:break-all; width:calc(100% - 30px); font-size:16px;}
.view-typeA .detail {padding:30px 0; border-bottom:1px solid var(--border);}
.view-typeA .detail img {max-width:100%;}
.view-typeA .btnWrap {flex-direction:column; text-align:center;}
.view-typeA .btn {display:inline-block; font-size:16px; padding:17px 40px; line-height:1;border-radius:3rem; color:#fff!important; margin:20px 0; font-weight:600; border:2px solid #666; background:#666;}
.view-typeA .btn.blue {background:var(--blue); border:2px solid var(--blue);}
.view-typeA .btn.gray {background:var(--darkGray); border:2px solid var(--darkGray);}
.view-typeA .btn.gray:hover {color:var(--darkGray); background:#fff; color:var(--darkGray)!important;}
.view-typeA .btnWrap .prev-next {text-align:left; margin-top:20px;}
.view-typeA .btnWrap .prev-next a+a {margin-top:10px; padding-top:10px; border-top:1px solid var(--border);}
.view-typeA .btnWrap .prev-next dl {display:flex; align-items:center; gap:20px;}
.view-typeA .btnWrap .prev-next dt {display:flex; align-items:center; gap:10px; color:#666; font-weight: 600; transform: var(--textRotate); padding: 10px; line-height:1; background:var(--bg1); border:1px solid var(--border); width:70px; justify-content:center; border-radius:5px; color:#000;}
.view-typeA .btnWrap .prev-next dt span {display:inline-block; width:30px; height:30px; border:1px solid var(--border); border-radius:5px;}
.view-typeA .btnWrap .prev-next dd {color:#333; width:100%; overflow:hidden; white-space:normal; text-overflow:ellipsis; display:-webkit-inline-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; word-break:break-all; }
.view-typeA .btnWrap .prev-next dd {width:calc(100% - 90px);}
.view-typeA .btnWrap .prev-next a:hover dd {color:var(--blue);}
.customer .prev-next a {display:flex; justify-content:space-between; align-items:center;}



/* ************************ 태블릿 (~1249) ************************ */
@media screen and (max-width:1249px) {
/****** 견적 문의 ******/
.contents .quote_form.horizon {padding:130px 0 80px;}
.quote_form.horizon .sub-toptext h1 {font-size:60px; padding-top:60px;}
.quote_form.horizon .sub-toptext > p.sub-tit .empha {font-size:60px;}
.quote_form.horizon .sub-toptext > p.sub-tit+p {margin-top:50px;}
.contents .quote_form.horizon .inner {gap:80px;}
.contents .quote_form.horizon .left {width:calc(50% - 80px);}

/****** 견적 문의 현황 ******/
.customer .board_part {padding:80px 0 60px;}

.board_part .listWrap {border-top:1px solid var(--border);}

.listWrap ul.t-body li {padding:0;}
.listWrap ul li .mobile {color:#666;}
.customer .listWrap ul {row-gap:10px;}
.customer .listWrap ul li.rowA {width:100%; text-align:left;}
.customer .listWrap ul li.rowC {width:100%;}
.listWrap ul.t-body {padding:15px 20px;}
.customer .listWrap ul li.rowB {padding:0; text-align:left;}
.customer .listWrap ul.t-body li.rowC {padding:0;}
.customer .listWrap ul li.rowD, .customer .listWrap ul li.rowE, .customer .listWrap ul li.rowF {text-align:left;}

/****** 공지사항 ******/ 
.galleryWrap ul {gap:30px;}
.galleryWrap .txt dt {font-size:20px; height:50px;}
.galleryWrap .txt dd {margin-top:10px;}
}

/* ************************ 태블릿 (~991) ************************ */
@media screen and (max-width:991px) {
/****** 공통 ******/
.customer .board_part {padding:60px 0 50px;} 
	
/****** 견적 문의 ******/
.contents .quote_form.horizon {padding:100px 0 60px;}
.contents .quote_form.horizon .inner {flex-direction:column;}
form.typeA .btnWrap .submit_btn {font-size:20px; padding:12px 40px;}
.contents .quote_form.horizon .left {width:100%;}
.contents .quote_form.horizon .right {width:100%;}
.quote_form.horizon .sub-toptext h1 {font-size:45px; padding-top:40px;}
.quote_form.horizon .sub-toptext > p.sub-tit .empha {font-size:45px;}
.quote_form.horizon .sub-toptext > p.sub-tit+p {margin-top:30px;}
.quote_form.horizon .writeWrap {padding:30px;}
.contents .quote_form.horizon .inner {gap:50px;}
form.typeA .final_check {padding:20px 30px;}
form.typeA .btnWrap {padding:30px;}

/****** 견적 문의 현황 ******/
.customer .page_box {margin-top:40px;}

/****** 공지사항 ******/ 
.galleryWrap ul {grid-template-columns:repeat(2,1fr);} 

/****** 공지사항 - 뷰페이지 ******/ 
.view-typeA .btnWrap .prev-next {padding:20px 15px;}
}

/* ************************ 모바일 (~767) ************************ */
@media screen and (max-width:767px) {
	
/****** 견적 문의 ******/
.quote_form.horizon .sub-toptext h1 {font-size:30px; padding-top:30px;}
.quote_form.horizon .sub-toptext > p.sub-tit .empha {font-size:30px;}
.quote_form.horizon .sub-toptext > p.sub-tit+p {margin-top:20px;}
.contents .quote_form.horizon .inner {gap:40px;}
form.typeA input, form.typeA select, form.typeA textarea {height:45px;}
form.typeA .autoCodeWrap .autoCode {height:45px; line-height:43px;}
form.typeA .ckwrap .block {background: url(/assets/user/images/common/check.svg) no-repeat left 4px;}
form.typeA .form_bx+.form_bx {margin-top:15px;}
form.typeA textarea {min-height:150px;}
form.typeA .btnWrap .submit_btn {font-size:18px;}
form.typeA .final_check {padding:15px 30px;} 

/****** 견적 문의 현황 ******/
.customer .listWrap ul {row-gap:5px;}
.customer .page_box {margin-top:30px;}

/****** 공지사항 ******/ 
.galleryWrap .txt dt {font-size:18px; height:45px;}

/****** 공지사항 - 뷰페이지 ******/ 
.view-typeA .btnWrap .prev-next {margin-top:0;}
.customer .prev-next a {flex-direction:column; align-items:flex-start;}
.customer .prev-next a span {display:block; text-align:right; width:100%; font-size:15px;}
.view-typeA .btnWrap .prev-next dt {font-size:15px; width:40px;}
.view-typeA .btnWrap .prev-next dd {width:calc(100% - 60px);}
.view-typeA .titWrap h3.title {font-size:20px;}
}

/* ************************ 모바일 (~500) ************************ */
@media screen and (max-width:500px) { 
/****** 공통 ******/
.quote_form.horizon .writeWrap {padding:30px 20px;}
.customer .board_part {padding:50px 0 40px;}

/****** 견적 문의 ******/
form.typeA .final_check {padding:15px 20px;}
form.typeA .triple_input {gap:5px;}
form.typeA .final_check .agreeWrap {padding:10px; margin-top:10px;}
form.typeA .final_check .agree_bx pre {padding:0 10px;}

.listWrap ul.t-body {padding:20px 10px;}

/****** 공지사항  ******/
.galleryWrap .txt dt {font-size:16px; height:auto;}
.galleryWrap .txt dd {font-size:14px; margin-top:5px;}
.galleryWrap ul {gap:30px 20px;}

/****** 공지사항 - 뷰페이지 ******/
.view-typeA .btnWrap .prev-next dl {flex-direction:column; gap:10px; align-items:flex-start;}
.view-typeA .btnWrap .prev-next dd {width:100%;}
.view-typeA .btnWrap .prev-next dt {padding:8px;}
.view-typeA .btnWrap .prev-next {padding:15px;}
}