@charset "utf-8";

/* root */
:root{
    /* font */
    --main-font: 'Pretendard', sans-serif;
    --point-font: 'Outfit', 'Pretendard', sans-serif;
    /* color */
    --brand-color: #E94628;
    --brand-color-light: #F2A39A;
    --text-color: #212121;
    --sub-text-color: #444;
    --sub-text-color-light: #888;
    --bg-color-gray: #f8f8f8;
    --line-color: #ddd;
}

/* reset */
body{
    font-family: var(--main-font);
    line-height: 1.5;
    color: var(--text-color);
    font-size: 18px;
    letter-spacing: -0.02em;
    box-sizing: border-box;
    word-break: keep-all;
    white-space: normal;
    overflow-wrap: break-word;
}
p{
    word-break: keep-all;
    white-space: normal;
    overflow-wrap: break-word;
    color: var(--sub-text-color);
}
img{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    box-sizing: border-box;
}
a{
    color: inherit;
    cursor: pointer;
}
a.btn, .btn{
    line-height: inherit;
    height: auto;
    font-weight: inherit;
    font-size: inherit;
    transition: none;
    padding: 0;
    box-sizing: border-box;
}
button {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--main-font);
    font-weight: 400;
}
.nowrap {
  white-space: nowrap;
}


/* header */
header{
    position: relative;
}
header .header_wr{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    z-index: 999;
    background: transparent;
    padding: 0 160px;
    transition: all 0.3s;
}
header.on .header_wr{
    background: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    /* box-shadow: ; */
}
header .gnb{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    /* z-index: 999; */
}
header.on .gnb,
header.active .gnb{
    color: var(--text-color);
}
header .gnb .logo > a{
    font-size: unset;
}
header .logo{
    width: 180px;
    flex-shrink: 0;
}
header .logo img{
    object-fit: contain;
}
header .logo .black{
    display: none;
}
header.on .logo .white,
header.active .logo .white{
    display: none;
}
header.on .logo .black,
header.active .logo .black{
    display: block;
}


/* nav */
header nav .navlist{
    display: flex;
}
header nav .depth1{
    position: relative;
    transition: all .3s linear;
}
header nav .depth1.on .dp1{
    color: var(--brand-color);
}
header nav .dp1{
    font-size: 17px;
    height: 80px;
    padding: 0 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    transition: all .3s;
    text-align: center;
}
header nav .dp1:hover{
    color: var(--brand-color);
    /* border-bottom: 2px solid var(--brand-color); */
}
header.active .dp1{
    padding: 0 65px;
    color: var(--text-color);
}
header nav .lnb{
    /* display: none; */
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 0px;
    padding: 0;
    text-align: center;
    opacity: 0;
    transition: all 0.3s ease;
    overflow: hidden;
}
header nav .lnb.on{
    padding-bottom: 20px;
    height: 350px;
    opacity: 1;
}
header nav .lnb li{
    padding: 12px 24px;
    color: var(--text-color);
    display: block;
    white-space: nowrap;
    font-size: 16px;
}
header nav .lnb li a{
    position: relative;
}
header nav .lnb li a::after{
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 100%;
    height: 1px;
    background: var(--brand-color);
    transform: scaleX(0);          /* 처음엔 0 */
    transform-origin: left;        /* 왼쪽 기준으로 펼치기 */
    transition: transform .3s ease-in-out;
}
header nav .lnb li a:hover::after{
    transform: scaleX(1);
}
header .nav-bg{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: #fff;
    z-index: -10;
    transition: all 0.3s ease;
    /* display: none; */
}
header .nav-bg.on:after{
    opacity: 1;
}
header .nav-bg.on{
    height: 370px;
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.08);
}


header .util{
    display: flex;
    gap: 20px;
    margin-left: 60px;
}
header .lang-wrap{
    /* display: none; */
    position: relative;
    cursor: pointer;
}
header .lang-wrap .icon img{
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}
header .lang-wrap .icon.black{
    display: none;
}
body.sub-page header .lang-wrap .icon.white,
header.on .lang-wrap .icon.white,
header.active .lang-wrap .icon.white{
    display: none;
}
body.sub-page header .lang-wrap .icon.black,
header.on .lang-wrap .icon.black,
header.active .lang-wrap .icon.black{
    display: block;
}
header .lang-wrap .lang{
    display: flex;
    gap: 20px;
    font-family: var(--main-font);
    align-items: center;
    justify-content: center;
    font-weight: 600;
    padding: 10px;
}
header .lang-wrap ul{
    display: none;
    width: auto;
    background: #fff;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
}
header .lang-wrap ul .lang{
    color: var(--text-color);
    width: 80px;
}
header .lang-wrap ul .lang:hover{
    color: var(--brand-color);
}

header .btns {
    width: 24px;
    height: 24px;
    position: relative;
}
header .gnb .toggle-btn {
    display: block;
}
header .toggle-btn {
    display: none;
    border: none;
    background: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: 100%;
    transition: all .3s ease;
}
header .toggle-btn > span {
    width: 100%;
    height: 2px;
    background: #fff;
    border-radius: 10px;
    display: block;
    transition: all .2s cubic-bezier(0, 0, 0.3, 1);
}
body.sub-page header .toggle-btn > span,
header.on .toggle-btn > span {
    background: #333;
}
header .toggle-btn > span + span {
    margin-top: 6px;
}


/* footer */
footer{
    background: var(--text-color);
    color: #e6e6e6;
    font-size: 16px;
}
footer .footer-wrap{
    flex-direction: column;
    max-width: 1780px;
    margin: 0 auto;
    padding: 60px 40px 40px;
    color: #fff;
}
footer .top .footer-logo{
    width: 200px;
    height: auto;
}
footer .top .footer-logo img{
    object-fit: contain;
    object-position: top;
}
footer .top .info-wrap{
    margin-top: 50px;
    display: flex;
    gap: 40px;
}
footer .top .info-wrap li{
    display: flex;
    flex-direction: column;
    gap: 8px;
    
}
footer .top .info-wrap span{
    color: var(--sub-text-color-light);
}
footer .bottom{
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    margin-top: 24px;
    padding-top: 12px;
    border-top: 1px solid var(--sub-text-color-light);
}
footer .bottom .sns-wrap{
    display: flex;
    gap: 12px;
}
footer .bottom .sns-icon{
    display: block;
    width: 40px;
    height: 40px;
    transition: all 0.3s;
}
footer .bottom .sns-icon img{
    object-fit: contain;
}
footer .bottom .sns-icon:hover{
    opacity: 0.8;
}
footer .bottom .copyright{
    color: var(--sub-text-color-light);
}



/* index */
/* 메인배너 */
#main_wr .visual .inset .banner .img{
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: transform 3s ease-in-out;
    transform: scale(1.05);
}
#main_wr .visual .inset .banner .img.active{
    transform: scale(1);
    /* transition: transform 3s ease-in-out; */
}
#main_wr .visual .inset .banner.slide1 .img{
    background-image: url(../img/donga/banner01.jpg);
}
#main_wr .visual .inset .banner.slide2 .img{
    background-image: url(../img/donga/banner02.jpg);
}
#main_wr .visual .inset .banner.slide3 .img{
    background-image: url(../img/donga/banner03.jpg);
}
#main_wr .visual .inset .banner.slide4 .img{
    background-image: url(../img/donga/banner04.jpg);
}

#main_wr .visual .inset .banner .text-box{
    max-width: 1680px;
    padding: 0 40px;
    top: auto;
    bottom: 23%;
}
#main_wr .visual .text-box .banner-tit{
    font-size: 80px;
    font-family: var(--point-font);
    line-height: 1.2;
}

#main_wr .visual .progress-wrap{
    position:absolute;
    /* left:0; right:0;  */
    width: 100%;
    max-width: 1680px;
    padding: 0 40px;
    margin: 0 auto;
    bottom: 8%;
    left: 50%;
    transform: translateX(-50%);
}
#main_wr .visual .progress{
    width: 100%;
    height:3px;
    background: rgba(255,255,255,.25); /* 배경 */
    overflow:hidden;
}
#main_wr .visual .progress__bar{
    display:block;
    height:100%;
    width:0%;
    background:#fff; /* 바 색 */
    transform-origin:left;
}


/* 공통 */
#main_wr .inner{
    max-width: 1680px;
    margin: 0 auto;
    padding: 0 40px;
}
.donga-btn{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    position: relative;
}
.donga-btn::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:1px;
    background: var(--brand-color);     /* 글자색 따라가게 */
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
}
.donga-btn:hover::after{
    transform: scaleX(1);
}
.donga-btn .arrow{
    width: 24px;
    height: 24px;
    display: block;
}
.donga-btn .arrow img{
    object-fit: contain;
}
.donga-btn:hover .arrow {
    animation: arrowMove 1s ease-in-out;
}
@keyframes arrowMove {
    0%   { transform: translateX(0); }
    50%  { transform: translateX(8px); }
    100% { transform: translateX(0); }
}
.main-tit{
    font-family: var(--point-font);
    font-size: 60px;
    line-height: 1.2;
}

.wipe-img {
    -webkit-clip-path: inset(0 100% 0 0);
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1s ease;
    object-fit: cover;
    object-position: center;
}
.wipe-img.is-active {
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);  
}





/* main1- company */

#main_wr .company{
    padding: 150px 0 120px;
}
#main_wr .company .inner{
    position: relative;
}
#main_wr .company .text-wrap{
    position: absolute;
    top: 50%;
    left: 40px;
    transform: translateY(-50%);
    z-index: 1;
}
#main_wr .company .main-tit{
    font-size: 70px;
}
#main_wr .company p{
    margin: 12px 0 50px;
}
#main_wr .company .img-wrap{
    width: 50%;
    margin-left: 50%;
    aspect-ratio: 800/860;
    height: auto;
    overflow: hidden;
}


/* main2-product */
#main_wr .product{
    width: 100%;
    background: var(--bg-color-gray);
    padding: 120px 0;
}
#main_wr .product .product-list{
    margin-top: 50px;
}
#main_wr .product .product-list li:not(:last-child){
    margin-bottom: 50px;
}
#main_wr .product .product-list .item{
    display: block;
    position: relative;
}
#main_wr .product .product-list .img-wrap{
    width: 100%;
    height: 100%;
}
#main_wr .product .product-list .img-area{
    position: relative;
    overflow: hidden;
    width: calc(75% - 50px);
    height: 150px;
    margin-right: calc(25% + 50px);
    transition: all .25s ease-in-out;
}
#main_wr .product .product-list li:nth-child(even) .img-area{
    margin-right: 0;
    margin-left: calc(25% + 50px);
}

#main_wr .product .product-list .img-area::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0;
    transition: all .3s ease-in-out;
}

#main_wr .product .product-list .cover-wrap{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, calc(-50% + 8px));
    display: flex;
    align-items: center;
    gap: 12px;
    opacity: 0;
    z-index: 1;
    transition: opacity .3s ease-in-out, transform .3s ease-in-out;
}

#main_wr .product .product-list .cover-wrap .tit{
    color: #fff;
    font-weight: 600;
    line-height: 1.2;
}
#main_wr .product .product-list .cover-wrap .arrow{
    width: 36px;
    height: 36px;
}
#main_wr .product .product-list .text-wrap{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;              /* ✅ img 높이에 맞춰 세로 기준 맞추기 */
    width: 25%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 10px;
    opacity: 1;
    transform: translateY(0);
    transition: opacity .15s ease, transform .15s ease;
    transition-delay: .45s;
}

#main_wr .product .product-list  li:nth-child(even) .text-wrap{
    right: auto;
    left: 0;
    text-align: right;
}
#main_wr .product .product-list .text-wrap .tit{
    font-weight: 600;
    line-height: 1.2;
}
#main_wr .product .product-list .text-wrap p{
    color: var(--sub-text-color-light);
}
@media (hover: hover) and (pointer: fine) {
    #main_wr .product .product-list .item:hover .img-area{
        width: 100%;
        height: 250px;
        margin: 0;
        transition-delay: .2s;
    }
    #main_wr .product .product-list .item:hover .img-area::after{
        opacity: .3;
    }
    #main_wr .product .product-list .item:hover .cover-wrap{
        opacity: 1;
        transform: translate(-50%, -50%);
        transition-delay: .2s;
    }
    #main_wr .product .product-list .item:hover .text-wrap{
        opacity: 0;
        transform: translateY(8px);
        transition-delay: 0s; 
    }
}


/* main3-esg */
#main_wr .esg{
    position: relative;
    padding: 150px 0;
    width: 100%;
    color: #fff;
}
#main_wr .esg::before{
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #000;
    z-index: -10;
}
#main_wr .esg .tit-wrap p{
    margin: 12px 0 30px;
    color: var(--line-color);
}
#main_wr .esg .card-wrap{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 50px;
    max-width: 1280px;
    margin-left: auto;
}
#main_wr .esg .card-wrap .card{
    width: 100%;
    min-height: 380px;
    padding: 40px;
    border-radius: 8px;
    border: 1px solid #fff;
    opacity: .6;
    transition: opacity .3s;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
#main_wr .esg .card-wrap .card.active{
    opacity: 1;
}
#main_wr .esg .card-wrap .num{
    font-family: var(--point-font);
}
#main_wr .esg .card-wrap .tit{
    font-weight: 600;
    margin-bottom: 20px;
}
#main_wr .esg .card-wrap p{
    color: var(--line-color);
    margin-bottom: 20px;
}
#main_wr .esg .bg-swiper{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
}

/* main4 - news */
#main_wr .news{
    padding: 150px 0 200px;
}
#main_wr .news .tit-wrap{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
#main_wr .news .tit-wrap p{
    margin-top: 12px;
}

#main_wr .news .lat.m_news ul{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    padding-top: 60px;
}
#main_wr .news .lat.m_news ul .basic_li{
    border: 0;
    border-top: 2px solid var(--line-color);
    position: relative;
    padding: 40px 0 0;
}
#main_wr .news .lat.m_news ul .basic_li::after{
    content: '';
    position: absolute;
    left: 0;
    top: -2px;
    width: 100%;
    height: 2px;
    z-index: 1;
    background: var(--brand-color);
    transform: scaleX(0);          /* 처음엔 0 */
    transform-origin: left;        /* 왼쪽 기준으로 펼치기 */
    transition: transform .3s ease-in-out;
}
#main_wr .news .lat.m_news ul .basic_li:hover::after{
    transform: scaleX(1);
}
.lat.m_news .wr_content{
    display: none;
}
#main_wr .news .basic_li .lt_tit{
    font-weight: 600;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;   /* 2줄 */
    overflow: hidden;
}
#main_wr .news .basic_li .lt_info{
    margin-bottom: 24px;
}
#main_wr .news .basic_li .lt_thumb{
    overflow: hidden;
    aspect-ratio: 8 / 5;
    width: 100%;
}
#main_wr .news .basic_li .lat.m_news .lt_date{
    color: var(--sub-text-color-light);
}
#main_wr .news .basic_li .lt_thumb img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform-origin: center;
    transition: all .4s ease-in-out;
}
#main_wr .news .basic_li:hover .lt_thumb img{
    transform: scale(1.1);
}
#main_wr .news .news-swiper{
    padding-bottom: 20px;
}
#main_wr .news .swiper-horizontal > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal{
    bottom: 0;
}


/* subpage */
#page_title .bg{
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transform: scale(1.1);
    opacity: 0.9;
    transition: all 4s ease-in-out;
}
#page_title .bg.active{
    transform: scale(1);
    opacity: 1;
}
#page_title.tab01 .bg{
    background-image: url(../img/donga/subbanner01.jpg);
}
#page_title.tab02 .bg{
    background-image: url(../img/donga/subbanner02.jpg);
}
#page_title.tab03 .bg{
    background-image: url(../img/donga/subbanner03.jpg);
}
#page_title.tab04 .bg{
    background-image: url(../img/donga/subbanner04.jpg);
}
#page_title.tab05 .bg{
    background-image: url(../img/donga/subbanner05.jpg);
}

#page_title .inner-wrap .contents{
    max-width: none;
}
#page_title .inner-wrap .contents .page-tit{
    justify-content: center;
    height: calc(100% - 80px);
}
#page_title .inner-wrap .contents .page-tit .titset h1{
    font-family: var(--point-font);
    font-size: 80px;
    font-weight: 400;
}
#page_title .inner-wrap .contents .page-tab-menu::before{
    content: none;
}
#page_title .inner-wrap .contents .page-tab-menu{
    height: 70px;
    padding: 0;
    border-top: 1px solid rgba(255,255,255,.3);
}
#page_title .inner-wrap .contents .page-tab-menu .tab-inset{
    width: 100%;
    max-width: 1480px;
    padding: 0 40px;
    border: 0;
}
#page_title .inner-wrap .contents .page-tab-menu .tab-inset .dp1{
    display: none;
}
#page_title .inner-wrap .contents .page-tab-menu .tab-inset .dp2 .dp2-list li{
    position: relative;
}
#page_title .inner-wrap .contents .page-tab-menu .tab-inset .dp2 .dp2-list li a{
    color: #fff;
    opacity: 0.5 ;
    line-height: 80px;
    font-size: 20px;
}
#page_title .inner-wrap .contents .page-tab-menu .tab-inset .dp2 .dp2-list li.on a{
    color: #fff;
    opacity: 1;
}
#page_title .inner-wrap .contents .page-tab-menu .tab-inset .dp2 .dp2-list{
    gap: 80px;
}
#page_title .inner-wrap .contents .page-tab-menu .tab-inset .dp2 .dp2-list li::after{
    content: '';
    position: absolute;
    top: -3px;
    left: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #fff;
    display: none;
}
#page_title .inner-wrap .contents .page-tab-menu .tab-inset .dp2 .dp2-list li.on::after{
    display: block;
}

/* 공통 */
#page_cont > section.no-bottom{
    padding: 180px 0 0;    
}
.page-head{
    text-align: center;
    margin-bottom: 120px;
}
.page-head-tit{
    font-size: 60px;
    line-height: 1.3;
    font-weight: 500;
    margin-bottom: 30px;
}
.page-head-tit.en{
    font-family: var(--point-font);
    font-weight: 400;
}
.page-head-sub{
    color: #444;
    font-size: 22px;
    font-weight: 500;
}
#page_cont .inner{
    width: 100%;
    max-width: 1480px;
    padding: 0 40px;
    margin: 0 auto;
}
.sub-tit{
    font-size: 40px;
    font-weight: 500;
    line-height: 1.3;
    margin-bottom: 30px;
}
.sub-tit.en{
    font-family: var(--point-font);
    font-weight: 400;
}
.p-wrap p:not(:last-child){
    margin-bottom: 12px;
}

/* company */
.company .img-text-wrap{
    display: flex;
    gap: 120px;
    margin-bottom: 150px;
}
.company .img-text-wrap .img-wrap{
    flex: 1;
    padding-top: 120px;
}
.company .img-text-wrap .text-wrap{
    flex: 1;
}
.company .img-text-wrap .text-box{
    margin-top: 100px;
    margin-bottom: 100px;
}
.company .s-full-wrap{
    background: url(../img/donga/company03.jpg) center/cover no-repeat;
    width: 100%;
    padding: 200px 50px;
    text-align: center;
    color: #fff;
    margin-bottom: 150px;
}
.company .s-full-wrap p{
    color: #e6e6e6;
}

.company .full-wrap{
    background-image: url(../img/donga/company-full.jpg);
}
.full-wrap{
    padding: 250px 0;
    /* display: flex;
    height: 100vh;
    align-items: center;
    justify-content: center;*/
    width: 100%;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;  /* 핵심: 배경 고정 */
}
.full-wrap .page-head{
    margin-bottom: 0;
    color: #fff;
}
.full-wrap .page-head-sub{
    color: #e6e6e6;
}
.full-wrap p{
    color: #e6e6e6;
}
.full-wrap .small-tit{
    color: #e6e6e6;
}

/* vision */
.small-tit{
    color: var(--sub-text-colortext-color);
    text-transform: uppercase;
    margin-bottom: 10px;
    font-weight: 600;
}
.vision .full-wrap{
    background-image: url(../img/donga/vision-full.jpg);
}
.vision .full-wrap p{
    padding-top: 10px;
}
.vision .value-wrap {
    margin-top: 150px;
}
.vision .value-wrap .text-wrap{
    text-align: center;
    margin-bottom: 100px;
}
.vision .value-wrap .icon-wrap{
    display: flex;
    /* grid-template-columns: repeat(3, 1fr); */
    gap: 20px;
    align-items: center;
    width: 100%;
    max-width: 1150px;
    margin: 0 auto;
}
.vision .value-wrap .icon-wrap .item{
    flex: 1;
}
.vision .value-wrap .icon-wrap .icon-box{
    border-radius: 50%;
    border: 1px solid var(--brand-color-light);
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1/1;
}
.vision .value-wrap .icon-wrap .icon-box img{
    width: 60px;
    height: 60px;
}
.vision .value-wrap .icon-wrap .icon-box .tit{
    font-weight: 600;
    margin-top: 20px;
}
.vision .value-wrap .icon-wrap .icon-box .desc{
    color: #888;
    font-family: var(--point-font);
}
.vision .value-wrap .icon-wrap p{
    text-align: center;
    margin-top: 20px;
}
.vision .value-wrap .icon-plus{
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    border: 1px dashed #d9d9d9;
    background: #fff;
    margin-bottom: 70px;
    position: relative;
}
.vision .value-wrap .icon-plus img{
    width: 20px;
    height: 20px;
}
.vision .value-wrap .icon-plus::before{
    content: '';
    width: 80px;
    height: 1px;
    border-bottom: 1px dashed #d9d9d9;
    position: absolute;
    top: 50%;
    left: -20px;
    z-index: -1;

}


/* history */
.history .cont-wrap{
    display: flex;
    gap: 60px;
    align-items: flex-start;
}
.history .year-sticky{
    position: sticky;
    top: 200px;
    flex: 2;
    height: fit-content;
    transition: opacity .25s ease, transform .25s ease;
}
.history .year-sticky.is-out{
    opacity:0; 
    transform:translateY(6px);
}
.history .year-sticky.is-in{
    opacity:1;
    transform:translateY(0);
}
.history .items{
  flex: 3;
}
.history .cont-item {
    display: block;
    position: relative;
}
.history .year-wrap .year{
    font-weight: 600;
}
.history .year-wrap p{
    font-weight: 500;
}
.history .cont-item .timeline-wrap li{
    display: flex;
    gap: 20px;
    align-items: center;
    padding: 30px 0;
    border-bottom: 1px solid #d9d9d9;
}
.history .cont-item .timeline-wrap li .date{
    display: block;
    width: 80px;
    font-weight: 500;
    flex-shrink: 0;
}
.history .cont-item .timeline-wrap li p{
    padding-left: 15px;
    font-weight: 500;
    position: relative;
}
.history .cont-item .timeline-wrap li p::after{
    content: '';
    width: 3px;
    height: 3px;
    position: absolute;
    top: 12px;
    left: 0;
    background: #d9d9d9;
}
.history .items .cont-item .year-wrap{
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}
.history .year-wrap .img-wrap{
    max-width: 380px;
    overflow: hidden;
    margin-top: 20px;
}

/* esg */
.half-wrap .item{
    display: flex;
    gap: 120px;
    align-items: center;
}
.half-wrap .item:nth-child(even){
    margin-top: 120px;
    flex-direction: row-reverse;
}
.half-wrap .text-wrap{
    flex: 1;
    position: relative;
}
.half-wrap .text-wrap .mark{
    position: absolute;
    bottom: calc(100% - 30px);
    left: 0;
    font-size: 120px;
    color: var(--bg-color-gray);
    font-family: var(--point-font);
    z-index: -10;
    font-weight: 700;
    line-height: 1;
}
.half-wrap .img-wrap{
    flex: 1;
}
.half-wrap .text-wrap .icon-wrap{
    display: flex;
    gap: 12px;
    height: 80px;
    margin-top: 50px;
    flex-wrap: wrap;
}
.half-wrap .text-wrap .icon-wrap li{
    height: 100%;
}
.half-wrap .text-wrap .icon-wrap li img{
    object-fit: contain;
    width: auto;
}

/* location */
.location .text-wrap{
    margin: 80px 0;
    display: flex;
}
.location .text-wrap .sub-tit{
    flex: 1;
}
.location .text-wrap .info-wrap{
    flex: 3;
}
.location .text-wrap .info-wrap li{
    display: flex;
    gap: 20px;
    align-items: center;
    margin-top: 10px;
}
.location .text-wrap .info-wrap li span{
    display: block;
    width: 120px;
    font-family: var(--point-font);
    font-weight: 500;
    flex-shrink: 0;
}
.location .text-wrap .info-wrap li p{
    color: var(--sub-text-color-light);
}
.location .img-wrap{
    overflow: hidden;
    height: 550px;
}


/* product */
.product .inner{
    overflow: hidden;
}
.product .category-wrap{
    background: var(--bg-color-gray);
    padding: 120px 0;
    margin: 120px 0;
    width: 100%;
}
.product .category-wrap .category-list{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    width: 100%;
}
.product .category-wrap .category-item{
    padding: 30px 50px 40px;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
}
.product .category-wrap .category-item .tit{
    padding: 12px 10px 20px;
    border-bottom: 1px solid var(--line-color);
    font-weight: 500;
    font-family: var(--point-font);
}
.product .category-wrap .list-wrap{
    margin-top: 20px;
}
.product .category-wrap .list-wrap li{
    padding-left: 13px;
    position: relative;
}
.product .category-wrap .list-wrap li + li{
    margin-top: 5px;
}
.product .category-wrap .list-wrap li::after{
    content: '';
    width: 3px;
    height: 3px;
    position: absolute;
    top: 50%;
    left: 0;
    background: var(--brand-color);
}

.product .fabric-wrap{
    margin-top: 120px;
    /* position: relative; */
    overflow: hidden;
}
.product .fabric-wrap .inner{
    position: relative;
}
.product .fabric-wrap .bg{
    position: absolute;
    top: 0;
    right: 0;
    width: 100vw;
    height: 80%;
    background: var(--bg-color-gray);
    z-index: 0;
}
.product .fabric-wrap .fabric-swiper{ 
    overflow: visible;
    cursor: grab;
}
.product .fabric-wrap .scroll-img{
    position: relative;
}
.product .fabric-wrap .scroll-img .name{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 40px 0;
    text-align: center;
    background: linear-gradient(to top, rgba(0,0,0,0.4), rgba(0,0,0,0));
    color: #fff;
    font-family: var(--point-font);
    line-height: 1.3;
}
.product .contact-wrap{
    padding-top: 180px;
}
.product .contact-wrap .page-head{
    margin-bottom: 0;
}
.product .contact-wrap .donga-btn{
    margin-top: 60px;
    font-weight: 500;
}

/* manu */
.manu .tab-wrap{
    display: flex;
    gap: 120px;
}
.manu .tab-wrap .img-wrap{
    flex: 1;
    position: relative;
    height: 750px;
}
.manu .tab-wrap .img-wrap .img-item{
    position: absolute;
    inset: 0;
}
.manu .tab-wrap .text-wrap{
    flex: 1;
    border-top: 2px solid var(--text-color);
}
.manu .tab-wrap .tab-item{
    padding: 30px 0;
    border-bottom: 1px solid var(--line-color);
}
.manu .tab-wrap .tab-item .tab-tit{
    position: relative;
    margin-bottom: 0;
    cursor: pointer;
}
.manu .tab-wrap .tab-item .toggle-icon{
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%) rotate(0deg);
    width: 20px;
    height: 20px;
    transition: transform .6s ease-in-out;
}
.manu .tab-wrap .tab-item .toggle-icon span{
    position: absolute;
    display: block;
    width: 100%;
    height: 2px;
    background: var(--text-color);
    top: 50%;
    left: 0;
}
.manu .tab-wrap .tab-item .toggle-icon span:nth-child(1){
    transform: rotate(90deg);
}
.manu .tab-wrap .tab-item:not(.active):hover .toggle-icon{
    transform: translateY(-50%) rotate(360deg);
}
.manu .tab-wrap .tab-item.active .toggle-icon span:nth-child(1){
    display: none;
}
.manu .tab-wrap .tab-item .tab-desc{
    margin-top: 20px;
}
.manu .tab-wrap .tab-item .sub{
    display: block;
    font-weight: 500;
    margin-bottom: 10px;
}
.manu .manu-wrap{
    margin-top: 120px;
    overflow: hidden;
}
/* #page_cont .manu .manu-wrap .inner{
    padding: 0;
} */
.manu .manu-wrap .manu-swiper{ 
    overflow: visible;
    cursor: grab;
}
.manu .system-wrap{
    background: var(--bg-color-gray);
    padding: 120px 0;
    margin: 120px 0;
}

/* archive */
/* .archive .cont-wrap{
    display: grid;
    gap: 40px;
    grid-template-columns: repeat(3, 1fr);
}
.archive .cont-wrap .tit{
    margin: 30px 0 20px;
    font-weight: 500;
}
.archive .cont-wrap .item:nth-child(odd){
    margin-top: 80px;
} */
.archive .img-text-wrap{
    display: flex;
    gap: 120px ;
    margin-top: 120px;
}
.archive .img-text-wrap > div{
    flex-shrink: 0;
    flex: 1;
}
.archive .img-text-wrap .text-box{
    margin-top: 60px;
    margin-bottom: 100px;
}
.archive .img-text-wrap > .img-wrap .img-box{
    position: relative;
}
.archive .img-text-wrap > .img-wrap .img-box::before{
    content: '';
    position: absolute;
    top: 40px;
    left: 40px;
    width: 100%;
    height: 100%;
    background: var(--bg-color-gray);
}
.archive .img-text-wrap .text-wrap .img-box{
    position: relative;
}
.archive .img-text-wrap .text-wrap .img-box .watermark{
    position:absolute;
    right: 70%;
    top:50%;
    transform:translateY(-50%);
    color: var(--bg-color-gray);
    font-family: var(--point-font);
    font-size: 100px;
    font-weight: 700;
    line-height: 1;
    text-wrap: nowrap;
    pointer-events: none;
}

/* 게시판 */
/* 페이지 */
.inner_box .pg_wrap {
    float: inherit;
    margin-top: 100px;
    text-align: center;
    display: block;
}
.inner_box .pg_wrap .pg{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}
.inner_box .pg_wrap .pg .pg_page.disable{
    opacity: 0.3;
    pointer-events: none;
}
.inner_box .pg_wrap .pg a {
    color: #999;
    height: auto;
    line-height: normal;
    min-width: unset;
    border-radius: 0;
    background-color: transparent;
    border: 0;
    /* padding: 4px 8px; */
}
.inner_box .pg_wrap .pg a:hover{
    color: #666;
}
.inner_box .pg_wrap .pg .pg_page.pg_prev, 
.inner_box .pg_wrap .pg .pg_page.pg_next{
    width: 12px;
    height: 24px;
    min-width: auto;
    border: 0;
    background: url(../img/donga/icon-arrow-pg.svg) no-repeat center / contain;
    opacity: 0.8;
}
.inner_box .pg_wrap .pg a.pg_prev:hover, 
.inner_box .pg_wrap .pg a.pg_next:hover{
    opacity: 1;
}
.inner_box .pg_wrap .pg a.pg_prev{
    transform: rotate(-180deg);
}
.inner_box .pg_wrap .pg .pg_current {
    /* width: 30px; */
    border: none;
    color: var(--text-color);
    font-weight: 700;
    font-size: inherit;
    height: unset;
    line-height: 40px;
    min-width: unset;
    text-align: center;
    position: relative;
}

/* news */
.news .gall_row .col-gn-4{
    width: 100%;
}
.news #bo_gall #gall_ul{
    border-top: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px 30px;
}
.news #bo_gall .gall_li{
    padding: 0;
    border-bottom: 0;
}
.news #bo_gall .gall_img {
    width: 100%;
    height: 100% !important;
    aspect-ratio: 3/2;
    overflow: hidden;
    border: 1px solid #eee;
    /* display: block; */
}
#bo_gall .gall_img a{
    height: 100%;
}
.news #bo_gall .gall_con{
    flex-direction: column;
}
.news #bo_gall .gall_img img{
    /* vertical-align: top; */
    width: 100%;
    height: 100%;
}
.news #bo_gall .gall_con .gall_img_txt{
    padding: 0;
    margin-top: 25px;
    width: 100%;
}
.news #bo_gall .gall_text_href{
    margin: 0;
    text-align: left;
    line-height: 1.5;
    color: var(--text-color);
    font-size: inherit;
}
.news #bo_gall .bo_tit{
    line-height: 1.5;
    font-size: inherit;
    font-weight: 400;
}
.news #bo_gall .gall_text_href a .news-title{
    font-size: 24px;
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* min-height: 72px; */
}
.news #bo_gall .news-contents{
    font-size: 16px;
    color: #555;
}
.news #bo_gall .gall_info {
    margin-top: 12px;
}
.news #bo_gall .gall_info .gall_date{
    font-size: 16px;
    color: var(--sub-text-color-light);
    /* font-weight: 300; */
}
.news #bo_gall .gall_img span.no_image img{
    max-width: 100%;
}
.news #bo_gall .news-contents{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.news #bo_gall .gall_con .gall_img img{
    transition: all .3s;
}
.news #bo_gall .gall_con:hover .gall_img img{
    transform: scale(1.1);
}


/* write */
#bo_w .bo_w_tit #btn_autosave{
    display: none;
}
#bo_w .cke_sc{
    display: none;
}
#bo_w .bo_w_flie .frm_file {
    margin-top: -3px;
    font-size: 1rem;
}
#bo_w .btn_confirm {
    display: flex;
    align-items: center;
    margin: 40px 0 10px 0;
    gap: 20px;
    justify-content: center;
}
#bo_w .btn_cancel, 
#bo_w .btn_submit {
    width: 200px;
    height: 50px;
    font-family: var(--main-font);
    line-height: 1.5;
    border-radius: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: inherit;
    color: inherit;
}
#bo_w .btn_cancel {
    border: 1px solid #c8c8c8;
    background: var(--bg-color-gray);
}
#bo_w .btn_submit {
    background: var(--brand-color);
    color: #fff;
}

/* view */
#bo_v_con img{
    width: auto;
}
.inner_box #bo_v_con {
    font-size: inherit;
}
#bo_v header {
    border-top: 0;
}
#bo_v_title{
    background: none;
    border-bottom: 1px solid #e6e6e6;
}
.write-info-box{
    border-bottom: 0;
}
.write-info-box .info-writer, .write-info-box .info-hit{
    display: none;
}
.write-info-box .write-info{
    justify-content: right;
    color: #555;
    font-size: 16px;
    font-weight: 400;
}
.write-info-box .write-info .write-info-title{
    display: none;
}
#bo_v_title .bo_v_cate {
    font-size: 1rem;
    color: var(--brand-color);
    background: none;
    line-height: 1.5;
    border-radius: 30px;
    padding: 0;
}
#bo_v_title .bo_v_tit {
    margin: 0;
}
.inner_box #bo_v_title .bo_v_tit{
    font-size: 48px;
    font-weight: 700;
    text-align: center;
    padding: 30px 50px;
    display: block;
}
.inner_box #bo_v .view_header,
#bo_v_info {
    border: 0;
}
#bo_v_atc{
    border-bottom: 0;
}
.bo_v_nb li .nb_date{
    color: #555;
}
.inner_box #bo_v .view_header{
    padding: 0;
}
.inner_box .if_date{
    font-size: 16px;
    text-align: right;
    padding: 20px 50px;
    margin-top: 0;
}
#bo_v_link{
    padding: 0 40px;
    max-width: 1000px;
    margin: 0 auto 50px;
}
#bo_v_link li{
    display: flex;
    gap: 20px;
}
.bo_v_nb li:hover {
    background: #f6f6f6;
}
#bo_v_link li i{
    font-size: 24px;
    float: none;
    margin-right: 0;
}
#bo_v_link a strong{
    overflow-wrap: anywhere;
}
#bo_v_link li:hover{
    border-color: inherit;
    color: var(--brand-color);
}
#bo_v_link li:hover i,
#bo_v_link li:hover .bo_v_link_cnt{
    color: var(--brand-color);
}
bo_v_link a:focus, #bo_v_link li:hover a, #bo_v_link a:active {
    text-decoration: none;
    color: var(--brand-color);
}
#bo_v_link .bo_v_link_cnt{
    display: none;
}
.bo_v_nb li a {
    padding: 0 40px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    width: 100%;
}
#page_cont .back-to-list{
    text-align: center;
}
#page_cont .back-to-list .btn{
    width: auto;
    display: inline-flex;
    align-items: center;
    border: 0;
    margin: 0 auto;
    color: var(--text-color);
    padding: 6px 0;
}


/* notice */
.inner_box .news_table td{
    padding: 35px 20px ;
}
.sub-news .td_subject > a .td_num2{
    text-align: center;
    width: 10%;
}
.sub-news .td_subject > a .sub-area .bo_tit{
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 20px;
    font-weight: 600;
}
.news_table .td_datetime{
    width: 15%;
    min-width: max-content;
    text-align: center;
    color: var(--sub-text-color-light);
    font-weight: 400;
}
.tbl_head01 td{
    font-size: 20px;
    color: var(--text-color);
}

/* prvideo */
.prvideo .video-wrap {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}
.prvideo .video-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* inquiry */
.inquiry .page-head{
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.inquiry .page-head .info-wrap{
    display: flex;
    gap: 60px;
}
.inquiry .page-head .info-wrap span{
    font-family: var(--point-font);
}
.inquiry .page-head .info-wrap p{
    color: var(--sub-text-color-light);
    margin-top: 5px;
}
.inquiry .page-head-tit{
    margin: 0;
    padding-bottom: 20px;
}

#email-form-wrap form .emlist li{
    gap: 30px;
}
#email-form-wrap form .emlist li .item{
    flex: 1;
}
#email-form-wrap form .emlist li .input-tit{
    margin-bottom: 5px;
    font-weight: 500;
}
#email-form-wrap form .emlist li .inbox input,
#email-form-wrap form .textFild textarea{
    box-sizing: border-box;
    border-radius: 0 !important;
}
#email-form-wrap form .emlist li .inbox input{
    /* border-bottom: 1px solid var(--text-color); */
}
.inquiry input[type=text]:focus, 
.inquiry input[type=password]:focus, 
.inquiry textarea:focus, select:focus{
    border: none !important;
    border-bottom: 1px solid var(--brand-color) !important;
}
#email-form-wrap form .textFild textarea{
    padding: 20px 0;
}
#email-form-wrap input::placeholder,
#email-form-wrap #content::placeholder {
    font-weight: 400;
    color: var(--sub-text-color-light);
    font-size: 16px;
}
.inquiry .send-wrap{
    text-align: right;
    margin-top: 80px;
}

/* font-size */
.fs40{
    font-size: 40px;
}
.fs32{
    font-size: 32px;
}
.fs28{
    font-size: 28px;
}
.fs24{
    font-size: 24px;
}
.fs22{
    font-size: 22px;
}
.fs20{
    font-size: 20px;
}
.fs16{
    font-size: 16px;
}

/* popup */
#hd_pop{
    width: auto;
}

::placeholder {
  color: #9aa0a6;
  font-size: 14px;
}

/* 관리자페이지 */
/* adm - login*/
.login-container {
    background: var(--bg-color-gray);
    width: 100%;
    height: 100vh;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.login-container #mb_login.mbskin {
    margin: 0;
    max-width: 500px;
    width: 100%;
}
.login-container .logo {
    max-width: 200px;
    margin: auto;
}
.login-container .logo img {
    object-fit: contain;
}
.login-container .mbskin_box {
    border: none;
    border-radius: 16px;
    margin-top: 30px;
    box-shadow: 0 0 30px rgba(0, 0, 0, .08);
}
.login-container #login_fs {
    display: flex;
    padding: 48px 40px;
    gap: 20px;
    height: 100%;
}
.login-container #login_fs .inputset {
    flex-shrink: 0;
}
.login-container #login_fs .inputset .input-group {
    margin: 0;
    flex-wrap: nowrap;
    display: flex;
    align-items: center;
}
.login-container #login_fs .inputset .input-group + .input-group {
    margin-top: 6px;
}
.login-container #login_fs .inputset .input-group label {
    min-width: 76px;
    text-align: left;
    font-size: 16px;
}
.login-container #mb_login #login_fs .frm_input {
    margin: 0;
    font-size: 15px;
    font-family: 'Pretendard';
    padding: 8px 12px;
    box-shadow: none;
    -webkit-box-shadow: none;
    border-radius: 6px;
    height: 44px;
    border: 1px solid #e6e6e6;
}
.login-container #login_fs .button-wr {
    width: 100%;
    background: var(--brand-color);
    border-radius: 8px;
}
.login-container #mb_login #login_fs .btn_submit {
    margin: 0;
    background: none;
    font-size: 16px;
    font-weight: 600;
    height: 100%;
    color: #fff;
}

/* 게시판 */
.more_opt li button, .more_opt li a{
    font-size: 14px;
}

#hd_login_msg {
    position: fixed;
    top: 10px;
    right: 30px;
    z-index: 9999;
    font-size: 14px;
    line-height: 1.5;
    overflow: visible;
    left: auto;
}
#hd_login_msg > a {
    color: rgba(0, 0, 0, .4);
}