@charset "utf-8";

/** base **/
html,body{height:100%;overflow-y:hidden;}
body{position:relative;min-width:1200px;font-family:  "Dotum", "Arial", sans-serif;font-size:12px;color:#333;}
.center{position: absolute;left:50%;}

/** scrollBox **/
.scrollBox{min-width:1200px;height:100%;position:relative;}
.scrollBox .wrap{min-width:1200px;position:relative;overflow:hidden;}
.scrollBox .wrap > div{height:1000px;position:relative;}


#scene01{height: 2476px;background:url("../img/sc01.jpg") no-repeat center top; background-size: cover;}
#scene01 .txt{position: absolute; right: 360px; top: 200px;}
#scene01 .mobile{width: 1155px; height: 609px; background: url("../img/sc01_02.png") no-repeat left top; position: absolute; right: 212px; bottom: 461px;}
#scene01 .txt02{margin-left: -602px; bottom: 184px;}
#slides01 {width: 764px;height: 414px;position: absolute;left: 193px;top: 54px;}
@media screen and (max-width:1600px){#scene01 .txt{right: 200px; top: 100px;}}
@media screen and (max-width:1300px){#scene01 .txt{right: 100px; top: 31px;}}
@media screen and (max-width:1300px){#scene01 .mobile{transform: scale(.9); right: 112px; bottom: 413px;}}

#scene02{height: 1659px;background:url("../img/sc02.jpg") no-repeat center top; background-size: cover;}
#scene02 .txt01{margin-left:-601px; top: 99px;}
#scene02 .txt02{left: 0; bottom: -171px; z-index: 100; transform-origin: left center;}
@media screen and (max-width:1300px){#scene02 .txt02{transform: scale(.8);}}


#scene03{height: 992px;background:url("../img/sc03.jpg") no-repeat center top; background-size: cover;}
#scene03 .txt{margin-left:-600px; top: 99px;}


#scene04{height: 1307px;background:url("../img/sc04.jpg") no-repeat center top; background-size: cover;}
#scene04 .txt{margin-left:-578px; top: 100px;}

#scene05{height: 916px;background:url("../img/sc05.jpg") no-repeat right top; background-size: contain;}
@media screen and (max-width:1600px){#scene05{height:744px;}}
@media screen and (max-width:1300px){#scene05{height:610px;}}
#scene05 .title{left:20%; top: 261px;}
#scene05 .title .icon {width: 39px;height: 60px;position: absolute;left: 111px;top: 257px;animation: icon linear infinite alternate 5s;}
@media screen and (max-width:1600px){#scene05 .title{left: 10%; top: 155px;}}
@media screen and (max-width:1300px){#scene05 .title{transform: scale(.8); left: 5%; top: 164px;}}

@keyframes icon {
    0%{
        left: 111px;
        top: 257px;
    }
    50% {
        left: 200px;
        top: 239px;
    }
    100% {
        left: 296px;
        top: 261px;
    }
}

#scene06{height: 1054px; background: url("../img/sc06.jpg") no-repeat center top; background-size: contain;}
#scene06 .title{margin-left: -281px; top: 100px;}
@media screen and (max-width:1600px){#scene06{height:842px;}}
@media screen and (max-width:1500px){#scene06{height:791px;}}
@media screen and (max-width:1300px){#scene06{height:700px;}}
@media screen and (max-width:1600px){#scene06 .title{top:47px;}}
@media screen and (max-width:1300px){#scene06 .title{top:20px;}}

#scene07{height: 1296px; background: url("../img/sc07.jpg") no-repeat center top; background-size: cover;}


#scene07 .title{margin-left: -168.5px; bottom: 148px;}
#footer{height: 100px; background: url("../img/footer.jpg") no-repeat center top; background-size: cover;}