/* 안전경영 탭 */
#content .title_area .tab_menu{width: 840px; display: flex; gap: 30px;
    position: relative; bottom: 0; left: 50%; transform: translateX(-50%); margin-top: 150px;}
#content .title_area .tab_menu a{width: 260px; height: 60px; border: 1px solid #ccc;
    border-radius: 30px; box-sizing: border-box; position: relative; overflow: hidden;
    display: flex; justify-content: center; align-items: center;
    color: #666; font-size: 1.13rem; font-weight: 600; transition: all .3s ease;}

#content .title_area .tab_menu a::after {
  position: absolute;
  content: "";
  width: 0;
  height: 100%;
  top: 0;
  right: 0;
  z-index: -1;
  background: var(--font-color-main);
  transition: all 0.5s ease;}

#content .title_area .tab_menu a:hover{color: #fff;}
#content .title_area .tab_menu a:hover::after {
  left: 0;
  width: 100%;}

#content .title_area .tab_menu .current{background: var(--font-color-main); color: #fff;}


/* 안전경영 내용 컨텐츠 */
#content .content_area{width: 1400px; margin: 0 auto 250px; padding-top: 100px;}
#content .content_area section:nth-of-type(1){box-shadow: 0 0 10px 1px rgba(0, 0, 0, .2); padding: 80px; border-radius: 45px;}

#content .content_area .safety_txt{position: relative;}
#content .content_area .safety_txt div{display: flex; justify-content: space-between; align-items: center;}
#content .content_area .safety_txt strong{margin: 80px 0; color: #111;
    font-size: 3.13rem; text-align: center; display: block; line-height: 4.69rem;}
#content .content_area .safety_txt>img{margin: 30px 0 60px;}
#content .content_area .safety_txt ul{width: 100%; height: 300px; background: url(../images/content4/safety_title.jpg);
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 30px; align-content: center; margin: 40px 0 100px; border-radius: 40px;}
#content .content_area .safety_txt ul li{font-size: 1.5rem; width: 100%; text-align: center; color: #fff;
    font-weight: 500;}


#content .content_area .safety_txt p{text-align: center; font-size: 1.5rem; color: #666; transition: all .5s ease-out;}

#content .content_area .safety_list ul{margin: 100px 0 150px 120px;}
#content .content_area .safety_list ul li{width: 1120px; padding: 20px 70px; box-sizing: border-box;
    border-bottom: 1px solid #333; font-weight: 500; font-size: 1.13rem;
    display: flex; align-items: center; gap: 15px;}

#content .content_area .safety_list ul li:nth-of-type(1){display: flex; gap: 20px; align-items: flex-end;
position: relative; border-bottom: 3px solid #333; padding: 40px 60px;}

#content .content_area .safety_list span{ font-size: 6.25rem;
    font-weight: 600; color: var(--font-color-main); position: absolute; left: -90px; bottom: 20px;}
#content .content_area .safety_list ul li h4{font-size: 1.88rem;}
#content .content_area .safety_list img{width: 23px; height: 23px;}



#content .content_area .safety_title_txt{position: relative; color: #333; overflow: hidden; border-radius: 45px;
    width: 1400px; height: 640px; transition: all .5s ease;
    background: url(../images/content4/safetyfoods_title.jpg);
    }
#content .content_area .safety_title_txt::before,
#content .content_area .safety_title_txt::after{
    position: absolute;
    content: "";
    left: 0;
    width: 100%;
    height: 50%;
    right: 0;
    background: #fff;
    transition: all 0.5s ease;
}
#content .content_area .safety_title_txt::before{top: 0;}
#content .content_area .safety_title_txt::after{bottom: 0;}

#content .content_area .safety_title_txt.on{color: #fff;}
#content .content_area .safety_title_txt.on::before,
#content .content_area .safety_title_txt.on::after{
  position: absolute;
  content: "";
  left: 0;
  width: 100%;
  height: 0;
  right: 0;
  background: #fff;
  transition: all 0.5s ease;
  animation: img_open 1s ease;
}
#content .content_area .safety_title_txt.on::before{top: 0;}
#content .content_area .safety_title_txt.on::after{bottom: 0;}

@keyframes img_open{
    0%{height: 50%;}
    100%{height: 0;}
}

/* #content .content_area .safety_title_txt:hover::before,
#content .content_area .safety_title_txt:hover::after{height: 0;} */
/* #content .content_area .safety_title_txt:hover{color: #fff;} */

#content .content_area .safety_title_txt>strong{font-size: 2.81rem; position: absolute; left: 60px;top: 60px;}
#content .content_area .safety_title_txt>p{font-size: 1.25rem; position: absolute; right: 60px; bottom: 60px;
    text-align: right; font-weight: 500; z-index: 1;}

#content .content_area .safety_foods ul li{position: relative; margin: 150px 0 300px;}
#content .content_area .safety_foods ul li img{border-radius: 30px;}
#content .content_area .safety_foods ul li div{width: 930px; padding: 40px; backdrop-filter: blur(5px);
    background: rgba(255, 255, 255, .9); box-shadow: 0 0 3px 2px rgba(0, 0, 0, .25);
    border-radius: 30px;}
#content .content_area .safety_foods ul li h4{font-size: 1.88rem; margin-bottom: 30px;}
#content .content_area .safety_foods ul li p{font-size: 1.13rem; line-height: 1.69rem;}

#content .content_area .safety_foods ul li:nth-of-type(odd) div{position: absolute; right: 0; bottom: -149px;}
#content .content_area .safety_foods ul li:nth-of-type(even) img{margin-left: 550px;}
#content .content_area .safety_foods ul li:nth-of-type(even) div{position: absolute; left: 0; bottom: -149px;}

#content .content_area section:nth-of-type(3) .safety_title_txt{background: url(../images/content4/safetyindustry_title.jpg);}

#content .content_area .safety_industry ul{margin: 150px 0; padding: 0 30px;}
#content .content_area .safety_industry h4{font-size: 2.5rem; width: 100%; padding: 40px 0 20px; position: relative; margin-bottom: 40px;}
#content .content_area .safety_industry h4::after{
    content: '';
    width: 1400px; height: 3px;
    background: #333;
    position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
}
#content .content_area .safety_industry ul li strong{font-size: 1.88rem; display: block; margin-bottom: 30px;}
#content .content_area .safety_industry ul li p{font-size: 1.13rem; margin-bottom: 40px;}
#content .content_area .safety_industry ul li p span{color: var(--font-color-point2);}
#content .content_area .safety_industry li .box_forflex{display: flex; justify-content: space-between; align-items: flex-start;}

#content .content_area .safety_industry li dl{margin: 30px 0 100px; border: 2px solid #ccc; border-radius: 20px; padding: 30px;
    background: #fdfdfd;}

#content .content_area .safety_industry li dl dt{font-size: 1.5rem; font-weight: 700; margin: 5px 0 30px;}
#content .content_area .safety_industry li dl dd{display: flex; align-items: center; font-size: 1.13rem; margin: 20px 0; padding: 15px 5px;
    border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; color: #444;
    }
#content .content_area .safety_industry li dl dd strong{font-size: 1.38rem; margin: 0; width: 350px; font-weight: 600;}