/* sub2_3 콘텐츠 */

/* 서브 메뉴 영역 */
.visual .sub_nav ul li{width: 33.33%;}


#content .content_area{position: relative;}

#content .content_area .text_top{display: block; font-size: 1.3rem; font-weight: 600; text-align: center;
margin: 200px 0 100px;}
#content .content_area .text_top span{color: var(--font-color-main);}

#content .content_area .text_top::before,
#content .content_area .text_top::after{content: ""; display: block; width: 30px; height: 30px;
position: absolute;}
#content .content_area .text_top::before{background: url(../images/sub2_1/quotes_top.svg) no-repeat;
    top: -45px; left: 50%; transform: translate(-50%, -50%);}
#content .content_area .text_top::after{background: url(../images/sub2_1/quotes_bottom.svg) no-repeat;
    top: 130px; left: 50%; transform: translate(-50%, -50%);}

#content .content_area hr{height: 1px; background: #ccc; border: 0; margin: 120px auto 80px; width: 85%;}

#content .content_area .content_title{font-size: 2.2rem; font-weight: 700; text-align: center;}
#content .content_area .content_subtitle{font-size: 1.8rem; color: var(--font-color-main); font-weight: 600;
text-align: center; margin-top: 20px;}
#content .content_area .content_titletext{font-size: 1.2rem; text-align: center; display: block; margin: 15px 0 40px; padding: 0 30px;}
#content .content_area h4{font-size: 2rem; font-weight: 600; text-align: center;}

/* 안전보건경영 */

#content .content_area .safety_box{margin: 60px 0 170px;}
#content .content_area .safety_box .safety_div{width: 85%; height: 70px; border: 1px solid var(--font-color-main);
    border-radius: 15px; display: flex; justify-content: center; align-items: center; color: var(--font-color-main);
font-size: 1.3rem; font-weight: 500; text-align: center; padding: 10px 0; margin: 0 auto;}
#content .content_area .safety_box .safety_ul{width: 85%; display: flex; gap: 4%; margin: 20px auto 70px; flex-wrap: wrap;}
#content .content_area .safety_box .safety_ul li{border: 1px solid var(--font-color3); border-radius: 15px;
width: 48%; height: 200px; display: flex; justify-content: center; align-items: center; flex-direction: column; box-sizing: border-box;
margin-bottom: 20px;}
#content .content_area .safety_box .safety_ul li dl{display: flex; flex-direction: column; gap: 30px;}
#content .content_area .safety_box .safety_ul li dt span{display: block; font-size: 50px; text-align: center;}
#content .content_area .safety_box .safety_ul li dd{display: block; font-weight: 500; text-align: center;}


/* #content .content_area .swiper-container-container{padding: 0 30px;} */
#content .content_area .swiper-container{width: 100%; height: 120px; position: relative; top: 50%; margin: 30px auto; position: relative;}
#content .content_area .swiper-container .swiper-slide{display: flex; justify-content: center; align-items: center;}
#content .content_area .swiper-container .swiper-slide .slide_inner{background-position: center; background-size: cover; color: #fff;
    display: flex; justify-content: flex-start; align-items: center; gap: 20px;}

#content .content_area .swiper-container .swiper-slide .slide_inner span{display: block; font-size: 60px; text-align: center;}
#content .content_area .swiper-container .swiper-slide .slide_inner p{display: block; text-align: center; font-size: 1.8rem; width: 220px;}
#content .content_area .swiper-container .swiper-slide .right_text{color: var(--font-color-main); text-align: center; font-size: 1.1rem; font-weight: 500;}

#content .content_area .swiper-container .swiper-slide:nth-of-type(1){background: linear-gradient(131deg,rgba(255, 144, 79, 1) 0%, rgba(235, 99, 23, 1) 100%); border: 1px solid var(--font-color-main);}
#content .content_area .swiper-container .swiper-slide:nth-of-type(2){background: linear-gradient(134deg,rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 100%); border: 1px solid var(--font-color-main);}

#content .content_area .swiper-container .swiper-slide .slide_inner span:nth-of-type(2){font-size: 30px; position: absolute;
bottom: 10px; right: 10px; color: rgba(255, 255, 255, .7); animation: sway-icon 2s infinite ease-in-out; transform-origin: bottom center;}

@keyframes sway-icon {
  0%   { transform: rotate(00deg); }
  25%  { transform: rotate(10deg); }
  50%  { transform: rotate(-10deg); }
  70%  { transform: rotate(0deg); }   /* 제자리로 돌아옴 */
  100% { transform: rotate(0deg); }   /* 멈춘 상태 유지 */
}


/* 인권경영 */


#content .content_area .human_box{margin: 60px 0 170px;}
#content .content_area .human_box .human_div{width: 85%; height: 70px;
    border-radius: 15px; display: flex; justify-content: center; align-items: center; color: #fff; background: linear-gradient(131deg,rgba(255, 144, 79, 1) 0%, rgba(235, 99, 23, 1) 100%);
font-size: 1.7rem; font-weight: 500; text-align: center; padding: 10px 0; margin: 0 auto; box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, .2);}
#content .content_area .human_box .human_div img{transform: scale(.8);}
#content .content_area .human_box .human_ul{width: 85%; display: flex; gap: 4%; margin: 20px auto 70px; flex-wrap: wrap;}
#content .content_area .human_box .human_ul li{border-radius: 15px; box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, .2);
width: 48%; height: 200px; display: flex; justify-content: center; align-items: center; flex-direction: column; color: var(--font-color2);
box-sizing: border-box; margin-bottom: 20px;}
#content .content_area .human_box .human_ul li dl{display: flex; flex-direction: column; gap: 30px;}
#content .content_area .human_box .human_ul li dt span{display: block; font-size: 50px; text-align: center;}
#content .content_area .human_box .human_ul li dd{display: block; font-weight: 500; text-align: center;}



/* 소비자중심경영 */

#content .content_area .customer_box{margin: 60px 0 0}
#content .content_area .customer_box h4{margin-top: 80px;}
#content .content_area .customer_box .customer_ul{width: 85%; display: flex; gap: 4%; margin: 20px auto; flex-wrap: wrap;}
#content .content_area .customer_box .customer_ul li{border-radius: 15px; border: 1px solid #ccc;
width: 48%; height: 200px; display: flex; justify-content: center; align-items: center; flex-direction: column; color: var(--font-color2);
box-sizing: border-box; margin-bottom: 20px;}
#content .content_area .customer_box .customer_ul li dl{display: flex; flex-direction: column; gap: 10px;}
#content .content_area .customer_box .customer_ul li dt span{display: block; font-size: 50px; text-align: center;}
#content .content_area .customer_box .customer_ul li dd{display: block; text-align: center;}
#content .content_area .customer_box .customer_ul li dd:nth-of-type(1){color: var(--font-color-main); font-size: 1.5rem; font-weight: 500;}
#content .content_area .customer_box .customer_ul li dd:nth-of-type(2){color: var(--font-color2);}

#content .content_area .customer_box .customer_div{width: 85%; height: 70px;
    border-radius: 15px; display: flex; justify-content: center; align-items: center; color: var(--font-color2); background: #f6f6f6;
font-size: 1.2rem; text-align: center; margin: 14px auto;}


#content .content_area .customer_box .ccm{width: 100%; height: 280px; background: url(../images/sub2_3/ccm.png) center no-repeat; background-size: cover;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40px; margin-top: 50px;}
#content .content_area .customer_box .ccm p{display: block; font-size: 1.5rem; font-weight: 600; color: #fff; text-align: center;
text-shadow: 2px 2px 10px rgba(0, 0, 0, .2);}
#content .content_area .customer_box .ccm a{font-size: 1.2rem; background: var(--font-color-main); width: 140px; height: 46px; color: #ffff; border-radius: 15px;
display: flex; justify-content: center; align-items: center; box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, .2);}