@charset "utf-8";

@keyframes fadeInUp {
    0% {
        height: 0;
        opacity: 0;
        transform: translate3d(0, 5%, 0);
}
    100% {
        height: 100%;
        opacity: 1;
        transform: translateZ(0);
    }
}

/* common */
.list-num-wrap li { overflow: hidden; word-break: keep-all; }
.list-num-wrap li + li { margin-top: 16px; }
.list-num-wrap li p { float: left; }
.list-num-wrap li p:first-child { width: 24px; height: 24px; line-height: 24px; background-color: #111827; color: #ffffff; border-radius: 50%; font-size: 15px; font-weight: 600; text-align: center; margin-right: 12px; margin-top: 2px; }
.list-num-wrap li p + p { width: calc(100% - 36px); }

.list-dot-wrap li { position: relative; padding-left: 12px; }
.list-dot-wrap li::before { content: ''; display: block; width: 4px; height: 4px; background-color: #374151; border-radius: 50%; position: absolute; top: 12px; left: 0; }

.product-tab-wrap li + li { margin-left: 34px; }
.product-tab-wrap li .icon { display: block; width: 160px; height: 160px; border: 18px solid #F1F5F9; border-radius: 50%; margin-left: auto; margin-right: auto; background-repeat: no-repeat; background-position: center center; }
.product-tab-wrap li:not(.active) span + span { color: #9CA3AF; }

.product-tab-wrap li:first-child .icon { background-image: url('../../images/page/icon_2_3_1.svg'); }
.product-tab-wrap li:nth-child(2) .icon { background-image: url('../../images/page/icon_2_3_2.svg'); }
.product-tab-wrap li:nth-child(3) .icon { background-image: url('../../images/page/icon_2_3_3.svg'); }
.product-tab-wrap li:nth-child(4) .icon { background-image: url('../../images/page/icon_2_3_4.svg'); }
.product-tab-wrap li:nth-child(5) .icon { background-image: url('../../images/page/icon_2_3_5.svg'); }
.product-tab-wrap li:nth-child(6) .icon { background-image: url('../../images/page/icon_2_3_6.svg'); }

.product-tab-wrap li.active .icon { background-color: #1BB0AD; border-color: #1BB0AD; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); }
.product-tab-wrap li:first-child.active .icon { background-image: url('../../images/page/icon_2_3_1_on.svg'); }
.product-tab-wrap li:nth-child(2).active .icon { background-image: url('../../images/page/icon_2_3_2_on.svg'); }
.product-tab-wrap li:nth-child(3).active .icon { background-image: url('../../images/page/icon_2_3_3_on.svg'); }
.product-tab-wrap li:nth-child(4).active .icon { background-image: url('../../images/page/icon_2_3_4_on.svg'); }
.product-tab-wrap li:nth-child(5).active .icon { background-image: url('../../images/page/icon_2_3_5_on.svg'); }
.product-tab-wrap li:nth-child(6).active .icon { background-image: url('../../images/page/icon_2_3_6_on.svg'); }


.product-wrap { display: flex; }
.product-wrap::after { content: ''; display: block; width: calc(100% - 348px); height: calc(100% - 94px); background-color: #F1F5F9; position: absolute; bottom: 0; right: 0; }
.product-wrap .product-slide-wrap { max-width: 943px; width: 55%; }
.product-wrap .product-slide-wrap .img-wrap::after { content: ''; display: block; width: 100%; height: 153px; background: linear-gradient(180deg, #111827 0%, rgba(17, 24, 39, 0) 0.01%, #111827 100%); opacity: 0.6; position: absolute; bottom: 0; left: 0; }
.product-wrap .product-slide-wrap .tit { position: absolute; bottom: 24px; right: 40px; color: #ffffff; }
.product-wrap .swiper-btn-wrap { background-color: #1BB0AD; width: 413px; height: 94px; left: 36.8%; padding: 34px 56px; }
.product-wrap .swiper-btn-wrap .swiper-button-next,
.product-wrap .swiper-btn-wrap .swiper-button-prev { background-image: url('../../images/common/btn_slide_w.svg'); background-size: cover; width: 24px; height: 24px; margin-top: 0; transform: translateY(-50%); right: 56px; }
.product-wrap .swiper-btn-wrap .swiper-button-prev { left: 269px; transform: scaleX(-1) translateY(-50%); }
.product-wrap .swiper-btn-wrap .swiper-button-prev::after { content: ''; display: block; width: 2px; height: 11px; background-color: rgba(255, 255, 255, 0.6); border-radius: 50px; position: absolute; right: 44px; top: 6px; }

.product-wrap .swiper-btn-wrap .swiper-progress-bar { width: 98px; height: 2px; background-color: rgba(255, 255, 255, 0.6); border-radius: 50px; position: absolute; top: 47px; left: 88px; }
.product-wrap .swiper-btn-wrap .swiper-progress-bar .progress-bar { opacity: 0; position: absolute; height: 2px; width: 0; background-color: #fff; border-radius: 50px; position: absolute; left: 0; top: 0; }
.product-wrap .swiper-btn-wrap .swiper-progress-bar.animate .progress-bar { transition: width linear; transition-delay: unset; width: 100%; transition-duration: 3s; opacity: 1; }

.product-wrap .swiper-btn-wrap .swiper-pagination-fraction { bottom: auto; text-indent: -999999px; font-weight: 700; color: #ffffff; }
.product-wrap .swiper-btn-wrap .swiper-pagination-fraction .swiper-pagination-current { position: absolute; left: 56px; text-indent: 0; }
.product-wrap .swiper-btn-wrap .swiper-pagination-fraction .swiper-pagination-total { position: absolute; opacity: 0.6; left: 200px; text-indent: 0; }

.product-wrap .txt-wrap { position: relative; z-index: 1; width: calc(100% - 943px); min-width: 45%;  padding: 6.25% 28px 0 34px; margin-top: 94px; }
.product-wrap .txt-wrap p { max-width: 596px; }

.use-wrap { align-items: flex-start; }
.use-wrap > div + div { margin-left: 34px; }
.use-wrap ul { border-top: 1px solid #D1D5DB; }
.use-wrap ul li { padding: 30px 40px; border-bottom: 1px solid #D1D5DB; }
.use-wrap.has-desc ul li { height: 149px; }


.packaging-wrap { padding-top: 120px; height: 461px; background-image: url('../../images/page/img_2.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center center; background-attachment: fixed; }
.packaging-wrap .packaging { display: flex; }
.packaging-wrap .packaging li { display: flex; align-items: center; width: 386px; position: relative; }
.packaging-wrap .packaging li + li { margin-left: 64px; }
.packaging-wrap .packaging li + li::before { content: ''; display: block; width: 1px; height: 62px; background-color: #fff; position: absolute; left: -65px; top: 9px; }
.packaging-wrap .packaging li div + div { margin-left: 20px; }


/* .property-wrap { display: flex; flex-wrap: wrap; align-items: end; } */
/* .property-wrap a { max-width: 386px; width: calc((100% - 68px)/ 3); height: 176px; padding: 24px 24px 24px 32px; overflow: hidden; background-color: #F9FAFB; border: 1px solid #D1D5DB; overflow: hidden; } */
.property-wrap .kind-list > li + li { margin-top: 40px; padding-top: 40px; border-top: 1px solid #D1D5DB; }
.property-wrap .btn-list { display: flex; flex-wrap: wrap; }
.property-wrap .btn-list li { flex: 1; min-width: 30%; max-width: calc(calc(100% - 68px) / 3); }
.property-wrap .btn-list li:not(:nth-of-type(3n)) { margin-right: 34px; }
.property-wrap .btn-list li:nth-of-type(n+4) { margin-top: 34px; }
.property-wrap a { display: block; height: 100%; min-height: 88px; padding: 20px 32px; padding-right: 92px; background-color: #F9FAFB; border: 1px solid #D1D5DB; }
.property-wrap a.btn-pdf { background-image: url('../../images/common/icon_pdf.svg'); background-repeat: no-repeat; background-size: 28px; background-position: right 32px center; }
/* .property-wrap a + a { margin-left: 34px; }
.property-wrap a:first-child { margin-left: 0; margin-top: 0 !important; }
.property-wrap a:nth-child(3n + 1) { margin-left: 0; margin-top: 34px; }
.property-wrap a span { display: block; }
.property-wrap a .desc { width: calc(100% - 52px); margin-top: 8px; } */

.property-wrap.link-wrap { margin-top: 34px; padding-top: 34px; border-top: 1px solid #E5E7EB; }
.property-wrap.link-wrap a.btn-link { background-image: url('../../images/common/icon_link.svg'); background-size: 56px 56px; background-position: right 24px bottom 24px; background-repeat: no-repeat; }


.table-wrap table tr { border-bottom: 1px solid #94A3B8; }
.table-wrap table tr th { background-color: #F2F5FB; border-right: 1px solid #94A3B8; border-top: 2px solid #1F2937; padding: 20px 0; }
.table-wrap table tr td { border-right: 1px solid #94A3B8; padding: 24px; word-break: keep-all; }
.table-wrap table tr th:last-child, .table-wrap table tr td:last-child { border-right: none; }
.table-wrap table tr td a { display: flex; justify-content: space-around; width: 295px; height: 50px; padding: 12px 20px; }
.table-wrap table tr td a span { display: inline-block; vertical-align: middle; margin-right: -4px; }
.table-wrap table tr td a span + span { height: 20px; margin-left: 8px; padding-top: 3px; }
.table-wrap table tr td .list-dot-wrap li p { padding-left: 12px; text-indent: -12px; }

.txt-list-wrap table tr { color: #374151; }
.txt-list-wrap table tr th { padding: 22px 10px; background-color: #F2F5FB; border-top: 2px solid #1F2937; font-weight: 400; }
.txt-list-wrap table tr td { height: 80px; border-bottom: 1px solid #D1D5DB; }
.txt-list-wrap table tr td a { display: block; width: 100%; }
.txt-list-wrap .pagination-wrap .pagination .num { width: 38px; height: 38px; font-size: 18px; font-weight: 500; color: #374151; background-color: #fff; border-radius: 50%; }
.txt-list-wrap .pagination-wrap .pagination .num + .num { margin-left: 10px; }
.txt-list-wrap .pagination-wrap .pagination .num.active { background-color: #E0002B; color: #ffffff; }
.txt-list-wrap .pagination-wrap .pagination .prev,
.txt-list-wrap .pagination-wrap .pagination .next { width: 40px; height: 40px; border: 1px solid #D1D5DB; background: url('../../images/common/icon_arrow_right.svg') no-repeat center; margin-left: 24px; }
.txt-list-wrap .pagination-wrap .pagination .prev { transform: scaleX(-1); margin-right: 24px; margin-left: 0; }

/******** contents1-1-1 ********/
#contents1-1-1 .default-wrap.img-center { position: relative; height: 624px; }
#contents1-1-1 .default-wrap.img-center .img-wrap { height: 100%; background-position: center; background-size: cover; }
#contents1-1-1 .default-wrap.img-center .curtain-wrap { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; }
#contents1-1-1 .default-wrap.img-center .curtain-wrap > div { width: calc(50% - 490px); height: 100%; position: absolute; top: 0; left: 0; background-color: #ffffff; }
#contents1-1-1 .default-wrap.img-center .curtain-wrap .right { left: auto; right: 0; }
#contents1-1-1 .txt-wrap .txt { max-width: 100%; width: 722px; word-break: keep-all; }
#contents1-1-1 .default-wrap.img-right { margin-top: 348px; margin-bottom: 371px; overflow: visible; }
#contents1-1-1 .default-wrap.img-right .txt-wrap { position: relative; z-index: 1; }
#contents1-1-1 .default-wrap.img-right .img-wrap { max-width: 1088px; width: 60%; height: 686px; position: absolute; top: -148px; right: -19px; background-size: contain; background-repeat: no-repeat; }
#contents1-1-1 .max-inner { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; margin-top: 300px; }
#contents1-1-1 .max-inner .txt-bg { font-size: 6vw; line-height: 1.2em; color: #018752; text-align: center; }
#contents1-1-1 .max-inner .txt-main { position: absolute; width: 320px; top: 50%; opacity: 0; }
#contents1-1-1 .max-inner .txt-main img { width: 100%; }

#contents1-1-1 .arrow.ani-circle.mb200 { margin-top: -4px; }
#contents1-1-1 .arrow.ani-circle { display: block; width: 64px; height: 64px; position: relative; }
#contents1-1-1 .arrow.ani-circle img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#contents1-1-1 .arrow.ani-circle svg { width: 100%; height: 100%; }
#contents1-1-1 .arrow.ani-circle svg circle { fill: transparent; stroke: #6B7280; transform-origin: 50% 50%; }
#contents1-1-1 .arrow.ani-circle svg circle.fg { stroke: #111827; stroke-dasharray: 377; stroke-dashoffset: 377;  stroke-width: 2px; transition: all 0.7s ease-out; }

/******** contents1-1-2 ********/
#contents1-1-2 .ceo-wrap { margin-left: 18px; }
#contents1-1-2 .ceo-wrap .bg-F3F4F6 { position: absolute; width: 300%; height: 442px; bottom: 0; left: -200%; }
#contents1-1-2 .ceo-wrap .mb70 { margin-bottom: 70px; position: relative; z-index: 1; }
#contents1-1-2 .ceo-wrap .line { width: 40px; height: 1.5px; background-color: #111827; }
#contents1-1-2 .ceo-wrap .img-wrap { position: relative; z-index: 1; width: calc(100% - 595px); }
#contents1-1-2 .ceo-wrap .img-wrap .logo { position: absolute; top: -110px; right: 25px; }
#contents1-1-2 .txt-wrap { max-width: 1100px; margin-left: auto; }

/******** contents1-1-3 ********/
#contents1-1-3 .history-wrap { border-bottom: 1px solid #E5E7EB; }
#contents1-1-3 .history-wrap .history { position: relative; border-top: 1px solid #E5E7EB; padding-top: 32px; padding-bottom: 32px; overflow: hidden; cursor: pointer; transition: padding 0.3s; }
#contents1-1-3 .history-wrap .history .years { float: left; display: flex; align-items: baseline; width: 237px; color: #D1D5DB; font-size: 72px; line-height: 80px; transition: all 0.3s; }
#contents1-1-3 .history-wrap .history .years span { font-size: 56px; line-height: 1; }

#contents1-1-3 .history-wrap .history ul { float: left; max-width: 100%; width: 400px; margin: 24px 20px 0 80px; /*transform: translate(0, 350px); transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1); display: none;*/ display: none; }
#contents1-1-3 .history-wrap .history ul li { position: relative; padding-left: 26px; display: flex; word-break: keep-all; }
#contents1-1-3 .history-wrap .history ul li::before { content: ''; display: block; width: 8px; height: 8px; background-color: #E0002B; border-radius: 50%; position: absolute; top: 10px; left: 0; }
#contents1-1-3 .history-wrap .history ul li + li { margin-top: 18px; }

#contents1-1-3 .history-wrap .history .img-wrap { float: right; margin-right: 113px; /*transform: translate(0, 350px); transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1); display: none;*/ display: none; }

#contents1-1-3 .history-wrap .history .plus { width: 56px; height: 56px; position: absolute; top: 44px; right: 0; transform: rotateZ(-90deg); transform-style: preserve-3d; transition: transform 0.5s; }
#contents1-1-3 .history-wrap .history .plus span { display: block; width: 4px; height: 56px; background-color: #D1D5DB; position: absolute; top: 0; left: 50%; transform: translateX(-50%); }
#contents1-1-3 .history-wrap .history .plus span + span { transform: translateX(-50%) rotate(90deg); }

#contents1-1-3 .history-wrap .history.active { border-top-color: #4B5563; padding-bottom: 52px; }
#contents1-1-3 .history-wrap .history.active .years { color: #111827; }
#contents1-1-3 .history-wrap .history.active ul, #contents1-1-3 .history-wrap .history.active .img-wrap { display: block; }
#contents1-1-3 .history-wrap .history.active .plus { transform: rotateZ(45deg); }
#contents1-1-3 .history-wrap .history.active .plus span { background-color: #111827; }

/******** contents1-1-4 ********/
#contents1-1-4 .img-wrap .main img { max-width: 846px; width: 59.3%; margin: auto; }
#contents1-1-4 .img-wrap .main p { position: absolute; top: 180px; left: 50%; transform: translateX(-50%); }
#contents1-1-4 .img-wrap .main p span.bold { font-size: 25px; line-height: 30px; letter-spacing: -0.03em; }
#contents1-1-4 .img-wrap .main p span.black { font-size: 48px; line-height: 52px; letter-spacing: -0.03em; }
#contents1-1-4 .img-wrap .line { width: 236px; height: 236px; line-height: 236px; padding-top: 88px; border: 1.5px solid transparent; border-radius: 100%; background: linear-gradient(white, white) padding-box, linear-gradient(153.46deg, #2AD6A3 13.56%, #145ECC 87.16%) border-box; }
#contents1-1-4 .img-wrap .line.left { position: absolute; top: 257px; left: 107px; }
#contents1-1-4 .img-wrap .line.right { position: absolute; top: 257px; right: 107px; }
#contents1-1-4 .img-wrap .line.center { margin: 0 auto; }
#contents1-1-4 .img-wrap .line p.extra-bold { font-size: 36px; line-height: 43px; }

/******** contents1-1-5 ********/
#contents1-1-5 .btn.pc-hidden { display: none; }

#contents1-1-5 .default-wrap.medium:not(:first-of-type):not(:last-of-type):after,
#contents1-1-5 .color-wrap:not(.dark):after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-color: #D1D5DB; }

/* #contents1-1-5 .color-wrap .color-item + .color-item { margin-left: 34px; } */
#contents1-1-5 .color-wrap .color-item .box { position: relative; height: 228px; border-radius: 8px; }
#contents1-1-5 .color-wrap .color-item .box p { position: absolute; bottom: 26px; left: 32px; font-size: 56px; line-height: 60px; letter-spacing: -0.03em; }
#contents1-1-5 .color-wrap .color-item ul li { padding: 20px 0; border-top: 1px solid #D1D5DB; }
#contents1-1-5 .color-wrap .color-item ul li:first-child { padding-top: 0; border-top: none; }
#contents1-1-5 .color-wrap .color-item ul li p:first-child { width: 148px; }
#contents1-1-5 .color-wrap .color-item ul li p + p { width: 224px; letter-spacing: -0.03em; }
#contents1-1-5 .color-wrap .color-item ul li p span + span { margin-left: 20px; }
#contents1-1-5 .color-wrap .color-item ul li p.d-block span { display: block; margin-left: 0; }
#contents1-1-5 .color-wrap .color-item ul li p.d-block span.color-9CA3AF { font-size: 14px; line-height: 17px; }
#contents1-1-5 .negative-wrap .negative-item + .negative-item { margin-left: 34px; }
#contents1-1-5 .negative-wrap .negative-item .box { position: relative; height: 334px; border-radius: 2px; }
#contents1-1-5 .negative-wrap .negative-item .box img { position: absolute; top: 89px; left: 50%; transform: translateX(-50%); }

#contents1-1-5 .color-wrap { gap: 8px; }
#contents1-1-5 .color-wrap picture { width: 100%; }
#contents1-1-5 .color-wrap .color-item { flex: 1; }
#contents1-1-5 .color-wrap .color-item .color-detail { aspect-ratio: 300 / 336; padding: 24px; background-color: var(--bg-color); }
#contents1-1-5 .color-wrap .color-item .logo-wrap { aspect-ratio: 300 / 168; display: flex; justify-content: center; align-items: center; margin-top: 8px; }

/******** contents1-1-6 ********/
#contents1-1-6 .sec-tit { padding-block: 24px; border-top: 1px solid #D1D5DB; }
#contents1-1-6 .sec-tit p { line-height: 1; letter-spacing: -0.02em; }

#contents1-1-6 .map-wrap { text-align: center; }
#contents1-1-6 .map-wrap .img-pc { max-width: 880px; width: 100%; margin: 0 auto; }
#contents1-1-6 .map-wrap .img-mo { display: none; }

#contents1-1-6 .business-list table { border-top: 1px solid #585C62; border-bottom: 1px solid #585C62; table-layout: fixed; }
#contents1-1-6 .business-list table caption { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
#contents1-1-6 .business-list .col-name { width: 340px; }
#contents1-1-6 .business-list thead th { padding-block: 32px; padding-inline: 32px; font-size: 20px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: rgba(96, 96, 96, 0.9); text-align: left; vertical-align: middle; }
#contents1-1-6 .business-list tbody th,
#contents1-1-6 .business-list tbody td { padding-block: 24px; padding-inline: 32px; border-top: 1px solid #DCE0E6; text-align: left; vertical-align: middle; }
#contents1-1-6 .business-list tbody th .tit { font-size: 24px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: rgba(0, 0, 0, 0.9); }
#contents1-1-6 .business-list tbody th .sub { margin-top: 12px; font-size: 18px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: rgba(0, 0, 0, 0.9); }
#contents1-1-6 .business-list tbody td p { font-size: 20px; font-weight: 500; line-height: 1; letter-spacing: -0.02em; color: #3B3B3B; word-break: keep-all; }
#contents1-1-6 .business-list tbody td p + p { margin-top: 12px; }
#contents1-1-6 .business-list tbody td .email { color: inherit; }

/******** contents1-2-1 ********/
#contents1-2-1 .esg-wrap::after { content: ''; display: block; width: 460px; height: 369px; background: url('../../images/common/img_logo_g.svg') no-repeat center/cover; position: absolute; top: -128px; right: -21px; }
#contents1-2-1 .esg-wrap .book { width: 464px; height: 602px; background: url('../../images/page/img_1_2_1_1.jpg') no-repeat center/cover; box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.3); margin-top: -30px; margin-left: auto; margin-right: auto; padding: 27px 50px 27px 68px; position: relative; z-index: 1; }
#contents1-2-1 .esg-wrap .book .logo { width: 118px; }

/******** contents1-2-2 ********/
#contents1-2-2 .manage-wrap li { width: 25%; height: 517px; border: 1px solid #94A3B8; position: relative; transition: width 0.3s; border-right: 0; }
#contents1-2-2 .manage-wrap li:first-child { border-radius: 2px 0 0 2px; }
#contents1-2-2 .manage-wrap li:last-child { border-radius: 0 2px 2px 0; border: 1px solid #94A3B8; }
#contents1-2-2 .manage-wrap li a { display: block; width: 100%; height: 100%; padding: 48px 0; }
#contents1-2-2 .manage-wrap li a span { display: block; }
#contents1-2-2 .manage-wrap li a .num { color: #9CA3AF; }
#contents1-2-2 .manage-wrap li a .tit { color: #374151; font-size: 24px; line-height: 34px; margin-top: 20px; }
#contents1-2-2 .manage-wrap li a .txt { max-width: 412px; word-break: keep-all; margin-top: 14px; margin-left: auto; margin-right: auto; transform: translate(0, 350px); transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);}

#contents1-2-2 .manage-wrap li.active { width: 53%; }
#contents1-2-2 .manage-wrap li.active a .num { color: #1BB0AD; }
#contents1-2-2 .manage-wrap li.active a .tit { color: #1BB0AD; font-size: 28px; line-height: 38px; margin-top: 14px; }
#contents1-2-2 .manage-wrap li.active a .txt { transform: translate(0, 0); transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1); }

#contents1-2-2 .box-wrap { position: relative; padding: 72px 20px 72px 90px; border: 1px solid #94A3B8; border-radius: 4px; }
#contents1-2-2 .box-wrap::before { content: ''; display: block; width: 1px; height: calc(100% - 80px); position: absolute; top: 40px; left: 218px; background-color: #94A3B8; }
#contents1-2-2 .box-wrap .tit { width: 93px; margin-right: 100px; }



/******** contents1-2-3 ********/
/* 안전보건환경 방침 */
#contents1-2-3 .environment-wrap { padding: 0 21px; }
#contents1-2-3 .environment-wrap .environment { display: flex; justify-content: space-between; align-items: flex-end; }
#contents1-2-3 .environment-wrap .environment:nth-child(even) { flex-direction: row-reverse; }
#contents1-2-3 .environment-wrap .environment div:first-child { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); }
#contents1-2-3 .environment-wrap .environment div + div { width: 456px; margin-bottom: 100px; }
#contents1-2-3 .environment-wrap .environment div p.font24 { letter-spacing: -0.03em; }


/* 경영시스템 */
#contents1-2-3 .management-wrap { max-width: 736px; margin-left: auto; margin-right: auto; }
#contents1-2-3 .management-wrap .box { width: 100%; height: 106px; border-radius: 200px; line-height: 106px !important; box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.1); }

#contents1-2-3 .management02-wrap:before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 1px; background-color: #D1D5DB; }
#contents1-2-3 .management02-wrap .bg-img { width: 266px; height: 266px; background: url('../../images/page/img_1_3_1_1.svg') no-repeat center/cover; position: relative; margin: 0 auto 53px; }
#contents1-2-3 .management02-wrap .bg-img p { width: 100%; font-size: 22px; line-height: 26px; letter-spacing: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#contents1-2-3 .management02-wrap .center .center-border { width: 316px; height: 316px; border: 1px dashed #94A3B8; border-radius: 50%; padding: 20px; position: relative; }
#contents1-2-3 .management02-wrap .center .center-border::before,
#contents1-2-3 .management02-wrap .center .center-border::after { content: ''; display: block; width: 103px; height: 28px; background: url('../../images/page/img_1_2_3_2_5.svg') no-repeat center/cover; position: absolute; top: 50%; left: -89px; transform: translateY(-50%); }
#contents1-2-3 .management02-wrap .center .center-border::after { right: -89px; left: auto; transform: translateY(-50%) scaleX(-1); }
#contents1-2-3 .management02-wrap .center .center-border .center-inner { position: relative; width: 100%; height: 100%; border-radius: 50%; box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.3); }
#contents1-2-3 .management02-wrap .center .center-border .center-inner p { width: 100%; font-size: 26px; line-height: 35px; letter-spacing: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#contents1-2-3 .management02-wrap .center .list-dot-wrap { margin-left: auto; margin-right: auto; }
#contents1-2-3 .management02-wrap { max-width: 1075px; display: flex; justify-content: space-between; align-items: flex-end; margin-left: auto; margin-right: auto; }
#contents1-2-3 .management02-wrap .list-dot-wrap { width: 305px; height: 632px; border: 1px solid #94A3B8; border-radius: 10px; padding: 48px 10px 0; }
#contents1-2-3 .management02-wrap .list-dot-wrap li { line-height: 28px; }
#contents1-2-3 .management02-wrap .list-dot-wrap li::before { display: none; }
#contents1-2-3 .management02-wrap .list-dot-wrap li + li { margin-top: 4px; }
#contents1-2-3 .management02-wrap .list-dot-wrap li p { display: inline-block; position: relative; padding-left: 12px; }
#contents1-2-3 .management02-wrap .list-dot-wrap li p::before { content: ''; display: block; width: 4px; height: 4px; background-color: #111827; border-radius: 50%; position: absolute; top: 12px; left: 0; }


/* 성과 */
#contents1-2-3 .result-wrap .txt { max-width: 521px; margin-top: -166px; background-color: #ffffff; position: relative; }
#contents1-2-3 .result-wrap.left .txt { padding: 64px 0 0 64px; margin-left: auto; }
#contents1-2-3 .result-wrap.right .txt { padding: 64px 64px 0 0; }
#contents1-2-3 .result-wrap .txt .line { width: 40px; height: 1.5px; background-color: #111827; }


/* SHE Golden Rule 제도 */
#contents1-2-3 .bg-F1F5F9 { margin-bottom: -200px; }
#contents1-2-3 .rules-wrap { display: flex; flex-wrap: wrap; justify-content: space-between; }
#contents1-2-3 .rules-wrap .rule { max-width: 386px; width: calc(33% - 16px); background-color: #ffffff; border: 1px solid #94A3B8; border-top: 2px solid #1F2937; word-break: keep-all; padding: 40px 38px; margin-bottom: 34px; margin-right: 16px; }
#contents1-2-3 .rules-wrap .rule:nth-child(3n) { margin-right: 0; }



/******** contents1-2-4 ********/
#contents1-2-4 .bg-F1F5F9 .img-wrap { max-width: 1088px; margin-left: auto; margin-right: auto; }
#contents1-2-4 .bg-F1F5F9 .img-arrow { margin-top: -52px; }
#contents1-2-4 .bg-F1F5F9 ul li { display: flex; align-items: center; }
#contents1-2-4 .bg-F1F5F9 ul li + li { margin-top: 22px; }
#contents1-2-4 .bg-F1F5F9 ul li p:first-child { width: 48px; height: 48px; background-color: #111827; border-radius: 50%; font-size: 28px; line-height: 48px; margin-right: 20px; }
#contents1-2-4 .btn-wrap .btn + .btn { margin-left: 20px; }
#contents1-2-4 .tab-wrap { max-width: 919px; }
#contents1-2-3 .tab-contents.active,
#contents1-2-4 .tab-contents.active { animation: fadeInUp 1.5s; }

/* 환경경영 */
#contents1-2-4 .eco-wrap .center { width: 432px; height: 432px; background: url('../../images/page/img_1_3_1_1.svg') no-repeat center/cover; position: relative; margin: auto; }
#contents1-2-4 .eco-wrap .center div { width: 100%; position: absolute; top: 47%; left: 50%; transform: translate(-50%, -50%); }
#contents1-2-4 .eco-wrap .center div p:last-child { font-size: 56px; line-height: 67px; background: linear-gradient(119.47deg, #2AD6A3 11.48%, #145ECC 92.78%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; }
#contents1-2-4 .eco-wrap .eco { max-width: 227px; width: 100%; position: absolute; }
#contents1-2-4 .eco-wrap .eco .line { width: 72px; height: 1px; border-top: 1px dashed #94A3B8; position: absolute; top: 80px; right: -84px; }
#contents1-2-4 .eco-wrap .eco .line::after { content: ''; display: block; width: 8px; height: 8px; background-color: #009ABC; border-radius: 50%; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); position: absolute; top: -5px; right: -4px; }
#contents1-2-4 .eco-wrap .eco.right .line { right: auto; left: -84px; }
#contents1-2-4 .eco-wrap .eco.right .line::after { right: auto; left: -4px; }
#contents1-2-4 .eco-wrap .eco01 { top: 0; left: 75px; }
#contents1-2-4 .eco-wrap .eco02 { bottom: 0; left: 75px; }
#contents1-2-4 .eco-wrap .eco03 { top: 0; right: 75px; }
#contents1-2-4 .eco-wrap .eco04 { bottom: 0; right: 75px; }

#contents1-2-4 .year-wrap { background: url('../../images/page/bg_1_2_4_1.png') no-repeat center bottom/cover; padding-bottom: 140px; }
#contents1-2-4 .year-wrap .year-box::before { content: ''; display: block; width: 1px; height: 100%; background-color: #9CA3AF; position: absolute; top: 0; left: 50%; transform: translateX(-50%); }
#contents1-2-4 .year-wrap .img-wrap { max-width: 494px; margin-left: auto; margin-right: auto; }
#contents1-2-4 .year-wrap .year-box .year-item { display: flex; width: 500px; margin-left: auto; margin-right: auto; position: relative; left: 107px; }
#contents1-2-4 .year-wrap .year-box .year-item .year { width: 112px; margin-top: 7px; }
#contents1-2-4 .year-wrap .year-box .year-item .dot { width: 14px; height: 14px; border-radius: 50%; border: 4.5px solid #E0002B; background-color: #fff; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); margin: 23px 24px; }

#contents1-2-4 .plan-wrap { max-width: 1000px; margin-left: auto; margin-right: auto; }
#contents1-2-4 .plan-wrap .plan { max-width: 921px; margin-left: auto; margin-right: auto; }
#contents1-2-4 .plan-wrap .plan li p { font-size: 20px; line-height: 24px; margin-top: 44px; }

/* 사회공헌 */
#contents1-2-4 .roadmap-wrap { width: 1294px; margin-left: 52px; }

/* 협력사 ESG 지원 */
#contents1-2-4 .process-wrap { max-width: 1035px; margin-left: auto; margin-right: auto; }
#contents1-2-4 .process-wrap .process-item { display: flex; }
#contents1-2-4 .process-wrap .process-item .tit { width: 252px; margin-right: 24px; display: flex; justify-content: center; align-items: center; border-radius: 20px; box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.1); }
#contents1-2-4 .process-wrap .process-item .process { position: relative; width: 759px; border: 1px solid #94A3B8; background-color: #F9FAFB; border-radius: 20px; padding: 57px 10px; display: flex; justify-content: center; align-items: start; }

#contents1-2-4 .process-wrap .process-item:first-child .process li { max-width: 233px; }
#contents1-2-4 .process-wrap .process-item:first-child .process > li + li { margin-left: 56px; }
#contents1-2-4 .process-wrap .process-item:nth-child(2) .process li img { max-width: 613px; }
#contents1-2-4 .process-wrap .process-item:nth-child(2) .process::before { content: ''; display: block; width: 28px; height: 78px; background: url('../../images/page/img_1_2_4_11.svg') no-repeat center/cover; position: absolute; top: -64px; left: 50%; transform: translateX(-50%); }
#contents1-2-4 .process-wrap .process-item:nth-child(2) .process::after { content: ''; display: block; width: 412px; height: 79px; background: url('../../images/page/img_1_2_4_12.svg') no-repeat center/cover; position: absolute; bottom: -80px; left: 50%; transform: translateX(-50%); z-index: 1; }
#contents1-2-4 .process-wrap .process-item:nth-child(3) .process { width: 374px; padding: 49px 10px 52px; text-align: center; }
#contents1-2-4 .process-wrap .process-item:nth-child(3) .process + .process { margin-left: 10px; }

#contents1-2-4 .process-wrap.last .process-item .process { flex-wrap: wrap; }
#contents1-2-4 .process-wrap.last .process-item .process li:nth-child(3n+1) { width: 146px; margin-left: 0; }
#contents1-2-4 .process-wrap.last .process-item .process li:nth-child(3n+2) { width: 176px; }
#contents1-2-4 .process-wrap.last .process-item .process li:nth-child(3n) { width: 188px; }



/******** contents1-3 ********/
#contents1-3 .img-wrap { height: 320px; position: relative; background: url('../../images/page/img_1_3_0_1.jpg') no-repeat center/cover; }
#contents1-3 .img-wrap p { width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

#contents1-3 .ethmanager-wrap { max-width: 949px; margin-left: auto; margin-right: auto; display: flex; justify-content: center; align-items: center; }
#contents1-3 .ethmanager-wrap .bracket { width: 42px; height: 162px; border-top: 15px solid #94A3B8; border-bottom: 15px solid #94A3B8; position: absolute; top: 57px; opacity: 0.3; transform: translateX(-50%); }
/* #contents1-3 .ethmanager-wrap .bracket.left { left: 0; border-left: 18px solid #94A3B8; } */
#contents1-3 .ethmanager-wrap .bracket.left { left: 0; border-left: 18px solid #94A3B8; }
#contents1-3 .ethmanager-wrap .bracket.right { right: 0; border-right: 18px solid #94A3B8; }
#contents1-3 .ethmanager-wrap .plus { width: 40px; height: 40px; position: relative; margin: 0 80px; }
#contents1-3 .ethmanager-wrap .plus span { display: block; width: 4px; height: 40px; background-color: #111827; border-radius: 50px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#contents1-3 .ethmanager-wrap .plus span + span { top: 0; left: 45%; transform: rotate(90deg); }
#contents1-3 .ethmanager-wrap .ethmanager02 { width: 276px; height: 276px; background-color: #1BB0AD; border-radius: 50%; box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.3); padding-top: 75px; }


/******** contents1-3-1 ********/
#contents1-3-1 .ethics-wrap .center { width: 542px; height: 542px; background: url('../../images/page/img_1_3_1_1.svg') no-repeat center/cover; margin: auto; }
#contents1-3-1 .ethics-wrap .center p { width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#contents1-3-1 .ethics-wrap .ethics { text-align: center; max-width: 232px; width: 100%; word-break: keep-all; position: absolute; }
#contents1-3-1 .ethics-wrap .ethics01 { top: 0; left: 72px; }
#contents1-3-1 .ethics-wrap .ethics02 { bottom: 0; left: 72px; }
#contents1-3-1 .ethics-wrap .ethics03 { top: 0; right: 72px; }
#contents1-3-1 .ethics-wrap .ethics04 { bottom: 0; right: 72px; }
#contents1-3-1 .ethics-wrap .ethics .line { position: absolute; width: 113px; height: 1px; border: 1px dashed #94A3B8; top: 50%; right: -46px; transform: translateY(-50%); }
#contents1-3-1 .ethics-wrap .ethics .line::after { content: ''; display: block; width: 8px; height: 8px; background-color: #009ABC; border-radius: 50%; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); position: absolute; top: -4px; right: -4px; }
#contents1-3-1 .ethics-wrap .ethics03 .line, #contents1-3-1 .ethics-wrap .ethics04 .line { right: auto; left: -46px; }
#contents1-3-1 .ethics-wrap .ethics03 .line::after, #contents1-3-1 .ethics-wrap .ethics04 .line::after { right: auto; left: -4px; }

#contents1-3-1 .ethics-rule-wrap > li { width: 25%; height: 391px; padding: 58px 40px 48px; border: 1px solid #94A3B8; border-top: 2px solid #1F2937; }
#contents1-3-1 .ethics-rule-wrap > li + li { margin-left: 16px; }
#contents1-3-1 .ethics-rule-wrap > li > p.bold { font-size: 28px; line-height: 36px; }
#contents1-3-1 .ethics-rule-wrap > li .list-num-wrap { border-top: 1px solid #94A3B8; padding-top: 32px; }
#contents1-3-1 .ethics-rule-wrap > li .list-num-wrap li + li { margin-top: 12px; }



/******** contents1-3-2 ********/
#contents1-3-2 .img-wrap { height: 320px; position: relative; background: url('../../images/page/img_1_3_2_1.jpg') no-repeat center/cover; }
#contents1-3-2 .img-wrap p { width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#contents1-3-2 .info-wrap { border-top: 1px solid #4B5563; }
#contents1-3-2 .info-wrap li { display: flex; align-items: center; padding: 32px 48px; border-bottom: 1px solid #D1D5DB; }
#contents1-3-2 .info-wrap li p:first-child { position: relative; width: 123px; margin-right: 32px; }
#contents1-3-2 .info-wrap li p:first-child::after { content: ''; display: block; width: 1px; height: 16px; background-color: #94A3B8; position: absolute; top: 8px; right: 0; }
#contents1-3-2 .info-wrap li p:first-child span { display: inline-block; vertical-align: middle; }
#contents1-3-2 .info-wrap li p:first-child span + span { margin-left: 16px; }
#contents1-3-2 .box-wrap { border: 1px solid #94A3B8; border-top: 2px solid #4B5563; padding: 64px 72px; }
#contents1-3-2 .list-dot-wrap li::before { background-color: #6B7280; }

/******** contents2-5 ********/
#contents2-5 .customer-slide .swiper-slide { height: auto; min-height: 388px; padding: 40px 40px 100px; box-shadow: 0 15px 25px rgba(113,132,152,0.24); }
#contents2-5 .customer-slide .swiper-slide + .swiper-slide { margin-left: 34px; }
#contents2-5 .customer-slide .swiper-slide ul li { padding-left: 12px; }
#contents2-5 .customer-slide .swiper-slide ul li:before { content: ''; position: absolute; left: 0; top: 11px; width: 4px; height: 4px; background-color: #374151; border-radius: 50%; }
#contents2-5 .customer-slide .swiper-slide img { position: absolute; bottom: 32px; right: 32px; }

/******** contents2-6 ********/
#contents2-6 .list-wrap { flex-wrap: wrap; }
#contents2-6 .list-wrap li { float: none; width: calc((100% - 68px) / 3); background-size: auto 100%; transition: background-size 0.5s; }
#contents2-6 .list-wrap li:nth-child(3n + 1) { margin-top: 34px; margin-left: 0; }
#contents2-6 .list-wrap li a { display: block; width: 100%; height: 100%; padding: 40px 60px 40px 40px; position: relative; word-break: keep-all; }
#contents2-6 .list-wrap li a:before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 440px; background: linear-gradient(180deg, #111827 0%, #111827 0.01%, rgba(17, 24, 39, 0) 77.05%); opacity: 0.7;; }
#contents2-6 .list-wrap li a .icon { position: absolute; top: 45px; right: 24px; }

#contents2-6 .list-wrap.type1 li:nth-of-type(1) { background-image: url('../../images/page/img_2_6_1.jpg'); }
#contents2-6 .list-wrap.type1 li:nth-of-type(2) { background-image: url('../../images/page/img_2_6_2.jpg'); }
#contents2-6 .list-wrap.type1 li:nth-of-type(3) { background-image: url('../../images/page/img_2_6_3.jpg'); }
#contents2-6 .list-wrap.type1 li:nth-of-type(4) { background-image: url('../../images/page/img_2_6_4.jpg'); }
#contents2-6 .list-wrap.type2 li:nth-of-type(1) { background-image: url('../../images/page/img_2_6_5.jpg'); }
#contents2-6 .list-wrap.type2 li:nth-of-type(2) { background-image: url('../../images/page/img_2_6_6.jpg'); }
#contents2-6 .list-wrap.type2 li:nth-of-type(3) { background-image: url('../../images/page/img_2_6_7.jpg'); }

#contents2-6 .property-wrap a { height: 180px; padding: 40px 60px 40px 40px; position: relative; }
#contents2-6 .property-wrap a .line { width: 24px; height: 1px; background-color: #111827; margin: 18px 0 20px; }
#contents2-6 .property-wrap a .icon { position: absolute; top: 45px; right: 24px; }

/******** contents2-7 ********/
#contents2-7 .list-dot-wrap li + li { margin-top: 10px; }
#contents2-7 .use-wrap ul, #contents2-7 .use-wrap ul li { border-color: rgba(255, 255, 255, 0.40); }
#contents2-7 .packaging-wrap { margin-top: 134px; height: 530px; background-image: url('../../images/page/img_3.jpg'); }

/******** contents3-2 ********/
#contents3-2 .contact-box .tit .num { width: 64px; height: 64px; border: 1px solid #6B7280; border-radius: 50%; padding: 8px 0; }
/* #contents3-2 .contact-box .tit span + span { margin-left: 24px; } */
#contents3-2 .contact-box .btn-wrap { overflow-x: scroll; }
#contents3-2 .contact-box .btn-wrap .btn-product { min-width: 198px; height: 200px; padding: 32px 32px 30px; text-align: left; display: block; font-weight: 400; border-color: #9CA3AF; }
#contents3-2 .contact-box .btn-wrap .btn-product + .btn-product { margin-left: 10px; }
#contents3-2 .contact-box .btn-wrap .btn-product span { display: block; }
#contents3-2 .contact-box .btn-wrap .btn-product .line { width: 20px; height: 1px; background-color: #000000; margin: 24px 0 20px; }
#contents3-2 .contact-box .btn-wrap .btn-product .checkbox { width: 36px; height: 36px; border-radius: 50%; position: absolute; top: 22px; right: 22px; background: #E5E7EB url('../../images/common/icon_check.svg') no-repeat center; }

#contents3-2 .contact-box .btn-wrap .btn-product.active { border-color: #E0002B; background-color: #FFF8F8; box-shadow: 0px 10px 30px rgba(88, 28, 39, 0.2); }
#contents3-2 .contact-box .btn-wrap .btn-product.active span { color: #E0002B; }
#contents3-2 .contact-box .btn-wrap .btn-product.active .line { background-color: #E0002B; }
#contents3-2 .contact-box .btn-wrap .btn-product.active .checkbox { background: #E0002B url('../../images/common/icon_check_w.svg') no-repeat center; }

#contents3-2 .input-box-wrap .email-box .input-item { width: 464px; }
#contents3-2 .input-box-wrap .email-box .input-item #eml_id { float: left; width: 272px; }
#contents3-2 .input-box-wrap .email-box .input-item #eml_domain { float: left; width: 170px; margin-left: 22px; padding: 0 10px; }
#contents3-2 .input-box-wrap .email-box .input-item span { position: absolute; left: 272px; font-size: 24px; font-weight: 500; width: 22px; height: 72px; line-height: 72px; border-bottom: 1px solid #111827; }
#contents3-2 .input-box-wrap .input-box + .input-box { width: calc(100% - 756px); margin-left: 34px; }
#contents3-2 .input-box-wrap .email-box .select-item { width: 248px; margin-left: 10px; margin-top: 50px; }
#contents3-2 .input-box-wrap .email-box .select-item select { padding: 0 20px 0 30px; background-image: url('../../images/common/icon_triangle.svg'); background-repeat: no-repeat; background-position: right 20px center; }

#contents3-2 .contact-box .privacy-box { position: relative; background-color: #F9FAFB; padding: 40px 0; }
#contents3-2 .contact-box .privacy-box::after { content: ''; display: block; width: 100%; height: 31px; position: absolute; bottom: 36px; left: 0; background: linear-gradient(180deg, rgba(249, 250, 251, 0) 0%, #F9FAFB 85.48%); }
#contents3-2 .contact-box .privacy-box .scroll-box { height: 230px; overflow-y: auto; padding: 0 48px 25px 48px; }
#contents3-2 .btn-wrap .btn.lg + .btn.lg { margin-left: 16px; }

#contents3-2 .email-box { display: flex; flex-wrap: wrap; column-gap: 34px; }
#contents3-2 .email-box li { width: calc(50% - 34px); padding: 30px 40px; border-bottom: 1px solid #D1D5DB; }
#contents3-2 .email-box li:nth-child(-n+2) { border-top: 1px solid #D1D5DB; }
#contents3-2 .email-box li p { font-size: 18px; font-weight: bold; margin-bottom: 5px; }
#contents3-2 .email-box li a { font-size: 18px; color: #374151; }

/* loading-modal */
.loading_modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: #00000060; z-index: 100; }
.loading_modal .spinner { position: absolute; width: 100px; height: 100px; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.loading_modal .spinner span { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform-origin: 50px 50px; opacity: 0.5; animation: blink 1.2s infinite; }
.loading_modal .spinner span:before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 5px; height: 30px; border-radius: 20px; background-color: #fff; }
.loading_modal .spinner span:nth-child(1) { transform: rotate(30deg); animation-delay: -1.1s; }
.loading_modal .spinner span:nth-child(2) { transform: rotate(60deg); animation-delay: -1.0s; }
.loading_modal .spinner span:nth-child(3) { transform: rotate(90deg); animation-delay: -0.9s; }
.loading_modal .spinner span:nth-child(4) { transform: rotate(1200deg); animation-delay: -0.8s; }
.loading_modal .spinner span:nth-child(5) { transform: rotate(150deg); animation-delay: -0.7s; }
.loading_modal .spinner span:nth-child(6) { transform: rotate(180deg); animation-delay: -0.6s; }
.loading_modal .spinner span:nth-child(7) { transform: rotate(210deg); animation-delay: -0.5s; }
.loading_modal .spinner span:nth-child(8) { transform: rotate(240deg); animation-delay: -0.4s; }
.loading_modal .spinner span:nth-child(9) { transform: rotate(270deg); animation-delay: -0.3s; }
.loading_modal .spinner span:nth-child(10) { transform: rotate(300deg); animation-delay: -0.2s; }
.loading_modal .spinner span:nth-child(11) { transform: rotate(330deg); animation-delay: -0.1s; }
@keyframes blink {
    0% { opacity: 0.5; }
    50% { opacity: 1; }
    100% { opacity: 0.5; }
}

/******** contents3-4 ********/
#contents3-4 { padding-top: 153px; }
#contents3-4 .list-dot-wrap li + li { margin-top: 10px; }

#contents3-4 .product-select .dropdown, #contents3-4 .product-select ul li a { padding: 15px 20px; }
#contents3-4 .product-select .dropdown { width: 180px; border-radius: 0; }
#contents3-4 .product-select:first-child .dropdown { border-radius: 2px 0 0 2px; }
#contents3-4 .product-select + .product-select .dropdown  { width: 279px; margin-left: -1px; }
#contents3-4 .product-select.on + .product-select .dropdown, #contents3-4 .product-select.on + .refresh { border-left-color: #1F2937; }
#contents3-4 .refresh { width: 56px; height: 56px; margin-left: -1px; border: 1px solid #D1D5DB; border-radius: 0 2px 2px 0; background-image: url('../../images/common/icon_refresh.svg'); background-repeat: no-repeat; background-position: center; transition: 0.3s; z-index: 5; }
/* #contents3-4 .product-select .dropdown + ul { width: calc(100% + 2px); transform: translateX(-1px); } */
#contents3-4 .pos-r { z-index: 1; }
#contents3-4 .txt-list .pdf img { width: 28px; }

/******** contents4-1 ********/
#contents4-1 .txt-list-wrap { margin-top: -50px; }
#contents4-1 .more { position: absolute; right: 28px; top: 28px; width: 56px; height: 56px; background-color: #ccc; border-radius: 50%; border: 2px solid #D1D5DB; background-image: url('../../images/common/icon_plus.svg'); background-color: #FFF; background-repeat: no-repeat; background-position: center; }
#contents4-1 .txt-list-wrap { padding: 0 28px; }

/******** view ********/
.link-arrow { display: block; }
.link-arrow .text { font-size: 18px; font-weight: bold; }
.link-arrow.prev .text { padding-left: 24px; }
.link-arrow.next .text { padding-right: 24px; }

.view.contents { padding-top: 278px; }
.view .category-wrap { display: flex; align-items: center; border-bottom: 1px solid #111827; }

.view .view-desc ul { padding-left: 30px; }
.view .view-desc ul li { position: relative; list-style-type: disc; font-size: 24px; font-weight: bold; line-height: 37px; letter-spacing: -0.03em; }
.view .view-desc img { max-width: 100%; width: 100% !important; float: none !important; }
.view .view-desc a { word-break: break-all; }

.view .view-desc .download-wrap { margin-top: 160px; border-top: 1px solid #CBD5E1; padding: 24px 0; overflow: hidden; }
.view .view-desc .download-wrap .file-name { line-height: 40px; width: calc(100% - 120px); display: block; float: left; text-align: left; }
.view .view-desc .download-wrap a { float: right; }
.view .view-desc .download-wrap .btn > span > img { width: 25px; height: 25px; }

.view .view-contorl { position: relative; border-top: 1px solid #0F172A; overflow: hidden; }
.view .view-contorl > div { float: left; width: 33.3%; height: 100%; }
.view .view-contorl > div > a { display: block; padding: 55px 0; }
.view .view-contorl > div > a > span { height: auto; }
.view .view-contorl > div.next-info > a { text-align: right; }
.view .view-contorl > div.next-info > a > span { text-align: right; word-break: keep-all; }
.view .view-contorl.text::after { content: ""; position: absolute; left: 50%; top: 50%; width: 1px; height: calc(100% - 73px); background-color: #CBD5E1; transform: translate(-50% , -50%); }
.view .view-contorl.text > div { width: calc(50% - 47px); }
.view .view-contorl > div > a.btn-list { padding-top: 32px; }
.view .view-contorl > div > a.btn-list > span { text-indent: -99999px; width: 72px; height: 72px; display: block; margin: auto; background: #111827 url('../../images/common/icon_list_w.svg') no-repeat center; }



/* 로딩바 추가 */
.loading_bar { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); }


/* circle {
    fill: none;
    stroke-width: 2;
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
    stroke-linecap: round;
    animation: dash4 1.5s ease-in-out infinite;
    -webkit-animation: dash4 1.5s ease-in-out infinite;
} */

@keyframes dash4 {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 90, 200;
        stroke-dashoffset: -35px;
    }

    100% {
        stroke-dashoffset: -125px;
    }
}

@media (max-width: 1600px) {

}

@media (max-width: 1480px) {
    /******** contents1-1-4 ********/
    #contents1-1-4 .img-wrap .line.left { top: 24%; left: 5%; }
    #contents1-1-4 .img-wrap .line.right { top: 24%; right: 5%; }
    #contents1-1-4 .img-wrap .main p { top: 23%; }

    /******** common ********/
    .product-wrap::after { height: calc(100% - 56px); }
    .product-wrap .txt-wrap { padding: 1.5% 28px 0 34px; margin-top: 80px; }
}

@media (max-width: 1280px){
    .br-none1280 { display: none; }

    /******** common ********/
    #contents { word-break: keep-all; }

    .product-wrap { display: block; }
    .product-wrap::after { width: 100%; height: 100%; bottom: auto; top: 56px; }
    .product-wrap .product-slide-wrap { max-width: 100%; width: 100%; padding: 0 28px; }
    .product-wrap .product-slide-wrap .img-wrap img { width: 100%; }
    .product-wrap .swiper-btn-wrap { left: auto; margin-left: auto; }
    .product-wrap .txt-wrap { width: 100%; margin-top: 0; padding: 34px 28px 0; }
    .product-wrap .txt-wrap p { max-width: 100%; }

    .packaging-wrap .packaging li + li { margin-left: 16px; }
    .packaging-wrap .packaging li + li::before { display: none; }

    /* .property-wrap a { width: calc((100% - 32px)/ 3); }
    .property-wrap a + a { margin-left: 16px; }
    .property-wrap a:nth-child(3n + 1) { margin-top: 16px; } */


    /******** contents1-1-1 ********/
    #contents1-1-1 .txt-wrap .txt { width: 542px; }

    /******** contents1-1-2 ********/
    #contents1-1-2 .ceo-wrap { padding-top: 64px; }
    #contents1-1-2 .ceo-wrap .bg-F3F4F6 { left: -100%; height: 100%; max-height: 442px;}

    /******** contents1-1-3 ********/
    #contents1-1-3 .history-wrap .history ul { width: 570px; }
    #contents1-1-3 .history-wrap .history .img-wrap { position: relative; left: 18%; float: left; margin-top: 40px; margin-right: 0; }

    /******** contents1-1-4 ********/
    #contents1-1-4 .img-wrap .main img { max-width: 624px; width: 100%; margin-left: 4px; }
    #contents1-1-4 .img-wrap .line.left { position: static; margin-top: 20px; margin-left: auto; margin-right: auto; }
    #contents1-1-4 .img-wrap .line.right { position: static; margin-top: 20px; margin-left: auto; margin-right: auto; }
    #contents1-1-4 .img-wrap .line.center { margin-top: 20px; }
    #contents1-1-4 .img-wrap .line::before { content: ''; display: block; height: 3.5px; width: 20px; background: url('../../images/page/img_1_1_4_2.svg') no-repeat center/cover; position: absolute; top: -13px; left: 50%; transform: translateX(-50%) rotate(90deg); }
    #contents1-1-4 .img-wrap .line.left::before { width: 36px; top: -20px; }

    /******** contents1-1-5 ********/
    #contents1-1-5 .default-wrap.medium:not(:first-of-type):not(:last-of-type):after,
    #contents1-1-5 .color-wrap:not(.dark):after { width: calc(100% - 56px); left: 50%; transform: translateX(-50%); }
    #contents1-1-5 .color-wrap:not(.dark):after { width: 100%; }

    /******** contents1-2-1 ********/
    #contents1-2-1 .esg-wrap { margin-top: 40px; }

    /******** contents1-2-3 ********/
    /* 안전보건환경 방침 */
    #contents1-2-3 .environment-wrap { padding: 0; }
    #contents1-2-3 .environment-wrap .environment,
    #contents1-2-3 .environment-wrap .environment:nth-child(even) { flex-direction: column; }
    #contents1-2-3 .environment-wrap .environment div { max-width: 617px; margin: auto; }
    #contents1-2-3 .environment-wrap .environment div + div { width: 100%; margin-top: 40px; margin-bottom: 0; }
    #contents1-2-3 .environment-wrap .environment .tit span { font-size: 40px; }
    /* 경영시스템 */
    /* #contents1-2-3 .management-wrap .box { height: 64px; line-height: 64px !important; } */
    #contents1-2-3 .management-wrap img[alt="화살표"] { width: calc(100vw - 102px); margin: 28px 0 23px 0; }

    #contents1-2-3 .management02-wrap { max-width: 736px; flex-direction: column; align-items: center; }
    #contents1-2-3 .management02-wrap .management { width: 100%; display: flex; flex-direction: column; }
    #contents1-2-3 .management02-wrap .management + .management { margin-top: 67px; }
    #contents1-2-3 .management02-wrap .bg-img { margin-bottom: 0; }
    #contents1-2-3 .management02-wrap .list-dot-wrap { width: 100%; height: auto; margin-top: 30px; padding: 30px; }
    #contents1-2-3 .management02-wrap .left .bg-img { order: 2; margin-bottom: 0; margin-top: 30px; }
    #contents1-2-3 .management02-wrap .left .list-dot-wrap { order: 1; margin-top: 0; }
    #contents1-2-3 .management02-wrap .center { position: relative ;}
    #contents1-2-3 .management02-wrap .center .center-border { position: static; margin: auto; }
    #contents1-2-3 .management02-wrap .center .center-border::before,
    #contents1-2-3 .management02-wrap .center .center-border::after { width: 28px; height: 60px; top: 0; left: 50%; transform: translate(-45%, -55px); background-image: url('../../images/page/img_1_2_3_2_5_mo.svg'); }
    #contents1-2-3 .management02-wrap .center .center-border::after { top: 100%; transform: rotate(180deg) translate(35%, 5px);  }

    /******** contents1-2-4 ********/
    #contents1-2-4 .bg-F1F5F9 .img-arrow { margin: 0; }
    #contents1-2-4 .bg-F1F5F9 .img-arrow img { width: 240px; }
    #contents1-2-4 .bg-F1F5F9 ul li { flex-direction: column; }
    #contents1-2-4 .bg-F1F5F9 ul li + li { margin-top: 16px; }
    #contents1-2-4 .bg-F1F5F9 ul li p { font-size: 24px !important; }
    #contents1-2-4 .bg-F1F5F9 ul li p:first-child { width: 40px; height: 40px; line-height: 40px; margin: 0; }
    #contents1-2-4 .bg-F1F5F9 ul li p + p { margin-top: 12px; }
    #contents1-2-4 .btn-wrap { display: flex; flex-direction: column; }
    #contents1-2-4 .btn-wrap .btn.more { width: 232px; margin: 0; font-size: 16px; }
    #contents1-2-4 .btn-wrap .btn.more + .btn.more { margin-top: 9px; }
    #contents1-2-4 .btn-wrap .btn.more span.plus { margin: 0; }

    #contents1-2-4 .roadmap-wrap { width: 100%; margin: 0; overflow-x: scroll; }
    #contents1-2-4 .roadmap-wrap img { min-width: 1024px; }

    /******** contents1-3-1 ********/
    #contents1-3-1 .ethics-wrap .center { width: 303px; height: 303px;; margin-bottom: 80px; }
    #contents1-3-1 .ethics-wrap .ethics { position: static; margin: auto; margin-top: 38px; }
    #contents1-3-1 .ethics-wrap .ethics .line { display: none; }
    #contents1-3-1 .ethics-wrap .ethics01 .line { display: block; top: 0; left: 50%; width: 1px; height: 54px; transform: translateY(-100%); }

    #contents1-3-1 .ethics-rule-wrap { flex-direction: column; max-width: 375px; margin: auto; }
    #contents1-3-1 .ethics-rule-wrap > li { width: 100%; height: 286px; max-width: 768px; margin: auto; padding: 40px 32px; text-align: center; }
    #contents1-3-1 .ethics-rule-wrap > li + li { margin: auto; margin-top: 16px; }
    #contents1-3-1 .ethics-rule-wrap > li > p { display: inline-block; margin-bottom: 0 !important; vertical-align: middle; }
    #contents1-3-1 .ethics-rule-wrap > li > p.bold { font-size: 22px; line-height: 36px; }
    #contents1-3-1 .ethics-rule-wrap > li > p img { width: 40px; }
    #contents1-3-1 .ethics-rule-wrap > li .list-num-wrap { margin-top: 40px; }
    #contents1-3-1 .ethics-rule-wrap > li .list-num-wrap li p:first-child { margin-right: 8px; }
    #contents1-3-1 .ethics-rule-wrap > li .list-num-wrap li { padding: 0 18px; text-align: left; }

    #contents1-3-1 .btn.more { padding: 0 31px; font-size: 16px; }
    #contents1-3-1 .btn.more .plus { margin-left: 24px; }

    /******** contents1-3-2 ********/
    #contents1-3-2 .img-wrap p { padding: 28px; }

    /******** contents2-5 ********/
    #contents2-5 .customer-slide .swiper-slide { flex: none; min-height: 355px; }
    #contents2-5 .customer-slide .swiper-slide + .swiper-slide { margin-left: 0; }

    /******** contents2-6-2 ********/
    #contents2-6-2 .tb-card .ellipse { white-space: normal; }
}

@media (max-width: 1024px) {
    .br-none1024 { display: none; }

    /******** common ********/
    .product-tab-wrap { overflow-x: scroll;}

    .use-wrap { display: block !important; }
    .use-wrap ul li { padding: 20px 24px; }
    .use-wrap.has-desc ul li { height: auto; }
    .use-wrap > div + div { margin-left: 0; }
    .use-wrap > div + div ul { border-top: none; }

    .packaging-wrap, #contents2-7 .packaging-wrap { height: auto; padding: 64px 0; }
    .packaging-wrap .tit { max-width: 400px; margin-left: auto; margin-right: auto; }
    .packaging-wrap .packaging { display: block; max-width: 400px; margin-left: auto; margin-right: auto; }
    .packaging-wrap .packaging li + li { margin-left: 0; margin-top: 12px; }

    /* .property-wrap a.btn-pdf { width: calc(50% - 8px); max-width: 100%; }
    .property-wrap a + a { margin-left: 0; }
    .property-wrap a:nth-child(3n + 1) { margin-top: 0; }
    .property-wrap a:nth-child(2n) { margin-top: 16px; margin-left: 16px; }
    .property-wrap a:nth-child(n + 2) { margin-top: 16px; } */
    .property-wrap .btn-list li { min-width: 45%; max-width: calc(calc(100% - 34px) / 2); }
    .property-wrap .btn-list li:not(:nth-of-type(3n)) { margin-right: 0; }
    .property-wrap .btn-list li:not(:nth-of-type(2n)) { margin-right: 34px; }
    .property-wrap .btn-list li:nth-of-type(n+3) { margin-top: 34px; }

    /******** contents1-1-1 ********/
    #contents1-1-1 .default-wrap.img-center { height: 453px; }
    #contents1-1-1 .default-wrap.img-center .curtain-wrap > div { width: 10%; }
    #contents1-1-1 .txt-wrap { display: block !important; }
    #contents1-1-1 .txt-wrap .txt { width: 100%; margin-top: 28px; }
    #contents1-1-1 .arrow.ani-circle { position: absolute; top: 0; right: 0; transform: scale(0.903); }
    #contents1-1-1 .default-wrap.img-right { margin-top: 100px; margin-bottom: 120px; }
    #contents1-1-1 .default-wrap.img-right .img-wrap { position: static; width: 100%; height: 0; padding-bottom: 64%; background-size: cover; }

    /******** contents1-1-2 ********/
    #contents1-1-2 .ceo-wrap { align-items: center; }
    #contents1-1-2 .ceo-wrap .font56 { font-size: 40px !important; }
    #contents1-1-2 .ceo-wrap .img-wrap { width: 50%; }

    /******** contents1-1-3 ********/
    #contents1-1-3 .history-wrap .history ul { width: 100%; margin: 40px 0 0; }
    #contents1-1-3 .history-wrap .history .img-wrap { left: 0; }
    
    /******** contents1-1-5 ********/
    #contents1-1-5 .negative-img { overflow-x: auto; }
    #contents1-1-5 .negative-img img { min-width: 1223px; }

    /******** contents1-1-6 ********/
    #contents1-1-6 .business-list .col-name { width: 240px; }
    #contents1-1-6 .business-list thead th,
    #contents1-1-6 .business-list tbody th,
    #contents1-1-6 .business-list tbody td { padding-inline: 16px; }

    /******** contents1-2-4 ********/
    #contents1-2-4 .eco-wrap { margin: 378px 0; }
    #contents1-2-4 .eco-wrap .eco { margin: 74px 0; }
    #contents1-2-4 .eco-wrap .eco01 { top: auto; bottom: 100%; left: 7%; }
    #contents1-2-4 .eco-wrap .eco02 { top: 100%; bottom: auto; left: 9%; }
    #contents1-2-4 .eco-wrap .eco03 { top: auto; bottom: calc(100% + 108px); right: 9%; }
    #contents1-2-4 .eco-wrap .eco04 { top: 100%; bottom: auto; right: 9%; }
    #contents1-2-4 .eco-wrap .eco .line { width: 60px; }
    #contents1-2-4 .eco-wrap .eco.right .line { right: auto; left: auto; }
    #contents1-2-4 .eco-wrap .eco01 .line { top: calc(100% + 44px); left: 50%; right: auto; }
    #contents1-2-4 .eco-wrap .eco02 .line,
    #contents1-2-4 .eco-wrap .eco.eco04 .line { top: -44px; left: 50%; right: auto; }
    #contents1-2-4 .eco-wrap .eco.eco03 .line { width: 158px; top: calc(100% + 105px); left: 50%; right: auto; }
    #contents1-2-4 .eco-wrap .eco01 .line,
    #contents1-2-4 .eco-wrap .eco04 .line { transform: translateX(-50%) rotate(90deg); }
    #contents1-2-4 .eco-wrap .eco02 .line,
    #contents1-2-4 .eco-wrap .eco03 .line { transform: translateX(-50%) rotate(-90deg); }

    /******** contents2-7 ********/
    #contents2-7 .use-wrap ul li { padding: 30px 40px; }
    #contents2-7 .use-wrap ul li .font18 { font-size: 18px !important; }

    /******** contents3-2 ********/
    #contents3-2 .input-box-wrap .email-box { width: 100%; }
    #contents3-2 .input-box-wrap .email-box .input-item { width: calc(100% - 258px); }
    #contents3-2 .input-box-wrap .email-box .input-item #eml_id { width: calc(100% - 22px - 35%); }
    #contents3-2 .input-box-wrap .email-box .input-item span { left: calc(100% - 22px - 35%); }
    #contents3-2 .input-box-wrap .email-box .input-item #eml_domain { width: 35%;}
    #contents3-2 .input-box-wrap .input-box + .input-box { width: 100%; margin-left: 0; margin-top: 28px; }

    #contents3-2 .email-box { flex-direction: column; }
    #contents3-2 .email-box li { width: 100%; padding: 20px 24px; border-bottom: 1px solid #D1D5DB; }
    #contents3-2 .email-box li:nth-child(-n+2) { border-top: none; }
    #contents3-2 .email-box li:first-child { border-top: 1px solid #D1D5DB; }
    #contents3-2 .email-box li p { font-size: 20px; margin-bottom: 0px; }

    /******** contents3-4 ********/
    #contents3-4 .product-search-wrap { float: right !important; }
    #contents3-4 .news-search-wrap { position: absolute; bottom: 120%; right: 0; float: none; }
}

/*md*/
@media (max-width: 768px) {
    /******** common ********/
    .product-tab-wrap { overflow-x: scroll; -ms-overflow-style: none; scrollbar-width: none; }
    .product-tab-wrap::-webkit-scrollbar { display: none; }
    .product-tab-wrap li .icon { width: 100px; height: 100px; background-size: 40px; }

    .product-wrap { padding-bottom: 74px; }
    .product-wrap::after { height: calc(100% - 56px); }
    .product-wrap .product-slide-wrap .tit { bottom: 14px; right: 14px; }
    .product-wrap .swiper-btn-wrap { min-width: 175px; width: 50%; height: 50px; padding: 13px 24px; }
    .product-wrap .swiper-btn-wrap .swiper-pagination-fraction .swiper-pagination-current { left: 24px; }
    .product-wrap .swiper-btn-wrap .swiper-pagination-fraction .swiper-pagination-total { left: auto; right: 24px; }
    .product-wrap .swiper-btn-wrap .swiper-progress-bar { width: calc(100% - 115px); top: 50%; left: 50%; transform: translate(-50%, -50%); }
    .product-wrap .swiper-btn-wrap .swiper-button-next, .product-wrap .swiper-btn-wrap .swiper-button-prev { display: none; }

    .packaging-wrap .packaging li + li { margin-top: 48px; }
    .packaging-wrap .packaging li > div:first-child { width: 64px; height: 64px; }

    /* .property-wrap a { padding: 20px 18px 18px 28px; background-position: right 18px bottom 18px;}
    .property-wrap a.btn-pdf { width: 100%; height: 148px; }
    .property-wrap a:nth-child(2n) { margin-top: 0; margin-left: 0; }
    .property-wrap a.btn-pdf + a.btn-pdf { margin-top: 16px; } */
    .property-wrap .btn-list li { min-width: 100%; max-width: none; }
    .property-wrap .btn-list li:nth-of-type(n+3) { margin-top: 24px; }
    .property-wrap .btn-list li + li { margin-top: 24px; }

    .txt-list-wrap .pagination-wrap .pagination { justify-content: space-between !important; }
    .txt-list-wrap .pagination-wrap .pagination .prev,
    .txt-list-wrap .pagination-wrap .pagination .next { margin: 0; }
    .txt-list-wrap .pagination-wrap .pagination .num { width: 30px; height: 30px; font-size: 16px; }
    .txt-list-wrap .pagination-wrap .pagination .num + .num { margin-left: 4px; }

    /******** contents1-1 coporation ********/
    [id^="contents1-1"] h1.tit span { font-size: 36px !important; }

    /******** contents1-1-1 ********/
    #contents1-1-1 .default-wrap.img-center { height: 282px; }
    #contents1-1-1 .default-wrap.img-right .txt-wrap .font48,
    #contents1-1-1 .default-wrap.medium.mb120 .txt-wrap:first-of-type .font48 { width: calc(100% - 80px); }
    #contents1-1-1 .max-inner .txt-bg { font-size: 13.26vw; }
    #contents1-1-1 .max-inner .txt-main { width: 264px; }
    #contents1-1-1 p.mb40 { margin-bottom: 28px !important; }
    /* #contents1-1-1 .txt-wrap p br:nth-child(2) { display: none; } */

    /******** contents1-1-2 ********/
    #contents1-1-2 .ceo-wrap { flex-direction: column; align-items: flex-start; margin-left: 0; margin-top: 80px; padding-top: 64px; }
    #contents1-1-2 .ceo-wrap .bg-F3F4F6 { left: -100%; height: 100%; max-height: 100%; }
    #contents1-1-2 .ceo-wrap .mb70 { width: 100%; margin-bottom: 0; }
    #contents1-1-2 .ceo-wrap .mb70 .font56 { font-size: 28px !important; }
    #contents1-1-2 .ceo-wrap .img-wrap { width: 100%; text-align: right; }
    #contents1-1-2 .ceo-wrap .img-wrap img { margin-left: 60px; width: 480px; min-width: 400px; }

    /******** contents1-1-3 ********/
    #contents1-1-3 .history-wrap .history .years { font-size: 48px; line-height: 1.15em; }
    #contents1-1-3 .history-wrap .history .years span { font-size: 32px; line-height: 1.3em; }
    #contents1-1-3 .history-wrap .history .plus { width: 32px; height: 32px; }
    #contents1-1-3 .history-wrap .history .plus span { width: 3px; height: 32px; }
    #contents1-1-3 .history-wrap .history ul li + li { margin-top: 12px; }

    #contents1-1-3 .history-wrap .history.active { padding-bottom: 32px; }

    /******** contents1-1-5 ********/
    #contents1-1-5 img { width: 100%; }
    #contents1-1-5 .btn.pc-hidden { display: flex; margin-top: -40px; margin-bottom: 100px;}

    #contents1-1-5 .mb56 { margin-bottom: 40px !important; }

    #contents1-1-5 .color-wrap { flex-direction: column; }
    #contents1-1-5 .color-wrap .color-item + .color-item { margin-left: 0; margin-top: 14px; }
    #contents1-1-5 .color-wrap .color-item .box { height: 88px; }
    #contents1-1-5 .color-wrap .color-item .box.mb56 { margin-bottom: 28px !important; }
    #contents1-1-5 .color-wrap .color-item .box p { bottom: 19px; line-height: 50px; font-size: 40px; }
    #contents1-1-5 .color-wrap .color-item ul li { justify-content: space-between; }
    #contents1-1-5 .color-wrap .color-item ul li p:first-child { width: auto; }
    #contents1-1-5 .color-wrap .color-item ul li p + p { width: auto; margin-left: auto; text-align: right; }
    #contents1-1-5 .color-wrap .color-item ul li p span + span { margin-left: 12px; }

    #contents1-1-5 .color-wrap.dark .color-item { width: 100%; }
    #contents1-1-5 .color-wrap.dark .color-item > p { margin-bottom: 28px; }

    #contents1-1-5 .negative-wrap { flex-direction: column; }
    #contents1-1-5 .negative-wrap .negative-item + .negative-item { margin-left: 0; margin-top: 34px; }
    #contents1-1-5 .negative-wrap .negative-item .box { height: 178px; margin-bottom: 20px !important; }
    #contents1-1-5 .negative-wrap .negative-item .box img { top: 50%; width: 51.7%; transform: translate(-50%, -50%); }

    /******** contents1-1-6 ********/
    #contents1-1-6 .business-list table,
    #contents1-1-6 .business-list tbody,
    #contents1-1-6 .business-list tr,
    #contents1-1-6 .business-list th,
    #contents1-1-6 .business-list td { display: block; width: 100%; }
    #contents1-1-6 .business-list table { padding-block: 6px 12px; }
    #contents1-1-6 .business-list .col-name { width: 100%; }
    #contents1-1-6 .business-list thead { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
    #contents1-1-6 .business-list tbody th,
    #contents1-1-6 .business-list tbody td { padding-block: 0; border-top: none; }
    #contents1-1-6 .business-list tbody tr { padding-block: 24px; }
    #contents1-1-6 .business-list tbody tr:not(:first-child) { border-top: 1px solid #DCE0E6; }

    #contents1-1-6 .business-list tbody th { margin-bottom: 16px; }
    #contents1-1-6 .business-list tbody th .tit { font-size: 20px; }
    #contents1-1-6 .business-list tbody th:has(.sub) .tit { text-align: left; }
    #contents1-1-6 .business-list tbody th .sub { margin-top: 8px; font-size: 16px; }
    #contents1-1-6 .business-list tbody td p { font-size: 16px; }
    #contents1-1-6 .business-list tbody td p + p { margin-top: 8px; }

    /******** contents1-2-1 ********/
    #contents1-2-1 .tit, #contents1-2-1 .tit + p { position: relative; z-index: 1; }
    #contents1-2-1 .esg-wrap::after { width: 227px; height: 183px; top: -144px; right: -122px; }
    #contents1-2-1 .esg-wrap .book { width: 260px; height: 338px; margin: 0 auto; padding: 15px 25px 0 38px; font-size: 22px !important; }
    #contents1-2-1 .esg-wrap .book .logo { width: 67px; }
    #contents1-2-1 .esg-wrap .btn-wrap { flex-direction: column; padding-top: 8px; }
    #contents1-2-1 .esg-wrap .btn-wrap .btn { max-width: none; height: auto; padding: 12px 20px; padding-right: 124px; background-size: 24px; background-position: center right 20px; font-size: 16px; }
    #contents1-2-1 .esg-wrap .btn-wrap .btn + .btn { margin-left: 0; margin-top: 12px; }

    /******** contents1-2-2 ********/
    #contents1-2-2 .mb56 { margin-bottom: 40px !important; }

    #contents1-2-2 .tit + .font32 { font-size: 22px !important; }
    #contents1-2-2 .manage-wrap ul { flex-direction: column; }
    #contents1-2-2 .manage-wrap li { overflow: hidden; width: 100%; height: auto; max-height: 172px; border: 1px solid #94A3B8; transition: max-height 0.6s -0.3s; transition-timing-function: linear;}
    #contents1-2-2 .manage-wrap li + li, #contents1-2-2 .manage-wrap li:last-child { border-top: none; }
    #contents1-2-2 .manage-wrap li a { padding: 32px; }
    #contents1-2-2 .manage-wrap li a span { display: inline-block; vertical-align: middle; }
    #contents1-2-2 .manage-wrap li a img { width: 80px; }
    #contents1-2-2 .manage-wrap li a .num { float:left; margin-left: 15%; padding-top: 40px; }
    #contents1-2-2 .manage-wrap li a .tit, #contents1-2-2 .manage-wrap li a .txt { display: block; }
    #contents1-2-2 .manage-wrap li a .tit { margin: 0; padding-left: 80px; font-size: 20px; }
    #contents1-2-2 .manage-wrap li a .txt { transform: translate(0,150px);}
    #contents1-2-2 .manage-wrap + p { font-size: 20px !important; }
    #contents1-2-2 .manage-wrap + p br { display: none; }

    #contents1-2-2 .manage-wrap li.active { width: 100%; max-height: 517px; transition: max-height 1s; }
    #contents1-2-2 .manage-wrap li.active a .tit { margin: 0; font-size: 22px; }

    #contents1-2-2 .box-wrap { flex-direction: column; padding: 32px 24px; }
    #contents1-2-2 .box-wrap:first-of-type { margin-top: -18px; }
    #contents1-2-2 .box-wrap::before { width: calc(100% - 48px); height: 1px; top: 107px; left: 50%; transform: translateX(-50%);}
    #contents1-2-2 .box-wrap div + div { margin-top: 65px; }
    #contents1-2-2 .box-wrap .tit { width: 100%; margin: 0; text-align: center; font-size: 36px !important; }
    #contents1-2-2 .box-wrap .tit + .font32 { font-size: 24px !important; }
    #contents1-2-2 .box-wrap div:not(.tit) .bold, #contents1-2-2 .box-wrap div:not(.tit) strong { font-weight: normal !important; }
    #contents1-2-2 .box-wrap br { display: none; }

    /******** contents1-2-3 ********/
    /* 경영시스템 */
    #contents1-2-3 .management-wrap, #contents1-2-3 .management02-wrap .management { max-width: 375px; }
    #contents1-2-3 .management-wrap .box { height: 60px; line-height: 60px !important; font-size: 20px !important; }
    #contents1-2-3 .management-wrap .box:first-of-type { height: 64px; line-height: 64px !important; margin-bottom: 40px !important; }
    #contents1-2-3 .management02-wrap .bg-img { width: 193px; height: 193px; }
    #contents1-2-3 .management02-wrap .bg-img p { font-size: 18px; }

    #contents1-2-3 .management02-wrap .list-dot-wrap { font-size: 14px; }
    #contents1-2-3 .management02-wrap .center .center-border { width: 270px; height: 270px; }
    #contents1-2-3 .management02-wrap .center .center-border .center-inner p { font-size: 20px; }

    /* 성과 */
    #contents1-2-3 .mb28 { margin-bottom: 16px !important; }
    #contents1-2-3 .result-wrap img { max-width: 100vw; transform: translateX(-28px); height: 300px; object-fit: cover; }
    #contents1-2-3 .result-wrap .txt { max-width: 100%; }
    #contents1-2-3 .result-wrap.left .txt,
    #contents1-2-3 .result-wrap.right .txt { margin: auto; margin-top: 60px; padding: 0; }

    /* SHE Golden Rule 제도 */
    #contents1-2-3 .bg-F1F5F9 { margin-bottom: -120px; }

    #contents1-2-3 .bg-F1F5F9 .tit + p { margin-bottom: 56px !important; }

    #contents1-2-3 .rules-wrap { flex-direction: column; }
    #contents1-2-3 .rules-wrap .rule { width: 100%; max-width: 100%; margin-bottom: 24px; padding: 22px; padding-top: 20px; }
    #contents1-2-3 .rules-wrap .rule img { max-width: 122px; }
    #contents1-2-3 .rules-wrap .rule .mb24 { margin-bottom: 12px !important; }
    #contents1-2-3 .rules-wrap .rule .font20 { font-size: 16px !important; }

    /******** contents1-2-4 ********/
    #contents1-2-4 .tab-wrap .flex-con li:not(.active) { display: none; }
    #contents1-2-4 .bg-F1F5F9.pb80 { margin-bottom: 40px !important; padding-bottom: 72px !important; }
    #contents1-2-4 .bg-F1F5F9.pb80 img { max-width: 375px; }
    #contents1-2-4 .btn-wrap + .mb80 { margin-bottom: 72px !important; }

    #contents1-2-4 .tab-contents .mb56 { margin-bottom: 40px !important; }
    #contents1-2-4 .tab-contents .tit.mb32 { margin-bottom: 20px !important; }

    /* 환경경영 */
    #contents1-2-4 .eco-wrap .eco { max-width: 141px; text-align: center; }
    #contents1-2-4 .eco-wrap .eco01 { left: 3%; }
    #contents1-2-4 .eco-wrap .eco02 { left: 4%; }
    #contents1-2-4 .eco-wrap .eco03 { right: 5%; }
    #contents1-2-4 .eco-wrap .eco04 { right: 5%; }
    #contents1-2-4 .eco-wrap .eco p.color-6B7280 { padding: 0 10px; text-align: left; word-break: break-all;}
    #contents1-2-4 .eco-wrap .center { width: 308px; height: 308px; }
    #contents1-2-4 .eco-wrap .center div p:first-child { margin-bottom: 10px !important; }
    #contents1-2-4 .eco-wrap .center div p:nth-child(2) { margin-bottom: 6px !important; font-size: 18px !important; }
    #contents1-2-4 .eco-wrap .center div p:last-child { font-size: 40px; line-height: 1.2em; }

    #contents1-2-4 .year-wrap .year-box .year-item { left: auto; width: 100%; justify-content: center; }
    #contents1-2-4 .year-wrap .year-box .year-item + .year-item { margin-top: 52px !important; }
    #contents1-2-4 .year-wrap .year-box .year-item .year,
    #contents1-2-4 .year-wrap .year-box .year-item .desc { width: 130px; }
    #contents1-2-4 .year-wrap .year-box .year-item .year { text-align: right; font-size: 28px !important; }
    #contents1-2-4 .year-wrap .year-box .year-item .desc .bold.color-1BB0AD {font-size: 36px !important; }
    #contents1-2-4 .year-wrap .year-box + p br { display: none; }

    #contents1-2-4 .plan-wrap .img-wrap { max-width: 256px; margin: auto; }
    #contents1-2-4 .plan-wrap .plan { flex-direction: column; width:fit-content; }
    #contents1-2-4 .plan-wrap .plan > li { width: 100%; }
    #contents1-2-4 .plan-wrap .plan li p { font-size: 18px; text-align: left !important; }
    /* 사회공헌 */
    #contents1-2-4 .table-wrap { overflow-x: scroll; }
    #contents1-2-4 .table-wrap table { min-width: 950px; }
    #contents1-2-4 .roadmap-wrap { width: 100%; max-width: 375px; margin: auto; overflow: hidden; }
    #contents1-2-4 .roadmap-wrap img { min-width: 0; object-fit: contain; }
    /* 협력사 ESG 지원 */
    #contents1-2-4 .process-wrap { max-width: 480px; }
    #contents1-2-4 .process-wrap .process-item,
    #contents1-2-4 .process-wrap .process-item .process { width: 100%; flex-direction: column; }
    #contents1-2-4 .process-wrap .process-item .process { padding: 44px 0 40px 0; }
    #contents1-2-4 .process-wrap .process-item .tit { width: 100%; height: 122px; margin-bottom: 20px; }
    #contents1-2-4 .process-wrap .process-item li { width: 100%; }

    #contents1-2-4 .process-wrap .process-item:first-child .process > li { max-width: 100%; padding: 0 54px; }
    #contents1-2-4 .process-wrap .process-item:first-child .process > li + li { margin-left: 0; margin-top: 32px; }
    #contents1-2-4 .process-wrap .process-item:first-child .process > li p.color-6B7280 { font-size: 14px; }
    #contents1-2-4 .process-wrap .process-item:nth-child(2) .process::before { top: -188px; height: 58px; background-position: bottom; }
    #contents1-2-4 .process-wrap .process-item:nth-child(2) .process::after { bottom: -60px; width: 28px; height: 58px; background-image: url('../../images/page/img_1_2_4_11.svg'); background-position: bottom; }
    #contents1-2-4 .process-wrap .process-item:nth-child(2) .process li { padding: 0 50px; text-align: center; }
    #contents1-2-4 .process-wrap .process-item:nth-child(2) .process li img { max-width: 320px; }
    #contents1-2-4 .process-wrap .process-item.mt64 { margin-top: 44px !important; }
    #contents1-2-4 .process-wrap .process-item.mt64 + .process-item { flex-direction: initial; flex-wrap: wrap; }
    #contents1-2-4 .process-wrap .process-item.mt64 + .process-item .tit { min-width: 100%; }
    #contents1-2-4 .process-wrap .process-item.mt64 + .process-item .process { flex: 1; margin: 0; padding: 25px 10px; }
    #contents1-2-4 .process-wrap .process-item.mt64 + .process-item .process + .process { margin-left: 15px;}
    #contents1-2-4 .process-wrap .process-item.mt64 + .process-item .process .font28 { font-size: 22px !important; }

    #contents1-2-4 .process-wrap.last .process-item .process { padding: 40px 0; padding-left: 71px; }
    #contents1-2-4 .process-wrap.last .process-item .process li:not(:first-of-type) { margin-top: 6px; }
    #contents1-2-4 .process-wrap.last .process-item .process li:nth-child(3n),
    #contents1-2-4 .process-wrap.last .process-item .process li:nth-child(3n+1),
    #contents1-2-4 .process-wrap.last .process-item .process li:nth-child(3n+2) { width: 100%; padding: 0 12px; }

    /******** contents1-3 ********/
    #contents1-3 .font32 { font-size: 20px !important; }
    #contents1-3 .tit.red-line { margin-bottom: 40px !important; }
    #contents1-3 .img-wrap p { padding: 28px; }
    #contents1-3 .ethmanager-wrap { flex-direction: column; }
    #contents1-3 .ethmanager-wrap img { width: 64px;}
    #contents1-3 .ethmanager-wrap .bracket { top: 68px; }
    #contents1-3 .ethmanager-wrap .bracket.left { left: 18px; }
    #contents1-3 .ethmanager-wrap .bracket.right { right: -18px; }
    #contents1-3 .ethmanager-wrap .ethmanager01 p.mb24 { margin-bottom: 9px !important; }
    #contents1-3 .ethmanager-wrap .plus { width: 28px; height: 28px; margin-top: 29px; margin-bottom: 24px; }
    #contents1-3 .ethmanager-wrap .plus span { height: 28px; }
    #contents1-3 .ethmanager-wrap .ethmanager02 { width: 162px; height: 162px; padding-top: 30px; }

    /******** contents1-3-2 ********/
    #contents1-3-1 .mb56,
    #contents1-3-1 .font32 { margin-bottom: 40px !important; }
    #contents1-3-1 .default-wrap.mb120,
    #contents1-3-2 .default-wrap.mb120 { margin-bottom: 120px !important; }

    /******** contents1-3-2 ********/
    #contents1-3-2 .img-wrap p { font-size: 20px !important; }
    #contents1-3-2 .img-wrap p .bold { font-weight: 400 !important; }
    #contents1-3-2 .img-wrap p br { display: none; }
    #contents1-3-2 .info-wrap { margin-bottom: 40px !important; }
    #contents1-3-2 .info-wrap li { padding: 24px 0; }
    #contents1-3-2 .info-wrap li p:first-child { width: 85px; min-width: 85px; margin-right: 12px; }
    #contents1-3-2 .info-wrap li p:first-child span + span { margin-left: 8px; }
    #contents1-3-2 .info-wrap li p img { width: 24px; }

    #contents1-3-2 .box-wrap { padding: 32px 24px; }

    #contents1-3-2 .btn.more { font-size: 16px; }
    #contents1-3-2 .btn.more .plus { margin-left: 40px; }

    /******** contents2-4 ********/
    #contents2-4 h1.tit { font-size: 56px !important; }
    #contents2-4 h1.tit + p { font-size: 28px !important; }
    #contents2-4 .list-dot-wrap { margin-top: 40px; }

    #contents2-4 p:not(.img-wrap) img { width: 100%; max-width: 375px; }

    /******** contents2-5 ********/
    #contents2-5 .customer-slide .swiper-slide { padding: 35px 35px 100px; }
    #contents2-5 .input-item input { font-size: 18px; }

    /******** contents2-6 ********/
    #contents2-6 .tit.mb56 { margin-bottom: 40px !important; }

    #contents2-6 .list-wrap { flex-direction: column; }
    #contents2-6 .list-wrap li { width: 100%; height: 364px; background-size: cover; }
    #contents2-6 .list-wrap li + li,
    #contents2-6 .list-wrap li:nth-child(3n + 1) { margin-left: 0; margin-top: 16px; }

    #contents2-6 .property-wrap { flex-direction: column; }
    #contents2-6 .property-wrap a { width: 100%; height: 148px; padding: 32px; margin: auto; }
    #contents2-6 .property-wrap a + a { margin-top: 16px; }
    #contents2-6 .property-wrap a .icon { top: 32px; right: 26px; }
    #contents2-6 .property-wrap a .line { margin: 16px 0; }

    /******** contents2-7 ********/
    #contents2-7 .default-wrap.mb80 { margin-bottom: 80px !important; }
    #contents2-7 h1.tit { margin-bottom: 8px !important; line-height: 1.4em !important;  }
    #contents2-7 h1.tit + p { font-size: 28px !important; line-height: 1.3em !important; }
    #contents2-7 .list-dot-wrap { margin-top: 80px !important; }
    #contents2-7 .list-dot-wrap li + li { margin-top: 4px; }

    #contents2-7 img { width: 100%; max-width: 320px; }

    #contents2-7 .packaging-wrap { padding-bottom: 60px; }
    #contents2-7 .packaging-wrap .default-wrap { padding: 0 32px; }

    /******** contents3-2 ********/
    /* #contents3-2 .contact-box label:not(.ir) { margin-bottom: 16px !important; } */
    #contents3-2 .contact-box .btn-wrap .btn-product { height: 166px; padding: 28px; }
    #contents3-2 .contact-box .btn-wrap .btn-product .line { margin-top: 16px; }

    #contents3-2 .input-box.fl-l { float: none !important; overflow: hidden;}
    #contents3-2 .input-box .input-item input { font-size: 18px; }
    #contents3-2 .input-box .input-item input,
    #contents3-2 .input-box-wrap .email-box .input-item span { height: 59px; line-height: 59px; }
    #contents3-2 .input-box-wrap .email-box .input-item #eml_id { width: calc(100% - 22px - 45%); }
    #contents3-2 .input-box-wrap .email-box .input-item span { left: calc(100% - 22px - 45%); }
    #contents3-2 .input-box-wrap .email-box .input-item #eml_domain { width: 45%; }
    #contents3-2 .input-box-wrap .email-box .input-item { width: 100%; }
    #contents3-2 .input-box-wrap .email-box .select-item { width: 100%; margin: 0; margin-top: 16px; }
    #contents3-2 .input-box-wrap .email-box .select-item select { padding: 0; }

    #contents3-2 .contact-box .textarea-box textarea { padding: 16px 24px !important; font-size: 18px; }
    #contents3-2 .contact-box .privacy-box { padding-bottom: 24px; }
    #contents3-2 .contact-box .privacy-box::after { bottom: 12px; }
    #contents3-2 .contact-box .privacy-box .scroll-box { padding: 0 24px; }

    #contents3-2 .checkbox-item input[type="checkbox"] { margin-right: 16px; }
    #contents3-2 .checkbox-item input[type="checkbox"] + label { padding-left: 40px; }

    #contents3-2 .btn.lg { height: 68px; }

    /******** contents3-3 ********/
    #contents3-3 .ifr-wrap { overflow-x: scroll; }
    #contents3-3 .btn-wrap { justify-content: center; }

    /******** contents3-3 ********/
    #contents3-4 { padding-top: 56px; }

    #contents3-4 .product-search-wrap { width: 100%; flex-wrap: wrap; margin-bottom: 16px !important; float: none !important; }
    #contents3-4 .product-select { flex: 1; z-index: 5; }
    #contents3-4 .product-select + .product-select { order: 1; min-width: 100%; z-index: 1; }
    #contents3-4 .product-select .dropdown { padding: 12px 15px; }
    #contents3-4 .product-select .dropdown, #contents3-4 .product-select + .product-select .dropdown { width: 100%; }
    #contents3-4 .product-select + .product-select .dropdown { margin-left: 0; margin-top: 5px; }
    #contents3-4 .product-select.on + .product-select .dropdown, #contents3-4 .product-select.on + .refresh { border-left-color: #D1D5DB; }

    #contents3-4 .refresh { width: 50px; height: 50px; z-index: 0;}

    #contents3-4 .product-search-wrap .product-select .dropdown:after { right: 10px; top: 15px; }
    #contents3-4 .news-search-wrap { position: relative; }

    /******** contents4-1 ********/
    #contents4-1 .more { top: 0; }

    /******** view ********/
    .view.contents { padding-top: 120px; }
    .view-title { padding-top: 32px !important; padding-bottom: 0 !important; }
    .view-title .font48 { margin-bottom: 24px !important; }
    .view .category-wrap button img { width: 22px; }
    .view .view-desc ul li { font-size: 16px; line-height: 1.5em; list-style: square; }
    .view .view-desc ul li::marker { font-size: 4px; }
    .view .view-contorl.text { display: none; }
    .view .view-contorl .text { display: none; }
    .view .view-contorl img { width: 44px; }
    .view .view-contorl > div > a { padding: 0; padding-top: 40px; }
    .view .view-contorl > div > a.btn-list { padding-top: 24px; }
    .view .view-contorl > div > a.btn-list > span { width: 48px; height: 48px; }

}


/*sm*/
@media (max-width: 560px) {
    /******** contents1-1-6 ********/
    #contents1-1-6 .map-wrap { margin-bottom: 82px !important; }
    #contents1-1-6 .map-wrap .img-pc { display: none; }
    #contents1-1-6 .map-wrap .img-mo { display: block; width: 100%; }
}

@media (max-width: 414px) {

}


/*xs*/
@media (max-width: 375px) {

}

@media all and (max-width:320px) {
    #contents1-1-2 .ceo-wrap .img-wrap { text-align: center; }
    #contents1-1-2 .ceo-wrap .img-wrap img { margin-left: 0; }
}


/*hover*/
@media all and (min-width:768px) {
    /******** contents1-1-1 ********/
    #contents1-1-1 .arrow.ani-circle:hover svg circle.fg { stroke-dashoffset: 0; }

    /******** contents1-1-3 ********/
    #contents1-1-3 .history-wrap .history:hover .years { color: #111827; }
    #contents1-1-3 .history-wrap .history:hover .plus span { background-color: #111827; }

    /******** contents2-6 ********/
    #contents2-6 .list-wrap li:hover { background-size: auto 110%; transition: 0.5s;}
}

/* 1920이상 */
@media all and (min-width:1921px) {
    .product-wrap::after { width: 75%; }
    .product-wrap .product-slide-wrap { max-width: none; }
    .product-wrap .product-slide-wrap .img-wrap img { width: 100%; }
}