::selection {
    background: rgba(0, 0, 0, 0);
    color: rgba(0, 0, 0, 0.3);
    /* text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;   */
 }


body{
    font-size: 10px;
    font-family: 'Montserrat',sans-serif;
    font-family: 'Roboto',sans-serif;
    /* font-family: 'NanumSquareNeoLight'; */
    font-family: 'NanumSquareNeo';
    /* font-family: 'NanumSquareNeoBold';
    font-family: 'NanumSquareNeoExtraBold';
    font-family: 'NanumSquareNeoHeavy'; */
    background: #fff;
    overflow-y: hidden;
    overflow-x: hidden;
    color: #000;
    
    /* display: flex; */
}

a{
    /* cursor: pointer; */
}

.sub{
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    /* justify-content: center; */
}
.container {
    position: relative;
    /* overflow: hidden; */
    /* display: flex; */
    /* max-width: 100%; */
    max-width: 970px;
    height: 800px;
    /* background: aqua; */
    margin-left: 10%;
    margin-top: 100px;
    }



.image, .map{
    position: absolute;
}
.chick{
    top: 249px;
    left: 446px;

}

.dog{
    top: 374px;
    left: 592px;

}


.shape{
    left: 310px;
    top: 100px;
}
.cloud{
    top: 54px;
    left: 754px;
}
.cloud1{
    top: 192px;
    left: 77px;
}
.kakao{
    top: 210px;
    left: 84px;
}
/* .image.on .ka{

    transform:translatex(5px);
}
.image.on .ka1{

    transform:translatex(-5px);
}
.ka, .ka1{
    transition: all 1s cubic-bezier(0, 0.7, 0.3, 1);
    mix-blend-mode: multiply;
    z-index: 0;
}

.ka{
    fill: cyan;
}

.ka1{
    fill: red;
}

.ka2{
    z-index: 100;
} */

.image.on .ka{
    fill: rgb(255, 255, 255);
    /* fill: transparent; */
    stroke: #000;
    stroke-width: 1;
    
}
.ka{
    transition: all .2s cubic-bezier(0, 0.7, 0.3, 1);
}


/* .image.shape.on{
    filter: drop-shadow(0 50px 37px rgba(255,216,0,0.5));
    -webkit-filter: drop-shadow(0 50px 37px rgba(255,216,0,0.5));
    } */


/* .image.shape.on.kkk1{
    top: 100px;
} */

.image.shape{
    filter: drop-shadow(0 0px 0px rgba(255,216,0,0.5));
    transition: all 1s cubic-bezier(0, 0.7, 0.3, 1);
    z-index: 0;
    }





.emot{
    top: 350px;
    left: 86px;
}
.balloon{
    top: 200px;
    left: 58px;
    animation: float 3s infinite both;
}
@keyframes float{
    0%{
      transform: translateY(0px);
    }
    50%{
      transform: translateY(15px);
    }
    100%{
      transform: translateY(0px);
    }
  }
.smile{
    z-index: 10;
    /* margin: 330px auto 200px; */
    
    display: block;
    pointer-events: none;
      /*content: "";*/
    position: absolute;
    /* margin-left: -80px; */
    /* padding: -90px; */
    top: 25px;
    left: 735px;
    width: 160px;
    height: 180px;
    /* margin: auto; */
    background-image: url("../img/emo1.png");
    background-size: cover;
    animation: smile 3s steps(120) infinite;
    /* animation-fill-mode: forwards; */
    /* mix-blend-mode: multiply; */
    filter: saturate(160%);
}
@keyframes smile {
    from { background-position:    0px; }
      to { background-position: -19200px; }
 }

.menubox{
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    z-index: 100;
    position: fixed;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    
}
.menu{
    right: 5%;
    text-align: left;
    position: fixed;
    font-size: 1rem;
    line-height: 2.5;
    overflow: hidden;
    font-weight: 700;

}
a{
    display: inline-block;
}

span {

    display: inline-block;
    transition: all .5s cubic-bezier(0, 0.7, 0.3, 1);
}

li a:before{
    /* background-color: rgb(255, 238, 0); */
    content: "";
    display: block;
    position: relative;
    width: 100%;
    height: 2px;
    bottom: -26px;
    left: 0;
    /* background: #333; */
    /* visibility: hidden; */
    /* border-radius: 30px; */
    transform: translate3d(-110%, 0, 0);
    transition: all .5s cubic-bezier(0, 0.7, 0.3, 1);
    /* opacity: 0; */
    
  }
li a:hover:before, a.on::before{
   background-color: rgba(0, 0, 0, 1);
    /* visibility: visible; */
    transform: translate3d(0, 0, 0);
    /* opacity: 100; */
}
.home a:hover:before, a.on::before{
    background-color: rgb(121 163 179);
     /* visibility: visible; */
     transform: translate3d(0, 0, 0);
     /* opacity: 100; */
 }

 .emoticon a:hover:before, .emoticon a.on::before{
    background-color: rgb(255, 216, 0);
     /* visibility: visible; */
     transform: translate3d(0, 0, 0);
     /* opacity: 100; */
 }

 .daummap a:hover:before, .daummap a.on::before{
    background-color: rgb(73 156 250);
     /* visibility: visible; */
     transform: translate3d(0, 0, 0);
     /* opacity: 100; */
 }

 .solcal a:hover:before, .solcal a.on::before{
    background-color: rgb(242 104 73);
     /* visibility: visible; */
     transform: translate3d(0, 0, 0);
     /* opacity: 100; */
 }

 .etc a:hover:before, .etc a.on::before{
    background-color: rgb( 0 0 0 );
     /* visibility: visible; */
     transform: translate3d(0, 0, 0);
     /* opacity: 100; */
 }






li a:hover span, a.on span{
    /* font-weight: 700; */
    /* color: #000; */
    transform: translateY(-5px);
    /* opacity: 100; */
}

.home a:hover span, .home .on span{
    /* font-weight: 700; */
    color: rgb(121 163 179);
    /* transform: translateY(-5px); */
    /* opacity: 100; */
}

.emoticon a:hover span, .emoticon .on span{
    /* font-weight: 700; */
    color: rgb(255, 216, 0);
    /* transform: translateY(-5px); */
    /* opacity: 100; */
}

.daummap a:hover span, .daummap .on span{
    /* font-weight: 700; */
    color: rgb(73 156 250);
    /* transform: translateY(-5px); */
    /* opacity: 100; */
}

.solcal a:hover span, .solcal .on span{
    /* font-weight: 700; */
    color: rgb(242 104 73);
    /* transform: translateY(-5px); */
    /* opacity: 100; */
}

.etc a:hover span, .etc .on span{
    /* font-weight: 700; */
    color: rgb(0 0 0 );
    /* transform: translateY(-5px); */
    /* opacity: 100; */
}







.fifth{
    width: 100vw;
    height: 100vh;
    
}
.zinoicon{
    width: 638px;
    height: 611px;
    background-image: url("../img/zinoicon.png");
    background-size: cover;
    position: relative;
    /* bottom: -700px; */
    margin: auto;
}




.home_img{
    width: 1339px;
    height: 1084px;
    top: -52px;
    left: 43px;
    position: absolute;
    transition: all 2s cubic-bezier(0, 0.5, 0.5, 1);
    filter: blur(1px);

}
.home_img.on{
    transform: scale(0.99) rotate(-1deg);
    transform-origin: 58% 36%;
    filter: blur(2px);
}
.home_top{
    z-index: 101;
    width: 349px;
    height: 564px;
    top: 34px;
    left: 470px;
    position: absolute;
    transition: all 2s cubic-bezier(0, 0.5, 0.5, 1);
    filter: blur(2px);

}
.home_top.on{
    transform: scale(1.03) rotate(-1deg);
    transform-origin: 58% 36%;
    filter: blur(0px);
}


.home_top_a{
    z-index: 101;
    width: 76px;
    height: 100px;
    top: 294px;
    left: 790px;
    position: absolute;
    transition: all 4s cubic-bezier(0, 0.5, 0.5, 1);
    filter: blur(2px);

}
.home_top_a.on{
    transform: scale(1.05) rotate(7deg);
    transform-origin: 58% 36%;
    filter: blur(0px);
    
}

.circle{
        z-index: 10;
        /* margin: 330px auto 200px; */
        
        display: block;
        pointer-events: none;
          /*content: "";*/
        position: absolute;
        /* margin-left: -80px; */
        /* padding: -90px; */
        top: 202px;
        left: 610px;
        width: 450px;
        height: 315px;
        /* margin: auto; */
        background-image: url("../img/circle3_1x.png");
        /* background-size: cover; */
        animation: circle_on 4s steps(119) alternate infinite;
        animation-fill-mode: forwards;
        animation-delay: 2s;
        transition: all 3s cubic-bezier(0, 0.5, 0.5, 1);
}
.circle.on{
    transform: scale(1.01) rotate(-5deg);
    transform-origin: 40% 50%;
    /* box-shadow: 0px 29px 35px -13px rgba(0,0,0,0.1); */
    filter: blur(2px);
}

.circle-1{
    filter: blur(4px) opacity(0.02) brightness(0%);
    opacity: 0;
    z-index: 9;
    /* margin: 330px auto 200px; */
    
    display: block;
    pointer-events: none;
      /*content: "";*/
    position: absolute;
    /* margin-left: -80px; */
    /* padding: -90px; */
    top: 202px;
    left: 610px;
    width: 450px;
    height: 315px;
    /* margin: auto; */
    background-image: url("../img/circle3_1x.png");
    background-size: cover;
    animation: circle_on 4s steps(119) alternate infinite;
    animation-fill-mode: forwards;
    animation-delay: 2s;
    transition: all 3s cubic-bezier(0, 0.5, 0.5, 1);
}
.circle-1.on{
    top: 230px;
    opacity: 1;
    transform: scale(1.01) rotate(-5deg);
    transform-origin: 40% 50%;
    /* box-shadow: 0px 29px 35px -13px rgba(0,0,0,0.1); */
}
.zin{
    z-index: 10;
    /* margin: 330px auto 200px; */
    
    display: block;
    pointer-events: none;
      /*content: "";*/
    position: absolute;
    /* margin-left: -80px; */
    /* padding: -90px; */
    top: 209px;
    left: -7px;
    width: 591px;
    height: 300px;
    /* margin: auto; */
    background-image: url("../img/main/zin.svg");
    background-size: cover;
    transition: all 2s cubic-bezier(0, 0.5, 0.5, 1);
}
.zin.on{
    transform: scale(1.01);
    transform-origin: 130% 50%;
    /* box-shadow: 0px 29px 35px -13px rgba(0,0,0,0.1); */
    filter: blur(2px);
}


.zin2{
    z-index: 10;
    /* margin: 330px auto 200px; */
    
    display: block;
    pointer-events: none;
      /*content: "";*/
    position: absolute;
    /* margin-left: -80px; */
    /* padding: -90px; */
    top: 209px;
    left: -7px;
    width: 591px;
    height: 300px;
    /* margin: auto; */
    background-image: url("../img/main/zin2.svg");
    background-size: cover;
    transition: all 2s cubic-bezier(0, 0.5, 0.5, 1);
}
.zin2.on{
    transform: scale(1.01);
    transform-origin: 130% 50%;
    /* box-shadow: 0px 29px 35px -13px rgba(0,0,0,0.1); */
    filter: blur(2px);
    opacity: 0.1;
}

.zino-line{
    z-index: 10;
    display: block;
    position: relative;
    width: 0px;
    height: 2px;
    background-color: #a6bcc3;
    /* background: linear-gradient(to right, #3b485d, #a6bcc3); */
    top: 310px;
    left: 0px;
    transition: all 2s cubic-bezier(0, 1, 0, 1);

}

.zino-line.on{

    width: 930px;

    /* transform: scale(1.01); */
    /* transform-origin: 130% 50%; */
    /* box-shadow: 0px 29px 35px -13px rgba(0,0,0,0.1); */
    filter: blur(2px);
}

@keyframes circle_on {
    from { background-position:    0px; }
      to { background-position: -53550px; }
 }
 @keyframes circle_off {
    from { background-position:    0px; }
      to { background-position: -53550px; }
 }








/* .home a:hover:before,.home a.on:before {
    background-color: #d9e7ea;
}

.daummap a:hover:before,.daummap a.on:before {
    background-color: #d9e7ea;
}

.solcal a:hover:before,.solcal a.on:before {
    background-color: #d9e7ea;
} */

.typo{
    opacity: 0.6;
    z-index: 5;
    /* margin: 330px auto 200px; */
    
    display: block;
    pointer-events: none;
      /*content: "";*/
    position: absolute;
    /* margin-left: -80px; */
    /* padding: -90px; */
    top: 202px;
    left: 830px;
    width: 700px;
    height: 300px;
    /* margin: auto; */
    background-image: url("../img/typo.png");
    background-size: cover;
    animation: typo_on 2s steps(240) alternate infinite;
    animation-fill-mode: forwards;
    /* animation-delay: 2s; */
    transition: all 2s cubic-bezier(0, 0.5, 0.5, 1);
}

@keyframes typo_on {
    from { background-position:    0px; }
      to { background-position: -168000px; }
 }
 .typo.on{
    transform: scale(0.99);
    transform-origin: -10% 50%;
    filter: blur(2px);

}





.buildings{
    top: 249px;
    left: 446px;
}
.bus{
    top: 249px;
    left: 446px;
}
.line{
    top: 249px;
    left: 446px;
}
.mt{
    top: 249px;
    left: 446px;
}
.mt2{
    top: 249px;
    left: 446px;
}
.pin{
    top: 249px;
    left: 446px;
}
.a1{
    top: 249px;
    left: 446px;
}
.a2{
    top: 249px;
    left: 446px;
}
.a3{
    top: 249px;
    left: 446px;
}
.a4{
    top: 249px;
    left: 446px;
}
.a5{
    top: 249px;
    left: 446px;
}
.a6{
    top: 249px;
    left: 446px;
}
.a7{
    top: 249px;
    left: 446px;
}
.a8{
    top: 249px;
    left: 446px;
}
.a9{
    top: 249px;
    left: 446px;
}
.a10{
    top: 249px;
    left: 446px;
}

/* .daummapbg{
    width: 2000px;
    height: 1400px;
    background-image: url("../img/map.png");
    background-size: cover;
} */


/* 세번째 */

.눈{

    width: 40px;
    height: 40px;
    /* border: 4px solid black; */
    /* border-radius: 50%; */
    background-color: transparent;
    position: absolute;
    /* left: 0; */
    top: 850px;
    left: 345px;
}




.eyes{
    z-index: 100;
    display: block;
    position: absolute;
    width: 28px;
    height: 40px;

    left: 5px;
    background-color: transparent;
}


.eyes::after{
    left: 0;
    bottom: 0;
    width: inherit;
    content: '';
    display: block;
    position: absolute;
    height: 28px;
    background-color: #428cfb;
    BORDER-RADIUS: 100%;
    /* top: 176px;
    left: 380px; */
    /* opacity: .5; */
}
.eyes::before{
    left: -4px;
    bottom: -4px;

    content: '';
    display: block;
    position: absolute;
    height: 36px;
    width: 36px;
    background: linear-gradient(#eaeaea, #ffffff);
    BORDER-RADIUS: 100%;
    /* top: 176px;
    left: 380px; */
    /* opacity: .5; */
}
.eyesbg{
    display: block;
    position: absolute;
    width: 37px;
    height: 37px;
    background-color: #ffffff;
    BORDER-RADIUS: 100%;
    top: 856px;
    left: 346px;
    opacity: 1;
}


.daummapbg{
    position: absolute;
    text-align: center;
    display:flex;
    justify-content:center;
    align-items:center;
    /* background-image: url("../img/map.png"); */
    /* background-size: cover; */
}

.daummapbg1{
    width: 2000px;
    height: 1400px;  
    margin-left: -200px;
    margin-right: auto;

    
}
.jul{
    width: 10000px;
    height: 8px;  
    background-color: #fc615f;
    position: relative;
    /* margin-left: -80px; */
    /* padding: -90px; */
    top: 207px;
}






/* 팝업창 */

/* .home_popup{
    display: none;
    vertical-align: middle;
    font-family: 'Nanum NanumSquareNeo', sans-serif;
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.6;
    position:fixed;
	left: 0;
    top: 0;
    width: 850px;
    height: 1000px;
    z-index:10000;
    margin:0 auto;
    background-color:rgba(255, 255, 255, 1);
    border-radius:5px;
    overflow-x: hidden ;}

#popup.open {
    display:block;
} */







.home_text{
    
    /* top: (100vh/2-200)px; */
    letter-spacing: -0.6px;
    font-size: 14px;
    margin: 120px auto;
    width: 500px;
}


.home_text p{
    padding: 0 0 14px 0;
}

.aaa{
    text-indent: 0em;
}

.btn_close_layer {
    overflow: hidden;
    font-weight: 400;
    font-size: 1rem;
    position: relative;

    /* right: 100px; */
    top: 30px;
    transition: all .5s cubic-bezier(0, 0.7, 0.3, 1);
  }








    .btn_close_layer:before {
    /* background-color: rgb(255, 238, 0); */
    content: "";
    display: block;
    position: relative;
    width: 100%;
    bottom: -32px;
    left: 0;
    /* background: #333; */
    /* visibility: hidden; */
    /* border-radius: 30px; */
    transform: translate3d(-110%, 0, 0);    
    height: 1px;
    bottom: -32px;
    transition: all .5s cubic-bezier(0, 0.7, 0.3, 1);
    /* opacity: 0; */
    
  }
    .btn_close_layer:hover:before{
   background-color: rgb(0, 0, 0);
    /* visibility: visible; */
    transform: translate3d(0, 0, 0);
    /* opacity: 100; */
}
    .btn_close_layer:hover{
    /* font-weight: 900; */
    color: #000;
    transform: translateY(-3px);
    /* opacity: 100; */
}


span.home_title{
    /* font-family: 'Nanum NanumSquareNeoBold', sans-serif; */
    letter-spacing: -1px;
    font-size: 1.5rem;
    font-weight: 600;
    display: block;
    margin: 70px 0 30PX;
}
span.home_title.subtitle{
    /* font-family: 'Nanum NanumSquareNeoBold', sans-serif; */
    letter-spacing: -1px;
    font-size: 1.2rem;
    font-weight: 400;
    display: block;
    margin: 30px 0 15px;
}

p.eng{
    /* font-family: 'Montserrat','Nanum Gothic', sans-serif; */
    font-weight: 400;
    font-size: 0.8rem;
    padding: 0 0 2px 0;
    letter-spacing: -0px;
}



/* 팝업 */
.modalMask {
    cursor: pointer;
	display: none;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 8000;
    background-color: rgba(0,0,0,.8);
    
}




/* 팝업1 */

.popup2_text{
    
    /* top: (100vh/2-200)px; */
    letter-spacing: -0.6px;
    font-size: 24px;
    margin-left: 118px;
    margin-top: -90px;
    /* margin-bottom: 10px; */

    width: 100;
}


p.eng.p1{
    /* font-family: 'Montserrat','Nanum Gothic', sans-serif; */
    font-weight: 500;
    font-size: 1.4em;
    padding: 0;
    letter-spacing: 0.5px;
    /* border-bottom: 1px solid #e0e0e0; */
    margin: 0 80px;
    /* padding-bottom: 10px; */
    color: #fff;
}


#popup1{
    display: none;
    vertical-align: middle;
    /* text-align: center; */
    /* font-family: 'Nanum Gothic', sans-serif; */
    font-weight: 500;
    font-size: 1rem;
    line-height: 2;
    position:fixed;
	left: 0;
    top: 0;
    width: 1600px;
    /* height: 850px; */
    z-index:10000;
    margin:70px auto;
    /* height:auto; */
    background-color:rgba(255, 255, 255, 0);
    border-radius:5px;
    overflow: inherit;
}
#popup1.open {
    display:block;
}


.btn_close_layer.p1{
    overflow: hidden;
    font-weight: 100;
    font-size: 1rem;
    position: absolute;
    color: #fff;
    /* right: 100px; */
    /* margin: 0px 500px 30px; */
    top: -53px;
    /* left: 360px; */
    right: 200px;
    transition: all .5s cubic-bezier(0, 0.7, 0.3, 1);
  }

  .btn_close_layer.p1:before {
    /* background-color: rgb(255, 238, 0); */
    content: "";
    display: block;
    position: relative;
    width: 100%;
    bottom: -32px;
    left: 0;
    /* background: #333; */
    /* visibility: hidden; */
    /* border-radius: 30px; */
    transform: translate3d(-110%, 0, 0);    
    height: 1px;
    bottom: -32px;
    transition: all .5s cubic-bezier(0, 0.7, 0.3, 1);
    /* opacity: 0; */
    
  }
    .btn_close_layer.p1:hover:before{
   background-color: #fff;
    /* visibility: visible; */
    transform: translate3d(0, 0, 0);
    /* opacity: 100; */
}
    .btn_close_layer.p1:hover{
    /* font-weight: 900; */
    color: #fff;
    transform: translateY(-3px);
    /* opacity: 100; */
}




.mac{
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
}

.emoproto{
    left: 290px;
    top: 170px;
    position: absolute;
}


.zzz {
    position: relative;
    /* font-family: 'Montserrat',  'Nanum Gothic',sans-serif; */
    color: #000;
/* text-align: left; */
    margin-left: 6px;
    /* margin-top: 6px; */
    overflow: hidden;
    font-weight: 600;
    font-size: .7rem;
    /* position: relative; */

    /* right: 100px; */
    top: 3px;
    transition: all .5s cubic-bezier(0, 0.7, 0.3, 1);
  }






.zzz:before {

content: "";
display: block;
position: relative;
left: 0;

transform: translate3d(-110%, 0, 0);    
height: 1px;
bottom: -22px;
transition: all .5s cubic-bezier(0, 0.7, 0.3, 1);


}
.zzz:hover:before{
background-color: rgb(0, 0, 0);

transform: translate3d(0, 0, 0);

}
.zzz:hover{

color: #000;
transform: translateY(-3px);

}


.sub.fourth{
    display: flex;
    width: 100vw;
    height: 100vh;
    background-color: #ffe84c;
    text-align: center;
    align-items: flex-end;
    justify-content: center;
    position: absolute;
}

.desk{
    width: 700px;
    height: 470px;
    background-image: url("../img/desk.png");
    background-size: cover;
    position: absolute;
    /* bottom: 530px; */
    margin: auto;
    z-index: 1000;
}

.working{
    position: absolute;
    /* background-color: #fc615f; */
    /* top: 0px; */
    line-height: 1.4;
    font-weight: 700; 
    font-family: 'Nanum Gothic','NanumBarunGothic', sans-serif;
    margin: 0 auto;
    font-size: 2rem;
    letter-spacing : -2px;
    color: #000;
    vertical-align: middle;
    bottom: 460px;

}