@charset "euc-kr";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700&display=swap');

html,body { font-family: 'Noto Sans KR', sans-serif; width: 100%; height: 100%; }
input { outline: none; }
.t_green { color: #498900; }
.t_blue { color: #0f6fab; }
.t_red { color: #c52d00; }
.white { fill: #fff; }
.bg_blue { background-color: #104c72 !important; }
.bg_darkblue { background-color: #22374e !important; }
.bg_darkblue02 { background-color: #415f81 !important; }
.bg_skyblue { background-color: #00b4cb !important; }
.mt10 { margin-top: 10px; }
.mt20 { margin-top: 20px; }
.mt30 { margin-top: 30px; }
.mt40 { margin-top: 40px; }
select { background-color: transparent; border: 1px solid #ccc; padding: 0 20px; border-radius: 5px; outline: none; }
select { -webkit-appearance: none; cursor: pointer; -moz-appearance: none; appearance: none; filter: alpha(opacity=0); }
select::-ms-expand { display:none; }

@media screen and (max-width: 640px) {
	/* 로그인 */
	.login_wrap { width: 100%; height: 100%; background: url(../images/login/login_bg.png) no-repeat 50% 50%; background-size: cover; position: relative; }
	.login_wrap .logo { position: absolute; top: 20px; left: 20px; }
	.login_con { position: absolute; width: 100%; left:0; bottom: 420px; padding: 0 20px; }
	.login_top { display: inline-block; width: 100%; }
	.login_top h1 { font-size: 24px; color: #fff; margin-bottom: 10px; }
	.login_top h1 span { font-size: 13px; }
	.login_box input { width: 100%; height: 50px; font-size: 15px; font-family: "Noto Sans KR",sans-serif; border: none; border-bottom: 2px solid #ddd; background-color: transparent; color: #2c313c; box-sizing: border-box; margin-bottom: 10px; border-radius: 0; }
	.login_box .chk_box { display: inline-block; width: 100%; margin-top: 10px; }
	.login_box .chk_box label { font-size: 15px; color: #2c313c; background: url(../images/common/check_icon.svg) no-repeat left center; padding-left: 30px; }
	.login_box .chk_box label.on { background: url(../images/common/checked_icon.svg) no-repeat left center; }
	.login_box .chk_box input { display: none; }
	.login_box #login_btn { display: block; width: 100%; height: 50px; line-height: 50px; text-align: center; color: #fff; font-weight: 500; background-color: #2c313c; border-radius: 50px; margin-top: 40px; }
	.login_box .copy { font-size: 13px; text-align: center; margin-top: 80px; }

	/* 공통 */
	.container { width: 100%; height: 100%; position: relative; background-color: #f9f9f9; }
	.container .bg_top { background: linear-gradient(-180deg, #477fef 0%, #336fe7 98%); position: absolute; left: 0; top: 0; width: 100%; height: 120px; }
	.con_wrap { width: 100%; position: fixed; left: 0; bottom: 0; border-top-left-radius: 20px; border-top-right-radius: 20px; background-color: #fff; padding: 40px; z-index: 100; box-shadow: 0px 0px 6px rgba(0,0,0,0.15); }
	.con_wrap .con_wrap_top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
	.con_wrap .con_wrap_top h1 { font-size: 18px; font-weight: bold; color: #333; }
	.con_wrap .con_wrap_close { position: absolute; top: 20px; right: 20px; }
	.bottom_menu { position: fixed; left:0; bottom:0; width: 100%; padding: 0 30px; box-shadow: 0px -2px 6px rgba(0,0,0,0.15); border-top-left-radius: 20px; border-top-right-radius: 20px; background-color: #fff; z-index: 99; }
	.bottom_menu ul { display: flex; height: 70px; align-items: center; justify-content: space-between; }
	.bottom_menu ul li { width: 40px; height: 40px; border-radius: 100px; }
	.bottom_menu ul li a { display: block; width: 100%; height: 100%; }
	.bottom_menu ul li.this { background-color: #035487; box-shadow: 0px 1px 6px rgba(0,0,0,0.3); }
	.container .tit { display: flex; align-items: flex-end; justify-content: space-between; width: 100%; padding: 0 20px; position: relative; z-index: 1; }
	.container .tit h1 { font-size: 20px; color: #333; font-weight: bold; letter-spacing: -0.8px; margin-bottom: 10px; }
	.container .tit span { font-size: 15px; color: #777; font-weight: 500; letter-spacing: -0.4px; margin-bottom: 10px; }
	.bottom_menu ul li:nth-child(1) { background: url(../images/common/bottom_menu01.svg) no-repeat 50% 50%; }
	.bottom_menu ul li:nth-child(2) { background: url(../images/common/bottom_menu02.svg) no-repeat 50% 50%; }
	.bottom_menu ul li:nth-child(3) { background: url(../images/common/bottom_menu03.svg) no-repeat 50% 50%; }
	.bottom_menu ul li:nth-child(4) { background: url(../images/common/bottom_menu04.svg) no-repeat 50% 50%; }
	#bottom_menu01 .bottom_menu ul li:nth-child(1) { background: url(../images/common/bottom_menu01_on.svg) no-repeat 50% 50%; background-color: #035487; box-shadow: 0px 1px 6px rgba(0,0,0,0.3); }
	#bottom_menu02 .bottom_menu ul li:nth-child(2) { background: url(../images/common/bottom_menu02_on.svg) no-repeat 50% 50%; background-color: #035487; box-shadow: 0px 1px 6px rgba(0,0,0,0.3); }
	#bottom_menu03 .bottom_menu ul li:nth-child(3) { background: url(../images/common/bottom_menu03_on.svg) no-repeat 50% 50%; background-color: #035487; box-shadow: 0px 1px 6px rgba(0,0,0,0.3); }
	#bottom_menu04 .bottom_menu ul li:nth-child(4) { background: url(../images/common/bottom_menu04_on.svg) no-repeat 50% 50%; background-color: #035487; box-shadow: 0px 1px 6px rgba(0,0,0,0.3); }
	.none { display: none; }
	.layer_cover { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #222; opacity: 0.7; z-index: 101; content: ''; }
	.layer { width: 320px; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); background-color: #fff; border-radius: 20px; z-index: 102; overflow: hidden; }
	.layer .layer_con { padding-top: 40px; }
	.layer .layer_tit { font-size: 18px; font-weight: bold; color: #333; text-align: center; letter-spacing: -0.4px; margin-bottom: 30px; }
	.layer .layer_bottom { border-top: 1px solid #ddd; display: flex; justify-content: space-between; margin-top: 20px; }
	.layer .layer_bottom a { width: 50%; text-align: center; height: 50px; line-height: 50px; font-size: 15px; }
	.layer .layer_bottom a:first-child { border-right: 1px solid #ddd; }
	
	/* 메인 */
	.container .con_top { height: 50px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; position: relative; z-index: 99; }
	.container .con_top p span { font-size: 20px; font-weight: bold; color: #fff; }
	.container .con_top .menu_tit { position: absolute; left: 50%; transform: translate(-50%); }
	.container .con_top .menu_tit img { margin-top: 5px; }
	.container .con_top .month { font-size: 18px; font-weight: bold; color: #fff; }
	.container .login_info_wrap { width: 100%; padding: 20px; position: relative; z-index: 99; }
	.container .login_info_wrap .login_info { display: flex; align-items: center; justify-content: space-between; border-radius: 20px; height: 100px; background-color: rgba(255,255,255,0.7); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); padding: 20px; box-shadow: 0px 1px 6px rgba(0,0,0,0.15); }
	.container .login_info_wrap .login_info .member { font-size: 16px; margin-bottom: 10px; font-weight: 500; }
	.container .login_info_wrap .login_info .user { font-size: 22px; font-weight: 500; letter-spacing: -1.2px; color: #012a54; }
	.container .login_info_wrap .login_info .user span { margin-right: 5px; }
	.container .login_info_wrap .login_info em a { font-size: 13px; display: flex; align-items: center; }
	.container .login_info_wrap .login_info em a img { margin-right: 5px; }
	.container .menu_wrap { padding-bottom: 20px; }
	.container .menu_wrap .menu_list { padding: 0 20px; display: flex; align-items: flex-start; flex-wrap: wrap; justify-content: space-between; margin-top: 10px; }
	.container .menu_wrap .menu_list .menu_box { width: calc(100% / 3 - 10px); border-radius: 20px; box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.15); background: #fff; }
	.container .menu_wrap .menu_list .menu_box:nth-child(1) { background: linear-gradient(130deg, #5cc3eb 0%, #427bed 98%); }
	.container .menu_wrap .menu_list .menu_box:nth-child(2) { background: linear-gradient(130deg, #5ceb81 0%, #427bed 98%); }
	.container .menu_wrap .menu_list .menu_box:nth-child(3) { background: linear-gradient(130deg, #ad5ceb 0%, #427bed 98%); }
	.container .menu_wrap .menu_list .menu_box a { display: block; width: 100%; height: 0; padding-top: 100%; position: relative; }
	.container .menu_wrap .menu_list .menu_box .menu_con { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; position: absolute; left: 0; top: 0; }
	.container .menu_wrap .menu_list .menu_box .menu_con p { margin-bottom: 10px; }
	.container .menu_wrap .menu_list .menu_box .menu_con h1 { font-size: 14.5px; font-weight: bold; color: #fff; letter-spacing: -0.8px; }
	.container .notice_wrap { padding-bottom: 100px; background-color: #f9f9f9; }
	.container .notice_wrap .notice_box { padding: 0 20px; }
	.container .notice_wrap .notice_box .notice_con { width: 100%; min-height: 60px; display: flex; align-items: center; background-color: #fff; border-radius: 10px; box-shadow: 0px 1px 6px rgba(0,0,0,0.15); padding: 15px; font-size: 15px; margin-top: 10px; }
	.container .notice_wrap .notice_box .notice_con.none { background: url(../images/common/notice_none.svg) no-repeat 50% 50%; background-color: #fff; }

	/* 부서일정 */
	.container .bg_top .date { margin-top: 70px; padding: 0 20px; padding-bottom: 20px; }
	.container .bg_top .date ul { display: flex; align-items: center; justify-content: space-between; }
	.container .bg_top .date ul li { display: flex; flex-direction: column; align-items: center; border-radius: 100px; padding: 10px 5px 7px 5px; }
	.container .bg_top .date ul li h1 { font-size: 14.5px; color: #bfd4ff; margin-bottom: 10px; }
	.container .bg_top .date ul li span { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; font-weight: bold; color: #fff; font-size: 14.5px; font-family: sans-serif; border-radius: 100px; }
	.container .bg_top .date ul li.today { background-color: #fff; }
	.container .bg_top .date ul li.today h1 { color: #333; }
	.container .bg_top .date ul li.today span { background-color: #3571e8; }
	.container .work_wrap { margin-top: 91.5px; padding: 30px 0 100px; background-color: #f9f9f9; }
	.container .work_wrap .work_con_wrap .work_con { display: flex; align-items: center; padding: 0 20px; margin-top: 20px; }
	.container .work_wrap .work_con_wrap .work_con .work_box { display: flex; align-items: flex-start; width: calc(100% - 45px); width: 100%; min-height: 80px; background-color: #fdfeff; box-shadow: 0px 1px 6px rgba(0,0,0,0.15); border-radius: 10px; padding: 15px; }
	.container .work_wrap .work_con_wrap .work_con .work_box .date_box { display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 5px; background-color: #035487; font-size: 17px; font-weight: bold; color: #fff; }
	.container .work_wrap .work_con_wrap .work_con:nth-child(even) .work_box .date_box { background-color: #3a89bb; }
	.container .work_wrap .work_con_wrap .work_con .work_box .work_text { margin-left: 15px; width: calc(100% - 65px); }
	.container .work_wrap .work_con_wrap .work_con .work_box .work_text span { display: block; font-size: 15px; font-weight: 500; color: #012a54; letter-spacing: -0.4px; line-height: 26px; position: relative; padding-left: 12px; }
	.container .work_wrap .work_con_wrap .work_con .work_box .work_text span::before { display: block; content: ''; width: 6px; height: 12px; border-bottom: 1px solid #012a54; position: absolute; left:0; top:0; }
	.container .work_wrap .work_con_wrap .work_con .work_box .work_text b { display: block; font-size: 14px; font-weight: 500; color: #888ca5; letter-spacing: -0.4px; line-height: 26px; position: relative; padding-left: 12px; }
	.container .work_wrap .work_con_wrap .work_con .work_box .work_text b::before { display: block; content: ''; width: 6px; height: 12px; border-bottom: 1px solid #888ca5; position: absolute; left:0; top:0; }
	.container .work_wrap .work_con_wrap .work_con .work_box .work_text p { content: ''; display: inline-block; width: 100%; border-bottom: 1px dashed #ddd; margin-bottom: 7px; }
	.container .work_wrap .work_con_wrap .work_con.today .work_box { background-color: #427bed; }
	.container .work_wrap .work_con_wrap .work_con.today .work_box .date_box { background-color: #ecf2fd; color: #427bed; box-shadow: 0px 1px 6px rgba(0,0,0,0.15); }
	.container .work_wrap .work_con_wrap .work_con.today .work_box .work_text span { color: #fff; }
	.container .work_wrap .work_con_wrap .work_con.today .work_box .work_text b { color: #eee; }
	.container .work_wrap .work_con_wrap .work_con.today .work_box .work_text span::before { border-bottom: 1px solid #fff; }
	.container .work_wrap .work_con_wrap .work_con.today .work_box .work_text b::before { border-bottom: 1px solid #fff; }
	.container .work_wrap .meeting_wrap .work_con .work_box .date_box { background-color: #8f3b00; }
	.container .work_wrap .meeting_wrap .work_con .work_box .work_text h1 { font-size: 17px; font-weight: 500; margin-bottom: 5px; }
	.container .work_wrap .meeting_wrap .work_con:nth-child(even) .work_box .date_box { background-color: #cd7231; }
	.container .work_wrap .meeting_wrap .work_con.today .work_box { background-color: #d15c09; }
	.container .work_wrap .meeting_wrap .work_con.today .work_box .date_box { background-color: #fff; color: #d15c09; box-shadow: 0px 1px 6px rgba(0,0,0,0.15); }
	.container .work_wrap .meeting_wrap .work_con.today .work_box .work_text h1 { color: #fff; }
	.container .work_wrap .work_con_wrap .work_con.none .work_box { min-height: 60px; background: url(../images/common/notice_none.svg) no-repeat 50% 50%; background-color: #fff; }

	/* 연월차 신청 */
	.container .member_info { display: flex; align-items: flex-start; justify-content: space-between; margin-top: 70px; padding: 0 20px; padding-bottom: 25px; }
	.container .member_info .user { font-size: 22px; font-weight: 500; letter-spacing: -1.2px; color: #fff; }
	.container .member_info .user span { margin-right: 5px; }
	.container .member_info .vac_count { display: flex; align-items: center; justify-content: space-between; }
	.container .member_info .vac_count em { display: flex; align-items: center; flex-direction: column; margin-right: 15px; padding-right: 15px; border-right: 1px dashed #345ba9; }
	.container .member_info .vac_count em:last-child { margin-right: 0; border-right: none; }
	.container .member_info .vac_count em h1 { color: #bfd4ff; font-size: 14.5px; margin-bottom: 10px; line-height: 20px; }
	.container .member_info .vac_count em span { color: #fff; font-size: 17px; font-weight: bold; font-family: sans-serif; }
	.container .vac_wrap { margin-top: 92px; padding-top: 40px; padding-bottom: 20px; background-color: #fff; }
	.container .vac_wrap .cale_btn { padding: 0 20px; }
	.container .vac_wrap .cale_btn a { display: block; width: 100%; height: 50px; line-height: 50px; text-align: center; color: #fff; background-color: #012a54; font-weight: 500; border-radius: 5px; }
	.container .vac_list_wrap { background-color: #f9f9f9; padding: 10px 0 100px; box-shadow: inset  0px 0px 6px rgba(0,0,0,0.15); }
	.container .vac_list_wrap .vac_list { padding: 0 20px; margin-top: 20px; }
	.container .vac_list_wrap .vac_list .vac_list_con { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 80px; background-color: #fdfeff; box-shadow: 0px 1px 6px rgba(0,0,0,0.15); border-radius: 10px; padding: 15px; margin-top: 10px; }
	.container .vac_list_wrap .vac_list .vac_list_con em { display: flex; flex-direction: column; }
	.container .vac_list_wrap .vac_list .vac_list_con em:last-child { width: 120px; }
	.container .vac_list_wrap .vac_list .vac_list_con em h1 { font-size: 17px; font-weight: bold; color: #333; }
	.container .vac_list_wrap .vac_list .vac_list_con em p { display: flex; align-items: center; color: #6c7477; font-size: 15px; margin-top: 10px; }
	.container .vac_list_wrap .vac_list .vac_list_con em span { letter-spacing: -0.4px; }
	.container .vac_list_wrap .vac_list .vac_list_con em p b { margin: 0 5px; }
	.con_wrap .vac_app_box .vac_sel_box { width: 100%; height: 50px; border-radius: 50px; border: 1px solid #ccc; display: flex; align-items: center; padding-left: 20px; }
	.con_wrap .vac_app_box .vac_sel_box.none { display: none; }
	.con_wrap .vac_app_box .vac_sel_box select { width: 100%; height: 100%; border: none; font-size: 15px; background: url(../images/common/down_arrow.svg) no-repeat 95% 50%; }
	.con_wrap .vac_app_box .vac_sel_box input { width: 100%; height: 100%; border: none; font-size: 15px; padding: 0 20px; border-radius: 50px; }
	.con_wrap .vac_app_box .vac_date_box { width: 100%; height: 50px; border-radius: 50px; border: 1px solid #ccc; box-sizing: border-box; display: flex; align-items: center; background-color: #f3f3f3; }
	.con_wrap .vac_app_box .vac_date_box .vac_date_sel_wrap { display: flex; align-items: center; justify-content: center; width: 50%; cursor: pointer; position: relative; }
	.con_wrap .vac_app_box .vac_date_box .vac_date_sel_wrap.block::after { display: block; content: ''; position: absolute; width: 100%; height: 100%; left:0; top: 0; z-index: 99; }
	.con_wrap .vac_app_box .vac_date_box .vac_date_sel_wrap .vac_date_sel { display: flex; align-items: center; justify-content: center; font-size: 15px; width: 100%; height: 50px; }
	.con_wrap .vac_app_box .vac_date_box .vac_date_sel_wrap .vac_date_sel h1 { margin-left: 5px; color: #333; }
	.con_wrap .vac_app_box .vac_date_box .vac_date_sel_wrap .vac_date_sel span { margin-left: 5px; display: none; }
	.con_wrap .vac_app_box .vac_date_box .vac_date_sel_wrap.this { width: calc(50% + 20px); }
	.con_wrap .vac_app_box .vac_date_box .vac_date_sel_wrap.this .vac_date_sel { border: 1px solid #3570e8; border-radius: 50px; background-color: #fff; }
	.con_wrap .vac_app_box .vac_date_box.on { background-color: #fff; }
	.con_wrap .vac_app_box .vac_date_box.on .vac_date_sel_wrap.this { width: 50%; }
	.con_wrap .vac_app_box .vac_date_box.on .vac_date_sel_wrap.this .vac_date_sel { border: none; border-radius: 0; background-color: transparent; }
	.con_wrap .vac_app_box .vac_date_box.on p { display: block !important; }
	.con_wrap .vac_app_box #vac_app_btn { display: block; width: 100%; height: 50px; line-height: 50px; text-align: center; color: #fff; font-weight: 500; background-color: #3570e8; border-radius: 50px; margin-top: 20px; }

	/* 종료일 선택 레이어 */
	.date_layer .date_layer_con { display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 40px; }
	.date_layer .date_layer_con .date_sel_wrap { display: flex; align-items: center; justify-content: center; }
	.date_layer .date_layer_con .date_sel_wrap p { margin: 0 10px; }
	.date_layer .date_layer_con .date_sel_wrap select { height: 50px; font-size: 17px; }

	/* 급여 명세 */
	.container .stat_wrap { position: relative; margin-top: 20px; padding-bottom: 100px; }
	.container .stat_wrap ul li { padding: 20px; position: relative; height: 100px; }
	.container .stat_wrap ul li > a { display: block; width: 100%; height: 100%; background: url(../images/common/right_arrow.svg) no-repeat right 55%; }
	.container .stat_wrap ul li:hover { background-color: #012a54; }
	.container .stat_wrap ul li > a p { display: flex; align-items: center; margin-bottom: 15px; }
	.container .stat_wrap ul li > a p > span { color: #bfd4ff; font-size: 13px; margin-left: 5px; }
	.container .stat_wrap ul li > a h1 { color: #fff; font-weight: 500; letter-spacing: -0.4px; }
	.container .stat_wrap ul li > span { display: flex; width: 100px; height: 30px; align-items: center; justify-content: center; font-size: 13px; color: #3772e9; font-weight: 500; letter-spacing: -0.4px; background-color: #bfd4ff; border-radius: 5px; margin-top: 20px; position: absolute; left: 20px; bottom: 20px; cursor: pointer; }

	/* 근로계약서 */
	.container .employment_wrap { position: relative; padding: 20px; padding-bottom: 100px; background-color: #f9f9f9; }
	.container .employment_wrap h2 { line-height: 1.4em; font-weight: bold; }
	.container .employment_wrap table { width: 100%; border: 1px solid #ddd; margin: 20px 0; }
	.container .employment_wrap table th { font-size: 15px; font-weight: bold; padding: 15px 10px; background-color: #f4f6f7; vertical-align: middle; text-align: center; border: 1px solid #ddd; }
	.container .employment_wrap table td { font-size: 15px; line-height: 1.4em; vertical-align: middle; border: 1px solid #ddd; padding: 15px 10px; }
	.container .employment_wrap p b { font-weight: bold; }
	.container .employment_wrap p span { font-size: 15px; line-height: 1.4em; }
	.container .employment_wrap .contract_bottom { display: inline-block; width: 100%; margin-top: 20px; }
	.container .employment_wrap .contract_bottom a { display: block; width: 100%; height: 50px; line-height: 50px; font-weight: 500; color: #fff; text-align: center; border-radius: 5px; margin-top: 10px; }
	.container .employment_wrap .contract_bottom a:first-child { background-color: #012a54; }
	.container .employment_wrap .contract_bottom a:last-child { background-color: #09437e; }
 }