@charset "utf-8";

/* Reset */
* {outline: 0 !important;}
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%; font-size: 62.5%; font-family:"Noto Sans KR", "Noto Sans KR Regular","Noto Sans CJK KR", "맑은 고딕","돋움",sans-serif ; background-color: transparent; min-width: 320px;}
/* -webkit : 크롬, ios기반의 브라우저 */
html{-webkit-touch-callout:none; -webkit-user-select:none; -webkit-tap-highlight-color:rgba(0,0,0,0); }
/* 가로사이즈가 ios(iphone3 , gallaxy1은 가로가 320) | -webkit-text-size-adjust: 아이폰 가로/세로변경시 글씨 사이즈 제어*/
body{width:100%; height: 100vh; background:#fff; min-width:320px; /* max-width: 1366px; 아이패드 최대 사이즈 */ -webkit-text-size-adjust:none;word-wrap:break-word;word-break:break-all;}
/* 웹용 */
body,input,select,textarea,button {border:none; color: #333; background: #fff;}
ul,ol,li{list-style:none;}
table{width:100%;border-spacing:0;border-collapse:collapse; border-style: hidden;}
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:1px;overflow:hidden;}
hr{display:none;}
/* html5에 inline요소를 block으로 변경 */
main,header,section,nav,footer,aside,article,figure{display:block;}
a{display: inline-block; color:#000; text-decoration:none; border: none;}

/* Form */
select { height:32px; font-size: 13px; color:#373737; border:1px solid #e9e9e9; background:#fff; border-radius:5px; }
select {-webkit-appearance:none;-moz-appearance: none;appearance: none; } 
select::-ms-expand {display: none; } 
input[type="datetime-local"],
input[type="date"],
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],
textarea {width:100%; height:40px; font-size:1.6rem; color:#444b55; border:1px solid #e9e9e9; background:#fff; text-indent:10px; border-radius:5px;transition:all 0.5s; vertical-align:middle;}
/* placeholder 세팅*/
input::-webkit-input-placeholder{color:#b5b5b5; font-size:1.4rem; line-height:150%;}
input {-webkit-appearance:none;-moz-appearance: none;appearance: none; } 
input::placeholder,
textarea::placeholder{font-family:"Noto Sans KR", "Noto Sans KR Regular","Noto Sans CJK KR", "맑은 고딕","돋움",sans-serif ;color: #bbb; font-size: 1.4rem; }
/* Hide Calendar Icon In Chrome */
input[type="datetime-local"]::-webkit-inner-spin-button,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-calendar-picker-indicator {display: none; -webkit-appearance: none;}
input::-ms-clear {display: none;}
input[type="checkbox"] {display: none;}
select:focus,
textarea:focus,
input:focus {outline: none; }
/* search 경우 클릭할때 둥글게 나오는 경우 있음 사각형으로 input[type=password][disabled], */
input[type="datetime-local"],
input[type=tel][readonly],
input[type=text][readonly],
input[type=password][readonly],
input[type=search][readonly],
input[type=email][readonly],
input[type=date][disabled],
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:#444b55; -webkit-appearance:none; font-size:1.4rem;}
textarea[readonly],
textarea[disabled]{padding:11px; font-size:1.6rem; color:#666; font-weight:normal; line-height:140%; height:78px; background:#eaeaea; border:1px solid #c0c0c0;}

button:focus {outline: none; } 
::selection {background: #f7fafc; } 
.clr{clear:both;}
.clr:after {content:""; display:block; clear:both;}

/* global */
#skip {overflow:hidden;position:absolute;left:-9999px;width:0;height:1px;margin:0;padding:0} /* 스킵네비게이션 */
.ir_pm {display:block;overflow:hidden;font-size:0px;line-height:0;text-indent:-9999px} /* 사용된 이미지내 의미있는 텍스트의 대체텍스트를 제공할때 */
.ir_wa {display:block;overflow:hidden;position:relative;z-index:-10;width:100%;height:100%} /* 중요한 이미지 대체텍스트로 이미지off시에도 대체 텍스트를 보여주고자 할때 */
.blind  {overflow:hidden;position:absolute;width:0;height:0;line-height:0;text-indent:-9999px; }  /* 대체텍스트가 아닌 접근성을 위한 숨김텍스트를 제공할때 */
.fl {float:left;}
.fr {float:right;}
.show {display:block}
.hide {display:none}
.br01 {border-right: 1px solid #ddd;}
.bb_dashed01 {border-bottom: 1px dashed #c0c0c0;}
.wb {word-break: keep-all;}
.tbl {border-collapse:collapse;border-spacing:0} /* 테이블 초기화 */
.clear_g {display:block;overflow:visible;width:auto;clear:both;*zoom:1}
.clear_g:after {display:block;visibility:hidden;height:0;font-size:0;clear:both;content:''}

/* Background Image - common 요소 */
.btn_comm {background:url() no-repeat} /* 버튼 */
.ico_comm {background:url() no-repeat} /* 아이콘 */
.tit_comm {background:url() no-repeat} /* 타이틀 */
.line_comm {background:url() no-repeat} /* 라인 */

/* text-color */
.col_blue   {color: #4b8bff;}
.col_green  {color: #53d866;}/* 정상일때 */
.col_red    {color: #ff2b2b;}/* 수치가 높을때 */
.col_pulple {color: #8278dd;}/* main_color */
.col_sub01  {color: #718096;}
.col_pink   {color: #ff688c;}

/* position */
.rel  {position: relative;}


/* text - align */
.tal  {text-align: left;}
.tar  {text-align: right;}
.tac  {text-align: center;}

/* margin */
.mt00 {margin-top: 0 !important;}
.mt10 {margin-top: 10px;}
.mt20 {margin-top: 20px;}
.mt30 {margin-top: 30px;}
.mt50 {margin-top: 50px;}
.ml10 {margin-left: 10px;}
.ml20 {margin-left: 20px;}
.mr10 {margin-right: 10px;}
.mr20 {margin-right: 20px;}
.mb00 {margin-bottom: 0px !important;}
.mb10 {margin-bottom: 10px;}
.mb20 {margin-bottom: 20px;}
.mb30 {margin-bottom: 30px;}
.mb50 {margin-bottom: 50px;}
.mb70 {margin-bottom: 70px;}

/* padding */
.pd00 {padding: 0 !important;}
.pd10 {padding: 10px; box-sizing: border-box;}
.pdL0 {padding-left: 0 !important;} 
.pt00 {padding-top: 0 !important;}
.pt20 {padding-top: 20px;}
.pt30 {padding-top: 30px;}
.pb30 {padding-bottom: 30px;}
.pl14 {padding-left: 14px;}
.pb80 {padding-bottom: 80px;}

/* height */
.h150 {height: 150px !important;}

/* border */
.bb_none {border-bottom: none !important;}

/* background */
.bg_01 {background: #eaeaea !important;}
.bg_02 {background: #ffffff !important;}

/* width */
.w100 {width: 100% !important;}

@media (min-width: 400px) {
    input[type="datetime-local"],
    input[type=tel][readonly],
    input[type=text][readonly],
    input[type=password][readonly],
    input[type=search][readonly],
    input[type=email][readonly],
    input[type=tel][disabled],
    input[type=text][disabled],
    input[type=password][disabled],
    input[type=search][disabled],
    input[type=email][disabled],
    textarea::placeholder, 
    input::placeholder {font-size: 1.6rem;}
}
@media (min-width: 1024px) {
    input[type="datetime-local"],
    input[type=tel][readonly],
    input[type=text][readonly],
    input[type=password][readonly],
    input[type=search][readonly],
    input[type=email][readonly],
    input[type=tel][disabled],
    input[type=text][disabled],
    input[type=password][disabled],
    input[type=search][disabled],
    input[type=email][disabled],
    textarea::placeholder, 
    input::placeholder {font-size: 2.0rem; }
}