@charset "utf-8";

@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);
/* font-family: 'Noto Sans KR', sans-serif; */
/* Thin 250, Light 300, DemiLight 350, Regular 400, Medium 500, Bold 700, Black 900 */
/* 100, 300,400, 500,700,900 */
/* 이슈 : 2018년 01월 15일 나눔웹폰트를 시작으로 01월 24일 본고딕 웹폰트 링크 변경으로  */
/*
@font-face {
	font-family: 'Nanum Gothic';
	font-style: normal;
	font-weight: 400;
	src: url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Regular.eot);
	src: url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Regular.eot?#iefix) format('embedded-opentype'),
		url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Regular.woff2) format('woff2'),
		url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Regular.woff) format('woff'),
		url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Regular.ttf) format('truetype');
}
@font-face {
	font-family: 'Nanum Gothic';
	font-style: normal;
	font-weight: 700;
	src: url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Bold.eot);
	src: url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Bold.eot?#iefix) format('embedded-opentype'),
		url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Bold.woff2) format('woff2'),
		url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Bold.woff) format('woff'),
		url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Bold.ttf) format('truetype');
}
@font-face {
	font-family: 'Nanum Gothic';
	font-style: normal;
	font-weight: 800;
	src: url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-ExtraBold.eot);
	src: url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-ExtraBold.eot?#iefix) format('embedded-opentype'),
		url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-ExtraBold.woff2) format('woff2'),
		url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-ExtraBold.woff) format('woff'),
		url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-ExtraBold.ttf) format('truetype');
}
*/

@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 100;
	src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff2) format('woff2'),	
		url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff) format('woff'),
		url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.otf) format('opentype');
}
@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 300;
	src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff2) format('woff2'),	
		url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff) format('woff'),
		url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.otf) format('opentype');
}
@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 400;
	src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff2) format('woff2'),	
		url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff) format('woff'),
		url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.otf) format('opentype');
}
@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 500;
	src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff2) format('woff2'),	
		url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff) format('woff'),
		url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.otf) format('opentype');
}
@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 700;
	src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff2) format('woff2'),	
		url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff) format('woff'),
		url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.otf) format('opentype');
}
@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 900;
	src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff2) format('woff2'),	
		url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff) format('woff'),
		url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.otf) format('opentype');
}
/*
# Nanum Gothic (Korean) http://www.google.com/webfonts/earlyaccess
Regular 400,
Bold 700 
800
*/

/* @import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css); */

/*
# Nanum Barun Gothic
UltraLight 200,
Light 300,
Regular 400,
Bold 700

@import url("https://cdn.rawgit.com/openhiun/hangul/14c0f6faa2941116bb53001d6a7dcd5e82300c3f/nanumbarungothic.css");
*/


/* Base Style Start */
/* * {margin: 0; padding: 0; border: 0; box-sizing: border-box; -moz-box-sizing: border-box;} */

html, body {position: relative; width: 100%; height: 100%; margin: 0px auto; padding: 0;}
body, div, ul, li, dl, dt, dd, ol, p, h1, h2, h3, h4, h5, h6, table, form {margin: 0; padding: 0; border: 0;}

body {
	position: relative;
	font-family: 'Noto Sans KR', 'Nanum Gothic', 'Malgun Gothic', '맑은 고딕', sans-serif; word-break: keep-all; /* word-break: break-all; */ word-wrap: break-word;
	font-size : 14px; font-weight: normal; color: #666;
	background-color: #f9f9f9;

	min-width: 320px;
}
/* Base Style End */
/* Text Base Style Start */
dl, dt, dd, ul, ol, li, p {list-style : none; /* for smartEditor text-align : justify; */ vertical-align : middle; letter-spacing : 0px; line-height: 1.5em; }

h1 {font-weight: bold; color: #222; font-size: 36px; line-height: 50px;}
h2 {font-weight: bold; color: #222; font-size: 30px; line-height: 40px;}
h3 {font-weight: bold; color: #222; font-size: 24px; line-height: 30px;}
h4 {font-weight: bold; color: #222; font-size: 18px; line-height: 30px;}
h5 {font-weight: bold; color: #222; font-size: 14px; line-height: 25px;}
h6 {font-weight: bold; color: #222; font-size: 12px; line-height: 20px;}

.bold	{font-weight: bold !important;}
.left	{text-align: justify !important;}
.center	{text-align: center !important;}
.right	{text-align: right !important;}

.round3 {border-radius: 3px; overflow: hidden;}
.round5 {border-radius: 5px; overflow: hidden;}
.round10 {border-radius: 10px; overflow: hidden;}

.pColor01 {color: #f9df34;}
.pColor01dark {}
.pColor01light {}
.pColoe01lightGray {}

.pColorRed {color: #d63434;}

/* Text Base Style Start */

img {border: none; margin: 0; padding: 0;}

/* a href Style Start */
a {letter-spacing: 0px;	margin: 0; text-align: justify; text-decoration: none; outline: 0; color: #444;}
a:hover {text-decoration: underline; color: #222;}
/* a href Style End */

.dummy {clear: both; width: 100%; height: 0; border: 0; margin: 0; padding: 0; line-height: 0; font-size: 0;}
.line01 {width: 100%; height: 1px; border: 0; margin: 0; padding: 0; line-height: 0; font-size: 0; background-color: #dddddd;}

.hidden {display: none;}

.clearFix:after {content:""; display: block; clear: both;} /* 부모창에 자식창의 높이를 알려주는 권장방법 */
.clearFix {*zoom: 1;} /* IE5.5 ~ 7 브라우저 대응 핵 */

/* form 요소 Start */
input[type=text],
input[type=textarea],
textarea {font-family: 'Noto Sans KR', 'Nanum Gothic', 'Malgun Gothic', '맑은 고딕', sans-serif; display: inline-block; vertical-align: middle; resize: none; margin-right: 10px;}
/*
input[type=checkbox] {width: 20px; height: 20px;}
input[type=radio] {width: 20px; height: 20px;}
*/
/* input[placeholder], [placeholder],*[placeholder] {color: #bbb !important; font-weight: bold; font-size: 14px !important;} */
/* Webkit Browsers */
/* Mozilla FF 4 ~ 18 */
/* Mozilla FF 19+ */
/* IE 10~ */
input::-webkit-input-placeholder,
input:-moz-placeholder,
input::-moz-placeholder,
input:-ms-input-placeholder {color: #999; font-weight: 300; font-size: 13px;}

textarea::-webkit-input-placeholder,
textarea:-moz-placeholder,
textarea::-moz-placeholder,
textarea:-ms-input-placeholder {color: #999; font-weight: 300; font-size: 13px;}

.formField {display: inline-block; height: 30px; line-height: 20px; box-sizing: border-box; padding: 4px; font-size : 13px; font-weight: normal; color : #333; vertical-align: middle; border: 1px #ddd solid; background-color: #fdfdfd; border-radius: 0px;} /* box-sizing: inherit; */
.formField:focus {border: 1px #444 solid; background-color: #fff;}
select {
	font-family: 'Noto Sans KR', 'Nanum Gothic', 'Malgun Gothic', '맑은 고딕', sans-serif;
	display: inline-block; height: 30px; line-height: 20px; padding: 4px; font-size : 13px; font-weight: normal; color : #333; vertical-align: middle; background-color : #fdfdfd; border: 1px #ddd solid;
	border-radius: 0px;
}
select:focus {border: 1px #444 solid; background-color : #fff;}
/* form 요소 End */

/* Table Base Style Start */
table {table-layout: fixed; width: 100%; margin: 10px auto; padding: 0; border-collapse: separate; border-spacing: 0; font-size: 14px; border-top: 2px #666 solid;}
table caption {display: none;}
table thead th {border-top: 1px #ddd solid; border-bottom: 1px #ddd solid;}
table thead th {color: #444; background-color: #f9f9f9; border-bottom: 1px #ddd solid; line-height: 30px; text-align: center; font-weight: 400;}
table th, table td {padding: 10px 10px 9px; border-left: 1px #ddd solid; border-right: 0; border-top: 0; font-weight: 300;}
table th:first-child, table td:first-child {border-left: 0;}
table td {color: #444; border-bottom: 1px #ddd solid; line-height: 1.6em;}
table tbody th {color: #444; font-weight: bold; background-color: #f9f9f9; border-bottom: 1px #ddd solid;  line-height: 30px; font-weight: 400; border-left: 1px #ddd solid;}
/* Table Base Style End */

/* Slide Animation */
.slideanim {visibility: hidden;}
.slide {
  animation-name: slide;
  -webkit-animation-name: slide;
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  visibility: visible;
}
@keyframes slide {
	0% {opacity: 0; transform: translateY(70%);} 
	100% {opacity: 1; transform: translateY(0%);}
}
@-webkit-keyframes slide {
	0% {opacity: 0; -webkit-transform: translateY(70%);} 
	100% {opacity: 1; -webkit-transform: translateY(0%);}
}

/* 웹접근성을 위한 본문 바로가기 : Navigation Skip (메뉴 스킵) */
.bind {position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: hidden; visibility: hidden; font-size: 0px; line-height: 0px;}
/* 웹접근성을 위한 본문 바로가기 : Navigation Skip (메뉴 스킵) */

#wrap {position: relative; width: 100%; height: 100%; padding: 0; margin: 0 auto;}


#header {position: relative; width: 100%; min-width: 1200px; height: 100px; background-color: #171d33;}
#gnb {position: relative; width: 1200px; height: 100px; margin: 0 auto;}
#gnb .gi {position: absolute; top: 20px; left: 0; display: block; width: 240px; height: 60px; z-index: 1;}
#gnb .gi a {display: block; width: 100%; height: 60px;}
#gnb .gi a img {float: left; width: 100%; height: 60px;}
#gnb .naviMenu {position: absolute; top: 0; left: 50%; margin-left: -210px; display: block; width: 420px; height: 100px; z-index: 1;}
#gnb .naviMenu > li {float: left; width: 140px; height: 100px;}
#gnb .naviMenu > li > a {display: block; width: 140px; height: 100px; line-height: 100px; font-size: 18px; font-weight: 300; color: #fff; text-align: center; transition: all 0.3s;}
#gnb .naviMenu > li > a:hover {color: #f54660; text-decoration: none;}
#gnb .link {position: absolute; top: 30px; right: 0; display: block; width: 330px; height: 40px; padding: 0; z-index: 1;}
#gnb .link > li {float: left; height: 40px;}
#gnb .link > li:nth-child(1) {width: 80px;}
#gnb .link > li:nth-child(2) {width: 100px;}
#gnb .link > li:nth-child(3) {width: 150px;}
#gnb .link > li > a {float: left; display: block; width: 100%; height: 100%; line-height: 40px; font-size: 13px; font-weight: 300; color: #fff; text-align: center; transition: all 0.3s;}
#gnb .link > li:nth-child(1) > a {background-color: #6078d0;}
#gnb .link > li:nth-child(2) > a {background-color: #404583;}
#gnb .link > li:nth-child(3) > a {background-color: #999999;}
#gnb .link > li:nth-child(1) > a:hover {background-color: #455bab;}
#gnb .link > li:nth-child(2) > a:hover {background-color: #2a2f65;}
#gnb .link > li:nth-child(3) > a:hover {background-color: #444;}


#container {position: relative; width: 100%; min-height: 800px; background: url('../../img/bgTitle.png') center top #f9f9f9; background-repeat: repeat-x;}
#container > .contentArea {position: relative; display: block; width: 1200px; margin: 0 auto;}
#container > .contentArea > h2 {width: 100%; height: 100px; box-sizing: border-box; padding: 20px; line-height: 60px; font-size: 42px; font-weight: 300; color: #222; text-align: center;}

/* main start */
#container > .contentArea > .serviceArea {position: relative; display: block; width: 1200px; height: 300px; margin: 0 auto 40px; }
#container > .contentArea > .serviceArea > li {float: left; width: 300px; height: 300px; box-sizing: border-box; padding: 30px;}
#container > .contentArea > .serviceArea > li:nth-child(1) {background: url('../../img/serviceTitleBg.png') center center no-repeat;}
#container > .contentArea > .serviceArea > li:nth-child(2) {background: url('../../img/service01Bg.png') center center no-repeat;}
#container > .contentArea > .serviceArea > li:nth-child(3) {background: url('../../img/service02Bg.png') center center no-repeat;}
#container > .contentArea > .serviceArea > li:nth-child(4) {background: url('../../img/service03Bg.png') center center no-repeat;}
#container > .contentArea > .serviceArea > li > h3 {display: block; width: 100%; height: 40px; line-height: 40px; font-size: 30px; font-weight: 500; color: #fff; text-align: right;}
#container > .contentArea > .serviceArea > li > h4 {display: block; width: 100%; height: 40px; line-height: 40px; font-size: 22px; font-weight: 400; color: #222; text-align: center;}
#container > .contentArea > .serviceArea > li > ul.detail {display: block; width: 100%; min-height: 150px; margin: 0 auto; background-color: #fff;}
#container > .contentArea > .serviceArea > li > ul.detail > li {position: relative; list-style: disc inside; width: 100%; height: 50px; box-sizing: border-box; padding: 10px; line-height: 30px; font-size: 14px; font-weight: 400; color: #666; border-bottom: 1px #eee solid;}
#container > .contentArea > .serviceArea > li > ul.detail > li:last-child {border-bottom: 0;}
#container > .contentArea > .serviceArea > li > ul.detail > li > .btArea {position: absolute; top: 10px; right: 10px; height: 30px; border-radius: 15px; z-index: 1; overflow: hidden;}
#container > .contentArea > .serviceArea > li > ul.detail > li > .btArea > li {float: left; width: 50px; height: 30px;}
#container > .contentArea > .serviceArea > li > ul.detail > li > .btArea > li > a {display: block; width: 100%; height: 100%; line-height: 30px; font-size: 11px; font-weight: 300; color: #fff; text-align: center; text-decoration: none; transition: all 0.3s;}

#container > .contentArea > .serviceArea > li > ul.detail > li > .btWide {width: 100px;}
#container > .contentArea > .serviceArea > li > ul.detail > li > .btWide > li:nth-child(1) > a {background-color: #6078d0;}
#container > .contentArea > .serviceArea > li > ul.detail > li > .btWide > li:nth-child(2) > a {background-color: #404583;}
#container > .contentArea > .serviceArea > li > ul.detail > li > .btMiddle {width: 50px;}
#container > .contentArea > .serviceArea > li > ul.detail > li > .btSmall {width: 30px;}
#container > .contentArea > .serviceArea > li > ul.detail > li > .btSmall > li {width: 30px;}
#container > .contentArea > .serviceArea > li > ul.detail > li > .btSmall > li > a {background-color: #404583;}
#container > .contentArea > .serviceArea > li > ul.detail > li > .btArea > li > a.btColor01 {background-color: #404583;}
#container > .contentArea > .serviceArea > li > ul.detail > li > .btArea > li > a.btColor02 {background-color: #c3ad89;}
#container > .contentArea > .serviceArea > li > ul.detail > li > .btArea > li > a.btColor03 {background-color: #8da759;}
#container > .contentArea > .serviceArea > li:nth-child(4) > ul.detail > li > .btWide > li:nth-child(1) > a {background-color: #b1d26f;}
#container > .contentArea > .serviceArea > li:nth-child(4) > ul.detail > li > .btWide > li:nth-child(2) > a {background-color: #8da759;}
#container > .contentArea > .serviceArea > li > ul.detail > li > .btArea > li > a:hover {background-color: #222 !important;} /* #f54660 */

#container > .contentArea > .guideArea {position: relative; display: block; width: 1200px; height: 360px; margin: 0 auto 40px; box-sizing: border-box; padding: 20px 0 30px; background: url('../../img/guideAreaBg.jpg') center center no-repeat;}
#container > .contentArea > .guideArea > h3 {display: block; width: 300px; height: 50px; margin: 0 auto; line-height: 50px; font-size: 22px; font-weight: 400; color: #fff; text-align: center; background: url('../../img/guideTitleBg.png') center center no-repeat;}
#container > .contentArea > .guideArea > .guideStep {width: 100%; height: 240px; margin: 20px auto 0;}
#container > .contentArea > .guideArea > .guideStep > li {float: left; width: 300px; height: 240px; box-sizing: border-box; padding: 0 30px;}
#container > .contentArea > .guideArea > .guideStep > li > .detail {position: relative; width: 100%; height: 240px; box-sizing: border-box; padding: 79px 20px 20px; border-top: 1px #404583 solid; background-color: #fff;}
#container > .contentArea > .guideArea > .guideStep > li > .detail > li.arrow {position: absolute; top: 110px; right: -10px; display: block; width: 10px; height: 20px; background: url('../../img/arrowRight.png') center center no-repeat; z-index: 1;}
#container > .contentArea > .guideArea > .guideStep > li > .detail > li.title {width: 100%; height: 40px; line-height: 40px; font-size: 18px; font-weight: 400; color: #222; text-align: center;} 
#container > .contentArea > .guideArea > .guideStep > li > .detail > li.comment {width: 100%; height: 40px; line-height: 20px; font-size: 13px; font-weight: 300; color: #777; text-align: center;} 
#container > .contentArea > .guideArea > .guideStep > li > .detail > li.link {width: 100%; height: 40px; padding-top: 10px;}
#container > .contentArea > .guideArea > .guideStep > li > .detail > li.link > a {display: block;	width: 120px; height: 40px; margin: 0 auto; line-height: 40px; font-size: 14px; font-weight: 400; color: #fff; text-align: center; background-color: #414a6a; transition: all 0.3s;}
#container > .contentArea > .guideArea > .guideStep > li:nth-child(3) > .detail > li.link > a {background-color: #c3ad89;}
#container > .contentArea > .guideArea > .guideStep > li > .detail > li.link > a:hover {background-color: #f54660;}
#container > .contentArea > .guideArea > .guideStep > li:nth-child(1) > .detail {background: url('../../img/icon_guideStep01.png') center 20px no-repeat #fff;}
#container > .contentArea > .guideArea > .guideStep > li:nth-child(2) > .detail {background: url('../../img/icon_guideStep02.png') center 20px no-repeat #fff;}
#container > .contentArea > .guideArea > .guideStep > li:nth-child(3) > .detail {background: url('../../img/icon_guideStep03.png') center 20px no-repeat #fff;}
#container > .contentArea > .guideArea > .guideStep > li:nth-child(4) > .detail {background: url('../../img/icon_guideStep04.png') center 20px no-repeat #fff;}

#container > .contentArea > .bnLinkArea {position: relative; display: block; width: 1200px; height: 60px; margin: 0 auto 60px;}
#container > .contentArea > .bnLinkArea > li {float: left; display: block; width: 200px; height: 60px; box-sizing: border-box; padding: 0 10px;}
#container > .contentArea > .bnLinkArea > li > a {display: block; width: 100%; height: 60px;}
/* main end */

/* login start */
#container > .contentArea > .loginArea {position: relative; display: block; width: 600px; height: 600px; margin: 0 auto 60px; box-sizing: border-box; padding: 69px; border: 1px #eee solid; background-color: #fff;}
#container > .contentArea > .loginArea > .titleText {width: 100%; height: 60px; margin-bottom: 10px; line-height: 30px; font-size: 24px; font-weight: 300; color: #222; text-align: center;}
#container > .contentArea > .loginArea > .titleText > span {font-weight: 400; color: #404583;}
#container > .contentArea > .loginArea > #loginForm {padding: 0; margin: 0 auto;}
	#loginForm > ul {width: 100%; margin: 0 auto;}
	#loginForm > ul > li {width: 100%; height: 60px; margin-bottom: 10px;}
	#loginForm > ul > li.memory {height: 40px; margin-bottom: 10px;}
	#loginForm > ul > li.memory > label {line-height: 40px; font-size: 16px; font-weight: 400; color: #666; margin-left: 10px;}
	#loginForm a {text-decoration: none; transition: all 0.3s;}
	#loginForm input[type=text],
	#loginForm input[type=password] {width: 100%; height: 60px; box-sizing: border-box; padding: 19px; border: 1px #eee solid; line-height: 20px; font-size: 18px; font-weight: 300; color: #222;}
	#loginForm .formBt {display: block; width: 100%; height: 60px; line-height: 60px; font-size: 18px; font-weight: 400; color: #fff; text-align: center;}
	#loginForm .loginBt {background-color: #6078d0;}
	#loginForm .joinBt {background-color: #404583;}
	#loginForm .forgetBt {float: left; width: 220px; height: 60px; background-color: #777e98;}
	#loginForm .certificateBt {float: right; width: 220px; height: 60px; background-color: #2a3250;}
/* login end */

/* join start */
#container > .contentArea > .joinAgreeArea {position: relative; display: block; width: 1200px; margin: 0 auto 40px; box-sizing: border-box; padding: 69px; border: 1px #eee solid; background-color: #fff;}
#container > .contentArea > .joinAgreeArea > h3 {width: 100%; height: 40px; line-height: 40px; font-size: 22px; font-weight: 400; color: #222; padding-bottom: 10px;}
#container > .contentArea > .joinAgreeArea > .agreeGuide {display: block; width: 100%; box-sizing: border-box; padding: 20px; line-height: 24px; box-sizing: border-box; padding: 20px; font-size: 16px; font-weight: 300; color: #666; background-color: #f5f5f5;}
#container > .contentArea > .joinAgreeArea > h4 {width: 100%; height: 40px; line-height: 40px; font-size: 18px; font-weight: 400; color: #222; padding-top: 20px;}
#container > .contentArea > .joinAgreeArea > p {width: 100%; line-height: 20px; font-size: 14px; font-weight: 300; color: #666; padding-bottom: 10px;}
#container > .contentArea > .joinAgreeArea > textarea {width: 100%; height: 200px; line-height: 20px; box-sizing: border-box; padding: 10px; border: 1px #eee solid; font-size: 13px; font-weight: 300; color: #666; background-color: #f7f6f2;}
#container > .contentArea > .joinAgreeArea > #pd {width: 100%; height: 600px; line-height: 20px; box-sizing: border-box; padding: 10px; border: 1px #eee solid; font-size: 13px; font-weight: 300; color: #666; background-color: #f7f6f2;}
#container > .contentArea > .joinAgreeArea > p.agreeChk {width: 100%; line-height: 30px;}
#container > .contentArea > .joinAgreeArea > p.agreeChk > label {line-height: 30px; font-size: 14px; font-weight: 400; color: #222;}

#container > .contentArea > .joinType {position: relative; width: 600px; height: 400px; margin: 40px auto 60px;}
#container > .contentArea > .joinType > li {float: left; width: 300px; height: 400px; box-sizing: border-box; padding: 0 10px;}
#container > .contentArea > .joinType > li > ul {display: block; width: 100%; height: 400px; box-sizing: border-box; padding: 39px 59px; border: 1px #eee solid;}
#container > .contentArea > .joinType > li > ul.person {background: url('../../img/joinPersonIcon.png') center 80px no-repeat #fff;} /* f6f5f2 */
#container > .contentArea > .joinType > li > ul.company {background: url('../../img/joinCompanyIcon.png') center 80px no-repeat #fff;} /* f2f3f8*/
#container > .contentArea > .joinType > li > ul > .title {width: 100%; height: 40px; line-height: 40px; font-size: 24px; font-weight: 400; color: #222; text-align: center;}
#container > .contentArea > .joinType > li > ul > .btSet {width: 100%; height: 150px; padding-top: 130px;}
#container > .contentArea > .joinType > li > ul > .btSet > a {display: block; width: 160px; height: 40px; margin-top: 10px; line-height: 40px; font-size: 16px; font-weight: 300; color: #fff; text-align: center; text-decoration: none;}
#container > .contentArea > .joinType > li > ul > .btSet > a.p01 {background-color: #6078d0;}
#container > .contentArea > .joinType > li > ul > .btSet > a.p02 {background-color: #404583;}
#container > .contentArea > .joinType > li > ul > .btSet > a.c01 {background-color: #777e98;}
#container > .contentArea > .joinType > li > ul > .btSet > a.c02 {background-color: #404583;}
#container > .contentArea > .joinType > li > ul > .btSet > a:hover {background-color: #f54660;}

#container > .contentArea > .joinFormArea {position: relative; display: block; width: 1200px; margin: 0 auto 40px; box-sizing: border-box; padding: 69px; border: 1px #eee solid; background-color: #fff;}
.joinFormTable input[type=text],
.joinFormTable input[type=password] {vertical-align: middle; height: 30px; margin: 3px 0; box-sizing: border-box; padding: 4px; line-height: 20px; font-size: 14px; font-weight: 300; color: #222; border: 1px #ddd solid;}
.joinFormTable a.btCheck {vertical-align: middle; display: inline-block; margin-left: 5px; max-width: 120px; padding: 0 10px; height: 30px; line-height: 30px; font-size: 13px; font-weight: 300; color: #fff; text-align: center; text-decoration: none; background-color: #666; transition: all 0.3s;}
.joinFormTable a.btCheck:hover {background-color: #222;}
#container > .contentArea > .joinFormArea > .joinFormBTArea {width: 440px; height: 50px; margin: 40px auto;}
#container > .contentArea > .joinFormArea > .joinFormBTArea > li {float: left; width: 220px; height: 50px; box-sizing: border-box; padding: 0 10px;}
#container > .contentArea > .joinFormArea > .joinFormBTArea > li > a {display: block; width: 200px; height: 50px; line-height: 50px; font-size: 16px; font-weight: 300; color: #fff; text-align: center; background-color: #6078d0; text-decoration: none; transition: all 0.3s;}
#container > .contentArea > .joinFormArea > .joinFormBTArea > li:nth-child(2) > a {background-color: #777;}
#container > .contentArea > .joinFormArea > .joinFormBTArea > li > a:hover {background-color: #171d33;}
/* join end */



/* service start */
#container > .contentArea > .serviceListArea {position: relative; display: block; width: 1200px; margin: 0 auto 40px; box-sizing: border-box; padding: 69px; border: 1px #eee solid; background-color: #fff;}
#container > .contentArea > .serviceListArea > h3 {width: 100%; height: 40px; line-height: 40px; font-size: 22px; font-weight: 400; color: #222; padding-bottom: 10px;}
#container > .contentArea > .serviceListArea > h4 {width: 100%; height: 40px; line-height: 40px; font-size: 18px; font-weight: 400; color: #222; padding-bottom: 10px;}
#container > .contentArea > .serviceListArea > table.serviceList th {font-size: 14px; font-weight: 400; color: #6078d0; background-color: #f0f4f7;}
#container > .contentArea > .serviceListArea > table.serviceList td {text-align: left; font-size: 14px; font-weight: 300; color: #222;}
#container > .contentArea > .serviceListArea > table.serviceList td.subject {}
#container > .contentArea > .serviceListArea > table.serviceList td.subject > a {text-align: left; font-size: 14px; font-weight: 400; color: #222;}
#container > .contentArea > .serviceListArea > table.serviceList td.num,
#container > .contentArea > .serviceListArea > table.serviceList td.link {text-align: center; color: #777;}
#container > .contentArea > .serviceListArea > table.serviceList td.link > a {display: block; width: 60px; height: 30px; margin: 0 auto; line-height: 30px; font-size: 13px; font-weight: 300; color: #fff; text-align: center; border-radius: 5px; background-color: #404583; text-decoration: none; transition: all 0.3s;}
#container > .contentArea > .serviceListArea > table.serviceList td.link > a:hover {background-color: #f54660;}

#alertPopup {position: absolute; top: 0px; left: 50%; margin-left: -450px; width: 900px; box-shadow: 0 0 5px 0 #777; background-color: #fff; z-index: 1000;} 
#alertPopup > .headerArea {position: relative; width: 100%; height: 60px; box-sizing: border-box; padding: 10px 20px; background-color: #444;} 
#alertPopup > .headerArea > h4 {width: 100%; height: 40px; line-height: 40px; font-size: 18px; font-weight: 400; color: #fff;}
#alertPopup > .headerArea > .closePopup {position: absolute; top: 15px; right: 20px; width: 30px; height: 30px; z-index: 1000;}
#alertPopup > .contentArea {width: 100%; min-height: 300px; box-sizing: border-box; padding: 20px; background-color: #fff;}
#alertPopup > .contentArea > table * {line-height: 20px; font-size: 12px; text-align: center;}

	.pagingArea {width: 100%; height: 30px; margin-top: 20px; text-align: center;}
	.pagingArea .pager {display: inline-block; height: 30px;}
	.pagingArea .btnPager {float: left; display: block; width: 30px; height: 30px; background-image: url('../../img/btnPager.png');}
	.pagingArea .btnFirst {background-position: 0 0;}
	.pagingArea .btnPrev {background-position: -30px 0;}
	.pagingArea .btnNext {background-position: -60px 0;}
	.pagingArea .btnEnd {background-position: -90px 0;}
	.pagingArea .btnFirst:hover {background-position: 0 -30px;}
	.pagingArea .btnPrev:hover {background-position: -30px -30px;}
	.pagingArea .btnNext:hover {background-position: -60px -30px;}
	.pagingArea .btnEnd:hover {background-position: -90px -30px;}
	.pagingArea a.page {float: left; display: block; width: 30px; height: 30px; line-height: 30px; font-size: 12px; font-weight: 300; text-align: center; color: #777;}
	.pagingArea a:hover.page {color: #fff; background-color: #444;}

#container > .contentArea > .serviceListArea > .serviceStep {width: 100%; height: 60px; padding-bottom: 40px;}
#container > .contentArea > .serviceListArea > .serviceStep > li {float: left; width: 25%; height: 60px; box-sizing: border-box; line-height: 58px; font-size: 18px; font-weight: 300; color: #777; text-align: center; border: 1px #ddd solid; border-right: 0; background-color: #eee; transition: all 0.3s;}
#container > .contentArea > .serviceListArea > .serviceStep > li:last-child {border-right: 1px #ddd solid;}
#container > .contentArea > .serviceListArea > .serviceStep > li.on {border: 0; line-height: 60px; color: #fff; background: url('../../img/arrowTop.png') center bottom no-repeat #404583;}

	.regFormTable input[type=text],
	.regFormTable input[type=password] {vertical-align: middle; height: 30px; margin: 3px 0; box-sizing: border-box; padding: 4px; line-height: 20px; font-size: 14px; font-weight: 300; color: #222; border: 1px #ddd solid;}
	.regFormTable textarea {width: 100%; height: 200px; line-height: 20px; box-sizing: border-box; padding: 10px; border: 1px #ddd solid; font-size: 13px; font-weight: 300; color: #666;}
	.regFormTable a.btCheck {vertical-align: middle; display: inline-block; margin-left: 5px; max-width: 120px; padding: 0 10px; height: 30px; line-height: 30px; font-size: 13px; font-weight: 300; color: #fff; text-align: center; text-decoration: none; background-color: #666; transition: all 0.3s;}
	.regFormTable a.btCheck:hover {background-color: #222;}
	.regFormTable span {font-weight: 400; color: #404583;}

#container > .contentArea > .serviceListArea > .serviceBtArea {width: 320px; height: 40px; padding-top: 40px; margin: 0 auto;}
#container > .contentArea > .serviceListArea > .serviceBtArea > li {float: left; width: 160px; height: 40px; box-sizing: border-box; padding: 0 10px;}
#container > .contentArea > .serviceListArea > .serviceBtArea > li > a {display: block; width: 140px; height: 40px; line-height: 40px; font-size: 16px; font-weight: 300; text-align: center; color: #fff; text-decoration: none; transition: all 0.3s;}
#container > .contentArea > .serviceListArea > .serviceBtArea > li:nth-child(1) > a {background-color: #777;}
#container > .contentArea > .serviceListArea > .serviceBtArea > li:nth-child(2) > a {background-color: #6078d0;}
#container > .contentArea > .serviceListArea > .serviceBtArea > li > a:hover {background-color: #171d33;}

#container > .contentArea > .serviceListArea > table.serviceMyList th {line-height: 20px; font-size: 13px; font-weight: 400; color: #6078d0; background-color: #f0f4f7;}
#container > .contentArea > .serviceListArea > table.serviceMyList td {text-align: center; line-height: 20px; font-size: 13px; font-weight: 300; color: #222;}
#container > .contentArea > .serviceListArea > table.serviceMyList td.subject {text-align: left; font-weight: 400;}
#container > .contentArea > .serviceListArea > table.serviceMyList td.num {text-align: center; color: #777;}
#container > .contentArea > .serviceListArea > table.serviceMyList tr:hover {cursor: pointer; background-color: #bbf3f7;}

#container > .contentArea > .serviceListArea > .scroll {overflow-x:scroll;}
#container > .contentArea > .serviceListArea > .scroll > table.serviceMyList {table-layout:fixed;}
#container > .contentArea > .serviceListArea > .scroll > table.serviceMyList th {line-height: 20px; font-size: 13px; font-weight: 400; color: #6078d0; background-color: #f0f4f7;}
#container > .contentArea > .serviceListArea > .scroll > table.serviceMyList td {text-align: center; line-height: 20px; font-size: 13px; font-weight: 300; color: #222;}
#container > .contentArea > .serviceListArea > .scroll > table.serviceMyList td.subject {text-align: left; font-weight: 400;}
#container > .contentArea > .serviceListArea > .scroll > table.serviceMyList td.num {text-align: center; color: #777;}
#container > .contentArea > .serviceListArea > .scroll > table.serviceMyList tr:hover {cursor: pointer; background-color: #bbf3f7;}

#container > .contentArea > .serviceListArea > .violationTotal {width: 100%; height: 40px; box-sizing: border-box; padding: 5px 0; line-height: 30px; font-size: 18px; font-weight: 400; color: #222;}
#container > .contentArea > .serviceListArea > .violationTotal > span {font-size: 13px; font-weight: 300; color: #777;}
#container > .contentArea > .serviceListArea > .violationTotal > span > u {font-weight: 700; color: #f54660; text-decoration: none;}
/* service end */

#bottom {position: relative; width: 100%; height: 120px;}
#bottom > .linkLine {width: 100%; height: 40px; margin: 0 auto; background-color: #2f343e;}
#bottom > .linkLine > a {display: block; width: 140px; height: 40px; margin: 0 auto; line-height: 40px; font-size: 14px; font-weight: 300; color: #fff; text-align: center; background-color: #222; transition: all 0.3s;}
#bottom > .linkLine > a:hover {background-color: #444;}
#bottom > .copyrightArea {width: 100%; height: 80px; box-sizing: border-box; padding: 20px 0; background-color: #3b414d;}
#bottom > .copyrightArea > .copyright {width: 100%; height: 40px; line-height: 20px; font-size: 13px; font-weight: 300; color: #fff; text-align: center;}
#bottom > .copyrightArea > .copyright > span {font-size: 12px; color: #868c98;}

#popWrap{position:absolute;top:50%;left:50%;width:640px;height:200px;margin:-180px 0 0 -320px;background-color:#fff}
#popWrap .pop-header{height:50px;border-bottom:1px solid #3d3d3d;background-color:#4f4f4f}
#popWrap .pop-header h1{height:31px;background-position:left 9px;background-repeat:no-repeat;font-size:16px;color:#fff;text-align:center !important}
#popWrap .pop-header h1 strong{font-size:30px;color:#fff}
#popWrap .pop-body h3{margin-bottom:10px;margin-left:4px;padding-left:20px;background-position:left 2px;background-repeat:no-repeat;font-size:14px;color:#4e4e4e;text-align:left !important}
#popWrap .pop-header a.close{position:absolute;top:7px;right:10px;width:18px;height:18px;background-position:left top;background-repeat:no-repeat;text-indent:-10000px}
#popWrap .pop-body{overflow:auto;height:220px;padding:5px  0;background-color:#fff;font-size:12px}
#popWrap .pop-body .table01{width:573px}
#popWrap .pop-body .table02{width:573px}
#popWrap .pop-body .section-button{margin:12px 0 0}
#popWrap .pop-body .fir-combine{margin-top:0 !important;margin-right:30px;padding-top:0 !important;background:none !important}
#popWrap .pop-body .combine{margin-top:10px;margin-right:30px;padding-top:10px;background-image:url(../images/sub/line-dash.gif);background-position:left top;background-repeat:repeat-x}
#popWrap .pop-body .combine:first-child{margin-top:0;padding-top:0;background:none}

.popWrap2 .pop-body h3 {
	margin: 20px 0 10px;
	margin-left: 4px;
	padding-left: 20px;
	background-image: url(../images/sub/icon-h3.gif);
	background-position: left 2px;
	background-repeat: no-repeat;
	font-size: 14px;
	color: #4e4e4e
}

.popWrap2 .pop-body h4 {
	margin-left: 5px
}

.popWrap2 .pop-body span.explain {
	display: inline-block;
	margin-left: 20px;
	font-size: 11px;
	font-weight: normal;
	color: #898a8a;
	text-align: left !important
}

.popWrap2 .pop-body span.explain strong {
	font-size: 11px;
	font-family: tahoma;
	color: #0181c9
}

.popWrap2 {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 800px;
	height: 340px;
	margin: -180px 0 0 -320px;
	background-color: #fff
}

.popWrap2 .pop-header {
	height: 50px;
	border-bottom: 1px solid #3d3d3d;
	background-color: #4f4f4f
}

.popWrap2 .pop-header h1 {
	height: 31px;
	margin-left: 15px;
	padding-top: 9px;
	padding-left: 14px;
	background-image: url(../images/sub/icon-pop-h1.png);
	background-position: left 9px;
	background-repeat: no-repeat;
	font-size: 16px;
	color: #fff;
	text-align: left !important
}

.popWrap2 .pop-header h1 strong {
	font-size: 16px;
	color: #fff
}

.popWrap2 .pop-body h3 {
	margin-top: 2px;
	margin-bottom: 2px;
	margin-left: 4px;
	padding-left: 20px;
	background-image: url(../images/sub/icon-h3.gif);
	background-position: left 2px;
	background-repeat: no-repeat;
	font-size: 14px;
	color: #4e4e4e;
	text-align: left !important
}

.popWrap2 .pop-header a.close {
	position: absolute;
	top: 7px;
	right: 10px;
	width: 18px;
	height: 18px;
	text-indent: -10000px
}

.popWrap2 .pop-body {
	overflow: auto;
	height: 220px;
	padding: 15px 25px 0;
	background-color: #fff;
	font-size: 12px
}

.popWrap2 .pop-body > table {
	margin: 0px;
	padding: 0px;
}

.popWrap2 .pop-body > table > td {
	margin: 0px;
	padding: 0px;
}

.popWrap2 .pop-body .section-button {
	margin: 12px 0 0
}

.popWrap2 .pop-body .fir-combine {
	margin-top: 0 !important; /* margin-right:30px; */
	padding-top: 0 !important;
	background: none !important
}

.popWrap2 .pop-body .combine {
	margin-top: 10px; /* margin-right:30px; */
	padding-top: 10px;
	background-image: url(../images/sub/line-dash.gif);
	background-position: left top;
	background-repeat: repeat-x
}

.popWrap2 .pop-body .combine:first-child {
	margin-top: 0;
	padding-top: 0;
	background: none
}

.popWrap2 .pop-body .combine h3 strong {
	font-size: 20px
}

.area {
	overflow: hidden;
	margin-top: 2px;
	margin-right: 10px
}

.popWrap2 .pop-body h3 {
	font-size: 14px;
	color: #4e4e4e
}

.popWrap2 .pop-body h4 {
	margin-bottom: 10px;
	margin-left: 5px
}

.popWrap2 .pop-body span.explain {
	display: inline-block;
	margin-left: 20px;
	font-size: 11px;
	font-weight: normal;
	color: #898a8a;
	text-align: left !important
}

.popWrap2 .pop-body span.explain strong {
	font-size: 11px;
	font-family: tahoma;
	color: #0181c9
}


.area{overflow:hidden;margin-top:23px !important;margin-right:15px}

.btnArea {width: 1060px; height: 40px; padding-top: 40px; margin: 0 auto;}

.btnArea > .btnR {float: right; width: 144px; height: 40px; box-sizing: border-box; padding: 0 2px;}
.btnArea > .btnR > a {display: block; width: 140px; height: 40px; line-height: 40px; font-size: 16px; font-weight: 300; text-align: center; color: #fff; text-decoration: none; transition: all 0.3s; background-color: #6078d0; }
.btnArea > .btnR > a:hover {background-color: #171d33;}

.btnArea > .btnL {float: left; width: 144px; height: 40px; box-sizing: border-box; padding: 0 2px;}
.btnArea > .btnL > a {display: block; width: 140px; height: 40px; line-height: 40px; font-size: 16px; font-weight: 300; text-align: center; color: #fff; text-decoration: none; transition: all 0.3s; background-color: #777; }
.btnArea > .btnL > a:hover {background-color: #171d33;}

#btnAreaC {position:absolute; width: 100%; height: 40px; padding-top: 40px; padding-bottom : 50px; margin: 0 auto;}
#btnAreaC > .btnC {float: center; width: 144px; height: 40px; box-sizing: border-box; padding: 0 2px; margin:0 auto;}
#btnAreaC > .btnC > a {display: block; width: 140px; height: 40px; line-height: 40px; font-size: 16px; font-weight: 300; text-align: center; color: #fff; text-decoration: none; transition: all 0.3s; background-color: #6078d0; }
#btnAreaC > .btnC > a:hover {background-color: #171d33;}

#btnAreaC2 {position:absolute; width: 860px; height: 40px; padding-top: 3px; padding-bottom : 3px; margin: 0 auto;}
#btnAreaC2 > .btnC {float: center; width: 144px; height: 40px; box-sizing: border-box;  margin:0 auto; padding:0px;}
#btnAreaC2 > .btnC > a {display: block; width: 140px; height: 40px; line-height: 40px; font-size: 16px; font-weight: 300; text-align: center; color: #fff; text-decoration: none; transition: all 0.3s; background-color: #6078d0; }
#btnAreaC2 > .btnC > a:hover {background-color: #171d33;}

input.max {width: 100% !important; *width: 99% !important} 
textarea.max {width: 100%; *width: 99%}

.data-transform {
	width: 720px;
	margin: 0
}

.right-area > h3 {width: 100%; height: 40px; line-height: 40px; font-size: 22px; font-weight: 400; color: #222; padding-bottom: 10px;}
.left-area > h3 {width: 100%; height: 40px; line-height: 40px; font-size: 22px; font-weight: 400; color: #222; padding-bottom: 10px;}

.data-transform .left-area {
	float: left;
	width: 45%
}

.data-transform .right-area {
	float: right;
	width: 44.9%
}

.data-transform .center-area {
	float: left;
	mragin : 30px auto;
	width: 10%;
	text-align: center
}

.data-transform .center-area a {
	display: block;
	width: 23px;
	height: 77px;
	margin: 0 auto;
	background-image: url(../../images/sub/btn-transform.png);
	background-repeat: no-repeat;
	font-size: 0
}

.data-transform .center-area a.transform-right {
	background-position: left top
}

.data-transform .center-area a:hover.transform-right {
	background-position: -23px top
}

.data-transform .center-area a.transform-left {
	background-position: left -77px
}

.data-transform .center-area a:hover.transform-left {
	background-position: -23px -77px
}

.data-transform .multiplelist {
	overflow: auto;
	border-top: 2px solid #808080;
	border-right: 1px solid #e1e1e1;
	border-bottom: 1px solid #e1e1e1;
	border-left: 1px solid #e1e1e1
}

.data-transform-free {
	overflow: hidden;
	margin: 0 auto
}

.data-transform-free .left-area {
	float: left;
	width: 45%
}

.data-transform-free .right-area {
	float: right;
	width: 44.9%
}

.data-transform-free .left-area2 {
	float: left;
	width: 49%
}

.data-transform-free .right-area2 {
	float: right;
	width: 49%
}

.data-transform-free .center-area {
	float: left;
	width: 10%;
	text-align: center
}

/*.data-transform-free .center-area a {width:23px; height:77px; margin:0 auto; font-size:0; background-image:url('../images/sub/btn-transform.png'); background-repeat:no-repeat; display:block}
.data-transform-free .center-area a.transform-right {background-position:left top}
.data-transform-free .center-area a:hover.transform-right {background-position:-23px top}
.data-transform-free .center-area a.transform-left {background-position:left -77px}
.data-transform-free .center-area a:hover.transform-left {background-position:-23px -77px}*/
.data-transform-free .center-area a {
	display: block;
	width: 28px;
	height: 22px;
	margin: 30px auto;
	background-image: url(../../images/sub/btn-inout.png);
	background-repeat: no-repeat;
	font-size: 0
}

.data-transform-free .center-area a.transform-right {
	background-position: left top
}

.data-transform-free .center-area a:hover.transform-right {
	background-position: -28px top
}

.data-transform-free .center-area a.transform-left {
	background-position: left -22px
}

.data-transform-free .center-area a:hover.transform-left {
	background-position: -28px -22px
}

.data-transform-free .multiplelist {
	overflow: auto;
	border-top: 2px solid #808080;
	border-right: 1px solid #e1e1e1;
	border-bottom: 1px solid #e1e1e1;
	border-left: 1px solid #e1e1e1;
}

a.btn-search {
	display: inline-block;
	width: 22px;
	height: 19px;
	margin-right: 10px;
	background-image: url(../../images/sub/btn_search.png);
	background-position: left top;
	background-repeat: no-repeat;
	vertical-align: middle;
}

a:hover.btn-search {
	display: inline-block;
	width: 22px;
	height: 19px;
	margin-right: 10px;
	background-image: url(../../images/sub/btn_search.png);
	background-position: left -19px;
	background-repeat: no-repeat;
	vertical-align: middle;
}

a.btn-search span {
	display: none
}