.tutorial-wrap{position: absolute;top:0;right:0;bottom:0;left:0;z-index: 999999}
.tt-primary{color:#FF777A}
.modal{z-index: 999999999}
.modal-backdrop{z-index: 99999999}
.modal-backdrop.show{opacity: .65}
.modal.full, .side-nav.in{display: block}
.side-nav.in.start>div{top:0}

.tutorial-wrap{background:#fff}
.tutorial-dimmed{position: absolute;top:0;width:100vw;height:100vh;z-index: 999999999999}
.tutorial-dimmed .btn{border:0 !important}
.tutorial-dimmed .btn-outline-secondary{border:1px solid #6c757d !important}
.tutorial-dimmed>*, .tutorial-dimmed>div>*{position: absolute;color:#fff;z-index: 999999}
.tutorial-dimmed>div,.tutorial-dimmed mask{position: relative;width:100vw;height:100vh;display: inline-block;top:0;background:rgba(0,0,0, .65)}

.tutorial-create-start{position: relative;z-index: 999}
.page-chatting.tutorial-type{height:100vh;}

#helloTutorial #i1>div{width:100%;top:18vh;left:9vw;text-align: center;color:#fff}
#helloTutorial #i1 .i1{top:44vw;left:50vw;}
#helloTutorial #i1 .i1-txt{font-size:20px;font-weight: bold; color:#FF777A}
.tutorial-dimmed.step02 #iStart>div{width:80%;top:26vh;left:9vw;text-align: center}
.tutorial-dimmed.step02 #iStart .i1{top:44vw;left:50vw;}
.tutorial-dimmed.step02 #iStart .i1-txt{font-size:20px;font-weight: bold; color:#FF777A}
.tutorial-dimmed.step02 #iStart01 .i1{top:52px;left:73vw}
.tutorial-dimmed.step02 #iStart01 .point-obj{top:78px;width:100%;padding:0 20px}
.tutorial-dimmed.step02 #iStart01 .point-obj>a{border:2px solid #fff !important}
.tutorial-dimmed.step02 #iStart02 .i1{top:58px;left:11vw;}
.tutorial-dimmed.step02 #iStart02 .point-obj{top:85px;width:100%;padding:0 20px}
.tutorial-dimmed.step02 #iStart02 .point-obj>input{padding-left:12px;border:2px solid #Fff;border-radius: 7px;background:#fff;box-shadow:2px 2px 4px 2px rgba(0,0,0, .2);color:#000}
.tutorial-dimmed.step02 #i0 .i1{top:58px;left:11vw;}
.tutorial-dimmed.step02 #i0 .point-obj{top:85px;width:100%;padding:0 20px}
.tutorial-dimmed.step02 #i0 .point-obj>input{padding-left:12px;border:2px solid #Fff;border-radius: 7px;background:#fff;box-shadow:2px 2px 4px 2px rgba(0,0,0, .2);color:#000}

.tutorial-dimmed.step02 #i1 .point-obj{top:234px;left:10px}
.tutorial-dimmed.step02 #i1 .point-obj>a{padding:9px 12px;border:2px solid #F85A5E;border-radius:20px;background:#f0f0f0;box-shadow:2px 2px 4px 2px rgba(0,0,0, .2);font-size:14px;font-weight: 500;color:#000}
.tutorial-dimmed.step02 #i1 .i1{top:200px;left:34px}

.tutorial-dimmed.step02 #i2 .point-obj{top:234px;left:108px}
.tutorial-dimmed.step02 #i2 .point-obj>a{padding:9px 12px;border:2px solid #F85A5E;border-radius:20px;background:#f0f0f0;box-shadow:2px 2px 4px 2px rgba(0,0,0, .2);font-size:14px;font-weight: 500;color:#000}
.tutorial-dimmed.step02 #i2 .i1{top:178px;left:126px}

.tutorial-dimmed.step02 #i3{background:none}
.tutorial-dimmed.step02 #i3 .point-obj{top:125px;right:12px;width:75px;height:75px;padding:19px 11px;border:2px solid #F85A5E;border-radius: 52px;box-shadow:2px 2px 6px 2px rgba(0,0,0, 0.15);background:#fff}
.tutorial-dimmed.step02 #i3 .i1{top:213px;right:28px}
.tutorial-dimmed.step02 #i4{mask-image:radial-gradient(circle 76px at  3.1em 308px, transparent 48%, white 50%);-webkit-mask-image:radial-gradient(circle 76px at  3.1em 308px, transparent 48%, white 50%);-ms-mask-image:radial-gradient(circle 76px at  3.1em 308px, transparent 48%, white 50%)}
.tutorial-dimmed.step02 #i4 .i1{top:224px;left:58px}
.tutorial-dimmed.step02 #i5 .point-obj{top:482px;width:100%;box-shadow:2px 2px 7px 2px rgba(0,0,0, .15);color:#000}
.tutorial-dimmed.step02 #i5 .i1{top:375px;left:145px;line-height:1.2em;text-align:left}
.tutorial-dimmed.step02 #i6>div{width:80%;top:26vh;left:9vw;text-align: center}
.tutorial-dimmed.step02 #i6 .i1{top:44vw;left:50vw;}
.tutorial-dimmed.step02 #i6 .i1-txt{font-size:20px;font-weight: bold; color:#fff}

.tutorial-dimmed.step03 #i1 .point-obj{top:6px;right:2px;width:50px;height:50px;border-radius:50px;border:2px solid #F85A5E;background:#fff;font-size:20px;line-height: 50px;color:#000;text-align: center;box-shadow:2px 2px 6px 2px rgba(0,0,0, .15)}
.tutorial-dimmed.step03 #i1 .i1{top:42px;right:50px;line-height: 1.1em}
.tutorial-dimmed.step03 #i2 .point-obj,.tutorial-dimmed.step03 #i3 .point-obj {overflow: hidden;top:112px;left:4px;border:2px solid #F85A5E;border-radius: 50px;box-shadow:2px 2px 9px 2px rgba(0,0,0, .15);color:#000}
.tutorial-dimmed.step03 #i2 .i1, .tutorial-dimmed.step03 #i3 .i1{top:70px;left:44px;line-height: 1.3em}
.tutorial-dimmed.step03 #i2 .point-obj .make-mission, .tutorial-dimmed.step03 #i3 .point-obj .make-mission{margin:0}
.tutorial-dimmed.step03 #i3 .i1{left:36% !important}
.tutorial-dimmed.step03 #i3 .point-obj{left:23% !important}
.tutorial-dimmed.step03 #i4 .i1{top:125px;left:14%}
.tutorial-dimmed.step03 #i4 .point-obj{width: 100%;top:65px;text-align: right}
.tutorial-dimmed.step03 #i4 .point-obj a{display:inline-block;width:50%;padding:1em;background:#fff;font-weight: 500;text-align: center;color:#000;border:2px solid #F85A5E;box-shadow: 2px 2px 10px 2px rgba(0,0,0, .2)}
.tutorial-dimmed.step03 #i4and .point-obj{top:180px;width:100%;padding:0 10px;background:#fff}
.tutorial-dimmed.step03 #i4and .i1{top:125px;left:20px}

.tutorial-dimmed.step03 #i5 .point-obj{top:303px;width:100%;background:#fff;box-shadow: 2px 2px 10px 2px rgba(0,0,0, .14)}
.tutorial-dimmed.step03 #i5 .point-obj.i2{top:320px;right:144px;width:auto}
.tutorial-dimmed.step03 #i5 .point-obj.i2 button{padding:4px 11px;border:2px solid #F85A5E !important;font-size:14px;font-weight: 500;color:#000}
.tutorial-dimmed.step03 #i5 .i1{top:253px;right:14px}
.tutorial-dimmed.step03 #i6 .i1{bottom:48px}
.tutorial-dimmed.step03 #i6 .i1 b{font-size:20px}
.tutorial-dimmed.step03 #i6 .point-obj{bottom:0;width:100%;height:44px;box-shadow:2px 2px 10px 2px rgba(0,0,0, 0.3)}

.tutorial-dimmed.step04 #i1 .point-obj,.tutorial-dimmed.step03 #i3 .point-obj ,.tutorial-dimmed.step05 #i1 .point-obj{overflow: hidden;top:112px;left:4px;border:2px solid #F85A5E;border-radius: 50px;box-shadow:2px 2px 9px 2px rgba(0,0,0, .15);color:#000}
.tutorial-dimmed.step04 #i1 .i1, .tutorial-dimmed.step03 #i3 .i1, .tutorial-dimmed.step05 #i1 .i1{top:70px;left:44px;line-height: 1.3em}
.tutorial-dimmed.step04 #i1 .point-obj .make-mission, .tutorial-dimmed.step03 #i3 .point-obj .make-mission, .tutorial-dimmed.step05 #i1 .point-obj .make-mission{margin:0}
.tutorial-dimmed.step04 #i2 .i1{top:59px;left:45px}
.tutorial-dimmed.step04 #i2 .point-obj{top:111px;width:100%;padding:0 20px}
.tutorial-dimmed.step04 #i2 .point-obj>input{padding-left:12px;border:2px solid #Fff;border-radius: 7px;background:#fff;box-shadow:2px 2px 4px 2px rgba(0,0,0, .2);color:#000}
.tutorial-dimmed.step04 #i3 .i1{top:140px;left:20px}
.tutorial-dimmed.step04 #i3 .point-obj{top:170px;width:100%;color:#222}
.tutorial-dimmed.step04 #i4 .i1{top:288px;left:20px}
.tutorial-dimmed.step04 #i4 .point-obj{top:317px;width:100%;color:#222}
.tutorial-dimmed.step04 #i5 .i1{top:440px;left:20px}
.tutorial-dimmed.step04 #i5 .point-obj{top:494px;width:100%;color:#222}


.tutorial-dimmed.step05 .card-detail{background:none;}
.tutorial-dimmed.step05 .card-detail .inner-con{background:#fff}
.tutorial-dimmed.step05 #i1 .i1{top:59px;left:26%}
.tutorial-dimmed.step05 #i1 .point-obj{left:23%}
.tutorial-dimmed.step05 #i2 .i1{top:58px;left:52px}
.tutorial-dimmed.step05 #i2 .point-obj{top:111px;width:100%;padding:0 20px}
.tutorial-dimmed.step05 #i2 .point-obj>input{padding-left:12px;border:2px solid #Fff;border-radius: 7px;background:#fff;box-shadow:2px 2px 4px 2px rgba(0,0,0, .2);color:#000}
.tutorial-dimmed.step05 #i3 .i1{top:215px;left:20px}
.tutorial-dimmed.step05 #i3 .point-obj{top:226px;width:100%;padding:0 20px;color:#222}
.tutorial-dimmed.step05 .add-mission-form>div{background:#fff}
.tutorial-dimmed.step05 #i4 .i1{top:150px;width:100%;text-align: center;}
.tutorial-dimmed.step05 #i4 .point-obj{top:199px;width:100%;color:#222}
.tutorial-dimmed.step05 #i4 .point-obj.i2{padding:0 20px}
.tutorial-dimmed.step05 #i4 .point-obj.i2{top:500px;width:100%;color:#222}
.tutorial-dimmed.step05 #i4 .point-obj.i2 .none-fix{opacity: 0}

.tutorial-dimmed.step05 #i5 .i1{top:130px;width:100%;text-align: center;}
.tutorial-dimmed.step05 #i5 .point-obj{top:199px;width:100%;color:#222}
.tutorial-dimmed.step05 #i5 .point-obj.i2{padding:0 20px}
.tutorial-dimmed.step05 #i5 .point-obj.i2{top:500px;width:100%;color:#222}
.tutorial-dimmed.step05 #i5 .point-obj.i2 .none-fix{opacity: 0}

.tutorial-dimmed.step05 #i6 .i1{top:130px;width:100%;text-align: center;}
.tutorial-dimmed.step05 #i6 .point-obj{top:199px;width:100%;color:#222}
.tutorial-dimmed.step05 #i6 .point-obj.i2{padding:0 20px}
.tutorial-dimmed.step05 #i6 .point-obj.i2{top:500px;width:100%;color:#222}
.tutorial-dimmed.step05 #i6 .point-obj.i2 .none-fix{opacity: 0}

.tutorial-dimmed.step05 #i7 .i1{top:280px;left:20px}
.tutorial-dimmed.step05 #i7 .point-obj{top:360px;width:100%;color:#222}

.icon-tuto-i1{width:40vw;height:35vw;background-repeat: no-repeat;background:url(../img/character/telescope2.png) no-repeat;background-size:100% auto}
.icon-tuto-i2{width:120px;height:131px;top:351px;left:15px;background-repeat: no-repeat;background:url(../img/character/character01.png);background-size:100% auto}
.icon-tuto-i3{width:40vw;height:35vw;background-repeat: no-repeat;background:url(../img/character/fly2.png);background-size:100% auto;background-repeat: no-repeat}
.icon-tuto-i4{width:145px;height:186px;margin-right:-12px;background:url(../img/character/glass.png);background-size:100% auto;background-repeat: no-repeat}
.icon-tutorial-tit{width:153px;height:113px;background:url(../img/character/step2.png);background-size:100% auto;background-repeat: no-repeat}

#tutorial .tit-area{margin-top:-82px;text-align: center;}
#tutorial .tit-area p{margin-top:10px;font-size:22px;font-weight: bold;}
.tutorial-end.cls{position: absolute;bottom:20px;right:20px;padding:5px 6px 3px 12px;color: #FFF;opacity: 1;z-index: 99999999999;border-radius:7px;background:#232F4A !important;box-shadow: 1px 1px 4px 1px rgba(0,0,0, .3) !important;color:#fff;font-size:16px !important;opacity: .9}
.tutorial-end.cls i{opacity: .5}
.tutorial-end.next-pg{position: absolute;top:0;right:0;bottom:0;left:0;z-index: 9999999}

.tutorial-back{top:22px;left:11px;font-size:20px;color:#fff !important;z-index: 99999999999;}
.tutorial-bx{padding:0 2em 1em}
.tutorial-bx li>*{display:block;position: relative;margin:.7em 0;padding:.5em 1em;border-radius: 6px;font-size:16px;line-height:32px;border:2px solid #F85A5E;font-weight:bold; text-align:center}
.tutorial-bx li i{position: absolute;top:0.3em;right:0;opacity: .3;font-size:20px;}

@media screen and (max-width:320px){
    
    .make-mission{padding:10px !important}
    
    .tutorial-dimmed.step01 #i2 .point-obj{top:190px}
    .tutorial-dimmed.step02 #i2 .i1{top:178px;left:103px}
    .tutorial-dimmed.step02 #i1 .i1{top:195px}
    .tutorial-dimmed.step02 #i1 .point-obj{top:228px}
    .tutorial-dimmed.step02 #i2 .point-obj{top:228px;left:93px}
    .tutorial-dimmed.step02 #i3 .i1{top:193px}
    .tutorial-dimmed.step02 #i3 .point-obj{top:114px;right:5px;width:69px;height:69px;padding:17px 11px}
    .tutorial-dimmed.step02 #i4{mask-image:radial-gradient(circle 76px at  3.6em 300px, transparent 48%, white 50%);-webkit-mask-image:radial-gradient(circle 76px at  3.6em 300px, transparent 48%, white 50%);-ms-mask-image:radial-gradient(circle 76px at  3.6em 300px, transparent 48%, white 50%)}
    .icon-tuto-i2{top:auto;bottom:157px;left:5px;width:86px;height:94px;}
    .tutorial-dimmed.step02 #i5 .i1{top:326px;left:90px}
    .tutorial-dimmed.step03 #i2 .point-obj, .tutorial-dimmed.step03 #i3 .point-obj{width:100px;height:100px}
    .tutorial-dimmed.step03 #i3 .point-obj{left:20%}
    .tutorial-dimmed.step03 #i5 .i1{top:260px}
    .tutorial-dimmed.step02 #i5 .point-obj{top:auto;bottom:0;}
    .tutorial-dimmed.step03 #i5 .point-obj.i2{top:321px;right:112px}
    .tutorial-dimmed.step03 #i6 .point-obj .btn-wide.fixed{padding:1.3em 1em}
    
    .tutorial-dimmed.step05 #i3 .point-obj{top:220px}
    .tutorial-dimmed.step05 #i4 .point-obj{top:193px}
    .tutorial-dimmed.step05 #i4 .point-obj.i2{top:470px}
    .tutorial-dimmed.step05 #i5 .point-obj{top:193px}
    .tutorial-dimmed.step05 #i5 .point-obj.i2{top:470px}
    .tutorial-dimmed.step05 #i6 .point-obj{top:193px}
    .tutorial-dimmed.step05 #i6 .point-obj.i2{top:470px}
    .tutorial-dimmed.step05 #i7 .i1{top:auto;bottom:260px}
    .tutorial-dimmed.step05 #i7 .point-obj{top:auto;bottom:0;}
}