/* common */
footer{ margin-top: 0 !important; }

#topBtn{ background: var(--mainC); }
#topBtn img{ filter:invert(1);}

.subVisual{ padding-top: 100px; }
.subVisual .lnb{ height: 70px; display:flex; align-items:center; border-radius: 20px; border: 1px solid #ddd; position: relative; z-index: 100;}
.subVisual .lnb .home a{ width: 70px; height: 100%; display:flex; justify-content:center; align-items:center; }
.subVisual .lnb > li{ position: relative; height: 100%; border-right:1px solid #ddd; }
.subVisual .lnb > li p{ display:flex; justify-content:space-between; align-items:center; height: 100%; padding: 0 30px; min-width:300px; cursor:pointer; color:#333; transition:all 0.5s; }
.subVisual .lnb > li p img{ transition:all 0.5s; }
.subVisual .lnb > li ul{ position: absolute; top:calc(100% + 1px); transform:translateX(-50%); left: 50%; text-align: center; width: calc(100% + 2px);  border-radius: 0px 0px 20px 20px; overflow: hidden;
border:1px solid #ddd; border-top:none; display:none; }
.subVisual .lnb > li ul li{ width: 100%; height: 70px; background: #fff; }
.subVisual .lnb > li ul li:not(:last-child){ border-bottom:1px solid #ddd;}
.subVisual .lnb > li ul li a{ color:#666; text-align: left; display:flex; align-items:center; width: 100%; height: 100%; padding: 0 30px;}
.subVisual .lnb > li.path1 p,
.subVisual .lnb > li.path1 ul li a{ font-family: var(--exo); }
.subVisual .lnb > li.on p{ background: #fff; }
.subVisual .lnb > li.on p img{ transform:rotate(180deg); }
.subVisual .title{ text-align: center; margin: 100px 0 60px; color:#111; font-weight: bold; filter: blur(10px); -webkit-filter: blur(10px); letter-spacing: 20px; opacity: 0; transition: all 2s;}
.subVisual .bg{ position: relative; height: 400px; border-radius: 50px 0px 0px 50px; margin-left: 60px; width: calc(100% - 60px);}
.subVisual .bg img{ height: 100%; }
.subVisual .bg:before{ content: ''; position: absolute; top: 0;  left: 0; display: block; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.3); backdrop-filter: blur(5px); z-index: 10; 
transition: all 1.5s 0.5s; }

.subVisual .title.aos-animate{ letter-spacing: 0; filter: blur(0); -webkit-filter: blur(0); opacity: 1;}
.subVisual .bg.aos-animate:before{ left: 100%;}

#sv.sv02 .subVisual .lnb .path2,
#sv.sv02 .subVisual h2.title,
#sv.sv02 .subVisual .bg,
#sv.sv06 .lnb > li.path1,
#sv.sv06 .lnb > li p img{ display:none; }

#subContents{ padding: 120px 0 200px;}

#bgLinear{ position: relative; display:block; width: calc(100% + 40px); height: calc(100% + 40px); background: #eee; box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.10); position: absolute; transform:translate(-50%,-50%); top: 50%; left: 50%; border-radius: 30px; }
#bgLinear:after{ content:''; aspect-ratio: 1; position: absolute; top: -2px; left: -2px; padding: 2px; border-radius: 30px; background: linear-gradient(90deg,#00489D, #00B3C4); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box,  linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; z-index: 5; width: 100%; height: 100%;}

#business .ctnBox{ display:grid; gap:20px; grid-template-rows: repeat(3, 220px); grid-template-columns: repeat(2, 1fr);}
#business .ctnBox .itemBox{ position: relative; border-radius: 50px; overflow: hidden;}
#business .ctnBox .itemBox .bg{ position:absolute; top: 0; left: 0; transition:all 0.5s;  }
#business .ctnBox .itemBox .txtBox{ position: relative; z-index: 1; height: 100%; padding: 60px; color:#fff; font-weight: bold; letter-spacing: -0.8px; }
#business .ctnBox .itemBox .txtBox ul{ position: absolute; bottom: 30px; right: 60px; font-weight: 400; text-align: right; }
#business .ctnBox .itemBox .txtBox ul li:not(:last-child){ margin-bottom: 10px;}
#business .ctnBox .itemBox.type2{ grid-row: span 3; }
#business .ctnBox .itemBox:hover .bg{ transform:scale(1.1)}

.businessV > div{ position: relative; padding-top: 90px;}
.businessV #tabBox{ display:flex; position: absolute; top: 0; left: 50%; transform: translateX(-50%); max-width:1800px; width: 100%; z-index: 10;}
.businessV #tabBox li:not(:last-child){ margin-right: 10px;}
.businessV #tabBox li a{ display: flex; height: 40px; padding: 0px 15px; justify-content: center; align-items: center; border-radius: 10px; border: 1px solid #DDD; color:#333; background: #fff;
transition:all 0.5s; }
.businessV #tabBox li:hover a,
.businessV #tabBox li.on a{ background: var(--mainC); color:#fff; border: 1px solid var(--mainC);}
.businessV #tabBox.fixed{ position: fixed; top: 60px;}
.businessV .ctnWrap{ position: relative; display:flex; }
.businessV .linkBox { margin-right: 30px; position:sticky; top: 150px; left: 0; min-height: 150px; height: 100%;}
.businessV .linkBox{ width: 400px; flex-shrink:0; }
.businessV .linkBox .txtBox .title{ color:#111; font-weight: bold; letter-spacing: -1.2px; margin:0 0 60px;}
.businessV .linkBox .txtBox .listBox{ letter-spacing: -0.4px; }
.businessV .linkBox .txtBox .listBox li:not(:last-child){ margin-bottom: 15px;}
.businessV .linkBox .txtBox .listBox li a{ color:#aaa; font-weight: bold; transition:all 0.5s; }
.businessV .linkBox .txtBox .listBox li:hover a,
.businessV .linkBox .txtBox .listBox li.on a{ color:#111; } 
.businessV .ctnWrap:not(#material){ padding-top: 150px;}
.businessV .content{ width: 100%; }
.businessV .content h3.title{ font-weight: bold; color:#111; margin-bottom: 60px;}
.businessV .content .ctnBox > .txtBox .title{ display:flex; align-items:center; color:#222; font-weight: 600; }
.businessV .content .ctnBox > .txtBox .title span{ display:flex; justify-content:center;align-items:center; margin-right: 10px; width: 35px; height: 35px; border-radius:50%; background: #000; color:#fff; font-weight: bold; }
.businessV .content .ctnBox > .txtBox .txt{ color:#333; letter-spacing: -0.4px; line-height: 1.6; margin: 20px 0 30px; font-weight: 300;}
.businessV .content .ctnBox > .txtBox .txt span{ font-weight: bold;}
.businessV #material .content section:not(:first-child){ padding-top: 150px;}
.businessV #material .content .ctnBox:not(:last-child){ margin-bottom: 100px;}
.businessV #material .content .ctnBox .imgBox1{ display:flex; justify-content:space-between; }
.businessV #material .content .ctnBox .imgBox1 figure{ width: calc((100% - 40px) / 3); height: 400px; border-radius: 50px; }
.businessV #material .content .ctnBox .imgBox2 { display:flex; gap:20px;}
.businessV #material .content .ctnBox .imgBox2 > *{ width: calc((100% - 40px) / 3);}
.businessV #material .content .ctnBox .imgBox2 > div figure:first-child{ margin-bottom: 20px; }
.businessV #material .content .ctnBox .imgBox2 figure{ position: relative; }
.businessV #material .content .ctnBox .imgBox2 figure span{ position: absolute; bottom: 20px; right: 20px; display:inline-block; padding: 7px 20px; background: rgba(0,0,0,0.6); font-weight: 500; color:#fff; border-radius:50px; }
.businessV #material .content .ctnBox .imgBox3{ border-radius: 50px; border: 1px solid #EEE; padding: 60px; display:flex; gap:30px; }
.businessV #material .content .ctnBox .imgBox3 .itemBox{ width: calc((100% - 60px) / 3); order:2; display:flex; flex-direction:column; align-items:center; }
.businessV #material .content .ctnBox .imgBox3 .itemBox:first-child{ order:1; }
.businessV #material .content .ctnBox .imgBox3 .itemBox .img{ width: 100%; } 
.businessV #material .content .ctnBox .imgBox3 .itemBox .img dt{ height: 60px; border-radius:30px 30px 0 0; background: #ddd; display:flex; justify-content:center; align-items:center; color:#333; font-weight: bold;}
.businessV #material .content .ctnBox .imgBox3 .itemBox .img dd{ position: relative; border-radius:0 0 30px 30px; border:1px solid #ddd; border-top:none; height: 260px; display:flex; justify-content:center; align-items:center;  } 
.businessV #material .content .ctnBox .imgBox3 .itemBox .img dd span{ position: absolute; transform:translateY(-50%); top: 45%; right: -10%; display:block; width: 50px; height: 50px; border-radius:50%; border:1px solid #ddd; display:flex; justify-content:center; align-items:center; background: #fff; box-shadow:0 0 10px rgba(0,0,0,0.1); color:#aaa; font-weight: bold; z-index: 5; 
line-height: 0.5;}
.businessV #material .content .ctnBox .imgBox3 .itemBox .tableBox{ display:inline-flex; flex-direction:column; justify-content:flex-end;}
.businessV #material .content .ctnBox .imgBox3 .itemBox .tableBox .title{ display:inline-flex; justify-content:center; align-items:center; color:#fff; margin: 0 0 0 auto; padding: 7px 20px; border-radius:50px; background: #333; margin: 20px 0 15px auto;}
.businessV #material .content .ctnBox .imgBox3 .itemBox .tableBox .title img{ margin: 0 10px;}
.businessV #material .content .ctnBox .imgBox3 .itemBox .tableBox .dlBox dl{ display:flex; align-items:center; }
.businessV #material .content .ctnBox .imgBox3 .itemBox .tableBox .dlBox dl:not(:last-child){ margin-bottom: 10px;}
.businessV #material .content .ctnBox .imgBox3 .itemBox .tableBox .dlBox dl dt{ min-width:100px; margin-right: 40px; flex-shrink:0; color:#333; font-weight: 500;}
.businessV #material .content .ctnBox .imgBox3 .itemBox .tableBox .dlBox dl dd{ display:flex; align-items:center; justify-content:space-between; }
.businessV #material .content .ctnBox .imgBox3 .itemBox .tableBox .dlBox dl dd span{ display:flex; justify-content:center; align-items:center; border:1px solid #ddd; border-radius:50%; color:#aaa; width: 30px; height: 30px; font-size:14px; line-height: 1; font-weight: 600; }
.businessV #material .content .ctnBox .imgBox3 .itemBox .tableBox .dlBox dl dd span:not(:last-child){ margin-right: 15px; }
.businessV #material .content .ctnBox .imgBox3 .itemBox .tableBox .dlBox dl dd span.on{ background: #aaa; color:#fff; border:1px solid #aaa; }
.businessV #material .content .nose h3.title{ margin-bottom: 20px;}
.businessV #material .content .nose .ctnBox{ display:flex; justify-content:space-between; margin-top: 30px;}
.businessV #material .content .nose .ctnBox > *{ position: relative; overflow: hidden; width: calc((100% - 20px) / 2); height: 400px; border-radius:50px;}
.businessV #material .content .nose .ctnBox .fitBox:first-child{ border:1px solid #eee; border-radius:50px; }
.businessV #material .content .nose .ctnBox div video{ position:absolute; transform:translate(-50%,-50%); top: 50%; left: 50%; min-width:100%; min-height:100%; object-fit:cover; }

.businessV #monitoring section:not(#water){ padding-top: 150px;}
.businessV #monitoring section > .title{ color:#111; line-height: 1.3; font-weight: bold; margin-bottom: 30px; letter-spacing: -0.72px;}
.businessV #monitoring section .ctnBox{ display:flex; align-items:center; justify-content:space-between; }
.businessV #monitoring section .ctnBox .imgBox{ position: relative; width: 300px; height: 400px; margin: 0 40px; flex-shrink:0; }
.businessV #monitoring section .ctnBox .imgBox .circle{ position: relative; width: 300px; height: 300px; border-radius:50%; border: 1px dashed rgba(0,0,0,0.3); position: absolute; transform:translate(-50%,-50%); top: 50%; left: 50%;}
.businessV #monitoring section .ctnBox .imgBox .circle img{ position: absolute; transform:translate(-50%,-50%); top: 50%; left: 50%; width: max-content;}
.businessV #monitoring section .ctnBox .imgBox .icon{ position: absolute; transform:translateX(-50%); top: 0 ; left: 50%; width: 80px; height: 80px; background: #00489D; border-radius:50%; display:flex; justify-content:center; align-items:center; }
.businessV #monitoring section .ctnBox .imgBox .icon02{ top: auto; bottom: 0;}
.businessV #monitoring section .ctnBox .imgBox .arrow{ position: absolute; transform:translateY(-50%); top: 50% ; left: -7px; }
.businessV #monitoring section .ctnBox .imgBox .right{ left: auto; right: -7px;}
.businessV #monitoring section .ctnBox .appBox{ background: ; padding: 30px 37px 40px; background: #F5F5F5; border-radius:50px; text-align: center; }
.businessV #monitoring section .ctnBox .appBox p{ color:#333; font-weight: 500; letter-spacing: -0.4px; margin-top: 7px;}

.businessV #device section > .title{ color:#111; line-height: 1.3; font-weight: bold; margin-bottom: 30px; letter-spacing: -0.72px;}
.businessV #device section:not(:first-child){ padding-top: 150px;}
.businessV #device section figure{ border-radius: 50px; border: 1px solid #EEE; background: #FFF; padding: 30px; display:flex; justify-content:center; align-items:center; }

.businessV #develop section:not(:first-child){ padding-top: 150px;}
.businessV #develop #foundry .ctnBox .itemBox{ display:flex; flex-wrap:wrap; gap: 25px; }
.businessV #develop #foundry .ctnBox .itemBox dl{ width: calc((100% - 50px) / 3);}
.businessV #develop #foundry .ctnBox .itemBox dt{ border-radius: 30px 30px 0px 0px; background: var(--mainC); width: 100%; height: 60px; display:flex; justify-content:center; align-items:center; 
color:#fff; font-weight: 700; letter-spacing: -0.4px;}
.businessV #develop #foundry .ctnBox .itemBox dd{ border:1px solid #ddd; border-radius: 0px 0px 30px 30px; border-top:none; text-align: center; padding: 30px 20px;
height: calc(100% - 60px); display:flex; flex-direction:column; align-items:center; justify-content: space-between;}
.businessV #develop #foundry .ctnBox .itemBox dd .txt{ margin-top: 15px; color:#333; font-weight: 500; letter-spacing: -0.54px; margin-bottom: 30px;}
.businessV #develop #foundry .ctnBox .itemBox dd .txtBox { padding: 20px; border-radius: 20px; border: 2px solid var(--mainC); background: #FFF; box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.10);
width: 100%; }
.businessV #develop #foundry .ctnBox .itemBox dd .txtBox .title{ color:var(--mainC); font-weight: 700; letter-spacing: -0.66px; }
.businessV #develop #foundry .ctnBox .itemBox dd .txtBox .txt{ margin-top: 5px; color:#666; font-weight: 400; letter-spacing: -0.48px; margin-bottom: 0;}
.businessV #develop #foundry .ctnBox .itemBox dd .flexBox{ justify-content:space-between; }
.businessV #develop #foundry .ctnBox .itemBox dd .flexBox div{ width: calc((100% - 10px) / 2);}
.businessV #develop #research .ctnBox:not(:last-child){ margin-top: 60px;}
.businessV #develop #research .ctnBox{ display:flex; flex-wrap:wrap; gap:0 30px; }
.businessV #develop #research .ctnBox .itemBox .title{ color:#222; font-weight: 600; letter-spacing: -0.48px; margin-bottom: 30px; }
.businessV #develop #research .ctnBox .itemBox .imgBox{ display:flex; justify-content:space-between; align-items:center; padding: 30px; border-radius: 50px; border: 1px solid #EEE; 
height: 400px;}
.businessV #develop #research .ctnBox .itemBox.item01{ width: 100%; margin-bottom: 60px;}
.businessV #develop #research .ctnBox .itemBox.item02{ width: calc(100% - 430px);}
.businessV #develop #research .ctnBox .itemBox.item02 .imgBox figure{ display:flex; flex-direction:column; justify-content:center; text-align: center;  }
.businessV #develop #research .ctnBox .itemBox.item02 .imgBox figure span{ color:#333; font-weight: 500; margin-top: 10px; letter-spacing: -0.36px;}
.businessV #develop #research .ctnBox .itemBox.item03{ width: 400px;}

#company h3.title{ letter-spacing: -0.92px; line-height: 1.52; font-weight: 600; color:#111; margin-bottom: 100px;} 
#company .ctnBox{ position: relative; padding: 0 70px 7px; display:flex; align-items:center; }
#company .ctnBox .bg{ position: absolute; bottom: 0; transform:translateX(-50%); left: 50%; width: max-content; z-index: -1;} 
#company .ctnBox .center{ position: relative; z-index: 5;}
#company .ctnBox .itemWrap{ width: 460px;}	
#company .ctnBox .itemWrap .itemBox{ width: 100%; padding: 40px;border-radius: 20px; border: 1px solid #DDD; background: #FFF;}
#company .ctnBox .itemWrap .itemBox:not(:last-child){ margin-bottom: 188px;}
#company .ctnBox .itemWrap .itemBox dt{ color:#222; font-weight: 700; letter-spacing: -0.48px; margin-bottom: 20px; }
#company .ctnBox .itemWrap .itemBox dd{ display:flex; }
#company .ctnBox .itemWrap .itemBox dd p{ min-width:100px; width: 100%; border-radius: 15px; background: #F5F5F5; color:#666; font-weight: 500; letter-spacing: -0.36px; height: 100px; padding: 0 20px;
display:flex; justify-content:center; align-items:center; text-align: center; }
#company .ctnBox .itemWrap .itemBox dd p:not(:last-child){ margin-right: 10px;}
#company .ctnBox .itemWrap.left{ margin-right: -5px;}
#company .ctnBox .itemWrap.left .itemBox dt{ text-align: right; }
#company .ctnBox .itemWrap.right{ margin-left: -5px;}

#ceo .ctnBox{ display:flex; }
#ceo .ctnBox .imgBox{ margin-right: 110px; display:flex; flex-direction:column; align-items: flex-end; flex-shrink:0; }
#ceo .ctnBox .imgBox .img{ position: relative; border-radius: 50%; border: 1px dashed rgba(0,0,0,0.2); padding: 30px; display:flex; justify-content:center; align-items:center; }
#ceo .ctnBox .imgBox .txtBox{ margin: 0 0 0 auto; display:inline-block; color:#111; }
#ceo .ctnBox .imgBox .txtBox .name{ font-weight: 600; letter-spacing: -0.4px; margin: 10px 0; }
#ceo .ctnBox .imgBox .txtBox .eng{ line-height: 1.8; font-family: var(--arch);}
#ceo .ctnBox > .txtBox{ padding-top: 30px; width: 100%; }
#ceo .ctnBox > .txtBox .title{ color:#111; line-height: 1.25; letter-spacing: -1.12px; font-weight: 600;}
#ceo .ctnBox > .txtBox .txt{ margin: 30px 0 40px; line-height: 1.57; letter-spacing: -0.56px; color:#222; font-weight: 500; }
#ceo .ctnBox > .txtBox ul{ border-top:1px solid #ddd; padding: 40px; width: 100%; }
#ceo .ctnBox > .txtBox ul li{ color:#666; letter-spacing: -0.36px; display:flex; }
#ceo .ctnBox > .txtBox ul li:not(:last-child){ margin-bottom: 15px;}
#ceo .ctnBox > .txtBox ul li:before{ content:''; display:block; width: 4px; height: 4px; background: var(--mainC); border-radius:50%; margin-right: 10px; margin-top: 9.5px;}

#history .ctnBox{ position: relative; padding: 0 50px; }
#history .ctnBox .bar{ position: absolute; top: 77px; transform:translateX(-50%); left: 50%; background: #DBD3C7; width: 1px; height: calc(100% - 77px); }
#history .ctnBox .bar span{ display: block; width: 3px; background: #00489D; position: absolute; left: -1px;  top: 0; height: 100%; }
#history .ctnBox .itemBox{ display:flex; }
#history .ctnBox .itemBox:not(:last-child){ margin-bottom: 200px;}
#history .ctnBox .itemBox > *{ width: calc((100% - 260px) / 2); flex-shrink: 0; }
#history .ctnBox .itemBox div:first-child{ margin-right: 260px; }
#history .ctnBox .itemBox .imgBox .year{ position: relative; color:var(--mainC); font-weight: 800; font-family:var(--arch); margin-bottom: 20px; text-align: right; }
#history .ctnBox .itemBox .imgBox .year span.txt{ color: rgb(45, 52, 81, 0.3); background: linear-gradient(to left, var(--mainC), var(--mainC)) no-repeat; -webkit-background-clip: text; background-clip: text; background-size: 0%; transition: all 0.7s 0.5s; }
#history .ctnBox .itemBox .imgBox.aos-animate .year span.txt{ background-size: 100%; }
#history .ctnBox .itemBox .imgBox .year span.circle{ position: relative; position: absolute; transform:translateY(-50%); top: 50%; left: -142px; display:block; border-radius: 50%; width: 25px; height: 25px; background: linear-gradient(120deg,#00489D, #00B3C4); display:flex; justify-content:center; align-items:center; }
#history .ctnBox .itemBox .imgBox .year span.circle:after{ content:''; display:block; border-radius:50%; width: 19px; height: 19px; background: #fff; }
#history .ctnBox .itemBox .imgBox .year span.circle:before{ content:'';display:block; width: 60px; height: 60px; border-radius:50%; background: rgba(0,0,0,0.1); position: absolute; transform:translate(-50%,-50%); top: 50%; left: 50%;z-index: -1; animation: circleH 2s both infinite;}
#history .ctnBox .itemBox .txtBox{ margin-top: 150px;}
#history .ctnBox .itemBox .txtBox dl{ display:flex; color:#333; }
#history .ctnBox .itemBox .txtBox dl:not(:last-child){ margin-bottom: 40px; }
#history .ctnBox .itemBox .txtBox dl dt{ color:#333; font-family: var(--arch); font-weight: 700; margin-right: 15px;}
#history .ctnBox .itemBox .txtBox dl dd p{ position: relative; letter-spacing: -0.4px; }
#history .ctnBox .itemBox .txtBox dl dd p:not(:last-child){ margin-bottom: 15px;}
#history .ctnBox .itemBox .txtBox dl dd p.line span{ position: relative;}
#history .ctnBox .itemBox .txtBox dl dd p.line span:before{ content:''; display:block; width: 100%; height: 10px; background: #DBD3C7;  position: absolute; bottom: 0; left: 0; z-index: -1; }
#history .ctnBox .itemBox:nth-child(2n) .txtBox{ text-align: right; }
#history .ctnBox .itemBox:nth-child(2n) .txtBox dl{ flex-direction: row-reverse;}
#history .ctnBox .itemBox:nth-child(2n) .txtBox dl dt{ margin-right: 0; margin-left: 15px;}
#history .ctnBox .itemBox:nth-child(2n) .imgBox .year{ text-align: left; }
#history .ctnBox .itemBox:nth-child(2n-1) .imgBox .year span{ left: auto; right: -142px;}

@keyframes circleH {
  0%,100%{
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

#location .ctnBox{ position: relative; width: 100%; height: 850px; overflow: hidden;}
#location .ctnBox .tabBox{ position: absolute; top: 30px; left: 30px; z-index: 10; }
#location .ctnBox .tabBox .itemBox{ width: 100%; min-height:150px; border-radius: 20px;  border: 1px solid #DDD; background: #F5F5F5; padding: 30px; cursor:pointer; max-width: 400px;}
#location .ctnBox .tabBox .itemBox:not(:last-child){ margin-bottom: 10px;}
#location .ctnBox .tabBox .itemBox .title{ display:flex; justify-content:space-between; align-items:center; color:#333; letter-spacing: -0.4px; font-weight: 600; margin-bottom: 6px; 
transition:all 0.5s; }
#location .ctnBox .tabBox .itemBox .title .num{ display:inline-flex; height: 30px; line-height: 30px; padding: 0 10px; border-radius:50px; background: #ddd; color:#666; transition:all 0.3s;  }
#location .ctnBox .tabBox .itemBox .title div{ display:flex; align-items:center; }
#location .ctnBox .tabBox .itemBox .title div a{ width: 30px; height: 30px; border-radius:50%; background: #aaa; display:flex; justify-content:center; align-items:center; margin-left: 5px;
transition:all 0.3s; }
#location .ctnBox .tabBox .itemBox .txt{ color:#666; letter-spacing: -0.32px; line-height: 1.62; transition:all 0.5s; }
#location .ctnBox .tabBox .itemBox.on{ border:1px solid #000; }
#location .ctnBox .tabBox .itemBox.on .title{ color:#111; }
#location .ctnBox .tabBox .itemBox.on .title .num{ color:#fff; background: #000; }
#location .ctnBox .tabBox .itemBox.on .title div a{ background: linear-gradient(120deg,#00489D, #00B3C4);}
#location .ctnBox .mapBox,
#location .ctnBox .mapBox .map{ position: relative; width: 100%; height: 100%; overflow: hidden; border-radius:50px; }
#location .ctnBox .mapBox{ position: relative;}
#location .ctnBox .mapBox .map{ position: absolute; top: 0; left: 0; z-index: 1;}
#location .ctnBox .mapBox .map > div{ width: 100%;}
#location .ctnBox .mapBox .map.on{ z-index: 5;}

#technology section:not(:last-child){ margin-bottom: 150px; }
#technology section > .titleBox{ margin-bottom: 30px;}
#technology section > .titleBox h3.title{ color:#222; font-weight: 600; letter-spacing: -0.92px; }
#technology section > .titleBox .txt{ margin-top: 20px; color:#333; letter-spacing: -0.4px; }
#technology .phage .ctnBox,
#technology .phage .ctnBox .itemWrap{ position: relative; display:flex; gap:40px; flex-wrap:wrap; }
#technology .phage .ctnBox{ border-radius: 50px; border: 1px solid #EEE; background: #FFF; padding: 60px;}
#technology .phage .ctnBox .itemWrap{ width: calc(100% - ((100% - 160px) / 5 * 2) - 80px); }
#technology .phage .ctnBox .itemWrap .itemBox{ position: relative; width: calc((100% - 80px) / 3); z-index: 2;}
#technology .phage .ctnBox .itemBox{ width: calc((100% - 160px) / 5);}
#technology .phage .ctnBox .itemBox figure{ text-align: center; border-radius: 20px 20px 0px 0px; border: 1px solid #DDD; background: #FFF; text-align: center; padding: 30px 20px 0;
 height: calc(100% - 60px); min-height:275px; }
#technology .phage .ctnBox .itemBox figure .txt{ color:#666; font-family: var(--exo); margin-top: 10px; }
#technology .phage .ctnBox .itemBox .title{ border-radius: 0px 0px 20px 20px; background: var(--mainC); color:#fff; font-family: var(--exo); font-weight: 600; text-align: center; 
height: 60px; display:flex; justify-content:center; align-items:center; }
#technology .tech .ctnBox > div{ display:flex; gap:30px; }
#technology .tech .ctnBox{ padding: 60px; border-radius: 50px; border: 1px solid #EEE; }
#technology .tech .ctnBox .txtBox{ margin-bottom: 30px;}
#technology .tech .ctnBox .txtBox .itemBox{ width: calc((100% - 60px) / 3); border-radius: 20px; border: 1px solid #000; min-height: 200px; padding: 40px; }
#technology .tech .ctnBox .txtBox .itemBox .num{ width: 40px; height: 40px; border-radius:50%; background: #000; color:#fff; display:flex; justify-content:center; align-items:center; margin-bottom: 20px; line-height: 0.5;}
#technology .tech .ctnBox .txtBox .itemBox .txt{ color:#333; line-height: 1.66; letter-spacing: -0.36px; font-weight: 500; }
#technology .tech .ctnBox .imgBox .itemBox{ width: calc((100% - 30px) / 2);}
#technology .tech .ctnBox .imgBox .itemBox .img{ height: calc(100% - 60px); border-radius: 20px 20px 0px 0px; border: 1px solid #DDD; background: #FFF; padding: 50px 20px; text-align: center; display: flex;  flex-direction: column; justify-content: center; align-items: center;}
#technology .tech .ctnBox .imgBox .itemBox .orderBox{ display:flex; justify-content:center; align-items:center; margin-top: 20px;}
#technology .tech .ctnBox .imgBox .itemBox .orderBox p{ display:flex; align-items:center; color:#666; line-height: 1.66; letter-spacing: -0.36px; }
#technology .tech .ctnBox .imgBox .itemBox .orderBox p:last-child{ color:#333; font-weight: 600; }
#technology .tech .ctnBox .imgBox .itemBox .orderBox p img{ margin: 0 30px;}
#technology .tech .ctnBox .imgBox .itemBox .title{ display: flex; height: 60px; padding: 0 30px; justify-content: center; align-items: center; border-radius: 0px 0px 20px 20px; 
background: var(--mainC); margin-top: -1px; color:#fff; letter-spacing: -0.36px; font-weight: 600; }
#technology .tech.breath .ctnBox .imgBox .itemBox:last-child .img{ padding: 30px 20px 50px;}
#technology .tech.breath .ctnBox .imgBox .itemBox .orderBox{ margin-top: 0;}

#product section:not(:last-child){ margin-bottom: 150px;}
#product section h3.title{ color:#222; font-weight: 600; margin-bottom: 30px; letter-spacing: -0.92px;}
#product section .content{ border-radius: 50px; border: 1px solid #EEE; padding: 60px; }
#product section dl dt{ height: 60px; border-radius: 20px 20px 0px 0px; background: var(--mainC); color:#fff; font-weight: 600; letter-spacing: -0.4px; text-align: center; display:flex; justify-content:center; align-items:center; }
#product section dl dd{ border-radius: 0px 0px 20px 20px; border: 1px solid #DDD; margin-top: -1px; padding: 30px;}
#product .m13 .content{ display:flex; }
#product .m13 .content .img{ margin: 75px 60px 0 0; border-radius:50%; border:1px dashed rgba(0,0,0,0.3); width: 430px; height: 430px; display:flex; justify-content:center; align-items:center; 
flex-shrink:0; }
#product .m13 .content .ctnBox{ width: 100%; }
#product .m13 .content .ctnBox dl dd > .title{ margin-bottom: 30px; line-height: 1.66; letter-spacing: -0.36px; color:#666; text-align: center; }
#product .m13 .content .ctnBox dl dd .imgBox{ display:flex; align-items:center; margin: 0 20px; }
#product .m13 .content .ctnBox dl dd .imgBox .circle{ position: relative; z-index: 2;}
#product .m13 .content .ctnBox dl dd .imgBox .circle svg{ width: 100%;}
#product .m13 .content .ctnBox dl dd .imgBox .itemWrap{ margin-left: -4px;}
#product .m13 .content .ctnBox dl dd .imgBox .itemWrap .itemBox{ width: 380px; height:122px; padding: 30px; border-radius: 20px; border:1px solid #ddd; display:flex; align-items:center; 
background: #F5F5F5; }
#product .m13 .content .ctnBox dl dd .imgBox .itemWrap .itemBox:not(:last-child){ margin-bottom: 135px;}
#product .m13 .content .ctnBox dl dd .imgBox .itemWrap .itemBox .txtBox{ margin-left: 30px;}
#product .m13 .content .ctnBox dl dd .imgBox .itemWrap .itemBox .txtBox .title{ color:#333; letter-spacing: -0.4px; font-weight: 600; margin-bottom: 10px;}
#product .m13 .content .ctnBox dl dd .imgBox .itemWrap .itemBox .txtBox .txt{ color:#666; line-height: 1.5; letter-spacing: -0.34px; white-space:nowrap; }
#product .m13 .content .ctnBox dl dd .imgBox .itemWrap.left{ margin-left: 0; margin-right: -4px;}
#product .m13 .content .ctnBox dl dd .imgBox .itemWrap.left .itemBox{ justify-content:flex-end; }
#product .m13 .content .ctnBox dl dd .imgBox .itemWrap.left .itemBox .txtBox{ text-align: right; margin-left: 0; margin-right: 30px;}
#product .m13 .content .ctnBox .inquiryBox{ margin: 120px 0 0 110px; display: inline-block; text-align: center; }
#product .m13 .content .ctnBox .inquiryBox p{ color:#333; font-weight: 600; letter-spacing: -0.48px; }
#product .m13 .content .ctnBox .inquiryBox button{ width: 350px; height: 80px; background: var(--mainC); border-radius:20px; color:#fff; font-weight: 500; letter-spacing: -0.4px; 
margin: 30px auto 40px; }

#product .pro .content .infoBox{ display:flex; margin-bottom: 100px;}
#product .pro .content .infoBox > *{ width: calc((100% - 60px) / 2);}
#product .pro .content .infoBox .txtBox{ margin-right: 60px; }
#product .pro .content .infoBox .txtBox figure{ margin-bottom: 40px;}
#product .pro .content .infoBox .txtBox ul{ background: #F5F5F5; border-radius:20px; padding: 30px 40px; }
#product .pro .content .infoBox .txtBox ul li{ display:flex; align-items:center; color:#666; font-family: var(--exo);}
#product .pro .content .infoBox .txtBox ul li:not(:last-child){ margin-bottom: 10px; }
#product .pro .content .infoBox .txtBox ul li span{ display:block; max-width:210px; width: 100%; margin-right: 20px; color:#222; font-weight: 600; }
#product .pro .content .ctnBox{ display:flex; align-items:center; }
#product .pro .content .ctnBox .imgBox{ position: relative; margin-right: 60px; display:flex; justify-content:center; align-items:center; width: 100%; }
#product .pro .content .ctnBox .imgBox .title{ position: absolute; top: 0; left: 0; color:#222; font-weight: bold; }
#product .pro .content .ctnBox .tableBox{ max-width:1020px; width: 100%; flex-shrink:0; } 
#product .pro .content .ctnBox .tableBox table:not(:last-child){ margin-bottom: 30px;}
#product .pro .content .ctnBox .tableBox table tr > *{ height: 60px;}
#product .pro .content .ctnBox .tableBox table tr th{ background: var(--mainC); color:#fff; font-weight: 500; letter-spacing: -0.36px;}
#product .pro .content .ctnBox .tableBox table tr th:first-child{ border-radius:10px 0 0 10px; }
#product .pro .content .ctnBox .tableBox table tr th:last-child{ border-radius: 0 10px 10px 0; }
#product .pro .content .ctnBox .tableBox table tr td{ padding: 0 10px; color:#666; letter-spacing: -0.36px; border-bottom: 1px solid #DDD; text-align: center; }
#product .pro .content .ctnBox .tableBox .table1 tr td:first-child{ text-align: left;}
#product .pro .content .ctnBox .tableBox .table1 tr td:first-child p{ display:flex; }
#product .pro .content .ctnBox .tableBox .table1 tr td span{ display:inline-block; margin-right: 5px;}

#product .pro.pen .content .infoBox .imgBox dd{ display:flex; gap: 30px; flex-wrap:wrap; }
#product .pro.pen .content .infoBox .imgBox .itemBox{ width: calc((100% - 30px) / 2); text-align: center; }
#product .pro.pen .content .infoBox .imgBox .itemBox .img{ min-height:252px; display:flex; flex-direction:column; justify-content:center; align-items:center; padding: 30px 10px; border: 1px solid #DDD; border-radius: 20px 20px 0px 0px;}
#product .pro.pen .content .infoBox .imgBox .itemBox .img p{ color:#666; letter-spacing: -0.32px; margin-top: 10px;}
#product .pro.pen .content .infoBox .imgBox .itemBox .title{ border-radius: 0px 0px 20px 20px; height: 60px; height: 60px; display:flex; justify-content:center; align-items:center; background: #f5f5f5; color:#333; font-weight: 600; border: 1px solid #DDD; margin-top: -1px;}
#product .pro.pen .content .infoBox .imgBox .itemBox:last-child{ width: 100%; }
#product .pro.pen .content .infoBox .imgBox .itemBox:last-child .img{ width: 100%; display:flex; flex-direction:row; }
#product .pro.pen .content .infoBox .imgBox .itemBox:last-child .img .item .circle{ position: relative; width: 170px; height: 170px; border-radius:50%; color:#fff; display:flex; justify-content:center; align-items:center; flex-direction:column; text-align: center; background: #00B3C4;} 
#product .pro.pen .content .infoBox .imgBox .itemBox:last-child .img .item .circle p{ color:#fff; letter-spacing: -0.4px; font-weight: 500; }
#product .pro.pen .content .infoBox .imgBox .itemBox:last-child .img .item .circle .txt{ margin-top: 0; }
#product .pro.pen .content .infoBox .imgBox .itemBox:last-child .img .item .circle .txt2{ font-weight: 600; letter-spacing: 0;}
#product .pro.pen .content .infoBox .imgBox .itemBox:last-child .img .item .circle figure{ width: 50px; height: 50px; display:flex; justify-content:center; align-items:center; border-radius:50%; background: #fff; border:1px solid rgba(170, 170, 170, 1); position: absolute; transform:translateY(-50%); top: 50%; right: -25px; }
#product .pro.pen .content .infoBox .imgBox .itemBox:last-child .img .item .bTxt{ line-height: 1.25; margin-top: 2px; }
#product .pro.pen .content .infoBox .imgBox .itemBox:last-child .img .item01{ position: relative; z-index: 3;}
#product .pro.pen .content .infoBox .imgBox .itemBox:last-child .img .item01 .circle .txt2{ font-family: var(--exo); }
#product .pro.pen .content .infoBox .imgBox .itemBox:last-child .img .item02{ position: relative; z-index: 2; }
#product .pro.pen .content .infoBox .imgBox .itemBox:last-child .img .item02 .circle{ width: auto; padding: 0 50px; background: #00489D; border-radius:100px; display:flex; flex-direction: row;}
#product .pro.pen .content .infoBox .imgBox .itemBox:last-child .img .item02 .circle > div{ margin-right: 30px;}
#product .pro.pen .content .infoBox .imgBox .itemBox:last-child .img .item02 .circle ul{ text-align: left; font-family: var(--exo); font-weight: 600; line-height: 1.65;}
#product .pro.pen .content .infoBox .imgBox .itemBox:last-child .img .item02 .circle ul li span{ font-family: var(--baseFont);}
#product .pro.pen .content .infoBox .imgBox .itemBox:last-child .img .item03 .circle{ background: #2D3451; }
#product .pro.pen .content .ctnBox .imgBox{ height: 810px;}
#product .pro.pen .content .ctnBox .tableBox table tr.type2 td:not(:last-child){ border-right:1px solid #ddd; }

#product .pro.pim .content .infoBox .txtBox figure{ margin-bottom: 0;}
#product .pro.pim .content .infoBox .imgBox .img{ position: relative; }
#product .pro.pim .content .infoBox .imgBox .img ul{ position: absolute; top: 0; left: 0; }
#product .pro.pim .content .infoBox .imgBox .img ul li{ display:flex; align-items:center; color:#666; font-weight: 300; letter-spacing: -0.32px;}
#product .pro.pim .content .infoBox .imgBox .img ul li:not(:last-child){ margin-bottom: 10px;}
#product .pro.pim .content .infoBox .imgBox .img ul li img{ margin-right: 10px; }
#product .pro.pim .content .infoBox .imgBox .itemBox{ display:flex; align-items:center; border-radius: 20px; border: 2px solid var(--main, #2D3451); background: #FFF; box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.10); padding: 30px; }
#product .pro.pim .content .infoBox .imgBox .itemBox .txtBox{ margin-left: 40px; margin-right: 0;}
#product .pro.pim .content .infoBox .imgBox .itemBox .txtBox .title{ color:#fff; background: var(--mainC); padding: 11px 20px; border-radius:50px; margin-bottom: 10px; display:inline-block; }
#product .pro.pim .content .infoBox .imgBox .itemBox .txtBox .txt{ line-height: 1.66; letter-spacing: -0.36px; color:#666; font-weight: 300; }
#product .pro.pim .content .ctnBox .imgBox{ height: 690px;}
#product .pro.pim .content .ctnBox .tableBox table tr.type2 td{ height: 40px; text-align: center; }
#product .pro.pim .content .ctnBox .tableBox table tr.type2 td:not(:last-child){ border-right:1px solid #ddd; } 
#product .pro.pim .content .ctnBox .tableBox table tr.type2 td.total{ text-align: left;  }

#product .pro.pit .content .infoBox .txtBox figure{ margin-bottom: 0; }
#product .pro.pit .content .infoBox .imgBox dd .itemBox{ display:flex; align-items: center; border-radius: 20px; background: #F5F5F5; padding: 30px; }
#product .pro.pit .content .infoBox .imgBox dd .itemBox:not(:last-child){ margin-bottom: 30px;}
#product .pro.pit .content .infoBox .imgBox dd .itemBox > figure{ margin-right: 30px;}
#product .pro.pit .content .infoBox .imgBox dd .itemBox .txtBox{ text-align: center; margin-right: 0;}
#product .pro.pit .content .infoBox .imgBox dd .itemBox .txtBox .title{ font-weight: bold; color:#333; letter-spacing: -0.36px; margin-bottom: 5px; }
#product .pro.pit .content .infoBox .imgBox dd .itemBox .txtBox .txt{ color:#666; letter-spacing: -0.28px; font-weight: 300; margin-bottom: 20px;}

.ir .topCtn{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 60px;}
.ir .topCtn .tabBox{ display:flex; align-items:center; margin-left: 30px; }
.ir .topCtn .tabBox li{ position: relative; display:flex; align-items:center; }
.ir .topCtn .tabBox li:not(:last-child):after{ content:''; display:block; width: 8px; height: 8px; border-radius:50%; background: rgba(0,0,0,0.1); margin: 0 40px;}
.ir .topCtn .tabBox li a{ color:rgba(17,17,17,0.3); font-weight: bold; letter-spacing: -0.56px; transition:all 0.5s; }
.ir .topCtn .tabBox li:hover a,
.ir .topCtn .tabBox li.on a{ color:#111; }
.ir .topCtn .searchBox{ display:flex; }
.ir .topCtn .searchBox > *{ height: 70px; border-radius: 20px; border: 1px solid #DDD; padding: 0 30px; }
.ir .topCtn .searchBox select{ width: 260px; margin-right: 10px; background: url(/img/common/selectIcon.png) no-repeat; background-position: right 30px top 50%; color:#333; 
letter-spacing: -0.32px;} 
.ir .topCtn .searchBox .inputBox{ width: 450px; display:flex; justify-content:space-between; align-items:center; }
.ir .topCtn .searchBox .inputBox input{ width: 100%; margin-right: 20px;}
.ir .topCtn .searchBox .inputBox button{ flex-shrink:0; }

#notice .ctnBox .itemBox{}
#notice .ctnBox .itemBox a{ display:flex; align-items:center; border-radius:20px; border:1px solid #ddd; min-height:100px; text-align: center; transition:all 0.5s; }
#notice .ctnBox .itemBox:not(:last-child){ margin-bottom: 10px; } 
#notice .ctnBox .itemBox p{ padding: 0 30px; color:#aaa; letter-spacing: -0.36px; }
#notice .ctnBox .itemBox .num{ width: 11%; font-family:  var(--arch); color:#333; }
#notice .ctnBox .itemBox .num span{ display:inline-block; padding: 6px 15px; border: 1px solid #DDD; border-radius:40px; color:#666; font-weight: 600; letter-spacing: -0.28px; transition:all 0.5s; }
#notice .ctnBox .itemBox .title{ width: 50%; text-align: left; color:#333; letter-spacing: -0.4px; height: 100%; transition:padding 0.5s, font-weight .2s ease-in-out; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-break: break-word; color:#333; }
#notice .ctnBox .itemBox .name{ width: 11%;}
#notice .ctnBox .itemBox .day{ width: 17%;  font-family:  var(--arch); }
#notice .ctnBox .itemBox .count{ width: 11%;  font-family:  var(--arch);}
#notice .ctnBox .itemBox.point .title { font-weight: 600; color:#333}
#notice .ctnBox .itemBox:hover a{ border:1px solid #000; }
#notice .ctnBox .itemBox:hover .num span{ background: #000; color:#fff; }
#notice .ctnBox .itemBox:hover .title{ padding-left: 50px; font-weight: 600; }

#view .ctnBox .titleBox{ display:flex; justify-content: space-between; flex-wrap:wrap; padding-bottom: 40px; border-bottom:1px solid #000; }
#view .ctnBox .titleBox .title{ font-weight: 600; letter-spacing: -0.8px; color:#111; margin-right: 30px;}
#view .ctnBox .titleBox ul{ display:flex; align-items:center; color:#aaa; letter-spacing: -0.36px; }
#view .ctnBox .titleBox ul li:not(:first-child){ font-family: var(--arch);}
#view .ctnBox .titleBox ul li:not(:last-child){ margin-right: 30px;}
#view .ctnBox .infoBox { padding: 100px 20px 140px; text-align: center; }
#view .ctnBox .infoBox figure{ margin-bottom: 80px;}
#view .ctnBox .infoBox p{ color:#333; letter-spacing: -0.36px; line-height: 1.66; }
#view .ctnBox .fileBox{ margin-bottom: 100px;}
#view .ctnBox dl{ position: relative; display:flex; align-items:center; height: 80px; border-radius: 20px; border: 1px solid #DDD; padding: 0 60px;}
#view .ctnBox dl:after{ content:''; display:block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; border:1px solid #000; border-radius:20px; opacity: 0; transition:all 0.5s; 
pointer-events:none; }
#view .ctnBox dl:not(:last-child){ margin-bottom: 10px; }
#view .ctnBox dl dt{ text-align: center; font-weight: 600; color:#333; letter-spacing: -0.36px; margin-right: 70px; flex-shrink:0; }
#view .ctnBox dl dd{ color:#666; letter-spacing: -0.36px; width: 100%;}
#view .ctnBox dl dd a{ display:flex; align-items:center; justify-content:space-between;  }
#view .ctnBox dl dd a .img{ flex-shrink:0; }
#view .ctnBox dl dd a .img img{ vertical-align:middle; }
#view .ctnBox dl dd .txt{  text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-break: break-word; }
#view .ctnBox dl:hover:after{ opacity: 1;}
#view .ctnBox .pages dl dt{ display:flex; align-items:center; }
#view .ctnBox .pages dl dt img{ margin-left: 10px;}
#view .ctnBox #btnBox{ position: relative; width: 60px; height: 60px; border-radius:50%; border:1px solid rgba(0,0,0,0.1); display:flex; justify-content:center; align-items:center; 
margin: 80px auto 0; }
#view .ctnBox #btnBox:before{ content:''; display:block; width: 10px; height: 10px; border-radius:50%; background: #000; position: absolute; transform:translate(-50%,-50%); top: 50%; left: 50%; transition:all 0.5s; opacity: 0;}
#view .ctnBox #btnBox img{ position: relative; z-index: 5; transition:all 0.5s; }
#view .ctnBox #btnBox:hover:before{ opacity: 1; width: 100%; height: 100%; }
#view .ctnBox #btnBox:hover img{ filter:invert(1); }

.gallery .ctnBox{ display:flex; flex-wrap:wrap; gap:60px 40px; }
.gallery .ctnBox .itemBox{ width: calc((100% - 120px) / 4);}
.gallery .ctnBox .itemBox a{ position: relative; display:block; padding: 10px; min-height: 440px; height: 100%; border-radius: 20px; border: 1px solid #DDD; }
.gallery .ctnBox .itemBox a:after{ content:''; display:block; position: absolute; top: -1px; left: -1px;  width: 100%; height: 100%; border:1px solid #000; opacity: 0; border-radius:20px; transition:all 0.5s; pointer-events:none; }
.gallery .ctnBox .itemBox figure{ width: 100%; height: 250px; margin-bottom: 30px; border-radius:15px; }
.gallery .ctnBox .itemBox .txtBox{ padding: 0 20px 20px; height: calc(100% - 280px); display:flex; flex-direction:column; justify-content:space-between; }
.gallery .ctnBox .itemBox .title{ color:#222; font-weight: 600; letter-spacing: -0.44px; line-height: 1.55; margin-bottom: 30px; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
.gallery .ctnBox .itemBox .txtBox .txt{ color:#aaa; font-family: var(--arch); }
.gallery .ctnBox .itemBox:hover a:after {opacity: 1; }

.gallery2 .ctnBox .itemBox{ position: relative; min-height:auto; padding: 10px; padding-bottom: 30px; min-height: 440px; height: 100%; border-radius: 20px; border: 1px solid #DDD;
overflow: hidden;}
.gallery2 .ctnBox .itemBox:after{ content:''; display:block; position: absolute; top: 0; left: 0; border:1px solid #000; opacity: 0; border-radius:20px; transition:all 0.5s;
pointer-events:none; z-index: 12;}
.gallery2 .ctnBox .itemBox figure{ height: 510px; margin-bottom: 20px;}
.gallery2 .ctnBox .itemBox .title{ position: relative; z-index: 1; margin: 0 20px 20px; font-weight: 600; line-height: 1.5; letter-spacing: -0.4px; color:#222; -webkit-line-clamp: 3; margin-bottom: 0; 
transition:all 0.3s; }
.gallery2 .ctnBox .itemBox .btnBox{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; display:flex; justify-content:center; align-items:center; background: rgba(255, 255, 255, 0.30);
backdrop-filter: blur(5px); transition:opacity 0.5s; z-index: 10; opacity: 0;}
.gallery2 .ctnBox .itemBox .btnBox span{ width: 150px; height: 150px; border-radius:50%; background: var(--mainC); color:#fff; font-weight: 600; font-family: var(--exo);
 display:flex; justify-content:center; align-items:center; text-align: center; }
.gallery2 .ctnBox .itemBox:hover .btnBox{ opacity: 1;}
.gallery2 .popBox{ position: fixed; transform:translate(-50%,-50%); top: 50%; left: 50%; z-index: 1002; border-radius:20px; overflow: hidden; }
.gallery2 .popBox figure{ width: 534px; height: 750px; }

.gallery2#performance .ctnBox .itemBox:hover .title{ filter:blur(5px); }
.gallery2#patent .ctnBox .itemBox{ cursor:pointer; }

#contact .ctnBox .itemBox{ display:flex; border-radius: 20px; border: 1px solid #DDD; padding: 20px 120px 20px 0;}
#contact .ctnBox .itemBox:not(:last-child){ margin-bottom: 20px;}
#contact .ctnBox .itemBox > dt{ min-width:300px; text-align: center; color:var(--mainC); letter-spacing: -0.36px; font-weight: 500; padding-top: 18px;}
#contact .ctnBox .itemBox > dt span{ font-weight: 700;}
#contact .ctnBox .itemBox > dd{ width: 100%; }
#contact .ctnBox .itemBox > dd input[type="text"],
#contact .ctnBox .itemBox > dd select,
#contact .ctnBox .itemBox > dd .fileBox .txt{ height: 60px; border-radius: 15px; border: 1px solid #DDD; background: #F5F5F5; padding: 0 25px; width: 100%;}
#contact .ctnBox .itemBox > dd select{ background: url(/img/common/selectIcon.png) no-repeat #f5f5f5; background-position: right 25px top 50%;  }
#contact .ctnBox .itemBox > dd input[type="checkbox"],
#contact .ctnBox .itemBox > dd input[type="file"]{ display:none; }
#contact .ctnBox .itemBox > dd input::placeholder{ color:#999; letter-spacing: -0.32px; }
#contact .ctnBox .itemBox > dd input.w300{ width: 300px; }
#contact .ctnBox .itemBox > dd input.w350,
#contact .ctnBox .itemBox > dd select.w350{ width: 350px;}
#contact .ctnBox .itemBox > dd input.w500,
#contact .ctnBox .itemBox > dd .fileBox .txt.w500{ width: 500px;}
#contact .ctnBox .itemBox > dd textarea{ height: 260px; border-radius: 15px; border: 1px solid #DDD; background: #F5F5F5; padding: 20px 25px; width: 100%; resize:none; }
#contact .ctnBox .itemBox > dd .inputBox{ display:flex; align-items:center; gap:10px; }
#contact .ctnBox .itemBox > dd .policyBox{ padding: 25px; border-radius: 15px; border: 1px solid #DDD; background: #F5F5F5; padding: 25px; width: 100%; height: 200px; overflow: hidden;
margin-bottom: 20px;}
#contact .ctnBox .itemBox > dd .policyWrap{ overflow-y: scroll; height: 100%; }
#contact .ctnBox .itemBox > dd .policyWrap::-webkit-scrollbar {width: 2px; background: transparent;}
#contact .ctnBox .itemBox > dd .policyWrap::-webkit-scrollbar-thumb {background: rgba(0,0,0,0.3); border-radius: 50px;}
#contact .ctnBox .itemBox > dd .policyWrap p:not(:last-child), 
#contact .ctnBox .itemBox > dd .policyWrap dl:not(:last-child) {  margin-bottom: 15px;}
#contact .ctnBox .itemBox > dd .policyWrap dl dt { color: #222;  font-weight: 500;  margin-bottom: 10px;}
#contact .ctnBox .itemBox > dd .policyWrap ul { margin-top: 10px;}
#contact .ctnBox .itemBox > dd .policyWrap ul li:not(:last-child) { margin-bottom: 10px;}
#contact .ctnBox .itemBox > dd .policyWrap ul li p { margin-top: 5px; }
#contact .ctnBox .itemBox > dd .chkBox label{ display:flex; align-items:center; color:#333; font-weight: 500; letter-spacing: -0.32px; cursor:pointer; }
#contact .ctnBox .itemBox > dd .chkBox label span{ width: 27px; height: 27px; border-radius:8px; display:flex; justify-content:center; align-items:center; border:1px solid var(--mainC);
 margin-right: 10px;  background: var(--mainC); opacity: 0.3; transition:all 0.3s; }
#contact .ctnBox .itemBox > dd .chkBox input[type="checkbox"]:checked + label span { opacity: 1;}
#contact .ctnBox .itemBox > dd .fileBox:not(:last-child){ margin-bottom: 10px; }
#contact .ctnBox .itemBox > dd .fileBox label{ display:inline-flex; cursor:pointer; }
#contact .ctnBox .itemBox > dd .fileBox .txt{ display:flex; align-items:center; color:#999; letter-spacing: -0.32px; margin-right: 10px;}
#contact .ctnBox .itemBox > dd .fileBox .btn{ pointer-events:none; }
#contact .ctnBox .itemBox > dd .btn{ width: 60px; height: 60px; border-radius:50%; border:1px solid #ddd; display:flex; justify-content:center; align-items:center; cursor:pointer; }
#contact .bBtn{ display:block; width: 350px; height: 80px; background: var(--mainC); border-radius: 20px; color: #fff; font-weight: 500; letter-spacing: -0.4px; margin: 100px auto 0;}