@charset "UTF-8";

.bodyWrap {margin:0 auto; min-width:360px; word-break:keep-all; transition:all ease 0.4s 0.3s;}
.colWide {margin:0 auto; padding:0 15px; min-width:360px;}

/* 콘텐츠 영역 설정 */
.mainContents {position:relative; display:block; }
.subContents {position:relative; display:block; padding:80px 0;}
.main_inner {position:relative;}
.inner {max-width:1640px; margin:0 auto; padding:0 15px;}
h2 {font-size:24px}
.m_t_30 {margin-top:30px;}

/* 상단 레이아웃 디자인 */
.header {position:absolute; height:80px; top:0; left:0; width:100%; padding:15px 0; transition:all ease 0.4s 0.0s; z-index:99;}
.header .colWide {display:flex; align-items:stretch;}
.header.scroll_on {min-height:auto; background:#fff; box-shadow:0 1px 5px 0 rgba(0,0,0,0.15);}
.logo {padding-top:5px; display:flex;}
.logo a {display:block; font-weight:600; color:#303d92; font-size:28px; margin:0 0; width:200px; font-family:'Jeonju_gakR', sans-serif;}
.logo a span.point {}

.menuWrap {display:flex; flex-direction:row-reverse; justify-content:space-between; align-items:baseline; width:100%;}
.mainMenu {display:flex; text-align:center;}
.mainMenu a {transition:all ease 0.3s 0.0s;}
.mainMenu > li > a {display:block; font-size:18px; padding:13px 30px; font-weight:600;}
.mainMenu > li > a [href="javascript:;"] {cursor:inherit;}
.mainMenu > li > a:hover,
.mainMenu > li.scroll_on > a {color:#303d92;}
.mainMenu > li > ul {display:none;}
.mainMenu > li > ul > li > a {display:block; padding:8px; font-size:14px; color:#fff; background:#303d92;}
.mainMenu > li > ul > li > a:hover {color:#fff;}

.drawerBtn,.mainMenu .box_menu {display:none;}
.bgAllMenu {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.7);}

/* 하단 레이아웃 디자인 */
.footer {padding:46px 0; border-top:1px solid #ccc;}
.footer .footer_wrap {width:100%; margin:0 auto; display:flex; justify-content: space-between; font-size:14px;}
.footer .footer_wrap > ul {display:flex; align-items:center;}
.footer .footer_wrap > ul li:nth-child(2) {margin-left:45px; width:calc(100% - 189px); line-height:2;}
.footer .familySite {position:relative; margin-left:auto;}
.footer .familySite button {position:relative; display:flex; align-items:center; padding-left:20px; width:180px; height:45px; color:#000; font-weight:500; text-align:left; background:#f0f0f0; border:1px solid #c4c4c4;}
.footer .familySite ul {display:none; position:absolute; bottom:100%; left:0; width:100%; border:1px solid #303d92; border-bottom:0; background:#fff; overflow:hidden;}
.footer .familySite ul li {line-height:2.5; letter-spacing:-0.4px;}
.footer .familySite ul li a {display:block; height:100%; padding:0 10px; color:#636363;}
.footer .familySite ul li a:focus,
.footer .familySite ul li a:hover {color:#636363;}
.footer .familySite button.on {border-color:#303d92; border-top:1px solid transparent;}

.web_none {display:none;}

/* sub-location */
.location_box {position:absolute; width:100%; margin-top:-30px; z-index:21}
.locationArea {max-width:1280px; margin:0 auto;}
.locationArea .location {display:table; table-layout:fixed; width:100%; background:#fff; z-index:21; border-radius:10px; box-shadow:5px 7px 24px 6px rgba(0,0,0,0.10);}
.locationArea .location > li {display:inline-block; vertical-align:middle; position:relative; border-left:1px solid #dfdfdf;}
.locationArea .location > li:first-child {margin-left:0; border-left:none;}
.locationArea .location > li.home > a {text-align:center; display:block; width:60px;}
.locationArea .location > li.home > a > i {}
.locationArea .location > li.locationLink > a {padding:0 40px; height:84px; line-height:90px; text-align:center; border-right:1px solid #dfdfdf;}
.locationArea .location > li.locationLink > a.active {color:#303d92; font-weight:700;}
.locationArea .location > li.locationLink a:hover,.locationArea .location > li.locationLink.on a {color:#303d92; transform:translateY(-10px);}

.grid-layout-inner {display:flex; margin:0px; flex-wrap:wrap; text-align:center;}
.grid-layout-cell {box-sizing:border-box;}

.grid-1 {width:100%!important}
.grid-2 {width:50%!important}
.grid-3 {width:33.33%!important}
.grid-4 {width:25%!important}

/* 미디어쿼리 적용 */
@media screen and (max-width:1280px) {
	.mainMenu > li a {font-size:16px;}
}

@media screen and (max-width:1024px) {
	.header {height:70px; position: fixed;}
	.header .logo a {font-size:22px;}
	h2 {font-size:20px}

	.footer .footer_wrap {flex-wrap:wrap; flex-direction:column-reverse; font-size:13px;}
	.footer .footer_wrap > ul {display:block;}
	.footer .footer_wrap > ul li.f_logo {text-align:center; width:150px; margin:20px auto;}
	.footer .footer_wrap > ul li:nth-child(2) {margin-left:0; margin-top:30px; line-height:1.5; width:100%;}
	.footer .familySite {margin-left:0; width:100%; margin-bottom:15px;}
	.footer .familySite button {width:100%;}
	.web_none {display:block;}
}

@media screen and (max-width:960px) {
	.menuWrap {display:block; position:fixed; top:0; padding-top:30px; right:-300px; width:300px; height:100%; background:#fff;}
	.mainMenu {display:block; text-align:left;}
	.mainMenu > li {position:relative;}
	.mainMenu > li a {color:#111}
	.mainMenu > li > ul > li > a {background: #f8f8f8; color:#000;}
	.mainMenu > li.gotChild > a:after {content:"\e944"; background:#fff;}
	.mainMenu > li.on > a:after {border-color:#303d92;}
	.mainMenu > li.on > a:after {color:#303d92;transform:rotate(180deg);}
	.mainMenu ul {padding:0 0 0 30px; border-top:1px solid #ddd; border-bottom:1px solid #ddd; background:#f8f8f8;}
	.mainMenu ul li:last-child {padding-bottom:0;}
	.mainMenu ul li:first-child {padding-top:0; margin-top:0; border-top:0;}
	.mainMenu ul li a:before {content:"\e93f"; display:inline-block; margin:0 10px 0 -15px; text-indent:0; font-size:18px; vertical-align:middle; font-family:'xeicon';}
	.mainMenu .box_menu {display:block; position:absolute; top:0; width:100%; height:70px; background-color:#303d92;}
	.mainMenu .box_menu span{ font-size:20px; line-height:70px; letter-spacing:-0.025em; color:#fff; padding-left:35px;}
	.mainMenu .m_mt {margin-top:45px;}

	.drawerBtn {display:block; position:fixed; top:15px; right:15px;}
	.drawerBtn button {font-size:38px;}
	.drawerBtn button i {transition:all ease 0.7s 0s;}
	.drawerBtn.on button {color:#fff;}
	.drawerBtn.on button i {transform:rotate(180deg);}

	.subContents {padding:40px 0;}
	.sub_topbg {height:360px;}
	.sub_visual_title h2 {font-size:40px; margin-top:60px;}
	.subContents .sub_title {margin:0 0 40px 0;}
	.location_box {display:none;}
}

@media screen and (max-width:768px) {
}

@media screen and (max-width:640px) {
	.sub_topbg {height:240px;}
	.subContents .sub_title h2 {font-size:24px;}
	.sub_visual_title h2 {font-size:30px;}
}

@media screen and (max-width:480px) {
}