/* common */
main .topBox{ width: 100%; margin: 0 auto 80px;display:flex; justify-content:space-between; align-items: flex-end; }
main .topBox .txtBox .sTxt{ color:var(--mainC); font-weight: bold; margin-bottom: 30px; font-family:var(--Red); }
main .topBox .txtBox .title{ color:#fff; font-weight: 600; line-height: 90px; }
main .topBox #viewBtn{ margin-right: 45px;}

/* main */
body{ overflow-x: hidden;}
main .visual{ position: relative; margin-bottom: 55px; z-index: 10;}
main .visual .slideBox .slick-slide{ position: relative; height: 1100px; }
main .visual .slideBox .slick-slide .fitBox{ width: 100%; height: 100%; }
main .visual .slideBox .slick-slide .txtBox{ position: absolute; transform:translate(-50%,-50%); top: 63.3%; left: 50%; text-align: center; }
main .visual .slideBox .slick-slide:first-child .txtBox{ opacity: 0; transition:all 2s; }
main .visual .slideBox .slick-slide .txtBox .title{ white-space:nowrap; color:#fff; font-weight: 800; margin-bottom: 15px; }
main .visual .slideBox .slick-slide .txtBox .title br{ display:none; }
main .visual .slideBox .slick-slide:last-child .txtBox .title{ font-family:var(--Red); }
main .visual .slideBox .slick-slide .txtBox .title span{ color:var(--mainC); }
main .visual .slideBox .slick-slide .txtBox .txt{ color:rgba(255,255,255,0.9); }
main .visual .iconBox{ position: absolute; transform:translate(-50%,-50%); bottom: 14%; left: 50%; text-align: center; display:flex; border-radius: 150px; border: 1px solid rgba(255, 255, 255, 0.31); background: rgba(255, 255, 255, 0.10); backdrop-filter: blur(3px); padding: 13px 45px; }
main .visual .iconBox .itemBox{}
main .visual .iconBox .itemBox a{ display:flex; flex-direction:column; justify-content:space-between; font-family:var(--Red); color:#fff; font-weight: 500; transition:all 0.5s; }
main .visual .iconBox .itemBox figure{ margin-bottom: 5px; }
main .visual .iconBox .itemBox:not(:last-child){ margin-right: 50px;}
main .visual .iconBox .itemBox figure path{ transition:all 0.5s; }
main .visual .iconBox .itemBox:hover a{ color:var(--mainC); }
main .visual .iconBox .itemBox:hover figure:not(.fill) path{ stroke:var(--mainC); }
main .visual .iconBox .itemBox:hover figure.fill path{ fill:var(--mainC); }
main .visual .slideBox.on .slick-slide:first-child .txtBox{ opacity: 1;}

main .well{ margin-bottom: 225px;}
main .well > div{ width: 100%; height: 100vh; position: relative; overflow: hidden;}
main .well .firstBox > *{ position: relative; position:absolute; transform:translate(-50%,-50%); left: 50%; }
main .well .firstBox .imgBox{ width: 302px; height: 400px; top: 58%; }
main .well .firstBox .imgBox img{ position: absolute; transition:all 0.7s;}
main .well .firstBox .imgBox .head{ top: -55px; left: 95px; z-index: 4;}
main .well .firstBox .imgBox .body01{ top: 110px; left: 53px; z-index: 3;}
main .well .firstBox .imgBox .body02{ top:102px; left: 36px; z-index: 1;}
main .well .firstBox .imgBox .inner{ top: 5px; left: 5px; z-index: 2;}
main .well .firstBox .txtBox{ max-width:925px; width: 100%; top: 50%;}
main .well .firstBox .txtBox p{ color:#fff; font-weight: bold; font-family:var(--Red); }
main .well .firstBox .txtBox p span{ color:var(--mainC); font-weight: 400; }
main .well .firstBox .txtBox .txt02{ text-align: right; margin: 120px 0 25px;}
main .well .secondBox{ position: relative; position: absolute; transform: translate(-50%,-50%); top: 50%; left: 50%; height: 100%; }
main .well .secondBox .wrapBox{ opacity: 1; }
main .well .secondBox .wrapBox > *{ display:flex; justify-content: center; align-items:center; }
main .well .secondBox .bg{ position:relative; transform:scale(0.7); opacity: 0; transition:all 0.7s; }
main .well .secondBox .txtBox{ position: relative; width: 100%; height: 100%; position: absolute; transform:translate(-50%,-50%); top: 50%; left: 50%; flex-direction:column; text-align: center; z-index: 5;}
main .well .secondBox .txtBox > *{ position: relative;  transform: translate(0,50%); opacity: 0; }
main .well .secondBox .txtBox .title{ font-weight: bold; font-family:var(--Red); color:#fff; transition:all 1s; }
main .well .secondBox .txtBox .txt{ line-height: 1.5; color:rgba(255,255,255,0.9); margin: 30px 0 100px; transition:all 1s; }
main .well .secondBox .txtBox .txt span{ color:var(--mainC); font-weight: bold; }

main .point{ margin-bottom: 200px;}
main .point h2.title{ text-align: center; font-family:var(--Red); color:#fff; font-weight: bold; margin-bottom: 115px; }
main .point .section{ position: relative; display:flex; background: #0E0E0E; }
main .point .section > *{ width: 50%; }
main .point .section .txtBox{ display:flex; justify-content:center; align-items:center; flex-direction:column; text-align: center; }
main .point .section .txtBox .sTxt{ color:var(--mainC); font-weight: bold;  font-family:var(--Red); }
main .point .section .txtBox .title{ margin: 30px 0 65px; color:#fff; font-weight: bold; line-height: 55px;}
main .point .section .txtBox .txt{ color:rgba(255,255,255,0.9); line-height: 30px; margin: 75px 0 45px;}
main .point .section > figure{ position: relative; height: 100vh; overflow: hidden;}
main .point .section > figure img{ position: absolute; transform:translate(-50%,-50%); top: 50%; left: 50%; min-width:100%; min-height:100%; object-fit:cover; }

main .products{ margin-bottom: 225px; }
main .products .slideBox{ margin-left: 50px; margin-bottom: 50px; cursor: none; ransition: all 0.5s ease-in-out;}
main .products .slideBox.dragging .slick-slide { pointer-events: none; /* 드래그 중 클릭 차단 */}
main .products .slideBox .slick-slide{ width: 425px; height: 480px; background-image: linear-gradient(#1A1A1A, #1A1A1A), linear-gradient(125deg, rgba(30, 182, 183, 1), rgba(14, 14, 14, 1), rgba(30, 182, 183, 1), rgba(14, 14, 14, 1), rgba(30, 182, 183, 1)); border: 1px solid transparent;  background-origin: border-box; background-clip: content-box, border-box; border-radius:20px; margin-right: 30px;}
main .products .slideBox .slick-slide a{ width: 100%; height: 100%; display:flex; justify-content:flex-end; align-items:center; flex-direction:column; cursor: none;}
main .products .slideBox .slick-slide .txt{ margin: 27px 0 50px; color:#fff; font-weight: bold; font-family:var(--Red); }
main .products .bar{ width: 100%; height: 2px; margin: 0 auto; background: rgba(255,255,255,0.2); border-radius:5px; }
main .products .bar span{ display: block;  max-width: 100%;  width: 0; height: 2px; background: var(--mainC); transition: all 0.7s; border-radius:5px; }

main .news{ margin-bottom: 300px;}
main .news .ctnBox{ display:flex; gap: 40px; flex-wrap:wrap; }
main .news .ctnBox .itemBox{ width: calc((100% - 120px) / 4); }
main .news .ctnBox .itemBox .img{ position: relative; width: 100%; height: 280px; border-radius:20px; }
main .news .ctnBox .itemBox .img img{ transform: translate(-50%,-50%) scale(1); transition:all 0.5s; }
main .news .ctnBox .itemBox .img:after{ content:''; position: absolute; top: 0; left: 0; width: calc(100% - 6px); height: calc(100% - 6px); border-radius:20px; border:3px solid var(--mainC); 
transition:all 0.5s; opacity: 0; }
main .news .ctnBox .itemBox .title{ color:#fff; font-weight: 600; margin:40px 0 25px; letter-spacing: -0.44px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; 
text-overflow: ellipsis; overflow: hidden; transition:all 0.5s; }
main .news .ctnBox .itemBox ul li{ color:rgba(255,255,255,0.9); display:flex; font-weight: 300;}
main .news .ctnBox .itemBox ul li:not(:last-child){ margin-bottom: 10px;}
main .news .ctnBox .itemBox ul li span{ margin-right: 7px;}
main .news .ctnBox .itemBox:hover .img img{ transform: translate(-50%,-50%) scale(1.1) }
main .news .ctnBox .itemBox:hover .img:after{ opacity: 1; }
main .news .ctnBox .itemBox:hover .title{ color:var(--mainC); }

/* 20250820 */
main .well .secondBox .txtBox .txt.fw300, main .well .secondBox .txtBox .txt.fw300 span { font-weight: 300; }
main .point .section .txtBox .txt.pd20 { padding: 0 20px; }
@media screen and (max-width:1700px){ 
	main .point .section .txtBox .txt br.pc-br { display: none; }
}