@charset "utf-8";

/** 상담신청 **/
.consultWrap {display:grid; grid-template-columns:auto 900px;}
.consultWrap .leftZone h3 {position:relative; font-size:var(--fs60); padding:40px 0; margin-bottom:20px; color: #000;}
.consultWrap .leftZone h3:before {content:""; position:absolute; top:0; left:0; background:url(/images/common/topQuotes.svg) no-repeat; width:33px; height:22px;}
.consultWrap .leftZone h3:after {content:""; position:absolute; bottom:0; left:0; background:url(/images/common/bottomQuotes.svg) no-repeat; width:33px; height:22px;}
.consultWrap .leftZone h3 p {color:var(--base2);}
.consultWrap .leftZone span {font-weight:300; color: #666;}

.consultWrap .leftZone .callWrap {position: relative; margin-top:100px; font-size: var(--fs14); color: #000;}
.consultWrap .leftZone .callWrap:before {content: ""; width: 50px; height: 1px; background: #E5E5E5; position: absolute; left: 0; top: -50px;}
.consultWrap .leftZone .callWrap p {font-weight: 700; padding-top:50px; background: url(/images/common/simbol.png) no-repeat left top;}
.consultWrap .leftZone .callWrap span {font-weight: 700; padding-left: 15px; color: #000;}

.consultWrap .leftZone .btn_wrap a {display: inline-block; border: 1px solid #000; padding: 13px 35px; margin-top: 20px; transition: .5s; color: #000;}
.consultWrap .leftZone .btn_wrap a:hover {border: 1px solid var(--base2); color: #fff; background: var(--base2);}


/** 온라인문의 **/
.inquiry .inner {margin-bottom: 80px; padding-top: 20px;}
.inquiry .list_wrap {margin-top:20px;}
.inquiry .list_wrap .list {border-bottom:1px solid #ddd;}
.inquiry .list_wrap .list * {font-size:16px;}
.inquiry .list_wrap .list .tit_wrap {display:flex; border-top:1px solid #ccc; border-bottom: 1px solid #ccc; background-color:#f9f9f9; color:#000; padding:15px 0;}
.inquiry .list_wrap .list .tit_wrap p {text-align:center;}
.inquiry .list_wrap .list .tit_wrap .num {width:7%; min-width:90px;}
.inquiry .list_wrap .list .tit_wrap .title {width:66%; min-width:300px;}
.inquiry .list_wrap .list .tit_wrap .writer {width:10%; min-width:120px;}
.inquiry .list_wrap .list .tit_wrap .date {width:10%; min-width:120px;}
.inquiry .list_wrap .list .tit_wrap .answer {width:7%; min-width:90px;}
.inquiry .list_wrap .list ul li {display:flex; padding:15px 0; text-align:center; border-bottom:1px solid #e6e7ef;}
.inquiry .list_wrap .list ul li:last-child {border-bottom:0;}
.inquiry .list_wrap .list ul .num {width:7%; min-width:90px;}
.inquiry .list_wrap .list ul .title {width:66%; color:#000; font-weight:500; text-align:left;padding:0 15px; min-width:300px; overflow:hidden; white-space:normal; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; word-break:break-all;transition:all 0.3s;}
.inquiry .list_wrap .list ul .title img {width:15px; height:15px; object-fit:contain; transform:translateY(-2px); margin-right:7px;}
.inquiry .list_wrap .list ul .writer {width:10%; color:#666; font-weight:500; min-width:120px;}
.inquiry .list_wrap .list ul .date {width:10%; min-width:120px;}
.inquiry .list_wrap .list ul .answer {width:7%; min-width:90px; position:relative;}
.inquiry .list_wrap .list ul .answer .wait {display:inline-block; position:absolute; border: 1px solid #ccc; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 5px 10px; font-size: 15px;}
.inquiry .list_wrap .list ul .answer .complete {display:inline-block; color:#fff; font-weight:400; position:absolute; background:var(--base2); left:50%; top:50%; transform:translate(-50%, -50%); padding:5px 10px; font-size:15px;}
.inquiry .list_wrap .btn_wrap {position:relative;}
.inquiry .list_wrap .btn_wrap a {display:inline-block; padding:14px 30px; border:1px solid #ccc;margin-top:30px; z-index:99; position:absolute; right:0; color:#000; font-weight:500;}
.inquiry .list_wrap .btn_wrap a:hover {background:var(--base2); color:#fff; border:1px solid var(--base2);}
.popup_lock {position:fixed; left:0; top:0; width:100%; height:100%; display:flex; justify-content:center; align-items:center; padding:2vw; background:rgba(0, 0, 0, .7); opacity:0; z-index:-1;}


/* 라디오버튼 */
.inquiry .radioGroup {display:flex;flex-wrap:wrap;gap:15px;align-items:center;}
.inquiry .radioGroup input[type="radio"] {position:absolute;opacity:0;width:0;height:0;}
.inquiry .radioGroup label {position:relative;display:flex;align-items:center;cursor:pointer;font-size:16px;color:#000;line-height:1;}
.inquiry .radioGroup label::before {content:"";flex-shrink:0;width:18px;height:18px;margin-right:8px;border:1px solid #ccc;border-radius:50%;background:#f4f4f4;transition:border-color .2s ease,background-color .2s ease;box-sizing:border-box;}
.inquiry .radioGroup input[type="radio"]:checked + label::before {border-color:#222;background-color:#fff;}
.inquiry .radioGroup input[type="radio"]:checked + label::after {content:"";position:absolute;left:9px;top:50%;width:8px;height:8px;background:url("/images/common/radiobtn.png") center/contain no-repeat;transform:translate(-50%,-50%);}
.inquiry .radioGroup input[type="radio"]:focus + label::before {outline:2px solid #0003;}


/* ui datepicker */
.ui-datepicker {display:none; background:#fff; margin-top:10px; border-radius:0px; padding:0 8px 8px; width:250px; box-shadow: 10px 10px 20px 0 rgba(0, 0, 0, 0.1);}
.ui-datepicker-header {position:relative; margin:0 -8px 6px; padding:5px 0; background:var(--base2); border-radius:0;}
.ui-datepicker-prev,
.ui-datepicker-next {position:absolute; width:32px; height:32px; top:50%; cursor:pointer; margin-top:-16px; border-radius:100%; overflow:hidden; text-indent:-999em; background-position:50% 50%; background-repeat:no-repeat;}
.ui-datepicker-prev {left:0; background-image:url("/images/common/datepicker_prev.png");}
.ui-datepicker-next {right:0; background-image:url("/images/common/datepicker_next.png");}
.ui-datepicker-title {text-align:center; color:#fff; font-size:18px; line-height:30px; font-weight:500;}
.ui-datepicker-title select {border:0; margin:2px; width:70px; height:30px; color:#000; font-size:15px; padding:0 10px 0 6px; vertical-align:middle;}
.ui-datepicker-calendar {width:100%; border-collapse:collapse; border-spacing:0px;}
.ui-datepicker-calendar th {padding:2px 0; text-align:center; font-size:14px; font-weight:500; line-height:30px; color:#222;}
.ui-datepicker-calendar td {padding:0; text-align:center; font-size:13px; font-weight:400; line-height:30px; color:#666;}
.ui-datepicker-calendar .ui-state-default {display:inline-block;width:30px;border-radius:4px;}
.ui-datepicker-calendar .ui-state-hover {background-color:#eee; color:#222;}
.ui-datepicker-calendar .ui-state-active {background-color:var(--base2); color:#fff;}
.ui-datepicker-other-month .ui-state-default {color:#ccc;}
.ui-datepicker-last {margin-left:-43px;}
.ui-datepicker-trigger {width:44px; height:44px; margin-left:-1px; background:url('/images/bbs/datepicker_icon.png') 50% 50% no-repeat; border:1px solid #aaa; vertical-align:middle; overflow:hidden; text-indent:-999em;}




/* 비밀게시판 팝업 */
.popup_lock.on {z-index:99999; opacity:1;}
.popup_lock .wrap {max-width:300px; width:100%; overflow:visible; height:auto; position:relative; background:#fff; padding:50px; text-align:center;}
.popup_lock .wrap h3 {font-size:20px; padding-bottom:0; margin-bottom:30px; color:#000; font-weight:500;}
.popup_lock .wrap input[type=password] {width: 100%; padding:0 10px; height:45px; line-height:43px; border:1px solid #ececec;}
.popup_lock .wrap .btns {margin-top:15px; display:flex; gap:10px;}
.popup_lock .wrap .btns button.into {background:#000; color:#fff; border:0;}
.popup_lock .wrap .btns button {background:#fff; text-align:center; border:1px solid #ddd; width:50%; padding:7px 10px;}

/** 온라인문의 뷰페이지 **/
.inquiry .view {border-top:1px solid #ccc; border-bottom:1px solid #ccc;}
.inquiry .view .tit {color:#000;}
.inquiry .view .tit .info {display:grid; grid-template-columns:repeat(2,1fr); border-bottom: 1px solid #ccc;} 
.inquiry .view .tit .info li {display:flex; align-items:center; border-bottom:1px solid #ccc;}
.inquiry .view .tit .info li.attach {grid-column:1/3;}
.inquiry .view .tit .info li.attach span {display:flex; gap:5px;}
.inquiry .view .tit .info li.attach span .btn_upload img {width:20px; height:19px; object-fit:contain; transform: translateY(-4px);}
.inquiry .view .tit .info li p {background:#ececec; padding:15px; width:120px; text-align:center; color:#000;}
.inquiry .view .tit .info li span {padding:15px;}
.inquiry .view .tit h3 {display:flex; align-items:center; border-top:1px solid #ccc; border-bottom:1px solid #ccc; font-weight:400; font-size:16px; line-height:1.6;}
.inquiry .view .tit h3 p {background:#ececec; padding:15px; width:120px; text-align:center; color:#000;}
.inquiry .view .tit h3 span {padding:15px;}
.inquiry .view .cont {padding:100px 0; color:#000; font-weight:400; /*white-space:pre-line;*/}
.inquiry .view .cont img {width:100%; }

.inquiry .view_answer {display:flex; padding:30px; background:#f6f6f6; border:1px solid #ececec; margin-top:50px;}
.inquiry .view_answer p {color:#000; font-size:18px; width:75px; white-space: nowrap;}
.inquiry .view_answer span {margin-top:3px; width:calc(100% - 80px); font-weight:400;}
.inquiry .viewBtn_wrap {width:100%; text-align:center; display: flex; justify-content: center; gap: 5px;}
.inquiry .viewBtn_wrap a {display:inline-block; padding:13px 50px; width:300px; background: #fff; transition:all 0.3s; text-align:center; color:#000; font-size:18px; margin-top:60px; border:1px solid #222;}
.inquiry .viewBtn_wrap button {display:inline-block; padding:13px 50px; width:300px; background:#fff; transition:all 0.3s; text-align:center; color:#000; font-size:18px; margin-top:60px; border:1px solid #222;}
.inquiry .viewBtn_wrap a:hover {background:#222; color:#fff;}
.inquiry .viewBtn_wrap button:hover {background:#222; color:#fff;}

.inquiry .titWrap {padding: 80px 16px 16px 40px !important; background: #fff !important; font-size: var(--fs28); font-weight: 700; border:0 !important; color: #000;}

.inquiry .pwdWrap div {display: flex;}

/** 게시판 댓글 디자인 추가 - 개발팀 */
.inquiry .list_normal [class*="reply"] {background-image:url(/img/common_responsive/icon_reply.png); background-repeat:no-repeat;}
.inquiry .list_normal .reply1 {padding-left:30px !important; background-position:10px 20px}
.inquiry .list_normal .reply2 {padding-left:45px !important; background-position:25px 20px}
.inquiry .list_normal .reply3 {padding-left:60px !important; background-position:40px 20px}
.inquiry .list_normal .reply4 {padding-left:75px !important; background-position:55px 20px}
.inquiry .list_normal .reply5 {padding-left:90px !important; background-position:70px 20px}
.inquiry .list_normal .reply6 {padding-left:105px !important; background-position:85px 20px}
.inquiry .list_normal .reply7 {padding-left:120px !important; background-position:100px 20px}
.inquiry .list_normal .reply8 {padding-left:135px !important; background-position:115px 20px}


/** 온라인문의 글쓰기페이지 **/
.inquiry .write {padding:0px 0; border-bottom:2px solid #ccc;}
.inquiry .write > div {display:grid; grid-template-columns:180px auto; padding:20px 30px 20px;}
.inquiry .write > div+div {border-bottom: 1px solid #eee;}
.inquiry .write > div p.tit {padding-top:7px; padding-left:15px; color:#000; position:relative; font-size:16px;}
.inquiry .write > div p.tit:before {content:""; display:block; position:absolute; width:4px; height:4px; background:var(--base3); left:0; top:17px;}
.inquiry .write > div input {height:40px; line-height:27px;}
.inquiry .write div.inputWrap textarea {width:100%; height:300px; resize:none; border:1px solid #ddd; padding:20px; font-size:16px; font-weight: 300;}
.inquiry .write div.inputWrap .url {width: 100%;}
.inquiry .write > div input, .inquiry .write div.inputWrap input {border:1px solid #ddd; font-size:16px; font-weight: 300; padding-left: 10px;}
.inquiry .inputWrap .spaceConfig {display: flex; gap: 30px;}
.inquiry .inputWrap .spaceConfig label {display: flex; align-items: center; gap: 10px; color: #000;}
.inquiry .inputWrap .spaceConfig label span {margin-left: -5px; font-size: var(--fs16); color: #666; margin-top: 10px;}
.inquiry .inputWrap .spaceConfig label input {width: 100px;}
.inquiry .inputWrap .dateWrap input { background: rgba(255, 255, 255, 0.5) url(/images/common/datepicker_icon.png) right 10px center no-repeat;}

.inquiry .write div.attachWrap .file_attach_box>div { display: flex;}
.inquiry .write div.attachWrap .file_attach_box .btn_upload { display: inline-block; text-align:center; padding:8px 20px; font-size: 14px; color: #fff; background: var(--base2); cursor:pointer; margin-right:5px; cursor: pointer;}
.inquiry .write .inputWrap.title input {width:50%;}
.inquiry .write .inputWrap.name input {max-width:400px}
.inquiry .write .inputWrap.email input {min-width:300px;}
.inquiry .write .inputWrap.phone input {max-width:150px;}
.inquiry .write .file_attach_box > div+div {margin-top:5px;}
.inquiry .write input[type=file]::file-selector-button {display:none;}
.inquiry .write .info {color:#999; margin-top:8px; margin-left: 15px; font-size: 16px;}
.inquiry .write .inputWrap.autoCodeWrap input[type=text] {max-width:200px; width:50%; margin-top:5px;}
.inquiry .write .inputWrap.autoCodeWrap > div {padding-top:4px;} 
.inquiry .agreeWrap {margin-top:50px;}
.inquiry .agreeWrap p.tit {font-size:18px; color:#000; font-weight:500; transform:rotate(0.03deg);}
.inquiry .agreeWrap > div {}
.inquiry .agreeWrap > div .info_box {background:#fff; border:1px solid #eee; padding:30px 30px; background:#f9f9f9; margin-top:20px;}
.inquiry .agreeWrap > div .info_box dl {height:116px; overflow-y:auto; font-weight:400; padding-right:10px; color:#222;}
.inquiry .agreeWrap > div .info_box dl dt {font-weight:500; transform:rotate(0.03deg);}
.inquiry .agreeWrap > div .info_box dl dt+dd {margin-top:5px;}
.inquiry .agreeWrap > div .info_box dl dd+dt {margin-top:20px;}
.inquiry .agreeWrap > div .ckwrap {margin-top:20px; float:right; font-weight:400; color:#000;}
.inquiry .agreeWrap > div .ckwrap input[type='checkbox'] {position:absolute; left: -999999999999px;}
.inquiry .agreeWrap > div .ckwrap input[type='checkbox']+label { padding:4px 40px; padding-left:25px; background:url(/images/common/check-mark.svg) left 5px no-repeat; cursor:pointer;}
.inquiry .agreeWrap > div .ckwrap input[type='checkbox']:checked+label {background-image:url(/images/common/check-mark-on-b.svg);}
.inquiry .agreeWrap > div .info_box dl::-webkit-scrollbar {width:8px;}
.inquiry .agreeWrap > div .info_box dl::-webkit-scrollbar-track {background-color:none;}
.inquiry .agreeWrap > div .info_box dl::-webkit-scrollbar-thumb {background-color:#666; border-radius:5px;}




@media (max-width: 640px) {
	.input.datepicker {background-image:url("../images/bbs/datepicker_icon_x2.png"); background-size:22px auto;}

	.ui-datepicker-prev,
	.ui-datepicker-next {background-size:8px auto;}
	.ui-datepicker-prev {background-image:url("../images/common/datepicker_prev_x2.png");}
	.ui-datepicker-next {background-image:url("../images/common/datepicker_next_x2.png");}
	.ui-datepicker-trigger {width:38px; height:38px;}
}





/* ************************ 태블릿 이하(~1199) ************************ */
@media (max-width: 1249px) {
	

    .consultWrap {display: block;}
	
	/** 온라인문의 **/
	.inquiry .search_wrap {margin-top:0;}
	.inquiry .list_wrap .list * {font-size:15px;}
	.inquiry .list_wrap .list ul li {display:block; padding:15px 0; text-align:left; position:relative;}
	.inquiry .list_wrap .list ul .num {width:100%; text-align:left; font-size:15px;}
	.inquiry .list_wrap .list ul .title {width:100%; padding:0; margin:0 0 10px; padding-left:0; padding-right:90px;  -webkit-line-clamp:2;}
	.inquiry .list_wrap .list ul .writer {min-width:80px; font-size:15px;}
	.inquiry .list_wrap .list ul .date {min-width:100px; font-size:15px; font-weight:300; margin-top:5px;}
	.inquiry .list_wrap .list ul .answer {position: absolute; right:0px; top:15px; text-align:right;}
	.inquiry .list_wrap .list ul .answer .wait {position:static; transform:translate(0,0); font-size:15px; padding:3px 10px;}
	.inquiry .list_wrap .list ul .answer .complete {position:static; transform:translate(0,0); font-size:15px;}
	
	/** 온라인문의 뷰페이지 **/
	.inquiry .view .tit .info {grid-template-columns:repeat(1,1fr);}
	.inquiry .view .tit .info li.attach {grid-column:auto;}
	.inquiry .viewBtn_wrap a {font-size:16px;}
	.inquiry .view .cont {padding:60px 0;}
	.mobile select#page {line-height:1;}
	
	/** 온라인문의 글쓰기페이지 **/
	.inquiry .write > div {grid-template-columns:auto; gap:10px;}
	.inquiry .write .inputWrap.title input {width:100%; max-width:500px;}
	.inquiry .write .inputWrap.phone span {display:flex; align-items:center; gap:10px;}
	.inquiry .write .inputWrap.phone input {width:30%;}
	.inquiry .viewBtn_wrap a {display:inline-block; padding:11px 20px; width:150px; background:#fff; transition:all 0.3s; text-align:center; color:#000; font-size:16px; margin-top: 60px; border:1px solid #222; }
	.inquiry .viewBtn_wrap button {display:inline-block; padding: 11px 20px; width:150px; background:#fff; transition:all 0.3s; text-align:center; color:#000; font-size: 16px; margin-top:60px; border:1px solid #222;}
	.inquiry .viewBtn_wrap a:hover {background:#222; color:#fff;}
	.inquiry .viewBtn_wrap button:hover {background:#222; color:#fff;}
	.inquiry .write .inputWrap.autoCodeWrap > div {padding-top:0px;}
	



}





/* ************************ 모바일 ************************ */
@media (max-width: 767px) {

	/** 온라인문의 **/
	.inquiry .list_wrap {margin-top:30px;}
	.inquiry .search_wrap form > div {flex-wrap:wrap;}
	.inquiry .search_wrap form select {width:100%; min-width:auto;}
	.inquiry .search_wrap form input {width: calc(100% - 67px); border-left:1px solid #ddd; border-top:0;}
	.inquiry .list_wrap .btn_wrap a {padding:8px 20px; font-size:15px; margin-top: 20px;}
	.inquiry .view_answer {flex-direction:column; gap:10px; padding:20px; }
	.inquiry .view_answer p {font-size:16px; width: 55px;}
	.inquiry .view_answer span {margin-top:0; width:100%; font-size:15px;}
	
	
	.inquiry .view .tit h3 {font-size:15px;}
	.inquiry .view .tit .info li.attach span .btn_upload img {height:13px;}
	.inquiry .view .cont {padding:40px 0; }
	.inquiry .view .tit .info li p {padding:12px;}
	.inquiry .view .tit .info li span {padding:12px;}
	.inquiry .view .tit h3 p {padding:12px;}
	.inquiry .view .tit h3 span {padding:12px;}
	.inquiry .viewBtn_wrap a {margin-top:40px;}
	
	.inquiry .write > div {padding: 20px 20px 20px;}
	.inquiry .write .inputWrap.email input {min-width:auto; width:100%;} 
	.inquiry .viewBtn_wrap a {display:inline-block; padding:8px 20px; width:130px; background: #fff; transition:all 0.3s; text-align:center; color:#000; font-size:15px; margin-top:40px; border:1px solid #222;}
	.inquiry .viewBtn_wrap button {display:inline-block; padding:8px 20px; width:130px; background:#fff; transition:all 0.3s; text-align:center; color:#000; font-size:15px; margin-top:40px; border:1px solid #222;}
	.inquiry .viewBtn_wrap a:hover {background:#222; color:#fff;}
	.inquiry .viewBtn_wrap button:hover {background:#222; color:#fff;}
	.inquiry .agreeWrap > div .ckwrap input[type='checkbox']+label {padding:5px 20px 5px 40px; padding-left:25px;}
	
	.inquiry .list_wrap .list ul .title {align-items: flex-start;}
	
	
	.inquiry .page_box {margin-top:80px;}

    .inquiry .pwdWrap div {flex-direction: column;}
    .inquiry .write div.attachWrap .file_attach_box>div {flex-direction: column;}
    .inquiry .write > div p.tit {padding-left: 0;}

    .inquiry .write > div {padding-left: 0;}
    .inquiry .titWrap {padding-left: 0 !important; padding-top: 30px !important; padding-bottom: 0px !important;}
    .inquiry .inputWrap .spaceConfig {flex-direction: column; gap: 10px;}
    .inquiry .inner {padding-top: 60px; margin-bottom: 0;}

    .inquiry .firstAgree{margin-top: 0;}
	

}