/* main layout */
#pbanner {  background: url(../img/beltone-banner.jpg)  no-repeat center top;
text-align: center;}
#amaze {padding: 0 10px;}
#boost {padding: 0 10px;}
#trust {padding: 0 10px;}
#ally {padding: 0 10px;}
#infor { background: rgba(0,0,0,0.1);}


/* banner */
.pbanner {padding: 210px 50px 120px 80px;}
.pbanner h2 {font-size: 50px; line-height: 70px; color: #fff;
}
.pbanner p {font-size: 28px; padding:10px 0; color: #fff;}
.pbanner em {font-size: 24px; color: #eff187; display: block;
}
.pbanner .animate__fadeIn {animation-delay: 0.8s;}
.pbanner .animate__bounce {animation-delay: 1s;}
.pbannerem1 {}
.pbannerem2 {}
.pbannerem3 {}

/* amaze */
.amaze {padding: 80px 0 40px 0;}
.amaze .title {font-size: 36px; background: #5461fd; color: #fff; padding: 10px 0 0 20px; border-radius: 10px;}
.amaze .amazebox1 {overflow: hidden; padding: 40px 0 0 0;}
.amaze .amazebox1 .amaze1img {float:left; width: 36%; padding: 0 6%;}
.amaze .amazebox1 .amaze1img img {width: 100%;}
.amaze .amazebox1 .amaze1text {float: left; width: 48%; padding-left: 4%;}
.amaze .amazebox1 .amaze1text h4 {font-size: 30px; padding-top: 30px;}
.amaze .amazebox1 .amaze1text p {font-size: 24px; color: #5d5d5d;}
.amaze .amazebox2 {overflow: hidden; padding: 0 0 40 0;}
.amaze .amazebox2 .amaze2text {float:left; width: 53%; padding-left: 2%;}
.amaze .amazebox2 .amaze2text h3 {font-size: 30px; padding-top:50px; padding-bottom: 30px;}
.amaze .amazebox2 .amaze2text h4 {font-size: 24px; color: #5d5d5d; padding-bottom: 20px;}
.amaze .amazebox2 .amaze2text p {font-size: 20px; color: blue;}
.amaze .amazebox2 .amaze2text em {font-size: 20px; color: coral; padding-top: 10px;}
.amaze .amazebox2 .amaze2img {float:left; width: 41%; padding: 2% 2% 0 2%;}
.amaze .amazebox2 .amaze2img img {width: 90%;}
.amaze .amazesp {padding: 20px; 20px;}
.amaze .amazesp h4 {text-align: right; font-size: 18px; color: #5d5d5d;}
.amaze .amazesp p {text-align: right; font-size: 16px; margin: 1px; color: #5d5d5d;}

/* boost */
.boost {padding: 40px 0;}
.boost .title {font-size: 36px; background: #5461fd; color: #fff; padding: 10px 0 0 20px;  border-radius: 10px;}
.boost .boostbox {overflow: hidden; padding: 40px 0 0 0;}
.boost .boostbox .boostimg {float:left; width: 36%; padding: 0 4%;}
.boost .boostbox .boostimg img {width: 100%;}
.boost .boostbox .boosttext {float: left; width: 50%; padding-left: 6%;}
.boost .boostbox .boosttext h3 { font-size: 30px; padding-top: 30px;}
.boost .boostbox .boosttext h4 {font-size: 24px; color: #5d5d5d; padding-top: 30px;}
.boost .boostbox .boosttext p {font-size: 20px; color: blue; padding-top: 15px;}
.boost .boostbox .boosttext em {font-size: 20px; color: coral; padding-top: 10px;}
.boost .boostsp {padding: 20px; 20px;}
.boost .boostsp h4 {text-align: right; font-size: 18px; color: #5d5d5d;}
.boost .boostsp p {text-align: right; font-size: 16px; margin: 1px; color: #5d5d5d;}

/* trust */
.trust {padding: 40px 0;}
.trust .title {font-size: 36px; background: #5461fd; color: #fff; padding: 10px 0 0 20px;  border-radius: 10px;}
.trust .trustbox {overflow: hidden; padding: 40px 0 0 0;}
.trust .trustbox .trustimg {float:left; width: 36%; padding: 0 4%; padding-top: 15px;}
.trust .trustbox .trustimg img {width: 100%;}
.trust .trustbox .trusttext {float: left; width: 50%; padding-left: 6%;}
.trust .trustbox .trusttext h3 { font-size: 30px; padding-top: 30px;}
.trust .trustbox .trusttext h4 {font-size: 24px; color: #5d5d5d; padding-top: 30px;}
.trust .trustbox .trusttext p {font-size: 20px; color: blue; padding-top: 15px;}
.trust .trustbox .trusttext em {font-size: 20px; color: coral; padding-top: 10px;}
.trust .trustsp {padding: 20px; 20px;}
.trust .trustsp h4 {text-align: right; font-size: 18px; color: #5d5d5d;}
.trust .trustsp p {text-align: right; font-size: 16px; margin: 1px; color: #5d5d5d;}

/* ally */
.ally {padding: 40px 0;}
.ally .title {font-size: 36px; background: #5461fd; color: #fff; padding: 10px 0 0 20px;  border-radius: 10px;}
.ally .allybox {overflow: hidden; padding: 40px 0 0 0;}
.ally .allybox .allyimg {float:left; width: 36%; padding: 0 4%; padding-top: 15px;}
.ally .allybox .allyimg img {width: 100%;}
.ally .allybox .allytext {float: left; width: 50%; padding-left: 6%;}
.ally .allybox .allytext h3 { font-size: 30px; padding-top: 30px;}
.ally .allybox .allytext h4 {font-size: 24px; color: #5d5d5d; padding-top: 30px;}
.ally .allybox .allytext p {font-size: 20px; color: blue; padding-top: 15px;}
.ally .allybox .allytext em {font-size: 20px; color: coral; padding-top: 10px;}
.ally .allysp {padding: 20px; 20px;}
.ally .allysp h4 {text-align: right; font-size: 18px; color: #5d5d5d;}
.ally .allysp p {text-align: right; font-size: 16px; margin: 1px; color: #5d5d5d;}



/* infor */
.infor {padding:70px 0; text-align: center;}
.infor .infor-box {overflow: hidden; text-align: left; padding: 3px 79px 0 150px;}
.infor .infor-box h4 {font-size: 20px; color: #333;padding-bottom: 5px;}
.infor .infor-box h4 i {color: #0081c8;}
.infor .infor-box .in-left {float: left; width: 45%; border-right: 1px solid #ccc; box-sizing: border-box;}
.infor .infor-box .in-left em {font-size: 24px; color: #333; width: 105px; display: inline-block;}
.infor .infor-box .in-left strong {font-size: 30px; color: #0081c8;}
.infor .infor-box .in-right {float: left; width: 55%; padding-left: 80px; box-sizing: border-box;}
.infor .infor-box .in-right li {font-size: 18px; color: #666; padding-top: 10px;}
.infor .infor-box .in-right li br {display: none;}

/* mediaquery */
@media (max-width: 1200px){
    .infor .infor-box {padding: 3px 20px 0 20px;  text-align: center;}
    .infor .infor-box .in-left  {width: 100%; padding-bottom: 5%; border-right: 0;}
    .infor .infor-box .in-right  {width: 100%; padding-left: 0;}
}

@media (max-width: 1024px){
    
}

@media (max-width: 900px){
    
}

@media (max-width: 768px){
    
}

@media (max-width: 600px){
    .pbanner {padding: 160px 25px 80px 25px;}
    .pbanner h2 {font-size: 34px; line-height:40px;}
    .pbanner p {font-size: 24px; padding:5px 0;}
    .pbanner em {font-size: 22px;}
    
    /* amaze */
    .amaze {padding: 40px 0 20px 0;}
    .amaze .title {font-size: 21px; padding: 8px 0 0 5px;}
    .amaze .amazebox1 {padding-bottom: 10px; border-bottom: 2px solid #e6e6e6;}
    .amaze .amazebox1 .amaze1img {float: none; width: 60%; padding: 0 20%;}
    .amaze .amazebox1 .amaze1text {float: none; width: 94%; padding: 0 3%;}
    .amaze .amazebox1 .amaze1text h4 {font-size: 20px; padding-top: 0px;}
    .amaze .amazebox1 .amaze1text p {font-size: 16px;}
    .amaze .amazebox2 {padding: 10px 0 0 0;}
    .amaze .amazebox2 .amaze2text {float: none; width: 94%; padding: 3%;}
    .amaze .amazebox2 .amaze2text h3 {font-size: 20px; padding-top:0; padding-bottom: 15px;}
    .amaze .amazebox2 .amaze2text h4 {font-size: 18px; color: #5d5d5d; padding-bottom: 15px;}
    .amaze .amazebox2 .amaze2text p {font-size: 16px;}
    .amaze .amazebox2 .amaze2text em {font-size: 16px; padding-top: 10px;}
    .amaze .amazebox2 .amaze2img {display: none;}
    .amaze .amazesp {padding: 15px; 10px;}
    .amaze .amazesp h4 {font-size: 14px; color: #5d5d5d;}
    .amaze .amazesp p {font-size: 13px; margin: 1px; color: #5d5d5d;}
    
    /* boost */
    .boost {padding: 20px 0;}
    .boost .title {font-size: 21px; padding: 8px 0 0 5px;}
    .boost .boostbox {padding: 20px 0 10px 0;}
    .boost .boostbox .boostimg {float:none; width: 60%; padding: 0 20%;}
    .boost .boostbox .boosttext {float: none; width: 94%; padding-left: 3%;}
    .boost .boostbox .boosttext h3 { font-size: 20px; padding-top: 15px;}
    .boost .boostbox .boosttext h4 {font-size: 18px; padding-top: 15px;}
    .boost .boostbox .boosttext p {font-size: 16px;padding-top: 15px;}
    .boost .boostbox .boosttext em {font-size: 16px;padding-top: 10px;}
    .boost .boostsp {padding: 20px; 20px;}
    .boost .boostsp h4 {font-size: 14px;}
    .boost .boostsp p {font-size: 13px; margin: 1px; color: #5d5d5d;}
    
    /* trust */
    .trust {padding: 20px 0;}
    .trust .title {font-size: 21px; padding: 8px 0 0 5px;}
    .trust .trustbox {padding: 20px 0 10px 0;}
    .trust .trustbox .trustimg {float:none; width: 60%; padding: 0 20%;}
    .trust .trustbox .trusttext {float: none; width: 94%; padding-left: 3%;}
    .trust .trustbox .trusttext h3 { font-size: 20px; padding-top: 15px;}
    .trust .trustbox .trusttext h4 {font-size: 18px; padding-top: 15px;}
    .trust .trustbox .trusttext p {font-size: 16px;padding-top: 15px;}
    .trust .trustbox .trusttext em {font-size: 16px;padding-top: 10px;}
    .trust .trustsp {padding: 20px; 20px;}
    .trust .trustsp h4 {font-size: 14px;}
    .trust .trustsp p {font-size: 13px; margin: 1px; color: #5d5d5d;}
    
    /* ally */
    .ally {padding: 20px 0;}
    .ally .title {font-size: 21px; padding: 8px 0 0 5px;}
    .ally .allybox {padding: 20px 0 10px 0;}
    .ally .allybox .allyimg {float:none; width: 60%; padding: 0 20%;}
    .ally .allybox .allytext {float: none; width: 94%; padding-left: 3%;}
    .ally .allybox .allytext h3 { font-size: 20px; padding-top: 15px;}
    .ally .allybox .allytext h4 {font-size: 18px; padding-top: 15px;}
    .ally .allybox .allytext p {font-size: 16px;padding-top: 15px;}
    .ally .allybox .allytext em {font-size: 16px;padding-top: 10px;}
    .ally .allysp {padding: 20px; 20px;}
    .ally .allysp h4 {font-size: 14px;}
    .ally .allysp p {font-size: 13px; margin: 1px; color: #5d5d5d;}
    
    .infor {padding: 40px 0;}
    .infor .infor-box {padding: 0px 0px;} 
    .infor .infor-box .in-left em {font-size: 20px;}
    .infor .infor-box .in-left strong {font-size: 24px;}
    .infor .infor-box .in-right li {font-size: 16px;}
}

@media (max-width: 520px){
    
}

@media (max-width: 400px){
    .infor .infor-box .in-right li {font-size: 16px;} 
}