.pn-contact-info{margin: 30px 0 20px 0}
.pn-contact-info .row{display: flex;flex-wrap: wrap;justify-content: center}
.pn-contact-info .row [class*='col-']{margin-bottom: 30px}
.pn-contact-info .row [class*='col-'] .pn-item{background-color: #fff;padding: 50px 15px 20px 15px;border-radius: 10px;box-shadow: 3px 5px 15px rgba(0,0,0,.05);height: 100%;text-align: center;margin-bottom: 0}
.pn-contact-info .row [class*='col-'] .pn-item > span{display: flex;width: 70px;height: 70px;border-radius: 100px;background-color: var(--background-main-hover);color: var(--background-main-hover-color);justify-content: center;align-items: center;font-size: 40px;position: absolute;left: 50%;transform: translateX(-50%);top: -35px}
.pn-contact-info .row [class*='col-'] .pn-item p{margin-bottom: 0}
.pn-contact-info .row [class*='col-'] .pn-item p > strong{display: inline-block;margin-right: 5px}
.pn-contact-info .row [class*='col-'] .pn-item p > span{display: block}
/**/
.pn-maps-full{height: 500px;margin-bottom: 40px}
.pn-maps-full iframe{height: 100%;width: 100%}
/**/
.pn-form{background: linear-gradient(to bottom, rgba(5,4,230,1) 2%,rgba(20,162,252,1) 51%,rgba(0,0,150,1) 100%);box-shadow: 0 0 1px #8ea7de;padding: 25px 20px;border-radius: 10px;position: relative;z-index: 1;margin-bottom: 60px}
.pn-form .pn-title{color: #fff;font-size: 24px;line-height: 34px;margin-bottom: 20px}
.pn-form .form-control{margin-bottom: 10px}
.pn-form .pn-button{padding-left: 65px;padding-right: 65px;color: #1947ba;background: linear-gradient(to bottom, rgba(12, 146, 253, 1) 0%, rgba(59, 250, 253, 1) 100%);margin-top: 20px}
/**/
.pn-system{position: relative}
.pn-system .pn-title-tab{ padding-left: 0; list-style: none; text-align: center; margin-bottom: 40px}
.pn-system .pn-title-tab li{ margin: 0 15px 15px 15px; display: inline-block}
.pn-system .pn-title-tab li span{ font-size: 16px; line-height: 21px; border: 1px dashed var(--background-main-hover); border-radius: 100px; padding: 8px 25px 7px 25px; display: block; text-transform: capitalize; cursor: pointer}
.pn-system .pn-title-tab li.active span,.pn-title-tab li:hover span{ background-color: var(--background-main-hover); border-style: solid; color: #fff}
.pn-system .pn-title-subtab{padding-left: 0; list-style: none; display: flex; flex-wrap: wrap;justify-content: center; margin: -30px 0 30px 0}
.pn-system .pn-title-subtab li{margin: 0 20px 10px 20px;cursor: pointer}
.pn-system .pn-title-subtab li span{display: block;font-size: 16px;line-height: 21px}
.pn-system .pn-title-subtab li.active,.pn-system .pn-title-subtab li:hover{color: var(--color-hover)}
.pn-system .pn-title-subtab li.active{font-weight: bold}
.pn-system .pn-name-branch{ text-transform: uppercase; font-size: 16px; font-weight: bold; margin-bottom: 20px}
.pn-system .pn-gmap iframe{ width: 100%; height: 100%}
.pn-system .row [class*='col-']{margin-bottom: 30px}
.pn-system .pn-gmap{margin-top: 40px}
.pn-system .pn-image{padding: 0}
.pn-system .pn-image:hover img{transform: initial}
.pn-system .pn-image a{display: block}
.pn-system .pn-wrapper-tab{position: relative}
.pn-system .pn-wrapper-tab .pn-tab-item:not(.active){position: absolute;left: 0;top: 0;opacity: 0;visibility: hidden;right: 0}
.pn-system .pn-wrapper-tab .pn-tab-item .pn-info{list-style: none;padding-left: 0}
.pn-system .pn-wrapper-tab .pn-tab-item .pn-info li{margin-bottom: 10px;position: relative;padding-left: 25px}
.pn-system .pn-wrapper-tab .pn-tab-item .pn-info li .fa{position: absolute;left: 0;top: 1px;width: 18px;text-align: center;font-size: 18px}
.pn-system .owl-carousel .owl-nav button{width: 30px;height: 30px;min-width: 30px;border: 1px solid #676c6f;box-shadow: inherit}
.pn-system .owl-carousel .owl-nav .owl-prev{left: -15px}
.pn-system .owl-carousel .owl-nav .owl-next{right: -15px}
.pn-system .owl-carousel .owl-item{cursor: pointer}
#branchSelectBox{display: none;margin-bottom: 20px}
#branchSelectBox select{width: 300px; margin: 0 auto 10px auto;border-radius: 5px;background-color: #fff}
#branchSelectBox #branchCate{border: 1px dashed var(--background-main-hover); background: var(--background-main-hover); color: var(--background-main-hover-color); }
#branchSelectBox #branchItem{border: 1px dashed var(--background-main-hover);}
@media only screen and (max-width: 991px){
    .pn-contact-info .row [class*='col-'] .pn-item{padding-top: 40px}
    .pn-contact-info .row [class*='col-'] .pn-item > span{width: 60px;height: 60px;font-size: 30px}
    .pn-maps-full{height: 350px;margin-bottom: 30px}
    .section-content{margin-bottom: 60px}
    .pn-contact-info{margin-bottom: 0}
}
@media only screen and (max-width: 767px){
    .pn-contact-info .row [class*='col-']{margin-bottom: 60px}
    .pn-system .owl-carousel .owl-nav .owl-next{right: 15px}
    .pn-system .owl-carousel .owl-nav .owl-prev{left: 15px}
    .section-content{margin-bottom: 0}
}
@media only screen and (max-width: 570px){
    .pn-form{margin-bottom: 30px}
    .pn-contact-info .row{display: block}
    .pn-contact-info .row [class*='col-']:last-child{margin-bottom: 30px}
    #branchSelectBox{display: block}
    .pn-system .pn-title-tab,.pn-system .pn-title-subtab{display: none}
}
@media only screen and (max-width: 370px){
    .pn-form .pn-button{width: 100%;padding-left: 30px;padding-right: 30px}
    #branchSelectBox select{width: 100%}
}