* {
                margin: 0;
                padding: 0;}
@media screen and (min-width:1025px){

            #app {
                width: 100%;
                /*height: 100vh;*/
                background: #f1f1f1;}

              .app {
			display:none;
				
			}

            .chat {
                position: fixed;
                left: 36px;
                bottom: 100px;
                z-index: 999;}

            .chat .chatBox {
                width: 140px;
                height: 138px;
                background: #fff;
                border-radius: 50%;
                position: relative;
                z-index: 999;
                border: solid 5px #6c53f3;
                }

            .chat .chatBox .aiChat {
                position: absolute;
                left: -30px;
                top: -30px;
                width: 140px;
                }

            .chat .chatBox .text {
                margin-top: 96px;
                display: block;
                text-align: center;
                background-clip: text;
                -ms-background-clip: text;
                -webkit-background-clip: text;
                color: transparent;
                background-image: linear-gradient(to right, #c084fc, #218bff);
                font-weight: 600;
                cursor: pointer;
                }

            .chat .chatBox .glasses {
                position: absolute;
                width: 45px;
                top: 12px;
                left: 42px;
                animation: blink 8s infinite;
                -webkit-animation: blink 8s infinite;
                }

            @-webkit-keyframes blink {
                0%, 10% {
                    transform: scaleY(1);}

                5%, 15% {
                    transform: scaleY(0.5);}

                30%, 40% {
                    transform: scaleY(1);}

                35%, 45% {
                    transform: scaleY(0.5);}

                60%, 70% {
                    transform: scaleY(1);}

                65%, 75% {
                    transform: scaleY(0.5);}

                85%, 95% {
                    transform: scaleY(0.5);}

                80%, 100% {
                    transform: scaleY(1);}
            }

            @keyframes blink {
                0%, 10% {
                    transform: scaleY(1);}

                5%, 15% {
                    transform: scaleY(0.5);}

                30%, 40% {
                    transform: scaleY(1);}

                35%, 45% {
                    transform: scaleY(0.5);}

                60%, 70% {
                    transform: scaleY(1);}

                65%, 75% {
                    transform: scaleY(0.5);}

                85%, 95% {
                    transform: scaleY(0.5);}

                80%, 100% {
                    transform: scaleY(1);}
            }

            @-webkit-keyframes tada {
                0% {
                    -webkit-transform: scaleX(1);
                    transform: scaleX(1);}

                10%, 20% {
                    -webkit-transform: scale3d(.9, .9, .9) rotate(-3deg);
                    transform: scale3d(.9, .9, .9) rotate(-3deg);}

                30%, 50%, 70%, 90% {
                    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
                    transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);}

                40%, 60%, 80% {
                    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
                    transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);}

                to {
                    -webkit-transform: scaleX(1);
                    transform: scaleX(1);}
            }

            @keyframes tada {
                0% {
                    -webkit-transform: scaleX(1);
                    transform: scaleX(1);}

                10%, 20% {
                    -webkit-transform: scale3d(.9, .9, .9) rotate(-3deg);
                    transform: scale3d(.9, .9, .9) rotate(-3deg);}

                30%, 50%, 70%, 90% {
                    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
                    transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);}

                40%, 60%, 80% {
                    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
                    transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);}

                to {
                    -webkit-transform: scaleX(1);
                    transform: scaleX(1);}
            }

            .chat .chatBox .idea {
                position: absolute;
                width: 40px;
                top: -30px;
                left: -30px;
                }

            .chat .chatBox .closeChatBox {
                display: none;}

            .chat .chatBox:hover .idea {
                animation: tada 1s;
                -webkit-animation: tada 1s;}

            .chat .chatBox:hover .text {
                animation: tada 1s;
                -webkit-animation: tada 1s;}

            .chat .infoBox {
                position: absolute;
                top: 50%;
                background: #fefafc;
                border-radius: 8px;
                left: 170px;
                padding: 15px 10px;
                border: solid 10px rgba(255, 255, 255, 1);
                transform: scale(0) translateY(-50%);
                transform-origin: left top;
                transition: all 0.5s;
                box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
                }

            .chat .showInfoBox {
                transform: scale(1) translateY(-50%);
                transition: all 0.5s;
                transform-origin: center center;}

            .chat .infoBox p {
                line-height: 28px;
                font-size: 16px;
                color: #5c5c5c;
                margin-bottom: 20px;}

            .chat .infoBox p span {
                background-clip: text;
                -ms-background-clip: text;
                -webkit-background-clip: text;
                color: transparent;
                background-image: linear-gradient(to right, #c084fc, #218bff);
                font-weight: 600;}

            .chat .infoBox .aiSearchBox {
                display: flex;
                width: 750px;
                height: 48px;}

            .chat .infoBox .aiSearchBox input {
                flex-grow: 1;
                border: solid 1px #e3e3f7;
                border-right: 0px;
                outline: none;
                padding-left: 20px;
                background: #fff;
                border-radius: 4px 0px 0px 4px;}

            .chat .infoBox .aiSearchBox .aiSearchBtn {
                width: 120px;
                height: 48px;
                line-height: 48px;
                text-align: center;
                background: linear-gradient(to right, #c084fc, #218bff);
                border-radius: 0px 4px 4px 0px;
                font-size: 16px;
                font-weight: 600;
                color: #fff;
                cursor: pointer;}

            .chat .infoBox .closeBox {
                position: absolute;
                top: -18px;
                right: -18px;
                width: 24px;
                height: 24px;
                border-radius: 50%;
                display: flex;
                background: linear-gradient(to right, #c084fc, #218bff);
                align-items: center;
                justify-content: center;
                cursor: pointer;
                box-shadow: 0px 0px 10px 0px rgba(225, 225, 225, 0.2);}

            .chat .infoBox .closeBox img {
                width: 14px;
                height: 14px;
                animation: rotate0 0.5s;
                -webkit-animation: rotate0 0.5s;}

            .chat .infoBox .closeBox:hover img {
                animation: rotate360 0.5s;
                -webkit-animation: rotate360 0.5s;}

            @keyframes rotate0 {
                from {
                    transform: rotate(180deg);}

                to {
                    transform: rotate(0deg);}
            }

            @-webkit-keyframes rotate0 {
                from {
                    transform: rotate(180deg);}

                to {
                    transform: rotate(0deg);}
            }

            @keyframes rotate360 {
                from {
                    transform: rotate(0deg);}

                to {
                    transform: rotate(180deg);}
            }

            @-webkit-keyframes rotate360 {
                from {
                    transform: rotate(0deg);}

                to {
                    transform: rotate(180deg);}
            }
}

@media screen and (max-width:1024px){
                      #app{display:none;}
			.app {
				background: #f1f1f1;
				width: 100%;
				
			}

			.minChat {
				height: 100px;
				width: 130px;
				position: fixed;
				top: 480px;
				display: block;
				left: -150px;
				background: linear-gradient(180deg, #c8d2f5 32%, rgb(255 255 255) 100%);
				border: solid 1px #c8d2f5;
				border-left: 0px;
				border-radius: 0 50px 50px 0;
				z-index: 999;
				transition: all 0.5s;
			}

			.showMinChat {
				left: -1px;
				transition: all 0.5s;
			}

			.minChat .robotBox {
				width: 75px;
				height: 75px;
				border-radius: 50%;
				background: linear-gradient(180deg, #A7C7FF 36%, rgba(133, 174, 245, 0.3) 85%);
				margin-top: 1px;
				margin-left: 24px;
			}

			.minChat .robotBox .robot {
				display: block;
				width: 100%;
				height: 100%;
			}

			.minChat .robotBox .eye {
				position: absolute;
				top: 26px;
				left: 50%;
				margin-left: -28px;
				height: 25px;
				width: 50px;
				z-index: 2;
				animation: blink 8s infinite;
			}

			.minChat .robotBox .tipsBox {
				position: absolute;
				min-width: 58px;
				margin-left: -6%;
				top: -30px;
				left: 50%;
				transform: translateX(-50%);
				z-index: 999;
				background: #fff;
				padding: 0 10px;
				line-height: 28px;
				border-radius: 6px;
				box-shadow: 0px 0px 8px 5px rgba(200, 200, 200, 0.5);
			}

			.minChat .robotBox .tipsBox::after {
				display: block;
				content: " ";
				width: 58px;
				height: 8px;
				background: url('../images/jq/jt.png') no-repeat center;
				background-size: 100% 100%;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				top: 26px
			}

			.minChat .robotBox .tipsBox span {
				display: block;
				font-size: 13px;
				white-space: nowrap;
				font-weight: bolder;
				font-family: "Alibaba PuHuiTi 2.0";
				background-clip: text;
				-ms-background-clip: text;
				-webkit-background-clip: text;
				color: transparent;
				background-image: linear-gradient(to right, #c084fc, #218bff);
			}

			@keyframes blinkLine {
				0% {
					opacity: 1;
				}

				50% {
					opacity: 0;
				}

				100% {
					opacity: 1;
				}
			}

			.minChat .robotBox .tipsBox span::after {
				content: "|";
				margin-left: 2px;
				font-weight: bolder;
				background-clip: text;
				-ms-background-clip: text;
				-webkit-background-clip: text;
				color: transparent;
				background-image: linear-gradient(to bottom, #c084fc, #218bff);
				animation: blinkLine 1s infinite;
			}

			.minChat .robotBox .name {
				font-family: "Alibaba PuHuiTi 2.0";
				font-size: 12px;
				color: #FBFCFD;
				background: linear-gradient(104deg, #A04CFF 5%, #1999FF 100%, #0F6DCE 100%);
				padding: 0 5px;
				height: 20px;
				line-height: 20px;
				text-align: center;
				border-radius:11px;
				position: absolute;
				bottom: 5px;
				left: 12%;
				font-weight: bolder;
				z-index: 999;
				overflow: hidden;
				white-space: nowrap;
			}

			@keyframes move {
				0% {
					left: -100%;
				}

				100% {
					left: 120%;
				}
			}

			.minChat .robotBox .name:before {
				content: "";
				display: block;
				width: 132px;
				height: 22px;
				background: url('../images/jq/bej.png') no-repeat;
				background-size: 100% 100%;
				position: absolute;
				top: 0;
				left: -135px;
				animation: move 1.5s infinite;
			}

			@-webkit-keyframes blink {

				0%,
				10% {
					transform: scaleY(1);
				}

				5%,
				15% {
					transform: scaleY(0.5);
				}

				30%,
				40% {
					transform: scaleY(1);
				}

				35%,
				45% {
					transform: scaleY(0.5);
				}

				60%,
				70% {
					transform: scaleY(1);
				}

				65%,
				75% {
					transform: scaleY(0.5);
				}

				85%,
				95% {
					transform: scaleY(0.5);
				}

				80%,
				100% {
					transform: scaleY(1);
				}
			}

			@keyframes blink {

				0%,
				10% {
					transform: scaleY(1);
				}

				5%,
				15% {
					transform: scaleY(0.5);
				}

				30%,
				40% {
					transform: scaleY(1);
				}

				35%,
				45% {
					transform: scaleY(0.5);
				}

				60%,
				70% {
					transform: scaleY(1);
				}

				65%,
				75% {
					transform: scaleY(0.5);
				}

				85%,
				95% {
					transform: scaleY(0.5);
				}

				80%,
				100% {
					transform: scaleY(1);
				}
			}
}

@media screen and (max-width:700px){
	.minChat {
        height: 73px;
        width: 90px;
 }
	.minChat .robotBox {
        width: 60px;
        height: 58px;
        margin-top: -1px;
        margin-left: 10px;
 }
	.minChat .robotBox .eye {
        top: 18px;
        left: 58%;
        margin-left: -34px;
        height: 21px;
        width: 46px;
        }
	.minChat .robotBox .tipsBox {
        min-width: 46px;
        margin-left: -36%;
        top: -24px;
        left: 77%;
        padding: 0 5px;
        line-height: 20px;
        }
	
	.minChat .robotBox .name {
        font-size: 8px;
        padding: 0 4px;
        height: 12px;
        line-height: 12px;
        bottom: 4px;
        left: 12.5%;
        }
	 .minChat .robotBox .tipsBox::after {
		 width: 35px;
		 left: 40%;
		 transform: translateX(-30%);
		 top: 19px;
	}
	.minChat .robotBox .tipsBox span {
      
        font-size: 8px;
	}
}