/* CSS Document */
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, menu, nav, output, ruby, section, summary, time, mark, audio, video, button,  textarea, input{margin:0;padding:0;border:0}
ul, ol, li{list-style:none}
body{font-family:'Nanum Gothic',sans-serif,"Helvetica Neue","Helvetica","Arial","Verdana","Tahoma";font-size:13px;line-height:1.4;letter-spacing:-0.5px;word-break:break-all;font-size-adjust:none;-webkit-tap-highlight-color:transparent}
em{font-style:normal}
img{width:100%}
input,select{-webkit-appearance:none;background:transparent;-webkit-border-radius:6px;border-radius:6px;color:#222}
input[type="text"]::disabled{background:#e9ebef}
textarea{-webkit-box-sizing:border-box;box-sizing:border-box;padding:7px 10px !important;min-height:104px;width:100%;color:#222;border-radius:6px}

img, fieldset{vertical-align:middle}
*, *:before, *:after{box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}
input:placeholder{color:#ccc}

/* 아이폰 가로모드시 글씨 커지는 문제 */
*{-webkit-text-size-adjust:none}

body{background:#eee}
/* input */
input[type="tel"],input[type="text"],input[type="password"],input[type="number"],input[type="date"],input[type="email"],input[type="search"],input[type="image"]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0 27px;height:58px;line-height:58px;border:1px solid #666;background:#fff;color:#222;vertical-align:middle;font-size:24px}

/* link */
a{color:inherit;text-decoration:none}
a:hover, a:focus, a:active, a:visited{text-decoration:none}

button{cursor:pointer;font-family:'Nanum Gothic',sans-serif,"Helvetica Neue","Helvetica","Arial","Verdana","Tahoma";}
/* 라디오, 체크 박스 */
input[type="checkbox"]{position:absolute;left:-1000px}
input[type="checkbox"] + label{display:inline-block;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;padding-left:43px;font-size:24px;color:#222;height:28px;line-height:28px}
input[type="checkbox"] + label:before{display:block;content:'';position:absolute;top:0;left:0;width:28px;height:28px;z-index:0;border:1px solid #666;background:#fff}
input[type="checkbox"]:focus + label, input[type="checkbox"]:focus + label{outline:1px dotted #666}
input[type="checkbox"]:checked + label:before{background:#fff;border:1px solid #666}
input[type="checkbox"]:checked + label:after{display:block;content:"";position:absolute;z-index:1;top:8px;left:3px;background:#fff;width:2px;height:2px;box-shadow:2px 0 0 #666, 4px 0 0 #666, 6px 0 0 #666, 8px 0 0 #666, 10px 0 0 #666, 12px 0 0 #666, 14px 0 0 #666, 14px -2px 0 #666,14px -4px 0 #666,14px -6px 0 #666,14px -8px 0 #666,14px -10px 0 #666,14px -12px 0 #666,14px -14px 0 #666,14px -16px 0 #666;-webkit-transform:rotate(45deg);transform:rotate(45deg)}

/*select*/
select{border:1px solid #dadada;border-radius:6px;height:38px;line-height:38px;width:100px;padding:0 10px 0 5px;vertical-align:middle;font-size:13px;color:#222;background:#fff url(../images/app/app_select.png) no-repeat 100% 50%;background-size:3vw auto}

#header{background:#222;height:111px;line-height:111px;position:relative}
#header h1{vertical-align:middle;position:absolute;left:5%;top:50%;margin-top:-20px}
#header h1 a{width:120px;display:inline-block}
#header h1 span{width:332px;margin-left:30px;display:inline-block}


@media screen and (min-width:768px) and (max-width:1279px){
input:placeholder{font-size:18px}
input[type="tel"],input[type="text"],input[type="password"],input[type="number"],input[type="date"],input[type="email"],input[type="search"],input[type="image"]{padding:0 15px;height:38px;line-height:38px;border:1px solid #666;font-size:13px}

input[type="checkbox"] + label{padding-left:24px;font-size:18px;color:#222;height:18px;line-height:18px}
input[type="checkbox"] + label:before{width:18px;height:18px}
input[type="checkbox"]:checked + label:after{top:6px;left:3px;background:#fff;box-shadow:2px 0 0 #666, 4px 0 0 #666, 6px 0 0 #666, 6px -2px 0 #666, 6px -4px 0 #666, 6px -6px 0 #666, 6px -8px 0 #666;-webkit-transform:rotate(45deg);transform:rotate(45deg)}

}
@media screen and (min-width:320px) and (max-width:767px){
#header h1{margin-top:-2%;}
#header h1 span{width:32%;margin-left:3%}
#header h1 a{width:12%}
#header{height:50px;line-height:50px}
input[type="tel"],input[type="text"],input[type="password"],input[type="number"],input[type="date"],input[type="email"],input[type="search"],input[type="image"]{padding:0 15px;height:38px;line-height:38px;border:1px solid #666;font-size:13px}

input[type="checkbox"] + label{padding-left:22px;font-size:14px;color:#222;height:16px;line-height:16px}
input[type="checkbox"] + label:before{width:16px;height:16px}
input[type="checkbox"]:checked + label:after{top:6px;left:3px;background:#fff;box-shadow:2px 0 0 #666, 4px 0 0 #666, 6px 0 0 #666, 6px -2px 0 #666, 6px -4px 0 #666, 6px -6px 0 #666, 6px -8px 0 #666;-webkit-transform:rotate(45deg);transform:rotate(45deg)}
}