@import url("sub.css");



.border_imgBox {border:1px solid var(--border); padding:60px; box-sizing:border-box; text-align:center;}
.border_imgBox img {max-width:100%;}




.pipeline_process_list {display: grid; grid-template-columns: repeat(4, 1fr); grid-gap:20px;}
.pipeline_process_list dl {}
.pipeline_process_list dl dt {position:relative;}
.pipeline_process_list dl dt img {width:100%}
.pipeline_process_list dl dt .arrow {position:absolute; top:50%; right:-30px; transform:translateY(-50%); z-index:10;}
.pipeline_process_list dl:last-of-type dt .arrow {display:none;}
.pipeline_process_list dl dd {padding:15px 0 0; text-align:center;}
.pipeline_process_list dl dd .step {display:inline-flex; padding:0 15px; box-sizing:border-box; border-radius: 50px; background: rgba(67, 150, 76, 0.20); color: var(--main); font-size: 12px; font-weight: 700; line-height: 250%;}
.pipeline_process_list dl dd .fs18 {color:var(--black); font-weight:600; margin:5px 0 0;}
.pipeline_process_list dl dd .fs16 {display:block; margin:5px 0 0;}


.arrow{display: flex; gap:3px; align-items: center; justify-content: center; width: 40px; aspect-ratio: 3 / 3; box-shadow:0 0 20px rgba(0, 0, 0, 0.25); border-radius:100%; background:Var(--white);}
.arrow .m_scroll_arrows{width:5px; aspect-ratio: 5 / 10; background:url('/eng/img/pro_arr.svg') center center/100% no-repeat; opacity:1; }
.arrow .doi {opacity:0.6;}
.arrow .trei {opacity:0.4;}



.unu, .doi, .trei {-webkit-animation: mouse-scroll 1s infinite; -moz-animation: mouse-scroll 1s infinite; animation: mouse-scroll 1s infinite;}
.unu {-webkit-animation-delay: .1s; -moz-animation-delay: .1s; -webkit-animation-direction: alternate; animation-direction: alternate; animation-delay: alternate;}
.doi {-webkit-animation-delay: .2s; -moz-animation-delay: .2s; -webkit-animation-direction: alternate; animation-delay: .2s; animation-direction: alternate;}
.trei {-webkit-animation-delay: .3s; -moz-animation-delay: .3s; -webkit-animation-direction: alternate; animation-delay: .3s; animation-direction: alternate;}

@-webkit-keyframes mouse-scroll {
	0%   { opacity: 0;}
	50%  { opacity: .5;}
	100% { opacity: 1;}
}
@-moz-keyframes mouse-scroll {
	0%   { opacity: 0; }
	50%  { opacity: .5; }
	100% { opacity: 1; }
}
@-o-keyframes mouse-scroll {
	0%   { opacity: 0; }
	50%  { opacity: .5; }
	100% { opacity: 1; }
}
@keyframes mouse-scroll {
	0%   { opacity: 0; }
	50%  { opacity: .5; }
	100% { opacity: 1; }
}










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

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

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

.border_imgBox {padding:40px;}

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

.border_imgBox {padding:20px; position:relative;}
.border_imgBox .sanctions_box {position:static}

.pipeline_process_list {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap:30px 20px;}
.pipeline_process_list dl:nth-of-type(2) dt .arrow {display:none;}
.pipeline_process_list dl dd .step {font-size:10px; padding:0 10px;}
.pipeline_process_list dl dt .arrow  {right:-28px;}
.arrow {width:36px;}
.arrow .m_scroll_arrows {width:4px;}


}