@import url("common.css");
@import url("layout.css");

/****************** [공통] 문서 전체 h2 h3 h4 h5 h6, blockqouet, p, hr 등등 ******************/
/*문서 전체*/
.blank{
  height: 100vh;
  width: 100%;
}
.container {
  padding-bottom: 100px;
  min-height: calc(100vh - 200px);
}
.container h3 {
  width: 100%;
  max-width: 1200px;
  height: 240px;
  line-height: 240px;
  text-align: center;
  margin: 0 auto;
  font-size: 2.6rem;
  opacity: 1;
  transition: .5s;
  position: relative;
}
.container h3.active{
  opacity: 1;
}
section{
  background-color: #fff;
}
.section_group{
  background-color: #fff;
  z-index: 1;
  position: relative;
}
.h3_summary{
  color:#aaa;
  font-size: 1rem;
  line-height: 30px;
  margin-top: -90px;
  font-weight: 500;
}
.container h4 {
  font-size: 1.6rem;
  background-image: url(/assets/svg/fav.svg);
  background-repeat: no-repeat;
  background-size: 16px;
  background-position: 0 0;
  padding-top: 30px;
  margin-bottom: 30px;
  white-space: pre-line;
}
.container h5 {
  font-weight: 700;
  font-size: 1.3rem;
  margin-bottom: 15px;
  white-space: pre-line;
}
.container h6 {
  white-space: pre-line;
  font-weight: 700;
  font-size: 1.2rem;
  margin-bottom: 15px;
  color: #121212;
}
.container h6 hr {
  height: 14px;
  width: 2px;
  background-color: #121212;
  border: 0;
  display: inline-block;
  margin-right: 10px;
}
.container blockquote {
  width: 100%;
  margin-bottom: 0;
}
.container blockquote p {
  font-size: 1.2rem;
  line-height: 170%;
  margin-bottom: 15px;
  font-weight: 500;
  word-break: keep-all; /* 한글 단어는 유지 */
  overflow-wrap: break-word; /* 영어 단어는 필요 시 줄바꿈 */
  white-space: normal;
}
.container blockquote img {
  border-radius: 5px;
  margin-top: 5px;
  width: 100%;
}
.container blockquote img.block_img_cover {
  object-fit: cover;
}
.container blockquote img.block_img_contain {
  object-fit: contain;
}
.container p.dot {
  color: #0c4887;
  padding-left: 10px;
  margin-bottom: 0;
}
.container p.dot span {
  border: 0;
  width: 4px;
  height: 4px;
  background-color: #0c4887;
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  border-radius: 3px;
}
.container hr{
  margin: 0px auto;
  max-width: 1200px;
  width: 100%;
  border: 0;
  height: 1px;
  background-color: #ddd;
}

.tab_black{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 15px;
  margin-top: 15px;
}

.tab_black button{
  background-color: #121212;
  color:#fff;
  border: 0;
  padding: 15px 0;
  border-radius: 5px;
  font-size: 1.2rem;
}
.nodata{
  text-align: center;
  line-height: 56px;
  color:#999;
  font-size: 1rem;
}
/****************** 상단 hero 시작 ******************/
.hero {
  height: 100vh;
  overflow: hidden;
  /* position:sticky; */
  top: 0;
  z-index: 0;
}
.hero_overlay {
  position: absolute;
  background-color: #00000010;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center; /* 가로 중앙 정렬 */
  align-items: center; /* 세로 중앙 정렬 */
  flex-wrap: wrap;
  z-index: 1;
}
.hero_img {
  object-fit: cover;
  object-position: 50% 50%;
  height: 100vh;
  width: 100%;
  animation: slowScale 10s linear forwards;
}
@keyframes slowScale {
  0% {
      transform: scale(1);
  }
  100% {
      transform: scale(1.2);
  }
}
.hero h2 {
  font-size: 3rem;
  height: 145px;
  color: #fff;
  text-align: center;
  margin: 0 auto;
}
.hero_inner {
  width: 1200px;
}

/*상단 탭 디자인*/
.hero_tab_group { 
  margin: 0 auto;
  width: 700px;
  display: flex;
  gap: 2px;
  border-radius: 5px;
  overflow: hidden;
}
.hero_tab_group button {
  background-color: #12121250;
}
.hero_tab_group button:hover {
  background-color: #12121270;
}
.hero_tab_group button.tab_active {
  background-color: #FF4713;
}
.hero_tab_group button {
  width: 100%;
  height: 56px;
  background-color: #00000060;
  color: #ffffff;
  border: 0;
  font-weight: 400;
  transition: .5s;
  font-size: 1.4rem;
  backdrop-filter: blur(10px);
}
.hero_tab_group button:hover{
  background-color: #f9f9f940;
}
.hero_tab_group button.tab_active {
  background-color: #FF4713;
  font-weight: 700;
}

/*본문 탭 디자인*/
.section_tab_group { 
  margin: 0 auto 0 auto;
  padding-top: 100px;
  width: 600px;
  display: flex;
  gap: 10px;
  overflow: hidden;
}
.section_tab_group button:hover {
  background-color: #12121270;
}
.section_tab_group button.tab_active {
  border-bottom: 1px solid #FF4713;
  color: #FF4713;
  font-weight: 600;
}
.section_tab_group button {
  width: 100%;
  height: 66px;
  color: #aaa;
  border: 0;
  background-color: transparent;
  border-bottom: 1px solid #aaa;
  font-weight: 400;
  transition: .5s;
  font-size: 1.4rem;
}
.section_tab_group button:hover{
  background-color: #f9f9f940;
}


.section_tab_group.type2{ 
  margin: 0 auto 70px auto!important;
  max-width: 700px;
  width: 100%;
  display: flex;
  gap: 10px;
  overflow: hidden;
  padding-top: 0;
}
.section_tab_group.type2 button:hover {
  background-color: #12121270;
}
.section_tab_group.type2 button.tab_active {
  border: 1px solid #FF4713;
  color: #FF4713;
  font-weight: 600;
}
.section_tab_group.type2 button.tab_blue {
  border: 1px solid #227dcd;
  background-color: #227dcd;
  font-weight: 600;
  color:#fff;
}
.section_tab_group.type2 button {
  width: 100%;
  height: 46px;
  color: #aaa;
  border: 0;
  background-color: transparent;
  border: 1px solid #aaa;
  font-weight: 400;
  transition: .5s;
  font-size: 1.4rem;
}
.section_tab_group.type2 button:hover{
  background-color: #f9f9f940;
}
.section_tab_group.type2 button.tab_blue:hover{
  background-color: #227dcd99;
  border: 0px solid #227dcd95;
}


/*상단 로케이션*/
.hero_location {
  position: absolute;
  right: 40px;
  bottom: 40px;
  display: flex;
  gap: 30px;
}
.hero_location button {
  background-color: transparent;
  border: 0;
  color: #f9f9f9;
  font-weight: 500;
  vertical-align: middle;
  font-size: 1.4rem;
  height: 36px;
}
.hero_location button.home {
  background-color: #f9f9f9;
  mask-image: url("/assets/svg/fav.svg");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: 50% 50%;
  -webkit-mask-image: url("/assets/svg/fav.svg");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: 50% 50%;
  width: 20px;
  height: 36px;
}
.hero_location button.dep_2 {
  font-weight: 700;
}
.hero_location hr {
  display: inline-block;
  border: 0;
  background-color: #f9f9f9;
  width: 10px;
  height: 2px;
  vertical-align: middle;
  margin-top: 17px;
}






/******************[공통] section, part, grid  영역 ******************/
.section {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 100px 0px;
  background-color: #fff;
}
.part {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
.part_type_2 {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 50px;
}
.text_group_blue{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
.text_group_blue_div{
  background-color: #e8f2fb;
  color: #0c4887;
  border-radius: 5px;
  padding: 30px 30px;
}
.text_group_blue_div ul{
  margin-bottom: 0;
}
.text_group_blue_div h5{
  margin-bottom: 5px;
}
.text_group_blue_div p{
  margin-bottom: 0!important;
  font-size: 1.1rem;
  line-height: 170%;
  word-break: keep-all;
  overflow-wrap: break-word;
  white-space: normal;
}
.text_group_blue_div ul li p {
  font-size: 1.1rem;
  margin-bottom: 10px!important;
}
.text_group_blue_div ul li:last-child p{
  margin-bottom: 0px!important;
}
.text_group_red{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
.text_group_red_div{
  background-color: #FF471325;
  color: #FF4713;  
  border-radius: 5px;
  padding: 30px 30px;
}
.text_group_red_div p{
  margin-bottom: 0;
  font-size: 1.3rem;
  line-height: 170%;
  word-break: keep-all;
  overflow-wrap: break-word;
  white-space: normal;
  margin-bottom: 0!important;
  text-align: center;
  font-weight: 700!important;
}
.text_group_gray_div{
  background-color: #F5F6FA;
  color: #227DCD;  
  border-radius: 5px;
  padding: 30px 30px;
}
.text_group_gray_div p{
  margin-bottom: 0;
  font-size: 1.1rem;
  line-height: 170%;
  word-break: keep-all;
  overflow-wrap: break-word;
  white-space: normal;
  margin-bottom: 0!important;
  text-align: center;
  font-weight: 700!important;
}
.text_group_gray_div.co_000 *{
  color:#000
}


/****************** motto 영역 ******************/
.motto {
  width: 100%;
  height: 500px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
.motto_img {
  width: 100%;
  height: 100%;
  max-width: 1600px;
  object-fit: cover;
  object-position: 50% 100%;
  transform: scale(1);
  transition: 1s;
  margin: 0 auto;
  opacity: .5;
}
.motto_active .motto_img{
  transform: scale(1);
  opacity: 1;
  filter: brightness(100%); 
  animation: slowMove 3s ease  forwards;
  
}
@keyframes slowMove {
  0% {
    object-position: 50% 100%;
  }
  100% {
    object-position: 50% 50%;
  }
}
.motto_overlay {
  position: absolute;
  width: 100%;
  max-width: 1200px;
  height: 120px;
  left: calc(50% - 600px);
  top: calc(50% - 60px);
  right: 0;
  bottom: 0;
  color: #fff;
  font-size: 2.4rem;
  font-weight: 600;
  text-align: center;
  z-index: 2;
  transform: scale(.8);
  transition: 1s;
  opacity: 0;
}
.motto_active .motto_overlay {
  transform: scale(1);
  opacity: 1;
  transition: 1s;
}
.motto_overlay p{
  width: 100%;
  margin-bottom: 0;
  line-height: 60px;
  opacity: 0;
  transition: .5s;
  transform: translateY(30px);
  font-size: 2rem;
  white-space: pre-line;
}
.motto_overlay.opacity0{
  opacity: 0;
}
.motto_overlay br{
  display: block;
  display: none;
}
.motto_active .motto_overlay p:nth-child(1){
  opacity: 1;
  transition-delay: .7s;
  transform: translateY(0px);
}
.motto_active .motto_overlay p:nth-child(2){
  opacity: 1;
  transition-delay: 0.8s;
  transform: translateY(0px);
}

/****************** 연혁 ******************/
.history_group{
  background-color: #eeeff6;
  border-radius: 5px;
  padding: 30px 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.history_dl {
  display: grid;
  grid-template-columns: 100px 1fr;
  margin-bottom: 0;
}
.history_dl dt {
  color: #227dcd;
  font-size: 1.1rem;
}
.history_dl dt hr{
  background-color: #227dcd;
  display: inline-block;
  width: 4px;
  height: 4px;
  border: 0;
  vertical-align: middle;
  margin-right: 10px;
}
.history_dl dd {
  margin-bottom: 20px;
  font-weight: 600;
  font-size: 1.1rem;
  margin-left: 0;
}
.history_dl dd:last-child {
  margin-bottom: 0px;
}

/****************** 사업장소개 ******************/
.location_group{
  margin-top: 40px;
}
.location_group h5{
  margin-bottom: 5px;
}
.map_group {
  width: 100%;
  min-height: 850px;
  background-color: #F5F6FA;
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 15px;
  margin-top: 0px;
  position: relative;
}
.map_graphic{
  width: 420px;
  height: 950px;
  margin-top: 50px;
  background-image: url(/assets/svg/koreamap.svg);
  background-position: 50% 50px;
  background-repeat: no-repeat;
  margin: 0 auto;
  position: relative;
}
.map_graphic2{
  width: 700px;
  height: 1050px;
  margin-top: 50px;
  background-image: url(/assets/svg/earth.svg);
  background-position: 50% 50px;
  background-repeat: no-repeat;
  margin: 0 auto;
  position: relative;
}
.map_google{
  position: absolute;
  top: 350px;
  width: 100%;
  max-width: 830px;
  display: grid;
  gap: 30px;
  grid-template-columns: 1fr 1fr;
  left: calc(50% - 415px);
}
.map_google > div{
  box-shadow: 0 30px 30px #00000015;
  border-radius: 10px;
}
.google{
  width: 100%;
  min-width:100px;
  height: 200px;
  background-color: #000;
  border-radius: 10px 10px 0 0;
}
.map {
  width: 100%;
  height: 100%;
  background-color: #12121210;
}
.site_address{
  border-radius: 0 0 10px 10px;
  background-color: #ffffff;
  padding: 20px;
}
.contact_table {
  display: grid;
  grid-template-columns: 40px 1fr;
  border-top: 1px solid #121212;
}
.contact_table dd {
  padding-left: 0px;
  margin-left: 0;
}
.contact_table dt {
  text-align: center;
}
.contact_table dt,
.contact_table dd {
  vertical-align: middle;
  border-bottom: 1px solid #ddd;
  line-height: 30px;
  padding: 5px 0;
  font-size: .9rem;
}
.contact_table dd a {
  font-weight: 500;
  border-bottom: 2px solid #121212;
  color: #121212;
}
.site_img{
  border-radius: 5px;
  aspect-ratio: 1;
  object-fit: cover;
}
#site1{
  position: absolute;
  left: -75px;
  top: 150px;
  transform: scale(.8);
}
#site2{
  position: absolute;
  left: 85px;
  top: 185px;
  transform: scale(.8);
}
#oversea1{
  position: absolute;
  left: 375px;
  top: 375px;
  transform: scale(.8);
}
#oversea2{
  position: absolute;
  left: 25px;
  top: 295px;
  transform: scale(.8);
}

/******************제품 연혁******************/
.history_line_up {
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  background-image: url("data:image/svg+xml,%3Csvg width='1102' height='13' viewBox='0 0 1102 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline y1='6.5' x2='1100' y2='6.5' stroke='%23227DCD'/%3E%3Cpath d='M1102 6.50001L1092.25 12.1292L1092.25 0.870849L1102 6.50001Z' fill='%23227DCD'/%3E%3C/svg%3E%0A");
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-color: #e8f2fb;
  padding: 0 50px;
  gap: 0;
  display: grid;
  border-radius: 5px;
}
.history_line_up_div {
  color: #0c4887;
  border-radius: 5px;
  padding: 30px 30px;
  text-align: center;
  background-image: url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='7.5' cy='7.5' r='7.5' fill='%23227DCD'/%3E%3C/svg%3E%0A");
  background-position: 50% 50%;
  background-repeat: no-repeat;
  position: relative;
  cursor: pointer;
}
.history_line_up_div:hover .over-pop {
  opacity: 1;
  transform: translateY(0px);
}
.over-pop {
  width: 170px;
  height: 170px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
  overflow: hidden;
  padding: 15px;
  position: absolute;
  top: 80px;
  left: calc(50% - 85px);
  opacity: 0;
  transition: 0.3s;
  transform: translateY(20px);
}
.over-pop img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}
.line_h5{
  margin-bottom: 20px;
}
.line_p{
  margin-bottom: 0;
}


/****************** RnD******************/
.rnd_img_group{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap:40px;
}
img.rnd_img {
  border-radius: 5px 5px 0 0;
  width: 100%;
}
div.rnd_title {
  width: 100%;
  background-color: #227dcd;
  border-radius: 0 0 5px 5px;
  padding: 10px 20px;
  color: #fff;
  font-size: 1.1rem;
  text-align: center;
  font-weight: 700;
  margin-bottom: 15px;
}

/****************** MDI ******************/
.performance_img_list{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 20px;
}



/****************** 게시판 종류 /******************/

/*리스트형태*/
.board_rnd {
  list-style: none; /* 점(불릿) 제거 */
  margin: 0; /* 외부 여백 제거 */
  padding: 0; /* 내부 여백 제거 */
  width: 100%;
}
.board_rnd li {
  width: 100%;
  background-color: #f5f6fa;
  display: grid;
  grid-template-columns: 140px 120px 100px 200px 1fr;
  margin-bottom: 10px;
  gap: 10px;
  border-radius: 5px;
  transition: background-color 0.5s;
  place-items: center;
  padding: 10px 0;
}
.board_rnd li.col3{
  grid-template-columns: 140px 1fr 1fr;
}
.board_rnd li.col4{
  grid-template-columns: 100px 120px 230px 1fr;
}
.board_rnd li.col4_1{
  grid-template-columns: 100px 120px 1fr 1fr;
}
.board_rnd li:hover {
  background-color: #dfe4f5;
}
.board_rnd.link{
  cursor: pointer;
}

.board_rnd li p,
.board_rnd li strong {
  display: inline-block;
  font-size: 1rem;
  line-height: 170%;
  text-align: center;
  margin-bottom: 0;
  font-weight: 500;
  width: 100%;
}
.board_rnd li strong {
  text-align: left;
  padding-left:20px;
  padding-right:20px;
  width: 100%;

}
.board_rnd li a{
  font-weight: 700;
}
.board_rnd li p * {
  vertical-align: middle;
}
.board_rnd li.board_thead {
  background-color: #ebeefa;
  cursor: auto;
  font-size: 1rem;
}

/*갤러리형태*/
.board_tech {
  list-style: none; /* 점(불릿) 제거 */
  margin: 0;
  padding: 0; /* 내부 여백 제거 */
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 20px;
}
.board_tech li {
  width: 100%;
  background-color: #f9f9f9;
  margin-bottom: 10px;
  border-radius: 5px;
  aspect-ratio: 1;
  border: 1px solid #eee;
  padding: 30px 30px;
  position: relative;
  transition: 0.3s;
  cursor: pointer;
  margin-bottom: 0;
}
.board_tech li .bg {
  width: 140px;
  height: 140px;
  background-color: #ddd;
  mask-image: url("/assets/svg/fav.svg");
  mask-size: cover;
  mask-repeat: no-repeat;
  mask-position: 50% 50%;
  -webkit-mask-image: url("/assets/svg/fav.svg");
  -webkit-mask-size: cover;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: 50% 50%;
  position: absolute;
  right: 0;
  bottom: 0;
  transition: background-color 0.3s;
}
.board_tech li:hover {
  border: 1px solid #ff471320;
  background-color: #ff471310;
}
.board_tech li:hover .bg {
  background-color: #ff4713;
}
.board_tech li p,
.board_tech li strong {
  font-size: 1.1rem;
  line-height: 150%;
}
.board_tech li p{
  font-weight: 700;
}
.board_tech li strong{
  font-weight: 500;
  font-size: 1rem;
    color:#999
  }
.board_tech li a {
  position: absolute;
  bottom: 30px;
}
.board_tech li i.ico{
  background-color: #121212;
  vertical-align: middle;
}
.board_tech li:hover i.ico{
  background-color: #ff4713;
  vertical-align: middle;
}

.board_tech li:hover > * {
  color: #ff4713;
}

.board_tech_button_group {
  margin-top: -20px;
}
.board_tech_button_group button {
  height: 36px;
  width: 80px;
  font-size: 1rem;
  border: 0;
  border-radius: 5px;
}
.board_tech_button_group button.active {
  background-color: #121212;
  color: #fff;
}

.detail_group{
  background-color: #fff;
  padding: 40px;
  border-radius: 10px;
  border: 1px solid #ddd;
}
.detail_group blockquote{
  white-space: pre-line;
}
.block_answer{
  background-color: #f9f9f9;
  padding:  30px;
}
.detail_img{
  max-width: 500px;
  display: inline-block;
}


/*검색, 검색은 공통으로 씁니다.*/
.search {
  width: 580px;
}
.search_inner {
  border-radius: 5px;
  padding: 20px;
  background-color: #ebeefa;
  display: grid;
  grid-template-columns: 1fr 80px;
}
.search_inner input[type="text"] {
  border-radius: 5px 0 0 5px;
  border-right: 0;
  line-height: 46px;
  padding: 0 15px;
  font-weight: 500;
}
.search_inner button {
  border-radius: 0 5px 5px 0;
  border: 0;
  background-color: #121212;
  color: #fff;
  font-weight: 500;
}

.search.data {
  width: 580px;
  margin-top: 30px;
}
.search.data .search_inner {
  background-color: #eee;
  grid-template-columns: 120px 1fr 80px;
}
.search.data .search_inner select {
  border-radius: 5px 0 0 5px;
  border-right: 0;
}
.search.data .search_inner input[type="text"] {
  border-radius: 0;
  border-left: 0;
}

/*페이네이션*/
.pagination {
  display: flex;
  list-style: none;
  list-style: none; /* 점(불릿) 제거 */
  margin: 40px auto;
  padding: 0; /* 내부 여백 제거 */
  justify-content: center;
}
.pagination li {
  margin: 0 5px;
}
.pagination a {
  display: block;
  min-width: 46px;
  padding: 0 15px;
  height: 46px;
  line-height: 46px;
  text-decoration: none;
  color: #333;
  border: 1px solid #ddd;
  border-radius: 5px;
  transition: background-color 0.3s, color 0.3s;
  text-align: center;
  font-weight: 500;
  cursor: pointer;
}
.pagination a:hover {
  background-color: #eee;
  color: #0c4887;
  border-color: #ddd;
}
.pagination .active a {
  background-color: #ebeefa;
  color: #0c4887;
  border-color: #0c4887;
  font-weight: 700;
}

.pagination .disabled a {
  color: #bbb;
  pointer-events: none;
  border-color: #ddd;
  background: #f9f9f9;
}

.pagination.red a:hover {
  background-color: #eee;
  color: #ff4713;
  border-color: #ddd;
}
.pagination.red .active a {
  background-color: #ff471310;
  color: #ff4713;
  border-color: #ff4713;
  font-weight: 700;
}

/* 상세페이지 */
/*상세 버튼*/
.detail_product_img{
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 5px;
  object-fit: contain;
  padding: 20px;
  margin-bottom: 20px;
  margin-top: -10px;
  background-color: #fff;
}
.detail_button_group button {
  height: 46px;
  width: auto;
  min-width: 180px;
  font-size: 1.1rem;
  border: 0;
  border-radius: 5px;
  background-color: #eee;
  color: #121212;
  font-weight: 500;
  padding: 0 15px;
}
.detail_download{
  background-color: #121212;
  color:#f9f9f9;
  height: 46px;
  width: 100%;
  border-radius: 5px;
  font-weight: 500;

}
/*디테일 테이블*/
.detail_table{
  width: 100%;
  border-radius: 5px;
  border-top: 2px solid #121212;
  background-color: #f9f9f9;
  margin-bottom: 10px;
}
.detail_table th{
  text-align: left;
  padding: 14px 20px;
  line-height: 150%;
  font-size: 1rem;
  border-bottom: 1px solid #aaa;
}
.detail_table td{
  text-align: left;
  padding: 14px 20px;
  line-height: 150%;
  font-size: 1rem;
  border-bottom: 1px solid #ccc;
}
.detail_table_summary{
  font-size: .9rem!important;
  color:#999999
}


/*********VOD*********/
/*VOD*/
.vod_group {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: #eee;
  margin: 20px 0;
  border-radius: 5px;
  overflow: hidden;
  position: relative;
}
.vod_group h5{
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  width: calc(100% - 40px);
  border-bottom: 1px solid #ffffff80;
  color:#fff;
  padding: 10px;
  font-size: 1.4rem;
}
.vod_group img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}
.vod_group iframe {
  width: 100%;
  height: 100%;
}
#player1,#player2{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  background-color: #12121220;
}
.vod_overlay {
  position: absolute;
  background-color: #00000020;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}
.vod_overlay h5 {
  position: absolute;
  width: calc(100% - 60px);
  border-bottom: 1px solid #f9f9f970;
  bottom: 50px;
  left: 30px;
  line-height: 170%;
  color: #f9f9f9;
  font-size: 2rem;
  padding: 10px 20px;
}
.vod_play {
  position: absolute;
  width: 60px;
  height: 60px;
  background-color: #ff4713;
  border: 0;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  vertical-align: middle;
  mask-image: url(/assets/svg/ico_play.svg);
  -webkit-mask-image: url(/assets/svg/ico_play.svg);
}
.vod_label {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 1.2rem;
  color: #fff;
  background-color: #ff4713;
  width: 140px;
  height: 46px;
  line-height: 46px;
  text-align: center;
  font-weight: 600;
}
/* 이미지 뷰 오버레이 스타일 */
body.no-scroll {
  overflow: hidden; /* 스크롤바 숨김 */
}

.image_view {
  position: fixed; /* 전체 화면을 덮도록 고정 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8); /* 반투명 검정 배경 */
  display: flex; /* 자식 요소를 중앙 정렬 */
  justify-content: center; /* 가로 중앙 정렬 */
  align-items: center; /* 세로 중앙 정렬 */
  z-index: 1000; /* 다른 요소 위에 표시 */
  visibility: hidden; /* 초기에는 숨김 */
  opacity: 0; /* 초기에는 투명 */
  transition: visibility 0s, opacity 0.3s ease-in-out; /* 부드러운 전환 효과 */
}

/* 이미지 뷰가 활성화될 때 스타일 */
.image_view.active {
  visibility: visible;
  opacity: 1;
}

/* 이미지 뷰 내부 컨테이너 스타일 */
.image_view > div {
  position: relative; /* 닫기 버튼 위치 지정을 위해 */
  background-color: white; /* 이미지 배경이 흰색인 경우 */
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  /*max-width: 840px; !* 이미지 최대 너비 800px + padding 20px*2 *!*/
  /*width: 90%; !* 화면 크기에 따라 조절 *!*/
  box-sizing: border-box; /* 패딩 포함 너비 계산 */
}

/* 이미지 스타일 */
.image_view img {
  max-width: 600px; /* 이미지 최대 너비 */
  width: 100%; /* 부모 div에 맞춰 너비 조절 */
  height: auto; /* 비율 유지 */
  display: block; /* 이미지 하단 여백 제거 */
  margin: 0 auto; /* 이미지를 div 내에서 중앙 정렬 */
}

/* 닫기 버튼 스타일 */
.image_view button {
  position: absolute; /* 이미지 뷰 내부 컨테이너 기준 */
  top: 10px; /* 상단에서 10px */
  right: 10px; /* 오른쪽에서 10px */
  background-color: #000; /* 빨간색 배경 */
  color: white;
  border: none;
  border-radius: 50px; /* 원형 버튼 */
  width: 60px;
  height: 36px;
  font-size: 1rm;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1; /* 텍스트 수직 중앙 정렬 */
  padding: 0; /* 기본 패딩 제거 */
}

.image_view button:hover {
  background-color: #d32f2f;
}

.icon_container{
  background-color: #F5F6FA;
  text-align: center;
  padding: 100px 0;
}
.icon_container img{
  max-width: 100px;
  max-height: 100px;
  margin: 0 auto;
}


/*********카탈로그 형태/*********/
.catalog_group {
  list-style: none; /* 점(불릿) 제거 */
  margin: 0;
  margin-top: 50px; /* 외부 여백 제거 */
  padding: 0; /* 내부 여백 제거 */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}
.catalog_group li {
  width: 100%;
  aspect-ratio: .9 / 1;
  background-color: #F5F6FA;
  margin-bottom: 10px;
  border-radius: 5px;
  position: relative;
  transition: 0.3s;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.catalog_group li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.catalog_label {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 1.2rem;
  color: #fff;
  background-color: #ff4713;
  width: 100px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  font-weight: 600;
}
.catalog_h5 {
  position: absolute;
  width: calc(100% - 60px);
  border-bottom: 1px solid #12121270;
  bottom: 50px;
  left: 30px;
  line-height: 170%;
  color: #121212;
  font-size: 2rem;
  padding: 10px 10px;
}



/*********문의/*********/
.contact_group {
  list-style: none; /* 점(불릿) 제거 */
  margin: 0;
  margin-top: 10px; /* 외부 여백 제거 */
  padding: 0; /* 내부 여백 제거 */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
}
.contact_group li {
  width: 100%;
  margin-bottom: 10px;
  position: relative;
  transition: 0.3s;
  cursor: pointer;
  position: relative;
  border-radius: 5px;
  overflow: hidden;
  height: 300px;
}
.contact_image {
  border-radius: 5px;
  width: 100%;
  height: 420px;
  background-color: #eee;
  position: relative;
}
.contact_ul_info {
  display: grid;
  grid-template-columns: 130px 1fr;
  padding: 25px 30px;
  position: absolute;
  bottom: 0;
  width: 100%;
  color: #fff;
}
i.contact_ico {
  position: absolute;
  width: 100%;
  height: 100%;
  mask-position: 50% 50%;
  mask-size: 46px;
  -webkit-mask-position: 50% 50%;
  -webkit-mask-size: 46px;
  background-color: #fff;
}
.contact_img {
  position: absolute;
  background-color: #eee;
  width: 100%;
  height: 100%;
}
.contact_button_group {
  grid-template-columns: 1fr 1fr;
    display: grid;
    width: 100%;
    gap: 10px;
}
.contact_button_group button {
  height: 46px;
  width: 100%;
  font-size: 1.2rem;
  border: 0;
  border-radius: 5px;
  background-color: #fff;
  color: #121212;
  font-weight: 500;
}
.contact_button_group button.active {
  background-color: #121212;
  color: #fff;
}
.contact_tel_num a {
  font-size: 2rem;
  text-align: right;
  display: block;
  font-weight: 700;
  line-height: 100%;
  color:#f9f9f9;
}
.contact_write{
  list-style: none;
  margin: 0 0 0 0;
  padding: 0;
  gap: 0px 20px;
}
.contact_write li{
  margin-bottom: 20px;
}
.contact_write li p{
  margin-bottom: 5px;
  font-size: 1rem;
  font-weight: 500;
}
.contact_write li p em{
  font-weight: 500;
  color:#ff4713;
  font-style: normal;
  position: absolute;
  margin-top: -5px;
  margin-left: 5px;
  font-size: 1.6rem;
}
.contact_write li input[type=text]{
  height: 46px;
  font-size: 1rem;
  font-weight: 500;
  padding: 0 15px;
}
.contact_write li textarea{
  padding: 15px;
  height: 300px;
  font-weight: 500;
}
.private_input_group{
  margin-bottom: 15px;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
/*********카드뉴스/*********/
.card_group {
  list-style: none; /* 점(불릿) 제거 */
  margin: 0;
  padding: 0; /* 내부 여백 제거 */
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 30px;
}
.card_group li {
  width: 100%;
  background-color: #fff;
  margin-bottom: 10px;
  border-radius: 5px;
  height: 410px;
  border: 1px solid #ddd;
  position: relative;
  transition: 0.3s;
  cursor: pointer;
  overflow: hidden;
}
.card_group li .thum {
  width: 100%;
  object-fit: cover;
  height: 200px;
  background-color: #ddd;
  margin-bottom: 20px;
}
.card_group li:hover {
  border: 1px solid #ff4713;
  background-color: #ff471310;
}
.card_group li:hover .bg {
  background-color: #ff4713;
}
.card_group li p,
.card_group li strong {
  font-size: 1.1rem;
  line-height: 150%;
  display: -webkit-box;
  -webkit-line-clamp: 4; /* 두 줄까지만 표시 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0px 20px;
}
.card_group li strong {
  -webkit-line-clamp: 2; /* 두 줄까지만 표시 */
  margin-bottom: 10px;
}
.card_group li a {
  position: absolute;
  bottom: 30px;
}
.card_group li:hover > * {
  color: #ff4713;
}


/*********리스트형태*********/
.faq_group {
  list-style: none; /* 점(불릿) 제거 */
  margin: 0; /* 외부 여백 제거 */
  padding: 0; /* 내부 여백 제거 */
  border-top: 2px solid #121212;
}
.faq_group li {
  min-height: 56px;
  width: 100%;
  border-bottom: 1px solid #dddddd;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='8' viewBox='0 0 10 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 8L9.33013 0.5H0.669873L5 8Z' fill='%23121212'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-position: calc(100% - 40px) 26px;
}
.faq_group li .question{
  display: grid;
  grid-template-columns: 80px 1fr 80px;
  gap: 0 10px ;
}
.faq_group li .answer{
  transition: .5s;
  width: 100%;
  background-color: #f6f6f6;
  padding: 20px 20px 20px 0;
  margin-top: 0;
  grid-template-columns: 80px 1fr;
  display: grid;
  gap: 10px;
  margin-bottom: 20px;
  display: none;
  opacity: 0;
  transition: opacity .3s;
  transition-delay: .5s;
}
.faq_group li .answer.active{
  display: grid;
  opacity: 1;
}
.faq_group li .answer h5{
  margin-bottom: 0;
}
.faq_group li .detail{
  white-space: pre-line;
}
.faq_group li p,
.faq_group li strong {
  display: inline-block;
  font-size: 1.1rem;
  line-height: 150%;
  padding: 15px 0;
  text-align: center;
  margin-bottom: 0;
}
.faq_group li p.num{
  font-weight: 900;
}
.faq_group li strong {
  text-align: left;
  font-weight: 500;
}
.faq_button_group {
  margin-top: -15px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  gap: 10px;
}
.faq_button_group button {
  height: 36px;
  font-size: 1rem;
  border: 0;
  border-radius: 5px;
}
.faq_button_group button.active {
  background-color: #121212;
  color: #fff;
}


/*문의 내역*/
.qna_group {
  list-style: none; /* 점(불릿) 제거 */
  margin: 0; /* 외부 여백 제거 */
  padding: 0; /* 내부 여백 제거 */
  border-top: 2px solid #121212;
}
.qna_group li .qna_group_thead{
  display: grid;
  gap: 0 10px ;
  grid-template-columns: 80px 1fr 150px 150px 150px;
}
.qna_group li {
  min-height: 56px;
  width: 100%;
  border-bottom: 1px solid #dddddd;
  cursor: pointer;
}
.qna_group li .question{
  display: grid;
  grid-template-columns: 80px 1fr 150px 150px 150px;
  gap: 0 10px ;
}
.qna_group li p,
.qna_group li strong {
  display: inline-block;
  font-size: 1.1rem;
  line-height: 150%;
  padding: 15px 0;
  text-align: center;
  margin-bottom: 0;
}
.qna_group li strong {
  text-align: left;
  white-space: nowrap;       /* 줄 바꿈 금지 */
    overflow: hidden;          /* 넘치는 내용 숨김 */
    text-overflow: ellipsis;   /* 말줄임표 (…) 표시 */
}


/*공지사항*/
.notice_group {
  list-style: none; /* 점(불릿) 제거 */
  margin: 40px 0 0 0; /* 외부 여백 제거 */
  padding: 0; /* 내부 여백 제거 */
  border-top: 2px solid #121212;
}
.notice_group li .notice_group_thead{
  display: grid;
  gap: 0 10px ;
  grid-template-columns: 80px 1fr 150px 150px;
}

.notice_group li {
  min-height: 56px;
  width: 100%;
  border-bottom: 1px solid #dddddd;
  cursor: pointer;
}
.notice_group li:hover{
  background-color: #00000009;
}
.notice_group li .question{
  display: grid;
  grid-template-columns: 80px 1fr 150px 150px;
  gap: 0 10px ;
}
.notice_group li .news{
  display: grid;
  grid-template-columns: 80px 1fr 150px;
  gap: 0 10px ;
}
.notice_group li p,
.notice_group li strong {
  display: inline-block;
  font-size: 1.2rem;
  line-height: 150%;
  padding: 15px 0;
  text-align: center;
  margin-bottom: 0;
}
.notice_group li strong {
  text-align: left;
  white-space: nowrap;       /* 줄 바꿈 금지 */
    overflow: hidden;          /* 넘치는 내용 숨김 */
    text-overflow: ellipsis;   /* 말줄임표 (…) 표시 */
}

/*채용공지*/
.re_notice_group {
  list-style: none; /* 점(불릿) 제거 */
  margin: 40px 0 0 0; /* 외부 여백 제거 */
  padding: 0; /* 내부 여백 제거 */
  border-top: 2px solid #121212;
}
.re_notice_group li .re_notice_group_thead{
  display: grid;
  gap: 0 10px ;
  grid-template-columns: 80px 1fr 150px;
}
.re_notice_group li {
  min-height: 56px;
  width: 100%;
  border-bottom: 1px solid #dddddd;
  cursor: pointer;
}
.re_notice_group li .question{
  display: grid;
  grid-template-columns: 80px 1fr 150px;
  gap: 0 10px ;
}
.re_notice_group li p,
.re_notice_group li strong {
  display: inline-block;
  font-size: 1.1rem;
  line-height: 150%;
  padding: 15px 0;
  text-align: center;
  margin-bottom: 0;
}
.re_notice_group li strong {
  text-align: left;
  white-space: nowrap;       /* 줄 바꿈 금지 */
    overflow: hidden;          /* 넘치는 내용 숨김 */
    text-overflow: ellipsis;   /* 말줄임표 (…) 표시 */
}


.major_info{
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 20px;
}
.major_info .info{
  background-color: #F5F6FA;
  min-height: 100px;
  border-radius: 5px;
  position: relative;
  display: flex;
  justify-content: center; /* 가로 중앙 정렬 */
  align-items: center; /* 세로 중앙 정렬 */
  flex-wrap: wrap;
}
.major_info .info p{
  text-align: center;
  line-height: 170%;
  font-weight: 600;
  font-size: 1.2rem;
  color:#aaa;
  margin-bottom: 0;
}
.major_info .info h6{
  text-align: center;
  line-height: 170%;
  font-weight: 700;
  font-size: 1.4rem;
  margin-bottom: 0;
}
.major_info .info h1{
  text-align: center;
  margin-bottom: 0;
  line-height: 170%;
}
.major_info .info_small{
  aspect-ratio: 1;
}
.major_info .info h5{
  color:#aaa;
  font-weight: 500;
  position: absolute;
  top: 25px;
  left: 30px;
}
.major_info .info img{
  width: 60px;
  margin: 20px auto;
  object-fit: contain;
}
.major_info .infomation{
  display: inline-block;
}


/*주소사업*/
.major_business_group{
  padding: 30px;
  border: 1px solid #FF4713;
  border-radius: 400px;
  width: 1000px;
  margin: 0 auto;
  height: 315px;
}
.major_business_group .biz{
  background-color: #FF471330;
  color: #FF4713;
  border: 1px solid #FF471310;
  display: inline-block;
  width: calc(25% + 20px);
  aspect-ratio: 1 / 1;
  border-radius: 150px;
  margin-left: -31px;
  text-align: center;
  padding: 0;
  position: relative;
}
.major_business_group .biz h5{
  font-weight: 600;
  font-size: 1.4rem;
  height: 30px;
  line-height: 30px;
  position: absolute;
  top: calc(50% - 15px);
  text-align: center;
  width: 100%;
  margin-bottom: 0;
}
.major_business_group .biz:first-child{
  margin-left: 0;
}

.major_info .infomation.site_group{
  width: calc(100% - 120px);
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  text-align: center;
  gap: 30px;
}
.major_info .infomation.site_group hr{
  height: 100%;
}
.major_info .infomation.site_group button.label{
  background-color: #FF4713;
  border: 0;
  box-shadow: none;
  color:#fff;
  width: 100%;
  height: 46px;
  border-radius: 30px;
  margin: 5px 0;
  font-weight: 700;
  font-size: 1.0rem;
}
.business_license{
  background-color: #fff;
  border: 0;
  box-shadow: none;
  font-weight: 400;
  font-size: 1.4rem;
  color:#FF4713
}
.business_license *{
  vertical-align: middle;
}


/*CEO 메세진*/
hr.bar_red{
  width: 100px;
  height: 2px;
  margin: 0 0 15px 0;
  background-color: #FF4713;
  border: 0;
}


/*기업연혁*/
.company_history{
  margin-top: 50px;
  min-height: 600px;
  text-align: center;
  position: relative;
}
.company_history i.ico{
  margin-bottom: 10px;
}
.history {
  margin-bottom: 200px;
  position: relative;
  min-height: 260px;
  opacity: .05;
  transition: 1s;
}
.history h5{
  position: absolute;
  color:#fff;
  left: 25px;
  top: 40px;
  z-index: 1;
  font-size: 1.4rem;
  transition: 1s;
}
.history hr{
  height: 100%;
  margin: 0px 0;
  background-color: #ddd;
  transition: 1s;
  transform: scaleY(0);
  transform-origin: top;
}
.company_history .history{
  width: calc(100% - 100px);
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 40px;
  margin: 0 auto 120px auto;
}
.history_img{
  filter: brightness(80%);
  margin-top: 20px;
  border-radius: 5px;
  transition: 1s;
  transform: translateY(60px);
  transition-duration: 1s;
}
.history_detail {
  padding-top: 20px;
  transition: 1s;
  transform: translateY(60px);
  transition-duration: 1s;
}
.history_detail blockquote{
  margin-bottom: 40px;
  text-align: left;
}
.history_detail h6{
  margin-bottom: 10px;
  line-height: 100%;
  color:#ff4713;
  font-size: 1.4rem;
}
.history_detail ul{
  margin-left:20px;
}
.history_detail ul li strong{
  display: inline-block;
  width: 25px;
}
.company_history .history_hr{
  height: 100%;
  min-height: 2717px;
  margin: 0px 0;
  background-color: #ddd;
  width: 1px;
  position: absolute;
  left: calc(50% - .5px);
  top: 0;
}
.history.active {
  opacity: 1;
}
.history.active hr{
  background-color: #ff4713;
  transform: scaleY(1);
}
/* }
.history.active h6{
  color: #FF4713;
}
.history.active .history_detail ul li strong{
  color: #FF4713;
}
.history.active .history_detail ul li::marker {
  color: #FF4713;
} */
.history.active .history_img{
  transform: translateY(0px);
}
.history.active .history_detail {
  transform: translateY(0px);
}
/*비지니스 영역*/
.global_business {
  position: relative;
}
.global_business blockquote{
  position: absolute;
  top: 100px;
  left: calc(50% - 600px);
  max-width: 620px;
  width: 100%;
  color:#fff;
  word-break: keep-all;
  overflow-wrap: break-word;
  white-space: normal;
}
.global_business .summary{
  position: absolute;
  bottom: 100px;
  right:100px;
  color:#fff;
  font-weight: 700;
}



/*제품소개*/
.equipment_merit{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  width: 100%;
  gap: 20px;
}
.merit {
  text-align: center;
}
.merit .thum{
  width: 100%;
  aspect-ratio: 1;
  background-color: #F5F6FA;
  text-align: center;
  justify-content: center; /* 가로 중앙 정렬 */
  align-items: center; /* 세로 중앙 정렬 */
  display: flex;
  margin-bottom: 15px;
  border-radius: 5px;
}
.merit img{
  max-width: 60px;
  max-height: 60px;
  object-fit: contain;
  display: inline-block;
}
.merit h6{
  color:#227DCD;
  font-size: 1.4rem;
  margin-bottom: 5px;
}
.merit p{
  color:#227DCD;
  font-size: 1.1rem;
  word-break: keep-all;
  overflow-wrap: break-word;
  white-space: normal;
}
.merit p.red{
  color: #FF4713;
}

.image_flex_group{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  width: 100%;
  gap: 20px;
}
.image_thum{
  aspect-ratio: 1;
}
.image_thum img{
  width: 100%;
}


/*투자정보*/
.fin_table{
  width: 100%;
  border-top:2px solid #121212;
  background-color: #fff;
  border-collapse: separate;   /* 중요! collapse면 간격이 사라짐 */
  border-spacing: 2px;        /* cellspacing 대체 */
  border-bottom: 2px solid #121212;
}
.fin_table a{
  color:#000000;
  border-bottom: 1px solid #333;
  font-weight: 500;
}
.fin_table thead{
  background-color: #fff;
}
.fin_table thead th{
  padding: 15px 20px;
  line-height: 150%;
  border: 2px;
  font-size: 1.2rem;
}
.fin_table tbody{
  background-color: #F2F2F2;
}
.fin_table tbody td{
  padding: 15px 20px;
  line-height: 150%;
  text-align: right;
  border: 2px;
  font-size: 1.2rem;
}
.fin_table tbody th{
  padding: 15px 20px;
  line-height: 150%;
  text-align: left;
  border: 2px;
  font-size: 1.2rem;
}
.fin_table .current{
  background-color: #E7E9EB;
}
.fin_table .non-current{
  background-color: #CCD1D7;
}
.fin_table caption{
  text-align: right;
  padding: 10px 0;
}
.fin_table td.text-left{
  text-align: left!important;
}
.fin_table td p{
  margin-bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='4' height='4' viewBox='0 0 4 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='4' height='4' fill='black'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-position: left 50%;
  padding-left: 15px;
 }



.manager_group{
  background-color: #fff;
  padding: 15px 20px 0 20px;
  border-radius: 10px;
  border: 1px solid #ddd;
  margin-top: 50px;
}
.manager_group dl{
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 10px;
  margin-bottom: 10px;
}
.manager_group dt,
.manager_group dd{
  border-bottom: 1px solid #ddd;
  width: 100%;
  margin: 0;
  font-size: 1.2rem;
  line-height: 46px;
  padding: 0 10px;
}
.manager_group dt p,
.manager_group dd p{
  margin-bottom: 0;
  font-weight: 900;
}
.manager_group a{
  color:#000000;
  border-bottom: 1px solid #333;
  font-weight: 500;
}
/*****************************************/
/*****************************************/
/*****************************************/
@media (max-width: 768px) {
  .merit h6{
    font-size: 1rem;
  }
  .merit p{
    font-size: .9rem;
  }

  .text_group_red_div p {
    margin-bottom: 0;
    font-size: 1rem;
  }
  .fin_table.resp{
  background-color: #f2f2f2;
  }
  .fin_table.resp thead{
    display: none;
  }
  .fin_table.resp tbody td{
    display: block;
    text-align: left!important;
    padding-bottom: 0;
    padding-top: 5px;
    padding-left: 20px;
  }
  .fin_table.resp tbody td:first-child{
    padding-top: 20px;
  }
  .fin_table.resp tbody td:last-child{
    padding-bottom: 20px;
  }

  .fin_table thead th,
  .fin_table thead td,
  .fin_table tbody th,
  .fin_table tbody td{
    font-size: .85rem;
    padding: 10px 3px;
  }
  .manager_group dl{
    grid-template-columns: 1fr;
  }
  .manager_group dt{
    display: block;
    border-bottom: 0px solid #eee!important;
    padding-bottom: 0!important;
    height: auto;
    line-height: 100%;
  }
  .manager_group dd{
    display: block;
    border-bottom: 1px solid #ccc!important;
    padding-top: 0!important;
    height: auto;
    line-height: 100%;
    padding-bottom: 10px;
  }
  .manager_group dt,
  .manager_group dd,
  .manager_group dt p,
  .manager_group dd p,
  .manager_group dd a{
    font-size: 1rem;
  }
  /**image size */
  #img1301{
    max-width: 240px;
  }
  #img1303{
    max-width: 300px;
    max-height: 260px;
    object-fit: cover;
    margin:0 auto;
  }
  #img1304{
    max-width: 340px;
  }
  #img2111{
    object-fit: cover;
    max-width: 400px;
    max-height: 260px;
    margin:0 auto;
  }
  #img2112{
    max-width: 400px;
    margin:0 auto;
  }
  #img2211{
    max-width: 400px;
    margin:0 auto;
  }
  #img2311{
    max-width: 250px;
    margin:0 auto;
  }
  #img2411{
    /*max-width: 250px;*/
    margin:0 auto;
  }
  #img2511{
    max-width: 400px;
    margin:0 auto;
  }
  #img3111{
    max-width: 400px;
    max-height: 260px;
    object-fit: cover;
    margin:0 auto;
  }
  #img5111{
    max-width: 400px;
    margin:0 auto;
  }
  #img5211{
    max-width: 400px;
    margin:0 auto;
  }
  .re_notice_group .num{
    display: none;
  }
  .re_notice_group li .re_notice_group_thead{
    grid-template-columns: 1fr 120px;
  }
  .re_notice_group li .question{
    grid-template-columns: 1fr 120px;
  }
  .re_notice_group li strong{
    padding-left: 15px;
  }
  .notice_group li .notice_group_thead{
    grid-template-columns: 1fr 110px 80px;
  }
  .notice_group_thead p.num{
    display: none;
  }
  .news.notice_group li .question{
    grid-template-columns: 1fr 110px 80px!important;
  }
  .pr.news.notice_group li .question{
    grid-template-columns: 1fr 1px!important;
  }
  .news .question .num{
    display: none;
  }
  .notice_group li p, .notice_group li strong{
    font-size: .9rem;
  }
  .notice_group li strong{
    padding-left: 10px;
  }
  .notice_group li{
    height: auto;
    min-height: auto;
  }
  .image_flex_group{
    grid-template-columns: 1fr 1fr;
  }

  .company_history .history_hr{
    min-height: 3000px;
    background-color: #dddddd50;
  }
  .mo_img{
    height: auto!important;
    width: 90%!important;
    margin: 0 auto;
    object-fit: fill!important;
    aspect-ratio: auto!important;
  }


  /* Container */
  .container h3 {
    font-size: 1.6rem;
    transition: none;
  }
  .container h3.scroll{
    margin-top: 146px;
  }
  .container h4 {
    font-size: 1.2rem;
  }
  .container h5 {
    font-size: 1rem;
    word-break: keep-all;
    overflow-wrap: break-word;
    white-space: normal;
  }
  .container h5.line_h5{
    margin-bottom: 5px;
  }
  .container blockquote p {
    font-size: .9rem;
  }
  .container blockquote p br {
    display: none;
  }


  /* 문서 */
  .section{
    padding: 100px 25px;
  }
  .part{
    grid-template-columns: 1fr!important;
    gap: 20px;
  }
  .part_type_2 {
    display: grid;
    grid-template-columns:1fr;
    gap: 0px;
  }
  
  /* Hero */
  /* .hero {
    height: 100dvh;
  } */
  .hero_img {
    height: 100%;
  }
  .hero_inner {
    width: 100%;
    padding: 0;
    top: 0;
  }
  .hero h2 {
    font-size: 2rem;
    height: 90px;
    position: absolute;
    top: calc(50% - 45px);
    width: 100%;
    text-align: center;
  }
  .hero_tab_group {
    width: calc(100% - 60px)!important;
    position: absolute;
    left: 30px;
    bottom: 80px;
    display: grid;
    grid-template-columns: 1fr 1fr!important;
  }
  .hero_tab_group button {
    font-size: 1rem;
    height: 42px;
    line-height: 42px;
    font-weight: 500;
  }
  .hero_tab_group button.small{
    font-size: .75rem;
  }
  .hero_location {
    display: none;
  }

  .location_group{
    margin-top: 0;
  }
  .section_tab_group.type2{
    width: calc(100% - 60px)!important;
    gap: 5px;
  }
  .section_tab_group.type2 button{
    font-size: .9rem;
    height: auto;
    padding: 10px 0;
  }
  /* Motto */
  .motto {
    height: 100vh;
  }
  .motto_active .motto_img {
    transform: scale(1);
    opacity: 1;
    filter: brightness(70%);
    animation: slowMove 10s ease forwards;
  }
  .motto_overlay {
    padding: 0px;
    left: 40px;
    right: 40px;
    bottom: 150px;
    width: calc(100% - 80px);
    text-align: left;
  }
  .motto_overlay p {
    font-size: 1.8rem;
    line-height: 170%;
    display: inline-block;
    word-break: keep-all;
    overflow-wrap: break-word;
    white-space: normal;
  }
  
  @keyframes slowMove {
    0% { object-position: 0% 50%; }
    100% { object-position: 50% 50%; }
  }
  
  /* VOD */
  .vod_group{
    height: auto;
    aspect-ratio: 1.6 / .9;
  }
  .vod_overlay{
    height: auto;
    aspect-ratio: 1.6 / .9;
  }
  .vod_group img{
    height: auto;
    aspect-ratio: 1.6 / .9;
  }
  #player1,#player2{
    height: auto;
    aspect-ratio: 1.6 / .9;
  }
  .vod_overlay h5 {
    font-size: 1.4rem;
    padding: 10px 0px;
    bottom: 10px;
    width: calc(100% - 40px);
    left: 20px;
  }
  .vod_play {
    width: 70px;
    height: 70px;
    top: calc(50% - 35px);
    left: calc(50% - 35px);
    transform: scale(.7);
  }
  .vod_label {
    transform: scale(.7);
    transform-origin: right top;
  }

  /*카탈로그*/
  .catalog_group{
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .catalog_group li{
    aspect-ratio: 1 1.2;
    height: auto;
    margin-bottom: 0;
  }
  .catalog_h5{
    bottom:10px;
    font-size: 1rem !important;
    width: calc(100% - 40px);
    left: 20px;
    padding: 10px 0;
  }
  .catalog_label{
    transform: scale(.7);
    transform-origin: right top;
  }
  
  /* Board & Tech */
  .board_tech_button_group{
    grid-template-columns: 1fr 1fr 1fr;
    display: grid;
    gap: 5px;
    width: 100%;
  }
  .board_tech_button_group button{
    width: 100%;
  }
  .board_tech {
    grid-template-columns: 1fr 1fr;
    gap: 15px;
  }
  .board_tech li {
    margin-bottom: 0;
    padding: 15px 20px;
    background-color: transparent;
  }
  .board_tech li .bg {
    z-index: -1;
    background-color: #dddddd20;
    width: 25vw;
    height: auto;
    aspect-ratio: 1;
  }
  .board_tech li:hover .bg {
    background-color: #ff471320;
  }
  .board_tech li p, 
  .board_tech li strong,
  .board_tech li a{
    z-index: 1;
  }


  /*faq*/
  .faq_button_group {
    grid-template-columns: 1fr 1fr 1fr;
    display: grid;
    gap: 5px;
    width: 100%;
  }
  .faq_button_group button {
    width: 100%;
  }
  .faq_group li{
    background-position: calc(100% - 15px) 26px;
  }
  .faq_group li .question{
    grid-template-columns: 40px 1fr 40px;
    gap: 0;
  }
  .faq_group li .answer{
    grid-template-columns: 1fr ;
    gap: 0;
  }
  .faq_group li .answer p.num{
    padding: 0 14px;
    text-align: left;
  }
  .faq_group li .answer .detail{
    padding: 15px;
  }
  .faq_group li p, .faq_group li strong{
    font-size: 1rem;
  }
  
  /* Pagination */
  .pagination {
    gap: 5px;
  }
  .pagination li {
    margin: 0;
  }
  .pagination a {
    height: 32px;
    line-height: 32px;
    padding: 0 10px;
    min-width: 32px;
    margin: 0;
  }
  
  /* Contact */
  .contact_group {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .contact_button_group {
    grid-template-columns: 1fr;
    display: grid;
    width: 100%;
    gap: 10px;
  }
  .contact_button_group button {
    width: 100%;
    font-size: 1rem;
  }
  .contact_ul_info{
    grid-template-columns: 1fr;
    padding: 15px 15px;
    bottom:0;
  }
  .contact_group li{
    height: auto;
  }
  .contact_group li h5{
    margin-bottom: 5px;
  }
  i.contact_ico {
    mask-position: 50% calc(50% - 20px);
    mask-size: 36px;
    -webkit-mask-position: 50% calc(50% - 20px);
    -webkit-mask-size: 36px;
  }
    
  .private_input_group{
    grid-template-columns: 1fr;
    gap: 15px;
  }
  .private_input_group button.red{
    width: 100%;
    height: 46px;
  }


  /*카드*/
  .card_group{
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .card_group li{
    height: auto;
  }
  .card_group li .thum{
    height: auto;
    aspect-ratio: 1 / .65;
  }


  /* Footer */
  .footer_company_info {
    display: block;
  }
  .footer_company_info div:first-child {
    margin-bottom: 30px;
  }
  .footer_menu {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .footer_menu button {
    background-color: #f9f9f930;
  }


  /*RND*/
  .board_rnd li{
    height: auto;
    padding: 20px;
    margin-bottom: 10px;
    gap: 5px;
    display: block;
  }
  .board_rnd li.board_thead{
    display: none;
  }
  .board_rnd li p.num{
    display: none;
  }
  .board_rnd li p{
    text-align: left;
    padding: 0;
    line-height: 150%;
    font-size: .9rem;
    color:#121212;
    display: block;
  }
  .board_rnd li strong{
    margin: 0!important;
  }
  .board_rnd li p:nth-child(2){
    color:#999;
  }
  .board_rnd li p:nth-child(3){
    color:#999;
  }
  .board_rnd li p.detail_link{
    display: none;
  }

  .board_rnd li p.cert,
  .board_rnd li p.cert-num{
    display: inline-block;
    color:#121212;
    font-weight: 700;
    font-size: .9rem;
    color: #999;
    line-height: 100%;
    margin: 10px 0 0 0;
  }
  .board_rnd li p.cert{
    padding-right: 6px;
    margin-right: 5px;
    border-right: 1px solid #aaa;
  }
  .board_rnd li strong{
    display: block;
    text-align: left;
    padding: 0;
    line-height: 150%;
    font-weight: 600;
    font-size: 1rem;
    margin: 10px 0;
  }
  .board_rnd li a{
    color:#000;
  }
  .rnd_img_group{
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .history_line_up{
    grid-template-columns: 1fr!important;
    background-image: none;
  }
  .history_line_up_div{
    border-bottom: 1px solid #0c488740;
    border-radius: 0;
    background-size: 7px;
    background-image: none;
  }
  .history_line_up_div:last-child{
    border-bottom: 0;
  }
  .over-pop {
    position: static;
    opacity: 1;
    transform: translateY(0);
    margin: 10px auto 0 auto;
  }
  div.rnd_title{
    font-size: 1rem;
  }


  /*history*/
  .history_group {
    grid-template-columns: 1fr;
    padding: 20px 30px;
  }
  .history_dl{
    grid-template-columns: 1fr;
    margin-bottom: 20px;
  }
  .history_dl dd{
    margin-left: 12px;
    font-size: 1rem;
  }
  .history_dl dt{
    font-size: 1rem;
  }
  .history_dl:last-child{
    margin-bottom: 0px;
  }

  /*contact*/
  .contact_table dt,
  .contact_table dd {
    font-size: 1rem;
  }

  /*map*/
  /* .map_group{
    grid-template-columns: 1fr;
  }
  .map_group img{
    width: 100%;
    object-fit: cover;
    aspect-ratio: 1 / .6;
  }
  .map{
    width: 100%;
    aspect-ratio: 1 / .6;
  } */
  .map_group{
    overflow: visible;
    /*height: 2000px;*/
  }
  .map_graphic{
    background-size: 70%;
    width: 100%;
  }
  .map_graphic2{
    width: 100%;
    background-size: 90%;
  }
  #site1{
    left: calc(50% - 100px);
    top: 100px;
    transform: scale(.6);
  }
  #site2{
    left: calc(50% - 150px);
    top: 200px;
    transform: scale(.6);
  }
  #oversea1{
    left: 155px;
    top: 145px;
    transform: scale(.6);
  }
  #oversea2{
    left: -35px;
    top: 110px;
    transform: scale(.6);
  }
  .map_google{
    grid-template-columns: 1fr;
    left: 20px;
    width: calc(100% - 40px);
  }
  .map_google2{
    top: 400px!important;
  }
  .site_address{
    height: auto!important;
  }
  .site_address .part{
    grid-template-columns: 1fr!important;
  }
  .site_img{
    width: 100%;
    aspect-ratio: 1.6 / .9;
  }

  /*search*/
  .search,
  .search.data{
    width: 100%;
  }
  .search.data .search_inner{
    grid-template-columns: 70px 1fr 70px;
  }
  .text_group_blue_div{
    padding: 20px;
  }
  .text_group_blue_div p{
    font-size: 1rem;
  }
  .text_group_blue{
    grid-template-columns: 1fr;
  }
  .search.data .search_inner select{
    background-position: calc(100% - 5px) 50%;
    background-color: #fff;
  }

  /*detail*/
  .detail_group{
    border: 0;
    padding: 0;
  }
  .detail_table tr{
    width: calc(100vw - 80px);
    display: grid;
    grid-template-columns: .5fr 1fr;
  }
  .detail_table th,
  .detail_table td{
    padding: 15px 15px;
  }
  .detail_button_group button{
    min-width: auto;
    height: 46px;
    line-height: 46px;
    margin-bottom: 20px;
    margin-top: -50px;
    width: calc(100% - 0px);
    font-size: 1rem;
  }

  /*ID 값으로 지정*/
  #about img{
    aspect-ratio: 1.6 / 1;
    height: auto!important;
  }
  #about blockquote img{
    margin-bottom: 60px;
  }
  #mdi-line-up .part_type_2{
    position: relative;
    gap: 30px;
  }
  #mdi-line-up .part{
    gap: 0;
  }
  #uf-line-up .part_type_2{
    position: relative;
    gap: 30px;
  }
  #news_detail .part{
    gap: 0;
  }
  .performance_img_list{
    grid-template-columns: 1fr 1fr;
  }


  /*콘텐츠 공통*/
  .section_tab_group{
    width: calc(100% - 30px);
    gap: 0px;
    padding-top: 100px;
  }
  .section_tab_group.scroll{
    position: fixed;
    top:70px;
    background-color: #fff;
    z-index: 100;
    width: 100%!important;
    padding-top: 0px;
    box-shadow: 0 10px 10px #00000010;
  }
  .section_tab_group.type2.scroll{
    gap: 0;
    margin-bottom: 0!important;
  }
  .section_tab_group.type2.scroll button{
    border: 1px solid #ffffff;
  }
  .section_tab_group.type2.scroll button.tab_active{
    background-color: #FF4713;
    color:#fff;
  }
  .section_tab_group button{
    font-size: .95rem;
  }
  /*주요정보*/
  .major_info{
    grid-template-columns: 1fr;
  }
  .major_info .info{
    aspect-ratio: 1 / 1;
  }
  .major_info .info h1{
    font-size: 1.4rem;
  }
  .major_info .info p{
    font-size: .8rem;
  }
  .business_license{
    width: 100%;
    text-align: right;
  }


  /*주요사업*/
  .major_business_group{
    width: 260px;
    height: auto;
  }
  .major_business_group .biz{
    width: calc(100%);
    margin: 0;
    margin-top: -40px;
  }
  .major_business_group .biz:first-child{
    margin-top: 0;
  }

  /*연혁*/
  .company_history .history{
    width: 100%;
    gap: 20px;
    grid-template-columns: 1fr;
  }

  /*글로벌 프로젝트*/
  .block_img_cover{
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
  }
  .global_business blockquote{
    left: 30px;
    width: calc(100% - 60px);
  }
  .global_business .summary{
    left: 30px;
  }

  /*설비 장정*/
  .equipment_merit{
    grid-template-columns: 1fr 1fr!important;
  }

  #vod > div{
    grid-template-columns: 1fr !important;
  }
  .catalog_group{
    grid-template-columns: 1fr;
  }

  .mo_company{
    object-position: calc(50% - 150px) 50%;
  }
  a.top.top_visible{
    z-index: 99;
    bottom:-54px;
  }
  .map_group{
    min-height: 1750px;
    padding-bottom: 300px
  }
  .map_group.map_oversea{
    min-height: 1350px;
    padding-bottom: 300px
  }
  .map_google{
    grid-template-columns: 1fr;
    left: 20px;
    width: calc(100% - 40px);
  }
  .google{
    aspect-ratio: 16 / 9;
    height: auto;
  }

  .tab_black{
    grid-template-columns: 1fr;
  }
}



@media (min-width: 769px) and (max-width:990px) {
  .map_group{
    min-height: 2000px;
    
  }
  .map_google{
    grid-template-columns: 1fr;
    left: 40px;
    width: calc(100% - 80px);
  }
  .google{
    aspect-ratio: 16 / 9;
    height: auto;
  }
}






/*****************************************/
/*****************************************/
/*****************************************/
@media (min-width: 769px) and (max-width:1300px) {
    /* Container */
    .line_h5{
      font-size: .9rem!important;
    }
    .hero_tab_group{
      transform: scale(.9);
      width: calc(100% - 60px)!important;
    }
    
    /* 문서 */
    .section{
      padding: 100px 50px;
    }
    .part.mobile_grid_1 {
      grid-template-columns: 1fr;
    }
    .global_business img{
      aspect-ratio: 1 / .7;
      object-fit: cover;
    }
    .global_business blockquote{
      left: 60px;
      width: calc(100% - 80px);
    }
    /* Motto */
    .motto_overlay{
      left: 30px;
      width: calc(100% - 60px);
      top: calc(50% - 40px);
    }
    .motto_overlay p {
      line-height: 50px;
      height: 50px;
      font-size: 1.6rem;
    }
    
    /* VOD */

  
    /*카탈로그*/
    .catalog_group{
      grid-template-columns: 1fr 1fr;
    }
    
    /* Board & Tech */
    .board_tech{
      grid-template-columns: 1fr 1fr 1fr;
    }
    .board_tech li {
      background-color: transparent;
    }
    .board_tech li .bg{
      z-index: -1;
      background-color: #dddddd20;
    }
    .board_tech li:hover .bg{
      opacity: .3;
    }
    .board_tech_button_group{
      grid-template-columns: 1fr 1fr 1fr;
      display: grid;
      gap: 10px;
    }
    .board_tech_button_group button{
      width: 100%;
    }
    .text_group_blue_div p{
      font-size: 1rem;
    }
  
    /*faq*/
    .faq_button_group{
      grid-template-columns: 1fr 1fr 1fr;
      display: grid;
      gap: 10px;
  
    }
    
    .faq_button_group button{
      width: 100%;
    }
    #faq .part{
      grid-template-columns: 1fr;
      gap: 0;
    }
    .detail_table tr{
      width: calc(100vw - 430px);
      display: grid;
      grid-template-columns: .5fr 1fr;
    }
    .detail_table th,
    .detail_table td{
      padding: 15px 15px;
    }
    /* Pagination */
    
    
    /* Contact */
   
    #vod > div {
      grid-template-columns: 1fr !important;
  }
  
    /*카드*/
    .card_group{
      grid-template-columns: 1fr 1fr;
      gap: 20px;
    }
    .card_group li{
      height: auto;
    }
    .card_group li .thum{
      height: auto;
      aspect-ratio: 1 / .65;
    }
  
    /* Footer */
    #site_google{
      padding: 100px 0
    }
      
  
    /*RND*/
    .board_rnd li{
      grid-template-columns: 90px 100px 80px 120px 1fr;
      gap: 30px;
    }
    .board_rnd li.col3{
      grid-template-columns: 90px .6fr 1fr;
    }
  .board_rnd li.col4 {
    grid-template-columns: 80px 80px 210px 1fr;
  }
    .history_line_up{
      background-size: 90%;
    }
    .history_line_up_div{
      padding: 30px 10px
    }
  
    /*history*/
    .company_history .history{
      width: 100%;
    }
    /*contact*/
    .contact_group{
      grid-template-columns: 1fr 1fr;
      gap: 20px;
    }
    .contact_button_group{
      grid-template-columns: 1fr 1fr;
      display: grid;
      width: 100%;
      gap: 10px;
    }
    .contact_button_group button{
      width: 140px;
      font-size: 1rem;
      width: 100%;
      margin-top: 10px;
    }
    .contact_ul_info{
      grid-template-columns: 1fr;
      padding: 25px 30px;
      bottom:0;
    }
    .contact_group li{
      height: auto;
    }
    .contact_group li h5{
      text-align: right;
      margin-bottom: 5px;
    }
    i.contact_ico {
      mask-position: 50% calc(50% - 20px);
      mask-size: 36px;
      -webkit-mask-position: 50% calc(50% - 20px);
      -webkit-mask-size: 36px;
    }
   
    
  
    /*search*/
    .search{
      width: 100%;
    }
    .search.data{
      width: 100%;
    }

    /*detail*/

    /*ID 값으로 지정*/
    #news_detail .part_type_2{
      grid-template-columns: 1fr;
    }
    #board .part{
      grid-template-columns: 1fr;
      gap: 0;
    }
    .part_type_2{
      grid-template-columns: 1fr;
      gap:0;
    }
    .part{ grid-template-columns: 1fr;
      gap:0;
    }
    .container h4{
      white-space:normal;
    }
    .major_info{
      grid-template-columns: 1fr 1fr;
    }
    .major_info .info{
      aspect-ratio:1/1!important;
    }
    .major_info .info img{
      height: 80px;
    }
    .major_business_group{
      width: 100%;
      height: auto;
    }
    .major_info .infomation.site_group{
      gap:10px;
      width: calc(100% - 60px);
    }
}





/*****************************************/
/*****************************************/
/*****************************************/
/*높이 반응형*/
@media (min-height: 0px) and (max-height:800px) {
  .hero{
    height: 100vh;
  }
  .hero_img{
    height: 100%;
    transition: .5s;
  }
}