@charset "utf-8";

.tab-content>.tab-pane.show{display: block;}
.guide-info .txt{padding-top: 15px;padding-bottom: 15px;}
.guide-result{min-height: 0;min-width: 0;text-align: left;}

.intro-wrap{width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;gap: 40px}
.intro-button{position: relative;}
.intro-button:before{content: '';position: absolute;top: -10px;right: -10px;bottom: -10px;left: -10px;border-radius: 40px 40px 70px 70px;transition: background .2s;}
.intro-button .inner{background: linear-gradient( 360deg, rgb(149,159,171) 0%, rgb(191,199,208) 39%, rgb(233,238,244) 82%);border-radius: 35px 35px 70px 70px;width: 435px;height: 455px;padding: 10px;text-align: center;position: relative;}
.intro-button .hd{height: 62px;border-radius: 25px 25px 10px 10px;background: linear-gradient( 360deg, rgb(53,114,188) 0%, rgb(69,126,195) 54%, rgb(84,137,202) 100%);display: flex;align-items: center;padding: 9px 42px 0;font-size: 25px;justify-content: space-between;margin-bottom: 30px;}
.intro-button .hd>span{font-size: 55px;color: #e4eaf0;align-self: flex-end;line-height: .6;}
.intro-button strong{font-size: 30px;color: #2c343e;display: block;margin-bottom: 45px;}
.sky .text{color: #4a82c6;}
.ygrn .hd{background: linear-gradient(360deg, rgb(94,162,120) 0%, rgb(122,173,135) 54%, rgb(149,184,150) 100%);}
.ygrn .text{color: #73aa83;}
.hand1{top: 70%;left: 70%}

.intro-button:hover .inner{background: linear-gradient( 180deg, #f7f9fa 0%,  #d0d9e3 82%)}
.sky:hover:before{background: #4a82c6;}
.ygrn:hover:before{background: #73ab83;}
.intro-button.disabled{filter: grayscale(.9);pointer-events: none;}
.intro-button.disabled .guide-hand{display: none;}

.virtual-cont .title{position: absolute;top: 30px;left: 40px;font-weight: 500;display: flex;align-items: center;padding: 8px 40px 8px 8px;border-radius: 30px;background: #79b1f2;font-size: 22px;}
.virtual-cont .title>span:first-child{line-height: 40px;background: linear-gradient( 360deg, rgb(53,114,188) 0%, rgb(69,126,195) 54%, rgb(84,137,202) 100%);border-radius: 25px;width: 97px;text-align: center;padding-top: 5px;margin-right: 25px;}
#virtual3 .virtual-cont .title{background: #a2c1ab;}
#virtual3 .virtual-cont .title>span:first-child{background: linear-gradient(360deg, rgb(94,162,120) 0%, rgb(122,173,135) 54%, rgb(149,184,150) 100%);}


.act{display: flex;justify-content: center;width: 100%;height: 100%;}
.label-btm{height: 90px;display: flex;align-items: center;justify-content: center;margin-top: 15px;}
.label{font-size: 24px;padding: 10px 35px 5px;text-align: center;border-radius: 50px;background: rgba(65, 80, 97,.6);box-shadow: 2px 4px 15px 0px rgba(0, 0, 0, 0.36);}
.drag, .drag-ver{cursor: move;position: relative;}
.drag.hide{pointer-events: none;}
.drag-ver+.guide-hand{top: 25%;z-index: 5;}
.ui-draggable-dragging{z-index: 5;}
.ui-draggable-disabled{opacity: 0;pointer-events: none;}
.ui-draggable-disabled:not(.drag-ver){display: none;}
.drag img{max-width: none;}
.img-wrap{display: inline-block;vertical-align: top;position: relative;}
.img-wrap .position-absolute{top: 0;left: 0}
.before:not(.animate__animated).show,.after:not(.show){display: none;}
.before.animate__animated.show{animation-name: fadeOut;}
.act-btn{position: absolute;top: 0;left: 0;right: 0;bottom: 0}
.act-btn:not(.show){display: none;}

.virtual-button .blue{right: 50px}
.guide-hand{top: 60%;left: 60%}
.bottle .guide-hand{top: 25%;left: 35%}
.guide-hand.hide{display: none !important;}

.bottle .drag+img{opacity: .5;pointer-events: none;}
.bottle .ui-draggable-dragging+img, .bottle .ui-draggable-disabled:not(.show)+img{opacity: 0 !important}
.bottle .drag.show{display: block;opacity: 1;}

.act1-1{align-items: flex-end;padding-bottom: 35px;gap: 20px}
.act1-1>div{flex-basis: 385px;max-width: 385px;text-align: center;}
.act1-1 .drop:not(.ui-droppable-disabled)+.label-btm .label>span{display: none;}
.beaker{margin: 0 -10px -25px 0;}
.pipette{position: absolute;left: 94px;top: -90px;animation: fadeOut 1s 3s both;}
.pipette-drop{width: 10px;height: 18px;background: url(../img/122_e_sc_34/drop.png) no-repeat 0 0/100% auto;position: absolute;top: 72px;left: 117px;animation: move 1s 3 linear both;}
.spread{width: 124px;height: 135px;background: url(../img/122_e_sc_34/spread.png) no-repeat 0 0/100% auto;position: absolute;top: 100%;left: 50%;margin: 60px 0 0 -62px;animation-duration: 2.5s;animation-delay: .5s;}
.act1-1 .water{animation-duration: 3s;animation-delay: 1s;}
#act1-result, #virtual3-act2-result{top: 75px;bottom: auto;left: auto;right: 20px;}

@keyframes move {
    0% {
        transform: translateY(0);
        opacity: 0
    }

    50% {
        transform: translateY(30px);
        opacity: 1
    }

    100% {
        transform: translateY(60px);
        opacity: 0
    }
}

.img-change{position: relative;}
.img-change>img:not(.show){display: none;}

.act-wrap{align-items: flex-end;padding-bottom: 60px;gap: 60px}
.act-wrap .left{width: 470px;display: flex;flex-wrap: wrap;align-items: flex-start;row-gap: 42px;justify-content: space-between;}
.act-wrap .box{width: 215px;height: 220px;border-radius: 14px;background: linear-gradient( 360deg, rgb(62,76,92) 0%, rgb(74,88,104) 56%, rgb(85,99,115) 100%);box-shadow: 0px 5px 35px 0px rgba(29, 36, 46, 0.56);border: 6px solid #394553;display: flex;flex-direction: column;justify-content: flex-end;align-items: center;font-size: 16px;padding: 10px 0 6px;text-align: center;}
.act-wrap .box:not(.show){pointer-events: none;}
.act-wrap .box.show .guide-hand{display: block;}
.act-wrap .box>div{margin: auto 0;}
.act-wrap .box>span{height: 60px;display: flex;align-items: center;flex-shrink: 0;}
.act-wrap .drop{width: 585px;height: 530px;pointer-events: none;}
.act-wrap .right>.img-wrap:not(.show){display: none;}
.double-tube{width: 130px;height: 87px;}
.double-tube .drag{top: 0;left: 12px;position: absolute;}
.double-tube .drag.first{top: 12px;left: 0;z-index: 1;}
.double-tube .first:not(.ui-draggable-disabled)+.drag{pointer-events: none;}
.double-tube .guide-hand{z-index: 2;}

.act-wrap .pipette-drop{animation: move 1s linear both;top: 256px;left: 284px;background-image: url(../img/122_e_sc_34/drop3.png);}
.act-pipette .position-absolute:not(.show), .act-pipette .show+img{display: none;}
.act1-2 .pipette2 .pipette-drop{background-image: url(../img/122_e_sc_34/drop4.png);}
.act1-3 .pipette2 .pipette-drop{background-image: url(../img/122_e_sc_34/drop5.png);}
.act1-4 .pipette2 .pipette-drop{background-image: url(../img/122_e_sc_34/drop6.png);}


.act1-5, .act1-6{font-size: 18px;text-align: center;width: 800px;margin: 0 auto;justify-content: space-between;}
.act1-5>div{margin-top: 110px;position: relative;}
.act1-5 .drop{margin: -10px 0 -15px 5px;}
.act1-5 .circle-badge{margin-bottom: 15px;}
/* .act1-5 .circle-badge{position: absolute;left: 50%;bottom: 100%;margin-left: -18px;} */

.circle-badge{width: 36px;height: 36px;border-radius: 100%;padding-top: 5px;background: linear-gradient( 360deg, rgb(78,102,131) 0%, rgb(148,167,189) 100%);border-radius: 100%;box-shadow: 2px 2px 2px rgba(255,255,255,.05) inset, -2px -2px 2px rgba(0,0,0,.1) inset;display: flex;margin: 0 auto;font-size: 15px;align-items: center;justify-content: center;}
.virtual-button .btn-result{left: auto;right: 30px;width: auto;height: 50px;border-radius: 25px;padding: 5px 10px 0 30px;text-align: left;background: linear-gradient( 360deg, rgba(81,93,107,.4) 0%, rgba(108,121,136,.4) 48%, rgba(134,148,165,.4) 100%);box-shadow: 5px 7px 15px 0px rgba(6, 9, 12, 0.2);font-size: 20px;font-weight: 500;}
.virtual-button .btn-result:after{content: '';width: 40px;height: 40px;background: url(../img/122_e_sc_34/next.png) no-repeat  0 0/40px auto;margin: -5px 0 0 20px;}

#virtual2-act6{background: url(../img/122_e_sc_34/bg.jpg) no-repeat 0 100%/100% auto;}
.act1-6{align-items: flex-start;}
.act1-6 .circle-badge{margin-bottom: 10px;}
.act1-6 img{margin: 0 0 15px 5px;}

.badge-title{line-height: 48px;padding: 4px 15px 0;font-size: 20px;background: #3f8a56;border-radius: 13px;display: inline-block;vertical-align: top;margin: 100px 0 15px}

#virtual2-act6 .btn-result{bottom: 70px;right: 50%;transform: translateX(50%);padding-right: 30px;white-space: nowrap;}
#virtual2-act6 .btn-result:after{display: none;}


.act7{align-items: center;gap: 80px;padding: 50px 50px 0 0;}
.act7 .left{display: flex;gap: 16px}
.act7 .box{width: 235px;height: 280px;background: #1d2632;box-shadow: inset 0px 10px 30px 0px rgba(0, 0, 0, 0.18);border-radius: 24px;display: flex;align-items: center;justify-content: center;font-size: 18px;position: relative;border: 5px solid #4d5b6b;display: flex;flex-direction: column;}

.act7:not(.show) .box .img-wrap>img:first-child,
.act7 img[id*=act7-right]:not(.show), .act7-box-btn:not(.show),
.act7.show .box .img-wrap>img+img,
.act7.show+.virtual-button,
.act7-pipette>div:not(.show),
.act7 img[id*=act7-right].show~img{display: none;}
.act7-pipette>div.position-absolute{top: -55px}
.act7-pipette>div>img{animation: fadeOut .5s 1.5s both;}

.act7-pipette .pipette-drop{animation: move 1s linear both;top: 257px;left: 66px;background-image: url(../img/122_e_sc_34/drop6.png);}
[id*=act7-right2] .pipette-drop{left: 123px}
[id*=act7-right3] .pipette-drop{left: 180px}

.act7-box-btn{position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.circle-badge-wrap{display: flex;justify-content: center;gap: 22px;margin: -10px 0 50px;}
.circle-badge-wrap .circle-badge{margin: 0;}


.act8{align-items: flex-end;padding-bottom: 80px;gap: 120px}
.act8 .bottle{width: 65px;margin: 0 auto 30px;display: block;}
.act8 .drop>img{opacity: 0;transition: opacity 1s;display: block;}
.act8 .drop>img.show{opacity: 1;transition: opacity 1s;}

.act8-pipette{position: absolute;top: 0;left: 0}
.act8-pipette>div:not(.show){display: none;}
.act8 .circle-badge-wrap{margin-bottom: 20px;}

.act8-pipette .pipette-drop{background-image: url(../img/122_e_sc_34/drop2.png);top: 165px;left: 66px}
.act8-pipette div:nth-child(2) .pipette-drop{left: 123px}
.act8-pipette div:nth-child(3) .pipette-drop{left: 179px}

.act9{align-items: flex-end;padding-bottom: 65px;gap: 110px}
.act9 .drag{top: 28px}
.act9 .drag:nth-of-type(1){left: 63px}
.act9 .drag:nth-of-type(2){left: 136px}
.act9 .drag:nth-of-type(3){left: 209px}


.act9 .drop>img{position: absolute;bottom: 45px;left: 43px}
.act9 .drop>.img2{left: 93px}
.act9 .drop>.img3{left: 143px}

.act9 .drag+img.position-absolute{pointer-events: none;}

.act10{align-items: center ;}
.act10 .circle-badge-wrap{margin-bottom: 10px;}


.act10 .before-img:not(.show)+img, 
.act10 [data-result]:not(.show),
.last-scene-btn:not(.show){display: none;}
.act10 .img-wrap>[data-result]{position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.last-scene-btn .guide-hand{top: 50%;left: 46%}
#virtual2-last .guide-hand{top: 50%;left: 26%}


.clock{width: 210px;height: 210px;background: url(../img/122_e_sc_34/clock.png) no-repeat 0 0/100% auto;position: absolute;top: 150px;right: 200px}
.clock-hand{width: 100%;height: 100%;background: url(../img/122_e_sc_34/clock-hand.png) no-repeat 0 0/100% auto;}
.clock.show .guide-hand, #virtual3-act5 .clock .guide-hand{display: block;}
.clock.show .btn-clock, #virtual3-act5 .btn-clock{position: absolute;top: 0;left: 0;right: 0;bottom: 0}


.clock-hand.show{animation: rotate 9s linear both;}
.clock-hand.show+.btn-clock{display: none;}
.act10 .before-img.show{animation: fadeOut 3s 6s linear both;}
.act10 .before-img.show+img{animation: fadeIn 3s 6s linear both;}

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

.last-q{position: absolute;width: 400px;background: linear-gradient( 360deg, rgb(37,45,54) 0%, rgb(71,84,101) 100%);border-radius: 16px;border: 5px solid #2f70be;box-shadow: 5px 6px 25px 0px rgba(10, 11, 11, 0.66);top: 250px;right: 50px;text-align: center;font-size: 24px;padding: 24px 0 20px;}


.last-virtual-button button:not(.show), .virtual3-act2-btn:not(.show){display: none;}



.act11{align-items: flex-end;padding: 0 0 80px 140px;gap: 100px;position: relative;}
.act11 .drag{position: absolute;z-index: 10;}

.act11>.drag{left: 130px;top: 235px;transform: rotate(30deg);transform-origin: center bottom;}
.act11>.drag .guide-hand{transform: rotate(-30deg);top: 35%}
.act11 .center .drag{top: -130px;left: 108px}

.act11 .right .img-wrap>img:not(.show), #v3-drag2:not(.show){display: none;}
.act11 .dim{position: absolute;top: 0;left: 0;right: 0;bottom: 0;z-index: 15;}
.act11 .dim.hide, #v3-drag2.hide{display: none;}

.act11.show .dim{background: rgba(0,0,0,.5);}
.act11.show .center{position: relative;z-index: 16;}
.act11.show+.guide{z-index: 16;}

.act11 .right .img-wrap>img.show{animation: fadeOut .5s .5s both;}
.act11-img{margin-left: 11px;position: relative;z-index: 15;pointer-events: none;}


#virtual3-act3 .box:first-child:not(.hide) .act7-box-btn,
#virtual3-act6 .last-scene-btn{display: block;}
#virtual3-act4 .circle-badge-wrap{margin-bottom: 0;gap: 40px;padding-left: 5px;}
#virtual3-act4 .act9 .drag{top: 15px}


.virtual3-act2-btn{width: 100%;height: 100%;}
.virtual3-act2-btn.show .guide-hand{display: block;}


.act7 .after{position: absolute;bottom: 115px}
.act7 .hide>.after{display: block;animation: fadeOut .5s .5s both;}
#virtual3-act3 .act7-pipette>div>img{opacity: 0;animation: fadeIn .5s 1s both, fadeOut .5s 2s forwards;}
#v3-act7-right1 .pipette-drop{background-image: url(../img/122_e_sc_34/drop4.png);}
#v3-act7-right2 .pipette-drop{background-image: url(../img/122_e_sc_34/drop5.png);}
#virtual3-act3 .pipette-drop{animation-delay: 1s;}