@charset "utf-8";


/*섹션제목 + 더보기버튼(more)*/
.title{display:flex; align-items: flex-start; justify-content:space-between; align-items:center; margin-bottom:3.2rem;}
.title h2{font-size:3.2rem; color:#111;}

.more{display:flex; width:28px; height:28px; border-radius:20px; background:#999; transition: transform 0.5s ease;}
.more:hover, .more:active, .more:focus{transform: rotate(90deg); background:#7A7A7A;}

@keyframes upDown {
    0%, 100%{transform: translateY(0);}
    50% {transform: translateY(-20px);}
}

@keyframes upDownCenter {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-30px); }
}

/*cont1 > 메인비주얼*/
#cont1{height:60rem; background:url('/images/child/mVisibleBg.jpg') no-repeat center/cover;}
.mVisible{position:relative; width:100%; height:100%;}
.mVisible .mSlogan{position:absolute; top:0; left:50%; transform:translateX(-50%); z-index:500;}
.mVisible .mSlogan h2{font-size:6rem; color:#111; letter-spacing:-3px; padding-top:8rem; padding-bottom:1.2rem;}
.mVisible .mSlogan p{font-size:2.4rem; color:#555; word-break:keep-all;}

.mVisible .imgWrap{position:relative; width:100%; height:fit-content;}
.mVisible .imgWrap .pcImg{position:absolute;}
.mVisible .imgWrap .pcImg:nth-of-type(1) { left: 100px; top: 80px; animation: upDown 5s ease-in-out infinite; }
.mVisible .imgWrap .pcImg:nth-of-type(2) { left: 350px; top: 250px; animation: upDown 5s ease-in-out infinite; }
.mVisible .imgWrap .pcImg:nth-of-type(4) { right: 350px; top: 280px; animation: upDown 5s ease-in-out infinite; }
.mVisible .imgWrap .pcImg:nth-of-type(5) { right: 100px; top: 50px; animation: upDown 5s ease-in-out infinite; }

.mVisible .imgWrap .pcImg:nth-of-type(3) { left: 50%; top: 350px; animation: upDownCenter 5s ease-in-out infinite; z-index:100;}


@media(max-width:1700px){
.mVisible .imgWrap .pcImg:nth-of-type(1) { left: 30px;}
.mVisible .imgWrap .pcImg:nth-of-type(2) { left: 250px;} 
.mVisible .imgWrap .pcImg:nth-of-type(4) { right: 250px;}
.mVisible .imgWrap .pcImg:nth-of-type(5) { right: 30px;}
}

@media(max-width:1500px){
@keyframes upDown { 0%, 100%{transform: translateY(0) scale(0.8);} 50% {transform: translateY(-20px) scale(0.8);}}
@keyframes upDownCenter {0%, 100% { transform: translateX(-50%) translateY(0) scale(0.8); } 50% { transform: translateX(-50%) translateY(-30px) scale(0.8); }}

.mVisible .imgWrap .pcImg:nth-of-type(1) { left: 30px;}
.mVisible .imgWrap .pcImg:nth-of-type(2) { left: 200px;} 
.mVisible .imgWrap .pcImg:nth-of-type(4) { right: 200px;}
.mVisible .imgWrap .pcImg:nth-of-type(5) { right: 30px;}
}

@media(max-width:1240px){
#cont1{height:65rem; padding-bottom:4rem;}
.mVisible .mSlogan{min-width:60rem;}
.mVisible .mSlogan h2{font-size:4.8rem; padding-top:4rem;}
.mVisible .imgWrap .pcImg:nth-of-type(1) { left: -30px;}
.mVisible .imgWrap .pcImg:nth-of-type(2) { left: 100px;} 
.mVisible .imgWrap .pcImg:nth-of-type(4) { right: 100px;}
.mVisible .imgWrap .pcImg:nth-of-type(5) { right: -30px;}
.mVisible .imgWrap .pcImg:nth-of-type(3) {top:420px;}
@keyframes upDownCenter {0%, 100% { transform: translateX(-50%) translateY(0) scale(1); } 50% { transform: translateX(-50%) translateY(-30px) scale(1); }}
}

@media(max-width:1024px){
@keyframes upDown { 0%, 100%{transform: translateY(0) scale(0.6);} 50% {transform: translateY(-20px) scale(0.6);}}
@keyframes upDownCenter {0%, 100% { transform: translateX(-50%) translateY(0) scale(0.7); } 50% { transform: translateX(-50%) translateY(-30px) scale(0.7); }}

#cont1{height:60rem;}
.mVisible .imgWrap .pcImg:nth-of-type(1) { top: 15rem;}
.mVisible .imgWrap .pcImg:nth-of-type(2) { top:28rem;} 
.mVisible .imgWrap .pcImg:nth-of-type(4) { top:30rem;}
.mVisible .imgWrap .pcImg:nth-of-type(5) { top: 13rem;}
.mVisible .imgWrap .pcImg:nth-of-type(3) {top:48rem;}
}

@media(max-width:819px){
#cont1{height:65rem;}
.mVisible .mSlogan{width:100%; left:0; transform:none;}
.mVisible .mSlogan h2{font-size:3.2rem; padding-top:4rem;}
.mVisible .mSlogan p{font-size:1.6rem;}

.mVisible .imgWrap .pcImg:nth-of-type(1) {  top: 13rem;}
.mVisible .imgWrap .pcImg:nth-of-type(2) {left:0.7rem; top:28rem;} 
.mVisible .imgWrap .pcImg:nth-of-type(4) { right:6rem; top:30rem;}
.mVisible .imgWrap .pcImg:nth-of-type(5) { top: 8rem;}
.mVisible .imgWrap .pcImg:nth-of-type(3) {top:50rem;}
}

@media(max-width:540px){
@keyframes upDown { 0%, 100%{transform: translateY(0) scale(0.5);} 50% {transform: translateY(-20px) scale(0.5);}}
.mVisible .imgWrap .pcImg:nth-of-type(2) { left: -40px;}
.mVisible .imgWrap .pcImg:nth-of-type(4) { right: -40px;}
}

@media(max-width:414px){
@keyframes upDown { 0%, 100%{transform: translateY(0) scale(0.45);} 50% {transform: translateY(-20px) scale(0.45);}}

#cont1{height:60rem;}
.mVisible .imgWrap .pcImg:nth-of-type(1) {  left: -75px; top: 13rem;}
.mVisible .imgWrap .pcImg:nth-of-type(2) { left: -60px; top:27rem;} 
.mVisible .imgWrap .pcImg:nth-of-type(4) { right:-60px; top:30rem;}
.mVisible .imgWrap .pcImg:nth-of-type(5) { right:-75px; top: 8rem;}
.mVisible .imgWrap .pcImg:nth-of-type(3) {top:45rem;}
}

/* cont2 > 바로가기메뉴 */
.mQuickMenu{position:relative; top:-15rem; height:20vh;}
.mQuickMenu ul{ display:flex; justify-content:space-between;}
.mQuickMenu ul li{ display:flex; flex-direction:column; align-items:center; justify-content:space-between; width:calc((100% - 160px) / 5); min-height:200px; padding:2.8rem 4rem; background:#fff; border-radius:2.4rem; border:1px solid #dddddd; box-shadow: 0 0 10px 0 rgba(0, 0, 0, .05); transition:.5s; box-sizing:border-box; transition:0.5s;}
.mQuickMenu ul li:hover, .mQuickMenu ul li:focus, .mQuickMenu ul li:active {background:#f94d6d; border-color: transparent;}
.mQuickMenu ul li .icon{display:flex; align-items:center; justify-content:center;}
.mQuickMenu ul li h2{font-size:2.4rem; margin:2rem 0 2.4rem; transition:.5s; word-break:keep-all; text-align:center;}

.mQuickMenu ul li:hover h2, .mQuickMenu ul li:focus h2, .mQuickMenu ul li:active h2{color:#fff;}
.mQuickMenu ul li .viewmore{display:inline-block; width:100%; padding:1.6rem 0; background:#262b7d; color:#fff; font-size:1.6rem; font-weight:700; border-radius:3rem; text-align:center; transition:.5s;}
.mQuickMenu ul li:hover .viewmore, .mQuickMenu ul li:focus .viewmore, .mQuickMenu ul li:active .viewmore{ background:#fff; color:#262b7d;}

@media(max-width:1440px){
.mVisible .mVisible_title h2{font-size:4rem}
.mQuickMenu ul li{padding:2.8rem;}
.mQuickMenu ul li .icon {width:auto; height:8rem;}
.mQuickMenu ul li .icon img{height:100%; width:auto;}
}

@media(max-width:1200px){
.mQuickMenu{height:auto; top:0; marging-bottom:0;}
.mQuickMenu ul{position:static; width:100%; justify-content:center; flex-wrap:wrap; bottom:auto;}
.mQuickMenu ul li{position:static; transform:none; justify-content:space-between; width:calc((100% - 8rem) / 5); margin-bottom:2rem; margin-right:2rem;}
.mQuickMenu ul li:nth-of-type(5){margin-right:0;}
}

@media(max-width:1083px){
.mQuickMenu ul li:nth-of-type(4){margin-right:2rem;}
}

@media(max-width:819px){
.mQuickMenu{top:0;}
.mQuickMenu ul li{min-width:20.8rem;}
.mQuickMenu ul li h2{font-size:2.4rem;}
}

@media(max-width:690px){
.mQuickMenu ul{justify-content:left;}
.mQuickMenu ul li{width:calc((100% - 2rem) / 2); min-width:10rem;}
.mQuickMenu ul li:nth-of-type(2n){margin-right:0;}
}

/* cont3 > 견학 및 모의의회 */
.mPhoto .title{display:flex; justify-content:center; align-items:center;}
.mPhoto .title h2{margin-bottom:0; margin-right:1.6rem;}
.mPhoto .more{position:static;}
.mPhoto .photoDetail{display:flex; justify-content:space-between; align-items:center; }
.mPhoto .photoDetail li{width:calc((100% / 4) - 3.6rem); height:auto; overflow:hidden; border-radius:2rem; box-shadow: 0 4px 10px rgb(0, 0, 0, 0.2);}
.mPhoto .photoDetail li:hover .pic img, .mPhoto .photoDetail li:active .pic img, .mPhoto .photoDetail li:focus .pic img{transform:scale(1.1);}
.mPhoto .photoDetail li a{width:100%; height:100%;}
.mPhoto .photoDetail li .pic{ overflow:hidden;}
.mPhoto .photoDetail .pic img{display:block; width:100%; height:auto; transition:0.5s;}
.mPhoto .photoDetail .bar {padding:2rem;}
.mPhoto .photoDetail .bar .subject{display:block; width:100%; margin-right:1.6rem; word-break:keep-all; font-size:1.9rem; font-weight:700; color:#111;  transition:0.5s;}
.mPhoto .photoDetail li:hover .bar .subject, .mPhoto .photoDetail li:active .bar .subject, .mPhoto .photoDetail li:focus .bar .subject{color:#262b7d;}
.mPhoto .photoDetail .bar .date{display:inline-block; min-width:10rem; color:#888; margin-left:auto;}
.mPhoto .photoDetail .bar .svg-inline--fa{color:#999; margin-right:0.8rem;}

@media (max-width:1000px){
.mPhoto .photoDetail{overflow-x:scroll; flex-wrap:nowrap; padding-bottom: 1.5rem; gap:2.4rem;}
.mPhoto .photoDetail li {width: 28rem; flex-shrink: 0;}
}