@charset "utf-8";
/* CSS Document */

/* reset */
@import url("https://cdn.jsdelivr.net/gh/moonspam/NanumBarunGothic@1.0/nanumbarungothicsubset.css");

html, body{width:100%; height:100%; font-family: 'NanumBarunGothic', sans-serif !important;}
body *{ box-sizing:border-box}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video{margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline}
ul,ol,li{list-style:none}
div{ box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
a,a:link,a:active,a:visited,a:hover{text-decoration:none;}
span,span:focus{outline:none;border:0;background:none;padding:0;margin:0}
blockquote, q{quotes:none}
blockquote:before, blockquote:after, q:before, q:after{content:'';content:none}
legend, caption span{position:absolute;left:-9999em;top:0;width:0.1%;height:0.1%;text-indent:-999em;overflow:hidden;visibility:hidden}
table{border-collapse:collapse;border-spacing:0}
input,select,textarea{-webkit-appearance:none;font-size:inherit;color:inherit;font-family: 'NanumBarunGothic', sans-serif !important;}
input[type="radio"]{-webkit-appearance:radio}
input[type="checkbox"]{-webkit-appearance:checkbox}
button{outline:0;border:none;border-radius:0;background:none}
a:focus,button:focus{outline:none}
h1, h2, h3, h4, h5, h6{font-weight:normal}
input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset;}
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none; margin:0}

.disN{ display:none !important}
.bgFix{ position:fixed; width:100%; overflow-y: scroll;}
#coverBG{position:fixed; width:100%; height:100%; left:0; top:0; background-color:rgba(0,0,0,0.7); z-index:101}

#toggle_menu, .toggle{ display:none}

header{ width:100%; padding:50px 0 30px; box-sizing:border-box}
header .center{ width:850px; margin:0 auto; overflow:hidden}
header .center:after{ content:""; display:block; clear:both}
header .center .logo{ float:left; width:167px}
header .center ul{ float:right; width:650px; margin-top:25px;}
header .center ul li{ width:19%; display:inline-block;}
header .center ul li a{ display:block; font-size:14px; color:#333; text-align:center}
header .center ul li a:hover{ color:#0a8281}

#wrap .center{ width:850px; margin:50px auto; overflow:hidden}
#wrap .center:after{ content:""; display:block; clear:both}
#wrap .center .nav{ float:left; width:170px;}
#wrap .center .nav li{ margin-bottom:30px;}
#wrap .center .nav li a{ display:block; overflow:hidden}
#wrap .center .nav li a:after{ content:""; display:block; clear:both}
#wrap .center .nav li a .nemo{ float:left; width:30px; height:30px; border:3px solid #0a8281; border-radius:2px;}
#wrap .center .nav li a.on .nemo{ background-color:#0a8281}
#wrap .center .nav li a .text{ float:left; width:110px; font-size:14px; color:#333; margin-left:15px; padding-top:8px; text-align:left}
#wrap .center .nav li a.on .text{color:#0a8281}
#wrap .center .nav_m{ display:none}
#wrap .center .mainArea{ float:left; width:620px; margin-left:60px;}
#wrap .center .mainArea .title{ width:100%; padding:8px 20px 6px; box-sizing:border-box; font-size:14px; color:#f2efdc; background-color:#0a8281;}

#wrap .center .mainArea .imgBox{ width:100%; padding:50px 30px; box-sizing:border-box; text-align:center}
#wrap .center .mainArea .imgBox img{ width:100%;}
#wrap .center .mainArea .imgBox .img_m{ display:none;}
#wrap .center .mainArea .textArea{ font-size:14px; color:#333; line-height:28px; padding:10px}
#wrap .center .mainArea .textArea .pc{ display:block}
#wrap .center .mainArea .processText{ width:100%; padding:50px 0 50px 10px; box-sizing:border-box;}
#wrap .center .mainArea .processText .text01{ font-size:14px;}
#wrap .center .mainArea .processText .text01-1{ font-size:13px; margin-top:40px; letter-spacing:-0.03em}
#wrap .center .mainArea .processText .text02{ font-size:14px; font-weight:bold; color:#007774; margin:50px 0 10px;}
#wrap .center .mainArea .processText .box{ width:100%; text-align:left; padding:30px 0 50px 20px; box-sizing:border-box}
#wrap .center .mainArea .processText .box .img{ display:inline-block; width:170px; height:105px}
#wrap .center .mainArea .processText .box .img img{ height:100%;}
#wrap .center .mainArea .processText .box ul{ display:inline-block; width:368px; margin-left:41px; vertical-align:top; padding-top:10px;}
#wrap .center .mainArea .processText .box ul li{ font-size:13px; color:#333; list-style:disc; margin-bottom:10px}
#wrap .center .mainArea .processText .newUl{ margin-top:40px; padding-left:30px}
#wrap .center .mainArea .processText .newUl li{font-size:13px; color:#333; list-style:disc; margin-bottom:10px; }

#wrap .center .mainArea .title ul{ overflow:hidden}
#wrap .center .mainArea .title ul:after{ content:""; display:block; clear:both}
#wrap .center .mainArea .title ul li{ float:left; margin-right:105px;}
#wrap .center .mainArea .title ul li a{ font-size:16px; color:#f2efdc;}
#wrap .center .mainArea .title ul li a.on{ color:#dabbaa;}
#wrap .center .mainArea .listArea{ overflow:hidden; padding-top:50px;}
#wrap .center .mainArea .listArea:after{ content:""; display:block; clear:both}
#wrap .center .mainArea .listArea li{ float:left; width:31%; margin-right:3.5%; margin-bottom:20px;}
#wrap .center .mainArea .listArea li:nth-child(3n){ margin-right:0;}
#wrap .center .mainArea .listArea li a{ display:block}
#wrap .center .mainArea .listArea li a .imgBox{ width:100%; height:240px; background-position:center; background-repeat:no-repeat; background-size:cover;}
#wrap .center .mainArea .listArea li a .text{ width:100%; font-size:14px; color:#333; text-align:center; padding:10px; box-sizing:border-box}
#wrap .center .mainArea .moreBtn{ display:block; width:250px; height:30px; line-height:30px; font-size:14px; color:#f2efdc; text-align:center; background-color:#0a8281; margin:10px auto 30px;}

#wrap .center .mainArea .tableArea{ width:100%; padding:20px 0; box-sizing:border-box}
#wrap .center .mainArea .tableArea ul{ width:100%; display:table}
#wrap .center .mainArea .tableArea ul li{padding:8px 0; font-size:14px;}
#wrap .center .mainArea .tableArea ul .thArea{ display:table-cell; width:149px; box-sizing:border-box; font-size:14px; font-weight:400; color:#333; text-align:left}
#wrap .center .mainArea .tableArea ul .tdArea{ display:table-cell;}
#wrap .center .mainArea .tableArea ul .tdArea input[type="radio"]{ display:none}
#wrap .center .mainArea .tableArea ul .tdArea input[type="radio"] + label{ display:inline-block; height:30px; border:3px solid #fff; box-sizing:border-box; font-size:12px; color:#333; vertical-align:middle; cursor:pointer}
#wrap .center .mainArea .tableArea ul .tdArea .radio01 + label{width:99px; margin-right:20px; padding:6px 10px; text-align:left;}
#wrap .center .mainArea .tableArea ul .tdArea .radio02 + label{width:46px; margin-right:4px; padding:6px 0; text-align:center;}
#wrap .center .mainArea .tableArea ul .tdArea input[type="radio"]:checked + label{ border-color:#dabbaa}
#wrap .center .mainArea .tableArea ul .tdArea .unit{ font-size:14px; color:#333; vertical-align:middle; margin-left:10px;}
#wrap .center .mainArea .tableArea ul .tdArea .text{ display:inline-block; width:15%; font-size:14px; color:#333; vertical-align:middle;}
#wrap .center .mainArea .tableArea ul .tdArea .inputBox01{ display:inline-block; width:100px; height:30px; border:3px solid #fff; margin-left:20px; vertical-align:middle}
#wrap .center .mainArea .tableArea ul .tdArea .inputBox02{ display:inline-block; width:400px; height:30px; border:3px solid #fff; vertical-align:middle; margin:3px 0}
#wrap .center .mainArea .tableArea ul .tdArea .inputBox03{ width:500px; height:30px; border:3px solid #fff; vertical-align:middle}
#wrap .center .mainArea .tableArea ul .tdArea .inputNum{ display:block; width:100%; height:100%; font-size:12px; color:#333; padding:0 10px; background-color:transparent; border:none; text-align:right; outline:none}
#wrap .center .mainArea .tableArea ul .tdArea .inputText{ display:block; width:100%; height:100%; font-size:12px; color:#333; padding:0 10px; background-color:transparent; border:none; text-align:left; outline:none}
#wrap .center .mainArea .checkBox{ margin-top:20px;}
#wrap .center .mainArea .checkBox input{ display:none}
#wrap .center .mainArea .checkBox input + label{ display:inline-block; width:30px; height:30px; line-height:30px; background-image:url(../img/check_off.png?1); background-position:0; background-repeat:no-repeat; background-size:30px 30px; cursor:pointer; vertical-align:middle}
#wrap .center .mainArea .checkBox input:checked + label{ background-image:url(../img/check_on.png?1);}
#wrap .center .mainArea .checkBox a{ font-size:14px; color:#333; margin-left:10px; vertical-align:middle}
#wrap .center .mainArea .submit{display:block; width:250px; height:30px; line-height:30px; font-size:14px; color:#f2efdc; text-align:center; background-color:#0a8281; margin:50px auto 0;}

footer{ margin-top:300px; padding-bottom:70px;}
footer .center{ position:relative; width:850px; margin:0 auto}
footer .textBox{ position:relative; width:400px; padding:5px 0 5px 30px;}
footer .textBox:before{ position:absolute; content:""; display:block; width:30px; height:100%; background-color:#dabbaa; left:0; top:0;}
footer .text01{}
footer .text01 span{ display:block; font-size:12px; font-weight:400 !important; color:#333 !important; text-align:left; margin:5px 10px;}
footer .text01 span:nth-child(3){ margin-bottom:30px;}
footer .text02{ font-size:12px; color:#333; padding-left:10px; text-align:left; margin-top:5px}
footer .copy{ color:#333; padding-left:10px; text-align:left; margin-top:5px}
footer .sns{ position:absolute; top:16px; right:0;}
footer .sns a{ display:block; margin:10px 0;}
footer .sns a img{ width:40px;}

#personal_info {display:none; position: fixed; top: 50%; left: 50%; width:800px; height:800px; margin-left:-400px; margin-top:-400px; background-color:#fff; z-index:1000000} 
#personal_info .pop-container {padding: 20px 0 20px 25px;}
#personal_info .xBtn { display:block; position:absolute; top:10px; right:10px}
#personal_info .xBtn img{ width:20px}
#personal_info .pop-conts .title{ text-align:center; margin:30px 0;}
#personal_info .pop-conts .title span{ display:inline-block; font-size:24px; font-weight:bold; color:#333; text-align:center; padding-bottom:5px; border-bottom:2px solid #333;}
#personal_info .pop-conts .subTitle{ font-size:14px; font-weight:bold; color:#333; margin-top:30px; margin-bottom:10px;}
#personal_info .pop-conts .textBox{ width:100%; height:658px; overflow-y:scroll; padding-right:10px}
#personal_info .pop-conts .text01{ font-size:12px; color:#333; line-height:24px;}
#personal_info .pop-conts .text02{ font-size:12px; color:#333; line-height:24px;}


@media(max-width:767px){
#wrap .center .nav, #wrap .center .mainArea .imgBox .img{ display:none !important}
#wrap .center .nav_m, #wrap .center .mainArea .imgBox .img_m{ display:block !important}

header{ padding:20px 0;}
header .center{ width:100%; text-align:center}
header .center .logo{ float:none; margin:0 auto}
header .center ul{ display:none}
#wrap .center{ width:100%; box-sizing:border-box}
#wrap .center .nav_m{ position:fixed; width:100%; left:0; bottom:0; display:table; background-color:#f2efdc; z-index:100}
#wrap .center .nav_m li{ display:table-cell; width:15%; text-align:center;}
#wrap .center .nav_m li a{ display:block; font-size:14px; color: #333; text-align:center; line-height:20px; padding:10px 0;}
#wrap .center .nav_m li a.on{ color:#fff; background-color:#dabbaa}
#wrap .center .mainArea{ float:none; width:100%; margin-left:0; box-sizing:border-box}
#wrap .center .mainArea .title{ color:#333; background-color:transparent; padding:0 0 0 10px;}
#wrap .center .mainArea .imgBox{ padding:50px 20px;}
#wrap .center .mainArea .textArea{ padding:10px 20px;}
#wrap .center .mainArea .textArea .pc{ display:inline-block;}
#wrap .center .mainArea .processText{ padding:50px 20px;}
#wrap .center .mainArea .processText .text01{}
#wrap .center .mainArea .processText .text01-1{line-height:20px;}
#wrap .center .mainArea .processText .text02{}
#wrap .center .mainArea .processText .box{ padding:30px 20px 50px}
#wrap .center .mainArea .processText .box .img{ display:block;}
#wrap .center .mainArea .processText .box ul{ display:block; width:100%; margin-left:0; margin-top:20px;}
#wrap .center .mainArea .processText .box ul li, #wrap .center .mainArea .processText .box ul div{ line-height:20px;}
#wrap .center .mainArea .processText .newUl{padding:0 20px}
#wrap .center .mainArea .processText .newUl li{}
#wrap .center .mainArea .tableArea ul{ display:block; padding:10px 20px; box-sizing:border-box}
#wrap .center .mainArea .tableArea ul li{ letter-spacing:-1px;}
#wrap .center .mainArea .tableArea ul .thArea{ display:block; width:100%; margin-top:10px}
#wrap .center .mainArea .tableArea ul .tdArea{ display:block; width:100%; margin-top:10px}
#wrap .center .mainArea .tableArea ul .tdArea .mNone{ display:none !important}
#wrap .center .mainArea .tableArea ul .tdArea input[type="radio"] + label{ margin-top:5px;}
#wrap .center .mainArea .tableArea ul .tdArea .text{ width:20%;}
#wrap .center .mainArea .tableArea ul .tdArea .inputBox01{ margin-top:6px;}
#wrap .center .mainArea .tableArea ul .tdArea .inputBox02{ width:80%;}
#wrap .center .mainArea .tableArea ul .tdArea .inputBox02:first-child{ width:100%;}
#wrap .center .mainArea .tableArea ul .tdArea .wd100{ width:100% !important}
#wrap .center .mainArea .tableArea ul .tdArea .inputBox03{ width:69%;}
#wrap .center .mainArea .checkBox{ margin-left:20px;}

footer{ width:100%;}
footer .textBox{ width:100%;}
footer .center{ width:100%;}
footer .sns{ position:static; width:190px; margin:10px auto;}
footer .sns a{ display:inline-block; margin:0 10px;}

#personal_info {width:320px; height:400px; margin-left:-160px; margin-top:-200px;} 
#personal_info .pop-container{ padding:10px}
#personal_info .pop-conts .title{ margin:20px 0}
#personal_info .pop-conts .textBox{ height:312px; padding:0}
#personal_info .pop-conts .title span{ font-size:18px}

/* 토글 메뉴 */
.toggle{ display:block !important; position:absolute; top:25px; left:25px; z-index:10}
.toggle img{ width:30px;}

#toggle_menu{ display:block !important; position:fixed; top:0; left:-300px; width:200px; height:100vh; max-height:100%; overflow:scroll; border:3px solid #dabbaa; padding:10px; box-sizing:border-box; background-color:#fff; transition:0.8s; z-index:1000;}
#toggle_menu.left0{ left:0 !important}
#toggle_menu .xBtn img{ width:25px;}
#toggle_menu ul{ margin-top:40px;}
#toggle_menu ul li{ margin-bottom:20px;}
#toggle_menu ul li a{ display:block; font-size:14px; color:#333;}
#toggle_menu .gotoReport{ display:block; width:100%; font-size:14px; color:#333; margin-top:50px;}
}

/* 견적 리스트 */
#estimate_list{ width:100%; padding:0 50px; box-sizing:border-box;}
#estimate_list .newBtn{display: block; width: 100%; height: 30px; line-height: 32px; font-size: 14px; color: #f2efdc; text-align: center; background-color: #0a8281;}
#estimate_list ul{ margin-top:10px;}
#estimate_list ul li{ width:100%; height:35px; line-height:35px; padding:0 15px; font-size:12px; color:#0a8281; border:1px solid #0a8281; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;margin-bottom:7px;}



/* 견적 서브페이지 */
#itemArea .stepTitle{ font-size:14px; color:#333; padding-left:10px;}
#itemArea .checkBox{ margin-top:30px; padding-left:20px;}
#itemArea .checkBox input{ display:none}
#itemArea .checkBox input + label{ display:inline-block; width:150px; height:30px; line-height:30px; background-image:url(../img/check_off.png?1); background-position:0; background-repeat:no-repeat; background-size:30px 30px; cursor:pointer; padding-left:50px; vertical-align:middle}
#itemArea .checkBox input:checked + label{ background-image:url(../img/check_on.png?1);}
#itemArea .tableArea{ width:100%; padding:20px 0; box-sizing:border-box}
#itemArea .tableArea ul{ width:100%; padding:10px 20px; box-sizing:border-box}
#itemArea .tableArea ul li{padding:8px 0;}
#itemArea .tableArea ul .defaultText{ font-size:13px; color:#0a8281; line-height:20px; letter-spacing:-1px; margin-top:5px}
#itemArea .tableArea ul .thArea{ width:100%; margin-top:10px; box-sizing:border-box; font-size:14px; font-weight:400; color:#333; text-align:left}
#itemArea .tableArea ul .tdArea{ width:100%; margin-top:10px; padding-left:10px; box-sizing:border-box}
#itemArea .tableArea ul .tdArea input[type="radio"]{ display:none}
#itemArea .tableArea ul .tdArea input[type="radio"] + label{ display:inline-block; height:30px; border:3px solid #fff; box-sizing:border-box; font-size:12px; color:#333; vertical-align:middle; cursor:pointer; margin-top:5px;}
#itemArea .tableArea ul .tdArea .radio01 + label{width:99px; margin-right:20px; padding:6px 10px; text-align:left;}
#itemArea .tableArea ul .tdArea .radio02 + label{width:46px; margin-right:4px; padding:6px 0; text-align:center;}
#itemArea .tableArea ul .tdArea input[type="radio"]:checked + label{ border-color:#dabbaa}
#itemArea .tableArea ul .tdArea .check01{ display:none}
#itemArea .tableArea ul .tdArea .check01 + label{ display:inline-block; width:99px; margin-right:20px; padding:6px 10px; text-align:left; height:30px; border:3px solid #fff; box-sizing:border-box; font-size:12px; color:#333; vertical-align:middle; cursor:pointer; margin-top:5px;}
#itemArea .tableArea ul .tdArea .check01:checked + label{ border-color:#dabbaa}
#itemArea .tableArea ul .tdArea .unit{ font-size:14px; color:#333; vertical-align:middle; margin-left:10px;}
#itemArea .tableArea ul .tdArea .text{ display:inline-block; width:28%; padding-left:10px; box-sizing:border-box; font-size:14px; color:#333; vertical-align:middle;}
#itemArea .tableArea ul .tdArea .text2{ display:inline-block; width:15%; padding-left:10px; box-sizing:border-box; font-size:14px; color:#333; vertical-align:middle;}
#itemArea .tableArea ul .tdArea .text3{ display:inline-block; padding-left:10px; font-size:14px; color:#333; vertical-align:middle; margin-right:30px;}
#itemArea .tableArea ul .tdArea .text4{ display:inline-block; font-size:14px; color:#333; vertical-align:middle;}
#itemArea .tableArea ul .tdArea .inputBox{ display:inline-block; width:100%; height:30px; border:3px solid #fff; vertical-align:middle; }
#itemArea .tableArea ul .tdArea .inputBox01{ display:inline-block; width:100px; height:30px; border:3px solid #fff; margin-left:20px; vertical-align:middle; margin-top:6px;}
#itemArea .tableArea ul .tdArea .inputBox02{ display:inline-block; width:72%; height:30px; border:3px solid #fff; vertical-align:middle; margin:3px 0}
#itemArea .tableArea ul .tdArea .inputBox03{ width:69%; height:30px; border:3px solid #fff; vertical-align:middle}
#itemArea .tableArea ul .tdArea .inputBox04{ display:inline-block; width:46px; height:30px; border:3px solid #fff; vertical-align:middle;}
#itemArea .tableArea ul .tdArea .inputBox05{ display:inline-block; width:20px; height:30px; vertical-align:middle;}
#itemArea .tableArea ul .tdArea .reborderColor{ border:3px solid #dabbaa !important;}
#itemArea .tableArea ul .tdArea .inputNum{ display:block; width:100%; height:100%; font-size:12px; color:#333; padding:0 10px; background-color:transparent; border:none; text-align:right; outline:none}
#itemArea .tableArea ul .tdArea .inputNum2{ display:block; width:100%; height:100%; font-size:14px; color:#333; padding:0; background-color:transparent; border:none; text-align:right; outline:none}
#itemArea .tableArea ul .tdArea .inputText{ display:block; width:100%; height:100%; font-size:12px; color:#333; padding:0 10px; background-color:transparent; border:none; text-align:left; outline:none}
#itemArea .tableArea ul .tdArea .textArea{ width:100%; height:100px; border:3px solid #fff;}
#itemArea .tableArea ul .tdArea .textArea textarea{ display:block; width:100%; height:100%; font-size:12px; color:#333; padding:10px; background-color:transparent; border:none; text-align:left; outline:none; resize:none}
#itemArea .tableArea ul .priceArea{display: block; width: 100%; height: 40px; line-height: 42px; font-size: 14px; color: #f2efdc; text-align: center; background-color: #dabbaa;}

/* 하단 이전다음 버튼 */
#bottom_btn{ overflow:hidden}
#bottom_btn:after{ content:""; display:block; clear:both}
#bottom_btn a{ background-color: #0a8281; width: 60px; height: 35px; line-height: 40px; color: #fff; font-size: 12px; padding: 0 10px; box-sizing: border-box;}
#bottom_btn a.prev{ float:left; text-align:left}
#bottom_btn a.next{ float:right; text-align:right}