.content { width:100%; background-image: -webkit-gradient(linear,left top,left bottom,from(#fff),color-stop(60.62%,#e9f1f8),to(#f2f5f7)); background-image: -webkit-linear-gradient(top,#fff 0,#e9f1f8 60.62%,#f2f5f7 100%); background-image: linear-gradient(to bottom,#fff 0,#e9f1f8 60.62%,#f2f5f7 100%); min-height: 800px; overflow:hidden; }

/* 로그인 */
.content .login { width:100%; max-width:410px; margin:100px auto; border:0; padding:0 15px 0 15px; box-sizing:border-box; }
.content .login .div_login { width:100%; position:relative; box-sizing:border-box; text-align:center; background-color:#FFFFFF; border:0; box-shadow:0 0 18px #d3d3d3; height:390px; border-radius:5px; box-sizing:border-box; padding:20px; background-color:#FFFFFF }
.content .login .div_login .text01 { width:100%; font-size:1em; display:inline-block; text-align:left; }
.content .login .div_login .text01 .text0101 { display:inline-block; float:right; font-weight:500; }
.content .login .div_login .input01 { width:100%; display:inline-blcok; padding:10px 0 0 0; }
.content .login .div_login .input01 input { width:100%; margin:40px 0 0 0; padding:15px 15px 15px 15px; font-size:1em; box-sizing:border-box; letter-spacing:0; border-radius:10px; border:1px solid #EAEAEA; }
.content .login .div_login .input01 input::-webkit-input-placeholder { color:#D4D4D4 }
.content .login .div_login .input02 input { width:100%; margin:20px 0 0 0; padding:15px 15px 15px 15px; font-size:1em; box-sizing:border-box; letter-spacing:0; border-radius:10px; border:1px solid #EAEAEA; }
.content .login .div_login .input02 input::-webkit-input-placeholder { color:#D4D4D4 }

.content .login .btn01 input { width:100%; margin:20px 0 0 0; padding:15px 15px 15px 15px; font-size:1em; box-sizing:border-box; letter-spacing:0; background-color:#2c786c; color:#FFFFFF; border-radius:10px; border:0; }

.content .login .btn02 { width:100%; display:inline-block;  text-align:center; font-size:0.9em; color:#9A9A9A; padding:30px 0 10px 0; }

/* 회원가입 */
.content .join { width:100%; max-width:670px;margin:50px auto 150px auto; position:relative; text-align:left; box-sizing:border-box; padding:0 15px 0 15px; }
.content .join .div_join { width:100%; position:relative; box-sizing:border-box; text-align:center; background-color:#FFFFFF; border:0; box-shadow:0 0 18px #d3d3d3; border-radius:10px; box-sizing:border-box; padding:40px 10px 40px 10px;}
.content .join .div_join .btn01 { display:inline-block; width:100%; position:relative; box-sizing:border-box;  padding:20px; text-align:center;  line-height:2em; }
.content .join .div_join .btn01 .img0101 { text-align:right; display:inline-block; width:50%; margin:0 auto; box-sizing:border-box; padding:0 30px 0 0; float:left;}
.content .join .div_join .btn01 .img0101 img { width:100%; max-width:150px; }
.content .join .div_join .btn01 .img0102 { text-align:right; display:inline-block; width:50%; margin:0 auto; box-sizing:border-box; padding:0 30px 0 0; float:left;}
.content .join .div_join .btn01 .img0102 img { width:100%; max-width:150px; }
.content .join .div_join .btn01 .text0101 { display:inline-block; width:50%; float:left; text-align:left; margin:40px 0 0 0;}
.content .join .div_join .btn01 .text0102 { display:inline-block; width:50%; float:left; text-align:left; font-size:1.5em; color:#2c786c }
.content .join .div_join .btn02 { display:inline-block; width:100%; position:relative; box-sizing:border-box; border:1px solid #DEDEDE; border-radius:5px; padding:20px; text-align:center;  line-height:2em; }
.content .join .div_join .btn03 { display:inline-block; width:100%; position:relative; box-sizing:border-box;  text-align:center;  line-height:1.5em; font-size:0.9em; color:#797979 }
.content .join .div_join .btn03 .btn0301 { display:inline-block; width:100%; font-size:1em; color:#000000 }
.content .join .div_join .bar01 { display:inline-block; border-top:1px solid #DEDEDE; width:100%; margin:20px 0 20px 0; }
.content .join .div_join .bar02 { display:inline-block; width:80%; margin:0 auto; border-bottom:1px solid #EFEFEF; margin:40px 0 20px 0; }


/* 정보수정 */
.content .modify { width:100%; max-width:670px;margin:50px auto 150px auto; position:relative; text-align:left; }
.content .modify .div_modify { width:100%; position:relative; box-sizing:border-box; text-align:center; background-color:#FFFFFF; border:0; box-shadow:0 0 18px #d3d3d3; border-radius:10px; box-sizing:border-box; padding:40px 20px 40px 20px;}
.content .modify .div_modify .btn01 { display:inline-block; width:100%; position:relative; box-sizing:border-box; border:1px solid #DEDEDE; border-radius:5px; padding:20px; text-align:center; background-color:#FFFFFF; line-height:2em; }
.content .modify .div_modify .btn02 { display:inline-block; width:100%; position:relative; box-sizing:border-box; border:1px solid #DEDEDE; border-radius:5px; padding:20px; text-align:center; background-color:#FFFFFF; line-height:2em; }
.content .modify .div_modify .btn03 { display:inline-block; width:100%; position:relative; box-sizing:border-box;  text-align:center;  line-height:1.5em; font-size:0.9em; color:#797979 }
.content .modify .div_modify .bar01 { display:inline-block; width:100%; margin:20px 0 20px 0; }
.content .modify .div_modify .bar02 { display:inline-block; width:80%; margin:0 auto; border-bottom:1px solid #EFEFEF; margin:40px 0 20px 0; }


.content .con_blank01 { width:100%; position:relative; overflow:hidden; height:15px; }
.content .con_blank02 { width:100%; position:relative; overflow:hidden; height:30px; }
.content .con_blank03 { width:100%; position:relative; overflow:hidden; height:10px; }
.content .con_blank04 { width:100%; position:relative; overflow:hidden; height:5px; }


.content .con_bar01 { width:100%; display:inline-block; position:relative; overflow:hidden; height:10px; background-color:#F4F4F4; border-top:1px solid #DEDEDE; border-bottom:1px solid #EFEFEF}
.content .con_bar02 { width:100%; display:inline-block; position:relative; overflow:hidden; height:10px; background-color:#FFFFFF; border-top:1px solid #DEDEDE; border-bottom:1px solid #EFEFEF}
.content .con_bar03 { width:100%; display:inline-block; position:relative; overflow:hidden; background-color:#FFFFFF; border-top:1px solid #DEDEDE; padding:10px 0 10px 0}
.content .con_bar04 { width:100%; display:inline-block; position:relative; overflow:hidden; background-color:#FFFFFF; border-top:1px solid #DEDEDE; margin:10px 0 10px 0}

.content .table_css01 { width:100%; table-layout:fixed;  }
.content .table_css01 th.table_head { border-top:2px solid #DEDEDE; border-bottom:1px solid #DEDEDE; padding:10px 0 10px 0; text-align:center; color:#373737; font-weight:500; background-color:#FAFAFA; }
.content .table_css01 td.table_con { border-bottom:1px solid #DEDEDE; padding:10px 0 10px 0; color:#575757; font-weight:400; background-color:#FFFFFF; text-align:left; font-size:0.9em; }
.content .table_css01 td.table_con.cen { text-align:center; }



.checks {position: relative;}

.checks input[type="checkbox"] {  /* 실제 체크박스는 화면에서 숨김 */
  position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip:rect(0,0,0,0);
   border: 0
}
.checks input[type="checkbox"] + label {
  display: inline-block;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
.checks input[type="checkbox"] + label:before {  /* 가짜 체크박스 */
  content: ' ';
  display: inline-block;
  width: 18px;  /* 체크박스의 너비를 지정 */
  height: 18px;  /* 체크박스의 높이를 지정 */
  line-height: 18px; /* 세로정렬을 위해 높이값과 일치 */
  text-align: center; 
  vertical-align: middle;
  background: #FFFFFF;
  border: 1px solid #cacece;
  border-radius : 3px;
  box-shadow: 0px 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
  margin:-2px 8px 0 10px;
}
.checks input[type="checkbox"] + label:active:before,
.checks input[type="checkbox"]:checked + label:active:before {
  box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}

.checks input[type="checkbox"]:checked + label:before {  /* 체크박스를 체크했을때 */ 
  content: '\2714';  /* 체크표시 유니코드 사용 */
  color: #2c786c;
  text-shadow: 1px 1px #fff;
  background: #FFFFFF;
  border-color: #adb8c0;
  box-shadow: 0px 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
}


.checks input[type="radio"] {  /* 실제 체크박스는 화면에서 숨김 */
  position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip:rect(0,0,0,0);
   border: 0
}
.checks input[type="radio"] + label {
  display: inline-block;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
.checks input[type="radio"] + label:before {  /* 가짜 체크박스 */
  content: ' ';
  display: inline-block;
  width: 18px;  /* 체크박스의 너비를 지정 */
  height: 18px;  /* 체크박스의 높이를 지정 */
  line-height: 18px; /* 세로정렬을 위해 높이값과 일치 */
  text-align: center; 
  vertical-align: middle;
  background: #FFFFFF;
  border: 1px solid #cacece;
  border-radius : 10px;
  box-shadow: 0px 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
  margin:-2px 6px 0 10px;
}
.checks input[type="radio"] + label:active:before,
.checks input[type="radio"]:checked + label:active:before {
  box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}

.checks input[type="radio"]:checked + label:before {  /* 체크박스를 체크했을때 */ 
  content: '\2714';  /* 체크표시 유니코드 사용 */
  color: #2c786c;
  text-shadow: 1px 1px #fff;
  background: #FFFFFF;
  border-color: #adb8c0;
  box-shadow: 0px 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
}