/*header, footer*/
@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

html, body { font-family: 'Pretendard-Regular'; scroll-behavior: smooth; letter-spacing: -0.4px; }


/***** 스크롤 바 디자인 *****/
/*body::-webkit-scrollbar {background-color: #f8f8f8; width:12px; height: 0px;} /*body스크롤디자인 (배경)*/ 
/*body::-webkit-scrollbar-thumb {background-color: #4B4E68; border-radius: 0px;} /*body스크롤디자인 (바)*/
/***** 스크롤 바 디자인 (모달팝업창) *****/
.modal_popup::-webkit-scrollbar {background-color: #f8f8f8; width:12px; height: 0px;} /*body스크롤디자인 (배경)*/ 
.modal_popup::-webkit-scrollbar-thumb {background-color: #4B4E68; border-radius: 0px;} /*body스크롤디자인 (바)*/

/***** 공통 - (글자, 속성) *****/
body h1, body h2 {font-weight: 700;}
body a {display: inline-block;}
header .head a {font-size: 1.125rem; color:#fff;}
#btn_go_top { display:none; position: fixed; display: inline-block; bottom: 44px; right: 24px; z-index: 999; background-color: #f5f5f5; text-align: center; padding: 12px; border-radius: 50%; border:1px solid #fff; }
#btn_go_top img {max-width:24px;}
#btn_go_top.on {display:inline-block;}

/***** 공통 - ( 정렬하기 - flex ) *****/
header .head, header .head .gnb { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; }
header { width: 100%; border-bottom: 1px solid rgba(217, 217, 217, 0.2);position: fixed;  top: 0;  left: 0; z-index: 99999;  transition: 0.3s;}
header.on {background-color: rgba(255, 255, 255, 1); box-shadow:0 3px 10px rgba(0,0,0,0.05);}
header .head { height:95px; min-height: 65px; max-height: 95px; padding: 0 50px; position: relative;}
header .head h1 {}
header .head h1 a {display:inline-block; line-height:95px;}
header .head h1 a img {}
header .head nav {height: 100%;}
header .head nav .gnb {text-align:center; height: 100%;}
header .head nav .gnb > li {padding:0 40px; height: 100%; position:relative;}
header .head nav .gnb > li:last-child {margin:0;}
header .head nav .gnb > li > a {color:#111; display: inline-block; font-size: 20px; font-weight: 500; height: 100%; align-content: center; transition: all 0.3s;}
header .head nav .gnb > li > a.on {color:#111;}
header .head nav .gnb > li > a:hover {text-decoration: underline;}

#header.on {background-color: #ffffff !important; }
#header.on .gnb > li > a { color: #333 !important;}



/**header ul.gnb > ul.gnb_sub 시작**/
header .head nav .gnb > li ul.gnb_sub {padding-top:10px; width: 100%; position:absolute; top:85px; left:0; display:flex; flex-flow:column nowrap; display:none;}
header .head nav .gnb > li ul.gnb_sub li {background-color:#fff;}
header .head nav .gnb > li ul.gnb_sub li:first-child {border-radius:8px 8px 0 0;}
header .head nav .gnb > li ul.gnb_sub li:last-child {border-radius:0 0 8px 8px;}
header .head nav .gnb > li ul.gnb_sub li > a {padding:16px; color:#111;}
header .head nav .gnb > li ul.gnb_sub li:hover a {text-decoration:underline;}
header div.m_header {display:none;}

/***** footer 시작 *****/
footer { background-color: #222; padding: 0px 8vw; position: relative;margin-top: 100px;/*pst속성 : 모달팝업디자인위치잡기 */ }
footer .f { display: flex; flex-flow: column nowrap; width: 100%; justify-content: space-between; align-items: center; }
footer .f .top, 
footer .f .btm { width: 100%; display: flex; flex-flow: row nowrap; align-items: center; color: #fff; }
footer .f a {color: #fff;}
footer .f .top { border-bottom: 1px solid rgba(255,255,255,0.1); padding: 45px 0; justify-content:space-between; align-items:flex-start; }
footer .f .top .left {display: flex; flex-flow: row nowrap;}
footer .f .top h1 {margin-right: 100px;}
footer .f .top h1 a {}
footer .f .top h1 a img {}
footer .f .top .cont {font-size:16px; }
footer .f .top .cont > * { margin: 0 0 10px; }
footer .f .top .cont > * em { margin-right: 10px;}
footer .f .top .cont .address {}
footer .f .top .cont .address em {}
footer .f .top .cont .address span {}
footer .f .top .cont .ceo_num { display: flex; flex-flow: row nowrap; }
footer .f .top .cont .ceo_num > * { margin-right: 20px; }
footer .f .top .cont .ceo_num .ceo {}
footer .f .top .cont .ceo_num .ceo em {}
footer .f .top .cont .ceo_num .ceo span {text-decoration: underline;}
footer .f .top .cont .ceo_num .num {}
footer .f .top .cont .ceo_num .num em {}
footer .f .top .cont .ceo_num .num span {text-decoration: underline;}
footer .f .top .cont .ceo_num .num > a { font-size: 0.75rem; padding: 5px 10px; margin-left: 10px; border: 1px solid #fff; border-radius: 20px;}
footer .f .top .cont .connect { display: flex; flex-flow: row nowrap; }
footer .f .top .cont .connect > * {margin: 0 10px 0 0;}
footer .f .top .cont .connect .tel {}
footer .f .top .cont .connect .email {}
footer .f .icon_area {display:flex; align-items:flex-start; text-align:center;}
footer .f .icon_area > a {display:flex; width:40px; height:40px; max-width:40px; /*background:red;*/justify-content:center; align-items:center;}
footer .f .icon_area a.icon_insta::after { 
	content:'\f16d'; /*유니코드 붙여넣기(이미지불러오는코드)*/
	font-family:"Font Awesome 5 Free"; /*폰트어썸 fas, far 글꼴 연결*/
	font-family: "Font Awesome 5 Brands";/*폰트 어썸 fab 글꼴 연결*/
	font-weight:400; /*폰트어썸 굵기 Solid Style(fas) 600필수*/
	color:#fff; /*폰트 어썸 색상*/
	font-size: 40px; /*폰트 어썸 크기*/
}
footer .f .icon_area a.icon_facebook::after { 
	content:'\f39e'; /*유니코드 붙여넣기(이미지불러오는코드)*/
	font-family:"Font Awesome 5 Free"; /*폰트어썸 fas, far 글꼴 연결*/
	font-family: "Font Awesome 5 Brands";/*폰트 어썸 fab 글꼴 연결*/
	font-weight:400; /*폰트어썸 굵기 Solid Style(fas) 600필수*/
	color:#fff; /*폰트 어썸 색상*/
	font-size: 24px; /*폰트 어썸 크기*/
}
footer .f .btm {justify-content: space-between; padding: 25px 0;}
footer .f .btm .link {}
footer .f .btm .link a {margin-right: 10px;}
footer .f .btm .link a:hover {text-decoration: underline;}
footer .f .btm .site {}
footer .f .btm .site #family_site { width: 185px; padding: 5px 0px 5px 0px; background-color: #646782; color: #fff; outline: none; }
footer .f .btm .site #family_site option {}





.subArea .pc { display:block;}
.subArea .mobile { display:none; }

.subHead { margin-top:95px;}
.sub_visual { height:auto;}
.subtop-con-wrap { width: 100%; padding: 70px 0 50px;}
.sub_visual .subtop-txtbox p {  font-size: 20px;  font-weight: 900; color: #E45635;}
.sub_visual .sub_tit {font-size: 72px; color: #0E0E0E;margin-top: 16px;}
.inner {  max-width: 1440px; width: 100%; margin: 0 auto;  position: relative; padding: 0 20px;}
	
.sub_nav {  background-color: #fff; position: relative; z-index: 100;}
.sub_nav .inner { display: flex;  gap: 20px; justify-content: space-between;align-items: center; flex-wrap: wrap; padding-bottom: 30px; border-bottom: #CCCCCC solid 1px;}
.sub_nav .now_page {display: flex; gap: 22px; align-items: center;}
.sub_nav .now_page > li{position: relative;font-size: 15px;font-weight: 400;color: #0E0E0E;}
.sub_nav .now_page > li:nth-child(n + 2)::before{content: '';position: absolute;top: 50%;left: -10px;width: 2px;height: 2px;background-color: #0E0E0E;border-radius: 50%;transform: translateY(-50%);}

.sub_nav_ul { display: flex; gap: 10px;flex-wrap: wrap;}
.sub_nav_ul > li { position: relative;font-size: 18px;font-weight: 600;column-rule: #222;}
.sub_nav_ul .depth1_li,
.sub_nav_ul .depth2_li,
.sub_nav_ul .depth3_li {width: 210px;}
.sub_nav_ul .depth_p { width: 100%; padding: 16px 48px 16px 24px;background-color: #F1F1F1;border-radius: 999px; white-space: nowrap; overflow: hidden;text-overflow: ellipsis; cursor: pointer;}
.sub_nav_ul .depth_p::after {content: ''; display: block; width: 24px; height: 24px; background: url(/wp-content/themes/jung/img/icon_drop.png) no-repeat center; position: absolute; top: 50%; right: 24px; transform: translateY(-50%); transition: .3s;}
.sub_nav_ul .depth_p.on::after {transform: translateY(-50%) rotate(-180deg);}
.sub_nav_ul .drop_menu { display: none;width: calc(100% + 2px);background-color: #fff; border: 1px solid #ccc;border-radius: 12px; position: absolute; top: 100%;left: -1px;}
.sub_nav_ul .drop_menu li { line-height: 1.3;}
.sub_nav_ul .drop_menu li + li {border-top: 1px solid #ebebeb;}
.sub_nav_ul .drop_menu li a { display: block; padding: 10px 15px; word-break: keep-all;transition: .2s;}
.sub_nav_ul .drop_menu li:hover a {background-color: #f7f7f7;}


/*m_header*/
@media (max-width: 1280px) {
	footer {padding: 0 6vw;}
	footer .f .top .cont  {font-size: 1.125rem;}
}

@media (max-width:1204px) {
	.subHead { margin-top:80px;}
	.img-box { padding: 50px 20px; border-radius: 25px; }
	.subtop-con-wrap{padding: 40px 0 30px;}
	.sub_visual .sub_tit { font-size: 36px;margin-top: 10px;}
	.sub_visual .subtop-txtbox p{ font-size: 16px; }
	.sub_nav_ul {font-size: 16px;}
	.sub_visual .subtop-txtbox p{ letter-spacing: 0.5px; padding-bottom: 6px;}
	.sub_nav .inner{ padding-bottom: 20px;}
	.sub_nav_ul .depth1_li,
	.sub_nav_ul .depth2_li,
	.sub_nav_ul .depth3_li{width: 150px;}
	.sub_nav_ul .depth_p { padding: 12px 40px 12px 20px;}
	.sub_nav_ul .depth_p::after { width: 20px;height: 20px;right: 20px;}
}

@media screen and (max-width: 1180px) { /* ipad pro 세로형 1024, ipad air 가로형 1180에 맞춤 */
		header .head {display:none;}
		header div.m_header {display:block;}
		header div.m_header .inner {display:flex; background-color:#565770;justify-content: space-between;height:56px; align-items: center;padding: 0 15px;}
		header div.m_header .inner .m_logo {}
		header div.m_header .inner .m_logo a {}
		header div.m_header .inner .m_logo a img {}
		header div.m_header .inner .nav {}
		header div.m_header .inner .nav a.nav-on {font-size:34px; color:#fff;}
		
		header div.m_header .inner .nav ul.m_gnb li {}
		header div.m_header .inner .nav ul.m_gnb li:last-child {border-bottom: 1px solid #eee;}
		header div.m_header .inner .nav ul.m_gnb li > a { font-size:20px; display:inline-block; width:100%; height:calc(100vh / 11); padding:20px; align-content:center;}
		header div.m_header .inner .nav ul.m_gnb li > ul > li > a { font-size:20px; display:inline-block; width:100%; height:calc(100vh / 15); padding:20px; align-content:center;}

		header div.m_header .inner .nav ul.m_gnb li.nav-off {}
		header div.m_header .inner .nav ul.m_gnb li.nav-off a {}

		.m_gnb {position: fixed;top: 0;right: -100%;width: 280px;height: 100%;background: #fff;z-index: 9999;transition: right 0.4s ease;box-shadow: -5px 0 15px rgba(0,0,0,0.1);padding: 60px 0;display: block !important;}
		.m_gnb.on {right: 0;}
		.nav-off {position: absolute;top: 15px;right: 20px;list-style: none;}
		.nav-off a { font-size: 24px; color: #333; text-decoration: none; }
		.m_gnb > li > a {display: block;padding: 15px 25px;font-size: 18px;font-weight: bold;color: #222;border-bottom: 1px solid #f0f0f0;text-decoration: none;}
		.m_gnb .gnb_sub {display: none;background-color: #f9f9f9;padding: 10px 0;}
		.m_gnb .gnb_sub.open {display: block;}
		.m_gnb .gnb_sub li a {display: block;padding: 10px 40px;font-size: 15px;color: #666;text-decoration: none;}
		.nav-off {position: absolute;top: 0px;right: 20px;list-style: none;z-index: 10;   border: none;}
		.nav-off > a {display: block;width: 40px;height: 40px;line-height: 40px;text-align: center;font-size: 30px;color: #333;text-decoration: none;transition: transform 0.3s ease;border: none !important;}
		.nav-off a:hover {transform: rotate(90deg);color: #ff0000;}
		.subArea .pc { display:none;}
		.subArea .mobile { display:block; }
		
}

@media (max-width: 768px) {
	  footer {padding: 0 34px;}
	  footer .f .top .cont  {font-size: 1rem;}
	  footer .f .top {flex-direction: column;}
	  .sub_nav .now_page{gap: 16px;}
	  .sub_nav .now_page > li:nth-child(n + 2)::before{left: -7px;}
	  .sub_nav .now_page > li{font-size: 14px;}
	  .sub_nav_ul > li {font-size: 15px;}
	  .sub_nav .inner{gap: 12px;}
	  .sub_nav_ul{width: 100%;}
	  .sub_nav_ul .depth1_li,
	  .sub_nav_ul .depth2_li{width: calc(50% - 5px); }
	  .sub_nav_ul .depth_p {padding: 10px 32px 10px 16px;}
	  .sub_nav_ul .depth_p::after {width: 16px;height: 16px;right: 16px;}
	  footer .f .top .connect  {font-size: 0.875rem; margin: 0 0 8px; }
	  footer {padding: 25px;}
	  footer .f .top {flex-direction: column;}
	  footer .f .top .cont .connect {display: block; }
	  footer .f .top .cont .connect .tel {margin-bottom:10px;}
	  footer .f .top .cont .connect .email {margin-bottom:10px;}
     
}

@media screen and (max-width: 600px) { 
	header div.m_header .inner .nav ul.m_gnb {width:calc(85vw);}
	header div.m_header .inner .nav ul.m_gnb li > a { font-size:16px; }
	header div.m_header .inner .nav ul.m_gnb li > ul > li > a  { font-size:14px; }
}
	
	
@media (max-width: 480px) {
	footer {padding: 0 24px;}
	footer .f .top .cont  {font-size: 0.875rem; margin: 0 0 8px; }
	footer .f .top {flex-direction: column;}
}