@charset "utf-8";
/* CSS Document */
.suppBox { padding-top: 2.7em;}
.suppBox .tip { text-align: left; flex: 1;}
.suppBox .con {display: flex; justify-content: space-between; align-items: flex-start;}
.suppBox .conL { width: 80%;}
.suppBox .conR { width: 16.6%; position: relative; z-index: 0;}
#faq { position: absolute; top: -10.6em;}
.suppBox .suppList {margin-top: 1.5em; padding-bottom: 2em; border-bottom: 1px solid #DEDEDE;}
.suppBox .suppList ul { display: flex; justify-content: flex-start; align-items: stretch;}
.suppBox .suppList li { width: 32.19%; flex: 1; margin-right: 1.3%; background-color: #fff;
display: flex; flex-direction: column;
 justify-content: space-between; align-items: center;}
.suppBox .suppList li:nth-child(3n) {
	/* width: 32.5%; */
	width: 400px; flex: initial;
 margin-right: 0;  align-items: stretch;}
.suppBox .suppList li .lib {padding: 6% 6% 24px 6% ; flex: 1;
display: flex; justify-content: space-between; align-items: center; flex-direction: column;}
.suppBox .suppList .pic { width: 5.6em; height: 5.6em; margin: 0 auto;
 background-color: #ce0000;
-moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%;
display: flex; justify-content: center; align-items: center;}
.suppBox .suppList .pic img { display: block; width: 2.375em; height: 2.375em;
object-fit: contain;}
.suppBox .suppList .name { margin-top: 1em; font-weight: bold;}
.suppBox .suppList .name2 { padding: 0.5em 0 0.8em; font-weight: bold; text-align: left; border-bottom: 1px solid #DEDEDE;}
.suppBox .suppList .moreBtnBlack { margin-top:1em;}
.suppBox .suppList .cont {flex: 1; text-align: left; padding:6% 6% 24px 6%;
display: flex; flex-direction: column; justify-content: space-between; 
align-items: flex-start;}
.suppBox .suppList .intro { margin-top: 1.1em; line-height: 1.9em;}
.suppBox .suppList li:nth-child(3n) .moreBtnBlack { margin-top: 1.5em;}
@media only screen and (max-width: 1420px) {
.suppBox .suppList li {flex: 1;}
.suppBox .suppList li:nth-child(3n) { flex: 1.2;}
}

@media only screen and (max-width: 1160px) {
.suppBox .con { display: block;}
.suppBox .conL { width: auto;}
.suppBox .conR { margin-top:3em; width: auto;}
.suppBox .suppList ul { display: flex; flex-wrap: wrap;}
.suppBox .suppList li { width:49%; margin-right: 2%; flex: initial;}
.suppBox .suppList li:nth-child(2) { margin-right: 0; flex: initial;}
.suppBox .suppList li:nth-child(3) { margin-top: 2%; width: 100%; flex: initial;}
.suppBox .suppList .cont { padding: 6%;}
.suppBox .suppList li .lib {padding: 6%; }
}

@media only screen and (max-width: 828px) {
.suppBox .suppList li { margin-top: 2%; width:100%; margin-right: 0;}
.suppBox .suppList .name2 { text-align: center;}
.suppBox .suppList .cont {  padding: 6% 2%; display: block; text-align: center;}
.suppBox .suppList li .lib { padding: 6% 2%;/* flex-direction: row; */ align-items: center;}
.suppBox .suppList .moreBtnBlack { font-size: 12px; padding: 0.1em 0.6em 0 0.9em;}
.suppBox .suppList .moreBtnBlack span { margin-left: 0.1em;}
}

@media only screen and (max-width: 370px) {
	.suppBox .suppList .pic { width: 4em; height: 4em;}
	.suppBox .suppList .moreBtnBlack {  padding: 0.1em 0.4em 0 0.7em;}
}

.messBox { margin-top: 1.8em; background-color: #fff; padding:1% 3.9% 3.9%;
display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start;
text-align: left;}
.messBox .title {padding: 2.7% 0 0; width: 100%; font-weight: bold;}
.messBox .title::after { height: 3px; background-color: #ce0000; width: 2em; content: "";
display: block; margin:0.2em auto 0 0;}
.messBox .tip {width: 100%; padding:1em 0 0.5em;}
.messBox .form-code {width: 100%;}
.messBox form { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start;}
.messBox dl { width: 100%;}
.messBox dl.dl2 { width: 46.6%;}
.messBox dt { padding: 1.2em 0 0.7em;}
.messBox dt span { color: #ff0000;}
.messBox dt .t1 { color:#7B8187}
.messBox dt .t2 { color: #9FA5AB;}
.messBox .iw { padding: 0 1em; border: 1px solid #eaeaea;}
.messBox .tw { padding: 1.3em 1em 0.8em; border: 1px solid #eaeaea;}
.messBox .input { line-height: 4.2em; height: 4.2em; width: 100%; outline-width: 0; border: 0; margin: 0;}
.messBox .textarea { display: block; line-height: 1.2em; height: 6.6em; width: 100%; outline-width: 0; border: 0; margin: 0;}
.messBox .btnw { margin-top: 1.5em;}
.messBox .btnSubmit { margin-right: 0.8em; cursor: pointer; width: 13.5em; text-align: center; line-height: 3.5em; 
display: inline-block; background-color: #ce0000; color: #fff;
border: 1px solid #ce0000; border: 0;}
.messBox .btnCancel {  cursor: pointer; width: 13.5em; text-align: center; line-height: 3.5em; 
 display: inline-block;  background-color: #f1f1f1; color: #7B8187;
border: 1px solid #E8E8E8;border: 0;}

.filez { margin-top: 0.3em; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center;}
.filez .btnUpload { cursor: pointer; width: 9.5em; height: 3.1em; overflow: hidden;
border: 1px solid #f2f3f5; line-height: 3.1em; text-align: left; text-indent: 3.7em;
background: url(https://www.gboslaser.com/wp-content/themes/haozhuti-gbos/assets/images/upload.png) no-repeat 1.6em center / 1.4em auto; color: #8b9196;}
.filez .btnUpload input { opacity: 0;}
.filez .files { display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
.filez .file { margin-left: 1em; width: 11em; display: flex; justify-content: flex-start; align-items: center;color: #8b9196;}
.filez .file .icon { width: 2em; height: 2em; margin-right: 0.5em;
background: url(https://www.gboslaser.com/wp-content/themes/haozhuti-gbos/assets/images/file.png) no-repeat center center / contain;}
.filez .file .name {display: block; line-height: 1.2; width: 8em; height: 1.2em; overflow: hidden;}
.filez .file .size { display: block;line-height: 1.2; width: 8em; height: 1.2em; overflow: hidden;}
.filez .file .close { width: 0.8em; height: 0.8em; cursor: pointer;
 background: url(https://www.gboslaser.com/wp-content/themes/haozhuti-gbos/assets/images/close_3.png) no-repeat center center / contain;}

.faqSBox { text-align: left;}
.faqSBox .title { font-weight: bold; padding: 0.1em 0.7em 0; line-height: 2.2em; color: #fff; background-color: #ce0000;}
.faqSCBox { border-bottom: 1px solid #e5e5e5; margin-bottom: 0.5em; padding: 1.2em 0 0.2em;}
.faqSCBox .title2 {font-weight: bold; padding: 0 1em 0 1.7em; color: #434547;
background: url(https://www.gboslaser.com/wp-content/themes/haozhuti-gbos/assets/images/qu.png) no-repeat 0 0.2em / 1em auto; line-height: 1.5em;}
.faqSCBox .list { margin-top: 0.8em;}
.faqSCBox .list li { padding: 0.5em 0 0.4em 1.2em;
overflow:hidden;text-overflow:ellipsis; white-space:nowrap; *white-space:nowrap;
background: url(https://www.gboslaser.com/wp-content/themes/haozhuti-gbos/assets/images/dot_gray.png) no-repeat 0 0.8em / 0.7em auto;
}
.faqSCBox .list a {color: #3A3838;}
.faqSCBox .list a:hover { color: #ce0000;}

@media only screen and (max-width: 828px) {

.messBox dl.dl2 { width: 100%;}
.messBox .btnw { width: 100%;}
.messBox .btnSubmit { width: 40%;}
.messBox .btnCancel { width: 40%;}
}

.pServiceBox { position: relative; z-index: 0; padding: 3.8em 0 7.3em;
 background: #eaeaed url(https://www.gboslaser.com/wp-content/themes/haozhuti-gbos/assets/images/pservice_bg.jpg) no-repeat center center / cover;
color: #505050;}
#pservice { position: absolute; top: -10.6em;}
.pServiceBox .title { position: relative; z-index: 1;}
.pServiceBox .title .name { line-height: 1.9; padding: 0.1em 0.8em 0; display: inline-block; color: #fff; background-color: #ce0000;}
.pServiceBox .list { margin-top: 4.6em; position: relative; z-index: 0;}
.pServiceBox .list::before { height: 6em;
 position: absolute; left: 2.8%; right: 2.8%; margin: 0 3.75em;
 top: -6em;
 content: ""; display: block; width: auto; border: 1px solid #ce0000; border-bottom: 0;}
.pServiceBox .list ul {  display: flex; justify-content:space-around; align-items: stretch;
flex-wrap: wrap;}
.pServiceBox .list li { position: relative; z-index: 0; padding: 0 0 2.2em; width: 14.2%; }

.pServiceBox .list li::after { content: ""; display: block; position: absolute;
top: 3.2em; right: -0.6em; width: 1.25em; height: 1.25em;
background: url(https://www.gboslaser.com/wp-content/themes/haozhuti-gbos/assets/images/arr_7_red.svg) no-repeat center center / contain;}
.pServiceBox .list li:last-child::after { display: none;}
.pServiceBox .list .pic { margin: 0 auto; width: 7.5em; height: 7.5em;
border: 1px solid #ce0000;
-moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%;
 display: flex; justify-content: center; align-items: center;}
.pServiceBox .list .pic img { width: 41%; height: 41%; display: block; object-fit: contain;}
.pServiceBox .list .name {  max-width: 10em; margin: 1em auto 0;}

@media only screen and (max-width: 1300px) {
	.pServiceBox .list::before { left: 10.5%; right: 10.5%; }
	.pServiceBox .list li { width: 33.3%;}
	.pServiceBox .list li:nth-child(3n)::after {display: none;}
	
}
@media only screen and (max-width: 828px) {
	.pServiceBox .list::before { left:7%; right:7%; }
}
@media only screen and (max-width: 540px) {
	.pServiceBox .list::before { display: none; left:12%; right:12%; }
	.pServiceBox .list li { width: 50%;}
	
	.pServiceBox .list li:nth-child(3n)::after {display: block;}
	.pServiceBox .list li:nth-child(2n)::after {display: none;}
}

.aServiceBox { position: relative; z-index: 0; padding: 4.1em 0 4.6em;
 background: #2d3035 url(https://www.gboslaser.com/wp-content/themes/haozhuti-gbos/assets/images/aservice_bg.jpg) no-repeat center center / cover;
color: #fff;}
#aservice { position: absolute; top: -10.6em;}
.aServiceBox .list { margin-top: 1.6em;}
.aServiceBox .list ul { margin-top: -1.3%; display: flex; justify-content: flex-start; align-items: stretch;
flex-wrap: wrap;}
.aServiceBox .list li { padding: 1.5em 0 2.2em; width: 18.8%; margin-top: 1.3%; margin-right: 1.4%; background-color: rgba(255,255,255,0.14);}
.aServiceBox .list li:nth-child(5n) { margin-right: 0;}
.aServiceBox .list .pic {}
.aServiceBox .list .pic img { width: 3em; height: 3em; object-fit: contain;}
.aServiceBox .list .num { font-weight: bold; margin-top: 0.2em;}
.aServiceBox .list .name { padding: 0 0.5em; line-height: 1.1; max-width: 10em; margin: 0.2em auto 0;
word-break: break-word;}
@media only screen and (max-width: 828px) {
.aServiceBox .list li { width: 49.3%;}
.aServiceBox .list li:nth-child(5n) {  margin-right: 1.4%; }
.aServiceBox .list li:nth-child(2n) { margin-right: 0;}
}