@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);
@import url('//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css');

html {background: #F8F8F8;}

body {
	box-sizing: border-box; word-break: keep-all; overflow-y: scroll;
	font-family: 'Noto Sans KR', sans-serif; font-size: 16px;
}
input::placeholder {color: #d3dce4 !important; font-size: 0.9em}
a {color:#9D9D9D}
.table {border-bottom: 1px solid #dee2e6}
.table a {color: #6E7F91}

/* wrapper */
.wrapper {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
.container {padding: 0}
.container-fluid {padding: 0}

/* 헤더 */ /* gnb는 Global Navigation Bar의 약자 */
header {border-bottom: 1px solid #cccccc;}
.container_header {max-width: 1620px; margin: 0px auto; padding: 0 15px;}
.logo_top a {display: flex; flex-direction: column; justify-content: center; height: 100%}
.logo_top a img {width: 100%; max-width: 123px;}

.gnb_top {text-align: right}
.gnb_top_ul { width:  99%; text-align: right}
.gnb_top_ul > li {text-align: center !important}
.gnb_top_ul > li > a {
	padding-left: 0 !important; padding-right: 0  !important; 
	font-size: 1.15rem; font-weight: bold; text-transform: uppercase; color: #686868 !important
}

.login_btn {
	display: flex; flex-direction: column; justify-content: center; align-items:center;
	background-color: #399eff;
	border-radius: 10px;
	margin-top: 0.63rem;
	margin-bottom: 0.63rem;
	max-width: 100px;
}
.login_btn a{
	color: #ffffff;
	text-transform: uppercase; font-weight: 500;
}
.login_btn a:hover{
	text-decoration:none;
}

.dropdown-menu {width: 100%; font-size: 0.9rem}
.dropdown-toggle::after {display: none}


/* 모바일 헤더(Sidebar) */
.mobileHeaderWrapper {
	width: 100%;
	margin: 3px auto;
	padding: 5px 20px;
	height: 40px;
}
.mobileNav {
	position: relative;
	float: right;
	height: 100%;
	width: 20px;
}
.mobileNavButton {
	position: absolute;
	top:50%;
	transform: translateY(-50%);

	width: 20px;
	height: 20px;
	background: url("../images/icon_menu.svg") no-repeat;
	cursor: pointer;
	border: 0px;
}
.mobileNavLogo {
	display: inline-block;
}
#mobileNavPanel {
	height: 100%;
	width: 0px;
	position: fixed;
	z-index: 1;
	top: 0;
	overflow-x: hidden;
	transition: 0.5s;
	background-color: #fff;

	/*왼쪽->오른쪽*/
	/*left: 0;
	box-shadow: 5px 0 10px #BBB;*/

	/*오른쪽->왼쪽*/
	right: 0;
	box-shadow: -5px 0 10px #BBB;
}
.mobileNav-header {
	display: flex;
	justify-content: flex-end;
	align-items: center;

	width: 100%;
	padding: 0px 20px;
	margin: 3px 0 10px 0;
	height: 40px;
}
.mobileNav-menu {
	list-style:none;
	padding: 0px 20px;
	border-bottom: 1px solid #EEE;
}
.mobileNav-item {
	display: flex;
	flex-direction: column;
	margin-bottom: 15px;
}
.mobileNav-item a, .mobileNav-item a:hover {text-decoration: none;}
.mobileNav-item > a {
	color: #6E6E6E; font-size: 1rem; text-transform: uppercase; font-weight: 500;
	margin-bottom: 5px;
}
.mobileNav-item a:hover {
	color: #2fddb5;
}
.mobileNav-item.active {
	color: #2fddb5;
}
.mobileNav-collapse-arrow > a::after {
	float: right;
	font-family: 'FontAwesome';
    content: "\f078"; 
}
.mobileNav-collapse-arrow.active > a::after{
	float: right;
	font-family: 'FontAwesome';
    content: "\f054"; 
}
.mobileNav-item .mobileNav-item-d2 {
	display:none;
}
.mobileNav-item.active .mobileNav-item-d2 {
	display: flex;
	flex-direction: column;
	margin-left: 15px;
}
.mobileNav-item.active .mobileNav-item-d2 a {
	margin-bottom: 5px;
}

.mobileNav-login {
	display: flex; justify-content: center; align-items:center;
}
.mobileNav-button {
	display: flex; justify-content: center; align-items:center;
	border-radius: 10px;
	width: 100px;
	margin: 0 5px;
}
.mobileNav-button a{
	text-transform: uppercase; font-weight: 500;
	color: #9D9D9D;
}
.mobileNav-button a:hover{
	text-decoration:none;
}
.mobileNav-button:hover{
	background-color: #399eff;
	color: #ffffff;
}
.mobileNav-button:hover a{
	color: #ffffff;
}



/* 홈 */
.home_banners {max-width:1400px; margin: 1rem auto 0 auto; width: 90%; height: 90vh}
.home_banners_content {display: flex; flex-direction: column; justify-content: center;}
.home_banners_content > div {margin: 1.87rem 0;}

.home_banners_content_title > p {color: #545454; font-size: 3.12rem; font-weight: bold; line-height: 4.37rem}
.home_banners_content_text > p {white-space: nowrap; color: #545454; font-size: 1.25rem;}

.home_banners_content_btn > a {
	display: flex; flex-direction: column; justify-content: center; width: 190px; height: 53px;
	background: -webkit-linear-gradient(270deg,#78EFCD, #1BBACC); border-radius: 15px;
	text-align: center; text-decoration: none; font-size: 1.375rem; font-weight: bold; color:#ffffff;
}

.home_banners_img {display: flex; justify-content: center;}
.home_banners_img > img {max-width: 750px; width: 100%}


/* 사이드바 */
.sidebar {list-style: none; padding:0px 0px 0px 25px; overflow: hidden;} 
.sidebar a:hover {text-decoration: none; color: #2fddb5}

.side_d1 {padding-bottom: 1rem;}
.side_d1 > a {
	display: block; margin-bottom: 0.15rem;
	color: #6E6E6E; font-size: 1.05rem; text-transform: uppercase; font-weight: 500;
}
.side_d1 > a.active {color: #2fddb5;}
.side_d1 > hr {width: 120px; border:0px; border-top: 2px solid #9FA8A6; padding-top: 0.25rem; margin: 0}
.side_d1 > hr.active {border-top: 2px solid #90E6D2;}

.side_d2 {max-width: 150px; font-weight: 400;}
.side_d2 > a {	
	display: block; margin: 0.25rem 0 0.25rem 0.8rem; padding: 0.28rem 0 0.28rem 0.9rem;
	font-size: 0.95rem; color: #A5A2A2; line-height: 1.2rem; font-weight: 300; letter-spacing: 0.05rem
}
.side_d2_item {color: rgba(0,0,0,.5)}
.side_d2_item:hover {background: #eeeeee; border-radius: 8px; color: #ffffff}
.side_d2_item.active {background: #90E6d2; border-radius: 8px; color: #ffffff}



/* Page 공통 */
.page_wrapper {max-width: 1620px; flex: 1; margin: 0px auto 2rem auto;}
.image_center {display: flex; align-items: center; justify-content: center;}


.top_img {width: 100%; margin-bottom: 20px; height:135px; max-width: 1620px; overflow: hidden;}
.top_img > img {position: relative; height: 135px; top:50%; left: 50%; transform: translate(-50%, -50%);}

.breadcrumb-item+.breadcrumb-item::before {content: '>'; color: #969696}
.breadcrumb {background: none; padding: 0; padding-left: 0; padding-bottom: 1rem}
.breadcrumb a {color:#969696; font-size: 1.15rem;}

.page_title {padding-bottom: 3.2rem; font-size: 2.1rem; font-weight: bold; color: #545454}

.page_img {margin-bottom: 2.6rem; display: flex;}
.page_img > div{display: block; margin: 0 auto; overflow: hidden;}
.page_img img {width: 670px;}

.page_txt {font-size: 1.1rem; color: #6E6E6E; line-height: 2.2rem; font-weight: 400;}
.label_txt {font-size: 1.1rem; color: #6E6E6E; line-height: 2.2rem; font-weight: 500; margin-bottom: .3rem}
.label_sub_text {font-size: 0.9rem; color: #AAAAAA;}

.valid_input {border-color: #28a745;}
.invalid_input{border-color: #dc3545;}


/* Team Page */
.team_ul {display:flex; align-content: flex-start; flex-wrap: wrap; flex-direction: row; list-style:none; margin:0; padding: 0; width: 100%;}
.team_ul > li {margin: 0 20px 10px 0; width: 45%; max-width: 210px;}
.team_ul > li > div {max-width: 210px; height: 270px; border-radius: 7px; box-shadow: 1px 1px 2px 6px rgba(0, 0, 0, 0.05); padding: 12px 10px}
.team_ul > li img {width: 140px; height: 182px; margin: 0 auto 12px auto;}
.team_ul > li > div > p {margin-left: 10px;}
.team_ul > li > div > p.name {font-size: 1.125rem; margin-bottom: 2px; color: #545454}
.team_ul > li > div > p.job_position {font-size: 0.875rem; color: #ABABAB;}

/* 꿀미인 Page */

/* Contact Page */
.contact_img img {width: 420px;}
.contact_form input {font-size: 1rem;}
.contact_submit {display: block;}
.contact_submit input[type=submit] {
	float: right;
	border: 0 none;
	width: 170px; height: 45px;
	background: -webkit-linear-gradient(270deg,#78EFCD, #1BBACC); border-radius: 15px;
	/*background: #555555; border-radius: 15px;*/
	text-align: center; 
	text-decoration: none; font-size: 1.12rem; font-family: 'Noto Sans kr', sans-serif; font-weight: bold; color:#ffffff;
}
.map-responsive {
	margin: 0px 15px;
}


/* 로그인, 회원가입 */
.page_form {margin: 80px 15px 100px 15px}
.page_form label {color: #707070}
.btn-full {width: 100%; padding: 10px 0; margin: 10px 0 10px 0}
.guide_txt {font-size: 13px; color: #a6c0db; display: block; padding: 5px 0 10px}
#register {margin-top: 50px;  margin-bottom: 50px}
#register label {color: #707070}
.form_textarea {font-size: 13px; height: 200px !important}
.read_all {font-size: 13px; color:#a6c0db }
#find_id {margin-top: 80px;  margin-bottom: 100px}
#find_id label {color: #707070}
.warning {margin-bottom: .25rem; font-size: 80%; color: #dc3545;}
#job_other {display: none}


/* 푸터 */ 
footer {max-width:1620px; height: 20px; background: #F8F8F8; text-align: center; color: #8D8D8D}
.logo_footer img {width:100%; max-width: 125px; margin:10px auto 20px auto}
.footer_menu {margin: 0; padding: 0; font-size: 16px}
.footer_menu li {list-style: none; display: inline-block; margin-right: 40px; padding: 0}
.footer_menu li:last-child {margin-right: 0}
.footer_menu li a {color: #707070; } 
.copyright {font-size: 16px; color: #707070}


@media all and (max-width: 1200px) {
	/* desktop, laptop size (992~1200) */

	/* home banner */
	.home_banners {width: 95%;}
	.home_banners_content {display: flex; flex-direction: column; justify-content: center;}
	.home_banners_content > div {margin: 1.5rem 0;}

	.home_banners_content_title > p {font-size: 2.71rem; line-height: 3.8rem}
	.home_banners_content_text > p {font-size: 1.08rem;}

	.home_banners_content_btn > a {
		width: 165px; height: 46px; font-size: 1.2rem; border-radius: 12px;
	}

	.home_banners_img {display: flex; justify-content: center;}
	.home_banners_img > img {max-width: 560px; width: 100%;}

	/* header */
	.container_header {padding: 0 10px;}
	.logo_top a img {width: 100%; max-width: 110px;}
	.gnb_top_ul > li {width: 100%}
	.gnb_top_ul > li > a {font-size: 1rem}
	.dropdown-menu {font-size: 14px}
	.nav-item {padding-left: 10px}
	.login_btn a{font-size: .83rem;}
	
	/* home */

	/* sidebar */
	.side_d1 > a {font-size: .92rem; }
	.side_d2 > a {font-size: .83rem; padding: .25rem 0 .25rem .9rem;}
	
	/* contents */
	.content {padding: 0}
	.top_img {margin-bottom: 20px; height:100px; max-width: 1620px; overflow: hidden;}
	.top_img > img {position: relative; height: 100px; top:50%; left: 50%; transform: translate(-50%, -50%);}

	.breadcrumb a {color:#969696; font-size: 1rem;}

	.page_title {padding-bottom: 2.8rem; font-size: 1.8rem;}
	.page_img img {width: 580px;}
	.page_txt {font-size: 0.95rem; line-height: 1.9rem;}
	.label_txt {font-size: 0.95rem; line-height: 1.9rem;}

	.contact_img img {width: 365px;}
	.contact_form input {font-size: .9rem;} 
	.contact_submit input[type=submit] {font-size: .86rem; width: 145px; height: 39px; border-radius:12px}
		
	/* footer */
	footer {margin: 5px 0}
}

@media all and (max-width: 992px) {
	/* tablet size(768~992) */

	/* home banner */
	.home_banners {width: 95%;}
	.home_banners_content {display: flex; flex-direction: column; justify-content: center;}
	.home_banners_content > div {margin: 1rem 0;}

	.home_banners_content_title > p {font-size: 2.37rem; line-height: 3.3rem}
	.home_banners_content_text > p {font-size: 0.94rem;}

	.home_banners_content_btn > a {
		width: 145px; height: 40px; font-size: 1.05rem; border-radius: 10px;
	}

	.home_banners_img {display: flex; justify-content: center;}
	.home_banners_img > img {max-width: 450px; width: 100%;}

	/* header */
	.mobileNavLogo a img {width: 100%; max-width: 90px;}
	
	/* home */

	/* contents */
	.breadcrumb a {color:#969696; font-size: 1rem;}

	.page_content {margin: 5px;}

	.contact_img img {width: 365px;}
	.contact_form input {font-size: .9rem;} 
	.contact_submit input[type=submit] {font-size: .86rem; width: 145px; height: 39px; border-radius:12px}

	/* footer */
	footer {margin: 5px 0}
}

@media all and (max-width: 768px) {
	/* landscape phones (576~768) */

	/* home banner */
	.home_banners_content > div {margin: 0.7rem 0;}

	.home_banners_content_title > p {font-size: 2.28rem; line-height: 3rem}
	.home_banners_content_text > p {font-size: 0.94rem;}

	.home_banners_content_btn > a {
		width: 152px; height: 43px; font-size: 1.1rem; border-radius: 12px;
	}

	/* header */
	.mobileNavLogo a img {width: 100%; max-width: 90px;}
}

@media all and (max-width: 576px) {
	/* mobile size (~576) */

	/* home banner */
	.home_banners_content > div {margin: 0.5rem 0;}

	.home_banners_content_title > p {font-size: 2rem; line-height: 2.7rem}
	.home_banners_content_text > p {font-size: 0.9rem;}

	.home_banners_content_btn > a {
		width: 135px; height: 38px; font-size: 1rem; border-radius: 12px;
	}
	.home_banners_img > img {max-width: 350px; width: 100%}

	/* header */
	.team_ul {display:flex; align-content: flex-start; flex-wrap: wrap; flex-direction: row; list-style:none; margin:0; padding: 0; width: 100%;}
	.team_ul > li {margin: 0 15px 10px 0; width: 45%; max-width: 210px;}
	.team_ul > li > div {max-width: 200px; height: 270px; border-radius: 7px; box-shadow: 1px 1px 2px 6px rgba(0, 0, 0, 0.05); padding: 10px 8px}
	.team_ul > li img {width: 135px; height: 172px; margin: 0 auto 8px auto;}
	.team_ul > li > div > p {margin-left: 10px;}
	.team_ul > li > div > p.name {font-size: 1.125rem; margin-bottom: 2px; color: #545454}
	.team_ul > li > div > p.job_position {font-size: 0.875rem; color: #ABABAB;}
}


/* menu */
@media all and (min-width: 768px) {
	.navbar .nav-item .dropdown-menu{ display: none; }
	.navbar .nav-item:hover .nav-link{ color: #000000  }
	.navbar .nav-item:hover .dropdown-menu{ display: block; }
	.navbar .nav-item .dropdown-menu{ margin-top:0; }
}