#content{
    position: relative;
    display: block;
    padding: 0;
    margin: 0;
    margin-top: 0px;
    margin-bottom: 110px;
    overflow: hidden;
} 



#content #video .mouse{
    position: absolute;
    width: 38px;
    display: block;
    bottom: 55px;
    left: 50%;
    background-image: url(../images/home/mouse.png);
    background-size: 100%;
    height: 78px;
    margin-left: -19px;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0;cursor: pointer;
        z-index: 10;
}
#content #video .mouse img{
width: 12px;
    position: relative;
    top: 28px;
    left: 13px;
    -webkit-animation: mouse-act 3s infinite; /* Chrome, Safari, Opera */
    animation: mouse-act 3s infinite;
}


#content #video{
    display: block;
    width: 100%;
    height: calc(100vh - 80px);
    min-height: 600px;
    position: relative;
    z-index: 10;
    background-size: 0;
    overflow: hidden;
    opacity: 0;
    margin-bottom: 113px;
}


#content #video .video-js{
    display: block;
    width: 100%;
    height: calc(100vh - 80px);
    position: relative;
    z-index: 10;
    background-size: 0;
}




section.videos{
  height: 100%;
  width: 100vw;
  position: absolute;
  z-index: 5;
  background-color: #2c3e50;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
section.videos:after{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 30;
    top: 0;
    left: 0;
    -webkit-transition:all .5s ease;
    -moz-transition:all .5s ease;
    -o-transition:all .5s ease;
    -ms-transition:all .5s ease;
    transition:all .5s ease;
    background-color: rgba(0, 0, 0, 0.6);
}
section.videos.active:after{
        background-color: rgba(0, 0, 0, 0);
}
section.videos > div{
  z-index: 5;
    height: 100%;
  width: 100vw;
}

#main_word{
    position: absolute;
    display: block;
    z-index: 20;
    top: 44%;
    left: 50%;
    width: 730px;
    margin-left: -365px;
    text-align: center;
    height: 290px;
    margin-top: -131px;
}
#main_word .logo_s{
        display: block;
    width: 100%;
    position: relative;
    margin-bottom: 25px;height: 100px;
}
#main_word .logo_s .imgs{
        display: block;
    opacity: 0;
}
#main_word .logo_s .imgs img{
    width: 240px;
}
#main_word .logo_s .imgs.imgs02 img{
width: 0;
    -webkit-transition:all 1s ease;
    -moz-transition:all 1s ease;
    -o-transition:all 1s ease;
    -ms-transition:all 1s ease;
    transition:all 1s ease;
}
#main_word .logo_s .imgs.imgs02.active img{
width: 155px;opacity: 1;
}
#main_word .logo_s .imgs.imgs01{

}

#main_word h1{
    
}
#main_word .memo{
    font-size: 14px;
    display: block;
    line-height: 23px;
    width: 100%;
    color: white;
    letter-spacing: 4px;
    margin-top: 42px;
    opacity: 0;
        -webkit-transition:all 1.5s ease;
    -moz-transition:all 1.5s ease;
    -o-transition:all 1.5s ease;
    -ms-transition:all 1.5s ease;
    transition:all 1.5s ease;
}
#main_word .memo.active{
    opacity: 1;
    letter-spacing: 1px;
}
/* Clip text element */
#main_word .clip-text{
    font-size: 65px;
    opacity: 0;
    font-weight: bold;font-family: 'Questrial', sans-serif;
    line-height: 1;    margin-top: 0;
    position: relative;
    display: inline-block;
    text-align: center;
    letter-spacing: 5px;
    color: #fff;    margin-bottom: 0;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; 
    -webkit-transition:opacity 2s ease,letter-spacing 2s ease;
    -moz-transition:opacity 2s ease,letter-spacing 2s ease;
    -o-transition:opacity 2s ease,letter-spacing 2s ease;
    -ms-transition:opacity 2s ease,letter-spacing 2s ease;
    transition:opacity 2s ease,letter-spacing 2s ease;
}
#main_word .clip-text.active{
    opacity: 1;
    letter-spacing: 3px;
}

#main_word .clip-text_bg{
    background-image: url(../images/home/text_bg.png);
        background-size: 500%;
        background-position: 0 0;
        background-repeat: no-repeat;
}
#main_word .clip-text_bg.active{
    -webkit-animation: background 5s infinite; /* Chrome, Safari, Opera */
    animation: background 5s infinite;
}


#tab_menu {
    width: 100%;
    position: relative;
    margin-top: 0;
    background-color: white;
    padding-top: 0;
    display: block;
    text-align: center;
    margin: 0 auto 0;
    height: 92px;    
    -webkit-transition:width .3s ease;
    -moz-transition:width .3s ease;
    -o-transition:width .3s ease;
    -ms-transition:width .3s ease;
    transition:width .3s ease;
}
#tab_menu.scroll-to-fixed-fixed{
    padding-top: 0;
}
#tab_menu .block {
    max-width: 1002px;
    display: block;
    width: 100%;
    margin: 0 auto;
    border-bottom: 1px solid black;
    height: 92px;
                -webkit-transition:all .6s ease;
    -moz-transition:all .6s ease;
    -o-transition:all .6s ease;
    -ms-transition:all .6s ease;
    transition:all .6s ease;
}
#tab_menu.scroll-to-fixed-fixed .block{
    max-width: 100%;
}

#tab_menu .tlink{
    float: left;
    font-size: 18px;
    text-align: center;
    color: #5f5f5f;
    position: relative;
    margin-bottom: 10px;
    cursor: pointer;
    letter-spacing: 2px;
    width: 25%;
    height: 92px;
    padding: 0;
    margin: 0;
    line-height: 28px;
    overflow: hidden;
    display: table;
            -webkit-transition:all .6s ease;
    -moz-transition:all .6s ease;
    -o-transition:all .6s ease;
    -ms-transition:all .6s ease;
    transition:all .6s ease;
}
#tab_menu .tlink:after{
    content: '';
    height: 100%;
    width: 100%;
    position: absolute;
background: rgba(31,191,206,1);
background: -moz-linear-gradient(left, rgba(31,191,206,1) 0%, rgba(69,214,163,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(31,191,206,1)), color-stop(100%, rgba(69,214,163,1)));
background: -webkit-linear-gradient(left, rgba(31,191,206,1) 0%, rgba(69,214,163,1) 100%);
background: -o-linear-gradient(left, rgba(31,191,206,1) 0%, rgba(69,214,163,1) 100%);
background: -ms-linear-gradient(left, rgba(31,191,206,1) 0%, rgba(69,214,163,1) 100%);
background: linear-gradient(to right, rgba(31,191,206,1) 0%, rgba(69,214,163,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1fbfce', endColorstr='#45d6a3', GradientType=1 );
opacity: 0;
left: 0;
top: -0px;
z-index: 1;
    -webkit-transition:all .6s ease;
    -moz-transition:all .6s ease;
    -o-transition:all .6s ease;
    -ms-transition:all .6s ease;
    transition:all .6s ease;
}

#tab_menu .tlink span{
    vertical-align: middle;
    text-align: center;z-index: 10;
    display: table-cell;    position: relative;
}
#tab_menu .tlink span:after{
content: '';
    background-color: #cecdcd;
    height: 40px;
    width: 1px;
    right: 0;
    position: absolute;
    top: 25px;
}
#tab_menu .tlink:last-child span:after{
    display: none;
}
#tab_menu .tlink:hover,#tab_menu .tlink.active{
    color: white;
    letter-spacing: 4px;
}
#tab_menu .tlink:hover:after,#tab_menu .tlink.active:after{
    opacity: 1;top: 0;
}

.step_block{
    display: block;
    width: 100%;
    position: relative;
        z-index: 10;
}
#t1{
     margin-top: 110px;    height: 1090px;
}
.step_block .block{
    width: 1002px;
    display: block;
    margin: 0 auto;
    position: relative;
}
.step_block .info{
    width: 400px;
    display: block;
    float: left;
    position: relative;
    letter-spacing: 1px;    margin-top: 100px;
}
.step_block .info h3{
    color: #767676;
    font-size: 20px;
    display: block;opacity: 0;
    width: 100%;
    font-weight: 100;
    position: relative;top: 20px;
    -webkit-transition:all 1.5s ease;
    -moz-transition:all 1.5s ease;
    -o-transition:all 1.5s ease;
    -ms-transition:all 1.5s ease;
    transition:all 1.5s ease;
}
.step_block .info.active h3{
    opacity: 1;top: 0;
}
.step_block .info h4{
    color: #2b2b2b;
    font-size: 36px;opacity: 0;
    line-height: 45px;
    margin-top: 30px;position: relative;
    letter-spacing: 2px;    font-weight: 300;
    -webkit-transition:all 1.5s ease;
    -moz-transition:all 1.5s ease;
    -o-transition:all 1.5s ease;
    -ms-transition:all 1.5s ease;
    transition:all 1.5s ease;
        -webkit-transition-delay: .3s; /* Safari */
    transition-delay: .3s;
    top: 20px;
}
.step_block .info.active h4{
    opacity: 1;
    top: 0;
}
.step_block .info h4 b{
    font-weight: bold;
}
.step_block .info .word{
    display: block;opacity: 0;
    width: 100%;
    color: #5f5f5f;
    font-size: 18px;
    line-height: 33px;
    margin-top: 120px;
    position: relative;
    letter-spacing: 2px;
        -webkit-transition:all 1s ease;
    -moz-transition:all 1s ease;
    -o-transition:all 1s ease;
    -ms-transition:all 1s ease;
    transition:all 1s ease;
    top: 20px;
           -webkit-transition-delay: .6s; /* Safari */
    transition-delay: .6s;
}
.step_block .info .word:after{
    content: '';
    background: rgba(31,191,206,1);
background: -moz-linear-gradient(left, rgba(31,191,206,1) 0%, rgba(69,214,163,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(31,191,206,1)), color-stop(100%, rgba(69,214,163,1)));
background: -webkit-linear-gradient(left, rgba(31,191,206,1) 0%, rgba(69,214,163,1) 100%);
background: -o-linear-gradient(left, rgba(31,191,206,1) 0%, rgba(69,214,163,1) 100%);
background: -ms-linear-gradient(left, rgba(31,191,206,1) 0%, rgba(69,214,163,1) 100%);
background: linear-gradient(to right, rgba(31,191,206,1) 0%, rgba(69,214,163,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1fbfce', endColorstr='#45d6a3', GradientType=1 );
position: absolute;
    width: 0;
    height: 3px;
    display: block;
    top: -40px;

    -webkit-transition:all .6s ease;
    -moz-transition:all .6s ease;
    -o-transition:all .6s ease;
    -ms-transition:all .6s ease;
    transition:all .6s ease;
        -webkit-transition-delay: .8s; /* Safari */
    transition-delay: .8s;
}
.step_block .info.active .word{
    opacity: 1;top: 0;
}
.step_block .info.active .word:after{
    width: 60px;
}
#t1 .info .tips{
    display: block;
    width: 185px;
    position: relative;opacity: 0;
    margin-top: 90px;
}
#t1 .info .tips .imgs{
    display: block;
    width: 100%;
}
#t1 .info .tips .imgs img{
    width: 100%;
}
#t1 .info .tips .text{
    display: block;
    width: 100%;
    position: relative;
    margin-top: 20px;
    border-top: 1px solid gray;
    padding-top: 15px;
    text-align: center;
}
#t1 .info .tips .text .h1{
    color: #2b2b2b;
    font-size: 27px;
    display: block;
    width: 100%;
    font-weight: bold;
}
#t1 .info .tips .text .h2{
    color: #a2a2a2;
    font-size: 13px;
    display: block;
    width: 100%;
    letter-spacing: 7px;
    margin-top: 14px;
}
#t1 .piano_01{
width: 850px;
    position: absolute;
    height: 1090px;
    left: 450px;
    top: 0;
}

#t1 .piano_01 .piano_img{
    width: 100%;
    display: block;
    position: relative;
    z-index: 1;    margin-top: 200px;
    opacity: 0;
}
#t1 .piano_01 .piano_img img{
    width: 100%;
}

#t1 .piano_01{

}
#t1 .piano_01 .atob{
  position: absolute;
    top: 0;
    left: 234px;
    z-index: 10;  
}
#t1 .piano_01 .atob .p_a{
            display: block;
    width: 100%;opacity: 0;
}
#t1 .piano_01 .atob .p_a img{
    width: 180px;
}
#t1 .piano_01 .atob .p_b{
        display: block;
    width: 100%;
    margin-top: 185px;opacity: 0;
}
#t1 .piano_01 .atob .p_b img{
    width: 180px;
}
#t1 .piano_01 .atob .line{
        position: absolute;
    width: 4px;
    height: 0;
    display: block;
    left: 88px;
    top: 179px;
    background: rgba(31,191,206,1);
background: -moz-linear-gradient(left, rgba(31,191,206,1) 0%, rgba(69,214,163,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(31,191,206,1)), color-stop(100%, rgba(69,214,163,1)));
background: -webkit-linear-gradient(left, rgba(31,191,206,1) 0%, rgba(69,214,163,1) 100%);
background: -o-linear-gradient(left, rgba(31,191,206,1) 0%, rgba(69,214,163,1) 100%);
background: -ms-linear-gradient(left, rgba(31,191,206,1) 0%, rgba(69,214,163,1) 100%);
background: linear-gradient(to right, rgba(31,191,206,1) 0%, rgba(69,214,163,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1fbfce', endColorstr='#45d6a3', GradientType=1 );
        -webkit-transition:all .7s ease;
    -moz-transition:all .7s ease;
    -o-transition:all .7s ease;
    -ms-transition:all .7s ease;
    transition:all .7s ease;
    -webkit-transition-delay: 2s; /* Safari */
    transition-delay: 2s;
}
#t1 .piano_01.active .atob .line{
    height: 189px;
}



#t1 .piano_01 .s_link{
    background-image: url(../images/home/link.png);
    background-repeat: no-repeat;
    background-size: 56px;
    height: 70px;
    background-position: right top;
    padding-right: 72px;
    width: 170px;
    text-align: right;
    font-weight: bold;
    line-height: 19px;
    padding-top: 5px;
    position: absolute;
    left: -153px;
    top: 45%;
    opacity: 0;
            -webkit-transition:all 1.5s ease;
    -moz-transition:all 1.5s ease;
    -o-transition:all 1.5s ease;
    -ms-transition:all 1.5s ease;
    transition:all 1.5s ease;
    -webkit-transition-delay:2.2s; /* Safari */
    transition-delay:2.2s;
}
#t1 .piano_01.active .s_link{
    opacity: 1;
    left: -113px;
}
#t1 .wifi{
    width: 120px;
    height: 150px;
    position: absolute;
    z-index: 10;
    left: 25px;
    top: 47%;
}
#t1 .wifi .line{
    position: absolute;
    right: 0;
    bottom: 0;opacity: 0;
    -webkit-transition:all .7s ease;
    -moz-transition:all .7s ease;
    -o-transition:all .7s ease;
    -ms-transition:all .7s ease;
    transition:all .7s ease;
}
#t1 .wifi .line img{
width: 109px;
}
#t1 .wifi .music{
    position: absolute;
    left: 0;
    top: 0;opacity: 0;
        -webkit-transition:all .7s ease;
    -moz-transition:all .7s ease;
    -o-transition:all .7s ease;
    -ms-transition:all .7s ease;
    transition:all .7s ease;
    -webkit-transition-delay:1.2s; /* Safari */
    transition-delay:1.2s;
}
#t1 .wifi.active .music{
    opacity: 1;
}
#t1 .wifi .music img{
    width: 53px;
}
#t1 .wifi.active .l01{
    opacity: 1;
}
#t1 .wifi.active .l02{
        -webkit-transition-delay:.4s; /* Safari */
    transition-delay:.4s;
    opacity: 1;
}
#t1 .wifi.active .l03{
        -webkit-transition-delay:.8s; /* Safari */
    transition-delay:.8s;
    opacity: 1;
}

/*t2*/

#t2{
    display: block;
    width: 100%;
    height: 1020px;
    margin-top: 118px;
    position: relative;
}

#t2 .info{
float: right;
    margin-top: 290px;z-index: 2;
        background: white;
    padding-bottom: 60px;
    padding-top: 60px;
}

#t2 .piano_02{
    opacity: 0;
position: absolute;
    right: 430px;
    z-index: 2;
    top: 138px;
}
#t2 .piano_02 .piano_img{

}
#t2 .piano_02 img{
    width: 800px;
}
#t2 .borders{
    width: 722px;
    height: 886px;
    display: block;
    position: absolute;
    z-index: 1;
    left: 50%;
    margin-left: -361px;
    top: 136px;
}
#t2 .borders .top{

}
#t2 .borders .top:before{
    content: '';
    position: absolute;
    width: 0%;
    height: 10px;
    display: block;
    left: 45%;
    top: 0;
background: rgba(52,210,186,1);
background: -moz-linear-gradient(left, rgba(52,210,186,1) 0%, rgba(93,221,133,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(52,210,186,1)), color-stop(100%, rgba(93,221,133,1)));
background: -webkit-linear-gradient(left, rgba(52,210,186,1) 0%, rgba(93,221,133,1) 100%);
background: -o-linear-gradient(left, rgba(52,210,186,1) 0%, rgba(93,221,133,1) 100%);
background: -ms-linear-gradient(left, rgba(52,210,186,1) 0%, rgba(93,221,133,1) 100%);
background: linear-gradient(to right, rgba(52,210,186,1) 0%, rgba(93,221,133,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#34d2ba', endColorstr='#5ddd85', GradientType=1 );
        -webkit-transition:all .7s ease;
    -moz-transition:all .7s ease;
    -o-transition:all .7s ease;
    -ms-transition:all .7s ease;
    transition:all .7s ease;
}

#t2 .borders.active .top:before{
    width: 55%;

}
#t2 .borders.active .top:after{
    height: 100%;

}

#t2 .borders .top:after{
content: '';
    position: absolute;
    width: 10px;
    height: 0%;
    display: block;
    background: #5ddd85;
    right: 0;
    top: 0;
    -webkit-transition:all 2s ease;
    -moz-transition:all 2s ease;
    -o-transition:all 2s ease;
    -ms-transition:all 2s ease;
    transition:all 2s ease;
    -webkit-transition-delay:.6s; /* Safari */
    transition-delay:.6s;
}

#t2 .borders .bottom:before{
    content: '';
    position: absolute;
    width: 10px;
    height: 0;
    display: block;
    left: 0;
    bottom: 0;
    background: #01c4fb;
        -webkit-transition:all .5s ease;
    -moz-transition:all .5s ease;
    -o-transition:all .5s ease;
    -ms-transition:all .5s ease;
    transition:all .5s ease;
    -webkit-transition-delay:.8s; /* Safari */
    transition-delay:.8s;
}
#t2 .borders .bottom:after{
    content: '';
    position: absolute;
    width: 0%;
    height: 10px;
    display: block;
    right: 0;
    bottom: 0;
    background: rgba(0,197,252,1);
background: -moz-linear-gradient(left, rgba(0,197,252,1) 0%, rgba(93,221,133,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(0,197,252,1)), color-stop(100%, rgba(93,221,133,1)));
background: -webkit-linear-gradient(left, rgba(0,197,252,1) 0%, rgba(93,221,133,1) 100%);
background: -o-linear-gradient(left, rgba(0,197,252,1) 0%, rgba(93,221,133,1) 100%);
background: -ms-linear-gradient(left, rgba(0,197,252,1) 0%, rgba(93,221,133,1) 100%);
background: linear-gradient(to right, rgba(0,197,252,1) 0%, rgba(93,221,133,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00c5fc', endColorstr='#5ddd85', GradientType=1 );
    -webkit-transition:all 1s ease;
    -moz-transition:all 1s ease;
    -o-transition:all 1s ease;
    -ms-transition:all 1s ease;
    transition:all 1s ease;
}


#t2 .borders .bottom.active:after{
    width: 100%;
}
#t2 .borders .bottom.active:before{
    height: 55px;
}



/*t3*/
#t3{
    display: block;
    width: 100%;
    height: 940px;
    margin-top: 214px;
    position: relative;
}
#t3 .info{
    float: left;
    margin-top: 210px;
    z-index: 2;
    background: white;
    padding-bottom: 0;
    padding-top: 0;
}

#t3 .piano_03{
    position: absolute;
    left: 540px;
    z-index: 2;
    top: 0;
}
#t3 .piano_03 .piano_img{
    position: relative;
    z-index: 1;
    top: 110px;opacity: 0;
}
#t3 .piano_03 img{
    width: 757px;
}

#t3 .piano_03 .line{
    position: absolute;
    z-index: 2;
    top: 0;
    width: 535px;
    height: 133px;
    left: 0;opacity: 0;
}
#t3 .piano_03 .line div{
    width: 86px;
    float: left;
    border-right: 1px solid #b9b9b9;
    display: block;
    position: relative;
    height: 100%;opacity: 0;
}
#t3 .piano_03 .line div:last-child{
    border-right: 0;
}
#t3 .piano_03 .line .l_1{
   
}
#t3 .piano_03 .line .l_1:before{
    content: '';
    width: 10px;
    height: 100px;
    position: relative;
    display: block;
    float: left;
    left: 40px;
    opacity: 0;
    -webkit-animation: lines01 5s infinite;
    animation: lines01 5s infinite;
    background: rgba(0,197,252,1);
background: -moz-linear-gradient(top, rgba(0,197,252,1) 0%, rgba(93,221,133,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,197,252,1)), color-stop(100%, rgba(93,221,133,1)));
background: -webkit-linear-gradient(top, rgba(0,197,252,1) 0%, rgba(93,221,133,1) 100%);
background: -o-linear-gradient(top, rgba(0,197,252,1) 0%, rgba(93,221,133,1) 100%);
background: -ms-linear-gradient(top, rgba(0,197,252,1) 0%, rgba(93,221,133,1) 100%);
background: linear-gradient(to bottom, rgba(0,197,252,1) 0%, rgba(93,221,133,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00c5fc', endColorstr='#5ddd85', GradientType=0 );
}

#t3 .piano_03 .line .l_2 span:before{
content: '';
    width: 10px;
    height: 23px;
    position: relative;
    display: block;
    left: 0;
    top: 57px;
    background: rgba(0,197,252,1);
background: -moz-linear-gradient(top, rgba(0,197,252,1) 0%, rgba(93,221,133,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,197,252,1)), color-stop(100%, rgba(93,221,133,1)));
background: -webkit-linear-gradient(top, rgba(0,197,252,1) 0%, rgba(93,221,133,1) 100%);
background: -o-linear-gradient(top, rgba(0,197,252,1) 0%, rgba(93,221,133,1) 100%);
background: -ms-linear-gradient(top, rgba(0,197,252,1) 0%, rgba(93,221,133,1) 100%);
background: linear-gradient(to bottom, rgba(0,197,252,1) 0%, rgba(93,221,133,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00c5fc', endColorstr='#5ddd85', GradientType=0 );
}
#t3 .piano_03 .line .l_2 span:after{
content: '';
    width: 10px;
    height: 8px;
    position: relative;
    display: block;
    left: 0;
    top: 62px;
    background: rgba(0,197,252,1);
background: -moz-linear-gradient(top, rgba(0,197,252,1) 0%, rgba(93,221,133,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,197,252,1)), color-stop(100%, rgba(93,221,133,1)));
background: -webkit-linear-gradient(top, rgba(0,197,252,1) 0%, rgba(93,221,133,1) 100%);
background: -o-linear-gradient(top, rgba(0,197,252,1) 0%, rgba(93,221,133,1) 100%);
background: -ms-linear-gradient(top, rgba(0,197,252,1) 0%, rgba(93,221,133,1) 100%);
background: linear-gradient(to bottom, rgba(0,197,252,1) 0%, rgba(93,221,133,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00c5fc', endColorstr='#5ddd85', GradientType=0 );
}
#t3 .piano_03 .line .l_2 span{
    content: '';
    width: 10px;
    height: 50px;
    position: relative;
    display: block;
    float: left;
    left: 40px;
     -webkit-animation: lines02 3s infinite;
    animation: lines02 3s infinite;
    background: rgba(0,197,252,1);
background: -moz-linear-gradient(top, rgba(0,197,252,1) 0%, rgba(93,221,133,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,197,252,1)), color-stop(100%, rgba(93,221,133,1)));
background: -webkit-linear-gradient(top, rgba(0,197,252,1) 0%, rgba(93,221,133,1) 100%);
background: -o-linear-gradient(top, rgba(0,197,252,1) 0%, rgba(93,221,133,1) 100%);
background: -ms-linear-gradient(top, rgba(0,197,252,1) 0%, rgba(93,221,133,1) 100%);
background: linear-gradient(to bottom, rgba(0,197,252,1) 0%, rgba(93,221,133,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00c5fc', endColorstr='#5ddd85', GradientType=0 );
}

#t3 .piano_03 .line .l_3:before{
    content: '';
    width: 10px;
    height: 50px;
    position: absolute;
    display: block;
    float: left;
    left: 40px;
     -webkit-animation: lines02 3.9s infinite;
    animation: lines02 3.9s infinite;
    background: rgba(0,197,252,1);
background: -moz-linear-gradient(top, rgba(0,197,252,1) 0%, rgba(93,221,133,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,197,252,1)), color-stop(100%, rgba(93,221,133,1)));
background: -webkit-linear-gradient(top, rgba(0,197,252,1) 0%, rgba(93,221,133,1) 100%);
background: -o-linear-gradient(top, rgba(0,197,252,1) 0%, rgba(93,221,133,1) 100%);
background: -ms-linear-gradient(top, rgba(0,197,252,1) 0%, rgba(93,221,133,1) 100%);
background: linear-gradient(to bottom, rgba(0,197,252,1) 0%, rgba(93,221,133,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00c5fc', endColorstr='#5ddd85', GradientType=0 );
}
#t3 .piano_03 .line .l_3:after{
    content: '';
    width: 10px;
    height: 27px;
    position: absolute;
    display: block;
    float: left;
    left: 40px;
    top: 61px;
    -webkit-animation: lines02 3.9s infinite;
    animation: lines02 3.9s infinite;
    background: rgba(0,197,252,1);
background: -moz-linear-gradient(top, rgba(0,197,252,1) 0%, rgba(93,221,133,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,197,252,1)), color-stop(100%, rgba(93,221,133,1)));
background: -webkit-linear-gradient(top, rgba(0,197,252,1) 0%, rgba(93,221,133,1) 100%);
background: -o-linear-gradient(top, rgba(0,197,252,1) 0%, rgba(93,221,133,1) 100%);
background: -ms-linear-gradient(top, rgba(0,197,252,1) 0%, rgba(93,221,133,1) 100%);
background: linear-gradient(to bottom, rgba(0,197,252,1) 0%, rgba(93,221,133,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00c5fc', endColorstr='#5ddd85', GradientType=0 );
}


#t3 .piano_03 .line .l_4:before{
    content: '';
    width: 10px;
    height: 40px;
    position: relative;
    display: block;
    float: left;
    left: 40px;
    opacity: 0;
    -webkit-animation: lines01 5s infinite;
    animation: lines01 5s infinite;
    background: rgba(0,197,252,1);
background: -moz-linear-gradient(top, rgba(0,197,252,1) 0%, rgba(93,221,133,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,197,252,1)), color-stop(100%, rgba(93,221,133,1)));
background: -webkit-linear-gradient(top, rgba(0,197,252,1) 0%, rgba(93,221,133,1) 100%);
background: -o-linear-gradient(top, rgba(0,197,252,1) 0%, rgba(93,221,133,1) 100%);
background: -ms-linear-gradient(top, rgba(0,197,252,1) 0%, rgba(93,221,133,1) 100%);
background: linear-gradient(to bottom, rgba(0,197,252,1) 0%, rgba(93,221,133,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00c5fc', endColorstr='#5ddd85', GradientType=0 );
}

#t3 .piano_03 .line .l_5:before{
    content: '';
    width: 10px;
    height: 28px;
    position: absolute;
    display: block;
    float: left;
    left: 40px;
    opacity: 0;
        -webkit-animation: lines01 5s infinite;
    animation: lines01 5s infinite;
    background: rgba(0,197,252,1);
background: -moz-linear-gradient(top, rgba(0,197,252,1) 0%, rgba(93,221,133,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,197,252,1)), color-stop(100%, rgba(93,221,133,1)));
background: -webkit-linear-gradient(top, rgba(0,197,252,1) 0%, rgba(93,221,133,1) 100%);
background: -o-linear-gradient(top, rgba(0,197,252,1) 0%, rgba(93,221,133,1) 100%);
background: -ms-linear-gradient(top, rgba(0,197,252,1) 0%, rgba(93,221,133,1) 100%);
background: linear-gradient(to bottom, rgba(0,197,252,1) 0%, rgba(93,221,133,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00c5fc', endColorstr='#5ddd85', GradientType=0 );

}
#t3 .piano_03 .line .l_5:after{
    content: '';
    width: 10px;
    height: 27px;
    position: absolute;
    display: block;
    float: left;
    left: 40px;
    top: 61px;
    opacity: 0;
        -webkit-animation: lines01 5s infinite;
    animation: lines01 5s infinite;
    background: rgba(0,197,252,1);
background: -moz-linear-gradient(top, rgba(0,197,252,1) 0%, rgba(93,221,133,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,197,252,1)), color-stop(100%, rgba(93,221,133,1)));
background: -webkit-linear-gradient(top, rgba(0,197,252,1) 0%, rgba(93,221,133,1) 100%);
background: -o-linear-gradient(top, rgba(0,197,252,1) 0%, rgba(93,221,133,1) 100%);
background: -ms-linear-gradient(top, rgba(0,197,252,1) 0%, rgba(93,221,133,1) 100%);
background: linear-gradient(to bottom, rgba(0,197,252,1) 0%, rgba(93,221,133,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00c5fc', endColorstr='#5ddd85', GradientType=0 );
}
#t3 .piano_03 .line .l_6:before{
    content: '';
    width: 10px;
    height: 72px;
    position: relative;
    display: block;
    float: left;
    left: 40px;
    opacity: 0;
    -webkit-animation: lines01 8s infinite;
    animation: lines01 8s infinite;
    background: rgba(0,197,252,1);
background: -moz-linear-gradient(top, rgba(0,197,252,1) 0%, rgba(93,221,133,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,197,252,1)), color-stop(100%, rgba(93,221,133,1)));
background: -webkit-linear-gradient(top, rgba(0,197,252,1) 0%, rgba(93,221,133,1) 100%);
background: -o-linear-gradient(top, rgba(0,197,252,1) 0%, rgba(93,221,133,1) 100%);
background: -ms-linear-gradient(top, rgba(0,197,252,1) 0%, rgba(93,221,133,1) 100%);
background: linear-gradient(to bottom, rgba(0,197,252,1) 0%, rgba(93,221,133,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00c5fc', endColorstr='#5ddd85', GradientType=0 );
}


/*t4*/
#t4{
        display: block;
    width: 100%;
    height:794px;
    margin-top: 20px;
    position: relative;
}

#t4 .info{
    float: right;
    margin-top: 110px;
    z-index: 2;
    background: white;
    padding-bottom: 0;
    padding-top: 0;
}

#t4 .piano_04{
    position: absolute;
    right: 500px;
    z-index: 2;
    top: 0;
}
#t4 .piano_04 .piano_img{
    opacity: 0;
}
#t4 .piano_04 .piano_img img{
      width: 800px;
}
#t4 .piano_04 .info_img{
    width: 180px;
    position: absolute;
    display: block;
    top: 72px;
    right: 42%;    opacity: 0;
}
#t4 .piano_04 .info_img img{
    width: 180px;
}

.video_block{
    height: 739px;
    display: block;
    width: 100%;
    position: relative;    z-index: 15;
}
.imageHolder{
    z-index: 11;
    
}
.imageHolder img{
    height: auto !important;
}
.video_block .imgs,.imageHolder .imgs{
    background-image: url(../images/home/video.jpg);
    background-size: cover;
    background-position: 0 0;
    background-repeat: no-repeat;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 11;
    position: absolute;
}
.video_block .block,.imageHolder .block{
width: 745px;
    margin: 0 auto;
    display: block;
    position: relative;
    z-index: 12;
    color: white;
    top: 50%;
}
.video_block .video_link,.imageHolder .video_link{
    width: 180px;
    height: 180px;
    display: table;
    border: 4px solid white;
    border-radius: 50%;
    line-height: 25px;
    font-size: 25px;
    color: white;
    padding-left: 45px;
    position: absolute;
    right: 0;
    top: 0;
    letter-spacing: 2px;
            -webkit-transition:all 1s ease;
    -moz-transition:all 1s ease;
    -o-transition:all 1s ease;
    -ms-transition:all 1s ease;
    transition:all 1s ease;
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
}
.video_block .video_link:hover,.imageHolder .video_link:hover{
    transform: scale(.95);
    -webkit-transform: scale(.95);
    -moz-transform: scale(.95);
    -ms-transform: scale(.95);
    -o-transform: scale(.95);
    background-color: rgba(255, 255, 255, 0.2);
}
.video_block .video_link span,.imageHolder .video_link span{
    vertical-align: middle;
    display: table-cell;
}
.video_block .video_link b{
    
}
.video_block .word,.imageHolder .word{
        display: block;
    width: 50%;
    letter-spacing: 2px;
    position: relative;
}
.video_block .word h5,.imageHolder .word h5{
    font-family: 'Questrial', sans-serif;
    font-size: 66px;
    font-weight: 100;
    line-height: 50px;
    display: block;
    width: 100%;
}
.video_block .word .memo,.imageHolder .word .memo{
    display: block;
    width: 100%;
    font-size: 20px;
    margin-top: 30px;
    line-height: 28px;
}


/*ar*/
#ar{
    width: 100%;
    display: block;
    height: 1120px;
    position: relative;overflow: hidden;
    z-index: 10;background-color: #f2f2f2;    padding-top: 100px;
}
#ar .bg{
    width: 100%;
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;z-index: 1;
}
#ar .bg div{
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 100%;
    position: absolute;
    height: 100%;left: 0;
    top: 0;
}
#ar .bg .before{
    z-index: 10;
    opacity: 1;
    background-image: url(../images/home/vrbg01_b.jpg);
}
#ar .bg .after{
    z-index: 11;    background-color: #F2F2F2;
    opacity: 0;
    background-image: url(../images/home/vrbg02_b.jpg);
    -webkit-transition:all 1.5s ease;
    -moz-transition:all 1.5s ease;
    -o-transition:all 1.5s ease;
    -ms-transition:all 1.5s ease;
    transition:all 1.5s ease;
    -webkit-transition-delay: 1s; /* Safari */
    transition-delay: 1s;
}
#ar .bg.active .after{
    opacity: 1;
}

#ar .hand{
    width: 445px;
    position: absolute;
    bottom: -100px;
    left: 31%;
    z-index: 10;
    opacity: 0;
    -webkit-transition:bottom 1.8s ease,opacity .8s ease;
    -moz-transition:bottom 1.8s ease,opacity .8s ease;
    -o-transition:bottom 1.8s ease,opacity .8s ease;
    -ms-transition:bottom 1.8s ease,opacity .8s ease;
    transition:bottom 1.8s ease,opacity .8s ease;
}
#ar .hand.active{
    bottom: 0;opacity: 1;
}
#ar .hand>img{
    width: 100%;
    position: relative;
    z-index: 1;
}
#ar .hand .phone{
    position: absolute;
    width: 193px;
    overflow: hidden;
    height: 342px;
    z-index: 2;
    left: 167px;
    top: 97px;
    background: black;
}
#ar .hand .phone img{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    opacity: 0;
}
#ar .hand .phone .p1{
        position: relative;
        z-index: 1;
    -webkit-transition:all .5s ease;
    -moz-transition:all .5s ease;
    -o-transition:all .5s ease;
    -ms-transition:all .5s ease;
    transition:all .5s ease;
           -webkit-transition-delay: 1s; /* Safari */
    transition-delay: 1s;
}
#ar .hand.active .phone .p1{
    opacity: 1;
}
#ar .hand .phone .p2{
    z-index: 2;
        -webkit-transition:all 1.8s ease;
    -moz-transition:all 1.8s ease;
    -o-transition:all 1.8s ease;
    -ms-transition:all 1.8s ease;
    transition:all 1.8s ease;
           -webkit-transition-delay: 1.8s; /* Safari */
    transition-delay: 1.8s;
}
#ar .hand.active .phone .p2{
    opacity: 1;
}
#ar .info{
    width: 744px;
    display: block;
    position: absolute;
    top: 100px;
    z-index: 5;
    left: 50%;
    margin-left: -372px;
    text-align: center;

}
#ar .info h2{
    font-size: 50px;
    color: black;
    margin: 0 auto;
    display: block;
    font-weight: bold;
    text-align: center;
    margin-bottom: 40px;
    letter-spacing: 1px;
    opacity: 0;
    position: relative;
    bottom: -20px;
            -webkit-transition:all 1s ease;
    -moz-transition:all 1s ease;
    -o-transition:all 1s ease;
    -ms-transition:all 1s ease;
    transition:all 1s ease;
}
#ar .info.active h2{
    opacity: 1;bottom: 0;
}
#ar .info h2 em{
    font-weight: 100;
    font-style: inherit;
    margin-right: 3px;
    margin-left: 3px;
}
#ar .info .memo{
    font-size: 20px;
    color: #5f5f5f;
    width: 100%;
    display: block;
    margin: 0 auto;
    line-height: 34px;opacity: 0;
    text-align: center;
    letter-spacing: 2px;
        position: relative;
    bottom: -20px;
            -webkit-transition:all 1.8s ease;
    -moz-transition:all 1.8s ease;
    -o-transition:all 1.8s ease;
    -ms-transition:all 1.8s ease;
    transition:all 1.8s ease;
           -webkit-transition-delay: .2s; /* Safari */
    transition-delay: .2s;
}
#ar .info.active .memo{
    opacity: 1;bottom: 0;
}
#ar .info .app{
    display: block;
    margin-top: 65px;opacity: 0;
    position: relative;
    width: 100%;
            -webkit-transition:all 1.8s ease;
    -moz-transition:all 1.8s ease;
    -o-transition:all 1.8s ease;
    -ms-transition:all 1.8s ease;
    transition:all 1.8s ease;
           -webkit-transition-delay: .6s; /* Safari */
    transition-delay: .6s;
}
#ar .info.active .app{
    opacity: 1;
}
#ar .info .app a{
    display: inline-block;
    margin: 0 0px;
    padding: 0 30px;
}
#ar .info .app a img{
    height: 40px;
}

#ar .info .app a.apple{
      border-right: 1px solid #C7C7C7;
}
  
#ar .show_3d{
    display: block;
    z-index: 12;
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;opacity: 0;
}
#ar .show_3d .block{
        display: inline-block;
}
#ar .show_3d .box{
    width: 115px;
    display: inline-block;
    height: 80px;
    position: relative;
    margin: 0;
    padding: 0;
    float: left;

}
#ar .show_3d .box:hover img{
    opacity: 1;
}
#ar .show_3d .box img{
    width: 115px;
    height: 80px;opacity: 0;
                -webkit-transition:all .5s ease;
    -moz-transition:all .5s ease;
    -o-transition:all .5s ease;
    -ms-transition:all .5s ease;
    transition:all .5s ease;
}
#ar .show_3d .textbox{
    font-size: 16px;
    color: white;
    line-height: 19px;
    text-align: left;
    padding-left: 14px;
    width: 110px;
    height: 80px;
    padding-top: 9px;
background: rgba(31,191,206,1);
background: -moz-linear-gradient(left, rgba(31,191,206,1) 0%, rgba(69,214,163,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(31,191,206,1)), color-stop(100%, rgba(69,214,163,1)));
background: -webkit-linear-gradient(left, rgba(31,191,206,1) 0%, rgba(69,214,163,1) 100%);
background: -o-linear-gradient(left, rgba(31,191,206,1) 0%, rgba(69,214,163,1) 100%);
background: -ms-linear-gradient(left, rgba(31,191,206,1) 0%, rgba(69,214,163,1) 100%);
background: linear-gradient(to right, rgba(31,191,206,1) 0%, rgba(69,214,163,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1fbfce', endColorstr='#45d6a3', GradientType=1 );

}
#video .video_m{
    display: none;
}


@media only screen and (max-width: 1200px) {
.video_block .block, .imageHolder .block{
    top: 42%;
}
#main_word{
    top: 42%;
}

#content #video .mouse{
    width: 32px;
    bottom: 21px;
    margin-left: -16px;
}
#content #video .mouse img{
    left: 10px;
}
#content #video{
        margin-bottom: 25px;
}
#t4 .piano_04{
    right: 435px;
}
#t1 .piano_01{
    left: 435px;
}
#t2 .piano_02{
    right: 460px;
}
#t3 .piano_03{
    left: 500px;
}


}



@media only screen and (min-width: 1025px) {

}


@media only screen and (max-height: 880px) and  (min-width: 1024px){
#main_word{
    top: 41%;
}



}

@media only screen and (max-height: 760px) and  (min-width: 1024px){
#main_word{
    top: 37%;
}
#content #video .mouse{
    bottom: 27px;
}


}

@media only screen and (max-width: 1024px) {
#main_word .logo_s .imgs img{
    width: 110px;
}
#video .video_m{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 60;display: block;
}
#video .video_m.left {
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    height: 100%;
}
#video .video_m.right {
   position: absolute;
    right: 0;
    top: 0;
    width: 50%;
    height: 100%;
}
#video .video_m span{
       font-size: 13px;
    font-weight: bold;
    color: white;
    background-repeat: no-repeat;
    position: absolute;
    display: block; 
}
#video .video_m.left span{
background-image: url(../images/video_l.png);
    left: 33px;
    bottom: 30px;
    z-index: 20;
    letter-spacing: 1px;
    background-position: right;
    width: 65px;
}
#video .video_m.right span{
    background-image: url(../images/video_r.png);
    right: 33px;
        bottom: 30px;
    z-index: 20;
    letter-spacing: 1px;
        background-position: left;
    width: 65px;    text-align: right;
}
section.videos:after{
        background-color: rgba(0, 0, 0, 0.3);
}

#main_word .clip-text{
    font-size: 48px;
}
#main_word .logo_s{
        height: auto;
}
#main_word .memo{
    font-size: 13px;
    margin-top: 6px;
}

#content #video .mouse{
    width: 24px;
    bottom: 21px;
    margin-left: -12px;
    height: 42px;
    bottom: 38px;
}
#content #video .mouse img{
left: 8px;
    width: 9px;
    top: 9px;
}

#content #video{
        min-height:500px;max-height: 520px;
}

#tab_menu .block{
    max-width: 90%;height: 80px;
    width: 90%;
}
#tab_menu .tlink{
    font-size: 15px;
    line-height: 20px;
    height: 80px;
}

#tab_menu .tlink span:after{
        height: 30px;
    top: 18px;
}
.step_block .block{
    width: 90%;
}
.step_block .info h3{
    font-size: 14px;
}
.step_block .info h4{
    font-size: 24px;    line-height: 30px;
}

.step_block .info .word{
        margin-top: 60px;
    font-size: 15px;
    line-height: 30px;
}
.step_block .info .word:after{
    top: -21px;
}
.step_block .info.active .word:after{
     width: 43px;   
}
.step_block .info{
    width: 40%;
}
#t1 .piano_01{
    left: 45%;
    width: 500px;
}

#t1{
    height: auto;
    margin-top: 45px;
}
#t1 .piano_01 .atob {
    left: 130px;
}
#t1 .piano_01 .atob .p_a img,#t1 .piano_01 .atob .p_b img{
    width: 95px;
}
#t1 .piano_01.active .atob .line{
    height: 123px;
}
#t1 .piano_01 .atob .line{

    left: 47px;
    top: 91px;
}
#t1 .piano_01 .atob .p_b{
    margin-top: 116px;
}

#t1 .piano_01 .s_link {

    left: -118px;
    font-size: 14px;
    line-height: 15px;
    background-size: 42px;
    padding-right: 46px;
    height: auto;
    background-position: right enter;
}
#t1 .piano_01.active .s_link{
    left: -130px;
}
#t1 .wifi{
    width: 85px;
    height: 103px;
    top: 36%;
    left: -21px;
}

#t1 .wifi .music img{
    width: 42px;
}
#t1 .wifi .line img {
    width: 73px;
}
#t1 .info .tips .text .h1{
    font-size: 16px;
}

#t1 .info .tips{
    width: 114px;
    margin-top: 50px;
}
#t1 .info .tips .text .h2{
        font-size: 12px;margin-top: 10px;
    letter-spacing: 1px;
}
#t1 .info .tips .text{
        margin-top: 13px;
    border-top: 1px solid rgba(128, 128, 128, 0.49);
    padding-top: 10px;
}
#t2 .info{
    margin-top: 130px;
    padding-top: 30px;
}

#t2 .borders{
    width: 100%;
    margin-left: 0;
    left: 0;
    height: 560px;
    top: 80px;
}
#t2 .piano_02 img{
    width: 523px;
}

#t2 .piano_02{
        right: 45%;    top: 50px;
}

#t2 .borders .bottom.active:after{
    width: 80%;
}
#t2 .borders .bottom:before{
    left: 20%;
}
#t2{
    height: 685px;
}
#t3{
        margin-top: 65px;    height: 730px;
}
#t3 .piano_03{
    left: 45%;
}
#t3 .piano_03 img{
    width: 566px;
}

#t3 .piano_03 .line div{
    width: 63px;
}
#t3 .piano_03 .line .l_1:before,
#t3 .piano_03 .line .l_2 span,
#t3 .piano_03 .line .l_3:before,
#t3 .piano_03 .line .l_3:after,
#t3 .piano_03 .line .l_4:before,
#t3 .piano_03 .line .l_5:before,
#t3 .piano_03 .line .l_5:after,
#t3 .piano_03 .line .l_6:before{
    left: 29px;
}

#t4 .piano_04 .piano_img img{
    width: 563px;
}
#t4 .piano_04{
    right: 45%;
}
#t4 .piano_04 .info_img{
    width: 95px;
}
#t4 .piano_04 .info_img img{
    width: 100%;
}
#t4{
        height: 660px;
}

.video_block{
    height: 495px;
    background-image: url(../images/home/video.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.video_block .word h5, .imageHolder .word h5{
    font-size: 44px;line-height: 36px;
}
.video_block .word .memo, .imageHolder .word .memo{
    font-size: 14px;
    width: 249px;
    line-height: 22px;
}
.video_block .word, .imageHolder .word{
    margin-left: 10%;float: left;
}


.video_block .video_link, .imageHolder .video_link{
        width: 90px;
    right: 0;
    left: 62%;
    height: 123px;
    font-size: 17px;
    line-height: 18px;
    padding-left: 33px;
}

.video_block .block, .imageHolder .block{
 top: auto;
    bottom: 66px;
    width: 100%;
    position: absolute;
}
#ar .info h2{
        font-size: 28px;margin-bottom: 22px;
}

#ar .info.active .memo {
    font-size: 14px;
    width: 70%;    line-height: 28px;
}

#ar .info{
    top: 52px;
}
#ar .info .app{
    margin-top: 50px;
}
#ar{
    height: 756px;
}
#ar .hand{
    width: 285px;
}
#ar .hand .phone{
    width: 124px;
    height: 220px;
    left: 107px;
    top: 62px;
}

#ar .show_3d .box{
    width: 76px;
    height: 52px;
    background-size: 100%;
}
#ar .show_3d .textbox{
    height: 52px;
    font-size: 13px;
    line-height: 13px;
    width: 82px;
}
#ar .show_3d .box img{
    width: 100%;
    height: auto;
}
#ar .show_3d{
        height: 52px;
}

#tab_menu{
    height: 66px;
}
#tab_menu .tlink:hover, #tab_menu .tlink.active{
        letter-spacing: 2px;
}

#content{
    margin-bottom: 0;
}

}

@media only screen and (max-width: 600px) {

#main_word .clip-text{
    font-size: 40px;
}
#tab_menu .block{
     -webkit-transition:all .1s ease;
    -moz-transition:all .1s ease;
    -o-transition:all .1s ease;
    -ms-transition:all .1s ease;
    transition:all .1s ease;
}


#tab_menu .bx-wrapper .bx-prev{
    background-image: url(../images/home/left.jpg);    background-position: center;
    left: -10%;
    height: 52px;
    margin-top: 0;
    top: 0;
}
#tab_menu .bx-wrapper .bx-next{
    background-image: url(../images/home/right.jpg);        background-position: center;
    right: -10%;
    height: 52px;
    margin-top: 0;
    top: 0;
}
#tab_menu .block{
    border-bottom: 1px solid #c6c6c6;
}
#tab_menu .tlink{
    width: 100%;
}
#tab_menu .tlink:nth-child(2) span:after,#tab_menu .tlink:nth-child(4) span:after{
    display: none;
}
#tab_menu .block{
    width: 80%;
    max-width: 80%;
}



#t1 .piano_01{
    left: 0;
}

.step_block .info{
    width: 100%;
    margin-top: 700px;
}


.step_block .block{
    width: 80%;
}
#t1 .piano_01 .atob{

}
#t1 .piano_01 .piano_img{
    margin-top: 96px;
}
#t1 .wifi{
    top: 26%;
}

#tab_menu .tlink,#tab_menu .block{
    height: 52px;    font-size: 14px;
    line-height: 18px;
}

#t2 .piano_02{
   right: -20px;
}


#t2 .borders{
display: none;
}

#t2 .info{
        margin-top: 610px;
}
#t2,#t3,#t4{
    height: auto;
}
#t3 .piano_03{
    left: 0;
}
#t3 .info{
    margin-top: 698px;
}
#t4 .piano_04{
    right: 0;
}
#t4 .info{
        margin-top: 655px;
    margin-bottom: 40px;
}

.step_block .info h4{
    margin-top: 10px;
}
#ar .info.active .memo{
    display: none;
}
#ar {
    height: 525px;
    padding-top: 0;    overflow: auto;    background: white;
}
#ar .info{
    top: 53px;width: 100%;
}
#ar .info .app {
    margin-top: 28px;width: 100%;

}

#ar .hand{
        width: 235px;
    left: 16%;
}

#ar .hand .phone {
    width: 102px;
    height: 180px;
    left: 88px;
    top: 52px;
}
#ar .show_3d{

}
#tab_menu{
    display: none;
}

#content #video{
    height: 212px;
    min-height: 450px;
}
#ar .bg{
    height: 90%;
}
#ar .hand.active{
        bottom: 50px;
}

#ar .info{
        top: 53px;
    width: 100%;
    position: relative;
    left: auto;
    margin-left: 0;
    text-align: center;
}

}


@media only screen and (max-width: 500px) {
#main_word .clip-text{
    font-size: 24px;
}
#main_word .clip-text.active{
    letter-spacing: 1px;
}

#main_word .logo_s .imgs img{
    width: 98px;
}
#main_word .logo_s .imgs.imgs02.active img{
    width: 83px;
}
#main_word .logo_s{
    margin-bottom: 7px;
}
#main_word .memo{
    display: none;
}
#content #video{
    height: 250px;
    min-height: 100%;
}


#main_word {
    top: 0;
    margin-top: 0;
    width: 100%;
    left: auto;
    margin-left: auto;
    height: 100%;
    padding-top: 35px;
}

#content #video .mouse{
        width: 18px;
    margin-left: -9px;
    height: 42px;
    bottom: 13px;
}
#content #video .mouse img{
        left: 6px;
    width: 7px;
    top: 7px;
}
#t1 .piano_01{
        width: 365px;
}

#t1 .piano_01 .piano_img{
    margin-top: 63px;
}
#t1 .piano_01 .atob {
    left: 78px;
}
#t1 .piano_01.active .s_link {
    left: -90px;
    font-size: 12px;
    text-align: left;
    padding-right: 55px;
    width: 119px;
}

#t1 .wifi{
    width: 70px;
    height: 90px;
    top: 18%;
    left: -24px;
}

#t1 .wifi .music img{
    width: 37px;
}
#t1 .wifi .line img{
    width: 57px;
}
#t1 .piano_01 .atob .p_a img, #t1 .piano_01 .atob .p_b img{
    width: 80px;
}
#t1 .piano_01 .atob .p_b{
    margin-top: 85px;
}
#t1 .piano_01.active .atob .line {
    height: 95px;
    left: 38px;
    top: 75px;
}

.step_block .info{
    margin-top: 500px;
}
.step_block .info h4{
    font-size: 20px;
    line-height: 28px;
}
#t2 .piano_02 img {
    width: 384px;
    right: -3%;
    position: relative;
}
#t2{
        margin-top: 50px;
}
#t2 .info{
    margin-top: 435px;
}
#t3 .piano_03 img {
    width: 376px;
}
#t3 .piano_03 .piano_img{
    top: 40px;
}

#t3 .piano_03 .line{
    width: 260px;
}
#t3 .piano_03 .line div {
    width: 40px;
    height: 59%;

}
#t3 .piano_03 .line .l_1:before, #t3 .piano_03 .line .l_2 span,
#t3 .piano_03 .line .l_3:before, #t3 .piano_03 .line .l_3:after,
#t3 .piano_03 .line .l_4:before, #t3 .piano_03 .line .l_5:before,
#t3 .piano_03 .line .l_5:after, #t3 .piano_03 .line .l_6:before
{
    left: 17px;
    width: 7px;
}
#t3 .piano_03 .line .l_2 span:before,#t3 .piano_03 .line .l_2 span:after{
    width: 7px;
}

#t3 .piano_03 .line div{
    border-right: 1px solid #DCDCDC;
}

#t3 .info{
    margin-top: 450px;
}
#t4 .piano_04 .piano_img img{
    width: 390px;
}
#t4 .info{
    margin-top: 460px;
}

.video_block{
    height: 270px;
}
.video_block .word h5, .imageHolder .word h5 {
    font-size: 23px;
    line-height: 21px;
}
.video_block .word .memo, .imageHolder .word .memo {
    font-size: 12px;
    width: 200px;
    line-height: 18px;
    margin-top: 9px;
    letter-spacing: 1px;
    opacity: .9;
}

.video_block .video_link, .imageHolder .video_link {
    width: 55px;
    left: auto;
    height: 65px;
    font-size: 12px;
    line-height: 12px;
    padding-left: 10px;
    right: 10%;
}

.video_block .block, .imageHolder .block{
    bottom: 32px;
}


#ar .info .app a{
    display: inline-block;
    margin: 0 0px;
    padding: 0 10px;
    width: 40%;
}

#ar .info .app a img{
    height: 29px;
}
#ar .show_3d .textbox{
        height: 52px;
    padding-left: 6px;
    font-size: 13px;
    line-height: 13px;
    width: 71px;
}

#video .video_m.left span{
    left: 10%;
}

#video .video_m.right span{
    right: 10%;
}





}