@charset "utf-8";
html, body {
    height: 100%;
    overflow-y: hidden;
}

body {
    position: relative;
    min-width: 1200px;
    font-family: "Dotum", "Arial", sans-serif;
    font-size: 12px;
    color: #333;
    background: white;
}

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

.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 {}

#main_visual{
    height: 1080px;
    width: 1920px;
    background: url("../img/mainvisual/background.jpg") no-repeat left top fixed;


}



#main_visual .contents{
    width: 1141px;
    height: 876px;
    margin: 0 auto;
    position: relative;
}

#main_visual .contents .sun{
    width: 94px;
    height: 94px;
    background: url("../img/mainvisual/sun.png");
    position: absolute;
    left: -20px;
    top: 152px;
    transform: rotate(0deg);
    animation: ani1 3s infinite;
}

@keyframes ani1 {
    100%{
        transform: rotate(360deg);
    }

}

#main_visual .contents .typo01{
    width: 258px;
    height: 86px;
    background: url("../img/mainvisual/typo01.png");
    position: absolute;
    left: -10px;
    top: 375px;
}

#main_visual .contents .typo02{
    width: 197px;
    height: 86px;
    background: url("../img/mainvisual/typo02.png");
    position: absolute;
    left: -10px;
    top: 469px;
}

#main_visual .contents .typo03{
    width: 333px;
    height: 82px;
    background: url("../img/mainvisual/typo03.png");
    position: absolute;
    left: -10px;
    top: 557px;
}

#main_visual .contents .typo04{
    width: 373px;
    height: 106px;
    background: url("../img/mainvisual/typo04.png");
    position: absolute;
    right: -12px;
    top: 380px;
}

#main_visual .contents .typo05{
    width: 373px;
    height: 105px;
    background: url("../img/mainvisual/typo05.png");
    position: absolute;
    right: -12px;
    top: 540px;
}

#main_visual .contents .app{
    width: 96px;
    height: 95px;
    background: url("../img/mainvisual/app.png");
    position: absolute;
    right: -12px;
    bottom: 0;
}

#main_visual .contents .phone{
    width: 408px;
    height: 756px;
    background: url("../img/mainvisual/phone.png");
    position: absolute;
    top: 159px;
    left: 371px;
    
}





#main_visual .blue_box{
    width: 333px;
    height: 333px;
    background: url("../img/mainvisual/blue_box.jpg");
    position: absolute;
    left: 390px;
    bottom: -206px;
    z-index: 999;
}



#scene01{
    height: 645px;
    background: white;
}

#scene01 .contents {
    width: 1141px;
    margin: 0 auto;
    position: relative;
}

#scene01 .contents .title01{
    background: url("../img/scene01/title01.png") no-repeat left top;
    width: 99px;
    height: 14px;
    position: absolute;
    left: 0;
    top: 369px;
    transform: translate(0,30px);
    transition: all 1s;
    opacity: 0;
}

#scene01 .contents .title02{
     background: url("../img/scene01/title02.png") no-repeat left top;
     width: 229px;
     height: 33px;
     position: absolute;
     left: 0;
     top: 448px;

 }

#scene01 .contents .title03{
    background: url("../img/scene01/title03.png") no-repeat left top;
    width: 153px;
    height: 33px;
    position: absolute;
    left: 0;
    top: 498px;
}

#scene01 .contents .typo{
    background: url("../img/scene01/typo_01.png") no-repeat left top;
    width: 756px;
    height: 73px;
    position: absolute;
    left: 394px;
    top: 448px;
}

#scene01 .contents > div{transform: translate(0,30px); transition: all 1s; opacity: 0;}
#scene01 .contents > div.on{opacity: 1; transform: translate(0,0);}

#scene01 .contents .title02{transition-delay: .2s;}
#scene01 .contents .title03{transition-delay: .4s;}
#scene01 .contents .typo{transition-delay: .6s;}

#scene01 .contents .roll{
    background: url("../img/scene01/roll.png") no-repeat left top;
    width: 102px;
    height: 98px;
    position: absolute;
    right: 0;
    top: 206px;
    transform: rotate(0deg);
    animation: ani1 3s infinite;
}




#scene02{
    background: white;
    height: 974px;
}

#scene02 .contents{
    width: 1141px;
    margin: 0 auto;
    position: relative;
}

#scene02 .contents > div{transform: translate(0,30px); transition: all 1s; opacity: 0;}
#scene02 .contents > div.on{opacity: 1; transform: translate(0,0);}

#scene02 .contents .title01{
    background: url("../img/scene02/title01.png") no-repeat left top;
    width: 127px;
    height: 17px;
    position: absolute;
    top: 82px;
    left: 0;
}

#scene02 .contents .title02{
    background: url("../img/scene02/title02.png") no-repeat left top;
    width: 185px;
    height: 33px;
    position: absolute;
    top: 161px;
    left: 0;
    transition-delay: .2s;
}

#scene02 .contents .title03{
    background: url("../img/scene02/title03.png") no-repeat left top;
    width: 260px;
    height: 33px;
    position: absolute;
    top: 211px;
    left: 0;
    transition-delay: .4s;
}

#scene02 .contents .typo{
    background: url("../img/scene02/typo_02.png") no-repeat left top;
    width: 736px;
    height: 72px;
    position: absolute;
    top: 169px;
    left: 397px;
    transition-delay: .6s;
}

#scene02 .contents .diagram{
    background: url("../img/scene02/diagram_02.png") no-repeat left top;
    width: 1130px;
    height: 449px;
    position: absolute;
    top: 335px;
    left: 0;
    transition-delay: .8s;
}


#scene03{
    height: 921px;
    background: white;
}


#scene03 .gray01{
    height: 921px;
    width: 960px;
    background: #f7f7f7;
    float: left;
}

#scene03 .right{
    float: left;
}

#scene03 .right .blue01{
    width: 960px;
    height: 446px;
    background: #4abff5;
    position: relative;
}

#scene03 .right .blue01 .white_sun{
     width: 48px;
     height: 50px;
     background: url("../img/scene03/white_sun.png") no-repeat left top;
     position: absolute;
     bottom: 34px;
     left: 36px;
    transform: rotate(0deg);
    animation: ani1 2s infinite;
 }

#scene03 .right .blue01 .white_typo{
    width: 79px;
    height: 33px;
    background: url("../img/scene03/white_typo.png") no-repeat left top;
    position: absolute;
    bottom: 53px;
    left: 95px;
}

#scene03 .right .gray02 .blue_sun{
    width: 49px;
    height: 50px;
    background: url("../img/scene03/blue_sun.png") no-repeat left top;
    position: absolute;
    top: 34px;
    left: 36px;
    transform: rotate(0deg);
    animation: ani1 2s infinite;
}

#scene03 .right .gray02 .blue_typo{
    width: 71px;
    height: 35px;
    background: url("../img/scene03/blue_typo.png") no-repeat left top;
    position: absolute;
    top: 53px;
    left: 95px;
}





#scene03 .right .gray02{
    width: 960px;
    height: 475px;
    background: #fafafa;
    position: relative;
}

#scene03 .contents{
    width: 1141px;
    margin: 0 auto;
    position: relative;
}

#scene03 .contents > div{transform: translate(0,30px); transition: all 1s; opacity: 0;}
#scene03 .contents > div.on{opacity: 1; transform: translate(0,0);}


#scene03  .contents .title01{
    background: url("../img/scene03/title01.png")no-repeat left top;
    width: 131px;
    height: 13px;
    position: absolute;
    top: 126px;
    left: 0;
    transition-delay: .2s;
}

#scene03 .contents .title02{
    background: url("../img/scene03/title02.png")no-repeat left top;
    width: 78px;
    height: 28px;
    position: absolute;
    top: 211px;
    left: 0;
    transition-delay: .4s;
}

#scene03 .contents .title03{
    background: url("../img/scene03/title03.png")no-repeat left top;
    width: 158px;
    height: 33px;
    position: absolute;
    top: 258px;
    left: 0;
    transition-delay: .6s;
}

#scene03 .contents .aa{
    background: url("../img/scene03/aa.png")no-repeat left top;
    width: 350px;
    height: 226px;
    position: absolute;
    top: 386px;
    left: 0;
    transition-delay: .8s;
}

#scene03 .contents .aa .font01{
    background: url("../img/scene03/font01.png")no-repeat left top;
    width: 104px;
    height: 24px;
    position: absolute;
    top: 367px;
    right: 0;
    transition-delay: 1s;
}

#scene03 .contents .aa .font02{
    background: url("../img/scene03/font02.png")no-repeat left top;
    width: 173px;
    height: 31px;
    position: absolute;
    top: 405px;
    right: 0;
    transition-delay: 1.2s;
}




#scene04{
    height: 1294px;
    background: white;
}

#scene04 .frame{
    position: absolute;
    bottom: 111px;
    left: -28px;
}
#scene04 .frame .layout01{
    background: url("../img/scene04/layout01_02.jpg") no-repeat left top;
    width: 296px;
    height: 634px;
    float: left;
}

#scene04 .frame .layout02{
    background: url("../img/scene04/layout02.jpg") no-repeat left top;
    width: 295px;
    height: 635px;
    float: left;
    margin: 0 54px;
}

#scene04 .frame .layout03{
    background: url("../img/scene04/layout03.jpg") no-repeat left top;
    width: 296px;
    height: 636px;
    float: left;
}

#scene04 .contents{
    width: 1141px;
    margin: 0 auto;
    position: relative;
}

#scene04 .contents > div{transform: translate(0,30px); transition: all 1s; opacity: 0;}
#scene04 .contents > div.on{opacity: 1; transform: translate(0,0);}


#scene04 .contents .title01{
    background: url("../img/scene04/title01.png") no-repeat left top;
    width: 146px;
    height: 14px;
    position: absolute;
    left: 0;
    top: 177px;
}

#scene04 .contents .title02{
    background: url("../img/scene04/title02.png") no-repeat left top;
    width: 421px;
    height: 33px;
    position: absolute;
    left: 0;
    top: 257px;
    transition-delay: .2s;
}

#scene04 .contents .typo{
    background: url("../img/scene04/typo.png") no-repeat left top;
    width: 556px;
    height: 74px;
    position: absolute;
    left: 0;
    top: 338px;
    transition-delay: .4s;
}

#scene04 .contents .phone{
    background: url("../img/scene04/phone_03.png") no-repeat left top;
    width: 648px;
    height: 857px;
    position: absolute;
    right: -182px;
    top: 252px;
    transition-delay: .6s;
}



#scene05{
    height: 715px;
    background: white;
}

#scene05 .contents{
    width: 1141px;
    height: 715px;
    margin: 0 auto;
    position: relative;
}

#scene05 .contents > div{transform: translate(0,30px); transition: all 1s; opacity: 0;}
#scene05 .contents > div.on{opacity: 1; transform: translate(0,0);}


#scene05 .contents .title01{
    background: url("../img/scene05/title01.png") no-repeat left top;
    width: 179px;
    height: 14px;
    position: absolute;
    left: 0;
    top: 72px;
}

#scene05 .contents .title02{
    background: url("../img/scene05/title02.png") no-repeat left top;
    width: 187px;
    height: 33px;
    position: absolute;
    left: 0;
    top: 152px;
    transition-delay: .2s;
}

#scene05 .contents .title03{
    background: url("../img/scene05/title03.png") no-repeat left top;
    width: 282px;
    height: 32px;
    position: absolute;
    left: 0;
    top: 203px;
    transition-delay: .4s;
}

#scene05 .contents .big{
    background: url("../img/scene05/big.png") no-repeat left top;
    width: 140px;
    height: 238px;
    position: absolute;
    right: 100px;
    top: 86px;
    transition-delay: .6s;
}

#scene05 .contents .pictogram{
    position: absolute;
    bottom: 140px;
    left: 43px;
    transition-delay: .8s;
}

#scene05 .contents .pictogram > div{
    float: left;
    margin-right: 65px;
}
#scene05 .contents .pictogram .pic01{
    background: url("../img/scene05/pic01.png") no-repeat left top;
    width: 138px;
    height: 162px;
}

#scene05 .contents .pictogram .pic02{
    background: url("../img/scene05/pic02.png") no-repeat left top;
    width: 106px;
    height: 163px;
}

#scene05 .contents .pictogram .pic03{
    background: url("../img/scene05/pic03.png") no-repeat left top;
    width: 96px;
    height: 162px;
}

#scene05 .contents .pictogram .pic04{
    background: url("../img/scene05/pic04.png") no-repeat left top;
    width: 122px;
    height: 162px;
}

#scene05 .contents .pictogram .pic05{
    background: url("../img/scene05/pic05.png") no-repeat left top;
    width: 115px;
    height: 163px;

}

#scene05 .contents .pictogram .pic06{
    background: url("../img/scene05/pic06.png") no-repeat left top;
    width: 126px;
    height: 163px;
    margin-right: 0;
}



#scene06{
    height: 1201px;
    background: white;
}

#scene06 .user_flow{
    background: url("../img/scene06/user_flow.png") no-repeat left top;
    width: 993px;
    height: 460px;
    position: absolute;
    right: 392px;
    top: 197px;
    transition-delay: 1s;
    transform: translate(0,30px); transition: all 1s; opacity: 0;
}

#scene06 .user_flow.on{opacity: 1; transform: translate(0,0);}


#scene06 .contents{
    width: 1141px;
    height: 1201px;
    margin: 0 auto;
    position: relative;
}

#scene06 .contents > div{transform: translate(0,30px); transition: all 1s; opacity: 0;}
#scene06 .contents > div.on{opacity: 1; transform: translate(0,0);}


#scene06 .contents .title01{
    background: url("../img/scene06/title01.png") no-repeat left top;
    width: 104px;
    height: 14px;
    position: absolute;
    left: 0;
    top: 118px;
    transition-delay: .2s;
}

#scene06 .contents .title02{
    background: url("../img/scene06/title02.png") no-repeat left top;
    width: 314px;
    height: 33px;
    position: absolute;
    left: 0;
    top: 197px;
    transition-delay: .4s;
}

#scene06 .contents .title03{
    background: url("../img/scene06/title03.png") no-repeat left top;
    width: 153px;
    height: 32px;
    position: absolute;
    left: 0;
    top: 248px;
    transition-delay: .6s;
}


#scene07{
    height: 650px;
    width: 1920px;
    background: url("../img/mainvisual/background.jpg") no-repeat left top fixed;
}

#scene07 .big{
    background: url("../img/scene07/big.png")no-repeat left top;
    width: 441px;
    height: 859px;
    position: absolute;
    left: 268px;
    top: -159px;
    z-index: 998;
}

#scene07 .big .logo {
    background: url("../img/scene07/logo.png") no-repeat left top;
    width: 222px;
    height: 81px;
    position: absolute;
    left: 643px;
    top: 410px;
}

#scene07 .big .phone01{
    background: url("../img/scene07/phone01.png")no-repeat left top;
    width: 344px;
    height: 571px;
    position: absolute;
    left: 621px;
    top: -158px;
    z-index: 998;
}

#scene07 .big .phone02{
    background: url("../img/scene07/phone02.png")no-repeat left top;
    width: 345px;
    height: 602px;
    position: absolute;
    left: 621px;
    top: 543px;
    z-index: 998;
}

#scene07 .big .phone03{
    background: url("../img/scene07/phone03.png")no-repeat left top;
    width: 391px;
    height: 646px;
    position: absolute;
    left: 958px;
    top: 186px;
    z-index: 998;
}

#scene07 .mp4{
    position: absolute;
    top: -145px;
    left: 275px;
    z-index: 991;
}



#scene07 .big_shadow{
    background: url("../img/scene07/big_shadow.png")no-repeat left top;
    width: 633px;
    height: 996px;
    position: absolute;
    left: 200px;
    top: -180px;
    z-index: 700;
}
#scene07 .big_shadow > div{
    background: url("../img/scene07/small_shadow.png")no-repeat left top;
    width: 383px;
    height: 602px;
}

#scene07 .big_shadow > div:nth-child(1){
    position: absolute;
    left: 621px;
    top: -160px;
}
#scene07 .big_shadow > div:nth-child(2){
    position: absolute;
    left: 621px;
    top: 543px;
}

#scene07 .big_shadow > div:nth-child(3){
    position: absolute;
    left: 958px;
    top: 186px;
}


#scene08{
    height: 1215px;
    background: white;
}


#scene08 .pic01{
    background: url("../img/scene08/pic01.png")no-repeat left top;
    width: 235px;
    height: 358px;
    position: absolute;
    left: 11px;
    bottom: 316px;
    box-shadow: 0 20px 80px 3px #cfcfcf;
}

#scene08 .pic02{
    background: url("../img/scene08/pic02.png")no-repeat left top;
    width: 235px;
    height: 358px;
    position: absolute;
    left: 205px;
    bottom: 111px;
    box-shadow: 0 20px 80px 3px #cfcfcf;
}

#scene08 .pic03{
    background: url("../img/scene08/pic03.png")no-repeat left top;
    width: 235px;
    height: 358px;
    position: absolute;
    left: 530px;
    bottom: 402px;
    box-shadow: 0 20px 80px 3px #cfcfcf;
}

#scene08 .pic04{
    background: url("../img/scene08/pic04.png")no-repeat left top;
    width: 235px;
    height: 358px;
    position: absolute;
    left: 859px;
    bottom: 131px;
    box-shadow: 0 20px 80px 3px #cfcfcf;
}

#scene08 .pic05{
    background: url("../img/scene08/pic05.png")no-repeat left top;
    width: 235px;
    height: 358px;
    position: absolute;
    right: 417px;
    bottom: 213px;
    box-shadow: 0 20px 80px 3px #cfcfcf;
}

#scene08 .pic06{
    background: url("../img/scene08/pic06.png")no-repeat left top;
    width: 236px;
    height: 358px;
    position: absolute;
    right: 80px;
    bottom: 260px;
    box-shadow: 0 20px 80px 3px #cfcfcf;
}

#scene08 .pic07{
    background: url("../img/scene08/pic07.png")no-repeat left top;
    width: 236px;
    height: 358px;
    position: absolute;
    right: -152px;
    bottom: 472px;
    box-shadow: 0 20px 80px 3px #cfcfcf;
}



#scene09{
    height: 1500px;
    background: white;
    padding-top: 100px;
}

#scene09 .contents{
    width: 1141px;
    height: 1201px;
    margin: 0 auto;
    position: relative;
}

#scene09 .contents > div{transform: translate(0,30px); transition: all 1s; opacity: 0;}
#scene09 .contents > div.on{opacity: 1; transform: translate(0,0);}


#scene09 .contents .sun{
    background: url("../img/scene09/sun.png")no-repeat left top;
    width: 47px;
    height: 47px;
    position: absolute;
    left: -54px;
    top: 0;
    transform: rotate(0deg);
    animation: ani1 3s infinite;
    opacity: 1;
}

#scene09 .contents .title01{
    background: url("../img/scene09/title01.png")no-repeat left top;
    width: 189px;
    height: 34px;
    position: absolute;
    left: 0;
    top: 47px;
}

#scene09 .contents .title02{
    background: url("../img/scene09/title02.png")no-repeat left top;
    width: 234px;
    height: 34px;
    position: absolute;
    left: 0;
    top: 95px;
    transition-delay: .2s;
}

#scene09 .contents .typo{
    background: url("../img/scene09/typo.png")no-repeat left top;
    width: 575px;
    height: 74px;
    position: absolute;
    left: 569px;
    top: 60px;
    transition-delay: .4s;
}

#scene09 .phone01, #scene09 .phone02 {transform: translate(0,30px); transition: all 1s; opacity: 0;}
#scene09 .phone01.on, #scene09 .phone02.on{opacity: 1; transform: translate(0,0);}


#scene09 .phone01{
    background: url("../img/video/phone.png")no-repeat left top;
    width: 377px;
    height: 741px;
    position: absolute;
    left: 325px;
    bottom: 267px;
    border-radius: 50px;
    box-shadow: -20px 20px 40px 1px #cfcfcf;
    z-index: 900;
    transition-delay: .4s;
}



#scene09 .mp4_01{
    width: 318px;
    height: 691px;
    position: absolute;
    left: 355px;
    top: 630px;
    border-radius: 35px;
    background: white;
}


#scene09 .phone02{
    background: url("../img/scene09/phone02_02.png")no-repeat left top;
    width: 377px;
    height: 741px;
    position: absolute;
    left: 740px;
    bottom: 480px;
    border-radius: 50px;
    box-shadow: -20px 20px 40px 1px #cfcfcf;
    transition-delay: .2s;
}


#scene09 .phone02 .typo{
    position: absolute;
    left: 507px;
    top: 120px;
}

#scene09 .phone02 .typo > div {transform: translate(0,30px); transition: all 1s; opacity: 0;}
#scene09 .phone02 .typo > div.on{opacity: 1; transform: translate(0,0);}


#scene09 .phone02 .typo .name01{
     background: url("../img/scene09/name01.png")no-repeat left top;
     width: 146px;
     height: 18px;
    margin-bottom: 21px;
    position: relative;
 }
#scene09 .phone02 .circle{
    width: 13px;
    height: 13px;
    border-radius: 50%;
    position: absolute;
    left: -25px;
    top: 0;
    border: solid 2px #65cfff;
}


#scene09 .phone02 .circle > div{
    width: 200px;
    height: 2px;
    position: absolute;
    right: 13px;
    top: 4px;
    border-bottom: solid 2px #65cfff;
    z-index: 900;
}

#scene09 .phone02 .name02 .circle > div{
    width: 175px;
}

#scene09 .phone02 .name03 .circle > div{
    width: 330px;
}

#scene09 .phone02 .name04 .circle > div{
    width: 150px;
}

#scene09 .phone02 .typo .explain01{
    background: url("../img/scene09/explain01.png")no-repeat left top;
    width: 306px;
    height: 41px;
    margin-bottom: 60px;
}

#scene09 .phone02 .typo .name02{
    background: url("../img/scene09/name02.png")no-repeat left top;
    width: 161px;
    height: 19px;
    margin-bottom: 21px;
    position: relative;
    transition-delay: .2s;
}

#scene09 .phone02 .typo .explain02{
    background: url("../img/scene09/explain02.png")no-repeat left top;
    width: 338px;
    height: 66px;
    margin-bottom: 130px;
    transition-delay: .2s;
}

#scene09 .phone02 .typo .name03{
    background: url("../img/scene09/name03.png")no-repeat left top;
    width: 113px;
    height: 19px;
    margin-bottom: 21px;
    position: relative;
    transition-delay: .4s;
}

#scene09 .phone02 .typo .explain03{
    background: url("../img/scene09/explain03.png")no-repeat left top;
    width: 360px;
    height: 42px;
    margin-bottom: 62px;
    transition-delay: .4s;
}

#scene09 .phone02 .typo .name04{
    background: url("../img/scene09/name04.png")no-repeat left top;
    width: 92px;
    height: 19px;
    margin-bottom: 21px;
    position: relative;
    transition-delay: .6s;
}

#scene09 .phone02 .typo .explain04{
    background: url("../img/scene09/explain04.png")no-repeat left top;
    width: 355px;
    height: 41px;
    transition-delay: .6s;
}

#scene10{
    height: 1219px;
    background: #65cfff;
}

#scene10 .contents{
    width: 1141px;
    height: 1219px;
    margin: 0 auto;
    position: relative;
}

#scene10 .contents > div {transform: translate(0,30px); transition: all 1s; opacity: 0;}
#scene10 .contents > div.on{opacity: 1; transform: translate(0,0);}


#scene10 .contents .sun{
    background: url("../img/scene10/sun.png")no-repeat left top;
    width: 47px;
    height: 47px;
    position: absolute;
    top: 186px;
    left: -54px;
    transform: rotate(0deg);
    animation: ani1 3s infinite;
    opacity: 1;
}

#scene10 .contents .title01{
    background: url("../img/scene10/title01.png")no-repeat left top;
    width: 260px;
    height: 36px;
    position: absolute;
    top: 232px;
    left: 0;
}

#scene10 .contents .title02{
    background: url("../img/scene10/title02.png")no-repeat left top;
    width: 159px;
    height: 34px;
    position: absolute;
    top: 282px;
    left: 0;
    transition-delay: .2s;
}

#scene10 .contents .typo{
    background: url("../img/scene10/typo.png")no-repeat left top;
    width: 586px;
    height: 72px;
    position: absolute;
    top: 371px;
    left: 0;
    transition-delay: .4s;
}

#scene10 .contents .phone{
    background: url("../img/scene10/phone.png")no-repeat left top;
    width: 1097px;
    height: 772px;
    position: absolute;
    bottom: -100px;
    right: -200px;
    transition-delay: .6s;
    z-index: 300;
}

#scene10 .contents .phone .slide02{
    background: url("../img/scene10/slide02.png")no-repeat left top;
    width: 604px;
    height: 483px;
    position: absolute;
    bottom: 30px;
    left: -111px;
}

#scene10 .contents .phone .slide03{
    background: url("../img/scene10/slide03.png")no-repeat left top;
    width: 580px;
    height: 525px;
    position: absolute;
    top: -150px;
    right: 60px;
}

#scene10 .contents .phone .slide01{
    background: url("../img/scene10/slide01.png")no-repeat left top;
    width: 542px;
    height: 488px;
    position: absolute;
    top: 0;
    left: 163px;
}

#scene10 .contents .phone .blue_page{
    background: url("../img/scene10/blue_page.png")no-repeat left top;
    width: 930px;
    height: 700px;
    position: absolute;
    bottom: -160px;
    right: -310px;
}

#scene11{
    height: 1279px;
    background: white
}

#scene11 .contents{
    width: 1141px;
    height: 1279px;
    margin: 0 auto;
    position: relative;
}

#scene11 .contents > div {transform: translate(0,30px); transition: all 1s; opacity: 0;}
#scene11 .contents > div.on{opacity: 1; transform: translate(0,0);}


#scene11 .contents .sun{
    background: url("../img/scene11/sun.png")no-repeat left top;
    width: 47px;
    height: 47px;
    position: absolute;
    top: 250px;
    left: -54px;
    transform: rotate(0deg);
    animation: ani1 3s infinite;
    opacity: 1;
}

#scene11 .contents .title01{
    background: url("../img/scene11/title01.png")no-repeat left top;
    width: 236px;
    height: 34px;
    position: absolute;
    top: 297px;
    left: 0;
}

#scene11 .contents .title02{
    background: url("../img/scene11/title02_01.png")no-repeat left top;
    width: 340px;
    height: 34px;
    position: absolute;
    top: 347px;
    left: 0;
    transition-delay: .2s;
}

#scene11 .contents .typo{
    background: url("../img/scene11/typo_03.png")no-repeat left top;
    width: 523px;
    height: 44px;
    position: absolute;
    top: 347px;
    left: 571px;
    transition-delay: .4s;
}

#scene11 .contents .background{
    width: 1251px;
    height: 483px;
    background: url("../img/scene11/interior.jpg")no-repeat left top fixed;
    position: absolute;
    bottom: 147px;
    left: -42px;
    opacity: 1;
}

#scene11 .contents .background .phone01{
    background: url("../img/video/phone.png")no-repeat left top;
    width: 377px;
    height: 741px;
    position: absolute;
    top: -150px;
    left: 399px;
    z-index: 701;
    opacity: 1;
}

#scene11 .contents .background .mp4_02{
    width: 318px;
    height: 691px;
    position: absolute;
    left: 426px;
    top: -130px;
    border-radius: 35px;
    background: #65cfff;
    opacity: 1;
}


#scene11 .contents .background .phone02{
    background: url("../img/scene11/phone01.png")no-repeat left top;
    width: 497px;
    height: 828px;
    position: absolute;
    top: -198px;
    left: 834px;
    opacity: 1;
}


#scene12{
    height: 1493px;
    background: white;
}

#scene12 > div {transform: translate(0,80px); transition: all 1s; opacity: 0;}
#scene12 > div.on{opacity: 1; transform: translate(0,0);}


#scene12 .phone01{
    background: url("../img/scene12/phone01_02.png")no-repeat left top;
    width: 374px;
    height: 735px;
    position: absolute;
    top: 247px;
    left: 366px;
    border-radius: 50px;
    box-shadow: -20px 20px 30px 3px #cfcfcf;
}

#scene12 .phone02{
    background: url("../img/scene12/phone02.png")no-repeat left top;
    width: 376px;
    height: 736px;
    position: absolute;
    top: 482px;
    left: 777px;
    border-radius: 50px;
    box-shadow: -20px 20px 30px 3px #cfcfcf;
    transition-delay: .6s;
}

#scene12 .phone03{
    background: url("../img/scene12/phone03.png")no-repeat left top;
    width: 376px;
    height: 737px;
    position: absolute;
    top: 387px;
    right: 317px;
    border-radius: 50px;
    box-shadow: -20px 20px 30px 3px #cfcfcf;
    transition-delay: .3s;
}


#scene13{
    background: #f2f2f2;
    height: 1486px;
}

#scene13 .contents{
    width: 1141px;
    height: 1486px;
    margin: 0 auto;
    position: relative;
}

#scene13 .contents > div {transform: translate(0,30px); transition: all 1s; opacity: 0;}
#scene13 .contents > div.on{opacity: 1; transform: translate(0,0);}


#scene13 .contents .sun{
    background: url("../img/scene13/sun.png")no-repeat left top;
    width: 47px;
    height: 47px;
    position: absolute;
    top: 198px;
    left: -54px;
    transform: rotate(0deg);
    animation: ani1 3s infinite;
    opacity: 1;
}

#scene13 .contents .title01{
    background: url("../img/scene13/title01.png")no-repeat left top;
    width: 335px;
    height: 37px;
    position: absolute;
    top: 245px;
    left: 0;
}

#scene13 .contents .title02{
    background: url("../img/scene13/title02.png")no-repeat left top;
    width: 212px;
    height: 34px;
    position: absolute;
    top: 295px;
    left: 0;
    transition-delay: .2s;
}

#scene13 .contents .typo{
    background: url("../img/scene13/typo.png")no-repeat left top;
    width: 532px;
    height: 75px;
    position: absolute;
    top: 254px;
    left: 572px;
    transition-delay: .4s;
}

#scene13 .contents .phone01{
    background: url("../img/scene13/phone01.png")no-repeat left top;
    width: 351px;
    height: 759px;
    position: absolute;
    bottom: 179px;
    left: 110px;
    border-radius: 20px;
    box-shadow: 80px 20px 30px 1px #cfcfcf;
    opacity: 1;
}

#scene13 .contents .phone01 .left{
    position: absolute;
    left: -111px;
    top: 70px;
}

#scene13 .contents .phone01 .left > div, #scene13 .contents .phone02 .right > div{transform: translate(0,30px); transition: all 1s; opacity: 0;}
#scene13 .contents .phone01 .left > div.on, #scene13 .contents .phone02 .right > div.on{opacity: 1; transform: translate(0,0);}


#scene13 .contents .phone01 .left .left01{
    background: url("../img/scene13/left01.png")no-repeat left top;
    width: 190px;
    height: 23px;
    position: absolute;
    right: -20px;
    top: 0;
    margin-bottom: 265px;
}

#scene13 .contents .phone01 .left .left02{
    background: url("../img/scene13/left02.png")no-repeat left top;
    width: 190px;
    height: 18px;
    position: absolute;
    right: -20px;
    top: 291px;
    margin-bottom: 168px;
    transition-delay: .4s;
}

#scene13 .contents .phone01 .left .left03{
    background: url("../img/scene13/left03.png")no-repeat left top;
    width: 223px;
    height: 17px;
    position: absolute;
    right: -20px;
    top: 480px;
    transition-delay: .6s;
}

#scene13 .contents .phone01 .line{
    width: 100px;
    height: 3px;
    border-bottom: solid 2px #65cfff;
    position: absolute;
    top: 6px;
    right: -111px;
}

#scene13 .contents .phone02{
    background: url("../img/scene13/phone02.png")no-repeat left top;
    width: 352px;
    height: 759px;
    position: absolute;
    bottom: 179px;
    right: 110px;
    border-radius: 20px;
    box-shadow: 80px 20px 30px 1px #cfcfcf;
    opacity: 1;
}

#scene13 .contents .phone02 .right{
    position: absolute;
    right: -275px;
    top: 120px;
}

#scene13 .contents .phone02 .right .right01{
    background: url("../img/scene13/right01.png")no-repeat left top;
    width: 102px;
    height: 24px;
    margin-bottom: 71px;
    margin-right: 10px;

}

#scene13 .contents .phone02 .right .right02{
    background: url("../img/scene13/right02.png")no-repeat left top;
    width: 164px;
    height: 18px;
    margin-bottom: 118px;
    transition-delay: .2s;
}

#scene13 .contents .phone02 .right .right03{
    background: url("../img/scene13/right03.png")no-repeat left top;
    width: 164px;
    height: 18px;
    margin-bottom: 271px;
    transition-delay: .4s;
}

#scene13 .contents .phone02 .right .right04{
    background: url("../img/scene13/right04.png")no-repeat left top;
    width: 129px;
    height: 18px;
    transition-delay: .6s;
}

#scene13 .contents .phone02 .right .line{
    width: 111px;
    height: 3px;
    border-bottom: solid 2px #65cfff;
    position: absolute;
    top: 6px;
    left: -111px;
    margin-right: 10px;
    z-index: 999;
}

#scene13 .contents .phone02 .right .right01 .line{
    left: -117px;
    top: 8px;
}

#scene13 .contents .phone02 .right .right02 .line{
    top: 8px;
    left: -117px;
}

#scene13 .contents .phone02 .right .right03 .line{
    width: 250px;
    top: 8px;
    left: -258px;
}

#scene13 .contents .phone02 .right .right03 .line .line02{
    width: 2px;
    height: 38px;
    border-left: solid 2px #65cfff;
    position: absolute;
    left: 0;
    top: 4px;
    z-index: 902;
}

#scene13 .contents .phone02 .right .right03 .line .line02 .line03{
    width: 100px;
    position: absolute;
    border-bottom: solid 2px #65cfff;
    left: -102px;
    bottom: 1px;
    z-index: 901;
}

#scene13 .contents .phone02 .right .right04 .line{
    top: 7px;
    left: -117px;
}



#scene14{
    background: #f2f2f2;
    height: 1000px;
    width: 1920px;
    padding-top: 150px;

}

#scene14 .circle {
    width: 699px;
    height: 699px;
    border-radius: 50%;
    background: url("../img/scene14/interior.jpg") no-repeat left top fixed;
    position: absolute;
    left: 600px;
}

#scene14 .circle .screen{
    width: 263px;
    height: 466px;
    background: url("../img/scene14/screen.png") no-repeat left top;
    position: absolute;
    top: 113px;
    left: 210px;
}

#scene14 .circle .screen .screen{
    width: 263px;
    height: 466px;
    background: url("../img/scene14/screen.png") no-repeat left top;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 500;
}

#scene14 .circle .screen .shadow{
    background: url("../img/scene14/shadow.png");
    width: 301px;
    height: 504px;
    position: absolute;
    top: 0;
    left: 0;
}

#scene14 .circle .row{
    position: absolute;
    top: 138px;
    left: 620px;
}

#scene14 .circle .pic01{
    width: 186px;
    height: 186px;
    background: url("../img/scene14/pic01.png") no-repeat left top;
    position: absolute;
    left: -625px;
    top: 138px;
    border-radius: 50%;
    box-shadow: 10px 10px 10px 2px #cfcfcf;
}

#scene14 .circle .pic02{
    width: 186px;
    height: 186px;
    background: url("../img/scene14/pic02.png") no-repeat left top;
    position: absolute;
    left: -287px;
    top: 138px;
    border-radius: 50%;
    box-shadow: 10px 10px 10px 2px #cfcfcf;
}

#scene14 .circle .pic03{
    width: 186px;
    height: 186px;
    background: url("../img/scene14/pic03.png") no-repeat left top;
    position: absolute;
    right: -287px;
    top: 138px;
    border-radius: 50%;
    box-shadow: 10px 10px 10px 2px #cfcfcf;
}

#scene14 .circle .pic04{
    width: 186px;
    height: 186px;
    background: url("../img/scene14/pic04.png") no-repeat left top;
    position: absolute;
    right: -625px;
    top: 138px;
    border-radius: 50%;
    box-shadow: 10px 10px 10px 2px #cfcfcf;
}

#scene15{
    background: #f2f2f2;
    height: 1707px;
}

#scene15 .contents{
    width: 1141px;
    height: 1707px;
    margin: 0 auto;
    position: relative;
}

#scene15 .contents > div{transform: translate(0,30px); transition: all 1s; opacity: 0;}
#scene15 .contents > div.on{opacity: 1; transform: translate(0,0);}


#scene15 .contents .sun{
    width: 47px;
    height: 47px;
    background: url("../img/scene15/sun.png") no-repeat left top;
    position: absolute;
    left: -54px;
    top: 0;
    transform: rotate(0deg);
    animation: ani1 3s infinite;
    opacity: 1;
}

#scene15 .contents .title01{
    width: 297px;
    height: 36px;
    background: url("../img/scene15/title01.png") no-repeat left top;
    position: absolute;
    left: 0;
    top: 37px;
}

#scene15 .contents .title02{
    width: 238px;
    height: 34px;
    background: url("../img/scene15/title02.png") no-repeat left top;
    position: absolute;
    left: 0;
    top: 89px;
    transition-delay: .2s;
}

#scene15 .contents .typo{
    width: 550px;
    height: 44px;
    background: url("../img/scene15/typo.png") no-repeat left top;
    position: absolute;
    left: 0;
    top: 171px;
    transition-delay: .4s;
}

#scene15 .contents .phone01{
    width: 418px;
    height: 815px;
    background: url("../img/scene15/phone01.png") no-repeat left top;
    position: absolute;
    left: 0;
    top: 463px;
    border-radius: 50px;
    /*box-shadow: 10px 10px 30px 1px #cfcfcf;*/
    transition-delay: .2s;
}

#scene15 .contents .screen{
    width: 414px;
    height: 2685px;
    background: url("../img/scene15/screen.jpg") no-repeat left top;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 990;
    /*box-shadow: 10px 10px 30px 1px #cfcfcf;*/
}


#scene16{
    height: 553px;
    background: black;
}

#scene16 .interior{
    width: 1920px;
    height: 553px;
    background: url("../img/scene16/interior.jpg") no-repeat left top fixed;
    /*position: fixed;*/
    /*left: 0;*/
    /*top: 0;*/
}

#scene17{
    background: white;
    height: 1785px;
}

#scene17 > div{
    transform: translate(0,80px);
    opacity: 0;
    transition: all 1s;
}

#scene17 > div.on{
    transform: translate(0,0);
    opacity: 1;
}

#scene17 .pic01{
    background: url("../img/scene17/pic01.jpg") no-repeat left top;
    width: 381px;
    height: 797px;
    position: absolute;
    top: 637px;
    left: 110px;
    box-shadow: 0 40px 40px 1px #cfcfcf;
    transition-delay: .2s;
}

#scene17 .pic02{
    background: url("../img/scene17/pic02.jpg") no-repeat left top;
    width: 380px;
    height: 796px;
    position: absolute;
    bottom: 38px;
    right: 448px;
    box-shadow: 0 40px 40px 1px #cfcfcf;
    transition-delay: .4s;
}

#scene17 .pic03{
    background: url("../img/scene17/pic03.jpg") no-repeat left top;
    width: 380px;
    height: 796px;
    position: absolute;
    bottom: 274px;
    right: -22px;
    box-shadow: 0 40px 40px 1px #cfcfcf;
    transition-delay: .6s;
}

#scene17 .phone{
    background: url("../img/scene17/phone.png") no-repeat left top;
    width: 420px;
    height: 814px;
    position: absolute;
    top: 409px;
    left: 588px;
}


#scene18{
    height: 1059px;
    background: url("../img/scene18/phone.jpg") no-repeat left top;;
}