body{ width: 100%; overflow-x: hidden; font-size:16px; background-color: #fff; margin: 0; padding: 0;}
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,th,p,a,li,td,b,div,textarea,input{ font-family:"Poppins", "Open Sans", "Lucida Grande", "Lucida Sans Unicode","Arial"; font-size: inherit; margin: 0; padding: 0; line-height: 1.5;}

body{ background: #FBFAFD url(../support/img/ticket-bgimg.png) top center no-repeat; background-size: cover; padding-bottom: 120px !important; }
.valm { vertical-align: middle; }

.banner{ padding: 60px 0 40px; text-align: center; overflow: hidden;}
.refund_banner{max-width: 860px; width: 94%; margin: 0 auto; }
.banner h1{ color: #170635; font-size: 40px; font-weight: 700;}
.banner p{ color: #170635; font-size: 16px; margin-top: 20px;}

.request_main { max-width: 900px; width: 94%; margin: 0 auto; border-radius: 20px; background: #FFF; box-shadow: 0 0 7.5px 0 rgba(186, 144, 214, 0.25); box-sizing: border-box; padding: 40px; }

.items{ margin: 0px auto 20px; position: relative;}
.items span{ width: 142px; display: inline-block; color: #333; text-align: right; font-size: 14px; font-weight: 500; vertical-align: middle;}
.items_btn { margin-bottom: 0; }
.item_icon::after {
    content: "\e937";
    font-family: 'iconfont';
    display: block;
    position: absolute;
    top: 50%;
    right: 40px;
    transform: translateY(-50%);
    color: #666;
}

.item_icon:hover input {
    border:1px solid #466DFF;
}
.item_icon:hover::after { 
    color: #466DFF;
}
.item_icon:focus-within::after {
    color: #466DFF;
    transform: translateY(-50%) rotate(-180deg);
}

.items em{ position: absolute; height: 36px; display: block; top: 50%; transform: translateY(-50%); left: 170px; line-height: 38px; cursor: pointer; font-size: 14px; z-index: 2; font-style: italic; }
.items input,.items textarea{ width: 645px; height: 42px; padding: 12px 28px 12px 16px; box-sizing: border-box; margin:0 8px; border:1px solid #E5E5E5; border-radius: 5px; font-size: 14px; color: #333; background-color: #fff; position: relative; display: inline-block;}
.items input::placeholder, .items textarea::placeholder {
    font-size: 12px; color: #888;
}
.items textarea { height:150px; padding: 10px 20px; resize: none; vertical-align: middle;}
.items input:focus, .items textarea:focus{outline: none;  border:1px solid #466DFF;}
.required:after{ content: "*"; font-size:20px; color: #ff001f; vertical-align: middle;}
.items ul{width: 645px; box-sizing: border-box; max-height: 300px; margin: 0; padding:10px 0; position: absolute; top: 50px; left: 154px; list-style-type: none; border: 1px solid #CBCBCB; border-radius: 5px; background-color: #fff; box-shadow: 0 20px 20px 0 rgba(0, 0, 0, 0.05); z-index: 9; display: none; overflow: auto;}
.items ul::-webkit-scrollbar {
    width: 12px;
}

.items ul::-webkit-scrollbar-button {
    display: none;
}

.items ul::-webkit-scrollbar-thumb {
    background-color: #D9D9D9;
    border-radius: 19px;
    border: 3px solid transparent;
    background-clip: padding-box;
}

.items ul::-webkit-scrollbar-track {
    background-color: #fff;
}

.items ul li{ padding: 12px 20px; color: #333; cursor: pointer; font-size: 14px;}
.items ul li:hover,.attachments_ul p:hover{ background-color: #E9EDFF;}
.gender img{ margin-right: 10px;}
.items .gender li:hover{ background-color: #E9EDFF;}
/* .gender .active{ background:#E9EDFF url(../img/gender_active.png) 95% center no-repeat;} */

.items .errmsg{ position: absolute; left: 160px; bottom: -20px; font-size: 12px; color: #ff001f; transform: translateY(-15px); z-index: -1; opacity: 0; transition: all 0.5s ease-in-out;}
.items_err input,.items_err textarea{ border-color:#ff001f;}
.items_err .errmsg{ transform: translate(0); opacity: 1; z-index: auto;}

.haschild .item_icon { display: inline-block; }
.haschild input{ background: url("../img/arrow.png") right center no-repeat; background-size: 32px 7px;}
.productid{ display: none;}
.functionid{ display: none;}
.attachments{width: 580px; padding-left: 140px;}
.attachments>p{ font-size: 12px; margin-bottom: 20px;}
.add_attachments_main{ border: 1px dashed #ccc; cursor: pointer; position: relative;}
.add_attachments_main>p{ padding: 20px ; font-size: 14px; color: #bcbcbc; text-align: center;}
.add_attachments_main img{ margin-right: 10px; vertical-align: middle;}
.add_attachments_main input{ width: 100%; height: 60px; display: block; position: absolute; left: 0; top: 0; opacity: 0;}
.attachments_ul p{ margin: 10px 0; overflow: hidden; padding:5px 10px;}
.attachments_ul a{ margin-left:10px; font-size: 20px; color: #ff001f; text-decoration: none; float: right;}

.items_btn .btn{ width: 300px; height: 48px; display: block; margin-left: 152px; font-size: 18px; font-weight: 600; color: #fff; line-height: 48px; text-align: center; border-radius: 5px; border: 1px solid #E5E5E5; box-sizing: border-box; background: linear-gradient(108deg, #DB74FF 0.14%, #256CFF 47.725%, #DB74FF 99.86%); background-size: 200% 100%; text-decoration: none; transition: .3s;}
.items_btn .btn i{font-size: 40px; vertical-align: middle; position: relative; top: -4px;}
.items_btn .btn:hover{ background-position: right; }
.load_btn img{ display: inline-block;}
.load_btn i{ display: none;}

.success_pop { width: 100%; height: 100%; position: fixed; top: 0; z-index: 2; background-color: rgb(0, 0, 0, 0.7); display: none; }
.request_success{ max-width: 820px; width: 94%; box-sizing: border-box; padding: 75px 110px; margin: 0px auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 15px; background: #FFF; text-align: center;}
.request_success span { position: absolute; right: 20px; top: 20px; cursor: pointer; }
.request_success h2{ font-size: 24px; font-weight: 600; color: #000;}
.request_success p{ font-size: 18px; color: #000; max-width: 420px; width: 100%; margin: 20px auto; }
.request_success_main .request_success_lastp{ margin-top: 5px;}

.request_tips {
    max-width: 900px;
    width: 94%;
    margin: 75px auto 0;
    border-radius: 20px;
    box-sizing: border-box;
    padding: 10px 20px 10px 40px;
    border: 1px solid #EBD6FF;
    background: #F4EAFF;
    backdrop-filter: blur(1.5px);
    display: flex;
    gap: 10px;
    align-items: center;
}

.tips_des {
    color: #3F1966;
    font-size: 16px;
}

@media screen and (max-width:980px){
    body { padding-bottom: 60px !important; }
	.request_main{ max-width: 94%; margin: 0 auto; padding: 20px;}
	.request_main input, .request_main textarea { width: calc(100% - 20px); margin: 0 auto;}
    .request_tips { margin-top: 50px; }
	.items span{ width: auto; display: block; text-align: left; margin-bottom: 10px;}
	.items .errmsg{ left: 0;}
	.items ul{width: 80%; left: 0; top: 72px; padding: 10px 20px;}
	.items .items_gender .username{ width:calc(80% - 25px);}
    .haschild .item_icon { width: calc(100% - 20px); }
    .haschild .item_icon input { width: 100%; }
	.items em{top: 34px; left: 15px;}
	.attachments{ width: auto; margin: 0 auto; padding: 0;}
	.add_attachments{ width: 85%;}
	.items_btn { max-width: 300px; width: 80%; margin: 0 auto;}
    .items_btn .btn { margin-left: 0; width: 100%; }
	.btn{ margin: 0;}
}