/* 학교위치도 */
.map_detail{position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; padding: 2rem; border-radius: 0.5rem; z-index: 99; box-shadow: 0 0 1rem rgba(0,0,0,0.2);}
.map_detail .close_btn{position: absolute; right: 1rem; top: 1rem; font-size: 1.2rem; background: #007cd6; color: #fff; border-radius: 0.3rem;}

/* 반응형 view */
.pc_view{display:block;}
.m_view{display:none;}

/* 박스 : 이미지 */
.box_st_img {padding: 1rem; border: 2px dotted #e7e7e7; background: #fff; text-align: center;}
* ~ .box_st_img {margin-top: 0.75rem;}
li > .box_st_img {margin-top: 0.5rem;}
.box_st_img img {max-width: 100%;}

/* 이미지+텍스트 추가 */
.ImgTxt_style1 {display:flex; padding-top:1.25rem; border-top:1px solid #eee; margin-top:1rem;}
.ImgTxt_style1:first-child {padding-top:0; border-top:none; margin-top:0;}
.ImgTxt_style1 .img {max-width:17.5rem;}
.ImgTxt_style1 .img img {width:100%;}
.ImgTxt_style1 .txt {flex:1; margin-left:1.5rem;}
.ImgTxt_style1.reverse {flex-direction:row-reverse}
.ImgTxt_style1.reverse .txt {margin-left:0; margin-right:1.5rem;}

.ImgTxt_style2 {display:flex; flex-wrap:wrap; margin:-1%;}
.ImgTxt_style2 li {width:31.3%; margin:1%;}
.ImgTxt_style2 .img {width:100%; height:10rem; overflow:hidden; background:#eee;}
.ImgTxt_style2 .img img {width:auto; height:100%; position:relative; left:50%; top:50%; transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%);}
.ImgTxt_style2 .tit {text-align:center; padding-top: 0.5rem; color:#222; font-weight:500; font-size:0.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.ImgTxt_style2 .txt {padding: 0.25rem 0 0.5rem; font-size:0.75rem;}
.ImgTxt_style2.w50 li {width:48%;}
.ImgTxt_style2.w25 li {width:23%;}

.ImgTxt_style3::after {content: ''; display: block; clear: both;}
.ImgTxt_style3 .img {max-width: 17.5rem; float:left; margin: 0 1rem 1rem 0; }
.ImgTxt_style3 .img img {width:100%;}


/* 조직도 */
[class^="box_st"] + .organizationBox {margin-top: 3rem;}
.chartBox {text-align: center;}
.chartBox li {position: relative; padding-top: 0.5rem;}
.chartBox li:before {position: absolute; top: 0; left: 50%; width: 1px; height: 0.5rem; background: #d9d9d9; content: "";}
.chartBox a,
.chartBox p {position: relative; display: flex; margin: 0 auto; width: 100%; max-width: 100%; min-height: 2.5rem; padding:0.25rem 0.75rem; flex-direction: column; align-items: center; justify-content: center; background: #fff; border: 1px solid; border-radius: 1.5rem; z-index: 1;}
.chartBox a > span {font-size: 0.85rem; font-weight: 500;}
.chartBox a:hover,
.chartBox a:focus{ text-decoration: underline;}

.chartBox .step01 > li {position: relative; padding-top: 0;}
.chartBox .step01 > li:before {position: absolute; top: 0; left: 50%; width: 1px; height: 6rem; background: #d9d9d9; content: "";}
.chartBox .step01 > li > a {margin-bottom: 2.5rem; width: 12.5rem; height: 3.5rem; font-size: 1rem; font-weight: 600; color: #fff; background: #006ac0 url(/images/web/goeay/sub/step_bg.png) no-repeat right center; border: 4px solid #b8dfff; border-radius: 2rem;}

.chartBox .step02 {position: relative;}
.chartBox .step02:before {position: absolute; top: 0; left: 25%; width: 50%; height: 1px; background: #d9d9d9; content: "";}
.chartBox .step02:after {clear: both; display: block; width: 100%; content: "";}
.chartBox .step02 > li {position: relative; float: left; padding-top: 2rem; width: 50%;}
.chartBox .step02 > li:before {position: absolute; top: 0; left: 50%; width: 1px; height: 2rem; background: #d9d9d9; content: "";}
.chartBox .step02 > li:after {position: absolute; top: -0.8rem; left: calc(50% - 0.8rem); width: 1.6rem; height: 1.6rem; text-align: center; line-height: 2; font-size: 10px; color: #006ac0; background: #e4f3ff; border: 0.3rem solid #fff; border-radius: 50%; content: "●";}


.chartBox .step02 > li > a {position:relative; margin-bottom: 1.5rem; width: 12.5rem; height: 3.5rem; font-size: 1rem; word-break: keep-all; font-weight: 600; color: #fff; background: url(/images/web/goeay/sub/step_bg.png) no-repeat right center; border: 4px solid #b8dfff; border-radius: 2rem;}
.chartBox .step02 > li > a:before{position: absolute; bottom: calc(-1.5rem - 4px); left: 50%; width: 1px; height: calc(1.5rem + 4px); background: #d9d9d9; content: "";}
.chartBox .step02 > li:nth-of-type(1) > a {background-color: #009cff; border-color: #b8dfff;}
.chartBox .step02 > li:nth-of-type(2) > a {background-color: #1e9e90; border-color: #b4e7e1;}

.chartBox .step03 {position: relative; padding:1.5rem; border:1px solid #ccc; border-radius:1.5rem; max-width:80%; margin:0 auto; }
.chartBox .step03 > li { padding: 0 0.25rem; font-size:0.8rem;}
.chartBox .step03 > li > a{ display:block; min-height:0; padding:0 0 0 0.8rem; text-align:left; border:0;}
.chartBox .step03 > li > a:before{ content:""; position:absolute; left:0; top:0.5rem; width:0.3rem; border-top:2px solid #777;}
.chartBox .step03 > li:before{ display:none;}
.chartBox .step03 > li + li > a{ margin-top:0.5rem;}

.chartBox .step02 > li:nth-of-type(1) > .step03 > li > a:hover, 
.chartBox .step02 > li:nth-of-type(1) > .step03 > li > a:focus { color:#006ac0;}
.chartBox .step02 > li:nth-of-type(2) > .step03 > li > a:hover, 
.chartBox .step02 > li:nth-of-type(2) > .step03 > li > a:focus { color: #1e9e90;}

/* media query mobile */
@media (max-width: 1440px) {
    
}



@media (max-width: 1240px) {
    
    /* 반응형 view */
    .pc_view{display:none;}
    .m_view{display:block;}
}



@media (max-width: 1024px) {
}



@media (max-width: 768px) {

	/* 이미지+텍스트 */
	.ImgTxt_style2.w25 li {width:31.3%;}

	
	/* 조직도 */
	.chartBox .step03 { max-width:100%;}
	.chartBox .step02 > li{ padding:1.5rem 0.5rem 0;}
}



@media (max-width: 580px) {

	/* 이미지+텍스트 */
	.ImgTxt_style1 {flex-direction:column !important;}
	.ImgTxt_style1 .img {max-width:100%; text-align:center;}
	.ImgTxt_style1 .img img {width:auto; max-width:100%;}
	.ImgTxt_style1 .txt {margin-left:0; margin-top:0.5rem;}
	.ImgTxt_style1.reverse {flex-direction:inherit;}
	.ImgTxt_style1.reverse .txt {margin-right:0;}
	
	.ImgTxt_style2 li {width:48%;}
	.ImgTxt_style2.w25 li {width:48%;}
	
	.ImgTxt_style3 .img {max-width: 100%; float:none; margin: 0 0 1rem 0; text-align:center; }
	.ImgTxt_style3 .img img {width:auto; max-width:100%;}
}



@media (max-width: 480px) {
	
	/* 조직도 */
	.chartBox .step03{ padding:1rem; border-radius:1rem;}
}



@media (max-width: 380px) {

	/* 이미지+텍스트 */
	.ImgTxt_style2 li {width:100%;}
	.ImgTxt_style2.w50 li {width:100%;}
	.ImgTxt_style2.w25 li {width:100%;}

	/* 조직도 */
	.chartBox .step02:before{ display: none;}
	.chartBox .step02 > li{ width:100%;}
}