@charset "utf-8";
@font-face { font-family:'S-CoreDream-4Regular'; src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-4Regular.woff') format('woff'); font-weight:normal; font-style:normal; }
@font-face { font-family:'S-CoreDream-5Medium'; src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-5Medium.woff') format('woff'); font-weight:normal; font-style:normal; }
@font-face { font-family:'S-CoreDream-6Bold'; src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-6Bold.woff') format('woff'); font-weight:normal; font-style:normal; }
@font-face { font-family:'Cafe24Dangdanghae'; src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.2/Cafe24Dangdanghae.woff') format('woff'); font-weight:normal; font-style:normal; }

/* 초기화 */
html, body,
div, span,
dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6,
p, address,
form, fieldset, legend, input, select, textarea,
table, caption, col, colgroup, thead, tfoot, tbody, th, td{margin:0; padding:0;}
h1, h2, h3, h4, h5, h6{font-size:100%; font-weight:normal;}
html, fieldset, img, abbr, acronym{border:0 none;}
ol, ul, li, dl, dt, dd{list-style:none;}
table{border-collapse:collapse; border-spacing:0;}
caption, th, td{font-weight:normal;}
address, caption, em{font-weight:normal; font-style:normal;}
caption{display:none;}
legend{display:none;}
html{background:#f1f1f1;}
body{min-width:320px; margin:0; padding:40px; font-size:14px; font-family:"S-CoreDream-4Regular",sans-serif; overflow-x:hidden; background:#f1f1f1 !important;}
textarea, select{font-size:12px; font-family:"S-CoreDream-4Regular",sans-serif;}
select{height:24px; margin:0; padding:2px; border:1px solid #d7d7d7; font-family:"S-CoreDream-4Regular",sans-serif; background:#fff;}
p{margin:0; padding:0; word-break:keep-all; word-wrap:break-word;}
div{word-break:keep-all; word-wrap:break-word;}
hr{display:none;}
pre{overflow-x:scroll; font-size:1.1em;}
a{color:#222; text-decoration:none;}
button{cursor:pointer;}
iframe{max-width:100%;}
*, :after, :before{-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}

.dn{display:none;}

.w100{width:100px !important;}
.w150{width:208px !important;}

.mT5{margin-top:5px;}
.mT30{margin-top:30px;}
.mT50{margin-top:50px;}

.blind{font-size:0; left:-1000em; line-height:0; position:absolute;}

.contract-wrap{width:100%; max-width:1000px; margin:0 auto; padding:70px; border:1px solid #ddd; background:#fff; position:relative;}
.contract-wrap .title-box{height:40px; font-family:'S-CoreDream-6Bold'; font-size:25px; text-align:center;}
.contract-wrap .title-box span{padding-bottom:5px; border-bottom:1px solid #777;}
.contract-wrap .stitle-box{padding-top:10px; padding-bottom:20px; font-family:'S-CoreDream-4Regular'; font-size:16px; text-align:center; color:#777;}
.contract-wrap .part-box{padding-top:25px;}
.contract-wrap .part-box .in-title-box{padding-bottom:10px; font-family:'S-CoreDream-5Medium'; font-size:16px;}
.contract-wrap .part-box table{width:100%;}
.contract-wrap .part-box table th{padding:10px 15px; border:1px solid #d7d7d7; background:#f7f7f7;}
.contract-wrap .part-box table td{padding:10px 15px; line-height:30px; border:1px solid #d7d7d7;}
.contract-wrap .part-box table td .btn-zip{width:80px; height:32px; font-size:12px; text-align:center; color:#fff; background:#777; display:inline-block; vertical-align:top;}
.contract-wrap .part-box .input-box{width:100%; padding:0 10px; border:1px solid #ddd; outline:none;}
.contract-wrap .part-box .date{font-family:'S-CoreDream-5Medium'; font-size:20px; text-align:center;}
.contract-wrap .part-box .name{font-family:'S-CoreDream-4Regular'; font-size:16px; text-align:right;}
.contract-wrap .part-box .name span{padding-left:10px; font-family:'S-CoreDream-6Bold'; font-size:25px;}

@media all and (max-width:980px) {
	body{padding:20px;}
	.contract-wrap{padding:50px;}
}

@media all and (max-width:880px) {
	.contract-wrap{padding:30px;}
}

@media all and (max-width:800px) {
	body{padding:0;}
	.contract-wrap{border:0;}
}

@media all and (max-width:780px) {
	.contract-wrap .part-box table th,
	.contract-wrap .part-box table td{padding:7px 10px; font-size:13px;}
}

@media all and (max-width:680px) {
	.contract-wrap .title-box{height:auto; font-size:22px;}
	.contract-wrap .stitle-box{padding-bottom:15px; font-size:14px;}
	.contract-wrap .part-box{padding-top:20px;}
	.contract-wrap .part-box .in-title-box{padding-bottom:7px; font-size:14px;}
	.contract-wrap .part-box table th{width:20%;}
	.contract-wrap .part-box table th,
	.contract-wrap .part-box table td{padding:5px 7px; font-size:12px;}
}

@media all and (max-width:580px) {
	.contract-wrap{padding:20px;}
	.contract-wrap .title-box{padding-bottom:5px; font-size:20px;}
}

@media all and (max-width:500px) {
	.contract-wrap .title-box{font-size:18px;}
	.contract-wrap .part-box table th{font-family:'S-CoreDream-5Medium'; font-size:14px; background:none;}
	.contract-wrap .part-box table th,
	.contract-wrap .part-box table td{width:100%; padding:15px 5px; border:0; display:block;}
	.contract-wrap .part-box table th{padding-bottom:2px;}
	.contract-wrap .part-box table td{padding-top:2px; border-bottom:1px dashed #ddd;}
	.contract-wrap .part-box table{border-top:1px solid #d7d7d7;}
}

.contract-wrap .part-box .agree-wrap{}
.contract-wrap .part-box .agree-wrap .agree-box{padding:15px 20px; border-bottom:1px solid #ddd; position:relative;}
.contract-wrap .part-box .agree-wrap .agree-box:first-child{border-top:1px solid #ddd;}
.contract-wrap .part-box .agree-wrap .agree-box a{top:13px; right:20px; padding:3px 5px; font-size:12px; color:#777; border:1px solid #ddd; background:#f7f7f7; display:inline-block; position:absolute;}
.contract-wrap .part-box .agree-wrap .agree-txt-box{margin-top:15px; padding:15px; border:5px solid #ddd;}
.contract-wrap .part-box .agree-wrap .agree-txt-box table{}
.contract-wrap .part-box .agree-wrap .agree-txt-box table th{padding:10px; font-size:13px; text-align:center;}
.contract-wrap .part-box .agree-wrap .agree-txt-box table td{padding:10px; font-size:13px; line-height:18px; text-align:center;}
.contract-wrap .part-box .agree-wrap .agree-txt-ul{margin-top:10px; line-height:25px;}
.contract-wrap .part-box .agree-wrap .agree-txt-ul ul{}
.contract-wrap .part-box .agree-wrap .agree-txt-ul ul li{font-size:13px; line-height:22px;}

@media all and (max-width:680px) {
	.contract-wrap .part-box .agree-wrap .agree-txt-box{margin-top:15px; padding:10px;}
	.contract-wrap .part-box .agree-wrap .agree-txt-box table th{padding:7px; font-size:12px;}
	.contract-wrap .part-box .agree-wrap .agree-txt-box table td{padding:7px; font-size:12px;}
	.contract-wrap .part-box .agree-wrap .agree-txt-ul{margin-top:10px; line-height:25px;}
	.contract-wrap .part-box .agree-wrap .agree-txt-ul ul li{font-size:12px;}
	.contract-wrap .part-box .agree-wrap .agree-box label{font-size:12px;}
}

.contract-wrap .part-box .agree-wrap .agree-txt1{margin-bottom:10px; line-height:25px;}
.contract-wrap .part-box .agree-wrap .agree-txt1 span{min-width:120px; border-bottom:1px solid #ddd; display:inline-block;}
.contract-wrap .part-box .agree-wrap .agree-txt2{padding:10px 0; font-size:13px; line-height:25px; color:#777;}
.contract-wrap .part-box .agree-wrap .agree-txt2 h3{font-size:14px; color:#000;}
.contract-wrap .part-box .agree-wrap .agree-txt2 div{padding:3px 0;}
.contract-wrap .submit-btn{width:100%; max-width:1000px; height:1px; left:50%; bottom:40px; -ms-transform:translateX(-50%); -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); transform:translateX(-50%); position:fixed;}
.contract-wrap .submit-btn input{width:150px; height:70px; margin-top:-70px; margin-right:-170px; color:#fff; border:0; float:right; background:#000;}
.contract-wrap .submit-btn input.nnn{color:#fff; background:#999;}

@media all and (max-width:1360px) {
	.contract-wrap .submit-btn{max-width:100%; height:auto; left:auto; bottom:auto; -ms-transform:none; -webkit-transform:none; -moz-transform:none; transform:none; margin-top:20px; text-align:center; position:relative;}
	.contract-wrap .submit-btn input{width:100%; max-width:350px; height:70px; margin-top:0; margin-right:0; font-size:20px; border-radius:4px; float:none; background:#ff4545;}
}

@media all and (max-width:680px) {
	.contract-wrap .part-box .agree-wrap .agree-box{padding:12px 15px;}
	.contract-wrap .part-box .agree-wrap .agree-txt2 h3{font-size:12px; color:#000;}
	.contract-wrap .submit-btn input{height:50px; font-size:18px;}
}

@media all and (max-width:580px) {
	.contract-wrap .submit-btn input{max-width:100%; height:50px; font-size:16px;}
}

.contract-wrap .cbanner-box{padding:0 15px; display:none; text-align:center; background:url("../img/cbanner_bg") no-repeat center center; background-size:cover; position:relative;}
.contract-wrap .cbanner-box img{max-width:100%;}
.contract-wrap .cbanner-box .ww1{display:block;}
.contract-wrap .cbanner-box .ww2{display:none;}

.contract-wrap .p-img{width:100%; max-width:1000px; height:1px; left:50%; top:40px; -ms-transform:translateX(-50%); -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); transform:translateX(-50%); position:fixed;}
.contract-wrap .p-img a{width:338px; margin-right:-360px; display:block; float:right;}
.contract-wrap .p-img a img{max-width:100%;}

@media all and (max-width:1740px) {
	.contract-wrap .p-img a{width:300px; margin-right:-320px;}
}

@media all and (max-width:1660px) {
	.contract-wrap .p-img a{width:250px; margin-right:-270px;}
}

@media all and (max-width:1580px) {
	.contract-wrap .cbanner-box{display:block;}
	.contract-wrap .p-img{display:none;}
}

@media all and (max-width:500px) {
	.contract-wrap .cbanner-box{padding:20px;}
	.contract-wrap .cbanner-box img{width:80%; margin:0 auto;}
	.contract-wrap .cbanner-box .ww1{display:none;}
	.contract-wrap .cbanner-box .ww2{display:block;}
}


.signature-pad{width:100%; max-width:300px; height:200px; font-size:10px; background-color:#fff; position:relative; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column;}
.signature-pad--body{-webkit-box-flex:1; -ms-flex:1; flex:1; position: relative;}
.signature-pad--body canvas{width:100%; height:100%; top:0; left:0; border:1px solid #d7d7d7; position:absolute;}

.signature-pad--footer{margin-top:8px; font-size:14px; text-align:center; color:#777;}

.signature-pad--actions{margin-top:8px; text-align:center;}
.signature-pad--actions button{width:110px; padding:5px 10px; font-size:14px; color:#fff; border:0; background:#222; display:inline-block;}

@media all and (max-width:680px) {
	.signature-pad--actions button{padding:3px 7px; font-size:12px;}
}

@media all and (max-width:680px) {
	.signature-pad{margin:0 auto;}
}