@charset "utf-8";

/* content */
#sub_container_wrap {position:relative; background:#fff}
#sub_container_wrap:after {content:""; display:block; clear:both;}

.sub_content_wrap {position: relative;max-width: 1400px; margin: 0 auto 100px; min-height: 680px; padding: 0 1rem;}
.sub_content_wrap:after {content:""; display:block; clear:both;}

#sub_content{ float:right; max-width:calc(100% - 300px); width: 100%;}
.subCntBody{ position:relative; padding:30px 0 40px}

/* 왼쪽메뉴 */
#menu { position:relative; float:left; margin-right:50px; width:250px; padding-top:20px}
#menu h1 { background:#f58830; height:130px; line-height:130px; letter-spacing:-2px; text-align:center; color:#fff; font-size:27px; font-weight: 600; border-radius: 0.5rem 2.5rem 0.5rem 2.5rem; margin-bottom: 1rem;}
#menu .lnb { }
#menu .lnb > li{ position:relative; margin-bottom: 0.5rem; border-radius: 0.5rem; border: 1px solid #b3a293; overflow: hidden;}
#menu .lnb > li > a {display:block; line-height:130%; padding:15px 20px 15px 16px; font-size:15px; color:#333;}
#menu .lnb > li > a:hover { text-decoration:underline}
#menu .lnb > li.on{border: 1px solid #3a7cd2;}
#menu .lnb > li.on > a {color:#fff; background: #3377b1; font-weight:500; border-radius: 0.45rem 0.45rem 0 0;}
#menu .lnb > li.on > a:hover { text-decoration:none}
#menu .subLnb {display:none; border-top:1px solid #d3d7dd; background: #fff; padding:8px 18px; }
#menu .subLnb li a {display:block; font-weight: 400; padding:3px 10px 3px 13px; font-size:15px; background:url('/images/org/web/ghfm/sub/bgSideNaviSub.png') no-repeat 0 15px; line-height: 1.8;}
#menu .subLnb li{position: relative;}
#menu .subLnb li.on a { color:#000; font-weight: 600; font-size: 15px; background-image:url('/images/org/web/ghfm/sub/bgSideNaviSub_on.png')}
#menu .subLnb li a span{position: relative; padding-bottom: 0.2rem; z-index: 0;}
#menu .subLnb li.on a:hover {text-decoration: none;}
#menu .subLnb li a span::before{position: absolute; content: ''; width: 100%; height: 5px; left: 0; bottom: 2px; background: #bfebff; opacity: 0; z-index: -1;}
#menu .subLnb li.on::after{position: absolute; content: ''; background:url('/images/org/web/ghfm/sub/arrow_b2.png') no-repeat; width:7px; height:12px; right: 0; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); }
#menu .subLnb li a span:hover::before{opacity: 1;}
/* 왼쪽메뉴 2차메뉴 아이콘 */
#menu .lnb > li.row > a:after{transform: rotate(90deg); -webkit-transform: rotate(90deg);}
#menu .lnb > li > a:after{display:block; position:absolute; content:''; background:url('/images/org/web/ghfm/sub/arrow_b.png') no-repeat; width:7px; height:11px; right:18px; top:18px;}
#menu .lnb > li.on > a::after{ background:url('/images/org/web/ghfm/sub/arrow_b_on.png') no-repeat; width:12px; height:7px; right:16px; top:20px; transform: rotate(0); -webkit-transform: rotate(0);}
/* 새창 아이콘 */
#menu .lnb a[target='_blank']:after  {content:""; background:url('/images/org/web/ghfm/common/icon_blank.png') no-repeat; display:inline-block; width:11px; height:11px; margin-left:10px;}

/* sub 타이틀 */
#sub_content .title_area{ position:relative; overflow:hidden; padding:47px 0 60px; border-bottom:1px solid #e5e5e5;}
.title_area .location { position:absolute; bottom: 24px; left: 0; font-size:15px; line-height:18px;}
.title_area .location span:first-child {padding: 0; background: none;}
.title_area .location span,
.title_area .location strong {display:inline-block; *display:inline; zoom:1; padding-left:16px; background:url('/images/org/web/ghfm/sub/icon_location_arrow.gif') no-repeat 5px 6px; color:#6d7179}
.title_area .location strong { font-weight:normal}
.title_area .location a.home { color:#6d7179;}
.title_area .pageTitle{ font-weight:700; letter-spacing:-2px; font-size:30px; color:#333; line-height:36px}

/* sns */
.snsBox { position:absolute; top:59px; right:0;}
.snsBox:after { content:""; display:block; clear:both;}
.snsBox button { float:left; margin-left:12px; width:30px; height:30px; overflow:hidden; background:url("/images/org/web/ghfm/sub/btnSns.png") no-repeat 0 0}
.snsBox button > span {text-indent:-1140px; font-size:0; line-height:0}
.snsBox .btnPrint { width:50px; height:50px; line-height: 50px; background: #fff; border: 1px solid #bbbbbb; border-radius: 0.8rem; background:url("/images/org/web/ghfm/sub/btnPrint.png") no-repeat center; }

.snsBox .snsClose{}
.snsBox .btnShare{ width:50px; height:50px; line-height: 50px; background: #fff; border: 1px solid #bbbbbb; border-radius: 0.8rem; background:url("/images/org/web/ghfm/sub/btnShare.png") no-repeat center; }
.snsBox .btnTwt{background-position: 0 0; margin-left: 0;}
.snsBox .btnKkot{background-position: -43px 0;}
.snsBox .btnKkos{background-position: -84px 0;}
.snsBox .btnFbook{background-position: -123px 0;}
.snsBox .snsClose{position: absolute; top: 0; right: -56px; width:50px; height:50px; line-height: 50px; background: #162f6d; color: #fff; border: 1px solid #162f6d; font-size: 1rem; border-radius: 0.8rem;}
.snsBox .sns_more {display: none; position: absolute; left: -125px;}
.snsBox .sns_more .moreWrap{height: 50px; border-radius: 0.8rem; border: 1px solid #bbb; padding: 0.5rem;}
.snsBox.on .sns_more{display:block;}

/* 인사말 */
.greeting{position: relative; padding-left: 20px;}
.greeting::before{position: absolute; content: ''; width: 656px; height: 433px; top: 0; right: 0; background: url(/images/org/web/ghfm/sub/greetImg.png) no-repeat;}
.greeting .imgBox{margin-bottom: 20px;}
.greeting p{font-size: 18px; color: #111; line-height: 1.7;}

/* 연혁 */
.historyBox {height: 957px;}
.lstHistory {position: relative; overflow: hidden; height: 100%;}
.lstHistory:before {position: absolute; top: 0; left: 50%; width: 60px; height: 957px; background: url(/images/org/web/ghfm/sub/historyBar_03.png) no-repeat; content: "";}
.lstHistory:after {position: absolute; top: 11rem; left: 60%; font-size: 100px; font-weight: 900; color: #f2f6fa; content: "History"; font-family: 'Montserrat';}
.lstHistory > li {position: relative; clear: both; margin-top: 2.2rem; width: 50%; font-size: 16px; color: #111; line-height: 1.4; z-index: 1;}
.lstHistory > li:nth-of-type(odd) {float: right; padding-left: 7.25rem;}
.lstHistory > li:nth-of-type(odd):before {left: -0.75rem;}
.lstHistory > li:nth-of-type(odd):after {left: -0.15rem;}
.lstHistory > li:nth-of-type(even) {float: left; padding-right: 3.25rem; text-align: right;}
.lstHistory > li:nth-of-type(even):before {right: -0.75rem;}
.lstHistory > li:nth-of-type(even):after {right: -0.15rem;}
.lstHistory > li strong {display: block; margin-bottom: 1rem; font-size: 1.5rem; font-weight: 700; color: #016ebe;}
.lstHistory > li {position: relative;}
.lstHistory > li li + li {margin-top: 0.5rem;}
.lstHistory > li:nth-of-type(odd) li:before {left: 0;}
.lstHistory > li:nth-of-type(even) li:before {right: 0;}
.lstHistory > li .date {display: block; width: 100%; font-family: 'Montserrat'; font-size: 18px; font-weight: 500; color: #111;}
.lstHistory > li em{font-weight: 600;}
.lstHistory > li:first-child .date{color: #fc9f1a;}
.lstHistory > li:nth-of-type(odd) li .date {left: 0.75rem;}
.lstHistory > li:nth-of-type(even) li .date {right: 0.75rem;}

/* 조직 및 업무 */
.organization table ul li{margin-left: 0;}

/* 시설안내 */
.facility .info{font-size: 18px; padding: 0.8rem 0 0.8rem 3rem; background: url(/images/org/web/ghfm/sub/0105_ico01.png) no-repeat 0 5px; line-height: 1.4;}
.facility .info.size{background: url(/images/org/web/ghfm/sub/0105_ico02.png) no-repeat 0 5px;}
.facility .info em{font-weight: bold; color:#f68831; margin-right: 1rem;}
.facility .img img{max-width: 1080px; width: 100%; display: block;}

/* 동아리실안내 */
.circle ul li{font-weight: 400;}
.circle .circleImg{margin-top: 4rem;}
.circle .circleImg .circleCon{position: relative; height: 17rem; padding: 0 2rem; border-radius: 1rem; background: #fff7fc; margin-bottom: 7rem;}
.circle .circleImg .circleCon:nth-child(2){background: #f7f9ff;}
.circle .circleImg .circleCon:nth-child(3){background: #fff7ef;}
.circle .circleImg .circleCon .rName{position: relative; top: -1.5rem; max-width: 395px; width: 100%; background: #f6619e; line-height: 3.5rem; color: #fff; border-radius: 3rem 3rem 3rem 0; text-align: center; font-weight: 600; font-size: 19px; margin-left: -2rem; box-shadow: 4px 4px 4px rgba(196,50,110,0.31);}
.circle .circleImg .circleCon:nth-child(2) .rName{background: #5c7bd9; box-shadow: 4px 4px 4px rgba(50,84,188,0.31);}
.circle .circleImg .circleCon:nth-child(3) .rName{background: #f18f2e; box-shadow: 4px 4px 4px rgba(206,113,22,0.31);}
.circle .circleImg .circleCon div{display: flex; gap: 3rem; position: absolute; top: 4rem;}
.circle .circleImg .circleCon div .txt{margin-top: 2rem; padding-right: 10rem;}
.circle .circleImg .circleCon div .txt strong{display: block; font-size: 22px;}
.circle .circleImg .circleCon div .txt span{display: block; font-size: 18px; line-height: 1.5; word-break: keep-all; margin-top: 2rem;}

/* 공간구성 */
.facility .space{padding: 2.5rem; border-radius: 1rem; background: #f5f5ff; margin: 1rem 0;}
.facility .space img{display: block; max-width: 100%; margin: 0 auto;}
.facility .stepBox .stepCon div span{display: block; text-align: left; font-weight: 400; word-break: keep-all; padding-left: 3rem;}
.facility .stepBox .stepCon div span em{position: absolute; left: 1.5rem; margin-right: 0.5rem; font-weight: 600; color: #3377b1;}

@media screen and (max-width:1400px) {
	/* 인사말 */
	.greeting::before { background-size: 70%; background-position: right top;}

	/* 연혁 */
	.lstHistory:after{font-size: 60px; left: 63%;}
}

@media screen and (max-width:1240px) {
	.sub_content_wrap{padding-top: 9rem;} /* 20251204 수정 */

	/* 인사말 */
	.greeting::before { background-size: 37%; bottom: -2rem; top: auto; background-position: bottom right;}

	/* 대관신청 */
	.circle .circleImg .circleCon div .txt { padding-right: 1rem; }
	.circle .circleImg .circleCon div .txt strong{font-size: 20px;}
	.circle .circleImg .circleCon div .txt span{font-size: 16px;}}

@media screen and (max-width:1019px) {
	.sub_content_wrap, #sub_content, .subCntBody, #menu h1 {-webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box}

	#sub_container_wrap { padding-top:80px;}

	/* content */
	#sub_container_wrap, .sub_content_wrap {width:100%}
	.sub_content_wrap {margin:0 auto}
	#sub_content{margin:0; width:100%; padding:0 2.5% 20px}
	.subCntBody {width:100%}

	/* 왼쪽메뉴 */
	#menu { width:100%; margin:0; padding:0}
	#menu h1 {width:100%; height:auto; line-height:150%; padding:6px 0 9px; cursor:pointer; font-size:20px; background:#f58830 url("/images/org/web/ghfm/sub/bgLnbDepth.png") no-repeat 98% 50%; border-radius: 0; margin-bottom: 0;}
	#menu h1.on{background-image:url("/images/org/web/ghfm/sub/bgLnbDepthOn.png")}
	#menu nav{display:none}
	#menu nav{position:relative; border-bottom:1px solid #333}
	#menu .lnb{ border:0}
	#menu .lnb > li{border-radius: 0; margin-bottom: 0; border: 0; border-bottom: 1px solid #b3a293;}
	#menu .lnb > li.on > a{border-radius: 0;}
	#menu .lnb > li > a{padding: 10px 20px 10px 16px;}
	#menu .subLnb{padding: 5px 18px;}
	#menu .subLnb li a{font-size: 14px; line-height: 1.5; background: url(/images/org/web/ghfm/sub/bgSideNaviSub.png) no-repeat 0 12px}
	#menu .lnb > li.on > a:after{top: 15px;}
	#menu .lnb > li.row > a:after{top: 15px;}
	#menu .subLnb li.on a{font-size: 14px;}

	.sub_content_wrap{padding: 0;}
	#sub_content{max-width: 100%;}
}

@media screen and (max-width:800px) {
	#sub_content{margin-top: 2rem;}
	.subCntBody{padding:25px 0 40px}

	/* sub 타이틀 */
	#sub_content .title_area{ height:auto; overflow:visible; padding:0 0 0; border-bottom:0;}
	.title_area .location { position:relative; top:auto; right:auto; text-align:center; margin:20px 0 10px}
	.title_area .pageTitle{ border-bottom:1px solid #e5e5e5; padding-bottom:22px; text-align:center; line-height:130%;}

	/* sns */
	.snsBox { position:relative; width: 130px; top:auto; right:0; z-index:1; text-align:right; margin-top:10px; margin-left: auto;}

	/* 인사말 */
	.greeting{padding-left: 0; padding-top: 3rem;}
	.greeting p{font-size: 15px;}
	.greeting::before { background-size: 30%;}

	/* 연혁 */
	.lstHistory > li{margin-top: 2rem;}
	.lstHistory > li:nth-of-type(odd) {padding-left:5.25rem;}
	.lstHistory > li:nth-of-type(even) { padding-right: 1.25rem;}
}


@media (max-width:768px){
	.sub_content_wrap{padding-top: 0;}

	/* 연혁 */
	.lstHistory:after{font-size: 50px;}

	/* 대관신청 */
	.circle .circleImg{width: 100%;}
	.circle .circleImg .circleCon{height: auto; margin-bottom: 3rem;     padding: 0 2rem 2rem 2rem;}
	.circle .circleImg .circleCon div{position: static; flex-direction: column; gap: 10px;}
	.circle .circleImg .circleCon div .img{text-align: center; max-width: 300px; height: auto; margin: 0 auto;}
	.circle .circleImg .circleCon div .img img{width: 100%;}
	.circle .circleImg .circleCon div .txt{width: 100%; margin-top: 1rem;}
	.circle .circleImg .circleCon div .txt strong {font-size: 18px;}
	.circle .circleImg .circleCon div .txt span{margin-top: 1rem;}
	.circle .circleImg .circleCon .rName{font-size: 15px;}
}

@media screen and (max-width:600px) {
	#sub_content {margin-top: -75px;} /* 20251204 추가 */
	#wrap.no_langs #sub_content {margin-top: -50px;} /* 20251204 추가 */
}

@media screen and (max-width:580px) {
	
	#sub_container_wrap { padding-top:60px;}
	#sub_content {margin-top: -30px;} /* 20251204 추가 */
	#wrap.no_langs #sub_content {margin-top: -30px;} /* 20251204 추가 */

	/* 왼쪽메뉴 */
	#menu h1 { text-align:left; padding:6px 16px 9px; background-position:97% 50%}

	/* sub 타이틀 */
	.title_area .location {margin:16px 0 8px}
	.title_area .pageTitle{ font-size:24px; letter-spacing:-1px; padding-bottom:18px;}

	/* 인사말 */
	.greeting{ padding-top: 0;}
	.greeting::before {display: none;}

	/* 연혁 */
	.lstHistory:before {left: 0;}
	.lstHistory:after{left: 5rem;}
	.lstHistory > li {margin-left: 4rem; width: calc(100% - 4rem); word-break: keep-all; font-size: 15px;}
	.lstHistory > li:nth-of-type(odd) {float: none; padding-left: 1.5rem;}
	.lstHistory > li:nth-of-type(even) {float: none; padding-right: 0; padding-left: 1.5rem; text-align: left;}
	.lstHistory > li:nth-of-type(even):before {right: auto; left: -0.75rem;}
	.lstHistory > li:nth-of-type(even):after {right: auto; left: -0.15rem;}
	.lstHistory > li:nth-of-type(even) li {padding-right: 0; padding-left: 6.25rem;}
	.lstHistory > li:nth-of-type(even) li:before {right: auto; left: 0;}
	.lstHistory > li:nth-of-type(even) li .date {right: auto; left: 0.75rem;}

	/* 시설 */
	.facility .info{font-size: 15px;}
}

@media screen and (max-width:480px) {
	/* 왼쪽메뉴 */
	#menu h1 {background-position:96% 50%}

	/* sns */
	.snsBox{width: 88px;}
	.snsBox .snsClose{right: -37px;}
	.snsBox .snsClose,
	.snsBox .btnShare,
	.snsBox .btnPrint { width: 30px; height: 30px; line-height: 30px; border-radius: 0.7rem;}

	/* 인사말 */
	.greeting .imgBox img{width: 100%;}
	.greeting p{font-size: 14px;}

	/* 진주교육역사관 */
	.facility .space{padding: 0.5rem;}
}

@media screen and (max-width:420px) {
	/* 연혁 */
	.lstHistory > li {margin-top: 2rem;}
}

@media screen and (max-width:380px) {
	/* 연혁 */
	.lstHistory > li{font-size: 14px;}
}