/* 윤리경영 탭 */
#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;}

#content .content_area .ceo{height: 1260px; position: relative; }
#content .content_area .ceo_message{ height: 712px; transition: all .5s ease;}
#content .content_area .ceo_message.on{position: fixed; top: 50px;}
#content .content_area .ceo_message.end{position: absolute; bottom: 10px;}

#content .content_area .ceo_message>strong{display: block; width: 1400px; font-size: 2.75rem; line-height: 4.13rem;
    font-weight: 700; padding: 100px 0 80px; background: #fff;}
#content .content_area .ceo_message img{width: 600px; height: 400px;}
#content .content_area .ceo_message_txt{position: absolute; height: 974px; right: 0; top: 312px; z-index: -10;}


#content .content_area .ceo_message_txt p{font-size: 1.25rem; font-weight: 500; line-height: 2.8rem;
    margin-bottom: 40px;}

#content .content_area .ceo_message_txt p:nth-of-type(2) span{font-weight: 600;}
#content .content_area .ceo_message_txt p:nth-of-type(3){text-align: right;}
#content .content_area .ceo_message_txt p:nth-of-type(3) span{font-size: 1.5rem; font-weight: 700;}
#content .content_area .ethics_ceo_img{position: relative; margin-top: 150px; overflow: hidden; border-radius: 30px;}
#content .content_area .ethics_ceo_img span{width: 1400px; z-index: 10;
    font-size: 2rem; font-weight: 700; color: #fff; display: block; opacity: 0;
    margin: 30px 0; text-align: center; line-height: 3.5rem; position: absolute;
    left: 50%; top: 220px; transform: translate(-50%); transition: all .7s ease-in-out;}

#content .content_area .ethics_ceo_img img{width: 1400px; height: 600px;
    animation: ethics_imgzoom 30s linear infinite; transition: all .7s linear;}
@keyframes ethics_imgzoom {
    from {transform: scale(1);}
    to {transform: scale(1.1);}}
#content .content_area .ethics_ceo_img.focus span{opacity: 1;}
#content .content_area .ethics_ceo_img.focus img{filter: brightness(60%);}



#content .content_area .CJpeople{margin-top: 200px;}
#content .content_area .CJpeople>div:nth-of-type(1){display: flex; justify-content: space-between; align-items: center;
    padding: 100px 50px 20px;}
#content .content_area .CJpeople h3{font-size: 3.13rem;}
#content .content_area .CJpeople p{font-size: 1.25rem; line-height: 2.19em; font-weight: 500;}
#content .content_area .CJpeople>p{color: var(--font-color-main); padding: 20px 50px;}

#content .content_area .CJpeople .CJpeople_promise h4{margin: 100px 0 15px; font-size: 1.88rem; font-weight: 700;}
#content .content_area .CJpeople .CJpeople_promise li{padding: 25px 70px; border-bottom: 1px solid #333; font-weight: 500;}
#content .content_area .CJpeople .CJpeople_promise li:nth-of-type(1){border-bottom: 3px solid #333;}
#content .content_area .CJpeople .CJpeople_promise li img{margin-right: 10px;}

#content .content_area .CJpeople_promise ul:nth-of-type(1){background: url(../images/content2/ethics_check_bg1.svg) bottom right no-repeat;}
#content .content_area .CJpeople_promise ul:nth-of-type(2){background: url(../images/content2/ethics_check_bg2.svg) bottom right no-repeat;}
#content .content_area .CJpeople_promise ul:nth-of-type(3){background: url(../images/content2/ethics_check_bg3.svg) bottom right no-repeat;}
#content .content_area .CJpeople_promise ul:nth-of-type(4){background: url(../images/content2/ethics_check_bg4.svg) bottom right no-repeat;}
#content .content_area .CJpeople_promise ul:nth-of-type(5){background: url(../images/content2/ethics_check_bg5.svg) bottom right no-repeat;}



#content .content_area .pdf_view{height: 210px; margin: 250px 0; padding: 50px 0; display: flex;
    justify-content: space-between; border-top: 3px solid #333; align-items: flex-start;}

#content .content_area .pdf_view h4{font-size: 2.19rem;}
#content .content_area .pdf_view p{font-weight: 400;}
#content .content_area .pdf_view .left_box{display: flex; flex-direction: column; gap: 40px;}
#content .content_area .pdf_view .right_box{display: flex; gap: 45px;}
#content .content_area .pdf_view .right_box li{display: flex; justify-content: right; gap: 20px; align-items: center;
    margin-bottom: 30px;}

#content .content_area .pdf_view strong{font-size: 1.25rem; font-weight: 500;}
#content .content_area .pdf_view a{width: 150px; height: 50px; border-radius: 10px;
    text-indent: 30px;
    display: flex; align-items: center; justify-content: center;
     border: 1px solid #bbb; box-sizing: border-box;
     transition: all .5s ease; position: relative;}

#content .content_area .pdf_view a:hover{background: var(--font-color-main); color: #fff;}
#content .content_area .pdf_view a::before{
    content: '';
    background: url(../images/content2/pdf-ico.png) no-repeat center center;
    background-size: cover;
    width: 20px; height: 25px;
    position: absolute;
    left: 25px;
    }





#content .content_area .ethics_story{margin-top: 250px; padding-top: 100px;}
#content .content_area .ethics_story .ethics_gall{margin-bottom: 250px;}
#content .content_area .ethics_story h5{font-size: 3.13rem;}
#content .content_area .ethics_story .ethics_gall .date{display: flex; align-items: end; justify-content: right;
    margin-bottom: 50px; font-family: "Montserrat", sans-serif;}
#content .content_area .ethics_story .ethics_gall .date p{color: var(--font-color-main);
    font-size: 2.5rem; font-weight: 700; width: 1250px; text-align: right; padding-bottom: 10px;
    border-bottom: 2px solid #333;}

#content .content_area .ethics_story .ethics_gall ul{margin: 0 0 50px 0;}
#content .content_area .ethics_story .ethics_gall ul li{width: 500px; height: 363px;}
#content .content_area .ethics_story .ethics_gall ul li:nth-of-type(1){width: 130px;}
#content .content_area .ethics_story .ethics_gall ul li img{width: 500px; height: 270px;}
#content .content_area .ethics_story .ethics_gall ul li p{margin-top: 20px; text-align: center; font-size: 1.5rem;
    font-weight: 600;}
#content .content_area .ethics_story .ethics_gall ul li span{font-size: 1.13rem; color: #666; font-weight: 400;}


#content .content_area .ethics_rules h4{font-size: 3.13rem; text-align: center; margin-bottom: 80px;}

#content .content_area .ethics_rules ul{display: flex; flex-wrap: wrap; gap: 70px;}
#content .content_area .ethics_rules ul li{width: 650px; height: 200px; border-radius: 30px; overflow: hidden;}


#content .content_area .ethics_story .ethics_rules dt{font-size: 1.63rem; margin-bottom: 30px; font-weight: 700;}
#content .content_area .ethics_story .ethics_rules dd{font-size: 1rem; line-height: 1.5rem; transition: all .5s ease;}
#content .content_area .ethics_story .ethics_rules ul li a{color: #fff; position: relative; }
#content .content_area .ethics_story .ethics_rules ul li a dl{position: absolute; left: 40px; top: 40px;}
#content .content_area .ethics_story .ethics_rules img{width: 650px; height: 200px;}
#content .content_area .ethics_story .ethics_rules ul li a span{font-size: 1.88rem; font-weight: 700; opacity: 0;
    position: absolute; left: 800px; bottom: 40px; display: block; width: 300px; transition: all .8s ease;}

#content .content_area .ethics_rules li a::before{
    content: '';
    width: 300px; height: 200px;
    background: rgba(0, 0, 0, .7);
    display: block;
    position: absolute; left: 500px; top: 50%; transform: translateY(-50%);
    border-radius: 100px; transition: all .7s ease;
}

#content .content_area .ethics_rules li a::after{
    content: '\232A';
    color: #fff;
    font-family: "Montserrat", sans-serif;
    font-size: 3rem; font-weight: 500;
    line-height: 200px;
    font-weight: 500;
    position: absolute; right: 30px; top: 50%; transform: translateY(-50%);}

#content .content_area .ethics_rules li:hover a::before{
    width: 800px; height: 300px; border-radius: 200px;
    position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
}

#content .content_area .ethics_rules li:hover dd{opacity: 0;}
#content .content_area .ethics_story .ethics_rules ul li:hover a span{font-size: 2.5rem; font-weight: 700;
    position: absolute; left: 40px; bottom: 40px; opacity: 1; }