@charset "utf-8";

/* 온학교E지원 */
.cont{
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.cont .box{
  /* width: 49%;
  border: 1px solid #ccc; */
  position:relative;
}
.cont .box.left{width: 65%;}
.cont .box.right{width: 35%;}
.cont .box .left{display: flex; justify-content: center; align-items: center;}
.cont { overflow:hidden; margin:0 auto; }
.cont .box .map{ width:55%; margin-top: 20px; margin-right:2%; float:left; position:relative; }
/* .cont .box { width: 49%; float:right; position:relative;} */
.cont .box .map{position:absolute;top:calc(50% - 1rem);left:50%;-webkit-transform:translate(-50%, -50%); width:26.15rem;height:23.4rem;background:url(/resources/familysite/helpschool/images/helpschool_01.png)no-repeat center/cover;}
.cont .box .map .map_lnk{position:absolute;top:0;left:0;width:100%;height:100%;}
.cont .box .map .map_lnk .lnk{position:absolute;}
.cont .box .map .map_lnk .lnk > a{position:relative;display:block;width:2.2rem;height:2.2rem;text-align:center;color:#fff;font-family:"SCDream";font-size:.8rem;font-weight:500;line-height:2.2rem;font-weight:600;}
.cont .box .map .map_lnk .lnk > a:hover{border: 2px solid #fff; border-radius: 50px;}
.cont .box .map .map_lnk .lnk > a:before{position:absolute;top:0;left:0;width:100%;height:100%;background:#1a3b73;border-radius:50%;content:"";-webkit-transition:background .3s;transition:background .3s;}
.cont .box .map .map_lnk .lnk > a:after{position:absolute;top:-.35rem;left:-.35rem;width:calc(100% + .7rem);height:calc(100% + .7rem);border:1px dashed #e5b626;border-radius:50%;content:"";-webkit-animation:circleRotate 5s linear infinite;animation:circleRotate 5s linear infinite;opacity:0;-webkit-transition:opacity .3s;transition:opacity .3s;}
@-webkit-keyframes circleRotate{
   0%{}
   70%{-webkit-transform:rotate(250deg);transform:rotate(250deg);}
   100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}
}
@keyframes circleRotate{
   0%{}
  70%{-webkit-transform:rotate(250deg);transform:rotate(250deg);}
  100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}
}

/* 링크스타일 */
.cont .box .map .map_lnk .lnk > a span{position:relative;z-index:1;}
.cont .box .map .map_lnk .lnk1{top:2rem;left:4rem;}
.cont .box .map .map_lnk .lnk2{top:5rem;left:1.25rem;}
.cont .box .map .map_lnk .lnk3{top:6rem;left:7.5rem;}
.cont .box .map .map_lnk .lnk4{top:9.25rem;left:4rem;}
.cont .box .map .map_lnk .lnk5{top:13.75rem;left:2.4rem;}
.cont .box .map .map_lnk .lnk6{top:6.5rem;left:13.55rem;}
.cont .box .map .map_lnk .lnk7{top:8.25rem;left:10.25rem;}
.cont .box .map .map_lnk .lnk8{top:12.25rem;left:7.5rem;}
.cont .box .map .map_lnk .lnk9{top:15.5rem;left:6.5rem;}
.cont .box .map .map_lnk .lnk10{top:7rem;right:6rem;}
.cont .box .map .map_lnk .lnk11{top:10.75rem;right:11.25rem;}
.cont .box .map .map_lnk .lnk12{top:15.5rem;right:13.25rem;}
.cont .box .map .map_lnk .lnk13{top:8.25rem;right:1.5rem;}
.cont .box .map .map_lnk .lnk14{top:12.65rem;right:8.5rem;}
.cont .box .map .map_lnk .lnk15{top:10.65rem;right:4.5rem;}
.cont .box .map .map_lnk .lnk16{bottom:.8rem;left:5rem;}
.cont .box .map .map_lnk .lnk17{bottom:3rem;right:11.5rem;}
.cont .box .map .map_lnk .lnk18{bottom:3rem;right:7.75rem;}

@media all and (max-width: 1024px) {
  .cont .box .map{margin-top: 20px;}
}
@media all and (max-width: 768px) {
  .cont .box.left{width: 58%;}
  .cont .box.right{width: 42%;}
  .cont .box .map{margin-top: 10px; width: 20rem; height: 18em;}
  .cont .box .map .map_lnk .lnk1{top:1.3; left:3rem;}
  .cont .box .map .map_lnk .lnk2{top:4rem; left:1rem;}
  .cont .box .map .map_lnk .lnk3{top:4.4rem;left:5.5rem;}
  .cont .box .map .map_lnk .lnk4{top:6.8rem;left:3rem;}
  .cont .box .map .map_lnk .lnk5{top:10.5rem;left:1.5vb rem;}
  .cont .box .map .map_lnk .lnk6{top:4.5rem;left:10rem;}
  .cont .box .map .map_lnk .lnk7{top:6.3rem;left:8rem;}
  .cont .box .map .map_lnk .lnk8{top:9rem;left:5.5rem;}
  .cont .box .map .map_lnk .lnk9{top:12rem;left:4.5rem;}
  .cont .box .map .map_lnk .lnk10{top:5rem;right:4rem;}
  .cont .box .map .map_lnk .lnk11{top:8rem;right:8.25rem;}
  .cont .box .map .map_lnk .lnk12{top:12rem;right:10rem;}
  .cont .box .map .map_lnk .lnk13{top:6.25rem;right:1rem;}
  .cont .box .map .map_lnk .lnk14{top:9.65rem;right:6.5rem;}
  .cont .box .map .map_lnk .lnk15{top:8rem;right:3rem;}
  .cont .box .map .map_lnk .lnk16{bottom: 0.8rem;left:3.5rem;}
  .cont .box .map .map_lnk .lnk17{bottom:2rem;right:8.5rem;}
  .cont .box .map .map_lnk .lnk18{bottom:2rem;right:5.75rem;}
}

@media all and (max-width:640px) {
  .cont{height: 800px; display: block;}
  .cont .box.left{width: 100%; height: 45%;}
  .cont .box.right{width: 100%; height: 50%;}
}

/* 온학교e지원소개 */
.box1 .title{
  width: 80%;
  color: #191919;
  font-size: 1.529em;
  font-weight: 600;
  line-height: 1.4;
  padding-bottom: 20px;
}
.box1 {
  width: 100%;
  height: 490px;
  background-image: url(../images/contents/support01.png);
  background-repeat: no-repeat;
  background-position: right 30px bottom 30px;
  background-color: #f9fdff;
  padding: 30px;
  border-radius: 20px;
}

@media all and (max-width:1000px) {
  .box1 {background-size: 44%;}
}
@media all and (max-width:768px) {
  .box1 {
    background-size: 47%;
    background-position: center 210px;
  }
}
@media all and (max-width:640px) {
  .box1 {background-position: center 255px;}
}
@media all and (max-width:420px) {
  .box1 {
    height: 580px;
    background-size: 70%;
    background-position: center 340px;
  }
}
@media all and (max-width:320px) {
  .box1 {
    height: 670px;
    background-size: 76%;
    background-position: center 475px;
  }
}