@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&family=Roboto:wght@400;600;700&family=Montserrat:wght@500;700;900&display=swap');

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
header, hgroup, menu, nav, section {
	display: block;
}
html {
	height: 100%;
	box-sizing: border-box;
}

strong {
    font-weight: bold;		/* 강조를 위해 기본 굵기 적용.. MarkDown했을때 strong tag로 되어서 강조가 되어야 하는데 강조가 안됨.. */
}

*, *:before, *:after {
	box-sizing: inherit;
}

body {
	line-height: 1;
	height: 100%;
	font-family: 'Roboto', 'Noto Sans KR', sans-serif;  
  background-color: #fbfbfb;
}

ol, ul {
	list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  color: #0499c8;
}

button:focus {
  outline: 0;
}

blockquote, q {
	quotes: none;
}

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

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

h1 {
  font-size: 28px;
  font-weight: 900;
  color: #3d3d3d;
  margin: 16px 0;
  letter-spacing: -1px;
}

h2 {
  font-size: 24px;
  font-weight: 900;
  color: #454545;
  margin: 16px 0;
  letter-spacing: -1px;
}

h3 {
  font-size: 20px;
  font-weight: 900;
  color: #454545;
  margin: 16px 0;
  letter-spacing: -1px;
}

h4 {
  font-size: 18px;
  font-weight: 900;
  color: #454545;
  margin: 0;
  letter-spacing: -1px;
}

.align-center {
	display: flex !important;
	justify-content: center;
	align-items: center;
}

.align-h-center {
	display: flex !important;
  flex-direction: column;
	align-items: center;
}

th .full-align-center, td .full-align-center {
	width: 100%;
	height: 100%;
	display: flex !important;
	justify-content: center;
	align-items: center;
}

.wrapper {
	width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
	align-items: center;
}

.primary-text {
  color: #0499c8 !important;
}

.primary-bg {
  background-color: #0499c8;
}

.bg-gray {
	background-color: #f4f4f4;
}

.vali {
	color: #ff0000;
	font-size: 12px;
}

.hidden {
	display: none !important;
}

a.btn {
	display:flex;
	color: inherit;
	line-height: inherit;
	border-radius: 4px;
  height: 40px;
  align-items: center;
  cursor: pointer;
}

button.btn {
	display:inline-block;
	color: inherit;
	line-height: inherit;
	border-radius: 4px;
	width: auto;
  height: 40px;
	white-space: nowrap;
	cursor: pointer;
}

a.btn-small,
button.btn-small {	
  height: 26px;
  padding: 0 10px !important;
}

a.btn-midium,
button.btn-midium {	
	font-weight: 700 !important;
	font-size: 14px !important;
	height: 40px !important;
	padding: 0 32px !important;
}

button.btn-big {	
	font-weight: 700 !important;
	font-size: 18px !important;
	height: 48px !important;
	padding: 0 32px !important;
}

.btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid #d9d9d9;
}

.btn-icon:hover {
  background-color: #f7f7f7;
}

.btn-icon img {
  max-width: 24px;
  max-height: 24px;
}

.btn-icon.small {
  width: 26px;
  height: 26px;
  background-color: #fff;
  margin-right: 6px;
  cursor: pointer;
}

.btn-icon.small img {
  max-width: 16px;
  max-height: 16px;
}

.btn-icon.small:hover {
  background-color: #f7f7f7;
}

.btn.btn-primary {
	border: 0;
	background-color: rgba(4,153,200,1);
	color: #fff;
}

.btn.btn-primary:hover {
	background-color: rgba(4,153,200,0.8);
}

.btn.btn-secondary {
	color: rgba(98,98,98,1);
	background-color: #fff;
	font-weight: 400;
	font-size: 14px;
	padding: 0 16px;
	border: 1px solid #d9d9d9;
}

.btn.btn-secondary:hover {
	background-color: #f7f7f7;
}

.btn.btn-secondary-fill {
	color: #fff;
	background-color: rgba(71,71,71,1);
	border: 0;
}

.btn.btn-secondary-fill:hover {
	color: #0499C8;
}

.btn.btn-tertiary {
	color: #fff;
	background-color: #a0a0a0;
	font-weight: 700;
	font-size: 14px;
	padding: 0 16px;
  border: 0;
}

.btn.btn-tertiary:hover {
	color: #000;
}

.btn-sns-login {
  font-size: 14px !important;
  height: 48px !important;
  border-radius: 3px;
  border: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.btn-sns-login:hover {
  cursor: pointer;
}

.btn-sns-login img {
  width: 20px;
  margin-left: 16px;
}

.btn-sns-login.naver {
  color: #ffffff;
  background-color: #03C75A;
}

.btn-sns-login.kakao {
  color: #191919;
  background-color: #FEE500;
}

.btn-sns-login.google {
  color: #575757;
  background-color: #fff;
  border: 1px solid #ccc;
}

.login-util {
  margin-top: 20px;
  text-align: center;
}

.login-util a {
  display: inline-block;
  padding: 8px 12px;
}

.board-table {
	width: 100%;
  table-layout: fixed;
	margin-top: 16px;
	border-bottom: 1px solid #9b9b9b;
  background-color: #ffffff;
}

.board-table th, td {
	vertical-align: middle;
	height: 64px;
	font-size: 16px;
	text-align: center;
}
.board-table th input[type="checkbox"], td input[type="checkbox"] {
	width: 16px;
	height: 16px;
}
.board-table tr:hover td {
	background-color: #f4f4f4;
}
.board-table tr:hover td a:hover {
	text-decoration: underline;
}
.board-table th {
	border-top: 2px solid #4a4a4a;
  border-bottom: 1px solid #9b9b9b;
	font-weight: 700;
}
.board-table td {
	border-top: 1px solid #eee;
  color: #666666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  line-height: 130%;
}
.board-table td.gray-900 {
  color: #1f1f1f;
}
.board-table td.blue-900 {
  color: blue;
}
.board-table th.vb, td.vb {
	vertical-align: bottom;
}
.board-table td.dark {
	color: #000;
	font-weight: 700;
}
.board-table td.light-gray {
	color: #959595;
}
.board-table th img, td img {
	max-height: 20px;
}
.text-left {
	text-align: left !important;
}
.text-right {
	text-align: right !important;
}
.pagination {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.pagination li {
	margin: 0;
}
.pagination li.active {
	padding: 8px 16px;
	color: #0499C8;
}
.pagination li a {
	display: flex;
	align-items: center;
	padding: 8px 10px;
	border-radius: 3px;
}
.pagination li a:hover {
	background-color: #f4f4f4;
}
.pagination li.pre {
	margin-right: 8px;
}
.pagination li.next {
	margin-left: 8px;
}
.pagination li img {
	height: 10px;
	margin: 6px;
}
.input-icons { 
	position: relative;
	display: inline-block;
} 
.input-icons img { 
	position: absolute;
	top: 16px;
	right: 16px;
	height: 16px;
}
.p-h-40 {
  padding: 0 40px;
}
.p-v-30 {
  padding: 30px 0;
}
.p-v-20 {
  padding: 20px 0;
}
.p-v-10 {
  padding: 10px 0;
}
.mb-8 {
  margin-bottom: 8px;
}
.mb-20 {
  margin-bottom: 20px;
}
.mb-50 {
  margin-bottom: 50px;
}
.mt-10 {
  margin-top: 10px;
}
.mt-5 {
  margin-top: 5px;
}
.mt-20 {
  margin-top: 20px;
}
.mt-30 {
  margin-top: 30px;
}
.mt-60 {
  margin-top: 60px;
}
.mt-80 {
  margin-top: 80px;
}
.border-0 {
  border: 0 !important;
}
/* login */
.login-box {
	width: 460px;
	text-align: center;
	border-radius: 4px;
  background-color: #ffffff;
  padding: 40px 30px;
  border: 1px solid #f1f1f1;
}

.login-box label {
	display: block;
	text-align: left;
	font-size: 18px;
	padding: 10px 0;
	font-weight: 500;
  color: #7e7e7e;
}

.login-box input {
	height: 42px;
	padding: 0 16px;
	margin-bottom: 8px;
	font-size: 18px;
	width: 92%;
	border: 1px solid #cecece;
}


.login-box input:focus {
	border: 1px solid #cecece;
	outline:none;
	background-color: #f1f1f1;
}

.login-box .remember-id, .vali {
	text-align: left;
}

.login-box .remember-id label {
	display: inline-block;
	font-size: 17px;
	font-weight: 400;
	color: #000;
	vertical-align: super;
	margin-left: 8px;
}

.login-box .vali {
	display: block;
	margin-bottom: 16px;
}

.login-box .remember-id input {
	display: inline-block;
	width: 24px;
	height: 24px;
}

.login-box button {
	width: 100%;
	height: 64px;
	font-size: 20px;
	font-weight: 500;
	margin-top: 6px;
}

.login-box > span {
  width: 100%;
	display: inline-block;
	color: #959595;
	font-size: 14px;
	margin-top: 53px;
  padding-top: 37px;
  border-top: 1px solid #d7d7d7;
}

/* header*/
header {
  width: 100%;
}

.header {
	background: #ffffff;
  display: flex;
	justify-content: center;
  border-bottom: 1px solid #0499c8;
}

.site-id {
    font-size: 32px;
    color: #005dd6;
    font-family: Montserrat;
    font-weight: 900;
}
.site-id-seaman {
    font-size: 28px;
    color: #005dd6;
    font-family: Montserrat;
    font-weight: 900;
}

.header > .container > nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 1260px;
    background: #ffffff;
}

.hb-menu > nav > ul {
	position: relative;
	display: inline-block;
}

.hb-menu nav > ul > li {
	display: inline-block;
	position: relative;
	padding-right: 20px;
	transition: all 0.3s ease-in-out;
}

.hb-menu nav > ul > li > a {
	display: flex;
	align-items: center;
	color: #373f57;
	font-size: 16px;
	line-height: 100%;
	font-weight: 500;
	padding: 0;
	height: 88px;
}

.hb-menu nav > ul > li > a > img {
	width: 48px;
	margin-right: 6px;
}

.hb-menu nav > ul > li > a:hover {
  color: #005dd6;
}

.header-sticky.sticky {
	background: rgba(254, 215, 0, .8);
	left: 0;
	position: fixed;
	right: 0;
	top: 0;
	-webkit-transition: all 300ms ease-in 0s;
	transition: all 300ms ease-in 0s;
	z-index: 1049;
}

.sticky {
	-webkit-animation: 800ms ease-in-out 0s normal none 1 running slideInDown;
	animation: 800ms ease-in-out 0s normal none 1 running slideInDown;
}

.hb-menu nav > ul > li > ul.hb-dropdown {
	background: #edece9;
	opacity: 0;
	padding: 20px 0;
	position: absolute;
	top: 100%;
	visibility: hidden;
	width: 220px;
	z-index: 99;
}

.hb-menu nav ul > li:hover > ul.hb-dropdown {
	opacity: 1;
	transform: scaleY(1);
	visibility: visible;
	top: 100%;
}

.hb-menu nav ul > li > ul.hb-dropdown > li {
	position: relative;
	transition: all 0.3s ease-in-out;
}

.hb-menu nav ul > li > ul.hb-dropdown > li > a {
	color: #707070;
	display: block;
	padding: 17px 0;
	font-weight: 700;
	margin-left: 58px;
}

.hb-menu nav ul > li > ul.hb-dropdown > li > a:hover,
.hb-menu nav ul > li > ul.hb-dropdown > li.active > a {
	color: #000;
	border-bottom: 1px solid #8a867f;	
}
}

.my-menu {
  display: flex;
  align-items: center;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background-size: cover;
  margin-right: 8px;
}

.my-menu .login-join {
  display: flex;
  flex-direction: row;
}

.my-menu .login-join li a {
  padding: 8px 16px;
  font-size: 14px;
  color: #1f1f1f;
}

.my-menu .login-join li a:hover {
  color: #0499c8;
}


.my-menu .name {
  font-size: 16px;
  font-weight: 500;
  color: #3d3d3d;
  padding: 16px 8px;
  position: relative;
  cursor: pointer;
}

.my-menu .name > img {
  margin-left: 8px;
}

.my-menu .name > ul.my-dropdown {
	background: #fff;
	opacity: 0;
	position: absolute;
	top: 100%;
  right: 10px;
	visibility: hidden;
	width: 180px;
  border:1px solid #d3d3d3;
	z-index: 99;
}

.my-menu .name:hover > ul.my-dropdown {
	opacity: 1;
	transform: scaleY(1);
	visibility: visible;
	top: 100%;
}

.my-menu .name:hover > ul.my-dropdown li a {
  display: flex;
  align-items: center;
  height: 48px;
  padding-left: 20px;
  border-bottom: 1px solid #ededed;
  font-size: 14px;
}

.my-menu .name:hover > ul.my-dropdown li a:hover {
  background-color: #ededed;
}

.my-menu .name:hover > ul.my-dropdown li:last-child {
  border: 0;
}

.my-menu .name:hover > ul.my-dropdown li a > img {
  width: 17px;
  margin-right: 12px;
}

.key-visual {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.body-container {
  display: flex;
  justify-content: space-between;
	width: 1260px;  
}

aside {
  display: block;  
	margin-right: 106px;
}

aside > ul {
	width: 270px;
}

aside > ul > li {
  font-size: 18px;
  font-weight: 700;
}

aside > ul > li.active > a {
	display: flex;
	align-items: center;
  color: #fff;
  background-color: #0499c8;
}

aside > ul > li > a {
  display: flex;
	align-items: center;
  width: 100%;
  padding: 14px 0 14px 37px;
}

aside > ul > li > a:hover {
  color: #fff;
  background-color: #0499c8;
}

aside > ul > li .bullet-bar {
  display: inline-block;
  width: 3px;
  height: 18px;
  background-color: #cbcac9;
  margin-right: 16px;
}

aside > ul > li.active > .bullet-bar,
aside > ul > li > a:hover > .bullet-bar,
aside > ul > li li.active .bullet-bar,
aside > ul > li a:hover .bullet-bar {
  background-color: #a2d7e9;
	color: #0499c8;
}

aside > ul > li li.active li .bullet-bar {
	background-color: #cbcac9;
}

aside > ul > li li li a:hover .bullet-bar {
	background-color: #a2d7e9;
}

aside > ul > li li.active,
aside > ul > li li a:hover,
aside > ul > li li.active a {
 	color: #0499c8;
}

aside > ul > li > ul {
  margin: 20px 0;
}

aside > ul > li li {
  font-size: 16px;
  font-weight: 700;
}

aside > ul > li li > a {
	display: flex;
	align-items: center;
  width: 100%;
  padding-left: 56px;
  height: 40px;
}

aside > ul > li li li > a {
	padding-left: 72px;
	color:#3d3d3d;
}

aside > ul > li li > a:hover {
  color: #0499c8;
}

footer {
  width: 100%;
  margin-top: 100px;
  background-color: #1f1f1f !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
}

footer > div {
  width: 1260px;
  margin: 24px 0;
}

footer ul.util {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

footer ul.util li a {
  padding: 8px 24px;
  color: #aaaaaa;
}

footer ul.util li a:hover {
  color: #e5e5e5;
}

footer .com-info {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}

footer .com-info ul {
  display: flex;
  flex-direction: column;
  margin-left: 40px;
}

footer .com-info > div {
  color: #f2f2f2;
  font-size: 18px;
}

footer .com-info ul li {
  font-size: 14px;
  padding: 6px 0;
  color: #898989;
  font-family: 'Montserrat';
}

footer .copyright {
  margin-top: 24px;
  text-align: right;
  font-size: 13px;
  color: #666666;
  text-transform: uppercase;
}

.contents {
  display: block; 
  width: 100%;
}

.contents > .board-util {
	margin-top: 32px;
}

.contents > .board-util > .util-group {
  display: flex;
  justify-content: space-between;
}

.contents > .board-util > .util-group > div {
  display: flex;
}

.contents > .board-util > .util-group > div > a,
.contents > .board-util > .util-group > div > button {
  margin-right: 5px;
}

.contents > .board-util > select {
	width: auto;
	margin: 0;
}
.contents .board-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 40px;
}
.contents .board-bottom .left {
	width: 130px;
}

.contents .board-bottom .right {

	text-align: right;
}

.contents .board-search {
	display: flex;
	justify-content: center;
	margin-top: 40px;
}

.contents .board-search select {
	width: 128px;
}

.contents .board-search input {
	width: 300px;
	margin-left: -1px;
}

.board-view .board-summary {
  margin-top: 16px;
  padding-top: 32px;
	border-top: 2px solid #9b9b9b;
  border-bottom: 1px solid #eee;
}

.board-view .board-summary .title-line {
  display: flex;
  justify-content: space-between;
}

.board-view .board-summary .title-line h2 {
  max-width: 900px;
  line-height: 160%;
}

.board-view .board-summary .title-line span {
  color: #959595;
}

.board-view .board-summary ul {
  margin-top: 30px;
}

.board-view > .board-summary li {
  display: flex;
  align-items: flex-start;
  margin-bottom: 24px;
}

.board-view .board-summary li span {
  width: 96px;
  font-weight: 700;
}

.board-view .board-summary li span + span {
  width: auto;
  font-weight: 400;
  color: #707070; 
}

.board-view .board-summary li span + span a {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.board-view .board-summary li span + span a img {
  width: 16px;
  margin-right: 8px;
}

.board-view .board-summary li span + span a span {
  color: #949494;
  font-weight: 400;
  padding-left: 8px;
}

.board-view .board-summary li span + span a:hover span {
  color: #0499c8;
}

.board-view .board-content {
  padding: 30px 0 50px 0;
  line-height: 180%;
  border-bottom: 1px solid #9b9b9b;
}

.board-view .board-reply {
  margin: 50px 0;
}

.board-view .board-reply .textarea {
  width: 100%;
  background-color: none;
  text-align: right;
  margin-top: 16px;
}

.board-view .board-reply > .textarea {
  background-color: #f3f3f3;
  border: 0;
}

.board-view .board-reply .textarea textarea {
  background: none;
  border: 0;
  margin: 24px 26px 0 26px;
  border: 1px solid #ccc;
}

.board-view .board-reply .textarea > textarea::placeholder {
  color: #aaa;
}

.board-view .board-reply .textarea .btn {
  margin: 0 26px 20px 0;
}

.board-view .board-reply .reply-article {
  margin-top: 24px;
  display: flex;
  align-items: start;
  flex-wrap: wrap;
}

.board-view .board-reply .reply-article.reply-inner {
  margin-left: 56px;
  padding-left: 32px;
  border-left: 1px solid #ebebeb; 
}

.board-view .board-reply .reply-article .avatar {
  width: 48px;
}

.board-view .board-reply .reply-article .reply-content {
  flex: 10;
  margin-top: 12px;
}

.board-view .board-reply .reply-article .reply-content > span {
  color: #2a2a2a;
  font-weight: 800;
  font-size: 13px;
}

.board-view .board-reply .reply-article .reply-content p {
  color: #6a6a6a;
  font-size: 15px;
  line-height: 150%;
  margin-top: 20px;
}

.board-view .board-reply .reply-article .reply-content ul {
  margin-top: 20px;
  font-size: 14px;
  color: #959595;
  display: flex;
  align-items: center;
}

.board-view .board-reply .reply-article .reply-content li {
  margin-right: 8px;
  display: flex;
  align-items: center;
}

.board-view .board-reply .reply-article .reply-content ul li:first-child {
  margin-right: 16px;
}

.board-view .board-reply .reply-article .reply-content ul li img {
  width: 5px;
  margin-right: 4px;
}

.board-view .board-reply .reply-article .reply-content ul li .txt-button {
  font-size: 13px;
  font-weight: 700;
  color: #535353;
  background-color: #fff;
  border: 0;
  cursor: pointer;
}

.board-view .board-reply .reply-article .reply-content ul li .txt-button:hover,
.board-view .board-reply .reply-article .reply-content ul li .txt-button.active {
  color: #0499c8;
}

.board-edit {
  border-top: 2px solid #4a4a4a;
  border-bottom: 1px solid #9b9b9b;
  margin-top: 42px;
}

.board-edit .input-article {
  display: flex;
  padding: 12px 0;
  align-items: stretch;
  border-bottom: 1px solid #eeeeef;
}

.board-edit .input-article span {
  display: flex;
  align-items: center;
  width: 160px;
  font-size: 16px;
  font-weight: 700;
  color: #000;
}

.board-edit .input-article .input {
  flex: 1;
}

.board-edit .input-article .attached-list {
  flex: 1;
  background-color: #f3f3f3;
  padding: 20px 20px 8px 20px;
  margin-right: 16px;
  font-size: 14px;
}

.board-edit .input-article .attached-list li {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.board-edit .input-article .attached-list li label {
  width: 16px;
  height: 16px;
  margin-right: 8px;
}

.board-edit .input-article .attached-list li img {
  width: 16px;
  margin-right: 8px;
}

.board-edit .input-article .attached-list li span {
  color: #707070;
  font-weight: 400;
  padding-left: 8px;
  font-size: 14px;
}

.board-edit .input-article .btn-box {
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  width: 160px;
  height: 100%;
}

.board-edit .input-article .btn-box li {
  margin-bottom: 8px;
}

.board-edit .input-article .btn-box .btn {
  width: 130px;
}

.board-edit .input-article .file-info {
  font-size: 14px;
  color: #000;
  margin-bottom: 16px;
}

.center-big-btn {
  text-align: center;
}

.center-big-btn button {
  width: 200px;
}

.center-big-btn > button {
  margin-right: 40px;
}

.w-800 {
  width: 832px;
}

.w-800 > .board-table,
.w-800 > .setting-box  {
  margin-top: 40px;
}

.agent-reg {
	margin: 42px 0 20px 0;
	padding: 8px 0;
	border-top: 2px solid #4a4a4a;
	border-bottom: 1px solid #9b9b9b;
}

.agent-reg .divider {
	border-top: 1px solid #eee;
	margin-top: 12px;
	padding-bottom: 12px;
}

.form-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 7px 0;
}

.form-row span {
	width: 96px;
	font-weight: 700;
	font-size: 16px;
	padding-left: 24px;
}

.form-row .input,
.form-row .select {
	flex: 1;
}

.form-row .input input,
.form-row .select select {
	height: 32px;
	background-color: #f3f3f3;
	border: 0;
}

.form-row .select i {
	top: 7px;
}

.form-row.line {
	padding: 12px 0;
  border-bottom: 1px solid #eee; 
}

.both-line {
	padding: 12px 0;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee; 
}

.check-row {
	display: flex;
	align-items: center;
	margin: 7px 0;
}

.check-row i {
	margin: 0 12px;
}

.check-row label {
	font-weight: 700;
}

.pl-0 {
	padding-left: 0 !important;
}

.pl-16 {
	padding-left: 16px;
}

.pr-16 {
	padding-right: 16px;
}

.ml-6 {
	margin-left: 6px;
}

.ml-12 {
	margin-left: 12px;
}

.ml-24 {
  margin-left: 24px;
}

.ml-48 {
	margin-left: 48px;
}

.mr-6 {
	margin-right: 6px;
}

.mt-16 {
  margin-top: 16px;
}

.mt-24 {
  margin-top: 24px;
}

.mt-40 {
  margin-top: 40px;
}

.mb-4 {
	margin-bottom: 4px;
}

.mb-8 {
	margin-bottom: 8px;
}

.mb-12 {
	margin-bottom: 12px;
}

.mb-16 {
	margin-bottom: 16px;
}

.mb-40 {
	margin-bottom: 40px;
}

.text-center {
	text-align: center;
}

.text-right {
	text-align: right;
}

.text-12 {
	font-size: 12px;
}

.text-14 {
  font-size: 14px !important;
}

.text-16 {
  font-size: 16px !important;
}

.text-18 {
	font-size: 18px;
}

.setting-box {
  padding: 20px 0;
  border-bottom: 1px solid #9b9b9b;
}

.space-between-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tree-box {
  width: 300px;
  height: 458px;
  border: 1px solid #ccc;
  margin: 12px 0;
}

.flex-start {
  display: flex;
  align-items: initial;
}

.flex-vertical {
  display: flex;
  flex-direction: column;
}

.option-list {
  height: 106px;
  border: 1px solid #d2d2d2;
  overflow-y: auto;
}

.option-list ul {
  margin: 4px 0;
}

.option-list li {
  display: flex;
  align-items: center;
  padding: 3px 0 3px 12px;
  color: #000;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}

.option-list li img {
  margin-right: 8px;
}

.option-list li:hover,
.option-list li.active {
  background-color: #e0dfdf;
}

.option-list.big li {
  height: 30px;
}

.card-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
}

.card-container > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
}

.card-container > div:hover {
  border-color: #1f1f1f;
  cursor: pointer;
}

.card-container .card-lg {
  width: 303px;
  height: 210px;
}

.card-container .card-lg .logo {
  margin-top: 30px;
  min-height: 70px;
  max-height: 120px;
  max-width: 240px;
}

.card-container .card-lg .txt-info {
  width: 263px;
  text-align: left;
  margin-top: 20px;
}

.card-container .card-lg .txt-info li {
  padding: 6px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-container .card-lg .txt-info li:last-child {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.card-container .card-md {
  width: 242px;
  height: 150px;
}

.card-container .card-md .logo {
  margin-top: 25px;
  min-height: 40px;
  max-height: 90px;
  max-width: 120px;
}

.card-container .card-md .txt-info {
  width: 213px;
  text-align: left;
  margin-top: 16px;
}

.card-container .card-md .txt-info li {
  padding: 4px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-container .card-md .txt-info li:last-child {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.card-container .banner {
  width: 306px;
  height: 72px;
}

.card-container .card-notice {
  width: 620px;
  border-radius: 8;
  background-color: #fff;
  height: 220px;
  cursor: default !important;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}


.card-container .card-notice .title-area {
  width: 100%;
  height: 56px;
  border-radius: 8px 8px 0 0;
  background: #f2f2f2;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card-container .card-notice .title-area h4 {
  width: 580px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.card-container .card-notice h4 a {
  font-size: 14px;
  font-weight: 400;
  color:#575757;
}

.card-container .card-notice h4 a:hover {
  color: #005dd6;
}

.card-container .card-notice ul {
  width: 580px;
  margin-top: 18px;
}

.card-container .card-notice ul li {
  padding: 8px 0;
  color: #575757;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.card-container .card-notice ul li span span {
  color: #898989;
}

.card-container .card-notice ul li span span.view {
  display: inline-block;
  width: 40px;
  text-align: right;
}

.card-container .card-notice ul li > span {
  max-width: 360px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-container .card-notice ul a:hover li {
  color: #005dd6;
}

.row-form {
  display: flex;
  flex-direction: row;
  align-items: center;
  min-height: 44px;
  padding: 7px 0;
  border-bottom: 1px solid #e5e5e5;
}

.row-form .label {
  width: 100px;
}

.row-form .form {
  width: auto;
}

.row-form input {
	height: 38px;
	padding: 0 16px;
	font-size: 16px;
	border: 1px solid #cccccc;
}

.row-form input:focus {
	border: 1px solid #0499c8;
	outline:none;
	background-color: #f1f1f1;
}

.vcenter-hright {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}

textarea {
  width: 100%;
  font-size: 16px;
  background-color: none;
  border: 1px solid #ccc;
  margin-top: 16px;
  padding: 24px;
  resize: none;
}

.view-box {
  width: 920px;
  background-color: #ffffff;
  padding: 56px;
  margin-top: 60px;
  border: 1px solid #ededed;
}

.view-box h1, h2, h3, h4 {
  font-family: 'Roboto', 'Noto Sans KR';  
}

.view-box h1 {
  font-size: 40px;
}

.summary-line-box {
  margin-top: 20px;
  padding: 20px 0 10px 0;
  border-top: 2px solid #707070;
  border-bottom: 1px solid #707070;
  font-size: 16px;
  color: #1f1f1f;
}

.recruit-summary li {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 8px 0;
  line-height: 150%;
}

.recruit-summary li span:first-child {
  display: inline-block;
  min-width: 100px;
}
.user-edited {
  max-width: 920px;
  padding: 20px 30px;
  min-height: 200px;
  line-height: 180%;
}
.company-info-box {
  margin-top: 8px;
  border: 1px solid #cccccc;
  border-radius: 6px;
  padding: 30px;
}

.company-info-box img.logo {
  max-width: 200px;
}

.text-overflow {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.border-top {
  border-top: 1px solid #cccccc;
}

.v-bottom {
  display: flex;
  align-items: flex-end;
}

.attatched-img img {
  max-width: 120px;
  max-height: 60px;
}

.v-direction {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.vip-box {
  margin-top: 60px;
  padding: 20px;
  background: #f1fbfd;
}

.vip-box .form {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 440px;
}

.vip-box .form .price {
  font-weight: 700;
  color: #ff0000;
  font-size: 24px;
}

.vip-box .form .price > span {
  font-weight: 400;
  color: #575757;
  font-size: 16px;
  text-decoration: line-through;
  padding-right:16px;
}

.vip-box .form .price .won {
  font-size: 16px;
  color: #ff0000;
  text-decoration: none;
}

.total-price {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-top: 30px;
  border-top: 2px solid #1f1f1f;
  padding-top:20px;
}

.total-price .total {
  font-size: 28px;
  color: #1f1f1f;
  font-weight: 700;
}

.total-price .total > span {
  font-size: 16px;
  color: 575757;
  padding-right: 16px;
  font-weight: 400;
}

.complete-box {
  width: 400px;
  padding: 30px 20px;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  text-align: center;
}

.partner-table {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
}

.partner-table th {
  border: 0;
}

.partner-table td {
  border-collapse: collapse;
  border: 1px solid #cccccc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid #cccccc;
  color: #575757;
  text-align: center;
  padding: 20px 10px;
  width: 20%;
  vertical-align: middle;
  background-color: #fff;
  height: 94px;
}

.partner-table td img {
  max-height: 60px;
  max-width: 200px;
  padding: 8px;
}

.info-table {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
  border: 1px solid #c9ced8;
}

.info-table th {
  width: 16%;
  background-color: #e3f2fd;  
}

.info-table td {
  width: 34%;
  background-color: #fff;
}

.info-table th,
.info-table td {
  border: 1px solid #c9ced8;
  color: #575757;
  padding: 20px;
  height: auto;  
  text-align: left;
}

.terms {
  width: 800px;
  line-height: 160%;
}

.vip-info {
  position: relative;
  display: inline-block;
  padding: 5px 12px;
  z-index: 100;
}

.vip-info .info-box {
  display: none;
  width: 580px;
  position: absolute;
  left: -250px;
  top: 20px;
  background-color: #fff;
  padding: 20px;
  font-size: 16px;
  line-height: 160%;
  border: 1px solid #898989;
}

.vip-info:hover .info-box {
  display: block;
}

.vip-info:hover .info-box img {
  width: 580px;
}

textarea {
  font-family: 'Noto Sans KR';
}

.list-view {}
.list-view li {position: relative; border: 1px solid #dddddd; background-color: #ffffff;}
.list-view li + li {margin-top: -1px;}
.list-view li:first-child {border-radius: 6px 6px 0 0;}
.list-view li:last-child {border-radius: 0 0 6px 6px;}
.list-view li.single {border-radius: 6px;}
.list-view li:hover {position: relative; border-color: #0085c9;}
.list-view li:hover + li {border-top: 1px solid #0085c9;}
.list-view.single {margin-top: 10px;}
.list-view.single li {border-radius: 6px !important;}
.list-view.click-view {cursor: pointer;}
.list-view li a.question{font-size: 18px; color: #333333; padding-left: 70px; height: 58px; line-height: 58px; box-sizing: border-box;}
.list-view li .answer{padding: 25px 15px; margin: 10px 20px; color: #333333; font-size: 15px; line-height: 28px;}

.list-view li.active a.question {border-bottom: 1px solid #dddddd;}
.list-view li.except a.question {color: #999999;}

.faq-list {}
.faq-list li {position: relative; border: 1px solid #dddddd; background-color: #ffffff;}
.faq-list li + li {margin-top: -1px;}
.faq-list li:first-child {border-radius: 6px 6px 0 0;}
.faq-list li:last-child {border-radius: 0 0 6px 6px;}
.faq-list li:hover {position: relative; border-color: #0085c9;}
.faq-list li:hover + li.active {border: 1px solid #0085c9;}
.faq-list li.active:hover + li {border: 1px solid #dddddd;}
.faq-list li.active + li {}
.faq-list li a.question{position: relative; display: block;}
.faq-list li a.question:after {content: ''; display: block; position: absolute; left: 30px; top: 22px; width: 17px; height: 10px; background: url('../img/btn_up.png') 0 center no-repeat; background: url('../img/btn_up.svg') 95% center no-repeat, linear-gradient(transparent, transparent); background-size: 17px 10px; -webkit-background-size: 17px 10px;}
.faq-list li .answer{display: none; background-color: #ffffff;}
.faq-list li.active {position: relative; z-index: 9; border: 1px solid #0085c9;}
.faq-list li.active .list-head {padding: 24px 29px;}
.faq-list li.except {}
.faq-list li.active .question:after{content: ''; display: block; position: absolute; width: 17px; height: 10px; background: url('../img/btn_down.png') 0 center no-repeat; background: url('../img/btn_down.svg') 95% center no-repeat, linear-gradient(transparent, transparent); background-size: 17px 10px; -webkit-background-size: 17px 10px;}
.faq-list li.active .answer{display: block;}

.gray-100 {color:#fafafa}
.gray-200 {color:#f2f2f2}
.gray-300 {color:#e5e5e5}
.gray-400 {color:#cccccc}
.gray-500 {color:#aaaaaa}
.gray-600 {color:#898989}
.gray-700 {color:#666666}
.gray-800 {color:#575757}
.gray-900 {color:#1f1f1f !important}

.txt-xl {font-size:20px;}
.txt-lg {font-size:18px;}
.txt-md {font-size:16px;}
.txt-sm {font-size:14px;}
.txt-xs {font-size:12px;}

.txt-normal {font-weight: 400;}
.txt-underline {text-decoration:underline}
.line-height-160 {line-height: 160%;}
.line-height-180 {line-height: 180%;}

.weight-900 {font-weight: 900;}

.com-summary p {
  line-height: 180% !important;
}


/* style.css:1077 line */
.board-view .board-reply .reply-article {
  margin-top: 0;
  margin-bottom: 16px;
  display: flex;
  align-items: start;
  flex-wrap: wrap;
  line-height: 2;
}

/* style.css:1904 line */
.board-view .board-reply .reply-article .reply-content {
  display: flex;
  width: 100%;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
}



/* 클래스추가 */
.board-view .board-reply .reply-article .reply-content.reply-reply {  
  padding-left: 20px;
  margin-top: -16px;
}

.board-view .board-reply .reply-article .reply-content .reply-main {
  width: 70%;
  color: #333;
  font-size: 14px;
}

.board-view .board-reply .reply-article .reply-content .reply-sub {
  width: 30%;
  color: #959595;
  font-size: 14px;
  text-align: right;
}

.board-view .board-reply .reply-article .reply-content .reply-sub span,
.board-view .board-reply .reply-article .reply-content .reply-sub button {
  margin: 0 2px;
  padding: 0 4px;
}