@charset "utf-8";

/* 배민 주아체 폰트 */
@font-face { 
	font-family: 'BMJUA'; 
	src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/BMJUA.woff') format('woff'); 
	font-weight: normal; 
	font-style: normal;
}
.bmjua_font {
	font-family: 'BMJUA'; 
	font-size: 23px;
	color: #ff363b;
}

.subContent {
	padding-left: 300px;
	margin: 90px 0 120px;
	min-height: 600px;
	word-break: keep-all;
}
.content {
	padding: 60px 0;
}
.fz12 { font-size: 12px; }
.fz13 { font-size: 13px; }
.fz14 { font-size: 14px; }
.fz15 { font-size: 15px; }
.fz16 { font-size: 16px; }
.fz17 { font-size: 17px; }
.fz18 { font-size: 18px; }
.fz19 { font-size: 19px; }
.fz20 { font-size: 20px; }
.b600 { font-weight: 600; }
.b500 { font-weight: 500; }

/* 서브페이지 타이틀 */
.stit {
	background: url('/image/sub/one.png') no-repeat left;
	font-size: 18px;
	font-weight: 500;
	padding-left: 20px;
	margin-bottom: 20px;
}

/* 한마음한몸운동본부 나눔자리 */
.h_slide_wrap {
	position: relative;
}
.h_slide .item img {
	vertical-align: top;
}
.h_slide .item p {
	margin-top: 20px;
}
/* dots */
.h_dots {
	margin-left: 5px;
}
.h_dots li {
	display: inline-block;
	margin: 0 3px;
}
.h_dots li button {
	border: 1px solid #888;
	padding: 0;
	margin: 0;
	background: transparent;
	width: 8px;
	height: 8px;
	text-indent: -999em;
	border-radius: 100%;
	box-sizing: border-box;
	outline: 0;
}
.h_dots li.slick-active button {
	background: #000;
	border: 1px solid #000;
}
/* arrow */
.goStop_area {
	text-align: center;
	position: relative;
	margin-top: 10px;
}
.goStop_area > * {
	display: inline-block;
	vertical-align: top;
}
.h_arw {
	position: relative;
}
.h_arw .slick-arrow {
	background-image: url('/image/sub/h_arw.png');
	background-repeat: no-repeat;
	height: 20px;
	width: 8px;
	text-align: center;
	background-color: transparent;
	border: 0;
	text-indent: -999em;
	padding: 0;
	outline:0; 
}
.h_arw .slick-prev {
	background-position: left;
}
.h_arw .slick-next {
	background-position: right;
}
.goStop_area .goStop {
	display: inline-block;
	width: 10px;
	height: 20px;
	background: url('/image/sub/stop.png') no-repeat center;
	text-indent: -9999px;
	z-index: 99;
}
.goStop_area .goStop.on { background: url('/image/sub/play.png') no-repeat center; }

/* arrow 수정 */
.h_slide_nav {
	position: absolute;
	left: 0; right: 0;
	bottom: 90px;
	text-align: center;
}
.h_slide_nav .page {
	background: rgba(0,0,0,0.4) url('/image/sub/pager.png') no-repeat 10px;
	border-radius: 20px;
	line-height: 25px;
	height: 27px;
	padding: 0 10px 0 30px;
	color: #fff;
	display: inline-block;
	margin: 0 auto;
}
.h_slide_nav .page > * {
	display: inline-block;
	vertical-align: middle;
	font-size: 13px;
}
.h_slide .slick-arrow {
	height: 35px;
	width: 18px;
	border: 0;
	text-indent: -999em;
	padding: 0;
	outline:0; 
	position: absolute;
	top: 43%;
	z-index: 1;
	cursor: pointer;
}
.h_slide .slick-prev {
	background: url('/image/sub/h_left.png') no-repeat;
	left: 20px;
}
.h_slide .slick-next {
	background: url('/image/sub/h_right.png') no-repeat;
	right: 20px;
}

.h_txt {
	background: #f9f9f9;
	padding: 40px ;
	border: 1px solid #ddd;
}
.h_txt p { 
	margin-bottom: 12px;
	line-height: 1.5;
	font-weight: 500;
}
.h_txt p span { 
	font-weight: normal;
}
.h_txt p .pd {
	padding-left: 75px;
	display: block;
}

/* 자주하는 질문 탭 */
.faq_tab {
	display: table;
    table-layout: fixed;
    width: 100%;
    margin-bottom: 30px;
}
.faq_tab li {
	    display: table-cell;
	box-sizing: border-box;
}
.faq_tab li a {
	color: #666;
	font-size: 14px;
	text-align: center;
	display: block;
	background: #f9f9f9;
	line-height: 45px;
	border: 1px solid #ddd;
	margin-left: -1px;
}
.faq_tab li.on a {
	color: #000;
	border-bottom: 0;
	border-top: 1px solid #000;
	font-weight: 500;
	background: #fff;
}

/* 로그인 */
.login_wrap {
	border: 3px solid #ddd;
	border-radius: 5px;
	padding: 30px 0;
	background: url('/image/sub/login_bg.png') no-repeat right bottom;
}
.login_wrap > div {
	float: left;
	width: 50%;
	box-sizing: border-box;
	padding: 15px 50px;
}
.login_wrap > div:first-child {
	border-right: 1px solid #ddd;
}
.login_wrap > div input[type='text'],
.login_wrap > div input[type='password']
{
	height: 50px;
	border: 1px solid #ddd;
	width: 100%;
	box-sizing: border-box;
	padding: 0 20px;
	border-radius: 2px;
	background: #f5f5f5;
}
.login_btn {
	height: 50px;
	width: 100%;
	color: #fff;
	border-radius: 2px;
	background: #454f58 !important;
}
.checkbox_wrap input[type='checkbox'] {
	display: none;
}
.checkbox_wrap input[type='checkbox'] + label {
	background: url('/image/sub/check.png') no-repeat left;
	padding-left: 28px;
	line-height: 20px;
	display: inline-block;
}
.checkbox_wrap input[type='checkbox']:checked + label {
	background: url('/image/sub/check_on.png') no-repeat left;
}

.checkbox_wrap input[type='radio'] {
	display: none;
}
.checkbox_wrap input[type='radio'] + label {
	background: url('/image/sub/check.png') no-repeat left;
	padding-left: 28px;
	line-height: 20px;
	display: inline-block;
}
.checkbox_wrap input[type='radio']:checked + label {
	background: url('/image/sub/check_on.png') no-repeat left;
}
.login_wrap .txt p {
	margin-bottom: 10px;
}
.login_wrap .txt p > a {
	font-weight: 500;
}

/* 아이디 찾기 */
.myFind .ban {
	width: 100%;
	float: left;
}
.myFind .ban:first-child {
	margin-right: 2%;
}
.my_box {
	height: 425px;
	padding: 70px 40px 90px 40px;
	border: 1px solid #ddd;
    box-sizing: border-box;
	border-radius: 10px;
}
.my_box.pad {
	padding: 50px 10px;
}
.findTit {
	font-size: 23px;
	font-weight: 500;
	margin-bottom: 15px;
}
.findSub {
	font-size: 16px;
	color: #666;
	margin-bottom: 30px;
}
.my_input .tit {
	font-weight: 500;
}
.my_input input[type='text'], 
.my_input input[type='password'],
.my_input select {
	border: 1px solid #ddd;
    width: 100%;
    box-sizing: border-box;
    height: 45px;
    padding: 0 10px;
}
.my_input input.col2 { width: 48%; }
.col2_span { width: 4%; display: inline-block; vertical-align:middle; text-align: center; }
.my_input input.col3, .my_input select.col3 { width: 30%; }
.col3_span { width: 5%; display: inline-block; vertical-align:middle; text-align: center; }

.my_check {
	margin-top: 55px;
}
.my_check li {
	width: 100%;
	text-align: center;
	box-sizing: border-box;
	float: left;
	padding: 15px 0;
}
.my_check li:first-child {
	/* border-right: 1px solid #ddd; */
}
.my_check li .img img {
	vertical-align: top;
}
.find_ok {
	border: 1px solid #ddd;
	border-radius: 10px;
	padding: 80px 0;
	font-size: 23px;
	line-height: 1.5;
}

/* 비밀번호 찾기 */
.find_pw_wrap {
	border: 1px solid #ddd;
	border-radius: 10px;
	padding: 50px 23%;
}

/* 회원가입 */
.join_wrap .tit {
	font-size: 25px;
}
.join_scroll_wrap {
	border: 1px solid #ddd;
	padding: 30px 30px 30px 30px;
	border-radius: 10px;
	box-sizing: border-box;
}
.join_scroll {
	height: 340px;
	overflow: auto;
	padding-right: 10px;
}
.join_scroll::-webkit-scrollbar{width: 5px;}
.join_scroll::-webkit-scrollbar-track {background-color:#fff;}
.join_scroll::-webkit-scrollbar-thumb {background-color:#ccc;border-radius: 30px;}
.join_scroll::-webkit-scrollbar-thumb:hover {background: #555;}
.join_scroll::-webkit-scrollbar-button:start:decrement,
.join_scroll::-webkit-scrollbar-button:end:increment {display: none;} 

.join_field {
	border: 1px solid #ddd;
	border-radius: 5px;
	padding: 60px 100px;
}
.join_field li {
	position: relative;
	margin-bottom: 40px;
}
.join_field li .left {
	position: absolute;
	left: 0;
	top: 5px;
	font-weight: 500;
}
.join_field li .txt_field {
	padding-left: 160px;
}
.join_field li .txt_field textarea {
	border: 1px solid #ddd;
    width: 100%;
    box-sizing: border-box;
    resize: none;
}
.join_field li .txt_field input[type='text'],
.join_field li .txt_field input[type='password'] {
	width: 400px;
	height: 40px;
}
.join_field .my_input select {
	height: 40px;
}
.join_field li .txt_field input[type='text'].col3 {
	width: 30%;
}
.join_field li .txt_field input[type='text'].col2 {
	width: 48%;
}
.join_field li .txt_field input[type='password'].col2 {
	width: 48%;
}
.join_field li .txt_field button.ok {
	background: #495057;
	height: 40px;
	color: #fff;
	width: 120px;
	border-radius: 2px;
}
.join_field li .txt_field input.name {
	background: #f9f9f9;
	outline: 0;
}
.join_field li .txt_field .radio {
}
.join_field li .radio input[type='radio'] {
	display: none;
}
.join_field li  .radio input[type='radio'] + label {
	line-height: 38px;
	display: inline-block;
	width: 55px;
	text-align: center;
	border: 1px solid #ddd;
	border-radius: 2px;
	box-sizing: border-box;
	padding: 0;
}
.join_field li .radio input[type='radio']:checked + label {
	border: 1px solid #495057;
	background: #495057;
	color: #fff;
}

.join_ok {
	margin-top: 70px;
}
.join_ok > div {
	width: 50%;
}
.join_ok .title {
	font-size: 34px;
	line-height: 1.3;
}

/* 홍보 */
.g_list > li {
	width: 31.6666%;
	margin-right: 2.5%;
	margin-bottom: 2.5%;
}
.g_list > li:nth-child(3n) {
	margin-right: 0;
}
.g_list > li > a {
	display: block;
	border: 1px solid #ddd;
}
.g_list > li .img {
	max-height: 180px;
	border-bottom: 1px solid #ddd;
	overflow: hidden;
}
.g_list > li .img img {
	vertical-align: top;
	width: 100%;
}
.g_list > li .txt {
	padding: 20px 15px;
}
.g_list > li .tit {
	overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    word-break: break-all;
    line-height: 1.5em;
    height: 3em;
	margin-bottom: 10px;
}
.g_list > li .tit span {
	padding-right:5px;
}

/* 연혁 */
.history {
	padding-bottom: 80px;
	position: relative;
    letter-spacing: normal;
}
.history:after {
	content: '';
    position: absolute;
    width: 1px;
    left: 97px;
    top: 10px;
    height: 100%;
    background: #ddd;
}
.history .year {
	font-size: 22px;
	font-weight: bold;
	color: #D90E23;
	position: absolute;
	top:0;
	left: 0;
	padding-left: 20px;
	    font-family: 'Open Sans',sans-serif;
}
.history .year span {
	margin-left: 15px;
	position: relative;
	z-index: 1;
}
.history .txt_wrap {
	padding-left: 150px;
}
.history .txt_wrap table {
	width: 100%;
}
.history .txt_wrap table th,
.history .txt_wrap table td {
	font-size: 16px;
	text-align: left;
	padding-bottom: 10px;
	    vertical-align: top;
}
.history .txt_wrap table th {
	width: 130px;
	    font-family: 'Open Sans',sans-serif;
}
.history .txt_wrap table td {
	color: #666;
}

/* 장기기증이란? */
.jang > div {
	width: 49%;
	position: relative;
	height: 165px;
	box-sizing: border-box;
}
.jang > div > span {
	position: absolute;
	left: 30px;
	top: 35px;
}
.jang > div .txt {
	padding-left: 120px;
}
.jang > div .txt .fz16 {
	line-height: 1.5;
	margin-top: 3px;
}
.jang_box > div {
	border: 1px solid #e0e0e0;
	padding: 40px 25px;
	border-radius: 0 0 10px 10px; 
}
.jang_box > div.org {
	border-top: 3px solid #ff5655;
}
.jang_box > div.blue {
	border-top: 3px solid #0a78c8;
}
.jang_tit {
	font-size: 23px;
	font-weight: 600;
	padding-bottom: 20px;
	line-height: 1;
	letter-spacing: normal;
}
.jang_tit.bor {
	border-bottom: 1px solid #ddd;
	margin-bottom: 40px;
}

/* step_list */
.step_num {
	font-family: 'Montserrat', sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #cbcbcb;
}
.step_tit {
	font-size:  20px;
}
.step_list {
	margin-top: 15px; 
}
.step_list > li {
	display: inline-block;
	vertical-align: middle;
	background: #ccc;
	border-radius: 100%;
	width: 14px;
	height: 14px;
	margin-left: 5px;
}
.step_list > li.on {
	background: #D90E23;
    width: 20px;
    height: 20px;
    color: #fff;
    text-align: center;
    line-height: 19px;
    font-size: 12px;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
}
.step_list > li.back {
	background: #888;
}

/* 기증 희망 신청 */
.stit_big {
	font-size: 24px;
	margin-bottom: 25px;
	line-height: 1.6;
	letter-spacing: normal;
}
.send li {
	border: 1px solid #ddd;
	border-radius: 10px;
	padding: 35px 25px 35px 40px;
	box-sizing: border-box;
	height: 250px;
	position: relative;
	width: 48.5%;
	margin-right: 3%;
	margin-bottom: 3%;
}
.send li:nth-child(2n) {
	margin-right: 0;
}
.send li > span {
	position: absolute;
	left: 40px;
	top: 35px;
}
.send li .txt {
	padding-left: 110px;
	letter-spacing: -0.5px;
	    word-break: keep-all;
}
.send li .txt .fz16 b {
	color: #333;
	font-weight: 500;
}
.send li .txt .btn {
	position: absolute;
	bottom: 35px;
	left: 150px;
}
.send li .txt .btn a {
	width: 200px;
	height: 45px;
	line-height: 41px;
	box-sizing: border-box;
	display: block;
	border: 2px solid #ddd;
	border-radius: 30px;
	text-align: center;
	background: #fff;
	transition: .2s ease;
    -webkit-transition: .2s ease;
    -moz-transition: .2s ease;
    -o-transition: .2s ease;
}
.send li .txt .btn a:hover {
	background: #495057;
	color: #fff;
	border: 2px solid #495057;
}
.send li .txt .btn a .img_hover {
	position: relative;
    width: 11px;
    height: 6px;
    display: inline-block;
    vertical-align: top;
    margin-top: 15px;
}
.send li .txt .btn a .img_hover img {
	position:absolute;
	top:0;
	left:0;
}
.send li .txt .btn a .img_hover img:last-child {
	opacity: 0;
}
.send li .txt .btn a:hover .img_hover img:first-child {
	opacity: 0;
}
.send li .txt .btn a:hover .img_hover img:last-child {
	opacity: 1;
}

.txt_field .gray_bg {
	background: #f9f9f9;
	padding: 25px;
	margin-top: 15px;
	position: relative;
}
.txt_field .gray_bg > span {
	position: absolute;
	left: 25px;
	top: 25px;
}
.txt_field .gray_bg .fz14 {
	padding-left: 135px;
	letter-spacing: -0.5px;
	line-height: 1.5;
}

/* 기증희망 조회 */
.lookup {
	background: url('/image/sub/lookup.png') no-repeat right top;
	border: 3px solid #ddd;
	border-radius: 20px;
	overflow: hidden;
	padding: 53px 90px;
}
.lookup th,
.lookup td {
	font-size: 16px;
	text-align: left;
	color: #666;
	padding: 15px 0;
}
.lookup th {
	width: 150px;
	color: #000;
	font-weight: 500;
}

/* 조혈모세포기증이란? */
.bor_gray {
	border: 1px solid #e1e1e1;
	border-radius: 10px;
	padding: 30px 25px;
}
.sepo_box > .float-l {
	width: 59%;
	line-height: 1.4;
}
.sepo_box > .float-l .bor_gray {
	height: 320px;
	box-sizing: border-box;
}
.sepo_box > .float-r {
	width: 39%;
}
.sepo_box .img_posi {
	position: relative;
	height: 150px;
	box-sizing: border-box;
}
.sepo_box .img_posi .icon,
.sepo_box .img_posi .txt {
	display: inline-block;
    vertical-align: middle;
}
.sepo_box .img_posi .txt {
    width: 60%;
	padding-left: 15px;
	word-break: keep-all;
}

/* 헌혈 운동 및 헌혈증 지원 */
.sepo_box .wid50 {
	width: 49%;
	float: left;
	margin-right: 2%;
}
.sepo_box .wid50:last-child {
	margin-right: 0;
}
.sepo_box .wid50 .bor_gray {
	height: 225px;
}
.sepo_box .wid50 .img_posi .txt {
	line-height: 1.2;
}
.sepo_box .wid50 .img_posi .txt .link {
	border-bottom: 1px solid #888;
	margin-left: 13px;
	display: inline-block;
}
.sepo_box .wid50 .img_posi .icon, 
.sepo_box .wid50 .img_posi .txt {
	vertical-align: top;
}
.call_bg {
	background: url('/image/sub/sub_call.png') no-repeat left;
	padding: 20px 0 20px 70px;
	font-weight: 600;
}
.call_bg .bmjua_font {
	font-size: 28px;
	letter-spacing: normal;
}
.bor_table_wrap {
	border: 1px solid #ddd;
    border-radius: 10px;
    overflow: hidden;
}
.bor_table {
	width: 100%;
}
.bor_table th,
.bor_table td {
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
	padding: 10px 30px;
}
.bor_table th:last-child,
.bor_table td:last-child {
	border-right: 0;
}
.bor_table tr:last-child th,
.bor_table tr:last-child td {
	border-bottom: 0;
}
.bor_table th {
	background: #f9f9f9;
	font-weight: 500;
}
.bor_table td {
	color: #666;
}
.down_btn a {
	display: inline-block;
	color: #fff;
	background: #ff363b;
	border-radius: 30px;
	padding: 0 35px;
	height: 45px;
	line-height: 45px;
}

.call_gray p {
	background: #f5f5f5;
	height: 40px;
	line-height: 40px;
	padding: 0 40px;
	display: inline-block;
	border-radius: 30px;
	margin-top: 20px;
	letter-spacing: normal;
}

/* 찾아오시는 길 */
.map {
	width: 100% !important; 
	height: 400px !important;
}
.root_daum_roughmap .wrap_controllers {
	display: none;
}
.map_wrap li {
	position: relative;
	padding: 35px 0;
	border-bottom: 1px solid #ddd;
}
.map_wrap li > span {
	position: absolute;
	left: 0;
	top: 35px;
}
.map_wrap li .txt_wrap {
	padding-left: 150px;
	letter-spacing: -0.5px;
}
.line_2 em,
.line_3 em,
.line_4 em {
	color: #fff;
	border-radius: 100%;
	width: 25px; 
	height: 25px; 
	box-sizing: border-box;
	line-height: 25px;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
	margin-right: 3px;
}
.line_2 em { background: #5ab354; }
.line_3 em { background: #f07800; }
.line_4 em { background: #3495df; }
.line_2 { color: #5ab354; }
.line_3 { color: #f07800; }
.line_4 { color: #3495df; }

.bus_wrap > div > p {
	margin-bottom: 10px;
}

.bus_wrap > div > p:first-child {
	font-weight: 500;
}

.bus_wrap > div > p > span{
    color: #fff;
    font-size: 12px;
    line-height: 1;
    padding: 4px 5px;
    border-radius: 2px;
    margin-right: 5px;
    displaY: inline-block;
    vertical-align: middle;
}
.bus_green { background: #90c954; }
.bus_blue { background: #3b58a4; }
.bus_sky { background: #6fafdf; }
.bus_red { background: #eb3a1c; }

/* 비전 및 미션 */
.v_icon li {
	font-size: 0; 
	padding: 20px 30px;
}
.v_icon li.gray {
	background: #fafafa;
	border-radius: 10px;
}
.v_icon li > div {
	display: inline-block;
	vertical-align: middle;
}
.v_icon li > div img {
	vertical-align: top;
}
.v_icon li > div.fz17 {
	box-sizing: border-box;
	width: 87%;
	padding-left: 30px;
}

.marg {
	margin-left: 50px;
}

.bold_wet b { 
	font-weight:600;
	color:#444;
	font-size:17px;
}