@charset "utf-8";
/* *******************************************************
 * filename : language.css
 * description : 영문  CSS
 * date : 2022-11-29
******************************************************** */

/* ******************  Layout.css ********************** */
html[lang="en"]{}

body, table, th, td, button, select, input, textarea {
	font-family: 'Poppins', 'Noto Sans KR', "나눔고딕", NanumGothic, "Nanum Gothic","돋움", Dotum, Arial, sans-serif;
}
.font-mont,
.font-noto,
.font-score,
.font-play{font-family:  'Play', "나눔고딕", NanumGothic, "Nanum Gothic","돋움", Dotum, Arial, sans-serif;}

/* #gnb > ul > li.gnb4 {width:175px;}
#gnb > ul > li.gnb5 {width:90px;}
#gnb > ul > li.gnb6 {width:75px;}
#gnb > ul > li.gnb7 {width: 140px;}
#gnb > ul > li.gnb8 {width:100px;} */

/*#gnb.total-menu > ul > li .gnb-2dep ul li a {padding:10px 17px;}*/

/*.gnb-open #gnb > ul > li {width:12.5%;}*/

/* GNB :: 2차메뉴 Over (높이변경) */
html[lang="en"] #gnb.open #gnbBg{height:505px;}
html[lang="en"] #gnb.open > ul > li .gnb-2dep{height:365px;}
@media all and ( max-width: 1620px ){
	html[lang="en"] #gnb.open #gnbBg{height:555px;}
	html[lang="en"] #gnb.open > ul > li .gnb-2dep{height:415px;}
}
@media all and ( max-width: 1520px ){
	html[lang="en"] #gnb.open #gnbBg{height:605px;}
	html[lang="en"] #gnb.open > ul > li .gnb-2dep{height:465px;}
}

/* ******************  Main.css ********************** */


/* ******************  Content.css ********************** */
/* -------- Company :: CEO인사말 -------- */
@media all and (max-width:800px){
	/* html[lang="en"] 사용하면 css우선순위가 높아집니다. */
}

/* ****************** digital-center 페이지 추가 2023-02-20 YJ ****************** */
/* 공통 */

/* ****************** shaping the future ****************** */
.digital-page.future {text-align:center; width:84%; margin:0 auto;}
.digital-page.future .highlight {color:#06377a;}
.future-bg {display:inline-block; width: 100%; height: 545px;}
.future-bg span {display:inline-block; background: url(/en/images/content/digital_future_img.jpg)no-repeat; width:100%; height: 100%; background-size:cover; background-position:50% 50%;}
.digital-page.future .txt-box {background: #fff; text-align:left; margin:-130px 0 0 17.56%; padding:55px 90px; position: relative; z-index:10; /* width:84%; */ box-sizing:border-box;}
.digital-page.future .txt-01 {display:inline-block; font-size:15px; color:#06377a; font-weight: 600; margin-bottom: 22px;}
.digital-page.future .txt-02 {font-size:24px; color:#000; margin-bottom: 20px; line-height:1.2;}
.digital-page.future .txt-03 {font-size:36px; color:#000; line-height:1.3; letter-spacing:-0.01em; font-weight: 600;}

/* ****************** State-of-Art Material Handling System ****************** */
.digital-page.art .top-box{background:url(/en/images/content/art_img.jpg)no-repeat; width: 100%; padding:16.03% 0; background-size:cover;}
.digital-page.art .top-box .top-txt {font-size:30px; color:#fff; font-weight: 300; line-height:1.6; padding:0 2rem; text-align:center;} 
.digital-page.art .bottom-box {margin-top:120px;}
.digital-page.art .arrow-box {text-align:center; margin-top: 1.5rem;}
.digital-page.art .arrow-box span {display:flex; justify-content:center; flex-direction:column;}
.digital-page.art .arrow-box span i {font-size:18px;}
.digital-page.art .arrow-box span i:first-child {margin-bottom:-12px; color:rgba(255,255,255,0.2);}
.digital-page.art .arrow-box span i:last-child {margin-bottom:-12px; color:rgba(255,255,255,0.8);}
.art-list .item {display:flex; align-items:center; margin-bottom: 140px;}
.art-list .item:last-of-type {margin-bottom: 0;}
.art-list .item > div {width: 50%;}
.art-list .item .img-box {position: relative; padding-right:6.25%; box-sizing:border-box;}
.art-list .item .img-box:before {position:absolute; bottom:-10px; left:-10px; display:block; content:""; width:52.96%; height:60.89%; background:#16b9ed; z-index:-1;}
.art-list .item .img-box img {max-width:100%;}
.art-list .item:nth-of-type(even) {flex-direction:row-reverse; text-align:right;}
.art-list .item:nth-of-type(even) .img-box {text-align:right; padding-right:0; padding-left:6.25%;}
.art-list .item:nth-of-type(even) .img-box:before {left:initial; right:-10px;} 
.art-list .item .num {position: relative; display:inline-block; font-size:16px; font-weight: 700; color:#16b9ed; font-style:italic; margin-bottom:12px;}
.art-list .item .num:before {display:block; content:""; width:60px; height:1px; background: #16b9ed; position:absolute; bottom:-12px;}
.art-list .item:nth-of-type(even) .num:before {left:initial; right:0;}
.art-list .item:nth-of-type(2) .num {color:#3e79e6;}
.art-list .item:nth-of-type(3) .num {color:#0c3274;}
.art-list .item:nth-of-type(4) .num {color:#07152c;}
.art-list .item:nth-of-type(2) .num:before , .art-list .item:nth-of-type(2) .img-box:before {background: #3e79e6;}
.art-list .item:nth-of-type(3) .num:before , .art-list .item:nth-of-type(3) .img-box:before {background: #0c3274;}
.art-list .item:nth-of-type(4) .num:before , .art-list .item:nth-of-type(4) .img-box:before {background: #07152c;}
.art-list .item .txt {font-size:24px; color:#000; line-height:1.65; padding-top: 10px;}

/* ****************** Software Centric Material Handling System ****************** */

.digital-page.material .top-box {position: relative;}
.digital-page.material .bottom-box {margin-top: 8.99%;}
/** material 슬릭 슬라이드 **/
.material-list .item {overflow:hidden;}
.material-list .item img {max-width:100%;}
.material-list .item span {background-size:cover !important; transform:scale(1.08,1.08); background-position:50% 50% !important; width: 100%; height: 760px;}
.material-list .item.active-item span {animation: image-zoom-out 8s 0s forwards;}
.material-list .item:nth-of-type(1) span {display:inline-block; background:url(/en/images/content/intelligence.jpg)no-repeat;}
.material-list .item:nth-of-type(2) span {display:inline-block; background:url(/en/images/content/vision.jpg)no-repeat;}
.material-list .item:nth-of-type(3) span {display:inline-block; background:url(/en/images/content/algorithm.jpg)no-repeat;}
.material-list .item:nth-of-type(4) span {display:inline-block; background:url(/en/images/content/control.jpg)no-repeat;}
.material-list .item:nth-of-type(5) span {display:inline-block; background:url(/en/images/content/electrical.jpg)no-repeat;}
.material-list .item:nth-of-type(6) span {display:inline-block; background:url(/en/images/content/mechanical.jpg)no-repeat;}
/** material 슬릭 슬라이드 paging **/
.material-list .slick-dots {position:absolute; bottom:60px; width: 100%; display:flex !important; justify-content:center; z-index:10;}
.material-list .slick-dots li {margin:0 31.5px; width:160px; text-align:center; cursor:pointer;}
.material-list .slick-dots li a .loading-bar-paging-tit em{font-size:18px;}
.material-list .slick-dots li em {transition:all 0.4s;}
.material-list .slick-dots li.active-item .loading-bar-line:after{width: 100%; transition:all 4s; visibility:visible;}
.material-list .slick-dots li.active-item em {color:#fff;}
.material-list .loading-bar-line {display:inline-block; width: 100%; position: relative;}
.material-list .loading-bar-line:before {display:block; content:""; position:absolute; left:0; top:0; width: 100%; height: 2px; background: rgba(255,255,255,0.2);}
.material-list .loading-bar-line:after {display:block; content:""; position:absolute; left:0; top:0; width: 0; height: 2px; background: #fff; visibility:hidden;}
/** material 도식화 **/
.digital-page.material .diagram-box {position: relative; height: 0; padding-top:45%;}
.digital-page.material .diagram-box .item {text-align:center; position:absolute; height:100%; left:50%; top:0; transform:translateX(-50%); opacity:0; transition:all 0.4s;}
.digital-page.material .diagram-box .item img {max-width:100%; max-height:100%;}
.digital-page.material .diagram-box .item.active {opacity: 1;}

@keyframes image-zoom-out {
	from {
		transform: scale(1.08,1.08);
	}
	to {
		transform: scale(1.0,1.0);
	}
}

@media all and (max-width:1000px){
	.material-list .slick-dots li {position: absolute; width: 80%; text-align:left; opacity:0;}
	.material-list .slick-dots li.active-item {opacity:1;}
}

@media all and (max-width:800px){
	.future-bg {height:272px;}
	.digital-page.future .txt-box {padding:27.5px 45px; margin:-65px 0 0 17.56%;}
	.digital-page.future .txt-01 {font-size:13px;}
	.digital-page.future .txt-02 {font-size:17px;}
	.digital-page.future .txt-03 {font-size:20px;}
	.digital-page.art .top-box .top-txt {font-size:20px;}
	.digital-page.art .bottom-box {margin-top:60px;}
	.art-list .item {flex-wrap:wrap; margin-bottom: 70px;}
	.art-list .item > div {width: 100%;}
	.art-list .item .img-box {padding-right: 0;}
	.art-list .item:nth-of-type(even) .img-box {padding-left:0;}
	.art-list .item .num {font-size:13px;}
	.art-list .item .txt-box {margin-top: 2rem;}
	.art-list .item .txt {font-size:17px;}
	.material-list .item span {height: 380px;}
}