/********************************************************************************************************************************************************
    Font Import
********************************************************************************************************************************************************/
@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic:400,700');
@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css); 
@import url('https://fonts.googleapis.com/css?family=Raleway:800');
/********************************************************************************************************************************************************
    Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) http://cssreset.com
********************************************************************************************************************************************************/
@-ms-viewport {  width: device-width;}
@-o-viewport {  width: device-width;}
@viewport {  width: device-width;}

html
{ overflow-y: scroll
}

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, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video
{
    border: 0;
    font: inherit;
    font-size: 100%;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
	font-family: 'Nanum Gothic', sans-serif; font-size: 15px;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section /* HTML5 display-role reset for older browsers */
{
    display: block;
}

ol, ul
{
    list-style: none;
}

blockquote, q
{
    quotes: none;
}

    blockquote:before, blockquote:after, q:before, q:after
    {
        content: none;
    }

table
{
    border-collapse: collapse;
    border-spacing: 0;
}


/********************************************************************************************************************************************************
    My setting
********************************************************************************************************************************************************/
a
{
    text-decoration: none;
}

.BasicInput
{
    border: 1px solid silver;
    box-sizing: border-box;
    font-family: 'Nanum Gothic';
    font-size: 16px;
    padding: 10px;
    width: 100%;
}

.BasicSelect
{
    background-color: white;
    border: 1px solid silver;
    box-sizing: border-box;
    font-family: 'Nanum Gothic';
    font-size: 16px;
    padding-bottom: 10px;
    padding-left: 6px;
    padding-top: 10px;
    width: 100%;
}

.GoogleCard
{
   
    display: block;
    margin-bottom: 7px;
    padding: 10px;
    transform-origin: top left;
}


.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}



/*-----공통css-----*/
.body_color{ background-color: #efeff4}

/**** pc ****/
@media only all and (min-width:1301px) {
	.pc_view{  display: block }
	.tb_view { display: none}
	.mobile_view{ display: none}
}
/**** 테블릿 ****/
@media all and (max-width:1300px) and (min-width:768px) {
	.pc_view{ display: none }
	.tb_view {  display: block }
	.mobile_view{ display: none}
}
/**** 모바일 ****/
@media only all and (max-width:767px) {
	.pc_view{  display: none }
	.tb_view { display: none}
	.mobile_view{display: block}
}






/*----- 입력폼 디자인   -----*/
/**** pc ****/
@media only all and (min-width:1301px) {
.input_com {  
	height: 50px!important;
	line-height: 50px !important;
	padding: 0px 10px; box-sizing: border-box;
	font-size:12px;
	color:#555;
	background-color:#fff!important;
	background-image:none;
 border: 1px solid #ccc; margin-bottom: -1px ; padding-left:160px !important; float: left; box-sizing: border-box
}


.input_com:focus {
	height: 50px!important;
	line-height:50px !important;
	border-color:#5e66eb;
	 border:2px solid #5e66eb;
	-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
	box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);padding-left: 160px;  z-index: 1;  position: relative; 
}
		
.input_com::-moz-placeholder {
color:#999; font-size: 14px;
opacity:1
}
.input_com:-ms-input-placeholder {
color:#999; font-size: 14px;
}
.input_com::-webkit-input-placeholder {
color:#999; font-size: 14px;
}
.input_com::-ms-expand {
border:0;
background-color:transparent
}	



.input_box{ width:50%; float: left; position: relative; margin-right: -1px ; }
.input_box .input_title{
	position: absolute;
	top: 17px;
	padding-left:40px;
	font-size:15px; color: #000;
	border-right: 1px solid #ccc;
	line-height: 15px;
	width: 110px;
	z-index: 2;
	left: -6px;
}
.input_box i{ position: absolute;  top: 14px; left: 10px; color: #ccc; font-size: 20px; z-index: 2;  }	
.input_box .input_title em{  font-size:15px; color: #000; margin-right:5px}

select {
  -webkit-appearance: none;  /* 네이티브 외형 감추기 */
  -moz-appearance: none ;
  appearance: none;
  background: url( images/select.png) no-repeat 95% 50%!important;  /* 화살표 모양의 이미지 */ 
	 background-size: 20px!important;
;font-size: 14px !important; border: 1px solid #ccc; background-color: #f4f4f4!important; padding: 0px 30px 0px 5px; line-height: 30px!important;  height: 30px!important; border-radius: 0px
	
}

/* IE 10, 11의 네이티브 화살표 숨기기 */
select::-ms-expand { 
  display: none;
}


}
/**** 테블릿 ****/
@media all and (max-width:1300px) and (min-width:768px) {
.input_com {  
	height: 50px!important;
	line-height: 50px !important;
	padding: 0px 10px; box-sizing: border-box;
	font-size:12px;
	color:#555;
	background-color:#fff!important;
	background-image:none;
 border: 1px solid #ccc; margin-bottom: -1px ; padding-left:160px !important; float: left; box-sizing: border-box
}


.input_com:focus {
	height: 50px!important;
	line-height:50px !important;
	border-color:#5e66eb;
	 border:2px solid #5e66eb;
	-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
	box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);padding-left: 160px;  z-index: 1;  position: relative; 
}
		
.input_com::-moz-placeholder {
color:#999; font-size: 14px;
opacity:1
}
.input_com:-ms-input-placeholder {
color:#999; font-size: 14px;
}
.input_com::-webkit-input-placeholder {
color:#999; font-size: 14px;
}
.input_com::-ms-expand {
border:0;
background-color:transparent
}	



.input_box{ width:50%; float: left; position: relative; margin-right: -1px ; }
.input_box .input_title{
	position: absolute;
	top: 17px;
	padding-left:40px;
	font-size:15px; color: #000;
	border-right: 1px solid #ccc;
	line-height: 15px;
	width: 110px;
	z-index: 2;
	left: -6px;
}
.input_box i{ position: absolute;  top: 14px; left: 10px; color: #ccc; font-size: 20px; z-index: 2;  }	
.input_box .input_title em{  font-size:15px; color: #000; margin-right:5px}

select {
  -webkit-appearance: none;  /* 네이티브 외형 감추기 */
  -moz-appearance: none ;
  appearance: none;
  background: url( images/select.png) no-repeat 95% 50%!important;  /* 화살표 모양의 이미지 */ 
	 background-size: 20px!important;
;font-size: 14px !important; border: 1px solid #ccc; background-color: #f4f4f4!important; padding: 0px 30px 0px 5px; line-height: 30px!important;  height: 30px!important; border-radius: 0px
	
}

/* IE 10, 11의 네이티브 화살표 숨기기 */
select::-ms-expand { 
  display: none;
}

}
/**** 모바일 ****/
@media only all and (max-width:767px) {
.input_com {
	height:45px!important;
	line-height: 45px !important;
	padding: 0px 10px; box-sizing: border-box;
	font-size:12px;
	color:#555;
	background-color:#fff!important;
	background-image:none;
 border: 1px solid #ccc; padding-left:125px !important; 
}


.input_com:focus {
	line-height:45px !important;
	border-color:#5e66eb !important;
	 border: 1px solid #5e66eb !important;
	-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
	box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);padding-left: 125px;  z-index: 1;  position: relative; 
	outline: none;
-webkit-tap-highlight-color: transparent;
}
.input_com::-moz-placeholder {
color:#999;font-size: 13px;
opacity:1
}
.input_com:-ms-input-placeholder {
color:#999
}
.input_com::-webkit-input-placeholder {
color:#999
}
.input_com::-ms-expand {
border:0;
background-color:transparent
}

.input_box{ width:100%; float: left; position: relative; margin-right: -1px ; margin-bottom: -2px ;}
.input_box .input_title{ position: absolute;  top: 15px; padding-left:35px; font-size:12px; color: #000; border-right: 1px solid #ccc;  line-height: 15px;  width:80px;z-index: 2;  }
.input_box i{ position: absolute;  top: 13px; left: 10px; color: #ccc; font-size: 20px; z-index: 2;  }	
.input_box .input_title em{  font-size:12px; color: #000; margin-right:3px}

select {
  -webkit-appearance: none;  /* 네이티브 외형 감추기 */
  -moz-appearance: none ;
  appearance: none;
  background: url( images/select.png) no-repeat 95% 50%!important;  /* 화살표 모양의 이미지 */ 
	 background-size: 20px!important;
;font-size: 12px !important; border: 1px solid #ccc; background-color: #f4f4f4!important; padding: 0px 30px 0px 5px; line-height: 30px!important;  height: 30px!important; border-radius: 0px; color: #666
	
}

/* IE 10, 11의 네이티브 화살표 숨기기 */
select::-ms-expand { 
  display: none;
}


}




	
input.input_st[type='checkbox'] { 
    background: #ccc; 
    border: none; 
    height:20px; 
    width: 20px; 
   -webkit-appearance: none;  /* 네이티브 외형 감추기 */
  -moz-appearance: none ;
    -webkit-border-radius: 30px; 
	border-radius: 30px; 
	background-image: url(images/check.png);
	background-repeat: no-repeat;
	background-size:70%;	background-position: center center; margin-right:5px; margin-top:-3px;outline: none;
-webkit-tap-highlight-color: transparent;

} 
 
input.input_st[type='checkbox']:checked { 
 background: #5057ce; 
    border: none; 
    height:20px; 
    width: 20px; 
    -webkit-appearance: none; 
	-moz-appearance: none ;
    -webkit-border-radius: 30px;
	border-radius: 30px; 
	background-image: url(images/check.png);
	background-repeat: no-repeat;
	background-size:70%;	background-position: center center; margin-right:5px; margin-top:-3px;
outline: none;
-webkit-tap-highlight-color: transparent;

} 

 
input.input_st[type='checkbox']:checked:after {
	background-image: url(images/check.png);
 display: block;
	width: 15px;
	height: 15px;
	background-repeat: no-repeat;
	background-size:80%;
	-webkit-appearance: none;
	-moz-appearance: none ;  
	-webkit-border-radius: 30px;
	border-radius: 30px; 
	background-position: center center;outline: none;
-webkit-tap-highlight-color: transparent;

}