@charset "utf-8";

/*웹폰트는 모바일 미제공*/
@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);


/* web + mobile */

/* Reset */
 * {outline:0 !important;}
/* outline은 web에서는 사용금지 mobile에서만 사용
터치를할때 생기는 외곽라인이 생김방지용 - 호불호 갈림 필요없을시 삭제가능
(클라이언트 요청이 있을 수 있고, 접근성에 문제가 생길 수도 있지만 모바일 같은경우 접근성 보조프로그램들(화면을 대신 읽어주는)이 활성화 된다면 자동으로 외곽선이 생성되기 때문에 문제없음) */

html,body,h1,h2,h3,h4,h5,h6,div,p,blockquote,pre,code,address,ul,ol,li,menu,nav,section,article,aside,
dl,dt,dd,table,thead,tbody,tfoot,label,caption,th,td,form,fieldset,legend,hr,input,button,textarea,object,figure,figcaption {margin:0;padding:0;}
html, body{width:100%;}

/*html{-webkit-touch-callout:none; -webkit-user-select:none; -webkit-tap-highlight-color:rgba(0, 0, 0, 0);}*/
/* -webkit- : 접수사로써 ios와 안드로이드 전용을 얘기함 (크롬기반의 브라우저와 애플기반의 브라우저 선택시)
touch-callout : 사용자가 브라우저에서 터치를 꾹 누를때 메뉴가 생성되는것을 방지
user-select : 사용자가 클릭하고 드레그하는것을 방지 
tap-highlight-color : 링크를 클릭할 때 마다 배경이 파랗게 생기는 경우의 컬러는 변경
(클라이언트 요청이 있을 수 있고, 접근성에 문제가 생길 수도 있지만 각각 모바일마다 접근성 보조프로그램(화면을 대신 읽어주는)이 활성 된다면 자동으로 외곽선이 생성되기 때문에 문제없음)*/

body,input,select,textarea,button {border:none;font-size:12px; font-family:'Noto Sans KR', sans-serif;color:#727272;}
/* font-family:'Noto Sans KR', sans-serif; : 웹폰트 사용시 작성*/

body{width:100%; background:#fff; min-width:320px; -webkit-text-size-adjust:none;word-wrap:break-word;word-break:break-all; color:#333; overflow-x:hidden;}
/* min-width:320px; : 반응형을 할 때 많이 사용 - 아이폰3, 갤럭시1가 가로사이즈가 320사이즈라서 그 이하는 못줄어들게 하여 가로 스크롤 생기게함 (올드폰에 대처하기 위한 방법)
text-size-adjust : 아이폰에서 뷰포트가 변경되게 되면 자동으로 폰트사이즈가 제어되는 것을 막음
word-wrap:break-word;word-break:break-all; : 모바일 디바이스에서 가로사이즈가 협소하여 글씨가 많이 늘어날때 자동 줄내림 */

h1, h2, h3, h4, h5, h6 {font-size:100%;}
ul,ol,li{list-style:none;}
table{width:100%;border-spacing:0;border-collapse:collapse;}
img,fieldset{border:0;}
address,cite,code,em{font-style:normal;font-weight:normal;}
label,img,input,select,textarea,button{vertical-align:middle;}
.hide,caption,legend{line-height:0;font-size:0;overflow:hidden;}
hr{display:none;}
main,header,section,nav,footer,aside,article,figure{display:block;}
/* html5로 되면서 새로 나온 요소들은 inline요소라 block으로 변경해줌 */
a{color:#000;text-decoration:none;}
 
/* Form */
textarea { border:1px solid #dbdbdb;}
select { height:32px; font-size:13px; color:#373737; border:1px solid #e9e9e9; background:#fff;border-radius: 5px;}
input[type=tel],
input[type=time],
input[type=text],
input[type=password],
input[type=search],
input[type=email],
input[type=file],
input[type=url],
input[type=number],
input[type=date],textarea {width:100%; height:30px; font-size:13px; color:#373737; border:1px solid #e9e9e9; background:#fff; text-indent:20px; border-radius: 5px; transition: all 0.5s; vertical-align:middle;}
input::-webkit-input-placeholder{color:#b5b5b5; font-size:12px; line-height:100%;}
textarea { padding:5px 0;}
select:focus,
textarea:focus,
input:focus { border: 1px solid #727272;}

input[type=tel][readonly],
input[type=text][readonly],
input[type=password][readonly],
input[type=email][readonly], 
input[type=search][readonly], 
input[type=tel][disabled],
input[type=text][disabled],
input[type=password][disabled],
input[type=search][disabled],
input[type=email][disabled]{background:#eaeaea; border-color:#c0c0c0; color:#666; -webkit-appearance:none;font-size:12px;}
/* appearance:none; : inpur type의 search의 경우 둥근모서리를 사각형모양으로 초기화 시킴 */
textarea[readonly],
textarea[disabled]{padding:11px; font-size:16px; color:#666; font-weight:normal; line-height:140%; height:78px; background:#eaeaea;border:1px solid #c0c0c0;}

.clear {clear:both;}
.clear:after { content:""; display:block; clear:both;}

/* 팝업, 반복영역건너뛰기 */
.skip_navi {height:0}
.skip_navi a {position:absolute;top:-9999px;background:#000;width:100%;height:30px;text-align:center;color:#fff;line-height:30px;font-weight:bold;z-index:110;opacity: 0.6;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";filter: alpha(opacity=60)}
.skip_navi a:focus, 
.skip_navi a:hover, 
.skip_navi a:active {top:0;display:block}