@import url('sub.css'); 


/* 금형부문 */
.process_list{display: flex; align-items: center; padding-right: 11px; box-sizing: border-box;}
.process_list li{position: relative; width: 100%; aspect-ratio: 1/1; margin-right: -11px; border-radius: 100px; background: var(--white); border: 1px dashed var(--black); display: flex; align-items: center; justify-content: center; box-sizing: border-box;}
.process_list li:last-child{margin-right: 0;}
.process_list .process_txt{display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;}
.process_list .num{display: block; font-family: var(--eng); font-weight: 700; line-height: 100%; color: var(--black); opacity: 0.5;}
.process_list .txt{display: block; font-weight: 600; line-height: 140%; color: var(--black);}
.process_list li.is-start{background: var(--main); border: 0;}
.process_list li.is-start .num{color: var(--white); opacity: 1;}
.process_list li.is-start .txt{color: var(--white);}
.process_list li.is-end{background: var(--subBlue); border: 1px dashed var(--subBlue);}
.process_list li.is-end .num{color: var(--white);}
.process_list li.is-end .txt{color: var(--white);}


/* 현장 */
.project-site-wrap{overflow: hidden;}
.project-site{display: flex; flex-direction: column; gap: 50px; box-sizing: border-box;}
.press_site_swiper{width: 100%; overflow: visible;}
.press_site_thumb{position: relative; aspect-ratio: 4/3; overflow: hidden;}
.press_site_thumb img{width: 100%; height: 100%; object-fit: cover; display: block;}
.press_site_thumb::after{content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 56.566%, rgba(0,0,0,0.6) 100%);}
.press_site_tit{position: absolute; left: 0; right: 0; bottom: 30px; text-align: center; color: var(--white); font-weight: 600; line-height: 150%; z-index: 1; width: 100%; box-sizing: border-box; padding: 0 20px;}
.press_site_ctrl{display: flex; align-items: center; gap: 20px; width: 100%; box-sizing: border-box;}
.press_site_bar{flex: 1; height: 4px; background: var(--border); position: relative;}
.press_site_bar_fill{display: block; height: 100%; width: 0; background: var(--main); transition:width .3s ease;}
.press_site_arrow{display: flex; align-items: center; gap: 5px;}
.press_site_arrow button{width: 60px; height: 60px; border-radius: 50%; border: 1px solid var(--border); background: var(--white); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease;}
.press_site_arrow button::before{font-family: var(--icon); font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 48; font-size: 30px; line-height: 100%; color: var(--black); transition: color 0.2s ease;}
.press_site_arrow button:hover{background: var(--main); border-color: var(--main);}
.press_site_arrow button:hover::before{color: var(--white);}
.press_site_prev::before{content: 'chevron_left';}
.press_site_next::before{content: 'chevron_right';}
.press_site_arrow button.swiper-button-lock{display: none;}

.project-site.ver2 .press_site_thumb::after{display: none;}
.project-site.ver2 .press_site_tit{display: none;}


/* 프레스 부문 */
.press_process{position: relative; margin: 0 auto; box-sizing: border-box; display: flex; align-items: center; gap:60px;}
.press_process > article{display: flex; flex-direction: column;}
.press_process > article.press_left{gap:70px; flex:1;}
.press_process > article.press_right{gap:60px; flex: 0 1 220px;}
.press_process > article > article{display: flex; gap:60px; justify-content: space-between;} 

.press_process_item{flex:1; max-width: 220px; width: 100%; aspect-ratio: 1/1; border-radius: 50%; background: var(--white); border: 1px dashed var(--black); display: flex; align-items: center; justify-content: center; box-sizing: border-box; position: relative;}
.press_process_item.is-start{background: var(--main); border: 0;}
.press_process_item.is-end{background: var(--subBlue); border: 1px dashed var(--subBlue);}
.press_process_item.is-gray{background: var(--grayBg); border: 0;}
.press_process_item.is-green{background: var(--subGreen); border: 1px dashed var(--subGreen);}
.press_process_item.is-sky{background: var(--subSkyBlue); border: 1px dashed var(--subSkyBlue);}
.press_process_item.blank{border:0;}
.press_process_txt{display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;}
.press_process_item.is-start .press_process_txt{gap: 5px;}
.press_process_item .step_num{display: block; font-family: var(--eng); letter-spacing: 0; font-weight: 700; line-height: 100%; color: var(--black); opacity: 0.5;}
.press_process_item .step_txt{display: block; font-weight: 600; color: var(--black); line-height: 140%;}
.press_process_item.is-start .step_num,.press_process_item.is-start .step_txt,.press_process_item.is-end .step_num,.press_process_item.is-end .step_txt,.press_process_item.is-green .step_num,.press_process_item.is-green .step_txt,.press_process_item.is-sky .step_num,.press_process_item.is-sky .step_txt{color: var(--white);}
.press_process_item.is-start .step_num{opacity: 1;}
.press_process_item.is-end .step_num,.press_process_item.is-green .step_num,.press_process_item.is-sky .step_num{opacity: 0.5;}

.press_process_item::after{content:'\e315'; display: none; width: 34px; height: 34px; font-size:34px; line-height: 100%; font-family: var(--icon); font-weight: 400; color:#1C1B1F; opacity: 0.3; position: absolute;  right: -48px; top:50%; margin-top: -17px;}
.press_process_item.pos02::after,
.press_process_item.pos03::after,
.press_process_item.pos04::after{display: block;}
.press_process_item.pos01::after{display: block; right: 50%; bottom: -53px; margin-right: -17px; margin-top: 0; top:auto; transform: rotate(90deg);}
.press_process_item.pos05_2::after{display: block; right: 50%; bottom: -53px; margin-right: -17px; margin-top: 0; top:auto; transform: rotate(-90deg);}

.press_process_item.pos06_1::after{display: block; right: auto; top:auto; margin: 0; bottom: 25px; left: -42px; transform: rotate(-45deg);}
.press_process_item.pos06_2::after{display: block; right: auto; top:10px; margin: 0; left: -42px; transform: rotate(45deg);}
.press_process_item.pos06_3::after{display: block; right: auto; top:10px; margin: 0; left: -42px; transform: rotate(45deg);}


/* 사출부문 */
.injection_process{position: relative; margin: 0 auto; box-sizing: border-box; display: flex; flex-direction: column; gap:60px;}
.injection_process > article{display: flex; gap:60px;}
.injection_process_item{flex:1; max-width: 220px; width: 100%; aspect-ratio: 1/1; border-radius: 50%; background: var(--white); border: 1px dashed var(--black); display: flex; align-items: center; justify-content: center; box-sizing: border-box; position: relative;}
.injection_process_item.is-start{background: var(--main); border: 0;}
.injection_process_item.is-end{background: var(--subBlue); border: 1px dashed var(--subBlue);}
.injection_process_item.blank{border:0;}
.injection_process_txt{display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;}
.injection_process_item.is-start .injection_process_txt{gap: 5px;}
.injection_process_item .step_num{display: block; font-family: var(--eng); letter-spacing: 0; font-weight: 700; line-height: 100%; color: var(--black); opacity: 0.5;}
.injection_process_item .step_txt{display: block; font-weight: 600; line-height: 120%; color: var(--black);}
.injection_process_item.is-start .step_num,.injection_process_item.is-start .step_txt,.injection_process_item.is-end .step_num,.injection_process_item.is-end .step_txt{color: var(--white);}
.injection_process_item.is-start .step_num{opacity: 1;}
.injection_process_item.is-end .step_num{opacity: 0.5;}

.injection_process_item::after{content:'\e315'; display: none; width: 34px; height: 34px; font-size:34px; line-height: 100%; font-family: var(--icon); font-weight: 400; color:#1C1B1F; opacity: 0.3; position: absolute;  right: -48px; top:50%; margin-top: -17px;}

.injection_process_item.pos01::after,
.injection_process_item.pos02::after,
.injection_process_item.pos03::after,
.injection_process_item.pos04::after{display: block;}
.injection_process_item.pos08::after,
.injection_process_item.pos07::after{display: block; transform:rotate(180deg);}
.injection_process_item.pos05::after{display: block; right: 50%; margin-right: -17px; top:auto; bottom: -48px; margin-top: 0; transform: rotate(90deg);}



/* 연구소 */
.rnd_cont h3{font-weight: 300; color:var(--black); text-align: center;}
.rnd_cont h3 b{display: inline; letter-spacing: inherit; line-height: inherit; font-weight: 700;}

.rnd_style{margin-top: 70px; display: grid; grid-template-columns: repeat(2, 1fr); grid-gap:70px;}
.rnd_style > li{box-sizing: border-box;}
.rnd_style > li img{display: block; width: 100%; height: 100%; object-fit: cover;}
.rnd_style > li:last-child{border:1px solid var(--border); padding: 110px 45px 105px;}

.rnd_org{position: relative; display: flex; flex-direction: column; align-items: center; box-sizing: border-box;}
.rnd_org .org_head{max-width: 180px; width: 100%; aspect-ratio: 1/1; border-radius: 50%; background: var(--main); display: flex; align-items: center; justify-content: center; box-sizing: border-box; color: var(--white); text-align: center;}
.rnd_org .org_head .fs22{color: var(--white);}
.rnd_org .org_line_v{width: 1px; height: 45px; background: var(--border);}

.rnd_org .org_teams{display: flex; gap: 30px; padding: 40px 0 0; justify-content: center; width: 100%; position: relative;}
.rnd_org .org_teams::before{content: ''; display: block; width: calc((100% + 30px) / 2); height: 1px; background: var(--border); position: absolute; top: 0; left: 50%; transform: translateX(-50%);}
.rnd_org .org_team{position: relative; flex:1; background: var(--grayBg); border-radius: var(--borderR10); padding: 90px 20px 20px; box-sizing: border-box; text-align: center;}
.rnd_org .org_team::before{content: ''; position: absolute; left: 50%; top: -40px; width: 1px; height: 40px; background: var(--border);}
.rnd_org .org_team_tit{position: absolute; left: 0; top: 0; width: 100%; height: 66px; display: flex; align-items: center; justify-content: center; border-radius: var(--borderR10); color: var(--white);}
.rnd_org .team_01 .org_team_tit{background: var(--subBlue);}
.rnd_org .team_02 .org_team_tit{background: var(--subGreen);}
.rnd_org .org_team_tit .fs22{color: var(--white); line-height: 120%;}
.rnd_org .org_team_list{display: flex; flex-direction: column; gap: 3px;}
.rnd_org .org_team_list li{color: var(--basic); line-height: 150%;}




/*******************************************************************************
    @media  1500px               
*******************************************************************************/
@media all and (max-width:1500px){



/* 프레스 부문 */
.press_process > article.press_left{flex:5;}
.press_process > article.press_right{flex:1;}


}
/*******************************************************************************
    @media  1300px               
*******************************************************************************/
@media all and (max-width:1300px){


/* 프레스 부문 */
.press_process{ gap:40px;}
.press_process > article.press_left{gap:40px;}
.press_process > article.press_right{gap:40px;}
.press_process > article > article{gap:40px;} 
.press_process_item .step_txt{font-size:1.111rem;}
.press_process_item::after{right: -38px;}
.press_process_item.pos01::after{bottom: -38px;}
.press_process_item.pos05_2::after{bottom: -38px;}


/* 사출부문 */
.injection_process{gap:40px;}
.injection_process > article{gap:40px;}
.injection_process_item .step_txt{font-size:1.111rem;}
.injection_process_item::after{right: -38px;}
.injection_process_item.pos05::after{bottom: -38px;}


/* 연구소 */
.rnd_cont h3 br{display: none;}

.rnd_style{margin-top: 50px; grid-gap:50px;}
.rnd_style > li:last-child{padding: 60px 35px;}




}
/*******************************************************************************
    @media  ~980px               
*******************************************************************************/
@media all and (max-width:980px){


/* 금형부문 */
.process_wrap{position: relative; overflow-x: auto; overflow-y: hidden;}
.process_wrap .responsive-dim.show{display: block;}
.process_list{width: 980px;}



/* 프레스 부문 */
.press_process{width: 980px;}


/* 현장 */
.project-site{gap: 30px;}
.press_site_tit{bottom: 20px;}
.press_site_arrow button{width: 50px; height: 50px;}
.press_site_arrow button::before{font-size: 24px;}


/* 사출부문 */
.injection_process{width: 980px;}
.injection_process > article{gap:40px;}
.injection_process_item .step_txt{font-size:1.111rem;}
.injection_process_item::after{width: 34px; height: 34px; font-size:34px; right: -38px; margin-top: -17px;}
.injection_process_item.pos05::after{margin-right: -17px; bottom: -38px;}


/* 연구소 */
.rnd_style{margin-top: 30px; grid-gap:20px;}
.rnd_style > li:last-child{padding: 40px 20px;}
.rnd_org .org_head{max-width: 120px;}
.rnd_org .org_line_v{height: 30px;}

.rnd_org .org_teams{gap: 20px; padding: 20px 0 0;}
.rnd_org .org_teams::before{width: calc((100% + 20px) / 2);}
.rnd_org .org_team{padding: 70px 20px 20px;}
.rnd_org .org_team::before{top: -20px; height: 20px;}
.rnd_org .org_team_tit{height: 50px;}



}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){

/* 금형부문 */
.process_list{width: 768px;}

/* 프레스 부문 */
.press_process{width: 768px; gap:30px;}
.press_process > article.press_left{gap:30px;}
.press_process > article.press_right{gap:30px;}
.press_process > article > article{gap:30px;} 
.press_process_item .step_txt{font-size:1.111rem;}
.press_process_item::after{width: 24px; height: 24px; font-size:24px; right: -27px; margin-top: -12px;}
.press_process_item.pos01::after{bottom: -27px; margin-right: -12px;}
.press_process_item.pos05_2::after{bottom: -27px; margin-right: -12px;}
.press_process_item.pos06_1::after{bottom: 0; left:-22px;}
.press_process_item.pos06_2::after{top:0; left: -22px;}
.press_process_item.pos06_3::after{top:0; left: -22px;}


/* 현장 */
.project-site{gap: 20px;}
.press_site_ctrl{gap: 10px;}
.press_site_bar{height: 3px;}
.press_site_arrow button{width: 40px; height: 40px;}
.press_site_arrow button::before{font-size: 20px;}

/* 사출부문 */
.injection_process{gap:30px; width: 768px;}
.injection_process > article{gap:30px;}
.injection_process_item::after{width: 24px; height: 24px; font-size:24px; right: -27px; margin-top: -12px;}
.injection_process_item.pos05::after{margin-right: -12px; bottom: -27px;}


/* 연구소 */
.rnd_style{margin-top: 20px; grid-template-columns: repeat(1, 1fr); grid-gap:10px;}
.rnd_style > li:last-child{padding: 30px 20px;}
.rnd_org .org_head{max-width: 100px;}
.rnd_org .org_line_v{height: 20px;}

.rnd_org .org_teams{gap: 10px;}
.rnd_org .org_teams::before{width: calc((100% + 10px) / 2);}
.rnd_org .org_team{padding: 50px 15px 15px;}
.rnd_org .org_team_tit{height: 40px;}



}