/* main layout */
#pbanner {  background: url(../img/widex-banner.jpg)  no-repeat center top;
text-align: center;}
#evoke {padding: 0 10px;}
#unique {padding: 0 10px;}
#enjoy {padding: 0 10px;}
#infor { background: rgba(0,0,0,0.1);}
#review {padding: 0 10px;}

/* 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 {}


/* evoke */
.evoke {padding: 80px 0 40px 0;}
.evoke .title {font-size: 36px; background: #6b6b6b; color: #fff; padding: 10px 0 0 20px; border-radius: 10px;}
.evoke .evokebox1 {overflow: hidden; padding: 40px 0 0 0;}
.evoke .evokebox1 .evoke1img {float:left; width: 36%; padding: 0 6%;}
.evoke .evokebox1 .evoke1img img {width: 100%;}
.evoke .evokebox1 .evoke1text {float: left; width: 48%; padding-left: 4%;}
.evoke .evokebox1 .evoke1text h4 {font-size: 30px; padding-top: 30px;}
.evoke .evokebox1 .evoke1text p {font-size: 24px; color: #5d5d5d;}
.evoke .evokebox2 {overflow: hidden; padding: 0 0 40 0;}
.evoke .evokebox2 .evoke2text {float:left; width: 53%; padding-left: 2%;}
.evoke .evokebox2 .evoke2text h3 {font-size: 30px; padding-top:50px; padding-bottom: 30px;}
.evoke .evokebox2 .evoke2text h4 {font-size: 24px; color: #5d5d5d; padding-bottom: 20px;}
.evoke .evokebox2 .evoke2text p {font-size: 20px; color: blue;}
.evoke .evokebox2 .evoke2text em {font-size: 20px; color: coral; padding-top: 10px;}
.evoke .evokebox2 .evoke2img {float:left; width: 41%; padding: 2% 2% 0 2%;}
.evoke .evokebox2 .evoke2img img {width: 90%;}
.evoke .evokesp {padding: 20px; 20px;}
.evoke .evokesp h4 {text-align: right; font-size: 18px; color: #5d5d5d;}
.evoke .evokesp p {text-align: right; font-size: 16px; margin: 1px; color: #5d5d5d;}

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

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

/* review */
.review {overflow: hidden; padding: 0 0 40px 0; }
.review .title {float:right; font-size: 36px; background: #c1c0c0; padding: 0 10px; border-radius: 20px;}
.review .title:hover {background-color: #5a5a5a; }


/* 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;}
    
    /* evoke */
    .evoke {padding: 40px 0 20px 0;}
    .evoke .title {font-size: 21px; padding: 8px 0 0 5px;}
    .evoke .evokebox1 {padding-bottom: 10px; border-bottom: 2px solid #e6e6e6;}
    .evoke .evokebox1 .evoke1img {float: none; width: 60%; padding: 0 20%;}
    .evoke .evokebox1 .evoke1text {float: none; width: 94%; padding: 0 3%;}
    .evoke .evokebox1 .evoke1text h4 {font-size: 20px; padding-top: 0px;}
    .evoke .evokebox1 .evoke1text p {font-size: 16px;}
    .evoke .evokebox2 {padding: 10px 0 0 0;}
    .evoke .evokebox2 .evoke2text {float: none; width: 94%; padding: 3%;}
    .evoke .evokebox2 .evoke2text h3 {font-size: 20px; padding-top:0; padding-bottom: 15px;}
    .evoke .evokebox2 .evoke2text h4 {font-size: 18px; color: #5d5d5d; padding-bottom: 15px;}
    .evoke .evokebox2 .evoke2text p {font-size: 16px;}
    .evoke .evokebox2 .evoke2text em {font-size: 16px; padding-top: 10px;}
    .evoke .evokebox2 .evoke2img {display: none;}
    .evoke .evokesp {padding: 15px; 10px;}
    .evoke .evokesp h4 {font-size: 14px; color: #5d5d5d;}
    .evoke .evokesp p {font-size: 13px; margin: 1px; color: #5d5d5d;}
    
    /* unique */
    .unique {padding: 20px 0;}
    .unique .title {font-size: 21px; padding: 8px 0 0 5px;}
    .unique .uniquebox {padding: 20px 0 10px 0;}
    .unique .uniquebox .uniqueimg {float:none; width: 60%; padding: 0 20%;}
    .unique .uniquebox .uniquetext {float: none; width: 94%; padding-left: 3%;}
    .unique .uniquebox .uniquetext h3 { font-size: 20px; padding-top: 15px;}
    .unique .uniquebox .uniquetext h4 {font-size: 18px; padding-top: 15px;}
    .unique .uniquebox .uniquetext p {font-size: 16px;padding-top: 15px;}
    .unique .uniquebox .uniquetext em {font-size: 16px;padding-top: 10px;}
    .unique .uniquesp {padding: 20px; 20px;}
    .unique .uniquesp h4 {font-size: 14px;}
    .unique .uniquesp p {font-size: 13px; margin: 1px; color: #5d5d5d;}
    
    /* enjoy */
    .enjoy {padding: 20px 0;}
    .enjoy .title {font-size: 21px; padding: 8px 0 0 5px;}
    .enjoy .enjoybox {padding: 20px 0 10px 0;}
    .enjoy .enjoybox .enjoyimg {float:none; width: 60%; padding: 0 20%;}
    .enjoy .enjoybox .enjoytext {float: none; width: 94%; padding-left: 3%;}
    .enjoy .enjoybox .enjoytext h3 { font-size: 20px; padding-top: 15px;}
    .enjoy .enjoybox .enjoytext h4 {font-size: 18px; padding-top: 15px;}
    .enjoy .enjoybox .enjoytext p {font-size: 16px;padding-top: 15px;}
    .enjoy .enjoybox .enjoytext em {font-size: 16px;padding-top: 10px;}
    .enjoy .enjoysp {padding: 20px; 20px;}
    .enjoy .enjoysp h4 {font-size: 14px;}
    .enjoy .enjoysp p {font-size: 13px; margin: 1px; color: #5d5d5d;}
    
    .review {padding: 0 0 30px 0;}
    .review .title {font-size: 22px;}
    
    .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;} 
}