@charset "utf-8";

/* 로봇응용사업부(linkBiz0) */
#contents.linkBiz0 section.sect{padding:0}
#contents.linkBiz0 ul.item{position:relative; display:flex; background-image:url('../image/linkBiz/bg.jpg'); background-position:50% 50%; background-repeat:no-repeat; background-size:cover; color:#fff; transition:all .3s}
#contents.linkBiz0 ul.item.item_0{background-image:url('../image/linkBiz/bg0.jpg?v=250623')}
#contents.linkBiz0 ul.item.item_1{background-image:url('../image/linkBiz/bg1.jpg')}
#contents.linkBiz0 ul.item:before{content:''; position:absolute; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,.6)}
#contents.linkBiz0 ul.item > li{position:relative; box-sizing:border-box; transition:all .5s}
#contents.linkBiz0 ul.item > li:hover{background-color:rgba(0,0,0,.6)}
#contents.linkBiz0 ul.item > li.on:hover{background-color:rgba(0,0,0,0)}
#contents.linkBiz0 ul.item button.cancel{position:absolute; z-index:2; border:1px solid #fff; box-sizing:border-box; border-radius:50%; opacity:0; visibility:hidden; color:#fff; transition:all .5s}
#contents.linkBiz0 ul.item > li.on button.cancel{opacity:1; visibility:visible}
#contents.linkBiz0 ul.item button.cancel:hover{background-color:rgba(0,0,0,.8)}
#contents.linkBiz0 ul.item button.cancel svg{display:block; width:100%; height:100%; fill:#fff}
#contents.linkBiz0 ul.item div.item{position:absolute; top:0; left:0; display:flex; flex-direction:column; justify-content:center; align-items:center; width:100%; height:100%; cursor:pointer}
#contents.linkBiz0 ul.item > li.on div.item{cursor:auto}
#contents.linkBiz0 ul.item div.subTitle{margin:0; overflow:hidden; transition:all .5s}
#contents.linkBiz0 ul.item > li.on div.subTitle{width:0; height:0}
#contents.linkBiz0 ul.item > li:hover div.subTitle{transform:scale(1.2)}
#contents.linkBiz0 ul.item div.subTitle p.suffix{margin:0; color:#fff}
#contents.linkBiz0 ul.item > li.off p.suffix{display:none}
#contents.linkBiz0 ul.item div.subTitle h2.title{margin:0.5em 0; color:#fff}
#contents.linkBiz0 ul.item div.subTitle div.subDesc{margin:0; color:#fff}
#contents.linkBiz0 ul.item > li.off div.subDesc{display:none}
#contents.linkBiz0 ul.item h2.lbl{}
#contents.linkBiz0 ul.item div.info{position:absolute; z-index:-1; top:0; left:0; width:100%; height:100%; display:flex; flex-direction:column; justify-content:center; opacity:0; visibility:hidden; box-sizing:border-box}
#contents.linkBiz0 ul.item > li.on div.info{z-index:1; opacity:1; visibility:visible; transition:all 1s; transition-delay:0.6s}
#contents.linkBiz0 ul.char{position:relative; display:flex; flex-wrap:wrap; color:#fff}
#contents.linkBiz0 ul.char div.ico{position:relative}
#contents.linkBiz0 ul.char div.box{display:flex; flex-direction:column; justify-content:center; border-radius:1vw; background-color:rgba(0,0,0,.7)}
#contents.linkBiz0 ul.char div.desc{display:flex; flex-direction:column; justify-content:center; font-weight:300; color:#fff}
@media screen and (max-width:1280px){
	#contents.linkBiz0 section.sect{height:100vh}
	#contents.linkBiz0 ul.item{height:100%}
	#contents.linkBiz0 ul.item > li.off h2.title{font-size:1em}
	#contents.linkBiz0 ul.item button.cancel{top:1vw; right:1vw; width:70px; height:70px; padding:24px}
	#contents.linkBiz0 ul.item div.info{padding:1vw 3vw; transform:translateY(60px)}
	#contents.linkBiz0 ul.item > li.on div.info{transform:translateY(0)}
	#contents.linkBiz0 ul.item h2.lbl{margin:0 0 1em 0; font-size:2.2em}
	#contents.linkBiz0 ul.item div.qn{position:relative; line-height:1.6em; font-size:1.4em; font-weight:500; text-indent:0.6em}
	#contents.linkBiz0 ul.item div.qn:before{content:''; position:absolute; top:0.6em; left:0; width:0.4em; height:0.4em; border-radius:50%; background-color:red}
	#contents.linkBiz0 ul.item div.answer{margin:0.6em 0 0 0; font-weight:300}
	#contents.linkBiz0 ul.item a.rq{display:flex; flex-wrap:nowrap; justify-content:center; align-items:center; width:10em; height:2.9em; border:1px solid #fff; margin:2em 0 0 0; color:#fff; transition:all .3s}
	#contents.linkBiz0 ul.item a.rq:hover{background-color:#fff; color:#000}
	#contents.linkBiz0 ul.char{left:-0.6vw; width:calc(100% + 1.2vw); margin:2vw 0}
	#contents.linkBiz0 ul.char > li{width:50%; padding:0 0.6vw; box-sizing:border-box}
	#contents.linkBiz0 ul.char > li:nth-child(1){padding-bottom:0.6vw}
	#contents.linkBiz0 ul.char > li:nth-child(2){padding-bottom:0.6vw}
	#contents.linkBiz0 ul.char > li:nth-child(3){padding-top:0.6vw}
	#contents.linkBiz0 ul.char > li:nth-child(4){padding-top:0.6vw}
	#contents.linkBiz0 ul.char div.box{padding:1vw}
	#contents.linkBiz0 ul.char h3{font-size:1.3em}
	#contents.linkBiz0 ul.char div.desc{height:3.6em; margin:0.6em 0 0 0; line-height:1.2em}
}
@media screen and (max-width:320px){
	#contents.linkBiz0 ul.item{flex-wrap:wrap}
	#contents.linkBiz0 ul.item > li{width:100%; height:50%}
	#contents.linkBiz0 ul.item > li.on{height:94%}
	#contents.linkBiz0 ul.item > li.off{height:6%}
	#contents.linkBiz0 ul.item > li:nth-child(1){border-bottom:1px solid #fff}
}
@media screen and (min-width:321px) and (max-width:360px){
	#contents.linkBiz0 ul.item{flex-wrap:wrap}
	#contents.linkBiz0 ul.item > li{width:100%; height:50%}
	#contents.linkBiz0 ul.item > li.on{height:94%}
	#contents.linkBiz0 ul.item > li.off{height:6%}
	#contents.linkBiz0 ul.item > li:nth-child(1){border-bottom:1px solid #fff}
}
@media screen and (min-width:361px) and (max-width:383px){
	#contents.linkBiz0 ul.item{flex-wrap:wrap}
	#contents.linkBiz0 ul.item > li{width:100%; height:50%}
	#contents.linkBiz0 ul.item > li.on{height:94%}
	#contents.linkBiz0 ul.item > li.off{height:6%}
	#contents.linkBiz0 ul.item > li:nth-child(1){border-bottom:1px solid #fff}
}
@media screen and (min-width:384px) and (max-width:428px){
	#contents.linkBiz0 ul.item{flex-wrap:wrap}
	#contents.linkBiz0 ul.item > li{width:100%; height:50%}
	#contents.linkBiz0 ul.item > li.on{height:94%}
	#contents.linkBiz0 ul.item > li.off{height:6%}
	#contents.linkBiz0 ul.item > li:nth-child(1){border-bottom:1px solid #fff}
}
@media screen and (min-width:429px) and (max-width:767px){
	#contents.linkBiz0 ul.item{flex-wrap:wrap}
	#contents.linkBiz0 ul.item > li{width:100%; height:50%}
	#contents.linkBiz0 ul.item > li.on{height:94%}
	#contents.linkBiz0 ul.item > li.off{height:6%}
	#contents.linkBiz0 ul.item > li:nth-child(1){border-bottom:1px solid #fff}
}
@media screen and (min-width:768px) and (max-width:1024px){
	#contents.linkBiz0 ul.item{flex-wrap:nowrap}
	#contents.linkBiz0 ul.item > li{width:50%; height:100%}
	#contents.linkBiz0 ul.item > li.on{width:94%}
	#contents.linkBiz0 ul.item > li.off{width:6%}
	#contents.linkBiz0 ul.item > li:nth-child(1){border-right:1px solid #fff}
	#contents.linkBiz0 ul.item > li.off h2.title{writing-mode:tb-rl}
}
@media screen and (min-width:1025px) and (max-width:1280px){
	#contents.linkBiz0 ul.item{flex-wrap:nowrap}
	#contents.linkBiz0 ul.item > li{width:50%; height:100%}
	#contents.linkBiz0 ul.item > li.on{width:94%}
	#contents.linkBiz0 ul.item > li.off{width:6%}
	#contents.linkBiz0 ul.item > li:nth-child(1){border-right:1px solid #fff}
	#contents.linkBiz0 ul.item > li.off h2.title{writing-mode:tb-rl}
}
@media screen and (min-width:1281px){
	#contents.linkBiz0 section.sect{height:100vh}
	#contents.linkBiz0 ul.item{flex-wrap:nowrap; height:100%}
	#contents.linkBiz0 ul.item > li{width:calc(100% / 3); height:100%; border-right:1px solid #fff}
	#contents.linkBiz0 ul.item > li.on{width:88%}
	#contents.linkBiz0 ul.item > li.off{width:6%}
	#contents.linkBiz0 ul.item > li:last-child{border-right:0}
	#contents.linkBiz0 ul.item > li.off h2.title{writing-mode:tb-rl; font-size:1em}
	#contents.linkBiz0 ul.item button.cancel{top:1vw; right:1vw; width:70px; height:70px; padding:24px}
	#contents.linkBiz0 ul.item div.info{padding:1vw 3vw; transform:translateY(60px)}
	#contents.linkBiz0 ul.item > li.on div.info{transform:translateY(0)}
	#contents.linkBiz0 ul.item h2.lbl{margin:0 0 1em 0; font-size:2.2em}
	#contents.linkBiz0 ul.item div.qn{position:relative; line-height:1.6em; font-size:1.4em; font-weight:500; text-indent:0.6em}
	#contents.linkBiz0 ul.item div.qn:before{content:''; position:absolute; top:0.6em; left:0; width:0.4em; height:0.4em; border-radius:50%; background-color:red}
	#contents.linkBiz0 ul.item div.answer{margin:0.6em 0 0 0; font-weight:300}
	#contents.linkBiz0 ul.item a.rq{display:flex; flex-wrap:nowrap; justify-content:center; align-items:center; width:10em; height:2.9em; border:1px solid #fff; margin:2em 0 0 0; color:#fff; transition:all .3s}
	#contents.linkBiz0 ul.item a.rq:hover{background-color:#fff; color:#000}
	#contents.linkBiz0 ul.char{left:-0.6vw; width:calc(100% + 1.2vw); margin:2vw 0}
	#contents.linkBiz0 ul.char > li{width:25%; padding:0 0.6vw; box-sizing:border-box}
	#contents.linkBiz0 ul.char div.box{padding:1vw}
	#contents.linkBiz0 ul.char h3{font-size:1.3em}
	#contents.linkBiz0 ul.char div.desc{height:3.6em; margin:0.6em 0 0 0; line-height:1.2em}
}

#contents.linkBiz0 ul.comList{position:relative; display:flex; flex-wrap:wrap}
#contents.linkBiz0 ul.comList > li{position:relative; box-sizing:border-box}
#contents.linkBiz0 ul.comList div.imgW{position:relative; padding:5%; border-radius:0.6vw; box-sizing:border-box; background-color:rgba(255,255,255,.7); box-shadow:0 0 1em 0 rgba(0,0,0,.2)}
#contents.linkBiz0 ul.comList img{display:block; width:100%; height:100%; object-fit:contain; filter:grayscale(100%)}
@media screen and (max-width:1280px){
	#contents.linkBiz0 ul.comList{left:-0.4vw; width:calc(100% + 0.8vw)}
	#contents.linkBiz0 ul.comList > li{padding:0 0.4vw; margin:0 0 0.8vw 0}
}
@media screen and (max-width:320px){
	#contents.linkBiz0 ul.comList > li{width:50%}
	#contents.linkBiz0 ul.comList > li:nth-child(2n+1):nth-last-child(-n+2), #contents.linkBiz0 ul.comList > li:nth-child(2n+1):nth-last-child(-n+2) ~ li{margin-bottom:0}
}
@media screen and (min-width:321px) and (max-width:360px){
	#contents.linkBiz0 ul.comList > li{width:50%}
	#contents.linkBiz0 ul.comList > li:nth-child(2n+1):nth-last-child(-n+2), #contents.linkBiz0 ul.comList > li:nth-child(2n+1):nth-last-child(-n+2) ~ li{margin-bottom:0}
}
@media screen and (min-width:361px) and (max-width:383px){
	#contents.linkBiz0 ul.comList > li{width:50%}
	#contents.linkBiz0 ul.comList > li:nth-child(2n+1):nth-last-child(-n+2), #contents.linkBiz0 ul.comList > li:nth-child(2n+1):nth-last-child(-n+2) ~ li{margin-bottom:0}
}
@media screen and (min-width:384px) and (max-width:428px){
	#contents.linkBiz0 ul.comList > li{width:calc(100% / 3)}
	#contents.linkBiz0 ul.comList > li:nth-child(3n+1):nth-last-child(-n+3), #contents.linkBiz0 ul.comList > li:nth-child(3n+1):nth-last-child(-n+3) ~ li{margin-bottom:0}
}
@media screen and (min-width:429px) and (max-width:767px){
	#contents.linkBiz0 ul.comList > li{width:calc(100% / 3)}
	#contents.linkBiz0 ul.comList > li:nth-child(3n+1):nth-last-child(-n+3), #contents.linkBiz0 ul.comList > li:nth-child(3n+1):nth-last-child(-n+3) ~ li{margin-bottom:0}
}
@media screen and (min-width:768px) and (max-width:1024px){
	#contents.linkBiz0 ul.comList > li{width:25%}
	#contents.linkBiz0 ul.comList > li:nth-child(4n+1):nth-last-child(-n+4), #contents.linkBiz0 ul.comList > li:nth-child(4n+1):nth-last-child(-n+4) ~ li{margin-bottom:0}
}
@media screen and (min-width:1025px) and (max-width:1280px){
	#contents.linkBiz0 ul.comList > li{width:20%}
	#contents.linkBiz0 ul.comList > li:nth-child(5n+1):nth-last-child(-n+5), #contents.linkBiz0 ul.comList > li:nth-child(5n+1):nth-last-child(-n+5) ~ li{margin-bottom:0}
}
@media screen and (min-width:1281px){
	#contents.linkBiz0 ul.comList{left:-0.4vw; width:calc(100% + 0.8vw)}
	#contents.linkBiz0 ul.comList > li{width:12.5%; padding:0 0.4vw; margin:0 0 0.8vw 0}
	#contents.linkBiz0 ul.comList > li:nth-child(8n+1):nth-last-child(-n+8), #contents.linkBiz0 ul.comList > li:nth-child(8n+1):nth-last-child(-n+8) ~ li{margin-bottom:0}
}
/* 로봇응용사업부(linkBiz0) */