/* 文档教程 */
.security_main{margin-top: 90px;}
/* 广告图 */
#security_banner {height: 300px;position: relative;background: #f4f8f7;display: flex;flex-direction: column;justify-content: center;overflow: hidden;}
#security_banner .banner_icon {position: absolute;right: 12.2395%;bottom: 0;}
#security_banner .title {font-size: 52px;margin-bottom: 25px;margin-top: 0;position: relative;z-index: 2;}
/* 防伪查询 */
#security {padding: 70px 0 120px;}
#security .title {text-align: center;}
#security .title br {display: none;}
#security .form {margin: 40px auto 0; width: 66.667%;;display: flex;justify-content: space-between;overflow: hidden;border: 1px solid #e5e5e5;position: relative;}
#security .form .btn {cursor:pointer;background: var(--main);display: flex;align-items: center;justify-content: space-between;padding: 0 30px;width: 180px;height: 60px;font-size: 18px;color: #fff;}
#security .form .btn .icon {width: 8px;height: 8px;}
#security .form .btn .icon .svg {font-size: 8px; color: #fff;stroke: #fff;}
#security .form .input {width: calc(100% - 180px);line-height: 60px; padding: 0 60px;position: relative;font-size: 18px;}
#security .form::before {content: ''; width: 60px;height: 60px;background: url(images/search2.svg) no-repeat center;position: absolute;left: 0px;top: 50%;transform: translateY(-50%);}
#security .form.error {border-color: #ff433c;}
#security .form.error .input::placeholder  {color: #ff433c;}
/* 初始状态 */
#security .initial {width: 66.667%;;margin: 80px auto 0;background: #f8f8f8;padding: 50px 7.48697% 60px;}
#security .initial .tit {font-size: 26px;text-align: center;font-weight: 500;}
#security .initial .detail {margin-top: 40px;line-height: 37px;font-size: 18px;}
#security .initial .detail span {color: var(--main);}
/* 验证成功 */
#security .statebox {width: 66.667%;;margin: 55px auto 0;}
#security .statebox .text {font-size: 22px;font-weight: 400;}
#security .statebox .text span {font-weight: 600;}
#security .statebox .state {margin-top: 55px;text-align: center;}
#security .statebox .state .icon {width: 100px;height: 100px;margin: auto;}
#security .statebox .state .text {font-size: 42px;font-weight: 500;margin-top: 30px;}
/* #security .statebox .state .tip {font-size: 18px;color: #666666;margin-top: 15px;display: flex;justify-content: center;}
#security .statebox .state .tip .item {margin-right: 25px;}
#security .statebox .state .tip .item:last-child {margin-right: 0;} */
#security .statebox .state .table {margin: 15px auto 0;width: 60%;border-collapse: collapse;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);background-color: #fff;border-radius: 8px;overflow: hidden;}
#security .statebox .state .table th, td {padding: 12px 20px;text-align: left;font-size: 16px;width: 50%;}
#security .statebox .state .table th:first-child, td:first-child {border-right: 1px solid #ccc;}
#security .statebox .state .table th {background-color: var(--main);color: white;font-weight: bold;}
#security .statebox .state .table tr {transition: all 0.3s linear;}
#security .statebox .state .table tr:nth-child(even) {background-color: #f9f9f9; }
#security .statebox .state .table tr:hover {background-color: #e2e2e2;}
#security .statebox .state .table td {border-top: 1px solid #ddd;}
#security .statebox .state .table table, th, td {border: none;}

#security .statebox .detail {background: #f8f8f8;padding: 50px 7.48697% 60px;margin-top: 55px;}
#security .statebox .detail .textarea {line-height: 37px;font-size: 18px;}
#security .statebox .detail .btn {margin: 27px auto 0;padding: 0 40px;background: #fff;display: flex;justify-content: space-between;align-items: center;width: 180px;height: 60px;font-size: 16px;}
#security .statebox .detail .btn .icon {width: 20px;height: 20px;}
#security .statebox .detail .btn .icon .svg {font-size: 20px; color: #333; fill: #333333;stroke: #333333;}
#security .statebox.success .state .text {color: var(--main);}
#security .statebox.success .detail span {color: var(--main);}
/* 多次查询 */
#security .statebox.error .detail .textarea span,
#security .statebox.error .state .text {color: #cc0000;}
#security .statebox.error .detail .btn {background: #cc0000;color: #fff;}
#security .statebox.error .detail .btn .icon .svg {color: #fff; fill: #fff;stroke: #fff;}


@media (min-width:768px) {
	#security .statebox .detail .btn:hover {background: var(--main);color: #fff;}
	#security .statebox .detail .btn:hover .icon .svg {color: #fff; fill: #fff;stroke: #fff;}
	#security .statebox.error .detail .btn:hover {opacity: 0.6;background: #cc0000;color: #fff;}
}
@media (max-width:1536px) {
	#security_banner .title {font-size: 42px;}

	#security .form,
	#security .initial,
	#security .statebox{width: 69%;}
}
@media (max-width:1440px) {
	#security_banner .title {font-size: 36px;}
}
@media (max-width:1366px) {
	#security_banner .title {font-size: 34px;}

	#security .form,
	#security .initial,
	#security .statebox{width: 75%;}
}
@media (max-width: 1280px) {
	#security_banner .title {font-size: 32px;}
	
	#security .form,
	#security .initial,
	#security .statebox{width: 80%;}
	
}
@media (max-width: 1050px) {
	#security_banner .title {font-size: 30px;text-align: center;}
	#security_banner #breadcrumb>div {justify-content: center;}
	#security_banner .form {position: relative;left: auto;top: auto;transform: translate(0);margin: 30px auto 0;}
	

	#security .form,
	#security .initial,
	#security .statebox{width: 92%;}
}
@media (max-width: 992px) {
	.security_main {margin-top: 65px;}
	#security {padding: 8vw 0;}
	#security .form,
	#security .statebox,
	#security .initial {width: 100%;}
	
	#security .initial,
	#security .statebox .detail {padding: 8vw 7vw;}
	
	#security .statebox .state{margin-top: 8vw;}
	#security .statebox .state .text {margin-top: 3vw; font-size: 0.316rem;}
	#security .statebox .state .tip{margin-top: 1.5vw;}
	#security .form{margin-top: 5vw; font-size: 0;}
	#security .form .btn,
	#security .form .input {font-size: 0.135rem;}
	  
	#security .initial {margin-top: 5vw;}
	#security .initial .tit {font-size: 0.195rem;}
	#security .statebox{margin-top: 10vw;}
	#security .statebox .detail{margin-top: 5vw;}
	#security .statebox .state .tip,
	#security .statebox .detail .textarea,
	#security .initial .detail {font-size: 0.135rem; line-height: 1.8;}
	#security .statebox .text {font-size: 0.165rem;}
	
	#security .statebox .detail .btn {margin-top: 5vw; font-size: 0.12rem;}
	
	#security .statebox .state .table {width: 80%;}
	#security .statebox .state .table th, td {font-size: 0.14rem;}
}
@media (max-width: 768px) {
	#security_banner .banner_icon {right: -12%;} 
	#security .title br {display: block;}
	#security .statebox .text {font-size: 0.22rem;}
	#security .form .btn, 
	#security .form .input {font-size: 0.18rem;}
	#security .initial .tit {font-size: 0.35rem;}
	#security .statebox .detail .textarea, 
	#security .initial .detail {font-size: 0.18rem;line-height: 1.8;}
	#security .statebox .state .tip {font-size: 0.18rem;}
	#security .statebox .detail .btn {padding: 0 35px; font-size: 0.16rem;}
	#security .statebox .detail .btn .icon {width: 25px;height: 25px;}
	#security .statebox .detail .btn .icon .svg{font-size: 25px;}
	#security .statebox .detail .btn:hover {background: #fff;color: #333;}
	#security .statebox .detail .btn:hover .icon .svg {color: #333; fill: #333;stroke: #333;}
	#security .statebox.error .detail .btn:hover {opacity: 1; background: #cc0000;color: #fff}
	#security .statebox.error .detail .btn:hover .icon .svg {color: #fff;}

	#security .statebox .state .table th, td {font-size: 0.16rem;}
}
@media (max-width: 576px) {
	#security {padding: 10vw 0;} 
	#security .form::before{width: 10vw; height: 10vw;}
	#security .form .btn {font-size: 0.26rem;padding: 0 3vw;width: 27vw; height: 10vw; justify-content: center;}
	#security .form .btn .icon {display: none;}
	#security .form .input {font-size: 0.26rem;}
	/* #security .form .btn {font-size: 0.195rem;height: 0.79rem;} */
	#security .form .input{width: calc(100% - 27vw); line-height: 10vw; padding: 0 5vw 0 10vw;}
	#security .form .btn .icon {width: 12px;height: 12px;}
	#security .statebox .state .icon{width: 28vw; height: 28vw;}
	#security .statebox .text{font-size: 0.3rem;}
	#security .initial .tit {font-size: 0.35rem; font-weight: 600;}
	
	#security .statebox .detail .textarea, 
	#security .initial .detail {font-size: 0.26rem;line-height: 1.8;}
	#security .initial .detail{margin-top: 5vw;}
	#security .statebox .state .tip {font-size: 0.26rem;}
	#security .statebox .detail .btn { min-width: 33.6vw; height: 0.79rem; font-size: 0.26rem;}
	#security .statebox .state .table {width: 100%;}
	#security .statebox .state .table th, td {font-size: 0.26rem;}
	#security .statebox .detail .btn .icon{width: auto; height: auto;}
	#security .statebox .detail .btn .icon .svg{font-size: 0.38rem; transform: scale(0.8);}
}
@media (max-width: 530px) {
	#security .statebox .detail .btn{ padding: 0 5vw; height: 0.8rem; width: max-content;}
	/* #security .statebox .detail .btn .icon .svg{font-size: 23px;} */
}
@media (max-width: 380px) {
	#security .form {display: block;border: none;}
	#security .form .input {width: 100%;font-size: 0.26rem;padding: 0 30px 0 60px;margin-top: 0px;border: 1px solid #e5e5e5;border-radius: 0.16rem;}
	#security .form .btn {width: 100%;font-size: 0.26rem;margin-top: 5vw;border-radius: 0.16rem;height: 1rem;}
	#security .form::before {height: 0.79rem; top: 13px; transform: translateY(0);}
	
	#security .statebox .detail .btn{height: 1rem;}
}