@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 : #fff;

	min-width: 280px;
}
/* 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-top: 5px;}

/* 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;}
/*
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: #777; font-weight: 300; font-size: 13px;}

textarea::-webkit-input-placeholder,
textarea:-moz-placeholder,
textarea::-moz-placeholder,
textarea:-ms-input-placeholder {color: #777; 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: 0 auto; padding: 0; border-collapse: separate; border-spacing: 0; font-size: 13px; border-top: 1px #444 solid;}
table caption {display: none;}
table thead th {border-top: 1px #e9e9e9 solid; border-bottom: 1px #e9e9e9 solid;}
table thead th {color: #444; background-color: #f9f9f9; border-bottom: 1px #e9e9e9 solid; line-height: 30px; text-align: center;}
table th, table td {padding: 10px 5px 9px; border-left: 1px #eee 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 #e9e9e9 solid; line-height: 1.6em;}
table tbody th {color: #444; font-weight: bold; background-color: #f9f9f9; border-bottom: 1px #e9e9e9 solid;  line-height: 30px; border-left: 1px #e9e9e9 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%; padding: 0; margin: 0 auto;}
#wrap.login {height: 100%; background: url('../img/bgIntro2.jpg') center center no-repeat; background-size: cover;}
#wrap.page {background: url('../img/bgPage.jpg') center center no-repeat; background-size: cover;}

	/* login page start */
	#loginPage {position: relative; width: 100%; min-width: 520px; height: 100%; min-height: 500px;}
	#loginPage > #biArea {position: absolute; top: 0; left: 0; width: 300px; height: 60px;  z-index: 1;}
		#biArea > h1 {display: block; width: 280px; height: 60px; line-height: 60px; padding-left: 20px; font-size: 18px; font-weight: 300; color: #fff; text-align: left;}
		#biArea > h1 > span {font-weight: 700; color: #f9df34;}
		#biArea > img {float: left;}

	#loginPage > .loginBoxArea {position: absolute; display: block; top: 50%; left: 50%; margin-top: -185px; margin-left: -250px; width: 500px; height: 370px; padding: 0;}
		.loginBoxArea > .copyText {width: 500px; min-width:500px; height: 60px; line-height: 60px; font-size: 42px; font-weight: 300; color: #fff; text-align: center;}
		.loginBoxArea > .titleArea {display: block; width: 100%; height: 70px; padding: 20px 0;}
		.loginBoxArea > .titleArea > h1 {width: 100%; height: 40px; line-height: 40px; font-size: 32px; font-weight: 300; color: #fff; text-align: center; padding: 0;}
		.loginBoxArea > .titleArea > .engTitle {width: 100%; height: 30px; line-height: 30px; font-size: 20px; font-weight: 300; color: #fff; text-align: center; padding: 0;}
		.loginBoxArea > form {display: block; width: 300px; height: 200px; margin: 0 auto; padding: 0;}
		.loginBoxArea > form > input[type=text],
		.loginBoxArea > form > input[type=password] {display: block; width: 100%; height: 40px; box-sizing: border-box; padding: 10px 20px; line-height: 20px; font-size: 14px; color: #444; border: 0; background-color: #ddd; border-radius: 3px; transition: all 0.5s;}
		.loginBoxArea > form > input[name=id] {margin-bottom: 10px;}
		.loginBoxArea > form > input[type=text]:focus,
		.loginBoxArea > form > input[type=password]:focus {background-color: #fff; transition: all 0.5s;}
		.loginBoxArea > form > p {display: block; width: 300px; height: 30px; line-height: 30px; color: #fff; font-size: 13px; text-align: left;}
		.loginBoxArea > form > p > label {line-height: 30px; color: #fff; font-size: 13px; text-align: left;}
		.loginBoxArea > form > #submitBtn {display: block; width: 300px; height: 40px; margin: 10px auto 0; padding: 0; line-height: 40px; font-size: 16px; font-weight: 300; color: #333; text-align: center; background-color: #f9df34; border-radius: 3px; transition: all 0.3s;}
		.loginBoxArea > form > a:hover {color: #fff; text-decoration: none; background-color: #ffcc00;}
		.loginBoxArea > form > ul {display: block; width: 300px; height: 30px; box-sizing: border-box; padding-left: 120px; margin: 0 auto;}
		.loginBoxArea > form > ul > li {float: left; display: block; width: 90px; height: 30px;}
		.loginBoxArea > form > ul > li > a {display: block; width: 100%; height: 100%; line-height: 30px; font-size: 13px; font-weight: 300; color: #fff; text-align: center;}

	#loginPage > #copyrightArea {position: absolute; bottom: 200px; left: 50%; margin-left: -180px; display: block; width: 300px; height: 20px; padding: 20px 0;  z-index: 1;}
	#loginPage > #copyrightArea > p {width: 100%; height: 20px; line-height: 20px; font-size: 18px; font-weight: 300; color: #dff; text-align: center;}
	#loginPage > #copyrightArea > .p1 {text-align: left;}
	#loginPage > #copyrightArea > .p2 {padding-left:70px;text-align: left;}
	/* login page end */


	/* page common start */
	#pageWrap {position: relative; width: 100%; min-width: 980px;}
	#headerPadding {width: 100%; height: 80px;}
	#headerArea {position: fixed; top: 0; left: 0; display: block; width: 100%; height: 60px; background-color: #fff; z-index: 1;}
		#biArea > h1 {position: absolute; top: 0; left: 0; display: block; width: 480px; height: 60px; line-height: 60px; padding-left: 20px; font-size: 18px; font-weight: 300; color: #222; text-align: left;}
		#biArea > h1 > span {font-weight: 700; color: #f9df34;}
		#biArea > img {float: left;}
		/*
		#biArea > ul.naviMenu {width: 870px; height: 60px; float: right;}
		#biArea > ul.naviMenu > li {position: relative; float: left; display: block; width: 100px; height: 60px;}
		*/
		#biArea > ul.naviMenu {height: 60px; float: right;}
		#biArea > ul.naviMenu > li {position: relative; float: left; display: block; padding-left: 20px; height: 60px;}
		
		#biArea > ul.naviMenu > li > a {display: block; width: 100%; height: 60px; line-height: 60px; font-size: 16px; font-weight: 300; color: #666; text-align: center; transition: all 0.3s;}
		#biArea > ul.naviMenu > li.on > a, 
		#biArea > ul.naviMenu > li > a:hover {font-weight: 500; color: #222; text-decoration: none;}

		#biArea > ul.naviMenu > li:last-child {width: 60px;}
		#biArea > ul.naviMenu > li:last-child > a {box-sizing: border-box; padding: 20px;}
		#biArea > ul.naviMenu > li:last-child > a > span {display: block; width: 20px; height: 20px; overflow: hidden; background-image: url('../img/popupInfo.png'); background-position: 0 -20px; transition: all 0.3s;}
		#biArea > ul.naviMenu > li.on:last-child > a > span,
		#biArea > ul.naviMenu > li:last-child > a:hover > span {background-position: 0 0;}

		#popupInfo {position: absolute; top: 50px; right: 20px; display:block; width: 180px; height: 370px; background-color: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 0 10px 0 #ddd;}
		#popupInfo > .titleArea {width: 100%; height: 50px; box-sizing: border-box; border-bottom: 1px #eee solid; line-height: 49px; font-size: 12px; font-weight: 300; color: #222; text-align: center;}
		#popupInfo > dl {width: 100%; min-height: 30px; box-sizing: border-box; padding: 5px 20px 5px; border-bottom: 1px #eee dashed;}
		#popupInfo > dl > dt {float: left; width: 50%; height: 30px; line-height: 30px; font-size: 12px; font-weight: 300; text-align: left; color: #222;}
		#popupInfo > dl > dd {float: left; width: 50%; height: 30px; line-height: 30px; font-size: 14px; font-weight: 300; text-align: right; color: #777;}
		#popupInfo > dl.fax {padding: 5px 20px 5px; border-bottom: 0;}
		#popupInfo > .logoutArea {width: 100%; height: 35px; box-sizing: border-box; border-top: 1px #eee solid;}
		#popupInfo > .logoutArea > a {display: block; width: 100%; height: 35px; line-height: 34px; font-size: 14px; font-weight: 300; color: #222; text-align: center;}

	#contentBox {position: relative; width: 960px; min-height: 900px; margin: 0 auto 0; border-radius: 30px; background-color: #fff; overflow: hidden; box-shadow: 0 0 20px 0 #888;}
	#contentBox > h2 {width: 100%; height: 80px; line-height: 80px; font-size: 36px; font-weight: 700; text-align: center; color: #fff; background-color: #444;}
	#contentBox > h2.talk {color: #444; background-color: #f9df34;}
	#contentBox > h2.sms {color: #fff; background-color: #007AC2;}

		#contentArea {width: 100%; padding: 0; margin: 0;}
		#contentArea > form {width: 100%; padding: 0; margin: 0;}

		#contentArea .leftArea {float: left; width: 640px; box-sizing: border-box; padding: 40px 20px 0 40px;}
		#contentArea .rightArea {float: left; width: 320px; box-sizing: border-box; padding: 20px 40px 0 0;}

		/* 알림톡, 친구톡, 문자메세지 */
		#contentTalk {padding: 0;}

		#contentTalk .leftArea ul {width: 100%; padding: 0; margin: 0;}
		#contentTalk .leftArea ul > li {width: 100%; padding-bottom: 20px;}
		#contentTalk .leftArea ul > li > .titleLine {width: 100%; height: 30px; padding: 5px 0;}
		.stepImg {float: left; display: block; width: 60px; height: 30px; line-height: 30px; background-image: url('../img/stepImg.png');}
		li:nth-child(1) .stepTalk {background-position: 0 0;}
		li:nth-child(2) .stepTalk {background-position: 0 -30px;}
		li:nth-child(3) .stepTalk {background-position: 0 -60px;}
		li:nth-child(4) .stepTalk {background-position: 0 -90px;}
		li:nth-child(5) .stepTalk {background-position: 0 -120px;}
		li:nth-child(1) .stepSms {background-position: -60px 0;}
		li:nth-child(2) .stepSms {background-position: -60px -30px;}
		li:nth-child(3) .stepSms {background-position: -60px -60px;}
		li:nth-child(4) .stepSms {background-position: -60px -90px;}
		li:nth-child(5) .stepSms {background-position: -60px -120px;}

		#contentTalk .leftArea ul > li > .titleLine > h3 {float: left; display: block; width: 100%; line-height: 30px; font-size: 18px; font-weight: 500; color: #444;}
		#contentTalk .leftArea ul > li > .titleLine > h3.w160 {width: 160px;}
		#contentTalk .leftArea ul > li > .titleLine > h3.w120 {width: 120px;}
		#contentTalk .leftArea ul > li > .titleLine > h3.w100 {width: 100px;}
		#contentTalk .leftArea ul > li > .titleLine > select {float: left; width: 200px;}
		a.bt120 {float: left; display: block; width: 120px; height: 30px; line-height: 30px; font-size: 14px; font-weight: 300; color: #fff; text-align: center; background-color: #444;}
		a.bt120a {float: left; display: block; width: 120px; height: 30px; line-height: 30px; font-size: 14px; font-weight: 300; color: #fff; text-align: center; background-color: #444; font-weight:bold}
		a.bt120b {float: left; display: block; width: 120px; height: 30px; line-height: 30px; font-size: 14px; font-weight: 300; color: #fff; text-align: center; background-color: #A4A4A4;}
		#contentTalk .leftArea ul > li > .titleLine > .receiverCount {float: right; display: block; width: 120px; height: 30px; line-height: 30px; text-align: right; font-size: 14px; font-weight: 300; color: #444;}
		#contentTalk .leftArea ul > li > .titleLine > .checkBoxLine {float: left; height: 20px; line-height: 20px; margin: 5px 0;}
		#contentTalk .leftArea ul > li > .titleLine > .sendNumber {float: left; width: 220px; height: 30px; line-height: 30px;}
		#contentTalk .leftArea ul > li > .titleLine > .sendNumber > label {float: left; width: 60px; height: 30px; line-height: 30px; text-align: left;}
		#contentTalk .leftArea ul > li > .titleLine > .sendNumber > input {float: left; width: 100px;}

		#contentTalk .leftArea ul > li > ul.receiverArea {width: 100%; min-height: 100px; box-sizing: border-box; padding: 10px 20px; margin-top: 10px; background-color: #f9f9f9;  border-radius: 10px;}
		#contentTalk .leftArea ul > li > ul.receiverArea > li {position: relative; list-style: inside disc; width: 100%; height: 30px; line-height: 30px; padding: 5px 0; font-size: 13px; font-weight: 300; color: #444}
		#contentTalk .leftArea ul > li > ul.receiverArea > li > .setArea {position: absolute; top: 5px; right: 0; width: 300px; height: 30px; z-index: 1;}
		#contentTalk .leftArea ul > li > ul.receiverArea > li > .setArea > a.bt120 {margin-left: 10px;}
		#contentTalk .leftArea ul > li > ul.receiverArea > li > .setArea > input[type=text] {float: left; margin-left: 10px; width: 190px;}

		#contentTalk .leftArea ul > li > .tableArea {width: 100%; height: 290px; margin-top: 10px; overflow-y: scroll;}
		#contentTalk .leftArea ul > li > .replaceArea {display:none; width: 100%; height: 60px; box-sizing: border-box; padding: 15px 20px; background-color: #f9f9f9; border-radius: 10px; overflow: hidden;}
		#contentTalk .leftArea ul > li > .replaceArea > .radioBoxLine {float: left; height: 20px; line-height: 20px; margin: 5px 0;}
		#contentTalk .leftArea ul > li > .replaceArea > .radioBoxLine > label {margin-right: 20px;}
		#contentTalk .leftArea ul > li > .replaceArea > .sendNumber {float: right; width: 220px; height: 30px; line-height: 30px;}
		#contentTalk .leftArea ul > li > .replaceArea > .sendNumber > label {float: left; width: 60px; height: 30px; line-height: 30px; text-align: left;}
		#contentTalk .leftArea ul > li > .replaceArea > .sendNumber > input {float: left; width: 100px;}
		a.bt150 {display: inline-block; margin-left: 10px; width: 150px; height: 30px; line-height: 30px; font-size: 14px; font-weight: 300; color: #fff; text-align: center; background-color: #444;}
		a.bt80 {display: inline-block; width: 80px; height: 30px; line-height: 30px; font-size: 14px; font-weight: 300; color: #fff; text-align: center; background-color: #444;}
		a.bt60 {display: inline-block; width: 60px; height: 30px; line-height: 30px; font-size: 14px; font-weight: 300; color: #fff; text-align: center; background-color: #444;}
		a.bt60_ {float: left; display: block; width: 60px; height: 30px; line-height: 30px; font-size: 14px; font-weight: 300; color: #fff; text-align: center; background-color: #444;}
		a.bt40 {float: left; display: block; margin-left:5px; width: 40px; height: 30px; line-height: 30px; font-size: 14px; font-weight: 300; color: #fff; text-align: center; background-color: #444;}

		#contentTalk .rightArea > .mobileTalkArea {width: 220px; height: 450px; padding: 50px 30px; background: url('../img/bgMobileTalk.png') center center no-repeat;}
		#contentTalk .rightArea .mobileTalkArea > #template_content {width: 210px; height: 350px; padding: 10px; border: 0; font-weight: 300; background-color: #f9df34; overflow-y: auto;}
		#contentTalk .rightArea > .mobileSmsArea {width: 220px; height: 450px; padding: 50px 30px; background: url('../img/bgMobileSms.png') center center no-repeat;}

		#contentTalk .rightArea .countByte {width: 100%; height: 40px; line-height: 40px; font-size: 18px; font-weight: 300; color: #444; text-align: center; padding-bottom: 30px;}
		#contentTalk .rightArea .mobileTalkArea > textarea {width: 100%; height: 350px; padding: 10px; border: 0; font-weight: 300; background-color: #f9df34; overflow-y: auto;}
		#sendBox > a.addFile {display: block; width: 100%; height: 30px; margin-top: 10px; line-height: 30px; font-size: 13px; font-weight: 300; color: #fff; text-align: center; background-color: #38E}
			#longSMS, #multySMS, #faxSMS {display: none;}
			#multySMS {display: block;}
			/* 단문, 음성 */
			#simpleSMS > textarea {width: 100%; height: 380px; color: #fff; padding: 10px; border: 0; font-weight: 300; background-color: #007AC2; overflow-y: auto;}
			/* 장문 */
			#longSMS > input[type=text] {width: 100%; height: 30px; box-sizing: border-box; color: #fff; padding-left: 10px; padding-right: 10px; margin-bottom: 10px; border: 0; font-weight: 300; background-color: #278eff;}
			#longSMS > textarea {width: 100%; height: 340px; color: #fff; padding: 10px; border: 0; font-weight: 300; background-color: #007AC2; overflow-y: auto;}
			/* 멀티 */
			#multySMS > input[type=text] {display: block; width: 100%; height: 30px; box-sizing: border-box; color: #fff; padding-left: 10px; padding-right: 10px; margin-bottom: 10px; border: 0; font-weight: 300; background-color: #278eff;}
			#multySMS > input[type=text]::placeholder {color: #fff;}
			#multySMS > textarea {width: 100%; height: 380px; color: #fff; padding: 10px; border: 0; font-weight: 300; background-color: #007AC2; overflow-y: auto;}
			#multySMS > textarea::placeholder {color: #fff;}
			#multySMS > a.addFile {display: block; width: 100%; height: 30px; margin-top: 10px; line-height: 30px; font-size: 13px; font-weight: 300; color: #fff; text-align: center; background-color: #0059b9;}
			/* 팩스 */
			#faxSMS > textarea {width: 100%; height: 340px; color: #fff; padding: 10px; border: 0; font-weight: 300; background-color: #007AC2; overflow-y: auto;}
			#faxSMS > a.addFile {display: block; width: 100%; height: 30px; margin-top: 10px; line-height: 30px; font-size: 13px; font-weight: 300; color: #fff; text-align: center; background-color: #0059b9;}

		#contentTalk .rightArea > .sendOption {width: 100%; min-height: 40px; padding-bottom: 10px;}
		#contentTalk .rightArea > .sendOption > .radioBoxLine {width: 100%; height: 20px; line-height: 20px; margin: 10px 0; text-align: center;}
		#contentTalk .rightArea > .sendOption > .radioBoxLine > label {padding-right: 20px;}
		#contentTalk .rightArea > .sendOption > .reseveTimeArea {display: none; width: 100%; box-sizing: border-box; padding: 15px 30px; text-align: center; background-color: #f9f9f9; border-radius: 10px; overflow: hidden;}
		#contentTalk .rightArea > .sendOption > .reseveTimeArea > select {margin: 5px 0;}

		#contentTalk a.finalSendBt {display: block; width: 100%; height: 60px; line-height: 60px; font-size: 18px; font-weight: 500; text-align: center; border-radius: 10px; transition: all 0.3s;}
		#contentTalk a.talkSend {color: #444; background-color: #f9df34;}
		#contentTalk a.smsSend {color: #fff; background-color: #007AC2;}
		#contentTalk a.finalSendBt:hover {text-decoration: none; color: #fff; background-color: #444;}


		#contentView .rightArea > .mobileTalkArea {width: 220px; height: 450px; padding: 50px 30px; background: url('../img/bgMobileTalk.png') center center no-repeat;}
		#contentView .rightArea .countByte {width: 100%; height: 15px; font-size: 12px; font-weight: 300; color: #444; text-align: center; padding-bottom: 2px;}
		#contentView .rightArea .txt {width: 210px; height: 280px; padding: 10px; border: 0; font-weight: 300; background-color: #f9df34; overflow-y: auto;}
		#contentView a.finalSendBt {display: block; width: 100%; height: 40px; line-height: 40px; font-size: 18px; font-weight: 500; text-align: center; border-radius: 10px; transition: all 0.3s;}
		#contentView a.talkSend {color: #444; background-color: #f0fa34;}

		/* 발송내역, 주소록, 통계 */
		#contentList,
		#contentChart {padding: 20px;}

		#contentList h3,
		#contentChart h3 {text-align: center; line-height: 30px; font-size: 20px; font-weight: 500; padding: 15px 0; border-bottom: 1px #eee solid; margin-bottom: 10px;}

		.setTermArea {width: 100%; height: 60px; box-sizing: border-box; padding: 15px 20px; margin: 0 auto; border-radius: 10px; background-color: #f9f9f9;}
		.setTermArea > span {float: left; display: block; width: 60px; height: 30px; line-height:30px; font-size: 14px; font-weight: 300; color: #444; padding-right: 10px;}
		.setTermArea > a.bt50 {float: left; display: block; width: 50px; height: 30px; line-height:30px; font-size: 13px; font-weight: 300; color: #fff; text-align: center; margin-right: 10px; background-color: #666;}
		.setTermArea > input[type=text] {float: left; width: 100px; height: 30px;}
		.setTermArea > span.to {width: 20px; text-align: center; padding: 0;}
		.setTermArea > a.bt60 {margin-left: 10px;}
		.searchArea {width: 100%; height: 30px; padding: 10px 0;}
		.searchArea > div {float: right; height: 30px;}
		.searchArea > div > select {margin-right: 10px;}
		.searchArea > div > input[type=text] {width: 140px; margin-right: 10px;}
		.searchArea > div > a.bt60 {float: right;}

		.listArea {width: 100%; min-height: 120px;}
		.listAreaTemp {width: 100%; min-height: 120px; max-height: 470px; overflow:auto;}
		.listAreaTempL {width: 100%; min-height: 120px; max-height: 600px; overflow:auto;}
		.pagingArea {width: 100%; height: 30px; margin-top: 50px; 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;}

		/* 주소록 */
		#contentList .sagroupArea {float: left; width: 480px;}
		#contentList .sacontactArea {float: left; width: 360px; padding-left: 40px;}

		#contentList .groupArea {float: left; width: 360px;}
		#contentList .contactArea {float: left; width: 480px; padding-left: 40px;}
		#contentList table tfoot tr,
		#contentList table tfoot td {background-color: #f9f9f9;}
		#contentList table tfoot td > input[type=text] {width: 90%;}
		#contentList table tfoot td > a {float: none; margin: 0 auto;}

		.groupBtnArea {width: 280px; height: 40px; padding: 20px 0; margin: 0 auto;}
		.groupBtnArea > a.groupBtn {float: left; display: block; width: 120px; height: 40px; margin: 0 10px; line-height: 40px; font-size: 16px; font-weight: 300; color: #fff; text-align: center; background-color: #444;}
		.groupBtnArea > a.groupBtn2 {float: left; display: block; width: 200px; height: 40px; margin: 0 10px; line-height: 40px; font-size: 16px; font-weight: 300; color: #fff; text-align: center; background-color: #444;}

		.groupEditBtnArea {width: 100%; height: 60px; box-sizing: border-box; padding: 15px 20px; border-radius: 10px; background-color: #f9f9f9;}
		.groupEditBtnArea > span {float: left; width: 70px; height: 30px; line-height: 30px; font-size: 14px; font-weight: 300; color: #444; }
		.groupEditBtnArea > input[type=text] {float: left; width: 120px; height: 30px;}
		.groupEditBtnArea > label {float: left; width: 30px; margin-left: 10px; line-height: 30px;}
		.groupEditBtnArea > input[type=checkbox] {float: left; margin-top: 10px; }
		.groupEditBtnArea > a.bt60 {float: right; width: 60px;}

		.addressBtnArea {width: 400px; height: 40px; padding: 20px 0; margin: 0 auto;}
		.addressBtnArea > a.groupBtn {float: left; display: block; width: 90px; height: 40px; margin: 0 5px; line-height: 40px; font-size: 16px; font-weight: 300; color: #fff; text-align: center; background-color: #444;}

		.addressEditBtnArea {width: 100%; height: 60px; box-sizing: border-box; padding: 15px 20px; border-radius: 10px; background-color: #f9f9f9;}
		.addressEditBtnArea > span {float: left; width: 70px; height: 30px; line-height: 30px; font-size: 14px; font-weight: 300; color: #444; }
		.addressEditBtnArea > input[type=text] {float: left; width: 120px; height: 30px;}
		.addressEditBtnArea > label {float: left; width: 30px; margin-left: 10px; line-height: 30px;}
		.addressEditBtnArea > a.bt60 {float: right; width: 60px;}


	#pageWrap > #copyrightArea {display: block; width: 100px; height: 20px; padding: 10px 0 10px; margin: 0 auto; color:#EEEEEE}
	#pageWrap > #copyrightArea > p {width: 100%; height: 20px; line-height: 20px; font-size: 12px; font-weight: 300; color: #444; text-align: center;}
	/* page common end */



	/* popup layer page01 start */
	/*
	#excelPopup01 {position: absolute; display: none; top: 360px; left: 50%; margin-left: -390px; width: 600px; height: 340px; border-radius: 30px; overflow: hidden; background-color: #fff; box-shadow: 0 0 10px 0 #888; z-index: 2;}
	*/
	#excelPopup01 {position: absolute; display: none; width: 600px; height: 402px; border-radius: 30px; overflow: hidden; background-color: #fff; box-shadow: 0 0 10px 0 #888; z-index: 2;}
	#excelPopup01 > .titleArea {width: 100%; height: 60px; box-sizing: border-box; padding: 10px 40px; line-height: 40px; font-size: 18px; font-weight: 500; color: #fff; background-color: #444;}
	#excelPopup01 > .contentArea {width: 100%; height: 280px; box-sizing: border-box; padding: 40px;}
	#excelPopup01 > .contentArea > p.comment {width: 100%; height: 45px; line-height: 20px; font-size: 13px; font-weight: 300; color: #444; margin-bottom: 10px;}
	#excelPopup01 > .contentArea > .checkLine {width: 100%; height: 30px;}
	#excelPopup01 > .contentArea > .checkLine > a.bt120 {display: block; width: 120px; height: 30px; line-height: 30px; font-size: 14px; font-weight: 300; color: #fff; text-align: center; background-color: #444;}
	#excelPopup01 > .contentArea > .fileArea {width: 100%; height: 60px; box-sizing: border-box; padding: 15px 20px; margin: 20px auto; border-radius: 10px; background-color: #f9f9f9;}
	#excelPopup01 > .contentArea > .fileArea > label {float: left; display: block; width: 120px; height: 30px; line-height: 30px; font-size: 14px; font-weight: 300; color: #444;}
	#excelPopup01 > .contentArea > .fileArea > input[type=file] {float: left; height: 30px;}
	#excelPopup01 > .contentArea > .btnArea {width: 280px; height: 40px; margin: 0 auto;}
	#excelPopup01 > .contentArea > .btnArea > a.bt120 {float: left; display: block; width: 120px; height: 40px; margin: 0 10px; line-height: 40px; font-size: 16px; font-weight: 300; color: #fff; text-align: center; background-color: #444;}
	#excelPopup01 > .contentArea > .btnArea > a.cancel {background-color: #999;}
	/* popup layer page01 end */


	/* popup layer page02 start */
	/*
	#excelPopup02 {position: absolute; display: none; top: 360px; left: 50%; margin-left: -390px; width: 600px; height: 400px; border-radius: 30px; overflow: hidden; background-color: #fff; box-shadow: 0 0 10px 0 #888; z-index: 2;}
	*/
	#excelPopup02 {position: absolute; display: block; width: 600px; height: 431px; border-radius: 30px; overflow: hidden; background-color: #fff; box-shadow: 0 0 10px 0 #888; z-index: 2;}
	#excelPopup02 > .titleArea {width: 100%; height: 60px; box-sizing: border-box; padding: 10px 40px; line-height: 40px; font-size: 18px; font-weight: 500; color: #fff; background-color: #444;}
	#excelPopup02 > .contentArea {width: 100%; height: 280px; box-sizing: border-box; padding: 40px;}
	#excelPopup02 > .contentArea > p.comment {width: 100%; height: 90px; line-height: 20px; font-size: 13px; font-weight: 300; color: #444; margin-bottom: 0;}
	#excelPopup02 > .contentArea > p.comment2 {width: 100%; height: 100px; line-height: 20px; font-size: 13px; font-weight: 300; color: #444; margin-bottom: 0;}
	#excelPopup02 > .contentArea > p.comment3 {width: 100%; height: 70px; line-height: 20px; font-size: 13px; font-weight: 300; color: #444; margin-bottom: 0;}
	#excelPopup02 > .contentArea > .checkLine {width: 100%; height: 60px; box-sizing: border-box; padding: 15px 20px; margin-top: 20px; text-align: center; border-bottom: 1px #eee solid; border-radius: 10px 10px 0 0; background-color: #f9f9f9;}
	#excelPopup02 > .contentArea > .checkLine > label {display: inline-block; width: 40px; height: 30px; line-height: 30px; font-size: 14px; font-weight: 300; color: #444;}
	#excelPopup02 > .contentArea > .checkLine > select {display: inline-block; width: 80px;}
	#excelPopup02 > .contentArea > .checkLine > span {display: inline-block; width: 40px; height: 30px; line-height: 30px; font-size: 14px; text-align: center;}
	#excelPopup02 > .contentArea > .fileArea {width: 100%; height: 60px; box-sizing: border-box; padding: 15px 20px; margin-bottom: 20px; border-radius: 0 0 10px 10px; background-color: #f9f9f9;}
	#excelPopup02 > .contentArea > .fileArea > label {float: left; display: block; width: 120px; height: 30px; line-height: 30px; font-size: 14px; font-weight: 300; color: #444;}
	#excelPopup02 > .contentArea > .fileArea > input[type=file] {float: left; height: 30px;}
	#excelPopup02 > .contentArea > .btnArea {width: 280px; height: 40px; margin: 0 auto;}
	#excelPopup02 > .contentArea > .btnArea > a.bt120 {float: left; display: block; width: 120px; height: 40px; margin: 0 10px; line-height: 40px; font-size: 16px; font-weight: 300; color: #fff; text-align: center; background-color: #444;}
	#excelPopup02 > .contentArea > .btnArea > a.cancel {background-color: #999;}

	/*
	#listPopup02 {position: absolute; display: none; top: 360px; left: 50%; margin-left: -480px; width: 960px; height: 580px; border-radius: 30px; overflow: hidden; background-color: #fff; box-shadow: 0 0 10px 0 #888; z-index: 2;}
	*/
	#listPopup02 {position: absolute; display: none; width: 960px; height: 770px; border-radius: 30px; overflow: hidden; background-color: #fff; box-shadow: 0 0 10px 0 #888; z-index: 2;}
	#listPopup02 .titleArea {width: 100%; height: 60px; box-sizing: border-box; padding: 10px 40px; line-height: 40px; font-size: 18px; font-weight: 500; color: #fff; background-color: #444;}
	#listPopup02 .contentArea {width: 100%; height: 520px; box-sizing: border-box; padding: 40px;}
	#listPopup02 .groupArea {float: left; width: 360px;}
	#listPopup02 .contactArea {float: left; width: 480px; padding-left: 40px;}
	#listPopup02 table tfoot tr,
	#listPopup02 table tfoot td {background-color: #f9f9f9;}
	#listPopup02 table tfoot td > input[type=text] {width: 90%;}
	#listPopup02 table tfoot td > a {float: none; margin: 0 auto;}
	
	#listPopup03 {position: absolute; display: block; width: 960px; height: 830px; border-radius: 30px; overflow: hidden; background-color: #fff; box-shadow: 0 0 10px 0 #888; z-index: 2;}
	#listPopup03 .titleArea {width: 100%; height: 60px; box-sizing: border-box; padding: 10px 40px; line-height: 40px; font-size: 18px; font-weight: 500; color: #fff; background-color: #444;}
	#listPopup03 .contentArea {width: 100%; height: 680px; box-sizing: border-box; padding: 40px;}
	#listPopup03 .groupArea {float: left; width: 360px;}
	#listPopup03 .contactArea {float: left; width: 480px; padding-left: 40px;}
	#listPopup03 table tfoot tr,
	#listPopup03 table tfoot td {background-color: #f9f9f9;}
	#listPopup03 table tfoot td > input[type=text] {width: 90%;}
	#listPopup03 table tfoot td > a {float: none; margin: 0 auto;}
	/*
	#listPopup02 {position: absolute; display: none; top: 360px; left: 50%; margin-left: -480px; width: 960px; height: 580px; border-radius: 30px; overflow: hidden; background-color: #fff; box-shadow: 0 0 10px 0 #888; z-index: 2;}
	*/
	#asPopup {position: absolute; display: none; width: 500px; height: 620px; border-radius: 30px; overflow: hidden; background-color: #fff; box-shadow: 0 0 10px 0 #888; z-index: 2;}
	#asPopup .titleArea {width: 100%; height: 60px; box-sizing: border-box; padding: 10px 40px; line-height: 40px; font-size: 18px; font-weight: 500; color: #fff; background-color: #444;}
	#asPopup .contentArea {width: 100%; height: 520px; box-sizing: border-box; padding: 20px;}
	#asPopup .groupArea {float: left; width: 460px;}
	#asPopup .contactArea {float: left; width: 480px; padding-left: 40px;}
	#asPopup table tfoot tr,
	#asPopup table tfoot td {background-color: #f9f9f9;}
	#asPopup table tfoot td > input[type=text] {width: 90%;}
	#asPopup table tfoot td > a {float: none; margin: 0 auto;}

	#callerPopup {position: absolute; display: none; width: 500px; height: 650px; border-radius: 30px; overflow: hidden; background-color: #fff; box-shadow: 0 0 10px 0 #888; z-index: 2;}
	#callerPopup .titleArea {width: 100%; height: 60px; box-sizing: border-box; padding: 10px 40px; line-height: 40px; font-size: 18px; font-weight: 500; color: #fff; background-color: #444;}
	#callerPopup .contentArea {width: 100%; height: 520px; box-sizing: border-box; padding: 20px;}
	#callerPopup .groupArea {float: left; width: 460px;}
	#callerPopup .contactArea {float: left; width: 480px; padding-left: 40px;}
	#callerPopup table tfoot tr,
	#callerPopup table tfoot td {background-color: #f9f9f9;}
	#callerPopup table tfoot td > input[type=text] {width: 90%;}
	#callerPopup table tfoot td > a {float: none; margin: 0 auto;}

	#templateEditPopup {position: absolute; display: block; width: 850px; height: 710px; border-radius: 30px; overflow: hidden; background-color: #fff; box-shadow: 0 0 10px 0 #888; z-index: 2;}
	#templateEditPopup .contentArea {width: 100%; height: 580px; box-sizing: border-box; padding: 20px;}
	#userAddPopup {position: absolute; display: block; width: 650px; height: 620px; border-radius: 30px; overflow-x: hidden; overflow-y:hidden; background-color: #fff; box-shadow: 0 0 10px 0 #888; z-index: 2;}
	#userEditPopup {position: absolute; display: block; width: 650px; height: 620px; border-radius: 30px; overflow-x: hidden; overflow-y:hidden; background-color: #fff; box-shadow: 0 0 10px 0 #888; z-index: 2;}
	#userQuotaPopup {position: absolute; display: block; width: 650px; height: 280px; border-radius: 30px; overflow: hidden; background-color: #fff; box-shadow: 0 0 10px 0 #888; z-index: 2;}
	#userPasswdPopup {position: absolute; display: block; width: 450px; height: 300px; border-radius: 30px; overflow: hidden; background-color: #fff; box-shadow: 0 0 10px 0 #888; z-index: 2;}
	#deptAddPopup {position: absolute; display: block; width: 650px; height: 320px; border-radius: 30px; overflow-x: hidden; overflow-y:hidden; background-color: #fff; box-shadow: 0 0 10px 0 #888; z-index: 2;}
	#deptEditPopup {position: absolute; display: block; width: 650px; height: 320px; border-radius: 30px; overflow-x: hidden; overflow-y:hidden; background-color: #fff; box-shadow: 0 0 10px 0 #888; z-index: 2;}
	.userPopup .titleArea {width: 100%; height: 60px; box-sizing: border-box; padding: 10px 40px; line-height: 40px; font-size: 18px; font-weight: 500; color: #fff; background-color: #444;}
	.userPopup .contentArea {width: 100%; height: 420px; box-sizing: border-box; padding: 20px;} 
	.userPopup table tfoot tr,
	.userPopup table tfoot td {background-color: #f9f9f9;}
	.userPopup table tfoot td > input[type=text] {width: 90%;}
	.userPopup table tfoot td > a {float: none; margin: 0 auto;}
	.userPopup .btnArea > a.bt120 {float: left; display: block; width: 120px; height: 40px; margin: 0 10px; line-height: 40px; font-size: 16px; font-weight: 300; color: #fff; text-align: center; background-color: #444;}
	.userPopup .btnArea > a.cancel {background-color: #999;}

	/* popup layer page02 end */

	
	.msgImg img {max-width:220px; max-height:165px;}
	.bottomBtnArea2 {width: 260px; height: 40px; padding: 20px 0; margin: 0 auto; text-align: center;}
	.bottomBtnArea2 > a.bottomBtn {float: left; display: block; width: 120px; height: 40px; margin: 0 5px; line-height: 40px; font-size: 16px; font-weight: 300; color: #fff; text-align: center; background-color: #444;}

	.bottomBtnArea4 {width: 520px; height: 40px; padding: 20px 0; margin: 0 auto; text-align: center;}
	.bottomBtnArea4 > a.bottomBtn {float: left; display: block; width: 120px; height: 40px; margin: 0 5px; line-height: 40px; font-size: 16px; font-weight: 300; color: #fff; text-align: center; background-color: #444;}

	.bottomBtnArea5 {width: 400px; height: 30px; padding: 5px 0; margin: 0 auto; text-align: center;}
	.bottomBtnArea5 > a.bottomBtn {float: left; display: block; width: 120px; height: 30px; margin: 0 5px; line-height: 30px; font-size: 16px; font-weight: 300; color: #fff; text-align: center; background-color: #444;}

	.modal {
		display: none; /* Hidden by default */
		position: fixed; /* Stay in place */
		z-index: 1; /* Sit on top */
		left: 0;
		top: 0;
		width: 100%; /* Full width */
		height: 100%; /* Full height */
		overflow: hidden; /* Enable scroll if needed */
		background-color: rgb(0,0,0); /* Fallback color */
		background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    }
        
    #preview {margin : 5% auto; display: block; width: 1100px; height: 700px; border-radius: 30px; overflow: auto; background-color: #fff; box-shadow: 0 0 10px 0 #888; z-index: 2;}
	#preview > .titleArea {width: 100%; height: 60px; box-sizing: border-box; padding: 10px 40px; line-height: 40px; font-size: 18px; font-weight: 500; color: #fff; background-color: #444;}
	#preview > .contentArea {width: 100%; height: auto; min-height: 600px; box-sizing: border-box; padding: 10px;}
	#preview > .contentArea > p.comment {width: 100%; height: 60px; line-height: 20px; font-size: 13px; font-weight: 300; color: #444; margin-bottom: 0;}
	#preview > .contentArea > p.comment2 {width: 100%; height: 100px; line-height: 20px; font-size: 13px; font-weight: 300; color: #444; margin-bottom: 0;}
	#preview > .contentArea > .btnArea {width: 280px; height: 40px; margin: 0 auto;}
	#preview > .contentArea > .btnArea > a.bt120 {float: left; display: block; width: 120px; height: 40px; margin: 0 10px; line-height: 40px; font-size: 16px; font-weight: 300; color: #fff; text-align: center; background-color: #444;}
	#preview > .contentArea > .btnArea > a.cancel {background-color: #999;}
   
    #preview > .contentArea > .rightArea > .mobileTalkArea {width: 220px; height: 450px; padding: 50px 30px; background: url('../img/bgMobileTalk.png') center center no-repeat;}
	#preview > .contentArea > .rightArea > .mobileSmsArea {width: 220px; height: 450px; padding: 50px 30px; background: url('../img/bgMobileSms.png') center center no-repeat;}
	#preview > .contentArea > .rightArea {float: left; width: auto; box-sizing: border-box; padding: 10px;}
	#preview > .contentArea > .rightArea .countByte {width: 100%; height: 40px; line-height: 40px; font-size: 18px; font-weight: 300; color: #444; text-align: center; padding-bottom: 30px;}
	#preview > .contentArea > .rightArea .mobileTalkArea > textarea {width: 100%; height: 380px; padding: 10px; border: 0; font-weight: 300; background-color: #f9df34; overflow-y: auto;}
	
	#preview > .contentArea > .leftArea {float: left; width: 780px; box-sizing: border-box; padding: 10px 10px 10px 10px;}
	#preview > .contentArea > .leftArea > .listArea {width: 100%; min-height: 120px;}
	#preview > .contentArea > .leftArea > .listAreaTemp {width: 100%; min-height: 120px; max-height: 300px; overflow:auto;}
	#previewList tr .tdColor {color:red !important;  text-align:center; border-bottom: 1px #e9e9e9 solid; line-height: 1.6em;}
	
	#sending {margin : 20% auto; display: block; width: 400px; height: 280px; border-radius: 30px; overflow: auto; background-color: #fff; box-shadow: 0 0 10px 0 #888; z-index: 2;}
	#sending > .titleArea {width: 100%; height: 60px; box-sizing: border-box; padding: 10px 40px; line-height: 40px; font-size: 18px; font-weight: 500; color: #fff; background-color: #444;}
	#sending > .contentArea {width: 100%; height: auto; min-height: 100px; box-sizing: border-box; padding: 10px; text-align: center;}
	#sending > .contentArea > p.comment {width: 100%; height: 60px; line-height: 20px; font-size: 13px; font-weight: 300; color: #444; margin-bottom: 0;}
	#sending > .contentArea > p.comment2 {width: 100%; height: 100px; line-height: 20px; font-size: 13px; font-weight: 300; color: #444; margin-bottom: 0;}
	#sending > .contentArea > .btnArea {width: 140px; height: 40px; margin: 0 auto;}
	#sending > .contentArea > .btnArea > a.bt120 {float: center; display: none; width: 120px; height: 40px; margin: 10px 10px; line-height: 40px; font-size: 16px; font-weight: 300; color: #fff; text-align: center; background-color: #444;}
	#sending > .contentArea > .btnArea > a.cancel {background-color: #999;}
	
	#sending > .contentArea > .infoArea {float: left; width: 100%; box-sizing: border-box; padding: 10px 10px 10px 10px; text-align: center; vertical-align: middle;}
	#sending > .contentArea > .infoArea > span {
													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: 60px;
												    font-weight: bold;
												    color: #666;
												    }
												    
	#sending > .contentArea > span {
										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: 20px;
									    font-weight: bold;
									    color: #666;
									    }