@charset "utf-8";

.intro-buttons{display: flex;gap: 80px;justify-content: center;padding-top: 50px;}
.intro-buttons .box{width: 333px;height: 557px;background-color: #fff;background-image: linear-gradient( 360deg, rgb(204,212,232,.8) 0%, rgb(212,219,233,.8) 48%, rgb(220,226,234,.8) 100%);box-shadow: 3px 3px 20px 0px rgba(29, 36, 46, 0.25);border-radius: 15px;padding: 8px 14px 0;color: #272d34;text-align: center;}
.intro-buttons .title{display: block;line-height: 32px;background: linear-gradient( 360deg, rgb(72,80,96) 0%, rgb(93,102,116) 48%, rgb(114,123,135) 99%);border-radius: 10px;font-size: 16px;padding-top: 3px;border: 1px solid #828992;color: #fff;}

.intro-btn{height: 240px;display: flex;flex-direction: column;border: 3px dashed transparent;border-radius: 15px;margin: 10px 0;padding-bottom: 10px;position: relative;}
.intro-btn.show{border-color: #abb5c1;}
.intro-btn .ele{margin: auto;}
.intro-buttons .guide-hand{top: 50%;left: 50%}

.tab-pane:not(.active){display: none;}
.tab-pane{padding-top: 70px;}

.guide:not(.hide) ~ .q-line{pointer-events: none;}
.q-line{width: 786px;margin: 0 auto;height: 520px;display: flex;flex-direction: column;position: relative}
.q-line ul{display: flex;justify-content: space-between;}
.q-line-box{background-color: #fff;background-image: linear-gradient( 360deg, rgb(176,184,198,.8) 0%, rgb(198,205,216,.8) 48%, rgb(220,226,234,.8) 100%);border: 1px solid #abb5c1;box-shadow: 3px 3px 20px 0px rgba(29, 36, 46, 0.25);border-radius: 12px;width: 336px;height: 237px;display: flex;align-items: center;justify-content: center;flex-direction: column;font-size: 18px;color: #272d34;padding-bottom: 20px}
.q-line-box .ele{margin: auto;}
.q-line-badge{width: 180px;height: 72px;display: flex;align-items: center;justify-content: center;border-radius: 13px;font-size: 30px;box-shadow: 4px 4px 2px rgba(255,255,255,.1) inset, -4px -4px 2px rgba(0,0,0,.1) inset;padding-top: 8px;background: #3f8a56;}
.q-line-badge.blue{background-color: #3849d0;}
.q-line-btn[data-group="2"]:nth-child(1){margin-left: 78px;}
.q-line-btn[data-group="2"]:nth-child(2){margin-right: 78px;}
.q-line:not(.make-end) .drawBtn{visibility: hidden}
.q-line-btn{position: relative;}
.q-line-btn button{display: block;transition: none;position: absolute;top: 100%;left: 50%;width:16px;height:16px;margin: -8px 0; border-radius: 50%;text-indent: -999em;z-index: 10;background: #d4dbe9;}
.q-line-btn button:before{content: '';position: absolute;width: 50px;height: 50px;top: 50%;left: 50%;margin: -25px;}
.q-line-btn.line-start button{box-shadow:0 0 10px #159DFF;}
.q-line-btn.top button {top: auto;bottom: 100%;margin-bottom: 16px;}
.q-line-btn.btm button{margin-top: 16px;}
.canvas{display: block;position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 5;pointer-events: none}
.no-touch{-ms-user-select: none;-webkit-touch-callout: none;-webkit-user-select: none;user-select: none}

.cont{display: flex;align-items: center;width: 570px;justify-content: space-between;align-content: center;height: 100%;margin: 0 auto;padding-bottom: 70px;flex-wrap: wrap;}
.cont.wide:has(.blank-type.show){width: 850px;}
.blank-type:not(.show){display: none;}
.blank-type{order: 4;}


.guide.show ~ .cont .cont-hand1{display: block;}
.img-change{position: relative;}
.img-change .guide-hand{top: 50%;left: 50%}
.img-change [role="button"]:not(.show), .img-change .ele.show~[role="button"], 
.cont>.title:not(.show), .cont .img-change .ele.show~.guide-hand{display: none}
.img-change [role="button"]{position: absolute;top: 0;left: 0;width: 100%;height: 100%;}

.img-change>.ele{transition: opacity 1s;}
.img-change>.ele:nth-child(1), .img-change>.show+.ele{opacity: 0;}
.img-change>.ele:nth-child(2){position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}
.img-change>.ele.show:nth-child(1){opacity: 1;}


.img-change:last-child{margin-right: -20px;}

.cont>.title{width: 100%;animation: fadeIn 1s 1s both;text-align: center;margin-top: -95px;}
.cont>.title>span{font-size: 30px;line-height: 60px;display: inline-block;margin: 0 auto 30px;padding: 5px 25px 0;box-shadow: 4px 4px 2px rgba(255,255,255,.1) inset, -4px -4px 2px rgba(0,0,0,.1) inset;background: #3f8a56;border-radius: 30px;}

.cont>.title.show~.img-change{transition: transform 1s linear;}

.cont>.title.show~.img-change:nth-of-type(2){transform: translateX(50%);}
.cont>.title.show~.img-change:nth-of-type(3){transform: translateX(-50%);}

.wide>.title.show~.img-change:nth-of-type(3){transform: none}


.wide>.title.show~.img-change:nth-of-type(2){transform: translateX(95%);}
.wide>.title.show~.img-change:nth-of-type(4){transform: translateX(-95%);}


#virtual3:has(.blank-type.show) .img-change:nth-of-type(3){order: 2;}
#virtual3:has(.blank-type.show) .img-change:nth-of-type(2){order: 3;}
#virtual3 .wide>.title.show~.img-change:nth-of-type(2){transform: none}
#virtual3 .wide>.title.show~.img-change:nth-of-type(3){transform: translateX(40%);}
#virtual3 .wide>.title.show~.img-change:nth-of-type(4){transform: translateX(-40%);}

#virtual4 .cont>.title.show~.img-change:nth-of-type(2){transform: translateX(40%);}
#virtual4 .cont>.title.show~.img-change:nth-of-type(3){transform: translateX(-60%);}



.ele{position: relative;display: inline-block;vertical-align: top;font-weight: 500;font-size: 16px;color: #fff}
.ele .num{position: absolute;top: 50%;left: 50%;transform: translate(-45%,-45%);}
.ele img{max-width: none;}
.ele .ion{position: absolute;top: 10%;left: 105%;font-size: 16px;}

.img-change>.ele:nth-child(2){font-size: 14px;}

.blank{position: relative;width: 280px;height: 250px;background: linear-gradient( 360deg, rgb(102,112,123) 0%, rgb(126,135,145) 48%, rgb(149,157,167) 100%);border-radius: 16px;}