@import url('common.css');


/* css */
.eng_tit{color:var(--main); font-weight: 700; padding-bottom: 20px;}
.title_area{padding: 0 0 50px; text-align: center;}
.title_area h3{color: var(--black); font-weight: 700;}

.arrow_wrap{display: flex; gap:5px;}
.swiper-arrow-button{padding: 0; border:0; background:none; font-size:0; cursor: pointer; width: 60px; aspect-ratio: 1/1; border-radius: 50%; box-sizing:border-box; border:1px solid rgba(34,34,34,.4); color:var(--black); transition: all .3s ease; position: relative;}
.swiper-arrow-button:hover{color:var(--white) !important; background:var(--main) !important; border-color: var(--main) !important;}
.swiper-arrow-button::after{display: block; width: 100%; height: 100%; font-size:22px; line-height: 60px; text-align:center; position: absolute; left: 0; top:0; font-family: var(--icon); color: inherit;}
.swiper-arrow-button-prev::after{content:'\e5c4';}
.swiper-arrow-button-next::after{content:'\e5c8';}




/* fullpage */
.section{display: block; width: 100%; height: 100vh !important; overflow: hidden !important;}
.section .fp-overflow{width: 100%; height: 100%; overflow: hidden !important; display: flex; flex-direction: column; justify-content: center;}

.footer.section{height: auto !important;}
.footer.section .fp-overflow{height: auto !important;}


/* visual */
.visual{position: relative; width: 100%; height: var(--vh); background: #000; overflow: hidden;}
.visual_swiper{width: 100%; height: 100%; position: relative; pointer-events: none;}
.visual .visual_swiper .arrow_wrap{pointer-events: auto;}
.visual_swiper .swiper-wrapper{height: 100%;}
.visual_swiper .swiper-slide{width: 100%; height: 100%; background: var(--black);}
.visual_swiper .swiper-slide .v_txt{max-width:1590px; position: absolute; left: 50%; top:50%; transform: translate(-50%,-50%); text-align: left; z-index: 10;}
.visual_swiper .swiper-slide .v_txt p{padding-bottom: 20px; color:var(--white); opacity: 0; transform: translateY(60px);  transition: all .6s .2s ease;}
.visual_swiper .swiper-slide .v_txt h2{color:var(--white); opacity: 0; transform: translateY(60px); transition: all .6s .4s ease;}
.visual_swiper .swiper-slide .v_bg{position: absolute; left: 0; top:0; width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; background-position: center; transform: scale(1.1);  transition: transform 3s linear;}
.visual_swiper .swiper-slide .v_bg img{width: 100%; height: 100%; object-fit: cover;}
.visual_swiper .swiper-slide .v_bg::after{content:''; display: block; width: 100%; height: 100%; background:var(--black); opacity: 0.4; position: absolute; left:0; top:0;}
.visual_swiper .swiper-slide.swiper-slide-active .v_bg{transform: scale(1);}
.visual_swiper .swiper-slide.swiper-slide-active .v_txt p{opacity: 1; transform: translateY(0);}
.visual_swiper .swiper-slide.swiper-slide-active .v_txt h2{opacity: 1; transform: translateY(0);}


.visual .arrow_wrap{position: absolute; left: 50%; bottom: 50px; margin-left: -795px; z-index: 10; opacity: 0; animation: visualEntrance 0.8s ease-out 0.6s forwards;}
.visual .swiper-arrow-button{border-color:rgba(255,255,255,.8); color:var(--white);}
.visual .scroll_down{position: absolute; right:50px; bottom: 0; display: flex; flex-direction: column; align-items: center; gap: 20px; z-index: 10; opacity: 0; animation: visualEntrance 0.8s ease-out 0.9s forwards;}
.visual .scroll_down em{display: block; white-space: nowrap; line-height: 1; font-style: normal; color: var(--white); font-family: var(--eng); font-size: 0.833rem; font-weight: 400; letter-spacing: 0; writing-mode: vertical-rl;}
.visual .scroll_down span{display: block; width: 1px; height: 150px; background: #999999; position: relative;}
.visual .scroll_down span::after{content: ''; position: absolute; left: 50%; top: 0; width: 7px; aspect-ratio: 1/1; margin-left: -4px; margin-top: -3px; border-radius: 50%; background: var(--white); animation: scrollDownDot 2s ease-in-out infinite;}


@keyframes visualEntrance { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes scrollDownDot { 0% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(140px); opacity: 0.4; } 100% { transform: translateY(0); opacity: 1; } }



/* About DONG EUN */
.about{position: relative;}
.about .about_bg{position: absolute; right: 0; top:0; width: 50%; height: 100%; background: url('/img/about_bg.jpg') no-repeat center/cover;}
.about .about_bg::after{content: ''; display: block; width: 100%; height: 100%; position: absolute; left: 0; bottom:0; z-index: 2; background: var(--white);}
.about .txt_area{max-width: 45%;}
.about .txt_area .eng_tit{opacity: 0; transform: translateY(30px);}
.about .txt_area h3{color: var(--black); font-weight: 700; opacity: 0; transform: translateY(30px);}
.about .txt_area p.fs18{padding-top: 30px; opacity: 0; transform: translateY(30px);}
.about .txt_area .btn_area{padding-top: 60px; opacity: 0; transform: translateY(30px);}

.about.action .about_bg::after{height: 0; transition: all 1s .2s ease;}
.about.action .txt_area .eng_tit{opacity: 1; transform: translateY(0); transition: all .6s .4s ease;}
.about.action .txt_area h3{opacity: 1; transform: translateY(0); transition: all .6s .5s ease;}
.about.action .txt_area p.fs18{opacity: 1; transform: translateY(0); transition: all .6s .6s ease;}
.about.action .txt_area .btn_area{opacity: 1; transform: translateY(0); transition: all .6s .7s ease;}





/* Products */
.products .title_area .eng_tit{opacity: 0; transform: translateY(30px);}
.products .title_area h3{opacity: 0; transform: translateY(30px);}
.products .products_list{opacity: 0; transform: translateY(30px);}
.products .products_list .swiper-wrapper{display: flex; flex-wrap: nowrap;}
.products .products_list .list{ position: relative;  box-sizing: border-box;}
.products .products_list .list a{display: flex; flex-direction: column; justify-content: space-between; gap: 40px; overflow: hidden; aspect-ratio: 1/1; width: 100%; height: 100%; padding: 50px 35px 40px; box-sizing: border-box; transition: all .3s ease; background: var(--grayBg); overflow: hidden;}
.products .products_list .list:hover a{border-radius:var(--borderR50);}
.products .products_list .list a .tit{display: flex; flex-direction: column; gap: 15px;}
.products .products_list .list a .tit h4{color: var(--black); line-height: 130%; transition: all .3s ease; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.products .products_list .list:hover a .tit h4{color:var(--main);}
.products .products_list .list a .tit p{line-height: 120%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.products .products_list .list a .img{display: flex; align-items: flex-end; justify-content: flex-end; max-height: 217px; aspect-ratio: 1/1; overflow: hidden;} 
.products .products_list .list a .img img{max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; object-position: right bottom;}
.products .btn_area{display: flex; justify-content: center; padding-top: 54px; opacity: 0; transform: translateY(30px);}

.products.action .title_area .eng_tit{opacity: 1; transform: translateY(0); transition: all .6s .4s ease;}
.products.action .title_area h3{opacity: 1; transform: translateY(0); transition: all .6s .5s ease;}
.products.action .products_list{opacity: 1; transform: translateY(0); transition: all .6s .6s ease;}
.products.action .btn_area{opacity: 1; transform: translateY(0); transition: all .6s .7s ease;}


/* Manufacturing System */
.system{position: relative; overflow: hidden;}
.system_in{position: relative;}
.system .system_bg{position: absolute; left: 0; top:0; width: 100%; height: 100%; background:url('/img/system_bg.jpg') no-repeat center/cover; z-index: -1; transform: scale(1.15);}
.system .title_area{text-align:left; box-sizing: border-box; padding-right: 140px; position: relative;}
.system .title_area .eng_tit{opacity: 0; transform: translateY(30px);}
.system .title_area h3{opacity: 0; transform: translateY(30px);}
.system .arrow_wrap{position: absolute; right: 0; top: 104px; opacity: 0; transform: translateY(30px);}

.system .system_wrap{position: relative; opacity: 0; transform: translateY(30px);}
.system_wrap .system_swiper{overflow: visible;}
.system_wrap .system_swiper .swiper-slide{flex-shrink: 0;}
.system_wrap .system_swiper .swiper-slide a{display: block; width: 100%; height: 100%; overflow: hidden; cursor:default;}
.system_wrap .system_swiper .swiper-slide .thumb{aspect-ratio: 3/2; overflow: hidden;}
.system_wrap .system_swiper .swiper-slide .thumb img{width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease;}
.system_wrap .system_swiper .swiper-slide a:hover .thumb img{transform: scale(1.15);}

.system_progress{width: 100%; height: 5px; background: rgba(34,34,34,0.2); border-radius: 10px; margin-top: 50px; overflow: hidden;}
.system_progress_bar{display: block; height: 100%; width: 0; background: var(--subBlue); border-radius: 10px; transition: width 0.4s ease;}

.system.action .system_bg{transform: scale(1); transition: transform 3s linear;}
.system.action .title_area .eng_tit{opacity: 1; transform: translateY(0); transition: all .6s .4s ease;}
.system.action .title_area h3{opacity: 1; transform: translateY(0); transition: all .6s .5s ease;}
.system.action .arrow_wrap{opacity: 1; transform: translateY(0); transition: all .6s .6s ease;}
.system.action .system_wrap{opacity: 1; transform: translateY(0); transition: all .6s .7s ease;}


/* ESG Management */
.esg{position: relative; overflow: hidden;}
.esg .esg_bg{position: absolute; left: 0; top:0; width: 100%; height: 100%; background:url('/img/esg_bg.jpg') no-repeat center/cover; z-index: -1; transform: scale(1.15);}
.esg .title_area .eng_tit{opacity: 0; transform: translateY(30px);}
.esg .title_area h3{color:var(--white); opacity: 0; transform: translateY(30px);}
.esg_list{display: flex; gap:30px; justify-content: center; padding: 20px 0 0;}
.esg_list li{flex:1; max-width: 230px; aspect-ratio: 1/1; box-sizing: border-box; border-radius: 50%; opacity: 0; transform: translateY(30px);}
.esg_list li a{display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; box-sizing: border-box; border:1px solid rgba(255,255,255,.5); border-radius: 50%; text-align: center; transition: all .3s ease;}
.esg_list li a:hover{border-color: var(--main); background:var(--main); transform: translateY(-20px);}
.esg_list li a dl{display: flex; flex-direction: column; justify-content: center; align-items: center; gap:20px;}
.esg_list li a dl dt{}
.esg_list li a dl dt img{max-width: 85px; width: 100%; height: auto;}
.esg_list li a dl dd{}
.esg_list li a dl dd h4{font-weight: 600; color:var(--white);}

.esg.action .esg_bg{transform: scale(1); transition: transform 3s linear;}
.esg.action .title_area .eng_tit{opacity: 1; transform: translateY(0); transition: all .6s .4s ease;}
.esg.action .title_area h3{opacity: 1; transform: translateY(0); transition: all .6s .5s ease;}
.esg.action .esg_list li:nth-child(1){opacity: 1; transform: translateY(0); transition: all .6s .7s ease;}
.esg.action .esg_list li:nth-child(2){opacity: 1; transform: translateY(0); transition: all .6s .8s ease;}
.esg.action .esg_list li:nth-child(3){opacity: 1; transform: translateY(0); transition: all .6s .9s ease;}


/* customer */
.customer_in{display: flex; gap:60px;}
.customer_in article{box-sizing: border-box;}
.customer .notice{width: calc(100% - 490px);}
.customer .notice .eng_tit{opacity: 0; transform: translateY(30px);}
.customer .notice h3{color:var(--black); font-weight: 700; opacity: 0; transform: translateY(30px);}
.customer .notice .notice_list{margin-top: 20px; opacity: 0; transform: translateY(30px);}
.notice_list li{border-bottom: 1px solid var(--border);}
.notice_list li a{display: block; padding: 30px 100px 30px 0; box-sizing: border-box; position: relative; transition: all .3s ease;}
.notice_list li a:hover{background: var(--ligthBu); padding-left: 20px;}
.notice_list li a h4{font-weight: 600; height: 1.2em; color: var(--black); line-height: 120%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.notice_list li a p{margin-top: 15px; height: 1.2em; line-height: 120%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.notice_list li a .right{position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: flex-end; gap:20px; transition: all .3s ease;}
.notice_list li a:hover .right{right: 20px;}
.notice_list li a .arrow{display: block; width: 24px; height: 24px; font-size:24px; line-height: 24px; text-align:center; font-family: var(--icon); color: var(--black); opacity: 0.5; transition: all .3s ease;}
.notice_list li a:hover .arrow{transform: rotate(45deg); color:var(--main); opacity: 1;}
.notice_list li a .arrow::after{content:'\f8ce';}

.customer .online{width:430px; background: url('/img/online_bg.jpg') no-repeat center/cover; opacity: 0; transform: translateY(30px);}

.customer.action .notice .eng_tit{opacity: 1; transform: translateY(0); transition: all .6s .4s ease;}
.customer.action .notice h3{opacity: 1; transform: translateY(0); transition: all .6s .5s ease;}
.customer.action .notice .notice_list{opacity: 1; transform: translateY(0); transition: all .6s .6s ease;}
.customer.action .online{opacity: 1; transform: translateY(0); transition: all .6s .7s ease;}

.online{}
.online a{display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; box-sizing: border-box; padding: 20px; text-align:center;}
.online a h3{color:var(--white);}
.online a .eng_tit{color:rgba(255,255,255,.5); padding-bottom: 15px;}
.online a p.fs18{color:var(--white); padding-top: 25px;}
.online a .btn{display: inline-block; margin: 40px auto 0; width: 50px; aspect-ratio: 1/1; border-radius: 50%; background:rgba(255,255,255,.2); position: relative; color:var(--white); transition: all .3s ease;}
.online a:hover .btn{background: var(--main);}
.online a .btn::after{content:'\e5c8'; display: block; width: 100%; height: 100%; font-size:22px; line-height: 50px; text-align:center; position: absolute; left: 0; top:0; font-family: var(--icon); color: inherit;}


/*******************************************************************************
    @media 1740px
*******************************************************************************/
@media all and (max-width:1740px){


/* visual */
.visual .arrow_wrap{left: 5%; bottom: 50px; margin-left: 0;}
.visual .scroll_down{right:5%;}



}
/*******************************************************************************
    @media 1500px
*******************************************************************************/
@media all and (max-width:1500px){



}
/*******************************************************************************
    @media ~1300px
*******************************************************************************/
@media all and (max-width:1300px){




/* About DONG EUN */
.about .txt_area h3 br{display: none;}

/* Products */
.products .products_list .list a{gap: 30px; padding: 40px 30px 30px;}
.products .products_list .list a .tit{gap: 10px;}




/* Manufacturing System */
.system{}
.system .title_area{padding-right: 0;}
.system .arrow_wrap{position: relative; right: auto; top: auto; justify-content: flex-end; margin-top: 40px;} 

.system_progress{margin-top: 40px;}



/* customer */
.customer .notice{width: calc(65% - 60px);}
.customer .online{width:35%;}

}
/*******************************************************************************
    @media  ~980px               
*******************************************************************************/
@media all and (max-width:980px){


.header.nofixed{top:-200px;}
.header.fixed{background: var(--white);}
.header.fixed .header_in .logo a{background: url('/img/logo.png') no-repeat center/contain;}
.header.fixed .header_in .top_util .langBox dd::after{background:var(--black);}
.header.fixed .header_in .top_util .langBox dd a{color:var(--black);}
.header.fixed .header_in .top_util .langBox dd.on a{color:var(--main);}
.header.fixed .header_in .top_util ul li button.btnSearch::after{color:var(--black);}
.header.fixed .header_in .top_util ul li button.btnMenu span{background:var(--black);}
.header.fixed .gnb ul li > a{color: var(--black);}
    


/* fullpage */
.section{height: auto !important;}
.section .fp-overflow{height: auto; overflow: visible !important; display: block !important;}



/* css */
.eng_tit{padding-bottom: 15px;}
.title_area{padding: 0 0 40px;}

.swiper-arrow-button{width: 50px;}
.swiper-arrow-button::after{font-size:20px; line-height: 50px;}

/* visual */
.visual{height: var(--vh) !important; min-height: 100vh;}
.visual .fp-overflow{height: 100vh !important;}
.visual_swiper .swiper-slide .v_txt p{padding-bottom: 15px;}
.visual .arrow_wrap{bottom: 40px;}

/* About DONG EUN */
.about{}
.about .about_bg{position: relative; right: auto; top:auto; width: 100%; height: 450px;}
.about .txt_area{max-width: 100%; padding: 120px 0 70px;}
.about .txt_area p.fs18{padding-top: 20px;}
.about .txt_area .btn_area{padding-top: 40px;}


/* Products */
.products{padding: 120px 0;}
.products .products_list .list a{gap: 20px; padding: 30px;}
.products .products_list .list:hover a{border-radius:var(--borderR40);}
.products .btn_area{padding-top: 40px;}


/* Manufacturing System */
.system{padding: 120px 0;}
.system .arrow_wrap{margin-top: 30px;} 
.system_progress{margin-top: 30px;}



/* ESG Management */
.esg{padding: 120px 0;}
.esg_list{gap:20px; padding: 0;}
.esg_list li{max-width: 180px;}
.esg_list li a dl dt img{max-width: 70px;}


/* customer */
.customer{padding: 120px 0;}
.customer_in{gap:30px;}
.customer .notice{width: calc(65% - 30px);}
.customer .notice .notice_list{margin-top: 10px;}
.notice_list li a{padding: 20px 80px 20px 0;}
.notice_list li a:hover{padding-left: 10px;}
.notice_list li a p{margin-top: 10px;}
.notice_list li a .right{gap:15px;}
.notice_list li a:hover .right{right: 10px;}
.notice_list li a .arrow{width: 24px; height: 24px; font-size:24px; line-height: 24px;}


.online{}
.online a{padding: 20px;}
.online a .eng_tit{padding-bottom: 10px;}
.online a p.fs18{padding-top: 15px;}
.online a .btn{margin: 20px auto 0; width: 40px;}
.online a .btn::after{font-size:18px; line-height: 40px;}




}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){
/* css */
.eng_tit{padding-bottom: 10px;}
.title_area{padding: 0 0 30px;}
.title_area h3{text-wrap: balance;}
.title_area h3 br{display: none;}

.swiper-arrow-button{width: 40px;}
.swiper-arrow-button::after{font-size:18px; line-height: 40px;}


/* visual */
.visual_swiper .swiper-slide .v_txt p{padding-bottom: 10px;}

.visual .arrow_wrap{bottom: 30px; left: 50%; margin-left: -42px;}

/* About DONG EUN */
.about{}
.about .about_bg{height: 330px;}
.about .txt_area{padding: 70px 0 40px;}
.about .txt_area p.fs18{padding-top: 15px;}
.about .txt_area .btn_area{padding-top: 30px;}


/* Products */
.products{padding: 70px 0;}
.products .products_list .list a{padding: 25px;}
.products .products_list .list:hover a{border-radius:var(--borderR30);}
.products .products_list .list a .tit{gap: 5px;}
.products .btn_area{padding-top: 30px;}


/* Manufacturing System */
.system{padding: 70px 0;}
.system .arrow_wrap{margin-top: 20px;} 
.system_progress{height: 3px; margin-top: 20px;}



/* ESG Management */
.esg{padding: 70px 0;}
.esg_list{gap:10px; flex-direction: column; align-items: center;}
.esg_list li{width: 100%;}
.esg_list li a dl{gap:10px;}
.esg_list li a dl dt img{max-width: 65px;}


/* customer */
.customer{padding: 0;}
.customer_in{gap:40px; flex-wrap:wrap; width: 100%;}
.customer .notice{width: 100%; padding: 70px 5% 0; box-sizing: border-box;}
.customer .notice .notice_list{margin-top: 10px;}
.notice_list li a{padding: 15px 60px 15px 0;}
.notice_list li a:hover{padding-left: 0; background: var(--white);}
.notice_list li a p{margin-top: 10px;}
.notice_list li a .right{gap:12px;}
.notice_list li a:hover .right{right: 0;}
.notice_list li a .arrow{width: 20px; height: 20px; font-size:20px; line-height: 20px;}

.customer .online{width:100%;}

.online{}
.online a{padding: 60px 5%;}
.online a .eng_tit{padding-bottom: 6px;}
.online a p.fs18{padding-top: 10px;}




}