/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: Elementor Team
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.4.7.1776319607
Updated: 2026-04-16 06:06:47

*/
/* m-visual-con */
.visual-con {position: relative;}

.vis-top-wrap {position: relative; display: flex; justify-content: space-between; align-items: flex-end; margin: 4rem 2rem 3rem 2.5rem;}
.vis-top-wrap::before {content: "DONGA"; position: absolute; bottom: -8rem; right: 8%; font-size: 27rem; color: #eff0f3; letter-spacing: -1.5rem; font-weight: 900; z-index: -1;}
.vis-top-wrap .title {font-size: 4.5rem; line-height: 1.5; font-weight: 700; letter-spacing: -0.14rem; color: #000;}
.vis-top-wrap .paging-wrap {display: flex; gap: 1rem; align-items: center;}
.vis-top-wrap .paging-wrap .current,
.vis-top-wrap .paging-wrap .total {font-size: 1.4rem; font-weight: 700; color: #000;}

.vis-top-wrap .paging-wrap .bar-bg {position: relative; width: 17rem; height: 3px; background-color: #00000020;}
.vis-top-wrap .paging-wrap .bar-bg .bar {position: absolute; width: 0; height: 100%; background-color: #000;}
.vis-top-wrap .paging-wrap .bar-bg .bar.active {width: 100%; transition: width 3s linear;}

.vis-top-wrap .paging-wrap .arrow-wrap {margin-left: 1rem; display: flex; align-items: center; gap: 1rem;}
.vis-top-wrap .paging-wrap .arrow-wrap .vis-arrow {font-size: 2rem; cursor: pointer; opacity: 0.5; transition: all 0.3s ease;}
.vis-top-wrap .paging-wrap .arrow-wrap .vis-arrow:hover {opacity: 1;}

.visual-con .scroll-wrap {position: absolute; bottom: 2rem; right: 4rem; cursor: pointer;}
.visual-con .scroll-wrap p {position: absolute; left: 60%; transform:translateX(-50%) rotate(90deg); font-size: 1.6rem; white-space: nowrap; color: #fff; animation: wheelMove 2s infinite ease-in-out;}
.visual-con .scroll-wrap i {font-size: 2rem; color: #fff;}

@keyframes wheelMove {
  0% {top: -8rem; opacity: 1;}
  50% {top: -6rem; opacity: 0.5;}
  100% {top: -8rem; opacity: 1;}
}

/* m-state-con */
.state-con {padding: 12rem 0;}
.state-con .title-wrap {margin-bottom: 6rem;}
.state-con .title-wrap .title {padding-bottom: 3.5rem; font-size: 4.5rem; font-weight: 700; color: #000; letter-spacing: -0.12rem; line-height: 1.4;}
.state-con .title-wrap p {font-size: 2rem; color: #8a8a8a; letter-spacing: -0.1rem;}

.state-wrap {position: relative; display: flex; gap: 2rem; justify-content: space-evenly;}
.state-wrap::before {content: ""; position: absolute; right: -10%; top: -35%; width: 40rem; height: 34rem; background: url(/wp-content/uploads/2026/04/m-state-bg.jpg) no-repeat center / cover; z-index: -1;}

/* active */
.machin-box.active {width: 100%; height: 61rem; padding: 13rem 11rem; border-radius: 5rem; transition: width 3s linear(0 0%, 0 1.8%, 0.01 3.6%, 0.03 6.35%, 0.07 9.1%, 0.13 11.4%, 0.19 13.4%, 0.27 15%, 0.34 16.1%, 0.54 18.35%, 0.66 20.6%, 0.72 22.4%, 0.77 24.6%, 0.81 27.3%, 0.85 30.4%, 0.88 35.1%, 0.92 40.6%, 0.94 47.2%, 0.96 55%, 0.98 64%, 0.99 74.4%, 1 86.4%, 1 100%);}
.machin-box.active * {opacity: 1; visibility: visible; width: auto; height: auto;}
.machin-box.active::after,.machin-box.active::before {opacity: 0;}
.machin-box.state-left.active {background: url(/wp-content/uploads/2026/04/m-state-left-bg.jpg) no-repeat center / cover !important;}
.machin-box.state-right.active {background: url(/wp-content/uploads/2026/04/m-state-right-bg.jpg) no-repeat center / cover !important;}

.machin-box .title-wrap {margin-bottom: 8rem;}
.machin-box .title-wrap .title {padding-bottom: 2rem; font-size: 3.5rem; color: #fff;}
.machin-box .title-wrap p {font-size: 1.8rem; color: #949494; letter-spacing: -0.16rem; line-height: 1.2;}

.machin-box .btn-con {display: flex; flex-direction: column; gap: 1rem;}
.machin-box .btn-con .btn-wrap {width: 70%; display: flex; flex-wrap: wrap; gap: 1rem;}
.machin-box .btn-con .btn-wrap * {transition: var(--transition01);}
.machin-box .btn-con .btn-wrap li a {padding: 2.5rem; display: inline-block; font-size: 1.8rem; color: #fff; border: 1px solid #ffffff50; border-radius: 5rem;}
.machin-box .btn-con .btn-wrap.link a {padding: 2.5rem 4.5rem; background-color: #ffffff20; border: 0;}
.machin-box .btn-con .btn-wrap.link li a:hover {background-color: var(--main-color); font-weight: 600; color: #000;}

.machin-box .btn-con .btn-wrap li a.p30 {padding: 2.5rem 3rem;}
.machin-box .btn-con .btn-wrap li a.p35 {padding: 2.5rem 3.5rem;}
.machin-box .btn-con .btn-wrap li a.p45 {padding: 2.5rem 4.5rem;}
.machin-box .btn-con .btn-wrap li a.p50 {padding: 2.5rem 5rem;}

.machin-box.state-right {position: relative; display: flex; flex-direction: column; justify-content: center;}
.machin-box.state-right .title-wrap {margin-bottom: 7rem;}
.machin-box.state-right .more {display: flex; justify-content: center; gap: 3rem; width: 23.5rem; padding: 2.5rem 0; font-size: 1.8rem; color: #000; font-weight: 600; letter-spacing: -0.04rem; background-color: var(--main-color); border-radius: 5rem; transition: var(--transition01);}
.machin-box.state-right .more:hover {background-color: var(--sub-color); color: #fff;}

/* off */
.machin-box.off {width: 29rem; height: 61rem; background: #0a0d11 !important; border-radius: 5rem; transition: var(--transition01);}
.machin-box.off:hover {background-color: var(--sub-color) !important; cursor: pointer;}
.machin-box.off * {opacity: 0; visibility: hidden; pointer-events: none; width: 0; height: 0;}
.machin-box.off::after {opacity: 1; content: ""; position: absolute; top: 11rem; left: 0; width: 4rem; height: 1.3rem; background: url(/wp-content/uploads/2026/04/m-state-tag-after.png) no-repeat center / cover;}
.machin-box.off.state-left::before {opacity: 1; content: "보유설비 및 보유수량"; position: absolute; top: 20rem; left: -5rem; font-size: 2.7rem; color: #fff; font-weight: 700; transform: rotate(90deg);}
.machin-box.off.state-right::before {opacity: 1; content: "설비현황"; position: absolute; top: 14rem; left: 2rem; font-size: 2.7rem; color: #fff; font-weight: 700; transform: rotate(90deg);}

/*  */
.equip-content .location {color: #fff; font-weight: 600;}
.equip-content .img {position: absolute; top: 23%; right: 8%;}
.equip-content .equip-img {display: none; border-radius: 2rem;}

/* m-product-con */
.product-con {background: url(/wp-content/uploads/2026/04/m-pro-bg.jpg) no-repeat top / cover; background-attachment: fixed; border-radius: 5rem 5rem 0 0;}
.product-wrap {position: relative; padding: 14rem 0; display: flex; justify-content: space-between; align-items: flex-start;}

.product-wrap .pro-left {width: 40%; position: sticky; top: 25%; left: 0;}
.product-wrap .pro-left .title-wrap p {font-size: 2rem; color: #fff; font-weight: 700;}
.product-wrap .pro-left .title-wrap .title {padding: 1rem 0 8rem; font-size: 4.5rem; color: #fff; font-weight: 700;}

.product-wrap .pro-right {padding-top: 8rem; width: 60%; display: flex; flex-direction: column; align-items: center;}
.product-wrap .pro-right .pro-wrap {display: flex; flex-flow: row wrap; gap: 3rem; justify-content: flex-end;}
.product-wrap .pro-right .pro-wrap *,.product-wrap .pro-right .pro-wrap li a .img::before {transition: var(--transition01);}
.product-wrap .pro-right .pro-wrap li a .img {position: relative; margin-bottom: 2.5rem; display: flex; align-items: center; justify-content: center; width: 43.5rem; height: 35.5rem; background-color: #fff;}
.product-wrap .pro-right .pro-wrap li a .img::before {opacity: 0; content: ""; position: absolute; width: 100%; height: 100%; background-color: #00000050;}
.product-wrap .pro-right .pro-wrap li a .btn {opacity: 0; position: absolute; top: 35%; left: 50%; transform: translate(-50%, 50%); display: flex; gap: 3rem; align-items: center; padding: 2rem 3.5rem; font-size: 1.6rem; font-weight: 600; color: #fff; background-color: var(--sub-color); border-radius: 5rem;}
.product-wrap .pro-right .pro-wrap li a .box-name {position: relative; margin-left: 2rem; display: inline; font-size: 2rem; color: #fff; border-bottom: 1px solid; }
.product-wrap .pro-right .pro-wrap li a .box-name::before {content: ""; position: absolute; top: 50%; transform: translateY(-50%); left: -2rem; width: 1rem; height: 1rem; background-color: var(--main-color); border-radius: 50%;}

.product-wrap .pro-right .pro-wrap li a:hover .img {border-radius: 3rem;}
.product-wrap .pro-right .pro-wrap li a:hover .img::before {opacity: 1;}
.product-wrap .pro-right .pro-wrap li a:hover .btn {opacity: 1;}

.product-wrap .pro-right .more {margin-top: 10rem; display: flex; justify-content: center; gap: 3rem; width: 23.5rem; padding: 2.5rem 0; font-size: 1.8rem; color: #000; font-weight: 600; letter-spacing: -0.04rem; background-color: var(--main-color); border-radius: 5rem; transition: var(--transition01);}
.product-wrap .pro-right .more:hover {background-color: var(--sub-color); color: #fff;}

/* m-quick-con */
.quick-con {margin: 12rem 0;}
.quick-con .title-wrap {text-align: center;}
.quick-con .title-wrap p {font-size: 2rem; font-weight: 700; letter-spacing: -0.12rem; color: #000;}
.quick-con .title-wrap .title {font-size: 4.5rem; letter-spacing: -0.2rem; font-weight: 700; padding: 2.5rem 0 8rem; color: #000;}

.quick-wrap {display: flex; gap: 2rem;}
.quick-wrap .qui-box {position: relative; width: 50%; overflow: hidden; border-radius: 2rem; background-color: #f9f9f9;}
.quick-wrap .qui-box, .quick-wrap .qui-box * {transition: var(--transition01);}
.quick-wrap .qui-box::before {opacity: 0; content: ""; position: absolute; right: 0; bottom: 0; width: 104rem; height: 100%; transition: var(--transition01);}
.quick-wrap .qui-box.qui-left::before {background: url(/wp-content/uploads/2026/04/m-q-left-bg.jpg) no-repeat center / cover;}
.quick-wrap .qui-box.qui-right::before {background: url(/wp-content/uploads/2026/04/m-q-left-bg.jpg) no-repeat center / cover;}

.quick-wrap .qui-box a {position: relative; z-index: 2; padding: 9.5rem 5rem 8.5rem; display: flex; gap: 18rem; flex-direction: column; border-radius: 2rem; }
.quick-wrap .qui-box a .box-txt p {font-size: 2rem; font-weight: 700; letter-spacing: -0.14rem; color: #000;}
.quick-wrap .qui-box a .box-txt h3 {padding-top: 3rem; font-size: 3.3rem; color: #000; letter-spacing: -0.14rem; font-weight: 700; line-height: 1.5; }

.quick-wrap .qui-box a .icon-wrap {display: flex; align-items: center; justify-content: space-between;}
.quick-wrap .qui-box a .icon-wrap .btn-name {position: relative; font-size: 1.7rem; font-weight: 700; color: #000; letter-spacing: -0.1rem;}
.quick-wrap .qui-box a .icon-wrap .btn-name::before {content: ""; position: absolute; bottom: -5px; left: 0; width: 73%; height: 1px; background-color: #000;}
.quick-wrap .qui-box a .icon-wrap .btn-name i {padding-left: 1.5rem;}
.quick-wrap .qui-box a .icon-wrap .icon {width: 10rem; height: 10rem; display: flex; align-items: center; justify-content: center; background-color: #000; border-radius: 50%;}

.quick-wrap .qui-box:hover {width: 100%;}
.quick-wrap .qui-box:hover::before {opacity: 1;}
.quick-wrap .qui-box:hover a {padding: 9.5rem 8rem 8.5rem;}
.quick-wrap .qui-box:hover .icon-wrap .icon {background-color: var(--sub-color);}

/* 제품소개 */
.ware-wrap {}
.pro-box-wrap {display: flex; flex-flow: row wrap; gap: 5rem;}
.pro-box-wrap * {transition: var(--transition01);}
.pro-box-wrap li {position: relative; width: calc(33.3% - 3.5rem); border: 2px solid #e6e6e6; border-radius: 2rem; overflow: hidden;}
.pro-box-wrap li::before {content: "\e907"; font-family: "xeicon"; font-size: 2rem; padding: 2rem; border-radius: 50%; background-color: #fff; border: 1px solid var(--sub-color); color: var(--sub-color); position: absolute; bottom: 4rem; right: 4rem; transition: var(--transition01);}

.pro-box-wrap li a {display: flex; flex-direction: column; justify-content: space-between; width: 100%; height: 100%;}
.pro-box-wrap li a .txt-wrap {padding: 5rem 4rem;}
.pro-box-wrap li a .txt-wrap .title {font-size: 3.5rem; color: #131320; font-weight: 700; letter-spacing: -0.12rem; text-transform: uppercase;}
.pro-box-wrap li a .txt-wrap .detail {padding-top: 1rem; font-size: 1.7rem; color: #7b7b7b; letter-spacing: -0.1rem;}

.pro-box-wrap li a .img {background: #f6faff;}
.pro-box-wrap li a .img img {height: 35rem; object-fit: cover;}

.pro-box-wrap li:hover {border-color: var(--sub-color); box-shadow: 5px 5px 15px 5px #00000010;}
.pro-box-wrap li:hover a .txt-wrap .title {color: var(--sub-color);}
.pro-box-wrap li:hover::before {background-color: var(--sub-color); color: #fff;}


/* *********************
sub

************************/

/* 인사말 */
.about-top-con 
{text-align: center;}
.about-con-tit 
{padding-bottom: 2.5rem; font-size: 2.8rem; font-weight: 600; letter-spacing: -0.14rem; color: #000; line-height: 1.3;}
.about-con-tit b 
{color: var(--sub-color);}
.about-con-txt 
{font-size: 1.7rem; font-weight: 400; letter-spacing: -0.12rem; color: #444444; line-height: 1.8;}
.about-intro-con 
{margin: 8rem 0;}

.about-intro-bg 
{position: relative; padding: 19rem 0 15rem; background: url(/wp-content/uploads/2026/04/인사말.jpg) no-repeat center/ cover; border-radius: 4rem; overflow: hidden; z-index: -1;}
.about-intro-bg:before 
{position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); }
.about-intro-bg .inner-txt 
{position: relative; text-align: center;}
.about-intro-bg .inner-txt .txt 
{font-size: 3.4rem; font-weight: 600; letter-spacing: -0.14rem; color: #fff; line-height: 1.26; transition: var(--transition01);}
.about-intro-bg .inner-txt .txt.sign
{padding-top: 5rem; font-size: 1.7rem; font-weight: 300;}

/* 연혁 */
.history-bg 
{position: relative; padding: 10% 0; border-radius: 5rem; overflow: hidden;}
.history-bg::before
{content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(/wp-content/uploads/2026/04/연혁.jpg) no-repeat center/ cover; background-attachment: fixed;}

.history-top 
{position: relative; padding-bottom: 7%; text-align: center;}
.history-top h3
{font-size: 3.8rem; color: #fff; font-weight: 700;}

.parallax-wrap 
{position: relative;}
.parallax-wrap::before
{content: ""; position: absolute; top: 3rem; left: 50%; transform: translateX(-50%); width: 1px; height: 100%; background-color: #fff;}

.parallax-wrap .para-item 
{position: relative; width: 50%; display: flex; flex-flow: row wrap;}
.parallax-wrap .para-item:nth-of-type(2n-1)
{text-align: left; padding-left: 3%; justify-content: flex-start; margin-left: auto;}
.parallax-wrap .para-item:nth-of-type(2n)
{text-align: right; padding-right: 3%; justify-content: flex-end;}

.parallax-wrap .para-item::before
{content: ""; position: absolute; top:1.5rem; width: 3rem; height: 3rem; border-radius: 50%; background-color: #ffffff30;}
.parallax-wrap .para-item::after
{content: ""; position: absolute; top: 3rem; transform: translate(-50%, -50%); width: 1rem; height: 1rem; border-radius: 50%; background-color: #ffffff;}

.parallax-wrap .para-item:nth-of-type(2n-1)::before{left: -2%;}
.parallax-wrap .para-item:nth-of-type(2n-1)::after{left: 0%;}
.parallax-wrap .para-item:nth-of-type(2n)::before{right: -2%;}
.parallax-wrap .para-item:nth-of-type(2n)::after{right: -1.25%;}

.parallax-wrap .para-item li 
{color: #fff; letter-spacing: -0.1rem; line-height: 1.8;}
.parallax-wrap .para-item .birth 
{width: 100%; font-size: 3rem; font-weight: 700;}
.parallax-wrap .para-item .text 
{font-size: 1.8rem;}
.parallax-wrap .para-item .text b 
{color: #fff;}
.parallax-wrap .para-item .img 
{margin-top: 2rem; width: 60%; height: 20rem; background: #fff; border-radius: 1rem;}

/* 조직도 */
.organ-img {text-align: center;}

/* 사업장안내 */
.map-flex 
{display: flex; align-items: center; padding: 8rem 0; border-bottom: 1px solid #ddd; scroll-margin-top: 20rem;}
.map-flex .map-left
{width: 50%;}
.map-flex .map-left .tit
{font-size: 4rem; font-weight: 800; letter-spacing: -0.12rem; color: #000;}
.map-flex .map-left .adress-con
{margin-top: 5rem; display: flex; flex-direction: column; gap: 1.5rem;}
.map-flex .map-left .adress-con dl 
{display: flex;}
.map-flex .map-left .adress-con dl dt 
{width: 12%; font-size: 1.7rem; letter-spacing: -0.12rem; color: #000; font-weight: 500; line-height: 1.3;}
.map-flex .map-left .adress-con dl dd 
{font-size: 1.7rem; letter-spacing: -0.12rem; color: #000; font-weight: 600; line-height: 1.3;}

.map-flex .map-right
{width: 50%;}
.map-flex .map-right .root_daum_roughmap
{width: 100% !important;}
.map-flex .map-right .root_daum_roughmap .cont, .map-flex .map-right .root_daum_roughmap .map_border
{display: none;}

/* 보유설비 사진 및 보유수량 */
.product-table
{margin: 8rem 0;}

/* 제품소개 */
.sub-pro-wrap .img 
{text-align: center; width: 100%; height: 60rem; background-color: #f7f7f7;}
.sub-pro-wrap .img img
{object-fit: cover; height: 100%;}

.sub-pro-wrap .pro-detail 
{padding: 6rem 5rem; background-color: var(--sub-color);}
.sub-pro-wrap .pro-detail .pro-title 
{margin-bottom: 2rem; font-size: 3.8rem; color: #fff; font-weight: 600;}
.sub-pro-wrap .pro-detail p 
{padding-bottom: 1.5rem; font-size: 1.8rem; color: #fff; letter-spacing: -0.1rem;}
.sub-pro-wrap .pro-detail p:nth-last-of-type(1)
{padding-bottom: 0;}

.pro-row-wrap 
{display: flex; flex-flow: row wrap; justify-content: space-between;}
.pro-row-wrap .pro-row 
{width: 47%; margin: 4rem 2rem;}
.pro-row-wrap .pro-row .title 
{margin-bottom: 2rem; padding-bottom: 1rem; font-size: 2.4rem; letter-spacing: -0.12rem; font-weight: 700; border-bottom: 1px solid var(--sub-color);}
.pro-row-wrap .pro-row .list li 
{position: relative; padding-left: 1.2rem; font-size: 1.8rem; line-height: 2; letter-spacing: -0.12rem; color: #555;}
.pro-row-wrap .pro-row .list li::before
{content: ""; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 5px; height: 5px; background-color: var(--sub-color);}
.pro-row-wrap .pro-row .list p.point {font-size: 1.5rem; letter-spacing: -0.08rem; color: #979797; line-height: 1.8;}