@charset "UTF-8";

/* Urban Process Popup // wrapper */
.urbanProcessPop{height: 100%;}
.urbanProcessPop>.titPnl+.row{height: calc(100% - 55px);}
.dtlPages{border-left: 9px solid #F2F2F2; padding-top: 15px; padding-bottom: 15px;}
.dtlPages:before{left: -10px;}
.dtlPages>[data-page]{display: none;}
.dtlPages>[data-page] h5.tit3{margin-bottom: 17px;}
.dtlPages>[data-page] .qnaGrp .telInfo{color: #000; text-align: right; position: absolute; top: -48px; right: 6px;}
.dtlPages>[data-page^="2"] .stepGrp .row{min-height: 150px;}
.dtlPages>[data-page^="2"] .stepGrp .row .stepDtl{padding-left: 30px;}
.dtlPages>[data-page^="6"] .stepGrp .row{min-height: 90px;}
.dep2DtlPages{display: none;}

/* Urban Process Popup // Chapter Area */
.urbanProcessPop .chapterList>.item .dep2List>.item.active:after{width: calc(100% + 44px); left: -44px;}

/* Urban Q&A Popup // detail area */
.titImg{width: 100%; height: 100px; background: url("../../static/image/mainPop/top_img.jpg") no-repeat center;}
.qnaGrp{background: url("../../static/image/mainPop/qnaBgPttn.png") repeat 0 0; border-radius: 7px; margin-top: 47px; position: relative;}
.qnaGrp div[data-qna]{height: calc(100% - 85px); background: #FFF; border-radius: inherit; margin: 70px auto 15px; padding: 4px 12px; display: none;}
.qnaGrp div[data-qna]:before{content: ""; width: 85px; height: 38px; background: url("../../static/image/mainPop/qnaTitMark.png") no-repeat 0 0; display: inline-block; position: absolute; top: 16px; left: 16px;}
.qnaGrp div[data-qna] .qnaTit{color: #00BCD4; font-size: 18px; font-weight: 700; margin-left: 2px; margin-bottom: 8px;}
.qnaGrp div[data-qna] .qnaTit:before{}
.qnaGrp div[data-qna] .qust, .qnaGrp div[data-qna] .ans{text-indent: -18px; margin-left: 20px;}
.qnaGrp div[data-qna] p:not(.qust):not(.ans){margin-left: 20px;}
.qnaGrp div[data-qna] p+.qust{margin-top: 12px;}
.qnaGrp div[data-qna] p, .qnaGrp div[data-qna] ul li{line-height: 24px;}
.qnaGrp div[data-qna] ul{margin-top: 4px;}
.qnaGrp div[data-qna] .imgCont{line-height: 24px; margin: 12px 20px 0;}
.qnaGrp div[data-qna] .imgCont>figcaption{color: transparent; font-size: 0; line-height: 0;}
.qnaGrp div[data-qna] .imgCont>img{width: auto; max-width: 100%;}
.qnaGrp div[data-qna] .qust{color: #333; font-weight: 500;}
.qnaGrp div[data-qna] .ans{color: #666; font-weight: 400; margin-top: 3px;}
.qnaGrp div[data-qna] .ans a{vertical-align: middle; margin-left: 26px;}
.qnaGrp div[data-qna] .qust:before, .qnaGrp div[data-qna] .ans:before{font-weight: bold; margin-right: 7px;}
.qnaGrp div[data-qna] .qust:before{content: "Q"; color: #CDDC39;}
.qnaGrp div[data-qna] .ans:before{content: "A"; color: #FF9800; font-size: 16px; margin-left: 1px;}