@charset "utf-8";

/** 온라인문의 **/
.inquiry .inner {margin-bottom: 80px;}
.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:500; position:absolute; background:var(--base3); 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:8px 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(--base3); color:#fff; border:1px solid var(--base3);}
.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;}

/* 비밀게시판 팝업 */
.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 .write {padding:0px 0; border-top:2px solid #ccc; border-bottom:2px solid #ccc;}
.inquiry .write > div {display:grid; grid-template-columns:180px auto; padding:20px 30px 20px; background:#f9f9f9;}
.inquiry .write > div+div {border-top:1px solid #e5e5e5;}
.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 input, .inquiry .write div.inputWrap input {border:1px solid #ddd; font-size:16px; font-weight: 300; padding-left: 10px;}

.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(--base3); border-radius:2rem; 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:var(--base2); margin-top:10px; 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:150px; 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.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;}


/* ************************ 태블릿 이하(~1199) ************************ */
@media (max-width: 1249px) {
	
	
	/** 온라인문의 **/
	.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;}
	

}