@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=STIX+Two+Text:ital,wght@0,400..700;1,400..700&display=swap');

#virtual{background: linear-gradient(180deg, rgba(166,205,251,1) 0%, rgba(118,163,217,1) 100%);}
.guide-info .txt{padding-top: 15px;padding-bottom: 15px;}
.virtual-cont{display: flex;flex-direction: column;justify-content: flex-end;}

.dropdown-menu{border-radius: 15px;border: 0;box-shadow: 8px 8px 35px 0px rgba(29, 36, 45, 0.64);padding: 3px;background: linear-gradient(180deg, #6b7888 0%, #374454 100%);margin: 8px 0;}
.dropdown-menu.show{display: block;}
.dropdown-menu .inset{border-radius: 15px;background: #323a45;color: #fff;font-weight: 400;font-size: 15px;}
.dropdown-menu .icon{position: absolute;width: 12px;height: 12px;background-image: url(../img/111_e_sc_17/close.png);top: 10px;right: 10px}

.condition{position: absolute;top: 15px;left: 25px}
.condition:not(.show){pointer-events: none;}
.condition .dropdown-menu{background: linear-gradient(90deg, #6b7888 0%, #374454 100%);margin: 8px 0;}
.condition button{width: 185px;height: 40px;padding: 3px 18px 0;border-radius: 20px;font-size: 20px;;color: #fff;background: linear-gradient( 360deg, rgb(53,114,188) 0%, rgb(69,126,195) 54%, rgb(84,137,202) 100%);display: flex;align-items: center;justify-content: space-between;}
.condition button:after{content: '';width: 12px;height: 9px;background: url(../img/111_e_sc_17/toggle.png) no-repeat 0 0/100% auto}
.condition button.show:after{transform: scaleY(-1);}
.condition .inset{width: 600px;overflow: hidden;}
.thead{text-align: center;line-height: 30px;background: linear-gradient( 360deg, rgba(76,86,99,.6) 0%, rgba(109,119,131,.6) 44%, rgba(141,151,163) 92%);margin-bottom: 8px;}
.tbody{padding: 0 7px 7px;}
.tbody .row+.row{margin-top: 4px;border-top: 1px dotted #9ca0a6;padding-top: 7px;}
.condition .col-auto{border-left: 1px solid #fff;}
.thead .col-auto{margin: 6px 0;}
.tbody .col-auto{border-color: #9ca0a6;margin-bottom: 4px}
.tbody .row+.row .col{padding: 7px 10px;letter-spacing: 0;}

.shelf{position: relative;align-self: center;}
.shelf .label{position: absolute;background: linear-gradient( 360deg, rgb(156,184,218) 0%, rgb(180,204,233) 58%, rgb(203,223,247) 89%);font-size: 15px;color: #7690af;font-weight: 500;padding: 0 20px;line-height: 20px;padding-top: 3px;border: 3px solid #fff;border-radius: 20px;white-space: nowrap;filter: drop-shadow(1px 2px 4px rgba(29, 36, 46, 0.24));z-index: 5;}
.shelf .label:after{content: '';position: absolute;width: 8px;height: 10px;background: url(../img/111_e_sc_17/arr.png) no-repeat 0 0/100% auto;top: 50%;right: 100%;margin-top: -5px}
.shelf .label.right:after{transform: scaleX(-1);right: auto;left: 100%}
.dot{position: absolute;font-size: 15px;font-weight: 500;display: flex;}
.dot:before{content: '';display: block;width: 18px;height: 18px;border-radius: 100%;background: #536dfa;border: 3px solid #fff;}
.shelf>.dot{align-items: center;top: 11px;left: 50%;margin-left: -9px;gap: 8px}
.shelf>.dot::before{margin-top: -5px;}

#obj{width: 132px;height: 132px;position: absolute;bottom: 100%;background: radial-gradient(circle farthest-side at left top, #4f525f 0%, #333540 100%);border-radius: 10px;left: 50%;margin-left: -66px;z-index: 1;}
#obj .label{bottom: 100%;left: 50%;transform: translateX(-50%);margin-bottom: 13px;}
#obj .label::after{top: 100%;margin: 0 0 0 -4px;left: 50%;right: auto;transform: rotate(-90deg);}
#obj .dot{position: absolute;bottom: 50%;left: 50%;transform: translate(-50%,9px);flex-direction: column-reverse;align-items: center;gap: 5px}

.control-bottom{height: 175px;background: #50657f;border-radius: 20px 20px 0 0;padding: 20px 24px;display: flex;gap: 16px;}
.control-bottom>div{padding: 1px;border-radius: 10px;background: linear-gradient(180deg, #475b74 0%, #5d7593 100%)}
.inner{display: flex;border-radius: 10px;height: 100%;box-shadow: 2px 2px 2px rgba(255,255,255,.05) inset, -2px -2px 2px rgba(0,0,0,.1) inset;padding: 22px 0;letter-spacing: 0;}
.box-left{flex-basis: 505px;max-width: 505px;position: relative;}
.box-left .inner{background: #566b85;}
.box-right{flex: 1} 
.box-right .inner{background: #495e77;}
.inner strong{display: block;margin-bottom: 8px;}
.inner .row{display: inline-flex;}
[data-step]{padding: 0 30px;height: 100%;font-size: 17px;position: relative;}
.custom-control{font-weight: 400;line-height: 23px;padding: 2px 0 0 35px !important;background: url(../img/111_e_sc_17/radio.png) no-repeat 0 0/25px auto;margin-top: 7px;}
.custom-control.on{background-image: url(../img/111_e_sc_17/radio_on.png);}
.btn-move{display: inline-block;vertical-align: top;width: 110px;height: 52px;background: url(../img/111_e_sc_17/btn-move.png) no-repeat 0 0/100% auto}
.btn-move[data-move=prev]{transform: scaleX(-1);}
.box-right [data-step]:first-child{flex-basis: 265px;max-width: 265px;}
.inner>.line{flex-basis: 4px;max-width: 4px;border-radius: 2px;background: linear-gradient(90deg, rgba(99,119,143,1) 0%, rgba(77,96,120,1) 100%);padding: 0;}
.inner .dropdown{position: absolute;top: 0;right: 30px}
.inner .dropdown>button{width: 55px;height: 25px;background: #4981c4;font-size: 15px;color: #fff;font-weight: 400;padding-top: 4px;border-radius: 5px;}

i{font-style: italic;font-family: "STIX Two Text", serif;font-optical-sizing: auto;font-size: 17px;}
sub{font-size: 10px;bottom: 0;margin-left: 1px;letter-spacing: 0;font-style: normal;}


#axis{position: absolute;width: 24px;height: 24px;border-radius: 100%;background: linear-gradient( 360deg, rgb(210,155,5) 8%, rgb(225,193,5) 59%, rgb(239,231,4) 100%);border-radius: 100%;top: 25px;box-shadow: 1px 2px 4px 0px rgba(29, 36, 46, 0.58)}
#axis:before{content: '';display: block;width: 14px;height: 14px;border-radius: 100%;margin: 5px;background: linear-gradient( 360deg, rgb(24,48,77) 8%, rgb(47,79,118) 59%, rgb(69,109,158) 100%);border-radius: 100%;}
#axis[data-axis=A]{left: 76px}
#axis[data-axis=B]{right: 76px}

.box-right .dropdown-menu{top: auto;bottom: 100%;left: auto;right: 0}
.legend{width: 300px;padding: 25px 20px 20px;}
.legend>li+li{margin-top: 7px;}
.legend>li{position: relative;padding-left: 13px;line-height: 24px}
.legend>li:before{content: '';position: absolute;top: 12px;left: 0;width: 4px;height: 4px;border-radius: 100%;background: #fff;margin-top: -2px;}


.view:not(.show){display: none;}
[data-step].disabled [role="button"]{pointer-events: none;}

.guide-line{position: absolute;pointer-events: none;border: 2px dashed #fff;border-radius: 10px;display: none;}
[data-step]:not(.disabled)>.guide-ani, 
.guide-line.show,
.guide-wrap.show>.guide-ani{display: block;}


.box-left>.guide-line{top: -5px;left: -5px;right: -5px;bottom: -5px;}
[data-step] .guide-line{top: -13px;bottom:-13px;left: 10px;right: 10px}
[data-step] .guide-hand{left: 80%;top: 60%}
.guide-ani.hide{display: none !important;}


#arm .line{position: absolute;bottom: 0;border-left: 1px dashed #50af6e;height: 365px;}

#arm .line:nth-child(1){left: 12.5%}
#arm .line:nth-child(2){left: 50%}
#arm .line:nth-child(3){right: 12.5%}

.drawline{position: absolute;bottom: 295px;width: 100%;left: 0;display: flex;flex-wrap: wrap;}
.drawline>div{width: 37.5%;position: relative;height: 6px;background: #2d9f27;border: 1px solid #fff;margin: 24px 12.5% 0;border-radius: 3px;}
.drawline>div:after{content: '';position: absolute;width: 15px;height: 20px;background: url(../img/111_e_sc_17/arm.png) no-repeat 0 0/100% auto;right: -2px;top: 50%;margin-top: -10px;}
.drawline>div:nth-child(1){width: 75%;}
.drawline>div:nth-child(2){margin-right: 37.5%;}
.drawline .badge{position: absolute;background: #30a929;top: 50%;left: 100%;margin: -13px 4px 0;}

[data-axis="B"] .drawline{justify-content: flex-end;}
[data-axis="B"] .drawline>div:after{transform: scaleX(-1);left: -2px;right: auto}
[data-axis="B"] .drawline>div:nth-child(2){margin-right: 12.5%;margin-left: 37.5%;}
[data-axis="B"] .drawline .badge{left: auto;right: 100%;}

.badge{line-height: 16px;padding: 6px 6px 2px;border: 1px solid #fff;border-radius: 6px;box-shadow: 2px 2px 2px rgba(255,255,255,.05) inset, -2px -2px 2px rgba(0,0,0,.1) inset;font-size: 13px;letter-spacing: 0;color: #fff;}

.guide-wrap{width: 210px;height: 75px;position: absolute;bottom: -12px;left: 20px;pointer-events: none;}
.guide-wrap .guide-line{position: static;width: 100%;height: 100%;}
.guide-wrap[data-amount="tau"]{left: 225px}

#step4:not(.disabled) .custom-control:not(.show){pointer-events: none;opacity: .5;}

.virtual-button .btn-replay{bottom: 180px}

.virtual-button .btn-replay:not(.show),
.tau:not(.show), .power-line:not(.show),
[data-axis='A'] #ta, [data-axis='B'] #tb{display: none;}


.val{position: absolute;display: flex;align-items: center;white-space: nowrap;}
.val sub{bottom: -.25em}

.power-line{position: absolute;height: 105px;z-index: 15;display: flex;}
.power-line .line{height: 100%;width: 6px;background: #d33233;border-radius: 3px;border: 1px solid #fff;position: relative;}
.power-line .line:after{content: '';position: absolute;width: 20px;height: 15px;background: url(../img/111_e_sc_17/power.png) no-repeat 0 0/100% auto;bottom: -2px;left: 50%;margin-left: -10px;}
.power-line.reverse{align-items: flex-end;}
.power-line.reverse .line:after{bottom: auto;top: -2px;transform: scaleY(-1);}
.power-line .val{color: #d33233;}
.power-line .badge{background: #d33233;margin: -3px 0 0 3px;}
#fo{top: 0;left: 50%;margin-left: -3px;}
#fo .line{height: 88.88%;}
#fo .val{bottom: 0;left: 100%;margin-left: 10px;}
#fs{top: 17px;left: 50%;margin-left: -3px;}
#fs .line{height: 22.22%;}
#fs .val{top: 100%;left: -15px;margin-top: 2px;}
.reverse .val{bottom: 100%;left: -15px;margin-bottom: 2px;}
#fa{bottom: 60px;left: 85px}
#fb{bottom: 60px;right: 85px}


.tau{position: absolute;display: flex;z-index: 15;}
.tau .val{color: #5822d1;}
.tau .badge{background: #5822d1;margin: -3px 0 0 3px;}
.o{margin: 0 -.2em;}
#to img, #ts img{transform: scale(1,-1);}
#ts{top: 17px;left: 306px}
#ts .val, #to .val{top: 100%;left: 100%;margin: 3px 0 0 -15px;}
#to{left: 50%;top: 0;margin-left: -46px;}
#to .val{left: 20%}
#ta{bottom: 60px;left: 79px;}
#ta img{transform: scaleX(-1);}
#tb{bottom: 60px;right: 78px}
#ta .val, #tb .val{bottom: 100%;left: 0;margin: 0 0 3px -15px;}
[data-axis='B'] #to img, [data-axis='B'] #ts img{transform: scale(-1,-1);}
[data-axis='B'] #to{margin-left: -9px;}
[data-axis='B'] #ts{left: 343px;}
[data-axis='B'] #ts .val{left: 0}








[data-num="0"] #fa .val{bottom: 55%;left: 12px;}
[data-num="0"] #fo .val{margin-left: 36px;}
[data-num="3"] #fs .val{left: -83px}
[data-num="3"] #to .val{left: -90%}
[data-num="4"] #ts .val{left: 3%}
[data-num="5"] #tb .val{left: 45px}
[data-num="6"] #fb .val{left: 14px;bottom: 55%}
[data-num="6"] #fo .val{margin-left: -95px;}
[data-num="6"] #tb .val{left: -45px}


[data-axis="B"][data-num="0"] #ta .val{bottom: 55%;left: -70px}
[data-axis='B'][data-num="2"] #ts .val{left: 25px}
[data-axis='B'][data-num="3"] #ts .val{left: 50px}