/* main layout */
#pbanner {  background: url(../img/oticon-banner.jpg)  no-repeat center top;
text-align: center;}
#more {padding: 0 10px;}
#opns {padding: 0 10px;}
#siya {padding: 0 10px;}
#geno {padding: 0 10px;}
#infor { background: rgba(0,0,0,0.1);}
#Price {padding: 0 10px;}
#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 {}

/* more */
.more {padding: 80px 0 0px 0;}
.more .title {font-size: 36px; background: #d244a0; color: #fff; padding: 10px 0 0 20px; border-radius: 10px;}
.more .morebox1 {overflow: hidden; padding: 40px 0 0 0;}
.more .morebox1 .more1img {float:left; width: 42%; padding: 0 4%;}
.more .morebox1 .more1img img {width: 100%;}
.more .morebox1 .more1text {float: left; width: 46%; padding-left: 4%}
.more .morebox1 .more1text h4 {font-size: 28px; padding-top: 20px;}
.more .morebox1 .more1text p {font-size: 24px; color: #5d5d5d;}
.more .morebox2 {overflow: hidden; padding: 0 0 40 0;}
.more .morebox2 .more2text {float:left; width: 50%; padding-left: 5%;}
.more .morebox2 .more2text h3 {font-size: 32px; padding-top:50px; padding-bottom: 30px;}
.more .morebox2 .more2text h4 {font-size: 24px; color: #5d5d5d; padding-bottom: 20px;}
.more .morebox2 .more2text p {font-size: 20px; color: blue;}
.more .morebox2 .more2text em {font-size: 20px; color: coral; padding-top: 10px;}
.more .morebox2 .more2img {float:left; width: 45%;}
.more .morebox2 .more2img img {width: 100%; padding-bottom: 20px;}
.more .moresp {padding: 20px; 20px;}
.more .moresp h4 {text-align: right; font-size: 18px; color: #5d5d5d;}
.more .moresp p {text-align: right; font-size: 16px; margin: 1px; color: #5d5d5d;}

/* opns */
.opns {padding: 80px 0 40px 0;}
.opns .title {font-size: 36px; background: #d244a0; color: #fff; padding: 10px 0 0 20px; border-radius: 10px;}
.opns .opnsbox1 {overflow: hidden; padding: 40px 0 0 0;}
.opns .opnsbox1 .opns1img {float:left; width: 42%; padding: 0 4%;}
.opns .opnsbox1 .opns1img img {width: 100%;}
.opns .opnsbox1 .opns1text {float: left; width: 46%; padding-left: 4%}
.opns .opnsbox1 .opns1text h4 {font-size: 28px; padding-top: 20px;}
.opns .opnsbox1 .opns1text p {font-size: 24px; color: #5d5d5d;}
.opns .opnsbox2 {overflow: hidden; padding: 0 0 40 0;}
.opns .opnsbox2 .opns2text {float:left; width: 50%; padding-left: 5%;}
.opns .opnsbox2 .opns2text h3 {font-size: 32px; padding-top:50px; padding-bottom: 30px;}
.opns .opnsbox2 .opns2text h4 {font-size: 24px; color: #5d5d5d; padding-bottom: 20px;}
.opns .opnsbox2 .opns2text p {font-size: 20px; color: blue;}
.opns .opnsbox2 .opns2text em {font-size: 20px; color: coral; padding-top: 10px;}
.opns .opnsbox2 .opns2img {float:left; width: 45%;}
.opns .opnsbox2 .opns2img img {width: 100%;}
.opns .opnssp {padding: 20px; 20px;}
.opns .opnssp h4 {text-align: right; font-size: 18px; color: #5d5d5d;}
.opns .opnssp p {text-align: right; font-size: 16px; margin: 1px; color: #5d5d5d;}

/* siya */
.siya {padding: 40px 0;}
.siya .title {font-size: 36px; background: #d244a0; color: #fff; padding: 10px 0 0 20px;  border-radius: 10px;}
.siya .siyabox {overflow: hidden; padding: 40px 0 0 0;}
.siya .siyabox .siyaimg {float:left; width: 36%; padding: 0 4%;}
.siya .siyabox .siyaimg img {width: 100%;}
.siya .siyabox .siyatext {float: left; width: 54%; padding-left: 2%;}
.siya .siyabox .siyatext h3 { font-size: 30px; padding-top: 30px;}
.siya .siyabox .siyatext h4 {font-size: 24px; color: #5d5d5d; padding-top: 30px;}
.siya .siyabox .siyatext p {font-size: 20px; color: blue; padding-top: 15px;}
.siya .siyabox .siyatext em {font-size: 20px; color: coral; padding-top: 10px;}
.siya .siyasp {padding: 20px; 20px;}
.siya .siyasp h4 {text-align: right; font-size: 18px; color: #5d5d5d;}
.siya .siyasp p {text-align: right; font-size: 16px; margin: 1px; color: #5d5d5d;}

/* geno */
.geno {padding: 40px 0;}
.geno .title {font-size: 36px; background: #d244a0; color: #fff; padding: 10px 0 0 20px;  border-radius: 10px;}
.geno .genobox {overflow: hidden; padding: 40px 0 0 0;}
.geno .genobox .genoimg {float:left; width: 36%; padding: 0 4%;}
.geno .genobox .genoimg img {width: 100%;}
.geno .genobox .genotext {float: left; width: 54%; padding-left: 2%;}
.geno .genobox .genotext h3 { font-size: 30px; padding-top: 30px;}
.geno .genobox .genotext h4 {font-size: 24px; color: #5d5d5d; padding-top: 30px;}
.geno .genobox .genotext p {font-size: 20px; color: blue; padding-top: 15px;}
.geno .genobox .genotext em {font-size: 20px; color: coral; padding-top: 10px;}
.geno .genosp {padding: 20px; 20px;}
.geno .genosp h4 {text-align: right; font-size: 18px; color: #5d5d5d;}
.geno .genosp p {text-align: right; font-size: 16px; margin: 1px; color: #5d5d5d;}

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

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


/* 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;}
    
    /* more */
    .more {padding: 40px 0 20px 0;}
    .more .title {font-size: 21px; padding: 8px 0 0 5px;}
    .more .morebox1 {padding-bottom: 10px; border-bottom: 2px solid #e6e6e6;}
    .more .morebox1 .more1img {float: none; width: 60%; padding: 0 20%;}
    .more .morebox1 .more1text {float: none; width: 94%; padding: 0 3%;}
    .more .morebox1 .more1text h4 {font-size: 20px; padding-top: 0px;}
    .more .morebox1 .more1text p {font-size: 16px;}
    .more .morebox2 {padding: 10px 0 0 0;}
    .more .morebox2 .more2text {float: none; width: 94%; padding: 3%;}
    .more .morebox2 .more2text h3 {font-size: 22px; padding-top:0; padding-bottom: 15px;}
    .more .morebox2 .more2text h4 {font-size: 18px; color: #5d5d5d; padding-bottom: 15px;}
    .more .morebox2 .more2text p {font-size: 16px;}
    .more .morebox2 .more2text em {font-size: 16px; padding-top: 10px;}
    .more .morebox2 .more2img {display: none;}
    .more .moresp {padding: 15px; 10px;}
    .more .moresp h4 {font-size: 14px; color: #5d5d5d;}
    .more .moresp p {font-size: 13px; margin: 1px; color: #5d5d5d;}
    
    /* opns */
    .opns {padding: 40px 0 20px 0;}
    .opns .title {font-size: 21px; padding: 8px 0 0 5px;}
    .opns .opnsbox1 {padding-bottom: 10px; border-bottom: 2px solid #e6e6e6;}
    .opns .opnsbox1 .opns1img {float: none; width: 60%; padding: 0 20%;}
    .opns .opnsbox1 .opns1text {float: none; width: 94%; padding: 0 3%;}
    .opns .opnsbox1 .opns1text h4 {font-size: 20px; padding-top: 0px;}
    .opns .opnsbox1 .opns1text p {font-size: 16px;}
    .opns .opnsbox2 {padding: 10px 0 0 0;}
    .opns .opnsbox2 .opns2text {float: none; width: 94%; padding: 3%;}
    .opns .opnsbox2 .opns2text h3 {font-size: 22px; padding-top:0; padding-bottom: 15px;}
    .opns .opnsbox2 .opns2text h4 {font-size: 18px; color: #5d5d5d; padding-bottom: 15px;}
    .opns .opnsbox2 .opns2text p {font-size: 16px;}
    .opns .opnsbox2 .opns2text em {font-size: 16px; padding-top: 10px;}
    .opns .opnsbox2 .opns2img {display: none;}
    .opns .opnssp {padding: 15px; 10px;}
    .opns .opnssp h4 {font-size: 14px; color: #5d5d5d;}
    .opns .opnssp p {font-size: 13px; margin: 1px; color: #5d5d5d;}
    
    /* siya */
    .siya {padding: 20px 0;}
    .siya .title {font-size: 21px; padding: 8px 0 0 5px;}
    .siya .siyabox {padding: 20px 0 10px 0;}
    .siya .siyabox .siyaimg {float:none; width: 60%; padding: 0 20%;}
    .siya .siyabox .siyatext {float: none; width: 94%; padding-left: 3%;}
    .siya .siyabox .siyatext h3 { font-size: 20px; padding-top: 15px;}
    .siya .siyabox .siyatext h4 {font-size: 18px; padding-top: 15px;}
    .siya .siyabox .siyatext p {font-size: 16px;padding-top: 15px;}
    .siya .siyabox .siyatext em {font-size: 16px;padding-top: 10px;}
    .siya .siyasp {padding: 20px; 20px;}
    .siya .siyasp h4 {font-size: 14px;}
    .siya .siyasp p {font-size: 13px; margin: 1px; color: #5d5d5d;}
    
    /* geno */
    .geno {padding: 20px 0;}
    .geno .title {font-size: 21px; padding: 8px 0 0 5px;}
    .geno .genobox {padding: 20px 0 10px 0;}
    .geno .genobox .genoimg {float:none; width: 60%; padding: 0 20%;}
    .geno .genobox .genotext {float: none; width: 94%; padding-left: 3%;}
    .geno .genobox .genotext h3 { font-size: 20px; padding-top: 15px;}
    .geno .genobox .genotext h4 {font-size: 18px; padding-top: 15px;}
    .geno .genobox .genotext p {font-size: 16px;padding-top: 15px;}
    .geno .genobox .genotext em {font-size: 16px;padding-top: 10px;}
    .geno .genosp {padding: 20px; 20px;}
    .geno .genosp h4 {font-size: 14px;}
    .geno .genosp p {font-size: 13px; margin: 1px; color: #5d5d5d;}
    
    .Price {padding: 0 0 30px 0;}
    .Price .title {font-size: 22px;}
    .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;} 
}