@charset "utf-8";
@import "svg-icon.css";

/*========= common =========*/
img {vertical-align: middle;}
a {text-decoration: none;	color: #333;}
.wrapper-toolbar {position: relative;}
.wrapper-toolbar:before, .wrapper-toolbar:after {content: "";	display: table;	clear: both;}
.pull-left {float: left !important;}
.pull-right {float: right !important;}
.show {display: block !important;}
.hidden {display: none !important}
.center {text-align: center !important;}
.left {text-align: left !important;}
.right {text-align: right !important;}
.vertical-sort-table {display: table;	width: 100%;	height: 100%;}
.vertical-sort-table-cell {display: table-cell;	vertical-align: middle;}
/* container layout */
.wrapper-container .vertical-sort-table {text-align: center;}
.wrapper-container .vertical-sort-table .vertical-sort-table-cell {padding: 100px 0;}

.btn {
  display: inline-block;
  margin-bottom: 0;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 1px solid #d4d4d4;
  white-space: nowrap;
  padding: 4px 6px 2px 6px;
  line-height: 1;
  user-select: none;
	word-wrap: normal;
	text-decoration: none;
	font-size: 12px;
	background-color: transparent;
}
.btn-group {
	overflow: hidden;
	margin-top: 20px;	
}
.btn-group .btn {
	/*float: left;*/
	width: 48%;
	/*margin: 0 1%;*/
	padding: 12px 3px;
	box-sizing: border-box;
	/*letter-spacing: -1px;*/
}
.badge {
  display: inline-block;
  min-width: 10px;
  padding: 3px 7px;
  font-size: 11px;
  font-weight: bold;
  color: #ffffff;
  line-height: 1;
  vertical-align: baseline;
  white-space: nowrap;
  text-align: center;
  background-color: #dd1a1a;
  border-radius: 10px;
}
.form-control {
  display: block;
  width: 100%;
  height: 35px;
  line-height: 1;
  color: rgb(0, 0, 0);
  background-color: rgb(255, 255, 255);
  background-image: none;
  padding: 3px 6px;
  border-width: 1px;
  border-style: solid;
  border-color: #e7e7e7;
  border-image: initial;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  box-sizing: border-box;
}

/* grid */
.row {
	margin-left: -1px;
	margin-right: -1px
}
.col-xs-1,
.col-sm-1,
.col-md-1,
.col-lg-1,
.col-xs-2,
.col-sm-2,
.col-md-2,
.col-lg-2,
.col-xs-3,
.col-sm-3,
.col-md-3,
.col-lg-3,
.col-xs-4,
.col-sm-4,
.col-md-4,
.col-lg-4,
.col-xs-5,
.col-sm-5,
.col-md-5,
.col-lg-5,
.col-xs-6,
.col-sm-6,
.col-md-6,
.col-lg-6,
.col-xs-7,
.col-sm-7,
.col-md-7,
.col-lg-7,
.col-xs-8,
.col-sm-8,
.col-md-8,
.col-lg-8,
.col-xs-9,
.col-sm-9,
.col-md-9,
.col-lg-9,
.col-xs-10,
.col-sm-10,
.col-md-10,
.col-lg-10,
.col-xs-11,
.col-sm-11,
.col-md-11,
.col-lg-11,
.col-xs-12,
.col-sm-12,
.col-md-12,
.col-lg-12 {
	position: relative;
	min-height: 1px;
	padding-left: 1px;
	padding-right: 1px
}
.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11,
.col-xs-12 {
	float: left
}
.col-xs-12 {
	width: 100%
}
.col-xs-11 {
	width: 91.66666667%
}
.col-xs-10 {
	width: 83.33333333%
}
.col-xs-9 {
	width: 75%
}
.col-xs-8 {
	width: 66.66666667%
}
.col-xs-7 {
	width: 58.33333333%
}
.col-xs-6 {
	width: 50%
}
.col-xs-5 {
	width: 41.66666667%
}
.col-xs-4 {
	width: 33.33333333%
}
.col-xs-3 {
	width: 25%
}
.col-xs-2 {
	width: 16.66666667%
}
.col-xs-1 {
	width: 8.33333333%
}

/* table */
table {
	border-collapse: collapse;
	border-spacing: 0;
}
caption {
	padding-top: 2px;
	padding-bottom: 2px;
	color: #999;
	text-align: left
}
th {
	text-align: left
}
.table {
	table-layout: fixed;
	width: 100%;
	margin-bottom: 5px;
	border-color: #d4d4d4;
	border-width: 1px
}
.table-layout-auto {
	table-layout: auto
}
.table-width-auto {
	width: auto
}
.table>thead>tr>th,
.table>tbody>tr>th,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>tbody>tr>td,
.table>tfoot>tr>td {
	padding: 8px;
	line-height: 1.42857143;
	word-wrap: break-word;
	vertical-align: middle;
	border-color: #d4d4d4;
	border-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
}
.table>thead>tr>th,
.table>tbody>tr>th,
.table>tfoot>tr>th {
	border-bottom-style: solid;
	background-color: #f7f7f7;
	text-align: center;
	color: #333;
	/*padding-top: 6px;*/
	padding:7px;
	font-weight: normal
}
.table>caption+thead>tr:first-child>th,
.table>colgroup+thead>tr:first-child>th,
.table>thead:first-child>tr:first-child>th,
.table>caption+thead>tr:first-child>td,
.table>colgroup+thead>tr:first-child>td,
.table>thead:first-child>tr:first-child>td {
	border-top-color: #9bb0be
}
.table .table {
	background-color: #fff
}
.table-condensed>thead>tr>th,
.table-condensed>tbody>tr>th,
.table-condensed>tfoot>tr>th,
.table-condensed>thead>tr>td,
.table-condensed>tbody>tr>td,
.table-condensed>tfoot>tr>td {
	padding: 2px
}
.table-bordered {
	border-style: solid
}
.table-bordered>thead>tr>th,
.table-bordered>tbody>tr>th,
.table-bordered>tfoot>tr>th,
.table-bordered>thead>tr>td,
.table-bordered>tbody>tr>td,
.table-bordered>tfoot>tr>td {
	border-style: solid
}
.table-striped>tbody>tr:nth-of-type(odd) {
	background-color: #f9f9f9
}
tr.tr-striped {
	background-color: #f1f1f1
}
.table-border-no-a, 
.table-border-no-a th, 
.table-border-no-a td {
	border-style: none !important;
}
.table-hover>tbody>tr.tr-striped:hover>td {
	background-color: #e5e5e5
}
.table-hover>tbody>tr:hover {
	background-color: #f2f2f2
}
.table .th-hover,
.table .td-hover {
	background-color: #e5e5e5 !important
}
.table-form th {
	font-size: 12px;
	text-align: center !important;
}
.table-form .form-control {
	height: 32px;
}

/* input-group */
.input-group {
	position: relative;
	display: table;
	border-collapse: separate
}
.input-group[class*="col-"] {
	float: none;
	padding-left: 0;
	padding-right: 0
}
.input-group .form-control {
	position: relative;
	z-index: 2;
	float: left;
	width: 100%;
	margin-bottom: 0
}
.input-group-addon,
.input-group-btn,
.input-group .form-control {
	display: table-cell
}
.input-group-addon,
.input-group-btn {
	width: 1%;
	white-space: nowrap;
	vertical-align: middle
}
.input-group-addon {
	padding: 0 4px;
	font-weight: normal;
	line-height: 1;
	color: #000;
	text-align: left;
	/*background-color: #f8f8f8;*/
	/*border: 1px solid #d4d4d4*/
}
.table .input-group-addon {
	background-color: transparent;
	border-style: none
}
.input-group-addon:first-child,.input-group-addon+.input-group-addon {
	padding-left: 0
}
.input-group-addon:last-child {
	border-left: 0
}
.input-group-btn {
	position: relative;
	font-size: 0;
	white-space: nowrap
}
.input-group-btn>.btn {
	position: relative
}
.input-group-btn>.btn+.btn {
	margin-left: -1px
}
.input-group-btn>.btn:hover,
.input-group-btn>.btn:focus {
	z-index: 2
}
.input-group-btn:first-child>.btn,
.input-group-btn:first-child>.btn-group {
	/*margin-right: -1px*/
}
.input-group-btn:last-child>.btn,
.input-group-btn:last-child>.btn-group {
	/*margin-left: -1px*/
}
td[colspan] .input-group {
	width: 100%
}
.form-control-border-no .input-group.input-group-inverse .input-group-btn>.btn {
	border-style: none
}
.input-group>.dropdown-menu,
input.form-control~.dropdown-menu,
.ui-autocomplete {
	max-height: 300px;
	overflow-y: auto
}
.input-group>.dropdown-menu>li>a.ui-state-focus,
input.form-control~.dropdown-menu>li>a.ui-state-focus,
.ui-autocomplete>li>a.ui-state-focus {
	color: #000;
	background-color: #ddd;
	cursor: pointer
}
.input-group.input-group-inverse .input-group-addon,
.input-group.input-group-inverse .input-group-btn>.btn {
	background-color: transparent
}
.wrapper-grid .input-group.input-group-code {
	display: block
}
.wrapper-grid .input-group.input-group-code .input-group-btn {
	position: absolute
}

/* font color */
.text-red {
	color: #f43142 !important;
}

/*========= layout =========*/
* {
	box-sizing: border-box;
}
html {
	overflow-y: scroll;
}
html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	font-family:'나눔고딕',NanumGothic,'맑은고딕',Malgun Gothic,'돋움',Dotum,Helvetica,'Apple SD Gothic Neo',Sans-serif;
	font-size: 15px;
}
.wrapper {
	max-width: 990px;
	margin: 0 auto;
}

/*========= header =========*/
.wrapper-header {
	position: relative;
}
.wrapper-header .wrapper-logo {
	height: 58px;
	background: url(../images/bg-logo.jpg) no-repeat right center;
}
.wrapper-header .wrapper-logo h1 {
	position: absolute;
	top: 14px;
	left: 0;
	width: 209px;
	height: 29px;
	background: url(../images/logo.jpg) no-repeat right center;
	margin: 0;
	padding: 0;
}
.wrapper-header .quick-menu {
	position: relative;
	min-height: 21px;
	padding: 10px 40px 10px;
	border-radius: 30px;
	background-color:#4177b3;
}
.wrapper-header .quick-menu .user-info {
	color: #fff;
}
.wrapper-header .quick-menu .change-password {
	position: absolute;
	top: 0;
	right: 0;
	width: 270px;
	min-height: 21px;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-right: 40px;
	text-align: right;
	border-radius: 30px;
	background-color: #204675;
}
.wrapper-header .quick-menu .change-password a {
	color: #fff;
	text-decoration: none;
}

/*========= container =========*/
.wrapper-container .login-title {
	font-size: 28px;
	color: #386baa;
	letter-spacing: -0.5px; 
}
.wrapper-container .login-notice {
	margin-top: 30px;
	font-size:1.2em;
}
.wrapper-container .contents {
	width: 550px;
	margin: 0 auto;
}
.wrapper-container .login-form {
	position: relative;
	margin-top: 50px;
}
.wrapper-container .login-form .input-group:first-child {
	margin-bottom: 10px;
}
.wrapper-container .login-form .input-group .input-group-addon {
	width: 100px;
	padding-left: 10px;
}
.wrapper-container .login-form .input-group .form-control {
	margin-left: -1px;
	border-radius: 0;
	border-color: #d4d4d4;
}
.wrapper-container .login-form .login-btn {
	position: absolute;
	top: 0;
	right: 0;
	width: 110px;
	height: 80px;
	line-height: 72px;
	border-radius:2px;
	background-color:#386baa;
	border:none;
	color:#fff;
	font-weight:bold;
	letter-spacing:1px;
}
.wrapper-container .login-btn-group {
	margin-top: 50px;
}
.wrapper-container .login-btn-group .btn {background-color:#eee;}

/*추가 hyuna*/
* {margin:0; padding:0;}
ul,li {list-style:none;}
button {border:0 none;background-color:transparent;cursor:pointer}
.float-left {float:left;}
.float-right {float:right;}
.text-center {text-align:center !important;}
.text-left {text-align:left !important;}
.text-right {text-align:right !important;}
.text-bold {font-weight: bold;}
.mt-10 {margin-top:10px !important;}
.mt-20 {margin-top:20px !important;}
.mt-30 {margin-top:30px !important;}
.mt-50 {margin-top:50px !important;}
.mb-10 {margin-bottom:10px !important;}
.mb-20 {margin-bottom:20px !important;}
.mb-30 {margin-bottom:30px !important;}
.pro-icon {vertical-align:middle;}
.icon-add:before, .icon-add:after {font-family:'proicon' !important; vertical-align: middle;}
.caution-txt {display:inline-block; position:relative; top:8px; }
.table-form {border-top:1px solid #666;}
.table-form tbody tr:first-child th {border-top:1px solid #666 !important;} 
.table-form tbody tr:first-child td {border-top:1px solid #666 !important;} 
table .text-field {display:block; height:32px; padding-left:3px; text-align:left; line-height:2.5; box-sizing:border-box;}
.contents.login {width:422px;}
.btn.btn-form {height:32px; border-color:#bcbcbc; letter-spacing:-0.3px;}
.btn.pass {font-size:13px; color:#386baa; background-color:#386baa; border:1px solid #386baa; color:#fff; font-weight:bold;  }
.btn.cancel {font-size:13px; font-weight:bold; background-color:#fff; border:1px solid #bcbcbc; }
.btn.pass:hover {border:1px solid #386baa; background-color:#fff; color:#386baa; }
.btn.cancel:hover { border:1px solid #ddd; background-color:#ddd; color:#333; }
.btn.normal:hover {border:1px solid #666;}
.btn.login-btn:hover {border:1px solid #386baa; background-color:#fff; color:#386baa;}
.btn.btn-form:hover {background-color:#eee;}
.contents .result-txt {padding:50px; line-height:1.5;}
.contents .result-txt .email {display:inline-block; color:#386baa; text-decoration:underline;}
.contents .result-txt .temp-password {display:inline-block; position:relative; font-weight:bold;}
.contents .form-type-area {border:1px solid #cacaca; padding:20px 30px;}
.contents .form-type-area h2 {text-align: left; padding:3px; padding-bottom:10px;}
.row:after {display:block; content:''; clear:both;} 
.guide-txt {margin-top:-10px; text-align:left; padding:7px;}
.guide-txt-bottom {text-align:left; padding:10px; color:#666;}
.wrapper-container .vertical-sort-table .vertical-inner {position: relative; min-width:1100px;}
.wrapper-container .vertical-sort-table .vertical-inner .tab-contain h2 {margin-top:10px;}
.wrapper-container .vertical-sort-table .vertical-inner table.form-write .row > div > .form-control {height:30px;}
.wrapper-container .vertical-sort-table .vertical-inner table.form-write .mb-space .form-control {margin-bottom:5px;}
.wrapper-container .vertical-sort-table .vertical-inner table.form-write td {text-align:left;}
.wrapper-container .vertical-sort-table .vertical-inner h4 {margin:40px 0 15px; font-size:13px;}
.wrapper-container .vertical-sort-table .vertical-inner .tip-txt {position:relative; margin-top:12px; padding-bottom:5px; text-align:left; font-size:1em; color:#386baa;}
.wrapper-container .vertical-sort-table .vertical-inner .tip-txt > span {display:block; padding-left:12px; }
.wrapper-container .vertical-sort-table .vertical-inner .tip-txt > span:before {position:absolute; left:0; top:1px; font-family:'proicon'; content:'\e90a';}
.wrapper-container .vertical-sort-table .vertical-inner .tip-txt > span:nth-child(2):before {position:absolute; left:0; top:19px; font-family:'proicon'; content:'\e90a';}
.wrapper-container .vertical-sort-table .vertical-inner .tab-form {position:relative; height:42px; margin-bottom:50px;}
.wrapper-container .vertical-sort-table .vertical-inner .tab-form ul {height:100%; border:1px solid #cacaca; border-top:1px solid #666;}
.wrapper-container .vertical-sort-table .vertical-inner .tab-form ul:after {display:block; content:''; clear:both;}
.wrapper-container .vertical-sort-table .vertical-inner .tab-form li {position:relative; height:100%; float:left; border-right:1px solid #cacaca; padding-top:6px; font-size:12px; box-sizing:border-box;}
.wrapper-container .vertical-sort-table .vertical-inner .tab-form li:first-child:nth-last-child(11),
.wrapper-container .vertical-sort-table .vertical-inner .tab-form li:first-child:nth-last-child(11)~li {width: 9.09090909%;}
.wrapper-container .vertical-sort-table .vertical-inner .tab-form li:first-child:nth-last-child(12),
.wrapper-container .vertical-sort-table .vertical-inner .tab-form li:first-child:nth-last-child(12)~li {width: 8.33333333%;}
.wrapper-container .vertical-sort-table .vertical-inner .tab-form li:last-child {border:none}
.wrapper-container .vertical-sort-table .vertical-inner .tab-form li.selected {background-color:#f1f6fa;}
.wrapper-container .vertical-sort-table .vertical-inner .tab-form li.selected:before {content:''; position:absolute; top:-1px; left:-1px; right:-1px; height:4px; background-color:#125fad;}
.wrapper-container .vertical-sort-table .vertical-inner .tab-form li.selected a {color:#125fad; font-weight:bold;}
.wrapper-container .vertical-sort-table .vertical-inner .tab-form li a {display:block; line-height:1.2;}
.wrapper-container .vertical-sort-table .vertical-inner .tab-form li a:hover span {text-decoration:underline;}
.wrapper-container .vertical-sort-table .vertical-inner .tab-form li:after {position:absolute; content:'\e907'; right:5px; top:14px; width:10px; height:10px; font-family:proicon; color:#125fad; opacity:0; transform:translateY(-3px); transition:all 0.2s ease;}
.wrapper-container .vertical-sort-table .vertical-inner .tab-form li:hover:after {opacity:1; transform:translateY(0);}
.wrapper-container .vertical-sort-table .vertical-inner .tab-form li.selected:hover span {text-decoration:none;}
.wrapper-container .vertical-sort-table .vertical-inner .tab-form li.selected:hover:after {opacity:0;}
.wrapper-container .vertical-sort-table .vertical-inner .tab-form li a > span {display:block; font-size:13px; font-weight:bold;}
.wrapper-container .vertical-sort-table .vertical-inner .tab-form li.submit {padding-top:12px;}
.wrapper-container .vertical-sort-table .vertical-inner .des-txt {position:relative; margin-bottom:10px; text-align:left;}
.wrapper-container .vertical-sort-table .vertical-inner .des-txt > span {display:block; padding-left:14px; }
.wrapper-container .vertical-sort-table .vertical-inner .des-txt > span:before {position:absolute; left:0; top:1px; font-family:'proicon'; content:'\e924';}
.wrapper-container .vertical-sort-table .vertical-inner .tab-contain .tab-contain-inner {padding:0 100px;}
.wrapper-container .vertical-sort-table .vertical-inner .tab-contain textarea {height:auto;}
.wrapper-container .vertical-sort-table .vertical-inner .tab-contain

.form-btn {font-size:12px; background-color:#eee; padding:3px 5px; letter-spacing:-0.5px; border:1px solid #cacaca; border-radius:2px;}
.ques-box {padding:10px;}
.radio-box {padding:10px;}
.radio-inline {padding:0 10px;}
.radio-inline input {vertical-align: middle}
.radio-inline .txt {vertical-align:middle;}

.hyphen {padding-top: 7px; text-align: center;}


/*버튼 추가*/
.button {
	display: inline-block;
	margin-top: 20px;	
	width: 140px;
	height: 40px;
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 2.5px;
	font-weight: 500;	
	transition: all 0.2s ease 0s;
	cursor: pointer;
	outline: none;
	line-height: 40px;
}

.button_confirm{
	display: inline-block;
	margin-right: 30px;
	color: #fff;
	background-color: #386BAA;
	border: none;
	border-radius: 5px;
	box-shadow: 0px 8px 15px rgba(32, 70, 117, 0.8);
	line-height: 40px;
}
.button_cancle{
	display: inline-block;
	color: #000
	background-color: #fff;
	border: 1px solid #666;
	border-radius: 5px;
	box-shadow: 0px 8px 15px rgba(32, 70, 117, 0.5);
	line-height: 40px;
}

.button:hover {
	display: inline-block;
	background-color: #204675;
	box-shadow: 0px 15px 20px rgba(32, 70, 117, 0.8);
	color: #fff;
	transform: translateY(-2px);
	line-height: 40px;
}
.button_cancle:hover {
	display: inline-block;
	background-color: #aaa;
	box-shadow: 0px 15px 20px rgba(119, 119, 119, 0.3);
	color: #fff;
	transform: translateY(-2px);
	border: 1px solid #999;
	line-height: 40px;
}

/* footer 추가 */
.copylight{
	padding: 30px; 
	text-align: center; 
	background: #777; 
	color: #fff; 
	line-height: 19px;

}

.wrapper-container .tab-contain .tab-contain-inner .end-content {font-size:14px; line-height:24px; color:#696969;}
.wrapper-container .tab-contain .tab-contain-inner .end-content .radio-box {margin:30px auto 20px; padding:30px; background-color:#f9f9f9; box-sizing:border-box;}
.wrapper-container .container {}
.wrapper-container .container h2 {text-align:left; padding-bottom:12px;}
.btn-type {position:relative; padding-bottom:10px;}
.btn-type.top {text-align: right;}
.btn-type.bottom {text-align: center; margin-top:20px;}
.btn-type .btn {font-size:13px; font-weight:bold; height:30px; padding:0 20px; margin:5px; }
.btn-type .btn.pass {background-color:#386baa; color:#fff; }
.btn-type .btn.pass:hover {background-color:#2f7bda;}
.btn-type .btn.print {background-color:#eee; border:1px solid #d4d4d4; color:#666; transition:all 0.2s ease;}
.btn-type .btn.print:hover {border-color:#666;}
.gap {float:left; padding:7px 2px;}
.wrapper-container .container .select-date {float:left; position: relative; top:5px; width:24px; height:24px; padding:0 14px; background:url(../images/icon_calendar.png) no-repeat center center; cursor: pointer;}
.wrapper-container .container .select-area {position:relative;}
.wrapper-container .container .select-area .select-name {display:block; padding:10px; float:left;}
.wrapper-container .container .select-area .btn-type {position:absolute; right:0; top:0; padding:0; font-size:0;}
.wrapper-container .container .select-area .btn-type .btn {margin:0;}
.wrapper-container .container .situ-info {position:relative; width:70%; height:60px; padding-top:22px; margin:30px auto; background-color:#f9f9f9; border:1px solid #cacaca; font-size:1.1em; border-radius:7px; box-sizing:border-box;}
.wrapper-container .container .situ-info li {width:50%; padding-left:60px; float:left; text-align:center}
.wrapper-container .container .situ-info li:after {display:block; content:''; clear:both;}
.wrapper-container .container .situ-info li > div {float:left; padding-right:10px; position:relative;}
.wrapper-container .container .situ-info li > .situ-info-tt {position:relative; }
.wrapper-container .container .situ-info li > .situ-info-tt:before {content:'\e90a'; position:relative; left:-1px; color:#386baa;}
.wrapper-container .container .situ-info li > div > span {font-weight: bold;}

.zip_btn{background-color: #ddd; text-align: center; font-size: 14px; font-weight: 600; border-radius: 5px; border: 1px solid silver; display: inline-block; color: #000; padding: 5px 10px; cursor: pointer;}