/* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ 해당 스타일은 샘플사이트 반응형을 위해 넣어둔 스타일이며, 적용시 삭제 해주시기 바랍니다. */ #hd, #ft { display:none; } #wrapper { width:100%; min-width:100%; } #container_wr { width:100%; max-width:1200px; } /* //////////////////////////////////////////////// */ .form_skin_side .agree_box { box-sizing:border-box; margin-top: 0 !important; height:100%; } .form_skin_side .agree_box textarea { border: 0 !important; box-shadow:0 0 0 0 !important; resize:none; width:100%; height:100%; box-sizing:border-box; } .fancybox-content { width: 800px; height: 600px; max-width: 90%; max-height: 90%; margin: 0; } .form_skin_side .form_type { width:100%; max-width:1000px; box-sizing:border-box; } .form_skin_side .form_type .write_form { padding: 0; box-sizing:border-box; background:#fff; } .form_skin_side .form_type .write_form ul { } .form_skin_side .form_type .write_form ul li { padding-top: 20px; box-sizing:border-box; display:flex; align-items:center; text-align:left; } .form_skin_side .form_type .write_form ul li:first-child { padding-top: 0; } .form_skin_side .form_type .write_form ul li .tit, .form_skin_side .form_type .write_form ul li .inputBox { flex-shrink:0; } .form_skin_side .form_type .write_form ul li .tit { font-size:16px; color:#999; font-weight: 600; width:100px; margin-bottom: 0;text-align:left !important; } .form_skin_side .form_type .write_form ul li .inputBox { display:flex; align-items:center; flex-wrap:wrap; box-sizing:border-box; font-size:14px; width:calc(100% - 100px); } .form_skin_side .form_type .write_form ul li .inputBox span[id^="span"] { flex:1; margin-right: 10px; } .form_skin_side .form_type .write_form ul li .inputBox span[id^="span"]:last-child { margin-right: 0; } .form_skin_side .form_type .write_form ul li .inputBox input[type="text"], .form_skin_side .form_type .write_form ul li .inputBox input[type="password"], .form_skin_side .form_type .write_form ul li .inputBox input[type="date"], .form_skin_side .form_type .write_form ul li .inputBox input[type="number"], .form_skin_side .form_type .write_form ul li .inputBox textarea, .form_skin_side .form_type .write_form ul li .inputBox select { border: 1px solid #dadada; box-sizing:border-box; resize:none; height:40px; width:100%; padding-left: 10px; padding-right: 10px; background:#fff; text-align: left !important; } .form_skin_side .form_type .write_form ul li .inputBox input[type="button"] { height:40px; width:150px; background:#222; color:#fff; border: 0; border-radius:5px; cursor:pointer; border-bottom: 0 !important; } .form_skin_side .form_type .write_form ul li .inputBox input[type="file"] { border-bottom: 0 !important; } .form_skin_side .form_type .write_form ul li .inputBox textarea { padding-top: 10px; padding-bottom: 10px; height:100px; } .form_skin_side .form_type .write_form ul li .inputBox input[type="radio"], .form_skin_side .form_type .write_form ul li .inputBox input[type="checkbox"] { width:16px; height:16px; } .form_skin_side .form_type .write_form ul li .inputBox input:focus, .form_skin_side .form_type .write_form ul li .inputBox textarea:focus, .form_skin_side .form_type .write_form ul li .inputBox select:focus { background:#fff; box-shadow:0 0 0 0; outline: 0; border: 1px solid #aaa !important; } .form_skin_side .form_type .write_form ul li .inputBox input[type="button"]:focus { background:#222; } /* name */ /* .form_skin_side .form_type .write_form ul li .inputBox span[id^="span_"].name { max-width:200px; } */ /* chkeckBox, radio */ .form_skin_side .form_type .write_form ul li .inputBox span[id^="span_"].radio, .form_skin_side .form_type .write_form ul li .inputBox span[id^="span_"].checkbox { padding-left: 15px; width:auto; margin-top: 10px; width:25%; flex:none; margin-right: 0; } .form_skin_side .form_type .write_form ul li .inputBox input[id*="checkbox"], .form_skin_side .form_type .write_form ul li .inputBox input[id*="radio"] { vertical-align: middle; width:16px; height:16px; } /* chkeckBox, radio */ .form_skin_side .form_type .write_form ul li .inputBox span[id^="span_"].datepicker { max-width:200px; } /* select */ /* .form_skin_side .form_type .write_form ul li .inputBox span[id^="span_"].select { max-width:300px; } */ /* 년월일시 */ .form_skin_side .form_type .write_form ul li .inputBox span[id^="span_"].date, .form_skin_side .form_type .write_form ul li .inputBox span[id^="span_"].datetime, .form_skin_side .form_type .write_form ul li .inputBox span[id^="span_"].timehis { max-width:90px; margin-left: 10px; margin-right: 5px; } .form_skin_side .form_type .write_form ul li .inputBox span[id^="span_"].date select, .form_skin_side .form_type .write_form ul li .inputBox span[id^="span_"].datetime select, .form_skin_side .form_type .write_form ul li .inputBox span[id^="span_"].timehis select { width:calc(100% - 25px); margin-right: 5px; } /* 전화번호 */ .form_skin_side .form_type .write_form ul li .inputBox span[id^="span_"].tel, .form_skin_side .form_type .write_form ul li .inputBox span[id^="span_"].hp { max-width:150px; } .form_skin_side .form_type .write_form ul li .inputBox span[id^="span_"].tel:first-child, .form_skin_side .form_type .write_form ul li .inputBox span[id^="span_"].hp:first-child { width:80px; } /* mail */ .form_skin_side .form_type .write_form ul li .inputBox span[id^="span_"].file { margin-top: 10px; } /* mail */ .form_skin_side .form_type .write_form ul li .inputBox span[id^="span_"].email { max-width:200px; } .form_skin_side .form_type .write_form ul li .inputBox span[id^="span_"].email:first-child { margin-right: 0; } /* 주소 */ .form_skin_side .form_type .write_form ul li .inputBox span[id^="span_"].address { width:100%; margin-top: 5px; margin-right: 0; flex:none; } .form_skin_side .form_type .write_form ul li .inputBox input[id*="address"] { max-width:100%; } .form_skin_side .form_type .write_form ul li .inputBox span[id^="span_"].address:first-child { width:100%; margin-top: 0; display:flex; } .form_skin_side .form_type .write_form ul li .inputBox span[id^="span_"]:first-child input[id*="address"] { max-width:200px; margin-right: 4px; } .form_skin_side .form_type .agree_chk { font-size:14px; display:flex; align-items:center; justify-content: center; margin-top: 20px; margin-bottom: 30px; } .form_skin_side .form_type .agree_chk input { width:16px; height:16px; } .form_skin_side .form_type .agree_chk label { padding-left: 10px; } .form_skin_side .form_type .agree_chk a { display:flex; border: 1px solid #999; box-sizing:border-box; align-items:center; justify-content:center; text-align: center; color:#666; width:150px; height:40px; font-weight: 500; margin-left: 20px; transition:all 0.5s; } .form_skin_side .form_type .agree_chk a i { font-size:18px; margin-left: 10px; } .form_skin_side .form_type .agree_chk a:hover { background:#222; border-color: #222; color:#fff; } .form_skin_side .form_type .btn_confirm { text-align: center; } .form_skin_side .form_type .btn_confirm input[type="submit"] { width:200px; height:50px; font-size:16px; color:#fff; background:#222; cursor:pointer; font-weight: 600; } @media (max-width:768px){ .form_skin_side .form_type .write_form { padding: 20px; } .form_skin_side .form_type .write_form ul li .inputBox { padding-right: 0; } .form_skin_side .form_type .write_form ul li .inputBox span[id^="span_"] { flex:none; width:100%; } /* chkeckBox, radio */ .form_skin_side .form_type .write_form ul li .inputBox span[id^="span_"].radio, .form_skin_side .form_type .write_form ul li .inputBox span[id^="span_"].checkbox { width:auto; margin-right: 15px; } .form_skin_side .form_type .write_form ul li .inputBox input[id*="checkbox"], .form_skin_side .form_type .write_form ul li .inputBox input[id*="radio"] { vertical-align: middle; width:16px; height:16px; } /* chkeckBox, radio */ .form_skin_side .form_type .write_form ul li .inputBox span[id^="span_"].datepicker { max-width:200px; } /* select */ /* 년월일시 */ .form_skin_side .form_type .write_form ul li .inputBox span[id^="span_"].date, .form_skin_side .form_type .write_form ul li .inputBox span[id^="span_"].datetime, .form_skin_side .form_type .write_form ul li .inputBox span[id^="span_"].timehis { max-width:calc(33.33% - 4px - 10px); margin: 10px 10px 0 0; } .form_skin_side .form_type .write_form ul li .inputBox span[id^="span_"].date select, .form_skin_side .form_type .write_form ul li .inputBox span[id^="span_"].datetime select, .form_skin_side .form_type .write_form ul li .inputBox span[id^="span_"].timehis select { width:calc(100% - 25px); margin-right: 5px; } /* 전화번호 */ .form_skin_side .form_type .write_form ul li .inputBox span[id^="span_"].tel, .form_skin_side .form_type .write_form ul li .inputBox span[id^="span_"].hp { max-width:calc(33.33% - 2px); } /* mail */ .form_skin_side .form_type .write_form ul li .inputBox span[id^="span_"].email { max-width:calc(33.33% - 11px); } /* 주소 */ .form_skin_side .form_type .write_form ul li .inputBox span[id^="span_"].address { width:100%; margin-top: 5px; } .form_skin_side .form_type .write_form ul li .inputBox input[id*="address"] { max-width:100%; } .form_skin_side .form_type .write_form ul li .inputBox span[id^="span_"].address:first-child { width:100%; margin-top: 0; } .form_skin_side .form_type .write_form ul li .inputBox span[id^="span_"]:first-child input[id*="address"] { max-width:calc(100% - 154px); margin-right: 4px; } .form_skin_side .form_type .write_form ul li .inputBox input:focus, .form_skin_side .form_type .write_form ul li .inputBox textarea:focus, .form_skin_side .form_type .write_form ul li .inputBox select:focus { background:#fff; } .form_skin_side .form_type .write_form ul li .inputBox input[type="button"]:focus { background:#222; } } @media (max-width:479px){ }