@charset utf-8;

html,body {
    height:100%;
    overflow-y:hidden;
}

/*폰트*/
body {
    position:relative;
    min-width:1200px;
    font-family: 'NanumSquare', sans-serif;
    color:#333;
    background:#FFF;
}
/*폰트*/



.posNum {
    position:fixed;
    left:50%;
    top:50%;
    width:300px;
    height:50px;
    background:#111;
    color:#fff;
    font-size:20px;
    font-weight:700;
    text-align:center;
    line-height:50px;
    z-index:9999;
    margin:-25px 0 0 -150px;
}

.scrollBox {
    min-width:1200px;
    height:100%;
    position:relative;
}

.scrollBox .wrap {
    min-width:1200px;
    position:relative;
    overflow:hidden;
}

.scrollBox .wrap>div {
    position:relative;
}

.scrollBox .wrap .objs>li {
    position:absolute;
    left:50%;
}

#header {
    height:106px;
    position:relative;
    /*background: #56c271;*/

}

#header .inner {
    width:1426px;
    height:106px;
    left:50%;
    margin-left:-713px;
    position:relative;
    /*background: gainsboro;*/
}

.mainlogo {
    width:302px;
    height:105px;
    position:absolute;
    left:0;
    top:-2px;
    background:url(../img/logo2.png);
    transition: all 0.35s;
}


.mainlogo a{
    display:block;
    width:100%;
    height:100%;
}


.gnb1 {
    width:197px;
    height:106px;
    position:absolute;
    right:591px;
    top:0px;
    background:url(../img/gnb1_hover.jpg);
}
.gnb1:hover {
    background:url(../img/gnb1.jpg);
}

.gnb1 .hover{
    width:197px;
    height:0px;
    position:absolute;
    right:0px;
    top:106px;
    background:white;
    z-index: 9999;
    overflow: hidden;
}

.gnb1 .hover > div{
    width:110px;
    height:18px;
    margin-top: 30px;
    margin-left: 42px;
}
.gnb1 .hover .sub01{
    background:url(../img/gnb1_1.png);
}
.gnb1 .hover .sub01:hover {
    background:url(../img/gnb1_1_cover.png);
}

.gnb1 .hover .sub02{
    background:url(../img/gnb1_2.png);
}
.gnb1 .hover .sub02:hover {
    background:url(../img/gnb1_2_cover.png);
}


.gnb1 .hover .sub03{
    background:url(../img/gnb1_3.png);
}
.gnb1 .hover .sub03:hover {
    background:url(../img/gnb1_3_cover.png);
}

.gnb1 .hover .sub04{
    background:url(../img/gnb1_4.png);
}

.gnb1 .hover .sub04:hover {
    background:url(../img/gnb1_4_cover.png);
}
#header .inner .gnb1 > a{
    display:block;
    width:100%;
    height:100%;
}
#header .inner .gnb1 div > a{
    display:block;
    width:100%;
    height:100%;
}




.gnb2 {
    width:197px;
    height:106px;
    position:absolute;
    right:394px;
    top:0px;
    background:url(../img/gnb2_hover.png);
}
.gnb2:hover {
    background:url(../img/gnb2.png);
}


.gnb2 .hover{
    width:197px;
    height:0px;
    position:absolute;
    right:0px;
    top:106px;
    background:white;
    z-index: 9999;
    overflow: hidden;
}

#header .inner .gnb2 > a{
    display:block;
    width:100%;
    height:100%;
}

.gnb3 {
    width:197px;
    height:106px;
    position:absolute;
    right:197px;
    top:0px;
    background:url(../img/gnb3_b_1.png);
}
.gnb3:hover {
    background:url(../img/gnb3_g_1.png);
}

.gnb3 .hover{
    width:197px;
    height:0px;
    position:absolute;
    right:0px;
    top:106px;
    background:white;
    z-index: 9999;
    overflow: hidden;
}

.gnb3 .hover > div{
    width:120px;
    height:18px;
    margin-top: 30px;
    margin-left: 40px;
}
.gnb3 .hover .sub01{
    background:url(../img/gnb3_1.png);
}
.gnb3 .hover .sub01:hover {
    background:url(../img/gnb3_1_hover.png);
}

.gnb3 .hover .sub02{
    background:url(../img/gnb3_2.png);
    margin-left: 38px;
}
.gnb3 .hover .sub02:hover {
    background:url(../img/gnb3_2_hover.png);
}

.gnb3 .hover .sub03{
    background:url(../img/gnb3_3.png);
}
.gnb3 .hover .sub03:hover {
    background:url(../img/gnb3_3_hover.png);
}

.gnb3 .hover .sub04{
    background:url(../img/gnb3_4.png);
}

.gnb3 .hover .sub04:hover {
    background:url(../img/gnb3_4_hover.png);
}

.gnb3 .hover .sub05{
    background:url(../img/gnb3_5.png);
}

.gnb3 .hover .sub05:hover {
    background:url(../img/gnb3_5_hover.png);
}


#header .inner .gnb3 > a{
    display:block;
    width:100%;
    height:100%;
}
#header .inner .gnb3 div > a{
    display:block;
    width:100%;
    height:100%;
}





.gnb4 {
    width:197px;
    height:106px;
    position:absolute;
    right:0px;
    top:0px;
    background:url(../img/gnb4_hover.jpg);

}
.gnb4:hover {
    background:url(../img/gnb4.jpg);
}

.gnb4 .hover{
    width:197px;
    height:0;
    position:absolute;
    right:0px;
    top:106px;
    background:white;
    z-index: 9999;
    overflow: hidden;
}

.gnb4 .hover > div{
    width:110px;
    height:18px;
    margin-top: 30px;
    margin-left: 39px;
}
.gnb4 .hover .sub01{
    background:url(../img/gnb4_1.png);
}
.gnb4 .hover .sub01:hover {
    background:url(../img/gnb4_1_hover.png);
}

.gnb4 .hover .sub02{
    background:url(../img/gnb4_2.png);
}
.gnb4 .hover .sub02:hover {
    background:url(../img/gnb4_2_hover.png);
}

#header .inner .gnb4 > a{
    display:block;
    width:100%;
    height:100%;
}
#header .inner .gnb4 div > a{
    display:block;
    width:100%;
    height:100%;
}




.gnb4 {
    width:197px;
    height:106px;
    position:absolute;
    right:0px;
    top:0px;
    background:url(../img/gnb4_hover.jpg);

}
.gnb4:hover {
    background:url(../img/gnb4.jpg);
}

.gnb4 .hover{
    width:197px;
    height:0;
    position:absolute;
    right:0px;
    top:106px;
    background:white;
    z-index: 9999;
    overflow: hidden;
}

.gnb4 .hover > div{
    width:110px;
    height:18px;
    margin-top: 30px;
    margin-left: 39px;
}
.gnb4 .hover .sub01{
    background:url(../img/gnb4_1.png);
}
.gnb4 .hover .sub01:hover {
    background:url(../img/gnb4_1_hover.png);
}

.gnb4 .hover .sub02{
    background:url(../img/gnb4_2.png);
}
.gnb4 .hover .sub02:hover {
    background:url(../img/gnb4_2_hover.png);
}

#header .inner .gnb4 > a{
    display:block;
    width:100%;
    height:100%;
}
#header .inner .gnb4 div > a{
    display:block;
    width:100%;
    height:100%;
}







#scene1 {
    height:405px;
}

#scene1 .wrap {
    width:1920px;
    height:405px;
    left:50%;
    margin-left:-969px;
    position:relative;
    background:url(../img/sub3_banner1.jpg);
}

/*#scene1 .wrap div {*/
/*    background:url(../img/sub3_banner2.jpg);*/
/*    height:405px;*/
/*}*/


#t1 {
    position:absolute;
    width:1425px;
    height:100px;
    left: 50%;
    margin-left: -712px;
    /*background: darkkhaki;*/
    top:145px;
}

#scene1 .wrap #t1 .subtitle1 {
    font-weight: 600;
    z-index: 333;
    font-family: 'NanumSquare', sans-serif;
    text-align: center;
    font-size:46px;
    color: white;
}

#t2 {
    position:absolute;
    width:1425px;
    height:50px;
    left: 50%;
    margin-left: -712px;
    /*background: #56c271;*/
    top:230px;
}
#scene1 .wrap #t2 .subtitle2 {
    font-weight: 300;
    z-index: 333;
    font-family: 'NanumSquare', sans-serif;
    text-align: center;
    font-size:36px;
    color: white;
}


/*폰트*/

/*#scene1 .wrap .subtitle1 {*/
/*    font-weight: 600;*/
/*    z-index: 333;*/
/*    position:absolute;*/
/*    top: 145px;*/
/*    font-size:46px;*/
/*    left: 50%;*/
/*    margin-left:-83px;*/
/*}*/

/*#scene1 .wrap .subtitle2 {*/
/*    font-weight: 300;*/
/*    z-index: 333;*/
/*    position:absolute;*/
/*    top: 230px;*/
/*    font-size:36px;*/
/*    left: 50%;*/
/*    margin-left:-82px;*/
/*}*/

/*#scene1 .wrap #1 .subtitle1 {*/
/*    font-weight: 600;*/
/*    z-index: 333;*/
/*    position:absolute;*/
/*    top: 145px;*/
/*    font-size:46px;*/
/*    left: 50%;*/
/*    margin-left:-83px;*/
/*    color: white;*/
/*}*/

/*#scene1 .wrap #2 .subtitle2 {*/
/*    font-weight: 300;*/
/*    z-index: 333;*/
/*    position:absolute;*/
/*    top: 230px;*/
/*    font-size:36px;*/
/*    left: 50%;*/
/*    margin-left:-82px;*/
/*    color: white;*/
/*}*/




/*폰트*/
#scene1 .wrap .font {
    z-index: 999999;
    /*margin-top: 360px;*/
    right:240px;
    bottom:23px;
    position:absolute;
    font-family: "Nanum Gothic";
}
/*폰트*/



/*서브메뉴*/
#menu {
    top: 511px;
    width: 100%;
    height:76px;
    background:url(../img/sub_2_menu.jpg);
    z-index: 999999;
    transition: all 0s;
    position:absolute;
}
#menu.on{
    position:fixed;
    top: 0px;
}


#menu .wrap {
    width:1425px;
    height:76px;
    left:50%;
    margin-left:-712px;
    position:relative;
}

#menu .wrap > div{
    width:357px;
    height:76px;
}

#menu .wrap .sub1 {
    background:url(../img/sub_2_menu_1_new.jpg);
    height:76px;
    margin-left:1px;
}
#menu .wrap .sub1:hover{
    background:url(../img/sub_2_menu_1_new_h.jpg);
}
#menu .wrap .sub2 {
    background:url(../img/sub_2_menu_2_new.jpg);
    height:76px;
    position: absolute;
    top:0;
    margin-left:356px;
}
#menu .wrap .sub2:hover{
    background:url(../img/sub_2_menu_2_new_h.jpg);
}
#menu .wrap .sub3 {
    background:url(../img/sub_2_menu_3_new_h.jpg);
    height:76px;
    position: absolute;
    top:0;
    right:356px;
}
#menu .wrap .sub3:hover{
    background:url(../img/sub_2_menu_3_new_h.jpg);
}

#menu .wrap .sub4 {
    background:url(../img/sub_2_menu_4_new.jpg);
    height:76px;
    position: absolute;
    top:0;
    right:0;
}
#menu .wrap .sub4:hover{
    background:url(../img/sub_2_menu_4_new_h.jpg);
}

#menu .wrap > div > a{
    display:block;
    width:100%;
    height:100%;
}






#scene2 {
    height:825px;
    margin-top:76px;
}

#scene2 .wrap {
    width: 1920px;
    height: 900px;
    left: 50%;
    margin-left: -969px;
    position: relative;
    background: #efefef;
}

#scene2 .wrap .subtitle1 {
    background: url(../img/sub2_contents3.jpg)no-repeat;
    width: 1920px;
    height: 825px;
    left: 10px;
    top: 0;
    position: absolute;
}

.go1 {
    background:url(../img/go1.jpg);
    width:195px;
    height:61px;
    position: absolute;
    top:630px;
    left: 247px;
}




#scene2 .wrap .subtitle1 section > a{
    display:block;
    width:100%;
    height:100%;
}











#scene3{
    position: relative;
    background: #e4e4e4;
    height: 485px;
}



.slidecontainer {
    margin-top: 65px;
    height: 24px;
    width: 1426px;
    left: 50%;
    position: absolute;
    margin-left: -713px;
}
.pictitle {
    background:url(../img/pic_title.png) no-repeat;
    width: 182px;
    height: 24px;
}




#slides {
    /*display: none*/
}

.container {
    width: 1425px;
    left: 50%;
    margin-left: -717px;
    position: relative;
    height: 380px;
}


/*@media (min-width: 1425px) {*/
/*    .container {*/
/*        width: 1425px*/
/*    }*/
/*}*/


.contents1{
    margin-top: 35px;
}
.contents2{
    margin-top: 35px;
}

.contents1 > li{
    float: left;
    margin-left: 20px;
}
.contents2 > li{
    float: left;
    margin-left: 20px;
}
.contents1 > li:nth-child(1){
    margin-left: 62px;
    float: left;
}
.contents3 > li:nth-child(1){
    margin-left: 62px;
    float: left;
}


ul li > div {
    width: 310px;
    height: 310px;
    overflow: hidden;
    position: relative;
    /*background: #f3f3f3;*/
    cursor: pointer;
}

.w div > img{
    max-height:310px;
    display: block;
    right: 50%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
}

.h div > img{
    max-width:310px;
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
}





.popup_container{
    z-index:9999999999999;
    display: none;

}


#popup {
    width:100%;
    height:100%;
    background:rgba(0,0,0,.5);
    overflow:hidden;
    position:fixed;
    left:0;
    top:0;
    z-index:999999999999999;
}

#center{
    position:absolute;
    height: 1000px;
    width: 1000px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    top:50%;
    margin-top: -500px;
    left: 50%;
    margin-left: -500px;
}

#center img {
    max-width: 1000px;
    max-height: 1000px;
    margin: 0 auto;
    /*display: block;*/
    position: relative;
    display: none;
}


#bigpic1.on{
    display: block;
}
#bigpic2.on{
    display: block;
}
#bigpic3.on{
    display: block;
}
#bigpic4.on{
    display: block;
}
#bigpic5.on{
    display: block;
}
#bigpic6.on{
    display: block;
}
#bigpic7.on{
    display: block;
}
#bigpic8.on{
    display: block;
}



#center .popup_pre > article{
    background: url(../img/pre2.png);
    opacity: 1;
    width: 40px;
    height: 80px;
    left:-60px;
    top:50%;
    margin-top: -50px;
    z-index: 9999999;
    position: absolute;
    cursor: pointer;
}

.popup_pre1{display: none;}
.popup_pre1.on{display: block;}
.popup_pre2{display: none;}
.popup_pre2.on{display: block;}
.popup_pre3{display: none;}
.popup_pre3.on{display: block;}
.popup_pre4{display: none;}
.popup_pre4.on{display: block;}
.popup_pre5{display: none;}
.popup_pre5.on{display: block;}
.popup_pre6{display: none;}
.popup_pre6.on{display: block;}
.popup_pre7{display: none;}
.popup_pre7.on{display: block;}
.popup_pre8{display: none;}
.popup_pre8.on{display: block;}


#center .popup_next > article{
    background: url(../img/next2.png);
    opacity: 1;
    width: 40px;
    height: 80px;
    margin-top: -50px;
    right:-60px;
    z-index: 9999999;
    top:50%;
    position: absolute;
    cursor: pointer;
}
/*#center .popup_next:hover {*/
/*    opacity: 1;*/
/*}*/

.popup_next1{display: none;}
.popup_next1.on{display: block;}
.popup_next2{display: none;}
.popup_next2.on{display: block;}
.popup_next3{display: none;}
.popup_next3.on{display: block;}
.popup_next4{display: none;}
.popup_next4.on{display: block;}
.popup_next5{display: none;}
.popup_next5.on{display: block;}
.popup_next6{display: none;}
.popup_next6.on{display: block;}
.popup_next7{display: none;}
.popup_next7.on{display: block;}
.popup_next8{display: none;}
.popup_next8.on{display: block;}




#center #close{
    /*background: darkkhaki;*/
    width: 30px;
    right:0;
    z-index: 9999;
    position: absolute;
    left: 50%;
}
#close .btn{
    background:url(../img/close_w2.png);
    width: 40px;
    height: 40px;
    z-index: 9999;
    right: 0;
    cursor: pointer;
    margin-top: 10px;
}





#slides{
    display: none;
}

.slidesjs-navigation {
    z-index: 100;
}

.slidesjs-previous {
    width: 40px;
    height: 80px;
    background:url(../img/pre.png);
    position: absolute;
    left:0;
    top:50%;
    margin-top: -40px;
}

.slidesjs-next {
    margin-left: 1100px;
    width: 40px;
    height: 80px;
    background:url(../img/next.png);
    position: absolute;
    right:0;
    top:50%;
    margin-top: -40px;
}










#scene4 {
    width: 100%;
    position:relative;
}

#scene4 .wrap {
    height: 1250px;
    width:1425px;
    left:50%;
    margin-left:-712px;
    /*background: lightyellow;*/
}



#scene4 .wrap #s4subtitle_box{
    left:50%;
    margin-left:-700px;
    width:1400px;
    height: 40px;
    top:132px;
    position: absolute;
}
#scene4 .wrap #s4subtitle_box .subtitle1{
    font-family: 'NanumSquare', sans-serif;
    font-size: 28pt;
    font-weight: 800;
    text-align: center;
    color: #292929;
}
#scene4 .wrap #s4subtitle_box2{
    left:50%;
    margin-left:-700px;
    width:1400px;
    height: 40px;
    top:220px;
    position: absolute;
}
#scene4 .wrap #s4subtitle_box2 .subtitle2{
    font-family: 'NanumSquare', sans-serif;
    font-size: 13pt;
    font-weight: 500;
    text-align: center;
    color: #3d3d3d;
}





.lnb2 {
    transition: all 0s;
    position: absolute;
    left: 50%;
    z-index: 99;
    top: 380px;
    width: 1426px;
    margin-left: -711px;
    cursor: pointer;
}



.lnb2 ul{width:100%; }
.lnb2 ul:after{display:block; clear:both; content:"";}
.lnb2 li{float:left; width: 49.9%; height:60px; box-sizing:border-box;}
.lnb2 li section{display:block; width:100%; height:60px;
    margin-left:-1px; border-top:1px solid #ccc; border-right:1px solid #ccc;
    border-bottom:1px solid #ccc; border-bottom: 1px solid #48a674;
    background:#f3f3f3; line-height:58px; font-size:18px; color:#333;
    text-align:center; box-sizing:border-box;}
.lnb2 li:first-child section{border-left:1px solid #ccc;}

/*.lnb li.up{margin-left:-1px;}*/
.lnb2 li.on{margin-left:-1px;}
.lnb2 li.on:first-child{margin-left:0;}
.lnb2 li.on section{background:#fff; border-left:1px solid #48a674;


    border-color:#48a674; border-width:1px 1px 0 1px; color:#48a674; font-weight:600;}
.lnb_list1 li{float:none; width:100%;}
.lnb_list2 li{width:50%;}
.lnb_list3 li{width:33.3%;}
.lnb_list4 li{width:25%;}
.lnb_list5 li{width:20%;}


/*.lnb > section{*/
/*    display:block;*/
/*    width:100%;*/
/*    height:100%;*/
/*    cursor: pointer;*/
/*}*/





#scene4 .wrap .flow{
    height: 717px;
    width:1425px;
    left:0;
    position: absolute;
    top:500px;
    display: block;
}

#scene4 .wrap .flow.none{
display: none;
}

#scene4 .wrap .flow .move {
margin-left: 100px;
}



#scene4 .wrap .flow #moisture{
    opacity: 0;
    transition: 1s;
}
#scene4 .wrap .flow #moisture.on{
    opacity: 1;
}

#scene4 .wrap .flow #moisture > div{
    width: 263px;
    height: 157px;
    position: absolute;
    transform: scale(0.6,0.6);
    z-index: 555;
}

#scene4 .wrap .flow .moisture1{
    background: url("../img/moisture2.png") no-repeat;
    left: -20px;
    top: 560px;
    opacity: 0.5;
    animation:icon5 1.2s infinite alternate ease-out
}
@keyframes icon5 {
    0% {
        top:530px
    }
    100% {
    ;
        top:500px
    }
}
#scene4 .wrap .flow .moisture2{
    background: url("../img/moisture3.png") no-repeat;
    left: -20px;
    top: 560px;
    animation:icon5 1.0s infinite alternate ease-out
}

#scene4 .wrap .flow .moisture3{
    background: url("../img/moisture4.png") no-repeat;
    left: -20px;
    top: 560px;
    opacity: 0.3;
    animation:icon5 1.4s infinite alternate ease-out
}


#scene4 .wrap .flow #moisture02{
    opacity: 0;
    transition: 1s 2s;
}
#scene4 .wrap .flow #moisture02.on{
    opacity: 1;
}

#scene4 .wrap .flow #moisture02 > div{
    width: 263px;
    height: 157px;
    position: absolute;
    transform: scale(0.6,0.6);
    z-index: 166;
}

#scene4 .wrap .flow .moisture4{
    background: url("../img/moisture2.png") no-repeat;
    left: 400px;
    top: 560px;
    opacity: 0.5;
    animation:icon05 1.2s infinite alternate ease-out
}
@keyframes icon05 {
    0% {
        top:380px
    }
    100% {
    ;
        top:360px
    }
}
#scene4 .wrap .flow .moisture5{
    background: url("../img/moisture3.png") no-repeat;
    left: 400px;
    top: 560px;
    animation:icon05 1.0s infinite alternate ease-out
}

#scene4 .wrap .flow .moisture6{
    background: url("../img/moisture4.png") no-repeat;
    left: 400px;
    top: 560px;
    opacity: 0.3;
    animation:icon05 1.4s infinite alternate ease-out
}


#scene4 .wrap .flow .step1{
    width: 242px;
    height: 94px;
    background: url(../img/s1.png) no-repeat 0 0;
    overflow: hidden;
    position: absolute;
    left: -19px;
    top: 580px;
    transform: scale(0.7);
    z-index: 400;
    animation: ani1 1s steps(30) ;
    animation-fill-mode: forwards;
    display: none;
}

#scene4 .wrap .flow .step1.on {
    display: block;
}

@keyframes ani1 {
    to {
        background-position: -7260px;
        /*전체이미지 길이에서 하나 좌우값만큼 빼고*/
    }
}


#scene4 .wrap .flow .moistairin{
    width:97px;
    height:13px;
    background:url(../img/moistairin.png);
    left: 40px;
    bottom: 80px;
    position:absolute;
    z-index: 401;
    animation: fade-in 1s;
    animation-delay: 0.2s;
    animation-fill-mode: forwards;
}




#scene4 .text_1 .filter_1{
    width: 79px;
    height: 63px;
    background: url(../img/filter_1.png);
    left: 955px;
    bottom: 433px;
    position: absolute;
    z-index: 888;
    opacity: 0.7;
    transform: scale(0.8,0.8);
}
#scene4 .text_1 .filter_2{
    width: 79px;
    height: 63px;
    background: url(../img/filter_1.png);
    left: 855px;
    bottom: 397px;
    position: absolute;
    z-index: 888;
    opacity: 0.7;
    transform: scale(0.8,0.8);
}
#scene4 .text_1 .filter_3{
    width: 79px;
    height: 63px;
    background: url(../img/filter_1.png);
    left: 245px;
    bottom: 207px;
    position: absolute;
    z-index: 888;
    opacity: 0.7;
    transform: scale(0.8,0.8);
}

#scene4 .wrap  .flow .filter1{
    background:url(../img/filter.png);
    width: 162px;
    height: 188px;
    left: 130px;
    top: 480px;
    position: absolute;
    z-index: 300;
    transform: scale(0.8,0.8);
}

#scene4 .wrap .flow .step1_2{
    width: 242px;
    height: 94px;
    background: url(../img/s1_3.png) no-repeat 0 0;
    overflow: hidden;
    position: absolute;
    left: 165px;
    top: 510px;
    transform: scale(0.7);
    z-index: 188;
    animation: ani1_2 0.4s steps(9);
    animation-delay: 0.93s;
    animation-fill-mode: forwards;
    display: none;
}

#scene4 .wrap .flow .step1_2.on {
    display: block;
}

@keyframes ani1_2 {
    to {
        background-position: -2178px;
        /*전체이미지 길이에서 하나 좌우값만큼 빼고*/
    }
}

#scene4 .wrap .flow .step1_3{
    width: 242px;
    height: 94px;
    background: url(../img/s1_3.png) no-repeat 0 0;
    overflow: hidden;
    position: absolute;
    left: 265px;
    top: 478px;
    transform: scale(0.7);
    z-index: 166;
    animation: ani1_2 0.4s steps(9);
    animation-delay: 1.3s;
    animation-fill-mode: forwards;
    display: none;
}

#scene4 .wrap .flow .step1_3.on {
    display: block;
}



#scene4 .wrap .flow .step1_4{
    width: 242px;
    height: 94px;
    background: url(../img/s1.png) no-repeat 0 0;
    overflow: hidden;
    position: absolute;
    left: 410px;
    top: 422px;
    transform: scale(0.7);
    z-index: 155;
    animation: ani1 0.7s steps(15);
    display: none;
    animation-delay: 2s;
    animation-fill-mode: forwards;
}

#scene4 .wrap .flow .step1_4.on {
    display: block;
}


#scene4 .wrap .flow .up1{
    width: 251px;
    height: 357px;
    background: url(../img/up1.png) no-repeat 0 0;
    overflow: hidden;
    position: absolute;
    left: 446px;
    top: 218px;
    z-index: 155;
    opacity: 0.6;
    transform: scale(0.5);
    animation: up1 1.2s steps(50);
    display: none;
    animation-delay: 2.3s;
    animation-fill-mode: forwards;
}

#scene4 .wrap .flow .up1.on {
    display: block;
}


@keyframes up1 {
    to {
        background-position: -12550px;
        /*전체이미지 길이에서 하나 좌우값만큼 빼고*/
    }
}

#scene4 .wrap .flow .up2{
    width: 882px;
    height: 358px;
    background: url(../img/up2.png) no-repeat 0 0;
    overflow: hidden;
    position: absolute;
    left: 446px;
    top: 30px;
    z-index: 10;
    opacity: 0.6;
    transform: scale(0.5);
    animation: up2 2.8s steps(51);
    display: none;
    animation-delay: 3.6s;
    animation-fill-mode: forwards;
}

#scene4 .wrap .flow .up2.on {
    display: block;
}


@keyframes up2 {
    to {
        background-position: -44982px;
        /*전체이미지 길이에서 하나 좌우값만큼 빼고*/
    }
}




#scene4 .wrap .flow .blue2 {
    width: 167px;
    height: 160px;
    left: 216px;
    top: 460px;
    position: absolute;
    background: url(../img/blue.png);
    transform: scale(0.8,0.8);
    z-index: 187;

}




#scene4 .wrap .flow .fan1 {
    width: 211px;
    height: 156px;
    background: url(../img/fan2_ani.png) no-repeat 0 0;
    overflow: hidden;
    position: absolute;
    left: 304px;
    top: 423px;
    z-index: 177;
    transform: scale(0.8,0.8);
}

#scene4 .wrap .flow .fan1.on {
    animation: fan1 0.2s steps(11) infinite reverse;
    animation-delay: 1.5s;
}

@keyframes fan1 {
    to {
        background-position: -2321px;
        /*전체이미지 길이에서 하나 좌우값만큼 빼고*/
    }
}



#scene4 .wrap .flow .rotor{
    width: 349px;
    height: 384px;
    background: url(../img/flow1_ani_big.png) no-repeat 0 0;
    overflow: hidden;
    position: absolute;
    left: 472px;
    top: 194px;
    z-index: 144;
    transform: scale(1);
}

#scene4 .wrap .flow .rotor.on {
    animation: rotor 0.5s steps(19) infinite normal;
    animation-delay: 2.9s;
}

@keyframes rotor {
    to {
        background-position: -6631px;
        /*전체이미지 길이에서 하나 좌우값만큼 빼고*/
    }
}


#scene4 .wrap .flow .step2 {
    width: 242px;
    height: 100px;
    background: url(../img/yello3.png) no-repeat 0 0;
    overflow: hidden;
    position: absolute;
    left: 642px;
    bottom: 270px;
    animation: step2 0.43s steps(14);
    display: none;
    animation-delay: 3s;
    animation-fill-mode: forwards;
    z-index: 133;
    transform: scale(0.7);
}
#scene4 .wrap .flow .step2.on {
    display: block;
}
@keyframes step2 {
    to {
        background-position: -3388px;
        /*전체이미지 길이에서 하나 좌우값만큼 빼고*/
    }
}



#scene4 .wrap .flow .filter2{
    background: url(../img/filter.png);
    width: 162px;
    height: 188px;
    left: 740px;
    top: 290px;
    position: absolute;
    z-index: 28;
    transform: scale(0.8,0.8);
}


#scene4 .wrap .flow .step3 {
    width: 242px;
    height: 100px;
    background: url(../img/yellow4.png) no-repeat 0 0;
    overflow: hidden;
    position: absolute;
    left: 788px;
    bottom: 315px;
    animation: step3 0.3s steps(9);
    display: none;
    animation-delay: 3.6s;
    animation-fill-mode: forwards;
    z-index: 27;
    transform: scale(0.7);
}
#scene4 .wrap .flow .step3.on {
    display: block;
}
@keyframes step3 {
    to {
        background-position: -2178px;
        /*전체이미지 길이에서 하나 좌우값만큼 빼고*/
    }
}


#scene4 .wrap .flow .filter3{
    background: url(../img/filter3.png);
    width: 162px;
    height: 188px;
    left: 830px;
    top: 258px;
    position: absolute;
    z-index: 26;
    transform: scale(0.8,0.8);
}


#scene4 .wrap .flow .step4 {
    width: 242px;
    height: 100px;
    background: url(../img/yellow4.png) no-repeat 0 0;
    overflow: hidden;
    position: absolute;
    left: 890px;
    bottom: 345px;
    animation: step3 0.3s steps(9);
    display: none;
    animation-delay: 4s;
    animation-fill-mode: forwards;
    z-index: 25;
    transform: scale(0.7);
}
#scene4 .wrap .flow .step4.on {
    display: block;
}


#scene4 .wrap .flow .blue3 {
    width: 167px;
    height: 160px;
    left: 926px;
    top: 240px;
    position: absolute;
    z-index: 20;
    background: url(../img/blue.png);
    transform: scale(0.8,0.8);
}


#scene4 .wrap .flow .blue3_step{
    width: 242px;
    height: 94px;
    background: url(../img/s1_3.png) no-repeat 0 0;
    overflow: hidden;
    position: absolute;
    left: 960px;
    top: 250px;
    transform: scale(0.7);
    z-index: 19;
    animation: ani1_2 0.4s steps(9);
    animation-delay: 4.4s;
    animation-fill-mode: forwards;
    display: none;
    opacity: 0.5;

}

#scene4 .wrap .flow .blue3_step.on {
    display: block;
}


#scene4 .wrap .flow .heater1{
    background: url(../img/flow5_1.png);
    width: 167px;
    height: 160px;
    right: 250px;
    top: 210px;
    position: absolute;
    transform: scale(0.8,0.8);
    z-index: 17;
}
/*#scene4 .wrap .flow .heater1_step{*/
/*    width: 242px;*/
/*    height: 94px;*/
/*    background: url(../img/s1_3.png) no-repeat 0 0;*/
/*    overflow: hidden;*/
/*    position: absolute;*/
/*    left: 1040px;*/
/*    top: 228px;*/
/*    transform: scale(0.7);*/
/*    z-index: 14;*/
/*    animation: ani1_2 0.4s steps(9);*/
/*    animation-delay: 4.9s;*/
/*    animation-fill-mode: forwards;*/
/*    display: none;*/
/*}*/

/*#scene4 .wrap .flow .heater1_step.on {*/
/*    display: block;*/
/*}*/



#scene4 .wrap .flow .heater2{
    background: url(../img/flow5_2.png);
    width: 167px;
    height: 160px;
    right: 520px;
    top: 86px;
    position: absolute;
    transform: scale(0.77);
    z-index: 17;

}

@keyframes fan1 {
    to {
        background-position: -2321px;
        /*전체이미지 길이에서 하나 좌우값만큼 빼고*/
    }
}

#scene4 .wrap .flow .fan_2_step{
    width: 291px;
    height: 110px;
    background: url(../img/test.png) no-repeat 0 0;
    overflow: hidden;
    position: absolute;
    left: 1046px;
    top: 208px;
    transform: scale(0.7);
    z-index: 12;
    animation: test 0.8s steps(17) ;
    display: none;
    animation-delay: 4.9s;
    animation-fill-mode: forwards;
    opacity: 0.5;
}

#scene4 .wrap .flow .fan_2_step.on {
    display: block;
}


@keyframes test {
    to {
        background-position: -4947px;
        /*전체이미지 길이에서 하나 좌우값만큼 빼고*/
    }
}




#scene4 .wrap .flow .dryairout{
    width:98px;
    height:18px;
    background:url(../img/dryairout.png);
    left: 1200px;
    bottom: 460px;
    position:absolute;
    z-index: 888;
    opacity: 0;
}

#scene4 .wrap .flow .dryairout.on1 {
    opacity: 1;
    transition: 1s 5.3s;
}

#scene4 .wrap .flow .dryairout.on2 {
    animation: fade-in 1s;
    animation-delay: 5.5s;
    animation-fill-mode: forwards;
}



#scene4 .wrap .flow .fan3{
    width: 125px;
    height: 113px;
    background: url(../img/fan3_ani.png) no-repeat 0 0;
    overflow: hidden;
    position: absolute;
    left: 300px;
    top: 280px;
    z-index: 550;
}
#scene4 .wrap .flow .fan3.on {
    animation: fan3 0.2s steps(11) infinite ;
    animation-delay: 7.9s;
}

@keyframes fan3 {
    to {
        background-position: -1375px;
        /*전체이미지 길이에서 하나 좌우값만큼 빼고*/
    }
}

#scene4 .wrap .flow .step8{
    width: 183px;
    height: 61px;
    background: url("../img/s7_3_1.png") no-repeat 0 0;
    overflow: hidden;
    position: absolute;
    right: 604px;
    top: 186px;

    z-index: 21;
    animation: ani5 0.7s steps(20);
    display: none;
    animation-delay: 6.3s;
    animation-fill-mode: forwards;
}
#scene4 .wrap .flow .step8.on {
    display: block;
}



#scene4 .wrap .flow .step9{
    width: 183px;
    height: 61px;
    background: url("../img/s7_3.png") no-repeat 0 0;
    overflow: hidden;
    position: absolute;
    left: 361px;
    top: 280px;
    animation: ani5 0.7s steps(20);
    display: none;
    animation-delay: 7.1s;
    animation-fill-mode: forwards;
    z-index: 200;
    opacity: 0.6;
}
#scene4 .wrap .flow .step9.on {
    display: block;
}
@keyframes ani5 {
    to {
        background-position: -3660px;
        /*전체이미지 길이에서 하나 좌우값만큼 빼고*/
    }
}



#scene4 .wrap .flow .step10_2{
    width: 163px;
    height: 63px;
    background: url("../img/s12_2.png") no-repeat 0 0;
    overflow: hidden;
    position: absolute;
    left: 185px;
    top: 345px;
    z-index: 560;
    animation: ani12 1s steps(35);
    animation-fill-mode: forwards;
    display: none;
    animation-delay: 8s;
    opacity: 0.6;
}
#scene4 .wrap .flow .step10_2.on {
    display: block;
}


@keyframes ani12 {
    to {
        background-position: -5705px;
        /*전체이미지 길이에서 하나 좌우값만큼 빼고*/
    }
}














#scene4 .wrap .flow2{
    height: 717px;
    width:1425px;
    left:0;
    position: absolute;
    top:500px;
    display: none;
}
#scene4 .wrap .flow2.on{
    display: block;
}



#scene4 .wrap .flow2 #moisture{
    opacity: 0;
    transition: 1s;
}
#scene4 .wrap .flow2 #moisture.on{
    opacity: 1;
}

#scene4 .wrap .flow2 #moisture > div{
    width: 263px;
    height: 157px;
    position: absolute;
    transform: scale(0.6,0.6);
    z-index: 555;
}

#scene4 .wrap. flow2 .moisture1{
    background: url("../img/moisture2.png") no-repeat;
    left: -20px;
    top: 560px;
    opacity: 0.5;
    animation:icon5 1.2s infinite alternate ease-out
}
@keyframes icon5 {
    0% {
        top:530px
    }
    100% {
    ;
        top:500px
    }
}
#scene4 .wrap .flow2 .moisture2{
    background: url("../img/moisture3.png") no-repeat;
    left: -20px;
    top: 560px;
    animation:icon5 1.0s infinite alternate ease-out
}

#scene4 .wrap .flow2 .moisture3{
    background: url("../img/moisture4.png") no-repeat;
    left: -20px;
    top: 560px;
    opacity: 0.3;
    animation:icon5 1.4s infinite alternate ease-out
}

#scene4 .wrap .flow2 #moisture02{
    opacity: 0;
    transition: 1s 2s;
}
#scene4 .wrap .flow2 #moisture02.on{
    opacity: 1;
}

#scene4 .wrap .flow2 #moisture02 > div{
    width: 263px;
    height: 157px;
    position: absolute;
    transform: scale(0.6,0.6);
    z-index: 166;
}

#scene4 .wrap .flow2 .moisture4{
    background: url("../img/moisture2.png") no-repeat;
    left: 400px;
    top: 560px;
    opacity: 0.5;
    animation:icon05 1.2s infinite alternate ease-out
}
@keyframes icon05 {
    0% {
        top:380px
    }
    100% {
    ;
        top:360px
    }
}
#scene4 .wrap .flow2 .moisture5{
    background: url("../img/moisture3.png") no-repeat;
    left: 400px;
    top: 560px;
    animation:icon05 1.0s infinite alternate ease-out
}

#scene4 .wrap .flow2 .moisture6{
    background: url("../img/moisture4.png") no-repeat;
    left: 400px;
    top: 560px;
    opacity: 0.3;
    animation:icon05 1.4s infinite alternate ease-out
}



#scene4 .wrap .flow2 .step1{
    width: 242px;
    height: 94px;
    background: url(../img/s1.png) no-repeat 0 0;
    overflow: hidden;
    position: absolute;
    left: -19px;
    top: 580px;
    transform: scale(0.7);
    z-index: 400;
    animation: ani1 1s steps(30) ;
    animation-fill-mode: forwards;
    display: none;
}

#scene4 .wrap .flow2 .step1.on {
    display: block;
}

@keyframes ani1 {
    to {
        background-position: -7260px;
        /*전체이미지 길이에서 하나 좌우값만큼 빼고*/
    }
}


#scene4 .wrap .flow2 .moistairin{
    width:97px;
    height:13px;
    background:url(../img/moistairin.png);
    left: 40px;
    bottom: 80px;
    position:absolute;
    z-index: 401;
    animation: fade-in 1s;
    animation-delay: 0.2s;
    animation-fill-mode: forwards;
}




#scene4 .text_2 .filter_1{
    width: 79px;
    height: 63px;
    background: url(../img/filter_1.png);
    left: 955px;
    bottom: 433px;
    position: absolute;
    z-index: 888;
    opacity: 0.7;
    transform: scale(0.8,0.8);
}
#scene4 .text_2 .filter_2{
    width: 79px;
    height: 63px;
    background: url(../img/filter_1.png);
    left: 855px;
    bottom: 397px;
    position: absolute;
    z-index: 888;
    opacity: 0.7;
    transform: scale(0.8,0.8);
}
#scene4 .text_2 .filter_3{
    width: 79px;
    height: 63px;
    background: url(../img/filter_1.png);
    left: 245px;
    bottom: 207px;
    position: absolute;
    z-index: 888;
    opacity: 0.7;
    transform: scale(0.8,0.8);
}

#scene4 .text_2 .prefilter {
    width: 146px;
    height: 80px;
    background: url(../img/prefilter2.png);
    left: 955px;
    bottom: 807px;
    position: absolute;
    z-index: 5;
    opacity: 0.7;
    transform: scale(0.8, 0.8);}

#scene4 .wrap  .flow2 .filter1{
    background:url(../img/filter.png);
    width: 162px;
    height: 188px;
    left: 130px;
    top: 480px;
    position: absolute;
    z-index: 300;
    transform: scale(0.8,0.8);
}

#scene4 .wrap .flow2 .step1_2{
    width: 242px;
    height: 94px;
    background: url(../img/s1_3.png) no-repeat 0 0;
    overflow: hidden;
    position: absolute;
    left: 165px;
    top: 510px;
    transform: scale(0.7);
    z-index: 188;
    animation: ani1_2 0.4s steps(9);
    animation-delay: 0.93s;
    animation-fill-mode: forwards;
    display: none;
}

#scene4 .wrap .flow2 .step1_2.on {
    display: block;
}

@keyframes ani1_2 {
    to {
        background-position: -2178px;
        /*전체이미지 길이에서 하나 좌우값만큼 빼고*/
    }
}

#scene4 .wrap .flow2 .step1_3{
    width: 242px;
    height: 94px;
    background: url(../img/s1_3.png) no-repeat 0 0;
    overflow: hidden;
    position: absolute;
    left: 265px;
    top: 478px;
    transform: scale(0.7);
    z-index: 166;
    animation: ani1_2 0.4s steps(9);
    animation-delay: 1.3s;
    animation-fill-mode: forwards;
    display: none;
}

#scene4 .wrap .flow2 .step1_3.on {
    display: block;
}



#scene4 .wrap .flow2 .step1_4{
    width: 242px;
    height: 94px;
    background: url(../img/s1.png) no-repeat 0 0;
    overflow: hidden;
    position: absolute;
    left: 410px;
    top: 422px;
    transform: scale(0.7);
    z-index: 155;
    animation: ani1 0.7s steps(15);
    display: none;
    animation-delay: 2s;
    animation-fill-mode: forwards;
}

#scene4 .wrap .flow2 .step1_4.on {
    display: block;
}






#scene4 .wrap .flow2 .blue2 {
    width: 167px;
    height: 160px;
    left: 216px;
    top: 460px;
    position: absolute;
    background: url(../img/blue.png);
    transform: scale(0.8,0.8);
    z-index: 187;

}




#scene4 .wrap .flow2 .fan1 {
    width: 211px;
    height: 156px;
    background: url(../img/fan2_ani.png) no-repeat 0 0;
    overflow: hidden;
    position: absolute;
    left: 304px;
    top: 423px;
    z-index: 177;
    transform: scale(0.8,0.8);
}

#scene4 .wrap .flow2 .fan1.on {
    animation: fan1 0.2s steps(11) infinite reverse;
    animation-delay: 1.5s;
}

@keyframes fan1 {
    to {
        background-position: -2321px;
        /*전체이미지 길이에서 하나 좌우값만큼 빼고*/
    }
}





#scene4 .wrap .flow2 .rotor{
    width: 349px;
    height: 384px;
    background: url(../img/flow1_ani.png) no-repeat 0 0;
    overflow: hidden;
    position: absolute;
    left: 472px;
    top: 194px;
    z-index: 144;
    transform: scale(1);
}

#scene4 .wrap .flow2 .rotor.on {
    animation: rotor 0.5s steps(19) infinite normal;
    animation-delay: 2.2s;
}

@keyframes rotor {
    to {
        background-position: -6631px;
        /*전체이미지 길이에서 하나 좌우값만큼 빼고*/
    }
}


#scene4 .wrap .flow2 .step2 {
    width: 242px;
    height: 100px;
    background: url(../img/yello3.png) no-repeat 0 0;
    overflow: hidden;
    position: absolute;
    left: 642px;
    bottom: 270px;
    animation: step2 0.43s steps(14);
    display: none;
    animation-delay: 3s;
    animation-fill-mode: forwards;
    z-index: 133;
    transform: scale(0.7);
}
#scene4 .wrap .flow2 .step2.on {
    display: block;
}
@keyframes step2 {
    to {
        background-position: -3388px;
        /*전체이미지 길이에서 하나 좌우값만큼 빼고*/
    }
}



#scene4 .wrap .flow2 .filter2{
    background: url(../img/filter.png);
    width: 162px;
    height: 188px;
    left: 740px;
    top: 290px;
    position: absolute;
    z-index: 28;
    transform: scale(0.8,0.8);
}


#scene4 .wrap .flow2 .step3 {
    width: 242px;
    height: 100px;
    background: url(../img/yellow4.png) no-repeat 0 0;
    overflow: hidden;
    position: absolute;
    left: 788px;
    bottom: 315px;
    animation: step3 0.3s steps(9);
    display: none;
    animation-delay: 3.6s;
    animation-fill-mode: forwards;
    z-index: 27;
    transform: scale(0.7);
}
#scene4 .wrap .flow2 .step3.on {
    display: block;
}
@keyframes step3 {
    to {
        background-position: -2178px;
        /*전체이미지 길이에서 하나 좌우값만큼 빼고*/
    }
}


#scene4 .wrap .flow2 .filter3{
    background: url(../img/filter3.png);
    width: 162px;
    height: 188px;
    left: 830px;
    top: 258px;
    position: absolute;
    z-index: 26;
    transform: scale(0.8,0.8);
}


#scene4 .wrap .flow2 .step4 {
    width: 242px;
    height: 100px;
    background: url(../img/yellow4.png) no-repeat 0 0;
    overflow: hidden;
    position: absolute;
    left: 890px;
    bottom: 345px;
    animation: step3 0.3s steps(9);
    display: none;
    animation-delay: 4s;
    animation-fill-mode: forwards;
    z-index: 25;
    transform: scale(0.7);
}
#scene4 .wrap .flow2 .step4.on {
    display: block;
}


#scene4 .wrap .flow2 .blue3 {
    width: 167px;
    height: 160px;
    left: 926px;
    top: 240px;
    position: absolute;
    z-index: 20;
    background: url(../img/blue.png);
    transform: scale(0.8,0.8);
}


#scene4 .wrap .flow2 .blue3_step{
    width: 242px;
    height: 94px;
    background: url(../img/s1_3.png) no-repeat 0 0;
    overflow: hidden;
    position: absolute;
    left: 960px;
    top: 250px;
    transform: scale(0.7);
    z-index: 19;
    animation: ani1_2 0.4s steps(9);
    animation-delay: 4.4s;
    animation-fill-mode: forwards;
    display: none;
    opacity: 0.5;

}

#scene4 .wrap .flow2 .blue3_step.on {
    display: block;
}


#scene4 .wrap .flow2 .heater1{
    background: url(../img/flow5_1.png);
    width: 167px;
    height: 160px;
    right: 250px;
    top: 210px;
    position: absolute;
    transform: scale(0.8,0.8);
    z-index: 17;
}
#scene4 .wrap .flow2 .heater1_step{
    width: 242px;
    height: 94px;
    background: url(../img/s1_3.png) no-repeat 0 0;
    overflow: hidden;
    position: absolute;
    left: 1040px;
    top: 228px;
    transform: scale(0.7);
    z-index: 14;
    animation: ani1_2 0.4s steps(9);
    animation-delay: 4.9s;
    animation-fill-mode: forwards;
    display: none;
}

#scene4 .wrap .flow2 .heater1_step.on {
    display: block;
}



#scene4 .wrap .flow2 .heater2{
    background: url(../img/flow5_2.png);
    width: 167px;
    height: 160px;
    right: 535px;
    top: 106px;
    position: absolute;
    transform: scale(0.77);
    z-index: 17;
}


#scene4 .wrap .flow2 .step7_pre{
    width: 183px;
    height: 61px;
    background: url("../img/s7_2.png") no-repeat 0 0;
    overflow: hidden;
    position: absolute;
    right: 300px;
    top: 85px;
    z-index: 9;
    animation: ani5 0.7s steps(20);
    display: none;
    animation-fill-mode: forwards;
}
#scene4 .wrap .flow2 .step7_pre.on {
    display: block;
    animation-delay: 7s;
}
@keyframes ani5 {
    to {
        background-position: -3660px;
        /*전체이미지 길이에서 하나 좌우값만큼 빼고*/
    }
}


#scene4 .wrap .flow2 .step7_pre2{
    right: 460px;
    top: 140px;


    width: 183px;
    height: 61px;
    background: url("../img/s7_2.png") no-repeat 0 0;
    overflow: hidden;
    position: absolute;
    z-index: 11;
    animation: ani5 0.7s steps(20);
    display: none;
    animation-fill-mode: forwards;
}
#scene4 .wrap .flow2 .step7_pre2.on {
    display: block;
    animation-delay: 7.8s;
}



#scene4 .wrap .flow2 .filter4{
    background: url(../img/filter.png);
    width: 162px;
    height: 188px;
    left: 885px;
    top: 30px;
    position: absolute;
    z-index: 10;
    transform: scale(0.8,0.8);
}




#scene4 .wrap .flow2 .fan2 {
    width: 211px;
    height: 156px;
    background: url(../img/fan2_ani.png) no-repeat 0 0;
    overflow: hidden;
    position: absolute;
    right: 120px;
    top: 170px;
    z-index: 15;
    transform: scale(0.8,0.8);
}

#scene4 .wrap .flow2 .fan2.on {
    animation: fan1 0.2s steps(11) infinite reverse;
    animation-delay: 5.4s;
}

@keyframes fan1 {
    to {
        background-position: -2321px;
        /*전체이미지 길이에서 하나 좌우값만큼 빼고*/
    }
}

#scene4 .wrap .flow2 .fan_2_step{
    width: 242px;
    height: 94px;
    background: url(../img/s1.png) no-repeat 0 0;
    overflow: hidden;
    position: absolute;
    left: 1190px;
    top: 173px;
    transform: scale(0.7);
    z-index: 12;
    animation: ani1 0.7s steps(15);
    display: none;
    animation-delay: 5.7s;
    animation-fill-mode: forwards;
    opacity: 0.5;
}

#scene4 .wrap .flow2 .fan_2_step.on {
    display: block;
}

#scene4 .wrap .flow2 .dryairout{
    width:98px;
    height:18px;
    background:url(../img/dryairout.png);
    left: 1300px;
    bottom: 498px;
    position:absolute;
    z-index: 888;
    opacity: 0;
    animation: fade-in 1s;
    animation-delay: 5.9s;
    animation-fill-mode: forwards;
}




#scene4 .wrap .flow2 .fan3{
    width: 125px;
    height: 113px;
    background: url(../img/fan3_ani.png) no-repeat 0 0;
    overflow: hidden;
    position: absolute;
    left: 320px;
    top: 280px;
    z-index: 550;
}
#scene4 .wrap .flow2 .fan3.on {
    animation: fan3 0.2s steps(11) infinite;
    animation-delay: 10s;
}

@keyframes fan3 {
    to {
        background-position: -1375px;
        /*전체이미지 길이에서 하나 좌우값만큼 빼고*/
    }
}

#scene4 .wrap .flow2 .step8{
    width: 183px;
    height: 61px;
    background: url("../img/s7_3_1.png") no-repeat 0 0;
    overflow: hidden;
    position: absolute;
    right: 620px;
    top: 196px;
    z-index: 21;
    animation: ani5 0.7s steps(20);
    display: none;
    animation-delay: 8.5s;
    animation-fill-mode: forwards;
}
#scene4 .wrap .flow2 .step8.on {
    display: block;
}



#scene4 .wrap .flow2 .step9{
    width: 183px;
    height: 61px;
    background: url("../img/s7_3.png") no-repeat 0 0;
    overflow: hidden;
    position: absolute;
    left: 361px;
    top: 280px;
    animation: ani5 0.7s steps(20);
    display: none;
    animation-delay: 9.2s;
    animation-fill-mode: forwards;
    z-index: 200;
    opacity: 0.6;
}
#scene4 .wrap .flow2 .step9.on {
    display: block;
}
@keyframes ani5 {
    to {
        background-position: -3660px;
        /*전체이미지 길이에서 하나 좌우값만큼 빼고*/
    }
}



#scene4 .wrap .flow2 .step10_2{
    width: 163px;
    height: 63px;
    background: url("../img/s12_2.png") no-repeat 0 0;
    overflow: hidden;
    position: absolute;
    left: 205px;
    top: 345px;
    z-index: 560;
    animation: ani12 1s steps(35);
    animation-fill-mode: forwards;
    display: none;
    animation-delay: 10s;
    opacity: 0.6;
}
#scene4 .wrap .flow2 .step10_2.on {
    display: block;
}


@keyframes ani12 {
    to {
        background-position: -5705px;
        /*전체이미지 길이에서 하나 좌우값만큼 빼고*/
    }
}



















#scene4 .text_1{
    left: 0;
    bottom: -150px;
    position: absolute;
    display: block;
}
#scene4 .text_1.none{
    display: none;
}

#scene4 .text_1 .precoolingcoil{
    width: 189px;
    height: 100px;
    background: url(../img/coolingcoil2.png);
    left: 320px;
    bottom: 230px;
    position: absolute;
    opacity: 0.7;
    z-index: 409;
    transform: scale(0.8,0.8);

}



#scene4 .text_1 .processsector{
    width: 134px;
    height: 166px;
    background: url(../img/processsector.png);
    left: 594px;
    bottom: 272px;
    position: absolute;
    z-index: 333;
    opacity: 0.7;
    transform: scale(0.8,0.8);

}

#scene4 .text_1 .aftercoolingcoil{
    width: 201px;
    height: 95px;
    background: url(../img/aftercoolingcoil2.png);
    left: 1030px;
    bottom: 454px;
    position: absolute;
    opacity: 0.7;
    z-index: 99;
    transform: scale(0.8,0.8);
}
#scene4 .text_1 .heater22{
    width:106px;
    height:101px;
    background:url(../img/heater2.png);
    left: 1110px;
    bottom: 500px;
    position:absolute;
    opacity: 0.7;
    z-index: 99;
    transform: scale(0.8,0.8)
}


#scene4 .text_1 .drivemotor{
    width:133px;
    height:66px;
    background:url(../img/drivemotor.png);
    left: 780px;
    bottom: 285px;
    position:absolute;
    z-index: 88;
    opacity: 0.7;
    transform: scale(0.8,0.8)

}
#scene4 .text_1 .processfan{
    width:140px;
    height:90px;
    background:url(../img/processfan.png);
    left: 453px;
    bottom: 280px;
    position:absolute;
    z-index: 888;
    opacity: 0.7;
    transform: scale(0.8,0.8)

}


#scene4 .text_1 .regenerationair{
    width:134px;
    height:18px;
    background:url(../img/regenerationair.png);
    left: 940px;
    bottom: 560px;
    position:absolute;
    z-index: 888;
    animation: fade-in 1s;
    animation-delay: 5s;
    animation-fill-mode: forwards;
}



#scene4 .text_1 .heater{
    width:122px;
    height:65px;
    background:url(../img/heater.png);
    left: 680px;
    bottom: 768px;
    position:absolute;
    z-index: 888;
    opacity: 0.7;
    transform: scale(0.8,0.8)

}
#scene4 .text_1 .reactivationsector{
    width:243px;
    height:144px;
    background:url(../img/reactivationsector.png);
    left: 310px;
    bottom: 633px;
    position:absolute;
    z-index: 888;
    opacity: 0.7;
    transform: scale(0.8,0.8)

}
#scene4 .text_1 .reactfan{
    width:133px;
    height:70px;
    background:url(../img/reactfan.png);
    left: 200px;
    bottom: 572px;
    position:absolute;
    z-index: 888;
    opacity: 0.7;
    transform: scale(0.8,0.8)

}
#scene4 .text_1 .wetairout{
    width:104px;
    height:13px;
    background:url(../img/wetairout.png);
    left: 179px;
    bottom: 510px;
    position:absolute;
    z-index: 888;
    opacity: 0;
}
#scene4 .text_1 .wetairout.on1 {
    opacity: 1;
    transition: 1s 8.5s;
}

#scene4 .text_1 .wetairout.on2 {
    animation: fade-in 1s;
    animation-delay: 8.5s;
    animation-fill-mode: forwards;
}












#scene4 .text_2{
    left: 0;
    bottom: -150px;
    position: absolute;
    display: none;
}
#scene4 .text_2.on{
    display: block;
}

#scene4 .text_2 .precoolingcoil{
    width: 189px;
    height: 100px;
    background: url(../img/coolingcoil2.png);
    left: 320px;
    bottom: 230px;
    position: absolute;
    opacity: 0.7;
    z-index: 409;
    transform: scale(0.8,0.8);

}



#scene4 .text_2 .processsector{
    width: 134px;
    height: 166px;
    background: url(../img/processsector.png);
    left: 594px;
    bottom: 272px;
    position: absolute;
    z-index: 333;
    opacity: 0.7;
    transform: scale(0.8,0.8);

}

#scene4 .text_2 .aftercoolingcoil{
    width: 201px;
    height: 95px;
    background: url(../img/aftercoolingcoil2.png);
    left: 1030px;
    bottom: 454px;
    position: absolute;
    opacity: 0.7;
    z-index: 99;
    transform: scale(0.8,0.8);
}
#scene4 .text_2 .heater22{
    width:106px;
    height:101px;
    background:url(../img/heater2.png);
    left: 1110px;
    bottom: 498px;
    position:absolute;
    opacity: 0.7;
    z-index: 99;
    transform: scale(0.8,0.8)

}

#scene4 .text_2 .supplyfan{
    width:151px;
    height:115px;
    background:url(../img/supplyfan.png);
    left: 1230px;
    bottom: 510px;
    position:absolute;
    opacity: 0.7;
    z-index: 99;
    transform: scale(0.8,0.8)
}


#scene4 .text_2 .drivemotor{
    width:133px;
    height:66px;
    background:url(../img/drivemotor.png);
    left: 780px;
    bottom: 285px;
    position:absolute;
    z-index: 88;
    opacity: 0.7;
    transform: scale(0.8,0.8)

}
#scene4 .text_2 .processfan{
    width:140px;
    height:90px;
    background:url(../img/processfan.png);
    left: 453px;
    bottom: 280px;
    position:absolute;
    z-index: 888;
    opacity: 0.7;
    transform: scale(0.8,0.8)

}


#scene4 .text_2 .regenerationair33{
    width:134px;
    height:18px;
    background:url(../img/regenerationair.png);
    left: 1040px;
    bottom: 793px;
    position:absolute;
    z-index: 888;
    opacity: 0;
    animation: fade-in 1s;
    animation-delay: 7s;
    animation-fill-mode: forwards;
}


@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

#scene4 .text_2 .heater{
    width:122px;
    height:65px;
    background:url(../img/heater.png);
    left: 660px;
    bottom: 747px;
    position:absolute;
    z-index: 888;
    opacity: 0.7;
    transform: scale(0.8,0.8)

}
#scene4 .text_2 .reactivationsector{
    width:243px;
    height:144px;
    background:url(../img/reactivationsector.png);
    left: 310px;
    bottom: 633px;
    position:absolute;
    z-index: 888;
    opacity: 0.7;
    transform: scale(0.8,0.8)

}
#scene4 .text_2 .reactfan{
    width:133px;
    height:70px;
    background:url(../img/reactfan.png);
    left: 220px;
    bottom: 572px;
    position:absolute;
    z-index: 888;
    opacity: 0.7;
    transform: scale(0.8,0.8)

}
#scene4 .text_2 .wetairout{
    width:104px;
    height:13px;
    background:url(../img/wetairout.png);
    left: 199px;
    bottom: 510px;
    position:absolute;
    z-index: 888;
    opacity: 0;
    display: block;
    animation: fade-in 1s;
    animation-delay: 10.5s;
    animation-fill-mode: forwards;
}










#pre_scene5 {
    width: 100%;
    position:relative;
}

#pre_scene5 .wrap {
    width:1425px;
    height:130px;
    left:50%;
    margin-left:-712px;
}



#scene5 {
    width: 100%;
    position:relative;
}

#scene5 .wrap {
    width:1425px;
    height:4550px;
    left:50%;
    margin-left:-712px;
}

#scene5 .wrap #s5subtitle_box{
    left:50%;
    margin-left:-700px;
    width:1400px;
    height: 40px;
    top:132px;
    position: absolute;
}
#scene5 .wrap #s5subtitle_box .subtitle1{
    font-family: 'NanumSquare', sans-serif;
    font-size: 28pt;
    font-weight: 800;
    text-align: center;
    color: #292929;
}

#scene5 .wrap .pic{
    background:white;
    height: 944px;
    width:1425px;
    left:0;
    top:250px;
    position: absolute;
}

#scene5 .wrap .plan{
    height: 100%;
    width: 100%;
    transform: scale(0.8);
    left: 0;
    margin-top: -80px;
    top: 0;
    position: absolute;
    background: url(../img/plan3.jpg);
}



#scene5 #table {
    position: absolute;
    top:1110px;
}


#scene5 .font_subtitle {
    font-size: 15pt;
    font-weight: 600;
    z-index: 333;
}

#scene5 .bold {
    font-size: 13pt;
    font-weight: 600;
}




#top_button {
    background: url(../img/top_button2.png);
    width: 70px;
    height: 70px;
    position: fixed;
    right: 300px;
    bottom: 80px;
    z-index:9999;
    opacity: 0;
}
#top_button.on {
    opacity: 1;
    transition: 1s;
}




#footer {
    width:100%;
    height:348px;
    position:relative;
}

#footer .contents {
    width:1920px;
    height:348px;
    background:url(../img/footer.jpg);
    left:50%;
    margin-left:-969px;
    position:absolute;
}

/*제품상담*/
#footer .contents .footer_icon1{
    width:58px;
    height:90px;
    background:url(../img/footer_logo2.jpg);
    right: 247px;
    top:30px;
    position:absolute;
}

/*공지사항*/
#footer .contents .footer_icon2{
    width:58px;
    height:90px;
    background:url(../img/footer_logo1.jpg);
    right: 357px;
    top:30px;
    position:absolute;
}

.footer_icon1 a{
    display:block;
    width:100%;
    height:100%;
}

.footer_icon2 a{
    display:block;
    width:100%;
    height:100%;
}