/* *********************************************** */
/* *********************************************** */
/* ********************** [3] 연구개발(R&D) */
.sub03 .flex-wr ul.flex-bx{padding-bottom: 12.1rem;}
.sub03 .flex-wr ul.flex-bx > li.fx-imgBx{height: 40rem;width: 55%}
.sub03 .flex-wr ul.flex-bx > li.fx-txtBx{width: 45%}
.sub03 .flex-wr ul.flex-bx > li.fx-txtBx p{font-size: 1.8rem}

.sub03 .icon-grid{padding-bottom: 8rem;}
.sub03 .icon-grid > li{width: 100%;height: 21.2rem;background-color: #fff;border: 1px solid #C1C1C1;text-align: center;padding: 3rem 2rem 2.4rem;cursor: pointer;}
.sub03 .icon-grid > li{
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  border-right: 0;
}
.sub03 .icon-grid > li:last-child{border-right: 1px solid #C1C1C1;}
.sub03 .icon-grid .icon{margin: 0 auto;}
.sub03 .icon-grid .active-ico{display: none}
.sub03 .icon-grid strong{display: block; font-size: 2rem;line-height: 24px;margin-top: 2rem;}

.sub03 .icon-grid > li.active{background-color: #01A661}
.sub03 .icon-grid > li.active strong{color: #fff}
.sub03 .icon-grid > li.active .basic-ico{display: none}
.sub03 .icon-grid > li.active .active-ico{display: block;}

.sub03 .icon-grid > li:hover{background-color: #01A661}
.sub03 .icon-grid > li:hover strong{color: #fff}
.sub03 .icon-grid > li:hover .basic-ico{display: none}
.sub03 .icon-grid > li:hover .active-ico{display: block;}

.sub03 .icon-grid,
.sub03 .icon-grid > li,
.sub03 .icon-grid .icon,
.sub03 .icon-grid strong{transition: .5s cubic-bezier(0.075, 0.82, 0.165, 1);}

.sub03 .icon-grid{width: 1440px;}
.sub03 .icon-grid.scroll{position:fixed;top: 0;}
.sub03 .icon-grid.scroll .icon{display: none;}
.sub03 .icon-grid.scroll > li{height: 100%;padding: 2.5rem 2rem}
.sub03 .icon-grid.scroll strong{margin-top: 0;}

.sub03 .icon-grid.scroll:hover .icon{display: none;}
.sub03 .icon-grid.scroll > li.active .active-ico{display: none;}

.sub03 .icon-grid.top{top: 13.5rem;}
.sub03 .icon-grid > li.color{background-color: #01A661}

.sub03 .flex2-wr{}
.sub03 .flex2-wr ul.flex2-bx{display: flex;align-items: flex-start;justify-content: space-between;}
.sub03 .flex2-wr ul.flex2-bx:not(:last-child){padding-bottom: 6rem;}
.sub03 .flex2-wr ul.flex2-bx > li{height: 34rem; box-shadow: 3px 3px 3px #ece9e9eb;}
.sub03 .flex2-wr ul.flex2-bx > li.leftBx{width: 26%;}
.sub03 .flex2-wr ul.flex2-bx > li.leftBx .fx2-img{width: 100%;height: 100%;object-fit: cover;object-position: center;}
.sub03 .flex2-wr ul.flex2-bx > li.rightBx{width: 74%; border: 1px solid #D9D9D9;padding: 4.2rem 5rem;}
.sub03 .flex2-wr ul.flex2-bx > li.rightBx strong, .sub03 .flex2-wr ul.flex2-bx > li.rightBx p{margin-top: 2rem;}
.sub03 .flex2-wr ul.flex2-bx > li.rightBx strong{display: block;font-size: 2rem;line-height: 20px;}
.sub03 .flex2-wr ul.flex2-bx > li.rightBx p{font-size: 1.8rem;line-height: 32px;}
.sub03 .flex2-wr ul.flex2-bx > li.rightBx p .point2{font-size: 1.4rem;font-weight: 400;color: #7FCC78;line-height: 32px;}

@media all and (max-width:1500px) {
  .sub03 .icon-grid{width: 100%;}
  .sub03 .icon-grid.scroll{left: 0}
  .sub03 .flex2-wr ul.flex2-bx > li{height: 38rem}
  .sub03 .flex2-wr ul.flex2-bx > li.rightBx{padding: 3rem 3.5rem}
}
@media all and (max-width:768px) {
  .sub03 .icon-grid.scroll, .sub03 .icon-grid.top{top: 8.5rem;padding-bottom: 0;}
  .sub03 .flex-wr ul.flex-bx{padding-bottom: 8rem;flex-direction: column;}
  .sub03 .flex-wr ul.flex-bx > li.fx-imgBx{height: 24rem;width: 100%}
  .sub03 .flex-wr ul.flex-bx > li.fx-txtBx{width: 100%;margin-top: 2rem}
  .sub03 .flex-wr ul.flex-bx > li.fx-txtBx p{font-size: 1.6rem;line-height: 26px;margin-top: 1rem}
  .sub03 .icon-grid{padding-bottom: 3rem}
  .sub03 .icon-grid > li{height: 100%;padding: 1rem}
  .sub03 .icon-grid .icon{width: 5rem}
  .sub03 .icon-grid strong{font-size: 1.6rem;margin-top: 1rem}

  .flex-wr ul.flex-bx > li{width: 100%}
  .flex-wr ul.flex-bx > li.fx-txtBx{margin-left: 0;margin-top: 3rem}
  .flex-wr ul.flex-bx > li.fx-txtBx strong{font-size: 2rem;line-height: 28px;}
  .flex-wr ul.flex-bx > li.fx-txtBx p{font-size: 1.6rem;line-height: 26px;}

  .sub03 .flex2-wr ul.flex2-bx{flex-direction: column;}
  .sub03 .flex2-wr ul.flex2-bx > li{height: 100%;}
  .sub03 .flex2-wr ul.flex2-bx > li.leftBx{width: 100%;height: 30rem;border-radius: 2rem 2rem 0 0}
  .sub03 .flex2-wr ul.flex2-bx > li.rightBx{padding: 3rem;width: 100%;border-radius: 0 0 2rem 2rem}
  .sub03 .flex2-wr ul.flex2-bx > li.rightBx .icon{width: 7rem}
  .sub03 .flex2-wr ul.flex2-bx > li.rightBx strong{font-size: 1.8rem;line-height: 26px;}
  .sub03 .flex2-wr ul.flex2-bx > li.rightBx p{font-size: 1.6rem;line-height: 26px;margin-top: 1rem}
  .sub03 .flex2-wr ul.flex2-bx > li.rightBx p br.br_pc{display: none}

  .sub03 .flex2-wr ul.flex2-bx > li.rightBx p .point2{line-height: 21px;display: block;margin-top: .5rem}
}
@media all and (max-width:640px) {
  .sub03 .icon-grid{padding-bottom: 3rem}
  .sub03 .icon-grid.scroll, .sub03 .icon-grid.top{position:relative;padding-bottom: 3rem;top: inherit;}
  .sub03 .icon-grid.scroll .icon{display: block;}
  .sub03 .icon-grid.scroll > li{padding: 1rem;top: inherit;}
}
@media all and (max-width:460px) {
  .sub03 .flex-wr ul.flex-bx{padding-bottom: 5rem}
  .sub03 .icon-grid.scroll > li{padding: 1rem}
  .sub03 .icon-grid .icon{width: 4rem}
  .sub03 .icon-grid strong{font-size: 1.4rem;line-height: 17px;}
  .sub03 .flex2-wr ul.flex2-bx > li.leftBx{height: 28rem}
  .sub03 .flex2-wr ul.flex2-bx > li.rightBx{padding: 2.5rem 2rem}
  .sub03 .flex2-wr ul.flex2-bx > li.rightBx .icon{width: 4.5rem}
  .sub03 .flex2-wr ul.flex2-bx > li.rightBx strong{margin-top: .5rem}
  .flex-wr ul.flex-bx > li.fx-txtBx p br.br_pc{display: none}
}