@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
body, th, td, input, select, textarea, button {font-family: 'Pretendard', 'Noto Sans', sans-serif;}
.white-nowrap {white-space:nowrap;}

/***********************************************
                    main 
***********************************************/
.searchwrap .searcharea .keyword > li > .list{flex-wrap: wrap; justify-content: start;}
.searchwrap .searcharea .keyword > li.recommend > .list{row-gap: 20px; column-gap: 12px;}
.searchwrap .searcharea .keyword > li.recent > .list{row-gap: 12px; column-gap: 20px;}
.close-btn{width: 16px; height: 16px; border: 1px solid #CCCCCC; border-radius: 50%;}
#main{padding-top: 90px; background: #000; color: #fff;}
#mVisual {width: 100%; position: relative; }
#mVisual .tit-area{max-width: 1480px; padding: 120px 20px; box-sizing: border-box; margin: 0 auto;}
#mVisual .tit-area h1 {position: relative; opacity: 0; animation-duration: 1s; animation-fill-mode: forwards; animation-timing-function: ease-out;}
/* 첫 번째 h1: 왼쪽에서 원래 위치로 이동 */
#mVisual .tit-area h1:first-child {animation-name: slideInFromLeft;}
/* 마지막 h1: 오른쪽에서 원래 위치로 이동 */
#mVisual .tit-area h1:last-child {animation-name: slideInFromRight;}
/* 왼쪽에서 슬라이드 인 애니메이션 */
@keyframes slideInFromLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}
/* 오른쪽에서 슬라이드 인 애니메이션 */
@keyframes slideInFromRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}
#mVisual .tit-area h1 + h1{padding-left: 408px; position: relative; margin-top: 4px; width: 100%;}
#mVisual .tit-area h1 .line{width: calc(100% - 610px); max-width: 550px; height: 4px; background-color: #fff; margin-top: 12px;}
#mVisual .visual-inner { height:  720px; }
#mVisual .visual-inner .swiper,
#mVisual .visual-inner .visual-bg,
#mVisual .visual-inner .visual-link,
#mVisual .visual-inner .back-img {  display: block;  width: 100%;  height: 100%; }
#mVisual .visual-inner .visual-bg {  position: absolute; top: 0; left: 0; }
#mVisual .visual-inner .visual-bg .back-img{background-repeat: no-repeat; background-size: 100% 100%;}
#mVisual .visual-inner .visual-txt {position: absolute; top: 50%; transform: translate(-50%, -50%); z-index: 2; max-width: 1262px; width: 100%; padding: 0 100px; box-sizing: border-box; left: 50%; margin: 0 auto;}
#mVisual .visual-inner .visual-txt p{margin-top: 12px;}
#mVisual .visual-txt .txt-wrap { height: 100%; }
#mVisual .arr_wrap{position: absolute; top: 50%; left: 50%; width: 100%; height: 80px; max-width: 1480px; padding: 0 20px; box-sizing: border-box; z-index: 9; transform: translate(-50%, -50%);}
#mVisual .arr_wrap .visual-arr { display: block; width: 80px; height: 80px; line-height: 80px; padding: 0px; box-sizing: border-box; text-align: center; cursor: pointer; z-index: 10;}
#mVisual .arr_wrap .visual-arr.prev { background: #fff url(/resources/front/common/img/ico_prev_w_b.svg) no-repeat center / cover; }
#mVisual .arr_wrap .visual-arr.next {background: #fff url(/resources/front/common/img/ico_next_w_b.svg) no-repeat center / cover;}
#mVisual .visual-arr.prev.trans { background-color: transparent !important; }
#mVisual .visual-arr.next.trans { background-color: transparent !important; }
.controlbox{position: absolute; left: 50%; bottom: 60px; transform: translateX(-50%); z-index: 9; gap: 24px; width: 100%; padding: 0 20px; box-sizing: border-box;}
.stopswiper{background-image: url(/resources/front/common/img/ico_stop.svg); background-repeat: no-repeat; background-position: center center; background-size: cover; width: 24px; height: 24px; transition: all 0.3s;}
.stopswiper.on{background-image: url(/resources/front/common/img/ico_play.svg);}
.progress-box.full-bar { width: 100%; }
#mVisual .progress-box .progress-bar{width: 100px;}
.progress-box .progress-bar{width: 100%; height: 4px; background: rgba(255, 255, 255, 0.5); border-radius: 4px; position:relative; overflow: hidden;}
.progress-box .progress-bar .bar-fill{width: 0; height: 4px; background: #fff; position: absolute; top: 0; left: 0; font-size: 0; text-indent: -9999px;}
#mVisual .swiper-pagination-bullet {width: 10px; height: 10px; background: #eee; opacity: 1; margin: 0 5px; }
#mVisual .swiper-pagination-bullet-active { background: red;}
#mVisual .swiper-pagination-fraction { color: #eee; }
#mVisual .control-wrap {width: auto; position: absolute; width: auto; top: 50%; left: 40px; z-index: 10;transform: translateY(-50%);-webkit-transform: translateY(-50%);-o-transform: translateY(-50%);-ms-transform: translateY(-50%); -moz-transform: translateY(-50%); margin-top: 50px; }
#mVisual .control-wrap .progress-box { width: 150px;}
#mVisual .control-wrap .swiper-pagination-fraction { position: relative; text-align: left; width: auto; top: initial; left : initial; bottom: initial; right: initial; }
#main .section1{padding: 160px 0; box-sizing: border-box;}
#main .section1 .section-body{max-width: 1100px;}
#main .section1 .bbsSearch input[type='text']{padding: 18.5px 70px 18.5px 40px;}
#main .section1 .bbsSearch{margin: 0;}
.keyword {max-width: 980px; width: 100%; margin: 0 auto;}
.keyword > li.recent{color: #bbb;}
.keyword > li + li{border-top: 1px solid #ddd; margin-top: 24px; padding-top: 16px;}
#main .keyword > li > b{max-width: 160px; width: 100%;}
#main .keyword > li.recommend > b{ line-height: 19px !important;}
#main .keyword > li > .list{width: calc(100% - 160px);}
.keyword > li.recommend .list li a{display: block; padding: 5px 23.24px; box-sizing: border-box; border: 1px solid #fff; background: transparent; border-radius: 70px; transition: 0.3s;}
.keyword > li.recommend .list li:hover a{background: #222222;}
#main .section2{background: linear-gradient(180deg, #000000 0%, #746661 100%); transition: top 0.3s ease;}
#main .section2.section .section-body{max-width: 1720px;}
.pin-spacer{background-color: #746661;}
#main .section2 .cont-area{position: relative; margin-top: 80px;}
#main .section2 .img-wrapper {width: 100%; /* 이미지의 초기 크기 */ height: 100%;  /* 이미지의 초기 크기 */ margin: 0 auto;  /* 가운데 정렬 */ position: relative;}
#main .section2 .service-image {width: 100%; height: 100%; transition: all 0.5s ease; transform-origin: center center; /* 확대의 기준점을 이미지 중앙으로 설정 */}
#main .section2 .service-image.mo-img{display: none;}
#main .section2 .overlay-text {position: absolute; top: 200%; left: 50%; transform: translateX(-50%); opacity: 1; transition: all 0.5s ease; z-index: 1; width: 100%; display: flex; align-items: center; justify-content: center; text-align: center;}
#main .section2 .overlay-text .br4{display: none;}
#main .section .tit{font-size: 120px; font-weight: 700; line-height: 150px; color: rgba(255, 255, 255, 0.15);}
#main .section3, #main .section4{background: #746661; box-sizing: border-box;}
#main .section3{padding-top: 240px;}
#main .section3 .section-body{}
.product-swiper{overflow: visible !important; max-width: 410px; max-height: 200px; height: 100%; margin: unset !important;}
.product-swiper .swiper-slide {width: auto;}
.product-swiper .swiper-slide > div{display: block; min-height: 200px; background: #A6A49D; transition: 0.3s; box-sizing: border-box; width: 410px; position: relative;}
.product-swiper .swiper-slide.on > div{min-height: 320px; height: fit-content; background: #A72B2A; transform: translateY(-120px); /* 위로 120px 이동 */}
.product-swiper .swiper-slide .txt{position: absolute; top: 0; left: 0; padding: 32px; box-sizing: border-box; width: 100%; height: 100%; transition: 0.3s;}
.product-swiper .swiper-slide .hovertxt{position: absolute; top: 0; left: 0; padding: 32px; box-sizing: border-box; width: 100%; height: 100%; opacity: 0; z-index: -1; transition: 0.3s;}
.product-swiper .swiper-slide .hovertxt a{display: block; width: fit-content; position: relative;}
.product-swiper .swiper-slide .hovertxt a::after{content: ''; clear: both; display: block; background: url(/resources/front/common/img/ico_down_w.svg) no-repeat center center; background-size: cover; transform: translateY(-50%) rotate(-90deg); width: 16px; height: 16px; position: absolute; top: 50%; right: -24px;}
.product-swiper .swiper-slide .hoverimg{position: absolute; bottom: 0; right: 32px; opacity: 0; z-index: -1; transition: 0.3s; max-width: 200px; max-height: 200px;}
.product-swiper .swiper-slide.on > div .txt{opacity: 0; z-index: -1;}
.product-swiper .swiper-slide.on > div .hovertxt{opacity: 1; z-index: 5;}
.product-swiper .swiper-slide.on > div .hoverimg{opacity: 1; z-index: 1;}
.product-swiper .swiper-slide.on > div .hovertxt .product-item > li + li{margin-top: 8px;}
#main .section3 .product-pagination{bottom: -54px; display: flex; align-items: center; justify-content: space-between; min-height: 24px;}
#main .section3 .product-pagination::after{content: ''; clear: both; display: block; width: 100%; height: 2px; background: rgba(221, 221, 221, 0.25); position: absolute; z-index: -1;}
#main .section3 .product-pagination .swiper-pagination-bullet{background: #DDDDDD; opacity: 1 !important; width: 12px; height: 12px; margin: 0; cursor: pointer;}
#main .section3 .product-pagination .swiper-pagination-bullet-active{background: linear-gradient(149.53deg, #C52222 32.72%, #A72B2A 92.75%); width: 24px; height: 24px; box-shadow: 0px 8px 6px 0px rgba(0, 0, 0, 0.1);}
#main .section4{padding-top: 220px;}
#main .section4 .bg{position: relative; height: 200px; overflow: hidden;}
#main .section4 .bg img{position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
#main .section4 .bg img.mo-img{display: none;}
#main .section4 .txt{position: absolute; top: 50%; transform: translateY(-50%); padding: 0 100px; box-sizing: border-box; width: 100%;}
#main .section4 .downloadbtn{padding: 10px 31px; box-sizing: border-box; border: 1px solid #fff; border-radius: 28px; max-width: 152px; transition: all 0.3s;}
#main .section4 .downloadbtn:hover{color: #000000; background-color: #fff;}
#main .section5{padding-top: 160px; background: linear-gradient(0deg, #000000 0%, #746661 100%);}
.snslist{max-width: 628px; width: 100%;}
.snslist li{overflow: hidden; width: 100%;}
.snslist li a{display: block;}
.snslist li .img{position: relative; padding-bottom: 81.46%;}
.snslist li .img img{position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
.snslist .sns{width: 32px; height: 32px; position: absolute; top: 16px; right: 16px; background-repeat: no-repeat; background-position: center center; background-size: cover;}
.snslist .sns.youtube{background-image: url(/resources/front/common/img/ico_youtube.svg);}
.snslist .sns.facebook{background-image: url(/resources/front/common/img/ico_facebook.svg);}
.snslist li .txt{background: #fff; padding: 16px 20px; box-sizing: border-box;}
.new-list{max-width: 519px; width: calc(100% - 40px);}
.new-list li{border-bottom: 1px solid #ccc;}
.new-list li + li{margin-top: 20px;}
.new-list li a{padding-bottom: 20px;}
.new-list li a span{width: calc(100% - 55px);}
.new-list li a em{width: 100%; max-width: 45px; text-align: end;}
#main .section5 .section-row + .section-row{padding: 160px 0; box-sizing: border-box;}
#main .section5 .section-column.le{max-width: 553px;}
#main .section5 .section-column.ri{max-width: 624px;}
#main .section5 .btnSet .check-box label{width: calc(100% - 129px); white-space: nowrap;}
#main .section5 .btnSet .check-box a{max-width: 113px; width: 100%; padding: 4px 14.3px; margin-left: 0;}
.contact-area {max-width: 624px; width: 100%;}
.contact-area input{width: 100%; border: 1px solid #666666; border-radius: 8px; padding: 15px 20px; box-sizing: border-box; background: transparent;}
.contact-area input::placeholder{color: #BBBBBB;}
.input-essential, .input-wrap {position: relative;}
.input-essential input, .input-essential textarea {width: 100%;}
.input-wrap.text-box{border: 1px solid #666666; border-radius: 8px; box-sizing: border-box; overflow: hidden; min-height: 160px; max-height: 160px; padding: 15px 20px;}
.input-essential textarea{min-height: 106px; max-height: 106px; padding: 0; box-sizing: border-box; background: transparent; resize: none; border: none;}
.input-essential textarea:focus{outline: none;}
.textLengthWrap{position: absolute; bottom: 16px; right: 20px; color: #bbb; width: fit-content !important;}
.input-essential input + label{line-height: 58px !important;}
.input-essential input + label, .input-essential textarea + label {position: absolute;  top: 0; left: 0; width: 100%; height: 100%; padding: 0 20px; color: #BBBBBB; box-sizing: border-box;}
.input-essential textarea + label {padding: 0;}
.input-essential input + label::after, .input-essential textarea + label::after {content: '*'; display: inline; color: #da0031; margin-left: 2px;}
.input-essential input + label:hover, .input-essential textarea + label:hover {cursor: text;}
.contactbtn{padding: 13.5px 40.2px; box-sizing: border-box; border-radius: 28px !important; cursor: pointer;}
.privacy_btn{padding: 4px 15.3px; box-sizing: border-box; border: 1px solid #DDDDDD; border-radius: 28px; margin-left: 16px;}
.inquiry_select.nice-select{width: 100%; height: 56px; line-height: 56px !important; border: 1px solid #666; border-radius: 8px; padding: 0 20px; box-sizing: border-box; background: transparent; color: #BBBBBB;}
.inquiry_select:after{border-bottom: 1.5px solid #fff; border-right: 1.5px solid #fff; width: 7px; height: 7px; margin-top: -7px; right: 20px;}
.inquiry_select ul.list {border-radius: 8px; padding: 11px 0; box-sizing: border-box; background-color: #000; border: 1px solid #666666; box-shadow: 0px 4px 8px 0px #0000001A;}
.inquiry_select ul.list .option{padding: 0 20px; height: 56px; min-height: 56px; line-height: 56px; color: #BBBBBB !important;}

/***********************************************
                    sub 
***********************************************/
/******************* 서브 공통 ****************/
ul.boardlist li{width: 100%;}
ul.boardlist li a{display: block; width: 100%; background: #fff; border: 1px solid #ccc; transition: 0.3s;}
ul.boardlist li a:hover{border: 1px solid #A72B2A; background: rgba(215, 127, 126, 0.10);}
ul.boardlist li a h6{transition: 0.3s;}
ul.boardlist li a:hover h6, ul.announcementlist li a:hover .date{color: #A72B2A;}
ul.boardlist li .con{color: #666; margin-top: 16px;}
ul.boardlist li .date{display: block; color: #666; transition: 0.3s;}
ul.boardlist li.fixlist h6{padding-left: 40px; position: relative;}
ul.boardlist li.fixlist h6::after{content: ''; clear: both; display: block; width: 24px; height: 24px; background-image: url(/resources/front/common/img/ico_pin.svg); background-size: cover; background-repeat: no-repeat; background-position: center center; position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
.download_bo{background: #fff; border: 1px solid #222; border-radius: 28px; padding: 12.5px 39.2px; box-sizing: border-box; width: fit-content; transition: 0.3s; position: relative;}
.download_bo:hover {background: #222222; color: #fff;}
.download_bo.min{padding: 11px 31.6px;}
.download_wi.line{border: 1px solid #fff; background: transparent; border-radius: 28px; padding: 11px 31.6px; box-sizing: border-box; width: fit-content; transition: 0.3s; position: relative;}
.download_wi.line:hover{background: #fff; color: #222222;}
.linelist{position: relative; margin-left: 12px; padding-left: 13px; display: block;}
.linelist.small{margin-left: 0; padding-left: 10px;}
.linelist.flex-box{display: flex;}
.linelist::before{content: ''; clear: both; display: block; width: 7px; height: 1px; background-color: #666; position: absolute; top: 9px; left: 0;}
.linelist.small::before{width: 4px;}
.linelist.fs16::before{top: 12px;}
.starlist{position: relative; padding-left: 12px; margin-left: 13px; display: block;}
.starlist::before{content: '※'; clear: both; display: block; max-width: 9px; position: absolute; left: 0;}
.mo-img,
.mo-tbl-box,
.mo-box,
.mo-linktag {display:none;}

/***********************************************
                    company 
***********************************************/
/******************* Company Information ****************/
/* 1. President&CEO Message */
#sub.ceo, #sub.idealsofmanagement, #sub.global-network{background: linear-gradient(180deg, #746661 0%, #000000 100%);}
#sub.ceo .section1, #sub.idealsofmanagement .section1, #sub.global-network .section1 .addresslist {color: #fff !important;}
#sub.ceo .section1{padding-bottom: 220px !important;}
#sub.idealsofmanagement .section1, #sub.global-network .section1, #sub.ci .section3{padding-bottom: 180px !important;}
#sub.ceo .section1 .imgbox{position: relative; max-width: 557px; margin-left: 40px;}
#sub.ceo .section1 .imgbox img{border-radius: 0 150px 0 0; overflow: hidden;}
#sub.ceo .section1 .imgbox::before{content: ''; clear: both; display: block; max-width: 363px; max-height: 643px; width: 100%; height: 100%; background: linear-gradient(135deg, #A72B2A 0.75%, #C6AB85 100%); position: absolute; left: -40px; bottom: -40px; z-index: -1;}
#sub.ceo .section1 .txtbox{max-width: 592px;}
#sub.ceo .section1 .txtbox h4{position: relative;}
#sub.ceo .section1 .txtbox h4::after{content: ''; clear: both; display: block; width: 46px; height: 2px; background: #666; position: absolute; bottom: -20px; left: 0;}
#sub.ceo .section1 .txtbox p span{display: block; color: #BBB !important;}
#sub.ceo .section1 .txtbox .ceoname em{display: block; margin-bottom: 3px;}
/* 3. CI */
#sub.ci .section-wrap{color: #fff !important; background: linear-gradient(180deg, #746661 0%, #000000 57%, #000000 100%);}
#sub.ci .section1 .section-body{position: relative; background-image: url(/resources/front/common/img/ci_section1_bg.png); background-size: cover; background-repeat: no-repeat; background-position: bottom; max-width: 100%; padding: 0; padding-bottom: 187px;}
/* #sub.ci .section-bg{position: absolute;} */
#sub.ci .section1 .cont-area{max-width: 1320px; padding: 0 20px; box-sizing: border-box; margin: 0 auto;}
.afterbox{position: absolute; right: -245px; top: 50%; transform: translateY(-50%) rotate(-38.89deg);}
#sub.ci .section1 .le{width: 54.38%;}
#sub.ci .section1 .ri{width: 45.62%;}
#sub.ci .subname{position: relative; padding-left: 13px;}
#sub.ci .subname::before{content: ''; clear:  both; display: block; width: 3px; height: 23px; background-color: #fff; position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
#sub.ci .section2{color: #fff !important; position: relative; background: linear-gradient(180deg, #2B2624 2.53%, #000000 93.21%);}
#sub.ci .section2 .section-body{max-width: 100%; padding: 0;}
#sub.ci .section2 .cont-area{position: relative; min-height: 665px;}
#sub.ci .section2 .cont-area .top{max-width: 1320px; padding: 0 20px; box-sizing: border-box; margin: 0 auto;}
#sub.ci .section2 .cont-area::after{content: ''; clear: both; display: block; background-image: linear-gradient(180deg, #232121 2.53%, #000000 62.21%), url(/resources/front/common/img/slogan_section1_left_bg.png); background-repeat: no-repeat; background-size: 100% 100%; background-position: center center; position: absolute; background-blend-mode: lighten; z-index: 0; bottom: 0; width: 100%; height: 100%; z-index: -1; max-height: 566px;}
.afterbox{position: absolute; right: -245px; top: 50%; transform: translateY(-50%) rotate(-38.89deg); z-index: 1;}
#sub.ci .cont-area li .logobox{background: #fff; border: 1px solid #ccc; border-radius: 16px; width: 100%; height: 100%; padding: 40px; box-sizing: border-box; min-height: 270px; position: relative;}
#sub.ci .cont-area li .logobox > p{position: absolute; left: 30px; top: 30px;}
#sub.ci .symbolmark{padding: 64px 60px; box-sizing: border-box; background-color: #F9F9F9; border-radius: 16px;}
#sub.ci .symbolmark em{display: block;}
#sub.ci .symbol .mo_symbol{display: none;}
#sub.ci .color_system{margin-top: 45px;}
#sub.ci .color_system li{padding: 33.5px 24px; box-sizing: border-box; border-radius: 16px;}
#sub.ci .color_system .le p b, #sub.ci .color_system .ri span, #sub.ci .color_system .ri span em{display: block;}
/* 5. Global Network */
#sub.global-network .section1 .section-body{max-width: 100%; padding: 0;}
#sub.global-network .section1 .cont-area{padding: 80px 0 50px 0; box-sizing: border-box; border-radius: 8px;}
#sub.global-network .section1 .cont-area + .cont-area{background: #fff; padding: 0;}
#sub.global-network .section1 .tit-area, #sub.global-network .section1 .cont-area > *, .addresslist, .select-wrapper{max-width: 1320px; padding: 0 20px; margin: 0 auto; box-sizing: border-box;}
.overseas-branch{position:relative; margin-top:40px; width: 100%; height: 100%;}
.overseas-branch .worldmap{text-align:center; transform: translateY(10px); opacity:0; transition:opacity 0.5s ease, transform 0.5s ease; pointer-events: none;}
.overseas-branch .worldmap img{width:100%;}
.overseas-branch .branch{position:absolute; z-index: 1; pointer-events: none; width:20px; height:25px;}
.overseas-branch .branch svg{width:100%; height: 25px;}
.overseas-branch .branch svg path{transition:all 0.5s ease;}
.overseas-branch .seoul{top: 36.1%; left: 39.8%;}
.overseas-branch .daejeon{top: 38.7%; left: 40.3%;}
.overseas-branch .beijing{top: 31.5%; left: 35.7%;}
.overseas-branch .tokyo{top: 37.6%; left: 43.5%;}
.overseas-branch .taipei{top: 44.3%; left: 39.4%;}
.overseas-branch .santaclara{top: 35.2%; left: 69.7%;}
.overseas-branch .bengaluru{top: 51%; left: 26.4%;}
.overseas-branch .chengdu{top: 36.5%; left: 30.7%;}
.overseas-branch .shenzhen{top: 45.7%;left: 34.8%;}
.overseas-branch .nanjing{top: 43.2%; left: 35.9%;}
.overseas-branch .chongqing{top: 40.1%; left: 31.5%;}
.overseas-branch .wuhan{top: 42.7%; left: 32.8%;}
.overseas-branch .wuhan{top: 42.7%; left: 32.8%;}
.overseas-branch .branchInfo{position: absolute; top: -34px; left: 50%; transform: translateX(-50%) !important; padding: 2.43px 9.832px; box-sizing: border-box; border-radius: 500px; background: rgba(255, 255, 255, 0.90); z-index: 9; display: none;} 
.overseas-branch .branchInfo.on{display: block;}
.overseas-branch .daejeon .branchInfo{top: 50%; left: unset; right: -50px; transform: translateY(-50%) !important;}
.overseas-branch .shenzhen .branchInfo{top: unset; bottom: -50%; transform: translate(-50%, 50%) !important;}
.overseas-branch .wuhan .branchInfo{top: -50%; left: unset; right: -46px; transform: unset !important;}
.overseas-branch .branchInfo.head{color: #A72B2A; border: 1px solid #A72B2A;}
.overseas-branch .branchInfo.corporation{color: #A68447; border: 1px solid #A68447;}
.overseas-branch .branchInfo.branchoffice{color: #CAB315; border: 1px solid #EAD231;}
.overseas-branch .branchInfo.office{color: #FFAB85; border: 1px solid #FFAB85}
.overseas-branch .santaclara .branchInfo.corporation{width: 97px;}
.selectArea{display:flex; transition:opacity 1s ease;}
.selectArea > li{width: 20%; background: #fff;}
.selectArea > li button{width:100%; padding: 19px 40px; border:solid #ddd; border-width:1px 0 1px 1px; transition:all 0.3s ease; color: #888;}
.selectArea> li:nth-child(5) button{border-width:1px 1px 1px 1px;}
.selectArea> li .on{color: #fff; border: 1px solid transparent;}
.selectArea> li:nth-child(1) .on{background: #222;}
.selectArea> li:nth-child(2) .on{background: #A72B2A;}
.selectArea> li:nth-child(3) .on{background: #A68447;}
.selectArea> li:nth-child(4) .on{background: #EAD231;}
.selectArea> li:nth-child(5) .on{background: #FFAB85;}
.addresslist li{width: calc(50% - 8px); position: relative;}
.addresslist li a{display: block; padding: 31px 32px; background: rgba(249, 249, 249, 0.5); border-radius: 16px; border: 1px solid #CCCCCC; box-shadow: inset 0 0 0 0 #A72B2A; /* 기본 상태에서 inset 그림자 없음 */ box-sizing: border-box; transition: 0.3s;}
.addresslist li.daejeon a, .addresslist li.clara a, .addresslist li.taipei a, .addresslist li.tokyo a{padding: 44px 32px;} 
.addresslist li.sppadding a{padding: 33.5px 32px;}
.addresslist li a p{display: block; width: 100%; transition: all 0.3s;}
.addresslist li a span{transition: all 0.3s;}
.addresslist li:hover a{background: #fff; border: 1px solid #A72B2A; box-shadow: inset 0 0 0 2px #A72B2A; /* hover 시 inset으로 테두리 효과 */}
.addresslist li:hover a p{color: #000;}
.addresslist li:hover a span{color: #666666 !important;}

/******************* Recruitment Information ********************/
/* 1. Ideal Talent */
.idel-person li{width: 100%; border: 1px solid #CCC; padding: 67px 20px; box-sizing: border-box;}
.idel-person li .moimg{display: none;}
/* 2. Personnel Management System */
.rank {gap:92.5px;}
.rank li{padding: 16px 24px; box-sizing: border-box; border: 1px solid #CCCCCC; border-radius: 24px; width: 100%; position: relative;}
.rank li::after{content: ''; clear: both; display: block; background: url(/resources/front/common/img/ico_arrow_big_long.svg) no-repeat center center; background-size: cover; position: absolute; left:100%; top: 50%; transform: translateY(-50%); width:76.5px; height: 6px;}
#sub.personnel-system.responsive_sub .section4 .cont-area > .sitecon a i,
#sub.apply .section2 .cont-area .sitecon a i {font-style: normal;}
/* 3. Job Description */
.rank li:last-child:after{display: none;}
.rank li .ri{width: calc(100% - 128px);}
.rank li .ri span{display: block; padding: 16px 0; box-sizing: border-box;}
.rank li .ri span + span{border-top: 1px solid #CCCCCC;}
.rank_plus{padding: 24px; box-sizing: border-box; border-radius: 16px;}
.wage-system{gap: 56px;}
.wage-system li{padding: 48px 24px; box-sizing: border-box; background: #fff; border-radius: 26px; max-width: 302px; width: 100%; position: relative; align-self:stretch;}
/* .wage-system li span{min-height: 78px;} */
.wage-system li .imgbox{max-width: 112px; max-height: 112px; width: 100%; height: 100%;}
.wage-system li + li::before{content: ''; clear: both; display: block; background: url(/resources/front/common/img/ico_plus.svg) no-repeat center center; background-size: cover; position: absolute; top: 50%; left: -38px; width: 24px; height: 24px; transform: translateY(-50%);}
.evaluate{gap: 72px;}
.evaluate li{border: 1px solid #CCCCCC; border-radius: 24px; padding: 48px 16px 16px; box-sizing: border-box; width: 100%; position: relative;}
.evaluate li .imgbox{max-width: 64px; max-height: 64px; width: 100%; height: 100%; margin: 0 auto;}
.evaluate li span{border-radius: 16px; padding: 16px; box-sizing: border-box; display: block; width: 100%;}
.evaluate li + li::before{content: ''; clear: both; display: block; background: url(/resources/front/common/img/ico_plus.svg) no-repeat center center; background-size: cover; position: absolute; top: 50%; left: -48px; width: 24px; height: 24px; transform: translateY(-50%);}
.benefits{}
.benefits > li + li{margin-top: 32px;}
.benefits-list li{background-color: #fff; border-radius: 16px; padding: 32px; box-sizing: border-box; width: 100%;}
.benefits-list li .ico{max-width: 64px; max-height: 64px; width: 100%; height: 100%;}
.benefits-list li span{width: calc(100% - 96px);}
.benefits-list li span em{display: block;}
.linkarea li{}
.linkarea li a{display: block; /*padding-bottom: 57.325%;*/ min-height: 360px; height: 100%; box-sizing: border-box; border-radius: 24px; overflow: hidden; position: relative;}
.linkarea li a .txtbox{position: absolute; bottom: 48px; left: 0; width: 100%; z-index: 1; padding: 0 48px; box-sizing: border-box;}
#sub.job-introduction .arcodian-list ul > li ul + ul{margin-top: 16px;}
#sub.job-introduction .arcodian-list ul > li ul > li em{display: block; margin-left: 11px;}
#sub.job-introduction .arcodian-list .dotlist::before{background: #000;}
/* 4. Human Resource Training */
.development {gap:72px;}
.development > li{max-width: 266px; width: 100%; position: relative;}
.development > li h6{text-align:center;}
.development > li + li::before{content: ''; clear: both; display: block; background: url(/resources/front/common/img/ico_plus.svg) no-repeat center center; background-size: contain; position: absolute; top: 110px; right: 100%; width: 72px; height: 24px;}
.development li{padding: 47px 16px 15px; box-sizing: border-box;}
.development li > ul > li{padding: 16px 10px; box-sizing: border-box;  border-radius: 16px; width: 100%; text-align: center; position: relative;}
.development li > ul > li > em{display:inline-block;}
.development li > ul > li > p{width: fit-content; margin: 0 auto; display: inline;}
.development li > ul > li > p:before{top:8px;}
.hr-system .section3 .development {gap:93px;}
.hr-system .section3 .development > li{max-width: 365px; width: 100%; position: relative; padding:15px 24px; box-sizing: border-box;}
.hr-system .section3 .development > li + li::before {width:93px; background:url('/resources/front/common/img/ico_arrow_big_long.svg') no-repeat left center; background-size:contain; height:6px; top:170px;}
.hr-system .section3 .development li > .explanation-box{padding: 24px; border-radius: 16px; box-sizing: border-box;}
.hr-system .section3 .development li > .explanation-box.bg-white{border-radius: 16px;}
.hr-system .section3 .development li > .explanation-box span, .hr-system .section3 .development li > .explanation-box span > em{display: block;}
.hr-system .section3 .development li > .explanation-box > p{border-radius: 16px; padding: 16px; box-sizing: border-box;}
.hr-system .section4 .arcodian-list .content > ul li > b{width: 21.702%;}
.hr-system .section4 .arcodian-list .content > ul li > p{width: calc(78.298% - 32px);}
.dotlist-container {display: grid; grid-template-columns: repeat(3, 1fr); /* 기본적으로 3열로 배치 */ gap: 16px; /* 요소들 간의 간격 */}
.dotlist-container span:nth-child(n+4) {grid-template-columns: repeat(2, 1fr); /* 4개 이상일 경우 2개씩 배치 */}
.dotlist-container.onefr{grid-template-columns:1fr;}

/* 5. Application */
#sub.personnel-system .section:last-of-type, #sub.apply .section:last-of-type, #sub.ethics-hotline .section2, #sub.humanrights .section:last-of-type, #sub.boardofdirectors .section:last-of-type{padding-bottom: 180px !important;}
.stepbox{padding: 15px 16px 31px; box-sizing: border-box; border: 1px solid #CCCCCC; border-radius: 24px; -webkit-box-align: start;  -moz-align-items: flex-start;  -ms-flex-align: start;  align-items: flex-start;}
.stepbox li{width:100%; padding: 40px 0 3px; box-sizing: border-box; position: relative;}
.stepbox li .icobox{max-width: 64px; max-height: 64px; width: 100%; height: 100%;}
.stepbox li .step{padding: 2px 7px; box-sizing: border-box; border-radius: 8500px;}
.stepbox li b{min-height: 55px; display: block;}
.stepbox li b em{display: block;}
.stepbox li + li::before{content: ''; clear: both; display: block; width: 24px; height: 24px; background: url(/resources/front/common/img/ico_arrownext_g.svg) no-repeat center center; background-size: cover; position: absolute; top: 50%; left: -25px; transform: translateY(-50%);}
.steplist_row li{padding: 32px; box-sizing: border-box; background-color: #fff; border-radius: 16px;}
.steplist_row li .le{flex-shrink:0;}
.steplist_row li .le b{min-width: 180px;}
.steplist_row li .le b em{display:block;}
.steplist_row li .ri{ display:block; width:100%;}


/******************* IR ********************/
/* 1. Financial Information */
.mocolgroup{display: none;}
#sub .section + .section{margin-top: 120px; padding-bottom: 120px;}
#sub.ir .section1 .top .table-item{max-width: 680px; width: 100%;}
#sub.ir .section1 .bottom{margin-top: 48px;}
#sub.ir .section1 .bottom table{min-width: 800px; width: 100%;}
.tbl-box.tbl-box2 table tbody td{border-left: 0; padding: 16.5px 0; height: fit-content; box-sizing: border-box;}
.google-visualization-tooltip-item-list{margin: 0 !important;}
.google-visualization-tooltip li.google-visualization-tooltip-item{padding: 0; margin: 0 !important; }
.google-visualization-tooltip li.google-visualization-tooltip-item + li.google-visualization-tooltip-item{margin-top: 4px !important;}
.google-visualization-tooltip li.google-visualization-tooltip-item span{font-size: 14px !important; font-weight: 400 !important;}
.google-visualization-tooltip li.google-visualization-tooltip-item:last-child span{font-weight: 600 !important;}
/* 범례 컨테이너에 배경색 및 그리드 적용 */
#sub.ir .section1 .top .chart-item #piechart svg{overflow: visible !important;}
#piechart svg g text[text-anchor="middle"] + rect {fill: #222 !important;}
#piechart svg g g g:last-child {display: grid;  grid-template-columns: repeat(3, 1fr); background-color: #f0f0f0; padding: 10px; gap: 10px; box-sizing: border-box; border-radius: 4px; }
.legend_label{ background: #F3F3F3; max-width: 400px; padding: 16px 32px; box-sizing: border-box; border-radius: 16px; position: relative; gap: 4px; margin-top: 42px; display: grid; grid-template-columns: 1fr 1fr;}
.legend_label#legend1{margin: 48px auto 0; display: flex !important; align-items: center !important; justify-content: center !important;}
.legend_label li{cursor: pointer;/* margin-left: 20px;*/ line-height: 26px; white-space: nowrap;}
/* .legend_label li:first-child, .legend_label li:last-child{margin-left: 0;} */
.legend_label li span{display: inline-block; width: 12px; height: 12px; border-radius: 50%;}
#sub.ir .section1 .table-box table {min-width:757px;}
#sub.ir .section2 .legend_label{max-width:460px;}
#sub.ir .section2 table{min-width: 378px;}
#sub.ir .section2 .table-item + .table-item table{min-width:320px;}
#sub.ir .section4 .table-box table {min-width:711px;}
/* 2. IR Reports */
#sub.irlist .section1 .cont-area{margin-top: 48px;}
ul.irlist > li + li{padding-top: 60px; border-top: 1px solid #ddd;}
ul.irlist > li:last-child{border-top: none;}
ul.irlist > li > ul{width: calc(100% + 24px); margin-left: -24px;}
ul.irlist > li > ul > li{float: left; width: calc(33.333% - 24px); margin-left: 24px; border: 1px solid #ccc; background: #fff;}
ul.irlist > li > h6{margin-bottom: 16px;}
ul.irlist > li > ul > li h6 em{display: block; margin-bottom: 5px;}
ul.irlist > li > ul > li .downcon{max-width: 250px; width: 100%;}
ul.irlist > li > ul > li .downcon a{display: inline-block; width: fit-content; padding: 0 20px; box-sizing: border-box; position: relative; color: #bbb; text-align: center;}
ul.irlist > li > ul > li .downcon a:last-child{padding-right: 0;}
ul.irlist > li > ul > li .downcon a + a::before{content: ''; clear: both; display: block; width: 1px; height: 15px; background: #ddd; position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
ul.irlist > li > ul > li .downcon a.on{color: #000;}
.downloadimg{background: #000000; padding: 12px; box-sizing: border-box; border-radius: 50%;width: fit-content; transition: all 0.3s;}
.downloadimg:hover{}
.sitecon span{width: calc(100% - 335px);}
.sitecon > a.downbtn{padding: 13.5px 30px; box-sizing: border-box; border-radius: 100px;  display: flex; max-width: 323px; width: 100%; transition: all 0.3s;}
.sitecon > a.downbtn:hover{background-color: #BC0B2A !important;}
.sitecon > a.downbtn.applybtn{max-width: 353px;}
.sitecon > a.downbtn.irbtn{max-width: 393px; padding: 8px 30px;}
ul.announcementlist li a{display: flex;}
ul.announcementlist li.downloadwrap a .txtarea{width: calc(100% - 70px);}
ul.announcementlist li a .downloadimg{width: 48px;}
ul.announcementlist li .date{margin-top: 8px;}
ul.announcementlist li + li{margin-top: 16px;}
#sub.announcement .tbl-box{overflow: hidden;}
#sub.ir .section1 .top .chart-item #piechart{width: 400px !important; height: 400px !important;}
.bri{display: none;}

/* ==================================================
|                       Products 
================================================== */
/* 공통 */
.line-box .line.length {width:4px; height:40px; box-sizing:border-box; background-color:#222222; margin:32px auto;}
.line-box .line {width: 40px; height: 2px; box-sizing:border-box; background-color:#222222; margin: 16px auto;}
.arrow-txt {position:relative; padding-right:12.25px;}
.arrow-txt:after {position:absolute; display:block; content:''; clear:both; width:4.5px; height:9px; background-image:url('/resources/front/common/img/arrow_right.svg'); background-position:center; background-repeat:no-repeat; top:50%; transform:translateY(-50%); left:100%;}
.line-txt {position:relative; padding-bottom:18px;}
.line-txt:after {position:absolute; display:block; content:''; clear:both; width:40px; height:2px; background-color:#222222; left:50%; transform: translateX(-50%); bottom:0;}
.line-txt-long:after {width:100%;}
/* .tbl-box table tbody td{padding:16.5px 24px;} */
.tbl-box table tbody td.p-16-10{padding:16.5px 10px;}
.tbl-box table tbody td.p-16-24-10{padding:16.5px 10px 16.5px 24px;}

.imgsection{ background-position:center; background-repeat:no-repeat; padding:110px 0 !important; box-sizing:border-box; background-size: cover; margin-top: 0 !important;}
.imgsection .cont-area { gap: 24px;}
.imgsection .cont-area > *{margin: 0 auto;}
#sub .mo-tab  {display:none;}
#sub.products .scale-li{position: relative;}
#sub.products .scale-li li{width: 33.333%;}
#sub.products .scale-li li img {transition: transform 0.3s ease-out;}
#sub.products .scale-li li:hover img {transform: scale(1.2);}
#sub.products .scale-li h5 { bottom: 24px; width: 100%; left: 0;}
#sub.products .btn-box > * { padding:13.5px 64px 13.5px 40px; box-sizing:border-box; transition:.3s ease-out;}
#sub.products .btn-box span:after {width:24px; height:24px; position:absolute; display:block; content:''; clear:both; background-image:url('/resources/front/common/img/btn_arrow.svg'); background-position:center; background-repeat:no-repeat; left:100%; top:50%; transform:translateY(-50%);}
#sub.products .btn-box > *:hover {background-color: #C6AB85;}
.list-li.title-in .titarea{width: calc(100% - 280px);} 
/* #sub.products .list-li .relative:after {width:16px; height:16px; position:absolute; display:block; content:''; clear:both; background-image:url('/resources/front/common/img/info_arrow.svg'); background-position:center; background-repeat:no-repeat; left:100%; top:50%; transform:translateY(-50%);} */

/* Display CI > Touch CI */
#sub.products .mo-txt{display: none;}
#sub.products .touch-ic-box .absolute { left:50%; margin-left:-100px; transform: translateX(-50px); transition:0.6s ease; padding:12px 18px; box-sizing: border-box;}
#sub.products .touch-ic-box .absolute1 { top:30%;}
#sub.products .touch-ic-box .absolute2 { top:71%; }
#sub.products .draw-box {padding:0 72px 39px 72px; box-sizing:border-box;}
#sub.products .draw-box .pen {bottom:15%; left:80px; z-index:3;  transition:transform 3s ease;}
#sub.products .draw-box .line {width:0; bottom: 23%; z-index:2; transition: width 4.5s ease; left:100px;}
#sub.products .draw-box .line1 {width:0; bottom: 23%; z-index:2; transition: width 3s ease; left:100px;}
#sub.products .draw-box .pad {bottom:0;  margin-top:200px;}
#sub.products .reset-btn {width:132px; height:48px; border-radius:24px; border:1px solid #cccccc; bottom:32px; left:50%; transform:translateX(-50%);}

@media screen and (max-width: 1330px){
    #draw_pos {padding-left:20px;}
    #sub.products .draw-box  > .flex-column {-webkit-box-align: center;  -moz-align-items: center;  -ms-flex-align: center;  align-items: center;}
    #sub.products .draw-box .wid100.relative {text-align:center; width:fit-content !important;}
    #sub.products .draw-box .pen {width:150px; left:70px; bottom:13%;}
    #sub.products .draw-box .line {left:81px; bottom:21%;}
    #sub.products .draw-box .pad {width:400px; margin-top:160px;}
}
@media screen and (max-width: 1030px){
    .pc1030 {display:none;}
    .mo1030 {display:block;}
    #draw_pos {padding-left:30px;}
    #sub.products .draw-box .pen {width:100px; left:50px; bottom:13%;}
    #sub.products .draw-box .line {left:57px; bottom:19.16%;}
    #sub.products .draw-box .pad {width:276px; margin-top: 120px;}
}

/* Heat Dissipation > Metalized Ceramic Substrate */
#sub.heat .section1 .cont-area > .bg-lgrey {gap:62px;}
#sub.heat .section1 .cont-area > .bg-lgrey,
#sub.heat.material .section2 .cont-area > .bg-lgrey {padding:48px 109px;}
#sub.heat .section1 .heat-img {padding:0 21px 0 8px;}
#sub.heat .section2 .cont-area > .bg-lgrey {padding:48px 110px;}
#sub.heat .section2 .cont-area .heat-box .pos-img {max-width:unset;}
#sub.heat .section2 .heat-ani1 {clip-path: inset(0 0 100% 0);  animation: draw-animation1 2s infinite; position: absolute; right: 20px; top: 30px;}
@keyframes draw-animation1 {
    0% {
        clip-path: inset(0 0 100% 0); /* 시작할 때 보이지 않음 */
    }
    100% {
        clip-path: inset(0 0 0 0); /* 끝날 때 전체가 보이게 */
    }
}
#sub.heat .section2 .cont-area .heat-box2 {margin-top:64px;}
@media screen and (max-width: 1330px){
    #sub.heat .section2 .cont-area .heat-box {width:fit-content; margin:45px auto 0 auto;}
    #sub.heat .section2 .cont-area .heat-box .pos-img,
    #sub.heat .section2 .cont-area .heat-box2 img {width: 100%;}
    #sub.heat .section2 .heat-ani {width: 25%; top: 24px; right: 16px;}
}
@media screen and (max-width: 1030px){
    #sub.heat .section2 .cont-area .heat-box {margin:35px auto 0 auto;}
    #sub.heat .section2 .heat-ani {top: 16px; right: 14px; }
}

/* Heat Dissipation > Heat Dissipation Material */
#sub.products.heat.material .section2 .cont-area .tbl-box > table {min-width:480px;}
#sub.heat form .ipt-box {height:56px; border-radius:8px; border:1px solid #666666;}
#sub.heat form .ipt-box:focus-within {border-color:#111111;}
#sub.heat form .ipt-box input {border:none; width:100%; height:100%; border-radius:8px; padding:0 20px; box-sizing:border-box; outline:none; font-size:16px; font-weight:400; background-color:#ffffff;}
#sub.heat form .ipt-box input::placeholder {font-size:16px; font-weight:400; color:#888888;}
#sub.heat form .ipt-box input:focus {border:none; outline:none;}
#sub.heat form .agree-txt {border:1px solid #666666; border-radius:16px; background-color:#ffffff; padding:20px 8px 10px 20px; box-sizing:border-box;}
#sub.heat form .agree-txt > div {max-height:158px; overflow-y:auto; padding-bottom:10px; padding-right:8px;}
#sub.heat form .agree-txt > div::-webkit-scrollbar{width:6px;}
#sub.heat form .agree-txt > div::-webkit-scrollbar-track{background: #ffffff; border-radius: 4px;}
#sub.heat form .agree-txt > div::-webkit-scrollbar-thumb{background: #666666; border-radius: 4px;}
#sub.heat form .contactbtn {transition:.3s ease-out;}
#sub.heat form .contactbtn:hover,
#datalibrary-popup .btn-box .bg-primary1:hover {background-color: #BC0B2A;}

/* Applications > Automotive */
#sub.automotive .section1 .pc-img{max-width: 1280px; max-height: 600px; width: 100%;}
#sub.automotive .section2 .pos-txt {position:relative; top:-17px;}
#sub.automotive .section2 .cont-area .grid-cols-2:last-of-type .pos-txt {top:6px;}

/***********************************************
            sustainability 
***********************************************/
#sub.datalibrary .section:not(.bg-lgrey),
#sub.governance .section:not(.bg-lgrey),
#sub.social_2depth .section:not(.bg-lgrey),
#sub.responsive_sub .section:not(.bg-lgrey){padding-bottom: 0 !important;}


/****************** Jeong-Do Management ******************/
/* 1. Jeong-Do Management */
.managementlist > li{gap: 24px;}
.managementlist > li .circle-box {max-width: 150px; width: 100%; height: 150px; background: #746661; border-radius: 50%;}
.managementlist > li > ul{width: calc(100% - 174px);}
.dotlist{position: relative; padding-left: 13px;}
.dotlist::before{content: ''; clear: both; display: inline-block; width: 5px; height: 5px; position: absolute; top: 10px; left: 0; background: #666666; border-radius: 50%;}
.dotlist.dot-black::before{background: #000;}
/* 2. Code of conduct */
.behaviorlist{display: flex; gap: 25px;}
.behaviorlist > li{border-radius: 24px; overflow: hidden; position: relative; max-width: 410px; width: 100%; padding-bottom: 39.844%;}
.behaviorlist > li > .txt{padding: 50px 40px; box-sizing: border-box; position: absolute; width: 100%; height: 100%;}
.behaviorlist > li > .txt p{margin-top: 8px;}
/* 3. Code of conduct */
.arcodian-list {border-top: 2px solid #222222; border-bottom: 1px solid #222;}
.arcodian-list > ul > li {width: 100%; border-bottom: 1px solid #ccc;}
.arcodian-list > ul > li .tit {position: relative; width: 100%;}
.arcodian-list > ul > li .tit .item-box {padding: 25.5px 60px 25.5px 40px; width: 100%; display: block; box-sizing: border-box; position: relative;}
.arcodian-list > ul > li .tit a::after {content: ''; clear: both; display: block; background-image: url(/resources/front/common/img/ico_down.svg); background-repeat: no-repeat; background-position: center; background-size: cover; width: 24px; height: 24px; position: absolute; top: 50%; right: 40px; transform: translateY(-50%);}
.arcodian-list > ul > li .tit span {display: inline-block; position: relative; padding-right: 17px;}
.arcodian-list > ul > li .tit span::after{content: ''; clear: both; display: block; width: 1px; height: 15px; background: #DDDDDD; position: absolute; top: 50%; right: 5px; transform: translateY(-50%);}
.arcodian-list > ul > li .content {display: none; background: #F9F9F9; padding: 40px; border-top: 1px solid #CCCCCC; box-sizing: border-box;}
.arcodian-list > ul > li .content > * {background: #fff; padding: 24px; box-sizing: border-box; border-radius: 16px;}
.arcodian-list > ul > li.is-open .tit a::after{background-image: url(/resources/front/common/img/ico_up.svg);}
.arcodian-list > ul > li.is-open .tit {color: #A72B2A;}
.arcodian-list > ul > li.is-open span::after{background: rgba(167, 43, 42, 0.6);}
.arcodian-list > ul > li.is-ready .content {display: block;}
.arcodian-list > ul > li .content > ul > li > ul{padding-left: 25px; margin-top: 5px;}
/* 4. Jeong-Do Management Program */
.programlist li{background: #fff; border: 1px solid #ccc; border-radius: 24px; padding: 31px 32px; box-sizing: border-box;}
.programlist li .icon{width: 112px; height: 112px; border-radius: 500px; background: rgba(215, 127, 126, 0.10);}
.programlist li .txt{width: calc(100% - 136px);}
.programlist li .txt p{margin-top: 8px;}
.programlist li a{display: block; text-wrap: nowrap; padding: 5px 16.44px; box-sizing: border-box; border-radius: 28px; transition: all 0.3s; max-width: 139px;}
.programlist li a:hover{background: #BC0B2A;}
.programlist li:nth-child(8) .txt{width: calc(100% - 139px);}
.programlist li .txt p .display-block {display: none;}
/* 5. Ethics Hotline */
#sub.ethics-hotline .section1 .cont-area > li{background: #F9F9F9; padding: 40px; box-sizing: border-box; border-radius: 24px;}
.report_type{display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 24px;}
.report_type li{width: 100%; border-radius: 16px; box-sizing: border-box; overflow: hidden;}
.report_type li b{display: block; background: rgba(215, 127, 126, 0.10); padding: 15.5px; box-sizing: border-box; min-height:89px; display:flex; align-items: center; justify-content: center;}
.report_type li span{background: #fff; padding: 12px 24px; box-sizing: border-box; min-height: 120px;}
#sub.ethics-hotline .cont-area > li:nth-child(2){padding: 60px 40px;}
.protectlist li{background: #fff; border-radius: 24px; padding: 24px; box-sizing: border-box; /*width: 25%;*/ min-height: 138px;}
.num{border-radius: 12px; width: 24px; height: 24px; flex-shrink:0;}
#sub.ethics-hotline .section2{background: #F9F9F9;}
.infolist{/*width: calc(100% + 16px) !important; margin-left: -16px;*/ position: relative; display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px;}
.infolist > li{background: #fff; padding: 24px; box-sizing: border-box; /*width: calc(33.333% - 16px);*/ border-radius: 16px; min-height: 155px; /*float: left; margin-left: 16px;*/}
.infolist > li:last-child{/*width: calc(100% - 16px) !important;*/ padding: 40px 24px;  /*margin-top: 16px;*/ grid-column: 1/4;}
.infolist > li .icobox{width: 50px; height: 50px; border-radius: 500px; background: #F9F9F9;}
.infolist > li em img {height: fit-content; position: relative; top:1px;}
.infolist > li a{padding: 13.5px 40px; box-sizing: border-box; border-radius: 28px; transition: all 0.3s;}
.infolist > li a:hover{background: #BC0B2A;}

/***********************************************
            sustainability 
***********************************************/
/******************* Overview ****************/
/* 1. 위원장 메시지 */
#sub.chairmanmessage .cont-area{position: relative;}
#sub.chairmanmessage .cont-area::after{content: ''; clear: both; display: block; background: url(/resources/front/common/img/chairmanmessage_after.svg) no-repeat center center; background-size: cover; position: absolute;     bottom: -80px; right: 0; width: 100%; height: 100%; z-index: 1; max-width: 550px; max-height: 499px;}
.signature_wrap b{margin-top: 3px;}
.signature_wrap img{margin-left: 13px;}
/* 2. ESG Management
System */
.vision-list > li > h6{max-width: 121px;}
.vision-list > li > .txtbox{width: calc(100% - 121px); max-width: 1086px; box-sizing: border-box; border-radius: 24px;}
.vision-list > li:nth-child(1) .txtbox{padding: 32px;}
.vision-list > li > .txtbox > em{color: rgba(255, 255, 255, 0.8); display: block;}
.vision-list > li > .txtbox > li{width: 100%; position: relative;}
.vision-list > li > .txtbox > li > span{display: flex; padding: 16px; box-sizing: border-box; border-radius: 16px; align-items: center; justify-content:center;}
.vision-list > li > .txtbox > li > span:nth-of-type(2) {min-height: 110px;}
.vision-list > li > .txtbox > li > span:nth-of-type(3) {min-height: 84px;}
.vision-list > li > .txtbox > li:nth-of-type(2) > span:nth-of-type(3) br,
.vision-list > li > .txtbox > li:nth-of-type(2) > span:nth-of-type(1) br,
.vision-list > li > .txtbox > li:nth-of-type(1) > span:nth-of-type(2) br {display: none;}
.vision-list > li.pc-box > .txtbox > li > span.bg-primary2{height: 100%; display: flex; justify-content: center; align-items: center; }
.vision-list > li:nth-child(2) .txtbox > li:not(.txtbox) {border: 1px solid #ccc; border-radius: 24px; padding: 54px 20px; box-sizing: border-box;}
.vision-list > li:nth-child(3) .txtbox > li > span{padding: 14.5px;}
.vision-list > li:nth-child(4){margin-top: 92px;}
.vision-list > li:nth-child(4) .txtbox > li::before{content: ''; clear: both; display: block; background: url(/resources/front/common/img/ico_arrow_big_long.svg) no-repeat center center; position: absolute; top: -40px; left: 50%; transform: translateX(-50%) rotate(-90deg); width: 76.5px; height: 6px;}
#sub.management .section2 .cont-area{margin-top: 55px;}
#sub.management .section3 .table-box table {min-width:720px;}
#sub.management .tbl-box table tbody td:nth-child(n+3), #sub.management .tbl-box table tbody td:first-child, #sub.management .tbl-area.normal .tbl-box table tfoot td:first-child, #sub.doublematerialityassessment .tbl-box table tbody td:nth-child(n+3){border-left: 1px solid #ddd;}
#sub.management .tbl-box table tbody tr:first-child td{border-top: 1px solid #6a3434;}
#sub.management .tbl-box table tbody td{padding: 16.25px 24px; height: fit-content;}
#sub.doublematerialityassessment .tbl-box table tbody td{height: fit-content;}
/* 3. Double Materiality Assessment*/
.step-list .step.step2,
.step-list .step.step3,
.step-list .step.step4 {margin-top: 100px;}
.step-list .step .le{position: relative; max-width: 230px; width: 100%; border-radius: 32px; padding: 27px 0; box-sizing: border-box;}
.step-list .step.step1 .le{border: 5px solid #FFE5E5;}
.step-list .step.step1 .le::after{content: ''; clear: both; display: block; width: 55px; height: 50px; background: url(/resources/front/common/img/step1_after.svg) no-repeat center center; background-size: 100% 100%; position: absolute; bottom: -45px; left: 50%; transform: translateX(-50%);}
.step-list .step.step2 .le{border: 5px solid #FDF4BA; min-height: 681px;}
.step-list .step.step2 .le::after{content: ''; clear: both; display: block; width: 55px; height: 50px; background: url(/resources/front/common/img/step2_after.svg) no-repeat center center; background-size: 100% 100%; position: absolute; bottom: -45px; left: 50%; transform: translateX(-50%);}
.step-list .step.step3 .le {border: 5px solid #DFDFDF;}
.step-list .step.step3 .le::after{content: ''; clear: both; display: block; width: 55px; height: 50px; background: url(/resources/front/common/img/step3_after.svg) no-repeat center center; background-size: 100% 100%; position: absolute; bottom: -45px; left: 50%; transform: translateX(-50%);}
.step-list .step.step4 .le {border:5px solid #ECE2D5; box-sizing:border-box;}
.step-list .step .le em{display: block; background: #fff; padding: 2px 7px; box-sizing: border-box; border-radius: 8500px; width: fit-content;}
.step-list .step .le b{display: block; margin-top: 6px; text-align: center;}
.step-list .step .ri{max-width: 950px; width: calc(100% - 252px); position: relative;}
.step-list .step .ri::after{content: ''; clear: both; display: block; width: 100%; height: 1px; background-color: #ccc; position: absolute; bottom: 0; right: 0;}
.step-list .step.step1 .ri,
.step-list .step.step3 .ri {min-height:145px;}
.step-list .step.step2 .ri {min-height:680px;}
.step-list .step.step2 .ri > span{display: block;}
.step-list .step.step1 .ri::after,
.step-list .step.step2 .ri::after,
.step-list .step.step3 .ri::after {bottom: -50px;}
.step-list .step.step4 .ri::after{display: none;}
.analyzelist{border-radius: 16px; padding: 24px 32px; box-sizing: border-box;}
.analyzelist li.wid50 {width:calc(50% - 15px);}
.analyzelist > li > strong{padding: 10px 16px; box-sizing: border-box; width: 100%; display: block; border-radius: 16px; text-align: center;}
.analyzelist > li > p{margin-top: 14px; padding-left: 10px; padding-right: 16px; box-sizing:border-box;}
.analyzelist > li > p + p {margin-top: 5px;}
.analyzelist > li > p > span, .analyzelist > li > p > em{display: block;}
.analyzelist > li > p > em{padding-left: 13px; margin-top: 7px;}
#sub.doublematerialityassessment .tbl-box table tbody td span{display: block;}
#sub.doublematerialityassessment .section2 .cont-area table{min-width: 1280px; }
#sub.doublematerialityassessment .section2 .cont-area table thead tr:nth-child(3) th,
#sub.doublematerialityassessment .section2 .cont-area table thead tr:nth-child(2) th:nth-child(3),
#sub.doublematerialityassessment .section2 .cont-area table thead tr:nth-child(2) th:nth-child(6){height: 80px;}
#sub.doublematerialityassessment .section2 .cont-area table th{padding: 0; border-radius: 0;}
#sub.doublematerialityassessment .section2 .cont-area table td{padding: 11.5px 5px; }
#sub.doublematerialityassessment .section3 .cont-area table{min-width: 1178px; }

/* 4. Stakeholder Engagement */
#sub.stakeholder .cont-area{padding: 80px 72.5px; box-sizing: border-box; border: 1px solid #CCC; border-radius: 16px;}

/***************** Environmental ****************/
/* 1. Action on Climate 
Change */
.starlist2{margin-left: 12px; position: relative;}
.starlist2::before{content: '*'; clear: both; display: block; color: #A72B2A; width: fit-content; position: absolute; left: 0; top: 2px;}
#sub.climatechange .section1 .img-box > div,
#sub.environmentalmangement .section1 .img-box > div,
#sub.riskmanagement .section2 .img-box{padding: 56px; border: 1px solid #ccc; border-radius: 16px; box-sizing: border-box;}
#sub.climatechange .section2 .cont-area > b{padding: 15.5px; box-sizing: border-box;}
#sub.climatechange .section2 .tbl-box table{min-width: 1000px;}
#sub.climatechange .section2 .tbl-box table tbody td{height: 86px;}
#sub.climatechange .protectlist{display: grid; grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 56px; grid-row-gap: 24px;}
#sub.climatechange .protectlist > li{width: 100%; max-width: 389.33px; padding: 23px 24px; box-sizing: border-box; background: #fff; border: 1px solid #DDDDDD; border-radius: 24px; position: relative;}
#sub.climatechange .protectlist > li + li::before{content: ''; clear: both; display: block; width: 24px; height: 24px; background: url(/resources/front/common/img/ico_arrownext_g.svg) no-repeat center center; background-size: cover; position: absolute; top: 50%; left: -40px; transform: translateY(-50%);}
#sub.climatechange .protectlist > li:nth-child(4)::before{display: none;}
#sub.climatechange .protectlist > li p{width: 100%; padding: 16px; box-sizing: border-box; border-radius: 16px; min-height: 84px; height:100%;}
#sub.climatechange .protectlist > li p span{display: block; padding-left: 13px;}
#sub.climatechange .section4 .imgbox{padding: 79px 115px; box-sizing: border-box; border: 1px solid #ccc; border-radius: 16px;}
#sub.climatechange .section4 .imgbox::-webkit-scrollbar {width:1px; height:4px;}
#sub.climatechange .section4 .imgbox::-webkit-scrollbar-track {background: #dddddd; border-radius: 4px;}
#sub.climatechange .section4 .imgbox::-webkit-scrollbar-thumb {background: #666666; border-radius: 4px;}
#sub.climatechange .section4 .cont-area > em{display: block;}
#sub.climatechange .section4 .cont-box{padding: 32px; border-radius: 16px; box-sizing: border-box;}
sub.climatechange .section4 .cont-box .txtarea{max-width: 620px; width: 100%;}
#sub.climatechange .section4 .cont-box .txtarea li b span{width: 24px; height: 24px; border-radius: 50%; flex-shrink:0; position:relative; top:3px;}
#sub.climatechange .section4 .cont-box .txtarea li em{display: block;}
#sub.climatechange .section4 .cont-box .imgarea{max-width: 556px; width: 100%;}
#sub.climatechange .section4 .cont-box .imgarea .imgcon:nth-child(1) .img {min-width: 300px;}
#sub.climatechange .section4 .cont-box .imgarea .imgcon:nth-child(2) .img{min-width: 240px; text-align: center;}
#sub.climatechange .section4 .cont-box .imgarea .imgcon .img{max-height: 300px;}
#sub.climatechange .section4 .cont-box .imgarea .imgcon .img img{border-radius: 16px; overflow: hidden;}
/* 2. Environmental Management */
a.linktag{transition: all 0.3s;}
a.linktag:hover{background: #BC0B2A !important;}
.govstep{padding: 56px 63px; border-radius: 16px; box-sizing: border-box; gap:64px;}
.govstep .ico{position: relative;}
.govstep li {position: relative;}
#sub.environmentalmangement .govstep_sc {overflow-x: auto;}
#sub.environmentalmangement .govstep {min-width: 894px;}
#sub.environmentalmangement .govstep li .ico {padding-bottom: 132px;}
#sub.environmentalmangement .govstep li p.fs18 {min-width: 140px; position: absolute; top:126px; left:50%; transform: translateX(-50%);}
.govstep li .ico::before{content: ''; clear: both; display: block; width: 40px; height: 6px; background: url(/resources/front/common/img/ico_arrow_big.svg) no-repeat center center; background-size: 100% 100%; position: absolute; top: 50%; left: 100%; transform: translateY(-50%);}
#sub.environmentalmangement .govstep li .ico::before{top:55px; transform: unset;}
.govstep li:last-child .ico::before{display: none;}
.certification-con{padding: 32px; box-sizing: border-box; border-radius: 16px;}
.certification-con .txtbox{width: calc(100% - 446px);}
.certification-con .imgbox{max-width: 406px;}
.certification-con .imgbox > *{padding: 0 10px; box-sizing: border-box;}
.certification-con .imgbox > * img{border-radius: 16px; box-sizing: border-box; overflow: hidden;}
.roadmap {gap:92.5px;}
.roadmap li{max-width: 365px;}
.roadmap li .top{background-color: #fff; border: 1px solid #CCC; box-sizing: border-box; padding: 15px 35px; position: relative; min-height:176px;}
.roadmap li .top::before{content: ''; clear: both; display: block; width:76.5px; height: 6px; background: url(/resources/front/common/img/ico_arrow_big.svg) no-repeat center center; background-size: 100% 100%; position: absolute; top: 50%; right: -76px; transform: translateY(-50%);}
.roadmap li:last-child .top::before{display: none;}
.roadmap li .top .ico .moimg{display: none;}
.roadmap li .top b em{display: block;}
.roadmap li .top .ico{flex-shrink: 0;}
.roadmap li .btm{padding: 24px; box-sizing: border-box;}
.plan li{background-color: #fff; border: 1px solid #ddd; box-sizing: border-box; padding: 23px 32px;}
.plan li em{display: block; margin-left: 13px;}
.plan li img{max-width: 315px;}
#sub.environmentalmangement .section3 .process-li{row-gap: 32px;}
#sub.environmentalmangement .section3 .process-li> li {width: calc(33.333% - 62px); padding-right: 62px; position: relative;}
#sub.environmentalmangement .section3 .tbl-box table{min-width: 833px;}
#sub.environmentalmangement .roadmap .bg-secondary4{min-height:152px; display:flex; flex-direction: column; justify-content: center;}
/* 3. Hazardous Substances and Resource Management */
#sub.chemicalresource .section1 .txtbox{padding: 24px 32px; box-sizing: border-box;}
.process li{width: 100%; max-width: 400px; padding: 23px 24px; box-sizing: border-box; border: 1px solid #DDD; position: relative;}
.process li + li::before{content: ''; clear: both; display: block; width: 24px; height: 24px; background: url(/resources/front/common/img/ico_arrownext_g.svg) no-repeat center center; background-size: 100% 100%; position: absolute; top: 50%; left: -31px; transform: translateY(-50%);}
.process li:nth-child(4):before{display: none;}
.process li .top{width:100%;}
.process li .btm{padding: 16px; box-sizing: border-box; min-height: 84px; width:100%;}

.process li:nth-child(n+4) .btm{min-height: unset;}
#sub.chemicalresource .section1 .tbl-box table {min-width: 766px;}

/******************* Social ****************/
/* 1. Employees */
.cultural_learning{padding: 32px; box-sizing: border-box;}
.cultural_learning .le{width: calc(100% - 241px); padding: 32px; box-sizing: border-box;}
.cultural_learning .le em{display: block;}
.cultural_learning .ri{max-width: 201px;}
.tablewrap .tbl-box:nth-child(1) table tbody tr:nth-child(1) td, .tablewrap .tbl-box:nth-child(1) table tbody tr:nth-child(3) td{padding: 39px 0;}
.tablewrap .tbl-box:nth-child(1) table tbody tr:nth-child(2) td{padding: 27.5px 0;}
.tbl-img-box > table{width: calc(100% - 260px);}
.tbl-img-box .img{padding-right: 22px; max-width: 220px; box-sizing: border-box;}
#sub.employees .section1 .tbl-box table {min-width: 1075px;}
#sub.employees .section2 .tbl-box table {min-width: 1000px;}
#sub.employees .section2 .tbl-box table tbody tr:nth-child(2) td{vertical-align: baseline;}
#sub.employees .section3 .tbl-box1 table {min-width:663px;}
#sub.employees .section3 .tbl_box2 table {min-width:717px;}
/* 2. Social Contribution */
.direc_principle{padding: 80.5px 52px; box-sizing: border-box;}
.direc_principle > li{gap: 84px;}
.direc_principle > li em{position: relative;}
.direc_principle > li em::before {content: ''; clear: both; position: absolute; top: 50%; left: 76px; transform: translateY(-50%); width: 28px; height: 103px; border-left: 1px solid #666666; border-top: 1px solid #666666; border-bottom: 1px solid #666666;}
.direc_principle > li:last-child em::before{height: 299px;}
.direc_principle > li > div , .direc_principle > li > ul{max-width: 896px; width: 100%;}
.principle{background: rgba(215, 127, 126, 0.1); border: 1px solid #A72B2A; padding: 29px 30px; border-radius: 500px; box-sizing: border-box;}
.principle li{width: 200px; height: 200px; border-radius: 50%; position: relative;}
.principle li + li::before{content: ''; clear: both; display: block; width: 58px; height: 4px; background: url(/resources/front/common/img/dotline.svg) no-repeat center center; background-size: cover; position: absolute; top: 50%; left: -86px; transform: translateY(-50%);}
.principle li > span{width:100%; height:100%; border-radius: 50%; position: relative;}
.campaign > div:nth-child(1){width: calc(100% - 189px); padding: 81.5px 32px;}
.campaign > div:nth-child(2){width: 100%; max-width: 149px;}
.codeofconduct li{width: 100%; max-width: 416px;}
.processtitle{padding: 14.5px; box-sizing: border-box; position: relative;}
.processwrap > li:nth-child(n+1) .processtitle::after{content: ''; clear: both; display: block; width: 32px; height: 10px; background: url(/resources/front/common/img/ico_arrow_big.svg) no-repeat center center; background-size: 100% 100%; position: absolute; top: 50%; right: -45px; transform: translateY(-50%);}
.processwrap > li:last-child .processtitle::after, .processwrap > li .btm .le .processtitle::after{display: none;}
.processwrap > li:nth-child(n+2){max-width: 209.2px; width: 100%;}
.processwrap > li:nth-child(n+2) .processtitle{padding:0; box-sizing: border-box; min-height: 124px; display: flex; align-items: center; justify-content: center}
.processwrap > li .detailprocess{background-color: rgba(166, 164, 157, 0.1); padding: 16px 24px; box-sizing: border-box;}

/* 3. Human Rights Management */
#sub.humanrights .section3 .tbl-box.tbl-box1 table {min-width:1200px;}
#sub.humanrights .section3 .tbl-box.tbl-box2 table {min-width:766px;}
#sub.humanrights .section3 .tbl-box.tbl-box2 table tbody td {text-align: start; padding:16.5px 26px;}
#sub.humanrights .section3 .tbl-box.tbl-box3 table {min-width:784px;}
#sub.humanrights .section4 .processwrap-box {overflow-x:auto;}
#sub.humanrights .section1 .img-box{min-width: 874px;}
#sub.humanrights .section1 .overflow-scroll-x::-webkit-scrollbar,
#sub.humanrights .section4 .processwrap-box::-webkit-scrollbar {width:1px; height:4px;}
#sub.humanrights .section1 .overflow-scroll-x::-webkit-scrollbar-track,
#sub.humanrights .section4 .processwrap-box::-webkit-scrollbar-track {background: #dddddd; border-radius: 4px;}
#sub.humanrights .section1 .overflow-scroll-x::-webkit-scrollbar-thumb,
#sub.humanrights .section4 .processwrap-box::-webkit-scrollbar-thumb {background: #666666; border-radius: 4px;}
#sub.humanrights .section4 .processwrap {min-width:1280px;}
#sub.humanrights .section4 .tbl-box table {min-width:953px;}

/* 4. Occupational Safety and Health */
.safebox li{max-width: 410.67px; width: 100%;}
.safebox li:nth-child(n+4){max-width: 416px;}
.health_safety > div:nth-child(1){width: calc(100% - 410px); min-height: 286px; height: 100%;}
.health_safety > div:nth-child(2){width: 100%; max-width: 370px;}
.accidentstep-box {overflow-x:auto;}
.accidentstep-box::-webkit-scrollbar {width:1px; height:4px;}
.accidentstep-box::-webkit-scrollbar-track {background: #dddddd; border-radius: 4px;}
.accidentstep-box::-webkit-scrollbar-thumb {background: #666666; border-radius: 4px;}
.accidentstep{padding: 56px 80px; box-sizing: border-box; min-width:785px;}
.accidentstep li .img{max-width: 110px; max-height: 110px; width: 100%; height: 100%; position: relative;}
.accidentstep li .img::after{content: ''; clear: both; display: block; width: 40px; height: 10px; background: url(/resources/front/common/img/ico_arrow_big.svg) no-repeat center center; background-size: 100% 100%; position: absolute; right: -39px; top: 50%; transform: translateY(-50%);}
.accidentstep li:last-child .img::after{display: none;}
.safety_system > div:nth-child(1){width: calc(100% - 241px); min-height: 286px; height: 100%;}
.safety_system > div:nth-child(2){width: 100%; max-width: 201px; text-align: center;}
.safety_system > div:nth-child(2) img{max-height: 256px;}
.procedure_imgbox{margin-bottom: 28px; box-sizing: border-box; overflow-x:auto;}
.procedure_imgbox::-webkit-scrollbar {width:1px; height:4px;}
.procedure_imgbox::-webkit-scrollbar-track {background: #dddddd; border-radius: 4px;}
.procedure_imgbox::-webkit-scrollbar-thumb {background: #666666; border-radius: 4px;}
.procedure_imgbox .mo-img {min-width:1159px;}
#sub.safetyandhealth .section2 table {min-width:1092px;}
#sub.safetyandhealth .section3 table {min-width:849px;}
#sub.safetyandhealth .accidentstep-box {overflow-x: auto;}
#sub.safetyandhealth .accidentstep li{width:16.66%;}
#sub.safetyandhealth .accidentstep{min-width:874px;}
#sub.safetyandhealth .accidentstep li {position:relative;}
#sub.safetyandhealth .accidentstep li .img {padding-bottom:224px }
#sub.safetyandhealth .accidentstep p.fs16 {position: absolute; transform: translateX(-50%); left:50%; top:110px; width: 136px; text-align: center;}
#sub.safetyandhealth .accidentstep li .img::after {top:55px;}
#sub.safetyandhealth .process-li p.bg-primary2 {padding:0 12px; box-sizing: border-box; height:82px; display: flex; align-items: center; justify-content: center;}
#sub.safetyandhealth .section4 .tbl-box table {min-width: 1234px;}

/* 5. Supply Chain */
#sub.supplychain .section1 .img-box,
#sub.safetyandhealth .section1 .img-box,
#sub.humanrights .section1 .img-box{padding: 56px; border: 1px solid #ccc; box-sizing: border-box;}
#sub.supplychain .section2 .tbl-box table{min-width: 640px;}
#sub.supplychain .section3 .tbl-box table{min-width: 550px;}
#sub .process-li > li:not(:last-of-type) p.bg-primary2 {position:relative;}
#sub .process-li > li:not(:last-of-type) p.bg-primary2:after {position:absolute; display:block; content:''; clear:both; width:32px; height:6px; left:100%; top:50%; margin-top:-3px; background-image:url('/resources/front/common/img/supplychain_arrow.svg'); background-position:center; background-repeat:no-repeat;}
#sub.supplychain .supplychain-li > li {padding:40px 20px; box-sizing:border-box;}
#sub.supplychain .supplychain-li span {border-radius:8500px; padding:2px 7px;}
#sub.supplychain .section2 .tbl-box table {min-width: 824px;}
#sub.supplychain .section3 .tbl_box1 table {min-width: 982px;}
#sub.supplychain .section3 .tbl_box2 table {min-width: 740px;}

/* 6. Information Security */
#sub.informationsecurity .section2 .guide-li li {padding-left:24px; position:relative; box-sizing:border-box;}
#sub.informationsecurity .section2 .guide-li > ul{position:relative;}
#sub.informationsecurity .section2 .guide-li > ul:before {position:absolute; display:block; content:''; clear:both; width:1px; height:100%; background-color:#dddddd; left:0; top:0; }
#sub.informationsecurity .section2 .guide-li > ul:first-child:before {display:none;}
#sub.informationsecurity .section3 {padding-top:120px;}

/* 7. Quality Management */
#sub.qualitymanagement .section2 .cont-area > .mt-48 > .mt-60 .mt-16,
#sub.qualitymanagement .section3 .cont-area > .mt-48 > .mt-60 > .mt-40 > .mt-16,
#sub.qualitymanagement .section3 .cont-area > .mt-48 > .mt-40 > .mt-16 {overflow-x:auto;}
#sub.qualitymanagement .section2 .cont-area > .mt-48 > .mt-60 .mt-16::-webkit-scrollbar,
#sub.qualitymanagement .section3 .cont-area > .mt-48 > .mt-40 > .mt-16::-webkit-scrollbar,
#sub.qualitymanagement .section3 .cont-area > .mt-48 > .mt-60 > .mt-40 > .mt-16::-webkit-scrollbar {width:1px; height:4px;}
#sub.qualitymanagement .section2 .cont-area > .mt-48 > .mt-60 .mt-16::-webkit-scrollbar-track,
#sub.qualitymanagement .section3 .cont-area > .mt-48 > .mt-40 > .mt-16::-webkit-scrollbar-track,
#sub.qualitymanagement .section3 .cont-area > .mt-48 > .mt-60 > .mt-40 > .mt-16::-webkit-scrollbar-track {background: #dddddd; border-radius: 4px;}
#sub.qualitymanagement .section2 .cont-area > .mt-48 > .mt-60 .mt-16::-webkit-scrollbar-thumb,
#sub.qualitymanagement .section3 .cont-area > .mt-48 > .mt-40 > .mt-16::-webkit-scrollbar-thumb,
#sub.qualitymanagement .section3 .cont-area > .mt-48 > .mt-60 > .mt-40 > .mt-16::-webkit-scrollbar-thumb {background: #666666; border-radius: 4px;}
#sub.qualitymanagement .section2 .cont-area > .mt-48 > .mt-60 .mt-16 img {min-width: 978px;}
#sub.qualitymanagement .section3 .cont-area > .mt-48 > .mt-40 > .mt-16 img{min-width: 435px;}
#sub.qualitymanagement .section3 .cont-area > .mt-48 > .mt-60 > .mt-40 > .mt-16 img {min-width: 900px;}

/***************** Governance ****************/
/* 1. Board of Directors/ Committee */
.boardofdirectors-li > li {position:relative; padding-left:13px;}
.boardofdirectors-li > li:after {position:absolute; display:block; content:''; clear:both; width:5px; height:5px; border-radius:2.5px; background-color:#000000; left:0; top:10px;}
.boardofdirectors-li > li > p.text-lgrey {position:relative; padding-left:10px;}
.boardofdirectors-li > li > p.text-lgrey:after,
#sub.riskmanagement .section1 .img-li .bg-D77F7E1A p.text-lgrey:before {position:absolute; display:block; content:''; clear:both; width:5px; height:1px; background-color:#666666; left:0; top:12px;}
#sub.boardofdirectors .section4 .grid-cols-4 {flex-wrap: wrap; display: flex !important;}
#sub.boardofdirectors .section4 .grid-cols-4 > li {width:calc(25% - 18px); min-width: 0;}
#sub.boardofdirectors .section4 .grid-cols-4 .lp-li {min-height:172px;}
#sub.boardofdirectors .section4 .grid-cols-4 .mo-lp-li {display:none;}
#sub.boardofdirectors .section4 .grid-cols-4 .lp-li > li {position:relative; padding-left:13px;}
#sub.boardofdirectors .section4 .grid-cols-4 .lp-li > li:after {position:absolute; display:block; content:''; clear:both; width:5px; height:5px; border-radius:2.5px; background-color:#666666; left:0; top:10px;}
#sub.boardofdirectors .section4 .grid > *{min-width: 0;}
#sub.boardofdirectors .section4 .grid-cols-4 .bg-white.flex-column {height:210px;}
#sub.boardofdirectors .section1 .tbl-box table {min-width:794px;}

#datalibrary-popup {display:block; width:fit-content; height:fit-content; top:unset; left:unset; right:100px; bottom:0; animation:datalibraryMove 1s cubic-bezier(0.075, 0.82, 0.165, 1); z-index: 999;}
@keyframes datalibraryMove {
    from {bottom:-100%;}
    to {bottom:0;}
}
#datalibrary-popup .popup-body {max-width: 330px; margin:unset; height:fit-content; padding: 0;}
#datalibrary-popup .popup-inner {padding: 0; border-radius:24px 0 0 0; box-shadow: 0px 0px 8px 0px #00000033;}
#datalibrary-popup .close-btn {width:40px; height:40px; border-radius:8px 8px 0 0; background-color:#A72B2A; position:absolute; top:-40px; right:0; border:none;}
#datalibrary-popup .popup-title {background-color: #A72B2A; padding: 16px 24px; box-sizing: border-box; border-radius: 24px 0 0 0;}
#datalibrary-popup .popup-cont {margin-top:0; padding:24px; box-sizing:border-box;}
#datalibrary-popup .radio-box label {background: #D77F7E1A; padding:12px 12px 12px 44px; box-sizing: border-box; width: 100%; border-radius:8px;}
#datalibrary-popup .radio-box > input[type="radio"] ~ label:before {left:12px;}
#datalibrary-popup .radio-box > input[type="radio"]:checked ~ label:after {left:19px;}
#datalibrary-popup .radio-box input[type="text"] {width: 100%; margin-left:8px; border:none !important; outline: none !important; padding:1px 8px; box-sizing:border-box;}
#datalibrary-popup .radio-box input[type="text"]::placeholder {font-size:14px; font-weight:400; color:#888888;}
#datalibrary-popup .btn-box .bg-white:hover {background-color:#222222 !important; color:#ffffff;}
/* 2. Jeong-Do Management/ Anti-Corruption */
#sub.jeong-do .section1 .img-li > li {background-color: #C6AB851A; border-radius:26px; padding:48px 20px; box-sizing:border-box;}
#sub.jeong-do .section2 .ethics-li span.block {margin:0 auto;}
#sub.jeong-do .section2 .ethics-li > li ul {min-height:162px;}
#sub.jeong-do .section2 .ethics-li > li:nth-child(-n+3) ul {min-height:110px;}
#sub.jeong-do .section2 .vow-li .shrink-box {width:370px;}
#sub.jeong-do .section2 .vow-li .shrink-box .txt-c > p:first-of-type {padding:15.5px 10px; box-sizing:border-box; border-radius:16px 16px 0 0;}
#sub.jeong-do .section2 .vow-li .shrink-box .txt-c > p:last-of-type {padding:37px 10px; box-sizing:border-box; border:1px solid #dddddd; border-top:none; border-radius:0 0 16px 16px;}
#sub.jeong-do .section3 .vow-li .boardofdirectors-li {align-self:stretch;}
#sub.jeong-do .section1 .cont-area > div > div.mt-40 {overflow-x:auto;}
#sub.jeong-do .section1 .cont-area > div > div.mt-40::-webkit-scrollbar{width:1px; height:4px;}
#sub.jeong-do .section1 .cont-area > div > div.mt-40::-webkit-scrollbar-track{background: #dddddd; border-radius: 4px;}
#sub.jeong-do .section1 .cont-area > div > div.mt-40::-webkit-scrollbar-thumb{background: #666666; border-radius: 4px;}
/* 3. Risk Management */
#sub.riskmanagement .section:last-of-type,
#sub.personnel-system .section:last-of-type {padding:120px 0 180px;}
#sub.riskmanagement ~ #footer {margin-top:0 !important;}
#sub.riskmanagement .section1 .img-li {gap:92.5px}
#sub.riskmanagement .section1 .img-li > li:first-of-type p.text-lgrey:before {display:none;}
#sub.riskmanagement .section1 .img-li > li:not(:last-of-type) .border-cccccc {position:relative;}
#sub.riskmanagement .section1 .img-li > li:not(:last-of-type) .border-cccccc:after {position:absolute; display:block; content:''; clear:both; width:76.5px; height:6px; background-image:url('/resources/front/common/img/risk_arrow.svg'); background-position:center; background-repeat:no-repeat; top:50%; transform:translateY(-50%); left:100%;}
#sub.riskmanagement .section1 .img-li > li .border-cccccc img {width:96px;}
#sub.riskmanagement .section1 .img-li .bg-D77F7E1A p {position:relative;}
#sub.riskmanagement .section1 .img-li .bg-D77F7E1A p:not(.text-lgrey):before {position:absolute; display:block; content:''; clear:both; width:5px; height:5px; border-radius:2.5px; background-color:#000000; left:-13px; top:10px;}
#sub.riskmanagement .section1 .riskimg-box,
#sub.riskmanagement .section2 .cont-area > div > .mt-40 > .flex-box .mt-16.rounded-24.bg-white > div {overflow-x:auto;}
#sub.riskmanagement .section1 .riskimg-box > div {min-width:958px;}
#sub.riskmanagement .section1 .riskimg-box::-webkit-scrollbar,
#sub.riskmanagement .section2 .cont-area > div > .mt-40 > .flex-box .mt-16.rounded-24.bg-white > div::-webkit-scrollbar {width:1px; height:4px;}
#sub.riskmanagement .section1 .riskimg-box::-webkit-scrollbar-track,
#sub.riskmanagement .section2 .cont-area > div > .mt-40 > .flex-box .mt-16.rounded-24.bg-white > div::-webkit-scrollbar-track {background: #dddddd; border-radius: 4px;}
#sub.riskmanagement .section1 .riskimg-box::-webkit-scrollbar-thumb,
#sub.riskmanagement .section2 .cont-area > div > .mt-40 > .flex-box .mt-16.rounded-24.bg-white > div::-webkit-scrollbar-thumb {background: #666666; border-radius: 4px;}
#sub.riskmanagement .work-li {padding: 24px 0;}
#sub.riskmanagement .work-li > li:not(:first-of-type) {border-left: 1px solid #dddddd;}

/***************** Data Library ****************/
/* 1. Reports & Policies */
.reports-li > li:hover {border-color:#A72B2A; background-color:#D77F7E1A;}
.reports-li > li:hover h6{color: #A72B2A;}
#sub.datalibrary table .px-0 {padding-left:  0 !important; padding-right: 0 !important;}

/* 2. Environment */
#sub.environment .section2 .tbl-box > table {min-width:960px;}
#sub.environment .section3 .tbl-box > table {min-width:740px;}
#sub.environment .section4 .tbl-box > table {min-width:770px;}
#sub.environment .section5 .tbl-box > table {min-width:920px;}
#sub.environment .section6 .tbl-box > table {min-width:840px;}
#sub.environment .section7 .tbl-box > table {min-width:920px;}

/* 3. Social */
#sub.social .section2 .tbl-box > table {min-width:920px;}
#sub.social .section3 .tbl-box > table {min-width:780px;}
#sub.social .section4 .tbl-box > table {min-width:860px;}
#sub.social .section5 .tbl-box > table {min-width:770px;}
#sub.social .section6 .tbl-box > table {min-width:840px;}
#sub.social .section7 .tbl-box > table {min-width:870px;}
#sub.social .section8 .tbl-box > table {min-width:780px;}
#sub.social .section9 .tbl-box > table {min-width:760px;}
#sub.social .section10 .tbl-box > table {min-width:900px;}
#sub.social .section11 .tbl-box > table {min-width:700px;}
#sub.social .section12 .tbl-box > table {min-width:700px;}
#sub.social .section13 .tbl-box > table {min-width:660px;}
#sub.social .section14 .tbl-box > table {min-width:860px;}

/* 4. governance */
#sub.governance .section2 .tbl-box > table {min-width:956px;}
#sub.governance .section3 .tbl-box > table {min-width:760px;}
#sub.governance .section4 .tbl-box > table {min-width:800px;}
#sub.governance .section5 .tbl-box > table {min-width:640px;}
#sub.governance .section6 .tbl-box > table {min-width:920px;}
#sub.governance .section7 .tbl-box > table {min-width:960px;}
#sub.governance .section8 .tbl-box > table {min-width:860px;}

/* 5. gri, sasb */
#sub.gri .section1 .tbl-box > table {min-width:1160px;}
#sub.sasb .section1 .tbl-box > table {min-width:1000px;}
#sub .tab-li > li a{background-color: #fff; color: #222 !important;}
#sub .tab-li > li a.on{background-color: #222222; color: #fff !important;}
#sub .tab-li > li > a:hover {background-color: #222222; color:#ffffff !important;}
#sub.gri table a.flex-box > span, #sub.sasb table a.flex-box > span{display:inline-block;}
#sub.gri table td a{position: relative; display: inline-block; width: fit-content;}
#sub.gri table td a::after{content: ''; clear: both; display: block; width: 16px; height: 16px; position: absolute; top: 50%; right: -26px; transform: translateY(-50%); background: url(/resources/front/common/img/s_link.svg) no-repeat center center; background-size: contain;}

/* 5. assessmentinnitiative */
#sub.assessmentinnitiative .section .tbl-box > table {min-width:600px;}


/***********************************************
                    Newsroom 
***********************************************/
ul.newlist{display: grid; grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 48px;}
ul.newlist > li a{width: 100%; border-top: 1px solid #CCCCCC; min-height: 370px; max-height: 370px; box-sizing: border-box; transition: 0.3s; border-left: none; border-right: none; border-bottom: none; border-radius: 0;}
ul.newlist > li:nth-last-child(-n+3) {border-bottom: 1px solid #ddd;}
ul.newlist > li a:hover{border: none; border-top: 1px solid #A72B2A; background-color: #fff; box-shadow: 15px 15px 30px 0px rgba(0, 0, 0, 0.05);}
ul.newlist > li h6{min-height: 68px;}
ul.newlist > li p{min-height: 78px;}
ul.newlist > li h6, ul.newlist > li p{transition: 0.3s;}
ul.newlist > li:hover h6{color: #A72B2A;}
ul.newlist > li:hover p{color: #000 !important;}
ul.newlist > li a{height: 100%; position: relative; padding: 77px 0; box-sizing: border-box;}
ul.newlist > li span{display: block;}
ul.boardlist.newlist li.fixlist h6{padding-left: 0; padding-top: 40px;}
ul.boardlist.newlist li.fixlist h6::after{transform: unset; top: 0;}
ul.boardlist.newlist li.fixlist a{padding: 57px 0;}

#sub.newsroom .tbl-box{overflow-x: hidden;}
.filelist{width: calc(100% - 96px);}
.filelist li + li{margin-top: 8px;}
.filelist li a{padding-left: 27px; position: relative;}
.filelist li a::after{content: ''; clear: both; display: block; background-image: url(/resources/front/common/img/ico_file.svg); background-repeat: no-repeat; background-position: center; background-size: cover; width: 24px; height: 24px; position: absolute; top: 1px; left: 0;}
/***********************************************
                    검색 
***********************************************/
.search_notice, .search_content{border-top: 2px solid #222; padding-top: 24px; box-sizing: border-box;}
.search_content li:hover{border: 1px solid #A72B2A; background-color: rgba(215, 127, 126, 0.1);}
.search_content li:hover h6 span{color: #A72B2A;}
.search_content li:hover h6 span::after{background-image: url(/resources/front/common/img/arrownext_r.svg);}
.search_content li:hover h6 span:last-child::after, .search_content li h6 span:last-child::after{display: none;}
.search_content li h6{width: 100%; column-gap: 32px;}
.search_content li h6 span{position: relative; transition: 0.3s;}
.search_content li h6 span::after{content: ''; clear: both; display: block; width: 24px; height: 24px; background-image: url(/resources/front/common/img/arrownext_b.svg); background-repeat: no-repeat; background-size: cover; background-position: center center; position: absolute; top: 50%; right: -28px; transform: translateY(-50%);}
.search_notice li, .search_content li{border: 1px solid #ccc; box-sizing: border-box; transition: 0.3s;}
.search_notice li + li, .search_content li + li{margin-top: 16px;}
.plusbtn{border-radius: 28px; border: 1px solid #222; box-sizing: border-box; padding: 12.5px 40px; width: fit-content; margin: 0 auto;}
.search_notice li p span{font-size: 14px !important; line-height: 22px !important;}
.search_notice li p span + span{margin-left: 25px; position: relative;}
.search_notice li p span + span::before{content: ''; clear: both; display: block; width: 1px; height: 12px; background-color: #666; position: absolute; top: 5px; left: -12px;}
.search_notice li:hover{border: 1px solid #A72B2A; background-color: rgba(215, 127, 126, 0.1);}
.search_notice li h6{transition: 0.3s;}
.search_notice li:hover h6{color: #A72B2A;}

/***********************************************
                개인정보 & ETC 
***********************************************/
#sub.policy, #sub.error, #sub.inspection{padding-top: 180px;}
#sub.error .tit-area .btnSet a{padding: 12.5px 39.46px; box-sizing: border-box; border-radius: 500px; border: 1px solid transparent;}
#sub.error .tit-area .btnSet a:first-child{border: 1px solid #000;}
#sub.error .menu-nav .depth3 li{color: #666; transition: 0.3s;}
#sub.error .menu-nav .depth3 li:hover{color: #A72B2A;}
.period_box{background: #F3F3F3; padding: 32px 58.32px; box-sizing: border-box; width: fit-content; margin: 0 auto;}
.en .period_box{padding: 32px 57.96px;}
#sub.policy .policyindex{position: relative;}
#sub.policy .policyindex::after{content: ''; clear: both; display: block; width: 1px; height: 73%; background-color: #CCCCCC; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
#sub.policy .policyindex li{display: grid; grid-template-columns: 1fr 1fr; grid-gap: 12px; padding: 40px 60px; box-sizing: border-box; position: relative;}
#sub.policy .policyindex li span:nth-child(even){padding-left: 60px;}
#sub.policy .policyindex li span{cursor: pointer;}
#sub.policy .policyindex li span.on{color: #CA1D1D;}
#sub.policy .policyindex li span:nth-child(8){margin-top: -30px}
#sub.policy .policyindex li span:nth-child(11){padding-left: 0;}
.article .txt_deco{text-decoration: underline;}
.article + .article{margin-top: 64px; padding-top: 64px; border-top: 1px solid #DDDDDD;}
.numlist{position: relative; padding-left: 20px;}
.numlist::after{content: ''; clear: both; display: block; position: absolute; top: 0; left: 0;}
.numlist.num1::after{content: '1.';}
.numlist.num2::after{content: '2.';}
.numlist.num3::after{content: '3.';}
.numlist.num4::after{content: '4.';}
.numlist.num5::after{content: '5.';}
.numlist.num6::after{content: '6.';}
.article ul{padding-left: 20px;}
.circlenum{position: relative; padding-left: 18px;}
.circlenum::after{content: ''; clear: both; display: block; position: absolute; top: 0; left: 0;}
.circlenum.num1::after{content: '①';}
.circlenum.num2::after{content: '②';}
.policy_slect{border-radius: 8px; height: 56px; line-height: 56px !important; padding-left: 20px; min-width: 320px;}
.policy_slect:after{width: 8px; height: 8px; margin-top: -6px; -webkit-transform: rotate(-135deg); -ms-transform: rotate(-135deg); transform: rotate(-135deg);}
.policy_slect.open:after{-webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}
.policy_slect .list{padding: 11px 0; box-sizing: border-box; top: -704px; border-radius: 8px; margin-top: 0;}
.policy_slect .list li:first-child{display: none;}
.policy_slect .list li.on{color: #CA1D1D; font-weight: 600;}
.h_info.tbl-box table tbody td{padding: 11.5px 24px;}
#email_pop .popup-inner{padding:60px 70px;}

#sub.management ~ #footer,
#sub.informationsecurity ~ #footer {margin-top:0 !important;}