.pc {
  display: block;
}
.mb {
  display: none;
}
.fade {
  opacity: 0;
  transform: translate(0, 30px);
}
.fadeInUp {
  animation: fadeInUp 0.4s ease forwards;
  will-change: transform, opacity;
}
h2 {
  font-weight: bold;
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translate(0, 30px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
.text-center {
  text-align: center;
}
.image-wrapper {
  text-align: center;
}
.image-wrapper img {
  max-width: 100%;
}
.linkYellow {
  color: #ffd200;
}
.pt0 {
  padding-top: 0 !important;
}
.headerImg {
  background-color: #000000;
  color: #ffffff;
  padding: 8rem 1.5rem 0;
}
.headerImg .headerImg-container {
  -webkit-box-sizing: border-box;
  margin-right: auto!important;
  margin-left: auto!important;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  width: 117rem;
  box-sizing: border-box;
  overflow: hidden;
}
.headerImg .headerImg-container .image-wrapper img {
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  display: block;
}
.headerImg .headerImg-container .image-wrapper.hdcLogo {
  padding: 80px 0;
}
.headerImg .headerImg-container .image-wrapper.hdcLogo img {
  max-width: 678px;
  width: 100%;
}
.headerImg .headerImg-container .text-wrapper {
  padding-top: 50px;
  padding-bottom: 50px;
}
.headerImg .headerImg-container .text-wrapper h1,
.headerImg .headerImg-container .text-wrapper .h1 {
  font-size: 32px;
  line-height: 36px;
}
.headerImg .headerImg-container .text-wrapper h2,
.headerImg .headerImg-container .text-wrapper .h2 {
  font-size: 28px;
  line-height: 32px;
}
.headerImg .headerImg-container .text-wrapper p {
  font-size: 16px;
  line-height: 24px;
}
.ptzHeader {
  background: url(../feature/bg-ptz-header-pc.png);
  background-size: cover;
}
.ptzHeader h1 {
  font-size: 36px;
  line-height: 36px;
  font-weight: bold;
}
.ptzHeader h2 {
  font-size: 28px;
  line-height: 32px;
  font-weight: normal !important;
}
.ptz-possibilities {
  padding: 0 30px;
  line-height: 1.5;
}
.Capture {
  padding-bottom: 20px;
  color: #fff;
  background-color: #000000;
}
.Capture .Capture-container {
  padding-right: 15px;
  padding-left: 15px;
}
.Capture .Capture-container.CaptureImg {
  background: url('content/dam/professional/professional-cameras/hdc-f5500/feature/bg-capture.png');
  padding: 80px 0;
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
}
.Capture .Capture-container.CaptureImg .container {
  width: 117rem;
  margin: 0 auto;
}
.Capture .Capture-container.CaptureImg .image-wrapper {
  max-width: 540px;
}
.Capture .Capture-container.CaptureImg .image-wrapper img {
  width: 100%;
}
.Capture .Capture-container .text-wrapper {
  padding-bottom: 20px;
}
.Capture .Capture-container .text-wrapper h1,
.Capture .Capture-container .text-wrapper .h1 {
  font-size: 32px;
  line-height: 36px;
}
.Capture .Capture-container .text-wrapper h2,
.Capture .Capture-container .text-wrapper .h2 {
  font-size: 28px;
  line-height: 32px;
}
.Capture .Capture-container .text-wrapper p {
  font-size: 16px;
  line-height: 24px;
}
.Capture .Capture-container .image-wrapper {
  text-align: center;
}
.Capture .Capture-container .image-wrapper img {
  max-width: 100%;
}
.module {
  overflow: hidden;
  padding-bottom: 80px;
  padding-top: 80px;
}
.cta-block .button-inline {
  display: inline;
}
.cta-block .button-inline .btn {
  background-color: transparent;
  border: 1px solid #f3f6fb;
  border-radius: 0;
  box-shadow: none!important;
  color: #f3f6fb;
  font-size: 16px;
  margin-right: 16px;
  margin-bottom: 25px;
  min-width: 120px;
  padding: 12px 30px;
  text-align: center;
  transition: all 0.25s ease;
}
.cta-block .button-inline .btn-lg {
  font-size: 16px;
  display: inline-block;
}
.cta-block .button-inline .btn-yellow {
  background-color: #ffd200;
  border: 2px solid #ffd200;
  color: #2c3e50;
}
.cta-block .button-inline .btn-yellow:focus,
.cta-block .button-inline .btn-yellow:hover {
  background-color: #2c3e50;
  border: 2px solid #ffd200;
  color: #ffd200;
}
.cta-block .button-inline .btn-blue {
  border-color: #2c3e50;
  color: #2c3e50;
}
.cta-block .button-inline .btn-blue:focus,
.cta-block .button-inline .btn-blue:hover {
  background-color: #2c3e50;
  color: #fff;
}
.supremeDiv {
  position: relative;
}
.supremeDiv .standard-text {
  position: absolute;
  bottom: 0;
  width: 100%;
}
.supremeDiv .standard-text .container {
  width: 117rem;
  margin: 0 auto;
}
.supremeDiv .standard-text .supremeDivText {
  width: 100%;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.supremeDiv .standard-text .supremeDivText .inner-content p.note {
  font-size: 12px;
}
.leftRightDiv {
  width: 117rem;
  margin: 0 auto;
}
.leftRightDiv .text-left-image-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.leftRightDiv .text-left-image-right .text-wrapper {
  width: calc(50% - 15px);
  margin-right: 15px;
}
.leftRightDiv .text-left-image-right .text-wrapper .h2,
.leftRightDiv .text-left-image-right .text-wrapper h2 {
  font-size: 28px;
  line-height: 32px;
  font-weight: bold;
}
.leftRightDiv .text-left-image-right .text-wrapper .inner-content {
  word-wrap: break-word;
}
.leftRightDiv .text-left-image-right .text-wrapper .inner-content p {
  font-size: 16px;
  line-height: 24px;
  margin-bottom: 1.2rem;
}
.leftRightDiv .text-left-image-right .text-wrapper .inner-content p a {
  font-size: 16px;
  line-height: 24px;
  color: #0a5e9d;
  display: inline-block;
  margin-top: 8px;
}
.leftRightDiv .text-left-image-right .text-wrapper .inner-content p a.btn {
  background-color: transparent;
  border: 1px solid #f3f6fb;
  border-radius: 0;
  box-shadow: none!important;
  color: #f3f6fb;
  font-size: 16px;
  margin-right: 16px;
  margin-bottom: 25px;
  min-width: 120px;
  padding: 12px 30px;
  text-align: center;
  transition: all 0.25s ease;
}
.leftRightDiv .text-left-image-right .text-wrapper .inner-content p a.btn-yellow {
  background-color: #ffd200;
  border: 2px solid #ffd200;
  color: #2c3e50;
}
.leftRightDiv .text-left-image-right .text-wrapper .inner-content p a.btn-yellow:focus,
.leftRightDiv .text-left-image-right .text-wrapper .inner-content p a.btn-yellow:hover {
  background-color: #2c3e50;
  border: 2px solid #ffd200;
  color: #ffd200;
}
.leftRightDiv .text-left-image-right .image-wrapper {
  width: calc(50% - 15px);
  margin-left: 15px;
}
.leftRightDiv .text-left-image-right .image-wrapper img {
  width: 100%;
}
.leftRightDiv .text-right-image-left {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding: 0 1.5rem;
  margin: 0 auto;
  align-items: center;
}
.leftRightDiv .text-right-image-left .text-wrapper {
  width: calc(50% - 15px);
  margin-left: 15px;
}
.leftRightDiv .text-right-image-left .text-wrapper .h2,
.leftRightDiv .text-right-image-left .text-wrapper h2 {
  font-size: 28px;
  line-height: 32px;
  font-weight: bold;
}
.leftRightDiv .text-right-image-left .text-wrapper .inner-content {
  word-wrap: break-word;
}
.leftRightDiv .text-right-image-left .text-wrapper .inner-content p {
  font-size: 16px;
  line-height: 24px;
  margin-bottom: 1.2rem;
}
.leftRightDiv .text-right-image-left .text-wrapper .inner-content p a {
  font-size: 16px;
  line-height: 24px;
  color: #0a5e9d;
  display: inline-block;
  margin-top: 8px;
}
.leftRightDiv .text-right-image-left .image-wrapper {
  width: calc(50% - 15px);
  margin-right: 15px;
}
.leftRightDiv .text-right-image-left .image-wrapper img {
  width: 100%;
}
.media-text-columns .container {
  width: 117rem;
  margin: 0 auto;
}
.media-text-columns .container .media-container {
  width: 100%;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.media-text-columns .container .inner-content {
  margin-top: 10px;
}
.media-text-columns .container .inner-content .textTwoDivList {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px 20px;
}
.media-text-columns .container .inner-content .textTwoDivList .textOneDivListLi {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}
.media-text-columns .container .inner-content .textTwoDivList .textTwoDivListLi {
  width: 50%;
  padding-right: 15px;
  padding-left: 15px;
}
.media-text-columns .container .inner-content .textTwoDivList .h3,
.media-text-columns .container .inner-content .textTwoDivList h3 {
  font-size: 20px;
  line-height: 24px;
  margin-top: 20px;
}
.media-text-columns .container .h3,
.media-text-columns .container h3 {
  font-size: 20px;
  line-height: 24px;
}
.media-text-columns .container p {
  font-size: 16px;
  line-height: 24px;
  margin-bottom: 1.2rem;
}
.media-text-columns .container a {
  font-size: 16px;
  line-height: 24px;
  margin-bottom: 1.2rem;
  color: #0a5e9d;
}
.media-text-columns .container .text-center .static-header {
  font-size: 28px;
  line-height: 36px;
}
.media-text-columns .container .text-center .inner-content {
  margin-bottom: 45px;
}
.media-text-columns .container .text-center .inner-content .h2,
.media-text-columns .container .text-center .inner-content h2 {
  font-size: 24px;
  line-height: 28px;
  color: #000;
}
.media-text-columns .container .text-center .inner-content p {
  font-size: 16px;
  line-height: 24px;
  margin-bottom: 1.2rem;
}
.media-text-columns .container .columns-container {
  width: 100%;
  padding: 0 1.5rem;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.media-text-columns .container .columns-container.columns-container-two .text-column {
  width: 50%;
  padding-right: 15px;
  padding-left: 15px;
}
.media-text-columns .container .columns-container.columns-container-two .text-column .inner-content .read-more {
  font-size: 16px;
  padding: 10px 15px 15px;
  color: #0a5e9d;
  padding-top: 15px;
  margin-bottom: 5px;
  margin-right: 5px;
  margin: 0 auto;
}
.media-text-columns .container .columns-container.columns-container-two .text-column .text-column-image picture img {
  width: 100%;
}
.media-text-columns .container .columns-container.columns-container-three .text-column {
  width: 33.333%;
  padding-right: 15px;
  padding-left: 15px;
}
.media-text-columns .container .columns-container.columns-container-three .text-column .inner-content .read-more {
  font-size: 16px;
  padding: 10px 15px 15px;
  color: #0a5e9d;
  padding-top: 15px;
  margin-bottom: 5px;
  margin-right: 5px;
  margin: 0 auto;
}
.media-text-columns .container .columns-container.columns-container-three .text-column .text-column-image picture.icon {
  display: inline-block;
  width: 4.1666vw;
}
.media-text-columns .container .columns-container.columns-container-three .text-column .text-column-image picture img {
  width: 100%;
}
.media-text-columns .container .columns-container.columns-container-four .text-column {
  width: 25%;
  padding-right: 15px;
  padding-left: 15px;
}
.media-text-columns .container .columns-container.columns-container-four .text-column .inner-content .read-more {
  font-size: 16px;
  padding: 10px 15px 15px;
  color: #0a5e9d;
  padding-top: 15px;
  margin-bottom: 5px;
  margin-right: 5px;
  margin: 0 auto;
}
.media-text-columns .container .columns-container.columns-container-four .text-column .text-column-image picture img {
  width: 100%;
}
.primeSupport {
  position: relative;
  background: url(../feature/bg-PrimeSupport.jpg) no-repeat;
  background-size: 100% 100%;
}
.primeSupport .container {
  width: 117rem;
  height: 100%;
  margin: 0 auto;
}
.primeSupport .container .primeSupportDiv {
  width: 83.3333%;
  margin: 0 auto;
  position: relative;
}
.primeSupport .container .primeSupportText {
  color: #fff;
  padding: 60px 0;
}
.primeSupport .container .primeSupportText h3 {
  font-size: 28px;
  line-height: 32px;
  margin-bottom: 30px;
}
.primeSupport .container .primeSupportText p {
  font-size: 24px;
  line-height: 30px;
  margin-bottom: 20px;
}
.primeSupport .container .primeSupportImg {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  width: 22.9375vw;
}
@media (max-width: 1200px) {
  .headerImg .headerImg-container {
    width: 97rem;
  }
  .headerImg .headerImg-container .image-wrapper img {
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    display: block;
  }
  .headerImg .headerImg-container .text-wrapper {
    padding-top: 50px;
  }
  .Capture .Capture-container {
    padding-right: 15px;
    padding-left: 15px;
  }
  .Capture .Capture-container.CaptureImg .container {
    width: 97rem;
    margin: 0 auto;
  }
  .Capture .Capture-container .text-wrapper {
    padding: 0 15px 15px;
  }
  .Capture .Capture-container .image-wrapper {
    text-align: center;
  }
  .Capture .Capture-container .image-wrapper img {
    max-width: 100%;
  }
  .module {
    padding: 40px 0;
  }
  .cta-block .button-inline {
    display: inline;
  }
  .supremeDiv .standard-text .container {
    width: 97rem;
  }
  .leftRightDiv {
    width: 97rem;
  }
  .media-text-columns .container {
    width: 97rem;
  }
  .primeSupport .container {
    width: 97rem;
  }
}
@media (max-width: 992px) {
  .headerImg .headerImg-container {
    width: 75rem;
  }
  .Capture .Capture-container.CaptureImg .container {
    width: 75rem;
  }
  .supremeDiv .standard-text .container {
    width: 75rem;
  }
  .leftRightDiv {
    width: 75rem;
  }
  .media-text-columns .container {
    width: 75rem;
  }
  .primeSupport .container {
    width: 75rem;
  }
}
@media (max-width: 768px) {
  .pc {
    display: none;
  }
  .mb {
    display: block;
  }
  .fade {
    opacity: 1;
    transform: translate(0, 0);
  }
  .image-wrapper {
    text-align: center;
    line-height: 0;
  }
  .ptzHeader {
    background: url(../feature/bg-ptz-header-mb.png);
    background-size: cover;
  }
  .ptzHeader .text-left-image-right {
    padding: 0 !important;
  }
  .ptzHeader .text-left-image-right .text-wrapper {
    padding: 0 30px;
  }
  .ptzHeader .module {
    padding: 25px 0 0 0;
  }
  .ptz-possibilities {
    padding: 0 30px;
    line-height: 1.5;
  }
  .headerImg {
    padding: 40px 0;
  }
  .headerImg .headerImg-container {
    width: 100%;
  }
  .headerImg .headerImg-container .text-wrapper {
    padding: 15px 15px 0;
  }
  .headerImg .headerImg-container .image-wrapper.hdcLogo {
    padding: 15px 0;
  }
  .headerImg .headerImg-container .image-wrapper.hdcLogo img {
    width: 60%;
  }
  .Capture .Capture-container.CaptureImg {
    padding: 40px 0;
  }
  .Capture .Capture-container.CaptureImg .container {
    width: 100%;
  }
  .cta-block .button-inline {
    display: inline;
  }
  .cta-block .button-inline .btn {
    max-width: 100%;
    min-width: 200px;
  }
  .supremeDiv {
    position: static;
  }
  .supremeDiv .module {
    padding: 0;
  }
  .supremeDiv .standard-text {
    position: static;
    bottom: 0;
    padding: 40px 0;
  }
  .supremeDiv .standard-text .supremeDivText {
    width: 100%;
    padding: 0 10px;
    margin: 0 auto;
  }
  .supremeDiv .standard-text .supremeDivText h2 {
    text-align: left;
  }
  .supremeDiv .standard-text .supremeDivText .inner-content p {
    text-align: left;
  }
  .supremeDiv .standard-text .container {
    width: 100%;
  }
  .leftRightDiv {
    width: 100%;
  }
  .leftRightDiv .text-left-image-right {
    width: 100%;
    padding-right: 30px;
    padding-left: 30px;
  }
  .leftRightDiv .text-left-image-right .text-wrapper {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 15px;
  }
  .leftRightDiv .text-left-image-right .text-wrapper .inner-content .btn {
    max-width: 100%;
    min-width: 200px;
  }
  .leftRightDiv .text-left-image-right .image-wrapper {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 15px;
  }
  .leftRightDiv .text-right-image-left {
    width: 100%;
    padding-right: 30px;
    padding-left: 30px;
  }
  .leftRightDiv .text-right-image-left .text-wrapper {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 15px;
  }
  .leftRightDiv .text-right-image-left .image-wrapper {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 15px;
  }
  .media-text-columns .container {
    width: 100%;
  }
  .media-text-columns .container .bt50 {
    margin-bottom: 50px;
  }
  .media-text-columns .container .media-container {
    width: 100%;
    padding-right: 30px;
    padding-left: 30px;
  }
  .media-text-columns .container .text-center .inner-content {
    margin-bottom: 5px;
    padding: 0 0 5px;
  }
  .media-text-columns .container .columns-container {
    width: 100%;
  }
  .media-text-columns .container .columns-container.columns-container-two .text-column {
    width: 100% ;
    padding-right: 30px;
    padding-left: 30px;
    padding-bottom: 50px;
  }
  .media-text-columns .container .columns-container.columns-container-two .text-column .inner-content p {
    text-align: left;
  }
  .media-text-columns .container .columns-container.columns-container-three .text-column {
    width: 100%;
    padding-right: 30px;
    padding-left: 30px;
    padding-bottom: 50px;
  }
  .media-text-columns .container .columns-container.columns-container-three .text-column .text-column-image picture.icon {
    width: 21.3333vw;
  }
  .media-text-columns .container .columns-container.columns-container-three .text-column .text-column-image picture img {
    width: 100%;
  }
  .media-text-columns .container .columns-container.columns-container-three .text-column .inner-content p {
    text-align: left;
  }
  .media-text-columns .container .columns-container.columns-container-four .text-column {
    width: 100%;
    padding-right: 30px;
    padding-left: 30px;
    padding-bottom: 50px;
  }
  .media-text-columns .container .columns-container.columns-container-four .text-column .inner-content p {
    text-align: left;
  }
  .primeSupport {
    position: relative;
    background: url(../feature/bg-PrimeSupport.jpg) no-repeat;
    background-size: 100% 100%;
  }
  .primeSupport .container {
    width: 100%;
    height: 100%;
    margin: 0 auto;
  }
  .primeSupport .container .primeSupportDiv {
    width: 100%;
    padding-right: 30px;
    padding-left: 30px;
  }
  .primeSupport .container .primeSupportDiv .primeSupportText {
    padding: 20px 0;
  }
  .primeSupport .container .primeSupportDiv .primeSupportText h3 {
    margin-bottom: 1.5rem;
  }
  .primeSupport .container .primeSupportDiv .primeSupportText p {
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 1.2rem;
  }
  .primeSupport .container .primeSupportImg {
    position: static;
    top: auto;
    transform: none;
    width: 100%;
  }
}