/* 공통 */
.inner1700 {max-width: 1700px; margin: 0 auto; position: relative; width: 100%;}
.inner1400 {max-width: 1400px; margin: 0 auto; position: relative; width: 100%;}
.inner1300 {max-width: 1300px; margin: 0 auto; position: relative; width: 100%;}
button {border: none; cursor: pointer; background: none;}
.cf:after {content: ''; display: block; clear: both;}




/*=====================
			header
=====================*/
#wrap {overflow: hidden; position: relative;}
#wrap .allMenu_bg {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 101;} 

header {position: absolute; top: 0; width: 100%; height: 100px; z-index: 100;}
header .inner1700 {width: 100%; height: 100px; display: flex; align-items: center; justify-content: space-between;}
header .logo {width: 273px; height: 57px; }
header .logo a {width: 100%; height: 100%; display: block;}
header .logo a img {max-width: 100%;}
header nav {width: calc(100% - 298px); height: 100%;}
header .gnb {width: 100%; height: 100%; display: flex; justify-content: flex-end;}
header .gnb > li {position: relative; text-align: center; transition: all 0.5s; margin-top: 20px;}
header .gnb > li > a {display: block; /* height: 100%; */ font-size: 16px; color: #fff; font-weight: 500; padding: 26px 35px 37px; box-sizing: border-box; line-height: 1.2;}
header .gnb > li > a span {/* display: block; position: relative; top: 50%; transform: translateY(-50%); */}
header .gnb > li .depth2 {/* position: absolute; top: 100px; */ width: 100%; padding: 83px 5px 30px 5px; background: #fff; position: absolute; top: 0; left: 0; z-index: -1; border-radius: 8px; box-sizing: border-box; opacity: 0;}
header .gnb > li .depth2 > li {}
header .gnb > li .depth2 > li a {display: block; width: 100%; font-size: 16px; color: #333; font-weight: 500; line-height: 1.3; padding: 8px 0; }
header .gnb > li .depth2 > li:first-child a {padding-top: 0;}

header .gnb > li:hover {}
header .gnb > li:hover a {color: #3d91f0;/*  background: #fff; border-radius: 8px 8px 0 0; */}
header .gnb > li:nth-child(3):hover a {background: none; color: #fff;}
header .gnb > li:hover .depth2 {/* display: block; background: #fff; border-radius: 0 0 8px 8px; */ opacity: 1; transition: 0.4s;}
header .gnb > li .depth2 > li a:hover {color: #3d91f0;}

header .side-btn {width: 38px; height: 38px; margin-left: 25px; border-radius: 100%; background: rgba(225, 225, 225, 0.3); border: none; position: relative;}
header .side-btn span {display:block; width: 16px; height: 2px; background: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
header .side-btn span:first-child {top: calc(50% - 2.5px);}
header .side-btn span:last-child {top: calc(50% + 2.5px);}

/* 전체 메뉴 */
.allMenu { display: none;position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 1360px; width: 100%; height: 456px; background: #fff url(/kr/career/img/career_allMenu_bg.png) no-repeat right bottom; z-index: 102;}
.allMenu .close-btn {color: #3d91f0; position: absolute; right: 20px; top: 20px; }
.allMenu .close-btn i { font-weight: 900; font-size: 20px; }
.allMenu nav {width: 100%; height: 100%; padding-top: 85px; box-sizing: border-box;}
.allMenu .gnb {display: flex; justify-content: center; }
.allMenu .gnb > li {width: 20%; text-align: center;}
.allMenu .gnb > li > a {display: block;font-size: 20px; color: #333; line-height: 1.3; font-weight: bold;}
.allMenu .gnb > li > a > span {display: inline-block; position: relative;}
.allMenu .gnb > li > a > span:after {content: ''; position: absolute; left: 0; bottom: 0; width: 100%; background: #3d91f0; width: 0; height: 2px; opacity: 0; transition: 0.4s;}
.allMenu .gnb > li .depth2 {padding-top: 40px; box-sizing: border-box;}
.allMenu .gnb > li .depth2 > li {margin-bottom: 12px;}
.allMenu .gnb > li .depth2 > li a {display: block; font-size: 18px; color: #333; line-height: 1.5; font-weight: 500;}

.allMenu .gnb > li:hover > a {color: #3d91f0; transition: 0.4s;}
.allMenu .gnb > li:hover > a > span:after {opacity: 1; width: 100%;}
.allMenu .gnb > li .depth2 > li:hover a {color: #3d91f0; transition: 0.4s;}

/*=====================
			footer
=====================*/
footer {width: 100%; height: 620px; background: url(/kr/career/img/career_footer_bg.png) no-repeat top left/ cover; position: relative; padding-top: 235px; box-sizing: border-box;}
footer .bg {position: absolute; top: -21px; z-index: -1; height: 681px; width: 100%; background: url(/kr/career/img/footer_bg.png) no-repeat left/cover;}
footer > .inner1700 {display: flex; justify-content: space-between; }
footer .left {}
footer .left .footer-logo {}
footer .left .txt {font-size: 16px; color: rgba(255, 255, 255, 0.7); line-height: 2; letter-spacing: -0.3px;  margin-top: 35px; word-break: keep-all;}
footer .left a {display: inline-block; font-size: 16px; color: rgba(255, 255, 255, 0.7); line-height: 2;}
footer .left .link {display: flex; }
footer .left .link a {padding: 0 8px; box-sizing: border-box; position: relative;}
footer .left .link a:after {content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%);width: 1px; height: 12px; background: rgba(255, 255, 255, 0.3);}
footer .left .link a:first-child {padding-left: 0; }
footer .left .link a:last-child:after {display: none;}
footer .left .copyright {display: block; font-size: 14px; color: #71a2fd; line-height: 1.2; margin-top: 50px;}
footer .right {}
footer .right .footer-menu {}
footer .right .gnb {color: #fff; display: flex;}
footer .right .gnb > li {margin-left: 100px;}
footer .right .gnb > li:first-child {margin-left: 0;}
footer .right .gnb > li > a {display: block; font-size: 17px; color: #fff;line-height: 1.1;}
footer .right .gnb .depth2 {margin-top: 50px;}
footer .right .gnb .depth2 li {margin-bottom: 15px;}
footer .right .gnb .depth2 li a {display: block; font-size: 15px; color: #fff; line-height: 1.1; opacity: 0.6; font-weight: 300; text-transform: uppercase;}
footer .right .link2 {margin-top: 48px; display: flex; justify-content: end;}
footer .right .family-site {margin-right: 20px; position: relative;}
footer .right .family-site button {font-family: 'Poppins', sans-serif; color: #fff; width: 130px; height: 37px; background: rgba(255, 255, 255, 0.3); border-radius: 30px; position: relative; z-index: 2; overflow: hidden; font-size: 14px;}
footer .right .family-site button i {font-size: 15px;}
footer .right .family-site .site-link {display: none;width: 100%;  padding: 50px 15px 17px; border-radius: 20px; background: rgba(255, 255, 255, 0.5);  position: absolute; top: 0; box-sizing: border-box; z-index: 1;}
footer .right .family-site .site-link li {}
footer .right .family-site .site-link li a {font-size: 14px; color: #333;}
footer .right .sns {display: flex; gap: 0 11px;}
footer .right .sns a {display: block; width: 39px; height: 39px; background: rgba(255, 255, 255, 0.3); border-radius: 100%; text-align: center;}
footer .right .sns a img {position: relative; top: 50%; transform: translateY(-50%);}

footer .right .family-site.on button {background: rgba(255, 255, 255, 0.8); color: #3c8ff1; font-weight: 500;}
footer .right .family-site.on button {}

footer .top-btn {width: 60px; height: 60px; border-radius: 100%; border: 1px solid rgba(255, 255, 255, 0.3); position: absolute; right: 30px; bottom: 35px;}
footer .top-btn button {color: #fff; width: 100%; height: 100%; padding: 0;}
footer .top-btn button i {font-size: 16px; opacity: 0.9;}
footer .top-btn:hover {background: rgba(255, 255, 255, 0.3); transition: 0.5s;}


/* privacy */
.privacy { color:#666; width: 100%; overflow: hidden; box-sizing:border-box; padding:20px 0 0; font-size:15px; word-break:break-all; }
.privacy > * {line-height: 1.6; word-break: keep-all;}
.privacy h2 { font-size:18px; font-weight:bold; color:#000; text-align: left; margin:50px 0 30px; }
.privacy h2:first-child { margin-top: 0; }
.privacy > p { margin:15px 0; }
.privacy > p+dl { margin-top: 30px; }
.privacy > dl { padding-bottom:20px; line-height: 1.5;}
.privacy > dl > dt{ font-size:15px;color:#3680b9;font-weight:700;padding-bottom:5px; line-height: 1.5;}
.privacy > dl > dd{ padding-bottom:10px;text-align:justify; font-size:15px; line-height:140%; line-height: 1.5;}
.privacy > dl > dd ul{ padding:10px; }
.privacy > dl > dd ul li{ line-height:120%; margin-top: 10px; }
.privacy > dl > dd ul li:first-child { margin-top: 0; }
.privacy > dl > dd ul li p { margin:0 10px 5px; line-height: 140%; margin-top:8px; line-height: 1.6;}
.privacy > dl > dd > p {padding: 10px 0 10px 0;}
.sTxt h3 { font-size:16px; color: #333; font-weight: 700; margin: 20px 0 10px; }
.sTxt h3.tit { font-size:16px; color: #666; text-align:left; padding:0 0 0 0;}
.sTxt h4 { font-size:15px; color: #666; font-weight: 700; margin: 20px 0 10px; }
.sTxt p { margin:10px 0 0 20px; line-height: 1.6;}
.sTxt dl { margin:0 0 0 20px; line-height: 1.6;}
.sTxt dt { margin-top: 10px; line-height: 1.6;}
.sTxt dd { margin:0 8px; line-height: 1.6;}


/*=====================
			반응형
=====================*/

@media screen and (max-width: 1700px){
	.inner1700 {padding:  0 2%; box-sizing: border-box;}
}

@media screen and (max-width: 1500px){
	/* footer */
	footer .right .gnb > li {margin-left: 80px;}
}

@media screen and (max-width: 1400px){
	.inner1400 {padding: 0 2%; box-sizing: border-box;}
	.allMenu {max-width: 90%;}

	/* footer */
	footer {height: calc(100vw*(709/1400));}
	footer .right .gnb > li {margin-left: 60px;} 

}

@media screen and (max-width: 1300px){
	.inner1300 {padding:  0 2%; box-sizing: border-box;}
}

@media screen and (max-width: 1200px){
	/* header */
	header nav {display: none;}
	.allMenu {display: block; width: 50%; height: 100vh; max-width: initial; right: 0; top: 0; left: initial; transform: initial; right: -50%; }
	.allMenu nav {display: flex; /* align-items: center; */ justify-content: center; width: 100%;}
	.allMenu .gnb {display: block; width: 100%;}
	.allMenu .gnb > li {width: 100%;}
	.allMenu .gnb > li > a {font-size: 27px; padding: 15px 0; box-sizing: border-box;}
	.allMenu .gnb > li .depth2 {display: none; padding: 15px 0 20px;}

	.allMenu .gnb > li:hover a {color: #3d91f0; transition: all 0.4s;}
	.allMenu .gnb > li a span {display: inline-block; position: relative;}
	.allMenu .gnb > li a span:after {content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: #3d91f0; opacity: 0;}
	.allMenu .gnb > li:hover a span:after {opacity: 1; width: 100%; transition: all 0.4s;}

	.allMenu .gnb > li.on > a {color: #3d91f0; }
	.allMenu .gnb > li.on a span:after {opacity: 1; width: 100%; transition: all 0.4s;}

	/* footer */
	footer {height: calc(100vw*(600/1200)); padding-top: 0; background-position-x: 9%; padding-top: 50px; box-sizing: border-box;}
	footer .bg {background-position-x: 9%;}
	footer > .inner1700 {flex-wrap: wrap; top: 50%; transform: translateY(-50% ); }
	footer > .inner1700 > div {width: 100%;}
	footer .left {text-align: center;}
	footer .left .footer-logo {margin: 0 auto;}
	footer .left .link {justify-content: center;}

	footer .right .footer-menu {display: none;}
	footer .right .link2 {justify-content: center;}
}

@media screen and (max-width: 960px){
	.inner1700 {padding: 0 4%; }
	.inner1400 {padding: 0 4%;}
	.inner1300 {padding: 0 4%;}

	.allMenu {width: 70%; right: -70%;}

	footer {height: calc(100vw*(600/960));}
}

@media screen and (max-width: 767px){
	header .logo {max-width: 225px;}
	#wrap .allMenu_bg {backdrop-filter: blur(12px);}
	.allMenu {width: 80%; right: -80%; background-size: 90%;}
	.allMenu .gnb > li > a {font-size: 25px;}

	footer {height: auto; background-position-x: 7%; padding: 220px 0 100px;}
	footer .bg {background-position-x: 0;} 
	footer > .inner1700 {top: initial; transform: initial;}
	footer .top-btn {width: 50px; height: 50px; right: 4%; }

}

@media screen and (max-width: 640px){
	.allMenu .gnb > li > a {font-size: 23px; padding: 10px 0;}
	.allMenu .gnb > li .depth2 {padding: 10px 0 15px;}
	.allMenu .gnb > li .depth2 > li a {font-size: 16px;}
	
	footer .left .txt {font-size: 15px;}
	footer .left a {font-size: 15px;}
}

@media screen and (max-width: 420px){
	header .logo {max-width: 200px;}
}


.month-picker { width:220px; }
.month-picker * { font-size:13px; }
.month-picker-month-table .ui-button { width:60px; padding:5px 0; }
.month-picker-title { width:100px; margin:0 auto; }
.ui-button-text-only .ui-button-text { padding:0 !important; }