html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
body{background:#f6f6f6; font-family:'Microsoft Yahei'; font-size:16px; line-height:20px;}
.layout{position:relative; width:1200px; margin:0 auto;}
.show{display:block !important;}
.hide{display:none;}
.button-gradient{background:linear-gradient(to bottom, #039aff, #24b3ff); color:#fff; font-size:20px; display:inline-block; line-height:45px; border-radius:8px; outline:none; border:none; padding:0px 50px; cursor:pointer; border:2px solid #039aff; transition:all 0.3s;}
.button-gradient:hover{opacity:0.8;}

.header{width:100%; height:103px; background:#fff; box-shadow:0 5px 5px #efefef;}
.header .layout{display:flex; align-items:center; justify-content:space-between; height:100%;}
.header .logo{width:33%;}
.header .logo img{width:auto; max-width:90%;}
.header .title{display:flex; align-items:center; width:33%; height:64px; line-height:30px; text-align:center; font-size:30px;}
.header .title:before, .header .title:after{content:''; width:35px; height:100%; margin:0 12px; background:url(/images/selfservice/title_left.png) no-repeat center; background-size:cover;}
.header .title:after{transform:rotateY(180deg);}
.header .progress{width:253px; height:60px; padding:0 20px 0 71px; display:flex; align-items:center; box-sizing:border-box; line-height:20px; background:url(/images/selfservice/btn_search.png) no-repeat center; background-size:contain; color:#fff; font-size:24px; cursor:pointer; text-align:center;}

.service-main{display:none; padding:50px 0;}
.service-menu{display:flex; flex-wrap:wrap; align-items:center;}
.service-menu li{width:220px; height:220px; margin:0 25px 25px 0; padding:35px 5px 0; text-align:center; color:#393c41; font-size:20px; box-sizing:border-box; cursor:pointer; background-repeat:no-repeat; background-size:contain; background-position:center;}
.service-menu li:nth-of-type(5n){margin-right:0;}
.service-menu li[data-menu="unfreeze-account"]{background-image:url(/images/selfservice/icon_unfreeze_account.png);}
.service-menu li[data-menu="login-password"]{background-image:url(/images/selfservice/icon_login_password.png);}
.service-menu li[data-menu="withdrawal-password"]{background-image:url(/images/selfservice/icon_withdrawal_password.png);}
.service-menu li[data-menu="search-order"]{background-image:url(/images/selfservice/icon_search_order.png);}
.service-menu li[data-menu="forgot-password"]{background-image:url(/images/selfservice/icon_forgot_password.png);}
.service-menu li[data-menu="edit-bank"]{background-image:url(/images/selfservice/icon_edit_bank.png);}
.service-menu li[data-menu="edit-card"]{background-image:url(/images/selfservice/icon_edit_card.png);}
.service-menu li[data-menu="complain-feedback"]{background-image:url(/images/selfservice/icon_complain_feedback.png);}
.service-menu li[data-menu="apply-promo"]{background-image:url(/images/selfservice/icon_apply_promo.png);}
.service-menu li[data-menu="customer-support"]{background-image:url(/images/selfservice/icon_customer_support.png);}

.service-content{display:none; padding:15px 0 40px;}
.service-content .service-nav{position:relative; margin-bottom:10px; text-align:center; line-height:45px;}
.service-content .service-nav .title{font-size:24px;}

.service-content .service-wrap{display:none; background:#fff; padding:40px; border-radius:4px;}
.service-content .service-wrap .form-wrap{width:100%; max-width:500px; margin:0 auto; padding:0 15px; text-align:center; box-sizing:border-box;}
.service-content .service-wrap .form-wrap .input-wrap{display:flex; align-items:center; margin-bottom:15px;}
.service-content .service-wrap .form-wrap .input-wrap > span{width:170px; text-align:right; margin-right:15px; line-height:18px;}
.service-content .service-wrap .form-wrap .input-wrap input, .service-content .service-wrap .form-wrap .input-wrap select{width:100%; height:40px; line-height:41px; background-color:#f5faff; border:1px solid #cfdbe9; padding:0 5px 0 10px; border-radius:5px; outline:0; font-size:inherit;}
.service-content .service-wrap .form-wrap .input-wrap input::placeholder{color:#ccc;}
.service-content .service-wrap .form-wrap .button-gradient{margin:15px 10px 0;}
.service-content .service-wrap .form-wrap .btn-back{background:none; color:#039aff;}
.service-content .service-wrap .desc-text{margin-top:30px; text-align:center; font-size:14px; line-height:20px;}

.table-result{width:100%;}
.table-result td{color:#333; padding:10px; text-align:center; border:solid 1px #666; background-color:#fff; font-size:14px; vertical-align:middle;}
.result-panel{text-align:center;}
.result-panel .btn-back{margin-top:30px;}

body:not(.lang-cn){font-size:14px;}
body:not(.lang-cn) .button-gradient{font-size:16px;}
body:not(.lang-cn) .header .title{font-size:24px;}
body:not(.lang-cn) .header .progress{font-size:16px;}
body:not(.lang-cn) .service-menu li{font-size:17px;}

@media screen and (max-width:1200px) {
	.layout{width:100%; padding:0 15px; box-sizing:border-box;}
	
	.service-main{padding:20px 0;}
	.service-menu{width:960px; margin:0 auto;}
	.service-menu li{margin:10px;}
	.service-menu li:nth-of-type(5n){margin:10px;}
	
}

@media screen and (max-width:1000px) {
	.service-menu{width:100%; justify-content:center;}
}

@media screen and (max-width:800px) {
	.header{height:75px;}
	.header .title{margin:0 12px; font-size:20px; line-height:22px;}
	.header .title:before, .header .title:after{background-size:contain; margin:0;}
	.header .progress{width:150px; height:40px; padding:0 10px 0 40px; font-size:15px;}
	
	.service-menu li{width:175px; height:175px; font-size:16px;}
	.service-content .service-nav .title{font-size:18px;}
	
	.button-gradient{font-size:16px; line-height:38px;}
	
	body:not(.lang-cn) .header .title{font-size:16px;}
	body:not(.lang-cn) .header .progress{font-size:12px; line-height:14px;}
	body:not(.lang-cn) .service-menu li{font-size:14px; padding-top:22px;}
}

@media screen and (max-width:630px) {
	body{font-size:14px;}
	.service-menu li{width:145px; height:145px;}
	.service-content .service-wrap{padding:25px 10px;}
	.service-content .service-wrap .form-wrap{margin:0; padding:0;}
	.service-content .service-wrap .form-wrap .input-wrap > span{width:130px;}
}

@media screen and (max-width:530px) {
	.layout{padding:0 8px;}
	.header{height:60px;}
	.header .title{margin:0 5px; line-height:20px; font-size:15px; text-align:center;}
	.header .title:before, .header .title:after{width:20px;}
	.header .progress{width:115px; min-width:115px; height:28px; padding:0 6px 0 30px; font-size:12px; line-height:14px;}
	
	.lang-cn .header .title{white-space:nowrap;}
}

@media screen and (max-width:450px) {
	.service-content .service-wrap .form-wrap .input-wrap{display:block;}
	.service-content .service-wrap .form-wrap .input-wrap > span{display:block; width:auto; margin-bottom:5px; text-align:left;}
}