/* 文档教程 */
.feedback_main{margin-top: 90px;background: #ffffff;}
/* 广告图 */
#feedback_banner {height: 300px;position: relative;background: #f4f8f7;display: flex;flex-direction: column;justify-content: center;overflow: hidden;}
#feedback_banner .banner_icon {position: absolute;right: 12.2395%;bottom: 0;}
/* #feedback_banner .title {font-size: 52px;margin-bottom: 25px;margin-top: 0;position: relative;z-index: 2;} */
/* 内容区 */
#feedback {padding: 70px 0 120px;}
#feedback .title {font-size: 42px;text-align: center;font-weight: 500;}
#feedback .content {margin-top: 50px;display: flex;justify-content: space-between;align-items: flex-start;}
#feedback .content .right {max-width: 475px;display: flex;justify-content: space-between;align-items: center;font-size: 16px;}
#feedback .content .right .word {width: 310px;padding: 25px 30px;background: #ebfbf6;position: relative;line-height: 30px;font-size: 16px;}
#feedback .content .right .word::before {content: '';width: 24px;height: 24px;background: url(images/icon1.png) no-repeat center;position: absolute;top: 42px;right: -23px;}
#feedback .content .box {width: calc(100% - 475px - 30px);;padding: 3.90625%;background: #f8f8f8;}
#feedback .content .form .li {margin-top: 20px;display: flex;justify-content: space-between;font-size: 18px;line-height: 60px;}
#feedback .content .form .li:first-child {margin-top: 0;}
#feedback .content .form .li.address {display: none;}
#feedback .content .form .li.flex {display: flex !important;}
#feedback .content .form .li .item {width: calc(100% - 100px);background: #fff;line-height: 60px;height: 60px; padding: 0 20px;font-size: 18px;}
#feedback .content .form .li .textareabox {width: calc(100% - 100px);background: #fff;padding: 20px;}
#feedback .content .form .li .item .select {width: 100%;font-size: 18px;color: #cccccc;line-height: 60px;}
#feedback .content .form .li .textarea {width: 100%; height: 260px;line-height: 1.6;font-size: 18px;}
#feedback .content .form .li .code {width: calc(100% - 100px);display: flex;}
#feedback .content .form .li .code .input {width: 200px;line-height: 60px;background: #fff;padding: 0 20px;margin-right: 20px;font-size: 18px;}
#feedback .content .form .li .code .codeimg {width: 200px;height: 60px;overflow: hidden;}
#feedback .content .form .btn {cursor:pointer;margin: 60px auto 0;width: 180px;height: 60px;border-radius: 30px;padding: 0 30px;background: var(--main);color: #fff;font-size: 18px;display: flex;justify-content: space-between;align-items: center;}
#feedback .content .form .btn .icon {width: 8px;height: 8px;}
#feedback .content .form .btn .icon .svg {font-size: 8px;color: #fff; fill: #fff;stroke: #fff;}
#feedback .content .form .li .custom-select { position: relative; width: calc(100% - 100px); height: calc(100% - 2px);background: #fff; border: 1px solid #fff; padding: 0 20px; font-size: 18px; line-height: 60px; color: #cccccc; cursor: pointer;background: url(images/sel-jt.svg) no-repeat center right 20px #fff;}
#feedback .content .form .li .custom-select.cur {color: #333;}
#feedback .content .form .li .custom-select .dropdown{ display: none; position: absolute; top: calc(100% + 15px); left: 0; width: 100%; background: #fff; border: 1px solid #ccc; border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); z-index: 5; max-height: 200px; overflow-y: auto;}
#feedback .content .form .li .custom-select.open .dropdown { display: block;}
#feedback .content .form .li .custom-select .selected-item { height: 100%; display: flex; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
#feedback .content .form .li .custom-select .dropdown label { display: flex; align-items: center; padding: 10px 20px; font-size: 16px; line-height: 30px; color: #333; cursor: pointer; transition: all 0.3s;}
#feedback .content .form .li .custom-select .dropdown label:hover {background-color: #f0f0f0;}
#feedback .content .form .li .custom-select .dropdown input {display: none;}
#feedback .content .form .li .custom-select .dropdown label.cur {color: var(--main);}

#feedback .content .success {padding: 6.25% 3.90625%;}
#feedback .content .success .icon {height: 100px;}
#feedback .content .success .icon .svg {width: 100%;height: 100%;}
#feedback .content .success .text {line-height: 30px;font-size: 20px;text-align: center;margin-top: 34px;}
#feedback .content .success .text span {color: var(--main);}
#feedback .content .success .tip {font-size: 16px;color: #999999;margin-top: 20px;text-align: center;}
#feedback .content .success .btn {width: 120px;line-height: 42px;background: #333333;color: #fff;text-align: center;margin: 55px auto 0;text-align: center;font-size: 16px;}
#feedback .content .success .btn:hover {background: var(--main);}


@media (min-width:768px) {
	#feedback .content .form .btn:hover {opacity: 0.5;}
}
@media (max-width:1536px) {
	/* #feedback_banner .title {font-size: 42px;} */

	#feedback .content .form .li .textarea{height: 220px;}
}
@media (max-width:1440px) {
	/* #feedback_banner .title {font-size: 36px;} */
}
@media (max-width:1366px) {
	/* #feedback_banner .title {font-size: 34px;} */

	#feedback .content .form .li .textarea{height: 180px;}
}
@media (max-width: 1280px) {
	/* #feedback_banner .title {font-size: 32px;} */
	#feedback .content {flex-direction: column-reverse;}
	#feedback .content .right {margin: auto;}
	#feedback .content .success,
	#feedback .content .form{width: 100%;margin-top: 30px;}
}
@media (max-width: 1050px) {
	/* #feedback_banner .title {font-size: 30px;text-align: center;} */
	#feedback_banner #breadcrumb>div {justify-content: center;}
	#feedback_banner .form {position: relative;left: auto;top: auto;transform: translate(0);margin: 30px auto 0;}

}
@media (max-width: 992px) {
	.feedback_main {margin-top: 66px;}

	#feedback{padding: 8vw 0;}
	/* #feedback_banner .title {font-size: 0.226rem;} */

	 /* {font-size: .13rem;} */
	#feedback .content{margin-top: 5vw;}
	#feedback .content .form .li .custom-select .dropdown label {font-size: .13rem;}

	#feedback .title {font-size: 0.316rem;}
	#feedback .content .right .word {font-size: 0.12rem;}
	#feedback .content .form .li .custom-select .selected-item,
	#feedback .content .form .li .textareabox,
	#feedback .content .form .li .item,
	#feedback .content .form .li .item .select,
	#feedback .content .form .li .item,
	#feedback .content .form .li .code .input,
	#feedback .content .form .li {font-size: 0.135rem;}
	#feedback .content .form .btn {font-size: 0.135rem;}

	#feedback .content .form .btn {margin-top: 6vw; height: 60px; min-width: 1.72rem; padding: 0 35px; font-size: 0.14rem;}

	#feedback .content .success .text {font-size: 0.15rem;margin-top: 3vw;}
	#feedback .content .success .tip {font-size: 0.12rem;margin-top: 2vw;}
	#feedback .content .success .btn {font-size: 0.12rem;width: 14vw;margin-top: 4vw;border-radius: 50px;}
}
@media (max-width: 768px) {
	#feedback_banner .banner_icon {right: -12%;}
	#feedback .content .form .li.flex,
	#feedback .content .form .li:not(.address) {display: block !important;}
	#feedback .content .form .li .custom-select,
	#feedback .content .form .li .textareabox,
	#feedback .content .form .li .code,
	#feedback .content .form .li .item {width: 100%;margin-top: 1.5625vh;}
	#feedback .content .form .li {line-height: 1.6;}


	#feedback .content .right .word {font-size: 0.16rem;line-height: 1.8;}
	#feedback .content .form .li .custom-select .selected-item,
	#feedback .content .form .li .textareabox,
	#feedback .content .form .li .item,
	#feedback .content .form .li .item .select,
	#feedback .content .form .li .code .input,
	#feedback .content .form .btn,
	#feedback .content .form .li .textarea,
	#feedback .content .form .li {font-size: 0.18rem;}
	#feedback .content .form .btn .icon {width: 12px;height: 12px;}
	#feedback .content .form .btn .icon .svg{font-size: 11px;}
	#feedback .content .form .btn {margin: 5vw auto 0; padding: 0 4.5vw; min-width: 2rem;max-width: 100%; font-size: 0.18rem; justify-content: space-between;}

	#feedback .content .form .li {font-size: .18rem;}
	#feedback .content .form .li .custom-select .dropdown label,
	#feedback .content .form .li .dropdown label {font-size: .18rem;}

	#feedback .content .success .icon {height: 14vw;}
	#feedback .content .success .text {font-size: 0.2rem;line-height: 1.6;}
	#feedback .content .success .btn,
	#feedback .content .success .tip {font-size: 0.16rem;}

}
@media (max-width: 576px) {
	#feedback{padding: 10vw 0;}
	#feedback .ind_tit{font-size: 0.4rem;}
	#feedback .content .form .li .selected-item {transform: translateY(1px);}
	#feedback .content .form .li {font-size: .28rem;}
	#feedback .content .form .li .dropdown label {font-size: .26rem;}

	#feedback .content .form {padding: 5vw 7vw;}
	#feedback .content .right .word {font-size: 0.26rem;line-height: 1.8;}
	#feedback .content .form .li .textareabox,
	#feedback .content .form .li .item,
	#feedback .content .form .li .item .select,
	#feedback .content .form .li .code .input,
	#feedback .content .form .btn,
	#feedback .content .form .li .textarea,
	#feedback .content .form .li ,
	#feedback .content .form .li .custom-select .selected-item,
	#feedback .content .form .li .custom-select .dropdown label, #feedback .content .form .li .dropdown label{font-size: 0.26rem;}
	#feedback .content .form .li .custom-select .dropdown label{padding: 0.15rem 0.3rem; line-height: 1.8em;}

	#feedback .content .form .li {line-height: 2;}
	#feedback .content .form .li {margin-top: 3vw;}
	#feedback .content .form .li .custom-select,
	#feedback .content .form .li .item {line-height: 0.79rem;height: 0.79rem;margin-top: 5px;}
	#feedback .content .form .li .code .input,
	#feedback .content .form .li .code .codeimg {height: 0.79rem;line-height: 0.79rem;}
	#feedback .content .form .li .code,
	#feedback .content .form .li .textareabox {margin-top: 5px;}
	#feedback .content .form .li .textarea{height: 25vw;}

	#feedback .content .form .btn{min-width: 2.5rem; height: 0.79rem; padding: 0 6.5vw;}
	#feedback .content .form .btn .icon {width: auto;height: auto; transform: translateY(1px);}
	#feedback .content .form .btn .icon .svg{font-size: 0.18rem; transform: scale(0.8);}

	#feedback .content .form .li .code{justify-content: space-between;}
	#feedback .content .form .li .code .input{width: 55%; margin-right: 0;}
	#feedback .content .form .li .code .codeimg{width: 40%;}

	#feedback .content .success .text {font-size: 0.3rem;}
	#feedback .content .success .tip {font-size: 0.26rem;}
	#feedback .content .success .btn {font-size: 0.26rem;line-height: 0.79rem;border-radius: 30px;width: 25vw;}
}
@media (max-width: 520px) {
	#feedback .content .right .word::before,
	#feedback .content .right img {display: none;}
	#feedback .content .right .word {width: 100%;}
}
@media (max-width: 380px) {
	#feedback .content .right {width: 100%;}
	#feedback .content .right .word{width: 100%; padding: 5vw 8vw;}

	#feedback .content .form .li .custom-select .dropdown label,
	#feedback .content .form .li .custom-select .selected-item,
	#feedback .content .form .li .textareabox,
	#feedback .content .form .li .item,
	#feedback .content .form .li .item .select,
	#feedback .content .form .li .code .input,
	#feedback .content .form .btn,
	#feedback .content .form .li {font-size: 0.271rem;}
	#feedback .content .form .li .item {line-height: 1rem;height: 1rem;}
	#feedback .content .form .li .item,
	#feedback .content .form .li .custom-select{padding: 0 4vw;}
	#feedback .content .form .li .custom-select .dropdown label{padding: 1.5vw 5vw; line-height: 1.8;}
	#feedback .content .form .li .textareabox{padding: 10px 5vw;}
	#feedback .content .form .btn{width: max-content;min-width: 41vw;}
	#feedback .content .form .btn .icon{width: 10px;}
}