@charset "utf-8";

/* 여백 초기화 */
body, div, ul, li, dl, dt, ol, h1, h2, h3, h4, h5, h6, input, fieldset, legend, p, select, table, th, td, tr, textarea, button, form {margin: 0; padding: 0;}

/* a 링크 초기화 */
a {color: #222; text-decoration: none;}
/* a:hover {color: rgb(47, 71, 180);} */

/* 폰트 초기화 */
body, input, textarea, select, button, table {
    font-family:'Nanum Gothic', AppleSDGothicNeo-Regular,'Malgun Gothic','맑은 고딕',dotum,'돋움',sans-serif; color: #222; font-size: 13px; line-height: 1.5;}

/* 폰트 스타일 초기화 */
em, address {font-style: normal;}

/* 블릿기호 초기화 */    
dl, ul, li, ol, menu {list-style: none;}

/* 제목 태그 초기화 */
h1, h2, h3, h4, h5, h6 {font-size: 13px; color:#222; font-weight: normal;}

/* 테두리 초기화 */
img, fieldset {border: 0 none;}

/* 버튼 초기화 */
button {border: 0;}

/* IR 효과 */
.ir_pm {display: block; overflow: hidden; font-size: 0; line-height: 0; text-indent: -9999px;} /* 의미있는 이미지의 대체 텍스트를 제공하는 경우 */
.ir_wa {display: block; overflow: hidden; position: relative; z-index: -1; width: 100%; height: 100%;} /* 의미있는 이미지의 대체 텍스트로 이미지가 없어도 대체 텍스트를 보여주고자 할 때 */
.ir_su {overflow: hidden; position: absolute; width: 0; height: 0; line-height: 0; text-indent: -9999px;} /* 대체 텍스트가 아닌 접근성을 위한 숨김 텍스트를 제공할 때 */

/* margin, padding */
.mt10 {margin-top: 10px !important;}
.mt15 {margin-top: 15px !important;}
.mt20 {margin-top: 20px !important;}
.mt25 {margin-top: 25px !important;}
.mt30 {margin-top: 30px !important;}
.mt35 {margin-top: 35px !important;}
.mt40 {margin-top: 40px !important;}
.mt45 {margin-top: 45px !important;}
.mt50 {margin-top: 50px !important;}
.mt100 {margin-top: 100px !important;}

.mb10 {margin-bottom: 10px !important;}
.mb15 {margin-bottom: 15px !important;}
.mb20 {margin-bottom: 20px !important;}
.mb25 {margin-bottom: 25px !important;}
.mb30 {margin-bottom: 30px !important;}
.mb35 {margin-bottom: 35px !important;}
.mb40 {margin-bottom: 40px !important;}
.mb45 {margin-bottom: 45px !important;}
.mb50 {margin-bottom: 50px !important;}
.mb100 {margin-bottom: 100px !important;}

/* 글자색상 */
.f_red {color: red;}
.f_blue {color: blue;}
.f_green {color: green;}

 /* 스킵 내비게이션  */
 #skip {position: relative;}
 #skip a {position: absolute; left: 0px; top: -35px; border: 1px solid #fff; color: #fff; background: #333; line-height: 30px; width: 140px; text-align: center;}
 #skip a:active,
 #skip a:focus {top: 0;}

* {margin:0;padding:0;box-sizing:border-box;-webkit-text-size-adjust:none;-moz-text-size-adjust:none;-ms-text-size-adjust:none;-o-text-size-adjust:none;text-size-adjust:none;-webkit-touch-callout:none; word-break:break-word;; box-sizing:border-box }
a[href="tel"] {color:inherit !important; text-decoration:none;}
input[type="submit"]{-webkit-appearance: none; -webkit-border-radius:0}
html {overflow-x:hidden;}
body, html{font-family:'Play','Noto Sans KR','noto','Dotum','arial',sans-serif; font-size:15px; font-weight:300; letter-spacing:-0.055em; overscroll-behavior: none/*메뉴외스크롤x*/;position: relative;}

/* common reset */
html,body,div,span,object,h1,h2,h3,h4,h5,h6,p,a,abbr,address,cite,em,img,strong,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,hgroup,menu,nav,section,summary,audio,video
{margin:0;padding:0;border:0;/*font:inherit;*/vertical-align:baseline;}
body{line-height:1;/*word-wrap:break-word;word-break:break-all*/}
table{border-collapse:collapse;border-spacing:0; background:#ffffff}
img{max-width:100%; border:0;-webkit-tap-highlight-color:rgba(0,0,0,0); vertical-align:top;-ms-interpolation-mode:bicubic}
strong, 
b{font-weight:500;}
ol,ul{list-style:none}
html,body{width:100%; height:100%;margin:0;padding:0; /*overflow-x:hidden;*/ color:#414141;line-height:1.4; }
dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
i,address,caption,cite,code,dfn,em,var{font-style:normal;}
ol,ul,li{list-style:none}
h1,h2,h3,h4,h5,h6{font-weight:normal; font-size:100%; }
abbr,acronym,fieldset{border:0}
hr{display:none;clear:both}
legend,caption{visibility:hidden;overflow:hidden;position:absolute;width:0;height:0;margin:0;padding:0;line-height:0; display:none; letter-spacing:-9999px}
label{cursor:pointer}
a{color:inherit}
a:link,a:visited,a:hover,a:active{text-decoration:none}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
audio[controls],canvas,video{display:inline-block;*display:inline;*zoom:1}
audio:not([controls]){display:none;height:0}
acronym,abbr{cursor:help}abbr[title]{border-bottom:1px dotted}
ul,ol{list-style:none;list-style-image:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
label,select,input,button{vertical-align:middle}button{border:0;cursor:pointer}
button,input,select,textarea{margin:0;font-size:100%;vertical-align:baseline;vertical-align:middle}
button,input{overflow:visible;line-height:normal}
button,select{text-tranotoform:none}
button[disabled],html input[disabled]{cursor:default}
button,html input[type="button"],input[type="reset"],input[type="submit"]{overflow:visible;cursor:pointer;-webkit-appearance:none;
text-decoration:none !important;
	font-family:inherit;
	font-size:0.9em;
	border:1px solid #c8c8c8;
	height:36px;
	line-height:36px;
}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}input[type="checkbox"],input[type="radio"]{box-sizing:border-box}
select{margin:0;padding:0;border:1px solid #ccc;box-sizing:border-box;line-height:1}


/*  Form and Button  */

form{margin:0;}
fieldset{margin-left:0;margin-right:0;padding:0;}
legend { position: absolute !important;left: -9999px;width: 1px;height: 1px;font-size: 0;line-height: 0;overflow: hidden; color:#fff}
.blind { position: absolute !important;left: -9999px;width: 1px;height: 1px;font-size: 0;line-height: 0;overflow: hidden;}

a[class*='button'],
button,
button[class*='button'],button[type='reset'], /*  */
html input[type='button'], /*  Avoid [Android4.2.2]bug)  */
input[type='reset'],
input[type='text'],input[type='password'],input[type='file'],
input[type='email'],input[type='number'],input[type='search'],input[type='tel'],input[type='url'],
input[type='radio'],input[type='checkbox'],
textarea,
[action] textarea,
select,
[action] select{
	display:inline-block;
	box-sizing:border-box; /* [IE8+] */
	max-width:100%;
	border-radius:0px; 
	line-height:normal; /* 2.429=((36-2)/14)px */
	vertical-align:middle;
	text-decoration:none !important;
	font-family:inherit;
	padding:0 .786em;
	font-size:0.9em;
	height:36px;
	line-height:36px;
}

input:focus{border-color:#233e59 }

input[type='radio']{ /* [SF]fix */
	border-radius:9999px;
}

input[type='number'] {width:auto;}

/* Button */
input[type='image']{margin-top:.333em;margin-bottom:.333em;vertical-align:middle;} /* 20160708 */
html input[type='button'], /*  Avoid [Android4.2.2]bug */
input[type='reset'],
button,
button[class*='button'],button[type='reset'], /*  */
a[class*='button']{-webkit-border-radius:0;-webkit-appearance:none;
	padding:0 .786em; /*  (((36-2)/14)-1.333)/2) (((36-14)/2)/14) */
	border:1px solid #bbb;
	color:#333;
	white-space:nowrap;
}

input[type='text'],input[type='password'],input[type='file'],
input[type='email'],input[type='number'],input[type='search'],input[type='tel'],input[type='url'],
textarea,
[action] textarea{ /*  */
	-webkit-appearance:none;
	border:1px solid #dedede;
	background-color:#fcfcfc;
}
/* if.. has setClassUAver() */
html.lteIE8 input[type='text'],
html.lteIE8 input[type='password']{line-height:2;} 

/* [CR][FF][OP] */
input[type='file']{
	height:auto;padding-top:.583em;padding-bottom:.583em;border-color:tranotoparent;background-color:#fcfcfc;font-size:.857em /* 12px */;font-family:'inhert';line-height:1.333;
}
/* [IE10+] */
input[type='file']::-ms-value{height:2.666em;margin:-.666em 0 -.666em -.2em;border:1px solid #ccc;background-color:#fcfcfc;}
input[type='file']::-ms-browse{height:2.5em;margin:-.555em -.2em -.555em .166em;
	border:1px solid #999;border-color:#dcdcdc;
	background-color:#eee;
	background:linear-gradient(180deg, #fff 0, #fff 3%, #eee 3%, #fff 100%);
}

textarea,
[action] textarea{ /*  */
	width:100%;height:8em;line-height:1.333;
	padding:0.586em 0.786em;
}
textarea[rows='1']{height:1.444em;}
textarea[rows='2']{height:2.888em;}
textarea[rows='5']{height:7.222em;}

select,
[action] select{ /*  */
	border:1px solid #dcdcdc;
	background-color:#fcfcfc;
	padding:0 .286em;
	height:36px;
	line-height:36px;
}
select[multiple]{height:auto;} /* 20150716 */

input[type='radio'],input[type='checkbox']{
	box-sizing:border-box; /* [IE8,9]fix */
	width:1em;height:36px;
	margin:0;/* =((36-14)/14/2) */
	line-height:normal;
}

.input-s {height:2em !important;}


/* Clear Fix */
/*.container:before, .container:after{content:''; display:table; *//* clear:both; }*/
	
.clearfix{/* min-height:0; */} 
.clearfix:before,
.clearfix:after{content:'';display:table;} /* [IE8+] */
.clearfix:after{clear:both;}


.nowrap {white-space: nowrap !important;}







/* #### checkbox buttons #### */

input[type="checkbox"].chkbtn{
  display: none;
}

label.toggler{ /* checkbox label */
  display: block;
  position: relative;
  padding-left: 25px; /* space to the left of label text */
  cursor: pointer;
}

label.toggler::before{ /* flat box */
  content: '';
  display: block;
  position: absolute;
  width: 14px;
  height: 14px;
  /*background: #233e59;*/
  left: 0;
  top: 0;
  border:2px solid #233e59;
 bottom:0;
 margin:auto 0;

}

label.toggler::after{ /* check mark inside flat box*/
  content: '\f00c'; /* fontAwesome icon font unicode. See http://fortawesome.github.io/Font-Awesome/cheatsheet/ for others */
  position:absolute;
  left: 0px;
  top: 0px;
  bottom:0;
  margin:auto 0;
  font-family:'FontAwesome';
  color: #ffffff;
  width: 16px; /* hide check mark initially */
  height:16px;
  overflow: hidden;
  text-align:center;
  font-size:0px;
  line-height:20px;
  transition: all 0.2s;

}

input[type="checkbox"]:checked + label.toggler::after{ /* inner dark circle when radio is selected */
  background: #233e59;
  color: #ffffff;
  font-size:10px;
}


input[type="checkbox"]:checked + label.toggler::after{ /* check mark when checkbox is checked */
  transition: all 0.2s;  /* CSS3 transition on dark circle */
  /*transition: width 0.2s; /* CSS3 transition on width property */
  width: 18px; /* expand check mark to show it. Value should reflect that of container box */
  height:18px;
  top:2px;

}


label.chcked.toggler::after{
  background: #233e59;
  color: #ffffff;
  font-size:10px;
  transition: all 0.2s;  /* CSS3 transition on dark circle */
  /*transition: width 0.2s; /* CSS3 transition on width property */
  width: 18px; /* expand check mark to show it. Value should reflect that of container box */
  height:18px;
  top:2px;

}

label.empty{width:18px; height:18px; display:inline-block; padding-left:18px;}

label.chcked.empty::after{
width:18px; height:18px; display:inline-block; padding-left:0px !important;

}

/* #### radio buttons #### */

input[type="radio"].rdobtn{
  display: none;
}

label.toggler_r{ /* radio label */
  display: block;
  position: relative;
  padding-left: 25px; /* space to the left of label text */
  cursor: pointer;
}

label.toggler_r::before{ /* outer round circle */
  content: '';
  display: block;
  position:absolute;
  width: 14px;
  height: 14px;
 /* background: #233e59;*/
  border-radius: 25px;
  left: 0;
  top: 0;
  bottom:0;
  border:2px solid #233e59;
  margin:auto 0;

}

label.toggler_r::after{ /* inner dark circle */
  content: '';
  position:absolute;
  width: 6px;
  height: 6px;
  border-radius: 15px;
  left: 6px;
  top: 6px;
  bottom:6px;
  margin:auto;
  overflow: hidden;
  transition: all 0.2s;  /* CSS3 transition on dark circle */
}

input[type="radio"]:checked + label.toggler_r::after{ /* inner dark circle when radio is selected */
  background: #233e59;
}

label.chcked.toggler_r::after{
  background: #233e59;

}

@media all and (min-width:1200px) {
html,body{line-height:1.5; }
}

/******************************************************
@ Set Default Input Form
******************************************************/
/* textarea */
textarea{position:relative;width:100%;resize:none}

/* select */
select{-webkit-appearance:none; -moz-appearance:none; appearance:none;position:relative; min-width:60px;  padding-right:29px; color:#666; outline:none;  background:#fcfcfc url(../img/default_select_arrow.png) right center no-repeat; background-size:15px auto !important; -webkit-border-radius:0;border-radius:0;}
select::-ms-expand{display:none}




.file{overflow:hidden;padding:0.6em; border:1px solid #c8c8c8; position:relative; max-width:500px;}
.file a{position:absolute; right:0px;top:0px; font-size:0.8rem; padding:0.8em 1.6em; height:38px; border-left:1px solid #c8c8c8}
.file span{font-size:0.8rem; color:#808080}
.file input[type="file"]{position:absolute; top:0; right:0; z-index:2; width:100%; height:38px; cursor:pointer; opacity:.0;}

.file_input {overflow:hidden; border:1px solid #c8c8c8; position:relative; max-width:500px;}
.file_input #file_route{border:none}
.file_input label {position:absolute; right:0px;top:0px; font-size:0.8rem; padding:0.8em 1.6em; height:38px; color:#f5484a; width:100%;}
.file_input label:after {width:100px; text-align:center; border-left:1px solid #c8c8c8; position:absolute; display:block; content:'Attached'; height:100%; top:0; right:0; line-height:38px;}
.file_input label input {position:absolute; width:0; height:0; overflow:hidden; display:none}
.file_input input[type=text] {vertical-align:middle; display:inline-block; height:38px; padding:0; border:0; background:none; text-indent:10px; color:#808080}

.r {
  text-align: right !important;
}
.l {
  text-align: left !important;
}