.pro_ny {
  width: 100%;
  float: left;
  margin-top: 0px;
}

.pro_ny_1 {
  width: 100%;
  margin: auto;
}

/* 确保面包屑导航的p标签宽度铺满整个屏幕 */
.jscl_ny_pro_t {
  width: 100%;
  padding: 0;
  box-sizing: border-box;
  background: #f5f5f5;
}

.jscl_ny_pro_t p {
  width: 100%;
  margin: 0;
  margin-left: 5vw;

  padding: 0;
}

.jscl_ny_pro_t {
  height: 70px;
  line-height: 70px;
  border-bottom: 1px solid #eee;
  margin-bottom: 30px;
  overflow: hidden;
}

.pro_nyc_commt_l {
  width: 85vw;
  margin: auto;
}

.pro_ny_l {
  float: left;
  width: 250px;
}

.pro_ny_l h1 {
  height: 60px;
  line-height: 60px;
  text-align: center;
  font-size: 24px;
  background: #3d95f2;
  color: #fff;
}

.cd-accordion-menu {
  width: 100%;
  /* background-color: #f3f9fc; */
  /* max-width: 600px; */
  background: #414141;
  /* margin: 4em auto; */
  /* box-shadow: 0 4px 40px #70ac76; */
}

.cd-accordion-menu ul {
  /* by default hide all sub menus */
  display: none;
}

.cd-accordion-menu li {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.cd-accordion-menu input[type=checkbox] {
  /* hide native checkbox */
  position: absolute;
  opacity: 0;
}

.cd-accordion-menu label,
.cd-accordion-menu a {
  position: relative;
  display: block;
  padding: 10px;
  /* background: #000; */
  background: #f3f9fc;
  /* color: #ffffff; */
  color: #000;
  font-size: 16px;
}

/* .cd-accordion-menu a{border-bottom:1px solid #666} */
.no-touch .cd-accordion-menu label:hover,
.no-touch .cd-accordion-menu a:hover {
  color: #5298fc;
}

.cd-accordion-menu label::before,
.cd-accordion-menu label::after,
.cd-accordion-menu a::after {
  /* icons */
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}

.cd-accordion-menu label {
  cursor: pointer;
}

.cd-accordion-menu label::before,
.cd-accordion-menu label::after {
  background-image: url(../fonts/cd-icons.svg);
  background-repeat: no-repeat;
}

.cd-accordion-menu label::before {
  /* arrow icon */
  left: 18px;
  background-position: 0 0;
  -webkit-transform: translateY(-50%) rotate(-90deg);
  -moz-transform: translateY(-50%) rotate(-90deg);
  -ms-transform: translateY(-50%) rotate(-90deg);
  -o-transform: translateY(-50%) rotate(-90deg);
  transform: translateY(-50%) rotate(-90deg);
}

.cd-accordion-menu label::after {
  /* folder icons */
  left: 41px;
  background-position: -16px 0;
}

.cd-accordion-menu a::after {
  /* image icon */
  left: 36px;
  background: url(../fonts/cd-icons.svg) no-repeat -48px 0;
}

.cd-accordion-menu input[type=checkbox]:checked+label::before {
  /* rotate arrow */
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}

.cd-accordion-menu input[type=checkbox]:checked+label::after {
  /* show open folder icon if item is checked */
  background-position: -32px 0;
}

.cd-accordion-menu input[type=checkbox]:checked+label+ul,
.cd-accordion-menu input[type=checkbox]:checked+label:nth-of-type(n)+ul {
  /* use label:nth-of-type(n) to fix a bug on safari (<= 8.0.8) with multiple adjacent-sibling selectors*/
  /* show children when item is checked */
  display: block;
}

.cd-accordion-menu ul label,
.cd-accordion-menu ul a {
  background: #35383d;
  box-shadow: inset 0 -1px #41444a;
  /* padding-left: 82px; */
}

.no-touch .cd-accordion-menu ul label:hover,
.no-touch .cd-accordion-menu ul a:hover {
  background: #3c3f45;
}

.cd-accordion-menu>li:last-of-type>label,
.cd-accordion-menu>li:last-of-type>a,
.cd-accordion-menu>li>ul>li:last-of-type label,
.cd-accordion-menu>li>ul>li:last-of-type a {
  box-shadow: none;
}

.cd-accordion-menu ul label::before {
  left: 36px;
}

.cd-accordion-menu ul label::after,
.cd-accordion-menu ul a::after {
  left: 59px;
}

.cd-accordion-menu ul ul label,
.cd-accordion-menu ul ul a {
  padding-left: 100px;
}

.cd-accordion-menu ul ul label::before {
  left: 54px;
}

.cd-accordion-menu ul ul label::after,
.cd-accordion-menu ul ul a::after {
  left: 77px;
}

.cd-accordion-menu ul ul ul label,
.cd-accordion-menu ul ul ul a {
  padding-left: 118px;
}

.cd-accordion-menu ul ul ul label::before {
  left: 72px;
}

.cd-accordion-menu ul ul ul label::after,
.cd-accordion-menu ul ul ul a::after {
  left: 95px;
}

@media only screen and (min-width: 600px) {

  .cd-accordion-menu label,
  .cd-accordion-menu a {
    padding: 10px;
    font-size: 16px;
  }

  .cd-accordion-menu label::before {
    left: 24px;
  }

  .cd-accordion-menu label::after {
    left: 53px;
  }

  .cd-accordion-menu ul label,
  .cd-accordion-menu ul a {
    /* padding-left: 106px; */
  }

  .cd-accordion-menu ul label::before {
    left: 48px;
  }

  .cd-accordion-menu ul label::after,
  .cd-accordion-menu ul a::after {
    left: 77px;
  }

  .cd-accordion-menu ul ul label,
  .cd-accordion-menu ul ul a {
    padding-left: 70px;
  }

  .cd-accordion-menu ul ul label::before {
    left: 72px;
  }

  .cd-accordion-menu ul ul label::after,
  .cd-accordion-menu ul ul a::after {
    left: 101px;
  }

  .cd-accordion-menu ul ul ul label,
  .cd-accordion-menu ul ul ul a {
    padding-left: 154px;
  }

  .cd-accordion-menu ul ul ul label::before {
    left: 96px;
  }

  .cd-accordion-menu ul ul ul label::after,
  .cd-accordion-menu ul ul ul a::after {
    left: 125px;
  }
}

.cd-accordion-menu.animated label::before {
  /* this class is used if you're using jquery to animate the accordion */
  -webkit-transition: -webkit-transform 0.3s;
  -moz-transition: -moz-transform 0.3s;
  transition: transform 0.3s;
}

.about_ny_r {
  float: right;
  width: calc(100% - 270px);
}

.about_ny_r p {
  text-align: justify;
  font-size: 16px;
  line-height: 26px;
  color: #000;
}

.tjcp {
  width: 250px;
  float: left;
  margin-top: 30px;
}

.tjcp_t {}

.tjcp_t p {
  height: 60px;
  line-height: 60px;
  text-align: center;
  font-size: 24px;
  background: #00366a;
  color: #fff;
}

.tjcp_b {}

.tjcp_b li {
  margin-bottom: 30px;
  float: left;
}

.tjcp_bm {
  height: 180px;
  float: left;
  text-align: center;
  overflow: hidden;
  position: relative;
  width: 99%;
  border: 1px solid #eee;
}

.tjcp_bm img {
  object-fit: scale-down;
  line-height: 180px;
  height: 180px;
  width: 100%;
  overflow: hidden;
}

.tjcp_b li p {
  float: left;
  width: 100%;
  background: #000;
  color: #fff;
  text-align: center;
  height: 45px;
  line-height: 45px;
}

.tjcp_b li:hover p {
  background: #00366a;
}

.lj {}

.lj_t {
  border-top: 2px solid #00366a;
  padding-top: 15px;
  margin-bottom: 15px;
}

.lj_t p {
  font-size: 30px;
  font-weight: 600;
  color: #000;
}

.lj_b {}

.lj_b p {
  font-size: 14px;
  margin-bottom: 20px;
}

.pro_ny_r1 {
  float: right;
  width: 100%;
}

.lj_b {}

.lj_b1 {}

.lj_b1 li {
  margin-bottom: 15px;
}

.lj_bt {
  height: 35px;
  line-height: 35px;
  background: #00000029;
}

.lj_bt a {}

.lj_bb {
  margin-top: 10px;
}

.lj_bb a {}

.lj_bb1 {
  margin-top: 10px;
}

.lj_bb1 p {
  background: #000;
  width: 200px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  margin-bottom: 0px;
}

.lj_bb1 p a {
  color: #fff;
}

.pro_ny_r {
  float: right;
  width: calc(100% - 270px);
}

.news_ny_r li {
  width: 100%;
  float: left;
  margin-bottom: 30px;
  border-bottom: 1px dashed #eee;
  padding-bottom: 30px;
}

.news_ny_r {
  float: right;
  width: calc(100% - 270px);
}

.jscl_ny_news li {
  width: 100%;
  float: left;
  border-bottom: 1px dashed #eee;
  margin-bottom: 30px;
  padding-bottom: 30px;
}

.jscl_ny_news_wz {
  width: 60%;
  float: left;
}

.xpro {
  float: right;
}

.xpro1 {
  float: left !important;
}

.jscl_ny_news_wz h1 {
  font-size: 24px;
  color: #000;
  margin-bottom: 15px;
  margin-top: 5px;
}

.jscl_ny_news_wz p {
  line-height: 24px;
  margin-bottom: 15px;
}

.jscl_ny_news_wz span {
  width: 130px;
  height: 40px;
  display: inline-block;
  text-align: center;
  line-height: 40px;
  color: #fff;
  background: #5298fc;
}

.jscl_ny_news_wz span a {
  color: #fff;
}

.jscl_ny_news_img {
  height: 210px;
  float: right;
  text-align: center;
  overflow: hidden;
  position: relative;
  width: 340px;
  border: 1px solid #eee;
}

.jscl_ny_news_img img {
  object-fit: scale-down;
  line-height: 210px;
  height: 210px;
  width: 100%;
  overflow: hidden;
}

.xwbt {
  text-align: center;
  border-bottom: 1px solid #0000001f;
  padding-bottom: 20px;
  margin-bottom: 30px;
}

.xwbt h1 {
  color: #000;
  margin-bottom: 10px;
  text-transform: uppercase;
  font-weight: 600;
}

.xwbt img {
  width: auto;
  margin-left: 5px;
  margin-right: 5px;
}

.xwsx {
  width: 100%;
  float: left;
  border-top: 1px solid #0000001f;
  margin-top: 30px;
  padding-top: 30px;
  margin-bottom: 30px;
}

.xwsx_l {
  width: 50%;
  float: left;
  font-weight: 600;
}

.xwsx_r {
  width: 50%;
  float: right;
  text-align: right;
  font-weight: 600;
}

.pro_ny_r li {
  float: left;
  position: relative;
  margin-right: 22px;
  margin-bottom: 20px;
  width: 290px;
  border: 1px solid #eee;
}

.pro_ny_r li:nth-of-type(3) {
  float: right;
  margin-right: 0px;
}

.pro_ny_r li:nth-of-type(6) {
  float: right;
  margin-right: 0px;
}

.pro_ny_r li:nth-of-type(9) {
  float: right;
  margin-right: 0px;
}

.pro_ny_rimg {
  height: 290px;
  float: left;
  text-align: center;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.pro_ny_rimg img {
  object-fit: scale-down;
  line-height: 290px;
  height: 290px;
  width: 100%;
  overflow: hidden;
}

.pro_ny_rwz {
  position: absolute;
  width: 100%;
  float: left;
  bottom: 0;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #000000;
}

#window {
  margin: -35px auto 30px;
  border-radius: 6px;
  /* background: #fff; */
  width: 100%;
  position: relative;
  float: right;
}

#header {
  background: #e3e5e9;
  height: 33px;
  padding-left: 18px;
}

#header .circle {
  background: #9fa2a8;
  border-radius: 50%;
  float: left;
  width: 12px;
  height: 12px;
  margin-right: 6px;
  margin-top: 11px;
}

.thumbs {
  /* padding:10px 50px 30px 70px; */
}

.thumbs p,
.thumbs p.floating-thumb {
  background: #e3e5e9;
  width: 155px;
  height: 60px;
  margin: 30px 30px 0 0;
  border-radius: 4px;
  float: left;
  padding-top: 121px;
}

.floating-thumb {
  background: #e3e5e9;
  width: 155px;
  height: 60px;
  border-radius: 4px;
  float: left;
  padding-top: 121px;
  position: absolute;
  top: 156px;
  left: 70px;
  display: none;
}

.floating-thumb.animate {
  width: 303px;
  height: 80px;
  margin-top: 20px;
  padding-top: 326px;
  top: 146px;
  left: 186px;
  -webkit-transition: all 400ms cubic-bezier(0, .93, .33, .99);
  -moz-transition: all 400ms cubic-bezier(0, .93, .33, .99);
  -ms-transition: all 400ms cubic-bezier(0, .93, .33, .99);
  -o-transition: all 400ms cubic-bezier(0, .93, .33, .99);
  transition: all 400mscubic-bezier(0, .93, .33, .99);
}

.thumbs p span,
p.floating-thumb span {
  display: block;
  height: 10px;
  margin: 10px 20px;
  background: #d2d4d9;
  border-radius: 2px;
}

.thumbs p span.short,
p.floating-thumb span.short {
  width: 50px;
}

.thumbs p:hover {
  background: #dfe0e5;
  cursor: pointer;
  -webkit-transition: all 100ms ease-out;
  -moz-transition: all 100ms ease-out;
  -ms-transition: all 100ms ease-out;
  -o-transition: all 100ms ease-out;
  transition: all 100ms ease-out;

}

#headline {
  /* padding:39px 50px 0px 70px; */
}

#headline p {}

#headline p.short {
  width: 220px;
}

#grid-selector {
  width: 100%;
  float: right;
  margin-bottom: 20px;
}

#viewCarousel {
  background: #9fa2a8;
  width: 20px;
  height: 20px;
  float: right;
  border-radius: 1px;
}

#viewCarousel:hover {
  cursor: pointer;
}

#viewCarousel:hover,
#viewGrid:hover p {
  cursor: pointer;
  background: #3d95f2;
}

#viewCarousel.active,
#viewGrid.active p {
  color: #5298fc;
}

#viewGrid {
  width: 22px;
  height: 20px;
  float: right;
  margin-top: -1px;
  margin-right: 5px;
}

#viewGrid p {
  background: #e3e5e9;
  width: 9px;
  height: 9px;
  float: right;
  border-radius: 1px;
  margin: 1px;
}

#viewGrid.active p,
#viewCarousel.active {
  background: #5298fc;
}

#carousel {}

#carousel .innerCarousel {

  width: calc(100%) !important;

  float: right;
}

.innerCarousel {}

.innerCarousel li {
  width: 100%;
  border: none;
  border-bottom: 1px solid #eee;
  padding-bottom: 20px;
}

.xtjia {
  width: calc(100% - 380px);
  float: right;
}

.xtjia h1 {
  font-size: 24px;
  color: #000;
  margin-bottom: 15px;
  margin-top: 5px;
}

.xtjia p {
  line-height: 24px;
  margin-bottom: 15px;
}

.xtjia span {
  width: 130px;
  height: 40px;
  display: inline-block;
  text-align: center;
  line-height: 40px;
  color: #fff;
  background: #5298fc;
}

.xtjia span a {
  color: #fff;
}

.xtjia_img {
  height: 210px;
  float: left;
  text-align: center;
  overflow: hidden;
  position: relative;
  width: 340px;
  border: 1px solid #eee;
}

.xtjia_img img {
  object-fit: scale-down;
  line-height: 210px;
  height: 210px;
  width: 100%;
  overflow: hidden;
}

#carousel .innerCarousel div {
  /* width:	337px; */
  /* height:448px; */
  /* text-align:center; */
  /* float:left; */
}

#carousel .innerCarousel div p {
  /* background: #e3e5e9; */
  /* width: 220px; */
  /* height: 73px; */
  /* margin: 30px auto 0 auto; */
  /* border-radius: 4px; */
  /* padding-top: 300px; */
  /* margin-top: 38px; */
  /* -webkit-transition: all 300ms cubic-bezier(0,.93,.33,.99); */
  -moz-transition: all 300ms cubic-bezier(0, .93, .33, .99);
  -ms-transition: all 300ms cubic-bezier(0, .93, .33, .99);
  -o-transition: all 300ms cubic-bezier(0, .93, .33, .99);
  /* transition: all 300ms cubic-bezier(0,.93,.33,.99); */
}

#carousel .innerCarousel div p:hover {
  cursor: pointer;
}

#carousel .innerCarousel div p.current:hover {
  cursor: normal;
}

#carousel .innerCarousel div p.current {
  width: 303px;
  height: 80px;
  margin-top: 20px;
  padding-top: 326px;
  -webkit-transition: all 300ms cubic-bezier(0, .93, .33, .99);
  -moz-transition: all 300ms cubic-bezier(0, .93, .33, .99);
  -ms-transition: all 300ms cubic-bezier(0, .93, .33, .99);
  -o-transition: all 300ms cubic-bezier(0, .93, .33, .99);
  transition: all 300ms cubic-bezier(0, .93, .33, .99);
}

#carousel .innerCarousel span,
p.floating-thumb.animate span {
  /* height:10px; */
  /* display:block; */
  /* margin:10px 30px; */
  /* height:12px; */
  /* background:#d2d4d9; */
  /* border-radius:3px; */
}

#carousel .innerCarousel span.short,
p.floating-thumb.animate span.short {
  width: 170px;
}

.title {
  position: absolute;
  top: 152px;
  left: 0;
  width: 100%;
  height: 60px;
  overflow: hidden;
  -webkit-transition: all 400ms cubic-bezier(0, .93, .33, .99) 120ms;
  -moz-transition: all 400ms cubic-bezier(0, .93, .33, .99) 120ms;
  -ms-transition: all 400ms cubic-bezier(0, .93, .33, .99) 120ms;
  -o-transition: all 400ms cubic-bezier(0, .93, .33, .99) 120ms;
  transition: all 400ms cubic-bezier(0, .93, .33, .99) 120ms;
}

.pro_lb {
  width: 100%;
  float: left;
  /* border-top: 2px solid #00366a; */
  padding-top: 20px;
}

.pro_lb h1 {
  color: #000;
  margin-bottom: 10px;
}

.pro_lb p {
  line-height: 30px;
  font-size: 14px;
  color: #000;
}

.bf {
  position: absolute;
  left: 40%;
  top: 40%;
}

.bf img {}

@media screen and (max-width: 64rem) {
  #window {
    /* margin: 30px auto 30px; */
    border-radius: 6px;
    background: #fff;
    width: 100%;
    /* height: 620px; */
    /* overflow: hidden; */
    position: relative;
  }

  #grid-selector {
    width: 100%;
    float: right;
    margin-bottom: 20px;
    margin-top: 30px;
  }

  #carousel .innerCarousel {
    width: 100% !important;
    float: left;
  }

  .xtjia_img {
    height: 210px;
    float: left;
    text-align: center;
    overflow: hidden;
    position: relative;
    width: 100%;
    border: 1px solid #eee;
  }

  .xtjia {
    width: 100%;
    float: left;
    margin-top: 20px;
  }
}

.fyc {
  width: 820px;
  float: left;
  /* background: #fff; */
  margin-top: 0px;
}

.fy {
  width: 100%;
  margin-bottom: 1%;
  margin-top: 1%;
  float: left;
  /* padding-left: 20px; */
}

.fy a {
  max-width: INITIAL;
  min-width: 2%;
  height: 10%;
  border: 1px solid #eee;
  border-radius: 0.5rem;
  float: left;
  margin: 0 0.5%;
  text-align: center;
  padding: 0 1%;
  transition: 0.5s;
  display: block;
  font-size: 1.4rem;
  font-size: 1.1rem\9;
  line-height: 2.5rem;
  font-size: 14px;
  text-decoration: none;
  color: #696969;
  transition: 0.5s;
}

.fy a:hover {
  transition: 0.5s;
  border: 1px solid #db0918;
  background: #db0918;
  color: #fff;
}

.fy .cpb {
  width: 2%;
  height: 10%;
  border: 1px solid #eee;
  border-radius: 0.5rem;
  float: left;
  margin: 0 0.5%;
  text-align: center;
  padding: 0 1%;
  font-size: 1.4rem;
  font-size: 1.1rem\9;
  line-height: 2.5rem;
  font-size: 14px;
  text-decoration: none;
  color: #696969;
  transition: 0.5s;
  border: 1px solid #FD9700;
  background: #FD9700;
  color: #fff;
}

@media only screen and (max-width: 48em) {
  .fy a {
    padding: 0 3%;
    max-width: initial;
  }

  .fy .cpb {
    padding: 0 3%;
  }

}

@media only screen and (max-width: 40em) {
  .fy a {
    padding: 0 2%;
    width: auto;
  }

  .fy .cpb {
    padding: 0 3.4%;
  }
}

.fy .btnGo {
  width: 10%;
  height: 10%;
  border: 1px solid #eee;
  border-radius: 0.5rem;
  float: left;
  margin: 0 0.5%;
  text-align: center;
  transition: 0.5s;
  display: block;
  font-size: 1.4rem;
  font-size: 1.1rem\9;
  line-height: 2.5rem;
  font-size: 14px;
  text-decoration: none;
  color: #696969;
  transition: 0.5s;
  background: #fff;
  cursor: pointer;
}

.fy .inputbox {
  width: 5% !important;
  height: 2.5rem;
  border: 1px solid #eee;
  border-radius: 0.5rem;
  float: left;
  margin: 0 0.5%;
  text-align: center;
  transition: 0.5s;
  display: block;
  font-size: 1.4rem;
  font-size: 1.1rem\9;
  line-height: 2.5rem;
  font-size: 14px;
  text-decoration: none;
  color: #696969;
  transition: 0.5s;
  background: #fff;
}

#fy2 {
  display: none
}

@media only screen and (max-width: 40em) {
  .fy .inputbox {
    display: none
  }

  .fy .btnGo {
    display: none
  }
}

@media screen and (max-width: 64rem) {
  .pro_ny_1 {
    width: 95%;
    margin: auto;
  }

  .about_ny_r {
    float: right;
    width: 100%;
  }

  .pro_ny_l {
    float: left;
    width: 100%;

  }

  .product_de {
    display: flex;
    flex-direction: column;
  }

  .tjcp {
    width: 100%;
    float: left;
    margin-top: 30px;
    margin-bottom: 30px;
  }

  .pro_ny_r {
    float: right;
    width: 100%;
  }

  .news_ny_r {
    float: left;
    width: 100%;
  }

  .jscl_ny_news_wz {
    width: 100%;
    float: left;
  }

  .jscl_ny_news_img {
    height: 210px;
    float: right;
    text-align: center;
    overflow: hidden;
    position: relative;
    width: 100%;
    border: 1px solid #eee;
  }

  .fyc {
    width: 100%;
    float: left;
    /* background: #fff; */
    margin-top: 0px;
  }

  .pro_ny_r li {
    float: left;
    position: relative;
    margin-right: 0px;
    margin-bottom: 20px;
    width: 100%;
    border: 1px solid #eee;
  }

  .pro_ny_r1 {
    float: left;
    width: 100%;
  }
}

:root {
  --mil-deep-blue: #1a365f;
  --mil-khaki: #c19a6b;
  --mil-steel-gray: #5d6d7e;
  --mil-dark-gray: #2c3e50;
  --mil-light-gray: #ecf0f1;
}

.kmain table th {
  color: var(--mil-deep-blue);
}

.mil-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.mil-header {
  background: linear-gradient(135deg, var(--mil-deep-blue) 0%, var(--mil-dark-gray) 100%);
  color: white;
  padding: 40px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.mil-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(45deg,
      rgba(255, 255, 255, 0.05),
      rgba(255, 255, 255, 0.05) 10px,
      rgba(255, 255, 255, 0.1) 10px,
      rgba(255, 255, 255, 0.1) 20px);
}

.mil-title {
  font-size: 2.5rem;
  margin-bottom: 15px;
  position: relative;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.mil-subtitle {
  font-size: 1.3rem;
  font-weight: 300;
  max-width: 800px;
  margin: 0 auto 30px;
  position: relative;
}

.mil-meta {
  display: flex;
  justify-content: center;
  gap: 20px;
  font-size: 0.9rem;
  opacity: 0.9;
  position: relative;
}

.mil-section {
  padding: 60px 0;
  background-color: white;
}

.mil-section-alt {
  background-color: var(--mil-light-gray);
}

.mil-section-title {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 40px;
  color: var(--mil-deep-blue);
  position: relative;
}

.mil-section-title::after {
  content: "";
  display: block;
  width: 80px;
  height: 4px;
  background: var(--mil-khaki);
  margin: 15px auto 0;
}

.mil-core-facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
}

.mil-core-text {
  font-size: 1.1rem;
  line-height: 1.8;
}

.mil-core-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
  margin-top: 30px;
}

.mil-card {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid rgba(193, 154, 107, 0.3);
}

.mil-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

.mil-card-header {
  background: var(--mil-deep-blue);
  color: white;
  padding: 15px 20px;
  font-size: 1.2rem;
}

.mil-card-body {
  padding: 20px;
}

.mil-card-body p {
  margin-bottom: 15px;
}

.mil-card-body p:last-child {
  margin-bottom: 0;
}

.mil-evolution-list {
  list-style-type: none;
  padding: 0;
  margin: 0 0 30px 0;
}

.mil-evolution-item {
  background: white;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(193, 154, 107, 0.3);
  margin-bottom: 20px;
  position: relative;
  padding-left: 60px;
}

.mil-evolution-item::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 25px;
  height: 25px;
  background: var(--mil-deep-blue);
  border: 3px solid var(--mil-khaki);
  border-radius: 50%;
}

.mil-evolution-year {
  font-size: 1.2rem;
  color: var(--mil-deep-blue);
  margin-bottom: 8px;
  font-weight: 600;
}

.mil-tech-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.mil-tech-table th {
  background-color: var(--mil-deep-blue);
  color: white;
  padding: 15px;
  text-align: left;
}

.mil-tech-table td {
  padding: 15px;
  border-bottom: 1px solid #ddd;
}

.mil-tech-table tr:nth-child(even) {
  background-color: #f9f9f9;
}

.mil-tech-table tr:hover {
  background-color: rgba(193, 154, 107, 0.1);
}

.mil-expert-analysis {
  max-width: 800px;
  margin: 0 auto;
}

.mil-expert-quote {
  background: linear-gradient(135deg, rgba(26, 54, 95, 0.05) 0%, rgba(193, 154, 107, 0.05) 100%);
  border-left: 5px solid var(--mil-khaki);
  padding: 30px;
  margin: 30px 0;
  position: relative;
  font-style: italic;
  font-size: 1.1rem;
}

.mil-expert-quote::before {
  content: '"';
  position: absolute;
  top: -20px;
  left: 10px;
  font-size: 5rem;
  color: rgba(193, 154, 107, 0.2);
  font-family: Georgia, serif;
}

.mil-expert-source {
  text-align: right;
  font-weight: 600;
  color: var(--mil-deep-blue);
  margin-top: 15px;
  font-style: normal;
}

.mil-military-significance {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.mil-significance-item {
  background: white;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(193, 154, 107, 0.3);
}

.mil-significance-title {
  font-size: 1.3rem;
  color: var(--mil-deep-blue);
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}

.mil-significance-title::before {
  content: "•";
  color: var(--mil-khaki);
  font-size: 2rem;
  margin-right: 10px;
}

.mil-patent {
  background: linear-gradient(135deg, rgba(26, 54, 95, 0.03) 0%, rgba(193, 154, 107, 0.03) 100%);
  padding: 30px;
  border-radius: 8px;
  margin: 40px 0;
  border: 1px dashed var(--mil-khaki);
}

.mil-patent-title {
  font-size: 1.4rem;
  color: var(--mil-deep-blue);
  margin-bottom: 20px;
  text-align: center;
}

.mil-footer {
  background: var(--mil-dark-gray);
  color: white;
  padding: 30px 0;
  text-align: center;
  font-size: 0.9rem;
}

.mil-footer a {
  color: var(--mil-khaki);
  text-decoration: none;
}

.mil-footer a:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .mil-title {
    font-size: 2rem;
  }

  .mil-subtitle {
    font-size: 1.1rem;
  }

  .mil-section-title {
    font-size: 1.6rem;
  }

  .mil-evolution-item {
    padding: 20px 20px 20px 50px;
  }

  .mil-core-cards {
    grid-template-columns: 1fr;
  }

  .mil-military-significance {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .mil-title {
    font-size: 1.6rem;
  }

  .mil-section-title {
    font-size: 1.4rem;
  }

  .mil-meta {
    flex-direction: column;
    gap: 5px;
  }

  .mil-evolution-item {
    padding: 15px 15px 15px 40px;
  }

  .mil-evolution-item::before {
    left: 10px;
  }
}

.about-section {
  padding: 60px 0;
}

.about-section-title {
  text-align: center;
  margin-bottom: 40px;
  position: relative;
}

.about-section-title h2 {
  font-size: 32px;
  color: #0a2e5a;
  display: inline-block;
  padding-bottom: 15px;
  position: relative;
}

.about-section-title h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: #4dabf7;
  border-radius: 2px;
}

.about-story-content {
  display: flex;
  align-items: center;
  gap: 50px;
}

.about-story-text {
  flex: 1;
}

.about-story-image {
  flex: 1;
  background: #e6f0fa;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0a2e5a;
  font-weight: 600;
  font-size: 18px;
  text-align: center;
  padding: 20px;
}

.about-contact-inline {
  background: #f0f4f8;
  padding: 25px;
  border-radius: 8px;
  margin-top: 30px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.about-contact-item-inline {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: 30px;
}

.about-contact-icon-inline {
  color: #0a2e5a;
  font-size: 20px;
}

.about-contact-text-inline h4 {
  font-size: 16px;
  color: #0a2e5a;
  margin-bottom: 5px;
}

.about-contact-text-inline p,
.about-contact-text-inline a {
  font-size: 16px;
  color: #333;
  text-decoration: none;
}

.about-contact-text-inline a:hover {
  color: #3a8bc8;
  text-decoration: underline;
}

.about-mission-vision {
  background-color: #f0f4f8;
}

.about-mission-vision-content {
  display: flex;
  gap: 50px;
}

.about-mission,
.about-vision {
  flex: 1;
  background: white;
  padding: 40px;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
}

.about-mission:hover,
.about-vision:hover {
  transform: translateY(-10px);
}

.about-mission h3,
.about-vision h3 {
  font-size: 24px;
  color: #0a2e5a;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

.about-mission h3::before,
.about-vision h3::before {
  content: '';
  display: inline-block;
  width: 30px;
  height: 3px;
  background: #4dabf7;
  margin-right: 15px;
}

.about-quote {
  font-style: italic;
  background: #f8f9fa;
  padding: 20px;
  border-left: 4px solid #4dabf7;
  margin: 20px 0;
  border-radius: 0 4px 4px 0;
}

.about-advantages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.about-advantage-card {
  background: white;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.about-advantage-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.about-advantage-icon {
  font-size: 40px;
  color: #4dabf7;
  margin-bottom: 20px;
}

.about-advantage-card h3 {
  font-size: 22px;
  color: #0a2e5a;
  margin-bottom: 15px;
}

.about-cta-section {
  background: linear-gradient(135deg, #0a2e5a 0%, #1a4b8c 100%);
  color: white;
  text-align: center;
  padding: 60px 0;
}

.about-cta-section h2 {
  font-size: 36px;
  margin-bottom: 20px;
}

.about-cta-section p {
  max-width: 700px;
  margin: 0 auto 30px;
  font-size: 18px;
}

.about-btn-light {
  background: white;
  color: #0a2e5a;
}

.about-btn-light:hover {
  background: #f0f4f8;
}

/* Contact Information Styles */
.about-contact-info {
  background: #0a192f;
  color: #a8b2d1;
  padding: 60px 0;
}

.about-contact-container {
  display: flex;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.about-contact-details {
  flex: 1;
}

.about-contact-details h3 {
  font-size: 24px;
  color: white;
  margin-bottom: 30px;
  position: relative;
  padding-bottom: 15px;
}

.about-contact-details h3::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 3px;
  background: #4dabf7;
}

.about-contact-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 25px;
}

.about-contact-icon {
  font-size: 24px;
  color: #4dabf7;
  margin-right: 15px;
  min-width: 30px;
}

.about-contact-text {
  flex: 1;
}

.about-contact-text h4 {
  color: white;
  margin-bottom: 5px;
  font-size: 18px;
}

.about-contact-text p {
  font-size: 16px;
  line-height: 1.6;
}

.about-contact-text a {
  color: #4dabf7;
  text-decoration: none;
  transition: all 0.3s ease;
}

.about-contact-text a:hover {
  color: #3a8bc8;
  text-decoration: underline;
}

.about-map-container {
  flex: 1;
  padding-left: 50px;
}

.about-map-frame {
  height: 300px;
  background: #1a2a4a;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 18px;
  text-align: center;
  padding: 20px;
}

.about-footer {
  background: #071021;
  color: #8892b0;
  padding: 30px 0;
  text-align: center;
  font-size: 14px;
}

.about-footer-content {
  max-width: 800px;
  margin: 0 auto;
}

.about-copyright {
  margin-top: 20px;
}

@media (max-width: 768px) {
  .about-header-content {
    flex-direction: column;
    text-align: center;
  }

  .about-nav ul {
    margin-top: 20px;
    justify-content: center;
    flex-wrap: wrap;
  }

  .about-nav ul li {
    margin: 10px;
  }

  .about-hero {
    height: 250px;
  }

  .about-hero h1 {
    font-size: 32px;
  }

  .about-story-content,
  .about-mission-vision-content {
    flex-direction: column;
  }

  .about-section-title h2 {
    font-size: 28px;
  }

  .about-contact-container {
    flex-direction: column;
  }

  .about-map-container {
    padding-left: 0;
    margin-top: 40px;
  }

  .about-contact-inline {
    flex-direction: column;
    align-items: flex-start;
  }

  .about-contact-item-inline {
    margin-bottom: 15px;
  }
}