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

    .sp{
        display: block;
    }

    .pc{
        display: none !important;
    }

    html{
        width: 100vw;
        overflow-x: hidden;
    }

    #body{
        display: block;
        width: 100vw;
        height: 3619.93vw;
        margin: 0 auto;
        overflow-x: hidden;
        color: #000;
        /* background-image: url(assets/images/sp/bg.png); */
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        position: relative;
        z-index: 1;
    }

    .body-bg{
        display: block;
        width: 100vw;
        height: 3096.93vw;
        background-image: url(assets/images/sp/bg_origin.png);
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        position: absolute;
        z-index: 2;
        top: 0;
        left: 0;
        opacity: 0.2;
    }

    .page-bg{
        display: block;
        width: 100vw;
        position: absolute;
        z-index: 2;
        top: 0;
        left: 0;
    }

    .page-bg .xbg{
        background-repeat: no-repeat;
        background-size: cover;
        width: 100vw;
        display: block;
        background-image: url(assets/images/sp/bg_new.png);
    }

    .page-bg .xbg1{
        background-position-y: 55vw;
        background-position-x: center;
        height: 441vw;
    }

    .page-bg .xbg2{
        background-position-y: -242vw;
        background-position-x: center;
        height: 233vw;
    }

    .page-bg .xbg3{
        background-position-y: -473vw;
        background-position-x: center;
        height: 477vw;
    }

    .page-bg .xbg4{
        background-position-y: -952vw;
        background-position-x: center;
        height: 347vw;
    }

    .page-bg .fish4{
        display: none;
    }

    .page-bg .xbg5{
        background-position-y: -1288vw;
        background-position-x: center;
        height: 599vw;
    }

    .page-bg .xbg6{
        background-position-y: -1805vw;
        background-position-x: center;
        height: 330vw;
    }

    .page-bg .xbg6x{
        background-position-y: -1989vw;
        background-position-x: center;
        height: 146vw;
    }

    .page-bg .xbg6xx{
        background-position-y: -1989vw;
        background-position-x: center;
        height: 76vw;
    }

    .page-bg .xbg7{
        background-position-y: -2119vw;
        background-position-x: center;
        height: 122vw;
    }

    .page-bg .xbg8{
        background-position-y: -2241vw;
        background-position-x: center;
        height: 267vw;
    }

    .page-bg .xbg8 .fish{
        display: none;
    }

    .page-bg .xbg9{
        background-position-y: -2486vw;
        background-position-x: center;
        height: 442vw;
    }

    .page-bg .fish9{
        display: none;
    }

    .page-bg .xbg10{
        background-position-y: -3000vw;
        background-position-x: center;
        height: 32vw;    
    }

    .page-bg .xbg11 .fish{
        display: none;
    }

    .page-bg .fish12{
        display: none;
    }

    .page-bg .fish13{
        display: none;
    }

    .page-bg .xbg11{
        background-repeat: no-repeat;
        background-size: contain;
        width: 100vw;
        height: 195.86vw;
        display: block;
        background-image: url(assets/images/images/sp_quiz_bg.png);
        margin-top: 25vw;
        display: none;
    }

    .progress-wrap{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 2.666vw;
        background: #c9c9c9;
        opacity: .6;
        z-index: 9;
    }

    .progress-wrap .bar{
        height: 0;
        border-radius: 1.333vw;
        border-bottom-left-radius: 0;
        border-top-left-radius: 0;
        border: 1.333vw solid #ffff00;
        width: 1vw;
        transition: all .3s ease;
    }

    /*nav-wrap*/
    .nav-wrap{}

    .nav-wrap .nav-icon{
        width: 12vw;
        height: 12vw;
        background-image: url(assets/images/phone/menu.png);
        position: fixed;
        z-index: 3;
        top: 8vw;
        right: 4.47vw;
        opacity: .9;
    }

    .nav-wrap .nav-content{
        width: 12vw;
        height: 12vw;
        position: fixed;
        z-index: 2;
        top: 10vw;
        right: 3.47vw;
        opacity: 0;
        border-radius: 50%;
        overflow: hidden;
        /* transition: all .2s ease; */
    }

    .nav-wrap .nav-content .share-wrap{
        position: absolute;
        top: 5.6vw;
        left: 6.67vw;
        width: 60vw;
        text-align: left;
    }

    .nav-wrap .nav-content .share-wrap a{
        width: 9.8vw;
        height: 9.8vw;
        margin: 0 1.47vw;
        font-size:0;
        vertical-align: middle;
    }

    .nav-wrap .nav-content .share-wrap .share-fb{
        background-image: url(assets/images/base/facebook_big.png);

    }

    .nav-wrap .nav-content .share-wrap .share-tw{
        background-image: url(assets/images/base/twitter_big.png);
    }

    .nav-wrap .nav-content .close-btn{
        width: 12vw;
        height: 12vw;
        background-image: url(assets/images/phone/del.png);
        position: absolute;
        top: 5.6vw;
        right: 3.33vw;
    }

    .nav-wrap .nav-content .logo{
        width: 24vw;
        height: 13.87vw;
        background-image: url(assets/images/phone/phone-1.png);
        display: block;
        margin: 26.93vw auto 2.27vw;
        opacity: 0;
        /* transition: all .5s ease; */
        /* transition-delay: .5s; */
        visibility: hidden;
    }

    .nav-wrap .nav-content .sections{
        text-align: center;
        opacity: 0;
        visibility: hidden;
        /* transition: all .5s ease; */
        /* transition-delay: .5s; */
    }

    .nav-wrap .nav-content .sections a{
        display: block;
        font-size: 4vw;
        color: black;
        line-height: 6.5vw;
        text-decoration: none;
        font-weight: bold;
        width: 80vw;
        margin: 0 auto 5vw;
    }

    .nav-wrap .nav-content .actions{
        text-align: center;
    }

    .nav-wrap .nav-content .actions a{
        border: 1.07vw solid #3cbdf9;
        line-height: 14vw;
        font-size: 5.07vw;
        border-radius: 14vw;
        background: white;
        text-decoration: none;
        color: black;
        padding: 0 8.53vw;
        font-weight: bold;
        display: inline-block;
    }

    .nav-wrap.show .nav-content{
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        width: 100vw;
        height: 100vh;
        background: white;
        z-index: 10;
        border: 2.27vw solid #ffff00;
        box-sizing: border-box;
        background-image: url(assets/images/images/bg_1.png);
        border-radius: 0;
        opacity: 1;
    }

    .nav-wrap.show .nav-content .sections,
    .nav-wrap.show .nav-content .logo{
        opacity: 1;
        visibility: visible;
    }

    .top-icon{
        width: 8vw;
        height: 8vw;
        background-image: url(assets/images/phone/top.png);
        position: fixed;
        z-index: 6;
        bottom: 10vw;
        right: 3.47vw;
        opacity: .9;
    }

    /*s1*/
    .s1{
        height: 622vw;
        position: relative;
        z-index: 2;
    }



    .s1 .share-wrap{
        text-align: center;
        margin-top: 5.6vw;
        margin-bottom: 18.8vw;
        position: absolute;
        top: 2vw;
        left: 3vw;
        text-align: left;
        width: 100vw;
    }

    .s1 .share-wrap a{
        width: 9.86vw;
        height: 9.86vw;
        margin: 0 .8vw;
        font-size:0;
        vertical-align: middle;
    }

    .s1 .share-wrap .share-fb{
        background-image: url(assets/images/base/facebook_big.png);

    }

    .s1 .share-wrap .share-tw{
        background-image: url(assets/images/base/twitter_big.png);
    }


    .s1 .pic-wrap{
        position: absolute;
        z-index: 3;
        top:47.86vw;
    }

    .s1 .pic-wrap .logo-flag{
        position: absolute;
        z-index: 3;
        width: 68.8vw;
        height: 17.86vw;
        background-image: url(assets/images/7-12/1-sp.png);
        top: -43.1vw;
        left: 15.86vw;
        opacity: 0;
    }

    .s1 .pic-wrap .logo-slogan{
        position: absolute;
        z-index: 3;
        width: 40vw;
        height: 12.4vw;
        background-image: url(assets/images/sp/title.png);
        top: -28.1vw;
        left: 29.86vw;
        opacity: 0;
    }

    .s1 .pic-wrap .logo-dialog{
        position: absolute;
        z-index: 3;
        width: 51.86vw;
        height: 12.4vw;
        background-image: url(assets/images/sp/title-1.png);
        top: -13vw;
        left: 24vw;
        
        opacity: 0;
    }

    .s1 .pic-wrap .logo-title{
        position: absolute;
        z-index: 3;
        width: 80vw;
        height: 29.6vw;
        background-image: url(assets/images/banner/5.png);
        top: 7vw;
        left: 10vw;
        opacity: 0;
    }

    .s1 .pic-wrap .logo-title .mark{
        position: absolute;
        z-index: 3;
        width: 5.46vw;
        height: 5.46vw;
        top: -4vw;
        opacity: 0;
    }

    .s1 .pic-wrap .logo-title .mark1{
        background-image: url(assets/images/banner/3_03.png);
        left: -3vw;
    }

    .s1 .pic-wrap .logo-title .mark2{
        background-image: url(assets/images/banner/2_03.png);
        left: 16vw;
    }

    .s1 .pic-wrap .logo-title .mark3{
        background-image: url(assets/images/banner/1.png);
        left: 43vw;
    }

    .s1 .pic-wrap .logo-fish{
        background-image: url(assets/images/sp/banner-fish.gif);
        position: absolute;
        z-index: 3;
        width: 77.2vw;
        height: 77.33vw;
        left: 13vw;
        top: 42vw;
        opacity: 0;
    }

    .s1 .boss{
        background-image: url(assets/images/sp/3.png);
        width: 58vw;
        height: 14vw;
        position: absolute;
        z-index: 4;
        top: 188vw;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
    }

    .s1 .boss a{
        display: inline-block;
        width: 19vw;
        height: 14vw;
        font-size: 0;
    }
    .s1 .posts{
        position: absolute;
        top: 335vw;
    }

    .s1 .text{
        position: absolute;
        top: 460vw;
        left: 0;
        text-align: center;
        font-size: 4.2vw;
        line-height: 2em;
        width: 100vw;
        z-index: 4;
    }

    .s1 .text span{
        font-size: 2.1vw;

    }

    .s1 .text .t1{
        font-size: 1.6vw;
        line-height: 2.93vw;
        width: 59.33vw;
        margin: 0 auto;
        text-align: left;
        margin-bottom: 1.06vw;
    }

    .s1 .text .t0{
        margin-top: 4.53vw;
    }

    .block{
        position: relative;
        z-index: 2;
    }

    .block .title{
        text-align: center;
    }

    .block .title span{
        display: inline-block;
        position: relative;
        margin-bottom: 1vw;
        z-index: 2;
        font-size: 6.2vw;
        font-weight: 800;

    }

    .block .title span:after{
        content: "";
        display: block;
        height: 0;
        border: 1vw solid #3ecaf0;
        position: absolute;
        left: 0;
        right: 0;
        border-radius: 1vw;
        z-index: 2;
    }

    .block .text{
        font-size: 4vw;
        line-height: 6.4vw;
        width: 78vw;
        margin: 0 auto;
        position: relative;
        z-index: 4;
    }

    .block1{
        height: 305vw;
        position: relative;
    }

    .block1 .bg{
        background-image: url(assets/images/sp/4.png);
        width: 100vw;
        height: 241.73333vw;
        position: absolute;
        top: -13vw;
        left: 0;
        z-index: 2;
    }

    .block1 .bg-fish{
        background-image: url(assets/images/pc/4.png);
        position: absolute;
        top: -16vw;
        right: 40vw;
        z-index: 1;
        width: 70vw;
        height: 94vw;
        z-index: 1;

    }

    .block1 .bg-fish.xshow{
        top: -53vw;
        right: 4vw;;
    }

    .block1 .pic-wrap{
        height: 60vw;
        text-align: center;
        padding-top: 11vw;
        position: relative;
        z-index: 3;

    }

    .block1 .pic-wrap .pic{
        background-image: url(assets/images/pc/7.png);
        width: 54vw;
        height: 54vw;
        opacity: 0;
    }

    .block1 .pic-wrap.xshow .pic{
        transform: scale(1);
        opacity: 1;
    }

    .block1 .bg-bottom{
        position: absolute;
        bottom: 0;
        height: 72vw;
        width: 100%;
        overflow: hidden;

    }

    .block1 .bg-bottom .wave{
        width: 100vw;
        height: 36.68vw;
        position: absolute;
        right: 0;
        top: 10vw;
        background-image: url(assets/images/sp/11-4.png);
        z-index: 4;
        animation: floating 3s linear 1s infinite alternate;
    }

    .block1 .bg-bottom .fish{
        width: 24.13vw;
        height: 3.866vw;
        position: absolute;
        left: 0;
        top: 27vw;
        background-image: url(assets/images/sp/7.png);
        z-index: 4;
        animation: spFishflowL2R 18s linear 1s infinite normal;
    }

    .block2{
        height: 296vw;
    }

    .block2 .pic-wrap{
        height: 66vw;
        text-align: center;
        padding-top: 18vw;
        position: relative;
    }

    .block2 .pic-wrap .fish{
        width: 66.3vw;
        height: 49.3308vw;
        background-image: url(assets/images/pc/9.png);
        position: relative;
        z-index: 3;
    }


    .block2 .pic-wrap .mark{
        width: 9.8vw;
        height: 9.8vw;
        position: absolute;
    }

    .block2 .pic-wrap .mark1{
        background-image: url(assets/images/4/b1.gif);
        top: 10.95vw;
        left: 48.23vw;
    }
    .block2 .pic-wrap .mark2{
        background-image: url(assets/images/4/a.gif);
        top: 16.55vw;
        left: 14.95vw;
        z-index: 2;
    }
    .block2 .pic-wrap .mark3{
        background-image: url(assets/images/4/d.gif);
        top: 29.09vw;
        right: 38vw;
        z-index: 2;
    }
    .block2 .pic-wrap .mark4{
        background-image: url(assets/images/4/epa.gif);
        top: 31.31vw;
        right: 16.22vw;
        z-index: 4;
    }
    .block2 .pic-wrap .mark5{
        background-image: url(assets/images/4/b2.gif);
        top: 41.17vw;
        left: 29.588vw;
        z-index: 4;
    }
    .block2 .pic-wrap .mark6{
        background-image: url(assets/images/4/e.gif);
        top: 52.54vw;
        left: 12vw;
        z-index: 4;
    }
    .block2 .pic-wrap .mark7{
        background-image: url(assets/images/4/mineral.gif);
        top: 59.52vw;
        right: 10.06vw;
        z-index: 4;
    }
    .block2 .pic-wrap .mark8{
        background-image: url(assets/images/4/dha.gif);
        top: 66.49vw;
        left: 33.06vw;
        z-index: 4;
    }

    .block2 .pic-wrap.xshow .fish{
        transform: scale(1);
        opacity: 1;
    }


    .block2 .pic-wrap.xshow .mark{
        transform: scale(1);
        opacity: 1;
    }


    .block3{
        height: 385vw;
    }

    .block3 .pic-wrap{
        height: 90vw;
        text-align: center;
        padding-top: 10vw;
    }

    .block3 .pic{
        width: 81vw;
        height: 81vw;
        background-image: url(assets/images/pc/11.png);
        transition: all 1s ease;
        transform: scale(0.4);
        opacity: 0;
    }

    .block3 .pic-wrap.xshow .pic{
        transform: scale(1);
        opacity: 1;
    }

    .block3 .bg-fish{
        background-image: url(assets/images/sp/9.png);
        position: absolute;
        top: -33vw;
        left: -40vw;
        z-index: 2;
        width: 31vw;
        height: 20vw;
        transition: all 1.5s ease;
    }

    .block3 .bg-fish.xshow{
        top: -40vw;
        left: 0;
    }

    .block3 .bg-bottom{
        position: absolute;
        bottom: 0;
        height: 64vw;
        width: 100%;
    }


    .block3 .bg-bottom .wave{
        width: 100vw;
        height: 36.68vw;
        position: absolute;
        right: 0;
        top: 0;
        background-image: url(assets/images/sp/11-4.png);
        z-index: 4;
        animation: floating 3s linear 1s infinite alternate;

    }

    .block3 .bg-bottom .fish{
        width: 33.33vw;
        height: 10vw;
        position: absolute;
        right: 0;
        top: 12vw;
        background-image: url(assets/images/sp/11.png);
        z-index: 4;
        animation: spFishflowR2L 18s linear 1s infinite normal;
    }


    .block4{
        height: 237vw;
    }

    .block4 .pic-wrap{
        height: 79vw;
        text-align: center;
        position: relative;
        top: 11vw;
        left: 12vw;
    }


    .block4 .pic-wrap .bg{
        background-image: url(assets/images/images/chart2.png);
        width: 75.2vw;
        height: 45.73vw;
        position: absolute;
        left: 0;
        top: 14.66vw;
        z-index: 2;
        opacity: 0;
    }


    .block4 .pic-wrap .animal{
        background-image: url(assets/images/pc/13.png);
        width: 34.4vw;
        height: 15.46vw;
        position: absolute;
        left: 36vw;
        top: 6.5vw;
        z-index: 3;
        opacity: 0;
        transform: translateY(5px);
    }

    .block4 .pic-wrap .dialog{
        background-image: url(assets/images/images/chart-1.png);
        width: 37.6vw;
        height: 13.33vw;
        position: absolute;
        left: 0vw;
        top: 1vw;
        opacity: 0;
        transform: translateY(5px);
    }

    .block4 .pic-wrap .line-wrap{
        width: 0;
        height: 50.4vw;
        position: absolute;
        left: 4.13vw;
        top: 5vw;
        z-index: 3;
        overflow: hidden;
    }

    .block4 .pic-wrap .line{
        background-image: url(assets/images/images/chart3.png);
        width: 80.4vw;
        height: 44.4vw;
        position: absolute;
        left: -7vw;
        top: -4vw;
        z-index: 3;
        opacity: 1;
    }

    .block4 .pic-wrap.xshow .bg{
        opacity: 1;
    }
    .block4 .pic-wrap.xshow .line-wrap{
        width: 68.4vw;
    }
    .block4 .pic-wrap.xshow .dialog{
        opacity: 1;
        transform: translateY(0px);
    }
    .block4 .pic-wrap.xshow .animal{
        opacity: 1;
        transform: translateY(0px);
    }

    .block5{
        height: 396vw;
    }

    .block5 .bg-wrap{
        width: 100%;
        position: absolute;
        top: -24vw;
        right: 0;
        overflow: hidden;
        height: 20vw;
    }

    .block5 .bg-fish{
        background-image: url(assets/images/pc/17.png);
        position: absolute;
        top: 0;
        right: -20vw;
        z-index: 2;
        width: 19vw;
        height: 20vw;
        transition: all 1.5s ease;
    }

    .block5 .bg-fish.xshow{
        top: 0;
        right: 0;
    }

    .block5 .text{
        margin-top: 9vw;
    }

    .block5 .intro-wrap{
        width: 74.66vw;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 159vw;
        height: 185.33vw;
        background-image: url(assets/images/images/bg_1.png);
        border-radius: 5vw;
    }

    .block5 .intro-wrap .title{
        font-size: 4.13vw;
        line-height: 1em;
        line-height: 10vw;
        width: 29.33vw;
        text-align: center;
        border: .8vw solid #ffff00;
        border-radius: 10vw;
        color: #3ecaf0;
        position: absolute;
        z-index: 3;
        left: -4.34vw;
        top: -3.07vw;
        background-image: url(assets/images/images/bg_1.png);
    }

    .block5 .intro-wrap .avatar{
        width: 26.66vw;
        height: 26.66vw;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 10vw;
        border-radius: 50%;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        background-image: url(assets/images/images/avatar-5.jpg);

    }

    .block5 .intro-wrap .name{
        position: absolute;
        top: 43vw;
        width: 100%;
        text-align: center;
        font-size: 4vw;
        line-height: 1em;
    }


    .block5 .intro-wrap .name .t0{
        display: block;
        margin-bottom: 2vw;
    }

    .block5 .intro-wrap .name .t1{
    }

    .block5 .intro-wrap .body{
        width: 62.8vw;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 60vw;
        font-size: 4vw;
        line-height: 1.75em;
    }

    .block6{
        height: 536vw;
    }

    .block6>.text{
        font-size: 4vw;
        line-height: 6vw;
        width: 78vw;
        margin: 0 auto;
        z-index: 4;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 34vw;
    }

    .block6 .pic-wrap{
        height: 78vw;
        text-align: center;
        position: relative;
        top:  55vw;
        left: 13vw;

    }

    .block6 .pic-wrap .water{
        width: 73.33vw;
        height: 57.52vw;
        background-image: url(assets/images/pc/21-9.png);
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
    }

    .block6 .pic-wrap .net{
        width: 53.86vw;
        height: 31.46vw;
        background-image: url(assets/images/pc/21-2.png);
        position: absolute;
        top: 21.95vw;
        left: 50%;
        z-index: 3;
        transform: translateX(-50%);
    }

    .block6 .pic-wrap .bubble{
        width: 65.28vw;
        height: 18.88vw;
        background-image: url(assets/images/pc/21-3.png);
        position: absolute;
        top: 0;
        left: 1.46vw;
        z-index: 1;
    }

    .block6 .pic-wrap .mark1{
        width: 8.49vw;
        height: 32.93vw;
        background-image: url(assets/images/pc/21.png);
        position: absolute;
        top: 12.88vw;
        left: 14.05vw;
        z-index: 1;
    }

    .block6 .pic-wrap .mark2{
        width: 32.93vw;
        height: 8.49vw;
        background-image: url(assets/images/pc/21-1.png);
        position: absolute;
        top:32.05vw;
        left: 37.91vw;
        z-index: 1;
    }

    .block6 .pic-wrap .mark3{
        width: 27.66vw;
        height: 21.8vw;
        background-image: url(assets/images/pc/21-10.png);
        position: absolute;
        top: 8.05vw;
        left: 29.27vw;
        z-index: 1;
    }

    .block6 .pic-wrap .mark4{
        width: 28.24vw;
        height: 18.588vw;
        background-image: url(assets/images/pc/21-11.png);
        position: absolute;
        top: 29.56vw;
        left: 2.63vw;
        z-index: 4;
    }

    .block6 .pic-wrap .mark5{
        width: 26vw;
        height: 21vw;
        background-image: url(assets/images/pc/21-6.png);
        position: absolute;
        top: 35vw;
        left: 46vw;
        z-index: 4;
    }

    .block6 .pic-wrap .mark6{
        width: 7.02vw;
        height: 5.56vw;
        background-image: url(assets/images/pc/21-4.png);
        position: absolute;
        top: 49.18vw;
        right: 1.75vw;
        z-index: 4;
    }

    .block6 .pic-wrap .mark7{
        width: 8.34vw;
        height: 3.51vw;
        background-image: url(assets/images/pc/21-7.png);
        position: absolute;
        top: 5.27vw;
        right: 3.22vw;
        z-index: 4;
    }

    .block6 .pic-wrap .mark8{
        width: 7.75vw;
        height: 4.68vw;
        background-image: url(assets/images/pc/21-5.png);
        position: absolute;
        top: 46.25vw;
        left: 1.75vw;
        z-index: 4;
    }

    .block6 .pic-wrap .mark9{
        width: 15.95vw;
        height: 1.9vw;
        background-image: url(assets/images/pc/21-8.png);
        position: absolute;
        top: 5.27vw;
        left: 1.75vw;
        z-index: 4;
    }


    .block6 .pic-wrap2{
        position: absolute;
        z-index: 4;
        top: 152vw;
        left: 17vw;
        width: 90vw;
        height: 90vw;
    }

    .block6 .pic-wrap2 .logo{
        width: 32.66vw;
        height: 32.66vw;
        background-image: url(assets/images/pc/20-2.png);
        position: absolute;
        top: 0;
        left: 0;
        z-index: 4;
        opacity: .4;
        transform: scale(.4);
        transition: all .7s ease;
        transition-delay: 0s;
    }

    .block6 .pic-wrap2 .dialog{
        width: 32.19vw;
        height: 18.8vw;
        background-image: url(assets/images/pc/20-1.png);
        position: absolute;
        top: 7.28vw;
        left: 37.6vw;
        z-index: 4;
        opacity: 0;
        transform: scale(.4);
        transition: all .7s ease;
        transition-delay: 1s;
    }

    .block6 .pic-wrap2 .mark{
        opacity: 0;
        transform: scale(.1);
        transition: all .3s ease;
        transition-delay: .5s;
    }

    .block6 .pic-wrap2 .mark1{
        width: 5.17vw;
        height: 7.75vw;
        background-image: url(assets/images/pc/20-3.png);
        position: absolute;
        top: -5.64vw;
        left: .705vw;
        z-index: 4;

    }

    .block6 .pic-wrap2 .mark2{
        width: 3.52vw;
        height: 5.17vw;
        background-image: url(assets/images/pc/20-4.png);
        position: absolute;
        top: -1.41vw;
        left: 30.78vw;
        z-index: 4;
    }

    .block6 .pic-wrap2 .mark3{
        width: 3.29vw;
        height: 4.93vw;
        background-image: url(assets/images/pc/20-5.png);
        position: absolute;
        top: 27.26vw;
        left: -4.46vw;
        z-index: 4;
    }

    .block6 .pic-wrap2 .mark4{
        width: 5.4vw;
        height: 7.75vw;
        background-image: url(assets/images/pc/20-6.png);
        position: absolute;
        top: 27.02vw;
        left: 29.37vw;
        z-index: 4;
    }

    .block6 .pic-wrap2.xshow .logo{
        opacity: 1;
        transform: scale(1);
    }

    .block6 .pic-wrap2.xshow .dialog{
        opacity: 1;
        transform: scale(1);
    }

    .block6 .pic-wrap2.xshow .mark{
        opacity: 1;
        transform: scale(1);
    }

    .block6 .intro-wrap{
        width: 74.66vw;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 194vw;
        height: 274.33vw;
        background: white;
        border-radius: 5vw;
    }

    .block6 .intro-wrap .title{
        font-size: 4.13vw;
        line-height: 1em;
        line-height: 10vw;
        width: 29.33vw;
        text-align: center;
        border: .8vw solid #ffff00;
        border-radius: 10vw;
        color: #3ecaf0;
        position: absolute;
        z-index: 3;
        left: -4.34vw;
        top: -3.07vw;
        background-image: url(assets/images/images/bg_1.png);
    }

    .block6 .intro-wrap .avatar{
        width: 26.66vw;
        height: 26.66vw;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 10vw;
        border-radius: 50%;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        background-image: url(assets/images/images/avatar-5.jpg);

    }

    .block6 .intro-wrap .name{
        position: absolute;
        top: 43vw;
        width: 100%;
        text-align: center;
        font-size: 4vw;
        line-height: 1em;
    }


    .block6 .intro-wrap .name .t0{
        display: block;
        margin-bottom: 2vw;
    }

    .block6 .intro-wrap .name .t1{
    }

    .block6 .intro-wrap .body{
        width: 62.8vw;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 60vw;
        font-size: 4vw;
        line-height: 1.70em;
    }

    .block7{
        height: 375vw;
        position: relative;
    }

    .block7 .bg-fish{
        background-image: url(assets/images/sp/19.png);
        position: absolute;
        top: -25vw;
        right: -26vw;
        z-index: 1;
        width: 26vw;
        height: 25vw;
        transition: all 1.5s ease;
    }

    .block7 .bg-fish.xshow{
        top: -28vw;
        right: 0;
    }

    .block7 .intro-wrap{
        width: 74.66vw;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 43vw;
        height: 150.33vw;
        background-image: url(assets/images/images/bg_1.png);
        border-radius: 5vw;
    }

    .block7 .intro-wrap .title{
        font-size: 4.13vw;
        line-height: 1em;
        line-height: 10vw;
        width: 29.33vw;
        text-align: center;
        border: .8vw solid #ffff00;
        border-radius: 10vw;
        color: #3ecaf0;
        position: absolute;
        z-index: 3;
        left: -4.34vw;
        top: -3.07vw;
        background-image: url(assets/images/images/bg_1.png);
    }

    .block7 .intro-wrap .avatar{
        width: 26.66vw;
        height: 26.66vw;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 10vw;
        border-radius: 50%;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        background-image: url(assets/images/new/sp/38.png);

    }

    .block7 .intro-wrap .name{
        position: absolute;
        top: 43vw;
        width: 100%;
        text-align: center;
        font-size: 4vw;
        line-height: 1em;
    }


    .block7 .intro-wrap .name .t0{
        display: block;
        margin-bottom: 2vw;
    }

    .block7 .intro-wrap .name .t1{
    }

    .block7 .intro-wrap .body{
        width: 62.8vw;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 60vw;
        font-size: 4vw;
        line-height: 1.75em;
    }

    .block7 .pic-wrap{
        position: absolute;
        top: 205vw;
        left: 13vw;
        z-index: 4;
        width: 90vw;
        height: 45vw;
    }

    .block7 .pic-wrap .pic1{
        background-image: url(assets/images/pc/22-2.png);
        width: 34.52vw;
        height: 41.87vw;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 4;
    }

    .block7 .pic-wrap .pic2{
        background-image: url(assets/images/pc/22-1.png);
        width: 9.6vw;
        height: 8.57vw;
        position: absolute;
        top: 18.38vw;
        left: 31.86vw;
        z-index: 4;
    }

    .block7 .pic-wrap .pic3{
        background-image: url(assets/images/pc/22.png);
        width: 28.39vw;
        height: 40.23vw;
        position: absolute;
        top: -2.65vw;
        left: 42.28vw;
        z-index: 4;
    }



    .block7 .text{
        position: absolute;
        z-index: 2;
        top: 252vw;
        left: 50%;
        transform: translateX(-50%);
    }

    .block7 .bg-bottom{
        position: absolute;
        bottom: 0;
        height: 69vw;
        width: 100vw;
        left: 0;
        overflow: hidden;
    }


    .block7 .bg-bottom .wave{
        width: 100vw;
        height: 35.46vw;
        position: absolute;
        right: 0;
        top: 5vw;
        background-image: url(assets/images/sp/20-4.png);
        z-index: 4;
        animation: floating 3s linear 1s infinite alternate;
    }

    .block7 .bg-bottom .fish{
        width: 40.4vw;
        height: 4.8vw;
        position: absolute;
        left: 0;
        top: 10vw;
        background-image: url(assets/images/pc/23-1.png);
        z-index: 4;
        animation: spFishflowL2R 18s linear 1s infinite normal;
    }

    .block8{
        height: 420vw;
    }

    .block8 .bg-fish1{
        background-image: url(assets/images/sp/21.png);
        position: absolute;
        top: 20vw;
        right: -21.6vw;
        z-index: 1;
        width: 21.6vw;
        height: 15.06vw;
        transition: all 1.5s ease;
    }

    .block8 .bg-fish1.xshow{
        top: 20vw;
        right: 0;
    }

    .block8 .bg-fish2{
        background-image: url(assets/images/sp/25.png);
        position: absolute;
        top:240vw;
        left: -13.73vw;
        z-index: 1;
        width: 13.73vw;
        height: 11.86vw;
        transition: all 1.5s ease;
    }

    .block8 .bg-fish2.xshow{
        top: 240vw;
        left: 0;
    }

    .block8 .pic-wrap{
        height: 63vw;
        text-align: center;
    }

    .block8 .title2{
        margin-top: 9vw;
    }

    .block8 .text{
        width: 84vw;
    }

    .block8 .intro-wrap{

    }

    .block8 .pic-wrap{
        text-align: center;
    }

    .block8 .pic-wrap .pic1{
        background-image: url(assets/images/pc/24.png);
        width: 56vw;
        height: 47vw;
        margin-top: 10vw;
    }

    .block8 .intro-wrap .pic2{
        background-image: url(assets/images/pc/26.png);
        width: 56vw;
        height: 47vw;
        margin-top: 9vw;
    }


    .block8 .intro-wrap .pic3{
        background-image: url(assets/images/pc/27.png);
        width: 62vw;
        height: 47vw;
        margin-top: 4vw;
    }

    .block8 .intro-wrap .pic-wrap{
        height:  65vw;
    }

    .block8 .intro-wrap .pic-wrap2{
        height:  60vw;
    }

    .block8 .list-wrap{
        display: block;
        background-image: url(assets/images/images/bg_1.png);
        border-radius: 5vw;
        width: 86vw;
        height: 37.5vw;
        text-align: center;
        margin: 8vw auto 0;
    }

    .block8 .list-wrap .list-title{
        font-weight: bolder;
        font-size: 4.6vw;
        text-align: center;
        position: relative;
        padding-top: 2vw;
        padding-bottom: 4.3vw;
    }

    .block8 .list-title::after{
        content: "";
        display: inline-block;
        width: 4.6vw;
        height: 4.6vw;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        background-color: #3ecaf0;
        background-image: url(assets/images/sp/arrow_03.png);
        border-radius: 50%;
        border: .6vw solid #3ecaf0;
        transform: scale(.6) translate(31vw, 1vw);
        position: absolute;
        left: 50%;
    }

    .block8 .list-wrap .item-text{
        font-size: 0;
    }

    .block8 .list-wrap  .list-item{
        display: inline-block;
    }

    .block8 .list-wrap .item-icon{
        display: inline-block;
        width: 18vw;
        height: 18vw;
        margin: 0 3.7vw;
    }

    .block8 .list-wrap .icon1{
        background-image: url(assets/images/sp/27.png);
    }

    .block8 .list-wrap .icon2{
        background-image: url(assets/images/sp/26.png);
    }

    .block8 .list-wrap .icon3{
        background-image: url(assets/images/sp/30.png);
    }

    .block9{
        padding-top: 0vw;
        background-image: url(assets/images/images/pc_quiz_bg_02.png);
        background-position: center;
        background-size: 200%;
        position: absolute;
        top: 224vw;
        left: 50%;
        transform: translateX(-50%);
        width: 100vw;
        height:100vw;
    }

    .block9 .pic-wrap{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
    }

    .block9 .pic-wrap .img1{
        width: 68.8vw;
        height: 17.86vw;
        background-image: url(assets/images/7-12/2-pc.png);
        display: block;
        position: absolute;
        top: 5vw;
        left: 50%;
        transform: translateX(-50%)
    }

    .block9 .pic-wrap .img2{
        width: 71.6vw;
        height: 24.66vw;
        background-image: url(assets/images/pc/quiz-banner.png);
        display: block;
        position: absolute;
        top: 15vw;
        left: 50%;
        transform: translateX(-50%)
    }

    .block9 .pic-wrap .img2 span{
        font-size: 3.9vw;
        position: absolute;
        bottom: 10vw;
        left: 1vw;
    }

    .block9 .text{
        position: absolute;
        top: 33vw;
        left: 50%;
        transform: translateX(-50%);
        width: 80vw;
        font-size: 3vw;
    }
    .block9 .text2{
        position: absolute;
        top: 67vw;
        left: 50%;
        transform: translateX(-50%);
        width: 80vw;
        font-size: 4vw;
    }
    .block9 .text3{
        position: absolute;
        top: 104vw;
        left: 50%;
        transform: translateX(-50%);
        width: 80vw;
        font-size: 4vw;
        text-decoration: underline;
    }

    .block9 .actions{
        text-align: center;
        position: absolute;
        bottom: 28vw;
        left: 50%;
        transform: translateX(-50%)
    }

    .block9 .actions a{
        color: #ffff00;
        width: 64vw;
        display: inline-block;
        font-weight: bolder;
        font-size: 5.733vw;
        line-height: 14.73vw;
        text-align: center;
        background: #3ecaf0;
        border-radius: 14.73vw;
    }

    .footer-bg-bottom{
        position: absolute;
        bottom: 0;
        height: 100vw;
        width: 100%;
        overflow: hidden;
    }


    .footer-bg-bottom .wave{
        width: 100vw;
        height: 39.73vw;
        position: absolute;
        right: 0;
        bottom: 54vw;
        background-image: url(assets/images/sp/28-1.png);
        z-index: 4;
        animation: floating 3s linear 1s infinite alternate;
    }

    .footer-bg-bottom .fish{
        width: 55vw;
        height: 18vw;
        position: absolute;
        right: 0;
        bottom: 64vw;
        background-image: url(assets/images/pc/30.png);
        z-index: 4;
        animation: spFishflowR2L 18s linear 1s infinite normal;
    }

    .footer-twitter-area{
        position: absolute;
        text-align: center;
        width: 100%;
        bottom: 58vw;
        z-index: 5;
    }

    .footer-twitter-area .widget-area {
        margin-left: auto;
        margin-right: auto;
        width: 90%;
        /*height: 600px;*/
        /*background-color: red;*/
        z-index: 5;
    }

    .footer-twitter-area .widget-title {
        font-weight: bolder;
        font-size: 4.6vw;
        text-align: center;
        position: relative;
        padding-top: 2vw;
        padding-bottom: 4.3vw;
        color: white;
    }

    .footer{
        width: 100vw;
        text-align: right;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 42vw;
    }

    .footer .share-wrap{
        display: inline-block;
        vertical-align: middle;
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        text-align: center;
    }

    .footer .share-wrap a{
        width: 16vw;
        height: 16vw;
        margin: 0 3vw;
        font-size: 0;
        vertical-align: middle;
    }

    .footer .share-wrap .share-fb{
        background-image: url(assets/images/base/facebook_big.png);

    }

    .footer .share-wrap .share-tw{
        background-image: url(assets/images/base/twitter_big.png);
    }

    .footer .copyright{
        display: block;
        font-size: 3vw;
        text-align: center;
        width: 100vw;
        position: absolute;
        bottom: 8vw;
    }

    /**
    * .posts 区切り線つきリスト
    */
    .posts {
        text-align: center;
        border-radius:30px;
        background: white;
        color: #333;
        width: 94%;
        margin-left: 3%;
    }
    .posts .news-title {
        font-size:14px;
        margin-bottom: 5px;
        line-height: 1.5em;
    }
    .posts h3  {
        margin-top: 30px;
        margin-bottom: 20px;
    }
    .posts h3 span {
        color: #e3fb29;
        background-color: #3ccaf0;
        padding: 6px 62px 6px 64px;
        border-radius:20px;
    }
    .posts h2 {
        margin-bottom:8px;
        font-size:16px;

    }
    .posts h2::before {
        width:16px;
        margin:0 auto 10px auto;
    }

    .posts ul {
        padding: 0 30px ;
        text-align: left;
        height: 95vw;
        overflow-y: auto;
        padding-inline-start: 20px;
    }
    .posts li:first-child {
        border-top: solid 2px #ddd;
    }
    .posts li {
        border-bottom:solid 1px #ddd;
        padding:10px 0;
        list-style: none;
        position: relative;
    }
    .posts li::before {
        width:18px;
        height:18px;
        top:22px;
        right:8px;
        margin:0;
    }
    .posts li.pdf::before, .posts li.zip::before {
        right:6px;
        top:14px;
        width:30px;
        height:25px;
    }
    .posts li time {
        position: absolute;
        left: 30vw;
        top: 0;
        color: #999;
        line-height: 2.4em;
        font-size: 12px;
        margin-top: 10px;
    }
    .posts li .icon {
        display: inline-block;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        width: 25vw;
        height: 25vw;

    }
    .posts li p{
        position: absolute;
        top: 6vw;
        left: 30vw;
        font-size: 12px;
        text-overflow: ellipsis;
        height: 64px;
        overflow: hidden;
        margin-top: 15px;
    }

    .posts li .only-detail{
        position: absolute;
        top: 2vw;
        left: 30vw;
        font-size: 12px;
        text-overflow: ellipsis;
        height: 64px;
        overflow: hidden;
        margin-top: 15px;
    }


    #content .posts li p {
        float:none;
        clear:both;
        width:100%;
        margin:0px 0 0 0;
    }
    .posts .btns {
        margin-top:45px;
    }


}