/* CSS Document */
* {
	padding: 0px;
	margin: 0px;
	border:none;
	box-sizing: border-box;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	list-style-position: outside;
}
img {max-width:100%;}

body { font-size: 15px; font-family: "Poppins-Medium";font-style: normal;color:#111827; font-weight: normal; padding: 0px; margin: 0px; text-decoration: none; line-height: 25px;}

@font-face {
	font-family: 'Poppins-Medium';
	src: local('?'), url(../font/Poppins-Medium.ttf);
}

a {
text-decoration:none;
    font-family: "Poppins-Medium";
font-style: normal;
color:#111827;
font-weight:normal;
}
a:hover { color:#4f46e5; }
.clear {clear:both;}
ul {
list-style-type: none;
}
li {
list-style-type:none;
line-height:25px;}
.fl{float:left;}
.fr{float:right;}
.hz{width:75%;margin:0 auto;}
.hza{width:75%;margin:60px auto;}
.hza:after{content: " "; display: block; height: 0; clear: both; visibility: hidden; font-size: 0; line-height: 0;}


.top-pc { z-index: 99; top:0px; left:0; width:100%;  }
.top-pc.active{background:#fff;box-shadow: 0px 0px 20px 0px rgba(4, 0, 0, 0.2);}


.nav {
	display: inline-block;
	box-sizing: border-box;
	vertical-align: bottom;
}
.mainbav ul:after {
	content: "";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
	font-size: 0;
	line-height: 0;
}
.mainbav li {
    float: left;
}

.mainbav .memu {
    float: left;

}

.mainbav .memu>a {
    line-height:80px;
    padding: 0 23px; font-size:16px;
}

.mainbav .memu>a:hover {
    color: #4f46e5 !important;
}

.mainbav .memu.active>a,
.mainbav .memu:hover>a {
    color: #4f46e5;
    display: block;
}

.mainbav ul li ul {
    position: absolute;
    display: none;
    z-index: 9999;
    width: 200px;
    background: #fff;
    padding:6px 0;border-bottom-left-radius:10px;border-bottom-right-radius:10px;box-shadow: 0px 0px 10px 0px rgba(2, 0, 0, 0.2);
}

.mainbav ul li ul li {
    float: none;
    border-right: none;
  text-align: left;
}

.mainbav ul li ul li a {
    display: block;
    padding: 5px 25px;font-size:14px;
}

.sousuo { display: inline-block;
  box-sizing: border-box;
    vertical-align: middle;
    margin: 0 15px 0 100px;
    position: relative;
    z-index: 1;
    transition: all 0.5s;
}

.sousuo .sousuo_an {
cursor: pointer;
}
.sousuo .ssk_bj {
	width: 100%;
	display: none;
	position: fixed;
	left: 0;
	top:100px;
	z-index: 10;
}
.sousuo .ssk {
	width:30%;
	overflow: hidden;
	margin: 0 auto;border-radius:25px;
	box-shadow: 0 2px 14px rgba(0,0,0,0.1);

}
.sousuo .ssk .input_txt {
	width:80%;
	height: 45px;
	float: left;
	padding: 0 3%;font-size:15px;
	border: none;

}
.sousuo .ssk .input_btn {
	width: 20%;
	float: right;
font-family: "Poppins-Medium",sans-serif;
	color: #fff;
	line-height: 45px;font-size:15px;
	border: 0 none;
	background:#4f46e5;
	cursor: pointer;
}
 input,textarea {
	outline:none;
 }

.p-show {
	display: block !important;
}


.index-yyl {
	display: inline-block;
	box-sizing: border-box;
	vertical-align: middle;
	line-height:80px;
}
.index-yyl img {
	display: inline-block;
	vertical-align: middle;
	margin-bottom: 2px;
	margin-right: 3px;
}


.new {
	width: 120px;
	position: absolute;
	z-index: 999;
	display: none;
	text-align: center;
	top:70px;background:#fff;border-radius:5px;box-shadow: 0px 0px 10px 0px rgba(4, 0, 0, 0.2);
	margin-left: -45px;
}
.new li{border-bottom:1px solid #e9e9e9;line-height: 40px;}
.new li:last-of-type { border-bottom:none;}

.sjx{display:block; width:0;
	float:right;margin-top:35px;
	border: 4px solid transparent;
	border-top: 8px solid #1f2937;}



.top_sj {
	display: none;
}


/*banner*/
.block_home_slider {
	height: auto;
	position: relative;
	line-height: 0px;
	text-align: center;}
	/*底部小图标*/
.block_home_slider .slide {
	position: relative;
	overflow: hidden;
}
.block_home_slider .flex-direction-nav a {
	width: 45px;
	height: 50px;
	display: block;
	margin-top: -20px;
	position: absolute;
	top: 50%;
	text-indent: -9000px;
}
.block_home_slider .flex-direction-nav a.flex-prev {
	left: 0;
	background: url(http://www.vopkvape.com/Data/vopkvape/template/en/images/jt1.png) no-repeat;
}
.block_home_slider .flex-direction-nav a.flex-next {
	right: 0;
	background: url(../image/jt2.png) no-repeat;
}
.block_home_slider .flex-direction-nav a.flex-prev:hover {
	left: 0;
	background: url(../image/jt1a.png) no-repeat;
}
.block_home_slider .flex-direction-nav a.flex-next:hover {
	right: 0;
	background: url(http://www.vopkvape.com/Data/vopkvape/template/en/images/jt2a.png) no-repeat;
}

.block_home_slider .flex-control-paging {
	position: absolute;
	bottom:20px;
	width:100%;
	text-align: center;
}
.block_home_slider .flex-control-paging li {
	margin: 0px;
	padding: 0 5px;
	display: inline-block;
*display:inline;
*zoom:1;
	overflow: hidden;
	list-style-type: none;
}
.block_home_slider .flex-control-paging li a{width:10px; height:10px; display:block; background:#f2f2f2; text-indent:-9000px; position:relative; overflow:hidden;cursor:pointer; border-radius:6px; transition:all 0.5s;}
.block_home_slider .flex-control-paging li a.flex-active {width:40px; background:#4f46e5;border-radius:6px;}

.flexslider {margin:0; padding:0; height:100%;}
.flex-viewport{height:100%;}
.flexslider .slides{height:100%;}
.flexslider .slides li{line-height:0px;height:100%;display: none; position:relative;}
.flexslider .slides li img{display:block;}

#home_slider2{display:none;}

.top_sj { display:none; }


.index-title{font-size:36px;line-height:36px;text-align:center;font-weight:bold;   background-image:-webkit-linear-gradient(left,#7d61e1,#7d61e1,#d64da8,yellow);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent; }


.index-product-pic{float:left;margin-left:-1%;margin-right:-1%;}
.index-product-pic li{float:left;width:48%;margin:0 1%;position:relative;overflow:hidden;display:block;border-radius:15px;}
.index-product-pic li img{ transition-duration: .8s;
-moz-transition-duration: .8s;
-webkit-transition-duration: .8s;
-o-transition-duration: .8s;}
.index-product-pic li img:hover{ transform: scale(1.1);
-moz-transform:scale(1.1);
-ms-transform: scale(1.1);
-o-transform:scale(1.1);
-webkit-transform: scale(1.1);
transition-duration: .5s;
-moz-transition-duration: .5s;
-webkit-transition-duration: .5s;
-o-transition-duration: .5s; }
.index-product-pic li:hover{box-shadow: 0px 0px 15px 0px rgba(4, 0, 0, 0.2); }

.index-product-more{margin-top:30px; overflow:hidden;display:block;transition:transform 0.5s; -webkit-transition:transform 0.5s;}
.index-product-more:hover{transform:translateY(-6px); -webkit-transform:translateY(-6px);}
.index-product-more a{color:#4f46e5;}


.index-products-bj{background-image: linear-gradient(to top, #eef2ff,#fafbff);overflow:hidden;padding:70px 0;}
.khjz_bj{width:100%;}
.khjz_dkj{position:relative;margin-top:50px;}
.khjz .item{border-radius:15px;border: 1px solid #dee4fa;margin:0 8px; position:relative;overflow:hidden;background:#fff;}
.khjz .item:hover{border: 1px solid #4f46e5;}
.khjz .item .cpzs_img{overflow:hidden;display:block;  }
.khjz .item .cpzs_img img{ transition-duration: .8s;
-moz-transition-duration: .8s;
-webkit-transition-duration: .8s;
-o-transition-duration: .8s;}
.khjz .item .cpzs_img img:hover{ transform: scale(1.1);
-moz-transform:scale(1.1);
-ms-transform: scale(1.1);
-o-transform:scale(1.1);
-webkit-transform: scale(1.1);
transition-duration: .5s;
-moz-transition-duration: .5s;
-webkit-transition-duration: .5s;
-o-transition-duration: .5s; }
.khjz .item .cpzs_wb{width:100%; height:100%; padding:22px;}
.khjz .item .cpzs_wb .cpzs_wb_t{text-align:center; font-size:18px;overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }


.cpzs_ms{margin:15px 0 30px;}


/* display none until init*/
.owl-carousel{display:none; width: 100%;-ms-touch-action:pan-y;}
.owl-carousel .owl-wrapper{display: none;position: relative;-webkit-transform: translate3d(0px, 0px, 0px);}
.owl-carousel .owl-wrapper-outer{overflow: hidden;width: 100%;}
.owl-carousel .owl-wrapper-outer.autoHeight{-webkit-transition: height 500ms ease-in-out;-moz-transition: height 500ms ease-in-out;-ms-transition: height 500ms ease-in-out;-o-transition: height 500ms ease-in-out;transition: height 500ms ease-in-out;}
.owl-carousel .owl-item{float: left;}
.owl-controls .owl-page,
.owl-controls .owl-buttons div{cursor: pointer;}
.owl-controls{-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);text-align: center;}

.owl-carousel .owl-controls {
	width: 100%;
	z-index: 11;margin-top:30px;
}
.owl-carousel .owl-controls .owl-buttons div {
display: inline-block;
	zoom: 1;
*display:inline;
	width:45px;
	height:45px;
	text-indent: -9999px;
	transition: .35s;
	bottom: -50px;
    font-size: 0;
}

.owl-carousel .owl-controls .owl-buttons .owl-prev {
	background: url(../image/jtl02.png) center no-repeat;
	overflow: hidden;margin-right:15px;

}
.owl-carousel .owl-controls .owl-buttons .owl-next {
	background: url(../image/jtr02.png) center no-repeat;
	overflow: hidden;

}
.owl-carousel .owl-controls .owl-buttons .owl-prev:hover {
	background: url(../image/jtl03.png) center no-repeat;
	overflow: hidden;
}
.owl-carousel .owl-controls .owl-buttons .owl-next:hover {
	background: url(../image/jtr03.png) center no-repeat;
	overflow: hidden;
}
.owl-carousel .owl-controls.clickable .owl-buttons div:hover {
	filter: Alpha(Opacity=100);/*IE7 fix*/
	opacity: 1;
	text-decoration: none;
}
.owl-carousel .owl-controls .owl-page {
	display: inline-block;
	zoom: 1;
*display: inline;/*IE7 life-saver*/
}

.owl-carousel .owl-controls .owl-page.active span, .owl-carouselpzs .owl-controls.clickable .owl-page:hover span {
	filter: Alpha(Opacity=100);/*IE7 fix*/

}
.owl-carousel .owl-controls .owl-page span.owl-numbers {
	height: auto;

	width: auto;
	color: #FFF;
	padding: 2px 10px;
	font-size: 12px;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
}



.index-about-bj{background:url(../image/ab.png)no-repeat center top #eef2ff;padding:138px 0;overflow:hidden;}
.index-about-hz{width:35%;margin-right:22%;float:right;}

.index-about-title{font-size:40px;line-height:40px;font-weight:bold;margin-bottom:30px; background-image:-webkit-linear-gradient(left,#7d61e1,#d64da8,yellow);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent; }
.index-about-nr{ text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical; overflow:hidden; }

.about-infou-bj{background-image: linear-gradient(to left,#d64da7,#7256d5,#4f46e5);overflow:hidden;padding:38px 0;}

.infou-ul ul {
	display: flex;
	flex-wrap: wrap;
}
.infou-ul li {
	float: left;color:#fff;
	width:25%;text-align:center;

}
.infou-ul li h3 {
 font-weight:normal;
	font-size: 0;
}
.infou-ul li h3 span:nth-child(1) {
	font-size:45px;line-height:50px;
}
.infou-ul li h3 d {
	display: inline;
    font-size:30px;line-height:35px;margin-left:5px;
   font-weight:normal;
}
.infou-ul li p {font-size:18px;}
.infou-ul li h3 span:nth-child(1){font-size:45px; line-height: 50px;font-weight: bold;}


.index-feedback-left{width:40%; float:left;    margin-top: 160px;}
.index-feedback-left-wb{font-size:28px;line-height:40px;}
.index-feedback-left-nr{margin-top:35px;}
.index-feedback-left-nr li{float:left;width:100%;margin-bottom:25px;}
.index-feedback-left-nr li img{width:50px;float:left;margin-right:12px;}
.index-feedback-left-nr li p{padding-top:14px;font-size: 20px;}
.index-feedback-left-nr li p a{color:#4f46e5;}
.index-feedback-left-nr li p a:hover{text-decoration:underline;}

.index-feedback-right{width:55%;float:right;background:#fff;box-shadow: 0px 0px 10px 0px rgba(4, 0, 0, 0.2);padding:4%;border-radius:15px;}
.about-title {
    font-size: 30px;
    margin-bottom: 40px;
}

 input,textarea {outline:none;}
.soka{ width:100%;padding-left:10px;font-size:15px; border:1px solid #dddddd;  border-radius:5px; font-family: 'Poppins-Medium',sans-serif;line-height:42px; margin-bottom: 15px; }
.sokb{  border:1px solid #dddddd; border-radius:5px; font-family: 'Poppins-Medium',sans-serif;padding:10px;margin-bottom: 15px; width: 100%;font-size:15px;}
.tj{ text-align: center;
    color: #fff;
    background: #4f46e5;
    display: block;font-family: 'Poppins-Medium',sans-serif;
    width: 150px;
    line-height: 45px;font-size:15px;
    border-radius:5px;}



/*----底部----*/
.foot{ background:#1f2937; overflow:hidden;padding-top:50px;color:#d1d5db;}
.foot-contact{ float:left;}

.foot-contact-title{ font-size: 18px;font-weight:bold; color: #818cf8; margin-bottom:25px;}

.foot-contact-nr{float:left;}
.foot-contact-nr li{line-height:32px;}
.foot-contact-nr a{color:#d1d5db;}
.foot-contact-nr a:hover{color:#fff;}

.foot-contact-fx{margin-top:30px;}
.foot-contact-fx li{float:left;margin-right:5px;}
.foot-contact-fx li img{width:35px;overflow:hidden;display:block;transition:transform 0.5s; -webkit-transition:transform 0.5s;}
.foot-contact-fx li img:hover{transform:translateY(-6px); -webkit-trafont-size: 0; line-height: 0;}


.foot-box{float:left;margin-left:12%;width:33%;}
.foot-right{float:right;width:35%;}

.foot-soka{ width:60%;padding-left:10px;font-size:15px; border:1px solid #dddddd;  border-radius:5px; font-family: 'Poppins-Medium',sans-serif;line-height:42px; margin-bottom: 15px;float:left;margin-right:10px; }
.foot-tj{ text-align: center;
    color: #fff;
    background: #4f46e5;
    display: block;font-family: 'Poppins-Medium',sans-serif;
    width:110px;
    line-height: 45px;font-size:15px;
    border-radius:5px;}


.foot-bq{color:#949ba7;}
.foot-menu{float:left;margin-right:18%;}
.foot-tb{margin-top:15px;}
.bot3{ border-top:1px solid #374151;padding:20px 0;margin-top:30px;}



.ny-banner-hz-sj{display:none;}
.ny-banner-hz{position:relative; }
.ny-banner-title{font-size:42px;color:#fff;text-transform:uppercase;position:absolute;z-index:1;top:50%;right:42%; transform:translate(42%,-50%); }
.ny-banner-sj{display:none;}
.ny-banner img{width:100%;}



.he_bredlibc{padding-top:25px;overflow:hidden;}
.he_bredlibc li{float:left;margin-right:5px;}


.about-Choose-bj{background-image: linear-gradient(to left,#d64da7,#7256d5,#4f46e5);
    padding: 80px  0;
    overflow: hidden;}

.about-Choose-title{position: relative;font-size:36px;line-height:36px;text-align:center;padding-bottom:15px;color:#fff;}

.about-Choose-title:after {
    content: "";
    position: absolute;
    background: #fff;
    width:80px; left:50%;transform:translate(-50%,0%);
    height: 2px;bottom:0;
   }

.ny-about-hz{float:left;width:40%;}
.ny-about-pic{float:right;width:50%;}
.index-From-hz{display: flex;flex-wrap: wrap;margin-top:65px;;margin-left:-1%;margin-right:-1%;}
.index-From-box{ width: 31.3%;margin-left:1%;margin-right:1%;float:left;background:#fff;color:#4e4e4e;text-align:center;padding:60px 30px;border-top-left-radius:25px;border-bottom-right-radius:25px;overflow:hidden;display:block;transition:transform 0.5s; -webkit-transition:transform 0.5s;}
.index-From-box-title{font-size:30px;color:#4f46e5;margin-bottom:40px;}
.index-From-box:hover{transform:translateY(-6px); -webkit-trafont-size: 0; }
.index-From-box-pic img{width:80px; transition:all 0.5s;}


.menu_list{padding:20px;border: 1px solid #e9eeff;border-radius:15px;box-shadow: 0px 0px 10px 0px rgba(2, 0, 0, 0.1);}
.menu_head{border-bottom:1px solid #e7e7e7;cursor:pointer;position:relative;margin:0px;background:url(../image/pro_left.png) center right no-repeat;padding-bottom:10px;margin-bottom:20px;}
.menu_list .current{background: url(../image/pro_down.png) center right no-repeat;}
.menu_list .current a{color:#4f46e5;}
.menu_body{height:auto;overflow:hidden;padding:10px;}
.menu_body a{display:block; padding-bottom:8px;font-size:14px;color:#666; }
.menu_body a:hover{color:#4f46e5;}
.menu_body ul{margin-bottom:20px;margin-left:25px;}
.menu_body li{ list-style-position:inherit;list-style-type: disc;color:#999;}
.menu_body li a{color:#666;overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.menu_body li a:hover{color:#4f46e5;}
.menu_body li:hover,.menu_body li a.on{color:#4f46e5;}

.product-left{width:19%;float:left;}
.product-right{width:78%;float:right;}

.products-nylist ul{display: flex; flex-wrap: wrap;margin-right:-1%;margin-left:-1%;}
.products-nylist li{ border:1px solid #e9eeff;border-radius:10px;float:left; width:31.3%; margin:0 1% 2% 1%; position:relative; overflow:hidden;text-align:center;}
.products-nylist_pic{ overflow:hidden;}
.products-nylist_pic img{ width:100%; transition:ease-in-out 0.25s all;}
.products-nylist li:hover .products-nylist_pic img{ transform:scale(1.1);}
.products-nylist_tit:after{ content:''; transition:ease-in-out 0.15s all; position:absolute; left:0; bottom:0; width:100%; height:100%; z-index:-1;background:#f5f7ff;}
.products-nylist li .products-nylist_tit:before{content:''; transition: ease-in-out 0.15s all;background:#4f46e5; position:absolute; left:-100%; bottom:0; width:100%; height:100%;  z-index:-2;}
.products-nylist li:hover .products-nylist_tit:after{ left:100%;}
.products-nylist li:hover .products-nylist_tit:before{ left:0;}
.products-nylist_tit{ width:100%; overflow:hidden; padding:20px;}
.products-nylist li:hover .products-nylist_tit{ color:#fff;}





/*分页*/
.yema{ width:100%; text-align:center; overflow:hidden;margin-top:40px; }
.yema.bgs2{ text-align:right;}
.yema a{ display:inline-block; height:38px; line-height:38px; padding-left:10px; overflow:hidden; padding-right:10px; min-width:40px;margin-left:3px;  text-align:center; color:#333333; font-size:16px; border:1px solid #ececee; background:#ececee;}
.yema a:hover{ text-decoration:none; color:#fff; background:#4f46e5;border:1px solid #4f46e5;}
.yema a.on{color:#fff;  background:#4f46e5;border:1px solid #4f46e5;}
.yema a.first,.yema a.last{ margin-right:0;  }
.yema a.first:hover,.yema a.last:hover{background-color:#4f46e5;}
.yema a span{ font-family: "宋体";font-size:16px;}



.product-top{width: 100%;}
.product-top .l { width:44%; float: left; }
.product-ny-title { width: 100%; font-size:24px;color:#4f46e5;}

.product-xq-sj {display:none; }
.pro-right { width:50%; float: right;}
.pro-js { width: 100%; margin:30px 0; }
.pro-js p{margin-bottom:4px;color:#666;}


.pro-more{float:left;padding:8px 30px;background:#4f46e5;border-top-left-radius:10px;border-bottom-right-radius:10px;}
.pro-more a{color:#fff;font-size:16px;}
.pro-more a:hover{ text-decoration:underline;}

.productshow-xq-bj{background-image: linear-gradient(to left,#d64da7,#7256d5,#4f46e5);overflow:hidden;padding:40px 0;}

.productshow-xq{color:#fff;font-size:24px;}
.tj-product{margin:50px 0;border-top:1px solid #e6e6e6;padding-top:50px;}


.ny-title-ms{margin-top:15px;color:#666;text-align:center;}
.contact-hz{}
.contact-left{width:40%;float:left;}
.contact-title{ font-size: 22px; color: #4f46e5;margin-bottom:30px;}
.ny-contact-nr{font-size:16px;word-wrap:break-word;}
.ny-contact-nr a{color:#333;}
.ny-contact-nr a:hover{color:#4f46e5;}

.contact-right{width:55%;float:left;}


.contact-wz{font-size:20px;}
.contact-wz li{margin-bottom:15px;position:relative; padding-left:28px;}
.contact-tb{float:left;position:absolute;z-index:1;left:0;top:12px; text-align:center; transform:translate(0%,-50%); }
.contact-tb img{width:18px;}
.contact-nr{word-wrap:break-word;}
.contact-nr a{color:#cccccc;}
.contact-nr a:hover{color:#fff;}

.map {margin-top:80px; }
.verify-nr{width:45%;margin:50px auto 35px auto;text-align:center;}
.verify-serach{width:45%;margin:0 auto;}
.verify-sok {width:70%;padding-left:15px;border:1px solid #ccc;border-right:none;height:50px;float:left;font-size:15px;}
.submit_btn {
    outline: none;
    width: 25%;
    height: 50px;
    background: #4f46e5;
    color: white;
    line-height: 50px;
    margin-top: 20px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size:18px;
    cursor: pointer;

}



   #code {
        height: 27px;
        width: 80%;
        outline: none;
        border: none;
        box-sizing: border-box;
        font-size: 16px;
        margin-top: 5px;
        color: black;
        background: none !important;
        position: absolute;
        top: 41%;
        bottom: 0;
        margin: auto;
        box-shadow: none;
        padding: 0;
        padding-left: 12px;
    }

    .submit_btn {
        outline: none;

        background: black;
        color: white;
        border: none;
        line-height: 50px;
        margin-top: 20px;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 18px;
        cursor: pointer;
        border-radius: 3px;
    }

    .fw-container {
        max-width: 580px;
        display: flex;
        margin: 0 auto 0;
        flex-direction: column;
        padding: 0 10px;
    }

    .query_btn_code {
        display: flex;
        margin-bottom: 3vw;
        flex-direction: column;
    }

    .queryBar {
        display: flex;
        width: 100%;
        margin: 0 auto;
        position: relative;
        height: 50px;
        flex-direction: column;
        border: 1px solid;
        border-radius: 3px;
        margin-bottom: 20px;
        box-sizing: border-box;
    }

    .result_content {
        min-height: 80px;
        background-color: #FAFAFA;
        width: 100%;
        margin-top: 20px;
        padding: 10px 10px 10px 10px;
        box-sizing: border-box;
        font-size: 14px;
        position: relative;
        display: flex;
    }

    #code::placeholder {
        font-size: 13px;
    }

    .tip {
        position: absolute;
        /* transform: translateY(100%); */
        transition: all 0.3s;
        height: max-content;
        padding-left: 12px;
        font-size: 15px;
        pointer-events: none;
        color: #777;
        max-height: max-content;
        bottom: 0;
        top: 0;
        margin: auto;
        line-height: initial;
        /* margin-bottom: 10px; */
    }



    .entry-title {
        text-align: center;
        font-size: 30px;
    }

    @media screen and (max-width:768px) {
        .queryBar {
            /* padding: 4px 0; */
        }
    }

    @media screen and (min-width:960px) {
        .box {
            display: flex;
        }
        .submit_btn {
            margin: 0;
            width: 30%;
            margin-left: 10px;
        }
    }

    #error-icon,
    #repeat-icon,
    #success-icon {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        display: none;
        flex-shrink: 0;
        margin-right: 15px;
    }

    #error-icon {
        background-color: red;
    }

    #repeat-icon {
        background-color: purple;
    }

    #success-icon {
        background-color: green;
    }

    h1 {
          text-align: center;
    margin: 90px 0 30px;

    }

    .loadding {
        position: relative;
        display: none;
        justify-content: center;
        width: 30px;
        height: 30px;
        animation: demo 0.8s ease-in-out infinite;
    }

    @keyframes demo {
        to {
            transform: rotateZ(360deg);
        }
    }

    .loadding span {
        width: 2px;
        height: 9px;
        transform-origin: 50% 15px;
        position: absolute;
        background-color: white;
    }

    .close-icon {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: #8A8A8A;
        position: absolute;
        right: 0;
        bottom: 0;
        margin: 5px;
        display: none;
    }

    .close-icon::before,
    .close-icon::after {
        content: '';
        position: absolute;
        width: 50%;
        height: 2px;
        background: white;
        top: 0;
        left: 0;
        right: 0;
        margin: auto;
        bottom: 0;
    }

    .close-icon::after {
        transform: rotate(45deg);
    }

    .close-icon::before {
        transform: rotate(-45deg);
    }




.sidebar-content{background:rgba(0,0,0,0.4);border-radius:25px;position: fixed; top: 60%; right: 0; z-index: 1000; margin-bottom:0;}
.sidebar-box{position: relative; margin-top: 1px;}
.sidebar-icon{width: 50px; height: 50px; cursor: pointer;}
.si1 .sidebar-icon{background: url(../image/side3.png) no-repeat center center;border-bottom-right-radius:25px;border-top-right-radius:25px;}
.si3 .sidebar-icon{background: url(../image/side4.png) no-repeat center center;border-bottom-right-radius:25px;border-top-right-radius:25px;}
.si5 .sidebar-icon{background: url(../image/side5.png) no-repeat center center;border-bottom-right-radius:25px;border-top-right-radius:25px;}
.si1:hover .sidebar-icon{background: #4f46e5 url(../image/side3.png) no-repeat center center;}
.si3:hover .sidebar-icon{background: #4f46e5 url(../image/side4.png) no-repeat center center;}
.si5:hover .sidebar-icon{background: #4f46e5 url(../image/side5.png) no-repeat center center;border-radius:25px;}
.sidebar-dark1{position: absolute; top: 0; right: 50px; padding: 0 20px; background-color: #4f46e5; display: none;border-bottom-left-radius:25px;border-top-left-radius:25px;}

.sidebar-box:hover .sidebar-dark1{display: block;}

.sidebar-dark1 p a{display: block; height: 50px; line-height: 50px; font-size: 16px; color: white; text-align: center; white-space: nowrap;}
.sidebar-top{display: block; width: 50px; height: 50px;border-radius:25px;}