@charset "utf-8";


/*레이아웃*/
#cont1 {position:relative; width:100%; background:#e9f5ff; padding-top:7.2rem;}
	#cont1:after{content:''; position:absolute; left:0; bottom:0; display:block; width:100%; height:14rem; background:#0073ed;}
#cont2{ width:100%; padding:0 0 10rem 0; background:linear-gradient(0deg, #e6f1f7 0px, #fff 280px);  margin-top:-5rem; }
	#cont2 .inner{ width:100%;}
	

@media(max-width:1024px){
	#cont1 { padding-top:3.2rem; }
	#cont2 { padding:0 0 7.2rem 0; }
}

@media(max-width:680px){
	#cont1:after{ height:8rem;}
}




/* 메인비주얼 */
.mVisible { position:relative; width:100%; height:52rem; }
.mVisible .title .txt1 { position:absolute; top:8px; font-size:4.8rem; font-weight:700; color:#111; word-break:keep-all; opacity:0; animation:reveal 7s ease-out infinite; }
.mVisible .title .txt2 { position:absolute; top:78px; font-size:4.8rem; font-weight:700; color:#111; word-break:keep-all; opacity:0; animation:reveal2 7s 1s ease-out infinite;}
.mVisible .title .txt3 { position:absolute; left:0; top:180px; font-size:2rem; font-weight:700; color:#555; word-break:keep-all; display:inline-block; }
.mVisible img:first-of-type{position:absolute; right:0; bottom:6rem; z-index:1; animation: float 3s ease-in-out infinite;}
.mVisible img:last-of-type{position:absolute; left:0; bottom:14rem;}

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

@keyframes reveal{
	0%{ left:200px; opacity:0;}
	10%{ left:200px; opacity:0;}
	25%{ left:0; opacity:1; }
	75%{ left:0; opacity:1; }
	90%{ left:-200px; opacity:0; }
	100%{ left:-200px; opacity:0; }
}

@keyframes reveal2{
	0%{ left:200px; opacity:0;}
	10%{ left:200px; opacity:0;}
	25%{ left:0; opacity:1; }
	75%{ left:0; opacity:1; }
	90%{ left:-200px; opacity:0; }
	100%{ left:-200px; opacity:0; }
}


@media(max-width:1400px){
.mVisible img:first-of-type{width:560px; height:auto;}
}

@media(max-width:1200px){
.mVisible .title .txt3 { padding-right:600px; }
}

@media(max-width:1024px){
.mVisible{height:60rem;}
.mVisible .title .txt3 { padding-right:400px; }
}

@media(max-width:768px){
.mVisible img:first-of-type{width:100%;}
.mVisible .title h2{font-size:3.2rem;}
.mVisible .title p{font-size:1.6rem;}

.mVisible img.ani { max-width:500px; }
.mVisible img.school { left:-50px; }
}


@media(max-width:680px){
	.mVisible .title .txt1 { font-size:3.6rem; white-space:nowrap; }
	.mVisible .title .txt2 { top:58px;  font-size:3.6rem; white-space:nowrap; }
	.mVisible .title .txt3 { top:120px; padding-right:0px; }
	
	.mVisible img.school { left:8rem; bottom:8rem; height:80px; }
}


@media(max-width:400px){
	.mVisible{height:50rem;}
}




/* 빠른서비스 */
.mQucik { width:100%; margin-bottom:6rem; } 
.mQucik .list {display:flex; flex-wrap:wrap; justify-content:space-between; }
.mQucik .list li { width:calc(100% / 4 - 3.9rem); height:16.2rem; }
.mQucik .list li a:link,
.mQucik .list li a:visited { width:100%; height:100%; padding-left:2rem; border:.1rem solid #ddd; border-radius:2rem; background:#fff; color:#333; overflow:hidden; display:flex; justify-content:flex-start; align-items:center; gap:2rem; transition:0.4s; }
.mQucik .list li a:active,
.mQucik .list li a:focus,
.mQucik .list li a:hover { border:.1rem solid #172a84; background:#172a84; color:#fff; }

.mQucik .list li a strong { font-size:2.2rem; letter-spacing:-1px; transition:0.4s;  }

.mQucik .list li a:link strong::after,
.mQucik .list li a:visited strong::after { transition:0.4s; }
.mQucik .list li a:active strong::after,
.mQucik .list li a:focus strong::after,
.mQucik .list li a:hover strong::after { content:'자세히 보기'; width:9.5rem; padding-left:0.2rem; background:url(/images/child/quickLine.png) no-repeat left bottom; font-size:1.5rem; font-weight:400; display:block; margin-top:0.8rem; }


@media(max-width:1400px){
	.mQucik .list li a:link,
	.mQucik .list li a:visited { padding-left:1.2rem; }
	
	.mQucik .list li:nth-child(1) a:link,
	.mQucik .list li:nth-child(1) a:visited { padding-left:0rem; gap:1.2rem; }
	
	
	.mQucik .list li a p img { height:8rem; }
}

@media(max-width:1280px){
	.mQucik .list li { width:calc(100% / 4 - 1.5rem); height:16.2rem; }
	.mQucik .list li a p img { height:6rem; }
}

@media(max-width:1024px){
	.mQucik .list { flex-wrap:wrap; gap:2rem; }
	.mQucik .list li { width:calc(100% / 2 - 1rem); height:10.0rem; }
	.mQucik .list li a:link,
	.mQucik .list li a:visited { justify-content:center; }
}

@media(max-width:470px){
	.mQucik .list li { width:100%; height:8.0rem; }
	
	.mQucik .list li a:link,
	.mQucik .list li a:visited { padding-left:0rem; gap:2rem; }
	
	
	.mQucik .list li a p img { height:4rem; }
}




/* 견학사진 */
.mPhoto { position:relative; width:100%;}
.mPhoto .title{display:flex; justify-content:center; align-items:center; margin-bottom:2.4rem;}
.mPhoto .title h2{font-size:3.2rem; color:#222; margin-bottom:0; margin-right:1.2rem;}
.mPhoto .title .more{display:flex; justify-content:center; align-items:center; width:25px; height:25px; background:#999; border-radius:2rem;}

.mPhoto .photoList{display:flex; align-items:center; justify-content:space-between;}
.mPhoto .photoList li{width:calc((100% / 4) - 3.2rem); border-radius:2.4rem; box-shadow:0 5px 5px rgba(0,0,0,0.1); overflow:hidden;}
.mPhoto .photoList li.none{width:100%; padding:3.2rem 0; box-shadow:none; text-align:center; color:#666;}
.mPhoto .photoList li a{width:100%; height:100%;}
.mPhoto .photoList li .pic{ width:100%; height:auto; aspect-ratio:3/2; overflow:hidden; }
.mPhoto .photoList li .pic img{position:relative; width:100%; height:100%; object-fit:cover; transition:.5s;}
.mPhoto .photoList li:hover .pic img, .mPhoto .photoList li:focus .pic img, .mPhoto .photoList li:active .pic img{transform:scale(1.1);}
.mPhoto .photoList li .bar{ padding:1.8rem 1.6rem 2.4rem; background:#fff;}
.mPhoto .photoList li .bar .subject { font-weight:700; font-size:2.0rem; color:#222; white-space: nowrap; overflow: hidden;  text-overflow: ellipsis; transition:.3s; margin-bottom:0.4rem;}
.mPhoto .photoList li:hover .bar .subject, .mPhoto .photoList li:focus .bar .subject, .mPhoto .photoList li:active .bar .subject{color:#113d8e;}
.mPhoto .photoList li .bar .date{font-size:1.6rem; color:#888; }

.mPhoto .photoList li.none { width:100%; padding:7rem 0; border:1px solid #ddd; border-radius:2rem; background:#fff; }
@media(max-width:1400px){
.mPhoto .photoList li{width:calc((100% / 4) - 2rem);}
}

@media(max-width:1024px){
.mPhoto .photoList{overflow-x: auto; padding-bottom:2rem;}
.mPhoto .photoList li{width:25rem; min-width:25rem; margin-right:2rem;}
}